@import url("/static/ui-crumbs.css"); /* [NIGHT9 §F] хлебные крошки */
/* [NIGHT7 §E2] Общая дизайн-система дашборда и /supply/*.
   Палитра -- та же, что у плиток портала (app/portal/static/hub.html),
   поднят контраст: сплошные кнопки используют --accent-solid (темнее
   --accent), подобранный так, чтобы белый текст поверх читался
   уверенно в обеих темах (WCAG AA для крупного текста кнопок).
   Подключается через <link rel="stylesheet" href="/static/ui.css">
   (CSP style-src 'self' уже это разрешает). Без внешних шрифтов/библиотек. */

:root{
  --bg:#0b0e13; --panel:#121720; --panel2:#181e28; --panel3:#1f2735;
  --border:#2a3340; --text:#edf1f7; --muted:#929cad;
  /* [NIGHT8 §2.3] --accent-solid затемнён (было #7c5cff, 4.35:1 с белым
     текстом -- ниже даже WCAG AA) так, чтобы белый текст поверх давал
     >=7:1 (WCAG AAA), см. tests/test_night8_ui_contrast.py. --accent
     (ссылки/акцентный текст НЕ на заливке) не трогали -- там контраст
     считается иначе (текст на странице, не на кнопке). */
  --accent:#9b84ff; --accent-solid:#4f30c9; --accent-text:#ffffff;
  --accent-solid-hover:#432897; --accent-solid-active:#381f7e;
  /* --danger затемнён для того же самого (было #ef5b68, 3.30:1 с белым
     текстом кнопки/пилюли) -- white-on-danger теперь >=4.5:1 (WCAG AA). */
  --ok:#35c78a; --ok-bg:#35c78a22; --warn:#e0a63a; --warn-bg:#e0a63a22;
  /* --danger (текст/пилюли на тёмном фоне) оставлен светлым --
     затемнённый вариант нужен ТОЛЬКО заливке кнопки с белым текстом
     (--danger-solid) -- тёмный фон требует противоположного: danger-
     КАК-ТЕКСТ должен быть светлее для контраста с тёмной панелью,
     danger-КАК-ЗАЛИВКА под белый текст должен быть темнее; одного
     токена на оба случая здесь не хватает (в светлой теме панель
     светлая, там один цвет справляется с обоими, см. ниже). */
  --danger:#ef5b68; --danger-bg:#ef5b6822; --danger-solid:#d62e3e;
  --r-sm:8px; --r-md:12px; --r-lg:16px;
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-6:24px; --sp-8:32px;
  --shadow-1:0 1px 2px rgba(0,0,0,.24);
  --shadow-2:0 4px 16px rgba(0,0,0,.28), 0 1px 3px rgba(0,0,0,.2);
  --shadow-3:0 12px 32px rgba(0,0,0,.32), 0 2px 6px rgba(0,0,0,.24);
  --top-glow:rgba(255,255,255,.06);
  --dur-fast:150ms; --dur-base:220ms; --dur-slow:320ms; --ease:cubic-bezier(.22,.8,.36,1);
  --gray-day:#3a4252;
}
:root[data-theme="light"]{
  --bg:#f4f5f8; --panel:#ffffff; --panel2:#eef0f4; --panel3:#e6e9ef;
  --border:#dfe3ea; --text:#1b2230; --muted:#5b6478;
  /* [NIGHT8 §2.3] см. комментарий в :root -- тот же --accent-solid
     (8.08:1 с белым текстом), ok/warn/danger затемнены (были 3.12/
     3.26/4.16:1 на своих *-bg пилюлях -- ниже WCAG AA). */
  --accent:#6a4bef; --accent-solid:#4f30c9; --accent-text:#ffffff;
  --accent-solid-hover:#432897; --accent-solid-active:#381f7e;
  --ok:#0f6e40; --ok-bg:#0f6e4018; --warn:#8a5806; --warn-bg:#8a580618;
  --danger:#c22633; --danger-bg:#c2263318; --danger-solid:#c22633;
  --shadow-1:0 1px 2px rgba(20,24,34,.06);
  --shadow-2:0 4px 16px rgba(20,24,34,.08), 0 1px 3px rgba(20,24,34,.06);
  --shadow-3:0 16px 40px rgba(20,24,34,.12), 0 2px 8px rgba(20,24,34,.08);
  --top-glow:rgba(20,24,34,.04);
  --gray-day:#c7cdd8;
}
@media (prefers-reduced-motion: reduce){
  :root{ --dur-fast:0ms; --dur-base:0ms; --dur-slow:0ms; }
}

