/* ========== Sidebar ========== */
.sidebar {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    z-index: 1030;
    width: 250px;
    padding: 0;
    background-color: #212529;
    box-shadow: 2px 0 8px rgba(0, 0, 0, .15);
    overflow-y: auto;
    display: flex;
    flex-direction: column;
}

.sidebar-brand {
    padding: 1.25rem 1.25rem;
    font-size: 1.15rem;
    font-weight: 700;
    color: #fff;
    background-color: #1a1e21;
    border-bottom: 1px solid rgba(255, 255, 255, .08);
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: .5rem;
}

.sidebar-brand:hover {
    color: #fff;
}

.sidebar .nav {
    padding: .75rem 0;
}

.sidebar .nav-link {
    color: rgba(255, 255, 255, .65);
    padding: .65rem 1.25rem;
    font-weight: 500;
    font-size: .9rem;
    border-left: 3px solid transparent;
    transition: all .15s ease;
    display: flex;
    align-items: center;
    gap: .65rem;
}

.sidebar .nav-link:hover {
    color: #fff;
    background-color: rgba(255, 255, 255, .06);
}

.sidebar .nav-link.active,
.sidebar .nav-link.active:hover {
    color: #fff;
    background-color: rgba(13, 110, 253, .22);
    border-left-color: #4d9bff;
    font-weight: 600;
    box-shadow: inset 0 0 0 1px rgba(77, 155, 255, .25);
}

.sidebar .nav-link.active i {
    color: #4d9bff;
}

.sidebar .nav-link i {
    font-size: 1.1rem;
    width: 22px;
    text-align: center;
    flex-shrink: 0;
}

.sidebar .nav-section {
    padding: .5rem 1.25rem .25rem;
    font-size: .7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: rgba(255, 255, 255, .35);
}

.sidebar-footer {
    padding: .75rem 1.25rem;
    border-top: 1px solid rgba(255, 255, 255, .08);
    background-color: #1a1e21;
    color: rgba(255, 255, 255, .45);
    font-size: .75rem;
    letter-spacing: .03em;
    display: flex;
    align-items: center;
    gap: .4rem;
}

.sidebar-footer i {
    font-size: .8rem;
}

/* ========== Top Navbar ========== */
.dashboard-navbar {
    margin-left: 250px;
    background-color: #fff;
    border-bottom: 1px solid #dee2e6;
    min-height: 56px;
    z-index: 1020;
    /* Safe area: keep nav contents below the iPhone notch in landscape and
       portrait. The fixed-top navbar would otherwise tuck content under the
       status bar. */
    padding-top: env(safe-area-inset-top, 0);
    padding-left: env(safe-area-inset-left, 0);
    padding-right: env(safe-area-inset-right, 0);
}

/* ========== Main Content ========== */
.main-content {
    margin-left: 250px;
    padding: 1.5rem 2rem;
    min-height: 100vh;
    background-color: #f8f9fa;
    /* Side safe areas mirror the navbar for landscape notch devices. */
    padding-left: max(2rem, env(safe-area-inset-left, 0));
    padding-right: max(2rem, env(safe-area-inset-right, 0));
}

/* ========== Stat Cards ========== */
.stat-card {
    border-left: 4px solid;
    border-radius: .375rem;
    transition: transform .15s ease, box-shadow .15s ease;
}

.stat-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 .25rem .75rem rgba(0, 0, 0, .1);
}

.stat-card .stat-value {
    font-size: 1.75rem;
    font-weight: 700;
    line-height: 1;
}

.stat-card .stat-label {
    font-size: .8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: #6c757d;
}

.stat-card .stat-icon {
    font-size: 2rem;
    opacity: .3;
}

/* ========== Page Header ========== */
.page-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
}

.page-header h1 {
    font-size: 1.5rem;
    font-weight: 600;
    margin: 0;
}

/* ========== Tables ========== */
.table-actions {
    white-space: nowrap;
}

.table-actions .btn {
    padding: .25rem .5rem;
    font-size: .8rem;
}

/* ========== Empty State ========== */
.empty-state {
    text-align: center;
    padding: 3rem 1rem;
    color: #6c757d;
}

.empty-state i {
    font-size: 3rem;
    margin-bottom: 1rem;
    opacity: .4;
}

