/* public/css/ui-polish.css — HubSpot-inspired product chrome + finish layer.
 *
 * Loaded LAST (after Bootstrap, Bootstrap Icons, sidebar.css, and header.php's
 * inline <style>) so it refines tokens + shared components app-wide without
 * touching page logic. Dark-mode-first with strong contrast.
 *
 * Pairs with markup added in header.php (brand mark, monoline nav icons,
 * profile chip, topbar avatar/search icon) and the dashboard KPI tiles.
 * To revert: remove this file + its <link>, the Inter + Bootstrap-Icons
 * <link>s, and restore the emoji markup in header.php / footer.php.
 */

/* ─────────────────────────────────────────────────────────────
   Typography — Inter, antialiased, tighter headings, tabular nums
   ───────────────────────────────────────────────────────────── */
:root {
    --bs-body-font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI',
        Roboto, Helvetica, Arial, sans-serif;
    --app-radius: .7rem;
    --app-radius-sm: .45rem;
    --app-accent: #2dd4bf;          /* teal — brand mark, avatars, glow top stop */
    --app-accent-2: #0d9488;        /* deep teal — gradient bottom stop */
    --sidebar-active-text: #5eead4; /* teal active-nav icon (sidebar is dark in both themes) */
    --topbar-height: 54px;
}

/* Light theme: retune the indigo primary set in header.php to teal so links,
   outline buttons, and accents match the teal brand. */
[data-bs-theme="light"] {
    --bs-primary: #0d9488;
    --bs-primary-rgb: 13, 148, 136;
    --bs-link-color: #0d9488;
    --bs-link-hover-color: #0f766e;
}

body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    letter-spacing: -0.006em;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6,
.page-header-title, .card-header h5, .modal-title {
    letter-spacing: -0.018em;
    font-weight: 600;
}

.table, .stat-card .stat-value, .kpi-value, .badge, .pagination {
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum";
}

/* ─────────────────────────────────────────────────────────────
   Dark-mode tokens — deeper calm canvas, layered surfaces,
   brighter text for contrast
   ───────────────────────────────────────────────────────────── */
[data-bs-theme="dark"] {
    --bs-body-bg: #0d1424;
    --bs-body-color: #cdd6e3;
    --bs-emphasis-color: #f1f5f9;
    --bs-secondary-color: #94a3b8;
    --bs-tertiary-bg: #18233a;
    --bs-border-color: #29364c;
    --bs-link-color: #5eead4;
    --bs-link-hover-color: #99f6e4;
    --bs-primary: #2dd4bf;
    --bs-primary-rgb: 45, 212, 191;
    --sidebar-active-text: #5eead4;
    --sidebar-text: #8593aa;
    /* Sidebar + topbar share ONE chrome color (deepest), so the L-shaped frame
       reads as a single surface. Content (#0d1424) sits lighter, cards lighter
       still — a clear chrome -> content -> card hierarchy. */
    --sidebar-bg: #0a111e;
    --sidebar-border: #1b2740;
    --topbar-bg: #0a111e;
    --topbar-border: #1b2740;
}

[data-bs-theme="dark"] h1, [data-bs-theme="dark"] h2, [data-bs-theme="dark"] h3,
[data-bs-theme="dark"] h4, [data-bs-theme="dark"] h5, [data-bs-theme="dark"] h6,
[data-bs-theme="dark"] .page-header-title, [data-bs-theme="dark"] .modal-title {
    color: #f1f5f9;
}
[data-bs-theme="dark"] .text-muted { color: #8595ab !important; }

/* ─────────────────────────────────────────────────────────────
   Sidebar — product-grade rail: gradient ground, brand mark,
   pill nav with glowing active bar, monoline icons, profile chip
   ───────────────────────────────────────────────────────────── */
/* No tint wash on the sidebar — it made the brand area read as a different
   color than the (untinted) topbar. Keep the chrome a single flat color. */

/* Lock the brand block to exactly the topbar height so the divider under the
   brand lines up with the topbar's bottom edge — one continuous seam, no step. */
.sidebar-brand {
    height: var(--topbar-height);
    min-height: var(--topbar-height);
    padding-top: 0;
    padding-bottom: 0;
    align-items: center;
    border-bottom-color: var(--sidebar-border);
}

/* Hide the sidebar nav scrollbar entirely — it stays scrollable via wheel /
   trackpad, but the bar itself is visual noise in both collapsed and expanded. */
.app-sidebar .sidebar-nav { scrollbar-width: none; -ms-overflow-style: none; }
.app-sidebar .sidebar-nav::-webkit-scrollbar { width: 0; height: 0; display: none; }

/* Brand: gradient logo square + wordmark */
.sidebar-brand-link {
    display: flex; align-items: center; gap: 10px; min-width: 0;
}
.sidebar-brand-mark {
    width: 30px; height: 30px; border-radius: 9px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, var(--app-accent), var(--app-accent-2));
    color: #fff; font-size: 1rem;
    box-shadow: 0 3px 10px rgba(45, 212, 191, .45);
}
html.sidebar-collapsed .sidebar-brand-mark { margin: 0 auto; }
/* Collapsed rail is only 60px wide — the toggle + brand mark + wordmark can't
   fit, so the gradient mark overflowed and bled past the edge. Drop the brand
   link entirely and center the lone hamburger toggle (still expands the rail). */
