:root {
    --sidebar-width: 250px;
    --sidebar-collapsed-width: 68px;
    --topbar-height: 58px;
    --bottom-nav-height: 62px;
    --brand: #1f6feb;
}

html, body { height: 100%; }
body { background: var(--bs-tertiary-bg); }

/* touch targets: every control is at least 44px tall */
.form-control, .form-select { min-height: 44px; }
.form-control-sm, .form-select-sm { min-height: 44px; }
.btn-close { min-width: 44px; min-height: 44px; background-size: .9rem; }
.dropdown-item { min-height: 44px; display: flex; align-items: center; }
.touch { min-height: 44px; min-width: 44px; display: inline-flex; align-items: center; justify-content: center; gap: .4rem; }
.btn-sm.touch { min-height: 44px; }

/* ---- shell ---------------------------------------------------------------------------------- */
.app-shell { display: flex; min-height: 100vh; }
.app-sidebar { width: var(--sidebar-width); background: var(--bs-body-bg); border-right: 1px solid var(--bs-border-color); flex-shrink: 0; }
.app-brand { height: var(--topbar-height); align-items: center; gap: .6rem; padding: 0 1rem; font-weight: 700; color: var(--brand); border-bottom: 1px solid var(--bs-border-color); }
.app-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.app-topbar { height: var(--topbar-height); display: flex; align-items: center; gap: .6rem; padding: 0 1rem; background: var(--bs-body-bg); border-bottom: 1px solid var(--bs-border-color); position: sticky; top: 0; z-index: 1020; }
.topbar-title { min-width: 0; }
.app-content { flex: 1; padding: 1.25rem 1rem calc(var(--bottom-nav-height) + 1rem); }
.app-footer { text-align: center; padding: .75rem; font-size: .8rem; color: var(--bs-secondary-color); border-top: 1px solid var(--bs-border-color); margin-bottom: var(--bottom-nav-height); }

.side-menu { padding: .5rem; }
.side-group { text-transform: uppercase; font-size: .7rem; letter-spacing: .06em; color: var(--bs-secondary-color); padding: .9rem .75rem .25rem; }
.side-link { display: flex; align-items: center; gap: .75rem; min-height: 44px; padding: 0 .75rem; border-radius: .5rem; color: var(--bs-body-color); text-decoration: none; }
.side-link:hover { background: var(--bs-tertiary-bg); }
.side-link.active { background: var(--brand); color: #fff; }
.side-link i { font-size: 1.1rem; width: 1.25rem; text-align: center; }

@media (min-width: 992px) {
    .app-sidebar { position: sticky; top: 0; height: 100vh; overflow-y: auto; transition: width .15s; }
    .app-content { padding: 1.5rem; }
    .app-footer { margin-bottom: 0; }
    .sidebar-collapsed .app-sidebar { width: var(--sidebar-collapsed-width); }
    .sidebar-collapsed .side-link span, .sidebar-collapsed .side-group, .sidebar-collapsed .brand-text { display: none; }
    .sidebar-collapsed .side-link { justify-content: center; padding: 0; }
}

/* bottom navigation (phones and tablets) */
.bottom-nav { position: fixed; left: 0; right: 0; bottom: 0; height: var(--bottom-nav-height); display: flex; background: var(--bs-body-bg); border-top: 1px solid var(--bs-border-color); z-index: 1030; padding-bottom: env(safe-area-inset-bottom); }
.bottom-nav a { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; font-size: .72rem; color: var(--bs-secondary-color); text-decoration: none; min-height: 44px; }
.bottom-nav a i { font-size: 1.3rem; }
.bottom-nav a.active { color: var(--brand); }

/* ---- content -------------------------------------------------------------------------------- */
.page-header { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem; margin-bottom: 1rem; }
.page-header h1 { margin: 0; }
.form-card { max-width: 920px; }
.sticky-actions { position: sticky; bottom: calc(var(--bottom-nav-height) + .25rem); background: var(--bs-body-bg); padding: .75rem 0 0; margin-top: 1rem; z-index: 5; }
@media (min-width: 992px) { .sticky-actions { bottom: 0; } }

.tile { display: flex; align-items: center; gap: .75rem; min-height: 72px; padding: .75rem 1rem; background: var(--bs-body-bg); border: 1px solid var(--bs-border-color); border-radius: .75rem; text-decoration: none; color: var(--bs-body-color); }
.tile:hover { border-color: var(--brand); }
.tile i { font-size: 1.6rem; color: var(--brand); }

.empty-state { text-align: center; padding: 3rem 1rem; }
.empty-state i { font-size: 2.5rem; color: var(--bs-secondary-color); }

.check-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: .5rem; }
.check-card { display: flex; align-items: center; gap: .6rem; min-height: 44px; padding: .4rem .75rem .4rem 2.4rem; border: 1px solid var(--bs-border-color); border-radius: .5rem; margin: 0; }
.check-card .form-check-input { margin-left: -1.75rem; }
.cell-long { display: inline-block; max-width: 420px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom; }

