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

:root {
    --bg: #f4f9f6;
    --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;
}

th a.sort-link {
    color: inherit;
    text-decoration: none;
}

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

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

.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;
    top: 72px;
    right: 16px;
    z-index: 2000;
    display: flex;
    flex-direction: column;
    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); }

/* ---------- 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 rgba(5, 122, 85, .25), 0 4px 12px rgba(14, 159, 110, .28);
    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 rgba(5, 122, 85, .28), 0 6px 16px rgba(14, 159, 110, .35);
    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 rgba(5, 122, 85, .08), 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 rgba(14, 159, 110, .18);
    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.05em;
    height: 1.05em;
    flex: none;
    vertical-align: -0.16em;
}

.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; }

/* 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;
}