/* Vendored verbatim from github.com/sanat-garg/signaxo.in portal_theme.css (synced 25 Oct 2026). Don't edit: studio styles go in styles.css. */
/*
 * Signaxo UI — the one design sheet every internal portal follows (owner's decision, 25 Oct 2026).
 * Loaded by portal_theme_head() (portal_theme.php), which also gives Tailwind the same colours.
 * Every token and component is shown with copyable markup on the design page: design/index.php (signaxo.in/design/).
 *
 * Rules of thumb
 *  - One accent: Signaxo blue (--ui-primary / Tailwind brand-600). No indigo, violet, teal, lime, orange or gold accents.
 *  - Neutrals are Tailwind gray. Status: emerald = done / good, amber = needs attention, red = failed / destructive.
 *  - Classes are ui-*; portals don't redefine them. A portal's own CSS is only for layouts that are truly its own,
 *    and it uses these tokens (var(--ui-…)) rather than hex values.
 */

:root {
    /* Brand: Signaxo blue */
    --ui-brand-50: #eef6ff;
    --ui-brand-100: #d9ebff;
    --ui-brand-200: #bcdcff;
    --ui-brand-300: #8ec7ff;
    --ui-brand-400: #36a5ff;
    --ui-brand-500: #1a86f5;
    --ui-brand-600: #006acf;
    --ui-brand-700: #005bb5;
    --ui-brand-800: #0a4a8f;
    --ui-brand-900: #0a3c72;
    --ui-brand-950: #072546;

    --ui-primary: var(--ui-brand-600);
    --ui-primary-hover: var(--ui-brand-700);
    --ui-primary-soft: var(--ui-brand-50);
    --ui-primary-border: var(--ui-brand-200);
    --ui-primary-text: var(--ui-brand-700);
    --ui-ring: rgb(0 106 207 / .18);

    /* Neutrals (Tailwind gray) */
    --ui-bg: #f8fafc;              /* page background (surface-50) */
    --ui-surface: #ffffff;         /* cards, dialogs, inputs */
    --ui-surface-2: #f9fafb;       /* table heads, hover rows, card footers (gray-50) */
    --ui-surface-3: #f3f4f6;       /* pressed, skeletons, tracks (gray-100) */
    --ui-border: #e5e7eb;          /* inputs, dividers (gray-200) */
    --ui-border-soft: #f3f4f6;     /* card edges, row lines (gray-100) */
    --ui-border-strong: #d1d5db;   /* hovered inputs (gray-300) */
    --ui-text: #111827;            /* headings, values (gray-900) */
    --ui-text-2: #374151;          /* body text (gray-700) */
    --ui-muted: #6b7280;           /* secondary text, labels (gray-500) */
    --ui-faint: #9ca3af;           /* hints, placeholders, icons (gray-400) */

    /* Status */
    --ui-success: #059669; --ui-success-soft: #ecfdf5; --ui-success-border: #a7f3d0; --ui-success-text: #047857;
    --ui-warning: #d97706; --ui-warning-soft: #fffbeb; --ui-warning-border: #fde68a; --ui-warning-text: #b45309;
    --ui-danger:  #dc2626; --ui-danger-soft:  #fef2f2; --ui-danger-border:  #fecaca; --ui-danger-text:  #b91c1c;
    --ui-info: var(--ui-brand-600); --ui-info-soft: var(--ui-brand-50); --ui-info-border: var(--ui-brand-200); --ui-info-text: var(--ui-brand-700);

    /* Ink: dark surfaces (media viewers, dark tiles). Sidebars keep each portal's own colours: PORTAL_SIDEBAR_THEMES in
       portal_sidebar.php — the only per-portal colour. */
    --ui-ink: #0b0b0c;

    /* Charts: series in this order; platforms keep their own colours (UI.platformColors) */
    --ui-chart-1: #006acf; --ui-chart-2: #36a5ff; --ui-chart-3: #059669; --ui-chart-4: #d97706;
    --ui-chart-5: #7c3aed; --ui-chart-6: #db2777; --ui-chart-7: #0891b2; --ui-chart-8: #64748b;

    /* Type */
    --ui-font: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --ui-mono: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

    /* Shape */
    --ui-r-sm: 8px;      /* small buttons, chips in tables, thumbnails */
    --ui-r: 12px;        /* buttons, inputs, menus, alerts */
    --ui-r-lg: 16px;     /* cards, dialogs */
    --ui-shadow-xs: 0 1px 2px rgb(0 0 0 / .05);
    --ui-shadow-md: 0 6px 16px -6px rgb(15 23 42 / .14), 0 1px 3px rgb(15 23 42 / .06);
    --ui-shadow-lg: 0 24px 48px -16px rgb(15 23 42 / .28), 0 2px 6px rgb(15 23 42 / .06);
    --ui-shadow-xl: 0 25px 50px -12px rgb(0 0 0 / .35);

    /* Control heights */
    --ui-h-sm: 32px;
    --ui-h: 38px;
    --ui-h-lg: 44px;
}

