/* assets/app.css — новиот изглед (Фаза 3, FINORA). Без @import и надворешни адреси (CSP self); боите само како токени
   од :root (литерали само во :root и §7). Префикси: l- распоред, c- компонента, u- помошна, is-/has- состојба, pg- страница;
   правилата за елементи се во :where() и не важат во .l-legacy. Брејкпоинти (само max-width): 1439.98 1279.98 1023.98 768 400. */

/* ==== §1 TOKENS ==== */
:root {
    --bg: #f8fafc;
    --surface: #fff;
    --surface-2: #f8fafc;
    --surface-3: #f1f5f9;
    --border: #e2e8f0;
    --border-strong: #cbd5e1;
    --border-control: #cbd5e1;
    --border-control-hover: #94a3b8;
    --switch-off: #94a3b8;
    --text: #0f172a;
    --text-2: #334155;
    --text-3: #475569;
    --muted: #64748b;
    --placeholder: #9ca3af;
    --primary: #3b82f6;
    --primary-hover: #2563eb;
    --primary-active: #1d4ed8;
    --primary-soft: #eff6ff;
    --primary-soft-border: #bfdbfe;
    --primary-text: #1d4ed8;
    --primary-tint: rgba(59, 130, 246, .08);
    --primary-tint-2: rgba(59, 130, 246, .15);
    --link: #2563eb;
    --focus: #1d4ed8;
    /* полна primary површина со бел текст: FINORA #3b82f6 (одлука 29.09) */
    --accent-fill: #3b82f6;
    --accent-fill-hover: #2563eb;
    --accent-fill-active: #1d4ed8;
    --success: #0d9488;
    --success-soft: #f0fdfa;
    --success-text: #0f766e;
    --success-border: #99f6e4;
    --warning: #d97706;
    --warning-soft: #fffbeb;
    --warning-text: #a16207;
    --warning-border: #fde68a;
    --danger: #ef4444;
    --danger-soft: #fef2f2;
    --danger-text: #dc2626;
    --danger-strong: #b91c1c;
    --danger-border: #fecaca;
    --neutral-soft: #f1f5f9;
    --neutral-text: #475569;
    --scrim: rgba(15, 23, 42, .45);
    --font: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
    --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    --fs-xs: 12px;
    --fs-sm: 13px;
    --fs-base: 14px;
    --fs-md: 16px;
    --fs-lg: 18px;
    --fs-xl: 20px;
    --fs-2xl: 24px;
    --fs-3xl: 28px;
    --fs-4xl: 32px;
    --lh-tight: 1.25;
    --lh-base: 1.5;
    /* простор: мрежа 4px (во компонентите и 2/6/10/14) */
    --sp-1: 4px;
    --sp-2: 8px;
    --sp-3: 12px;
    --sp-4: 16px;
    --sp-5: 20px;
    --sp-6: 24px;
    --sp-8: 32px;
    --sp-10: 40px;
    --sp-12: 48px;
    --r-sm: 6px;
    --r-md: 8px;
    --r-lg: 12px;
    --r-pill: 9999px;
    /* --sh-1: главно копче, hover на плочка; --sh-2: modal, drawer, toast, мени */
    --sh-1: 0 1px 2px rgba(15, 23, 42, .06);
    --sh-2: 0 1px 2px rgba(20, 26, 33, .05), 0 8px 24px -12px rgba(20, 26, 33, .18);
    --ring: 0 0 0 3px rgba(59, 130, 246, .35);
    --control-h: 40px;
    --control-h-sm: 32px;
    --tap: 44px;
    --sidebar-w: 232px;
    --topbar-h: 56px;
    --tabbar-h: 64px;
    --w-narrow: 720px;
    --w-default: 1040px;
    --w-wide: 1440px;
    --w-auth: 440px;
    --w-auth-wide: 600px;
    --gutter: 32px;
    --z-sticky: 10;
    --z-topbar: 40;
    --z-scrim: 50;
    --z-drawer: 60;
    --z-modal: 80;
    --z-toast: 90;
    --dur: 150ms;
    --ease: cubic-bezier(.2, 0, 0, 1);
    --tr: var(--dur) var(--ease);
    --chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
}
/* ::backdrop не наследува од :root пред Chrome 122 / Firefox 120 / Safari 17.4 */
::backdrop { --scrim: rgba(15, 23, 42, .45); }
@media (max-width: 1439.98px) {
    :root { --gutter: 24px; }
}
@media (max-width: 768px) {
    :root { --control-h: 44px; --gutter: 16px; --fs-base: 15px; }
}
@media (max-width: 400px) {
    :root { --gutter: 12px; }
}
@media (prefers-reduced-motion: reduce) {
    :root { --dur: 0ms; }
}

