/* ============================================================
   Time Tracker — minimalist light theme
   Layered on top of Bootstrap 5 (grid + JS behaviors only).
   ============================================================ */

:root {
    --bg: #f5f7fa; /* neutral cool grey, shared by every theme */
    --surface: #ffffff;
    --ink: #0b1f17;
    --ink-2: #2f4a3e;
    --muted: #5f7a6d;
    --faint: #8fa89b;
    --border: #e2ece7;
    --border-strong: #cbdcd3;

    --accent: #0e9f6e;
    --accent-hover: #057a55;
    --accent-soft: #def7ec;

    --success: #057a55;
    --success-soft: #def7ec;
    --danger: #dc2626;
    --danger-soft: #fef2f2;
    --warning: #b45309;
    --warning-soft: #fffbeb;

    --hover-bg: #eef5f1;
    --row-hover: #f8fbf9;
    --nav-bg: rgba(255, 255, 255, .85);
    --tracker-border: #b7e7d2;
    --stop-hover: #fecaca;

    --radius: 14px;
    --radius-sm: 10px;
    --shadow: 0 1px 2px rgba(15, 23, 42, .04), 0 8px 24px rgba(15, 23, 42, .06);
    --shadow-sm: 0 1px 2px rgba(15, 23, 42, .05);
    --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* ---------- Base ---------- */

html { scroll-behavior: smooth; }

body {
    font-family: var(--font);
    background: var(--bg);
    color: var(--ink);
    font-size: 14.5px;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6 {
    font-weight: 650;
    letter-spacing: -0.02em;
    color: var(--ink);
}

h1 { font-size: 1.55rem; }
h2 { font-size: 1.3rem; }

a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-hover); }

::selection { background: var(--accent-soft); color: var(--accent-hover); }

/* ---------- Top navigation ---------- */

.tt-nav {
    background: var(--nav-bg);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--border);
    position: sticky;
    top: 0;
    z-index: 1030;
}

.tt-nav .navbar-brand {
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--ink);
    display: flex;
    align-items: center;
    gap: 9px;
    font-size: 1.02rem;
}

.tt-brand-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--accent);
    box-shadow: 0 0 0 4px var(--accent-soft);
    display: inline-block;
}

.tt-nav .nav-link {
    color: var(--muted);
    font-weight: 500;
    font-size: .92rem;
    padding: .5rem .85rem !important;
    border-radius: 8px;
    transition: color .15s ease, background .15s ease;
}

.tt-nav .nav-link:hover { color: var(--ink); background: var(--hover-bg); }

.tt-nav .nav-link.active {
    color: var(--accent-hover);
    background: var(--accent-soft);
}

.tt-nav .dropdown-toggle { color: var(--ink-2); font-weight: 500; }

.tt-avatar {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--accent-soft);
    color: var(--accent-hover);
    font-size: .78rem;
    font-weight: 650;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-transform: uppercase;
}

/* ---------- Cards ---------- */

.card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
}

.card-header {
    background: transparent;
    border-bottom: 1px solid var(--border);
    font-weight: 600;
    font-size: .95rem;
    color: var(--ink);
    padding: .95rem 1.25rem;
}

.card-body { padding: 1.25rem; }

/* ---------- Stat tiles ---------- */

.stat-tile {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    padding: 1.1rem 1.25rem;
    height: 100%;
}

.stat-tile .stat-label {
    font-size: .8rem;
    font-weight: 500;
    color: var(--muted);
    margin-bottom: .35rem;
}

.stat-tile .stat-value {
    font-size: 1.65rem;
    font-weight: 650;
    letter-spacing: -0.02em;
    color: var(--ink);
    line-height: 1.15;
}

.stat-tile .stat-note {
    font-size: .8rem;
    color: var(--faint);
    margin-top: .3rem;
}

.stat-tile .stat-value .unit {
    font-size: 1rem;
    color: var(--muted);
    font-weight: 550;
    margin-left: 1px;
}

/* ---------- Buttons ---------- */

.btn {
    border-radius: var(--radius-sm);
    font-weight: 550;
    font-size: .9rem;
    padding: .5rem 1rem;
    transition: all .15s ease;
    box-shadow: none !important;
}

.btn-primary {
    background: var(--accent);
    border-color: var(--accent);
}

.btn-primary:hover, .btn-primary:focus, .btn-primary:active {
    background: var(--accent-hover) !important;
    border-color: var(--accent-hover) !important;
}

.btn-outline-secondary, .btn-secondary {
    background: var(--surface);
    color: var(--ink-2);
    border: 1px solid var(--border-strong);
}

.btn-outline-secondary:hover, .btn-secondary:hover {
    background: var(--hover-bg);
    color: var(--ink);
    border-color: var(--border-strong);
}

.btn-danger {
    background: transparent;
    color: var(--danger);
    border: 1px solid transparent;
}

.btn-danger:hover {
    background: var(--danger-soft);
    color: var(--danger);
    border-color: transparent;
}

.btn-warning {
    background: var(--surface);
    color: var(--warning);
    border: 1px solid var(--border-strong);
}

.btn-warning:hover { background: var(--warning-soft); color: var(--warning); border-color: var(--border-strong); }

.btn-info {
    background: var(--surface);
    color: var(--ink-2);
    border: 1px solid var(--border-strong);
}

.btn-info:hover { background: var(--hover-bg); color: var(--ink); }

.btn-lg { padding: .7rem 1.6rem; font-size: 1rem; border-radius: 12px; }
.btn-sm, .btn-group-sm > .btn { font-size: .82rem; padding: .3rem .7rem; border-radius: 8px; }

/* ---------- Forms ---------- */

.form-label {
    font-size: .85rem;
    font-weight: 550;
    color: var(--ink-2);
    margin-bottom: .35rem;
}

.form-control, .form-select {
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    padding: .55rem .8rem;
    font-size: .92rem;
    color: var(--ink);
    background: var(--surface);
    transition: border-color .15s ease, box-shadow .15s ease;
}

.form-control::placeholder { color: var(--faint); }

.form-control:focus, .form-select:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-soft);
}

/* ---------- Tables ---------- */

.table {
    color: var(--ink);
    font-size: .9rem;
    margin-bottom: 0;
}

.table thead th {
    font-size: .74rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--faint);
    border-bottom: 1px solid var(--border);
    padding: .65rem .9rem;
    white-space: nowrap;
}

.table tbody td {
    padding: .8rem .9rem;
    border-bottom: 1px solid var(--hover-bg);
    vertical-align: middle;
    color: var(--ink-2);
}

.table tbody tr:last-child td { border-bottom: none; }

.table-hover tbody tr:hover { background: var(--row-hover); }

/* ---------- Badges ---------- */

.badge {
    font-weight: 550;
    font-size: .74rem;
    padding: .32em .7em;
    border-radius: 999px;
    letter-spacing: .01em;
}

.badge.bg-success {
    background: var(--success-soft) !important;
    color: var(--success);
}

.badge.bg-secondary {
    background: var(--hover-bg) !important;
    color: var(--muted);
}

.badge.bg-success.pulse::before {
    content: '';
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--success);
    margin-right: 6px;
    animation: tt-pulse 1.6s ease-in-out infinite;
}

@keyframes tt-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: .35; }
}

/* ---------- Alerts (flash messages) ---------- */

.alert {
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    font-size: .9rem;
    padding: .75rem 1rem;
}

.alert-danger { background: var(--danger-soft); color: #991b1b; border-color: #fecaca; }
.alert-success { background: var(--success-soft); color: #065f46; border-color: #a7f3d0; }

/* ---------- Modal ---------- */

.modal-content {
    background: var(--surface);
    color: var(--ink);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}

.modal-header { border-bottom: 1px solid var(--border); }
.modal-footer { border-top: 1px solid var(--border); }
.modal-title { font-size: 1.02rem; font-weight: 650; }

/* ---------- Dropdown ---------- */

.dropdown-menu {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 12px;
    box-shadow: var(--shadow);
    font-size: .9rem;
    padding: .4rem;
}

.dropdown-item { border-radius: 8px; padding: .45rem .75rem; color: var(--ink-2); }
.dropdown-item:hover { background: var(--hover-bg); color: var(--ink); }
.dropdown-divider { border-color: var(--border); }

/* ---------- Timer ---------- */

.tt-timer-display {
    font-size: clamp(2.6rem, 6vw, 4rem);
    font-weight: 650;
    letter-spacing: -0.01em;
    font-variant-numeric: tabular-nums;
    font-feature-settings: 'tnum';
    color: var(--ink);
    line-height: 1;
}

.tt-timer-display.running { color: var(--accent); }

.tt-timer-status {
    font-size: .88rem;
    font-weight: 500;
    color: var(--muted);
}

.tt-timer-status.text-success { color: var(--success) !important; }

/* ---------- Page header ---------- */

.page-header { margin: 1.6rem 0 1.4rem; }

.page-header .subtitle {
    color: var(--muted);
    font-size: .92rem;
    margin-top: .15rem;
}

/* ---------- Screenshots grid ---------- */

.shot-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    transition: box-shadow .18s ease, transform .18s ease;
}

.shot-card:hover { box-shadow: var(--shadow); transform: translateY(-2px); }

.shot-card img {
    width: 100%;
    aspect-ratio: 16 / 10;
    object-fit: cover;
    display: block;
    background: var(--hover-bg);
}

.shot-card .shot-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: .6rem .85rem;
    font-size: .8rem;
    color: var(--muted);
}

/* ---------- Empty states ---------- */

.empty-state {
    text-align: center;
    padding: 3rem 1rem;
    color: var(--muted);
}

.empty-state .empty-icon {
    font-size: 1.8rem;
    display: block;
    margin-bottom: .5rem;
    opacity: .5;
}

.empty-state .empty-title { font-weight: 600; color: var(--ink-2); margin-bottom: .2rem; }

/* ---------- Auth pages ---------- */

.auth-wrap {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2rem 1rem;
    background:
        radial-gradient(1200px 500px at 50% -10%, var(--accent-soft), transparent 60%),
        var(--bg);
}

.auth-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 700;
    font-size: 1.15rem;
    color: var(--ink);
    margin-bottom: 1.4rem;
    letter-spacing: -0.02em;
}

.auth-container {
    width: 100%;
    max-width: 400px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 18px;
    box-shadow: var(--shadow);
    padding: 2rem;
}

.auth-container h2 {
    font-size: 1.25rem;
    margin-bottom: .25rem;
}

.auth-sub {
    color: var(--muted);
    font-size: .9rem;
    margin-bottom: 1.4rem;
}

.auth-footer-note {
    color: var(--faint);
    font-size: .82rem;
    margin-top: 1.5rem;
}

/* ---------- Misc ---------- */

.text-muted { color: var(--muted) !important; }

.tt-quiet { color: var(--faint); font-size: .82rem; }

.btn-group-sm > .btn + .btn, .btn-group-sm > form { margin-left: .35rem; }

/* ---------- Permission groups & filter bar ---------- */

.perm-group {
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: .75rem .9rem;
}

.perm-group-title {
    font-size: .74rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--faint);
    margin-bottom: .5rem;
}

.filter-bar .form-label {
    font-size: .74rem;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--faint);
    margin-bottom: .25rem;
}

.filter-bar .form-control, .filter-bar .form-select {
    font-size: .87rem;
    padding: .4rem .65rem;
}

/* sortable table headers — anchors on the old server-rendered tables,
   buttons on the Alpine ones; both look identical */
th .sort-link {
    color: inherit;
    text-decoration: none;
    background: none; border: none; padding: 0;
    font: inherit; text-transform: inherit; letter-spacing: inherit;
    cursor: pointer;
}

th .sort-link:hover { color: var(--accent-hover); }

th .sort-link.active { color: var(--accent-hover); }

/* an Alpine table refreshing in place dims briefly instead of emptying */
.tt-table-loading { opacity: .55; transition: opacity .12s ease; pointer-events: none; }

.summary-bar {
    height: 6px;
    border-radius: 999px;
    background: var(--accent-soft);
    overflow: hidden;
    min-width: 120px;
}

.summary-bar > span {
    display: block;
    height: 100%;
    background: var(--accent);
    border-radius: 999px;
}

/* ---------- Report charts ---------- */

.rpt-chart { display: block; }

.rpt-bar {
    fill: var(--accent);
    opacity: .92;
    transition: opacity .12s ease;
}

.rpt-bar:hover { opacity: 1; fill: var(--accent-hover); }

.rpt-project-row { margin-bottom: .9rem; }
.rpt-project-row:last-child { margin-bottom: 0; }

.rpt-project-name {
    font-size: .88rem;
    font-weight: 550;
    color: var(--ink);
}

/* ---------- Table cards: keep the card's rounded corners ---------- */

.card .table-responsive {
    border-bottom-left-radius: calc(var(--radius) - 1px);
    border-bottom-right-radius: calc(var(--radius) - 1px);
}

/* ---------- Fix: Bootstrap paints table cell backgrounds over card corners ---------- */

.table {
    --bs-table-bg: transparent;
}

.card .card-body.p-0:first-child .table-responsive,
.card > .table-responsive:first-child {
    border-top-left-radius: calc(var(--radius) - 1px);
    border-top-right-radius: calc(var(--radius) - 1px);
}

/* ---------- Toasts ---------- */

#ttToasts {
    position: fixed;
    bottom: 16px;              /* toasts live bottom-right, out of the way */
    right: 16px;
    z-index: 2200;             /* above modals and the composer */
    display: flex;
    flex-direction: column-reverse; /* newest nearest the corner */
    gap: 8px;
    pointer-events: none;
}

