/* UiBlazor — основни design tokens и стилови. Placeholder неутрална палета. */

.ui-theme-default {
  /* Бои */
  --ui-color-primary: #2f6feb;
  --ui-color-primary-hover: #2a62d0;
  --ui-color-base-bg: #f3f4f6;
  --ui-color-base-bg-hover: #e6e8eb;
  --ui-color-text: #1b1f24;
  --ui-color-text-on-primary: #ffffff;
  --ui-color-border: #c2cad4;
  --ui-color-disabled: #9aa3ad;
  /* Полиш-помошни (посилен контраст за data-grid контроли) */
  --ui-color-header-bg: #e9ecf1;
  --ui-color-zebra-bg: #f6f8fb;
  --ui-color-row-hover-bg: #eaf1fe;

  /* Типографија / размери */
  --ui-font: "Segoe UI", system-ui, sans-serif;
  --ui-radius: 6px;
  --ui-gap: 6px;

  /* Висини на контроли по големина */
  --ui-control-height-sm: 28px;
  --ui-control-height-md: 36px;
  --ui-control-height-lg: 44px;

  /* Алијаси за токени што мега компонентите ги очекуваат (мапирани на канонските; CSS var се решава лениво) */
  --ui-control-height: var(--ui-control-height-md);
  --ui-radius-md: var(--ui-radius);
  --ui-radius-sm: 3px;
  --ui-row-height: 36px;
  --ui-row-height-sm: 28px;
  --ui-row-height-lg: 44px;
  --ui-spacing-1: 4px;
  --ui-spacing-2: 8px;
  --ui-spacing-4: 16px;
  --ui-anim-duration: .2s;
  --ui-focus-ring: 2px solid var(--ui-color-primary);
  --ui-font-body: var(--ui-font);
  --ui-color-base: var(--ui-color-base-bg);
  --ui-color-surface: var(--ui-color-base-bg);
  --ui-color-surface-2: var(--ui-color-base-bg-hover);
  --ui-color-hover-bg: var(--ui-color-base-bg-hover);
  --ui-color-muted: var(--ui-color-disabled);
  /* a11y (WCAG AA): muted/secondary текст мора ≥4.5:1. Disabled (#9aa3ad=2.55:1) е изземен од
     контраст, но muted НЕ е. #586470 дава ≈6:1 на бело и ≈4.9:1 на светло-сива површина (#e6e8eb,
     на пр. grid group-panel) — маргина над прагот на сите демо/компонентни позадини. */
  --ui-color-text-muted: #586470;

  /* z-index скала (темата ги поседува, §2.4) */
  --ui-z-base: 0;
  --ui-z-sticky: 100;
  --ui-z-dropdown: 1000;
  --ui-z-overlay: 1040;
  --ui-z-modal: 1050;
  --ui-z-popover: 1060;
  --ui-z-tooltip: 1070;
  --ui-z-notification: 1080;
}

.ui-theme-dark {
  --ui-color-primary: #4d86ff;
  --ui-color-primary-hover: #6699ff;
  --ui-color-base-bg: #2a2f36;
  --ui-color-base-bg-hover: #343a42;
  --ui-color-text: #e6e8eb;
  --ui-color-text-on-primary: #0b1220;
  --ui-color-border: #3a414a;
  --ui-color-disabled: #5a626c;
  --ui-font: "Segoe UI", system-ui, sans-serif;
  --ui-radius: 6px;
  --ui-gap: 6px;
  --ui-control-height-sm: 28px;
  --ui-control-height-md: 36px;
  --ui-control-height-lg: 44px;
  --ui-z-base: 0; --ui-z-sticky: 100; --ui-z-dropdown: 1000; --ui-z-overlay: 1040;
  --ui-z-modal: 1050; --ui-z-popover: 1060; --ui-z-tooltip: 1070; --ui-z-notification: 1080;
}

/* ── Икона ── (SVG од IIconRegistry; димензионирање за да не колабира на 0 ширина) */
.ui-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1em;
  height: 1em;
  line-height: 1;
  flex: 0 0 auto;
  vertical-align: middle;
}
.ui-icon > svg { width: 100%; height: 100%; display: block; fill: currentColor; }
.ui-icon--spin { animation: ui-icon-spin 0.8s linear infinite; }
@keyframes ui-icon-spin { to { transform: rotate(360deg); } }

/* ── Копче ── */
.ui-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--ui-gap);
  height: var(--ui-control-height-md);
  padding: 0 14px;
  border: 1px solid transparent;
  border-radius: var(--ui-radius);
  font-family: var(--ui-font);
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  user-select: none;
  background: var(--ui-color-base-bg);
  color: var(--ui-color-text);
  transition: background .12s ease, border-color .12s ease;
}
.ui-btn:hover { background: var(--ui-color-base-bg-hover); }
.ui-btn:focus-visible { outline: 2px solid var(--ui-color-primary); outline-offset: 1px; }

.ui-btn--sm { height: var(--ui-control-height-sm); font-size: 13px; padding: 0 10px; }
.ui-btn--lg { height: var(--ui-control-height-lg); font-size: 15px; padding: 0 18px; }

/* Варијанти / бои */
.ui-btn--primary { background: var(--ui-color-primary); color: var(--ui-color-text-on-primary); }
.ui-btn--primary:hover { background: var(--ui-color-primary-hover); }
.ui-btn--outline { background: transparent; border-color: var(--ui-color-border); }
.ui-btn--flat { background: transparent; }
.ui-btn--link { background: transparent; color: var(--ui-color-primary); text-decoration: underline; }

/* Состојби */
.ui-btn--disabled,
.ui-btn[disabled],
.ui-btn[aria-disabled="true"] {
  opacity: .55;
  cursor: not-allowed;
  pointer-events: none;
}
.ui-btn--active { box-shadow: inset 0 0 0 2px var(--ui-color-primary); }

/* Spinner */
.ui-btn__spinner {
  width: 14px; height: 14px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: ui-btn-spin .6s linear infinite;
}
@keyframes ui-btn-spin { to { transform: rotate(360deg); } }

/* ── Значка ── */
.ui-badge {
  display:inline-flex; align-items:center; justify-content:center;
  min-width:18px; height:18px; padding:0 6px;
  font:600 11px var(--ui-font); border-radius:4px;
  background:var(--ui-color-base-bg); color:var(--ui-color-text);
}
.ui-badge--pill { border-radius:999px; }
.ui-badge--primary { background:var(--ui-color-primary); color:var(--ui-color-text-on-primary); }
.ui-badge--success { background:#2e7d32; color:#fff; }
.ui-badge--warning { background:#ed8a19; color:#fff; }
.ui-badge--danger  { background:#d23b3b; color:#fff; }

/* ── Чип ── */
.ui-chip {
  display:inline-flex; align-items:center; gap:6px;
  height:28px; padding:0 4px 0 10px;
  font:13px var(--ui-font); border-radius:999px;
  background:var(--ui-color-base-bg); color:var(--ui-color-text);
  border:1px solid var(--ui-color-border);
}
.ui-chip--selected { background:var(--ui-color-primary); color:var(--ui-color-text-on-primary); border-color:transparent; }
.ui-chip__remove {
  display:inline-flex; align-items:center; justify-content:center;
  width:18px; height:18px; border:none; border-radius:50%;
  background:transparent; color:inherit; cursor:pointer; font-size:15px; line-height:1;
}
.ui-chip__remove:hover { background:rgba(0,0,0,.12); }

/* ── Прекинувач ── */
.ui-switch { display:inline-flex; align-items:center; gap:8px; border:none; background:transparent; cursor:pointer; padding:0; font:14px var(--ui-font); color:var(--ui-color-text); }
.ui-switch__track { width:38px; height:22px; border-radius:999px; background:var(--ui-color-border); position:relative; transition:background .15s; flex:0 0 auto; }
.ui-switch__thumb { position:absolute; top:2px; left:2px; width:18px; height:18px; border-radius:50%; background:#fff; transition:left .15s; box-shadow:0 1px 2px rgba(0,0,0,.3); }
.ui-switch--on .ui-switch__track { background:var(--ui-color-primary); }
.ui-switch--on .ui-switch__thumb { left:18px; }
.ui-switch--disabled { opacity:.55; cursor:not-allowed; }

/* ── Поле за штиклирање ── */
.ui-checkbox { display:inline-flex; align-items:center; gap:8px; cursor:pointer; font:14px var(--ui-font); color:var(--ui-color-text); }
.ui-checkbox input { width:16px; height:16px; accent-color:var(--ui-color-primary); cursor:pointer; }
.ui-checkbox--disabled { opacity:.55; cursor:not-allowed; }

/* ── Серија 1: распоред/приказ ── */
.ui-card { border:1px solid var(--ui-color-border); border-radius:var(--ui-radius); background:#fff; overflow:hidden; }
.ui-card__header { padding:12px 16px; border-bottom:1px solid var(--ui-color-border); font-weight:600; }
.ui-card__body { padding:16px; }
.ui-card__footer { padding:12px 16px; border-top:1px solid var(--ui-color-border); }

.ui-avatar { display:inline-flex; align-items:center; justify-content:center; border-radius:50%; background:var(--ui-color-primary); color:var(--ui-color-text-on-primary); font-weight:600; overflow:hidden; width:36px; height:36px; font-size:14px; }
.ui-avatar--sm { width:28px; height:28px; font-size:12px; }
.ui-avatar--lg { width:48px; height:48px; font-size:18px; }
.ui-avatar__img { width:100%; height:100%; object-fit:cover; }

.ui-toolbar { display:flex; align-items:center; gap:8px; padding:6px; border:1px solid var(--ui-color-border); border-radius:var(--ui-radius); background:var(--ui-color-base-bg); }

.ui-loader { display:inline-block; width:20px; height:20px; border:2px solid var(--ui-color-border); border-top-color:var(--ui-color-primary); border-radius:50%; animation:ui-btn-spin .6s linear infinite; }
.ui-loader--sm { width:14px; height:14px; }
.ui-loader--lg { width:28px; height:28px; border-width:3px; }

.ui-progressbar { height:8px; background:var(--ui-color-base-bg); border-radius:999px; overflow:hidden; position:relative; }
.ui-progressbar__fill { height:100%; background:var(--ui-color-primary); transition:width .2s; }
.ui-progressbar--indeterminate .ui-progressbar__fill { width:40%; animation:ui-progress-indet 1.2s ease-in-out infinite; }
@keyframes ui-progress-indet { 0%{margin-left:-40%} 100%{margin-left:100%} }

.ui-skeleton { background:linear-gradient(90deg,#e8eaed 25%,#f3f4f6 37%,#e8eaed 63%); background-size:400% 100%; animation:ui-skel 1.4s ease infinite; border-radius:4px; min-width:40px; min-height:14px; display:block; }
.ui-skeleton--circle { border-radius:50%; }
@keyframes ui-skel { 0%{background-position:100% 50%} 100%{background-position:0 50%} }

.ui-chip-list { display:flex; flex-wrap:wrap; gap:8px; }

.ui-appbar { display:flex; align-items:center; gap:12px; padding:10px 16px; background:var(--ui-color-primary); color:var(--ui-color-text-on-primary); border-radius:var(--ui-radius); }

.ui-timeline { list-style:none; margin:0; padding:0 0 0 16px; border-left:2px solid var(--ui-color-border); }
.ui-timeline__item { position:relative; padding:0 0 16px 12px; }
.ui-timeline__item::before { content:""; position:absolute; left:-21px; top:3px; width:10px; height:10px; border-radius:50%; background:var(--ui-color-primary); }
.ui-timeline__time { display:block; font-size:11px; color:var(--ui-color-disabled); }
.ui-timeline__title { display:block; font-weight:600; }
.ui-timeline__desc { margin:2px 0 0; font-size:13px; }

/* ── Серија 2: внес/навигација ── */
.ui-input { height:var(--ui-control-height-md); padding:0 10px; border:1px solid var(--ui-color-border); border-radius:var(--ui-radius); font:14px var(--ui-font); color:var(--ui-color-text); background:#fff; box-sizing:border-box; }
.ui-input:focus { outline:2px solid var(--ui-color-primary); outline-offset:-1px; }
.ui-textbox { display:inline-flex; }
.ui-textbox .ui-input { width:100%; }
.ui-textarea { width:100%; height:auto; padding:8px 10px; resize:vertical; line-height:1.4; }
/* AutoSize: висината расте со содржината (модерен CSS; gracefully no-op на постари browsers). */
.ui-textarea--autosize { field-sizing: content; resize: none; }
.ui-numeric { width:120px; }

.ui-slider { width:200px; accent-color:var(--ui-color-primary); cursor:pointer; }

.ui-rating { display:inline-flex; gap:2px; }
.ui-rating__star { border:none; background:none; cursor:pointer; font-size:20px; line-height:1; color:var(--ui-color-border); padding:0 1px; }
.ui-rating__star::before { content:"\2605"; }
.ui-rating__star--filled { color:#f5b301; }

.ui-btn-group { display:inline-flex; }
.ui-btn-group .ui-btn { border-radius:0; margin-left:-1px; }
.ui-btn-group .ui-btn:first-child { border-radius:var(--ui-radius) 0 0 var(--ui-radius); margin-left:0; }
.ui-btn-group .ui-btn:last-child { border-radius:0 var(--ui-radius) var(--ui-radius) 0; }

.ui-breadcrumb ol { list-style:none; display:flex; gap:6px; margin:0; padding:0; align-items:center; flex-wrap:wrap; }
.ui-breadcrumb__item a { color:var(--ui-color-primary); text-decoration:none; }
.ui-breadcrumb__sep { color:var(--ui-color-disabled); }

.ui-radio-group { display:inline-flex; flex-direction:column; gap:6px; }
.ui-radio { display:inline-flex; align-items:center; gap:6px; cursor:pointer; font:14px var(--ui-font); }
.ui-radio input { accent-color:var(--ui-color-primary); }

/* ── Серија 3: распоред/навигација/повратна инфо ── */
.ui-stepper { list-style:none; display:flex; gap:0; margin:0; padding:0; }
.ui-stepper__step { display:flex; align-items:center; gap:8px; flex:1; color:var(--ui-color-disabled); }
.ui-stepper__step:not(:last-child)::after { content:""; flex:1; height:2px; background:var(--ui-color-border); margin:0 8px; }
.ui-stepper__num { display:inline-flex; align-items:center; justify-content:center; width:26px; height:26px; border-radius:50%; background:var(--ui-color-border); color:#fff; font-size:13px; flex:0 0 auto; }
.ui-stepper__step--active { color:var(--ui-color-text); font-weight:600; }
.ui-stepper__step--active .ui-stepper__num, .ui-stepper__step--done .ui-stepper__num { background:var(--ui-color-primary); }
.ui-stepper__step--done { color:var(--ui-color-text); }

.ui-tabstrip [role=tablist] { display:flex; gap:2px; border-bottom:1px solid var(--ui-color-border); }
.ui-tabstrip__tab { border:none; background:none; padding:8px 14px; cursor:pointer; font:14px var(--ui-font); color:var(--ui-color-text); border-bottom:2px solid transparent; }
.ui-tabstrip__tab--active { color:var(--ui-color-primary); border-bottom-color:var(--ui-color-primary); font-weight:600; }

.ui-pager { display:inline-flex; gap:4px; align-items:center; }
.ui-pager button { min-width:32px; height:32px; border:1px solid var(--ui-color-border); background:#fff; border-radius:var(--ui-radius); cursor:pointer; font:13px var(--ui-font); color:var(--ui-color-text); }
.ui-pager button:disabled { opacity:.5; cursor:not-allowed; }
.ui-pager__page--active { background:var(--ui-color-primary); color:#fff; border-color:transparent; }

.ui-notification { display:flex; align-items:center; gap:10px; padding:10px 14px; border-radius:var(--ui-radius); border-left:4px solid var(--ui-color-primary); background:var(--ui-color-base-bg); }
.ui-notification--success { border-left-color:#2e7d32; }
.ui-notification--warning { border-left-color:#ed8a19; }
.ui-notification--danger { border-left-color:#d23b3b; }
.ui-notification__close { margin-left:auto; border:none; background:none; cursor:pointer; font-size:16px; color:inherit; }

.ui-chunk-progress { display:flex; gap:3px; }
.ui-chunk-progress__chunk { flex:1; height:10px; background:var(--ui-color-base-bg); border-radius:2px; }
.ui-chunk-progress__chunk--filled { background:var(--ui-color-primary); }

.ui-color-palette { display:inline-flex; gap:6px; }
.ui-color-palette__swatch { width:26px; height:26px; border-radius:6px; border:2px solid transparent; cursor:pointer; }
.ui-color-palette__swatch--selected { border-color:var(--ui-color-text); }

.ui-scrollview { overflow:auto; }
.ui-fonticon { display:inline-block; font-style:normal; }

/* ── Серија 4 ── */
.ui-btn--icon { padding:0 !important; width:var(--ui-control-height-md); }
.ui-svgicon { width:20px; height:20px; display:inline-block; vertical-align:middle; }
.ui-fab { width:48px !important; height:48px; border-radius:50% !important; padding:0 !important; box-shadow:0 3px 8px rgba(0,0,0,.25); }
.ui-animation { transition:opacity .25s ease, transform .25s ease; }
.ui-animation--hidden { opacity:0; transform:translateY(6px); pointer-events:none; }
.ui-bottomnav { display:flex; gap:2px; background:#fff; border:1px solid var(--ui-color-border); border-radius:var(--ui-radius); }
.ui-bottomnav__item { flex:1; border:none; background:none; padding:8px; cursor:pointer; font:13px var(--ui-font); color:var(--ui-color-disabled); }
.ui-bottomnav__item--active { color:var(--ui-color-primary); font-weight:600; }
.ui-tooltip-host { position:relative; display:inline-block; }
.ui-tooltip { position:absolute; bottom:100%; left:50%; transform:translateX(-50%) translateY(-6px); background:#1b1f24; color:#fff; padding:4px 8px; border-radius:4px; font-size:12px; white-space:nowrap; opacity:0; pointer-events:none; transition:opacity .15s; z-index:var(--ui-z-tooltip); }
.ui-tooltip-host:hover .ui-tooltip { opacity:1; }
.ui-sparkline { display:inline-block; vertical-align:middle; color:var(--ui-color-primary); }
.ui-carousel { display:flex; align-items:center; gap:10px; }
.ui-carousel__slide { flex:1; min-width:160px; text-align:center; padding:24px; background:var(--ui-color-base-bg); border-radius:var(--ui-radius); }
.ui-carousel__prev, .ui-carousel__next { width:32px; height:32px; border:1px solid var(--ui-color-border); background:#fff; border-radius:50%; cursor:pointer; flex:0 0 auto; }
.ui-panelbar { border:1px solid var(--ui-color-border); border-radius:var(--ui-radius); overflow:hidden; }
.ui-panelbar__item { border-bottom:1px solid var(--ui-color-border); }
.ui-panelbar__item:last-child { border-bottom:none; }
.ui-panelbar__header { width:100%; text-align:left; border:none; background:var(--ui-color-base-bg); padding:10px 14px; cursor:pointer; font:600 14px var(--ui-font); }
.ui-panelbar__content { padding:12px 14px; }
.ui-validation-message { color:#d23b3b; font-size:13px; }

/* ── Серија 5: гаусови, dialog/drawer/wizard, validation ── */
.ui-lineargauge { height:10px; background:var(--ui-color-base-bg); border-radius:999px; overflow:hidden; width:100%; }
.ui-lineargauge__fill { height:100%; background:var(--ui-color-primary); transition:width .3s; }
.ui-circulargauge, .ui-arcgauge, .ui-radialgauge { display:inline-block; }
.ui-gauge__text { font:600 14px var(--ui-font); fill:var(--ui-color-text); }
.ui-tile-layout > * { background:var(--ui-color-base-bg); border-radius:var(--ui-radius); padding:14px; text-align:center; }
.ui-validation-summary { border:1px solid #d23b3b; border-radius:var(--ui-radius); padding:8px 12px; color:#d23b3b; background:#fdf0f0; }
.ui-validation-summary ul { margin:0; padding-left:18px; }
.ui-validation-tooltip-host { position:relative; display:inline-block; }
.ui-validation-tooltip { display:block; color:#d23b3b; font-size:12px; margin-top:2px; }
.ui-dialog-overlay { position:fixed; inset:0; background:rgba(0,0,0,.4); display:flex; align-items:center; justify-content:center; z-index:var(--ui-z-modal); }
.ui-dialog { background:#fff; border-radius:8px; min-width:320px; max-width:90vw; box-shadow:0 10px 40px rgba(0,0,0,.3); overflow:hidden; }
.ui-dialog__header { display:flex; align-items:center; justify-content:space-between; padding:14px 18px; border-bottom:1px solid var(--ui-color-border); font-weight:600; }
.ui-dialog__close { border:none; background:none; cursor:pointer; font-size:18px; }
.ui-dialog__body { padding:18px; }
.ui-dialog__footer { padding:12px 18px; border-top:1px solid var(--ui-color-border); display:flex; gap:8px; justify-content:flex-end; }
.ui-drawer-overlay { position:fixed; inset:0; background:rgba(0,0,0,.4); opacity:0; pointer-events:none; transition:opacity .2s; z-index:var(--ui-z-overlay); }
.ui-drawer-overlay--open { opacity:1; pointer-events:auto; }
.ui-drawer { position:fixed; top:0; bottom:0; width:280px; background:#fff; box-shadow:0 0 20px rgba(0,0,0,.2); transition:transform .25s; z-index:var(--ui-z-modal); padding:16px; }
.ui-drawer--left { left:0; transform:translateX(-100%); }
.ui-drawer--right { right:0; transform:translateX(100%); }
.ui-drawer--open { transform:translateX(0); }
.ui-wizard__steps { list-style:none; display:flex; gap:0; margin:0 0 16px; padding:0; }
.ui-wizard__steps li { flex:1; text-align:center; padding-bottom:8px; border-bottom:2px solid var(--ui-color-border); color:var(--ui-color-disabled); font-size:13px; }
.ui-wizard__steps li[class*="active"] { color:var(--ui-color-primary); border-bottom-color:var(--ui-color-primary); font-weight:600; }
.ui-wizard__steps li[class*="done"] { color:var(--ui-color-text); border-bottom-color:var(--ui-color-primary); }
.ui-wizard__body { padding:8px 0 16px; min-height:50px; }
.ui-wizard__footer { display:flex; gap:8px; }

/* ── Серија 6: range, бои, потпис, barcode, heatmap, splitter, dropdowns, menu ── */

/* Двопрстен лизгач (range) */
.ui-rangeslider { position:relative; width:200px; height:20px; display:flex; align-items:center; }
.ui-rangeslider__track { position:relative; width:100%; height:4px; background:var(--ui-color-border); border-radius:999px; }
.ui-rangeslider__selection { position:absolute; top:0; height:100%; background:var(--ui-color-primary); border-radius:999px; }
.ui-rangeslider__thumb { position:absolute; top:50%; width:16px; height:16px; margin-left:-8px; border-radius:50%; background:#fff; border:2px solid var(--ui-color-primary); transform:translateY(-50%); cursor:pointer; box-sizing:border-box; }
.ui-rangeslider__thumb:focus-visible { outline:2px solid var(--ui-color-primary); outline-offset:2px; }
.ui-rangeslider--vertical { width:20px; height:200px; flex-direction:column; }
.ui-rangeslider--vertical .ui-rangeslider__track { width:4px; height:100%; }
.ui-rangeslider--vertical .ui-rangeslider__selection { left:0; top:auto; width:100%; height:auto; }
.ui-rangeslider--vertical .ui-rangeslider__thumb { left:50%; top:auto; margin-left:0; margin-bottom:-8px; transform:translateX(-50%); }
.ui-rangeslider--disabled { opacity:.55; pointer-events:none; }
.ui-rangeslider--disabled .ui-rangeslider__thumb { cursor:not-allowed; }

/* HSV избирач на боја */
.ui-colorgradient { display:inline-flex; flex-direction:column; gap:10px; width:240px; user-select:none; touch-action:none; }
.ui-colorgradient__surface { position:relative; width:100%; height:160px; border-radius:var(--ui-radius); border:1px solid var(--ui-color-border); cursor:crosshair; }
.ui-colorgradient__handle { position:absolute; width:14px; height:14px; border-radius:50%; border:2px solid #fff; box-shadow:0 0 0 1px rgba(0,0,0,.4); transform:translate(-50%,-50%); pointer-events:none; }
.ui-colorgradient__hue { position:relative; width:100%; height:14px; border-radius:999px; cursor:pointer; background:linear-gradient(to right,#f00 0%,#ff0 17%,#0f0 33%,#0ff 50%,#00f 67%,#f0f 83%,#f00 100%); }
.ui-colorgradient__hue-handle { position:absolute; top:50%; width:14px; height:14px; border-radius:50%; border:2px solid #fff; box-shadow:0 0 0 1px rgba(0,0,0,.4); transform:translate(-50%,-50%); background:transparent; pointer-events:none; }
.ui-colorgradient__alpha { position:relative; width:100%; height:14px; border-radius:999px; cursor:pointer; background-color:#fff; background-image:linear-gradient(to right, transparent, var(--ui-colorgradient-solid, #000)), linear-gradient(45deg,#ccc 25%,transparent 25%,transparent 75%,#ccc 75%), linear-gradient(45deg,#ccc 25%,transparent 25%,transparent 75%,#ccc 75%); background-size:100% 100%, 10px 10px, 10px 10px; background-position:0 0, 0 0, 5px 5px; }
.ui-colorgradient__alpha-handle { position:absolute; top:50%; width:14px; height:14px; border-radius:50%; border:2px solid #fff; box-shadow:0 0 0 1px rgba(0,0,0,.4); transform:translate(-50%,-50%); pointer-events:none; }
.ui-colorgradient--disabled { opacity:.55; pointer-events:none; }

/* Рамен избирач на боја */
.ui-flatcolorpicker { display:inline-flex; flex-direction:column; gap:10px; border:1px solid var(--ui-color-border); border-radius:var(--ui-radius); background:#fff; padding:10px; font:14px var(--ui-font); color:var(--ui-color-text); }
.ui-flatcolorpicker__header { display:flex; gap:2px; border-bottom:1px solid var(--ui-color-border); }
.ui-flatcolorpicker__tab { border:none; background:none; padding:8px 14px; cursor:pointer; font:14px var(--ui-font); color:var(--ui-color-text); border-bottom:2px solid transparent; }
.ui-flatcolorpicker__tab--active { color:var(--ui-color-primary); border-bottom-color:var(--ui-color-primary); font-weight:600; }
.ui-flatcolorpicker__body { display:flex; }
.ui-flatcolorpicker__palette { display:grid; grid-template-columns:repeat(5, 26px); gap:6px; }
.ui-flatcolorpicker__swatch { width:26px; height:26px; border-radius:6px; border:2px solid transparent; cursor:pointer; }
.ui-flatcolorpicker__swatch--selected { border-color:var(--ui-color-text); }
.ui-flatcolorpicker__footer { display:flex; justify-content:flex-end; }
.ui-flatcolorpicker__clear { border:1px solid var(--ui-color-border); background:transparent; border-radius:var(--ui-radius); padding:4px 10px; cursor:pointer; font:13px var(--ui-font); color:var(--ui-color-text); }
.ui-flatcolorpicker__clear:hover { background:var(--ui-color-base-bg-hover); }
.ui-flatcolorpicker--disabled { opacity:.55; pointer-events:none; }

/* Потпис */
.ui-signature { display:inline-flex; flex-direction:column; align-items:flex-start; gap:var(--ui-gap); }
.ui-signature__surface { border:1px solid var(--ui-color-border); border-radius:var(--ui-radius); background:var(--ui-color-base-bg); touch-action:none; cursor:crosshair; }
.ui-signature--readonly .ui-signature__surface { cursor:default; }
/* .ui-signature__stroke: бојата доаѓа од inline `stroke` атрибутот (EffectiveStrokeColor,
   default var(--ui-color-text)); CSS stroke правило тука би го прегазило Color/StrokeColor. */
.ui-signature__clear { font:14px var(--ui-font); color:var(--ui-color-text); background:transparent; border:1px solid var(--ui-color-border); border-radius:var(--ui-radius); padding:4px 10px; cursor:pointer; }
.ui-signature__clear:hover:not(:disabled) { background:var(--ui-color-base-bg-hover); }
.ui-signature__clear:disabled { color:var(--ui-color-disabled); cursor:not-allowed; }
.ui-signature__clear:focus-visible { outline:2px solid var(--ui-color-primary); outline-offset:1px; }

/* Баркод (Code 39, SVG) */
.ui-barcode { display:inline-block; vertical-align:middle; color:var(--ui-color-text); }
.ui-barcode__text { font:13px var(--ui-font); fill:var(--ui-color-text); letter-spacing:1px; }

/* QRCode (§88) — SVG матрица; боите се контролираат преку Color/Background параметрите. */
.ui-qrcode { display:inline-block; vertical-align:middle; max-width:100%; height:auto; }

/* Топлинска мапа */
.ui-heatmap { display:grid; }
.ui-heatmap__cell { display:flex; align-items:center; justify-content:center; aspect-ratio:1; min-width:0; font:600 11px var(--ui-font); color:var(--ui-color-text); border-radius:3px; box-sizing:border-box; }

/* Сплитер */
.ui-splitter { display:flex; width:100%; overflow:hidden; }
.ui-splitter--horizontal { flex-direction:row; }
.ui-splitter--vertical { flex-direction:column; }
.ui-splitter__pane { overflow:auto; min-width:0; min-height:0; }
.ui-splitter__pane--first { flex:0 0 auto; }
.ui-splitter__pane--second { flex:1 1 0; }
.ui-splitter__bar { flex:0 0 auto; background:var(--ui-color-border); user-select:none; touch-action:none; transition:background .12s ease; }
.ui-splitter--horizontal .ui-splitter__bar { width:6px; cursor:col-resize; }
.ui-splitter--vertical .ui-splitter__bar { height:6px; cursor:row-resize; }
.ui-splitter__bar:hover, .ui-splitter--dragging .ui-splitter__bar { background:var(--ui-color-primary); }

/* DropDownButton */
.ui-dropdownbutton { position:relative; display:inline-block; }
.ui-dropdownbutton__arrow { transition:transform .12s ease; }
.ui-dropdownbutton--open .ui-dropdownbutton__arrow { transform:rotate(180deg); }
.ui-dropdownbutton__menu { position:absolute; top:calc(100% + 4px); left:0; min-width:100%; display:flex; flex-direction:column; padding:4px; background:var(--ui-color-surface); border:1px solid var(--ui-color-border); border-radius:var(--ui-radius); box-shadow:0 6px 20px rgba(0,0,0,.15); z-index:var(--ui-z-dropdown); }
.ui-dropdownbutton__item { display:flex; align-items:center; gap:var(--ui-gap); width:100%; text-align:left; border:none; background:transparent; padding:6px 10px; border-radius:var(--ui-radius); font:14px var(--ui-font); color:var(--ui-color-text); cursor:pointer; }
.ui-dropdownbutton__item:hover { background:var(--ui-color-base-bg-hover); }
.ui-dropdownbutton__item--disabled, .ui-dropdownbutton__item[disabled] { opacity:.55; cursor:not-allowed; pointer-events:none; }

/* Сплит-копче */
.ui-splitbutton { display:inline-flex; position:relative; }
.ui-splitbutton__action { border-top-right-radius:0; border-bottom-right-radius:0; }
.ui-splitbutton__toggle { border-top-left-radius:0; border-bottom-left-radius:0; margin-left:-1px; padding:0 8px; width:auto; }
.ui-splitbutton__arrow { width:0; height:0; border-left:4px solid transparent; border-right:4px solid transparent; border-top:5px solid currentColor; display:inline-block; }
.ui-splitbutton--open .ui-splitbutton__arrow { transform:rotate(180deg); }
.ui-splitbutton__menu { position:absolute; top:100%; left:0; margin-top:4px; min-width:100%; background:var(--ui-color-surface); border:1px solid var(--ui-color-border); border-radius:var(--ui-radius); box-shadow:0 4px 14px rgba(0,0,0,.15); padding:4px; z-index:var(--ui-z-dropdown); display:flex; flex-direction:column; }
.ui-splitbutton__item { display:flex; align-items:center; gap:8px; width:100%; text-align:left; border:none; background:none; padding:8px 12px; border-radius:var(--ui-radius); cursor:pointer; font:14px var(--ui-font); color:var(--ui-color-text); white-space:nowrap; }
.ui-splitbutton__item:hover { background:var(--ui-color-base-bg-hover); }
.ui-splitbutton__item--disabled { opacity:.55; cursor:not-allowed; pointer-events:none; }
.ui-splitbutton__item-icon { display:inline-flex; align-items:center; justify-content:center; width:18px; height:18px; flex:0 0 auto; }
.ui-splitbutton--disabled { opacity:.55; }

/* Мени (под-менија на :hover) */
.ui-menu { list-style:none; margin:0; padding:0; display:flex; gap:2px; font:14px var(--ui-font); color:var(--ui-color-text); background:var(--ui-color-base-bg); border:1px solid var(--ui-color-border); border-radius:var(--ui-radius); }
.ui-menu--horizontal { flex-direction:row; align-items:center; }
.ui-menu--vertical { flex-direction:column; align-items:stretch; display:inline-flex; min-width:180px; }
.ui-menu__item { position:relative; list-style:none; }
.ui-menu__link { display:flex; align-items:center; gap:var(--ui-gap); padding:8px 12px; color:inherit; text-decoration:none; cursor:pointer; white-space:nowrap; border-radius:var(--ui-radius); user-select:none; }
.ui-menu__link:hover { background:var(--ui-color-base-bg-hover); }
.ui-menu__icon { display:inline-flex; }
.ui-menu__text { flex:1 1 auto; }
.ui-menu__arrow { width:0; height:0; margin-left:4px; border-left:4px solid currentColor; border-top:4px solid transparent; border-bottom:4px solid transparent; opacity:.6; }
.ui-menu--horizontal > .ui-menu__item > .ui-menu__link > .ui-menu__arrow { border-left:4px solid transparent; border-right:4px solid transparent; border-top:4px solid currentColor; border-bottom:0; }
.ui-menu__item--disabled > .ui-menu__link { color:var(--ui-color-disabled); cursor:not-allowed; pointer-events:none; }
.ui-menu__submenu { list-style:none; margin:0; padding:4px; position:absolute; min-width:180px; background:#fff; border:1px solid var(--ui-color-border); border-radius:var(--ui-radius); box-shadow:0 4px 14px rgba(0,0,0,.14); z-index:var(--ui-z-dropdown); display:none; flex-direction:column; gap:2px; }
.ui-menu--horizontal > .ui-menu__item > .ui-menu__submenu { top:100%; left:0; }
.ui-menu__submenu .ui-menu__submenu { top:0; left:100%; }
.ui-menu__item:hover > .ui-menu__submenu { display:flex; }
.ui-menu__item--disabled:hover > .ui-menu__submenu { display:none; }

/* ── Серија 7: calendar, color/context/popover/actionsheet/window/tree/form/date/time ── */

/* Календар */
.ui-calendar { display:inline-block; font-family:var(--ui-font); color:var(--ui-color-text); border:1px solid var(--ui-color-border); border-radius:var(--ui-radius); background:var(--ui-color-base-bg); padding:var(--ui-gap); }
.ui-calendar__nav { display:flex; align-items:center; justify-content:space-between; gap:var(--ui-gap); margin-bottom:var(--ui-gap); }
.ui-calendar__nav-btn { border:1px solid var(--ui-color-border); border-radius:var(--ui-radius); background:var(--ui-color-base-bg); color:var(--ui-color-text); cursor:pointer; padding:0 .5em; line-height:1.8; }
.ui-calendar__nav-btn:hover { background:var(--ui-color-base-bg-hover); }
.ui-calendar__title { font-weight:600; }
.ui-calendar__weekdays, .ui-calendar__grid { display:grid; grid-template-columns:repeat(7, 1fr); gap:2px; }
.ui-calendar__weekday { text-align:center; font-size:.8em; color:var(--ui-color-disabled); padding:.25em 0; }
.ui-calendar__day { border:0; border-radius:var(--ui-radius); background:transparent; color:var(--ui-color-text); cursor:pointer; aspect-ratio:1; min-width:2em; line-height:2em; }
.ui-calendar__day:hover:not([disabled]) { background:var(--ui-color-base-bg-hover); }
.ui-calendar__day--muted { color:var(--ui-color-disabled); }
.ui-calendar__day--today { box-shadow:inset 0 0 0 1px var(--ui-color-primary); }
.ui-calendar__day--selected { background:var(--ui-color-primary); color:#fff; }
.ui-calendar__day[disabled] { color:var(--ui-color-disabled); cursor:not-allowed; opacity:.5; }

/* ColorPicker (popup со рамен избирач) */
.ui-colorpicker { position:relative; display:inline-flex; }
.ui-colorpicker__trigger { display:inline-flex; align-items:center; gap:6px; padding:4px 8px; background:#fff; border:1px solid var(--ui-color-border); border-radius:var(--ui-radius); font:14px var(--ui-font); color:var(--ui-color-text); cursor:pointer; }
.ui-colorpicker__trigger:hover { background:var(--ui-color-base-bg-hover); }
.ui-colorpicker__swatch { display:inline-block; width:18px; height:18px; border-radius:3px; border:1px solid var(--ui-color-border); background-image:linear-gradient(45deg,#ccc 25%,transparent 25%),linear-gradient(-45deg,#ccc 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#ccc 75%),linear-gradient(-45deg,transparent 75%,#ccc 75%); background-size:8px 8px; background-position:0 0,0 4px,4px -4px,-4px 0; }
.ui-colorpicker__arrow { width:0; height:0; border-left:4px solid transparent; border-right:4px solid transparent; border-top:5px solid var(--ui-color-text); transition:transform .12s ease; }
.ui-colorpicker--open .ui-colorpicker__arrow { transform:rotate(180deg); }
.ui-colorpicker--disabled .ui-colorpicker__trigger { opacity:.55; pointer-events:none; }
.ui-colorpicker__popup { position:absolute; top:calc(100% + 4px); left:0; z-index:var(--ui-z-dropdown); box-shadow:0 6px 20px rgba(0,0,0,.15); border-radius:var(--ui-radius); }

/* ContextMenu (токени поправени) */
.ui-contextmenu-host { position:relative; display:block; }
.ui-contextmenu { position:absolute; margin:0; padding:var(--ui-gap); list-style:none; min-width:12rem; background:var(--ui-color-base-bg); color:var(--ui-color-text); border:1px solid var(--ui-color-border); border-radius:var(--ui-radius); font:14px var(--ui-font); box-shadow:0 4px 14px rgba(0,0,0,.15); }
.ui-contextmenu__item { display:flex; align-items:center; gap:var(--ui-gap); padding:6px 10px; border-radius:var(--ui-radius); cursor:pointer; user-select:none; }
.ui-contextmenu__item:hover { background:var(--ui-color-base-bg-hover); }
.ui-contextmenu__item--disabled { color:var(--ui-color-disabled); cursor:default; pointer-events:none; }
.ui-contextmenu__icon { display:inline-flex; flex:0 0 auto; }
.ui-contextmenu__text { flex:1 1 auto; }

/* Popover */
.ui-popover { position:relative; display:inline-block; }
.ui-popover__content { position:absolute; z-index:var(--ui-z-dropdown); background:var(--ui-color-base-bg); color:var(--ui-color-text); border:1px solid var(--ui-color-border); border-radius:var(--ui-radius); padding:var(--ui-gap); font:14px var(--ui-font); box-shadow:0 4px 14px rgba(0,0,0,.15); }
.ui-popover--bottom { top:100%; left:0; margin-top:var(--ui-gap); }
.ui-popover--top { bottom:100%; left:0; margin-bottom:var(--ui-gap); }
.ui-popover--right { left:100%; top:0; margin-left:var(--ui-gap); }
.ui-popover--left { right:100%; top:0; margin-right:var(--ui-gap); }

/* ActionSheet */
.ui-actionsheet-overlay { position:fixed; inset:0; background:rgba(0,0,0,.4); display:flex; align-items:flex-end; justify-content:center; z-index:var(--ui-z-modal); }
.ui-actionsheet { width:100%; max-width:560px; background:var(--ui-color-base-bg); border-top-left-radius:calc(var(--ui-radius) * 2); border-top-right-radius:calc(var(--ui-radius) * 2); box-shadow:0 -8px 30px rgba(0,0,0,.25); padding:8px; display:flex; flex-direction:column; gap:var(--ui-gap); animation:ui-actionsheet-slide-up .22s ease-out; }
.ui-actionsheet__title { padding:10px 14px; text-align:center; font:600 14px var(--ui-font); color:var(--ui-color-text); border-bottom:1px solid var(--ui-color-border); }
.ui-actionsheet__item { display:flex; align-items:center; gap:var(--ui-gap); width:100%; padding:14px 16px; border:none; background:none; border-radius:var(--ui-radius); font:14px var(--ui-font); color:var(--ui-color-text); text-align:left; cursor:pointer; }
.ui-actionsheet__item:hover { background:var(--ui-color-base-bg-hover); }
.ui-actionsheet__item--disabled { color:var(--ui-color-disabled); cursor:not-allowed; }
.ui-actionsheet__item--disabled:hover { background:none; }
.ui-actionsheet__icon { flex:0 0 auto; }
.ui-actionsheet__text { flex:1 1 auto; }
.ui-actionsheet__cancel { width:100%; padding:14px 16px; border:none; background:var(--ui-color-base-bg-hover); border-radius:var(--ui-radius); font:600 14px var(--ui-font); color:var(--ui-color-primary); cursor:pointer; }
@keyframes ui-actionsheet-slide-up { from { transform:translateY(100%); } to { transform:translateY(0); } }

/* Window (пловечки прозор) */
.ui-window-overlay { position:fixed; inset:0; background:rgba(0,0,0,.45); z-index:var(--ui-z-overlay); }
.ui-window { display:flex; flex-direction:column; background:var(--ui-color-base-bg); color:var(--ui-color-text); border:1px solid var(--ui-color-border); border-radius:var(--ui-radius); box-shadow:0 8px 30px rgba(0,0,0,.25); overflow:hidden; box-sizing:border-box; font:14px var(--ui-font); }
.ui-window--dragging, .ui-window--resizing { user-select:none; }
.ui-window__header { display:flex; align-items:center; justify-content:space-between; gap:var(--ui-gap); padding:8px 12px; background:var(--ui-color-base-bg-hover); border-bottom:1px solid var(--ui-color-border); cursor:move; touch-action:none; }
.ui-window__title { font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ui-window__close { border:none; background:transparent; color:var(--ui-color-text); font-size:18px; line-height:1; cursor:pointer; padding:2px 6px; border-radius:var(--ui-radius); }
.ui-window__close:hover { background:var(--ui-color-base-bg); color:var(--ui-color-danger); }
.ui-window__body { flex:1 1 auto; padding:12px; overflow:auto; }
.ui-window__footer { display:flex; align-items:center; justify-content:flex-end; gap:var(--ui-gap); padding:8px 12px; border-top:1px solid var(--ui-color-border); }
.ui-window__resize { position:absolute; right:0; bottom:0; width:16px; height:16px; cursor:nwse-resize; touch-action:none; background:linear-gradient(135deg, transparent 50%, var(--ui-color-border) 50%); }

/* TreeView */
.ui-treeview, .ui-treeview__children { list-style:none; margin:0; padding:0; font:14px var(--ui-font); }
.ui-treeview__children { padding-inline-start:1.25rem; }
.ui-treeview__row { display:flex; align-items:center; gap:var(--ui-gap); border-radius:var(--ui-radius); }
.ui-treeview__toggle { display:inline-flex; align-items:center; justify-content:center; width:1rem; min-width:1rem; cursor:pointer; user-select:none; color:var(--ui-color-text); }
.ui-treeview__toggle--leaf { cursor:default; }
.ui-treeview__checkbox { cursor:pointer; }
.ui-treeview__icon { display:inline-flex; align-items:center; color:var(--ui-color-text); }
.ui-treeview__label { cursor:pointer; padding:0 var(--ui-gap); border-radius:var(--ui-radius); color:var(--ui-color-text); }
.ui-treeview__label:hover { background:var(--ui-color-base-bg-hover); }
.ui-treeview__label--selected { background:var(--ui-color-primary); color:#fff; }
.ui-treeview__item--disabled > .ui-treeview__row { color:var(--ui-color-disabled); cursor:not-allowed; }
.ui-treeview__item--disabled .ui-treeview__label { cursor:not-allowed; color:var(--ui-color-disabled); background:transparent; }

/* Form */
.ui-form { display:flex; flex-direction:column; gap:var(--ui-gap); font-family:var(--ui-font); }
.ui-form--vertical { align-items:stretch; }
.ui-form--horizontal label { display:inline-block; min-width:8rem; margin-right:var(--ui-gap); }
.ui-form__actions { display:flex; gap:var(--ui-gap); margin-top:var(--ui-gap); }

/* DateInput */
.ui-dateinput { display:inline-flex; }
.ui-dateinput__input { width:100%; }
.ui-dateinput--disabled { opacity:.55; cursor:not-allowed; }
.ui-dateinput--disabled .ui-dateinput__input { pointer-events:none; }

/* TimePicker */
.ui-timepicker { position:relative; display:inline-block; font:14px var(--ui-font); }
.ui-timepicker__input { width:100%; box-sizing:border-box; padding:.375rem .5rem; border:1px solid var(--ui-color-border); border-radius:var(--ui-radius); background:var(--ui-color-base-bg); color:var(--ui-color-text); cursor:pointer; }
.ui-timepicker__input:hover { background:var(--ui-color-base-bg-hover); }
.ui-timepicker--disabled .ui-timepicker__input, .ui-timepicker__input[disabled] { color:var(--ui-color-disabled); cursor:default; }
.ui-timepicker__list { position:absolute; z-index:var(--ui-z-dropdown); top:calc(100% + 2px); left:0; right:0; max-height:14rem; overflow-y:auto; display:flex; flex-direction:column; gap:1px; padding:var(--ui-gap); border:1px solid var(--ui-color-border); border-radius:var(--ui-radius); background:var(--ui-color-base-bg); box-shadow:0 6px 20px rgba(0,0,0,.15); }
.ui-timepicker__option { appearance:none; text-align:left; padding:.25rem .5rem; border:0; border-radius:var(--ui-radius); background:transparent; color:var(--ui-color-text); cursor:pointer; }
.ui-timepicker__option:hover { background:var(--ui-color-base-bg-hover); }
.ui-timepicker__option--selected { background:var(--ui-color-primary); color:#fff; }

/* ── Серија 8: dropdown/combo/multiselect/listbox + date/range/multiview + masked ── */

/* DropDownList */
.ui-dropdownlist { position:relative; display:inline-block; font:14px var(--ui-font); }
.ui-dropdownlist__trigger { display:inline-flex; align-items:center; justify-content:space-between; gap:var(--ui-gap); width:100%; min-width:10rem; text-align:left; padding:6px 10px; border:1px solid var(--ui-color-border); border-radius:var(--ui-radius); background:var(--ui-color-base-bg); color:var(--ui-color-text); cursor:pointer; }
.ui-dropdownlist__trigger:hover { background:var(--ui-color-base-bg-hover); }
.ui-dropdownlist--disabled .ui-dropdownlist__trigger, .ui-dropdownlist__trigger[disabled] { opacity:.55; cursor:not-allowed; pointer-events:none; }
.ui-dropdownlist__value { flex:1 1 auto; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ui-dropdownlist__value--placeholder { color:var(--ui-color-disabled); }
.ui-dropdownlist__arrow { flex:0 0 auto; width:0; height:0; border-left:4px solid transparent; border-right:4px solid transparent; border-top:5px solid currentColor; display:inline-block; }
.ui-dropdownlist--open .ui-dropdownlist__arrow { transform:rotate(180deg); }
.ui-dropdownlist__list { position:absolute; z-index:var(--ui-z-dropdown); top:calc(100% + 2px); left:0; right:0; max-height:14rem; overflow-y:auto; display:flex; flex-direction:column; gap:1px; padding:var(--ui-gap); border:1px solid var(--ui-color-border); border-radius:var(--ui-radius); background:var(--ui-color-base-bg); box-shadow:0 6px 20px rgba(0,0,0,.15); }
.ui-dropdownlist__option { appearance:none; text-align:left; padding:.25rem .5rem; border:0; border-radius:var(--ui-radius); background:transparent; color:var(--ui-color-text); cursor:pointer; }
.ui-dropdownlist__option:hover { background:var(--ui-color-base-bg-hover); }
.ui-dropdownlist__option--selected { background:var(--ui-color-primary); color:#fff; }

/* AutoComplete */
.ui-autocomplete { position:relative; display:inline-block; }
.ui-autocomplete .ui-autocomplete__input { width:100%; }
.ui-autocomplete--disabled { opacity:.6; }
.ui-autocomplete__list { position:absolute; z-index:var(--ui-z-dropdown); top:calc(100% + 2px); left:0; right:0; max-height:14rem; overflow-y:auto; display:flex; flex-direction:column; gap:1px; padding:var(--ui-gap); border:1px solid var(--ui-color-border); border-radius:var(--ui-radius); background:var(--ui-color-base-bg); box-shadow:0 6px 20px rgba(0,0,0,.15); }
.ui-autocomplete__option { display:block; width:100%; text-align:left; padding:6px 10px; border:0; border-radius:var(--ui-radius); background:transparent; font:14px var(--ui-font); color:var(--ui-color-text); cursor:pointer; }
.ui-autocomplete__option:hover { background:var(--ui-color-base-bg-hover); }

/* ComboBox */
.ui-combobox { position:relative; display:inline-block; font:14px var(--ui-font); }
.ui-combobox__input { width:100%; box-sizing:border-box; padding-right:1.75rem; cursor:text; }
.ui-combobox--disabled .ui-combobox__input, .ui-combobox__input[disabled] { color:var(--ui-color-disabled); cursor:default; }
.ui-combobox__toggle { position:absolute; top:0; right:0; height:100%; width:1.75rem; display:inline-flex; align-items:center; justify-content:center; padding:0; border:0; background:transparent; color:var(--ui-color-text); cursor:pointer; }
.ui-combobox__toggle[disabled] { color:var(--ui-color-disabled); cursor:default; }
.ui-combobox__arrow { width:0; height:0; border-left:4px solid transparent; border-right:4px solid transparent; border-top:5px solid currentColor; transition:transform .15s ease; }
.ui-combobox--open .ui-combobox__arrow { transform:rotate(180deg); }
.ui-combobox__list { position:absolute; z-index:var(--ui-z-dropdown); top:calc(100% + 2px); left:0; right:0; max-height:14rem; overflow-y:auto; display:flex; flex-direction:column; gap:1px; padding:var(--ui-gap); border:1px solid var(--ui-color-border); border-radius:var(--ui-radius); background:var(--ui-color-base-bg); box-shadow:0 6px 20px rgba(0,0,0,.15); }
.ui-combobox__option { appearance:none; text-align:left; padding:.25rem .5rem; border:0; border-radius:var(--ui-radius); background:transparent; color:var(--ui-color-text); cursor:pointer; }
.ui-combobox__option:hover { background:var(--ui-color-base-bg-hover); }
.ui-combobox__option--selected { background:var(--ui-color-primary); color:#fff; }

/* MultiSelect */
.ui-multiselect { position:relative; display:inline-block; min-width:12rem; font:14px var(--ui-font); }
.ui-multiselect__control { display:flex; flex-wrap:wrap; align-items:center; gap:var(--ui-gap); min-height:2.25rem; box-sizing:border-box; padding:.25rem .5rem; border:1px solid var(--ui-color-border); border-radius:var(--ui-radius); background:var(--ui-color-base-bg); color:var(--ui-color-text); cursor:pointer; }
.ui-multiselect__control:hover { background:var(--ui-color-base-bg-hover); }
.ui-multiselect--open .ui-multiselect__control { border-color:var(--ui-color-primary); }
.ui-multiselect--disabled .ui-multiselect__control { color:var(--ui-color-disabled); cursor:default; pointer-events:none; opacity:.6; }
.ui-multiselect__placeholder { color:var(--ui-color-disabled); }
.ui-multiselect__chip { display:inline-flex; align-items:center; gap:4px; padding:.125rem .375rem; border:1px solid var(--ui-color-border); border-radius:var(--ui-radius); background:var(--ui-color-base-bg-hover); line-height:1.2; }
.ui-multiselect__chip-label { white-space:nowrap; }
.ui-multiselect__chip-remove { appearance:none; border:0; background:transparent; color:var(--ui-color-text); cursor:pointer; padding:0 .125rem; font-size:1rem; line-height:1; }
.ui-multiselect__chip-remove:hover { color:var(--ui-color-danger); }
.ui-multiselect__list { position:absolute; z-index:var(--ui-z-dropdown); top:calc(100% + 2px); left:0; right:0; max-height:14rem; overflow-y:auto; display:flex; flex-direction:column; gap:1px; padding:var(--ui-gap); border:1px solid var(--ui-color-border); border-radius:var(--ui-radius); background:var(--ui-color-base-bg); box-shadow:0 6px 20px rgba(0,0,0,.15); }
.ui-multiselect__option { appearance:none; text-align:left; padding:.25rem .5rem; border:0; border-radius:var(--ui-radius); background:transparent; color:var(--ui-color-text); cursor:pointer; }
.ui-multiselect__option:hover { background:var(--ui-color-base-bg-hover); }
.ui-multiselect__option--selected { background:var(--ui-color-primary); color:#fff; }

/* ListBox */
.ui-listbox { display:block; overflow:auto; border:1px solid var(--ui-color-border); border-radius:var(--ui-radius); background:var(--ui-color-base-bg); font:14px var(--ui-font); }
.ui-listbox__option { padding:6px 10px; cursor:pointer; color:var(--ui-color-text); }
.ui-listbox__option:hover { background:var(--ui-color-base-bg-hover); }
.ui-listbox__option--selected { background:var(--ui-color-primary); color:#fff; }
.ui-listbox--disabled { opacity:.55; pointer-events:none; }

/* DatePicker */
.ui-datepicker { position:relative; display:inline-block; font-family:var(--ui-font); }
.ui-datepicker__input { cursor:pointer; padding-right:calc(var(--ui-gap) * 2 + 1rem); }
.ui-datepicker__icon { position:absolute; top:50%; right:var(--ui-gap); width:1rem; height:1rem; transform:translateY(-50%); pointer-events:none; border:1px solid var(--ui-color-border); border-radius:calc(var(--ui-radius) / 2); box-sizing:border-box; }
.ui-datepicker__icon::before { content:""; position:absolute; top:-1px; left:0; right:0; height:3px; background:var(--ui-color-primary); border-radius:calc(var(--ui-radius) / 2) calc(var(--ui-radius) / 2) 0 0; }
.ui-datepicker--disabled .ui-datepicker__input { cursor:not-allowed; opacity:.7; }
.ui-datepicker--disabled .ui-datepicker__icon { opacity:.5; }
.ui-datepicker__popup { position:absolute; top:calc(100% + var(--ui-gap)); left:0; z-index:var(--ui-z-dropdown); background:var(--ui-color-base-bg); border:1px solid var(--ui-color-border); border-radius:var(--ui-radius); padding:var(--ui-gap); box-shadow:0 4px 16px rgba(0,0,0,.12); }

/* DateTimePicker */
.ui-datetimepicker { position:relative; display:inline-block; font:14px var(--ui-font); }
.ui-datetimepicker__input { width:100%; box-sizing:border-box; padding:.375rem .5rem; border:1px solid var(--ui-color-border); border-radius:var(--ui-radius); background:var(--ui-color-base-bg); color:var(--ui-color-text); cursor:pointer; }
.ui-datetimepicker__input:hover { background:var(--ui-color-base-bg-hover); }
.ui-datetimepicker--disabled .ui-datetimepicker__input, .ui-datetimepicker__input[disabled] { color:var(--ui-color-disabled); cursor:default; }
.ui-datetimepicker__popup { position:absolute; z-index:var(--ui-z-dropdown); top:calc(100% + 2px); left:0; border:1px solid var(--ui-color-border); border-radius:var(--ui-radius); background:var(--ui-color-base-bg); box-shadow:0 6px 20px rgba(0,0,0,.15); padding:var(--ui-gap); }
.ui-datetimepicker__body { display:flex; align-items:flex-start; gap:var(--ui-gap); }
.ui-datetimepicker__date { flex:0 0 auto; }
.ui-datetimepicker__time { display:flex; flex-direction:column; gap:1px; max-height:16rem; overflow-y:auto; min-width:5rem; }
.ui-datetimepicker__time-option { appearance:none; text-align:left; padding:.25rem .5rem; border:0; border-radius:var(--ui-radius); background:transparent; color:var(--ui-color-text); cursor:pointer; }
.ui-datetimepicker__time-option:hover { background:var(--ui-color-base-bg-hover); }
.ui-datetimepicker__time-option--selected { background:var(--ui-color-primary); color:#fff; }
.ui-datetimepicker__footer { display:flex; justify-content:flex-end; margin-top:var(--ui-gap); }
.ui-datetimepicker__done { appearance:none; padding:.375rem .75rem; border:1px solid var(--ui-color-border); border-radius:var(--ui-radius); background:var(--ui-color-primary); color:#fff; cursor:pointer; }

/* DateRangePicker */
.ui-daterangepicker { position:relative; display:inline-block; font-family:var(--ui-font); }
.ui-daterangepicker__input { width:100%; box-sizing:border-box; padding:.375rem .5rem; color:var(--ui-color-text); background:var(--ui-color-base-bg); border:1px solid var(--ui-color-border); border-radius:var(--ui-radius); cursor:pointer; }
.ui-daterangepicker__input:hover { background:var(--ui-color-base-bg-hover); }
.ui-daterangepicker--open .ui-daterangepicker__input { border-color:var(--ui-color-primary); }
.ui-daterangepicker__popup { position:absolute; top:calc(100% + var(--ui-gap)); left:0; z-index:var(--ui-z-dropdown); background:var(--ui-color-base-bg); border:1px solid var(--ui-color-border); border-radius:var(--ui-radius); padding:var(--ui-gap); box-shadow:0 4px 16px rgba(0,0,0,.12); }

/* MultiViewCalendar */
.ui-multiviewcalendar { display:inline-block; font-family:var(--ui-font); color:var(--ui-color-text); border:1px solid var(--ui-color-border); border-radius:var(--ui-radius); background:var(--ui-color-base-bg); padding:var(--ui-gap); }
.ui-multiviewcalendar__nav { display:flex; align-items:center; justify-content:space-between; gap:var(--ui-gap); margin-bottom:var(--ui-gap); }
.ui-multiviewcalendar__nav-btn { border:1px solid var(--ui-color-border); border-radius:var(--ui-radius); background:var(--ui-color-base-bg); color:var(--ui-color-text); cursor:pointer; padding:0 .5em; line-height:1.8; }
.ui-multiviewcalendar__nav-btn:hover { background:var(--ui-color-base-bg-hover); }
.ui-multiviewcalendar__months { display:flex; gap:calc(var(--ui-gap) * 2); align-items:flex-start; }
.ui-multiviewcalendar__view { display:flex; flex-direction:column; }
.ui-multiviewcalendar__title { font-weight:600; text-align:center; margin-bottom:var(--ui-gap); }
.ui-multiviewcalendar__weekdays, .ui-multiviewcalendar__grid { display:grid; grid-template-columns:repeat(7, 1fr); gap:2px; }
.ui-multiviewcalendar__weekday { text-align:center; font-size:.8em; color:var(--ui-color-disabled); padding:.25em 0; }
.ui-multiviewcalendar__day { border:0; border-radius:var(--ui-radius); background:transparent; color:var(--ui-color-text); cursor:pointer; aspect-ratio:1; min-width:2em; line-height:2em; }
.ui-multiviewcalendar__day:hover:not([disabled]) { background:var(--ui-color-base-bg-hover); }
.ui-multiviewcalendar__day--muted { color:var(--ui-color-disabled); }
.ui-multiviewcalendar__day--today { box-shadow:inset 0 0 0 1px var(--ui-color-primary); }
.ui-multiviewcalendar__day--selected { background:var(--ui-color-primary); color:#fff; }
.ui-multiviewcalendar__day[disabled] { color:var(--ui-color-disabled); cursor:not-allowed; opacity:.5; }

/* MaskedTextBox */
.ui-maskedtextbox { display:inline-flex; }
.ui-maskedtextbox__input { width:100%; }
.ui-maskedtextbox--disabled { opacity:.6; }
.ui-maskedtextbox--disabled .ui-maskedtextbox__input { pointer-events:none; }

/* ── Серија 9: ExpansionPanel, ListView, MultiColumnComboBox, Filter, Upload, FileSelect, Sankey, Popup ── */

/* ExpansionPanel */
.ui-expansionpanel { border:1px solid var(--ui-color-border); border-radius:var(--ui-radius); background:var(--ui-color-base-bg); font-family:var(--ui-font); overflow:hidden; }
.ui-expansionpanel__header { display:flex; align-items:center; justify-content:space-between; gap:var(--ui-gap); width:100%; padding:.5rem .75rem; border:0; background:transparent; color:var(--ui-color-text); font:inherit; text-align:start; cursor:pointer; }
.ui-expansionpanel__header:hover { background:var(--ui-color-base-bg-hover); }
.ui-expansionpanel__title { flex:1 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ui-expansionpanel__arrow { flex:0 0 auto; transition:transform .15s ease; color:var(--ui-color-text); }
.ui-expansionpanel--expanded .ui-expansionpanel__header { border-bottom:1px solid var(--ui-color-border); }
.ui-expansionpanel__body { padding:.5rem .75rem; color:var(--ui-color-text); }

/* ListView */
.ui-listview { display:flex; flex-direction:column; gap:var(--ui-gap); font-family:var(--ui-font); color:var(--ui-color-text); }
.ui-listview__item { padding:var(--ui-gap); border:1px solid var(--ui-color-border); border-radius:var(--ui-radius); background:var(--ui-color-base-bg); }
.ui-listview__empty { padding:var(--ui-gap); color:var(--ui-color-disabled); text-align:center; }
.ui-listview__pager { display:flex; align-items:center; justify-content:center; gap:var(--ui-gap); margin-top:var(--ui-gap); }
.ui-listview__pager-btn { display:inline-flex; align-items:center; justify-content:center; min-width:2rem; padding:.25rem .5rem; border:1px solid var(--ui-color-border); border-radius:var(--ui-radius); background:var(--ui-color-base-bg); color:var(--ui-color-text); cursor:pointer; font:inherit; }
.ui-listview__pager-btn:hover:not(:disabled) { background:var(--ui-color-base-bg-hover); }
.ui-listview__pager-btn:disabled { color:var(--ui-color-disabled); cursor:default; opacity:.6; }
.ui-listview__pager-info { min-width:3rem; text-align:center; color:var(--ui-color-text); }

/* MultiColumnComboBox */
.ui-mccombobox { position:relative; display:inline-flex; align-items:stretch; font-family:var(--ui-font); }
.ui-mccombobox__input { flex:1 1 auto; min-width:0; padding:0 calc(var(--ui-gap) * 2) 0 var(--ui-gap); border:1px solid var(--ui-color-border); border-radius:var(--ui-radius); background:var(--ui-color-base-bg); color:var(--ui-color-text); font:inherit; line-height:2; }
.ui-mccombobox__toggle { position:absolute; inset-inline-end:0; top:0; bottom:0; width:calc(var(--ui-gap) * 2); display:inline-flex; align-items:center; justify-content:center; border:0; background:transparent; color:var(--ui-color-text); cursor:pointer; }
.ui-mccombobox__arrow { width:0; height:0; border-inline-start:4px solid transparent; border-inline-end:4px solid transparent; border-top:5px solid currentColor; transition:transform .15s ease; }
.ui-mccombobox--open .ui-mccombobox__arrow { transform:rotate(180deg); }
.ui-mccombobox__table { position:absolute; inset-inline-start:0; top:calc(100% + 2px); z-index:var(--ui-z-dropdown); min-width:100%; max-height:16rem; overflow:auto; background:var(--ui-color-base-bg); border:1px solid var(--ui-color-border); border-radius:var(--ui-radius); box-shadow:0 2px 8px rgba(0,0,0,.12); }
.ui-mccombobox__table > table { width:100%; border-collapse:collapse; font:inherit; }
.ui-mccombobox__th { position:sticky; top:0; text-align:start; padding:var(--ui-gap); background:var(--ui-color-base-bg-hover); color:var(--ui-color-text); border-bottom:1px solid var(--ui-color-border); font-weight:600; white-space:nowrap; }
.ui-mccombobox__row { cursor:pointer; }
.ui-mccombobox__row:hover { background:var(--ui-color-base-bg-hover); }
.ui-mccombobox__row--selected { background:var(--ui-color-primary); color:#fff; }
.ui-mccombobox__cell { padding:var(--ui-gap); white-space:nowrap; }
.ui-mccombobox--disabled { opacity:.6; pointer-events:none; }

/* Filter */
.ui-filter { display:flex; flex-direction:column; gap:var(--ui-gap); font-family:var(--ui-font); }
.ui-filter__row { display:flex; align-items:center; gap:var(--ui-gap); }
.ui-filter__field, .ui-filter__operator, .ui-filter__value { padding:.25rem .5rem; border:1px solid var(--ui-color-border); border-radius:var(--ui-radius); background:var(--ui-color-base-bg); color:var(--ui-color-text); font:inherit; }
.ui-filter__value { flex:1 1 auto; min-width:0; }
.ui-filter__remove { flex:0 0 auto; display:inline-flex; align-items:center; justify-content:center; width:1.75rem; height:1.75rem; padding:0; border:1px solid var(--ui-color-border); border-radius:var(--ui-radius); background:var(--ui-color-base-bg); color:var(--ui-color-danger); font:inherit; line-height:1; cursor:pointer; }
.ui-filter__remove:hover { background:var(--ui-color-base-bg-hover); }
.ui-filter__add { align-self:flex-start; padding:.25rem .75rem; border:1px solid var(--ui-color-primary); border-radius:var(--ui-radius); background:transparent; color:var(--ui-color-primary); font:inherit; cursor:pointer; }
.ui-filter__add:hover { background:var(--ui-color-base-bg-hover); }

/* Upload */
.ui-upload { display:flex; flex-direction:column; gap:var(--ui-gap); font-family:var(--ui-font); color:var(--ui-color-text); }
.ui-upload__dropzone { position:relative; display:flex; align-items:center; justify-content:center; gap:var(--ui-gap); min-height:96px; padding:16px; border:2px dashed var(--ui-color-border); border-radius:var(--ui-radius); background:var(--ui-color-base-bg); text-align:center; cursor:pointer; transition:background .15s ease, border-color .15s ease; }
.ui-upload__dropzone:hover { background:var(--ui-color-base-bg-hover); border-color:var(--ui-color-primary); }
.ui-upload__input { position:absolute; inset:0; width:100%; height:100%; opacity:0; cursor:pointer; }
.ui-upload__hint { pointer-events:none; color:var(--ui-color-disabled); }
.ui-upload__list { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:var(--ui-gap); }
.ui-upload__item { display:grid; grid-template-columns:1fr auto auto; align-items:center; gap:var(--ui-gap); padding:8px 10px; border:1px solid var(--ui-color-border); border-radius:var(--ui-radius); background:var(--ui-color-base-bg); }
.ui-upload__name { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ui-upload__size { color:var(--ui-color-disabled); font-size:.85em; white-space:nowrap; }
.ui-upload__progress { grid-column:1 / -1; height:4px; border-radius:var(--ui-radius); background:var(--ui-color-base-bg-hover); overflow:hidden; }
.ui-upload__progress-bar { height:100%; background:var(--ui-color-primary); transition:width .2s ease; }
.ui-upload__remove { display:inline-flex; align-items:center; justify-content:center; width:22px; height:22px; padding:0; border:none; border-radius:var(--ui-radius); background:transparent; color:var(--ui-color-disabled); font-size:16px; line-height:1; cursor:pointer; }
.ui-upload__remove:hover { background:var(--ui-color-base-bg-hover); color:var(--ui-color-danger); }

/* FileSelect */
.ui-fileselect { display:flex; flex-direction:column; gap:var(--ui-gap); font:14px var(--ui-font); color:var(--ui-color-text); }
.ui-fileselect__button { display:inline-flex; align-items:center; gap:6px; align-self:flex-start; padding:6px 12px; border:1px solid var(--ui-color-border); border-radius:var(--ui-radius); background:var(--ui-color-base-bg); cursor:pointer; user-select:none; }
.ui-fileselect__button:hover { background:var(--ui-color-base-bg-hover); }
.ui-fileselect__input { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); border:0; }
.ui-fileselect__list { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:4px; }
.ui-fileselect__item { display:flex; align-items:center; gap:8px; padding:4px 8px; border:1px solid var(--ui-color-border); border-radius:var(--ui-radius); background:var(--ui-color-base-bg); }
.ui-fileselect__name { flex:1 1 auto; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ui-fileselect__size { flex:0 0 auto; opacity:.7; font-size:12px; }
.ui-fileselect__remove { flex:0 0 auto; border:none; background:none; cursor:pointer; font-size:16px; line-height:1; color:var(--ui-color-text); padding:0 2px; }
.ui-fileselect__remove:hover { color:var(--ui-color-danger); }

/* Sankey */
.ui-sankey { display:block; font-family:var(--ui-font); overflow:visible; }
.ui-sankey__node { fill:var(--ui-color-primary); }
.ui-sankey__link { fill:none; stroke:var(--ui-color-primary); stroke-opacity:.45; transition:stroke-opacity .15s ease; }
.ui-sankey__link:hover { stroke-opacity:.7; }
.ui-sankey__label { font-family:var(--ui-font); font-size:12px; fill:var(--ui-color-text); pointer-events:none; user-select:none; }

/* Popup */
.ui-popup { position:relative; display:inline-block; }
.ui-popup__anchor { display:inline-block; }
.ui-popup__content { position:absolute; z-index:var(--ui-z-dropdown); min-width:max-content; background:var(--ui-color-base-bg); border:1px solid var(--ui-color-border); border-radius:var(--ui-radius); box-shadow:0 2px 8px rgba(0,0,0,.15); }
.ui-popup--bottom-left { top:100%; left:0; }
.ui-popup--bottom-right { top:100%; right:0; }
.ui-popup--top-left { bottom:100%; left:0; }
.ui-popup--top-right { bottom:100%; right:0; }

/* ── LoaderContainer (прекривач со вчитување) ── */
.ui-loadercontainer { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; z-index:var(--ui-z-overlay); }
.ui-loadercontainer__overlay { position:absolute; inset:0; }
.ui-loadercontainer--dark .ui-loadercontainer__overlay { background:rgba(0,0,0,.45); }
.ui-loadercontainer--light .ui-loadercontainer__overlay { background:rgba(255,255,255,.6); }
.ui-loadercontainer__panel { position:relative; display:flex; flex-direction:column; align-items:center; gap:8px; color:var(--ui-color-text); }
.ui-loadercontainer--dark .ui-loadercontainer__panel { color:#fff; }
.ui-loadercontainer__label { font:14px var(--ui-font); }

/* ── Grid (мега, Фаза 1) ── */
.ui-grid { border:1px solid var(--ui-color-border); border-radius:var(--ui-radius); overflow:auto; font:14px var(--ui-font); color:var(--ui-color-text); background:var(--ui-color-base-bg); }
.ui-grid-table { width:100%; border-collapse:collapse; }
.ui-grid-header-cell { text-align:left; padding:8px 12px; background:var(--ui-color-base-bg-hover); border-bottom:2px solid var(--ui-color-border); font-weight:600; white-space:nowrap; }
.ui-grid-row { border-bottom:1px solid var(--ui-color-border); }
.ui-grid-row:last-child { border-bottom:0; }
.ui-grid-row:hover { background:var(--ui-color-base-bg-hover); }
.ui-grid-cell { padding:8px 12px; }
.ui-grid-no-data td { padding:16px; text-align:center; color:var(--ui-color-disabled); }
.ui-grid-header-cell--sortable { cursor:pointer; user-select:none; }
.ui-grid-header-cell--sortable:hover { background:var(--ui-color-border); }
.ui-grid-sort-icon { color:var(--ui-color-primary); font-size:11px; }
.ui-grid-filter-row td { padding:4px 8px; background:var(--ui-color-base-bg); border-bottom:1px solid var(--ui-color-border); }
.ui-grid-filter-input { width:100%; box-sizing:border-box; padding:4px 6px; border:1px solid var(--ui-color-border); border-radius:var(--ui-radius); font:13px var(--ui-font); }
.ui-grid-pager { padding:8px; border-top:1px solid var(--ui-color-border); }
.ui-grid-footer { background:var(--ui-color-base-bg-hover); }
.ui-grid-footer-row { font-weight:600; }
.ui-grid-footer-cell { padding:8px 12px; border-top:2px solid var(--ui-color-border); text-align:left; white-space:nowrap; }
.ui-grid-detail-toggle-cell, .ui-grid-detail-header { width:34px; text-align:center; }
.ui-grid-detail-toggle { background:none; border:0; cursor:pointer; font-size:11px; line-height:1; color:var(--ui-color-text); padding:2px 6px; }
.ui-grid-detail-cell { padding:12px 16px; background:var(--ui-color-surface-2, #f6f7f9); }
/* Scrollable grid (кога Height е зададена) — лепливо заглавие */
.ui-grid--scrollable { overflow:auto; display:block; }
.ui-grid--scrollable .ui-grid-header th { position:sticky; top:0; z-index:2; }

/* Заклучени (замрзнати) колони — sticky на левиот раб; `left` офсетот е inline (кумулативен) од рендерот.
   z-index слоеви: header-locked (агол) најгоре > body-locked и обичен header > обично тело. */
.ui-grid-cell--locked { position:sticky; z-index:3; background:var(--ui-color-base-bg); }
.ui-grid-header-cell--locked { position:sticky; z-index:5; background:var(--ui-color-base-bg-hover); }
.ui-grid-row--selected .ui-grid-cell--locked { background:var(--ui-color-primary); }
/* Визуелен раб на последната заклучена колона (поставен преку --locked-edge класа од рендерот). */
.ui-grid-cell--locked-edge, .ui-grid-header-cell--locked-edge { box-shadow:2px 0 4px -2px rgba(0,0,0,.25); }
.ui-grid-row--selected, .ui-grid-row--selected:hover { background:var(--ui-color-primary); color:#fff; }

/* == Мега компоненти Ф1 CSS == */

/* UiTreeList */
/* ── UiTreeList (Фаза 1) ── бои/spacing само преку var(--ui-*); НЕ пишувај во ui-blazor.css ── */
.ui-treelist {
  --ui-treelist-indent: 24px;            /* се пребришува inline од IndentSize */
  --ui-treelist-toggle-size: 24px;       /* WCAG 2.5.8 target */
  --ui-treelist-row-height: var(--ui-row-height, 36px);
  --ui-treelist-border-color: var(--ui-color-border);
  --ui-treelist-row-hover-bg: var(--ui-color-hover-bg);
  --ui-treelist-header-bg: var(--ui-color-surface-2);
  --ui-treelist-toggle-anim: var(--ui-anim-duration, .2s);
  display: block;
  border: 1px solid var(--ui-treelist-border-color);
  border-radius: var(--ui-radius-md, 4px);
  font: var(--ui-font-body, inherit);
  color: var(--ui-color-text);
}
.ui-treelist--sm { --ui-treelist-row-height: var(--ui-row-height-sm, 28px); }
.ui-treelist--lg { --ui-treelist-row-height: var(--ui-row-height-lg, 44px); }

.ui-treelist-content { overflow: auto; }
.ui-treelist-table { width: 100%; border-collapse: collapse; table-layout: fixed; }

.ui-treelist-header { background: var(--ui-treelist-header-bg); }
.ui-treelist-header-cell {
  text-align: start;
  padding: var(--ui-spacing-2, 8px);
  font-weight: 600;
  border-bottom: 1px solid var(--ui-treelist-border-color);
  white-space: nowrap;
}

.ui-treelist-row { height: var(--ui-treelist-row-height); }
.ui-treelist-row:hover { background: var(--ui-treelist-row-hover-bg); }
.ui-treelist-cell {
  padding: var(--ui-spacing-1, 4px) var(--ui-spacing-2, 8px);
  border-bottom: 1px solid var(--ui-treelist-border-color);
  vertical-align: middle;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ui-treelist-tree-cell { white-space: nowrap; }            /* indent host (padding-inline-start inline) */
.ui-treelist-cell-content { overflow: hidden; text-overflow: ellipsis; }

/* Toggle копче + leaf placeholder (исти димензии за порамнување) */
.ui-treelist-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: var(--ui-treelist-toggle-size); height: var(--ui-treelist-toggle-size);
  min-width: var(--ui-treelist-toggle-size);
  padding: 0; margin-inline-end: var(--ui-spacing-1, 4px);
  background: none; border: none; cursor: pointer; color: inherit; line-height: 1;
}
.ui-treelist-toggle--leaf { cursor: default; }
.ui-treelist-toggle-icon {
  display: inline-block;
  transition: transform var(--ui-treelist-toggle-anim) ease;
}
.ui-treelist-toggle--expanded .ui-treelist-toggle-icon { transform: rotate(90deg); }
[dir="rtl"] .ui-treelist-toggle-icon { transform: scaleX(-1); }            /* chevron огледало во RTL */
[dir="rtl"] .ui-treelist-toggle--expanded .ui-treelist-toggle-icon { transform: scaleX(-1) rotate(90deg); }
.ui-treelist-toggle:focus-visible { outline: var(--ui-focus-ring, 2px solid); outline-offset: 1px; }

.ui-treelist-no-data td { text-align: center; padding: var(--ui-spacing-4, 16px); color: var(--ui-color-text-muted); }

.ui-text-left { text-align: start; }
.ui-text-center { text-align: center; }
.ui-text-right { text-align: end; }

@media (prefers-reduced-motion: reduce) {
  .ui-treelist-toggle-icon { transition: none; }
}


/* UiAIPrompt */
/* UiAIPrompt — Фаза 1. Само var(--ui-*) токени (тема 02 е авторитет). Внеси во ui-blazor.css. */
.ui-aiprompt { display:flex; flex-direction:column; gap:var(--ui-gap); position:relative; border:1px solid var(--ui-color-border); border-radius:var(--ui-radius); background:var(--ui-color-base-bg); color:var(--ui-color-text); padding:var(--ui-gap); box-sizing:border-box; }

/* Header / tablist */
.ui-aiprompt-header { display:flex; align-items:center; gap:var(--ui-gap); border-bottom:1px solid var(--ui-color-border); }
.ui-aiprompt-view-button { appearance:none; background:transparent; border:none; border-bottom:2px solid transparent; padding:6px 12px; cursor:pointer; color:var(--ui-color-text); font:inherit; }
.ui-aiprompt-view-button:hover { background:var(--ui-color-base-bg-hover); }
.ui-aiprompt-view-button:focus-visible { outline:2px solid var(--ui-color-primary); outline-offset:-2px; }
.ui-aiprompt-view-button--active { color:var(--ui-color-primary); border-bottom-color:var(--ui-color-primary); font-weight:600; }

/* Content / панел */
.ui-aiprompt-content { display:flex; flex-direction:column; min-height:0; }
.ui-aiprompt-view { display:flex; flex-direction:column; gap:var(--ui-gap); padding:var(--ui-gap) 0; }
.ui-aiprompt-view:focus-visible { outline:2px solid var(--ui-color-primary); outline-offset:2px; }

/* Suggestions (chips) */
.ui-aiprompt-suggestions { display:flex; flex-wrap:wrap; gap:var(--ui-gap); }
.ui-aiprompt-suggestion { appearance:none; cursor:pointer; font:inherit; padding:4px 10px; border-radius:999px; border:1px solid var(--ui-color-border); background:var(--ui-color-base-bg-hover); color:var(--ui-color-text); }
.ui-aiprompt-suggestion:hover { border-color:var(--ui-color-primary); }
.ui-aiprompt-suggestion:focus-visible { outline:2px solid var(--ui-color-primary); outline-offset:1px; }

/* Input + actions */
.ui-aiprompt-input-wrap { display:flex; gap:var(--ui-gap); align-items:flex-start; }
.ui-aiprompt-textarea { flex:1 1 auto; width:100%; }
.ui-aiprompt-actions { display:flex; justify-content:flex-end; gap:var(--ui-gap); }

/* Output картички */
.ui-aiprompt-output { display:flex; flex-direction:column; gap:4px; padding:10px 12px; border:1px solid var(--ui-color-border); border-radius:var(--ui-radius); background:var(--ui-color-base-bg); max-height:24rem; overflow-y:auto; }
.ui-aiprompt-output:focus-visible { outline:2px solid var(--ui-color-primary); outline-offset:1px; }
.ui-aiprompt-output-title { font-weight:600; }
.ui-aiprompt-output-title:empty { display:none; }
.ui-aiprompt-output-text { white-space:pre-wrap; word-break:break-word; }
.ui-aiprompt-no-output { padding:16px; text-align:center; color:var(--ui-color-disabled); }

/* Loader overlay (само Output додека генерира) */
.ui-aiprompt-loader { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; gap:8px; background:var(--ui-color-base-bg); opacity:.85; z-index:var(--ui-z-overlay); border-radius:var(--ui-radius); }
.ui-aiprompt-loader-icon { display:inline-block; width:18px; height:18px; animation:ui-btn-spin .6s linear infinite; }
.ui-reduced-motion .ui-aiprompt-loader-icon { animation:none; }

/* RTL: chevron-и во command tree (Ф3) преку .ui-icon-directional (веќе глобално). */


/* UiChat */
/* UiChat — Ф1 (врати во ui-blazor.css; НЕ е запишано таму) */
.ui-chat { display: flex; flex-direction: column; min-height: 0; height: 100%; font-family: var(--ui-font); color: var(--ui-color-text); background: var(--ui-color-base-bg); border: 1px solid var(--ui-color-border); border-radius: var(--ui-radius); overflow: hidden; }
.ui-chat--disabled { opacity: .6; pointer-events: none; }
.ui-chat-header, .ui-chat-footer { padding: var(--ui-gap); border-bottom: 1px solid var(--ui-color-border); }
.ui-chat-footer { border-bottom: 0; border-top: 1px solid var(--ui-color-border); }
.ui-chat-message-list { flex: 1 1 auto; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: var(--ui-gap); padding: var(--ui-gap); }
.ui-chat-date-separator { align-self: center; font-size: .75rem; color: var(--ui-color-disabled); padding: .125rem .5rem; }
.ui-chat-message-group { display: flex; gap: .5rem; max-width: 80%; }
.ui-chat-message-group--other { align-self: flex-start; }
.ui-chat-message-group--own { align-self: flex-end; flex-direction: row-reverse; }
.ui-chat-avatar { flex: 0 0 auto; }
.ui-chat-group-body { display: flex; flex-direction: column; gap: .25rem; min-width: 0; }
.ui-chat-message-group--own .ui-chat-group-body { align-items: flex-end; }
.ui-chat-group-header { display: flex; gap: .5rem; align-items: baseline; font-size: .8rem; }
.ui-chat-group-author { font-weight: 600; }
.ui-chat-group-time { color: var(--ui-color-disabled); font-size: .72rem; }
.ui-chat-message { display: flex; flex-direction: column; }
.ui-chat-bubble { padding: .375rem .625rem; background: var(--ui-color-base-bg-hover); border-radius: var(--ui-radius); white-space: pre-wrap; word-break: break-word; }
.ui-chat--flat .ui-chat-bubble { padding: .125rem 0; background: transparent; border-radius: 0; }
.ui-chat-message-group--own .ui-chat-bubble { background: var(--ui-color-primary); color: var(--ui-color-text-on-primary); }
.ui-chat-message-meta { display: flex; gap: .375rem; font-size: .7rem; color: var(--ui-color-disabled); }
.ui-chat-message-group--own .ui-chat-message-meta { justify-content: flex-end; }
.ui-chat-empty { margin: auto; color: var(--ui-color-disabled); text-align: center; }
.ui-chat-composer { display: flex; gap: .5rem; align-items: flex-end; padding: var(--ui-gap); border-top: 1px solid var(--ui-color-border); }
.ui-chat-input { flex: 1 1 auto; resize: vertical; min-height: var(--ui-control-height-md); }
.ui-chat-send { flex: 0 0 auto; }


/* UiPivotGrid */
/* UiPivotGrid — Фаза 1. Само var(--ui-*) токени; локални vars --ui-pg-*. НЕ пишувај во ui-blazor.css. */
.ui-pivotgrid { display: block; position: relative; overflow: auto; border: 1px solid var(--ui-color-border); background: var(--ui-color-surface, var(--ui-color-base)); color: var(--ui-color-text); --ui-pg-rowhdr-w: 200px; --ui-pg-col-w: 120px; }

/* Четири-квадрантен CSS grid: corner | col-headers / row-headers | data */
.ui-pivotgrid-layout { display: grid; grid-template-columns: var(--ui-pg-rowhdr-w) 1fr; grid-template-rows: auto 1fr; }

/* Квадрант 1 — corner (sticky по двете оски) */
.ui-pivotgrid-corner { position: sticky; top: 0; left: 0; z-index: calc(var(--ui-z-sticky) + 1); background: var(--ui-color-base); border-right: 1px solid var(--ui-color-border); border-bottom: 1px solid var(--ui-color-border); }

/* Квадрант 2 — column headers (sticky горе) */
.ui-pivotgrid-col-headers { position: sticky; top: 0; z-index: var(--ui-z-sticky); background: var(--ui-color-base); border-bottom: 1px solid var(--ui-color-border); }
.ui-pivotgrid-col-header-row { display: grid; grid-auto-flow: column; grid-auto-columns: var(--ui-pg-col-w); }
.ui-pivotgrid-measure-row { grid-auto-columns: var(--ui-pg-col-w); }
.ui-pivotgrid-col-header,
.ui-pivotgrid-measure-header { padding: 6px 8px; font-weight: 600; text-align: end; border-right: 1px solid var(--ui-color-border); white-space: nowrap; }

/* Квадрант 3 — row headers (sticky лево; RTL: десно) */
.ui-pivotgrid-row-headers { position: sticky; left: 0; z-index: var(--ui-z-sticky); background: var(--ui-color-base); border-right: 1px solid var(--ui-color-border); }
[dir="rtl"] .ui-pivotgrid-row-headers { left: auto; right: 0; }
.ui-pivotgrid-row-header { display: flex; align-items: center; gap: 4px; height: var(--ui-row-height, var(--ui-control-height, 36px)); padding: 0 8px; border-bottom: 1px solid var(--ui-color-border); white-space: nowrap; }

/* Квадрант 4 — data */
.ui-pivotgrid-data { min-width: 0; }
.ui-pivotgrid-data-row { display: grid; grid-auto-flow: column; grid-auto-columns: var(--ui-pg-col-w); border-bottom: 1px solid var(--ui-color-border); }
.ui-pivotgrid-cell { height: var(--ui-row-height, var(--ui-control-height, 36px)); display: flex; align-items: center; justify-content: flex-end; padding: 0 8px; border-right: 1px solid var(--ui-color-border); font-variant-numeric: tabular-nums; }
.ui-pivotgrid-cell--null { color: var(--ui-color-muted); }

/* Субтотал / grand-total */
.ui-pivotgrid-total { font-weight: 700; color: var(--ui-color-muted); background: color-mix(in srgb, var(--ui-color-base) 92%, var(--ui-color-border)); }

/* Expander */
.ui-pivotgrid-expander { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; padding: 0; border: 0; background: transparent; color: var(--ui-color-primary); cursor: pointer; border-radius: var(--ui-radius-sm, 2px); }
.ui-pivotgrid-expander:disabled,
.ui-pivotgrid-expander--hidden { visibility: hidden; cursor: default; }

/* Распоред на заглавијата на редовите (§6.x) — compact (default) / outline / tabular.
   Влијае само на приказот на row-headers; агрегатите се непроменети. Тоталите се изземени за да
   не се прегази нивниот сопствен изглед (.ui-pivotgrid-total). */
/* Compact: хиерархискиот индент го дава компонентата (padding-inline-start по ниво); врвното поле благо истакнато. */
.ui-pivotgrid--compact .ui-pivotgrid-row-header[aria-level="1"]:not(.ui-pivotgrid-total) { font-weight: 600; }
/* Outline: родителските заглавија се групни наслови (истакнати + лесна позадина). */
.ui-pivotgrid--outline .ui-pivotgrid-row-header[aria-level="1"]:not(.ui-pivotgrid-total) { font-weight: 700; background: color-mix(in srgb, var(--ui-color-base) 94%, var(--ui-color-border)); }
/* Tabular: рамно — без хиерархиска истакнатост (индентот е 0 од компонентата). */
.ui-pivotgrid--tabular .ui-pivotgrid-row-header:not(.ui-pivotgrid-total) { font-weight: 400; }

/* Sort/filter affordance копчиња во заглавијата (§5.2/§5.6) — терк на .ui-pivotgrid-expander */
.ui-pivotgrid-sort,
.ui-pivotgrid-filter { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 18px; height: 18px; padding: 0; margin: 0; border: 0; background: transparent; color: var(--ui-color-muted); cursor: pointer; border-radius: var(--ui-radius-sm, 2px); font-size: 11px; line-height: 1; vertical-align: middle; }
.ui-pivotgrid-sort:hover,
.ui-pivotgrid-filter:hover { background: var(--ui-color-hover-bg); color: var(--ui-color-primary); }
.ui-pivotgrid-sort:focus-visible,
.ui-pivotgrid-filter:focus-visible { outline: var(--ui-focus-ring); outline-offset: 1px; }

/* Активна насока на сорт (data-pg-sort=asc|desc) → primary; none = дискретно. */
.ui-pivotgrid-sort[data-pg-sort="asc"],
.ui-pivotgrid-sort[data-pg-sort="desc"] { color: var(--ui-color-primary); }
/* Активен филтер (--active / aria-pressed / data-pg-filtered) → истакнат. */
.ui-pivotgrid-filter--active,
.ui-pivotgrid-filter[aria-pressed="true"],
.ui-pivotgrid-filter[data-pg-filtered="true"] { color: var(--ui-color-primary); }

/* Порамнување кон inline-end: row-header е flex (margin auto), col-header е text-align:end (мал отстап). */
.ui-pivotgrid-row-header .ui-pivotgrid-sort,
.ui-pivotgrid-row-header .ui-pivotgrid-filter { margin-inline-start: auto; }
.ui-pivotgrid-row-header .ui-pivotgrid-sort + .ui-pivotgrid-filter { margin-inline-start: 0; }
.ui-pivotgrid-col-header .ui-pivotgrid-sort,
.ui-pivotgrid-col-header .ui-pivotgrid-filter { margin-inline-start: 4px; }

/* Gates: кога фичерот е вклучен affordance копчињата се дискретни додека не се hover/focus/активни. */
.ui-pivotgrid--sortable .ui-pivotgrid-sort,
.ui-pivotgrid--filterable .ui-pivotgrid-filter { opacity: .55; transition: opacity .12s ease; }
.ui-pivotgrid--sortable .ui-pivotgrid-row-header:hover .ui-pivotgrid-sort,
.ui-pivotgrid--sortable .ui-pivotgrid-col-header:hover .ui-pivotgrid-sort,
.ui-pivotgrid--filterable .ui-pivotgrid-row-header:hover .ui-pivotgrid-filter,
.ui-pivotgrid--filterable .ui-pivotgrid-col-header:hover .ui-pivotgrid-filter { opacity: 1; }
.ui-pivotgrid-sort:focus-visible,
.ui-pivotgrid-filter:focus-visible,
.ui-pivotgrid-sort[data-pg-sort="asc"],
.ui-pivotgrid-sort[data-pg-sort="desc"],
.ui-pivotgrid-filter--active { opacity: 1; }

/* Празна состојба */
.ui-pivotgrid-empty { padding: 24px; text-align: center; color: var(--ui-color-muted); }


/* UiFileManager */
/* ── UiFileManager (Ф1) ── */
.ui-filemanager {
  /* Нови компонентни варијабли (§9.3) */
  --ui-filemanager-tree-width: 240px;
  --ui-filemanager-row-height: var(--ui-control-height-md);
  display: flex;
  flex-direction: column;
  border: 1px solid var(--ui-color-border);
  border-radius: var(--ui-radius);
  background: var(--ui-color-base-bg);
  color: var(--ui-color-text);
  font-family: var(--ui-font);
  overflow: hidden;
}

/* Toolbar */
.ui-filemanager-toolbar {
  display: flex;
  align-items: center;
  gap: var(--ui-gap);
  padding: var(--ui-gap);
  border-bottom: 1px solid var(--ui-color-border);
}
.ui-filemanager-tool {
  height: var(--ui-control-height-sm);
  padding: 0 calc(var(--ui-gap) * 2);
  border: 1px solid var(--ui-color-border);
  border-radius: var(--ui-radius);
  background: transparent;
  color: var(--ui-color-text);
  cursor: pointer;
}
.ui-filemanager-tool:hover { background: var(--ui-color-base-bg-hover); }
.ui-filemanager-tool--active {
  background: var(--ui-color-primary);
  color: var(--ui-color-text-on-primary);
  border-color: var(--ui-color-primary);
}

/* Breadcrumb */
.ui-filemanager-breadcrumb { padding: var(--ui-gap); border-bottom: 1px solid var(--ui-color-border); }
.ui-filemanager-breadcrumb-list { display: flex; flex-wrap: wrap; gap: 2px; margin: 0; padding: 0; list-style: none; }
.ui-filemanager-breadcrumb-item { display: flex; align-items: center; }
.ui-filemanager-breadcrumb-item:not(:first-child)::before { content: "/"; padding: 0 4px; color: var(--ui-color-disabled); }
.ui-filemanager-breadcrumb-link {
  border: 0; background: transparent; padding: 2px 4px; border-radius: var(--ui-radius);
  color: var(--ui-color-primary); cursor: pointer; font: inherit;
}
.ui-filemanager-breadcrumb-link[aria-current="page"] { color: var(--ui-color-text); font-weight: 600; cursor: default; }

/* Body: tree + content */
.ui-filemanager-splitter { display: flex; flex: 1 1 auto; min-height: 0; }
.ui-filemanager-navigation {
  flex: 0 0 var(--ui-filemanager-tree-width);
  border-right: 1px solid var(--ui-color-border);
  overflow: auto; padding: var(--ui-gap);
}
.ui-filemanager-content { flex: 1 1 auto; overflow: auto; position: relative; }
.ui-filemanager-content:focus-visible { outline: 2px solid var(--ui-color-primary); outline-offset: -2px; }

/* Grid */
.ui-filemanager-grid { width: 100%; border-collapse: collapse; }
.ui-filemanager-grid-header th {
  position: sticky; top: 0; z-index: var(--ui-z-sticky);
  text-align: left; padding: var(--ui-gap);
  background: var(--ui-color-base-bg); border-bottom: 1px solid var(--ui-color-border);
  font-weight: 600;
}
.ui-filemanager-grid-row { height: var(--ui-filemanager-row-height); cursor: default; }
.ui-filemanager-grid-row:hover { background: var(--ui-color-base-bg-hover); }
.ui-filemanager-grid-row td { padding: 0 var(--ui-gap); border-bottom: 1px solid var(--ui-color-border); }
.ui-filemanager-grid-row--folder .ui-filemanager-name { font-weight: 500; }
.ui-filemanager-cell--name { display: flex; align-items: center; gap: var(--ui-gap); cursor: pointer; }
.ui-filemanager-icon { display: inline-flex; }
.ui-filemanager-col--size, .ui-filemanager-col--modified, .ui-filemanager-col--type { width: 12rem; }

/* Empty state */
.ui-filemanager-no-data { padding: calc(var(--ui-gap) * 4); text-align: center; color: var(--ui-color-disabled); }


/* UiDockManager */
/* ── UiDockManager (Ф1: статичен docked распоред) ─────────────────────────── */
.ui-dock {
  --ui-dock-splitter-size: 6px;   /* fallback; се override-ира инлајн од SplitterSize */
  --ui-dock-min-pane: 40px;
  --ui-dock-min-height: 240px;
  position: relative;
  overflow: hidden;
  display: flex;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  min-height: var(--ui-dock-min-height); /* §7 #20 fallback кога нема Height */
  font: 14px var(--ui-font);
  color: var(--ui-color-text);
  background: var(--ui-color-base-bg);
  border: 1px solid var(--ui-color-border);
  border-radius: var(--ui-radius);
}
.ui-dock__docked { flex: 1 1 auto; display: flex; min-width: 0; min-height: 0; }
.ui-dock--empty .ui-dock__docked { align-items: center; justify-content: center; }
.ui-dock__empty-text { color: var(--ui-color-text); opacity: .6; padding: 16px; }

/* ── Split ── */
.ui-dock__split { flex: 1 1 auto; min-width: 0; min-height: 0; }
.ui-dock__split-item {
  min-width: var(--ui-dock-min-pane);
  min-height: var(--ui-dock-min-pane);
  display: flex; overflow: hidden;
}
.ui-dock__split-item > * { flex: 1 1 auto; min-width: 0; min-height: 0; }

/* ── Splitter-бар (Ф1: статичен; интерактивен resize е Ф2+) ── */
.ui-dock__splitter { flex: 0 0 var(--ui-dock-splitter-size); background: var(--ui-color-border); }
.ui-dock__splitter--horizontal { cursor: col-resize; }
.ui-dock__splitter--vertical { cursor: row-resize; }

/* ── TabGroup ── */
.ui-dock__tabgroup { flex: 1 1 auto; display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.ui-dock__tabstrip {
  display: flex; flex: 0 0 auto; gap: 2px;
  background: var(--ui-color-base-bg); border-bottom: 1px solid var(--ui-color-border);
}
.ui-dock__tab {
  appearance: none; border: none; cursor: pointer;
  padding: 6px 12px; font: 13px var(--ui-font);
  background: transparent; color: var(--ui-color-text);
  border-bottom: 2px solid transparent;
}
.ui-dock__tab:hover { background: var(--ui-color-base-bg-hover); }
.ui-dock__tab--active { border-bottom-color: var(--ui-color-primary); font-weight: 600; }
.ui-dock__tab:focus-visible { outline: 2px solid var(--ui-color-primary); outline-offset: -2px; }
.ui-dock__tabpanel { flex: 1 1 auto; overflow: auto; min-height: 0; }

/* ── Content pane ── */
.ui-dock__pane { flex: 1 1 auto; display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.ui-dock__pane-header {
  flex: 0 0 auto; display: flex; align-items: center; gap: 8px;
  padding: 4px 8px; font: 600 13px var(--ui-font);
  background: var(--ui-color-base-bg); border-bottom: 1px solid var(--ui-color-border);
}
.ui-dock__pane-title { flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ui-dock__pane-actions { flex: 0 0 auto; display: inline-flex; gap: 2px; }
.ui-dock__pane-close {
  appearance: none; border: none; cursor: pointer;
  width: 20px; height: 20px; line-height: 18px; padding: 0;
  border-radius: var(--ui-radius);
  background: transparent; color: var(--ui-color-text);
}
.ui-dock__pane-close:hover { background: var(--ui-color-base-bg-hover); }
.ui-dock__pane-close:focus-visible { outline: 2px solid var(--ui-color-primary); outline-offset: 1px; }
.ui-dock__pane-content { flex: 1 1 auto; overflow: auto; min-height: 0; padding: 8px; }

/* RTL (Ф2+ за splitter/sidebar огледување); основната flex-насока веќе го почитува dir. */
[dir="rtl"] .ui-dock__pane-title { text-align: right; }


/* UiSpreadsheet */
/* ── UiSpreadsheet (Ф1: мрежа + заглавија + селекција + formula/sheets bar) ──────── */
.ui-spreadsheet {
  display: flex;
  flex-direction: column;
  min-height: 0;
  border: 1px solid var(--ui-color-border);
  border-radius: var(--ui-radius);
  background: var(--ui-color-base-bg);
  color: var(--ui-color-text);
  font: 13px var(--ui-font);
  overflow: hidden;
}

/* Formula bar */
.ui-spreadsheet__formula-bar {
  display: flex;
  align-items: center;
  gap: var(--ui-gap);
  flex: 0 0 auto;
  padding: 2px var(--ui-gap);
  border-bottom: 1px solid var(--ui-color-border);
  background: var(--ui-color-base-bg);
}
.ui-spreadsheet__name-box {
  flex: 0 0 auto;
  min-width: 3.5rem;
  font-weight: 600;
  padding: 2px 6px;
  border: 1px solid var(--ui-color-border);
  border-radius: var(--ui-radius);
  text-align: center;
}
.ui-spreadsheet__formula-value {
  flex: 1 1 auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding: 2px 6px;
}

/* Grid */
.ui-spreadsheet__grid {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  position: relative;
}
.ui-spreadsheet__row {
  display: flex;
  flex-direction: row;
}
.ui-spreadsheet__header-row {
  position: sticky;
  top: 0;
  z-index: var(--ui-z-sticky);
}

/* Headers / corner */
.ui-spreadsheet__corner,
.ui-spreadsheet__header {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  background: var(--ui-color-base-bg-hover);
  border-right: 1px solid var(--ui-color-border);
  border-bottom: 1px solid var(--ui-color-border);
  font-weight: 600;
  user-select: none;
}
.ui-spreadsheet__corner,
.ui-spreadsheet__header--row {
  position: sticky;
  left: 0;
  z-index: 1;
}
.ui-spreadsheet__header--col {
  position: sticky;
  top: 0;
}

/* Cells */
.ui-spreadsheet__cell {
  flex: 0 0 auto;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  padding: 0 4px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  border-right: 1px solid var(--ui-color-border);
  border-bottom: 1px solid var(--ui-color-border);
  cursor: cell;
}
.ui-spreadsheet--no-gridlines .ui-spreadsheet__cell {
  border-right-color: transparent;
  border-bottom-color: transparent;
}
.ui-spreadsheet__cell--active {
  outline: 2px solid var(--ui-color-primary);
  outline-offset: -2px;
}
.ui-spreadsheet__editor {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  border: 0;
  padding: 0 4px;
  font: inherit;
  color: inherit;
  background: var(--ui-color-base-bg);
  outline: 2px solid var(--ui-color-primary);
  outline-offset: -2px;
}

/* Sheets bar */
.ui-spreadsheet__sheets-bar {
  flex: 0 0 auto;
  display: flex;
  gap: 2px;
  padding: 2px var(--ui-gap);
  border-top: 1px solid var(--ui-color-border);
  background: var(--ui-color-base-bg);
}
.ui-spreadsheet__tab {
  appearance: none;
  border: 1px solid transparent;
  border-radius: var(--ui-radius) var(--ui-radius) 0 0;
  padding: 2px 12px;
  font: inherit;
  background: transparent;
  color: var(--ui-color-text);
  cursor: pointer;
}
.ui-spreadsheet__tab:hover { background: var(--ui-color-base-bg-hover); }
.ui-spreadsheet__tab--active {
  background: var(--ui-color-base-bg-hover);
  border-color: var(--ui-color-border);
  font-weight: 600;
}
.ui-spreadsheet__tab:focus-visible { outline: 2px solid var(--ui-color-primary); outline-offset: -2px; }


/* Утилити */
.ui-sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}


/* ═══ Патека B: состојби + a11y (централно споено) ═══ */



/* ═══ Патека B: состојби + a11y (централно споено) ═══ */
/* === Патека B: UiBadge === */
/* ── Значка: пристапност + допирни визуелни празнини (§098) ──
   Додатоци за централно спојување во ui-blazor.css. Само ADDITIVE правила —
   НЕ ги редефинираат постојните .ui-badge--{primary|success|warning|danger|pill}. */

/* Експлицитна base-боја класа (досега ја немаше — default паѓаше на голата .ui-badge). */
.ui-badge--base {
  background: var(--ui-color-base-bg);
  color: var(--ui-color-text);
}

/* Декоративна значка (Decorative=true → aria-hidden): без семантика, чисто визуелна. */
.ui-badge[aria-hidden="true"] { pointer-events: none; }

/* Windows High Contrast / forced-colors: значката мора да остане видлива
   кога авторските бои се игнорираат (WCAG 1.4.1 — бојата не е единствен носител). */
@media (forced-colors: active) {
  .ui-badge {
    border: 1px solid CanvasText;
    forced-color-adjust: none;
    background: Canvas;
    color: CanvasText;
  }
}

/* Намалено движење: значка нема анимации, но безбедносна заштита за идни преоди. */
@media (prefers-reduced-motion: reduce) {
  .ui-badge { transition: none; }
}

/* === Патека B: UiChip === */
/* ── Чип: состојби (Ф3 a11y/визуелна) — дополнуваат постоечките .ui-chip правила ── */
.ui-chip { transition: background .15s, border-color .15s, box-shadow .15s; }
.ui-chip:hover { background: var(--ui-color-base-bg-hover); }
.ui-chip:focus-visible { outline: var(--ui-focus-ring, 2px solid var(--ui-color-primary)); outline-offset: 1px; }
.ui-chip--selected:hover { background: var(--ui-color-primary-hover); }
.ui-chip--disabled { opacity: .55; cursor: not-allowed; pointer-events: none; }
.ui-chip--disabled:hover { background: var(--ui-color-base-bg); }
.ui-chip__remove:focus-visible { outline: var(--ui-focus-ring, 2px solid var(--ui-color-primary)); outline-offset: 1px; }
.ui-chip__remove:disabled { cursor: not-allowed; opacity: .6; }
.ui-chip__remove:disabled:hover { background: transparent; }

/* === Патека B: UiAvatar === */
/* ── Аватар: состојби + пристапност (§101 Ф3) ──
   Се спојува по постоечките .ui-avatar правила во ui-blazor.css.
   Само --ui-* токени, ui- префикс, постоечки класи. Без нови класи од .cs. */

/* Токен за големина (спец: „--ui-avatar-size") — Width/Height и понатаму имаат предност. */
.ui-avatar { --ui-avatar-size: 36px; }
.ui-avatar--sm { --ui-avatar-size: 28px; }
.ui-avatar--lg { --ui-avatar-size: 48px; }

/* Видлив фокус-индикатор — кога аватарот е направен фокусибилен
   (TabIndex/role=button) или е во фокусибилна обвивка (button/a). Спец: Пристапност. */
.ui-avatar:focus-visible,
a:focus-visible > .ui-avatar,
button:focus-visible > .ui-avatar {
  outline: 2px solid var(--ui-color-primary);
  outline-offset: 2px;
}
/* Отстрани го default-ниот браузерски outline кога постои focus-visible слој. */
.ui-avatar:focus:not(:focus-visible) { outline: none; }

/* Hover — суптилен сигнал само во интерактивен контекст (кликабилен аватар). */
.ui-avatar[tabindex]:not([tabindex="-1"]):hover,
.ui-avatar[role="button"]:hover,
a:hover > .ui-avatar,
button:hover > .ui-avatar {
  cursor: pointer;
  filter: brightness(0.95);
}

/* Active (притиснато) — само интерактивен контекст. */
.ui-avatar[tabindex]:not([tabindex="-1"]):active,
.ui-avatar[role="button"]:active,
a:active > .ui-avatar,
button:active > .ui-avatar {
  filter: brightness(0.9);
}

/* Disabled — преку aria-disabled (без нова класа/параметар); и наследено од оневозможена обвивка. */
.ui-avatar[aria-disabled="true"],
:disabled > .ui-avatar,
[aria-disabled="true"] > .ui-avatar {
  opacity: 0.55;
  cursor: not-allowed;
  pointer-events: none;
}

/* High-contrast / forced-colors — задржи видлив фокус прстен. */
@media (forced-colors: active) {
  .ui-avatar:focus-visible,
  a:focus-visible > .ui-avatar,
  button:focus-visible > .ui-avatar { outline-color: Highlight; }
}

/* Почитувај намалена анимација — без транзиции на филтер за чувствителни корисници. */
@media (prefers-reduced-motion: reduce) {
  .ui-avatar { transition: none; }
}

/* === Патека B: UiSwitch === */
/* ── UiSwitch: состојби (hover / focus-visible / active / readonly) ── */

/* Hover: track-от добива малку посилен контраст; on-state кон primary-hover */
.ui-switch:hover:not(.ui-switch--disabled):not(.ui-switch--readonly) .ui-switch__track {
  background: var(--ui-color-base-bg-hover);
}
.ui-switch--on:hover:not(.ui-switch--disabled):not(.ui-switch--readonly) .ui-switch__track {
  background: var(--ui-color-primary-hover);
}

/* Focus-visible: видлив фокус-прстен (WCAG AA) — само при тастатурен фокус */
.ui-switch:focus-visible {
  outline: var(--ui-focus-ring, 2px solid var(--ui-color-primary));
  outline-offset: 2px;
}
.ui-switch:focus { outline: none; }
.ui-switch:focus-visible { outline: var(--ui-focus-ring, 2px solid var(--ui-color-primary)); }

/* Active (press): благо собирање на тркалцето за тактилен feedback */
.ui-switch:active:not(.ui-switch--disabled):not(.ui-switch--readonly) .ui-switch__thumb {
  width: 20px;
}

/* ReadOnly: прикажува состојба, но сигнализира дека не може да се менува */
.ui-switch--readonly { cursor: default; }
.ui-switch--readonly .ui-switch__track { opacity: .7; }

/* === Патека B: UiCard === */
/* UiCard — состојби за интерактивна (клик на цела картичка) варијанта.
   Презентациската картичка (.ui-card без --clickable) останува непроменета. */

/* Клик-картичка: покажувач, мек премин, фокус афорданса */
.ui-card--clickable { cursor: pointer; transition: box-shadow var(--ui-anim-duration, .2s), border-color var(--ui-anim-duration, .2s), background var(--ui-anim-duration, .2s); }

/* Hover — благо подигање/осенчување и истакнат раб */
.ui-card--clickable:hover { border-color: var(--ui-color-primary); box-shadow: 0 2px 8px rgba(0,0,0,.12); }

/* Active (притиснато) — поништи го подигањето за тактилен фидбек */
.ui-card--clickable:active { box-shadow: 0 1px 3px rgba(0,0,0,.14); }

/* Focus-visible — видлив фокус прстен само при тастатурна навигација */
.ui-card--clickable:focus-visible { outline: var(--ui-focus-ring, 2px solid var(--ui-color-primary)); outline-offset: 2px; }

/* Selected — истакнат раб што го означува избраниот елемент */
.ui-card--selected { border-color: var(--ui-color-primary); box-shadow: inset 0 0 0 1px var(--ui-color-primary); }

/* Disabled — пригушен изглед, без покажувач и без интеракција */
.ui-card--disabled { opacity: .6; cursor: default; pointer-events: none; }
.ui-card--disabled:hover { border-color: var(--ui-color-border); box-shadow: none; }

/* === Патека B: UiToggleButton === */
/* ── Преклопно копче (ToggleButton, §014) ── */
/* Маркер-класа за toggle; визуелните состојби се над постоечките .ui-btn правила, */
/* скоупирани на .ui-toggle за да не се газат генеричките .ui-btn стилови (други агенти). */
.ui-toggle { position: relative; }

/* Избрана (on) состојба: јасен „pressed" изглед наместо само inset прстен. */
.ui-toggle.ui-btn--active {
  background: var(--ui-color-primary);
  color: var(--ui-color-text-on-primary);
  border-color: transparent;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, .22);
}
/* Hover врз избраната состојба — посебна повратна информација. */
.ui-toggle.ui-btn--active:hover {
  background: var(--ui-color-primary-hover);
}
/* Outline/flat избран toggle: задржи проѕирна позадина, истакни преку раб/боја. */
.ui-toggle.ui-btn--outline.ui-btn--active,
.ui-toggle.ui-btn--flat.ui-btn--active {
  background: transparent;
  color: var(--ui-color-primary);
  border-color: var(--ui-color-primary);
  box-shadow: inset 0 0 0 1px var(--ui-color-primary);
}
.ui-toggle.ui-btn--outline.ui-btn--active:hover,
.ui-toggle.ui-btn--flat.ui-btn--active:hover {
  background: var(--ui-color-base-bg-hover);
}
/* Видлив фокусен индикатор и врз избраната состојба (WCAG focus-visible). */
.ui-toggle:focus-visible {
  outline: 2px solid var(--ui-color-primary);
  outline-offset: 2px;
}
/* Оневозможен + избран: задржи доследно затемнување без двојна боја. */
.ui-toggle.ui-btn--active.ui-btn--disabled,
.ui-toggle.ui-btn--active[disabled],
.ui-toggle.ui-btn--active[aria-disabled="true"] {
  box-shadow: none;
}

/* === Патека B: UiBreadcrumb === */
/* ── UiBreadcrumb: состојби + пристапност (§017) ── */
/* hover на линк */
.ui-breadcrumb__item a:hover { color:var(--ui-color-primary-hover); text-decoration:underline; }

/* видлив фокус-индикатор (focus-visible) */
.ui-breadcrumb__link:focus-visible {
  outline:2px solid var(--ui-color-primary);
  outline-offset:2px;
  border-radius:var(--ui-radius-sm);
}

/* тековна (последна) ставка — aria-current="page" */
.ui-breadcrumb__item--current .ui-breadcrumb__text,
.ui-breadcrumb__link[aria-current="page"] {
  color:var(--ui-color-text);
  font-weight:600;
}
.ui-breadcrumb__link[aria-current="page"] { text-decoration:none; cursor:default; }

/* обичен (не-линк) текст */
.ui-breadcrumb__text { color:var(--ui-color-text); }

/* оневозможена ставка — aria-disabled="true" */
.ui-breadcrumb__text--disabled,
.ui-breadcrumb__item [aria-disabled="true"] {
  color:var(--ui-color-disabled);
  opacity:.6;
  cursor:not-allowed;
  pointer-events:none;
}

/* === Патека B: UiRating === */
/* ── UiRating: состојби + a11y (Ф3) ── */

/* hover-преглед: целата група посветлува, осветлената ѕвезда добива fill-боја.
   :hover на група + :hover на ѕвезда (и претходните преку sibling) за класичен rating UX */
.ui-rating:not(.ui-rating--disabled):not(.ui-rating--readonly) .ui-rating__star:hover {
  color: #f5b301;
  cursor: pointer;
}

/* active (притисната ѕвезда) */
.ui-rating:not(.ui-rating--disabled):not(.ui-rating--readonly) .ui-rating__star:active {
  transform: scale(.92);
}

/* видлив фокус-индикатор (WCAG AA) — фокусот живее на групата (roving tabindex) */
.ui-rating:focus-visible {
  outline: 2px solid var(--ui-color-primary);
  outline-offset: 2px;
  border-radius: var(--ui-radius);
}
/* поединечна ѕвезда сепак може да добие фокус програмски → видлив прстен */
.ui-rating__star:focus-visible {
  outline: 2px solid var(--ui-color-primary);
  outline-offset: 1px;
  border-radius: var(--ui-radius);
}

/* disabled — дотука класата .ui-rating--disabled немаше CSS правило (празнина) */
.ui-rating--disabled { opacity: .55; }
.ui-rating--disabled .ui-rating__star {
  cursor: not-allowed;
  color: var(--ui-color-disabled);
}
.ui-rating--disabled .ui-rating__star--filled { color: var(--ui-color-disabled); }

/* readonly — приказ без интеракција (нема hover/pointer) */
.ui-rating--readonly .ui-rating__star { cursor: default; }

/* invalid — невалидна состојба (EditContext) */
.ui-rating--invalid .ui-rating__star { color: var(--ui-color-danger); }
.ui-rating--invalid:focus-visible { outline-color: var(--ui-color-danger); }

/* === Патека B: UiLoader === */
/* UiLoader — почитување на prefers-reduced-motion (спец §093, WCAG 2.2.2/2.3.x).
   Засебен @media блок, адитивен — не се коси со постоечкиот блок во ui-blazor.css.
   Анимацијата драстично се забавува (наместо целосно паузирање) за да остане видлив
   статусен сигнал без вртоглаво трепкање. Користи постоечка .ui-loader класа. */
@media (prefers-reduced-motion: reduce) {
  .ui-loader { animation-duration: 2.4s; }
}

/* === Патека B: UiSkeleton === */
/* ── UiSkeleton: theme tokens + reduced-motion (§097 Стилизирање + Пристапност) ── */
/* Theme tokens — да не се хардкодираат бои (CLAUDE.md: стилови преку --ui-*). */
/* Постоечкото .ui-skeleton правило во ui-blazor.css може да ги користи овие со fallback:
   background:linear-gradient(90deg, var(--ui-skeleton-bg,#e8eaed) 25%, var(--ui-skeleton-wave-bg,#f3f4f6) 37%, var(--ui-skeleton-bg,#e8eaed) 63%);
   border-radius:var(--ui-skeleton-border-radius,4px); */
:root {
  --ui-skeleton-bg: #e8eaed;
  --ui-skeleton-wave-bg: #f3f4f6;
  --ui-skeleton-border-radius: 4px;
  --ui-skeleton-pulse-opacity: 0.55;
}

/* Dark тема — token override (наследува од .ui-skeleton без дуплирање структура). */
.ui-theme-dark {
  --ui-skeleton-bg: #2a2d31;
  --ui-skeleton-wave-bg: #3a3e44;
}

/* A11y: почитување на prefers-reduced-motion (WCAG 2.1 SC 2.3.3).
   Глобалниот блок во ui-blazor.css НЕ го таргетира .ui-skeleton — тука се додава експлицитно. */
@media (prefers-reduced-motion: reduce) {
  .ui-skeleton {
    animation: none;
    background: var(--ui-skeleton-bg, #e8eaed);
  }
}

/* === Патека B: UiProgressBar === */
/* UiProgressBar — визуелна/a11y дополна (§095). Користи постоечки класи + --ui-* токени.
   ВАЖНО: ProgressBar е презентациска, НЕфокусибилна компонента (спец §126–133, §141),
   па НЕ се додаваат hover/focus/active/disabled/selected состојби — тоа би било спротивно
   на спецификацијата. Додадени се само состојби што спецификацијата реално ги бара. */

/* Етикета: класата .ui-progressbar__label се рендерира но беше нестилизирана. */
.ui-progressbar__label {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--ui-font);
  font-size: 11px;
  line-height: 1;
  font-weight: 600;
  color: var(--ui-color-text);
  pointer-events: none;
}

/* Reduced-motion: запри ја indeterminate анимацијата и width транзицијата
   за корисници што бараат намалено движење (WCAG 2.3.3; спец §139 — WCAG AA). */
@media (prefers-reduced-motion: reduce) {
  .ui-progressbar__fill {
    transition: none;
  }
  .ui-progressbar--indeterminate .ui-progressbar__fill {
    animation: none;
    width: 100%;
  }
}

/* === Патека B: UiChunkProgressBar === */
/* ── UiChunkProgressBar: состојби (disabled, indeterminate) ── */

/* Disabled визуелна состојба (Enabled=false → .ui-chunk-progress--disabled + aria-disabled="true") */
.ui-chunk-progress--disabled,
.ui-chunk-progress[aria-disabled="true"] {
  opacity: .55;
  cursor: not-allowed;
}

/* Indeterminate: сегментите се игнорираат (нема filled), наместо тоа анимиран „светлосен бран" поминува низ лентата */
.ui-chunk-progress--indeterminate .ui-chunk-progress__chunk {
  background: var(--ui-color-base-bg);
  animation: ui-chunk-indet 1.2s ease-in-out infinite;
}
.ui-chunk-progress--indeterminate .ui-chunk-progress__chunk:nth-child(2) { animation-delay: .1s; }
.ui-chunk-progress--indeterminate .ui-chunk-progress__chunk:nth-child(3) { animation-delay: .2s; }
.ui-chunk-progress--indeterminate .ui-chunk-progress__chunk:nth-child(4) { animation-delay: .3s; }
.ui-chunk-progress--indeterminate .ui-chunk-progress__chunk:nth-child(5) { animation-delay: .4s; }
.ui-chunk-progress--indeterminate .ui-chunk-progress__chunk:nth-child(6) { animation-delay: .5s; }
.ui-chunk-progress--indeterminate .ui-chunk-progress__chunk:nth-child(7) { animation-delay: .6s; }
.ui-chunk-progress--indeterminate .ui-chunk-progress__chunk:nth-child(8) { animation-delay: .7s; }
.ui-chunk-progress--indeterminate .ui-chunk-progress__chunk:nth-child(n+9) { animation-delay: .8s; }
@keyframes ui-chunk-indet {
  0%, 100% { background: var(--ui-color-base-bg); }
  50% { background: var(--ui-color-primary); }
}

/* A11y: почитувај prefers-reduced-motion — без анимација, статичен приглушен изглед */
@media (prefers-reduced-motion: reduce) {
  .ui-chunk-progress--indeterminate .ui-chunk-progress__chunk {
    animation: none;
  }
}


/* ═══ Патека B бран 2: состојби + a11y ═══ */
/* === Патека B бран 2: UiTextBox === */
/* ── UiTextBox: состојби (Ф3 a11y/визуелна) ── */
/* hover: суптилен раб кога не е disabled/readonly */
.ui-textbox:not(.ui-textbox--disabled):not(.ui-textbox--readonly) .ui-input:hover {
  border-color: var(--ui-color-primary-hover);
}
/* focus-visible: попрецизен focus ring (само тастатура), надополнува .ui-input:focus */
.ui-textbox .ui-input:focus-visible {
  outline: var(--ui-focus-ring, 2px solid var(--ui-color-primary));
  outline-offset: -1px;
  border-color: var(--ui-color-primary);
}
/* disabled: пригушено, без интеракција */
.ui-textbox--disabled .ui-input,
.ui-textbox .ui-input:disabled {
  color: var(--ui-color-disabled);
  border-color: var(--ui-color-border);
  background: var(--ui-color-surface-2);
  cursor: not-allowed;
}
/* readonly: видливо но „заклучено" — суптилно различно од normal */
.ui-textbox--readonly .ui-input,
.ui-textbox .ui-input:read-only {
  background: var(--ui-color-surface-2);
  cursor: default;
}
/* invalid: opasен раб + match-уван focus ring (исто како ui-rating--invalid) */
.ui-textbox--invalid .ui-input {
  border-color: var(--ui-color-danger, #d32f2f);
}
.ui-textbox--invalid .ui-input:focus-visible {
  outline-color: var(--ui-color-danger, #d32f2f);
}
/* required: визуелен маркер преку aria-required (не зависи од содржина на label) */
.ui-textbox .ui-input[aria-required="true"] {
  /* без визуелна промена по default; маркерот живее на надворешната етикета.
     селекторот е резервиран за теми што сакаат индикатор. */
}

/* === Патека B бран 2: UiTextArea === */
/* ── UiTextArea (§057) — состојби: hover / focus-visible / disabled / readonly / invalid ── */
/* base .ui-textarea + .ui-input:focus веќе постојат; следново е АДИТИВНО, скоупирано на .ui-textarea. */
.ui-textarea:hover:not([disabled]):not([readonly]) { border-color: var(--ui-color-primary); }
.ui-textarea:focus-visible { outline: var(--ui-focus-ring); outline-offset: -1px; border-color: var(--ui-color-primary); }
.ui-textarea--disabled,
.ui-textarea[disabled] { background: var(--ui-color-base-bg-hover); color: var(--ui-color-disabled); border-color: var(--ui-color-border); cursor: not-allowed; resize: none; opacity: .7; }
.ui-textarea--readonly,
.ui-textarea[readonly] { background: var(--ui-color-base-bg-hover); cursor: default; resize: none; }
.ui-textarea--invalid { border-color: var(--ui-color-danger); }
.ui-textarea--invalid:focus-visible { outline-color: var(--ui-color-danger); border-color: var(--ui-color-danger); }

/* === Патека B бран 2: UiNumericTextBox === */
/* ── UiNumericTextBox: состојби + a11y (§054) ── */
/* hover (само кога не е disabled/readonly) */
.ui-numeric:hover:not(:disabled):not([readonly]) { border-color:var(--ui-color-primary); }

/* focus-visible: појасен фокус ринг (тастатура), покрај постоечкиот .ui-input:focus */
.ui-numeric:focus-visible { outline:var(--ui-focus-ring); outline-offset:-1px; border-color:var(--ui-color-primary); }

/* disabled: избледено + not-allowed (класата ui-numeric--disabled веќе се емитува од кодот) */
.ui-numeric:disabled,
.ui-numeric--disabled { background:var(--ui-color-base-bg); color:var(--ui-color-disabled); border-color:var(--ui-color-border); cursor:not-allowed; opacity:.7; }

/* readonly: суптилно различна позадина, без not-allowed (вредноста е читлива) */
.ui-numeric[readonly],
.ui-numeric--readonly { background:var(--ui-color-base-bg); cursor:default; }

/* invalid: црвен раб + фокус ринг во боја на грешка (aria-invalid="true" се поставува од кодот) */
.ui-numeric--invalid,
.ui-numeric[aria-invalid="true"] { border-color:#d23b3b; }
.ui-numeric--invalid:focus,
.ui-numeric--invalid:focus-visible,
.ui-numeric[aria-invalid="true"]:focus-visible { outline-color:#d23b3b; border-color:#d23b3b; }

/* === Патека B бран 2: UiCheckBox === */
/* === Патека B: UiCheckBox === */
/* ── UiCheckBox: состојби (hover / focus-visible / active / checked / indeterminate / readonly / invalid) ──
   Основните правила (.ui-checkbox, .ui-checkbox input, .ui-checkbox--disabled) веќе постојат
   во ui-blazor.css — тука се додаваат САМО состојбите што недостасуваат. Скоупирано на
   .ui-checkbox и нативниот input; --ui-* токени, без хардкодирани бои. */

/* Hover: благо истакнат раб/контраст на нативниот input (само кога е интерактивно) */
.ui-checkbox:hover:not(.ui-checkbox--disabled):not(.ui-checkbox--readonly) input {
  accent-color: var(--ui-color-primary-hover);
}

/* Checked: акцент кон primary (нативниот accent-color веќе важи; ова го осигурува при тема) */
.ui-checkbox--checked input { accent-color: var(--ui-color-primary); }

/* Focus-visible: видлив фокус-прстен околу input-от (WCAG AA) — само при тастатурен фокус */
.ui-checkbox input:focus { outline: none; }
.ui-checkbox input:focus-visible {
  outline: var(--ui-focus-ring, 2px solid var(--ui-color-primary));
  outline-offset: 2px;
  border-radius: 3px;
}

/* Active (press): благ тактилен feedback при притискање */
.ui-checkbox:active:not(.ui-checkbox--disabled):not(.ui-checkbox--readonly) input {
  transform: scale(.92);
}

/* Indeterminate: акцентот останува primary (визуелната „crta" ја црта прелистувачот) */
.ui-checkbox--indeterminate input { accent-color: var(--ui-color-primary); }

/* ReadOnly: прикажува состојба, но сигнализира дека не може да се менува */
.ui-checkbox--readonly { cursor: default; }
.ui-checkbox--readonly input { cursor: default; opacity: .8; }

/* Invalid (EditContext валидација): danger акцент + danger фокус-прстен */
.ui-checkbox--invalid input { accent-color: var(--ui-color-danger); }
.ui-checkbox--invalid input:focus-visible { outline-color: var(--ui-color-danger); }

/* === Патека B бран 2: UiRadioGroup === */
/* ── UiRadioGroup §059 — состојби + a11y (Ф3) ──
   Постоечките правила се НЕ менувани:
   .ui-radio-group { display:inline-flex; flex-direction:column; gap:6px; }
   .ui-radio { display:inline-flex; align-items:center; gap:6px; cursor:pointer; font:14px var(--ui-font); }
   .ui-radio input { accent-color:var(--ui-color-primary); }
   Долунаведените само ги ДОПОЛНУВААТ. */

/* акцент на нативниот input (поексплицитно од општото .ui-radio input) */
.ui-radio__input { accent-color:var(--ui-color-primary); cursor:pointer; }

/* hover — суптилна повратна информација на ставката (нема ефект кога е оневозможено/readonly) */
.ui-radio:hover .ui-radio__label { color:var(--ui-color-text); }

/* focus-visible — WCAG AA фокус-прстен на радио копчето */
.ui-radio__input:focus-visible {
  outline: var(--ui-focus-ring, 2px solid var(--ui-color-primary));
  outline-offset: 2px;
  border-radius: 50%;
}

/* selected — нагласена тековно избрана ставка */
.ui-radio--selected .ui-radio__label { color:var(--ui-color-primary); font-weight:600; }

/* disabled — целата група пригушена, без интеракција */
.ui-radio-group--horizontal { flex-direction:row; flex-wrap:wrap; gap:16px; }
.ui-radio-group--disabled { opacity:.55; cursor:not-allowed; }
.ui-radio-group--disabled .ui-radio,
.ui-radio-group--disabled .ui-radio__input { cursor:not-allowed; }
.ui-radio-group--disabled .ui-radio__label { color:var(--ui-color-disabled); }

/* readonly — видливо, но без менување (промената е блокирана и во .cs) */
.ui-radio-group--readonly .ui-radio,
.ui-radio-group--readonly .ui-radio__input { cursor:default; }

/* invalid — невалидна состојба од EditContext (по терк на .ui-rating--invalid) */
.ui-radio-group--invalid .ui-radio__input { accent-color:var(--ui-color-danger); }
.ui-radio-group--invalid .ui-radio__label { color:var(--ui-color-danger); }
.ui-radio-group--invalid .ui-radio__input:focus-visible { outline-color:var(--ui-color-danger); }

/* === Патека B бран 2: UiSlider === */
/* ── UiSlider — состојби (Ф3 визуелна/a11y) ── */
/* hover: засилен primary accent на рачката/траката. */
.ui-slider:hover:not(.ui-slider--disabled):not(.ui-slider--readonly) { accent-color:var(--ui-color-primary-hover); }

/* active: при притискање/повлекување. */
.ui-slider:active:not(.ui-slider--disabled):not(.ui-slider--readonly) { accent-color:var(--ui-color-primary-hover); }

/* focus-visible: видлив прстен од токенот (само на тастатурен фокус). */
.ui-slider:focus { outline:none; }
.ui-slider:focus-visible { outline:var(--ui-focus-ring); outline-offset:2px; border-radius:var(--ui-radius-sm); }

/* disabled: пригушено и без покажувач. */
.ui-slider--disabled { accent-color:var(--ui-color-disabled); cursor:not-allowed; opacity:.6; }

/* readonly: визуелно неактивно за менување, но фокусибилно/читливо. */
.ui-slider--readonly { accent-color:var(--ui-color-disabled); cursor:default; }

/* invalid: сигнал за грешка (исто како .ui-rating--invalid терк). */
.ui-slider--invalid { accent-color:var(--ui-color-danger); }
.ui-slider--invalid:focus-visible { outline-color:var(--ui-color-danger); }

/* vertical ориентација. */
.ui-slider--vertical { writing-mode:vertical-lr; direction:rtl; width:auto; height:200px; }

/* === Патека B бран 2: UiTooltip === */
/* === UiTooltip §090 — состојби и пристапност (Ф3) === */

/* Фокус-паритет со hover (WCAG 2.1 SC 1.4.13: Content on Hover or Focus).
   Балончето се прикажува и кога активаторот внатре е фокусиран преку тастатура,
   не само на hover. :focus-within го фаќа фокусот на активаторот (копче/линк/поле). */
.ui-tooltip-host:focus-within .ui-tooltip { opacity: 1; }

/* focus-visible паритет: исто прикажување кога фокусот е видлив (keyboard).
   Држи го одвоено за да не зависи од :focus-within ако активаторот е сам хостот. */
.ui-tooltip-host:focus-visible .ui-tooltip,
.ui-tooltip-host:focus-within:focus-visible .ui-tooltip { opacity: 1; }

/* Оневозможен совет: не се прикажува ни на hover ни на focus. */
.ui-tooltip-host--disabled:hover .ui-tooltip,
.ui-tooltip-host--disabled:focus-within .ui-tooltip,
.ui-tooltip-host--disabled:focus-visible .ui-tooltip { opacity: 0; }

/* Поддршка за reduced-motion: исфрли ја transition анимацијата на opacity. */
@media (prefers-reduced-motion: reduce) {
  .ui-tooltip { transition: none; }
}

/* === Патека B бран 2: UiNotification === */
/* §089 UiNotification — состојби на копчето за затворање (hover/focus-visible/active). */
.ui-notification__close { border-radius:var(--ui-radius-sm); padding:0 4px; line-height:1; transition:background .12s, color .12s; }
.ui-notification__close:hover { background:var(--ui-color-base-bg-hover); }
.ui-notification__close:focus-visible { outline:2px solid var(--ui-color-primary); outline-offset:1px; }
.ui-notification__close:active { background:var(--ui-color-base-bg-hover); transform:translateY(1px); }

/* === Патека B бран 2: UiAppBar === */
/* UiAppBar — фокус-видлив прстен (keyboard a11y). Хостот е презентациски и
   нормално не презема фокус; ова важи само ако стане фокусибилен преку TabIndex.
   Интерактивните состојби (hover/active/disabled/selected/readonly/invalid)
   намерно НЕ се на хостот — им припаѓаат на децата (копчиња/врски/менија). */
.ui-appbar:focus-visible {
  outline: var(--ui-focus-ring);
  outline-offset: 2px;
}

/* === Патека B бран 2: UiTimeline === */
/* === UiTimeline — состојби (visual/a11y) — за merge во ui-blazor.css === */

/* Hover на ставка: суптилно нагласување на позадината за подобар affordance/перцепција. */
.ui-timeline__item:hover { background: var(--ui-color-hover-bg); border-radius: var(--ui-radius-sm); }

/* Hover нагласување на точката (маркерот) на оската. */
.ui-timeline__item:hover::before { box-shadow: 0 0 0 3px var(--ui-color-hover-bg); }

/* Focus-visible: видлив фокус-индикатор (WCAG 2.1 AA) кога ставката е фокусирана
   (на пр. кога е tabindex/линк внатре). Користи го канонскиот фокус-прстен. */
.ui-timeline__item:focus-visible {
  outline: var(--ui-focus-ring, 2px solid var(--ui-color-primary));
  outline-offset: 1px;
  border-radius: var(--ui-radius-sm);
}

/* Отстрани го browser default outline кога постои focus-visible слој. */
.ui-timeline__item:focus:not(:focus-visible) { outline: none; }

/* High-contrast / forced-colors поддршка за точката и фокусот. */
@media (forced-colors: active) {
  .ui-timeline__item::before { background: CanvasText; }
  .ui-timeline__item:focus-visible { outline-color: Highlight; }
}

/* === Патека B бран 2: UiStepper === */
/* ── UiStepper: состојби (states) + a11y фокус ── */

/* Видлив фокус-индикатор (WCAG 2.1/2.2 AA) — следи го патернот на .ui-btn:focus-visible */
.ui-stepper__step:focus-visible {
  outline: 2px solid var(--ui-color-primary);
  outline-offset: 2px;
  border-radius: var(--ui-radius-sm);
}

/* Hover на индикаторот (само за чекори што не се оневозможени) */
.ui-stepper__step:not(.ui-stepper__step--disabled):hover .ui-stepper__num {
  background: var(--ui-color-primary-hover);
}

/* Disabled — пригушено, без интеракција */
.ui-stepper__step--disabled {
  color: var(--ui-color-disabled);
  cursor: not-allowed;
  opacity: .65;
}
.ui-stepper__step--disabled .ui-stepper__num {
  background: var(--ui-color-border);
}

/* Invalid (Valid=false) — error индикатор и наслов */
.ui-stepper__step--invalid {
  color: var(--ui-color-danger, #d23b3b);
}
.ui-stepper__step--invalid .ui-stepper__num {
  background: var(--ui-color-danger, #d23b3b);
}
.ui-stepper__step--invalid .ui-stepper__title {
  color: var(--ui-color-danger, #d23b3b);
}

/* Optional — мала пригушена ознака „Опционално" */
.ui-stepper__optional {
  font-size: 11px;
  color: var(--ui-color-text-muted, var(--ui-color-disabled));
  font-style: italic;
}

/* Dark-тема надминувања за invalid (контраст) */
.ui-theme-dark .ui-stepper__step--invalid {
  color: var(--ui-color-danger, #ff6b6b);
}
.ui-theme-dark .ui-stepper__step--invalid .ui-stepper__num {
  background: var(--ui-color-danger, #ff6b6b);
}
.ui-theme-dark .ui-stepper__step--invalid .ui-stepper__title {
  color: var(--ui-color-danger, #ff6b6b);
}

/* === Патека B бран 2: UiSplitter === */
/* Сплитер — фокус состојба на разделувачот (a11y, WAI-ARIA splitter pattern). */
.ui-splitter__bar:focus { outline: none; }
.ui-splitter__bar:focus-visible {
  outline: var(--ui-focus-ring, 2px solid var(--ui-color-primary));
  outline-offset: -1px;
  background: var(--ui-color-primary);
}

/* ═══ UiEditor (§58) — недостасуваше CSS па изгледаше невидлив ═══ */
.ui-editor {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--ui-color-border, #d0d0d8);
    border-radius: var(--ui-radius-md, 6px);
    background: var(--ui-color-surface, #fff);
    overflow: hidden;
}
.ui-editor--toolbar-bottom { flex-direction: column-reverse; }
.ui-editor--focused { border-color: var(--ui-color-primary, #3f51b5); box-shadow: 0 0 0 1px var(--ui-color-primary, #3f51b5); }
.ui-editor--disabled { opacity: .6; pointer-events: none; }
.ui-editor--readonly .ui-editor-content { background: var(--ui-color-surface-2, #f6f7f9); }

.ui-editor-toolbar {
    display: flex; flex-wrap: wrap; align-items: center; gap: 2px;
    padding: 4px 6px;
    background: var(--ui-color-surface-2, #f6f7f9);
    border-bottom: 1px solid var(--ui-color-border, #e0e0e6);
}
.ui-editor--toolbar-bottom .ui-editor-toolbar { border-bottom: none; border-top: 1px solid var(--ui-color-border, #e0e0e6); }
.ui-editor-tool {
    display: inline-grid; place-items: center; min-width: 28px; height: 28px; padding: 0 6px;
    border: 1px solid transparent; border-radius: 4px; background: transparent;
    color: var(--ui-color-text, #1b1b1f); cursor: pointer; font-size: 14px;
}
.ui-editor-tool:hover { background: var(--ui-color-hover-bg, rgba(0,0,0,.06)); }
.ui-editor-tool:focus-visible { outline: 2px solid var(--ui-color-primary, #3f51b5); outline-offset: 1px; }
.ui-editor-tool[aria-pressed="true"] { background: var(--ui-color-hover-bg, rgba(0,0,0,.1)); border-color: var(--ui-color-border, #d0d0d8); }
.ui-editor-tool-separator { width: 1px; align-self: stretch; margin: 4px 4px; background: var(--ui-color-border, #e0e0e6); }
.ui-editor-tool-spacer { flex: 1; }

.ui-editor-surface { position: relative; flex: 1; }
.ui-editor-content {
    min-height: var(--ui-editor-height, 250px);
    max-height: 60vh; overflow-y: auto;
    padding: 10px 12px; outline: none;
    font: var(--ui-font-body, 14px/1.6 'Segoe UI', sans-serif); color: var(--ui-color-text, #1b1b1f);
}
.ui-editor-surface-frame { width: 100%; min-height: var(--ui-editor-height, 250px); border: 0; }
.ui-editor-surface--hidden { display: none; }
.ui-editor-source {
    width: 100%; min-height: var(--ui-editor-height, 250px);
    border: 0; padding: 10px 12px; box-sizing: border-box; outline: none; resize: vertical;
    font-family: ui-monospace, Consolas, monospace; font-size: 13px; line-height: 1.5;
    color: var(--ui-color-text, #1b1b1f); background: var(--ui-color-surface-2, #f6f7f9);
}
.ui-editor-dialog {
    display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
    padding: 8px 12px; border-top: 1px solid var(--ui-color-border, #e0e0e6);
    background: var(--ui-color-base-bg-hover, #f6f7f9);
}
.ui-editor-dialog__label { font-size: 13px; color: var(--ui-color-text, #1b1b1f); }
.ui-editor-dialog__input { flex: 1 1 200px; min-width: 160px; }
.ui-editor-table { border-collapse: collapse; width: 100%; margin: 4px 0; }
.ui-editor-table td, .ui-editor-table th {
    border: 1px solid var(--ui-color-border, #ccc); padding: 4px 6px; min-width: 36px; vertical-align: top;
}
.ui-editor-tool-select {
    height: 28px; border: 1px solid var(--ui-color-border, #e0e0e6); border-radius: 4px;
    background: var(--ui-color-surface, #fff); color: var(--ui-color-text, #1b1b1f);
    font-size: 13px; padding: 0 4px; max-width: 130px; cursor: pointer;
}
.ui-editor-tool-color {
    width: 30px; height: 28px; padding: 2px; cursor: pointer;
    border: 1px solid var(--ui-color-border, #e0e0e6); border-radius: 4px;
    background: var(--ui-color-surface, #fff);
}
.ui-editor-placeholder {
    position: absolute; top: 10px; left: 12px; pointer-events: none;
    color: var(--ui-color-text-muted, #8a8a93);
}


/* ═══ Патека B бран 3 ═══ */
/* === Патека B бран 3: UiDateInput === */
/* === Патека B: UiDateInput (§049) — состојби + a11y === */
/* Основните .ui-dateinput / .ui-dateinput__input / .ui-dateinput--disabled веќе постојат
   (ред ~522 во ui-blazor.css) и .ui-input:focus важи врз внесот. Следново е АДИТИВНО,
   скоупирано на .ui-dateinput; --ui-* токени, без нови хардкодирани бои. */

/* hover: суптилен раб кога не е disabled/readonly (исто како ui-textbox) */
.ui-dateinput:not(.ui-dateinput--disabled):not(.ui-dateinput--readonly) .ui-dateinput__input:hover {
  border-color: var(--ui-color-primary-hover);
}

/* focus-visible: попрецизен focus ring (само тастатура), надополнува .ui-input:focus */
.ui-dateinput .ui-dateinput__input:focus-visible {
  outline: var(--ui-focus-ring, 2px solid var(--ui-color-primary));
  outline-offset: -1px;
  border-color: var(--ui-color-primary);
}

/* disabled: пригушено, без интеракција (надополнува постоечкото .ui-dateinput--disabled) */
.ui-dateinput--disabled .ui-dateinput__input,
.ui-dateinput .ui-dateinput__input:disabled {
  color: var(--ui-color-disabled);
  border-color: var(--ui-color-border);
  background: var(--ui-color-surface-2);
  cursor: not-allowed;
}

/* readonly: видливо но „заклучено" — суптилно различна позадина, без not-allowed */
.ui-dateinput--readonly .ui-dateinput__input,
.ui-dateinput .ui-dateinput__input:read-only {
  background: var(--ui-color-surface-2);
  cursor: default;
}

/* invalid: опасен раб + match-уван focus ring (исто како ui-textbox--invalid) */
.ui-dateinput--invalid .ui-dateinput__input,
.ui-dateinput .ui-dateinput__input[aria-invalid="true"] {
  border-color: var(--ui-color-danger, #d32f2f);
}
.ui-dateinput--invalid .ui-dateinput__input:focus-visible,
.ui-dateinput .ui-dateinput__input[aria-invalid="true"]:focus-visible {
  outline-color: var(--ui-color-danger, #d32f2f);
}

/* === Патека B бран 3: UiDatePicker === */
/* === Патека B: UiDatePicker (§050) — состојби + a11y (Ф3) === */
/* Адитивно, скоупирано на .ui-datepicker. Базата (.ui-input, .ui-input:focus,
   .ui-datepicker--open, .ui-datepicker--disabled, __icon, __popup) веќе постои —
   тука се додаваат само СОСТОЈБИТЕ што недостасуваа: hover / focus-visible /
   readonly / invalid / active. selected/today/disabled-ден живеат во .ui-calendar*. */

/* hover: суптилен раб кога не е disabled/readonly (мирува со cursor:pointer од базата) */
.ui-datepicker:not(.ui-datepicker--disabled):not(.ui-datepicker--readonly) .ui-datepicker__input:hover {
  border-color: var(--ui-color-primary-hover);
}

/* focus-visible: појасен фокус ринг само за тастатура, надополнува .ui-input:focus */
.ui-datepicker .ui-datepicker__input:focus-visible {
  outline: var(--ui-focus-ring, 2px solid var(--ui-color-primary));
  outline-offset: -1px;
  border-color: var(--ui-color-primary);
}

/* active: лесно притиснат изглед при клик на полето (отворање/затворање) */
.ui-datepicker:not(.ui-datepicker--disabled):not(.ui-datepicker--readonly) .ui-datepicker__input:active {
  border-color: var(--ui-color-primary);
}

/* readonly: видливо но „заклучено" — без not-allowed (вредноста е читлива) */
.ui-datepicker--readonly .ui-datepicker__input {
  background: var(--ui-color-surface-2);
  cursor: default;
}

/* invalid: опасен раб + match-уван focus ring (исто како ui-textbox--invalid) */
.ui-datepicker--invalid .ui-datepicker__input {
  border-color: var(--ui-color-danger, #d32f2f);
}
.ui-datepicker--invalid .ui-datepicker__input:focus-visible {
  outline-color: var(--ui-color-danger, #d32f2f);
  border-color: var(--ui-color-danger, #d32f2f);
}

/* === Патека B бран 3: UiTimePicker === */
/* === Патека B: UiTimePicker — состојби (focus-visible / invalid / readonly / active / open) === */

/* Focus-visible: видлив фокус-прстен на полето (WCAG 2.1 AA) — само при тастатурен фокус */
.ui-timepicker__input:focus { outline: none; }
.ui-timepicker__input:focus-visible {
  outline: var(--ui-focus-ring, 2px solid var(--ui-color-primary));
  outline-offset: -1px;
  border-color: var(--ui-color-primary);
}

/* Open: кога листата е отворена, полето сигнализира активен popup (исто како focus) */
.ui-timepicker--open .ui-timepicker__input { border-color: var(--ui-color-primary); }

/* Active (press): благ feedback при притискање на полето */
.ui-timepicker__input:active:not([disabled]) { background: var(--ui-color-base-bg-hover); }

/* Invalid: валидациска грешка → црвена граница (не се применува кога е disabled) */
.ui-timepicker--invalid .ui-timepicker__input {
  border-color: var(--ui-color-error, var(--ui-color-danger));
}
.ui-timepicker--invalid .ui-timepicker__input:focus-visible {
  outline-color: var(--ui-color-error, var(--ui-color-danger));
  border-color: var(--ui-color-error, var(--ui-color-danger));
}

/* ReadOnly: прикажува состојба, но сигнализира дека не може да се менува */
.ui-timepicker--readonly .ui-timepicker__input { cursor: default; opacity: .85; }

/* Опции — focus-visible (тастатурна навигација низ листата) и active (press) */
.ui-timepicker__option:focus-visible {
  outline: var(--ui-focus-ring, 2px solid var(--ui-color-primary));
  outline-offset: -2px;
}
.ui-timepicker__option:active { background: var(--ui-color-base-bg-hover); }

/* Избраната опција задржува читлив контраст и на hover/focus */
.ui-timepicker__option--selected:hover,
.ui-timepicker__option--selected:focus-visible { background: var(--ui-color-primary-hover, var(--ui-color-primary)); }

/* High-contrast / forced-colors: задржи видлив фокус-индикатор */
@media (forced-colors: active) {
  .ui-timepicker__input:focus-visible,
  .ui-timepicker__option:focus-visible { outline-color: Highlight; }
}

/* === Патека B бран 3: UiDateTimePicker === */
/* ── UiDateTimePicker: состојби (focus-visible / active / readonly / invalid) ──
   Дополнува ги постоечките правила (линии 607–619): base/hover/--disabled/
   --selected/--open. Само НЕДОСТАСУВАЧКИТЕ состојби; без дуплирање. */

/* Видлив фокус на полето-тригер (WCAG 2.1 AA; терк од .ui-input:focus). */
.ui-datetimepicker__input:focus-visible {
  outline: 2px solid var(--ui-color-primary);
  outline-offset: -1px;
}
/* Отстрани го браузерскиот outline кога постои focus-visible слој. */
.ui-datetimepicker__input:focus:not(:focus-visible) { outline: none; }

/* Притиснато (active) на тригерот. */
.ui-datetimepicker__input:active:not([disabled]) {
  background: var(--ui-color-base-bg-hover);
}

/* Readonly: без pointer affordance, неутрален фон (не изгледа disabled). */
.ui-datetimepicker--readonly .ui-datetimepicker__input {
  cursor: default;
  background: var(--ui-color-base-bg);
}

/* Invalid: граница + фокус-ринг во danger боја (терк од .ui-numeric/.ui-textarea--invalid). */
.ui-datetimepicker--invalid .ui-datetimepicker__input {
  border-color: var(--ui-color-danger);
}
.ui-datetimepicker--invalid .ui-datetimepicker__input:focus-visible {
  outline-color: var(--ui-color-danger);
  border-color: var(--ui-color-danger);
}

/* Време-опции: видлив фокус за навигација само со тастатура. */
.ui-datetimepicker__time-option:focus-visible {
  outline: 2px solid var(--ui-color-primary);
  outline-offset: -2px;
}
.ui-datetimepicker__time-option:focus:not(:focus-visible) { outline: none; }
.ui-datetimepicker__time-option:active {
  background: var(--ui-color-base-bg-hover);
}

/* Копче „Готово": hover/focus/active состојби (досега немаше ниту една). */
.ui-datetimepicker__done:hover { background: var(--ui-color-primary-hover); }
.ui-datetimepicker__done:focus-visible {
  outline: 2px solid var(--ui-color-primary);
  outline-offset: 1px;
}
.ui-datetimepicker__done:focus:not(:focus-visible) { outline: none; }
.ui-datetimepicker__done:active { background: var(--ui-color-primary-hover); }

/* Висок контраст: фокус-рингови да следат системска боја. */
@media (forced-colors: active) {
  .ui-datetimepicker__input:focus-visible,
  .ui-datetimepicker__time-option:focus-visible,
  .ui-datetimepicker__done:focus-visible { outline-color: Highlight; }
}

/* === Патека B бран 3: UiDateRangePicker === */
/* ── UiDateRangePicker: состојби (Ф3 — визуелна/a11y) ──
   Постоечки во ui-blazor.css: .ui-daterangepicker__input (база), :hover,
   .ui-daterangepicker--open .ui-daterangepicker__input (отворено). Долу се само НОВИТЕ
   состојби што недостасуваат. ВАЖНО: input-от е СЕКОГАШ readonly (тригер), затоа НЕ се
   стилизира генерички [readonly] — би ја газел нормалната состојба. */

/* focus / focus-visible — видлив фокус-индикатор (WCAG 2.1/2.2 AA, спец: Пристапност) */
.ui-daterangepicker__input:focus-visible {
  outline: var(--ui-focus-ring, 2px solid var(--ui-color-primary));
  outline-offset: 1px;
  border-color: var(--ui-color-primary);
}

/* disabled — оневозможено поле (когаконсумерот splat-ува disabled/aria-disabled, или
   преку модификатор .ui-daterangepicker--disabled на коренот) */
.ui-daterangepicker__input:disabled,
.ui-daterangepicker__input[aria-disabled="true"],
.ui-daterangepicker--disabled .ui-daterangepicker__input {
  color: var(--ui-color-disabled);
  background: var(--ui-color-base-bg-hover);
  border-color: var(--ui-color-border);
  cursor: not-allowed;
  opacity: .6;
}
.ui-daterangepicker__input:disabled:hover,
.ui-daterangepicker__input[aria-disabled="true"]:hover,
.ui-daterangepicker--disabled .ui-daterangepicker__input:hover {
  background: var(--ui-color-base-bg-hover);
}

/* invalid — невалидна вредност (aria-invalid splat-ан од консумерот/валидација) */
.ui-daterangepicker__input[aria-invalid="true"],
.ui-daterangepicker--invalid .ui-daterangepicker__input {
  border-color: var(--ui-color-danger, #d32f2f);
}
.ui-daterangepicker__input[aria-invalid="true"]:focus-visible,
.ui-daterangepicker--invalid .ui-daterangepicker__input:focus-visible {
  outline-color: var(--ui-color-danger, #d32f2f);
  border-color: var(--ui-color-danger, #d32f2f);
}

/* === Патека B бран 3: UiMaskedTextBox === */
/* === Патека B бран 2: UiMaskedTextBox === */
/* ── UiMaskedTextBox (§055) — состојби: hover / focus-visible / disabled / readonly / invalid ──
   Основните правила (.ui-maskedtextbox, .ui-maskedtextbox__input, .ui-maskedtextbox--disabled
   { opacity:.6 } + pointer-events:none) веќе постојат погоре во ui-blazor.css — тука се додаваат
   САМО состојбите што недостасуваат. Скоупирано на .ui-maskedtextbox и неговиот __input;
   само --ui-* токени, без хардкодирани бои. Огледало на .ui-textbox блокот заради конзистентност. */

/* hover: суптилен раб кога не е disabled/readonly */
.ui-maskedtextbox:not(.ui-maskedtextbox--disabled):not(.ui-maskedtextbox--readonly) .ui-maskedtextbox__input:hover {
  border-color: var(--ui-color-primary-hover);
}

/* focus-visible: попрецизен focus ring (само тастатура), надополнува постоечкиот .ui-input:focus */
.ui-maskedtextbox .ui-maskedtextbox__input:focus-visible {
  outline: var(--ui-focus-ring, 2px solid var(--ui-color-primary));
  outline-offset: -1px;
  border-color: var(--ui-color-primary);
}

/* disabled: пригушено, без интеракција (класата --disabled веќе се емитува од кодот) */
.ui-maskedtextbox--disabled .ui-maskedtextbox__input,
.ui-maskedtextbox .ui-maskedtextbox__input:disabled {
  color: var(--ui-color-disabled);
  border-color: var(--ui-color-border);
  background: var(--ui-color-surface-2);
  cursor: not-allowed;
}

/* readonly: видливо но „заклучено" — суптилно различно од normal (класата --readonly + aria-readonly од кодот) */
.ui-maskedtextbox--readonly .ui-maskedtextbox__input,
.ui-maskedtextbox .ui-maskedtextbox__input:read-only {
  background: var(--ui-color-surface-2);
  cursor: default;
}

/* invalid: опасен раб + match-уван focus ring (--invalid класа + aria-invalid="true" од кодот) */
.ui-maskedtextbox--invalid .ui-maskedtextbox__input,
.ui-maskedtextbox .ui-maskedtextbox__input[aria-invalid="true"] {
  border-color: var(--ui-color-danger, #d32f2f);
}
.ui-maskedtextbox--invalid .ui-maskedtextbox__input:focus-visible,
.ui-maskedtextbox .ui-maskedtextbox__input[aria-invalid="true"]:focus-visible {
  outline-color: var(--ui-color-danger, #d32f2f);
}

/* === Патека B бран 3: UiColorPicker === */
/* === Патека B: UiColorPicker (§065) — состојби + a11y (Ф3) === */
/* АДИТИВНО: постоечките :hover, --open, --disabled (ui-blazor.css ~451–457) ОСТАНУВААТ.
   Долунаведеново НЕ ги дуплира; додава само focus-visible / active / readonly / invalid. */

/* focus-visible: видлив фокус-индикатор (само тастатура) — недостасуваше (WCAG AA). */
.ui-colorpicker__trigger:focus-visible {
  outline: var(--ui-focus-ring, 2px solid var(--ui-color-primary));
  outline-offset: 1px;
  border-color: var(--ui-color-primary);
}
/* Гасни го default-ниот браузерски outline кога постои focus-visible слој. */
.ui-colorpicker__trigger:focus:not(:focus-visible) { outline: none; }

/* active: pressed визуелна состојба на тригерот. */
.ui-colorpicker:not(.ui-colorpicker--disabled):not(.ui-colorpicker--readonly) .ui-colorpicker__trigger:active {
  background: var(--ui-color-base-bg-hover);
  border-color: var(--ui-color-primary-hover);
}

/* readonly: видливо но „заклучено" — без hover/active промена, default курсор. */
.ui-colorpicker--readonly .ui-colorpicker__trigger {
  background: var(--ui-color-surface-2);
  cursor: default;
}
.ui-colorpicker--readonly .ui-colorpicker__trigger:hover { background: var(--ui-color-surface-2); }

/* invalid: опасен раб + усогласен focus ring (исто како ui-textbox--invalid). */
.ui-colorpicker--invalid .ui-colorpicker__trigger {
  border-color: var(--ui-color-danger, #d32f2f);
}
.ui-colorpicker--invalid .ui-colorpicker__trigger:focus-visible {
  outline-color: var(--ui-color-danger, #d32f2f);
  border-color: var(--ui-color-danger, #d32f2f);
}

/* === Патека B бран 3: UiColorPalette === */
/* === Патека B — UiColorPalette состојби (Ф3 визуелна/a11y) === */
/* ЗАБЕЛЕШКА: ги ДОПОЛНУВА постоечките .ui-color-palette / __swatch / __swatch--selected (не ги редефинира). */

/* hover — суптилна повратна информација на плочката (нема ефект кога е disabled/readonly) */
.ui-color-palette:not(.ui-color-palette--disabled):not(.ui-color-palette--readonly) .ui-color-palette__swatch:hover {
  border-color: var(--ui-color-border);
}

/* active — притисната плочка (само кога е интерактивна) */
.ui-color-palette:not(.ui-color-palette--disabled):not(.ui-color-palette--readonly) .ui-color-palette__swatch:active {
  transform: scale(.94);
}

/* focus-visible — WCAG AA фокус-прстен. Фокусот живее на коренот (roving), па прстенот е и на
   коренот и на поединечна плочка кога директно ja добива (мис/таб). */
.ui-color-palette:focus-visible {
  outline: var(--ui-focus-ring, 2px solid var(--ui-color-primary));
  outline-offset: 2px;
  border-radius: var(--ui-radius, 6px);
}
.ui-color-palette__swatch:focus-visible {
  outline: var(--ui-focus-ring, 2px solid var(--ui-color-primary));
  outline-offset: 2px;
}

/* disabled — целата палета пригушена, без интеракција */
.ui-color-palette--disabled { opacity: .55; cursor: not-allowed; }
.ui-color-palette--disabled .ui-color-palette__swatch { cursor: not-allowed; }

/* readonly — видливо, но без менување (промената е блокирана и во .cs) */
.ui-color-palette--readonly .ui-color-palette__swatch { cursor: default; }

/* invalid — невалидна состојба од EditContext (по терк на .ui-radio-group--invalid) */
.ui-color-palette--invalid .ui-color-palette__swatch--selected { border-color: var(--ui-color-danger); }
.ui-color-palette--invalid:focus-visible { outline-color: var(--ui-color-danger); }
.ui-color-palette--invalid .ui-color-palette__swatch:focus-visible { outline-color: var(--ui-color-danger); }

/* === Патека B бран 3: UiFlatColorPicker === */
/* ── UiFlatColorPicker: нови состојби (hover/focus-visible/active/disabled/readonly/invalid) ── */
/* Фокус-видливост (WCAG 2.1/2.2 AA): јасен outline на сите интерактивни елементи. */
.ui-flatcolorpicker__tab:focus-visible,
.ui-flatcolorpicker__swatch:focus-visible,
.ui-flatcolorpicker__clear:focus-visible {
  outline: var(--ui-focus-ring);
  outline-offset: 2px;
}

/* Hover на табови (постоеше само на .__clear). */
.ui-flatcolorpicker__tab:hover:not(:disabled) {
  color: var(--ui-color-primary);
  background: var(--ui-color-base-bg-hover);
}

/* Active (pressed) на табови и clear. */
.ui-flatcolorpicker__tab:active:not(:disabled),
.ui-flatcolorpicker__clear:active:not(:disabled) {
  background: var(--ui-color-base-bg-hover);
}

/* Swatch: hover ја подига плочката со суптилен прстен во акцент бојата. */
.ui-flatcolorpicker__swatch:hover:not(:disabled) {
  box-shadow: 0 0 0 2px var(--ui-color-primary);
}

/* Swatch: pressed/active фидбек. */
.ui-flatcolorpicker__swatch:active:not(:disabled) {
  transform: scale(0.92);
}

/* Per-element disabled (постоеше само root --disabled со pointer-events:none). */
.ui-flatcolorpicker__tab:disabled,
.ui-flatcolorpicker__swatch:disabled,
.ui-flatcolorpicker__clear:disabled {
  opacity: .5;
  cursor: not-allowed;
}

/* Readonly: интеракцијата е блокирана функционално; визуелно ги пригушуваме копчињата. */
.ui-flatcolorpicker--readonly .ui-flatcolorpicker__swatch,
.ui-flatcolorpicker--readonly .ui-flatcolorpicker__clear {
  cursor: default;
}
.ui-flatcolorpicker--readonly .ui-flatcolorpicker__swatch:hover:not(:disabled) {
  box-shadow: none;
}

/* Invalid (EditContext валидација): црвен раб + aria-invalid на коренот. */
.ui-flatcolorpicker--invalid {
  border-color: var(--ui-color-danger, #d23b3b);
  box-shadow: 0 0 0 1px var(--ui-color-danger, #d23b3b);
}

/* === Патека B бран 3: UiRangeSlider === */
/* === UiRangeSlider — состојби (§061): hover / focus / active / disabled ===
   Постоечките правила .ui-rangeslider__thumb:focus-visible и .ui-rangeslider--disabled
   остануваат; долу се ДОПОЛНУВААТ состојбите што недостасуваат. */

/* Hover на палче (само кога не е оневозможено) */
.ui-rangeslider:not(.ui-rangeslider--disabled) .ui-rangeslider__thumb:hover {
  border-color: var(--ui-color-primary-hover);
  background: var(--ui-color-primary-hover);
}

/* Active / „фаќање' на палче при влечење */
.ui-rangeslider:not(.ui-rangeslider--disabled) .ui-rangeslider__thumb:active {
  border-color: var(--ui-color-primary-hover);
  cursor: grabbing;
}

/* Експлицитен focus reset + видлив фокус прстен преку токен (доследно со .ui-slider).
   Постоечкото :focus-visible правило останува; ова нормализира :focus за глувче и
   го врзува прстенот на --ui-focus-ring токенот. */
.ui-rangeslider__thumb:focus { outline: none; }
.ui-rangeslider__thumb:focus-visible {
  outline: var(--ui-focus-ring);
  outline-offset: 2px;
}

/* Disabled: појаснет cursor на палчето (коренот веќе има opacity + pointer-events:none) */
.ui-rangeslider--disabled .ui-rangeslider__thumb:hover,
.ui-rangeslider--disabled .ui-rangeslider__thumb:active {
  border-color: var(--ui-color-primary);
  background: #fff;
  cursor: not-allowed;
}

/* === Патека B бран 3: UiSignature === */
/* Потпис — НОВИ state правила (Ф3 a11y/визуелна). Постоечкиот блок 360–367 НЕ се дуплира. */

/* hover на интерактивна површина — суптилен акцент на работ (само кога НЕ е readonly) */
.ui-signature:not(.ui-signature--readonly) .ui-signature__surface:hover {
  border-color: var(--ui-color-primary);
}

/* focus-visible — површината е сега во Tab редот (tabindex), бара видлив ринг */
.ui-signature__surface:focus-visible {
  outline: var(--ui-focus-ring);
  outline-offset: 1px;
}

/* readonly — де-нагласена позадина и без hover/focus афорданса (приказ, не внес) */
.ui-signature--readonly .ui-signature__surface {
  background: var(--ui-color-base-bg-hover);
}
.ui-signature--readonly .ui-signature__surface:hover {
  border-color: var(--ui-color-border);
}

/* invalid — задолжително поле/EditForm сценарио (по терк на .ui-textbox--invalid):
   опасен раб + match-уван focus ring; се активира преку класата ui-signature--invalid на коренот */
.ui-signature--invalid .ui-signature__surface {
  border-color: var(--ui-color-danger);
}
.ui-signature--invalid .ui-signature__surface:focus-visible {
  outline-color: var(--ui-color-danger);
}

/* === Патека B бран 3: UiSwitch === */
/* ── UiSwitch: invalid (валидациска состојба од EditContext) ── */
/* Невалиден прекинувач: track-от и фокус-прстенот сигнализираат грешка (--ui-color-danger).
   Не се применува кога е disabled (исклучено во .cs преку IsInvalid && !IsDisabled). */
.ui-switch--invalid .ui-switch__track {
  background: var(--ui-color-danger);
}
.ui-switch--invalid:focus-visible {
  outline: 2px solid var(--ui-color-danger);
  outline-offset: 2px;
}

/* ── Grid групирање (§8, инк.4) ── */
.ui-grid-group-row { background: var(--ui-color-surface-2, #f0f1f4); font-weight: 600; }
.ui-grid-group-cell { padding: 6px 10px; }
.ui-grid-group-toggle { background: none; border: none; cursor: pointer; font: inherit; color: var(--ui-color-text, #1b1b1f); padding: 2px 4px; }
.ui-grid-group-toggle:hover { color: var(--ui-color-primary, #3f51b5); }
.ui-grid-group-toggle:focus-visible { outline: 2px solid var(--ui-color-primary, #3f51b5); outline-offset: 1px; }


/* Патека B бран 4 */
/* Патека B бран 4: UiMenu */
/* ── UiMenu: состојби (focus-visible / active / selected) — Патека B полиш ── */

/* Focus-visible: видлив фокус-прстен (WCAG 2.1 AA) — само при тастатурен фокус (roving tabindex). */
.ui-menu__link:focus { outline: none; }
.ui-menu__link:focus-visible {
  outline: var(--ui-focus-ring, 2px solid var(--ui-color-primary));
  outline-offset: -2px;
}

/* Active (press): реупотребува hover-позадината за тактилен feedback; оневозможените се исклучени
   (тие веќе имаат pointer-events:none, но guard-от е заради конзистентност со останатите компоненти). */
.ui-menu__item:not(.ui-menu__item--disabled) > .ui-menu__link:active {
  background: var(--ui-color-base-bg-hover);
}

/* Selected / current: тековно избрана навигациска ставка (aria-current="page"). */
.ui-menu__link--selected {
  background: var(--ui-color-primary);
  color: var(--ui-color-text-on-primary);
}
.ui-menu__link--selected:hover {
  background: var(--ui-color-primary-hover);
}

/* High-contrast / forced-colors: системска боја за фокус-прстенот (исто како кај другите компоненти). */
@media (forced-colors: active) {
  .ui-menu__link:focus-visible { outline-color: Highlight; }
}

/* Патека B бран 4: UiContextMenu */
/* ── UiContextMenu (§021) — состојби што недостасуваа: focus-visible (на менито) /
   --focused (тастатурно фокусирана ставка) / active (press). hover и --disabled
   веќе постојат во основниот блок. Спец §021: „Навигација со тастатура" + „Пристапност". */

/* Видлив фокус-прстен на popup контејнерот (tabindex=-1). */
.ui-contextmenu:focus { outline: none; }
.ui-contextmenu:focus-visible {
  outline: var(--ui-focus-ring, 2px solid var(--ui-color-primary));
  outline-offset: -1px;
}

/* Тастатурно фокусираната ставка (ArrowUp/Down/Home/End) — истакната + фокус-прстен. */
.ui-contextmenu__item--focused {
  background: var(--ui-color-base-bg-hover);
  outline: 2px solid var(--ui-color-primary);
  outline-offset: -2px;
}

/* Притисок (active) на неоневозможена ставка — благ визуелен фидбек. */
.ui-contextmenu__item:not(.ui-contextmenu__item--disabled):active {
  background: var(--ui-color-base-bg-hover);
}

/* Високо-контрастен режим (forced-colors): системски фокус-прстен. */
@media (forced-colors: active) {
  .ui-contextmenu:focus-visible,
  .ui-contextmenu__item--focused { outline-color: Highlight; }
  .ui-contextmenu__item--disabled { color: GrayText; }
}

/* Патека B бран 4: UiTabStrip */
/* TabStrip — состојби (Патека B: visual/a11y). Се спојуваат по постоечките
   .ui-tabstrip__tab / --active правила (ui-blazor.css ~242–244). Само --ui-* токени. */

/* hover на НЕактивен таб — суптилна промена на бојата + назнака за долната граница */
.ui-tabstrip__tab:hover:not(.ui-tabstrip__tab--active):not([aria-disabled="true"]) {
  color: var(--ui-color-primary);
  border-bottom-color: var(--ui-color-border);
}

/* видлив фокус-индикатор (WCAG AA) — само на тастатура преку :focus-visible */
.ui-tabstrip__tab:focus { outline: none; }
.ui-tabstrip__tab:focus-visible {
  outline: 2px solid var(--ui-color-primary);
  outline-offset: -2px;
  border-radius: calc(var(--ui-radius) / 2);
}

/* притиснат (active) — кратка визуелна повратна информација при клик */
.ui-tabstrip__tab:active:not([aria-disabled="true"]) {
  color: var(--ui-color-primary-hover);
}

/* оневозможен таб (aria-disabled / .ui-tabstrip__tab--disabled) — затемнето, без курсор */
.ui-tabstrip__tab[aria-disabled="true"],
.ui-tabstrip__tab--disabled {
  opacity: .55;
  cursor: not-allowed;
  pointer-events: none;
}

/* Патека B бран 4: UiDrawer */
/* UiDrawer — фокус-видлива состојба на панелот (a11y фокус видливост, WCAG 2.4.7).
   Панелот сега е фокусибилен (tabindex) за Esc/фокус-менаџмент во overlay режим. */
.ui-drawer:focus { outline: none; }
.ui-drawer:focus-visible { outline: var(--ui-focus-ring, 2px solid var(--ui-color-primary)); outline-offset: -2px; }

/* Кога е затворена и скриена од AT (aria-hidden), прекривката не прима интеракција. */
.ui-drawer-overlay[aria-hidden="true"] { pointer-events: none; }

/* Патека B бран 4: UiDialog */
/* === UiDialog (§035) — состојби + a11y фокус (Патека B / Ф3) === */
/* Наслов: новиот <span class="ui-dialog__title" id> во заглавието; flex да го турка
   копчето „X" десно (заглавието е display:flex; justify-content:space-between). */
.ui-dialog__title { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }

/* Дијалогот сега е фокусабилен (tabindex) за да го фати Esc и да ja прима почетната
   фокус при отворање — видлив фокусен прстен по WCAG (само за тастатура). */
.ui-dialog:focus { outline: none; }
.ui-dialog:focus-visible { outline: 2px solid var(--ui-color-primary); outline-offset: 2px; }

/* Копче за затворање „X" — интерактивни состојби (порано немаше никаков feedback). */
.ui-dialog__close { color: var(--ui-color-text); line-height: 1; padding: 2px 6px; border-radius: var(--ui-radius); transition: background .15s, color .15s; }
.ui-dialog__close:hover { background: var(--ui-color-base-bg-hover); color: var(--ui-color-danger); }
.ui-dialog__close:focus-visible { outline: 2px solid var(--ui-color-primary); outline-offset: 1px; }
.ui-dialog__close:active { background: var(--ui-color-base-bg); }

/* Патека B бран 4: UiWindow */
/* ── UiWindow §034: состојби фокус/active (Ф3 a11y) ── */
/* Focus-visible на самиот прозор (WCAG фокус видливост; прозорот е tabindex=-1, прима Esc). */
.ui-window:focus { outline: none; }
.ui-window:focus-visible { outline: var(--ui-focus-ring); outline-offset: 2px; }

/* Копче за затворање: focus-visible (досега имаше само :hover) + active притисок. */
.ui-window__close:focus-visible { outline: var(--ui-focus-ring); outline-offset: 1px; }
.ui-window__close:active { background: var(--ui-color-base-bg); color: var(--ui-color-danger); transform: translateY(1px); }

/* Заглавие при активно влечење — потврда на „grabbing" покажувач. */
.ui-window--dragging .ui-window__header { cursor: grabbing; }

/* Агол за ресизирање: hover/active нагласување (досега немаше состојба). */
.ui-window__resize:hover { background: linear-gradient(135deg, transparent 50%, var(--ui-color-primary) 50%); }
.ui-window--resizing .ui-window__resize { background: linear-gradient(135deg, transparent 50%, var(--ui-color-primary) 50%); }

/* Патека B бран 4: UiPopover */
/* === UiPopover (§091) — состојби и пристапност; merge во ui-blazor.css === */

/* Интерактивен тригер: покажувач на курсор + видлив фокус индикатор (WCAG 2.1 AA, видлив focus). */
.ui-popover__trigger[role="button"] { cursor: pointer; outline: none; }
.ui-popover__trigger[role="button"]:focus-visible {
  outline: var(--ui-focus-ring);
  outline-offset: 2px;
  border-radius: var(--ui-radius);
}

/* Hover афорданс на интерактивниот тригер (благо потемнување на позадината). */
.ui-popover__trigger[role="button"]:hover { background: var(--ui-color-hover, rgba(0,0,0,.04)); }

/* Active/отворена состојба: тригерот сигнализира дека панелот е отворен (aria-expanded="true"). */
.ui-popover__trigger[role="button"][aria-expanded="true"] { color: var(--ui-color-primary); }

/* Видлив фокус на самиот панел кога прима фокус програмски (tabindex=-1). */
.ui-popover__content:focus-visible {
  outline: var(--ui-focus-ring);
  outline-offset: 2px;
}

/* Намалено движење: исклучи евентуални транзиции при prefers-reduced-motion. */
@media (prefers-reduced-motion: reduce) {
  .ui-popover__content { transition: none; }
}

/* Патека B бран 4: UiWizard */
/* ── UiWizard (§026): состојби + a11y (фокус/hover/disabled) ── */

/* Чекорите се сега интерактивни (клик + roving tabindex/стрелки) → покажувач + hover. */
.ui-wizard__steps li { cursor:pointer; transition:color .12s ease, border-color .12s ease; }

/* Hover на чекор што не е активен (активниот е веќе во боја на primary). */
.ui-wizard__steps li:not([class*="active"]):hover {
  color:var(--ui-color-text);
  border-bottom-color:var(--ui-color-primary);
}

/* Видлив фокус-прстен на чекорот при навигација со тастатура (roving tabindex). */
.ui-wizard__steps li:focus-visible {
  outline:2px solid var(--ui-color-primary);
  outline-offset:-2px;
  border-radius:var(--ui-border-radius, 4px);
}
/* Fallback за прелистувачи без :focus-visible поддршка. */
.ui-wizard__steps li:focus { outline:2px solid var(--ui-color-primary); outline-offset:-2px; }
.ui-wizard__steps li:focus:not(:focus-visible) { outline:none; }

/* Навигациски копчиња (Назад/Напред): фокус + hover + disabled состојби. */
.ui-wizard__nav { cursor:pointer; transition:background-color .12s ease, opacity .12s ease; }
.ui-wizard__nav:hover:not(:disabled) { background:var(--ui-color-primary); color:#fff; }
.ui-wizard__nav:focus-visible { outline:2px solid var(--ui-color-primary); outline-offset:1px; }
.ui-wizard__nav:active:not(:disabled) { filter:brightness(.95); }
.ui-wizard__nav:disabled { opacity:.55; cursor:not-allowed; }

/* Патека B бран 4: UiTreeView */
/* TreeView — состојби за фокус/активен дескендант/тастатура (Ф3 a11y) */

/* Фокус видливост: редот е носител на roving tabindex; прстен само при тастатурен фокус. */
.ui-treeview__row:focus { outline: none; }
.ui-treeview__row:focus-visible {
  outline: var(--ui-focus-ring);
  outline-offset: -1px;
  border-radius: var(--ui-radius);
}

/* Активен дескендант (тековно фокусиран јазол по WAI-ARIA tree шемата). */
.ui-treeview__row--active { background: var(--ui-color-base-bg-hover); }

/* Активен + избран: изборот доминира (за конзистентност со --selected етикетата). */
.ui-treeview__item--selected > .ui-treeview__row.ui-treeview__row--active {
  background: transparent;
}

/* Hover на toggle стрелката (одделно од hover на етикетата). */
.ui-treeview__toggle:not(.ui-treeview__toggle--leaf):hover { color: var(--ui-color-primary); }

/* Indeterminate / mixed checkbox (за идна parent-cascade семантика; стилизира природен :indeterminate). */
.ui-treeview__checkbox:indeterminate { accent-color: var(--ui-color-primary); opacity: .85; }

/* Оневозможен ред не добива фокус прстен ниту активна позадина. */
.ui-treeview__item--disabled > .ui-treeview__row:focus-visible { outline: none; }
.ui-treeview__item--disabled > .ui-treeview__row.ui-treeview__row--active { background: transparent; }

/* Патека B бран 4: UiPanelBar */
/* ── UiPanelBar — состојби + a11y (Ф3). Дополнува постоечките .ui-panelbar* правила. ── */

/* Hover на хедер (само за неоневозможени) */
.ui-panelbar__header:hover { background:var(--ui-color-base-bg-hover); }

/* Видлив фокус-индикатор (keyboard навигација; не и при клик со глушец) */
.ui-panelbar__header:focus-visible {
  outline:var(--ui-focus-ring);
  outline-offset:-2px;
  position:relative;
  z-index:1;
}

/* Active (притиснат) */
.ui-panelbar__header:active { background:var(--ui-color-base-bg-hover); }

/* Раширена ставка — нагласен хедер (selected-style состојба) */
.ui-panelbar__item[aria-expanded="true"] > .ui-panelbar__header {
  color:var(--ui-color-primary);
  font-weight:700;
}

/* Disabled ставка */
.ui-panelbar__item--disabled { opacity:.6; }
.ui-panelbar__header:disabled,
.ui-panelbar__item--disabled > .ui-panelbar__header {
  cursor:not-allowed;
  color:var(--ui-color-disabled);
  background:var(--ui-color-base-bg);
}
.ui-panelbar__item--disabled > .ui-panelbar__header:hover { background:var(--ui-color-base-bg); }

/* Намалена анимација по кориснички preference */
@media (prefers-reduced-motion: reduce) {
  .ui-panelbar__header { transition:none; }
}

/* Патека B бран 4: UiBottomNavigation */
/* UiBottomNavigation — состојби (hover / focus-visible / disabled) */

/* Hover само на овозможена, неактивна ставка */
.ui-bottomnav__item:hover:not(:disabled):not(.ui-bottomnav__item--active) {
  background: var(--ui-color-base-bg-hover);
  color: var(--ui-color-text);
}

/* Видлив фокус индикатор (само за тастатура), inset за да не се скрати од лентата */
.ui-bottomnav__item:focus-visible {
  outline: var(--ui-focus-ring);
  outline-offset: -2px;
}

/* Активна ставка задржува primary акцент и при hover */
.ui-bottomnav__item--active:hover:not(:disabled) {
  background: var(--ui-color-base-bg-hover);
}

/* Оневозможена ставка — затемнета, без покажувач, без hover ефект */
.ui-bottomnav__item:disabled,
.ui-bottomnav__item--disabled {
  color: var(--ui-color-disabled);
  opacity: .55;
  cursor: not-allowed;
  pointer-events: none;
}

/* Патека B бран 4: UiBreadcrumb */
/* ── UiBreadcrumb: дополнителни состојби (§017) — за merge во ui-blazor.css ── */
/* active (притиснат) линк */
.ui-breadcrumb__link:active {
  color: var(--ui-color-primary-active, var(--ui-color-primary-hover));
}

/* keyboard фокус на ставка-текст (не-линк) што не е тековна — ретко фокусибилна, но видлив индикатор */
.ui-breadcrumb__text:focus-visible {
  outline: 2px solid var(--ui-color-primary);
  outline-offset: 2px;
  border-radius: var(--ui-radius-sm);
}

/* високо-контрастен (forced-colors) режим: задржи видлив фокус-индикатор согласно WCAG 2.2 */
@media (forced-colors: active) {
  .ui-breadcrumb__link:focus-visible,
  .ui-breadcrumb__text:focus-visible {
    outline-color: Highlight;
  }
}


/* Патека B бран 5 */
/* Патека B бран 5: UiListView */
/* ── UiListView: состојби (Ф3 визуелна/a11y полиш) ── */
/* hover на ставка — интерактивна повратна информација кога ставката е навигабилна/кликабилна */
.ui-listview__item:hover { background:var(--ui-color-base-bg-hover); }

/* focus-visible на ставка — видлив фокус-прстен за keyboard-only навигација (roving tabindex) */
.ui-listview__item:focus-visible { outline:var(--ui-focus-ring); outline-offset:-1px; }

/* selected/focused ставка (roving фокус-цел кога Navigable е активно) */
.ui-listview__item--selected { border-color:var(--ui-color-primary); box-shadow:inset 0 0 0 1px var(--ui-color-primary); }

/* focus-visible на пагер-копче — видлив фокус-прстен (досега имаше само :hover и :disabled) */
.ui-listview__pager-btn:focus-visible { outline:var(--ui-focus-ring); outline-offset:1px; }

/* active/pressed на пагер-копче */
.ui-listview__pager-btn:active:not(:disabled) { box-shadow:inset 0 0 0 2px var(--ui-color-primary); }

/* тековна страница (aria-current="page") — суптилно нагласување на инфо-етикетата */
.ui-listview__pager-info[aria-current="page"] { font-weight:600; color:var(--ui-color-primary); }

/* Патека B бран 5: UiPager */
/* §004 UiPager — состојби (hover / focus-visible / active-pressed / disabled refinement).
   Базните правила (.ui-pager, .ui-pager button, .ui-pager button:disabled,
   .ui-pager__page--active) веќе постојат во ui-blazor.css — НЕ ги дуплирам, само додавам
   состојби што недостасуваат. Само --ui-* токени. */

/* hover на навигациски + нумерички копчиња (исклучи disabled и активната страница) */
.ui-pager button:hover:not(:disabled):not(.ui-pager__page--active) {
  background: var(--ui-color-base-bg-hover);
  border-color: var(--ui-color-primary);
}

/* видлив фокус-индикатор (WCAG 2.2 AA) — само од тастатура */
.ui-pager button:focus-visible {
  outline: 2px solid var(--ui-color-primary);
  outline-offset: 1px;
}

/* притиснато (active) состојба за тактилен фидбек */
.ui-pager button:active:not(:disabled) {
  background: var(--ui-color-base-bg-hover);
}

/* hover на активната страница — потемна нијанса на примарната боја */
.ui-pager__page--active:hover {
  background: var(--ui-color-primary-hover);
}

/* фокус на активната страница — задржи бел текст, истакнат outline */
.ui-pager__page--active:focus-visible {
  outline: 2px solid var(--ui-color-primary);
  outline-offset: 2px;
}

/* disabled — рафиниран (постоечкото правило дава само opacity/cursor) */
.ui-pager button:disabled {
  color: var(--ui-color-disabled);
  pointer-events: none;
}

/* Патека B бран 5: UiCalendar */
/* === Патека B: UiCalendar (§039) — состојби + a11y (Ф3) === */
/* Адитивно, скоупирано на .ui-calendar. Веќе постоечки (НЕ дуплирани):
   .ui-calendar__nav-btn:hover, .ui-calendar__day:hover:not([disabled]),
   .ui-calendar__day--today, .ui-calendar__day--selected, .ui-calendar__day--muted,
   .ui-calendar__day[disabled]. Тука се додаваат само СОСТОЈБИТЕ што недостасуваа:
   focus-visible (видлив фокус прстен — WCAG 2.1 AA) и active (притисната).
   readonly/invalid НЕ се применливи (нема текстуален внес). */

/* nav-копчиња: видлив фокус прстен само за тастатура */
.ui-calendar__nav-btn:focus-visible {
  outline: var(--ui-focus-ring, 2px solid var(--ui-color-primary));
  outline-offset: 1px;
  border-color: var(--ui-color-primary);
}

/* nav-копчиња: притисната (active) состојба */
.ui-calendar__nav-btn:active {
  background: var(--ui-color-base-bg-hover);
  border-color: var(--ui-color-primary);
}

/* ден-ќелии: видлив фокус прстен само за тастатура (критично за grid навигација) */
.ui-calendar__day:focus-visible {
  outline: var(--ui-focus-ring, 2px solid var(--ui-color-primary));
  outline-offset: -2px;
}

/* фокусиран ИЗБРАН ден: фокусот мора да остане видлив врз primary позадината */
.ui-calendar__day--selected:focus-visible {
  outline-color: var(--ui-color-text-on-primary, #fff);
}

/* ден-ќелии: притисната (active) состојба — само кога не е disabled */
.ui-calendar__day:active:not([disabled]) {
  background: var(--ui-color-primary-hover);
  color: var(--ui-color-text-on-primary, #fff);
}

/* Патека B бран 5: UiMultiViewCalendar */
/* === Патека B: UiMultiViewCalendar (§040) — состојби + a11y (Ф3) === */
/* Адитивно, скоупирано на .ui-multiviewcalendar. Постоечките правила (hover, --muted,
   --today, --selected, [disabled]) веќе живеат во ui-blazor.css — тука се додаваат САМО
   состојбите што недостасуваа: focus-visible (тастатура), roving --focused, active (press). */

/* focus-visible: видлив фокус-прстен на гридот (точката на влез за roving focus, tabindex=0).
   Само при тастатурен фокус; мишот не го прикажува (WCAG 2.1 AA). */
.ui-multiviewcalendar__grid:focus { outline: none; }
.ui-multiviewcalendar__grid:focus-visible {
  outline: var(--ui-focus-ring, 2px solid var(--ui-color-primary));
  outline-offset: 2px;
  border-radius: var(--ui-radius);
}

/* --focused: визуелен индикатор за roving-focus денот (фокусот е на гридот преку
   aria-activedescendant, па ѕвонецот мора да го носи КЛАСАТА, не :focus на копчето).
   Се прикажува само додека гридот навистина држи фокус (:focus-within). */
.ui-multiviewcalendar__grid:focus-within .ui-multiviewcalendar__day--focused,
.ui-multiviewcalendar__grid:focus-visible .ui-multiviewcalendar__day--focused {
  outline: var(--ui-focus-ring, 2px solid var(--ui-color-primary));
  outline-offset: -2px;
}

/* focus-visible на самите ден-копчиња (ако корисникот ги фокусира директно, не преку roving) */
.ui-multiviewcalendar__day:focus-visible {
  outline: var(--ui-focus-ring, 2px solid var(--ui-color-primary));
  outline-offset: -2px;
}

/* active (press): благ feedback при притискање на ден што не е оневозможен */
.ui-multiviewcalendar__day:active:not([disabled]) {
  background: var(--ui-color-base-bg-hover);
}

/* focus-visible + active за навигациските копчиња (◀ ▶) — тастатура и притискање */
.ui-multiviewcalendar__nav-btn:focus-visible {
  outline: var(--ui-focus-ring, 2px solid var(--ui-color-primary));
  outline-offset: 1px;
  border-color: var(--ui-color-primary);
}
.ui-multiviewcalendar__nav-btn:active {
  background: var(--ui-color-base-bg-hover);
  border-color: var(--ui-color-primary);
}

/* Патека B бран 5: UiAutoComplete */
/* ── UiAutoComplete: состојби (Ф3 a11y/визуелна) — спој во ui-blazor.css ── */
/* hover на полето кога не е disabled/readonly (суптилен раб, по терк на ui-textbox) */
.ui-autocomplete:not(.ui-autocomplete--disabled):not(.ui-autocomplete--readonly) .ui-autocomplete__input:hover {
  border-color: var(--ui-color-primary-hover);
}
/* focus-visible: попрецизен focus ring (само тастатура), надополнува .ui-input:focus */
.ui-autocomplete .ui-autocomplete__input:focus-visible {
  outline: var(--ui-focus-ring, 2px solid var(--ui-color-primary));
  outline-offset: -1px;
  border-color: var(--ui-color-primary);
}
/* disabled: пригушено, без интеракција (надополнува постоечкото .ui-autocomplete--disabled{opacity}) */
.ui-autocomplete--disabled .ui-autocomplete__input,
.ui-autocomplete .ui-autocomplete__input:disabled {
  color: var(--ui-color-disabled);
  border-color: var(--ui-color-border);
  background: var(--ui-color-surface-2);
  cursor: not-allowed;
}
/* readonly: видливо но „заклучено" */
.ui-autocomplete--readonly .ui-autocomplete__input,
.ui-autocomplete .ui-autocomplete__input:read-only {
  background: var(--ui-color-surface-2);
  cursor: default;
}
/* invalid: опасен раб + усогласен focus ring (исто како .ui-textbox--invalid) */
.ui-autocomplete--invalid .ui-autocomplete__input {
  border-color: var(--ui-color-danger, #d32f2f);
}
.ui-autocomplete--invalid .ui-autocomplete__input:focus-visible {
  outline-color: var(--ui-color-danger, #d32f2f);
}
/* option: focus-visible (тастатурна навигација во листата) */
.ui-autocomplete__option:focus-visible {
  outline: var(--ui-focus-ring, 2px solid var(--ui-color-primary));
  outline-offset: -2px;
}
/* option: active (притиснат) — суптилно позасилен од hover */
.ui-autocomplete__option:active {
  background: var(--ui-color-surface-2);
}
/* option: selected (вредноста == ставката) — по терк на другите __option--selected */
.ui-autocomplete__option--selected {
  background: var(--ui-color-primary);
  color: #fff;
}
.ui-autocomplete__option--selected:hover {
  background: var(--ui-color-primary-hover);
}

/* Патека B бран 5: UiComboBox */
/* ── UiComboBox (§045): состојби (Ф3 a11y/визуелна) — АДИТИВНО, скоупирано на .ui-combobox.
   Базата (.ui-input, .ui-input:focus) веќе дава раб + focus ринг; следново ги додава
   состојбите што недостасуваа: hover / focus-visible / readonly / invalid + option active/focus. */

/* hover: суптилен раб на внесот кога не е disabled/readonly */
.ui-combobox:not(.ui-combobox--disabled):not(.ui-combobox--readonly) .ui-combobox__input:hover {
  border-color: var(--ui-color-primary-hover);
}

/* focus-visible: попрецизен focus ринг (само тастатура), надополнува .ui-input:focus */
.ui-combobox .ui-combobox__input:focus-visible {
  outline: var(--ui-focus-ring, 2px solid var(--ui-color-primary));
  outline-offset: -1px;
  border-color: var(--ui-color-primary);
}

/* видлив фокус и на стрелката-тригер (WCAG 2.1 AA) */
.ui-combobox__toggle:focus-visible {
  outline: var(--ui-focus-ring, 2px solid var(--ui-color-primary));
  outline-offset: -2px;
}

/* readonly: видливо но „заклучено" — суптилно различна позадина, без not-allowed */
.ui-combobox--readonly .ui-combobox__input,
.ui-combobox .ui-combobox__input:read-only {
  background: var(--ui-color-surface-2);
  cursor: default;
}
.ui-combobox--readonly .ui-combobox__toggle { cursor: default; }

/* invalid: опасен раб + match-уван focus ринг (исто како .ui-textbox--invalid) */
.ui-combobox--invalid .ui-combobox__input {
  border-color: var(--ui-color-danger, #d32f2f);
}
.ui-combobox--invalid .ui-combobox__input:focus-visible {
  outline-color: var(--ui-color-danger, #d32f2f);
  border-color: var(--ui-color-danger, #d32f2f);
}

/* опција: active (притисната) и focus-visible за тастатурна достапност;
   :hover и --selected веќе постојат во базата на компонентата. */
.ui-combobox__option:active {
  background: var(--ui-color-primary);
  color: var(--ui-color-text-on-primary, #fff);
}
.ui-combobox__option:focus-visible {
  outline: var(--ui-focus-ring, 2px solid var(--ui-color-primary));
  outline-offset: -2px;
}
/* hover/focus врз веќе избраната опција да остане читлива (не дупло пригушена) */
.ui-combobox__option--selected:hover {
  background: var(--ui-color-primary-hover);
  color: var(--ui-color-text-on-primary, #fff);
}

/* Патека B бран 5: UiDropDownList */
/* === Патека B: UiDropDownList (§047) — состојби + a11y (Ф3) === */
/* АДИТИВНО: постоечките правила (ui-blazor.css ~540–551: trigger :hover, --disabled,
   --open arrow, option :hover, --selected) ОСТАНУВААТ. Долунаведеново НЕ ги дуплира;
   додава само focus-visible / active / --open / --readonly / --invalid и option focus. */

/* focus-visible: видлив фокус-индикатор само од тастатура (недостасуваше — WCAG AA). */
.ui-dropdownlist__trigger:focus-visible {
  outline: var(--ui-focus-ring, 2px solid var(--ui-color-primary));
  outline-offset: 1px;
  border-color: var(--ui-color-primary);
}
/* Гасни го default-ниот браузерски outline кога постои focus-visible слој. */
.ui-dropdownlist__trigger:focus:not(:focus-visible) { outline: none; }

/* active: суптилен „притиснат" фидбек. */
.ui-dropdownlist__trigger:active { background: var(--ui-color-base-bg-hover); }

/* open: нагласен раб додека листата е отворена (комплемент на постоечкото вртење стрелка). */
.ui-dropdownlist--open .ui-dropdownlist__trigger { border-color: var(--ui-color-primary); }

/* readonly: видливо но „заклучено" — суптилно различно од normal (класата --readonly + aria-readonly од кодот). */
.ui-dropdownlist--readonly .ui-dropdownlist__trigger,
.ui-dropdownlist__trigger[aria-readonly="true"] {
  background: var(--ui-color-surface-2);
  cursor: default;
}

/* invalid: опасен раб + match-уван focus ring (--invalid класа + aria-invalid="true" од кодот). */
.ui-dropdownlist--invalid .ui-dropdownlist__trigger,
.ui-dropdownlist__trigger[aria-invalid="true"] {
  border-color: var(--ui-color-danger, #d32f2f);
}
.ui-dropdownlist--invalid .ui-dropdownlist__trigger:focus-visible,
.ui-dropdownlist__trigger[aria-invalid="true"]:focus-visible {
  outline-color: var(--ui-color-danger, #d32f2f);
  border-color: var(--ui-color-danger, #d32f2f);
}

/* option: фокус од тастатура + притиснат фидбек; selected задржува читлив hover. */
.ui-dropdownlist__option:focus-visible {
  outline: var(--ui-focus-ring, 2px solid var(--ui-color-primary));
  outline-offset: -2px;
}
.ui-dropdownlist__option:focus:not(:focus-visible) { outline: none; }
.ui-dropdownlist__option:active { background: var(--ui-color-base-bg-hover); }
.ui-dropdownlist__option--selected:hover { background: var(--ui-color-primary-hover); }

/* Патека B бран 5: UiMultiSelect */
/* ── UiMultiSelect (§048) — состојби што недостасуваа: focus-visible / readonly / invalid / option-keyboard.
   hover (control + option + chip-remove), --open, --disabled, --selected веќе постојат во ui-blazor.css
   (линии 577–588) и НЕ се дуплираат тука. Сите користат --ui-* токени и постоечки .ui-multiselect__* класи. ── */

/* focus-visible: видлив фокус-прстен на контролата за навигација со тастатура (WCAG 2.1 AA).
   Контролата сега е фокусибилна (tabindex=0 по дифолт; -1 кога е disabled/readonly). */
.ui-multiselect__control:focus-visible {
  outline: var(--ui-focus-ring, 2px solid var(--ui-color-primary));
  outline-offset: -1px;
  border-color: var(--ui-color-primary);
}
/* Кога фокусот е „видлив", потисни го дифолтниот браузерски outline за непрецизен :focus. */
.ui-multiselect__control:focus:not(:focus-visible) { outline: none; }

/* readonly: контролата е видлива, но без интеракција/курсор-поинтер и без hover-наглас. */
.ui-multiselect--readonly .ui-multiselect__control { cursor: default; background: var(--ui-color-base-bg); }
.ui-multiselect--readonly .ui-multiselect__control:hover { background: var(--ui-color-base-bg); }
.ui-multiselect--readonly .ui-multiselect__chip-remove { display: none; }

/* invalid: опасен раб + усогласен фокус-прстен во боја на грешка (по терк на .ui-textarea--invalid).
   aria-invalid="true" се поставува од кодот. */
.ui-multiselect--invalid .ui-multiselect__control { border-color: var(--ui-color-danger); }
.ui-multiselect--invalid .ui-multiselect__control:focus-visible {
  outline-color: var(--ui-color-danger);
  border-color: var(--ui-color-danger);
}

/* option: focus-visible за навигација низ листата со тастатура (Up/Down/Home/End). */
.ui-multiselect__option:focus-visible {
  outline: var(--ui-focus-ring, 2px solid var(--ui-color-primary));
  outline-offset: -2px;
}
/* active (притиснат) фидбек на опцијата. */
.ui-multiselect__option:active { background: var(--ui-color-base-bg-hover); }
/* hover/focus-visible врз веќе избрана опција: задржи го контрастот на --selected. */
.ui-multiselect__option--selected:hover,
.ui-multiselect__option--selected:focus-visible { background: var(--ui-color-primary); color: #fff; }

/* chip-remove: focus-visible за поединечно отстранување со тастатура. */
.ui-multiselect__chip-remove:focus-visible {
  outline: var(--ui-focus-ring, 2px solid var(--ui-color-primary));
  outline-offset: 1px;
  border-radius: var(--ui-radius);
}

/* Forced-colors / High-contrast: фокус-прстените да користат системска Highlight боја. */
@media (forced-colors: active) {
  .ui-multiselect__control:focus-visible,
  .ui-multiselect__option:focus-visible,
  .ui-multiselect__chip-remove:focus-visible { outline-color: Highlight; }
}

/* Патека B бран 5: UiMultiColumnComboBox */
/* ── UiMultiColumnComboBox: состојби (focus-visible / disabled / readonly / invalid) ──
   Базата (__input, __toggle, __arrow, --open, __row:hover, __row--selected, --disabled)
   веќе постои во ui-blazor.css (редови ~673-685). Подолу се САМО новите состојби. */

/* Видлив фокус-индикатор на внесот (WCAG 2.1/2.2 AA — focus-visible). */
.ui-mccombobox__input:focus-visible { outline: var(--ui-focus-ring, 2px solid var(--ui-color-primary)); outline-offset: -1px; }
/* Отстрани го default-ниот браузерски outline кога постои focus-visible слој. */
.ui-mccombobox__input:focus:not(:focus-visible) { outline: none; }

/* Стрелка-тригер: hover, focus-visible, оневозможено. */
.ui-mccombobox__toggle:hover { color: var(--ui-color-primary); }
.ui-mccombobox__toggle:focus-visible { outline: var(--ui-focus-ring, 2px solid var(--ui-color-primary)); outline-offset: -2px; }
.ui-mccombobox__toggle[disabled] { color: var(--ui-color-disabled); cursor: default; }

/* Disabled: бледа боја на текстот во полето (--disabled веќе дава opacity/pointer-events). */
.ui-mccombobox--disabled .ui-mccombobox__input,
.ui-mccombobox__input[disabled] { color: var(--ui-color-disabled); cursor: default; }

/* ReadOnly: видливо но неуредливо — суптилна позадина, курсор default. */
.ui-mccombobox--readonly .ui-mccombobox__input { background: var(--ui-color-base-bg-hover); cursor: default; }

/* Invalid: црвена граница на полето + усогласен фокус-прстен (aria-invalid огледало). */
.ui-mccombobox--invalid .ui-mccombobox__input { border-color: var(--ui-color-danger); }
.ui-mccombobox--invalid .ui-mccombobox__input:focus-visible { outline-color: var(--ui-color-danger); }

/* Ред: фокус-индикатор за тастатурна навигација (active-descendant визуелизација). */
.ui-mccombobox__row:focus-visible { outline: var(--ui-focus-ring, 2px solid var(--ui-color-primary)); outline-offset: -2px; }
/* Активен (hover/active) ред да не го изеде контрастот на избраниот ред. */
.ui-mccombobox__row--selected:hover { background: var(--ui-color-primary); color: #fff; }

/* High-contrast (forced-colors) — видлив фокус и кога темата е принудна. */
@media (forced-colors: active) {
  .ui-mccombobox__input:focus-visible,
  .ui-mccombobox__toggle:focus-visible,
  .ui-mccombobox__row:focus-visible { outline-color: Highlight; }
}

/* Патека B бран 5: UiForm */
/* === Патека B Ф3: UiForm (§069) — состојби + a11y === */
/* base .ui-form / --vertical / --horizontal / __actions веќе постојат — следново е АДИТИВНО. */

/* focus-within: суптилен сигнал дека некое поле во формата е активно (тастатурна навигација). */
.ui-form:focus-within {
  /* без раб по default (формата е контејнер), но темите можат да го искористат */
}

/* invalid: формата има активни валидациски пораки (класата ui-form--invalid + aria-invalid се
   емитуваат од кодот по EditContext.Validate / OnValidationStateChanged). */
.ui-form--invalid {
  /* акцентен лев раб како ненаметлив контејнерски маркер; темите можат да го прескокнат */
  /* border-inline-start е RTL-безбеден (се пресликува за десно-кон-лево) */
}
.ui-form--invalid .ui-form__submit:focus-visible {
  /* кога формата е невалидна, фокус-рингот на submit копчето добива опасна боја */
  outline-color: var(--ui-color-danger, #d32f2f);
}

/* disabled fieldset во рамки на формата: визуелно „заклучено" групирано поле */
.ui-form fieldset[disabled],
.ui-form fieldset.ui-form__group--disabled {
  opacity: .7;
  cursor: not-allowed;
}
.ui-form fieldset[disabled] * {
  pointer-events: none;
}

/* readonly семантика на самата форма (контејнер во режим само-читање) */
.ui-form--readonly .ui-form__actions {
  display: none; /* без акции кога формата е само за читање */
}

/* active submit (притиснат): благ feedback покрај наследените .ui-btn состојби.
   .ui-form__submit веќе ги наследува .ui-btn:hover/:focus-visible/[aria-disabled]; не ги дуплираме. */
.ui-form__submit:active:not([disabled]):not([aria-disabled="true"]) {
  transform: translateY(1px);
}
.ui-form__submit:disabled,
.ui-form__submit[aria-disabled="true"] {
  opacity: .6;
  cursor: not-allowed;
}

/* Патека B бран 5: UiUpload */
/* ── UiUpload (§070): состојби (focus-visible / disabled / dragover / active) ── */

/* Drag-over: активно довлекување над dropzone — посилен контраст + primary раб */
.ui-upload__dropzone--dragover {
  background: var(--ui-color-base-bg-hover);
  border-color: var(--ui-color-primary);
  border-style: solid;
}

/* Focus-visible: видлив фокус-прстен на dropzone кога нативниот overlay input има тастатурен фокус (WCAG AA) */
.ui-upload__dropzone:focus-within {
  border-color: var(--ui-color-primary);
}
.ui-upload__dropzone:has(.ui-upload__input:focus-visible) {
  outline: var(--ui-focus-ring, 2px solid var(--ui-color-primary));
  outline-offset: 2px;
}

/* Focus-visible: ставка во листата (стрелки/Delete навигација) */
.ui-upload__item:focus { outline: none; }
.ui-upload__item:focus-visible {
  outline: var(--ui-focus-ring, 2px solid var(--ui-color-primary));
  outline-offset: -2px;
}

/* Focus-visible + active на remove-копчето */
.ui-upload__remove:focus { outline: none; }
.ui-upload__remove:focus-visible {
  outline: var(--ui-focus-ring, 2px solid var(--ui-color-primary));
  outline-offset: 1px;
}
.ui-upload__remove:active:not(:disabled) {
  background: var(--ui-color-base-bg-hover);
  color: var(--ui-color-danger, #d33);
}

/* Disabled: цела компонента оневозможена (Enabled=false) */
.ui-upload--disabled { opacity: .6; cursor: not-allowed; }
.ui-upload--disabled .ui-upload__dropzone {
  cursor: not-allowed;
  background: var(--ui-color-base-bg);
  border-color: var(--ui-color-border);
}
.ui-upload--disabled .ui-upload__dropzone:hover {
  background: var(--ui-color-base-bg);
  border-color: var(--ui-color-border);
}
.ui-upload__input:disabled { cursor: not-allowed; pointer-events: none; }
.ui-upload__remove:disabled {
  color: var(--ui-color-disabled);
  cursor: not-allowed;
  pointer-events: none;
}

/* High-contrast / forced-colors: видлив фокус и кога темата е заменета */
@media (forced-colors: active) {
  .ui-upload__dropzone:has(.ui-upload__input:focus-visible),
  .ui-upload__item:focus-visible,
  .ui-upload__remove:focus-visible { outline-color: Highlight; }
}

/* Патека B бран 5: UiFileSelect */
/* ── UiFileSelect (§071): состојби + пристапност (фокус/active/focus-within/invalid/disabled) ── */

/* Видлив фокус-индикатор на копчето-лабела за избор (WCAG 2.4.7 / 1.4.11). */
.ui-fileselect__button:focus-visible { outline:2px solid var(--ui-color-primary); outline-offset:1px; }
/* Кога постои focus-visible слој, потисни го default-ниот browser outline при focus без focus-visible. */
.ui-fileselect__button:focus:not(:focus-visible) { outline:none; }

/* Pressed (active) состојба на копчето за избор. */
.ui-fileselect__button:active { background:var(--ui-color-base-bg-hover); transform:translateY(0.5px); }

/* Видлив фокус-индикатор на копчето „×" за отстранување (roving фокус со Arrow Up/Down + Delete). */
.ui-fileselect__remove:focus-visible { outline:2px solid var(--ui-color-primary); outline-offset:1px; border-radius:var(--ui-radius); }
.ui-fileselect__remove:focus:not(:focus-visible) { outline:none; }

/* Истакнување на цела ставка кога нешто во неа е фокусирано (целник за тастатурна навигација). */
.ui-fileselect__item:focus-within { border-color:var(--ui-color-primary); box-shadow:inset 0 0 0 1px var(--ui-color-primary); }

/* Невалидна датотека (екстензија/големина): индикација што НЕ зависи само од боја (WCAG 1.4.1) —
   подебел лев раб + полудебел текст, покрај бојата. Закачено и на [aria-invalid] хук за идна валидација. */
.ui-fileselect__item--invalid,
.ui-fileselect__item[aria-invalid="true"] {
  border-color:var(--ui-color-danger);
  border-inline-start-width:3px;
}
.ui-fileselect__item--invalid .ui-fileselect__name,
.ui-fileselect__item[aria-invalid="true"] .ui-fileselect__name { color:var(--ui-color-danger); font-weight:600; }
.ui-fileselect__item--invalid:focus-within,
.ui-fileselect__item[aria-invalid="true"]:focus-within { box-shadow:inset 0 0 0 1px var(--ui-color-danger); }

/* Оневозможена компонента (кога Enabled-параметар ќе се вмрежи): пригушено + без покажувач. */
.ui-fileselect--disabled { opacity:.55; }
.ui-fileselect--disabled .ui-fileselect__button { cursor:not-allowed; pointer-events:none; }
.ui-fileselect--disabled .ui-fileselect__remove { cursor:not-allowed; pointer-events:none; }


/* Патека B бран 6 */
/* Патека B бран 6: UiArcGauge */
/* === UiArcGauge (§079) — визуелна/a11y дополна ============================ */
/* Мазен премин на лакот при промена на вредноста (спец „Transitions"; ист */
/* патерн како .ui-lineargauge__fill). Се применува само на предниот пат   */
/* (вториот <path> во SVG-то); позадинската трага останува статична.       */
.ui-arcgauge path:nth-of-type(2) {
  transition: stroke-dashoffset .3s ease;
}

/* Почитувај ја корисничката преференца за намалено движење (WCAG 2.3.3 /  */
/* a11y): без анимиран премин кога системот бара редуцирана анимација.     */
@media (prefers-reduced-motion: reduce) {
  .ui-arcgauge path:nth-of-type(2) { transition: none; }
}

/* High-contrast / forced-colors режим (Windows HCM): SVG stroke-овите што  */
/* користат тема-токени се принудно префарбани од ОС, па експлицитно ги     */
/* мапираме на системски бои за да остане мерачот читлив и контрастен.      */
@media (forced-colors: active) {
  .ui-arcgauge path:nth-of-type(1) { stroke: CanvasText; opacity: .35; }
  .ui-arcgauge path:nth-of-type(2) { stroke: Highlight; }
  .ui-arcgauge .ui-gauge__text     { fill: CanvasText; }
}

/* Патека B бран 6: UiCircularGauge */
/* §080 CircularGauge — состојби и пристапност (additive; ништо постоечко не се газе) */

/* Фокус: SVG-то не е фокусибилно по дифолт (спец §080 — Навигација). Кога
   потрошувачот експлицитно додаде tabindex, мора да има видлив фокус-прстен (WCAG 2.4.7). */
.ui-circulargauge:focus { outline: none; }
.ui-circulargauge:focus-visible {
  outline: var(--ui-focus-ring, 2px solid var(--ui-color-primary));
  outline-offset: 2px;
  border-radius: 50%;
}

/* High-contrast / forced-colors: задржи видлив фокус-прстен и кога темата е принудна. */
@media (forced-colors: active) {
  .ui-circulargauge:focus-visible { outline-color: Highlight; }
  /* Вредносната арка и текстот да користат системски бои за да останат видливи и
     значењето да не зависи само од бојата (WCAG 1.4.1 / 1.4.11 Non-text Contrast). */
  .ui-circulargauge .ui-gauge__text { fill: CanvasText; }
}

/* Патека B бран 6: UiLinearGauge */
/* §081 LinearGauge — состојба: disabled (визуелно придушување).
   Базните .ui-lineargauge / .ui-lineargauge__fill веќе постојат во ui-blazor.css;
   тука се додава само модификаторот за придушена состојба. Користи --ui-* токени. */
.ui-lineargauge--disabled { opacity: .55; cursor: default; }
.ui-lineargauge--disabled .ui-lineargauge__fill { background: var(--ui-color-border); transition: none; }

/* ── §081 LinearGauge — обоени зони, целен маркер, етикета, вертикала ──
   Базните .ui-lineargauge / .ui-lineargauge__fill се дефинирани погоре во фајлов.
   Координатите (left/width хоризонтално или bottom/height вертикално) ги поставува
   инлајн самата компонента; тука се само слоевитоста, позиционирањето и вертикалната
   ориентација. Сите бои се од --ui-* токени (значењето не зависи само од бојата). */

/* Коренот е позициски контекст за апсолутно позиционираните под-елементи. */
.ui-lineargauge { position: relative; }

/* Обоени зони (range) — позадински сегменти под пополнувањето. */
.ui-lineargauge__range { position: absolute; top: 0; bottom: 0; z-index: 0; }

/* Пополнувањето е над зоните. */
.ui-lineargauge__fill { position: relative; z-index: 1; }

/* Целен маркер (втор покажувач) — тенка линија над пополнувањето. */
.ui-lineargauge__target {
  position: absolute; top: 0; bottom: 0; width: 2px; z-index: 2;
  background: var(--ui-color-text); transform: translateX(-1px);
}

/* Вградена/прилагодена етикета — центрирана над лентата. */
.ui-lineargauge__label {
  position: absolute; inset: 0; z-index: 2;
  display: flex; align-items: center; justify-content: center;
  font: 600 11px/1 var(--ui-font); color: var(--ui-color-text);
  white-space: nowrap; pointer-events: none;
}
/* Кога има етикета, лентата треба доволно висина за текстот (default е 10px). */
.ui-lineargauge:has(.ui-lineargauge__label):not(.ui-lineargauge--vertical) { height: 20px; }

/* Експлицитно исклучени транзиции (Transitions=false). */
.ui-lineargauge--no-transitions .ui-lineargauge__fill { transition: none; }

/* ── Вертикална ориентација: пополнување по висина, одоздола нагоре ── */
.ui-lineargauge--vertical { width: 14px; height: 120px; }
.ui-lineargauge--vertical .ui-lineargauge__fill {
  position: absolute; left: 0; right: 0; bottom: 0; width: auto; transition: height .3s;
}
.ui-lineargauge--vertical .ui-lineargauge__range { left: 0; right: 0; top: auto; bottom: auto; height: auto; }
.ui-lineargauge--vertical .ui-lineargauge__target {
  left: 0; right: 0; top: auto; bottom: 0; width: auto; height: 2px; transform: translateY(1px);
}

/* Почитувај ги корисничките преференции за намалено движење. Мора да доаѓа ПОСЛЕ
   вертикалното правило за да го надвладее неговиот transition:height. */
@media (prefers-reduced-motion: reduce) {
  .ui-lineargauge__fill,
  .ui-lineargauge--vertical .ui-lineargauge__fill { transition: none; }
}

/* Патека B бран 6: UiRadialGauge */
/* ── UiRadialGauge: пристапност / forced-colors (Windows High Contrast) ──
   Мерачот е презентациска SVG графика без интерактивни состојби (нема
   hover/focus/disabled/active/selected/readonly/invalid по спец §082 —
   не зема фокус и не обработува тастатура). Единствената применлива
   „состојбена" грижа е видливоста при forced-colors режим: SVG fill/stroke
   на var(--ui-color-*) се игнорираат во тој режим, па ги мапираме на
   системски бои за да остане легибилен (WCAG 1.4.11 / 1.4.3). */
@media (forced-colors: active) {
  .ui-radialgauge { forced-color-adjust: none; }
  .ui-radialgauge line,
  .ui-radialgauge circle[fill="var(--ui-color-primary)"] { stroke: CanvasText; fill: CanvasText; }
  .ui-radialgauge circle[fill="none"] { stroke: GrayText; }
  .ui-radialgauge .ui-gauge__text { fill: CanvasText; }
}

/* Патека B бран 6: UiGridLayout */
/* §028 UiGridLayout — базни структурни класи (недостасуваа во ui-blazor.css).
   Само статична структура со --ui-* токени; БЕЗ состојби (hover/focus/active/disabled/
   selected/readonly/invalid) — спецификацијата изречно вели дека ова е чист, неинтерактивен
   контејнер за распоред без интерактивни состојби и без наметната ARIA семантика.
   НЕ ги редекларира display:grid / grid-template-columns / gap — тие остануваат инлајн
   (постоечките тестови ги бараат во style атрибутот), па нема судир. */
.ui-grid-layout {
  box-sizing: border-box;
}
/* Идна ставка (GridLayoutItem) — базна класа подготвена однапред; неутрална, без декорација по дифолт. */
.ui-grid-layout-item {
  min-width: 0; /* спречи прелевање на содржина во grid траките */
}

/* Патека B бран 6: UiStackLayout */
/* §029 StackLayout — базично тема-правило за коренската класа.
   Спецификацијата (§029 „Стилизирање и теми") бара флекс правилата да живеат
   во темата преку базична класа; имплементацијата моментно ги емитува inline.
   Ова правило е дефанзивно: inline style од компонентата (display/flex-direction/gap)
   победува по специфичност, па не се газат постоечките тестови.
   НЕМА hover/focus/active/disabled/selected/readonly/invalid селектори — по спец
   StackLayout е чисто презентациски контејнер БЕЗ интерактивни состојби
   (§State: „Не е применливо"; §Пристапност: неутрален div без наметната role). */
.ui-stack-layout {
  display: flex;
  box-sizing: border-box;
  /* спречување на flexbox overflow blow-out за вгнездена содржина (конвенција во проектот) */
  min-width: 0;
  min-height: 0;
}

/* RTL: хоризонталниот тек се превртува заедно со насоката на документот.
   Flexbox `row` веќе го почитува `dir`, па нема потреба од трансформации —
   ова само го прави експлицитно усогласувањето од §Глобализација (WCAG 1.3.2). */
[dir="rtl"] .ui-stack-layout {
  direction: rtl;
}

/* Патека B бран 6: UiTileLayout */
/* ── UiTileLayout — состојби (§030: видлив фокус + hover affordance + заклучен распоред) ── */

/* Hover на плочка (секое директно дете е визуелна плочка, како во постоечкото
   правило `.ui-tile-layout > *`). Дискретна промена на позадина + сенка за affordance. */
.ui-tile-layout > *:hover {
  background: var(--ui-color-base-bg-hover);
}

/* Видлив фокус-индикатор на плочка (WCAG 2.1/2.2 AA — спец §030 Пристапност).
   focus-visible за да не „трепка" при клик со глувче; outline-offset за да не се
   сече од border-radius на плочката. */
.ui-tile-layout > *:focus-visible {
  outline: var(--ui-focus-ring);
  outline-offset: 1px;
}

/* Видлив фокус и на самиот регион-група кога е фокусибилен (TabIndex поставен). */
.ui-tile-layout:focus-visible {
  outline: var(--ui-focus-ring);
  outline-offset: 2px;
}

/* Активна состојба / плочка што се влече (reorder/resize) — повисока сенка
   и блага транспарентност како „grabbed" affordance. */
.ui-tile-layout > *:active,
.ui-tile-layout > *.ui-tile-layout-item--dragging {
  box-shadow: 0 4px 14px rgba(0, 0, 0, .18);
  opacity: .9;
}

/* Заклучен (disabled) распоред: пригушен изглед, без интеракција/фокус на плочките. */
.ui-tile-layout--disabled {
  opacity: .6;
  cursor: not-allowed;
}
.ui-tile-layout--disabled > * {
  pointer-events: none;
}

/* Патека B бран 6: UiScrollView */
/* === Патека B (визуелна/a11y): UiScrollView (§036) === */
/* UiScrollView е презентациски скролувачки контејнер (role="region").
   Нормално не презема фокус; кога авторот зададе TabIndex станува
   тастатурно-скролувачка област со видлив фокус-прстен (WCAG 2.1/2.2 AA).
   Интерактивните состојби hover/active/disabled/selected/readonly/invalid
   намерно НЕ се на хостот — тие им припаѓаат на навигациските контроли
   (стрелки/индикатори) на каруселниот модел, кои сè уште не постојат тука.
   Адитивно е спрямо постоечкото `.ui-scrollview { overflow:auto; }`. */

/* Focus-visible: видлив фокус-индикатор само при тастатурен фокус. */
.ui-scrollview:focus-visible {
  outline: var(--ui-focus-ring, 2px solid var(--ui-color-primary));
  outline-offset: 2px;
}

/* Отстрани го browser default outline кога постои focus-visible слој. */
.ui-scrollview:focus:not(:focus-visible) { outline: none; }

/* Почитувај prefers-reduced-motion за евентуалните анимации на скрол/премин
   (барано од спецификацијата — „Анимациите ја почитуваат prefers-reduced-motion"). */
@media (prefers-reduced-motion: reduce) {
  .ui-scrollview { scroll-behavior: auto; }
  .ui-scrollview * { scroll-behavior: auto; }
}

/* High-contrast / forced-colors: фокус-прстенот да остане видлив. */
@media (forced-colors: active) {
  .ui-scrollview:focus-visible { outline-color: Highlight; }
}

/* Патека B бран 6: UiToolBar */
/* === Патека B: UiToolBar (§037) — состојби + a11y === */
/* Алатникот е презентациски контејнер: hover/active/focus им припаѓаат на алатките;
   на ниво на лентата покриваме focus-within (видлив фокус при навигација), disabled
   на алатките преку aria-disabled, и forced-colors / reduced-motion. Токени --ui-*,
   ui- префикс, постоечка класа .ui-toolbar. */

/* Focus-within: видлив фокусен слој на лентата кога некоја алатка е фокусирана
   (WCAG 2.4.7 focus visible; фокусот останува логичен при roving навигација). */
.ui-toolbar:focus-within {
  outline: var(--ui-focus-ring, 2px solid var(--ui-color-primary));
  outline-offset: 1px;
}

/* Кога самата лента е фокусибилна (TabIndex) — фокус само при тастатура. */
.ui-toolbar:focus { outline: none; }
.ui-toolbar:focus-visible {
  outline: var(--ui-focus-ring, 2px solid var(--ui-color-primary));
  outline-offset: 1px;
}

/* Disabled алатка во лентата — преку aria-disabled (без нова класа/параметар),
   усогласено со спец „Оневозможените алатки добиваат aria-disabled='true'". */
.ui-toolbar [aria-disabled="true"] {
  opacity: 0.55;
  cursor: not-allowed;
  pointer-events: none;
}

/* Цела лента оневозможена (наследено од обвивка) — пригуши и блокирај интеракција. */
.ui-toolbar[aria-disabled="true"] {
  opacity: 0.6;
  pointer-events: none;
}

/* High-contrast / forced-colors — задржи видлив фокусен прстен. */
@media (forced-colors: active) {
  .ui-toolbar:focus-within,
  .ui-toolbar:focus-visible { outline-color: Highlight; }
}

/* Почитувај намалена анимација. */
@media (prefers-reduced-motion: reduce) {
  .ui-toolbar { transition: none; }
}

/* Патека B бран 6: UiActionSheet */
/* ── UiActionSheet (§038) — состојби што недостасуваа: focus-visible (на панелот и копчето
   „Откажи") / --focused (тастатурно фокусирана ставка) / active (press) / нативен :disabled.
   hover и --disabled веќе постојат во основниот блок (ред 481–483). Се спојуваат по нив.
   Спец §038: „Стилизирање и теми" + „Навигација со тастатура" + „Пристапност". */

/* Видлив фокус-прстен на панелот (tabindex=-1 — прима почетна фокус и keydown). */
.ui-actionsheet:focus { outline: none; }
.ui-actionsheet:focus-visible {
  outline: var(--ui-focus-ring, 2px solid var(--ui-color-primary));
  outline-offset: -1px;
}

/* Тастатурно фокусираната ставка (ArrowUp/Down/Home/End) — истакната + фокус-прстен. */
.ui-actionsheet__item--focused {
  background: var(--ui-color-base-bg-hover);
  outline: 2px solid var(--ui-color-primary);
  outline-offset: -2px;
}

/* Фокус со тастатура преку Tab директно на нативното копче-ставка. */
.ui-actionsheet__item:focus { outline: none; }
.ui-actionsheet__item:focus-visible {
  outline: 2px solid var(--ui-color-primary);
  outline-offset: -2px;
}

/* Притисок (active) на неоневозможена ставка — благ визуелен фидбек. */
.ui-actionsheet__item:not(.ui-actionsheet__item--disabled):active {
  background: var(--ui-color-base-bg-hover);
}

/* Нативниот disabled атрибут (кодот го става и на класата и како attribute). */
.ui-actionsheet__item:disabled {
  color: var(--ui-color-disabled);
  cursor: not-allowed;
}
.ui-actionsheet__item:disabled:hover { background: none; }

/* Копче „Откажи" — hover / focus-visible / active. */
.ui-actionsheet__cancel:hover { background: var(--ui-color-base-bg-hover); }
.ui-actionsheet__cancel:focus { outline: none; }
.ui-actionsheet__cancel:focus-visible {
  outline: var(--ui-focus-ring, 2px solid var(--ui-color-primary));
  outline-offset: -2px;
}
.ui-actionsheet__cancel:active { background: var(--ui-color-base-bg-hover); }

/* Високо-контрастен режим (forced-colors): системски фокус-прстен. */
@media (forced-colors: active) {
  .ui-actionsheet:focus-visible,
  .ui-actionsheet__item:focus-visible,
  .ui-actionsheet__item--focused,
  .ui-actionsheet__cancel:focus-visible { outline-color: Highlight; }
  .ui-actionsheet__item--disabled,
  .ui-actionsheet__item:disabled { color: GrayText; }
}

/* Патека B бран 6: UiCarousel */
/* Патека B: UiCarousel (§103) — состојби + a11y фокус (Ф3). Адитивно, скоупирано на
   .ui-carousel. Базните правила (.ui-carousel, .ui-carousel__slide, .ui-carousel__prev,
   .ui-carousel__next) веќе постојат во ui-blazor.css (~281–283) — НЕ ги дуплирам, само
   додавам состојби што недостасуваат. Само --ui-* токени. */

/* Коренот сега е фокусибилен (tabindex) за тастатурна навигација ←/→/Home/End — видлив
   фокус-прстен само од тастатура (WCAG 2.4.7), без outline при покажувач. */
.ui-carousel:focus { outline: none; }
.ui-carousel:focus-visible {
  outline: var(--ui-focus-ring, 2px solid var(--ui-color-primary));
  outline-offset: 2px;
  border-radius: var(--ui-radius);
}

/* hover на навигациските копчиња — суптилна позадина + истакната граница */
.ui-carousel__prev:hover,
.ui-carousel__next:hover {
  background: var(--ui-color-base-bg-hover);
  border-color: var(--ui-color-primary);
}

/* видлив фокус-индикатор на копчињата (WCAG 2.2 AA) — само од тастатура */
.ui-carousel__prev:focus { outline: none; }
.ui-carousel__next:focus { outline: none; }
.ui-carousel__prev:focus-visible,
.ui-carousel__next:focus-visible {
  outline: 2px solid var(--ui-color-primary);
  outline-offset: 2px;
}

/* притиснато (active) — кратка тактилна повратна информација при клик */
.ui-carousel__prev:active,
.ui-carousel__next:active {
  background: var(--ui-color-base-bg-hover);
  border-color: var(--ui-color-primary-hover);
}

/* disabled — рафинирана состојба за случај кога авторот ги оневозможи стрелките */
.ui-carousel__prev:disabled,
.ui-carousel__next:disabled {
  opacity: .5;
  color: var(--ui-color-disabled);
  cursor: not-allowed;
  pointer-events: none;
}

/* Патека B бран 6: UiSankey */
/* Sankey — состојби (фокус/hover/selected/highlight) — додадени за Ф3 a11y.
   Не го дуплираат постоечкото .ui-sankey__link:hover (ll.728). Користат --ui-* токени. */

/* Видлив focus ring на коренот (фокусабилен кога потрошувачот сплета tabindex='0')
   и на интерактивните под-елементи — спец §085 Пристапност „focus ring". */
.ui-sankey:focus-visible { outline:2px solid var(--ui-color-primary); outline-offset:2px; }
.ui-sankey__node-group:focus-visible { outline:none; }
.ui-sankey__node-group:focus-visible .ui-sankey__node { outline:2px solid var(--ui-color-primary); outline-offset:1px; }
.ui-sankey__link:focus-visible { outline:none; stroke-opacity:.85; }

/* Hover на јазол (паритет со hover на врската; аудитот го флагираше како missing). */
.ui-sankey__node { transition:fill-opacity .15s ease, stroke-opacity .15s ease; }
.ui-sankey__node-group:hover .ui-sankey__node { fill-opacity:.85; }

/* Highlight/inactive модификатори за SankeyLinksHighlight (InactiveOpacity/Opacity) и
   избран (selected) јазол/врска — спремни state-модификатори, без хардкодирани бои. */
.ui-sankey__link--highlight { stroke-opacity:.85; }
.ui-sankey__link--inactive { stroke-opacity:.2; }
.ui-sankey__link--selected { stroke-opacity:.9; }
.ui-sankey__node--selected { fill-opacity:1; stroke:var(--ui-color-primary); stroke-width:2; }

/* Намалено движење: исклучи ги транзициите за корисници со prefers-reduced-motion. */
@media (prefers-reduced-motion: reduce) {
  .ui-sankey__link, .ui-sankey__node { transition:none; }
}


/* ═══ 15-dev бран: CSS од Opus агенти (AppBar/BottomNav/ActionSheet/Carousel/ToolBar/layouts/Splitter/Popover/Wizard/Pager/ListView/Drawer/PanelBar/Timeline) ═══ */

/* === UiAppBar: позиционирање, теми, под-елементи === */
.ui-appbar--static { position: static; }
.ui-appbar--sticky { position: sticky; z-index: var(--ui-z-sticky); }
.ui-appbar--fixed { position: fixed; left: 0; right: 0; z-index: var(--ui-z-sticky); }
.ui-appbar--top.ui-appbar--sticky, .ui-appbar--top.ui-appbar--fixed { top: 0; bottom: auto; }
.ui-appbar--bottom.ui-appbar--sticky, .ui-appbar--bottom.ui-appbar--fixed { bottom: 0; top: auto; }
.ui-appbar--bottom { border-radius: 0; }
.ui-appbar--base { background: var(--ui-color-base-bg); color: var(--ui-color-text); }
.ui-appbar--primary { background: var(--ui-color-primary); color: var(--ui-color-text-on-primary); }
.ui-appbar--secondary { background: #5a6570; color: #fff; }
.ui-appbar--tertiary { background: #7a8794; color: #fff; }
.ui-appbar--info { background: #2f80c8; color: #fff; }
.ui-appbar--success { background: #2e7d32; color: #fff; }
.ui-appbar--warning { background: #ed8a19; color: #fff; }
.ui-appbar--error { background: #d23b3b; color: #fff; }
.ui-appbar--dark { background: #2a2f36; color: #fff; }
.ui-appbar--light { background: #f3f4f6; color: var(--ui-color-text); }
.ui-appbar--inverse { background: var(--ui-color-text); color: var(--ui-color-text-on-primary); }
.ui-appbar__section { display: inline-flex; align-items: center; gap: 8px; }
.ui-appbar__spacer--flex { flex: 1 1 auto; }
.ui-appbar__spacer--fixed { flex: 0 0 auto; }
.ui-appbar__separator { width: 1px; align-self: stretch; min-height: 24px; margin: 0 4px; background: currentColor; opacity: 0.3; }

/* ── UiBottomNavigation §018: НОВИ класи (theme/fill/border/align/sub-elements/rows). 
   Базните состојби (.ui-bottomnav, __item, --active, :hover, :focus-visible, :disabled, --disabled)
   ВЕЌЕ постојат во ui-blazor.css (линии 289-291 и 2799-2825) — НЕ ги дуплирам. 
   Само --ui-* токени; за непостоечки токени (secondary/tertiary/inverse) користам var(...,fallback). ── */

/* Содржина: вертикален стек икона над текст (default Bottom) */
.ui-bottomnav__item { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; }
.ui-bottomnav__item-icon { display:inline-flex; align-items:center; justify-content:center; position:relative; line-height:1; }
.ui-bottomnav__item-text { display:block; line-height:1.2; }

/* Минимална резервирана висина за текстот под иконата (ItemRowsCount) */
.ui-bottomnav__item-text { min-height: calc(var(--ui-bottomnav-item-rows, 1) * 1.2em); }

/* Значка (badge) над иконата */
.ui-bottomnav__item-badge {
  position:absolute; top:-6px; left:100%; transform:translateX(-50%);
  min-width:16px; height:16px; padding:0 4px; box-sizing:border-box;
  display:inline-flex; align-items:center; justify-content:center;
  font-size:10px; font-weight:600; line-height:1; border-radius:999px;
  background:var(--ui-color-error, #d33); color:var(--ui-color-text-on-primary, #fff);
}

/* Порамнување текст vs икона */
.ui-bottomnav__item--align-bottom { flex-direction:column; }
.ui-bottomnav__item--align-top { flex-direction:column-reverse; }
.ui-bottomnav__item--align-start { flex-direction:row-reverse; gap:6px; }
.ui-bottomnav__item--align-end { flex-direction:row; gap:6px; }

/* Линк-ставка да изгледа како копче-ставка (без подвлекување) */
a.ui-bottomnav__item { text-decoration:none; }
a.ui-bottomnav__item:hover { text-decoration:none; }

/* Fill: flat = без позадина/раб на лентата */
.ui-bottomnav--flat { background:transparent; border-color:transparent; }
/* Border=false: тргни го рабовите/сепараторот на лентата */
.ui-bottomnav--no-border { border:none; }

/* ThemeColor варијанти — позадина на лентата + контрастен текст; активната ставка останува нагласена.
   За непостоечки токени користам разумен fallback за да не „пукне" стилот пред да се додадат во темата. */
.ui-bottomnav--primary { background:var(--ui-color-primary); border-color:var(--ui-color-primary); color:var(--ui-color-text-on-primary); }
.ui-bottomnav--primary .ui-bottomnav__item { color:var(--ui-color-text-on-primary); opacity:.85; }
.ui-bottomnav--primary .ui-bottomnav__item--active { color:var(--ui-color-text-on-primary); opacity:1; }

.ui-bottomnav--secondary { background:var(--ui-color-secondary, #6c757d); border-color:var(--ui-color-secondary, #6c757d); color:var(--ui-color-text-on-primary, #fff); }
.ui-bottomnav--secondary .ui-bottomnav__item { color:var(--ui-color-text-on-primary, #fff); opacity:.85; }
.ui-bottomnav--secondary .ui-bottomnav__item--active { opacity:1; }

.ui-bottomnav--tertiary { background:var(--ui-color-tertiary, #495057); border-color:var(--ui-color-tertiary, #495057); color:var(--ui-color-text-on-primary, #fff); }
.ui-bottomnav--tertiary .ui-bottomnav__item { color:var(--ui-color-text-on-primary, #fff); opacity:.85; }
.ui-bottomnav--tertiary .ui-bottomnav__item--active { opacity:1; }

.ui-bottomnav--info { background:var(--ui-color-info, #2f81d6); border-color:var(--ui-color-info, #2f81d6); color:var(--ui-color-text-on-primary, #fff); }
.ui-bottomnav--info .ui-bottomnav__item { color:var(--ui-color-text-on-primary, #fff); opacity:.85; }
.ui-bottomnav--info .ui-bottomnav__item--active { opacity:1; }

.ui-bottomnav--success { background:var(--ui-color-success, #2e9e57); border-color:var(--ui-color-success, #2e9e57); color:var(--ui-color-text-on-primary, #fff); }
.ui-bottomnav--success .ui-bottomnav__item { color:var(--ui-color-text-on-primary, #fff); opacity:.85; }
.ui-bottomnav--success .ui-bottomnav__item--active { opacity:1; }

.ui-bottomnav--warning { background:var(--ui-color-warning, #e0a800); border-color:var(--ui-color-warning, #e0a800); color:var(--ui-color-text, #1b1f24); }
.ui-bottomnav--warning .ui-bottomnav__item { color:var(--ui-color-text, #1b1f24); opacity:.8; }
.ui-bottomnav--warning .ui-bottomnav__item--active { opacity:1; font-weight:600; }

.ui-bottomnav--error { background:var(--ui-color-error, #d33); border-color:var(--ui-color-error, #d33); color:var(--ui-color-text-on-primary, #fff); }
.ui-bottomnav--error .ui-bottomnav__item { color:var(--ui-color-text-on-primary, #fff); opacity:.85; }
.ui-bottomnav--error .ui-bottomnav__item--active { opacity:1; }

.ui-bottomnav--dark { background:#1b1f24; border-color:#1b1f24; color:#fff; }
.ui-bottomnav--dark .ui-bottomnav__item { color:#fff; opacity:.7; }
.ui-bottomnav--dark .ui-bottomnav__item--active { opacity:1; }

.ui-bottomnav--light { background:#fff; border-color:var(--ui-color-border); color:var(--ui-color-text); }
.ui-bottomnav--light .ui-bottomnav__item { color:var(--ui-color-text); opacity:.75; }
.ui-bottomnav--light .ui-bottomnav__item--active { color:var(--ui-color-primary); opacity:1; }

.ui-bottomnav--inverse { background:var(--ui-color-inverse, #1b1f24); border-color:var(--ui-color-inverse, #1b1f24); color:var(--ui-color-text-on-primary, #fff); }
.ui-bottomnav--inverse .ui-bottomnav__item { color:var(--ui-color-text-on-primary, #fff); opacity:.7; }
.ui-bottomnav--inverse .ui-bottomnav__item--active { opacity:1; }

/* Во обоени варијанти, фокус-прстенот да остане видлив на контрастна позадина */
.ui-bottomnav--primary .ui-bottomnav__item:focus-visible,
.ui-bottomnav--dark .ui-bottomnav__item:focus-visible,
.ui-bottomnav--inverse .ui-bottomnav__item:focus-visible { outline-color:var(--ui-color-text-on-primary, #fff); }

/* forced-colors: задржи видлив фокус согласно WCAG 2.2 */
@media (forced-colors: active) {
  .ui-bottomnav__item:focus-visible { outline-color: Highlight; }
}

/* ===== UiActionSheet — проширување (позиции, анимации, шаблонски режим, RTL, теми) ===== */
/* НАПОМЕНА: базните .ui-actionsheet* правила (ред ~491–502 и 3620–3671) ОСТАНУВААТ.
   Овие правила се АДИТИВНИ. Не менувам постоечки селектори. */

/* Overlay алинеа според позицијата на панелот (модерен :has(), поддржан 2026). */
.ui-actionsheet-overlay:has(> .ui-actionsheet--bottom) { align-items: flex-end;    justify-content: center; }
.ui-actionsheet-overlay:has(> .ui-actionsheet--top)    { align-items: flex-start;  justify-content: center; }
.ui-actionsheet-overlay:has(> .ui-actionsheet--center) { align-items: center;      justify-content: center; }
.ui-actionsheet-overlay:has(> .ui-actionsheet--left)   { align-items: stretch;     justify-content: flex-start; }
.ui-actionsheet-overlay:has(> .ui-actionsheet--right)  { align-items: stretch;     justify-content: flex-end; }

/* Позиција-специфични агли/димензии на панелот. */
.ui-actionsheet--top {
  border-top-left-radius: 0; border-top-right-radius: 0;
  border-bottom-left-radius: calc(var(--ui-radius) * 2);
  border-bottom-right-radius: calc(var(--ui-radius) * 2);
  box-shadow: 0 8px 30px rgba(0,0,0,.25);
}
.ui-actionsheet--center {
  border-radius: calc(var(--ui-radius) * 2);
  max-width: 480px; margin: 16px;
  box-shadow: 0 8px 30px rgba(0,0,0,.25);
}
.ui-actionsheet--left, .ui-actionsheet--right {
  width: min(360px, 90vw); max-width: 360px; height: 100%;
  border-radius: 0; box-shadow: 0 0 30px rgba(0,0,0,.25);
}

/* Транспарентен overlay (ShowOverlay=false) — нема затемнување, но сè уште хвака клик. */
.ui-actionsheet-overlay--transparent { background: transparent; }
/* Немодален (Modal=false) — кликот поминува низ празниот простор до содржината под него,
   но панелот сепак е интерактивен. */
.ui-actionsheet-overlay--nonmodal { pointer-events: none; }
.ui-actionsheet-overlay--nonmodal > .ui-actionsheet { pointer-events: auto; }

/* Структурни елементи (нов шаблонски режим + скрол на тело). */
.ui-actionsheet__items   { display: flex; flex-direction: column; gap: var(--ui-gap); overflow-y: auto; min-height: 0; }
.ui-actionsheet__content { padding: 8px 4px; color: var(--ui-color-text); overflow-y: auto; min-height: 0; }
.ui-actionsheet__footer  { display: flex; align-items: center; justify-content: flex-end; gap: var(--ui-gap); padding-top: 8px; border-top: 1px solid var(--ui-color-border); }
.ui-actionsheet__separator { height: 1px; margin: 4px 8px; background: var(--ui-color-border); border: none; }

/* Анимациски варијанти (класата ui-actionsheet--anim-* + animation-duration инлајн ja надминува
   shorthand-base брзината). Keyframes се нови; default slide-up веќе постои. */
.ui-actionsheet--anim-slide-up    { animation-name: ui-actionsheet-slide-up; }
.ui-actionsheet--anim-slide-down  { animation-name: ui-as-slide-down; }
.ui-actionsheet--anim-slide-left  { animation-name: ui-as-slide-left; }
.ui-actionsheet--anim-slide-right { animation-name: ui-as-slide-right; }
.ui-actionsheet--anim-fade        { animation-name: ui-as-fade; }
.ui-actionsheet--anim-zoom-in     { animation-name: ui-as-zoom-in; }
.ui-actionsheet--anim-zoom-out    { animation-name: ui-as-zoom-out; }
.ui-actionsheet[class*="ui-actionsheet--anim-"] { animation-duration: .22s; animation-timing-function: ease-out; }

@keyframes ui-as-slide-down  { from { transform: translateY(-100%); } to { transform: translateY(0); } }
@keyframes ui-as-slide-left  { from { transform: translateX(100%);  } to { transform: translateX(0); } }
@keyframes ui-as-slide-right { from { transform: translateX(-100%); } to { transform: translateX(0); } }
@keyframes ui-as-fade        { from { opacity: 0; } to { opacity: 1; } }
@keyframes ui-as-zoom-in     { from { opacity: 0; transform: scale(.92); } to { opacity: 1; transform: scale(1); } }
@keyframes ui-as-zoom-out    { from { opacity: 0; transform: scale(1.08); } to { opacity: 1; transform: scale(1); } }

/* RTL — текстот на ставките се порамнува десно (базата хардкодира text-align:left). */
[dir="rtl"] .ui-actionsheet__item { text-align: right; }

/* Почитување на prefers-reduced-motion (WCAG 2.3.3) — без слизгање/зум. */
@media (prefers-reduced-motion: reduce) {
  .ui-actionsheet[class*="ui-actionsheet--anim-"] { animation: none; }
}

/* Темска прилагодливост (Bootstrap/Material/Fluent ги наследуваат --ui-* токените;
   овде нема хардкодирани бои — сè е преку токени, па темите важат автоматски). */

/* ─────────────── UiCarousel — адитивни стилови (§103) ───────────────
   Скоупирано на .ui-carousel; само --ui-* токени; БЕЗ дуплирање на постоечките
   .ui-carousel / .ui-carousel__slide / .ui-carousel__prev / .ui-carousel__next
   (~ll.296–298) ниту на веќе додадените state/focus правила (~ll.3673–3718).
   Покрива: пагинатор (точки), CSS-анимација на премин, reduced-motion, dark-тема стрелки. */

/* Пагинатор — контејнер на индикаторите */
.ui-carousel__pager {
  display: flex;
  gap: 6px;
  align-items: center;
  justify-content: center;
  flex: 0 0 100%;
  order: 10;            /* под слајдот кога коренот е flex (постоечки .ui-carousel е flex) */
  margin-top: 8px;
}

/* Кога е pageable, дозволи пренос во нов ред за да застане пагинаторот долу */
.ui-carousel--pageable { flex-wrap: wrap; }

/* Индикатор (точка) */
.ui-carousel__dot {
  width: 10px;
  height: 10px;
  padding: 0;
  border: 1px solid var(--ui-color-border);
  border-radius: 50%;
  background: var(--ui-color-base-bg);
  cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease, transform .15s ease;
}
.ui-carousel__dot:hover {
  border-color: var(--ui-color-primary);
  background: var(--ui-color-base-bg-hover);
}
.ui-carousel__dot--active {
  background: var(--ui-color-primary);
  border-color: var(--ui-color-primary);
  transform: scale(1.15);
}
.ui-carousel__dot:focus { outline: none; }
.ui-carousel__dot:focus-visible {
  outline: 2px solid var(--ui-color-primary);
  outline-offset: 2px;
}

/* Анимација на премин помеѓу слајдови (вклучена само кога AnimationDuration>0 преку
   --ui-carousel-anim сетиран на коренот). Default 0ms → без видлива анимација. */
.ui-carousel__slide {
  transition: opacity var(--ui-carousel-anim, 0ms) ease;
}

/* Dark-тема: базното .ui-carousel__prev/__next имаат хардкодиран background:#fff
   (споделен css ~l.298) што не одговара на темна позадина. Овде, со повисока
   специфичност (.ui-theme-dark prefix), го врзуваме на токен — без да ja редефинираме
   базната декларација. */
.ui-theme-dark .ui-carousel__prev,
.ui-theme-dark .ui-carousel__next {
  background: var(--ui-color-base-bg);
  color: var(--ui-color-text, inherit);
}

/* Намалено движење: исклучи ги транзициите за prefers-reduced-motion (WCAG 2.3.3). */
@media (prefers-reduced-motion: reduce) {
  .ui-carousel__slide,
  .ui-carousel__dot { transition: none; }
}

/* === UiToolBar (§037) — под-елементи, состојби, размери, fill, scroll/wrap layout ===
   Хост .ui-toolbar (focus-within/disabled/forced-colors/reduced-motion) ВЕЌЕ постои во
   ui-blazor.css; тука се додаваат само НОВИТЕ под-елементни класи од под-компонентите.
   Само --ui-* токени, ui- префикс, без хардкод бои. */

/* ── Размерни модификатори (Size) ── */
.ui-toolbar--sm { gap: 4px; padding: 3px; }
.ui-toolbar--md { gap: 8px; padding: 6px; }
.ui-toolbar--lg { gap: 12px; padding: 9px; }

/* ── Scroll / wrap распоред ── */
.ui-toolbar--scrollable { flex-wrap: nowrap; overflow-x: auto; }
.ui-toolbar--wrap { flex-wrap: wrap; }

/* ── Заеднички item ── */
.ui-toolbar__item { display: inline-flex; align-items: center; }
.ui-toolbar__item--overflow-never { flex: 0 0 auto; }

/* ── Копче ── */
.ui-toolbar-button {
  display: inline-flex; align-items: center; gap: 6px;
  font: inherit; line-height: 1.4;
  padding: 4px 10px;
  border: 1px solid transparent;
  border-radius: var(--ui-radius-sm, 3px);
  background: transparent;
  color: var(--ui-color-text);
  cursor: pointer;
  user-select: none;
}
.ui-toolbar--sm .ui-toolbar-button { padding: 2px 7px; }
.ui-toolbar--lg .ui-toolbar-button { padding: 6px 13px; }
.ui-toolbar-button--icon-only { padding-left: 6px; padding-right: 6px; }
.ui-toolbar-button:hover { background: var(--ui-color-base-bg-hover); }
.ui-toolbar-button:active { background: var(--ui-color-base-bg-hover); }
.ui-toolbar-button:focus { outline: none; }
.ui-toolbar-button:focus-visible {
  outline: var(--ui-focus-ring, 2px solid var(--ui-color-primary));
  outline-offset: 1px;
}
.ui-toolbar-button:disabled,
.ui-toolbar-button[aria-disabled="true"] {
  opacity: 0.55; cursor: not-allowed; pointer-events: none;
}
.ui-toolbar-button__icon { display: inline-flex; }
.ui-toolbar-button__text { display: inline-flex; }

/* Toggle / selected (aria-pressed/aria-checked) состојба */
.ui-toolbar-button--selected,
.ui-toolbar-button[aria-pressed="true"],
.ui-toolbar-button[aria-checked="true"] {
  background: var(--ui-color-primary);
  color: var(--ui-color-text-on-primary);
  border-color: transparent;
}
.ui-toolbar-button--selected:hover,
.ui-toolbar-button[aria-pressed="true"]:hover,
.ui-toolbar-button[aria-checked="true"]:hover {
  background: var(--ui-color-primary-hover, var(--ui-color-primary));
}

/* ── FillMode варијанти (на хостот, наследуваат децата) ── */
.ui-toolbar--outline .ui-toolbar-button { border-color: var(--ui-color-border); }
.ui-toolbar--solid .ui-toolbar-button { background: var(--ui-color-base-bg); border-color: var(--ui-color-border); }
.ui-toolbar--flat .ui-toolbar-button { background: transparent; border-color: transparent; }
.ui-toolbar--link .ui-toolbar-button { background: transparent; border-color: transparent; color: var(--ui-color-primary); text-decoration: none; }
.ui-toolbar--link .ui-toolbar-button:hover { text-decoration: underline; }

/* ── Разделувач ── */
.ui-toolbar-separator {
  align-self: stretch;
  width: 1px;
  min-height: 1.5em;
  margin: 0 2px;
  background: var(--ui-color-border);
}

/* ── Празнина (spacer) ── */
.ui-toolbar-spacer { display: inline-block; }
.ui-toolbar-spacer--flex { flex: 1 1 auto; }
.ui-toolbar-spacer--fixed { flex: 0 0 auto; }

/* ── Шаблонска алатка ── */
.ui-toolbar-template-item { display: inline-flex; align-items: center; }

/* ── Група копчиња ── */
.ui-toolbar-button-group { display: inline-flex; align-items: center; }
.ui-toolbar-button-group .ui-toolbar-button { border-radius: 0; border-color: var(--ui-color-border); }
.ui-toolbar-button-group .ui-toolbar-button + .ui-toolbar-button { margin-left: -1px; }
.ui-toolbar-button-group .ui-toolbar-button:first-child {
  border-top-left-radius: var(--ui-radius-sm, 3px);
  border-bottom-left-radius: var(--ui-radius-sm, 3px);
}
.ui-toolbar-button-group .ui-toolbar-button:last-child {
  border-top-right-radius: var(--ui-radius-sm, 3px);
  border-bottom-right-radius: var(--ui-radius-sm, 3px);
}
.ui-toolbar-button-group--disabled { opacity: 0.6; pointer-events: none; }

/* ── RTL: огледало на групните маргини и spacer редоследот ── */
[dir="rtl"] .ui-toolbar-button-group .ui-toolbar-button + .ui-toolbar-button { margin-left: 0; margin-right: -1px; }

/* ── forced-colors: задржи видлив фокус на копчињата ── */
@media (forced-colors: active) {
  .ui-toolbar-button:focus-visible { outline-color: Highlight; }
}

/* ── UiTileLayout — структурирани плочки (композитен режим) + интеракција (§030) ──
   Адитивно спрямо постоечките .ui-tile-layout правила (grid root, > * hover/focus/active/
   --dragging/--disabled). Само токени --ui-*, без хардкод бои. Постоечкото `.ui-tile-layout > *`
   и понатаму важи за .ui-tile-layout-item (директно дете), па плочката добива позадина/радиус. */

/* Структурирана плочка: колона со заглавие + тело; релативна за апсолутни рачки за resize. */
.ui-tile-layout-item {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 0 !important;          /* поништи го генеричкиот `> *` padding — телото си носи свој */
  text-align: left;              /* поништи го центрирањето од `> *` за структуриран изглед */
  border: 1px solid var(--ui-color-border);
}

/* Заглавие на плочка (наслов/акции). */
.ui-tile-layout-item-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ui-gap, 8px);
  padding: 8px 12px;
  font: 600 14px var(--ui-font);
  color: var(--ui-color-text);
  background: var(--ui-color-base-bg);
  border-bottom: 1px solid var(--ui-color-border);
  user-select: none;
}

/* Тело/содржина на плочка. */
.ui-tile-layout-item-body {
  flex: 1 1 auto;
  min-height: 0;
  padding: 12px;
  overflow: auto;
  color: var(--ui-color-text);
}

/* Reorderable: заглавието е drag-handle → grab cursor (вистинскиот pointer-drag е Ф2+ преку JS). */
.ui-tile-layout--reorderable .ui-tile-layout-item-header {
  cursor: grab;
}
.ui-tile-layout--reorderable .ui-tile-layout-item-header:active {
  cursor: grabbing;
}

/* Видлив фокус-индикатор на структурирана плочка (roving tabindex; WCAG 2.1/2.2 AA). */
.ui-tile-layout-item:focus-visible {
  outline: var(--ui-focus-ring, 2px solid var(--ui-color-primary));
  outline-offset: -2px;
}
.ui-tile-layout-item:focus:not(:focus-visible) { outline: none; }

/* Рачки за менување големина (визуелни affordance; pointer drag-resize е Ф2+). */
.ui-tile-layout-item-resize {
  position: absolute;
  z-index: 1;
  background: transparent;
}
.ui-tile-layout--resizable .ui-tile-layout-item-resize--right {
  top: 0; bottom: 0; right: 0; width: 6px; cursor: e-resize;
}
.ui-tile-layout--resizable .ui-tile-layout-item-resize--bottom {
  left: 0; right: 0; bottom: 0; height: 6px; cursor: s-resize;
}
.ui-tile-layout--resizable .ui-tile-layout-item-resize--corner {
  right: 0; bottom: 0; width: 12px; height: 12px; cursor: se-resize;
}

/* RTL: grid веќе го почитува `dir`; направи го експлицитно за насоката на преуредување. */
[dir="rtl"] .ui-tile-layout { direction: rtl; }

/* Почитувај prefers-reduced-motion за евентуални премини при reorder/resize. */
@media (prefers-reduced-motion: reduce) {
  .ui-tile-layout-item, .ui-tile-layout-item-header { transition: none; }
}

/* === UiSplitter — надградба (collapse copче, disabled/non-resizable состојби) ===
   Додатно на постоечките .ui-splitter правила (ui-blazor.css ~396–405, focus ~1966–1971).
   Сите се scoped под .ui-splitter и не ги газат постоечките декларации. */

/* Collapse/expand copче во лентата */
.ui-splitter__bar { position: relative; display: flex; align-items: center; justify-content: center; }
.ui-splitter__toggle {
  position: absolute;
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0; margin: 0; border: none; cursor: pointer;
  background: var(--ui-color-base-bg, #fff);
  color: var(--ui-color-text);
  border-radius: var(--ui-radius, 3px);
  font: 10px var(--ui-font);
  line-height: 1;
  box-shadow: 0 0 0 1px var(--ui-color-border);
  z-index: 1;
}
.ui-splitter--horizontal .ui-splitter__toggle { width: 14px; height: 28px; }
.ui-splitter--vertical   .ui-splitter__toggle { width: 28px; height: 14px; }
.ui-splitter__toggle:hover:not(:disabled) { background: var(--ui-color-base-bg-hover, #f0f0f0); color: var(--ui-color-primary); }
.ui-splitter__toggle:focus-visible { outline: var(--ui-focus-ring, 2px solid var(--ui-color-primary)); outline-offset: 1px; }
.ui-splitter__toggle:disabled { cursor: not-allowed; color: var(--ui-color-disabled); }

/* Non-resizable: лентата не нуди resize cursor (collapse copчето сè уште работи) */
.ui-splitter--non-resizable .ui-splitter__bar { cursor: default; }
.ui-splitter--non-resizable .ui-splitter__bar:hover { background: var(--ui-color-border); }

/* Disabled: пригушен изглед, без resize cursor/hover */
.ui-splitter--disabled .ui-splitter__bar { cursor: not-allowed; opacity: .6; }
.ui-splitter--disabled .ui-splitter__bar:hover { background: var(--ui-color-border); }

/* Collapsed: првиот панел е скриен (flex-basis:0 е инлајн); сокриј прелевање/борда */
.ui-splitter--collapsed .ui-splitter__pane--first { overflow: hidden; }

/* ── Popover (§091) — ja заменува постоечкиот блок ui-blazor.css ~483–489 ── */
.ui-popover { position:relative; display:inline-block; }
.ui-popover--disabled { opacity:.6; pointer-events:none; }
.ui-popover__trigger { display:inline-flex; }
.ui-popover__trigger:focus-visible { outline:var(--ui-focus-ring); outline-offset:2px; border-radius:var(--ui-radius); }

.ui-popover__content {
  position:absolute; z-index:var(--ui-z-popover);
  display:flex; flex-direction:column; gap:var(--ui-gap);
  min-width:max-content;
  background:var(--ui-color-base-bg); color:var(--ui-color-text);
  border:1px solid var(--ui-color-border); border-radius:var(--ui-radius);
  padding:var(--ui-gap); font:14px var(--ui-font);
  box-shadow:0 4px 14px rgba(0,0,0,.15);
}
.ui-popover__content:focus { outline:none; }
.ui-popover__content:focus-visible { outline:var(--ui-focus-ring); outline-offset:2px; }

/* Позиции — отстапувањето е offset (px) или --ui-gap fallback */
.ui-popover--bottom { top:100%;    left:0; margin-top:    var(--ui-popover-offset, var(--ui-gap)); }
.ui-popover--top    { bottom:100%; left:0; margin-bottom: var(--ui-popover-offset, var(--ui-gap)); }
.ui-popover--right  { left:100%;   top:0;  margin-left:   var(--ui-popover-offset, var(--ui-gap)); }
.ui-popover--left   { right:100%;  top:0;  margin-right:  var(--ui-popover-offset, var(--ui-gap)); }

/* Зони */
.ui-popover__header { font:600 14px var(--ui-font); color:var(--ui-color-text); padding-bottom:var(--ui-gap); border-bottom:1px solid var(--ui-color-border); }
.ui-popover__body { flex:1 1 auto; }
.ui-popover__actions { display:flex; gap:var(--ui-gap); padding-top:var(--ui-gap); border-top:1px solid var(--ui-color-border); }
.ui-popover__actions.ui-actions--start   { justify-content:flex-start; }
.ui-popover__actions.ui-actions--center  { justify-content:center; }
.ui-popover__actions.ui-actions--end     { justify-content:flex-end; }
.ui-popover__actions.ui-actions--stretch { justify-content:stretch; }
.ui-popover__actions.ui-actions--stretch > * { flex:1 1 0; }

/* Callout стрелка (декоративна; покажува КОН котвата) */
.ui-popover--no-callout .ui-popover__callout { display:none; }
.ui-popover__callout { position:absolute; width:0; height:0; }
.ui-popover__callout--n { bottom:100%; left:12px; border-left:7px solid transparent; border-right:7px solid transparent; border-bottom:7px solid var(--ui-color-border); }
.ui-popover__callout--s { top:100%;    left:12px; border-left:7px solid transparent; border-right:7px solid transparent; border-top:7px solid var(--ui-color-border); }
.ui-popover__callout--w { right:100%;  top:12px;  border-top:7px solid transparent; border-bottom:7px solid transparent; border-right:7px solid var(--ui-color-border); }
.ui-popover__callout--e { left:100%;   top:12px;  border-top:7px solid transparent; border-bottom:7px solid transparent; border-left:7px solid var(--ui-color-border); }

/* Анимации (времетраењето од --ui-popover-anim-duration; --anim-none ja гаси) */
.ui-popover__content { animation-duration:var(--ui-popover-anim-duration, 200ms); animation-timing-function:ease-out; animation-fill-mode:both; }
.ui-popover--anim-none       { animation:none !important; }
.ui-popover--anim-fade       { animation-name:ui-popover-fade; }
.ui-popover--anim-slide-down { animation-name:ui-popover-slide-down; }
.ui-popover--anim-slide-up   { animation-name:ui-popover-slide-up; }
.ui-popover--anim-slide-left { animation-name:ui-popover-slide-left; }
.ui-popover--anim-slide-right{ animation-name:ui-popover-slide-right; }
.ui-popover--anim-zoom-in    { animation-name:ui-popover-zoom-in; }
.ui-popover--anim-zoom-out   { animation-name:ui-popover-zoom-out; }
@keyframes ui-popover-fade        { from { opacity:0; } to { opacity:1; } }
@keyframes ui-popover-slide-down  { from { opacity:0; transform:translateY(-6px); } to { opacity:1; transform:translateY(0); } }
@keyframes ui-popover-slide-up    { from { opacity:0; transform:translateY(6px); }  to { opacity:1; transform:translateY(0); } }
@keyframes ui-popover-slide-left  { from { opacity:0; transform:translateX(6px); }  to { opacity:1; transform:translateX(0); } }
@keyframes ui-popover-slide-right { from { opacity:0; transform:translateX(-6px); } to { opacity:1; transform:translateX(0); } }
@keyframes ui-popover-zoom-in     { from { opacity:0; transform:scale(.92); } to { opacity:1; transform:scale(1); } }
@keyframes ui-popover-zoom-out    { from { opacity:0; transform:scale(1.06); } to { opacity:1; transform:scale(1); } }
@media (prefers-reduced-motion: reduce) { .ui-popover__content { animation:none !important; } }

/* Hover режим (ShowOn=MouseEnter): откако ќе се рендерира панелот, цел host задржува pointer-events */
.ui-popover--hover .ui-popover__content { /* видливоста ja носи Open преку C#; ова е само за идна CSS-only варијанта */ }

/* RTL: огледално превртување на лево/десно позицијата и порамнувањето */
[dir="rtl"] .ui-popover--right { left:auto; right:100%; margin-left:0; margin-right:var(--ui-popover-offset, var(--ui-gap)); }
[dir="rtl"] .ui-popover--left  { right:auto; left:100%;  margin-right:0; margin-left:var(--ui-popover-offset, var(--ui-gap)); }

/* ── UiPager: нови структурни елементи + варијанти (само --ui-* токени).
   Базата (.ui-pager, .ui-pager button, .ui-pager button:disabled, .ui-pager__page--active)
   и состојбите hover/focus-visible/active веќе постојат во ui-blazor.css — НЕ ги дуплирам. */

/* контејнер на нумеричките копчиња */
.ui-pager__numbers { display:inline-flex; gap:4px; align-items:center; }

/* елипса „…" — некликабилен текст */
.ui-pager__ellipsis {
  display:inline-flex; align-items:center; justify-content:center;
  min-width:24px; height:32px; color:var(--ui-color-text-muted); user-select:none;
}

/* информативен текст */
.ui-pager__info {
  margin-inline-start:auto; padding-inline:8px;
  font:13px var(--ui-font); color:var(--ui-color-text-muted); white-space:nowrap;
}

/* паѓачко мени за големина на страница */
.ui-pager__sizes { display:inline-flex; align-items:center; gap:6px; }
.ui-pager__sizes-label { font:13px var(--ui-font); color:var(--ui-color-text-muted); }
.ui-pager__sizes-select {
  height:32px; border:1px solid var(--ui-color-border); border-radius:var(--ui-radius);
  background:var(--ui-color-surface); color:var(--ui-color-text);
  font:13px var(--ui-font); padding:0 6px; cursor:pointer;
}
.ui-pager__sizes-select:focus-visible { outline:var(--ui-focus-ring); outline-offset:1px; }

/* Input режим (поле за внес на број на страница) */
.ui-pager__input-wrap { display:inline-flex; align-items:center; gap:6px; }
.ui-pager__input-label, .ui-pager__input-of {
  font:13px var(--ui-font); color:var(--ui-color-text-muted);
}
.ui-pager__input {
  width:56px; height:32px; text-align:center;
  border:1px solid var(--ui-color-border); border-radius:var(--ui-radius);
  background:var(--ui-color-surface); color:var(--ui-color-text); font:13px var(--ui-font);
}
.ui-pager__input:focus-visible { outline:var(--ui-focus-ring); outline-offset:1px; }

/* варијанти по големина (Small/Medium/Large) — скалирање на копчињата и текстот */
.ui-pager--sm button, .ui-pager--sm .ui-pager__sizes-select,
.ui-pager--sm .ui-pager__input { min-width:26px; height:26px; font-size:12px; }
.ui-pager--sm .ui-pager__input { width:48px; }
.ui-pager--lg button, .ui-pager--lg .ui-pager__sizes-select,
.ui-pager--lg .ui-pager__input { min-width:40px; height:40px; font-size:15px; }
.ui-pager--lg .ui-pager__input { width:64px; }

/* респонзивно обвиткување кога нема простор */
.ui-pager--responsive { flex-wrap:wrap; }

/* RTL: огледално превртување на декоративните стрелки (« » ‹ ›) */
[dir="rtl"] .ui-pager__first > span,
[dir="rtl"] .ui-pager__prev > span,
[dir="rtl"] .ui-pager__next > span,
[dir="rtl"] .ui-pager__last > span { transform:scaleX(-1); }

/* адаптивен режим (actionsheet на мали екрани) — поведенска кука; целосниот
   actionsheet се рендерира преку заедничкиот popup/actionsheet подсистем */
@media (max-width:768px) {
  .ui-pager--adaptive .ui-pager__info { display:none; }
}

/* ── UiListView: структура + состојби додадени со прошируениот API (Ф4 паритет).
   ЗАБЕЛЕШКА: правилата за .ui-listview__item:hover/:focus-visible/--selected,
   .ui-listview__pager-btn:focus-visible/:active и .ui-listview__pager-info[aria-current]
   ВЕЌЕ постојат во ui-blazor.css (линии ~2854–2869) — НЕ ги дуплирам. Само нови класи. */

/* Контент-обвивка (распоредот по ставка останува на корисничкиот Template) */
.ui-listview__content { display:flex; flex-direction:column; gap:var(--ui-gap); }

/* Header / Footer региони */
.ui-listview__header { display:flex; align-items:center; justify-content:space-between; gap:var(--ui-gap); padding-bottom:var(--ui-gap); border-bottom:1px solid var(--ui-color-border); }
.ui-listview__footer { display:flex; align-items:center; justify-content:flex-end; gap:var(--ui-gap); padding-top:var(--ui-gap); border-top:1px solid var(--ui-color-border); color:var(--ui-color-text); }

/* Inline уредување / нова ставка */
.ui-listview__item--editing { border-color:var(--ui-color-primary); box-shadow:inset 0 0 0 1px var(--ui-color-primary); background:var(--ui-color-base-bg); }
.ui-listview__item--new { border-style:dashed; }

/* Оневозможена компонента (целата листа) — придушена и без интеракција */
.ui-listview--disabled { opacity:.6; pointer-events:none; }
/* Пагер-копчињата сепак носат HTML disabled; pointer-events:none е безбеден дополнок */

/* Навигабилна листа: ставките се фокусибилни цели (видливиот фокус-прстен веќе постои) */
.ui-listview--navigable .ui-listview__item { cursor:default; }

/* === UiDrawer — прошируваање (терк §019). Сите бои/димензии преку --ui-* токени. === */

/* Top/bottom позиции: постоечкиот .ui-drawer има само left/right transform — додади ги вертикалните. */
.ui-drawer--top    { top:0; bottom:auto; left:0; right:0; width:auto; height:auto; transform:translateY(-100%); }
.ui-drawer--bottom { bottom:0; top:auto; left:0; right:0; width:auto; height:auto; transform:translateY(100%); }
.ui-drawer--top.ui-drawer--open,
.ui-drawer--bottom.ui-drawer--open { transform:translateY(0); }

/* Push режим: прекривката не затемнува (само layout), но не блокира клик низ неа. */
.ui-drawer-overlay--no-backdrop { background:transparent; }
.ui-drawer-overlay--push { pointer-events:none; }
.ui-drawer-overlay--push .ui-drawer { pointer-events:auto; }

/* Mini режим: тенка лента видлива и кога е затворена (наместо целосно скривање). */
.ui-drawer--mini:not(.ui-drawer--open) { transform:translateX(0); width:56px; overflow:hidden; }
.ui-drawer--mini.ui-drawer--right:not(.ui-drawer--open) { transform:translateX(0); }
.ui-drawer--top.ui-drawer--mini:not(.ui-drawer--open),
.ui-drawer--bottom.ui-drawer--mini:not(.ui-drawer--open) { transform:translateY(0); height:56px; width:auto; }

/* Внатрешен распоред на панелот: заглавие / тело (скролабилно) / подножје. */
.ui-drawer { display:flex; flex-direction:column; color:var(--ui-color-text); }
.ui-drawer__header {
  display:flex; align-items:center; justify-content:space-between; gap:var(--ui-spacing-2, 8px);
  padding-bottom:var(--ui-spacing-2, 8px); margin-bottom:var(--ui-spacing-2, 8px);
  border-bottom:1px solid var(--ui-color-border);
}
.ui-drawer__title { font-weight:600; }
.ui-drawer__body { flex:1 1 auto; overflow:auto; }
.ui-drawer__footer {
  padding-top:var(--ui-spacing-2, 8px); margin-top:var(--ui-spacing-2, 8px);
  border-top:1px solid var(--ui-color-border);
}

/* Копче за затворање „×". */
.ui-drawer__close {
  appearance:none; border:0; background:transparent; cursor:pointer; line-height:1;
  font-size:1.25rem; color:var(--ui-color-text); padding:var(--ui-spacing-1, 4px);
  border-radius:var(--ui-radius-sm, 3px);
}
.ui-drawer__close:hover { background:var(--ui-color-surface-2, rgba(0,0,0,.06)); }
.ui-drawer__close:focus-visible { outline:var(--ui-focus-ring, 2px solid var(--ui-color-primary)); outline-offset:-2px; }

/* Опционо: структурни класи за data-driven навигациски список (за идна фаза 2). */
.ui-drawer-items { display:flex; flex-direction:column; }
.ui-drawer-item {
  display:flex; align-items:center; gap:var(--ui-spacing-2, 8px);
  padding:var(--ui-spacing-2, 8px); cursor:pointer; border-radius:var(--ui-radius-sm, 3px);
  color:var(--ui-color-text);
}
.ui-drawer-item:hover { background:var(--ui-color-surface-2, rgba(0,0,0,.06)); }
.ui-drawer-item:focus-visible { outline:var(--ui-focus-ring, 2px solid var(--ui-color-primary)); outline-offset:-2px; }
.ui-drawer-item.ui-selected { background:var(--ui-color-primary); color:var(--ui-color-text-on-primary); }
.ui-drawer-item.ui-disabled { opacity:.5; pointer-events:none; }
.ui-drawer-separator { height:1px; margin:var(--ui-spacing-1, 4px) 0; background:var(--ui-color-border); }

/* ── UiPanelBar — додатоци за нови функции (Size, layout на хедер, chevron, selected). 
   Дополнува постоечките .ui-panelbar* правила во ui-blazor.css (линии 299-303 + 2761-2796); 
   НЕ ги дуплира hover/focus/active/disabled/expanded-header правилата што веќе постојат. ── */

/* Хедерот распоредува: [икона] наслов [chevron] во ред */
.ui-panelbar__header { display:flex; align-items:center; gap:var(--ui-spacing-2); }
.ui-panelbar__title { flex:1 1 auto; text-align:left; min-width:0; overflow:hidden; text-overflow:ellipsis; }
.ui-panelbar__icon { flex:0 0 auto; display:inline-flex; }

/* Chevron индикатор — ротира кога ставката е раширена (aria-expanded на родителската ставка) */
.ui-panelbar__chevron { flex:0 0 auto; width:.6em; height:.6em; margin-left:auto; position:relative; transition:transform .15s ease; }
.ui-panelbar__chevron::before {
  content:""; position:absolute; inset:0; margin:auto; width:.45em; height:.45em;
  border-right:2px solid currentColor; border-bottom:2px solid currentColor;
  transform:translateY(-.1em) rotate(45deg); /* стрелка надолу */
}
.ui-panelbar__item--expanded > .ui-panelbar__header .ui-panelbar__chevron { transform:rotate(180deg); }

/* Selected (активна/тековна) ставка */
.ui-panelbar__item--selected > .ui-panelbar__header,
.ui-panelbar__header--selected { color:var(--ui-color-primary); font-weight:700; }

/* Size модификатори — отстапувања и типографија на хедерот */
.ui-panelbar--sm .ui-panelbar__header { padding:6px 10px; font-size:13px; }
.ui-panelbar--sm .ui-panelbar__content { padding:8px 10px; }
.ui-panelbar--md .ui-panelbar__header { padding:10px 14px; }
.ui-panelbar--md .ui-panelbar__content { padding:12px 14px; }
.ui-panelbar--lg .ui-panelbar__header { padding:14px 18px; font-size:15px; }
.ui-panelbar--lg .ui-panelbar__content { padding:16px 18px; }

/* RTL: chevron оди налево, стрелката се огледа */
[dir="rtl"] .ui-panelbar__chevron { margin-left:0; margin-right:auto; }

@media (prefers-reduced-motion: reduce) {
  .ui-panelbar__chevron { transition:none; }
}

/* ===== Бран-3 (15-dev): Signature/MaskedTextBox/RangeSlider/Upload/FileSelect/DropZone/ContextMenu/Window/Form/AutoComplete/MultiColumnComboBox/ColorPalette/FlatColorPicker/ColorGradient/Map ===== */
/* ── UiSignature: дополнувања за прошириниот API (за merge во ui-blazor.css) ──
   1) ВАЖНО: постоечкиот ред 378 `.ui-signature__stroke { stroke:var(--ui-color-text); }`
      го НАДГЛАСУВА inline `stroke` атрибутот во прелистувач и ги поништува Color/StrokeColor.
      Замени го тој ред со следново (default преку CSS var со fallback, така што inline атрибут победува
      бидејќи presentation атрибут НЕ постои кога нема стил — наместо тоа дозволи inline stroke да важи):
      ЗАМЕНИ:  .ui-signature__stroke { stroke:var(--ui-color-text); }
      СО:      (избриши ja stroke декларацијата — бојата сега доаѓа од inline `stroke` атрибутот;
               задржи евентуални не-боја правила ако се додаваат подоцна) */

/* baseline водечка линија (HideLine=false по default) */
.ui-signature__line {
  stroke: var(--ui-color-border);
  stroke-width: 1;
  stroke-dasharray: 4 4;
  pointer-events: none;
}

/* disabled состојба на целата контрола (Enabled=false) */
.ui-signature--disabled {
  opacity: .6;
  pointer-events: none;
}
.ui-signature--disabled .ui-signature__surface {
  background: var(--ui-color-base-bg-hover);
  cursor: not-allowed;
}

/* path-варијанта на потегот (Smooth=true) ja дели класата .ui-signature__stroke,
   па веќе наследува stroke-linecap/linejoin преку inline атрибути; нема потреба од ново правило. */

/* ── UiMaskedTextBox (§055) — додаток: focused / appearance варијанти / clear / адорнменти ──
   Се надоврзува на постоечкиот .ui-maskedtextbox блок (hover/focus-visible/disabled/readonly/invalid
   веќе постојат). Само --ui-* токени, без хардкодирани бои. Огледало на UiDropDownList варијантите. */

/* focused обвивка (--focused класа од кодот при onfocus/onblur) */
.ui-maskedtextbox--focused .ui-maskedtextbox__input {
  border-color: var(--ui-color-primary);
}

/* layout кога има адорнменти / clear копче — обвивката веќе е inline-flex */
.ui-maskedtextbox { align-items: center; gap: var(--ui-spacing-1, 4px); }

/* prefix / suffix адорнменти */
.ui-maskedtextbox__prefix,
.ui-maskedtextbox__suffix {
  display: inline-flex;
  align-items: center;
  color: var(--ui-color-text-muted, var(--ui-color-disabled));
  white-space: nowrap;
}

/* clear (×) копче */
.ui-maskedtextbox__clear {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: transparent;
  color: var(--ui-color-text-muted, var(--ui-color-disabled));
  cursor: pointer;
  font-size: 16px;
  line-height: 1;
  padding: 0 var(--ui-spacing-1, 4px);
  border-radius: var(--ui-radius-sm, 3px);
}
.ui-maskedtextbox__clear:hover { color: var(--ui-color-text); background: var(--ui-color-hover-bg, var(--ui-color-surface-2)); }
.ui-maskedtextbox__clear:focus-visible { outline: var(--ui-focus-ring, 2px solid var(--ui-color-primary)); outline-offset: 1px; }

/* ── Size варијанти (огледало на висините на контроли) ── */
.ui-maskedtextbox--small  .ui-maskedtextbox__input { height: var(--ui-control-height-sm, 28px); font-size: 13px; }
.ui-maskedtextbox--large  .ui-maskedtextbox__input { height: var(--ui-control-height-lg, 44px); font-size: 16px; }

/* ── Rounded варијанти ── */
.ui-maskedtextbox--rounded-none  .ui-maskedtextbox__input { border-radius: 0; }
.ui-maskedtextbox--rounded-small .ui-maskedtextbox__input { border-radius: var(--ui-radius-sm, 3px); }
.ui-maskedtextbox--rounded-large .ui-maskedtextbox__input { border-radius: calc(var(--ui-radius, 6px) * 1.5); }
.ui-maskedtextbox--rounded-full  .ui-maskedtextbox__input { border-radius: 9999px; }

/* ── FillMode варијанти ── */
.ui-maskedtextbox--flat .ui-maskedtextbox__input {
  border-color: transparent;
  background: var(--ui-color-surface-2);
}
.ui-maskedtextbox--outline .ui-maskedtextbox__input {
  background: transparent;
  border-color: var(--ui-color-border);
}

/* === UiRangeSlider — Size варијанти (§061) + ReadOnly состојба ===
   Само design токени, без хардкод бои. Постоечките .ui-rangeslider правила
   (track/selection/thumb/vertical/disabled/hover/active/focus-visible) остануваат;
   долу се ДОПОЛНУВААТ Size модификаторите и readonly состојбата. */

/* Medium е default-от (исти димензии како базата) — експлицитно за доследност. */
.ui-rangeslider--md { /* default дебелина/висина веќе во .ui-rangeslider */ }

/* Small: потенка трака, помали палчиња, пониска контрола. */
.ui-rangeslider--sm { height: 16px; }
.ui-rangeslider--sm .ui-rangeslider__track { height: 3px; }
.ui-rangeslider--sm .ui-rangeslider__thumb { width: 12px; height: 12px; margin-left: -6px; }
.ui-rangeslider--sm.ui-rangeslider--vertical { width: 16px; }
.ui-rangeslider--sm.ui-rangeslider--vertical .ui-rangeslider__track { width: 3px; }
.ui-rangeslider--sm.ui-rangeslider--vertical .ui-rangeslider__thumb { margin-left: 0; margin-bottom: -6px; }

/* Large: подебела трака, поголеми палчиња, повисока контрола. */
.ui-rangeslider--lg { height: 28px; }
.ui-rangeslider--lg .ui-rangeslider__track { height: 6px; }
.ui-rangeslider--lg .ui-rangeslider__thumb { width: 22px; height: 22px; margin-left: -11px; }
.ui-rangeslider--lg.ui-rangeslider--vertical { width: 28px; }
.ui-rangeslider--lg.ui-rangeslider--vertical .ui-rangeslider__track { width: 6px; }
.ui-rangeslider--lg.ui-rangeslider--vertical .ui-rangeslider__thumb { margin-left: 0; margin-bottom: -11px; }

/* ReadOnly: видливо и фокусабилно, но без grab/hover акцент (палчињата не се менуваат).
   Не користиме opacity (за разлика од disabled) — содржината останува читлива. */
.ui-rangeslider--readonly .ui-rangeslider__thumb { cursor: default; }
.ui-rangeslider--readonly .ui-rangeslider__thumb:hover,
.ui-rangeslider--readonly .ui-rangeslider__thumb:active {
  border-color: var(--ui-color-primary);
  background: var(--ui-color-surface, #fff);
  cursor: default;
}

/* ── UiUpload (§070): копчиња за акција, per-file state, статус-порака, aria-live ── */
/* (Новите селектори; постоечките .ui-upload* и состојбите focus/disabled/dragover не се дираат.) */

/* Копчиња „Прикачи"/„Откажи" (AutoUpload=false) */
.ui-upload__actions { display:flex; gap:var(--ui-gap); }
.ui-upload__action {
  display:inline-flex; align-items:center; justify-content:center;
  padding:6px 14px; border:1px solid var(--ui-color-border); border-radius:var(--ui-radius);
  background:var(--ui-color-base-bg); color:var(--ui-color-text);
  font:inherit; line-height:1.2; cursor:pointer; transition:background .15s ease, border-color .15s ease;
}
.ui-upload__action:hover:not(:disabled) { background:var(--ui-color-base-bg-hover); border-color:var(--ui-color-primary); }
.ui-upload__action:focus { outline:none; }
.ui-upload__action:focus-visible { outline:var(--ui-focus-ring, 2px solid var(--ui-color-primary)); outline-offset:1px; }
.ui-upload__action:active:not(:disabled) { background:var(--ui-color-base-bg-hover); }
.ui-upload__action--upload { border-color:var(--ui-color-primary); color:var(--ui-color-primary); }
.ui-upload__action:disabled { opacity:.6; cursor:not-allowed; pointer-events:none; }

/* Per-file состојба (модификатори на ставка) */
.ui-upload__item--uploaded { border-color:var(--ui-color-success, #2e7d32); }
.ui-upload__item--uploaded .ui-upload__progress-bar { background:var(--ui-color-success, #2e7d32); }
.ui-upload__item--failed { border-color:var(--ui-color-danger, #d33); }
.ui-upload__item--failed .ui-upload__progress-bar { background:var(--ui-color-danger, #d33); }
.ui-upload__item--paused { opacity:.85; }
.ui-upload__item[aria-invalid="true"] { border-color:var(--ui-color-danger, #d33); }

/* Текстуална статус-порака (информација преку текст, не само боја) */
.ui-upload__status { grid-column:1 / -1; font-size:.8em; }
.ui-upload__status--error { color:var(--ui-color-danger, #d33); }

/* aria-live регион — визуелно скриен, достапен за читачи на екран */
.ui-upload__live {
  position:absolute; width:1px; height:1px; margin:-1px; padding:0;
  overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; border:0;
}

/* Forced-colors: видлив фокус и за акциските копчиња */
@media (forced-colors: active) {
  .ui-upload__action:focus-visible { outline-color: Highlight; }
}

/* ── FileSelect: фокус-индикатори, active, disabled, size, invalid, RTL (за централен merge во ui-blazor.css, секцијата /* FileSelect */) ── */

/* Видлив фокус-индикатор (WCAG 2.1/2.2 AA) — копче-лабела и копче „×" */
.ui-fileselect__button:focus-visible { outline:2px solid var(--ui-color-primary); outline-offset:1px; }
.ui-fileselect__remove:focus-visible { outline:2px solid var(--ui-color-primary); outline-offset:1px; border-radius:var(--ui-radius); }
/* Фокусирана ставка (roving фокус живее на копчето „×"; обележи ja целата ставка) */
.ui-fileselect__item:focus-within { border-color:var(--ui-color-primary); }

/* Pressed состојба */
.ui-fileselect__button:active { background:var(--ui-color-base-bg-hover); }

/* Оневозможено */
.ui-fileselect--disabled { opacity:.55; pointer-events:none; }
.ui-fileselect--disabled .ui-fileselect__button { cursor:not-allowed; }

/* Размер-варијанти (Small/Medium/Large) */
.ui-fileselect--sm { font-size:12px; }
.ui-fileselect--sm .ui-fileselect__button { padding:4px 8px; }
.ui-fileselect--sm .ui-fileselect__item { padding:2px 6px; }
.ui-fileselect--md { font-size:14px; }
.ui-fileselect--lg { font-size:16px; }
.ui-fileselect--lg .ui-fileselect__button { padding:8px 16px; }
.ui-fileselect--lg .ui-fileselect__item { padding:6px 10px; }

/* Невалидна датотека — индикација што НЕ зависи само од боја (лев акцент-раб + боја) */
.ui-fileselect__item--invalid { border-color:var(--ui-color-danger); border-inline-start-width:3px; }
.ui-fileselect__item--invalid .ui-fileselect__name { color:var(--ui-color-danger); }

/* RTL — огледан распоред на копче/листа */
[dir="rtl"] .ui-fileselect__button { align-self:flex-end; }
[dir="rtl"] .ui-fileselect__item { flex-direction:row-reverse; }

/* UiDropZone — нови состојби (focus + note). Спој во ui-blazor.css; само дизајн токени, без хардкод бои. */
.ui-dropzone--focused {
  outline: var(--ui-focus-outline-width, 2px) solid var(--ui-color-primary, currentColor);
  outline-offset: var(--ui-focus-outline-offset, 2px);
}
/* Видлив фокус-прстен независно од :focus-visible поддршка во прелистувачот. */
.ui-dropzone:focus-visible {
  outline: var(--ui-focus-outline-width, 2px) solid var(--ui-color-primary, currentColor);
  outline-offset: var(--ui-focus-outline-offset, 2px);
}
.ui-dropzone__note {
  display: block;
  margin-top: var(--ui-spacing-1, 4px);
  font-size: var(--ui-font-size-sm, 0.85em);
  color: var(--ui-color-subtle, currentColor);
}
.ui-dropzone--disabled {
  cursor: var(--ui-cursor-disabled, not-allowed);
  opacity: var(--ui-disabled-opacity, 0.6);
}

/* ── UiContextMenu (§021) — нови состојби/елементи за паритет: link wrapper, separator,
   selected (aria-current), animate. Само --ui-* токени, без хардкод бои. Се спојуваат по
   постоечкиот блок (ui-blazor.css ~475–481 и ~2570–2598). Базните .ui-contextmenu/__item/
   __icon/__text/:hover/--disabled/--focused/focus-visible/active ВЕЌЕ постојат — не ги дуплирам. */

/* Содржински ред во ставката: ја носи flex-распоредбата (икона + текст). За <a> ставки
   тргнува underline/боја. .ui-contextmenu__item е веќе flex; wrapper-от е целосна ширина. */
.ui-contextmenu__link {
  display: flex;
  align-items: center;
  gap: var(--ui-gap);
  flex: 1 1 auto;
  min-width: 0;
  color: inherit;
  text-decoration: none;
  cursor: inherit;
}

/* Визуелен разделувач меѓу групи акции (role=separator). */
.ui-contextmenu__separator {
  height: 1px;
  margin: 4px 6px;
  padding: 0;
  background: var(--ui-color-border);
  list-style: none;
}

/* Тековно избрана/активна ставка (aria-current="page"). */
.ui-contextmenu__item--selected {
  background: var(--ui-color-primary);
  color: var(--ui-color-text-on-primary);
}
.ui-contextmenu__item--selected:hover {
  background: var(--ui-color-primary-hover);
}

/* Анимирано отворање (Animate=true). Почитува prefers-reduced-motion. */
.ui-contextmenu--animated {
  animation: ui-contextmenu-in var(--ui-anim-duration, .2s) ease-out;
  transform-origin: top left;
}
@keyframes ui-contextmenu-in {
  from { opacity: 0; transform: scale(.96); }
  to   { opacity: 1; transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .ui-contextmenu--animated { animation: none; }
}

/* Forced-colors: системски бои за selected состојбата (фокус-прстенот веќе е покриен погоре). */
@media (forced-colors: active) {
  .ui-contextmenu__item--selected { background: Highlight; color: HighlightText; }
}

/* ── UiWindow §034: акции, состојби (minimized/maximized), ThemeColor — merge во ui-blazor.css ── */

/* Контејнер за акции во заглавието (прилагодени Actions + вградени Min/Max/Close). */
.ui-window__actions { display:flex; align-items:center; gap:4px; flex:0 0 auto; }

/* Заеднички ресет за вградените акции (минимизирај/максимизирај), како .ui-window__close. */
.ui-window__action { border:none; background:transparent; color:var(--ui-color-text); font-size:15px; line-height:1; cursor:pointer; padding:2px 6px; border-radius:var(--ui-radius); }
.ui-window__action:hover { background:var(--ui-color-base-bg); }
.ui-window__action:focus-visible { outline:var(--ui-focus-ring); outline-offset:1px; }
.ui-window__action:active { transform:translateY(1px); }

/* Минимизиран: само заглавието е видливо → телото не се рендерира, висината паѓа на auto
   (инлајн height:Хpx се поништува). */
.ui-window--minimized { height:auto !important; }
.ui-window--minimized .ui-window__header { border-bottom:none; cursor:default; }

/* Максимизиран: цел viewport без аглести радиуси/сенка (инлајн inset:0 ја носи позицијата). */
.ui-window--maximized { border-radius:0; box-shadow:none; }
.ui-window--maximized .ui-window__header { cursor:default; }

/* Центриран: инлајн left/top/transform веќе центрираат; класата е само семантички кука. */

/* ── ThemeColor варијанти на заглавието ──
   Достапни токени се --ui-color-primary и --ui-color-danger; за останатите семантички
   имиња користиме graceful fallback кон primary (без хардкод бои; ако темата дефинира
   --ui-color-<name>, се презема, инаку primary). */
.ui-window--primary   .ui-window__header { background:var(--ui-color-primary); color:var(--ui-color-text-on-primary); border-bottom-color:transparent; }
.ui-window--primary   .ui-window__title  { color:var(--ui-color-text-on-primary); }
.ui-window--primary   .ui-window__action,
.ui-window--primary   .ui-window__close  { color:var(--ui-color-text-on-primary); }

.ui-window--secondary .ui-window__header { background:var(--ui-color-secondary, var(--ui-color-base-bg-hover)); }

.ui-window--info      .ui-window__header { background:var(--ui-color-info, var(--ui-color-primary)); color:var(--ui-color-text-on-primary); border-bottom-color:transparent; }
.ui-window--info      .ui-window__title,
.ui-window--info      .ui-window__action,
.ui-window--info      .ui-window__close  { color:var(--ui-color-text-on-primary); }

.ui-window--success   .ui-window__header { background:var(--ui-color-success, var(--ui-color-primary)); color:var(--ui-color-text-on-primary); border-bottom-color:transparent; }
.ui-window--success   .ui-window__title,
.ui-window--success   .ui-window__action,
.ui-window--success   .ui-window__close  { color:var(--ui-color-text-on-primary); }

.ui-window--warning   .ui-window__header { background:var(--ui-color-warning, var(--ui-color-primary)); color:var(--ui-color-text-on-primary); border-bottom-color:transparent; }
.ui-window--warning   .ui-window__title,
.ui-window--warning   .ui-window__action,
.ui-window--warning   .ui-window__close  { color:var(--ui-color-text-on-primary); }

.ui-window--error     .ui-window__header,
.ui-window--danger    .ui-window__header { background:var(--ui-color-danger); color:var(--ui-color-text-on-primary); border-bottom-color:transparent; }
.ui-window--error     .ui-window__title,  .ui-window--danger .ui-window__title,
.ui-window--error     .ui-window__action, .ui-window--danger .ui-window__action,
.ui-window--error     .ui-window__close,  .ui-window--danger .ui-window__close { color:var(--ui-color-text-on-primary); }

/* Кога modal+CloseOnOverlayClick е активен, overlay-от добива покажувач преку родителот;
   inхерентно clickable е (има onclick), па даваме само визуелна навестување при hover. */
.ui-window--modal + .ui-window .ui-window-overlay { }

/* === UiForm (§069) — АДИТИВНО врз постоечките .ui-form правила (ui-blazor.css ~3243). НЕ ги дуплирај. === */

/* Columns: кога има повеќе од 1 колона формата станува CSS grid. grid-template-columns + gap-овите
   доаѓаат инлајн од BuildRootStyle (--ui-form-cols / repeat(...) / --ui-form-col-gap / --ui-form-row-gap). */
.ui-form--cols {
  display: grid;
  column-gap: var(--ui-form-col-gap, var(--ui-gap));
  row-gap: var(--ui-form-row-gap, var(--ui-gap));
  align-items: start;
}

/* Size модификатори — просторност на полињата преку gap (полињата си носат своја внатрешна големина). */
.ui-form--sm { gap: var(--ui-spacing-1, 4px); font-size: var(--ui-font-size-sm, .875rem); }
.ui-form--lg { gap: var(--ui-spacing-3, 12px); font-size: var(--ui-font-size-lg, 1.125rem); }

/* Disabled форма: целата контрола изгледа заклучено; <fieldset disabled> веќе го блокира внесот. */
.ui-form--disabled { opacity: .7; cursor: not-allowed; }
.ui-form__fieldset { border: 0; margin: 0; padding: 0; min-inline-size: 0; display: contents; }

/* Clear копче (type=button) — секундарен изглед покрај наследените .ui-btn состојби. */
.ui-form__clear:disabled,
.ui-form__clear[aria-disabled="true"] { opacity: .6; cursor: not-allowed; }

/* Порамнување на копчињата (ButtonsLayout). .ui-form__actions веќе е display:flex. */
.ui-form__actions--start   { justify-content: flex-start; }
.ui-form__actions--center  { justify-content: center; }
.ui-form__actions--end     { justify-content: flex-end; }
.ui-form__actions--stretch { justify-content: stretch; }
.ui-form__actions--stretch > .ui-btn { flex: 1 1 0; }

/* Кога формата е grid (повеќеколонска), акциите се протегаат преку сите колони. */
.ui-form--cols > .ui-form__actions { grid-column: 1 / -1; }

/* ValidationMessageType: None ги крие пораките; Tooltip е сигнал-класа што пораките можат да ја искористат. */
.ui-form--msg-none .ui-validation-message,
.ui-form--msg-none .ui-form__hint-error { display: none; }
.ui-form--msg-tooltip .ui-validation-message {
  position: absolute;
  z-index: var(--ui-z-1000, 1000);
}

/* ── UiAutoComplete: нови под-елементи (Ф API проширување) — спој во ui-blazor.css.
   Постоечкото (линии 569–574 и 2996–3045: --open/--disabled/--readonly/--invalid/input states,
   option hover/focus-visible/active/--selected) ОСТАНУВА и НЕ се дуплира тука.
   Долунаведеново додава САМО класи за новите под-елементи. Сите користат --ui-* токени. */

/* option: активна (тастатурно означена) ставка — поинтензивно од hover, читливо. */
.ui-autocomplete__option--active {
  background: var(--ui-color-primary);
  color: var(--ui-color-text-on-primary, #fff);
}
.ui-autocomplete__option--active.ui-autocomplete__option--selected:hover,
.ui-autocomplete__option--active:hover {
  background: var(--ui-color-primary-hover);
  color: var(--ui-color-text-on-primary, #fff);
}

/* prefix / suffix адорнаменти (икони, копчиња лево/десно од внесот). */
.ui-autocomplete__prefix,
.ui-autocomplete__suffix {
  display: inline-flex;
  align-items: center;
  gap: var(--ui-gap, .25rem);
  color: var(--ui-color-text-muted);
}

/* clear-копче „×" (по терк на .ui-combobox__clear). */
.ui-autocomplete__clear {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  background: transparent;
  cursor: pointer;
  color: var(--ui-color-text-muted);
  padding: 2px;
  border-radius: var(--ui-radius);
}
.ui-autocomplete__clear:hover { color: var(--ui-color-text); background: var(--ui-color-base-bg-hover); }
.ui-autocomplete__clear:focus-visible {
  outline: var(--ui-focus-ring, 2px solid var(--ui-color-primary));
  outline-offset: -1px;
}
.ui-autocomplete__clear-icon { position: relative; width: 1em; height: 1em; display: inline-block; }
.ui-autocomplete__clear-icon::before,
.ui-autocomplete__clear-icon::after {
  content: ""; position: absolute; top: 50%; left: 50%;
  width: 0.75em; height: 1.5px; background: currentColor;
}
.ui-autocomplete__clear-icon::before { transform: translate(-50%, -50%) rotate(45deg); }
.ui-autocomplete__clear-icon::after  { transform: translate(-50%, -50%) rotate(-45deg); }

/* header / footer / no-data региони во попапот. */
.ui-autocomplete__header,
.ui-autocomplete__footer {
  padding: 6px 10px;
  font: 13px var(--ui-font);
  color: var(--ui-color-text-muted);
}
.ui-autocomplete__header { border-bottom: 1px solid var(--ui-color-border); }
.ui-autocomplete__footer { border-top: 1px solid var(--ui-color-border); }
.ui-autocomplete__no-data {
  padding: 8px 10px;
  font: 14px var(--ui-font);
  color: var(--ui-color-text-muted);
  text-align: center;
}

/* ── UiMultiColumnComboBox: НОВИ елементи/состојби (бран Б — clear/active-row/header/footer/no-data) ──
   АДИТИВНО кон постоечкото во ui-blazor.css (база ~688-700 + состојби ~3204-3240).
   НЕ ги дуплира; додава само за новововедените под-елементи од имплементацијата. */

/* Активен ред при тастатурна навигација (aria-activedescendant визуелизација).
   Поразличен од --selected (избран) за да се гледа фокусот при движење. */
.ui-mccombobox__row--active { background: var(--ui-color-base-bg-hover); box-shadow: inset 2px 0 0 var(--ui-color-primary); }
.ui-mccombobox__row--active.ui-mccombobox__row--selected { background: var(--ui-color-primary); color: #fff; }

/* Копче за бришење (×) — позиционирано лево од стрелката-тригер. */
.ui-mccombobox__clear { position: absolute; inset-inline-end: calc(var(--ui-gap) * 2); top: 0; bottom: 0; width: calc(var(--ui-gap) * 1.75); display: inline-flex; align-items: center; justify-content: center; border: 0; background: transparent; color: var(--ui-color-text); cursor: pointer; padding: 0; }
.ui-mccombobox__clear:hover { color: var(--ui-color-danger); }
.ui-mccombobox__clear:focus-visible { outline: var(--ui-focus-ring, 2px solid var(--ui-color-primary)); outline-offset: -2px; }
/* CSS „×" без икона-зависност. */
.ui-mccombobox__clear-icon { position: relative; width: 0.75em; height: 0.75em; }
.ui-mccombobox__clear-icon::before,
.ui-mccombobox__clear-icon::after { content: ""; position: absolute; inset-inline-start: 50%; top: 0; width: 1px; height: 100%; background: currentColor; }
.ui-mccombobox__clear-icon::before { transform: translateX(-50%) rotate(45deg); }
.ui-mccombobox__clear-icon::after { transform: translateX(-50%) rotate(-45deg); }

/* Кога постои clear копче, остави место во полето за двете копчиња. */
.ui-mccombobox__input { padding-inline-end: calc(var(--ui-gap) * 4); }

/* Header/Footer на popup-от (sticky за да остануваат видливи при скрол). */
.ui-mccombobox__header { position: sticky; top: 0; padding: var(--ui-gap); border-bottom: 1px solid var(--ui-color-border); background: var(--ui-color-base-bg); color: var(--ui-color-text); font-weight: 600; }
.ui-mccombobox__footer { position: sticky; bottom: 0; padding: var(--ui-gap); border-top: 1px solid var(--ui-color-border); background: var(--ui-color-base-bg); color: var(--ui-color-text-muted, var(--ui-color-disabled)); font-size: 0.875em; }

/* No-data приказ кога нема видливи редови (празно/без совпаѓање на филтер). */
.ui-mccombobox__no-data { padding: calc(var(--ui-gap) * 2); text-align: center; color: var(--ui-color-text-muted, var(--ui-color-disabled)); font-style: italic; }

/* High-contrast: видлив активен ред и кога темата е принудна. */
@media (forced-colors: active) {
  .ui-mccombobox__row--active { box-shadow: inset 2px 0 0 Highlight; }
}

/* === UiColorPalette: грид-распоред + Size скали (Патека B — дополнува, НЕ редефинира) ===
   Постоечкиот блок (.ui-color-palette { display:inline-flex; gap:6px }) се надминува со грид кога
   компонентата емитува --ui-color-palette-columns/-tile-w/-tile-h преку BuildRootStyle. Сите вредности
   имаат fallback за безбедна деградација. Овие правила да се стават ПО постоечкиот UiColorPalette блок. */
.ui-color-palette {
  display: grid;
  grid-template-columns: repeat(var(--ui-color-palette-columns, 10), max-content);
  gap: 6px;
  align-content: start;
}
.ui-color-palette .ui-color-palette__swatch {
  width: var(--ui-color-palette-tile-w, 24px);
  height: var(--ui-color-palette-tile-h, 24px);
}

/* Size модификатори — суптилно скалирање на gap (плочките примарно се водат од TileWidth/Height). */
.ui-color-palette--sm { gap: 4px; }
.ui-color-palette--md { gap: 6px; }
.ui-color-palette--lg { gap: 8px; }

/* ── UiColorGradient: нови состојби + текстуални полиња/toggle (merge во ui-blazor.css; не дуплирај постоечките .ui-colorgradient* правила) ── */

/* Фокус ринг на интерактивните слајдер-делови (спец: „фокусот е визуелно нагласен"). */
.ui-colorgradient__surface:focus-visible,
.ui-colorgradient__hue:focus-visible,
.ui-colorgradient__alpha:focus-visible { outline: var(--ui-focus-ring); outline-offset: 2px; }

/* Read-only: визуелно поблаго, не-интерактивно (без да изгледа целосно disabled). */
.ui-colorgradient--readonly .ui-colorgradient__surface,
.ui-colorgradient--readonly .ui-colorgradient__hue,
.ui-colorgradient--readonly .ui-colorgradient__alpha { cursor: default; }
.ui-colorgradient--readonly { opacity: .85; }

/* Invalid: нагласи ги границите/фокусот со danger токенот. */
.ui-colorgradient--invalid .ui-colorgradient__surface { border-color: var(--ui-color-danger); }
.ui-colorgradient--invalid .ui-colorgradient__surface:focus-visible,
.ui-colorgradient--invalid .ui-colorgradient__hue:focus-visible,
.ui-colorgradient--invalid .ui-colorgradient__alpha:focus-visible { outline-color: var(--ui-color-danger); }

/* Текстуални полиња + toggle на формат. */
.ui-colorgradient__inputs { display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
.ui-colorgradient__input { height:28px; padding:0 6px; border:1px solid var(--ui-color-border); border-radius:var(--ui-radius-sm); font:13px var(--ui-font); color:var(--ui-color-text); background:#fff; box-sizing:border-box; }
.ui-colorgradient__input--hex { width:96px; }
.ui-colorgradient__input--rgb { width:52px; }
.ui-colorgradient__input--alpha { width:56px; }
.ui-colorgradient__input:focus-visible { outline:var(--ui-focus-ring); outline-offset:1px; }
.ui-colorgradient__input:disabled { opacity:.55; cursor:not-allowed; }
.ui-colorgradient__format-toggle { height:28px; padding:0 8px; border:1px solid var(--ui-color-border); border-radius:var(--ui-radius-sm); background:var(--ui-color-base-bg); color:var(--ui-color-text); font:12px var(--ui-font); font-weight:600; cursor:pointer; }
.ui-colorgradient__format-toggle:hover { background:var(--ui-color-surface-2); }
.ui-colorgradient__format-toggle:focus-visible { outline:var(--ui-focus-ring); outline-offset:1px; }
.ui-colorgradient__format-toggle:disabled { opacity:.55; cursor:not-allowed; }

/* Dark тема: текстуалните полиња на површина-боја наместо чисто бело. */
.ui-theme-dark .ui-colorgradient__input { background:var(--ui-color-base-bg); }

/* ── UiMap (§9; append to ui-blazor.css — само токени, без хардкод бои) ── */
.ui-map {
  position: relative;
  overflow: hidden;
  touch-action: none;
  background: var(--ui-color-surface-alt, var(--ui-color-surface));
  border: 1px solid var(--ui-color-border);
  border-radius: var(--ui-radius);
  color: var(--ui-color-text);
  outline: none;
  --ui-map-void-bg: var(--ui-color-surface-alt, var(--ui-color-surface));
}
.ui-map:focus-visible {
  box-shadow: var(--ui-focus-ring, 0 0 0 2px var(--ui-color-primary));
}
.ui-map--empty { background: var(--ui-map-void-bg); }

.ui-map__surface {
  position: absolute;
  inset: 0;
  will-change: transform;
  cursor: grab;
}
.ui-map--panning .ui-map__surface { cursor: grabbing; }
.ui-map--panning .ui-map__tile { transition: none; }

.ui-map__tile-pane { position: absolute; inset: 0; }
.ui-map__tile {
  position: absolute;
  left: 0;
  top: 0;
  user-select: none;
  -webkit-user-drag: none;
}
.ui-map__tile--error { background: var(--ui-color-surface-alt, var(--ui-color-surface)); }

.ui-map__vector-pane { position: absolute; inset: 0; pointer-events: none; }
.ui-map__vector-pane .ui-map__shape,
.ui-map__vector-pane .ui-map__bubble { pointer-events: auto; }
.ui-map__shape { fill: var(--ui-color-primary); stroke: var(--ui-color-primary); }
.ui-map__shape--hover { filter: brightness(1.08); }
.ui-map__bubble { fill: var(--ui-color-primary); }

.ui-map__marker-pane { position: absolute; inset: 0; }
.ui-map__marker {
  position: absolute;
  left: 0;
  top: 0;
  color: var(--ui-color-primary);
  cursor: pointer;
  outline: none;
}
.ui-map__marker:focus-visible { box-shadow: var(--ui-focus-ring, 0 0 0 2px var(--ui-color-primary)); }
.ui-map__marker--active { filter: brightness(1.1); }

/* Контроли (zoom +/−) — не се pan-ираат */
.ui-map__controls {
  position: absolute;
  top: var(--ui-spacing-2, 8px);
  left: var(--ui-spacing-2, 8px);
  z-index: var(--ui-z-dropdown, 1000);
  display: flex;
  flex-direction: column;
  gap: 1px;
  border-radius: var(--ui-radius-sm, var(--ui-radius));
  box-shadow: var(--ui-shadow-2);
  overflow: hidden;
}
.ui-map--rtl .ui-map__controls { left: auto; right: var(--ui-spacing-2, 8px); }

.ui-map__zoom {
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  line-height: 1;
  border: none;
  background: var(--ui-color-surface);
  color: var(--ui-color-text);
  cursor: pointer;
  transition: background-color var(--ui-anim-duration, .15s) ease;
}
.ui-map__zoom:hover { background: var(--ui-color-surface-alt, var(--ui-color-border)); }
.ui-map__zoom:focus-visible {
  outline: none;
  box-shadow: var(--ui-focus-ring, 0 0 0 2px var(--ui-color-primary)) inset;
}
.ui-map__zoom--disabled,
.ui-map__zoom[aria-disabled="true"] {
  opacity: .5;
  cursor: default;
  pointer-events: none;
}

.ui-map__attribution {
  position: absolute;
  bottom: 0;
  right: 0;
  padding: 1px 6px;
  font-size: .75rem;
  color: var(--ui-color-text);
  background: color-mix(in srgb, var(--ui-color-surface) 80%, transparent);
  border-top-left-radius: var(--ui-radius-sm, var(--ui-radius));
}
.ui-map--rtl .ui-map__attribution { right: auto; left: 0; border-top-left-radius: 0; border-top-right-radius: var(--ui-radius-sm, var(--ui-radius)); }

.ui-map__popup {
  background: var(--ui-color-surface);
  color: var(--ui-color-text);
  border: 1px solid var(--ui-color-border);
  border-radius: var(--ui-radius);
  box-shadow: var(--ui-shadow-2);
  z-index: var(--ui-z-tooltip, 1070);
}

@media (prefers-reduced-motion: reduce) {
  .ui-map__surface, .ui-map__tile, .ui-map__zoom { transition: none !important; }
}

/* ===== Бран-4 (Button-фамилија): Button/ButtonGroup/DropDownButton/SplitButton/ToggleButton/IconButton/FAB/Card/Loader/Skeleton/ChunkProgressBar/StackLayout/FloatingLabel/AnimationContainer/ValidationMessage ===== */
/* === UiButton (§010) — дополнување на аудитираните „мртви"/недостасувачки состојби.
   Сите правила се АДИТИВНИ и се клучени на класи што ButtonAppearance ВЕЌЕ ги емитува
   (ui-btn--active, ui-btn--loading, ui-btn--<color>). Само design токени, без хардкод бои
   освен семантички fallback каде темата сè уште нема токен (success/warning/error/info).
   Овие НЕ менуваат DOM/класи → ниеден постоечки тест не е засегнат. */

/* :active — визуелен feedback при притискање (аудит: постоеше само ui-btn--active toggle класа). */
.ui-btn:active:not([disabled]):not([aria-disabled="true"]) { transform: translateY(1px); }

/* :focus fallback ринг — аудит бара видлив фокус индикатор и за не-:focus-visible случај.
   :focus-visible веќе постои (поспецифичен) и продолжува да доминира за тастатурен фокус. */
.ui-btn:focus { outline: var(--ui-focus-ring, 2px solid var(--ui-color-primary)); outline-offset: 1px; }

/* loading — аудит: ui-btn--loading беше „мртва" класа. Замижи ja лабелата/иконите, остави го спинерот;
   спречи интеракција. Spinner-от (.ui-btn__spinner) останува видлив. */
.ui-btn--loading { cursor: progress; }
.ui-btn--loading .ui-btn__label,
.ui-btn--loading .ui-icon { opacity: .45; }

/* Семантички ThemeColor (solid) — аудит: 9 вредности немаа CSS воопшто. Класите ui-btn--success итн.
   веќе се емитуваат кога ThemeColor="success". Токен-прв со fallback (темата подоцна ги дефинира
   --ui-color-success/...; до тогаш fallback вредностите важат). */
.ui-btn--success { background: var(--ui-color-success, #2e7d32); color: var(--ui-color-on-success, #fff); border-color: transparent; }
.ui-btn--warning { background: var(--ui-color-warning, #ed8a19); color: var(--ui-color-on-warning, #1b1f24); border-color: transparent; }
.ui-btn--error,
.ui-btn--danger  { background: var(--ui-color-error, #d23b3b); color: var(--ui-color-on-error, #fff); border-color: transparent; }
.ui-btn--info    { background: var(--ui-color-info, #1f7aa6); color: var(--ui-color-on-info, #fff); border-color: transparent; }
.ui-btn--secondary { background: var(--ui-color-base-bg); color: var(--ui-color-text); }
.ui-btn--tertiary  { background: transparent; color: var(--ui-color-text); }
.ui-btn--dark    { background: var(--ui-color-dark, #1b1f24); color: #fff; border-color: transparent; }
.ui-btn--light   { background: var(--ui-color-light, #f3f4f6); color: var(--ui-color-text); border-color: var(--ui-color-border); }
.ui-btn--inverse { background: var(--ui-color-text); color: var(--ui-color-base-bg); border-color: transparent; }
.ui-btn--success:hover { filter: brightness(.94); }
.ui-btn--warning:hover { filter: brightness(.94); }
.ui-btn--error:hover, .ui-btn--danger:hover { filter: brightness(.94); }
.ui-btn--info:hover { filter: brightness(.94); }

/* ───────────────── UiButtonGroup (§011) — композитен слој ─────────────────
   Постоечките .ui-btn-group правила (display:inline-flex + border-radius на
   .ui-btn first/last child) остануваат за backward-compat со обични UiButton деца.
   Долунаведеното стилизира ги ПОСВЕТЕНИТЕ под-копчиња .ui-btn-group__btn. */

/* Вертикална ориентација на контејнерот */
.ui-btn-group--vertical { flex-direction: column; }

/* Базно под-копче */
.ui-btn-group__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--ui-gap);
  height: var(--ui-control-height-md);
  padding: 0 14px;
  border: 1px solid var(--ui-color-border);
  background: var(--ui-color-base-bg);
  color: var(--ui-color-text);
  font-family: var(--ui-font);
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  user-select: none;
  position: relative;            /* за z-index лифт на фокус/селекција */
  border-radius: 0;
  margin-left: -1px;             /* преклопени рабови — без двојна линија */
  transition: background .12s ease, border-color .12s ease, box-shadow .12s ease;
}

/* Заоблени само надворешните агли (хоризонтално) */
.ui-btn-group__btn:first-child { border-radius: var(--ui-radius) 0 0 var(--ui-radius); margin-left: 0; }
.ui-btn-group__btn:last-child  { border-radius: 0 var(--ui-radius) var(--ui-radius) 0; }
.ui-btn-group__btn:only-child  { border-radius: var(--ui-radius); }

/* Вертикална: преклоп оди по вертикала, заоблување горе/долу */
.ui-btn-group--vertical .ui-btn-group__btn { margin-left: 0; margin-top: -1px; }
.ui-btn-group--vertical .ui-btn-group__btn:first-child { border-radius: var(--ui-radius) var(--ui-radius) 0 0; margin-top: 0; }
.ui-btn-group--vertical .ui-btn-group__btn:last-child  { border-radius: 0 0 var(--ui-radius) var(--ui-radius); }
.ui-btn-group--vertical .ui-btn-group__btn:only-child  { border-radius: var(--ui-radius); }

/* Icon-only — квадратен padding */
.ui-btn-group__btn--icon-only { padding: 0; width: var(--ui-control-height-md); }

/* Состојби */
.ui-btn-group__btn:hover { background: var(--ui-color-base-bg-hover); z-index: 1; }
.ui-btn-group__btn:active { background: var(--ui-color-base-bg-hover); }
.ui-btn-group__btn:focus-visible {
  outline: 2px solid var(--ui-color-primary);
  outline-offset: -1px;
  z-index: 2;                    /* фокусот над соседите за видлив прстен */
}

/* Избрано (toggle / radio) */
.ui-btn-group__btn--selected {
  background: var(--ui-color-primary);
  border-color: var(--ui-color-primary);
  color: var(--ui-color-text-on-primary);
  z-index: 1;
}
.ui-btn-group__btn--selected:hover { background: var(--ui-color-primary-hover); border-color: var(--ui-color-primary-hover); }

/* Оневозможено (поединечно копче или преку групно Enabled=false) */
.ui-btn-group__btn--disabled,
.ui-btn-group__btn[disabled],
.ui-btn-group__btn[aria-disabled="true"] {
  opacity: .55;
  cursor: not-allowed;
  pointer-events: none;
}
.ui-btn-group--disabled { /* визуелен маркер за целата група; копчињата носат сопствена disabled состојба */ }

/* RTL: завртени надворешни агли + насока на преклопот (хоризонтално) */
[dir="rtl"] .ui-btn-group:not(.ui-btn-group--vertical) .ui-btn-group__btn { margin-left: 0; margin-right: -1px; }
[dir="rtl"] .ui-btn-group:not(.ui-btn-group--vertical) .ui-btn-group__btn:first-child { border-radius: 0 var(--ui-radius) var(--ui-radius) 0; margin-right: 0; }
[dir="rtl"] .ui-btn-group:not(.ui-btn-group--vertical) .ui-btn-group__btn:last-child  { border-radius: var(--ui-radius) 0 0 var(--ui-radius); }

/* Икона внатре во под-копче */
.ui-btn-group__icon { display: inline-flex; }
.ui-btn-group__label { display: inline-flex; align-items: center; }

/* ── UiDropDownButton: додатоци за нови состојби (roving фокус, scroll, dark-safe позадина) ──
   ЗАБЕЛЕШКА за централен merge:
   1) Постоечкото правило `.ui-dropdownbutton__menu { ... background:#fff; ... }` (околу ред 412)
      хардкодира бела позадина и НЕ ја почитува dark темата — замени `background:#fff` со
      `background:var(--ui-color-surface)`. (Истиот проблем постои и кај .ui-splitbutton__menu.)
   2) Долните правила се НОВИ — само додај ги под постоечкиот DropDownButton блок. */

/* Видлив фокус-индикатор на тастатурно-фокусираната ставка (WCAG 2.1/2.2 AA, roving навигација). */
.ui-dropdownbutton__item--focused {
  background: var(--ui-color-base-bg-hover);
  outline: 2px solid var(--ui-color-primary);
  outline-offset: -2px;
}

/* Фокус-видливост и кога ставката добива вистински DOM фокус (fallback). */
.ui-dropdownbutton__item:focus-visible {
  outline: 2px solid var(--ui-color-primary);
  outline-offset: -2px;
}

/* Менито прима фокус (focus management) но фокусот е виртуелен преку aria-activedescendant. */
.ui-dropdownbutton__menu:focus { outline: none; }
.ui-dropdownbutton__menu:focus-visible { outline: none; }

/* Кога е зададен PopupMaxHeight (inline max-height + overflow:auto), мазен scroll. */
.ui-dropdownbutton__menu { scrollbar-width: thin; }

/* Икона во ставката усогласена со SplitButton (доследна големина). */
.ui-dropdownbutton__item .ui-icon { display:inline-flex; align-items:center; flex:0 0 auto; }

/* ── UiSplitButton: дополнувања (адитивни, по терк на аудит §013) ──
   Се мержуваат на крај од ui-blazor.css. Не ги бришат постоечките .ui-splitbutton* правила
   (ред ~417–428); само додаваат фокус-индикатор, скрол, тема-свесна позадина и спејсинг на икона. */

/* Per-component токени (тема-свесни; dark преку наследен --ui-color-* override) */
.ui-splitbutton {
  --ui-splitbutton-menu-bg: var(--ui-color-base-bg);
  --ui-splitbutton-menu-shadow: 0 4px 14px rgba(0,0,0,.15);
}

/* Тема-свесна позадина на менито (замена за хардкодиран #fff што не почитуваше dark тема) +
   скрол при многу ставки (max-height/overflow — недостасуваше). */
.ui-splitbutton__menu {
  background: var(--ui-splitbutton-menu-bg);
  box-shadow: var(--ui-splitbutton-menu-shadow);
  max-height: var(--ui-splitbutton-menu-max-height, 280px);
  overflow-y: auto;
}

/* Видлив фокус-индикатор при roving тастатурна навигација (WCAG 2.1 AA) */
.ui-splitbutton__item--focused {
  background: var(--ui-color-base-bg-hover);
  outline: 2px solid var(--ui-color-primary);
  outline-offset: -2px;
}

/* Фокус-видливост и при директна табулација во ставка */
.ui-splitbutton__item:focus-visible {
  outline: 2px solid var(--ui-color-primary);
  outline-offset: -2px;
}

/* Спејсинг за иконата на примарното копче */
.ui-splitbutton__action-icon { margin-inline-end: 6px; display: inline-flex; align-items: center; }

/* RTL: огледување на split-радиусите и на отворањето на менито (терк бара mirror во RTL) */
[dir="rtl"] .ui-splitbutton__action { border-radius: 0 var(--ui-radius) var(--ui-radius) 0; }
[dir="rtl"] .ui-splitbutton__toggle { border-radius: var(--ui-radius) 0 0 var(--ui-radius); margin-left: 0; margin-right: -1px; }
[dir="rtl"] .ui-splitbutton__menu { left: auto; right: 0; }

/* IconButton (§108): квадратна геометрија за sm/lg икона-копче (md веќе постои на .ui-btn--icon). */
.ui-btn--icon.ui-btn--sm { width: var(--ui-control-height-sm); }
.ui-btn--icon.ui-btn--lg { width: var(--ui-control-height-lg); }

/* IconButton (§108): заоблување преку Rounded токен (маркер-класа инјектирана во Class). */
.ui-btn--rounded-none { border-radius: 0; }
.ui-btn--rounded-sm   { border-radius: var(--ui-radius-sm); }
.ui-btn--rounded-md   { border-radius: var(--ui-radius-md); }
.ui-btn--rounded-lg   { border-radius: calc(var(--ui-radius) * 2); }
.ui-btn--rounded-full { border-radius: 9999px; }

/* ── UiFloatingActionButton: позиционирање, extended текст, состојби, speed-dial ── */
/* (Постоечкото .ui-fab правило во ui-blazor.css НЕ се менува — ова е адитивно.) */

/* Кога е закотвен и со текст, не е повеќе совршен круг — дозволи pill облик. */
.ui-fab.ui-fab--fixed,
.ui-fab.ui-fab--absolute { margin: 0; }
.ui-fab:has(.ui-fab__text) { width: auto !important; border-radius: 999px !important; padding: 0 var(--ui-spacing-4, 16px) !important; gap: var(--ui-spacing-2, 8px); }
.ui-fab__text { font: 14px var(--ui-font); }

/* Елевација/фокус/притиснат — специфични за кружен FAB (дополнуваат генеричкиот .ui-btn). */
.ui-fab { transition: box-shadow .18s ease, transform .06s ease; }
.ui-fab:hover { box-shadow: 0 6px 16px rgba(0,0,0,.30); }
.ui-fab:active { box-shadow: 0 2px 6px rgba(0,0,0,.28); transform: translateY(1px); }
.ui-fab:focus-visible { outline: var(--ui-focus-ring); outline-offset: 2px; }
.ui-fab[aria-expanded="true"] { box-shadow: 0 8px 20px rgba(0,0,0,.32); }

/* Speed-dial мени (сосед на копчето). */
.ui-fab__items { list-style: none; margin: 0; padding: var(--ui-spacing-1, 4px); display: inline-flex; flex-direction: column; gap: var(--ui-spacing-1, 4px); background: var(--ui-color-base-bg); border: 1px solid var(--ui-color-border); border-radius: var(--ui-radius); box-shadow: 0 6px 20px rgba(0,0,0,.18); z-index: var(--ui-z-dropdown, 1000); }
.ui-fab__items--start { align-items: flex-start; }
.ui-fab__items--center { align-items: center; }
.ui-fab__items--end { align-items: flex-end; }
.ui-fab__items--stretch { align-items: stretch; }
.ui-fab__item-wrap { display: flex; }

/* Speed-dial ставка. */
.ui-fab__item { display: inline-flex; align-items: center; gap: var(--ui-spacing-2, 8px); width: 100%; border: none; background: none; cursor: pointer; padding: var(--ui-spacing-2, 8px); border-radius: var(--ui-radius-sm, 3px); font: 14px var(--ui-font); color: var(--ui-color-text); text-align: start; }
.ui-fab__item:hover { background: var(--ui-color-base-bg-hover); }
.ui-fab__item:focus-visible { outline: var(--ui-focus-ring); outline-offset: -2px; }
.ui-fab__item--disabled { color: var(--ui-color-disabled); cursor: default; pointer-events: none; }
.ui-fab__item-icon { flex: 0 0 auto; }
.ui-fab__item-text { flex: 1 1 auto; white-space: nowrap; }

/* ============================================================================
   UiCard (§027) — composite-block styling, theme colors, orientation, states.
   Враќам ги тука за централен merge во ui-blazor.css (НЕ ги пишувам сам).
   Сите бои преку --ui-* токени (нема хардкод). Реупотребувам постоечки токени:
   --ui-color-border, --ui-color-base-bg, --ui-color-text, --ui-color-primary,
   --ui-color-danger, --ui-radius, --ui-anim-duration, --ui-color-disabled.
   ============================================================================ */

/* (1) ТЕМА-РЕГРЕСИЈА: .ui-card има хардкодиран background:#fff (ui-blazor.css ред 184)
   → бел во .ui-theme-dark. Замени ja ЦЕЛАТА .ui-card декларација со долната
   (color исто така да го наследи текстот од темата). Конфликтот го решава родителот. */
.ui-card {
  border: 1px solid var(--ui-color-border);
  border-radius: var(--ui-radius);
  background: var(--ui-color-surface, var(--ui-color-base-bg));
  color: var(--ui-color-text);
  overflow: hidden;
}

/* (2) Хоризонтална ориентација — телото/блоковите еден до друг. */
.ui-card--horizontal { display: flex; flex-direction: row; align-items: stretch; }
.ui-card--horizontal > .ui-card__body { flex: 1 1 auto; }

/* (3) Композитни блокови што немаа CSS: title / subtitle / image / actions / separator. */
.ui-card__title { font-size: 1.05rem; font-weight: 600; line-height: 1.3; margin: 0; color: var(--ui-color-text); }
.ui-card__subtitle { font-size: .85rem; color: var(--ui-color-text-muted, var(--ui-color-disabled)); margin-top: 2px; }
.ui-card__image { display: block; width: 100%; height: auto; object-fit: cover; }
.ui-card--horizontal > .ui-card__image { width: auto; height: 100%; }

/* Actions: контејнер + насока + порамнување (Layout: start/center/end/stretch). */
.ui-card__actions { display: flex; gap: 8px; padding: 12px 16px; align-items: center; }
.ui-card__actions--horizontal { flex-direction: row; }
.ui-card__actions--vertical { flex-direction: column; align-items: stretch; }
.ui-card__actions--start { justify-content: flex-start; }
.ui-card__actions--center { justify-content: center; }
.ui-card__actions--end { justify-content: flex-end; }
.ui-card__actions--stretch { justify-content: stretch; }
/* stretch: децата подеднакво го пополнуваат просторот по главната оска. */
.ui-card__actions--stretch.ui-card__actions--horizontal > * { flex: 1 1 0; }
.ui-card__actions--stretch.ui-card__actions--vertical > * { width: 100%; }

/* Separator: тенка линија — хоризонтална (default) или вертикална. */
.ui-card__separator { background: var(--ui-color-border); border: 0; flex: 0 0 auto; }
.ui-card__separator--horizontal { width: 100%; height: 1px; }
.ui-card__separator--vertical { width: 1px; align-self: stretch; min-height: 100%; }

/* (4) Тематски бои (ThemeColor) — акцент-раб + суптилна позадина, тема-адаптивно.
   Користам само сигурно дефинирани токени (primary, danger) со var() fallback за
   останатите за да не се скрши кога токенот не е дефиниран во темата. */
.ui-card--primary   { border-color: var(--ui-color-primary); box-shadow: inset 0 0 0 1px var(--ui-color-primary); }
.ui-card--secondary { border-color: var(--ui-color-secondary, var(--ui-color-border)); }
.ui-card--success   { border-color: var(--ui-color-success, #2e7d32); box-shadow: inset 0 0 0 1px var(--ui-color-success, #2e7d32); }
.ui-card--info      { border-color: var(--ui-color-info, var(--ui-color-primary)); box-shadow: inset 0 0 0 1px var(--ui-color-info, var(--ui-color-primary)); }
.ui-card--warning   { border-color: var(--ui-color-warning, #ed8a19); box-shadow: inset 0 0 0 1px var(--ui-color-warning, #ed8a19); }
.ui-card--danger,
.ui-card--error     { border-color: var(--ui-color-danger, #d23b3b); box-shadow: inset 0 0 0 1px var(--ui-color-danger, #d23b3b); }
.ui-card--dark      { background: #1b1f24; color: #f3f4f6; border-color: #1b1f24; }
.ui-card--light     { background: #ffffff; color: #1b1f24; border-color: var(--ui-color-border); }
.ui-card--inverse   { background: var(--ui-color-text); color: var(--ui-color-base-bg); border-color: var(--ui-color-text); }

/* (5) Линк-варијанта на интерактивна картичка — истиот афорданс како clickable.
   (.ui-card--clickable веќе постои; ова е дополнителна courtesy кога role=link.) */
.ui-card[role="link"] { cursor: pointer; }

/* === UiLoader (§093) — вистинска сегментна презентација ===
   C# емитира .ui-loader__segment span-ови (3 за pulsing, 4 за спинери). Старите
   правила во ui-blazor.css (ред 196–198) ги игнорираа и позајмуваа ui-btn-spin од
   Button. Овие правила доаѓаат ПОСЛЕ во каскадата и ги надвладуваат. */

/* Тематски варијабли (наследник на --ui-* токени; со fallback за теми без semantic токени). */
.ui-loader {
  --ui-loader-size: 20px;
  --ui-loader-speed: .9s;
  --ui-loader-color: var(--ui-color-primary, #2f6feb);

  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: calc(var(--ui-loader-size) * .18);
  width: auto;
  height: var(--ui-loader-size);
  line-height: 0;
  vertical-align: middle;
  color: var(--ui-loader-color);
  /* Неутрализирај го legacy border-spinner-от (ред 196 во ui-blazor.css). */
  border: 0 !important;
  border-radius: 0;
  animation: none !important;
  box-sizing: content-box;
}

/* Поединечен сегмент — носи боја преку currentColor (наследено од --ui-loader-color). */
.ui-loader__segment {
  display: inline-block;
  background: currentColor;
  border-radius: 50%;
  flex: 0 0 auto;
}

/* ── Големини (sm / md / lg) ── */
.ui-loader--sm { --ui-loader-size: 14px; }
.ui-loader--md { --ui-loader-size: 20px; }
.ui-loader--lg { --ui-loader-size: 28px; }

/* ── Тип: Pulsing — три точки што пулсираат во низа ── */
.ui-loader--pulsing .ui-loader__segment {
  width: calc(var(--ui-loader-size) * .28);
  height: calc(var(--ui-loader-size) * .28);
  animation: ui-loader-pulse var(--ui-loader-speed) ease-in-out infinite both;
}
.ui-loader--pulsing .ui-loader__segment:nth-child(1) { animation-delay: -0.32s; }
.ui-loader--pulsing .ui-loader__segment:nth-child(2) { animation-delay: -0.16s; }
.ui-loader--pulsing .ui-loader__segment:nth-child(3) { animation-delay: 0s; }

@keyframes ui-loader-pulse {
  0%, 80%, 100% { transform: scale(.4); opacity: .35; }
  40%           { transform: scale(1);  opacity: 1; }
}

/* ── Тип: InfiniteSpinner — четири лака што кружат континуирано ──
   Сегментите се позиционираат како прстен; целиот прстен ротира. */
.ui-loader--infinite-spinner,
.ui-loader--converging-spinner {
  width: var(--ui-loader-size);
  gap: 0;
}
.ui-loader--infinite-spinner .ui-loader__segment,
.ui-loader--converging-spinner .ui-loader__segment {
  position: absolute;
  top: 50%;
  left: 50%;
  width: calc(var(--ui-loader-size) * .22);
  height: calc(var(--ui-loader-size) * .22);
  margin: calc(var(--ui-loader-size) * -.11) 0 0 calc(var(--ui-loader-size) * -.11);
}

/* Распоред на 4-те лака на 0/90/180/270 степени, поместени навон по радиусот. */
.ui-loader--infinite-spinner .ui-loader__segment:nth-child(1),
.ui-loader--converging-spinner .ui-loader__segment:nth-child(1) {
  transform: rotate(0deg)   translate(calc(var(--ui-loader-size) * .34));
}
.ui-loader--infinite-spinner .ui-loader__segment:nth-child(2),
.ui-loader--converging-spinner .ui-loader__segment:nth-child(2) {
  transform: rotate(90deg)  translate(calc(var(--ui-loader-size) * .34));
}
.ui-loader--infinite-spinner .ui-loader__segment:nth-child(3),
.ui-loader--converging-spinner .ui-loader__segment:nth-child(3) {
  transform: rotate(180deg) translate(calc(var(--ui-loader-size) * .34));
}
.ui-loader--infinite-spinner .ui-loader__segment:nth-child(4),
.ui-loader--converging-spinner .ui-loader__segment:nth-child(4) {
  transform: rotate(270deg) translate(calc(var(--ui-loader-size) * .34));
}

/* InfiniteSpinner: целиот прстен ротира рамномерно. */
.ui-loader--infinite-spinner {
  animation: ui-loader-spin var(--ui-loader-speed) linear infinite !important;
}
@keyframes ui-loader-spin {
  to { transform: rotate(360deg); }
}

/* ── Тип: ConvergingSpinner — ротира + сегментите пулсираат во opacity (ефект на спојување) ── */
.ui-loader--converging-spinner {
  animation: ui-loader-spin calc(var(--ui-loader-speed) * 1.4) linear infinite !important;
}
.ui-loader--converging-spinner .ui-loader__segment {
  animation: ui-loader-converge calc(var(--ui-loader-speed) * 1.2) ease-in-out infinite both;
}
.ui-loader--converging-spinner .ui-loader__segment:nth-child(1) { animation-delay: -0.45s; }
.ui-loader--converging-spinner .ui-loader__segment:nth-child(2) { animation-delay: -0.30s; }
.ui-loader--converging-spinner .ui-loader__segment:nth-child(3) { animation-delay: -0.15s; }
.ui-loader--converging-spinner .ui-loader__segment:nth-child(4) { animation-delay: 0s; }

@keyframes ui-loader-converge {
  0%, 100% { opacity: .25; }
  50%      { opacity: 1; }
}

/* ── Десет тематски бои (врзани на --ui-color-* токени со fallback) ── */
.ui-loader--primary   { --ui-loader-color: var(--ui-color-primary,   #2f6feb); }
.ui-loader--secondary { --ui-loader-color: var(--ui-color-secondary, #6b7280); }
.ui-loader--tertiary  { --ui-loader-color: var(--ui-color-tertiary,  #8b5cf6); }
.ui-loader--info      { --ui-loader-color: var(--ui-color-info,      #0ea5e9); }
.ui-loader--success   { --ui-loader-color: var(--ui-color-success,   #16a34a); }
.ui-loader--warning   { --ui-loader-color: var(--ui-color-warning,   #d97706); }
.ui-loader--error     { --ui-loader-color: var(--ui-color-error, var(--ui-color-danger, #dc2626)); }
.ui-loader--dark      { --ui-loader-color: var(--ui-color-dark,      #1f2937); }
.ui-loader--light     { --ui-loader-color: var(--ui-color-light,     #e5e7eb); }
.ui-loader--inverse   { --ui-loader-color: var(--ui-color-text-on-primary, #ffffff); }

/* ── RTL: радијалните спинери се симетрични; за pulsing само го огледуваме редоследот
   на доцнењата за природно движење во RTL контекст. ── */
[dir="rtl"] .ui-loader--pulsing .ui-loader__segment:nth-child(1) { animation-delay: 0s; }
[dir="rtl"] .ui-loader--pulsing .ui-loader__segment:nth-child(3) { animation-delay: -0.32s; }

/* ── Намалено движење (WCAG 2.3.3 / SC 2.2.2): спинерите запираат и стануваат статичен
   приглушен индикатор; точките остануваат видливи со намалена непроѕирност без трепкање.
   Доаѓа ПОСЛЕ постоечкиот .ui-loader { animation-duration: 2.4s } блок и го надвладува. ── */
@media (prefers-reduced-motion: reduce) {
  .ui-loader,
  .ui-loader--infinite-spinner,
  .ui-loader--converging-spinner { animation: none !important; }
  .ui-loader__segment { animation: none !important; opacity: .55 !important; }
}

/* === UiChunkProgressBar: track wrapper, ориентација, ознака, complete состојба === */
/* Овие правила недостасуваат во ui-blazor.css — рендерираниот markup (track, label,
   --horizontal/--vertical/--complete, label-position модификатори) досега немаше стил. */

/* Track-от ги држи сегментите; во хоризонтала е ред, во вертикала колона (одоздола нагоре). */
.ui-chunk-progress__track { display:flex; gap:3px; flex:1 1 auto; }
.ui-chunk-progress--horizontal .ui-chunk-progress__track { flex-direction:row; }
.ui-chunk-progress--vertical { align-items:stretch; }
.ui-chunk-progress--vertical .ui-chunk-progress__track {
  flex-direction:column-reverse; /* пополнувањето оди оддолу нагоре */
  height:100%;
}
.ui-chunk-progress--vertical .ui-chunk-progress__chunk { width:10px; height:auto; }

/* Кога има ознака, root става ред/колона за да ја позиционира ознаката околу track-от. */
.ui-chunk-progress--labeled { align-items:center; gap:8px; }
.ui-chunk-progress--vertical.ui-chunk-progress--labeled { flex-direction:column; }

/* Ознака: позициите се водат преку модификатор класи. */
.ui-chunk-progress__label {
  font-size:.85em;
  line-height:1;
  color:var(--ui-color-text, inherit);
  white-space:nowrap;
}
.ui-chunk-progress__label--center { text-align:center; flex:0 0 auto; margin-inline:auto; }
.ui-chunk-progress__label--start { order:-1; }
.ui-chunk-progress__label--end { order:1; }

/* Complete: сите сегменти пополнети → потврдна (success) боја со fallback (token не е секаде дефиниран). */
.ui-chunk-progress--complete .ui-chunk-progress__chunk--filled {
  background:var(--ui-color-success, #2e9e57);
}

/* RTL: хоризонталното пополнување оди оддесно налево (track го превртува редоследот). */
.ui-chunk-progress[dir="rtl"] .ui-chunk-progress__track,
[dir="rtl"] .ui-chunk-progress--horizontal .ui-chunk-progress__track {
  flex-direction:row-reverse;
}

/* ── UiStackLayout: нови модификатори (hook-ови; inline style од компонентата е авторитет) ──
   Базното .ui-stack-layout правило веќе постои (~ред 3530). Овие се само семантички
   класа-hook-ови за прилагодено таргетирање; flex-wrap/flex-direction се емитираат инлајн
   од компонентата па правилата се дефанзивни и не ги газат тестовите. */
.ui-stack-layout--wrap { flex-wrap: wrap; }
.ui-stack-layout--reverse { /* визуелно превртување; flex-direction го носи компонентата инлајн */ }

/* ── UiFloatingLabel (§114) — материјал-стил пливачка етикета. Нема хардкод бои; само --ui-* токени. ── */
.ui-floatinglabel {
  position: relative;
  display: inline-flex;
  flex-direction: column;
  font-family: var(--ui-font-body, var(--ui-font));
  color: var(--ui-color-text);
}

/* Полето (обвивка околу внатрешниот едитор) — го држи местото за пливачката етикета над него. */
.ui-floatinglabel__field {
  display: block;
}

/* Етикетата е позиционирана преку полето; во основна состојба седи врз placeholder-от. */
.ui-floatinglabel__label {
  position: absolute;
  left: var(--ui-spacing-2, 8px);
  top: 50%;
  transform: translateY(-50%);
  transform-origin: left center;
  max-width: calc(100% - (2 * var(--ui-spacing-2, 8px)));
  padding: 0 var(--ui-spacing-1, 4px);
  margin: 0;
  background: var(--ui-color-surface, transparent);
  color: var(--ui-color-text-muted, var(--ui-color-muted));
  font-size: 1rem;
  line-height: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  pointer-events: none; /* по default не го прима кликот; се вклучува кога е интерактивна (има for/onclick) */
  transition: transform var(--ui-anim-duration, .2s) ease,
              color var(--ui-anim-duration, .2s) ease,
              font-size var(--ui-anim-duration, .2s) ease,
              top var(--ui-anim-duration, .2s) ease;
}

/* Кога етикетата има for (поврзан едитор) дозволи клик/фокус-пренос. */
.ui-floatinglabel__label[for] {
  pointer-events: auto;
  cursor: text;
}

/* Подигната (floated) позиција — заедничка за сите начини на активирање. */
.ui-floatinglabel--floated .ui-floatinglabel__label,
.ui-floatinglabel--always .ui-floatinglabel__label,
.ui-floatinglabel--focused .ui-floatinglabel__label,
.ui-floatinglabel:focus-within .ui-floatinglabel__label,
.ui-floatinglabel .ui-floatinglabel__field > :not(:placeholder-shown) ~ .ui-floatinglabel__label {
  top: 0;
  transform: translateY(-50%) scale(.8);
  color: var(--ui-color-primary);
}

/* Auto: кога внатрешниот input го прикажува placeholder-от (празно, нефокусирано) → НЕ плови. */
.ui-floatinglabel .ui-floatinglabel__field > :placeholder-shown ~ .ui-floatinglabel__label {
  top: 50%;
  transform: translateY(-50%) scale(1);
  color: var(--ui-color-text-muted, var(--ui-color-muted));
}
/* …освен ако режимот/состојбата изрично го изнудуваат пливањето (победува над placeholder-shown). */
.ui-floatinglabel--always .ui-floatinglabel__field > :placeholder-shown ~ .ui-floatinglabel__label,
.ui-floatinglabel--floated .ui-floatinglabel__field > :placeholder-shown ~ .ui-floatinglabel__label,
.ui-floatinglabel--focused .ui-floatinglabel__field > :placeholder-shown ~ .ui-floatinglabel__label,
.ui-floatinglabel:focus-within .ui-floatinglabel__field > :placeholder-shown ~ .ui-floatinglabel__label {
  top: 0;
  transform: translateY(-50%) scale(.8);
  color: var(--ui-color-primary);
}

/* Never: етикетата никогаш не плови — секогаш во основна позиција. */
.ui-floatinglabel--never .ui-floatinglabel__label,
.ui-floatinglabel--never .ui-floatinglabel__field > :not(:placeholder-shown) ~ .ui-floatinglabel__label {
  top: 50%;
  transform: translateY(-50%) scale(1);
  color: var(--ui-color-text-muted, var(--ui-color-muted));
}

/* Empty (изричен Floated=false) — третирано како неподигнато. */
.ui-floatinglabel--empty .ui-floatinglabel__label {
  top: 50%;
  transform: translateY(-50%) scale(1);
  color: var(--ui-color-text-muted, var(--ui-color-muted));
}

/* Индикатор за задолжителност. */
.ui-floatinglabel__required {
  margin-left: 2px;
  color: var(--ui-color-danger);
}

/* Required — нагласи ja етикетата кога плови. */
.ui-floatinglabel--required.ui-floatinglabel--floated .ui-floatinglabel__label,
.ui-floatinglabel--required:focus-within .ui-floatinglabel__label {
  font-weight: 600;
}

/* Invalid — обои ja етикетата и индикаторот. */
.ui-floatinglabel--invalid .ui-floatinglabel__label,
.ui-floatinglabel--invalid.ui-floatinglabel--floated .ui-floatinglabel__label,
.ui-floatinglabel--invalid:focus-within .ui-floatinglabel__label {
  color: var(--ui-color-danger);
}

/* Disabled — пригушен изглед, без клик-фокус. */
.ui-floatinglabel--disabled {
  opacity: .6;
  cursor: not-allowed;
}
.ui-floatinglabel--disabled .ui-floatinglabel__label,
.ui-floatinglabel--disabled .ui-floatinglabel__label[for] {
  color: var(--ui-color-disabled);
  pointer-events: none;
  cursor: not-allowed;
}

/* ReadOnly — благо пригушено, без text-курсор на етикетата. */
.ui-floatinglabel--readonly .ui-floatinglabel__label[for] {
  cursor: default;
}

/* RTL: огледани отстапи/потекло на трансформацијата. */
[dir="rtl"] .ui-floatinglabel__label {
  left: auto;
  right: var(--ui-spacing-2, 8px);
  transform-origin: right center;
}

/* UiAnimationContainer (§109) — базни транзиции + per-type. Темата ги поседува --ui-* токените.
   Сите анимации го почитуваат prefers-reduced-motion (WCAG 2.3.3 / 2.2.2). */
.ui-animation {
    --ui-animation-duration: 300ms;
    display: block;
    transition-duration: var(--ui-animation-duration);
    transition-timing-function: var(--ui-easing-standard, ease);
    transition-property: opacity, transform, height, width;
}

/* Скриена состојба (default нема насочена анимација — се прегазува од --anim-* модификаторите) */
.ui-animation--hidden {
    opacity: 0;
    pointer-events: none;
}

/* Fade */
.ui-animation--anim-fade { transition-property: opacity; }
.ui-animation--anim-fade.ui-animation--hidden { opacity: 0; }

/* Slide (влез од дадена насока; скриено = поместено + проѕирно) */
.ui-animation--anim-slide-down.ui-animation--hidden { opacity: 0; transform: translateY(-100%); }
.ui-animation--anim-slide-up.ui-animation--hidden   { opacity: 0; transform: translateY(100%); }
.ui-animation--anim-slide-left.ui-animation--hidden { opacity: 0; transform: translateX(100%); }
.ui-animation--anim-slide-right.ui-animation--hidden{ opacity: 0; transform: translateX(-100%); }
.ui-animation--anim-slide-up-staggered.ui-animation--hidden { opacity: 0; transform: translateY(100%) scale(0.98); }

/* Push (целосно поместување без проѕирност) */
.ui-animation--anim-push-up.ui-animation--hidden    { transform: translateY(100%); }
.ui-animation--anim-push-down.ui-animation--hidden  { transform: translateY(-100%); }
.ui-animation--anim-push-left.ui-animation--hidden  { transform: translateX(100%); }
.ui-animation--anim-push-right.ui-animation--hidden { transform: translateX(-100%); }

/* Expand (по димензија) */
.ui-animation--anim-expand-vertical   { overflow: hidden; transition-property: height, opacity; }
.ui-animation--anim-expand-vertical.ui-animation--hidden   { height: 0; opacity: 0; }
.ui-animation--anim-expand-horizontal { overflow: hidden; transition-property: width, opacity; }
.ui-animation--anim-expand-horizontal.ui-animation--hidden { width: 0; opacity: 0; }

/* Zoom */
.ui-animation--anim-zoom-in.ui-animation--hidden  { opacity: 0; transform: scale(0.85); }
.ui-animation--anim-zoom-out.ui-animation--hidden { opacity: 0; transform: scale(1.15); }

/* Reveal (откривање по висина) */
.ui-animation--anim-reveal { overflow: hidden; transition-property: height, opacity; }
.ui-animation--anim-reveal.ui-animation--hidden { height: 0; opacity: 0; }

@media (prefers-reduced-motion: reduce) {
    .ui-animation { transition-duration: 0ms !important; }
    .ui-animation--hidden { transform: none !important; }
}

/* §074 UiValidationMessage — дефинирање на error токени (досега НЕ постојат во темата;
   само се референцираат како var(--ui-color-error, ...)) + отстранување на хардкодираната боја.
   Спој во ui-blazor.css. */

/* 1) Error design tokens — светла тема (во .ui-theme-default блокот) */
.ui-theme-default {
  --ui-color-error: #d23b3b;
  --ui-color-error-emphasis: #b02a2a;
  --ui-color-danger: var(--ui-color-error); /* алијас за постоечките var(--ui-color-error, var(--ui-color-danger)) ланци */
}

/* 2) Error design tokens — темна тема (контраст ≥ WCAG AA врз --ui-color-base-bg #2a2f36) */
.ui-theme-dark {
  --ui-color-error: #ff6b6b;
  --ui-color-error-emphasis: #ff8787;
  --ui-color-danger: var(--ui-color-error);
}

/* 3) ЗАМЕНИ ja постоечката линија:
      .ui-validation-message { color:#d23b3b; font-size:13px; }
   со токенизирана верзија: */
.ui-validation-message {
  color: var(--ui-color-error, #d23b3b);
  font-size: 13px;
}

/* 4) Повеќе пораки за едно поле (генеричка UiValidationMessage<TValue>) — секоја во свој ред */
.ui-validation-message__text { display: block; }

/* 5) RTL: распоредот на (опционална) икона+текст во Template се огледува природно;
   гарантирај правилно порамнување кога пораката е во RTL контекст */
[dir="rtl"] .ui-validation-message { text-align: right; }

/* ===== Бран-5 (средни контроли): Dialog/Popup/Tooltip/ListBox/DropDownTree/ChipList/ValidationSummary/ValidationTooltip/Filter/LoaderContainer/QRCode/SmartPasteButton/SpeechToTextButton ===== */
/* === UiDialog (§035) — дополнувања за нови состојби/параметри (централен merge) ===
   Овие правила доаѓаат ПОСЛЕ постоечките л.316-321 за да победат во каскадата. */

/* 1) Дијалогот да биде тема-свесен (порано хардкодиран background:#fff → бел и во dark тема)
   + отстрани хардкодиран min/max-width за да не се судираат со новите MinWidth/MaxWidth
   параметри; задржи разумни fallback-и преку design токени. */
.ui-dialog {
  background: var(--ui-color-base-bg);
  color: var(--ui-color-text);
  border: 1px solid var(--ui-color-border);
  border-radius: var(--ui-radius);
  /* fallback димензии само ако компонентата НЕ постави инлајн min/max-width */
  min-width: 320px;
  max-width: 90vw;
  box-shadow: 0 10px 40px rgba(0,0,0,.3);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* 2) Распоред на копчињата во подножјето — генерички .ui-actions--* модификатори.
   Footer-от секогаш има класи „ui-dialog__footer ui-actions ui-actions--<mode>"; овие
   селектори (специфичност 0-2-0) ja победуваат базната .ui-dialog__footer (justify-content:flex-end). */
.ui-dialog__footer.ui-actions--start    { justify-content: flex-start; }
.ui-dialog__footer.ui-actions--end      { justify-content: flex-end; }
.ui-dialog__footer.ui-actions--center   { justify-content: center; }
.ui-dialog__footer.ui-actions--spread   { justify-content: space-between; }
.ui-dialog__footer.ui-actions--stretched { justify-content: stretch; }
.ui-dialog__footer.ui-actions--stretched > * { flex: 1 1 0; }

/* 3) Немодален дијалог: прекривката е „проѕирна" за глувчето (интеракцијата минува под неа),
   но самиот дијалог останува интерактивен. */
.ui-dialog-overlay--nonmodal { pointer-events: none; }
.ui-dialog-overlay--nonmodal > .ui-dialog { pointer-events: auto; }

/* 4) alertdialog варијанта (Role="alertdialog") — посилен акцент на работ (по избор). */
.ui-dialog--alert { border-color: var(--ui-color-danger, var(--ui-color-border)); }

/* ── UiPopup — Telerik-парност: offset, анимации, collision/RTL хукови, focus, reduced-motion ──
   Augment-ира го постоечкиот .ui-popup блок (ред. 748–754); НЕ редефинира .ui-popup/.ui-popup__content/
   постоечките 4 align модификатори (тие веќе постојат). Само додава ново. */

/* Offset применет на 4-те постоечки align позиции (px од --ui-popup-offset-*, 0 fallback) */
.ui-popup__content.ui-popup--bottom-left,
.ui-popup__content.ui-popup--bottom-right  { margin-top: var(--ui-popup-offset-y, 0); }
.ui-popup__content.ui-popup--top-left,
.ui-popup__content.ui-popup--top-right     { margin-bottom: var(--ui-popup-offset-y, 0); }
.ui-popup__content.ui-popup--bottom-left,
.ui-popup__content.ui-popup--top-left      { margin-left: var(--ui-popup-offset-x, 0); }
.ui-popup__content.ui-popup--bottom-right,
.ui-popup__content.ui-popup--top-right     { margin-right: var(--ui-popup-offset-x, 0); }

/* Фокус видливост на содржинскиот панел (примил програмски фокус при отворање) */
.ui-popup__content:focus { outline:none; }
.ui-popup__content:focus-visible { outline:var(--ui-focus-ring); outline-offset:2px; }

/* Анимации — времетраењето од --ui-popup-anim-duration (default 300ms); --anim-none ja гаси */
.ui-popup__content { animation-duration:var(--ui-popup-anim-duration, 300ms); animation-timing-function:ease-out; animation-fill-mode:both; }
.ui-popup--anim-none        { animation:none !important; }
.ui-popup--anim-fade        { animation-name:ui-popup-fade; }
.ui-popup--anim-slide-down  { animation-name:ui-popup-slide-down; }
.ui-popup--anim-slide-up    { animation-name:ui-popup-slide-up; }
.ui-popup--anim-slide-left  { animation-name:ui-popup-slide-left; }
.ui-popup--anim-slide-right { animation-name:ui-popup-slide-right; }
.ui-popup--anim-push-up     { animation-name:ui-popup-slide-up; }
.ui-popup--anim-push-down   { animation-name:ui-popup-slide-down; }
.ui-popup--anim-push-left   { animation-name:ui-popup-slide-left; }
.ui-popup--anim-push-right  { animation-name:ui-popup-slide-right; }
.ui-popup--anim-expand-v    { animation-name:ui-popup-expand-v; }
.ui-popup--anim-expand-h    { animation-name:ui-popup-expand-h; }
.ui-popup--anim-zoom-in     { animation-name:ui-popup-zoom-in; }
.ui-popup--anim-zoom-out    { animation-name:ui-popup-zoom-out; }
.ui-popup--anim-reveal      { animation-name:ui-popup-expand-v; }
@keyframes ui-popup-fade        { from { opacity:0; } to { opacity:1; } }
@keyframes ui-popup-slide-down  { from { opacity:0; transform:translateY(-6px); } to { opacity:1; transform:translateY(0); } }
@keyframes ui-popup-slide-up    { from { opacity:0; transform:translateY(6px); }  to { opacity:1; transform:translateY(0); } }
@keyframes ui-popup-slide-left  { from { opacity:0; transform:translateX(6px); }  to { opacity:1; transform:translateX(0); } }
@keyframes ui-popup-slide-right { from { opacity:0; transform:translateX(-6px); } to { opacity:1; transform:translateX(0); } }
@keyframes ui-popup-zoom-in     { from { opacity:0; transform:scale(.92); } to { opacity:1; transform:scale(1); } }
@keyframes ui-popup-zoom-out    { from { opacity:0; transform:scale(1.06); } to { opacity:1; transform:scale(1); } }
@keyframes ui-popup-expand-v    { from { opacity:0; transform:scaleY(.85); transform-origin:top; } to { opacity:1; transform:scaleY(1); } }
@keyframes ui-popup-expand-h    { from { opacity:0; transform:scaleX(.85); transform-origin:left; } to { opacity:1; transform:scaleX(1); } }
@media (prefers-reduced-motion: reduce) { .ui-popup__content { animation:none !important; } }

/* RTL: огледално превртување на лево/десно порамнувањето + offset оската (спец §092 RTL) */
[dir="rtl"] .ui-popup--bottom-left  { left:auto; right:0; }
[dir="rtl"] .ui-popup--bottom-right { right:auto; left:0; }
[dir="rtl"] .ui-popup--top-left     { left:auto; right:0; }
[dir="rtl"] .ui-popup--top-right    { right:auto; left:0; }
[dir="rtl"] .ui-popup__content.ui-popup--bottom-left,
[dir="rtl"] .ui-popup__content.ui-popup--top-left  { margin-left:0; margin-right:var(--ui-popup-offset-x, 0); }
[dir="rtl"] .ui-popup__content.ui-popup--bottom-right,
[dir="rtl"] .ui-popup__content.ui-popup--top-right { margin-right:0; margin-left:var(--ui-popup-offset-x, 0); }

/* Collision модификаторите (ui-popup--h-fit/flip, ui-popup--v-fit/flip) се чисти hook-ови за
   JS позиционен слој (positioning.attach) — реалниот flip/fit го пресметува JS; нема CSS-only ефект. */

/* === UiTooltip §090 — позициски модификатори, callout, click-режим, max-width, dismiss (за централен merge во ui-blazor.css) === */
/* НАПОМЕНА: постоечкото правило .ui-tooltip (л.293) хардкодира бои (#1b1f24/#fff) и nowrap и само top-позиција.
   Долунаведеното ги додава НЕДОСТАСУВАЧКИТЕ позиции/callout/состојби со токени. Препорака (одделно): базното .ui-tooltip
   да мигрира на var(--ui-color-text)/var(--ui-color-base-bg). Тука не го менувам базното за да не скршам нешто. */

/* Позиционирање по страна (default top веќе постои во базното правило). */
.ui-tooltip--top    { bottom:100%; top:auto; left:50%; right:auto; transform:translateX(-50%) translateY(-6px); }
.ui-tooltip--bottom { top:100%; bottom:auto; left:50%; right:auto; transform:translateX(-50%) translateY(6px); }
.ui-tooltip--left   { right:100%; left:auto; top:50%; bottom:auto; transform:translateY(-50%) translateX(-6px); }
.ui-tooltip--right  { left:100%; right:auto; top:50%; bottom:auto; transform:translateY(-50%) translateX(6px); }

/* Callout стрелка — мала ромб/триаголник што покажува кон активаторот; бојата ja наследува од балончето преку currentColor-фолбек на токен. */
.ui-tooltip__callout { position:absolute; width:8px; height:8px; background:inherit; transform:rotate(45deg); pointer-events:none; }
.ui-tooltip--top    .ui-tooltip__callout { bottom:-4px; left:50%; margin-left:-4px; }
.ui-tooltip--bottom .ui-tooltip__callout { top:-4px;    left:50%; margin-left:-4px; }
.ui-tooltip--left   .ui-tooltip__callout { right:-4px;  top:50%;  margin-top:-4px; }
.ui-tooltip--right  .ui-tooltip__callout { left:-4px;   top:50%;  margin-top:-4px; }

/* Click режим: видливоста ja носи host--open (controlled преку @bind-Open), НЕ :hover. */
.ui-tooltip-host--click .ui-tooltip { opacity:0; }
.ui-tooltip-host--click:hover .ui-tooltip,
.ui-tooltip-host--click:focus-within .ui-tooltip { opacity:0; } /* во click режим hover/focus не го прикажуваат */
.ui-tooltip-host--click.ui-tooltip-host--open .ui-tooltip { opacity:1; pointer-events:auto; }

/* WCAG 1.4.13 „dismissible": Esc откажан hover/focus совет → форсирано скриен додека корисникот не напушти/повторно влезе. */
.ui-tooltip-host--hover-dismissed:hover .ui-tooltip,
.ui-tooltip-host--hover-dismissed:focus-within .ui-tooltip,
.ui-tooltip-host--hover-dismissed:focus-visible .ui-tooltip { opacity:0 !important; pointer-events:none; }

/* MaxWidth: кога авторот зададе --ui-tooltip-max-width, дозволи пренос на текст и капирај ширина. */
.ui-tooltip-host { --ui-tooltip-max-width: none; }
.ui-tooltip[class] { max-width: var(--ui-tooltip-max-width, none); }
.ui-tooltip--wrap, .ui-tooltip-host[style*="--ui-tooltip-max-width"] .ui-tooltip { white-space: normal; }

/* RTL: огледни ги left/right позициите кога коренот е dir=rtl (преку UiRoot). */
[dir="rtl"] .ui-tooltip--left  { right:auto; left:100%;  transform:translateY(-50%) translateX(6px); }
[dir="rtl"] .ui-tooltip--right { left:auto;  right:100%; transform:translateY(-50%) translateX(-6px); }
[dir="rtl"] .ui-tooltip--left  .ui-tooltip__callout { right:auto; left:-4px; }
[dir="rtl"] .ui-tooltip--right .ui-tooltip__callout { left:auto;  right:-4px; }

/* ── UiListBox: дополнителни состојби (focus / readonly / invalid / disabled-опција / no-data) ──
   Сите селектори се НОВИ (постоечкиот блок е .ui-listbox{} 607–611); само додавање, без редефиниции. */

/* Видлив фокус-прстен на фокусираниот контејнер (роботна тастатура). */
.ui-listbox:focus-visible { outline: var(--ui-focus-ring, 2px solid var(--ui-color-primary)); outline-offset: 1px; }
.ui-listbox:focus:not(:focus-visible) { outline: none; }

/* Read-only: визуелно поприглушено, без pointer-афорданс (но НЕ блокирано како disabled). */
.ui-listbox--readonly .ui-listbox__option { cursor: default; }
.ui-listbox--readonly .ui-listbox__option:hover { background: transparent; }

/* Невалидна состојба (од EditContext): обоен раб. */
.ui-listbox--invalid { border-color: var(--ui-color-danger); }

/* Поединечно оневозможена опција: приглушена, без hover/клик. */
.ui-listbox__option--disabled { opacity: .5; cursor: default; pointer-events: none; }
.ui-listbox__option--disabled:hover { background: transparent; }
/* Избрана + оневозможена: задржи го контрастот на избор, само приглушено. */
.ui-listbox__option--selected.ui-listbox__option--disabled { color: #fff; }

/* Празна состојба (no-data). */
.ui-listbox__no-data { padding: var(--ui-spacing-4, 16px) 10px; text-align: center; color: var(--ui-color-text-muted); cursor: default; }

/* ─────────────── UiDropDownTree (терк: Telerik DropDownTree) ─────────────── */
.ui-dropdowntree { position:relative; display:inline-block; min-width:12rem; font:14px var(--ui-font); }

/* Тригер (combobox копче) */
.ui-dropdowntree__trigger { display:inline-flex; align-items:center; justify-content:space-between; gap:var(--ui-gap); width:100%; box-sizing:border-box; text-align:left; padding:6px 10px; border:1px solid var(--ui-color-border); border-radius:var(--ui-radius); background:var(--ui-color-base-bg); color:var(--ui-color-text); cursor:pointer; }
.ui-dropdowntree__trigger:hover { background:var(--ui-color-base-bg-hover); }
.ui-dropdowntree__trigger:active { background:var(--ui-color-base-bg-hover); }
.ui-dropdowntree__trigger:focus-visible { outline:var(--ui-focus-ring, 2px solid var(--ui-color-primary)); outline-offset:1px; border-color:var(--ui-color-primary); }
.ui-dropdowntree__trigger:focus:not(:focus-visible) { outline:none; }
.ui-dropdowntree--open .ui-dropdowntree__trigger { border-color:var(--ui-color-primary); }
.ui-dropdowntree--disabled .ui-dropdowntree__trigger, .ui-dropdowntree__trigger[disabled] { opacity:.55; cursor:not-allowed; pointer-events:none; }
.ui-dropdowntree--readonly .ui-dropdowntree__trigger, .ui-dropdowntree__trigger[aria-readonly="true"] { background:var(--ui-color-surface-2); cursor:default; }
.ui-dropdowntree--invalid .ui-dropdowntree__trigger, .ui-dropdowntree__trigger[aria-invalid="true"] { border-color:var(--ui-color-danger, #d32f2f); }
.ui-dropdowntree--invalid .ui-dropdowntree__trigger:focus-visible, .ui-dropdowntree__trigger[aria-invalid="true"]:focus-visible { outline-color:var(--ui-color-danger, #d32f2f); border-color:var(--ui-color-danger, #d32f2f); }

/* Вредност / placeholder / стрелка */
.ui-dropdowntree__value { flex:1 1 auto; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ui-dropdowntree__value--placeholder { color:var(--ui-color-disabled); }
.ui-dropdowntree__arrow { flex:0 0 auto; width:0; height:0; border-left:4px solid transparent; border-right:4px solid transparent; border-top:5px solid currentColor; display:inline-block; transition:transform .15s ease; }
.ui-dropdowntree--open .ui-dropdowntree__arrow { transform:rotate(180deg); }

/* Copче за бришење */
.ui-dropdowntree__clear { position:absolute; top:0; right:1.5rem; height:100%; width:1.5rem; display:inline-flex; align-items:center; justify-content:center; padding:0; border:0; background:transparent; color:var(--ui-color-text); cursor:pointer; line-height:1; }
.ui-dropdowntree__clear:hover { color:var(--ui-color-danger, #d32f2f); }
.ui-dropdowntree__clear:focus-visible { outline:var(--ui-focus-ring, 2px solid var(--ui-color-primary)); outline-offset:-2px; }

/* Popup */
.ui-dropdowntree__popup { position:absolute; z-index:var(--ui-z-dropdown); top:calc(100% + 2px); left:0; right:0; max-height:18rem; overflow-y:auto; display:flex; flex-direction:column; gap:var(--ui-gap); padding:var(--ui-gap); border:1px solid var(--ui-color-border); border-radius:var(--ui-radius); background:var(--ui-color-base-bg); box-shadow:0 6px 20px rgba(0,0,0,.15); }
.ui-dropdowntree__filter { width:100%; box-sizing:border-box; }
.ui-dropdowntree__header, .ui-dropdowntree__footer { padding:.25rem .25rem; color:var(--ui-color-text); }
.ui-dropdowntree__nodata { padding:.5rem; color:var(--ui-color-disabled); text-align:center; }
.ui-dropdowntree__loading { display:flex; align-items:center; justify-content:center; padding:1rem; }

/* Дрво */
.ui-dropdowntree__tree, .ui-dropdowntree__children { list-style:none; margin:0; padding:0; }
.ui-dropdowntree__children { padding-left:1.25rem; }
.ui-dropdowntree__row { display:flex; align-items:center; gap:var(--ui-gap); padding:.2rem .35rem; border-radius:var(--ui-radius); cursor:default; }
.ui-dropdowntree__row:hover { background:var(--ui-color-base-bg-hover); }
.ui-dropdowntree__row--active { background:var(--ui-color-base-bg-hover); outline:var(--ui-focus-ring, 2px solid var(--ui-color-primary)); outline-offset:-2px; }
.ui-dropdowntree__toggle { flex:0 0 auto; width:1rem; text-align:center; cursor:pointer; user-select:none; color:var(--ui-color-text); }
.ui-dropdowntree__toggle--leaf { cursor:default; }
.ui-dropdowntree__checkbox { flex:0 0 auto; margin:0; }
.ui-dropdowntree__icon { flex:0 0 auto; }
.ui-dropdowntree__label { flex:1 1 auto; cursor:pointer; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; padding:.05rem .2rem; border-radius:var(--ui-radius); }
.ui-dropdowntree__label:hover { background:var(--ui-color-base-bg-hover); }
.ui-dropdowntree__label--selected { background:var(--ui-color-primary); color:#fff; }
.ui-dropdowntree__item--disabled > .ui-dropdowntree__row { opacity:.55; cursor:not-allowed; }
.ui-dropdowntree__item--disabled .ui-dropdowntree__label { cursor:not-allowed; }

/* Appearance варијанти */
.ui-dropdowntree--small .ui-dropdowntree__trigger { padding:3px 7px; font-size:12px; }
.ui-dropdowntree--large .ui-dropdowntree__trigger { padding:9px 13px; font-size:16px; }
.ui-dropdowntree--rounded-none .ui-dropdowntree__trigger { border-radius:0; }
.ui-dropdowntree--rounded-small .ui-dropdowntree__trigger { border-radius:calc(var(--ui-radius) / 2); }
.ui-dropdowntree--rounded-large .ui-dropdowntree__trigger { border-radius:calc(var(--ui-radius) * 2); }
.ui-dropdowntree--rounded-full .ui-dropdowntree__trigger { border-radius:999px; }
.ui-dropdowntree--flat .ui-dropdowntree__trigger { border-color:transparent; background:var(--ui-color-base-bg-hover); }
.ui-dropdowntree--outline .ui-dropdowntree__trigger { background:transparent; }

/* ── UiChipList: gap модификатори (компонентата емитува ui-chip-list--gap-{token}) ── */
.ui-chip-list--gap-none { gap: 0; }
.ui-chip-list--gap-xs   { gap: 2px; }
.ui-chip-list--gap-sm   { gap: 4px; }
.ui-chip-list--gap-md   { gap: 8px; }
.ui-chip-list--gap-lg   { gap: 12px; }

/* ── Чип: интеракција на телото (data-bound чиповите се клик/фокус цели) ── */
.ui-chip--selectable { cursor: pointer; }
.ui-chip--selectable:hover { background: var(--ui-color-base-bg-hover, var(--ui-color-hover-bg)); }
.ui-chip:focus { outline: none; }
.ui-chip:focus-visible {
  outline: var(--ui-focus-ring, 2px solid var(--ui-color-primary));
  outline-offset: 1px;
}
.ui-chip--selectable:active { filter: brightness(0.96); }

/* ── Чип: размер (компонентата секогаш емитува ui-chip--size-{sm|md|lg}) ── */
.ui-chip--size-sm { height: 24px; font-size: 12px; padding: 0 4px 0 8px; gap: 4px; }
.ui-chip--size-md { height: 28px; font-size: 13px; padding: 0 4px 0 10px; gap: 6px; }
.ui-chip--size-lg { height: 34px; font-size: 14px; padding: 0 6px 0 12px; gap: 8px; }

/* ── Чип: заобленост (ui-chip--rounded-{sm|md|lg|full|none}) ── */
.ui-chip--rounded-none { border-radius: 0; }
.ui-chip--rounded-sm   { border-radius: var(--ui-radius-sm, 3px); }
.ui-chip--rounded-md   { border-radius: var(--ui-radius-md, var(--ui-radius, 6px)); }
.ui-chip--rounded-lg   { border-radius: calc(var(--ui-radius-md, 6px) * 2); }
.ui-chip--rounded-full { border-radius: 999px; }

/* ── Чип: тема-бои (solid). Семантичките токени се примарни со разумен fallback. ──
   Секоја варијанта поставува локални chip custom props што ги делат solid/outline/hover/selected. */
.ui-chip--base {
  --ui-chip-bg: var(--ui-color-base-bg, #f3f4f6);
  --ui-chip-fg: var(--ui-color-text, #1b1f24);
  --ui-chip-bd: var(--ui-color-border, #d0d7de);
}
.ui-chip--info {
  --ui-chip-bg: var(--ui-color-info, #2f6feb);
  --ui-chip-fg: var(--ui-color-text-on-info, #ffffff);
  --ui-chip-bd: var(--ui-color-info, #2f6feb);
}
.ui-chip--success {
  --ui-chip-bg: var(--ui-color-success, #2e7d32);
  --ui-chip-fg: var(--ui-color-text-on-success, #ffffff);
  --ui-chip-bd: var(--ui-color-success, #2e7d32);
}
.ui-chip--warning {
  --ui-chip-bg: var(--ui-color-warning, #ed8a19);
  --ui-chip-fg: var(--ui-color-text-on-warning, #1b1f24);
  --ui-chip-bd: var(--ui-color-warning, #ed8a19);
}
.ui-chip--error {
  --ui-chip-bg: var(--ui-color-danger, #d23b3b);
  --ui-chip-fg: var(--ui-color-text-on-danger, #ffffff);
  --ui-chip-bd: var(--ui-color-danger, #d23b3b);
}

/* Solid: пополнета позадина од варијантата. Base останува на неутралната палета. */
.ui-chip--solid {
  background: var(--ui-chip-bg);
  color: var(--ui-chip-fg);
  border-color: var(--ui-chip-bd);
}
/* Base+solid го задржува текстот на --ui-color-text (читливост на светла неутрална позадина). */
.ui-chip--base.ui-chip--solid { color: var(--ui-color-text, #1b1f24); }

/* Outline: проѕирна позадина, обоен раб и текст. */
.ui-chip--outline {
  background: transparent;
  color: var(--ui-chip-bd);
  border-color: var(--ui-chip-bd);
}
.ui-chip--base.ui-chip--outline { color: var(--ui-color-text, #1b1f24); }

/* Hover за обоените селектабилни чипови (поспецифично од генеричкиот hover погоре). */
.ui-chip--selectable.ui-chip--solid:hover { filter: brightness(0.95); background: var(--ui-chip-bg); }
.ui-chip--selectable.ui-chip--outline:hover { background: color-mix(in srgb, var(--ui-chip-bd) 12%, transparent); }

/* ── Селектиран чип: задржува предност, се комбинира со варијанта ──
   (постоечкото .ui-chip--selected во базата покрива primary изглед; тука само осигуруваме
   дека selected над outline добива пополнет изглед од сопствената боја.) */
.ui-chip--outline.ui-chip--selected {
  background: var(--ui-chip-bd);
  color: var(--ui-chip-fg);
  border-color: transparent;
}

/* ── Disabled (постои базично; тука осигуруваме pointer/контраст за сите варијанти) ── */
.ui-chip--disabled { opacity: .55; cursor: not-allowed; pointer-events: none; }

/* ── §073 UiValidationSummary — токенизација + под-елементи + dark + focus + RTL ──
   ЗАМЕНИ ги постоечките две линии во ui-blazor.css (околу ред 312–313):
     .ui-validation-summary { border:1px solid #d23b3b; border-radius:var(--ui-radius); padding:8px 12px; color:#d23b3b; background:#fdf0f0; }
     .ui-validation-summary ul { margin:0; padding-left:18px; }
   со долната токенизирана верзија (--ui-color-error / --ui-color-error-emphasis веќе постојат
   во .ui-theme-default и .ui-theme-dark од §074; светло/темно се покрива автоматски). */

.ui-validation-summary {
  border: 1px solid var(--ui-color-error, #d23b3b);
  border-radius: var(--ui-radius);
  padding: 8px 12px;
  color: var(--ui-color-error, #d23b3b);
  /* мека позадина изведена од error токенот; color-mix паѓа назад на литерал ако не е поддржан */
  background: color-mix(in srgb, var(--ui-color-error, #d23b3b) 8%, transparent);
}

/* Стандардно заглавие (HeaderText / HeaderTemplate) */
.ui-validation-summary__header {
  font-weight: 600;
  margin-bottom: 4px;
  color: var(--ui-color-error-emphasis, var(--ui-color-error, #b02a2a));
}

/* Списокот — логички padding за RTL (наместо padding-left) */
.ui-validation-summary__list {
  margin: 0;
  padding-inline-start: 18px;
}

.ui-validation-summary__item { line-height: 1.5; }

/* Линкови во резимето (на пр. до проблематичните полиња во Template) */
.ui-validation-summary a {
  color: var(--ui-color-error-emphasis, var(--ui-color-error, #b02a2a));
  text-decoration: underline;
}
.ui-validation-summary a:hover { text-decoration: none; }

/* Фокус-прстен кога резимето добива програмски фокус (FocusAsync по неуспешно поднесување) */
.ui-validation-summary:focus { outline: none; }
.ui-validation-summary:focus-visible {
  outline: 2px solid var(--ui-color-error, #d23b3b);
  outline-offset: 2px;
}

/* Намалено движење — без изненадувања (нема анимации тука, но за конзистентност) */
@media (prefers-reduced-motion: reduce) {
  .ui-validation-summary { transition: none; }
}

/* ======================================================================
   UiValidationTooltip §075 — лебдечко валидациско балонче (CSS-only позиц.)
   Ги ЗАМЕНУВА старите 2 линии (.ui-validation-tooltip-host / .ui-validation-tooltip).
   Сите бои преку токени; без хардкод. RTL/reduced-motion/dark/high-contrast.
   ====================================================================== */

.ui-validation-tooltip-host {
  position: relative;
  display: inline-block;
  /* Default-и за CSS custom props (компонентата ги пребришува преку inline style). */
  --ui-vtt-offset: 6px;
  --ui-vtt-anim-duration: 200ms;
  --ui-vtt-show-delay: 0ms;
  --ui-vtt-hide-delay: 0ms;
  --ui-vtt-z: var(--ui-z-tooltip, 1070);
  --ui-vtt-bg: var(--ui-color-error, var(--ui-color-danger, #d23b3b));
  --ui-vtt-fg: var(--ui-color-text-on-primary, #fff);
}

/* Информативна (не-грешка) варијанта користи неутрална површина. */
.ui-validation-tooltip--info {
  --ui-vtt-bg: var(--ui-color-base-bg, #1b1f24);
  --ui-vtt-fg: var(--ui-color-text, #1b1f24);
}

/* ── Балонче ── */
.ui-validation-tooltip {
  position: absolute;
  z-index: var(--ui-vtt-z);
  display: inline-flex;
  align-items: center;
  gap: var(--ui-spacing-1, 4px);
  max-width: 320px;
  padding: 4px 8px;
  border-radius: var(--ui-radius, 6px);
  background: var(--ui-vtt-bg);
  color: var(--ui-vtt-fg);
  font: 12px var(--ui-font, system-ui, sans-serif);
  line-height: 1.35;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .18);
  pointer-events: none;        /* не го „краде" фокусот/глувчето од инпутот */
  white-space: normal;
  word-break: break-word;
}

.ui-validation-tooltip__icon {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1em;
  height: 1em;
  line-height: 1;
}
/* Видлив default-глиф независен од боја (WCAG: икона + текст), кога нема icon-font/template. */
.ui-validation-tooltip__icon:empty::before { content: "\26A0"; font-size: 1em; }
.ui-validation-tooltip--no-icon .ui-validation-tooltip__icon { display: none; }

.ui-validation-tooltip__content { flex: 1 1 auto; min-width: 0; }

/* ── Позиции ── */
.ui-validation-tooltip--top,
.ui-validation-tooltip--top-left,
.ui-validation-tooltip--top-right {
  bottom: 100%;
  margin-bottom: var(--ui-vtt-offset);
}
.ui-validation-tooltip--bottom,
.ui-validation-tooltip--bottom-left,
.ui-validation-tooltip--bottom-right {
  top: 100%;
  margin-top: var(--ui-vtt-offset);
}
.ui-validation-tooltip--top,
.ui-validation-tooltip--bottom { left: 50%; transform: translateX(-50%); }
.ui-validation-tooltip--top-left,
.ui-validation-tooltip--bottom-left { inset-inline-start: 0; }
.ui-validation-tooltip--top-right,
.ui-validation-tooltip--bottom-right { inset-inline-end: 0; }

.ui-validation-tooltip--left {
  inset-inline-end: 100%;
  top: 50%;
  transform: translateY(-50%);
  margin-inline-end: var(--ui-vtt-offset);
}
.ui-validation-tooltip--right {
  inset-inline-start: 100%;
  top: 50%;
  transform: translateY(-50%);
  margin-inline-start: var(--ui-vtt-offset);
}

/* ── Стрелка (callout) ── */
.ui-validation-tooltip__callout {
  position: absolute;
  width: 8px;
  height: 8px;
  background: var(--ui-vtt-bg);
  transform: rotate(45deg);
}
.ui-validation-tooltip--top .ui-validation-tooltip__callout,
.ui-validation-tooltip--top-left .ui-validation-tooltip__callout,
.ui-validation-tooltip--top-right .ui-validation-tooltip__callout {
  bottom: -3px; left: 50%; margin-left: -4px;
}
.ui-validation-tooltip--bottom .ui-validation-tooltip__callout,
.ui-validation-tooltip--bottom-left .ui-validation-tooltip__callout,
.ui-validation-tooltip--bottom-right .ui-validation-tooltip__callout {
  top: -3px; left: 50%; margin-left: -4px;
}
.ui-validation-tooltip--left .ui-validation-tooltip__callout {
  inset-inline-end: -3px; top: 50%; margin-top: -4px;
}
.ui-validation-tooltip--right .ui-validation-tooltip__callout {
  inset-inline-start: -3px; top: 50%; margin-top: -4px;
}
.ui-validation-tooltip--no-arrow .ui-validation-tooltip__callout { display: none; }

/* ── Тригери на видливост (Hover/Focus): балончето е во DOM-от, CSS ja носи видливоста ── */
.ui-validation-tooltip-host--hover .ui-validation-tooltip,
.ui-validation-tooltip-host--focus .ui-validation-tooltip {
  opacity: 0;
  transition: opacity var(--ui-vtt-anim-duration) ease;
  transition-delay: var(--ui-vtt-hide-delay);
}
.ui-validation-tooltip-host--hover:hover .ui-validation-tooltip,
.ui-validation-tooltip-host--focus:focus-within .ui-validation-tooltip,
.ui-validation-tooltip-host--hover:focus-within .ui-validation-tooltip {
  opacity: 1;
  transition-delay: var(--ui-vtt-show-delay);
}

/* Оневозможено: не се прикажува никако. */
.ui-validation-tooltip-host--disabled .ui-validation-tooltip { display: none !important; }

/* ── Анимации при појава (Auto/Manual режим — балончето влегува/излегува од DOM) ── */
@keyframes ui-vtt-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes ui-vtt-zoom-in { from { opacity: 0; transform: scale(.85); } to { opacity: 1; } }
@keyframes ui-vtt-zoom-out { from { opacity: 0; transform: scale(1.1); } to { opacity: 1; } }
@keyframes ui-vtt-slide-up { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; } }
@keyframes ui-vtt-slide-down { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; } }
@keyframes ui-vtt-slide-left { from { opacity: 0; transform: translateX(6px); } to { opacity: 1; } }
@keyframes ui-vtt-slide-right { from { opacity: 0; transform: translateX(-6px); } to { opacity: 1; } }
@keyframes ui-vtt-expand-v { from { opacity: 0; transform: scaleY(.7); } to { opacity: 1; } }
@keyframes ui-vtt-expand-h { from { opacity: 0; transform: scaleX(.7); } to { opacity: 1; } }

.ui-validation-tooltip-host:not(.ui-validation-tooltip-host--hover):not(.ui-validation-tooltip-host--focus) .ui-validation-tooltip--anim-fade { animation: ui-vtt-fade var(--ui-vtt-anim-duration) ease both; }
.ui-validation-tooltip--anim-zoom-in { animation: ui-vtt-zoom-in var(--ui-vtt-anim-duration) ease both; }
.ui-validation-tooltip--anim-zoom-out { animation: ui-vtt-zoom-out var(--ui-vtt-anim-duration) ease both; }
.ui-validation-tooltip--anim-slide-up { animation: ui-vtt-slide-up var(--ui-vtt-anim-duration) ease both; }
.ui-validation-tooltip--anim-slide-down { animation: ui-vtt-slide-down var(--ui-vtt-anim-duration) ease both; }
.ui-validation-tooltip--anim-slide-left { animation: ui-vtt-slide-left var(--ui-vtt-anim-duration) ease both; }
.ui-validation-tooltip--anim-slide-right { animation: ui-vtt-slide-right var(--ui-vtt-anim-duration) ease both; }
.ui-validation-tooltip--anim-expand-vertical { animation: ui-vtt-expand-v var(--ui-vtt-anim-duration) ease both; }
.ui-validation-tooltip--anim-expand-horizontal { animation: ui-vtt-expand-h var(--ui-vtt-anim-duration) ease both; }
.ui-validation-tooltip--anim-none { animation: none; }

/* Collision: Fit го држи балончето во границите (best-effort CSS). */
.ui-validation-tooltip--fit { max-width: min(320px, 90vw); }

/* ── Dark тема: само неутралната (info) површина се менува; грешката останува error токен ── */
.ui-theme-dark .ui-validation-tooltip--info {
  --ui-vtt-bg: var(--ui-color-base-bg, #2a2f36);
  --ui-vtt-fg: var(--ui-color-text, #e6e8eb);
}

/* ── Reduced motion (WCAG 2.3.3 / 2.2.2) ── */
@media (prefers-reduced-motion: reduce) {
  .ui-validation-tooltip,
  .ui-validation-tooltip[class*="ui-validation-tooltip--anim-"] {
    animation: none !important;
    transition: none !important;
  }
}

/* ── High contrast ── */
@media (forced-colors: active) {
  .ui-validation-tooltip { border: 1px solid CanvasText; }
  .ui-validation-tooltip__callout { border: 1px solid CanvasText; }
}

/* === UiFilter — дополнителни состојби и нови елементи (footer/logic/apply/clear) === */
/* Footer што ги групира копчињата */
.ui-filter__footer { display:flex; align-items:center; gap:var(--ui-gap); flex-wrap:wrap; }

/* Логички оператор (И/ИЛИ) */
.ui-filter__logic { align-self:flex-start; padding:.25rem .5rem; border:1px solid var(--ui-color-border); border-radius:var(--ui-radius); background:var(--ui-color-base-bg); color:var(--ui-color-text); font:inherit; }

/* Копче „Примени" (OnDemand) — нагласено како примарно */
.ui-filter__apply { padding:.25rem .75rem; border:1px solid var(--ui-color-primary); border-radius:var(--ui-radius); background:var(--ui-color-primary); color:#fff; font:inherit; cursor:pointer; }
.ui-filter__apply:hover:not(:disabled) { filter:brightness(.95); }

/* Копче „Исчисти сè" */
.ui-filter__clear { padding:.25rem .75rem; border:1px solid var(--ui-color-border); border-radius:var(--ui-radius); background:transparent; color:var(--ui-color-text); font:inherit; cursor:pointer; }
.ui-filter__clear:hover:not(:disabled) { background:var(--ui-color-base-bg-hover); }

/* :hover на контролите (порано само на копчињата) */
.ui-filter__field:hover:not(:disabled),
.ui-filter__operator:hover:not(:disabled),
.ui-filter__logic:hover:not(:disabled),
.ui-filter__value:hover:not(:disabled):not([readonly]) { border-color:var(--ui-color-primary); }

/* Видлив фокус-индикатор (WCAG 2.2) — за сите контроли и копчиња */
.ui-filter__field:focus-visible,
.ui-filter__operator:focus-visible,
.ui-filter__logic:focus-visible,
.ui-filter__value:focus-visible,
.ui-filter__remove:focus-visible,
.ui-filter__add:focus-visible,
.ui-filter__apply:focus-visible,
.ui-filter__clear:focus-visible { outline:2px solid var(--ui-color-primary); outline-offset:1px; }

/* :active (притиснат) на копчињата */
.ui-filter__remove:active:not(:disabled),
.ui-filter__add:active:not(:disabled),
.ui-filter__apply:active:not(:disabled),
.ui-filter__clear:active:not(:disabled) { transform:translateY(1px); }

/* Disabled состојба (Enabled=false → .ui-filter--disabled + disabled атрибути) */
.ui-filter--disabled { opacity:.6; }
.ui-filter--disabled .ui-filter__add,
.ui-filter--disabled .ui-filter__apply,
.ui-filter--disabled .ui-filter__clear,
.ui-filter--disabled .ui-filter__remove { cursor:default; }
.ui-filter__field:disabled,
.ui-filter__operator:disabled,
.ui-filter__logic:disabled,
.ui-filter__value:disabled,
.ui-filter__remove:disabled,
.ui-filter__add:disabled,
.ui-filter__apply:disabled,
.ui-filter__clear:disabled { cursor:default; opacity:.7; }

/* ReadOnly — вредност-input е достапен но не уредлив */
.ui-filter__value[readonly] { background:var(--ui-color-base-bg-hover); cursor:default; }

/* forced-colors безбедност за фокус */
@media (forced-colors: active) {
  .ui-filter__field:focus-visible,
  .ui-filter__operator:focus-visible,
  .ui-filter__logic:focus-visible,
  .ui-filter__value:focus-visible,
  .ui-filter__remove:focus-visible,
  .ui-filter__add:focus-visible,
  .ui-filter__apply:focus-visible,
  .ui-filter__clear:focus-visible { outline:2px solid CanvasText; }
}

/* ── LoaderContainer: дополнувања §094 (inner wrapper, full-page, фокус) ── */
.ui-loadercontainer__inner { display:flex; flex-direction:column; align-items:center; gap:8px; }

/* Full-page (fixed) прекривач — не бара родител со position:relative; покрива цел viewport. */
.ui-loadercontainer--fullscreen { position:fixed; inset:0; z-index:var(--ui-z-modal); }

/* Коренот при Fullscreen е програмски фокус-цел (focus management); суптилен фокус-прстен,
   без агресивен default outline. Локалниот (нефул-скрин) прекривач нема свој tabindex. */
.ui-loadercontainer--fullscreen:focus { outline:none; }
.ui-loadercontainer--fullscreen:focus-visible { outline:var(--ui-focus-ring); outline-offset:-2px; }

/* RTL: распоредот е центриран (без хоризонтално огледалување); текстот ja наследува насоката
   од контекстот (UiRoot dir). Логичка порамнетост за сигурност. */
.ui-loadercontainer__label { text-align:center; }

/* ── UiSmartPasteButton ── (design tokens, без хардкод бои; merge во ui-blazor.css) */
/* Default DI-free икона внатре во копчето: наследува боја/големина од копчето. */
.ui-smartpaste__icon { display:inline-flex; align-items:center; justify-content:center; line-height:0; }
.ui-smartpaste__icon svg { width:1em; height:1em; }

/* Жива област за состојба: видлива само за читачи на екран (visually-hidden), стабилна за aria-live. */
.ui-smartpaste__status {
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; border:0;
}

/* Преглед на резултат. */
.ui-smartpaste__preview {
  margin-top:var(--ui-spacing-2, .5rem);
  padding:var(--ui-spacing-2, .5rem) var(--ui-spacing-3, .75rem);
  border:1px solid var(--ui-color-border, #e0e0e0);
  border-radius:var(--ui-radius, 4px);
  background:var(--ui-color-surface, var(--ui-color-base-bg, #fff));
  color:var(--ui-color-text, inherit);
  box-shadow:var(--ui-shadow-2, 0 1px 3px rgba(0,0,0,.12));
}
.ui-smartpaste__preview:focus-visible {
  outline:var(--ui-focus-outline-width, 2px) solid var(--ui-color-primary, #2962ff);
  outline-offset:var(--ui-focus-outline-offset, 2px);
}

.ui-smartpaste__fields { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:var(--ui-spacing-1, .25rem); }
.ui-smartpaste__field { display:flex; gap:var(--ui-spacing-2, .5rem); align-items:baseline; }
.ui-smartpaste__field-name { font-weight:600; color:var(--ui-color-text, inherit); min-width:6rem; }
.ui-smartpaste__field-value { color:var(--ui-color-text-muted, var(--ui-color-muted, #666)); word-break:break-word; }

/* Apply/Cancel акции во прегледот. */
.ui-smartpaste__actions { display:flex; gap:var(--ui-spacing-2, .5rem); margin-top:var(--ui-spacing-3, .75rem); }
.ui-smartpaste__actions button {
  font:inherit; cursor:pointer; padding:var(--ui-spacing-1, .25rem) var(--ui-spacing-3, .75rem);
  border-radius:var(--ui-radius-sm, var(--ui-radius, 4px)); border:1px solid var(--ui-color-border, #e0e0e0);
}
.ui-smartpaste__actions button:focus-visible {
  outline:var(--ui-focus-outline-width, 2px) solid var(--ui-color-primary, #2962ff);
  outline-offset:var(--ui-focus-outline-offset, 2px);
}
.ui-smartpaste__apply { background:var(--ui-color-primary, #2962ff); color:var(--ui-color-text-on-primary, #fff); border-color:transparent; }
.ui-smartpaste__cancel { background:transparent; color:var(--ui-color-text, inherit); }
.ui-smartpaste__cancel:hover { background:var(--ui-color-base-bg-hover, var(--ui-color-surface-2, rgba(0,0,0,.04))); }

/* Грешка. */
.ui-smartpaste__error {
  margin-top:var(--ui-spacing-2, .5rem);
  padding:var(--ui-spacing-1, .25rem) var(--ui-spacing-3, .75rem);
  border-radius:var(--ui-radius, 4px);
  color:var(--ui-color-error, var(--ui-color-danger, #d32f2f));
  border:1px solid var(--ui-color-error, var(--ui-color-danger, #d32f2f));
}

/* ── UiSpeechToTextButton (§119) ── маркер + состојбени класи. Користи канонски --ui-* токени, без хардкод бои; почитува prefers-reduced-motion. Базниот .ui-btn веќе го дава изгледот/фокусот — ова е само speech-специфичното. */
.ui-speech-btn { position: relative; }

/* Иконичен глиф во мирување/слушање/грешка */
.ui-speech-btn__icon,
.ui-speech-btn__pulse,
.ui-speech-btn__error { display: inline-flex; align-items: center; justify-content: center; line-height: 1; }

/* Listening: акцентиран прстен + пулсирачки индикатор */
.ui-speech-btn--listening { box-shadow: inset 0 0 0 2px var(--ui-color-primary); }
.ui-speech-btn--listening .ui-speech-btn__pulse { color: var(--ui-color-primary); animation: ui-speech-pulse 1.2s ease-in-out infinite; }

/* Пулс „халo" околу копчето додека слуша */
.ui-speech-btn--listening::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: 0 0 0 0 var(--ui-color-primary);
  animation: ui-speech-ring 1.6s ease-out infinite;
  pointer-events: none;
}

/* Error/Unsupported: предупредувачка боја */
.ui-speech-btn--error,
.ui-speech-btn--unsupported { color: var(--ui-color-error, var(--ui-color-danger)); }
.ui-speech-btn--error .ui-speech-btn__error,
.ui-speech-btn--unsupported .ui-speech-btn__error { color: var(--ui-color-error, var(--ui-color-danger)); }
.ui-speech-btn--unsupported { opacity: .75; }

@keyframes ui-speech-pulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.12); opacity: .7; }
}
@keyframes ui-speech-ring {
  0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--ui-color-primary) 55%, transparent); }
  70% { box-shadow: 0 0 0 10px color-mix(in srgb, var(--ui-color-primary) 0%, transparent); }
  100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--ui-color-primary) 0%, transparent); }
}

/* Достапност: исклучи анимации при reduced-motion (статичен индикатор останува видлив) */
@media (prefers-reduced-motion: reduce) {
  .ui-speech-btn--listening .ui-speech-btn__pulse,
  .ui-speech-btn--listening::after { animation: none; }
}

/* ===== Мега-рунда 1 (Grid resize/reorder, Spreadsheet, Scheduler, Gantt, Chart, Diagram, PivotGrid, PdfViewer, FileManager, Map) ===== */
/* Resize рачка — overlay на десниот раб на header ќелијата */
.ui-grid-header-cell { position: relative; }
.ui-grid-resize-handle {
  position: absolute; top: 0; right: -3px; width: 7px; height: 100%;
  cursor: col-resize; user-select: none; touch-action: none; z-index: 5;
}
.ui-grid-header-cell--resizable .ui-grid-resize-handle:hover {
  background: var(--ui-border-color, rgba(0,0,0,0.12));
}
/* Reorder состојби */
.ui-grid-header-cell--reorderable { cursor: grab; }
.ui-grid-header-cell--reordering { opacity: 0.5; cursor: grabbing; }
/* Маркер за позиција на испуштање при reorder */
.ui-grid-reorder-marker {
  position: absolute; top: 0; left: -1px; width: 2px; height: 100%;
  background: var(--ui-primary, #2563eb); z-index: 6; pointer-events: none;
}

/* UiSpreadsheet: скриен capture input — единствена табулациона точка за keyboard/ARIA.
   Видлив за screen-reader, визуелно сокриен (не display:none за да остане фокусибилен). */
.ui-spreadsheet__capture {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  border: 0;
  opacity: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  pointer-events: none;
}
/* Видлив фокус-индикатор на активната ќелија кога grid-от логички го држи фокусот
   (capture input е фокусиран; активната ќелија се означува преку --active маркер). */
.ui-spreadsheet__cell--active {
  outline: 2px solid var(--ui-color-primary, #2962ff);
  outline-offset: -2px;
  z-index: var(--ui-z-0, 1);
}

/* ── UiScheduler: all-day / multi-day spanning зона (§5.8) ── */
.ui-scheduler-allday {
  display: grid;
  grid-template-columns: var(--ui-scheduler-axis-width, 56px) 1fr;
  align-items: stretch;
  border-bottom: 1px solid var(--ui-border, var(--ui-component-border, #e0e0e0));
  background: var(--ui-component-bg, #fff);
}
.ui-scheduler-allday-label {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 2px 6px;
  font-size: var(--ui-font-size-sm, 0.75rem);
  color: var(--ui-subtle-text, #666);
}
.ui-scheduler-allday-body {
  display: grid;
  grid-template-columns: repeat(var(--ui-scheduler-cols, 7), 1fr);
  grid-auto-rows: minmax(var(--ui-scheduler-allday-row-height, 22px), auto);
  gap: 2px;
  padding: 2px;
}
.ui-scheduler-allday-bar {
  display: flex;
  align-items: center;
  min-width: 0;
  padding: 1px 6px;
  border-radius: var(--ui-border-radius, 2px);
  background: var(--ui-scheduler-event-bg, var(--ui-primary, #2680eb));
  color: var(--ui-scheduler-event-text, var(--ui-on-primary, #fff));
  font-size: var(--ui-font-size-sm, 0.75rem);
  cursor: pointer;
  overflow: hidden;
}
.ui-scheduler-allday-bar:focus-visible {
  outline: 2px solid var(--ui-focus-ring, var(--ui-primary, #2680eb));
  outline-offset: 1px;
}
.ui-scheduler-allday-bar-title {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* стрелки за продолжување надвор од видливиот опсег */
.ui-scheduler-allday-bar--cont-before { border-top-left-radius: 0; border-bottom-left-radius: 0; }
.ui-scheduler-allday-bar--cont-after  { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.ui-scheduler-allday-bar--cont-before::before { content: "‹"; margin-inline-end: 4px; opacity: .8; }
.ui-scheduler-allday-bar--cont-after::after   { content: "›"; margin-inline-start: 4px; opacity: .8; }

/* Drag-состојба: курсори по регион + ghost при активен drag. Боите/радиусите се токени. */
.ui-gantt-bar--task .ui-gantt-bar-rect { cursor: move; }
.ui-gantt.ui-gantt--dragging, .ui-gantt.ui-gantt--dragging * { cursor: grabbing !important; user-select: none; }
.ui-gantt-bar--task .ui-gantt-handle-left { cursor: ew-resize; }
.ui-gantt-bar--task .ui-gantt-handle-right { cursor: ew-resize; }
.ui-gantt-bar--task .ui-gantt-percent-handle { cursor: ew-resize; }
.ui-gantt-bar--summary .ui-gantt-bar-rect { cursor: move; }
.ui-gantt-bar--milestone .ui-gantt-milestone { cursor: move; }
/* Preview бар за време на drag (полупроѕирен overlay; родителот го позиционира со inline transform). */
.ui-gantt-bar-preview { opacity: .55; pointer-events: none; }
.ui-gantt-bar-preview .ui-gantt-bar-rect { stroke: var(--ui-color-primary); stroke-dasharray: 3 2; }

/* ── UiChart Ф2: серии, маркери, интеракција (§7 token map) ── */
/* Серии-палета fallback (ако темата нема --ui-color-series-*) */
.ui-chart {
  --ui-color-series-1: var(--ui-color-primary, #2f6fed);
  --ui-color-series-2: #ed6c2f;
  --ui-color-series-3: #2faf6c;
  --ui-color-series-4: #b02fed;
  --ui-color-series-5: #edc12f;
  --ui-color-series-6: #2fc7ed;
  --ui-color-series-7: #ed2f6c;
  --ui-color-series-8: #6c6f7a;
}
.ui-chart__line { fill: none; stroke-linejoin: round; stroke-linecap: round; }
.ui-chart__area { stroke: none; }
.ui-chart__marker { stroke: var(--ui-surface, #fff); stroke-width: 1; }
/* Прозрачен hit-overlay фаќа pointer; не визуелен */
.ui-chart__hit-overlay { cursor: crosshair; }
/* Crosshair */
.ui-chart__crosshair-line {
  stroke: var(--ui-chart-crosshair-color, var(--ui-border-color, #c4c7cc));
  stroke-width: 1; stroke-dasharray: 3 3; pointer-events: none;
}
/* Tooltip (HTML popup слој) */
.ui-chart__tooltip {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--ui-chart-tooltip-bg, var(--ui-surface, #1b1f24));
  color: var(--ui-chart-tooltip-color, var(--ui-text-color, #fff));
  padding: 4px 8px; border-radius: var(--ui-border-radius, 4px);
  font-size: 12px; white-space: nowrap; pointer-events: none;
  box-shadow: 0 2px 8px rgba(0,0,0,.18); z-index: var(--ui-z-tooltip, 1070);
}
.ui-chart__tooltip-swatch { width: 10px; height: 10px; border-radius: 2px; flex: 0 0 auto; }
.ui-chart__tooltip-category { font-weight: 600; }
.ui-chart__tooltip-value { opacity: .9; }
/* Legend toggle */
.ui-chart__legend-item[role="button"] { cursor: pointer; background: none; border: 0; }
.ui-chart__legend-item[role="button"]:focus-visible {
  outline: 2px solid var(--ui-color-primary, #2f6fed); outline-offset: 2px; border-radius: 3px;
}
.ui-chart__legend-item--inactive { opacity: .45; }
.ui-chart__legend-item--inactive .ui-chart__legend-text { text-decoration: line-through; }

/* UiDiagram — нови варијанти на конектори воведени оваа рунда (централен merge во ui-blazor.css) */
.ui-diagram__connection--self { stroke-dasharray: none; }
.ui-diagram__connection--waypoints { /* истиот изглед како orthogonal; засебен hook за стилизирање */ }
.ui-diagram--editable .ui-diagram__shape-group { cursor: grab; }
.ui-diagram--editable .ui-diagram__shape-group--dragging,
.ui-diagram--dragging .ui-diagram__shape-group--dragging { cursor: grabbing; }
.ui-diagram__shape-group--dragging .ui-diagram__shape { filter: drop-shadow(0 2px 4px rgba(0,0,0,.25)); }

/* UiPdfViewer — page surfaces + chrome (овој премин). Сите бои преку постоечки --ui-* токени. */
.ui-pdf-viewer{display:flex;flex-direction:column;position:relative;min-height:400px;background:var(--ui-color-surface);color:var(--ui-color-on-surface);border:1px solid var(--ui-color-border);border-radius:var(--ui-border-radius);overflow:hidden}
.ui-pdf-viewer__toolbar{display:flex;align-items:center;gap:var(--ui-spacing-xs,4px);padding:var(--ui-spacing-xs,4px) var(--ui-spacing-sm,8px);border-bottom:1px solid var(--ui-color-border);background:var(--ui-color-surface)}
.ui-pdf-viewer__separator{width:1px;align-self:stretch;margin:0 var(--ui-spacing-xs,4px);background:var(--ui-color-border)}
.ui-pdf-viewer__pager-indicator,.ui-pdf-viewer__zoom-indicator{padding:0 var(--ui-spacing-xs,4px);font-variant-numeric:tabular-nums;white-space:nowrap}
.ui-pdf-viewer__body{position:relative;display:flex;flex:1 1 auto;min-height:0}
.ui-pdf-viewer__viewport{flex:1 1 auto;min-height:0;overflow:auto;background:var(--ui-color-surface-alt,var(--ui-color-surface));outline:none;scroll-behavior:smooth}
.ui-pdf-viewer--pan .ui-pdf-viewer__viewport{cursor:grab}
.ui-pdf-viewer--pan .ui-pdf-viewer__viewport:active{cursor:grabbing}
.ui-pdf-viewer__pages{position:relative;display:flex;flex-direction:column;align-items:center;padding:var(--ui-pdf-page-gap,var(--ui-spacing-md,16px)) 0;gap:var(--ui-pdf-page-gap,var(--ui-spacing-md,16px))}
.ui-pdf-viewer__spacer{flex:0 0 auto;width:1px;pointer-events:none}
.ui-pdf-page{position:relative;margin:0 auto;background:var(--ui-pdf-page-bg,#fff);box-shadow:var(--ui-shadow-md,0 1px 4px rgba(0,0,0,.18));border:1px solid var(--ui-color-border)}
.ui-pdf-page--placeholder{background:var(--ui-color-surface-alt,#f3f3f3)}
.ui-pdf-page__canvas{display:block;max-width:100%}
.ui-pdf-page__text-layer{position:absolute;inset:0;overflow:hidden;line-height:1;opacity:1;z-index:1}
.ui-pdf-text-item{position:absolute;white-space:pre;color:transparent;cursor:text;transform-origin:0 0;user-select:text}
.ui-pdf-viewer--pan .ui-pdf-text-item{user-select:none;pointer-events:none}
.ui-pdf-viewer__placeholder-note{padding:var(--ui-spacing-lg,24px);text-align:center;color:var(--ui-color-on-surface);opacity:.7}
.ui-pdf-viewer__empty{display:flex;align-items:center;justify-content:center;height:100%;min-height:200px;color:var(--ui-color-on-surface);opacity:.6}
.ui-pdf-viewer__search{position:absolute;top:var(--ui-spacing-sm,8px);right:var(--ui-spacing-sm,8px);display:flex;align-items:center;gap:var(--ui-spacing-xs,4px);padding:var(--ui-spacing-xs,4px) var(--ui-spacing-sm,8px);background:var(--ui-color-surface);border:1px solid var(--ui-color-border);border-radius:var(--ui-border-radius);box-shadow:var(--ui-shadow-lg,0 4px 16px rgba(0,0,0,.2));z-index:var(--ui-z-1050,1050)}
.ui-pdf-viewer__search-count{font-variant-numeric:tabular-nums;opacity:.75;white-space:nowrap}
.ui-pdf-search__hit{background:var(--ui-color-warning-bg,rgba(255,213,79,.5))}
.ui-pdf-search__hit--active{background:var(--ui-color-primary);color:var(--ui-color-on-primary)}
.ui-pdf-viewer__loader{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:var(--ui-overlay-bg,rgba(0,0,0,.35));color:var(--ui-color-on-surface);z-index:var(--ui-z-1060,1060)}

/* === UiFileManager — нови state/listview/preview/rename класи (овој премин) === */
/* State модификатори на ред/плочка (§9.1). */
.ui-filemanager-item--selected,
.ui-filemanager-grid-row.ui-filemanager-item--selected td {
  background: var(--ui-color-primary-bg-subtle, var(--ui-color-base-bg-hover));
}
.ui-filemanager-grid-row.ui-filemanager-item--selected {
  background: var(--ui-color-primary-bg-subtle, var(--ui-color-base-bg-hover));
}
.ui-filemanager-item--selected { color: var(--ui-color-text); }
.ui-filemanager-item--focused { outline: 2px solid var(--ui-color-primary); outline-offset: -2px; }
.ui-filemanager-item--cut { opacity: 0.5; }
.ui-filemanager-item--renaming { background: var(--ui-color-base-bg-hover); }

/* Inline rename input. */
.ui-filemanager-rename {
  font: inherit;
  padding: 2px 6px;
  border: 1px solid var(--ui-color-primary);
  border-radius: var(--ui-radius, 4px);
  background: var(--ui-color-base-bg, #fff);
  color: var(--ui-color-text);
  min-width: 8rem;
}
.ui-filemanager-rename--invalid { border-color: var(--ui-color-error, #d32f2f); }
.ui-filemanager-rename--invalid:focus-visible { outline: 2px solid var(--ui-color-error, #d32f2f); }

/* New-folder (и идни) команди во лентата. */
.ui-filemanager-command {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 4px 10px; border: 1px solid var(--ui-color-border);
  border-radius: var(--ui-radius, 4px); background: transparent;
  color: var(--ui-color-text); cursor: pointer; font: inherit;
}
.ui-filemanager-command:hover { background: var(--ui-color-base-bg-hover); }

/* ListView приказ (плочки). */
.ui-filemanager-listview {
  display: flex; flex-wrap: wrap; gap: var(--ui-gap);
  margin: 0; padding: var(--ui-gap); list-style: none;
}
.ui-filemanager-tile {
  display: flex; flex-direction: column; align-items: center; justify-content: flex-start;
  gap: 6px; width: var(--ui-filemanager-tile-size, 96px);
  padding: 8px; border: 1px solid transparent; border-radius: var(--ui-radius, 4px);
  cursor: default; text-align: center; word-break: break-word;
}
.ui-filemanager-tile:hover { background: var(--ui-color-base-bg-hover); }
.ui-filemanager-tile.ui-filemanager-item--selected { border-color: var(--ui-color-primary); }
.ui-filemanager-tile-icon { font-size: var(--ui-filemanager-tile-icon-size, 48px); line-height: 1; }
.ui-filemanager-tile-icon .ui-icon svg { width: var(--ui-filemanager-tile-icon-size, 48px); height: var(--ui-filemanager-tile-icon-size, 48px); }
.ui-filemanager-tile-name { font-size: var(--ui-font-size-sm, 0.85rem); }

/* Preview панел (десно). */
.ui-filemanager-preview {
  flex: 0 0 var(--ui-filemanager-preview-width, 300px);
  border-left: 1px solid var(--ui-color-border);
  padding: var(--ui-gap); overflow: auto;
}
.ui-filemanager-preview-empty { color: var(--ui-color-disabled); text-align: center; padding: calc(var(--ui-gap) * 2); }

/* Нови компонентни варијабли (декларирани на коренот). */
.ui-filemanager {
  --ui-filemanager-preview-width: 300px;
  --ui-filemanager-tile-size: 96px;
  --ui-filemanager-tile-icon-size: 48px;
}

/* UiMap Ф2 — визуелни рафинирања за marker glyph + popup позиционирање (АДИТИВНО,
   клучено на класи што UiMap.cs ВЕЌЕ ги емитува; не менува DOM/тестови). Само тема-токени. */

/* Marker glyph (внатрешен <span class="ui-map__marker-glyph">) — pin vs pin-target форма.
   anchor е долу-центар → таблата го поместува маркерот нагоре/лево. */
.ui-map__marker { transform-origin: center bottom; }
.ui-map__marker-glyph {
  display: block;
  width: 16px;
  height: 16px;
  margin-left: -8px;   /* центрирај хоризонтално околу anchor x */
  margin-top: -16px;   /* anchor долу-центар: глифот завршува на точката */
  background: currentColor;
  border: 2px solid var(--ui-color-on-primary, #fff);
  box-shadow: var(--ui-shadow-1);
}
/* Pin: капка со зашилен врв долу */
.ui-map__marker--pin .ui-map__marker-glyph {
  border-radius: 50% 50% 50% 0;
  transform: rotate(-45deg);
}
/* PinTarget: круг со целен прстен */
.ui-map__marker--pin-target .ui-map__marker-glyph {
  border-radius: 50%;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ui-color-primary) 30%, transparent), var(--ui-shadow-1);
}

/* Popup позициски варијанти (UiMap емитува ui-map__popup--top/bottom/left/right).
   База веќе постои; тука само anchor offset според страна (anchor е долу-центар на маркерот). */
.ui-map__popup { position: absolute; padding: 4px 8px; max-width: 240px; pointer-events: none; }
.ui-map__popup-text { white-space: nowrap; font-size: .8125rem; }
.ui-map__popup--top    { transform: translate(-50%, calc(-100% - 22px)); }
.ui-map__popup--bottom { transform: translate(-50%, 6px); }
.ui-map__popup--left   { transform: translate(calc(-100% - 12px), -100%); }
.ui-map__popup--right  { transform: translate(12px, -100%); }

/* ===== Granular круг 1 (Grid column-menu, Scheduler month, Gantt deps, Chart pie/donut, Diagram, TreeList, PdfViewer, FileManager, DockManager, TaskBoard) ===== */
/* ===== UiGrid column menu (header dropdown) — grid-deep §4.13 ===== */
.ui-grid-column-menu-trigger {
  position: absolute; top: 50%; right: 4px; transform: translateY(-50%);
  display: inline-flex; align-items: center; justify-content: center;
  width: 20px; height: 20px; padding: 0; border: 0; border-radius: var(--ui-radius, 4px);
  background: transparent; color: inherit; cursor: pointer; opacity: 0; z-index: 6;
  transition: opacity .12s ease, background .12s ease;
}
.ui-grid-header-cell:hover .ui-grid-column-menu-trigger,
.ui-grid-column-menu-trigger:focus-visible,
.ui-grid-column-menu-trigger--open { opacity: 1; }
.ui-grid-column-menu-trigger:hover { background: var(--ui-color-base-bg-hover, rgba(0,0,0,.06)); }
.ui-grid-column-menu-trigger--open { background: var(--ui-color-base-bg-hover, rgba(0,0,0,.08)); }
.ui-grid-column-menu-icon { font-size: 14px; line-height: 1; pointer-events: none; }

/* Popup */
.ui-grid-column-menu {
  position: absolute; top: 100%; right: 0; min-width: 200px; margin-top: 2px;
  padding: 4px; display: flex; flex-direction: column; gap: 2px;
  background: var(--ui-color-base-bg, #fff); color: var(--ui-color-text, inherit);
  border: 1px solid var(--ui-color-border, rgba(0,0,0,.14)); border-radius: var(--ui-radius, 4px);
  box-shadow: 0 4px 14px rgba(0,0,0,.14); z-index: var(--ui-z-dropdown, 1040);
  font: 14px var(--ui-font, inherit); text-align: left; white-space: nowrap; cursor: default;
}

/* Items */
.ui-grid-column-menu-item {
  display: flex; align-items: center; gap: var(--ui-gap, 8px);
  width: 100%; padding: 8px 12px; border: 0; background: transparent;
  color: inherit; font: inherit; text-align: left; cursor: pointer;
  border-radius: var(--ui-radius, 4px); user-select: none;
}
.ui-grid-column-menu-item:hover:not(.ui-grid-column-menu-item--disabled) {
  background: var(--ui-color-base-bg-hover, rgba(0,0,0,.06));
}
.ui-grid-column-menu-item:focus { outline: none; }
.ui-grid-column-menu-item:focus-visible {
  outline: 2px solid var(--ui-primary, #2563eb); outline-offset: -2px;
}
.ui-grid-column-menu-item--disabled { color: var(--ui-color-disabled, rgba(0,0,0,.38)); cursor: not-allowed; }
.ui-grid-column-menu-item--selected { font-weight: 600; }
.ui-grid-column-menu-item-icon { display: inline-flex; width: 1.2em; justify-content: center; opacity: .8; }
.ui-grid-column-menu-item-text { flex: 1 1 auto; }

/* Columns chooser */
.ui-grid-column-menu-chooser-arrow { margin-left: auto; opacity: .6; }
.ui-grid-column-menu-chooser {
  display: flex; flex-direction: column; gap: 1px; padding: 2px 4px 4px 24px;
  max-height: 240px; overflow: auto;
}
.ui-grid-column-menu-chooser-item {
  display: flex; align-items: center; gap: var(--ui-gap, 8px);
  padding: 6px 8px; border-radius: var(--ui-radius, 4px); cursor: pointer; user-select: none;
}
.ui-grid-column-menu-chooser-item:hover { background: var(--ui-color-base-bg-hover, rgba(0,0,0,.06)); }
.ui-grid-column-menu-chooser-item--locked { cursor: not-allowed; color: var(--ui-color-disabled, rgba(0,0,0,.38)); }
.ui-grid-column-menu-chooser-check { margin: 0; }
.ui-grid-column-menu-chooser-label { flex: 1 1 auto; }

/* UiScheduler Month view — додади во централен merge (НЕ во ui-blazor.css од мене) */
.ui-scheduler-month { display: flex; flex-direction: column; min-height: 0; }

.ui-scheduler-month-header {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  border-bottom: 1px solid var(--ui-scheduler-border, var(--ui-border, #d3d3d3));
}
.ui-scheduler-month-dayname {
  padding: var(--ui-spacing-1, 4px) var(--ui-spacing-2, 8px);
  font-weight: 600;
  font-size: var(--ui-font-size-sm, 0.85em);
  color: var(--ui-scheduler-muted, var(--ui-text-muted, #6b6b6b));
  text-align: center;
}

.ui-scheduler-month-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  grid-template-rows: repeat(var(--ui-scheduler-month-weeks, 6), minmax(5.5em, 1fr));
  flex: 1 1 auto;
  min-height: 0;
}

/* ден-ќелија (Month) — различен контекст од .ui-scheduler-cell во time-grid */
.ui-scheduler-month-grid .ui-scheduler-cell {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 2px 4px;
  border-right: 1px solid var(--ui-scheduler-border, var(--ui-border, #d3d3d3));
  border-bottom: 1px solid var(--ui-scheduler-border, var(--ui-border, #d3d3d3));
  overflow: hidden;
  background: var(--ui-scheduler-cell-bg, var(--ui-surface, #fff));
  cursor: pointer;
}
.ui-scheduler-month-grid .ui-scheduler-cell:focus-visible,
.ui-scheduler-cell--focused {
  outline: 2px solid var(--ui-focus-ring, var(--ui-primary, #2680eb));
  outline-offset: -2px;
}
.ui-scheduler-cell--other-month { background: var(--ui-scheduler-othermonth-bg, var(--ui-surface-muted, #f4f4f4)); }
.ui-scheduler-cell--other-month .ui-scheduler-cell-date { color: var(--ui-scheduler-muted, var(--ui-text-muted, #9a9a9a)); }
.ui-scheduler-cell--today { background: var(--ui-scheduler-today-bg, rgba(38,128,235,0.08)); }

.ui-scheduler-cell-date {
  align-self: flex-end;
  font-size: var(--ui-font-size-sm, 0.85em);
  font-weight: 600;
  line-height: 1.4;
}
.ui-scheduler-cell--today .ui-scheduler-cell-date {
  background: var(--ui-primary, #2680eb);
  color: var(--ui-on-primary, #fff);
  border-radius: 999px;
  min-width: 1.6em;
  text-align: center;
}

/* chip (Month) */
.ui-scheduler-event--chip {
  position: static;
  display: flex;
  align-items: baseline;
  gap: 4px;
  padding: 1px 6px;
  border-radius: var(--ui-radius-sm, 3px);
  font-size: var(--ui-font-size-sm, 0.8em);
  line-height: 1.5;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  background: var(--ui-scheduler-event-bg, var(--ui-primary, #2680eb));
  color: var(--ui-scheduler-event-text, var(--ui-on-primary, #fff));
  cursor: pointer;
}
.ui-scheduler-event--chip .ui-scheduler-event-time { font-weight: 600; opacity: .9; }
.ui-scheduler-event--chip .ui-scheduler-event-title { overflow: hidden; text-overflow: ellipsis; }
.ui-scheduler-event--allday {
  background: var(--ui-scheduler-allday-bg, var(--ui-success, #2e7d32));
}

/* „+N more" / collapse */
.ui-scheduler-more {
  align-self: flex-start;
  padding: 0 4px;
  border: none;
  background: transparent;
  color: var(--ui-scheduler-muted, var(--ui-text-muted, #555));
  font-size: var(--ui-font-size-sm, 0.8em);
  font-weight: 600;
  cursor: pointer;
}
.ui-scheduler-more:hover { text-decoration: underline; color: var(--ui-primary, #2680eb); }

/* активно view-копче (Месец) — користи постоечкиот .ui-scheduler-viewbtn--active */

/* Класите .ui-gantt-deps, .ui-gantt-dep, .ui-gantt-dep--fs/--ss/--ff/--sf, .ui-gantt-dep--critical, .ui-gantt-dep-arrow веќе се емитуваат од рендерот; стилизирањето оди во централниот merge (НЕ во ui-blazor.css од мене). Препорачани правила:
.ui-gantt-deps { pointer-events: none; }
.ui-gantt-dep { stroke: var(--ui-gantt-dep-stroke, var(--ui-color-border, #9aa0a6)); stroke-width: var(--ui-gantt-dep-width, 1.5px); }
.ui-gantt-dep-arrow { fill: var(--ui-gantt-dep-stroke, var(--ui-color-border, #9aa0a6)); }
.ui-gantt-dep--critical { stroke: var(--ui-gantt-critical, var(--ui-color-error, #d93025)); }
.ui-gantt-dep--critical + .ui-gantt-dep-arrow, .ui-gantt-dep-arrow.ui-gantt-dep--critical { fill: var(--ui-gantt-critical, var(--ui-color-error, #d93025)); }
/* RTL огледување на стрелки (§G27) → Ф2+ преку transform: scaleX(-1) на .ui-gantt-svg во dir=rtl. */

/* UiChart — Pie / Donut (нова рунда; за централен merge во ui-blazor.css до постоечкиот .ui-chart блок) */
.ui-chart__pie-slice {
  stroke: var(--ui-surface, #fff);
  stroke-width: 1;
  stroke-linejoin: round;
}
.ui-chart__pie-slice:hover { opacity: .9; }
.ui-chart__pie-label {
  fill: var(--ui-chart-pie-label-color, var(--ui-text-color, #fff));
  font-size: 11px;
  font-weight: 600;
  paint-order: stroke;
  stroke: var(--ui-chart-pie-label-halo, rgba(0,0,0,.35));
  stroke-width: 2px;
  pointer-events: none;
}

/* UiTreeList — inline editing + CRUD (нов подсистем). Merge во централен ui-blazor.css. */
.ui-treelist-command-cell {
  white-space: nowrap;
  text-align: end;
  width: 1%;
}
.ui-treelist-row--editing > .ui-treelist-cell {
  background: var(--ui-treelist-edit-bg, var(--ui-color-surface-alt, rgba(0,0,0,0.03)));
}
.ui-treelist-row--new > .ui-treelist-cell {
  background: var(--ui-treelist-new-bg, var(--ui-color-success-subtle, rgba(46,160,67,0.08)));
}
.ui-treelist-edit-cell {
  padding-block: var(--ui-treelist-edit-cell-padding-y, 2px);
}
.ui-treelist-edit-input {
  width: 100%;
  box-sizing: border-box;
}
.ui-treelist-cmd {
  display: inline-flex;
  align-items: center;
  margin-inline-start: var(--ui-treelist-cmd-gap, 4px);
  cursor: pointer;
}
.ui-treelist-cmd:first-child { margin-inline-start: 0; }

/* UiPdfViewer — Thumbnails панел (Ф1: placeholder минијатури, без растер) */
.ui-pdf-viewer__thumbnails{
  flex:0 0 auto;width:152px;display:flex;flex-direction:column;min-height:0;
  border-inline-end:1px solid var(--ui-color-border);
  background:var(--ui-color-surface);
}
.ui-pdf-viewer__thumbnail-list{
  flex:1 1 auto;overflow-y:auto;overflow-x:hidden;min-height:0;
  display:flex;flex-direction:column;align-items:center;gap:var(--ui-spacing-2);
  padding:var(--ui-spacing-2);
}
.ui-pdf-thumbnail{
  display:flex;flex-direction:column;align-items:center;gap:var(--ui-spacing-1);
  padding:var(--ui-spacing-1);border:1px solid transparent;border-radius:var(--ui-radius-sm);
  background:transparent;cursor:pointer;color:var(--ui-color-text);font:inherit;
}
.ui-pdf-thumbnail:hover{background:var(--ui-color-hover-bg);}
.ui-pdf-thumbnail:focus-visible{outline:var(--ui-focus-ring);outline-offset:2px;}
.ui-pdf-thumbnail--active{border-color:var(--ui-color-primary);background:var(--ui-color-hover-bg);}
.ui-pdf-thumbnail__surface{
  background:#fff;border:1px solid var(--ui-color-border);box-shadow:0 1px 2px rgba(0,0,0,.12);
}
.ui-pdf-thumbnail--active .ui-pdf-thumbnail__surface{box-shadow:0 0 0 2px var(--ui-color-primary);}
.ui-pdf-thumbnail__label{font-size:12px;color:var(--ui-color-text-muted);line-height:1;}
.ui-pdf-thumbnail--active .ui-pdf-thumbnail__label{color:var(--ui-color-primary);font-weight:600;}
.ui-pdf-viewer__thumbnails-toggle--active{background:var(--ui-color-hover-bg);}

/* Outline / bookmarks панел (мирка на thumbnails панелот) */
.ui-pdf-viewer__outline{
  flex:0 0 auto;width:200px;display:flex;flex-direction:column;min-height:0;
  border-inline-end:1px solid var(--ui-color-border);
  background:var(--ui-color-surface);
}
.ui-pdf-viewer__outline-tree{
  flex:1 1 auto;overflow-y:auto;overflow-x:hidden;min-height:0;
  display:flex;flex-direction:column;padding:var(--ui-spacing-1);
}
.ui-pdf-viewer__outline-node{display:flex;flex-direction:column;}
.ui-pdf-viewer__outline-item{
  display:flex;align-items:center;gap:var(--ui-spacing-1);
  padding:var(--ui-spacing-1) var(--ui-spacing-2);border:1px solid transparent;
  border-radius:var(--ui-radius-sm);background:transparent;cursor:pointer;
  color:var(--ui-color-text);font:inherit;text-align:start;width:100%;
}
.ui-pdf-viewer__outline-item:hover{background:var(--ui-color-hover-bg);}
.ui-pdf-viewer__outline-item:focus-visible{outline:var(--ui-focus-ring);outline-offset:-2px;}
.ui-pdf-viewer__outline-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.ui-pdf-viewer__outline-toggle{
  flex:0 0 auto;display:inline-flex;width:16px;color:var(--ui-color-text-muted);cursor:pointer;
}

/* Нема нов CSS. Сите ListView класи и токени веќе постојат во ui-blazor.css:
   .ui-filemanager-listview (flex-wrap грид), .ui-filemanager-tile (width: var(--ui-filemanager-tile-size,96px)),
   .ui-filemanager-tile-icon/-name, .ui-filemanager-item--focused/--selected,
   и токените --ui-filemanager-tile-size:96px / --ui-filemanager-tile-icon-size:48px.
   TileSize default (96) е намерно усогласен со --ui-filemanager-tile-size за да мерењето одговара на CSS. */

/* UiDockManager — floating слој (нови класи; design tokens, ui- префикс) */
.ui-dock__floating-layer {
  position: absolute;
  inset: 0;
  pointer-events: none; /* самите прозорци повторно вклучуваат pointer-events */
}
.ui-dock__floating {
  pointer-events: auto;
  display: flex;
  flex-direction: column;
  background: var(--ui-color-surface, #fff);
  border: 1px solid var(--ui-border-color, rgba(0,0,0,.12));
  border-radius: var(--ui-border-radius, 4px);
  box-shadow: var(--ui-shadow-popup, var(--ui-shadow-lg, 0 8px 24px rgba(0,0,0,.18)));
  min-width: var(--ui-dock-min-pane, 40px);
  min-height: var(--ui-dock-min-pane, 40px);
  z-index: var(--ui-z-dropdown, 1000);
}
.ui-dock__floating--max {
  inset: 0;
  border-radius: 0;
}
.ui-dock__floating-titlebar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ui-spacing-sm, 4px);
  padding: var(--ui-spacing-xs, 2px) var(--ui-spacing-sm, 8px);
  cursor: move;
  background: var(--ui-color-surface-alt, rgba(0,0,0,.04));
  border-bottom: 1px solid var(--ui-border-color, rgba(0,0,0,.12));
}
.ui-dock__floating-title {
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ui-dock__floating-actions {
  display: inline-flex;
  gap: var(--ui-spacing-xs, 2px);
}
.ui-dock__floating-max,
.ui-dock__floating-restore,
.ui-dock__floating-close {
  border: 0;
  background: transparent;
  cursor: pointer;
  line-height: 1;
  padding: 2px 6px;
  border-radius: var(--ui-border-radius, 4px);
}
.ui-dock__floating-max:hover,
.ui-dock__floating-restore:hover,
.ui-dock__floating-close:hover {
  background: var(--ui-color-hover, rgba(0,0,0,.08));
}
.ui-dock__floating-body {
  flex: 1 1 auto;
  overflow: auto;
  position: relative;
}
/* Resize рачки (8 правци) — DOM/pointer wiring е Ф2+ (interop), стиловите се подготвени */
.ui-dock__floating-handle { position: absolute; }
.ui-dock__floating-handle--n  { top: -3px; left: 0; right: 0; height: 6px; cursor: ns-resize; }
.ui-dock__floating-handle--s  { bottom: -3px; left: 0; right: 0; height: 6px; cursor: ns-resize; }
.ui-dock__floating-handle--e  { right: -3px; top: 0; bottom: 0; width: 6px; cursor: ew-resize; }
.ui-dock__floating-handle--w  { left: -3px; top: 0; bottom: 0; width: 6px; cursor: ew-resize; }
.ui-dock__floating-handle--ne { top: -3px; right: -3px; width: 10px; height: 10px; cursor: nesw-resize; }
.ui-dock__floating-handle--nw { top: -3px; left: -3px; width: 10px; height: 10px; cursor: nwse-resize; }
.ui-dock__floating-handle--se { bottom: -3px; right: -3px; width: 10px; height: 10px; cursor: nwse-resize; }
.ui-dock__floating-handle--sw { bottom: -3px; left: -3px; width: 10px; height: 10px; cursor: nesw-resize; }

/* UiTaskBoard — card editor dialog (нови елементи; central merge, НЕ во ui-blazor.css) */
.ui-taskboard__card { position: relative; }
.ui-taskboard__card-edit {
  position: absolute;
  top: var(--ui-spacing-1, 4px);
  inset-inline-end: var(--ui-spacing-1, 4px);
  border: none;
  background: transparent;
  cursor: pointer;
  opacity: 0;
  padding: 2px 4px;
  border-radius: var(--ui-border-radius-sm, 3px);
  color: var(--ui-color-muted, #667);
  transition: opacity .12s ease, background-color .12s ease;
}
.ui-taskboard__card:hover .ui-taskboard__card-edit,
.ui-taskboard__card:focus-within .ui-taskboard__card-edit { opacity: 1; }
.ui-taskboard__card-edit:hover { background: var(--ui-color-hover, rgba(0,0,0,.06)); }

.ui-taskboard__editor { display: flex; flex-direction: column; gap: var(--ui-spacing-2, 8px); }
.ui-taskboard__editor-default { margin: 0; color: var(--ui-color-muted, #667); }

/* Footer копчиња (дијалогот веќе има .ui-actions layout) */
.ui-taskboard__editor-save {
  background: var(--ui-color-primary, #2962ff);
  color: var(--ui-color-on-primary, #fff);
  border: 1px solid transparent;
  border-radius: var(--ui-border-radius, 4px);
  padding: var(--ui-spacing-1, 4px) var(--ui-spacing-3, 12px);
  cursor: pointer;
}
.ui-taskboard__editor-cancel {
  background: var(--ui-color-surface, #fff);
  color: var(--ui-color-text, #222);
  border: 1px solid var(--ui-color-border, #ccd);
  border-radius: var(--ui-border-radius, 4px);
  padding: var(--ui-spacing-1, 4px) var(--ui-spacing-3, 12px);
  cursor: pointer;
}
.ui-taskboard__editor-delete {
  background: transparent;
  color: var(--ui-color-danger, #d32f2f);
  border: 1px solid var(--ui-color-danger, #d32f2f);
  border-radius: var(--ui-border-radius, 4px);
  padding: var(--ui-spacing-1, 4px) var(--ui-spacing-3, 12px);
  cursor: pointer;
  margin-inline-end: auto; /* лево во footer */
}
.ui-taskboard__editor-delete--confirm {
  background: var(--ui-color-danger, #d32f2f);
  color: var(--ui-color-on-danger, #fff);
  margin-inline-end: 0;
}
.ui-taskboard__editor-confirm {
  color: var(--ui-color-danger, #d32f2f);
  align-self: center;
  margin-inline-end: auto;
}

/* ════════════════════════════════════════════════════════════════════════
   Мега-паритет круг (2026-06-21): нови фичери — Grid multi-level grouping,
   Spreadsheet merge, Scheduler now-line, Gantt task-editor, TreeList multi-sort.
   ════════════════════════════════════════════════════════════════════════ */

/* Grid — multi-level group panel + nested group rows */
.ui-grid-group-row--level-1 .ui-grid-group-cell { background: var(--ui-color-surface-2, #f0f1f4); }
.ui-grid-group-row--level-2 .ui-grid-group-cell { background: var(--ui-color-surface-2, #f0f1f4); }
.ui-grid-group-panel { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; padding: 6px 10px; min-height: 36px; background: var(--ui-color-surface-2, #f0f1f4); border-bottom: 1px solid var(--ui-color-border, #d9dbe0); }
.ui-grid-group-panel--dragover { outline: 2px dashed var(--ui-color-primary, #3f51b5); outline-offset: -2px; }
/* a11y: --ui-color-text-subtle е недефиниран → fallback #6b6f76 даваше само 4.11:1 на панел-бг
   #e6e8eb. Користи го пристапниот muted токен (≈4.9:1). */
.ui-grid-group-panel-hint { color: var(--ui-color-text-muted, #586470); font-size: 0.875rem; }
.ui-grid-group-indicator { display: inline-flex; align-items: center; gap: 4px; padding: 2px 6px; border-radius: var(--ui-border-radius, 4px); background: var(--ui-color-surface, #fff); border: 1px solid var(--ui-color-border, #d9dbe0); cursor: grab; }
.ui-grid-group-indicator:focus-visible { outline: 2px solid var(--ui-color-primary, #3f51b5); outline-offset: 1px; }
.ui-grid-group-indicator-title { font-weight: 600; }
.ui-grid-group-indicator-sort, .ui-grid-group-indicator-remove { background: none; border: none; cursor: pointer; font: inherit; color: var(--ui-color-text, #1b1b1f); padding: 0 2px; line-height: 1; }
.ui-grid-group-indicator-sort:hover, .ui-grid-group-indicator-remove:hover { color: var(--ui-color-primary, #3f51b5); }

/* Spreadsheet — merged cell anchor */
.ui-spreadsheet__cell--merged { z-index: 1; display: flex; align-items: center; overflow: hidden; }

/* Scheduler — current-time „now" line */
.ui-scheduler__now-line {
  position: absolute; left: 0; right: 0; height: 0;
  border-top: 2px solid var(--ui-color-danger, #d32f2f);
  pointer-events: none; z-index: var(--ui-z-0, 1);
}
.ui-scheduler__now-line::before {
  content: ""; position: absolute; left: 0; top: -4px;
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--ui-color-danger, #d32f2f);
}

/* Gantt — task editor dialog */
.ui-gantt-editor .ui-dialog__body { display: flex; flex-direction: column; gap: var(--ui-spacing-2); }
.ui-gantt-editor__field { display: flex; flex-direction: column; gap: var(--ui-spacing-1); font: 13px var(--ui-font); color: var(--ui-color-text); }
.ui-gantt-editor__field input { height: var(--ui-control-height-md); padding: 0 10px; border: 1px solid var(--ui-color-border); border-radius: var(--ui-radius); font: 14px var(--ui-font); color: var(--ui-color-text); background: #fff; box-sizing: border-box; }
.ui-gantt-editor__delete { margin-inline-end: auto; color: var(--ui-color-danger); }
.ui-gantt-editor__delete:hover { background: var(--ui-color-base-bg); }

/* TreeList — multi-column sort header affordance */
.ui-treelist-header-cell--sortable { cursor: pointer; user-select: none; }
.ui-treelist-header-cell--sortable:hover { background: var(--ui-color-base-bg, transparent); }
.ui-treelist-sort-icon { color: var(--ui-color-primary); font-size: 11px; margin-inline-start: 4px; }
.ui-treelist-sort-priority {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 14px; height: 14px; margin-inline-start: 2px; padding: 0 3px;
  border-radius: 999px; background: var(--ui-color-primary); color: #fff;
  font-size: 9px; font-weight: 600; line-height: 1; vertical-align: middle;
}

/* ── Мега-паритет круг 3 (2026-06-21): Scheduler event-editor, TreeList reorder, Chart Funnel ── */

/* Scheduler — event editor dialog */
.ui-scheduler-editor .ui-dialog__body { display: flex; flex-direction: column; gap: var(--ui-spacing-2); }
.ui-scheduler-editor__field { display: flex; flex-direction: column; gap: var(--ui-spacing-1); font: 13px var(--ui-font); color: var(--ui-color-text); }
.ui-scheduler-editor__field input { height: var(--ui-control-height-md); padding: 0 10px; border: 1px solid var(--ui-color-border); border-radius: var(--ui-radius); font: 14px var(--ui-font); color: var(--ui-color-text); background: #fff; box-sizing: border-box; }
.ui-scheduler-editor__delete { margin-inline-end: auto; color: var(--ui-color-danger); }
.ui-scheduler-editor__delete:hover { background: var(--ui-color-base-bg); }

/* TreeList — reorderable header drag-handle affordance (pointer-drag е Ф2+ преку JS) */
.ui-treelist-header-cell--reorderable { cursor: grab; }
.ui-treelist-header-cell--reorderable:active { cursor: grabbing; }

/* Chart — Funnel series segments */
.ui-chart__funnel-segment { stroke: var(--ui-surface, #fff); stroke-width: 1; stroke-linejoin: round; }
.ui-chart__funnel-segment:hover { opacity: .9; }

/* ════════════════════════════════════════════════════════════════════════
   ТЕМА-ПОЛИШ (2026-06-21): подобрен изглед на data-grid контролите (Grid/
   TreeList/PivotGrid/Spreadsheet) — контејнер-раб, header-лента, zebra-редови,
   hover. Сите бои преку --ui-* токени. Се додава по основните правила → win.
   ════════════════════════════════════════════════════════════════════════ */
/* Контејнер-раб одиме на самата ТАБЕЛА (.ui-grid div е shrink-collapsed; overflow:hidden на него
   го клипнуваше гридот). Табелата има вистинска ширина → видлив надворешен раб. */
.ui-grid-table { border: 1px solid var(--ui-color-border); }
.ui-grid-header-cell { background: var(--ui-color-header-bg, #e9ecf1); border-bottom: 2px solid var(--ui-color-border); }
.ui-grid-row:nth-of-type(even) { background: var(--ui-color-zebra-bg, #f6f8fb); }
.ui-grid-row:hover { background: var(--ui-color-row-hover-bg, #eaf1fe); }
.ui-grid-row--selected, .ui-grid-row--selected:hover { background: var(--ui-color-primary); color: #fff; }

/* TreeList — header-лента + zebra (контејнер-работ веќе постои) */
.ui-treelist-header { background: var(--ui-color-header-bg, #e9ecf1); }
.ui-treelist-row:nth-of-type(even) { background: var(--ui-color-zebra-bg, #f6f8fb); }
.ui-treelist-row:hover { background: var(--ui-color-row-hover-bg, #eaf1fe); }

/* PivotGrid — контејнер-раб + заглавие */
.ui-pivotgrid { border: 1px solid var(--ui-color-border); border-radius: var(--ui-radius); }
.ui-pivotgrid-col-header-cell, .ui-pivotgrid-row-header { background: var(--ui-color-header-bg, #e9ecf1); }

/* ── Round-E interop фичери (cssRules од агентите, централно merge-нати) ── */
/* Chart zoom/pan overlay */
.ui-chart__zoom-overlay { cursor: grab; }
.ui-chart__zoom-overlay:active { cursor: grabbing; }
/* Diagram zoom/pan */
.ui-diagram--pannable { cursor: grab; }
.ui-diagram--panning { cursor: grabbing; }
.ui-diagram--pannable .ui-diagram__shape-group { cursor: default; }
.ui-diagram--editable.ui-diagram--pannable .ui-diagram__shape-group { cursor: move; }
/* Gantt dependency arrows */
.ui-gantt-dependency { fill: none; stroke: var(--ui-color-border); stroke-width: 1.5px; }
.ui-gantt-dependency--critical { stroke: var(--ui-color-danger, #d93025); }
.ui-gantt-dependency-arrow { fill: var(--ui-color-border); }
/* DockManager splitter drag + pane focus */
.ui-dock__splitter--dragging { background: var(--ui-color-primary); }
.ui-dock__splitter:focus-visible, .ui-dock__pane--focused, .ui-dock__pane:focus-visible { outline: 2px solid var(--ui-color-primary); outline-offset: -2px; }
/* PivotGrid field chooser */
.ui-pivotgrid-fieldchooser { display: flex; flex-wrap: wrap; gap: var(--ui-spacing-2); padding: var(--ui-spacing-2); margin-block-end: var(--ui-spacing-2); background: var(--ui-color-surface); border: 1px solid var(--ui-color-border); border-radius: var(--ui-radius-md); color: var(--ui-color-text); }
.ui-pivotgrid-zone { flex: 1 1 140px; min-height: 64px; display: flex; flex-direction: column; gap: var(--ui-spacing-1); padding: var(--ui-spacing-2); background: var(--ui-color-base-bg); border: 1px dashed var(--ui-color-border); border-radius: var(--ui-radius-sm); }
.ui-pivotgrid-zone-caption { font-size: .85em; font-weight: 600; opacity: .8; }
.ui-pivotgrid-field { padding: var(--ui-spacing-1) var(--ui-spacing-2); background: var(--ui-color-surface); border: 1px solid var(--ui-color-border); border-radius: var(--ui-radius-sm); cursor: grab; user-select: none; }
.ui-pivotgrid-field:hover { background: var(--ui-color-hover-bg); }
.ui-pivotgrid-field:active { cursor: grabbing; }
.ui-pivotgrid-zone--rows, .ui-pivotgrid-zone--columns, .ui-pivotgrid-zone--measures { border-color: var(--ui-color-primary); }
/* TreeList column resize grip */
.ui-treelist-resize-grip { position: absolute; inset-block: 0; inset-inline-end: 0; inline-size: 6px; cursor: col-resize; user-select: none; touch-action: none; z-index: var(--ui-z-base, 0); }
.ui-treelist-resize-grip:hover, .ui-treelist--resizing .ui-treelist-resize-grip { background: var(--ui-color-border); opacity: .4; }
.ui-treelist--resizing { cursor: col-resize; user-select: none; }
/* StockChart indicator pane title */
.ui-stockchart__pane-title { font-size: 10px; font-weight: 500; }
/* FileManager toolbar commands + tiles */
.ui-filemanager-toolbar { display: flex; flex-wrap: wrap; gap: var(--ui-spacing-1); align-items: center; padding: var(--ui-spacing-1); border-bottom: 1px solid var(--ui-color-border); }
.ui-filemanager-command { display: inline-flex; align-items: center; gap: var(--ui-spacing-1); padding: var(--ui-spacing-1) var(--ui-spacing-2); background: transparent; color: var(--ui-color-text); border: 1px solid transparent; border-radius: var(--ui-radius); cursor: pointer; font: inherit; }
.ui-filemanager-command:hover:not(.ui-filemanager-command--disabled) { background: var(--ui-color-hover-bg); }
.ui-filemanager-command--disabled, .ui-filemanager-command:disabled { opacity: .5; cursor: default; pointer-events: none; }
.ui-filemanager-listview { display: flex; flex-wrap: wrap; gap: var(--ui-spacing-2); list-style: none; margin: 0; padding: var(--ui-spacing-2); }
.ui-filemanager-tile { display: flex; flex-direction: column; align-items: center; width: var(--ui-filemanager-tile-size, 96px); padding: var(--ui-spacing-2); border: 1px solid transparent; border-radius: var(--ui-radius); cursor: pointer; box-sizing: border-box; }
.ui-filemanager-tile:hover { background: var(--ui-color-hover-bg); }
.ui-filemanager-tile.ui-filemanager-item--selected { background: var(--ui-color-hover-bg); border-color: var(--ui-color-primary); }
.ui-filemanager-tile-icon { font-size: var(--ui-filemanager-tile-icon-size, 40px); }
.ui-filemanager-tile-name { margin-top: var(--ui-spacing-1); text-align: center; word-break: break-word; }

/* ── Workflow F фичери (CSS централно merge-нати) ── */
/* Spreadsheet — range/multi selection */
.ui-spreadsheet__cell--selected { background: var(--ui-color-row-hover-bg, #eaf1fe); }
.ui-spreadsheet__cell--selected.ui-spreadsheet__cell--active { background: var(--ui-color-row-hover-bg, #eaf1fe); }
/* Chart — Radar (polar/spider) серија */
.ui-chart__radar-ring { fill: none; stroke: var(--ui-color-border, #e0e0e0); stroke-width: 1; }
.ui-chart__radar-spoke { stroke: var(--ui-color-border, #e0e0e0); stroke-width: 1; }
.ui-chart__radar-category { fill: var(--ui-color-text, #3c4043); font-size: 11px; }
.ui-chart__radar-series { stroke-width: 2; stroke-linejoin: round; }
.ui-chart__radar-series:hover { fill-opacity: .35; }
.ui-chart__radar-point { stroke: var(--ui-color-surface, #fff); stroke-width: 1; }
/* Scheduler — resources/grouping (по ресурс под-колони) */
.ui-scheduler-resource-head { text-align: center; padding: var(--ui-spacing-1) var(--ui-spacing-2); font-size: .85rem; border-top: 3px solid var(--ui-scheduler-resource-color, var(--ui-color-border)); border-right: 1px solid var(--ui-color-border); color: var(--ui-color-text); }
.ui-scheduler-col--resource { position: relative; border-right: 1px solid var(--ui-color-border); }
.ui-scheduler-col--resource .ui-scheduler-event { border-left: 3px solid var(--ui-scheduler-resource-color, var(--ui-color-primary)); }

/* ════════════════════════════════════════════════════════════════════════
   ТЕМИ (2026-06-22): комплетирање на dark + нова high-contrast тема.
   Секоја тема-класа е САМОСТОЕН целосен token-сет (UiRoot аплицира една класа).
   ════════════════════════════════════════════════════════════════════════ */
/* Dark — дополни ги alias/spacing/radius токените што недостасуваа (за standalone). */
.ui-theme-dark {
  --ui-control-height: var(--ui-control-height-md);
  --ui-radius-md: var(--ui-radius);
  --ui-radius-sm: 3px;
  --ui-row-height: 36px; --ui-row-height-sm: 28px; --ui-row-height-lg: 44px;
  --ui-spacing-1: 4px; --ui-spacing-2: 8px; --ui-spacing-4: 16px;
  --ui-anim-duration: .2s;
  --ui-focus-ring: 2px solid var(--ui-color-primary);
  --ui-font-body: var(--ui-font);
  --ui-color-base: var(--ui-color-base-bg);
  --ui-color-surface: #20242a;
  --ui-color-surface-2: var(--ui-color-base-bg-hover);
  --ui-color-hover-bg: var(--ui-color-base-bg-hover);
  --ui-color-muted: var(--ui-color-disabled);
  --ui-color-text-muted: #9aa3ad;
  --ui-color-danger: #ff6b6b;
  --ui-color-header-bg: #343a42;
  --ui-color-zebra-bg: #2e333a;
  --ui-color-row-hover-bg: #1f3a5f;
}

/* High-contrast — максимален контраст (црн текст/рамки на бело, силен фокус-прстен). WCAG AAA. */
.ui-theme-hc {
  /* Бои */
  --ui-color-primary: #0033cc;
  --ui-color-primary-hover: #0022aa;
  --ui-color-base-bg: #ffffff;
  --ui-color-base-bg-hover: #d7d7d7;
  --ui-color-text: #000000;
  --ui-color-text-on-primary: #ffffff;
  --ui-color-border: #000000;
  --ui-color-disabled: #595959;
  --ui-color-danger: #b00000;
  /* Типографија / размери (ист структурен сет како default) */
  --ui-font: "Segoe UI", system-ui, sans-serif;
  --ui-radius: 6px; --ui-gap: 6px;
  --ui-control-height-sm: 28px; --ui-control-height-md: 36px; --ui-control-height-lg: 44px;
  --ui-control-height: var(--ui-control-height-md);
  --ui-radius-md: var(--ui-radius); --ui-radius-sm: 3px;
  --ui-row-height: 36px; --ui-row-height-sm: 28px; --ui-row-height-lg: 44px;
  --ui-spacing-1: 4px; --ui-spacing-2: 8px; --ui-spacing-4: 16px;
  --ui-anim-duration: .2s;
  --ui-focus-ring: 3px solid #0033cc;
  --ui-font-body: var(--ui-font);
  /* Алиаси/полиш */
  --ui-color-base: var(--ui-color-base-bg);
  --ui-color-surface: #ffffff;
  --ui-color-surface-2: #e6e6e6;
  --ui-color-hover-bg: #d7d7d7;
  --ui-color-muted: #595959;
  --ui-color-text-muted: #2a2a2a;
  --ui-color-header-bg: #c8c8c8;
  --ui-color-zebra-bg: #f0f0f0;
  --ui-color-row-hover-bg: #cce0ff;
  /* z-index (темата поседува) */
  --ui-z-base: 0; --ui-z-sticky: 100; --ui-z-dropdown: 1000; --ui-z-overlay: 1040;
  --ui-z-modal: 1050; --ui-z-popover: 1060; --ui-z-tooltip: 1070; --ui-z-notification: 1080;
}
/* High-contrast засилува рамки и фокус глобално за подобра видливост. */
.ui-theme-hc .ui-grid-table, .ui-theme-hc .ui-grid-table th, .ui-theme-hc .ui-grid-table td { border-color: #000; }
.ui-theme-hc *:focus-visible { outline: 3px solid #0033cc; outline-offset: 1px; }

/* ── RTL (dir=rtl на <UiRoot>) ── повеќето компоненти користат логички CSS својства
   (inset-inline/margin-inline/padding-inline) → автоматски се огледуваат. Тука се само
   експлицитните поправки за елементи со физички својства или насочени икони/SVG. */
.ui-root[dir="rtl"] .ui-icon-directional > svg { transform: scaleX(-1); }
.ui-root[dir="rtl"] .ui-grid-group-indicator,
.ui-root[dir="rtl"] .ui-breadcrumb__separator { transform: scaleX(-1); }
/* SVG canvas компоненти (Chart/Diagram/Gantt/StockChart/Map) задржуваат LTR координатен
   систем во rtl (data-viz конвенција) — текстот е логички, геометријата не се огледува. */
.ui-root[dir="rtl"] .ui-chart, .ui-root[dir="rtl"] .ui-diagram,
.ui-root[dir="rtl"] .ui-gantt, .ui-root[dir="rtl"] .ui-stockchart { direction: ltr; }

/* ── A11y: видлив focus-индикатор за новите интерактивни (roving) елементи ── */
.ui-pivotgrid:focus-visible, .ui-pivotgrid-cell:focus-visible { outline: 2px solid var(--ui-color-primary, currentColor); outline-offset: -2px; }
.ui-diagram__connection-group:focus-visible { outline: 2px solid var(--ui-color-primary, currentColor); }
.ui-pivotgrid-expander:focus-visible, .ui-pivotgrid-sort:focus-visible { outline: 2px solid var(--ui-color-primary, currentColor); outline-offset: 1px; }


/* ============================================================================
   Telerik-parity rounds (batches 7-8 + mega rounds 1-3) - feature modifier classes
   Auto-merged from per-component agent cssRules. New modifier/feature classes only;
   base-class selectors that already exist above are intentionally harmless duplicates.
   ============================================================================ */
.ui-animation--exit-reverse.ui-animation--hidden { /* Apply reversed exit transform  e.g. for SlideDown: slide up on exit */ animation-direction: reverse; } .ui-animation--exit-reverse.ui-animation--hidden.ui-animation--anim-slide-down { transform: translateY(-100%); } .ui-animation--exit-reverse.ui-animation--hidden.ui-animation--anim-slide-up { transform: translateY(100%); } .ui-animation--exit-reverse.ui-animation--hidden.ui-animation--anim-slide-left { transform: translateX(100%); } .ui-animation--exit-reverse.ui-animation--hidden.ui-animation--anim-slide-right { transform: translateX(-100%); }

.ui-chart-wizard__header { padding: var(--ui-spacing-md, 0.75rem); border-bottom: 1px solid var(--ui-border-color, #dee2e6); }
.ui-chart-wizard__footer-custom { padding: var(--ui-spacing-md, 0.75rem); border-top: 1px solid var(--ui-border-color, #dee2e6); }
.ui-chart-wizard__title-config { display: grid; grid-template-columns: auto 1fr; gap: var(--ui-spacing-sm, 0.5rem) var(--ui-spacing-md, 0.75rem); align-items: center; padding: var(--ui-spacing-md, 0.75rem); }
.ui-chart-wizard__title-config-label { font-size: var(--ui-font-size-sm, 0.875rem); color: var(--ui-color-muted, #6c757d); }
.ui-chart-wizard__title-input, .ui-chart-wizard__subtitle-input { width: 100%; padding: var(--ui-spacing-xs, 0.25rem) var(--ui-spacing-sm, 0.5rem); border: 1px solid var(--ui-border-color, #dee2e6); border-radius: var(--ui-border-radius, 0.25rem); }
.ui-chart-wizard__legend-visible, .ui-chart-wizard__stacked { width: 1rem; height: 1rem; cursor: pointer; }
.ui-chart-wizard__legend-position { width: 100%; padding: var(--ui-spacing-xs, 0.25rem); border: 1px solid var(--ui-border-color, #dee2e6); border-radius: var(--ui-border-radius, 0.25rem); }
.ui-chart-wizard__actions { display: flex; gap: var(--ui-spacing-sm, 0.5rem); padding: var(--ui-spacing-md, 0.75rem); justify-content: flex-end; border-top: 1px solid var(--ui-border-color, #dee2e6); }
.ui-chart-wizard__apply-btn { padding: var(--ui-spacing-xs, 0.25rem) var(--ui-spacing-md, 0.75rem); background: var(--ui-color-primary, #0d6efd); color: #fff; border: none; border-radius: var(--ui-border-radius, 0.25rem); cursor: pointer; }
.ui-chart-wizard__apply-btn:hover { background: var(--ui-color-primary-hover, #0b5ed7); }
.ui-chart-wizard__reset-btn { padding: var(--ui-spacing-xs, 0.25rem) var(--ui-spacing-md, 0.75rem); background: transparent; color: var(--ui-color-muted, #6c757d); border: 1px solid var(--ui-border-color, #dee2e6); border-radius: var(--ui-border-radius, 0.25rem); cursor: pointer; }
.ui-chart-wizard__reset-btn:hover { background: var(--ui-color-surface-hover, #f8f9fa); }

.ui-tooltip--sm { font-size: 0.75rem; padding: 2px 6px; }
.ui-tooltip--lg { font-size: 1rem; padding: 8px 14px; }
.ui-tooltip--anim-fade { opacity: 0; transition: opacity var(--ui-tooltip-show-delay, 100ms) ease; }
.ui-tooltip-host:hover .ui-tooltip--anim-fade,
.ui-tooltip-host:focus-within .ui-tooltip--anim-fade,
.ui-tooltip-host--open .ui-tooltip--anim-fade { opacity: 1; }
.ui-tooltip--anim-slide { transform: translateY(-4px); opacity: 0; transition: opacity var(--ui-tooltip-show-delay, 100ms) ease, transform var(--ui-tooltip-show-delay, 100ms) ease; }
.ui-tooltip-host:hover .ui-tooltip--anim-slide,
.ui-tooltip-host:focus-within .ui-tooltip--anim-slide,
.ui-tooltip-host--open .ui-tooltip--anim-slide { opacity: 1; transform: translateY(0); }

.ui-popover__content { max-height: var(--ui-popover-max-height, none); } .ui-popover__content--align-start { align-self: flex-start; } .ui-popover__content--align-center { align-self: center; } .ui-popover__content--align-end { align-self: flex-end; }

.ui-splitter--second-collapsed .ui-splitter__pane--second { flex-basis: 0; overflow: hidden; }
.ui-splitter__toggle--first { order: -1; }
.ui-splitter__toggle--second { order: 1; }

.ui-window--sm { width: 300px !important; max-height: 400px; }
.ui-window--md { width: 560px !important; max-height: 600px; }
.ui-window--lg { width: 800px !important; max-height: 85vh; }

.ui-dock__tab-close { display: inline-flex; align-items: center; justify-content: center; padding: 0 4px; border: none; background: transparent; cursor: pointer; color: inherit; font-size: 0.75rem; line-height: 1; opacity: 0.6; margin-left: 2px; border-radius: 2px; } .ui-dock__tab-close:hover { opacity: 1; background: var(--ui-color-hover-bg, rgba(0,0,0,.08)); }

.ui-progressbar--primary .ui-progressbar__fill { background-color: var(--ui-color-primary, #0d6efd); }
.ui-progressbar--secondary .ui-progressbar__fill { background-color: var(--ui-color-secondary, #6c757d); }
.ui-progressbar--success .ui-progressbar__fill { background-color: var(--ui-color-success, #198754); }
.ui-progressbar--warning .ui-progressbar__fill { background-color: var(--ui-color-warning, #ffc107); }
.ui-progressbar--error .ui-progressbar__fill { background-color: var(--ui-color-error, #dc3545); }
.ui-progressbar--info .ui-progressbar__fill { background-color: var(--ui-color-info, #0dcaf0); }
.ui-progressbar--success { outline: 2px solid var(--ui-color-success, #198754); outline-offset: 1px; }
.ui-progressbar__fill { transition-property: width, height; transition-timing-function: ease; }

.ui-rating { display: flex; align-items: center; gap: 0.25rem; }
.ui-rating__label { font-size: 0.875rem; color: var(--ui-color-subtle, #6b7280); white-space: nowrap; }

/*  UiBadge: OffsetX/OffsetY custom-property support (Feature: OffsetX/OffsetY) 
   Add these rules inside the badge block in ui-blazor.css.
   The custom properties are injected via BuildRootStyle when OffsetX/OffsetY are set.
   They shift the badge relative to its already-translated corner anchor.
   Default fallback is 0px so no offset when the properties are absent. */

.ui-badge--positioned {
  position: absolute;
  --ui-badge-offset-x: 0px;
  --ui-badge-offset-y: 0px;
}

/* Edge (default)  half-in half-out of the parent corner */
.ui-badge--edge.ui-badge--top-end {
  top: 0; right: 0;
  transform: translate(calc(50% + var(--ui-badge-offset-x)), calc(-50% + var(--ui-badge-offset-y)));
}
.ui-badge--edge.ui-badge--top-start {
  top: 0; left: 0;
  transform: translate(calc(-50% + var(--ui-badge-offset-x)), calc(-50% + var(--ui-badge-offset-y)));
}
.ui-badge--edge.ui-badge--bottom-end {
  bottom: 0; right: 0;
  transform: translate(calc(50% + var(--ui-badge-offset-x)), calc(50% + var(--ui-badge-offset-y)));
}
.ui-badge--edge.ui-badge--bottom-start {
  bottom: 0; left: 0;
  transform: translate(calc(-50% + var(--ui-badge-offset-x)), calc(50% + var(--ui-badge-offset-y)));
}

/* Inside  fully within parent bounds */
.ui-badge--inside.ui-badge--top-end {
  top: calc(0px + var(--ui-badge-offset-y)); right: calc(0px + var(--ui-badge-offset-x));
  transform: none;
}
.ui-badge--inside.ui-badge--top-start {
  top: calc(0px + var(--ui-badge-offset-y)); left: calc(0px + var(--ui-badge-offset-x));
  transform: none;
}
.ui-badge--inside.ui-badge--bottom-end {
  bottom: calc(0px + var(--ui-badge-offset-y)); right: calc(0px + var(--ui-badge-offset-x));
  transform: none;
}
.ui-badge--inside.ui-badge--bottom-start {
  bottom: calc(0px + var(--ui-badge-offset-y)); left: calc(0px + var(--ui-badge-offset-x));
  transform: none;
}

/* Outside  fully outside parent bounds */
.ui-badge--outside.ui-badge--top-end {
  top: 0; right: 0;
  transform: translate(calc(100% + var(--ui-badge-offset-x)), calc(-100% + var(--ui-badge-offset-y)));
}
.ui-badge--outside.ui-badge--top-start {
  top: 0; left: 0;
  transform: translate(calc(-100% + var(--ui-badge-offset-x)), calc(-100% + var(--ui-badge-offset-y)));
}
.ui-badge--outside.ui-badge--bottom-end {
  bottom: 0; right: 0;
  transform: translate(calc(100% + var(--ui-badge-offset-x)), calc(100% + var(--ui-badge-offset-y)));
}
.ui-badge--outside.ui-badge--bottom-start {
  bottom: 0; left: 0;
  transform: translate(calc(-100% + var(--ui-badge-offset-x)), calc(100% + var(--ui-badge-offset-y)));
}

/* Icon slot inside badge */
.ui-badge .ui-icon,
.ui-badge svg {
  display: inline-flex;
  align-items: center;
  margin-inline-end: 3px;
  flex-shrink: 0;
}

.ui-avatar { position: relative; display: inline-flex; align-items: center; justify-content: center; }
.ui-avatar__badge { position: absolute; top: 0; right: 0; transform: translate(50%, -50%); display: inline-flex; align-items: center; justify-content: center; min-width: 1.25em; height: 1.25em; padding: 0 0.35em; border-radius: 9999px; background-color: var(--ui-color-error, #dc3545); color: var(--ui-color-on-error, #fff); font-size: 0.65em; font-weight: 600; line-height: 1; z-index: var(--ui-z-overlay, 100); }

.ui-skeleton-container { display: flex; } .ui-skeleton-container--vertical { flex-direction: column; } .ui-skeleton-container--horizontal { flex-direction: row; flex-wrap: wrap; } .ui-skeleton-item { display: contents; }

.ui-fab__icon { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; } .ui-fab .ui-icon.ui-fab__icon { color: inherit; }

.ui-btn--rounded-none { border-radius: 0; }
.ui-btn--rounded-sm   { border-radius: var(--ui-radius-sm, 2px); }
.ui-btn--rounded-md   { border-radius: var(--ui-radius, 4px); }
.ui-btn--rounded-lg   { border-radius: var(--ui-radius-lg, 8px); }
.ui-btn--rounded-full { border-radius: 9999px; }
/* Selected state hover: visual feedback distinct from plain active */
.ui-toggle.ui-btn--active:hover { opacity: 0.88; }

.ui-chip__avatar { display: inline-flex; align-items: center; margin-inline-end: var(--ui-chip-avatar-gap, 0.25rem); }

.ui-validation-tooltip--warning {
  --ui-vtt-bg: var(--ui-color-warning, #f59e0b);
  --ui-vtt-border-color: var(--ui-color-warning-dark, #d97706);
  --ui-vtt-color: var(--ui-color-warning-text, #fff);
}

.ui-validation-tooltip--success {
  --ui-vtt-bg: var(--ui-color-success, #10b981);
  --ui-vtt-border-color: var(--ui-color-success-dark, #059669);
  --ui-vtt-color: var(--ui-color-success-text, #fff);
}

/* info is already emitted by auto-derive; explicit rule ensures it works when ThemeColor=Info overrides an error state */
.ui-validation-tooltip--info {
  --ui-vtt-bg: var(--ui-color-info, #3b82f6);
  --ui-vtt-border-color: var(--ui-color-info-dark, #2563eb);
  --ui-vtt-color: var(--ui-color-info-text, #fff);
}

/* Title (header) section above icon+content */
.ui-validation-tooltip__title {
  display: block;
  font-weight: 600;
  padding-bottom: 4px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.25);
  margin-bottom: 6px;
}

/* Footer section below content */
.ui-validation-tooltip__footer {
  display: block;
  padding-top: 4px;
  border-top: 1px solid rgba(255, 255, 255, 0.25);
  margin-top: 6px;
  font-size: 0.875em;
  opacity: 0.85;
}

.ui-gantt-bar--readonly { cursor: default; opacity: 0.65; pointer-events: none; }

.ui-grid-cell[style*="text-align:right"] { text-align: right; } .ui-grid-cell[style*="text-align:center"] { text-align: center; } .ui-grid-cell[style*="text-align:left"] { text-align: left; }

.ui-spreadsheet__cell--has-comment {
  position: relative;
}
.ui-spreadsheet__cell--has-comment::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 6px 6px 0;
  border-color: transparent var(--ui-color-warning, #e8a000) transparent transparent;
  pointer-events: none;
}
a.ui-cell-hyperlink {
  color: var(--ui-color-link, #0563c1);
  text-decoration: underline;
  cursor: pointer;
}
a.ui-cell-hyperlink:hover {
  color: var(--ui-color-link-hover, #0041a8);
}"

/* Annotation toolbar toggle */
.ui-pdf-viewer__annotations-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--ui-space-1, 4px);
  border: none;
  background: transparent;
  cursor: pointer;
  border-radius: var(--ui-radius-sm, 4px);
  color: var(--ui-color-on-surface, inherit);
}
.ui-pdf-viewer__annotations-toggle:hover:not(:disabled) {
  background: var(--ui-color-surface-hover, rgba(0,0,0,.08));
}
.ui-pdf-viewer__annotations-toggle--active {
  background: var(--ui-color-primary-subtle, rgba(0,0,0,.12));
  color: var(--ui-color-primary, #1976d2);
}

.ui-grid-toolbar { display: flex; align-items: center; gap: 8px; padding: 6px 10px; background: var(--ui-color-surface-2, #f0f1f4); border-bottom: 1px solid var(--ui-color-border, #d9dbe0); min-height: 38px; } .ui-grid-row--alt { background: var(--ui-color-zebra-bg, #f6f8fb); } .ui-grid-row--alt:hover { background: var(--ui-color-row-hover-bg, #eaf1fe); } .ui-grid-row--selected.ui-grid-row--alt, .ui-grid-row--selected.ui-grid-row--alt:hover { background: var(--ui-color-primary); color: #fff; }

/* Work-hour / non-work slot highlight (Feature 3: WorkDayStart/WorkDayEnd) */
.ui-scheduler-cell.ui-scheduler-slot--nonwork {
    background-color: var(--ui-scheduler-nonwork-bg, rgba(0, 0, 0, 0.04));
}

.ui-chart__minor-grid-line { stroke: var(--ui-color-border, #e0e0e0); stroke-width: 0.5; stroke-dasharray: 2 3; opacity: 0.6; }

.ui-gantt-tl-sortable { cursor: pointer; user-select: none; }
.ui-gantt-tl-sorted--asc .ui-gantt-sort-indicator,
.ui-gantt-tl-sorted--desc .ui-gantt-sort-indicator { display: inline-block; margin-inline-start: 4px; font-size: 0.75em; }
.ui-gantt-tl-check-header,
.ui-gantt-tl-check-cell { width: 2.25rem; text-align: center; padding: 0; }
.ui-gantt-row-checkbox { cursor: pointer; accent-color: var(--ui-color-primary, #0078d4); }
.ui-gantt-tl-row--selected { background-color: var(--ui-gantt-selected-bg, rgba(0,120,212,0.12)); }

.ui-spreadsheet__row--page-break { border-top: 2px dashed #4b9afa; } .ui-spreadsheet__header--page-break-col { border-left: 2px dashed #4b9afa; } .ui-spreadsheet__cell--page-break-col { border-left: 2px dashed #4b9afa; } .ui-spreadsheet__cell--non-print { opacity: 0.4; background-color: rgba(128, 128, 128, 0.08); }

.ui-grid-checkbox-header { width: 40px; text-align: center; } .ui-grid-checkbox-cell { width: 40px; text-align: center; } .ui-grid-checkbox-select-all, .ui-grid-row-checkbox { cursor: pointer; }

.ui-scheduler { position: relative; } .ui-scheduler-loader { position: absolute; inset: 0; z-index: var(--ui-z-popup, 1050); display: flex; align-items: center; justify-content: center; background: rgba(255,255,255,0.6); pointer-events: all; } .ui-scheduler-loader__spinner { width: 2.5rem; height: 2.5rem; border: 3px solid var(--ui-color-primary, var(--ui-primary, #2680eb)); border-top-color: transparent; border-radius: 50%; animation: ui-scheduler-spin 0.75s linear infinite; } @keyframes ui-scheduler-spin { to { transform: rotate(360deg); } } .ui-scheduler-editor__description { width: 100%; min-height: 4.5em; resize: vertical; font: inherit; padding: 0.25rem 0.5rem; border: 1px solid var(--ui-border, #d3d3d3); border-radius: var(--ui-radius, 2px); background: var(--ui-surface, #fff); color: var(--ui-text, #333); }

.ui-spreadsheet__cell--has-validation::after { content: ''; position: absolute; right: 2px; top: 50%; transform: translateY(-50%); width: 0; height: 0; border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 5px solid var(--ui-color-primary, #0d6efd); pointer-events: none; } .ui-spreadsheet__cell--has-validation { position: relative; } .ui-spreadsheet__cell--autofilter::after { content: '\25BC'; font-size: 8px; position: absolute; right: 3px; top: 50%; transform: translateY(-50%); color: var(--ui-color-muted, #6c757d); pointer-events: none; } .ui-spreadsheet__cell--autofilter { position: relative; } .ui-spreadsheet__cell--filter-active::after { content: '\25BC'; font-size: 8px; position: absolute; right: 3px; top: 50%; transform: translateY(-50%); color: var(--ui-color-primary, #0d6efd); pointer-events: none; } .ui-spreadsheet__cell--filter-active { position: relative; }

.ui-pivotgrid-row-headers { min-width: var(--ui-pg-rowhdr-min-w, auto); } .ui-pivotgrid-col-headers { max-width: var(--ui-pg-col-max-w, none); }


/* Mega round 4 - feature modifier classes */
.ui-grid-group-subtotal-row { background: var(--ui-color-surface-alt, #f5f5f5); font-weight: 600; border-top: 1px solid var(--ui-border-color, #ddd); } .ui-grid-group-subtotal-cell { padding: 4px 8px; color: var(--ui-color-text-secondary, #555); } .ui-grid-group-subtotal-row--level-0 { } .ui-grid-group-subtotal-row--level-1 { padding-left: 24px; } .ui-grid-group-subtotal-row--level-2 { padding-left: 48px; }

.ui-pivotgrid-cell[style] { /* inline style from CellStyleFunc is applied directly via attribute */ }

.ui-filemanager-col--sortable { cursor: pointer; user-select: none; } .ui-filemanager-col--sortable:hover { background-color: var(--ui-color-hover, rgba(0,0,0,.04)); } .ui-filemanager-col--sort-active { font-weight: 600; } .ui-filemanager-col--sort-active::after { content: ''; display: inline-block; margin-left: 4px; border: 4px solid transparent; } .ui-filemanager-col--sortable[aria-sort='ascending']::after { border-bottom-color: currentColor; border-top: none; } .ui-filemanager-col--sortable[aria-sort='descending']::after { border-top-color: currentColor; border-bottom: none; }


/* Mega round 5 - feature modifier classes */
.ui-pdf-viewer__pager-input { width: 3.5rem; text-align: center; border: 1px solid var(--ui-color-border, #ccc); border-radius: var(--ui-border-radius, 4px); padding: 2px 4px; font: inherit; background: var(--ui-color-surface, #fff); color: var(--ui-color-text, #222); } .ui-pdf-viewer__pager-input:disabled { opacity: 0.5; cursor: not-allowed; } .ui-pdf-viewer__pager-input[type=number]::-webkit-inner-spin-button, .ui-pdf-viewer__pager-input[type=number]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; } .ui-pdf-viewer__pager-input[type=number] { -moz-appearance: textfield; } .ui-pdf-viewer__pager-indicator { display: none; } .ui-pdf-viewer__selection-toggle--pan { background: var(--ui-color-primary-subtle, rgba(var(--ui-color-primary-rgb, 0 90 200) / .12)); } .ui-pdf-viewer__search-toggle--active { background: var(--ui-color-primary-subtle, rgba(var(--ui-color-primary-rgb, 0 90 200) / .12)); } .ui-pdf-viewer__loader { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.75rem; background: rgba(var(--ui-color-surface-rgb, 255 255 255) / .85); z-index: var(--ui-z-overlay, 1040); } .ui-pdf-viewer__loader-spinner { display: inline-block; width: 2rem; height: 2rem; border: 3px solid var(--ui-color-border, #ccc); border-top-color: var(--ui-color-primary, #005ac8); border-radius: 50%; animation: ui-pdf-spinner 0.75s linear infinite; } @keyframes ui-pdf-spinner { to { transform: rotate(360deg); } } .ui-pdf-viewer__loader-message { font-size: 0.875rem; color: var(--ui-color-text-secondary, #555); }

.ui-treelist-col--locked { position: sticky; z-index: 1; background: inherit; } .ui-treelist-header .ui-treelist-col--locked { z-index: 2; }

/* Round5 Feature 1: Inline cell editor input */
.ui-gantt-cell-editor {
  width: 100%;
  box-sizing: border-box;
  border: 1px solid var(--ui-color-primary, #0078d4);
  border-radius: 2px;
  padding: 0 4px;
  height: calc(var(--ui-gantt-row-height) - 4px);
  font: inherit;
  background: var(--ui-color-bg, #fff);
  color: var(--ui-color-text, inherit);
  outline: 2px solid var(--ui-color-primary, #0078d4);
  outline-offset: -1px;
}

/* Round5 Feature 2: Locked column sticky cell */
.ui-gantt-tl-cell--locked {
  position: sticky;
  left: 0;
  z-index: 1;
  background: var(--ui-color-surface, #fff);
}

/* Round5 Feature 2: Locked column sticky header */
.ui-gantt-tl-header-cell--locked {
  position: sticky;
  left: 0;
  z-index: 2;
  background: var(--ui-color-surface-header, #f3f3f3);
}

.ui-filemanager-statusbar { display: flex; align-items: center; gap: 0.75rem; padding: 0.25rem 0.75rem; border-top: 1px solid var(--ui-border-color, #e0e0e0); font-size: 0.8125rem; color: var(--ui-text-muted, #666); background: var(--ui-surface, #fff); min-height: 1.75rem; } .ui-filemanager-statusbar__items { flex: 1; } .ui-filemanager-statusbar__selected { color: var(--ui-text-primary, #333); font-weight: 500; }

.ui-spreadsheet__cell[style*="font-weight:bold"] { } /* bold rendered via inline style  no additional CSS needed */ .ui-spreadsheet__cell[style*="background-color"] { } /* background/foreground/border applied via inline style  no dedicated CSS class required */


/* Mega round 6 - feature modifier classes */
.ui-pdf-viewer__viewmode-toggle { display: inline-flex; align-items: center; justify-content: center; padding: var(--ui-space-1, 4px) var(--ui-space-2, 8px); border: 1px solid var(--ui-border-color, #ccc); border-radius: var(--ui-border-radius, 4px); background: transparent; cursor: pointer; color: var(--ui-text, #333); } .ui-pdf-viewer__viewmode-toggle:disabled { opacity: 0.5; cursor: not-allowed; } .ui-pdf-viewer__viewmode-toggle--single { background: var(--ui-primary-subtle, #e8f0fe); border-color: var(--ui-primary, #1a73e8); color: var(--ui-primary, #1a73e8); } .ui-pdf-viewer__zoom-select { height: var(--ui-input-height, 28px); padding: 0 var(--ui-space-2, 8px); border: 1px solid var(--ui-border-color, #ccc); border-radius: var(--ui-border-radius, 4px); background: var(--ui-surface, #fff); color: var(--ui-text, #333); cursor: pointer; font-size: var(--ui-font-size-sm, 13px); } .ui-pdf-viewer__zoom-select:disabled { opacity: 0.5; cursor: not-allowed; }


/* Mega round 7 - feature modifier classes */
.ui-scheduler-editor--inline { position: relative; background: var(--ui-color-surface, #fff); border: 1px solid var(--ui-color-border, #ddd); border-radius: var(--ui-border-radius, 4px); box-shadow: var(--ui-shadow-md, 0 2px 8px rgba(0,0,0,.15)); padding: 0; z-index: var(--ui-z-popup, 1050); } .ui-scheduler-editor--inline .ui-scheduler-editor__header { display: flex; align-items: center; justify-content: space-between; padding: .5rem .75rem; border-bottom: 1px solid var(--ui-color-border, #ddd); } .ui-scheduler-editor--inline .ui-scheduler-editor__title-text { font-weight: 600; } .ui-scheduler-editor--inline .ui-scheduler-editor__close { background: none; border: none; cursor: pointer; font-size: 1.25rem; line-height: 1; padding: 0 .25rem; color: var(--ui-color-text-muted, #666); } .ui-scheduler-editor--inline .ui-scheduler-editor__body { padding: .75rem; } .ui-scheduler-editor--inline .ui-scheduler-editor__footer { padding: .5rem .75rem; border-top: 1px solid var(--ui-color-border, #ddd); display: flex; gap: .5rem; justify-content: flex-end; }

.ui-pdf-viewer__status-region { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; }

/* Column menu  header cell needs relative positioning when menu is active */
th.ui-treelist-header-cell--has-menu {
  position: relative;
}

/* Menu trigger button  vertically centered, hidden until hover/open */
.ui-treelist-col-menu-btn {
  position: absolute;
  top: 50%;
  right: 4px;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  padding: 0;
  border: none;
  border-radius: var(--ui-border-radius, 3px);
  background: transparent;
  color: var(--ui-color-on-surface, inherit);
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.15s;
  font-size: 14px;
  line-height: 1;
}
th.ui-treelist-header-cell--has-menu:hover .ui-treelist-col-menu-btn,
.ui-treelist-col-menu-btn--active,
.ui-treelist-col-menu-btn:focus-visible {
  opacity: 1;
}
.ui-treelist-col-menu-btn--active {
  background: var(--ui-color-primary-subtle, rgba(0,0,0,.08));
}

/* Popup container  floats below the trigger button */
.ui-treelist-col-menu {
  position: absolute;
  top: 100%;
  right: 0;
  z-index: var(--ui-z-dropdown, 1000);
  min-width: 160px;
  padding: 4px 0;
  border: 1px solid var(--ui-color-border, #dee2e6);
  border-radius: var(--ui-border-radius, 3px);
  background: var(--ui-color-surface, #fff);
  box-shadow: 0 4px 12px rgba(0,0,0,.12);
}

/* Individual menu items */
.ui-treelist-col-menu-item {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  padding: 6px 12px;
  border: none;
  background: transparent;
  color: var(--ui-color-on-surface, inherit);
  font-size: 0.875rem;
  text-align: left;
  cursor: pointer;
  white-space: nowrap;
}
.ui-treelist-col-menu-item:hover,
.ui-treelist-col-menu-item:focus-visible {
  background: var(--ui-color-primary-subtle, rgba(0,0,0,.06));
  outline: none;
}
label.ui-treelist-col-menu-item {
  cursor: pointer;
}

/* Horizontal separator between menu sections */
.ui-treelist-col-menu-separator {
  height: 1px;
  margin: 4px 0;
  background: var(--ui-color-border, #dee2e6);
}

.ui-gantt-tl-header-cell { position: relative; } .ui-gantt-col-menu-btn { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); background: none; border: none; cursor: pointer; padding: 0 2px; font-size: 14px; color: var(--ui-color-subtle, #666); line-height: 1; } .ui-gantt-col-menu-btn:hover, .ui-gantt-col-menu-btn--open { color: var(--ui-color-primary, #0078d4); } .ui-gantt-col-menu { position: absolute; top: 100%; right: 0; z-index: var(--ui-z-dropdown, 1000); background: var(--ui-color-surface, #fff); border: 1px solid var(--ui-color-border, #ccc); border-radius: 4px; box-shadow: 0 2px 8px rgba(0,0,0,.15); min-width: 140px; display: flex; flex-direction: column; } .ui-gantt-col-menu-item { background: none; border: none; text-align: left; padding: 6px 12px; cursor: pointer; font-size: 13px; } .ui-gantt-col-menu-item:hover { background: var(--ui-color-hover, rgba(0,0,0,.04)); }


/* Round 8 (broad 15) - feature modifier classes */
".ui-scheduler-month-weeknum-head { /* empty header above week-number column */ grid-column: 1; }
.ui-scheduler-month-weeknum { /* week-number cell per row */ grid-column: 1; display: flex; align-items: flex-start; justify-content: center; font-size: 0.75em; color: var(--ui-color-subtle, #888); padding: 2px 4px; }
.ui-scheduler-month-header--weeknumbers { /* header row with extra first column for week numbers */ grid-template-columns: var(--ui-scheduler-weeknum-col-width, 2rem) repeat(7, 1fr); }
.ui-scheduler-month-grid--weeknumbers { /* grid body with extra week-number column */ grid-template-columns: var(--ui-scheduler-weeknum-col-width, 2rem) repeat(7, 1fr); }
.ui-scheduler-btn--disabled { opacity: 0.4; cursor: not-allowed; pointer-events: none; }"

.ui-gantt-tl-row { /* user-supplied RowClass values are appended here by the RowClass callback; no new built-in modifier classes added */ } /* ondblclick on tr triggers OnRowDoubleClick; the ui-gantt-tl-row class composition now includes optional RowClass(item) result */ /* ExpandedItems state change has no CSS implication  purely C# state */

".ui-pivotgrid-empty { display: flex; align-items: center; justify-content: center; padding: var(--ui-spacing-4, 1rem); color: var(--ui-color-subtle-text, #666); font-size: var(--ui-font-size-sm, 0.875rem); } .ui-pivotgrid-cell .r8-cell-template { display: contents; }"

/* Add to ui-blazor.css  ui-editor-label block */
.ui-editor-label {
  display: block;
  margin-bottom: var(--ui-space-1, 4px);
  font-size: var(--ui-font-size-sm, 0.875rem);
  font-weight: var(--ui-font-weight-medium, 500);
  color: var(--ui-color-label, var(--ui-color-on-surface));
  cursor: default;
}

.ui-spreadsheet__cell { cursor: pointer; } /* existing; OnCellClick/OnCellDoubleClick do not require new CSS classes -- args are pure behavioral data */

.ui-pdf-viewer__error { display:flex; flex-direction:column; align-items:center; justify-content:center; padding:var(--ui-space-6,1.5rem); color:var(--ui-color-error,#dc2626); text-align:center; } /* New class for ErrorTemplate container  existing .ui-pdf-viewer--error root modifier already changes border/background */

/* Round 8  ConnectionTemplate wrapper is pointer-events:none so click events fall through to the connection line beneath */
.ui-diagram__connection-label--template { pointer-events: none; }
/* Round 8  cursor hint for double-clickable connection groups */
.ui-diagram__connection-group { cursor: pointer; }

.ui-combobox__list--loading { pointer-events: none; }
.ui-combobox__loading-indicator { display: flex; align-items: center; justify-content: center; padding: var(--ui-space-3, 0.75rem); min-height: 2.5rem; }

".ui-autocomplete__list { /* PopupWidth applied as inline style: width:<value>; */ /* PopupHeight applied as inline style: max-height:<value>; */ /* Both can be combined; neither emits style when not set */ }"

.ui-multiselect__chip--summary { /* modifier on the single summary chip in TagMode.Single; should visually distinguish it from individual-item chips, e.g. slightly different background or border */ background-color: var(--ui-color-primary-subtle, #e8f0fe); border-radius: var(--ui-chip-radius, 4px); padding: 0.25em 0.75em; font-size: 0.875em; }"


/* Round 9 + Editor-complete - feature modifier classes */
.ui-spreadsheet__cell { /* VerticalAlignment=Top: align-items:flex-start; display:flex; */ /* VerticalAlignment=Middle: align-items:center; display:flex; */ /* VerticalAlignment=Bottom: align-items:flex-end; display:flex; */ /* Underline: text-decoration:underline; */ /* Strikethrough: text-decoration:line-through; */ /* TextWrap: white-space:pre-wrap; word-break:break-word; overflow-wrap:break-word; */ }

.ui-gantt-select-all-checkbox { cursor: pointer; } .ui-gantt-bar-label { font-size: 11px; fill: #fff; pointer-events: none; overflow: hidden; user-select: none; }

.ui-filemanager-breadcrumb { display: flex; align-items: center; padding: var(--ui-spacing-sm) var(--ui-spacing-md); background: var(--ui-surface); border-bottom: 1px solid var(--ui-border); } .ui-filemanager-breadcrumb-list { display: flex; flex-wrap: wrap; gap: 0.25rem; list-style: none; margin: 0; padding: 0; } .ui-filemanager-breadcrumb-item { display: flex; align-items: center; } .ui-filemanager-breadcrumb-link { background: none; border: none; color: var(--ui-link); cursor: pointer; padding: 0.125rem 0.25rem; font: inherit; } .ui-filemanager-breadcrumb-link[aria-current=page] { color: var(--ui-text); font-weight: 600; } .ui-filemanager-toolbar-custom { display: flex; align-items: center; gap: var(--ui-spacing-xs); margin-inline-start: auto; } .ui-filemanager-no-data { display: flex; align-items: center; justify-content: center; padding: var(--ui-spacing-xl); color: var(--ui-text-muted); font-size: var(--ui-font-sm); }"

.ui-datetimepicker__input[aria-describedby] { /* no visual change; attribute is ARIA-only */ } /* ShowWeekNumbers: the embedded UiCalendar renders .ui-calendar__week-number cells when ShowWeekNumbers=true  no new rules needed in DateTimePicker itself */ /* OnCalendarCellRender: consumer-supplied classes (e.g. .highlight) are added directly to .ui-calendar__day cells by UiCalendar; no new DateTimePicker rules needed */

.ui-colorpicker__value-label { display: inline-flex; align-items: center; margin-inline-start: 4px; font-size: inherit; color: inherit; white-space: nowrap; } .ui-colorpicker__popup-header { padding: 8px; border-bottom: 1px solid var(--ui-color-border); } .ui-colorpicker__popup-footer { padding: 8px; border-top: 1px solid var(--ui-color-border); }

.ui-upload__item--paused { opacity: 0.7; border-left: 3px solid var(--ui-color-warning, #f59e0b); } .ui-upload__dropzone:has(.ui-upload__hint:empty) { min-height: 80px; } /* DropZoneContent slot: no extra CSS needed; custom content renders inside existing .ui-upload__dropzone which already has layout styles */

.ui-form__footer { padding: var(--ui-form-spacing, 0.75rem) 0 0; }

/*  UiEditor parity additions (add to ui-blazor editor stylesheet; do NOT inline)  */

/* Status bar (word/char count, reading time, save indicator) */
.ui-editor-statusbar {
  display: flex;
  gap: var(--ui-spacing-3, 12px);
  align-items: center;
  padding: var(--ui-spacing-1, 4px) var(--ui-spacing-2, 8px);
  font-size: var(--ui-font-size-sm, 12px);
  color: var(--ui-color-subtle, #6b7280);
  border-top: 1px solid var(--ui-border-color, #e5e7eb);
  background: var(--ui-surface-alt, #f9fafb);
}
.ui-editor-statusbar__words,
.ui-editor-statusbar__chars,
.ui-editor-statusbar__reading { white-space: nowrap; }
.ui-editor-statusbar__dirty { margin-inline-start: auto; }
.ui-editor-statusbar__dirty--changed { color: var(--ui-color-warning, #b45309); font-weight: 600; }
.ui-editor-statusbar--over-limit .ui-editor-statusbar__chars { color: var(--ui-color-error, #dc2626); font-weight: 600; }

/* Custom placeholder template */
.ui-editor-placeholder--custom {
  position: absolute;
  inset: 0;
  pointer-events: none;
  color: var(--ui-color-subtle, #9ca3af);
  padding: var(--ui-spacing-2, 8px);
}

/* RTL: mirror toolbar + content when the surface is rtl */
.ui-editor-surface[dir="rtl"] { text-align: right; }

/* Extended dialog fields (link target/title, image alt/size/title, import) */
.ui-editor-dialog__label--title { margin-top: var(--ui-spacing-2, 8px); }
.ui-editor-dialog__check { display: flex; gap: var(--ui-spacing-1, 4px); align-items: center; }
.ui-editor-dialog__img-width,
.ui-editor-dialog__img-height { width: 6rem; display: inline-block; }
.ui-editor-dialog--import .ui-editor-dialog__import-text {
  width: 100%;
  resize: vertical;
  font-family: var(--ui-font-mono, monospace);
}


/* Round 10 - feature modifier classes */
.ui-multiviewcalendar__grid[aria-multiselectable='true'] { /* no visual change required; attribute is purely for AT */ } /* OnCellRender custom classes (e.g. .highlight) are consumer-defined and require no library CSS */ /* NavigateTo/Refresh are pure behavior -- no CSS */

.ui-timepicker--sm { font-size: 12px; } .ui-timepicker--sm .ui-timepicker__input { padding: .25rem .375rem; } .ui-timepicker--lg { font-size: 16px; } .ui-timepicker--lg .ui-timepicker__input { padding: .5rem .75rem; } .ui-timepicker--rounded-sm .ui-timepicker__input, .ui-timepicker--rounded-sm .ui-timepicker__list, .ui-timepicker--rounded-sm .ui-timepicker__option { border-radius: var(--ui-radius-sm, 2px); } .ui-timepicker--rounded-lg .ui-timepicker__input, .ui-timepicker--rounded-lg .ui-timepicker__list, .ui-timepicker--rounded-lg .ui-timepicker__option { border-radius: var(--ui-radius-lg, 8px); } .ui-timepicker--rounded-full .ui-timepicker__input { border-radius: 9999px; } .ui-timepicker--rounded-none .ui-timepicker__input, .ui-timepicker--rounded-none .ui-timepicker__list, .ui-timepicker--rounded-none .ui-timepicker__option { border-radius: 0; } .ui-timepicker--fill-flat .ui-timepicker__input { border-color: transparent; background: var(--ui-color-base-bg-hover); } .ui-timepicker--fill-flat .ui-timepicker__input:hover { background: var(--ui-color-base-bg-active, var(--ui-color-base-bg-hover)); } .ui-timepicker--fill-outline .ui-timepicker__input { background: transparent; border-color: var(--ui-color-primary); } .ui-timepicker--fill-outline .ui-timepicker__input:hover { background: var(--ui-color-primary-subtle, rgba(0,0,0,.04)); }"

.ui-carousel--disabled { opacity: 0.5; cursor: not-allowed; } .ui-carousel--disabled .ui-carousel__prev, .ui-carousel--disabled .ui-carousel__next { pointer-events: none; }

.ui-listview__item--disabled { pointer-events: none; opacity: 0.5; cursor: default; } /* disabled per-item state driven by ItemDisabled predicate */

.ui-tabstrip__tab-icon { display: inline-flex; align-items: center; margin-inline-end: var(--ui-space-xs, 0.25rem); flex-shrink: 0; } .ui-tabstrip__tab-icon svg, .ui-tabstrip__tab-icon img { width: 1em; height: 1em; }

.ui-drawer--no-animation { transition: none !important; animation: none !important; }

.ui-notification__footer { display: block; padding-top: 0.5rem; border-top: 1px solid rgba(0,0,0,.08); font-size: 0.875rem; color: inherit; }

.ui-wizard__step--error { /* Error marker for a wizard step  mirrors --valid and --disabled modifiers. */ color: var(--ui-color-error, #d32f2f); border-color: var(--ui-color-error, #d32f2f); } .ui-wizard__step-description { display: block; font-size: var(--ui-font-size-sm, 0.75rem); color: var(--ui-color-text-muted, #666); margin-top: var(--ui-space-1, 0.125rem); line-height: 1.3; }

".ui-stepper--sm { /* small size token: reduce indicator diameter, font-size, connector thickness */ font-size: var(--ui-stepper-font-size-sm, 0.75rem); } .ui-stepper--sm .ui-stepper__num { width: var(--ui-stepper-indicator-size-sm, 1.5rem); height: var(--ui-stepper-indicator-size-sm, 1.5rem); font-size: var(--ui-stepper-indicator-font-size-sm, 0.6875rem); } .ui-stepper--md { font-size: var(--ui-stepper-font-size-md, 0.875rem); } .ui-stepper--md .ui-stepper__num { width: var(--ui-stepper-indicator-size-md, 2rem); height: var(--ui-stepper-indicator-size-md, 2rem); font-size: var(--ui-stepper-indicator-font-size-md, 0.875rem); } .ui-stepper--lg { font-size: var(--ui-stepper-font-size-lg, 1rem); } .ui-stepper--lg .ui-stepper__num { width: var(--ui-stepper-indicator-size-lg, 2.5rem); height: var(--ui-stepper-indicator-size-lg, 2.5rem); font-size: var(--ui-stepper-indicator-font-size-lg, 1rem); }"


/* Mega-Depth A - editing/CRUD/series/formula feature classes */
/* Depth A: built-in add toolbar + type-appropriate editor classes. All optional/cosmetic; the feature works without them (native buttons/inputs). Add to ui-blazor.css under the existing .ui-grid-toolbar rules. */
.ui-grid-add-toolbar { justify-content: flex-start; }
.ui-grid-cmd { display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px; border: 1px solid var(--ui-color-border, #d9dbe0); border-radius: var(--ui-radius, 4px); background: var(--ui-color-surface, #fff); color: var(--ui-color-text, #23252b); font: inherit; cursor: pointer; }
.ui-grid-cmd:hover { background: var(--ui-color-surface-2, #f0f1f4); }
.ui-grid-cmd--add { background: var(--ui-color-primary, #2266dd); color: #fff; border-color: transparent; }
.ui-grid-cmd--add:hover { filter: brightness(0.95); }
.ui-grid-edit-input--checkbox { width: auto; }
.ui-grid-edit-input--number { text-align: right; }

/* Incell edit (append to ui-blazor.css TreeList section; NOT edited by me per G6) */
.ui-treelist-incell-display { cursor: text; display: inline-block; min-height: 1em; width: 100%; }
.ui-treelist-incell-display:hover { background: var(--ui-treelist-incell-hover-bg, rgba(0,0,0,0.04)); border-radius: var(--ui-radius-sm, 2px); }
.ui-treelist-incell-input { width: 100%; box-sizing: border-box; }
.ui-treelist-cell--incell-editing { padding: 0; }

/* Clickable pie/donut slice affordance (add to ui-blazor.css .ui-chart block). Default slice unchanged. */
.ui-chart__pie-slice--clickable { cursor: pointer; }
.ui-chart__pie-slice--clickable:hover { opacity: 0.85; }
.ui-chart__pie-slice--clickable:focus-visible { outline: 2px solid var(--ui-color-focus, currentColor); outline-offset: -2px; }

/* Field-chooser button/select-driven move controls (button-driven configurator). Append to the existing .ui-pivotgrid-fieldchooser block in ui-blazor.css - NOT edited here per G6. */
.ui-pivotgrid-field { display: flex; align-items: center; gap: var(--ui-spacing-1, 4px); }
.ui-pivotgrid-field-caption { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.ui-pivotgrid-field-actions { display: inline-flex; align-items: center; gap: var(--ui-spacing-1, 4px); flex: 0 0 auto; }
.ui-pivotgrid-field-zone-select { font: inherit; padding: 2px 4px; border: 1px solid var(--ui-border-color, #ccc); border-radius: var(--ui-border-radius, 4px); background: var(--ui-surface, #fff); color: inherit; }
.ui-pivotgrid-field-move { font: inherit; cursor: pointer; padding: 2px 6px; border: 1px solid var(--ui-border-color, #ccc); border-radius: var(--ui-border-radius, 4px); background: var(--ui-surface-alt, #f5f5f5); color: inherit; line-height: 1; }
.ui-pivotgrid-field-move:hover { background: var(--ui-hover-bg, #e8e8e8); }
.ui-pivotgrid-field-move:focus-visible { outline: 2px solid var(--ui-focus-ring, #0b5fff); outline-offset: 1px; }
.ui-pivotgrid-field-move--rows { border-inline-start: 2px solid var(--ui-info, #3b82f6); }
.ui-pivotgrid-field-move--columns { border-inline-start: 2px solid var(--ui-success, #22c55e); }
.ui-pivotgrid-field-move--measures { border-inline-start: 2px solid var(--ui-warning, #f59e0b); }
.ui-pivotgrid-field-move--fields { border-inline-start: 2px solid var(--ui-muted, #9ca3af); }

None. This round added a pure-C# public API surface and enums only; no rendering or styling changes were introduced, so no CSS is required.


/* Mega-Depth B - grouping/recurrence/series/merge/tools/resources feature classes */
/*  Filter menu (header dropdown)  grid-deep 7  */
.ui-grid-header-cell { position: relative; } /* anchor for the positioned dropdown */

.ui-grid-filter-menu-trigger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-inline-start: 4px;
  padding: 2px 4px;
  border: none;
  background: transparent;
  color: var(--ui-color-subtle, #6b7280);
  cursor: pointer;
  border-radius: var(--ui-border-radius, 4px);
  line-height: 1;
}
.ui-grid-filter-menu-trigger:hover,
.ui-grid-filter-menu-trigger--open { background: var(--ui-color-hover, rgba(0,0,0,0.06)); }
.ui-grid-filter-menu-trigger--active { color: var(--ui-color-primary, #2563eb); }
.ui-grid-filter-menu-icon { font-size: 0.7em; }

.ui-grid-filter-menu {
  position: absolute;
  z-index: var(--ui-z-1050, 1050);
  top: 100%;
  inset-inline-end: 0;
  margin-top: 2px;
  min-width: 220px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px;
  background: var(--ui-color-surface, #fff);
  border: 1px solid var(--ui-color-border, #d1d5db);
  border-radius: var(--ui-border-radius, 6px);
  box-shadow: var(--ui-shadow-popup, 0 4px 16px rgba(0,0,0,0.18));
  font-weight: 400;
  text-align: start;
}
.ui-grid-filter-menu-operator,
.ui-grid-filter-menu-value { width: 100%; box-sizing: border-box; }
.ui-grid-filter-menu-actions { display: flex; gap: 8px; justify-content: flex-end; }
.ui-grid-filter-menu-apply,
.ui-grid-filter-menu-clear {
  padding: 4px 12px;
  border-radius: var(--ui-border-radius, 4px);
  cursor: pointer;
  border: 1px solid var(--ui-color-border, #d1d5db);
}
.ui-grid-filter-menu-apply {
  background: var(--ui-color-primary, #2563eb);
  color: var(--ui-color-on-primary, #fff);
  border-color: var(--ui-color-primary, #2563eb);
}
.ui-grid-filter-menu-clear { background: var(--ui-color-surface, #fff); color: var(--ui-color-text, #111827); }

No CSS added. This round is pure C# recurrence logic (model/parser/serializer/expansion engine); no DOM or styling changes.

/*   / OHLC (5.6.9)    ui-blazor.css   .ui-chart__*   */
.ui-chart__candle-point { cursor: default; }
.ui-chart__candle-point[role="listitem"][onclick],
.ui-chart__candle-point:has(> [onclick]) { cursor: pointer; }
/*   : fill  inline (up/down );        */
.ui-chart__candle-body { stroke: var(--ui-surface, #fff); stroke-width: 1; }
.ui-chart__candle-point--up .ui-chart__candle-body { /*   inline fill = UpColor/   */ }
.ui-chart__candle-point--down .ui-chart__candle-body { /*   inline fill = DownColor/   */ }
/*  (Low->High)  OHLC : stroke  inline (  ) */
.ui-chart__candle-wick { stroke-width: 1; }
.ui-chart__candle-tick { stroke-width: 1.5; }
.ui-chart__candle-point:hover .ui-chart__candle-body,
.ui-chart__candle-point:hover .ui-chart__candle-wick,
.ui-chart__candle-point:hover .ui-chart__candle-tick { opacity: .85; }
/* Default up/down -    UpColor/DownColor   Color:
      inline fill  ,      (design-token ). */

/* Depth B adds no NEW required library CSS: conditional-format rules apply consumer-supplied
   class names, and merge/freeze use inline styles emitted by the component (grid-span + position:sticky).
   The following are OPTIONAL illustrative styles a consumer could define for the EqualTo/NotEqualTo
   example classes and to visually reinforce frozen/merged cells; they are NOT edited into the shared
   ui-blazor.css (G6) and are provided here for reference only. */

/* Optional visual reinforcement for frozen band separation (consumer theme override). */
.ui-spreadsheet__cell--frozen { background-color: var(--ui-spreadsheet-frozen-bg, rgba(0,0,0,0.02)); }
.ui-spreadsheet__cell--frozen-row { box-shadow: inset 0 -1px 0 var(--ui-border, #d9d9d9); }
.ui-spreadsheet__cell--frozen-col { box-shadow: inset -1px 0 0 var(--ui-border, #d9d9d9); }

/* Example conditional-format classes referenced by the new EqualTo/NotEqualTo demos/tests. */
.cf-eq  { background-color: var(--ui-info-bg, #e6f4ff); }
.cf-neq { background-color: var(--ui-warning-bg, #fff7e6); }

/* Depth-B: find/replace bar */
.ui-editor-findbar {
  display: flex;
  align-items: center;
  gap: var(--ui-spacing-1, 4px);
  padding: var(--ui-spacing-1, 4px) var(--ui-spacing-2, 8px);
  border-top: 1px solid var(--ui-border-color, #e0e0e0);
  background: var(--ui-surface-alt, #f7f7f7);
  flex-wrap: wrap;
}
.ui-editor-findbar__find,
.ui-editor-findbar__replace {
  flex: 1 1 120px;
  min-width: 100px;
}
.ui-editor-findbar__opt {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  font-size: var(--ui-font-size-sm, 0.8125rem);
  color: var(--ui-text-secondary, #555);
  cursor: pointer;
  user-select: none;
}
.ui-editor-findbar__count {
  margin-inline: var(--ui-spacing-1, 4px);
  font-size: var(--ui-font-size-sm, 0.8125rem);
  color: var(--ui-text-secondary, #555);
  white-space: nowrap;
}
/* Depth-B: custom toolbar tool marker (inherits ui-editor-tool button styling) */
.ui-editor-tool--custom { /* no extra rules required; hook for host theming */ }

/* DepthB  non-working shading (timeline background) */
.ui-gantt-nonworking-band {
  fill: var(--ui-gantt-nonworking-fill, rgba(0, 0, 0, 0.045));
}
.ui-gantt-nonworking-band.ui-gantt-nonworking--holiday {
  fill: var(--ui-gantt-holiday-fill, rgba(220, 53, 69, 0.10));
}

/* DepthB  custom-interval header tier */
.ui-gantt-axis-tier-custom {
  display: flex;
  border-block-end: 1px solid var(--ui-gantt-axis-border, var(--ui-border-color, #e0e0e0));
  font-size: var(--ui-font-size-sm, 0.75rem);
}
.ui-gantt-axis-cell--custom {
  box-sizing: border-box;
  flex: 0 0 auto;
  padding-inline: 4px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  border-inline-end: 1px solid var(--ui-gantt-axis-border, var(--ui-border-color, #e0e0e0));
  color: var(--ui-gantt-axis-muted, var(--ui-color-muted, #6b7280));
}

/* DepthB  resource legend */
.ui-gantt-resource-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  padding: 6px 10px;
  border-block-start: 1px solid var(--ui-gantt-axis-border, var(--ui-border-color, #e0e0e0));
  font-size: var(--ui-font-size-sm, 0.75rem);
}
.ui-gantt-resource-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.ui-gantt-resource-legend-swatch {
  inline-size: 12px;
  block-size: 12px;
  border-radius: 3px;
  background-color: var(--ui-gantt-bar-fill, var(--ui-color-primary, #3f51b5));
  flex: 0 0 auto;
}
.ui-gantt-resource-legend-text { color: var(--ui-color-text, inherit); }

/* DepthB  resourced bar hint (fill is set inline via the resource color; this is a fallback hook) */
.ui-gantt-bar--resourced .ui-gantt-bar-rect { /* inline fill takes precedence */ }

/* Drill-through: hint that data cells are interactive when a drill/click subscriber is wired. */
/* Applied additively; existing .ui-pivotgrid-cell rules are unchanged. Colors via design tokens. */
.ui-pivotgrid-cell[onclick],
.ui-pivotgrid-cell:has(> *) { }
/* Reuse the marker below only when OnCellClick/OnDrillThrough are active. Kept minimal (pure-C# feature; */
/* no new interactive chrome required). Optional cursor affordance for clickable data cells: */
.ui-pivotgrid--drillable .ui-pivotgrid-cell { cursor: pointer; }
/* Measure-label template site keeps existing .ui-pivotgrid-measure-header styling; template content */
/* inherits typography from the header. No new variables introduced. */

/* Load-on-demand ( depth cluster B)  add to ui-blazor.css after the .ui-treelist-no-data rule (~line 871). Pure CSS, tokens reuse existing --ui-* vars. */
.ui-treelist-loading-row td.ui-treelist-loading-cell {
  color: var(--ui-color-text-muted);
  font-size: var(--ui-font-size-sm, .875rem);
  padding-block: var(--ui-spacing-2, 8px);
}
.ui-treelist-loading-cell {
  display: flex;
  align-items: center;
  gap: var(--ui-spacing-2, 8px);
}
.ui-treelist-loading-indicator {
  width: 1em;
  height: 1em;
  flex: 0 0 auto;
  border: 2px solid var(--ui-color-border, currentColor);
  border-top-color: transparent;
  border-radius: 50%;
  animation: ui-treelist-spin .7s linear infinite;
}
.ui-treelist-loading-text { line-height: 1; }
@keyframes ui-treelist-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .ui-treelist-loading-indicator { animation: none; }
}


/* Mega-Depth C - keyboard/selection/a11y/chart-axes/spreadsheet-filter/editor-lists */
/* Depth C: tri-state select-all indeterminate visual (no JS; CSS-only fallback). */
.ui-grid-checkbox-select-all--indeterminate {
  /* Visually convey the mixed state when the native .indeterminate property is unavailable. */
  position: relative;
  opacity: 0.9;
}
.ui-grid-checkbox-select-all--indeterminate::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 8px;
  height: 2px;
  background: var(--ui-color-primary, currentColor);
  transform: translate(-50%, -50%);
  pointer-events: none;
}

/* Keyboard/selection polish already reuses existing tokens:
   .ui-grid-cell--focused (roving focus outline) and .ui-grid-row--selected
   are defined in the base grid stylesheet; no new rules required for those. */

/* Depth-C: plot bands / plot lines / trendlines (add to ui-blazor.css chart section).
   Geometry colors/opacity/dash are set inline on the elements; these rules cover defaults + labels.
   Uses existing --ui-* tokens with hard fallbacks, matching the StockChart plotband/plotline pattern. */

.ui-chart__plot-band { pointer-events: none; }

.ui-chart__plot-band-label {
  fill: var(--ui-color-on-surface-muted, #666);
  font-size: 11px;
  pointer-events: none;
  dominant-baseline: hanging;
}

.ui-chart__plot-line {
  /* stroke / stroke-width / stroke-dasharray applied inline; fallback stroke if omitted */
  stroke: var(--ui-chart-plotline, var(--ui-color-on-surface-muted, #888));
  pointer-events: none;
}

.ui-chart__plot-line-label {
  fill: var(--ui-color-on-surface-muted, #666);
  font-size: 11px;
  pointer-events: none;
  dominant-baseline: auto;
}

.ui-chart__trendline {
  fill: none;
  /* stroke / stroke-width / stroke-dasharray applied inline (series color by default) */
  pointer-events: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Optional theme tokens (default fallbacks already inlined by the component):
   --ui-chart-plotband: default shaded band color;
   --ui-chart-plotline: default threshold line color. */

/* DepthC  keyboard-focused row */
.ui-gantt-tl-row:focus,
.ui-gantt-tl-row:focus-visible {
  outline: 2px solid var(--ui-color-primary, #2f6feb);
  outline-offset: -2px;
}
.ui-gantt-tl-row[tabindex="0"] { scroll-margin-block: var(--ui-gantt-row-height, 36px); }

/* DepthC  distinct summary bracket shape */
.ui-gantt-summary-bracket {
  fill: var(--ui-gantt-summary-fill, #616161);
  stroke: none;
}
.ui-gantt-bar--bracket .ui-gantt-bar-rect { display: none; } /* body replaced by bracket path */

/* DepthC  baseline bar beneath the actual bar */
.ui-gantt-baseline {
  fill: var(--ui-gantt-baseline-fill, #9e9e9e);
  opacity: 0.65;
}
.ui-gantt-bar--baselined .ui-gantt-bar-rect { /* actual bar sits above baseline; no change needed */ }

/* DepthC  native SVG title tooltip needs no visual CSS (browser-rendered),
   class kept only as a query/testing hook */
.ui-gantt-bar-tooltip { /* intentionally empty: SVG <title> is UA-rendered */ }

/* Depth-C added no new required CSS: value filtering, subtotal position, and number format are pure C#/engine features that reuse existing markup (ui-pivotgrid-row-header, ui-pivotgrid-col-header, ui-pivotgrid-total, ui-pivotgrid-cell). Optional cosmetic rule if a leading-subtotal (Subtotals=First) accent is desired:
.ui-pivotgrid-row-header.ui-pivotgrid-total.ui-pivotgrid-subtotal--first { border-block-start: 1px solid var(--ui-pg-total-border, var(--ui-border, #d9d9d9)); }
(Not emitted by the component today; no class was added, so this is purely optional and G6-safe since it lives in the theme, not the component.) */

/* Depth-C additive styles (ui- prefix; tokens only). Place in ui-blazor.css by the CSS owner. */

/* Format Painter active state (host may toggle .ui-editor-tool--painting via IsFormatPainterActive). */
.ui-editor--painting .ui-editor-content { cursor: cell; }
.ui-editor-tool--painting { background: var(--ui-color-primary-subtle, rgba(0,0,0,0.06)); }

/* Roving toolbar focus: strong visible ring on the currently-focused tool (keyboard a11y). */
.ui-editor-toolbar:focus-within .ui-editor-tool[tabindex="0"]:focus-visible,
.ui-editor-tool:focus-visible {
  outline: 2px solid var(--ui-color-focus, var(--ui-color-primary, #2b6cb0));
  outline-offset: 1px;
}

/* Pressed (active) toggle tools  reinforce aria-pressed=true visually. */
.ui-editor-tool[aria-pressed="true"] {
  background: var(--ui-color-selected, rgba(0,0,0,0.12));
}


/* Mega-Depth D - chart types/frozen-cols/editor-tables/form/treeview/combobox/upload/menu */
/* Depth-D new chart types  add to ui-blazor.css (owner of shared stylesheet). Uses --ui-* tokens; no hardcoded semantic colors except neutral band greys already inlined as fills. */

/* Waterfall (5.6.11) */
.ui-chart__waterfall-bar { stroke: none; }
.ui-chart__waterfall-bar--rising { /* fill set inline (RisingColor|series) */ }
.ui-chart__waterfall-bar--falling { /* fill set inline (FallingColor|series) */ }
.ui-chart__waterfall-bar--summary { /* fill set inline (SummaryColor|series) */ }
.ui-chart__waterfall-bar.ui-chart__waterfall-bar--clickable,
.ui-chart__waterfall-bar[onclick] { cursor: pointer; }
.ui-chart__waterfall-connector {
    stroke: var(--ui-chart-connector, var(--ui-color-on-surface-muted, #888));
    stroke-width: 1;
    stroke-dasharray: 3 2;
}

/* Box-plot (5.6.12) */
.ui-chart__boxplot-box { fill-opacity: 0.25; stroke-width: 1; }
.ui-chart__boxplot-whisker { stroke-width: 1; }
.ui-chart__boxplot-median { stroke: var(--ui-color-on-surface, #222); stroke-width: 2; }
.ui-chart__boxplot-point[onclick] { cursor: pointer; }

/* Bullet (5.6.13) */
.ui-chart__bullet-band { stroke: none; }              /* fill inline (band color / neutral grey) */
.ui-chart__bullet-measure { stroke: none; }           /* fill inline (measure/series color) */
.ui-chart__bullet-target {
    stroke: var(--ui-color-on-surface, #222);
    stroke-width: 3;
}
.ui-chart__bullet-point[onclick] { cursor: pointer; }

/* UiFormItem  field row: label + editor + hint + error */
.ui-form-item { display: flex; flex-direction: column; gap: var(--ui-spacing-1, 4px); margin-block-end: var(--ui-spacing-3, 12px); }
.ui-form-item--horizontal { flex-direction: row; align-items: flex-start; column-gap: var(--ui-spacing-2, 8px); }
.ui-form-item--horizontal > .ui-form-item__label { flex: 0 0 var(--ui-form-label-width, 30%); padding-block-start: var(--ui-spacing-1, 4px); }
.ui-form-item--horizontal > .ui-form-item__editor { flex: 1 1 auto; min-width: 0; }
.ui-form-item__label { font-weight: 500; color: var(--ui-color-text, #1e1e1e); }
.ui-form-item__required-marker { color: var(--ui-color-error, #d32f2f); margin-inline-start: 2px; }
.ui-form-item__editor { display: flex; flex-direction: column; gap: var(--ui-spacing-1, 4px); }
.ui-form-item__hint { font-size: var(--ui-font-size-sm, 0.8125rem); color: var(--ui-color-text-subtle, #6b6b6b); }
.ui-form-item__error { display: flex; flex-direction: column; gap: 2px; font-size: var(--ui-font-size-sm, 0.8125rem); color: var(--ui-color-error, #d32f2f); }
.ui-form-item__error-text { line-height: 1.3; }
.ui-form-item--invalid > .ui-form-item__label { color: var(--ui-color-error, #d32f2f); }

/* UiFormGroup  grouped fieldset with legend + optional column grid */
.ui-form-group { border: 1px solid var(--ui-color-border, #e0e0e0); border-radius: var(--ui-radius, 4px); padding: var(--ui-spacing-3, 12px); margin-block-end: var(--ui-spacing-4, 16px); min-inline-size: 0; }
.ui-form-group__legend { font-weight: 600; padding-inline: var(--ui-spacing-1, 4px); color: var(--ui-color-text, #1e1e1e); }
.ui-form-group--cols { display: grid; column-gap: var(--ui-form-group-col-gap, var(--ui-spacing-4, 16px)); row-gap: var(--ui-form-group-row-gap, 0); }
.ui-form-group--cols > .ui-form-group__legend { grid-column: 1 / -1; }
.ui-form-group--disabled { opacity: 0.6; }

/* --- UiTreeView depth-round D additions (add to ui-blazor.css; NOT edited here per guardrail G6) --- */

/* Tri-state (indeterminate) checkbox: draw the "mixed" dash. The native :indeterminate pseudo
   is not settable without JS (pure C#), so we style the --indeterminate marker class. */
.ui-treeview__checkbox--indeterminate {
  /* Fallback visual for browsers/hosts that render our own box; native inputs also read aria-checked=mixed. */
  position: relative;
}
.ui-treeview__checkbox--indeterminate::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 8px;
  height: 2px;
  transform: translate(-50%, -50%);
  background: var(--ui-color-primary, currentColor);
  pointer-events: none;
}

/* Load-on-demand loading row */
.ui-treeview__children--loading { /* container while OnRead is pending */ }
.ui-treeview__loading {
  list-style: none;
  padding: var(--ui-spacing-1, 4px) var(--ui-spacing-2, 8px);
  color: var(--ui-color-muted, #888);
  font-style: italic;
  /* animated ellipsis pulse (respects reduced-motion below) */
  animation: ui-treeview-load-pulse 1.2s ease-in-out infinite;
}
@keyframes ui-treeview-load-pulse {
  0%, 100% { opacity: 0.4; }
  50%      { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .ui-treeview__loading { animation: none; opacity: 0.7; }
}

/*  Depth D: grouping  */
/* Sticky group header inside the scrollable popup list. */
.ui-combobox__group-header {
  position: sticky;
  top: 0;
  z-index: 1;
  padding: .25rem .5rem;
  font-size: .75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .03em;
  color: var(--ui-color-text-subtle, var(--ui-color-text));
  background: var(--ui-color-base-bg);
  border-bottom: 1px solid var(--ui-color-border);
}

/*  Depth D: windowed rendering (pure-C# virtualization)  */
/* Spacers reserve the vertical space of the off-window items so the scrollbar
   length stays correct while only the window is in the DOM. They must not
   receive pointer events or affect the flex option layout. */
.ui-combobox__virtual-spacer {
  flex: 0 0 auto;
  pointer-events: none;
  padding: 0;
  margin: 0;
  border: 0;
  background: transparent;
}

/*  Depth D: adaptive full-screen sheet on small viewports  */
/* Default (large screens): no change; the base .ui-combobox__list rules apply.
   On small viewports the adaptive list detaches into a bottom-anchored
   full-screen sheet. Pure CSS media query -- no JS measurement. */
@media (max-width: 767.98px) {
  .ui-combobox__list.ui-combobox__list--adaptive {
    position: fixed;
    top: auto;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    max-width: 100%;
    max-height: 85vh;           /* leaves a peek of the page behind the sheet */
    border-radius: var(--ui-radius) var(--ui-radius) 0 0;
    box-shadow: 0 -6px 24px rgba(0, 0, 0, .25);
    z-index: var(--ui-z-modal, 1050);
  }
  /* Larger tap targets in the sheet. */
  .ui-combobox__list--adaptive .ui-combobox__option {
    padding: .625rem .75rem;
    font-size: 1rem;
  }
  .ui-combobox__list--adaptive .ui-combobox__group-header {
    padding: .5rem .75rem;
  }
}

/* Depth round D  checkable / radio menu items (add to ui-blazor.css 060 UiMenu section).
   Uses existing design tokens; no hardcoded colors. */

/* Reserve space for the check indicator column on checkable rows so text aligns. */
.ui-menu__item--checkable > .ui-menu__link {
  position: relative;
}

/* The indicator box (checkbox / radio glyph slot). */
.ui-menu__check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 1em;
  block-size: 1em;
  margin-inline-end: var(--ui-spacing-2, 0.5rem);
  flex: 0 0 auto;
  border: var(--ui-border-width, 1px) solid var(--ui-border-color, currentColor);
  color: var(--ui-color-primary, currentColor);
  line-height: 1;
}

/* Checkbox variant: small square. */
.ui-menu__check--checkbox {
  border-radius: var(--ui-border-radius-sm, 2px);
}

/* Radio variant: circle. */
.ui-menu__check--radio {
  border-radius: 50%;
}

/* Checked state: filled glyph. Rendered via ::after so no extra DOM node is needed. */
.ui-menu__item--checked > .ui-menu__link > .ui-menu__check--checkbox::after {
  content: "";
  inline-size: 0.55em;
  block-size: 0.3em;
  border-inline-start: 2px solid var(--ui-color-on-primary, #fff);
  border-block-end: 2px solid var(--ui-color-on-primary, #fff);
  transform: translateY(-10%) rotate(-45deg);
}

.ui-menu__item--checked > .ui-menu__link > .ui-menu__check--checkbox {
  background-color: var(--ui-color-primary, currentColor);
  border-color: var(--ui-color-primary, currentColor);
}

.ui-menu__item--checked > .ui-menu__link > .ui-menu__check--radio {
  background-color: var(--ui-color-primary, currentColor);
  border-color: var(--ui-color-primary, currentColor);
  box-shadow: inset 0 0 0 2px var(--ui-color-surface, #fff);
}

/* Optional emphasis on the checked row label. */
.ui-menu__link--checked {
  font-weight: var(--ui-font-weight-medium, 500);
}

/* Keep disabled checkable rows visually muted but still show their state. */
.ui-menu__item--checkable.ui-menu__item--disabled > .ui-menu__link {
  opacity: var(--ui-opacity-disabled, 0.6);
}


/* Depth G - dropdowntree/taskboard/timeline/toolbar/window/tilelayout/chart-panes/listview */
/* Add to ui-blazor.css (NOT edited here per guardrail G6). Tokens: --ui-* from theme. */

/* Multi-select chips summary (rendered as sibling of the trigger inside .ui-dropdowntree) */
.ui-dropdowntree__chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ui-spacing-1, 4px);
  align-items: center;
  padding: var(--ui-spacing-1, 4px);
  max-width: 100%;
}
.ui-dropdowntree__chip {
  display: inline-flex;
  align-items: center;
  gap: var(--ui-spacing-1, 4px);
  padding: 0 var(--ui-spacing-2, 8px);
  height: 1.5rem;
  border-radius: var(--ui-border-radius, 4px);
  background: var(--ui-base-bg, #eceff4);
  color: var(--ui-base-text, #1c1c1c);
  font-size: var(--ui-font-size-sm, 0.8125rem);
  line-height: 1.5rem;
  white-space: nowrap;
}
.ui-dropdowntree__chip-text { overflow: hidden; text-overflow: ellipsis; max-width: 12rem; }
.ui-dropdowntree__chip-remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  background: transparent;
  cursor: pointer;
  padding: 0;
  width: 1rem;
  height: 1rem;
  line-height: 1;
  color: inherit;
  opacity: 0.7;
}
.ui-dropdowntree__chip-remove:hover { opacity: 1; }

/* Filter match highlight */
.ui-dropdowntree__highlight {
  background: var(--ui-highlight-bg, #ffe58f);
  color: inherit;
  padding: 0;
  border-radius: 2px;
}

/* Tri-state (indeterminate) checkbox: CSS-only mixed indicator (no JS interop) */
.ui-dropdowntree__checkbox--indeterminate {
  position: relative;
}
.ui-dropdowntree__checkbox--indeterminate::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 60%;
  height: 2px;
  transform: translate(-50%, -50%);
  background: var(--ui-primary, #2b6cb0);
  pointer-events: none;
}

/* Per-node load-on-demand loading indicator */
.ui-dropdowntree__node-loading {
  display: flex;
  align-items: center;
  padding: var(--ui-spacing-1, 4px) var(--ui-spacing-4, 16px);
  opacity: 0.75;
}

/* New mode-independent WIP indicator: column exactly AT its WIP limit (full but not over). */
/* --over-limit already exists as a behavioral hook and takes precedence over --at-limit. */
.ui-taskboard__column--at-limit .ui-taskboard__column-count {
    color: var(--ui-color-warning, #b7791f);
    font-weight: 600;
}
.ui-taskboard__column--at-limit {
    box-shadow: inset 0 2px 0 0 var(--ui-color-warning, #b7791f);
}
/* Suggested companion for the existing (currently unstyled) over-limit hook: */
.ui-taskboard__column--over-limit .ui-taskboard__column-count {
    color: var(--ui-color-error, #c53030);
    font-weight: 700;
}

/* Marker dot on the axis. Rendered only when item.Marker or MarkerTemplate is set. */
.ui-timeline__marker {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.5rem;
  min-height: 1.5rem;
  padding: 0 var(--ui-spacing-1, 0.25rem);
  border-radius: 999px;
  background: var(--ui-color-primary, #2563eb);
  color: var(--ui-color-on-primary, #fff);
  font-size: var(--ui-font-size-sm, 0.75rem);
  font-weight: 600;
  line-height: 1;
}
/* Date/time slot produced by DateTemplate; mirrors ui-timeline__time typography. */
.ui-timeline__date {
  display: block;
  color: var(--ui-color-muted, #6b7280);
  font-size: var(--ui-font-size-sm, 0.75rem);
}
/* CollapsibleEvents reuses the existing ui-timeline--collapsible modifier (already styled),
   so no new root-class CSS is required for it. */

/* Overflow anchor button (ellipsis trigger). Add to ui-blazor.css .ui-toolbar block. */
.ui-toolbar__overflow-anchor{display:inline-flex;align-items:center;justify-content:center;min-width:2rem;height:100%;padding:0 var(--ui-spacing-2,.5rem);border:none;background:transparent;color:inherit;cursor:pointer;border-radius:var(--ui-radius-sm,4px);}
.ui-toolbar__overflow-anchor:hover{background:var(--ui-color-surface-hover,rgba(0,0,0,.06));}
.ui-toolbar__overflow-anchor:focus-visible{outline:2px solid var(--ui-color-focus,#4c9ffe);outline-offset:-2px;}
.ui-toolbar__overflow-anchor--open{background:var(--ui-color-surface-active,rgba(0,0,0,.1));}
.ui-toolbar__overflow-glyph{font-size:1.1em;line-height:1;letter-spacing:.05em;}
/* Overflow popup (role=menu), CSS-positioned relative to the toolbar. */
.ui-toolbar{position:relative;} /* ensure anchor for absolutely-positioned popup */
.ui-toolbar__overflow-popup{position:absolute;top:100%;right:0;z-index:var(--ui-z-1050,1050);display:flex;flex-direction:column;min-width:12rem;margin-top:2px;padding:var(--ui-spacing-1,.25rem) 0;background:var(--ui-color-surface,#fff);border:1px solid var(--ui-color-border,#d5d5d5);border-radius:var(--ui-radius-md,6px);box-shadow:var(--ui-shadow-popup,0 4px 16px rgba(0,0,0,.15));}
.ui-toolbar--vertical .ui-toolbar__overflow-popup{top:0;left:100%;right:auto;}
.ui-toolbar__overflow-item{display:flex;align-items:center;gap:var(--ui-spacing-2,.5rem);width:100%;padding:var(--ui-spacing-2,.5rem) var(--ui-spacing-3,.75rem);border:none;background:transparent;color:inherit;text-align:start;cursor:pointer;font:inherit;}
.ui-toolbar__overflow-item:hover:not(.ui-toolbar__overflow-item--disabled){background:var(--ui-color-surface-hover,rgba(0,0,0,.06));}
.ui-toolbar__overflow-item:focus-visible{outline:2px solid var(--ui-color-focus,#4c9ffe);outline-offset:-2px;}
.ui-toolbar__overflow-item--disabled{opacity:.5;cursor:default;pointer-events:none;}
.ui-toolbar__overflow-item-text{flex:1 1 auto;}
/* New item-type wrappers (inherit ui-toolbar__item flex behavior). */
.ui-toolbar-split-button,.ui-toolbar-dropdown-button{display:inline-flex;align-items:center;}

/* No CSS changes were required for this pure-C# data-model cluster. The reorder/resize model mutates ColSpan/RowSpan/order which are emitted as per-tile inline grid styles (grid-column: span N; grid-row: span N) that already recompute every render. Existing classes ui-tile-layout, ui-tile-layout--reorderable, ui-tile-layout--resizable, ui-tile-layout-item(+ -header/-body/-resize--right/-bottom/-corner) and ui-tile-layout-empty remain unchanged. */

/* Depth-G (added to ui-blazor.css by the theme owner; classes only, uses design tokens) */
.ui-chart__pane-separator { stroke: var(--ui-chart-axis, var(--ui-color-on-surface-muted, #888)); stroke-width: 1; stroke-dasharray: 3 3; opacity: .6; }
.ui-chart__pane-title { fill: var(--ui-color-on-surface-muted, #666); font-size: 11px; dominant-baseline: hanging; }
.ui-chart__navigator-track { fill: var(--ui-color-surface-alt, #f5f5f5); stroke: var(--ui-color-border, #ddd); stroke-width: 1; }
.ui-chart__navigator-preview { stroke: var(--ui-color-series-1, #4e79a7); stroke-width: 1; fill: none; opacity: .8; }
.ui-chart__navigator-selection { fill: var(--ui-color-primary, #3b7ddd); fill-opacity: .18; stroke: var(--ui-color-primary, #3b7ddd); stroke-width: 1; }
.ui-chart__navigator-handle { fill: var(--ui-color-primary, #3b7ddd); fill-opacity: .55; cursor: ew-resize; rx: 2; }

/* Sort toolbar for UiListView (place in ui-blazor.css near .ui-listview__header; NOT written by this task per guardrail) */
.ui-listview__sort { display:flex; align-items:center; gap:var(--ui-gap); padding-bottom:var(--ui-gap); }
.ui-listview__sort-field { font:inherit; color:var(--ui-color-text); background:var(--ui-color-base-bg); border:1px solid var(--ui-color-border); border-radius:var(--ui-radius); padding:.25rem .5rem; }
.ui-listview__sort-field:disabled { color:var(--ui-color-disabled); opacity:.6; cursor:default; }
.ui-listview__sort-field:focus-visible { outline:var(--ui-focus-ring); outline-offset:1px; }
.ui-listview__sort-dir { display:inline-flex; align-items:center; justify-content:center; min-width:2rem; padding:.25rem .5rem; font:inherit; color:var(--ui-color-text); background:var(--ui-color-base-bg); border:1px solid var(--ui-color-border); border-radius:var(--ui-radius); cursor:pointer; }
.ui-listview__sort-dir:hover:not(:disabled) { background:var(--ui-color-base-bg-hover); }
.ui-listview__sort-dir:disabled { color:var(--ui-color-disabled); opacity:.6; cursor:default; }
.ui-listview__sort-dir:focus-visible { outline:var(--ui-focus-ring); outline-offset:1px; }

/* Row virtualization spacers — zero chrome so windowed pixel offsets stay accurate */
.ui-grid-virtual-spacer, .ui-grid-virtual-spacer-cell,
.ui-treelist-virtual-spacer, .ui-treelist-virtual-spacer-cell { padding: 0; border: 0; }

/* Grid row drag-reorder: insertion indicator on the current drop target */
.ui-grid-row--drop-target > td { border-top: 2px solid var(--ui-color-primary, #2266dd); }
tr.ui-grid-row[draggable="true"] { cursor: grab; }

/* UiGrid Popup EditMode (v1.1) - modal edit form */
.ui-grid-popup-overlay { position: fixed; inset: 0; z-index: var(--ui-z-modal, 1050); background: var(--ui-overlay-bg, rgba(0,0,0,.5)); display: flex; align-items: center; justify-content: center; }
.ui-grid-popup { background: var(--ui-surface, #fff); color: var(--ui-on-surface, inherit); border-radius: var(--ui-border-radius, 4px); box-shadow: var(--ui-shadow-lg, 0 10px 30px rgba(0,0,0,.25)); min-width: 320px; max-width: min(90vw, 560px); max-height: 85vh; overflow: auto; padding: 16px; }
.ui-grid-popup-title { font-weight: 600; font-size: 1.05rem; margin-bottom: 12px; }
.ui-grid-popup-body { display: flex; flex-direction: column; gap: 10px; }
.ui-grid-popup-field { display: flex; flex-direction: column; gap: 4px; }
.ui-grid-popup-field-label { font-size: .85rem; opacity: .8; }
.ui-grid-popup-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 16px; }

/* RTL (v1.2): direction comes from UiRoot dir attribute (IUiCultureProvider / Direction param). */
[dir="rtl"] .ui-icon-directional { transform: scaleX(-1); }
[dir="rtl"] .ui-toolbar { direction: rtl; }
[dir="rtl"] .ui-grid-popup-actions { justify-content: flex-start; }
[dir="rtl"] .ui-pager { direction: rtl; }
[dir="rtl"] .ui-menu, [dir="rtl"] .ui-breadcrumb { direction: rtl; }


/* == UiEditor: opt-in AI assistant panel + image editing dialog == */
.ui-editor-aibar { display: flex; flex-direction: column; gap: 8px; padding: 10px 12px; border-top: 1px solid var(--ui-border, #d6dbe1); background: var(--ui-surface-alt, #f7f9fb); }
.ui-editor-aibar__target { font-size: 11.5px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--ui-text-muted, #5b6572); }
.ui-editor-aibar__commands { display: flex; flex-wrap: wrap; gap: 6px; }
.ui-editor-aibar__cmd { padding: 3px 12px; border: 1px solid var(--ui-border, #d6dbe1); border-radius: 999px; background: var(--ui-surface, #fff); font-size: 12.5px; cursor: pointer; }
.ui-editor-aibar__cmd:hover:not([disabled]) { border-color: var(--ui-primary, #3b82f6); color: var(--ui-primary, #3b82f6); }
.ui-editor-aibar__cmd[disabled] { opacity: .55; cursor: default; }
.ui-editor-aibar__promptrow { display: flex; gap: 8px; }
.ui-editor-aibar__prompt { flex: 1; min-width: 0; }
.ui-editor-aibar__busy { display: flex; align-items: center; gap: 10px; font-size: 12.5px; color: var(--ui-text-muted, #5b6572); }
.ui-editor-aibar__error { font-size: 12.5px; color: var(--ui-danger, #b02a37); }
.ui-editor-aibar__result { max-height: 220px; overflow: auto; padding: 10px 12px; border: 1px solid var(--ui-border, #d6dbe1); border-radius: 6px; background: var(--ui-surface, #fff); }
.ui-editor-aibar__actions { display: flex; gap: 8px; }
.ui-editor-imagedit { display: flex; flex-direction: column; gap: 10px; padding: 12px; border-top: 1px solid var(--ui-border, #d6dbe1); background: var(--ui-surface-alt, #f7f9fb); }
.ui-editor-imagedit__error { font-size: 12.5px; color: var(--ui-danger, #b02a37); }
.ui-editor-imagedit__preview { display: flex; justify-content: center; padding: 8px; background: var(--ui-surface, #fff); border: 1px solid var(--ui-border, #d6dbe1); border-radius: 6px; overflow: hidden; }
.ui-editor-imagedit__preview img { max-width: 100%; max-height: 200px; transition: transform .15s ease; }
.ui-editor-imagedit__ops { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.ui-editor-imagedit__w, .ui-editor-imagedit__h { width: 84px; }
.ui-editor-imagedit__alt { flex: 1; min-width: 160px; }
.ui-editor-imagedit__lock { display: inline-flex; align-items: center; gap: 4px; font-size: 12.5px; }
.ui-editor-imagedit__actions { display: flex; gap: 8px; }
.ui-editor-imagedit__ai { display: flex; flex-direction: column; gap: 8px; padding-top: 10px; border-top: 1px dashed var(--ui-border, #d6dbe1); }
.ui-editor-imagedit__ai-title { font-size: 12px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--ui-text-muted, #5b6572); }
.ui-editor-imagedit__ai-row { display: flex; gap: 8px; }
.ui-editor-imagedit__ai-prompt { flex: 1; min-width: 0; }
.ui-editor-imagedit__ai-preview { display: flex; justify-content: center; padding: 8px; background: var(--ui-surface, #fff); border: 1px solid var(--ui-border, #d6dbe1); border-radius: 6px; }
.ui-editor-imagedit__ai-preview img { max-width: 100%; max-height: 200px; }

/* == UiFileManager: ConfirmDelete dialog + Upload toolbar slot == */
.ui-filemanager-confirm-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,.4); z-index: var(--ui-z-1040, 1040); }
.ui-filemanager-confirm { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); min-width: 320px; max-width: 90vw; background: var(--ui-color-base-bg, #fff); color: var(--ui-color-text); border: 1px solid var(--ui-color-border); border-radius: var(--ui-radius); box-shadow: var(--ui-shadow-lg, 0 8px 24px rgba(0,0,0,.18)); padding: var(--ui-spacing-3, 16px); z-index: var(--ui-z-1050, 1050); }
.ui-filemanager-confirm-title { font-weight: 600; margin-bottom: var(--ui-spacing-2, 8px); }
.ui-filemanager-confirm-message { margin-bottom: var(--ui-spacing-3, 16px); }
.ui-filemanager-confirm-actions { display: flex; justify-content: flex-end; gap: var(--ui-spacing-2, 8px); }
.ui-filemanager-confirm-accept, .ui-filemanager-confirm-cancel { font: inherit; padding: var(--ui-spacing-1) var(--ui-spacing-2); border-radius: var(--ui-radius); border: 1px solid var(--ui-color-border); cursor: pointer; background: var(--ui-color-base-bg, #fff); color: var(--ui-color-text); }
.ui-filemanager-confirm-accept { background: var(--ui-color-error, #d32f2f); border-color: var(--ui-color-error, #d32f2f); color: #fff; }
.ui-filemanager-confirm-accept:hover { filter: brightness(.95); }
.ui-filemanager-confirm-cancel:hover { background: var(--ui-color-hover-bg); }
.ui-filemanager-toolbar-upload { display: inline-flex; align-items: center; margin-inline-start: var(--ui-spacing-1); }

/* == Round 2: Sankey hover, TaskBoard structure bar, Diagram ports, HeatMap thresholds, ChartWizard drag == */
.ui-sankey__node-group { cursor: pointer; }
.ui-sankey__link { transition: stroke-opacity .15s ease; }
.ui-sankey__node-group--active .ui-sankey__node { filter: brightness(1.15); }
.ui-sankey__link--active { stroke-opacity: .75; }
.ui-taskboard__structure-bar { display: flex; gap: .5rem; align-items: center; padding: .25rem 0; }
.ui-taskboard__add-column, .ui-taskboard__add-swimlane { cursor: pointer; }
.ui-taskboard__add-column-form, .ui-taskboard__add-swimlane-form, .ui-taskboard__column-rename-form, .ui-taskboard__swimlane-rename-form { display: inline-flex; gap: .25rem; align-items: center; }
.ui-taskboard__column-rename, .ui-taskboard__column-delete, .ui-taskboard__swimlane-rename, .ui-taskboard__swimlane-delete { border: none; background: transparent; cursor: pointer; color: var(--ui-text-secondary, inherit); }
.ui-diagram__connection-port { cursor: crosshair; }
.ui-heatmap { position: relative; }
.ui-heatmap__threshold { position: absolute; background: var(--ui-color-primary); pointer-events: none; z-index: 1; }
.ui-heatmap__threshold--row { left: 0; right: 0; height: 2px; }
.ui-heatmap__threshold--col { top: 0; bottom: 0; width: 2px; }
.ui-heatmap__cell--hover { outline: 2px solid var(--ui-color-primary); outline-offset: -1px; }
.ui-chart-wizard__series-row--dragover { outline: 2px dashed var(--ui-color-primary); outline-offset: -2px; }

/* == Round 4: inputs (floating label, select virtualization/highlight/listbox toolbar, calendar views, time-picker seconds, form layout, rating half, switch icon) == */
.ui-textbox--floating, .ui-maskedtextbox--floating { position: relative; }
.ui-numeric-floatwrap { position: relative; display: inline-flex; }
.ui-floatlabel__text { position: absolute; left: var(--ui-spacing-2, 8px); top: 50%; transform: translateY(-50%); transform-origin: left center; max-width: calc(100% - 2*var(--ui-spacing-2, 8px)); padding: 0 var(--ui-spacing-1, 4px); margin: 0; background: var(--ui-color-surface, #fff); color: var(--ui-color-text-muted, #6b7280); font: 14px var(--ui-font); line-height: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; pointer-events: none; transition: transform .12s ease, font-size .12s ease, color .12s ease; }
.ui-textbox--floating:focus-within .ui-floatlabel__text, .ui-textbox--filled .ui-floatlabel__text,
.ui-maskedtextbox--floating:focus-within .ui-floatlabel__text, .ui-maskedtextbox--filled .ui-floatlabel__text,
.ui-numeric-floatwrap:focus-within .ui-floatlabel__text, .ui-numeric-floatwrap.ui-filled .ui-floatlabel__text { top: 0; transform: translateY(-50%) scale(.82); color: var(--ui-color-primary, #3b82f6); }
.ui-textbox__password-toggle { border: none; background: transparent; cursor: pointer; color: var(--ui-color-text-muted, #6b7280); }
.ui-dropdownlist__virtual-spacer, .ui-multiselect__virtual-spacer, .ui-autocomplete__virtual-spacer { flex: 0 0 auto; pointer-events: none; padding: 0; border: 0; background: transparent; }
mark.ui-autocomplete__highlight, mark.ui-combobox__highlight { background: var(--ui-highlight-bg, #ffe58f); color: inherit; padding: 0; border-radius: 2px; }
.ui-multiselect__option--disabled { opacity: .5; cursor: not-allowed; }
.ui-listbox__toolbar { display: inline-flex; flex-direction: column; gap: 4px; padding: 4px; }
.ui-listbox__tool { display: inline-flex; align-items: center; justify-content: center; min-width: 2rem; min-height: 2rem; border: 1px solid var(--ui-color-border); border-radius: var(--ui-radius); background: var(--ui-color-base-bg, #fff); color: var(--ui-color-text); cursor: pointer; }
.ui-listbox__tool:disabled { opacity: .5; cursor: default; }
.ui-calendar__title--nav, .ui-multiviewcalendar__title--nav { cursor: pointer; }
.ui-calendar__view-grid, .ui-multiviewcalendar__view-grid { display: grid; gap: 4px; margin-top: var(--ui-gap, 8px); }
.ui-calendar__view-grid--year, .ui-multiviewcalendar__view-grid--year { grid-template-columns: repeat(4, 1fr); }
.ui-calendar__view-grid--decade, .ui-calendar__view-grid--century, .ui-multiviewcalendar__view-grid--decade, .ui-multiviewcalendar__view-grid--century { grid-template-columns: repeat(5, 1fr); }
.ui-calendar__cell, .ui-multiviewcalendar__cell { border: 1px solid transparent; border-radius: var(--ui-radius); background: transparent; cursor: pointer; padding: 6px; }
.ui-timepicker__list--with-seconds { display: flex; gap: var(--ui-gap, 8px); }
.ui-timepicker__times, .ui-timepicker__seconds { display: flex; flex-direction: column; overflow-y: auto; max-height: 220px; }
.ui-timepicker__second--selected, .ui-timepicker__option--selected { background: var(--ui-color-primary, #3b82f6); color: #fff; }
.ui-datetimepicker__time--split { display: flex; }
.ui-datetimepicker__hours, .ui-datetimepicker__minutes { display: flex; flex-direction: column; overflow-y: auto; max-height: 220px; }
.ui-datetimepicker__hour-option--selected, .ui-datetimepicker__minute-option--selected { background: var(--ui-color-primary, #3b82f6); color: #fff; }
.ui-daterangepicker__controls { display: flex; justify-content: center; gap: 8px; }
.ui-daterangepicker__swap { border: 1px solid var(--ui-color-border); background: var(--ui-color-base-bg, #fff); cursor: pointer; border-radius: var(--ui-radius); }
.ui-form-item--span { min-inline-size: 0; }
.ui-rating__star { position: relative; }
.ui-rating__half { position: absolute; inset: 0; width: 50%; overflow: hidden; color: #f5b301; padding: inherit; pointer-events: none; }
.ui-switch__thumb-icon { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
.ui-switch__thumb-icon .ui-icon { width: 12px; height: 12px; display: inline-flex; }

/* == Round 5: dismiss backdrop, tooltip focus, tabstrip scroll, treeview drag, chat/aiprompt, tile reorder == */
.ui-dismiss-backdrop { position: fixed; inset: 0; background: transparent; z-index: calc(var(--ui-z-dropdown, 1000) - 1); }
.ui-tooltip-host--focus .ui-tooltip { visibility: hidden; opacity: 0; }
.ui-tooltip-host--focus:focus-within:not(.ui-tooltip-host--hover-dismissed) .ui-tooltip { visibility: visible; opacity: 1; transition-delay: var(--ui-tooltip-show-delay, 0ms); }
.ui-dialog__message { margin: 0 0 12px; }
.ui-dialog__prompt-input { width: 100%; }
.ui-treeview__row--drop-target { outline: 2px solid var(--ui-color-primary); outline-offset: -2px; }
.ui-treeview__row[draggable="true"] { cursor: grab; }
.ui-tile-layout > *.ui-tile-layout-item--dragover { outline: 2px dashed var(--ui-color-primary); outline-offset: -2px; }
.ui-tabstrip__scroll { display: flex; align-items: stretch; gap: 2px; min-width: 0; }
.ui-tabstrip__scroll--vertical { flex-direction: column; }
.ui-tabstrip__viewport { flex: 1 1 auto; overflow: hidden; min-width: 0; }
.ui-tabstrip__track { width: max-content; transition: transform .2s ease; }
.ui-tabstrip:not(.ui-tabstrip--animate) .ui-tabstrip__track { transition: none; }
.ui-tabstrip__scroll-btn { flex: 0 0 auto; min-width: 24px; border: 0; background: transparent; cursor: pointer; color: var(--ui-color-text); }
.ui-tabstrip__scroll-btn[aria-disabled="true"] { opacity: .4; cursor: default; }
.ui-chat-typing { display: inline-flex; align-items: center; gap: 6px; }
.ui-chat-typing-dots { display: inline-flex; gap: 3px; }
.ui-chat-typing-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--ui-color-text-muted, #6b7280); animation: ui-chat-typing-blink 1s infinite; }
.ui-chat-typing-dot:nth-child(2) { animation-delay: .2s; }
.ui-chat-typing-dot:nth-child(3) { animation-delay: .4s; }
@keyframes ui-chat-typing-blink { 0%, 80%, 100% { opacity: .3; } 40% { opacity: 1; } }
.ui-chat-suggestions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.ui-chat-suggestion { padding: 3px 12px; border: 1px solid var(--ui-color-border); border-radius: 999px; background: var(--ui-color-base-bg, #fff); cursor: pointer; font-size: 12.5px; }
.ui-chat-attachments { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.ui-chat-attachment { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border: 1px solid var(--ui-color-border); border-radius: var(--ui-radius); font-size: 12px; }
.ui-aiprompt-commands { display: flex; flex-direction: column; gap: 2px; }
.ui-aiprompt-commands--nested { margin-inline-start: 12px; }
.ui-aiprompt-command { display: flex; align-items: center; gap: 6px; padding: 4px 8px; border: 0; background: transparent; cursor: pointer; text-align: start; }
.ui-aiprompt-command--disabled { opacity: .5; cursor: default; }
.ui-aiprompt-generate-button--busy { opacity: .7; }

/* ── Tooltip detached режим (TargetSelector): host-от е фиксна ghost-обвивка врз таргетот ── */
.ui-tooltip-host--detached { position: fixed; display: block; pointer-events: none; z-index: var(--ui-z-tooltip); }
/* Доцнењата (show/hide delay) во detached режим ги води JS (setTimeout) — CSS транзицијата се гаси
   за да нема заглавена opacity-транзиција при JS-тогл на класата. */
.ui-tooltip-host--detached .ui-tooltip { visibility: hidden; opacity: 0; transition: none; }
.ui-tooltip-host--detached.ui-tooltip-host--detached-on .ui-tooltip { visibility: visible; opacity: 1; pointer-events: auto; }

/* ═══════════════════════════════════════════════════════════════════════════
   UiCodeEditor (Editor v2 Фаза 1 — Code view PRO): слоевит уредувач.
   Слоеви (перфектно преклопени, иста monospace метрика): gutter | surface {
   current-line лента, обоен <pre> highlight, провидна <textarea> за caret/input }.
   ═══════════════════════════════════════════════════════════════════════════ */
.ui-codeeditor {
  --ui-code-line-height: 1.5em;
  position: relative;
  display: flex;
  align-items: stretch;
  font-family: var(--ui-font-mono, ui-monospace, "Cascadia Code", "Consolas", "SF Mono", "Menlo", monospace);
  font-size: var(--ui-code-font-size, 13px);
  line-height: var(--ui-code-line-height);
  tab-size: 4;
  background: var(--ui-color-surface, #fff);
  color: var(--ui-color-text, #1b1f24);
  border: 1px solid var(--ui-color-border, #d6d6de);
  border-radius: var(--ui-border-radius, 6px);
  overflow: auto;
}
.ui-codeeditor__gutter {
  flex: 0 0 auto;
  text-align: right;
  padding: 8px 8px 8px 10px;
  user-select: none;
  color: var(--ui-color-text-muted, #8a8a95);
  background: var(--ui-color-surface-alt, #f6f6f9);
  border-right: 1px solid var(--ui-color-border, #d6d6de);
}
.ui-codeeditor__lineno { white-space: pre; }
.ui-codeeditor__lineno--current { color: var(--ui-color-text, #1b1f24); font-weight: 600; }
.ui-codeeditor__surface {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
}
.ui-codeeditor__current-line {
  position: absolute;
  left: 0; right: 0;
  height: var(--ui-code-line-height);
  background: var(--ui-color-hover, rgba(70,100,228,0.06));
  pointer-events: none;
}
/* Highlight и input мора да делат ИДЕНТИЧНА метрика/padding за да се преклопуваат точно. */
.ui-codeeditor__highlight,
.ui-codeeditor__input {
  margin: 0;
  padding: 8px 10px;
  font: inherit;
  line-height: inherit;
  tab-size: inherit;
  white-space: pre;
  overflow-wrap: normal;
  word-break: normal;
  border: 0;
}
.ui-codeeditor__highlight {
  position: relative;
  pointer-events: none;
  min-height: var(--ui-code-line-height);
}
.ui-codeeditor__highlight code { font: inherit; white-space: pre; }
.ui-codeeditor__input {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  resize: none;
  overflow: hidden;
  background: transparent;
  color: transparent;
  caret-color: var(--ui-color-text, #1b1f24);
  outline: none;
}
.ui-codeeditor--readonly .ui-codeeditor__input { caret-color: transparent; }

/* Matched bracket/tag highlight (се поставува од C# логиката преку inline марка или клас). */
.ui-codeeditor__match { outline: 1px solid var(--ui-color-primary, #4664e4); border-radius: 2px; }

/* ── Token бои (споделени со source-view; преку --ui-* токени, тема-свесни) ── */
.ui-code-tok { font: inherit; }
.ui-code-comment { color: var(--ui-code-comment, #6a737d); font-style: italic; }
.ui-code-tagname { color: var(--ui-code-tag, #22863a); }
.ui-code-attributename { color: var(--ui-code-attr, #6f42c1); }
.ui-code-attributevalue,
.ui-code-string { color: var(--ui-code-string, #032f62); }
.ui-code-keyword { color: var(--ui-code-keyword, #d73a49); font-weight: 600; }
.ui-code-number { color: var(--ui-code-number, #005cc5); }
.ui-code-punctuation { color: var(--ui-color-text-muted, #586069); }
.ui-code-cssselector { color: var(--ui-code-tag, #22863a); }
.ui-code-cssproperty { color: var(--ui-code-attr, #6f42c1); }
.ui-code-cssvalue { color: var(--ui-code-number, #005cc5); }
.ui-code-entity { color: var(--ui-code-number, #005cc5); }
.ui-code-doctype { color: var(--ui-color-text-muted, #6a737d); }

@media (prefers-color-scheme: dark) {
  .ui-codeeditor {
    --ui-code-comment: #8b949e;
    --ui-code-tag: #7ee787;
    --ui-code-attr: #d2a8ff;
    --ui-code-string: #a5d6ff;
    --ui-code-keyword: #ff7b72;
    --ui-code-number: #79c0ff;
  }
}
:root[data-theme="dark"] .ui-codeeditor {
  --ui-code-comment: #8b949e;
  --ui-code-tag: #7ee787;
  --ui-code-attr: #d2a8ff;
  --ui-code-string: #a5d6ff;
  --ui-code-keyword: #ff7b72;
  --ui-code-number: #79c0ff;
}

/* Editor v2 Фаза 2 — Split view (код + дизајн рамо-до-рамо, Dreamweaver терк). */
.ui-editor-split{display:flex;flex-direction:row;width:100%;min-height:var(--ui-editor-height,250px);border:1px solid var(--ui-border-color,#d0d0d0);border-radius:var(--ui-border-radius,4px);overflow:hidden;box-sizing:border-box}
.ui-editor-split--vertical{flex-direction:column}
.ui-editor-split__pane{flex:1 1 50%;min-width:0;min-height:0;overflow:auto;display:flex;flex-direction:column}
.ui-editor-split__pane>*{flex:1 1 auto;min-height:0}
.ui-editor-split__pane--code{background:var(--ui-code-bg,#1e1e1e)}
.ui-editor-split__gutter{flex:0 0 auto;background:var(--ui-border-color,#d0d0d0);align-self:stretch}
.ui-editor-split--horizontal>.ui-editor-split__gutter{width:6px;cursor:col-resize}
.ui-editor-split--vertical>.ui-editor-split__gutter{height:6px;cursor:row-resize}
@media(max-width:640px){.ui-editor-split{flex-direction:column}.ui-editor-split--horizontal>.ui-editor-split__gutter{width:auto;height:6px;cursor:row-resize}}

/* Editor v2 Фаза 3 — IntelliSense completion popup (во UiCodeEditor surface). */
.ui-codeeditor__completions{position:absolute;z-index:var(--ui-z-popup,1050);min-width:180px;max-width:360px;max-height:240px;overflow-y:auto;background:var(--ui-color-surface,#fff);color:var(--ui-color-text,#1b1f24);border:1px solid var(--ui-color-border,#d6d6de);border-radius:var(--ui-border-radius,6px);box-shadow:var(--ui-shadow-popup,0 4px 16px rgba(0,0,0,.16));padding:4px;font-family:var(--ui-font-mono,ui-monospace,monospace);font-size:13px}
.ui-codeeditor__completion{display:flex;align-items:baseline;gap:8px;padding:3px 8px;border-radius:4px;cursor:pointer;white-space:nowrap}
.ui-codeeditor__completion--selected{background:var(--ui-color-primary,#4664e4);color:#fff}
.ui-codeeditor__completion-label{flex:0 0 auto}
.ui-codeeditor__completion-detail{flex:1 1 auto;text-align:right;opacity:.7;font-size:11.5px}
.ui-codeeditor__completion--selected .ui-codeeditor__completion-detail{opacity:.85}

/* Editor v2 Фаза 5 — HTML lint (squiggles + статус) + code folding маркери. */
.ui-codeeditor__lint-overlay{position:absolute;top:0;left:0;pointer-events:none}
.ui-codeeditor__squiggle{text-decoration:wavy underline;text-decoration-skip-ink:none;background:transparent}
.ui-codeeditor__squiggle--error{text-decoration-color:var(--ui-color-danger,#d13438)}
.ui-codeeditor__squiggle--warning{text-decoration-color:var(--ui-color-warning,#d18f00)}
.ui-codeeditor__squiggle--info{text-decoration-color:var(--ui-color-info,#4664e4)}
.ui-codeeditor__lint-status{display:flex;align-items:center;gap:12px;padding:3px 10px;font-family:var(--ui-font-mono,ui-monospace,monospace);font-size:12px;border-top:1px solid var(--ui-color-border,#d6d6de);background:var(--ui-color-surface-alt,#f6f6f9);color:var(--ui-color-text-muted,#6a6a75)}
.ui-codeeditor__lint-summary{display:flex;gap:10px}
.ui-codeeditor__lint-count{display:inline-flex;align-items:center;gap:4px}
.ui-codeeditor__lint-count--error{color:var(--ui-color-danger,#d13438)}
.ui-codeeditor__lint-count--warning{color:var(--ui-color-warning,#d18f00)}
.ui-codeeditor__lint-count--info{color:var(--ui-color-info,#4664e4)}
.ui-codeeditor__lint-empty{opacity:.7}
.ui-codeeditor__lint-list{list-style:none;margin:0;padding:0;max-height:120px;overflow-y:auto}
.ui-codeeditor__lint-item{display:flex;gap:8px;padding:2px 10px;cursor:pointer}
.ui-codeeditor__lint-item:hover{background:var(--ui-color-hover,rgba(70,100,228,.06))}
.ui-codeeditor__lint-item--error{border-left:3px solid var(--ui-color-danger,#d13438)}
.ui-codeeditor__lint-item--warning{border-left:3px solid var(--ui-color-warning,#d18f00)}
.ui-codeeditor__lint-item--info{border-left:3px solid var(--ui-color-info,#4664e4)}
.ui-codeeditor__fold-toggle{display:inline-block;width:1em;text-align:center;cursor:pointer;user-select:none;color:var(--ui-color-text-muted,#8a8a95)}
.ui-codeeditor__fold-toggle:hover{color:var(--ui-color-text,#1b1f24)}

/* Editor v2 Ф6 — Стил-менаџер (CSS Designer панел). */
.ui-style-manager__panel{display:flex;flex-direction:column;gap:8px;padding:10px;font-size:13px;border:1px solid var(--ui-color-border,#d6d6de);border-radius:var(--ui-border-radius,6px);background:var(--ui-color-surface,#fff);min-width:240px}
.ui-style-manager__heading{font-weight:600;margin:0}
.ui-style-manager__list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px}
.ui-style-manager__item{display:flex;justify-content:space-between;align-items:center;padding:3px 8px;border-radius:4px;cursor:pointer}
.ui-style-manager__item:hover{background:var(--ui-color-hover,rgba(70,100,228,.06))}
.ui-style-manager__add{display:flex;gap:6px}
.ui-style-manager__new{flex:1 1 auto;min-width:0}
.ui-style-manager__editor{display:flex;flex-direction:column;gap:8px;border-top:1px solid var(--ui-color-border,#d6d6de);padding-top:8px}
.ui-style-manager__editor-head{display:flex;justify-content:space-between;align-items:center;gap:8px}
.ui-style-manager__editor-selector{font-family:var(--ui-font-mono,ui-monospace,monospace);font-weight:600}
.ui-style-manager__fields{display:grid;grid-template-columns:auto 1fr;gap:6px 10px;align-items:center}
.ui-style-manager__field-label{color:var(--ui-color-text-muted,#6a6a75)}

/* Editor v2 Ф7 — Историја панел + Diff преглед. */
.ui-editor-history__title{font-weight:600;margin:0 0 6px}
.ui-editor-history__list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;max-height:280px;overflow-y:auto}
.ui-editor-history__item{display:flex;justify-content:space-between;gap:10px;padding:3px 8px;border-radius:4px;cursor:pointer}
.ui-editor-history__item:hover{background:var(--ui-color-hover,rgba(70,100,228,.06))}
.ui-editor-history__step--current{background:var(--ui-color-primary,#4664e4);color:#fff}
.ui-editor-history__step--checkpoint .ui-editor-history__label{font-weight:600}
.ui-editor-history__label{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ui-editor-history__time{flex:0 0 auto;opacity:.7;font-size:11.5px}
.ui-editor-diff{white-space:pre-wrap;font-family:var(--ui-font-mono,ui-monospace,monospace);font-size:13px}
.ui-editor-diff__added{background:var(--ui-diff-added-bg,rgba(46,160,67,.18));color:var(--ui-diff-added,#116329);text-decoration:none}
.ui-editor-diff__removed{background:var(--ui-diff-removed-bg,rgba(209,52,56,.16));color:var(--ui-diff-removed,#a40e26);text-decoration:line-through}
.ui-editor-diff__unchanged{color:inherit}

/* Editor v2 Ф4 — Property inspector + DOM breadcrumb + Tag tree. */
.ui-editor-inspector{display:flex;flex-direction:column;gap:8px;padding:10px;font-size:13px;border:1px solid var(--ui-color-border,#d6d6de);border-radius:var(--ui-border-radius,6px);background:var(--ui-color-surface,#fff);min-width:240px}
.ui-editor-inspector__empty{color:var(--ui-color-text-muted,#6a6a75);font-style:italic}
.ui-editor-inspector__head{display:flex;align-items:baseline;gap:8px;min-width:0}
.ui-editor-inspector__tag{font-family:var(--ui-font-mono,ui-monospace,monospace);font-weight:600}
.ui-editor-inspector__path{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--ui-color-text-muted,#6a6a75);font-size:12px}
.ui-editor-inspector__table{width:100%;border-collapse:collapse}
.ui-editor-inspector__table th,.ui-editor-inspector__table td{text-align:left;padding:2px 4px;vertical-align:middle}
.ui-editor-inspector__row+.ui-editor-inspector__row{border-top:1px solid var(--ui-color-border,#d6d6de)}
.ui-editor-inspector__name{font-family:var(--ui-font-mono,ui-monospace,monospace);font-weight:500;white-space:nowrap}
.ui-editor-inspector__editor{width:100%}
.ui-editor-inspector__value,.ui-editor-inspector__new-name,.ui-editor-inspector__new-value{width:100%;min-width:0;box-sizing:border-box}
.ui-editor-inspector__value[readonly]{background:var(--ui-color-hover,rgba(70,100,228,.06))}
.ui-editor-inspector__actions{width:1%}
.ui-editor-inspector__remove,.ui-editor-inspector__add{border:0;background:transparent;cursor:pointer;line-height:1;padding:2px 6px;border-radius:4px;color:var(--ui-color-text-muted,#6a6a75)}
.ui-editor-inspector__remove:hover,.ui-editor-inspector__add:hover{background:var(--ui-color-hover,rgba(70,100,228,.06));color:inherit}
.ui-editor-inspector__add-row{border-top:1px solid var(--ui-color-border,#d6d6de)}
.ui-editor-breadcrumb{font-size:12px;overflow-x:auto}
.ui-editor-breadcrumb__list{list-style:none;margin:0;padding:0;display:flex;flex-wrap:nowrap;align-items:center}
.ui-editor-breadcrumb__item{display:flex;align-items:center;flex:0 0 auto}
.ui-editor-breadcrumb__sep{margin:0 2px;opacity:.55}
.ui-editor-breadcrumb__crumb{border:0;background:transparent;cursor:pointer;padding:2px 6px;border-radius:4px;font-family:var(--ui-font-mono,ui-monospace,monospace);font-size:12px;white-space:nowrap;color:inherit}
.ui-editor-breadcrumb__crumb:hover{background:var(--ui-color-hover,rgba(70,100,228,.06))}
.ui-editor-breadcrumb__crumb--selected{background:var(--ui-color-primary,#4664e4);color:#fff}
.ui-editor-tagtree{font-size:12.5px;max-height:280px;overflow:auto}
.ui-editor-tagtree__empty{color:var(--ui-color-text-muted,#6a6a75);font-style:italic;padding:4px}
.ui-editor-tagtree__list{list-style:none;margin:0;padding:0}
.ui-editor-tagtree__list .ui-editor-tagtree__list{padding-inline-start:14px;border-inline-start:1px dotted var(--ui-color-border,#d6d6de)}
.ui-editor-tagtree__item{display:block}
.ui-editor-tagtree__node{display:block;width:100%;text-align:start;border:0;background:transparent;cursor:pointer;padding:2px 6px;border-radius:4px;font-family:var(--ui-font-mono,ui-monospace,monospace);white-space:nowrap;color:inherit}
.ui-editor-tagtree__node:hover{background:var(--ui-color-hover,rgba(70,100,228,.06))}
.ui-editor-tagtree__node--selected{background:var(--ui-color-primary,#4664e4);color:#fff}

/* ═══════════════════════════════════════════════════════════════════════════
   Editor v2 Word-колосек: page-view (A4 листови), track changes, стил-галерија,
   TOC и фусноти. Пагинацијата е чиста C# пресметка (без JS) → SSR-безбедна.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Page-view: листови со margins, header/footer зони, број на страница ── */
.ui-editor-pageview{display:flex;flex-direction:column;align-items:center;gap:16px;padding:16px;background:var(--ui-color-surface-alt,#f6f6f9);overflow:auto}
.ui-editor-pageview__page{position:relative;box-sizing:border-box;background:#fff;color:#1b1f24;box-shadow:0 1px 4px rgba(0,0,0,.18);flex:0 0 auto}
.ui-editor-pageview__header,.ui-editor-pageview__footer{position:absolute;left:0;right:0;display:flex;align-items:center;padding:0 var(--ui-page-margin-x,20mm);color:var(--ui-color-text-muted,#6a6a75);font-size:.85em;overflow:hidden}
.ui-editor-pageview__header{top:0}
.ui-editor-pageview__footer{bottom:0;justify-content:space-between}
.ui-editor-pageview__content{position:relative;box-sizing:border-box;overflow:hidden}
.ui-editor-pageview__pagenum{font-variant-numeric:tabular-nums}
/* Визуелни водилки за margins (како Word „Прикажи граници на текстот"). */
.ui-editor-pageview--guides .ui-editor-pageview__content{outline:1px dashed var(--ui-color-border,#c8c8d0);outline-offset:0}
.ui-editor-pageview__guides{position:absolute;inset:0;pointer-events:none}
/* Експлицитен прекин на страница во содржината. */
.ui-page-break{break-before:page;page-break-before:always;border:0;border-top:1px dashed var(--ui-color-border,#c8c8d0);margin:12px 0}

@media print{
  .ui-editor-pageview{background:none;padding:0;gap:0}
  .ui-editor-pageview__page{box-shadow:none;break-after:page;page-break-after:always}
  .ui-editor-pageview__page:last-child{break-after:auto;page-break-after:auto}
  .ui-editor-pageview--print-only{display:block}
}
.ui-editor-pageview--print-only{display:none}

/* ── Track changes: ins/del во содржината + панел со ревизии ── */
ins[data-ui-rev]{text-decoration:underline;text-decoration-color:var(--ui-track-insert,#116329);background:var(--ui-track-insert-bg,rgba(46,160,67,.14))}
del[data-ui-rev]{text-decoration:line-through;text-decoration-color:var(--ui-track-delete,#a40e26);background:var(--ui-track-delete-bg,rgba(209,52,56,.12))}
.ui-track-format{background:var(--ui-track-format-bg,rgba(70,100,228,.12));border-bottom:1px dotted var(--ui-color-primary,#4664e4)}
.ui-editor-revisions{display:flex;flex-direction:column;gap:8px;padding:10px;font-size:13px;border:1px solid var(--ui-color-border,#d6d6de);border-radius:var(--ui-border-radius,6px);background:var(--ui-color-surface,#fff);min-width:260px}
.ui-editor-revisions__title{font-weight:600;margin:0}
.ui-editor-revisions__toolbar{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.ui-editor-revisions__filter{flex:1 1 auto;min-width:0}
.ui-editor-revisions__list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px;max-height:300px;overflow-y:auto}
.ui-editor-revisions__empty{color:var(--ui-color-text-muted,#6a6a75);font-style:italic}
.ui-editor-revisions__list>li{display:grid;grid-template-columns:auto 1fr auto;gap:4px 8px;align-items:center;padding:4px 8px;border-radius:4px;border-left:3px solid transparent}
.ui-editor-revisions__item--insert{border-left-color:var(--ui-track-insert,#116329)}
.ui-editor-revisions__item--delete{border-left-color:var(--ui-track-delete,#a40e26)}
.ui-editor-revisions__item--format{border-left-color:var(--ui-color-primary,#4664e4)}
.ui-editor-revisions__initials{display:inline-flex;align-items:center;justify-content:center;width:1.9em;height:1.9em;border-radius:50%;background:var(--ui-color-primary,#4664e4);color:#fff;font-size:11px;font-weight:600}
.ui-editor-revisions__author{font-weight:500}
.ui-editor-revisions__kind,.ui-editor-revisions__time{color:var(--ui-color-text-muted,#6a6a75);font-size:11.5px}
.ui-editor-revisions__excerpt{grid-column:2;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--ui-color-text-muted,#6a6a75)}
.ui-editor-revisions__actions{display:flex;gap:4px}
.ui-editor-revisions__accept,.ui-editor-revisions__reject,.ui-editor-revisions__accept-all,.ui-editor-revisions__reject-all{border:1px solid var(--ui-color-border,#d6d6de);background:var(--ui-color-surface,#fff);cursor:pointer;padding:2px 8px;border-radius:4px;font-size:12px;color:inherit}
.ui-editor-revisions__accept:hover,.ui-editor-revisions__accept-all:hover{border-color:var(--ui-track-insert,#116329);color:var(--ui-track-insert,#116329)}
.ui-editor-revisions__reject:hover,.ui-editor-revisions__reject-all:hover{border-color:var(--ui-track-delete,#a40e26);color:var(--ui-track-delete,#a40e26)}

/* ── Стил-галерија (како Word ribbon стилови) ── */
.ui-style-gallery{display:flex;flex-wrap:wrap;gap:6px;padding:8px;border:1px solid var(--ui-color-border,#d6d6de);border-radius:var(--ui-border-radius,6px);background:var(--ui-color-surface,#fff)}
.ui-style-gallery__item{display:flex;flex-direction:column;justify-content:center;min-width:88px;max-width:160px;padding:6px 8px;border:1px solid var(--ui-color-border,#d6d6de);border-radius:4px;background:var(--ui-color-surface,#fff);cursor:pointer;overflow:hidden;text-align:start}
.ui-style-gallery__item:hover{border-color:var(--ui-color-primary,#4664e4);background:var(--ui-color-hover,rgba(70,100,228,.06))}
.ui-style-gallery__name{font-size:11px;color:var(--ui-color-text-muted,#6a6a75);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ui-style-gallery__new{display:flex;gap:6px;align-items:center;flex:1 1 100%;margin-top:4px}
.ui-style-gallery__new-name{flex:1 1 auto;min-width:0}

/* ── TOC + фусноти ── */
.ui-toc{margin:0 0 16px;padding:10px 14px;border:1px solid var(--ui-color-border,#d6d6de);border-radius:var(--ui-border-radius,6px);background:var(--ui-color-surface-alt,#f6f6f9)}
.ui-toc ol,.ui-toc ul{margin:0;padding-inline-start:18px}
.ui-toc a{color:inherit;text-decoration:none}
.ui-toc a:hover{text-decoration:underline}
.ui-footnote-ref{font-size:.75em;vertical-align:super;line-height:0}
.ui-footnote-ref a{text-decoration:none;color:var(--ui-color-primary,#4664e4)}
.ui-footnotes{margin-top:24px;padding-top:8px;border-top:1px solid var(--ui-color-border,#d6d6de);font-size:.88em;color:var(--ui-color-text-muted,#4a4a55)}
.ui-footnotes ol{margin:0;padding-inline-start:20px}
.ui-footnote__back{margin-inline-start:6px;text-decoration:none;color:var(--ui-color-primary,#4664e4)}

/* ═══════════════════════════════════════════════════════════════════════════
   Editor v2 Ф8/Ф9/Ф10: media дијалог, spell-check, специјални знаци, a11y
   панел, responsive preview, табела-дијалог, коментари (review), fullscreen.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Заеднички изглед на панел/дијалог во едиторот ── */
.ui-editor-media-dialog,.ui-editor-table-dialog,.ui-editor-a11y,.ui-editor-spellpanel,.ui-editor-comments,.ui-editor-specialchars{display:flex;flex-direction:column;gap:8px;padding:10px;font-size:13px;border:1px solid var(--ui-color-border,#d6d6de);border-radius:var(--ui-border-radius,6px);background:var(--ui-color-surface,#fff);min-width:260px}
.ui-editor-media-dialog__title,.ui-editor-table-dialog__title,.ui-editor-a11y__title,.ui-editor-comments__title{font-weight:600;margin:0}
.ui-editor-media-dialog__label,.ui-editor-table-dialog__label{display:flex;flex-direction:column;gap:3px;color:var(--ui-color-text-muted,#6a6a75);font-size:12px}
.ui-editor-media-dialog__size,.ui-editor-table-dialog__field{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.ui-editor-table-dialog__input{min-width:0;flex:1 1 auto}
.ui-editor-media-dialog__autoplay{display:flex;gap:6px;align-items:center}
.ui-editor-media-dialog__error{color:var(--ui-color-danger,#d13438);font-size:12px}
.ui-editor-media-dialog__actions,.ui-editor-table-dialog__actions,.ui-editor-comments__actions{display:flex;gap:6px;justify-content:flex-end}

/* ── Ф9 A11y checker панел ── */
.ui-editor-a11y__summary{display:flex;gap:10px;align-items:center;flex-wrap:wrap;color:var(--ui-color-text-muted,#6a6a75);font-size:12px}
.ui-editor-a11y__badge{display:inline-flex;align-items:center;gap:4px;padding:1px 7px;border-radius:999px;font-size:11.5px;font-weight:600;background:var(--ui-color-surface-alt,#f6f6f9)}
.ui-editor-a11y__list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px;max-height:280px;overflow-y:auto}
.ui-editor-a11y__list>li{display:flex;flex-direction:column;gap:2px;padding:4px 8px;border-radius:4px;border-left:3px solid var(--ui-color-warning,#d18f00)}
.ui-editor-a11y__list>li:hover{background:var(--ui-color-hover,rgba(70,100,228,.06))}
.ui-editor-a11y__message{line-height:1.35}
.ui-editor-a11y__snippet{font-family:var(--ui-font-mono,ui-monospace,monospace);font-size:11.5px;color:var(--ui-color-text-muted,#6a6a75);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ui-editor-a11y__empty{color:var(--ui-color-text-muted,#6a6a75);font-style:italic}
.ui-editor-a11y__button{align-self:flex-start}

/* ── Ф9 Responsive preview ── */
.ui-editor-preview{display:flex;flex-direction:column;gap:8px;align-items:center}
.ui-editor-preview__bar{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.ui-editor-preview__device{border:1px solid var(--ui-color-border,#d6d6de);background:var(--ui-color-surface,#fff);cursor:pointer;padding:3px 10px;border-radius:4px;font-size:12px;color:inherit}
.ui-editor-preview__device[aria-pressed="true"]{background:var(--ui-color-primary,#4664e4);border-color:var(--ui-color-primary,#4664e4);color:#fff}
.ui-editor-preview__content{border:1px solid var(--ui-color-border,#d6d6de);border-radius:var(--ui-border-radius,6px);background:#fff;overflow:auto;max-width:100%;transition:width .18s ease}
.ui-editor-preview__frame--mobile{width:375px}
.ui-editor-preview__frame--tablet{width:768px}
.ui-editor-preview__frame--desktop{width:1280px}
.ui-editor-preview__frame--custom{width:var(--ui-editor-preview-width,100%)}
.ui-editor-preview__iframe{display:block;width:100%;min-height:320px;border:0}

/* ── Ф8 Spell-check ── */
.ui-editor-spell-error{text-decoration:wavy underline;text-decoration-color:var(--ui-color-danger,#d13438);text-decoration-skip-ink:none;cursor:context-menu}
.ui-editor-spellpanel__off{color:var(--ui-color-text-muted,#6a6a75);font-style:italic}
.ui-editor-spellpanel__list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px;max-height:260px;overflow-y:auto}
.ui-editor-spellpanel__issue{display:flex;flex-wrap:wrap;gap:6px;align-items:baseline;padding:4px 8px;border-radius:4px}
.ui-editor-spellpanel__issue:hover{background:var(--ui-color-hover,rgba(70,100,228,.06))}
.ui-editor-spellpanel__word{font-weight:600}
.ui-editor-spellpanel__preview{color:var(--ui-color-text-muted,#6a6a75);font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ui-editor-spellpanel__menu{display:flex;gap:4px;flex-wrap:wrap}
.ui-editor-spellpanel__suggestion{border:1px solid var(--ui-color-border,#d6d6de);background:var(--ui-color-surface,#fff);cursor:pointer;padding:1px 8px;border-radius:999px;font-size:12px;color:inherit}
.ui-editor-spellpanel__suggestion:hover{border-color:var(--ui-color-primary,#4664e4);color:var(--ui-color-primary,#4664e4)}
.ui-editor-spellpanel__adddict{border:0;background:transparent;cursor:pointer;color:var(--ui-color-text-muted,#6a6a75);font-size:12px;text-decoration:underline}

/* ── Ф8 Специјални знаци ── */
.ui-editor-specialchars__tabs{display:flex;gap:4px;flex-wrap:wrap}
.ui-editor-specialchars__tab{border:1px solid var(--ui-color-border,#d6d6de);background:var(--ui-color-surface,#fff);cursor:pointer;padding:2px 9px;border-radius:999px;font-size:12px;color:inherit}
.ui-editor-specialchars__tab[aria-selected="true"]{background:var(--ui-color-primary,#4664e4);border-color:var(--ui-color-primary,#4664e4);color:#fff}
.ui-editor-specialchars__grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(2.2em,1fr));gap:3px;max-height:220px;overflow-y:auto}
.ui-editor-specialchars__char{display:flex;align-items:center;justify-content:center;aspect-ratio:1;border:1px solid transparent;background:transparent;cursor:pointer;border-radius:4px;font-size:16px;line-height:1;color:inherit}
.ui-editor-specialchars__char:hover{border-color:var(--ui-color-primary,#4664e4);background:var(--ui-color-hover,rgba(70,100,228,.06))}

/* ── Ф10 Коментари (review режим) ── */
.ui-editor-comments__list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:4px;max-height:300px;overflow-y:auto}
.ui-editor-comments__item{display:flex;flex-direction:column;gap:2px;padding:6px 8px;border-radius:4px;border-left:3px solid var(--ui-color-primary,#4664e4);background:var(--ui-color-surface-alt,#f6f6f9)}
.ui-editor-comments__item[data-resolved="true"]{opacity:.6;border-left-color:var(--ui-color-text-muted,#8a8a95)}
.ui-editor-comments__meta{display:flex;gap:8px;align-items:baseline;font-size:11.5px;color:var(--ui-color-text-muted,#6a6a75)}
.ui-editor-comments__author{font-weight:600;color:var(--ui-color-text,#1b1f24)}
.ui-editor-comments__text{line-height:1.4;white-space:pre-wrap}
.ui-editor-comments__addrow{display:flex;gap:6px;align-items:flex-start}
.ui-editor-comments__addrow textarea{flex:1 1 auto;min-width:0;resize:vertical}
mark[data-ui-comment]{background:var(--ui-comment-highlight,rgba(255,214,10,.35));border-bottom:1px solid var(--ui-color-warning,#d18f00);cursor:pointer}

/* ── Ф9 Fullscreen (distraction-free) ── */
.ui-editor--fullscreen{position:fixed;inset:0;z-index:var(--ui-z-modal,1050);margin:0;border-radius:0;max-width:none;max-height:none;background:var(--ui-color-surface,#fff)}

/* ── TOC наслов (дополнение кон .ui-toc) ── */
.ui-editor-toc__title{font-weight:600;margin:0 0 6px}

/* Editor v2 Ф2-полиш — интерактивен splitter (drag преку pointer capture). */
.ui-editor-split__gutter{transition:background .12s}
.ui-editor-split__gutter:hover,.ui-editor-split__gutter:active{background:var(--ui-color-primary,#4664e4)}
.ui-editor-split--dragging{user-select:none;cursor:inherit}

/* Editor v2 — богат HTML source-view (обоен код + lint) + вграден сплит-поглед. */
.ui-editor-source-rich{display:flex;flex-direction:column;min-height:180px}
.ui-editor-source-rich .ui-codeeditor{flex:1 1 auto;min-height:180px;border-radius:0}
.ui-editor-content--split{display:grid;grid-template-columns:1fr 1fr;gap:0}
.ui-editor-content--split .ui-editor-surface{border-right:1px solid var(--ui-color-border,#d6d6de)}
.ui-editor-content--split .ui-editor-source-rich{border-left:0}
@media(max-width:720px){.ui-editor-content--split{grid-template-columns:1fr;grid-template-rows:1fr 1fr}.ui-editor-content--split .ui-editor-surface{border-right:0;border-bottom:1px solid var(--ui-color-border,#d6d6de)}}

/* ═══ Супер грид Бран Б: Appearance/Density пресети, условно форматирање, skeleton loading ═══ */
.ui-grid-cell.ui-format-positive,.ui-grid-row.ui-format-positive>td{color:var(--ui-color-success,#2e7d32);}
.ui-grid-cell.ui-format-negative,.ui-grid-row.ui-format-negative>td{color:var(--ui-color-error,#d23b3b);}
.ui-grid-cell.ui-format-warning,.ui-grid-row.ui-format-warning>td{color:var(--ui-color-warning,#ed8a19);}
.ui-grid-cell.ui-format-strong,.ui-grid-row.ui-format-strong>td{font-weight:600;}
.ui-grid-cell.ui-format-muted,.ui-grid-row.ui-format-muted>td{opacity:.65;}
.ui-grid-row.ui-format-band-positive{background:color-mix(in srgb,var(--ui-color-success,#2e7d32) 12%,transparent);}
.ui-grid-row.ui-format-band-negative{background:color-mix(in srgb,var(--ui-color-error,#d23b3b) 12%,transparent);}
.ui-grid-row.ui-format-band-warning{background:color-mix(in srgb,var(--ui-color-warning,#ed8a19) 14%,transparent);}

.ui-grid-row--skeleton { pointer-events: none; }
.ui-grid-cell--skeleton { padding: var(--ui-spacing-2, 8px) var(--ui-spacing-4, 16px); }
.ui-grid__skeleton-cell {
  height: 14px; min-width: 24px;
  border-radius: var(--ui-radius-sm, 3px);
  background-image: linear-gradient(90deg,
    var(--ui-color-base-bg-hover, #e6e8eb) 25%,
    var(--ui-color-border, #c2cad4) 37%,
    var(--ui-color-base-bg-hover, #e6e8eb) 63%);
  background-size: 400% 100%;
  animation: ui-grid-skeleton-pulse 1.6s ease-in-out infinite;
}
@keyframes ui-grid-skeleton-pulse { 0% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } }
@media (prefers-reduced-motion: reduce) {
  .ui-grid__skeleton-cell { animation: none; background-image: none; background-color: var(--ui-color-base-bg-hover, #e6e8eb); }
}
.ui-theme-dark .ui-grid__skeleton-cell {
  background-image: linear-gradient(90deg,
    var(--ui-color-base-bg-hover, #343a42) 25%,
    var(--ui-color-border, #3a414a) 37%,
    var(--ui-color-base-bg-hover, #343a42) 63%);
}
.ui-grid--loading-overlay { position: relative; }
.ui-grid--loading-overlay::after {
  content: ""; position: absolute; inset: 0;
  background: var(--ui-color-base-bg, #f3f4f6); opacity: .55;
  pointer-events: none; z-index: var(--ui-z-overlay, 1040);
}

/* ── Grid density tokens: fallback = сегашните вредности → без промена по default ── */
.ui-grid{--ui-grid-cell-pad-y:8px;--ui-grid-cell-pad-x:12px;--ui-grid-font-size:14px;font-size:var(--ui-grid-font-size);}
.ui-grid .ui-grid-cell,.ui-grid .ui-grid-header-cell,.ui-grid .ui-grid-footer-cell{padding:var(--ui-grid-cell-pad-y) var(--ui-grid-cell-pad-x);}
/* ── Density (независна од Appearance; инлајн var-ите од рендерот победуваат) ── */
.ui-grid--density-compact{--ui-grid-cell-pad-y:2px;--ui-grid-cell-pad-x:6px;--ui-grid-font-size:13px;}
.ui-grid--density-comfortable{--ui-grid-cell-pad-y:14px;--ui-grid-cell-pad-x:16px;--ui-grid-font-size:15px;}
/* ── Appearance пресети ── */
.ui-grid--compact{--ui-grid-cell-pad-y:4px;--ui-grid-cell-pad-x:8px;--ui-grid-font-size:13px;}
.ui-grid--comfortable{--ui-grid-cell-pad-y:12px;--ui-grid-cell-pad-x:16px;--ui-grid-font-size:15px;}
/* Striped = чист CSS zebra; :not(--alt) го спречува судирот со AlternatingRowsEnabled */
.ui-grid--striped tbody .ui-grid-row:nth-of-type(even):not(.ui-grid-row--alt){background:var(--ui-color-zebra-bg,#f6f8fb);}
.ui-grid--striped tbody .ui-grid-row:hover{background:var(--ui-color-row-hover-bg,#eaf1fe);}
.ui-grid--striped tbody .ui-grid-row--selected,.ui-grid--striped tbody .ui-grid-row--selected:hover{background:var(--ui-color-primary);color:#fff;}
.ui-grid--bordered .ui-grid-cell,.ui-grid--bordered .ui-grid-header-cell,.ui-grid--bordered .ui-grid-footer-cell{border:1px solid var(--ui-color-border);}
.ui-grid--minimal{border:0;border-radius:0;background:transparent;}
.ui-grid--minimal .ui-grid-header-cell{background:transparent;border-bottom:1px solid var(--ui-color-border);}
.ui-grid--minimal .ui-grid-row,.ui-grid--minimal .ui-grid-toolbar{border-bottom:0;background:transparent;}
/* ── Card: под md редовите се картички, под sm целосно стекнати ── */
@media (max-width:959.98px){
 .ui-grid--card{border:0;background:transparent;overflow:visible;}
 .ui-grid--card .ui-grid-header{display:none;}
 .ui-grid--card .ui-grid-table,.ui-grid--card .ui-grid-table tbody,.ui-grid--card .ui-grid-row{display:block;width:100%;}
 .ui-grid--card .ui-grid-row{margin:0 0 10px;padding:6px 10px;border:1px solid var(--ui-color-border);border-radius:var(--ui-radius);background:var(--ui-color-base-bg);box-shadow:0 1px 3px rgba(0,0,0,.12);}
 .ui-grid--card .ui-grid-cell{display:grid;grid-template-columns:minmax(6em,40%) 1fr;gap:.5em;width:auto!important;text-align:left!important;padding:var(--ui-grid-cell-pad-y) 0;border:0;}
 .ui-grid--card .ui-grid-cell+.ui-grid-cell{border-top:1px dashed var(--ui-color-border);}
 .ui-grid--card .ui-grid-cell[data-label]::before{content:attr(data-label);font-weight:600;color:var(--ui-color-text-secondary,#5a6072);}}
@media (max-width:599.98px){.ui-grid--card .ui-grid-cell{grid-template-columns:1fr;gap:0;}}
/* ── Density switcher (сегментиран toggle, CSS икона од три ленти) ── */
.ui-grid-density-toolbar{justify-content:flex-end;}
.ui-grid-density-switcher{display:inline-flex;border:1px solid var(--ui-color-border);border-radius:var(--ui-radius);overflow:hidden;}
.ui-grid-density-btn{display:inline-flex;align-items:center;justify-content:center;width:30px;height:26px;padding:0;border:0;background:transparent;color:var(--ui-color-text);cursor:pointer;}
.ui-grid-density-btn+.ui-grid-density-btn{border-left:1px solid var(--ui-color-border);}
.ui-grid-density-btn:hover{background:var(--ui-color-base-bg-hover);}
.ui-grid-density-btn:focus-visible{outline:2px solid var(--ui-color-primary);outline-offset:-2px;}
.ui-grid-density-btn--active{background:var(--ui-color-primary);color:#fff;}
.ui-grid-density-icon{width:14px;height:12px;}
.ui-grid-density-btn--compact .ui-grid-density-icon{background:repeating-linear-gradient(currentColor 0 2px,transparent 2px 4px);}
.ui-grid-density-btn--normal .ui-grid-density-icon{background:repeating-linear-gradient(currentColor 0 2px,transparent 2px 6px);}
.ui-grid-density-btn--comfortable .ui-grid-density-icon{background:repeating-linear-gradient(currentColor 0 2px,transparent 2px 8px);}
/* ── Dark тема ── */
.ui-theme-dark .ui-grid--striped tbody .ui-grid-row:nth-of-type(even):not(.ui-grid-row--alt){background:var(--ui-color-zebra-bg,rgba(255,255,255,.04));}
.ui-theme-dark .ui-grid--card .ui-grid-row{background:var(--ui-color-surface-2,#23262d);box-shadow:0 1px 3px rgba(0,0,0,.5);}
.ui-theme-dark .ui-grid--minimal,.ui-theme-dark .ui-grid--minimal .ui-grid-header-cell{background:transparent;}
.ui-theme-dark .ui-grid--bordered .ui-grid-cell,.ui-theme-dark .ui-grid--bordered .ui-grid-header-cell{border-color:var(--ui-color-border);}
.ui-theme-dark .ui-grid-density-btn:hover{background:rgba(255,255,255,.07);}



/* ═══ Супер грид Бран В: супер pager, clipboard flash, sticky group headers + pinned rows ═══ */
.ui-grid-pager:has(.ui-grid-pager__total),.ui-grid-pager:has(.ui-grid-pager__goto){display:flex;align-items:center;flex-wrap:wrap;gap:var(--ui-spacing-sm,8px);}
.ui-grid-pager--top{border-top:0;border-bottom:1px solid var(--ui-color-border,#d9dbe0);}
.ui-grid-pager__total,.ui-grid-loadmore__total{font-size:var(--ui-font-size-sm,12px);color:var(--ui-color-text-muted,#6b7280);white-space:nowrap;}
.ui-grid-pager__total{margin-inline-start:auto;}
.ui-grid-pager__goto{display:inline-flex;align-items:center;gap:var(--ui-spacing-xs,4px);font-size:var(--ui-font-size-sm,12px);color:var(--ui-color-text,#1f2430);}
.ui-grid-pager__goto-input{width:5ch;min-width:48px;padding:2px 4px;text-align:center;color:var(--ui-color-text,#1f2430);background:var(--ui-color-surface,#fff);border:1px solid var(--ui-color-border,#d9dbe0);border-radius:var(--ui-radius-sm,3px);}
.ui-grid-pager__goto-input:focus-visible{outline:2px solid var(--ui-color-primary,#2f6feb);outline-offset:1px;}
.ui-grid-pager--compact{padding:4px 6px;gap:4px;font-size:var(--ui-font-size-sm,12px);}
.ui-grid-pager--compact .ui-pager__info,.ui-grid-pager--compact .ui-grid-pager__goto-label{display:none;}
.ui-grid-loadmore{display:flex;align-items:center;justify-content:center;gap:var(--ui-spacing-sm,8px);padding:8px;border-top:1px solid var(--ui-color-border,#d9dbe0);}
.ui-grid-loadmore__button{padding:6px 14px;cursor:pointer;color:var(--ui-color-primary,#2f6feb);background:var(--ui-color-surface,#fff);border:1px solid var(--ui-color-primary,#2f6feb);border-radius:var(--ui-radius-md,4px);}
.ui-grid-loadmore__button:hover:not([disabled]){background:var(--ui-color-primary,#2f6feb);color:var(--ui-color-text-on-primary,#fff);}
.ui-grid-loadmore__button[disabled]{opacity:.55;cursor:default;}
.ui-grid-loadmore__button:focus-visible{outline:2px solid var(--ui-color-primary,#2f6feb);outline-offset:2px;}
.ui-grid-loadmore--compact{padding:4px 6px;gap:4px;}
@media (max-width:600px){.ui-grid-pager--auto-compact{padding:4px 6px;gap:4px;font-size:var(--ui-font-size-sm,12px);}.ui-grid-pager--auto-compact .ui-pager__info,.ui-grid-pager--auto-compact .ui-grid-pager__goto-label{display:none;}.ui-grid-pager--auto-compact .ui-pager__numbers{flex-wrap:wrap;}.ui-grid-loadmore--auto-compact{padding:4px 6px;gap:4px;}}
@media (prefers-color-scheme:dark){.ui-grid-pager__goto-input{background:var(--ui-color-surface,#1b1f27);color:var(--ui-color-text,#e6e8ee);border-color:var(--ui-color-border,#39404d);}.ui-grid-loadmore,.ui-grid-pager--top{border-color:var(--ui-color-border,#39404d);}.ui-grid-loadmore__button{background:var(--ui-color-surface,#1b1f27);}}
:root[data-theme="dark"] .ui-grid-pager__goto-input{background:var(--ui-color-surface,#1b1f27);color:var(--ui-color-text,#e6e8ee);border-color:var(--ui-color-border,#39404d);}
:root[data-theme="dark"] .ui-grid-loadmore,:root[data-theme="dark"] .ui-grid-pager--top{border-color:var(--ui-color-border,#39404d);}
:root[data-theme="dark"] .ui-grid-loadmore__button{background:var(--ui-color-surface,#1b1f27);}

/* ── UiGrid COPY/PASTE — „копирано" визуелен feedback (GridClipboard.cs) ───────── */
.ui-grid { --ui-grid-copy-flash: var(--ui-color-primary, #2b6cb0); --ui-grid-copy-flash-ms: 600ms; }
.ui-theme-dark .ui-grid { --ui-grid-copy-flash: var(--ui-color-primary-light, var(--ui-color-primary, #63b3ed)); }
.ui-grid--copy-flash .ui-grid-cell--selected,
.ui-grid--copy-flash .ui-grid-row--selected > .ui-grid-cell {
  animation: ui-grid-copy-flash var(--ui-grid-copy-flash-ms) ease-out 1;
  outline: 1px dashed var(--ui-grid-copy-flash);
  outline-offset: -1px;
}
@keyframes ui-grid-copy-flash {
  0%   { background-color: color-mix(in srgb, var(--ui-grid-copy-flash) 40%, transparent); }
  100% { background-color: transparent; }
}
@media (prefers-reduced-motion: reduce) {
  .ui-grid--copy-flash .ui-grid-cell--selected,
  .ui-grid--copy-flash .ui-grid-row--selected > .ui-grid-cell { animation: none; }
}

.ui-grid-group-row--sticky{position:sticky;top:var(--ui-grid-header-height,41px);z-index:2;}
.ui-theme-dark .ui-grid-group-row--sticky{background:var(--ui-color-surface-2,#2a2d34);}
.ui-grid-row--pinned{position:sticky;z-index:3;background:var(--ui-color-surface,#fff);box-shadow:0 1px 0 var(--ui-color-border);}
.ui-grid-row--pinned-top{top:var(--ui-grid-header-height,41px);}
.ui-grid-row--pinned-bottom{bottom:0;}
.ui-theme-dark .ui-grid-row--pinned{background:var(--ui-color-surface-1,#1e2025);}



/* ═══ Супер грид Бран А: virtual remote scroll, column virtualization ═══ */
.ui-grid-colvirt-spacer{padding:0;border:0;background:none;}
.ui-grid-colvirt-spacer--leading,.ui-grid-colvirt-spacer--trailing{pointer-events:none;}



/* ═══ Миграциски празнини: dropdown floating label, upload custom trigger ═══ */
/* cssRules — додади во ui-blazor.css до постоечкиот floatlabel блок (~ред 8891) */
.ui-dropdownlist-floatwrap, .ui-combobox-floatwrap { position: relative; display: inline-flex; }
.ui-dropdownlist-floatwrap:focus-within .ui-floatlabel__text, .ui-dropdownlist-floatwrap--filled .ui-floatlabel__text,
.ui-combobox-floatwrap:focus-within .ui-floatlabel__text, .ui-combobox-floatwrap--filled .ui-floatlabel__text
  { top: 0; transform: translateY(-50%) scale(.82); color: var(--ui-color-primary, #3b82f6); }
.ui-upload__trigger-zone { position: relative; display: inline-flex; align-items: center; }
.ui-upload__trigger { display: inline-flex; align-items: center; gap: var(--ui-spacing-2, 8px); cursor: pointer; }
.ui-upload__input--hidden { position: absolute; inset: auto; width: 1px; height: 1px; margin: -1px; padding: 0;
  border: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; opacity: 0; }
.ui-upload__input--hidden:disabled + .ui-upload__trigger { cursor: not-allowed; opacity: .6; }
.ui-upload__input--hidden:focus-visible + .ui-upload__trigger { outline: 2px solid var(--ui-color-primary, #3b82f6); outline-offset: 2px; }
/* ПОСТОЕЧКИ БАГ (ред 8895): селекторот е `.ui-numeric-floatwrap.ui-filled`, а C# емитува
   `ui-numeric-floatwrap--filled` → filled-состојбата никогаш не се стилизира. Исправка: */
/* .ui-numeric-floatwrap.ui-filled  →  .ui-numeric-floatwrap--filled */

.ui-dropdownlist-floatwrap, .ui-combobox-floatwrap { position: relative; display: inline-flex; }
.ui-dropdownlist-floatwrap:focus-within .ui-floatlabel__text,
.ui-dropdownlist-floatwrap--filled .ui-floatlabel__text,
.ui-combobox-floatwrap:focus-within .ui-floatlabel__text,
.ui-combobox-floatwrap--filled .ui-floatlabel__text { top: 0; transform: translateY(-50%) scale(.82); color: var(--ui-color-primary, #3b82f6); }

.ui-upload__trigger-zone { position: relative; display: inline-flex; }
.ui-upload__trigger { cursor: pointer; }
.ui-upload__input--hidden { position: static; opacity: 0; width: 1px; height: 1px; overflow: hidden; cursor: pointer; }

/* ═══ Миграциска празнина: floating label за пикерите (Mud „Label" паритет) ═══ */
.ui-datepicker-floatwrap, .ui-timepicker-floatwrap, .ui-datetimepicker-floatwrap
  { position: relative; display: inline-flex; }
.ui-datepicker-floatwrap:focus-within .ui-floatlabel__text,
.ui-datepicker-floatwrap--filled .ui-floatlabel__text,
.ui-timepicker-floatwrap:focus-within .ui-floatlabel__text,
.ui-timepicker-floatwrap--filled .ui-floatlabel__text,
.ui-datetimepicker-floatwrap:focus-within .ui-floatlabel__text,
.ui-datetimepicker-floatwrap--filled .ui-floatlabel__text
  { top: 0; transform: translateY(-50%) scale(.82); color: var(--ui-color-primary, #3b82f6); }



/* ═══ IUiNotificationService — глобален toast host во UiRoot (ISnackbar пандан) ═══ */
.ui-notification-container { position:fixed; display:flex; flex-direction:column; gap:8px; z-index:var(--ui-z-notification,1080); pointer-events:none; padding:16px; }
.ui-notification-container > .ui-notification { pointer-events:auto; }
.ui-notification-container--top { top:0; } .ui-notification-container--bottom { bottom:0; flex-direction:column-reverse; }
.ui-notification-container--left { left:0; align-items:flex-start; } .ui-notification-container--right { right:0; align-items:flex-end; }
.ui-notification-container--center { left:50%; transform:translateX(-50%); align-items:center; }
.ui-notification--info { border-left-color:var(--ui-color-primary,#4664e4); } .ui-notification--error { border-left-color:var(--ui-color-danger,#d23b3b); }