/*
 * Tactile Material interface — v0.7.1
 * Dark operational canvas inspired by the supplied analytics design system.
 */

:root {
    color-scheme: dark;
    --primary: #3b82f6;
    --primary-strong: #93c5fd;
    --primary-soft: rgb(59 130 246 / 16%);
    --secondary: #eab393;
    --surface: #0b1224;
    --surface-2: #020617;
    --surface-3: #151f35;
    --ink: #f8fafc;
    --ink-muted: #9caac0;
    --outline: rgb(148 163 184 / 18%);
    --outline-strong: rgb(148 163 184 / 34%);
    --danger: #fb7185;
    --danger-soft: rgb(244 63 94 / 14%);
    --success: #34d399;
    --shadow-1: 0 1px 0 rgb(255 255 255 / 4%) inset, 0 12px 30px rgb(0 0 0 / 18%);
    --shadow-2: 0 1px 0 rgb(255 255 255 / 5%) inset, 0 24px 70px rgb(0 0 0 / 42%);
    --radius-sm: 9px;
    --radius-md: 16px;
    --radius-lg: 22px;
    --appbar-h: 68px;
    --nav-w: 252px;
    --font: Inter, "Segoe UI Variable", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --font-mono: "JetBrains Mono", "Cascadia Code", "SFMono-Regular", Consolas, monospace;
}

