/* source: ./themes/index.css */
/*
 * xacrm theme system entry-point.
 *
 * Order matters:
 *   1. Palette (raw hex)
 *   2. UI (theme-independent: spacing/radius/motion/typography)
 *   3. Default-dark (semantic tokens for dark + :root default)
 *   4. Default-light (overrides for [data-theme=light])
 *
 * Импортируется в `resources/css/xacss.css` ПЕРЕД компонентами,
 * чтобы все компоненты могли резолвить var(--color-*).
 */

/* nested: _palette.css */
/*
 * xacrm color palette v2.3 — Tesla-inspired (referenced from pin3).
 *
 * Источник истины. НЕ использовать --pal-* напрямую в компонентах.
 * Только через семантические токены из themes/{default-dark,default-light}.css.
 *
 * Палитра Tesla:
 *   BLACK    #000000
 *   CRIMSON  #DC143C — main brand action / CTA
 *   LIGHT GR #C9CBCC
 *   MID GR   #B0B0B0
 *   DARK GR  #717074
 *
 * Подход:
 *   - чистая холодная нейтральная серая шкала (без warm/yellow подтона)
 *   - crimson #DC143C — единственный яркий акцент, режет на чёрном/сером
 *   - electric blue cool — для focus/links/info, чтобы не путать с brand-red
 *   - semantic green/yellow/purple — нейтральные оттенки
 */

:root {
    /* ==========================================================
       PRIMARY — Tesla Crimson (brand action / CTA / selected)
       ========================================================== */
    --pal-primary-50:  #FCE5EB;
    --pal-primary-100: #F8C2CD;
    --pal-primary-200: #F08FA3;
    --pal-primary-300: #E55576;
    --pal-primary-400: #DC143C;     /* TESLA CRIMSON — main brand */
    --pal-primary-500: #DC143C;
    --pal-primary-600: #B0102F;
    --pal-primary-700: #850C24;
    --pal-primary-800: #5C081A;
    --pal-primary-900: #340410;

    /* Named brand variants */
    --pal-primary-hot:    #F02050;   /* lighter crimson highlight */
    --pal-primary-orange: #DC143C;   /* alias-back to crimson — нет оранжевого в Tesla */
    --pal-primary-deep:   #850C24;

    /* ==========================================================
       CRIMSON — alias to primary (нет отдельного второго красного)
       ========================================================== */
    --pal-crimson-300: #E55576;
    --pal-crimson-500: #B0102F;     /* чуть темнее brand для destructive */
    --pal-crimson-700: #850C24;
    --pal-crimson-900: #340410;

    /* ==========================================================
       ELECTRIC — Cool Blue (focus / links / info / charts)
       ========================================================== */
    --pal-electric-50:  #EFF6FF;
    --pal-electric-100: #DBEAFE;
    --pal-electric-200: #BFDBFE;
    --pal-electric-300: #93C5FD;
    --pal-electric-400: #60A5FA;
    --pal-electric-500: #3B82F6;     /* COOL BLUE — main electric */
    --pal-electric-600: #2563EB;
    --pal-electric-700: #1D4ED8;
    --pal-electric-800: #1E40AF;
    --pal-electric-900: #1E3A8A;

    --pal-electric-hot:  #60A5FA;
    --pal-electric-deep: #1D4ED8;

    /* ==========================================================
       DARK NEUTRALS — pure cool grey (без warm/yellow tint)
       ========================================================== */
    --pal-dark-950: #0A0A0B;
    --pal-dark-900: #161618;        /* MAIN APP BG — almost black */
    --pal-dark-850: #1C1C1E;
    --pal-dark-800: #232326;
    --pal-dark-750: #2A2A2D;
    --pal-dark-700: #303034;
    --pal-dark-650: #3A3A3E;
    --pal-dark-600: #424247;
    --pal-dark-500: #56565B;
    --pal-dark-400: #717074;        /* TESLA DARK GRAY */
    --pal-dark-300: #B0B0B0;        /* TESLA MID GRAY */
    --pal-dark-200: #C9CBCC;        /* TESLA LIGHT GRAY */
    --pal-dark-100: #E4E5E6;        /* primary text on dark */

    /* ==========================================================
       LIGHT NEUTRALS — clean off-white (без warm tint)
       ========================================================== */
    --pal-light-50:  #F4F5F6;       /* MAIN LIGHT BG — clean cool grey */
    --pal-light-100: #E8E9EA;
    --pal-light-200: #C9CBCC;       /* TESLA LIGHT GRAY */
    --pal-light-300: #B0B0B0;       /* TESLA MID GRAY */
    --pal-light-400: #888A8C;
    --pal-light-500: #717074;       /* TESLA DARK GRAY — muted text */
    --pal-light-600: #56565B;
    --pal-light-700: #38383B;
    --pal-light-800: #232326;
    --pal-light-900: #161618;

    /* ==========================================================
       SEMANTIC — нейтральные оттенки, не Tesla-specific
       ========================================================== */
    --pal-success-500: #22C55E;
    --pal-success-700: #15803D;
    --pal-warning-500: #EAB308;
    --pal-warning-700: #A16207;
    --pal-danger-500:  var(--pal-crimson-500);   /* slightly darker than brand */
    --pal-danger-700:  var(--pal-crimson-700);
    --pal-info-500:    var(--pal-electric-500);
    --pal-purple-500:  #A78BFA;
    --pal-pink-500:    var(--pal-primary-500);   /* highlight accent == brand crimson */
}

/* nested: _ui.css */
/*
 * UI system tokens — typography / spacing / radius / motion / layout.
 * Theme-independent (одинаковые для dark/light).
 */

:root {
    /* ==========================================================
       SPACING — 4px base scale
       ========================================================== */
    --space-1:  4px;
    --space-2:  8px;
    --space-3:  12px;
    --space-4:  16px;
    --space-5:  20px;
    --space-6:  24px;
    --space-8:  32px;
    --space-10: 40px;
    --space-12: 48px;

    /* ==========================================================
       RADIUS — compact product surfaces + pill
       ========================================================== */
    --radius-sm:    2px;
    --radius-md:    4px;
    --radius-lg:    6px;
    --radius-xl:    8px;
    --radius-2xl:   10px;
    --radius-round: 999px;

    /* ==========================================================
       TYPOGRAPHY
       ========================================================== */
    --font-sans: 'Google Sans';
    --font-mono: 'Google Sans';

    --font-size-xs:   11px;
    --font-size-sm:   12px;
    --font-size-base: 14px;
    --font-size-md:   14px;
    --font-size-lg:   16px;
    --font-size-xl:   20px;
    --font-size-2xl:  24px;
    --font-size-3xl:  32px;

    --font-weight-regular:  400;
    --font-weight-medium:   500;
    --font-weight-semibold: 600;
    --font-weight-bold:     700;
    --font-weight-extra:    800;

    --line-height-tight:    1.2;
    --line-height-snug:     1.4;
    --line-height-normal:   1.5;
    --line-height-relaxed:  1.7;

    /* Headings */
    --heading-1-size:   24px;
    --heading-1-weight: 700;
    --heading-2-size:   20px;
    --heading-2-weight: 700;
    --heading-3-size:   16px;
    --heading-3-weight: 600;
    --heading-4-size:   14px;
    --heading-4-weight: 600;

    /* ==========================================================
       MOTION — durations + easings
       ========================================================== */
    --motion-instant: 80ms;
    --motion-fast:    120ms;
    --motion-base:    180ms;
    --motion-slow:    260ms;
    --motion-slower:  400ms;

    --ease-standard:  cubic-bezier(0.2, 0.8, 0.2, 1);
    --ease-out:       cubic-bezier(0, 0, 0.2, 1);
    --ease-in:        cubic-bezier(0.4, 0, 1, 1);
    --ease-in-out:    cubic-bezier(0.4, 0, 0.2, 1);
    --ease-spring:    cubic-bezier(0.25, 0.8, 0.25, 1);  /* kanban / widget / slide-panel — НЕ ИЗМЕНЯТЬ */

    /* ==========================================================
       LAYOUT — sidebar / header / aside
       ========================================================== */
    --sidebar-width:           224px;
    --sidebar-collapsed-width: 48px;
    --header-height:           64px;
    --xa-layout-aside-width:   245px;
    --xa-layout-sidebar-gap:   var(--space-4);
}

/* nested: default-dark.css */
/*
 * Default DARK theme — semantic token assignment.
 *
 * Все компоненты ссылаются ТОЛЬКО на эти семантические токены.
 * НЕ использовать --pal-* в компонентах напрямую.
 *
 * Backward compat: legacy `--color-*` имена сохранены и получают новые значения.
 */

:root,
[data-theme="dark"] {

    /* ==========================================================
       BRAND — Tesla crimson (CTA) + cool blue electric (focus/links)
       ========================================================== */
    --color-brand-primary:        var(--pal-primary-500);   /* #DC143C — Tesla crimson */
    --color-brand-primary-hover:  var(--pal-primary-hot);
    --color-brand-primary-active: var(--pal-primary-600);
    --color-brand-primary-soft:   color-mix(in srgb, var(--pal-primary-500) 15%, transparent);
    --color-brand-primary-muted:  color-mix(in srgb, var(--pal-primary-500) 8%, transparent);
    --color-brand-primary-border: color-mix(in srgb, var(--pal-primary-500) 30%, transparent);

    --color-brand-electric:       var(--pal-electric-500);  /* #3B82F6 — cool blue */
    --color-brand-electric-hover: var(--pal-electric-400);
    --color-brand-electric-soft:  color-mix(in srgb, var(--pal-electric-500) 15%, transparent);
    --color-brand-electric-border:color-mix(in srgb, var(--pal-electric-500) 30%, transparent);

    --color-brand-electric-glow:  color-mix(in srgb, var(--pal-electric-500) 24%, transparent);

    /* ==========================================================
       SURFACES — deeper, layered dark surfaces (not flat #111)
       ========================================================== */
    --color-bg-app:        #060606;   /* outermost canvas */
    --color-bg-canvas:     #060606;
    --color-bg-sidebar:    #060606;
    --color-bg-header:     #060606;
    --color-bg-surface:    var(--pal-dark-800);
    --color-bg-surface-2:  var(--pal-dark-750);   /* card */
    --color-bg-surface-3:  var(--pal-dark-700);   /* inner panels, modals */
    --color-bg-elevated:   var(--pal-dark-650);   /* dropdowns, popovers */
    --color-bg-input:      var(--pal-dark-800);
    --color-bg-hover:      var(--pal-dark-700);
    --color-bg-selected:   color-mix(in srgb, var(--pal-primary-500) 12%, var(--pal-dark-750));
    --color-bg-content-wrapper: var(--pal-dark-850);
    --color-border-content-wrapper: var(--pal-dark-650);
    --color-bg-entity-surface: var(--pal-dark-850);
    --color-bg-entity-panel: var(--pal-dark-750);
    --color-bg-entity-panel-hover: color-mix(in srgb, var(--color-bg-entity-panel) 88%, #ffffff);
    --color-border-entity-panel: var(--pal-dark-600);
    --color-tab-active-bg: var(--pal-dark-800);
    --color-tab-active-border: var(--pal-dark-750);
    --color-tab-active-text: var(--pal-dark-100);
    --color-tab-active-radius: 20px;
    --color-text-entity-sidebar-value: var(--pal-dark-300);
    --color-surface-muted: rgba(255, 255, 255, 0.05);
    --radius-content-wrapper: 8px;

    /* ==========================================================
       BORDERS — graduated subtlety
       ========================================================== */
    --color-border-subtle:  color-mix(in srgb, var(--pal-dark-500) 50%, transparent);
    --color-border-default: #70707070;
    --color-border-strong:  var(--pal-dark-500);
    --color-border-focus:   var(--color-brand-electric);

    /* ==========================================================
       TEXT — clear hierarchy, warm-tinted
       ========================================================== */
    --color-text-primary:   var(--pal-dark-100);  /* almost-white, slight warmth */
    --color-text:           var(--color-text-primary);
    --color-text-secondary: var(--pal-dark-300);
    --color-text-tertiary:  var(--pal-dark-400);
    --color-text-muted:     var(--pal-dark-500);
    --color-text-inverse:   var(--pal-light-900);

    --color-icon-primary:   var(--pal-dark-200);
    --color-icon-secondary: var(--pal-dark-400);
    --color-icon-muted:     var(--pal-dark-500);

    /* ==========================================================
       ACCENT — points to brand-electric (functional accent for
       focus/links/info — to keep red-orange exclusive to action)
       ========================================================== */
    --color-accent:        var(--color-brand-electric);
    --color-accent-hover:  var(--color-brand-electric-hover);

    /* Soft-bg / soft-border helpers */
    --color-accent-soft:        var(--color-brand-electric-soft);
    --color-accent-soft-bg:     var(--color-brand-electric-soft);
    --color-accent-soft-border: var(--color-brand-electric-border);
    --color-nav-hover-bg:       color-mix(in srgb, var(--color-text-primary) 7%, transparent);
    --color-nav-active-bg:      color-mix(in srgb, var(--color-text-primary) 12%, transparent);

    /* ==========================================================
       SEMANTIC — distinct from brand
       ========================================================== */
    --color-success:        var(--pal-success-500);
    --color-success-soft:   color-mix(in srgb, var(--pal-success-500) 15%, transparent);
    --color-warning:        var(--pal-warning-500);
    --color-warning-soft:   color-mix(in srgb, var(--pal-warning-500) 18%, transparent);
    --color-danger:         var(--pal-danger-500);
    --color-danger-soft:    color-mix(in srgb, var(--pal-danger-500) 15%, transparent);
    --color-info:           var(--pal-info-500);
    --color-info-soft:      color-mix(in srgb, var(--pal-info-500) 14%, transparent);
    --color-draft:          var(--pal-purple-500);
    --color-draft-soft:     color-mix(in srgb, var(--pal-purple-500) 16%, transparent);
    --color-highlight-accent: var(--pal-pink-500);

    /* ==========================================================
       CRM-specific — status / priority
       ========================================================== */
    --color-status-new:        var(--color-brand-electric);
    --color-status-pending:    var(--pal-warning-500);
    --color-status-confirmed:  var(--pal-electric-300);
    --color-status-progress:   var(--pal-primary-orange);
    --color-status-completed:  var(--pal-success-500);
    --color-status-cancelled:  var(--pal-dark-400);
    --color-status-no-show:    var(--pal-dark-300);
    --color-status-rescheduled:var(--pal-purple-500);

    --color-priority-low:      var(--pal-dark-400);
    --color-priority-normal:   var(--color-brand-electric);
    --color-priority-high:     var(--pal-primary-orange);
    --color-priority-critical: var(--pal-danger-500);

    /* ==========================================================
       GRADIENTS — brand expression + surface depth
       ========================================================== */
    --gradient-brand-primary: linear-gradient(135deg, var(--pal-primary-hot) 0%, var(--pal-primary-500) 50%, var(--pal-primary-700) 100%);
    --gradient-brand-hot:     linear-gradient(135deg, var(--pal-primary-900) 0%, var(--pal-primary-700) 45%, var(--pal-primary-500) 100%);
    --gradient-brand-subtle:  linear-gradient(135deg, color-mix(in srgb, var(--pal-primary-500) 18%, transparent) 0%, color-mix(in srgb, var(--pal-primary-700) 8%, transparent) 100%);
    --gradient-electric:      linear-gradient(135deg, var(--pal-electric-700) 0%, var(--pal-electric-500) 50%, var(--pal-electric-300) 100%);
    --gradient-surface:       linear-gradient(180deg, var(--pal-dark-750) 0%, var(--pal-dark-850) 100%);
    --gradient-card:          linear-gradient(180deg, var(--pal-dark-700) 0%, var(--pal-dark-800) 100%);
    --gradient-chart-area:    linear-gradient(180deg, color-mix(in srgb, var(--pal-primary-500) 30%, transparent) 0%, color-mix(in srgb, var(--pal-primary-500) 0%, transparent) 100%);

    /* ==========================================================
       SHADOWS — elevation system, dark-theme tuned (deeper subtle)
       ========================================================== */
    --shadow-xs:     0 1px 2px rgba(0, 0, 0, 0.4);
    --shadow-sm:     0 2px 4px rgba(0, 0, 0, 0.4), 0 1px 2px rgba(0, 0, 0, 0.3);
    --shadow-md:     0 4px 12px rgba(0, 0, 0, 0.45), 0 2px 4px rgba(0, 0, 0, 0.3);
    --shadow-lg:     0 12px 32px rgba(0, 0, 0, 0.5), 0 4px 8px rgba(0, 0, 0, 0.35);
    --shadow-xl:     0 24px 60px rgba(0, 0, 0, 0.55), 0 8px 16px rgba(0, 0, 0, 0.4);
    --shadow-card-hover: 0 8px 24px rgba(0, 0, 0, 0.5), 0 0 0 1px var(--color-brand-primary-border);
}

/* nested: default-light.css */
/*
 * Default LIGHT theme — Monokai light variant (warm cream surfaces).
 * Brand raspberry pink (#F92672) + electric cyan (#66D9EF), темнее для контраста.
 */

[data-theme="light"] {

    /* ==========================================================
       BRAND — same hue, slightly toned down for light bg
       ========================================================== */
    --color-brand-primary:        var(--pal-primary-600);   /* slightly darker than dark-theme primary */
    --color-brand-primary-hover:  var(--pal-primary-500);
    --color-brand-primary-active: var(--pal-primary-700);
    --color-brand-primary-soft:   color-mix(in srgb, var(--pal-primary-500) 12%, transparent);
    --color-brand-primary-muted:  color-mix(in srgb, var(--pal-primary-500) 6%, transparent);
    --color-brand-primary-border: color-mix(in srgb, var(--pal-primary-500) 35%, transparent);

    --color-brand-electric:       var(--pal-electric-600);   /* darker blue for light bg */
    --color-brand-electric-hover: var(--pal-electric-500);
    --color-brand-electric-soft:  color-mix(in srgb, var(--pal-electric-500) 12%, transparent);
    --color-brand-electric-border:color-mix(in srgb, var(--pal-electric-500) 35%, transparent);

    --color-brand-electric-glow:  color-mix(in srgb, var(--pal-electric-500) 18%, transparent);

    /* ==========================================================
       SURFACES — warm off-white, layered
       ========================================================== */
    --color-bg-app:        var(--pal-light-50);
    --color-bg-canvas:     var(--pal-light-50);
    --color-bg-sidebar:    var(--pal-light-100);
    --color-bg-header:     var(--pal-light-100);
    --color-bg-surface:    #FFFFFF;
    --color-bg-surface-2:  var(--pal-light-100);
    --color-bg-surface-3:  var(--pal-light-200);
    --color-bg-elevated:   #FFFFFF;
    --color-bg-input:      #FFFFFF;
    --color-bg-hover:      var(--pal-light-200);
    --color-bg-selected:   color-mix(in srgb, var(--pal-primary-500) 10%, var(--pal-light-100));
    --color-bg-content-wrapper: var(--pal-light-50);
    --color-bg-entity-surface: var(--pal-light-50);
    --color-bg-entity-panel: var(--pal-light-100);
    --color-bg-entity-panel-hover: color-mix(in srgb, var(--color-bg-entity-panel) 92%, #000000);
    --color-border-entity-panel: var(--pal-light-300);
    --color-border-content-wrapper: var(--pal-light-200);
    --color-tab-active-bg: var(--pal-light-200);
    --color-tab-active-border: var(--pal-light-300);
    --color-tab-active-text: var(--pal-light-900);
    --color-tab-active-radius: 20px;
    --color-text-entity-sidebar-value: var(--pal-light-600);
    --color-surface-muted: rgba(0, 0, 0, 0.04);
    /* ==========================================================
       BORDERS
       ========================================================== */
    --color-border-subtle:  color-mix(in srgb, var(--pal-light-400) 30%, transparent);
    --color-border-default: #70707070;
    --color-border-strong:  var(--pal-light-400);
    --color-border-focus:   var(--color-brand-electric);

    /* ==========================================================
       TEXT
       ========================================================== */
    --color-text-primary:   var(--pal-light-900);
    --color-text:           var(--color-text-primary);
    --color-text-secondary: var(--pal-light-700);
    --color-text-tertiary:  var(--pal-light-600);
    --color-text-muted:     var(--pal-light-500);
    --color-text-inverse:   var(--pal-dark-100);

    --color-icon-primary:   var(--pal-light-800);
    --color-icon-secondary: var(--pal-light-600);
    --color-icon-muted:     var(--pal-light-500);

    /* ==========================================================
       ACCENT (functional → electric)
       ========================================================== */
    --color-accent:        var(--color-brand-electric);
    --color-accent-hover:  var(--color-brand-electric-hover);
    --color-accent-soft:        var(--color-brand-electric-soft);
    --color-accent-soft-bg:     var(--color-brand-electric-soft);
    --color-accent-soft-border: var(--color-brand-electric-border);
    --color-nav-hover-bg:       color-mix(in srgb, var(--color-text-primary) 5%, transparent);
    --color-nav-active-bg:      color-mix(in srgb, var(--color-text-primary) 9%, transparent);

    /* ==========================================================
       SEMANTIC
       ========================================================== */
    --color-success:        var(--pal-success-700);
    --color-success-soft:   color-mix(in srgb, var(--pal-success-500) 12%, transparent);
    --color-warning:        var(--pal-warning-700);
    --color-warning-soft:   color-mix(in srgb, var(--pal-warning-500) 18%, transparent);
    --color-danger:         var(--pal-danger-500);
    --color-danger-soft:    color-mix(in srgb, var(--pal-danger-500) 12%, transparent);
    --color-info:           var(--pal-info-500);
    --color-info-soft:      color-mix(in srgb, var(--pal-info-500) 12%, transparent);
    --color-draft:          var(--pal-purple-500);
    --color-draft-soft:     color-mix(in srgb, var(--pal-purple-500) 14%, transparent);
    --color-highlight-accent: var(--pal-pink-500);

    /* ==========================================================
       CRM-specific
       ========================================================== */
    --color-status-new:        var(--color-brand-electric);
    --color-status-pending:    var(--pal-warning-700);
    --color-status-confirmed:  var(--pal-electric-500);
    --color-status-progress:   var(--pal-primary-orange);
    --color-status-completed:  var(--pal-success-700);
    --color-status-cancelled:  var(--pal-light-500);
    --color-status-no-show:    var(--pal-light-400);
    --color-status-rescheduled:var(--pal-purple-500);

    --color-priority-low:      var(--pal-light-500);
    --color-priority-normal:   var(--color-brand-electric);
    --color-priority-high:     var(--pal-primary-orange);
    --color-priority-critical: var(--pal-danger-500);

    /* ==========================================================
       GRADIENTS — same direction, slightly toned for light bg
       ========================================================== */
    --gradient-brand-primary: linear-gradient(135deg, var(--pal-primary-500) 0%, var(--pal-primary-600) 50%, var(--pal-primary-700) 100%);
    --gradient-brand-hot:     linear-gradient(135deg, var(--pal-primary-700) 0%, var(--pal-primary-500) 100%);
    --gradient-brand-subtle:  linear-gradient(135deg, color-mix(in srgb, var(--pal-primary-500) 12%, transparent) 0%, color-mix(in srgb, var(--pal-primary-700) 6%, transparent) 100%);
    --gradient-electric:      linear-gradient(135deg, var(--pal-electric-700) 0%, var(--pal-electric-500) 50%, var(--pal-electric-400) 100%);
    --gradient-surface:       linear-gradient(180deg, #FFFFFF 0%, var(--pal-light-100) 100%);
    --gradient-card:          linear-gradient(180deg, #FFFFFF 0%, var(--pal-light-50) 100%);
    --gradient-chart-area:    linear-gradient(180deg, color-mix(in srgb, var(--pal-primary-500) 22%, transparent) 0%, color-mix(in srgb, var(--pal-primary-500) 0%, transparent) 100%);

    /* ==========================================================
       SHADOWS — softer for light theme
       ========================================================== */
    --shadow-xs:     0 1px 2px rgba(20, 18, 16, 0.06);
    --shadow-sm:     0 2px 4px rgba(20, 18, 16, 0.07), 0 1px 2px rgba(20, 18, 16, 0.04);
    --shadow-md:     0 4px 12px rgba(20, 18, 16, 0.10), 0 2px 4px rgba(20, 18, 16, 0.05);
    --shadow-lg:     0 12px 32px rgba(20, 18, 16, 0.12), 0 4px 8px rgba(20, 18, 16, 0.06);
    --shadow-xl:     0 24px 60px rgba(20, 18, 16, 0.15), 0 8px 16px rgba(20, 18, 16, 0.08);
    --shadow-card-hover: 0 8px 24px rgba(20, 18, 16, 0.10), 0 0 0 1px var(--color-brand-primary-border);
}



/* source: ./xacss/base.css */
:where(
    body,
    .admin-layout,
    .admin-layout div,
    .admin-layout span,
    .admin-layout a,
    .admin-layout p,
    .admin-layout strong,
    .admin-layout h1,
    .admin-layout h2,
    .admin-layout h3,
    .admin-layout h4,
    .admin-layout h5,
    .admin-layout h6,
    .admin-layout h7,
    .admin-layout table,
    .admin-layout thead,
    .admin-layout tbody,
    .admin-layout tfoot,
    .admin-layout tr,
    .admin-layout th,
    .admin-layout td,
    .admin-layout button,
    .admin-layout input,
    .admin-layout select,
    .admin-layout textarea,
    .admin-layout label,
    .admin-layout small
) {
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    text-shadow: 0 0 1px rgba(0, 0, 0, 0.1);
}

:where(*, *::before, *::after) {
    box-sizing: border-box;
}

:where(.admin-layout) {
    color: var(--color-text-primary);
    background: var(--color-bg-app);
    font-family: var(--font-sans);
}

:where(.admin-layout img, .admin-layout svg, .admin-layout video, .admin-layout canvas) {
    max-width: 100%;
}

:where(.admin-layout button, .admin-layout input, .admin-layout select, .admin-layout textarea) {
    font: inherit;
}

:where(.admin-layout a) {
    color: inherit;
}

:where(.admin-layout code, .admin-layout pre) {
    font-family: var(--font-mono);
}


/* source: ./xacss/utilities.css */
:where(.u-flex, .d-flex) { display: flex; }
:where(.u-inline-flex) { display: inline-flex; }
:where(.u-flex-col, .flex-col) { display: flex; flex-direction: column; gap: var(--space-2); }
:where(.u-items-center, .items-center) { align-items: center; }
:where(.u-justify-between, .justify-between) { justify-content: space-between; }
:where(.u-flex-1, .flex-1) { flex: 1; min-width: 0; }
:where(.u-flex-wrap, .flex-wrap) { flex-wrap: wrap; }

:where(.u-gap-1, .gap-1) { gap: var(--space-1); }
:where(.u-gap-2, .gap-2) { gap: var(--space-2); }
:where(.u-gap-3, .gap-3) { gap: var(--space-4); }

:where(.u-text-left) { text-align: left; }
:where(.u-text-center, .text-center) { text-align: center; }
:where(.u-text-right, .text-right) { text-align: right; }
:where(.u-text-muted, .text-muted) { color: var(--color-text-muted); }
:where(.u-text-secondary, .text-secondary) { color: var(--color-text-secondary); }
:where(.u-text-xs, .text-xs) { font-size: 0.75rem; }
:where(.u-text-sm, .text-sm) { font-size: 0.8125rem; }
:where(.u-fw-600, .fw-600) { font-weight: 600; }

:where(.u-w-full, .w-full) { width: 100%; }
:where(.u-mb-sm, .mb-sm) { margin-bottom: var(--space-2); }
:where(.u-mb-md, .mb-md) { margin-bottom: var(--space-4); }
:where(.u-mb-lg, .mb-lg) { margin-bottom: var(--space-6); }
:where(.u-mt-sm, .mt-sm) { margin-top: var(--space-2); }
:where(.u-mt-md, .mt-md) { margin-top: var(--space-4); }
:where(.u-mt-lg, .mt-lg) { margin-top: var(--space-6); }

:where(.u-truncate, .truncate) {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

:where(.u-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;
}

/* ——— Wave A (2026-04-24): stacks, grids, spacing, text, containers ——— */

/* Stacks — horizontal/vertical flex with token gaps */
:where(.x-hstack) { display: flex; align-items: center; }
:where(.x-hstack-start) { display: flex; align-items: flex-start; }
:where(.x-hstack-between) { display: flex; align-items: center; justify-content: space-between; }
:where(.x-hstack-wrap) { display: flex; align-items: center; flex-wrap: wrap; }
:where(.x-vstack) { display: flex; flex-direction: column; }
:where(.x-vstack-start) { display: flex; flex-direction: column; align-items: flex-start; }

:where(.x-gap-xs) { gap: var(--space-1); }
:where(.x-gap-sm) { gap: var(--space-2); }
:where(.x-gap-md) { gap: var(--space-4); }
:where(.x-gap-lg) { gap: var(--space-6); }
:where(.x-gap-xl) { gap: var(--space-8); }

/* Grids — auto-fill + fixed columns */
:where(.x-grid-2) { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); }
:where(.x-grid-3) { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4); }
:where(.x-grid-4) { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-4); }
:where(.x-grid-auto) { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--space-4); }
:where(.x-grid-auto-lg) { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: var(--space-4); }

/* Spacing — margin/padding utilities in token steps */
:where(.mb-xs) { margin-bottom: var(--space-1); }
:where(.mb-xl) { margin-bottom: var(--space-8); }
:where(.mt-xs) { margin-top: var(--space-1); }
:where(.mt-xl) { margin-top: var(--space-8); }
:where(.ml-xs) { margin-left: var(--space-1); }
:where(.ml-sm) { margin-left: var(--space-2); }
:where(.ml-md) { margin-left: var(--space-4); }
:where(.ml-auto) { margin-left: auto; }
:where(.mr-xs) { margin-right: var(--space-1); }
:where(.mr-sm) { margin-right: var(--space-2); }
:where(.mr-md) { margin-right: var(--space-4); }
:where(.mr-auto) { margin-right: auto; }

:where(.p-xs) { padding: var(--space-1); }
:where(.p-sm) { padding: var(--space-2); }
:where(.p-md) { padding: var(--space-4); }
:where(.p-lg) { padding: var(--space-6); }
:where(.p-xl) { padding: var(--space-8); }
:where(.px-sm) { padding-left: var(--space-2); padding-right: var(--space-2); }
:where(.px-md) { padding-left: var(--space-4); padding-right: var(--space-4); }
:where(.px-lg) { padding-left: var(--space-6); padding-right: var(--space-6); }
:where(.py-sm) { padding-top: var(--space-2); padding-bottom: var(--space-2); }
:where(.py-md) { padding-top: var(--space-4); padding-bottom: var(--space-4); }
:where(.py-lg) { padding-top: var(--space-6); padding-bottom: var(--space-6); }

@media (max-width: 768px) {
    :where(.x-grid-2, .x-grid-3, .x-grid-4) {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* Text — colors and weights via canonical tokens */
:where(.x-text-danger) { color: var(--color-danger); }
:where(.x-text-success) { color: var(--color-success); }
:where(.x-text-warning) { color: var(--color-warning); }
:where(.x-text-accent) { color: var(--color-accent); }
:where(.x-text-semibold) { font-weight: 600; }
:where(.x-text-strong) { font-weight: 700; }

/* Containers — centered max-width wrappers for forms / settings */
:where(.x-container-sm) { max-width: 520px; margin-left: auto; margin-right: auto; }
:where(.x-container-md) { max-width: 720px; margin-left: auto; margin-right: auto; }
:where(.x-container-lg) { max-width: 960px; margin-left: auto; margin-right: auto; }

/* States */
:where(.is-clickable) { cursor: pointer; }
:where(.is-disabled) { opacity: 0.5; pointer-events: none; }

/* Visibility helpers */
:where(.u-hidden) { display: none; }
:where(.u-invisible) { visibility: hidden; }

/* Zero margin reset */
:where(.u-m-0) { margin: 0; }

/* Additional typography / transforms */
:where(.u-text-lg) { font-size: 1.125rem; }
:where(.u-text-xl) { font-size: 1.25rem; }
:where(.u-text-2xl) { font-size: 1.5rem; }
:where(.u-capitalize) { text-transform: capitalize; }
:where(.u-uppercase) { text-transform: uppercase; }
:where(.u-whitespace-pre) { white-space: pre-line; }
:where(.u-mono) { font-family: var(--font-mono); }

/* Fixed widths (common snap sizes) */
:where(.u-w-40) { width: 40px; }
:where(.u-w-50) { width: 50px; }
:where(.u-w-60) { width: 60px; }
:where(.u-w-80) { width: 80px; }
:where(.u-w-100) { width: 100px; }
:where(.u-w-120) { width: 120px; }
:where(.u-w-140) { width: 140px; }
:where(.u-w-200) { width: 200px; }
:where(.u-mw-200) { max-width: 200px; }
:where(.u-mw-300) { max-width: 300px; }
:where(.u-mw-400) { max-width: 400px; }

/* Position helpers */
:where(.u-relative) { position: relative; }
:where(.u-absolute) { position: absolute; }

/* Overflow / scroll */
:where(.u-overflow-auto) { overflow: auto; }
:where(.u-overflow-hidden) { overflow: hidden; }
:where(.u-h-full) { height: 100%; }

/* Common combos */
:where(.u-justify-end) { justify-content: flex-end; }
:where(.u-justify-center) { justify-content: center; }
:where(.u-align-start) { align-items: flex-start; }
:where(.u-align-end) { align-items: flex-end; }

/* Code-dump panel (pre with mono font + opacity) */
:where(.u-code-dump) {
  font-family: var(--font-mono); font-size: 11px; opacity: 0.5;
  overflow: auto; max-height: 400px;
}
:where(.u-code-dump-sm) {
  font-family: var(--font-mono); font-size: 11px; opacity: 0.5;
  overflow: auto;
}

/* Object-fit image */
:where(.u-img-cover) { width: 100%; height: 100%; object-fit: cover; }

/* Separators / dividers */
:where(.u-vdivider) {
  width: 1px; height: 16px;
  background: var(--color-border-default);
  margin: 0 var(--space-1);
}

/* Block display */
:where(.u-block) { display: block; }
:where(.u-inline-block) { display: inline-block; }

/* Opacity */
:where(.u-opacity-50) { opacity: 0.5; }
:where(.u-opacity-70) { opacity: 0.7; }

/* Min-width snap sizes */
:where(.u-min-w-120) { min-width: 120px; }
:where(.u-min-w-140) { min-width: 140px; }
:where(.u-min-w-160) { min-width: 160px; }
:where(.u-min-w-180) { min-width: 180px; }
:where(.u-min-w-200) { min-width: 200px; }

/* Zero-padding / symmetric paddings */
:where(.u-p-0) { padding: 0; }
:where(.u-pl-sm) { padding-left: var(--space-2); }
:where(.u-pl-md) { padding-left: var(--space-4); }
:where(.u-py-tight) { padding-top: 2px; padding-bottom: 2px; }
:where(.u-my-sm) { margin-top: var(--space-2); margin-bottom: var(--space-2); }
:where(.u-my-md) { margin-top: var(--space-4); margin-bottom: var(--space-4); }
:where(.u-pb-md) { padding-bottom: var(--space-4); }
:where(.u-pb-sm) { padding-bottom: var(--space-2); }

/* Border helpers */
:where(.u-border-bottom) { border-bottom: 1px solid var(--color-border-default); }
:where(.u-border-top) { border-top: 1px solid var(--color-border-default); }

/* Tabs row — flex with bottom border */
:where(.u-tabs-row) {
  display: flex;
  gap: var(--space-1);
  border-bottom: 1px solid var(--color-border-default);
  margin-bottom: var(--space-4);
  overflow-x: auto;
}

:where(.dt-tab-btn) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  padding: 7px 12px;
  border: 1px solid transparent;
  border-bottom: 0;
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
  background: transparent;
  color: var(--color-text-secondary);
  font-size: 13px;
  font-weight: 500;
  line-height: 1.2;
  white-space: nowrap;
  cursor: pointer;
  transition:
    background var(--motion-base) var(--ease-standard),
    border-color var(--motion-base) var(--ease-standard),
    color var(--motion-base) var(--ease-standard);
}

:where(.dt-tab-btn:hover) {
  background: var(--color-bg-surface-2);
  color: var(--color-text-primary);
}

:where(.dt-tab-btn.is-active) {
  border-color: var(--color-border-default);
  background: var(--color-bg-surface);
  color: var(--color-text-primary);
}

:where(.dt-tab-btn:focus-visible) {
  outline: 2px solid var(--color-border-focus);
  outline-offset: 2px;
}

/* Float helpers (edge case) */
:where(.u-float-right) { float: right; }
:where(.u-float-left) { float: left; }

/* Extra widths */
:where(.u-w-22) { width: 22px; }
:where(.u-w-28) { width: 28px; }
:where(.u-w-30) { width: 30px; }
:where(.u-w-32) { width: 32px; }
:where(.u-w-70) { width: 70px; }
:where(.u-w-85) { width: 85px; }
:where(.u-w-130) { width: 130px; }
:where(.u-w-180) { width: 180px; }
:where(.u-w-280) { width: 280px; }

/* Specialized grids */
:where(.u-grid-1-80) { grid-template-columns: 1fr 80px; }
:where(.u-grid-show-layout) {
  display: grid; grid-template-columns: 1fr 320px;
  gap: var(--space-6); align-items: start;
}

/* Strong (2px) borders */
:where(.u-border-top-strong) { border-top: 2px solid var(--color-border-default); }

/* Padding-top */
:where(.u-pt-sm) { padding-top: var(--space-2); }
:where(.u-pt-md) { padding-top: var(--space-4); }
:where(.u-pt-lg) { padding-top: var(--space-6); }

/* Line height */
:where(.u-line-tall) { line-height: 1.8; }

/* Section-label — small uppercase muted (used in dashboard customize panel) */
:where(.u-section-label) {
  font-size: 0.75rem;
  text-transform: uppercase;
  margin-bottom: var(--space-2);
}
:where(.u-section-label-tight) {
  font-size: 0.75rem;
  text-transform: uppercase;
  margin-bottom: var(--space-1);
}

/* Page-header — h-stack between with wrap + bottom-margin (top-of-page composite). */
:where(.u-page-header-row) {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
}

/* Pre-wrapped text span (post-preview, log dumps). */
:where(.u-whitespace-prewrap) { white-space: pre-wrap; }

/* Compact color-input style — 64px wide, low padding. */
:where(.u-color-input-sm) { width: 4rem; padding: 0.25rem; }

/* Inline checkbox margin-right (label nudge). */
:where(.u-mr-half) { margin-right: 0.5rem; }

/* Self-align start (button inside flex column). */
:where(.u-self-start) { align-self: flex-start; }

/* Text-transform: capitalize (для заголовков error-блоков и т.п.). */
:where(.u-text-capitalize) { text-transform: capitalize; }

/* Margin-bottom 4px (1× --space-1) — узкий gap у label. */
:where(.u-mb-1) { margin-bottom: var(--space-1); }

/* 1:2 grid (input + textarea, или label + value). */
:where(.x-grid-1-2) {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: var(--space-2);
}


/* source: ./xacss/components/button.css */
/*
 * Button system — 4 canonical variants:
 *   .btn          — default (electric-soft)
 *   .btn-primary  — brand-primary filled (red-orange) — main CTA
 *   .btn-secondary — neutral surface
 *   .btn-ghost    — transparent, hover surface
 *   .btn-danger   — danger filled
 *
 * Modifiers: .btn-sm, .btn-icon, .btn-block, .is-loading
 */

:where(.c-btn, .btn, .btn-primary, .btn-secondary, .btn-ghost, .btn-danger) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-1);
    min-height: 36px;
    padding: var(--space-2) var(--space-4);
    background: var(--color-brand-electric-soft);
    color: var(--color-brand-electric);
    border: 1px solid var(--color-brand-electric-border);
    border-radius: var(--radius-md);
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;

}

