/*
 * SME Operations Portal — Design System v3
 * Presentation layer only. No application logic here.
 * Built on a Bootstrap-style visual language (spacing scale, color roles,
 * component shapes) with light/dark support via [data-theme].
 */

/* ---------------------------------------------------------------
   1. Tokens
--------------------------------------------------------------- */
:root {
    --font-main: "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

    /* Slate neutral scale + a single blue accent — see the "SME Operations
       Console" reference build for the source palette. Token NAMES are
       unchanged from Design System v3, so every existing component keeps
       working; only the underlying values moved to the new system. */
    --bg: #f8fafc;
    --panel: #ffffff;
    --panel-soft: #f1f5f9;
    --sidebar: #0f172a;
    --sidebar-active: #1e293b;
    --sidebar-text: #94a3b8;
    --sidebar-text-active: #ffffff;

    --text: #334155;
    --muted: #64748b;
    --heading: #0f172a;
    --border: #e2e8f0;
    --border-strong: #cbd5e1;

    --primary: #2563eb;
    --primary-dark: #1d4ed8;
    --primary-soft: #eff6ff;
    --success: #16a34a;
    --success-soft: #dcfce7;
    --warning: #d97706;
    --warning-soft: #fef3c7;
    --danger: #dc2626;
    --danger-soft: #fee2e2;
    --purple: #9333ea;
    --purple-soft: #f3e8ff;
    --cyan: #0891b2;
    --cyan-soft: #cffafe;
    --slate: #64748b;
    --slate-soft: #f1f5f9;

    --radius-sm: 6px;
    --radius: 10px;
    --radius-lg: 14px;
    --shadow-sm: 0 1px 2px rgba(15, 23, 42, .05);
    --shadow: 0 6px 20px rgba(15, 23, 42, .08);

    --sidebar-width: 246px;
    --topbar-height: 64px;

    /* Standard text-size tokens (referenced by several page-scoped style blocks) */
    --font-normal: 12.5px;
    --font-title: 14px;
    --font-header: 18px;
}

html[data-theme="dark"] {
    --bg: #0a1220;
    --panel: #111c2d;
    --panel-soft: #16223a;
    --sidebar: #060b16;
    --sidebar-active: #16223a;
    --sidebar-text: #94a3b8;
    --sidebar-text-active: #ffffff;

    --text: #cbd5e1;
    --muted: #94a3b8;
    --heading: #f8fafc;
    --border: #263449;
    --border-strong: #334155;

    --primary: #60a5fa;
    --primary-dark: #93c5fd;
    --primary-soft: #172a46;
    --success: #4ade80;
    --success-soft: #14321f;
    --warning: #fbbf24;
    --warning-soft: #3a2c11;
    --danger: #f87171;
    --danger-soft: #3a1a1c;
    --purple: #c084fc;
    --purple-soft: #2e1f45;
    --cyan: #22d3ee;
    --cyan-soft: #113140;
    --slate: #94a3b8;
    --slate-soft: #16223a;

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, .3);
    --shadow: 0 10px 26px rgba(0, 0, 0, .35);
    color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { min-height: 100%; }
body.app-shell {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font-family: var(--font-main);
    font-size: 13.5px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}
