/* ═══════════════════════════════════════════════════════════════════════════
   TRAKZENO — App CSS  |  Bootstrap 5.3 Integration  |  Light + Dark Mode
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─── 1. Design Tokens ───────────────────────────────────────────────────── */
:root {
    /* Brand */
    --bt-primary: #04243d;
    --bt-primary-hover: #031d31;
    --bt-primary-light: #e8eef3;
    --bt-primary-border: #adc0cf;
    --bs-btn-active-bg: #031d31;
    --bt-brand-gradient: linear-gradient(135deg, #031d31 0%, #063a59 54%, #0b6178 100%);
    --bt-shell-gradient:
        radial-gradient(circle at 12% 6%, rgba(20, 105, 139, 0.045), transparent 30rem),
        radial-gradient(circle at 90% 14%, rgba(74, 171, 104, 0.025), transparent 25rem),
        linear-gradient(145deg, #f7f8fa 0%, #f4f6f8 52%, #f6f8f9 100%);
    --bt-surface-gradient: linear-gradient(145deg, #ffffff 0%, #fdfefe 100%);
    --bt-header-gradient: linear-gradient(110deg, #fafbfd 0%, #f5f8fa 65%, #f8faf9 100%);
    --bt-sidebar-gradient: linear-gradient(165deg, #031d31 0%, #063650 58%, #08465a 100%);
    --bt-topbar-gradient: var(--bt-brand-gradient);

    /* Surface */
    --bt-bg: #ffffff;
    --bt-surface: #ffffff;
    --bt-surface-2: #f8fafc;
    --bt-surface-soft: #f8fafc;
    --bt-surface-3: #eef2f6;

    /* Sidebar */
    --bt-sidebar-w: 256px;
    --bt-sidebar-collapsed-w: 76px;
    --bt-sidebar-bg: #ffffff;
    --bt-sidebar-hover: rgba(255, 255, 255, 0.08);
    --bt-sidebar-active: rgba(255, 255, 255, 0.14);
    --bt-sidebar-accent: #67d391;
    --bt-sidebar-text: #f3f8fc;
    --bt-sidebar-text-muted: rgba(225, 237, 246, 0.7);
    --bt-sidebar-border: rgba(255, 255, 255, 0.13);
    --bt-sidebar-search-bg: rgba(255, 255, 255, 0.07);
    --bt-sidebar-search-border: rgba(255, 255, 255, 0.16);
    --bt-sidebar-search-placeholder: rgba(225, 237, 246, 0.55);
    --bt-sidebar-shadow: 10px 0 30px rgba(4, 25, 42, 0.2);

    /* Ink */
    --bt-ink: #10233f;
    --bt-ink-2: #263b5e;
    --bt-ink-muted: #465873;
    --bt-ink-subtle: #62718a;

    /* Border */
    --bt-border: #d3dbe5;
    --bt-border-soft: #e6ebf1;

    /* Status */
    --bt-success: #16835d;
    --bt-success-bg: #e8f5ef;
    --bt-warning: #b86b08;
    --bt-warning-bg: #fff3df;
    --bt-danger: #c83c32;
    --bt-danger-bg: #fcecea;
    --bt-info: #1478a6;
    --bt-info-bg: #e8f4f8;

    /* Elevation */
    --bt-shadow-xs: 0 1px 2px rgba(9, 30, 66, 0.08);
    --bt-shadow-sm: 0 2px 8px rgba(9, 30, 66, 0.1);
    --bt-shadow-md: 0 4px 16px rgba(9, 30, 66, 0.14);
    --bt-shadow-lg: 0 8px 32px rgba(9, 30, 66, 0.18);
    --bt-shadow-card:
        0 12px 32px rgba(15, 35, 60, 0.065),
        0 2px 7px rgba(15, 35, 60, 0.045),
        0 0 0 1px rgba(15, 35, 60, 0.045);

    /* Radius */
    --bt-r-sm: 4px;
    --bt-r: 6px;
    --bt-r-md: 8px;
    --bt-r-lg: 10px;
    --bt-r-xl: 14px;
    --bt-r-2xl: 20px;

    /* Spacing */
    --bt-space-1: .25rem;
    --bt-space-2: .5rem;
    --bt-space-3: .75rem;
    --bt-space-4: 1rem;
    --bt-space-5: 1.25rem;
    --bt-space-6: 1.5rem;

    /* Typography */
    --bt-font:
        "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

    /* Transition */
    --bt-t: 160ms ease;
}

/* Compact, viewport-friendly admin leave calendar. */
body:has(#leaveCalendarMonth) .leave-cal{grid-template-columns:repeat(7,minmax(0,1fr))!important;min-width:760px!important}
body:has(#leaveCalendarMonth) .weekday{position:sticky;top:0;z-index:3;padding:.5rem!important;color:var(--bt-ink-muted);font-size:.64rem;text-transform:uppercase}
body:has(#leaveCalendarMonth) .day{display:flex;min-width:0;min-height:108px!important;max-height:138px;flex-direction:column;padding:.45rem!important;overflow:hidden}
body:has(#leaveCalendarMonth) .day header{min-height:1.35rem;align-items:center;font-size:.72rem}
body:has(#leaveCalendarMonth) .day header b{display:grid;width:1.2rem;height:1.2rem;margin-left:auto;padding:0!important;place-items:center;font-size:.55rem}
body:has(#leaveCalendarMonth) .event{margin-top:.24rem!important;padding:.3rem .38rem!important}
body:has(#leaveCalendarMonth) .event strong{font-size:.62rem!important}
body:has(#leaveCalendarMonth) .event small{font-size:.54rem!important}
body:has(#leaveCalendarMonth) .leave-summary{gap:.65rem!important}
body:has(#leaveCalendarMonth) .leave-summary>div{padding:.72rem .85rem!important}
body:has(#leaveCalendarMonth) .leave-summary strong{font-size:1.05rem!important}
@media(max-width:767.98px){body:has(#leaveCalendarMonth) .leave-summary{grid-template-columns:repeat(3,minmax(0,1fr))!important}body:has(#leaveCalendarMonth) .leave-summary>div{padding:.58rem!important}body:has(#leaveCalendarMonth) .leave-summary strong{font-size:.88rem!important}body:has(#leaveCalendarMonth) .leave-cal{min-width:700px!important}body:has(#leaveCalendarMonth) .day{min-height:96px!important}}

/* Date-range filters stay fully inside the viewport. */
.daterangepicker.bt-viewport-daterange {
    box-sizing: border-box !important;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
}
.daterangepicker.bt-viewport-daterange::before,
.daterangepicker.bt-viewport-daterange::after { display: none !important; }
.daterangepicker.bt-viewport-daterange .drp-buttons {
    position: sticky;
    z-index: 5;
    bottom: 0;
    background: var(--bt-surface, #fff) !important;
    box-shadow: 0 -7px 18px rgba(15, 23, 42, .08);
}
@media (max-width: 575.98px) {
    .daterangepicker.bt-mobile-daterange {
        box-sizing: border-box !important;
        margin: 0 !important;
        padding: 0 !important;
        border-radius: 1rem !important;
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
    }
    .daterangepicker.bt-mobile-daterange::before,
    .daterangepicker.bt-mobile-daterange::after { display: none !important; }
    .daterangepicker.bt-mobile-daterange .drp-calendar.left,
    .daterangepicker.bt-mobile-daterange .drp-calendar.right {
        display: block !important;
        float: none !important;
        width: 100% !important;
        max-width: none !important;
        padding: .7rem .8rem !important;
    }
    .daterangepicker.bt-mobile-daterange .drp-calendar.right {
        padding-top: 0 !important;
        border-top: 1px solid var(--bt-border-soft, #edf1f5) !important;
    }
    .daterangepicker.bt-mobile-daterange .calendar-table,
    .daterangepicker.bt-mobile-daterange .calendar-table table { width: 100% !important; }
    .daterangepicker.bt-mobile-daterange .calendar-table table { table-layout: fixed; }
    .daterangepicker.bt-mobile-daterange .calendar-table th,
    .daterangepicker.bt-mobile-daterange .calendar-table td {
        width: auto !important;
        min-width: 0 !important;
        height: 2.35rem !important;
        padding: .2rem !important;
    }
    .daterangepicker.bt-mobile-daterange .drp-buttons {
        position: sticky;
        z-index: 3;
        right: 0;
        bottom: 0;
        left: 0;
        display: grid !important;
        grid-template-columns: 1fr 1.35fr;
        gap: .55rem;
        padding: .75rem .8rem calc(.75rem + env(safe-area-inset-bottom)) !important;
        background: var(--bt-surface, #fff) !important;
        box-shadow: 0 -8px 22px rgba(15, 23, 42, .09);
    }
    .daterangepicker.bt-mobile-daterange .drp-buttons .drp-selected {
        grid-column: 1 / -1;
        margin: 0;
        text-align: center;
        white-space: normal;
    }
    .daterangepicker.bt-mobile-daterange .drp-buttons .btn {
        width: 100%;
        min-height: 2.65rem;
        margin: 0 !important;
    }
}

/* Profile calendar drawer — loaded globally because the drawer partial is rendered after @stack('styles'). */
.calendar-drawer-backdrop[hidden] { display: none !important; }
.calendar-drawer-backdrop { position: fixed; inset: 0; z-index: 1088; background: rgba(15, 23, 42, .32); backdrop-filter: blur(2px); }
.calendar-drawer { position: fixed !important; z-index: 1089; top: 0; right: 0; bottom: 0; display: flex !important; width: min(420px, 100vw) !important; height: 100dvh !important; margin: 0 !important; flex-direction: column; overflow: hidden; border-left: 1px solid var(--bt-border-soft); background: var(--bt-surface, #fff); box-shadow: -20px 0 55px rgba(15, 23, 42, .2); transform: translate3d(105%, 0, 0); transition: transform .24s cubic-bezier(.2,.8,.2,1); }
.calendar-drawer.is-open { transform: translate3d(0, 0, 0); }
.calendar-drawer-header { display: flex; flex: 0 0 auto; min-height: 78px; align-items: center; justify-content: space-between; padding: 1rem 1.15rem; border-bottom: 1px solid var(--bt-border-soft); }
.calendar-drawer-header span { display: block; color: var(--bt-primary); font-size: .65rem; font-weight: 850; letter-spacing: .1em; text-transform: uppercase; }
.calendar-drawer-header h2 { margin: .18rem 0 0; color: var(--bt-ink); font-size: 1.18rem; font-weight: 800; }
.calendar-drawer-header button, .calendar-drawer-nav button, .calendar-reminder-form-head button { border: 0; background: transparent; }
.calendar-drawer-header-actions { display: flex; align-items: center; gap: .4rem; }
.calendar-drawer-header-actions > a, .calendar-drawer-header-actions > button { display: grid; width: 2.5rem; height: 2.5rem; place-items: center; padding: 0; border: 0; border-radius: .75rem; background: var(--bt-surface-2); color: var(--bt-ink-muted); text-decoration: none; }
.calendar-drawer-header-actions > a:hover, .calendar-drawer-header-actions > button:hover { background: var(--bt-primary-light); color: var(--bt-primary); }
.calendar-drawer-scroll { min-height: 0; flex: 1 1 auto; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
.calendar-drawer-nav { display: grid; flex: 0 0 auto; grid-template-columns:auto auto auto minmax(0,1fr); align-items: center; gap: .35rem; padding: .7rem 1rem; border-bottom: 1px solid var(--bt-border-soft); }
.calendar-drawer-nav > button { display: inline-flex; min-height: 2.2rem; align-items: center; justify-content: center; padding: .4rem .65rem; border: 1px solid var(--bt-border); border-radius: 999px; color: var(--bt-ink); }
.calendar-drawer-nav strong { overflow: hidden; margin-left: .2rem; font-size: .82rem; text-overflow: ellipsis; white-space: nowrap; }
.calendar-drawer-nav .calendar-add-reminder { justify-self: end; min-height: 2.35rem; gap: .38rem; padding: .45rem .75rem; border: 1px solid var(--bt-primary); border-radius: .55rem; background: var(--bt-primary); color: #fff; box-shadow: 0 4px 10px rgba(4, 36, 61, .14); font-size: .76rem; font-weight: 750; line-height: 1; white-space: nowrap; }
.calendar-drawer-nav .calendar-add-reminder:hover, .calendar-drawer-nav .calendar-add-reminder:focus-visible { border-color: var(--bt-primary-hover); background: var(--bt-primary-hover); color: #fff; box-shadow: 0 0 0 .2rem rgba(4, 36, 61, .14); }
.calendar-drawer-nav .calendar-add-reminder i { font-size: .82rem; line-height: 1; }
.calendar-mini-week, .calendar-mini-grid { display: grid !important; flex: 0 0 auto; grid-template-columns: repeat(7, minmax(0, 1fr)) !important; padding-inline: 1rem; }
.calendar-mini-week { padding-top: .5rem; }
.calendar-mini-week span { padding: .3rem; text-align: center; color: var(--bt-ink-muted); font-size: .62rem; font-weight: 800; }
.calendar-mini-grid { gap: .18rem; padding-bottom: .8rem; border-bottom: 1px solid var(--bt-border-soft); }
.calendar-mini-day { position: relative; display: grid; width: 2.45rem; min-height: 2.45rem; place-items: center; justify-self: center; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--bt-ink); font-size: .78rem; }
.calendar-mini-day:hover { background: var(--bt-surface-2); }
.calendar-mini-day.is-outside { opacity: .35; }
.calendar-mini-day.is-today { color: var(--bt-primary); font-weight: 850; box-shadow: inset 0 0 0 1px var(--bt-primary); }
.calendar-mini-day.is-selected { background: var(--bt-primary); color: #fff; box-shadow: none; }
.calendar-mini-day i, .calendar-mini-day b { position: absolute; bottom: .18rem; width: .28rem; height: .28rem; border-radius: 50%; }
.calendar-mini-day i { right: .28rem; background: #f97316; }
.calendar-mini-day b { left: .28rem; background: #22c55e; }
.calendar-day-summary { display: grid; flex: 0 0 auto; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .45rem; padding: .75rem 1rem; }
.calendar-summary-stat { min-width: 0; padding: .65rem; border: 1px solid var(--bt-border-soft); border-radius: .7rem; background: var(--bt-surface-2); }
.calendar-summary-stat span { display: block; overflow: hidden; color: var(--bt-ink-muted); font-size: .61rem; text-overflow: ellipsis; white-space: nowrap; }
.calendar-summary-stat strong { display: block; overflow: hidden; margin-top: .2rem; font-size: .82rem; text-overflow: ellipsis; white-space: nowrap; }
.calendar-agenda { min-height: 12rem; padding: 0 1rem 1.25rem; overflow: visible; }
.calendar-agenda-title { margin: 0 -.15rem .65rem; padding: .55rem .15rem; background: var(--bt-surface); color: var(--bt-ink-muted); font-size: .7rem; font-weight: 850; letter-spacing: .06em; text-transform: uppercase; }
.calendar-agenda-item { display: flex; gap: .65rem; margin-bottom: .5rem; padding: .7rem; border-left: 3px solid var(--bt-primary); border-radius: .15rem .7rem .7rem .15rem; background: var(--bt-surface-2); }
.calendar-agenda-item time { flex: 0 0 4.35rem; color: var(--bt-primary); font-size: .71rem; font-weight: 800; }
.calendar-agenda-item div { min-width: 0; }
.calendar-agenda-item strong, .calendar-agenda-item small { display: block; overflow-wrap: anywhere; }
.calendar-agenda-item small { margin-top: .15rem; color: var(--bt-ink-muted); }
.calendar-agenda-empty, .calendar-panel-loading { padding: 2rem 1rem; text-align: center; color: var(--bt-ink-muted); }
.calendar-panel-loading { grid-column: 1 / -1; }
.calendar-reminder-form[hidden] { display: none !important; }
.calendar-reminder-form { position: absolute; z-index: 1092; right: 0; bottom: 0; left: 0; max-height: 85dvh; overflow: visible; padding: 1rem; border-top: 1px solid var(--bt-border); background: var(--bt-surface); box-shadow: 0 -18px 40px rgba(15, 23, 42, .18); }
.calendar-reminder-form .dropdown-menu, .calendar-reminder-form .bootstrap-select .dropdown-menu { z-index: 1100 !important; }
body:has(.calendar-drawer.is-open) > .select2-container--open, body:has(.calendar-drawer.is-open) .select2-dropdown { z-index: 1105 !important; }
.calendar-reminder-form-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: .65rem; }
.calendar-reminder-form > .calendar-reminder-field { display: block; margin-bottom: .55rem; color: var(--bt-ink-muted); font-size: .68rem; font-weight: 750; }
.calendar-reminder-form .form-control, .calendar-reminder-form .form-select { margin-top: .25rem; }
.calendar-reminder-form .btn { width: 100%; }
.calendar-form-error { margin-bottom: .4rem; color: var(--bt-danger); font-size: .75rem; }
body:has(.calendar-drawer.is-open) { overflow: hidden; }
@media (max-width: 575.98px) { .calendar-drawer { width: 100vw !important; } .calendar-drawer-nav { grid-template-columns: auto auto auto minmax(0,1fr); } .calendar-add-reminder { grid-column: 1 / -1; width: 100%; border-radius: .65rem !important; } .calendar-mini-day { width: 2.25rem; min-height: 2.25rem; } .calendar-reminder-form { max-height: 92dvh; overflow-x: visible; overflow-y: auto; } }

/* Project-wide, viewport-aware tooltips (native browser titles are upgraded by tooltips.js). */
.bt-modern-tooltip {
    --bs-tooltip-max-width: min(20rem, calc(100vw - 1.5rem));
    --bs-tooltip-bg: #102a43;
    --bs-tooltip-color: #fff;
    --bs-tooltip-opacity: 1;
    --bs-tooltip-arrow-width: .72rem;
    --bs-tooltip-arrow-height: .38rem;
    z-index: 1095;
}

.bt-modern-tooltip .tooltip-inner {
    padding: .5rem .68rem;
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: .6rem;
    background: linear-gradient(145deg, #102a43 0%, #173f5f 100%);
    box-shadow: 0 10px 28px rgba(15, 35, 60, .22), 0 2px 8px rgba(15, 35, 60, .14);
    font-size: .73rem;
    font-weight: 650;
    line-height: 1.35;
    letter-spacing: .005em;
    text-align: center;
}

.bt-modern-tooltip.show {
    animation: bt-tooltip-enter 140ms ease-out both;
}

@keyframes bt-tooltip-enter {
    from { opacity: 0; }
    to { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
    .bt-modern-tooltip.show { animation: none; }
}

/* Per-user project, ticket, epic, and sprint listing preferences. */
.listing-preference-toolbar { display:flex;align-items:center;justify-content:space-between;gap:1rem;margin:0 0 1rem;padding:.7rem .8rem;border-radius:.85rem;background:var(--bt-surface);box-shadow:0 6px 18px rgba(15,35,60,.08); }
.listing-preference-copy { display:flex;align-items:center;gap:.55rem;min-width:0;color:var(--bt-primary); }
.listing-preference-copy>i { display:grid;place-items:center;width:2rem;height:2rem;border-radius:.6rem;background:var(--bt-primary-light); }
.listing-preference-copy>span { display:flex;flex-direction:column;min-width:0; }
.listing-preference-copy strong { color:var(--bt-ink);font-size:.78rem; }
.listing-preference-copy small { color:var(--bt-ink-muted);font-size:.66rem; }
.listing-view-toggle { display:inline-flex;gap:.25rem;padding:.22rem;border-radius:.7rem;background:var(--bt-surface-2); }
.listing-view-toggle button { display:inline-flex;align-items:center;gap:.35rem;min-height:2.25rem;padding:.4rem .7rem;border:0;border-radius:.55rem;background:transparent;color:var(--bt-ink-muted);font-size:.72rem;font-weight:750; }
.listing-view-toggle button.is-active { background:var(--bt-surface);color:var(--bt-primary);box-shadow:0 3px 9px rgba(15,35,60,.1); }
.listing-mobile-hint { display:none; }

/* Item-level pin/reorder trigger: injected by JS into every listing item, visible at every breakpoint.
   Same markup/size everywhere (table row, card grid) so the control reads as one consistent component. */
.listing-item-controls { position:relative;display:inline-flex;flex:0 0 auto; }
.listing-item-trigger {
    display:grid!important;
    place-items:center!important;
    flex:0 0 1.85rem!important;
    width:1.85rem!important;
    height:1.85rem!important;
    min-width:1.85rem!important;
    min-height:1.85rem!important;
    aspect-ratio:1/1;
    padding:0!important;
    border:0;
    border-radius:50%!important;
    background:var(--bt-surface-2);
    color:var(--bt-ink-muted);
    font-size:.82rem;
    line-height:1;
    box-shadow:0 0 0 1px rgba(15,35,60,.05) inset;
    transition:background var(--bt-t),color var(--bt-t),box-shadow var(--bt-t),transform var(--bt-t);
}
.listing-item-trigger:hover,.listing-item-trigger[aria-expanded="true"] { background:var(--bt-primary-light);color:var(--bt-primary);box-shadow:0 3px 8px rgba(15,35,60,.14); }
.listing-item-trigger:active { transform:scale(.94); }
.listing-item-trigger.is-active { color:#8a5a00;background:#fff7dc;box-shadow:0 0 0 1px rgba(138,90,0,.12) inset; }
/* Browsers draw the native `outline:auto` focus ring as a plain rectangle, ignoring border-radius,
   which makes this round button flash square-cornered the moment it's clicked/tapped. Swap it for
   an explicit outline so it follows the circle instead. */
.listing-item-trigger:focus { outline:none; }
.listing-item-trigger:focus-visible { outline:2px solid var(--bt-primary);outline-offset:2px; }
.listing-item-controls .dropdown-menu { min-width:11rem;padding:.35rem;font-size:.82rem;border-radius:.65rem;box-shadow:0 12px 28px rgba(15,35,60,.16); }
.listing-item-controls .dropdown-item { display:flex;align-items:center;gap:.55rem;border-radius:.4rem;padding:.5rem .6rem;font-weight:600;white-space:nowrap;transition:background var(--bt-t),color var(--bt-t); }
.listing-item-controls .dropdown-item i { flex:0 0 1rem;text-align:center;font-size:.9rem; }
.listing-item-controls .dropdown-item:disabled,.listing-item-controls .dropdown-item[disabled] { opacity:.4;pointer-events:none; }

/* Card-style listings (project/epic/sprint grid items): trigger sits inline in the card's own heading row, in normal flow. */
.listing-card-heading-actions { display:flex;align-items:center;gap:.5rem; }
.personalized-listing-item.is-user-pinned:not(tr) .app-card,
.personalized-listing-item.is-user-pinned.planning-item-card { outline:1.5px solid color-mix(in srgb,var(--bt-warning) 55%,transparent);outline-offset:-1.5px; }
/* Fallback overlay, only used if a listing item has no .listing-card-heading-actions wrapper to dock into. */
.personalized-listing-item:not(tr) { position:relative; }
.personalized-listing-item:not(tr) > .listing-item-controls { position:absolute;top:.5rem;right:.5rem;z-index:12; }

/* Table-row listings (tickets): trigger joins the existing row action group instead of overlaying the row. */
.listing-item-controls-inline { padding-right:.4rem;margin-right:.2rem;border-right:1px solid var(--bt-border); }
tr.personalized-listing-item.is-user-pinned td:first-child { box-shadow:inset 3px 0 0 var(--bt-warning); }

@media (min-width: 768px) {
    .personalized-listing.listing-view-list.planning-grid { grid-template-columns:1fr; }
    .row.personalized-listing.listing-view-list > .personalized-listing-item { width:100%; }
    .ticket-personalized-listing.listing-view-grid { border:0!important;background:transparent!important;box-shadow:none!important; }
    .ticket-personalized-listing.listing-view-grid .app-table-wrap { overflow:visible; }
    .ticket-personalized-listing.listing-view-grid table,.ticket-personalized-listing.listing-view-grid tbody { display:block;width:100%; }
    .ticket-personalized-listing.listing-view-grid thead { display:none; }
    .ticket-personalized-listing.listing-view-grid tbody { display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.8rem; }
    .ticket-personalized-listing.listing-view-grid tbody tr { display:block;padding:1rem;border:0;border-radius:.9rem;background:var(--bt-surface);box-shadow:0 7px 20px rgba(15,35,60,.09); }
    .ticket-personalized-listing.listing-view-grid tbody td { display:block!important;width:100%!important;padding:.35rem 0!important;border:0!important;white-space:normal!important; }
    .ticket-personalized-listing.listing-view-grid tbody td::before { content:attr(data-list-label);display:block;margin-bottom:.12rem;color:var(--bt-ink-muted);font-size:.58rem;font-weight:800;letter-spacing:.05em;text-transform:uppercase; }
    .ticket-personalized-listing.listing-view-grid .dataTables_wrapper>.row:last-child { grid-column:1/-1; }
}
@media (min-width:768px) and (max-width:1199.98px) { .ticket-personalized-listing.listing-view-grid tbody { grid-template-columns:repeat(2,minmax(0,1fr)); } }

@media (max-width: 767.98px) {
    .listing-preference-toolbar { align-items:flex-start;margin-bottom:.75rem;padding:.65rem .75rem; }
    .listing-preference-copy small,.listing-view-toggle { display:none!important; }
    .listing-mobile-hint { display:inline-flex;align-items:center;align-self:center;gap:.3rem;color:var(--bt-ink-muted);font-size:.66rem;font-weight:700;line-height:1; }
    .listing-mobile-hint i { display:inline-flex;line-height:1; }
    /* Match the 2.5rem touch target used by neighboring mobile action icons (edit/delete) so the pin control doesn't look undersized next to them. */
    .listing-item-trigger { flex:0 0 2.5rem!important;width:2.5rem!important;height:2.5rem!important;min-width:2.5rem!important;min-height:2.5rem!important;font-size:.95rem; }
}

/* Late-loaded page styles must still honor the application dark surface contract. */
html[data-theme="dark"] body :where(
    .credential-editor,
    .credential-editor-toolbar,
    .credential-modal-loading,
    .credential-modal-footer,
    .credential-modal-notes,
    .credential-modal-details > div,
    .credential-page-link:not(.is-active),
    .preview-image-controls,
    #attachPreviewModal .modal-header,
    .board-mini-scroll
) {
    border-color: var(--bt-border) !important;
    color: var(--bt-ink) !important;
    background: var(--bt-surface) !important;
}
html[data-theme="dark"] body :where(
    .credential-editor-toolbar,
    .credential-modal-loading,
    .credential-modal-footer,
    .credential-modal-details > div,
    .preview-image-controls
) { background: var(--bt-surface-2) !important; }
html[data-theme="dark"] body :where(.credential-editor-btn,.preview-zoom-btn,.preview-zoom-value,.credential-modal-details strong) {
    color: var(--bt-ink) !important;
}
html[data-theme="dark"] body :where(.credential-modal-details span,.credential-page-link.is-disabled) {
    color: var(--bt-ink-muted) !important;
}
html[data-theme="dark"] body .credential-page-link.is-disabled { background: var(--bt-surface-2) !important; }
html[data-theme="dark"] body .modal-holiday-notice {
    border-color: rgba(217,119,6,.3) !important;
    color: #fbbf24 !important;
    background: rgba(217,119,6,.1) !important;
}

/* Project panels keep their actions readable and aligned at every breakpoint. */
.panel-action-link{display:inline-flex!important;align-items:center;justify-content:center;gap:.4rem;min-height:2rem;padding:.35rem .65rem!important;white-space:nowrap}
@media(max-width:767.98px){.project-page-actions{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr));width:100%}.project-page-actions .btn{justify-content:center;min-width:0}.app-card-header .panel-action-link{display:inline-flex!important;flex:0 0 auto!important;width:auto!important;min-width:7.25rem!important;font-size:.72rem!important}.app-card-header .panel-action-link span{display:inline!important;visibility:visible!important}.project-pagination nav,.credential-pagination nav{padding:.8rem;border-radius:.9rem;background:#fff;box-shadow:0 7px 20px rgba(15,35,60,.075)}}

/* Keep edit actions visually consistent across every module. */
.btn-edit,
a.btn[href*="/edit"],
button.btn:is([title="Edit"], [data-bs-title="Edit"]) {
    color: #fff !important;
    background: var(--bt-primary) !important;
    border-color: var(--bt-primary) !important;
    box-shadow: none !important;
}

.btn-edit:hover,
.btn-edit:focus-visible,
a.btn[href*="/edit"]:hover,
a.btn[href*="/edit"]:focus-visible,
button.btn:is([title="Edit"], [data-bs-title="Edit"]):hover,
button.btn:is([title="Edit"], [data-bs-title="Edit"]):focus-visible {
    color: #fff !important;
    background: var(--bt-primary-hover, #063f61) !important;
    border-color: var(--bt-primary-hover, #063f61) !important;
}

/* ─── 2. Dark Mode ───────────────────────────────────────────────────────── */
[data-theme="dark"] {
    --bt-primary: #22d3ee;
    --bt-primary-hover: #06b6d4;
    --bt-primary-light: rgba(34, 211, 238, .13);
    --bt-primary-border: rgba(34, 211, 238, .46);
    --bt-brand-gradient: linear-gradient(135deg, #0a1128 0%, #142845 55%, #173b4d 100%);
    --bt-shell-gradient: linear-gradient(145deg, #0f1422 0%, #111a2c 55%, #101e29 100%);
    --bt-surface-gradient: linear-gradient(135deg, #161e33 0%, #19243a 100%);
    --bt-header-gradient: linear-gradient(110deg, rgba(123, 165, 196, 0.12), rgba(35, 48, 77, 0.35));
    --bt-sidebar-gradient: linear-gradient(180deg, #0a1128 0%, #101b31 55%, #122436 100%);
    --bt-topbar-gradient: linear-gradient(90deg, rgba(15,20,34,.98), rgba(20,40,69,.96), rgba(23,59,77,.94));

    --bt-bg: #0f1422;
    --bt-surface: #161e33;
    --bt-surface-2: #1d2740;
    --bt-surface-soft: #1d2740;
    --bt-surface-3: #23304d;

    --bt-sidebar-bg: #0a1128;
    --bt-sidebar-hover: rgba(255, 255, 255, 0.08);
    --bt-sidebar-active: rgba(255, 255, 255, 0.14);
    --bt-sidebar-accent: #22d3ee;
    --bt-sidebar-text: rgba(220, 228, 242, 0.9);
    --bt-sidebar-text-muted: rgba(220, 228, 242, 0.58);
    --bt-sidebar-border: rgba(255, 255, 255, 0.14);
    --bt-sidebar-search-bg: rgba(255, 255, 255, 0.08);
    --bt-sidebar-search-border: rgba(255, 255, 255, 0.16);
    --bt-sidebar-search-placeholder: rgba(220, 228, 242, 0.5);
    --bt-sidebar-shadow: 8px 0 26px rgba(0, 0, 0, 0.45);

    --bt-ink: #e5ecff;
    --bt-ink-2: #c5d3f8;
    --bt-ink-muted: #91a1c8;
    --bt-ink-subtle: #7485ab;

    --bt-border: #2f3d63;
    --bt-border-soft: #253151;

    --bt-success: #9ed955;
    --bt-success-bg: #1e2d17;
    --bt-warning: #f4c443;
    --bt-warning-bg: #31270f;
    --bt-danger: #f85149;
    --bt-danger-bg: #3d1515;
    --bt-info: #58a6ff;
    --bt-info-bg: #1c2640;

    --bt-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.3);
    --bt-shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.35);
    --bt-shadow-md: 0 4px 16px rgba(0, 0, 0, 0.45);
    --bt-shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.55);
    --bt-shadow-card:
        0 1px 3px rgba(0, 0, 0, 0.35), 0 0 0 1px rgba(255, 255, 255, 0.04);
}

[data-theme="light"] body {
    background: #fff;
}

[data-theme="light"] .page-header {
    background: transparent;
    border: none;
    border-radius: 0;
    box-shadow: none;
    padding: 0;
    margin-bottom: 1.25rem;
}

[data-theme="light"] .app-card,
[data-theme="light"] .stat-card,
[data-theme="light"] .chart-card,
[data-theme="light"] .info-tile,
[data-theme="light"] .profile-avatar-zone,
[data-theme="light"] .app-table-wrap.has-datatable .dataTables_scroll {
    border: 1px solid var(--bt-border);
    box-shadow: var(--bt-shadow-card);
    background: var(--bt-surface-gradient);
}

/* ─── 3. Bootstrap 5.3 Variable Overrides ───────────────────────────────── */
:root,
[data-bs-theme="light"] {
    --bs-body-font-family: var(--bt-font);
    --bs-body-color: var(--bt-ink);
    --bs-secondary-color: var(--bt-ink-muted);
    --bs-tertiary-color: var(--bt-ink-subtle);
    --bs-body-bg: var(--bt-bg);
    --bs-border-color: var(--bt-border);
    --bs-border-radius: var(--bt-r);
    --bs-border-radius-sm: var(--bt-r-sm);
    --bs-border-radius-lg: var(--bt-r-lg);
    --bs-border-radius-xl: var(--bt-r-xl);
    --bs-link-color: var(--bt-primary);
    --bs-link-hover-color: var(--bt-primary-hover);
    --bs-primary: var(--bt-primary);
    --bs-primary-rgb: 4, 36, 61;
    --bs-secondary-rgb: 107, 119, 140;
    --bs-success-rgb: 22, 131, 93;
    --bs-warning-rgb: 184, 107, 8;
    --bs-danger-rgb: 200, 60, 50;
    --bs-info-rgb: 20, 120, 166;
    /* Input */
    --bs-input-bg: var(--bt-surface);
    --bs-input-border-color: var(--bt-border);
    --bs-input-focus-border-color: var(--bt-primary);
    --bs-input-focus-box-shadow: 0 0 0 3px rgba(4, 36, 61, 0.15);
    --bs-input-color: var(--bt-ink);
    --bs-input-placeholder-color: var(--bt-ink-subtle);
}

[data-theme="dark"] {
    --bs-body-color: var(--bt-ink);
    --bs-body-bg: var(--bt-bg);
    --bs-border-color: var(--bt-border);
    --bs-link-color: var(--bt-primary);
    --bs-primary: var(--bt-primary);
    --bs-primary-rgb: 34, 211, 238;
    --bs-input-bg: var(--bt-surface);
    --bs-input-border-color: var(--bt-border);
    --bs-input-color: var(--bt-ink);
}

/* ─── 4. Base Reset ──────────────────────────────────────────────────────── */
*,
*::before,
*::after {
    box-sizing: border-box;
}
html,
body {
    height: 100%;
    margin: 0;
}
button,
input,
optgroup,
select,
textarea {
    font-family: inherit;
}
.app-body .btn,
.app-body .form-control,
.app-body .form-select,
.app-body .dropdown-item,
.app-body .nav-link {
    font-family: var(--bt-font);
}
.app-body .bi {
    line-height: 1;
    vertical-align: -.125em;
}
.app-body .btn > .bi,
.app-body .app-card-title > .bi,
.app-body .page-header-right .bi {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 1em;
    height: 1em;
    font-size: 1em;
    line-height: 1;
}
.app-body .btn-icon > .bi,
.app-body .btn.btn-icon > .bi {
    margin: 0 !important;
}
.app-body .page-header-right,
.app-body .page-header-right > .d-flex,
.app-body .app-card-header [class*="actions"],
.app-body .app-card-footer [class*="actions"] {
    gap: var(--bt-space-2) !important;
}
.app-body .app-card-header > [class*="actions"]:not(:first-child),
.app-body .app-card-footer > [class*="actions"]:not(:first-child) {
    margin-left: auto;
    justify-content: flex-end;
}
.cursor-pointer { cursor: pointer !important; }
.resize-vertical { resize: vertical !important; }
.media-cover { width: 100%; height: 100%; object-fit: cover; }
.text-xs { font-size: .75rem !important; }
.text-2xs { font-size: .6875rem !important; }
body {
    font-family: var(--bt-font);
    font-optical-sizing: auto;
    font-size: 0.9375rem;
    line-height: 1.6;
    color: var(--bt-ink);
    background: var(--bt-bg);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ─── 4b. Tenant App: Premium Universe Background ───────────────────────────
   Scoped to body.tenant-app only (the logged-in tenant dashboard) — Super
   Admin and the auth screens keep their own backgrounds. Cards/tables
   (.app-card, .stat-card, .page-header, etc.) are fully opaque, so this
   paints only the gutters behind them; .page-wrapper has no background of
   its own and lets it show through. Pure CSS (no canvas), since it sits
   behind data-heavy pages like the board and DataTables. A fine crosshatch
   grid (same technique as the login screen's .auth-bg-grid) plus layered
   mesh-gradient blobs keeps it a deliberate "modern pattern" rather than a
   near-invisible tint — tuned strong enough to read at a glance but never
   competing with the opaque white cards sitting on top of it. */
body.app-body,
body.tenant-app {
    background-color: #f4f8fc;
    background-image: var(--bt-shell-gradient);
}
body.app-body .main-area,
body.app-body .page-wrapper {
    background: transparent;
}

@media (min-width: 992px) {
    body.tenant-app {
        background-attachment: fixed;
    }
}

a {
    color: var(--bt-primary);
    text-decoration: none;
    transition: color var(--bt-t);
}
a:hover {
    color: var(--bt-primary-hover);
    text-decoration: none;
}
button,
input,
select,
textarea {
    font: inherit;
}
::selection {
    background: var(--bt-primary);
    color: #fff;
}

/* ─── 5. App Shell ───────────────────────────────────────────────────────── */
.app-shell {
    display: flex;
    min-height: 100vh;
}

/* ─── 6. Sidebar ─────────────────────────────────────────────────────────── */
.sidebar {
    width: var(--bt-sidebar-w);
    background: var(--bt-sidebar-gradient);
    color: var(--bt-sidebar-text);
    display: flex;
    flex-direction: column;
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    z-index: 1040;
    transition: transform var(--bt-t);
    box-shadow: var(--bt-sidebar-shadow);
    overflow-y: hidden;
    overflow-x: hidden;
    scrollbar-width: thin;
    scrollbar-color: var(--bt-sidebar-border) transparent;
}
.sidebar::-webkit-scrollbar {
    width: 4px;
}
.sidebar::-webkit-scrollbar-thumb {
    background: var(--bt-sidebar-border);
    border-radius: 4px;
}

.sidebar-top {
    padding: 0.85rem 0.875rem 0.5rem;
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
}
.sidebar-bottom {
    padding: 0.875rem;
    border-top: 1px solid var(--bt-sidebar-border);
    flex-shrink: 0;
    background: rgba(2, 24, 40, 0.28);
    backdrop-filter: blur(10px);
    position: relative;
    z-index: 1;
}
.sidebar-static-head {
    flex-shrink: 0;
}
.sidebar-menu-scroll {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    margin-right: -0.875rem;
    padding-right: 0.875rem;
    scrollbar-width: thin;
    scrollbar-color: var(--bt-sidebar-border) transparent;
}
.sidebar-menu-scroll::-webkit-scrollbar {
    width: 4px;
}
.sidebar-menu-scroll::-webkit-scrollbar-thumb {
    background: var(--bt-sidebar-border);
    border-radius: 4px;
}

/* Brand */
.sidebar-brand {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0.5rem 0.5rem 0.5rem 0.25rem;
    border-radius: var(--bt-r-md);
    margin-bottom: 1rem;
    color: var(--bt-sidebar-text);
    transition: background var(--bt-t);
}
.sidebar-brand:hover {
    background: var(--bt-sidebar-hover);
    color: var(--bt-sidebar-text);
}
.sidebar-brand-row {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    margin-bottom: 1rem;
}
.sidebar-brand-row .sidebar-brand {
    margin-bottom: 0;
    flex: 1;
}
/* .brand-mark {
    width: 2rem;
    height: 2rem;
    background: linear-gradient(
        135deg,
        var(--bt-primary) 0%,
        var(--bt-primary-hover) 100%
    );
    border-radius: var(--bt-r);
    display: grid;
    place-items: center;
    font-size: 0.95rem;
    color: #fff;
    flex-shrink: 0;
} */
.brand-logo {
    width: 100%;
    height: auto;
    object-fit: contain;
    display: block;
}
.brand-name-text {
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--bt-sidebar-text);
    line-height: 1.2;
    display: block;
}
.brand-tagline {
    font-size: 0.68rem;
    color: var(--bt-sidebar-text-muted);
    display: block;
}

/* Sidebar search */
.sidebar-search {
    margin-bottom: 1rem;
}
.sb-search-wrap {
    position: relative;
}
.sb-search-icon {
    position: absolute;
    left: 0.65rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--bt-sidebar-text-muted);
    font-size: 0.82rem;
    pointer-events: none;
}
.sb-search-input {
    width: 100%;
    padding: 0.45rem 0.75rem 0.45rem 2rem;
    background: var(--bt-sidebar-search-bg);
    border: 1px solid var(--bt-sidebar-search-border);
    border-radius: var(--bt-r);
    color: var(--bt-sidebar-text);
    font-size: 0.825rem;
    transition: all var(--bt-t);
}
.sb-search-input::placeholder {
    color: var(--bt-sidebar-search-placeholder);
}
.sb-search-input:focus {
    outline: none;
    background: #fff;
    border-color: var(--bt-sidebar-accent);
    box-shadow: 0 0 0 2px rgba(4, 36, 61, 0.16);
}
.search-dropdown {
    position: absolute;
    top: calc(100% + 0.35rem);
    left: 0;
    right: 0;
    background: var(--bt-surface);
    border: 1px solid var(--bt-border);
    border-radius: var(--bt-r-lg);
    box-shadow: var(--bt-shadow-lg);
    z-index: 2000;
    overflow: hidden;
    max-height: 380px;
    overflow-y: auto;
    color: var(--bt-ink);
}
.search-result-item {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.6rem 1rem;
    cursor: pointer;
    transition: background var(--bt-t);
    border-bottom: 1px solid var(--bt-border-soft);
    font-size: 0.85rem;
}
.search-result-item:last-child {
    border-bottom: none;
}
.search-result-item:hover {
    background: var(--bt-surface-2);
}
.search-result-icon {
    width: 1.9rem;
    height: 1.9rem;
    border-radius: var(--bt-r-sm);
    background: var(--bt-primary-light);
    color: var(--bt-primary);
    display: grid;
    place-items: center;
    font-size: 0.78rem;
    flex-shrink: 0;
}
.search-result-title {
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--bt-ink);
    line-height: 1.3;
}
.search-result-sub {
    font-size: 0.75rem;
    color: var(--bt-ink-muted);
}
.search-result-badge {
    margin-left: auto;
    font-size: 0.68rem;
    padding: 0.12rem 0.4rem;
    border-radius: 999px;
    white-space: nowrap;
    background: var(--bt-surface-3);
    color: var(--bt-ink-muted);
}
.search-empty {
    padding: 1.5rem;
    text-align: center;
    color: var(--bt-ink-muted);
    font-size: 0.85rem;
}
.search-empty-suggestion { margin-top: .85rem; }
.search-suggestion {
    display: block;
    width: 100%;
    padding: .6rem .85rem;
    border: 1px solid var(--bt-border-soft);
    border-radius: .65rem;
    background: var(--bt-primary-light, var(--bt-surface-2));
    color: var(--bt-ink-2);
    font-size: .78rem;
    text-align: left;
    cursor: pointer;
    transition: background .15s ease;
}
.search-suggestion:hover, .search-suggestion:focus-visible { background: var(--bt-surface-2); outline: 0; }
.search-suggestion strong { color: var(--bt-primary); font-weight: 750; }

/* Nav group labels */
.sidenav-group {
    font-size: 0.67rem;
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--bt-sidebar-text-muted);
    padding: 0.7rem 0.5rem 0.2rem;
    display: block;
}
/* Nav links */
.sidenav {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
}
.sidenav-link {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.48rem 0.65rem;
    border-radius: var(--bt-r);
    color: var(--bt-sidebar-text);
    font-size: 0.86rem;
    font-weight: 500;
    transition: all var(--bt-t);
    position: relative;
    white-space: nowrap;
}
button.sidenav-link {
    width: 100%;
    border: 0;
    background: transparent;
    text-align: left;
}
.sidebar .sidenav-collapse-trigger > span {
    font-weight: 750;
    letter-spacing: 0.055em;
    text-transform: uppercase;
}
.sidenav-link i {
    font-size: 0.9rem;
    width: 1.1rem;
    text-align: center;
    flex-shrink: 0;
    opacity: 0.75;
    transition: opacity var(--bt-t);
}
.sidenav-link:hover {
    background: var(--bt-sidebar-hover);
    color: var(--bt-sidebar-text);
}
.sidenav-link:hover i {
    opacity: 1;
}
.sidenav-link.is-active {
    background: var(--bt-sidebar-active);
    color: var(--bt-sidebar-text);
}
.sidenav-link.is-active::after {
    content: "";
    position: absolute;
    left: 0;
    top: 20%;
    height: 60%;
    width: 3px;
    background: var(--bt-sidebar-accent);
    border-radius: 0 2px 2px 0;
}
.sidenav-link.is-active i {
    opacity: 1;
}
.sidenav-badge {
    margin-left: auto;
    background: var(--bt-danger);
    color: #fff;
    font-size: 0.65rem;
    font-weight: 700;
    padding: 0.1rem 0.38rem;
    border-radius: 999px;
    min-width: 1.3rem;
    text-align: center;
}
.sidenav-collapse-trigger .sidenav-collapse-caret {
    margin-left: auto;
    font-size: 0.72rem;
    opacity: 0.55;
    transition:
        transform var(--bt-t),
        opacity var(--bt-t);
}
.sidenav-collapse-trigger[aria-expanded="true"] .sidenav-collapse-caret {
    transform: rotate(180deg);
    opacity: 0.85;
}
.sidenav-submenu {
    display: flex;
    flex-direction: column;
    gap: 0.12rem;
    margin: 0.2rem 0 0.4rem;
    padding-left: 0.5rem;
}
.sidenav-sublink {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.4rem 0.6rem;
    margin-left: 0.6rem;
    border-radius: var(--bt-r);
    color: var(--bt-sidebar-text-muted);
    font-size: 0.82rem;
    font-weight: 500;
    transition: all var(--bt-t);
}
.sidenav-sublink i {
    font-size: 0.78rem;
    width: 1rem;
    text-align: center;
    opacity: 0.72;
}
.sidenav-sublink:hover {
    color: var(--bt-sidebar-text);
    background: var(--bt-sidebar-hover);
}
.sidenav-sublink.is-active {
    color: var(--bt-sidebar-text);
    background: var(--bt-sidebar-active);
}
.sidebar-timezone-widget {
    margin: 0.35rem 0.6rem 0.6rem 1.1rem;
    padding: 0.6rem;
    border: 1px solid var(--bt-sidebar-border);
    border-radius: var(--bt-r);
    background: var(--bt-sidebar-search-bg);
}
.sidebar-timezone-widget label {
    display: block;
    margin-bottom: 0.35rem;
    color: var(--bt-sidebar-text-muted);
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}
.sidebar-timezone-widget .form-select {
    min-height: 2rem;
    font-size: 0.75rem;
    background-color: var(--bt-surface);
}

/* Quick create */
.quick-create-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    width: 100%;
    padding: 0.5rem 1rem;
    background: var(--bt-sidebar-hover);
    color: var(--bt-sidebar-text);
    border: 1px solid var(--bt-sidebar-border);
    border-radius: var(--bt-r);
    font-size: 0.86rem;
    font-weight: 600;
    cursor: pointer;
    margin-bottom: 0.75rem;
    transition:
        background var(--bt-t),
        box-shadow var(--bt-t);
}
.quick-create-btn:hover {
    background: var(--bt-sidebar-active);
    box-shadow: 0 2px 8px rgba(4, 36, 61, 0.18);
}
.quick-create-btn-inline {
    width: auto;
    margin-bottom: 0;
    padding: 0.42rem 0.8rem;
}
.quick-create-btn-sidebar {
    margin-bottom: 0;
}

/* User pod */
.user-pod {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.5rem 0.55rem;
    border-radius: var(--bt-r);
    cursor: pointer;
    transition: background var(--bt-t);
}
.user-pod:hover {
    background: var(--bt-sidebar-hover);
}
.user-pod.user-pod-header {
    background: transparent;
    border: none;
    min-width: 210px;
    padding: 0;
}
.user-pod.user-pod-header:hover {
    background: transparent;
}
.upod-avatar {
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    background: linear-gradient(
        135deg,
        var(--bt-primary),
        var(--bt-primary-hover)
    );
    color: #fff;
    display: grid;
    place-items: center;
    font-size: 0.72rem;
    font-weight: 700;
    flex-shrink: 0;
    letter-spacing: 0.02em;
}
.upod-avatar-img {
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}
.upod-info {
    flex: 1;
    min-width: 0;
}
.upod-name {
    display: block;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--bt-sidebar-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.user-pod.user-pod-header .upod-name {
    color: var(--bt-ink);
}
.upod-role {
    display: block;
    font-size: 0.68rem;
    color: var(--bt-sidebar-text-muted);
}
.user-pod.user-pod-header .upod-role,
.user-pod.user-pod-header .upod-caret {
    color: var(--bt-ink-muted);
}
.upod-caret {
    font-size: 0.75rem;
    color: var(--bt-sidebar-text-muted);
}

/* User popover */
.user-popover {
    background: var(--bt-surface);
    border: 1px solid var(--bt-border);
    border-radius: var(--bt-r-lg);
    box-shadow: var(--bt-shadow-lg);
    overflow: hidden;
    margin-bottom: 0.5rem;
    color: var(--bt-ink);
    min-width: 17.5rem;
    padding: 0.4rem;
    animation: upopIn 0.16s ease-out;
}
@keyframes upopIn {
    from { opacity: 0; transform: translateY(4px) scale(0.98); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}
.upop-user-card {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0.7rem 0.65rem;
}
.upop-user-avatar,
.upop-user-avatar-img {
    width: 2.6rem;
    height: 2.6rem;
    border-radius: 50%;
    flex-shrink: 0;
}
.upop-user-avatar {
    background: linear-gradient(135deg, var(--bt-primary), var(--bt-primary-hover));
    color: #fff;
    display: grid;
    place-items: center;
    font-size: 0.9rem;
    font-weight: 700;
    letter-spacing: 0.02em;
}
.upop-user-avatar-img {
    object-fit: cover;
}
.upop-user-info {
    min-width: 0;
    flex: 1;
}
.upop-user-name {
    display: block;
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--bt-ink);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.upop-user-email {
    display: block;
    font-size: 0.76rem;
    color: var(--bt-ink-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.upop-item {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0.6rem 0.65rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--bt-ink);
    background: none;
    border: none;
    border-radius: var(--bt-r);
    width: 100%;
    text-align: left;
    cursor: pointer;
    transition: background var(--bt-t), color var(--bt-t);
}
.upop-item:hover {
    background: var(--bt-surface-2);
    color: var(--bt-primary);
}
.upop-item i {
    width: 1.6rem;
    height: 1.6rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--bt-surface-3);
    text-align: center;
    color: var(--bt-ink-muted);
    font-size: 0.85rem;
    flex-shrink: 0;
    transition: background var(--bt-t), color var(--bt-t);
}
.upop-item:hover i {
    background: var(--bt-primary-light);
    color: var(--bt-primary);
}
.upop-danger,
.upop-danger i {
    color: var(--bt-danger) !important;
}
.upop-danger:hover i {
    background: rgba(220, 53, 69, 0.12);
    color: var(--bt-danger) !important;
}
.upop-divider {
    margin: 0.3rem 0.2rem;
    border-top: 1px solid var(--bt-border-soft);
}
[data-clear-site-cache] .spin {
    animation: upopSpin 0.8s linear infinite;
}
@keyframes upopSpin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}
.sidebar-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1039;
    backdrop-filter: blur(2px);
}

.sidebar-toggle-btn {
    width: 2.25rem;
    height: 2.25rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--bt-border);
    background: var(--bt-surface);
    color: var(--bt-ink);
    border-radius: var(--bt-r);
    transition: all var(--bt-t);
}
.sidebar-toggle-btn:hover {
    background: var(--bt-surface-2);
    color: var(--bt-primary);
}
.sidebar .sidebar-toggle-btn {
    background: var(--bt-sidebar-search-bg);
    border-color: var(--bt-sidebar-border);
    color: var(--bt-sidebar-text);
}
.sidebar .sidebar-toggle-btn:hover {
    background: var(--bt-sidebar-active);
    color: var(--bt-sidebar-text);
}
.sidebar .sidebar-brand-row {
    gap: .35rem;
    padding: .42rem;
    border: 0;
    border-radius: .9rem;
    background: rgba(255,255,255,.97);
    box-shadow: none;
}
.sidebar .sidebar-brand {
    padding: .35rem .25rem;
}
.sidebar .sidebar-brand:hover {
    background: transparent;
}
.sidebar .sidebar-toggle-btn,
.sidebar .sidebar-toggle-btn:hover {
    color: #063650;
    border-color: #d5e0e8;
    background: #f2f6f8;
}
.sidebar .sb-search-input:focus {
    color: #fff;
    background: rgba(255,255,255,.12);
    border-color: rgba(103,211,145,.75);
    box-shadow: 0 0 0 3px rgba(103,211,145,.12);
}
.sidebar .sidenav-link,
.sidebar .sidenav-sublink {
    border: 1px solid transparent;
}
.sidebar .sidenav-link:hover,
.sidebar .sidenav-sublink:hover {
    border-color: rgba(255,255,255,.08);
    transform: translateX(2px);
}
.sidebar .sidenav-link.is-active,
.sidebar .sidenav-sublink.is-active {
    color: #fff;
    border-color: rgba(255,255,255,.13);
    background: linear-gradient(100deg, rgba(255,255,255,.17), rgba(255,255,255,.075));
    box-shadow: inset 3px 0 0 var(--bt-sidebar-accent), 0 5px 14px rgba(1,18,31,.12);
}
.sidebar .sidenav-link.is-active::after {
    display: none;
}
.sidebar .sidenav-submenu {
    margin-left: .45rem;
    padding-left: .4rem;
    border-left: 1px solid rgba(255,255,255,.1);
}
.sidebar .sidenav-group {
    color: rgba(225,237,246,.56);
}

body.sidebar-collapsed .sidebar {
    width: var(--bt-sidebar-collapsed-w);
}
body.sidebar-collapsed .main-area {
    margin-left: var(--bt-sidebar-collapsed-w);
    width: calc(100% - var(--bt-sidebar-collapsed-w));
    max-width: calc(100% - var(--bt-sidebar-collapsed-w));
}
body.sidebar-collapsed .sidebar-top {
    padding-left: 0.5rem;
    padding-right: 0.5rem;
}
body.sidebar-collapsed .sidebar-bottom {
    padding-left: 0.5rem;
    padding-right: 0.5rem;
}
body.sidebar-collapsed .sidebar-menu-scroll {
    margin-right: -0.5rem;
    padding-right: 0.5rem;
}
body.sidebar-collapsed .sidebar-brand {
    justify-content: center;
}
body.sidebar-collapsed .sidebar-brand-row {
    justify-content: center;
}
body.sidebar-collapsed .sidebar-brand-row .sidebar-brand {
    display: none;
}
body.sidebar-collapsed .sidebar-toggle-btn {
    margin: 0 auto;
    display: inline-flex !important;
}
body.sidebar-collapsed .brand-name-text,
body.sidebar-collapsed .brand-tagline,
body.sidebar-collapsed .sidebar-search,
body.sidebar-collapsed .sidenav-group,
body.sidebar-collapsed .sidenav-link span,
body.sidebar-collapsed .sidenav-sublink span,
body.sidebar-collapsed .sidenav-badge,
body.sidebar-collapsed .sidenav-collapse-caret,
body.sidebar-collapsed .sidebar-timezone-widget,
body.sidebar-collapsed .super-admin-badge,
body.sidebar-collapsed .upod-info,
body.sidebar-collapsed .upod-caret,
body.sidebar-collapsed .attendance-widget {
    display: none !important;
}
body.sidebar-collapsed .sidenav-link {
    justify-content: center;
    padding-left: 0.45rem;
    padding-right: 0.45rem;
}
body.sidebar-collapsed .sidenav-submenu {
    padding-left: 0;
    margin-left: 0;
}
body.sidebar-collapsed .sidenav-sublink {
    justify-content: center;
    margin-left: 0;
    padding-left: 0.45rem;
    padding-right: 0.45rem;
}
body.sidebar-collapsed .quick-create-btn {
    font-size: 0;
    padding: 0.5rem;
}
body.sidebar-collapsed .quick-create-btn i {
    margin: 0;
    font-size: 1rem;
}
body.sidebar-collapsed .user-pod {
    justify-content: center;
}

/* ─── 7. Main Area ───────────────────────────────────────────────────────── */
.main-area {
    margin-left: var(--bt-sidebar-w);
    flex: 1;
    width: calc(100% - var(--bt-sidebar-w));
    max-width: calc(100% - var(--bt-sidebar-w));
    min-width: 0;
    display: flex;
    flex-direction: column;
}
.workspace-topbar {
    position: sticky;
    top: 0;
    z-index: 910;
    padding: 0 2.25rem;
    min-height: 72px;
    background: var(--bt-topbar-gradient);
    border-bottom: 1px solid rgba(4,36,61,.1);
    box-shadow: 0 8px 24px rgba(9, 30, 66, 0.09);
    backdrop-filter: blur(14px);
}
.workspace-topbar-shell {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.7rem;
    min-height: 72px;
    padding: 0;
    border: none;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}
.header-global-search {
    position: relative;
    flex: 1 1 28rem;
    width: min(32rem, 42vw);
    max-width: 32rem;
    min-width: 15rem;
}
.global-search-icon {
    position: absolute;
    left: 0.85rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--bt-ink-muted);
    z-index: 1;
    pointer-events: none;
}
.global-search-input {
    width: 100%;
    height: 2.65rem;
    padding: 0.55rem 2.4rem 0.55rem 2.45rem;
    color: var(--bt-ink);
    background: var(--bt-surface-2);
    border: 1px solid var(--bt-border);
    border-radius: 0.7rem;
    font-size: 0.84rem;
    transition: border-color var(--bt-t), box-shadow var(--bt-t), background var(--bt-t);
}
.global-search-input:focus {
    outline: 0;
    background: var(--bt-surface);
    border-color: var(--bt-primary);
    box-shadow: 0 0 0 3px rgba(4, 36, 61, 0.12);
}
.global-search-input::-webkit-search-cancel-button,
.global-search-input::-webkit-search-decoration { display: none; -webkit-appearance: none; appearance: none; }
.global-search-shortcut {
    position: absolute;
    right: 0.75rem;
    top: 50%;
    transform: translateY(-50%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.35rem;
    height: 1.35rem;
    border: 1px solid var(--bt-border);
    border-radius: 0.3rem;
    color: var(--bt-ink-muted);
    background: var(--bt-surface);
    font-size: 0.7rem;
}
[data-theme="light"] .workspace-topbar .global-search-input {
    color: #fff;
    background: rgba(255,255,255,.1);
    border-color: rgba(255,255,255,.24);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
}
[data-theme="light"] .workspace-topbar .global-search-input::placeholder {
    color: rgba(255,255,255,.68);
}
[data-theme="light"] .workspace-topbar .global-search-input:focus {
    color: #fff;
    background: rgba(255,255,255,.15);
    border-color: rgba(255,255,255,.48);
    box-shadow: 0 0 0 3px rgba(255,255,255,.1);
}
[data-theme="light"] .workspace-topbar .global-search-icon {
    color: rgba(255,255,255,.72);
}
[data-theme="light"] .workspace-topbar .global-search-shortcut {
    color: rgba(255,255,255,.78);
    background: rgba(255,255,255,.1);
    border-color: rgba(255,255,255,.22);
}
[data-theme="light"] .workspace-topbar .mobile-icon-btn,
[data-theme="light"] .workspace-topbar .user-pod.user-pod-header .upod-name {
    color: #fff;
}
[data-theme="light"] .workspace-topbar .user-pod.user-pod-header .upod-role,
[data-theme="light"] .workspace-topbar .user-pod.user-pod-header .upod-caret,
[data-theme="light"] .workspace-topbar .workspace-topbar-separator,
[data-theme="light"] .workspace-topbar .top-attendance-label,
[data-theme="light"] .workspace-topbar .top-attendance-time {
    color: rgba(255,255,255,.68);
}
[data-theme="light"] .workspace-topbar .top-attendance-live,
[data-theme="light"] .workspace-topbar .top-attendance-done {
    color: #b9efcc;
}
[data-theme="light"] .workspace-topbar .quick-create-btn-inline {
    color: #fff;
    border-color: rgba(255,255,255,.28);
    background: rgba(255,255,255,.1);
}
.header-global-search .search-dropdown {
    width: min(38rem, calc(100vw - 2rem));
    right: auto;
}
.mobile-search-panel {
    position: fixed;
    inset: 0;
    z-index: 1400;
    padding: 4.75rem 0.75rem 0;
    background: rgba(15, 23, 42, 0.32);
    backdrop-filter: blur(2px);
}
.mobile-global-search-wrapper {
    position: relative;
    max-width: 42rem;
    margin: 0 auto;
    filter: drop-shadow(0 14px 28px rgba(15, 23, 42, 0.22));
}
.mobile-global-search-wrapper .global-search-input {
    height: 3rem;
    padding-right: 3rem;
    background: var(--bt-surface);
}
.mobile-search-close {
    position: absolute;
    right: 0.65rem;
    top: 0.55rem;
    width: 1.9rem;
    height: 1.9rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 50%;
    color: var(--bt-ink-muted);
    background: transparent;
}
.mobile-search-close:hover { background: var(--bt-surface-2); color: var(--bt-ink); }
.mobile-global-search-wrapper .search-dropdown { max-height: min(65vh, 32rem); }
.global-search-clear {
    position: absolute;
    top: 50%;
    right: .65rem;
    z-index: 3;
    display: none;
    width: 1.8rem;
    height: 1.8rem;
    place-items: center;
    padding: 0;
    border: 0;
    border-radius: .55rem;
    background: var(--bt-surface-3);
    color: var(--bt-ink-muted);
    font-size: .72rem;
    transform: translateY(-50%);
}
.global-search-clear:hover { color: var(--bt-ink); background: var(--bt-border-soft); }
.global-search-wrapper.has-search-value .global-search-clear { display: grid; }
.global-search-wrapper.has-search-value .global-search-shortcut { display: none; }
.header-global-search .search-dropdown {
    top: calc(100% + .7rem);
    width: min(42rem, calc(100vw - 2rem));
    max-height: min(72vh, 38rem);
    padding: 0;
    border-color: color-mix(in srgb, var(--bt-primary) 14%, var(--bt-border));
    border-radius: 1rem;
    box-shadow: 0 24px 64px rgba(15,35,60,.2), 0 6px 18px rgba(15,35,60,.09);
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
    scrollbar-width: thin;
    scrollbar-color: color-mix(in srgb,var(--bt-ink-muted) 52%,transparent) transparent;
}
.header-global-search .search-dropdown::-webkit-scrollbar { width: 8px; }
.header-global-search .search-dropdown::-webkit-scrollbar-track { background: transparent; }
.header-global-search .search-dropdown::-webkit-scrollbar-thumb { border: 2px solid transparent; border-radius: 999px; background: color-mix(in srgb,var(--bt-ink-muted) 52%,transparent); background-clip: padding-box; }
.search-results-head {
    position: sticky;
    top: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin: 0 0 .3rem;
    padding: .9rem 1rem;
    border-bottom: 1px solid var(--bt-border-soft);
    background: var(--bt-surface);
    box-shadow: 0 1px 0 var(--bt-border-soft),0 8px 18px color-mix(in srgb,var(--bt-surface) 88%,transparent);
}
.search-results-head strong { display: block; color: var(--bt-ink); font-size: .82rem; }
.search-results-head span:not(.search-live-dot) { display: block; margin-top: .12rem; color: var(--bt-ink-muted); font-size: .68rem; }
.search-live-dot { width: .5rem; height: .5rem; border-radius: 50%; background: var(--bt-success); box-shadow: 0 0 0 4px color-mix(in srgb,var(--bt-success) 14%,transparent); }
.search-result-group { margin-inline: .45rem; }
.search-result-group + .search-result-group { margin-top: .25rem; padding-top: .25rem; border-top: 1px solid var(--bt-border-soft); }
.search-result-group-heading { display: flex; align-items: center; justify-content: space-between; padding: .55rem .7rem .35rem; color: var(--bt-ink-muted); font-size: .63rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.search-result-group-heading span:last-child { display: grid; min-width: 1.25rem; height: 1.25rem; place-items: center; border-radius: 999px; background: var(--bt-surface-3); font-size: .6rem; }
.search-result-item { position: relative; gap: .75rem; min-height: 3.7rem; margin: .12rem 0; padding: .65rem .7rem; border: 0; border-radius: .72rem; text-decoration: none; }
.search-result-item:hover,.search-result-item:focus { outline: 0; background: var(--bt-surface-2); box-shadow: inset 0 0 0 1px var(--bt-border-soft); }
.search-result-icon { width: 2.35rem; height: 2.35rem; border-radius: .7rem; font-size: .9rem; }
.search-type-ticket .search-result-icon { background: var(--bt-primary-light); color: var(--bt-primary); }
.search-type-project .search-result-icon { background: var(--bt-info-bg); color: var(--bt-info); }
.search-type-epic .search-result-icon { background: #f1eafe; color: #7c3aed; }
.search-type-sprint .search-result-icon { background: var(--bt-warning-bg); color: var(--bt-warning); }
.search-type-document .search-result-icon { background: var(--bt-success-bg); color: var(--bt-success); }
.search-result-copy { flex: 1; min-width: 0; }
.search-result-title { overflow: hidden; font-size: .82rem; font-weight: 720; text-overflow: ellipsis; white-space: nowrap; }
.search-result-sub { overflow: hidden; margin-top: .16rem; font-size: .69rem; text-overflow: ellipsis; white-space: nowrap; }
.search-result-badge { flex: 0 0 auto; padding: .22rem .45rem; border: 1px solid var(--bt-border-soft); border-radius: 999px; background: var(--bt-surface-3); color: var(--bt-ink-muted); font-size: .6rem; font-weight: 750; box-shadow: none; }
.search-result-arrow { flex: 0 0 auto; color: var(--bt-ink-subtle); font-size: .72rem; opacity: 0; transform: translate(-3px,3px); transition: .16s ease; }
.search-result-item:hover .search-result-arrow,.search-result-item:focus .search-result-arrow { opacity: 1; transform: none; }
.search-results-footer { position: sticky; bottom: 0; z-index: 2; display: flex; justify-content: flex-end; gap: 1rem; margin: .35rem 0 0; padding: .65rem 1rem; border-top: 1px solid var(--bt-border-soft); background: var(--bt-surface); color: var(--bt-ink-muted); font-size: .62rem; box-shadow: 0 -8px 18px color-mix(in srgb,var(--bt-surface) 88%,transparent); }
.search-results-footer span { display: inline-flex; align-items: center; gap: .2rem; }
.search-results-footer kbd { min-width: 1.2rem; padding: .12rem .26rem; border: 1px solid var(--bt-border); border-bottom-width: 2px; border-radius: .28rem; background: var(--bt-surface-2); color: var(--bt-ink-muted); font: inherit; text-align: center; }
.search-empty { padding: 2.5rem 1rem; color: var(--bt-ink-muted); font-size: .78rem; text-align: center; }
.search-empty>i { display: inline-grid; width: 2.5rem; height: 2.5rem; margin-bottom: .6rem; place-items: center; border-radius: .75rem; background: var(--bt-surface-2); color: var(--bt-primary); font-size: 1rem; }
.mobile-global-search-wrapper .global-search-clear { right: 2.9rem; }
.mobile-global-search-wrapper .search-dropdown { top: calc(100% + .55rem); padding: 0; border-radius: .9rem; overscroll-behavior:contain; scrollbar-gutter:stable; }
@media(max-width:575.98px){.search-results-head{padding:.8rem}.search-result-item{min-height:3.55rem;padding:.6rem}.search-result-badge{display:none}.search-results-footer{justify-content:center}.search-results-footer span:nth-child(2){display:none}}
[data-theme="dark"] .workspace-topbar {
    background: var(--bt-topbar-gradient);
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.35);
}
[data-theme="dark"] .workspace-topbar-shell {
    background: transparent;
    border-color: transparent;
}
.workspace-topbar-right {
    min-width: 0;
    flex-wrap: nowrap;
}
.workspace-topbar-separator {
    color: var(--bt-ink-subtle);
    opacity: 0.75;
    font-size: 0.9rem;
    line-height: 1;
    margin: 0 0.2rem;
}
.top-attendance {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    flex: 0 0 auto;
    white-space: nowrap;
    padding: 0;
    border: none;
    border-radius: 0;
    background: transparent;
}
.top-attendance-label {
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 700;
    color: var(--bt-ink-muted);
    flex: 0 0 auto;
    white-space: nowrap;
}
.top-attendance-time {
    font-size: 0.78rem;
    color: var(--bt-ink);
}
.top-attendance-live {
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--bt-primary);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    flex: 0 0 auto;
    min-width: 4.8rem;
    text-align: center;
}
.top-attendance-done {
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--bt-success);
}
.top-attendance-auto {
    color: #b45309;
}
.attendance-btn-inline {
    width: auto;
    padding: 0.32rem 0.62rem;
    font-size: 0.76rem;
    line-height: 1.2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.3rem;
    white-space: nowrap;
}
.top-attendance form { flex: 0 0 auto; }
.top-attendance .attendance-btn-inline { width: auto; }
@media (min-width: 992px) and (max-width: 1199.98px) {
    .workspace-topbar { padding-inline: 1rem; }
    .header-global-search { min-width: 12rem; }
    .top-attendance-label { display: none; }
    .workspace-topbar-right .upod-info { display: none; }
}
.page-wrapper {
    flex: 1;
    padding: 2rem 2.25rem 3rem;
}

/* Mobile Topbar */
.mobile-topbar {
    background: var(--bt-surface-gradient);
    border-bottom: 1px solid var(--bt-border);
    padding: 0.7rem 1rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: sticky;
    top: 0;
    z-index: 900;
    box-shadow: var(--bt-shadow-xs);
}
.mobile-menu-btn,
.mobile-icon-btn {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--bt-ink);
    padding: 0.3rem 0.45rem;
    border-radius: var(--bt-r);
    transition: background var(--bt-t);
    display: flex;
    align-items: center;
}
.mobile-menu-btn:hover,
.mobile-icon-btn:hover {
    background: var(--bt-surface-2);
}
.mobile-logo {
    font-weight: 700;
    font-size: 0.95rem;
    color: var(--bt-ink);
}
.mobile-logo-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 1;
    min-width: 0;
}
.mobile-logo-img {
    width: 100%;
    height: auto;
    display: block;
}
.mobile-profile-btn::after {
    display: none;
}
.mobile-profile-avatar,
.mobile-profile-initials {
    width: 1.9rem;
    height: 1.9rem;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.mobile-profile-avatar {
    object-fit: cover;
}
.mobile-profile-initials {
    font-size: 0.68rem;
    font-weight: 700;
    color: #fff;
    background: linear-gradient(135deg, var(--bt-primary), var(--bt-primary-hover));
}
.mobile-profile-menu {
    border: 1px solid var(--bt-border);
    border-radius: var(--bt-r-lg);
    box-shadow: var(--bt-shadow-lg);
    min-width: 16rem;
    padding: 0.4rem;
    overflow: hidden;
}
.mobile-profile-menu .dropdown-item {
    display: flex;
    align-items: center;
    border-radius: var(--bt-r);
    padding: 0.55rem 0.65rem;
    font-size: 0.875rem;
}
.notif-pip {
    position: absolute;
    top: 2px;
    right: 2px;
    width: 0.42rem;
    height: 0.42rem;
    background: var(--bt-danger);
    border-radius: 50%;
    border: 2px solid var(--bt-surface);
}
.notif-badge {
    position: absolute;
    top: -2px;
    right: -4px;
    min-width: 1.15rem;
    height: 1.15rem;
    padding: 0 0.3rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bt-danger);
    color: #fff;
    font-size: 0.62rem;
    font-weight: 700;
    line-height: 1;
    border-radius: 999px;
    border: 2px solid var(--bt-surface);
}
.notif-dropdown-menu {
    padding: 0;
    width: 23rem;
    max-width: calc(100vw - 2rem);
    border: 1px solid var(--bt-border);
    border-radius: var(--bt-r-lg);
    box-shadow: var(--bt-shadow-lg);
    overflow: hidden;
    animation: upopIn 0.16s ease-out;
}
.notif-dropdown-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.85rem 1.1rem;
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--bt-ink);
    border-bottom: 1px solid var(--bt-border-soft);
}
.notif-dropdown-markall {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    background: none;
    border: none;
    padding: 0.25rem 0.5rem;
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--bt-primary);
    border-radius: var(--bt-r);
    cursor: pointer;
    transition: background var(--bt-t);
}
.notif-dropdown-markall:hover {
    background: var(--bt-primary-light);
}
.notif-dropdown-list {
    max-height: 22rem;
    overflow-y: auto;
}
.notif-dropdown-list .notif-item {
    padding: 0.75rem 1.1rem;
}
.notif-dropdown-loading,
.notif-dropdown-empty {
    padding: 2.25rem 1.1rem;
    text-align: center;
    font-size: 0.83rem;
    color: var(--bt-ink-muted);
}
.notif-dropdown-empty::before {
    content: "\f218";
    font-family: "bootstrap-icons";
    display: block;
    font-size: 1.5rem;
    margin-bottom: 0.5rem;
    color: var(--bt-ink-subtle);
}
.notif-dropdown-viewall {
    display: block;
    padding: 0.75rem 1.1rem;
    text-align: center;
    font-size: 0.83rem;
    font-weight: 600;
    color: var(--bt-primary);
    text-decoration: none;
    border-top: 1px solid var(--bt-border-soft);
    background: var(--bt-surface);
    transition: background var(--bt-t);
}
.notif-dropdown-viewall:hover {
    background: var(--bt-surface-2);
}
.notification-drawer-backdrop { position: fixed; inset: 0; z-index: 1090; background: rgba(15, 23, 42, .42); opacity: 0; transition: opacity .22s ease; }
.notification-drawer-backdrop.is-open { opacity: 1; }
.notification-drawer { position: fixed; top: 0; right: 0; z-index: 1095; display: flex; width: min(28rem, 100vw); height: 100dvh; flex-direction: column; background: var(--bt-surface); border-left: 1px solid var(--bt-border); box-shadow: -18px 0 45px rgba(15, 23, 42, .18); transform: translateX(105%); visibility: hidden; transition: transform .25s ease, visibility .25s; }
.notification-drawer.is-open { transform: translateX(0); visibility: visible; }
.notification-drawer-header { display: flex; min-height: 5.25rem; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem 1.25rem; border-bottom: 1px solid var(--bt-border-soft); }
.notification-drawer-eyebrow { display: block; color: var(--bt-primary); font-size: .68rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.notification-drawer-header h2 { margin: .15rem 0 0; color: var(--bt-ink); font-size: 1.15rem; font-weight: 750; }
.notification-drawer-close { display: grid; flex: 0 0 2.5rem; width: 2.5rem; height: 2.5rem; place-items: center; padding: 0; border: 0; border-radius: .75rem; background: var(--bt-surface-2); color: var(--bt-ink-muted); font-size: 1rem; transition: color .16s ease, background .16s ease, transform .16s ease; }
.notification-drawer-close:hover { border: 0; background: var(--bt-primary-light); color: var(--bt-primary); transform: rotate(4deg); }
.notification-drawer-toolbar { display: flex; justify-content: flex-end; padding: .65rem 1rem; border-bottom: 1px solid var(--bt-border-soft); }
.notification-drawer-list { flex: 1 1 auto; max-height: none; padding: .65rem; overflow-y: auto; overscroll-behavior: contain; background: var(--bt-surface-2); }
.notification-drawer-list .notif-item { margin-bottom: .55rem; padding: .9rem; border: 1px solid var(--bt-border-soft); border-radius: .85rem; background: var(--bt-surface); box-shadow: 0 3px 12px rgba(15,35,60,.045); }
.notification-drawer-list .notif-item:hover { border-color: color-mix(in srgb,var(--bt-primary) 28%,var(--bt-border-soft)); background: var(--bt-surface); box-shadow: 0 7px 18px rgba(15,35,60,.08); transform: translateY(-1px); }
.notification-drawer-list .notif-unread { border-color: color-mix(in srgb,var(--bt-primary) 24%,var(--bt-border-soft)); background: color-mix(in srgb,var(--bt-primary) 5%,var(--bt-surface)); }
.notification-drawer-list .notif-icon { border-radius: .7rem; }
.notification-drawer-list .notif-title { font-weight: 750; }
body.notification-drawer-open { overflow: hidden; }
@media (max-width: 575.98px) { .notification-drawer { width: 100vw; border-left: 0; } .notification-drawer-header { min-height: 4.5rem; padding: .8rem 1rem; } .notification-drawer-list .notif-item { padding: .85rem 1rem; } }
@media (prefers-reduced-motion: reduce) { .notification-drawer, .notification-drawer-backdrop { transition: none; } }

/* Create/edit navigation belongs in the desktop page header only. */
@media (max-width: 767.98px) {
    .page-header-right .btn:has(.bi-arrow-left) { display: none !important; }
}

/* ─── 8. Page Header ─────────────────────────────────────────────────────── */
.page-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.75rem;
    flex-wrap: wrap;
    padding: 0;
    border-bottom: none;
}
.page-header-left {
    min-width: 0;
}
.page-eyebrow {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--bt-primary);
    margin-bottom: 0.3rem;
}
.page-title {
    font-size: 1.45rem;
    font-weight: 700;
    color: var(--bt-ink);
    margin: 0;
    line-height: 1.25;
}
.page-subtitle {
    color: var(--bt-ink-muted);
    font-size: 0.875rem;
    margin: 0.3rem 0 0;
}
.page-breadcrumb {
    margin-bottom: 0.3rem;
}
.page-breadcrumb .breadcrumb-item,
.page-breadcrumb .breadcrumb-item a {
    font-size: 0.78rem;
    color: var(--bt-ink-muted);
}
.page-breadcrumb .breadcrumb-item.active {
    color: var(--bt-ink);
}
.page-breadcrumb .breadcrumb-item + .breadcrumb-item::before {
    color: var(--bt-ink-subtle);
}
.workspace-topbar-right .mobile-icon-btn {
    border: none;
    background: transparent;
    border-radius: 0;
    padding: 0.2rem;
}
.workspace-topbar-right .mobile-icon-btn:hover {
    background: transparent;
}
.header-user-wrap .user-popover {
    position: absolute;
    top: calc(100% + 0.35rem);
    right: 0;
    margin-bottom: 0;
    min-width: 190px;
    z-index: 1200;
}

.birthday-slider-banner {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    background: linear-gradient(135deg, rgba(4, 36, 61, 0.07), rgba(4, 36, 61, 0.02));
    border: 1px solid var(--bt-border);
    border-radius: var(--bt-r-lg);
    padding: 0.6rem 0.8rem;
    margin-bottom: 1rem;
    overflow: hidden;
}
.birthday-slider-head {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    color: var(--bt-primary);
    font-weight: 700;
    white-space: nowrap;
    font-size: 0.82rem;
}
.birthday-slider-window {
    overflow: hidden;
    flex: 1;
    min-width: 0;
}
.birthday-slider-track {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    min-width: 100%;
}
.birthday-slider-track.is-animated {
    width: max-content;
    animation: birthday-track-scroll 24s linear infinite;
}
.birthday-slider-item {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    background: var(--bt-surface);
    border: 1px solid var(--bt-border-soft);
    border-radius: 999px;
    padding: 0.28rem 0.68rem 0.28rem 0.28rem;
    white-space: nowrap;
}
.birthday-slider-avatar {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    object-fit: cover;
    border: 1px solid var(--bt-primary-border);
    flex-shrink: 0;
}
.birthday-slider-avatar-fallback {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.68rem;
    font-weight: 700;
    color: #fff;
    background: linear-gradient(135deg, var(--bt-primary), var(--bt-primary-hover));
}
.birthday-slider-copy {
    display: inline-flex;
    flex-direction: column;
    line-height: 1.12;
}
.birthday-slider-copy strong {
    font-size: 0.78rem;
    color: var(--bt-ink);
}
.birthday-slider-copy small {
    font-size: 0.67rem;
    color: var(--bt-ink-muted);
}
@keyframes birthday-track-scroll {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-50%);
    }
}

/* ─── 9. Cards ───────────────────────────────────────────────────────────── */
.app-card {
    background: var(--bt-surface-gradient);
    border: 1px solid rgba(148, 163, 184, 0.3);
    border-radius: var(--bt-r-xl);
    box-shadow: 0 10px 30px rgba(15, 35, 60, 0.07), 0 2px 6px rgba(15, 35, 60, 0.045);
    overflow: hidden;
}
.app-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.9rem 1.25rem;
    border-bottom: 1px solid var(--bt-border-soft);
    flex-wrap: wrap;
    gap: 0.5rem;
    background: var(--bt-header-gradient);
}
.app-card-title {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--bt-ink);
    margin: 0;
    display: flex;
    align-items: center;
    gap: 0.4rem;
}
.app-card-body {
    padding: 1.25rem;
}
.app-card-footer {
    padding: 0.75rem 1.25rem;
    border-top: 1px solid var(--bt-border-soft);
    background: var(--bt-surface-2);
}

/* ─── 10. Stats Grid ─────────────────────────────────────────────────────── */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 1rem;
    margin-bottom: 1.75rem;
}
.stat-card {
    background: var(--bt-surface);
    border: 1px solid var(--bt-border);
    border-radius: var(--bt-r-xl);
    padding: 1.25rem 1.5rem;
    box-shadow: var(--bt-shadow-card);
    transition:
        box-shadow var(--bt-t),
        transform var(--bt-t);
}
.stat-card:hover {
    box-shadow: var(--bt-shadow-md);
    transform: translateY(-1px);
}
.stat-label {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--bt-ink-muted);
    margin-bottom: 0.5rem;
    display: flex;
    align-items: center;
    gap: 0.35rem;
}
.stat-value {
    font-size: 2rem;
    font-weight: 800;
    color: var(--bt-ink);
    line-height: 1;
}

/* ─── 11. Bootstrap Form Overrides (replaces form-control-app) ──────────── */
.form-label {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--bt-ink-2);
    text-transform: uppercase;
    letter-spacing: 0.055em;
    margin-bottom: 0.35rem;
}
.form-control,
.form-select {
    background-color: var(--bt-surface);
    border: 1.5px solid var(--bt-border);
    border-radius: var(--bt-r);
    color: var(--bt-ink);
    font-size: 0.9rem;
    padding: 0.6rem 0.8rem;
    line-height: 1.5;
    transition:
        border-color var(--bt-t),
        box-shadow var(--bt-t),
        background-color var(--bt-t);
    box-shadow: var(--bt-shadow-xs);
}
.form-select {
    appearance: none;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%236b778c' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    background-size: 16px 12px;
    padding-right: 2.25rem;
}
.form-control::placeholder {
    color: var(--bt-ink-subtle);
}
.form-control:focus,
.form-select:focus {
    outline: none;
    border-color: var(--bt-primary);
    box-shadow:
        0 0 0 3px rgba(4, 36, 61, 0.15),
        var(--bt-shadow-xs);
    background-color: var(--bt-surface);
    color: var(--bt-ink);
}
.form-control:disabled,
.form-control[readonly],
.form-select:disabled {
    background-color: var(--bt-surface-2);
    color: var(--bt-ink-muted);
    opacity: 1;
}
textarea.form-control {
    min-height: 110px;
    resize: vertical;
}
.form-control-sm,
.form-select-sm {
    font-size: 0.83rem;
    padding: 0.4rem 0.7rem;
}
.form-control-lg,
.form-select-lg {
    font-size: 1rem;
    padding: 0.75rem 1rem;
}

.form-control.is-invalid,
.form-select.is-invalid {
    border-color: var(--bt-danger);
    background-image: none;
}
.form-control.is-invalid:focus,
.form-select.is-invalid:focus {
    box-shadow: 0 0 0 3px rgba(222, 53, 11, 0.15);
}
.invalid-feedback {
    font-size: 0.8rem;
    margin-top: 0.3rem;
    color: var(--bt-danger);
}
.form-text {
    font-size: 0.8rem;
    color: var(--bt-ink-muted);
    margin-top: 0.25rem;
}
.bt-info-help{position:relative;display:inline-grid;place-items:center;width:1.15rem;height:1.15rem;margin-left:.35rem;padding:0;border:1px solid var(--bt-primary);border-radius:50%;background:var(--bt-surface);color:var(--bt-primary);font-size:.7rem;line-height:1;vertical-align:middle;cursor:help}.bt-info-help:hover,.bt-info-help:focus-visible{color:#fff;background:var(--bt-primary);outline:none}.bt-info-help-text{position:absolute;left:50%;bottom:calc(100% + .6rem);z-index:1090;width:max-content;max-width:min(20rem,calc(100vw - 2rem));padding:.55rem .7rem;border-radius:.5rem;background:var(--bt-ink);color:var(--bt-surface);box-shadow:var(--bt-shadow-lg);font-size:.75rem;font-weight:500;line-height:1.4;letter-spacing:normal;text-align:left;text-transform:none;white-space:normal;opacity:0;visibility:hidden;pointer-events:none;transform:translate(-50%,.25rem);transition:opacity .16s ease,transform .16s ease,visibility .16s ease}.bt-info-help-text::after{content:"";position:absolute;top:100%;left:50%;border:.35rem solid transparent;border-top-color:var(--bt-ink);transform:translateX(-50%)}.bt-info-help:hover .bt-info-help-text,.bt-info-help:focus-visible .bt-info-help-text{opacity:1;visibility:visible;transform:translate(-50%,0)}
.bt-form-tooltip{--bs-tooltip-max-width:min(22rem,calc(100vw - 2rem));--bs-tooltip-bg:var(--bt-ink);--bs-tooltip-color:#fff;--bs-tooltip-opacity:1}.bt-form-tooltip .tooltip-inner{padding:.65rem .8rem;border-radius:.55rem;box-shadow:var(--bt-shadow-lg);font-size:.76rem;font-weight:550;line-height:1.45;text-align:left}

/* Keep every Bootstrap/custom tooltip readable on dark surfaces.  Do not use
   --bt-ink as a background here: in dark mode it is intentionally a light
   foreground colour. */
html[data-theme="dark"] body .tooltip,
html[data-theme="dark"] body .bt-modern-tooltip,
html[data-theme="dark"] body .bt-form-tooltip {
    --bs-tooltip-bg: #071827 !important;
    --bs-tooltip-color: #f8fafc !important;
    --bs-tooltip-opacity: 1 !important;
}
html[data-theme="dark"] body .tooltip .tooltip-inner,
html[data-theme="dark"] body .bt-modern-tooltip .tooltip-inner,
html[data-theme="dark"] body .bt-form-tooltip .tooltip-inner {
    border: 1px solid rgba(125, 211, 252, .2) !important;
    background: #071827 !important;
    background-image: linear-gradient(145deg, #071827 0%, #0b2940 100%) !important;
    color: #f8fafc !important;
    box-shadow: 0 12px 30px rgba(0, 0, 0, .46), 0 2px 8px rgba(0, 0, 0, .3) !important;
}
html[data-theme="dark"] body .tooltip.bs-tooltip-top .tooltip-arrow::before { border-top-color: #071827 !important; }
html[data-theme="dark"] body .tooltip.bs-tooltip-bottom .tooltip-arrow::before { border-bottom-color: #071827 !important; }
html[data-theme="dark"] body .tooltip.bs-tooltip-start .tooltip-arrow::before { border-left-color: #071827 !important; }
html[data-theme="dark"] body .tooltip.bs-tooltip-end .tooltip-arrow::before { border-right-color: #071827 !important; }

/* Form check (checkbox / radio) */
.form-check-input {
    border: 1.5px solid var(--bt-border);
    background-color: var(--bt-surface);
    cursor: pointer;
}
.form-check-input:checked {
    background-color: var(--bt-primary);
    border-color: var(--bt-primary);
}
.form-check-input:focus {
    box-shadow: 0 0 0 3px rgba(4, 36, 61, 0.15);
    border-color: var(--bt-primary);
}
.form-check-label {
    font-size: 0.875rem;
    color: var(--bt-ink);
    cursor: pointer;
}

/* Input group */
.input-group .form-control,
.input-group .form-select {
    border-radius: var(--bt-r);
}
.input-group-text {
    background: var(--bt-surface-2);
    border: 1.5px solid var(--bt-border);
    color: var(--bt-ink-muted);
    font-size: 0.875rem;
}

/* Legacy support — keep form-control-app as alias */
.form-control-app {
    width: 100%;
    display: block;
    background-color: var(--bt-surface);
    border: 1.5px solid var(--bt-border);
    border-radius: var(--bt-r);
    color: var(--bt-ink);
    font-size: 0.9rem;
    padding: 0.6rem 0.8rem;
    line-height: 1.5;
    transition:
        border-color var(--bt-t),
        box-shadow var(--bt-t);
    box-shadow: var(--bt-shadow-xs);
}
.form-control-app::placeholder {
    color: var(--bt-ink-subtle);
}
.form-control-app:focus {
    outline: none;
    border-color: var(--bt-primary);
    box-shadow:
        0 0 0 3px rgba(4, 36, 61, 0.15),
        var(--bt-shadow-xs);
}
.form-control-app.is-invalid {
    border-color: var(--bt-danger);
}
textarea.form-control-app {
    min-height: 110px;
    resize: vertical;
}

.form-select-app {
    width: 100%;
    display: block;
    background-color: var(--bt-surface);
    border: 1.5px solid var(--bt-border);
    border-radius: var(--bt-r);
    color: var(--bt-ink);
    font-size: 0.9rem;
    padding: 0.6rem 2rem 0.6rem 0.8rem;
    line-height: 1.5;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%236b778c' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 0.65rem center;
    background-size: 14px;
    appearance: none;
    transition:
        border-color var(--bt-t),
        box-shadow var(--bt-t);
    box-shadow: var(--bt-shadow-xs);
}
.form-select-app:focus {
    outline: none;
    border-color: var(--bt-primary);
    box-shadow:
        0 0 0 3px rgba(4, 36, 61, 0.15),
        var(--bt-shadow-xs);
}

.selected-option-tags,
.selected-member-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    margin-top: 0.65rem;
    min-height: 2rem;
}
.selected-option-tags:empty,
.selected-member-tags:empty {
    display: none;
}

.selected-option-tag,
.selected-member-tag {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    max-width: 100%;
    border: 1px solid var(--bt-primary-border);
    border-radius: 999px;
    background: var(--bt-primary-light, #e8eef3);
    color: var(--bt-primary, #04243d);
    padding: 0.35rem 0.6rem;
    font-size: 0.82rem;
    font-weight: 600;
    line-height: 1;
    cursor: default;
}

.selected-option-tag span,
.selected-member-tag span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.selected-option-remove,
.selected-member-remove {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.15rem;
    height: 1.15rem;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: inherit;
    padding: 0;
    line-height: 1;
    cursor: pointer;
}

.selected-option-remove i,
.selected-member-remove i {
    font-size: 0.68rem;
    opacity: 0.8;
    pointer-events: none;
}

.selected-option-remove:hover,
.selected-member-remove:hover {
    background: color-mix(in srgb, var(--bt-primary) 12%, transparent);
}

.selected-option-tag:hover,
.selected-member-tag:hover {
    border-color: var(--bt-primary);
    background: var(--bt-surface-3);
}

.selected-option-empty,
.selected-member-empty {
    align-self: center;
    color: var(--bt-ink-subtle);
    font-size: 0.83rem;
}
.form-label-app {
    display: block;
    font-size: 0.79rem;
    font-weight: 600;
    color: var(--bt-ink-2);
    text-transform: uppercase;
    letter-spacing: 0.055em;
    margin-bottom: 0.35rem;
}
.form-help {
    font-size: 0.79rem;
    color: var(--bt-ink-muted);
    margin-top: 0.25rem;
}

/* ─── 12. Buttons ────────────────────────────────────────────────────────── */
.btn {
    font-weight: 600;
    border-radius: var(--bt-r);
    transition: all var(--bt-t);
    font-size: 0.875rem;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}
.btn i.bi {
    font-size: 0.95em;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.btn-sm {
    font-size: 0.8rem;
    min-height: 2rem;
    padding: 0.34rem 0.76rem;
    border-radius: 0.55rem;
}
.btn-lg {
    font-size: 1rem;
    padding: 0.7rem 1.5rem;
}
.btn-xs {
    font-size: 0.75rem;
    padding: 0.2rem 0.55rem;
    border-radius: var(--bt-r-sm);
}
.btn.btn-sm.action-btn {
    font-weight: 600;
    letter-spacing: 0.01em;
}
.btn.btn-sm.btn-icon {
    width: 2rem;
    min-width: 2rem;
    padding: 0;
    justify-content: center;
    gap: 0;
}
.btn.btn-sm.btn-icon i.bi {
    margin: 0 !important;
    font-size: 0.92rem;
}

.btn:focus-visible {
    outline: 0;
    box-shadow: 0 0 0 .2rem rgba(4, 36, 61, .14);
}

.btn-primary {
    --bs-btn-bg: var(--bt-primary);
    --bs-btn-border-color: var(--bt-primary);
    --bs-btn-hover-bg: var(--bt-primary-hover);
    --bs-btn-hover-border-color: var(--bt-primary-hover);
    --bs-btn-focus-shadow-rgb: 4, 36, 61;
    --bs-btn-active-bg: var(--bt-primary-hover);
    --bs-btn-active-border-color: var(--bt-primary-hover);
    --bs-btn-disabled-bg: var(--bt-primary);
    --bs-btn-disabled-border-color: var(--bt-primary);
    background: var(--bt-primary);
    border-color: var(--bt-primary);
    color: #fff;
}
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:focus-visible,
.btn-primary:active,
.btn-primary.active,
.btn-primary.show,
.btn-check:checked + .btn-primary {
    background: var(--bt-primary-hover);
    border-color: var(--bt-primary-hover);
    color: #fff;
    box-shadow: 0 0 0 .2rem rgba(4, 36, 61, .14);
}
.btn-outline-primary {
    --bs-btn-color: var(--bt-primary);
    --bs-btn-border-color: var(--bt-primary);
    --bs-btn-hover-bg: var(--bt-primary);
    --bs-btn-hover-border-color: var(--bt-primary);
    --bs-btn-focus-shadow-rgb: 4, 36, 61;
    --bs-btn-active-bg: var(--bt-primary);
    --bs-btn-active-border-color: var(--bt-primary);
    border-color: var(--bt-primary);
    color: var(--bt-primary);
}
.btn-outline-primary:hover,
.btn-outline-primary:focus,
.btn-outline-primary:focus-visible,
.btn-outline-primary:active,
.btn-outline-primary.active,
.btn-outline-primary.show,
.btn-check:checked + .btn-outline-primary {
    background: var(--bt-primary);
    border-color: var(--bt-primary);
    color: #fff;
    box-shadow: 0 0 0 .2rem rgba(4, 36, 61, .14);
}
.btn-outline-secondary {
    border-color: var(--bt-border);
    color: var(--bt-ink-muted);
}
.btn-outline-secondary:hover {
    background: var(--bt-surface-2);
    color: var(--bt-ink);
    border-color: var(--bt-ink-muted);
}
.btn-ghost {
    background: none;
    border: none;
    color: var(--bt-ink-muted);
    padding: 0.3rem 0.5rem;
}
.btn-ghost:hover {
    background: var(--bt-surface-2);
    color: var(--bt-ink);
}
.btn-ghost.btn-sm.btn-icon {
    background: var(--bt-surface-2);
    border: 1px solid var(--bt-border-soft);
}
.btn-ghost.btn-sm.btn-icon:hover {
    background: var(--bt-surface-3);
    border-color: var(--bt-border);
}
.bt-form-action-bar {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: .55rem;
    padding: .85rem;
    border: 1px solid var(--bt-border-soft);
    border-radius: .85rem;
    color: var(--bt-ink);
    background: color-mix(in srgb, var(--bt-surface) 94%, transparent);
    box-shadow: 0 -8px 24px rgba(15, 23, 42, .08);
    backdrop-filter: blur(10px);
}
.bt-form-action-bar .btn {
    min-height: 2.35rem;
    font-weight: 700;
    border-radius: .55rem;
}
[data-theme="dark"] .bt-form-action-bar {
    border-color: var(--bt-border);
    background: color-mix(in srgb, var(--bt-surface) 96%, transparent);
    box-shadow: 0 -8px 24px rgba(0, 0, 0, .3);
}
.bt-form-action-bar .btn-primary {
    order: 2;
}
.bt-form-action-bar .btn-outline-secondary,
.bt-form-action-bar .btn-ghost {
    order: 1;
}
.bt-page-action-bar {
    position: sticky;
    bottom: .75rem;
    z-index: 20;
    margin-top: 1rem;
}
.ticket-edit-action-bar {
    position: sticky;
    bottom: .75rem;
    z-index: 20;
    width: 100%;
    max-width: none;
    box-sizing: border-box;
    margin-top: 1rem;
}

/* Planning portfolio: shared Epic and Sprint index presentation. */
.planning-filter-card .app-card-header {
    background: var(--bt-header-gradient);
}
.planning-filter-card .app-card-body { padding-block: 1rem; }
.planning-item-card {
    position: relative;
    overflow: hidden;
    border-color: color-mix(in srgb, var(--planning-accent) 17%, var(--bt-border));
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.planning-item-card::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 4px;
    background: var(--planning-accent);
}
.planning-item-card:hover {
    transform: translateY(-2px);
    border-color: color-mix(in srgb, var(--planning-accent) 38%, var(--bt-border));
    box-shadow: var(--bt-shadow-lg);
}
.planning-item-card .app-card-body { padding: 1rem 1.15rem 1.05rem 1.3rem; }
.planning-item-card .app-card-footer {
    padding-left: 1.3rem;
    background: linear-gradient(90deg, color-mix(in srgb, var(--planning-accent) 5%, var(--bt-surface-2)), var(--bt-surface-2));
}
.planning-item-title {
    margin: .3rem 0 .25rem;
    color: var(--bt-ink);
    font-size: 1.02rem;
    font-weight: 760;
    line-height: 1.35;
}
.planning-item-title a:hover { color: var(--planning-accent) !important; }
.planning-project-name {
    display: inline-flex;
    align-items: center;
    color: var(--bt-ink-muted);
    font-size: .76rem;
    font-weight: 650;
}
.planning-progress-summary {
    min-width: 5rem;
    padding: .5rem .65rem;
    border: 1px solid color-mix(in srgb, var(--planning-accent) 20%, var(--bt-border));
    border-radius: .65rem;
    background: color-mix(in srgb, var(--planning-accent) 7%, var(--bt-surface));
    text-align: center;
}
.planning-progress-summary div {
    color: var(--planning-accent);
    font-size: 1.2rem;
    font-weight: 830;
    line-height: 1.1;
}
.planning-progress-summary small {
    color: var(--bt-ink-muted);
    font-size: .67rem;
}
.planning-item-card .progress {
    overflow: visible;
    background: var(--bt-surface-3);
}
.planning-item-card .progress-bar {
    border-radius: 999px;
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--planning-accent) 18%, transparent);
}

/* Reports: project-first analytics navigation. */
.report-project-picker {
    padding: 1.15rem;
    border: 1px solid var(--bt-border);
    border-radius: var(--bt-r-xl);
    background: linear-gradient(145deg, var(--bt-surface), color-mix(in srgb, var(--bt-primary-light) 30%, var(--bt-surface)));
    box-shadow: var(--bt-shadow-card);
}
.report-picker-heading,
.report-selected-project {
    display: flex;
    align-items: center;
    gap: .85rem;
}
.report-picker-heading { margin-bottom: 1rem; }
.report-picker-heading > div,
.report-selected-project > div:first-child { flex: 1; min-width: 0; }
.report-picker-heading span:not(.report-picker-icon):not(.report-project-count),
.report-selected-project > div:first-child > span {
    color: var(--bt-primary);
    font-size: .66rem;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}
.report-picker-heading h2,
.report-selected-project h2 { margin: .08rem 0; color: var(--bt-ink); font-size: 1.1rem; font-weight: 800; }
.report-picker-heading p,
.report-selected-project p { margin: 0; color: var(--bt-ink-muted); font-size: .78rem; }
.report-picker-icon {
    display: grid;
    place-items: center;
    width: 2.65rem;
    height: 2.65rem;
    flex: 0 0 auto;
    border-radius: .75rem;
    background: var(--bt-primary);
    color: #fff;
    box-shadow: 0 8px 18px color-mix(in srgb, var(--bt-primary) 24%, transparent);
}
.report-project-count {
    padding: .38rem .65rem;
    border: 1px solid var(--bt-border);
    border-radius: 999px;
    background: var(--bt-surface);
    color: var(--bt-ink-muted);
    font-size: .7rem;
    font-weight: 700;
    white-space: nowrap;
}
.report-project-filters { display:grid; grid-template-columns:minmax(220px,1fr) minmax(160px,220px) auto auto; gap:.6rem; align-items:center; margin-bottom:1rem; padding:.75rem; border:1px solid var(--bt-border-soft); border-radius:.75rem; background:var(--bt-surface); }
.report-project-search { position:relative; }
.report-project-search > i { position:absolute; left:.8rem; top:50%; z-index:2; color:var(--bt-ink-subtle); transform:translateY(-50%); pointer-events:none; }
.report-project-search .form-control { padding-left:2.25rem; }
.report-filter-result { color:var(--bt-ink-muted); font-size:.72rem; white-space:nowrap; }
.report-filter-result strong { color:var(--bt-primary); font-size:.85rem; }
.report-project-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .85rem; }
.report-project-tile {
    --project-accent: var(--bt-primary);
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 13rem;
    padding: 1rem;
    overflow: hidden;
    border: 1px solid color-mix(in srgb, var(--project-accent) 20%, var(--bt-border));
    border-radius: .8rem;
    background: var(--bt-surface);
    color: var(--bt-ink);
    text-decoration: none;
    transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.report-project-tile::before { content:""; position:absolute; inset:0 0 auto; height:3px; background:var(--project-accent); }
.report-project-tile:hover { transform:translateY(-3px); border-color:color-mix(in srgb,var(--project-accent) 48%,var(--bt-border)); box-shadow:var(--bt-shadow-lg); color:var(--bt-ink); }
.report-project-tile-top { display:flex; align-items:center; justify-content:space-between; color:var(--project-accent); }
.report-project-status { display:inline-flex; align-items:center; gap:.3rem; margin-left:auto; margin-right:.65rem; padding:.24rem .45rem; border:1px solid color-mix(in srgb,var(--status-color) 25%,var(--bt-border)); border-radius:999px; background:color-mix(in srgb,var(--status-color) 9%,var(--bt-surface)); color:var(--status-color); font-size:.62rem; font-weight:750; }
.report-project-status i { width:.38rem; height:.38rem; border-radius:50%; background:currentColor; }
.report-project-avatar { display:grid; place-items:center; width:2.35rem; height:2.35rem; border-radius:.65rem; background:color-mix(in srgb,var(--project-accent) 13%,transparent); color:var(--project-accent); font-size:.72rem; font-weight:850; }
.report-project-tile h3 { margin:.85rem 0 .3rem; font-size:.95rem; font-weight:780; }
.report-project-tile p { margin:0; color:var(--bt-ink-muted); font-size:.73rem; line-height:1.5; }
.report-project-meta { display:flex; flex-wrap:wrap; gap:.35rem .75rem; margin-top:.8rem; color:var(--bt-ink-muted); font-size:.68rem; }
.report-project-meta span { display:inline-flex; align-items:center; gap:.3rem; }
.report-project-open { display:flex; align-items:center; justify-content:space-between; margin-top:auto; padding-top:.75rem; border-top:1px solid var(--bt-border-soft); color:var(--project-accent); font-size:.72rem; font-weight:750; }
.report-filter-empty { grid-column:1/-1; display:flex; align-items:center; justify-content:center; flex-direction:column; gap:.3rem; min-height:11rem; margin-top:.25rem; border:1px dashed var(--bt-border); border-radius:.75rem; color:var(--bt-ink-muted); text-align:center; }
.report-filter-empty > i { color:var(--bt-primary); font-size:1.4rem; }.report-filter-empty strong{color:var(--bt-ink);font-size:.9rem}.report-filter-empty span{font-size:.72rem}
.report-selected-project { justify-content:space-between; margin-bottom:1rem; padding:.9rem 1rem; border:1px solid var(--bt-border); border-radius:var(--bt-r-lg); background:var(--bt-header-gradient); box-shadow:var(--bt-shadow-card); }
.report-selected-meta { display:flex; gap:.65rem; }
.report-selected-meta span { min-width:6rem; padding:.55rem .7rem; border:1px solid var(--bt-border); border-radius:.6rem; background:var(--bt-surface); color:var(--bt-ink-muted); font-size:.67rem; text-align:center; }
.report-selected-meta strong { display:block; color:var(--bt-ink); font-size:1rem; }
@media(max-width:991.98px){.report-project-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.report-project-filters{grid-template-columns:1fr 1fr}.report-filter-result{text-align:right}}
@media(max-width:575.98px){.report-picker-heading,.report-selected-project{align-items:flex-start;flex-direction:column}.report-project-grid,.report-project-filters{grid-template-columns:1fr}.report-project-count{align-self:flex-start}.report-selected-meta{width:100%}.report-selected-meta span{flex:1}.report-filter-result{text-align:left}.report-project-filters .btn{justify-content:center}}

/* Fixed create/edit actions for planning, documents, and leave modules. */
.planning-editor-form,
.document-editor-form,
.admin-editor-form,
.leave-editor-form,
.ticket-editor-form,
#ticketEditForm,
.ticket-edit-comments-wrap { padding-bottom:5.5rem; }
.planning-editor-actions,
.document-editor-actions,
.admin-editor-actions,
.leave-editor-actions,
.ticket-create-action-bar,
.ticket-edit-action-bar {
    position:fixed!important;
    z-index:900;
    right:2.25rem;
    bottom:.75rem;
    left:calc(var(--bt-sidebar-w) + 2.25rem);
    display:flex;
    align-items:center;
    justify-content:flex-end;
    flex-flow:row nowrap!important;
    gap:.55rem;
    width:auto!important;
    max-width:none!important;
    margin:0!important;
    padding:.7rem;
    border:1px solid rgba(203,213,225,.78);
    border-radius:.9rem;
    background:color-mix(in srgb,var(--bt-surface) 96%,transparent);
    box-shadow:0 -8px 28px rgba(15,23,42,.12);
    backdrop-filter:blur(12px);
    transform:none!important;
}
.planning-editor-actions .btn,
.document-editor-actions .btn,
.admin-editor-actions .btn,
.leave-editor-actions .btn,
.ticket-create-action-bar .btn,
.ticket-edit-action-bar .btn { min-height:2.4rem;font-weight:700;white-space:nowrap; }
.planning-editor-actions .btn-primary,
.document-editor-actions .btn-primary,
.admin-editor-actions .btn-primary,
.leave-editor-actions .btn-primary,
.ticket-create-action-bar .btn-primary,
.ticket-edit-action-bar .btn-primary { order:2; }
.planning-editor-actions .btn-outline-secondary,
.document-editor-actions .btn-outline-secondary,
.admin-editor-actions .btn-outline-secondary,
.leave-editor-actions .btn-outline-secondary,
.ticket-create-action-bar .btn-outline-secondary,
.ticket-edit-action-bar .btn-outline-secondary { order:1; }
body.sidebar-collapsed .planning-editor-actions,
body.sidebar-collapsed .document-editor-actions,
body.sidebar-collapsed .admin-editor-actions,
body.sidebar-collapsed .leave-editor-actions,
body.sidebar-collapsed .ticket-create-action-bar,
body.sidebar-collapsed .ticket-edit-action-bar { left:calc(var(--bt-sidebar-collapsed-w) + 2.25rem); }
@media(max-width:991.98px){
    .planning-editor-actions,
    .document-editor-actions,
    .admin-editor-actions,
    .leave-editor-actions,
    .ticket-create-action-bar,
    .ticket-edit-action-bar,
    body.sidebar-collapsed .planning-editor-actions,
    body.sidebar-collapsed .document-editor-actions,
    body.sidebar-collapsed .admin-editor-actions,
    body.sidebar-collapsed .leave-editor-actions,
    body.sidebar-collapsed .ticket-create-action-bar,
    body.sidebar-collapsed .ticket-edit-action-bar { right:1rem;left:1rem; }
}
@media (max-width: 767.98px) {
    .planning-filter-card .app-card-header { align-items: flex-start; }
    .planning-editor-form,
    .document-editor-form,
    .admin-editor-form,
    .leave-editor-form,
    .ticket-editor-form { padding-bottom:calc(5.25rem + env(safe-area-inset-bottom)); }
    .ticket-edit-comments-wrap { padding-bottom:calc(5.25rem + env(safe-area-inset-bottom)); }
    .planning-editor-actions,
    .document-editor-actions,
    .admin-editor-actions,
    .leave-editor-actions,
    .ticket-create-action-bar,
    .ticket-edit-action-bar {
        position:fixed!important;
        z-index:1050;
        right:.75rem;
        bottom:calc(.65rem + env(safe-area-inset-bottom));
        left:.75rem;
        width:auto!important;
        max-width:none!important;
        display:flex;
        gap:.55rem;
        margin:0!important;
        transform:none!important;
        padding:.65rem;
        border:1px solid rgba(203,213,225,.78);
        border-radius:.9rem;
        background:color-mix(in srgb,var(--bt-surface) 96%,transparent);
        box-shadow:0 -8px 28px rgba(15,23,42,.12);
        backdrop-filter:blur(12px);
        flex-flow:row nowrap!important;
        align-items:stretch;
    }
    .planning-editor-actions .btn,
    .document-editor-actions .btn,
    .admin-editor-actions .btn,
    .leave-editor-actions .btn,
    .ticket-create-action-bar .btn,
    .ticket-edit-action-bar .btn {
        flex:1 1 0;
        width:auto!important;
        max-width:none;
        min-width:0;
        min-height:2.75rem;
        justify-content:center;
        font-weight:700;
        font-size:.78rem;
        white-space:nowrap;
    }
    .planning-editor-actions .btn-primary,
    .document-editor-actions .btn-primary,
    .admin-editor-actions .btn-primary,
    .leave-editor-actions .btn-primary,
    .ticket-create-action-bar .btn-primary,
    .ticket-edit-action-bar .btn-primary { order:1; }
    .planning-editor-actions .btn-outline-secondary,
    .document-editor-actions .btn-outline-secondary,
    .admin-editor-actions .btn-outline-secondary,
    .leave-editor-actions .btn-outline-secondary,
    .ticket-create-action-bar .btn-outline-secondary,
    .ticket-edit-action-bar .btn-outline-secondary { order:2; }
}
@media (max-width: 479.98px) {
    .planning-item-card .app-card-footer { align-items: flex-start !important; flex-direction: column; gap: .7rem; }
    .planning-item-card .app-card-footer .d-flex { width: 100%; }
    .planning-item-card .app-card-footer .btn { flex: 1; justify-content: center; }
}
@media (max-width: 575.98px) {
    .bt-form-action-bar {
        justify-content: stretch;
    }
    .bt-form-action-bar .btn {
        flex: 1 1 100%;
    }
    .bt-form-action-bar.planning-editor-actions .btn,
    .bt-form-action-bar.document-editor-actions .btn,
    .bt-form-action-bar.admin-editor-actions .btn,
    .bt-form-action-bar.leave-editor-actions .btn { flex:1 1 0; }
    .bt-form-action-bar.ticket-edit-action-bar .btn {
        flex:1 1 0;
    }
}

/* --------------------------------------------------------------------------
   Borderless application surfaces

   Cards and panels use elevation—not outlines—for visual separation. Keep
   borders on controls, tables, and internal dividers where they aid scanning.
   -------------------------------------------------------------------------- */
:root {
    --bt-card-shadow-decent: 0 10px 28px rgba(15, 35, 60, 0.12), 0 3px 8px rgba(15, 35, 60, 0.075);
    --bt-card-shadow-hover: 0 16px 38px rgba(15, 35, 60, 0.16), 0 5px 12px rgba(15, 35, 60, 0.085);
}

[data-theme="dark"] {
    --bt-card-shadow-decent: 0 12px 30px rgba(0, 0, 0, 0.36), 0 3px 9px rgba(0, 0, 0, 0.26);
    --bt-card-shadow-hover: 0 18px 42px rgba(0, 0, 0, 0.46), 0 5px 14px rgba(0, 0, 0, 0.3);
}

:where(
    .card,
    .modal-content,
    .backlog-section,
    .subscription-limits,
    [class$="-card"],
    [class*="-card "],
    [class$="-panel"],
    [class*="-panel "]
) {
    border: 0 !important;
    box-shadow: var(--bt-card-shadow-decent) !important;
}

:where(
    a[class$="-card"],
    a[class*="-card "],
    button[class$="-card"],
    button[class*="-card "],
    .project-card,
    .planning-item-card,
    .document-library-card,
    .credential-card,
    .analytics-metric-card
):hover {
    border: 0 !important;
    box-shadow: var(--bt-card-shadow-hover) !important;
}

/* --------------------------------------------------------------------------
   Clean workspace shell

   Keep the application chrome quiet and content-first in light mode.  These
   rules intentionally live at the end of the shared stylesheet so tenant and
   super-admin layouts receive the same treatment without page-level patches.
   -------------------------------------------------------------------------- */
[data-theme="light"] {
    --bt-shell-gradient: #ffffff;
    --bt-sidebar-gradient: #ffffff;
    --bt-topbar-gradient: rgba(255, 255, 255, 0.94);
    --bt-sidebar-bg: #ffffff;
    --bt-sidebar-hover: #f3f6f9;
    --bt-sidebar-active: #eaf2f8;
    --bt-sidebar-accent: #0877a8;
    --bt-sidebar-text: #172b43;
    --bt-sidebar-text-muted: #64748b;
    --bt-sidebar-border: #e3e9ef;
    --bt-sidebar-search-bg: #f7f9fb;
    --bt-sidebar-search-border: #dbe3ea;
    --bt-sidebar-search-placeholder: #94a3b8;
    --bt-sidebar-shadow: 1px 0 0 #e3e9ef;
    --bt-shadow-card: 0 1px 2px rgba(15, 35, 60, 0.04), 0 8px 24px rgba(15, 35, 60, 0.045);
}

[data-theme="light"] body.app-body,
[data-theme="light"] body.tenant-app {
    background: #ffffff;
}

[data-theme="light"] body.app-body .main-area,
[data-theme="light"] body.app-body .page-wrapper,
[data-theme="light"] body.tenant-app .main-area,
[data-theme="light"] body.tenant-app .page-wrapper {
    background: #ffffff;
}

[data-theme="light"] .sidebar {
    background: #ffffff;
    border-right: 1px solid var(--bt-sidebar-border);
    box-shadow: none;
}

[data-theme="light"] .sidebar-top {
    padding: 0.9rem 0.75rem 0.5rem;
}

[data-theme="light"] .sidebar .sidebar-brand-row {
    padding: 0.4rem;
    border: 0;
    background: #ffffff;
    box-shadow: none;
}

[data-theme="light"] .sidebar .sidebar-toggle-btn,
[data-theme="light"] .sidebar .sidebar-toggle-btn:hover {
    color: var(--bt-ink-muted);
    border-color: var(--bt-sidebar-border);
    background: #f7f9fb;
}

[data-theme="light"] .sidebar .sidebar-toggle-btn:hover {
    color: var(--bt-primary);
    background: var(--bt-sidebar-active);
}

[data-theme="light"] .sidenav-link,
[data-theme="light"] .sidenav-sublink {
    color: var(--bt-sidebar-text-muted);
}

[data-theme="light"] .sidenav-link {
    font-weight: 650;
}

[data-theme="light"] .sidenav-link:hover,
[data-theme="light"] .sidenav-sublink:hover {
    color: var(--bt-sidebar-text);
    background: var(--bt-sidebar-hover);
}

[data-theme="light"] .sidenav-link.is-active,
[data-theme="light"] .sidenav-sublink.is-active {
    color: #075f89;
    background: var(--bt-sidebar-active);
}

[data-theme="light"] .sidenav-sublink.is-active {
    font-weight: 700;
    box-shadow: inset 3px 0 0 var(--bt-sidebar-accent);
}

[data-theme="light"] .sidenav-link i,
[data-theme="light"] .sidenav-sublink i {
    opacity: 0.8;
}

[data-theme="light"] .sidebar-bottom {
    background: #ffffff;
    border-top-color: var(--bt-sidebar-border);
    backdrop-filter: none;
}

[data-theme="light"] .workspace-topbar {
    min-height: 68px;
    padding-inline: 2rem;
    background: rgba(255, 255, 255, 0.94);
    border-bottom: 1px solid var(--bt-border-soft);
    box-shadow: none;
    backdrop-filter: blur(16px);
}

[data-theme="light"] .workspace-topbar-shell {
    min-height: 68px;
}

[data-theme="light"] .workspace-topbar .global-search-input {
    color: var(--bt-ink);
    background: #f7f9fb;
    border-color: #dbe3ea;
    box-shadow: none;
}

[data-theme="light"] .workspace-topbar .global-search-input::placeholder {
    color: #7b8ba1;
}

[data-theme="light"] .workspace-topbar .global-search-input:focus {
    color: var(--bt-ink);
    background: #ffffff;
    border-color: #8cb3c8;
    box-shadow: 0 0 0 3px rgba(8, 119, 168, 0.1);
}

[data-theme="light"] .workspace-topbar .global-search-icon,
[data-theme="light"] .workspace-topbar .global-search-shortcut,
[data-theme="light"] .workspace-topbar .mobile-icon-btn,
[data-theme="light"] .workspace-topbar .user-pod.user-pod-header .upod-name,
[data-theme="light"] .workspace-topbar .top-attendance-time {
    color: var(--bt-ink);
}

[data-theme="light"] .workspace-topbar .global-search-shortcut {
    color: var(--bt-ink-muted);
    background: #ffffff;
    border-color: #dbe3ea;
}

[data-theme="light"] .workspace-topbar .user-pod.user-pod-header .upod-role,
[data-theme="light"] .workspace-topbar .user-pod.user-pod-header .upod-caret,
[data-theme="light"] .workspace-topbar .workspace-topbar-separator,
[data-theme="light"] .workspace-topbar .top-attendance-label {
    color: var(--bt-ink-muted);
}

[data-theme="light"] .workspace-topbar .top-attendance-live,
[data-theme="light"] .workspace-topbar .top-attendance-done {
    color: var(--bt-success);
}

[data-theme="light"] .workspace-topbar .quick-create-btn-inline {
    color: var(--bt-primary);
    border-color: var(--bt-border);
    background: #ffffff;
}

[data-theme="light"] .workspace-topbar .mobile-icon-btn:hover,
[data-theme="light"] .workspace-topbar .quick-create-btn-inline:hover {
    background: var(--bt-surface-2);
}

[data-theme="light"] .mobile-topbar {
    background: rgba(255, 255, 255, 0.96);
    box-shadow: none;
    backdrop-filter: blur(16px);
}

[data-theme="light"] .page-wrapper {
    padding-top: 1.75rem;
}

[data-theme="light"] .app-card,
[data-theme="light"] .stat-card,
[data-theme="light"] .chart-card,
[data-theme="light"] .info-tile,
[data-theme="light"] .profile-avatar-zone,
[data-theme="light"] .app-table-wrap.has-datatable .dataTables_scroll {
    background: #ffffff;
    border-color: #e0e7ee;
    box-shadow: var(--bt-shadow-card);
}

@media (max-width: 991.98px) {
    [data-theme="light"] .page-wrapper {
        padding-top: 1.25rem;
    }
}

/* Unified list filters: controls and actions share one comfortable height. */
:where(.filter-bar, .bt-filter-form, .report-project-filters, .app-card-body form[method="GET"])
:where(.form-control, .form-select, .btn, .bootstrap-select > .dropdown-toggle) {
    min-height: 2.625rem;
}

:where(.filter-bar, .bt-filter-form, .report-project-filters, .app-card-body form[method="GET"])
:where(.btn, a.btn) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    line-height: 1.2;
    white-space: nowrap;
}

:where(.filter-bar, .bt-filter-form, .report-project-filters, .app-card-body form[method="GET"])
.select2-container .select2-selection--single {
    min-height: 2.625rem;
}

:where(.filter-bar, .bt-filter-form, .report-project-filters, .app-card-body form[method="GET"])
.select2-container--default .select2-selection--single .select2-selection__rendered,
:where(.filter-bar, .bt-filter-form, .report-project-filters, .app-card-body form[method="GET"])
.select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 2.625rem;
    line-height: 2.625rem;
}

/* Reports use the same quiet surfaces and hierarchy as the rest of the app. */
.report-project-picker {
    padding: 1.25rem;
    border-color: var(--bt-border);
    background: var(--bt-surface);
    box-shadow: var(--bt-shadow-card);
}

.report-picker-heading {
    margin-bottom: 1.1rem;
}

.report-picker-icon {
    width: 2.75rem;
    height: 2.75rem;
    color: var(--bt-primary);
    background: var(--bt-primary-light);
    box-shadow: none;
}

.report-project-filters {
    grid-template-columns: minmax(220px, 1fr) minmax(170px, 220px) auto auto;
    gap: 0.625rem;
    padding: 0.75rem;
    border-color: var(--bt-border-soft);
    background: var(--bt-surface-2);
}

.report-project-filters .form-control,
.report-project-filters .form-select {
    background-color: var(--bt-surface);
}

.report-project-tile {
    min-height: 12.25rem;
    padding: 1.1rem;
    border-color: var(--bt-border);
    border-radius: var(--bt-r-xl);
    box-shadow: 0 1px 2px rgba(15, 35, 60, 0.035);
}

.report-project-tile::before {
    display: none;
}

.report-project-tile:hover {
    transform: translateY(-2px);
    border-color: color-mix(in srgb, var(--project-accent) 36%, var(--bt-border));
    box-shadow: 0 10px 24px rgba(15, 35, 60, 0.08);
}

.report-project-avatar {
    width: 2.5rem;
    height: 2.5rem;
    background: color-mix(in srgb, var(--project-accent) 10%, var(--bt-surface));
    border: 1px solid color-mix(in srgb, var(--project-accent) 16%, var(--bt-border));
    font-size: 0.78rem;
}

.report-project-status {
    padding: 0.28rem 0.55rem;
    font-size: 0.68rem;
}

.report-project-tile h3 {
    margin-top: 0.95rem;
    font-size: 1.02rem;
    line-height: 1.35;
}

.report-project-tile p {
    font-size: 0.82rem;
    line-height: 1.55;
}

.report-project-meta {
    gap: 0.45rem 0.9rem;
    font-size: 0.75rem;
}

.report-project-open {
    color: var(--bt-primary);
    font-size: 0.79rem;
    font-weight: 750;
}

@media (max-width: 575.98px) {
    .report-project-filters .btn {
        width: 100%;
    }
}

/* Premium planning portfolio shared by Epics and Sprints. */
.planning-filter-card {
    overflow: visible;
}

.planning-filter-card .app-card-header {
    min-height: 4.25rem;
    padding: 0.9rem 1.1rem;
    background: var(--bt-surface);
}

.planning-filter-card .app-card-header > div {
    min-width: 0;
}

.planning-filter-subtitle {
    display: block;
    margin: 0.2rem 0 0 1.65rem;
    color: var(--bt-ink-muted);
    font-size: 0.75rem;
    font-weight: 450;
}

.planning-filter-count {
    display: inline-flex;
    align-items: center;
    min-height: 1.9rem;
    padding: 0.3rem 0.65rem;
    border: 1px solid var(--bt-border);
    border-radius: 999px;
    color: var(--bt-ink-muted);
    background: var(--bt-surface-2);
    font-size: 0.7rem;
    font-weight: 700;
    white-space: nowrap;
}

.planning-filter-card .app-card-body {
    padding: 1rem 1.1rem 1.1rem;
    background: var(--bt-surface-2);
}

.planning-search-field {
    position: relative;
}

.planning-search-field > i {
    position: absolute;
    top: 50%;
    left: 0.85rem;
    z-index: 2;
    color: var(--bt-ink-subtle);
    transform: translateY(-50%);
    pointer-events: none;
}

.planning-search-field .form-control {
    padding-left: 2.4rem;
}

.planning-filter-actions .btn {
    flex: 1 1 0;
}

.planning-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
    margin-bottom: 1.25rem;
}

.planning-item-card {
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 22rem;
    overflow: hidden;
    border: 1px solid var(--bt-border);
    border-radius: var(--bt-r-xl);
    background: var(--bt-surface);
    box-shadow: var(--bt-shadow-card);
    transition: border-color 180ms ease, box-shadow 220ms ease, transform 180ms ease;
}

.planning-item-card::before {
    display: none;
}

.planning-item-card:hover {
    transform: translateY(-2px);
    border-color: var(--bt-primary-border);
    box-shadow: 0 14px 30px rgba(15, 35, 60, 0.09);
}

.planning-card-main {
    display: flex;
    flex: 1;
    flex-direction: column;
    padding: 1.15rem 1.2rem 1rem;
}

.planning-card-topline,
.planning-card-footer,
.planning-card-actions,
.planning-card-badges,
.planning-date-range,
.planning-project-name,
.planning-progress-label {
    display: flex;
    align-items: center;
}

.planning-card-topline {
    justify-content: space-between;
    gap: 1rem;
}

.planning-card-badges {
    flex-wrap: wrap;
    gap: 0.4rem;
}

.planning-progress-summary {
    min-width: auto;
    padding: 0;
    border: 0;
    background: transparent;
    text-align: right;
}

.planning-progress-summary div {
    color: var(--bt-ink);
    font-size: 1.2rem;
    font-weight: 800;
}

.planning-progress-summary small {
    display: block;
    margin-top: 0.1rem;
    color: var(--bt-ink-subtle);
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.planning-item-title {
    margin: 1rem 0 0.3rem;
    font-size: 1.05rem;
    font-weight: 780;
    line-height: 1.3;
}

.planning-item-title a {
    color: var(--bt-ink);
    text-decoration: none;
}

.planning-item-title a:hover {
    color: var(--bt-primary);
}

.planning-project-name {
    gap: 0.35rem;
    color: var(--bt-ink-muted);
    font-size: 0.73rem;
    font-weight: 650;
}

.planning-project-name i {
    color: var(--planning-accent);
}

.planning-item-description {
    min-height: 2.8rem;
    margin: 0.65rem 0 0.9rem;
    color: var(--bt-ink-muted);
    font-size: 0.78rem;
    line-height: 1.55;
}

.planning-meta-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.55rem;
}

.planning-meta-item {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    min-width: 0;
    padding: 0.55rem 0.65rem;
    border: 1px solid var(--bt-border-soft);
    border-radius: var(--bt-r-md);
    color: var(--bt-ink-muted);
    background: var(--bt-surface-2);
    font-size: 0.71rem;
}

.planning-meta-item i {
    color: var(--planning-accent);
    font-size: 0.82rem;
}

.planning-meta-item span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.planning-meta-item strong {
    color: var(--bt-ink);
    font-weight: 750;
}

.planning-progress-block {
    margin-top: auto;
    padding-top: 1.1rem;
}

.planning-progress-label {
    justify-content: space-between;
    margin-bottom: 0.4rem;
    color: var(--bt-ink-muted);
    font-size: 0.68rem;
    font-weight: 650;
}

.planning-progress-label strong {
    color: var(--planning-accent);
}

.planning-item-card .progress {
    height: 0.38rem;
    overflow: hidden;
    border-radius: 999px;
    background: var(--bt-surface-3);
}

.planning-item-card .progress-bar {
    border-radius: 999px;
    box-shadow: none;
}

.planning-card-footer {
    justify-content: space-between;
    gap: 0.8rem;
    min-height: 3.8rem;
    padding: 0.7rem 1.1rem;
    border-top: 1px solid var(--bt-border-soft);
    background: var(--bt-surface-2);
}

.planning-date-range {
    min-width: 0;
    gap: 0.4rem;
    color: var(--bt-ink-muted);
    font-size: 0.69rem;
}

.planning-date-range i {
    color: var(--bt-ink-subtle);
}

.planning-date-range span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.planning-card-actions {
    flex: 0 0 auto;
    gap: 0.45rem;
}

.planning-card-actions .btn {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
}

.planning-grid-empty {
    grid-column: 1 / -1;
}

@media (max-width: 1199.98px) {
    .planning-grid {
        grid-template-columns: 1fr;
    }
    .planning-item-card {
        min-height: 20rem;
    }
}

@media (max-width: 767.98px) {
    .planning-filter-card .app-card-header {
        align-items: flex-start;
    }
    .planning-filter-subtitle {
        margin-left: 0;
    }
    .planning-card-footer {
        align-items: flex-start;
        flex-direction: column;
    }
    .planning-card-actions,
    .planning-card-actions .btn {
        width: 100%;
    }
    .planning-card-actions .btn {
        flex: 1;
        justify-content: center;
    }
}

@media (max-width: 479.98px) {
    .planning-meta-grid {
        grid-template-columns: 1fr;
    }
    .planning-item-card {
        min-height: 0;
    }
}

/* Virtual document library: reading-first knowledge cards. */
.document-library-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
    margin-bottom: 1.25rem;
}

.document-library-card {
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 20rem;
    overflow: hidden;
    border: 1px solid var(--bt-border);
    border-radius: var(--bt-r-xl);
    background: var(--bt-surface);
    box-shadow: var(--bt-shadow-card);
    transition: transform 180ms ease, border-color 180ms ease, box-shadow 220ms ease;
}

.document-library-card:hover {
    transform: translateY(-2px);
    border-color: var(--bt-primary-border);
    box-shadow: 0 14px 30px rgba(15, 35, 60, 0.09);
}

.document-library-card.is-pinned {
    border-color: color-mix(in srgb, var(--bt-warning) 28%, var(--bt-border));
}

.document-card-body {
    display: flex;
    flex: 1;
    flex-direction: column;
    padding: 1.1rem;
}

.document-card-topline,
.document-card-badges,
.document-space,
.document-card-meta,
.document-owner,
.document-visibility,
.document-card-footer,
.document-updated,
.document-card-actions {
    display: flex;
    align-items: center;
}

.document-card-topline {
    justify-content: space-between;
    gap: 0.75rem;
}

.document-card-icon {
    display: grid;
    place-items: center;
    width: 2.65rem;
    height: 2.65rem;
    flex: 0 0 auto;
    border: 1px solid color-mix(in srgb, var(--bt-primary) 15%, var(--bt-border));
    border-radius: 0.7rem;
    color: var(--bt-primary);
    background: var(--bt-primary-light);
    font-size: 1.1rem;
}

.document-card-badges {
    gap: 0.4rem;
}

.document-pin {
    display: grid;
    place-items: center;
    width: 1.75rem;
    height: 1.75rem;
    border: 1px solid color-mix(in srgb, var(--bt-warning) 25%, var(--bt-border));
    border-radius: 50%;
    color: var(--bt-warning);
    background: var(--bt-warning-bg);
    font-size: 0.75rem;
}

.document-space {
    gap: 0.35rem;
    margin-top: 1rem;
    color: var(--bt-ink-muted);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

.document-space i {
    color: var(--bt-primary);
}

.document-card-title {
    margin: 0.4rem 0 0.55rem;
    font-size: 1.02rem;
    font-weight: 780;
    line-height: 1.35;
}

.document-card-title a {
    color: var(--bt-ink);
    text-decoration: none;
}

.document-card-title a:hover {
    color: var(--bt-primary);
}

.document-card-excerpt {
    min-height: 3.8rem;
    margin: 0;
    color: var(--bt-ink-muted);
    font-size: 0.8rem;
    line-height: 1.6;
}

.document-card-meta {
    justify-content: space-between;
    gap: 0.75rem;
    margin-top: auto;
    padding-top: 1rem;
}

.document-owner {
    min-width: 0;
    gap: 0.5rem;
}

.document-owner > span:last-child {
    min-width: 0;
}

.document-owner small,
.document-owner strong {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.document-owner small {
    color: var(--bt-ink-subtle);
    font-size: 0.6rem;
    line-height: 1.2;
    text-transform: uppercase;
}

.document-owner strong {
    max-width: 8.5rem;
    color: var(--bt-ink);
    font-size: 0.7rem;
    font-weight: 700;
}

.document-visibility {
    flex: 0 0 auto;
    gap: 0.3rem;
    padding: 0.25rem 0.5rem;
    border: 1px solid var(--bt-border-soft);
    border-radius: 999px;
    color: var(--bt-ink-muted);
    background: var(--bt-surface-2);
    font-size: 0.65rem;
    font-weight: 700;
}

.document-card-footer {
    justify-content: space-between;
    gap: 0.75rem;
    flex-wrap: wrap;
    min-height: 3.75rem;
    padding: 0.65rem 1rem;
    border-top: 1px solid var(--bt-border-soft);
    background: var(--bt-surface-2);
}

.document-updated {
    min-width: max-content;
    flex: 0 0 auto;
    gap: 0.35rem;
    color: var(--bt-ink-muted);
    font-size: 0.67rem;
}

/* Shared compact timestamp treatment. Keep relative dates readable as one
   metadata unit instead of allowing flex/grid layouts to stack every word. */
.bt-date-meta {
    display: inline-flex;
    max-width: 100%;
    align-items: center;
    gap: 0.3rem;
    line-height: 1.35;
    white-space: nowrap;
}

.bt-date-meta > i { flex: 0 0 auto; }

.document-card-actions {
    flex: 0 0 auto;
    gap: 0.4rem;
}

.document-card-actions .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.3rem;
}

.document-library-empty {
    grid-column: 1 / -1;
}

/* Workforce pages: compact, readable summaries aligned with dashboard cards. */
.timesheet-summary-grid,
.attendance-summary-grid {
    gap: 0.75rem;
    margin-bottom: 1.25rem;
}

.timesheet-summary-grid .stat-card,
.attendance-summary-grid .stat-card,
.epic-stats-grid .stat-card {
    min-width: 145px;
    padding: 0.9rem 1rem;
    border-color: var(--bt-border);
    border-radius: var(--bt-r-xl);
    background: var(--bt-surface);
    box-shadow: var(--bt-shadow-card);
}

.timesheet-summary-grid .stat-label,
.attendance-summary-grid .stat-label,
.epic-stats-grid .stat-label {
    gap: 0.4rem;
    margin-bottom: 0.45rem;
    color: var(--bt-ink-muted);
    font-size: 0.66rem;
    letter-spacing: 0.045em;
}

.timesheet-summary-grid .stat-label i,
.attendance-summary-grid .stat-label i,
.epic-stats-grid .stat-label i {
    display: inline-grid;
    place-items: center;
    width: 1.55rem;
    height: 1.55rem;
    border-radius: 0.45rem;
    color: var(--bt-primary);
    background: var(--bt-primary-light);
    font-size: 0.72rem;
}

.timesheet-summary-grid .stat-value,
.attendance-summary-grid .stat-value,
.epic-stats-grid .stat-value {
    color: var(--bt-ink);
    font-size: 1.42rem;
    font-weight: 780;
}

.timesheet-summary-grid .stat-value-period,
.attendance-summary-grid .stat-value-period {
    font-size: 0.82rem;
    line-height: 1.35;
    white-space: normal;
}

#timesheetFilterForm .btn,
#attendanceFilterForm .btn {
    padding-inline: 0.85rem;
}

@media (max-width: 1199.98px) {
    .document-library-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 767.98px) {
    .document-library-grid {
        grid-template-columns: 1fr;
    }
    .document-library-card {
        min-height: 18rem;
    }
}

@media (max-width: 479.98px) {
    .document-card-footer {
        align-items: flex-start;
        flex-direction: column;
    }
    .document-card-actions {
        width: 100%;
    }
    .document-card-actions > a,
    .document-card-actions > form { flex:1 1 0;min-width:0; }
    .document-card-actions > a.btn,
    .document-card-actions > form .btn { width:100%;padding-inline:.45rem; }
}

/* Polished motion system: subtle feedback without shifting application layout. */
@keyframes bt-surface-enter {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes bt-modal-enter {
    from { opacity: 0; transform: translateY(12px) scale(.985); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes bt-menu-enter {
    from { opacity: 0; transform: translateY(-5px) scale(.99); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

.page-wrapper > .page-header,
.page-wrapper > .app-card,
.page-wrapper > .stats-grid,
.page-wrapper > .stats-grid-compact,
.page-wrapper > .attendance-summary-grid,
.page-wrapper > .timesheet-summary-grid {
    animation: bt-surface-enter .38s cubic-bezier(.22, 1, .36, 1) both;
}

.page-wrapper > :nth-child(2) { animation-delay: .035s; }
.page-wrapper > :nth-child(3) { animation-delay: .07s; }
.page-wrapper > :nth-child(4) { animation-delay: .105s; }

.modal.show .modal-dialog {
    animation: bt-modal-enter .24s cubic-bezier(.22, 1, .36, 1) both;
}

.dropdown-menu.show,
.bootstrap-select.show > .dropdown-menu,
.search-results.is-open {
    transform-origin: top center;
    animation: bt-menu-enter .18s ease-out both;
}

/* Shared themed action popups. Their ancestors are elevated only while open,
   allowing menus to clear filter cards and other neighbouring surfaces. */
.bt-dropdown-open-layer {
    position: relative !important;
    z-index: 1120 !important;
    overflow: visible !important;
}
.dropdown.bt-action-dropdown-open {
    z-index: 1121 !important;
}
.dropdown:not(.bootstrap-select) > .dropdown-menu:not(.notif-dropdown-menu) {
    z-index: 1122 !important;
    min-width: 13rem;
    padding: .45rem;
    border: 1px solid var(--bt-border) !important;
    border-radius: .85rem !important;
    color: var(--bt-ink);
    background: color-mix(in srgb, var(--bt-surface) 97%, transparent) !important;
    box-shadow: 0 18px 42px rgba(15, 35, 60, .18), 0 3px 10px rgba(15, 35, 60, .07) !important;
    backdrop-filter: blur(14px);
}
.dropdown:not(.bootstrap-select) > .dropdown-menu:not(.notif-dropdown-menu) .dropdown-item {
    display: flex;
    min-height: 2.6rem;
    align-items: center;
    gap: .65rem;
    padding: .62rem .72rem;
    border: 0;
    border-radius: .6rem;
    color: var(--bt-ink-2);
    background: transparent;
    font-size: .84rem;
    font-weight: 600;
    line-height: 1.25;
    transition: color .15s ease, background-color .15s ease, transform .15s ease;
}
.dropdown:not(.bootstrap-select) > .dropdown-menu:not(.notif-dropdown-menu) .dropdown-item i {
    display: grid;
    flex: 0 0 1.45rem;
    width: 1.45rem;
    height: 1.45rem;
    margin: 0 !important;
    place-items: center;
    border-radius: .42rem;
    color: var(--bt-primary);
    background: var(--bt-primary-light);
    font-size: .8rem;
}
.dropdown:not(.bootstrap-select) > .dropdown-menu:not(.notif-dropdown-menu) .dropdown-item:hover,
.dropdown:not(.bootstrap-select) > .dropdown-menu:not(.notif-dropdown-menu) .dropdown-item:focus {
    color: var(--bt-primary);
    background: var(--bt-primary-light);
    transform: translateX(2px);
}
.dropdown:not(.bootstrap-select) > .dropdown-menu:not(.notif-dropdown-menu) .dropdown-item.active,
.dropdown:not(.bootstrap-select) > .dropdown-menu:not(.notif-dropdown-menu) .dropdown-item:active {
    color: #fff;
    background: var(--bt-primary);
}
.dropdown:not(.bootstrap-select) > .dropdown-menu:not(.notif-dropdown-menu) .dropdown-divider {
    margin: .38rem .25rem;
    border-color: var(--bt-border-soft);
}
@media (max-width: 575.98px) {
    .dropdown:not(.bootstrap-select) > .dropdown-menu:not(.notif-dropdown-menu) {
        min-width: min(15rem, calc(100vw - 1.5rem));
        padding: .4rem;
        border-radius: .8rem !important;
    }
    .dropdown:not(.bootstrap-select) > .dropdown-menu:not(.notif-dropdown-menu) .dropdown-item {
        min-height: 2.8rem;
        padding: .68rem .72rem;
        font-size: .86rem;
    }
}
@media (prefers-reduced-motion: reduce) {
    .dropdown-menu.show { animation: none !important; }
    .dropdown:not(.bootstrap-select) > .dropdown-menu:not(.notif-dropdown-menu) .dropdown-item { transition: none; }
}

.btn,
.nav-link,
.sidebar-link,
.app-card,
.stat-card,
.avatar-xs,
.avatar-sm,
.avatar-md {
    transition: color .18s ease, background-color .18s ease, border-color .18s ease,
        box-shadow .22s ease, transform .18s ease;
}

.btn:not(:disabled):hover {
    transform: translateY(-1px);
    box-shadow: 0 5px 14px rgb(15 48 77 / 12%);
}

.btn:not(:disabled):active {
    transform: translateY(0) scale(.98);
    box-shadow: none;
}

.app-table tbody tr,
.dataTable tbody tr {
    transition: background-color .18s ease, box-shadow .18s ease;
}

/* hover:hover guards these so a tap on a touchscreen (no real hover) doesn't leave a
   "stuck" highlighted row/tile behind after tapping an action button inside it. */
@media (hover: hover) and (pointer: fine) {
    .app-table tbody tr:hover,
    .dataTable tbody tr:hover {
        box-shadow: inset 3px 0 0 var(--brand, #0877b9);
    }
}

.avatar-xs:hover,
.avatar-sm:hover,
.avatar-md:hover {
    transform: scale(1.06);
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
}

/* Quiet, contemporary top-level navigation controls. */
.sidebar .sidebar-toggle-btn {
    width: 2.25rem;
    height: 2.25rem;
    padding: 0;
    border: 0 !important;
    border-radius: .6rem;
    color: var(--bt-ink-muted);
    background: transparent !important;
    box-shadow: none !important;
    transform: none;
}
.sidebar .sidebar-toggle-btn:hover,
.sidebar .sidebar-toggle-btn:focus-visible {
    color: var(--bt-primary);
    background: transparent !important;
    box-shadow: none !important;
    transform: none;
}
.sidebar-toggle-glyph {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 3px;
    width: 1rem;
    height: 1rem;
}
.sidebar-toggle-glyph span {
    display: block;
    height: 1.5px;
    border-radius: 999px;
    background: currentColor;
    transition: width 200ms ease, transform 220ms cubic-bezier(.2,.8,.2,1);
}
.sidebar-toggle-glyph span:nth-child(1) { width: .95rem; }
.sidebar-toggle-glyph span:nth-child(2) { width: .66rem; }
.sidebar-toggle-glyph span:nth-child(3) { width: .8rem; }
.sidebar-toggle-btn:hover .sidebar-toggle-glyph span:nth-child(2) { width: .95rem; }
body.sidebar-collapsed .sidebar-toggle-glyph span:nth-child(1) { width: .66rem; transform:translateX(.28rem); }
body.sidebar-collapsed .sidebar-toggle-glyph span:nth-child(2) { width: .95rem; }
body.sidebar-collapsed .sidebar-toggle-glyph span:nth-child(3) { width: .66rem; transform:translateX(.28rem); }
.user-pod.user-pod-header {
    min-width: 0;
    gap: .55rem;
    padding: .22rem .3rem;
    border-radius: .65rem;
    background: transparent;
    box-shadow: none;
}
.user-pod.user-pod-header:hover,
.user-pod.user-pod-header.is-open {
    background: transparent;
    box-shadow: none;
}
.user-pod.user-pod-header .upod-caret {
    display: block;
    flex: 0 0 auto;
    width: .95rem;
    height: .95rem;
    margin: 0 0 0 .1rem;
    padding: 0;
    border: 0;
    border-radius: 0;
    color: var(--bt-ink-muted);
    background: transparent;
    box-shadow: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: color 180ms ease, transform 200ms ease;
}
.user-pod.user-pod-header .upod-caret::before { content:none; }
.user-pod.user-pod-header:hover .upod-caret,
.user-pod.user-pod-header.is-open .upod-caret {
    color: var(--bt-primary);
    background: transparent;
}
.user-pod.user-pod-header.is-open .upod-caret { transform: rotate(180deg); }
@media (prefers-reduced-motion: reduce) {
    .sidebar-toggle-glyph span,
    .user-pod.user-pod-header .upod-caret { transition:none; }
}

/* ─── 13. Tables ─────────────────────────────────────────────────────────── */
.app-table-wrap {
    overflow-x: auto;
}
.app-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.875rem;
}
.app-table thead th {
    background: var(--bt-header-gradient);
    color: var(--bt-ink-muted);
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 0.75rem 1rem;
    border-bottom: 2px solid var(--bt-border);
    white-space: nowrap;
}
.app-table tbody td {
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--bt-border-soft);
    color: var(--bt-ink);
    vertical-align: middle;
}
.app-table tbody tr:last-child td {
    border-bottom: none;
}
.app-table tbody tr {
    transition: background var(--bt-t);
}
@media (hover: hover) and (pointer: fine) {
    .app-table tbody tr:hover td {
        background: var(--bt-surface-2);
    }
}

/* Sticky Name + Action columns */
.app-table .is-sticky-name-col,
.app-table .is-sticky-first-col,
.app-table .is-sticky-second-col,
.app-table .is-sticky-action-col {
    position: sticky;
    background: var(--bt-surface);
    z-index: 2;
    background-clip: padding-box;
}
.app-table thead .is-sticky-name-col,
.app-table thead .is-sticky-first-col,
.app-table thead .is-sticky-second-col,
.app-table thead .is-sticky-action-col {
    z-index: 8;
    background: var(--bt-surface-2) !important;
    background-image: none !important;
}
.app-table .is-sticky-name-col {
    left: 0;
    box-shadow: 1px 0 0 var(--bt-border-soft);
}
.app-table .is-sticky-first-col { box-shadow:1px 0 0 var(--bt-border-soft); }
.app-table .is-sticky-second-col { box-shadow:7px 0 12px -11px rgba(15,23,42,.85); }
.app-table .is-sticky-action-col {
    right: 0;
    isolation: isolate;
    box-shadow: -7px 0 12px -11px rgba(15,23,42,.85), -1px 0 0 var(--bt-border-soft);
}

/* DataTable enhancements (global) */
.app-table-wrap.has-datatable {
    padding: 0.95rem 1rem 1rem;
    overflow: hidden;
}
.app-table-wrap.has-datatable .bt-datatable {
    width: 100%;
}
.bt-datatable-native-scroll {
    width:100%;
    max-width:100%;
    overflow-x:auto;
    overflow-y:hidden;
    border:1px solid var(--bt-border-soft);
    border-radius:var(--bt-r-lg);
    background:var(--bt-surface);
    scrollbar-width:thin;
    scrollbar-color:rgba(107,119,140,.5) transparent;
}
.bt-datatable-native-scroll::-webkit-scrollbar { height:8px; }
.bt-datatable-native-scroll::-webkit-scrollbar-thumb { border-radius:999px;background:rgba(107,119,140,.42); }
.bt-datatable-native-scroll .app-table { width:100%!important;margin:0!important; }
.app-table-wrap.has-datatable,
.app-table-wrap.has-datatable > .dataTables_wrapper,
.app-table-wrap.has-datatable .bt-datatable {
    max-width: 100% !important;
    overflow-x: hidden !important;
}
.app-table-wrap.has-datatable .bt-datatable .row {
    --bs-gutter-x: 0.75rem;
    --bs-gutter-y: 0.55rem;
}
.app-table-wrap.has-datatable .dataTables_length,
.app-table-wrap.has-datatable .dataTables_info {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--bt-ink-muted);
}
.app-table-wrap.has-datatable .dataTables_length label {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
}
.app-table-wrap.has-datatable .dataTables_length select {
    min-width: 70px;
    margin: 0 !important;
    border: 1px solid var(--bt-border);
    border-radius: var(--bt-r-sm);
    background-color: var(--bt-surface);
    color: var(--bt-ink);
    box-shadow: none;
}
.app-table-wrap.has-datatable .dataTables_scroll {
    border: 1px solid var(--bt-border-soft);
    border-radius: var(--bt-r-lg);
    background: var(--bt-surface);
    overflow: hidden;
}
.app-table-wrap.has-datatable .dataTables_scrollHead {
    background: var(--bt-surface-2);
    border-bottom: 1px solid var(--bt-border);
}
.app-table-wrap.has-datatable .dataTables_scrollHead .app-table,
.app-table-wrap.has-datatable .dataTables_scrollBody .app-table {
    margin-bottom: 0 !important;
}
.app-table-wrap.has-datatable .dataTables_scrollBody {
    scrollbar-width: thin;
    scrollbar-color: rgba(107, 119, 140, 0.5) transparent;
    padding-bottom: 0.35rem;
}
.app-table-wrap.has-datatable .dataTables_scrollBody::-webkit-scrollbar {
    height: 8px;
}
.app-table-wrap.has-datatable .dataTables_scrollBody::-webkit-scrollbar-thumb {
    background: rgba(107, 119, 140, 0.42);
    border-radius: 999px;
}
.app-table-wrap.has-datatable .dataTables_scrollBody::-webkit-scrollbar-track {
    background: transparent;
}
.app-table-wrap.has-datatable .dataTables_paginate .pagination {
    margin: 0;
    gap: 0.25rem;
}
.app-table-wrap.has-datatable .dataTables_paginate .page-link {
    border: 1px solid var(--bt-border);
    border-radius: var(--bt-r-sm);
    color: var(--bt-ink-2);
    background: var(--bt-surface);
    box-shadow: none;
    font-size: 0.82rem;
    min-width: 2rem;
    text-align: center;
}
.app-table-wrap.has-datatable
    .dataTables_paginate
    .page-item.active
    .page-link {
    background: var(--bt-primary);
    border-color: var(--bt-primary);
    color: #fff;
}
.app-table-wrap.has-datatable
    .dataTables_paginate
    .page-item.disabled
    .page-link {
    background: var(--bt-surface-2);
    border-color: var(--bt-border-soft);
    color: var(--bt-ink-subtle);
}
.app-table-wrap.has-datatable .dataTables_processing {
    border: 1px solid var(--bt-border);
    border-radius: var(--bt-r);
    box-shadow: var(--bt-shadow-sm);
    padding: 0.5rem 0.8rem;
    display: none !important;
}

/* ─── 14. Flash / Alerts ─────────────────────────────────────────────────── */
.flash-alert {
    padding: 0.8rem 1rem;
    border-radius: var(--bt-r-md);
    font-size: 0.875rem;
    font-weight: 500;
    display: flex;
    align-items: flex-start;
    gap: 0.65rem;
    margin-bottom: 1.25rem;
    line-height: 1.5;
}
.flash-success {
    background: var(--bt-success-bg);
    color: var(--bt-success);
    border: 1px solid rgba(0, 102, 68, 0.25);
}
.flash-danger {
    background: var(--bt-danger-bg);
    color: var(--bt-danger);
    border: 1px solid rgba(222, 53, 11, 0.25);
}
.flash-warning {
    background: var(--bt-warning-bg);
    color: var(--bt-warning);
    border: 1px solid rgba(255, 139, 0, 0.25);
}

/* Global page loader */
.page-loader {
    position: fixed;
    inset: 0;
    display: none;
    align-items: center;
    justify-content: center;
    background: #ffffff54;
    backdrop-filter: blur(3px);
    z-index: 2000;
}
body.app-loading .page-loader,
.page-loader.is-active {
    display: flex;
}
.page-loader-inner {
    background: transparent;
    border: 0;
    box-shadow: none;
    border-radius: 0;
    padding: .5rem;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 0.8rem;
}
.page-loader-gif {
    display: block;
    width: clamp(5rem, 12vw, 8rem);
    height: auto;
    object-fit: contain;
}
.bug-loader {
    position: relative;
    width: 4.5rem;
    height: 4.5rem;
    border-radius: 50%;
    border: 1px solid var(--bt-primary-border);
    background: linear-gradient(
        145deg,
        var(--bt-primary-light),
        var(--bt-surface)
    );
    display: grid;
    place-items: center;
    overflow: hidden;
}
.bug-loader-core {
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 50%;
    background: var(--bt-primary);
    color: #fff;
    display: grid;
    place-items: center;
    box-shadow: 0 4px 12px rgba(4, 36, 61, 0.3);
    animation: bugBob 1.15s ease-in-out infinite;
}
.bug-loader-core i {
    font-size: 1.35rem;
}
.bug-loader-dot {
    position: absolute;
    width: 0.38rem;
    height: 0.38rem;
    border-radius: 50%;
    background: var(--bt-success);
    opacity: 0.75;
}
.bug-loader-dot-1 {
    top: 0.62rem;
    left: 0.72rem;
    animation: bugDotPulse 1.3s ease-in-out infinite;
}
.bug-loader-dot-2 {
    top: 0.48rem;
    right: 0.82rem;
    animation: bugDotPulse 1.3s ease-in-out 0.2s infinite;
}
.bug-loader-dot-3 {
    bottom: 0.68rem;
    left: 2rem;
    animation: bugDotPulse 1.3s ease-in-out 0.4s infinite;
}
.bug-loader-scan {
    position: absolute;
    width: 125%;
    height: 0.42rem;
    left: -12%;
    top: -18%;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(4, 36, 61, 0.35),
        transparent
    );
    transform: rotate(-20deg);
    animation: bugScan 1.6s linear infinite;
}
.page-loader-text {
    font-size: 0.84rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--bt-ink-muted);
}
.page-loader-message {
    display: flex;
    justify-content: center;
    min-width: 8rem;
    text-align: center;
    color: var(--bt-ink);
    animation: pageLoaderMessageIn .6s ease-out both;
}
.page-loader-typing {
    display: inline-block;
    width: 0;
    overflow: hidden;
    white-space: nowrap;
    border-right: 2px solid var(--bt-primary);
    font-size: 0.9rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: var(--bt-ink);
    animation: pageLoaderTyping 2s steps(14, end) infinite,
               pageLoaderCursor .7s step-end infinite;
}
@keyframes pageLoaderMessageIn {
    from { opacity: 0; transform: translateY(0.4rem); }
    to { opacity: 1; transform: translateY(0); }
}
@keyframes pageLoaderTyping {
    0% { width: 0; }
    55%, 85% { width: 14ch; }
    100% { width: 0; }
}
@keyframes pageLoaderCursor {
    50% { border-color: transparent; }
}
@media (prefers-reduced-motion: reduce) {
    .page-loader-message { animation: none; }
    .page-loader-typing { width: 14ch; animation: none; }
}

/* Quiet in-place loading for AJAX tables. Existing rows remain visible until
   the replacement page has been fully converted and is ready to display. */
.app-table-wrap.bt-table-loading { position:relative;pointer-events:none; }
.app-table-wrap.bt-table-loading::after { content:'';position:absolute;top:0;left:0;z-index:12;width:35%;height:3px;border-radius:999px;background:linear-gradient(90deg,transparent,var(--bt-primary),transparent);animation:btTableLoadingTrack .9s ease-in-out infinite; }
.app-table-wrap.bt-table-loading table,.app-table-wrap.bt-table-loading .dataTables_info,.app-table-wrap.bt-table-loading .dataTables_paginate { opacity:.58;transition:opacity .14s ease; }
.app-table-wrap:not(.bt-table-loading) table,.app-table-wrap:not(.bt-table-loading) .dataTables_info,.app-table-wrap:not(.bt-table-loading) .dataTables_paginate { opacity:1;transition:opacity .14s ease; }
@keyframes btTableLoadingTrack { from{left:-35%}to{left:100%} }
@media(prefers-reduced-motion:reduce){.app-table-wrap.bt-table-loading::after{animation:none;left:0;width:100%}}

/* Desktop card/list pagination feedback for AJAX and full-page navigation. */
@media (min-width: 768px) {
    .page-wrapper.bt-pagination-loading {
        cursor: wait;
        pointer-events: none;
    }
    .page-wrapper.bt-pagination-loading::before {
        position: fixed;
        z-index: 1060;
        inset: 72px 0 0 var(--bt-sidebar-w);
        background: color-mix(in srgb, var(--bt-bg) 62%, transparent);
        backdrop-filter: blur(1px);
        content: '';
    }
    .page-wrapper.bt-pagination-loading::after {
        position: fixed;
        z-index: 1061;
        top: 50%;
        left: calc(50% + (var(--bt-sidebar-w) / 2));
        min-width: 8.5rem;
        padding: .75rem 1rem .75rem 2.65rem;
        border: 1px solid var(--bt-border);
        border-radius: var(--bt-r-lg);
        color: var(--bt-ink);
        background:
            radial-gradient(circle at 1.35rem 50%, transparent .36rem, var(--bt-primary) .39rem .5rem, transparent .53rem),
            var(--bt-surface);
        box-shadow: var(--bt-shadow-lg);
        content: 'Loading results…';
        font-size: .82rem;
        font-weight: 750;
        text-align: left;
        transform: translate(-50%, -50%);
    }
    body.sidebar-collapsed .page-wrapper.bt-pagination-loading::before {
        left: var(--bt-sidebar-collapsed-w);
    }
    body.sidebar-collapsed .page-wrapper.bt-pagination-loading::after {
        left: calc(50% + (var(--bt-sidebar-collapsed-w) / 2));
    }
}
@keyframes loaderPulse {
    0% {
        opacity: 0.55;
        transform: scale(0.98);
    }
    50% {
        opacity: 1;
        transform: scale(1);
    }
    100% {
        opacity: 0.55;
        transform: scale(0.98);
    }
}
@keyframes bugBob {
    0%,
    100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-2px);
    }
}
@keyframes bugDotPulse {
    0%,
    100% {
        opacity: 0.2;
        transform: scale(0.75);
    }
    50% {
        opacity: 0.95;
        transform: scale(1);
    }
}
@keyframes bugScan {
    0% {
        top: -30%;
    }
    100% {
        top: 120%;
    }
}
.flash-info {
    background: var(--bt-info-bg);
    color: var(--bt-info);
    border: 1px solid rgba(0, 101, 255, 0.25);
}

/* ─── 15. Toast ──────────────────────────────────────────────────────────── */
#toast-stack {
    position: fixed;
    top: 5.25rem;
    bottom: auto;
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    z-index: 9999;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    pointer-events: none;
}
.app-flash-toast-stack {
    position:fixed;
    top:5.25rem;
    bottom:auto;
    left:50%;
    right:auto;
    transform:translateX(-50%);
    z-index:10050;
    display:flex;
    flex-direction:column;
    gap:.65rem;
    width:min(440px,calc(100vw - 2rem));
    pointer-events:none;
}
.app-toast {
    pointer-events: all;
    position:relative;
    overflow:hidden;
    background:var(--bt-primary);
    border:0;
    border-radius:1.25rem;
    box-shadow:0 22px 55px rgba(15,35,60,.16),0 5px 16px rgba(15,35,60,.06);
    padding:.78rem .8rem;
    display:grid;
    grid-template-columns:1.65rem minmax(0,1fr) 2rem;
    align-items:center;
    gap:.75rem;
    width:min(420px,calc(100vw - 2rem));
    font-size: 0.875rem;
    color:#fff;
    transform-origin:50% 0;
    backdrop-filter:blur(20px) saturate(1.15);
    animation:toastBubbleIn .48s cubic-bezier(.16,1,.3,1) both;
}
.app-toast::before{content:"";position:absolute;right:-2.5rem;top:-3rem;width:8rem;height:8rem;border-radius:50%;background:#fff;opacity:.06;filter:blur(5px);pointer-events:none}
.app-toast::after{content:none}
.app-toast-icon{position:relative;display:grid;place-items:center;width:1.65rem;height:2rem;border:0;border-radius:0;background:transparent;color:#fff;font-size:1.05rem;font-weight:900;box-shadow:none}
.app-toast-copy{position:relative;min-width:0;padding:.05rem 0}
.app-toast strong {
    display: block;
    margin-bottom:.16rem;
    font-size:.86rem;
    font-weight:820;
    line-height:1.25;
    letter-spacing:-.01em;
}
.app-toast-copy>span{display:block;color:rgba(255,255,255,.78);font-size:.75rem;line-height:1.38;overflow-wrap:anywhere}
.app-toast-close{position:relative;display:grid;place-items:center;width:2rem;height:2rem;padding:0;border:0;border-radius:50%;background:transparent;color:rgba(255,255,255,.72);font-size:.68rem;transition:background .16s ease,color .16s ease,transform .16s ease}
.app-toast-close:hover{background:rgba(255,255,255,.12);color:#fff;transform:rotate(8deg)}
.app-toast-errors{margin:.3rem 0 0;padding-left:1rem;color:rgba(255,255,255,.78);font-size:.74rem;line-height:1.4}
.app-toast.toast-success{--toast-color:var(--bt-success)}
.app-toast.toast-error{--toast-color:var(--bt-danger)}
.app-toast.toast-warning{--toast-color:var(--bt-warning)}
.app-toast.toast-info{--toast-color:var(--bt-info,var(--bt-primary))}
.app-toast.is-leaving{animation:toastBubbleOut .3s cubic-bezier(.4,0,1,1) forwards}
@keyframes toastBubbleIn {
    0%{transform:translateY(-16px) scale(.72);opacity:0;filter:blur(5px)}
    62%{transform:translateY(2px) scale(1.035);opacity:1;filter:blur(0)}
    82%{transform:translateY(-1px) scale(.988)}
    100%{transform:none;opacity:1;filter:blur(0)}
}
@keyframes toastBubbleOut{
    0%{transform:none;opacity:1;filter:blur(0)}
    100%{transform:translateY(-10px) scale(.76);opacity:0;filter:blur(4px)}
}
@media (prefers-reduced-motion:reduce){.app-toast,.app-toast.is-leaving{animation-duration:.01ms!important}}

/* ─── 16. Modal ──────────────────────────────────────────────────────────── */
.modal-content {
    background: var(--bt-surface);
    border: 1px solid var(--bt-border);
    border-radius: var(--bt-r-xl);
    box-shadow: var(--bt-shadow-lg);
    color: var(--bt-ink);
}
.modal-header {
    border-bottom: 1px solid var(--bt-border-soft);
    padding: 1rem 1.25rem;
    background: var(--bt-header-gradient);
}
.modal-header.app-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* SweetAlert confirmations must remain above Bootstrap modals and mobile sheets. */
.swal2-container {
    z-index: 20000 !important;
}
.modal-title {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--bt-ink);
}
.modal-footer {
    border-top: 1px solid var(--bt-border-soft);
    padding: 0.85rem 1.25rem;
    background: var(--bt-surface-2);
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: .55rem;
}
.modal-body {
    padding: 1.25rem;
}
.btn-close {
    filter: none;
}
[data-theme="dark"] .btn-close {
    filter: invert(1) grayscale(1) brightness(2);
}
.btn-close-custom {
    background: none;
    border: none;
    color: var(--bt-ink-muted);
    cursor: pointer;
    padding: 0.3rem;
    border-radius: var(--bt-r-sm);
    font-size: 0.95rem;
    transition: all var(--bt-t);
    line-height: 1;
}
.btn-close-custom:hover {
    background: var(--bt-surface-3);
    color: var(--bt-ink);
}

/* Quick create */
.qc-btn {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    padding: 0.85rem 1rem;
    border-radius: var(--bt-r-lg);
    border: 1.5px solid var(--bt-border);
    background: var(--bt-surface);
    color: var(--bt-ink);
    font-size: 0.875rem;
    text-decoration: none;
    transition: all var(--bt-t);
}
.qc-btn:hover {
    border-color: var(--bt-primary);
    box-shadow: var(--bt-shadow-sm);
    color: var(--bt-ink);
    background: var(--bt-primary-light);
}
.qc-btn small {
    display: block;
    font-size: 0.75rem;
    color: var(--bt-ink-muted);
    margin-top: 0.1rem;
}
.qc-btn-primary {
    background: var(--bt-primary-light);
    border-color: var(--bt-primary);
}
.qc-icon {
    font-size: 1.25rem;
    color: var(--bt-primary);
    flex-shrink: 0;
}

/* ─── 17. Avatars ────────────────────────────────────────────────────────── */
.avatar-xs,
.avatar-sm,
.avatar-md,
.avatar-lg {
    border-radius: 50%;
    background: linear-gradient(135deg, var(--bt-primary) 0%, #168b83 100%);
    color: #fff;
    display: inline-grid;
    place-items: center;
    font-weight: 700;
    flex-shrink: 0;
    text-transform: uppercase;
}
.avatar-xs {
    width: 1.6rem;
    height: 1.6rem;
    font-size: 0.6rem;
}
.avatar-sm {
    width: 2rem;
    height: 2rem;
    font-size: 0.68rem;
}
.avatar-md {
    width: 2.75rem;
    height: 2.75rem;
    font-size: 0.9rem;
}
.avatar-lg {
    width: 4.5rem;
    height: 4.5rem;
    font-size: 1.4rem;
}
.avatar-img {
    border-radius: 50%;
    object-fit: cover;
}
.unassigned {
    background: var(--bt-surface-3) !important;
    color: var(--bt-ink-subtle) !important;
}

/* ─── 18. Badges & Pills ─────────────────────────────────────────────────── */
.code-badge {
    font-size: 0.72rem;
    font-weight: 700;
    font-family: "Courier New", monospace;
    padding: 0.18rem 0.55rem;
    border-radius: var(--bt-r-sm);
    background: var(--bt-primary-light);
    color: var(--bt-primary);
    border: 1px solid var(--bt-primary-border);
    white-space: nowrap;
}
.code-badge:hover {
    background: var(--bt-primary);
    color: #fff;
}
.status-badge,
.status-chip {
    --status-color: var(--bt-ink-muted);
    --status-bg: var(--bt-surface-3);
    --status-border: var(--bt-border);
    display: inline-flex;
    align-items: center;
    gap: 0.32rem;
    font-size: 0.74rem;
    font-weight: 700;
    line-height: 1;
    padding: 0.28rem 0.62rem;
    border-radius: 999px;
    background: var(--status-bg);
    color: var(--status-color);
    border: 1px solid var(--status-border);
    white-space: nowrap;
}
.status-badge .status-dot,
.status-chip .status-dot {
    background: var(--status-color);
}
.status-dot {
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    display: inline-block;
    flex-shrink: 0;
}
.priority-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.73rem;
    font-weight: 700;
    padding: 0.18rem 0.5rem;
    border-radius: var(--bt-r-sm);
    background: var(--bt-surface-3);
    white-space: nowrap;
}
.type-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.73rem;
    font-weight: 600;
    white-space: nowrap;
}
.overdue-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--bt-danger);
    background: var(--bt-danger-bg);
    padding: 0.15rem 0.5rem;
    border-radius: var(--bt-r-sm);
    white-space: nowrap;
}
.epic-badge {
    display: inline-flex;
    align-items: center;
    font-size: 0.72rem;
    font-weight: 700;
    padding: 0.18rem 0.55rem;
    border-radius: var(--bt-r-sm);
    white-space: nowrap;
}
.subtask-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
    font-size: 0.7rem;
    color: var(--bt-ink-muted);
    background: var(--bt-surface-3);
    padding: 0.1rem 0.4rem;
    border-radius: var(--bt-r-sm);
}
.tag {
    display: inline-flex;
    font-size: 0.72rem;
    font-weight: 600;
    padding: 0.15rem 0.5rem;
    border-radius: 999px;
    background: var(--bt-primary-light);
    color: var(--bt-primary);
}
.priority-dot-lg {
    width: 0.65rem;
    height: 0.65rem;
    border-radius: 50%;
    display: inline-block;
    flex-shrink: 0;
}

/* ─── 19. Progress ───────────────────────────────────────────────────────── */
.app-progress {
    height: 0.35rem;
    background: var(--bt-surface-3);
    border-radius: 999px;
    overflow: hidden;
}
.app-progress-bar {
    height: 100%;
    background: var(--bt-primary);
    border-radius: 999px;
    transition: width 0.4s ease;
}
.progress-bar {
    background-color: var(--bt-primary);
}
.app-progress-bar.success {
    background: var(--bt-success);
}
.app-progress-bar.warning {
    background: var(--bt-warning);
}
.app-progress-bar.danger {
    background: var(--bt-danger);
}

/* ─── 20. Kanban Board ───────────────────────────────────────────────────── */
.board-wrap {
    display: flex;
    gap: 1rem;
    overflow-x: auto;
    padding-bottom: 1.5rem;
    min-height: 72vh;
    align-items: flex-start;
}
.board-wrap::-webkit-scrollbar {
    height: 6px;
}
.board-wrap::-webkit-scrollbar-thumb {
    background: var(--bt-border);
    border-radius: 4px;
}
.board-col {
    background: var(--bt-surface-2);
    border: 1px solid var(--bt-border);
    border-radius: var(--bt-r-xl);
    min-width: 272px;
    max-width: 272px;
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
}
.board-col-header {
    padding: 0.8rem 1rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid var(--bt-border);
    position: sticky;
    top: 0;
    background: var(--bt-surface-2);
    border-radius: var(--bt-r-xl) var(--bt-r-xl) 0 0;
    z-index: 1;
}
.board-col-title {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--bt-ink);
    display: flex;
    align-items: center;
    gap: 0.45rem;
}
.board-col-count {
    background: var(--bt-surface-3);
    color: var(--bt-ink-muted);
    font-size: 0.68rem;
    font-weight: 700;
    padding: 0.1rem 0.45rem;
    border-radius: 999px;
}
.board-cards {
    padding: 0.5rem;
    flex: 1;
    min-height: 100px;
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
}
.board-col-empty {
    padding: 2rem 1rem;
    text-align: center;
    color: var(--bt-ink-subtle);
    font-size: 0.82rem;
}
.board-col-empty i {
    display: block;
    font-size: 1.5rem;
    margin-bottom: 0.5rem;
    opacity: 0.4;
}
.board-quick-add {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    padding: 0.6rem 1rem;
    font-size: 0.8rem;
    text-align: center;
    color: var(--bt-ink-muted);
    background: none;
    border: none;
    cursor: pointer;
    width: 100%;
    border-top: 1px solid var(--bt-border);
    border-radius: 0 0 var(--bt-r-xl) var(--bt-r-xl);
    transition: all var(--bt-t);
}
.board-quick-add:hover {
    background: var(--bt-primary-light);
    color: var(--bt-primary);
}

/* Ticket card on board */
.ticket-card {
    background: var(--bt-surface);
    border: 1px solid var(--bt-border);
    border-radius: var(--bt-r-md);
    padding: 0.8rem;
    cursor: grab;
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
    transition:
        box-shadow var(--bt-t),
        border-color var(--bt-t),
        transform var(--bt-t);
    user-select: none;
}
.ticket-card:hover {
    box-shadow: var(--bt-shadow-md);
    border-color: var(--bt-primary-border);
    transform: translateY(-1px);
}
.ticket-card.ui-sortable-helper {
    box-shadow: var(--bt-shadow-lg);
    transform: rotate(1.5deg) scale(1.02);
    opacity: 0.95;
    cursor: grabbing;
}
.ticket-card.ui-sortable-placeholder {
    background: var(--bt-primary-light) !important;
    border: 2px dashed var(--bt-primary) !important;
    opacity: 0.5;
    height: 80px;
    border-radius: var(--bt-r-md);
    visibility: visible !important;
    box-shadow: none !important;
}
.ticket-card-title {
    font-size: 0.86rem;
    font-weight: 500;
    color: var(--bt-ink);
    margin-bottom: 0.55rem;
    line-height: 1.45;
    display: -webkit-box;
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
    overflow-wrap: anywhere;
    word-break: break-word;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
}
.ticket-card-title:hover {
    color: var(--bt-primary);
}
.ticket-card-meta {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    flex-wrap: wrap;
    margin-bottom: 0.45rem;
    min-width: 0;
}
.ticket-card-footer {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-width: 0;
}

/* Board move overlay */
.board-move-toast {
    position: fixed;
    bottom: 2rem;
    left: 50%;
    transform: translateX(-50%);
    background: var(--bt-ink);
    color: #fff;
    padding: 0.55rem 1.25rem;
    border-radius: 999px;
    font-size: 0.85rem;
    z-index: 8000;
    box-shadow: var(--bt-shadow-lg);
}

[data-theme="dark"] .board-move-toast {
    border: 1px solid rgba(34, 211, 238, .42);
    background: linear-gradient(145deg, #0b1d31 0%, #102a43 100%);
    color: #cffafe;
    box-shadow: 0 14px 34px rgba(0, 0, 0, .5), 0 0 0 1px rgba(34, 211, 238, .08);
}
[data-theme="dark"] .board-move-toast i {
    color: #22d3ee;
}

/* ─── 21. Backlog ────────────────────────────────────────────────────────── */
.batch-bar {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.65rem 1.25rem;
    background: var(--bt-primary);
    border-radius: var(--bt-r-lg);
    color: #fff;
    margin-bottom: 1rem;
    font-size: 0.875rem;
    font-weight: 600;
}
.batch-bar .form-select-sm {
    background-color: rgba(255, 255, 255, 0.15);
    border-color: rgba(255, 255, 255, 0.3);
    color: #fff;
}
.backlog-section {
    margin-bottom: 1rem;
    border-radius: var(--bt-r-xl);
    overflow: hidden;
    border: 1px solid var(--bt-border);
}
.backlog-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.7rem 1.1rem;
    background: var(--bt-surface-2);
    cursor: pointer;
    user-select: none;
    gap: 1rem;
    transition: background var(--bt-t);
}
.backlog-section-header:hover {
    background: var(--bt-surface-3);
}
.toggle-icon {
    transition: transform 0.2s ease;
    font-size: 0.8rem;
    color: var(--bt-ink-muted);
}
.backlog-list {
    border-top: 1px solid var(--bt-border-soft);
    background: var(--bt-surface);
}
.backlog-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.55rem 1.1rem;
    border-bottom: 1px solid var(--bt-border-soft);
    background: var(--bt-surface);
    transition: background var(--bt-t);
    font-size: 0.875rem;
}
.backlog-item:last-child {
    border-bottom: none;
}
.backlog-item:hover {
    background: var(--bt-surface-2);
}
.backlog-item-left {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    flex: 1;
    min-width: 0;
}
.backlog-item-right {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-shrink: 0;
}
.backlog-title {
    font-size: 0.875rem;
    color: var(--bt-ink);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.backlog-title:hover {
    color: var(--bt-primary);
}
.drag-handle {
    color: var(--bt-ink-subtle);
    cursor: grab;
    font-size: 0.85rem;
}
.backlog-placeholder {
    height: 46px;
    background: var(--bt-primary-light) !important;
    border: 2px dashed var(--bt-primary) !important;
    margin: 0.25rem 0.5rem;
    border-radius: var(--bt-r);
}
.backlog-empty {
    padding: 1.5rem;
    text-align: center;
    color: var(--bt-ink-muted);
    font-size: 0.85rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

/* ─── 22. Comments ───────────────────────────────────────────────────────── */
.comment-list {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
}
.comment-item {
    display: flex;
    gap: 0.85rem;
    padding: 0.9rem 0;
    border-bottom: 1px solid var(--bt-border-soft);
}
.comment-item:last-child {
    border-bottom: none;
}
.comment-avatar {
    flex-shrink: 0;
}
.comment-body {
    flex: 1;
    min-width: 0;
}
.comment-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.3rem;
    flex-wrap: wrap;
}
.comment-header .fw-600 {
    font-size: 0.875rem;
}
.comment-header .muted {
    font-size: 0.78rem;
}
.comment-text {
    font-size: 0.875rem;
    color: var(--bt-ink);
    white-space: pre-wrap;
    word-break: break-word;
    line-height: 1.6;
}
.ticket-edit-comments-wrap {
    max-width: calc((100% - 1.5rem) * .6666667);
}
.ticket-edit-comments-wrap .ticket-comments-section {
    margin-top: 1.25rem;
}
.comment-edited-tag {
    font-size: .75rem;
}
.comment-edit-form textarea {
    margin-top: .35rem;
}
.comment-reactions {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem;
    margin-top: .5rem;
}
.comment-reaction-pill {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    border: 1px solid var(--border-soft, #dee2e6);
    background: var(--surface, #fff);
    border-radius: 999px;
    padding: .1rem .55rem;
    font-size: .85rem;
    line-height: 1.6;
    color: var(--ink-muted, #6c757d);
    opacity: .55;
    transition: opacity .12s ease, border-color .12s ease, background .12s ease;
}
.comment-reaction-pill:hover {
    opacity: 1;
    border-color: var(--primary, var(--bt-primary));
}
.comment-reaction-pill.has-count {
    opacity: .9;
}
.comment-reaction-pill.is-reacted {
    opacity: 1;
    border-color: var(--primary, var(--bt-primary));
    background: rgba(13, 110, 253, .08);
    color: var(--primary, var(--bt-primary));
}
.comment-reaction-count {
    font-size: .72rem;
    font-weight: 600;
}
@media (max-width: 991.98px) {
    .ticket-edit-comments-wrap {
        max-width: 100%;
    }
}

/* ─── 23. Attachments ────────────────────────────────────────────────────── */
.attachment-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 0.65rem;
}
.attachment-item {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.55rem 0.8rem;
    background: var(--bt-surface-2);
    border: 1px solid var(--bt-border);
    border-radius: var(--bt-r-md);
    font-size: 0.85rem;
    transition: all var(--bt-t);
    max-width: 264px;
}
.attachment-item:hover {
    border-color: var(--bt-primary-border);
    background: var(--bt-primary-light);
}
.attachment-thumb {
    width: 2.25rem;
    height: 2.25rem;
    border-radius: var(--bt-r-sm);
    object-fit: cover;
    border: 1px solid var(--bt-border);
}
.attachment-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: inherit;
}
.attachment-icon {
    width: 2.25rem;
    height: 2.25rem;
    border-radius: var(--bt-r-sm);
    background: var(--bt-surface-3);
    display: grid;
    place-items: center;
    font-size: 1rem;
    color: var(--bt-ink-muted);
}
.attachment-info {
    flex: 1;
    min-width: 0;
}
.attachment-name {
    font-weight: 600;
    color: var(--bt-ink);
    font-size: 0.8rem;
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.attachment-actions {
    display: flex;
    gap: 0.25rem;
    margin-left: auto;
}
.dropzone {
    border: 2px dashed var(--bt-border);
    border-radius: var(--bt-r-lg);
    padding: 2rem 1.5rem;
    text-align: center;
    color: var(--bt-ink-muted);
    cursor: pointer;
    transition: all var(--bt-t);
    font-size: 0.875rem;
}
.dropzone:hover,
.dropzone.drag-over {
    border-color: var(--bt-primary);
    background: var(--bt-primary-light);
    color: var(--bt-primary);
}
.dropzone-icon {
    font-size: 2rem;
    display: block;
    margin-bottom: 0.65rem;
    opacity: 0.5;
}
.attach-chip {
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.65rem;
    background: var(--bt-primary-light);
    color: var(--bt-primary);
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 600;
}

/* ─── 24. Subtasks ───────────────────────────────────────────────────────── */
.subtask-list {
    border-radius: 0 0 var(--bt-r-xl) var(--bt-r-xl);
}
.subtask-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.65rem 1.25rem;
    border-bottom: 1px solid var(--bt-border-soft);
    font-size: 0.875rem;
    transition: background var(--bt-t);
}
.subtask-item:last-child {
    border-bottom: none;
}
.subtask-item:hover {
    background: var(--bt-surface-2);
}
.subtask-title {
    font-weight: 500;
    color: var(--bt-ink);
}
.subtask-title:hover {
    color: var(--bt-primary);
}

/* ─── 25. Audit Timeline ─────────────────────────────────────────────────── */
.audit-timeline {
    display: flex;
    flex-direction: column;
}
.audit-item {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.75rem 1.25rem;
    border-bottom: 1px solid var(--bt-border-soft);
    font-size: 0.83rem;
}
.audit-item:last-child {
    border-bottom: none;
}
.audit-dot {
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    background: var(--bt-primary);
    margin-top: 0.35rem;
    flex-shrink: 0;
}
.audit-content {
    flex: 1;
}
.audit-changes {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
}
.audit-change-pill {
    font-size: 0.72rem;
    padding: 0.12rem 0.45rem;
    border-radius: var(--bt-r-sm);
    background: var(--bt-surface-3);
    color: var(--bt-ink-muted);
}

/* ─── 26. Notifications ──────────────────────────────────────────────────── */
.notif-list {
    display: flex;
    flex-direction: column;
}
.notif-item {
    display: flex;
    gap: 0.85rem;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--bt-border-soft);
    border-left: 2px solid transparent;
    transition: background var(--bt-t), border-color var(--bt-t);
    text-decoration: none;
    color: var(--bt-ink);
    position: relative;
}
.notif-item:hover {
    background: var(--bt-surface-2);
}
.notif-unread {
    background: var(--bt-primary-light);
    border-left-color: var(--bt-primary);
}
.notif-unread:hover {
    background: #d6e8ff;
}
.notif-icon {
    width: 2.35rem;
    height: 2.35rem;
    border-radius: 50%;
    background: var(--bt-surface-3);
    color: var(--bt-primary);
    display: grid;
    place-items: center;
    font-size: 0.95rem;
    flex-shrink: 0;
}
.notif-icon-primary { background: var(--bt-primary-light); color: var(--bt-primary); }
.notif-icon-success { background: rgba(25, 135, 84, 0.12); color: #198754; }
.notif-icon-info { background: rgba(13, 202, 240, 0.14); color: #0aa2c0; }
.notif-icon-warning { background: rgba(255, 193, 7, 0.16); color: #b8860b; }
.notif-icon-danger { background: rgba(220, 53, 69, 0.12); color: var(--bt-danger); }
.notif-body {
    flex: 1;
    min-width: 0;
}
.notif-title {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--bt-ink);
    margin-bottom: 0.2rem;
}
.notif-message {
    font-size: 0.83rem;
    color: var(--bt-ink-muted);
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
.notif-time {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.72rem;
    color: var(--bt-ink-subtle);
    margin-top: 0.35rem;
}
.notif-dot {
    width: 0.5rem;
    height: 0.5rem;
    background: var(--bt-primary);
    border-radius: 50%;
    margin-top: 0.45rem;
    flex-shrink: 0;
    box-shadow: 0 0 0 3px var(--bt-primary-light);
}

/* ─── 27. Charts ─────────────────────────────────────────────────────────── */
.chart-card {
    background: var(--bt-surface);
    border: 1px solid var(--bt-border);
    border-radius: var(--bt-r-xl);
    padding: 1.5rem;
    box-shadow: var(--bt-shadow-card);
}
.chart-card-title {
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--bt-ink);
    margin-bottom: 1.25rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* ─── 28. Admin Banner ───────────────────────────────────────────────────── */
.admin-banner {
    background: linear-gradient(90deg, #1b2f4e 0%, #0f2444 100%);
    color: #fff;
    padding: 0.7rem 2.25rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 0.85rem;
    margin: -2rem -2.25rem 1.75rem;
}
.admin-badge {
    background: #dc2626;
    color: #fff;
    font-size: 0.65rem;
    font-weight: 800;
    padding: 0.15rem 0.55rem;
    border-radius: 999px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

/* ─── 29. Profile ────────────────────────────────────────────────────────── */
.profile-avatar-zone {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.85rem;
    padding: 2rem 1.5rem;
    background: var(--bt-surface-2);
    border-radius: var(--bt-r-xl);
    text-align: center;
}
.profile-stat {
    text-align: center;
    padding: 1.1rem;
    background: var(--bt-surface);
    border: 1px solid var(--bt-border);
    border-radius: var(--bt-r-md);
    box-shadow: var(--bt-shadow-card);
}
.profile-stat-value {
    font-size: 1.75rem;
    font-weight: 800;
    color: var(--bt-ink);
    line-height: 1;
}
.profile-stat-label {
    font-size: 0.72rem;
    color: var(--bt-ink-muted);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-top: 0.35rem;
}

/* ─── 30. Ticket Sidebar (show view) ─────────────────────────────────────── */
.sidebar-field {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.6rem 0;
    border-bottom: 1px solid var(--bt-border-soft);
}
.sidebar-field:last-child {
    border-bottom: none;
}
.sidebar-label {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--bt-ink-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    min-width: 90px;
    flex-shrink: 0;
    padding-top: 0.1rem;
}
.sidebar-value {
    font-size: 0.875rem;
    color: var(--bt-ink);
    text-align: right;
}

/* Worklog */
.worklog-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.worklog-item {
    padding: 0.65rem 0.75rem;
    background: var(--bt-surface-2);
    border: 1px solid var(--bt-border-soft);
    border-radius: var(--bt-r-md);
    font-size: 0.83rem;
}

/* Ticket description */
.ticket-description {
    font-size: 0.9rem;
    color: var(--bt-ink);
    white-space: pre-wrap;
    word-break: break-word;
    line-height: 1.7;
}

/* ─── 31. Misc Components ────────────────────────────────────────────────── */
/* Mention dropdown */
.mention-dropdown {
    position: fixed;
    background: var(--bt-surface);
    border: 1px solid var(--bt-border);
    border-radius: var(--bt-r-lg);
    box-shadow: var(--bt-shadow-lg);
    z-index: 3000;
    min-width: 200px;
    overflow-x: hidden;
    overflow-y: auto;
}
.mention-item {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.55rem 0.9rem;
    cursor: pointer;
    font-size: 0.875rem;
    transition: background var(--bt-t);
}
.mention-item:hover,
.mention-item.focused {
    background: var(--bt-surface-2);
}
.mention-item-name {
    font-weight: 600;
    color: var(--bt-ink);
}
.mention-item-role {
    font-size: 0.75rem;
    color: var(--bt-ink-muted);
}

/* Filter bar */
.filter-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    background: var(--bt-surface);
    border: 1px solid var(--bt-border);
    border-radius: var(--bt-r-xl);
    margin-bottom: 1.25rem;
    box-shadow: var(--bt-shadow-card);
}

.bt-filter-form:not(.bt-export-form) {
    position: relative;
    z-index: 50;
    overflow: visible;
}

.bt-filter-form:not(.bt-export-form) .bootstrap-select.show,
.bt-filter-form:not(.bt-export-form) .select2-container--open {
    position: relative;
    z-index: 1090;
}

.bt-filter-form:not(.bt-export-form) .form-control,
.bt-filter-form:not(.bt-export-form) .form-select,
.bt-filter-form:not(.bt-export-form) .btn {
    border-radius: var(--bt-r-md);
}

/* Consistent filter control sizing across modules */
.bt-filter-form {
    --bt-filter-control-height: 2.65rem;
}
.bt-filter-form .form-control,
.bt-filter-form .form-select,
.bt-filter-form .js-daterange-filter,
.bt-filter-form .select2-container .select2-selection--single {
    height: var(--bt-filter-control-height) !important;
    min-height: var(--bt-filter-control-height) !important;
}
.bt-filter-form .select2-container {
    width: 100% !important;
}
.bt-filter-form .select2-container .select2-selection--single .select2-selection__rendered {
    height: calc(var(--bt-filter-control-height) - 2px) !important;
    line-height: calc(var(--bt-filter-control-height) - 2px) !important;
}
.bt-filter-form .select2-container .select2-selection--multiple {
    height: var(--bt-filter-control-height) !important;
    min-height: var(--bt-filter-control-height) !important;
    max-height: var(--bt-filter-control-height) !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    flex-wrap: nowrap !important;
}
.bt-filter-form .select2-container .select2-selection--multiple .select2-selection__rendered {
    min-height: calc(var(--bt-filter-control-height) - 0.45rem) !important;
    max-height: calc(var(--bt-filter-control-height) - 0.45rem) !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    white-space: nowrap !important;
}
.bt-filter-form .btn {
    min-height: var(--bt-filter-control-height);
}
.bt-filter-form .bt-free-search-wrap {
    flex: 1 1 220px;
    min-width: 220px;
}
.bt-filter-form .bt-free-search-wrap .form-control {
    width: 100%;
}
.bt-filter-form .bootstrap-select {
    width: 100% !important;
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
    padding: 0 !important;
}
.bt-filter-form select.selectpicker {
    display: none !important;
}
.bt-filter-form .bootstrap-select.form-select {
    border: none !important;
    box-shadow: none !important;
    background: transparent !important;
    padding: 0 !important;
    height: auto !important;
}
.bt-filter-form .bootstrap-select > .dropdown-toggle.bt-selectpicker-toggle {
    height: var(--bt-filter-control-height) !important;
    min-height: var(--bt-filter-control-height) !important;
    border: 1.5px solid var(--bt-border) !important;
    border-radius: var(--bt-r) !important;
    background-color: var(--bt-surface) !important;
    color: var(--bt-ink) !important;
    padding: 0.45rem 2.2rem 0.45rem 0.8rem !important;
    box-shadow: var(--bt-shadow-xs) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
}
.bt-filter-form .bootstrap-select > .dropdown-toggle.bt-selectpicker-toggle .filter-option {
    display: flex !important;
    align-items: center !important;
    height: 100% !important;
    min-width: 0 !important;
    flex: 1 1 auto !important;
}
.bt-filter-form .bootstrap-select > .dropdown-toggle.bt-selectpicker-toggle .filter-option-inner-inner {
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}
.bt-filter-form .bootstrap-select > .dropdown-toggle.bt-selectpicker-toggle::after {
    display: none !important;
}
.bt-filter-form .bootstrap-select > .dropdown-toggle::after {
    display: none !important;
}
.bt-filter-form .bootstrap-select > .dropdown-toggle.bt-selectpicker-toggle .bs-caret {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 1rem !important;
    margin-left: 0.45rem !important;
    flex-shrink: 0 !important;
}
.bt-filter-form .bootstrap-select > .dropdown-toggle.bt-selectpicker-toggle .bs-caret .caret {
    border-top-color: var(--bt-ink-muted) !important;
    border-top-width: 0.34rem !important;
    border-right-width: 0.28rem !important;
    border-left-width: 0.28rem !important;
}
.bt-filter-form .bootstrap-select > .dropdown-toggle.bt-selectpicker-toggle:focus,
.bt-filter-form .bootstrap-select.show > .dropdown-toggle.bt-selectpicker-toggle {
    border-color: var(--bt-primary) !important;
    box-shadow: 0 0 0 3px rgba(4, 36, 61, 0.15) !important;
}
.app-card.bt-filter-card {
    overflow: visible !important;
    position: relative;
    z-index: 50;
}
.app-card.bt-filter-card .app-card-body,
.app-card.bt-filter-card form {
    overflow: visible !important;
}
.app-card.bt-filter-card .bootstrap-select.show,
.app-card.bt-filter-card .select2-container--open {
    position: relative;
    z-index: 1090;
}
.bootstrap-select .dropdown-menu {
    border-radius: var(--bt-r-lg) !important;
    border: 1px solid var(--bt-border) !important;
    background: var(--bt-surface) !important;
    color: var(--bt-ink) !important;
    box-shadow: var(--bt-shadow-lg) !important;
    z-index: 1085 !important;
    min-width: max(100%, 16rem) !important;
    max-width: min(92vw, 28rem) !important;
    width: auto !important;
    padding: .35rem !important;
}
body > .bs-container {
    width: auto !important;
    min-width: 16rem !important;
    max-width: min(100vw - 1rem, 42rem) !important;
}
body > .bs-container .dropdown-menu {
    min-width: 100% !important;
    max-width: 100% !important;
    width: 100% !important;
    padding: .35rem !important;
}
.bootstrap-select {
    width: 100% !important;
}
.bootstrap-select > .dropdown-toggle {
    min-height: 2.65rem !important;
    border-radius: var(--bt-r) !important;
}
.bootstrap-select > .dropdown-toggle.bt-selectpicker-toggle {
    border: 1.5px solid var(--bt-border) !important;
    background: var(--bt-surface) !important;
    color: var(--bt-ink) !important;
    box-shadow: var(--bt-shadow-xs) !important;
    padding: 0.55rem 2.2rem 0.55rem 0.8rem !important;
    transition:
        border-color var(--bt-t),
        background var(--bt-t),
        box-shadow var(--bt-t);
}
.bootstrap-select > .dropdown-toggle.bt-selectpicker-toggle:hover {
    border-color: var(--bt-primary-border) !important;
    background: var(--bt-surface-2) !important;
    color: var(--bt-ink) !important;
}
.bootstrap-select > .dropdown-toggle.bt-selectpicker-toggle:focus,
.bootstrap-select.show > .dropdown-toggle.bt-selectpicker-toggle {
    border-color: var(--bt-primary) !important;
    background: var(--bt-surface) !important;
    color: var(--bt-ink) !important;
    box-shadow:
        0 0 0 3px rgba(4, 36, 61, 0.15),
        var(--bt-shadow-xs) !important;
}
.bootstrap-select > .dropdown-toggle.bt-selectpicker-toggle::after {
    display: none !important;
}
.bootstrap-select > .dropdown-toggle.bt-selectpicker-toggle .filter-option {
    display: flex !important;
    align-items: center !important;
    height: 100% !important;
    min-width: 0 !important;
}
.bootstrap-select > .dropdown-toggle.bt-selectpicker-toggle .filter-option-inner-inner {
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    color: var(--bt-ink) !important;
}
.bootstrap-select > .dropdown-toggle.bt-selectpicker-toggle .bs-caret {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 1rem !important;
}
.bootstrap-select > .dropdown-toggle.bt-selectpicker-toggle .bs-caret .caret {
    border-top-color: var(--bt-ink-muted) !important;
    border-top-width: 0.34rem !important;
    border-right-width: 0.28rem !important;
    border-left-width: 0.28rem !important;
}
.bootstrap-select > .dropdown-toggle .filter-option-inner-inner {
    font-size: 0.9rem !important;
}
.bootstrap-select .dropdown-menu .inner {
    max-height: 280px !important;
    overflow-x: hidden !important;
}
.bootstrap-select .dropdown-menu .dropdown-item {
    border-radius: .45rem !important;
    padding: 0.55rem 0.7rem !important;
    font-size: 0.88rem !important;
    color: var(--bt-ink) !important;
    white-space: normal !important;
}
.bootstrap-select .dropdown-menu .dropdown-item.active,
.bootstrap-select .dropdown-menu .dropdown-item.selected,
.bootstrap-select .dropdown-menu .dropdown-item:active {
    background: var(--bt-primary-light) !important;
    color: var(--bt-primary) !important;
}
.bootstrap-select .dropdown-menu .dropdown-item:hover {
    background: var(--bt-surface-3) !important;
}
.bootstrap-select .dropdown-menu .dropdown-item.active:hover,
.bootstrap-select .dropdown-menu .dropdown-item.selected:hover {
    background: var(--bt-primary-light) !important;
    color: var(--bt-primary) !important;
}
.bootstrap-select.show-tick .dropdown-menu li a span.check-mark {
    color: var(--bt-primary) !important;
    right: 0.9rem !important;
}
.bootstrap-select .bs-searchbox {
    padding: 0.55rem 0.65rem !important;
}
.bootstrap-select .bs-searchbox .form-control {
    border-radius: var(--bt-r) !important;
    border: 1px solid var(--bt-border) !important;
    background: var(--bt-surface-2) !important;
    color: var(--bt-ink) !important;
    min-height: 2.25rem !important;
}
.bootstrap-select .bs-actionsbox {
    padding: 0.45rem 0.65rem !important;
    border-bottom: 1px solid var(--bt-border-soft) !important;
}
.bootstrap-select .bs-actionsbox .btn {
    border-radius: var(--bt-r) !important;
    font-size: 0.78rem !important;
    min-height: 2rem !important;
}
.bootstrap-select .bs-actionsbox .btn.btn-light {
    border-color: var(--bt-border) !important;
    background: var(--bt-surface-2) !important;
    color: var(--bt-ink-2) !important;
}
.bootstrap-select .bs-actionsbox .btn.btn-light:hover {
    border-color: var(--bt-primary-border) !important;
    background: var(--bt-primary-light) !important;
    color: var(--bt-primary) !important;
}

/* Bootstrap-select popup: one outer border, with comfortable internal spacing. */
.bootstrap-select .dropdown-menu.inner,
.bs-container .dropdown-menu.inner {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    margin: 0 !important;
    padding: .2rem !important;
    border: 0 !important;
    border-radius: calc(var(--bt-r-lg) - .2rem) !important;
    background: transparent !important;
    box-shadow: none !important;
}
.bootstrap-select .bs-searchbox,
.bs-container .bs-searchbox {
    padding: .55rem .55rem .4rem !important;
}
.bootstrap-select .bs-actionsbox,
.bs-container .bs-actionsbox {
    box-sizing: border-box !important;
    width: calc(100% - .7rem) !important;
    height: auto !important;
    min-height: 0 !important;
    margin: .15rem auto .35rem !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
}
.bootstrap-select .bs-actionsbox .btn-group,
.bs-container .bs-actionsbox .btn-group {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: .5rem !important;
    width: 100% !important;
    max-width: 15rem !important;
    margin-inline: auto !important;
    height: auto !important;
}
.bootstrap-select .bs-actionsbox .btn,
.bs-container .bs-actionsbox .btn {
    flex: 1 1 0 !important;
    width: auto !important;
    min-width: 0 !important;
    min-height: 1.8rem !important;
    height: 1.8rem !important;
    padding: .25rem .55rem !important;
    border: 1px solid var(--bt-border) !important;
    border-radius: .5rem !important;
    font-size: .72rem !important;
    line-height: 1.15 !important;
    color: var(--bt-ink-2) !important;
    background: var(--bt-surface-2) !important;
    box-shadow: var(--bt-shadow-xs) !important;
}
.bootstrap-select .dropdown-menu.inner > li + li,
.bs-container .dropdown-menu.inner > li + li {
    margin-top: .1rem !important;
}

/* Timesheet export modal polish */
#timesheetExportModal .modal-dialog {
    max-width: 980px;
}
#timesheetExportModal .modal-content {
    overflow: visible;
}
#timesheetExportModal .modal-body {
    overflow: visible;
}
#timesheetExportModal .export-modal-intro {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.86rem;
    color: var(--bt-ink-muted);
    background: var(--bt-surface-2);
    border: 1px solid var(--bt-border-soft);
    border-radius: var(--bt-r-md);
    padding: 0.65rem 0.75rem;
    margin-bottom: 0.8rem;
}
#timesheetExportModal .export-modal-intro i {
    color: var(--bt-primary);
}
#timesheetExportModal .bt-export-form .form-label {
    margin-bottom: 0.45rem;
    font-size: 0.76rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--bt-ink-muted);
    font-weight: 700;
}
#timesheetExportModal .bt-export-form .bootstrap-select .dropdown-toggle,
#timesheetExportModal .bt-export-form .form-control {
    height: 2.65rem !important;
    min-height: 2.65rem !important;
}
#timesheetExportModal .bt-export-form .bootstrap-select .dropdown-menu {
    max-height: 280px !important;
}
#timesheetExportModal .export-help-text {
    display: inline-block;
    margin-top: 0.45rem;
}
.filter-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.78rem;
    font-weight: 600;
    padding: 0.25rem 0.65rem;
    border-radius: 999px;
    background: var(--bt-surface-3);
    color: var(--bt-ink-muted);
    border: 1px solid var(--bt-border);
    cursor: pointer;
    transition: all var(--bt-t);
    text-decoration: none;
}
.filter-chip:hover,
.filter-chip.active {
    background: var(--bt-primary-light);
    border-color: var(--bt-primary);
    color: var(--bt-primary);
}

/* Empty state */
.empty-state {
    text-align: center;
    padding: 3rem 1.5rem;
    color: var(--bt-ink-muted);
}
.empty-state-icon {
    font-size: 3rem;
    color: var(--bt-border);
    margin-bottom: 1rem;
    display: block;
    opacity: 0.7;
}
.empty-state h3 {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--bt-ink);
    margin-bottom: 0.5rem;
}
.empty-state p {
    font-size: 0.875rem;
    max-width: 360px;
    margin: 0 auto 1.25rem;
}

/* Project card */
.project-card {
    display: flex;
    flex-direction: column;
    transition:
        box-shadow var(--bt-t),
        transform var(--bt-t);
}
.project-card > .app-card-body {
    flex: 1 1 auto;
    min-height: 0;
}
.project-card > .app-card-footer {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin-top: auto;
}
.project-card > .app-card-footer .btn {
    min-width: 0;
    justify-content: center;
    text-align: center;
}
.project-card > .app-card-footer .btn.flex-1 {
    flex: 1 1 0;
}
.project-card:hover {
    box-shadow: var(--bt-shadow-md) !important;
    transform: translateY(-2px);
}
.project-dot {
    width: 0.65rem;
    height: 0.65rem;
    border-radius: 50%;
    display: inline-block;
    flex-shrink: 0;
}
.epic-dot {
    width: 0.7rem;
    height: 0.7rem;
    border-radius: 50%;
    display: inline-block;
    flex-shrink: 0;
}

/* Utilities */
.muted {
    color: var(--bt-ink-muted) !important;
}
.text-ink {
    color: var(--bt-ink) !important;
}
.fw-600 {
    font-weight: 600 !important;
}
.fw-700 {
    font-weight: 700 !important;
}
.fw-800 {
    font-weight: 800 !important;
}
.fs-sm {
    font-size: 0.82rem !important;
}
.fs-xs {
    font-size: 0.72rem !important;
}
.flex-1 {
    flex: 1 !important;
}
.truncate {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.font-mono {
    font-family: "Courier New", monospace;
}

/* Select2 integration */
.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple {
    background-color: var(--bt-surface) !important;
    border: 1.5px solid var(--bt-border) !important;
    border-radius: var(--bt-r) !important;
    min-height: 2.45rem !important;
}
.select2-container--default .select2-selection--single:focus,
.select2-container--default .select2-selection--multiple:focus {
    outline: none;
}
.select2-container--default.select2-container--open .select2-selection--single,
.select2-container--default.select2-container--open
    .select2-selection--multiple {
    border-color: var(--bt-primary) !important;
    box-shadow: 0 0 0 3px rgba(4, 36, 61, 0.15) !important;
}
.select2-container--default
    .select2-selection--single
    .select2-selection__rendered {
    color: var(--bt-ink) !important;
    display: flex !important;
    align-items: center !important;
    height: calc(2.45rem - 2px) !important;
    padding-top: 0 !important;
    line-height: 1.2 !important;
}
.select2-container--default .select2-selection__placeholder {
    color: var(--bt-ink-subtle) !important;
}
.select2-container--default .select2-selection--single .select2-selection__arrow {
    top: 50% !important;
    height: auto !important;
    transform: translateY(-50%);
}
.select2-container--default .select2-selection--single {
    position: relative !important;
}
.select2-container--default .select2-selection--single .select2-selection__rendered {
    padding-right: 3.75rem !important;
}
.select2-container--default .select2-selection--single .select2-selection__clear {
    position: absolute !important;
    top: 50% !important;
    right: 2rem !important;
    transform: translateY(-50%) !important;
    float: none !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 1.35rem !important;
    height: 1.35rem !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1 !important;
}
.select2-dropdown {
    background: var(--bt-surface) !important;
    border: 1px solid var(--bt-border) !important;
    border-radius: var(--bt-r-lg) !important;
    box-shadow: var(--bt-shadow-lg) !important;
}
.select2-results__option {
    font-size: 0.875rem !important;
    color: var(--bt-ink) !important;
    padding: 0.5rem 0.85rem !important;
}
.select2-container--default .select2-results__option--highlighted {
    background: var(--bt-primary-light) !important;
    color: var(--bt-primary) !important;
}
.select2-container--default .select2-results__option--selected {
    background: var(--bt-primary) !important;
    color: #fff !important;
}
.select2-search--dropdown .select2-search__field {
    border: 1px solid var(--bt-border) !important;
    border-radius: var(--bt-r) !important;
    padding: 0.4rem 0.7rem !important;
    color: var(--bt-ink) !important;
    background: var(--bt-surface-2) !important;
}
/* validation error border on Select2 */
select.is-invalid + .select2-container .select2-selection {
    border-color: #dc3545 !important;
    box-shadow: 0 0 0 0.25rem rgba(220, 53, 69, 0.25) !important;
}
/* compact size for form-select-sm */
.form-select-sm + .select2-container .select2-selection--single {
    min-height: 2rem !important;
}
.form-select-sm
    + .select2-container
    .select2-selection--single
    .select2-selection__rendered {
    font-size: 0.875rem !important;
    padding-top: 0.15rem !important;
}
/* ── Tick-style multi-select (filter panels) ─────────────────────────────── */
/* Hide chips, show single-line summary instead */
.sel2-tick-multi .select2-selection__choice { display: none !important; }
.sel2-tick-multi .select2-selection--multiple {
    padding: 0 0.75rem 0 0.75rem !important;
    height: var(--bt-filter-control-height, 2.45rem) !important;
    min-height: var(--bt-filter-control-height, 2.45rem) !important;
    max-height: var(--bt-filter-control-height, 2.45rem) !important;
    overflow: hidden !important;
    display: flex !important;
    align-items: center !important;
}
.sel2-tick-multi .select2-selection--multiple .select2-selection__rendered {
    display: flex !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
    overflow: hidden !important;
    white-space: nowrap !important;
    padding: 0 !important;
    width: 100% !important;
    min-height: unset !important;
    max-height: unset !important;
}
.sel2-tick-multi .select2-selection--multiple .select2-selection__search {
    width: 0 !important;
    min-width: 0 !important;
    margin: 0 !important;
}
/* Summary item shown instead of chips */
.sel2-summary-item {
    list-style: none !important;
    display: inline-flex !important;
    align-items: center !important;
    overflow: hidden !important;
    white-space: nowrap !important;
    text-overflow: ellipsis !important;
    max-width: 100% !important;
    font-size: 0.875rem !important;
    color: var(--bt-ink) !important;
    padding: 0 !important;
    margin: 0 !important;
    line-height: 1 !important;
}
.sel2-summary-text {
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}
.sel2-summary-more {
    flex-shrink: 0 !important;
    color: var(--bt-ink-subtle) !important;
    font-size: 0.8rem !important;
    white-space: nowrap !important;
    margin-left: 0.15rem !important;
    font-weight: 600 !important;
}
/* Dropdown tick options */
.sel2-tick-dropdown .select2-results__option { padding: 0.45rem 0.85rem !important; }
.sel2-tick-opt {
    display: flex !important;
    align-items: center !important;
    gap: 0.6rem !important;
}
.sel2-tick-box {
    flex-shrink: 0 !important;
    width: 1rem !important;
    height: 1rem !important;
    border-radius: 3px !important;
    border: 1.5px solid var(--bt-border) !important;
    background: var(--bt-surface) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: background 0.1s, border-color 0.1s !important;
}
.sel2-tick-box.sel2-checked {
    background: var(--bt-primary) !important;
    border-color: var(--bt-primary) !important;
}
.sel2-tick-box.sel2-checked::after {
    content: '' !important;
    width: 0.3rem !important;
    height: 0.55rem !important;
    border: 2px solid #fff !important;
    border-top: none !important;
    border-left: none !important;
    transform: rotate(45deg) translateY(-1px) !important;
    display: block !important;
}
.sel2-tick-label { flex: 1 !important; min-width: 0 !important; }
/* Keep option row unobtrusive when selected (tick handles the visual) */
.sel2-tick-dropdown .select2-results__option--selected {
    background: var(--bt-primary-light, #e8eef3) !important;
    color: var(--bt-ink) !important;
}
.sel2-tick-dropdown .select2-results__option--highlighted.select2-results__option--selected {
    background: var(--bt-primary-light) !important;
    color: var(--bt-primary) !important;
}
/* Adjust tick box colours when row is highlighted */
.sel2-tick-dropdown .select2-results__option--highlighted .sel2-tick-box {
    border-color: var(--bt-primary) !important;
}
.sel2-tick-dropdown .select2-results__option--highlighted .sel2-tick-box.sel2-checked {
    background: var(--bt-primary) !important;
    border-color: var(--bt-primary) !important;
}

/* multi-select tag chips */
.select2-container--default .select2-selection--multiple {
    padding: 0.2rem 0.4rem !important;
    min-height: 2.45rem !important;
    display: flex !important;
    align-items: center !important;
    flex-wrap: wrap !important;
}
.select2-container--default
    .select2-selection--multiple
    .select2-selection__rendered {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 0.25rem !important;
    padding: 0 !important;
    align-items: center !important;
    min-height: calc(2.45rem - 0.45rem) !important;
}
.select2-container--default .select2-selection--multiple .select2-selection__choice {
    background: var(--bt-primary-light, #e8eef3) !important;
    border: 1px solid var(--bt-primary, #04243d) !important;
    border-radius: 1rem !important;
    color: var(--bt-primary, #04243d) !important;
    font-size: 0.78rem !important;
    font-weight: 500 !important;
    padding: 0.2rem 1.35rem 0.2rem 0.55rem !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.25rem !important;
    margin: 0 !important;
    line-height: 1.1 !important;
    max-width: 100% !important;
    position: relative !important;
}
.select2-container--default
    .select2-selection--multiple
    .select2-selection__choice
    .select2-selection__choice__remove {
    color: var(--bt-primary, #04243d) !important;
    font-weight: 700 !important;
    font-size: 0.72rem !important;
    margin: 0 !important;
    order: 2 !important;
    position: absolute !important;
    right: 0.35rem !important;
    left: auto !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    float: none !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 0.92rem !important;
    height: 0.92rem !important;
    border-radius: 999px !important;
    flex-shrink: 0 !important;
    border: none !important;
    background: transparent !important;
    padding: 0 !important;
    line-height: 1 !important;
    cursor: pointer !important;
    z-index: 2 !important;
}
.select2-container--default
    .select2-selection--multiple
    .select2-selection__choice
    .select2-selection__choice__remove:hover {
    color: #c00 !important;
    background: rgba(222, 53, 11, 0.12) !important;
}
.select2-container--default
    .select2-selection--multiple
    .select2-search__field {
    color: var(--bt-ink) !important;
    background: transparent !important;
    min-width: 80px !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding: 0.15rem 0 !important;
    line-height: 1.2 !important;
    height: 1.35rem !important;
}
.select2-container--default
    .select2-selection--multiple
    .select2-selection__choice__display {
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    max-width: 15rem !important;
    padding: 0 !important;
    margin: 0 !important;
    line-height: 1.2 !important;
}
.select2-container--default .select2-selection--multiple .select2-search--inline {
    display: inline-flex !important;
    align-items: center !important;
}
.select2-container--default
    .select2-selection--multiple
    .select2-selection__clear {
    display: none !important;
}
[data-theme="dark"] .select2-selection__choice {
    background: rgba(56, 139, 253, 0.15) !important;
    border-color: rgba(56, 139, 253, 0.4) !important;
    color: #79b8ff !important;
}
[data-theme="dark"] .select2-selection__choice__remove {
    color: #79b8ff !important;
}

/* ─── 32. Dark mode form fixes ───────────────────────────────────────────── */
[data-theme="dark"] .form-control,
[data-theme="dark"] .form-select,
[data-theme="dark"] .form-control-app,
[data-theme="dark"] .form-select-app {
    background-color: var(--bt-surface);
    border-color: var(--bt-border);
    color: var(--bt-ink);
}
[data-theme="dark"] .form-control::placeholder,
[data-theme="dark"] .form-control-app::placeholder {
    color: var(--bt-ink-subtle);
}
[data-theme="dark"] .form-control:focus,
[data-theme="dark"] .form-select:focus,
[data-theme="dark"] .form-control-app:focus,
[data-theme="dark"] .form-select-app:focus {
    border-color: var(--bt-primary);
    box-shadow: 0 0 0 3px rgba(56, 139, 253, 0.2);
}
[data-theme="dark"] .btn-close {
    filter: invert(1) grayscale(1);
}
[data-theme="dark"] .select2-container--default .select2-selection--single,
[data-theme="dark"] .select2-container--default .select2-selection--multiple {
    background-color: var(--bt-surface) !important;
    border-color: var(--bt-border) !important;
}
[data-theme="dark"]
    .select2-container--default
    .select2-selection--single
    .select2-selection__rendered {
    color: var(--bt-ink) !important;
}
[data-theme="dark"] .select2-dropdown {
    background: var(--bt-surface) !important;
    border-color: var(--bt-border) !important;
}
[data-theme="dark"] .bootstrap-select .dropdown-menu {
    background: var(--bt-surface) !important;
    border-color: var(--bt-border) !important;
}
[data-theme="dark"] .bootstrap-select > .dropdown-toggle.bt-selectpicker-toggle:focus,
[data-theme="dark"] .bootstrap-select.show > .dropdown-toggle.bt-selectpicker-toggle {
    box-shadow:
        0 0 0 3px rgba(123, 165, 196, 0.22),
        var(--bt-shadow-xs) !important;
}
[data-theme="dark"] .bootstrap-select .dropdown-menu .dropdown-item {
    color: var(--bt-ink) !important;
}
[data-theme="dark"] .bootstrap-select .dropdown-menu .dropdown-item:hover {
    background: rgba(123, 165, 196, 0.14) !important;
}
[data-theme="dark"] .bootstrap-select .bs-searchbox .form-control {
    background: var(--bt-surface-2) !important;
    border-color: var(--bt-border) !important;
    color: var(--bt-ink) !important;
}
[data-theme="dark"] .bootstrap-select .bs-actionsbox .btn.btn-light {
    background: var(--bt-surface-2) !important;
    border-color: var(--bt-border) !important;
    color: var(--bt-ink) !important;
}
[data-theme="dark"] .select2-results__option {
    color: var(--bt-ink) !important;
}
[data-theme="dark"] .select2-search--dropdown .select2-search__field {
    background: var(--bt-surface-2) !important;
    color: var(--bt-ink) !important;
    border-color: var(--bt-border) !important;
}
[data-theme="dark"] .modal-content {
    background: var(--bt-surface);
    border-color: var(--bt-border);
}
[data-theme="dark"] .form-check-input {
    background-color: var(--bt-surface);
    border-color: var(--bt-border);
}
[data-theme="dark"] .form-check-input:checked {
    background-color: var(--bt-primary);
    border-color: var(--bt-primary);
}
[data-theme="dark"] .app-table thead th {
    background: var(--bt-surface-2);
}
[data-theme="dark"] .birthday-slider-banner {
    background: linear-gradient(135deg, rgba(123, 165, 196, 0.16), rgba(123, 165, 196, 0.04));
    border-color: var(--bt-border);
}
[data-theme="dark"] .birthday-slider-item {
    background: var(--bt-surface-2);
    border-color: var(--bt-border);
}
@media (hover: hover) and (pointer: fine) {
    [data-theme="dark"] .app-table tbody tr:hover td {
        background: var(--bt-surface-2);
    }
}
[data-theme="dark"] .app-table .is-sticky-name-col,
[data-theme="dark"] .app-table .is-sticky-first-col,
[data-theme="dark"] .app-table .is-sticky-second-col,
[data-theme="dark"] .app-table .is-sticky-action-col {
    background: var(--bt-surface);
}
[data-theme="dark"] .app-table thead .is-sticky-name-col,
[data-theme="dark"] .app-table thead .is-sticky-first-col,
[data-theme="dark"] .app-table thead .is-sticky-second-col,
[data-theme="dark"] .app-table thead .is-sticky-action-col {
    background: var(--bt-surface-2);
}
[data-theme="dark"] .app-table-wrap.has-datatable .dataTables_scrollBody {
    scrollbar-color: rgba(139, 148, 158, 0.55) transparent;
}
[data-theme="dark"]
    .app-table-wrap.has-datatable
    .dataTables_scrollBody::-webkit-scrollbar-thumb {
    background: rgba(139, 148, 158, 0.5);
}
[data-theme="dark"]
    .app-table-wrap.has-datatable
    .dataTables_paginate
    .page-link {
    border-color: var(--bt-border);
    background: var(--bt-surface);
    color: var(--bt-ink-2);
}
[data-theme="dark"]
    .app-table-wrap.has-datatable
    .dataTables_paginate
    .page-item.disabled
    .page-link {
    background: var(--bt-surface-2);
    color: var(--bt-ink-subtle);
}

/* ─── 33. Info Tile (Dashboard workday cards) ───────────────────────────── */
.info-tile {
    background: var(--bt-surface);
    border: 1px solid var(--bt-border);
    border-radius: var(--bt-r-lg);
    padding: 1rem 1.1rem;
    height: 100%;
    transition: box-shadow var(--bt-t);
}
.info-tile:hover {
    box-shadow: var(--bt-shadow-sm);
}
.info-tile-label {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--bt-ink-muted);
    margin-bottom: 0.5rem;
}
.info-tile-value {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--bt-ink);
    margin-bottom: 0.2rem;
    line-height: 1.3;
}
.info-tile-sub {
    font-size: 0.8rem;
    color: var(--bt-ink-muted);
}

/* stats-grid compact variant (dashboard summary bar) */
.stats-grid-compact {
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
}

.timesheet-summary-grid,
.attendance-summary-grid,
.epic-stats-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
    overflow: visible;
}
.timesheet-summary-grid .stat-card,
.attendance-summary-grid .stat-card,
.epic-stats-grid .stat-card {
    flex: 1 1 126px;
    min-width: 126px;
    padding: 0.65rem 0.75rem;
    border-radius: var(--bt-r);
}
.timesheet-summary-grid .stat-label,
.attendance-summary-grid .stat-label,
.epic-stats-grid .stat-label {
    gap: 0.25rem;
    margin-bottom: 0.25rem;
    font-size: 0.62rem;
    white-space: nowrap;
}
.timesheet-summary-grid .stat-value,
.attendance-summary-grid .stat-value,
.epic-stats-grid .stat-value {
    font-size: 1.25rem;
    line-height: 1.05;
    white-space: nowrap;
}
/* Epic stat values (project name, status label) aren't short fixed-format numbers like
   timesheet/attendance values, so they need to wrap instead of overflowing the card. */
.epic-stats-grid .stat-value {
    white-space: normal;
    overflow-wrap: anywhere;
}
.timesheet-summary-grid .stat-value-period,
.attendance-summary-grid .stat-value-period {
    font-size: 0.82rem;
    font-weight: 700;
}
.timesheet-project-summary-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
    overflow: visible;
}
.timesheet-project-summary-card {
    flex: 1 1 150px;
    min-width: 150px;
}
.timesheet-project-summary-card .app-card-body {
    padding: 0.7rem 0.8rem;
}
.timesheet-project-summary-card .fw-bold {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.timesheet-project-summary-card .fs-4 {
    margin-top: 0.25rem !important;
    font-size: 1.1rem !important;
}

/* ─── 34. Attendance Widget (Sidebar) ───────────────────────────────────── */
.attendance-widget {
    padding: 0.55rem 0.6rem;
    background: var(--bt-sidebar-search-bg);
    border: 1px solid var(--bt-sidebar-border);
    border-radius: var(--bt-r-md);
}
.attendance-meta-label {
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--bt-sidebar-text-muted);
}
.attendance-meta-time {
    font-size: 0.72rem;
    color: var(--bt-sidebar-text-muted);
}
.attendance-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    width: 100%;
    padding: 0.38rem 0.6rem;
    border: none;
    border-radius: var(--bt-r);
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    transition: all var(--bt-t);
}
.attendance-btn-in {
    background: var(--bt-success);
    color: #fff;
}
.attendance-btn-in:hover {
    background: #116c4c;
}
.attendance-btn-out {
    background: var(--bt-warning);
    color: #fff;
}
.attendance-btn-out:hover {
    background: #e07c00;
}
.attendance-done {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.78rem;
    color: var(--bt-sidebar-text-muted);
    padding: 0.3rem 0.4rem;
}
.attendance-done i {
    color: #3fb950;
}
.logo-class {
    width: 100%;
    margin: 0px auto;
    text-align: center;
    padding: 20px;
}
.logo-class > img {
    display: block;
    width: 100%;
    height: auto;
    object-fit: contain;
}

/* ─── 34a. Push Notification Banner + Profile Card ──────────────────────── */

/* Site-wide non-intrusive push prompt bar (bottom of screen) */
.push-prompt-bar {
    position: fixed;
    bottom: 1.25rem;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: 0.75rem;
    background: var(--bt-surface);
    border: 1px solid var(--bt-border);
    border-radius: var(--bt-r-xl);
    box-shadow: var(--bt-shadow-lg);
    padding: 0.75rem 1rem;
    max-width: 640px;
    width: calc(100vw - 2rem);
    z-index: 1060;
    animation: push-bar-slide-up 0.3s ease;
}
@keyframes push-bar-slide-up {
    from { opacity: 0; transform: translateX(-50%) translateY(20px); }
    to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}
.push-prompt-bar-icon {
    font-size: 1.35rem;
    color: var(--bt-primary);
    flex-shrink: 0;
}
.push-prompt-bar-body {
    flex: 1;
    min-width: 0;
}
.push-prompt-bar-body strong {
    display: block;
    font-size: 0.875rem;
    color: var(--bt-ink);
    margin-bottom: 0.1rem;
}
.push-prompt-bar-body span {
    font-size: 0.8rem;
    color: var(--bt-ink-muted);
}
[data-theme="dark"] .push-prompt-bar {
    background: var(--bt-surface-2);
    border-color: var(--bt-border);
}

/* Profile page — setup steps */
.push-setup-steps {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}
.push-step {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.65rem 0.875rem;
    background: var(--bt-surface-2);
    border: 1px solid var(--bt-border-soft);
    border-radius: var(--bt-r-md);
}
.push-step-num {
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 50%;
    background: var(--bt-primary-light);
    color: var(--bt-primary);
    display: grid;
    place-items: center;
    font-size: 0.72rem;
    font-weight: 700;
    flex-shrink: 0;
    transition: background 0.2s, color 0.2s;
}
.push-step-body {
    flex: 1;
    min-width: 0;
}
.push-step-body strong {
    display: block;
    font-size: 0.83rem;
    color: var(--bt-ink);
    margin-bottom: 0.15rem;
}
.push-step-body span {
    font-size: 0.78rem;
    color: var(--bt-ink-muted);
}
.push-step-check {
    font-size: 1rem;
    flex-shrink: 0;
    align-self: center;
}

/* Profile page — active device info */
.push-active-info {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.75rem 0.875rem;
    background: var(--bt-success-bg);
    border: 1px solid rgba(111, 169, 40, 0.25);
    border-radius: var(--bt-r-md);
    color: var(--bt-ink);
}
.push-active-info strong {
    display: block;
    font-size: 0.875rem;
    margin-bottom: 0.2rem;
}
.push-active-info span {
    font-size: 0.8rem;
    color: var(--bt-ink-muted);
}

@media (max-width: 575.98px) {
    .push-prompt-bar {
        bottom: 0.75rem;
        border-radius: var(--bt-r-xl) var(--bt-r-xl) var(--bt-r) var(--bt-r);
        flex-wrap: wrap;
    }
    .push-prompt-bar-body span {
        display: none;
    }
}

/* ─── 34. Kanban drag placeholder ─────────────────────────────────────── */
.ticket-card-placeholder {
    background: var(--bt-primary-light);
    border: 2px dashed var(--bt-primary-border);
    border-radius: var(--bt-r-lg);
    opacity: 0.5;
}
.ticket-card.dragging {
    opacity: 0.5;
    transform: rotate(1.5deg);
    box-shadow: var(--bt-shadow-lg);
}

/* ─── 35. Responsive ─────────────────────────────────────────────────────── */

/* ── Tablet + Mobile: ≤ 991px ─────────────────────────────────────────────── */
@media (max-width: 991.98px) {
    /* Reset sidebar collapse on tablet/mobile */
    body.sidebar-collapsed .sidebar {
        width: var(--bt-sidebar-w);
    }

    /* Sidebar: slide off-canvas */
    .sidebar {
        transform: translateX(-100%);
        box-shadow: none;
    }
    .sidebar.open {
        transform: translateX(0);
        box-shadow: var(--bt-sidebar-shadow);
    }
    .sidebar-overlay.show {
        display: block;
    }

    /* Main area: full width */
    .main-area {
        margin-left: 0;
        width: 100%;
        max-width: 100%;
    }
    .page-wrapper {
        padding: 1.25rem 1rem 2.5rem;
    }
    .admin-banner {
        margin: -1.25rem -1rem 1.5rem;
        padding: 0.65rem 1rem;
    }

    /* Stats grid: 2 columns on tablet */
    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Chat sidebar narrower */
    .chat-sidebar {
        width: 200px;
    }

    /* Card actions wrap on tablet */
    .app-card-header {
        flex-wrap: wrap;
    }

    /* Page header: wrap actions below title */
    .page-header {
        flex-wrap: wrap;
    }
    .page-header-right {
        width: 100%;
    }

    /* Board: enable horizontal scroll */
    .board-wrap {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 0.5rem;
    }

    /* DataTable container: compact padding */
    .app-table-wrap.has-datatable {
        padding: 0.75rem 0.75rem 0.85rem;
    }

    /* Reduce modal padding */
    .modal-body {
        padding: 1rem;
    }
}

/* ── Small: ≤ 767px ───────────────────────────────────────────────────────── */
@media (max-width: 767.98px) {
    .bt-datatable-native-scroll { overflow:visible!important;border:0!important;background:transparent!important; }
    /* Page wrapper: tighter padding */
    .page-wrapper {
        padding: 1rem 0.875rem 2rem;
    }
    .admin-banner {
        margin: -1rem -0.875rem 1.25rem;
        padding: 0.6rem 0.875rem;
    }

    /* Stats: still 2 columns */
    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.75rem;
        margin-bottom: 1.25rem;
    }
    .stat-card {
        padding: 1rem;
    }
    .stat-value {
        font-size: 1.6rem;
    }

    /* App card body: tighter padding */
    .app-card-body {
        padding: 1rem;
    }
    .app-card-header {
        padding: 0.75rem 1rem;
    }
    .app-card-footer {
        padding: 0.6rem 1rem;
    }

    /* Tables: horizontal scroll on plain tables */
    .app-table-wrap {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    .app-table-wrap.has-datatable {
        padding: 0.6rem 0.6rem 0.75rem;
    }

    /* DataTable length/page controls: stack vertically */
    .app-table-wrap.has-datatable .row > [class*="col-md"] {
        text-align: left !important;
    }

    /* Page header */
    .page-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.6rem;
        margin-bottom: 1.25rem;
    }
    .page-header-right {
        width: 100%;
        flex-wrap: wrap;
        gap: 0.4rem;
    }
    .page-title {
        font-size: 1.2rem;
    }

    /* Chart cards: ensure full width on small screens */
    .chart-card {
        min-width: 0;
        overflow: hidden;
    }
    .chart-card canvas {
        max-width: 100%;
    }

    /* Profile layout: stack avatar + form */
    .profile-avatar-zone {
        margin-bottom: 1rem;
    }

    /* Kanban board columns */
    .board-col {
        min-width: 260px;
        max-width: 260px;
    }

    /* Backlog: tighter spacing */
    .backlog-section-header {
        padding: 0.6rem 0.875rem;
    }
    .backlog-item {
        padding: 0.55rem 0.875rem;
    }

    /* Forms: force full-width on nested row cols */
    .row.g-3 > [class^="col-md"],
    .row.g-3 > [class^="col-lg"],
    .row.g-4 > [class^="col-md"],
    .row.g-4 > [class^="col-lg"] {
        /* Bootstrap already handles this with col-md-* breakpoints,
           but ensure any col-12 override applies */
        min-width: 0;
    }

    /* Inline filter form: stack on small screens */
    form.row > .col-md-4,
    form.row > .col-lg-3,
    form.row > .col-lg-2,
    form.row > .col-lg-1 {
        width: 100%;
        flex: 0 0 100%;
        max-width: 100%;
    }

    /* DataTable filter/page row: stack */
    .dataTables_wrapper .row > div {
        margin-bottom: 0.4rem;
    }
    .dataTables_wrapper .col-sm-12.col-md-6 {
        width: 100%;
        max-width: 100%;
        flex: 0 0 100%;
        justify-content: flex-start !important;
    }

    /* Action buttons in card headers: smaller gap */
    .app-card-header .d-flex.gap-2,
    .app-card-header .d-flex.gap-3 {
        gap: 0.35rem !important;
        flex-wrap: wrap;
    }

    /* Quick-create modal: full width on mobile */
    .modal-dialog {
        margin: 0.5rem;
        max-width: calc(100vw - 1rem);
    }

    /* Ticket show: meta grid adjustments */
    .ticket-meta-grid {
        grid-template-columns: 1fr;
    }

    /* Birthday slider: hide on very small if needed */
    .birthday-slider-banner {
        padding: 0.45rem 0.65rem;
        gap: 0.5rem;
    }
    .birthday-slider-head span {
        display: none;
    }

    /* Toast stack: full width */
    #toast-stack {
        left: 50%;
        right: auto;
        top:calc(4.6rem + env(safe-area-inset-top));
        bottom:auto;
        width:calc(100vw - 1rem);
    }
    .app-flash-toast-stack{top:calc(4.6rem + env(safe-area-inset-top));bottom:auto;left:50%;right:auto;width:calc(100vw - 1rem)}
    .app-toast {
        width: 100%;
        max-width: 100%;
        grid-template-columns:1.55rem minmax(0,1fr) 1.85rem;
        gap:.65rem;
        padding:.72rem;
        border-radius:1.05rem;
    }
    .app-toast-icon{width:1.55rem;height:2rem;border-radius:0}

    /* Mention dropdown: position adjustments */
    .mention-dropdown {
        max-width: 90vw;
    }

    /* Remove horizontal scroll on the page itself */
    body {
        overflow-x: hidden;
    }
}

/* ── XSmall: ≤ 575px ─────────────────────────────────────────────────────── */
@media (max-width: 575.98px) {
    /* Page wrapper: minimal padding */
    .page-wrapper {
        padding: 0.75rem 0.65rem 2rem;
    }
    .admin-banner {
        margin: -0.75rem -0.65rem 1rem;
        padding: 0.5rem 0.65rem;
    }

    /* Stats: 2 columns even on xs */
    .stats-grid {
        grid-template-columns: 1fr 1fr;
        gap: 0.6rem;
        margin-bottom: 1rem;
    }
    .stats-grid-compact {
        grid-template-columns: 1fr 1fr;
    }
    .stat-card {
        padding: 0.75rem 0.875rem;
    }
    .stat-value {
        font-size: 1.4rem;
    }

    /* App card: minimal padding */
    .app-card-body {
        padding: 0.75rem;
    }
    .app-card-header {
        padding: 0.65rem 0.75rem;
        gap: 0.4rem;
    }
    .app-card-footer {
        padding: 0.5rem 0.75rem;
    }

    /* Page title smaller */
    .page-title {
        font-size: 1.1rem;
    }

    /* Kanban board: narrower columns for swiping */
    .board-col {
        min-width: 244px;
        max-width: 244px;
    }

    /* Button groups: allow wrap */
    .btn-group-responsive {
        display: flex;
        flex-wrap: wrap;
        gap: 0.35rem;
    }
    .page-header-right .btn {
        font-size: 0.78rem;
        padding: 0.3rem 0.6rem;
    }

    /* Breadcrumb: truncate */
    .page-breadcrumb {
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        max-width: 100%;
    }
    .page-breadcrumb .breadcrumb-item {
        max-width: 120px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        display: inline-block;
        vertical-align: middle;
    }

    /* DataTable: compact */
    .app-table-wrap.has-datatable {
        padding: 0.5rem 0.5rem 0.6rem;
    }
    .app-table thead th,
    .app-table tbody td {
        padding: 0.55rem 0.65rem;
        font-size: 0.8rem;
    }

    /* Filter forms: full width each field */
    form#filterForm .row > [class*="col-"] {
        flex: 0 0 100%;
        max-width: 100%;
    }

    /* Modals: true full-screen on xs */
    .modal-dialog {
        margin: 0;
        max-width: 100vw;
        min-height: 100vh;
        align-items: flex-end;
    }
    .modal-content {
        border-radius: var(--bt-r-xl) var(--bt-r-xl) 0 0;
        max-height: 95vh;
        overflow-y: auto;
    }
    .modal-dialog-centered {
        align-items: flex-end;
    }

    /* Quick-create modal: keep centered on xs */
    #quickCreateModal .modal-dialog {
        margin: auto;
        max-width: calc(100vw - 1rem);
        min-height: unset;
        align-items: center;
    }
    #quickCreateModal .modal-content {
        border-radius: var(--bt-r-xl);
        max-height: 90vh;
    }

    /* Ticket card: minimal padding */
    .ticket-card {
        padding: 0.75rem;
    }

    /* Backlog items: compact */
    .backlog-item {
        padding: 0.45rem 0.65rem;
        font-size: 0.83rem;
    }

    /* User pod: hide role label on very small */
    .upod-role {
        display: none;
    }

    /* Sidebar search: always visible when sidebar opens */
    .sidebar.open .sidebar-search {
        display: block;
    }
}

/* ── Print / utility ─────────────────────────────────────────────────────── */
@media (max-width: 399.98px) {
    .page-wrapper {
        padding: 0.5rem 0.5rem 1.5rem;
    }
    .stats-grid {
        grid-template-columns: 1fr;
    }
    .stat-card {
        padding: 0.6rem 0.75rem;
    }
    .app-card-body {
        padding: 0.6rem;
    }
}

/* Top header overrides when sidebar is collapsed */
body.sidebar-collapsed .workspace-topbar-right .quick-create-btn-inline {
    font-size: 0.86rem;
    padding: 0.42rem 0.8rem;
}
body.sidebar-collapsed .workspace-topbar-right .quick-create-btn-inline i {
    margin-right: 0.2rem;
    font-size: 0.9rem;
}
body.sidebar-collapsed .workspace-topbar-right .upod-info,
body.sidebar-collapsed .workspace-topbar-right .upod-caret {
    display: block !important;
}
body.sidebar-collapsed .workspace-topbar-right .user-pod {
    justify-content: flex-start;
}

/* Rich text editor */
.bt-rich-editor {
    border: 1px solid var(--bt-border-soft, #d9e3ef);
    border-radius: 0.55rem;
    color: var(--bt-ink, #0f172a);
    background: var(--bt-surface, #fff);
    overflow: hidden;
}
.bt-rich-toolbar {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.42rem;
    border-bottom: 1px solid var(--bt-border-soft, #d9e3ef);
    background: var(--bt-surface-2, #f8fafc);
}
.bt-rich-toolbar button {
    width: 2rem;
    height: 2rem;
    border: 1px solid transparent;
    border-radius: 0.4rem;
    color: var(--bt-ink-muted, #334155);
    background: transparent;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.bt-rich-toolbar button:hover {
    color: var(--bt-primary);
    border-color: var(--bt-primary-border, #cfe0f5);
    background: var(--bt-surface-3, #fff);
}
.bt-rich-divider {
    width: 1px;
    height: 1.35rem;
    background: var(--bt-border-soft, #d9e3ef);
    margin: 0 0.2rem;
}
.bt-rich-surface {
    min-height: 8rem;
    padding: 0.75rem 0.85rem;
    line-height: 1.6;
    color: var(--bt-ink, #0f172a);
    background: var(--bt-surface, #fff);
    caret-color: var(--bt-ink, #0f172a);
    outline: 0;
    overflow-wrap: anywhere;
}
.bt-rich-surface:empty::before {
    content: "Write details...";
    color: var(--bt-ink-subtle, #94a3b8);
}
.bt-rich-surface a {
    color: var(--bt-primary);
}
.bt-rich-surface img,
.comment-text img,
#dailyPriorityViewNotes img,
.epic-description-rich img {
    display: block;
    max-width: 100%;
    height: auto;
    margin: .65rem 0;
    border-radius: .55rem;
}
.epic-description-rich {
    color: var(--bt-ink);
    line-height: 1.75;
    overflow-wrap: anywhere;
}
.epic-description-rich > :first-child { margin-top: 0; }
.epic-description-rich > :last-child { margin-bottom: 0; }
.epic-description-rich a { color: var(--bt-primary); }
.epic-description-rich pre {
    overflow: auto;
    padding: 1rem;
    border-radius: .65rem;
    background: #0f172a;
    color: #e2e8f0;
}
.epic-description-rich blockquote {
    margin: 1rem 0;
    padding: .75rem 1rem;
    border-left: 3px solid var(--bt-primary);
    background: var(--bt-surface-2);
}

@media (max-width: 767.98px) {
    .ticket-save-filter { display: none !important; }
}

/* ── Chat: message bubble content ──────────────────────────────────────────
   Shared by the full /chat page and the floating chat widget (every page),
   both rendered by public/assets/js/chat/chat-messages.js's bubbleHtml(). */
.chat-msg {
    display: flex;
    gap: .65rem;
    align-items: flex-start;
    padding: .35rem .5rem;
    border-radius: var(--bt-r-md);
}
.chat-msg.is-me { flex-direction: row-reverse; }
.chat-msg-avatar { width: 2rem; height: 2rem; border-radius: 50%; flex-shrink: 0; }
.chat-msg-bubble {
    position: relative;
    background: var(--bt-surface);
    border: 1px solid var(--bt-border-soft);
    border-radius: 0 var(--bt-r-lg) var(--bt-r-lg) var(--bt-r-lg);
    padding: .55rem .85rem;
    max-width: 520px;
    min-width: 60px;
}
.chat-msg.is-me .chat-msg-bubble {
    background: var(--bt-primary-light);
    border-color: var(--bt-primary-border);
    border-radius: var(--bt-r-lg) 0 var(--bt-r-lg) var(--bt-r-lg);
}
.chat-msg-col { position: relative; }
.chat-msg-name { font-size: .75rem; font-weight: 700; color: var(--bt-primary); margin-bottom: .2rem; }
.chat-msg.is-me .chat-msg-name { color: var(--bt-primary); text-align: right; }
.chat-msg-text { font-size: .88rem; color: var(--bt-ink); line-height: 1.55; word-break: break-word; white-space: pre-wrap; }
.chat-msg-time { font-size: .68rem; color: var(--bt-ink-subtle); margin-top: .25rem; text-align: right; }

.chat-empty {
    flex: 1; display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    color: var(--bt-ink-muted);
    text-align: center; padding: 2rem;
}
.chat-empty i { font-size: 3rem; margin-bottom: 1rem; opacity: .35; }

/* Message actions (edit/delete) */
.chat-msg-actions-btn {
    position: absolute; top: .1rem; right: .25rem;
    border: none; background: transparent; color: var(--bt-ink-subtle);
    opacity: 0; transition: opacity var(--bt-t); cursor: pointer; padding: .1rem .3rem; border-radius: .3rem;
    font-size: .75rem;
}
.chat-msg.is-me .chat-msg-actions-btn { left: .25rem; right: auto; }
.chat-msg-bubble:hover .chat-msg-actions-btn { opacity: 1; }
.chat-msg-actions-btn:hover { background: rgba(0,0,0,.06); }
.chat-msg-actions-menu {
    position: absolute; top: 1.6rem; right: .25rem; z-index: 5;
    background: var(--bt-surface); border: 1px solid var(--bt-border); border-radius: var(--bt-r-md);
    box-shadow: var(--bt-shadow-card); min-width: 160px; overflow: hidden;
}
.chat-msg.is-me .chat-msg-actions-menu { left: .25rem; right: auto; }
.chat-msg-actions-menu button {
    display: block; width: 100%; text-align: left; border: none; background: none;
    padding: .5rem .75rem; font-size: .82rem; color: var(--bt-ink); cursor: pointer;
}
.chat-msg-actions-menu button:hover { background: var(--bt-surface-2); }
.chat-msg-deleted { opacity: .75; }
.chat-msg-edited { font-size: .7rem; color: var(--bt-ink-subtle); }
.chat-edit-input { width: 100%; min-width: 220px; margin-top: .25rem; }
.chat-tick { font-size: .85rem; color: var(--bt-ink-subtle); vertical-align: -1px; }
.chat-tick-seen { color: #34b7f1; }
.chat-mention { color: var(--bt-primary); font-weight: 600; background: var(--bt-primary-light); border-radius: .25rem; padding: 0 .15rem; }

/* @mention autocomplete */
.chat-mention-box {
    display: none; position: absolute; bottom: 100%; left: 0; margin-bottom: .35rem;
    background: var(--bt-surface); border: 1px solid var(--bt-border); border-radius: var(--bt-r-md);
    box-shadow: var(--bt-shadow-card); min-width: 180px; max-height: 220px; overflow-y: auto; z-index: 5;
}
.chat-mention-option {
    display: block; width: 100%; text-align: left; border: none; background: none;
    padding: .5rem .75rem; font-size: .85rem; color: var(--bt-ink); cursor: pointer;
}
.chat-mention-option:hover, .chat-mention-option.is-active { background: var(--bt-primary-light); color: var(--bt-primary); }

/* Reactions */
.chat-reactions { display: flex; flex-wrap: wrap; gap: .3rem; margin-top: .35rem; }
.chat-reaction-pill {
    border: 1px solid var(--bt-border); background: var(--bt-surface-2); border-radius: 999px;
    font-size: .75rem; padding: .1rem .45rem; cursor: pointer; color: var(--bt-ink);
}
.chat-reaction-pill.is-mine { background: var(--bt-primary-light); border-color: var(--bt-primary-border); color: var(--bt-primary); }
.chat-msg-quick-react { display: flex; gap: .2rem; padding: .4rem .5rem; border-bottom: 1px solid var(--bt-border-soft); }
.chat-msg-quick-react button { border: none; background: none; font-size: 1.15rem; cursor: pointer; padding: .15rem .25rem; border-radius: .3rem; }
.chat-msg-quick-react button:hover { background: var(--bt-surface-2); }

/* Reply quote (inside a bubble, referencing the original message) */
.chat-reply-quote {
    border-left: 3px solid var(--bt-primary); background: rgba(0,82,204,.06);
    border-radius: .3rem; padding: .3rem .5rem; margin-bottom: .35rem; font-size: .78rem;
}
.chat-reply-quote-name { font-weight: 700; color: var(--bt-primary); }
.chat-reply-quote-text { color: var(--bt-ink-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 320px; }

/* Reply bar (above the input, while composing a reply) */
.chat-reply-bar {
    display: none; align-items: center; gap: .5rem;
    padding: .5rem .75rem; margin: 0 1.25rem; border-radius: var(--bt-r-md) var(--bt-r-md) 0 0;
    background: var(--bt-surface-2); border: 1px solid var(--bt-border-soft); border-bottom: none;
}
.chat-reply-bar-body { flex: 1; min-width: 0; }
.chat-reply-bar-name { font-size: .75rem; font-weight: 700; color: var(--bt-primary); }
.chat-reply-bar-text { font-size: .78rem; color: var(--bt-ink-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat-reply-bar-close { border: none; background: none; color: var(--bt-ink-subtle); cursor: pointer; }

/* Emoji picker */
.chat-emoji-box {
    display: none; position: absolute; bottom: 100%; right: 0; margin-bottom: .35rem;
    background: var(--bt-surface); border: 1px solid var(--bt-border); border-radius: var(--bt-r-md);
    box-shadow: var(--bt-shadow-card); width: 260px; max-height: 220px; overflow-y: auto; z-index: 5;
    padding: .4rem; display: flex; flex-wrap: wrap; gap: .1rem;
}
.chat-emoji-option { border: none; background: none; font-size: 1.2rem; cursor: pointer; padding: .2rem; border-radius: .3rem; }
.chat-emoji-option:hover { background: var(--bt-surface-2); }

/* Responsive hardening across workspace pages */
img,
svg,
canvas,
video,
iframe {
    max-width: 100%;
}
.page-header-left,
.page-header-right,
.app-card,
.app-card-body,
.app-card-header,
.app-table-wrap,
.modal-content,
.dropdown-menu,
.select2-container,
.bootstrap-select,
.bt-rich-editor,
.bt-rich-surface {
    min-width: 0;
}
.page-header-right {
    justify-content: flex-end;
}
@media (min-width: 992px) {
    .page-header {
        display: grid;
        grid-template-columns: minmax(0, 1fr) max-content;
        align-items: start;
        flex-wrap: nowrap;
    }
    .page-header-left {
        grid-column: 1;
        width: auto;
        min-width: 0;
    }
    .page-header-right {
        grid-column: 2;
        justify-self: end;
        width: auto;
        max-width: min(48vw, 46rem);
        margin-left: auto;
        flex-wrap: nowrap !important;
        justify-content: flex-end !important;
    }
    .page-header-right > .d-flex {
        width: auto;
        margin-left: auto;
        flex-wrap: nowrap !important;
        justify-content: flex-end !important;
    }
    .page-header-right form {
        flex: 0 0 auto;
        margin: 0;
    }

    /* Management boards have more contextual actions than a standard page
       header can safely hold beside the title. Keep the title readable and
       place the controls on a dedicated, wrapping row. */
    .page-header.page-header--board-management {
        grid-template-columns: minmax(0, 1fr);
        row-gap: 1rem;
    }
    .page-header.page-header--board-management .page-header-left,
    .page-header.page-header--board-management .page-header-right {
        grid-column: 1;
        width: 100%;
        max-width: none;
        margin-left: 0;
    }
    .page-header.page-header--board-management .page-header-right {
        grid-row: 2;
        justify-self: stretch;
        justify-content: flex-end !important;
    }
    .page-header.page-header--board-management .board-page-actions {
        width: 100%;
        margin-left: 0;
        flex-wrap: wrap !important;
        justify-content: flex-end !important;
    }
}
.page-breadcrumb-row { min-width:0; }
.page-title-row { display:flex;align-items:center;min-width:0; }
.bt-mobile-page-back { display:none; }
.bt-mobile-only-label { display:none; }
.page-header-right > .btn,
.page-header-right > a.btn,
.page-header-right > button.btn,
.page-header-right > .dropdown,
.page-header-right > .d-flex {
    max-width: 100%;
}
.page-header-right .btn,
.app-card-header .btn,
.app-card-footer .btn {
    white-space: nowrap;
}
.filter-bar > *,
.bt-filter-form > *,
form.row.g-2 > [class*="col-"],
form.row.g-3 > [class*="col-"] {
    min-width: 0;
}
.filter-bar .form-control,
.filter-bar .form-select,
.filter-bar .select2-container,
.filter-bar .bootstrap-select,
.bt-filter-form .form-control,
.bt-filter-form .form-select,
.bt-filter-form .select2-container,
.bt-filter-form .bootstrap-select,
form.row .form-control,
form.row .form-select,
form.row .select2-container,
form.row .bootstrap-select {
    width: 100% !important;
    max-width: 100%;
}
.app-card-header {
    gap: 0.75rem;
}
.app-card-header > * {
    min-width: 0;
}
.app-card-title {
    overflow-wrap: anywhere;
}
.empty-state,
.chart-card,
.profile-avatar-zone,
.info-tile {
    min-width: 0;
}
.dropdown-menu {
    max-width: min(92vw, 28rem);
    overflow-wrap: anywhere;
}
.bootstrap-select .dropdown-menu,
body > .bs-container {
    max-width: min(92vw, 34rem) !important;
}
.select2-dropdown {
    max-width: calc(100vw - 1rem);
}
.bt-rich-toolbar {
    flex-wrap: wrap;
}
.bt-rich-surface,
.ticket-description,
.chat-msg-text,
.chat-reply-quote-text,
.chat-reply-bar-text {
    overflow-wrap: anywhere;
}
.chat-msg-bubble {
    max-width: min(520px, calc(100vw - 5.5rem));
}
.chat-msg-actions-menu,
.chat-mention-box,
.chat-emoji-box {
    max-width: min(92vw, 20rem);
}

.bt-mobile-filter-toggle {
    display: none;
}

@media (max-width: 991.98px) {
    .workspace-topbar,
    .topbar,
    .mobile-topbar {
        max-width: 100vw;
    }
    .workspace-topbar-right {
        min-width: 0;
    }
    .page-header-right {
        justify-content: flex-start;
    }
    .page-header-right > .d-flex {
        flex-wrap: wrap;
        justify-content: flex-start;
    }
    .stats-grid,
    .timesheet-summary-grid,
    .attendance-summary-grid {
        align-items: stretch;
    }
    .filter-bar {
        align-items: stretch;
    }
    .filter-bar > * {
        flex: 1 1 13rem;
    }
    .modal-xl,
    .modal-lg {
        max-width: calc(100vw - 1rem);
    }
}

@media (max-width: 767.98px) {
    .page-subtitle {
        font-size: 0.82rem;
        line-height: 1.45;
    }
    .page-header-right .btn,
    .page-header-right .dropdown > .btn {
        flex: 1 1 auto;
        justify-content: center;
    }
    .page-header-right > .d-flex,
    .app-card-header > .d-flex,
    .app-card-footer > .d-flex,
    .users-filter-actions,
    .col.d-flex.gap-2,
    .col-auto.d-flex.gap-2 {
        width: 100%;
        flex-wrap: wrap;
    }
    .app-card-header .btn,
    .app-card-footer .btn,
    .col.d-flex.gap-2 .btn,
    .col-auto.d-flex.gap-2 .btn {
        flex: 1 1 auto;
        justify-content: center;
    }
    .filter-bar {
        display: grid;
        grid-template-columns: 1fr;
        padding: 0.75rem;
    }
    .bt-mobile-filter-toggle {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 0.45rem;
        width: 100%;
        min-height: 2.55rem;
        margin: 0 0 0.75rem;
        border: 1px solid #cbd7e6;
        border-radius: 0.5rem;
        background: #fff;
        color: var(--bt-primary);
        font-weight: 700;
        box-shadow: 0 8px 20px rgba(15, 23, 42, 0.06);
    }
    .bt-mobile-filter-toggle.has-active-filters {
        border-color: rgba(4, 36, 61, 0.35);
        background: rgba(4, 36, 61, 0.04);
    }
    .bt-mobile-filter-count {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 1.35rem;
        height: 1.35rem;
        padding: 0 0.35rem;
        border-radius: 999px;
        background: var(--bt-primary);
        color: #fff;
        font-size: 0.72rem;
        line-height: 1;
    }
    .bt-mobile-filter-panel:not(.is-open) {
        display: none !important;
    }
    .bt-mobile-filter-panel.is-open.filter-bar {
        display: grid;
    }
    .bt-filter-form,
    form.row {
        row-gap: 0.75rem !important;
    }
    form.row > [class*="col-"],
    form.row > .col,
    form.row > .col-auto {
        width: 100%;
        flex: 0 0 100%;
        max-width: 100%;
    }
    .dataTables_wrapper .row {
        --bs-gutter-y: 0.5rem;
    }
    .dataTables_wrapper .dataTables_length label {
        width: 100%;
        justify-content: flex-start;
        flex-wrap: wrap;
    }
    .dataTables_wrapper .dataTables_paginate {
        width: 100%;
        overflow-x: auto;
        padding-bottom: 0.15rem;
    }
    .dataTables_wrapper .pagination {
        justify-content: flex-start !important;
        flex-wrap: nowrap;
    }
    .app-table-wrap {
        border-radius: var(--bt-r-lg);
    }
    .app-table {
        min-width: 42rem;
    }
    .app-table-wrap.has-datatable .dataTables_scrollBody {
        max-height: min(64vh, 620px);
    }
    .app-table .btn.btn-sm,
    .bt-datatable .btn.btn-sm {
        min-width: 2rem;
        min-height: 2rem;
    }
    .modal-header,
    .modal-footer {
        padding: 0.75rem 0.9rem;
        gap: 0.5rem;
    }
    .modal-footer {
        flex-wrap: wrap;
    }
    .modal-footer .btn {
        flex: 1 1 auto;
    }
    .dropdown-menu {
        max-height: min(70vh, 28rem);
        overflow-y: auto;
    }
    .bootstrap-select .dropdown-menu .inner {
        max-height: min(48vh, 22rem) !important;
    }
    .chat-msg {
        gap: 0.45rem;
        padding-inline: 0;
    }
    .chat-msg-avatar {
        width: 1.7rem;
        height: 1.7rem;
    }
    .chat-msg-bubble {
        max-width: calc(100vw - 4.5rem);
        padding: 0.5rem 0.65rem;
    }
    .chat-edit-input {
        min-width: 0;
    }
    .chat-reply-bar {
        margin-inline: 0.75rem;
    }
    .chat-emoji-box {
        right: auto;
        left: 0;
        width: min(260px, calc(100vw - 1.5rem));
    }
}

@media (max-width: 575.98px) {
    .mobile-topbar {
        padding-inline: 0.65rem;
        gap: 0.4rem;
    }
    .page-header-right .btn,
    .page-header-right .dropdown > .btn,
    .app-card-header .btn,
    .app-card-footer .btn {
        min-height: 2.35rem;
    }
    .stats-grid,
    .stats-grid-compact,
    .timesheet-summary-grid,
    .attendance-summary-grid {
        grid-template-columns: 1fr;
    }
    .timesheet-summary-grid .stat-card,
    .attendance-summary-grid .stat-card,
    .timesheet-project-summary-card {
        flex-basis: 100%;
    }
    .stat-label {
        font-size: 0.64rem;
        line-height: 1.25;
    }
    .stat-value {
        font-size: 1.25rem;
    }
    .app-card-header {
        align-items: flex-start;
    }
    .app-card-title {
        font-size: 0.95rem;
        line-height: 1.3;
    }
    .app-table {
        min-width: 38rem;
    }
    .form-control,
    .form-select,
    .btn,
    .bootstrap-select > .dropdown-toggle {
        font-size: 0.88rem;
    }
    .input-group {
        flex-wrap: wrap;
    }
    .input-group > .form-control,
    .input-group > .form-select,
    .input-group > .btn {
        min-width: 0;
    }
    .input-group > .btn {
        flex: 1 1 auto;
    }
    .bt-rich-toolbar {
        gap: 0.2rem;
    }
    .bt-rich-toolbar button {
        width: 1.85rem;
        height: 1.85rem;
    }
    .chat-msg-bubble {
        max-width: calc(100vw - 3.75rem);
    }
    .chat-reply-quote-text {
        max-width: 100%;
    }
}

/* Minimal on-scroll surface reveal used throughout the application. */
html {
    scroll-behavior: smooth;
    scroll-padding-top: 5.5rem;
}
.bt-scroll-reveal {
    opacity: 0;
    filter: blur(2px);
    transform: translate3d(0, 16px, 0) scale(.992);
    transition-property: opacity, transform, filter, box-shadow !important;
    transition-duration: 620ms, 680ms, 560ms, 260ms !important;
    transition-delay: var(--bt-reveal-delay, 0ms), var(--bt-reveal-delay, 0ms), var(--bt-reveal-delay, 0ms), 0ms !important;
    transition-timing-function: cubic-bezier(.16,1,.3,1), cubic-bezier(.16,1,.3,1), ease-out, ease !important;
    backface-visibility: hidden;
}
.bt-scroll-reveal.is-revealed {
    opacity: 1;
    filter: blur(0);
    transform: translate3d(0, 0, 0) scale(1);
}
.bt-scroll-reveal.is-revealed:hover {
    transform: translate3d(0, 0, 0) scale(1) !important;
}
body.is-board-page .bt-scroll-reveal.is-revealed:hover {
    transform: translate3d(0, -3px, 0) scale(1) !important;
}
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior:auto; }
    .bt-scroll-reveal,
    .bt-scroll-reveal.is-revealed {
        opacity: 1;
        filter: none;
        transform: none;
        transition: none !important;
    }
    .bt-scroll-reveal.is-revealed:hover { transform:none !important; }
}

/* Premium elevation and interaction language for every application surface. */
:where(
    .dashboard-analytics-group,
    .workspace-analytics-group,
    .card,
    .backlog-section,
    .subscription-limits,
    [class$="-card"],
    [class*="-card "],
    [class$="-panel"],
    [class*="-panel "]
) {
    border: 0 !important;
    box-shadow: var(--bt-card-shadow-decent) !important;
    transition: none !important;
    will-change: auto;
}
body.is-board-page :where(
    .dashboard-analytics-group,
    .workspace-analytics-group,
    .card,
    .backlog-section,
    .subscription-limits,
    [class$="-card"],
    [class*="-card "],
    [class$="-panel"],
    [class*="-panel "]
) {
    transition: transform 240ms cubic-bezier(.2,.8,.2,1), box-shadow 240ms cubic-bezier(.2,.8,.2,1), background-color 180ms ease !important;
    will-change: transform, box-shadow;
}

/* --------------------------------------------------------------------------
   Mobile application experience
   Desktop remains unchanged; these rules turn dense workspace UI into
   touch-friendly cards, sheets, actions, and navigation below 768px.
   -------------------------------------------------------------------------- */
.bt-mobile-row-toggle-cell { display:none !important; }
.bt-mobile-filter-sheet-head,
.bt-mobile-filter-backdrop { display:none !important; }

.bt-collapsed-nav-flyout {
    position:fixed;
    z-index:1100;
    display:flex;
    align-items:center;
    gap:.6rem;
    min-height:2.65rem;
    padding:.55rem .8rem;
    border-radius:.7rem;
    color:var(--bt-ink);
    background:var(--bt-surface);
    box-shadow:0 12px 30px rgba(15,35,60,.18),0 3px 8px rgba(15,35,60,.1);
    font-size:.8rem;
    font-weight:700;
    white-space:nowrap;
    pointer-events:none;
    transform:translateY(-50%);
    animation:bt-collapsed-flyout-in 150ms ease-out;
}
.bt-collapsed-nav-flyout i { color:var(--bt-primary);font-size:.95rem; }
@keyframes bt-collapsed-flyout-in { from{opacity:0;transform:translate(-5px,-50%)} to{opacity:1;transform:translate(0,-50%)} }

@media (max-width: 767.98px) {
    :root {
        --bt-mobile-gutter: .85rem;
        --bt-mobile-radius: 1rem;
        --bt-mobile-control: 2.875rem;
    }

    body.app-body,
    body.tenant-app { background: #f5f7fa; }

    .mobile-topbar {
        min-height: 3.85rem;
        padding: .55rem var(--bt-mobile-gutter);
        border: 0;
        background: rgba(255,255,255,.94);
        box-shadow: 0 4px 18px rgba(15,35,60,.08);
        backdrop-filter: blur(18px) saturate(1.35);
    }
    .mobile-menu-btn,
    .mobile-icon-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        flex: 0 0 2.65rem;
        width: 2.65rem;
        height: 2.65rem;
        padding: 0;
        border: 0;
        border-radius: .85rem;
        color: var(--bt-ink);
        background: transparent;
    }
    .mobile-menu-btn:active,
    .mobile-icon-btn:active { color:var(--bt-primary); background:var(--bt-primary-light); transform:scale(.96); }
    .mobile-menu-glyph { display:flex;flex-direction:column;align-items:flex-start;gap:3px;width:1.05rem; }
    .mobile-menu-glyph span { display:block;height:1.6px;border-radius:999px;background:currentColor; }
    .mobile-menu-glyph span:nth-child(1),.mobile-menu-glyph span:nth-child(3){width:1.05rem}.mobile-menu-glyph span:nth-child(2){width:.7rem}
    .mobile-logo-img { max-width: 8.75rem; max-height: 2rem; object-fit:contain; }
    .mobile-profile-btn::after { display:none; }

    .sidebar {
        width: min(21rem, 88vw);
        border: 0 !important;
        border-radius: 0 1.35rem 1.35rem 0;
        background: #fff;
        box-shadow: none;
        transition: transform 320ms cubic-bezier(.16,1,.3,1), box-shadow 320ms ease;
    }
    .sidebar.open { box-shadow: 18px 0 55px rgba(15,35,60,.22); }
    .sidebar-overlay {
        background: rgba(10,24,38,.42);
        backdrop-filter: blur(4px);
        opacity: 0;
        transition: opacity 260ms ease;
    }
    .sidebar-overlay.show { opacity:1; }
    .sidebar-top { padding: .85rem .8rem .45rem; }
    .sidebar .sidebar-brand-row { padding:.35rem;border:0;border-radius:.9rem;box-shadow:none; }
    .sidebar-menu-scroll { margin-right:-.8rem;padding:.35rem .8rem 1rem .65rem; }
    .sidenav-link,.sidenav-sublink { min-height:2.75rem;border-radius:.75rem;margin-bottom:.18rem; }
    .sidenav-sublink.is-active { box-shadow:inset 3px 0 0 var(--bt-primary); }

    .page-wrapper { padding: 1rem var(--bt-mobile-gutter) 5rem; background:#f5f7fa !important; }
    .page-header { gap:.45rem;margin-bottom:1rem; }
    .page-header-left { position:relative; }
    .page-breadcrumb-row { display:flex;align-items:center;gap:.2rem;margin-bottom:.2rem; }
    .page-breadcrumb-row nav { min-width:0; }
    .page-breadcrumb-row .page-breadcrumb { margin-bottom:0; }
    .page-title-row { gap:0; }
    .page-title-row .page-title { min-width:0; }
    .bt-mobile-page-back {
        display:flex;
        align-items:center;
        justify-content:center;
        flex:0 0 1.9rem;
        width:1.9rem;
        min-width:1.9rem;
        height:1.9rem;
        padding:0;
        border:0;
        border-radius:50%;
        color:var(--bt-ink);
        background:transparent;
        box-shadow:none;
        font-size:.92rem;
        line-height:1;
        -webkit-tap-highlight-color:transparent;
        transition:transform .18s ease,box-shadow .18s ease,background .18s ease;
    }
    .bt-mobile-page-back i { display:block;line-height:1;transform:translateX(-.03rem); }
    .bt-mobile-page-back:active { transform:scale(.9);color:var(--bt-primary);background:var(--bt-primary-light,#eaf3fa);box-shadow:none; }
    .page-header-right .bt-mobile-redundant-back { display:none!important; }
    .bt-mobile-save-action { order:-20!important; }
    .bt-mobile-cancel-action { order:-10!important; }
    form button[type="submit"]:not([formnovalidate]),form input[type="submit"] { order:-20!important; }
    .page-breadcrumb { font-size:.68rem; }
    .page-title { font-size:1.3rem;letter-spacing:-.02em; }
    .page-subtitle { margin-top:.22rem;font-size:.78rem; }
    .page-header-right { display:grid !important;grid-template-columns:repeat(2,minmax(0,1fr));gap:.5rem; }
    .page-header-right > .btn,.page-header-right > a.btn,.page-header-right > button.btn { width:100%; }
    .page-header-right > .d-flex { display:grid !important;grid-template-columns:repeat(2,minmax(0,1fr));gap:.5rem!important; }

    .btn,
    .form-control,
    .form-select,
    .bootstrap-select > .dropdown-toggle {
        min-height: var(--bt-mobile-control);
        border-radius: .75rem !important;
        font-size: .875rem;
    }
    .btn { display:inline-flex;align-items:center;justify-content:center;gap:.35rem;padding:.62rem .85rem;font-weight:700; }
    .btn.btn-sm { min-height:2.65rem;padding:.55rem .75rem;font-size:.82rem; }
    .btn-icon,.btn.btn-icon,.app-table .btn.btn-sm,.bt-datatable .btn.btn-sm { flex:0 0 2.6rem;min-width:2.6rem;width:2.6rem;min-height:2.6rem;height:2.6rem;padding:0;border-radius:.75rem!important; }

    /* All page-level actions are consolidated into one native-style speed dial. */
    .bt-mobile-action-hub {
        position:fixed!important;
        right:max(1rem,env(safe-area-inset-right))!important;
        bottom:calc(1rem + env(safe-area-inset-bottom))!important;
        z-index:1042!important;
        display:flex!important;
        flex-direction:column;
        align-items:flex-end;
        gap:.7rem;
        pointer-events:none;
    }
    .bt-mobile-action-trigger {
        display:inline-flex!important;
        align-items:center!important;
        justify-content:center!important;
        width:3.35rem!important;
        min-width:3.35rem!important;
        max-width:3.35rem!important;
        height:3.35rem!important;
        min-height:3.35rem!important;
        padding:0!important;
        border:0!important;
        border-radius:1.05rem!important;
        color:#fff!important;
        background:linear-gradient(145deg,var(--bt-primary),var(--bt-primary-hover))!important;
        box-shadow:0 14px 30px rgba(4,36,61,.28),0 4px 10px rgba(4,36,61,.18)!important;
        font-size:1.15rem!important;
        transform:none!important;
        transition:transform .24s cubic-bezier(.2,.8,.2,1),box-shadow .24s ease!important;
        pointer-events:auto;
    }
    .bt-mobile-action-trigger i { margin:0!important;line-height:1!important;transition:transform .24s ease; }
    .bt-mobile-action-hub.is-open .bt-mobile-action-trigger i { transform:rotate(45deg); }
    .bt-mobile-action-trigger:active { transform:scale(.94)!important;box-shadow:0 8px 18px rgba(4,36,61,.24)!important; }
    .bt-mobile-action-menu {
        display:flex;
        flex-direction:column;
        align-items:flex-end;
        gap:.5rem;
        max-width:min(19rem,calc(100vw - 2rem));
        opacity:0;
        visibility:hidden;
        transform:translateY(.75rem) scale(.96);
        transform-origin:bottom right;
        transition:opacity .2s ease,transform .24s cubic-bezier(.2,.8,.2,1),visibility .2s;
        pointer-events:none;
    }
    .bt-mobile-action-hub.is-open .bt-mobile-action-menu { opacity:1;visibility:visible;transform:none;pointer-events:auto; }
    .bt-mobile-action-menu .bt-mobile-action-item {
        display:inline-flex!important;
        width:auto!important;
        min-width:0!important;
        min-height:2.9rem!important;
        padding:.65rem .9rem!important;
        border:0!important;
        border-radius:.85rem!important;
        color:#fff!important;
        background:linear-gradient(145deg,var(--bt-primary),var(--bt-primary-hover))!important;
        box-shadow:0 10px 28px rgba(4,36,61,.2)!important;
        font-size:.82rem!important;
        font-weight:750!important;
        white-space:nowrap;
        pointer-events:auto;
    }
    .bt-mobile-action-menu .bt-mobile-action-item i { margin-right:.35rem!important;color:#fff!important;font-size:1rem!important; }
    .bt-mobile-action-menu .bt-mobile-action-item .bt-mobile-only-label { display:inline!important; }
    .bt-mobile-action-menu .bt-mobile-action-item.btn-primary,
    .bt-mobile-action-menu .bt-mobile-action-item.btn-success,
    .bt-mobile-action-menu .bt-mobile-action-item.btn-danger { color:#fff!important;background:var(--bt-primary)!important; }
    .bt-mobile-action-dropdown {
        position:relative;
        display:flex;
        justify-content:flex-end;
        width:max-content;
        max-width:calc(100vw - 2rem);
        pointer-events:auto;
    }
    .bt-mobile-action-dropdown > .dropdown-menu {
        z-index:1065!important;
        min-width:13rem;
        max-width:calc(100vw - 2rem);
        max-height:min(22rem,65dvh);
        overflow-y:auto;
    }
    .bt-mobile-action-dropdown > .dropdown-menu .dropdown-item {
        min-height:2.75rem;
        display:flex;
        align-items:center;
        gap:.45rem;
    }

    .app-card,.stat-card,.chart-card,[class$="-panel"],[class*="-panel "] { border-radius:var(--bt-mobile-radius)!important; }
    .app-card-header { min-height:3.5rem;padding:.78rem .9rem; }
    .app-card-body { padding:.9rem; }
    .app-card-footer { padding:.7rem .9rem; }
    .app-card-title { font-size:.9rem; }

    /* Helpful/instruction content follows the primary content on mobile. */
    .row:has(> [class*="col-"] .info-tile),
    .row:has(> [class*="col-"] .alert),
    .row:has(> [class*="col-"] [class*="instruction"]),
    .row:has(> [class*="col-"] [class*="help-"]) { display:flex;flex-direction:column; }
    .row > [class*="col-"]:has(.info-tile),
    .row > [class*="col-"]:has(.alert),
    .row > [class*="col-"]:has([class*="instruction"]),
    .row > [class*="col-"]:has([class*="help-"]) { order:20; }
    .alert,.info-tile,[class*="instruction-panel"],[class*="help-panel"] { padding:.8rem .9rem;border:0!important;border-radius:.9rem!important;box-shadow:0 7px 20px rgba(15,35,60,.08)!important;font-size:.8rem; }

    /* Filters behave as a compact launcher + bottom sheet. */
    .bt-mobile-filter-toggle {
        position:relative;
        display:flex;
        align-items:center;
        justify-content:center;
        gap:.45rem;
        width:max-content;
        min-width:6.5rem;
        min-height:2.75rem;
        margin:0 0 .65rem auto;
        padding:.55rem .8rem;
        border:1px solid rgba(113,128,150,.18);
        border-radius:.8rem;
        color:var(--bt-ink);
        background:#fff;
        box-shadow:0 5px 15px rgba(15,35,60,.075);
        font-size:.8rem;
        font-weight:750;
        -webkit-tap-highlight-color:transparent;
        transition:transform .18s ease,box-shadow .18s ease;
    }
    .bt-mobile-filter-toggle::after { content:none; }
    .bt-mobile-filter-toggle:active { transform:scale(.96);color:var(--bt-primary);background:var(--bt-primary-light,#eaf3fa);box-shadow:0 3px 9px rgba(15,35,60,.09); }
    .bt-mobile-filter-toggle>i:first-child { color:var(--bt-primary);font-size:.9rem; }
    .bt-mobile-filter-toggle-label { line-height:1; }
    .bt-mobile-filter-toggle .bt-mobile-filter-count { min-width:1.45rem;height:1.45rem;padding:0 .4rem;border:0;box-shadow:none;font-size:.67rem; }
    .bt-mobile-filter-chevron { color:var(--bt-ink-muted);font-size:.82rem;transition:transform .22s ease; }
    .bt-mobile-filter-toggle[aria-expanded="true"] .bt-mobile-filter-chevron { transform:rotate(180deg); }
    .bt-mobile-filter-toggle.has-active-filters { border-color:rgba(4,36,61,.18);color:#fff;background:var(--bt-primary);box-shadow:0 7px 18px rgba(4,36,61,.18); }
    .bt-mobile-filter-toggle.has-active-filters>i { color:#fff; }
    .bt-mobile-filter-panel.is-open {
        display:block!important;
        position:fixed!important;
        inset:auto 0 0!important;
        z-index:1085!important;
        width:100%!important;
        max-height:82dvh;
        margin:0!important;
        padding:.55rem var(--bt-mobile-gutter) calc(1rem + env(safe-area-inset-bottom))!important;
        overflow-y:auto!important;
        border:0!important;
        border-radius:1.25rem 1.25rem 0 0!important;
        background:#fff!important;
        box-shadow:0 -18px 55px rgba(15,35,60,.22)!important;
        animation:bt-mobile-sheet-in 280ms cubic-bezier(.16,1,.3,1);
    }
    body.bt-filter-sheet-open { overflow:hidden!important; }
    body:not(.bt-filter-sheet-open) > .bt-mobile-filter-backdrop { display:none!important;pointer-events:none!important; }
    .bt-mobile-filter-backdrop { position:fixed;inset:0;z-index:1080;width:100%;height:100%;padding:0;border:0;background:rgba(10,24,38,.42);backdrop-filter:blur(3px);animation:bt-filter-backdrop-in 180ms ease-out; }
    .bt-mobile-filter-backdrop { display:block!important; }
    .bt-mobile-filter-sheet-head { position:sticky;top:-.55rem;z-index:3;display:flex!important;align-items:center;justify-content:space-between;gap:.75rem;margin:0 calc(var(--bt-mobile-gutter) * -1) .9rem;padding:.75rem var(--bt-mobile-gutter) .8rem;border-bottom:0;background:#fff;box-shadow:0 8px 18px rgba(15,35,60,.055); }
    .bt-mobile-filter-sheet-head::before { content:'';position:absolute;top:.05rem;left:50%;width:2.6rem;height:.28rem;border-radius:999px;background:#cbd5e1;transform:translateX(-50%); }
    .bt-mobile-filter-sheet-title { display:flex;align-items:center;gap:.65rem;padding-top:.25rem; }
    .bt-mobile-filter-sheet-title>span:last-child { display:flex;flex-direction:column;gap:.08rem; }
    .bt-mobile-filter-sheet-title strong { color:var(--bt-ink);font-size:.9rem;font-weight:800;line-height:1.2; }
    .bt-mobile-filter-sheet-title small { color:var(--bt-ink-muted);font-size:.67rem;line-height:1.25; }
    .bt-mobile-filter-sheet-icon { display:grid;place-items:center;width:2.35rem;height:2.35rem;border-radius:.72rem;color:var(--bt-primary);background:var(--bt-primary-light,#eaf3fa);font-size:.95rem; }
    .bt-mobile-filter-sheet-actions { display:flex;align-items:center;gap:.4rem;margin-top:.15rem; }
    .bt-mobile-filter-reset { display:inline-flex;align-items:center;justify-content:center;gap:.35rem;min-height:2.5rem;padding:0 .7rem;border:0;border-radius:.75rem;color:var(--bt-primary);background:var(--bt-primary-light,#eaf3fa);box-shadow:0 3px 10px rgba(15,35,60,.1);font-size:.72rem;font-weight:750;line-height:1; }
    .bt-mobile-filter-reset:active { transform:scale(.96);box-shadow:0 2px 6px rgba(15,35,60,.09); }
    .bt-mobile-filter-close { display:grid;place-items:center;flex:0 0 2.5rem;width:2.5rem;height:2.5rem;margin-top:.15rem;padding:0;border:0;border-radius:.75rem;color:var(--bt-ink-muted);background:var(--bt-surface-2); }
    .bt-mobile-filter-close:active { color:var(--bt-primary);background:var(--bt-primary-light);transform:scale(.96); }
    .bt-mobile-filter-panel .app-card-body { padding:.35rem 0; }
    .bt-mobile-filter-panel:is(form,.filter-bar,[role="search"]),.bt-mobile-filter-panel form,.bt-mobile-filter-panel .filter-bar,.bt-mobile-filter-panel .bt-filter-form,.bt-mobile-filter-panel[role="search"] { display:grid!important;grid-template-columns:1fr!important;gap:.65rem!important; }
    .bt-mobile-filter-panel:is(form,.filter-bar,[role="search"]) > *:not(.bt-mobile-filter-sheet-head),.bt-mobile-filter-panel form > *,.bt-mobile-filter-panel .filter-bar > *,.bt-mobile-filter-panel .bt-filter-form > *,.bt-mobile-filter-panel[role="search"] > *:not(.bt-mobile-filter-sheet-head) { width:100%!important;max-width:100%!important; }
    .bt-mobile-filter-panel .d-flex { display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr));gap:.55rem!important;width:100%; }
    .bt-mobile-filter-panel>.btn,.bt-mobile-filter-panel>a.btn,.bt-mobile-filter-panel>button.btn { width:100%!important; }
    .bt-mobile-filter-panel .col-auto,.bt-mobile-filter-panel [class*="filter-actions"] { display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr));align-items:center;gap:.55rem!important; }
    .bt-mobile-filter-panel .form-label { margin-bottom:.32rem;color:var(--bt-ink-muted);font-size:.66rem;font-weight:800;letter-spacing:.045em;text-transform:uppercase; }
    .bt-mobile-filter-panel .form-control,.bt-mobile-filter-panel .form-select,.bt-mobile-filter-panel .bootstrap-select>.dropdown-toggle { min-height:3rem!important;border-color:#d6e0eb!important;border-radius:.8rem!important;background-color:#fff!important;box-shadow:0 3px 10px rgba(15,35,60,.045)!important;font-size:.84rem!important; }
    .bt-mobile-filter-panel .btn { min-height:3rem!important;border-radius:.8rem!important; }
    .bt-mobile-filter-panel .bt-mobile-filter-original-reset { display:none!important; }
    @keyframes bt-mobile-sheet-in { from{opacity:0;transform:translateY(35%)} to{opacity:1;transform:translateY(0)} }
    @keyframes bt-filter-backdrop-in { from{opacity:0} to{opacity:1} }

    /* Every app table becomes a compact stack of native record cards. */
    .app-card:has(table.app-table.bt-mobile-card-table),.app-card.bt-mobile-table-card {
        overflow:visible!important;
        border:0!important;
        border-radius:0!important;
        background:transparent!important;
        box-shadow:none!important;
        transform:none!important;
    }
    .app-card:has(table.app-table.bt-mobile-card-table):hover,.app-card.bt-mobile-table-card:hover {
        box-shadow:none!important;
        transform:none!important;
    }
    .app-card:has(table.app-table.bt-mobile-card-table) > .app-card-header,.app-card.bt-mobile-table-card > .app-card-header {
        display:flex!important;
        align-items:center!important;
        justify-content:space-between!important;
        gap:.65rem!important;
        width:100%!important;
        min-height:3.4rem;
        margin-bottom:.35rem;
        padding:.8rem .9rem!important;
        border:0!important;
        border-radius:.9rem!important;
        background:#fff!important;
        box-shadow:0 7px 20px rgba(15,35,60,.085)!important;
    }
    .app-card.bt-mobile-table-card > .app-card-header .app-card-title { display:flex;align-items:center;min-width:0;margin:0;font-size:.88rem;line-height:1.25; }
    .app-card.bt-mobile-table-card > .app-card-header .app-card-title i { flex:0 0 auto; }
    .app-card.bt-mobile-table-card > .app-card-header .badge,.app-card.bt-mobile-table-card > .app-card-header>[class*="count"] { flex:0 0 auto;margin-left:auto; }
    .app-card:has(table.app-table.bt-mobile-card-table) > .app-card-footer {
        margin-top:.7rem;
        border:0!important;
        border-radius:.9rem!important;
        background:#fff!important;
        box-shadow:0 7px 20px rgba(15,35,60,.075)!important;
    }
    .app-table-wrap,.app-table-wrap.has-datatable { padding:.7rem!important;overflow:visible!important;background:transparent; }
    .app-card:has(table.app-table.bt-mobile-card-table) > .app-table-wrap,
    .app-card:has(table.app-table.bt-mobile-card-table) > .app-table-wrap.has-datatable,
    .app-card.bt-mobile-table-card > .app-table-wrap,
    .app-card.bt-mobile-table-card > .app-table-wrap.has-datatable { padding:0!important; }
    .bt-mobile-quick-actions { display:none!important; }
    .app-card:has(table.app-table.bt-mobile-card-table) .dataTables_wrapper { padding:0!important;background:transparent!important;box-shadow:none!important; }
    .app-card:has(table.app-table.bt-mobile-card-table) .dataTables_wrapper > .row { margin-inline:0!important; }
    /* DataTables leaves its desktop length/search row in the layout after those
       controls are hidden on mobile. Remove that empty row so the first record
       starts directly below the filter launcher on every card-transformed table. */
    .app-card:has(table.app-table.bt-mobile-card-table) .dataTables_wrapper > .row:first-child,
    .app-card.bt-mobile-table-card .dataTables_wrapper > .row:first-child {
        display:none!important;
        height:0!important;
        margin:0!important;
        padding:0!important;
    }
    .app-table-wrap.has-datatable .dataTables_scroll { border:0!important;box-shadow:none!important;overflow:visible!important;background:transparent!important; }
    .app-table-wrap.has-datatable .dataTables_scrollHead { display:none!important; }
    .app-table-wrap.has-datatable .dataTables_scrollBody { max-height:none!important;overflow:visible!important; }
    table.app-table.bt-mobile-card-table { display:block!important;width:100%!important;min-width:0!important;border:0!important;background:transparent!important; }
    table.app-table.bt-mobile-card-table thead,table.app-table.bt-mobile-card-table tfoot { display:none!important; }
    table.app-table.bt-mobile-card-table tbody { display:grid!important;gap:.7rem;width:100%; }
    table.app-table.bt-mobile-card-table tbody tr:not(.bt-mobile-empty-row) {
        position:relative;
        display:flex!important;
        flex-direction:column;
        gap:.58rem;
        width:100%!important;
        padding:.9rem;
        border:0!important;
        border-radius:.95rem;
        background:#fff;
        box-shadow:0 8px 22px rgba(15,35,60,.105);
    }
    table.app-table.bt-mobile-card-table tbody td { display:block!important;position:static!important;width:auto!important;min-width:0!important;padding:0!important;border:0!important;background:transparent!important;box-shadow:none!important;white-space:normal!important; }
    table.app-table.bt-mobile-card-table tbody td:not(.bt-mobile-action-cell):not(.bt-mobile-row-toggle-cell) { padding-right:3.15rem!important;color:var(--bt-ink);font-size:.82rem;line-height:1.38;overflow-wrap:anywhere; }
    table.app-table.bt-mobile-card-table tbody td:not(.bt-mobile-action-cell):not(.bt-mobile-row-toggle-cell)::before { content:attr(data-mobile-label);display:block;margin-bottom:.18rem;color:#718096;font-size:.6rem;font-weight:800;line-height:1.2;letter-spacing:.06em;text-transform:uppercase; }
    table.app-table.bt-mobile-card-table tbody td:nth-child(1) { font-size:.9rem;font-weight:760;color:var(--bt-ink); }
    table.app-table.bt-mobile-card-table .code-badge {
        display:inline-flex!important;
        align-items:center;
        justify-content:center;
        min-height:1.65rem;
        padding:.3rem .58rem!important;
        line-height:1.15!important;
        vertical-align:middle;
        overflow:visible;
    }
    table.app-table.bt-mobile-card-table .status-chip,
    table.app-table.bt-mobile-card-table .priority-badge,
    table.app-table.bt-mobile-card-table .type-badge {
        display:inline-flex;
        align-items:center;
        min-height:1.55rem;
        line-height:1.2!important;
        vertical-align:middle;
    }
    table.app-table.bt-mobile-card-table tbody td:nth-child(2),table.app-table.bt-mobile-card-table tbody td:nth-child(3) { color:var(--bt-ink-muted); }
    table.app-table.bt-mobile-card-table .bt-mobile-action-cell { position:absolute!important;top:.8rem;right:.8rem;z-index:2;padding:0!important; }
    table.app-table.bt-mobile-card-table .bt-mobile-action-cell > .d-flex,table.app-table.bt-mobile-card-table .bt-mobile-action-cell .action-buttons { display:flex!important;justify-content:flex-end;gap:.3rem;flex-wrap:wrap;max-width:6rem; }
    table.app-table.bt-mobile-card-table .bt-mobile-icon-action { display:inline-flex!important;align-items:center!important;justify-content:center!important;flex:0 0 2.5rem!important;width:2.5rem!important;min-width:2.5rem!important;max-width:2.5rem!important;height:2.5rem!important;min-height:2.5rem!important;padding:0!important;border-radius:.75rem!important;overflow:hidden!important;font-size:0!important; }
    table.app-table.bt-mobile-card-table .bt-mobile-action-cell .dropdown-toggle::after,
    table.app-table.bt-mobile-card-table .bt-mobile-icon-action.dropdown-toggle::after { display:none!important;content:none!important; }
    table.app-table.bt-mobile-card-table .bt-mobile-icon-action i { margin:0!important;font-size:.92rem!important;line-height:1!important; }
    table.app-table.bt-mobile-card-table .bt-mobile-action-text { display:none!important; }
    table.app-table.bt-mobile-card-table .bt-mobile-redundant-open-action { display:none!important; }
    table.app-table.bt-mobile-card-table .bt-mobile-redundant-detail-action { display:none!important; }
    table.app-table.bt-mobile-card-table .bt-mobile-secondary-cell { display:none!important; }
    table.app-table.bt-mobile-card-table tr.is-mobile-expanded .bt-mobile-secondary-cell { display:block!important; }
    table.app-table.bt-mobile-card-table .bt-mobile-row-toggle-cell { position:static!important;inset:auto!important;z-index:1!important;display:block!important;order:99;clear:both;width:100%!important;margin-top:.15rem;padding-top:.45rem!important;border-top:1px solid var(--bt-border-soft)!important; }
    .bt-mobile-row-toggle { position:relative;display:flex;align-items:center;justify-content:flex-start;gap:.35rem;width:100%;min-height:2rem;padding:.3rem 0;border:0;background:transparent;color:var(--bt-primary);font-size:.7rem;font-weight:750; }
    .bt-mobile-row-toggle i { flex:0 0 auto;margin-right:.1rem;line-height:1; }
    table.app-table.bt-mobile-card-table .bt-mobile-empty-row { display:block!important;padding:1.2rem;border-radius:.95rem;background:#fff;box-shadow:0 8px 22px rgba(15,35,60,.08); }
    table.app-table.bt-mobile-card-table .bt-mobile-empty-row td { display:block!important;padding:0!important;border:0!important;text-align:center; }
    .dataTables_wrapper .dataTables_length { display:none; }
    .dataTables_wrapper > .row:last-child { margin-top:.7rem!important;padding:.8rem .65rem!important;border-radius:.9rem!important;background:#fff!important;box-shadow:0 7px 20px rgba(15,35,60,.075)!important; }
    .dataTables_wrapper .dataTables_info { padding:.4rem 0!important;font-size:.7rem;text-align:center!important; }
    .dataTables_wrapper .dataTables_paginate { display:flex;justify-content:center;overflow:visible; }
    .dataTables_wrapper .pagination { justify-content:center!important;gap:.35rem; }
    .dataTables_wrapper .page-link { min-width:2.5rem;min-height:2.5rem;border:0;border-radius:.75rem!important;box-shadow:0 4px 12px rgba(15,35,60,.08); }
    #timesheetsTable.bt-mobile-card-table .bt-mobile-action-cell { top:.75rem!important;right:.75rem!important; }
    #timesheetsTable.bt-mobile-card-table .bt-mobile-action-cell > .d-flex { max-width:none!important;flex-wrap:nowrap!important; }
    #timesheetsTable.bt-mobile-card-table .bt-mobile-row-toggle-cell { position:static!important;z-index:1;margin-top:.15rem; }
}

@media (max-width: 380px) {
    .mobile-topbar { padding-inline:.55rem; }
    .mobile-icon-btn { flex-basis:2.35rem;width:2.35rem;height:2.35rem; }
    .mobile-logo-img { max-width:7.25rem; }
    .page-header-right,.page-header-right > .d-flex { grid-template-columns:1fr; }
}

body.is-board-page :where(
    .dashboard-analytics-group,
    .workspace-analytics-group,
    .card,
    .backlog-section,
    .subscription-limits,
    [class$="-card"],
    [class*="-card "],
    [class$="-panel"],
    [class*="-panel "]
):hover {
    border: 0 !important;
    box-shadow: 0 20px 44px rgba(15, 35, 60, .17), 0 6px 14px rgba(15, 35, 60, .09) !important;
    transform: translateY(-3px);
}

[data-theme="dark"] body.is-board-page :where(
    .dashboard-analytics-group,
    .workspace-analytics-group,
    .card,
    .backlog-section,
    .subscription-limits,
    [class$="-card"],
    [class*="-card "],
    [class$="-panel"],
    [class*="-panel "]
):hover {
    box-shadow: 0 22px 48px rgba(0, 0, 0, .48), 0 7px 16px rgba(0, 0, 0, .32) !important;
}

@media (prefers-reduced-motion: reduce) {
    :where(
        .dashboard-analytics-group,
        .workspace-analytics-group,
        .card,
        .backlog-section,
        .subscription-limits,
        [class$="-card"],
        [class*="-card "],
        [class$="-panel"],
        [class*="-panel "]
    ) {
        transition: none !important;
        will-change: auto;
    }
    :where(
        .dashboard-analytics-group,
        .workspace-analytics-group,
        .card,
        .backlog-section,
        .subscription-limits,
        [class$="-card"],
        [class*="-card "],
        [class$="-panel"],
        [class*="-panel "]
    ):hover {
        transform: none;
    }
}

/* Compact analytics remain scannable as two cards per row on phones. */
@media (max-width: 767.98px) {
    .stats-grid,
    .stats-grid-compact,
    .timesheet-summary-grid,
    .attendance-summary-grid,
    .workspace-metric-grid,
    .attendance-metric-grid,
    .admin-kpi-mini {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: .65rem !important;
    }
    .stats-grid .stat-card,
    .timesheet-summary-grid .stat-card,
    .attendance-summary-grid .stat-card {
        flex: none !important;
        width: 100% !important;
        min-width: 0 !important;
        padding: .75rem !important;
    }
    .stats-grid .stat-label,
    .timesheet-summary-grid .stat-label,
    .attendance-summary-grid .stat-label {
        gap: .28rem !important;
        font-size: clamp(.52rem, 2.35vw, .62rem) !important;
        line-height: 1.25 !important;
        letter-spacing: .025em !important;
        white-space: normal !important;
        overflow-wrap: anywhere;
    }
    .stats-grid .stat-label i,
    .timesheet-summary-grid .stat-label i,
    .attendance-summary-grid .stat-label i {
        flex: 0 0 1.45rem;
        width: 1.45rem !important;
        height: 1.45rem !important;
    }
    .stats-grid .stat-value,
    .timesheet-summary-grid .stat-value,
    .attendance-summary-grid .stat-value {
        min-width: 0;
        font-size: clamp(1.05rem, 5.5vw, 1.3rem) !important;
        line-height: 1.15 !important;
    }
    .timesheet-summary-grid .stat-value-period,
    .attendance-summary-grid .stat-value-period {
        font-size: clamp(.64rem, 3vw, .78rem) !important;
        line-height: 1.3 !important;
        white-space: normal !important;
        overflow-wrap: anywhere;
    }
}

@media (max-width: 359.98px) {
    .stats-grid,
    .stats-grid-compact,
    .timesheet-summary-grid,
    .attendance-summary-grid,
    .epic-stats-grid {
        gap: .5rem !important;
    }
    .stats-grid .stat-card,
    .timesheet-summary-grid .stat-card,
    .attendance-summary-grid .stat-card,
    .epic-stats-grid .stat-card {
        padding: .65rem !important;
    }
}

/* Keep labels, icons, and actions optically centered across every module. */
.btn,
button.btn,
a.btn {
    align-items: center !important;
    vertical-align: middle;
    line-height: 1.2;
}
.btn > i,
.btn > svg,
.btn > span,
.app-card-title > i,
.app-card-title > svg,
.app-card-title > span {
    align-self: center;
}
.btn > i,
.app-card-title > i {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    line-height: 1 !important;
}
.app-card-header {
    align-items: center;
}
.app-card-header > .btn,
.app-card-header > a.btn,
.app-card-header > button.btn,
.app-card-header > form,
.app-card-header > .dropdown {
    align-self: center;
}
.app-card-title {
    align-items: center !important;
    min-height: 2rem;
    line-height: 1.2 !important;
}

@media (max-width: 767.98px) {
    .app-card-header {
        align-items: center !important;
    }
    .app-card-header .panel-action-link {
        min-height: 2.65rem !important;
        padding: .55rem .8rem !important;
    }
}

/* Uniform mobile bottom sheets for Bootstrap modals across app modules. */
@media (max-width: 767.98px) {
    html:has(body.modal-open),
    body.modal-open {
        overflow: hidden !important;
        padding-right: 0 !important;
    }
    body.modal-open .workspace-topbar,
    body.modal-open .mobile-topbar {
        padding-right: inherit !important;
    }
    .modal {
        padding: 0 !important;
        overflow: hidden !important;
    }
    .modal .modal-dialog,
    .modal .modal-dialog-centered,
    .modal .modal-dialog-scrollable,
    .modal .modal-dialog.modal-fullscreen-sm-down {
        display: flex !important;
        align-items: flex-end !important;
        width: 100% !important;
        max-width: none !important;
        min-height: 100% !important;
        height: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    .modal.fade .modal-dialog {
        transform: translate3d(0, 100%, 0) !important;
        transition: transform .24s ease-out !important;
    }
    .modal.show .modal-dialog {
        transform: translate3d(0, 0, 0) !important;
    }
    .modal .modal-content,
    .modal .modal-dialog-scrollable .modal-content,
    .modal .modal-dialog.modal-fullscreen-sm-down .modal-content {
        width: 100% !important;
        max-width: none !important;
        max-height: 92dvh !important;
        height: auto !important;
        margin: 0 !important;
        border-right: 0 !important;
        border-bottom: 0 !important;
        border-left: 0 !important;
        border-radius: 1.15rem 1.15rem 0 0 !important;
        overflow: hidden !important;
        box-shadow: 0 -16px 42px rgba(15, 35, 60, .22) !important;
    }
    .modal .modal-header {
        flex: 0 0 auto;
        padding: 1rem !important;
    }
    .modal .modal-body {
        min-height: 0;
        padding: 1rem !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        overscroll-behavior: contain;
    }
    .modal .modal-footer {
        flex: 0 0 auto;
        padding: .75rem 1rem calc(.75rem + env(safe-area-inset-bottom)) !important;
        background: var(--bt-surface) !important;
    }
    .swal2-container {
        align-items: flex-end !important;
        padding: 0 !important;
    }
    .swal2-container .swal2-popup {
        width: 100% !important;
        max-width: none !important;
        margin: 0 !important;
        padding-bottom: calc(1.25rem + env(safe-area-inset-bottom)) !important;
        border-radius: 1.15rem 1.15rem 0 0 !important;
    }

    /* Every table-card expander keeps both its icon and descriptive label. */
    table.app-table.bt-mobile-card-table .bt-mobile-row-toggle-cell {
        display: block !important;
        box-sizing: border-box !important;
        width: 100% !important;
        min-width: 100% !important;
        max-width: 100% !important;
        padding-top: .45rem !important;
        overflow: visible !important;
        text-overflow: clip !important;
        white-space: normal !important;
    }
    table.app-table.bt-mobile-card-table .bt-mobile-row-toggle {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: flex-start !important;
        gap: .4rem !important;
        width: 100% !important;
        min-height: 2.25rem !important;
        padding: .35rem 0 !important;
        color: var(--bt-primary) !important;
        font-size: .74rem !important;
        font-weight: 750 !important;
        line-height: 1.2 !important;
    }
    table.app-table.bt-mobile-card-table .bt-mobile-row-toggle > i {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        flex: 0 0 1rem !important;
        width: 1rem !important;
        height: 1rem !important;
        margin: 0 !important;
        font-size: .8rem !important;
    }
    table.app-table.bt-mobile-card-table .bt-mobile-row-toggle > span {
        display: inline !important;
        flex: 0 0 auto !important;
        visibility: visible !important;
        width: auto !important;
        min-width: max-content !important;
        max-width: none !important;
        height: auto !important;
        margin: 0 !important;
        overflow: visible !important;
        opacity: 1 !important;
        color: inherit !important;
        font: inherit !important;
        white-space: nowrap !important;
    }
}

/* Final button override: module-specific styles may change color, never restore borders. */
html body .btn,
html body button.btn,
html body a.btn,
html body .bootstrap-select > .dropdown-toggle {
    border: 0 !important;
    box-shadow: 0 3px 10px rgba(15, 35, 60, .14) !important;
}
html body .btn:not(:disabled):hover,
html body button.btn:not(:disabled):hover,
html body a.btn:hover,
html body .bootstrap-select > .dropdown-toggle:not(:disabled):hover {
    box-shadow: 0 6px 16px rgba(15, 35, 60, .2) !important;
}
html body .btn:focus-visible,
html body button.btn:focus-visible,
html body a.btn:focus-visible,
html body .bootstrap-select > .dropdown-toggle:focus-visible {
    outline: 0 !important;
    box-shadow: 0 0 0 .2rem rgba(4, 36, 61, .16), 0 5px 14px rgba(15, 35, 60, .18) !important;
}
html body .btn:not(:disabled):active,
html body button.btn:not(:disabled):active,
html body a.btn:active {
    box-shadow: 0 2px 6px rgba(15, 35, 60, .13) !important;
}

/* One consistent disclosure control for every mobile table card. */
@media (max-width: 767.98px) {
    html body table.app-table.bt-mobile-card-table .bt-mobile-row-toggle-cell {
        display: block !important;
        box-sizing: border-box !important;
        width: 100% !important;
        min-width: 100% !important;
        max-width: 100% !important;
        margin: .45rem 0 0 !important;
        padding: .55rem 0 0 !important;
        border-top: 1px solid var(--bt-border-soft) !important;
    }
    html body table.app-table.bt-mobile-card-table .bt-mobile-row-toggle {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: .45rem !important;
        box-sizing: border-box !important;
        width: 100% !important;
        min-width: 100% !important;
        max-width: 100% !important;
        min-height: 2.5rem !important;
        margin: 0 !important;
        padding: .55rem .8rem !important;
        border: 0 !important;
        border-radius: .7rem !important;
        background: var(--bt-surface-2) !important;
        color: var(--bt-primary) !important;
        box-shadow: 0 3px 10px rgba(15, 35, 60, .08) !important;
        font-size: .76rem !important;
        font-weight: 750 !important;
        line-height: 1 !important;
        white-space: nowrap !important;
    }
    html body table.app-table.bt-mobile-card-table .bt-mobile-row-toggle > i,
    html body table.app-table.bt-mobile-card-table .bt-mobile-row-toggle > span {
        display: inline-flex !important;
        align-items: center !important;
        flex: 0 0 auto !important;
        width: auto !important;
        min-width: 0 !important;
        max-width: none !important;
        margin: 0 !important;
        overflow: visible !important;
        opacity: 1 !important;
        visibility: visible !important;
        color: inherit !important;
        font: inherit !important;
        white-space: nowrap !important;
    }
    html body table.app-table.bt-mobile-card-table .bt-mobile-redundant-detail-action,
    html body table.app-table.bt-mobile-card-table .bt-mobile-redundant-open-action {
        display: none !important;
    }
}
/* Modern single date/time picker used by reminder forms. */
.js-modern-datetime{padding-right:2.6rem!important;background-image:none!important;cursor:pointer}.daterangepicker{z-index:11050!important;border:1px solid var(--bt-border,#dbe3ed)!important;border-radius:1rem!important;background:var(--bt-surface,#fff)!important;box-shadow:0 22px 55px rgba(15,23,42,.22)!important;font-family:var(--bt-font)!important;overflow:hidden}.daterangepicker:before,.daterangepicker:after{display:none!important}.daterangepicker .calendar-table{border:0!important;background:transparent!important}.daterangepicker .calendar-table th{height:2rem;color:var(--bt-ink-muted,#64748b);font-size:.72rem;font-weight:800}.daterangepicker .calendar-table td{width:2.25rem;height:2.25rem;border-radius:.6rem!important;color:var(--bt-ink,#172b4d);font-size:.78rem}.daterangepicker td.available:hover,.daterangepicker th.available:hover{background:var(--bt-surface-2,#f5f7fa)!important}.daterangepicker td.active,.daterangepicker td.active:hover{background:var(--bt-primary,#062b45)!important;color:#fff!important}.daterangepicker td.off{color:var(--bt-ink-subtle,#b6c2cf)!important;background:transparent!important}.daterangepicker .drp-calendar{padding:1rem!important}.daterangepicker .calendar-time{display:flex;align-items:center;gap:.4rem;margin:.75rem 0 0!important;padding:.7rem;border-radius:.7rem;background:var(--bt-surface-2,#f5f7fa)}.daterangepicker .calendar-time select{height:2rem;border:1px solid var(--bt-border,#dbe3ed);border-radius:.45rem;background:var(--bt-surface,#fff);color:var(--bt-ink,#172b4d)}.daterangepicker .drp-buttons{display:flex!important;align-items:center;justify-content:flex-end;gap:.5rem;padding:.75rem 1rem!important;border-top:1px solid var(--bt-border-soft,#edf1f5)!important}.daterangepicker .drp-buttons .btn{margin:0!important;border-radius:.55rem!important;font-size:.76rem!important}.daterangepicker .applyBtn{border-color:var(--bt-primary,#062b45)!important;background:var(--bt-primary,#062b45)!important;color:#fff!important}.daterangepicker .cancelBtn{border-color:var(--bt-border,#dbe3ed)!important;background:var(--bt-surface,#fff)!important;color:var(--bt-ink-muted,#64748b)!important}@media(max-width:575.98px){.daterangepicker{max-width:calc(100vw - 1.5rem)!important}.daterangepicker .drp-calendar{max-width:none!important}.daterangepicker .calendar-table td{width:auto}}
.js-modern-date{padding-right:2.75rem!important;background-color:var(--bt-surface,#fff)!important;background-image:linear-gradient(135deg,transparent 50%,color-mix(in srgb,var(--bt-primary,#062b45) 8%,transparent) 50%)!important;background-size:2.65rem 100%!important;background-position:right top!important;background-repeat:no-repeat!important;cursor:pointer}.js-modern-date:hover,.js-modern-datetime:hover{border-color:color-mix(in srgb,var(--bt-primary,#062b45) 42%,var(--bt-border,#dbe3ed))!important}.js-modern-date:focus,.js-modern-datetime:focus{border-color:var(--bt-primary,#062b45)!important;box-shadow:0 0 0 .22rem color-mix(in srgb,var(--bt-primary,#062b45) 13%,transparent)!important}.daterangepicker.single{min-width:310px}.daterangepicker.single .drp-calendar{width:100%;max-width:none}.daterangepicker .calendar-table{padding:0!important}.daterangepicker .calendar-table thead tr:first-child{background:linear-gradient(135deg,color-mix(in srgb,var(--bt-primary,#062b45) 10%,var(--bt-surface,#fff)),var(--bt-surface,#fff))}.daterangepicker .calendar-table thead tr:first-child th{height:2.75rem;color:var(--bt-ink,#172b4d);font-size:.85rem}.daterangepicker .calendar-table .prev span,.daterangepicker .calendar-table .next span{width:.55rem;height:.55rem;border-color:var(--bt-primary,#062b45)!important}.daterangepicker td.today:not(.active){position:relative;color:var(--bt-primary,#062b45)!important;font-weight:850}.daterangepicker td.today:not(.active):after{content:'';position:absolute;right:50%;bottom:.18rem;width:.28rem;height:.28rem;border-radius:50%;background:var(--bt-primary,#062b45);transform:translateX(50%)}.daterangepicker td.active,.daterangepicker td.active:hover{box-shadow:0 6px 14px color-mix(in srgb,var(--bt-primary,#062b45) 28%,transparent)!important}.daterangepicker .monthselect,.daterangepicker .yearselect{padding:.2rem .35rem!important;border:1px solid var(--bt-border,#dbe3ed)!important;border-radius:.45rem!important;background:var(--bt-surface,#fff)!important;color:var(--bt-ink,#172b4d)!important;font-weight:700!important}
.daterangepicker.auto-apply .drp-buttons{display:none!important}

/* Shell surfaces use shadow separation instead of hard divider borders. */
.sidebar,[data-theme="light"] .sidebar{border:0!important;box-shadow:10px 0 28px rgba(15,35,60,.10)!important}
.workspace-topbar,.mobile-topbar,[data-theme="light"] .mobile-topbar{border:0!important;box-shadow:0 9px 26px rgba(15,35,60,.10)!important}
[data-theme="dark"] .sidebar{box-shadow:12px 0 30px rgba(0,0,0,.32)!important}
[data-theme="dark"] .workspace-topbar,[data-theme="dark"] .mobile-topbar{box-shadow:0 10px 28px rgba(0,0,0,.34)!important}

/* Shared calendar affordance for every modern date field. */
.js-modern-date,.js-modern-datetime{padding-right:2.75rem!important;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath fill='%23062b45' d='M3.5 0a.5.5 0 0 1 .5.5V1h8V.5a.5.5 0 0 1 1 0V1h.5A1.5 1.5 0 0 1 15 2.5v11a1.5 1.5 0 0 1-1.5 1.5h-11A1.5 1.5 0 0 1 1 13.5v-11A1.5 1.5 0 0 1 2.5 1H3V.5a.5.5 0 0 1 .5-.5M2 5v8.5a.5.5 0 0 0 .5.5h11a.5.5 0 0 0 .5-.5V5zm.5-3a.5.5 0 0 0-.5.5V4h12V2.5a.5.5 0 0 0-.5-.5z'/%3E%3C/svg%3E"),linear-gradient(135deg,transparent 50%,color-mix(in srgb,var(--bt-primary,#062b45) 8%,transparent) 50%)!important;background-position:right .82rem center,right top!important;background-size:1rem 1rem,2.65rem 100%!important;background-repeat:no-repeat!important;cursor:pointer!important}
[data-theme="dark"] .js-modern-date,[data-theme="dark"] .js-modern-datetime{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath fill='%23dbeafe' d='M3.5 0a.5.5 0 0 1 .5.5V1h8V.5a.5.5 0 0 1 1 0V1h.5A1.5 1.5 0 0 1 15 2.5v11a1.5 1.5 0 0 1-1.5 1.5h-11A1.5 1.5 0 0 1 1 13.5v-11A1.5 1.5 0 0 1 2.5 1H3V.5a.5.5 0 0 1 .5-.5M2 5v8.5a.5.5 0 0 0 .5.5h11a.5.5 0 0 0 .5-.5V5zm.5-3a.5.5 0 0 0-.5.5V4h12V2.5a.5.5 0 0 0-.5-.5z'/%3E%3C/svg%3E"),linear-gradient(135deg,transparent 50%,rgba(255,255,255,.05) 50%)!important}
.admin-user-feature-flags {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .75rem;
    width: 100%;
    overflow: visible;
}
.admin-user-feature-flags .form-check {
    display: flex;
    align-items: center;
    gap: .6rem;
    min-width: 0;
    min-height: 3rem;
    margin: 0;
    padding: .75rem .9rem;
    border: 1px solid var(--bt-border);
    border-radius: var(--bt-radius-sm);
    background: var(--bt-surface-2);
}
.admin-user-feature-flags .form-check-input {
    flex: 0 0 auto;
    margin: 0;
}
.admin-user-feature-flags .form-check-label {
    min-width: 0;
    line-height: 1.35;
    white-space: normal;
}
@media (max-width: 575.98px) {
    .admin-user-feature-flags {
        grid-template-columns: minmax(0, 1fr);
    }
}
/* Persistent calendar reminder alarm. */
.reminder-alarm-overlay[hidden]{display:none!important}.reminder-alarm-overlay{position:fixed;z-index:12000;inset:0;display:grid;place-items:center;padding:1rem;background:radial-gradient(circle at 50% 35%,rgba(14,116,144,.25),transparent 42%),rgba(3,18,31,.82);backdrop-filter:blur(14px);animation:reminderOverlayIn .25s ease}.reminder-alarm-card{position:relative;width:min(460px,100%);overflow:hidden;padding:2.25rem 2rem 1.75rem;border:1px solid rgba(255,255,255,.18);border-radius:1.5rem;background:linear-gradient(155deg,#fff 0%,#f4f9fc 100%);box-shadow:0 35px 90px rgba(0,0,0,.38);text-align:center}.reminder-alarm-glow{position:absolute;top:-8rem;left:50%;width:19rem;height:19rem;border-radius:50%;background:radial-gradient(circle,rgba(14,165,233,.2),transparent 68%);transform:translateX(-50%);pointer-events:none}.reminder-alarm-icon{position:relative;display:grid;width:6rem;height:6rem;place-items:center;margin:0 auto 1.3rem;border-radius:50%;color:#fff;background:linear-gradient(145deg,#075985,#0e7490);box-shadow:0 16px 36px rgba(8,112,144,.3);font-size:2.35rem}.reminder-alarm-icon>i{transform-origin:50% 0;animation:reminderBell 1.1s ease-in-out infinite}.reminder-alarm-wave{position:absolute;inset:-.65rem;border:1px solid rgba(14,116,144,.28);border-radius:50%;animation:reminderWave 2s ease-out infinite}.reminder-alarm-wave.is-two{animation-delay:1s}.reminder-alarm-kicker{display:flex;align-items:center;justify-content:center;gap:.45rem;color:#0e7490;font-size:.68rem;font-weight:850;letter-spacing:.12em;text-transform:uppercase}.reminder-alarm-kicker span{width:.45rem;height:.45rem;border-radius:50%;background:#f97316;box-shadow:0 0 0 .3rem rgba(249,115,22,.12);animation:reminderPulse 1s ease-in-out infinite}.reminder-alarm-card h2{margin:.65rem 0 .55rem;color:#082f49;font-size:clamp(1.55rem,5vw,2.2rem);font-weight:850;line-height:1.15;overflow-wrap:anywhere}.reminder-alarm-notes{max-height:7rem;overflow:auto;margin:0 auto 1rem;color:#52657a;line-height:1.55}.reminder-alarm-time{display:inline-flex;align-items:center;gap:.45rem;margin-bottom:1.3rem;padding:.48rem .75rem;border-radius:999px;background:#e8f3f8;color:#075985;font-size:.78rem;font-weight:750}.reminder-alarm-ok{display:flex;width:100%;min-height:3.25rem;align-items:center;justify-content:center;gap:.5rem;border-radius:.8rem!important;font-size:.95rem;font-weight:800}.reminder-alarm-card>small{display:block;min-height:1rem;margin-top:.7rem;color:#64748b}.reminder-alarm-active{overflow:hidden}@keyframes reminderBell{0%,100%{transform:rotate(0)}15%{transform:rotate(18deg)}30%{transform:rotate(-16deg)}45%{transform:rotate(12deg)}60%{transform:rotate(-8deg)}75%{transform:rotate(4deg)}}@keyframes reminderWave{0%{opacity:.8;transform:scale(.8)}100%{opacity:0;transform:scale(1.35)}}@keyframes reminderPulse{50%{opacity:.45;transform:scale(.8)}}@keyframes reminderOverlayIn{from{opacity:0}to{opacity:1}}@media(max-width:575.98px){.reminder-alarm-card{padding:1.8rem 1.2rem 1.25rem;border-radius:1.25rem}.reminder-alarm-icon{width:5.25rem;height:5.25rem;font-size:2rem}}@media(prefers-reduced-motion:reduce){.reminder-alarm-overlay,.reminder-alarm-icon>i,.reminder-alarm-wave,.reminder-alarm-kicker span{animation:none!important}}
/* Safe rich-text display shared by tickets, comments, epics, docs and priorities. */
.bt-rich-content{max-width:100%;min-width:0;overflow-wrap:anywhere}.bt-rich-content img{display:block;width:auto;max-width:100%;height:auto;margin:.65rem 0;border:1px solid var(--bt-border-soft,#edf1f5);border-radius:.7rem;box-shadow:0 5px 16px rgba(15,23,42,.08);object-fit:contain}.bt-rich-content p:last-child,.bt-rich-content ul:last-child,.bt-rich-content ol:last-child,.bt-rich-content blockquote:last-child{margin-bottom:0}.calendar-agenda-rich{margin-top:.45rem;font-size:.76rem;color:var(--bt-ink-2)}.calendar-agenda-rich img{max-height:15rem}
/* Calendar reminder modal detached from the right calendar drawer. */
body>.calendar-reminder-form{position:fixed!important;z-index:11020!important;top:50%!important;right:auto!important;bottom:auto!important;left:50%!important;display:grid;width:min(520px,calc(100vw - 2rem))!important;max-height:calc(100dvh - 2rem)!important;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:start;gap:0 .85rem;overflow-x:hidden!important;overflow-y:auto!important;padding:1.25rem!important;border:1px solid var(--bt-border)!important;border-radius:1.1rem!important;background:var(--bt-surface)!important;box-shadow:0 28px 80px rgba(15,23,42,.34)!important;transform:translate(-50%,-50%)!important}body>.calendar-reminder-form[hidden]{display:none!important}body>.calendar-reminder-form .calendar-reminder-form-head{grid-column:1/-1;display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:.75rem;margin:0 0 1rem!important;padding:0 0 .9rem;border-bottom:1px solid var(--bt-border-soft)}body>.calendar-reminder-form .calendar-reminder-form-icon{display:grid;width:2.65rem;height:2.65rem;place-items:center;border-radius:.75rem;color:var(--bt-primary);background:var(--bt-primary-light);font-size:1.1rem}body>.calendar-reminder-form .calendar-reminder-form-head strong,body>.calendar-reminder-form .calendar-reminder-form-head small{display:block}body>.calendar-reminder-form .calendar-reminder-form-head strong{color:var(--bt-ink);font-size:1rem}body>.calendar-reminder-form .calendar-reminder-form-head small{margin-top:.15rem;color:var(--bt-ink-muted);font-size:.7rem;font-weight:500}body>.calendar-reminder-form .calendar-reminder-form-head button{display:grid;width:2.35rem;height:2.35rem;place-items:center;border:0;border-radius:.65rem;color:var(--bt-ink-muted);background:var(--bt-surface-2)}body>.calendar-reminder-form>.calendar-reminder-field{display:flex;min-width:0;align-self:stretch;flex-direction:column;margin:0 0 .8rem!important;font-size:.7rem!important}body>.calendar-reminder-form>.calendar-reminder-field.is-full,body>.calendar-reminder-form>.calendar-form-error,body>.calendar-reminder-form>button[type=submit]{grid-column:1/-1}body>.calendar-reminder-form>.calendar-reminder-field .form-control,body>.calendar-reminder-form>.calendar-reminder-field .form-select,body>.calendar-reminder-form>.calendar-reminder-field .bootstrap-select,body>.calendar-reminder-form>.calendar-reminder-field .modern-datetime-field{width:100%!important}body>.calendar-reminder-form>.calendar-reminder-field .form-control,body>.calendar-reminder-form>.calendar-reminder-field .form-select{min-height:2.65rem;margin-top:.35rem!important}body>.calendar-reminder-form>.calendar-reminder-field .bootstrap-select{margin-top:.35rem!important}body>.calendar-reminder-form>.calendar-reminder-field .bootstrap-select>.dropdown-toggle{min-height:2.65rem}body>.calendar-reminder-form textarea{min-height:5.5rem!important;resize:vertical}body>.calendar-reminder-form>button[type=submit]{min-height:2.85rem;border-radius:.7rem!important;font-weight:750}.modern-datetime-field>i{top:calc(50% + .18rem)!important;transform:translateY(-50%)!important}.daterangepicker.drop-up{margin-top:0}@media(max-width:575.98px){body>.calendar-reminder-form{top:auto!important;right:0!important;bottom:0!important;left:0!important;width:100%!important;max-height:min(88dvh,720px)!important;grid-template-columns:1fr;padding:1rem!important;border-width:1px 0 0!important;border-radius:1.15rem 1.15rem 0 0!important;transform:none!important}body>.calendar-reminder-form>.calendar-reminder-field{grid-column:1!important}.daterangepicker{max-height:calc(100dvh - 1rem)!important;overflow-x:hidden!important;overflow-y:auto!important}}
body>.calendar-reminder-form .modern-datetime-field{display:flex;align-items:stretch;margin-top:.35rem!important}body>.calendar-reminder-form .modern-datetime-field>i{display:none!important}body>.calendar-reminder-form .modern-datetime-field>.form-control{height:2.65rem!important;margin-top:0!important;padding-left:.8rem!important}body>.calendar-reminder-form .select2-container{width:100%!important;margin-top:.35rem!important}body>.calendar-reminder-form .select2-container .select2-selection--single{height:2.65rem!important;min-height:2.65rem!important;display:flex!important;align-items:center!important}body>.calendar-reminder-form .select2-container .select2-selection__rendered{width:100%;padding-top:0!important;padding-bottom:0!important;line-height:normal!important}body>.calendar-reminder-form .select2-container .select2-selection__arrow{top:50%!important;transform:translateY(-50%)}.select2-container--open{z-index:11060!important}.select2-dropdown{z-index:11060!important}body>.bs-container{z-index:11060!important}

/* Final dark-theme contrast layer. Keep Bootstrap and module-specific surfaces aligned. */
[data-theme="dark"] body{color:var(--bt-ink)!important;background:var(--bt-bg)!important;color-scheme:dark}
[data-theme="dark"] :where(.page-wrapper,.main-area,.app-card,.card,.stat-card,.chart-card,.info-tile,.modal-content,.dropdown-menu,.offcanvas,.list-group-item,.accordion-item,.toast,.popover){color:var(--bt-ink);background-color:var(--bt-surface)}
[data-theme="dark"] :where(h1,h2,h3,h4,h5,h6,strong,dt,.app-card-title,.modal-title,.dropdown-header,.table){color:var(--bt-ink)}
[data-theme="dark"] :where(.text-muted,.muted,.form-text,small,.small,dd,.dataTables_info){color:var(--bt-ink-muted)!important}
[data-theme="dark"] :where(.border,.border-top,.border-end,.border-bottom,.border-start,.card,.modal-content,.dropdown-menu,.list-group-item,.accordion-item){border-color:var(--bt-border)!important}
[data-theme="dark"] :where(.form-control,.form-select,.input-group-text,.select2-selection,.bootstrap-select>.dropdown-toggle){border-color:var(--bt-border)!important;color:var(--bt-ink)!important;background-color:var(--bt-surface-2)!important}
[data-theme="dark"] :where(.form-control,.form-select)::placeholder{color:var(--bt-ink-subtle)!important;opacity:1}
[data-theme="dark"] :where(.dropdown-item,.list-group-item-action,.page-link){color:var(--bt-ink-2);background-color:transparent}
[data-theme="dark"] :where(.dropdown-item,.list-group-item-action,.page-link):hover{color:var(--bt-ink)!important;background-color:var(--bt-surface-3)!important}
[data-theme="dark"] .page-item.active .page-link{border-color:var(--bt-primary)!important;color:#07111f!important;background:var(--bt-primary)!important}
[data-theme="dark"] .btn-outline-secondary{border-color:#607392!important;color:#e2e8f0!important;background:#263550!important;box-shadow:0 3px 10px rgba(0,0,0,.18)!important}
[data-theme="dark"] .btn-outline-secondary:hover,[data-theme="dark"] .btn-outline-secondary:focus,[data-theme="dark"] .btn-outline-secondary:active{border-color:#91a4c4!important;color:#fff!important;background:#3b4e70!important;box-shadow:0 0 0 .2rem rgba(145,164,196,.16),0 6px 16px rgba(0,0,0,.24)!important}
[data-theme="dark"] .btn-outline-secondary:disabled,[data-theme="dark"] .btn-outline-secondary.disabled{border-color:#3c4a63!important;color:#7888a5!important;background:#1c273c!important;box-shadow:none!important;opacity:.72}
[data-theme="dark"] .btn-light{border-color:var(--bt-border);color:var(--bt-ink);background:var(--bt-surface-2)}
[data-theme="dark"] .btn-light:hover,[data-theme="dark"] .btn-light:focus{border-color:var(--bt-primary);color:var(--bt-ink);background:var(--bt-surface-3)}
[data-theme="dark"] .sidebar .sidebar-brand-row{border-color:transparent!important;background:none!important;box-shadow:none!important}
[data-theme="dark"] .btn-primary{border-color:#22d3ee!important;color:#03242b!important;background:#22d3ee!important;box-shadow:0 5px 16px rgba(34,211,238,.22)!important}
[data-theme="dark"] .btn-primary:hover,[data-theme="dark"] .btn-primary:focus,[data-theme="dark"] .btn-primary:active{border-color:#67e8f9!important;color:#021b21!important;background:#67e8f9!important;box-shadow:0 0 0 .22rem rgba(34,211,238,.2),0 8px 22px rgba(34,211,238,.3)!important}
[data-theme="dark"] .btn-outline-primary{border-color:#279db1!important;color:#8cecf7!important;background:#123541!important;box-shadow:0 3px 10px rgba(0,0,0,.16)!important}
[data-theme="dark"] .btn-outline-primary:hover,[data-theme="dark"] .btn-outline-primary:focus,[data-theme="dark"] .btn-outline-primary:active{border-color:#67e8f9!important;color:#03242b!important;background:#67e8f9!important;box-shadow:0 0 0 .2rem rgba(34,211,238,.18),0 6px 16px rgba(0,0,0,.22)!important}
[data-theme="dark"] .btn-outline-primary:disabled,[data-theme="dark"] .btn-outline-primary.disabled{border-color:#315a64!important;color:#668b94!important;background:#172b32!important;box-shadow:none!important;opacity:.7}
[data-theme="dark"] .btn-outline-success{border-color:#3d9561!important;color:#86efac!important;background:#173b2a!important;box-shadow:0 3px 10px rgba(0,0,0,.16)!important}
[data-theme="dark"] .btn-outline-success:hover,[data-theme="dark"] .btn-outline-success:focus,[data-theme="dark"] .btn-outline-success:active{border-color:#86efac!important;color:#062414!important;background:#86efac!important;box-shadow:0 0 0 .2rem rgba(74,222,128,.17),0 6px 16px rgba(0,0,0,.22)!important}
[data-theme="dark"] .btn-outline-success:disabled,[data-theme="dark"] .btn-outline-success.disabled{border-color:#315b43!important;color:#668a72!important;background:#1a2d22!important;box-shadow:none!important;opacity:.7}
[data-theme="dark"] body :where(.attendance-btn-in,form[action*="attendance/clock-in"] .btn) {
    border-color:#22c55e!important;
    color:#052e16!important;
    background:#22c55e!important;
    box-shadow:0 5px 16px rgba(34,197,94,.24)!important;
}
[data-theme="dark"] body :where(.attendance-btn-in,form[action*="attendance/clock-in"] .btn):hover,
[data-theme="dark"] body :where(.attendance-btn-in,form[action*="attendance/clock-in"] .btn):focus,
[data-theme="dark"] body :where(.attendance-btn-in,form[action*="attendance/clock-in"] .btn):active {
    border-color:#86efac!important;
    color:#03240f!important;
    background:#86efac!important;
    box-shadow:0 0 0 .2rem rgba(34,197,94,.18),0 7px 18px rgba(34,197,94,.25)!important;
}
[data-theme="dark"] body :where(.attendance-btn-out,form[action*="attendance/clock-out"] .btn) {
    border-color:#f59e0b!important;
    color:#2b1700!important;
    background:#f59e0b!important;
    box-shadow:0 5px 16px rgba(245,158,11,.24)!important;
}
[data-theme="dark"] body :where(.attendance-btn-out,form[action*="attendance/clock-out"] .btn):hover,
[data-theme="dark"] body :where(.attendance-btn-out,form[action*="attendance/clock-out"] .btn):focus,
[data-theme="dark"] body :where(.attendance-btn-out,form[action*="attendance/clock-out"] .btn):active {
    border-color:#fde68a!important;
    color:#291600!important;
    background:#fde68a!important;
    box-shadow:0 0 0 .2rem rgba(245,158,11,.18),0 7px 18px rgba(245,158,11,.25)!important;
}
[data-theme="dark"] body :where(.attendance-btn-in,.attendance-btn-out,form[action*="attendance/clock-in"] .btn,form[action*="attendance/clock-out"] .btn):disabled {
    border-color:#475569!important;
    color:#94a3b8!important;
    background:#263247!important;
    box-shadow:none!important;
    opacity:.72;
}
[data-theme="dark"] :where(.btn-edit,a.btn[href*="/edit"],button.btn[title="Edit"]){border-color:#22d3ee!important;color:#03242b!important;background:#22d3ee!important}
[data-theme="dark"] :where(.btn-edit,a.btn[href*="/edit"],button.btn[title="Edit"]):hover{border-color:#67e8f9!important;color:#021b21!important;background:#67e8f9!important}
[data-theme="dark"] .app-toast{border:1px solid var(--toast-border,#36506b)!important;color:#f8fafc!important;background:var(--toast-bg,#17243a)!important;box-shadow:0 22px 55px rgba(0,0,0,.48),0 5px 16px rgba(0,0,0,.3)!important}
[data-theme="dark"] .app-toast.toast-success{--toast-bg:#102f2a;--toast-border:#257a68;--toast-accent:#5eead4}
[data-theme="dark"] .app-toast.toast-error{--toast-bg:#3a171d;--toast-border:#9f3545;--toast-accent:#fda4af}
[data-theme="dark"] .app-toast.toast-warning{--toast-bg:#352710;--toast-border:#9a6a18;--toast-accent:#fcd34d}
[data-theme="dark"] .app-toast.toast-info{--toast-bg:#122d3b;--toast-border:#197b94;--toast-accent:#67e8f9}
[data-theme="dark"] .app-toast .app-toast-icon{color:var(--toast-accent,#67e8f9)!important}
[data-theme="dark"] .app-toast .app-toast-copy>span{color:#cbd5e1!important}
[data-theme="dark"] .app-toast .app-toast-close{color:#aebdd2!important;background:rgba(255,255,255,.04)!important}
[data-theme="dark"] .app-toast .app-toast-close:hover{color:#fff!important;background:rgba(255,255,255,.12)!important}
[data-theme="dark"] .table>:not(caption)>*>*{border-bottom-color:var(--bt-border-soft);color:var(--bt-ink);background-color:transparent}
[data-theme="dark"] .table-hover>tbody>tr:hover>*{color:var(--bt-ink);background-color:var(--bt-surface-3)}

/* Dark listing surfaces: keep panel sections, table shells and converted cards consistent. */
html[data-theme="dark"] body :where(.app-card,.card,.app-panel,.filter-panel,.app-table-wrap,.table-responsive,.dataTables_wrapper,.app-card-header,.app-card-body,.app-card-footer) {
    border-color:var(--bt-border-soft)!important;
    color:var(--bt-ink)!important;
    background-color:var(--bt-surface)!important;
}
html[data-theme="dark"] body :where(.app-table,.dataTable) {
    --bs-table-color:var(--bt-ink);
    --bs-table-bg:transparent;
    --bs-table-border-color:var(--bt-border-soft);
    color:var(--bt-ink)!important;
    background-color:transparent!important;
}
html[data-theme="dark"] body :where(.app-table,.dataTable) thead :where(th,td) {
    border-color:var(--bt-border)!important;
    color:var(--bt-ink-muted)!important;
    background-color:var(--bt-surface-2)!important;
}
html[data-theme="dark"] body :where(.app-table,.dataTable) tbody :where(th,td) {
    border-color:var(--bt-border-soft)!important;
    color:var(--bt-ink)!important;
    background-color:transparent!important;
}
html[data-theme="dark"] body :where(.app-table,.dataTable) tbody tr:hover :where(th,td) {
    background-color:var(--bt-surface-3)!important;
}
html[data-theme="dark"] body :where(.app-card-title,.card-title,.panel-title,.page-title,.dataTables_info,.dataTables_length label,.dataTables_filter label) {
    color:var(--bt-ink)!important;
}

/* Credential Base contains module-local light colors, so theme every card and modal surface explicitly. */
html[data-theme="dark"] body .credential-filter-card,
html[data-theme="dark"] body .credential-card {
    border-color:var(--bt-border)!important;
    color:var(--bt-ink)!important;
    background:linear-gradient(180deg,var(--bt-surface) 0%,var(--bt-surface-2) 100%)!important;
    box-shadow:0 7px 20px rgba(0,0,0,.24)!important;
}
html[data-theme="dark"] body .credential-card:hover,
html[data-theme="dark"] body .credential-card:focus-within {
    border-color:var(--bt-primary)!important;
    box-shadow:0 12px 28px rgba(0,0,0,.36)!important;
}
html[data-theme="dark"] body :where(.credential-title,.credential-modal-details strong,.credential-rich-editor) { color:var(--bt-ink)!important; }
html[data-theme="dark"] body :where(.credential-meta,.credential-page-summary,.credential-modal-details span) { color:var(--bt-ink-muted)!important; }
html[data-theme="dark"] body .credential-icon { color:var(--bt-primary)!important;background:var(--bt-primary-light)!important; }
html[data-theme="dark"] body .credential-open { color:var(--bt-ink-muted)!important;background:var(--bt-surface-3)!important; }
html[data-theme="dark"] body .credential-card:hover .credential-open { color:#03242b!important;background:var(--bt-primary)!important; }
html[data-theme="dark"] body :where(.credential-footer,.credential-card-actions) { border-color:var(--bt-border-soft)!important; }
html[data-theme="dark"] body :where(.credential-page-link,.credential-modal-loading,.credential-modal-notes,.credential-modal-details>div,.credential-editor,.credential-rich-editor) {
    border-color:var(--bt-border)!important;
    color:var(--bt-ink)!important;
    background:var(--bt-surface)!important;
}
html[data-theme="dark"] body .credential-page-link:hover { border-color:var(--bt-primary)!important;background:var(--bt-surface-3)!important; }
html[data-theme="dark"] body .credential-page-link.is-active { border-color:var(--bt-primary)!important;color:#03242b!important;background:var(--bt-primary)!important; }
html[data-theme="dark"] body .credential-page-link.is-disabled { color:var(--bt-ink-subtle)!important;background:var(--bt-surface-2)!important; }
html[data-theme="dark"] body :where(.credential-editor-toolbar,.credential-modal-footer) { border-color:var(--bt-border-soft)!important;background:var(--bt-surface-2)!important; }
html[data-theme="dark"] body .credential-editor-btn { color:var(--bt-ink-muted)!important;background:transparent!important; }
html[data-theme="dark"] body .credential-editor-btn:hover { border-color:var(--bt-primary)!important;color:var(--bt-primary)!important;background:var(--bt-surface-3)!important; }
html[data-theme="dark"] body .credential-editor-divider { background:var(--bt-border)!important; }
html[data-theme="dark"] body .credential-modal-error { border-color:#9f3545!important;color:#fecdd3!important;background:#3a171d!important; }
html[data-theme="dark"] body :where(.bt-rich-editor,.bt-rich-toolbar,.sa-dashboard-kpi,.sa-plan-stat,.sa-feature-option,.sa-plan-actions,.sa-overview-item,.landing-editor-tabs,.landing-editor-panel,.landing-media-card,.landing-media-mini,.landing-proof-card) {
    border-color:var(--bt-border)!important;
    color:var(--bt-ink)!important;
    background:var(--bt-surface)!important;
}
html[data-theme="dark"] body :where(.sa-plan-shell .app-card-header,.sa-tabs .nav-link.active) {
    border-color:var(--bt-border-soft)!important;
    color:var(--bt-ink)!important;
    background:var(--bt-surface-2)!important;
}
html[data-theme="dark"] body :where(.bt-rich-toolbar,.bt-rich-btn:hover) { border-color:var(--bt-border)!important;background:var(--bt-surface-2)!important; }
html[data-theme="dark"] body .bt-rich-surface {
    color: var(--bt-ink) !important;
    background: var(--bt-surface) !important;
    caret-color: var(--bt-ink) !important;
    -webkit-text-fill-color: var(--bt-ink) !important;
}
html[data-theme="dark"] body .bt-rich-surface :where(p,span,div,strong,b,em,i,u,ul,ol,li,blockquote),
html[data-theme="dark"] body .credential-rich-editor :where(p,span,div,strong,b,em,i,u,ul,ol,li,blockquote) {
    color: var(--bt-ink) !important;
    -webkit-text-fill-color: var(--bt-ink) !important;
}
html[data-theme="dark"] body .bt-rich-surface:empty::before {
    color: var(--bt-ink-muted) !important;
}
html[data-theme="dark"] body .bt-rich-toolbar button {
    color: var(--bt-ink-muted) !important;
    background: transparent !important;
}
html[data-theme="dark"] body .bt-rich-toolbar button i {
    color: inherit !important;
    -webkit-text-fill-color: currentColor !important;
    opacity: 1 !important;
}
html[data-theme="dark"] body .bt-rich-toolbar button:hover,
html[data-theme="dark"] body .bt-rich-toolbar button:focus-visible {
    border-color: var(--bt-primary) !important;
    color: var(--bt-primary) !important;
    background: var(--bt-surface-3) !important;
}
html[data-theme="dark"] body .bt-rich-divider {
    background: var(--bt-border) !important;
}
html[data-theme="dark"] body .bt-rich-content {
    color: var(--bt-ink) !important;
}
html[data-theme="dark"] body .bt-rich-content :where(p,span,div,strong,b,em,i,u,ul,ol,li,blockquote) {
    color: inherit !important;
    -webkit-text-fill-color: currentColor !important;
}
html[data-theme="dark"] body #attachPreviewModal .modal-header { border-color:var(--bt-border-soft)!important;color:var(--bt-ink)!important;background:var(--bt-surface)!important; }
html[data-theme="dark"] body :where(.calendar-day,.calendar-weekday,.attendance-calendar-shell) { border-color:var(--bt-border-soft)!important;color:var(--bt-ink)!important;background-color:var(--bt-surface)!important; }
html[data-theme="dark"] body .calendar-weekday { background-color:var(--bt-surface-2)!important; }
html[data-theme="dark"] body .calendar-day.has-leave { background:color-mix(in srgb,#d97706 10%,var(--bt-surface))!important; }
html[data-theme="dark"] body :where(.modal-holiday-notice,.calendar-holiday-label) { border-color:rgba(217,119,6,.35)!important;color:#fbbf24!important;background:#352710!important; }

/* Mobile dark mode: override legacy mobile rules that hard-code white surfaces. */
@media (max-width: 767.98px) {
    html[data-theme="dark"] body.app-body,
    html[data-theme="dark"] body.tenant-app,
    html[data-theme="dark"] body .main-area,
    html[data-theme="dark"] body .page-wrapper {
        color:var(--bt-ink)!important;
        background:var(--bt-bg)!important;
    }
    html[data-theme="dark"] body :where(.mobile-topbar,.workspace-topbar,.sidebar,.sidebar-top,.sidebar-bottom) {
        border-color:var(--bt-border-soft)!important;
        color:var(--bt-ink)!important;
        background:var(--bt-sidebar-bg)!important;
    }
    html[data-theme="dark"] body :where(.app-card,.stat-card,.chart-card,.info-tile,.profile-settings-panel,.profile-settings-tabs,.app-card-header,.app-card-body,.app-card-footer) {
        border-color:var(--bt-border-soft)!important;
        color:var(--bt-ink)!important;
        background-color:var(--bt-surface)!important;
    }
    html[data-theme="dark"] body :where(.project-pagination nav,.credential-pagination nav,.dataTables_wrapper>.row:last-child,.bt-mobile-empty-row) {
        border-color:var(--bt-border-soft)!important;
        color:var(--bt-ink)!important;
        background:var(--bt-surface)!important;
        box-shadow:0 7px 20px rgba(0,0,0,.28)!important;
    }
    html[data-theme="dark"] body .bt-mobile-filter-panel {
        border-color:var(--bt-border)!important;
        color:var(--bt-ink)!important;
        background:var(--bt-surface)!important;
        box-shadow:0 -18px 55px rgba(0,0,0,.52)!important;
    }
    html[data-theme="dark"] body .bt-mobile-filter-sheet-head {
        border-color:var(--bt-border-soft)!important;
        color:var(--bt-ink)!important;
        background:var(--bt-surface)!important;
        box-shadow:0 8px 18px rgba(0,0,0,.24)!important;
    }
    html[data-theme="dark"] body .bt-mobile-filter-sheet-head::before { background:#536783!important; }
    html[data-theme="dark"] body .bt-mobile-filter-panel :where(.form-control,.form-select,.bootstrap-select>.dropdown-toggle) {
        border-color:var(--bt-border)!important;
        color:var(--bt-ink)!important;
        background-color:var(--bt-surface-2)!important;
        box-shadow:0 3px 10px rgba(0,0,0,.2)!important;
    }
    html[data-theme="dark"] body table.app-table.bt-mobile-card-table tbody tr,
    html[data-theme="dark"] body .attendance-table tbody tr {
        border-color:var(--bt-border-soft)!important;
        color:var(--bt-ink)!important;
        background:var(--bt-surface)!important;
        box-shadow:0 8px 22px rgba(0,0,0,.3)!important;
    }
    html[data-theme="dark"] body table.app-table.bt-mobile-card-table td,
    html[data-theme="dark"] body .attendance-table td {
        border-color:var(--bt-border-soft)!important;
        color:var(--bt-ink)!important;
        background:transparent!important;
    }
    html[data-theme="dark"] body :where(.app-card:has(table.app-table.bt-mobile-card-table),.app-card.bt-mobile-table-card) {
        border-color:transparent!important;
        background:transparent!important;
        box-shadow:none!important;
    }
    html[data-theme="dark"] body :where(.app-card:has(table.app-table.bt-mobile-card-table),.app-card.bt-mobile-table-card) > .app-card-header {
        border-color:var(--bt-border-soft)!important;
        color:var(--bt-ink)!important;
        background:var(--bt-surface)!important;
        box-shadow:0 7px 20px rgba(0,0,0,.28)!important;
    }
    html[data-theme="dark"] body :where(.attendance-log-card>.app-card-header,.page-header-right>a[href*="admin/settings"],.page-header-right>a[href*="attendance/calendar"]) {
        border-color:var(--bt-border)!important;
        color:var(--bt-ink)!important;
        background:var(--bt-surface)!important;
        box-shadow:0 7px 20px rgba(0,0,0,.28)!important;
    }
    html[data-theme="dark"] body :where(.page-header-right a[href*="backlog"],.page-header-right button[data-bs-target="#addProjectStatusModal"]) {
        border-color:var(--bt-border)!important;
        color:var(--bt-ink)!important;
        background:var(--bt-surface)!important;
        box-shadow:0 7px 20px rgba(0,0,0,.28)!important;
    }
    html[data-theme="dark"] body :where(.bt-mobile-action-menu,.bt-mobile-row-actions,.dropdown-menu,.bootstrap-select .dropdown-menu) {
        border-color:var(--bt-border)!important;
        color:var(--bt-ink)!important;
        background:var(--bt-surface-2)!important;
        box-shadow:0 14px 35px rgba(0,0,0,.42)!important;
    }
    html[data-theme="dark"] body .bt-mobile-action-menu {
        border:0!important;
        background:transparent!important;
        box-shadow:none!important;
    }
    html[data-theme="dark"] body .bt-mobile-action-dropdown {
        border:0!important;
        background:transparent!important;
        box-shadow:none!important;
    }
    html[data-theme="dark"] body .bt-mobile-filter-toggle {
        border-color:var(--bt-border)!important;
        color:var(--bt-ink)!important;
        background:var(--bt-surface-2)!important;
        box-shadow:0 5px 15px rgba(0,0,0,.25)!important;
    }
    html[data-theme="dark"] body table.app-table.bt-mobile-card-table tbody td::before {
        color:var(--bt-ink-muted)!important;
    }
    html[data-theme="dark"] body :where(.attendance-auto-tag,.attendance-location-tag,.listing-item-trigger.is-active) {
        border-color:var(--bt-border)!important;
        color:#fcd34d!important;
        background:#3a2d12!important;
    }
}
@media (max-width: 991.98px) {
    html[data-theme="dark"] body .sidebar {
        border-color:var(--bt-border-soft)!important;
        color:var(--bt-sidebar-text)!important;
        background:var(--bt-sidebar-bg)!important;
        box-shadow:18px 0 55px rgba(0,0,0,.48)!important;
    }
    html[data-theme="dark"] body .sidebar .sidebar-brand-row {
        background:none!important;
        box-shadow:none!important;
    }
}

/* Mobile theme parity: these selectors intentionally match the specificity of
   the table-to-card rules above, which use hard-coded light surfaces. */
@media (max-width: 767.98px) {
    html[data-theme="dark"] body .app-card:has(table.app-table.bt-mobile-card-table) > .app-card-header,
    html[data-theme="dark"] body .app-card.bt-mobile-table-card > .app-card-header,
    html[data-theme="dark"] body .app-card:has(table.app-table.bt-mobile-card-table) > .app-card-footer,
    html[data-theme="dark"] body .app-card.bt-mobile-table-card > .app-card-footer {
        border-color:var(--bt-border-soft)!important;
        color:var(--bt-ink)!important;
        background:var(--bt-surface)!important;
        box-shadow:0 7px 20px rgba(0,0,0,.28)!important;
    }
    html[data-theme="dark"] body table.app-table.bt-mobile-card-table tbody tr:not(.bt-mobile-empty-row),
    html[data-theme="dark"] body table.app-table.bt-mobile-card-table .bt-mobile-empty-row {
        border-color:var(--bt-border-soft)!important;
        color:var(--bt-ink)!important;
        background:var(--bt-surface)!important;
        box-shadow:0 8px 22px rgba(0,0,0,.3)!important;
    }
    html[data-theme="dark"] body .dataTables_wrapper > .row:last-child,
    html[data-theme="dark"] body .project-pagination nav,
    html[data-theme="dark"] body .credential-pagination nav,
    html[data-theme="dark"] body .pagination {
        border-color:var(--bt-border-soft)!important;
        color:var(--bt-ink)!important;
        background:var(--bt-surface)!important;
    }
    html[data-theme="dark"] body .pagination .page-link,
    html[data-theme="dark"] body .dataTables_wrapper .page-link {
        border-color:var(--bt-border)!important;
        color:var(--bt-ink-2)!important;
        background:var(--bt-surface-2)!important;
        box-shadow:0 4px 12px rgba(0,0,0,.22)!important;
    }
    html[data-theme="dark"] body .pagination .page-item.active .page-link,
    html[data-theme="dark"] body .dataTables_wrapper .page-item.active .page-link {
        border-color:var(--bt-primary)!important;
        color:#03242b!important;
        background:var(--bt-primary)!important;
    }
    html[data-theme="dark"] body .pagination .page-item.disabled .page-link,
    html[data-theme="dark"] body .dataTables_wrapper .page-item.disabled .page-link {
        color:var(--bt-ink-subtle)!important;
        background:var(--bt-surface)!important;
        opacity:.72;
    }
}
body>.calendar-reminder-form .bootstrap-select{width:100%!important;margin-top:.35rem!important}body>.calendar-reminder-form .bootstrap-select>.dropdown-toggle{height:2.65rem!important;min-height:2.65rem!important;display:flex!important;align-items:center!important;border:1px solid var(--bt-border)!important;border-radius:var(--bt-r-sm)!important;background:var(--bt-surface)!important}body>.calendar-reminder-form .bootstrap-select>.dropdown-toggle .filter-option{display:flex;align-items:center;height:100%}body>.calendar-reminder-form .bootstrap-select>.dropdown-toggle .filter-option-inner,body>.calendar-reminder-form .bootstrap-select>.dropdown-toggle .filter-option-inner-inner{width:100%}body>.bs-container.bootstrap-select{z-index:11080!important}body>.bs-container.bootstrap-select .dropdown-menu{z-index:11081!important;max-height:min(20rem,calc(100dvh - 1rem))!important;overflow-y:auto!important;border:1px solid var(--bt-border)!important;border-radius:.7rem!important;box-shadow:0 16px 40px rgba(15,23,42,.24)!important}

/* Keep the reminder submit action after every field in the mobile bottom sheet. */
@media (max-width:575.98px) {
    body > .calendar-reminder-form {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
    }
    body > .calendar-reminder-form > .calendar-reminder-form-head { order: 1; flex: 0 0 auto; }
    body > .calendar-reminder-form > .calendar-reminder-field { order: 2; flex: 0 0 auto; width: 100%; }
    body > .calendar-reminder-form > .calendar-form-error { order: 3; flex: 0 0 auto; }
    body > .calendar-reminder-form > .calendar-reminder-actions {
        position: static !important;
        inset: auto !important;
        order: 4 !important;
        flex: 0 0 auto;
        width: 100% !important;
        margin: 0 !important;
        transform: none !important;
    }
}

body > .calendar-reminder-form > .calendar-reminder-actions {
    grid-column: 1 / -1;
    width: 100%;
}
body > .calendar-reminder-form > .calendar-reminder-actions > .btn {
    display: inline-flex;
    width: 100%;
    min-height: 2.85rem;
    align-items: center;
    justify-content: center;
    border-radius: .7rem !important;
    font-weight: 750;
}

/* Reminder delivery controls live on forms that are moved directly under <body> at runtime.
   Keep their layout in the main bundle so it does not depend on a late Blade style stack. */
body > .calendar-reminder-form > .calendar-reminder-field:has(.calendar-reminder-toggles) {
    grid-column: 1 / -1;
    margin-bottom: .9rem !important;
}
body > .calendar-reminder-form .calendar-reminder-field-label {
    display: block;
    margin-bottom: .45rem;
    color: var(--bt-ink-muted);
    font-size: .7rem;
    font-weight: 750;
}
body > .calendar-reminder-form .calendar-reminder-toggles {
    display: grid;
    grid-template-columns: 1fr;
    gap: .45rem;
    width: 100%;
    margin: 0;
}
body > .calendar-reminder-form .calendar-reminder-toggle {
    display: flex !important;
    min-width: 0;
    min-height: 2.75rem;
    align-items: center !important;
    justify-content: space-between !important;
    gap: .75rem;
    margin: 0 !important;
    padding: .55rem .7rem !important;
    border: 1px solid var(--bt-border-soft);
    border-radius: .65rem;
    background: var(--bt-surface-2);
    cursor: pointer;
}
body > .calendar-reminder-form .calendar-reminder-toggle-copy {
    display: inline-flex;
    min-width: 0;
    align-items: center;
    gap: .55rem;
    color: var(--bt-ink);
    font-size: .75rem;
    font-weight: 700;
    line-height: 1.2;
}
body > .calendar-reminder-form .calendar-reminder-toggle-copy > i {
    display: grid;
    flex: 0 0 1.8rem;
    width: 1.8rem;
    height: 1.8rem;
    place-items: center;
    border-radius: .5rem;
    color: var(--bt-primary);
    background: var(--bt-primary-light);
    font-size: .82rem;
}
body > .calendar-reminder-form .calendar-reminder-toggle .form-check {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    min-height: 0;
    margin: 0 !important;
    padding-left: 2.5em;
}
body > .calendar-reminder-form .calendar-reminder-toggle .form-check-input {
    float: none;
    margin-top: 0;
    cursor: pointer;
}

/* Quick-add reminder modal: match the full reminder form's one-column card layout. */
body > .calendar-reminder-form {
    width: min(500px, calc(100vw - 2rem)) !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 0 !important;
    padding: 1.25rem 1.25rem 0 !important;
}
body > .calendar-reminder-form > .calendar-reminder-form-head,
body > .calendar-reminder-form > .calendar-reminder-field,
body > .calendar-reminder-form > .calendar-form-error,
body > .calendar-reminder-form > .calendar-reminder-actions {
    grid-column: 1 !important;
}
body > .calendar-reminder-form > .calendar-reminder-field {
    margin-bottom: .85rem !important;
    color: var(--bt-ink-muted);
    font-size: .7rem !important;
    font-weight: 800 !important;
    letter-spacing: .035em;
    text-transform: uppercase;
}
body > .calendar-reminder-form > .calendar-reminder-field .form-control,
body > .calendar-reminder-form > .calendar-reminder-field .form-select {
    min-height: 2.65rem;
    font-size: .86rem;
    letter-spacing: 0;
    text-transform: none;
}
body > .calendar-reminder-form textarea.form-control {
    min-height: 6.9rem !important;
}
body > .calendar-reminder-form .calendar-reminder-field-label {
    margin-bottom: .5rem;
    font-size: .7rem;
    font-weight: 800;
    letter-spacing: .035em;
    text-transform: uppercase;
}
body > .calendar-reminder-form .calendar-reminder-toggle {
    min-height: 3.85rem;
    padding: .65rem .75rem !important;
}
body > .calendar-reminder-form .calendar-reminder-toggle-copy > span {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: .2rem;
}
body > .calendar-reminder-form .calendar-reminder-toggle-copy strong {
    color: var(--bt-ink);
    font-size: .78rem;
    font-weight: 750;
    letter-spacing: 0;
    text-transform: none;
}
body > .calendar-reminder-form .calendar-reminder-toggle-copy small {
    color: var(--bt-ink-muted);
    font-size: .67rem;
    font-weight: 500;
    letter-spacing: 0;
    line-height: 1.25;
    text-transform: none;
}
body > .calendar-reminder-form > .calendar-reminder-actions {
    position: sticky;
    bottom: 0;
    margin: .25rem -1.25rem 0;
    padding: .9rem 1.25rem;
    border-top: 1px solid var(--bt-border-soft);
    background: var(--bt-surface-2);
}
body > .calendar-reminder-form > .calendar-reminder-actions > .btn {
    width: auto;
    min-width: 11rem;
    min-height: 2.4rem;
    margin-left: auto;
}
@media (max-width: 575.98px) {
    body > .calendar-reminder-form {
        padding: 1rem 1rem 0 !important;
    }
    body > .calendar-reminder-form > .calendar-reminder-actions {
        margin-right: -1rem;
        margin-left: -1rem;
        padding: .75rem 1rem calc(.75rem + env(safe-area-inset-bottom));
    }
    body > .calendar-reminder-form > .calendar-reminder-actions > .btn {
        width: 100%;
    }
}

/* Authenticated UI dark-theme contract.
   Module styles may define light fallbacks, but application chrome must always
   resolve through the active theme tokens. File/document canvases are excluded. */
html[data-theme="dark"] body :where(
    .project-time-metrics>div,
    .mark-leave-date-panel,
    .project-status-builder,
    .selected-option-tags,
    .preview-image-controls,
    .attach-kbd,
    .board-ticket-modal-form .attach-kbd,
    .excel-sheet-tab,
    .audit-event,
    .day-reminder-detail,
    .calendar-reminder-indicator,
    .subscription-status,
    .priority-state,
    .nav-tabs .nav-link.active,
    .nav-pills .nav-link:not(.active),
    .accordion-button,
    .accordion-body,
    .list-group,
    .dropdown-header,
    .modal-header,
    .modal-body,
    .modal-footer
) {
    border-color:var(--bt-border)!important;
    color:var(--bt-ink)!important;
    background-color:var(--bt-surface-2)!important;
}
html[data-theme="dark"] body :where(.modal-body,.accordion-body,.list-group) {
    background-color:var(--bt-surface)!important;
}
html[data-theme="dark"] body :where(.bg-white,.bg-light,.bg-body,.bg-body-tertiary,.bg-body-secondary) {
    border-color:var(--bt-border)!important;
    color:var(--bt-ink)!important;
    background-color:var(--bt-surface-2)!important;
}
html[data-theme="dark"] body :where(.text-dark,.text-body,.text-body-emphasis) { color:var(--bt-ink)!important; }
html[data-theme="dark"] body :where(.text-secondary,.text-body-secondary) { color:var(--bt-ink-muted)!important; }
html[data-theme="dark"] body :where(.attendance-location-tag,.calendar-reminder-indicator) {
    border-color:var(--bt-border)!important;
    color:var(--bt-ink-2)!important;
    background:var(--bt-surface-3)!important;
}
html[data-theme="dark"] body :where(.attach-kbd,.board-ticket-modal-form .attach-kbd,.preview-image-controls,.excel-sheet-tab) {
    border-color:var(--bt-border)!important;
    color:var(--bt-ink-2)!important;
    background:var(--bt-surface-2)!important;
}
html[data-theme="dark"] body :where(.preview-zoom-btn,.credential-editor-btn,.btn-ghost) {
    border-color:transparent!important;
    color:var(--bt-ink-muted)!important;
    background:transparent!important;
}
html[data-theme="dark"] body :where(.preview-zoom-btn,.credential-editor-btn,.btn-ghost):hover {
    border-color:var(--bt-border)!important;
    color:var(--bt-ink)!important;
    background:var(--bt-surface-3)!important;
}
html[data-theme="dark"] body .btn-outline-danger {
    border-color:#9f3545!important;color:#fda4af!important;background:#3a171d!important;
}
html[data-theme="dark"] body .btn-outline-danger:hover,
html[data-theme="dark"] body .btn-outline-danger:focus {
    border-color:#fda4af!important;color:#3a0710!important;background:#fda4af!important;
}
html[data-theme="dark"] body .btn-outline-warning {
    border-color:#9a6a18!important;color:#fcd34d!important;background:#352710!important;
}
html[data-theme="dark"] body .btn-outline-warning:hover,
html[data-theme="dark"] body .btn-outline-warning:focus {
    border-color:#fde68a!important;color:#291600!important;background:#fde68a!important;
}
html[data-theme="dark"] body .btn-outline-info {
    border-color:#197b94!important;color:#67e8f9!important;background:#122d3b!important;
}
html[data-theme="dark"] body .btn-outline-info:hover,
html[data-theme="dark"] body .btn-outline-info:focus {
    border-color:#67e8f9!important;color:#03242b!important;background:#67e8f9!important;
}
html[data-theme="dark"] body :where(.btn-close,.accordion-button::after) { filter:invert(1) grayscale(1) brightness(1.8); }
html[data-theme="dark"] body .accordion-button:not(.collapsed) {
    color:var(--bt-primary)!important;background:var(--bt-surface-3)!important;box-shadow:inset 0 -1px 0 var(--bt-border)!important;
}
html[data-theme="dark"] body :where(.select2-dropdown,.select2-results,.select2-search__field,.bootstrap-select .dropdown-menu) {
    border-color:var(--bt-border)!important;color:var(--bt-ink)!important;background:var(--bt-surface-2)!important;
}
html[data-theme="dark"] body .select2-results__option { color:var(--bt-ink-2)!important;background:transparent!important; }
html[data-theme="dark"] body .select2-results__option--highlighted,
html[data-theme="dark"] body .select2-results__option[aria-selected="true"] { color:var(--bt-ink)!important;background:var(--bt-surface-3)!important; }
html[data-theme="dark"] body :where(.swal2-popup,.swal2-actions,.swal2-footer) {
    border-color:var(--bt-border)!important;color:var(--bt-ink)!important;background:var(--bt-surface)!important;
}
html[data-theme="dark"] body :where(.swal2-title,.swal2-html-container) { color:var(--bt-ink)!important; }
html[data-theme="dark"] body :where(.project-time-metrics strong,.project-time-project-name,.preview-zoom-value) { color:var(--bt-ink)!important; }

/* Date-range/date-time pickers inherit the application theme completely. */
html[data-theme="dark"] body .daterangepicker,
html[data-theme="dark"] body .daterangepicker .calendar-table,
html[data-theme="dark"] body .daterangepicker .drp-buttons {
    border-color: var(--bt-border) !important;
    color: var(--bt-ink) !important;
    background: var(--bt-surface) !important;
}
html[data-theme="dark"] body .daterangepicker .calendar-table thead tr:first-child,
html[data-theme="dark"] body .daterangepicker .ranges li,
html[data-theme="dark"] body .daterangepicker td.available,
html[data-theme="dark"] body .daterangepicker th.available {
    color: var(--bt-ink) !important;
    background: transparent !important;
}
html[data-theme="dark"] body .daterangepicker td.off,
html[data-theme="dark"] body .daterangepicker td.off.in-range,
html[data-theme="dark"] body .daterangepicker td.off.start-date,
html[data-theme="dark"] body .daterangepicker td.off.end-date {
    color: var(--bt-ink-subtle) !important;
    background: var(--bt-surface-2) !important;
}
html[data-theme="dark"] body .daterangepicker td.in-range,
html[data-theme="dark"] body .daterangepicker .ranges li:hover,
html[data-theme="dark"] body .daterangepicker .ranges li.active,
html[data-theme="dark"] body .daterangepicker td.available:hover,
html[data-theme="dark"] body .daterangepicker th.available:hover {
    color: var(--bt-ink) !important;
    background: var(--bt-surface-3) !important;
}
html[data-theme="dark"] body .daterangepicker td.active,
html[data-theme="dark"] body .daterangepicker td.active:hover {
    color: #fff !important;
    background: var(--bt-primary) !important;
}
html[data-theme="dark"] body .daterangepicker :is(.monthselect,.yearselect,.hourselect,.minuteselect,.ampmselect),
html[data-theme="dark"] body .daterangepicker .calendar-time select {
    border-color: var(--bt-border) !important;
    color: var(--bt-ink) !important;
    background: var(--bt-surface-2) !important;
    color-scheme: dark;
}
.daterangepicker.bt-datetime-picker {
    position: fixed !important;
    z-index: 2147483000 !important;
    top: 50dvh !important;
    bottom: auto !important;
    max-height: calc(100dvh - 16px) !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    transform: translateY(-50%) !important;
    overscroll-behavior: contain;
    scrollbar-width: thin;
}
@media (max-width: 575.98px) {
    .daterangepicker.bt-datetime-picker {
        top: 8px !important;
        right: 8px !important;
        bottom: auto !important;
        left: 8px !important;
        width: auto !important;
        max-width: none !important;
        transform: none !important;
        isolation: isolate;
    }
}
.calendar-agenda-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    margin: 0 -.15rem .65rem;
    padding: .45rem .15rem;
}
.calendar-agenda-heading .calendar-agenda-title { margin: 0; padding: 0; background: transparent; }
.calendar-all-reminders {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    color: var(--bt-primary);
    font-size: .72rem;
    font-weight: 750;
    text-decoration: none;
    white-space: nowrap;
}
.calendar-all-reminders:hover { color: var(--bt-primary-hover); text-decoration: underline; }

/* Modern leave editor date range. */
.leave-editor-form{--leave-accent:var(--bt-primary)}
.leave-editor-form .row.g-3{--bs-gutter-x:1rem;--bs-gutter-y:1.05rem}
.leave-editor-form :where(.form-control:not(textarea),.form-select){height:2.75rem;min-height:2.75rem;border-radius:.68rem}
.leave-editor-form .bootstrap-select{height:2.75rem!important;min-height:2.75rem!important}
.leave-editor-form .bootstrap-select>.dropdown-toggle{height:2.75rem!important;min-height:2.75rem!important;padding-top:.5rem!important;padding-bottom:.5rem!important;border-radius:.68rem!important}
.leave-editor-form .select2-container .select2-selection--single{height:2.75rem!important;min-height:2.75rem!important;border-radius:.68rem!important}
.leave-editor-form .select2-container--default .select2-selection--single .select2-selection__rendered,
.leave-editor-form .select2-container--default .select2-selection--single .select2-selection__arrow{height:2.75rem!important;line-height:2.75rem!important}
.leave-editor-form textarea{min-height:8.5rem;padding:.8rem .9rem;border-radius:.72rem;line-height:1.5;resize:vertical}
.leave-editor-form .leave-range-section{margin-top:var(--bs-gutter-y)}
.leave-range-label-row{position:relative;display:block;margin-bottom:.5rem}
.leave-range-input-wrap{position:relative}
.leave-range-input-wrap>i{position:absolute;z-index:2;top:50%;left:1rem;color:var(--leave-accent);font-size:1rem;transform:translateY(-50%);pointer-events:none}
.leave-range-input-wrap .js-leave-daterange{height:2.75rem;min-height:2.75rem;padding-right:2.8rem;padding-left:2.7rem;border-radius:.68rem;background:var(--bt-surface)!important;font-weight:700;cursor:pointer}
.leave-range-chevron{position:absolute;top:50%;right:1rem;color:var(--bt-ink-muted);transform:translateY(-50%);pointer-events:none}
.leave-range-summary{position:absolute;right:0;bottom:-.05rem;display:inline-flex;min-height:1.3rem;align-items:center;gap:.32rem;padding:.15rem .45rem;border:1px solid var(--bt-border-soft);border-radius:999px;background:var(--bt-surface-2);color:var(--bt-ink-muted);white-space:nowrap}
.leave-range-summary i{color:var(--leave-accent);font-size:.68rem}
.leave-range-summary strong{font-size:.65rem;font-weight:750;line-height:1}
.leave-editor-form .form-label{font-size:.72rem;font-weight:800;letter-spacing:.015em;color:var(--bt-ink-muted)}
@media(max-width:575.98px){.leave-editor-form .row.g-3{--bs-gutter-y:.9rem}.leave-range-summary{padding:.14rem .4rem}.daterangepicker.bt-leave-daterange{z-index:2147483000!important}}

@media (max-width:575.98px) {
    .calendar-drawer-nav {
        grid-template-columns: auto auto auto minmax(.25rem, 1fr) auto !important;
        gap: .45rem !important;
        padding: .65rem .85rem !important;
    }
    .calendar-drawer-nav > [data-calendar-today] {
        grid-column: 1 !important;
        order: 1 !important;
    }
    .calendar-drawer-nav > [data-calendar-shift="-1"] {
        grid-column: 2 !important;
        order: 2 !important;
    }
    .calendar-drawer-nav > [data-calendar-shift="1"] {
        grid-column: 3 !important;
        order: 3 !important;
    }
    .calendar-drawer-nav .calendar-add-reminder {
        grid-column: 5 !important;
        order: 4 !important;
        width: auto !important;
        min-width: 0;
        min-height: 2.4rem;
        justify-self: end;
        padding: .48rem .7rem !important;
        border-radius: .65rem !important;
        box-shadow: 0 5px 14px rgba(4, 36, 61, .16);
        font-size: .73rem;
    }
    body > .calendar-reminder-form {
        max-height: min(86dvh, 680px) !important;
        padding: .9rem 1rem calc(.9rem + env(safe-area-inset-bottom)) !important;
    }
    body > .calendar-reminder-form > .calendar-reminder-form-head {
        margin-bottom: .75rem !important;
        padding-bottom: .7rem !important;
    }
    body > .calendar-reminder-form > .calendar-reminder-field {
        margin-bottom: .65rem !important;
    }
    body > .calendar-reminder-form textarea {
        min-height: 4.75rem !important;
    }
    body > .calendar-reminder-form > .calendar-reminder-actions {
        position: sticky !important;
        z-index: 2;
        bottom: calc(-.9rem - env(safe-area-inset-bottom)) !important;
        margin: .15rem -1rem calc(-.9rem - env(safe-area-inset-bottom)) !important;
        width: auto !important;
        padding: .7rem 1rem calc(.7rem + env(safe-area-inset-bottom));
        border-top: 1px solid var(--bt-border-soft);
        background: var(--bt-surface);
    }
    body > .calendar-reminder-form > .calendar-reminder-actions > .btn {
        min-height: 3rem;
        border-radius: .75rem !important;
        box-shadow: 0 7px 18px rgba(4, 36, 61, .2);
    }
}