/* ───────────── Base ───────────── */
body { font-family: var(--ui-font); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
[hidden] { display: none !important; }
::selection { background: var(--ui-brand-100); color: var(--ui-text); }
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 999px; }
::-webkit-scrollbar-thumb:hover { background: #94a3b8; }
.ui-num { font-variant-numeric: tabular-nums; }
.ui-mono { font-family: var(--ui-mono); font-size: .92em; }
.ui-truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.ui-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ───────────── Page frame (same as the Tailwind markup in CLAUDE.md; for pages without Tailwind) ───────────── */
.ui-body { margin: 0; background: var(--ui-bg); color: var(--ui-text); font: 14px/1.45 var(--ui-font); }
.ui-shell { min-height: 100vh; display: flex; flex-direction: column; background: var(--ui-bg); min-width: 0; }
.ui-header { position: sticky; top: var(--psb-topbar-h, 0px); z-index: 30; background: rgb(255 255 255 / .8); -webkit-backdrop-filter: blur(24px); backdrop-filter: blur(24px); border-bottom: 1px solid rgb(229 231 235 / .8); }
.ui-header-in { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px; min-height: 58px; }
.ui-header-actions { display: flex; align-items: center; gap: 8px; margin-left: auto; flex-wrap: wrap; justify-content: flex-end; }
.ui-title { margin: 0; font-size: 18px; line-height: 28px; font-weight: 700; color: var(--ui-text); letter-spacing: -.01em; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ui-main { flex: 1; width: 100%; max-width: 1600px; margin: 0 auto; padding: 16px; box-sizing: border-box; }
@media (min-width: 640px) {
    .ui-header-in { padding: 14px 24px; }
    .ui-title { font-size: 20px; }
    .ui-main { padding: 24px; }
}

/* Tabs under the page header: a section with several pages (Reports' Listings › Matrix / List / SEO …) */
.ui-htabs { display: flex; gap: 2px; margin-top: -6px; padding: 0 12px; overflow-x: auto; scrollbar-width: none; }
.ui-htabs::-webkit-scrollbar { display: none; }
.ui-htabs > a, .ui-htabs > button { flex: none; padding: 6px 8px 9px; font: 600 13px/18px var(--ui-font); color: var(--ui-muted); text-decoration: none; white-space: nowrap; background: none; border: 0; border-bottom: 2px solid transparent; cursor: pointer; transition: color .15s, border-color .15s; }
.ui-htabs > :hover { color: var(--ui-text); border-bottom-color: var(--ui-border-strong); }
.ui-htabs > .active, .ui-htabs > [aria-current="page"] { color: var(--ui-text); border-bottom-color: var(--ui-text); }
@media (min-width: 640px) { .ui-htabs { padding: 0 16px; } }

/* A heading row inside the content: title + one line of context on the left, actions on the right */
.ui-page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px 16px; flex-wrap: wrap; margin-bottom: 20px; }
.ui-page-head :where(h2, h3) { margin: 0; font-size: 18px; line-height: 26px; font-weight: 700; color: var(--ui-text); }
.ui-page-head :where(p) { margin: 4px 0 0; font-size: 14px; color: var(--ui-muted); }

/* ───────────── Text ───────────── */
.ui-h1 { font-size: 24px; line-height: 32px; font-weight: 700; letter-spacing: -.02em; color: var(--ui-text); margin: 0; }
.ui-h2 { font-size: 18px; line-height: 26px; font-weight: 700; color: var(--ui-text); margin: 0; }
.ui-h3 { font-size: 14px; line-height: 20px; font-weight: 600; color: var(--ui-text); margin: 0; }      /* card / section heading */
.ui-text { font-size: 14px; line-height: 20px; color: var(--ui-text-2); }
.ui-sub { font-size: 12px; line-height: 16px; color: var(--ui-muted); }
.ui-label { font-size: 11px; line-height: 16px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--ui-muted); }
.ui-link { color: var(--ui-primary); font-weight: 500; text-decoration: none; background: none; border: 0; padding: 0; font: inherit; cursor: pointer; }
.ui-link:hover { color: var(--ui-primary-hover); text-decoration: underline; }
.ui-kbd { display: inline-block; font: 600 11px/1 var(--ui-font); color: var(--ui-muted); background: #fff; border: 1px solid var(--ui-border); border-bottom-width: 2px; border-radius: 6px; padding: 3px 6px; }
.ui-divider { height: 1px; background: var(--ui-border-soft); border: 0; margin: 16px 0; }

/* ───────────── Cards ───────────── */
.ui-card { background: var(--ui-surface); border: 1px solid var(--ui-border-soft); border-radius: var(--ui-r-lg); box-shadow: var(--ui-shadow-xs); min-width: 0; }
.ui-card-pad { padding: 20px; }
.ui-card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 20px; border-bottom: 1px solid var(--ui-border-soft); }
.ui-card-head :where(h2, h3) { margin: 0; font-size: 14px; line-height: 20px; font-weight: 600; color: var(--ui-text); }
.ui-card-head :where(p) { margin: 2px 0 0; font-size: 12px; color: var(--ui-muted); }
.ui-card-body { padding: 20px; }
.ui-card-foot { display: flex; align-items: center; justify-content: flex-end; gap: 8px; padding: 12px 20px; border-top: 1px solid var(--ui-border-soft); background: var(--ui-surface-2); border-radius: 0 0 var(--ui-r-lg) var(--ui-r-lg); }
:where(a.ui-card) { display: block; }
a.ui-card, .ui-card.is-click { color: inherit; text-decoration: none; cursor: pointer; transition: border-color .15s, box-shadow .15s; }
a.ui-card:hover, .ui-card.is-click:hover { border-color: var(--ui-primary-border); box-shadow: var(--ui-shadow-md); }
.ui-grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); }