:where(.c-btn:hover, .btn:hover, .btn-primary:hover, .btn-secondary:hover, .btn-ghost:hover, .btn-danger:hover) {
    background: color-mix(in srgb, var(--color-brand-electric) 22%, transparent);
    border-color: color-mix(in srgb, var(--color-brand-electric) 45%, transparent);
}

:where(.c-btn:focus-visible, .btn:focus-visible, .btn-primary:focus-visible, .btn-secondary:focus-visible, .btn-ghost:focus-visible, .btn-danger:focus-visible, .btn-icon:focus-visible) {
    outline: 2px solid var(--color-border-focus);
    outline-offset: 2px;
}

:where(.c-btn:active, .btn:active, .btn-primary:active, .btn-secondary:active, .btn-ghost:active, .btn-danger:active) {
    transform: translateY(0.5px);
}

:where(.c-btn[disabled], .btn[disabled], .btn-primary[disabled], .btn-secondary[disabled], .btn-ghost[disabled], .btn-danger[disabled]) {
    cursor: not-allowed;
    opacity: 0.55;
    transform: none;
}

:where(.c-btn--sm, .btn-sm) {
    min-height: 30px;
    padding: 5px 12px;
    font-size: 12px;
    border-radius: var(--radius-sm);
}

:where(.c-btn--icon, .btn-icon) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-1);
    min-height: 32px;
    min-width: 32px;
    padding: var(--space-1);
    color: var(--color-text-secondary);
    background: transparent;
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    cursor: pointer;
    text-decoration: none;

}

:where(.c-btn--icon:hover, .btn-icon:hover) {
    color: var(--color-text-primary);
    background: var(--color-bg-hover);
    border-color: var(--color-border-subtle);
}

/* PRIMARY — brand red-orange filled, the only "loud" button */
:where(.c-btn--primary, .btn-primary) {
    color: var(--color-text-inverse);
    background: var(--color-brand-primary);
    border-color: var(--color-brand-primary);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.18), inset 0 1px 0 color-mix(in srgb, var(--color-text-primary) 8%, transparent);
}

:where(.c-btn--primary:hover, .btn-primary:hover) {
    background: var(--color-brand-primary-hover);
    border-color: var(--color-brand-primary-hover);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.18), inset 0 1px 0 color-mix(in srgb, var(--color-text-primary) 10%, transparent);
}

:where(.c-btn--primary:active, .btn-primary:active) {
    background: var(--color-brand-primary-active);
    border-color: var(--color-brand-primary-active);
}

:where(.c-btn--primary:focus-visible, .btn-primary:focus-visible) {
    outline: 2px solid var(--color-brand-primary-border);
    outline-offset: 2px;
}

/* SECONDARY — neutral surface */
:where(.c-btn--secondary, .btn-secondary) {
    color: var(--color-text-primary);
    background: var(--color-bg-surface-3);
    border-color: var(--color-border-default);
}

:where(.c-btn--secondary:hover, .btn-secondary:hover) {
    background: var(--color-bg-hover);
    border-color: var(--color-border-strong);
}

/* GHOST — transparent, surface on hover */
:where(.c-btn--ghost, .btn-ghost) {
    color: var(--color-text-secondary);
    background: transparent;
    border-color: transparent;
}

:where(.c-btn--ghost:hover, .btn-ghost:hover) {
    color: var(--color-text-primary);
    background: var(--color-bg-hover);
    border-color: var(--color-border-subtle);
}

:where(.c-btn--ghost.is-active, .btn-ghost.is-active) {
    color: var(--color-brand-primary);
    background: var(--color-brand-primary-soft);
    border-color: var(--color-brand-primary-border);
}

/* DANGER — distinct red, not brand orange */
:where(.c-btn--danger, .btn-danger) {
    color: var(--color-danger);
    background: var(--color-danger-soft);
    border-color: color-mix(in srgb, var(--color-danger) 30%, transparent);
}

:where(.c-btn--danger:hover, .btn-danger:hover) {
    background: color-mix(in srgb, var(--color-danger) 22%, transparent);
    border-color: color-mix(in srgb, var(--color-danger) 50%, transparent);
}

:where(.c-btn--block, .btn-block) {
    width: 100%;
}

:where(.c-btn.is-loading, .btn.is-loading) {
    opacity: 0.7;
    pointer-events: none;
}


/* source: ./xacss/components/card.css */
:where(.c-card, .card) {
    background: var(--color-bg-surface-2);
    border: 1px solid var(--color-border-default);
    border-radius: var(--radius-lg);
    overflow: hidden;
}

:where(.c-card__header, .card-header) {
    padding: var(--space-4) var(--space-6);
    border-bottom: 1px solid var(--color-border-default);
}

:where(.c-card__title, .card-title) {
    font-size: 16px;
    font-weight: 600;
    color: var(--color-text-primary);
    margin: 0;
}

:where(.c-card__actions, .card-actions) {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--space-2);
}

:where(.c-card__body, .card-body) {
    padding: var(--space-6);
}

:where(.c-card__body--flush, .card-body--flush) {
    padding: 0;
}

:where(.c-card--sidebar, .card.sidebar-panel) {
    display: flex;
    flex-direction: column;
}


/* source: ./xacss/components/content-section.css */
.c-content-section {
    background: var(--color-bg-surface-2);
    border: 1px solid var(--color-border-default);
    border-radius: var(--radius-lg);
    overflow: hidden;
}

.c-content-section__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-4);
    padding: var(--space-4) var(--space-6);
    border-bottom: 1px solid var(--color-border-default);
}

.c-content-section__title-wrap {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    min-width: 0;
}

.c-content-section__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    flex: 0 0 auto;
    border-radius: var(--radius-md);
    background: var(--color-bg-surface);
    color: var(--color-text-muted);
}

.c-content-section__title {
    margin: 0;
    color: var(--color-text-primary);
    font-size: 16px;
    font-weight: 600;
    line-height: 1.35;
}

.c-content-section__description {
    margin-top: var(--space-1);
    color: var(--color-text-muted);
    font-size: 13px;
    line-height: 1.45;
}

.c-content-section__action {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--space-2);
    flex: 0 0 auto;
}

.c-content-section__body {
    padding: var(--space-6);
}

.c-content-section__body--flush {
    padding: 0;
}

@media (max-width: 640px) {
    .c-content-section__head {
        flex-direction: column;
        align-items: stretch;
    }

    .c-content-section__action {
        justify-content: flex-start;
        flex-wrap: wrap;
    }
}


/* source: ./xacss/components/dashboard-widgets.css */
.widget-grid {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    grid-auto-rows: 10rem;
    gap: var(--space-4);
}

.widget-grid-cell,
.sortable-widget-wrapper {
    min-width: 0;
    min-height: 0;
}

.widget-card {
    min-width: 0;
    height: 100%;
}

.widget-card .card-body {
    min-width: 0;
}

@media (max-width: 1180px) {
    .widget-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 720px) {
    .widget-grid {
        grid-template-columns: 1fr;
        grid-auto-rows: auto;
    }

    .widget-grid-cell,
    .sortable-widget-wrapper {
        grid-column: 1 / -1 !important;
        grid-row: auto !important;
    }

    .widget-card {
        min-height: 9rem;
    }
}


/* source: ./xacss/components/badge.css */
/*
 * Badge — soft-bg semantic chips.
 *
 * Variants (used via React `<Badge variant="...">`):
 *   default, new, active, inactive, in_progress, completed
 *   success, warning, danger, info, draft
 *
 * Brand red-orange is reserved for `new` (primary status) — matches CTA palette.
 * Electric blue for `info`.
 */

:where(.c-badge, .badge) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 20px;
    padding: 0 9px;
    border-radius: var(--radius-round);
    font-size: 11px;
    font-weight: 500;
    line-height: 1;
    white-space: nowrap;
    letter-spacing: 0.01em;

    background: var(--color-bg-surface-3);
    color: var(--color-text-secondary);
    border: 1px solid var(--color-border-subtle);

}

/* Default = neutral chip */
:where(.c-badge--default, .badge-default) {
    background: var(--color-bg-surface-3);
    color: var(--color-text-secondary);
    border-color: var(--color-border-subtle);
}

/* NEW — brand red-orange (primary "fresh" status) */
:where(.badge-new) {
    background: var(--color-brand-primary-soft);
    color: var(--color-brand-primary);
    border-color: var(--color-brand-primary-border);
}

/* ACTIVE / SUCCESS / COMPLETED — green */
:where(.badge-active, .badge-success, .badge-completed, .c-badge--success) {
    background: var(--color-success-soft);
    color: var(--color-success);
    border-color: color-mix(in srgb, var(--color-success) 28%, transparent);
}

/* INACTIVE / DEFAULT-MUTED */
:where(.badge-inactive) {
    background: var(--color-bg-surface-3);
    color: var(--color-text-tertiary);
    border-color: var(--color-border-subtle);
}

/* IN-PROGRESS / WARM — orange (sibling to brand) */
:where(.badge-in_progress, .badge-progress) {
    background: color-mix(in srgb, var(--pal-primary-orange) 16%, transparent);
    color: var(--pal-primary-orange);
    border-color: color-mix(in srgb, var(--pal-primary-orange) 32%, transparent);
}

/* WARNING — yellow, distinct from progress */
:where(.c-badge--warning, .badge-warning) {
    background: var(--color-warning-soft);
    color: var(--color-warning);
    border-color: color-mix(in srgb, var(--color-warning) 30%, transparent);
}

/* DANGER */
:where(.c-badge--danger, .badge-danger) {
    background: var(--color-danger-soft);
    color: var(--color-danger);
    border-color: color-mix(in srgb, var(--color-danger) 30%, transparent);
}

/* INFO — electric blue (functional accent) */
:where(.c-badge--info, .badge-info) {
    background: var(--color-brand-electric-soft);
    color: var(--color-brand-electric);
    border-color: var(--color-brand-electric-border);
}

/* DRAFT — purple */
:where(.badge-draft) {
    background: var(--color-draft-soft);
    color: var(--color-draft);
    border-color: color-mix(in srgb, var(--color-draft) 30%, transparent);
}

/* Sizes */
:where(.c-badge--sm, .badge-sm) {
    min-width: 14px;
    height: 16px;
    padding: 0 6px;
    font-size: 10px;
}

:where(.badge-lg) {
    height: 24px;
    padding: 0 12px;
    font-size: 12px;
}


/* source: ./xacss/components/forms.css */
:where(.c-field, .form-group) {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

:where(.c-field__label, .form-label) {
    font-size: 13px;
    font-weight: 500;
    color: var(--color-text-secondary);
}

:where(.c-input, .c-select, .c-textarea, .form-control, .form-input, .ps-form-input) {
    width: 100%;
    padding: var(--space-2) var(--space-4);
    background: var(--color-bg-input);
    border: 1px solid var(--color-border-default);
    border-radius: var(--radius-md);
    color: var(--color-text-primary);
    font-size: 14px;
    font-family: inherit;
    outline: none;

}

:where(.c-input:hover, .c-select:hover, .c-textarea:hover, .form-control:hover, .form-input:hover, .ps-form-input:hover) {
    border-color: var(--color-border-strong);
}

:where(.c-input:focus, .c-select:focus, .c-textarea:focus, .form-control:focus, .form-input:focus, .ps-form-input:focus) {
    border-color: var(--color-border-focus);
    box-shadow: 0 0 0 3px var(--color-brand-electric-soft);
}

:where(.c-input::placeholder, .c-textarea::placeholder, .form-control::placeholder, .form-input::placeholder, .ps-form-input::placeholder) {
    color: var(--color-text-muted);
}

:where(.c-input[disabled], .c-select[disabled], .c-textarea[disabled], .form-control[disabled], .form-control.form-readonly) {
    opacity: 0.6;
    cursor: not-allowed;
}

:where(select.c-select, select.form-control) {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23a0a0a0' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    padding-right: 36px;
}

:where(.c-input--sm, .form-control-sm) {
    min-height: 32px;
    padding-top: 6px;
    padding-bottom: 6px;
    font-size: 13px;
    border-radius: var(--radius-sm);
}

:where(.c-input--mono, .form-control-mono) {
    font-family: var(--font-mono);
    font-size: 0.85rem;
}

:where(.c-field__help, .form-help) {
    font-size: 12px;
    color: var(--color-text-muted);
}

:where(.c-form-actions, .form-actions) {
    margin-top: var(--space-6);
    display: flex;
    justify-content: flex-end;
    gap: var(--space-2);
}

:where(.c-form-section__body) {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    padding: var(--space-4);
}

:where(.c-form-section__body--compact) {
    gap: var(--space-3);
    padding: var(--space-3);
}

:where(.c-form-field) {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

:where(.c-form-field__label) {
    color: var(--color-text-secondary);
    font-size: 13px;
    font-weight: 600;
}

:where(.c-form-field__required) {
    margin-left: 4px;
    color: var(--color-danger);
}

:where(.c-form-field__hint) {
    color: var(--color-text-muted);
    font-size: 12px;
}

:where(.c-form-field__error) {
    color: var(--color-danger);
    font-size: 12px;
}

:where(.c-form-field.has-error .c-input, .c-form-field.has-error .c-select, .c-form-field.has-error .c-textarea) {
    border-color: var(--color-danger);
}

:where(.c-form-actionbar) {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    flex-wrap: wrap;
}

:where(.c-form-actionbar__actions) {
    margin-left: auto;
}

:where(.c-form-actionbar__meta, .c-form-actionbar__after) {
    color: var(--color-text-muted);
    font-size: 13px;
}

:where(.c-form-actionbar--sticky) {
    position: sticky;
    bottom: 0;
    z-index: 5;
    padding: var(--space-3) 0;
    background: var(--color-bg-app);
}

:where(.c-form-grid, .form-grid) {
    display: grid;
    gap: var(--space-4);
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}

:where(.c-form-grid--narrow, .form-group-narrow) {
    max-width: 400px;
}

:where(.c-form-card--narrow) {
    max-width: 600px;
    margin-inline: auto;
}

:where(.c-lookup) {
    display: flex;
    flex-direction: column;
}

:where(.c-lookup-selection) {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    padding: var(--space-2) var(--space-4);
    border: 1px solid var(--color-border-default);
    border-radius: var(--radius-md);
    background: var(--color-bg-input);
}

:where(.c-lookup-selection__label) {
    min-width: 0;
    color: var(--color-text-primary);
}

:where(.c-lookup-status, .c-lookup-empty) {
    margin-top: var(--space-2);
    color: var(--color-text-muted);
    font-size: 13px;
}

:where(.c-lookup-results) {
    margin-top: var(--space-2);
    max-height: 200px;
    overflow-y: auto;
    border: 1px solid var(--color-border-default);
    border-radius: var(--radius-md);
    background: var(--color-bg-surface);
}

:where(.c-lookup-result) {
    display: block;
    width: 100%;
    padding: var(--space-2) var(--space-4);
    border: 0;
    border-bottom: 1px solid var(--color-border-subtle);
    background: transparent;
    color: var(--color-text-primary);
    text-align: left;
    cursor: pointer;

}

:where(.c-lookup-result:last-child) {
    border-bottom: 0;
}

:where(.c-lookup-result:hover, .c-lookup-result:focus-visible) {
    background: var(--color-bg-hover);
    outline: none;
}

:where(.c-lookup-result__title) {
    font-weight: 500;
}

:where(.c-lookup-result__meta) {
    color: var(--color-text-muted);
    font-size: 12px;
}


/* source: ./xacss/components/modal.css */
:where(.c-modal-overlay, .modal-overlay) {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 9000;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.5);
}

:where(.c-modal-overlay.is-open, .c-modal-overlay.is-closing, .modal-overlay.is-open, .modal-overlay.is-closing) {
    display: flex;
}

:where(.c-modal, .modal) {
    width: 100%;
    max-width: 480px;
    max-height: 90vh;
    overflow: auto;
    background: var(--color-bg-surface-2);
    border: 1px solid var(--color-border-default);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
}

:where(.c-modal--sm, .modal-sm) { max-width: 400px; }
:where(.c-modal--lg, .modal-lg) { max-width: 700px; }

:where(.c-modal__header, .modal-header) {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
    padding: var(--space-4) var(--space-6);
    border-bottom: 1px solid var(--color-border-default);
}

:where(.c-modal__title, .modal-header h3) {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    color: var(--color-text-primary);
}

:where(.c-modal__close, .modal-close) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: var(--space-1);
    border: none;
    border-radius: var(--radius-sm);
    background: none;
    color: var(--color-text-muted);
    cursor: pointer;

}

:where(.c-modal__close:hover, .modal-close:hover) {
    background: var(--color-bg-surface);
    color: var(--color-text-primary);
}

:where(.c-modal__body, .modal-body) {
    padding: var(--space-6);
}

:where(.c-modal__body--scroll, .modal-body-scroll, .modal-scroll-area) {
    overflow-y: auto;
    max-height: calc(90vh - 60px);
}

:where(.c-modal__footer, .modal-footer) {
    display: flex;
    justify-content: flex-end;
    gap: var(--space-2);
    padding: var(--space-4) var(--space-6);
    border-top: 1px solid var(--color-border-default);
}


/* ── .modal-* from admin-layout.css (optional-decomp, 2026-04-23) ── */

.modal-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.5);
  z-index: 9000;
  align-items: center;
  justify-content: center;
}
.modal-overlay.is-open,
.modal-overlay.is-closing {
  display: flex;
}
.modal-overlay.is-closing {
  background: transparent;
}
.modal-sm { max-width: 400px; }
.modal-lg { max-width: 700px; }
.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-4) var(--space-6);
  border-bottom: 1px solid var(--color-border-default);
}
.modal-header h3 {
  font-size: 16px;
  font-weight: 600;
}
.modal-close {
  font-size: 20px;
  line-height: 1;
  padding: var(--space-1);
  background: none;
  border: none;
  cursor: pointer;
  color: var(--color-text-muted);
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;

}
.modal-close:hover {
  background: var(--color-bg-surface);
  color: var(--color-text-primary);
}
.modal-body {
  padding: var(--space-6);
}
.modal-body-scroll {
  max-height: calc(90vh - 60px);
  overflow-y: auto;
}
.modal-body .form-group {
  margin-bottom: var(--space-4);
}
.modal-body .form-actions {
  margin-top: var(--space-6);
  display: flex;
  justify-content: flex-end;
  gap: var(--space-2);
}
.modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-2);
  padding: var(--space-4) var(--space-6);
  border-top: 1px solid var(--color-border-default);
}
.modal-footer.qp-footer {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-2);
  padding: var(--space-4) var(--space-6);
  border-top: 1px solid var(--color-border-default);
}
.modal-scroll-area {
  max-height: 400px;
  overflow-y: auto;
  scrollbar-width: thin;
}


/* source: ./xacss/components/detail.css */
:where(.c-detail-list, .detail-fields-v2) {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

:where(.c-detail-item, .detail-field-item) {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
}

:where(.c-detail-label, .detail-field-label) {
    font-size: 0.75rem;
    line-height: 1.2;
    color: var(--color-text-muted);
}

:where(.c-detail-value, .detail-field-value) {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-1);
    font-size: 0.875rem;
    line-height: 1.4;
    color: var(--color-text-primary);
}

:where(.c-detail-value a, .detail-field-value a) {
    color: var(--color-brand-electric);
    text-decoration: none;
}

:where(.c-detail-value a:hover, .detail-field-value a:hover) {
    text-decoration: underline;
}

:where(.c-detail-sub, .detail-field-sub) {
    display: block;
    font-size: 0.75rem;
    color: var(--color-text-muted);
}

:where(.c-detail-empty, .detail-field-empty) {
    font-size: 0.8125rem;
    color: var(--color-text-muted);
}


/* source: ./xacss/components/empty-state.css */
:where(.c-empty, .empty-state) {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: var(--space-6);
    min-height: 180px;
    text-align: center;
    color: var(--color-text-secondary);
}

.empty-state-sm {
    min-height: 100px;
    padding: var(--space-4, 12px);
    gap: var(--space-1, 6px);
}

:where(.c-empty__title, .empty-state-title) {
    font-size: 1rem;
    font-weight: 600;
    margin: 0;
    color: var(--color-text-primary);
}

:where(.c-empty__text, .empty-state-text, .empty-state-desc) {
    max-width: 32rem;
    margin: 0;
    font-size: 0.875rem;
    line-height: 1.5;
    color: var(--color-text-secondary);
}

.empty-state p { margin: 0; }
.empty-state-sm .empty-state-title { font-size: 0.9rem; }
.empty-state-sm .empty-state-desc { font-size: 0.8rem; }


/* source: ./xacss/components/flash.css */
:where(.c-flash, .flash-message) {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-4);
    margin: var(--space-4) var(--space-4) 0;
    border-radius: var(--radius-md);
    font-size: 0.875rem;
}

:where(.c-flash .icon, .flash-message .icon) {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

:where(.c-flash span, .flash-message span) {
    flex: 1;
}

:where(.c-flash__close, .flash-close) {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 1.25rem;
    line-height: 1;
    padding: 0 4px;
    opacity: 0.6;
}

:where(.c-flash__close:hover, .flash-close:hover) {
    opacity: 1;
}

:where(.c-flash--success, .flash-success) {
    background: color-mix(in srgb, var(--color-success) 15%, transparent);
    color: var(--color-success);
    border: 1px solid color-mix(in srgb, var(--color-success) 30%, transparent);
}

:where(.c-flash--error, .flash-error) {
    background: color-mix(in srgb, var(--color-danger) 15%, transparent);
    color: var(--color-danger);
    border: 1px solid color-mix(in srgb, var(--color-danger) 30%, transparent);
}

:where(.c-flash--warning, .flash-warning) {
    background: color-mix(in srgb, var(--color-warning) 15%, transparent);
    color: var(--color-warning);
    border: 1px solid color-mix(in srgb, var(--color-warning) 30%, transparent);
}


/* source: ./xacss/components/workspace-controls.css */
.c-workspace-list-head {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    padding: var(--space-4);
    border-bottom: 1px solid var(--color-border-default);
}

.c-workspace-list-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
}

.c-workspace-list-heading h1 {
    margin: 0;
    color: var(--color-text-primary);
    font-size: 16px;
    font-weight: 650;
    line-height: 1.35;
    letter-spacing: 0;
}

.c-workspace-list-heading > div > span {
    display: block;
    margin-top: 2px;
    color: var(--color-text-secondary);
    font-size: 12px;
}

.c-workspace-list-head > .dt-search-btn.is-field {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    width: 100%;
    height: 32px;
    padding: 0 9px;
    overflow: hidden;
    color: var(--color-text-secondary);
    background: var(--color-bg-surface);
    border: 1px solid var(--color-border-default);
    border-radius: var(--radius-sm);
    font: inherit;
    font-size: 12px;
    text-align: left;
    cursor: pointer;
}

.c-workspace-list-head > .dt-search-btn.is-field:hover,
.c-workspace-list-head > .dt-search-btn.is-field.is-active {
    color: var(--color-text-primary);
    border-color: var(--color-border-strong);
}

.c-workspace-list-head > .dt-search-btn.is-field span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.c-workspace-segmented {
    display: grid;
    grid-auto-columns: minmax(0, 1fr);
    grid-auto-flow: column;
    gap: 2px;
    padding: 2px;
    background: var(--color-bg-surface-3);
    border-radius: var(--radius-sm);
}

.c-workspace-segmented button {
    min-width: 0;
    min-height: 28px;
    padding: 3px 8px;
    overflow: hidden;
    color: var(--color-text-secondary);
    background: transparent;
    border: 0;
    border-radius: calc(var(--radius-sm) - 2px);
    font: inherit;
    font-size: 12px;
    text-overflow: ellipsis;
    white-space: nowrap;
    cursor: pointer;
}

.c-workspace-segmented button:hover {
    color: var(--color-text-primary);
    background: var(--color-nav-hover-bg);
}

.c-workspace-segmented button.is-active {
    color: var(--color-text-primary);
    background: var(--color-bg-surface);
    box-shadow: var(--shadow-xs);
}

@media (max-width: 560px) {
    .c-workspace-list-head {
        padding: var(--space-3);
    }
}


/* source: ./xacss/components/workspace-thread.css */
.c-workspace-thread {
    display: flex;
    min-width: 0;
    min-height: 0;
    flex-direction: column;
    background: var(--color-bg-canvas);
}

.c-workspace-thread__toolbar,
.c-workspace-thread__actions,
.c-workspace-thread__message-head,
.c-workspace-thread__message-meta > div,
.c-workspace-thread__composer-head,
.c-workspace-thread__composer-actions,
.c-workspace-thread__details-head {
    display: flex;
    align-items: center;
}

.c-workspace-thread__toolbar {
    min-height: 58px;
    flex: none;
    gap: var(--space-3);
    padding: 9px var(--space-4);
    background: var(--color-bg-surface);
    border-bottom: 1px solid var(--color-border-default);
}

.c-workspace-thread__title {
    min-width: 0;
    flex: 1;
}

.c-workspace-thread__title h2 {
    margin: 0;
    overflow: hidden;
    color: var(--color-text-primary);
    font-size: 14px;
    font-weight: 650;
    letter-spacing: 0;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.c-workspace-thread__title span {
    display: block;
    margin-top: 2px;
    overflow: hidden;
    color: var(--color-text-muted);
    font-size: 11px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.c-workspace-thread__actions {
    flex: none;
    gap: 2px;
}

.c-workspace-thread__icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    flex: 0 0 30px;
    padding: 0;
    color: var(--color-text-secondary);
    background: transparent;
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    cursor: pointer;
}

.c-workspace-thread__icon-btn:hover,
.c-workspace-thread__icon-btn.is-active {
    color: var(--color-text-primary);
    background: var(--color-nav-hover-bg);
    border-color: var(--color-border-default);
}

.c-workspace-thread__messages {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: var(--space-5) clamp(16px, 4vw, 56px);
}

.c-workspace-thread__message {
    width: min(100%, 760px);
    margin: 0 auto var(--space-3);
    padding: var(--space-4);
    color: var(--color-text-primary);
    background: var(--color-bg-surface);
    border: 1px solid var(--color-border-default);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-xs);
}

.c-workspace-thread__message.is-outbound {
    border-left: 2px solid var(--color-accent);
}

.c-workspace-thread__message.is-system {
    width: fit-content;
    max-width: min(90%, 760px);
    padding: 6px 12px;
    color: var(--color-text-secondary);
    background: var(--color-bg-surface-2);
    border-style: dashed;
    box-shadow: none;
}

.c-workspace-thread__message.is-error {
    color: var(--color-danger);
    border-color: var(--color-danger);
}

.c-workspace-thread__message-head {
    align-items: flex-start;
    gap: 10px;
    padding-bottom: var(--space-3);
    border-bottom: 1px solid color-mix(in srgb, var(--color-border-default) 72%, transparent);
}

.c-workspace-thread__avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    flex: 0 0 30px;
    overflow: hidden;
    color: var(--color-text-secondary);
    background: var(--color-bg-surface-3);
    border: 1px solid var(--color-border-default);
    border-radius: 50%;
    font-size: 11px;
    font-weight: 650;
}

.c-workspace-thread__avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.c-workspace-thread__message-meta {
    display: flex;
    min-width: 0;
    flex: 1;
    flex-direction: column;
    gap: 2px;
}

.c-workspace-thread__message-meta > div {
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-3);
}

.c-workspace-thread__message-meta strong {
    overflow: hidden;
    font-size: 12px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.c-workspace-thread__message-meta time,
.c-workspace-thread__message-meta > span {
    color: var(--color-text-muted);
    font-size: 10px;
}

.c-workspace-thread__body {
    padding-top: var(--space-4);
    color: var(--color-text-primary);
    font-size: 13px;
    line-height: 1.55;
    overflow-wrap: anywhere;
    white-space: pre-wrap;
}

.c-workspace-thread__message.is-system .c-workspace-thread__body {
    padding-top: 0;
}

.c-workspace-thread__composer {
    position: relative;
    width: min(100% - 32px, 760px);
    margin: 0 auto var(--space-4);
    padding: var(--space-3);
    flex: none;
    background: var(--color-bg-surface);
    border: 1px solid var(--color-border-default);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
}

.c-workspace-thread__composer-head,
.c-workspace-thread__composer-actions {
    justify-content: space-between;
    gap: var(--space-3);
}

.c-workspace-thread__composer-head {
    margin-bottom: var(--space-2);
    font-size: 11px;
    font-weight: 600;
}

.c-workspace-thread__composer-head span:last-child,
.c-workspace-thread__composer-actions > span {
    overflow: hidden;
    color: var(--color-text-muted);
    font-size: 10px;
    font-weight: 400;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.c-workspace-thread__composer textarea {
    color: var(--color-text-primary);
    background: var(--color-bg-surface);
    border: 1px solid var(--color-border-default);
    border-radius: var(--radius-sm);
    font: inherit;
}

.c-workspace-thread__composer textarea:focus {
    border-color: var(--color-border-strong);
    outline: none;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-accent) 18%, transparent);
}

.c-workspace-thread__composer-actions {
    margin-top: var(--space-2);
}

.c-workspace-thread__details {
    overflow-y: auto;
    background: var(--color-bg-surface);
}

.c-workspace-thread__details-head {
    min-height: 58px;
    justify-content: space-between;
    gap: var(--space-3);
    padding: 9px var(--space-4);
    border-bottom: 1px solid var(--color-border-default);
    font-size: 13px;
}

.c-workspace-thread__details-contact {
    display: flex;
    align-items: center;
    flex-direction: column;
    gap: var(--space-2);
    padding: var(--space-5) var(--space-4);
    text-align: center;
    border-bottom: 1px solid var(--color-border-default);
}

.c-workspace-thread__details-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    margin: 0;
    padding: var(--space-4);
}