/* ========== Sidebar toggle (mobile) ========== */
.tw-sidebar-toggle {
    color: #495057;
    line-height: 1;
}

.tw-sidebar-toggle:focus {
    outline: 2px solid #0466C8;
    outline-offset: 2px;
}

.tw-sidebar-backdrop {
    position: fixed;
    inset: 0;
    background-color: rgba(0, 0, 0, .4);
    z-index: 1029;
    opacity: 0;
    pointer-events: none;
    transition: opacity .2s ease;
}

.tw-sidebar-backdrop.show {
    opacity: 1;
    pointer-events: auto;
}

/* ========== Mobile Bottom Nav ========== */
.tw-bottom-nav {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1031;
    display: flex;
    background-color: #fff;
    border-top: 1px solid #dee2e6;
    box-shadow: 0 -2px 10px rgba(0, 0, 0, .06);
    /* Bottom safe area pushes content above the iOS home indicator; left/right
       cover landscape notch overhang. */
    padding-bottom: env(safe-area-inset-bottom, 0);
    padding-left: env(safe-area-inset-left, 0);
    padding-right: env(safe-area-inset-right, 0);
}

.tw-bottom-nav__link {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .15rem;
    padding: .5rem .25rem;
    min-height: 56px;
    color: #6c757d;
    text-decoration: none;
    font-size: .7rem;
    font-weight: 500;
    line-height: 1;
    -webkit-tap-highlight-color: transparent;
}

.tw-bottom-nav__link i {
    font-size: 1.25rem;
    line-height: 1;
}

.tw-bottom-nav__link.active,
.tw-bottom-nav__link:active {
    color: #0466C8;
}

.tw-bottom-nav__link:hover {
    color: #0466C8;
    background-color: #f8f9fa;
}

/* ========== Install Banner ========== */
.tw-install-banner {
    position: fixed;
    left: 12px;
    right: 12px;
    bottom: 76px; /* sits above the bottom nav on mobile */
    z-index: 1040;
    display: flex;
    align-items: center;
    gap: .75rem;
    background-color: #fff;
    border: 1px solid #dee2e6;
    border-radius: .75rem;
    padding: .75rem 1rem;
    box-shadow: 0 .5rem 1.5rem rgba(0, 0, 0, .12);
    padding-bottom: calc(.75rem + env(safe-area-inset-bottom, 0));
}

.tw-install-banner__icon {
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: #0466C8;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
}

.tw-install-banner__body {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.tw-install-banner__body strong {
    font-size: .9rem;
    color: #1e293b;
}

.tw-install-banner__msg {
    font-size: .8rem;
    color: #64748b;
}

.tw-install-banner__actions {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: .25rem;
}

.tw-install-banner__cta {
    min-height: 40px;
    padding-inline: .9rem;
}

@media (min-width: 768px) {
    .tw-install-banner {
        left: auto;
        right: 24px;
        bottom: 24px;
        max-width: 380px;
    }
}

/* ========== Responsive (≤ 991px = mobile/tablet) ========== */
@media (max-width: 991.98px) {
    .sidebar {
        transform: translateX(-100%);
        transition: transform .25s ease;
        width: 280px;
    }

    .sidebar.show {
        transform: translateX(0);
    }

    .main-content,
    .dashboard-navbar {
        margin-left: 0;
    }
}

/* On mobile (<768px), reserve space for the bottom nav and tighten paddings. */
@media (max-width: 767.98px) {
    .main-content {
        padding: 1rem;
        padding-bottom: calc(80px + env(safe-area-inset-bottom, 0));
    }

    .page-header {
        flex-wrap: wrap;
        gap: .5rem;
    }

    .page-header h1 {
        font-size: 1.25rem;
    }

    .stat-card .stat-value { font-size: 1.5rem; }

    /* Touch-target floor for action buttons in tables/cards. */
    .table-actions .btn,
    .btn-sm.tw-touch,
    .btn.tw-touch {
        min-height: 44px;
        min-width: 44px;
    }

    /* Stack form button rows so they're easy to hit. */
    .form-actions,
    .tw-form-actions {
        display: flex;
        flex-direction: column;
        gap: .5rem;
    }

    .form-actions .btn,
    .tw-form-actions .btn {
        width: 100%;
        min-height: 44px;
    }

    /* Disable iOS double-tap delay everywhere. */
    a, button { touch-action: manipulation; }
}

/* ========== MDI Icon Picker ========== */
.icon-pick-mdi {
    transition: all 0.15s;
    cursor: pointer;
}
.icon-pick-mdi:hover {
    transform: scale(1.1);
    z-index: 1;
}
.icon-pick-mdi.btn-primary {
    box-shadow: 0 0 0 2px rgba(4, 102, 200, 0.3);
}
#iconPickerGrid {
    scrollbar-width: thin;
}