/* a wide table scrolls inside its own box, never the whole page (tablet widths, before the card layout starts) */
div.dataTables_wrapper, div.dt-container { overflow-x: auto; }
@media (min-width: 768px) { .card-body:has(> table.table-cards) { overflow-x: auto; } }

/* ---- tables become cards on phones ------------------------------------------------------------ */
@media (max-width: 767.98px) {
    table.table-cards thead { display: none; }
    table.table-cards, table.table-cards tbody, table.table-cards tr, table.table-cards td { display: block; width: 100%; }
    table.table-cards tr { border: 1px solid var(--bs-border-color); border-radius: .6rem; margin-bottom: .75rem; padding: .35rem .75rem; background: var(--bs-body-bg); }
    table.table-cards td { border: 0; display: flex; justify-content: space-between; gap: 1rem; padding: .35rem 0; text-align: right !important; }
    table.table-cards td::before { content: attr(data-label); font-weight: 600; color: var(--bs-secondary-color); text-align: left; }
    table.table-cards td:not([data-label])::before { content: none; }
    table.table-cards tfoot { display: block; }
    table.table-cards tfoot tr { display: flex; flex-wrap: wrap; }
    .cell-long { max-width: 60vw; }
    .page-header .btn, .page-header .btn-group { width: 100%; }
}

/* ---- sign-in ---------------------------------------------------------------------------------- */
.auth-body { display: flex; align-items: center; justify-content: center; min-height: 100vh; padding: 1rem; }
.auth-card { width: 100%; max-width: 400px; background: var(--bs-body-bg); border: 1px solid var(--bs-border-color); border-radius: 1rem; padding: 2rem 1.5rem; box-shadow: 0 .5rem 1.5rem rgba(0, 0, 0, .08); }
.auth-logo { font-size: 2.5rem; color: var(--brand); }