.c-workspace-thread__details-list > div {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.c-workspace-thread__details-list dt {
    color: var(--color-text-muted);
    font-size: 10px;
    text-transform: uppercase;
}

.c-workspace-thread__details-list dd {
    margin: 0;
    color: var(--color-text-primary);
    font-size: 12px;
    overflow-wrap: anywhere;
}

@media (max-width: 900px) {
    .c-workspace-thread__messages {
        padding: var(--space-3);
    }
}

@media (max-width: 560px) {
    .c-workspace-thread__message {
        padding: var(--space-3);
    }

    .c-workspace-thread__message-meta > div {
        align-items: flex-start;
        flex-direction: column;
        gap: 2px;
    }

    .c-workspace-thread__composer {
        width: calc(100% - 20px);
        margin-bottom: 10px;
    }

    .c-workspace-thread__composer-actions > span {
        display: none;
    }

    .c-workspace-thread__composer-actions {
        justify-content: flex-end;
    }
}


/* source: ./xacss/components/inbox-navigation.css */
.c-inbox-navigation {
    display: flex;
    min-height: 0;
    flex-direction: column;
}

.c-inbox-navigation__group,
.c-inbox-navigation__items {
    display: flex;
    min-width: 0;
    flex-direction: column;
}

.c-inbox-navigation__toggle,
.c-inbox-navigation__item {
    display: flex;
    align-items: center;
    width: 100%;
    color: var(--color-text-secondary);
    background: transparent;
    border: 0;
    border-radius: var(--radius-sm);
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.c-inbox-navigation__toggle {
    height: var(--l-inbox-navigation-row-height);
    min-height: var(--l-inbox-navigation-row-height);
    flex: 0 0 var(--l-inbox-navigation-row-height);
    justify-content: space-between;
    gap: var(--space-2);
    padding: 2px 7px;
    color: var(--color-text-muted);
    font-size: 10px;
    font-weight: 650;
    text-transform: uppercase;
}

.c-inbox-navigation__toggle:hover {
    color: var(--color-text-primary);
}

.c-inbox-navigation__item {
    position: relative;
    height: var(--l-inbox-navigation-row-height);
    min-height: var(--l-inbox-navigation-row-height);
    flex: 0 0 var(--l-inbox-navigation-row-height);
    gap: 7px;
    padding: 5px 8px;
    overflow: hidden;
    font-size: 12px;
}

.c-inbox-navigation__item:hover {
    color: var(--color-text-primary);
    background: var(--color-nav-hover-bg);
}

.c-inbox-navigation__item.is-active {
    color: var(--color-text-primary);
    background: var(--color-nav-active-bg);
}

.c-inbox-navigation__item.is-active::before {
    content: "";
    position: absolute;
    inset: 6px auto 6px 0;
    width: 2px;
    background: var(--color-accent);
    border-radius: 0 2px 2px 0;
}

.c-inbox-navigation__item:disabled {
    cursor: not-allowed;
    opacity: 0.45;
}

.c-inbox-navigation__icon {
    display: inline-flex;
    width: 15px;
    height: 15px;
    flex: 0 0 15px;
    align-items: center;
    justify-content: center;
    color: var(--color-text-muted);
}

.c-inbox-navigation__item.is-telegram .c-inbox-navigation__icon {
    color: #229ed9;
}

.c-inbox-navigation__item.is-webchat .c-inbox-navigation__icon {
    color: var(--color-accent);
}

.c-inbox-navigation__copy {
    display: flex;
    min-width: 0;
    flex: 1;
    flex-direction: column;
    gap: 1px;
}

.c-inbox-navigation__copy > span,
.c-inbox-navigation__copy > small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.c-inbox-navigation__copy > small {
    color: var(--color-text-muted);
    font-size: 9px;
    line-height: 1.2;
}

.c-inbox-navigation__status {
    width: 6px;
    height: 6px;
    flex: 0 0 6px;
    background: var(--color-text-muted);
    border-radius: 50%;
}

.c-inbox-navigation__status.is-ready,
.c-inbox-navigation__status.is-active {
    background: var(--color-success);
}

.c-inbox-navigation__status.is-auth_error,
.c-inbox-navigation__status.is-sync_error,
.c-inbox-navigation__status.is-inactive {
    background: var(--color-danger);
}

.c-inbox-navigation__status.is-pending {
    background: var(--color-warning);
}


/* source: ./xacss/components/inbox-header.css */
.c-inbox-header-actions {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 4px;
}

.c-inbox-header-search {
    width: 220px;
    min-width: 0;
}

.c-inbox-header-search > .dt-search-btn.is-field {
    display: flex;
    align-items: center;
    width: 100%;
    height: 30px;
    min-width: 0;
    gap: 7px;
    padding: 0 9px;
    overflow: hidden;
    color: var(--color-text-secondary);
    background: var(--color-bg-surface-2);
    border: 1px solid var(--color-border-default);
    border-radius: var(--radius-sm);
    font: inherit;
    font-size: 11px;
    text-align: left;
    cursor: pointer;
}

.c-inbox-header-search > .dt-search-btn.is-field:hover,
.c-inbox-header-search > .dt-search-btn.is-field.is-active {
    color: var(--color-text-primary);
    border-color: var(--color-border-strong);
}

.c-inbox-header-search > .dt-search-btn.is-field > span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.c-inbox-header-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 30px;
    height: 30px;
    gap: 6px;
    padding: 0 8px;
    color: var(--color-text-secondary);
    background: transparent;
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    font: inherit;
    font-size: 11px;
    line-height: 1;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
}

.c-inbox-header-action:hover,
.c-inbox-header-action.is-active {
    color: var(--color-text-primary);
    background: var(--color-nav-hover-bg);
    border-color: var(--color-border-default);
}

.c-inbox-header-action.is-primary {
    color: var(--color-accent);
    background: var(--color-brand-electric-soft);
    border-color: var(--color-brand-electric-border);
}

.c-inbox-header-action.is-primary:hover {
    color: var(--color-accent);
    background: color-mix(in srgb, var(--color-brand-electric-soft) 72%, var(--color-bg-surface-3));
    border-color: var(--color-accent);
}

.c-inbox-header-action.is-icon-only {
    width: 30px;
    padding: 0;
}

.c-inbox-header-action.is-mobile-only {
    display: none;
}

@media (max-width: 1280px) {
    .c-inbox-header-search {
        width: 30px;
    }

    .c-inbox-header-search > .dt-search-btn.is-field {
        justify-content: center;
        width: 30px;
        padding: 0;
    }

    .c-inbox-header-search > .dt-search-btn.is-field > span,
    .c-inbox-header-action:not(.is-primary) > span {
        display: none;
    }

    .c-inbox-header-action:not(.is-primary) {
        width: 30px;
        padding: 0;
    }
}

@media (max-width: 900px) {
    .c-inbox-header-action.is-mobile-only {
        display: inline-flex;
    }
}

@media (max-width: 560px) {
    .c-inbox-header-action.is-primary {
        width: 30px;
        padding: 0;
    }

    .c-inbox-header-action.is-primary > span {
        display: none;
    }
}


/* source: ./xacss/layouts/app-shell.css */
/* Prevent intrinsic page content from widening the application grid track. */
.layout-container {
    grid-template-columns: var(--sidebar-width) minmax(0, 1fr);
}

.layout-container.sidebar-collapsed {
    grid-template-columns: var(--sidebar-collapsed-width) minmax(0, 1fr);
}

/*
 * Requests and Tasks are one workspace navigation cluster. The legacy shell
 * gives every top-level item a bottom margin; remove it only between these two
 * consecutive rows so their rhythm matches a regular list.
 */
.sidebar-nav-group[data-navigation-group="workspace"]:has(
    + .sidebar-nav-group[data-navigation-group="workspace"]
) {
    margin-bottom: 0;
}

@media (max-width: 768px) {
    .layout-container,
    .layout-container.sidebar-collapsed {
        grid-template-columns: minmax(0, 1fr);
    }

    .layout-container.has-compact-mobile-header .header-left {
        min-width: 0;
        flex: 1 1 auto;
        overflow: hidden;
    }

    .layout-container.has-compact-mobile-header .header-right {
        min-width: 0;
        flex: 0 0 auto;
    }

    .layout-container.has-compact-mobile-header .header-global-actions {
        display: none;
    }
}


/* source: ./xacss/layouts/page.css */
:where(.l-page-header, .page-header) {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--space-4);
}

:where(.l-page-header__main, .page-header-left) {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    min-width: 0;
}

:where(.l-page-header__actions, .page-header-right, .page-actions) {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex-wrap: wrap;
}

:where(.l-page-title, .page-title) {
    margin: 0;
    font-size: 24px;
    font-weight: 700;
    color: var(--color-text-primary);
}

.l-entity-form-page {
    width: min(100%, 1040px);
    margin-inline: auto;
    padding: var(--space-5);
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.l-entity-form-page--narrow {
    width: min(100%, 760px);
}

.l-entity-form-page--wide {
    width: min(100%, 1280px);
}

.l-entity-form-page__header {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

.l-entity-form-page__description {
    max-width: 72ch;
    margin: 0;
    color: var(--color-text-muted);
    font-size: var(--font-size-sm);
    line-height: 1.5;
}

.l-entity-form-page__content,
.l-entity-form-page__content > form {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: var(--space-4);
}

@media (max-width: 768px) {
    .l-entity-form-page {
        padding: var(--space-3);
    }

    .l-entity-form-page :where(.form-grid) {
        grid-template-columns: minmax(0, 1fr);
    }
}

:where(.l-page-shell, .sp-page-layout) {
    display: flex;
    align-items: flex-start;
    gap: 0;
}

:where(.l-page-shell__content, .sp-page-content) {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

:where(.l-page-shell__aside, .sp-page-sidebar) {
    width: var(--xa-layout-aside-width);
    min-width: 200px;
    flex-shrink: 0;
    margin-left: var(--xa-layout-sidebar-gap);
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

@media (max-width: 1024px) {
    :where(.l-page-shell, .sp-page-layout) {
        flex-direction: column;
    }

    :where(.l-page-shell__aside, .sp-page-sidebar) {
        width: 100%;
        min-width: 0;
        margin-left: 0;
    }
}

/*
 * sp-page-* shell bridge (Фаза C2, Claude 2026-04-22).
 * Варианты width sidebar и внутренний nav-контракт.
 */

:where(.l-page-shell__aside--scrollable, .sp-page-sidebar--scrollable) {
    overflow-y: auto;
}

:where(.l-page-shell__aside-tags, .sp-page-sidebar-tags) {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-1);
    min-width: 0;
}

/*
 * sp-nav-* — sidebar navigation shell (Фаза C2).
 * Только layout-контракт; визуал (цвета, active-стиль) — в admin-layout.css.
 */

:where(.l-page-nav, .sp-nav-links) {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

:where(.l-page-nav__link, .sp-nav-link) {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    min-width: 0;
}

:where(.l-page-nav__children, .sp-nav-children) {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

:where(.l-page-nav__child, .sp-nav-child) {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    min-width: 0;
}

:where(.l-page-nav__heading, .sp-nav-heading) {
    font-size: var(--font-size-xs);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-text-muted);
}

:where(.l-page-nav__divider, .sp-nav-divider) {
    height: 1px;
    background: var(--color-border-default);
}

:where(.l-page-nav__dot, .sp-nav-dot) {
    flex-shrink: 0;
}


/* source: ./xacss/layouts/three-column-workspace.css */
.l-three-column-workspace {
    --l-three-column-left-width: 310px;
    --l-three-column-right-width: 270px;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    width: 100%;
    height: calc(100vh - 62px);
    min-height: 560px;
    overflow: hidden;
    color: var(--color-text-primary);
    background: var(--color-bg-surface);
    border: 1px solid var(--color-border-default);
    border-radius: var(--radius-md);
}

.l-three-column-workspace.has-left {
    grid-template-columns: var(--l-three-column-left-width) minmax(0, 1fr);
}

.l-three-column-workspace.has-right {
    grid-template-columns: minmax(0, 1fr) var(--l-three-column-right-width);
}

.l-three-column-workspace.has-left.has-right {
    grid-template-columns: var(--l-three-column-left-width) minmax(0, 1fr) var(--l-three-column-right-width);
}

.l-three-column-workspace__pane {
    min-width: 0;
    min-height: 0;
}

.l-three-column-workspace__pane.is-hidden {
    display: none !important;
}

.l-three-column-workspace__left {
    grid-column: 1;
    grid-row: 1;
    border-right: 1px solid var(--color-border-default);
}

.l-three-column-workspace__center {
    position: relative;
    grid-column: 1;
    grid-row: 1;
    overflow: hidden;
}

.l-three-column-workspace.has-left > .l-three-column-workspace__center {
    grid-column: 2;
}

.l-three-column-workspace__right {
    grid-column: 2;
    grid-row: 1;
    width: 100%;
    justify-self: stretch;
    border-left: 1px solid var(--color-border-default);
}

.l-three-column-workspace.has-left.has-right > .l-three-column-workspace__right {
    grid-column: 3;
}

@media (max-width: 1180px) {
    .l-three-column-workspace {
        --l-three-column-left-width: 290px;
        --l-three-column-right-width: 240px;
    }
}

@media (max-width: 900px) {
    .l-three-column-workspace {
        position: relative;
        display: block;
        height: calc(100vh - 56px);
        min-height: 480px;
        border-radius: 0;
    }

    .l-three-column-workspace:not(.is-mobile-stack) > .l-three-column-workspace__pane {
        position: absolute;
        inset: 0;
        display: none !important;
        width: 100%;
        border: 0;
    }

    .l-three-column-workspace.is-mobile-left > .l-three-column-workspace__left,
    .l-three-column-workspace.is-mobile-center > .l-three-column-workspace__center,
    .l-three-column-workspace.is-mobile-right > .l-three-column-workspace__right {
        display: flex !important;
    }

    .l-three-column-workspace.is-mobile-stack {
        display: flex;
        flex-direction: column;
    }

    .l-three-column-workspace.is-mobile-stack > .l-three-column-workspace__left:not(.is-hidden) {
        display: flex !important;
        width: 100%;
        height: 150px;
        max-height: 150px;
        flex: none;
        border-right: 0;
        border-bottom: 1px solid var(--color-border-default);
    }

    .l-three-column-workspace.is-mobile-stack > .l-three-column-workspace__center {
        display: flex;
        width: 100%;
        flex: 1;
    }

    .l-three-column-workspace.is-mobile-stack > .l-three-column-workspace__right {
        position: absolute;
        inset: 0 0 0 auto;
        z-index: 10;
        display: flex;
        width: min(88vw, 320px);
        box-shadow: var(--shadow-lg);
    }
}


/* source: ./xacss/layouts/inbox-workspace.css */
.l-inbox-workspace {
    --l-inbox-navigation-width: 216px;
    --l-inbox-list-width: var(--l-inbox-navigation-width);
    --l-inbox-details-width: 270px;
    --l-inbox-navigation-row-height: 30px;
    position: relative;
    display: grid;
    grid-template-areas: "navigation list thread";
    grid-template-columns:
        var(--l-inbox-navigation-width)
        var(--l-inbox-list-width)
        minmax(0, 1fr);
    width: 100%;
    height: calc(100dvh - 62px);
    min-height: 560px;
    overflow: hidden;
    color: var(--color-text-primary);
    background: var(--color-bg-surface);
    border: 1px solid var(--color-border-default);
    border-radius: var(--radius-md);
}

.l-inbox-workspace.has-details {
    grid-template-areas: "navigation list thread details";
    grid-template-columns:
        var(--l-inbox-navigation-width)
        var(--l-inbox-list-width)
        minmax(0, 1fr)
        var(--l-inbox-details-width);
}

.l-inbox-workspace__pane {
    min-width: 0;
    min-height: 0;
}

.l-inbox-workspace__pane.is-hidden {
    display: none !important;
}

.l-inbox-workspace__navigation {
    grid-area: navigation;
}

.l-inbox-workspace__list {
    grid-area: list;
}

.l-inbox-workspace__thread {
    grid-area: thread;
}

.l-inbox-workspace__details {
    grid-area: details;
}

@media (max-width: 1280px) {
    .l-inbox-workspace {
        --l-inbox-navigation-width: 190px;
        --l-inbox-details-width: 240px;
    }
}

@media (min-width: 901px) and (max-width: 1499px) {
    .l-inbox-workspace.has-details {
        grid-template-areas: "navigation list thread";
        grid-template-columns:
            var(--l-inbox-navigation-width)
            var(--l-inbox-list-width)
            minmax(0, 1fr);
    }

    .l-inbox-workspace.has-details > .l-inbox-workspace__details {
        position: absolute;
        inset: 0 0 0 auto;
        z-index: 5;
        width: var(--l-inbox-details-width);
        box-shadow: var(--shadow-lg);
    }

    .l-inbox-workspace.has-details > .l-inbox-workspace__thread {
        padding-inline-end: var(--l-inbox-details-width);
    }
}

@media (max-width: 900px) {
    .l-inbox-workspace,
    .l-inbox-workspace.has-details {
        position: relative;
        display: block;
        height: calc(100dvh - 56px);
        min-height: 480px;
        border-radius: 0;
    }

    .l-inbox-workspace > .l-inbox-workspace__pane {
        position: absolute;
        inset: 0;
        display: none !important;
        width: 100%;
        border: 0;
        box-shadow: none;
    }

    .l-inbox-workspace.is-mobile-navigation > .l-inbox-workspace__navigation,
    .l-inbox-workspace.is-mobile-list > .l-inbox-workspace__list,
    .l-inbox-workspace.is-mobile-thread > .l-inbox-workspace__thread,
    .l-inbox-workspace.is-mobile-details > .l-inbox-workspace__details {
        display: flex !important;
    }
}


/* source: ./xacss/layouts/show.css */
/*
 * Show Page v2 — layout shell aliases.
 *
 * IMPORTANT: в :where() shell-aliasах НЕ указывай flex-direction/align/gap/
 * justify-content если этих свойств нет в legacy-правиле.
 * См. memory/feedback_xacss_where_pitfall.md. Bugfix 2026-04-22.
 *
 * Layout задаётся legacy (public/assets/admin/css/admin-layout-show.css):
 *   .sp-show-wrap      → display: grid; grid-template-columns: 1fr; flex: 1
 *   .sp-show-sidebar-* → grid-column/row + display: flex; gap: 12px (ROW!)
 *   .sp-show-details   → display: flex; flex-direction: column
 *   .sp-show-hero      → display: flex; align-items: center; gap: 10px (ROW!)
 *   .sp-show-fields    → block + overflow-y: auto
 *   .sp-show-field     → block + padding
 *   .sp-show-field-group → block + margin
 *   .sp-section / .sp-section-header → нет в legacy (block)
 *
 * Shell здесь даёт только min-width safety для новых имён `.l-show-shell*`
 * чтобы их можно было использовать в новой разметке параллельно со старой.
 */

:where(.l-show-shell, .sp-show-wrap) {
    min-width: 0;
}

:where(.l-show-shell__sidebar--left, .sp-show-sidebar-left),
:where(.l-show-shell__sidebar--right, .sp-show-sidebar-right) {
    min-width: 0;
}

:where(.l-show-shell__content, .sp-show-content) {
    min-width: 0;
}

:where(.l-show-shell__panel, .sp-show-details) {
    min-width: 0;
}

:where(.l-show-shell__body, .sp-show-panel-body) {
    min-width: 0;
}

:where(.l-show-shell__hero, .sp-show-hero) {
    min-width: 0;
}

:where(.l-show-shell__fields, .sp-show-fields) {
    min-width: 0;
}

:where(.l-show-shell__field, .sp-show-field) {
    min-width: 0;
}

:where(.l-show-shell__field-group, .sp-show-field-group) {
    min-width: 0;
}

:where(.l-show-shell__section, .sp-section) {
    min-width: 0;
}

:where(.l-show-shell__section-header, .sp-section-header) {
    min-width: 0;
}


/* source: ./xacss/layouts/data.css */
/*
 * Data screen — layout shell aliases.
 *
 * IMPORTANT: в :where() shell-aliasах НЕ указывай flex-direction/align/gap/
 * justify-content/flex-wrap если этих свойств нет в legacy-правиле.
 * См. memory/feedback_xacss_where_pitfall.md. Bugfix 2026-04-22.
 *
 * Layout задаётся компонентом DataTable (resources/css/xacss/components/datatable.css,
 * перенесено из public/assets/admin/css/admin-tables.css на D8):
 *   .dt-wrap            → display: grid; grid-template-columns: 280px 1fr; gap: 12px
 *   .dt-widget-sidebar  → display: flex; flex-direction: column (без gap!)
 *   .dt-toolbar         → display: flex; align-items: center; gap: var(--space-4)
 *   .dt-actions         → нет явного правила
 *   .dt-body            → нет явного
 *   .dt-table-wrap/-er  → min-width/overflow управляются legacy
 *   .dt-table           → width 100%
 *   .dt-row             → block (default)
 *   .dt-content-area    → block
 *
 * Shell здесь даёт только min-width safety.
 */

:where(.l-data-shell, .l-entity-index) {
    min-width: 0;
}

:where(.l-data-shell__toolbar, .dt-toolbar) {
    min-width: 0;
}

:where(.l-data-shell__actions, .dt-actions) {
    min-width: 0;
}

:where(.l-data-shell__spacer, .dt-toolbar-spacer) {
    min-width: 0;
}

:where(.l-data-shell__body, .dt-body) {
    min-width: 0;
}

:where(.l-data-shell__panel, .dt-widget-sidebar) {
    min-width: 0;
}

:where(.l-data-shell__wrap, .dt-wrap) {
    min-width: 0;
}

:where(.l-data-shell__table-wrap, .dt-table-wrap, .dt-table-wrapper) {
    min-width: 0;
}

:where(.l-data-shell__table, .dt-table) {
    min-width: 0;
}

:where(.l-data-shell__row, .dt-row) {
    min-width: 0;
}

:where(.l-data-shell__content, .dt-content-area) {
    min-width: 0;
}

:where(.l-data-shell__content-row, .dt-content-row) {
    min-width: 0;
}


/* source: ./xacss/layouts/dashboard.css */
/*
 * Dashboard screen shell aliases.
 *
 * Widget runtime is still owned by Dashboard WidgetGrid/WidgetCard CSS.
 * These classes only define stable layout names and min-width safety.
 */

:where(.l-dashboard-shell) {
    min-width: 0;
}

:where(.l-dashboard-header) {
    min-width: 0;
}

:where(.l-dashboard-header__main) {
    min-width: 0;
}

:where(.l-dashboard-header__title) {
    min-width: 0;
}

:where(.l-dashboard-header__description) {
    margin: 4px 0 0;
    color: var(--color-text-muted);
}

:where(.l-dashboard-toolbar, .l-dashboard-header__actions) {
    min-width: 0;
}


/* source: ./xacss/layouts/public-content.css */
:where(.l-public-shell) {
    min-height: 100dvh;
}

:where(.l-public-page) {
    min-height: 100dvh;
    display: grid;
    place-items: start center;
    padding: clamp(24px, 6vw, 64px) var(--space-4);
    background: var(--l-public-bg, var(--color-bg-app));
    color: var(--color-text-primary);
}

:where(.l-public-card) {
    width: min(100%, 680px);
    padding: var(--space-6);
    border: 1px solid var(--color-border-default);
    border-radius: var(--radius-lg);
    background: var(--color-bg-surface-2);
    box-shadow: var(--shadow-lg, 0 16px 40px rgba(0, 0, 0, 0.16));
}

:where(.l-public-card--narrow) {
    width: min(100%, 560px);
}

:where(.l-public-header) {
    display: grid;
    gap: var(--space-2);
    justify-items: center;
    margin-bottom: var(--space-6);
    text-align: center;
}

:where(.l-public-logo) {
    max-height: 52px;
    width: auto;
    object-fit: contain;
}

:where(.l-public-title) {
    margin: 0;
    color: var(--color-text-primary);
    font-size: 22px;
    line-height: 1.25;
    font-weight: 700;
}

:where(.l-public-description) {
    max-width: 52ch;
    margin: 0;
    color: var(--color-text-secondary);
    font-size: 14px;
    line-height: 1.5;
}

:where(.l-public-body) {
    min-width: 0;
}

:where(.l-public-form) {
    display: grid;
    gap: var(--space-5);
}

:where(.l-public-field) {
    display: grid;
    gap: var(--space-1);
}

:where(.l-public-field--separator) {
    margin-bottom: var(--space-1);
    padding-bottom: var(--space-5);
    border-bottom: 1px solid var(--color-border-default);
}

:where(.l-public-required) {
    color: var(--color-danger);
}

:where(.l-public-heading) {
    margin: var(--space-4) 0 0;
    padding-top: var(--space-4);
    border-top: 1px solid var(--color-border-default);
    color: var(--color-text-primary);
    font-size: 16px;
    line-height: 1.35;
    font-weight: 700;
}

:where(.l-public-divider) {
    margin: var(--space-2) 0;
    border: 0;
    border-top: 1px solid var(--color-border-default);
}

:where(.l-public-paragraph) {
    margin: 0;
    color: var(--color-text-secondary);
    font-size: 14px;
    line-height: 1.55;
}

:where(.l-public-option-list) {
    display: grid;
    gap: var(--space-2);
}

:where(.l-public-option) {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    color: var(--color-text-primary);
    font-size: 14px;
    cursor: pointer;
}

:where(.l-public-rating) {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-1);
}

:where(.l-public-rating-button) {
    display: inline-grid;
    width: 34px;
    height: 34px;
    place-items: center;
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--color-text-tertiary);
    cursor: pointer;
    font-size: 22px;
    line-height: 1;
}

:where(.l-public-rating-button:hover, .l-public-rating-button.is-active) {
    color: var(--color-warning);
    background: color-mix(in srgb, var(--color-warning) 14%, transparent);
}

:where(.l-public-status) {
    margin-bottom: var(--space-4);
    padding: var(--space-3);
    border: 1px solid var(--color-border-default);
    border-radius: var(--radius-md);
    font-size: 13px;
    line-height: 1.45;
}

:where(.l-public-status--error) {
    border-color: color-mix(in srgb, var(--color-danger) 38%, var(--color-border-default));
    background: color-mix(in srgb, var(--color-danger) 12%, transparent);
    color: var(--color-danger);
}

:where(.l-public-field__error) {
    color: var(--color-danger);
    font-size: 12px;
    line-height: 1.4;
}

:where(.l-public-muted) {
    color: var(--color-text-secondary);
    font-size: 13px;
}

:where(.l-public-actions) {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    justify-content: flex-end;
    margin-top: var(--space-2);
}

:where(.l-public-success) {
    display: grid;
    gap: var(--space-3);
    justify-items: center;
    padding: var(--space-6) 0;
    text-align: center;
}

:where(.l-public-success__icon) {
    display: grid;
    width: 48px;
    height: 48px;
    place-items: center;
    border-radius: var(--radius-round);
    background: color-mix(in srgb, var(--color-success) 18%, transparent);
    color: var(--color-success);
}

:where(.l-public-success h2) {
    margin: 0;
    color: var(--color-text-primary);
    font-size: 18px;
    line-height: 1.3;
}

:where(.l-public-signature) {
    width: 100%;
    min-height: 150px;
    border: 1px solid var(--color-border-default);
    border-radius: var(--radius-md);
    background: var(--color-bg-input);
    touch-action: none;
}

:where(.l-public-signature-actions) {
    display: flex;
    justify-content: flex-end;
    margin-top: var(--space-2);
}

@media (max-width: 560px) {
    :where(.l-public-page) {
        padding: var(--space-4);
    }

    :where(.l-public-card) {
        padding: var(--space-5);
    }

    :where(.l-public-actions) {
        display: grid;
        grid-template-columns: 1fr;
    }
}


/* source: ./xacss/components/datatable-views.css */
/*
 * DataTable view modes: Calendar, Gantt.
 * Фаза D4 (Claude 2026-04-22) — перенесено 1:1 из public/assets/admin/css/admin-tables.css:2563-2642.
 *
 * Используется всеми модулями через общий DataTable компонент
 * (resources/js/DataTable/DataTableCalendarView.jsx + DataTableGanttView.jsx).
 *
 * Card view + Kanban — пока не мигрированы (отдельный slice).
 */

/* ============================================
 * Calendar View (DataTableCalendarView)
 * ============================================ */

.dt-calendar { display: flex; flex-direction: column; flex: 1; min-height: 0; height: 100%; }
.dt-calendar-nav { display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-bottom: 1px solid var(--color-border-default); flex-shrink: 0; position: relative; z-index: 1; }
.dt-calendar-title { font-weight: 600; font-size: 0.9375rem; margin: 0 8px; }
.dt-calendar-modes { display: flex; gap: 2px; margin-left: auto; }

/* Month view */
.dt-calendar-month-wrap { flex: 1; display: flex; flex-direction: column; min-height: 0; overflow: auto; }
.dt-calendar-month-header { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; padding: 4px 4px 0; }
.dt-calendar-day-name { padding: 6px; text-align: center; font-size: 0.75rem; font-weight: 600; color: var(--color-text-muted); }
.dt-calendar-month { display: grid; grid-template-columns: repeat(7, 1fr); grid-auto-rows: minmax(68px, 1fr); flex: 1; min-height: 0; gap: 4px; padding: 4px; }
.dt-calendar-day { min-height: 0; overflow: hidden; border: 0; border-radius: var(--radius-sm); padding: 6px; cursor: pointer; background: color-mix(in srgb, var(--color-bg-surface-3) 72%, var(--color-bg-canvas)); }
.dt-calendar-day:hover { background: var(--color-bg-hover); }
.dt-calendar-day.is-today { background: color-mix(in srgb, var(--color-accent) 10%, var(--color-bg-surface-3)); }
.dt-calendar-day.is-today .dt-calendar-day-num { background: var(--color-accent); color: var(--color-text-inverse); border-radius: 50%; width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; }
.dt-calendar-day.is-other-month { opacity: 0.35; }
.dt-calendar-day.is-weekend { background: color-mix(in srgb, var(--color-text-muted) 6%, var(--color-bg-surface-2)); }
.dt-calendar-day-num { font-size: 0.8125rem; font-weight: 500; margin-bottom: 2px; }
.dt-calendar-day-events { display: flex; flex-direction: column; gap: 1px; }
.dt-calendar-event { padding: 1px 5px; border-radius: 3px; font-size: 0.6875rem; color: var(--color-text-inverse); cursor: pointer; display: flex; gap: 3px; align-items: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;  }
.dt-calendar-event:hover { filter: brightness(0.85); }
.dt-calendar-event-time { font-weight: 600; flex-shrink: 0; }
.dt-calendar-event-title { overflow: hidden; text-overflow: ellipsis; }
.dt-calendar-more { font-size: 0.6875rem; color: var(--color-text-muted); padding: 1px 4px; cursor: pointer; }

/* Week/Day time grid */
.dt-calendar-time-wrap { flex: 1; display: flex; flex-direction: column; overflow: hidden; }
.dt-calendar-time-header { display: flex; border-bottom: 2px solid var(--color-border-default); flex-shrink: 0; }
.dt-calendar-time-header .dt-calendar-time-gutter { width: 60px; flex-shrink: 0; }
.dt-calendar-time-col-header { flex: 1; text-align: center; padding: 8px 4px; font-size: 0.8125rem; font-weight: 500; }
.dt-calendar-time-col-header.is-today { color: var(--color-accent); font-weight: 700; }
.dt-calendar-time-col-date { font-size: 1.25rem; font-weight: 700; display: block; line-height: 1; }
.dt-calendar-time-body { flex: 1; overflow-y: auto; position: relative; }
.dt-calendar-time-row { display: flex; }
.dt-calendar-time-row .dt-calendar-time-gutter { width: 60px; flex-shrink: 0; font-size: 0.6875rem; color: var(--color-text-muted); text-align: right; padding-right: 8px; position: relative; top: -7px; }
.dt-calendar-slot { flex: 1; height: 48px; border-bottom: 1px solid var(--color-border-default); border-right: 1px solid var(--color-border-default); }
.dt-calendar-slot:last-child { border-right: none; }
.dt-calendar-time-row:nth-child(odd) .dt-calendar-slot { border-bottom-style: dashed; border-bottom-color: color-mix(in srgb, var(--color-border-default) 50%, transparent); }

/* Time event blocks */
.dt-calendar-time-event { position: absolute; border-radius: 4px; padding: 3px 6px; color: var(--color-text-inverse); font-size: 0.6875rem; cursor: pointer; overflow: hidden; z-index: 2;  display: flex; flex-direction: column; }
.dt-calendar-time-event:hover { filter: brightness(0.85); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15); z-index: 3; }
.dt-calendar-time-event-time { font-weight: 600; }
.dt-calendar-time-event-title { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dt-calendar-time-event-sub { opacity: 0.8; font-size: 0.625rem; }
.dt-calendar-allday { display: flex; flex-wrap: wrap; gap: 4px; padding: 6px 12px; border-bottom: 1px solid var(--color-border-default); }
.dt-calendar-now { position: absolute; left: 60px; right: 0; height: 2px; background: var(--color-danger); z-index: 4; pointer-events: none; }
.dt-calendar-now::before { content: ''; position: absolute; left: -4px; top: -3px; width: 8px; height: 8px; border-radius: 50%; background: var(--color-danger); }

/* ============================================
 * Gantt Chart View (DataTableGanttView)
 * ============================================ */

.dt-gantt { display: flex; flex: 1; min-height: 0; height: calc(100vh - 200px); overflow: hidden; width: 100%; }
.dt-gantt-list { width: 280px; flex-shrink: 0; overflow-y: auto; border-right: 2px solid var(--color-border-default); }
.dt-gantt-list-header { position: sticky; top: 0; z-index: 2; padding: 8px 12px; background: var(--color-bg-canvas); border-bottom: 1px solid var(--color-border-default); font-weight: 600; font-size: 0.8125rem; }
.dt-gantt-list-item { display: flex; align-items: center; gap: 8px; padding: 4px 12px; height: 36px; border-bottom: 1px solid var(--color-border-default); cursor: pointer; font-size: 0.8125rem;  }
.dt-gantt-list-item:hover { background: var(--color-bg-hover); }
.dt-gantt-list-item-title { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.dt-gantt-timeline { flex: 1; overflow: auto; position: relative; }
.dt-gantt-header { position: sticky; top: 0; z-index: 3; display: flex; background: var(--color-bg-canvas); border-bottom: 2px solid var(--color-border-default); }
.dt-gantt-header-cell { text-align: center; padding: 6px 0; font-size: 0.6875rem; color: var(--color-text-muted); border-right: 1px solid var(--color-border-default); flex-shrink: 0; }
.dt-gantt-header-cell.is-today { background: color-mix(in srgb, var(--color-accent) 8%, var(--color-bg-canvas)); font-weight: 600; color: var(--color-accent); }
.dt-gantt-rows { position: relative; }
.dt-gantt-row { height: 36px; border-bottom: 1px solid var(--color-border-default); position: relative; }
.dt-gantt-bar { position: absolute; height: 22px; top: 7px; border-radius: 4px; cursor: pointer; display: flex; align-items: center;  min-width: 8px; }
.dt-gantt-bar:hover { filter: brightness(0.85); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15); z-index: 2; }
.dt-gantt-bar-progress { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 4px; background: rgba(0, 0, 0, 0.15); }
.dt-gantt-bar-label { padding: 0 6px; font-size: 0.6875rem; line-height: 22px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--color-text-inverse); position: relative; z-index: 1; }
.dt-gantt-today { position: absolute; top: 0; bottom: 0; width: 2px; background: var(--color-danger); z-index: 4; pointer-events: none; }
.dt-gantt-today::before { content: ''; position: absolute; top: -4px; left: -3px; width: 8px; height: 8px; border-radius: 50%; background: var(--color-danger); }
.dt-gantt-milestone { position: absolute; top: 10px; width: 14px; height: 14px; transform: rotate(45deg); cursor: pointer;  }
.dt-gantt-milestone:hover { filter: brightness(0.85); }
.dt-gantt-arrows { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; }
.dt-gantt-zoom { display: flex; gap: 2px; }
.dt-gantt-grid-col { position: absolute; top: 0; bottom: 0; border-right: 1px solid var(--color-border-default); }
.dt-gantt-grid-col.is-weekend { background: color-mix(in srgb, var(--color-text-muted) 2%, transparent); }


/* source: ./xacss/components/datatable-controls.css */
/*
 * DataTable controls (filters / presets / sort / pagination / actions / search / view-toggle / zoom / settings)
 * Фаза C1, Claude 2026-04-22.
 *
 * Текущий source of truth:
 *   public/assets/admin/css/admin-tables.css
 *
 * Перенос планируется в Фазе D.
 *
 * Прогнозируемые селекторы (см. 21-claude-dt-inventory.md):
 *   Filters:    .dt-filters, .dt-filter-*, .dt-presets, .dt-preset-*
 *   Sort:       .dt-sort-*, .dt-sortable, .dt-sortable-list
 *   Pagination: .dt-pagination, .dt-pagination-*, .dt-page-btn, .dt-page-ellipsis
 *   Actions:    .dt-action-btn, .dt-bulk-*, .dt-check-*
 *   Search:     .dt-search-*
 *   View:       .dt-view-*, .dt-zoom-*
 *   Settings:   .dt-settings-tab, .dt-settings-tabs
 */


/* source: ./xacss/components/datatable-col-modal.css */
/*
 * DataTable column settings modal (~20 selectors).
 * Фаза C1, Claude 2026-04-22.
 *
 * Текущий source of truth:
 *   public/assets/admin/css/admin-tables.css (.dt-col-modal-*)
 *
 * Перенос в Фазе D. Зарезервированный namespace.
 * Похож на общий modal из components/modal.css, но со своей структурой
 * (item-ghost, grip, zoom-opt, section-label).
 */


/* source: ./xacss/components/datatable-widgets.css */
/*
 * DataTable widgets sidebar + info buttons.
 * Фаза C1, Claude 2026-04-22.
 *
 * Текущий source of truth:
 *   public/assets/admin/css/admin-tables.css (.dt-widget-*, .dt-sidebar-*, .dt-info-btn)
 *
 * Перенос в Фазе D. Зарезервированный namespace.
 */


/* source: ./xacss/components/datatable.css */
/* ============================================
   DataTable Component (`.dt-*`) — core data table
   Also contains legacy siblings: `.kanban` root, `.tt` (TabTable root),
   `.autocomplete-*`. These siblings depend on DataTable layout context
   and stay colocated intentionally.
   ============================================ */

/* Container */
.dt {
  display: flex;
  flex-direction: column;
  background: var(--color-bg-surface-2);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-lg);
  overflow: hidden;
  flex: 1;
  min-height: 0;
}
.dt-table-wrap {
  flex: 1;
  overflow-y: auto;
  min-height: 0;
}
.dt-page-shell {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
  min-height: 0;
}
/* When kanban/calendar/gantt is active, remove overflow clip so DnD works */
.dt-table-wrap:has(.kanban) { overflow: visible; }
.dt-table-wrap:has(.dt-calendar) {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.dt-table-wrap:has(.dt-calendar) > .dt-body {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-height: 0;
}
.dt-table-wrap:has(.dt-gantt) { overflow: hidden; display: flex; flex-direction: column; }

/* Widget sidebar — table slides over it */
.dt-wrap {
  display: grid;
  grid-template-columns: 280px 1fr;
  flex: 1; min-height: 0;
  gap: 12px;
}
.dt-wrap:not(:has(.dt-widget-sidebar)) {
  grid-template-columns: 1fr;
  gap: 0;
}
.dt-wrap > .dt {
  grid-column: 1 / -1;
  grid-row: 1;
  min-width: 0;

  position: relative;
  z-index: 2;
}
.dt-wrap.has-widgets > .dt {
  margin-left: 292px;
}
.dt-wrap.has-widgets-right > .dt {
  margin-right: 292px;
}

.dt-widget-sidebar {
  grid-column: 1;
  grid-row: 1;
  width: 280px;
  overflow: hidden;
  background: var(--color-bg-surface-2);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-lg);
  display: flex; flex-direction: column;
  position: relative;
  z-index: 100;
  transform: scale(0.92);
  transform-origin: left center;
  opacity: 0.5;

}
.dt-wrap.has-widgets .dt-widget-sidebar:not(.dt-widget-sidebar-right) {
  transform: scale(1);
  opacity: 1;
}