/* ---------------------------------------------------------------------
   Base
--------------------------------------------------------------------- */
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body.ui{
  margin:0; background:var(--bg); color:var(--text);
  font:15px/1.5 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  font-variant-numeric:tabular-nums;
}
.ui button,.ui input,.ui select,.ui textarea{font:inherit; color:inherit}
.ui button{cursor:pointer}
.ui a{color:var(--accent)}
.ui ::selection{background:var(--accent-solid); color:#fff}

.ui-wrap{max-width:1280px; margin:0 auto; padding:var(--sp-4)}
@media (max-width:480px){ .ui-wrap{padding:var(--sp-3)} }

/* ---------------------------------------------------------------------
   E1 -- page chrome: breadcrumb header / area nav / action panel
--------------------------------------------------------------------- */
.ui-header{
  display:flex; align-items:center; justify-content:space-between; gap:var(--sp-3);
  padding-bottom:var(--sp-3); margin-bottom:var(--sp-4); border-bottom:1px solid var(--border);
  flex-wrap:wrap;
}
.ui-crumbs{display:flex; align-items:center; gap:6px; font-size:13px; color:var(--muted); flex-wrap:wrap}
.ui-crumbs a{color:var(--muted); text-decoration:none}
.ui-crumbs a:hover{color:var(--text)}
.ui-crumbs .sep{opacity:.5}
.ui-crumbs .current{color:var(--text); font-weight:600}
.ui-header-right{display:flex; align-items:center; gap:var(--sp-2); flex-wrap:wrap}

.ui-areanav{
  /* [NIGHT7 fix] flex-wrap:wrap вместе с overflow-x:auto противоречат
     друг другу -- с wrap строка никогда не переполняется по горизонтали
     (элементы просто падают на новую строку), поэтому overflow-x:auto
     никогда не срабатывал и прокрутки не было: на телефоне вкладки
     участков растягивали блок на несколько строк вместо горизонтальной
     полосы с прокруткой (требование E2/живая проверка §F). nowrap --
     одна строка, лишнее уезжает за край и скроллится.
     [NIGHT8 §2.2] сегментированный вид -- сплошная панель-подложка
     (--panel2) с закруглением, пункты внутри без собственных рамок
     (отличает от кнопок действий .ui-btn/.btn, у которых есть border и
     заливка var(--panel)). */
  display:flex; align-items:center; gap:2px; flex-wrap:nowrap;
  background:var(--panel2); border:1px solid var(--border); border-radius:var(--r-md); padding:4px;
  margin-bottom:var(--sp-4);
  overflow-x:auto; -webkit-overflow-scrolling:touch;
}
.ui-areanav::-webkit-scrollbar{height:4px}
.ui-areanav-group{display:flex; align-items:center; gap:4px; flex-shrink:0}
.ui-areanav-label{font-size:11px; color:var(--muted); margin-right:4px; white-space:nowrap}
.ui-tab{
  border:none; background:transparent; color:var(--muted);
  border-radius:var(--r-sm); padding:6px 12px; font-size:13px; font-weight:500;
  white-space:nowrap; transition:background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
/* [NIGHT8 §2.2] `.ui a{color:var(--accent)}` (общее правило ссылок,
   ниже) специфичностью (0,1,1) перебивало `.ui-tab{color:var(--muted)}`
   (0,1,0) -- пункты навигации по участкам (это всегда <a>) показывали
   акцентный фиолетовый текст ВМЕСТО приглушённого, даже в состоянии
   покоя, и из-за этого выглядели как кнопка действия, а не как вкладка.
   `a.ui-tab` (0,1,1) той же специфичности, но позже в файле -- выигрывает. */
a.ui-tab{color:var(--muted)}
.ui-tab:hover{background:var(--panel3); color:var(--text)}
.ui-tab.active{background:var(--accent-solid); color:var(--accent-text)}
.ui-tab:focus-visible,.ui-btn:focus-visible,.ui-chip:focus-visible,.ui-icon-btn:focus-visible{
  outline:2px solid var(--accent-solid); outline-offset:2px;
}

.ui-actionbar{display:flex; align-items:center; justify-content:space-between; gap:var(--sp-3); margin-bottom:var(--sp-4); flex-wrap:wrap}
.ui-actionbar .primary-slot{display:flex; gap:var(--sp-2); align-items:center; flex-wrap:wrap}
.ui-actionbar .secondary-slot{display:flex; gap:var(--sp-2); align-items:center; flex-wrap:wrap}
.ui-more-menu{position:relative}
.ui-more-panel{
  position:absolute; right:0; top:calc(100% + 6px); background:var(--panel); border:1px solid var(--border);
  border-radius:var(--r-md); box-shadow:var(--shadow-3); padding:var(--sp-2); min-width:200px; z-index:50;
  display:flex; flex-direction:column; gap:4px;
}

/* ---------------------------------------------------------------------
   Buttons
--------------------------------------------------------------------- */
.ui-btn{
  /* [NIGHT8 §2.4] одинаковая высота у всех разновидностей (primary/
     secondary=база/ghost/danger) -- 40px на ПК; min-height, не height,
     чтобы длинный текст/перенос не обрезался. */
  display:inline-flex; align-items:center; justify-content:center; gap:6px; min-height:40px;
  border-radius:var(--r-sm); padding:8px 14px; font-size:13px; font-weight:500;
  border:1px solid var(--border); background:var(--panel); color:var(--text);
  transition:transform var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease),
             background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), opacity var(--dur-fast) var(--ease);
}
.ui-btn:hover{background:var(--panel2); border-color:var(--muted)}
.ui-btn:active{transform:scale(.97)}
.ui-btn:disabled{opacity:.5; cursor:not-allowed; transform:none}
.ui-btn.primary{background:var(--accent-solid); border-color:var(--accent-solid); color:var(--accent-text); font-weight:600}
/* [NIGHT8 §2.3] hover/active -- ТЕМНЕЕ заливки, не светлее (светлее
   снижает контраст текста, который уже впритык держит 7:1); раньше
   было filter:brightness(1.06) -- делало кнопку светлее. */