@media print {
    .app-sidebar, .app-topbar, .bottom-nav, .sticky-actions, .page-header .btn, .page-header .btn-group { display: none !important; }
    body { background: #fff; }
}

/* ---- pictures --------------------------------------------------------------------------------- */
.photo-frame { width: 132px; height: 132px; border-radius: .75rem; border: 1px dashed var(--bs-border-color); display: flex; align-items: center; justify-content: center; overflow: hidden; background: var(--bs-tertiary-bg); flex-shrink: 0; }
.photo-frame img { width: 100%; height: 100%; object-fit: cover; }
.photo-placeholder { font-size: 3rem; color: var(--bs-secondary-color); }
.photo-video { width: 100%; max-height: 60vh; border-radius: .5rem; background: #000; transform: scaleX(-1); }
.avatar { width: 64px; height: 64px; border-radius: 50%; overflow: hidden; flex-shrink: 0; background: var(--bs-tertiary-bg); display: flex; align-items: center; justify-content: center; }
.avatar img { width: 100%; height: 100%; object-fit: cover; }
.avatar i { font-size: 2.6rem; color: var(--bs-secondary-color); }
.min-w-0 { min-width: 0; }
@media (max-width: 767.98px) { .w-100-mobile { width: 100%; } .w-100-mobile .btn { flex: 1; } }

/* ---- member profile and list ------------------------------------------------------------------- */
.avatar-sm { width: 40px; height: 40px; }
.avatar-sm i { font-size: 1.9rem; }
td.cell-avatar { width: 56px; }
.profile-photo { width: 120px; height: 120px; border-radius: .75rem; object-fit: cover; background: var(--bs-tertiary-bg); }
.profile-photo-empty { width: 120px; height: 120px; border-radius: .75rem; display: flex; align-items: center; justify-content: center; background: var(--bs-tertiary-bg); }
.profile-photo-empty i { font-size: 3.5rem; color: var(--bs-secondary-color); }
.facts { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: .75rem 1.5rem; margin: 0; }
.facts dt { font-size: .75rem; text-transform: uppercase; letter-spacing: .04em; color: var(--bs-secondary-color); font-weight: 600; }
.facts dd { margin: 0; overflow-wrap: anywhere; }
.timeline { list-style: none; margin: 0; padding: 0 0 0 1.25rem; border-left: 2px solid var(--bs-border-color); }
.timeline li { position: relative; padding: 0 0 1rem 1rem; }
.timeline li::before { content: ""; position: absolute; left: -1.6rem; top: .35rem; width: .8rem; height: .8rem; border-radius: 50%; background: var(--bs-body-bg); border: 2px solid var(--brand); }
.timeline li.note::before { border-color: var(--bs-success); }
.timeline li.warning::before { border-color: var(--bs-danger); }
.duplicate-box .list-group-item { min-height: 44px; }
.nav-tabs .nav-link { min-height: 44px; display: flex; align-items: center; }

/* ---- billing ---- */
.summary-card { top: 5rem; }
dl.totals > div { display: flex; justify-content: space-between; gap: 1rem; padding: .2rem 0; }
dl.totals dt { font-weight: 500; color: var(--bs-secondary-color); }
dl.totals dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; }
dl.totals .grand { border-top: 1px solid var(--bs-border-color); margin-top: .25rem; padding-top: .45rem; font-size: 1.1rem; font-weight: 700; }
dl.totals .grand dt { color: var(--bs-body-color); font-weight: 700; }
.payment-line .btn { min-height: 44px; }

/* ---- door screen ---- */
.door-result { border-radius: .75rem; padding: 1rem; border: 2px solid transparent; }
.door-ok { background: var(--bs-success-bg-subtle); border-color: var(--bs-success); color: var(--bs-success-text-emphasis); }
.door-warn { background: var(--bs-warning-bg-subtle); border-color: var(--bs-warning); color: var(--bs-warning-text-emphasis); }
.door-no { background: var(--bs-danger-bg-subtle); border-color: var(--bs-danger); color: var(--bs-danger-text-emphasis); }

/* ---- dashboard ------------------------------------------------------------------------------------- */
.stat { display: flex; align-items: center; gap: .75rem; min-height: 88px; height: 100%; padding: .75rem 1rem; background: var(--bs-body-bg); border: 1px solid var(--bs-border-color); border-left-width: 4px; border-radius: .75rem; text-decoration: none; color: var(--bs-body-color); }
a.stat:hover { border-color: var(--brand); }
.stat-icon { font-size: 1.5rem; color: var(--brand); flex: none; }
.stat-text { display: flex; flex-direction: column; min-width: 0; }
.stat-value { font-size: 1.35rem; font-weight: 600; line-height: 1.2; white-space: nowrap; }
.stat-title { font-size: .9rem; }
.stat-hint { font-size: .75rem; color: var(--bs-secondary-color); }
.stat-good { border-left-color: var(--bs-success); }
.stat-attention { border-left-color: var(--bs-warning); }
.trend-bars { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 2px; height: 120px; border-bottom: 1px solid var(--bs-border-color); }
.trend-col { display: flex; align-items: flex-end; min-width: 0; }
.trend-col:hover { background: var(--bs-tertiary-bg); }
.trend-bar { display: block; width: 100%; background: var(--brand); border-radius: 4px 4px 0 0; }

/* ---- offline ---------------------------------------------------------------------------------------- */
#offline-badge .badge { font-size: .8rem; padding: .5em .75em; }
.is-offline .app-topbar { border-bottom: 3px solid var(--bs-warning); }