/* ==== §2 FONTS ==== */
/* Inter 400–700, self-hosted (OFL); ?v= = UI_FONT_VER во includes/layout.php */
@font-face { font-family: "Inter"; font-style: normal; font-weight: 400 700; font-display: swap; src: url("fonts/inter-cyrillic.woff2?v=4") format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 400 700; font-display: swap; src: url("fonts/inter-latin-ext.woff2?v=4") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 400 700; font-display: swap; src: url("fonts/inter-latin.woff2?v=4") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* ==== §3 BASE ==== */
*, *::before, *::after { box-sizing: border-box; }
:where(html) { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; color-scheme: light; }
:where(body) { margin: 0; background: var(--bg); color: var(--text); font-family: var(--font); font-size: var(--fs-base); font-weight: 400; line-height: var(--lh-base); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
:where(h1, h2, h3, h4, h5, h6):where(:not(.l-legacy *)) { margin: 0; color: var(--text); font-weight: 600; line-height: var(--lh-tight); letter-spacing: -.01em; }
:where(h1):where(:not(.l-legacy *)) { font-size: var(--fs-2xl); }
:where(h2):where(:not(.l-legacy *)) { font-size: var(--fs-lg); }
:where(h3):where(:not(.l-legacy *)) { font-size: var(--fs-md); }
:where(h4, h5, h6):where(:not(.l-legacy *)) { font-size: var(--fs-base); }
:where(p, ul, ol, dl, dd, figure, blockquote, pre):where(:not(.l-legacy *)) { margin: 0; }
:where(ul[class], ol[class]):where(:not(.l-legacy *)) { padding: 0; list-style: none; }
:where(strong, b):where(:not(.l-legacy *)) { font-weight: 600; }
:where(code, kbd, samp, pre):where(:not(.l-legacy *)) { font-family: var(--font-mono); }
:where(hr):where(:not(.l-legacy *)) { margin: var(--sp-4) 0; border: 0; border-top: 1px solid var(--border); }
:where(a):where(:not(.l-legacy *)) { color: var(--link); text-decoration: none; text-underline-offset: 2px; }
:where(a:hover):where(:not(.l-legacy *)) { text-decoration: underline; }
:where(img, video, canvas):where(:not(.l-legacy *)) { max-width: 100%; height: auto; }
:where(img, svg, video, canvas):where(:not(.l-legacy *)) { vertical-align: middle; }
:where(table):where(:not(.l-legacy *)) { border-collapse: collapse; border-spacing: 0; }
:where(th):where(:not(.l-legacy *)) { text-align: left; font-weight: 600; }
:where(button, input, select, textarea):where(:not(.l-legacy *)) { margin: 0; font: inherit; color: inherit; letter-spacing: inherit; }
:where(button, summary, [role="button"]):where(:not(.l-legacy *)) { cursor: pointer; }
:where(button:disabled):where(:not(.l-legacy *)) { cursor: not-allowed; }
:where(input, textarea):where(:not(.l-legacy *))::placeholder { color: var(--placeholder); opacity: 1; }
@media (max-width: 768px) {
    /* iOS не зумира поле од 16px */
    :where(input, select, textarea):where(:not(.l-legacy *)) { font-size: var(--fs-md); }
}
[hidden] { display: none !important; }
/* 2px фокус секогаш; --ring само дополнува */
:where(:focus-visible), .c-switch__input:focus-visible + .c-switch__track, .c-filepick__input:focus-visible + .c-filepick__btn { outline: 2px solid var(--focus); outline-offset: 2px; }
html.js .u-nojs { display: none; }
.icon { display: inline-block; flex: none; vertical-align: middle; pointer-events: none; }
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}

/* ==== §4 LAYOUT ==== */
/* staff: мени ≥1024, drawer + горна лента под тоа; client: горна лента, на ≤768 долна; guest; auth без ленти.
   Рамката нема полиња, табели ни submit копчиња (legacy CSS не ја допира). */
.l-app { min-height: 100vh; }
@supports (height: 100dvh) {
    .l-app { min-height: 100dvh; }
}
.l-main { min-width: 0; display: flex; flex-direction: column; min-height: 100vh; }
@supports (height: 100dvh) {
    .l-main { min-height: 100dvh; }
}
.l-app--client, .l-app--guest { display: flex; flex-direction: column; }
.l-app--client > .l-main, .l-app--guest > .l-main { flex: 1 0 auto; min-height: 0; }
.l-content { width: 100%; max-width: var(--w-default); margin: 0 auto; padding: 24px var(--gutter) 32px; }
.l-content--narrow { max-width: var(--w-narrow); }
.l-content--wide { max-width: var(--w-wide); }
.l-content--auth { max-width: var(--w-auth); }
.l-content--auth-wide { max-width: var(--w-auth-wide); }
.l-content > * + * { margin-top: 16px; }
.l-footer { margin-top: auto; padding: 24px var(--gutter); color: var(--muted); font-size: var(--fs-xs); text-align: center; }
.l-footer a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.l-footer a:hover { color: var(--text-3); }
.l-main--auth { justify-content: center; padding: 32px 0; }
.l-main--auth > .l-footer { margin-top: 0; }
/* ── горна лента ── */
.l-topbar { position: sticky; top: 0; z-index: var(--z-topbar); display: flex; align-items: center; gap: 8px; height: var(--topbar-h); padding: 0 8px; background: var(--surface); border-bottom: 1px solid var(--border); }
.l-app--staff > .l-topbar { display: none; }
/* #fragment и фокусот под sticky лентата */
html:has(> .l-body--client, > .l-body--guest) { scroll-padding-top: calc(var(--tabbar-h) + 8px); }
.l-topbar__brand { display: inline-flex; align-items: center; gap: 12px; min-height: 44px; border-radius: var(--r-sm); color: inherit; text-decoration: none; }
.l-topbar__brand:hover { text-decoration: none; }
.l-topbar__logo { display: block; width: 72px; height: 36px; }
.l-topbar__product, .l-sidebar__product { padding-left: 12px; border-left: 1px solid var(--border); color: var(--text-3); font-size: var(--fs-xs); font-weight: 600; line-height: 20px; white-space: nowrap; }
.l-topbar__spacer { flex: 1 1 auto; }
.l-topbar .l-topbar__menu, .l-topbar__attn, .l-topbar__avatar { width: 44px; height: 44px; }
.l-topbar__menu { position: relative; }
.l-topbar__menu.has-dot::after { content: ""; position: absolute; top: 10px; right: 10px; width: 8px; height: 8px; border-radius: var(--r-pill); background: var(--accent-fill); outline: 2px solid var(--surface); }
.l-topbar__attn, .l-topbar__avatar { position: relative; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--r-md); color: var(--text-3); text-decoration: none; }
/* бројачот на аголот на ѕвончето: го покрива само работ (и со 3 цифри над аватарот) */
.l-topbar__attn .c-count { position: absolute; z-index: 1; top: 2px; left: calc(50% + 6px); outline: 2px solid var(--surface); }
/* client и guest: 64px, порамнета со .l-content */
.l-topbar--client, .l-topbar--guest { display: block; height: var(--tabbar-h); padding: 0; }
.l-topbar__inner { display: flex; align-items: center; gap: 24px; height: 100%; max-width: var(--w-default); margin: 0 auto; padding: 0 var(--gutter); }
.l-clientnav { display: flex; align-self: stretch; gap: 4px; }
.l-clientnav__item { position: relative; display: inline-flex; align-items: center; gap: 8px; height: 100%; padding: 0 12px; border-top: 2px solid transparent; border-bottom: 2px solid transparent; color: var(--text-3); font-size: var(--fs-base); font-weight: 500; white-space: nowrap; text-decoration: none; }
.l-clientnav__item:hover { color: var(--text); text-decoration: none; }
.l-clientnav__item.is-active { color: var(--text); font-weight: 600; border-bottom-color: var(--primary); }
.l-clientnav__item--profile { display: none; }
.l-topbar__user { display: flex; align-items: center; gap: 8px; }
.l-topbar__me { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 12px 0 4px; border-radius: var(--r-pill); color: var(--text-2); font-size: var(--fs-sm); font-weight: 500; text-decoration: none; }
.l-topbar__me:hover { background: var(--surface-3); text-decoration: none; }
.l-topbar__name { max-width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* ── staff ≥1024: мени 232px + содржина (белата колона е на .l-app, не на sticky менито) ── */
.l-app--staff { display: grid; grid-template-columns: var(--sidebar-w) minmax(0, 1fr); background: var(--surface); }
.l-app--staff > .l-main { background: var(--bg); border-left: 1px solid var(--border); }
.l-sidebar { position: sticky; top: 0; align-self: start; display: flex; flex-direction: column; gap: 16px; height: 100vh; overflow-y: auto; overscroll-behavior: contain; padding: 12px; background: var(--surface); }
@supports (height: 100dvh) {
    .l-sidebar { height: 100dvh; }
}
.l-sidebar__brand { display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 4px 12px 0; }
.l-sidebar__brand > a { display: inline-flex; border-radius: var(--r-sm); }
.l-sidebar__logo { display: block; width: 80px; height: 40px; }
.l-sidebar .l-sidebar__close { display: none; margin-left: auto; }
.l-nav { display: flex; flex: 1 0 auto; flex-direction: column; gap: 16px; }
.l-nav__group { display: flex; flex-direction: column; gap: 2px; }
.l-nav__heading { margin-bottom: 4px; padding: 0 12px; color: var(--muted); font-size: var(--fs-xs); font-weight: 600; letter-spacing: .04em; line-height: 16px; text-transform: uppercase; }
.l-nav__item { display: flex; align-items: center; gap: 10px; min-height: 36px; padding: 0 12px; border-radius: var(--r-md); color: var(--text-2); font-size: var(--fs-base); font-weight: 500; line-height: var(--lh-tight); text-decoration: none; transition: background-color var(--tr), color var(--tr); }
.l-nav__item:hover, .l-topbar__attn:hover, .l-topbar__avatar:hover { background: var(--surface-3); color: var(--text); text-decoration: none; }
.l-nav__icon { color: var(--muted); }
.l-nav__item:hover .l-nav__icon { color: var(--text-3); }
.l-nav__item.is-active { background: var(--primary-soft); color: var(--primary-text); font-weight: 600; }
.l-nav__item.is-active .l-nav__icon { color: var(--primary); }
.l-nav__label { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.l-nav__count { margin-left: auto; }
.l-nav__item.is-active .c-count { background: var(--surface); }
.l-sidebar__user { display: flex; align-items: center; gap: 8px; padding: 12px 4px 0; border-top: 1px solid var(--border); }
.l-sidebar__who { flex: 1 1 auto; min-width: 0; line-height: var(--lh-tight); }
.l-sidebar__name { overflow: hidden; color: var(--text); font-size: var(--fs-sm); font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.l-sidebar__role { color: var(--muted); font-size: var(--fs-xs); }
.l-scrim { display: none; }
/* ── staff <1024: горна лента + drawer ── */
@media (max-width: 1023.98px) {
    .l-app--staff { display: flex; flex-direction: column; background: none; }
    .l-app--staff > .l-main { flex: 1 0 auto; min-height: 0; border-left: 0; }
    .l-app--staff > .l-topbar { display: flex; }
    html:has(> .l-body--staff) { scroll-padding-top: calc(var(--topbar-h) + 8px); }
    .l-sidebar { position: fixed; top: 0; left: 0; z-index: var(--z-drawer); width: min(300px, 86vw); border-right: 1px solid var(--border); box-shadow: var(--sh-2); transform: translateX(-100%); visibility: hidden; transition: transform var(--tr), visibility 0s linear var(--dur); }
    .l-sidebar .l-sidebar__close { display: inline-flex; width: 44px; height: 44px; }
    .l-sidebar__brand { padding-right: 0; }
    .l-nav__item { min-height: 44px; }
    .l-scrim { display: block; position: fixed; inset: 0; z-index: var(--z-scrim); background: var(--scrim); }
    html.is-drawer-open { overflow: hidden; }
    html.is-drawer-open .l-sidebar { transform: none; visibility: visible; transition: transform var(--tr), visibility 0s; }
    .l-topbar__name { display: none; }
}
/* ── мобилен: долна лента на клиентот ── */
@media (max-width: 768px) {
    .l-topbar--client, .l-topbar--guest { height: var(--topbar-h); }
    html:has(> .l-body--client, > .l-body--guest) { scroll-padding-top: calc(var(--topbar-h) + 8px); }
    .l-topbar__me, .l-topbar .l-topbar__logout { display: none; }
    .l-clientnav { position: fixed; right: 0; bottom: 0; left: 0; z-index: var(--z-topbar); display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; height: calc(var(--tabbar-h) + env(safe-area-inset-bottom)); padding-bottom: env(safe-area-inset-bottom); background: var(--surface); border-top: 1px solid var(--border); }
    .l-clientnav__item { flex-direction: column; justify-content: center; gap: 2px; height: auto; padding: 0 4px; border: 0; font-size: var(--fs-xs); font-weight: 500; }
    .l-clientnav__item.is-active { color: var(--primary-text); font-weight: 600; }
    .l-clientnav__item--profile { display: inline-flex; }
    .l-clientnav__icon { width: 22px; height: 22px; }
    .l-clientnav__count { position: absolute; top: 6px; left: calc(50% + 4px); outline: 2px solid var(--surface); }
    .l-app--client .l-main { padding-bottom: calc(var(--tabbar-h) + 16px + env(safe-area-inset-bottom)); }
    /* отворена тастатура (is-typing) или задача на цел екран: без долна лента */
    html.is-typing .l-clientnav, body.is-task .l-clientnav { display: none; }
    html.is-typing .l-app--client .l-main, body.is-task .l-app--client .l-main { padding-bottom: 0; }
    .l-main--auth { padding: 0; }
}

/* ==== §5 COMPONENTS ==== */
/* ── PAGE HEAD ── */
.c-page-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px 24px; margin-bottom: 24px; }
.c-page-head__main { display: flex; flex: 1 1 auto; flex-direction: column; align-items: flex-start; gap: 4px; min-width: 0; }
.c-page-head__back { display: inline-flex; align-items: center; gap: 6px; min-height: 24px; margin-bottom: 4px; color: var(--text-3); font-size: var(--fs-sm); font-weight: 500; }
.c-page-head__back:hover { color: var(--text); text-decoration: none; }
.c-page-head__title { max-width: 100%; overflow-wrap: anywhere; }
.c-page-head__count { display: inline-flex; align-items: center; height: 24px; margin-left: 8px; padding: 0 8px; border-radius: var(--r-pill); background: var(--surface-3); color: var(--text-3); font-size: var(--fs-sm); font-variant-numeric: tabular-nums; letter-spacing: 0; vertical-align: middle; }
.c-page-head__sub { color: var(--muted); }
.c-page-head__actions, .c-btn-group, .c-filters__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
/* ── BUTTONS ── */
.c-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: var(--control-h); padding: 0 16px; border: 1px solid transparent; border-radius: var(--r-md); background: transparent; color: var(--text-2); font-family: inherit; font-size: var(--fs-base); font-weight: 600; line-height: 1; white-space: nowrap; text-decoration: none; cursor: pointer; transition: background-color var(--tr), border-color var(--tr), color var(--tr); }
.c-btn:hover { text-decoration: none; }
.c-btn:disabled, .c-btn[aria-disabled="true"], .c-menu__item:disabled { opacity: .5; cursor: not-allowed; }
.c-btn--primary { background: var(--accent-fill); color: #fff; box-shadow: var(--sh-1); }
.c-btn--primary:hover { background: var(--accent-fill-hover); }
.c-btn--primary:active { background: var(--accent-fill-active); }
.c-btn--secondary { background: var(--surface); border-color: var(--border-control); color: var(--text-2); font-weight: 500; }
.c-btn--secondary:hover { background: var(--surface-3); border-color: var(--border-control-hover); }
.c-btn--ghost { color: var(--text-3); }
.c-btn--ghost:hover, .c-toast__close:hover { background: var(--surface-3); color: var(--text); }
.c-btn--danger { background: var(--danger-text); color: #fff; }
.c-btn--danger:hover, .c-btn--danger:active { background: var(--danger-strong); }
.c-btn--danger-ghost { color: var(--danger-strong); }
.c-btn--danger-ghost:hover { background: var(--danger-soft); }
.c-btn--link { height: auto; padding: 0; border: 0; color: var(--link); font-weight: 500; }
.c-btn--link:hover { text-decoration: underline; }
.c-btn--sm { gap: 6px; height: var(--control-h-sm); padding: 0 12px; font-size: var(--fs-sm); }
/* --compact: само иконка над 768, --compact-lg: само во 769–1439.98 (текстот за читачи на екран; копчето има title) */
.c-btn--icon, .c-btn--compact { width: var(--control-h); padding: 0; }
.c-btn--sm.c-btn--icon, .c-btn--compact.c-btn--sm { width: var(--control-h-sm); }
.c-btn--lg { height: 48px; padding: 0 20px; font-size: var(--fs-md); }
.c-btn--lg.c-btn--icon { width: 48px; padding: 0; }
.c-btn--block { display: flex; width: 100%; }
.c-btn__text { min-width: 0; }
.c-btn--compact > .c-btn__text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
@media (max-width: 1439.98px) {
    .c-btn--compact-lg { width: var(--control-h); padding: 0; }
    .c-btn--compact-lg.c-btn--sm { width: var(--control-h-sm); }
    .c-btn--compact-lg > .c-btn__text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}
@media (max-width: 768px) {
    .c-btn { min-height: var(--tap); }
    .c-btn--icon { min-width: var(--tap); }
    :is(.c-btn--compact, .c-btn--compact-lg) { width: auto; padding: 0 16px; }
    :is(.c-btn--compact, .c-btn--compact-lg).c-btn--sm { width: auto; padding: 0 12px; }
    :is(.c-btn--compact, .c-btn--compact-lg) > .c-btn__text { position: static; width: auto; height: auto; overflow: visible; clip-path: none; }
}
/* ── FORMS ── */
.c-form { display: grid; gap: 16px; }
.c-form--narrow { max-width: var(--w-narrow); }
.c-form__row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.c-form__row--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.c-form__actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px; }
.c-field { display: grid; align-content: start; gap: 6px; min-width: 0; }
.c-field__label { color: var(--text-2); font-size: var(--fs-sm); font-weight: 500; line-height: var(--lh-tight); }
.c-field__req { margin-left: 2px; color: var(--danger-strong); }
.c-input, .c-select, .c-textarea { display: block; width: 100%; height: var(--control-h); padding: 0 12px; border: 1px solid var(--border-control); border-radius: var(--r-md); background-color: var(--surface); color: var(--text); font-size: var(--fs-base); line-height: var(--lh-tight); transition: border-color var(--tr), box-shadow var(--tr); }
:is(.c-input, .c-select, .c-textarea):hover { border-color: var(--border-control-hover); }
:is(.c-input, .c-select, .c-textarea):focus { border-color: var(--primary-active); box-shadow: var(--ring); }
:is(.c-input, .c-select, .c-textarea)[aria-invalid="true"] { border-color: var(--danger-text); }
:is(.c-input, .c-select, .c-textarea):is(:disabled, [readonly]) { border-color: var(--border); background-color: var(--surface-2); color: var(--text-3); }
:is(.c-input, .c-select, .c-textarea):disabled { cursor: not-allowed; }
.c-select { padding-right: 36px; -webkit-appearance: none; appearance: none; background: var(--surface) var(--chevron) no-repeat right 12px center / 16px; cursor: pointer; }
.c-select:is([multiple], [size]) { height: auto; padding: 6px 12px; background-image: none; }
.c-textarea { height: auto; min-height: 112px; padding: 10px 12px; line-height: var(--lh-base); resize: vertical; }
.c-field__hint { color: var(--muted); font-size: var(--fs-xs); }
.c-field__error { display: flex; align-items: flex-start; gap: 6px; color: var(--danger-strong); font-size: var(--fs-xs); font-weight: 500; }
.c-field__error > .icon { margin-top: 2px; }
.c-check { display: inline-flex; align-items: center; gap: 8px; color: var(--text-2); cursor: pointer; }
.c-check > input { flex: none; width: 16px; height: 16px; margin: 0; accent-color: var(--accent-fill); cursor: pointer; }
.c-input-group { display: flex; align-items: center; gap: 8px; }
.c-input-group > :is(.c-input, .c-select) { flex: 1 1 auto; }
.c-input-group > .c-btn { flex: none; }
/* Фаза 12: линк за копирање (password_link_card) — целиот линк во 2 реда, на телефон копчето под полето */
.c-input-group--link > .c-textarea { flex: 1 1 auto; min-height: 0; height: calc(3em + 22px); line-height: 1.5; resize: none; overflow-wrap: anywhere; word-break: break-all; }
@media (max-width: 768px) {
    .c-input-group--link { flex-direction: column; align-items: stretch; }
    .c-input-group--link > .c-textarea { height: calc(6em + 22px); }
}
/* switch row: невидливиот checkbox лежи врз патеката 36×20 */
.c-switch-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 0; }
.c-switch-row + .c-switch-row { border-top: 1px solid var(--border); }
.c-switch-row__title { display: block; color: var(--text); font-weight: 500; cursor: pointer; }
.c-switch { position: relative; display: inline-flex; flex: none; }
.c-switch__input { position: absolute; top: 0; left: 0; z-index: 1; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.c-switch__track { position: relative; width: 36px; height: 20px; border-radius: var(--r-pill); background: var(--switch-off); transition: background-color var(--tr); }
.c-switch__track::after { content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: var(--r-pill); background: #fff; transition: transform var(--tr); }
.c-switch__input:checked + .c-switch__track { background: var(--accent-fill); }
.c-switch__input:checked + .c-switch__track::after { transform: translateX(16px); }
.c-switch__input:disabled { cursor: not-allowed; }
.c-switch__input:disabled + .c-switch__track { opacity: .5; }
/* file picker: input-от скриен но фокусабилен; листата ја полни app.js */
.c-filepick { position: relative; display: grid; justify-items: start; gap: 8px; min-width: 0; }
.c-filepick__input { position: absolute; top: 0; left: 0; width: 1px; height: 1px; overflow: hidden; opacity: 0; clip-path: inset(50%); }
.c-filepick__list { display: grid; grid-template-columns: minmax(0, 1fr); gap: 4px; width: 100%; max-width: var(--w-narrow); }
.c-filepick__list:empty { display: none; }
.c-filepick__item { display: flex; align-items: center; gap: 8px; padding: 6px 10px; border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface-2); color: var(--text-2); font-size: var(--fs-sm); }
.c-filepick__name { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.c-filepick__item > .icon, .c-filepick__size { flex: none; color: var(--text-3); }
.c-filepick__size { font-size: var(--fs-xs); font-variant-numeric: tabular-nums; }
.c-filepick__item.is-error > * { color: inherit; }
/* ── CARDS ── */
.c-card { min-width: 0; padding: 20px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); }
.c-card__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; margin-bottom: 16px; }
.c-card__title, .c-empty__title { color: var(--text); font-size: var(--fs-md); font-weight: 600; line-height: var(--lh-tight); letter-spacing: -.01em; }
.c-card__actions { display: inline-flex; align-items: center; gap: 8px; color: var(--link); font-size: var(--fs-sm); font-weight: 500; }
.c-card__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px; margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--border); }
.c-card--flush { padding: 0; overflow: hidden; }
.c-card--flush > .c-card__head { margin: 0; padding: 16px 20px; border-bottom: 1px solid var(--border); }
.c-card--flush > .c-card__foot { margin: 0; padding: 12px 20px; }
.c-card--accent { border-top: 3px solid var(--primary); }
/* ── STAT TILES (.is-alert само за t_awaiting > 0) ── */
.c-stats { --stats-gap: 12px; display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: var(--stats-gap); }
.c-stat { --stat-accent: var(--border-strong); --stat-icon: var(--muted); display: flex; flex-direction: column; gap: 4px; min-width: 0; min-height: 104px; padding: 16px; background: var(--surface); border: 1px solid var(--border); border-top: 3px solid var(--stat-accent); border-radius: var(--r-lg); color: var(--text); transition: border-color var(--tr), box-shadow var(--tr); }
a.c-stat:hover { border-color: var(--border-strong); border-top-color: var(--stat-accent); box-shadow: var(--sh-1); text-decoration: none; }
.c-stat--primary { --stat-accent: var(--primary); --stat-icon: var(--primary); --stat-soft: var(--primary-soft); --stat-border: var(--primary-soft-border); }
.c-stat--success { --stat-accent: var(--success); --stat-icon: var(--success); --stat-soft: var(--success-soft); --stat-border: var(--success-border); }
.c-stat--warning { --stat-accent: var(--warning); --stat-icon: var(--warning); --stat-soft: var(--warning-soft); --stat-border: var(--warning-border); }
.c-stat--danger { --stat-accent: var(--danger); --stat-icon: var(--danger); --stat-soft: var(--danger-soft); --stat-border: var(--danger-border); }
.c-stat.is-alert { background: var(--stat-soft, var(--surface-3)); border-color: var(--stat-border, var(--border)); border-top-color: var(--stat-accent); }
/* иконата на првиот ред од ознаката (и кога ознаката е во два реда) */
.c-stat__label { display: flex; align-items: flex-start; gap: 6px; color: var(--text-3); font-size: var(--fs-sm); font-weight: 500; line-height: var(--lh-tight); }
.c-stat__label > .icon { margin-top: calc((var(--lh-tight) * 1em - 16px) / 2); color: var(--stat-icon); }
.c-stat__value { font-size: var(--fs-3xl); font-weight: 700; font-variant-numeric: tabular-nums; line-height: var(--lh-tight); letter-spacing: -.01em; overflow-wrap: anywhere; }
.c-stat__hint { margin-top: auto; color: var(--muted); font-size: var(--fs-xs); }
.c-stat.is-alert .c-stat__hint { color: var(--text-3); }
.c-stats--compact { --stats-gap: 8px; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }
.c-stats--compact .c-stat { gap: 2px; min-height: 0; padding: 12px 14px; }
.c-stats--compact .c-stat__value { font-size: var(--fs-xl); }
/* subgrid: бројките и hint-от во ист ред и со ознака во два реда или без hint; редовите ги дели margin (gap-от би влегол во плочката) */
@supports (grid-template-rows: subgrid) {
    .c-stats { row-gap: 0; margin-bottom: calc(-1 * var(--stats-gap)); }
    .c-stat { display: grid; grid-row: span 3; grid-template-rows: subgrid; align-content: start; margin-bottom: var(--stats-gap); }
    .c-stat__label { align-self: start; }
    .c-stat__hint { margin-top: 0; }
}
/* ── SUMMARY LINE ── */
.c-summary { color: var(--text-3); }
.c-summary a { color: inherit; }
.c-summary a:hover { color: var(--link); }
.c-summary [data-stat], .c-stat__hint [data-stat] { color: var(--text); font-weight: 600; font-variant-numeric: tabular-nums; }
/* ── LISTS ── */
.c-list__item + .c-list__item { border-top: 1px solid var(--border); }
.c-list__link { display: flex; align-items: center; gap: 6px 12px; min-height: 56px; padding: 12px 20px; color: var(--text); transition: background-color var(--tr); }
.c-list__link:hover { background: var(--surface-2); text-decoration: none; }
.c-list__main { display: flex; flex: 1 1 auto; flex-direction: column; gap: 2px; min-width: 0; }
.c-list__title, .c-list__meta { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.c-list__title, .c-tile__name { font-weight: 600; line-height: var(--lh-tight); }
.c-list__meta { color: var(--muted); font-size: var(--fs-sm); }
/* --quiet: насловите 500, задебелен само .is-replied; значките паѓаат под текстот наместо насловот да има <16rem (:where: ≤768 важи 100%) */
.c-list--quiet .c-list__title { font-weight: 500; }
.c-list--quiet .is-replied .c-list__title { font-weight: 600; }
.c-list--quiet .c-list__link { flex-wrap: wrap; }
:where(.c-list--quiet) .c-list__main { flex-basis: 16rem; }
/* --keep: се скратува само .c-list__trunc, датумот по него останува */
.c-list__meta--keep { display: flex; gap: 4px; }
.c-list__meta--keep > * { flex: none; }
.c-list__meta--keep > .c-list__trunc { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.c-list__side { display: flex; flex: none; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 4px 8px; }
.c-list__time { color: var(--muted); font-size: var(--fs-xs); font-variant-numeric: tabular-nums; white-space: nowrap; }
/* ── TILE: избирлива картичка-копче [aria-pressed] ── */
.c-tile { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; min-height: 104px; padding: 12px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md); color: var(--text); font: inherit; text-align: left; cursor: pointer; transition: border-color var(--tr), background-color var(--tr); }
.c-tile:hover { border-color: var(--border-strong); background: var(--surface-2); }
.c-tile[aria-pressed="true"] { border-color: var(--primary); background: var(--primary-soft); }
.c-tile__top { display: flex; align-items: center; justify-content: space-between; width: 100%; min-height: 22px; }
.c-tile__desc { display: -webkit-box; overflow: hidden; color: var(--text-3); font-size: var(--fs-xs); -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.c-tile__price { margin-top: auto; font-weight: 600; }
.c-tile__unit { color: var(--text-3); font-size: var(--fs-xs); font-weight: 400; }
/* ── BADGES, PRIO, TAG ── */
.c-badge { display: inline-flex; flex: none; align-items: center; gap: 4px; height: 22px; padding: 0 8px; border: 1px solid transparent; border-radius: var(--r-pill); font-size: var(--fs-xs); font-weight: 600; line-height: 1; white-space: nowrap; vertical-align: middle; }
.c-badge > .icon, .c-prio > .icon { width: 12px; height: 12px; }
.c-badge--primary { background: var(--primary-soft); border-color: var(--primary-soft-border); color: var(--primary-text); }
.c-badge--success { background: var(--success-soft); border-color: var(--success-border); color: var(--success-text); }
.c-badge--warning { background: var(--warning-soft); border-color: var(--warning-border); color: var(--warning-text); }
.c-badge--danger, .c-filepick__item.is-error { background: var(--danger-soft); border-color: var(--danger-border); color: var(--danger-strong); }
.c-badge--neutral { background: var(--neutral-soft); border-color: var(--border); color: var(--neutral-text); }
.c-badge--muted { background: var(--surface); border-color: var(--border); color: var(--text-3); }
.c-badge--fill { background: var(--accent-fill); border-color: var(--accent-fill); color: #fff; }
.c-badge--dashed { border-style: dashed; border-color: var(--border-strong); }
.c-badges { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px; vertical-align: middle; }
.c-prio { display: inline-flex; align-items: center; gap: 4px; color: var(--text-3); font-size: var(--fs-xs); font-weight: 500; white-space: nowrap; vertical-align: middle; }
.c-tag { display: inline-flex; align-items: center; height: 20px; padding: 0 6px; border-radius: var(--r-sm); background: var(--surface-3); color: var(--text-3); font-size: var(--fs-xs); font-weight: 500; line-height: 1; white-space: nowrap; vertical-align: middle; }
.c-tbd { color: var(--text-3); font-weight: 500; }
/* ── COUNT, AVATAR ── */
.c-count { display: inline-flex; align-items: center; justify-content: center; flex: none; min-width: 20px; height: 20px; padding: 0 6px; border-radius: var(--r-pill); background: var(--primary-soft); color: var(--primary-text); font-size: var(--fs-xs); font-weight: 600; font-variant-numeric: tabular-nums; line-height: 1; }
.c-avatar { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 32px; height: 32px; border-radius: var(--r-pill); background: var(--surface-3); color: var(--text-2); font-size: var(--fs-sm); font-weight: 600; letter-spacing: 0; line-height: 1; user-select: none; }
.c-avatar--sm { width: 24px; height: 24px; font-size: var(--fs-xs); }
.c-avatar--lg { width: 56px; height: 56px; font-size: var(--fs-xl); }
/* ── ALERTS ── */
.c-alert { --alert-tone: var(--primary); --alert-title: var(--primary-text); display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; border: 1px solid var(--primary-soft-border); border-radius: var(--r-md); background: var(--primary-soft); color: var(--text-2); }
.c-alert--success { --alert-tone: var(--success); --alert-title: var(--success-text); background: var(--success-soft); border-color: var(--success-border); }
.c-alert--warning { --alert-tone: var(--warning); --alert-title: var(--warning-text); background: var(--warning-soft); border-color: var(--warning-border); }
.c-alert--danger { --alert-tone: var(--danger); --alert-title: var(--danger-strong); background: var(--danger-soft); border-color: var(--danger-border); }
.c-alert__icon { margin-top: 2px; color: var(--alert-tone); }
.c-alert__content, .c-switch-row__text { flex: 1 1 auto; min-width: 0; }
.c-alert__title { color: var(--alert-title); font-weight: 600; }
.c-alert__title + .c-alert__body { margin-top: 2px; }
.c-alert__body { overflow-wrap: anywhere; }
.c-alert a:not(.c-btn) { color: inherit; font-weight: 500; text-decoration: underline; }
/* „Инсталирај“ (Фаза 9, install_banner): c-alert со копчиња десно; кога нема место копчињата одат во свој ред */
.c-install { flex-wrap: wrap; align-items: center; }
.c-install .c-alert__icon { margin-top: 0; }
.c-install .c-alert__content { flex-basis: 240px; }
.c-install__actions { display: flex; gap: 8px; margin-left: auto; }
/* „Известувања на телефон“ (Фаза 17, push_card во Профил): една видлива состојба (push.js), статус со икона, копчиња */
.c-card + .c-push { margin-top: var(--sp-4); }
.c-push__lead, .c-push__devices { color: var(--muted); }
.c-push__devices { font-size: var(--fs-sm); }
.c-push__status { display: flex; align-items: center; gap: 6px; margin-bottom: 12px; color: var(--text-2); font-weight: 500; }
.c-push__status--on { color: var(--success-text); }
.c-push__actions { display: flex; flex-wrap: wrap; gap: 8px; }
@media (max-width: 768px) { .c-push__actions > .c-btn { flex: 1 1 100%; } }
/* „Апликација IT HelpDesk“ (Фаза 23, app_card во Профил): една видлива состојба (pwa.js), упатства во листа, „Инсталирај“;
   втората линија во install_banner („Подоцна: Профил → Апликација“); ознаката „апликација“ во Клиенти / Агенти */
.c-card + .c-app { margin-top: var(--sp-4); }
.c-app__lead, .c-app__tip { color: var(--muted); }
.c-app__tip { font-size: var(--fs-sm); }
.c-app__state > * + * { margin-top: 8px; }
.c-app__status { display: flex; align-items: center; gap: 6px; color: var(--text-2); font-weight: 500; }
.c-app__status--ok { color: var(--success-text); }
.c-app__status .icon { flex: none; }
.c-app__steps { margin: 0; padding-left: 22px; color: var(--text-2); list-style: disc; }
ol.c-app__steps { list-style: decimal; }
.c-app__steps > li::marker { color: var(--muted); }
.c-app__steps > li + li { margin-top: 6px; }
.c-app__glyph { display: inline-flex; vertical-align: -3px; color: var(--primary); }
.c-app__actions { display: flex; flex-wrap: wrap; gap: 8px; }
@media (max-width: 768px) { .c-app__actions > .c-btn { flex: 1 1 100%; } }
.c-install__later { margin-top: 2px; font-size: var(--fs-sm); }
.c-tag--app { gap: 3px; }
.c-app-seen .icon { margin-right: 6px; vertical-align: -2px; }
/* ── TOASTS ── */
.c-toasts { position: fixed; top: 16px; right: 16px; z-index: var(--z-toast); display: flex; flex-direction: column; gap: 8px; width: min(380px, 100vw - 32px); pointer-events: none; }
.c-toast { --toast-tone: var(--primary); display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: start; gap: 10px; padding: 12px; background: var(--surface); border: 1px solid var(--border); border-left: 3px solid var(--toast-tone); border-radius: var(--r-md); box-shadow: var(--sh-2); color: var(--text-2); font-size: var(--fs-base); line-height: var(--lh-base); pointer-events: auto; animation: c-toast-in var(--tr); }
.c-toast--success { --toast-tone: var(--success); }
.c-toast--warning { --toast-tone: var(--warning); }
.c-toast--danger { --toast-tone: var(--danger); }
.c-toast__icon { color: var(--toast-tone); }
.c-toast__close { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; margin: 0; padding: 0; border: 0; border-radius: var(--r-sm); background: transparent; color: var(--muted); cursor: pointer; }
.c-toast.is-leaving { opacity: 0; transform: translateY(-4px); transition: opacity var(--tr), transform var(--tr); }
@keyframes c-toast-in {
    from { opacity: 0; transform: translateY(-4px); }
}
@media (max-width: 768px) {
    .c-toasts { top: calc(var(--topbar-h) + 12px); right: 12px; left: 12px; width: auto; }
    .c-toast__close { width: 44px; height: 44px; margin: -12px -12px -12px 0; }
}
/* ── EMPTY (--compact = еден ред во картичка) ── */
.c-empty { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 40px 20px; text-align: center; }
.c-empty__icon { display: inline-flex; flex: none; align-items: center; justify-content: center; width: 64px; height: 64px; margin-bottom: 8px; border-radius: var(--r-pill); background: var(--empty-soft, var(--surface-3)); color: var(--empty-text, var(--text-3)); }
.c-empty__text { max-width: var(--w-auth); color: var(--muted); }
.c-empty__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 8px; }
.c-empty--success { --empty-soft: var(--success-soft); --empty-text: var(--success-text); --empty-icon: var(--success); }
.c-empty--primary { --empty-soft: var(--primary-soft); --empty-text: var(--primary-text); --empty-icon: var(--primary); }
.c-empty--warning { --empty-soft: var(--warning-soft); --empty-text: var(--warning-text); --empty-icon: var(--warning); }
.c-empty--danger { --empty-soft: var(--danger-soft); --empty-text: var(--danger-strong); --empty-icon: var(--danger); }
.c-empty--compact { flex-direction: row; flex-wrap: wrap; justify-content: flex-start; gap: 4px 10px; padding: 16px 20px; text-align: left; }
.c-empty--compact .c-empty__icon { width: auto; height: auto; margin: 0; background: none; color: var(--empty-icon, var(--muted)); }
.c-empty--compact .c-empty__title { flex: 1 1 12rem; min-width: 0; color: var(--text-3); font-size: var(--fs-base); font-weight: 500; letter-spacing: 0; }
.c-empty--compact .c-empty__actions { margin: 0 0 0 auto; }
/* во картичка со padding: порамнето со насловот */
.c-card:not(.c-card--flush) > .c-empty--compact { padding-inline: 0; }
/* ── DL, PROSE, CODE ── */
.c-dl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 24px; }
.c-dl--1 { grid-template-columns: minmax(0, 1fr); }
.c-dl__item { display: grid; align-content: start; gap: 2px; min-width: 0; }
.c-dl dt { color: var(--muted); font-size: var(--fs-xs); font-weight: 500; }
.c-dl dd, .c-toast__text { min-width: 0; overflow-wrap: anywhere; }
.c-prose, .c-codeblock { padding: 12px 14px; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r-md); }
.c-prose { white-space: pre-wrap; overflow-wrap: anywhere; }
.c-codeblock { overflow-x: auto; color: var(--text-2); font-size: var(--fs-sm); white-space: pre; }
/* ── MISC: наслов на секција, делител, прилози, auth картичка, Turnstile ── */
.c-section-title { color: var(--text-3); font-size: var(--fs-xs); font-weight: 600; letter-spacing: .04em; line-height: var(--lh-tight); text-transform: uppercase; }
.c-divider { height: 1px; margin: 16px 0; border: 0; background: var(--border); }
.c-divider--text { display: flex; align-items: center; gap: 12px; height: auto; background: none; color: var(--muted); font-size: var(--fs-xs); }
.c-code { padding: 2px 6px; border-radius: var(--r-sm); background: var(--surface-3); color: var(--text-2); font-size: var(--fs-sm); overflow-wrap: anywhere; }
/* прилози: legacy страниците ги задржуваат своите .att правила */
.att-list:where(:not(.l-legacy *)) { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.att:where(:not(.l-legacy *)) { display: inline-flex; flex-direction: column; justify-content: center; gap: 6px; max-width: 100%; padding: 6px 10px; border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface); font-size: var(--fs-sm); overflow-wrap: anywhere; }
.att:where(:not(.l-legacy *)):hover { border-color: var(--border-strong); background: var(--surface-2); text-decoration: none; }
.att-thumb:where(:not(.l-legacy *)) { display: block; max-width: 160px; max-height: 112px; border-radius: var(--r-sm); object-fit: cover; }
.att-icon { margin-right: 4px; }
.att-icon:where(:not(.l-legacy *)), .att-size:where(:not(.l-legacy *)) { color: var(--muted); }
.att-size:where(:not(.l-legacy *)) { font-size: var(--fs-xs); }
.c-auth-card { padding: 32px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); }
.c-auth-card > * + * { margin-top: 16px; }
.c-auth-card__logo { display: block; width: 112px; height: 56px; margin: 0 auto 24px; }
.c-auth-card__title { font-size: var(--fs-xl); font-weight: 600; text-align: center; }
.c-auth-card__sub { margin-top: 4px; color: var(--muted); text-align: center; }
.c-auth-card__sub + * { margin-top: 24px; }
.c-auth-card__link { display: flex; justify-content: center; }
.c-auth-card__link > a { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-sm); font-weight: 500; }
.c-auth-card__link--quiet > a { color: var(--text-3); }
.c-turnstile { min-height: 65px; }
.c-turnstile[data-size="flexible"] { width: 100%; }
/* ── мобилен (≤768), дел 1 ── */
@media (max-width: 768px) {
    .c-page-head__back { min-height: var(--tap); margin-bottom: 0; }
    .c-page-head__title { font-size: var(--fs-xl); }
    .c-page-head__actions { display: grid; grid-auto-columns: minmax(0, 1fr); grid-auto-flow: column; width: 100%; }
    .c-form__row, .c-form__row--3, .c-dl { grid-template-columns: minmax(0, 1fr); }
    .c-form__actions { flex-direction: column-reverse; align-items: stretch; }
    :is(.c-input, .c-select, .c-textarea) { font-size: var(--fs-md); }
    .c-check { min-height: var(--tap); }
    .c-check > input { width: 20px; height: 20px; }
    .c-switch__input { top: -12px; left: -4px; width: 44px; height: 44px; }
    .c-card { padding: 16px; }
    .c-card--flush { padding: 0; }
    .c-card--flush > :is(.c-card__head, .c-card__foot) { padding: 12px 16px; }
    .c-card--thread { padding: 0; border: 0; border-radius: 0; background: none; }
    .c-stats { --stats-gap: 8px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .c-stat__value { font-size: var(--fs-2xl); }
    .c-stats--compact .c-stat__value { font-size: var(--fs-lg); }
    .c-list__link { flex-wrap: wrap; padding: 12px 16px; }
    .c-list__main { flex-basis: 100%; }
    .c-list__title { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; white-space: normal; }
    .c-list__side { flex: 1 1 100%; justify-content: flex-start; min-width: 0; }
    .c-empty { padding: 32px 16px; }
    .c-empty--compact { padding: 12px 16px; }
    .att:where(:not(.l-legacy *)) { min-height: var(--tap); }
    .c-auth-card__link > a { min-height: var(--tap); }
    /* текст-линкови: 44px цел */
    a.c-card__actions { min-height: var(--tap); margin-block: -12px; }
    /* .c-summary: 44px цел од ::after под текстот (-1 во isolate): редот не се шири, текстот на секој линк има предност */
    .c-summary { isolation: isolate; }
    .c-summary a { position: relative; display: inline-block; }
    .c-summary a::after { content: ""; position: absolute; z-index: -1; inset: calc((100% - var(--tap)) / 2) 0; }
    .l-footer a { padding-block: 16px; }
}
@media (max-width: 400px) {
    .c-auth-card { padding: 16px; }
}
/* ── TABLES: секогаш во .c-table-wrap; мобилен --list (ентитети) или --stack (ставки) ── */
.c-table-wrap { position: relative; max-width: 100%; overflow-x: auto; }
.c-table-wrap--scroll > .c-table { min-width: 640px; }
.c-table { width: 100%; border-collapse: collapse; }
.c-table th { padding: 10px 12px; background: var(--surface-2); border-bottom: 1px solid var(--border); color: var(--text-3); font-size: var(--fs-xs); font-weight: 600; letter-spacing: .04em; line-height: var(--lh-tight); text-align: left; text-transform: uppercase; white-space: nowrap; }
.c-table td { padding: 10px 12px; border-bottom: 1px solid var(--border); vertical-align: middle; }
.c-table tbody tr:last-child > td { border-bottom: 0; }
.c-table tbody tr:hover > td { background: var(--primary-tint); }
.c-table--dense :is(th, td) { padding: 6px 12px; }
.c-table--dense td { font-size: var(--fs-sm); }
.c-table .c-table__num { font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.c-table__id { width: 64px; color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.c-table__primary { min-width: 200px; }
.c-table__primary > .c-badge { margin-left: 6px; }
.c-table__primary > .c-table__link:has(+ .c-badges) { margin-right: 6px; }
.c-table__link { color: var(--text); font-weight: 600; overflow-wrap: break-word; }
.c-table__link:hover { color: var(--link); }
.c-table__link:is(:hover, :focus-visible) { text-decoration: underline; }
.c-table__meta, .c-switch-row__desc { margin-top: 2px; color: var(--muted); font-size: var(--fs-sm); }
.c-table__nowrap { white-space: nowrap; }
.c-table .c-table__actions { text-align: right; white-space: nowrap; }
.c-table__actions > * + * { margin-left: 4px; }
.c-table__badges .c-badge + .c-badge { margin-left: 4px; }
/* anywhere би ја стеснил колоната до еден знак */
.c-table .c-code { overflow-wrap: normal; white-space: nowrap; }
.c-table tr.is-awaiting > td:first-child { box-shadow: inset 3px 0 0 var(--warning); }
/* opacity на редот: ::after на линкот останува над ќелиите; отворено резервно мени го враќа редот */
.c-table tr.is-muted { opacity: .6; }
.c-table tr.is-muted:has(.c-menu.is-open) { opacity: 1; }
.c-table tr.is-unpriced > td { background: var(--warning-soft); }
.c-table tbody tr:is(:hover, .is-unpriced) :is(.c-table__id, .c-table__meta) { color: var(--text-3); }
@media (max-width: 1279.98px) {
    .c-table__hide-md { display: none; }
    /* 769–1279 (со класичен scrollbar уште 15–17px помалку): ќелии 8px, заглавјата се прелеваат само кога мора */
    @media not all and (max-width: 768px) {
        .c-table :is(th, td) { padding-right: 8px; padding-left: 8px; }
        .c-table :is(th, td):first-child { padding-left: 12px; }
        .c-table :is(th, td):last-child { padding-right: 12px; }
        .c-table th, .c-table th.c-table__num { white-space: normal; text-wrap: balance; }
    }
    /* колона Агент (td.c-table__agent со title): само аватар / иконката на „Без агент“ */
    .c-table__agent-name { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
    .c-table__agent [data-flag="unassigned"] { width: 22px; padding: 0 0 0 4px; overflow: hidden; }
    .c-table tr.is-awaiting > td.c-table__hide-md:first-child + td { box-shadow: inset 3px 0 0 var(--warning); }
}
/* ── MENU: popover (позиција и резерва во app.js); мобилен bottom sheet ── */
.c-menu { display: none; position: fixed; z-index: var(--z-modal); margin: 0; inset: auto; min-width: 220px; max-width: calc(100vw - 16px); max-height: calc(100vh - 16px); overflow-y: auto; padding: 4px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md); box-shadow: var(--sh-2); color: var(--text-2); }
.c-menu:popover-open { display: block; }
.c-menu.is-open { display: block; }
.c-menu__form { margin: 0; }
.c-menu__item { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 36px; margin: 0; padding: 0 12px; border: 0; border-radius: var(--r-sm); background: none; color: var(--text-2); font: inherit; font-size: var(--fs-base); line-height: var(--lh-tight); text-align: left; white-space: nowrap; cursor: pointer; }
.c-menu__item:hover, .c-chip:hover, a.c-pager__link:hover { background: var(--surface-3); color: var(--text); text-decoration: none; }
.c-menu__item:disabled:hover { background: none; color: var(--text-2); }
.c-menu__item > .icon { color: var(--text-3); }
.c-menu__item--danger, .c-menu__item--danger > .icon { color: var(--danger-strong); }
.c-menu__item--danger:hover { background: var(--danger-soft); color: var(--danger-strong); }
.c-menu__sep { height: 1px; margin: 4px 0; border: 0; background: var(--border); }
/* резерва без popover: менито над соседните редови */
.c-table td.c-table__actions:has(> .c-menu.is-open) { position: relative; z-index: var(--z-modal); }
/* ── FILTERS ── */
.c-filters { display: grid; gap: 12px; padding: 12px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); }
/* чиповите над 768 се прелеваат; на мобилен се лизгаат (app.js го покажува активниот), --wrap се прелева и таму */
.c-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: -4px; padding: 4px; overflow-x: auto; scrollbar-width: none; }
.c-chip { display: inline-flex; flex: none; align-items: center; gap: 6px; height: 36px; padding: 0 14px; border: 1px solid var(--border); border-radius: var(--r-pill); background: var(--surface); color: var(--text-2); font-size: var(--fs-sm); font-weight: 500; white-space: nowrap; }
.c-chip.is-active, .c-pager__link.is-current { background: var(--accent-fill); border-color: var(--accent-fill); color: #fff; font-weight: 600; }
.c-chip__count { color: var(--text-3); font-size: var(--fs-xs); font-weight: 600; font-variant-numeric: tabular-nums; }
.c-chip.is-active .c-chip__count { color: inherit; }
.c-filters__row { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px; }
/* основи по стандардните текстови: редот се прелева пред полињата да го сечат текстот */
.c-filters__row .c-field { flex: 1 1 168px; }
.c-filters__row .c-filters__search { flex: 2 1 256px; }
.c-filters__more { display: contents; }
.c-filters__toggle .c-count { margin-left: 2px; }
html.no-js .c-filters__toggle { display: none !important; }
/* ── PAGER ── */
.c-pager { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; padding: 12px 16px; border-top: 1px solid var(--border); }
.c-pager__info { color: var(--text-3); font-size: var(--fs-sm); font-variant-numeric: tabular-nums; }
.c-pager__list { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.c-pager__link { display: inline-flex; align-items: center; justify-content: center; gap: 4px; min-width: 36px; height: 36px; padding: 0 10px; border: 1px solid transparent; border-radius: var(--r-md); color: var(--text-2); font-size: var(--fs-sm); font-weight: 500; font-variant-numeric: tabular-nums; }
.c-pager__prev, .c-pager__next { border-color: var(--border-control); }
.c-pager__gap { display: inline-flex; justify-content: center; min-width: 24px; color: var(--muted); }
/* ── THREAD ── */
.c-thread { display: flex; flex-direction: column; gap: 12px; margin: 0; padding: 0; list-style: none; }
.c-msg { min-width: 0; padding: 12px 16px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); scroll-margin-top: 16px; }
.c-msg--staff { background: var(--primary-soft); border-color: var(--primary-soft-border); border-left: 3px solid var(--primary); }
.c-msg--internal { background: var(--warning-soft); border-color: var(--warning-border); border-left: 3px solid var(--warning); }
/* аватар на обоена порака (--surface-3 не се гледа) */
.c-msg--staff .c-avatar { background: var(--primary-soft-border); color: var(--primary-text); }
.c-msg--internal .c-avatar { background: var(--warning-border); color: var(--text-2); }
.c-msg--system { display: flex; align-items: center; gap: 8px; padding: 2px 0; background: none; border: 0; border-radius: 0; color: var(--text-3); font-size: var(--fs-xs); text-align: center; }
.c-msg--system::before, .c-msg--system::after, .c-divider--text::before, .c-divider--text::after { content: ""; flex: 1 1 0; height: 1px; background: var(--border); }
/* повеќереден системски ред (\n): лево, без линии */
.c-msg--system.is-multiline { text-align: left; }
.c-msg--system.is-multiline::before, .c-msg--system.is-multiline::after { display: none; }
.c-msg__line { flex: 0 1 auto; min-width: 0; overflow-wrap: anywhere; }
.c-msg--system .c-msg__icon { width: 14px; height: 14px; }
.c-msg__head { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; color: var(--text-3); font-size: var(--fs-sm); }
.c-msg__author { color: var(--text); font-weight: 600; }
.c-msg__time, .c-msg__edited { font-variant-numeric: tabular-nums; }
.c-msg__edited { font-size: var(--fs-xs); }
.c-msg__body { margin-top: 8px; color: var(--text); overflow-wrap: anywhere; }
.c-msg__icon { margin-right: 6px; color: var(--text-3); }
.c-msg__actions { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 8px; }
.c-msg__history { margin-top: 8px; color: var(--text-3); font-size: var(--fs-sm); }
.c-msg__history > summary { padding: 6px 0; font-weight: 500; cursor: pointer; }
.c-msg__version { margin-top: 8px; padding: 8px 12px; border-left: 2px solid var(--border-strong); color: var(--text-2); white-space: pre-wrap; overflow-wrap: anywhere; }
.c-msg__version > .c-msg__time { display: block; margin-bottom: 2px; color: var(--text-3); font-size: var(--fs-xs); white-space: normal; }
.c-msg__edit { display: grid; gap: 8px; margin-top: 8px; }
.c-msg__edit-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
/* ── COMPOSER ── */
.c-composer__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; }
.c-composer__title { font-size: var(--fs-md); font-weight: 600; letter-spacing: -.01em; }
.c-composer__mode { display: inline-flex; align-items: center; gap: 8px; min-height: 32px; color: var(--text-2); font-size: var(--fs-sm); font-weight: 500; cursor: pointer; }
.c-composer__mode > .icon, .c-composer__banner > .icon { color: var(--warning); }
.c-composer__banner { display: flex; align-items: center; gap: 8px; padding: 8px 12px; background: var(--surface); border: 1px solid var(--warning-border); border-radius: var(--r-md); color: var(--text-2); font-size: var(--fs-sm); }
.c-composer.is-internal { background: var(--warning-soft); border-color: var(--warning-border); }
.c-composer__hint { min-height: 20px; color: var(--text-3); font-size: var(--fs-sm); }
.c-composer__hint[data-tone="warning"] { color: var(--warning-text); font-weight: 500; }
.c-composer__hint[data-tone="danger"] { color: var(--danger-strong); }
.c-composer__hint[data-tone="success"] { color: var(--success-text); }
.c-composer__hint[data-tone="primary"] { color: var(--primary-text); }
/* „Испрати“ е прво во DOM (Enter никогаш не затвора); затворањето е визуелно пред него */
.c-composer__close { order: -1; }
.c-composer:not(.is-internal) .c-composer__int, .c-composer.is-internal .c-composer__pub { display: none; }
/* ── TOTALS ── */
.c-totals { display: grid; gap: 8px; width: 100%; max-width: 400px; margin-left: auto; font-variant-numeric: tabular-nums; }
.c-totals__row { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; }
.c-totals__row > dt { color: var(--text-3); }
.c-totals__row > dd { font-weight: 500; text-align: right; }
.c-totals__grand { flex-wrap: wrap; margin-top: 4px; padding-top: 12px; border-top: 1px solid var(--border); }
.c-totals__grand > * { white-space: nowrap; }
.c-totals__grand > dt { color: var(--text); font-size: var(--fs-md); font-weight: 600; }
.c-totals__grand > dd { margin-left: auto; font-size: var(--fs-3xl); font-weight: 700; letter-spacing: -.01em; }
/* ── MODAL ── */
/* главата и копчињата остануваат видливи додека се лизга долг дијалог (многу полиња); scroll-padding: поле со фокус не останува под нив */
.c-modal { width: min(560px, 100vw - 32px); max-width: none; max-height: calc(100vh - 32px); margin: auto; padding: 0; overflow: auto; scroll-padding: 72px 0; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--sh-2); color: var(--text); }
.c-modal::backdrop { background: var(--scrim); }
html:has(.c-modal[open]) { overflow: hidden; }
.c-modal__form { margin: 0; }
.c-modal__head { position: sticky; top: 0; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 20px; background: var(--surface); border-bottom: 1px solid var(--border); }
.c-modal__title { font-size: var(--fs-lg); font-weight: 600; letter-spacing: -.01em; }
.c-modal__body { display: grid; gap: 16px; padding: 20px; }
.c-modal__foot { position: sticky; bottom: 0; z-index: 1; display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px; padding: 12px 20px; background: var(--surface); border-top: 1px solid var(--border); }
.c-modal__form ~ form { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 0; padding: 12px 20px; background: var(--surface-2); border-top: 1px solid var(--border); color: var(--text-3); font-size: var(--fs-sm); }
/* ── TABS ── */
.c-tabs { display: flex; gap: 4px; overflow-x: auto; border-bottom: 1px solid var(--border); scrollbar-width: none; }
.c-tab { display: inline-flex; flex: none; align-items: center; gap: 8px; height: 40px; margin: 0; padding: 0 12px; border: 0; border-bottom: 2px solid transparent; background: none; color: var(--text-3); font: inherit; font-size: var(--fs-base); font-weight: 500; white-space: nowrap; cursor: pointer; }
.c-tab:hover { color: var(--text); }
.c-tab:focus-visible { outline-offset: -2px; }
.c-tab[aria-selected="true"] { border-bottom-color: var(--primary); color: var(--text); font-weight: 600; }
.c-tabpanel { padding-top: 16px; }
/* ── DISCLOSURE ── */
.c-disclosure { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md); }
.c-disclosure > summary { display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px; color: var(--text); font-weight: 600; list-style: none; cursor: pointer; }
.c-disclosure > summary::-webkit-details-marker { display: none; }
.c-disclosure > summary::after { content: ""; flex: none; width: 16px; height: 16px; margin-left: auto; background: var(--chevron) no-repeat center / 16px; transition: transform var(--tr); }
.c-disclosure[open] > summary::after { transform: rotate(180deg); }
.c-disclosure__body { padding: 0 16px 16px; }
/* ── DETAIL LAYOUT: ≥1280 две колони, под тоа една по DOM ── */
.l-detail { display: grid; grid-template-columns: minmax(0, 1fr) 340px; grid-template-rows: auto 1fr; grid-template-areas: "summary aside" "main aside"; align-items: start; gap: 16px 24px; }
.l-detail__summary { grid-area: summary; }
.l-detail__main { grid-area: main; }
.l-detail__aside { grid-area: aside; }
.l-detail__summary, .l-detail__main, .l-detail__aside { display: grid; align-content: start; gap: 16px; min-width: 0; }
.l-detail--no-summary { grid-template-rows: auto; grid-template-areas: "main aside"; }
@media (min-width: 1280px) and (min-height: 900px) {
    .l-detail__aside { position: sticky; top: 24px; }
    .l-body--client .l-detail__aside { top: calc(var(--tabbar-h) + 24px); }
}
@media (max-width: 1279.98px) {
    .l-detail { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; grid-template-areas: none; gap: 16px; }
    .l-detail > * { grid-area: auto; }
}
/* ── мобилен (≤768), дел 2 ── */
@media (max-width: 768px) {
    .c-table td.c-table__hide-md, .c-table th.c-table__hide-md { display: table-cell; }
    .c-table tr.is-awaiting > td.c-table__hide-md:first-child + td { box-shadow: none; }
    /* --list: еден линк по ред (::after го покрива редот), акциите над него */
    .c-table--list, .c-table--list tbody { display: block; }
    .c-table--list thead, .c-table--stack thead, .c-pager__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
    .c-table--list tr { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; padding: 12px 16px; border-bottom: 1px solid var(--border); }
    :is(.c-table--list, .c-table--stack) tbody tr:last-child { border-bottom: 0; }
    .c-table--list td, .c-table--list td.c-table__hide-md { display: block; padding: 0; border: 0; color: var(--text-3); font-size: var(--fs-sm); }
    :is(.c-table--list, .c-table--stack) tbody tr:hover > td { background: none; }
    .c-table--list tbody tr:hover { background: var(--primary-tint); }
    .c-table--list tr.is-awaiting { box-shadow: inset 3px 0 0 var(--warning); }
    :is(.c-table--list, .c-table--stack) tr.is-awaiting > td:first-child { box-shadow: none; }
    .c-table--list td.c-table__primary { display: flex; flex: 1 0 100%; flex-wrap: wrap; align-items: center; gap: 4px 8px; order: -1; min-width: 0; color: var(--text); font-size: var(--fs-base); }
    .c-table--list .c-table__link { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
    .c-table--list .c-table__link::after { content: ""; position: absolute; inset: 0; }
    .c-table--list td.c-table__primary > :is(.c-table__link, .c-badge, .c-badges, .c-table__meta) { margin: 0; }
    .c-table--list .c-table__primary > .c-table__meta { flex: 1 0 100%; }
    .c-table--list td.c-table__id { width: auto; }
    /* „·“ меѓу inline ќелиите (не по празна) */
    .c-table--list td.c-table__inline:not(:empty) ~ td.c-table__inline::before { content: "·"; margin-right: 8px; }
    /* клиентот во мета-редот: се скратува, најмалку --fill-min, најмногу текстот (вишокот оди пред значките) */
    .c-table--list td.c-table__fill { flex: 1 1 0; min-width: min(var(--fill-min, 96px), 100%); max-width: max-content; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    /* --wrap: „·“ во празнината, редот сече на content-box + 4px — ниту еден ред не почнува со „·“ (Chromium); цена:
       надворешните 8–12px на редот не се дел од линкот; ќелија што скратува треба overflow: clip + clip-margin 24px */
    @supports (overflow-clip-margin: content-box 4px) {
        .c-table--wrap tr { column-gap: 20px; overflow: clip; overflow-clip-margin: content-box 4px; }
        .c-table--wrap td.c-table__inline ~ td.c-table__inline { position: relative; }
        .c-table--wrap td.c-table__inline ~ td.c-table__inline::before { position: absolute; right: 100%; margin-right: 8px; }
    }
    .c-table--list td.c-table__badges { order: 1; margin-left: auto; }
    .c-table--list td.c-table__badges + td.c-table__badges { margin-left: 0; }
    .c-table--list td:empty { display: none; }
    .c-table--list td.c-table__actions { position: relative; z-index: 1; flex: 1 0 100%; order: 2; text-align: left; }
    .c-table--list td.c-table__actions:not(:empty) { display: flex; flex-wrap: wrap; gap: 8px; }
    .c-table--list td.c-table__actions > * + * { margin-left: 0; }
    /* --stack: ознака (data-label) лево, вредност десно */
    .c-table--stack, .c-table--stack :is(tbody, tfoot, tr) { display: block; }
    .c-table--stack tr { padding: 12px 16px; border-bottom: 1px solid var(--border); }
    .c-table--stack td, .c-table--stack td.c-table__hide-md { display: flow-root; padding: 4px 0; border: 0; text-align: right; overflow-wrap: anywhere; }
    .c-table--stack td::before { content: attr(data-label); float: left; max-width: 50%; margin-right: 12px; color: var(--text-3); font-size: var(--fs-xs); font-weight: 600; letter-spacing: .04em; line-height: var(--lh-base); text-align: left; text-transform: uppercase; }
    .c-table--stack td:is(.c-table__primary, .c-table__actions)::before { content: none; }
    .c-table--stack td.c-table__primary { padding-bottom: 8px; text-align: left; }
    .c-table--stack td.c-table__actions { padding-top: 8px; }
    .c-table--stack tr.is-unpriced { background: var(--warning-soft); }
    .c-table--stack tr.is-unpriced > td { background: none; }
    /* hide-sm по правилата што ги враќаат hide-md */
    .c-table :is(th, td).c-table__hide-sm { display: none; }
    .c-menu { top: auto; right: 0; bottom: 0; left: 0; width: 100%; max-width: none; min-width: 0; max-height: 80vh; padding: 8px 8px calc(8px + env(safe-area-inset-bottom)); border-width: 1px 0 0; border-radius: var(--r-lg) var(--r-lg) 0 0; }
    .c-menu::backdrop { background: var(--scrim); }
    .c-menu__item { min-height: var(--tap); }
    .c-chips { flex-wrap: nowrap; }
    .c-chips--wrap { flex-wrap: wrap; overflow: visible; }
    .c-chip { height: 40px; }
    .c-filters__row { display: grid; grid-template-columns: minmax(0, 1fr); }
    .c-filters__more { display: grid; gap: 12px; }
    html.js .c-filters__more:not(.is-open) { display: none; }
    .c-filters__actions > .c-btn { flex: 1 1 0; }
    .c-pager, .c-pager__list { justify-content: center; }
    .c-pager__info { width: 100%; text-align: center; }
    .c-pager__link { min-width: 44px; height: 44px; }
    .c-msg { padding: 12px; }
    .c-msg__history > summary { padding: 12px 0; }
    .c-composer__mode { min-height: var(--tap); }
    .c-totals { max-width: none; }
    .c-totals__grand > dd { font-size: var(--fs-2xl); }
    .c-modal { width: 100%; max-height: calc(100vh - 48px); margin: auto 0 0; scroll-padding: 84px 0 calc(128px + env(safe-area-inset-bottom)); border-width: 1px 0 0; border-radius: var(--r-lg) var(--r-lg) 0 0; }
    .c-modal__head, .c-modal__foot, .c-modal__form ~ form { padding-right: 16px; padding-left: 16px; }
    .c-modal__body { padding: 16px; }
    .c-modal__foot { flex-direction: column-reverse; align-items: stretch; padding-bottom: calc(12px + env(safe-area-inset-bottom)); }
    /* табовите го делат редот, без икони */
    .c-tabs { gap: 0; }
    .c-tab { flex: 1 1 auto; justify-content: center; height: var(--tap); padding: 0 6px; }
    .c-tab > .icon { display: none; }
}
@media (max-width: 400px) {
    .c-tabs:has(> .c-tab:nth-child(4)) > .c-tab { font-size: var(--fs-sm); }
}
/* ── клиент на мобилен (≤768): погусто (Фаза 5, TKT-2) — само .l-body--client; staff и јавните страници исти ──
   раб 8px (и горната лента), картички 12px, 12px меѓу блоковите и меѓу полињата; контролите остануваат 44px */
@media (max-width: 768px) {
    .l-body--client { --gutter: 8px; }
    .l-body--client .l-content { padding-top: 12px; padding-bottom: 24px; }
    .l-body--client .l-content > * + * { margin-top: 12px; }
    .l-body--client .c-page-head { gap: 8px 16px; margin-bottom: 12px; }
    .l-body--client .c-page-head__main { gap: 2px; }
    /* линкот „назад“ останува 44px цел, но не зафаќа 44px простор */
    .l-body--client .c-page-head__back { margin: -12px 0 -10px; }
    .l-body--client .c-card { padding: 12px; }
    .l-body--client :is(.c-card--flush, .c-card--thread) { padding: 0; }
    .l-body--client .c-card__head { margin-bottom: 12px; }
    .l-body--client .c-card--flush > :is(.c-card__head, .c-card__foot) { margin: 0; padding: 10px 12px; }
    .l-body--client :is(.c-form, .c-form__row, .u-stack) { gap: 12px; }
    .l-body--client .c-field { gap: 4px; }
    .l-body--client .c-filters { gap: 8px; padding: 8px; }
    .l-body--client .c-list__link { min-height: 48px; padding: 8px 12px; }
    .l-body--client .c-empty { padding: 24px 12px; }
    .l-body--client .c-empty--compact { padding: 10px 12px; }
    .l-body--client :is(.l-detail, .l-detail__summary, .l-detail__main, .l-detail__aside, .u-grid-2) { gap: 12px; }
    .l-body--client .c-thread { gap: 8px; }
    .l-body--client .c-msg { padding: 10px 12px; }
    .l-body--client :is(.c-table--list, .c-table--stack) tr { padding: 10px 12px; }
    .l-body--client .c-tabpanel { padding-top: 12px; }
}

/* ==== §6 UTILITIES ==== */
.u-muted { color: var(--muted); }
@media (max-width: 768px) {
    .u-hide-mobile { display: none !important; }
}
@media not all and (max-width: 768px) {
    .u-show-mobile { display: none !important; }
}
.u-sr-only { position: absolute !important; width: 1px !important; height: 1px !important; margin: 0 !important; padding: 0 !important; overflow: hidden !important; clip: rect(0 0 0 0) !important; clip-path: inset(50%) !important; white-space: nowrap !important; border: 0 !important; }
/* мамка за ботови: надвор од екранот, не display:none */
.u-hp { position: absolute !important; left: -10000px !important; top: auto !important; width: 1px !important; height: 1px !important; overflow: hidden !important; }
.u-skip { position: absolute; top: var(--sp-2); left: var(--sp-2); z-index: calc(var(--z-toast) + 1); display: inline-flex; align-items: center; min-height: var(--tap); padding: 0 var(--sp-4); background: var(--surface); color: var(--text); border: 1px solid var(--border-strong); border-radius: var(--r-md); font-weight: 600; text-decoration: none; }
.u-skip:not(:focus) { width: 1px; height: 1px; min-height: 0; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.u-num { font-variant-numeric: tabular-nums; }
.u-nowrap { white-space: nowrap; }
.u-truncate { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.u-break { overflow-wrap: anywhere; }
.u-mono { font-family: var(--font-mono); }
.u-right { text-align: right; }
.u-fw-600 { font-weight: 600; }
.u-stack { display: flex; flex-direction: column; gap: var(--sp-4); }
.u-stack-sm { display: flex; flex-direction: column; gap: var(--sp-2); }
.u-cluster { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); }
.u-grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-4); }
@media (max-width: 1023.98px) {
    .u-grid-2 { grid-template-columns: minmax(0, 1fr); }
}
.u-mt-0 { margin-top: 0 !important; }
.u-mb-0 { margin-bottom: 0 !important; }

/* ==== §7 LEGACY ==== */
/* неконвертирани страници (header/footer shim); широка табела се лизга во блокот */
.l-legacy { max-width: 1200px; margin: 0 auto; padding: 20px var(--gutter); font-size: 16px; line-height: 1.6; color: #333; }
.l-legacy ::placeholder { color: #c0c0c0; opacity: 1; }
.l-main > .l-legacy { flex-shrink: 0; width: 100%; overflow-x: auto; }

/* ==== §8 PRINT ==== */
@media print {
    .l-topbar, .l-sidebar, .l-scrim, .l-nav, .l-clientnav, .c-toasts, .u-skip { display: none !important; }
    .l-app { display: block !important; }
    .l-main { min-height: 0 !important; padding-bottom: 0 !important; border-left: 0 !important; background: none !important; }
    .l-content { max-width: none !important; padding: 0 !important; }
    :where(body) { background: var(--surface); }
    .c-card { break-inside: avoid; }
}

/* ==== §9 PAGES (пилот pg-*) ==== */
/* admin/tickets.php (769–1279 насловот ≥176px), admin/view_ticket.php (часови под формата) */
@media (max-width: 1279.98px) {
    .pg-staff-tickets-table .c-table__primary { min-width: 176px; }
}
/* admin/tickets.php — „Отвори“ во последната колона (Фаза 7, ADM2): со текст од 1280 и на мобилен (свој ред под
   мета-редот, над линкот на редот); на 769–1279 само стрелката (текстот останува за читачи на екран, копчето има title) —
   со текст табелата на 1024 се лизга странично. Од 1280 колоната Клиент бара 192px (компанијата и контактот во по еден
   ред, како пред новата колона; `width` е мека — кога нема место колоната се стеснува, табелата не се лизга); на 1280–1349
   (и со класичен scrollbar, 980px) местото го даваат ќелиите од 8px, како на 769–1279 */
@media (max-width: 1279.98px) {
    @media not all and (max-width: 768px) {
        .pg-staff-tickets-open { width: var(--control-h-sm); padding: 0; }
        .pg-staff-tickets-open > .c-btn__text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
    }
}
@media (min-width: 1280px) {
    .pg-staff-tickets-table td.c-table__fill { width: 192px; }
}
@media (min-width: 1280px) and (max-width: 1349.98px) {
    .pg-staff-tickets-table :is(th, td) { padding-right: 8px; padding-left: 8px; }
    .pg-staff-tickets-table :is(th, td):first-child { padding-left: 12px; }
    .pg-staff-tickets-table :is(th, td):last-child { padding-right: 12px; }
    .pg-staff-tickets-table td.c-table__fill { width: 184px; }
}
.pg-staff-ticket-facts { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--border); }
/* admin/view_ticket.php — „Историја на доделување“ под формата во картичката „Доделување“ (Фаза 6, REP) */
.pg-staff-ticket-assignlog { display: grid; gap: 8px; }
.c-form + .pg-staff-ticket-assignlog { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--border); }
/* „Измени“ + „Корекции на часови“ под „Работни часови“ во картичката „Детали“ (Фаза 27, само admin) */
.pg-staff-ticket-hours { display: grid; gap: 12px; margin-top: 12px; }
.pg-staff-ticket-hourslog { display: grid; gap: 8px; }
.pg-staff-ticket-assignlog ol, .pg-staff-ticket-hourslog ol { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; color: var(--text-2); font-size: var(--fs-sm); overflow-wrap: anywhere; }
.pg-staff-ticket-assignlog time, .pg-staff-ticket-hourslog time { color: var(--muted); font-variant-numeric: tabular-nums; }