/* Right widget sidebar */
.dt-widget-sidebar-right {
  grid-column: 1 / -1;
  justify-self: end;
  transform-origin: right center;
}
.dt-wrap.has-widgets-right .dt-widget-sidebar-right {
  transform: scale(1);
  opacity: 1;
}
.dt-widget-sidebar-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 12px;
  border-bottom: 1px solid var(--color-border-default);
  flex-shrink: 0;
  background: transparent; border: none; color: inherit; font: inherit;
  width: 100%; cursor: pointer; text-align: left;
  position: relative;
  z-index: 101;
}
.dt-widget-sidebar-title {
  font-size: 11px; font-weight: 600; color: var(--color-text-muted);
  text-transform: uppercase; letter-spacing: 0.04em;
}
.dt-widget-sidebar-body {
  flex: 1; overflow-y: auto; padding: 8px;
  display: flex; flex-direction: column; gap: 8px;
}

/* Widget cards */
.dt-widget-card {
  padding: 10px 12px;
  background: var(--color-bg-surface-3);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-sm);

  animation-delay: calc(var(--wi, 0) * 80ms + 0.3s);
}

.dt-widget-card-label {
  font-size: 10px; color: var(--color-text-muted);
  margin-bottom: 2px;
}
.dt-widget-card-value {
  font-size: 18px; font-weight: 700;
  color: var(--color-text-primary);
  line-height: 1.2;
}
.dt-widget-card-sub {
  font-size: 11px; color: var(--color-text-muted);
  margin-top: 2px;
}

/* Widget grid layout (2 per row) */
.dt-widget-sidebar-body[data-layout="grid"] {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}
.dt-widget-sidebar-body[data-layout="grid"] > .dt-widget-card {
  min-height: 90px;
}

@media (max-width: 768px) {
  .dt-widget-sidebar { display: none; }
  .dt-widget-sidebar-right { display: none; }
  .dt-widget-toggle { display: none; }
}

/* Presets */
.dt-presets {
  display: flex; align-items: center; gap: 4px;
  flex-shrink: 1; min-width: 0; overflow: hidden;
}
.dt-preset-btn {
  display: flex; align-items: center; gap: 4px;
  padding: 4px 10px; border-radius: var(--radius-sm);
  border: 1px solid var(--color-border-default); background: none;
  color: var(--color-text-secondary); cursor: pointer;
  font-size: 12px; font-weight: 500; white-space: nowrap;

}
.dt-preset-btn:hover { border-color: var(--color-accent); color: var(--color-text-primary); }
.dt-preset-btn.is-active {
  background: color-mix(in srgb, var(--color-accent) 15%, transparent);
  border-color: var(--color-accent); color: var(--color-accent);
}
.dt-preset-overflow { padding: 4px 6px; }
.dt-preset-add { padding: 4px 6px; border-style: dashed; }
.dt-preset-save-form {
  display: flex; align-items: center; gap: 4px;
}
.dt-preset-save-input {
  width: 120px; padding: 3px 8px; font-size: 12px;
  background: var(--color-bg-surface-2); border: 1px solid var(--color-border-default);
  border-radius: var(--radius-sm); color: var(--color-text-primary); outline: none;
}
.dt-preset-save-input:focus { border-color: var(--color-accent); }

/* Separator between action groups */
.dt-separator {
  width: 1px; height: 20px;
  background: var(--color-border-default);
  flex-shrink: 0;
  margin: 0 0.4vw;
}

/* Filter button */
/* Filter active indicator */
.dt-col-settings-btn.has-active {
  border-color: var(--color-accent); color: var(--color-accent);
  width: auto; padding: 0 8px; gap: 4px;
}
.dt-filter-count {
  background: var(--color-accent); color: var(--color-text-inverse);
  font-size: 10px; min-width: 16px; height: 16px;
  border-radius: 8px; display: flex; align-items: center; justify-content: center;
  padding: 0 4px;
}

/* Sortable list for settings */
.dt-sortable-list {
  display: flex; flex-direction: column; gap: 0;
}
.dt-sort-item {

  border-radius: var(--radius-sm);
}
.dt-sort-item.is-dragging {
  opacity: 0.4;
  transform: scale(0.96);
}
.dt-sort-item.is-over {
  margin-top: 6px;
  padding-top: 6px;
  border-top: 2px solid var(--color-accent);
}
.dt-sort-item-inner {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 10px; border-radius: var(--radius-sm);
  cursor: grab;
}
.dt-sort-item-inner:hover { background: var(--color-bg-surface-3); }
.dt-sort-item.is-pinned .dt-sort-item-inner { opacity: 0.5; cursor: default; }
.dt-sort-item-inner:active { cursor: grabbing; }
.dt-sort-grip { color: var(--color-text-muted); flex-shrink: 0; }
.dt-sort-toggle {
  display: flex; align-items: center; gap: 8px; cursor: pointer; flex: 1;
}
.dt-sort-toggle input[type="checkbox"] { cursor: pointer; }
.dt-sort-label { font-size: 13px; color: var(--color-text-primary); }
.dt-sort-badge {
  font-size: 9px; color: var(--color-text-muted); margin-left: auto;
}
.dt-settings-tabs {
  display: flex; border-bottom: 1px solid var(--color-border-default);
  flex-shrink: 0;
}
.dt-settings-tab {
  flex: 1; display: flex; align-items: center; justify-content: center; gap: 4px;
  padding: 8px; font-size: 11px; font-weight: 500;
  color: var(--color-text-secondary); background: none; border: none;
  border-bottom: 2px solid transparent; cursor: pointer;

}
.dt-settings-tab:hover { color: var(--color-text-primary); }
.dt-settings-tab.is-active { color: var(--color-accent); border-bottom-color: var(--color-accent); }

/* ========== Toolbar ========== */
.dt-toolbar {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-2);
  border-bottom: 1px solid var(--color-border-default);
}

.dt-check-all, .dt-check-row { margin-left: 2px; }

/* Search toggle button — styled via .dt-actions > .dt-search-btn */

/* Search modal overlay */
.dt-search-overlay {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 15vh;

}

.dt-search-modal {
  background: var(--color-bg-surface-2);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-lg);
  width: 520px;
  max-width: calc(100vw - 32px);
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.4);
  padding: var(--space-6);
  display: flex;
  gap: var(--space-2);
  align-items: center;
}

.dt-search-modal-icon {
  color: var(--color-text-muted);
  flex-shrink: 0;
}

.dt-search-modal-input {
  flex: 1;
  background: none;
  border: none;
  outline: none;
  color: var(--color-text-primary);
  font-size: 16px;
  font-family: inherit;
}

.dt-search-modal-input::placeholder {
  color: var(--color-text-muted);
}

.dt-search-modal-hint {
  font-size: 11px;
  color: var(--color-text-muted);
  flex-shrink: 0;
  padding: 2px 6px;
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-sm);
}

.dt-filters {
  display: flex;
  gap: var(--space-2);
}

.dt-filter-select {
  padding: var(--space-2) var(--space-4);
  padding-right: 32px;
  background: var(--color-bg-surface-3);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-md);
  color: var(--color-text-primary);
  font-size: 13px;
  font-family: inherit;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23a0a0a0' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  cursor: pointer;
  min-width: 140px;
  outline: none;
}

.dt-filter-select:focus {
  border-color: var(--color-accent);
}

/* ========== View Toggle ========== */
.dt-view-toggle {
  display: flex;
  gap: 2px;
}

.dt-view-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  background: none;
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-sm);
  color: var(--color-text-muted);
  cursor: pointer;

}

.dt-view-btn:hover {
  color: var(--color-text-primary);
  background: var(--color-bg-surface-3);
}

.dt-view-btn.is-active {
  background: color-mix(in srgb, var(--color-accent) 10%, transparent);
  border-color: color-mix(in srgb, var(--color-accent) 40%, transparent);
  color: var(--color-accent);
}
.dt-view-btn.with-text,
.dt-view-btn.is-text {
  width: auto; padding: 0 10px; gap: 6px;
}
.dt-view-btn.is-text {
  cursor: default; font-size: 10px; white-space: nowrap;
}
.dt-view-btn.is-text:hover { color: inherit; }
.dt-view-btn.with-text svg {
  width: auto; padding-right: 10px;
}
.dt-view-btn.with-text .dt-view-count {
  width: auto; padding-left: 8px; margin-left: 8px; border-left: 1px solid var(--color-border-default);
}
.dt-view-btn.with-text.is-active .dt-view-count {
  border-color: color-mix(in srgb, var(--color-brand-electric) 40%, transparent);
}

/* Zoom sub-group inside view toggle */
.dt-zoom-group {
  display: flex;
  align-items: center;
  gap: 2px;
  margin-left: 2px;
}

.dt-zoom-sep {
  width: 1px;
  height: 20px;
  background: var(--color-border-default);
  margin: 0 4px;
}

.dt-zoom-btn {
  font-size: 13px !important;
  padding: 0 !important;
  width: 36px !important;
}

/* ========== Bulk Actions Bar ========== */
.dt-bulk-inline {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-left: 8px;
  font-size: 12px;
  color: var(--color-text-secondary);

}

.dt-bulk-count {
  font-weight: 500;
  white-space: nowrap;
}
.dt-bulk-action-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: none;
  border-radius: var(--radius-sm);
  background: var(--color-bg-surface-3);
  color: var(--color-text-secondary);
  cursor: pointer;

}
.dt-bulk-action-btn:hover {
  background: var(--color-bg-surface-3);
  color: var(--color-text-primary);
}
.dt-bulk-action-btn.dt-bulk-action-danger:hover {
  background: var(--color-danger-soft);
  color: var(--color-danger);
}
.dt-bulk-action-btn:disabled {
  opacity: 0.5;
  pointer-events: none;
}
.dt-bulk-action-btn:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}
.dt-bulk-action-btn.dt-bulk-action-choice {
  width: auto;
  min-width: 28px;
  max-width: 220px;
  padding: 0 8px;
  gap: 4px;
  white-space: nowrap;
}
.dt-bulk-action-btn .icon {
  width: 14px;
  height: 14px;
}

/* ========== Table ========== */
.dt-table-wrapper {
  overflow-x: auto;
}

.dt-table {
  width: 100%;
  border-collapse: collapse;
}

.dt-table th,
.dt-table td {
  padding: var(--space-2) var(--space-4);
  text-align: left;
  vertical-align: middle;
  border-bottom: 1px solid var(--color-border-default);
  font-size: 13px;
  white-space: nowrap;
}

.dt-table th {
  font-weight: 600;
  color: var(--color-text-secondary);
  background: var(--color-bg-surface-2);
  white-space: nowrap;
  position: sticky;
  top: 0;
  user-select: none;
}

.dt-table tbody tr:last-child td {
  border-bottom: none;
}

.dt-table .dt-empty-row:hover {
  background: transparent;
}

.dt-table .dt-empty-cell {
  padding: 0;
  white-space: normal;
}

.dt-table tbody tr:hover {
  background: var(--color-bg-surface-3);
}

.dt-sortable {
  cursor: pointer;
}

.dt-sortable:hover {
  color: var(--color-text-primary);
}

.dt-sort-icon {
  margin-left: 4px;
  font-size: 11px;
}

.dt-row-clickable {
  cursor: pointer;
}

.dt-col-check {
  width: 44px;
  padding: var(--space-2) var(--space-4);
  text-align: center;
  vertical-align: middle;
  cursor: pointer;
  user-select: none;
}

.dt-col-check input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  width: 14px;
  height: 14px;
  border: 1.5px solid var(--color-text-muted);
  border-radius: 3px;
  background: transparent;
  cursor: pointer;
  position: relative;
  vertical-align: middle;

}

.dt-col-check input[type="checkbox"]:hover {
  border-color: var(--color-accent);
}

.dt-col-check input[type="checkbox"]:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

.dt-col-check input[type="checkbox"]:checked {
  background: var(--color-accent);
  border-color: var(--color-accent);
}

.dt-col-check input[type="checkbox"]:checked::after {
  content: '';
  position: absolute;
  left: 3.5px;
  top: 1px;
  width: 4px;
  height: 7px;
  border: solid white;
  border-width: 0 1.5px 1.5px 0;
  transform: rotate(45deg);
}

/* ========== Cell Helpers ========== */
.dt-cell-user {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.dt-cell-avatar {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--color-accent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 8px;
  font-weight: 600;
  color: white;
  flex-shrink: 0;
  overflow: hidden;
}

.dt-cell-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.dt-cell-name {
  display: block;
  font-weight: 500;
  color: var(--color-text-primary);
}

.dt-cell-sub {
  display: block;
  font-size: 12px;
  color: var(--color-text-muted);
}

.dt-cell-link {
  color: var(--color-text-primary);
  font-weight: 500;
  cursor: pointer;
}

/* ========== Cards ========== */
/* dt-card and dt-cards styles moved to admin-card-style.css */

/* ========== Pagination ========== */
.dt-pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-2) var(--space-6);
  border-top: 1px solid var(--color-border-default);
  flex-shrink: 0;
  background: var(--color-bg-surface-2);
  font-size: 13px;
}

.dt-pagination:empty {
  display: none;
}

.dt-pagination-info {
  color: var(--color-text-muted);
}

.dt-pagination-nav {
  display: flex;
  gap: 2px;
}

.dt-page-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  height: 32px;
  padding: 0 var(--space-2);
  background: none;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  color: var(--color-text-secondary);
  font-size: 13px;
  font-family: inherit;
  cursor: pointer;

}

.dt-page-btn:hover:not([disabled]):not(.is-active) {
  background: var(--color-bg-surface-3);
  color: var(--color-text-primary);
}

.dt-page-btn.is-active {
  background: var(--color-accent);
  color: white;
}

.dt-page-btn[disabled] {
  opacity: 0.4;
  cursor: default;
}

.dt-page-ellipsis {
  display: flex;
  align-items: center;
  padding: 0 var(--space-1);
  color: var(--color-text-muted);
}

/* ========== States ========== */
.dt-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-4);
  padding: var(--space-8) var(--space-6);
  color: var(--color-text-muted);
  text-align: center;
  min-height: 200px;
}

.dt-spinner {
  width: 32px;
  height: 32px;
  border: 3px solid var(--color-border-default);
  border-top-color: var(--color-accent);
  border-radius: 50%;
  animation: dt-spin 0.8s linear infinite;
}

@keyframes dt-spin {
  to { transform: rotate(360deg); }
}

.dt.is-loading {
  opacity: 0.6;
  pointer-events: none;

}

.dt-error-detail {
  font-size: 12px;
  color: var(--color-danger);
}

/* ========== Sidebar Panel ========== */

/* Toolbar order: presets left → spacer → actions right */
.dt-sidebar-toggle { order: 0; }
.dt-sidebar-toggle span { display: none; }
.dt-presets { order: 1; }
.dt-bulk-inline { order: 1; }
.dt-toolbar-spacer { order: 2; flex: 1; }
.dt-actions { order: 3; display: flex; align-items: center; gap: 4px; flex-shrink: 0; }
.dt-action-btn,
.dt-actions > .dt-search-btn,
.dt-actions > .dt-col-settings-btn {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-sm);
  color: var(--color-text-muted);
  cursor: pointer;

}
.dt-action-btn:hover,
.dt-actions > .dt-search-btn:hover,
.dt-actions > .dt-col-settings-btn:hover {
  border-color: var(--color-accent);
  color: var(--color-accent);
}
.dt-actions > .dt-search-btn.is-active {
  border-color: var(--color-accent);
  color: var(--color-accent);
  background: var(--color-accent-soft-bg);
}
.dt-info-btn .icon { width: 14px; height: 14px; }
.dt-search-btn .icon { width: 14px; height: 14px; }
.dt-col-settings-btn .icon { width: 14px; height: 14px; }

.dt-content-row {
  display: flex;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

.dt-sidebar-panel {
  --dt-sidebar-width: 260px;
  width: 0;
  overflow: hidden;
  flex-shrink: 0;

}
.dt-sidebar-panel-inner {
  width: var(--xa-layout-aside-width);
  padding: var(--space-4);
  border-right: 1px solid var(--color-border-default);
  box-sizing: border-box;
}
.dt-sidebar-panel.is-open {
  width: var(--xa-layout-aside-width);
  overflow-y: auto;
}

.dt-content-area {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.dt-sidebar-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  background: none;
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-sm);
  color: var(--color-text-muted);
  cursor: pointer;

}

.dt-sidebar-toggle:hover {
  color: var(--color-text-primary);
  background: var(--color-bg-surface-3);
}

.dt-sidebar-toggle.is-active {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: white;
}

.dt-sidebar-toggle .icon {
  width: 14px;
  height: 14px;
}
.dt-view-btn .icon {
  width: 14px;
  height: 14px;
}
.dt-widget-sidebar .dt-view-btn {
  position: relative;
  z-index: 12;
}

/* Sidebar internal helpers */
.dt-sidebar-section {
  margin-bottom: var(--space-4);
}

.dt-sidebar-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: .6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .05em;
  opacity: .4;
  padding: .375rem 0;
  margin-bottom: .25rem;
}

/* ========== Column Settings ========== */
/* .dt-col-settings-btn styled via .dt-actions */

/* Modal overlay */
.dt-col-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;

}


/* Modal panel */
.dt-col-modal {
  background: var(--color-bg-surface-2);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-lg);
  width: 480px;
  max-width: calc(100vw - 32px);
  max-height: 80vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.4);
}

.dt-col-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-6);
  border-bottom: 1px solid var(--color-border-default);
  flex-shrink: 0;
}
.dt-col-modal-header h3 {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  color: var(--color-text-primary);
}
.dt-col-modal-close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  background: none;
  border: none;
  border-radius: var(--radius-sm);
  color: var(--color-text-muted);
  font-size: 20px;
  cursor: pointer;

}
.dt-col-modal-close:hover {
  color: var(--color-text-primary);
  background: var(--color-bg-surface-3);
}

/* Modal body — scrollable list */
.dt-col-modal-body {
  flex: 1;
  overflow-y: auto;
  padding: var(--space-2) 0;
}

/* Column row */
.dt-col-modal-item {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: 8px var(--space-6);

  font-size: 14px;
  color: var(--color-text-primary);
}
.dt-col-modal-item:hover {
  background: var(--color-bg-surface-3);
}
.dt-col-modal-item.is-dragging {
  opacity: 0.4;
  background: var(--color-bg-surface-3);
}
.dt-col-modal-item.is-pinned {
  opacity: 0.5;
  cursor: default;
}
.dt-col-modal-item:not(.is-pinned) {
  cursor: grab;
}

/* Grip handle */
.dt-col-modal-grip {
  flex-shrink: 0;
  width: 16px;
  text-align: center;
  color: var(--color-text-muted);
  font-size: 11px;
  cursor: grab;
  line-height: 1;
  touch-action: none;
}
.dt-col-modal-item.is-pinned .dt-col-modal-grip {
  visibility: hidden;
}

/* Custom checkbox */
.dt-col-modal-check {
  appearance: none;
  -webkit-appearance: none;
  width: 16px;
  height: 16px;
  border: 1.5px solid var(--color-text-muted);
  border-radius: 3px;
  background: transparent;
  cursor: pointer;
  position: relative;
  flex-shrink: 0;

}
.dt-col-modal-check:hover {
  border-color: var(--color-accent);
}
.dt-col-modal-check:checked {
  background: var(--color-accent);
  border-color: var(--color-accent);
}
.dt-col-modal-check:checked::after {
  content: '';
  position: absolute;
  left: 4px;
  top: 1px;
  width: 5px;
  height: 8px;
  border: solid white;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.dt-col-modal-check:disabled {
  opacity: 0.5;
  cursor: default;
}

/* Column label */
.dt-col-modal-label {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Pinned badge */
.dt-col-modal-badge {
  font-size: 11px;
  color: var(--color-text-muted);
  white-space: nowrap;
}

/* Footer */
.dt-col-modal-footer {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-6);
  border-top: 1px solid var(--color-border-default);
  flex-shrink: 0;
}
.dt-col-modal-reset {
  font-size: 13px;
  color: var(--color-text-muted);
  cursor: pointer;
  background: none;
  border: none;
  font-family: inherit;
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-sm);

  margin-right: auto;
}
.dt-col-modal-reset:hover {
  color: var(--color-accent);
  background: var(--color-bg-surface-3);
}

/* Zoom section in settings modal */
.dt-col-modal-section {
  padding: var(--space-2) var(--space-6);
  border-bottom: 1px solid var(--color-border-default);
}
.dt-col-modal-section-label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-text-muted);
  padding: var(--space-2) var(--space-6) 4px;
}
.dt-col-modal-zoom-options {
  display: flex;
  gap: 4px;
  padding-top: var(--space-2);
}
.dt-col-modal-zoom-opt {
  flex: 1;
  padding: 8px 12px;
  font-size: 13px;
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-sm);
  background: var(--color-bg-surface-3);
  color: var(--color-text-secondary);
  cursor: pointer;

  text-align: center;
  font-family: inherit;
}
.dt-col-modal-zoom-opt:hover {
  color: var(--color-text-primary);
  border-color: var(--color-accent);
}
.dt-col-modal-zoom-opt.is-active {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: white;
}

/* Touch drag ghost */
.dt-col-modal-item-ghost {
  background: var(--color-bg-surface-2);
  border: 1px solid var(--color-accent);
  border-radius: var(--radius-sm);
}

/* ========== Responsive ========== */
@media (max-width: 768px) {
  .dt-hide-mobile { display: none !important; }

  .dt-wrap { display: flex; flex-direction: column; }
  .dt-wrap.has-widgets { grid-template-columns: 1fr; }
  .dt-wrap.has-widgets > .dt,
  .dt-wrap.has-widgets-right > .dt {
    margin-left: 0;
    margin-right: 0;
  }
  .dt-widget-sidebar { display: none !important; }

  .dt-table { min-width: 0; width: 100%; table-layout: auto; }
  .dt-table-wrapper { overflow-x: auto; -webkit-overflow-scrolling: touch; }

  .dt-toolbar {
    flex-wrap: wrap;
    gap: var(--space-2);
  }

  .dt-sidebar-toggle { order: 0; flex-shrink: 0; }
  .dt-presets { order: 1; flex-shrink: 1; overflow: hidden; }
  .dt-actions { order: 3; flex-shrink: 0; }

  .dt-filter-select {
    min-width: 0;
    width: auto;
    flex: 1 1 calc(50% - var(--space-2));
  }

  .dt-pagination {
    flex-direction: column;
    gap: var(--space-2);
    align-items: center;
  }

  /* .dt-cards responsive → admin-card-style.css */

  .dt-sidebar-panel.is-open {
    position: absolute;
    z-index: 20;
    left: 0;
    top: 0;
    bottom: 0;
    background: var(--color-bg-surface-2);
    box-shadow: 4px 0 16px rgba(0,0,0,.2);
  }

  .dt-content-row {
    position: relative;
    overflow: visible;
  }

  /* Touch scroll for horizontal table overflow */
  .dt-table-wrapper {
    -webkit-overflow-scrolling: touch;
  }

  /* Ensure .dt body doesn't clip vertical content */
  .dt-body {
    overflow: visible;
  }

  /* Settings modal: centered, adaptive width on mobile */
  .dt-col-modal {
    width: calc(100vw - 32px);
    max-height: 85vh;
  }

  /* Enlarged touch targets */
  .dt-col-modal-item {
    padding: 12px var(--space-6);
    min-height: 48px;
  }
  .dt-col-modal-check {
    width: 22px;
    height: 22px;
  }
  .dt-col-modal-check:checked::after {
    left: 5.5px;
    top: 2px;
    width: 6px;
    height: 10px;
  }
  .dt-col-modal-grip {
    width: 24px;
    font-size: 14px;
  }
  .dt-col-modal-close {
    width: 44px;
    height: 44px;
  }
  .dt-col-modal-zoom-opt {
    padding: 12px;
    min-height: 44px;
  }

  /* Hide zoom buttons in toolbar — zoom accessible via settings modal */
  .dt-zoom-group {
    display: none;
  }
}

/* ========== Extra small screens ========== */
@media (max-width: 480px) {
  .dt-filter-select {
    flex: 1 1 100%;
  }
}

/* ============================================
   TabTable Component (lightweight in-tab tables)
   ============================================ */

.tt {
  display: flex;
  flex-direction: column;
}

/* Toolbar */









/* No results */

/* Empty state inside TabTable */

/* Card grids inside TabTable */

tr[data-preview-url], tr[data-preview-json] { cursor: pointer; }
tr[data-preview-url]:hover td, tr[data-preview-json]:hover td { background: var(--color-bg-surface-3); }


@media (max-width: 768px) {
  .tt-toolbar { flex-wrap: wrap; }
  .tt-search { max-width: none; min-width: 0; flex-basis: 100%; }
  .tt-cards-grid { grid-template-columns: 1fr; }
  .tt-view-toggle { margin-left: 0; }
}

/* ============================================
   KanbanBoard Component
   ============================================ */

.kanban {
    display: flex;
    gap: var(--space-4);
    overflow-x: auto;
    padding: var(--space-4);
    min-height: 400px;
    max-width: 100%;
    cursor: grab;
}

.kanban.is-panning {
    cursor: grabbing;
    user-select: none;
}

/* Thin scrollbar — panning is the primary navigation */
.kanban::-webkit-scrollbar { height: 6px; }
.kanban::-webkit-scrollbar-track { background: transparent; }
.kanban::-webkit-scrollbar-thumb { background: var(--color-border-default); border-radius: 3px; }
.kanban::-webkit-scrollbar-thumb:hover { background: var(--color-text-muted); }
.kanban { scrollbar-width: thin; scrollbar-color: var(--color-border-default) transparent; }

/* --- Column --- */





/* --- Card list --- */



/* DnD placeholder — shows where card will land */

/* kanban-card + dt-card + entity-card styles → admin-card-style.css */

/* kanban-card visual styles removed — now in admin-card-style.css */
/* Keep kanban DnD animations + placeholders + column layout below */

/* Kanban DnD: placeholders + animations (card visuals in admin-card-style.css) */



/* --- Column dot (next to title) --- */


/* --- Column summary footer --- */



/* --- Mobile --- */

@media (max-width: 768px) {
    .kanban-column {
        flex: 0 0 260px;
        min-width: 260px;
    }
    .kanban-card-inner {
        padding: 12px 14px;
    }
}

/* ============================================
   Entity Tabs — horizontal strip of filter tabs
   Used by: Tasks and other entity filters
   ============================================ */



/* ============================================
   CalendarView Component
   ============================================ */




/* Month grid */


















/* Week grid */







/* Day view */







/* ============================================
   Channel Calendar Post Chips
   ============================================ */








/* ============================================
   Booking Slots Grid
   ============================================ */





/* Autocomplete dropdown */
.autocomplete-dropdown {
    position: absolute;
    z-index: 100;
    background: var(--color-bg-surface-2);
    border: 1px solid var(--color-border-default);
    border-radius: var(--radius-sm);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    max-height: 200px;
    overflow-y: auto;
    width: 100%;
}

.autocomplete-option {
    padding: 8px 12px;
    font-size: 13px;
    cursor: pointer;
    color: var(--color-text-primary);

}

.autocomplete-option:hover {
    background: var(--color-bg-surface-3);
}

/* Calendar responsive */
@media (max-width: 768px) {
    .cal-cell {
        min-height: 60px;
        padding: 2px 3px;
    }

    .cal-task {
        font-size: 10px;
        padding: 1px 3px;
    }

    .cal-grid-week {
        grid-template-columns: 1fr;
    }

    .cal-week-day {
        min-height: auto;
        border-right: none;
        border-bottom: 1px solid var(--color-border-default);
    }
}

/* ============================================
   BookingCalendar — Day/Week specialist view
   ============================================ */


/* Toolbar */












/* Grid */


/* Header */











/* Body rows */








/* Booking block */









/* Quick action buttons on booking */





/* Specialist picker */








/* Attendance summary */





/* Attendance list */









/* Responsive */
@media (max-width: 768px) {
    .bc-header {
        grid-template-columns: 40px repeat(var(--bc-cols, 1), 1fr);
    }
    .bc-row {
        grid-template-columns: 40px repeat(var(--bc-cols, 1), 1fr);
    }
    .bc-time {
        font-size: 10px;
        padding: 2px;
    }
    .bc-header-col {
        min-width: 80px;
        padding: 6px 3px;
    }
    .bc-header-avatar {
        width: 28px;
        height: 28px;
        font-size: 11px;
    }
    .bc-attendance-item {
        grid-template-columns: 40px 1fr auto;
    }
    .bc-att-title, .bc-att-spec {
        display: none;
    }
}

/* Calendar + Gantt view modes — moved to xacss/components/datatable-views.css (Фаза D4, 2026-04-22) */

/* Card styles moved to admin-card-style.css */

/* ── ShowcaseCard (same animation pattern as dt-wrap + dt-widget-sidebar) ── */

/* Main occupies full grid, widgets underneath — same as dt-wrap > .dt pattern */

/* Widgets grid 2×2 — always in DOM, animated like dt-widget-sidebar */

/* Each widget — dt style, stretches to fill row */

/* Main — same .dt style: bg-secondary, border, radius-lg */

/* Toolbar — same as dt-toolbar */

/* Content: info (flex) + preview (fixed width) */


/* Preview — desktop: 200×200 */

/* Preview — mobile: 100px wide, 150px tall (75% of desktop height) */

/* Responsive */
@media (max-width: 768px) {
  .sc-card.sc-card--expanded { grid-template-columns: 1fr; }
  .sc-card-widgets { display: none !important; }
  .sc-card-content { grid-template-columns: 1fr; }
  .sc-card-preview { border-left: 0; border-top: 1px solid var(--color-border-default); }
}


/* source: ./xacss/components/settings-show.css */
/* Shared React settings shell. Keep settings layout out of DataTable ownership. */

.settings-stat-grid,
.settings-demo-actions {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--space-3);
}

.settings-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  width: 100%;
  padding: 10px 12px;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
}

button.settings-section-header { cursor: pointer; }

.settings-section-title {
  color: var(--color-text-muted);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.settings-stat-card {
  padding: 10px 12px;
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-sm);
  background: var(--color-bg-surface-3);
}

.settings-stat-card-label {
  margin-bottom: 2px;
  color: var(--color-text-muted);
  font-size: 10px;
}

.settings-stat-card-value {
  color: var(--color-text-primary);
  font-size: 18px;
  font-weight: 700;
  line-height: 1.2;
}

.settings-stat-card-sub {
  margin-top: 2px;
  color: var(--color-text-muted);
  font-size: 11px;
}

.settings-demo-actions { align-items: start; }

.settings-result-list {
  display: grid;
  gap: var(--space-2);
}

.settings-result-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  min-height: 32px;
  padding: 6px 0;
  border-top: 1px solid var(--color-border-subtle);
}

.settings-result-row span:last-child {
  overflow-wrap: anywhere;
  text-align: right;
}

.settings-show-shell {
  flex: 1 1 auto;
  width: 100%;
  min-height: 0;
}

.settings-show-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 300px);
  align-items: start;
  gap: var(--space-6, 24px);
  width: 100%;
}

.settings-show-layout--without-sidebar { grid-template-columns: minmax(0, 1fr); }

.settings-show-main,
.settings-show-sidebar { min-width: 0; }

.settings-show-main {
  display: flex;
  flex-direction: column;
}

.settings-show-content {
  display: flex;
  flex-direction: column;
  gap: var(--space-4, 16px);
  min-width: 0;
  overflow: visible;
}

.settings-show-sidebar {
  display: flex;
  flex-direction: column;
  align-self: start;
  gap: var(--space-3, 12px);
}

.settings-show-panel { width: 100%; }
.settings-show-sidebar .settings-context-sidebar { max-height: none; }

.settings-show-panel .entity-show-panel-body[data-layout="list"] {
  display: flex;
  flex-direction: column;
  gap: var(--space-2, 8px);
}

.settings-show-sidebar .settings-sidebar {
  display: flex;
  flex-direction: column;
  gap: var(--space-3, 12px);
  min-width: 0;
  padding: var(--space-2, 8px);
}

