/* ==========================================================================
   Casa — estilos da aplicação (sobre o Bootstrap 5.3)
   A cor principal vem de variáveis CSS geradas no servidor (App\Core\Theme)
   ========================================================================== */

:root {
    --app-sidebar-w: 250px;
    --app-topbar-h: 60px;
    --app-radius: .75rem;
    --bs-border-radius: .5rem;
    --bs-border-radius-lg: .75rem;
    --app-bg: #f4f6f9;
    --app-surface: #ffffff;
    --app-sidebar-bg: #ffffff;
    --app-sidebar-border: #e5e7eb;
    --bs-font-sans-serif: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

[data-bs-theme=dark] {
    --app-bg: #0f1115;
    --app-surface: #171a21;
    --app-sidebar-bg: #13161c;
    --app-sidebar-border: #262a33;
    --bs-body-bg: #0f1115;
    --bs-tertiary-bg: #1d212a;
}

/* --- Cor principal aplicada aos componentes do Bootstrap ------------------ */
:root, [data-bs-theme] {
    --bs-primary: var(--app-primary);
    --bs-primary-rgb: var(--app-primary-rgb);
    --bs-primary-bg-subtle: var(--app-primary-subtle);
    --bs-primary-text-emphasis: var(--app-primary-text);
    --bs-primary-border-subtle: var(--app-primary);
    --bs-link-color: var(--app-primary-text);
    --bs-link-color-rgb: var(--app-primary-rgb);
    --bs-link-hover-color: var(--app-primary-hover);
    --bs-focus-ring-color: rgba(var(--app-primary-rgb), .25);
}
[data-bs-theme=dark] { --bs-link-color: var(--app-primary-text); }

.btn-primary {
    --bs-btn-bg: var(--app-primary);
    --bs-btn-border-color: var(--app-primary);
    --bs-btn-color: var(--app-on-primary);
    --bs-btn-hover-bg: var(--app-primary-hover);
    --bs-btn-hover-border-color: var(--app-primary-hover);
    --bs-btn-hover-color: var(--app-on-primary);
    --bs-btn-active-bg: var(--app-primary-active);
    --bs-btn-active-border-color: var(--app-primary-active);
    --bs-btn-active-color: var(--app-on-primary);
    --bs-btn-disabled-bg: var(--app-primary);
    --bs-btn-disabled-border-color: var(--app-primary);
    --bs-btn-disabled-color: var(--app-on-primary);
    --bs-btn-focus-shadow-rgb: var(--app-primary-rgb);
}
.btn-outline-primary {
    --bs-btn-color: var(--app-primary-text);
    --bs-btn-border-color: var(--app-primary);
    --bs-btn-hover-bg: var(--app-primary);
    --bs-btn-hover-border-color: var(--app-primary);
    --bs-btn-hover-color: var(--app-on-primary);
    --bs-btn-active-bg: var(--app-primary-active);
    --bs-btn-active-border-color: var(--app-primary-active);
    --bs-btn-active-color: var(--app-on-primary);
    --bs-btn-focus-shadow-rgb: var(--app-primary-rgb);
}
.form-control:focus, .form-select:focus, .form-check-input:focus {
    border-color: rgba(var(--app-primary-rgb), .6);
    box-shadow: 0 0 0 .25rem rgba(var(--app-primary-rgb), .2);
}
.form-check-input:checked { background-color: var(--app-primary); border-color: var(--app-primary); }
.form-switch .form-check-input:focus:not(:checked) {
    --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='rgba%280, 0, 0, 0.25%29'/%3e%3c/svg%3e");
}
.nav-pills { --bs-nav-pills-link-active-bg: var(--app-primary); --bs-nav-pills-link-active-color: var(--app-on-primary); }
.nav-tabs .nav-link.active { color: var(--app-primary-text); border-bottom-color: var(--app-surface); }
.nav-link { color: var(--bs-body-color); }
.pagination {
    --bs-pagination-active-bg: var(--app-primary);
    --bs-pagination-active-border-color: var(--app-primary);
    --bs-pagination-active-color: var(--app-on-primary);
    --bs-pagination-color: var(--app-primary-text);
    --bs-pagination-focus-box-shadow: 0 0 0 .25rem rgba(var(--app-primary-rgb), .25);
}
.dropdown-menu { --bs-dropdown-link-active-bg: var(--app-primary); --bs-dropdown-link-active-color: var(--app-on-primary); }
.list-group { --bs-list-group-active-bg: var(--app-primary); --bs-list-group-active-border-color: var(--app-primary); }
.text-bg-primary { color: var(--app-on-primary) !important; }

/* --- Layout ---------------------------------------------------------------- */
body { background: var(--app-bg); }

.app-shell { display: flex; min-height: 100vh; }

.app-sidebar {
    background: var(--app-sidebar-bg);
    border-right: 1px solid var(--app-sidebar-border);
}
@media (min-width: 992px) {
    .app-sidebar {
        width: var(--app-sidebar-w);
        flex: 0 0 var(--app-sidebar-w);
        position: sticky;
        top: 0;
        height: 100vh;
        overflow-y: auto;
    }
}
@media (max-width: 991.98px) {
    .app-sidebar { --bs-offcanvas-width: 280px; }
}

.app-brand { height: var(--app-topbar-h); padding: 0 1.25rem; border-bottom: 1px solid var(--app-sidebar-border); }
.app-brand a { color: var(--bs-body-color); }

.app-logo {
    display: inline-flex; align-items: center; justify-content: center;
    width: 34px; height: 34px; border-radius: .6rem;
    background: var(--app-primary); color: var(--app-on-primary); font-size: 1.1rem;
}
.app-logo-lg { width: 56px; height: 56px; border-radius: 1rem; font-size: 1.7rem; }

.app-nav { padding: .75rem; gap: 2px; }
.app-nav .nav-link {
    display: flex; align-items: center; gap: .75rem;
    padding: .55rem .8rem; border-radius: .5rem;
    color: var(--bs-secondary-color); font-weight: 500; font-size: .94rem;
}
.app-nav .nav-link i { font-size: 1.1rem; width: 1.25rem; text-align: center; }
.app-nav .nav-link:hover { background: var(--bs-tertiary-bg); color: var(--bs-body-color); }
.app-nav .nav-link.active { background: var(--app-primary-subtle); color: var(--app-primary-text); }
.app-nav-sep { height: 1px; background: var(--app-sidebar-border); margin: .6rem .5rem; }

.app-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }

.app-topbar {
    height: var(--app-topbar-h); display: flex; align-items: center; gap: .25rem;
    padding: 0 1rem; background: var(--app-surface);
    border-bottom: 1px solid var(--app-sidebar-border);
    position: sticky; top: 0; z-index: 1020;
}
.app-icon-btn { color: var(--bs-body-color); text-decoration: none; padding: .375rem .6rem; }
.app-icon-btn:hover { color: var(--app-primary-text); }
.app-avatar {
    width: 32px; height: 32px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--app-primary-subtle); color: var(--app-primary-text); font-weight: 600;
}

.app-content { padding: 1.5rem; max-width: 1400px; width: 100%; }
@media (max-width: 575.98px) { .app-content { padding: 1rem; } }

/* --- Componentes ----------------------------------------------------------- */
.card { border-radius: var(--app-radius); border-color: var(--app-sidebar-border); background: var(--app-surface); }
.card-header { background: transparent; font-weight: 600; border-color: var(--app-sidebar-border); }

.page-header { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; justify-content: space-between; margin-bottom: 1.25rem; }
.page-header h1 { font-size: 1.5rem; margin: 0; font-weight: 600; }

.stat-card { display: flex; align-items: center; gap: 1rem; }
.stat-icon {
    width: 48px; height: 48px; border-radius: .75rem; flex: 0 0 48px;
    display: flex; align-items: center; justify-content: center; font-size: 1.35rem;
    background: var(--app-primary-subtle); color: var(--app-primary-text);
}
.stat-value { font-size: 1.5rem; font-weight: 700; line-height: 1.1; }
.stat-label { font-size: .85rem; color: var(--bs-secondary-color); }

.filters .form-control, .filters .form-select { min-width: 140px; }

.dl-grid { display: grid; grid-template-columns: minmax(130px, 35%) 1fr; gap: .5rem 1rem; margin: 0; }
.dl-grid dt { font-weight: 500; color: var(--bs-secondary-color); }
.dl-grid dd { margin: 0; word-break: break-word; }

.empty-state { text-align: center; padding: 2.5rem 1rem; color: var(--bs-secondary-color); }
.empty-state i { font-size: 2.5rem; display: block; margin-bottom: .5rem; opacity: .5; }

.badge-soft { font-weight: 500; }
.badge-soft.bg-success { background: rgba(var(--bs-success-rgb), .15) !important; color: var(--bs-success-text-emphasis); }
.badge-soft.bg-warning { background: rgba(var(--bs-warning-rgb), .2) !important; color: var(--bs-warning-text-emphasis); }
.badge-soft.bg-danger { background: rgba(var(--bs-danger-rgb), .15) !important; color: var(--bs-danger-text-emphasis); }
.badge-soft.bg-secondary { background: rgba(var(--bs-secondary-rgb), .15) !important; color: var(--bs-secondary-text-emphasis); }
.badge-soft.bg-primary { background: var(--app-primary-subtle) !important; color: var(--app-primary-text); }
.badge-soft.bg-info { background: rgba(var(--bs-info-rgb), .15) !important; color: var(--bs-info-text-emphasis); }

.due-list .list-group-item { display: flex; gap: .75rem; align-items: center; background: transparent; }
.due-dot { width: 10px; height: 10px; border-radius: 50%; flex: 0 0 10px; }

