/* =============================================================================
* xtender-tokens.css — XTender Kit design tokens
*
* VERBATIM COPY of the canonical :root block from
* /app/shared/css/shared-variables.css (v3.0.0 — Xtender Brand Identity)
* plus the --x-header-* defaults from
* /app/shared/components/header/header.css
* plus the [data-theme="dark"] token overrides.
*
* The app is the SOURCE OF TRUTH. If brand tokens change there, re-copy them
* here and record the date in docs/changelog.md. Synced: 2026-05-31.
*
* Brand: #0C5E94 (blue) · #F69047 (orange) · #254048 (dark)
* Font: Plus Jakarta Sans
*
* Kit refinements (2026-06-26): harmonised the status palette so each intent has
* a deep TEXT tone + a brand-aligned *-solid FILL tone (no more two greens / two
* reds); evened the radius scale (sm 4→6); added --x-control-height. These are
* intentional kit improvements — re-apply them if you re-sync from app source.
* ============================================================================= */
:root {
/* Brand Blue — Primary (logo left chevron #0C5E94) */
--x-primary: #0C5E94;
--x-primary-dark: #0A4E7C;
--x-primary-light: #1D7DC0;
--x-primary-hover: #0A4E7C;
--x-primary-rgb: 12, 94, 148;
--x-secondary: #F69047;
--x-secondary-dark: #C0641E;
/* Blue Ramp */
--x-blue-50: #E8F3FB; --x-blue-100: #C3DCF3; --x-blue-200: #8BBDE7;
--x-blue-300: #4D9DD8; --x-blue-400: #1D7DC0; --x-blue-500: #0C5E94;
--x-blue-600: #0A4E7C; --x-blue-700: #083E62; --x-blue-800: #052D47;
/* Orange Ramp */
--x-orange-50: #FEF5EC; --x-orange-100: #FDE3C6; --x-orange-200: #FBCA9B;
--x-orange-300: #F9B070; --x-orange-400: #F69047; --x-orange-500: #E07A30;
--x-orange-600: #C0641E; --x-orange-700: #9A4E10;
/* Dark Ramp (wordmark #254048) */
--x-dark-50: #EBF0F1; --x-dark-100: #C7D5D8; --x-dark-200: #9FB8BC;
--x-dark-300: #6E8E94; --x-dark-400: #476772; --x-dark-500: #254048;
--x-dark-600: #1D333B; --x-dark-700: #16272E; --x-dark-800: #0E1B21;
/* Status Colors — brand-tinted.
* Two registers per intent, used consistently across the kit:
* --x-* deep tone for TEXT on a tinted --x-*-bg (badges, tags, alerts)
* --x-*-solid vivid fill for SOLID surfaces (buttons, bars, dots, KPI rails)
* Both are harmonised to the brand so the kit never shows two greens/two reds.
*/
--x-success: #1A5C34;
--x-success-dark: #144A28;
--x-success-solid: #1F8A55; /* brand-harmonised vivid green (was generic #059669) */
--x-success-solid-rgb: 31, 138, 85;
--x-success-bg: #E9F7EF;
--x-success-border: #7DD3A8;
--x-warning: #7A4210;
--x-warning-dark: #63360D;
--x-warning-solid: #E07A30; /* brand orange-500 — warning lives in the brand orange family (was #d97706) */
--x-warning-solid-rgb: 224, 122, 48;
--x-warning-bg: #FEF5EC;
--x-warning-border: #F9B070;
--x-danger: #8B1F1F;
--x-danger-dark: #711919;
--x-danger-solid: #C0392B; /* brand-harmonised brick red (was generic #dc2626) */
--x-danger-solid-rgb: 192, 57, 43;
--x-danger-bg: #FDF2F2;
--x-danger-border: #F5A8A8;
--x-info: #0A4E7C;
--x-info-dark: #083E62;
--x-info-solid: var(--x-header-primary, var(--x-primary));
--x-info-bg: #E8F3FB;
--x-info-border: #8BBDE7;
/* Accent Colours — professional palette (no purple/pink/indigo/teal).
* The semantic accents now alias the harmonised *-solid tokens above, so a
* KPI rail, a toast border and a success badge all read the same green. */
--x-accent-blue: var(--x-header-primary, #0C5E94);
--x-accent-blue-dark: var(--x-header-primary-dark, #0A4E7C);
--x-accent-purple: #0A4E7C;
--x-accent-amber: var(--x-warning-solid);
--x-accent-green: var(--x-success-solid);
--x-accent-pink: #F69047;
--x-accent-indigo: #254048;
--x-accent-teal: #1D7DC0;
--x-accent-orange: #F69047;
--x-accent-red: var(--x-danger-solid);
/* Text Colors — uses brand dark */
--x-text-primary: #254048;
--x-text-secondary: #476772;
--x-text-tertiary: #6E8E94;
--x-text-muted: #8794A3;
--x-text-light: #B0B8C4;
/* Grey Scale — brand-neutral */
--x-gray-50: #F7F8F9;
--x-gray-100: #EAECEF;
--x-gray-200: #D2D6DC;
--x-gray-300: #B0B8C4;
--x-gray-400: #8794A3;
--x-gray-500: #5F6E7D;
--x-gray-600: #445160;
--x-gray-700: #313D4A;
--x-gray-800: #1E2835;
--x-gray-900: #0D1219;
/* Background / Surfaces */
--x-bg-primary: #FFFFFF;
--x-bg-secondary: #F4F6F8;
--x-bg-tertiary: #F0F2F5;
--x-bg-hover: rgba(37, 64, 72, 0.04);
--x-bg-active: rgba(37, 64, 72, 0.08);
/* Border Colors */
--x-border: rgba(37, 64, 72, 0.13);
--x-border-light: rgba(37, 64, 72, 0.07);
--x-border-dark: rgba(37, 64, 72, 0.24);
/* Spacing */
--x-spacing-xs: 0.25rem; /* 4px */
--x-spacing-sm: 0.5rem; /* 8px */
--x-spacing-md: 1rem; /* 16px */
--x-spacing-lg: 1.5rem; /* 24px */
--x-spacing-xl: 2rem; /* 32px */
--x-spacing-2xl: 3rem; /* 48px */
/* Typography */
--x-font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif;
--x-font-mono: 'JetBrains Mono', 'Fira Code', 'Consolas', monospace;
--x-font-size-xs: 0.6875rem; /* 11px */
--x-font-size-sm: 0.8125rem; /* 13px */
--x-font-size-base: 0.9375rem; /* 15px */
--x-font-size-lg: 1.125rem; /* 18px */
--x-font-size-xl: 1.25rem; /* 20px */
--x-font-size-2xl: 1.5rem; /* 24px */
/* Border Radius — even 6 / 8 / 12 / 16 step. (--x-radius-sm was 4px, which
clashed with the 6px/8px fallbacks components were written against; 6px
harmonises the scale and reads a touch more modern.) */
--x-radius-sm: 6px;
--x-radius: 8px;
--x-radius-lg: 12px;
--x-radius-xl: 16px;
--x-radius-full: 9999px;
/* Shadows — brand-tinted */
--x-shadow-sm: 0 1px 4px rgba(37, 64, 72, 0.07);
--x-shadow: 0 1px 4px rgba(37, 64, 72, 0.07), 0 1px 2px rgba(37, 64, 72, 0.04);
--x-shadow-md: 0 4px 8px rgba(37, 64, 72, 0.08), 0 2px 4px rgba(37, 64, 72, 0.04);
--x-shadow-lg: 0 8px 16px rgba(37, 64, 72, 0.09), 0 4px 8px rgba(37, 64, 72, 0.04);
--x-shadow-xl: 0 16px 32px rgba(37, 64, 72, 0.10), 0 8px 12px rgba(37, 64, 72, 0.05);
/* Layout */
--x-sidebar-width: 56px;
--x-sidebar-expanded-width: 280px;
--x-sidebar-open-width: 240px; /* collapsible sidebar, expanded (pinned-open) width */
--x-topbar-height: 60px;
/* Control height — buttons, inputs, selects & icon-buttons share one base
height so they line up in toolbars and filter bars (was 38px buttons /
40px inputs — a 2px mismatch that broke alignment). */
--x-control-height: 38px;
--x-control-height-sm: 32px;
--x-control-height-lg: 46px;
/* Transitions */
--x-transition-fast: all 0.15s cubic-bezier(0.16, 1, 0.3, 1);
--x-transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
--x-transition-slow: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
/* Z-Index Scale */
--x-z-dropdown: 100;
--x-z-sticky: 200;
--x-z-fixed: 250;
--x-z-header: 260; /* global header outranks the fixed sidebar (250) */
--x-z-modal-backdrop: 99990; /* above the universal header (1000) so it dims; below Google Places autocomplete (100000) + toast (100001) so those still overlay an open modal */
--x-z-modal: 99990; /* .xt-modal renders at calc(+1)=99991 */
--x-z-popover: 400;
--x-z-tooltip: 500;
/* Toast must sit above EVERY modal/popover in the codebase. */
--x-z-toast: 100001;
/* -------------------------------------------------------------------------
* Header / tenant-branding defaults (from header.css).
* The live app overrides --x-header-primary per-tenant inline. The kit
* ships these defaults so primary-coloured components theme correctly
* standalone, and so the preview's colour-picker has something to override.
* Every primary surface in the kit uses var(--x-header-primary, var(--x-primary)).
* --------------------------------------------------------------------------- */
--x-header-primary: #0C5E94;
--x-header-primary-dark: #0A4E7C;
/* Icon stroke width — single knob for the whole sprite (resolves the
1.5-vs-2 inconsistency across the app's legacy icon sources). */
--xt-icon-stroke: 1.75;
}
/* =============================================================================
* Dark theme — TOKEN OVERRIDES ONLY.
* Mirrors the [data-theme="dark"] token block in shared-variables.css. The
* app's legacy catch-all !important shims are intentionally NOT reproduced —
* every xt-* component is driven by var(--x-*), so flipping the tokens is
* sufficient. Set data-theme="dark" on or .
* ============================================================================= */
[data-theme="dark"] {
/* Text Colors */
--x-text-primary: #f9fafb;
--x-text-secondary: #d1d5db;
--x-text-tertiary: #9ca3af;
--x-text-muted: #6b7280;
--x-text-light: #374151;
/* Gray Scale — inverted */
--x-gray-50: #1f2937;
--x-gray-100: #374151;
--x-gray-200: #4b5563;
--x-gray-300: #6b7280;
--x-gray-400: #9ca3af;
--x-gray-500: #d1d5db;
--x-gray-600: #e5e7eb;
--x-gray-700: #f3f4f6;
--x-gray-800: #f9fafb;
--x-gray-900: #ffffff;
/* Backgrounds */
--x-bg-primary: #1f2937;
--x-bg-secondary: #111827;
--x-bg-tertiary: #1a2332;
--x-bg-hover: rgba(255, 255, 255, 0.06);
--x-bg-active: rgba(255, 255, 255, 0.1);
/* Borders */
--x-border: #374151;
--x-border-light: #1f2937;
--x-border-dark: #4b5563;
/* Shadows — darker */
--x-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
--x-shadow: 0 1px 3px rgba(0, 0, 0, 0.4), 0 1px 2px rgba(0, 0, 0, 0.3);
--x-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.4), 0 2px 4px -1px rgba(0, 0, 0, 0.3);
--x-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.4), 0 4px 6px -2px rgba(0, 0, 0, 0.3);
--x-shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.5), 0 10px 10px -5px rgba(0, 0, 0, 0.3);
}
/* Dark page background when the theme is applied at body level */
body[data-theme="dark"] {
background: var(--x-bg-secondary);
color: var(--x-text-primary);
}
/* =============================================================================
* xtender-components.css — the XTender Kit component library
*
* Loaded after tokens/base/layout. Every colour is a var(--x-*); every primary
* surface uses var(--x-header-primary, var(--x-primary)) so per-tenant branding
* flows through. All classes are prefixed xt- (no Bootstrap collisions).
*
* The 16 components marked [VERBATIM] are reproduced byte-faithfully from the
* app's /app/shared/css/xtender-ui.css so this kit is idempotent beside it.
*
* Sections:
* 1. Buttons 9. Badges / status / tag
* 2. Forms 10. Toast / alert
* 3. Cards 11. Empty / skeleton / spinner / progress / live-dot
* 4. Page/section head 12. Modal / confirm / drawer / dropdown / tooltip
* 5. Tables 13. Tabs / chips / view-toggle / toolbar / savebar
* 6. Pagination 14. Welcome / KPI / stat / avatar
* 7. Filter / search 15. Chart wrapper
* 8. (combobox in §7)
* ============================================================================= */
/* =============================================================================
* 1. BUTTONS
* ============================================================================= */
.xt-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--x-spacing-sm);
height: var(--x-control-height);
padding: 0 18px;
font-family: var(--x-font-family);
font-size: var(--x-font-size-sm);
font-weight: 600;
line-height: 1;
letter-spacing: 0.01em;
color: var(--x-text-primary);
background: var(--x-bg-primary);
border: 1px solid var(--x-border);
border-radius: var(--x-radius);
cursor: pointer;
white-space: nowrap;
text-decoration: none;
user-select: none;
transition: var(--x-transition-fast);
}
.xt-btn:hover { text-decoration: none; }
.xt-btn:active { transform: translateY(0.5px); }
.xt-btn svg, .xt-btn .xt-icon { width: 16px; height: 16px; }
.xt-btn:disabled, .xt-btn.is-disabled { opacity: 0.5; cursor: not-allowed; pointer-events: none; }
/* Primary */
.xt-btn--primary {
background: var(--x-header-primary, var(--x-primary));
border-color: var(--x-header-primary, var(--x-primary));
color: #fff;
box-shadow: var(--x-shadow-sm);
}
.xt-btn--primary:hover {
background: var(--x-header-primary-dark, var(--x-primary-dark));
border-color: var(--x-header-primary-dark, var(--x-primary-dark));
box-shadow: var(--x-shadow-md);
transform: translateY(-1px);
}
/* Secondary (light) */
.xt-btn--secondary { background: var(--x-bg-primary); color: var(--x-text-primary); border-color: var(--x-border); }
.xt-btn--secondary:hover { background: var(--x-bg-hover); border-color: var(--x-border-dark); }
/* Ghost (transparent) */
.xt-btn--ghost { background: transparent; color: var(--x-text-secondary); border-color: transparent; }
.xt-btn--ghost:hover { background: var(--x-bg-hover); color: var(--x-text-primary); }
/* Solid intents */
.xt-btn--danger { background: var(--x-danger); border-color: var(--x-danger); color: #fff; }
.xt-btn--danger:hover { background: var(--x-danger-dark); border-color: var(--x-danger-dark); transform: translateY(-1px); }
.xt-btn--success { background: var(--x-success); border-color: var(--x-success); color: #fff; }
.xt-btn--success:hover { background: var(--x-success-dark); border-color: var(--x-success-dark); transform: translateY(-1px); }
.xt-btn--warning { background: var(--x-accent-amber); border-color: var(--x-accent-amber); color: #fff; }
.xt-btn--warning:hover { filter: brightness(0.94); transform: translateY(-1px); }
.xt-btn--info { background: var(--x-info); border-color: var(--x-info); color: #fff; }
.xt-btn--info:hover { background: var(--x-info-dark); border-color: var(--x-info-dark); transform: translateY(-1px); }
/* Sizes */
.xt-btn--xs { height: 28px; padding: 0 10px; font-size: var(--x-font-size-xs); gap: 4px; }
.xt-btn--sm { height: var(--x-control-height-sm); padding: 0 12px; }
.xt-btn--lg { height: var(--x-control-height-lg); padding: 0 24px; font-size: var(--x-font-size-base); }
.xt-btn--xs svg, .xt-btn--xs .xt-icon, .xt-btn--sm svg, .xt-btn--sm .xt-icon { width: 14px; height: 14px; }
.xt-btn--block { display: flex; width: 100%; }
/* Loading */
.xt-btn.is-loading { color: transparent !important; pointer-events: none; position: relative; }
.xt-btn.is-loading::after {
content: '';
position: absolute;
top: 50%; left: 50%;
width: 16px; height: 16px;
margin: -8px 0 0 -8px;
border: 2px solid rgba(255, 255, 255, 0.45);
border-top-color: #fff;
border-radius: 50%;
animation: xt-icon-spin 0.7s linear infinite;
}
.xt-btn--secondary.is-loading::after,
.xt-btn--ghost.is-loading::after { border-color: rgba(37, 64, 72, 0.2); border-top-color: var(--x-text-secondary); }
/* Icon-only button */
.xt-icon-btn {
display: inline-flex;
align-items: center;
justify-content: center;
width: var(--x-control-height); height: var(--x-control-height);
padding: 0;
color: var(--x-text-secondary);
background: transparent;
border: 1px solid transparent;
border-radius: var(--x-radius);
cursor: pointer;
transition: var(--x-transition-fast);
}
.xt-icon-btn:hover { background: var(--x-bg-hover); color: var(--x-text-primary); }
.xt-icon-btn svg, .xt-icon-btn .xt-icon { width: 18px; height: 18px; }
.xt-icon-btn--sm { width: 30px; height: 30px; }
.xt-icon-btn--sm svg, .xt-icon-btn--sm .xt-icon { width: 16px; height: 16px; }
.xt-icon-btn--lg { width: 44px; height: 44px; }
.xt-icon-btn--bordered { border-color: var(--x-border); background: var(--x-bg-primary); }
.xt-icon-btn--danger:hover { background: var(--x-danger-bg); color: var(--x-danger); }
/* Button group / action bar */
.xt-btn-group { display: inline-flex; align-items: center; gap: var(--x-spacing-sm); }
.xt-btn-group--attached { gap: 0; }
.xt-btn-group--attached .xt-btn { border-radius: 0; margin-left: -1px; }
.xt-btn-group--attached .xt-btn:first-child { border-radius: var(--x-radius) 0 0 var(--x-radius); margin-left: 0; }
.xt-btn-group--attached .xt-btn:last-child { border-radius: 0 var(--x-radius) var(--x-radius) 0; }
.xt-action-bar { display: flex; align-items: center; gap: var(--x-spacing-sm); flex-wrap: wrap; }
.xt-action-bar--end { justify-content: flex-end; }
/* =============================================================================
* 2. FORMS
* ============================================================================= */
.xt-form-group { margin-bottom: var(--x-spacing-md); }
.xt-form-label {
display: inline-flex;
align-items: center;
gap: 4px;
margin-bottom: 6px;
font-size: var(--x-font-size-sm);
font-weight: 600;
color: var(--x-text-primary);
}
.xt-form-label.required::after { content: '*'; color: var(--x-danger); margin-left: 2px; }
.xt-form-help { display: block; margin-top: 5px; font-size: var(--x-font-size-xs); color: var(--x-text-tertiary); }
.xt-form-error { display: block; margin-top: 5px; font-size: var(--x-font-size-xs); color: var(--x-danger); font-weight: 500; }
/* The control — covers input / select / textarea */
.xt-input, .xt-select, .xt-textarea {
box-sizing: border-box;
min-width: 0;
width: 100%;
height: var(--x-control-height);
padding: 0 12px;
font-family: var(--x-font-family);
font-size: var(--x-font-size-sm);
color: var(--x-text-primary);
background: var(--x-bg-primary);
border: 1px solid var(--x-border);
border-radius: var(--x-radius);
transition: border-color 120ms ease, box-shadow 120ms ease;
-webkit-appearance: none;
appearance: none;
}
.xt-input::placeholder, .xt-textarea::placeholder { color: var(--x-text-light); }
.xt-input:focus, .xt-select:focus, .xt-textarea:focus {
outline: none;
border-color: var(--x-header-primary, var(--x-primary));
box-shadow: 0 0 0 3px rgba(var(--x-primary-rgb), 0.14);
}
.xt-input:disabled, .xt-select:disabled, .xt-textarea:disabled {
background: var(--x-bg-tertiary); color: var(--x-text-muted); cursor: not-allowed;
}
.xt-input.is-invalid, .xt-select.is-invalid, .xt-textarea.is-invalid {
border-color: var(--x-danger);
}
.xt-input.is-invalid:focus, .xt-textarea.is-invalid:focus { box-shadow: 0 0 0 3px rgba(139, 31, 31, 0.12); }
.xt-input.is-valid { border-color: var(--x-success-border); }
.xt-input--sm, .xt-select--sm { height: var(--x-control-height-sm); font-size: var(--x-font-size-xs); }
.xt-input--lg, .xt-select--lg { height: var(--x-control-height-lg); font-size: var(--x-font-size-base); }
.xt-textarea { height: auto; min-height: 92px; padding: 10px 12px; line-height: 1.5; resize: vertical; }
/* Select chevron */
.xt-select {
padding-right: 36px;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%236E8E94' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 12px center;
cursor: pointer;
}
/* Checkbox & radio */
.xt-check { display: inline-flex; align-items: flex-start; gap: 9px; cursor: pointer; font-size: var(--x-font-size-sm); color: var(--x-text-primary); }
.xt-check-input {
appearance: none; -webkit-appearance: none;
flex-shrink: 0;
width: 18px; height: 18px;
margin: 1px 0 0 0;
border: 1.5px solid var(--x-border-dark);
border-radius: 5px;
background: var(--x-bg-primary);
cursor: pointer;
transition: var(--x-transition-fast);
position: relative;
}
.xt-check-input[type="radio"] { border-radius: 50%; }
.xt-check-input:checked {
background: var(--x-header-primary, var(--x-primary));
border-color: var(--x-header-primary, var(--x-primary));
}
.xt-check-input[type="checkbox"]:checked::after {
content: '';
position: absolute; left: 5px; top: 1.5px;
width: 4px; height: 9px;
border: solid #fff; border-width: 0 2px 2px 0;
transform: rotate(45deg);
}
.xt-check-input[type="radio"]:checked::after {
content: ''; position: absolute; inset: 0; margin: auto;
width: 7px; height: 7px; border-radius: 50%; background: #fff;
}
.xt-check-input:focus-visible { outline: 2px solid var(--x-header-primary, var(--x-primary)); outline-offset: 2px; }
.xt-check-label { line-height: 1.4; }
/* Switch */
.xt-switch { position: relative; display: inline-flex; align-items: center; gap: 10px; cursor: pointer; font-size: var(--x-font-size-sm); }
.xt-switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.xt-switch__track {
width: 40px; height: 22px;
background: var(--x-gray-300);
border-radius: 999px;
position: relative;
transition: background 160ms ease;
flex-shrink: 0;
}
.xt-switch__track::after {
content: ''; position: absolute; top: 2px; left: 2px;
width: 18px; height: 18px; border-radius: 50%;
background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,0.25);
transition: transform 160ms ease;
}
.xt-switch input:checked + .xt-switch__track { background: var(--x-header-primary, var(--x-primary)); }
.xt-switch input:checked + .xt-switch__track::after { transform: translateX(18px); }
.xt-switch input:focus-visible + .xt-switch__track { outline: 2px solid var(--x-header-primary, var(--x-primary)); outline-offset: 2px; }
/* Input group (prefix/suffix) */
.xt-input-group { display: flex; align-items: stretch; }
.xt-input-group .xt-input { border-radius: 0; }
.xt-input-group > :first-child { border-top-left-radius: var(--x-radius); border-bottom-left-radius: var(--x-radius); }
.xt-input-group > :last-child { border-top-right-radius: var(--x-radius); border-bottom-right-radius: var(--x-radius); }
.xt-input-group > * + * { margin-left: -1px; }
.xt-input-group-text {
display: inline-flex; align-items: center;
padding: 0 12px;
background: var(--x-bg-tertiary);
border: 1px solid var(--x-border);
color: var(--x-text-tertiary);
font-size: var(--x-font-size-sm);
white-space: nowrap;
}
.xt-input-group:focus-within .xt-input { border-color: var(--x-header-primary, var(--x-primary)); }
/* Two-column label/control row (xc-form-row equivalent) */
.xt-form-row { display: grid; grid-template-columns: 200px 1fr; gap: var(--x-spacing-md); align-items: start; padding: var(--x-spacing-md) 0; border-bottom: 1px solid var(--x-border-light); }
.xt-form-row:last-child { border-bottom: 0; }
.xt-form-row__label { padding-top: 9px; }
.xt-form-row__label label { font-size: var(--x-font-size-sm); font-weight: 600; color: var(--x-text-primary); }
.xt-form-row__hint { display: block; margin-top: 3px; font-size: var(--x-font-size-xs); color: var(--x-text-tertiary); font-weight: 400; }
.xt-form-row__control { min-width: 0; }
/* =============================================================================
* 3. CARDS
* ============================================================================= */
/* [VERBATIM] base flex card */
.xt-card {
background: var(--x-bg-primary);
border: 1px solid var(--x-border);
border-radius: var(--x-radius-lg);
padding: var(--x-spacing-lg);
display: flex;
flex-direction: column;
}
/* Additive structured card (xc-card style) — for header/body/footer layouts.
Use .xt-card.xt-card--panel to drop the base padding and use the sections. */
.xt-card--panel { padding: 0; overflow: hidden; box-shadow: var(--x-shadow-sm); }
.xt-card__header {
display: flex; align-items: center; justify-content: space-between;
gap: var(--x-spacing-md);
padding: 16px 22px;
border-bottom: 1px solid var(--x-border-light);
background: var(--x-bg-secondary); /* flat tint — brand rule forbids gradients */
}
.xt-card__title { margin: 0; font-size: var(--x-font-size-base); font-weight: 700; color: var(--x-text-primary); display: flex; align-items: center; gap: 12px; letter-spacing: -0.01em; }
.xt-card__subtitle { margin: 3px 0 0 0; font-size: var(--x-font-size-sm); color: var(--x-text-tertiary); }
.xt-card__body { padding: 22px; }
.xt-card__body--flush { padding: 0; }
.xt-card__footer { display: flex; align-items: center; justify-content: flex-end; gap: var(--x-spacing-sm); padding: 14px 22px; border-top: 1px solid var(--x-border-light); background: var(--x-bg-secondary); }
/* =============================================================================
* 4. PAGE HEADER + SECTION HEAD
* ============================================================================= */
.xt-page-header {
display: flex; align-items: flex-end; justify-content: space-between;
gap: var(--x-spacing-lg); flex-wrap: wrap;
padding-bottom: var(--x-spacing-md);
border-bottom: 1px solid var(--x-border-light);
}
.xt-page-header__main { flex: 1 1 auto; min-width: 0; }
.xt-page-header__title { margin: 0; font-size: 22px; font-weight: 700; color: var(--x-text-primary); letter-spacing: -0.015em; }
.xt-page-header__subtitle { margin: 6px 0 0 0; font-size: var(--x-font-size-sm); color: var(--x-text-tertiary); line-height: 1.5; }
.xt-page-header__actions { display: inline-flex; align-items: center; gap: var(--x-spacing-sm); }
/* [VERBATIM] section head */
.xt-section-head { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--x-spacing-md); margin-bottom: var(--x-spacing-md); }
.xt-section-head h3 { margin: 0; font-size: var(--x-font-size-lg); font-weight: 600; color: var(--x-text-primary); line-height: 1.2; }
.xt-section-sub { margin: var(--x-spacing-xs) 0 0 0; font-size: var(--x-font-size-sm); color: var(--x-text-tertiary); }
.xt-section-link { background: transparent; border: none; color: var(--x-header-primary, var(--x-primary)); font-size: var(--x-font-size-sm); font-weight: 600; cursor: pointer; padding: var(--x-spacing-xs) var(--x-spacing-sm); border-radius: var(--x-radius-sm); transition: background 120ms ease; }
.xt-section-link:hover { background: rgba(var(--x-primary-rgb), 0.08); }
/* =============================================================================
* 5. TABLES
* ============================================================================= */
.xt-table-wrap {
background: var(--x-bg-primary);
border: 1px solid var(--x-border);
border-radius: var(--x-radius-lg);
box-shadow: var(--x-shadow-sm);
overflow: hidden;
}
.xt-table-toolbar {
display: flex; align-items: center; justify-content: space-between; gap: var(--x-spacing-md);
padding: 12px 18px;
border-bottom: 1px solid var(--x-border-light);
}
.xt-table-toolbar__info { font-size: var(--x-font-size-sm); color: var(--x-text-tertiary); }
.xt-table-scroll { overflow-x: auto; }
.xt-table { width: 100%; border-collapse: collapse; font-size: var(--x-font-size-sm); }
.xt-table thead th {
position: sticky; top: 0;
text-align: left;
padding: 11px 16px;
font-size: var(--x-font-size-xs);
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.04em;
color: var(--x-text-tertiary);
background: var(--x-bg-secondary);
border-bottom: 1px solid var(--x-border);
white-space: nowrap;
}
.xt-table th[data-sort] { cursor: pointer; user-select: none; }
.xt-table th[data-sort]:hover { color: var(--x-text-secondary); }
.xt-table th[data-sort]::after { content: '↕'; opacity: 0.35; margin-left: 6px; font-size: 10px; }
.xt-table th[data-sort][aria-sort="ascending"]::after { content: '↑'; opacity: 1; color: var(--x-header-primary, var(--x-primary)); }
.xt-table th[data-sort][aria-sort="descending"]::after { content: '↓'; opacity: 1; color: var(--x-header-primary, var(--x-primary)); }
.xt-table tbody td { padding: 12px 16px; border-bottom: 1px solid var(--x-border-light); color: var(--x-text-primary); vertical-align: middle; }
.xt-table tbody tr:last-child td { border-bottom: 0; }
.xt-table tbody tr:hover { background: var(--x-bg-hover); }
.xt-table--zebra tbody tr:nth-child(even) { background: var(--x-bg-secondary); }
.xt-table--zebra tbody tr:nth-child(even):hover { background: var(--x-bg-hover); }
.xt-table tbody tr.is-clickable { cursor: pointer; }
.xt-table tbody tr.is-selected { background: rgba(var(--x-primary-rgb), 0.07); }
.xt-table-cell--num { text-align: right; font-variant-numeric: tabular-nums; }
.xt-table-cell--actions { text-align: right; white-space: nowrap; }
.xt-table-pager { display: flex; align-items: center; justify-content: space-between; gap: var(--x-spacing-md); padding: 12px 18px; border-top: 1px solid var(--x-border-light); }
/* =============================================================================
* 6. PAGINATION
* ============================================================================= */
.xt-pagination { display: inline-flex; align-items: center; gap: 4px; }
.xt-pagination__info { font-size: var(--x-font-size-sm); color: var(--x-text-tertiary); margin-right: var(--x-spacing-sm); }
.xt-pagination__btn {
min-width: 32px; height: 32px;
display: inline-flex; align-items: center; justify-content: center;
padding: 0 8px;
font-size: var(--x-font-size-sm); font-weight: 600; font-family: var(--x-font-family);
color: var(--x-text-secondary);
background: var(--x-bg-primary);
border: 1px solid var(--x-border);
border-radius: var(--x-radius-sm);
cursor: pointer;
transition: var(--x-transition-fast);
}
.xt-pagination__btn:hover:not(:disabled) { background: var(--x-bg-hover); color: var(--x-text-primary); border-color: var(--x-border-dark); }
.xt-pagination__btn:disabled { opacity: 0.45; cursor: not-allowed; }
.xt-pagination__btn--active { background: var(--x-header-primary, var(--x-primary)); border-color: var(--x-header-primary, var(--x-primary)); color: #fff; }
.xt-pagination__btn--active:hover { background: var(--x-header-primary-dark, var(--x-primary-dark)); color: #fff; }
.xt-pagination__btn svg, .xt-pagination__btn .xt-icon { width: 15px; height: 15px; }
.xt-pagination__ellipsis { padding: 0 4px; color: var(--x-text-light); }
/* =============================================================================
* 7. FILTER BAR / SEARCH / COMBOBOX
* ============================================================================= */
.xt-filter-bar {
display: flex; align-items: center; flex-wrap: wrap; gap: var(--x-spacing-sm);
padding: var(--x-spacing-md);
background: var(--x-bg-primary);
border: 1px solid var(--x-border);
border-radius: var(--x-radius-lg);
}
.xt-filter-group { display: flex; flex-direction: column; gap: 4px; }
.xt-filter-group--grow { flex: 1 1 220px; min-width: 0; }
.xt-filter-group__label { font-size: var(--x-font-size-xs); font-weight: 600; color: var(--x-text-tertiary); text-transform: uppercase; letter-spacing: 0.04em; }
.xt-filter-bar__actions { margin-left: auto; display: inline-flex; gap: var(--x-spacing-sm); align-items: flex-end; }
/* Search field (input with leading icon) */
.xt-search { position: relative; display: inline-flex; align-items: center; width: 100%; }
.xt-search .xt-icon { position: absolute; left: 12px; color: var(--x-text-tertiary); pointer-events: none; }
.xt-search .xt-input { padding-left: 44px; }
/* Combobox (input + results panel) */
.xt-combobox { position: relative; }
.xt-combobox__panel {
position: absolute; top: calc(100% + 4px); left: 0; right: 0;
background: var(--x-bg-primary);
border: 1px solid var(--x-border);
border-radius: var(--x-radius);
box-shadow: var(--x-shadow-lg);
z-index: var(--x-z-dropdown);
max-height: 320px; overflow-y: auto;
padding: 4px;
}
.xt-combobox__panel[hidden] { display: none; }
.xt-combobox__option {
display: flex; align-items: center; gap: 10px;
padding: 9px 10px;
border-radius: var(--x-radius-sm);
font-size: var(--x-font-size-sm);
color: var(--x-text-primary);
cursor: pointer;
}
.xt-combobox__option:hover, .xt-combobox__option.is-active { background: var(--x-bg-hover); }
.xt-combobox__option-meta { margin-left: auto; font-size: var(--x-font-size-xs); color: var(--x-text-tertiary); }
/* =============================================================================
* 8. (combobox lives in §7)
* =============================================================================
* 9. BADGES / STATUS / TAG
* ============================================================================= */
.xt-badge {
display: inline-flex; align-items: center; gap: 4px;
padding: 3px 9px;
font-size: var(--x-font-size-xs);
font-weight: 700;
line-height: 1.4;
border-radius: var(--x-radius-sm);
background: var(--x-gray-100);
color: var(--x-text-secondary);
white-space: nowrap;
}
.xt-badge svg, .xt-badge .xt-icon { width: 12px; height: 12px; }
.xt-badge--neutral { background: var(--x-gray-100); color: var(--x-text-secondary); }
.xt-badge--blue { background: rgba(var(--x-primary-rgb), 0.1); color: var(--x-header-primary, var(--x-primary)); }
.xt-badge--success { background: var(--x-success-bg); color: var(--x-success); }
.xt-badge--warning { background: var(--x-warning-bg); color: var(--x-warning); }
.xt-badge--danger { background: var(--x-danger-bg); color: var(--x-danger); }
.xt-badge--info { background: var(--x-info-bg); color: var(--x-info); }
.xt-badge--orange { background: var(--x-orange-50); color: var(--x-orange-700); }
/* Status label — pill with a leading dot */
.xt-status {
display: inline-flex; align-items: center; gap: 6px;
padding: 3px 10px 3px 8px;
font-size: var(--x-font-size-xs);
font-weight: 600;
border-radius: 999px;
background: var(--x-gray-100);
color: var(--x-text-secondary);
white-space: nowrap;
}
.xt-status::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex-shrink: 0; }
.xt-status--neutral { background: var(--x-gray-100); color: var(--x-text-secondary); }
.xt-status--info { background: var(--x-info-bg); color: var(--x-info); }
.xt-status--primary { background: rgba(var(--x-primary-rgb), 0.1); color: var(--x-header-primary, var(--x-primary)); }
.xt-status--success { background: var(--x-success-bg); color: var(--x-success); }
.xt-status--warning { background: var(--x-warning-bg); color: var(--x-warning); }
.xt-status--danger { background: var(--x-danger-bg); color: var(--x-danger); }
/* Convenience semantic aliases (map to the intents above) */
.xt-status--draft, .xt-status--inactive, .xt-status--offline { background: var(--x-gray-100); color: var(--x-text-secondary); }
.xt-status--pending, .xt-status--processing { background: var(--x-warning-bg); color: var(--x-warning); }
.xt-status--active, .xt-status--paid, .xt-status--delivered, .xt-status--approved, .xt-status--complete { background: var(--x-success-bg); color: var(--x-success); }
.xt-status--failed, .xt-status--cancelled, .xt-status--rejected, .xt-status--adverse { background: var(--x-danger-bg); color: var(--x-danger); }
.xt-status--submitted, .xt-status--sent { background: var(--x-info-bg); color: var(--x-info); }
/* [VERBATIM] tag */
.xt-tag { display: inline-block; font-size: var(--x-font-size-xs); font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; padding: 3px 10px; border-radius: 999px; background: var(--x-bg-tertiary); color: var(--x-text-secondary); white-space: nowrap; }
.xt-tag[data-tone="primary"] { background: rgba(var(--x-primary-rgb), 0.1); color: var(--x-header-primary, var(--x-primary)); }
.xt-tag[data-tone="success"] { background: var(--x-success-bg); color: var(--x-success); }
.xt-tag[data-tone="warning"] { background: var(--x-warning-bg); color: var(--x-warning); }
.xt-tag[data-tone="danger"] { background: var(--x-danger-bg); color: var(--x-danger); }
.xt-tag[data-tone="info"] { background: var(--x-info-bg); color: var(--x-info); }
.xt-tag[data-tone="secondary"] { background: var(--x-orange-50); color: var(--x-orange-700); }
/* =============================================================================
* 10. TOAST / ALERT
* ============================================================================= */
/* [VERBATIM] toast container + toast (z-index lifted to --x-z-toast so it sits
above every modal/popover, matching the app) */
.xt-toast-container {
position: fixed;
top: var(--x-spacing-lg);
right: var(--x-spacing-lg);
display: flex; flex-direction: column; gap: var(--x-spacing-sm);
z-index: var(--x-z-toast);
pointer-events: none;
}
.xt-toast {
background: var(--x-bg-primary);
border: 1px solid var(--x-border);
border-left: 4px solid var(--x-header-primary, var(--x-primary));
border-radius: var(--x-radius);
padding: var(--x-spacing-md) var(--x-spacing-lg);
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);
color: var(--x-text-primary);
font-size: var(--x-font-size-sm);
min-width: 280px; max-width: 420px;
display: flex; align-items: center; gap: var(--x-spacing-sm);
pointer-events: auto;
animation: xt-toast-in 220ms cubic-bezier(0.16, 1, 0.3, 1);
}
.xt-toast[data-tone="success"] { border-left-color: var(--x-accent-green); }
.xt-toast[data-tone="warning"] { border-left-color: var(--x-accent-amber); }
.xt-toast[data-tone="danger"] { border-left-color: var(--x-accent-red); }
.xt-toast[data-tone="info"] { border-left-color: var(--x-accent-blue); }
.xt-toast.is-leaving { animation: xt-toast-out 180ms ease forwards; }
.xt-toast__icon { flex-shrink: 0; }
.xt-toast__icon svg, .xt-toast__icon .xt-icon { width: 18px; height: 18px; }
.xt-toast[data-tone="success"] .xt-toast__icon { color: var(--x-accent-green); }
.xt-toast[data-tone="warning"] .xt-toast__icon { color: var(--x-accent-amber); }
.xt-toast[data-tone="danger"] .xt-toast__icon { color: var(--x-accent-red); }
.xt-toast[data-tone="info"] .xt-toast__icon { color: var(--x-accent-blue); }
.xt-toast__body { flex: 1; }
@keyframes xt-toast-in { from { opacity: 0; transform: translateX(20px) translateY(-4px); } to { opacity: 1; transform: translateX(0) translateY(0); } }
@keyframes xt-toast-out { to { opacity: 0; transform: translateX(20px); } }
/* [VERBATIM] alert row */
.xt-alert { display: flex; align-items: center; gap: var(--x-spacing-sm); padding: var(--x-spacing-sm) var(--x-spacing-md); border-radius: var(--x-radius); background: var(--x-warning-bg); color: var(--x-warning); border: 1px solid var(--x-warning-border); font-size: var(--x-font-size-sm); }
.xt-alert[data-tone="danger"] { background: var(--x-danger-bg); color: var(--x-danger); border-color: var(--x-danger-border); }
.xt-alert[data-tone="info"] { background: var(--x-info-bg); color: var(--x-info); border-color: var(--x-info-border); }
.xt-alert[data-tone="success"] { background: var(--x-success-bg); color: var(--x-success); border-color: var(--x-success-border); }
.xt-alert-icon { flex-shrink: 0; width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center; background: rgba(255, 255, 255, 0.6); border-radius: var(--x-radius-sm); }
.xt-alert-icon svg, .xt-alert-icon .xt-icon { width: 16px; height: 16px; }
.xt-alert-text { flex: 1; }
.xt-alert-text strong { font-weight: 600; }
.xt-alert-action { flex-shrink: 0; background: transparent; border: 1px solid currentColor; color: inherit; padding: var(--x-spacing-xs) var(--x-spacing-sm); border-radius: var(--x-radius-sm); font-size: var(--x-font-size-xs); font-weight: 600; cursor: pointer; transition: background 120ms ease; }
.xt-alert-action:hover { background: rgba(255, 255, 255, 0.5); }
/* =============================================================================
* 11. EMPTY / SKELETON / SPINNER / PROGRESS / LIVE-DOT
* ============================================================================= */
/* [VERBATIM] empty */
.xt-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--x-spacing-sm); padding: var(--x-spacing-2xl) var(--x-spacing-lg); text-align: center; color: var(--x-text-tertiary); }
.xt-empty-icon { width: 56px; height: 56px; border-radius: 50%; background: var(--x-bg-tertiary); color: var(--x-text-muted); display: inline-flex; align-items: center; justify-content: center; margin-bottom: var(--x-spacing-xs); }
.xt-empty-icon svg, .xt-empty-icon .xt-icon { width: 26px; height: 26px; }
.xt-empty-title { font-size: var(--x-font-size-base); font-weight: 600; color: var(--x-text-primary); }
.xt-empty-sub { font-size: var(--x-font-size-sm); color: var(--x-text-tertiary); max-width: 320px; line-height: 1.5; }
/* [VERBATIM] skeleton (+ kit shape modifiers) */
.xt-skeleton { height: 40px; background: linear-gradient(90deg, var(--x-bg-tertiary) 0%, var(--x-border-light) 50%, var(--x-bg-tertiary) 100%); background-size: 200% 100%; border-radius: var(--x-radius-sm); animation: xt-skeleton-shimmer 1.4s ease-in-out infinite; }
@keyframes xt-skeleton-shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
.xt-skeleton--text { height: 12px; border-radius: 999px; }
.xt-skeleton--title { height: 20px; width: 40%; }
.xt-skeleton--row { height: 48px; }
.xt-skeleton--card { height: 120px; border-radius: var(--x-radius-lg); }
.xt-skeleton--avatar { width: 40px; height: 40px; border-radius: 50%; }
.xt-skeleton--button { height: 38px; width: 120px; border-radius: var(--x-radius); }
/* Spinner */
.xt-spinner { display: inline-block; width: 18px; height: 18px; border: 2px solid var(--x-border); border-top-color: var(--x-header-primary, var(--x-primary)); border-radius: 50%; animation: xt-icon-spin 0.7s linear infinite; }
.xt-spinner--sm { width: 14px; height: 14px; border-width: 2px; }
.xt-spinner--lg { width: 28px; height: 28px; border-width: 3px; }
/* Progress (linear) */
.xt-progress { height: 8px; background: var(--x-gray-100); border-radius: 999px; overflow: hidden; }
.xt-progress--sm { height: 5px; }
.xt-progress--lg { height: 12px; }
.xt-progress__bar { height: 100%; width: 0; background: var(--x-header-primary, var(--x-primary)); border-radius: 999px; transition: width 0.4s cubic-bezier(0.16, 1, 0.3, 1); }
.xt-progress__bar--success { background: var(--x-success-solid); }
.xt-progress__bar--warning { background: var(--x-warning-solid); }
.xt-progress__bar--danger { background: var(--x-danger-solid); }
.xt-progress__bar--striped { background-image: linear-gradient(45deg, rgba(255,255,255,0.2) 25%, transparent 25%, transparent 50%, rgba(255,255,255,0.2) 50%, rgba(255,255,255,0.2) 75%, transparent 75%, transparent); background-size: 1rem 1rem; }
.xt-progress__bar--animated { animation: xt-progress-stripes 1s linear infinite; }
@keyframes xt-progress-stripes { from { background-position: 1rem 0; } to { background-position: 0 0; } }
/* [VERBATIM] live dot */
.xt-live-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--x-success-solid); box-shadow: 0 0 0 4px rgba(var(--x-success-solid-rgb), 0.2); animation: xt-live-pulse 2s ease-in-out infinite; }
@keyframes xt-live-pulse { 0%, 100% { box-shadow: 0 0 0 4px rgba(var(--x-success-solid-rgb), 0.2); } 50% { box-shadow: 0 0 0 7px rgba(var(--x-success-solid-rgb), 0.0); } }
/* =============================================================================
* 12. MODAL / CONFIRM / DRAWER / DROPDOWN / TOOLTIP
* ============================================================================= */
.xt-modal-backdrop {
position: fixed; inset: 0;
background: rgba(13, 18, 25, 0.5);
backdrop-filter: blur(2px);
z-index: var(--x-z-modal-backdrop);
opacity: 0; visibility: hidden;
transition: opacity 0.2s ease, visibility 0.2s ease;
}
.xt-modal-backdrop.is-open { opacity: 1; visibility: visible; }
.xt-modal {
position: fixed;
top: 50%; left: 50%;
transform: translate(-50%, -48%) scale(0.98);
width: calc(100% - 2 * var(--x-spacing-lg));
max-width: 520px;
max-height: calc(100vh - 2 * var(--x-spacing-xl));
max-height: calc(100dvh - 2 * var(--x-spacing-xl));
background: var(--x-bg-primary);
border-radius: var(--x-radius-lg);
box-shadow: var(--x-shadow-xl);
z-index: calc(var(--x-z-modal) + 1); /* one above the shared backdrop (same token) so the dialog never paints behind it */
display: flex; flex-direction: column;
opacity: 0; visibility: hidden;
transition: opacity 0.2s ease, transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.2s ease;
}
.xt-modal.is-open { opacity: 1; visibility: visible; transform: translate(-50%, -50%) scale(1); }
.xt-modal[hidden] { display: flex; } /* visibility handles show/hide */
.xt-modal--sm { max-width: 400px; }
.xt-modal--lg { max-width: 720px; }
.xt-modal--xl { max-width: 960px; }
.xt-modal > form {
display: flex;
flex: 1 1 auto;
flex-direction: column;
min-height: 0;
overflow: hidden;
}
.xt-modal__header { display: flex; flex: 0 0 auto; align-items: center; justify-content: space-between; gap: var(--x-spacing-md); padding: 18px 22px; border-bottom: 1px solid var(--x-border-light); }
.xt-modal__title { margin: 0; font-size: var(--x-font-size-lg); font-weight: 700; color: var(--x-text-primary); }
.xt-modal__body { padding: 22px; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; flex: 1 1 auto; min-height: 0; }
.xt-modal__footer { display: flex; flex: 0 0 auto; align-items: center; justify-content: flex-end; gap: var(--x-spacing-sm); padding: 16px 22px; border-top: 1px solid var(--x-border-light); }
/* Confirm dialog (preset small modal) */
.xt-confirm .xt-modal__body { display: flex; gap: var(--x-spacing-md); align-items: flex-start; }
.xt-confirm__icon { flex-shrink: 0; width: 44px; height: 44px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--x-info-bg); color: var(--x-info); }
.xt-confirm__icon svg, .xt-confirm__icon .xt-icon { width: 22px; height: 22px; }
.xt-confirm__icon--danger { background: var(--x-danger-bg); color: var(--x-danger); }
.xt-confirm__icon--warning { background: var(--x-warning-bg); color: var(--x-warning); }
.xt-confirm__text h4 { margin: 0 0 4px 0; font-size: var(--x-font-size-base); }
.xt-confirm__text p { margin: 0; font-size: var(--x-font-size-sm); color: var(--x-text-tertiary); }
/* Drawer (slides from right) */
.xt-drawer {
position: fixed; top: 0; right: 0; bottom: 0;
width: 440px; max-width: calc(100% - 40px);
background: var(--x-bg-primary);
box-shadow: var(--x-shadow-xl);
z-index: calc(var(--x-z-modal) + 1); /* one above the shared backdrop (same token) so the dialog never paints behind it */
display: flex; flex-direction: column;
transform: translateX(100%);
visibility: hidden;
transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.25s ease;
}
.xt-drawer.is-open { transform: translateX(0); visibility: visible; }
.xt-drawer--lg { width: 640px; }
.xt-drawer__header { display: flex; align-items: center; justify-content: space-between; gap: var(--x-spacing-md); padding: 18px 22px; border-bottom: 1px solid var(--x-border-light); }
.xt-drawer__title { margin: 0; font-size: var(--x-font-size-lg); font-weight: 700; }
.xt-drawer__body { padding: 22px; overflow-y: auto; flex: 1; }
.xt-drawer__footer { display: flex; align-items: center; justify-content: flex-end; gap: var(--x-spacing-sm); padding: 16px 22px; border-top: 1px solid var(--x-border-light); }
/* Dropdown menu */
.xt-dropdown { position: relative; display: inline-block; }
.xt-dropdown__menu {
position: absolute; top: calc(100% + 6px); right: 0;
min-width: 200px;
background: var(--x-bg-primary);
border: 1px solid var(--x-border);
border-radius: var(--x-radius);
box-shadow: var(--x-shadow-lg);
padding: 6px;
z-index: var(--x-z-dropdown);
opacity: 0; visibility: hidden; transform: translateY(-4px);
transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s ease;
}
.xt-dropdown.is-open .xt-dropdown__menu { opacity: 1; visibility: visible; transform: translateY(0); }
.xt-dropdown__menu--left { right: auto; left: 0; }
.xt-dropdown__item { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 10px; border: none; background: transparent; border-radius: var(--x-radius-sm); font-size: var(--x-font-size-sm); font-family: var(--x-font-family); color: var(--x-text-primary); text-align: left; text-decoration: none; cursor: pointer; transition: background 120ms ease; }
.xt-dropdown__item:hover { background: var(--x-bg-hover); }
.xt-dropdown__item svg, .xt-dropdown__item .xt-icon { width: 16px; height: 16px; color: var(--x-text-tertiary); }
.xt-dropdown__item--danger { color: var(--x-danger); }
.xt-dropdown__item--danger svg, .xt-dropdown__item--danger .xt-icon { color: var(--x-danger); }
.xt-dropdown__divider { height: 1px; background: var(--x-border-light); margin: 5px 0; }
.xt-dropdown__label { padding: 6px 10px 4px; font-size: var(--x-font-size-xs); font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--x-text-light); }
/* Tooltip (pure CSS, attribute-driven) */
[data-xt-tooltip] { position: relative; }
[data-xt-tooltip]::after {
content: attr(data-xt-tooltip);
position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%) translateY(4px);
padding: 5px 9px;
background: var(--x-dark-600); color: #fff;
font-size: var(--x-font-size-xs); font-weight: 500; white-space: nowrap;
border-radius: var(--x-radius-sm);
box-shadow: var(--x-shadow-md);
opacity: 0; pointer-events: none;
transition: opacity 0.15s ease, transform 0.15s ease;
z-index: var(--x-z-tooltip);
}
[data-xt-tooltip]:hover::after { opacity: 1; transform: translateX(-50%) translateY(0); }
[data-xt-tooltip][data-xt-tooltip-pos="bottom"]::after { bottom: auto; top: calc(100% + 8px); }
/* =============================================================================
* 13. TABS / CHIPS / VIEW-TOGGLE / TOOLBAR / SAVEBAR
* ============================================================================= */
/* [VERBATIM] pill tabs */
.xt-tabs-pill { display: flex; gap: 4px; padding: 4px; background: var(--x-bg-tertiary); border-radius: var(--x-radius); }
.xt-tabs-pill-btn { flex: 1; background: transparent; border: none; padding: var(--x-spacing-sm) var(--x-spacing-md); border-radius: 7px; font-size: var(--x-font-size-sm); font-weight: 600; font-family: var(--x-font-family); color: var(--x-text-secondary); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: var(--x-spacing-xs); transition: background 140ms ease, color 140ms ease; }
.xt-tabs-pill-btn:hover { color: var(--x-text-primary); }
.xt-tabs-pill-btn.is-active { background: var(--x-bg-primary); color: var(--x-header-primary, var(--x-primary)); box-shadow: 0 1px 3px var(--x-bg-active); }
.xt-tabs-pill-count { background: var(--x-border-light); color: var(--x-text-primary); font-size: var(--x-font-size-xs); padding: 1px 8px; border-radius: 999px; font-weight: 700; font-variant-numeric: tabular-nums; }
.xt-tabs-pill-btn.is-active .xt-tabs-pill-count { background: rgba(var(--x-primary-rgb), 0.12); color: var(--x-header-primary, var(--x-primary)); }
/* Underline tabs (new — complements pills) */
.xt-tabs { display: flex; gap: var(--x-spacing-lg); border-bottom: 1px solid var(--x-border); }
.xt-tab { position: relative; background: transparent; border: none; padding: 12px 2px; font-size: var(--x-font-size-sm); font-weight: 600; font-family: var(--x-font-family); color: var(--x-text-tertiary); cursor: pointer; display: inline-flex; align-items: center; gap: 6px; transition: color 140ms ease; }
.xt-tab:hover { color: var(--x-text-primary); }
.xt-tab.is-active { color: var(--x-header-primary, var(--x-primary)); }
.xt-tab.is-active::after { content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--x-header-primary, var(--x-primary)); border-radius: 2px 2px 0 0; }
.xt-tab svg, .xt-tab .xt-icon { width: 16px; height: 16px; }
/* Workspace tabs — persistent, closable views for record-heavy modules */
.xt-workspace {
min-width: 0;
overflow: hidden;
background: var(--x-bg-primary);
border: 1px solid var(--x-border);
border-radius: var(--x-radius-lg);
box-shadow: var(--x-shadow-sm);
}
.xt-workspace__bar {
min-width: 0;
display: flex;
align-items: stretch;
background: var(--x-bg-secondary);
border-bottom: 1px solid var(--x-border);
}
.xt-workspace-tabs__rail {
min-width: 0;
flex: 1 1 auto;
display: flex;
align-items: stretch;
overflow-x: auto;
overflow-y: hidden;
scrollbar-width: thin;
overscroll-behavior-inline: contain;
}
.xt-workspace-tab {
position: relative;
min-width: 152px;
max-width: 240px;
flex: 1 1 190px;
display: flex;
align-items: center;
color: var(--x-text-tertiary);
border-inline-end: 1px solid var(--x-border);
transition: color 140ms ease, background 140ms ease;
}
.xt-workspace-tab:hover { color: var(--x-text-primary); background: var(--x-bg-hover); }
.xt-workspace-tab.is-active {
color: var(--x-header-primary, var(--x-primary));
background: var(--x-bg-primary);
box-shadow: inset 0 -2px 0 var(--x-header-primary, var(--x-primary));
}
[data-theme="dark"] .xt-workspace-tab.is-active {
color: var(--x-blue-300);
box-shadow: inset 0 -2px 0 var(--x-blue-300);
}
@supports (color: color-mix(in srgb, var(--x-primary) 50%, var(--x-gray-900))) {
[data-theme="dark"] .xt-workspace-tab.is-active {
color: color-mix(in srgb, var(--x-header-primary, var(--x-primary)) 45%, var(--x-gray-900));
box-shadow: inset 0 -2px 0 color-mix(in srgb, var(--x-header-primary, var(--x-primary)) 55%, var(--x-gray-900));
}
}
.xt-workspace-tab[data-xt-pinned] { min-width: 120px; flex: 0 0 auto; }
.xt-workspace-tab__trigger {
min-width: 0;
min-height: 44px;
flex: 1 1 auto;
display: inline-flex;
align-items: center;
gap: var(--x-spacing-sm);
padding: 10px 8px 10px 14px;
color: inherit;
background: transparent;
border: 0;
font: 600 var(--x-font-size-sm)/1.25 var(--x-font-family);
text-align: start;
cursor: pointer;
}
.xt-workspace-tab[data-xt-pinned] .xt-workspace-tab__trigger { padding-inline-end: 14px; }
.xt-workspace-tab__trigger > .xt-icon,
.xt-workspace-tab__trigger > svg { width: 16px; height: 16px; flex: 0 0 auto; }
.xt-workspace-tab__label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.xt-workspace-tab__dirty {
display: none;
width: 7px;
height: 7px;
flex: 0 0 auto;
background: var(--x-warning-solid);
border-radius: 50%;
}
.xt-workspace-tab.is-dirty .xt-workspace-tab__dirty,
.xt-workspace-tab[data-xt-dirty] .xt-workspace-tab__dirty { display: block; }
.xt-workspace-tab__close {
width: 30px;
height: 30px;
flex: 0 0 30px;
display: inline-flex;
align-items: center;
justify-content: center;
margin-inline-end: 6px;
padding: 0;
color: var(--x-text-tertiary);
background: transparent;
border: 0;
border-radius: var(--x-radius-sm);
cursor: pointer;
opacity: 0.62;
transition: color 120ms ease, background 120ms ease, opacity 120ms ease;
}
.xt-workspace-tab__close:hover { color: var(--x-text-primary); background: var(--x-bg-active); opacity: 1; }
.xt-workspace-tab__close > .xt-icon,
.xt-workspace-tab__close > svg { width: 14px; height: 14px; }
.xt-workspace__actions {
flex: 0 0 auto;
display: flex;
align-items: center;
gap: 2px;
padding: 6px;
background: var(--x-bg-secondary);
border-inline-start: 1px solid var(--x-border);
}
.xt-workspace__action {
width: 32px;
height: 32px;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0;
color: var(--x-text-secondary);
background: transparent;
border: 0;
border-radius: var(--x-radius-sm);
cursor: pointer;
}
.xt-workspace__action:hover { color: var(--x-text-primary); background: var(--x-bg-active); }
.xt-workspace__action > .xt-icon,
.xt-workspace__action > svg { width: 16px; height: 16px; }
.xt-workspace__panel { min-width: 0; padding: var(--x-spacing-lg); }
.xt-workspace__panel[hidden] { display: none; }
.xt-workspace-tab__trigger:focus-visible,
.xt-workspace-tab__close:focus-visible,
.xt-workspace__action:focus-visible {
position: relative;
z-index: 1;
outline: 2px solid var(--x-header-primary, var(--x-primary));
outline-offset: -3px;
}
[data-theme="dark"] :is(
.xt-workspace-tab__trigger,
.xt-workspace-tab__close,
.xt-workspace__action
):focus-visible { outline-color: var(--x-blue-300); }
/* [VERBATIM] chips */
.xt-chip-group { display: flex; flex-wrap: wrap; gap: var(--x-spacing-xs); align-items: center; }
.xt-chip { background: var(--x-bg-tertiary); border: 1px solid transparent; color: var(--x-text-secondary); font-size: var(--x-font-size-sm); font-weight: 500; font-family: var(--x-font-family); padding: var(--x-spacing-xs) var(--x-spacing-md); border-radius: 999px; cursor: pointer; transition: background 120ms ease, color 120ms ease, border-color 120ms ease; white-space: nowrap; }
.xt-chip:hover { background: var(--x-bg-active); color: var(--x-text-primary); }
.xt-chip.is-active { background: rgba(var(--x-primary-rgb), 0.1); color: var(--x-header-primary, var(--x-primary)); border-color: rgba(var(--x-primary-rgb), 0.2); }
.xt-chip-divider { width: 1px; height: 20px; background: var(--x-border); margin: 0 var(--x-spacing-xs); }
/* [VERBATIM] view toggle */
.xt-view-toggle { display: inline-flex; background: var(--x-bg-tertiary); border-radius: var(--x-radius-sm); padding: 2px; }
.xt-view-toggle-btn { background: transparent; border: none; color: var(--x-text-tertiary); padding: var(--x-spacing-xs) var(--x-spacing-sm); border-radius: 6px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: background 120ms ease, color 120ms ease; }
.xt-view-toggle-btn:hover { color: var(--x-text-primary); }
.xt-view-toggle-btn.is-active { background: var(--x-bg-primary); color: var(--x-header-primary, var(--x-primary)); box-shadow: 0 1px 3px var(--x-bg-active); }
.xt-view-toggle-btn svg, .xt-view-toggle-btn .xt-icon { width: 16px; height: 16px; }
/* [VERBATIM] toolbar */
.xt-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--x-spacing-md); padding: var(--x-spacing-md); background: var(--x-bg-primary); border: 1px solid var(--x-border); border-radius: var(--x-radius-lg); }
.xt-toolbar-end { display: flex; align-items: center; gap: var(--x-spacing-sm); margin-left: auto; }
/* Savebar (sticky action bar) */
.xt-savebar { position: sticky; bottom: 0; display: flex; align-items: center; justify-content: space-between; gap: var(--x-spacing-md); padding: 14px 18px; background: var(--x-bg-primary); border: 1px solid var(--x-border); border-radius: var(--x-radius-lg); box-shadow: var(--x-shadow-lg); }
.xt-savebar__hint { font-size: var(--x-font-size-sm); color: var(--x-text-tertiary); }
/* =============================================================================
* 14. WELCOME / KPI / STAT / AVATAR
* ============================================================================= */
/* [VERBATIM] welcome */
.xt-welcome { display: flex; align-items: center; justify-content: space-between; gap: var(--x-spacing-lg); padding: var(--x-spacing-lg) var(--x-spacing-xl); background: var(--x-header-primary, var(--x-primary)); color: var(--x-bg-primary); border-radius: var(--x-radius-lg); box-shadow: 0 10px 30px rgba(var(--x-primary-rgb), 0.18); }
.xt-welcome-text h1 { margin: 0 0 var(--x-spacing-xs) 0; font-size: var(--x-font-size-2xl); font-weight: 700; letter-spacing: -0.01em; line-height: 1.2; color: #fff; }
.xt-welcome-sub { margin: 0; font-size: var(--x-font-size-base); color: rgba(255, 255, 255, 0.82); line-height: 1.45; }
.xt-welcome-action { flex-shrink: 0; }
/* [VERBATIM] KPI */
.xt-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--x-spacing-md); }
.xt-kpi { background: var(--x-bg-primary); border: 1px solid var(--x-border); border-radius: var(--x-radius-lg); padding: var(--x-spacing-md) var(--x-spacing-lg); transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease; position: relative; overflow: hidden; }
.xt-kpi::before { content: ''; position: absolute; inset: 0 auto 0 0; width: 3px; background: var(--x-header-primary, var(--x-primary)); opacity: 0.85; }
.xt-kpi[data-tone="success"]::before { background: var(--x-accent-green); }
.xt-kpi[data-tone="warning"]::before { background: var(--x-accent-amber); }
.xt-kpi[data-tone="danger"]::before { background: var(--x-accent-red); }
.xt-kpi[data-tone="info"]::before { background: var(--x-accent-blue); }
.xt-kpi[data-tone="secondary"]::before { background: var(--x-secondary); }
.xt-kpi:hover { transform: translateY(-2px); box-shadow: 0 8px 20px var(--x-bg-active); border-color: var(--x-border-dark); }
.xt-kpi-row { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--x-spacing-sm); }
.xt-kpi-label { font-size: var(--x-font-size-xs); font-weight: 600; color: var(--x-text-secondary); text-transform: uppercase; letter-spacing: 0.04em; }
.xt-kpi-icon { color: var(--x-text-muted); display: inline-flex; }
.xt-kpi-icon svg, .xt-kpi-icon .xt-icon { width: 18px; height: 18px; }
.xt-kpi-value { font-size: var(--x-font-size-2xl); font-weight: 700; color: var(--x-text-primary); line-height: 1.1; margin-bottom: var(--x-spacing-xs); font-variant-numeric: tabular-nums; }
.xt-kpi-delta { font-size: var(--x-font-size-xs); color: var(--x-text-tertiary); line-height: 1.3; }
.xt-kpi-delta.is-positive { color: var(--x-success); }
.xt-kpi-delta.is-negative { color: var(--x-danger); }
/* [VERBATIM] mini stat tiles */
.xt-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: var(--x-spacing-sm); }
.xt-stat { background: var(--x-bg-primary); border: 1px solid var(--x-border); border-radius: var(--x-radius); padding: var(--x-spacing-sm) var(--x-spacing-md); display: flex; flex-direction: column; gap: var(--x-spacing-xs); }
.xt-stat-label { font-size: var(--x-font-size-xs); font-weight: 600; color: var(--x-text-secondary); text-transform: uppercase; letter-spacing: 0.04em; }
.xt-stat-value { font-size: var(--x-font-size-xl); font-weight: 700; color: var(--x-text-primary); line-height: 1.1; font-variant-numeric: tabular-nums; }
/* [VERBATIM] avatar */
.xt-avatar { position: relative; width: 36px; height: 36px; border-radius: 50%; background: var(--x-header-primary, var(--x-primary)); color: var(--x-bg-primary); font-weight: 700; font-size: var(--x-font-size-xs); display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; letter-spacing: 0.02em; }
.xt-avatar.sm { width: 28px; height: 28px; font-size: 10px; }
.xt-avatar.lg { width: 48px; height: 48px; font-size: var(--x-font-size-sm); }
.xt-avatar[data-status]::after { content: ''; position: absolute; bottom: 0; right: 0; width: 11px; height: 11px; border-radius: 50%; background: var(--x-text-light); border: 2px solid var(--x-bg-primary); }
.xt-avatar[data-status="working"]::after { background: var(--x-accent-green); }
.xt-avatar[data-status="lunch"]::after { background: var(--x-accent-amber); }
.xt-avatar[data-status="leave"]::after { background: var(--x-accent-red); }
.xt-avatar[data-status="offline"]::after { background: var(--x-text-light); }
/* =============================================================================
* 15. CHART WRAPPER (Chart.js mounts into __canvas — kit ships no charting lib)
* ============================================================================= */
.xt-chart { background: var(--x-bg-primary); border: 1px solid var(--x-border); border-radius: var(--x-radius-lg); box-shadow: var(--x-shadow-sm); padding: var(--x-spacing-lg); }
.xt-chart__header { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--x-spacing-md); margin-bottom: var(--x-spacing-md); }
.xt-chart__title { margin: 0; font-size: var(--x-font-size-base); font-weight: 700; color: var(--x-text-primary); }
.xt-chart__sub { margin: 2px 0 0 0; font-size: var(--x-font-size-sm); color: var(--x-text-tertiary); }
.xt-chart__canvas { position: relative; width: 100%; min-height: 220px; }
.xt-chart__placeholder { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--x-spacing-sm); min-height: 220px; color: var(--x-text-light); border: 1px dashed var(--x-border); border-radius: var(--x-radius); }
.xt-chart__legend { display: flex; flex-wrap: wrap; gap: var(--x-spacing-md); margin-top: var(--x-spacing-md); }
.xt-chart__legend-item { display: inline-flex; align-items: center; gap: 6px; font-size: var(--x-font-size-xs); color: var(--x-text-secondary); }
.xt-chart__legend-swatch { width: 12px; height: 12px; border-radius: 3px; flex-shrink: 0; }
/* =============================================================================
* 16. BRAND LOGO (XTender.logo() / assets/logo.svg)
* ============================================================================= */
.xt-logo { display: inline-flex; align-items: center; gap: 3px; line-height: 1; text-decoration: none; }
.xt-logo .xt-logo-mark { width: 30px; height: 30px; display: block; flex-shrink: 0; }
.xt-logo__word { font-family: var(--x-font-family); font-weight: 800; font-size: 20px; letter-spacing: 0.01em; color: var(--x-text-primary); white-space: nowrap; transition: opacity 0.15s ease; }
.xt-logo--sm .xt-logo-mark { width: 24px; height: 24px; }
.xt-logo--sm .xt-logo__word { font-size: 16px; }
.xt-logo--lg .xt-logo-mark { width: 40px; height: 40px; }
.xt-logo--lg .xt-logo__word { font-size: 27px; }
/* Collapsed sidebar hides the wordmark, keeps the mark */
.xt-sidebar:not(:hover):not(:focus-within):not(.is-expanded) .xt-logo__word { opacity: 0; }
/* Image logo (preferred — your real logo file via ![]()
) */
.xt-logo-img { height: 30px; width: auto; max-width: 170px; display: block; }
.xt-logo-img--mark { height: 32px; max-width: 36px; }
.xt-logo--sm.xt-logo-img, .xt-logo-img.xt-logo--sm { height: 24px; }
.xt-logo--lg.xt-logo-img, .xt-logo-img.xt-logo--lg { height: 40px; }
/* Sidebar brand: show the mark image collapsed, the full lockup when expanded */
.xt-sidebar__brand .xt-logo-img--full { display: none; }
.xt-sidebar:hover .xt-sidebar__brand .xt-logo-img--full,
.xt-sidebar:focus-within .xt-sidebar__brand .xt-logo-img--full,
.xt-sidebar.is-expanded .xt-sidebar__brand .xt-logo-img--full { display: block; }
.xt-sidebar:hover .xt-sidebar__brand .xt-logo-img--mark,
.xt-sidebar:focus-within .xt-sidebar__brand .xt-logo-img--mark,
.xt-sidebar.is-expanded .xt-sidebar__brand .xt-logo-img--mark { display: none; }
/* =============================================================================
* 17. MODULE / APP SWITCHER (compose with .xt-dropdown for open/close)
* …
* ============================================================================= */
.xt-switcher__btn {
display: inline-flex; align-items: center; gap: 8px;
height: var(--x-control-height); padding: 0 10px 0 12px;
background: transparent;
border: 1px solid var(--x-border);
border-radius: var(--x-radius);
font-family: var(--x-font-family); font-weight: 600; font-size: var(--x-font-size-sm);
color: var(--x-text-primary);
cursor: pointer;
transition: var(--x-transition-fast);
}
.xt-switcher__btn:hover { background: var(--x-bg-hover); border-color: var(--x-border-dark); }
.xt-switcher__btn .xt-icon { width: 16px; height: 16px; color: var(--x-text-tertiary); }
.xt-switcher__btn .xt-switcher__caret { margin-left: 2px; }
.xt-switcher__current { max-width: 140px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.xt-switcher .xt-dropdown__menu.xt-switcher__menu {
min-width: 312px; padding: 10px; z-index: var(--x-z-popover);
left: 0; right: auto; /* switcher sits on the LEFT of the header → open rightward, not off-screen */
}
.xt-switcher__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.xt-switcher__item {
display: flex; flex-direction: column; align-items: center; gap: 8px;
padding: 12px 8px;
border-radius: var(--x-radius);
text-decoration: none; text-align: center;
color: var(--x-text-secondary);
transition: var(--x-transition-fast);
}
.xt-switcher__item:hover { background: var(--x-bg-hover); color: var(--x-text-primary); text-decoration: none; }
.xt-switcher__item .xt-icon-tile { width: 42px; height: 42px; }
.xt-switcher__item-label { font-size: var(--x-font-size-xs); font-weight: 600; }
.xt-switcher__item.is-active .xt-icon-tile { background: var(--x-header-primary, var(--x-primary)); color: #fff; }
/* =============================================================================
* 18. AUTOCOMPLETE (XTender.autocomplete — panel is appended to )
* ============================================================================= */
.xt-autocomplete-panel {
position: fixed;
z-index: var(--x-z-popover);
background: var(--x-bg-primary);
border: 1px solid var(--x-border);
border-radius: var(--x-radius);
box-shadow: var(--x-shadow-lg);
max-height: 340px;
overflow-y: auto;
padding: 4px;
}
.xt-autocomplete-panel[hidden] { display: none; }
.xt-autocomplete__group { padding: 9px 10px 4px; font-size: var(--x-font-size-xs); font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--x-text-light); }
.xt-autocomplete__item {
display: flex; align-items: center; gap: 10px;
padding: 9px 10px;
border-radius: var(--x-radius-sm);
font-size: var(--x-font-size-sm);
color: var(--x-text-primary);
cursor: pointer;
}
.xt-autocomplete__item:hover,
.xt-autocomplete__item.is-active { background: var(--x-bg-hover); }
.xt-autocomplete__item mark { background: transparent; color: var(--x-header-primary, var(--x-primary)); font-weight: 700; }
.xt-autocomplete__item .xt-icon { width: 16px; height: 16px; color: var(--x-text-tertiary); flex-shrink: 0; }
/* Column so the title and any number of sub-lines stack (not run inline) and
each can ellipsis independently. min-width:0 lets the ellipsis actually clip. */
.xt-autocomplete__item-body { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1; }
.xt-autocomplete__item-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.xt-autocomplete__item-sub { font-size: var(--x-font-size-xs); color: var(--x-text-tertiary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.xt-autocomplete__meta { margin-left: auto; align-self: center; font-size: var(--x-font-size-xs); color: var(--x-text-tertiary); white-space: nowrap; padding-left: 8px; }
.xt-autocomplete__empty,
.xt-autocomplete__loading { padding: 14px 12px; font-size: var(--x-font-size-sm); color: var(--x-text-tertiary); text-align: center; }
.xt-autocomplete__loading { display: flex; align-items: center; justify-content: center; gap: 8px; }
/* Footer action row(s) — e.g. "+ Add new …". Accented + divided from results. */
.xt-autocomplete__item--action { color: var(--x-header-primary, var(--x-primary)); font-weight: 600; border-top: 1px solid var(--x-border-light, var(--x-border)); margin-top: 2px; }
.xt-autocomplete__item--action .xt-icon { color: currentColor; }
/* =============================================================================
* 19. BREADCRUMBS
* ============================================================================= */
.xt-breadcrumb { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; font-size: var(--x-font-size-sm); }
.xt-breadcrumb__item { display: inline-flex; align-items: center; gap: 6px; color: var(--x-text-tertiary); text-decoration: none; }
.xt-breadcrumb__item:not(.is-current):hover { color: var(--x-header-primary, var(--x-primary)); }
.xt-breadcrumb__item.is-current { color: var(--x-text-primary); font-weight: 600; }
.xt-breadcrumb__item .xt-icon { width: 15px; height: 15px; }
.xt-breadcrumb__sep { color: var(--x-text-light); display: inline-flex; }
.xt-breadcrumb__sep .xt-icon { width: 14px; height: 14px; }
/* =============================================================================
* 20. ACCORDION (native / — zero JS)
* ============================================================================= */
.xt-accordion { border: 1px solid var(--x-border); border-radius: var(--x-radius-lg); overflow: hidden; background: var(--x-bg-primary); }
.xt-accordion__item { border-bottom: 1px solid var(--x-border-light); }
.xt-accordion__item:last-child { border-bottom: 0; }
.xt-accordion__item > summary {
display: flex; align-items: center; gap: 10px;
padding: 14px 18px;
font-weight: 600; font-size: var(--x-font-size-sm); color: var(--x-text-primary);
cursor: pointer; list-style: none; user-select: none;
}
.xt-accordion__item > summary::-webkit-details-marker { display: none; }
.xt-accordion__item > summary:hover { background: var(--x-bg-hover); }
.xt-accordion__item > summary .xt-accordion__chev { margin-left: auto; color: var(--x-text-tertiary); transition: transform 0.2s ease; }
.xt-accordion__item[open] > summary .xt-accordion__chev { transform: rotate(180deg); }
.xt-accordion__body { padding: 4px 18px 18px; font-size: var(--x-font-size-sm); color: var(--x-text-secondary); line-height: 1.6; }
/* =============================================================================
* 21. POPOVER (rich popover — JS toggle via XTender.ui.bindPopover)
* ============================================================================= */
.xt-popover { position: relative; display: inline-block; }
.xt-popover__panel {
position: absolute; top: calc(100% + 8px); left: 0;
min-width: 240px; max-width: 320px;
background: var(--x-bg-primary);
border: 1px solid var(--x-border);
border-radius: var(--x-radius-lg);
box-shadow: var(--x-shadow-lg);
padding: var(--x-spacing-md);
z-index: var(--x-z-popover);
opacity: 0; visibility: hidden; transform: translateY(-4px);
transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s ease;
}
.xt-popover.is-open .xt-popover__panel { opacity: 1; visibility: visible; transform: translateY(0); }
.xt-popover__panel--right { left: auto; right: 0; }
.xt-popover__title { font-weight: 700; font-size: var(--x-font-size-sm); margin: 0 0 6px; color: var(--x-text-primary); }
.xt-popover__panel::before {
content: ''; position: absolute; top: -6px; left: 18px;
width: 11px; height: 11px; background: var(--x-bg-primary);
border-left: 1px solid var(--x-border); border-top: 1px solid var(--x-border);
transform: rotate(45deg);
}
.xt-popover__panel--right::before { left: auto; right: 18px; }
/* =============================================================================
* 22. RANGE SLIDER (styled native input[type=range])
* ============================================================================= */
.xt-range { -webkit-appearance: none; appearance: none; width: 100%; height: 6px; border-radius: 999px; background: var(--x-gray-200); outline: none; cursor: pointer; }
.xt-range::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 18px; height: 18px; border-radius: 50%; background: var(--x-header-primary, var(--x-primary)); border: 2px solid var(--x-bg-primary); box-shadow: var(--x-shadow-sm); cursor: pointer; }
.xt-range::-moz-range-thumb { width: 18px; height: 18px; border: 2px solid var(--x-bg-primary); border-radius: 50%; background: var(--x-header-primary, var(--x-primary)); box-shadow: var(--x-shadow-sm); cursor: pointer; }
.xt-range:focus-visible::-webkit-slider-thumb { outline: 2px solid var(--x-header-primary, var(--x-primary)); outline-offset: 2px; }
/* =============================================================================
* 23. STEPPER / WIZARD (static — set .is-complete / .is-active per step)
* ============================================================================= */
.xt-steps { display: flex; align-items: flex-start; gap: 0; }
.xt-step { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 8px; position: relative; text-align: center; }
.xt-step::before {
content: ''; position: absolute; top: 15px; left: -50%; width: 100%; height: 2px;
background: var(--x-border); z-index: 0;
}
.xt-step:first-child::before { display: none; }
.xt-step__dot {
position: relative; z-index: 1;
width: 32px; height: 32px; border-radius: 50%;
display: inline-flex; align-items: center; justify-content: center;
background: var(--x-bg-primary); border: 2px solid var(--x-border);
color: var(--x-text-tertiary); font-weight: 700; font-size: var(--x-font-size-sm);
}
.xt-step__dot .xt-icon { width: 16px; height: 16px; }
.xt-step__label { font-size: var(--x-font-size-sm); font-weight: 600; color: var(--x-text-tertiary); }
.xt-step__sub { font-size: var(--x-font-size-xs); color: var(--x-text-light); }
.xt-step.is-active .xt-step__dot { border-color: var(--x-header-primary, var(--x-primary)); color: var(--x-header-primary, var(--x-primary)); box-shadow: 0 0 0 4px rgba(var(--x-primary-rgb), 0.12); }
.xt-step.is-active .xt-step__label { color: var(--x-text-primary); }
.xt-step.is-complete .xt-step__dot { background: var(--x-header-primary, var(--x-primary)); border-color: var(--x-header-primary, var(--x-primary)); color: #fff; }
.xt-step.is-complete::before,
.xt-step.is-active::before { background: var(--x-header-primary, var(--x-primary)); }
.xt-step.is-complete .xt-step__label { color: var(--x-text-secondary); }
/* =============================================================================
* 24. TIMELINE (activity feed)
* ============================================================================= */
.xt-timeline { position: relative; padding-left: 8px; }
.xt-timeline__item { position: relative; padding: 0 0 var(--x-spacing-lg) 28px; }
.xt-timeline__item::before {
content: ''; position: absolute; left: 7px; top: 22px; bottom: -4px; width: 2px; background: var(--x-border);
}
.xt-timeline__item:last-child::before { display: none; }
.xt-timeline__dot {
position: absolute; left: 0; top: 4px;
width: 16px; height: 16px; border-radius: 50%;
background: var(--x-bg-primary); border: 2px solid var(--x-header-primary, var(--x-primary));
display: inline-flex; align-items: center; justify-content: center;
}
.xt-timeline__dot .xt-icon { width: 9px; height: 9px; color: var(--x-header-primary, var(--x-primary)); }
.xt-timeline__dot[data-tone="success"] { border-color: var(--x-success); }
.xt-timeline__dot[data-tone="success"] .xt-icon { color: var(--x-success); }
.xt-timeline__dot[data-tone="danger"] { border-color: var(--x-danger); }
.xt-timeline__dot[data-tone="warning"] { border-color: var(--x-accent-amber); }
.xt-timeline__title { font-size: var(--x-font-size-sm); font-weight: 600; color: var(--x-text-primary); }
.xt-timeline__meta { font-size: var(--x-font-size-xs); color: var(--x-text-tertiary); margin-top: 2px; }
.xt-timeline__body { font-size: var(--x-font-size-sm); color: var(--x-text-secondary); margin-top: 4px; }
/* =============================================================================
* 25. AVATAR GROUP (overlapping stacked avatars)
* ============================================================================= */
.xt-avatar-group { display: inline-flex; align-items: center; }
.xt-avatar-group .xt-avatar { border: 2px solid var(--x-bg-primary); margin-left: -10px; }
.xt-avatar-group .xt-avatar:first-child { margin-left: 0; }
.xt-avatar-group__more {
margin-left: -10px;
width: 36px; height: 36px; border-radius: 50%;
background: var(--x-bg-tertiary); color: var(--x-text-secondary);
border: 2px solid var(--x-bg-primary);
display: inline-flex; align-items: center; justify-content: center;
font-size: var(--x-font-size-xs); font-weight: 700;
}
/* =============================================================================
* 26. DESCRIPTION / DETAIL LIST (key→value, great in drawers)
* ============================================================================= */
.xt-desc { display: grid; grid-template-columns: minmax(120px, 0.4fr) 1fr; gap: 0; }
.xt-desc__row { display: contents; }
.xt-desc__key { padding: 10px 12px 10px 0; font-size: var(--x-font-size-sm); color: var(--x-text-tertiary); border-bottom: 1px solid var(--x-border-light); }
.xt-desc__val { padding: 10px 0; font-size: var(--x-font-size-sm); color: var(--x-text-primary); font-weight: 500; border-bottom: 1px solid var(--x-border-light); }
.xt-desc__row:last-child .xt-desc__key,
.xt-desc__row:last-child .xt-desc__val { border-bottom: 0; }
/* =============================================================================
* 27. FILE UPLOAD / DROPZONE (JS via XTender.ui.bindUpload)
* ============================================================================= */
.xt-upload {
display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
padding: var(--x-spacing-xl);
border: 2px dashed var(--x-border-dark);
border-radius: var(--x-radius-lg);
background: var(--x-bg-secondary);
color: var(--x-text-tertiary);
text-align: center; cursor: pointer;
transition: border-color 0.15s ease, background 0.15s ease;
}
.xt-upload:hover { border-color: var(--x-header-primary, var(--x-primary)); }
.xt-upload.is-dragover { border-color: var(--x-header-primary, var(--x-primary)); background: rgba(var(--x-primary-rgb), 0.06); color: var(--x-header-primary, var(--x-primary)); }
.xt-upload__icon .xt-icon { width: 32px; height: 32px; }
.xt-upload__title { font-size: var(--x-font-size-sm); font-weight: 600; color: var(--x-text-primary); }
.xt-upload__hint { font-size: var(--x-font-size-xs); }
.xt-upload input[type="file"] { display: none; }
.xt-upload__list { list-style: none; margin: 10px 0 0; padding: 0; width: 100%; display: flex; flex-direction: column; gap: 6px; }
.xt-upload__file { display: flex; align-items: center; gap: 10px; padding: 8px 10px; background: var(--x-bg-primary); border: 1px solid var(--x-border); border-radius: var(--x-radius); font-size: var(--x-font-size-sm); color: var(--x-text-primary); }
.xt-upload__file .xt-icon { width: 16px; height: 16px; color: var(--x-text-tertiary); flex-shrink: 0; }
.xt-upload__file-name { flex: 1; text-align: left; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.xt-upload__file-size { font-size: var(--x-font-size-xs); color: var(--x-text-tertiary); }
/* =============================================================================
* 28. LIST GROUP (simple selectable/nav list)
* ============================================================================= */
.xt-list { border: 1px solid var(--x-border); border-radius: var(--x-radius-lg); overflow: hidden; background: var(--x-bg-primary); }
.xt-list__item {
display: flex; align-items: center; gap: 12px;
width: 100%; padding: 12px 16px;
border: 0; border-bottom: 1px solid var(--x-border-light);
background: transparent; font-family: var(--x-font-family); font-size: var(--x-font-size-sm);
color: var(--x-text-primary); text-align: left; text-decoration: none; cursor: pointer;
transition: background 0.12s ease;
}
.xt-list__item:last-child { border-bottom: 0; }
.xt-list__item:hover { background: var(--x-bg-hover); }
.xt-list__item.is-active { background: rgba(var(--x-primary-rgb), 0.08); color: var(--x-header-primary, var(--x-primary)); font-weight: 600; }
.xt-list__item .xt-icon { width: 18px; height: 18px; color: var(--x-text-tertiary); flex-shrink: 0; }
.xt-list__item-body { flex: 1; min-width: 0; }
.xt-list__item-sub { font-size: var(--x-font-size-xs); color: var(--x-text-tertiary); }
.xt-list__item-end { margin-left: auto; color: var(--x-text-light); }
/* =============================================================================
* 28b. DATA LAYER states (crudTable / permission gating)
* ============================================================================= */
/* Honour the hidden attribute everywhere (used by permission-gating). */
[hidden] { display: none !important; }
/* Loading overlay while a crud table (re)fetches */
.xt-crud-table { position: relative; }
.xt-crud-table[aria-busy="true"] .xt-table-scroll { opacity: 0.55; transition: opacity 0.15s ease; pointer-events: none; }
.xt-crud-table[aria-busy="true"]::after {
content: ''; position: absolute; top: 56px; left: 50%; transform: translateX(-50%);
width: 22px; height: 22px; border-radius: 50%;
border: 2px solid var(--x-border); border-top-color: var(--x-header-primary, var(--x-primary));
animation: xt-icon-spin 0.7s linear infinite; z-index: 2;
}
/* Optimistic-delete row fade */
.xt-table tbody tr.is-removing { opacity: 0.4; transition: opacity 0.15s ease; }
/* Idle-timeout countdown emphasis (inside the warning confirm dialog) */
.xt-idle-countdown { font-variant-numeric: tabular-nums; font-weight: 700; color: var(--x-header-primary, var(--x-primary)); }
/* =============================================================================
* 28c. PHASE-6 CLASS states (inline-edit / uploader progress / signature pad)
* ============================================================================= */
/* Inline edit — the editing cell */
.xt-inline-cell { cursor: pointer; }
.xt-inline-cell.is-editing { padding: 4px 6px; }
.xt-inline-cell.is-editing .xt-input, .xt-inline-cell.is-editing .xt-select { height: 30px; min-width: 120px; }
.xt-inline-cell.is-saving { opacity: 0.6; }
.xt-table tbody td.xt-inline-cell:not(.is-editing):hover { background: rgba(var(--x-primary-rgb), 0.06); }
/* Uploader — per-file rows with progress */
.xt-upload__progress { height: 5px; margin-top: 6px; }
.xt-upload__file--done .xt-upload__file-name { color: var(--x-success); }
.xt-upload__file--error { border-color: var(--x-danger-border); }
.xt-upload__file--error .xt-upload__file-name { color: var(--x-danger); }
.xt-upload__file-remove { margin-left: 6px; cursor: pointer; color: var(--x-text-tertiary); background: none; border: 0; }
.xt-upload__file-remove:hover { color: var(--x-danger); }
/* Signature pad */
.xt-sigpad-wrap { display: inline-block; }
.xt-sigpad { border: 1px dashed var(--x-border-dark); border-radius: var(--x-radius); background: var(--x-bg-primary); touch-action: none; cursor: crosshair; display: block; }
.xt-sigpad-actions { display: flex; justify-content: flex-end; gap: var(--x-spacing-sm); margin-top: var(--x-spacing-sm); }
/* Bulk-action bar count chip */
.xt-bulkbar__count { font-weight: 700; }
/* =============================================================================
* 29. FORM LAYOUT — grid, sections, fieldset, actions
* Organise forms into responsive multi-column grids and titled sections.
* ============================================================================= */
/* Responsive field grid. Fields are .xt-field; span helpers control width. */
.xt-form-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--x-spacing-md) var(--x-spacing-lg); align-items: start; }
.xt-form-grid > * { min-width: 0; }
.xt-form-grid--1 { grid-template-columns: 1fr; }
.xt-form-grid--2 { grid-template-columns: repeat(2, 1fr); }
.xt-form-grid--3 { grid-template-columns: repeat(3, 1fr); }
.xt-form-grid--4 { grid-template-columns: repeat(4, 1fr); }
.xt-form-grid--auto { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
/* A field = label + control + help/error, as a grid cell */
.xt-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.xt-field > .xt-form-label { margin-bottom: 0; }
.xt-field > .xt-form-help, .xt-field > .xt-form-error { margin-top: 0; }
.xt-field--span-2 { grid-column: span 2; }
.xt-field--span-3 { grid-column: span 3; }
.xt-field--full { grid-column: 1 / -1; }
/* Titled section — group long forms into labelled blocks */
.xt-form-section { padding: var(--x-spacing-lg) 0; border-bottom: 1px solid var(--x-border-light); }
.xt-form-section:last-child { border-bottom: 0; }
.xt-form-section__head { margin-bottom: var(--x-spacing-md); }
.xt-form-section__title { margin: 0; font-size: var(--x-font-size-base); font-weight: 700; color: var(--x-text-primary); display: flex; align-items: center; gap: 8px; }
.xt-form-section__title .xt-icon { width: 18px; height: 18px; color: var(--x-header-primary, var(--x-primary)); }
.xt-form-section__desc { margin: 4px 0 0; font-size: var(--x-font-size-sm); color: var(--x-text-tertiary); }
/* Side-by-side: section info on the left, fields on the right (settings pages) */
.xt-form-split { display: grid; grid-template-columns: 280px 1fr; gap: var(--x-spacing-xl); padding: var(--x-spacing-lg) 0; border-bottom: 1px solid var(--x-border-light); }
.xt-form-split:last-child { border-bottom: 0; }
.xt-form-split__aside .xt-form-section__title { font-size: var(--x-font-size-sm); }
/* Fieldset / legend */
.xt-fieldset { border: 1px solid var(--x-border); border-radius: var(--x-radius-lg); padding: var(--x-spacing-lg); margin: 0; }
.xt-fieldset > legend { padding: 0 8px; font-size: var(--x-font-size-sm); font-weight: 700; color: var(--x-text-primary); }
/* Inline form (filter row, login) */
.xt-form-inline { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--x-spacing-md); }
.xt-form-inline .xt-field { flex: 1 1 200px; }
/* Actions row at the foot of a form */
.xt-form-actions { display: flex; align-items: center; justify-content: flex-end; gap: var(--x-spacing-sm); padding-top: var(--x-spacing-lg); margin-top: var(--x-spacing-md); border-top: 1px solid var(--x-border-light); }
.xt-form-actions--split { justify-content: space-between; }
.xt-form-actions--bare { border-top: 0; padding-top: 0; margin-top: 0; }
/* =============================================================================
* 30. CALENDAR (month view + date picker — XTender.calendar / XTender.datepicker)
* ============================================================================= */
.xt-calendar { background: var(--x-bg-primary); border: 1px solid var(--x-border); border-radius: var(--x-radius-lg); box-shadow: var(--x-shadow-sm); padding: var(--x-spacing-md); width: 300px; }
.xt-calendar--full { width: 100%; }
.xt-calendar__header { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--x-spacing-sm); }
.xt-calendar__title { font-weight: 700; font-size: var(--x-font-size-sm); color: var(--x-text-primary); }
.xt-calendar__nav { display: inline-flex; gap: 4px; }
.xt-calendar__weekdays { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; margin-bottom: 2px; }
.xt-calendar__weekday { text-align: center; font-size: var(--x-font-size-xs); font-weight: 700; color: var(--x-text-light); text-transform: uppercase; padding: 4px 0; }
.xt-calendar__grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.xt-calendar__day {
position: relative; aspect-ratio: 1 / 1;
display: inline-flex; align-items: center; justify-content: center;
border: 0; background: transparent;
border-radius: var(--x-radius-sm);
font-family: var(--x-font-family); font-size: var(--x-font-size-sm);
color: var(--x-text-primary); cursor: pointer;
transition: background 0.12s ease, color 0.12s ease;
}
.xt-calendar__day:hover { background: var(--x-bg-hover); }
.xt-calendar__day.is-muted { color: var(--x-text-light); }
.xt-calendar__day.is-today { font-weight: 700; color: var(--x-header-primary, var(--x-primary)); }
.xt-calendar__day.is-today::after { content: ''; position: absolute; bottom: 3px; left: 50%; transform: translateX(-50%); width: 4px; height: 4px; border-radius: 50%; background: var(--x-header-primary, var(--x-primary)); }
.xt-calendar__day.is-selected { background: var(--x-header-primary, var(--x-primary)); color: #fff; font-weight: 600; }
.xt-calendar__day.is-selected::after { background: #fff; }
.xt-calendar__day.is-disabled { color: var(--x-text-light); opacity: 0.4; cursor: not-allowed; }
.xt-calendar__day.is-disabled:hover { background: transparent; }
.xt-calendar__dot { position: absolute; bottom: 4px; left: 50%; transform: translateX(-50%); width: 5px; height: 5px; border-radius: 50%; background: var(--x-secondary); }
.xt-calendar__day.is-selected .xt-calendar__dot { background: #fff; }
.xt-calendar__dot[data-tone="success"] { background: var(--x-success); }
.xt-calendar__dot[data-tone="danger"] { background: var(--x-danger); }
.xt-calendar__dot[data-tone="warning"] { background: var(--x-accent-amber); }
/* Date-picker floating popover (appended to body, positioned under the input) */
.xt-calendar-pop { position: fixed; z-index: var(--x-z-popover); }
.xt-calendar-pop[hidden] { display: none; }
.xt-calendar-pop .xt-calendar { box-shadow: var(--x-shadow-lg); }
/* =============================================================================
* 31. NOTIFICATION INDICATOR — count badge & status dot for icon buttons / nav
* Wrap any element in .xt-indicator (position:relative) and drop a
* .xt-badge-count or .xt-badge-dot inside; it pins to the top-right corner.
*
* ============================================================================= */
.xt-indicator { position: relative; }
.xt-badge-count {
position: absolute; top: -5px; right: -5px;
display: inline-flex; align-items: center; justify-content: center;
min-width: 18px; height: 18px;
padding: 0 5px;
font-family: var(--x-font-family);
font-size: 10px; font-weight: 700; line-height: 1;
font-variant-numeric: tabular-nums;
color: #fff;
background: var(--x-danger-solid);
border: 2px solid var(--x-bg-primary);
border-radius: var(--x-radius-full);
box-shadow: var(--x-shadow-sm);
pointer-events: none;
}
/* Standalone (inline, not pinned) — e.g. counts beside a nav label */
.xt-badge-count--inline { position: static; border-width: 0; box-shadow: none; }
/* Tones */
.xt-badge-count[data-tone="brand"] { background: var(--x-header-primary, var(--x-primary)); }
.xt-badge-count[data-tone="success"] { background: var(--x-success-solid); }
.xt-badge-count[data-tone="warning"] { background: var(--x-warning-solid); }
.xt-badge-count[data-tone="info"] { background: var(--x-info-solid); }
.xt-badge-count[data-tone="neutral"] { background: var(--x-gray-400); }
/* Bare status dot (no number) */
.xt-badge-dot {
position: absolute; top: -2px; right: -2px;
width: 9px; height: 9px;
background: var(--x-danger-solid);
border: 2px solid var(--x-bg-primary);
border-radius: var(--x-radius-full);
pointer-events: none;
}
.xt-badge-dot[data-tone="success"] { background: var(--x-success-solid); }
.xt-badge-dot[data-tone="warning"] { background: var(--x-warning-solid); }
.xt-badge-dot[data-tone="brand"] { background: var(--x-header-primary, var(--x-primary)); }
/* Pulsing variant (draws the eye to a live/unread state) */
.xt-badge-dot--pulse::after {
content: ''; position: absolute; inset: -2px; border-radius: inherit;
background: inherit; opacity: 0.55;
animation: xt-badge-ping 1.6s cubic-bezier(0, 0, 0.2, 1) infinite;
}
@keyframes xt-badge-ping { 75%, 100% { transform: scale(2.2); opacity: 0; } }
/* =============================================================================
* 32. METER — single or multi-segment proportional bar (readiness, capacity,
* status mix). Heavier & labelled where .xt-progress is a thin activity bar.
*
*
*
*
*
* ============================================================================= */
.xt-meter {
display: flex;
width: 100%; height: 10px;
background: var(--x-gray-100);
border-radius: var(--x-radius-full);
overflow: hidden;
}
.xt-meter--sm { height: 6px; }
.xt-meter--lg { height: 16px; }
.xt-meter__seg {
height: 100%;
background: var(--x-header-primary, var(--x-primary));
transition: width 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
/* Hairline between adjacent segments so tones stay legible when they touch */
.xt-meter__seg + .xt-meter__seg { box-shadow: inset 1px 0 0 var(--x-bg-primary); }
.xt-meter__seg[data-tone="success"] { background: var(--x-success-solid); }
.xt-meter__seg[data-tone="warning"] { background: var(--x-warning-solid); }
.xt-meter__seg[data-tone="danger"] { background: var(--x-danger-solid); }
.xt-meter__seg[data-tone="info"] { background: var(--x-info-solid); }
.xt-meter__seg[data-tone="neutral"] { background: var(--x-gray-300); }
/* Optional legend row beneath the meter */
.xt-meter-legend { display: flex; flex-wrap: wrap; gap: var(--x-spacing-md); margin-top: 10px; }
.xt-meter-legend__item { display: inline-flex; align-items: center; gap: 7px; font-size: var(--x-font-size-xs); color: var(--x-text-secondary); }
.xt-meter-legend__swatch { width: 9px; height: 9px; border-radius: var(--x-radius-full); flex-shrink: 0; background: var(--x-gray-300); }
.xt-meter-legend__swatch[data-tone="brand"] { background: var(--x-header-primary, var(--x-primary)); }
.xt-meter-legend__swatch[data-tone="success"] { background: var(--x-success-solid); }
.xt-meter-legend__swatch[data-tone="warning"] { background: var(--x-warning-solid); }
.xt-meter-legend__swatch[data-tone="danger"] { background: var(--x-danger-solid); }
.xt-meter-legend__swatch[data-tone="info"] { background: var(--x-info-solid); }
.xt-meter-legend__value { color: var(--x-text-primary); font-weight: 700; font-variant-numeric: tabular-nums; }
/* =============================================================================
* 33. INTERACTION & FOCUS POLISH (additive, backwards-compatible)
* A refinement layer over the components above: ONE consistent keyboard focus
* ring on every interactive control (accessibility), crisper press / hover
* feedback, an opt-in elevated card, and a reduced-motion guard. Nothing here
* renames or destructively overrides an existing rule — it only adds states
* the components didn't have, so every existing page keeps working.
* ============================================================================= */
/* --- Keyboard focus ring -----------------------------------------------------
* Shows for :focus-visible only (keyboard / a11y), never on a mouse click, so
* pointer users see nothing new while keyboard users finally get a clear,
* tenant-branded focus indicator on the controls that previously had none. */
.xt-btn:focus-visible,
.xt-icon-btn:focus-visible,
.xt-pagination__btn:focus-visible,
.xt-tab:focus-visible,
.xt-tabs-pill-btn:focus-visible,
.xt-chip:focus-visible,
.xt-view-toggle-btn:focus-visible,
.xt-switcher__btn:focus-visible,
.xt-switcher__item:focus-visible,
.xt-dropdown__item:focus-visible,
.xt-list__item:focus-visible,
.xt-breadcrumb__item:focus-visible,
.xt-section-link:focus-visible,
.xt-alert-action:focus-visible,
.xt-upload:focus-visible,
.xt-upload__file-remove:focus-visible,
.xt-combobox__option:focus-visible,
.xt-autocomplete__item:focus-visible,
.xt-calendar__day:not(.is-disabled):focus-visible,
.xt-table th[data-sort]:focus-visible,
.xt-accordion__item > summary:focus-visible {
outline: 2px solid var(--x-header-primary, var(--x-primary));
outline-offset: 2px;
}
/* Dark theme: brand blue #0C5E94 only reaches ~2.1:1 on the dark surfaces —
below the WCAG 1.4.11 3:1 floor for focus indicators — so lift the ring to a
lighter brand blue (~5:1). The [data-theme] + :is() raises specificity so this
wins over both the rule above and the base.css focus ring on dark pages. */
[data-theme="dark"] :is(
.xt-btn, .xt-icon-btn, .xt-pagination__btn, .xt-tab, .xt-tabs-pill-btn,
.xt-chip, .xt-view-toggle-btn, .xt-switcher__btn, .xt-switcher__item,
.xt-dropdown__item, .xt-list__item, .xt-breadcrumb__item, .xt-section-link,
.xt-alert-action, .xt-upload, .xt-upload__file-remove, .xt-combobox__option,
.xt-autocomplete__item, .xt-calendar__day, .xt-table th[data-sort],
.xt-accordion__item > summary
):focus-visible {
outline-color: var(--x-blue-300);
}
/* --- Tactile feedback --------------------------------------------------------
* Icon buttons press like .xt-btn does; menu / list rows settle on click. */
.xt-icon-btn:active { transform: translateY(0.5px); }
.xt-dropdown__item:active,
.xt-list__item:active { background: var(--x-bg-active); }
/* --- Hover affordances -------------------------------------------------------
* Secondary buttons now lift subtly like the primary (consistent depth cue),
* and form controls hint interactivity with a border-darken before focus. */
.xt-btn--secondary:hover { transform: translateY(-1px); }
.xt-input:hover:not(:focus):not(:disabled),
.xt-select:hover:not(:focus):not(:disabled),
.xt-textarea:hover:not(:focus):not(:disabled) { border-color: var(--x-border-dark); }
/* --- Opt-in elevated card ----------------------------------------------------
* For clickable cards: …
*/
.xt-card--interactive {
cursor: pointer;
transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
}
.xt-card--interactive:hover {
transform: translateY(-2px);
box-shadow: var(--x-shadow-md);
border-color: var(--x-border-dark);
}
.xt-card--interactive:active { transform: translateY(-1px); }
/* --- Reduced-motion guard ----------------------------------------------------
* Users who request reduced motion get no lifts / transitions. */
@media (prefers-reduced-motion: reduce) {
.xt-btn, .xt-btn--primary, .xt-btn--secondary, .xt-icon-btn,
.xt-kpi, .xt-card--interactive, .xt-meter__seg {
transition: none !important;
}
.xt-btn:hover, .xt-btn--primary:hover, .xt-btn--secondary:hover,
.xt-icon-btn:active, .xt-kpi:hover, .xt-card--interactive:hover { transform: none !important; }
}
/* =============================================================================
* 34. VISUAL REFRESH (additive override layer, backwards-compatible)
* A cohesive depth + surface + rhythm pass over the components above, via
* existing tokens. NO gradients (brand rule); no class renames; the only box-
* size change is a ~1px badge/status padding nudge. A few rules intentionally
* SUPERSEDE base values by source order (equal specificity) — if you change
* one, change its base too. (The card-header gradient was removed in the base
* rule itself, not here, so deleting this section can't re-introduce it.)
* ============================================================================= */
/* --- Depth: buttons get intentional, layered elevation. The inset hairline is
* a top light-catch (a shadow, not a gradient fill) for a premium edge. --- */
.xt-btn--primary {
box-shadow: 0 1px 2px rgba(var(--x-primary-rgb), 0.22),
0 4px 12px rgba(var(--x-primary-rgb), 0.16),
inset 0 1px 0 rgba(255, 255, 255, 0.13);
}
.xt-btn--primary:hover {
box-shadow: 0 2px 4px rgba(var(--x-primary-rgb), 0.24),
0 8px 20px rgba(var(--x-primary-rgb), 0.20),
inset 0 1px 0 rgba(255, 255, 255, 0.13);
}
/* Intent buttons: themed shadow (adapts in dark mode) + top light-catch. */
.xt-btn--danger, .xt-btn--success, .xt-btn--info, .xt-btn--warning {
box-shadow: var(--x-shadow-sm), inset 0 1px 0 rgba(255, 255, 255, 0.12);
}
/* --- Surfaces: base cards lift gently; structured panels get real depth. The
* card header is a flat tint (gradient removed in the base rule above). --- */
.xt-card { box-shadow: var(--x-shadow-sm); }
.xt-card .xt-card { box-shadow: none; } /* no shadow-stacking on nested cards */
.xt-card--panel { box-shadow: var(--x-shadow-md); }
/* Containers share one calm elevation (.xt-table-wrap already has it in base). */
.xt-toolbar, .xt-filter-bar { box-shadow: var(--x-shadow-sm); }
/* Floating surfaces soften (radius up to lg); they keep the themed shadow-lg. */
.xt-dropdown__menu, .xt-combobox__panel, .xt-autocomplete-panel {
border-radius: var(--x-radius-lg);
}
/* --- Rhythm: crisper headings; tighter, more legible badges & status pills. --- */
.xt-card__title, .xt-modal__title, .xt-drawer__title,
.xt-page-header__title, .xt-section-head h3 { letter-spacing: -0.014em; }
.xt-badge { padding: 3px 10px; letter-spacing: 0.01em; }
.xt-status { padding: 4px 11px 4px 9px; }
/* --- Inputs: a slightly softer, deeper focus glow that reads on white.
* (The higher-specificity .is-invalid:focus red ring still wins.) --- */
.xt-input:focus, .xt-select:focus, .xt-textarea:focus {
box-shadow: 0 0 0 3px rgba(var(--x-primary-rgb), 0.16),
0 1px 2px rgba(var(--x-primary-rgb), 0.10);
}
/* --- KPI: the accent rail reads as a deliberate edge; value a touch tighter. */
.xt-kpi::before { width: 4px; opacity: 1; }
.xt-kpi-value { letter-spacing: -0.015em; }
/* =============================================================================
* 35. PRO FORMS & AUTOCOMPLETE
* Opt-in, backwards-compatible anatomy for dense operational forms. Existing
* .xt-input/.xt-field markup remains valid; add data-xt-field and the shells
* below when richer states, adornments, counters or choice cards are needed.
* ============================================================================= */
/* Form composition -------------------------------------------------------- */
.xt-form-pro {
display: flex;
flex-direction: column;
gap: var(--x-spacing-md);
}
.xt-form-section--card {
overflow: visible;
padding: 0;
background: var(--x-bg-primary);
border: 1px solid var(--x-border);
border-radius: var(--x-radius-lg);
box-shadow: var(--x-shadow-sm);
}
.xt-form-section--card + .xt-form-section--card { margin-top: 0; }
.xt-form-section--card > .xt-form-section__head {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: var(--x-spacing-md);
margin: 0;
padding: var(--x-spacing-md) var(--x-spacing-lg);
background: var(--x-bg-secondary);
border-bottom: 1px solid var(--x-border-light);
border-radius: var(--x-radius-lg) var(--x-radius-lg) 0 0;
}
.xt-form-section__heading { min-width: 0; }
.xt-form-section__eyebrow {
display: block;
margin-bottom: 3px;
color: var(--x-text-tertiary);
font-size: var(--x-font-size-xs);
font-weight: 700;
letter-spacing: 0.045em;
text-transform: uppercase;
}
.xt-form-section__body { padding: var(--x-spacing-lg); }
.xt-form-section__status {
flex: 0 0 auto;
padding: 4px 8px;
color: var(--x-text-tertiary);
font-size: var(--x-font-size-xs);
font-weight: 650;
line-height: 1.2;
white-space: nowrap;
background: var(--x-bg-tertiary);
border-radius: var(--x-radius-full);
}
/* Field anatomy ----------------------------------------------------------- */
.xt-field[data-xt-field] { gap: 7px; }
fieldset.xt-field[data-xt-field] {
min-inline-size: 0;
margin: 0;
padding: 0;
border: 0;
}
fieldset.xt-field[data-xt-field] > legend {
padding: 0;
}
.xt-field__head {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: var(--x-spacing-sm);
min-width: 0;
}
.xt-field__head .xt-form-label { min-width: 0; }
.xt-form-label__optional,
.xt-form-label__meta {
color: var(--x-text-tertiary);
font-size: var(--x-font-size-xs);
font-weight: 500;
}
.xt-field__counter {
flex: 0 0 auto;
color: var(--x-text-muted);
font-size: var(--x-font-size-xs);
font-variant-numeric: tabular-nums;
}
.xt-field__counter.is-near-limit {
color: var(--x-warning);
font-weight: 650;
}
.xt-field.is-focused .xt-form-label,
.xt-field.is-focused > .xt-form-label,
.xt-field.is-focused > legend {
color: var(--x-header-primary, var(--x-primary));
}
.xt-field__meta {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: var(--x-spacing-sm);
min-height: 17px;
}
.xt-field__meta .xt-form-help,
.xt-field__meta .xt-form-error,
.xt-field__meta .xt-field__message { margin: 0; }
.xt-field__message {
display: inline-flex;
align-items: flex-start;
gap: 5px;
color: var(--x-text-tertiary);
font-size: var(--x-font-size-xs);
line-height: 1.4;
}
.xt-field__message .xt-icon {
width: 14px;
height: 14px;
margin-top: 1px;
flex: 0 0 auto;
}
.xt-field__message[data-tone="success"] { color: var(--x-success); }
.xt-field__message[data-tone="warning"] { color: var(--x-warning); }
.xt-field__message[data-tone="danger"],
.xt-field .xt-form-error { color: var(--x-danger); }
.xt-field__notice {
display: flex;
align-items: flex-start;
gap: var(--x-spacing-sm);
padding: 10px 12px;
color: var(--x-text-secondary);
font-size: var(--x-font-size-xs);
line-height: 1.45;
background: var(--x-info-bg);
border: 1px solid var(--x-info-border);
border-radius: var(--x-radius);
}
.xt-field__notice .xt-icon {
width: 16px;
height: 16px;
flex: 0 0 auto;
color: var(--x-info);
}
/* Adorned control shell --------------------------------------------------- */
.xt-control {
position: relative;
display: flex;
align-items: center;
min-width: 0;
}
.xt-control > .xt-input,
.xt-control > .xt-select,
.xt-control > .xt-textarea { min-width: 0; }
.xt-control--leading > .xt-input,
.xt-control--leading > .xt-select { padding-inline-start: 40px; }
.xt-control--trailing > .xt-input,
.xt-control--trailing > .xt-select { padding-inline-end: 42px; }
.xt-control--leading.xt-control--trailing > .xt-input,
.xt-control--leading.xt-control--trailing > .xt-select {
padding-inline-start: 40px;
padding-inline-end: 42px;
}
.xt-control__leading,
.xt-control__trailing,
.xt-control__action {
position: absolute;
top: 50%;
z-index: 1;
display: inline-flex;
align-items: center;
justify-content: center;
transform: translateY(-50%);
}
.xt-control__leading {
inset-inline-start: 12px;
color: var(--x-text-muted);
pointer-events: none;
}
.xt-control__trailing {
inset-inline-end: 12px;
color: var(--x-text-tertiary);
font-size: var(--x-font-size-xs);
pointer-events: none;
}
.xt-control__leading .xt-icon,
.xt-control__trailing .xt-icon,
.xt-control__action .xt-icon {
width: 17px;
height: 17px;
}
.xt-control__action {
inset-inline-end: 5px;
width: 32px;
height: 32px;
padding: 0;
color: var(--x-text-tertiary);
background: transparent;
border: 0;
border-radius: var(--x-radius-sm);
cursor: pointer;
}
.xt-control__action:hover {
color: var(--x-text-primary);
background: var(--x-bg-hover);
}
.xt-control__action:focus-visible {
outline: 2px solid var(--x-header-primary, var(--x-primary));
outline-offset: 1px;
}
.xt-control:focus-within .xt-control__leading { color: var(--x-header-primary, var(--x-primary)); }
.xt-control.is-disabled .xt-control__leading,
.xt-control.is-disabled .xt-control__trailing,
.xt-control.is-disabled .xt-control__action { color: var(--x-text-light); }
/* :not([data-afkill-ro]) — kill-autofill gates fields readonly-until-focus;
those are NOT semantically readonly and must keep normal text color
(kill-autofill pins background/cursor inline but not color). */
.xt-input[readonly]:not([data-afkill-ro]),
.xt-textarea[readonly],
.xt-input--readonly {
color: var(--x-text-secondary);
background: var(--x-bg-tertiary);
cursor: default;
}
/* Semantic states. JS mirrors these classes onto the nearest .xt-field. */
.xt-field.is-error :is(.xt-input, .xt-select, .xt-textarea),
.xt-field :is(.xt-input, .xt-select, .xt-textarea).is-invalid {
border-color: var(--x-danger-border);
}
.xt-field.is-error :is(.xt-input, .xt-select, .xt-textarea):focus,
.xt-field :is(.xt-input, .xt-select, .xt-textarea).is-invalid:focus {
border-color: var(--x-danger);
box-shadow: 0 0 0 3px rgba(var(--x-danger-solid-rgb), 0.13);
}
.xt-field.is-success :is(.xt-input, .xt-select, .xt-textarea),
.xt-field :is(.xt-input, .xt-select, .xt-textarea).is-valid {
border-color: var(--x-success-border);
}
.xt-field.is-warning :is(.xt-input, .xt-select, .xt-textarea) {
border-color: var(--x-warning-border);
}
.xt-field.is-error .xt-choice-card__body {
border-color: var(--x-danger-border);
}
/* Choice-card groups ------------------------------------------------------ */
.xt-choice-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: var(--x-spacing-sm);
}
.xt-choice-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.xt-choice-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.xt-choice-card {
position: relative;
display: block;
min-width: 0;
cursor: pointer;
}
.xt-choice-card__input {
position: absolute;
width: 1px;
height: 1px;
opacity: 0;
pointer-events: none;
}
.xt-choice-card__body {
display: flex;
align-items: center;
gap: 9px;
min-height: var(--x-control-height);
padding: 9px 11px;
color: var(--x-text-secondary);
font-size: var(--x-font-size-sm);
font-weight: 600;
background: var(--x-bg-primary);
border: 1px solid var(--x-border);
border-radius: var(--x-radius);
transition: border-color 120ms ease, background 120ms ease, box-shadow 120ms ease;
}
.xt-choice-card:hover .xt-choice-card__body { border-color: var(--x-border-dark); }
.xt-choice-card__input:checked + .xt-choice-card__body {
color: var(--x-header-primary, var(--x-primary));
background: rgba(var(--x-primary-rgb), 0.07);
border-color: var(--x-header-primary, var(--x-primary));
box-shadow: inset 0 0 0 1px var(--x-header-primary, var(--x-primary));
}
.xt-choice-card__input:focus-visible + .xt-choice-card__body {
outline: 2px solid var(--x-header-primary, var(--x-primary));
outline-offset: 2px;
}
.xt-choice-card__input:disabled + .xt-choice-card__body {
color: var(--x-text-muted);
background: var(--x-bg-tertiary);
border-color: var(--x-border-light);
cursor: not-allowed;
opacity: 0.72;
}
.xt-choice-card__indicator {
width: 9px;
height: 9px;
flex: 0 0 auto;
background: var(--x-bg-primary);
border: 1.5px solid var(--x-border-dark);
border-radius: var(--x-radius-full);
}
.xt-choice-card__input:checked + .xt-choice-card__body .xt-choice-card__indicator {
background: var(--x-header-primary, var(--x-primary));
border-color: var(--x-header-primary, var(--x-primary));
box-shadow: inset 0 0 0 2px var(--x-bg-primary);
}
/* Pro autocomplete panel -------------------------------------------------- */
.xt-autocomplete-panel--pro {
/* The base panel's 340px max-height would hard-clip head+results+foot
(overflow:hidden here means no panel scroll) — the JS sizes the inner
__results box instead, so the pro panel must not cap its own height. */
max-height: none;
overflow: hidden;
padding: 0;
border-color: var(--x-border-dark);
border-radius: var(--x-radius-lg);
box-shadow: var(--x-shadow-xl);
}
.xt-autocomplete__head,
.xt-autocomplete__foot {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--x-spacing-sm);
color: var(--x-text-tertiary);
font-size: var(--x-font-size-xs);
background: var(--x-bg-secondary);
}
.xt-autocomplete__head {
padding: 9px 12px;
border-bottom: 1px solid var(--x-border-light);
}
.xt-autocomplete__head strong {
overflow: hidden;
color: var(--x-text-secondary);
font-weight: 700;
text-overflow: ellipsis;
white-space: nowrap;
}
.xt-autocomplete__foot {
justify-content: flex-start;
padding: 8px 12px;
border-top: 1px solid var(--x-border-light);
}
.xt-autocomplete__key {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 20px;
height: 20px;
padding: 0 5px;
color: var(--x-text-secondary);
font-family: var(--x-font-family);
font-size: 10px;
font-weight: 700;
line-height: 1;
background: var(--x-bg-primary);
border: 1px solid var(--x-border);
border-radius: 4px;
box-shadow: var(--x-shadow-sm);
}
.xt-autocomplete__results {
max-height: 340px;
overflow-y: auto;
padding: 5px;
overscroll-behavior: contain;
}
.xt-autocomplete-panel:not(.xt-autocomplete-panel--pro) .xt-autocomplete__head,
.xt-autocomplete-panel:not(.xt-autocomplete-panel--pro) .xt-autocomplete__foot { display: none; }
.xt-autocomplete-panel:not(.xt-autocomplete-panel--pro) .xt-autocomplete__results {
max-height: inherit;
padding: 0;
}
.xt-autocomplete-panel--pro .xt-autocomplete__group {
padding: 10px 10px 5px;
color: var(--x-text-tertiary);
}
.xt-autocomplete-panel--pro .xt-autocomplete__item {
min-height: 48px;
padding: 8px 9px;
}
.xt-autocomplete__avatar {
display: inline-flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
flex: 0 0 auto;
color: var(--x-header-primary, var(--x-primary));
font-size: 11px;
font-weight: 750;
letter-spacing: 0.02em;
background: rgba(var(--x-primary-rgb), 0.1);
border: 1px solid rgba(var(--x-primary-rgb), 0.16);
border-radius: var(--x-radius);
}
.xt-autocomplete-panel--pro .xt-autocomplete__item-title { font-weight: 650; }
.xt-autocomplete-panel--pro .xt-autocomplete__meta {
padding: 3px 7px;
color: var(--x-text-secondary);
font-weight: 650;
background: var(--x-bg-tertiary);
border-radius: var(--x-radius-full);
}
.xt-autocomplete-panel--pro .xt-autocomplete__item.is-active {
background: rgba(var(--x-primary-rgb), 0.08);
box-shadow: inset 3px 0 0 var(--x-header-primary, var(--x-primary));
}
.xt-autocomplete-panel--pro .xt-autocomplete__empty {
min-height: 72px;
padding: 18px;
}
.xt-autocomplete-panel--pro .xt-autocomplete__loading {
min-height: 92px;
padding: 24px 18px;
}
/* Keep composed prefix/suffix groups visually unified while preserving the
existing child markup and browser-native control behaviour. */
.xt-input-group {
border-radius: var(--x-radius);
transition: box-shadow 120ms ease;
}
.xt-input-group:focus-within {
box-shadow: 0 0 0 3px rgba(var(--x-primary-rgb), 0.14);
}
.xt-input-group:focus-within > :is(.xt-input, .xt-select, .xt-input-group-text) {
position: relative;
z-index: 1;
border-color: var(--x-header-primary, var(--x-primary));
}
.xt-input-group > :is(.xt-input, .xt-select):focus {
box-shadow: none;
}
[data-theme="dark"] .xt-field.is-focused .xt-form-label,
[data-theme="dark"] .xt-field.is-focused > .xt-form-label,
[data-theme="dark"] .xt-field.is-focused > legend,
[data-theme="dark"] .xt-control:focus-within .xt-control__leading {
color: var(--x-blue-300);
}
[data-theme="dark"] .xt-form-section__title .xt-icon,
[data-theme="dark"] .xt-field__notice .xt-icon {
color: var(--x-blue-300);
}
[data-theme="dark"] .xt-form-label.required::after,
[data-theme="dark"] .xt-field__message[data-tone="danger"],
[data-theme="dark"] .xt-field .xt-form-error {
color: var(--x-danger-border);
}
[data-theme="dark"] .xt-field__message[data-tone="success"] {
color: var(--x-success-border);
}
[data-theme="dark"] .xt-field__message[data-tone="warning"],
[data-theme="dark"] .xt-field__counter.is-near-limit {
color: var(--x-warning-border);
}
[data-theme="dark"] .xt-field__counter {
color: var(--x-text-tertiary);
}
[data-theme="dark"] .xt-field__notice {
color: var(--x-text-secondary);
background: rgba(var(--x-primary-rgb), 0.14);
border-color: var(--x-blue-300);
}
[data-theme="dark"] .xt-choice-card__input:checked + .xt-choice-card__body {
color: var(--x-blue-300);
border-color: var(--x-blue-300);
box-shadow: inset 0 0 0 1px var(--x-blue-300);
}
[data-theme="dark"] .xt-choice-card__input:checked + .xt-choice-card__body .xt-choice-card__indicator {
background: var(--x-blue-300);
border-color: var(--x-blue-300);
}
[data-theme="dark"] .xt-autocomplete-panel--pro .xt-autocomplete__item mark,
[data-theme="dark"] .xt-autocomplete-panel--pro .xt-autocomplete__item--action,
[data-theme="dark"] .xt-autocomplete-panel--pro .xt-autocomplete__avatar {
color: var(--x-blue-300);
}
[data-theme="dark"] .xt-autocomplete-panel--pro .xt-autocomplete__item.is-active {
background: rgba(var(--x-primary-rgb), 0.18);
box-shadow: inset 3px 0 0 var(--x-blue-300);
}
[data-theme="dark"] .xt-input-group:focus-within > :is(.xt-input, .xt-select, .xt-input-group-text) {
border-color: var(--x-blue-300);
}
@media (max-width: 720px) {
.xt-form-grid,
.xt-form-grid--2,
.xt-form-grid--3,
.xt-form-grid--4,
.xt-choice-grid,
.xt-choice-grid--3,
.xt-choice-grid--4 { grid-template-columns: 1fr; }
.xt-field--span-2,
.xt-field--span-3,
.xt-field--full { grid-column: auto; }
.xt-form-section--card > .xt-form-section__head,
.xt-form-section__body { padding: var(--x-spacing-md); }
.xt-autocomplete__foot { display: none; }
}
@media (max-width: 480px) {
.xt-form-section--card > .xt-form-section__head {
flex-direction: column;
gap: var(--x-spacing-sm);
}
}
/* =============================================================================
* WORKFLOW PATTERN — opt in with .xt-workflow (preview/workflow.html)
* Header + descriptive tabs + schedule list + native disclosures.
* Presentation only: host modules own routing, filtering, statuses and actions.
* Existing pages without .xt-workflow are unaffected.
* ============================================================================= */
.xt-workflow { max-width: var(--x-workflow-max-width, 1440px); margin-inline: auto; }
.xt-workflow *, .xt-workflow *::before, .xt-workflow *::after { box-sizing: border-box; }
.xt-workflow .xt-workflow-header { display: flex; align-items: center; justify-content: space-between; gap: 32px; padding: 4px 0 24px; }
.xt-workflow .xt-workflow-header-copy { min-width: 0; }
.xt-workflow .xt-workflow-title { display: flex; align-items: center; gap: 12px; margin: 0; color: var(--x-text-primary); font-size: 24px; font-weight: 700; letter-spacing: -.025em; }
.xt-workflow .xt-workflow-title > .xt-icon { color: var(--x-header-primary, var(--x-primary)); width: 26px; height: 26px; }
.xt-workflow .xt-workflow-intro { margin: 8px 0 0; color: var(--x-text-secondary); font-size: 14px; line-height: 1.6; }
.xt-workflow .xt-workflow-action { display: flex; flex-direction: column; align-items: center; gap: 7px; flex-shrink: 0; }
.xt-workflow .xt-workflow-action > .xt-btn { height: auto; white-space: normal; text-align: center; min-height: 44px; padding-inline: 20px; border-radius: var(--x-radius-lg); box-shadow: none; }
.xt-workflow .xt-workflow-action > span { font-size: 12px; color: var(--x-text-secondary); }
/* Descriptive tabs: a short purpose beneath each destination. */
.xt-workflow .xt-workflow-tabs { display: grid; grid-template-columns: repeat(var(--x-workflow-columns, 4), minmax(0, 1fr)); gap: 6px; padding: 6px; margin: 0 0 24px; background: var(--x-bg-tertiary); border: 1px solid var(--x-border-light); border-radius: var(--x-radius-xl); overflow: visible; }
.xt-workflow .xt-workflow-tabs .xt-workflow-tab { display: flex; align-items: center; justify-content: flex-start; gap: 12px; min-width: 0; min-height: 72px; padding: 12px 16px; margin: 0; border: 1px solid transparent; border-radius: var(--x-radius-lg); color: var(--x-text-secondary); background: transparent; font-size: 14px; font-weight: 600; text-align: left; box-shadow: none; white-space: normal; }
.xt-workflow .xt-workflow-tabs .xt-workflow-tab::after { display: none; }
.xt-workflow .xt-workflow-tabs .xt-workflow-tab:hover { background: var(--x-bg-hover); color: var(--x-text-primary); }
.xt-workflow .xt-workflow-tabs .xt-workflow-tab:is(.is-active, [aria-selected="true"]) { background: var(--x-bg-primary); color: var(--x-header-primary, var(--x-primary)); border-color: var(--x-border); box-shadow: var(--x-shadow-sm); }
.xt-workflow .xt-workflow-tabs .xt-workflow-tab > .xt-icon { flex: 0 0 20px; width: 20px; height: 20px; }
.xt-workflow .xt-workflow-tab-copy { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.xt-workflow .xt-workflow-tab-label { display: flex; align-items: center; gap: 8px; }
.xt-workflow .xt-workflow-tab-hint { color: var(--x-text-secondary); font-size: 12px; font-weight: 400; line-height: 1.4; }
.xt-workflow .xt-workflow-tabs .xt-workflow-count { display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 21px; flex-shrink: 0; padding-inline: 6px; border-radius: var(--x-radius-full); color: var(--x-text-secondary); background: var(--x-bg-active); font-size: 11px; font-weight: 700; }
.xt-workflow .xt-workflow-tabs :is(.is-active, [aria-selected="true"]) .xt-workflow-count { background: var(--x-info-bg); color: var(--x-header-primary, var(--x-primary)); }
/* One schedule panel; controls sit above its list, without nested cards. */
.xt-workflow .xt-schedule { overflow: visible; border: 1px solid var(--x-border); border-radius: var(--x-radius-xl); box-shadow: none; background: var(--x-bg-primary); margin: 0 0 16px; }
.xt-workflow .xt-schedule-header { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 22px 24px 18px; }
.xt-workflow .xt-schedule-header h3 { margin: 0; color: var(--x-text-primary); font-size: 17px; font-weight: 700; letter-spacing: -.015em; }
.xt-workflow .xt-schedule-header p { margin: 5px 0 0; color: var(--x-text-secondary); font-size: 13px; line-height: 1.5; }
.xt-workflow .xt-schedule-header > .xt-btn { flex-shrink: 0; min-height: 42px; border-radius: var(--x-radius-lg); box-shadow: none; }
.xt-workflow .xt-schedule-controls { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px 20px; padding: 0 24px 20px; border-bottom: 1px solid var(--x-border); }
.xt-workflow .xt-schedule-filters { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; padding: 0; background: none; }
.xt-workflow .xt-schedule-filter { display: inline-flex; align-items: center; gap: 7px; min-height: 40px; padding: 8px 12px; background: var(--x-bg-primary); border: 1px solid var(--x-border); border-radius: var(--x-radius-lg); font-size: 13px; font-weight: 500; color: var(--x-text-secondary); line-height: 1.3; box-shadow: none; }
.xt-workflow .xt-schedule-filter:hover { background: var(--x-bg-hover); }
.xt-workflow .xt-schedule-filter:is(.active, [aria-pressed="true"]) { border-color: var(--x-header-primary, var(--x-primary)); background: var(--x-info-bg); color: var(--x-header-primary, var(--x-primary)); box-shadow: inset 0 0 0 1px var(--x-header-primary, var(--x-primary)); }
.xt-workflow .xt-schedule-filter .xt-workflow-count, .xt-workflow .xt-schedule-filter:is(.active, [aria-pressed="true"]) .xt-workflow-count { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; padding-inline: 5px; border-radius: var(--x-radius-full); background: var(--x-bg-active); color: inherit; font-size: 11px; font-weight: 700; }
.xt-workflow .xt-schedule-filter .xt-schedule-filter-date, .xt-workflow .xt-schedule-filter:is(.active, [aria-pressed="true"]) .xt-schedule-filter-date { padding-left: 7px; border-left: 1px solid var(--x-border); font-size: 12px; color: inherit; opacity: 1; white-space: nowrap; }
.xt-workflow .xt-schedule-search { display: flex; align-items: center; gap: 4px; flex: 0 1 316px; min-width: 240px; }
.xt-workflow .xt-schedule-search .xt-search { min-width: 0; }
.xt-workflow .xt-schedule-search .xt-input { height: 42px; border-radius: var(--x-radius-lg); background: var(--x-bg-primary); border-color: var(--x-border); font-size: 13px; }
.xt-workflow .xt-schedule-search .xt-search .xt-input { padding-left: 40px; }
.xt-workflow .xt-schedule-search .xt-input::placeholder { color: var(--x-text-secondary) !important; opacity: 1; }
.xt-workflow .xt-schedule-refresh { flex: 0 0 42px; width: 42px; height: 42px; padding: 0; border-radius: var(--x-radius-lg); }
/* Time is neutral metadata; status and the available action carry meaning. */
.xt-workflow .xt-schedule-row { display: grid; grid-template-columns: 104px minmax(0, 1fr) auto; align-items: center; gap: 20px; padding: 22px 24px; border-bottom: 1px solid var(--x-border-light); background: transparent; }
.xt-workflow .xt-schedule-row:last-child { border-bottom: 0; border-radius: 0 0 var(--x-radius-xl) var(--x-radius-xl); }
.xt-workflow .xt-schedule-row:hover { background: var(--x-bg-hover); }
.xt-workflow .xt-schedule-time { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-height: 52px; padding: 10px 7px; border: 1px solid var(--x-border-light); border-radius: var(--x-radius-lg); background: var(--x-bg-secondary); color: var(--x-text-primary); text-align: center; }
.xt-workflow .xt-schedule-time-value { font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; line-height: 1.4; }
.xt-workflow .xt-schedule-date { font-size: 12px; color: var(--x-text-secondary); }
.xt-workflow .xt-schedule-main { min-width: 0; }
.xt-workflow .xt-schedule-heading { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; }
.xt-workflow .xt-schedule-title { font-size: 15px; font-weight: 650; color: var(--x-text-primary); line-height: 1.5; overflow-wrap: anywhere; }
.xt-workflow .xt-schedule-heading .xt-status { font-size: 11px; padding: 4px 8px; line-height: 1.3; white-space: normal; }
.xt-workflow .xt-schedule-description { margin: 6px 0 0; font-size: 13px; line-height: 1.5; color: var(--x-text-secondary); overflow-wrap: anywhere; }
.xt-workflow .xt-schedule-actions { display: flex; flex-direction: column; align-items: stretch; gap: 2px; min-width: 148px; }
.xt-workflow .xt-schedule-actions > .xt-btn { min-height: 40px; border-radius: var(--x-radius-lg); box-shadow: none; }
.xt-workflow .xt-workflow-menu { position: relative; }
.xt-workflow .xt-workflow-menu > summary { cursor: pointer; list-style: none; min-height: 36px; font-size: 12px; border-radius: var(--x-radius-lg); }
.xt-workflow .xt-workflow-menu > summary::-webkit-details-marker { display: none; }
.xt-workflow .xt-workflow-menu > summary::after { content: ''; width: 6px; height: 6px; margin-left: 4px; border: solid currentColor; border-width: 0 1.5px 1.5px 0; transform: rotate(45deg) translateY(-2px); }
.xt-workflow .xt-workflow-menu[open] > summary::after { transform: rotate(225deg) translate(-1px, -1px); }
.xt-workflow .xt-workflow-menu-options { position: absolute; top: calc(100% + 4px); right: 0; z-index: var(--x-z-dropdown, 100); display: flex; flex-direction: column; align-items: stretch; min-width: 216px; padding: 6px; border: 1px solid var(--x-border); border-radius: var(--x-radius-lg); background: var(--x-bg-primary); box-shadow: var(--x-shadow-md); }
.xt-workflow .xt-workflow-menu-options > .xt-btn { justify-content: flex-start; min-height: 40px; white-space: normal; text-align: left; }
.xt-workflow .xt-workflow-menu-options > .xt-workflow-menu-action--danger { border-top: 1px solid var(--x-border-light); margin-top: 4px; color: var(--x-danger); }
.xt-workflow .xt-schedule-empty { margin: 0; padding: 32px 24px; text-align: center; font-size: 14px; line-height: 1.6; color: var(--x-text-secondary); }
.xt-workflow .xt-schedule-empty[hidden] { display: none; }
.xt-workflow .xt-schedule .xt-empty { padding: 40px 24px; }
.xt-workflow .xt-schedule .xt-empty-sub { max-width: 440px; margin-inline: auto; color: var(--x-text-secondary); line-height: 1.6; }
/* Administrative setup stays compact and separate from patient work. */
.xt-workflow .xt-workflow-disclosure { margin-top: 16px; border: 1px solid var(--x-border-light); border-radius: var(--x-radius-lg); background: transparent; }
.xt-workflow .xt-workflow-disclosure > summary { display: flex; align-items: center; gap: 12px; min-height: 64px; padding: 14px 18px; cursor: pointer; list-style: none; color: var(--x-text-secondary); font-size: 13px; font-weight: 600; }
.xt-workflow .xt-workflow-disclosure > summary::-webkit-details-marker { display: none; }
.xt-workflow .xt-workflow-disclosure > summary > span { min-width: 0; }
.xt-workflow .xt-workflow-disclosure > summary small { display: block; margin-top: 4px; font-size: 12px; font-weight: 400; }
.xt-workflow .xt-workflow-disclosure-chevron { margin-left: auto; flex-shrink: 0; }
.xt-workflow .xt-workflow-disclosure[open] .xt-workflow-disclosure-chevron { transform: rotate(180deg); }
.xt-workflow .xt-workflow-disclosure-body { padding: 0 18px 18px; border-top: 1px solid var(--x-border-light); }
.xt-workflow :is(.xt-workflow-tab, .xt-schedule-filter, .xt-workflow-menu > summary, .xt-workflow-disclosure > summary):focus-visible { outline: 2px solid var(--x-header-primary, var(--x-primary)); outline-offset: 3px; }
/* Shared dark tokens retain the deep brand blue; use readable text and focus accents here. */
[data-theme="dark"] .xt-workflow .xt-workflow-tabs .xt-workflow-tab:is(.is-active, [aria-selected="true"]) { color: var(--x-text-primary); border-color: var(--x-info-border) !important; }
[data-theme="dark"] .xt-workflow .xt-workflow-tabs .xt-workflow-tab:not(.is-active):not([aria-selected="true"]) { border-color: transparent !important; }
[data-theme="dark"] .xt-workflow .xt-schedule-main { background: transparent !important; }
[data-theme="dark"] .xt-workflow .xt-workflow-title > .xt-icon { color: var(--x-info-border); }
[data-theme="dark"] .xt-workflow .xt-workflow-menu-options > .xt-workflow-menu-action--danger { color: var(--x-danger-border); }
[data-theme="dark"] .xt-workflow :is(.xt-workflow-tab, .xt-schedule-filter, .xt-workflow-menu > summary, .xt-workflow-disclosure > summary):focus-visible { outline-color: var(--x-info-border); }
@media (max-width: 1000px) {
.xt-workflow .xt-workflow-tabs .xt-workflow-tab { padding-inline: 12px; gap: 8px; }
.xt-workflow .xt-schedule-search { flex: 1 1 260px; }
.xt-workflow .xt-schedule-row { gap: 16px; grid-template-columns: 96px minmax(0, 1fr) auto; }
.xt-workflow .xt-schedule-heading { align-items: flex-start; flex-direction: column; gap: 5px; }
}
@media (max-width: 640px) {
.xt-workflow .xt-workflow-header { align-items: flex-start; flex-direction: column; gap: 16px; padding-bottom: 20px; }
.xt-workflow .xt-workflow-title { font-size: 22px; }
.xt-workflow .xt-workflow-intro { font-size: 13px; }
.xt-workflow .xt-workflow-action, .xt-workflow .xt-workflow-action > .xt-btn { width: 100%; }
.xt-workflow .xt-workflow-tabs { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-bottom: 18px; gap: 4px; padding: 4px; }
.xt-workflow .xt-workflow-tabs .xt-workflow-tab { min-height: 76px; padding: 10px; gap: 8px; font-size: 13px; }
.xt-workflow .xt-workflow-tabs .xt-workflow-tab > .xt-icon { display: none; }
.xt-workflow .xt-workflow-tab-hint { font-size: 11px; }
.xt-workflow .xt-workflow-tab-label { gap: 5px; }
.xt-workflow .xt-schedule-header { align-items: flex-start; padding: 18px 16px 16px; gap: 12px; flex-wrap: wrap; }
.xt-workflow .xt-schedule-header h3 { font-size: 16px; }
.xt-workflow .xt-schedule-header p { max-width: 250px; }
.xt-workflow .xt-schedule-header > .xt-btn { min-height: 42px; font-size: 13px; }
.xt-workflow .xt-schedule-controls { padding: 0 16px 16px; gap: 14px; }
.xt-workflow .xt-schedule-filters { gap: 6px; }
.xt-workflow .xt-schedule-filter { font-size: 12px; padding-inline: 10px; }
.xt-workflow .xt-schedule-filter .xt-schedule-filter-date { display: none; }
.xt-workflow .xt-schedule-search { flex-basis: 100%; min-width: 0; }
.xt-workflow .xt-schedule-row { grid-template-columns: 78px minmax(0, 1fr); gap: 12px; padding: 18px 16px; align-items: start; }
.xt-workflow .xt-schedule-time { min-height: 50px; padding: 9px 5px; }
.xt-workflow .xt-schedule-time-value { font-size: 12px; }
.xt-workflow .xt-schedule-title { font-size: 14px; }
.xt-workflow .xt-schedule-description { font-size: 12px; }
.xt-workflow .xt-schedule-actions { grid-column: 1 / -1; flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: flex-end; min-width: 0; gap: 8px; padding-top: 2px; }
.xt-workflow .xt-schedule-actions > .xt-btn { font-size: 12px; padding-inline: 12px; flex: 1; }
.xt-workflow .xt-workflow-menu > summary { min-height: 40px; padding-inline: 10px; }
.xt-workflow .xt-workflow-disclosure > summary { padding-inline: 14px; }
}
@media (max-width: 380px) {
.xt-workflow .xt-workflow-tabs .xt-workflow-tab > .xt-icon { display: none; }
.xt-workflow .xt-workflow-tabs .xt-workflow-tab { padding-inline: 10px; }
.xt-workflow .xt-schedule-actions { flex-direction: column; align-items: stretch; gap: 2px; }
.xt-workflow .xt-workflow-menu > summary { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
.xt-workflow :is(.xt-workflow-tab, .xt-schedule-filter, .xt-schedule-row) { transition: none; }
}
.xt-workflow .xt-schedule-row[hidden] { display: none; }
/* =============================================================================
* xtender-utilities.css — layout, spacing & text helpers (xt- prefixed)
*
* Small, composable helpers that mirror the app's xc- utilities. Use sparingly —
* prefer components. All spacing maps to the --x-spacing-* token scale.
* ============================================================================= */
/* Grid ---------------------------------------------------------------------- */
.xt-grid { display: grid; gap: var(--x-spacing-md); }
.xt-grid--cols-2 { grid-template-columns: repeat(2, 1fr); }
.xt-grid--cols-3 { grid-template-columns: repeat(3, 1fr); }
.xt-grid--cols-4 { grid-template-columns: repeat(4, 1fr); }
.xt-grid--cols-6 { grid-template-columns: repeat(6, 1fr); }
.xt-grid--auto { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.xt-grid--gap-sm { gap: var(--x-spacing-sm); }
.xt-grid--gap-lg { gap: var(--x-spacing-lg); }
/* Flex stacks & rows -------------------------------------------------------- */
.xt-stack { display: flex; flex-direction: column; gap: var(--x-spacing-md); }
.xt-stack--sm { gap: var(--x-spacing-sm); }
.xt-stack--lg { gap: var(--x-spacing-lg); }
.xt-row { display: flex; align-items: center; gap: var(--x-spacing-md); }
.xt-row--sm { gap: var(--x-spacing-sm); }
.xt-row--wrap { flex-wrap: wrap; }
.xt-row--between { justify-content: space-between; }
.xt-row--end { justify-content: flex-end; }
.xt-row--center { justify-content: center; }
.xt-row--top { align-items: flex-start; }
.xt-grow { flex: 1 1 auto; min-width: 0; }
.xt-shrink-0 { flex-shrink: 0; }
/* Display ------------------------------------------------------------------- */
.xt-hidden { display: none !important; }
.xt-block { display: block; }
.xt-inline-block { display: inline-block; }
.xt-flex { display: flex; }
.xt-inline-flex { display: inline-flex; }
.xt-items-center { align-items: center; }
.xt-justify-between { justify-content: space-between; }
/* Spacing (margin) — t/b/l/r/x/y + 0..5 mapped to the token scale ---------- */
.xt-m-0 { margin: 0; }
.xt-mt-0 { margin-top: 0; } .xt-mt-1 { margin-top: var(--x-spacing-xs); } .xt-mt-2 { margin-top: var(--x-spacing-sm); } .xt-mt-3 { margin-top: var(--x-spacing-md); } .xt-mt-4 { margin-top: var(--x-spacing-lg); } .xt-mt-5 { margin-top: var(--x-spacing-xl); }
.xt-mb-0 { margin-bottom: 0; } .xt-mb-1 { margin-bottom: var(--x-spacing-xs); } .xt-mb-2 { margin-bottom: var(--x-spacing-sm); } .xt-mb-3 { margin-bottom: var(--x-spacing-md); } .xt-mb-4 { margin-bottom: var(--x-spacing-lg); } .xt-mb-5 { margin-bottom: var(--x-spacing-xl); }
.xt-ml-auto { margin-left: auto; }
.xt-mr-auto { margin-right: auto; }
.xt-mx-auto { margin-left: auto; margin-right: auto; }
/* Padding ------------------------------------------------------------------- */
.xt-p-0 { padding: 0; } .xt-p-2 { padding: var(--x-spacing-sm); } .xt-p-3 { padding: var(--x-spacing-md); } .xt-p-4 { padding: var(--x-spacing-lg); }
/* Typography ---------------------------------------------------------------- */
.xt-text-xs { font-size: var(--x-font-size-xs); }
.xt-text-sm { font-size: var(--x-font-size-sm); }
.xt-text-base { font-size: var(--x-font-size-base); }
.xt-text-lg { font-size: var(--x-font-size-lg); }
.xt-text-xl { font-size: var(--x-font-size-xl); }
.xt-font-medium { font-weight: 500; }
.xt-font-semibold { font-weight: 600; }
.xt-font-bold { font-weight: 700; }
.xt-text-center { text-align: center; }
.xt-text-right { text-align: right; }
.xt-text-left { text-align: left; }
.xt-uppercase { text-transform: uppercase; letter-spacing: 0.04em; }
.xt-truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.xt-nums { font-variant-numeric: tabular-nums; }
.xt-mono { font-family: var(--x-font-mono); font-variant-numeric: tabular-nums; }
.xt-leading-tight { line-height: 1.25; }
/* Text colour --------------------------------------------------------------- */
.xt-text-primary { color: var(--x-text-primary); }
.xt-text-secondary { color: var(--x-text-secondary); }
.xt-text-muted { color: var(--x-text-tertiary); }
.xt-text-brand { color: var(--x-header-primary, var(--x-primary)); }
.xt-text-success { color: var(--x-success); }
.xt-text-warning { color: var(--x-warning); }
.xt-text-danger { color: var(--x-danger); }
.xt-text-info { color: var(--x-info); }
/* Surface helpers ----------------------------------------------------------- */
.xt-surface { background: var(--x-bg-primary); border: 1px solid var(--x-border); border-radius: var(--x-radius-lg); }
.xt-divider { height: 1px; background: var(--x-border-light); border: 0; margin: var(--x-spacing-md) 0; }
.xt-rounded { border-radius: var(--x-radius); }
.xt-rounded-lg { border-radius: var(--x-radius-lg); }
.xt-shadow { box-shadow: var(--x-shadow); }
.xt-shadow-md { box-shadow: var(--x-shadow-md); }
/* Visually-hidden (accessible) --------------------------------------------- */
.xt-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; }