/* =========================================================================
   Design trial "calm" (switched in the user menu, remembered per browser; see App.razor and itsm.toggleLook).
   Quiet warm grey around the page, no dark top bar, one soft violet accent, the page as a white sheet.
   Everything is scoped to :root[data-look="calm"], so the classic design is untouched.
   ========================================================================= */

:root[data-look="calm"] {
    --sidebar: #F4F4F1;
    --bg: #F4F4F1;
    --surface: #FFFFFF;
    --surface-2: #FAFAF8;
    --sunken: #F1F1EE;
    --hover: #F3F3F0;
    --pressed: #EAEAE6;

    --ink: #1F1F1C;
    --ink-2: #55554F;
    --ink-3: #8A8A83;
    --line: #E8E8E3;
    --line-strong: #D6D6D0;
    --input-border: #D9D9D3;
    --input-underline: #D9D9D3;

    --accent: #6C5CE7;
    --accent-hover: #5B4BD8;
    --accent-pressed: #4A3CC0;
    --accent-ink: #FFFFFF;
    --accent-soft: #EFEDFD;
    --accent-line: #CFC9F7;

    --topbar: #F4F4F1;
    --topbar-ink: #1F1F1C;
    --topbar-ink-2: #77776F;
    --topbar-field: #FFFFFF;
    --topbar-field-hover: #FFFFFF;

    --shadow-pop: 0 10px 30px rgba(31, 31, 28, .12), 0 2px 6px rgba(31, 31, 28, .06);

    --r-xs: 4px;
    --r-sm: 6px;
    --r-md: 10px;
    --r-lg: 12px;
}

:root[data-look="calm"][data-theme="dark"] {
    --sidebar: #141413; --bg: #141413; --surface: #1C1C1A; --surface-2: #21211F; --sunken: #171716; --hover: #262624; --pressed: #2E2E2B;
    --ink: #ECECE8; --ink-2: #B5B5AE; --ink-3: #85857E; --line: #2E2E2B; --line-strong: #3C3C38;
    --input-border: #3C3C38; --input-underline: #3C3C38;
    --accent: #9D90F5; --accent-hover: #ADA2F7; --accent-pressed: #C3BBFA; --accent-ink: #17142E; --accent-soft: rgba(157, 144, 245, .15); --accent-line: rgba(157, 144, 245, .45);
    --topbar: #141413; --topbar-ink: #ECECE8; --topbar-ink-2: #8F8F88; --topbar-field: #1C1C1A; --topbar-field-hover: #21211F;
    --shadow-pop: 0 10px 30px rgba(0, 0, 0, .5), 0 2px 6px rgba(0, 0, 0, .3);
}
@media (prefers-color-scheme: dark) {
    :root[data-look="calm"]:not([data-theme="light"]) {
        --sidebar: #141413; --bg: #141413; --surface: #1C1C1A; --surface-2: #21211F; --sunken: #171716; --hover: #262624; --pressed: #2E2E2B;
        --ink: #ECECE8; --ink-2: #B5B5AE; --ink-3: #85857E; --line: #2E2E2B; --line-strong: #3C3C38;
        --input-border: #3C3C38; --input-underline: #3C3C38;
        --accent: #9D90F5; --accent-hover: #ADA2F7; --accent-pressed: #C3BBFA; --accent-ink: #17142E; --accent-soft: rgba(157, 144, 245, .15); --accent-line: rgba(157, 144, 245, .45);
        --topbar: #141413; --topbar-ink: #ECECE8; --topbar-ink-2: #8F8F88; --topbar-field: #1C1C1A; --topbar-field-hover: #21211F;
        --shadow-pop: 0 10px 30px rgba(0, 0, 0, .5), 0 2px 6px rgba(0, 0, 0, .3);
    }
}