a { color: var(--primary); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3, h4 { color: var(--heading); font-weight: 600; margin: 0; }
p { margin: 0; }
svg { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; width: 20px; height: 20px; flex-shrink: 0; }

/* ---------------------------------------------------------------
   2. App shell layout
--------------------------------------------------------------- */
.nav-toggle { display: none; }
.mobile-menu-backdrop { display: none; }

.app-shell { display: flex; min-height: 100vh; }

.sidebar.opr-sidebar {
    width: var(--sidebar-width);
    flex-shrink: 0;
    background: var(--sidebar);
    color: var(--sidebar-text);
    display: flex;
    flex-direction: column;
    position: sticky;
    top: 0;
    height: 100vh;
    overflow-y: auto;
    scrollbar-width: thin;
}
.side-brand.opr-brand { padding: 18px 18px 14px; }
.side-brand-link { display: flex; align-items: center; gap: 10px; color: #fff; }
.side-brand-link:hover { text-decoration: none; }
.brand-logo-small { width: 34px; height: 34px; border-radius: 8px; object-fit: cover; }
.opr-cube-logo { width: 30px; height: 30px; border-radius: 8px; background: var(--primary); display: inline-flex; position: relative; }
.opr-cube-logo i { position: absolute; inset: 8px; background: #fff; border-radius: 2px; opacity: .9; }
.side-brand-copy { display: flex; flex-direction: column; line-height: 1.25; }
.side-brand-copy strong { font-size: 14.5px; font-weight: 600; color: #fff; }
.side-brand-copy small { font-size: 11px; color: var(--sidebar-text); }

.portal-context-card {
    margin: 4px 14px 10px;
    padding: 10px 12px;
    border-radius: var(--radius-sm);
    background: rgba(255,255,255,.06);
    display: flex;
    flex-direction: column;
    gap: 3px;
    font-size: 12.5px;
}
.portal-context-card strong { color: #fff; font-size: 13px; }
.portal-context-card span { display: inline-flex; align-items: center; gap: 5px; color: var(--sidebar-text); font-size: 11px; }

.side-nav { padding: 6px 10px 20px; flex: 1; }
.nav-group { border: none; margin-bottom: 2px; }
.nav-category {
    list-style: none;
    cursor: pointer;
    padding: 9px 10px;
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: #7d879e;
    display: flex;
    justify-content: space-between;
    align-items: center;
    user-select: none;
}
.nav-category::-webkit-details-marker { display: none; }
.nav-category::after { content: '›'; transform: rotate(90deg); transition: transform .15s ease; font-size: 14px; }
.nav-group[open] .nav-category::after { transform: rotate(-90deg); }
.nav-group-items { display: flex; flex-direction: column; gap: 1px; padding-bottom: 6px; }

.nav-link {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-radius: var(--radius-sm);
    color: var(--sidebar-text);
    font-size: 13px;
    font-weight: 500;
}
.nav-link:hover { background: rgba(255,255,255,.06); color: #fff; text-decoration: none; }
.nav-link.active { background: var(--primary); color: #fff; }
.nav-icon { display: inline-flex; width: 17px; height: 17px; flex-shrink: 0; }
.nav-icon svg { width: 100%; height: 100%; }

.main-content.opr-main { flex: 1; min-width: 0; display: flex; flex-direction: column; background: var(--bg); }

.topbar.opr-topbar {
    height: var(--topbar-height);
    background: var(--panel);
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 0 22px;
    position: sticky;
    top: 0;
    z-index: 20;
}
.topbar-leading { display: flex; align-items: center; gap: 14px; min-width: 0; }
.mobile-menu-button { display: none; cursor: pointer; color: var(--muted); }
/* "All Stores" scope-selector / role context label removed from the header on every
   screen size per request — the global search bar takes its place. */
.opr-scope-selector, .opr-header-context { display: none; }

.opr-topbar-center { flex: 1; display: flex; justify-content: center; min-width: 0; }
.opr-global-search { position: relative; width: 100%; max-width: 420px; }
.opr-global-search input {
    width: 100%; border: 1px solid var(--border); background: var(--panel-soft);
    border-radius: 999px; padding: 8px 38px 8px 14px; font-size: 13px; color: var(--text);
}
.opr-global-search input:focus { outline: none; border-color: var(--primary); background: var(--panel); }
.opr-global-search button { position: absolute; right: 4px; top: 4px; bottom: 4px; width: 30px; border: none; background: transparent; color: var(--muted); cursor: pointer; }
.opr-global-search svg { width: 16px; height: 16px; }

.topbar-actions { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.opr-top-icon {
    width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center;
    border-radius: 50%; color: var(--muted); position: relative; flex-shrink: 0;
    border: 0; background: transparent; padding: 0; margin: 0; font: inherit; cursor: pointer;
    box-sizing: border-box;
}
.opr-top-icon:hover { background: var(--panel-soft); text-decoration: none; }
.topbar-actions .opr-top-icon svg { width: 16px; height: 16px; }
.opr-top-icon-badge {
    position: absolute; top: -2px; right: -2px; min-width: 15px; height: 15px; padding: 0 3px;
    border-radius: 999px; background: #ef4444; color: #fff; border: 2px solid var(--panel);
    font-size: 9.5px; font-weight: 700; line-height: 1; display: inline-flex; align-items: center; justify-content: center;
}
.opr-theme-toggle .theme-icon-sun { display: none; }
html[data-theme="dark"] .opr-theme-toggle .theme-icon-moon { display: none; }
html[data-theme="dark"] .opr-theme-toggle .theme-icon-sun { display: inline-flex; }
.opr-topbar-logout-form { display: contents; }
.opr-topbar-logout-form button { border: none; background: transparent; cursor: pointer; }

.topbar-profile { display: flex; align-items: center; gap: 8px; padding: 5px 8px 5px 5px; border-radius: 999px; margin-left: 4px; }
.topbar-profile:hover { background: var(--panel-soft); text-decoration: none; }
.topbar-avatar {
    width: 30px; height: 30px; border-radius: 50%; background: var(--primary); color: #fff;
    display: inline-flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700;
}
.topbar-profile-copy { display: flex; flex-direction: column; line-height: 1.2; }
.topbar-profile-copy strong { font-size: 12.5px; color: var(--heading); }
.topbar-profile-copy small { font-size: 11px; color: var(--muted); }
.topbar-chevron { width: 14px; height: 14px; color: var(--muted); }

.page-workspace.opr-workspace { padding: 22px 26px 40px; flex: 1; min-width: 0; }
.opr-page-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 18px; flex-wrap: wrap; }
.opr-page-heading h1 { font-size: 20px; margin-bottom: 3px; }
.opr-page-heading p { color: var(--muted); font-size: 13px; }
/* .opr-page-heading-actions is an always-rendered wrapper (@yield with no content on
   pages that don't fill it), so it must stay visually invisible by default — only the
   .opr-date-control chip inside it (dashboard pages only) gets the bordered pill look.
   Previously both shared the same boxed rule, so every non-dashboard page showed an
   empty bordered box in the page heading. */
.opr-page-heading-actions { display: flex; align-items: center; gap: 8px; }
.opr-date-control { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--muted); background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 7px 12px; }
.topbar-page-actions { display: flex; align-items: center; gap: 8px; }

@media (max-width: 980px) {
    .mobile-menu-button { display: inline-flex; }
    .sidebar.opr-sidebar { position: fixed; z-index: 40; left: -100%; transition: left .2s ease; }
    .nav-toggle:checked ~ .sidebar.opr-sidebar { left: 0; }
    .nav-toggle:checked ~ .mobile-menu-backdrop { display: block; position: fixed; inset: 0; background: rgba(0,0,0,.4); z-index: 30; }
    .opr-topbar-center { display: flex; flex: 1 1 auto; min-width: 0; }
    .opr-global-search { max-width: none; }
    .topbar-profile-copy, .topbar-chevron { display: none; }
    .page-workspace.opr-workspace { padding: 16px; }
}
@media (max-width: 560px) {
    .topbar.opr-topbar { gap: 8px; padding: 0 12px; }
    .topbar-actions { gap: 2px; }
}

/* ---------------------------------------------------------------
   3. Buttons
--------------------------------------------------------------- */
.btn, .ui-button {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    font-size: 13px; font-weight: 600; padding: 8px 16px; border-radius: var(--radius-sm);
    border: 1px solid transparent; cursor: pointer; line-height: 1.3; white-space: nowrap;
    transition: background .12s ease, border-color .12s ease, opacity .12s ease;
}
.btn:hover, .ui-button:hover { text-decoration: none; }
.btn-sm, .btn-small { padding: 5px 11px; font-size: 12px; }
.btn:disabled { opacity: .55; cursor: not-allowed; }

.btn-primary { background: var(--primary); border-color: var(--primary); color: #fff; }
.btn-primary:hover { background: var(--primary-dark); border-color: var(--primary-dark); color: #fff; }

.btn-secondary { background: var(--panel); border-color: var(--border-strong); color: var(--text); }
.btn-secondary:hover { background: var(--panel-soft); }

.btn-success { background: var(--success); border-color: var(--success); color: #fff; }
.btn-success:hover { filter: brightness(1.08); }

.btn-danger { background: var(--danger); border-color: var(--danger); color: #fff; }
.btn-danger:hover { filter: brightness(1.08); }

.btn-block { width: 100%; }
.btn-icon { padding: 8px; width: 34px; height: 34px; }

/* ---------------------------------------------------------------
   4. Panels / cards
--------------------------------------------------------------- */
.content-panel, .ui-panel {
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    margin-bottom: 18px;
}
.ui-panel-padded, .content-panel { padding: 18px 20px; }
.panel-header, .ui-panel-header {
    display: flex; align-items: flex-start; justify-content: space-between; gap: 12px;
    margin: -18px -20px 16px; padding: 16px 20px; border-bottom: 1px solid var(--border);
}
.panel-header h2, .ui-panel-header h2 { font-size: 15px; }
.panel-header p, .ui-panel-header p { font-size: 12.5px; color: var(--muted); margin-top: 2px; }
.panel-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

.store-directory-topbar, .filter-bar {
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 16px;
}
.filter-bar select, .filter-bar input, .store-directory-topbar select, .store-directory-topbar input {
    border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 7px 10px; font-size: 12.5px;
    background: var(--panel); color: var(--text);
}

/* Standard list-page directory panel: topbar (type/status pill-tabs + search) flush against
   the panel edge, and a consolidated header row (title + page chip + CSV/create buttons)
   directly below it, vertically centered. Shared by Stores, Properties, Technicians, Tickets, etc. */
.store-directory-panel .store-directory-topbar {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px;
    margin: -18px -20px 0; padding: 14px 20px; border-bottom: 1px solid var(--border);
}
/* Flat underline tabs, not filled pills — a row of 6-8 solid-colored bubbles reads
   heavy and competes with the page's one primary button for attention; an underline
   carries the same information (label + count + selected state) at a fraction of the
   visual weight. Full-width row of its own so tabs wrap onto a second line instead of
   shrinking into a horizontal-scroll strip that clips a label mid-word. */
.store-directory-panel .store-type-tabs {
    display: flex; flex-wrap: wrap; align-items: flex-end; gap: 18px; row-gap: 4px;
    flex: 1 1 100%; overflow: visible; border-bottom: 1px solid var(--border); padding-bottom: 0;
}
.store-directory-panel .store-tab {
    display: inline-flex; align-items: center; gap: 6px; flex-shrink: 0; padding: 7px 1px 9px; margin-bottom: -1px;
    border: 0; border-bottom: 2px solid transparent; border-radius: 0; background: none; color: var(--muted);
    font-size: 12.5px; font-weight: 600; white-space: nowrap; text-decoration: none;
}
.store-directory-panel .store-tab:hover { color: var(--heading); background: none; text-decoration: none; }
.store-directory-panel .store-tab.active { color: var(--primary-dark); border-bottom-color: var(--primary); background: none; }
.store-directory-panel .store-tab small {
    font-size: 10.5px; font-weight: 700; color: var(--muted); opacity: 1;
    background: var(--panel-soft); border-radius: 999px; padding: 1px 6px;
}
.store-directory-panel .store-tab.active small { background: var(--primary-soft); color: var(--primary-dark); }
/* Readonly stats (e.g. Units/Issued totals) sit in the same flat row as the filter
   tabs — same label + count-badge shape, just no hover/active state and no click,
   since they're a number to read, not a filter to select. */
.store-directory-panel .store-tab.readonly { cursor: default; }
.store-directory-panel .store-tab.readonly:hover { color: var(--muted); }
.store-directory-panel .store-tab.readonly span { color: var(--heading); }
.store-directory-panel .store-search-form { flex: 1 1 100%; }
/* Every control on the right of a list-page header (type tabs, toggles, the
   primary "+ New X" button) as one wrapping group, always right-aligned and
   with a consistent gap — not a nowrap cluster that overflows or crams
   together once tabs + a toggle + a button no longer fit one line. */
.store-directory-panel .store-header-actions { display: flex; align-items: center; gap: 10px; row-gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.store-directory-panel .store-directory-header { margin-top: 0; align-items: center; flex-wrap: wrap; row-gap: 10px; }
@media (max-width: 900px) {
    .store-directory-panel .store-directory-topbar { flex-direction: column; align-items: stretch; }
}

/* Standard list-page search/filter row: search box + status select + Search/Reset,
   always on one line on desktop, every control the same standard height. */
.store-search-row {
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.store-search-row input[type="text"],
.store-search-row input[type="search"] {
    width: 260px; max-width: 100%; flex: 0 0 auto;
    height: 34px; box-sizing: border-box;
}
.store-search-row select {
    width: auto; min-width: 130px; max-width: min(210px, 100%); flex: 0 0 auto;
    height: 34px; box-sizing: border-box;
}
.store-search-row input[type="date"] {
    width: 150px; max-width: 100%; flex: 0 0 auto;
    height: 34px; box-sizing: border-box;
}
.store-search-row .btn,
.store-search-row .btn-sm {
    height: 34px; padding-top: 0; padding-bottom: 0;
    display: inline-flex; align-items: center; flex-shrink: 0; white-space: nowrap;
}
@media (max-width: 760px) {
    .store-search-row input[type="text"],
    .store-search-row input[type="search"],
    .store-search-row select,
    .store-search-row input[type="date"] { width: 100%; flex: 1 1 100%; }
}

/* Tickets list: supplier name wraps under the Yes/No pill instead of running inline,
   and the update-bell column reserves its width whether or not a ticket has one. */
.supplier-name-subtext { display: block; font-size: 11px; color: var(--muted); margin-top: 2px; }
.ticket-bell-indicator, .ticket-bell-empty { display: inline-block; min-width: 16px; }
/* The tickets filter row has too many controls (7 fields + 3 buttons) to ever fit one line
   at full auto-width — let the form shrink to its container so its own flex-wrap can apply,
   instead of overflowing past the panel edge. */
.ticket-search-form { flex: 1 1 auto; min-width: 0; width: 100%; }
.visitor-log-search-form { flex: 1 1 auto; min-width: 0; width: 100%; }
.technician-activity-search-form { flex: 1 1 auto; min-width: 0; width: 100%; }

/* Ticket file rows (Attachments, Office Documents cards on the ticket detail page).
   These classes had no CSS anywhere in the loaded stylesheet, so a file row's icon,
   text and Download/Remove action buttons all fell back to plain block/inline flow —
   the actions stacked as separate lines instead of sitting aligned on the right. */
.ticket-file-list { display: grid; gap: 8px; }
.ticket-file-row {
    display: flex; align-items: center; gap: 10px; padding: 8px;
    border: 1px solid var(--border); border-radius: 10px; background: var(--panel);
    text-decoration: none; color: inherit;
}
.ticket-file-row:hover { background: var(--panel-soft); text-decoration: none; }
.ticket-file-preview {
    width: 40px; height: 40px; border-radius: 8px; overflow: hidden; flex: 0 0 auto;
    border: 1px solid var(--border); background: var(--panel-soft);
    display: flex; align-items: center; justify-content: center;
}
.ticket-file-preview img { width: 100%; height: 100%; object-fit: cover; }
.ticket-file-icon { font-size: 18px; line-height: 1; }
.ticket-file-text { min-width: 0; flex: 1 1 auto; display: grid; gap: 2px; }
.ticket-file-text strong { color: var(--heading); font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ticket-file-text small { display: block; color: var(--muted); font-size: 11.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ticket-muted-text { color: var(--muted); font-size: 13px; }
.ticket-card-actions { display: flex; align-items: center; justify-content: flex-end; gap: 8px; flex: 0 0 auto; }
.ticket-card-actions form { margin: 0; display: inline-flex; }

/* ---------------------------------------------------------------
   5. Tables — compact, fixed layout, NO horizontal scroll
--------------------------------------------------------------- */
.table-scroll, .ui-table-scroll,
.dashboard-ticket-frame, .ticket-table-wrap, .table-responsive {
    width: 100%;
    max-width: 100%;
    overflow: hidden !important;
}

.data-table, .ui-table {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    table-layout: fixed !important;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 12.5px;
}

.data-table th, .ui-table th {
    text-align: left;
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--muted);
    background: var(--panel-soft);
    padding: 9px 10px;
    border-bottom: 1px solid var(--border);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.data-table th:first-child, .ui-table th:first-child { border-top-left-radius: var(--radius-sm); }
.data-table th:last-child, .ui-table th:last-child { border-top-right-radius: var(--radius-sm); }

.data-table td, .ui-table td {
    padding: 9px 10px;
    border-bottom: 1px solid var(--border);
    color: var(--text);
    vertical-align: middle;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.data-table tbody tr:last-child td { border-bottom: 0; }
.data-table tbody tr:hover td { background: var(--panel-soft); }
.data-table .sortable-heading { color: inherit; display: inline-flex; align-items: center; gap: 3px; overflow: hidden; text-overflow: ellipsis; }
.data-table .sort-indicator { font-size: 9px; opacity: .6; }
/* Generic primary/secondary line inside a cell: <strong>Main</strong><span>Sub</span> */
.data-table td strong { display: block; font-weight: 600; color: var(--heading); }
.data-table td strong + span { display: block; margin-top: 2px; color: var(--muted); font-size: 11.5px; font-weight: 400; white-space: normal; }
.data-table td.number-cell { text-align: right; font-variant-numeric: tabular-nums; }
.data-table th.number-col { text-align: right; }

/* text-heavy columns wrap onto 2 lines instead of forcing width */
.data-table .subject-cell, .data-table .description-cell, .data-table .address-cell,
.data-table .notes-cell, .data-table .clip-cell,
.data-table td[data-label="Subject"], .data-table td[data-label="Description"], .data-table td[data-label="Address"] {
    white-space: normal !important;
    overflow: hidden;
    line-clamp: 2;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    line-height: 1.35;
    max-height: calc(1.35em * 2);
}
.data-table .subject-cell > *, .data-table .description-cell > *, .data-table .address-cell > *,
.data-table .notes-cell > *, .data-table .clip-cell > *,
.data-table td[data-label="Subject"] > *, .data-table td[data-label="Description"] > *, .data-table td[data-label="Address"] > * {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    line-clamp: 2;
    overflow: hidden;
}

.data-table .actions-cell, .data-table td[data-label="Actions"] { white-space: nowrap; text-align: right; }
.data-table th.table-actions-col, .ui-table th.table-actions-col { text-align: right; }
.data-table .empty-cell { text-align: center; color: var(--muted); padding: 26px 10px; white-space: normal; }

.row-actions { display: inline-flex; align-items: center; gap: 6px; justify-content: flex-end; }
.row-action-icon {
    display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px;
    border-radius: 6px; color: var(--muted); border: 1px solid var(--border);
    background: transparent; font: inherit; cursor: pointer;
}
.row-action-icon:hover { background: var(--panel-soft); text-decoration: none; }
.row-action-icon.danger { color: var(--danger); border-color: var(--danger-soft); }
.row-action-icon.danger:hover { background: var(--danger-soft); }
.row-action-icon.secondary { color: var(--primary); }
.row-action-icon.success { color: var(--success); border-color: var(--success-soft); }
.row-action-icon.success:hover { background: var(--success-soft); }
.row-action-icon.warning, .row-action-icon.inventory-issue-action { color: var(--warning); border-color: var(--warning-soft); }
.row-action-icon.warning:hover, .row-action-icon.inventory-issue-action:hover { background: var(--warning-soft); }
.row-action-icon svg { width: 14px; height: 14px; }

.clickable-row { cursor: pointer; }

@media (max-width: 760px) {
    .data-table thead { display: none; }
    .data-table, .data-table tbody, .data-table tr, .data-table td { display: block; width: 100% !important; }
    .data-table tr { border: 1px solid var(--border); border-radius: var(--radius-sm); margin-bottom: 10px; padding: 6px 10px; }
    .data-table td {
        border-bottom: 1px dashed var(--border);
        display: flex; justify-content: space-between; align-items: center; gap: 10px;
        white-space: normal; text-align: right;
    }
    .data-table td::before { content: attr(data-label); font-weight: 700; color: var(--muted); font-size: 11px; text-align: left; }
    .data-table td:last-child { border-bottom: 0; }
}

/* ---------------------------------------------------------------
   6. Badges / tags / chips
--------------------------------------------------------------- */
.status-tag, .priority-tag, .category-badge, .badge, .page-chip {
    display: inline-flex; align-items: center; gap: 4px;
    font-size: 11px; font-weight: 700; padding: 3px 9px; border-radius: 999px;
    background: var(--slate-soft); color: var(--slate); white-space: nowrap;
}
.page-chip { background: var(--primary-soft); color: var(--primary-dark); }

.priority-urgent, .priority-high { background: var(--danger-soft); color: var(--danger); }
.priority-medium { background: var(--warning-soft); color: var(--warning); }
.priority-low { background: var(--success-soft); color: var(--success); }
/* Ticket lifecycle — a distinct color per status rather than a shared red/green pair,
   so status can be read at a glance without checking the label text. */
.status-open { background: var(--success-soft); color: var(--success); }
.status-in-progress { background: var(--warning-soft); color: var(--warning); }
.status-pending, .status-on-hold { background: var(--purple-soft); color: var(--purple); }
.status-resolved { background: var(--primary-soft); color: var(--primary-dark); }
.status-closed, .status-duplicate { background: var(--slate-soft); color: var(--slate); }
/* Active/Inactive is a different concept from a ticket's Open/Closed lifecycle and reads
   backwards when it borrows those classes (Active showing red, Inactive showing green,
   found on the Area Managers page and 10 others reusing the same 'open'/'closed' pair). */
.status-active { background: var(--success-soft); color: var(--success); }
.status-inactive { background: var(--slate-soft); color: var(--slate); }
/* Asset/equipment condition states (iPads, equipment, and similar "is this thing
   working" registers) — Spare/unassigned is neutral, Broken is the one to flag. */
.status-spare { background: var(--slate-soft); color: var(--slate); }
.status-broken { background: var(--danger-soft); color: var(--danger); }
/* Visitor log presence — Overdue is the one to flag; On site/Checked out are routine. */
.status-overdue { background: var(--danger-soft); color: var(--danger); }
.category-general { background: var(--cyan-soft); color: var(--cyan); }
.category-property { background: var(--purple-soft); color: var(--purple); }

.opr-count-pill {
    display: inline-flex; min-width: 24px; justify-content: center; padding: 2px 8px;
    border-radius: 999px; font-size: 11.5px; font-weight: 700;
}
.opr-count-pill.blue { background: var(--primary-soft); color: var(--primary-dark); }
.opr-count-pill.amber { background: var(--warning-soft); color: var(--warning); }
.opr-count-pill.purple { background: var(--purple-soft); color: var(--purple); }
.opr-count-pill.green { background: var(--success-soft); color: var(--success); }
.opr-count-pill.red { background: var(--danger-soft); color: var(--danger); }

/* ---------------------------------------------------------------
   7. Forms
--------------------------------------------------------------- */
.form-section { margin-bottom: 22px; }
.form-section h3 { font-size: 14px; margin-bottom: 3px; }
.form-section > p { font-size: 12.5px; color: var(--muted); margin-bottom: 12px; }

/* Bold section dividers inside grid forms (properties, tenants, technicians create/edit) */
.property-form-section-title {
    font-size: 14px; font-weight: 700; color: var(--heading);
    padding-top: 14px; margin-top: 4px; border-top: 1px solid var(--border);
}
.property-form-section-title:first-child { padding-top: 0; margin-top: 0; border-top: 0; }

/* Multi-section stacked forms (users, brands, legal businesses, companies): frame each
   .store-form-section as its own bordered card so sections read as clearly separate at a
   glance, instead of relying on a thin divider line between them. */
.store-form-section {
    border: 1px solid var(--border-strong);
    border-radius: 11px;
    padding: 18px 20px;
    background: var(--panel);
    box-shadow: var(--shadow-sm);
}
.store-form-section + .store-form-section {
    margin-top: 18px;
}
.store-form-section .property-form-section-title {
    display: flex; align-items: center; gap: 8px;
    padding-top: 0; margin-top: 0; margin-bottom: 14px; border-top: 0;
}
.store-form-section .property-form-section-title::before {
    content: ''; width: 4px; height: 16px; border-radius: 999px; background: var(--primary); flex-shrink: 0;
}

/* Technician create/edit form (technicians/form.blade.php) — two-column shell,
   checkbox anchored to the bottom of the Access column, standard action bar. */
.technician-form-grid-shell-v2 {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 4px 24px;
    align-items: stretch;
}
.technician-form-section-v2 { display: flex; flex-direction: column; min-width: 0; }
.technician-form-grid-v2 {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 14px 16px;
    margin-top: 10px;
}
.technician-form-grid-v2 .field-span-2 { grid-column: 1 / -1 !important; }
.technician-status-field-v2 { margin-top: auto; padding-top: 14px; }
.technician-check-label-v2 {
    display: flex; align-items: flex-start; gap: 10px;
    padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--radius-sm);
    background: var(--panel-soft); cursor: pointer;
}
.technician-check-label-v2 input[type="checkbox"] { margin-top: 2px; width: 16px; height: 16px; flex-shrink: 0; }
.technician-check-label-v2 strong { display: block; font-size: 12.5px; color: var(--heading); }
.technician-check-label-v2 small { display: block; margin-top: 2px; color: var(--muted); font-size: 11.5px; font-weight: 400; }
.technician-form-actions-v2 {
    display: flex; align-items: center; justify-content: flex-end; gap: 10px;
    margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--border);
}
@media (max-width: 900px) {
    .technician-form-grid-shell-v2, .technician-form-grid-v2 { grid-template-columns: 1fr !important; }
    .technician-status-field-v2 { margin-top: 0; }
}

.form-field, .form-group { margin-bottom: 14px; }
.form-field label, .form-group label { display: block; font-size: 12.5px; font-weight: 600; color: var(--text); margin-bottom: 5px; }
.field-required { color: var(--danger, #dc2626); font-weight: 700; }

input[type="text"], input[type="email"], input[type="password"], input[type="number"],
input[type="date"], input[type="time"], input[type="datetime-local"], input[type="month"], input[type="week"],
input[type="search"], input[type="tel"], input[type="url"],
input:not([type]),
select, textarea {
    width: 100%; border: 1px solid var(--border); border-radius: var(--radius-sm);
    padding: 8px 11px; font-size: 13px; background: var(--panel); color: var(--text);
    font-family: inherit;
}
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-soft); }
textarea { resize: vertical; min-height: 80px; }

.form-actions { display: flex; align-items: center; gap: 10px; justify-content: flex-end; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--border); }
.form-actions-bar { display: flex; align-items: center; gap: 10px; justify-content: flex-end; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--border); }

/* 12-column form grid with field-span-N utilities (store/property/ticket create forms) */
.aligned-store-form {
    display: grid !important; grid-template-columns: repeat(12, minmax(0, 1fr)) !important; gap: 14px 20px; margin-bottom: 4px;
}
.aligned-store-form .form-field, .aligned-store-form .form-group { grid-column: span 12; margin-bottom: 0; }
.aligned-store-form .field-span-1 { grid-column: span 1; }
.aligned-store-form .field-span-2 { grid-column: span 2; }
.aligned-store-form .field-span-3 { grid-column: span 3; }
.aligned-store-form .field-span-4 { grid-column: span 4; }
.aligned-store-form .field-span-5 { grid-column: span 5; }
.aligned-store-form .field-span-6 { grid-column: span 6; }
.aligned-store-form .field-span-7 { grid-column: span 7; }
.aligned-store-form .field-span-8 { grid-column: span 8; }
.aligned-store-form .field-span-9 { grid-column: span 9; }
.aligned-store-form .field-span-10 { grid-column: span 10; }
.aligned-store-form .field-span-11 { grid-column: span 11; }
.aligned-store-form .field-span-12 { grid-column: span 12; }
.aligned-store-form textarea { min-height: 68px; }
@media (max-width: 1100px) {
    .aligned-store-form { grid-template-columns: repeat(6, minmax(0, 1fr)) !important; }
    .aligned-store-form [class*="field-span-"] { grid-column: span 6; }
    .aligned-store-form .field-span-12 { grid-column: span 6; }
}
@media (max-width: 700px) {
    .aligned-store-form { grid-template-columns: 1fr !important; }
    .aligned-store-form [class*="field-span-"] { grid-column: span 1; }
}

/* ---------------------------------------------------------------
   8. Alerts / modals
--------------------------------------------------------------- */
.alert {
    display: flex; gap: 10px; padding: 12px 14px; border-radius: var(--radius-sm);
    border: 1px solid; margin-bottom: 16px; font-size: 13px;
}
.alert-success { background: var(--success-soft); border-color: var(--success); color: var(--success); }
.alert-danger { background: var(--danger-soft); border-color: var(--danger); color: var(--danger); }
.alert-list { margin: 4px 0 0; padding-left: 18px; }

/* Per-field validation messages (@error('x')<span class="field-error">) had no CSS at
   all anywhere in this stylesheet — used on 28 forms across the app (every create/edit
   page), every one of them rendering "Name is required" etc. as plain unstyled text
   instead of a clearly flagged error. */
.field-error, .form-wide-error {
    display: block; margin-top: 5px; color: var(--danger); font-size: 12px; font-weight: 600;
}

.field-help {
    display: block; margin-top: 5px; color: var(--muted); font-size: 12px;
}

.modal-card {
    background: var(--panel); border-radius: var(--radius); box-shadow: var(--shadow);
    border: 1px solid var(--border); padding: 20px; max-width: 480px;
}
.modal-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 16px; }

/* Checkbox-toggle confirm modal (typed-verification delete flows) */
.modal-toggle { position: absolute; opacity: 0; pointer-events: none; width: 0; height: 0; }
.confirm-modal {
    display: none; position: fixed; inset: 0; z-index: 100;
    align-items: center; justify-content: center; padding: 20px;
}
.modal-toggle:checked + .confirm-modal { display: flex; }
.confirm-modal-backdrop { position: absolute; inset: 0; background: rgba(15, 23, 42, .55); cursor: pointer; }
.confirm-modal-card {
    position: relative; z-index: 1; width: min(480px, 100%); max-height: calc(100vh - 40px); overflow-y: auto;
    background: var(--panel); color: var(--text); border: 1px solid var(--border); border-radius: var(--radius-lg);
    box-shadow: var(--shadow); padding: 20px;
}
.confirm-modal-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.confirm-modal-header h2 { font-size: 16px; margin-bottom: 3px; }
.confirm-modal-header p { font-size: 12.5px; color: var(--muted); }
.confirm-delete-form .form-field { margin-bottom: 14px; }
.delete-warning-box {
    display: flex; flex-direction: column; gap: 3px; padding: 10px 12px; margin-bottom: 14px;
    border: 1px solid var(--danger); background: var(--danger-soft); border-radius: var(--radius-sm);
    font-size: 12.5px; color: var(--danger);
}
.delete-warning-box strong { color: var(--danger); }
.confirm-modal-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--border); }

/* ---------------------------------------------------------------
   9. Dashboard grids
--------------------------------------------------------------- */
.opr-metric-grid, .dashboard-grid {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 14px; margin-bottom: 16px;
}
.dashboard-grid.four-columns { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 900px) { .dashboard-grid.four-columns { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .dashboard-grid.four-columns { grid-template-columns: 1fr; } }
.opr-summary-grid.three { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-bottom: 16px; }

/* Shared KPI stat card (reports, settings, tickets, equipment, inventory summaries) */
.stat-card {
    background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius);
    padding: 14px 16px; box-shadow: var(--shadow-sm); display: flex; flex-direction: column; gap: 3px;
}
.stat-card span { font-size: 11.5px; color: var(--muted); font-weight: 600; }
.stat-card strong { font-size: 22px; color: var(--heading); line-height: 1.2; }
.stat-card small { font-size: 11px; color: var(--muted); }
.stat-card.soft-blue-card { background: var(--primary-soft); border-color: var(--primary); }
.stat-card.soft-blue-card strong { color: var(--primary-dark); }
.stat-card.soft-green-card { background: var(--success-soft); border-color: var(--success); }
.stat-card.soft-green-card strong { color: var(--success); }
.stat-card.soft-purple-card { background: var(--purple-soft); border-color: var(--purple); }
.stat-card.soft-purple-card strong { color: var(--purple); }
.stat-card.soft-amber-card { background: var(--warning-soft); border-color: var(--warning); }
.stat-card.soft-amber-card strong { color: var(--warning); }
.stat-card.soft-red-card { background: var(--danger-soft); border-color: var(--danger); }
.stat-card.soft-red-card strong { color: var(--danger); }

.kpi-card, .opr-metric-grid > * {
    background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius);
    padding: 14px 16px; box-shadow: var(--shadow-sm);
}
.opr-summary-card {
    display: flex; align-items: center; gap: 12px; background: var(--panel); border: 1px solid var(--border);
    border-radius: var(--radius); padding: 14px 16px; box-shadow: var(--shadow-sm); color: var(--text);
}
.opr-summary-card:hover { border-color: var(--border-strong); text-decoration: none; }
.opr-summary-card small { display: block; color: var(--muted); font-size: 11.5px; }
.opr-summary-card strong { display: block; font-size: 19px; color: var(--heading); }
.opr-summary-card em { font-style: normal; font-size: 11px; color: var(--muted); }
.opr-summary-icon { width: 36px; height: 36px; border-radius: 10px; background: var(--primary-soft); color: var(--primary); display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }

.opr-panel { background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px 18px; box-shadow: var(--shadow-sm); margin-bottom: 16px; }
.opr-panel-head { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 12px; gap: 10px; flex-wrap: wrap; }
.opr-panel-head h2 { font-size: 14.5px; }
.opr-panel-head p { font-size: 12px; color: var(--muted); margin-top: 2px; }
.opr-status-legend { display: flex; gap: 10px; font-size: 11px; flex-wrap: wrap; }
.opr-status-legend span { display: inline-flex; align-items: center; gap: 4px; color: var(--muted); }
.opr-status-legend span::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.opr-status-legend .blue { color: var(--primary); } .opr-status-legend .amber { color: var(--warning); }
.opr-status-legend .purple { color: var(--purple); } .opr-status-legend .green { color: var(--success); }

.opr-dashboard-bottom-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; }
.opr-ranked-list a { display: flex; justify-content: space-between; padding: 8px 4px; border-bottom: 1px solid var(--border); color: var(--text); font-size: 12.5px; }
.opr-ranked-list a:last-child { border-bottom: 0; }
.opr-ranked-list a:hover { text-decoration: none; color: var(--primary); }

.opr-action-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 10px; }
.opr-action-grid a {
    display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center;
    padding: 14px 8px; border-radius: var(--radius-sm); border: 1px solid var(--border); font-size: 12px; font-weight: 600;
}
.opr-action-grid a:hover { text-decoration: none; border-color: var(--border-strong); background: var(--panel-soft); }
.opr-action-grid .tone-blue { color: var(--primary); } .opr-action-grid .tone-green { color: var(--success); }
.opr-action-grid .tone-purple { color: var(--purple); } .opr-action-grid .tone-slate { color: var(--slate); }
.opr-action-grid .tone-amber { color: var(--warning); } .opr-action-grid .tone-cyan { color: var(--cyan); }

/* Quick Actions panel, full-width and positioned as its own row on every
   dashboard rather than tucked as one column in a sidebar/grid. */
.opr-actions-panel-wide { }
.opr-action-grid.wide {
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
}
.opr-action-grid.wide a { flex-direction: row; justify-content: flex-start; padding: 8px 14px; }
.opr-action-grid.wide a svg, .opr-action-grid.wide a img { flex-shrink: 0; }

/* Store / Supplier / Technician portal dashboards (dashboard/store.blade.php,
   supplier.blade.php, technician.blade.php) — these classes had no CSS anywhere,
   so the ticket rows, schedule rows and detail lists all fell back to plain
   inline text with no spacing between the ticket number, subject, meta and
   status pieces. */
.opr-portal-dashboard-grid, .opr-technician-dashboard-grid {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 16px; align-items: start;
}

.opr-activity-list { display: grid; gap: 8px; margin-bottom: 4px; }
.opr-activity-list a {
    display: grid; grid-template-columns: 1fr auto; grid-template-areas: "no status" "subject subject" "meta meta";
    gap: 3px 10px; padding: 10px 12px;
    border: 1px solid var(--border); border-radius: 10px; background: var(--panel);
    color: inherit; text-decoration: none;
}
.opr-activity-list a:hover { background: var(--panel-soft); border-color: var(--border-strong); text-decoration: none; }
.opr-activity-list a > strong { grid-area: no; font-size: 12.5px; font-weight: 700; color: var(--heading); }
.opr-activity-list a > span { grid-area: subject; font-size: 12.5px; color: var(--text); overflow-wrap: anywhere; }
.opr-activity-list a > small { grid-area: meta; font-size: 11.5px; color: var(--muted); }
.opr-activity-list a > em {
    grid-area: status; justify-self: end; align-self: start;
    display: inline-flex; font-style: normal; font-size: 11px; font-weight: 700;
    padding: 3px 9px; border-radius: 999px; white-space: nowrap;
    background: var(--slate-soft); color: var(--slate);
}
.opr-activity-list a > em.status-open, .opr-activity-list a > em.status-active { background: var(--danger-soft); color: var(--danger); }
.opr-activity-list a > em.status-in-progress { background: var(--warning-soft); color: var(--warning); }
.opr-activity-list a > em.status-on-hold { background: var(--purple-soft); color: var(--purple); }
.opr-activity-list a > em.status-resolved, .opr-activity-list a > em.status-closed { background: var(--success-soft); color: var(--success); }

.opr-schedule-list { display: grid; gap: 8px; }
.opr-schedule-list a {
    display: flex; align-items: center; gap: 12px; padding: 10px 12px;
    border: 1px solid var(--border); border-radius: 10px; background: var(--panel);
    color: inherit; text-decoration: none;
}
.opr-schedule-list a:hover { background: var(--panel-soft); border-color: var(--border-strong); text-decoration: none; }
.opr-calendar-box, .opr-time-box {
    display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto;
    min-width: 44px; height: 40px; padding: 0 8px; border-radius: 9px;
    background: var(--primary-soft); color: var(--primary-dark); font-size: 12.5px; font-weight: 700;
}
.opr-calendar-box svg { width: 18px; height: 18px; }
.opr-schedule-list a > span:not(.opr-calendar-box):not(.opr-time-box) { flex: 1 1 auto; min-width: 0; display: grid; gap: 2px; }
.opr-schedule-list a > span strong { font-size: 12.5px; font-weight: 700; color: var(--heading); }
.opr-schedule-list a > span small { font-size: 11.5px; color: var(--muted); }
.opr-schedule-list a > em { flex: 0 0 auto; font-style: normal; font-size: 11.5px; color: var(--muted); text-align: right; }

.opr-recent-activity footer, .opr-schedule-panel footer {
    margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--border); text-align: right;
}
.opr-recent-activity footer a, .opr-schedule-panel footer a { font-size: 12.5px; font-weight: 700; color: var(--primary); text-decoration: none; }
.opr-recent-activity footer a:hover { text-decoration: underline; }
.opr-recent-activity footer a span { display: inline-block; margin-left: 3px; }

.opr-detail-list { display: grid; gap: 0; margin: 4px 0 18px; }
.opr-detail-list > div { display: flex; justify-content: space-between; gap: 10px; padding: 7px 0; border-bottom: 1px solid var(--border); font-size: 12.5px; }
.opr-detail-list > div:last-child { border-bottom: 0; }
.opr-detail-list dt { color: var(--muted); margin: 0; }
.opr-detail-list dd { margin: 0; font-weight: 700; color: var(--heading); text-align: right; }
.opr-detail-list.compact { margin-bottom: 6px; }

.opr-mini-schedules { display: grid; gap: 0; margin-top: 6px; }
.opr-mini-schedules a {
    display: flex; justify-content: space-between; gap: 10px; padding: 7px 2px;
    border-bottom: 1px solid var(--border); font-size: 12px; color: var(--text); text-decoration: none;
}
.opr-mini-schedules a:last-child { border-bottom: 0; }
.opr-mini-schedules a:hover { color: var(--primary); text-decoration: none; }
.opr-mini-schedules a strong { color: var(--heading); font-weight: 700; }
.opr-mini-schedules p { color: var(--muted); font-size: 12px; }
@media (max-width: 480px) {
    .opr-activity-list a { grid-template-columns: 1fr; grid-template-areas: "no" "status" "subject" "meta"; }
    .opr-activity-list a > em { justify-self: start; }
}

/* ---------------------------------------------------------------
   9b. Global icon-size safety net
   Any icon wrapper (span/i) must size its SVG explicitly — an SVG
   with no width/height otherwise renders at browser default (300x150)
   or stretches to fill a flex parent.
--------------------------------------------------------------- */
[class*="-icon"] svg, [class*="icon-"] svg { width: 100%; height: 100%; display: block; }

/* ---------------------------------------------------------------
   9c. KPI metric cards (dashboard.partials_kpi_card)
--------------------------------------------------------------- */
.opr-metric-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 14px; margin-bottom: 16px; }
.opr-metric-card {
    display: flex; flex-direction: row; align-items: center; gap: 12px;
    background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius);
    padding: 14px 16px; box-shadow: var(--shadow-sm); color: var(--text);
}
.opr-metric-card.is-link:hover { border-color: var(--border-strong); text-decoration: none; }
.opr-metric-icon {
    width: 36px; height: 36px; flex-shrink: 0; border-radius: 10px;
    display: inline-flex; align-items: center; justify-content: center; padding: 8px;
    background: var(--slate-soft); color: var(--slate);
}
.opr-metric-card.tone-red .opr-metric-icon { background: var(--danger-soft); color: var(--danger); }
.opr-metric-card.tone-amber .opr-metric-icon { background: var(--warning-soft); color: var(--warning); }
.opr-metric-card.tone-blue .opr-metric-icon { background: var(--primary-soft); color: var(--primary); }
.opr-metric-card.tone-green .opr-metric-icon { background: var(--success-soft); color: var(--success); }
.opr-metric-card.tone-purple .opr-metric-icon { background: var(--purple-soft); color: var(--purple); }

.opr-metric-copy { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.opr-metric-copy small {
    font-size: 11.5px; line-height: 1.3; color: var(--muted); font-weight: 500;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden; min-height: 2.6em;
}
.opr-metric-copy strong { font-size: 19px; font-weight: 700; color: var(--heading); line-height: 1.2; }
.opr-metric-copy em { font-style: normal; font-size: 11px; color: var(--primary); font-weight: 600; }

/* ---------------------------------------------------------------
   9d. Donut charts (dashboard.partials.donut)
--------------------------------------------------------------- */
.opr-donut-layout { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
.opr-donut-chart {
    width: 118px; height: 118px; border-radius: 50%; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center; position: relative;
}
.opr-donut-chart::before { content: ''; position: absolute; inset: 16px; background: var(--panel); border-radius: 50%; }
.opr-donut-chart span { position: relative; font-size: 19px; font-weight: 700; color: var(--heading); }
.opr-donut-legend { display: flex; flex-direction: column; gap: 8px; flex: 1; min-width: 140px; }
.opr-donut-legend > div, .opr-donut-legend > a { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--text); text-decoration: none; }
.opr-donut-legend > a:hover { color: var(--primary); }
.opr-donut-legend i { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; display: inline-block; }
.opr-donut-legend span { flex: 1; color: var(--muted); }
.opr-donut-legend strong { color: var(--heading); }

/* ---------------------------------------------------------------
   10. Pagination
--------------------------------------------------------------- */
.pagination-nav { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-top: 16px; font-size: 12.5px; color: var(--muted); }
.pagination-summary { font-size: 12px; color: var(--muted); }
.pagination-size-form { display: flex; align-items: center; gap: 6px; }
.pagination-size-label { font-size: 12px; color: var(--muted); font-weight: 600; }
.pagination-size-select { height: 30px; padding: 0 8px; font-size: 12px; border-radius: var(--radius-sm); border: 1px solid var(--border-strong); background: var(--panel); color: var(--text); }
/* .pagination-btn / .pagination-page / .pagination-dots had no CSS anywhere in this
   stylesheet — every list page's "Previous / 1 2 3 / Next" control was rendering as
   plain unstyled links, the one control on these pages that didn't match anything else. */
.pagination-center { display: flex; align-items: center; gap: 5px; }
.pagination-btn, .pagination-page {
    min-width: 30px; height: 30px; padding: 0 9px; display: inline-flex; align-items: center; justify-content: center;
    border-radius: var(--radius-sm); border: 1px solid var(--border-strong); background: var(--panel); color: var(--text);
    font-size: 12px; font-weight: 600; text-decoration: none;
}
.pagination-btn:hover, .pagination-page:hover { background: var(--panel-soft); text-decoration: none; }
.pagination-btn.disabled { color: var(--border-strong); cursor: default; }
.pagination-btn.disabled:hover { background: var(--panel); }
.pagination-page.active { background: var(--primary); border-color: var(--primary); color: #fff; }
.pagination-dots { color: var(--muted); padding: 0 4px; font-size: 12px; }

/* ---------------------------------------------------------------
   12. Generic fallbacks
   Many create/edit/show pages use their own named grid class
   (e.g. supplier-form-grid, equipment-detail-grid, audit-filter-grid).
   These share one visual pattern site-wide: a responsive 2-column
   grid. Catch them all by naming convention instead of listing each.
--------------------------------------------------------------- */
[class*="-grid"]:not(.data-table):not(.opr-metric-grid):not(.dashboard-grid):not(.nav-group-items) {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 14px 20px;
    margin-bottom: 4px;
}
[class*="-grid"] .form-field, [class*="-grid"] .form-group { margin-bottom: 0; }
[class*="-grid"] .form-field.span-2, [class*="-grid"] .full-width, [class*="-grid"] .span-2 { grid-column: 1 / -1; }

[class$="stat-card"] {
    background: var(--panel-soft); border: 1px solid var(--border); border-radius: var(--radius-sm);
    padding: 12px 14px; display: flex; flex-direction: column; gap: 4px;
}
[class*="sticker-row"] {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; margin-bottom: 16px;
}

.opr-dashboard-table { width: 100%; table-layout: fixed; border-collapse: separate; border-spacing: 0; font-size: 12.5px; }
.opr-dashboard-table th {
    text-align: left; font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
    color: var(--muted); background: var(--panel-soft); padding: 9px 10px; border-bottom: 1px solid var(--border);
}
.opr-dashboard-table td { padding: 9px 10px; border-bottom: 1px solid var(--border); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.opr-dashboard-table tbody tr:last-child td { border-bottom: 0; }
.opr-dashboard-table tbody tr:hover td { background: var(--panel-soft); }

/* ---------------------------------------------------------------
   13. Record profile / show pages (store-profile-*, store-tabs, detail-card)
   Shared pattern reused across stores, technicians, suppliers, properties.
--------------------------------------------------------------- */
.sme-record-profile, [class*="profile-panel"] { padding: 20px 22px; }

.store-profile-header, [class*="profile-header"] {
    display: flex; align-items: flex-start; justify-content: space-between; gap: 16px;
    flex-wrap: wrap; padding-bottom: 18px; margin-bottom: 18px; border-bottom: 1px solid var(--border);
}
.store-profile-title { display: flex; align-items: center; gap: 14px; }
.store-profile-title h2 { font-size: 19px; margin-bottom: 3px; }
.store-profile-title p { font-size: 12.5px; color: var(--muted); }
.store-no-pill, [class*="no-pill"] {
    display: inline-flex; align-items: center; justify-content: center; min-width: 40px; height: 40px;
    padding: 0 10px; border-radius: var(--radius-sm); background: var(--primary-soft); color: var(--primary-dark);
    font-weight: 700; font-size: 13px; flex-shrink: 0;
}
/* Compact variant inside data-table rows: the large 40px pill was dictating row height in list views. */
.data-table .store-no-pill, .data-table [class*="no-pill"] {
    min-width: 0; height: auto; padding: 2px 8px; border-radius: 999px; font-size: 11.5px;
}
.store-profile-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

.store-summary-strip, [class*="summary-strip"] {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 1px;
    background: var(--border); border: 1px solid var(--border); border-radius: var(--radius-sm);
    overflow: hidden; margin-bottom: 20px;
}
.store-summary-strip > div, [class*="summary-strip"] > div {
    background: var(--panel-soft); padding: 10px 14px; display: flex; flex-direction: column; gap: 3px;
}
.store-summary-strip span, [class*="summary-strip"] span { font-size: 11px; color: var(--muted); }
.store-summary-strip strong, [class*="summary-strip"] strong { font-size: 17px; color: var(--heading); }

.store-tabs, [class$="-tabs"] { position: relative; }
.store-tabs input[type="radio"] { position: absolute; opacity: 0; pointer-events: none; }
.store-tab-bar {
    display: flex; gap: 4px; border-bottom: 1px solid var(--border); margin-bottom: 18px; flex-wrap: wrap;
}
.store-tab-bar label, .store-tab-bar a {
    padding: 9px 14px; font-size: 12.5px; font-weight: 600; color: var(--muted); cursor: pointer;
    border-bottom: 2px solid transparent; margin-bottom: -1px; text-decoration: none;
}
.store-tab-bar label:hover, .store-tab-bar a:hover { color: var(--text); text-decoration: none; }
/* Server-rendered tabs (full page reload per tab, e.g. supplier profile) use a plain .active class
   instead of the radio/:checked trick used by client-side tab panels. */
.store-tab-bar a.active { color: var(--primary); border-bottom-color: var(--primary); }
.store-tab-content { display: none; }
#tab-details:checked ~ .store-tab-bar label[for="tab-details"],
#tab-accounts:checked ~ .store-tab-bar label[for="tab-accounts"],
#tab-cctv:checked ~ .store-tab-bar label[for="tab-cctv"],
#tab-assets:checked ~ .store-tab-bar label[for="tab-assets"],
#tab-tickets:checked ~ .store-tab-bar label[for="tab-tickets"],
#tab-store-users:checked ~ .store-tab-bar label[for="tab-store-users"],
#tab-audit:checked ~ .store-tab-bar label[for="tab-audit"],
#tab-compliance:checked ~ .store-tab-bar label[for="tab-compliance"],
#tab-notes:checked ~ .store-tab-bar label[for="tab-notes"],
#tab-tenants:checked ~ .store-tab-bar label[for="tab-tenants"],
#tab-jobs:checked ~ .store-tab-bar label[for="tab-jobs"],
#tab-movement:checked ~ .store-tab-bar label[for="tab-movement"] { color: var(--primary); border-bottom-color: var(--primary); }
#tab-details:checked ~ .tab-details-content,
#tab-accounts:checked ~ .tab-accounts-content,
#tab-cctv:checked ~ .tab-cctv-content,
#tab-assets:checked ~ .tab-assets-content,
#tab-tickets:checked ~ .tab-tickets-content,
#tab-store-users:checked ~ .tab-store-users-content,
#tab-audit:checked ~ .tab-audit-content,
#tab-compliance:checked ~ .tab-compliance-content,
#tab-notes:checked ~ .tab-notes-content,
#tab-tenants:checked ~ .tab-tenants-content,
#tab-jobs:checked ~ .tab-jobs-content,
#tab-movement:checked ~ .tab-movement-content { display: block; }
.store-tab-content h3 { font-size: 14px; margin-bottom: 10px; }
.store-tab-content > div[class*="actions"] { margin-bottom: 12px; }

.detail-card {
    background: var(--panel-soft); border-radius: var(--radius-sm); padding: 10px 12px;
    display: flex; flex-direction: column; gap: 4px;
}
.detail-card span { font-size: 11px; color: var(--muted); }
.detail-card strong { font-size: 13px; color: var(--heading); font-weight: 600; word-break: break-word; }
.detail-wide, .field-span-2 { grid-column: 1 / -1; }

/* Inventory module pills/badges (list + profile + issue/receive header) */
.inventory-type-pill {
    display: inline-flex; align-items: center; padding: 3px 9px; border-radius: 999px;
    background: var(--panel-soft); border: 1px solid var(--border); font-size: 11.5px; font-weight: 600; color: var(--text);
}
.inventory-stock-badge {
    display: inline-flex; align-items: center; justify-content: center; min-width: 30px; padding: 2px 8px;
    border-radius: 999px; background: var(--primary-soft); color: var(--primary-dark); font-weight: 700; font-size: 12px;
}
.inventory-stock-badge.is-low { background: var(--danger-soft); color: var(--danger); }
.inventory-stock-pill {
    display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: var(--radius-sm);
    background: var(--panel-soft); border: 1px solid var(--border); font-size: 12px; font-weight: 600; color: var(--text);
}
.inventory-stock-pill.empty { background: var(--danger-soft); color: var(--danger); border-color: var(--danger-soft); }
.inventory-short-note {
    background: var(--panel-soft); border-radius: var(--radius-sm); padding: 10px 12px;
    font-size: 12.5px; color: var(--text); line-height: 1.5;
}

.section-mini-header {
    display: flex; align-items: flex-start; justify-content: space-between; gap: 12px;
    margin-bottom: 12px;
}
.section-mini-header strong { display: block; font-size: 14px; color: var(--heading); font-weight: 700; }
.section-mini-header span { display: block; margin-top: 2px; font-size: 12px; color: var(--muted); }
.section-mini-header .btn { flex-shrink: 0; }

/* ---------------------------------------------------------------
   14. Tenant / Public Portal (resources/views/portal/*)
   Standalone pages outside the app shell — no body.app-shell base,
   so they need their own background/typography/spacing to match
   the rest of the platform's design language.
--------------------------------------------------------------- */
body.public-portal-body {
    margin: 0; min-height: 100vh; background: var(--bg); color: var(--text);
    font-family: var(--font-main); font-size: 13.5px; line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

.tenant-one-shell, .tenant-clean-shell {
    max-width: 620px; margin: 48px auto; padding: 0 20px 48px;
    display: flex; flex-direction: column; gap: 20px;
}
.tenant-one-shell-wide { max-width: 920px; }
.tenant-clean-thank-shell { max-width: 520px; min-height: calc(100vh - 96px); justify-content: center; }

/* Emergency notice banner */
.tenant-emergency-notice {
    background: var(--panel); border: 1px solid var(--border); border-left: 4px solid var(--warning);
    border-radius: var(--radius); box-shadow: var(--shadow-sm); padding: 18px 20px;
}
.tenant-emergency-head { display: flex; gap: 12px; align-items: flex-start; }
.tenant-emergency-icon {
    flex: 0 0 auto; width: 32px; height: 32px; border-radius: 50%;
    background: var(--warning-soft); color: var(--warning); font-weight: 700; font-size: 16px;
    display: flex; align-items: center; justify-content: center;
}
.tenant-emergency-head h2 { font-size: 15px; color: var(--heading); margin: 0 0 4px; }
.tenant-emergency-head p { font-size: 12.5px; color: var(--muted); margin: 3px 0 0; }
.tenant-emergency-head a { color: var(--primary); font-weight: 600; }
.tenant-emergency-grid {
    display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 16px !important;
    margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--border);
}
.tenant-emergency-grid h3 { font-size: 12.5px; color: var(--heading); margin: 0 0 8px; }
.tenant-emergency-grid ul { margin: 0; padding-left: 18px; display: grid; gap: 5px; }
.tenant-emergency-grid li { font-size: 12px; color: var(--muted); }
.tenant-emergency-grid li strong { color: var(--text); }
@media (max-width: 620px) { .tenant-emergency-grid { grid-template-columns: 1fr !important; } }

/* Card body padding (background/border/radius/shadow come from sme-opr-design-system.css) */
.tenant-one-card, .tenant-clean-form-card { padding: 26px 28px; }
.tenant-clean-thank-card { padding: 36px 32px; text-align: center; }
@media (max-width: 560px) {
    .tenant-one-card, .tenant-clean-form-card, .tenant-clean-thank-card { padding: 20px; }
}

/* Header / brand row */
.tenant-one-header { padding-bottom: 20px; margin-bottom: 20px; border-bottom: 1px solid var(--border); }
.tenant-one-header-with-action { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.tenant-one-brand-row, .tenant-clean-brand-row { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; }
.tenant-clean-brand-row-center { justify-content: center; flex-direction: column; text-align: center; margin-bottom: 6px; }
.tenant-clean-brand-mark {
    flex: 0 0 auto; width: 42px; height: 42px; border-radius: 10px;
    background: var(--primary); color: #fff; font-weight: 700; font-size: 13px;
    display: flex; align-items: center; justify-content: center;
}
.tenant-clean-brand-logo {
    flex: 0 0 auto; width: 42px; height: 42px; border-radius: 10px;
    object-fit: contain; background: #fff; padding: 4px;
}
.tenant-one-brand-row strong, .tenant-clean-brand-row strong { display: block; font-size: 14px; color: var(--heading); }
.tenant-one-brand-row span, .tenant-clean-brand-row span { display: block; font-size: 11.5px; color: var(--muted); }

.tenant-clean-step, .tenant-one-step {
    display: inline-flex; align-items: center; padding: 3px 10px; border-radius: 999px;
    background: var(--primary-soft); color: var(--primary-dark); font-size: 11px; font-weight: 700;
    letter-spacing: .03em; text-transform: uppercase; margin-bottom: 8px;
}
.tenant-one-title-block h1 { font-size: 21px; color: var(--heading); margin: 0 0 6px; }
.tenant-one-title-block p { font-size: 13px; color: var(--muted); margin: 0; }

.tenant-secondary-link, .tenant-one-start-again {
    flex-shrink: 0; font-size: 12.5px; font-weight: 600; color: var(--primary);
    border: 1px solid var(--border-strong); border-radius: var(--radius-sm); padding: 7px 12px; white-space: nowrap;
}
.tenant-secondary-link:hover, .tenant-one-start-again:hover { background: var(--panel-soft); text-decoration: none; }

/* Verified email/postcode mini badges */
.tenant-one-verified-row { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 18px; }
.tenant-clean-verified-mini {
    display: flex; flex-direction: column; gap: 2px; padding: 9px 13px;
    background: var(--success-soft); border: 1px solid var(--success); border-radius: var(--radius-sm);
}
.tenant-clean-verified-mini span { font-size: 10.5px; color: var(--success); text-transform: uppercase; letter-spacing: .03em; font-weight: 700; }
.tenant-clean-verified-mini strong { font-size: 13px; color: var(--heading); }

/* Alerts */
.tenant-alert { padding: 11px 14px; border-radius: var(--radius-sm); font-size: 12.5px; margin-bottom: 16px; border: 1px solid; }
.tenant-alert-success { background: var(--success-soft); border-color: var(--success); color: var(--success); }
.tenant-alert-danger { background: var(--danger-soft); border-color: var(--danger); color: var(--danger); }

/* Form */
.tenant-form label, .tenant-clean-form label { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.tenant-form label span, .tenant-clean-form label span { font-size: 12.5px; font-weight: 600; color: var(--text); }
.tenant-code-input { letter-spacing: .5em; font-size: 20px; font-weight: 700; text-align: center; }
/* !important needed: the generic [class*="-grid"] fallback (section 12) has higher
   specificity (four :not() clauses) than a plain class selector and matches any class
   name containing "-grid", including tenant-grid-form / tenant-emergency-grid below. */
.tenant-grid-form, .tenant-one-grid-form {
    display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 4px 18px !important;
}
.tenant-span-2 { grid-column: 1 / -1; }
@media (max-width: 620px) {
    .tenant-grid-form, .tenant-one-grid-form { grid-template-columns: 1fr !important; }
}

.tenant-gdpr-note, .tenant-one-gdpr-note {
    font-size: 11.5px; color: var(--muted); background: var(--panel-soft); border: 1px solid var(--border);
    border-radius: var(--radius-sm); padding: 10px 12px; margin: 4px 0;
}
/* sme-opr-design-system.css forces every .btn-family element (incl. tenant-primary-btn /
   tenant-button-link / tenant-link-btn) to a fixed 112px width with !important — correct for
   compact table-row actions, wrong for full-width form submits and inline text links, so those
   two cases need their own !important overrides here to win the specificity tie. */
.tenant-actions .tenant-primary-btn, .tenant-one-actions .tenant-primary-btn,
.tenant-clean-thank-card .tenant-primary-btn {
    width: 100% !important; min-width: 0 !important; max-width: none !important;
}

.tenant-reset-form, .tenant-one-reset-form { margin-top: 14px; text-align: center; }
.tenant-link-btn {
    width: auto !important; min-width: 0 !important; max-width: 100% !important;
    height: auto !important; min-height: 0 !important; max-height: none !important;
    display: inline !important; background: none !important; border: none !important;
    padding: 0 !important; white-space: normal !important; overflow: visible !important; text-overflow: clip !important;
    color: var(--primary) !important; font-size: 12.5px; font-weight: 600;
    cursor: pointer; text-decoration: underline;
}
.tenant-link-btn:hover { color: var(--primary-dark) !important; background: none !important; transform: none !important; }

/* Thank-you page */
.tenant-clean-success-icon {
    width: 56px; height: 56px; margin: 4px auto 14px; border-radius: 50%;
    background: var(--success-soft); color: var(--success); font-size: 26px; font-weight: 700;
    display: flex; align-items: center; justify-content: center;
}
.tenant-clean-thank-card h1 { font-size: 20px; color: var(--heading); margin: 0 0 6px; }
.tenant-muted { display: block; color: var(--muted); font-size: 13px; margin: 0 0 18px; }
.tenant-ticket-number {
    display: inline-flex; flex-direction: column; gap: 2px; padding: 12px 22px; margin: 0 auto 18px;
    background: var(--primary-soft); border: 1px solid var(--primary); border-radius: var(--radius);
}
.tenant-ticket-number span { font-size: 10.5px; color: var(--primary-dark); text-transform: uppercase; letter-spacing: .04em; font-weight: 700; }
.tenant-ticket-number strong { font-size: 20px; color: var(--primary-dark); letter-spacing: .02em; }
.tenant-small-note { display: block; font-size: 11.5px; color: var(--muted); margin: 0 0 22px; }
.tenant-button-link { display: inline-flex; text-decoration: none; }

/* ---------------------------------------------------------------
   15. Feedback spotlight (layouts/app.blade.php, one-time-per-login
   intro pointing at the topbar "Give Feedback" icon)
--------------------------------------------------------------- */
.opr-spotlight-overlay {
    position: fixed; inset: 0; z-index: 200;
    background: rgba(15, 23, 42, .55);
    opacity: 1; transition: opacity .2s ease;
}
.opr-spotlight-overlay.opr-spotlight-hidden { opacity: 0; pointer-events: none; }
.opr-spotlight-ring {
    position: fixed;
    border-radius: 10px;
    box-shadow: 0 0 0 4px var(--primary), 0 0 0 9999px rgba(15, 23, 42, .55);
    transition: top .15s ease, left .15s ease, width .15s ease, height .15s ease;
    pointer-events: none;
}
.opr-spotlight-card {
    position: fixed; z-index: 201; width: min(300px, calc(100vw - 24px));
    background: var(--panel); color: var(--text); border-radius: var(--radius-lg);
    box-shadow: var(--shadow); padding: 16px 18px; text-align: left;
}
.opr-spotlight-badge {
    display: inline-block; padding: 2px 8px; border-radius: 999px; margin-bottom: 8px;
    background: var(--primary-soft); color: var(--primary-dark); font-size: 10.5px; font-weight: 700;
    text-transform: uppercase; letter-spacing: .04em;
}
.opr-spotlight-card h3 { font-size: 15px; color: var(--heading); margin: 0 0 6px; }
.opr-spotlight-card p { font-size: 12.5px; color: var(--muted); line-height: 1.5; margin: 0 0 14px; }

/* ---------------------------------------------------------------
   11. Utility
--------------------------------------------------------------- */
.empty-cell { text-align: center; color: var(--muted); }
::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 999px; }
::selection { background: var(--primary-soft); }