.tt-toast {
    background: var(--surface);
    border: 1px solid var(--border);
    border-left: 3px solid var(--accent);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow);
    padding: .6rem .9rem;
    font-size: .88rem;
    color: var(--ink);
    max-width: 340px;
    opacity: 0;
    transform: translateY(6px);
    transition: opacity .25s ease, transform .25s ease;
}

.tt-toast.show { opacity: 1; transform: translateY(0); }
.tt-toast-error { border-left-color: var(--danger); }

/* ---------- App-styled confirm / alert modal (replaces window.confirm) ---------- */

.tt-dialog-backdrop {
    position: fixed; inset: 0; z-index: 2100;
    background: rgba(11, 31, 23, .42);
    display: flex; align-items: center; justify-content: center;
    padding: 16px;
    opacity: 0; transition: opacity .16s ease;
}
.tt-dialog-backdrop.show { opacity: 1; }
.tt-dialog {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius, 12px);
    box-shadow: 0 18px 50px rgba(15, 23, 42, .28);
    width: min(430px, 94vw);
    padding: 18px 20px 16px;
    transform: translateY(8px) scale(.98);
    transition: transform .16s ease;
}
.tt-dialog-backdrop.show .tt-dialog { transform: none; }
.tt-dialog-title {
    font-weight: 700; font-size: 1rem; color: var(--ink);
    display: flex; align-items: center; gap: 8px; margin-bottom: 8px;
}
.tt-dialog-title .tt-dialog-ico {
    width: 30px; height: 30px; border-radius: 50%; flex: none;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--accent-soft); color: var(--accent); font-size: 1rem;
}
.tt-dialog.is-danger .tt-dialog-title .tt-dialog-ico { background: #fde8e8; color: var(--danger); }
.tt-dialog-body { font-size: .9rem; color: var(--muted); white-space: pre-line; margin-bottom: 16px; }
.tt-dialog-actions { display: flex; justify-content: flex-end; gap: 8px; }

/* ---------- Navbar mini tracker ---------- */

.tt-nav-tracker {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 999px;
    padding: 4px 6px 4px 8px;
}

.tt-nav-tracker-project {
    font-size: .82rem;
    font-weight: 550;
    color: var(--ink-2);
    white-space: nowrap;
}

.tt-nav-start-menu { min-width: 260px; }
.tt-nav-start-menu .form-label {
    font-size: .74rem;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--faint);
}

/* ---------- Mini tracker v2 ---------- */

.tt-start-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: linear-gradient(180deg, var(--accent), var(--accent-hover));
    color: #fff;
    border: none;
    border-radius: 999px;
    padding: .45rem 1.05rem;
    font-size: .85rem;
    font-weight: 600;
    letter-spacing: .01em;
    box-shadow: 0 1px 2px transparent, 0 4px 12px transparent; box-shadow: 0 1px 2px color-mix(in srgb, var(--accent-hover) 25%, transparent), 0 4px 12px color-mix(in srgb, var(--accent) 28%, transparent);
    transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
}

.tt-start-btn:hover {
    transform: translateY(-1px);
    filter: brightness(1.05);
    box-shadow: 0 2px 4px transparent, 0 6px 16px transparent; box-shadow: 0 2px 4px color-mix(in srgb, var(--accent-hover) 28%, transparent), 0 6px 16px color-mix(in srgb, var(--accent) 35%, transparent);
    color: #fff;
}

.tt-start-btn:active { transform: translateY(0); filter: brightness(.98); }

.tt-nav-tracker.running {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--surface);
    border: 1px solid var(--tracker-border);
    border-radius: 999px;
    padding: 5px 6px 5px 12px;
    box-shadow: 0 1px 2px transparent, inset 0 0 0 3px var(--accent-soft); box-shadow: 0 1px 2px color-mix(in srgb, var(--accent-hover) 8%, transparent), inset 0 0 0 3px var(--accent-soft);
}

.tt-live-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--accent);
    box-shadow: 0 0 0 3px transparent; box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent);
    animation: tt-pulse 1.6s ease-in-out infinite;
}

.tt-nav-time {
    font-variant-numeric: tabular-nums;
    font-feature-settings: 'tnum';
    font-weight: 650;
    font-size: .88rem;
    color: var(--accent-hover);
    letter-spacing: .01em;
}

.tt-stop-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    border: none;
    background: var(--danger-soft);
    color: var(--danger);
    transition: background .15s ease, transform .15s ease;
}

.tt-stop-btn:hover { background: var(--stop-hover); transform: scale(1.06); }

/* ---------- AJAX region loading state ---------- */

[data-ajax-region].tt-loading {
    opacity: .45;
    pointer-events: none;
    transition: opacity .15s ease;
}

/* ============================================================
   Icons, motion & SPA polish
   ============================================================ */

/* ---------- Icons ---------- */

.tt-icon {
    width: 1.14em;
    height: 1.14em;
    flex: none;
    vertical-align: -0.18em;
}

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

.tt-nav .nav-link {
    display: inline-flex;
    align-items: center;
    gap: 7px;
}

.tt-nav .nav-link .tt-icon { width: 1.02em; height: 1.02em; opacity: .8; }
.tt-nav .nav-link.active .tt-icon { opacity: 1; }

.dropdown-item {
    display: flex;
    align-items: center;
    gap: 8px;
}

.dropdown-item .tt-icon { opacity: .7; }

.empty-state .empty-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    border-radius: 14px;
    background: var(--accent-soft);
    color: var(--accent-hover);
    margin-bottom: .65rem;
    opacity: 1;
    font-size: 1rem;
}

.empty-state .empty-icon .tt-icon { width: 22px; height: 22px; }

/* ---------- Motion ---------- */

@keyframes tt-rise {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: none; }
}

@keyframes tt-pop-in {
    from { opacity: 0; transform: translateY(-5px) scale(.98); }
    to { opacity: 1; transform: none; }
}

main#ttMain .page-header { animation: tt-rise .4s cubic-bezier(.2,.7,.3,1) both; }
main#ttMain .card,
main#ttMain .stat-tile { animation: tt-rise .45s cubic-bezier(.2,.7,.3,1) both; }

/* Reattached keep-alive tabs must NOT replay entry animations — the page
   is already "entered"; replaying reads as a fake reload. (tt-instant is
   set by the tab engine when it re-attaches a kept-alive page.) */
main#ttMain.tt-instant,
main#ttMain.tt-instant .page-header,
main#ttMain.tt-instant .card,
main#ttMain.tt-instant .stat-tile { animation: none !important; }

/* gentle stagger for grids of tiles/cards */
main#ttMain .row > [class*="col"]:nth-child(2) .stat-tile,
main#ttMain .row > [class*="col"]:nth-child(2) .card { animation-delay: .05s; }
main#ttMain .row > [class*="col"]:nth-child(3) .stat-tile,
main#ttMain .row > [class*="col"]:nth-child(3) .card { animation-delay: .1s; }
main#ttMain .row > [class*="col"]:nth-child(4) .stat-tile,
main#ttMain .row > [class*="col"]:nth-child(4) .card { animation-delay: .15s; }

.stat-tile {
    transition: transform .18s ease, box-shadow .18s ease;
}

.stat-tile:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow);
}

.card { transition: box-shadow .2s ease; }

.btn { transition: all .15s ease, transform .1s ease; }
.btn:active { transform: scale(.97); }

.dropdown-menu { animation: tt-pop-in .16s ease both; }

.summary-bar > span { transition: width .7s cubic-bezier(.2,.8,.2,1); }

.shot-card img { transition: transform .3s ease; }
.shot-card:hover img { transform: scale(1.03); }

.table tbody tr { transition: background .12s ease; }

/* ---------- Top progress bar (SPA navigation) ---------- */

#ttProgress {
    position: fixed;
    top: 0;
    left: 0;
    height: 2.5px;
    width: 0;
    background: linear-gradient(90deg, var(--accent), var(--accent-hover));
    z-index: 3000;
    opacity: 0;
    transition: width .25s ease, opacity .3s ease;
    border-radius: 0 2px 2px 0;
}

#ttProgress.active { opacity: 1; }
#ttProgress.done { width: 100% !important; opacity: 0; }

/* ---------- Reduced motion ---------- */

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

/* ============================================================
   Dark mode
   ============================================================ */

.tt-theme-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--muted);
    transition: color .15s ease, background .15s ease, transform .15s ease;
}

.tt-theme-btn:hover { color: var(--ink); background: var(--hover-bg); transform: rotate(12deg); }
.tt-theme-btn .tt-icon { width: 16px; height: 16px; }
.tt-theme-btn .icon-sun { display: none; }

html[data-theme="dark"] .tt-theme-btn .icon-moon { display: none; }
html[data-theme="dark"] .tt-theme-btn .icon-sun { display: inline-block; }

html[data-theme="dark"] {
    color-scheme: dark;

    --bg: #0c1310;
    --surface: #151f19;
    --ink: #e9f4ee;
    --ink-2: #c6d8cd;
    --muted: #93aca0;
    --faint: #69806f;
    --border: #24322a;
    --border-strong: #34463c;

    --accent: #2ecc93;
    --accent-hover: #5adfae;
    --accent-soft: #17342a;

    --success: #5adfae;
    --success-soft: #143226;
    --danger: #f87171;
    --danger-soft: #391f1f;
    --warning: #fbbf24;
    --warning-soft: #382c12;

    --hover-bg: #1c2822;
    --row-hover: #19241e;
    --nav-bg: rgba(17, 25, 21, .88);
    --tracker-border: #2c4c3d;
    --stop-hover: #4c2424;

    --shadow: 0 1px 2px rgba(0, 0, 0, .45), 0 8px 24px rgba(0, 0, 0, .5);
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, .4);
}

/* On dark surfaces the bright accent needs dark text for contrast */
html[data-theme="dark"] .btn-primary,
html[data-theme="dark"] .btn-primary:hover,
html[data-theme="dark"] .btn-primary:focus,
html[data-theme="dark"] .btn-primary:active {
    color: #06251b !important;
}

html[data-theme="dark"] .tt-start-btn { color: #06251b; }

html[data-theme="dark"] .alert-danger { background: #2c1616; color: #fca5a5; border-color: #4c2323; }
html[data-theme="dark"] .alert-success { background: #12291f; color: #86efac; border-color: #1d4634; }

html[data-theme="dark"] .badge.bg-success { background: var(--success-soft) !important; color: var(--success); }
html[data-theme="dark"] .badge.bg-secondary { background: var(--hover-bg) !important; color: var(--muted); }

html[data-theme="dark"] .empty-state .empty-icon { background: var(--accent-soft); color: var(--accent); }

html[data-theme="dark"] .auth-container { box-shadow: var(--shadow); }

/* ---------- Company logo ---------- */

.tt-brand-logo {
    height: 28px;
    width: auto;
    max-width: 140px;
    object-fit: contain;
    border-radius: 6px;
}

/* ---------- Pagination footer ---------- */

.tt-pager {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: .75rem;
    padding: .75rem 1.1rem;
    border-top: 1px solid var(--border);
    font-size: .85rem;
    color: var(--muted);
}

.tt-pager-info { font-variant-numeric: tabular-nums; }

.tt-pager-controls {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}

.tt-pages { display: inline-flex; align-items: center; gap: 3px; }

.tt-page-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 30px;
    height: 30px;
    padding: 0 8px;
    border-radius: 8px;
    border: 1px solid transparent;
    color: var(--ink-2);
    font-size: .84rem;
    font-weight: 550;
    font-variant-numeric: tabular-nums;
    cursor: pointer;
    transition: background .12s ease, border-color .12s ease, color .12s ease;
    text-decoration: none;
}

.tt-page-link:hover { background: var(--hover-bg); color: var(--ink); }

.tt-page-link.active {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
}

html[data-theme="dark"] .tt-page-link.active { color: #06251b; }

.tt-page-link.disabled {
    opacity: .4;
    pointer-events: none;
}

.tt-page-gap { color: var(--faint); padding: 0 2px; }

.tt-pager-size {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: var(--muted);
}

.tt-pager-size select {
    border: 1px solid var(--border-strong);
    border-radius: 8px;
    padding: .25rem 1.6rem .25rem .6rem;
    font-size: .84rem;
    color: var(--ink);
    background: var(--surface);
    cursor: pointer;
}

.tt-pager-size select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }

/* ---------- Count badge (nav / approvals) ---------- */

.tt-badge-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 999px;
    background: var(--danger);
    color: #fff;
    font-size: .68rem;
    font-weight: 700;
    line-height: 1;
    vertical-align: middle;
}
html[data-theme="dark"] .tt-badge-count { color: #fff; }

/* ---------- Report day-group header row ---------- */

.table tbody tr.rpt-day-row td {
    background: var(--accent-soft);
    color: var(--accent-hover);
    font-weight: 650;
    font-size: .82rem;
    letter-spacing: .01em;
    padding-top: .55rem;
    padding-bottom: .55rem;
    border-bottom: 1px solid var(--border);
}

.table-hover tbody tr.rpt-day-row:hover td { background: var(--accent-soft); }

/* ============================================================
   Modules: notice board, attendance, leave (added Aug 2026)
   ============================================================ */

/* small inline colour dot (leave types) */
.tt-dot{display:inline-block;width:9px;height:9px;border-radius:50%;margin-right:4px;vertical-align:middle;}

/* ---- Attendance status palette ---- */
:root{
    --att-present:var(--accent); --att-present-bg:var(--accent-soft);
    --att-half:#2f6db3;    --att-half-bg:#e6f0fb;
    --att-partial:#b45309; --att-partial-bg:#fff2df;
    --att-absent:#dc2626;  --att-absent-bg:#fdecec;
    --att-leave:#7c3aed;   --att-leave-bg:#f1eafc;
    --att-holiday:#0891b2; --att-holiday-bg:#e1f5fa;
    --att-off:#8fa89b;     --att-off-bg:#f1f5f3;
    --att-future:#c3d3ca;  --att-future-bg:#fbfdfc;
}
[data-theme="dark"]{
    --att-present:#2ecc93; --att-present-bg:#143226;
    --att-half:#5b9be0;    --att-half-bg:#14263a;
    --att-partial:#e0a44a; --att-partial-bg:#332711;
    --att-absent:#f87171;  --att-absent-bg:#391f1f;
    --att-leave:#b794f6;   --att-leave-bg:#271a3a;
    --att-holiday:#3fc3dd; --att-holiday-bg:#0f2c33;
    --att-off:#69806f;     --att-off-bg:#141d18;
    --att-future:#33443b;  --att-future-bg:#111a15;
}

.tt-att-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(64px,1fr));gap:8px;}
.tt-att-cell{border:1px solid var(--border);border-radius:12px;padding:8px 4px;text-align:center;min-height:72px;
    display:flex;flex-direction:column;justify-content:center;gap:2px;transition:transform .12s ease;}