/* ========== Realtime + keyboard nav visual states ========== */
.tw-rt-flash {
    animation: twRtFlash 1.6s ease-out;
}
@keyframes twRtFlash {
    0%   { box-shadow: 0 0 0 0 rgba(4, 102, 200, 0.55); }
    40%  { box-shadow: 0 0 0 6px rgba(4, 102, 200, 0.15); }
    100% { box-shadow: 0 0 0 0 rgba(4, 102, 200, 0); }
}
.tw-kbd-focus {
    outline: 2px solid #0466C8;
    outline-offset: 2px;
    transform: translateY(-1px);
    transition: transform 0.15s;
}

/* Command palette */
#commandPalette .modal-content {
    border-radius: 14px;
}
#commandPalette .list-group-item.active {
    background-color: #0466C8;
    border-color: #0466C8;
    color: #fff;
}
#commandPalette kbd {
    background: #f1f3f5;
    color: #495057;
    padding: 1px 5px;
    border-radius: 4px;
    border: 1px solid #dee2e6;
    margin: 0 2px;
    font-size: 0.7rem;
}

/* FullCalendar polish — keep it tight and on-brand. */
#todo-calendar .fc-toolbar-title {
    font-size: 1.1rem;
    font-weight: 600;
}
#todo-calendar .fc-button-primary {
    background-color: #0466C8;
    border-color: #0466C8;
}
#todo-calendar .fc-button-primary:not(:disabled):hover {
    background-color: #034a96;
    border-color: #034a96;
}
#todo-calendar .fc-event {
    cursor: pointer;
}
@media (max-width: 575.98px) {
    #todo-calendar .fc-toolbar.fc-header-toolbar {
        flex-direction: column;
        gap: 6px;
        align-items: stretch;
    }
    #todo-calendar .fc-toolbar-chunk {
        text-align: center;
    }
}

/* Bulk action sticky bar should stay readable on scroll. */
#todo-bulk-bar {
    background-color: #fff;
    border: 1px solid rgba(4, 102, 200, 0.25);
}

/* ========== Floating Action Button (mobile) ==========
   Sits above the bottom nav, clears the iOS home-indicator safe area,
   and stays out of the way of the install banner (right-aligned, shorter
   bottom offset). Hidden on >=md to keep desktop chrome unchanged. */