html.sidebar-collapsed .sidebar-brand { justify-content: center; gap: 0; padding-left: 0; padding-right: 0; }
html.sidebar-collapsed .sidebar-brand-link { display: none; }

/* Nav links: rounded pills, animated hover, glowing active accent */
.sidebar-nav { padding: 10px 0; }
.sidebar-nav-link {
    margin: 2px 10px;
    padding: 8px 12px;
    border-radius: 9px;
    border-left: none !important;
    position: relative;
    transition: background .15s ease, color .15s ease;
}
.sidebar-nav-icon { color: var(--sidebar-text); transition: color .15s ease; }
.sidebar-nav-icon i { font-size: 1.05rem; vertical-align: -1px; }
.sidebar-nav-link:hover { background: rgba(255, 255, 255, .06); }
.sidebar-nav-link.active {
    background: linear-gradient(90deg, rgba(var(--bs-primary-rgb), .22), rgba(var(--bs-primary-rgb), .04));
    color: #fff;
    font-weight: 600;
}
.sidebar-nav-link.active .sidebar-nav-icon { color: var(--sidebar-active-text); }
.sidebar-nav-link.active::before {
    content: ''; position: absolute; left: -10px; top: 7px; bottom: 7px;
    width: 3px; border-radius: 0 3px 3px 0;
    background: var(--bs-primary);
    box-shadow: 0 0 10px rgba(var(--bs-primary-rgb), .8);
}
html.sidebar-collapsed .sidebar-nav-link { margin: 2px 6px; justify-content: center; }
html.sidebar-collapsed .sidebar-nav-link.active::before { display: none; }

.sidebar-section-label { opacity: .55; letter-spacing: .1em; }