html { background: #020617; }
body {
    isolation: isolate;
    color: var(--ink);
    background:
        radial-gradient(circle at 12% -6%, rgb(59 130 246 / 18%), transparent 31rem),
        radial-gradient(circle at 103% 18%, rgb(234 179 147 / 9%), transparent 30rem),
        #020617;
    background-attachment: fixed;
}
body::before {
    content: "";
    position: fixed;
    z-index: 0;
    inset: 0;
    pointer-events: none;
    opacity: .34;
    background-image:
        linear-gradient(rgb(148 163 184 / 4%) 1px, transparent 1px),
        linear-gradient(90deg, rgb(148 163 184 / 4%) 1px, transparent 1px);
    background-size: 40px 40px;
    mask-image: linear-gradient(to bottom, #000 0, transparent 72%);
}
body::after {
    content: "";
    position: fixed;
    z-index: 0;
    top: 88px;
    right: 7vw;
    width: 220px;
    height: 220px;
    border: 1px solid rgb(59 130 246 / 9%);
    border-radius: 50%;
    pointer-events: none;
    box-shadow: 0 0 0 48px rgb(59 130 246 / 2.5%), 0 0 0 96px rgb(234 179 147 / 1.7%);
    animation: ambient-drift 12s ease-in-out infinite alternate;
}
::selection { color: #fff; background: rgb(59 130 246 / 72%); }
* { scrollbar-color: #334767 #081022; scrollbar-width: thin; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: #081022; }
*::-webkit-scrollbar-thumb { border: 2px solid #081022; border-radius: 99px; background: #334767; }
*::-webkit-scrollbar-thumb:hover { background: #496487; }

.page-shell { position: relative; z-index: 1; padding-top: calc(var(--appbar-h) + 26px); }
body.has-edit-activity .page-shell { padding-top: calc(var(--appbar-h) + var(--editbar-h) + 26px); }

/* Application chrome */
.app-bar {
    height: var(--appbar-h);
    gap: 12px;
    border-bottom: 1px solid rgb(148 163 184 / 16%);
    color: var(--ink);
    background: rgb(2 6 23 / 83%);
    box-shadow: 0 10px 34px rgb(0 0 0 / 24%);
    backdrop-filter: blur(20px) saturate(135%);
}
.brand { gap: 11px; }
.brand-mark {
    position: relative;
    width: 40px;
    height: 40px;
    border: 1px solid rgb(147 197 253 / 36%);
    border-radius: 12px;
    color: #fff;
    background: linear-gradient(145deg, #2563eb, #3b82f6 62%, #60a5fa);
    box-shadow: 0 0 0 4px rgb(59 130 246 / 9%), 0 12px 26px rgb(37 99 235 / 28%);
}
.brand-mark::after {
    content: "";
    position: absolute;
    top: -3px;
    right: -3px;
    width: 8px;
    height: 8px;
    border: 2px solid #020617;
    border-radius: 50%;
    background: var(--secondary);
}
.brand-copy strong { color: #fff; font-weight: 720; letter-spacing: -.015em; }
.brand-copy small { color: #8391a8; font-family: var(--font-mono); font-size: .62rem; letter-spacing: .025em; text-transform: uppercase; }
.nav-toggle { color: #b9c5d8; background: rgb(148 163 184 / 7%); }
.nav-toggle:hover { color: #fff; background: rgb(59 130 246 / 18%); }
.theme-toggle { width: 38px; height: 38px; flex: 0 0 auto; border: 1px solid var(--outline); border-radius: 12px; color: #c5d2e5; background: rgb(15 23 42 / 72%); }
.theme-toggle:hover { color: #fff; border-color: rgb(96 165 250 / 38%); background: rgb(59 130 246 / 18%); }
.theme-toggle [data-theme-icon] { display: none; place-items: center; }
.theme-toggle [data-theme-icon] .icon { width: 18px; height: 18px; }
html.theme-light .theme-toggle [data-theme-icon="dark"], html.theme-dark .theme-toggle [data-theme-icon="light"] { display: grid; }
.sync-state {
    min-height: 34px;
    padding: 0 11px;
    border: 1px solid var(--outline);
    border-radius: 999px;
    color: #bac6d8;
    background: rgb(15 23 42 / 72%);
    font-family: var(--font-mono);
    font-size: .63rem;
    letter-spacing: .02em;
}
.sync-state i { background: #34d399; box-shadow: 0 0 0 4px rgb(52 211 153 / 10%), 0 0 12px rgb(52 211 153 / 45%); }
.sync-state.loading i, .sync-state.saving i { background: #fbbf24; }
.sync-state.error i { background: #fb7185; }
.user-chip {
    min-height: 44px;
    padding: 5px 9px 5px 5px;
    border-color: var(--outline);
    border-radius: 14px;
    background: rgb(15 23 42 / 74%);
}
.user-chip:hover, .user-chip[aria-expanded="true"] { border-color: rgb(96 165 250 / 38%); background: #111c32; }
.avatar { border: 1px solid rgb(96 165 250 / 22%); color: #dbeafe; background: rgb(59 130 246 / 19%); }
.user-copy strong { color: #eff6ff; }.user-copy small { color: #8290a7; }
.user-menu {
    border-color: var(--outline);
    border-radius: 16px;
    background: rgb(9 16 32 / 97%);
    box-shadow: var(--shadow-2);
    backdrop-filter: blur(20px);
}
.user-menu-head { border-color: var(--outline); }.user-menu-head small { color: var(--ink-muted); }
.user-menu a { color: #c6d0df; }.user-menu a:hover { color: #fff; background: var(--primary-soft); }
.edit-activity-bar {
    color: #b9c8dc;
    border-color: rgb(59 130 246 / 26%);
    background: rgb(8 18 39 / 94%);
    box-shadow: 0 8px 20px rgb(0 0 0 / 18%);
    backdrop-filter: blur(16px);
}
.edit-activity-bar strong { color: #93c5fd; font-family: var(--font-mono); font-size: .65rem; letter-spacing: .025em; text-transform: uppercase; }
.edit-activity-bar i { background: #34d399; box-shadow: 0 0 0 4px rgb(52 211 153 / 10%), 0 0 14px rgb(52 211 153 / 42%); }
.edit-activity-bar.error { color: #fecdd3; border-color: rgb(251 113 133 / 38%); background: rgb(63 15 28 / 96%); }

.side-nav {
    top: var(--appbar-h);
    width: var(--nav-w);
    padding: 16px 12px 13px;
    border-color: rgb(148 163 184 / 14%);
    background: rgb(4 9 22 / 91%);
    box-shadow: 14px 0 38px rgb(0 0 0 / 14%);
    backdrop-filter: blur(20px) saturate(120%);
}
.nav-context { display: flex; flex-direction: column; gap: 3px; padding: 3px 12px 15px; border-bottom: 1px solid rgb(148 163 184 / 11%); margin-bottom: 12px; }
.nav-context span { color: #65738a; font-family: var(--font-mono); font-size: .56rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.nav-context strong { overflow: hidden; color: #dce6f5; font-size: .78rem; font-weight: 680; text-overflow: ellipsis; white-space: nowrap; }
.side-nav nav { gap: 5px; }
.nav-item {
    position: relative;
    min-height: 44px;
    gap: 12px;
    padding: 0 13px;
    border: 1px solid transparent;
    border-radius: 11px;
    color: #8d9bb1;
    font-size: .78rem;
    font-weight: 650;
}
.nav-item .icon { width: 19px; height: 19px; }
.nav-item:hover { color: #e4edfa; border-color: rgb(148 163 184 / 13%); background: rgb(148 163 184 / 7%); transform: translateX(2px); }
.nav-item.active {
    color: #eff6ff;
    border-color: rgb(96 165 250 / 27%);
    background: linear-gradient(100deg, rgb(59 130 246 / 23%), rgb(59 130 246 / 8%));
    box-shadow: inset 3px 0 #3b82f6, 0 8px 26px rgb(2 6 23 / 30%);
}
.nav-item.active .icon { color: #60a5fa; filter: drop-shadow(0 0 8px rgb(59 130 246 / 44%)); }
.nav-session { display: flex; align-items: center; gap: 9px; padding: 10px 11px; border: 1px solid var(--outline); border-radius: 12px; background: rgb(15 23 42 / 62%); }
.nav-session > i { width: 8px; height: 8px; flex: 0 0 auto; border-radius: 50%; background: #34d399; box-shadow: 0 0 0 4px rgb(52 211 153 / 9%); }
.nav-session > span { display: flex; min-width: 0; flex-direction: column; }
.nav-session strong { color: #c9d4e3; font-family: var(--font-mono); font-size: .58rem; letter-spacing: .02em; text-transform: uppercase; }
.nav-session small { overflow: hidden; margin-top: 2px; color: #708098; font-size: .59rem; text-overflow: ellipsis; white-space: nowrap; }
.version { color: #56657b; font-family: var(--font-mono); font-size: .57rem; }
.nav-scrim { background: rgb(2 6 23 / 68%); backdrop-filter: blur(5px); }
body.nav-collapsed .side-nav { width: 76px; }
body.nav-collapsed .nav-context { display: none; }
body.nav-collapsed .nav-session { justify-content: center; padding-inline: 0; }
body.nav-collapsed .nav-session span { display: none; }

/* Page hierarchy and material controls */
.page-heading {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    align-items: center;
    padding: 21px 23px;
    margin-bottom: 18px;
    border: 1px solid var(--outline);
    border-radius: 19px;
    background: linear-gradient(120deg, rgb(15 23 42 / 86%), rgb(9 16 32 / 74%));
    box-shadow: var(--shadow-1);
}
.page-heading::before { content: ""; position: absolute; z-index: -1; inset: 0 auto 0 0; width: 4px; background: linear-gradient(#60a5fa, #eab393); }
.page-heading::after { content: ""; position: absolute; z-index: -1; top: -90px; right: 9%; width: 260px; height: 180px; border-radius: 50%; background: rgb(59 130 246 / 9%); filter: blur(28px); }
.page-heading h1 { color: #fff; font-size: clamp(1.55rem, 2vw, 2.1rem); font-weight: 650; letter-spacing: -.035em; }
.page-description { color: #98a7bc; font-size: .82rem; }
.eyebrow { color: #93c5fd; font-family: var(--font-mono); font-size: .61rem; font-weight: 700; letter-spacing: .12em; }

.button, .icon-button, .nav-item, .user-chip { position: relative; overflow: hidden; }
.button { min-height: 40px; border: 1px solid transparent; border-radius: 10px; font-size: .76rem; font-weight: 720; }
.button.primary { border-color: rgb(147 197 253 / 22%); color: #fff; background: linear-gradient(145deg, #2563eb, #3b82f6); box-shadow: 0 9px 24px rgb(37 99 235 / 25%); }
.button.primary:hover { background: linear-gradient(145deg, #3b82f6, #60a5fa); box-shadow: 0 12px 30px rgb(37 99 235 / 34%); transform: translateY(-1px); }
.button.tonal { border-color: rgb(96 165 250 / 18%); color: #bfdbfe; background: rgb(59 130 246 / 14%); }
.button.tonal:hover { border-color: rgb(96 165 250 / 34%); color: #eff6ff; background: rgb(59 130 246 / 22%); }
.button.text { color: #93c5fd; }.button.text:hover { background: rgb(59 130 246 / 12%); }
.button.danger { color: #fff; background: #e11d48; }.button.danger.text { color: #fda4af; background: transparent; }
.button.danger.text:hover { background: var(--danger-soft); }
.icon-button { color: #9eacc0; }.icon-button:hover { color: #dbeafe; background: rgb(59 130 246 / 14%); }
.button:focus-visible, .icon-button:focus-visible, .nav-item:focus-visible, .user-chip:focus-visible { outline: 2px solid #60a5fa; outline-offset: 2px; }
.button::after, .icon-button::after, .nav-item::after, .user-chip::after {
    content: "";
    position: absolute;
    top: var(--ripple-y, 50%);
    left: var(--ripple-x, 50%);
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgb(255 255 255 / 34%);
    opacity: 0;
    pointer-events: none;
    transform: translate(-50%, -50%) scale(0);
}
.material-ripple::after { animation: material-ripple .5s ease-out; }
.year-control, .scroll-buttons { border-color: var(--outline); background: rgb(15 23 42 / 70%); box-shadow: inset 0 1px rgb(255 255 255 / 3%); }
.year-control input { color: #eff6ff; font-family: var(--font-mono); }
.compact-field span, .field { color: #a8b5c8; }
.compact-field span, .field > span { font-family: var(--font-mono); font-size: .61rem; letter-spacing: .025em; }
.compact-field select {
    border-color: var(--outline-strong);
    color: #e7eef9;
    background: #0f182b;
}
.compact-field select:focus { border-color: #60a5fa; box-shadow: 0 0 0 3px rgb(59 130 246 / 14%); }

/* Dense tactile metrics */
.summary-grid { gap: 10px; margin-bottom: 14px; }
.summary-card {
    isolation: isolate;
    min-height: 91px;
    padding: 15px;
    border-color: var(--outline);
    border-radius: 15px;
    color: var(--ink);
    background: linear-gradient(145deg, rgb(17 27 48 / 92%), rgb(9 16 31 / 92%));
    box-shadow: var(--shadow-1);
}
.summary-card::before { content: ""; position: absolute; z-index: -1; inset: 0 0 auto; height: 2px; background: linear-gradient(90deg, var(--accent), transparent 70%); opacity: .9; }
.summary-card::after { z-index: -1; inset: auto -24px -46px auto; width: 112px; height: 112px; background: radial-gradient(circle, var(--accent), transparent 68%); opacity: .12; filter: blur(2px); }
.summary-card:hover { border-color: color-mix(in srgb, var(--accent) 42%, transparent); transform: translateY(-3px); box-shadow: 0 18px 42px rgb(0 0 0 / 28%); }
.summary-icon { width: 42px; height: 42px; border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent); border-radius: 12px; color: var(--accent); background: color-mix(in srgb, var(--accent) 14%, #0b1224); }
.summary-card small { color: #8e9db2; font-family: var(--font-mono); font-size: .6rem; font-weight: 650; letter-spacing: .025em; text-transform: uppercase; }
.summary-card strong { color: #f8fafc; font-size: 1.58rem; font-weight: 620; font-variant-numeric: tabular-nums; }
.accent-blue { --accent: #60a5fa; }.accent-teal { --accent: #2dd4bf; }.accent-green { --accent: #4ade80; }.accent-red { --accent: #fb7185; }.accent-pink { --accent: #f472b6; }.accent-purple { --accent: #c084fc; }

.legend-card, .schedule-panel, .report-panel, .data-panel, .settings-card, .personal-calendar-panel, .report-output-wrap {
    border-color: var(--outline);
    background: rgb(9 16 32 / 90%);
    box-shadow: var(--shadow-1);
    backdrop-filter: blur(8px);
}
.legend-title > span, .schedule-toolbar h2, .report-heading h2, .section-head h2, .puantaj-export-copy h2 { color: #edf4ff; font-weight: 650; }
.legend-title small, .schedule-toolbar p, .report-heading p:last-child, .section-head p:last-child, .puantaj-export-copy p:last-child { color: #8998ae; }
.legend-chip { border-color: color-mix(in srgb, var(--status-color) 55%, #334155); background: color-mix(in srgb, var(--status-color) 28%, #0b1224); }
.skeleton-line { background: linear-gradient(90deg, #152038, #263753, #152038); background-size: 200% 100%; }
.move-banner { border-color: rgb(234 179 147 / 42%); color: #fed7aa; background: rgb(69 35 20 / 94%); box-shadow: var(--shadow-2); backdrop-filter: blur(14px); }

/* Schedule workspace */
.schedule-panel { border-radius: 18px; }
.schedule-toolbar, .report-heading, .data-toolbar {
    border-color: var(--outline);
    background: linear-gradient(180deg, rgb(17 27 47 / 96%), rgb(10 18 34 / 96%));
}
.schedule-scroll { background: #050a16; scrollbar-color: #405574 #080e1c; }
.schedule-grid { background: #26334a; gap: 1px; }
.month-corner { border-color: #294267; color: #eff6ff; background: #081226; }
.month-corner small { color: #73839b; font-family: var(--font-mono); }
.month-band { border-color: #2b4d7b; color: #eff6ff; background: linear-gradient(105deg, #1d4ed8, #2563eb 58%, #3b82f6); box-shadow: inset 3px 0 rgb(255 255 255 / 12%); }
.month-band span { color: rgb(255 255 255 / 68%); font-family: var(--font-mono); }
.grid-corner, .day-header { border-color: #33435d; background: #101a2d; }
.grid-corner { color: #f1f5f9; background: #0a1428; }
.grid-corner small, .day-header small { color: #75859b; font-family: var(--font-mono); }
.day-header strong { color: #f8fafc; font-weight: 570; font-variant-numeric: tabular-nums; }
.day-header span { color: #9aa9bd; }
.day-header.weekend { background: #1a151d; }
.day-header.today { color: #dbeafe; background: #10294a; box-shadow: inset 0 3px #60a5fa, inset 0 0 32px rgb(59 130 246 / 12%); }
.day-header.month-start, .assignment-cell.month-start { border-left-color: #5275a8; }
.day-note-button { border-color: #3a4a63; color: #91a0b5; background: rgb(15 23 42 / 82%); }
.day-note-button:hover, .day-note-button:focus-visible { border-color: #60a5fa; color: #fff; background: #2563eb; }
.day-note-button.has-notes { border-color: rgb(96 165 250 / 55%); color: #bfdbfe; background: rgb(59 130 246 / 19%); }
.day-note-button.has-open-task { border-color: rgb(234 179 147 / 54%); color: #fed7aa; background: rgb(234 179 147 / 13%); }
.day-note-button b { border-color: #101a2d; background: #3b82f6; }
.row-label { color: #eef5ff; background: #0b1426; box-shadow: 8px 0 20px rgb(0 0 0 / 18%); }
.row-label > span:not(.row-accent) { color: #8796ac; }.row-label small { color: #93c5fd; font-family: var(--font-mono); }
.row-accent { box-shadow: 0 0 14px color-mix(in srgb, var(--shift-color) 38%, transparent); }
.assignment-cell { background: #080f1e; }
.assignment-cell.weekend { background: #110f17; }
.assignment-cell.today { background: #09172a; box-shadow: inset 2px 0 rgb(96 165 250 / 42%), inset -2px 0 rgb(96 165 250 / 42%); }
.assignment-cell.drop-over, .assignment-cell.move-target:hover { background: #10264a; box-shadow: inset 0 0 0 3px #60a5fa; }
.assignment-cell.move-target { background-image: linear-gradient(135deg, transparent 0 48%, rgb(96 165 250 / 8%) 48% 52%, transparent 52%); }
.person-card { border-color: color-mix(in srgb, var(--status-color) 68%, #64748b); border-radius: 9px; box-shadow: 0 4px 13px rgb(0 0 0 / 18%); }
.person-card:hover { transform: translateY(-2px) scale(1.01); box-shadow: 0 9px 20px rgb(0 0 0 / 30%); }
.person-avatar { border: 1px solid rgb(255 255 255 / 17%); box-shadow: 0 4px 10px rgb(0 0 0 / 18%); }
.future-mark { color: #eff6ff; background: rgb(37 99 235 / 86%); box-shadow: 0 0 0 2px rgb(96 165 250 / 13%); }
.cell-add { border-color: #47566c; color: #91a0b6; background: rgb(12 21 38 / 88%); }
.assignment-cell:hover .cell-add, .cell-add:focus-visible { border-color: #60a5fa; color: #fff; background: #2563eb; }
.loading-panel, .empty-state { color: #8f9db1; background: #091020; }
.empty-state strong { color: #e7eef9; }.spinner { border-color: #26344c; border-top-color: #60a5fa; }

/* Cumulative analytics table */
.report-panel { border-radius: 18px; }
.report-period { border: 1px solid rgb(96 165 250 / 22%); color: #bfdbfe; background: rgb(59 130 246 / 13%); font-family: var(--font-mono); }
.summary-table { color: #c9d4e4; }
.summary-table th, .summary-table td { border-color: #233049; }
.summary-table thead th { color: #aebbd0; background: #121d32; font-family: var(--font-mono); }
.summary-table thead tr:nth-child(2) th:nth-child(even), .summary-table .cumulative-cell { background: #10192c; }
.summary-table .person-summary-head { color: #f8fafc; background: #0b1730; }
.summary-table .person-summary-cell { color: #e7eef9; background: #0b1426; }
.person-summary-cell small { color: #7f8ea4; }
.summary-table tbody tr:hover td, .summary-table tbody tr:hover .person-summary-cell { background: #14223b; }
.summary-table .summary-total-head, .summary-table .summary-total { color: #f6cfb9; background: rgb(234 179 147 / 13%); }
.summary-table tfoot th, .summary-table tfoot td { color: #eaf2ff; background: #0b1e3b; }
.summary-table tfoot td.cumulative-cell { color: #dbeafe; background: #17284a; }
.summary-table tfoot td.summary-total { color: #ffe0cf; background: #392638; }
.zero-count { color: #607087; }.summary-table tfoot .zero-count { color: inherit; opacity: .62; }
.count-with-hours { border-color: #6783aa; }

/* Forms, dialogs and feedback */
.app-dialog { border: 1px solid var(--outline); color: var(--ink); background: #0a1223; box-shadow: var(--shadow-2); }
.app-dialog::backdrop { background: rgb(2 6 23 / 76%); backdrop-filter: blur(8px); }
.dialog-head, .dialog-actions { border-color: var(--outline); background: rgb(15 23 42 / 64%); }
.dialog-head h2 { color: #f8fafc; font-weight: 640; }.dialog-body p { color: var(--ink-muted); }
.context-strip span, .day-note-list > h3 span { color: #bfdbfe; background: rgb(59 130 246 / 14%); }
.day-note-list { border-color: var(--outline); }
.day-note-item, .empty-day-notes, .future-item, .management-row, .detail-row, .choice-button {
    border-color: var(--outline);
    color: #dce5f2;
    background: #0e182b;
}
.day-note-item.completed { background: #0b1321; }.day-note-item p { color: #e6edf8 !important; }
.day-note-item-head .note-type, .day-note-item-head b { color: #bfdbfe; background: rgb(59 130 246 / 16%); }
.day-note-item-head .note-type.gelecek_is { color: #fed7aa; background: rgb(234 179 147 / 14%); }
.empty-day-notes { border-color: #33435a; background: #0b1425; }.empty-day-notes strong { color: #e5edf9; }
.field input, .field select, .field textarea {
    border-color: var(--outline-strong);
    color: #edf4ff;
    background: #0d1729;
    caret-color: #60a5fa;
}
.field input::placeholder, .field textarea::placeholder, .search-field input::placeholder { color: #607088; }
.field input:focus, .field select:focus, .field textarea:focus { border-color: #60a5fa; background: #101c31; box-shadow: 0 0 0 3px rgb(59 130 246 / 14%); }
.field input:disabled { color: #728097; background: #09111f; }
.field small, .check-row small, .form-help, .empty-copy, .future-item small, .management-row small, .detail-row small { color: #8190a6; }
.field.attention-field > span { color: #f9a8d4; }.field.attention-field input { border-color: rgb(244 114 182 / 50%); background: rgb(80 18 57 / 23%); }
fieldset { border-color: var(--outline); background: rgb(15 23 42 / 28%); }legend { color: #bfdbfe; }
.segmented { background: #111c30; }.segmented span { color: #8d9bb1; }.segmented input:checked + span { color: #eff6ff; background: #263650; box-shadow: inset 0 1px rgb(255 255 255 / 5%); }
.check-row { color: #dbe4f1; }.check-row input, .permission-option input { accent-color: #3b82f6; }
.alert.error { border-color: rgb(251 113 133 / 30%); color: #fecdd3; background: rgb(127 29 29 / 24%); }
.alert.success { border-color: rgb(52 211 153 / 26%); color: #a7f3d0; background: rgb(6 78 59 / 25%); }
.alert.info { border-color: rgb(96 165 250 / 28%); color: #bfdbfe; background: rgb(30 64 175 / 17%); }
.contact-strip { border-color: var(--outline); background: #101a2d; }.contact-strip strong { color: #ecf3fd; }.contact-strip span { color: #8e9cb1; }
.choice-button { color: #bfdbfe; }.choice-button:hover { border-color: #60a5fa; background: #132443; }
.choice-button.warning { border-color: rgb(234 179 147 / 24%); color: #fed7aa; background: rgb(120 53 15 / 18%); }
.choice-button.warning:hover { border-color: #eab393; background: rgb(120 53 15 / 28%); }
.context-menu { border-color: var(--outline); background: #091224; box-shadow: var(--shadow-2); }.context-menu > strong { color: #bfdbfe; }
.context-menu button { color: #c8d3e2; }.context-menu button:hover, .context-menu button:focus-visible { color: #eff6ff; background: var(--primary-soft); }

/* Data and configuration surfaces */
.data-panel, .settings-card { border-radius: 17px; }
.search-field { border-color: var(--outline); color: #718198; background: #0b1527; }
.search-field:focus-within { border-color: #60a5fa; background: #101b2f; box-shadow: 0 0 0 3px rgb(59 130 246 / 12%); }
.search-field input { color: #ecf3fd; }
.data-table th { border-color: var(--outline); color: #8998ad; background: #101a2c; font-family: var(--font-mono); font-weight: 700; }
.data-table td { border-color: #18243a; color: #bdc9da; }
.data-table tbody tr:hover { background: rgb(59 130 246 / 7%); }
.person-identity strong, .stacked-cell strong { color: #edf4ff; }.person-identity small, .stacked-cell small { color: #7e8da3; }
.order-buttons { border-color: var(--outline); background: #101a2d; }
.order-buttons span { color: #8493a8; font-family: var(--font-mono); }
.table-chip { border: 1px solid rgb(96 165 250 / 17%); color: #bfdbfe; background: rgb(59 130 246 / 13%); }
.state-badge.active { color: #a7f3d0; background: rgb(6 78 59 / 32%); }.state-badge.passive { color: #a5b1c1; background: #1b2638; }
.settings-subnav { border-color: var(--outline); background: rgb(9 16 32 / 88%); box-shadow: var(--shadow-1); }
.settings-subnav a { color: #8e9db2; }.settings-subnav a:hover { color: #dbeafe; background: var(--primary-soft); }.settings-subnav a.active { color: #fff; background: #2563eb; box-shadow: 0 7px 18px rgb(37 99 235 / 24%); }
.config-tile, .status-config-row, .title-config-row { border-color: var(--outline); background: #0d1729; }
.config-code { color: #b9c8db; background: #1b2940; font-family: var(--font-mono); }
.color-field { color: #b6c3d4; }.color-field input { border-color: var(--outline-strong); background: #152037; }.color-field code { color: #7f8da2; font-family: var(--font-mono); }
.new-config-row { border-color: rgb(96 165 250 / 45%); background: rgb(30 64 175 / 13%); box-shadow: inset 4px 0 #3b82f6; }
.file-drop { border-color: #3d5575; color: #c5d0df; background: #0b172a; }.file-drop > span { color: #edf4ff; }.file-drop small { color: #8493a8; }
.switch > span { background: #354258; }.switch input:checked + span { background: #3b82f6; }.switch em { color: #8c9bb0; }
.permission-option { border-color: var(--outline); color: #c4cfdd; background: #0d1729; }.permission-option:hover { border-color: rgb(96 165 250 / 35%); background: #11203a; }
.inline-loading, .inline-mini-loading { color: #8d9bb0; background: #0b1425; }

/* Personal schedule and reports */
.personal-calendar-weekdays { border-color: var(--outline); color: #9eacc0; background: #121d31; }
.personal-calendar-weekdays span { border-color: #26344b; font-family: var(--font-mono); }
.personal-calendar { background: #253249; }
.personal-day-placeholder { background: #09111f; }
.personal-day { background: #0b1526; }.personal-day.weekend { background: #141119; }.personal-day.default-weekly-off { background: #0c1c1c; box-shadow: inset 0 3px rgb(52 211 153 / 52%); }.personal-day.today { box-shadow: inset 0 0 0 3px rgb(96 165 250 / 58%); }
.personal-day > header strong { color: #f8fafc; }.personal-day > header span { color: #8493a8; }
.personal-day > header i { color: #bfdbfe; background: rgb(59 130 246 / 14%); }.personal-day > header i.weekly-off-badge { color: #a7f3d0; background: rgb(6 78 59 / 28%); }
.personal-empty-day { color: #64748b; }.personal-empty-day.weekly-off { color: #6ee7b7; }
.personal-loading { color: #8f9db2; background: #0b1425; }
.puantaj-export-card { border-color: rgb(96 165 250 / 24%); background: linear-gradient(120deg, rgb(30 64 175 / 15%), rgb(9 16 32 / 92%)); }
.puantaj-export-copy .summary-icon { --accent: #60a5fa; }
.report-output-wrap { background: #060c18; }
.report-paper {
    --ink: #20343d;
    --ink-muted: #60737b;
    --primary: #174e62;
    color: #20343d;
    background: #fff;
}
.report-paper .personal-loading { color: #60737b; background: #fff; }

/* Authentication */
.auth-body { background: #020617; }
.login-shell, .install-shell { position: relative; z-index: 1; }
.login-brand-panel, .install-intro {
    color: #fff;
    background:
        radial-gradient(circle at 20% 18%, rgb(59 130 246 / 28%), transparent 25rem),
        radial-gradient(circle at 82% 86%, rgb(234 179 147 / 13%), transparent 22rem),
        linear-gradient(145deg, #061025, #0a1831 58%, #081226);
}
.login-brand-panel::before, .install-intro::before { content: ""; position: absolute; inset: 0; opacity: .35; pointer-events: none; background-image: linear-gradient(rgb(148 163 184 / 7%) 1px, transparent 1px), linear-gradient(90deg, rgb(148 163 184 / 7%) 1px, transparent 1px); background-size: 38px 38px; mask-image: linear-gradient(140deg, #000, transparent 75%); }
.login-brand-panel::after, .install-intro::after { border-color: rgb(96 165 250 / 20%); box-shadow: 0 0 0 65px rgb(59 130 246 / 4%), 0 0 0 130px rgb(234 179 147 / 2.5%); }
.login-brand-panel .eyebrow, .install-intro .eyebrow { color: #93c5fd; }
.login-brand-panel h1, .install-intro h1 { font-weight: 560; }.login-brand-panel > p:last-of-type, .install-intro > p:last-of-type { color: #a8b6c9; }
.shift-preview span { border-color: rgb(147 197 253 / 20%); color: #dbeafe; background: rgb(59 130 246 / 10%); font-family: var(--font-mono); }
.feature-checks { color: #bdc9d9; }.feature-checks li::before { color: #dbeafe; background: rgb(59 130 246 / 24%); }
.auth-card { border-color: var(--outline); background: rgb(9 16 32 / 94%); box-shadow: var(--shadow-2); backdrop-filter: blur(18px); }
.auth-card-head h2 { color: #f8fafc; }.auth-card-head > p:last-child { color: #8e9db2; }.auth-foot { color: #5f6e83; font-family: var(--font-mono); }

/* Motion */
.surface-reveal { opacity: 0; transform: translateY(12px); }
.surface-reveal.is-visible { animation: surface-reveal .42s cubic-bezier(.2, .8, .2, 1) var(--reveal-delay, 0ms) both; }
.toast { border-color: var(--outline); color: #e7eef9; background: #0d1729; box-shadow: var(--shadow-2); }
.toast-dot { box-shadow: 0 0 0 4px rgb(52 211 153 / 9%); }

@keyframes material-ripple {
    0% { opacity: .38; transform: translate(-50%, -50%) scale(0); }
    100% { opacity: 0; transform: translate(-50%, -50%) scale(42); }
}
@keyframes surface-reveal {
    from { opacity: 0; transform: translateY(12px); }
    to { opacity: 1; transform: translateY(0); }
}
@keyframes ambient-drift {
    from { transform: translate3d(0, 0, 0) scale(.96); opacity: .65; }
    to { transform: translate3d(-22px, 18px, 0) scale(1.05); opacity: 1; }
}

@media (max-width: 1180px) {
    .side-nav { background: rgb(4 9 22 / 98%); }
    body.nav-collapsed .side-nav { width: var(--nav-w); padding: 16px 12px 13px; }
    body.nav-collapsed .side-nav .nav-context { display: flex; }
    body.nav-collapsed .side-nav .nav-session { justify-content: flex-start; padding-inline: 11px; }
    body.nav-collapsed .side-nav .nav-session span { display: flex; }
}

@media (max-width: 820px) {
    body::after { right: -90px; opacity: .45; }
    .page-heading { align-items: stretch; padding: 18px; }
    .summary-card { min-height: 82px; }
    .user-menu { right: 10px; }
}

@media (max-width: 560px) {
    :root { --appbar-h: 60px; }
    body::before { opacity: .22; background-size: 28px 28px; }
    body::after { display: none; }
    .app-bar { padding-inline: 10px; }
    .brand-mark { width: 34px; height: 34px; border-radius: 10px; }
    .sync-state { min-height: 30px; padding-inline: 8px; }
    .page-shell { padding-top: calc(var(--appbar-h) + 12px); }
    body.has-edit-activity .page-shell { padding-top: calc(var(--appbar-h) + var(--editbar-h) + 12px); }
    .page-heading { padding: 14px; border-radius: 14px; }
    .page-heading h1 { font-size: 1.28rem; }
    .heading-actions { gap: 7px; }
    .summary-grid { gap: 7px; }
    .summary-card { min-height: 68px; padding: 9px; border-radius: 12px; }
    .summary-card:hover { transform: none; }
    .summary-icon { width: 32px; height: 32px; border-radius: 9px; }
    .summary-card strong { font-size: 1.14rem; }.summary-card small { font-size: .52rem; }
    .schedule-panel, .report-panel, .data-panel, .settings-card, .personal-calendar-panel, .report-output-wrap { border-radius: 13px; }
    .day-header, .grid-corner { background-color: #101a2d; }
    .person-card:hover { transform: none; }
    .app-dialog { background: #091223; }
}

@media (prefers-reduced-motion: reduce) {
    body::after { animation: none; }
    .surface-reveal, .surface-reveal.is-visible { opacity: 1; transform: none; animation: none; }
}

@media print {
    :root { color-scheme: light; }
    body::before, body::after { display: none !important; }
    html, body.reports-page { background: #fff !important; }
    body.reports-page .report-output-wrap { background: #fff; backdrop-filter: none; }
    body.reports-page .report-paper { color: #20343d; background: #fff; }
    .surface-reveal, .surface-reveal.is-visible { opacity: 1 !important; transform: none !important; animation: none !important; }
}