/* =====================================================================
   Legal Time Tracker — corporate design system
   Dark blue = brand / navigation, Orange = accent / primary actions
   ===================================================================== */
:root {
    --brand-900: #071a33;
    --brand-800: #0b2545;
    --brand-700: #13315c;
    --brand-600: #1d4477;
    --brand-100: #e6edf6;
    --brand-50: #f3f6fa;
    --accent-600: #c25e08;
    --accent-500: #e07a1f;
    --accent-400: #f0943f;
    --accent-100: #fdebd7;
    --ink: #1f2a37;
    --ink-muted: #5b6878;
    --line: #e3e8ef;
    --surface: #ffffff;
    --page: #f4f6f9;
    --sidebar-width: 262px;
    --topbar-height: 64px;
    --radius: 10px;

    --bs-primary: var(--brand-800);
    --bs-primary-rgb: 11, 37, 69;
    --bs-link-color: var(--brand-600);
    --bs-link-color-rgb: 29, 68, 119;
    --bs-link-hover-color: var(--accent-600);
    --bs-body-color: var(--ink);
    --bs-body-font-family: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
    --bs-border-color: var(--line);
}

body { background: var(--page); font-size: .925rem; color: var(--ink); }
h1, h2, h3, h4, h5, h6 { color: var(--brand-800); font-weight: 600; letter-spacing: -.01em; }
a { text-decoration: none; }
.text-muted { color: var(--ink-muted) !important; }
.text-accent { color: var(--accent-600) !important; }
.text-brand { color: var(--brand-800) !important; }
.bg-brand { background: var(--brand-800) !important; color: #fff; }
.bg-accent-soft { background: var(--accent-100) !important; }
.fw-semibold { font-weight: 600 !important; }
.small-caps { font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; font-weight: 600; color: var(--ink-muted); }
.tabular { font-variant-numeric: tabular-nums; }

/* ---------- Buttons ---------- */
.btn { border-radius: 8px; font-weight: 500; }
.btn-primary { --bs-btn-bg: var(--brand-800); --bs-btn-border-color: var(--brand-800); --bs-btn-hover-bg: var(--brand-700); --bs-btn-hover-border-color: var(--brand-700); --bs-btn-active-bg: var(--brand-900); --bs-btn-active-border-color: var(--brand-900); --bs-btn-disabled-bg: var(--brand-600); --bs-btn-disabled-border-color: var(--brand-600); }
.btn-accent { --bs-btn-color: #fff; --bs-btn-bg: var(--accent-600); --bs-btn-border-color: var(--accent-600); --bs-btn-hover-color: #fff; --bs-btn-hover-bg: #a94f04; --bs-btn-hover-border-color: #a94f04; --bs-btn-active-color: #fff; --bs-btn-active-bg: #8f4303; --bs-btn-active-border-color: #8f4303; --bs-btn-disabled-color: #fff; --bs-btn-disabled-bg: var(--accent-500); --bs-btn-disabled-border-color: var(--accent-500); }
.btn-outline-primary { --bs-btn-color: var(--brand-800); --bs-btn-border-color: #b9c6d8; --bs-btn-hover-bg: var(--brand-800); --bs-btn-hover-border-color: var(--brand-800); --bs-btn-active-bg: var(--brand-900); }
.btn-outline-accent { --bs-btn-color: var(--accent-600); --bs-btn-border-color: var(--accent-400); --bs-btn-hover-color: #fff; --bs-btn-hover-bg: var(--accent-600); --bs-btn-hover-border-color: var(--accent-600); }
.btn-icon { width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center; padding: 0; }

/* ---------- Layout ---------- */
.app-sidebar {
    position: fixed; inset: 0 auto 0 0; width: var(--sidebar-width); z-index: 1040;
    background: linear-gradient(180deg, var(--brand-800) 0%, var(--brand-900) 100%);
    color: #c9d4e3; display: flex; flex-direction: column; transition: transform .25s ease;
}
.app-main { margin-left: var(--sidebar-width); min-height: 100vh; display: flex; flex-direction: column; }
.sidebar-brand { height: var(--topbar-height); display: flex; align-items: center; gap: .7rem; padding: 0 1.25rem; border-bottom: 1px solid rgba(255,255,255,.08); color: #fff; }
.sidebar-brand:hover { color: #fff; }
.brand-mark { width: 36px; height: 36px; border-radius: 9px; background: var(--accent-500); color: #fff; display: grid; place-items: center; font-size: 1.15rem; flex-shrink: 0; }
.brand-logo { max-height: 38px; max-width: 64px; object-fit: contain; background: #fff; border-radius: 6px; padding: 2px; }
.brand-text { line-height: 1.15; overflow: hidden; }
.brand-text strong { display: block; font-size: .95rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.brand-text small { color: var(--accent-400); font-size: .7rem; letter-spacing: .08em; text-transform: uppercase; }
.sidebar-nav { flex: 1; overflow-y: auto; padding: .75rem .65rem 1.5rem; }
.sidebar-nav .nav-section { font-size: .66rem; text-transform: uppercase; letter-spacing: .12em; color: #7f93ad; padding: 1rem .8rem .35rem; font-weight: 600; }
.sidebar-nav .nav-link { color: #c9d4e3; border-radius: 8px; padding: .55rem .8rem; display: flex; align-items: center; gap: .7rem; font-size: .9rem; position: relative; }
.sidebar-nav .nav-link i { font-size: 1.05rem; width: 1.2rem; text-align: center; }
.sidebar-nav .nav-link:hover { background: rgba(255,255,255,.06); color: #fff; }
.sidebar-nav .nav-link.active { background: rgba(224,122,31,.14); color: #fff; }
.sidebar-nav .nav-link.active::before { content: ""; position: absolute; left: -.65rem; top: 8px; bottom: 8px; width: 4px; border-radius: 0 4px 4px 0; background: var(--accent-500); }
.sidebar-nav .nav-link.active i { color: var(--accent-400); }
.sidebar-nav .nav-link .chev { margin-left: auto; font-size: .75rem; transition: transform .2s; }
.sidebar-nav .nav-link[aria-expanded="true"] .chev { transform: rotate(90deg); }
.sidebar-nav .sub-nav .nav-link { padding: .4rem .8rem .4rem 2.7rem; font-size: .85rem; color: #aebcd0; }
.sidebar-nav .sub-nav .nav-link.active { background: transparent; color: var(--accent-400); }
.sidebar-nav .sub-nav .nav-link.active::before { display: none; }
.sidebar-footer { padding: .9rem 1.25rem; border-top: 1px solid rgba(255,255,255,.08); font-size: .75rem; color: #7f93ad; }

.app-topbar { height: var(--topbar-height); background: var(--surface); border-bottom: 1px solid var(--line); display: flex; align-items: center; gap: .75rem; padding: 0 1.5rem; position: sticky; top: 0; z-index: 1030; }
.app-content { padding: 1.5rem; flex: 1; }
.app-footer { padding: 1rem 1.5rem; color: var(--ink-muted); font-size: .78rem; border-top: 1px solid var(--line); background: var(--surface); }
.sidebar-backdrop { display: none; }

@media (max-width: 991.98px) {
    .app-sidebar { transform: translateX(-100%); }
    .app-main { margin-left: 0; }
    body.sidebar-open .app-sidebar { transform: translateX(0); box-shadow: 0 0 40px rgba(0,0,0,.35); }
    body.sidebar-open .sidebar-backdrop { display: block; position: fixed; inset: 0; background: rgba(7,26,51,.45); z-index: 1035; }
    .app-content { padding: 1rem; }
    .app-topbar { padding: 0 1rem; }
}

/* ---------- Topbar items ---------- */
.timer-pill { display: inline-flex; align-items: center; gap: .5rem; background: var(--accent-100); color: var(--accent-600); border: 1px solid #f6cfa5; border-radius: 999px; padding: .3rem .85rem; font-weight: 600; font-size: .85rem; }
.timer-pill:hover { color: #8f4303; background: #fbe0c3; }
.timer-pill .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent-500); animation: pulse 1.4s infinite; }
.timer-pill.paused .dot { animation: none; background: #9aa5b4; }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(224,122,31,.6); } 70% { box-shadow: 0 0 0 8px rgba(224,122,31,0); } 100% { box-shadow: 0 0 0 0 rgba(224,122,31,0); } }
.notif-badge { position: absolute; top: 2px; right: 0; font-size: .6rem; padding: .2em .45em; }
.notif-menu { width: 360px; max-width: calc(100vw - 2rem); }
.notif-item { white-space: normal; padding: .65rem 1rem; border-bottom: 1px solid var(--line); }
.notif-item:last-child { border-bottom: 0; }
.avatar { width: 34px; height: 34px; border-radius: 50%; background: var(--brand-100); color: var(--brand-800); display: inline-grid; place-items: center; font-weight: 600; font-size: .78rem; object-fit: cover; flex-shrink: 0; }
.avatar-lg { width: 84px; height: 84px; font-size: 1.6rem; }
.avatar-sm { width: 26px; height: 26px; font-size: .65rem; }

/* ---------- Page header & breadcrumbs ---------- */
.page-header { display: flex; flex-wrap: wrap; gap: 1rem; align-items: flex-end; justify-content: space-between; margin-bottom: 1.25rem; }
.page-header h1 { font-size: 1.45rem; margin: 0; }
.page-header .subtitle { color: var(--ink-muted); margin-top: .2rem; }
.breadcrumb { font-size: .78rem; margin-bottom: .35rem; --bs-breadcrumb-divider-color: #9aa5b4; }
.breadcrumb a { color: var(--ink-muted); }
.breadcrumb a:hover { color: var(--accent-600); }

/* ---------- Cards ---------- */
.card { border: 1px solid var(--line); border-radius: var(--radius); box-shadow: 0 1px 2px rgba(16,24,40,.04); }
.card-header { background: var(--surface); border-bottom: 1px solid var(--line); padding: .85rem 1.1rem; font-weight: 600; color: var(--brand-800); display: flex; align-items: center; justify-content: space-between; gap: .5rem; border-radius: var(--radius) var(--radius) 0 0 !important; }
.card-header .card-title { margin: 0; font-size: .98rem; }
.stat-card { padding: 1.1rem 1.2rem; display: flex; gap: 1rem; align-items: center; height: 100%; }
.stat-card .stat-icon { width: 46px; height: 46px; border-radius: 12px; display: grid; place-items: center; font-size: 1.3rem; flex-shrink: 0; background: var(--brand-100); color: var(--brand-700); }
.stat-card .stat-icon.accent { background: var(--accent-100); color: var(--accent-600); }
.stat-card .stat-icon.danger { background: #fde8e8; color: #b42318; }
.stat-card .stat-icon.success { background: #e3f4ea; color: #1e7a46; }
.stat-card .stat-value { font-size: 1.45rem; font-weight: 700; color: var(--brand-800); line-height: 1.1; font-variant-numeric: tabular-nums; }
.stat-card .stat-label { color: var(--ink-muted); font-size: .8rem; }
a.stat-link { color: inherit; display: block; height: 100%; }
a.stat-link .card { transition: border-color .15s, transform .15s; }
a.stat-link:hover .card { border-color: var(--accent-400); transform: translateY(-1px); }
.detail-list dt { font-weight: 500; color: var(--ink-muted); font-size: .8rem; }
.detail-list dd { margin-bottom: .8rem; }

/* ---------- Tables ---------- */
.table { --bs-table-hover-bg: var(--brand-50); margin-bottom: 0; vertical-align: middle; }
.table > thead th { background: #f7f9fc; color: var(--ink-muted); font-size: .74rem; text-transform: uppercase; letter-spacing: .05em; font-weight: 600; border-bottom: 1px solid var(--line); white-space: nowrap; padding-top: .7rem; padding-bottom: .7rem; }
.table > thead th a { color: inherit; display: inline-flex; align-items: center; gap: .25rem; }
.table > thead th a:hover { color: var(--brand-800); }
.table > thead th a.sorted { color: var(--brand-800); }
.table td { border-color: var(--line); }
.table tfoot td { font-weight: 700; background: var(--accent-100); }
.table .row-link { color: var(--brand-800); font-weight: 600; }
.table .row-link:hover { color: var(--accent-600); }
.table-card .card-body { padding: 0; }
.table-card .pagination-wrap { padding: .75rem 1rem; border-top: 1px solid var(--line); }
.pagination { margin-bottom: 0; --bs-pagination-active-bg: var(--brand-800); --bs-pagination-active-border-color: var(--brand-800); --bs-pagination-color: var(--brand-700); }
.text-truncate-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.cell-desc { max-width: 380px; min-width: 200px; }

/* ---------- Filters ---------- */
.filter-card .card-body { padding: .9rem 1rem; }
.filter-card .form-label { font-size: .74rem; color: var(--ink-muted); font-weight: 600; margin-bottom: .2rem; }

/* ---------- Forms ---------- */
.form-control, .form-select { border-radius: 8px; border-color: #d3dbe6; }
.form-control:focus, .form-select:focus, .form-check-input:focus { border-color: var(--accent-400); box-shadow: 0 0 0 .2rem rgba(224,122,31,.18); }
.form-check-input:checked { background-color: var(--brand-800); border-color: var(--brand-800); }
.form-label { font-weight: 500; color: var(--ink); margin-bottom: .3rem; }
.required::after { content: " *"; color: #b42318; }
.form-section-title { font-size: .78rem; text-transform: uppercase; letter-spacing: .08em; color: var(--accent-600); font-weight: 700; margin: .5rem 0 1rem; padding-bottom: .4rem; border-bottom: 1px solid var(--line); }
.form-actions { display: flex; flex-wrap: wrap; gap: .5rem; justify-content: flex-end; padding-top: 1rem; border-top: 1px solid var(--line); margin-top: 1rem; }
.select-multi { min-height: 160px; }
.duration-preview { background: var(--brand-50); border: 1px dashed #b9c6d8; border-radius: 8px; padding: .55rem .8rem; font-weight: 600; color: var(--brand-800); }
.duration-preview.invalid { background: #fdecec; border-color: #f0a4a4; color: #b42318; }

/* ---------- Badges ---------- */
.badge { font-weight: 600; letter-spacing: .02em; padding: .38em .65em; border-radius: 6px; }
.badge-soft-secondary { background: #eef1f5; color: #4a5565; }
.badge-soft-primary { background: var(--brand-100); color: var(--brand-700); }
.badge-soft-info { background: #e2f1fb; color: #0b5d8f; }
.badge-soft-success { background: #e3f4ea; color: #1e6e40; }
.badge-soft-warning { background: #fff2d9; color: #8a5300; }
.badge-soft-danger { background: #fde8e8; color: #a61b14; }
.badge-soft-dark { background: #e4e7ec; color: #2b3442; }
.badge-soft-accent { background: var(--accent-100); color: #8f4303; }

/* ---------- Nav tabs ---------- */
.nav-tabs { border-bottom-color: var(--line); gap: .25rem; flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; }
.nav-tabs .nav-link { color: var(--ink-muted); border: 0; border-bottom: 3px solid transparent; font-weight: 500; white-space: nowrap; }
.nav-tabs .nav-link:hover { color: var(--brand-800); border-bottom-color: #cfd8e3; }
.nav-tabs .nav-link.active { color: var(--brand-800); border-bottom-color: var(--accent-500); background: transparent; }

/* ---------- Empty states ---------- */
.empty-state { text-align: center; padding: 2.5rem 1rem; color: var(--ink-muted); }
.empty-state i { font-size: 2.4rem; color: #b9c6d8; display: block; margin-bottom: .6rem; }
.empty-state h6 { color: var(--brand-800); margin-bottom: .3rem; }

/* ---------- Timer ---------- */
.timer-display { font-size: 3.6rem; font-weight: 700; letter-spacing: .02em; color: var(--brand-800); font-variant-numeric: tabular-nums; line-height: 1; }
.timer-card { border-top: 4px solid var(--accent-500); }
.timer-card.paused { border-top-color: #9aa5b4; }
.timer-card.paused .timer-display { color: #7b8794; }
@media (max-width: 575.98px) { .timer-display { font-size: 2.6rem; } }

/* ---------- Progress & misc ---------- */
.progress { height: 8px; background: #eef1f5; border-radius: 99px; }
.progress-bar { background: var(--accent-500); }
.bar-row { display: grid; grid-template-columns: minmax(90px, 160px) 1fr auto; gap: .65rem; align-items: center; margin-bottom: .55rem; font-size: .85rem; }
.bar-row .bar { height: 10px; background: #eef1f5; border-radius: 99px; overflow: hidden; }
.bar-row .bar span { display: block; height: 100%; background: var(--brand-600); border-radius: 99px; }
.week-strip { display: grid; grid-template-columns: repeat(7, 1fr); gap: .5rem; }
.week-strip .day { border: 1px solid var(--line); border-radius: 8px; padding: .5rem; text-align: center; background: var(--surface); }
.week-strip .day.today { border-color: var(--accent-500); background: var(--accent-100); }
.week-strip .day .d { font-size: .72rem; color: var(--ink-muted); text-transform: uppercase; }
.week-strip .day .h { font-weight: 700; color: var(--brand-800); font-variant-numeric: tabular-nums; }
.activity-item { display: flex; gap: .75rem; padding: .7rem 0; border-bottom: 1px solid var(--line); }
.activity-item:last-child { border-bottom: 0; }
.activity-icon { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--brand-100); color: var(--brand-700); font-size: .85rem; flex-shrink: 0; }
.chart-box { position: relative; height: 260px; }
.chart-box.tall { height: 320px; }
.list-group-item-action:hover { background: var(--brand-50); }
.deadline-date { width: 48px; text-align: center; border-radius: 8px; background: var(--brand-50); padding: .25rem 0; flex-shrink: 0; }
.deadline-date .m { font-size: .62rem; text-transform: uppercase; color: var(--accent-600); font-weight: 700; }
.deadline-date .d { font-size: 1.05rem; font-weight: 700; color: var(--brand-800); line-height: 1; }

/* ---------- Toasts ---------- */
.toast-container { z-index: 1100; }
.toast { border: 0; box-shadow: 0 10px 30px rgba(7,26,51,.18); }

/* ---------- Auth ---------- */
.auth-body { min-height: 100vh; background: radial-gradient(circle at 15% 20%, rgba(224,122,31,.18), transparent 35%), linear-gradient(135deg, var(--brand-900), var(--brand-700)); display: flex; align-items: center; justify-content: center; padding: 1.5rem; }
.auth-card { width: 100%; max-width: 940px; border: 0; border-radius: 16px; overflow: hidden; box-shadow: 0 30px 80px rgba(0,0,0,.35); }
.auth-aside { background: linear-gradient(160deg, var(--brand-800), var(--brand-900)); color: #c9d4e3; padding: 3rem 2.5rem; position: relative; }
.auth-aside h2 { color: #fff; font-size: 1.6rem; }
.auth-aside .feature { display: flex; gap: .75rem; margin-top: 1.1rem; }
.auth-aside .feature i { color: var(--accent-400); font-size: 1.2rem; }
.auth-aside .rule { width: 56px; height: 4px; background: var(--accent-500); border-radius: 4px; margin: 1.25rem 0; }
.auth-form { padding: 3rem 2.5rem; background: #fff; }
@media (max-width: 767.98px) { .auth-form, .auth-aside { padding: 2rem 1.5rem; } }

/* ---------- Errors ---------- */
.error-page { min-height: 70vh; display: flex; align-items: center; justify-content: center; text-align: center; }
.error-code { font-size: 5rem; font-weight: 800; color: var(--brand-800); line-height: 1; }
.error-code span { color: var(--accent-500); }

/* ---------- Loading state ---------- */
.btn.is-loading { pointer-events: none; opacity: .8; }
.page-loading { position: fixed; top: 0; left: 0; height: 3px; background: var(--accent-500); z-index: 2000; width: 0; transition: width .4s ease; }
.page-loading.active { width: 70%; }

@media print {
    .app-sidebar, .app-topbar, .app-footer, .no-print, .filter-card { display: none !important; }
    .app-main { margin: 0; }
}

.min-w-0 { min-width: 0; }


/* ---------- Firm logo (replaces the name when a logo is set in Settings) ---------- */
.sidebar-brand-logo { height: auto; padding: .85rem 1rem; }
.brand-logo-box { display: flex; align-items: center; justify-content: center; width: 100%; padding: .15rem .25rem; }
.brand-logo-box img { max-width: 100%; max-height: 84px; object-fit: contain; }
.auth-logo-box { align-self: flex-start; }
.auth-logo-box img { display: block; max-height: 150px; max-width: 300px; object-fit: contain; filter: drop-shadow(0 4px 14px rgba(0,0,0,.35)); }