.settings-show-sidebar .settings-sidebar-group {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.settings-show-sidebar .settings-sidebar-title {
  overflow: hidden;
  padding: 3px 6px 5px;
  color: var(--color-text-muted, #94a3b8);
  font-size: 10px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.04em;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.settings-show-sidebar .settings-sidebar-nav {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.settings-show-sidebar .settings-sidebar-link {
  display: flex;
  align-items: center;
  min-width: 0;
  min-height: 30px;
  padding: 6px 8px;
  overflow-wrap: anywhere;
  border: 1px solid transparent;
  border-radius: var(--radius-sm, 6px);
  color: var(--color-text-muted, #94a3b8);
  font-size: 12px;
  font-weight: 500;
  line-height: 1.3;
  text-decoration: none;
}

.settings-show-sidebar .settings-sidebar-link:hover {
  background: var(--color-bg-hover, rgba(255, 255, 255, 0.05));
  color: var(--color-text-primary, #f8fafc);
}

.settings-show-sidebar .settings-sidebar-link.is-active {
  border-color: var(--entity-show-tab-active-border, #2A2B2B);
  background: var(--entity-show-tab-active-bg, #202021);
  color: var(--color-text-primary, #f8fafc);
}

.settings-show-content > .dt-toolbar {
  border: 1px solid var(--color-border-entity-panel, #1F2022);
  border-radius: var(--radius-md);
  background: var(--color-bg-entity-panel, #171718);
}

.settings-hub {
  display: flex;
  flex-direction: column;
  gap: 28px;
  width: min(100%, 1080px);
  margin-inline: auto;
}

.settings-hub-section {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 10px;
}

.settings-hub-section-title {
  margin: 0;
  color: var(--color-text-primary);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.3;
}

.settings-hub-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: stretch;
  gap: 12px 14px;
}

.settings-hub-card {
  min-width: 0;
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-md);
  background: var(--color-bg-surface);
  --settings-hub-card-tone: var(--color-accent);
}

.settings-hub-card.is-violet { --settings-hub-card-tone: var(--color-draft); }
.settings-hub-card.is-rose { --settings-hub-card-tone: var(--color-brand-primary); }
.settings-hub-card.is-blue { --settings-hub-card-tone: var(--color-accent); }
.settings-hub-card.is-green { --settings-hub-card-tone: var(--color-success); }

.settings-hub-card-link {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  align-items: start;
  gap: 10px;
  min-height: 70px;
  height: 100%;
  padding: 11px 12px;
  color: inherit;
  text-decoration: none;
}

.settings-hub-card-link:hover {
  background: var(--color-bg-hover);
}

.settings-hub-card-link:focus-visible {
  outline: 2px solid var(--color-border-focus);
  outline-offset: 2px;
}

.settings-hub-card-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--settings-hub-card-tone) 30%, var(--color-bg-surface-2));
  color: color-mix(in srgb, var(--settings-hub-card-tone) 72%, var(--color-text-primary));
}

.settings-hub-card-copy {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 3px;
}

.settings-hub-card-title,
.settings-hub-card-description {
  display: -webkit-box;
  min-width: 0;
  overflow: hidden;
  -webkit-box-orient: vertical;
}

.settings-hub-card-title {
  color: var(--color-text-primary);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.25;
  -webkit-line-clamp: 1;
}

.settings-hub-card-description {
  color: var(--color-text-tertiary);
  font-size: 10px;
  line-height: 1.35;
  -webkit-line-clamp: 2;
}

.settings-compact-form .settings-form-group {
  width: min(100%, 720px);
}

.settings-mobile-nav { display: none; }

@media (max-width: 900px) {
  .settings-show-layout { grid-template-columns: 1fr; }
  .settings-show-layout > .settings-show-sidebar { display: none; }
  .settings-hub { width: 100%; }
  .settings-hub-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .settings-mobile-nav {
    display: flex;
    flex-direction: column;
    gap: 6px;
  }

  .settings-mobile-nav-label {
    color: var(--color-text-muted, #94a3b8);
    font-size: 11px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: 0.04em;
    text-transform: uppercase;
  }

  .settings-mobile-nav-select { width: 100%; }
}

@media (max-width: 620px) {
  .settings-hub { gap: 22px; }
  .settings-hub-grid { grid-template-columns: 1fr; }
}


/* source: ./xacss/components/show-page-fields.css */
/*
 * Show Page field internals (field, field-edit, field-label, field-value, editable/editing states).
 * Фаза C2, Claude 2026-04-22.
 *
 * Текущий source of truth:
 *   public/assets/admin/css/admin-layout-show.css (sp-show-field*, sp-show-fields)
 *
 * Перенос планируется в Фазе D для активных entity show pages.
 *
 * Прогнозируемые селекторы (см. audit):
 *   .sp-show-field           — одно поле (контейнер)
 *   .sp-show-field-label     — заголовок поля
 *   .sp-show-field-value     — значение поля
 *   .sp-show-field-edit      — inline-edit control
 *   .sp-show-field-edit-icon — иконка редактирования
 *   .sp-show-field-editable  — state "можно редактировать"
 *   .sp-show-field-editing   — state "редактируется сейчас"
 *   .sp-show-field-group-title — заголовок группы полей
 *   .sp-show-fields          — контейнер-список
 *   .sp-show-extra-toggle    — toggle "показать дополнительные поля"
 */


/* source: ./xacss/components/show-page-layout-controls.css */
/*
 * Show Page layout customization panel (sp-layout-*) + sections (sp-section-*).
 * Фаза C2, Claude 2026-04-22.
 *
 * Это settings-панель для настройки разметки Show Page (для админа).
 *
 * Текущий source of truth:
 *   public/assets/admin/css/admin-layout-show.css
 *
 * Перенос планируется в Фазе D.
 *
 * Прогнозируемые селекторы:
 *   Customization panel:
 *     .sp-layout-btn-row, .sp-layout-card-header, .sp-layout-card-title,
 *     .sp-layout-grip, .sp-layout-panel-card, .sp-layout-pos-btn,
 *     .sp-layout-scope, .sp-layout-scope-item
 *   Sections:
 *     .sp-section-count, .sp-section-title (общий lay-контракт уже в layouts/show.css)
 *
 * ВНИМАНИЕ: классы вида .sp-ml-<N>, .sp-mr-<N> — dynamic utility prefix, вероятно
 * генерируются в JS/React. Они НЕ переносятся — либо остаются в admin-layout-show.css,
 * либо заменяются на `u-ml-*` utility слой в отдельном slice.
 */


/* source: ./xacss/components/panelstack-shell.css */
/*
 * PanelStack shell (Фаза C3a, Claude 2026-04-22).
 *
 * Layout-контракт и согласованные motion-параметры для slide-out панелей.
 * Остальные визуальные правила (background/border/shadow/hover/focus)
 * остаются в legacy-слое до полной миграции.
 *
 * Структура DOM (из resources/js/PanelStack/):
 *   .ps-overlay                 — затемнение за панелью (fixed fullscreen)
 *   .ps-panel                   — root контейнер панели
 *     .ps-header / .ps-title / .ps-header-actions
 *     .ps-body
 *       .ps-content
 *         .ps-details / .ps-fields / .ps-sections (specific, C3c)
 *       .ps-right
 *         .ps-tabs-inline
 *           .ps-tab-btn / .ps-tab-badge
 *         .ps-right-tabs (tab list)
 *         .ps-right-content
 *     .ps-empty / .ps-loading / .ps-action
 *
 * Алиасы specificity 0 через :where() — никакой переопределения старых стилей.
 */

:where(.c-panel-stack, .ps-panel) {
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
    transition: transform 240ms var(--ease-standard, ease);
    will-change: transform;
}

:where(.c-panel-stack__overlay, .ps-overlay) {
    position: fixed;
    inset: 0;
    pointer-events: auto;
    transition:
        background-color 240ms var(--ease-standard, ease),
        backdrop-filter 240ms var(--ease-standard, ease);
}

@media (prefers-reduced-motion: reduce) {
    :where(.c-panel-stack, .ps-panel),
    :where(.c-panel-stack__overlay, .ps-overlay) {
        transition-duration: 1ms;
    }
}

:where(.c-panel-stack__page, .ps-page) {
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
    flex: 1;
}

:where(.c-panel-stack__header, .ps-header) {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3, 12px);
    min-height: 52px;
    padding: 10px 12px 10px 16px;
    border-bottom: 1px solid var(--color-border-default);
    flex: 0 0 auto;
}

.ps-header-leading,
:where(.c-panel-stack__header-actions, .ps-header-actions) {
    display: flex;
    align-items: center;
    min-width: 0;
}

.ps-header-leading {
    gap: var(--space-2, 8px);
    flex: 1;
}

:where(.c-panel-stack__title, .ps-title) {
    min-width: 0;
    margin: 0;
    overflow: hidden;
    color: var(--color-text-primary);
    font-size: var(--font-size-md, 14px);
    font-weight: 600;
    line-height: 1.35;
    text-overflow: ellipsis;
    white-space: nowrap;
}

:where(.c-panel-stack__header-actions, .ps-header-actions) {
    gap: var(--space-1, 4px);
    flex: 0 0 auto;
}

:where(.c-panel-stack__body, .ps-body) {
    flex: 1;
    min-width: 0;
    min-height: 0;
    overflow: auto;
}

/* .ps-content — layout определяется legacy (.ps-content.is-two-col vs default).
   В shell только min-width как safety. Добавление display:flex + gap ломает
   spacing с .ps-tabs-inline { margin: -16px }. */
:where(.c-panel-stack__content, .ps-content) {
    min-width: 0;
}

/* .ps-right — layout задаётся legacy в .ps-content.is-two-col .ps-right.
   Shell-alias оставляем только для min-width safety. */
:where(.c-panel-stack__right, .ps-right) {
    min-width: 0;
    min-height: 0;
}

:where(.c-panel-stack__right-content, .ps-right-content) {
    flex: 1;
    min-width: 0;
    min-height: 0;
    overflow: auto;
}

:where(.c-panel-stack__right-tabs, .ps-right-tabs) {
    display: flex;
    min-width: 0;
}

:where(.c-panel-stack__tabs, .ps-tabs-inline) {
    min-width: 0;
}

:where(.c-panel-stack__tab, .ps-tab-btn) {
    min-width: 0;
}

:where(.c-panel-stack__tab-badge, .ps-tab-badge) {
    min-width: 0;
}

:where(.c-panel-stack__tab-content, .ps-tab-content) {
    min-width: 0;
}

:where(.c-panel-stack__action, .ps-action) {
    min-width: 0;
}

:where(.c-panel-stack__empty, .ps-empty) {
    min-width: 0;
}

:where(.c-panel-stack__loading, .ps-loading) {
    min-width: 0;
}

:where(.c-panel-stack__detail-block, .ps-detail-block) {
    min-width: 0;
}


/* source: ./xacss/components/panelstack-content.css */
/*
 * PanelStack content (Фаза D1.2, Claude 2026-04-22).
 *
 * Общий для всех модулей контент PanelStack — форма, автокомплит, totals, actions.
 * Используется в Contacts / Tasks / Chats / Channels / Profile.
 *
 * Module-specific блоки — в modules/<Module>/Resources/css/*.
 * Анимации/keyframes — в panelstack-dynamics.css.
 *
 * Политика переноса из legacy (admin-layout.css): 1:1 fidelity.
 * Унификация цветовых токенов — отдельный slice после визуального подтверждения.
 */

/* ── Form panel (выезжающая форма создания/редактирования) ── */

.ps-form-panel {
    width: 520px;
}

.ps-form-panel.is-expanded {
    width: min(860px, calc(100vw - 80px));
}

.ps-form-content {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.ps-form-content.is-code-editor-panel {
    flex: 1;
    min-height: 0;
    height: 100%;
}

.ps-form-section {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.ps-form-section-title {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 600;
    color: var(--color-text-secondary);
    padding-bottom: 4px;
    border-bottom: 1px solid var(--color-border-default);
}

.ps-form-row {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.ps-form-row.is-code-editor-row {
    flex: 1 1 auto;
    min-height: 0;
}

.ps-form-row-animated {
    display: flex;
    flex-direction: column;
    gap: 4px;
    overflow: hidden;
    max-height: 120px;
    opacity: 1;

}

.ps-form-row-animated.is-hidden {
    max-height: 0;
    opacity: 0;
    margin: 0;
    padding: 0;
    pointer-events: none;
}

.ps-form-label {
    font-size: 9px;
    font-weight: 300;
    color: var(--color-text-muted);
    letter-spacing: 0;
    margin-bottom: 0;
    display: flex;
    align-items: center;
    gap: 10px;
}

.ps-form-label::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--color-border-default);
}

.ps-form-input {
    width: 100%;
    padding: 7px 10px;
    background: var(--color-bg-surface-2);
    border: 1px solid var(--color-border-default);
    border-radius: var(--radius-sm);
    color: var(--color-text-primary);
    font-size: 14px;
    outline: none;

}

.ps-form-input:focus {
    border-color: var(--color-accent);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-draft) 12%, transparent);
}

.ps-form-error {
    font-size: 12px;
    color: var(--color-danger);
    margin-top: 2px;
}

.ps-form-row.has-error .ps-form-input {
    border-color: var(--color-danger);
}

.ps-form-item-row {
    padding: 8px;
    border: 1px solid var(--color-border-default);
    border-radius: var(--radius-sm);
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.ps-form-item-main .ps-form-input {
    font-weight: 500;
}

.ps-form-item-nums {
    display: flex;
    align-items: center;
    gap: 6px;
}

.ps-form-num {
    width: 80px !important;
    flex: none;
    text-align: right;
    -moz-appearance: textfield;
}

.ps-form-num::-webkit-outer-spin-button,
.ps-form-num::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.ps-form-content input[type="number"] {
    -moz-appearance: textfield;
}

.ps-form-content input[type="number"]::-webkit-outer-spin-button,
.ps-form-content input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.ps-form-item-total {
    font-size: 13px;
    font-weight: 600;
    color: var(--color-text-primary);
    margin-left: auto;
    min-width: 80px;
    text-align: right;
}

/* ── Autocomplete dropdown ── */

.ps-form-autocomplete {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 50;
    background: var(--color-bg-elevated);
    border: 1px solid var(--color-border-default);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-md);
    max-height: 180px;
    overflow-y: auto;
}

.ps-route-modal {
    position: fixed;
    top: 10px;
    right: 10px;
    bottom: 10px;
}

.route-show-modal {
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
    background: var(--color-bg-content-wrapper);
    border: 1px solid var(--color-border-content-wrapper);
    border-radius: var(--radius-md);
    overflow: hidden;
}

.route-show-modal-body {
    flex: 1;
    min-width: 0;
    min-height: 0;
    overflow: auto;
}

@media (max-width: 720px) {
    .ps-route-modal {
        top: 6px;
        right: 6px;
        bottom: 6px;
        left: 6px;
        width: auto !important;
        max-width: none;
    }
}

.sp-show-panel-body {
    padding: var(--space-4);
}

.ps-form-autocomplete-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 10px;
    cursor: pointer;
    font-size: 13px;

}

.ps-form-autocomplete-item:hover {
    background: var(--color-bg-surface-3);
}

.ps-form-autocomplete-name {
    font-weight: 500;
    flex: 1;
}

.ps-form-autocomplete-sku {
    font-size: 12px;
    color: var(--color-text-muted);
}

.ps-form-autocomplete-price {
    font-weight: 600;
    color: var(--color-text-primary);
}

/* ── Add-button, totals, actions ── */

.ps-form-add-btn {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 6px 10px;
    font-size: 13px;
    color: var(--color-accent);
    background: none;
    border: 1px dashed var(--color-border-default);
    border-radius: var(--radius-sm);
    cursor: pointer;

}

.ps-form-add-btn:hover {
    border-color: var(--color-accent);
    background: color-mix(in srgb, var(--color-draft) 5%, transparent);
}

.ps-form-totals {
    border-top: 1px solid var(--color-border-default);
    padding-top: 12px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.ps-form-total-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 13px;
    color: var(--color-text-secondary);
}

.ps-form-total-final {
    border-top: 2px solid var(--color-border-default);
    padding-top: 8px;
    margin-top: 4px;
    font-size: 16px;
    font-weight: 700;
    color: var(--color-text-primary);
}

.ps-form-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding: 12px 16px;
    border-top: 1px solid var(--color-border-default);
    margin-top: auto;
    flex-shrink: 0;
    background: var(--color-bg-surface-2);
    border-radius: 0 0 var(--radius-lg, 12px) var(--radius-lg, 12px);
}

/* ── Details / Fields (inline edit) — перенесено из admin-layout.css:1952-2046 (Фаза D1.3) ── */

.ps-details-compact {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.ps-fields {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.ps-field {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 8px 10px;
    border-radius: var(--radius-sm);

}

.ps-field.is-editable {
    cursor: pointer;
}

.ps-field.is-editable:hover {
    background: var(--color-bg-surface-3);
}

.ps-field-label {
    font-size: 9px;
    font-weight: 300;
    color: var(--color-text-muted);
    letter-spacing: 0;
    margin-bottom: 0;
    display: flex;
    align-items: center;
    gap: 10px;
}

.ps-field-label::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--color-border-default);
}

.ps-field-value {
    font-size: 14px;
    color: var(--color-text-primary);
    display: flex;
    align-items: center;
    gap: 6px;
    min-height: 22px;
    flex-wrap: wrap;
}

.ps-field-value a,
.ps-entity-link {
    color: var(--color-accent);
    text-decoration: none;
    cursor: pointer;
}

.ps-field-value a:hover,
.ps-entity-link:hover {
    text-decoration: underline;
}

.ps-field-edit-icon {
    opacity: 0;
    color: var(--color-text-muted);

    flex-shrink: 0;
}

.ps-field.is-editable:hover .ps-field-edit-icon {
    opacity: 1;
}

.ps-field-editing {
    background: var(--color-bg-surface-3);
}

.ps-field-edit {
    position: relative;
}

.ps-field-input {
    width: 100%;
    padding: 6px 8px;
    background: var(--color-bg-input);
    border: 1px solid var(--color-accent);
    border-radius: var(--radius-sm);
    color: var(--color-text-primary);
    font-size: 14px;
    outline: none;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-brand-electric) 15%, transparent);
}

.ps-field-saving {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    width: 14px;
    height: 14px;
    border: 2px solid var(--color-border-default);
    border-top-color: var(--color-accent);
    border-radius: 50%;
    animation: dt-spin 0.6s linear infinite;
}

/* ── Relations — перенесено из admin-layout.css:2052-2093 ── */

.ps-relations {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.ps-relation-group {
    border: 1px solid var(--color-border-default);
    border-radius: var(--radius-sm);
    overflow: hidden;
}

.ps-relation-header {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 10px;
    font-size: 12px;
    font-weight: 600;
    color: var(--color-text-secondary);
    background: var(--color-bg-surface-3);

}

.ps-relation-header.is-focused {
    background: color-mix(in srgb, var(--color-accent) 15%, var(--color-bg-surface-3));
    color: var(--color-accent);
}

.ps-relation-count {
    margin-left: auto;
    background: var(--color-bg-canvas);
    padding: 1px 6px;
    border-radius: 8px;
    font-size: 11px;
}

.ps-relation-items {
    padding: 4px 0;
}

.ps-relation-card {
    padding: 8px 10px;
    cursor: pointer;

    border-bottom: 1px solid color-mix(in srgb, var(--color-border-default) 30%, transparent);
}

.ps-relation-card:last-child {
    border-bottom: none;
}

.ps-relation-card:hover {
    background: var(--color-bg-surface-3);
}

.ps-relation-card-title {
    font-size: 13px;
    font-weight: 500;
    color: var(--color-accent);
}

.ps-relation-card-sub {
    font-size: 12px;
    color: var(--color-text-muted);
}

.ps-relation-card-extra {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 4px;
}

.ps-relation-tag {
    font-size: 11px;
    padding: 1px 6px;
    border: 1px solid var(--color-border-default);
    border-radius: 4px;
    color: var(--color-text-secondary);
}

/* ── Detail block visual (layout-shell уже в panelstack-shell.css) ── */

.ps-detail-block {
    padding: 8px 10px;
}

/* ── Empty state внутри панели ── */

.ps-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px 16px;
    color: var(--color-text-muted);
    font-size: 13px;
}

/* ── Assignees chips — перенесено из admin-layout.css:2137-2152 ── */

.ps-assignees {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.ps-assignee-chip {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 4px 8px;
    border-radius: 12px;
    font-size: 12px;
    background: var(--color-bg-surface-3);
    color: var(--color-text-primary);
}

.ps-assignee-chip.is-primary {
    background: color-mix(in srgb, var(--color-draft) 10%, transparent);
    color: var(--color-accent);
    border: 1px solid color-mix(in srgb, var(--color-brand-electric) 30%, transparent);
}

.ps-assignee-remove {
    display: flex;
    cursor: pointer;
    padding: 0;
    border: none;
    background: none;
    color: inherit;
    opacity: 0.5;

}

.ps-assignee-remove:hover {
    opacity: 1;
}


/* ── .relations-* from admin-layout.css (optional-decomp, 2026-04-23) ── */

.relations-tab { display: flex; flex-direction: column; gap: 8px; }
.relations-group { border: 1px solid var(--color-border-default); border-radius: var(--radius-md); overflow: hidden; }
.relations-group.is-empty { display: none; }
.relations-group-header {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 12px; cursor: pointer; user-select: none;

}
.relations-group-header:hover { background: var(--color-bg-surface-3); }
.relations-group-label { font-weight: 500; font-size: 12px; color: var(--color-text-secondary); text-transform: uppercase; letter-spacing: 0.03em; }
.relations-group-count {
  font-size: 11px; color: var(--color-text-muted);
  background: var(--color-bg-surface-3); border-radius: 10px;
  padding: 0 6px; min-width: 18px; text-align: center; line-height: 1.5;
}
.relations-group-chevron {  color: var(--color-text-secondary); margin-left: auto; }
.relations-group.is-expanded .relations-group-chevron { transform: rotate(180deg); }
.relations-group-body { display: none; }
.relations-group.is-expanded .relations-group-body { display: block; }
.relations-cards-list { display: flex; flex-direction: column; }
.relations-tab-header { padding: 0 0 8px; }
.relations-tab-footer {
  display: flex; justify-content: center; padding-top: 0.25rem;
}


/* ── .relation-* from admin-layout.css (optional-decomp, 2026-04-23) ── */

.relation-card {
  display: block; position: relative;
  padding: 8px 12px;
  border-bottom: 1px solid var(--color-border-default);
  cursor: pointer;
  text-decoration: none; color: inherit;
}
.relation-card:last-child { border-bottom: none; }
.relation-card:hover { background: var(--color-bg-surface-3); }
.relation-card:hover .rc-title { color: var(--color-accent); }
.relation-card-add {
  display: flex; align-items: center; justify-content: center;
  border-style: dashed; border-color: var(--color-border-default);
  cursor: pointer;
  min-height: 60px; color: var(--color-text-secondary);
  background: transparent;
}
.relation-card-add:hover {
  border-color: var(--color-accent); background: var(--color-bg-surface-2);
  color: var(--color-accent);
}
.relation-wizard-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 0.5rem;
}
.relation-wizard-option {
  display: flex; align-items: center; gap: 0.5rem;
  padding: 0.75rem 1rem; border: 1px solid var(--color-border-default); border-radius: var(--radius-md);
  background: var(--color-bg-app); cursor: pointer;
  font-size: 0.85rem; color: var(--color-text-primary); text-align: left;
}
.relation-wizard-option:hover {
  border-color: var(--color-accent); background: var(--color-bg-surface-2);
}
.relation-wizard-option .icon { flex-shrink: 0; color: var(--color-accent); }


/* source: ./xacss/components/timeline.css */
/*
 * Timeline — shared component (used by Contacts, Tasks, Files, Users).
 * Фаза E2 (Claude 2026-04-22) — перенесено 1:1 из admin-layout.css:3983-4335.
 */

/* ============================================
   Timeline — Shared Component
   Used by: users, files, contacts
   ============================================ */

.timeline-controls {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  margin-bottom: var(--space-4);
}

.timeline-controls-filters {
  display: flex;
  gap: var(--space-2);
  align-items: center;
  justify-content: flex-end;
  margin-top: var(--space-2);
}

.timeline-controls-note {
  display: flex;
  gap: var(--space-2);
  align-items: flex-end;
}

.timeline-note-input {
    flex: 1;
    min-width: 0;
    position: relative;
    background: var(--color-bg-surface-3);
    border: 1px solid var(--color-border-default);
    border-radius: var(--radius-md);

}
.timeline-note-input:focus-within {
    border-color: var(--color-accent);
}
.timeline-note-input textarea {
    width: 100%;
    resize: none;
    font-size: 0.875rem;
    min-height: 80px;
    max-height: 160px;
    padding: var(--space-2) var(--space-4);
    padding-right: 68px;
    overflow-y: auto;
    background: none;
    border: none;
    outline: none;
    color: var(--color-text-primary);
    font-family: inherit;
}
.timeline-note-actions {
    position: absolute;
    right: 6px;
    top: 4px;
    display: flex;
    gap: 2px;
    align-items: center;
}
.timeline-note-send,
.timeline-note-attach {
    width: 28px;
    height: 28px;
    border: none;
    border-radius: var(--radius-sm);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;

}
.timeline-note-send {
    background: var(--color-accent);
    color: white;
    opacity: 0.6;
}
.timeline-note-send:hover { background: var(--color-accent-hover); opacity: 1; }
.timeline-note-attach {
    background: none;
    color: var(--color-text-muted);
    opacity: 0.7;
}
.timeline-note-attach:hover { color: var(--color-text-primary); opacity: 1; background: var(--color-bg-surface-3); }
.timeline-note-attach.has-files { color: var(--color-accent); opacity: 1; }
.timeline-note-files {
    padding: 0 var(--space-2) var(--space-2);
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}
.timeline-note-file-tag {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    background: var(--color-bg-surface-3);
    border-radius: var(--radius-sm);
    font-size: 0.75rem;
    color: var(--color-text-secondary);
}
.timeline-note-file-tag .btn { padding: 0; }

/* Toggle button groups (filter / per-page) */
.timeline-toggle-group {
    display: inline-flex;
    border: 1px solid var(--color-border-default);
    border-radius: var(--radius-md);
    overflow: hidden;
}
.timeline-toggle-btn {
    background: none;
    border: none;
    border-right: 1px solid var(--color-border-default);
    padding: 4px 8px;
    cursor: pointer;
    color: var(--color-text-secondary);
    font-size: 0.8125rem;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;

}
.timeline-toggle-btn:last-child { border-right: none; }
.timeline-toggle-btn:hover { background: var(--color-bg-surface-3); color: var(--color-text-primary); }
.timeline-toggle-btn.is-active {
    background: var(--color-accent);
    color: white;
}

.timeline-feed-card { overflow: hidden; }
.timeline-feed { display: flex; flex-direction: column; }
.timeline-load-more { text-align: center; padding: var(--space-4); }

.timeline-entry {
  display: flex;
  gap: 0.625rem;
  padding: var(--space-2) var(--space-4);
  border-bottom: 1px solid var(--color-border-default);

}
.timeline-entry:last-child { border-bottom: none; }
.timeline-entry:hover { background: var(--color-bg-surface-3); }

.timeline-entry-icon {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.875rem;
  border-radius: 50%;
  background: var(--color-bg-surface-3);
}

.timeline-entry-system .timeline-entry-icon {
  background: color-mix(in srgb, var(--color-accent) 10%, transparent);
}

.timeline-entry-custom .timeline-entry-icon {
  background: color-mix(in srgb, var(--color-success) 12%, transparent);
}

.timeline-entry-content { flex: 1; min-width: 0; display: flex; gap: 0.5rem; }
.timeline-entry-body { flex: 1; min-width: 0; }
.timeline-entry-text { font-size: 0.875rem; line-height: 1.4; word-break: break-word; }
.timeline-entry-custom .timeline-entry-text { white-space: pre-wrap; }
.timeline-entry-meta { margin-top: 0.25rem; font-size: 0.75rem; color: var(--color-text-secondary); }

.timeline-change { font-size: 0.813rem; margin-bottom: 0.125rem; }
.timeline-field { font-weight: 500; color: var(--color-text-secondary); }
.timeline-old { text-decoration: line-through; color: var(--color-danger); opacity: 0.7; }
.timeline-new { color: var(--color-success); font-weight: 500; }

.timeline-empty,
.timeline-loading {
  padding: 2rem 1rem;
  text-align: center;
  font-size: 0.875rem;
  color: var(--color-text-secondary);
}

.timeline-entry-actions {
  display: flex;
  gap: 0.25rem;
  flex-shrink: 0;
  opacity: 0;

}
.timeline-entry:hover .timeline-entry-actions { opacity: 1; }

.timeline-edit-textarea { margin-bottom: 0.5rem; }
.timeline-edit-buttons { display: flex; gap: 0.5rem; }

/* Timeline — note attachments */
.timeline-note-attachments {
  margin-top: 0.5rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
}
.timeline-attachment-link {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 2px 6px;
  background: var(--color-bg-surface-3);
  border-radius: var(--radius-sm);
  font-size: 0.75rem;
  color: var(--color-text-secondary);
  text-decoration: none;
}
.timeline-attachment-link:hover { color: var(--color-accent); background: color-mix(in srgb, var(--color-accent) 8%, transparent); }

/* Timeline — image thumbnails */
.timeline-attachment-thumb {
  width: 64px;
  height: 64px;
  border-radius: var(--radius-sm);
  overflow: hidden;
  cursor: pointer;
  border: 1px solid var(--color-border-default);

  flex-shrink: 0;
}
.timeline-attachment-thumb:hover {
  border-color: var(--color-accent);
  opacity: 0.85;
}
.timeline-attachment-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Image preview modal */
.image-preview-overlay {
  display: flex;
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(0,0,0,0.75);
  align-items: center;
  justify-content: center;

}
.image-preview-container {
  position: relative;
  max-width: 90vw;
  max-height: 85vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4);
}
.image-preview-container img {
  max-width: 100%;
  max-height: 75vh;
  border-radius: var(--radius-md);
  object-fit: contain;
  background: var(--color-bg-surface-2);
}
.image-preview-actions {
  display: flex;
  gap: var(--space-2);
}
.image-preview-close {
  position: absolute;
  top: -12px;
  right: -12px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--color-bg-surface-2);
  border: 1px solid var(--color-border-default);
  color: var(--color-text-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 18px;
  line-height: 1;
  z-index: 1;
}
.image-preview-close:hover { background: var(--color-danger); color: var(--color-text-inverse); border-color: var(--color-danger); }

/* File thumbnails in tables/tabs */
.file-thumb {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-sm);
  overflow: hidden;
  cursor: pointer;
  border: 1px solid var(--color-border-default);
  flex-shrink: 0;

}
.file-thumb:hover { border-color: var(--color-accent); }
.file-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.file-name-cell { display: flex; align-items: center; gap: var(--space-2); }
.file-card-icon img { width: 24px; height: 24px; object-fit: cover; border-radius: var(--radius-sm); }

/* Timeline — SVG icons inside entry-icon */
.timeline-entry-icon .icon {
  width: 14px;
  height: 14px;
}

/* (view toggle is now inside a toggle-group) */

/* Timeline — compact mode */
.timeline-compact .timeline-entry {
  padding: 0.375rem var(--space-4);
}
.timeline-compact .timeline-entry-icon {
  width: 22px;
  height: 22px;
}
.timeline-compact .timeline-entry-icon .icon {
  width: 11px;
  height: 11px;
}
.timeline-compact .timeline-entry-meta {
  display: inline;
  margin-top: 0;
  margin-left: 0.5rem;
}
.timeline-compact .timeline-entry-body {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0;
}
.timeline-compact .timeline-entry-text {
  font-size: 0.8125rem;
}
.timeline-compact .timeline-compact-text {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 400px;
  display: inline-block;
  vertical-align: bottom;
}


/* source: ./xacss/components/spotlight.css */
/*
 * Spotlight (search overlay).
 * Фаза E4 (Claude 2026-04-22) — extracted .spotlight-* rules from admin-layout.css 1:1.
 */