/* Profile chip (replaces bare logout) */
.sidebar-profile {
    display: flex; align-items: center; gap: 10px;
    margin: 8px; padding: 8px 10px;
    border-radius: 11px;
    background: rgba(255, 255, 255, .04);
    border: 1px solid rgba(255, 255, 255, .07);
}
.sidebar-avatar {
    width: 34px; height: 34px; border-radius: 50%; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, var(--app-accent), var(--app-accent-2));
    color: #fff; font-weight: 700; font-size: .78rem; letter-spacing: .02em;
    box-shadow: 0 2px 6px rgba(0, 0, 0, .35);
}
.sidebar-profile-meta { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.sidebar-profile-name {
    font-size: .82rem; font-weight: 600; color: #e7ecf5;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sidebar-profile-role { font-size: .7rem; color: var(--sidebar-text); }
.sidebar-logout-form { margin: 0; flex-shrink: 0; }
.sidebar-logout-btn {
    background: transparent; border: none; color: var(--sidebar-text);
    cursor: pointer; padding: 5px 7px; border-radius: 7px; font-size: 1rem;
    line-height: 1; transition: background .15s ease, color .15s ease;
}
.sidebar-logout-btn:hover { background: rgba(255, 255, 255, .09); color: #fff; }
html.sidebar-collapsed .sidebar-profile { justify-content: center; padding: 8px; }
html.sidebar-collapsed .sidebar-profile-meta,
html.sidebar-collapsed .sidebar-logout-form { display: none; }

/* ─────────────────────────────────────────────────────────────
   Topbar — search with leading icon, icon buttons, avatar chip
   ───────────────────────────────────────────────────────────── */
.app-topbar { box-shadow: 0 1px 0 rgba(0, 0, 0, .04); }

.topbar-search { width: 340px; }
.topbar-search-icon {
    position: absolute; left: 13px; top: 50%; transform: translateY(-50%);
    color: var(--bs-secondary-color); font-size: .9rem; pointer-events: none;
}
.topbar-search .form-control {
    padding-left: 36px; height: 36px;
    transition: background .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.topbar-search .form-control:focus {
    box-shadow: 0 0 0 .2rem rgba(var(--bs-primary-rgb), .2);
}

.topbar-btn { font-size: 1.15rem; transition: background .15s ease, color .15s ease; }
.topbar-btn:hover { color: var(--bs-primary); }

.topbar-avatar {
    width: 32px; height: 32px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, var(--app-accent), var(--app-accent-2));
    color: #fff; font-weight: 700; font-size: .76rem; letter-spacing: .02em;
    box-shadow: 0 2px 6px rgba(0, 0, 0, .25); cursor: default; user-select: none;
}

/* ─────────────────────────────────────────────────────────────
   KPI tiles (dashboard) — icon chip + big value, HubSpot card style
   ───────────────────────────────────────────────────────────── */
.kpi-tile .card-body {
    display: flex; align-items: center; gap: 14px;
    padding: 1.1rem 1.25rem;
}
.kpi-tile { transition: transform .15s ease, box-shadow .15s ease; }
.kpi-tile:hover { transform: translateY(-2px); }
.kpi-icon {
    width: 50px; height: 50px; border-radius: 13px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center; font-size: 1.45rem;
}
.kpi-icon-primary { background: rgba(20, 184, 166, .16);  color: #0d9488; }
[data-bs-theme="dark"] .kpi-icon-primary { color: #2dd4bf; }
.kpi-icon-info    { background: rgba(14, 165, 233, .15);  color: #38bdf8; }
.kpi-icon-warning { background: rgba(245, 158, 11, .16);  color: #f59e0b; }
.kpi-icon-success { background: rgba(16, 185, 129, .16);  color: #10b981; }
.kpi-icon-danger  { background: rgba(244, 63, 94, .15);   color: #f43f5e; }
[data-bs-theme="dark"] .kpi-icon-warning { color: #fbbf24; }
[data-bs-theme="dark"] .kpi-icon-success { color: #34d399; }
.kpi-meta { min-width: 0; }
.kpi-label {
    font-size: .72rem; text-transform: uppercase; letter-spacing: .05em;
    color: var(--bs-secondary-color); font-weight: 600; margin-bottom: 2px;
}
.kpi-value { font-size: 1.7rem; font-weight: 700; line-height: 1.1; letter-spacing: -0.02em; }

/* ─────────────────────────────────────────────────────────────
   Surfaces — cards / dropdowns / modals elevation scale + depth
   ───────────────────────────────────────────────────────────── */
.card { border-radius: var(--app-radius); }
.card:hover { box-shadow: 0 6px 20px rgba(15, 23, 42, .08); }

[data-bs-theme="dark"] .card {
    background-color: #161f31;
    background-image: linear-gradient(180deg, rgba(255, 255, 255, .022), transparent 64px);
    border: 1px solid #28344b;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .25);
}
[data-bs-theme="dark"] .card:hover { box-shadow: 0 10px 28px rgba(0, 0, 0, .42); }
[data-bs-theme="dark"] .card-header {
    background-color: rgba(255, 255, 255, .018);
    border-bottom-color: #28344b;
}
[data-bs-theme="dark"] .card-footer {
    background-color: rgba(0, 0, 0, .18);
    border-top-color: #28344b;
}
.card-header { padding-top: .9rem; padding-bottom: .9rem; }

[data-bs-theme="dark"] .dropdown-menu {
    background-color: #1b2740; border-color: #2c3a52;
    box-shadow: 0 14px 36px rgba(0, 0, 0, .55);
    border-radius: var(--app-radius); padding: .35rem;
}
[data-bs-theme="dark"] .dropdown-item { border-radius: var(--app-radius-sm); }

[data-bs-theme="dark"] .modal-content {
    background-color: #161f31; border: 1px solid #28344b;
    border-radius: var(--app-radius); box-shadow: 0 28px 64px rgba(0, 0, 0, .6);
}
[data-bs-theme="dark"] .modal-header,
[data-bs-theme="dark"] .modal-footer { border-color: #28344b; }

/* ─────────────────────────────────────────────────────────────
   Soft "tag" badges — tinted bg + colored text, not loud fills
   ───────────────────────────────────────────────────────────── */
.badge {
    font-weight: 600; font-size: .72rem; padding: .36em .62em;
    border-radius: 999px; letter-spacing: .005em; line-height: 1.35;
}
.badge.bg-primary   { background-color: rgba(20, 184, 166, .14) !important; color: #0f766e !important; }
.badge.bg-secondary { background-color: rgba(100, 116, 139, .15) !important; color: #475569 !important; }
.badge.bg-success   { background-color: rgba(5, 150, 105, .13)  !important; color: #047857 !important; }
.badge.bg-danger    { background-color: rgba(220, 53, 69, .13)  !important; color: #be123c !important; }
.badge.bg-warning   { background-color: rgba(245, 158, 11, .16) !important; color: #b45309 !important; }
.badge.bg-info      { background-color: rgba(2, 132, 199, .13)  !important; color: #0369a1 !important; }
.badge.bg-dark      { background-color: rgba(30, 41, 59, .12)   !important; color: #334155 !important; }

[data-bs-theme="dark"] .badge.bg-primary   { background-color: rgba(45, 212, 191, .2) !important; color: #5eead4 !important; }
[data-bs-theme="dark"] .badge.bg-secondary { background-color: rgba(148, 163, 184, .16) !important; color: #cbd5e1 !important; }
[data-bs-theme="dark"] .badge.bg-success   { background-color: rgba(16, 185, 129, .18)  !important; color: #6ee7b7 !important; }
[data-bs-theme="dark"] .badge.bg-danger    { background-color: rgba(244, 63, 94, .18)   !important; color: #fca5a5 !important; }
[data-bs-theme="dark"] .badge.bg-warning   { background-color: rgba(245, 158, 11, .2)   !important; color: #fcd34d !important; }
[data-bs-theme="dark"] .badge.bg-info      { background-color: rgba(14, 165, 233, .18)  !important; color: #7dd3fc !important; }
[data-bs-theme="dark"] .badge.bg-dark      { background-color: rgba(148, 163, 184, .14) !important; color: #cbd5e1 !important; }

/* ─────────────────────────────────────────────────────────────
   Buttons — gradient primary with glow, calmer radius, focus ring
   ───────────────────────────────────────────────────────────── */
.btn {
    border-radius: var(--app-radius-sm); font-weight: 500;
    transition: background-color .15s ease, border-color .15s ease,
        color .15s ease, box-shadow .15s ease, background-image .15s ease;
}
.btn-sm { border-radius: .4rem; }
/* Deep-teal surface keeps white button text at AA contrast; the bright teal
   lives in avatars/brand/links/glows instead. */
.btn-primary {
    background-image: linear-gradient(135deg, #0d9488, #0f766e);
    border-color: #0f766e;
    box-shadow: 0 2px 10px rgba(13, 148, 136, .4);
}
.btn-primary:hover, .btn-primary:focus {
    background-image: linear-gradient(135deg, #0f766e, #115e59);
    border-color: #115e59;
}

/* Dark-mode outline-primary + table links are hardcoded to indigo in
   header.php — retune to teal so nothing periwinkle remains. */
[data-bs-theme="dark"] .btn-outline-primary {
    --bs-btn-color: #2dd4bf;
    --bs-btn-border-color: #2dd4bf;
    --bs-btn-hover-bg: #2dd4bf;
    --bs-btn-hover-border-color: #2dd4bf;
    --bs-btn-hover-color: #06302b;
}
/* Table links stay calm (body text + underline) so dense tables don't turn
   into a wall of teal — the accent only appears on hover. */
[data-bs-theme="dark"] .table a { color: var(--bs-body-color); }
[data-bs-theme="dark"] .table a:hover { color: #5eead4; }
[data-bs-theme="light"] .table a { color: var(--bs-body-color); }
[data-bs-theme="light"] .table a:hover { color: #0d9488; }
.btn:focus-visible {
    box-shadow: 0 0 0 .2rem rgba(var(--bs-primary-rgb), .35); outline: none;
}

/* ─────────────────────────────────────────────────────────────
   Forms — softer radius, consistent accessible focus
   ───────────────────────────────────────────────────────────── */
.form-control, .form-select { border-radius: var(--app-radius-sm); }
.form-control:focus, .form-select:focus {
    box-shadow: 0 0 0 .2rem rgba(var(--bs-primary-rgb), .18);
}

/* ─────────────────────────────────────────────────────────────
   Tables — more breathing room (skips compact .table-sm)
   ───────────────────────────────────────────────────────────── */
.table:not(.table-sm) > :not(caption) > * > * {
    padding-top: .68rem; padding-bottom: .68rem;
}
.table-hover > tbody > tr { transition: background-color .12s ease; }
[data-bs-theme="dark"] .table {
    --bs-table-bg: #161f31; --bs-table-border-color: #28344b;
}
[data-bs-theme="dark"] .table-hover > tbody > tr:hover > * {
    --bs-table-bg-state: rgba(45, 212, 191, .1);
}

/* List pages (/contacts, /companies, /tasks…) use <thead class="table-dark">,
   which renders a heavy bar. The dashboard uses a plain <thead> — a blended
   header with bold uppercase text — and that's the look we want everywhere.
   So neutralize .table-dark to match the dashboard's plain header (don't touch
   plain theads). Compact .table-sm tables keep their own headers. */
.table:not(.table-sm) > thead.table-dark,
.table:not(.table-sm) > thead.table-dark > tr > th {
    --bs-table-bg: transparent;
    --bs-table-color: var(--bs-body-color);
    --bs-table-border-color: var(--bs-border-color);
    /* Opaque, not transparent: these headers are pinned via .table-sticky, so a
       transparent background lets scrolled rows show through and overlap the
       header text. Match the card surface so it stays "blended" at rest but
       covers rows when stuck. Dark mode is overridden below because it sets the
       card colour directly without updating --bs-card-bg. */
    background-color: var(--bs-card-bg, var(--bs-body-bg));
    color: var(--bs-body-color);
}
[data-bs-theme="dark"] .table:not(.table-sm) > thead.table-dark > tr > th {
    background-color: #1e293b; /* matches [data-bs-theme="dark"] .card */
}
.table:not(.table-sm) > thead.table-dark th a,
.table:not(.table-sm) > thead.table-dark th a:hover { color: var(--bs-body-color); }

/* ─────────────────────────────────────────────────────────────
   Stat cards (legacy) — keep numerals crisp
   ───────────────────────────────────────────────────────────── */
.stat-card .stat-value { letter-spacing: -0.02em; }
.stat-card { border-radius: var(--app-radius); }

/* ─────────────────────────────────────────────────────────────
   Custom thin scrollbars in dark mode
   ───────────────────────────────────────────────────────────── */
[data-bs-theme="dark"] { scrollbar-width: thin; scrollbar-color: #3a4a64 transparent; }
[data-bs-theme="dark"] ::-webkit-scrollbar { width: 11px; height: 11px; }
[data-bs-theme="dark"] ::-webkit-scrollbar-track { background: transparent; }
[data-bs-theme="dark"] ::-webkit-scrollbar-thumb {
    background: #3a4a64; border-radius: 8px;
    border: 3px solid transparent; background-clip: content-box;
}
[data-bs-theme="dark"] ::-webkit-scrollbar-thumb:hover {
    background: #4b5d7a; background-clip: content-box;
}

/* ─────────────────────────────────────────────────────────────
   Accessibility — visible keyboard focus, motion-safe
   ───────────────────────────────────────────────────────────── */
a:focus-visible, .sidebar-nav-link:focus-visible, .topbar-btn:focus-visible,
.sidebar-logout-btn:focus-visible, .page-link:focus-visible {
    outline: 2px solid var(--bs-primary); outline-offset: 2px; border-radius: 4px;
}
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        transition-duration: .01ms !important; animation-duration: .01ms !important;
    }
}

/* ─────────────────────────────────────────────────────────────
   Phone widths — touch sizes, the top bar panels, the bottom bar
   ───────────────────────────────────────────────────────────── */
.app-bottom-nav { display: none; }
@media (max-width: 767.98px) {
    /* ── Bottom bar ── One tap reaches the main pages. "More" opens the menu,
       so the top bar does not need its menu button here. The bar sits below
       the top bar (z 1040), the menu, and each full-screen panel. */
    :root { --bottom-nav-height: 56px; }
    .app-bottom-nav {
        position: fixed; left: 0; right: 0; bottom: 0; z-index: 1030;
        display: grid; grid-template-columns: repeat(5, 1fr);
        height: calc(var(--bottom-nav-height) + env(safe-area-inset-bottom, 0px));
        padding: 0 env(safe-area-inset-right, 0px) env(safe-area-inset-bottom, 0px) env(safe-area-inset-left, 0px);
        background: var(--topbar-bg); border-top: 1px solid var(--topbar-border);
        box-shadow: 0 -2px 10px rgba(0, 0, 0, .06);
    }
    .bottom-nav-item {
        position: relative; min-width: 0;
        display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
        background: transparent; border: 0; padding: 0;
        color: var(--bs-secondary-color); text-decoration: none;
        font-size: .6875rem; font-weight: 500; line-height: 1.2;
        -webkit-tap-highlight-color: transparent;
    }
    .bottom-nav-item .bi { font-size: 1.3rem; line-height: 1; }
    .bottom-nav-item.active { color: var(--app-accent-2); font-weight: 600; }
    [data-bs-theme="dark"] .bottom-nav-item.active { color: var(--app-accent); }
    .bottom-nav-item:active { background: var(--bs-tertiary-bg); }
    .bottom-nav-item:focus-visible { outline: 2px solid var(--bs-primary); outline-offset: -3px; border-radius: 8px; }
    .bottom-nav-badge {
        position: absolute; top: 5px; left: calc(50% + 6px);
        min-width: 18px; padding: 1px 5px; border-radius: 9px;
        background: var(--bs-danger); color: #fff;
        font-size: .625rem; font-weight: 600; line-height: 1.4; text-align: center;
    }
    .mobile-toggle { display: none !important; }
    .app-footer { padding-bottom: calc(16px + var(--bottom-nav-height) + env(safe-area-inset-bottom, 0px)); }

    /* iOS Safari zooms the page when a field below 16px gets focus. */
    .form-control, .form-select, .form-control-sm, .form-select-sm,
    .topbar-search .form-control { font-size: 16px; }

    /* A finger needs about 44px. Bootstrap controls are 31px to 38px tall. */
    .form-control, .form-select { min-height: 44px; }
    textarea.form-control { min-height: 4.5rem; }
    .btn { --bs-btn-padding-y: .5625rem; }
    .btn-sm, .btn-group-sm > .btn { --bs-btn-padding-y: .6875rem; }
    .btn { min-width: 44px; }
    .page-link { min-width: 44px; min-height: 44px; display: flex; align-items: center; justify-content: center; }
    .nav-tabs .nav-link, .nav-pills .nav-link { min-height: 44px; }
    .form-check-input { width: 1.375rem; height: 1.375rem; margin-top: .1rem; }
    .form-check { padding-left: 1.875rem; }
    .form-check .form-check-input { margin-left: -1.875rem; }
    .form-switch { padding-left: 3rem; }
    .form-switch .form-check-input { width: 2.5rem; margin-left: -3rem; }
    .form-check-label { padding-top: .2rem; }

    .app-topbar { padding: 0 8px 0 12px; gap: 6px; }
    .topbar-actions { gap: 2px; }
    .topbar-btn {
        min-width: 44px; min-height: 44px; padding: 0;
        display: inline-flex; align-items: center; justify-content: center;
    }
    .topbar-search { flex: 1 1 auto; width: auto; min-width: 0; }
    .topbar-search .form-control { height: 40px; min-height: 40px; }
    .topbar-spacer { display: none; }

    /* Both panels span the screen under the top bar. The search panel was
       380px wide and started left of the screen edge. The notification
       panel was 350px wide and cut its text on the right. */
    .global-search-results,
    #notif-dropdown {
        position: fixed !important;
        inset: calc(var(--topbar-height) + 4px) 8px auto 8px !important;
        transform: none !important;
        width: auto !important;
        max-height: calc(100dvh - var(--topbar-height) - 16px) !important;
    }
    #notif-dropdown .dropdown-item { white-space: normal; overflow-wrap: anywhere; }
    .global-search-results .gs-item { padding-top: .65rem; padding-bottom: .65rem; }
}