/* ============================================================
   ExpenseSettler — Stage 0: refined visual language
   Calmer palette, restrained motion, finance-grade typography.
   ============================================================ */
:root {
    /* Brand — deeper, calmer emerald (was #1cc29f — too candy) */
    --es-primary: #0ea372;
    --es-primary-dark: #0a8a60;
    --es-primary-soft: #ecfdf5;
    --es-accent: #ff8c42;
    /* Semantic — negative softened, positive matches brand */
    --es-positive: #0ea372;
    --es-positive-soft: #ecfdf5;
    --es-negative: #dc2f5a;
    --es-negative-soft: #fdecef;
    --es-warning: #d99b1c;
    --es-warning-soft: #fdf3dc;
    --es-info: #2c63d4;
    --es-info-soft: #e9f0fc;
    /* Neutrals — warm off-white (was cold #f7f8fa) */
    --es-bg: #f7f6f3;
    --es-surface: #ffffff;
    --es-surface-2: #f1efe9;
    --es-border: #e6e3dc;
    --es-border-strong: #d6d2c8;
    --es-text: #1a1d23;
    --es-text-muted: #6a6f7a;
    --es-text-soft: #9aa0aa;
    /* Navigation accent — neutral graphite so brand-green is reserved for money.
       Active nav items use a calm warm-grey pill on light bg. */
    --es-nav-fg: #4a4f59;
    --es-nav-fg-hover: #1a1d23;
    --es-nav-active-bg: #ebe8df;
    --es-nav-active-fg: #1a1d23;
    /* Layout — tighter radii for desktop-grade look */
    --es-radius: 10px;
    --es-radius-sm: 8px;
    --es-radius-lg: 16px;
    --es-shadow-sm: 0 1px 2px rgba(20, 25, 35, 0.04);
    --es-shadow: 0 6px 18px rgba(20, 25, 35, 0.08);
    --es-shadow-lg: 0 16px 40px rgba(20, 25, 35, 0.14);
    --es-ring: 0 0 0 3px rgba(14, 163, 114, 0.22);
    --es-header-h: 56px;
    --es-mobilenav-h: 56px;
    --es-sidebar-w: 260px;
    --es-font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    --es-font-features: "cv11", "ss01", "ss03";
}
* { box-sizing: border-box; }
html, body {
    margin: 0;
    padding: 0;
    /* Prevent horizontal page scroll on iOS when a child element overflows,
       and disable the auto text-size-adjust that breaks layout after rotation. */
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    font-family: var(--es-font);
    background: var(--es-bg);
    color: var(--es-text);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-size: 14px;
    line-height: 1.45;
    font-feature-settings: var(--es-font-features);
}
/* iOS auto-zooms when focusing an input with font-size < 16px and then
   never zooms back, pushing the UI off-screen. Force >=16px on touch devices. */