.spotlight-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  z-index: 9500;
  align-items: flex-start;
  justify-content: center;
  padding-top: 20vh;
}
.spotlight-overlay.is-open {
  display: flex;
}
.spotlight-dialog {
  width: 100%;
  max-width: 560px;
  background: var(--color-bg-surface-2);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-lg);
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.4);
  overflow: hidden;
}
.spotlight-header {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-4) var(--space-6);
  border-bottom: 1px solid var(--color-border-default);
}
.spotlight-header .icon {
  color: var(--color-text-muted);
  flex-shrink: 0;
}
.spotlight-input {
  flex: 1;
  background: none;
  border: none;
  outline: none;
  color: var(--color-text-primary);
  font-size: 16px;
  font-family: inherit;
}
.spotlight-input::placeholder {
  color: var(--color-text-muted);
}
.spotlight-kbd {
  font-size: 11px;
  padding: 2px 8px;
  background: var(--color-bg-surface-3);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-sm);
  color: var(--color-text-muted);
  font-family: inherit;
  flex-shrink: 0;
}
.spotlight-body {
  padding: var(--space-4) var(--space-6);
  max-height: 400px;
  overflow-y: auto;
}
.spotlight-hint {
  color: var(--color-text-muted);
  font-size: 13px;
  text-align: center;
  padding: var(--space-6) 0;
}
.spotlight-filters {
  display: flex;
  gap: 4px;
  padding: 8px var(--space-6);
  border-bottom: 1px solid var(--color-border-default);
  overflow-x: auto;
  scrollbar-width: none;
}
.spotlight-filters:empty { display: none; }
.spotlight-filters::-webkit-scrollbar { display: none; }
.spotlight-filter {
  padding: 4px 10px;
  font-size: 12px;
  font-family: inherit;
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-round);
  background: none;
  color: var(--color-text-muted);
  cursor: pointer;
  white-space: nowrap;

}
.spotlight-filter:hover { color: var(--color-text-primary); border-color: var(--color-text-muted); }
.spotlight-filter.is-active { background: var(--color-accent); color: var(--color-text-inverse); border-color: var(--color-accent); }
.spotlight-filter-count {
  font-size: 11px;
  opacity: 0.7;
}
.spotlight-group { margin-bottom: var(--space-2); }
.spotlight-group:last-child { margin-bottom: 0; }
.spotlight-group-header {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 0;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-text-muted);
}
.spotlight-group-header .icon { width: 14px; height: 14px; }
.spotlight-group-count { margin-left: auto; font-weight: 400; }
.spotlight-result {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: 8px 10px;
  border-radius: var(--radius-md);
  text-decoration: none;
  color: var(--color-text-primary);
  cursor: pointer;

}
.spotlight-result:hover,
.spotlight-result.is-active {
  background: var(--color-bg-surface-3);
}
.spotlight-result-text { flex: 1; min-width: 0; }
.spotlight-result-title {
  font-size: 14px;
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.spotlight-result-subtitle {
  font-size: 12px;
  color: var(--color-text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.spotlight-result mark {
  background: rgba(var(--color-accent-rgb, 59, 130, 246), 0.25);
  color: inherit;
  border-radius: 2px;
  padding: 0 1px;
}
.spotlight-result-arrow {
  width: 14px; height: 14px;
  color: var(--color-text-muted);
  opacity: 0;
  flex-shrink: 0;

}
.spotlight-result:hover .spotlight-result-arrow,
.spotlight-result.is-active .spotlight-result-arrow { opacity: 1; }
.spotlight-loading {
  display: flex;
  justify-content: center;
  padding: var(--space-8) 0;
}
.spotlight-spinner {
  width: 24px; height: 24px;
  border: 2px solid var(--color-border-default);
  border-top-color: var(--color-accent);
  border-radius: 50%;
  animation: spotlight-spin 0.6s linear infinite;
}
.spotlight-empty {
  text-align: center;
  padding: var(--space-8) 0;
  color: var(--color-text-muted);
  font-size: 13px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.spotlight-recents-header {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-text-muted);
  padding: 4px 0 8px;
}
.spotlight-recent-item {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 6px 10px;
  border: none;
  background: none;
  color: var(--color-text-primary);
  font-size: 14px;
  font-family: inherit;
  border-radius: var(--radius-md);
  cursor: pointer;
  text-align: left;
}
.spotlight-recent-item:hover { background: var(--color-bg-surface-3); }
.spotlight-recent-item .icon { width: 14px; height: 14px; color: var(--color-text-muted); }


/* source: ./xacss/components/import-export.css */
/*
 * Import/Export wizard (dropzones, error rows).
 * Фаза E4 (Claude 2026-04-22) — extracted .ie-* rules from admin-layout.css 1:1.
 */

.ie-page { max-width: 720px; }
.ie-hint {
  font-size: 0.875rem;
  color: var(--color-text-secondary);
  margin-bottom: var(--space-4);
}
.ie-toggle-row {
  display: flex;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
}
.ie-fields-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: var(--space-2);
  margin-bottom: var(--space-6);
}
.ie-field-item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  background: var(--color-bg-surface-3);
  border-radius: var(--radius-md);
  font-size: 0.875rem;
  cursor: pointer;

}
.ie-field-item:hover { background: var(--color-border-default); }
.ie-field-item input[type="checkbox"] { accent-color: var(--color-accent); }
.ie-steps {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  margin-bottom: var(--space-8);
}
.ie-step {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  color: var(--color-text-muted);
  font-size: 0.875rem;
}
.ie-step-num {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--color-bg-surface-3);
  font-weight: 600;
  font-size: 0.75rem;

}
.ie-step.is-active .ie-step-num {
  background: var(--color-accent);
  color: white;
}
.ie-step.is-active { color: var(--color-text-primary); }
.ie-step.is-done .ie-step-num {
  background: var(--color-success);
  color: white;
}
.ie-step.is-done { color: var(--color-success); }
.ie-step-line {
  flex: 0 0 32px;
  height: 2px;
  background: var(--color-border-default);
  border-radius: 1px;
}
.ie-dropzone {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-8);
  border: 2px dashed var(--color-border-default);
  border-radius: var(--radius-lg);
  cursor: pointer;
  text-align: center;

}
.ie-dropzone:hover,
.ie-dropzone.is-dragover {
  border-color: var(--color-accent);
  background: color-mix(in srgb, var(--color-accent) 4%, transparent);
}
.ie-dropzone .icon { color: var(--color-text-muted); }
.ie-dropzone p { font-size: 0.875rem; margin: 0; }
.ie-dropzone-hint { font-size: 0.75rem; color: var(--color-text-muted); }
.ie-upload-status {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-4);
  font-size: 0.875rem;
  color: var(--color-text-secondary);
}
.ie-mapping-table-wrap {
  overflow-x: auto;
  margin-bottom: var(--space-6);
}
.ie-mapping-table {
  width: 100%;
  border-collapse: collapse;
}
.ie-mapping-table th,
.ie-mapping-table td {
  padding: var(--space-2) var(--space-4);
  text-align: left;
  border-bottom: 1px solid var(--color-border-default);
  font-size: 0.875rem;
}
.ie-mapping-table th {
  font-weight: 600;
  color: var(--color-text-secondary);
  background: var(--color-bg-surface-2);
}
.ie-preview-section { margin-bottom: var(--space-6); }
.ie-preview-section h4 { font-size: 0.875rem; font-weight: 600; margin-bottom: var(--space-2); }
.ie-preview-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-md);
}
.ie-preview-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.8125rem;
}
.ie-preview-table th,
.ie-preview-table td {
  padding: var(--space-1) var(--space-2);
  text-align: left;
  border-bottom: 1px solid var(--color-border-default);
  white-space: nowrap;
}
.ie-preview-table th {
  background: var(--color-bg-surface-3);
  font-weight: 600;
  color: var(--color-text-secondary);
}
.ie-result-summary {
  display: flex;
  gap: var(--space-6);
  justify-content: center;
  margin-bottom: var(--space-6);
}
.ie-result-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-1);
}
.ie-result-stat-value {
  font-size: 2rem;
  font-weight: 700;
}
.ie-result-stat--success .ie-result-stat-value { color: var(--color-success); }
.ie-result-stat--error .ie-result-stat-value { color: var(--color-danger); }
.ie-result-stat-label {
  font-size: 0.875rem;
  color: var(--color-text-secondary);
}
.ie-result-message {
  text-align: center;
  padding: var(--space-4);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-4);
  font-size: 0.875rem;
}
.ie-result-message--success {
  background: color-mix(in srgb, var(--color-success) 10%, transparent);
  color: var(--color-success);
}
.ie-errors-list {
  max-height: 300px;
  overflow-y: auto;
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-md);
}
.ie-error-item {
  display: flex;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  border-bottom: 1px solid var(--color-border-default);
  font-size: 0.8125rem;
}
.ie-error-item:last-child { border-bottom: none; }
.ie-error-row { font-weight: 600; color: var(--color-danger); white-space: nowrap; }
.ie-error-msg { color: var(--color-text-secondary); }

/* Preview heading inside step-2 (compact margin). */
.ie-preview-heading { margin-bottom: 0.5rem; }

/* Result block — centered hero. */
.ie-result-hero { text-align: center; padding: 2rem 0; }
.ie-result-icon { color: var(--color-success); }
.ie-result-summary-text {
  margin-top: 0.5rem;
  color: var(--color-text-secondary);
}
.ie-errors-block {
  margin-top: 1rem;
  text-align: left;
}
.ie-errors-list-compact {
  margin-top: 0.5rem;
  font-size: 0.8125rem;
}

/* Export-form intro paragraph. */
.ie-export-intro {
  margin-bottom: 0.75rem;
  color: var(--color-text-secondary);
}

/* Export-form actions row (select-all/deselect/counter). */
.ie-export-actions {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 1rem;
}

/* Counter span inside export actions row. */
.ie-export-counter {
  color: var(--color-text-secondary);
  align-self: center;
  font-size: 0.8125rem;
}


/* source: ./xacss/components/detail-fields.css */
/*
 * Detail fields (common for entity show pages).
 * Фаза E4 (Claude 2026-04-22) — extracted .detail-* rules from admin-layout.css 1:1.
 */

.detail-list { display: grid; grid-template-columns: 120px 1fr; gap: 0.375rem 0.75rem; font-size: 0.875rem; }
.detail-list dt { color: var(--color-text-secondary); padding: 2px 0; }
.detail-list dd { margin: 0; padding: 2px 0; display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.detail-list-full { grid-column: 1 / -1; }
.detail-taxonomy {
    display: inline-flex;
    align-items: center;
    gap: 0;
}
.detail-taxonomy .detail-dot {
    margin-right: 7px;
}
.detail-taxonomy-label {
    margin-left: 0;
}
.detail-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}
.detail-overdue-icon {
    color: var(--color-danger);
    cursor: help;
    flex-shrink: 0;
}
.detail-fields-v2 { display: flex; flex-direction: column; gap: 0.75rem; }
.detail-field-item { display: flex; flex-direction: column; gap: 0.125rem; }
.detail-field-label { font-size: 0.75rem; color: var(--color-text-muted); line-height: 1.2; }
.detail-field-value { font-size: 0.875rem; color: var(--color-text-primary); line-height: 1.4; display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.detail-field-value a { color: var(--color-brand-primary); text-decoration: none; }
.detail-field-value a:hover { text-decoration: underline; }
.detail-field-sub { display: block; color: var(--color-text-muted); font-size: 0.75rem; }
.detail-field-empty { color: var(--color-text-muted); font-size: 0.8125rem; }
.detail-field-item.is-empty .detail-field-label { color: var(--color-text-muted); }
.detail-field-phone-number { font-size: 0.875rem; }
.detail-field-phone-meta { display: flex; align-items: center; gap: 0.375rem; font-size: 0.75rem; color: var(--color-text-muted); margin-top: 0.125rem; width: 100%; }
.detail-field-tz { background: var(--color-bg-surface); padding: 1px 6px; border-radius: var(--radius-sm); font-size: 0.6875rem; white-space: nowrap; }
.detail-field-region { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.detail-fields-extra { border-top: 1px solid var(--color-border-subtle); padding-top: 0.5rem; margin-top: 0.25rem; }
.detail-fields-toggle { display: flex; align-items: center; gap: 0.25rem; background: none; border: none; padding: 0; font-size: 0.8125rem; color: var(--color-text-secondary); cursor: pointer; width: 100%; }
.detail-fields-toggle:hover { color: var(--color-text-primary); }
.detail-fields-toggle-icon {  flex-shrink: 0; }
.detail-fields-toggle-count { margin-left: auto; font-size: 0.6875rem; background: var(--color-bg-surface); padding: 0 6px; border-radius: 10px; line-height: 1.6; }
.detail-fields-extra-content { display: none; flex-direction: column; gap: 0.75rem; padding-top: 0.75rem; }
.detail-fields-extra.is-open .detail-fields-toggle-icon { transform: rotate(90deg); }
.detail-fields-extra.is-open .detail-fields-extra-content { display: flex; }


/* source: ./xacss/components/wall.css */
/*
 * Activity wall / feed (Linear-like note threads).
 */

.wall {
  display: flex;
  flex-direction: column;
  gap: var(--space-4, 16px);
  color: var(--color-text-primary);
}

.wall-load-more {
  padding: var(--space-3, 12px);
  text-align: center;
}

.wall-thread-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-4, 16px);
}

.wall-thread-card,
.wall-composer {
  border: 1px solid var(--color-border-entity-panel, #1F2022);
  border-radius: var(--radius-md);
  background: var(--color-bg-entity-panel, #171718);
}

.wall-thread-card {
  overflow: hidden;
}

.wall-entry {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  gap: var(--space-2, 8px);
  padding: 16px;
}

.wall-entry.is-reply {
  padding: 12px 16px 14px;
  border-top: 1px solid var(--color-border-entity-panel, #1F2022);
}

.wall-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  margin-top: 1px;
  border-radius: var(--radius-round);
  background: var(--color-accent, #6366f1);
  color: #fff;
  font-size: 8px;
  font-weight: 700;
  line-height: 1;
}

.wall-entry-content {
  position: relative;
  min-width: 0;
}

.wall-entry-header {
  display: flex;
  align-items: baseline;
  gap: var(--space-2, 8px);
  min-width: 0;
}

.wall-entry-author {
  color: var(--color-text-primary);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.25;
}

.wall-entry-time {
  color: var(--color-text-muted);
  font-size: 12px;
  line-height: 1.25;
  white-space: nowrap;
}

.wall-entry-text {
  margin-top: 10px;
  color: var(--color-text-primary);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.45;
  white-space: pre-wrap;
  word-break: break-word;
}

.wall-entry-edit {
  margin-top: var(--space-2, 8px);
}

.wall-entry-edit .wall-composer-textarea {
  min-height: 68px;
  padding: var(--space-2, 8px);
  border: 1px solid var(--color-border-entity-panel, #1F2022);
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--color-bg-entity-panel, #171718) 76%, #ffffff);
}

.wall-entry-edit-actions {
  display: flex;
  gap: var(--space-2, 8px);
  margin-top: var(--space-2, 8px);
}

.wall-entry-files,
.wall-entry-relations,
.wall-composer-files,
.wall-composer-relations {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2, 8px);
  margin-top: var(--space-2, 8px);
}

.wall-entry-file,
.wall-relation-chip,
.wall-composer-file,
.wall-composer-relation {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 100%;
  border: 1px solid var(--color-border-entity-panel, #1F2022);
  border-radius: var(--radius-md, 8px);
  background: color-mix(in srgb, var(--color-bg-entity-panel, #171718) 78%, #ffffff);
  color: var(--color-text-secondary);
  font-size: 12px;
  line-height: 1.2;
  text-decoration: none;
}

.wall-relation-chip {
  cursor: pointer;
}

.wall-entry-file {
  padding: 5px 8px;
}

.wall-composer-file,
.wall-composer-relation {
  padding: 4px 6px 4px 8px;
}

.wall-relation-chip {
  padding: 5px 8px;
}

.wall-composer-file button,
.wall-composer-relation button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  padding: 0;
  border: 0;
  border-radius: var(--radius-round);
  background: transparent;
  color: var(--color-text-muted);
  cursor: pointer;
}

.wall-composer-file button:hover,
.wall-composer-relation button:hover {
  color: var(--color-text-primary);
}

.wall-replies {
  position: relative;
  display: flex;
  flex-direction: column;
  margin: 0 16px 6px 25px;
  padding-left: 18px;
  border-left: 1px solid var(--color-border-entity-panel, #1F2022);
}

.wall-reply-branch {
  position: relative;
  overflow: hidden;
}

.wall-reply-branch::before {
  content: '';
  position: absolute;
  left: -18px;
  top: 21px;
  width: 14px;
  height: 1px;
  background: var(--color-border-entity-panel, #1F2022);
}

.wall-reply-branch:last-child::after {
  content: '';
  position: absolute;
  left: -19px;
  top: 22px;
  bottom: 0;
  width: 2px;
  background: var(--color-bg-entity-panel, #171718);
}

.wall-reply-branch .wall-entry.is-reply {
  padding: 10px 0 12px;
  border-top: 0;
}

.wall-reply-branch .wall-entry.is-reply .wall-avatar {
  width: 16px;
  height: 16px;
  font-size: 7px;
}

.wall-entry-actions {
  position: absolute;
  top: 0;
  right: 0;
  display: inline-flex;
  gap: var(--space-1, 4px);
  opacity: 0;

}

.wall-entry:hover .wall-entry-actions {
  opacity: 1;
}

.wall-entry-action {
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--color-text-muted);
  font: inherit;
  font-size: 11px;
  cursor: pointer;
}

.wall-entry-action:hover {
  color: var(--color-text-primary);
}

.wall-composer {
  position: relative;
  min-height: 84px;
  padding: 14px 16px 12px;
}

.wall-composer.is-compact {
  min-height: 48px;
  margin-left: 43px;
  padding: 10px 16px 12px 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.wall-show-more-wrap {
  display: flex;
  justify-content: center;
  margin-top: calc(var(--space-2, 8px) * -1);
}

.wall-show-more {
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--color-text-muted);
  font: inherit;
  font-size: 12px;
  cursor: pointer;

}

.wall-show-more:hover {
  color: var(--color-text-primary);
}

.wall-composer.is-compact::before {
  content: '';
  position: absolute;
  left: 0;
  top: 16px;
  width: 18px;
  height: 18px;
  border-radius: var(--radius-round);
  background: var(--color-accent, #6366f1);
}

.wall-composer-input-wrap {
  position: relative;
  min-width: 0;
  padding-right: 82px;
}

.wall-composer.is-compact .wall-composer-input-wrap {
  padding-left: 26px;
}

.wall-composer-textarea {
  display: block;
  width: 100%;
  min-height: 36px;
  max-height: 160px;
  padding: 0;
  border: 0;
  outline: 0;
  resize: none;
  background: transparent;
  color: var(--color-text-primary);
  font: inherit;
  font-size: 14px;
  line-height: 1.45;
  overflow-y: auto;
}

.wall-composer.is-compact .wall-composer-textarea {
  min-height: 24px;
  padding-top: 1px;
}

.wall-composer-textarea::placeholder {
  color: var(--color-text-muted);
}

.wall-composer-actions {
  position: absolute;
  right: 14px;
  bottom: 12px;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2, 8px);
}

.wall-composer.is-compact .wall-composer-actions {
  right: 16px;
  bottom: 12px;
}

.wall-file-input {
  display: none;
}

.wall-composer-btn,
.wall-composer-send {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  padding: 0;
  border: 0;
  border-radius: var(--radius-round);
  font: inherit;
  line-height: 1;
  cursor: pointer;

}

.wall-composer-btn {
  background: transparent;
  color: var(--color-text-muted);
  font-size: 16px;
}

.wall-composer-btn:hover {
  color: var(--color-text-primary);
  background: color-mix(in srgb, var(--color-bg-entity-panel, #171718) 70%, #ffffff);
}

.wall-composer-send {
  background: color-mix(in srgb, var(--color-bg-entity-panel, #171718) 78%, #ffffff);
  color: var(--color-text-muted);
  font-size: 13px;
  font-weight: 700;
}

.wall-composer-send:not(:disabled) {
  background: var(--color-accent, #6366f1);
  color: #fff;
}

.wall-composer-send:disabled {
  cursor: default;
  opacity: 0.72;
}

.mention-dropdown {
  position: absolute;
  left: 0;
  right: 82px;
  bottom: calc(100% + 8px);
  z-index: 20;
  overflow: hidden;
  border: 1px solid var(--color-border-entity-panel, #1F2022);
  border-radius: var(--radius-md);
  background: var(--color-bg-elevated, #202124);
  box-shadow: var(--shadow-lg, 0 18px 48px rgba(0, 0, 0, 0.36));
}

.mention-option {
  display: flex;
  justify-content: space-between;
  gap: var(--space-3, 12px);
  padding: 8px 10px;
  color: var(--color-text-secondary);
  cursor: pointer;
}

.mention-option:hover,
.mention-option.is-active {
  background: color-mix(in srgb, var(--color-bg-elevated, #202124) 72%, #ffffff);
  color: var(--color-text-primary);
}

.mention-option-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mention-option-type {
    flex-shrink: 0;
    color: var(--color-text-muted);
}

.mention-chip {
    display: inline;
    padding: 0 3px;
    border-radius: 3px;
    background: color-mix(in srgb, var(--color-accent) 12%, transparent);
    color: var(--color-accent);
    font-weight: 500;
    cursor: pointer;
}

.mention-chip:hover {
    background: color-mix(in srgb, var(--color-accent) 22%, transparent);
}

@media (max-width: 640px) {
  .wall-entry,
  .wall-entry.is-reply,
  .wall-composer,
  .wall-composer.is-compact {
    padding-left: 12px;
    padding-right: 12px;
  }

  .wall-composer-input-wrap {
    padding-right: 74px;
  }

  .wall-composer-actions {
    right: 12px;
  }

  .wall-replies {
    margin-right: 12px;
    margin-left: 21px;
    padding-left: 14px;
  }

  .wall-reply-branch::before {
    left: -14px;
    width: 10px;
  }

  .wall-reply-branch:last-child::after {
    left: -15px;
  }

  .wall-composer.is-compact {
    margin-left: 35px;
    padding-left: 0;
  }
}


/* source: ./xacss/components/audit.css */
/*
 * Audit log entries.
 * Фаза E4 (Claude 2026-04-22) — extracted .audit-* rules from admin-layout.css 1:1.
 */

.audit-log { display: flex; flex-direction: column; height: 100%; }
.audit-log-list { flex: 1; overflow-y: auto; }
.audit-log-empty { padding: 24px; text-align: center; color: var(--color-text-muted); font-size: 13px; }
.audit-log-more { padding: 8px 12px; text-align: center; }
.audit-entry {
  display: flex; align-items: flex-start; gap: 8px;
  padding: 6px 12px; border-bottom: 1px solid var(--color-border-default);
  font-size: 12px;
}
.audit-entry:last-child { border-bottom: none; }
.audit-entry--clickable { cursor: pointer; }
.audit-entry--clickable:hover { background: var(--color-bg-surface-3); }
.audit-entry-icon {
  width: 24px; height: 24px; flex-shrink: 0; border-radius: 6px;
  display: flex; align-items: center; justify-content: center;
  background: var(--color-bg-surface-3); color: var(--color-text-muted);
}
.audit-entry-body { flex: 1; min-width: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px; }
.audit-entry-label { font-weight: 500; color: var(--color-text-primary); }
.audit-entry-desc { color: var(--color-text-secondary); }
.audit-entry-fields {
  font-size: 11px; color: var(--color-text-muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  max-width: 200px;
}
.audit-entry-meta {
  flex-shrink: 0; text-align: right;
  display: flex; flex-direction: column; align-items: flex-end; gap: 1px;
}
.audit-entry-user { font-size: 11px; color: var(--color-text-secondary); }
.audit-entry-time { font-size: 10px; color: var(--color-text-muted); }


/* source: ./xacss/components/radio-blocks.css */
/*
 * RadioBlocks (radio as button cards).
 * Фаза E5 (Claude 2026-04-22) — extracted .rb-* rules from admin-layout.css 1:1.
 */

.rb-group {
  display: flex; flex-wrap: wrap; gap: 6px;
}
.rb-block {
  display: flex; align-items: center; gap: 5px;
  padding: 6px 12px; border-radius: var(--radius-sm);
  border: 1px solid var(--color-border-default);
  background: var(--color-bg-surface-2);
  color: var(--color-text-secondary);
  cursor: pointer; font-size: 13px; font-weight: 500;

  white-space: nowrap;
}
.rb-block:hover:not(.is-disabled) {
  border-color: var(--color-accent);
  color: var(--color-text-primary);
}
.rb-block.is-selected {
  border-color: var(--color-accent);
  background: color-mix(in srgb, var(--color-draft) 10%, transparent);
  color: var(--color-accent);
}
.rb-block.is-disabled {
  opacity: 0.4; cursor: not-allowed;
}
.rb-dot {
  width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0;
}


/* source: ./xacss/components/offcanvas.css */
/*
 * Offcanvas overlay panel.
 * Фаза E5 (Claude 2026-04-22) — extracted .offcanvas-* rules from admin-layout.css 1:1.
 */

.offcanvas-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  z-index: 9000;
  display: none;
}
.offcanvas-overlay.is-open { display: block; }
.offcanvas-panel {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: 380px;
  background: var(--color-bg-surface-2);
  border-left: 1px solid var(--color-border-default);
  transform: translateX(100%);

  z-index: 9001;
  display: flex;
  flex-direction: column;
}
.offcanvas-overlay.is-open .offcanvas-panel { transform: translateX(0); }
.offcanvas-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-4) var(--space-6);
  border-bottom: 1px solid var(--color-border-default);
}
.offcanvas-header h3 { font-size: 16px; font-weight: 600; }
.offcanvas-header-actions { display: flex; align-items: center; gap: var(--space-1); }
.offcanvas-body {
  flex: 1;
  overflow-y: auto;
  padding: var(--space-4);
}
.offcanvas-empty {
  text-align: center;
  color: var(--color-text-muted);
  padding: var(--space-8) 0;
  font-size: 14px;
}


/* source: ./xacss/components/mini-slide.css */
/*
 * MiniSlide (narrow picker).
 * Фаза E5 (Claude 2026-04-22) — extracted .ms-* rules from admin-layout.css 1:1.
 */

.ms-overlay {
  position: fixed; inset: 0; z-index: 8200;
  background: transparent; pointer-events: none;

}
.ms-overlay.is-visible {
  background: rgba(0,0,0,0.15); pointer-events: auto;
}
.ms-panel {
  position: fixed; top: 10px; right: 10px; bottom: 10px;
  width: 260px; z-index: 8201;
  background: var(--color-bg-canvas);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-lg, 12px);
  display: flex; flex-direction: column;
  box-shadow: -4px 0 20px rgba(0,0,0,0.15);
  transform: translateX(calc(100% + 20px));

}
.ms-panel.is-open { transform: translateX(0); }
.ms-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 14px; border-bottom: 1px solid var(--color-border-default);
  flex-shrink: 0;
}
.ms-title { font-size: 13px; font-weight: 600; color: var(--color-text-primary); }
.ms-list {
  flex: 1; overflow-y: auto; padding: 6px;
  display: flex; flex-direction: column; gap: 4px;
}
.ms-card {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 12px; border-radius: var(--radius-sm);
  border: 1px solid var(--color-border-default);
  background: none; cursor: pointer; text-align: left;
   width: 100%;
}
.ms-card:hover {
  background: var(--color-bg-surface-3);
  border-color: var(--color-accent);
}
.ms-card-text { display: flex; flex-direction: column; gap: 1px; }
.ms-card-label { font-size: 13px; font-weight: 500; color: var(--color-text-primary); }
.ms-card-sub { font-size: 11px; color: var(--color-text-muted); }


/* ── .ms-* extracted from datatable.css (optional-decomp, 2026-04-23) ── */

.ms-filter-panel { width: 300px; }
.ms-settings-panel { width: 280px; }


/* source: ./xacss/components/color-swatch.css */
/*
 * Color swatch.
 * Фаза E5 (Claude 2026-04-22) — extracted .color-swatch-* rules from admin-layout.css 1:1.
 */

.color-swatch-custom {
    display: flex; align-items: center; justify-content: center;
    background: var(--color-bg-surface-3); color: var(--color-text-muted);
    position: relative; overflow: hidden;
}
.color-swatch-custom.is-active { color: var(--color-text-inverse); }


/* source: ./xacss/components/sidebar-panel.css */
/*
 * Sidebar panel (collapsible card).
 * Фаза E5 (Claude 2026-04-22) — extracted .sidebar-panel-* rules from admin-layout.css 1:1.
 */

.card.sidebar-panel { display: flex; flex-direction: column; }

.sidebar-panel-title { display: flex; align-items: center; gap: 0.5rem; min-width: 0; flex: 1; cursor: pointer; }
.sidebar-panel-title .card-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sidebar-panel-actions { display: flex; align-items: center; gap: 0.25rem; flex-shrink: 0; }
.sidebar-panel-chevron {
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0; margin-left: auto;
    width: 16px; height: 16px;
    color: var(--color-text-muted);

}
.sidebar-panel-toggle {
  cursor: pointer; user-select: none;
  background: transparent; border: none; color: inherit; font: inherit;
  width: 100%; text-align: left;
}
.sidebar-panel-toggle:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: -2px;
}
.sidebar-panel-info-btn {
  display: flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; padding: 0; border: none;
  background: var(--color-bg-surface-2); border-radius: 50%;
  cursor: pointer; color: var(--color-text-muted);

  flex-shrink: 0; margin-left: auto;
}
.sidebar-panel-info-btn:hover {
  background: var(--color-accent-soft-bg);
  color: var(--color-accent);
}


/* source: ./xacss/components/kanban.css */
/*
 * Kanban board.
 * Фаза E5 (Claude 2026-04-22) — extracted .kanban-* rules from admin-layout.css 1:1.
 */

.kanban-back-bar { display: flex; gap: 8px; margin-bottom: 12px; align-items: center; }


/* ── .kanban-* extracted from datatable.css (optional-decomp, 2026-04-23) ── */

.kanban-column {
    flex: 0 0 300px;
    min-width: 300px;
    background: transparent;
    border-radius: 0;
    display: flex;
    flex-direction: column;
    border: none;
    border-right: 1px solid var(--color-border-default);
}
.kanban-column:last-child { border-right: none; }
.kanban-column-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-2) var(--space-4);
    border-bottom: 1px solid var(--color-border-default);
    flex-shrink: 0;
}
.kanban-column-title {
    font-weight: 500;
    font-size: 0.813rem;
}
.kanban-column-count {
    font-size: 0.688rem;
    font-weight: 600;
    color: var(--color-text-secondary);
    background: var(--color-bg-surface-3);
    padding: 2px 10px;
    border-radius: 10px;
    min-width: 24px;
    text-align: center;
}
.kanban-list {
    flex: 1;
    overflow-y: auto;
    padding: var(--space-2);
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-height: 60px;
    position: relative;
}
.kanban-list.is-drop-target {
    background: color-mix(in srgb, var(--color-accent) 4%, transparent);
    border-radius: var(--radius-sm);
}
.kanban-list > [data-rfd-placeholder-context-id] {
    border: 2px dashed color-mix(in srgb, var(--color-accent) 40%, transparent) !important;
    border-radius: var(--radius-lg, 8px) !important;
    background: color-mix(in srgb, var(--color-accent) 5%, transparent) !important;

}
.kanban-list[data-empty-text]:not(:has(.kanban-card, .kanban-drop-placeholder))::after {
    content: attr(data-empty-text); display: block; text-align: center;
    padding: var(--space-8) var(--space-4); font-size: 0.813rem;
    color: var(--color-text-muted); pointer-events: none;
}
.kanban-drop-placeholder, .kc-placeholder {
    border: 2px dashed color-mix(in srgb, var(--color-accent) 30%, transparent);
    border-radius: var(--radius-lg); background: color-mix(in srgb, var(--color-accent) 3%, transparent);
    pointer-events: none; flex-shrink: 0; box-sizing: border-box;
     overflow: hidden;
}
.kanban-card-ghost { position: fixed; pointer-events: none; z-index: 10000; opacity: 0.85; transform: rotate(2deg) scale(1.03); box-shadow: 0 16px 40px rgba(0,0,0,0.25); border-radius: var(--radius-lg); }
.kanban-card { touch-action: auto; }
.kanban-card.is-touch-dragging { touch-action: none; }
.kanban-column-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
    margin-right: 6px;
    vertical-align: middle;
}
.kanban-column-footer {
    padding: 8px var(--space-4);
    border-top: 1px solid var(--color-border-default);
    font-size: 0.75rem;
    color: var(--color-text-muted);
    flex-shrink: 0;
}
.kanban-column-summary-value {
    font-weight: 600;
    color: var(--color-text-secondary);
}


/* source: ./xacss/components/breadcrumbs.css */
/*
 * Breadcrumbs.
 * optional-decomp (Claude 2026-04-23) — extracted .bc-* from datatable.css 1:1.
 */

.bc-container {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.bc-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 8px 0;
}
.bc-nav {
    display: flex;
    align-items: center;
    gap: 6px;
}
.bc-nav-btn {
    background: var(--color-bg-surface-3);
    color: var(--color-text-primary);
    border: 1px solid var(--color-border-default);
    border-radius: var(--radius-sm, 4px);
    padding: 4px 10px;
    cursor: pointer;
    font-size: 14px;
    line-height: 1.4;

}
.bc-nav-btn:hover {
    background: var(--color-bg-surface-2);
}
.bc-nav-today {
    font-weight: 600;
    padding: 4px 14px;
}
.bc-date-label {
    font-size: 15px;
    font-weight: 600;
    color: var(--color-text-primary);
    margin-left: 8px;
}
.bc-view-toggle {
    display: flex;
    border: 1px solid var(--color-border-default);
    border-radius: var(--radius-sm, 4px);
    overflow: hidden;
}
.bc-view-btn {
    background: var(--color-bg-surface-3);
    color: var(--color-text-secondary);
    border: none;
    padding: 4px 14px;
    cursor: pointer;
    font-size: 13px;

}
.bc-view-btn:not(:last-child) {
    border-right: 1px solid var(--color-border-default);
}
.bc-view-btn.is-active {
    background: var(--color-accent);
    color: var(--color-text-inverse);
}
.bc-back-btn {
    background: none;
    border: none;
    color: var(--color-accent);
    cursor: pointer;
    font-size: 13px;
    padding: 4px 0;
    text-align: left;
    margin-bottom: 4px;
}
.bc-back-btn:hover {
    text-decoration: underline;
}
.bc-grid {
    background: var(--color-bg-surface-2);
    border: 1px solid var(--color-border-default);
    border-radius: var(--radius-md, 6px);
    overflow: auto;
}
.bc-empty {
    padding: 40px 20px;
    text-align: center;
    color: var(--color-text-muted);
    font-size: 14px;
}
.bc-header {
    display: grid;
    grid-template-columns: 60px repeat(var(--bc-cols, 1), 1fr);
    border-bottom: 2px solid var(--color-border-default);
    position: sticky;
    top: 0;
    z-index: 5;
    background: var(--color-bg-surface-2);
}
.bc-header-time {
    padding: 8px 4px;
    border-right: 1px solid var(--color-border-default);
}
.bc-header-col {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 10px 6px;
    border-right: 1px solid var(--color-border-default);
    min-width: 120px;
}
.bc-header-col:last-child {
    border-right: none;
}
.bc-header-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-text-inverse);
    font-size: 13px;
    font-weight: 600;
    flex-shrink: 0;
}
.bc-header-name {
    font-size: 13px;
    font-weight: 600;
    color: var(--color-text-primary);
    text-align: center;
    line-height: 1.2;
}
.bc-header-spec {
    font-size: 11px;
    color: var(--color-text-muted);
}
.bc-header-day {
    flex-direction: column;
    align-items: center;
    gap: 2px;
}
.bc-header-dayname {
    font-size: 11px;
    color: var(--color-text-muted);
    text-transform: uppercase;
}
.bc-header-daynum {
    font-size: 15px;
    font-weight: 600;
    color: var(--color-text-primary);
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
}
.bc-header-daynum.bc-today {
    background: var(--color-accent);
    color: var(--color-text-inverse);
}
.bc-body {
    position: relative;
}
.bc-row {
    display: grid;
    grid-template-columns: 60px repeat(var(--bc-cols, 1), 1fr);
    border-bottom: 1px solid var(--color-border-default);
    min-height: 48px;
}
.bc-row:last-child {
    border-bottom: none;
}
.bc-time {
    padding: 4px 6px;
    font-size: 11px;
    color: var(--color-text-muted);
    border-right: 1px solid var(--color-border-default);
    display: flex;
    align-items: flex-start;
    justify-content: flex-end;
    white-space: nowrap;
}
.bc-cell {
    position: relative;
    border-right: 1px solid var(--color-border-default);
    min-height: 48px;
    padding: 2px;

}
.bc-cell:last-child {
    border-right: none;
}
.bc-cell-empty:hover {
    background: var(--color-bg-surface-3);
    cursor: pointer;
}
.bc-cell-today {
    background: color-mix(in srgb, var(--color-brand-electric) 4%, transparent);
}
.bc-booking {
    border-radius: var(--radius-sm, 4px);
    padding: 4px 6px;
    margin: 1px;
    cursor: pointer;
    font-size: 12px;
    line-height: 1.3;
    overflow: hidden;

    position: relative;
}
.bc-booking:hover {
    box-shadow: 0 2px 8px rgba(0,0,0,0.25);
}
.bc-booking-time {
    font-size: 10px;
    color: var(--color-text-muted);
    margin-bottom: 1px;
}
.bc-booking-title {
    font-weight: 600;
    color: var(--color-text-primary);
    margin-bottom: 1px;
}
.bc-booking-title a {
    color: inherit;
    text-decoration: none;
}
.bc-booking-title a:hover {
    text-decoration: underline;
}
.bc-booking-contact {
    font-size: 11px;
    color: var(--color-text-secondary);
}
.bc-booking-status {
    display: inline-block;
    font-size: 10px;
    padding: 1px 5px;
    border-radius: 3px;
    margin-top: 2px;
}
.bc-status-pending     { background: color-mix(in srgb, var(--color-status-pending) 20%, transparent);  color: var(--color-status-pending); }
.bc-status-confirmed   { background: color-mix(in srgb, var(--color-status-confirmed) 20%, transparent); color: var(--color-status-confirmed); }
.bc-status-in_progress { background: color-mix(in srgb, var(--color-success) 20%, transparent);  color: var(--color-success); }
.bc-status-completed   { background: color-mix(in srgb, var(--color-status-no-show) 20%, transparent); color: var(--color-status-no-show); }
.bc-status-no_show     { background: color-mix(in srgb, var(--color-danger) 20%, transparent);  color: var(--color-danger); }
.bc-status-cancelled   { background: color-mix(in srgb, var(--color-status-cancelled) 20%, transparent); color: var(--color-status-cancelled); }
.bc-status-rescheduled { background: color-mix(in srgb, var(--color-status-rescheduled) 20%, transparent); color: var(--color-status-rescheduled); }
.bc-booking-actions {
    display: none;
    gap: 4px;
    margin-top: 3px;
}
.bc-booking:hover .bc-booking-actions {
    display: flex;
}
.bc-action-btn {
    background: var(--color-bg-surface-3);
    border: 1px solid var(--color-border-default);
    border-radius: 3px;
    padding: 2px 4px;
    cursor: pointer;
    color: var(--color-text-secondary);
    display: flex;
    align-items: center;
    justify-content: center;

}
.bc-action-btn:hover {
    background: var(--color-bg-surface-2);
}
.bc-action-confirmed:hover  { color: var(--color-status-confirmed); border-color: var(--color-status-confirmed); }
.bc-action-in_progress:hover { color: var(--color-success); border-color: var(--color-success); }
.bc-action-completed:hover  { color: var(--color-success); border-color: var(--color-success); }
.bc-action-no_show:hover    { color: var(--color-danger); border-color: var(--color-danger); }
.bc-action-cancelled:hover  { color: var(--color-status-no-show); border-color: var(--color-status-no-show); }
.bc-specialist-picker {
    padding: 24px;
}
.bc-picker-title {
    font-size: 16px;
    font-weight: 600;
    color: var(--color-text-primary);
    margin-bottom: 16px;
}
.bc-picker-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 12px;
}
.bc-picker-card {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px;
    background: var(--color-bg-surface-3);
    border: 1px solid var(--color-border-default);
    border-radius: var(--radius-md, 6px);
    cursor: pointer;

}
.bc-picker-card:hover {
    border-color: var(--color-accent);
    box-shadow: 0 0 0 1px var(--color-accent);
}
.bc-picker-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-text-inverse);
    font-size: 14px;
    font-weight: 600;
    flex-shrink: 0;
}
.bc-picker-name {
    font-weight: 600;
    color: var(--color-text-primary);
    font-size: 14px;
}
.bc-picker-spec {
    font-size: 12px;
    color: var(--color-text-muted);
}
.bc-summary {
    background: var(--color-bg-surface-2);
    border: 1px solid var(--color-border-default);
    border-radius: var(--radius-md, 6px);
    overflow: hidden;
}
.bc-summary:empty {
    display: none;
}
.bc-summary-row {
    display: flex;
    gap: 16px;
    padding: 10px 14px;
    flex-wrap: wrap;
    border-bottom: 1px solid var(--color-border-default);
}
.bc-sum-item {
    font-size: 13px;
    color: var(--color-text-secondary);
}
.bc-sum-confirmed { color: var(--color-status-confirmed); }
.bc-sum-progress  { color: var(--color-success); }
.bc-sum-completed { color: var(--color-status-no-show); }
.bc-sum-noshow    { color: var(--color-danger); font-weight: 600; }
.bc-sum-pending   { color: var(--color-status-pending); }
.bc-attendance-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--color-text-primary);
    padding: 8px 14px 4px;
}
.bc-attendance-item {
    display: grid;
    grid-template-columns: 50px 1fr 1.5fr 1fr auto;
    gap: 8px;
    padding: 6px 14px;
    font-size: 13px;
    align-items: center;
    border-bottom: 1px solid var(--color-border-default);
}
.bc-attendance-item:last-child {
    border-bottom: none;
}
.bc-att-time {
    color: var(--color-text-muted);
    font-weight: 500;
}
.bc-att-name {
    color: var(--color-text-primary);
    font-weight: 600;
}
.bc-att-title {
    color: var(--color-text-secondary);
}
.bc-att-spec {
    color: var(--color-text-muted);
    font-size: 12px;
}
.bc-att-status {
    font-size: 11px;
    padding: 1px 6px;
    border-radius: 3px;
    white-space: nowrap;
}
.bc-att-completed  { opacity: 0.6; }
.bc-att-no_show    { background: color-mix(in srgb, var(--color-danger) 8%, transparent); }


/* source: ./xacss/components/cal.css */
/*
 * Calendar (non-dt cal-*).
 * optional-decomp (Claude 2026-04-23) — extracted .cal-* from datatable.css 1:1.
 */

.cal-container {
    background: var(--color-bg-surface-2);
    border-radius: var(--radius-md);
    border: 1px solid var(--color-border-default);
}
.cal-nav {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--color-border-default);
}
.cal-nav-title {
    font-weight: 600;
    font-size: 15px;
    min-width: 180px;
    text-align: center;
    color: var(--color-text-primary);
}
.cal-grid-month {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
}
.cal-header-cell {
    padding: 8px 4px;
    text-align: center;
    font-size: 12px;
    font-weight: 600;
    color: var(--color-text-muted);
    border-bottom: 1px solid var(--color-border-default);
}
.cal-cell {
    min-height: 90px;
    padding: 4px 6px;
    border-right: 1px solid var(--color-border-default);
    border-bottom: 1px solid var(--color-border-default);
    position: relative;
    cursor: default;
}
.cal-cell:nth-child(7n) {
    border-right: none;
}
.cal-cell:hover {
    background: var(--color-bg-surface-3);
}
.cal-day-num {
    font-size: 12px;
    font-weight: 500;
    margin-bottom: 2px;
    color: var(--color-text-secondary);
}
.cal-today {
    background: color-mix(in srgb, var(--color-draft) 8%, transparent);
}
.cal-today .cal-day-num {
    background: var(--color-accent);
    color: var(--color-text-inverse);
    width: 22px;
    height: 22px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.cal-other-month {
    opacity: 0.35;
}
.cal-tasks {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.cal-task {
    display: flex;
    flex-direction: column;
    padding: 2px 6px;
    border-radius: var(--radius-sm);
    font-size: 11px;
    line-height: 1.3;
    text-decoration: none;
    color: var(--color-text-primary);
    background: var(--color-bg-surface-3);
    overflow: hidden;

}
.cal-task:hover {
    background: var(--color-border-default);
}
.cal-task-title {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.cal-task-sub {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.cal-task-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    display: inline-block;
    margin-right: 4px;
    flex-shrink: 0;
}
.cal-task-dot-low { background: var(--color-priority-low); }
.cal-task-dot-normal { background: var(--color-priority-normal); }
.cal-task-dot-high { background: var(--color-priority-high); }
.cal-task-dot-urgent { background: var(--color-priority-critical); }
.cal-task-overdue {
    border-left: 2px solid var(--color-danger);
}
.cal-more {
    font-size: 10px;
    color: var(--color-text-muted);
    padding: 1px 4px;
}
.cal-grid-week {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
}
.cal-week-day {
    border-right: 1px solid var(--color-border-default);
    min-height: 200px;
}
.cal-week-day:last-child {
    border-right: none;
}
.cal-week-day-header {
    padding: 8px;
    border-bottom: 1px solid var(--color-border-default);
    display: flex;
    align-items: center;
    gap: 6px;
}
.cal-week-day-name {
    font-size: 12px;
    font-weight: 600;
    color: var(--color-text-muted);
}
.cal-week-day-num {
    font-size: 13px;
    font-weight: 500;
    color: var(--color-text-primary);
}
.cal-week-tasks {
    padding: 4px;
    display: flex;
    flex-direction: column;
    gap: 3px;
}
.cal-day-view {
    padding: 16px;
}
.cal-day-task {
    display: flex;
    flex-direction: column;
    padding: 10px 14px;
    border-radius: var(--radius-md);
    border: 1px solid var(--color-border-default);
    margin-bottom: 8px;
    text-decoration: none;
    color: var(--color-text-primary);

}
.cal-day-task:hover {
    border-color: var(--color-accent);
}
.cal-day-task-header {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.cal-day-task-title {
    font-weight: 500;
    font-size: 14px;
}
.cal-day-task-assignee {
    font-size: 12px;
    color: var(--color-text-muted);
    margin-top: 4px;
}
.cal-empty {
    text-align: center;
    padding: 40px 16px;
    color: var(--color-text-muted);
    font-size: 14px;
}
.cal-zoom-group {
    display: flex;
    gap: 2px;
    margin-left: auto;
}
.cal-zoom-group .btn.is-active {
    background: var(--color-accent);
    color: var(--color-text-inverse);
}


/* source: ./xacss/components/tabtable.css */
/*
 * TabTable — lightweight in-tab tables with toolbar/search/cards grid.
 * `.tt-*` — subset classes (toolbar, search, cards-grid, view-toggle).
 */

.tt-toolbar {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  margin-bottom: var(--space-4);
}
.tt-search {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex: 1;
  min-width: 180px;
  max-width: 320px;
  padding: var(--space-2) var(--space-4);
  background: var(--color-bg-surface-3);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-md);
}
.tt-search-icon {
  color: var(--color-text-muted);
  flex-shrink: 0;
  width: 16px;
  height: 16px;
}
.tt-search-input {
  flex: 1;
  background: none;
  border: none;
  outline: none;
  color: var(--color-text-primary);
  font-size: 14px;
  font-family: inherit;
}
.tt-actions {
  display: none;
  gap: var(--space-2);
  align-items: center;
}
.tt-view-toggle {
  display: flex;
  gap: 2px;
  margin-left: auto;
  background: var(--color-bg-surface-3);
  border-radius: var(--radius-md);
  padding: 2px;
}
.tt-view-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  background: none;
  border: none;
  border-radius: var(--radius-sm);
  color: var(--color-text-muted);
  cursor: pointer;

}
.tt-view-btn:hover { color: var(--color-text-primary); }
.tt-view-btn.is-active {
  background: var(--color-bg-surface-2);
  color: var(--color-accent);
  box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}
.tt-view-btn .icon { width: 16px; height: 16px; }
.tt-no-results {
  display: none;
  padding: 2rem;
  text-align: center;
  color: var(--color-text-secondary);
  font-size: 0.875rem;
}
.tt-empty {
  padding: 2rem 1rem;
  text-align: center;
}
.tt-cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 0.75rem;
}
.tt-card {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  cursor: pointer;
  padding: 0.875rem 1rem;
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-md);

  text-decoration: none;
  color: inherit;
}
.tt-card:hover { border-color: var(--color-accent); }
.tt-card-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--color-accent);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--color-text-inverse);
  font-weight: 600;
  font-size: 0.875rem;
}
.tt-card-avatar.company-avatar { border-radius: var(--radius-md); }
.tt-card-info { flex: 1; min-width: 0; }
.tt-card-name { font-weight: 500; display: block; }
.tt-card-sub { font-size: 0.813rem; color: var(--color-text-secondary); display: block; margin-top: 0.125rem; }
.tt-card-actions {
  display: flex;
  gap: var(--space-1);
  flex-shrink: 0;
}


