/* Візуальна система в стилі дашборда впровадження: кольори й статуси, акценти й градієнти, шрифт, шкала розмірів і відступів, радіуси, тіні; світла й темна тема. */
:root {
  /* Поверхні й текст. */
  --bg: #F3F6FB;
  --surface: #FFFFFF;
  --surface2: #EDF1F7;
  --surface-hover: #F2F6FC;
  --line: #E2E7EF;
  --line-strong: #CDD5E0;
  --text: #161B26;
  --muted: #566074;
  --subtle: #848EA0;

  /* Акцент і дії. */
  --accent: #0273B2;
  --accent-hover: #025F93;
  --accent-text: #FFFFFF;
  --accent-soft: #E3F2FC;
  --danger: #C8203F;
  --danger-soft: #FDE8EC;
  --ok-bg: #0E8A5F;
  --ok-hover: #0B7550;
  --ok-text: #FFFFFF;
  --overdue: #B45309;

  /* Акценти дашборда впровадження (sky, violet, emerald, amber, rose) і градієнти з них. */
  --sky: #0EA5E9;
  --vio: #8B5CF6;
  --emr: #10B981;
  --amb: #F59E0B;
  --ros: #F43F5E;
  --grad-brand: linear-gradient(135deg, #0EA5E9, #8B5CF6);
  --grad-accent: linear-gradient(135deg, #0273B2, #6D3FE0);
  --grad-ok: linear-gradient(135deg, #0E8A5F, #0F9C8C);
  --grad-progress: linear-gradient(90deg, #0EA5E9, #8B5CF6);
  /* Фон сторінки: м'які плями світла, як у дашборді. */
  --bg-image:
    radial-gradient(1100px 560px at 82% -8%, rgba(14, 165, 233, .13), transparent 62%),
    radial-gradient(760px 480px at 4% 12%, rgba(139, 92, 246, .09), transparent 64%),
    radial-gradient(900px 600px at 50% 110%, rgba(16, 185, 129, .06), transparent 60%);
  --card-bg: linear-gradient(180deg, #FFFFFF, #FBFCFE);
  --glass: rgba(255, 255, 255, .72);
  --glass-line: rgba(22, 27, 38, .08);
  --track: #E7ECF3;
  --glow: .35;

  /* Статуси — 05-screens.md § Кольори статусів: м'який фон і насичений «значок» того ж відтінку. */
  --st-approved: #B4E4C9;
  --st-rejected: #F4A7A7;
  --st-progress: #A8D5E2;
  --st-question: #F7E4A3;
  --st-mine: #D8C2E0;
  --st-question-me: #F4C7A1;
  --st-returned: #C8D8A8;
  --st-new: #FFFFFF;
  --ink-approved: #1E7A4C;
  --ink-rejected: #B4232A;
  --ink-progress: #1D6F8A;
  --ink-question: #8A6400;
  --ink-mine: #7B4FA0;
  --ink-question-me: #B05A00;
  --ink-returned: #5B7A26;
  --ink-new: #858E9B;
  /* Наскільки яскравий колір статусу у фоні рядка: у темній темі приглушено (05-screens.md). */
  --st-row-mix: 30%;
  --st-badge-mix: 100%;
  --st-badge-text: #1B1F24;
  /* Наскільки текст бейджа бере колір статусу: у світлій — темний текст, у темній — колір статусу, як «пігулки» дашборда. */
  --badge-ink-mix: 0%;

  /* Шрифт: системний, як у дашборді впровадження; Inter не беремо — у Windows він розмитий. Без завантаження з мережі. */
  --font: system-ui, "Segoe UI", -apple-system, "Roboto", "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, "Cascadia Mono", "SF Mono", Consolas, monospace;
  --fs-xs: 13px;
  --fs-sm: 15px;
  --fs-md: 16px;
  --fs-lg: 18px;
  --fs-xl: 22px;
  --fs-2xl: 28px;

  /* Відступи — крок 4 px. */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-8: 32px;

  --radius-sm: 6px;
  --radius: 8px;
  --radius-lg: 16px;
  --radius-xl: 18px;
  --shadow-sm: 0 1px 2px rgba(16, 24, 40, .06);
  --shadow: 0 1px 2px rgba(16, 24, 40, .04), 0 8px 24px rgba(30, 41, 74, .06);
  --shadow-hover: 0 2px 4px rgba(16, 24, 40, .05), 0 14px 34px rgba(30, 41, 74, .12);
  --shadow-lg: 0 16px 40px rgba(30, 41, 74, .18), 0 2px 6px rgba(16, 24, 40, .08);
  --focus-ring: 0 0 0 3px rgba(14, 165, 233, .30);
  --backdrop: rgba(10, 14, 22, .5);
  --toast-bg: #1B1F24;
  --toast-text: #FFFFFF;
  --toast-action: #9CC3FF;
  --avatar-bg: #E6DDFB;
  --avatar-text: #4C2F94;
  --field-bg: #FFFFFF;
  --check-mark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FFFFFF' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E");

  --select-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%235A6371' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  --search-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23858E9B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E");

  --menu-width: 240px;
  --topbar-height: 60px;
  --bottom-nav-height: 64px;
  color-scheme: light;
}

/* Темна тема: вибір користувача (data-theme) або налаштування системи — ті самі значення двічі. */
:root[data-theme="dark"] {
  --bg: #12161F;
  --surface: #181D28;
  --surface2: #1F2633;
  --surface-hover: #222A38;
  --line: #2E3646;
  --line-strong: #3D4658;
  --text: #E8EBF2;
  --muted: #939BB0;
  --subtle: #6A7386;
  --accent: #38BDF8;
  --accent-hover: #7DD3FC;
  --accent-text: #07090D;
  --accent-soft: #14283A;
  --danger: #FB7185;
  --danger-soft: #351C27;
  --ok-bg: #34D399;
  --ok-hover: #6EE7B7;
  --ok-text: #06140F;
  --overdue: #FBBF24;
  --sky: #38BDF8;
  --vio: #A78BFA;
  --emr: #34D399;
  --amb: #FBBF24;
  --ros: #FB7185;
  --grad-brand: linear-gradient(135deg, #38BDF8, #A78BFA);
  --grad-accent: linear-gradient(135deg, #38BDF8, #A78BFA);
  --grad-ok: linear-gradient(135deg, #34D399, #2DD4BF);
  --grad-progress: linear-gradient(90deg, #38BDF8, #A78BFA);
  --bg-image:
    radial-gradient(1100px 520px at 78% -5%, #1E2F4A 0%, #161C2A 42%, rgba(18, 22, 31, 0) 72%),
    radial-gradient(700px 400px at 8% 18%, #171D2A 0%, rgba(18, 22, 31, 0) 65%);
  --card-bg: linear-gradient(180deg, #1F2633, #181D28);
  --glass: rgba(18, 22, 31, .80);
  --glass-line: rgba(255, 255, 255, .06);
  --track: #151A25;
  --glow: .55;
  /* Статуси в темній темі — яскраві акценти дашборда, приглушені у фоні. */
  --st-approved: #34D399;
  --st-rejected: #FB7185;
  --st-progress: #38BDF8;
  --st-question: #FBBF24;
  --st-mine: #A78BFA;
  --st-question-me: #FB923C;
  --st-returned: #A3E635;
  --st-new: #181D28;
  --ink-approved: #34D399;
  --ink-rejected: #FB7185;
  --ink-progress: #38BDF8;
  --ink-question: #FBBF24;
  --ink-mine: #A78BFA;
  --ink-question-me: #FB923C;
  --ink-returned: #A3E635;
  --ink-new: #6A7386;
  --st-row-mix: 6%;
  --st-badge-mix: 15%;
  --st-badge-text: #E8EBF2;
  --badge-ink-mix: 82%;
  --shadow-sm: none;
  --shadow: 0 1px 0 rgba(255, 255, 255, .03) inset;
  --shadow-hover: 0 1px 0 rgba(255, 255, 255, .04) inset, 0 16px 36px rgba(0, 0, 0, .38);
  --shadow-lg: 0 18px 44px rgba(0, 0, 0, .55), 0 0 0 1px rgba(255, 255, 255, .05);
  --focus-ring: 0 0 0 3px rgba(56, 189, 248, .35);
  --backdrop: rgba(5, 8, 14, .66);
  --toast-bg: #1F2633;
  --toast-text: #E8EBF2;
  --avatar-bg: #2B2550;
  --avatar-text: #DDD6FE;
  --field-bg: #141924;
  --check-mark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2307090D' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E");
  --select-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%239EA7B5' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  --search-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%237D8693' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E");
  color-scheme: dark;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #12161F;
    --surface: #181D28;
    --surface2: #1F2633;
    --surface-hover: #222A38;
    --line: #2E3646;
    --line-strong: #3D4658;
    --text: #E8EBF2;
    --muted: #939BB0;
    --subtle: #6A7386;
    --accent: #38BDF8;
    --accent-hover: #7DD3FC;
    --accent-text: #07090D;
    --accent-soft: #14283A;
    --danger: #FB7185;
    --danger-soft: #351C27;
    --ok-bg: #34D399;
    --ok-hover: #6EE7B7;
    --ok-text: #06140F;
    --overdue: #FBBF24;
    --sky: #38BDF8;
    --vio: #A78BFA;
    --emr: #34D399;
    --amb: #FBBF24;
    --ros: #FB7185;
    --grad-brand: linear-gradient(135deg, #38BDF8, #A78BFA);
    --grad-accent: linear-gradient(135deg, #38BDF8, #A78BFA);
    --grad-ok: linear-gradient(135deg, #34D399, #2DD4BF);
    --grad-progress: linear-gradient(90deg, #38BDF8, #A78BFA);
    --bg-image:
      radial-gradient(1100px 520px at 78% -5%, #1E2F4A 0%, #161C2A 42%, rgba(18, 22, 31, 0) 72%),
      radial-gradient(700px 400px at 8% 18%, #171D2A 0%, rgba(18, 22, 31, 0) 65%);
    --card-bg: linear-gradient(180deg, #1F2633, #181D28);
    --glass: rgba(18, 22, 31, .80);
    --glass-line: rgba(255, 255, 255, .06);
    --track: #151A25;
    --glow: .55;
    /* Статуси в темній темі — яскраві акценти дашборда, приглушені у фоні. */
    --st-approved: #34D399;
    --st-rejected: #FB7185;
    --st-progress: #38BDF8;
    --st-question: #FBBF24;
    --st-mine: #A78BFA;
    --st-question-me: #FB923C;
    --st-returned: #A3E635;
    --st-new: #181D28;
    --ink-approved: #34D399;
    --ink-rejected: #FB7185;
    --ink-progress: #38BDF8;
    --ink-question: #FBBF24;
    --ink-mine: #A78BFA;
    --ink-question-me: #FB923C;
    --ink-returned: #A3E635;
    --ink-new: #6A7386;
    --st-row-mix: 6%;
    --st-badge-mix: 15%;
    --st-badge-text: #E8EBF2;
    --badge-ink-mix: 82%;
    --shadow-sm: none;
    --shadow: 0 1px 0 rgba(255, 255, 255, .03) inset;
    --shadow-hover: 0 1px 0 rgba(255, 255, 255, .04) inset, 0 16px 36px rgba(0, 0, 0, .38);
    --shadow-lg: 0 18px 44px rgba(0, 0, 0, .55), 0 0 0 1px rgba(255, 255, 255, .05);
    --focus-ring: 0 0 0 3px rgba(56, 189, 248, .35);
    --backdrop: rgba(5, 8, 14, .66);
    --toast-bg: #1F2633;
    --toast-text: #E8EBF2;
    --avatar-bg: #2B2550;
    --avatar-text: #DDD6FE;
    --field-bg: #141924;
    --check-mark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2307090D' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E");
    --select-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%239EA7B5' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    --search-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%237D8693' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E");
    color-scheme: dark;
  }
}