.tt-att-cell:hover{transform:translateY(-2px);}
.tt-att-dow{font-size:.62rem;text-transform:uppercase;letter-spacing:.04em;color:var(--faint);font-weight:600;}
.tt-att-day{font-size:1.05rem;font-weight:700;color:var(--ink);line-height:1;}
.tt-att-meta{font-size:.66rem;font-weight:600;opacity:.85;line-height:1.1;}
.tt-att-meta .tt-icon{width:14px;height:14px;}

.tt-att-present{background:var(--att-present-bg);border-color:var(--att-present);} .tt-att-present .tt-att-meta{color:var(--att-present);}
.tt-att-half{background:var(--att-half-bg);border-color:var(--att-half);} .tt-att-half .tt-att-meta{color:var(--att-half);}
.tt-att-half_leave{background:var(--att-leave-bg);border-color:var(--att-leave);} .tt-att-half_leave .tt-att-meta{color:var(--att-leave);}
.tt-att-partial{background:var(--att-partial-bg);border-color:var(--att-partial);} .tt-att-partial .tt-att-meta{color:var(--att-partial);}
.tt-att-absent{background:var(--att-absent-bg);border-color:var(--att-absent);} .tt-att-absent .tt-att-meta{color:var(--att-absent);}
.tt-att-leave{background:var(--att-leave-bg);border-color:var(--att-leave);} .tt-att-leave .tt-att-meta{color:var(--att-leave);}
.tt-att-holiday{background:var(--att-holiday-bg);border-color:var(--att-holiday);} .tt-att-holiday .tt-att-meta{color:var(--att-holiday);}
.tt-att-off{background:var(--att-off-bg);} .tt-att-off .tt-att-day{color:var(--faint);} .tt-att-off .tt-att-meta{color:var(--faint);}
.tt-att-future{background:var(--att-future-bg);} .tt-att-future .tt-att-day{color:var(--att-future);}

.tt-att-legend{display:flex;flex-wrap:wrap;gap:14px;font-size:.78rem;color:var(--muted);}
.tt-att-legend-item{display:inline-flex;align-items:center;gap:6px;}
.tt-att-swatch{width:12px;height:12px;border-radius:4px;display:inline-block;border:1px solid var(--border-strong);}
.tt-att-swatch.tt-att-present{background:var(--att-present);}
.tt-att-swatch.tt-att-half{background:var(--att-half);}
.tt-att-swatch.tt-att-partial{background:var(--att-partial);}
.tt-att-swatch.tt-att-absent{background:var(--att-absent);}
.tt-att-swatch.tt-att-leave{background:var(--att-leave);}
.tt-att-swatch.tt-att-holiday{background:var(--att-holiday);}
.tt-att-swatch.tt-att-off{background:var(--att-off);}

/* ---- Leave balance rows ---- */
.tt-balance-row + .tt-balance-row{border-top:1px solid var(--border);}

/* ---- Notice board ---- */
.tt-notice-board{display:flex;flex-direction:column;gap:12px;}
.tt-notice{display:flex;gap:14px;padding:14px 16px 14px 18px;border-radius:14px;border:1px solid var(--border);
    background:var(--surface);position:relative;overflow:hidden;}