@media (hover: none) and (pointer: coarse) {
    input, select, textarea, .form-control, .form-select {
        font-size: 16px !important;
    }
}
h1, h2, h3, h4, h5, h6 {
    color: var(--es-text);
    letter-spacing: -0.015em;
    margin: 0 0 0.4rem;
}
h1 { font-size: 1.55rem; font-weight: 600; }
h2 { font-size: 1.25rem; font-weight: 600; }
h3 { font-size: 1.1rem;  font-weight: 600; }
h4 { font-size: 1rem;    font-weight: 500; }
h5 { font-size: 0.95rem; font-weight: 500; }
a { color: var(--es-primary-dark); text-decoration: none; }
a:hover { text-decoration: underline; }
.text-muted { color: var(--es-text-muted) !important; }
.text-soft  { color: var(--es-text-soft); }
.text-positive { color: var(--es-positive); font-weight: 600; }
.text-negative { color: var(--es-negative); font-weight: 600; }
.small, small { font-size: 0.82rem; }
.eyebrow {
    font-size: 0.7rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--es-text-muted);
    font-weight: 500;
}
:focus-visible {
    outline: none;
    box-shadow: var(--es-ring);
    border-color: var(--es-primary) !important;
}
.valid.modified:not([type=checkbox]) { outline: none; border-color: var(--es-positive); }
.invalid { outline: none; border-color: var(--es-negative); }
.validation-message { color: var(--es-negative); font-size: 0.78rem; margin-top: 0.25rem; }
.avatar {
    display: inline-flex; align-items: center; justify-content: center;
    width: 36px; height: 36px;
    border-radius: 50%;
    background: var(--es-primary-soft);
    color: var(--es-primary-dark);
    font-weight: 600; font-size: 0.82rem;
    flex: 0 0 auto;
    text-transform: uppercase;
}
.avatar-sm { width: 28px; height: 28px; font-size: 0.7rem; }
.avatar-lg { width: 52px; height: 52px; font-size: 1rem; }
.avatar-stack { display: inline-flex; }
.avatar-stack .avatar { margin-left: -8px; border: 2px solid var(--es-surface); }
.avatar-stack .avatar:first-child { margin-left: 0; }
.avatar-c0 { background: #e6faf2; color: #0a8a60; }
.avatar-c1 { background: #fff1e6; color: #c25a1c; }
.avatar-c2 { background: #e8efff; color: #2851b8; }
.avatar-c3 { background: #fbe7ef; color: #ac2f6f; }
.avatar-c4 { background: #f0eafc; color: #5e36a3; }
.avatar-c5 { background: #fff5d6; color: #876700; }
.avatar-c6 { background: #e1f5e6; color: #267333; }
.avatar-c7 { background: #fde2e2; color: #b32525; }
.auth-shell {
    min-height: 100dvh;
    background:
        radial-gradient(1200px 600px at 10% -10%, var(--es-primary-soft) 0%, transparent 60%),
        radial-gradient(900px 600px at 110% 110%, #fff4e6 0%, transparent 55%),
        var(--es-bg);
    display: flex; align-items: center; justify-content: center;
    padding: 1.2rem;
}
.auth-card {
    width: 100%; max-width: 420px;
    background: var(--es-surface);
    border: 1px solid var(--es-border);
    border-radius: var(--es-radius-lg);
    padding: 2rem 1.6rem;
    box-shadow: var(--es-shadow);
}
.auth-card__brand { text-align: center; margin-bottom: 1.4rem; }
.auth-card__brand-icon {
    width: 52px; height: 52px;
    border-radius: 14px;
    background: var(--es-primary); color: #fff;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 1.6rem; font-weight: 700;
    margin-bottom: 0.6rem;
}
.auth-card__title { margin: 0; font-size: 1.4rem; font-weight: 600; letter-spacing: -0.02em; }
.auth-card__sub { color: var(--es-text-muted); font-size: 0.88rem; margin-top: 4px; }
.app-loader {
    position: fixed; inset: 0;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    background: var(--es-bg); gap: 1rem;
}
.app-loader__spinner {
    width: 44px; height: 44px;
    border: 3px solid var(--es-primary-soft);
    border-top-color: var(--es-primary);
    border-radius: 50%;
    animation: es-spin 0.9s linear infinite;
}
.app-loader__text { color: var(--es-text-muted); font-size: 0.88rem; }
@keyframes es-spin { to { transform: rotate(360deg); } }
#blazor-error-ui {
    color-scheme: light only;
    background: var(--es-warning-soft);
    color: #7a5a00;
    border-top: 1px solid #f1dca0;
    bottom: 0; left: 0;
    box-sizing: border-box;
    display: none;
    padding: 0.7rem 1.2rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
    font-size: 0.88rem;
}
#blazor-error-ui .dismiss { cursor: pointer; position: absolute; right: 0.9rem; top: 0.55rem; }
.blazor-error-boundary {
    background: var(--es-negative-soft);
    color: #8c1f3c;
    padding: 1rem;
    border-radius: var(--es-radius);
}
.blazor-error-boundary::after { content: "Произошла ошибка."; }
code { color: #b3327a; }
hr { border-color: var(--es-border); opacity: 1; }
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}/* ============================================================
   Stage 2 — Dark theme tokens.
   Triggered by <html data-theme="dark"> (set in index.html early script).
   ============================================================ */
[data-theme="dark"] {
    --es-primary: #34d8a8;
    --es-primary-dark: #28c296;
    --es-primary-soft: #1a3530;
    --es-accent: #ffa05c;
    --es-positive: #34d8a8;
    --es-positive-soft: #1a3530;
    --es-negative: #f87e9a;
    --es-negative-soft: #3d1e2a;
    --es-warning: #f2ca5c;
    --es-warning-soft: #372f1c;
    --es-info: #82a8ff;
    --es-info-soft: #1c2640;
    /* Soft dark — raised from pure black to warm charcoal */
    --es-bg: #1a1d24;
    --es-surface: #22262f;
    --es-surface-2: #2a2f3a;
    --es-border: #333a47;
    --es-border-strong: #414a59;
    --es-text: #ebeef3;
    --es-text-muted: #a3acbb;
    --es-text-soft: #7a8494;
    --es-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.25);
    --es-shadow: 0 6px 18px rgba(0, 0, 0, 0.3);
    --es-shadow-lg: 0 16px 40px rgba(0, 0, 0, 0.4);
    --es-ring: 0 0 0 3px rgba(52, 216, 168, 0.25);
    /* Navigation accent — readable on dim charcoal surfaces */
    --es-nav-fg: #c2cad8;
    --es-nav-fg-hover: #ffffff;
    --es-nav-active-bg: #333a47;
    --es-nav-active-fg: #ffffff;
}
[data-theme="dark"] body { color-scheme: dark; }
[data-theme="dark"] code { color: #f0a5c8; }
/* Glass surfaces — softened for dim dark */
[data-theme="dark"] .app-topbar  { background: rgba(34, 38, 47, 0.78) !important; }
[data-theme="dark"] .app-topnav  { background: rgba(34, 38, 47, 0.88) !important; border-bottom-color: var(--es-border) !important; }
[data-theme="dark"] .app-sidebar { background: rgba(34, 38, 47, 0.84) !important; }
/* Auth shell radial gradients — recolor for dark */
[data-theme="dark"] .auth-shell {
    background:
        radial-gradient(1200px 600px at 10% -10%, rgba(52, 216, 168, 0.1) 0%, transparent 60%),
        radial-gradient(900px 600px at 110% 110%, rgba(255, 160, 92, 0.07) 0%, transparent 55%),
        var(--es-bg);
}
/* Avatar palette — slightly brighter chips on dim surface */
[data-theme="dark"] .avatar-c0 { background: #1c3832; color: #72e8c2; }
[data-theme="dark"] .avatar-c1 { background: #3e2c1c; color: #f4bc94; }
[data-theme="dark"] .avatar-c2 { background: #212d4a; color: #a2bbff; }
[data-theme="dark"] .avatar-c3 { background: #3e2232; color: #f5a8ca; }
[data-theme="dark"] .avatar-c4 { background: #2c2144; color: #c8b2f2; }
[data-theme="dark"] .avatar-c5 { background: #36301c; color: #f0d882; }
[data-theme="dark"] .avatar-c6 { background: #1e3826; color: #8ed8a2; }
[data-theme="dark"] .avatar-c7 { background: #3e2424; color: #f4acac; }
[data-theme="dark"] .blazor-error-boundary { color: #f6c1cf; }
[data-theme="dark"] #blazor-error-ui { color: #f0dca1; border-color: #4a3d20; }
.auth-card .validation-message { font-size: 0.78rem; }

/* ============================================================
   Navigation overrides (kept in global app.css so they win over
   the generic `a` color rule and any cached scoped-CSS bundles).
   Mirrors NavMenu.razor.css; updates here are authoritative.
   ============================================================ */
a.sidenav__item,
a.sidenav__item:focus,
a.sidenav__item:visited { color: var(--es-nav-fg); text-decoration: none; }
a.sidenav__item:hover { color: var(--es-nav-fg-hover); }
a.sidenav__item.sidenav__item--active,
a.sidenav__item.sidenav__item--active:hover { color: var(--es-primary-dark); }
a.sidenav__item svg { color: var(--es-text-soft); }
a.sidenav__item:hover svg { color: var(--es-primary-dark); }
a.sidenav__item.sidenav__item--active svg,
a.sidenav__item.sidenav__item--active:hover svg { color: var(--es-primary-dark); }

a.mobilenav__item,
a.mobilenav__item:hover,
a.mobilenav__item:focus,
a.mobilenav__item:visited { color: var(--es-nav-fg); text-decoration: none; }
a.mobilenav__item.mobilenav__item--active,
a.mobilenav__item.mobilenav__item--active:hover { color: var(--es-nav-active-fg); }
a.mobilenav__item svg { color: var(--es-text-soft); }
a.mobilenav__item.mobilenav__item--active svg { color: var(--es-nav-active-fg); }

/* Slim mobile header — brand text is redundant next to the tab bar below */
@media (max-width: 899px) {
    :root { --es-header-h: 48px; }
    .app-topbar { padding-top: max(env(safe-area-inset-top, 0), 0px); }
    .app-topbar__brand { font-size: 0.95rem; }
    .app-topbar__brand .app-sidebar__logo { width: 28px; height: 28px; font-size: 0.95rem; border-radius: 8px; }
}