/* source: ./xacss/components/showcase-card.css */
/*
 * ShowcaseCard.
 * optional-decomp (Claude 2026-04-23) — extracted .sc-* from datatable.css 1:1.
 */

.sc-card {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 12px;
  margin-bottom: 16px;
  align-items: stretch;
}
.sc-card-main {
  grid-column: 1 / -1;
  grid-row: 1;
  min-width: 0;
  z-index: 2;

}
.sc-card.sc-card--expanded > .sc-card-main {
  margin-left: 292px;
}
.sc-card-widgets {
  grid-column: 1;
  grid-row: 1;
  width: 280px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 12px;
  align-content: stretch;
  z-index: 1;
  transform: scale(0.92);
  transform-origin: left center;
  opacity: 0;
  pointer-events: none;

}
.sc-card.sc-card--expanded > .sc-card-widgets {
  transform: scale(1);
  opacity: 1;
  pointer-events: auto;
}
.sc-widget {
  background: var(--color-bg-surface-2);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-lg);
  padding: 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 4px;
}
.sc-card-main {
  background: var(--color-bg-surface-2);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-lg);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.sc-card-toolbar {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-2);
  border-bottom: 1px solid var(--color-border-default);
}
.sc-card-content {
  display: flex;
  flex: 1;
  overflow: hidden;
}
.sc-card-info {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 20px;
  min-width: 0;
  flex: 1;
}
.sc-card-info-title {
  font-weight: 600;
  font-size: 1rem;
  color: var(--color-text-primary);
  display: flex;
  align-items: center;
  gap: 8px;
}
.sc-card-info-meta {
  font-size: 0.8125rem;
  color: var(--color-text-muted);
  display: flex;
  flex-wrap: wrap;
  gap: 4px 12px;
}
.sc-card-info-desc {
  font-size: 0.8125rem;
  color: var(--color-text-secondary);
  line-height: 1.5;
}
.sc-card-info-actions {
  display: flex;
  gap: 8px;
  margin-top: auto;
  padding-top: 8px;
}
.sc-card-preview {
  width: 200px;
  height: 200px;
  flex-shrink: 0;
  background: var(--color-bg-surface-3);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  overflow: hidden;
  margin: 10px 0 0 0;
}
.sc-card-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
  display: block;
}
.sc-card-preview-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  color: var(--color-text-muted);
  font-size: 0.8125rem;
  gap: 6px;
}
.sc-card-preview--mobile {
  width: 100px;
  height: 150px;
  margin: 10px 10px 0 0;
  border-radius: var(--radius-md) var(--radius-md) 0 0;
  align-self: flex-end;
}


/* source: ./xacss/components/entity-card.css */
/* ============================================
   EntityCard — Unified Card Styles
   Single source of truth for card + kanban views
   ============================================ */

/* ── Grid containers ── */
.dt-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 12px;
  padding: 12px;
}

/* ── Card wrapper (used by DataTableCardView) ── */
.dt-card {
  position: relative;
  background: var(--color-bg-canvas);
  border: 1px solid var(--color-border-default);
  border-radius: 10px;
  padding: 0;
  overflow: hidden;

}
.dt-card:hover {
  border-color: color-mix(in srgb, var(--color-accent) 40%, var(--color-border-default));
  box-shadow: 0 4px 16px rgba(0,0,0,0.12);
}
.dt-card.is-selected {
  border-color: var(--color-accent);
  box-shadow: 0 0 0 1px var(--color-accent);
}

/* ── Kanban card wrapper ── */
.kanban-card {
  background: var(--color-bg-canvas);
  border: 1px solid var(--color-border-default);
  border-radius: 10px;
  padding: 0;
  cursor: grab;
  position: relative;

}
.kanban-card:hover {
  border-color: color-mix(in srgb, var(--color-accent) 40%, var(--color-border-default));
  box-shadow: 0 4px 16px rgba(0,0,0,0.12);
}
.kanban-card.is-dragging {
  opacity: 0.2;
  cursor: grabbing;
  z-index: 1000;
}

/* ── EntityCard (ec-*) ── */
.ec {
  padding: 14px 16px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* Top meta row */
.ec-top {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.6875rem;
  color: var(--color-text-muted);
}

.ec-meta {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 120px;
}

/* Title */
.ec-title {
  font-weight: 600;
  font-size: 0.875rem;
  line-height: 1.35;
  color: var(--color-text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Body (inline fields) */
.ec-body {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  font-size: 0.75rem;
}

.ec-value {
  color: var(--color-text-secondary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Footer */
.ec-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 4px;
  padding-top: 8px;
  border-top: 1px solid var(--color-border-default);
  font-size: 0.75rem;
}

.ec-footer-left { font-weight: 600; color: var(--color-text-primary); }
.ec-footer-right { color: var(--color-text-muted); }

/* Avatar */
.ec-avatar {
  width: 28px; height: 28px;
  border-radius: 50%;
  background: var(--color-accent);
  display: flex; align-items: center; justify-content: center;
  font-size: 0.6875rem; font-weight: 700;
  color: var(--color-text-inverse);
  flex-shrink: 0;
  border: 2px solid var(--color-bg-canvas);
  padding: 0;
  cursor: pointer;
  line-height: 1;

}
.ec-avatar--sm { width: 22px; height: 22px; font-size: 0.5625rem; }
.ec-avatar:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 10px rgba(0,0,0,0.18);
}

.ec-avatars {
  display: flex;
  gap: 0;
}
.ec-avatars .ec-avatar { margin-left: -6px; }
.ec-avatars .ec-avatar:first-child { margin-left: 0; }
.ec-avatar--add {
  background: transparent;
  border: 2px dashed var(--color-border-default);
  color: var(--color-text-secondary);
  cursor: pointer;

}
.ec-avatar--add:hover {
  border-color: var(--color-accent);
  color: var(--color-accent);
}
/* ── Assignee manager panel ── */
.ec-assignee-panel .ps-body {
  overflow: auto;
}

.ec-assignee-manager {
  display: flex;
  flex-direction: column;
  gap: 18px;
  min-height: 100%;
  padding: 16px;
  background: var(--color-bg-surface);
}

.ec-assignee-section {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.ec-assignee-section-title {
  font-size: 12px;
  font-weight: 600;
  color: var(--color-text-secondary);
}

.ec-assignee-error {
  padding: 8px 10px;
  border: 1px solid color-mix(in srgb, var(--color-danger) 35%, var(--color-border-default));
  border-radius: 8px;
  background: color-mix(in srgb, var(--color-danger) 8%, var(--color-bg-surface-2));
  color: var(--color-danger);
  font-size: 12px;
  line-height: 1.35;
}

.ec-assignee-list,
.ec-assignee-add-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-height: 0;
  overflow-y: auto;
  padding-right: 2px;
}

.ec-assignee-list {
  max-height: 260px;
}

.ec-assignee-add-list {
  max-height: 360px;
}

.ec-assignee-row,
.ec-assignee-add-row {
  width: 100%;
  min-height: 44px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border: 1px solid var(--color-border-default);
  border-radius: 8px;
  background: var(--color-bg-surface-2);
  color: var(--color-text-primary);
  font: inherit;
  text-align: left;

}

.ec-assignee-row[draggable="true"] {
  cursor: grab;
}

.ec-assignee-row[draggable="true"]:active {
  cursor: grabbing;
}

.ec-assignee-row.is-primary {
  border-color: color-mix(in srgb, var(--color-accent) 38%, var(--color-border-default));
  background: color-mix(in srgb, var(--color-accent) 8%, var(--color-bg-surface-2));
}

.ec-assignee-row.is-dragging {
  opacity: 0.55;
  transform: scale(0.98);
}

.ec-assignee-add-row {
  cursor: pointer;
  justify-content: flex-start;
}

.ec-assignee-add-row:hover,
.ec-assignee-row:hover {
  border-color: color-mix(in srgb, var(--color-accent) 32%, var(--color-border-default));
  background: var(--color-bg-surface-3);
}

.ec-assignee-add-row:disabled,
.ec-assignee-action:disabled {
  opacity: 0.5;
  cursor: default;
}

.ec-assignee-grip {
  color: var(--color-text-muted);
  flex: none;
}

.ec-assignee-main {
  min-width: 0;
  flex: 1;
}

.ec-assignee-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 13px;
  font-weight: 600;
}

.ec-assignee-role {
  margin-top: 2px;
  font-size: 11px;
  color: var(--color-text-muted);
}

.ec-assignee-action {
  width: 28px;
  height: 28px;
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--color-border-default);
  border-radius: 6px;
  background: transparent;
  color: var(--color-text-secondary);
  cursor: pointer;

}

.ec-assignee-action .icon,
.ec-assignee-add-row .icon {
  pointer-events: none;
}

.ec-assignee-add-row .icon {
  margin-left: auto;
  color: var(--color-text-muted);
  flex: none;
}

.ec-assignee-action:hover {
  color: var(--color-accent);
  border-color: color-mix(in srgb, var(--color-accent) 38%, var(--color-border-default));
  background: color-mix(in srgb, var(--color-accent) 8%, transparent);
}

.ec-assignee-action--danger:hover {
  color: var(--color-danger);
  border-color: color-mix(in srgb, var(--color-danger) 42%, var(--color-border-default));
  background: color-mix(in srgb, var(--color-danger) 8%, transparent);
}

.ec-assignee-panel .ps-empty {
  min-height: 48px;
  padding: 12px;
  border: 1px dashed var(--color-border-default);
  border-radius: 8px;
  background: var(--color-bg-surface-2);
}

/* Also keep kanban-card-avatar for legacy */
.kanban-card-avatar {
  width: 28px; height: 28px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.6875rem; font-weight: 700; color: var(--color-text-inverse);
  background: var(--color-accent);
  border: 2px solid var(--color-bg-canvas);
  flex-shrink: 0;
}

/* Compact (kanban) — hide top row */
.ec--compact .ec-top { display: none; }
.ec--compact .ec-expand { display: none; }

/* ── Expandable sections ── */
.ec-expand {
  padding-top: 6px;
  border-top: 1px solid var(--color-border-default);
}
.ec-expand-header {
  display: flex; align-items: center; gap: 4px;
  width: 100%;
  font-size: 0.6875rem; color: var(--color-text-muted);
  cursor: pointer; padding: 2px 0;
  background: transparent; border: none;
  text-align: left;
}
.ec-expand-header:hover { color: var(--color-text-primary); }
.ec-expand-header:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
  border-radius: 2px;
}
.ec-expand-body { padding: 4px 0 0 16px; }
.ec-expand-item {
  font-size: 0.75rem; padding: 2px 0;
  color: var(--color-text-secondary);
}

/* ── Inline Dropdown ── */
.idd-trigger {
  display: inline-flex; align-items: center; gap: 2px;
  cursor: pointer; border: 0; border-radius: 4px;
  background: transparent; appearance: none;
  padding: 2px 6px;

  font: inherit; color: inherit; text-align: left;
}
.idd-trigger:hover { background: var(--color-bg-surface-3); }
.idd-trigger:disabled { opacity: 0.6; cursor: not-allowed; }
.idd-trigger:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
  background: var(--color-bg-surface-3);
}
.idd-chevron { font-size: 8px; opacity: 0.35; margin-left: 2px; }
.idd-trigger:hover .idd-chevron { opacity: 0.8; }

.idd-overlay { position: fixed; inset: 0; z-index: 9999; }

.idd-list {
  position: fixed; z-index: 10000;
  min-width: 140px; max-width: 240px; max-height: 200px;
  overflow-y: auto; overflow-x: hidden;
  background: var(--color-bg-surface-2);
  border: 1px solid var(--color-border-default);
  border-radius: 8px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.35), 0 2px 8px rgba(0,0,0,0.2);
  padding: 4px;

}



.idd-item {
  display: flex; align-items: center; gap: 6px;
  width: 100%; border: 0; background: transparent;
  padding: 6px 10px; border-radius: 6px;
  font: inherit; font-size: 0.8125rem; text-align: left; cursor: pointer;
  color: var(--color-text-primary);

  white-space: nowrap;
}
.idd-item:hover { background: var(--color-bg-surface-3); }
.idd-item:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: -1px;
  background: var(--color-bg-surface-3);
}
.idd-item.is-active {
  background: color-mix(in srgb, var(--color-accent) 12%, transparent);
  color: var(--color-accent);
}
.idd-item.is-active:hover {
  background: color-mix(in srgb, var(--color-accent) 18%, transparent);
}
.idd-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.idd-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.idd-check { font-size: 11px; opacity: 0.7; flex-shrink: 0; }

/* ── Card Zone Editor (settings panel) ── */
.card-zone-editor {
  border: 1px solid var(--color-border-default); border-radius: 10px;
  padding: 10px; background: var(--color-bg-surface-2);
}
.card-zone-row { display: flex; gap: 6px; align-items: center; margin-bottom: 6px; }
.card-zone-row:last-child { margin-bottom: 0; }
.card-zone-row--top { font-size: 11px; }
.card-zone-row--footer { padding-top: 6px; border-top: 1px solid var(--color-border-default); margin-top: 2px; }
.card-zone-avatar {
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--color-bg-surface-3);
  display: flex; align-items: center; justify-content: center;
  font-size: 14px; color: var(--color-text-secondary); flex-shrink: 0;
}
.card-zone-select {
  flex: 1; min-width: 0; font-size: 11px; padding: 3px 4px;
  border: 1px dashed var(--color-border-default); border-radius: 4px;
  background: transparent; color: var(--color-text-primary); cursor: pointer;

}
.card-zone-select:hover { border-color: var(--color-accent); background: var(--color-bg-surface-3); }
.card-zone-select:focus { border-color: var(--color-accent); border-style: solid; outline: none; }
.card-zone-sm { max-width: 100px; }
.card-zone-title { font-weight: 600; font-size: 13px; padding: 4px 6px; }

/* ── Responsive ── */
@media (max-width: 768px) {
  .dt-cards { grid-template-columns: 1fr; padding: 8px; gap: 8px; }
}


/* source: ./xacss/components/form-controls.css */
/* ============================================
   Form Controls — универсальные стили инпутов
   Используется во всех модулях и компонентах.
   ============================================ */

/* ── Checkbox (стилизованный, как в DataTable) ── */
input[type="checkbox"].form-check-input,
.form-check input[type="checkbox"],
.settings-check {
  appearance: none;
  -webkit-appearance: none;
  width: 16px;
  height: 16px;
  border: 1.5px solid var(--color-border-default);
  border-radius: 3px;
  background: var(--color-bg-surface-2);
  cursor: pointer;
  position: relative;
  flex-shrink: 0;

}

input[type="checkbox"].form-check-input:hover,
.form-check input[type="checkbox"]:hover,
.settings-check:hover {
  border-color: var(--color-accent);
}

input[type="checkbox"].form-check-input:checked,
.form-check input[type="checkbox"]:checked,
.settings-check:checked {
  background: var(--color-accent);
  border-color: var(--color-accent);
}

input[type="checkbox"].form-check-input:checked::after,
.form-check input[type="checkbox"]:checked::after,
.settings-check:checked::after {
  content: '';
  position: absolute;
  left: 4px;
  top: 1px;
  width: 5px;
  height: 9px;
  border: solid var(--color-text-inverse);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

/* ── Toggle switch ── */
.form-toggle {
  position: relative;
  display: inline-block;
  width: 36px;
  height: 20px;
  flex-shrink: 0;
}
.form-toggle input { opacity: 0; width: 0; height: 0; }
.form-toggle-slider {
  position: absolute; inset: 0;
  background: var(--color-bg-surface-3);
  border: 1px solid var(--color-border-default);
  border-radius: 10px;
  cursor: pointer;

}
.form-toggle-slider::before {
  content: '';
  position: absolute; top: 2px; left: 2px;
  width: 14px; height: 14px;
  border-radius: 50%;
  background: var(--color-text-muted);

}
.form-toggle input:checked + .form-toggle-slider {
  background: var(--color-accent);
  border-color: var(--color-accent);
}
.form-toggle input:checked + .form-toggle-slider::before {
  transform: translateX(16px);
  background: var(--color-bg-elevated);
}

/* ── Settings toggle row ── */
.settings-toggle {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  cursor: pointer;
}
.settings-toggle-text { flex: 1; }
.settings-toggle-label {
  font-size: 14px;
  font-weight: 500;
  color: var(--color-text-primary);
}
.settings-toggle-desc {
  font-size: 12px;
  color: var(--color-text-muted);
  margin-top: 2px;
}

/* ── Text input / select / textarea baseline ── */
.form-input {
  width: 100%;
  padding: 7px 10px;
  background: var(--color-bg-surface-2);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-sm);
  color: var(--color-text-primary);
  font-size: 13px;
  font-family: inherit;
  outline: none;

}
.form-input:focus {
  border-color: var(--color-accent);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-brand-electric) 12%, transparent);
}
.form-input::placeholder { color: var(--color-text-muted); }

select.form-input {
  cursor: pointer;
  padding-right: 28px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23666' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 8px center;
  appearance: none;
  -webkit-appearance: none;
}

textarea.form-input { resize: vertical; min-height: 60px; }

/* ── Color picker ── */
.form-color {
  width: 36px;
  height: 28px;
  border: none;
  cursor: pointer;
  border-radius: var(--radius-sm);
  padding: 0;
}


/* source: ./xacss/components/taxonomy-picker.css */
/*
 * TaxonomyPicker component styles.
 * Used by Forms/TaxonomyPicker.jsx — canonical picker for SystemTaxonomyTerm selection.
 */

.taxonomy-picker {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}
.taxonomy-picker.is-disabled { opacity: 0.6; pointer-events: none; }

.tp-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
  min-height: 32px;
  align-items: center;
  padding: 4px;
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-sm);
  background: var(--color-bg-surface-2);
}
.taxonomy-picker.has-error .tp-chips {
  border-color: var(--color-danger);
}

.tp-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  background: var(--color-bg-surface-3);
  border: 1px solid var(--color-border-default);
  border-radius: 10px;
  font-size: 12px;
  color: var(--color-text-primary);
  line-height: 1.4;
}
.tp-chip-label { user-select: none; }
.tp-chip-remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px; height: 16px;
  background: none;
  border: none;
  padding: 0;
  margin-left: 2px;
  color: var(--color-text-muted);
  cursor: pointer;
  border-radius: 8px;
}
.tp-chip-remove:hover {
  color: var(--color-text-primary);
  background: color-mix(in srgb, var(--color-text-primary) 10%, transparent);
}

.tp-add {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  background: none;
  border: 1px dashed var(--color-border-default);
  border-radius: 10px;
  font-size: 12px;
  color: var(--color-text-muted);
  cursor: pointer;

}
.tp-add:hover {
  border-color: var(--color-accent);
  color: var(--color-accent);
}

.tp-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 100;
  margin-top: 4px;
  min-width: 200px;
  max-height: 240px;
  overflow-y: auto;
  background: var(--color-bg-surface-2);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-sm);
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  padding: 4px;
}

.tp-option {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  padding: 6px 10px;
  background: none;
  border: none;
  border-radius: var(--radius-sm);
  font-size: 13px;
  color: var(--color-text-primary);
  cursor: pointer;
  text-align: left;
}
.tp-option:hover {
  background: var(--color-bg-surface-3);
}
.tp-option-dot {
  width: 10px; height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}


/* source: ./xacss/components/entity-taxonomy-tags.css */
/* Canonical entity hero tag rendering. Used by all Show pages via <EntityTaxonomyTags />. */

.entity-taxonomy-tags {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 8px 0;
}
.ett-taxonomy {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  font-size: 12px;
}
.ett-label {
  color: var(--color-text-muted);
  font-weight: 500;
  white-space: nowrap;
}
.ett-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  background: var(--color-bg-surface-3);
  border: 1px solid var(--color-border-default);
  border-radius: 10px;
  font-size: 11px;
  color: var(--color-text-primary);
}
.ett-empty {
  color: var(--color-text-muted);
  opacity: 0.6;
}
.ett-edit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px; height: 20px;
  background: none;
  border: 1px dashed var(--color-border-default);
  border-radius: 50%;
  color: var(--color-text-muted);
  cursor: pointer;

}
.ett-edit:hover {
  border-color: var(--color-accent);
  color: var(--color-accent);
}


/* source: ./xacss/components/show-page.css */
.sp-show-wrap {
  display: grid;
  grid-template-columns: 1fr;
  flex: 1; min-height: 0;
}

/* Sidebar overlaps content in same grid cell */
.sp-show-sidebar-left {
  grid-column: 1; grid-row: 1;
  justify-self: start; align-self: stretch;
  z-index: 1; display: flex; gap: 12px;
}
.sp-show-sidebar-right {
  grid-column: 1; grid-row: 1;
  justify-self: end; align-self: stretch;
  z-index: 1; display: flex; gap: 12px;
}

/* Margin classes for content (BASE=280, GAP=12, mults 1/1.5/2, up to 5 panels) */
.sp-ml-0 { margin-left: 0; } .sp-mr-0 { margin-right: 0; }
.sp-ml-292 { margin-left: 292px; } .sp-mr-292 { margin-right: 292px; }
.sp-ml-432 { margin-left: 432px; } .sp-mr-432 { margin-right: 432px; }
.sp-ml-572 { margin-left: 572px; } .sp-mr-572 { margin-right: 572px; }
.sp-ml-584 { margin-left: 584px; } .sp-mr-584 { margin-right: 584px; }
.sp-ml-724 { margin-left: 724px; } .sp-mr-724 { margin-right: 724px; }
.sp-ml-864 { margin-left: 864px; } .sp-mr-864 { margin-right: 864px; }
.sp-ml-876 { margin-left: 876px; } .sp-mr-876 { margin-right: 876px; }
.sp-ml-1004 { margin-left: 1004px; } .sp-mr-1004 { margin-right: 1004px; }
.sp-ml-1016 { margin-left: 1016px; } .sp-mr-1016 { margin-right: 1016px; }
.sp-ml-1144 { margin-left: 1144px; } .sp-mr-1144 { margin-right: 1144px; }
.sp-ml-1156 { margin-left: 1156px; } .sp-mr-1156 { margin-right: 1156px; }
.sp-ml-1168 { margin-left: 1168px; } .sp-mr-1168 { margin-right: 1168px; }
.sp-ml-1296 { margin-left: 1296px; } .sp-mr-1296 { margin-right: 1296px; }
.sp-ml-1308 { margin-left: 1308px; } .sp-mr-1308 { margin-right: 1308px; }
.sp-ml-1436 { margin-left: 1436px; } .sp-mr-1436 { margin-right: 1436px; }
.sp-ml-1448 { margin-left: 1448px; } .sp-mr-1448 { margin-right: 1448px; }
.sp-ml-1460 { margin-left: 1460px; } .sp-mr-1460 { margin-right: 1460px; }
.sp-ml-1576 { margin-left: 1576px; } .sp-mr-1576 { margin-right: 1576px; }
.sp-ml-1588 { margin-left: 1588px; } .sp-mr-1588 { margin-right: 1588px; }
.sp-ml-1600 { margin-left: 1600px; } .sp-mr-1600 { margin-right: 1600px; }
.sp-ml-1716 { margin-left: 1716px; } .sp-mr-1716 { margin-right: 1716px; }
.sp-ml-1728 { margin-left: 1728px; } .sp-mr-1728 { margin-right: 1728px; }
.sp-ml-1740 { margin-left: 1740px; } .sp-mr-1740 { margin-right: 1740px; }
.sp-ml-1868 { margin-left: 1868px; } .sp-mr-1868 { margin-right: 1868px; }
.sp-ml-1880 { margin-left: 1880px; } .sp-mr-1880 { margin-right: 1880px; }
.sp-ml-2008 { margin-left: 2008px; } .sp-mr-2008 { margin-right: 2008px; }
.sp-ml-2020 { margin-left: 2020px; } .sp-mr-2020 { margin-right: 2020px; }
.sp-ml-2148 { margin-left: 2148px; } .sp-mr-2148 { margin-right: 2148px; }
.sp-ml-2160 { margin-left: 2160px; } .sp-mr-2160 { margin-right: 2160px; }
.sp-ml-2288 { margin-left: 2288px; } .sp-mr-2288 { margin-right: 2288px; }
.sp-ml-2300 { margin-left: 2300px; } .sp-mr-2300 { margin-right: 2300px; }
.sp-ml-2440 { margin-left: 2440px; } .sp-mr-2440 { margin-right: 2440px; }
.sp-ml-2580 { margin-left: 2580px; } .sp-mr-2580 { margin-right: 2580px; }
.sp-ml-2720 { margin-left: 2720px; } .sp-mr-2720 { margin-right: 2720px; }
.sp-ml-2860 { margin-left: 2860px; } .sp-mr-2860 { margin-right: 2860px; }

/* Individual panels inside sidebars */
.sp-show-details {
  flex-shrink: 0;
  background: var(--color-bg-surface-2);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-lg);
  display: flex; flex-direction: column;
  min-height: 0;
}
.sp-show-hero {
  display: flex; align-items: center; gap: 10px;
  padding: 12px;
  border-bottom: 1px solid var(--color-border-default);
}
.sp-show-hero .show-hero-icon {
  width: 40px; height: 40px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  color: var(--color-text-inverse); flex-shrink: 0;
}
/* Show page panel body — internal scroll */
.sp-show-panel-body {
  flex: 1; overflow-y: auto; min-height: 0;
}