.tt-notice::before{content:"";position:absolute;left:0;top:0;bottom:0;width:5px;background:var(--accent);}
.tt-notice-icon{flex:0 0 auto;display:flex;align-items:flex-start;padding-top:2px;}
.tt-notice-icon .tt-icon{width:22px;height:22px;color:var(--accent);}
.tt-notice-content{flex:1 1 auto;min-width:0;}
.tt-notice-head{display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
.tt-notice-title{font-weight:650;color:var(--ink);font-size:1rem;}
.tt-notice-body{color:var(--ink-2);font-size:.9rem;margin-top:3px;line-height:1.45;}
.tt-notice-pin{color:var(--accent);}
.tt-notice-tag{display:inline-block;font-size:.66rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;
    padding:2px 8px;border-radius:999px;background:var(--accent-soft);color:var(--accent-hover);}

.tt-notice-info::before{background:#2f6db3;} .tt-notice-info .tt-notice-icon .tt-icon{color:#2f6db3;}
.tt-notice-tag.tt-notice-info{background:#e6f0fb;color:#2f6db3;}
.tt-notice-success::before{background:var(--success);} .tt-notice-success .tt-notice-icon .tt-icon{color:var(--success);}
.tt-notice-tag.tt-notice-success{background:var(--success-soft);color:var(--success);}
.tt-notice-warning::before{background:var(--warning);} .tt-notice-warning .tt-notice-icon .tt-icon{color:var(--warning);}
.tt-notice-tag.tt-notice-warning{background:var(--warning-soft);color:var(--warning);}
.tt-notice-critical{border-color:var(--danger);background:var(--danger-soft);}
.tt-notice-critical::before{background:var(--danger);}
.tt-notice-critical .tt-notice-icon .tt-icon{color:var(--danger);}
.tt-notice-tag.tt-notice-critical{background:var(--danger);color:#fff;}
.tt-notice-critical .tt-notice-title{color:var(--danger);}
.tt-notice-pinned{box-shadow:0 2px 14px rgba(14,159,110,.14);}
.tt-notice-critical.tt-notice-pinned{animation:ttNoticePulse 2.4s ease-in-out infinite;}
@keyframes ttNoticePulse{0%,100%{box-shadow:0 0 0 0 rgba(220,38,38,.18);}50%{box-shadow:0 0 0 5px rgba(220,38,38,0);}}

/* ---- Attendance filter toolbar ---- */
.tt-att-toolbar{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:14px;
    background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:12px 14px;}
.tt-att-fields{display:flex;flex-wrap:wrap;align-items:flex-end;gap:12px;}
.tt-att-field{display:flex;flex-direction:column;gap:4px;}
.tt-att-field-label{font-size:.68rem;text-transform:uppercase;letter-spacing:.05em;color:var(--faint);font-weight:600;margin:0;}
.tt-att-field .form-control,.tt-att-field .form-select{min-width:160px;}
.tt-att-stepper{display:inline-flex;align-items:center;gap:2px;background:var(--bg);border:1px solid var(--border);border-radius:10px;padding:3px;}
.tt-step{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:8px;
    color:var(--muted);text-decoration:none;font-size:1.15rem;line-height:1;transition:background .12s ease,color .12s ease;}
.tt-step:hover{background:var(--surface);color:var(--ink);}
.tt-step-label{min-width:132px;text-align:center;font-weight:600;color:var(--ink);font-size:.9rem;}
@media (max-width:600px){
    .tt-att-toolbar{flex-direction:column;align-items:stretch;}
    .tt-att-fields{justify-content:space-between;}
    .tt-att-field{flex:1 1 auto;}
    .tt-att-field .form-control,.tt-att-field .form-select{min-width:0;width:100%;}
    .tt-att-stepper{justify-content:space-between;}
    .tt-step-label{flex:1 1 auto;}
}

/* ---- Leave approval cards ---- */
.tt-leave-card .card-body{padding:16px 18px;}
.tt-leave-head{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;flex-wrap:wrap;}
.tt-leave-who{display:flex;align-items:center;gap:10px;min-width:0;}
.tt-leave-name{font-weight:600;color:var(--ink);line-height:1.2;}
.tt-leave-type{display:flex;align-items:center;gap:5px;font-size:.82rem;color:var(--muted);margin-top:1px;}
.tt-leave-when{text-align:right;}
.tt-leave-dates{font-weight:600;color:var(--ink);white-space:nowrap;}
.tt-leave-daysmeta{display:flex;align-items:center;gap:8px;justify-content:flex-end;margin-top:3px;font-size:.8rem;}
.tt-leave-reason{display:flex;align-items:flex-start;gap:7px;margin-top:12px;padding:8px 12px;background:var(--bg);
    border:1px solid var(--border);border-radius:9px;font-size:.85rem;color:var(--ink-2);}
.tt-leave-reason .tt-icon{width:15px;height:15px;flex:0 0 auto;margin-top:2px;color:var(--faint);}

.tt-leave-decision{display:flex;flex-wrap:wrap;align-items:flex-end;gap:14px;margin:0;
    margin-top:14px;padding-top:14px;border-top:1px solid var(--border);}
.tt-decision-field{display:flex;flex-direction:column;gap:5px;}
.tt-decision-field.grow{flex:1 1 220px;}
.tt-decision-label{font-size:.68rem;text-transform:uppercase;letter-spacing:.05em;color:var(--faint);font-weight:600;margin:0;}
.tt-paid-input{display:flex;align-items:center;gap:8px;}
.tt-paid-input .form-control{width:84px;}
.tt-paid-of{color:var(--muted);font-size:.85rem;white-space:nowrap;}
.tt-decision-actions{display:flex;gap:6px;margin-left:auto;align-self:flex-end;}

.tt-leave-outcome{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;flex-wrap:wrap;
    margin-top:12px;padding-top:12px;border-top:1px solid var(--border);font-size:.85rem;}
.tt-paid-chip{color:var(--success);font-weight:600;}
.tt-unpaid-chip{color:var(--muted);font-weight:600;}
@media (max-width:575px){
    .tt-leave-when{text-align:left;}
    .tt-leave-daysmeta{justify-content:flex-start;}
    .tt-decision-actions{margin-left:0;width:100%;}
    .tt-decision-actions .btn{flex:1 1 auto;}
}

/* ---- Admin / Personal app switch ---- */
.tt-mode-switch{display:inline-flex;gap:2px;background:var(--bg);border:1px solid var(--border);border-radius:999px;padding:3px;}
.tt-mode-btn{display:inline-flex;align-items:center;padding:3px 13px;border-radius:999px;font-size:.78rem;font-weight:600;
    color:var(--muted);text-decoration:none;transition:background .12s ease,color .12s ease;white-space:nowrap;}
.tt-mode-btn:hover{color:var(--ink);}
.tt-mode-btn.active{background:var(--accent);color:#fff;}
.tt-mode-btn.active:hover{color:#fff;}
@media (max-width:991px){.tt-mode-switch{margin:8px 0;}}

/* ---- Employee profile ---- */
.tt-profile-photo{width:76px;height:76px;border-radius:18px;object-fit:cover;border:1px solid var(--border);background:var(--surface);}
.tt-profile-initial{display:inline-flex;align-items:center;justify-content:center;font-size:1.8rem;font-weight:700;
    color:var(--accent);background:var(--accent-soft);}
.tt-profile-dl{display:grid;grid-template-columns:minmax(130px,38%) 1fr;gap:6px 14px;margin:0;font-size:.9rem;}
.tt-profile-dl dt{font-weight:500;color:var(--faint);font-size:.78rem;text-transform:uppercase;letter-spacing:.04em;align-self:center;}
.tt-profile-dl dd{margin:0;color:var(--ink);word-break:break-word;}

/* ---- Nav & dropdown polish ----
   Bootstrap's default .dropdown-item.active is its own blue — retheme it to
   the mint palette, style dropdown headers, and align nav badges. */
.dropdown-item.active,
.dropdown-item.active:hover,
.dropdown-item:active {
    background: var(--accent-soft);
    color: var(--accent-hover);
}
.dropdown-item.active .tt-icon { opacity: 1; }
html[data-theme="dark"] .dropdown-item.active,
html[data-theme="dark"] .dropdown-item.active:hover,
html[data-theme="dark"] .dropdown-item:active {
    background: var(--accent-soft);
    color: var(--accent);
}
.dropdown-header {
    font-size: .66rem;
    text-transform: uppercase;
    letter-spacing: .07em;
    font-weight: 700;
    color: var(--faint);
    padding: .4rem .75rem .15rem;
}
.dropdown-item .ms-auto.tt-icon { width: .95em; height: .95em; color: var(--accent); opacity: 1; }
.tt-nav .nav-link .tt-badge-count { margin-left: 2px; }
.tt-nav .dropdown-toggle::after { opacity: .55; margin-left: 2px; }
.dropdown-menu { min-width: 205px; }

/* ---- Theme toggle as a user-menu item ----
   Shows "Dark mode" (moon) in light theme, "Light mode" (sun) in dark. */
#ttThemeToggle.dropdown-item { width: 100%; text-align: left; border: 0; background: none; }
#ttThemeToggle.dropdown-item:hover { background: var(--hover-bg); }
#ttThemeToggle.dropdown-item .icon-sun,
#ttThemeToggle.dropdown-item .theme-label-light { display: none; }
html[data-theme="dark"] #ttThemeToggle.dropdown-item .icon-moon,
html[data-theme="dark"] #ttThemeToggle.dropdown-item .theme-label-dark { display: none; }
html[data-theme="dark"] #ttThemeToggle.dropdown-item .icon-sun { display: inline-block; }
html[data-theme="dark"] #ttThemeToggle.dropdown-item .theme-label-light { display: inline; }

/* ---- PWA install item (shown only when the browser offers install) ---- */
.tt-install-li { display: none; }
body.tt-can-install .tt-install-li { display: block; }
#ttInstallApp.dropdown-item { width: 100%; text-align: left; border: 0; background: none; }
#ttInstallApp.dropdown-item:hover { background: var(--hover-bg); }

/* ============================================================
   Mobile-friendly pass (navigation + layout)
   ============================================================ */
@media (max-width: 991px) {
    /* ---- Native-style side drawer ---- */
    .tt-drawer.offcanvas {
        width: min(84vw, 320px);
        background: var(--surface);
        border-right: 1px solid var(--border);
    }
    .tt-drawer-head {
        border-bottom: 1px solid var(--border);
        padding: calc(14px + env(safe-area-inset-top)) 18px 14px;
    }
    .tt-drawer-head .navbar-brand { font-size: 1.05rem; }
    .tt-drawer .offcanvas-body {
        display: flex;
        flex-direction: column;
        padding: 12px 12px calc(18px + env(safe-area-inset-bottom));
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }
    .tt-drawer .navbar-nav { gap: 2px; width: 100%; }
    .tt-drawer .nav-link {
        padding: .78rem .95rem !important;
        font-size: 1rem;
        border-radius: 12px;
        width: 100%;
    }
    .tt-drawer .nav-link .tt-icon { width: 1.2em; height: 1.2em; }
    /* Dropdowns expand inline like native drawer sections */
    .tt-drawer .dropdown-menu {
        position: static !important;
        transform: none !important;
        border: 0;
        box-shadow: none;
        background: transparent;
        padding: 0 0 4px 1.5rem;
        margin: 0;
        animation: none;
        min-width: 0;
        width: 100%;
    }
    .tt-drawer .dropdown-item { padding: .62rem .75rem; font-size: .96rem; border-radius: 10px; }
    /* Mini tracker sits ON the navbar now (not in a drawer) — keep it compact
       and float its start menu from the bar like the user menu does */
    .tt-nav-actions { margin-right: .35rem; }
    .tt-nav-actions .dropdown-menu {
        position: absolute;
        right: 0;
        left: auto;
        top: 100%;
        margin-top: 8px;
    }

    /* ---- App-like chrome ---- */
    /* CRITICAL for the drawer: backdrop-filter on the sticky nav makes it the
       containing block for the fixed-position offcanvas (clipping it to the
       header height), and the nav's z-index:1030 stacking context paints
       BELOW the offcanvas backdrop (1040). Solid background + higher z-index
       on mobile fixes both. */
    .tt-nav {
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
        background: var(--surface);
        z-index: 1046;
    }
    .tt-nav { padding-top: env(safe-area-inset-top); }
    .tt-nav .container { min-height: 56px; }
    .tt-nav .navbar-toggler { padding: .35rem .5rem; }
    .tt-nav .navbar-toggler:focus { box-shadow: none; }
    body { overscroll-behavior-y: contain; }
}

/* App feel everywhere: no tap flash, subtle page-enter transition */
html { -webkit-text-size-adjust: 100%; }
body { -webkit-tap-highlight-color: transparent; }
#ttMain { animation: ttPageIn .22s ease; }
#ttMain.tt-instant { animation: none; }
/* cold tab placeholder — the content area while a tab's page is fetched */
#ttMain.tt-loading {
    display: flex; align-items: center; justify-content: center;
    min-height: calc(100vh - var(--topbar-h, 48px));
}
.tt-loading-spin {
    width: 26px; height: 26px; border-radius: 50%;
    border: 2.5px solid var(--border);
    border-top-color: var(--accent);
    /* only appear if the wait is noticeable — fast loads stay flicker-free */
    opacity: 0; animation: ttSpin .7s linear infinite, ttSpinIn .01s linear .18s forwards;
}
@keyframes ttSpin { to { transform: rotate(360deg); } }
@keyframes ttSpinIn { to { opacity: 1; } }
@keyframes ttPageIn {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
    #ttMain { animation: none; }
}
/* Standalone (installed PWA): tighten the chrome further */
@media (display-mode: standalone) {
    .tt-nav { border-bottom-width: 1px; }
    /* app-like chrome (menus, tabs, buttons) is not selectable, but every
       piece of content — chat and mail messages, notes, tasks, tables —
       can be selected and copied like in any desktop app */
    .tt-nav, .tt-rail, .tt-tabstrip, button, .btn, .bar-btn, [role="tab"], label { user-select: none; }
    input, textarea, select, [contenteditable] { user-select: text; }
}

@media (max-width: 575px) {
    .container { padding-left: 14px; padding-right: 14px; }
    .page-header h1 { font-size: 1.35rem; }
    .stat-tile { padding: 12px 14px; }
    .stat-value { font-size: 1.35rem; }
    .card-body { padding: 14px; }
    .table { font-size: .85rem; }
    .table td, .table th { padding: .5rem .55rem; }
    .modal-dialog { margin: 8px; }
    .modal-dialog-centered { min-height: calc(100% - 16px); }
    .tt-pager { flex-direction: column; align-items: stretch; gap: 10px; }
    .tt-pager-controls { flex-wrap: wrap; justify-content: space-between; }
    #ttToasts { left: 12px; right: 12px; }
    #ttToasts .tt-toast { max-width: 100%; }
    .tt-att-grid { grid-template-columns: repeat(auto-fill, minmax(54px, 1fr)); gap: 5px; }
    .tt-att-cell { min-height: 62px; padding: 6px 2px; }
    .tt-balance-row { align-items: stretch; }
    .tt-leave-decision { gap: 10px; }
    .tt-decision-actions { width: 100%; }
    .tt-decision-actions .btn { flex: 1 1 auto; }
}

/* Comfortable touch targets on touch devices */
@media (pointer: coarse) {
    .btn-sm { padding: .42rem .75rem; min-height: 36px; }
    .tt-page-link { min-height: 34px; }
    .dropdown-item { min-height: 40px; }
    input.form-control-sm, select.form-select-sm { min-height: 36px; }
}

/* ---- User menu on the navbar (mobile: beside the hamburger) ---- */
/* Hamburger goes to the far right, after the avatar */
@media (max-width: 991px) {
    .tt-nav .navbar-toggler { order: 10; }
    .tt-user-nav .nav-link { padding: .35rem .4rem !important; }
}
/* Below the expand breakpoint Bootstrap makes navbar dropdowns position:static
   — this menu must float from the navbar instead */
.tt-user-nav .dropdown-menu {
    position: absolute;
    right: 0;
    left: auto;
    top: 100%;
    margin-top: 8px;
}

/* ---- Notification bell & panel ---- */
.tt-bell { position: relative; display: inline-flex; align-items: center; }
.tt-bell .tt-icon { width: 1.28em; height: 1.28em; }
.tt-bell::after { display: none !important; } /* no caret */
.tt-bell-badge { position: absolute; top: 1px; right: -1px; box-shadow: 0 0 0 2px var(--surface); }
.tt-bell-badge.bump { animation: ttBellBump .45s cubic-bezier(.36,1.6,.4,1); }
@keyframes ttBellBump { 0% { transform: scale(.4); } 60% { transform: scale(1.25); } 100% { transform: scale(1); } }

.tt-notif-menu {
    width: min(92vw, 400px);
    padding: 0;
    overflow: hidden;
    border-radius: 16px;
    border: 1px solid var(--border);
    box-shadow: var(--shadow), 0 18px 44px rgba(15, 23, 42, .14);
    transform-origin: top right;
}
.tt-notif-menu.show { animation: ttNotifPop .16s ease; }
@keyframes ttNotifPop {
    from { opacity: 0; transform: translateY(-4px) scale(.98); }
    to   { opacity: 1; transform: none; }
}

.tt-notif-head {
    display: flex; justify-content: space-between; align-items: center; gap: 10px;
    padding: 13px 16px 10px;
    font-weight: 650; color: var(--ink); font-size: .95rem;
}
.tt-notif-head-left { display: inline-flex; align-items: center; gap: 8px; }
.tt-notif-count {
    display: none; min-width: 20px; height: 20px; padding: 0 6px;
    border-radius: 999px; background: var(--accent); color: #fff;
    font-size: .7rem; font-weight: 700; align-items: center; justify-content: center;
}
.tt-notif-count.show { display: inline-flex; }
.tt-notif-readall {
    display: inline-flex; align-items: center; gap: 5px;
    border: none; background: none;
    color: var(--accent-hover); font-size: .76rem; font-weight: 650;
    cursor: pointer; padding: 4px 9px; border-radius: 8px;
    transition: background .12s ease;
}
.tt-notif-readall .tt-icon { width: 13px; height: 13px; }
.tt-notif-readall:hover { background: var(--accent-soft); }

/* All | Unread segmented filter */
.tt-notif-tabs {
    display: flex; gap: 4px; padding: 0 16px 10px;
    border-bottom: 1px solid var(--border);
}
.tt-notif-tab {
    border: 1px solid transparent; background: none; cursor: pointer;
    padding: 3px 12px; border-radius: 999px;
    font-size: .78rem; font-weight: 550; color: var(--muted);
    transition: all .12s ease;
}
.tt-notif-tab:hover { background: var(--hover-bg); color: var(--ink); }
.tt-notif-tab.active { background: var(--accent-soft); color: var(--accent-hover); font-weight: 650; }

.tt-notif-list { max-height: min(62vh, 460px); overflow-y: auto; overscroll-behavior: contain; }
.tt-notif-list::-webkit-scrollbar { width: 8px; }
.tt-notif-list::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 8px; }

/* Day group labels */
.tt-notif-day {
    padding: 10px 16px 4px;
    font-size: .68rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
    color: var(--faint);
    position: sticky; top: 0; background: var(--surface); z-index: 2;
}

.tt-notif-item {
    position: relative;
    display: flex; gap: 12px; padding: 10px 14px 10px 16px; text-decoration: none;
    align-items: flex-start;
    transition: background .12s ease;
}
.tt-notif-item:hover { background: var(--row-hover); }
.tt-notif-item.unread { background: transparent; background: color-mix(in srgb, var(--accent-soft) 26%, transparent); }
.tt-notif-item.unread:hover { background: transparent; background: color-mix(in srgb, var(--accent-soft) 45%, transparent); }
/* unread accent bar on the left edge */
.tt-notif-item::before {
    content: ''; position: absolute; left: 0; top: 8px; bottom: 8px; width: 3px;
    border-radius: 0 3px 3px 0; background: transparent; transition: background .12s ease;
}
.tt-notif-item.unread::before { background: var(--accent); }

/* Typed icon chip */
.tt-notif-ic {
    flex: 0 0 auto; width: 36px; height: 36px; border-radius: 12px;
    display: inline-flex; align-items: center; justify-content: center; margin-top: 1px;
}
.tt-notif-ic .tt-icon { width: 17px; height: 17px; }
.tt-nic-mint  { background: var(--accent-soft);   color: var(--accent-hover); }
.tt-nic-leave { background: var(--att-leave-bg);  color: var(--att-leave); }
.tt-nic-blue  { background: var(--att-half-bg);   color: var(--att-half); }
.tt-nic-amber { background: var(--att-partial-bg);color: var(--att-partial); }
.tt-nic-cyan  { background: var(--att-holiday-bg);color: var(--att-holiday); }

.tt-notif-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1 1 auto; }
.tt-notif-title { color: var(--ink); font-size: .88rem; font-weight: 550; line-height: 1.35; }
.tt-notif-item.unread .tt-notif-title { font-weight: 680; }
.tt-notif-body {
    color: var(--muted); font-size: .8rem; line-height: 1.4;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.tt-notif-time { color: var(--faint); font-size: .72rem; margin-top: 1px; }

/* Right edge: hover "mark read" button + unread dot */
.tt-notif-side {
    flex: 0 0 auto; display: flex; align-items: center; gap: 6px;
    margin-top: 8px; min-width: 26px; justify-content: flex-end;
}
.tt-notif-markread {
    display: none; align-items: center; justify-content: center;
    width: 26px; height: 26px; border: none; border-radius: 50%;
    background: var(--surface); color: var(--muted); cursor: pointer;
    box-shadow: var(--shadow-sm); border: 1px solid var(--border);
    transition: all .12s ease;
}
.tt-notif-markread .tt-icon { width: 13px; height: 13px; }
.tt-notif-markread:hover { background: var(--accent); border-color: var(--accent); color: #fff; }
.tt-notif-item:hover .tt-notif-markread { display: inline-flex; }
.tt-notif-dot { flex: 0 0 auto; width: 9px; height: 9px; border-radius: 50%; background: transparent; }
.tt-notif-item.unread .tt-notif-dot { background: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.tt-notif-item:hover .tt-notif-dot { display: none; } /* the button takes its spot */
.tt-notif-item:not(.unread):hover .tt-notif-dot { display: block; } /* nothing to swap */

/* Footer: load older / end-cap */
.tt-notif-more {
    display: block; width: 100%; border: none; border-top: 1px solid var(--border);
    background: none; padding: 10px; cursor: pointer;
    color: var(--accent-hover); font-size: .8rem; font-weight: 650;
    transition: background .12s ease;
}
.tt-notif-more:hover { background: var(--hover-bg); }
.tt-notif-end {
    padding: 10px 16px 12px; text-align: center;
    color: var(--faint); font-size: .74rem; border-top: 1px solid var(--hover-bg);
}

.tt-notif-empty {
    display: flex; flex-direction: column; align-items: center; gap: 3px;
    padding: 34px 16px; text-align: center;
}
.tt-notif-empty-ic {
    width: 48px; height: 48px; border-radius: 50%;
    background: var(--accent-soft); color: var(--accent-hover);
    display: inline-flex; align-items: center; justify-content: center; margin-bottom: 8px;
}
.tt-notif-empty-ic .tt-icon { width: 22px; height: 22px; }
.tt-notif-empty-title { font-weight: 650; color: var(--ink); font-size: .92rem; }
.tt-notif-empty-sub { color: var(--faint); font-size: .8rem; }

@media (max-width: 575px) {
    .tt-notif-menu { position: fixed !important; left: 10px !important; right: 10px !important; width: auto; top: 62px !important; }
}

/* ---- Minified year-end strip (approved) ---- */
.tt-yearend-mini {
    display: flex; align-items: center; gap: 9px;
    padding: 9px 14px; border: 1px solid var(--border);
    border-left: 3px solid var(--success); border-radius: 10px;
    background: var(--surface); color: var(--muted); font-size: .85rem;
}
.tt-yearend-mini .tt-icon { width: 15px; height: 15px; color: var(--success); flex: 0 0 auto; }
.tt-yearend-mini strong { color: var(--ink); font-weight: 650; }

/* ---- Balances: per-user breakdown cells ---- */
.tt-balcells { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 18px; margin: 0; }
.tt-balcell { display: flex; flex-direction: column; gap: 3px; min-width: 58px; }
.tt-balcell-label {
    font-size: .66rem; text-transform: uppercase; letter-spacing: .05em;
    color: var(--faint); font-weight: 650;
}
.tt-balcell-value { font-size: .95rem; font-weight: 600; color: var(--ink); line-height: 31px; }
@media (max-width: 575px) {
    .tt-balcells { gap: 12px; }
    .tt-balcells .btn { width: 100%; }
}


/* ============================================================
   APP SHELL — icon rail (main menu) + panel-scoped top bar.
   The rail is the product's top-level navigation: brand mark on
   top, panels in the middle, user cluster pinned to the bottom.
   Desktop: fixed left edge. Phones: bottom tab bar.
   ============================================================ */

/* topbar slimmed from 58px — the saved space is handed to the content as
   padding above the page title (see main#ttMain), so the chrome band is
   tighter without the title losing its breathing room */
:root { --rail-w: 68px; --rail-h-mobile: 58px; --topbar-h: 48px; }

.tt-rail {
    position: fixed;
    top: 0; left: 0; bottom: 0;
    width: var(--rail-w);
    background: var(--surface);
    border-right: none; /* the chrome is ONE surface — the content's rounded
                           corner is what separates it from the page */
    display: flex; flex-direction: column; align-items: center;
    gap: 2px; padding: 0 0 14px;
    z-index: 1040;
}

/* ---- brand cell: same height as the top bar; borderless, because the rail
        and the top bar are a single continuous surface ---- */
.tt-rail-head {
    width: 100%; height: var(--topbar-h); flex: none;
    display: flex; align-items: center; justify-content: center;
    border-bottom: none;
    margin-bottom: 10px;
}
.tt-rail-brand {
    display: flex; align-items: center; justify-content: center;
    width: 36px; height: 36px;
    border-radius: 12px; overflow: hidden;
    background: linear-gradient(135deg, var(--accent) 0%, var(--accent-hover) 100%);
    box-shadow: 0 2px 6px transparent; box-shadow: 0 2px 6px color-mix(in srgb, var(--accent-hover) 28%, transparent);
    transition: transform .15s ease, box-shadow .15s ease;
}
.tt-rail-brand:hover { transform: translateY(-1px); box-shadow: 0 4px 10px transparent; box-shadow: 0 4px 10px color-mix(in srgb, var(--accent-hover) 34%, transparent); }
.tt-rail-brand img { width: 100%; height: 100%; object-fit: cover; }
/* An uploaded company logo is shown whole (never cropped or tinted): on a
   plain surface with a hairline, sized a little larger than the letter tile. */
.tt-rail-brand.has-logo {
    width: 40px; height: 40px; padding: 3px; border-radius: 12px;
    background: var(--surface, #fff); border: 1px solid var(--border-strong, #d9dee7);
    box-shadow: 0 1px 3px rgba(15, 23, 42, .08);
}
.tt-rail-brand.has-logo img { object-fit: contain; border-radius: 8px; image-rendering: auto; }
html[data-theme="dark"] .tt-rail-brand.has-logo { background: #fff; border-color: transparent; }
.tt-rail-brand-mark {
    color: #fff; font-weight: 800; font-size: 1.15rem; letter-spacing: -.02em;
    font-family: var(--font); line-height: 1;
}

/* ---- panel items (navigation-rail pattern: the ICON sits in a pill that
        fills for the active panel — a far clearer state than tinting the
        whole cell, and it animates nicely between panels) ---- */
.tt-rail-group { display: flex; flex-direction: column; align-items: center; gap: 6px; width: 100%; }
.tt-rail-bottom { padding-top: 10px; margin-top: 6px; }
/* short centred hairline instead of a full-width border */
.tt-rail-bottom::before {
    content: ""; width: 28px; height: 1px; flex: none;
    background: var(--border-strong); opacity: .7;
    margin: 0 auto 8px;
}

.tt-rail-item {
    position: relative;
    width: 58px; padding: 4px 0;
    border: none; background: none;
    display: flex; flex-direction: column; align-items: center; gap: 4px;
    color: var(--muted); text-decoration: none;
    font-size: .62rem; font-weight: 650; letter-spacing: .01em;
    transition: color .18s ease;
}
.tt-rail-item .tt-icon { width: 20px; height: 20px; transition: transform .18s ease; }

/* the pill around the icon */
.tt-rail-ico {
    position: relative; display: inline-flex;
    align-items: center; justify-content: center;
    width: 44px; height: 28px; border-radius: 14px;
    transition: background .18s ease, box-shadow .18s ease;
}
.tt-rail-item:hover { color: var(--ink); }
.tt-rail-item:hover .tt-rail-ico { background: var(--hover-bg); }
.tt-rail-item:hover .tt-icon { transform: translateY(-1px) scale(1.05); }
.tt-rail-item:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; border-radius: 12px; }

/* ACTIVE: filled pill + accent label + edge indicator */
.tt-rail-item.active { color: var(--accent-hover); font-weight: 750; }
.tt-rail-item.active .tt-rail-ico {
    background: var(--accent-soft);
    box-shadow: inset 0 0 0 1px var(--tracker-border, rgba(5,122,85,.18));
    animation: tt-rail-pop .28s cubic-bezier(.2,.9,.3,1.4);
}
.tt-rail-item.active .tt-icon { transform: none; }
.tt-rail-item.active::before {
    content: ""; position: absolute; left: -5px; top: 50%;
    transform: translateY(-50%);
    width: 4px; height: 30px; border-radius: 0 4px 4px 0;
    background: var(--accent);
    box-shadow: 0 0 8px transparent; box-shadow: 0 0 8px color-mix(in srgb, var(--accent-hover) 35%, transparent);
}
@keyframes tt-rail-pop {
    0% { transform: scale(.82); }
    100% { transform: scale(1); }
}
.tt-rail-item.soon { opacity: .45; }
.tt-rail-item.soon:hover { opacity: .8; }

.tt-rail-badge {
    position: absolute; top: -5px; right: 0;
    background: var(--danger); color: #fff;
    font-size: .58rem; font-weight: 700; line-height: 1.55;
    border-radius: 8px; padding: 0 4px; min-width: 15px; text-align: center;
    box-shadow: 0 0 0 2px var(--surface);
    z-index: 1;
}
.tt-rail-label { line-height: 1.1; }
.tt-rail-spacer { flex: 1 1 auto; }

/* ---- the user menu on the rail's Profile item ---- */
.tt-rail-userwrap { display: flex; justify-content: center; width: 100%; }
button.tt-rail-item { cursor: pointer; }
button.tt-rail-item:focus { outline: none; }
.tt-rail-menu {
    min-width: 218px;
    margin-left: 6px;
    box-shadow: var(--shadow), 0 12px 32px rgba(15, 23, 42, .10);
}
.tt-rail-menu-who {
    display: flex; align-items: center; gap: 10px;
    padding: .5rem .75rem .35rem;
}
.tt-rail-menu-who .tt-rail-avatar { width: 30px; height: 30px; font-size: .8rem; }
.tt-rail-menu-name {
    font-weight: 650; color: var(--ink);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* ---- user avatar bubble ---- */
.tt-rail-avatar {
    width: 27px; height: 27px; border-radius: 50%;
    background: linear-gradient(160deg, var(--accent-soft), var(--hover-bg));
    color: var(--accent-hover);
    font-size: .72rem; font-weight: 700; text-transform: uppercase;
    display: inline-flex; align-items: center; justify-content: center;
    box-shadow: inset 0 0 0 1.5px var(--tracker-border);
    transition: box-shadow .18s ease, transform .18s ease;
}
.tt-rail-user:hover .tt-rail-avatar { transform: translateY(-1px); }
.tt-rail-user.active .tt-rail-avatar { box-shadow: inset 0 0 0 2px var(--accent); }

/* ---- shell: content sits right of the rail. The shell shares the chrome's
        surface colour; the page itself lives on <main>.

        The inverted curve where the two bars meet is a FIXED overlay, not the
        content's own corner — so it stays pinned at the intersection while
        the page scrolls beneath it, like a window frame. It is a small square
        whose top-left spandrel is painted in the chrome colour by a radial
        gradient; the circular cut-out stays transparent and shows the
        scrolling content through it. ---- */
.tt-shell { margin-left: var(--rail-w); background: var(--surface); }
@media (min-width: 768px) {
    main#ttMain {
        background: var(--bg);
        min-height: calc(100vh - var(--topbar-h));
        /* the 10px taken off the top bar, returned above the page title */
        padding-top: 10px;
    }
    .tt-shell::before {
        content: "";
        position: fixed;
        top: var(--topbar-h); left: var(--rail-w);
        width: 22px; height: 22px;
        pointer-events: none;
        background: radial-gradient(circle 22px at 22px 22px,
            transparent 0, transparent 21px, var(--surface) 21.6px);
        /* above the page content, below the bars and their dropdowns */
        z-index: 1029;
    }
}

/* ============================================================
   Top bar — full-width, panel context on the left
   ============================================================ */

/* Solid surface (no translucency) so the top bar and the rail are the SAME
   material — borderless, one continuous L-shaped chrome around the content.
   The separation from the page is the content's own rounded corner, not a
   line. */
.tt-nav {
    min-height: var(--topbar-h);
    background: var(--surface);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}
@media (min-width: 768px) {
    .tt-nav { border-bottom: none; }
}
.tt-nav-inner { padding-left: 1.15rem; padding-right: 1.15rem; }
@media (min-width: 992px) {
    /* lock the bar to exactly the rail's brand-cell height so the two
       bottom borders meet pixel-perfectly */
    .tt-nav { height: var(--topbar-h); padding-top: 0; padding-bottom: 0; }
    .tt-nav-inner { height: 100%; align-items: center; }
}

.tt-panel-title {
    align-items: center; gap: 9px;
    font-weight: 700; font-size: 1rem; letter-spacing: -.015em;
    color: var(--ink); white-space: nowrap;
}
.tt-panel-title-ico {
    display: inline-flex; align-items: center; justify-content: center;
    width: 30px; height: 30px; border-radius: 9px;
    background: var(--accent-soft); color: var(--accent-hover);
}
.tt-panel-title-ico .tt-icon { width: 16px; height: 16px; }

.tt-mode-pill {
    font-size: .64rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
    color: var(--muted); background: var(--bg);
    border: 1px solid var(--border-strong); border-radius: 20px;
    padding: 1px 9px; margin-left: 2px;
}
.tt-mode-pill.is-admin { color: var(--accent-hover); background: var(--accent-soft); border-color: var(--tracker-border); }

.tt-nav-divider {
    width: 1px; height: 22px; background: var(--border-strong);
    margin: 0 .35rem 0 1rem; flex: none; opacity: .8;
}

/* keep the panel items tight against the divider */
.tt-nav .navbar-nav.me-auto { margin-left: .35rem !important; }

/* ============================================================
   Top bar organisation — three zones that read at a glance:
   [ panel identity | its pages …            | actions · alerts · you ]
   ============================================================ */
@media (min-width: 992px) {
    /* PRIMARY ITEMS: consistent icon+label pills, tab-like */
    .tt-nav .navbar-nav.me-auto { gap: 2px; }
    .tt-nav .navbar-nav.me-auto .nav-link {
        font-weight: 550;
        padding: .42rem .8rem !important;
        border-radius: 9px;
        line-height: 1.25;
    }
    .tt-nav .navbar-nav.me-auto .nav-link.active {
        box-shadow: inset 0 0 0 1px var(--tracker-border, rgba(5,122,85,.16));
        font-weight: 650;
    }
    /* quieter caret on dropdown items */
    .tt-nav .dropdown-toggle::after {
        opacity: .45; vertical-align: .14em;
        border-top-width: .32em; border-right-width: .32em; border-left-width: .32em;
    }

    /* RIGHT CLUSTER: uniform circular icon targets, then the user chip */
    .tt-user-nav { gap: 4px; }
    .tt-user-nav > li { display: flex; align-items: center; }
    .tt-user-nav .tt-bell {
        width: 36px; height: 36px; border-radius: 50%;
        display: inline-flex; align-items: center; justify-content: center;
        padding: 0 !important;
    }
    .tt-user-nav .tt-bell .tt-icon { width: 17px; height: 17px; }
    /* the user chip: avatar + name in one soft pill */
    .tt-user-nav .nav-link.dropdown-toggle {
        padding: .28rem .7rem .28rem .34rem !important;
        border-radius: 20px;
        font-weight: 550;
    }
    /* hairline between the page's actions (tracker) and the alerts/user zone */
    .tt-user-nav::before {
        content: ""; width: 1px; height: 20px;
        background: var(--border-strong); opacity: .7;
        margin-right: .55rem; align-self: center;
    }
}

/* dropdown menus: shared polish for every menu that hangs off the bar */
.tt-nav .dropdown-menu { margin-top: .45rem; padding: .35rem; }
.dropdown-header {
    font-size: .68rem; font-weight: 700; letter-spacing: .06em;
    text-transform: uppercase; color: var(--faint);
    padding: .35rem .75rem .25rem;
}
.dropdown-item.active,
.dropdown-item.active:hover {
    background: var(--accent-soft); color: var(--accent-hover);
}
.dropdown-item .tt-icon { width: 15px; height: 15px; opacity: .75; flex: none; }
.dropdown-item.active .tt-icon { opacity: 1; }

/* ============================================================
   Phones: rail becomes a bottom tab bar
   ============================================================ */
@media (max-width: 991.98px) {
    /* between lg and md the rail persists but the offcanvas menu handles nav */
}
@media (max-width: 767px) {
    .tt-rail {
        top: auto; right: 0; bottom: 0; left: 0;
        width: auto; height: auto; min-height: var(--rail-h-mobile);
        flex-direction: row; align-items: stretch;
        border-right: none; border-top: 1px solid var(--border);
        padding: 4px 4px;
        padding-bottom: max(4px, env(safe-area-inset-bottom));
        gap: 0;
        box-shadow: 0 -4px 16px rgba(15, 23, 42, .06);
    }
    .tt-rail-head, .tt-rail-spacer { display: none; }
    .tt-rail-group { flex-direction: row; flex: 1 1 auto; gap: 0; }
    .tt-rail-bottom { border-top: none; padding-top: 0; margin-top: 0; flex: 0 1 auto; }
    .tt-rail-bottom::before { display: none; } /* the desktop divider hairline */
    .tt-rail-ico { width: 42px; height: 25px; }
    /* the user-menu wrapper behaves like any other tab in the bottom bar */
    .tt-rail-userwrap { flex: 1 1 0; min-width: 0; width: auto; }
    .tt-rail-userwrap .tt-rail-item { width: 100%; }
    .tt-rail-menu { margin-left: 0; margin-bottom: 8px; }
    .tt-rail-item {
        width: auto; flex: 1 1 0; min-width: 0;
        padding: 5px 1px 3px; font-size: .55rem; border-radius: 10px;
        justify-content: center;
    }
    .tt-rail-item .tt-icon { width: 19px; height: 19px; }
    .tt-rail-item.active::before {
        left: 50%; top: -4px; transform: translateX(-50%);
        width: 22px; height: 3px; border-radius: 0 0 4px 4px;
    }
    .tt-rail-label { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .tt-rail-avatar { width: 22px; height: 22px; font-size: .62rem; }
    /* no chrome frame on phones — the shell is the page again */
    .tt-shell { margin-left: 0; padding-bottom: calc(var(--rail-h-mobile) + 10px); background: var(--bg); }
}

/* dark mode: lift the rail slightly off the page background */
html[data-theme="dark"] .tt-rail-brand { box-shadow: 0 2px 8px rgba(0, 0, 0, .5); }

/* ============================================================
   TRACK PANEL SIDE NAV — the panel's whole menu, moved out of
   the top bar into a second chrome column beside the icon rail.
   Desktop (≥992px): fixed column between the rail and the page.
   Below 992px: a Bootstrap responsive offcanvas drawer opened by
   the top bar's hamburger (offcanvas-lg on the element).
   ============================================================ */

:root { --sidenav-w: 226px; }

/* ---- items: shared between the desktop column and the drawer.
        The nav reads as a FLOATING CARD on the page background. ---- */
.tt-sidenav-body {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 16px;
    box-shadow: var(--shadow-sm);
    padding: 10px;
}

/* collapsible group body: grid-rows animation, overflow-safe */
.tt-sidenav-gbody {
    display: grid;
    grid-template-rows: 1fr;
    transition: grid-template-rows .2s ease;
}
.tt-sidenav-gbody.closed { grid-template-rows: 0fr; }
.tt-sidenav-gbody > .tt-sidenav-group { overflow: hidden; min-height: 0; }
.tt-sidenav-body::-webkit-scrollbar { width: 8px; }
.tt-sidenav-body::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 8px; }

.tt-sidenav-group { display: flex; flex-direction: column; gap: 2px; }

/* ---- One-time "turn on device notifications" offer bar ---- */
.tt-push-offer {
    position: fixed; left: 50%; bottom: 18px; transform: translateX(-50%);
    z-index: 1080; max-width: min(640px, calc(100vw - 32px));
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: center;
    padding: 10px 14px; border-radius: 14px;
    background: var(--surface); color: var(--ink); border: 1px solid var(--border);
    box-shadow: 0 10px 30px rgba(15, 23, 42, .16); font-size: .9rem;
}
.tt-push-offer .btn-link { color: var(--muted); text-decoration: none; }
@media (max-width: 767px) { .tt-push-offer { bottom: calc(var(--rail-h-mobile) + 12px); } }
.tt-push-badge { font-size: .62rem; font-weight: 600; }

/* ---- Admin > Users > Settings & modules (per-user overrides) ---- */
.tt-user-modules { display: flex; flex-direction: column; gap: 8px; }
.tt-user-module {
    display: flex; align-items: center; gap: 12px; padding: 10px 12px;
    border: 1px solid var(--border); border-radius: 12px; background: var(--bg);
}
.tt-user-module.ws-off { opacity: .6; }
.tt-tri .btn { font-size: .78rem; padding: 3px 10px; }
.tt-override-table td, .tt-override-table th { padding: .7rem .9rem; vertical-align: top; }
.tt-override-table tr.is-custom td:first-child { box-shadow: inset 3px 0 0 var(--accent); }
.tt-override-input { min-width: 180px; }

/* ---- Admin > Settings: tab strip, module switch cards, storage meter ---- */
.tt-settings-tabs {
    display: flex; flex-wrap: wrap; gap: 4px;
    background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 4px;
}
.tt-settings-tabs .tt-page-link { min-width: auto; padding: 0 14px; display: inline-flex; align-items: center; gap: 6px; }
.tt-settings-tabs .tt-page-link .tt-icon { width: 15px; height: 15px; opacity: .75; }
.tt-settings-tabs .tt-page-link.active .tt-icon { opacity: 1; }
.tt-module-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; }
.tt-module-card {
    display: flex; align-items: center; gap: 12px; cursor: pointer; margin: 0;
    padding: 12px 14px; border: 1px solid var(--border); border-radius: 12px; background: var(--bg);
    transition: border-color .15s ease, background .15s ease;
}
.tt-module-card:hover { border-color: var(--border-strong); }
.tt-module-card.on { background: var(--surface); border-color: var(--accent); }
.tt-module-ico { display: inline-flex; width: 36px; height: 36px; border-radius: 10px; align-items: center; justify-content: center;
    background: var(--hover-bg); color: var(--muted); flex: none; }
.tt-module-card.on .tt-module-ico { color: var(--accent); }
.tt-module-ico .tt-icon { width: 18px; height: 18px; }
.tt-module-text { display: flex; flex-direction: column; min-width: 0; flex: 1 1 auto; }
.tt-module-name { font-weight: 650; color: var(--ink); font-size: .92rem; }
.tt-module-desc { color: var(--muted); font-size: .78rem; line-height: 1.3; }
.tt-meter { height: 6px; border-radius: 4px; background: var(--hover-bg); overflow: hidden; }
.tt-meter > span { display: block; height: 100%; background: var(--accent); border-radius: 4px; }

/* Admin module: a small title cell at the top of its side nav, so the
   management pages are visibly a different area of the app. */
.tt-sidenav-title {
    display: flex; align-items: center; gap: 8px;
    margin: 2px 6px 10px; padding: 0 0 10px;
    border-bottom: 1px solid var(--border);
    font-size: .72rem; font-weight: 750; letter-spacing: .08em; text-transform: uppercase;
    color: var(--muted);
}
.tt-sidenav-title .tt-icon { width: 15px; height: 15px; color: var(--accent); }

.tt-sidenav-label {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    width: 100%;
    border: 0;
    background: none;
    text-align: left;
    font-size: .66rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: var(--faint);
    padding: 15px 10px 6px;
    border-radius: 8px;
    cursor: pointer;
    transition: color .15s ease;
}
.tt-sidenav-label:hover { color: var(--muted); }
.tt-snv-chev {
    width: 12px !important;
    height: 12px !important;
    flex: none;
    opacity: .7;
    transition: transform .2s ease;
}
.tt-sidenav-label.closed .tt-snv-chev { transform: rotate(-90deg); }

.tt-sidenav-link {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: .5rem .75rem;
    border-radius: 10px;
    color: var(--muted);
    font-size: .9rem;
    font-weight: 550;
    line-height: 1.3;
    text-decoration: none;
    transition: color .15s ease, background .15s ease, transform .15s ease, box-shadow .15s ease;
}
.tt-sidenav-link .tt-icon { width: 17px; height: 17px; flex: none; opacity: .8; }
.tt-sidenav-link:hover {
    color: var(--ink);
    background: var(--hover-bg);
    transform: translateX(2px);
}
.tt-sidenav-link:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.tt-sidenav-link.active {
    /* same quiet selected state as the Mailbox's folder list */
    background: var(--accent-soft);
    color: var(--accent-hover);
    font-weight: 600;
    box-shadow: none;
    transform: none;
}
.tt-sidenav-link.active .tt-icon { opacity: 1; }
.tt-sidenav-link .tt-badge-count { margin-left: auto; }

/* ---- desktop: fixed chrome column between the rail and the page.
        Bootstrap's offcanvas-lg resets width/background with !important at
        ≥lg (it expects inline content), so those two fight back. ---- */
@media (min-width: 992px) {
    .tt-sidenav {
        position: fixed;
        top: var(--topbar-h);
        left: var(--rail-w);
        bottom: 0;
        width: var(--sidenav-w) !important;
        /* the nav zone is PAGE-coloured — the card inside floats on it */
        background-color: var(--bg) !important;
        display: flex;
        flex-direction: column;
        padding: 12px 8px 12px 12px;
        z-index: 1035; /* under the bars (1040+), over the corner overlay */
    }

    .tt-shell.has-sidenav main#ttMain { margin-left: var(--sidenav-w); }
    /* the chrome's inverted corner stays at the rail edge — the sidenav
       zone is page-coloured now, so the frame ends at the rail — but it
       must paint ABOVE the sidenav's fixed background */
    .tt-shell.has-sidenav::before { z-index: 1036; }
}

/* ---- below 992px: the drawer (mirrors the old nav drawer's look) ---- */
@media (max-width: 991.98px) {
    .tt-sidenav {
        width: min(84vw, 320px);
        background: var(--surface);
        border-right: 1px solid var(--border);
        /* the top bar is raised to 1046 on mobile — the drawer slides
           over it, like a native drawer, and above the bottom tab bar */
        z-index: 1050;
    }
    .tt-sidenav-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        border-bottom: 1px solid var(--border);
        padding: calc(14px + env(safe-area-inset-top)) 18px 14px;
        flex: none;
    }
    .tt-sidenav-head .navbar-brand {
        font-size: 1.05rem;
        font-weight: 700;
        letter-spacing: -0.02em;
        color: var(--ink);
        display: flex;
        align-items: center;
        gap: 9px;
    }
    .tt-sidenav-body { padding: 12px 12px calc(18px + env(safe-area-inset-bottom)); }
    .tt-sidenav-link { padding: .72rem .95rem; font-size: 1rem; border-radius: 12px; }
    .tt-sidenav-link .tt-icon { width: 1.2em; height: 1.2em; }
    .tt-sidenav-label { padding: 16px 12px 6px; }
}

/* ---- mini tracker on small phones: keep it slim on the bar ---- */
@media (max-width: 991px) {
    /* the tracker shares the bar with the brand now — keep everything on
       one line and let the brand name shrink with an ellipsis instead of
       pushing the hamburger onto a second row */
    .tt-nav .tt-nav-inner { flex-wrap: nowrap; }
    .tt-nav .navbar-brand { min-width: 0; flex-shrink: 1; }
    .tt-nav .navbar-brand .tt-brand-name {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        min-width: 0;
    }
}
@media (max-width: 575px) {
    .tt-nav-tracker-project { display: none; } /* time + stop are what matter */
    .tt-start-btn .tt-start-label { display: none; } /* icon-only start */
    .tt-start-btn { padding: .5rem .6rem; }
    .tt-nav-tracker.running { padding: 4px 5px 4px 10px; }
    .tt-nav-start-menu { min-width: min(260px, calc(100vw - 24px)); }
}

/* ============================================================
   TAB STRIP — Zoho/Chrome-style CONNECTED tabs (md and up).
   The active tab is painted in the page's own colour, rounded on
   top, flush with the bar's bottom edge and flaring into the page
   through concave side curves — it reads as physically attached
   to the open page. Inactive tabs rest flat on the chrome band
   with short separators. Rendered by app.js into #ttTabs; phones
   keep the brand + drawer navigation instead.
   ============================================================ */

/* the bar must own its full height so tabs can sit on its bottom edge */
@media (min-width: 768px) {
    .tt-nav { padding-top: 0; padding-bottom: 0; }
    .tt-nav-inner { min-height: var(--topbar-h); }
}

.tt-tabstrip {
    flex: 1 1 auto;
    min-width: 0;
    align-self: stretch;
    align-items: flex-end;      /* tabs stand on the bar's bottom edge */
    gap: 0;
    margin: 0 .6rem 0 .1rem;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;      /* the strip scrolls, the bar stays clean */
    -webkit-overflow-scrolling: touch;
}
.tt-tabstrip::-webkit-scrollbar { display: none; }

.tt-tab {
    flex: 0 1 200px;
    min-width: 64px;
    display: flex;
    align-items: center;
    gap: 7px;
    height: 37px;
    padding: 0 6px 0 12px;
    border-radius: 10px 10px 0 0;
    color: var(--muted);
    font-size: .84rem;
    font-weight: 550;
    cursor: pointer;
    user-select: none;
    position: relative;
    white-space: nowrap;
    transition: background .12s ease, color .12s ease;
}

/* short separator between resting neighbours (background-image, because
   the ::before/::after pseudos are the active tab's corner curves) */
.tt-tab + .tt-tab {
    background-image: linear-gradient(var(--border-strong), var(--border-strong));
    background-size: 1px 16px;
    background-position: 0 55%;
    background-repeat: no-repeat;
}
.tt-tab.active, .tt-tab:hover,
.tt-tab.active + .tt-tab, .tt-tab:hover + .tt-tab,
.tt-tabstrip.is-dragging .tt-tab { background-image: none; }

.tt-tab:hover:not(.active) { background-color: var(--hover-bg); color: var(--ink); }

/* ACTIVE: the page's surface, connected to the content below */
.tt-tab.active {
    background-color: var(--bg);
    color: var(--ink);
    font-weight: 650;
    z-index: 1;
}
.tt-tab.active .tt-tab-ico { color: var(--accent-hover); }
/* concave corner curves at the tab's feet — the Chrome/Zoho flare */
.tt-tab.active::before,
.tt-tab.active::after {
    content: "";
    position: absolute;
    bottom: 0;
    width: 10px;
    height: 10px;
    pointer-events: none;
}
.tt-tab.active::before {
    left: -10px;
    background: radial-gradient(circle 10px at 0 0, transparent 9.4px, var(--bg) 9.8px);
}
.tt-tab.active::after {
    right: -10px;
    background: radial-gradient(circle 10px at 100% 0, transparent 9.4px, var(--bg) 9.8px);
}

.tt-tab-ico { width: 15px; height: 15px; flex: none; opacity: .78; }
/* unread-chat count on Chat tabs of the strip */
.tt-tab-icowrap { position: relative; display: inline-flex; flex: none; }
.tt-tab-badge {
    position: absolute; top: -7px; right: -9px;
    background: var(--danger); color: #fff;
    font-size: .56rem; font-weight: 700; line-height: 1.5;
    border-radius: 8px; padding: 0 3px; min-width: 13px; text-align: center;
    box-shadow: 0 0 0 2px var(--surface);
}
.tt-tab.active .tt-tab-ico { opacity: 1; }

.tt-tab-title {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tt-tab-close {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border: 0;
    border-radius: 50%;
    background: none;
    color: inherit;
    opacity: 0;
    transition: opacity .12s ease, background .12s ease;
    padding: 0;
}
.tt-tab-close .tt-icon { width: 13px; height: 13px; transform: rotate(45deg); } /* + becomes × */
.tt-tab:hover .tt-tab-close,
.tt-tab.active .tt-tab-close { opacity: .7; }
.tt-tab-close:hover { opacity: 1 !important; background: transparent; background: color-mix(in srgb, var(--danger) 14%, transparent); color: var(--danger); }

/* focus flash when opening an already-open page (dedupe jump) */
@keyframes tt-tab-flash {
    0%, 100% { background-color: transparent; }
    40% { background-color: var(--accent-soft); }
}
.tt-tab.flash:not(.active) { animation: tt-tab-flash .6s ease 1; }

/* drag to reorder */
.tt-tab.dragging {
    z-index: 3;
    background-color: var(--surface);
    color: var(--ink);
    box-shadow: var(--shadow);
    border-radius: 10px;
    transition: none;
    cursor: grabbing;
}
.tt-tab.dragging::before, .tt-tab.dragging::after { display: none; }
.tt-tabstrip.is-dragging .tt-tab:not(.dragging) { transition: transform .16s ease; }
.tt-tabstrip.is-dragging .tt-tab .tt-tab-close { opacity: 0; }

/* the + button rides the vertical centre, not the baseline */
.tt-tab-new {
    flex: none;
    align-self: center;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    margin: 0 0 0 5px;
    border: 0;
    border-radius: 50%;
    background: none;
    color: var(--muted);
    transition: background .12s ease, color .12s ease;
}
.tt-tab-new .tt-icon { width: 15px; height: 15px; }
.tt-tab-new:hover { background: var(--accent-soft); color: var(--accent-hover); }

/* the Admin/Personal pill sits with the right cluster now */
.tt-nav .tt-mode-pill { margin-right: .6rem; }

/* tabs-disabled mode: pushes the right cluster over without the strip */
.tt-nav-spring { flex: 1 1 auto; min-width: 0; }

/* ============================================================
   APP-WIDE CONTEXT MENU (custom right-click)
   ============================================================ */
.tt-ctx {
    position: fixed;
    z-index: 3000;
    min-width: 218px;
    max-width: 300px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 12px;
    box-shadow: var(--shadow);
    padding: .35rem;
    animation: tt-pop-in .14s ease both;
}
.tt-ctx-head {
    padding: .4rem .75rem .3rem;
    font-size: .74rem;
    font-weight: 700;
    color: var(--faint);
    letter-spacing: .02em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.tt-ctx hr { margin: .3rem .4rem; border: 0; border-top: 1px solid var(--border); opacity: 1; }
.tt-ctx-item {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    border: 0;
    background: none;
    border-radius: 8px;
    padding: .45rem .75rem;
    font-size: .88rem;
    font-weight: 500;
    color: var(--ink-2);
    text-align: left;
}
.tt-ctx-item:hover:not(:disabled) { background: var(--hover-bg); color: var(--ink); }
.tt-ctx-item:disabled { opacity: .4; }
.tt-ctx-item.danger { color: var(--danger); }
.tt-ctx-item.danger:hover:not(:disabled) { background: var(--danger-soft); color: var(--danger); }
.tt-ctx-hint { font-size: .72rem; color: var(--faint); font-variant-numeric: tabular-nums; flex: none; }

/* ============================================================
   MINI TRACKER — round button top-right + hover/pinned popover
   ============================================================ */
.tt-track-wrap { position: relative; display: flex; align-items: center; margin-left: 6px; }

.tt-track-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: 1px solid var(--border-strong);
    background: var(--surface);
    color: var(--muted);
    padding: 0;
    position: relative;
    transition: color .15s ease, background .15s ease, border-color .15s ease, transform .15s ease;
}
.tt-track-btn .tt-icon { width: 14px; height: 14px; }
.tt-track-btn .tt-track-ico-stop { display: none; }
.tt-track-btn:hover { color: var(--accent-hover); border-color: var(--tracker-border); background: var(--accent-soft); }
.tt-track-wrap.open .tt-track-btn { transform: translateY(-1px); }

/* running: filled accent, stop glyph, soft pulse ring */
.tt-track-wrap.is-running .tt-track-btn {
    background: linear-gradient(180deg, var(--accent), var(--accent-hover));
    border-color: transparent;
    color: #fff;
    box-shadow: 0 1px 2px transparent, 0 4px 12px transparent; box-shadow: 0 1px 2px color-mix(in srgb, var(--accent-hover) 25%, transparent), 0 4px 12px color-mix(in srgb, var(--accent) 28%, transparent);
    animation: tt-track-pulse 2s ease-in-out infinite;
}
html[data-theme="dark"] .tt-track-wrap.is-running .tt-track-btn { color: #06251b; }
.tt-track-wrap.is-running .tt-track-btn .tt-track-ico-play { display: none; }
.tt-track-wrap.is-running .tt-track-btn .tt-track-ico-stop { display: inline-block; }
@keyframes tt-track-pulse {
    0%, 100% { box-shadow: 0 1px 2px rgba(5,122,85,.25), 0 0 0 0 rgba(14,159,110,.35); }
    50%      { box-shadow: 0 1px 2px rgba(5,122,85,.25), 0 0 0 6px rgba(14,159,110,0); }
}

/* the popover */
.tt-track-pop {
    position: absolute;
    top: calc(100% + 10px);
    right: -4px;
    width: 272px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 14px;
    box-shadow: var(--shadow), 0 18px 44px rgba(15, 23, 42, .14);
    padding: 14px;
    z-index: 1060;
    display: none;
    animation: ttNotifPop .16s ease;
}
.tt-track-wrap.open .tt-track-pop { display: block; }
/* hover bridge so the pointer can travel button → popover */
.tt-track-pop::before {
    content: "";
    position: absolute;
    top: -12px;
    right: 0;
    width: 60px;
    height: 12px;
}

.tt-track-pop-head { display: flex; align-items: center; gap: 9px; }
.tt-track-time {
    font-variant-numeric: tabular-nums;
    font-feature-settings: 'tnum';
    font-weight: 700;
    font-size: 1.35rem;
    letter-spacing: .01em;
    color: var(--accent-hover);
    line-height: 1;
}
.tt-track-meta { display: flex; flex-direction: column; gap: 1px; margin: 10px 0 12px; }
.tt-track-meta-label {
    font-size: .66rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--faint);
}
.tt-track-project { font-size: .92rem; font-weight: 600; color: var(--ink); }
.tt-track-actions { display: flex; }
.tt-track-pop-title { font-weight: 650; font-size: .95rem; color: var(--ink); margin-bottom: 10px; }
.tt-track-stop { display: inline-flex; align-items: center; justify-content: center; gap: 7px; }
.tt-track-pop .form-label {
    font-size: .74rem;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--faint);
}
@media (max-width: 575px) {
    /* keep the popover on-screen next to the edge */
    .tt-track-pop { right: -8px; width: min(272px, calc(100vw - 20px)); }
}

/* ============================================================
   HOME — the new-tab launcher page
   ============================================================ */
.tt-home {
    min-height: calc(100vh - var(--topbar-h) - 80px);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 40px 16px 60px;
}
.tt-home-brand { display: flex; flex-direction: column; align-items: center; gap: 14px; margin-bottom: 34px; }
.tt-home-logo { height: 64px; width: auto; max-width: 220px; object-fit: contain; border-radius: 14px; }
.tt-home-mark {
    width: 64px; height: 64px; border-radius: 18px;
    display: inline-flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, var(--accent) 0%, var(--accent-hover) 100%);
    color: #fff; font-size: 1.9rem; font-weight: 800; letter-spacing: -.02em;
    box-shadow: 0 6px 18px transparent; box-shadow: 0 6px 18px color-mix(in srgb, var(--accent-hover) 28%, transparent);
}
.tt-home-name { font-size: 1.55rem; font-weight: 700; letter-spacing: -.02em; margin: 0; }

.tt-home-modules { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.tt-home-module {
    display: flex; flex-direction: column; align-items: center; gap: 8px;
    width: 96px; padding: 16px 8px 13px;
    border-radius: 16px;
    color: var(--ink-2); font-size: .84rem; font-weight: 600;
    text-decoration: none;
    transition: background .15s ease, transform .15s ease;
}
.tt-home-module:hover { background: var(--surface); color: var(--ink); transform: translateY(-2px); box-shadow: var(--shadow-sm); }
.tt-home-module-ico {
    width: 52px; height: 52px; border-radius: 15px;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--accent-soft); color: var(--accent-hover);
    transition: transform .15s ease;
}
.tt-home-module-ico .tt-icon { width: 24px; height: 24px; }
.tt-home-module:hover .tt-home-module-ico { transform: scale(1.06); }

.tt-home-quick-title {
    margin: 34px 0 12px;
    font-size: .7rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: .09em; color: var(--faint);
}
.tt-home-quick { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; max-width: 620px; }
.tt-home-chip {
    display: inline-flex; align-items: center; gap: 7px;
    padding: .42rem .85rem;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--surface);
    color: var(--ink-2); font-size: .85rem; font-weight: 550;
    text-decoration: none;
    transition: all .15s ease;
}
.tt-home-chip .tt-icon { width: 14px; height: 14px; opacity: .75; }
.tt-home-chip:hover { border-color: var(--tracker-border); background: var(--accent-soft); color: var(--accent-hover); }
.tt-home-chip:hover .tt-icon { opacity: 1; }

/* ============================================================
   Round 4 — tracker in the dock corner, all-tabs list
   ============================================================ */

/* The mini tracker's round button lives in the TOP-RIGHT CORNER — the
   empty square above the right dock rail — when the dock is present.
   (Without the dock it stays in the navbar, right of the bell.) */
@media (min-width: 768px) {
    /* the tracker is a CHILD of the top bar, so the bar's stacking context
       must sit above the dock rail (1035) or the rail would paint over the
       button; the bar and the dock never overlap geometrically, so this is
       purely for the corner button */
    body.tt-has-dock .tt-nav { z-index: 1046; }
    body.tt-has-dock .tt-track-wrap {
        position: fixed;
        top: calc((var(--topbar-h) - 34px) / 2);
        right: 9px;
        z-index: 1046; /* above the dock rail (1035) and the bars */
        margin: 0;
    }
    body.tt-has-dock .tt-track-pop { right: 0; }
    /* the bell becomes the navbar's last item — drop its edge margin */
    body.tt-has-dock .tt-user-nav { margin-right: .25rem !important; }
}

/* ---- Zoho-style all-tabs dropdown ---- */
.tt-tab-list-btn {
    flex: none;
    align-self: center;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    margin-left: 1px;
    border: 0;
    border-radius: 50%;
    background: none;
    color: var(--muted);
    transition: background .12s ease, color .12s ease;
}
.tt-tab-list-btn .tt-icon { width: 14px; height: 14px; }
.tt-tab-list-btn:hover { background: var(--hover-bg); color: var(--ink); }

.tt-alltabs { padding: .5rem; width: 300px; }
.tt-alltabs-search {
    width: 100%;
    border: 1px solid var(--border-strong);
    border-radius: 8px;
    padding: .4rem .65rem;
    font-size: .86rem;
    color: var(--ink);
    background: var(--bg);
    margin-bottom: .4rem;
}
.tt-alltabs-search:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.tt-alltabs-list { max-height: min(48vh, 380px); overflow-y: auto; }
.tt-alltabs-list::-webkit-scrollbar { width: 8px; }
.tt-alltabs-list::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 8px; }
.tt-alltabs-row { justify-content: flex-start; gap: 9px; cursor: pointer; }
.tt-alltabs-row .tt-icon { width: 15px; height: 15px; flex: none; opacity: .75; }
.tt-alltabs-row .tt-ctx-label { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tt-alltabs-row.is-active { background: var(--accent-soft); color: var(--accent-hover); }
.tt-alltabs-x {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    opacity: 0;
    transition: opacity .12s ease, background .12s ease;
}
.tt-alltabs-x .tt-icon { width: 12px; height: 12px; transform: rotate(45deg); }
.tt-alltabs-row:hover .tt-alltabs-x { opacity: .7; }
.tt-alltabs-x:hover { opacity: 1 !important; background: transparent; background: color-mix(in srgb, var(--danger) 14%, transparent); color: var(--danger); }
.tt-alltabs-empty { padding: .8rem; text-align: center; color: var(--faint); font-size: .84rem; }

/* ---------- Time tracker: day-grouped entries ---------- */
.tt-day + .tt-day { border-top: 1px solid var(--border); }
.tt-day-head {
    display: flex; align-items: center; gap: 12px; width: 100%; text-align: left;
    padding: 12px 16px; border: 0; background: none; color: var(--ink); font-family: var(--font); cursor: pointer;
}
.tt-day-head:hover { background: var(--hover-bg); }
.tt-day.today .tt-day-head { background: transparent; background: color-mix(in srgb, var(--accent) 6%, transparent); }
.tt-day-chev { width: 15px; height: 15px; color: var(--muted); transition: transform .15s ease; flex: none; }
.tt-day.open .tt-day-chev { transform: rotate(90deg); }
.tt-day-date { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.tt-day-date b { font-weight: 650; }
.tt-day-date small { font-size: .78rem; }
.tt-day-meta { margin-left: auto; font-size: .8rem; white-space: nowrap; }
.tt-day-total { font-weight: 700; font-variant-numeric: tabular-nums; min-width: 68px; text-align: right; color: var(--ink); }
.tt-day-total.live { color: var(--success, #198754); }
.tt-day-table td { padding: .55rem 1rem; vertical-align: middle; border-color: var(--border); }
.tt-day-table tr:last-child td { border-bottom: 0; }
.tt-day-table .tt-day-proj { padding-left: 43px; white-space: nowrap; }
.tt-day-table .tt-day-desc { color: var(--ink-2); }
.tt-day-table .tt-day-time { color: var(--muted); font-size: .86rem; font-variant-numeric: tabular-nums; }
.tt-day-acts .btn { padding: .15rem .45rem; }
.tt-day-body { background: var(--surface); }
@media (max-width: 767px) { .tt-day-table .tt-day-proj { padding-left: 16px; } .tt-day-meta { display: none; } .tt-day-table .tt-day-desc { display: none; } }

/* ---------- Common dashboard widgets ---------- */
.tt-dash-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 16px; align-items: start; grid-auto-flow: dense; }
.tt-widget { grid-column: span 4; min-width: 0; }
.tt-widget-wide { grid-column: span 8; }
@media (max-width: 1199px) { .tt-widget { grid-column: span 6; } .tt-widget-wide { grid-column: span 12; } }
@media (max-width: 767px) { .tt-widget, .tt-widget-wide { grid-column: span 12; } }
.tt-widget .card-header { display: flex; align-items: center; gap: 8px; }
.tt-w-ico { display: inline-flex; width: 26px; height: 26px; border-radius: 8px; align-items: center; justify-content: center; }
.tt-w-ico .tt-icon { width: 15px; height: 15px; }
.tt-w-ico.tone-accent { background: var(--accent-soft); color: var(--accent-hover); }
.tt-w-ico.tone-info { background: transparent; background: color-mix(in srgb, #3b82f6 14%, transparent); color: #2563eb; }
.tt-w-ico.tone-ok { background: transparent; background: color-mix(in srgb, #16a34a 14%, transparent); color: #15803d; }
.tt-w-ico.tone-warn { background: transparent; background: color-mix(in srgb, #f59e0b 16%, transparent); color: #b45309; }
.tt-w-link { margin-left: auto; font-size: .8rem; font-weight: 550; border: 0; background: none; color: var(--accent-hover); padding: 0; font-family: var(--font); cursor: pointer; text-decoration: none; }
.tt-w-link:hover { text-decoration: underline; }
.tt-w-count { background: var(--danger); color: #fff; font-size: .68rem; font-weight: 700; border-radius: 999px; padding: 1px 7px; line-height: 1.5; }
.tt-w-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.tt-w-stats.cols-3 { grid-template-columns: repeat(3, 1fr); }
.tt-w-stats.cols-2 { grid-template-columns: repeat(2, 1fr); }
.tt-w-stats > * { min-width: 0; text-decoration: none; color: inherit; }
.tt-w-num { font-size: 1.35rem; font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tt-w-num.hot, .tt-w-kv b.hot { color: var(--danger); }
.tt-w-lbl { font-size: .74rem; color: var(--muted); margin-top: 2px; }
.tt-w-bars { display: flex; align-items: flex-end; gap: 6px; height: 64px; margin: 14px 0 4px; padding-top: 6px; }
.tt-w-bar { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; gap: 4px; }
.tt-w-bar i { display: block; width: 100%; max-width: 34px; border-radius: 5px 5px 2px 2px; background: transparent; background: color-mix(in srgb, var(--accent) 35%, transparent); min-height: 2px; transition: height .3s ease; }
.tt-w-bar.today i { background: var(--accent); }
.tt-w-bar span { font-size: .66rem; color: var(--faint); }
.tt-w-list { display: flex; flex-direction: column; margin-top: 10px; }
.tt-w-row { display: flex; align-items: center; gap: 10px; padding: 7px 0; border-top: 1px solid var(--border); text-decoration: none; color: inherit; width: 100%; background: none; border-left: 0; border-right: 0; border-bottom: 0; text-align: left; font-family: var(--font); }
.tt-w-row:first-child { border-top: 0; }
a.tt-w-row:hover b, button.tt-w-row:hover b { color: var(--accent-hover); }
.tt-w-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.tt-w-main b { font-weight: 550; color: var(--ink); font-size: .88rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tt-w-main small { color: var(--muted); font-size: .76rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tt-w-side { color: var(--muted); font-size: .78rem; white-space: nowrap; }
.tt-w-val { font-variant-numeric: tabular-nums; font-weight: 600; font-size: .85rem; white-space: nowrap; }
.tt-w-badge { background: var(--danger); color: #fff; font-size: .68rem; font-weight: 700; border-radius: 999px; padding: 1px 7px; }
.tt-w-kind { display: inline-flex; width: 26px; height: 26px; border-radius: 7px; align-items: center; justify-content: center; background: var(--bg); color: var(--muted); flex: none; }
.tt-w-kind .tt-icon { width: 14px; height: 14px; }
.tt-w-kind.k-doc { color: #2563eb; } .tt-w-kind.k-sheet { color: #15803d; } .tt-w-kind.k-board { color: #b45309; }
.tt-w-kv { display: flex; flex-direction: column; }
.tt-w-kv a { display: flex; justify-content: space-between; align-items: center; padding: 8px 0; border-top: 1px solid var(--border); text-decoration: none; color: var(--ink-2); font-size: .88rem; }
.tt-w-kv a:first-child { border-top: 0; }
.tt-w-kv b { font-size: 1.05rem; color: var(--ink); font-variant-numeric: tabular-nums; }
.tt-w-meter { height: 6px; border-radius: 999px; background: var(--bg); margin: 12px 0 8px; overflow: hidden; }
.tt-w-meter i { display: block; height: 100%; background: var(--accent); border-radius: 999px; transition: width .3s ease; }
.tt-w-meter i.warn { background: var(--danger); }
.tt-w-note { font-size: .78rem; color: var(--muted); }
.tt-w-empty { font-size: .84rem; color: var(--muted); padding: 8px 0 2px; }

/* ---------- Admin attendance: clickable days, overrides, day drawer ---------- */
.tt-att-cell.is-clickable { cursor: pointer; position: relative; }
.tt-att-cell.selected { outline: 2px solid var(--accent); outline-offset: 1px; }
.tt-att-check { position: absolute; top: 5px; left: 5px; width: 16px; height: 16px; border-radius: 4px; border: 1.5px solid var(--border-strong); background: var(--surface); display: inline-flex; align-items: center; justify-content: center; color: transparent; }
.tt-att-check svg { width: 11px; height: 11px; }
.tt-att-cell.selected .tt-att-check { background: var(--accent); border-color: var(--accent); color: #fff; }
.tt-att-ovmark { position: absolute; top: 4px; right: 6px; font-size: .7rem; color: var(--muted); }
.tt-att-cell.has-override { box-shadow: inset 0 0 0 1px currentColor; }
.tt-att-bulk { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 8px 12px; margin-bottom: 12px; border: 1px solid var(--accent); border-radius: 10px; background: var(--accent-soft); font-size: .86rem; }
.tt-att-export { margin-left: 8px; }
.tt-att-overlay { position: fixed; inset: 0; background: rgba(15, 23, 42, .28); z-index: 1050; }
.tt-att-drawer { position: fixed; top: 0; right: 0; bottom: 0; width: min(460px, 100%); background: var(--surface); z-index: 1051; box-shadow: -12px 0 40px -18px rgba(15, 23, 42, .4); display: flex; flex-direction: column; }
.tt-att-drawer > header { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; padding: 16px 18px 12px; border-bottom: 1px solid var(--border); }
.tt-att-drawer h3 { font-size: 1.05rem; margin: 0; font-weight: 650; }
.tt-att-drawer-body { padding: 14px 18px 24px; overflow: auto; flex: 1; }
.tt-att-sec { padding: 12px 0; border-bottom: 1px solid var(--border); }
.tt-att-sec:last-child { border-bottom: 0; }
.tt-att-sec-head { display: flex; align-items: center; gap: 8px; font-weight: 600; margin-bottom: 4px; }
.tt-att-pill { font-size: .72rem; font-weight: 650; padding: 2px 8px; border-radius: 999px; border: 1px solid; }
.tt-att-entry { display: flex; align-items: center; gap: 8px; padding: 8px 0; border-top: 1px solid var(--border); font-size: .88rem; }
.tt-att-entry:first-of-type { border-top: 0; }
.tt-att-entry b { font-weight: 550; }
.tt-att-form { margin-top: 10px; padding: 10px; border: 1px dashed var(--border-strong); border-radius: 10px; }
.min-w-0 { min-width: 0; }
.tt-sum-chip { display: inline-flex; align-items: center; gap: 7px; padding: 6px 12px; border: 1px solid var(--border); border-radius: 999px; background: var(--surface); font-size: .86rem; }
.tt-sum-chip .tt-icon { width: 15px; height: 15px; color: var(--muted); }
.tt-sum-chip b { font-variant-numeric: tabular-nums; }

/* ---- profile: click-to-change avatar (My profile) ---- */
.tt-avatar-edit{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.tt-avatar-btn{position:relative;border:none;background:none;padding:0;cursor:pointer;border-radius:18px;display:inline-flex}
.tt-avatar-btn .tt-profile-photo{display:inline-flex;align-items:center;justify-content:center;transition:filter .15s}
.tt-avatar-cam{position:absolute;right:-4px;bottom:-4px;width:26px;height:26px;border-radius:50%;background:var(--accent);color:#fff;display:inline-flex;align-items:center;justify-content:center;border:2px solid var(--surface);box-shadow:var(--shadow-sm)}
.tt-avatar-cam .tt-icon{width:13px;height:13px}
.tt-avatar-btn:hover .tt-profile-photo{filter:brightness(.92)}
.tt-avatar-acts{display:flex;align-items:center;gap:4px}
.tt-avatar-acts .btn .tt-icon{width:14px;height:14px;margin-right:5px;vertical-align:-2px}
.tt-avatar-edit.busy{opacity:.6;pointer-events:none}