.attachment-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: .75rem; }
.attachment-tile {
    border: 1px solid var(--app-sidebar-border); border-radius: .6rem; overflow: hidden;
    background: var(--bs-tertiary-bg); display: flex; flex-direction: column;
}
.attachment-thumb {
    height: 110px; display: flex; align-items: center; justify-content: center;
    background: var(--bs-secondary-bg); color: var(--bs-secondary-color); font-size: 2.2rem;
}
.attachment-thumb img { width: 100%; height: 100%; object-fit: cover; }
.attachment-meta { padding: .45rem .55rem; font-size: .8rem; min-width: 0; }
.attachment-meta .name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }

.bar-row { display: grid; grid-template-columns: minmax(110px, 30%) 1fr auto; gap: .75rem; align-items: center; margin-bottom: .5rem; font-size: .9rem; }
.bar-track { height: 10px; border-radius: 5px; background: var(--bs-secondary-bg); overflow: hidden; }
.bar-fill { height: 100%; background: var(--app-primary); border-radius: 5px; }

.theme-swatch {
    width: 42px; height: 42px; border-radius: 50%; border: 3px solid transparent;
    display: inline-block; cursor: pointer; box-shadow: inset 0 0 0 1px rgba(0,0,0,.1);
}
.btn-check:checked + .theme-swatch-label .theme-swatch { border-color: var(--bs-body-color); }
.btn-check:focus-visible + .theme-swatch-label .theme-swatch { outline: 2px solid var(--app-primary); outline-offset: 2px; }
.theme-swatch-label { display: inline-flex; flex-direction: column; align-items: center; gap: .25rem; font-size: .8rem; cursor: pointer; }
.theme-swatch-custom { background: conic-gradient(red, yellow, lime, aqua, blue, magenta, red); }

.nav-tabs-scroll { flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; scrollbar-width: thin; }
.nav-tabs-scroll .nav-link { white-space: nowrap; }

/* --- Tabelas que viram cartões em ecrãs pequenos -------------------------- */
.table { --bs-table-bg: transparent; }
.table > :not(caption) > * > * { padding: .65rem .75rem; }
.table thead th { font-size: .8rem; text-transform: uppercase; letter-spacing: .03em; color: var(--bs-secondary-color); font-weight: 600; }
.table-actions { white-space: nowrap; text-align: right; width: 1%; }

@media (max-width: 767.98px) {
    .table-cards thead { display: none; }
    .table-cards, .table-cards tbody, .table-cards tr, .table-cards td { display: block; width: 100%; }
    .table-cards tr {
        border: 1px solid var(--app-sidebar-border); border-radius: .6rem;
        margin-bottom: .75rem; padding: .5rem .75rem; background: var(--app-surface);
    }
    .table-cards td { border: 0; padding: .25rem 0 !important; display: flex; gap: .75rem; justify-content: space-between; text-align: right; }
    .table-cards td::before { content: attr(data-label); font-weight: 500; color: var(--bs-secondary-color); text-align: left; flex: 0 0 auto; }
    .table-cards td[data-label=""]::before, .table-cards td:not([data-label])::before { content: none; }
    .table-cards td.cell-title { font-weight: 600; font-size: 1.02rem; text-align: left; justify-content: flex-start; }
    .table-cards td.table-actions { width: 100%; justify-content: flex-end; padding-top: .5rem !important; border-top: 1px dashed var(--app-sidebar-border); margin-top: .25rem; }
}

/* --- Páginas de visitante (login, instalação) ------------------------------ */
.app-guest-wrap { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 1.5rem 1rem; }
.app-guest-card {
    width: 100%; max-width: 400px; background: var(--app-surface);
    border: 1px solid var(--app-sidebar-border); border-radius: 1rem; padding: 2rem;
    box-shadow: 0 10px 30px rgba(0,0,0,.05);
}
.app-guest-card-wide { max-width: 560px; }
@media (max-width: 575.98px) { .app-guest-card { padding: 1.5rem 1.25rem; } }

@media print {
    .app-sidebar, .app-topbar, .btn, form.d-inline, .filters { display: none !important; }
    .app-content { padding: 0; }
}

.min-w-0 { min-width: 0; }

/* --- Inventário ------------------------------------------------------------ */
.inventory-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: .75rem; }
@media (max-width: 400px) { .inventory-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; } }
.inventory-card { overflow: hidden; }
.inventory-photo {
    position: relative; display: flex; align-items: center; justify-content: center;
    aspect-ratio: 4 / 3; background: var(--bs-secondary-bg); color: var(--bs-secondary-color); font-size: 2.4rem;
}
.inventory-photo img { width: 100%; height: 100%; object-fit: cover; }
.inventory-kind { position: absolute; top: .4rem; left: .4rem; font-size: .8rem; backdrop-filter: blur(4px); }
.qty-control .btn { line-height: 1.2; min-width: 28px; }
.breadcrumb { --bs-breadcrumb-divider: '›'; }
details > summary { list-style: none; cursor: pointer; }
details > summary::-webkit-details-marker { display: none; }