/* Layout settings offcanvas */
.sp-layout-panel-card {
  padding: 8px 10px; margin-bottom: 4px;
  background: var(--color-bg-surface-2); border: 1px solid var(--color-border-default);
  border-radius: var(--radius-sm);

}
.sp-layout-panel-card.is-dragging { opacity: 0.4; transform: scale(0.97); }
.sp-layout-panel-card.is-over { margin-top: 4px; border-top: 2px solid var(--color-accent); }
.sp-layout-card-header {
  display: flex; align-items: center; gap: 6px; margin-bottom: 6px; cursor: grab;
}
.sp-layout-card-header:active { cursor: grabbing; }
.sp-layout-grip { color: var(--color-text-muted); flex-shrink: 0; }
.sp-layout-card-title { font-size: 12px; font-weight: 500; }
.sp-layout-btn-row { display: flex; gap: 3px; margin-bottom: 4px; }
.sp-layout-pos-btn {
  flex: 1; padding: 4px 0; font-size: 10px; font-weight: 500;
  border: 1px solid var(--color-border-default); border-radius: 3px;
  background: none; color: var(--color-text-muted); cursor: pointer;
   text-align: center;
}
.sp-layout-pos-btn:hover { border-color: var(--color-accent); color: var(--color-text-primary); }
.sp-layout-pos-btn.is-active {
  background: color-mix(in srgb, var(--color-accent) 10%, transparent);
  border-color: color-mix(in srgb, var(--color-accent) 40%, transparent);
  color: var(--color-accent);
}
.sp-layout-scope { margin-top: 12px; padding: 0 4px; }
.sp-layout-scope-item {
  display: flex; align-items: center; gap: 6px;
  font-size: 11px; cursor: pointer; margin-bottom: 3px;
}

/* Extra toggle for empty fields */
.sp-show-extra-toggle {
  display: flex; align-items: center; gap: 6px;
  padding: 8px 12px; margin: 4px 0;
  border: none; background: none; cursor: pointer;
  font-size: 11px; color: var(--color-text-muted);
   width: 100%;
}
.sp-show-extra-toggle:hover { color: var(--color-text-primary); }

.sp-show-fields {
  flex: 1; overflow-y: auto; padding: 4px 0;
}
.sp-show-field { padding: 6px 12px; }
.sp-show-field-group { margin-top: 8px; }
.sp-show-field-group:first-child { margin-top: 0; }
.sp-show-field-group-title {
  font-size: 9px; font-weight: 600; color: var(--color-text-muted);
  text-transform: uppercase; letter-spacing: 0.04em;
  padding: 4px 12px; border-bottom: 1px solid var(--color-border-default);
  margin-bottom: 2px;
}
.sp-show-field-label {
  font-size: 9px; font-weight: 300; color: var(--color-text-muted);
}
.sp-show-field-value {
  font-size: 13px; color: var(--color-text-primary);
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
}
.sp-show-field-value a { color: var(--color-accent); text-decoration: none; }

/* Inline editable fields in panels */
.sp-show-field-editable { cursor: pointer; border-radius: 6px;  }
.sp-show-field-editable:hover { background: var(--color-bg-surface-2); }
.sp-show-field-edit-icon {
  opacity: 0; color: var(--color-text-muted);  flex-shrink: 0;
}
.sp-show-field-editable:hover .sp-show-field-edit-icon { opacity: 0.6; }
.sp-show-field-editing { background: var(--color-bg-surface-2); border-radius: 6px; }
.sp-show-field-edit { position: relative; }
.ps-inline-input {
  width: 100%; font-size: 13px; padding: 4px 8px; border: 1px solid var(--color-accent);
  border-radius: 4px; background: var(--color-bg-surface); color: var(--color-text-primary);
  outline: none; font-family: inherit;
}
.ps-inline-input:focus { box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-accent) 25%, transparent); }
select.ps-inline-input { cursor: pointer; }
textarea.ps-inline-input { resize: vertical; min-height: 40px; }
.ps-inline-saving {
  position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
}

/* Field sections */
.sp-section { margin-bottom: 4px; }
.sp-section-header {
  display: flex; align-items: center; gap: 6px;
  width: 100%;
  padding: 6px 12px; font-size: 10px; font-weight: 600;
  color: var(--color-text-muted); text-transform: uppercase;
  letter-spacing: 0.04em; user-select: none;
  border: none; border-bottom: 1px solid var(--color-border-default);
  background: transparent;
  cursor: pointer;
  text-align: left;
}
.sp-section-header:hover { color: var(--color-text-primary); }
.sp-section-header:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: -2px;
}
.sp-section-title { flex: 1; }
.sp-section-count {
  font-size: 9px; color: var(--color-text-muted);
  background: var(--color-bg-surface-2); border-radius: 8px;
  padding: 1px 6px;
}
.sp-show-content {
  grid-column: 1; grid-row: 1;
  z-index: 2; min-width: 0; min-height: 0;
  display: flex; flex-direction: column;
}
.sp-show-content .dt-toolbar { padding: 0 12px; }

/* Legacy show-hero-icon reused */
.show-hero-icon {
  width: 48px; height: 48px; border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  color: var(--color-text-inverse); flex-shrink: 0;
}

@media (max-width: 768px) {
  .sp-show-wrap { display: flex; flex-direction: column; }
  .sp-show-sidebar-left, .sp-show-sidebar-right {
    position: static; flex-direction: column; z-index: auto;
  }
  .sp-show-content { margin: 0 !important; z-index: auto; }
  .sp-show-details { width: 100% !important; max-height: 40vh; }
}


/* source: ./xacss/components/entity-show.css */
.entity-show {
    box-sizing: border-box;
    flex: 1 1 auto;
    height: auto;
    min-height: 0;
    min-width: 0;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: var(--space-6, 24px);
    padding-bottom: max(var(--space-8, 32px), env(safe-area-inset-bottom));
    -webkit-overflow-scrolling: touch;
}

.entity-show-shell {
    width: min(100%, 1360px);
    min-height: 0;
    margin: 0 auto;
}

.entity-show-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-4, 16px);
    flex-wrap: wrap;
    padding: 0 0 var(--space-4, 16px);
}

.entity-show-header-actions {
    display: flex;
    flex: 0 0 auto;
    align-items: flex-start;
    justify-content: flex-end;
    min-width: 0;
}

.entity-show-title-block {
    display: flex;
    align-items: center;
    gap: var(--space-3, 12px);
    min-width: 0;
}

.entity-show-title-copy {
    min-width: 0;
}

.entity-show-title {
    margin: 0;
    color: var(--color-text);
    font-size: var(--font-size-xl, 24px);
    line-height: 1.15;
    letter-spacing: normal;
    overflow-wrap: anywhere;
}

.entity-show-description {
    display: block;
    width: min(100%, 720px);
    margin-top: var(--space-4, 16px);
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--color-text-muted);
    font: inherit;
    font-size: 14px;
    line-height: 1.55;
    text-align: left;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.entity-show-description.is-empty {
    color: color-mix(in srgb, var(--color-text-muted) 72%, transparent);
}

.entity-show-description.is-editable {
    cursor: text;
}

.entity-show-description.is-editable:hover {
    color: var(--color-text-muted);
}

.entity-show-description.is-editing {
    min-height: 22px;
    outline: none;
    color: var(--color-text);
    cursor: text;
}

.entity-show-tabs {
    margin-bottom: var(--space-4, 16px);
    border-bottom: 1px solid var(--color-border-subtle);
}

.entity-show-tabs .tabs-nav {
    border-bottom: 0;
    gap: var(--space-4, 16px);
}

.entity-show-tabs .tab-btn {
    gap: 0;
    min-height: 34px;
    padding: 6px 2px;
    border-radius: 0;
    color: var(--color-text-muted);
    line-height: 20px;
    transition: color var(--motion-fast) var(--ease-standard), box-shadow var(--motion-fast) var(--ease-standard);
}

.entity-show-tabs .tab-btn svg,
.entity-show-tabs .tab-btn .icon {
    display: none;
}

.entity-show-tabs .tab-btn.is-active {
    background: transparent;
    color: var(--color-text);
    box-shadow: inset 0 -2px 0 var(--color-accent);
}

.entity-show-tab-panes {
    position: relative;
    min-width: 0;
}

.tab-pane-motion {
    min-width: 0;
}

.tab-pane-motion.is-inactive {
    display: none;
}

.tab-pane-motion.is-active {
    display: block;
}

.entity-show-body {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(280px, 320px);
    gap: var(--space-6, 24px);
    align-items: start;
}

.entity-show-content,
.entity-show-main,
.entity-show-sidebar {
    display: flex;
    flex-direction: column;
    gap: var(--space-4, 16px);
    min-width: 0;
}

.entity-show-content {
    gap: 0;
}

.entity-show-content-slot,
.entity-show-relations-tab-pane,
.entity-show-wall-tab-pane {
    min-width: 0;
    overflow: hidden;
}

.entity-show-sidebar {
    align-self: start;
}

.entity-show-panel {
    border: 1px solid var(--color-border-entity-panel);
    border-radius: var(--radius-md);
    background: var(--color-bg-entity-panel);
    box-shadow: none;
    overflow: hidden;
}

.entity-show-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3, 12px);
    padding: var(--space-4, 16px) var(--space-4, 16px) var(--space-2, 8px);
}

.entity-show-panel-title-wrap {
    display: flex;
    align-items: center;
    gap: var(--space-2, 8px);
    min-width: 0;
    color: var(--color-text-muted);
}

.entity-show-panel-title {
    margin: 0;
    color: var(--color-text);
    font-size: 14px;
    font-weight: 700;
    letter-spacing: normal;
}

.entity-show-panel-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 7px;
    border-radius: 999px;
    color: var(--color-text-muted);
    background: var(--color-surface-muted);
    font-size: 11px;
    font-weight: 700;
}

.entity-show-panel-body {
    padding: var(--space-3, 12px) var(--space-4, 16px) var(--space-4, 16px);
    border-radius: var(--radius-md);
}

.entity-show-sidebar .entity-show-panel {
    border-radius: var(--radius-md);
}

.entity-show-sidebar .entity-show-panel-header {
    padding: var(--space-3, 12px) var(--space-3, 12px) var(--space-1, 4px);
}

.entity-show-sidebar .entity-show-panel-body {
    padding: var(--space-2, 8px) var(--space-3, 12px) var(--space-3, 12px);
}

.entity-show-sidebar .entity-show-panel.is-headerless .entity-show-panel-body {
    padding-top: var(--space-3, 12px);
}

.entity-show .sp-show-field {
    padding: 8px 0;
}

.entity-show-sidebar .sp-show-field {
    display: block;
    border: 0;
}

.entity-show-sidebar .sp-show-field:first-child {
    border: 0;
}

.entity-show-sidebar .sp-show-field-label {
    margin-bottom: 0;
    font-size: 11px;
    font-weight: 600;
    color: var(--color-text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.entity-show-sidebar .sp-show-field-label::after {
    content: "";
}

.entity-show-sidebar .sp-show-field-value {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    width: 100%;
    margin-top: 4px;
    gap: var(--space-2, 8px);
    min-height: 20px;
    color: var(--color-text-entity-sidebar-value);
    font-size: 13px;
    line-height: 1.45;
    text-align: left;
    overflow-wrap: anywhere;
}

.entity-show-sidebar .sp-show-field-value > span,
.entity-show-sidebar .sp-show-field-value > a {
    min-width: 0;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.entity-show-sidebar .sp-show-field-edit {
    flex-basis: 100%;
    min-width: 100%;
}

.entity-show-sidebar .sp-show-field-editable {
    margin: 0 -6px;
    padding-right: 6px;
    padding-left: 6px;
}

.entity-show-sidebar .sp-show-field-editable:hover {
    background: var(--color-bg-hover);
}

.entity-show-section-stack {
    display: flex;
    flex-direction: column;
    gap: var(--space-4, 16px);
}

.entity-show-related-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-5, 20px);
    overflow: hidden;
}

.wall-presence {
    overflow: hidden;
}

.entity-show-related-empty {
    display: flex;
    align-items: center;
    min-height: 34px;
}

.entity-show-empty-state {
    min-height: 34px;
    display: flex;
    align-items: center;
    color: var(--color-text-muted);
    font-size: 13px;
}

.entity-show-related-group {
    border: 0;
    border-radius: 0;
    background: transparent;
    overflow: visible;
}

.entity-show-related-group-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3, 12px);
    padding: 0 0 var(--space-2, 8px);
}

.entity-show-related-group-header {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2, 8px);
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--color-text);
    font: inherit;
    font-weight: 700;
    text-align: left;
    cursor: pointer;
}

.entity-show-related-group-header:hover {
    color: var(--color-text-muted);
}

.entity-show-related-group-title {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
}

.entity-show-related-group-arrow {
    flex-shrink: 0;
    color: var(--color-text-muted);
}

.entity-show-related-card-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-2, 8px);
    padding: 0;
    border-top: 0;
    overflow: hidden;
}

.entity-show-related-table-wrap {
    display: block;
    overflow: hidden;
}

.entity-show-related-table-scroll {
    overflow-x: auto;
    border: 1px solid var(--color-border-entity-panel);
    border-radius: var(--radius-md);
    background: var(--color-bg-entity-panel);
}

.entity-show-related-table {
    width: 100%;
    min-width: 560px;
    border-collapse: collapse;
    color: var(--color-text);
    font-size: 12px;
}

.entity-show-related-table th,
.entity-show-related-table td {
    padding: 9px 10px;
    border-bottom: 1px solid var(--color-border-subtle);
    text-align: left;
    vertical-align: top;
}

.entity-show-related-table-actions-header,
.entity-show-related-table-actions-cell {
    width: 1%;
    white-space: nowrap;
}

.entity-show-related-table th {
    color: var(--color-text-muted);
    font-weight: 600;
}

.entity-show-related-table tbody tr {
    cursor: pointer;
}

.entity-show-related-table tbody tr.is-static {
    cursor: default;
}

.entity-show-related-table tbody tr:hover {
    background: var(--color-bg-entity-surface);
}

.entity-show-related-table tbody tr:last-child td {
    border-bottom: 0;
}

.entity-show-related-more-wrap {
    grid-column: 1 / -1;
}

.entity-show-related-more {
    display: inline-flex;
    align-items: center;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--color-text-muted);
    font: inherit;
    font-size: 12px;
    font-weight: 600;
    line-height: 18px;
    cursor: pointer;
}

.entity-show-related-more:hover {
    color: var(--color-text);
}

.entity-show-related-card {
    display: block;
    width: 100%;
    min-height: 88px;
    padding: var(--space-3, 12px) var(--space-4, 16px);
    border: 1px solid var(--color-border-entity-panel);
    border-radius: var(--radius-md);
    background: var(--color-bg-entity-panel);
    color: var(--color-text);
    font: inherit;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
}

.entity-show-related-card.is-dense {
    min-height: 104px;
}

.entity-show-related-card.is-static {
    cursor: default;
}

.entity-show-related-card:hover {
    background: var(--color-bg-entity-panel-hover);
}

.entity-show-related-card.is-static:hover {
    background: var(--color-bg-entity-panel);
}

.entity-show-related-card-copy {
    min-width: 0;
}

.entity-show-related-card-title {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--color-text);
    font-size: 13px;
    font-weight: 700;
}

.entity-show-related-card-rows {
    display: flex;
    flex-direction: column;
    gap: 5px;
    margin-top: 8px;
}

.entity-show-related-inline-actions {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
}

.entity-show-related-card-actions {
    margin-top: var(--space-2, 8px);
}

.entity-show-related-inline-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 24px;
    padding: 2px 8px;
    border: 1px solid var(--color-border-entity-panel);
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--color-text-muted);
    font: inherit;
    font-size: 11px;
    font-weight: 600;
    line-height: 16px;
    cursor: pointer;
}

.entity-show-related-inline-action:hover:not(:disabled) {
    color: var(--color-text);
    border-color: var(--color-border-strong);
}

.entity-show-related-inline-action.is-danger {
    color: var(--color-danger);
    border-color: color-mix(in srgb, var(--color-danger) 32%, transparent);
}

.entity-show-related-inline-action:disabled {
    opacity: 0.45;
    cursor: default;
}

.entity-show-related-card-row {
    display: grid;
    grid-template-columns: minmax(66px, 38%) minmax(0, 1fr);
    gap: var(--space-2, 8px);
    color: var(--color-text-muted);
    font-size: 12px;
    line-height: 1.4;
}

.entity-show-related-card-row strong {
    min-width: 0;
    color: var(--color-text);
    font-weight: 500;
    overflow-wrap: anywhere;
}

.entity-show-related-settings {
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: 4px 0 8px;
}

.entity-show-related-settings-title {
    color: var(--color-text);
    font-size: 12px;
    font-weight: 700;
    padding: 0 12px 7px;
}

.entity-show-related-settings-section + .entity-show-related-settings-section {
    margin-top: 6px;
}

.entity-show-related-settings-section-title {
    padding: 7px 10px 5px;
    color: var(--color-text-muted);
    font-size: 11px;
    font-weight: 700;
    line-height: 14px;
    letter-spacing: 0.02em;
}

.entity-show-related-mode-toggle {
    display: flex;
    gap: 2px;
    padding: 0 10px 8px;
}

.entity-show-related-mode-toggle button {
    flex: 1 1 0;
    min-height: 26px;
    padding: 2px 7px;
    border: 1px solid var(--color-border-subtle);
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--color-text-muted);
    font: inherit;
    font-size: 11px;
    line-height: 16px;
    cursor: pointer;
}

.entity-show-related-mode-toggle button.is-active {
    border-color: var(--color-accent);
    color: var(--color-accent);
}

.entity-show-related-settings-control-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 4px;
    min-width: 0;
    padding: 0 10px 8px;
}

.entity-show-related-settings-control-grid .entity-show-related-mode-toggle {
    padding: 0;
}

.entity-show-related-settings-row .entity-show-related-settings-control-grid {
    padding: 0;
}

.entity-show-related-settings-row .entity-show-related-mode-toggle button {
    min-height: 24px;
    padding: 1px 6px;
}

.entity-show-related-settings-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
    gap: 6px;
    padding: 7px 10px;
    border-top: 1px solid var(--color-border-subtle);
    color: var(--color-text);
    font-size: 12px;
}

.entity-show-related-settings-row:first-of-type {
    border-top: 0;
}

.entity-show-related-settings-main {
    display: flex;
    flex-direction: column;
    gap: 5px;
    min-width: 0;
}

.entity-show-related-settings-label {
    color: var(--color-text);
    font-weight: 600;
    line-height: 16px;
}

.entity-show-related-settings-fields {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.entity-show-related-settings-field {
    display: grid;
    grid-template-columns: 56px minmax(0, 1fr);
    align-items: center;
    gap: 6px;
    min-width: 0;
    color: var(--color-text-muted);
    font-size: 11px;
}

.entity-show-related-settings-field select {
    width: 100%;
    min-height: 26px;
    padding: 3px 7px;
    border: 1px solid var(--color-border-entity-panel);
    border-radius: var(--radius-sm);
    background: var(--color-bg-entity-panel);
    color: var(--color-text);
    font: inherit;
    font-size: 11px;
}

.entity-show-related-settings-empty {
    padding: 4px 10px 10px;
    color: var(--color-text-muted);
    font-size: 12px;
}

.entity-show-related-settings-actions {
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    gap: 2px;
    padding-top: 0;
}

.entity-show-related-settings-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: var(--color-text-muted);
    cursor: pointer;

}

.entity-show-related-settings-icon-btn:hover:not(:disabled) {
    background: var(--color-bg-entity-panel);
    color: var(--color-text);
}

.entity-show-related-settings-icon-btn:disabled {
    cursor: default;
    opacity: 0.28;
}

.entity-show-view-settings {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 10px;
}

.entity-show-view-settings-section {
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.entity-show-view-settings-title {
    color: var(--color-text);
    font-size: 12px;
    font-weight: 700;
}

.entity-show-view-settings-options {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-2, 8px);
}

.entity-show-view-option {
    min-height: 28px;
    padding: 4px 8px;
    border: 1px solid var(--color-border-entity-panel);
    border-radius: var(--radius-md);
    background: var(--color-bg-entity-panel);
    color: var(--color-text-muted);
    font: inherit;
    font-size: 12px;
    text-align: left;
    cursor: pointer;
}

.entity-show-view-option:hover,
.entity-show-view-option.is-active {
    color: var(--color-text);
    border-color: var(--color-accent);
}

.entity-show-view-settings-field {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 82px;
    align-items: center;
    gap: 8px;
    color: var(--color-text-muted);
    font-size: 12px;
}

.entity-show-view-settings-field input {
    width: 100%;
    min-height: 26px;
    padding: 4px 7px;
    border: 1px solid var(--color-border-entity-panel);
    border-radius: var(--radius-md);
    background: var(--color-bg-entity-panel);
    color: var(--color-text);
    font: inherit;
}

.entity-show-view-settings-hint {
    color: var(--color-text-muted);
    font-size: 12px;
    line-height: 1.4;
}

.entity-show-view-save-status {
    padding: 6px 10px;
    border: 1px solid var(--color-border-entity-panel);
    border-radius: var(--radius-sm);
    background: var(--color-bg-entity-panel);
    color: var(--color-text-muted);
    font-size: 11px;
    line-height: 16px;
}

.entity-show-view-save-status.is-error {
    color: var(--color-danger);
    border-color: color-mix(in srgb, var(--color-danger) 32%, transparent);
}

.view-settings-stack {
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.view-settings-stack-item + .view-settings-stack-item {
    border-top: 1px solid var(--color-border-entity-panel);
}

.view-settings-panel.ps-panel {
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.view-settings-panel .ps-body {
    flex: 1 1 auto;
    min-height: 0;
    padding: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
}

.view-settings-panel.is-compact .entity-show-view-settings {
    gap: 9px;
    padding: 8px;
}

.view-settings-panel.is-compact .entity-show-related-settings-title,
.view-settings-panel.is-compact .entity-show-view-settings-title {
    padding-right: 8px;
    padding-left: 8px;
    font-size: 11px;
}

.view-settings-panel.is-compact .entity-show-related-settings-section-title {
    padding: 5px 8px 4px;
}

.view-settings-panel.is-compact .entity-show-related-mode-toggle {
    padding: 0 8px 6px;
}

.view-settings-panel.is-compact .entity-show-related-mode-toggle button,
.view-settings-panel.is-compact .entity-show-view-option {
    min-height: 24px;
    padding: 1px 6px;
    font-size: 11px;
}

.view-settings-panel.is-compact .entity-show-related-settings-control-grid {
    padding: 0 8px 6px;
}

.view-settings-panel.is-compact .entity-show-related-settings-row {
    gap: 4px;
    padding: 5px 8px;
}

.view-settings-panel.is-compact .entity-show-related-settings-main {
    gap: 4px;
}

.view-settings-panel.is-compact .entity-show-related-settings-actions {
    gap: 1px;
}

.view-settings-panel.is-compact .entity-show-view-settings-options {
    gap: 5px;
}

.view-settings-panel.is-compact .entity-show-view-save-status {
    margin: 0 8px 8px;
    padding: 5px 8px;
}

.view-settings-empty {
    padding: 24px;
    text-align: center;
    color: var(--color-text-muted);
}

.view-settings-empty p {
    margin: 8px 0 0;
}

.entity-show-field-stack .sp-show-fields {
    padding: 0;
}

.entity-show-field-stack .sp-show-field:first-child {
    border-top: 0;
}

.entity-show-panel-plain {
    border: 0;
    background: transparent;
    box-shadow: none;
}

.entity-show-panel-plain > .entity-show-panel-body {
    padding: 0;
}

.entity-show-wall-panel .wall {
    border-radius: var(--radius-md);
}

.entity-show .files-grid-actions {
    margin-bottom: var(--space-3, 12px);
}

button.entity-show-fields-more {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    align-self: flex-start;
    margin-top: var(--space-2, 8px);
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--color-text-muted);
    font: inherit;
    font-size: 11px;
    font-weight: 600;
    line-height: 16px;
    white-space: nowrap;
    cursor: pointer;
}

button.entity-show-fields-more:hover {
    color: var(--color-text);
}

button.entity-show-fields-more .icon {
    width: 10px;
    height: 10px;
}

.entity-show-timeline-preview {
    display: flex;
    flex-direction: column;
    gap: var(--space-2, 8px);
}

.entity-show-timeline-preview.is-loading,
.entity-show-timeline-empty {
    min-height: 30px;
    display: flex;
    align-items: center;
    color: var(--color-text-muted);
    font-size: 13px;
}

.entity-show-timeline-items {
    display: flex;
    flex-direction: column;
    gap: var(--space-2, 8px);
}

.entity-show-timeline-item {
    display: flex;
    align-items: flex-start;
    gap: var(--space-2, 8px);
    color: var(--color-text-muted);
}

.entity-show-timeline-copy {
    min-width: 0;
}

.entity-show-timeline-text {
    color: var(--color-text);
    font-size: 13px;
    line-height: 1.35;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.entity-show-timeline-meta {
    margin-top: 2px;
    color: var(--color-text-muted);
    font-size: 11px;
}

.entity-show-timeline-more {
    align-self: flex-start;
}

.entity-show-notes,
.entity-show-activity-feed {
    display: flex;
    flex-direction: column;
    gap: var(--space-3, 12px);
}

.entity-show-note-form {
    display: flex;
    flex-direction: column;
    gap: var(--space-2, 8px);
}

.entity-show-note-form .form-control {
    resize: vertical;
}

.entity-show-note-actions {
    display: flex;
    justify-content: flex-end;
}

.entity-show-note-list,
.entity-show-activity-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-2, 8px);
}

.entity-show-note-card {
    padding: var(--space-3, 12px);
    border: 1px solid var(--color-border-subtle);
    border-radius: var(--radius-lg, 14px);
    background: var(--color-surface-muted);
}

.entity-show-note-text {
    color: var(--color-text);
    font-size: 13px;
    line-height: 1.45;
}

.entity-show-note-meta {
    margin-top: var(--space-1, 4px);
    color: var(--color-text-muted);
    font-size: 11px;
}

.entity-show-activity-entry {
    display: grid;
    grid-template-columns: 30px minmax(0, 1fr);
    gap: var(--space-3, 12px);
    padding: var(--space-3, 12px);
    border: 1px solid var(--color-border-subtle);
    border-radius: var(--radius-lg, 14px);
    background: var(--color-surface-muted);
}

.entity-show-activity-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 10px;
    color: var(--color-text-muted);
    background: var(--color-surface-muted);
}

.entity-show-activity-line {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: baseline;
    color: var(--color-text-muted);
    font-size: 13px;
}

.entity-show-activity-author {
    color: var(--color-text);
    font-weight: 700;
}

.entity-show-activity-description {
    color: var(--color-text);
}

.entity-show-activity-time {
    margin-left: auto;
    color: var(--color-text-muted);
    font-size: 11px;
}

.entity-show-activity-changes {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: var(--space-2, 8px);
    margin-top: var(--space-2, 8px);
}

.entity-show-activity-change {
    display: flex;
    justify-content: space-between;
    gap: var(--space-2, 8px);
    color: var(--color-text-muted);
    font-size: 12px;
}

.entity-show-activity-change strong {
    color: var(--color-text);
    font-weight: 500;
}

@media (max-width: 1100px) {
    .entity-show-body {
        grid-template-columns: minmax(0, 1fr) minmax(250px, 300px);
    }

    .entity-show-related-card-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 900px) {
    .entity-show {
        padding: var(--space-4, 16px);
    }

    .entity-show-header {
        align-items: flex-start;
        flex-direction: row;
    }

    .entity-show-header-actions {
        width: 100%;
        min-width: 100%;
        justify-content: flex-start;
    }

    .entity-show-body {
        grid-template-columns: 1fr;
    }

    .entity-show-sidebar {
        align-self: stretch;
    }

    .entity-show-related-settings-row {
        grid-template-columns: 1fr;
    }

    .entity-show-related-settings-actions {
        justify-content: flex-start;
    }
}

@media (max-width: 640px) {
    .entity-show-related-card-grid {
        grid-template-columns: 1fr;
    }

    .entity-show-related-settings-field {
        grid-template-columns: 1fr;
    }
}
.entity-show-content-slot,
.entity-show-relations-tab-pane,
.entity-show-wall-tab-pane,
.entity-show-related-list {
    overflow: visible;
}

.entity-show-related-group-title {
    position: relative;
}


/* source: ./xacss/components/flow-show.css */
/*
 * FlowEntityShowLayout (P0-A, prompt 36).
 * Layout для show/hub graph/flow/script entities. Aligned с sp-show / dt / show-page patterns.
 * Mobile-first: single column < 768px; на desktop 2-col panels grid.
 */

.flow-show {
    display: flex;
    flex-direction: column;
    gap: var(--space-4, 1rem);
    padding: var(--space-3, 0.75rem) var(--space-4, 1rem);
}

.flow-show-hero {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: var(--space-3, 0.75rem);
    flex-wrap: wrap;
}

.flow-show-hero-titles { flex: 1 1 auto; min-width: 0; }
.flow-show-title {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--color-text-primary);
}
.flow-show-subtitle {
    margin: var(--space-1, 0.25rem) 0 0;
    color: var(--color-text-secondary);
    font-size: 0.9rem;
}
.flow-show-hero-badges {
    display: flex;
    gap: var(--space-2, 0.5rem);
    align-items: center;
    flex-wrap: wrap;
}

.flow-show-summary {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: var(--space-2, 0.5rem);
}
.flow-show-summary-card {
    background: var(--color-bg-surface-2);
    border: 1px solid var(--color-border-default);
    border-radius: var(--radius-md, 6px);
    padding: var(--space-3, 0.75rem);
}
.flow-show-summary-label {
    display: flex;
    align-items: center;
    gap: var(--space-1, 0.25rem);
    color: var(--color-text-secondary);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}
.flow-show-summary-value {
    margin-top: var(--space-1, 0.25rem);
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--color-text-primary);
}

.flow-show-graph {
    background: var(--color-bg-surface-2);
    border: 1px solid var(--color-border-default);
    border-radius: var(--radius-md, 6px);
    min-height: 220px;
    display: flex;
    align-items: stretch;
    justify-content: stretch;
    overflow: hidden;
}
.flow-show-graph-preview {
    flex: 1 1 auto;
    min-height: 220px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-3, 0.75rem);
}

.flow-show-panels {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-3, 0.75rem);
}
.flow-show-panel {
    background: var(--color-bg-surface-2);
    border: 1px solid var(--color-border-default);
    border-radius: var(--radius-md, 6px);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
.flow-show-panel-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-2, 0.5rem);
    padding: var(--space-3, 0.75rem);
    border-bottom: 1px solid var(--color-border-default);
}
.flow-show-panel-title {
    margin: 0;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--color-text-primary);
}
.flow-show-panel-body {
    padding: var(--space-3, 0.75rem);
    flex: 1 1 auto;
    overflow: auto;
}
.flow-show-panel-empty {
    margin: 0;
    color: var(--color-text-secondary);
    font-size: 0.85rem;
}

.flow-show-activity {
    background: var(--color-bg-surface-2);
    border: 1px solid var(--color-border-default);
    border-radius: var(--radius-md, 6px);
    padding: var(--space-3, 0.75rem);
}

@media (max-width: 768px) {
    .flow-show-hero { flex-direction: column; align-items: stretch; }
    .flow-show-panels { grid-template-columns: 1fr; }
    .flow-show-summary { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 480px) {
    .flow-show-summary { grid-template-columns: 1fr; }
}


/* source: ./xacss/components/automation-builders.css */
.automation-rule-builder,
.automation-button-builder {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.automation-rule-row,
.automation-button-row {
    display: grid;
    grid-template-columns: minmax(140px, 1.35fr) minmax(116px, 0.9fr) minmax(120px, 1fr) 32px;
    gap: 6px;
    align-items: center;
}

.automation-rule-row > .btn-only,
.automation-button-row > .btn-only {
    width: 32px;
    min-width: 32px;
    height: 32px;
    padding: 0;
}

.automation-builder-add {
    align-self: flex-start;
}

@media (max-width: 760px) {
    .automation-rule-row,
    .automation-button-row {
        grid-template-columns: minmax(0, 1fr) 32px;
    }

    .automation-rule-row > :not(.btn-only),
    .automation-button-row > :not(.btn-only) {
        grid-column: 1;
    }

    .automation-rule-row > .btn-only,
    .automation-button-row > .btn-only {
        grid-column: 2;
        grid-row: 1;
    }
}


/* source: ./xacss/components/files-grid.css */
/* Canonical FilesGrid — used by ShowPage/FilesGrid.jsx */

.files-grid-wrap { display: flex; flex-direction: column; gap: var(--space-4); }

.files-grid-actions { display: flex; justify-content: flex-end; }

.files-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 0.75rem;
}

.file-card {
  position: relative;
  display: flex; align-items: center; gap: 0.75rem; padding: 0.75rem;
  border: 1px solid var(--color-border-default); border-radius: var(--radius-md);
  text-decoration: none; color: inherit;

}
.file-card:hover { border-color: var(--color-accent); }

.file-card-link {
  display: flex; align-items: center; gap: 0.75rem;
  flex: 1 1 auto; min-width: 0;
  text-decoration: none; color: inherit;
}
.file-card-link > span {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.file-card-remove {
  flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px;
  border: none; background: transparent;
  color: var(--color-text-muted);
  border-radius: var(--radius-sm); cursor: pointer;
}
.file-card-remove:hover { color: var(--color-danger); background: var(--color-bg-surface-2); }

@media (max-width: 768px) {
  .files-grid { grid-template-columns: 1fr; }
}


/* source: ./xacss/components/action-bar.css */
/* Canonical ActionBar — groups header/toolbar actions with consistent spacing */

.action-bar {
  display: inline-flex;
  align-items: center;
  gap: var(--xa-space-1, 6px);
  flex-wrap: wrap;
}

.action-bar-left { justify-content: flex-start; }
.action-bar-right { justify-content: flex-end; }
.action-bar-center { justify-content: center; }


/* source: ./xacss/components/toggle-section.css */
/* Canonical ToggleSection — accessible collapsible block */

.toggle-section {
  display: flex;
  flex-direction: column;
  border-bottom: 1px solid var(--color-border-default);
}

.toggle-section-head {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  font-size: 11px;
  font-weight: 600;
  color: var(--color-text-muted);
  background: transparent;
  border: none;
  cursor: pointer;
  text-align: left;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  user-select: none;
}
.toggle-section-head:hover { color: var(--color-text-primary); }
.toggle-section-head:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: -2px;
  border-radius: 4px;
}

.toggle-section-title { flex: 1; }
.toggle-section-count {
  font-size: 10px;
  color: var(--color-text-muted);
  background: var(--color-bg-surface-2);
  border-radius: 8px;
  padding: 1px 6px;
}

.toggle-section-body { padding: 4px 0; }


/* source: ./xacss/components/interaction.css */
/*
 * Product-wide interaction contract: browser focus/tap rings must not paint
 * a second blue border over the component's own hover/selected state.
 * Form controls retain their explicit component border treatment.
 */
:where(
    a,
    button,
    summary,
    input,
    select,
    textarea,
    [role="button"],
    [tabindex]
) {
    -webkit-tap-highlight-color: transparent;
}

:where(
    a,
    button,
    summary,
    input,
    select,
    textarea,
    [role="button"],
    [tabindex]
):focus,
:where(
    a,
    button,
    summary,
    input,
    select,
    textarea,
    [role="button"],
    [tabindex]
):focus-visible {
    outline: none !important;
}

:where(a, button, summary, [role="button"], [tabindex]):focus,
:where(a, button, summary, [role="button"], [tabindex]):focus-visible {
    box-shadow: none !important;
}