/* ---------- Shell: top bar and menu blend into the grey, the page is a white sheet ---------- */
[data-look="calm"] .topbar { border-bottom: 0; }
[data-look="calm"] .brand-mark { background: var(--accent); color: var(--accent-ink); border-radius: 8px; }
[data-look="calm"] .topbar-search input { border: 1px solid var(--line); border-radius: 8px; }
[data-look="calm"] .topbar-search input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
[data-look="calm"] .topbar-btn { background: var(--accent); color: var(--accent-ink); font-weight: 500; border-radius: 8px; }
[data-look="calm"] .topbar-btn:hover { background: var(--accent-hover); }
[data-look="calm"] .topbar-icon { border-radius: 8px; }
[data-look="calm"] .topbar-icon:hover { background: var(--hover); }
[data-look="calm"] .topbar-avatar { background: var(--accent-soft); color: var(--accent); }

[data-look="calm"] .sidebar { border-right: 0; }
[data-look="calm"] .nav { padding: 4px 10px 16px; }
[data-look="calm"] .nav-section { font-weight: 500; letter-spacing: .01em; }
[data-look="calm"] .nav-link { border-radius: 8px; height: 32px; }
[data-look="calm"] .nav-link:hover { background: var(--pressed); }
[data-look="calm"] .nav-link.active { background: var(--accent-soft); color: var(--accent); font-weight: 500; }
[data-look="calm"] .nav-link.active::before { display: none; }

[data-look="calm"] .main {
    margin: 0 10px 10px 0;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 14px;
    min-height: calc(100vh - 58px);
}
[data-look="calm"] .main-inner { padding: 24px 32px 64px; }

/* ---------- Type: lighter weights, a bit more air ---------- */
[data-look="calm"] h1 { font-size: 22px; font-weight: 600; letter-spacing: -.01em; }
[data-look="calm"] h2, [data-look="calm"] h3 { font-weight: 600; }
[data-look="calm"] .page-header { margin-bottom: 20px; }

/* ---------- Controls ---------- */
[data-look="calm"] .btn { font-weight: 500; border-color: var(--line-strong); border-radius: 8px; }
[data-look="calm"] .btn:hover { border-color: var(--line-strong); }
[data-look="calm"] .btn-primary { border-color: var(--accent); }
[data-look="calm"] .btn-primary:hover { border-color: var(--accent-hover); }
[data-look="calm"] .icon-btn { border-radius: 8px; }

[data-look="calm"] :where(input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]), select, textarea) { border-radius: 8px; }
[data-look="calm"] input:focus, [data-look="calm"] select:focus, [data-look="calm"] textarea:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-soft);
}
[data-look="calm"] .field-label { font-weight: 500; }

[data-look="calm"] .badge { border-radius: 999px; padding: 0 8px; font-weight: 500; }
[data-look="calm"] .notice { border-left: 0; border-radius: 10px; }

/* ---------- Surfaces ---------- */
[data-look="calm"] .panel { border-radius: 12px; }
[data-look="calm"] .panel-head { border-bottom-color: var(--line); min-height: 48px; }
[data-look="calm"] .kpi { border-radius: 12px; background: var(--surface-2); border-color: transparent; }
[data-look="calm"] .kpi:hover { border-color: var(--accent-line); }
[data-look="calm"] .kpi-value { font-weight: 500; }
[data-look="calm"] .tile { border-radius: 10px; }
[data-look="calm"] .menu { border-radius: 12px; padding: 6px; }
[data-look="calm"] .menu-item { border-radius: 8px; }

/* ---------- Tables: airy rows, quiet header ---------- */
[data-look="calm"] .data th { background: var(--surface); border-bottom-color: var(--line); color: var(--ink-3); font-weight: 500; }
[data-look="calm"] .data td { height: 44px; }
[data-look="calm"] .data .col-title a { font-weight: 500; }
[data-look="calm"] .data tbody tr:hover td { background: var(--surface-2); }
[data-look="calm"] .list-title { font-weight: 500; }

/* ---------- Phones: no sheet, the page uses the full width ---------- */
@media (max-width: 860px) {
    [data-look="calm"] .main { margin: 0; border: 0; border-radius: 0; min-height: 0; }
    [data-look="calm"] .main-inner { padding: 16px 16px 56px; }
    [data-look="calm"] .sidebar { background: var(--sidebar); }
}