.ui-btn.primary:hover{box-shadow:var(--shadow-2); background:var(--accent-solid-hover); border-color:var(--accent-solid-hover)}
.ui-btn.primary:active{background:var(--accent-solid-active); border-color:var(--accent-solid-active)}
.ui-btn.ghost{background:transparent; border-color:transparent}
.ui-btn.ghost:hover{background:var(--panel2)}
.ui-btn.danger{background:transparent; border-color:var(--danger); color:var(--danger)}
.ui-btn.danger:hover{background:var(--danger-bg)}
.ui-btn.danger.solid{background:var(--danger-solid); border-color:var(--danger-solid); color:#fff}
.ui-btn.loading{position:relative; color:transparent !important; pointer-events:none}
.ui-btn.loading::after{
  content:""; position:absolute; width:14px; height:14px; border-radius:50%;
  border:2px solid currentColor; border-top-color:transparent; color:var(--text);
  animation:ui-spin .7s linear infinite;
}
.ui-btn.primary.loading::after{color:#fff}
@keyframes ui-spin{to{transform:rotate(360deg)}}

.ui-icon-btn{
  display:inline-flex; align-items:center; justify-content:center; width:34px; height:34px;
  border-radius:var(--r-sm); border:1px solid var(--border); background:var(--panel); color:var(--text);
  transition:background var(--dur-fast) var(--ease);
}
.ui-icon-btn:hover{background:var(--panel2)}
/* [NIGHT7 §F] тач-мишень >=44x44 на сенсорных экранах (живая проверка
   на телефонных профилях нашла .ui-icon-btn/.ui-tab меньше рекомендации
   WCAG 2.5.5); на мышь/тачпад (hover:hover) оставлены компактными. */
@media (hover:none) and (pointer:coarse){
  .ui-icon-btn{width:44px; height:44px}
  .ui-tab{min-height:44px; display:inline-flex; align-items:center}
  /* [NIGHT8 §2.4] та же мишень для .ui-btn (primary/secondary/ghost/danger). */
  .ui-btn{min-height:44px}
}

/* ---------------------------------------------------------------------
   Chips / filters (рабочая зона -- не похожи на кнопки действий)
--------------------------------------------------------------------- */
.ui-filterrow{display:flex; align-items:center; gap:var(--sp-2); flex-wrap:wrap; margin-bottom:var(--sp-3)}
.ui-chip-group{display:inline-flex; border:1px solid var(--border); border-radius:999px; padding:2px; gap:2px; background:var(--panel)}
.ui-chip{
  border:none; background:transparent; color:var(--muted); border-radius:999px; padding:5px 12px; font-size:12px; font-weight:500;
  transition:background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.ui-chip.active{background:var(--accent-solid); color:var(--accent-text)}
.ui-select,.ui-input{
  background:var(--panel); color:var(--text); border:1px solid var(--border); border-radius:999px;
  padding:6px 12px; font-size:12px;
}
.ui-input{border-radius:var(--r-sm)}
.ui-select:focus,.ui-input:focus{outline:2px solid var(--accent-solid); outline-offset:1px}

/* ---------------------------------------------------------------------
   Status pills
--------------------------------------------------------------------- */
.ui-pill{display:inline-flex; align-items:center; gap:5px; border-radius:999px; padding:3px 10px; font-size:12px; font-weight:600; white-space:nowrap}
.ui-pill.ok{background:var(--ok-bg); color:var(--ok)}
.ui-pill.warn{background:var(--warn-bg); color:var(--warn)}
.ui-pill.danger{background:var(--danger-bg); color:var(--danger)}
.ui-pill.neutral{background:var(--panel2); color:var(--muted)}
.ui-pill .dot{width:6px; height:6px; border-radius:50%; background:currentColor; flex-shrink:0}

/* ---------------------------------------------------------------------
   Cards / metric tiles
--------------------------------------------------------------------- */
.ui-card{
  background:var(--panel); border:1px solid var(--border); border-radius:var(--r-md);
  padding:var(--sp-4); box-shadow:var(--shadow-1);
  transition:transform var(--dur-base) var(--ease), box-shadow var(--dur-base) var(--ease);
}
:root:not([data-theme="light"]) .ui-card{
  background-image:linear-gradient(var(--top-glow), transparent 40%);
}
.ui-card.hover-lift:hover{transform:translateY(-2px); box-shadow:var(--shadow-2)}
.ui-card + .ui-card{margin-top:var(--sp-3)}

.ui-metric-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:var(--sp-3); margin-bottom:var(--sp-4)}
.ui-metric{
  background:var(--panel); border:1px solid var(--border); border-radius:var(--r-md); padding:var(--sp-4);
  box-shadow:var(--shadow-1); animation:ui-fade-up var(--dur-slow) var(--ease) both;
}
.ui-metric .n{font-size:26px; font-weight:700; line-height:1.1}
.ui-metric .label{font-size:12px; color:var(--muted); margin-top:4px}
.ui-metric .delta{font-size:12px; margin-top:2px}
.ui-metric .delta.up{color:var(--ok)} .ui-metric .delta.down{color:var(--danger)}

@keyframes ui-fade-up{ from{opacity:0; transform:translateY(6px)} to{opacity:1; transform:translateY(0)} }
.ui-stagger > *{animation:ui-fade-up var(--dur-slow) var(--ease) both}
.ui-stagger > *:nth-child(1){animation-delay:0ms} .ui-stagger > *:nth-child(2){animation-delay:30ms}
.ui-stagger > *:nth-child(3){animation-delay:60ms} .ui-stagger > *:nth-child(4){animation-delay:90ms}
.ui-stagger > *:nth-child(5){animation-delay:120ms} .ui-stagger > *:nth-child(6){animation-delay:150ms}
.ui-stagger > *:nth-child(n+7){animation-delay:170ms}
@media (prefers-reduced-motion: reduce){
  .ui-metric,.ui-stagger > *{animation:none}
}

/* ---------------------------------------------------------------------
   Tables
--------------------------------------------------------------------- */
.ui-table-wrap{border:1px solid var(--border); border-radius:var(--r-md); overflow:auto; background:var(--panel); max-width:100%}
.ui-table{width:100%; border-collapse:collapse; font-size:13px}
.ui-table thead{position:sticky; top:0; z-index:1; background:var(--panel2)}
.ui-table thead th{
  text-align:left; font-weight:600; color:var(--muted); font-size:11px;
  text-transform:uppercase; letter-spacing:.03em; padding:10px 12px; border-bottom:1px solid var(--border); white-space:nowrap;
}
.ui-table th.num,.ui-table td.num{text-align:right; font-variant-numeric:tabular-nums}
.ui-table td{padding:9px 12px; border-bottom:1px solid var(--border); vertical-align:middle}
.ui-table tbody tr{transition:background var(--dur-fast) var(--ease)}
.ui-table tbody tr:hover{background:var(--panel2)}
.ui-table tbody tr:last-child td{border-bottom:none}
.ui-table.zebra tbody tr:nth-child(even){background:color-mix(in srgb, var(--panel2) 55%, transparent)}
.ui-empty-row{text-align:center; padding:28px; color:var(--muted)}

/* ---------------------------------------------------------------------
   Tabs (content tabs, distinct from area nav)
--------------------------------------------------------------------- */
.ui-tabs{display:flex; gap:4px; border-bottom:1px solid var(--border); margin-bottom:var(--sp-4); overflow-x:auto}
.ui-tabs .ui-tab{border-radius:var(--r-sm) var(--r-sm) 0 0; border-bottom:2px solid transparent}
.ui-tabs .ui-tab.active{background:transparent; color:var(--accent); border-bottom-color:var(--accent-solid)}
.ui-tabpanel{animation:ui-fade-in var(--dur-base) var(--ease) both}
@keyframes ui-fade-in{ from{opacity:0} to{opacity:1} }
@media (prefers-reduced-motion: reduce){ .ui-tabpanel{animation:none} }

/* ---------------------------------------------------------------------
   Tooltip / popover (A6 -- "!" значок у ручного статуса)
--------------------------------------------------------------------- */
.ui-popover-anchor{position:relative; display:inline-flex}
.ui-flag{
  display:inline-flex; align-items:center; justify-content:center; width:18px; height:18px;
  border-radius:50%; background:var(--warn); color:#1b1304; font-size:11px; font-weight:800;
  border:none; margin-left:4px; cursor:pointer; flex-shrink:0;
}
.ui-flag::after{content:"!"}
.ui-flag:hover,.ui-flag:focus-visible{filter:brightness(1.1)}
.ui-popover{
  position:absolute; z-index:60; min-width:220px; max-width:320px; left:50%; top:calc(100% + 8px); transform:translateX(-50%);
  background:var(--panel3); border:1px solid var(--border); border-radius:var(--r-md); box-shadow:var(--shadow-3);
  padding:var(--sp-3); font-size:12px; color:var(--text); text-align:left;
  animation:ui-fade-up var(--dur-fast) var(--ease) both;
}
.ui-popover b{display:block; margin-bottom:2px}
.ui-popover .row{display:flex; justify-content:space-between; gap:8px; margin-top:4px; color:var(--muted)}
@media print{ .ui-popover{display:none !important} }

/* ---------------------------------------------------------------------
   Modal / toast / skeleton
--------------------------------------------------------------------- */
.ui-modal-bg{position:fixed; inset:0; background:rgba(8,10,16,.55); display:flex; align-items:center; justify-content:center; z-index:100; padding:16px; animation:ui-fade-in var(--dur-fast) var(--ease) both}
.ui-modal{background:var(--panel); border:1px solid var(--border); border-radius:var(--r-lg); box-shadow:var(--shadow-3); padding:var(--sp-6); max-width:520px; width:100%; max-height:86vh; overflow:auto; position:relative; animation:ui-fade-up var(--dur-base) var(--ease) both}
.ui-modal.danger-modal{border-color:var(--danger)}
.ui-modal .close-x{position:absolute; top:12px; right:12px; background:none; border:none; font-size:20px; color:var(--muted); line-height:1}
.ui-modal .close-x:hover{color:var(--text)}

.ui-toasts{position:fixed; bottom:16px; right:16px; z-index:200; display:flex; flex-direction:column; gap:8px; max-width:360px}
.ui-toast{
  background:var(--panel3); border:1px solid var(--border); border-radius:var(--r-md); box-shadow:var(--shadow-3);
  padding:10px 14px; font-size:13px; color:var(--text); animation:ui-toast-in var(--dur-base) var(--ease) both;
}
.ui-toast.ok{border-left:3px solid var(--ok)}
.ui-toast.error{border-left:3px solid var(--danger)}
@keyframes ui-toast-in{ from{opacity:0; transform:translateY(8px)} to{opacity:1; transform:translateY(0)} }
@media (prefers-reduced-motion: reduce){ .ui-toast{animation:none} }

.ui-skel{background:linear-gradient(90deg, var(--panel2) 25%, var(--panel3) 37%, var(--panel2) 63%); background-size:400% 100%; border-radius:var(--r-sm); animation:ui-skel 1.4s ease infinite}
@keyframes ui-skel{ 0%{background-position:100% 0} 100%{background-position:0 0} }
@media (prefers-reduced-motion: reduce){ .ui-skel{animation:none} }

/* ---------------------------------------------------------------------
   Queue status "pill"
--------------------------------------------------------------------- */
.ui-queue-pill{display:inline-flex; align-items:center; gap:6px; border-radius:999px; padding:5px 12px; font-size:12px; font-weight:600}
.ui-queue-pill.free{background:var(--ok-bg); color:var(--ok)}
.ui-queue-pill.busy{background:var(--warn-bg); color:var(--warn)}

/* ---------------------------------------------------------------------
   Calendar strip (D1)
--------------------------------------------------------------------- */
.ui-calendar{display:flex; gap:4px; overflow-x:auto; padding-bottom:4px; -webkit-overflow-scrolling:touch}
.ui-calendar-day{
  flex:0 0 auto; width:30px; height:30px; border-radius:7px; display:flex; align-items:center; justify-content:center;
  font-size:10px; font-weight:700; color:#0b0e13; cursor:pointer; position:relative; border:2px solid transparent;
}
.ui-calendar-day.green{background:var(--ok)}
.ui-calendar-day.yellow{background:var(--warn)}
.ui-calendar-day.red{background:var(--danger-solid); color:#fff}
.ui-calendar-day.gray{background:var(--gray-day); color:var(--muted)}
.ui-calendar-day.today{border-color:var(--text)}
.ui-calendar-horizon{font-size:12px; color:var(--muted); margin-top:6px}

/* ---------------------------------------------------------------------
   Donuts (E3)
--------------------------------------------------------------------- */
.ui-donut-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(120px,1fr)); gap:var(--sp-4)}
/* [NIGHT7 fix] грид-ячейки по умолчанию min-width:auto -- не сжимаются
   уже своей дорожки, если контент (длинная подпись легенды) шире её;
   тогда содержимое вылезает НА СОСЕДНЮЮ ячейку вместо переноса строки
   внутри своей. min-width:0 -- стандартный фикс этого переполнения. */
.ui-donut{display:flex; flex-direction:column; align-items:center; gap:6px; min-width:0}
.ui-donut-legend .ui-pill{white-space:normal; text-align:center; max-width:100%}
.ui-donut svg{display:block}
/* [NIGHT7 fix] НЕ ставить CSS transform/transform-origin на .seg: у круга
   уже есть позиционирующий SVG-атрибут transform="rotate(...)" (сдвигает
   старт дуги на 12 часов), а CSS transform/transform-origin на элементе
   с таким атрибутом полностью меняет систему координат трансформации в
   браузере -- дуга рисуется не на том месте (проверено: даже один
   transform-origin без transform ломает атрибутный rotate()). Поэтому
   hover-эффект -- только непрозрачность и яркость, без transform. */
.ui-donut .seg{transition:opacity var(--dur-base) var(--ease), filter var(--dur-base) var(--ease)}
.ui-donut:hover .seg{opacity:.55}
.ui-donut .seg:hover{opacity:1 !important; filter:brightness(1.15)}
.ui-donut-center-n{font-weight:700}
.ui-donut-label{font-size:12px; color:var(--muted); text-align:center}
.ui-donut-legend{display:flex; gap:6px; flex-wrap:wrap; justify-content:center}
.ui-donut.big .ui-donut-center-n{font-size:22px}

/* ---------------------------------------------------------------------
   Print (A7)
--------------------------------------------------------------------- */
@media print{
  :root{ --bg:#fff; --panel:#fff; --panel2:#fff; --text:#000; --muted:#333; --border:#ccc; }
  body.ui{background:#fff; color:#000}
  .ui-no-print,.ui-header-right,.ui-areanav,.ui-actionbar,.ui-filterrow,.ui-icon-btn,.ui-more-menu,
  .ui-tabs,.ui-toasts,#bellDropdown,.ui-flag + .ui-popover{display:none !important}
  .ui-print-title{display:block !important; margin-bottom:12px}
  .ui-table-wrap{border:none; overflow:visible; box-shadow:none}
  .ui-table{width:100% !important}
  .ui-table thead{display:table-header-group}
  .ui-table tbody tr{break-inside:avoid}
  .ui-card{box-shadow:none; border:1px solid #ccc}
  a[href]:after{content:""}
  .ui-donut .seg{animation:none !important}
}
.ui-print-title{display:none}

/* ---------------------------------------------------------------------
   Responsive
--------------------------------------------------------------------- */
@media (max-width:640px){
  .ui-actionbar .secondary-slot > .ui-btn:not(.ui-more-trigger){display:none}
  .ui-actionbar .secondary-slot.expanded > .ui-btn{display:inline-flex}
}