/* KPI tiles */
.ui-stats { display: grid; gap: 16px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 768px) { .ui-stats { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); } }
.ui-stat { background: var(--ui-surface); border: 1px solid var(--ui-border-soft); border-radius: var(--ui-r-lg); box-shadow: var(--ui-shadow-xs); padding: 16px 20px; min-width: 0; text-align: left; font: inherit; color: inherit; }
button.ui-stat, a.ui-stat { cursor: pointer; text-decoration: none; transition: box-shadow .15s, border-color .15s; }
button.ui-stat:hover, a.ui-stat:hover { box-shadow: var(--ui-shadow-md); }
.ui-stat.on { border-color: var(--ui-primary); box-shadow: 0 0 0 1px var(--ui-primary); }
.ui-stat-label { font-size: 12px; line-height: 16px; font-weight: 600; color: var(--ui-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ui-stat-value { margin-top: 6px; font-size: 26px; line-height: 32px; font-weight: 700; letter-spacing: -.02em; color: var(--ui-text); font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* In the .ui-stats grid a value shrinks with its tile, so ₹ lakhs and crores fit narrow tiles instead of being cut off */
.ui-stats > .ui-stat { container-type: inline-size; }
.ui-stats > .ui-stat .ui-stat-value { font-size: clamp(17px, 14cqi, 26px); }
.ui-stat-note { margin-top: 2px; font-size: 12px; color: var(--ui-faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ui-up { color: var(--ui-success); font-weight: 600; }
.ui-down { color: var(--ui-danger); font-weight: 600; }

/* ───────────── Buttons ───────────── */
.ui-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: var(--ui-h); padding: 0 14px; border-radius: var(--ui-r); border: 1px solid var(--ui-border); background: var(--ui-surface); color: var(--ui-text-2); font: 600 14px/1 var(--ui-font); white-space: nowrap; text-decoration: none; cursor: pointer; box-shadow: var(--ui-shadow-xs); transition: background-color .15s, border-color .15s, color .15s, box-shadow .15s, transform .1s; -webkit-tap-highlight-color: transparent; }
.ui-btn:hover { background: var(--ui-surface-2); border-color: var(--ui-border-strong); color: var(--ui-text); }
.ui-btn:active { transform: scale(.98); }
.ui-btn:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--ui-ring); border-color: var(--ui-brand-400); }
.ui-btn:disabled, .ui-btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; transform: none; pointer-events: none; }
.ui-btn svg, .ui-btn > i { width: 16px; height: 16px; flex-shrink: 0; font-size: 14px; }
.ui-btn-primary { background: var(--ui-primary); border-color: var(--ui-primary); color: #fff; box-shadow: 0 1px 2px rgb(0 106 207 / .25); }
.ui-btn-primary:hover { background: var(--ui-primary-hover); border-color: var(--ui-primary-hover); color: #fff; }
.ui-btn-soft { background: var(--ui-primary-soft); border-color: var(--ui-primary-soft); color: var(--ui-primary-text); box-shadow: none; }
.ui-btn-soft:hover { background: var(--ui-brand-100); border-color: var(--ui-brand-100); color: var(--ui-brand-800); }
.ui-btn-ghost { background: transparent; border-color: transparent; color: var(--ui-text-2); box-shadow: none; }
.ui-btn-ghost:hover { background: var(--ui-surface-3); border-color: transparent; }
.ui-btn-danger { background: var(--ui-surface); border-color: var(--ui-danger-border); color: var(--ui-danger-text); }
.ui-btn-danger:hover { background: var(--ui-danger-soft); border-color: #fca5a5; color: var(--ui-danger-text); }
.ui-btn-danger-solid { background: var(--ui-danger); border-color: var(--ui-danger); color: #fff; }
.ui-btn-danger-solid:hover { background: #b91c1c; border-color: #b91c1c; color: #fff; }
.ui-btn-sm { height: var(--ui-h-sm); padding: 0 10px; font-size: 13px; border-radius: 10px; gap: 5px; }
.ui-btn-sm svg { width: 14px; height: 14px; }
.ui-btn-lg { height: var(--ui-h-lg); padding: 0 20px; font-size: 15px; }
.ui-btn-block { display: flex; width: 100%; }
.ui-btn-icon { width: var(--ui-h); padding: 0; }
.ui-btn-icon.ui-btn-sm { width: var(--ui-h-sm); }
.ui-btn-icon svg { width: 18px; height: 18px; }
.ui-btn.is-loading { color: transparent !important; position: relative; pointer-events: none; }
.ui-btn.is-loading::after { content: ''; position: absolute; width: 16px; height: 16px; border-radius: 50%; border: 2px solid currentColor; border-color: rgb(255 255 255 / .9) rgb(255 255 255 / .9) transparent transparent; animation: ui-spin .7s linear infinite; }
.ui-btn:not(.ui-btn-primary):not(.ui-btn-danger-solid).is-loading::after { border-color: var(--ui-primary) var(--ui-primary) transparent transparent; }
.ui-btn-group { display: inline-flex; gap: 8px; flex-wrap: wrap; align-items: center; }

/* ───────────── Forms ───────────── */
.ui-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.ui-field-label { font-size: 13px; line-height: 18px; font-weight: 600; color: var(--ui-text-2); }
.ui-field-label .ui-opt { font-weight: 400; color: var(--ui-faint); }
.ui-hint { font-size: 12px; line-height: 16px; color: var(--ui-muted); }
.ui-error { font-size: 12px; line-height: 16px; color: var(--ui-danger-text); font-weight: 500; }
.ui-input, .ui-select, .ui-textarea { width: 100%; box-sizing: border-box; height: var(--ui-h); padding: 0 12px; border: 1px solid var(--ui-border); border-radius: var(--ui-r); background: var(--ui-surface); color: var(--ui-text); font: 400 14px/1.4 var(--ui-font); outline: none; box-shadow: var(--ui-shadow-xs); transition: border-color .15s, box-shadow .15s, background-color .15s; }
.ui-input::placeholder, .ui-textarea::placeholder { color: var(--ui-faint); }
.ui-input:hover, .ui-select:hover, .ui-textarea:hover { border-color: var(--ui-border-strong); }
.ui-input:focus, .ui-select:focus, .ui-textarea:focus { border-color: var(--ui-brand-400); box-shadow: 0 0 0 3px var(--ui-ring); }
.ui-input:disabled, .ui-select:disabled, .ui-textarea:disabled { background: var(--ui-surface-2); color: var(--ui-muted); cursor: not-allowed; }
.ui-input.is-invalid, .ui-select.is-invalid, .ui-textarea.is-invalid { border-color: #fca5a5; box-shadow: 0 0 0 3px rgb(220 38 38 / .12); }
.ui-textarea { height: auto; min-height: 96px; padding: 10px 12px; resize: vertical; line-height: 1.5; }
.ui-select { appearance: none; -webkit-appearance: none; padding-right: 34px; cursor: pointer; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 10px center; background-size: 16px; }
.ui-input-sm, .ui-select.ui-input-sm { height: var(--ui-h-sm); font-size: 13px; border-radius: 10px; }
.ui-search { position: relative; display: flex; align-items: center; min-width: 0; }
.ui-search > svg { position: absolute; left: 11px; width: 16px; height: 16px; color: var(--ui-faint); pointer-events: none; }
.ui-search > .ui-input { padding-left: 34px; }
.ui-check { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; color: var(--ui-text-2); cursor: pointer; user-select: none; }
.ui-check input { width: 16px; height: 16px; margin: 0; accent-color: var(--ui-primary); cursor: pointer; }
.ui-switch { position: relative; display: inline-flex; align-items: center; gap: 10px; font-size: 14px; color: var(--ui-text-2); cursor: pointer; user-select: none; }
.ui-switch input { appearance: none; -webkit-appearance: none; margin: 0; width: 36px; height: 20px; border-radius: 999px; background: #d1d5db; position: relative; cursor: pointer; transition: background-color .15s; flex-shrink: 0; }
.ui-switch input::after { content: ''; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgb(0 0 0 / .2); transition: transform .15s; }
.ui-switch input:checked { background: var(--ui-primary); }
.ui-switch input:checked::after { transform: translateX(16px); }
.ui-switch input:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--ui-ring); }
.ui-form-grid { display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 640px) { .ui-form-grid.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ui-form-grid .span-2 { grid-column: 1 / -1; } }
.ui-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 12px; }
.ui-toolbar .ui-search { flex: 1 1 240px; }

/* Drop zone for uploads */
.ui-drop { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 28px 16px; border: 1.5px dashed var(--ui-border-strong); border-radius: var(--ui-r-lg); background: var(--ui-surface-2); color: var(--ui-muted); font-size: 13px; text-align: center; cursor: pointer; transition: border-color .15s, background-color .15s; }
.ui-drop:hover, .ui-drop.is-over { border-color: var(--ui-brand-400); background: var(--ui-primary-soft); color: var(--ui-primary-text); }
.ui-drop svg { width: 28px; height: 28px; color: var(--ui-faint); }
.ui-drop strong { color: var(--ui-text); font-weight: 600; font-size: 14px; }

/* ───────────── Tables ───────────── */
.ui-table-wrap { background: var(--ui-surface); border: 1px solid var(--ui-border-soft); border-radius: var(--ui-r-lg); box-shadow: var(--ui-shadow-xs); overflow-x: auto; }
.ui-table { width: 100%; border-collapse: collapse; font-size: 13px; line-height: 18px; color: var(--ui-text-2); }
.ui-table :where(th) { position: sticky; top: 0; z-index: 1; text-align: left; font-size: 11px; line-height: 16px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--ui-muted); background: var(--ui-surface-2); padding: 10px 14px; border-bottom: 1px solid var(--ui-border); white-space: nowrap; }
.ui-table :where(td) { padding: 10px 14px; border-bottom: 1px solid var(--ui-border-soft); vertical-align: middle; }
.ui-table tbody tr:last-child td { border-bottom: 0; }
.ui-table .r, .ui-table .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ui-table .c { text-align: center; }
.ui-table td.strong, .ui-table .strong { font-weight: 600; color: var(--ui-text); }
.ui-table .ui-mono, .ui-table .nowrap { white-space: nowrap; }
.ui-table tr.is-click { cursor: pointer; }
.ui-table tr.is-click:hover td, .ui-table.is-hover tbody tr:hover td { background: var(--ui-surface-2); }
.ui-table tr.is-selected td { background: var(--ui-primary-soft); }
.ui-table tfoot td { font-weight: 700; color: var(--ui-text); background: var(--ui-surface-2); border-top: 1px solid var(--ui-border); border-bottom: 0; }
.ui-table th.is-sort { cursor: pointer; user-select: none; }
.ui-table th.is-sort:hover { color: var(--ui-text); background: var(--ui-surface-3); }
.ui-table th[aria-sort="ascending"]::after { content: ' ↑'; color: var(--ui-primary); }
.ui-table th[aria-sort="descending"]::after { content: ' ↓'; color: var(--ui-primary); }
.ui-table-compact :where(th, td) { padding: 7px 10px; }
.ui-table-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 14px; border-top: 1px solid var(--ui-border-soft); font-size: 12px; color: var(--ui-muted); }

/* ───────────── Badges, chips, avatars ───────────── */
.ui-badge { display: inline-flex; align-items: center; gap: 4px; height: 20px; padding: 0 8px; border-radius: 999px; font: 600 11.5px/1 var(--ui-font); white-space: nowrap; background: var(--ui-surface-3); color: #4b5563; border: 1px solid transparent; vertical-align: middle; }
.ui-badge-brand { background: var(--ui-brand-50); color: var(--ui-brand-700); }
.ui-badge-green { background: var(--ui-success-soft); color: var(--ui-success-text); }
.ui-badge-amber { background: var(--ui-warning-soft); color: var(--ui-warning-text); }
.ui-badge-red { background: var(--ui-danger-soft); color: var(--ui-danger-text); }
.ui-badge-dark { background: #1f2937; color: #fff; }
.ui-badge-outline { background: transparent; border-color: var(--ui-border); color: var(--ui-muted); }
.ui-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--ui-faint); flex-shrink: 0; }
.ui-dot.green { background: #10b981; } .ui-dot.amber { background: #f59e0b; } .ui-dot.red { background: #ef4444; } .ui-dot.brand { background: var(--ui-brand-400); }
.ui-count { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: var(--ui-primary); color: #fff; font: 700 11px/1 var(--ui-font); font-variant-numeric: tabular-nums; }
.ui-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.ui-chip { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--ui-border); background: var(--ui-surface); color: var(--ui-text-2); font: 500 13px/1 var(--ui-font); white-space: nowrap; cursor: pointer; transition: background-color .15s, border-color .15s, color .15s; }
.ui-chip:hover { background: var(--ui-surface-2); border-color: var(--ui-border-strong); }
.ui-chip.on, .ui-chip[aria-pressed="true"] { background: var(--ui-primary-soft); border-color: var(--ui-primary-border); color: var(--ui-primary-text); font-weight: 600; }
.ui-chip .n { color: var(--ui-faint); font-variant-numeric: tabular-nums; }
.ui-chip.on .n { color: var(--ui-brand-500); }
.ui-avatar { width: 32px; height: 32px; border-radius: 50%; background: var(--ui-brand-100); color: var(--ui-brand-800); display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: 13px; text-transform: uppercase; flex-shrink: 0; object-fit: cover; }
.ui-avatar-lg { width: 44px; height: 44px; font-size: 16px; }
.ui-thumb { width: 40px; height: 40px; border-radius: var(--ui-r-sm); object-fit: contain; background: #fff; border: 1px solid var(--ui-border); flex-shrink: 0; }

/* ───────────── Tabs ───────────── */
.ui-tabs { display: flex; gap: 20px; border-bottom: 1px solid var(--ui-border); overflow-x: auto; scrollbar-width: none; margin-bottom: 16px; }
.ui-tabs::-webkit-scrollbar { display: none; }
.ui-tabs > a, .ui-tabs > button { flex: none; display: inline-flex; align-items: center; gap: 6px; padding: 10px 2px; margin-bottom: -1px; background: none; border: 0; border-bottom: 2px solid transparent; color: var(--ui-muted); font: 600 14px/20px var(--ui-font); text-decoration: none; white-space: nowrap; cursor: pointer; transition: color .15s, border-color .15s; }
.ui-tabs > :hover { color: var(--ui-text); }
.ui-tabs > .on, .ui-tabs > .active, .ui-tabs > [aria-selected="true"] { color: var(--ui-primary); border-bottom-color: var(--ui-primary); }
.ui-seg { display: inline-flex; max-width: 100%; overflow-x: auto; scrollbar-width: none; padding: 3px; gap: 2px; background: var(--ui-surface-3); border-radius: var(--ui-r); }
.ui-seg::-webkit-scrollbar { display: none; }
.ui-seg > button, .ui-seg > a { flex: none; height: 30px; padding: 0 12px; border: 0; border-radius: 9px; background: transparent; color: var(--ui-muted); font: 600 13px/30px var(--ui-font); white-space: nowrap; text-decoration: none; cursor: pointer; transition: background-color .15s, color .15s, box-shadow .15s; }
.ui-seg > :hover { color: var(--ui-text); }
.ui-seg > .on, .ui-seg > .active, .ui-seg > [aria-selected="true"] { background: var(--ui-surface); color: var(--ui-text); box-shadow: 0 1px 2px rgb(0 0 0 / .08), 0 0 0 1px rgb(0 0 0 / .03); }

/* ───────────── Alerts ───────────── */
.ui-alert { display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; border-radius: var(--ui-r); border: 1px solid var(--ui-info-border); background: var(--ui-info-soft); color: var(--ui-info-text); font-size: 13px; line-height: 19px; }
.ui-alert > svg { width: 18px; height: 18px; flex-shrink: 0; margin-top: 1px; }
.ui-alert strong { font-weight: 600; }
.ui-alert a { color: inherit; font-weight: 600; }
.ui-alert-success { border-color: var(--ui-success-border); background: var(--ui-success-soft); color: var(--ui-success-text); }
.ui-alert-warning { border-color: var(--ui-warning-border); background: var(--ui-warning-soft); color: var(--ui-warning-text); }
.ui-alert-danger { border-color: var(--ui-danger-border); background: var(--ui-danger-soft); color: var(--ui-danger-text); }
.ui-alert-neutral { border-color: var(--ui-border); background: var(--ui-surface-2); color: var(--ui-text-2); }

/* ───────────── Menus and popovers ───────────── */
.ui-pop { position: absolute; z-index: 40; min-width: 180px; padding: 6px; background: var(--ui-surface); border: 1px solid var(--ui-border); border-radius: var(--ui-r); box-shadow: var(--ui-shadow-lg); animation: ui-pop-in .14s ease-out; }
.ui-menu-item { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 10px; border: 0; border-radius: var(--ui-r-sm); background: none; color: var(--ui-text-2); font: 500 13px/18px var(--ui-font); text-align: left; text-decoration: none; cursor: pointer; }
.ui-menu-item:hover, .ui-menu-item:focus-visible { background: var(--ui-surface-3); color: var(--ui-text); outline: none; }
.ui-menu-item svg { width: 16px; height: 16px; color: var(--ui-faint); flex-shrink: 0; }
.ui-menu-item.danger { color: var(--ui-danger-text); }
.ui-menu-item.danger:hover { background: var(--ui-danger-soft); }
.ui-menu-sep { height: 1px; margin: 6px -6px; background: var(--ui-border-soft); }

/* ───────────── Dialogs ───────────── */
.ui-modal { position: fixed; inset: 0; z-index: 80; display: none; align-items: center; justify-content: center; padding: 16px; background: rgb(15 23 42 / .5); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); }
.ui-modal.is-open { display: flex; }
.ui-dialog { width: 100%; max-width: 480px; max-height: calc(100vh - 32px); display: flex; flex-direction: column; background: var(--ui-surface); color: var(--ui-text); border-radius: var(--ui-r-lg); box-shadow: var(--ui-shadow-xl); overflow: hidden; animation: ui-dialog-in .18s ease-out; }
.ui-dialog-sm { max-width: 400px; } .ui-dialog-lg { max-width: 720px; } .ui-dialog-xl { max-width: 1040px; }
.ui-dialog-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 20px; border-bottom: 1px solid var(--ui-border-soft); }
.ui-dialog-head :where(h2, h3) { margin: 0; font-size: 16px; line-height: 24px; font-weight: 700; color: var(--ui-text); }
.ui-dialog-head :where(p) { margin: 2px 0 0; font-size: 13px; color: var(--ui-muted); }
.ui-dialog-close { width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center; border: 0; border-radius: var(--ui-r-sm); background: none; color: var(--ui-muted); cursor: pointer; flex-shrink: 0; }
.ui-dialog-close:hover { background: var(--ui-surface-3); color: var(--ui-text); }
.ui-dialog-close svg { width: 18px; height: 18px; }
.ui-dialog-body { padding: 20px; overflow-y: auto; font-size: 14px; color: var(--ui-text-2); }
.ui-dialog-foot { display: flex; align-items: center; justify-content: flex-end; gap: 8px; padding: 12px 20px; border-top: 1px solid var(--ui-border-soft); background: var(--ui-surface-2); }
@media (max-width: 639px) {
    .ui-modal { align-items: flex-end; padding: 0; }
    .ui-dialog { max-width: none !important; max-height: 92vh; border-radius: var(--ui-r-lg) var(--ui-r-lg) 0 0; }
}
/* A panel that slides in from the right (record details) */
.ui-drawer { position: fixed; inset: 0 0 0 auto; z-index: 80; width: min(560px, 100vw); display: flex; flex-direction: column; background: var(--ui-surface); box-shadow: var(--ui-shadow-xl); transform: translateX(100%); transition: transform .22s ease; }
.ui-drawer.is-open { transform: none; }

/* ───────────── Toasts (UI.toast) ───────────── */
.ui-toasts { position: fixed; right: 20px; bottom: 20px; z-index: 90; display: flex; flex-direction: column; gap: 10px; align-items: flex-end; pointer-events: none; max-width: calc(100vw - 40px); }
.ui-toast { pointer-events: auto; display: flex; align-items: flex-start; gap: 10px; min-width: 240px; max-width: 420px; padding: 12px 14px; background: #111827; color: #fff; border-radius: var(--ui-r); box-shadow: var(--ui-shadow-lg); font: 500 13.5px/19px var(--ui-font); animation: ui-toast-in .25s ease-out; }
.ui-toast svg { width: 18px; height: 18px; flex-shrink: 0; margin-top: 1px; color: var(--ui-brand-400); }
.ui-toast-success svg { color: #34d399; }
.ui-toast-warning svg { color: #fbbf24; }
.ui-toast-error svg { color: #f87171; }
.ui-toast.is-leaving { opacity: 0; transform: translateY(6px); transition: opacity .2s, transform .2s; }
@media (max-width: 639px) { .ui-toasts { left: 16px; right: 16px; bottom: 16px; max-width: none; align-items: stretch; } .ui-toast { max-width: none; } }

/* ───────────── Empty, loading, progress ───────────── */
.ui-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 48px 16px; text-align: center; color: var(--ui-muted); font-size: 14px; }
.ui-empty-icon { width: 48px; height: 48px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--ui-surface-3); color: var(--ui-faint); margin-bottom: 6px; }
.ui-empty-icon svg { width: 22px; height: 22px; }
.ui-empty :where(h3) { margin: 0; font-size: 14px; font-weight: 600; color: var(--ui-text); }
.ui-empty :where(p) { margin: 0; max-width: 360px; }
.ui-empty .ui-btn { margin-top: 10px; }
.ui-spinner { display: inline-block; width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--ui-brand-100); border-top-color: var(--ui-primary); animation: ui-spin .7s linear infinite; vertical-align: middle; }
.ui-spinner-lg { width: 32px; height: 32px; border-width: 3px; }
.ui-loading { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 40px 16px; color: var(--ui-muted); font-size: 13px; }
.ui-skeleton { display: block; border-radius: var(--ui-r-sm); background: linear-gradient(90deg, var(--ui-surface-3) 25%, #eceef1 37%, var(--ui-surface-3) 63%); background-size: 400% 100%; animation: ui-shimmer 1.4s ease infinite; min-height: 12px; }
.ui-progress { height: 6px; border-radius: 999px; background: var(--ui-surface-3); overflow: hidden; }
.ui-progress > :where(div) { height: 100%; width: 0; border-radius: inherit; background: var(--ui-primary); transition: width .3s; }
.ui-progress.is-indeterminate > :where(div) { width: 35%; animation: ui-indeterminate 1.1s ease-in-out infinite; }

/* Floating bar for actions on selected rows */
.ui-selbar { position: fixed; left: 50%; bottom: 22px; transform: translateX(-50%); z-index: 50; display: flex; align-items: center; gap: 8px; padding: 8px 8px 8px 16px; max-width: calc(100vw - 32px); overflow-x: auto; background: #111827; color: #fff; border-radius: var(--ui-r-lg); box-shadow: var(--ui-shadow-xl); font: 600 13.5px/1 var(--ui-font); white-space: nowrap; }
.ui-selbar .ui-btn { background: transparent; border-color: rgb(255 255 255 / .2); color: #fff; box-shadow: none; }
.ui-selbar .ui-btn:hover { background: rgb(255 255 255 / .08); }
.ui-selbar .ui-btn-primary { background: var(--ui-primary); border-color: var(--ui-primary); }

@keyframes ui-spin { to { transform: rotate(360deg); } }
@keyframes ui-shimmer { from { background-position: 100% 50%; } to { background-position: 0 50%; } }
@keyframes ui-indeterminate { from { transform: translateX(-100%); } to { transform: translateX(300%); } }
@keyframes ui-pop-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
@keyframes ui-dialog-in { from { opacity: 0; transform: translateY(8px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes ui-toast-in { from { opacity: 0; transform: translateY(10px) scale(.97); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .ui-dialog, .ui-toast, .ui-pop { animation: none; } }

@media print {
    .psb, .psb-topbar, .ui-header, .ui-toasts, .ui-selbar, .no-print { display: none !important; }
    .psb-main { margin-left: 0 !important; }
    .ui-card, .ui-table-wrap, .ui-stat { box-shadow: none; }
}