.tw-fab {
    position: fixed;
    right: 16px;
    /* Bottom nav is ~56px tall + safe area; lift the FAB another 12px so
       it floats clearly above the rail. */
    bottom: calc(56px + 12px + env(safe-area-inset-bottom, 0));
    z-index: 1040;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    border: 0;
    background: #0466C8;
    color: #fff;
    box-shadow: 0 6px 16px rgba(4, 102, 200, .35);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    line-height: 1;
    -webkit-tap-highlight-color: transparent;
    transition: transform .12s ease, background-color .15s ease;
}
.tw-fab:hover { background: #0353a4; }
.tw-fab:active { transform: scale(.96); }
.tw-fab:focus-visible {
    outline: 3px solid #fff;
    outline-offset: 2px;
    box-shadow: 0 0 0 5px #0466C8, 0 6px 16px rgba(4, 102, 200, .35);
}

/* Bottom-sheet "create" picker. Bootstrap's offcanvas-bottom does the
   slide animation; we just style the body for tap-friendly rows. */
.tw-fab-sheet {
    border-top-left-radius: 18px;
    border-top-right-radius: 18px;
    /* Cap the height so a long sheet still feels like a sheet, not a page. */
    max-height: min(70vh, 520px);
    padding-bottom: env(safe-area-inset-bottom, 0);
}
.tw-fab-sheet .offcanvas-header {
    border-bottom: 1px solid #f1f3f5;
}
.tw-fab-sheet__action {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: .85rem 1rem;
    border-radius: 12px;
    text-decoration: none;
    color: inherit;
    /* 56px row keeps every option above the 44×44 floor by a comfortable margin. */
    min-height: 56px;
    -webkit-tap-highlight-color: transparent;
}
.tw-fab-sheet__action + .tw-fab-sheet__action { margin-top: .25rem; }
.tw-fab-sheet__action:hover,
.tw-fab-sheet__action:focus-visible {
    background-color: #f4f7fb;
    color: inherit;
}
.tw-fab-sheet__action i {
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(4, 102, 200, .1);
    color: #0466C8;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
}

/* ========== Sticky section headers ==========
   Used by long scrolling lists (MyDay sections, etc.). The top offset
   accounts for the fixed dashboard navbar (56px) plus the safe-area
   inset so the header tucks neatly under the chrome. */
.tw-sticky-section {
    position: sticky;
    top: calc(56px + env(safe-area-inset-top, 0));
    z-index: 5;
    background: linear-gradient(to bottom, #f8f9fa 0%, #f8f9fa 75%, rgba(248, 249, 250, 0) 100%);
    margin-inline: calc(-1 * 1rem);
    padding: .75rem 1rem .5rem;
    backdrop-filter: saturate(140%) blur(2px);
}
@media (min-width: 768px) {
    /* Desktop main-content padding is wider — extend the negative margin
       to match so the sticky strip still spans edge-to-edge. */
    .tw-sticky-section { margin-inline: -2rem; padding-inline: 2rem; }
}

/* ========== Mobile card-table ==========
   Opt-in CSS that converts a Bootstrap <table> inside .table-responsive
   into a stack of cards on phones — purely presentational, the Razor
   markup stays untouched. Each <td> becomes a stacked block; <thead> is
   hidden because the data is self-describing (alarm name is the first
   td and uses <strong>; downstream cells are badges or muted text).
   The chevron pseudo-element is the spec'd swipe-target affordance —
   visual only this pass, no gesture handler. */
@media (max-width: 767.98px) {
    .tw-mobile-cards .table-responsive { overflow-x: visible; }
    .tw-mobile-cards table.table {
        background: transparent;
        margin-bottom: 0;
    }
    .tw-mobile-cards table.table > thead { display: none; }
    .tw-mobile-cards table.table > tbody { display: block; }
    .tw-mobile-cards table.table > tbody > tr {
        display: block;
        position: relative;
        background: #fff;
        border: 1px solid #e9ecef;
        border-left: 3px solid #0466C8;
        border-radius: 10px;
        padding: .65rem .9rem .65rem .8rem;
        margin-bottom: .6rem;
        box-shadow: 0 1px 2px rgba(0, 0, 0, .04);
    }
    .tw-mobile-cards table.table > tbody > tr > td {
        display: block;
        border: 0 !important;
        padding: .15rem 0;
        background: transparent !important;
        white-space: normal;
    }
    /* The first cell — typically the entity name — gets the bold "title"
       treatment. The rest are subdued metadata + actions. */
    .tw-mobile-cards table.table > tbody > tr > td:first-child {
        font-size: 1rem;
        padding-bottom: .25rem;
        padding-right: 1.25rem; /* leave room for the chevron */
    }
    .tw-mobile-cards table.table > tbody > tr > td:not(:first-child) {
        color: #6c757d;
        font-size: .85rem;
    }
    /* Action row gets a top divider for clarity and a tap-friendly gap. */
    .tw-mobile-cards table.table > tbody > tr > td:last-child {
        margin-top: .35rem;
        padding-top: .5rem;
        border-top: 1px dashed #e9ecef !important;
        display: flex;
        flex-wrap: wrap;
        gap: .35rem;
    }
    /* Visual swipe-target affordance — chevron in the top-right corner
       hints at "this row has more". No gesture this pass. */
    .tw-mobile-cards table.table > tbody > tr::after {
        content: "\F285"; /* Bootstrap Icons chevron-right (private use area) */
        font-family: "bootstrap-icons", sans-serif;
        position: absolute;
        top: .65rem;
        right: .8rem;
        color: #ced4da;
        font-size: .9rem;
        pointer-events: none;
    }
}

/* ========== Touch-target floor (≥44×44 per Apple HIG) ==========
   Apply on phones for actionable affordances inside cards/tables that
   use icon-only btn-sm sizing. Doesn't change semantics — just pads the
   hit area. The .table-actions selector already had a partial rule;
   widen it to icon-link buttons inside todo cards + dropdown triggers. */
@media (max-width: 767.98px) {
    .tw-mobile-cards .table-actions .btn,
    .tw-mobile-cards table .btn,
    .todo-row .btn-link,
    .todo-row .dropdown-toggle,
    .tw-bottom-nav__link {
        min-height: 44px;
        min-width: 44px;
    }
    /* Pad bare bi-icon buttons (e.g., the "complete" circle) so the tap
       target meets HIG without enlarging the visible glyph. */
    .todo-row .btn-link.p-0 {
        padding: .35rem !important;
    }
}

/* Reserve space at the bottom of long scroll regions so content isn't
   hidden behind the FAB or the bottom nav. */
@media (max-width: 767.98px) {
    .main-content { padding-bottom: calc(110px + env(safe-area-inset-bottom, 0)); }
}

/* ========== Dark mode (chrome only, prefers-color-scheme) ==========
   Applies to the navigation/header/FAB/cards so the app doesn't burn
   a user's eyes when their OS is in dark mode. A full theme is
   TODO — todo lists, modals, etc. still use light Bootstrap defaults
   intentionally so contrast doesn't regress mid-flight. */
@media (prefers-color-scheme: dark) {
    .dashboard-navbar {
        background-color: #1a1e21;
        border-bottom-color: #2b3035;
        color: #e9ecef;
    }
    .dashboard-navbar .navbar-text,
    .dashboard-navbar .text-muted { color: #adb5bd !important; }
    .dashboard-navbar .btn-outline-secondary {
        color: #dee2e6;
        border-color: #495057;
    }
    .dashboard-navbar .btn-outline-secondary:hover {
        background-color: #2b3035;
        color: #fff;
    }

    .main-content { background-color: #0f1418; color: #e9ecef; }

    .tw-bottom-nav {
        background-color: #1a1e21;
        border-top-color: #2b3035;
    }
    .tw-bottom-nav__link { color: #adb5bd; }
    .tw-bottom-nav__link.active { color: #66a8ff; }
    .tw-bottom-nav__link:hover {
        color: #66a8ff;
        background-color: #212529;
    }

    .tw-fab { background: #0466C8; }
    .tw-fab:hover { background: #1572d6; }

    .tw-fab-sheet {
        background-color: #1a1e21;
        color: #e9ecef;
    }
    .tw-fab-sheet .offcanvas-header { border-bottom-color: #2b3035; }
    .tw-fab-sheet__action:hover,
    .tw-fab-sheet__action:focus-visible {
        background-color: #212529;
    }
    .tw-fab-sheet__action i {
        background: rgba(102, 168, 255, .14);
        color: #66a8ff;
    }
    .tw-fab-sheet__action small.text-muted { color: #adb5bd !important; }

    .tw-sticky-section {
        background: linear-gradient(to bottom, #0f1418 0%, #0f1418 75%, rgba(15, 20, 24, 0) 100%);
    }

    .tw-mobile-cards table.table > tbody > tr {
        background-color: #1a1e21;
        border-color: #2b3035;
        border-left-color: #66a8ff;
        color: #e9ecef;
    }
    .tw-mobile-cards table.table > tbody > tr > td:not(:first-child) { color: #adb5bd; }
    .tw-mobile-cards table.table > tbody > tr > td:last-child { border-top-color: #2b3035 !important; }
    .tw-mobile-cards table.table > tbody > tr::after { color: #495057; }
}

/* ========== Horizontal-scroll guard ==========
   Belt-and-suspenders against rogue elements pushing the viewport wider
   than the screen. A real audit at 360px should still pass without this,
   but the cap protects against forgotten fixed widths in future markup. */
html, body { overflow-x: hidden; }