/*
 * HQCrea Admin Theme
 * SKILL.md: DESIGN_VARIANCE=8 | MOTION_INTENSITY=6 | VISUAL_DENSITY=4
 * Palette: Navy #002A86 · Teal #18ACC5 · Cyan #00FFFF
 * Font: Outfit (loaded via Filament GoogleFontProvider)
 */

/* ═══════════════════════════════════════════════════════════
   1. GLOBAL FONT & BASE
═══════════════════════════════════════════════════════════ */
*, *::before, *::after {
    font-family: 'Outfit', 'Helvetica Neue', Arial, sans-serif !important;
}

/* Monospace for codes/numbers only */
code,
.font-mono,
[class*="font-mono"],
[style*="font-family:monospace"],
[style*="font-family: monospace"] {
    font-family: 'JetBrains Mono', 'Fira Code', 'Cascadia Code', monospace !important;
    letter-spacing: -0.01em;
}

/* ═══════════════════════════════════════════════════════════
   2. SIDEBAR — Dark Navy
═══════════════════════════════════════════════════════════ */
.fi-sidebar {
    background-color: #002A86 !important;
    border-right: none !important;
}

/* Sidebar header (logo zone) */
.fi-sidebar-header {
    background-color: #002A86 !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
    padding: 1.25rem 1rem !important;
}

/* Logo image sizing */
.fi-sidebar-header img,
.fi-brand-logo {
    max-height: 2.75rem !important;
    width: auto !important;
    object-fit: contain;
}

/* Sidebar scroll area */
.fi-sidebar-nav {
    background-color: #002A86 !important;
    padding-top: 0.5rem !important;
}

/* Nav group labels */
.fi-sidebar-group-label {
    color: rgba(255, 255, 255, 0.38) !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    letter-spacing: 0.1em !important;
    text-transform: uppercase !important;
    padding-left: 0.75rem !important;
    padding-top: 1rem !important;
}

/* Nav group button */
.fi-sidebar-group-btn {
    color: rgba(255, 255, 255, 0.38) !important;
}

.fi-sidebar-group-btn:hover {
    background-color: transparent !important;
}

/* Nav item links */
.fi-sidebar-item-btn {
    color: rgba(255, 255, 255, 0.68) !important;
    border-radius: 8px !important;
    margin: 1px 6px !important;
    transition: background-color 0.22s cubic-bezier(0.16, 1, 0.3, 1),
                color 0.22s cubic-bezier(0.16, 1, 0.3, 1),
                transform 0.18s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.fi-sidebar-item-btn:hover {
    background-color: rgba(255, 255, 255, 0.09) !important;
    color: #fff !important;
    transform: translateX(2px) !important;
}

/* Active nav item — teal fill */
.fi-sidebar-item-btn.fi-active,
.fi-sidebar-item-btn[aria-current="page"],
.fi-sidebar-item-btn[data-active="true"] {
    background-color: #18ACC5 !important;
    color: #fff !important;
    box-shadow: 0 2px 8px rgba(24, 172, 197, 0.28) !important;
}

/* Nav icons */
.fi-sidebar-item-icon {
    color: rgba(255, 255, 255, 0.52) !important;
    transition: color 0.22s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.fi-sidebar-item-btn:hover .fi-sidebar-item-icon {
    color: #18ACC5 !important;
}

.fi-sidebar-item-btn.fi-active .fi-sidebar-item-icon,
.fi-sidebar-item-btn[aria-current="page"] .fi-sidebar-item-icon {
    color: #fff !important;
}

/* Nav item label */
.fi-sidebar-item-label {
    font-weight: 500 !important;
    font-size: 13.5px !important;
    letter-spacing: -0.01em !important;
    transition: color 0.22s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.fi-sidebar-item-btn.fi-active .fi-sidebar-item-label {
    font-weight: 700 !important;
}

/* Notification badge on nav */
.fi-sidebar-item-badge {
    background-color: #18ACC5 !important;
    color: #fff !important;
}

/* Collapsed sidebar handle */
.fi-sidebar-close-btn,
.fi-sidebar-open-btn {
    color: rgba(255, 255, 255, 0.6) !important;
}

.fi-sidebar-close-btn:hover,
.fi-sidebar-open-btn:hover {
    color: #fff !important;
    background-color: rgba(255, 255, 255, 0.1) !important;
}

/* Scrollbar inside sidebar */
.fi-sidebar ::-webkit-scrollbar {
    width: 4px;
}

.fi-sidebar ::-webkit-scrollbar-track {
    background: transparent;
}

.fi-sidebar ::-webkit-scrollbar-thumb {
    background-color: rgba(255, 255, 255, 0.18);
    border-radius: 4px;
}

/* ═══════════════════════════════════════════════════════════
   3. TOPBAR
═══════════════════════════════════════════════════════════ */
.fi-topbar {
    background-color: #fff !important;
    border-bottom: 1px solid #e5e9f0 !important;
    backdrop-filter: blur(12px) !important;
}

.dark .fi-topbar {
    background-color: #0d1117 !important;
    border-bottom-color: rgba(255, 255, 255, 0.06) !important;
}

/* Topbar brand (collapsed sidebar) */
.fi-topbar .fi-brand-logo {
    max-height: 2rem !important;
}

/* ═══════════════════════════════════════════════════════════
   4. MAIN CONTENT AREA
═══════════════════════════════════════════════════════════ */
.fi-main {
    background-color: #f4f6fa !important;
}

.dark .fi-main {
    background-color: #0a0f1e !important;
}

/* Page header */
.fi-page-header {
    background-color: transparent !important;
    padding-bottom: 0 !important;
}

.fi-page-header-heading {
    font-size: 1.5rem !important;
    font-weight: 700 !important;
    letter-spacing: -0.025em !important;
    color: #0d1b4b !important;
}

.dark .fi-page-header-heading {
    color: #f0f4ff !important;
}

/* ═══════════════════════════════════════════════════════════
   5. WIDGETS / STAT CARDS
═══════════════════════════════════════════════════════════ */
.fi-wi-stats-overview-stat {
    background-color: #fff !important;
    border: 1px solid #e2e8f2 !important;
    border-radius: 14px !important;
    box-shadow: 0 2px 12px -4px rgba(0, 42, 134, 0.07) !important;
    transition: box-shadow 0.28s cubic-bezier(0.16, 1, 0.3, 1),
                transform 0.28s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.fi-wi-stats-overview-stat:hover {
    box-shadow: 0 6px 24px -6px rgba(0, 42, 134, 0.12) !important;
    transform: translateY(-1px) !important;
}

.dark .fi-wi-stats-overview-stat {
    background-color: #111827 !important;
    border-color: rgba(255, 255, 255, 0.06) !important;
}

/* Stat value */
.fi-wi-stats-overview-stat-value {
    font-size: 1.875rem !important;
    font-weight: 800 !important;
    letter-spacing: -0.04em !important;
    color: #0d1b4b !important;
}

.dark .fi-wi-stats-overview-stat-value {
    color: #f0f4ff !important;
}

/* Stat label */
.fi-wi-stats-overview-stat-label {
    font-size: 12px !important;
    font-weight: 600 !important;
    letter-spacing: 0.04em !important;
    text-transform: uppercase !important;
    color: #64748b !important;
}

/* ═══════════════════════════════════════════════════════════
   6. TABLE
═══════════════════════════════════════════════════════════ */
.fi-table-header {
    background-color: #f8faff !important;
    border-bottom: 2px solid #e2e8f2 !important;
}

.dark .fi-table-header {
    background-color: #111827 !important;
    border-bottom-color: rgba(255, 255, 255, 0.06) !important;
}

.fi-table-header-cell {
    font-size: 11px !important;
    font-weight: 700 !important;
    letter-spacing: 0.07em !important;
    text-transform: uppercase !important;
    color: #475569 !important;
}

.dark .fi-table-header-cell {
    color: #94a3b8 !important;
}

/* Table rows */
.fi-table-row {
    transition: background-color 0.15s ease !important;
    border-bottom: 1px solid #f1f5fb !important;
}

.fi-table-row:hover {
    background-color: #f0f6ff !important;
}

.dark .fi-table-row {
    border-bottom-color: rgba(255, 255, 255, 0.04) !important;
}

.dark .fi-table-row:hover {
    background-color: rgba(255, 255, 255, 0.03) !important;
}

/* Table action buttons */
.fi-table-record-action-btn {
    transition: all 0.18s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.fi-table-record-action-btn:active {
    transform: scale(0.96) !important;
}

/* ═══════════════════════════════════════════════════════════
   7. BUTTONS
═══════════════════════════════════════════════════════════ */
.fi-btn {
    font-weight: 600 !important;
    letter-spacing: -0.01em !important;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.fi-btn:active {
    transform: scale(0.97) !important;
}

/* Primary button — teal override */
.fi-btn-color-primary {
    background-color: #18ACC5 !important;
    border-color: #18ACC5 !important;
}

.fi-btn-color-primary:hover {
    background-color: #139fb7 !important;
    border-color: #139fb7 !important;
    box-shadow: 0 4px 14px -4px rgba(24, 172, 197, 0.38) !important;
}

/* ═══════════════════════════════════════════════════════════
   8. FORMS
═══════════════════════════════════════════════════════════ */
.fi-fo-field-wrp-label {
    font-size: 12.5px !important;
    font-weight: 600 !important;
    color: #374151 !important;
    letter-spacing: -0.005em !important;
}

.dark .fi-fo-field-wrp-label {
    color: #d1d5db !important;
}

.fi-input {
    border-color: #d8e0f0 !important;
    border-radius: 8px !important;
    transition: border-color 0.2s ease,
                box-shadow 0.2s ease !important;
}

.fi-input:focus {
    border-color: #18ACC5 !important;
    box-shadow: 0 0 0 3px rgba(24, 172, 197, 0.12) !important;
}

/* ═══════════════════════════════════════════════════════════
   9. BADGES
═══════════════════════════════════════════════════════════ */
.fi-badge {
    font-weight: 600 !important;
    font-size: 11px !important;
    letter-spacing: 0.02em !important;
    border-radius: 6px !important;
}

/* ═══════════════════════════════════════════════════════════
   10. MODALS
═══════════════════════════════════════════════════════════ */
.fi-modal-content {
    border-radius: 16px !important;
    box-shadow: 0 24px 64px -12px rgba(0, 42, 134, 0.18),
                0 0 0 1px rgba(0, 42, 134, 0.06) !important;
}

.fi-modal-header {
    border-bottom: 1px solid #e9eef8 !important;
}

.fi-modal-header-heading {
    font-weight: 700 !important;
    letter-spacing: -0.02em !important;
    color: #0d1b4b !important;
}

.dark .fi-modal-header-heading {
    color: #f0f4ff !important;
}

/* ═══════════════════════════════════════════════════════════
   11. NOTIFICATIONS
═══════════════════════════════════════════════════════════ */
.fi-notifications-database-empty-state {
    padding: 2rem !important;
}

/* ═══════════════════════════════════════════════════════════
   12. KANBAN / CUSTOM PAGES — Override purple → brand teal
   Replaces #4f46e5 / #6366f1 with navy/teal palette
═══════════════════════════════════════════════════════════ */

/* Stage badge: indigo → teal */
.stage-badge {
    background: rgba(24, 172, 197, 0.10) !important;
    color: #0e8fa8 !important;
    border: 1px solid rgba(24, 172, 197, 0.22) !important;
}

.dark .stage-badge {
    background: rgba(24, 172, 197, 0.14) !important;
    color: #67d8eb !important;
    border-color: rgba(24, 172, 197, 0.28) !important;
}

/* Kanban mobile tab active: indigo → teal */
.kanban-tab--active {
    color: #18ACC5 !important;
    border-bottom-color: #18ACC5 !important;
}

.dark .kanban-tab--active {
    color: #67d8eb !important;
    border-bottom-color: #67d8eb !important;
}

/* Kanban card header */
.kanban-col-header {
    margin-bottom: 14px !important;
}

/* task-view: code color navy */
.tv-value[style*="color:#4f46e5"],
.tv-value[style*="color: #4f46e5"] {
    color: #002A86 !important;
}

/* ── Carga Laboral — purple → teal ── */
.cl-task-code {
    color: #002A86 !important;
}

.cl-op-row:hover {
    background: rgba(24, 172, 197, 0.06) !important;
}

.cl-op-row.active {
    background: rgba(24, 172, 197, 0.10) !important;
    border-right-color: #18ACC5 !important;
}

.dark .cl-op-row:hover {
    background: rgba(24, 172, 197, 0.08) !important;
}

.dark .cl-op-row.active {
    background: rgba(24, 172, 197, 0.14) !important;
}

/* Stage chip in task list */
.cl-task-stage {
    background: rgba(24, 172, 197, 0.10) !important;
    color: #0e8fa8 !important;
    border-color: rgba(24, 172, 197, 0.20) !important;
}

/* Reassign button hover */
.cl-reassign-btn:hover {
    border-color: #18ACC5 !important;
    color: #0e8fa8 !important;
    background: rgba(24, 172, 197, 0.06) !important;
}

.dark .cl-reassign-btn:hover {
    border-color: #67d8eb !important;
    color: #67d8eb !important;
}

/* Mobile back button */
.cl-back-btn {
    color: #0e8fa8 !important;
}

/* ── Calendario — purple → teal ── */
.cal-nav-btn:hover {
    border-color: #18ACC5 !important;
    color: #0e8fa8 !important;
    background: rgba(24, 172, 197, 0.05) !important;
}

.dark .cal-nav-btn:hover {
    border-color: #67d8eb !important;
    color: #67d8eb !important;
}

.cal-view-btn:hover {
    background: rgba(24, 172, 197, 0.06) !important;
    color: #0e8fa8 !important;
}

.cal-view-btn.is-active {
    background: #18ACC5 !important;
    color: #fff !important;
}

.dark .cal-view-btn.is-active {
    background: #18ACC5 !important;
}

.cal-day-num.today {
    background: #18ACC5 !important;
    color: #fff !important;
}

.cal-day-num-btn:hover .cal-day-num:not(.today) {
    background: rgba(24, 172, 197, 0.12) !important;
    color: #0e8fa8 !important;
}

.cal-cell.cal-today {
    background: rgba(24, 172, 197, 0.04) !important;
}

.dark .cal-cell.cal-today {
    background: rgba(24, 172, 197, 0.08) !important;
}

.cal-more-btn {
    color: #0e8fa8 !important;
}

.cal-more-btn:hover {
    background: rgba(24, 172, 197, 0.08) !important;
}

.cal-wh-day.today {
    color: #18ACC5 !important;
}

.cal-week-header:hover {
    background: rgba(24, 172, 197, 0.06) !important;
}

.dark .cal-week-header:hover {
    background: rgba(24, 172, 197, 0.10) !important;
}

/* ═══════════════════════════════════════════════════════════
   13. LOGIN PAGE — DESIGN_VARIANCE=8: asymmetric whitespace
   Hierarchy: fi-simple-layout > fi-simple-main-ctn > fi-simple-main > fi-simple-page
═══════════════════════════════════════════════════════════ */

/* Full-viewport navy gradient — the actual page background */
.fi-simple-layout {
    background: linear-gradient(150deg, #001050 0%, #002A86 42%, #0c42b5 100%) !important;
    min-height: 100dvh !important;
    position: relative !important;
    overflow: hidden !important;
}

/* Decorative geometry — fills the asymmetric left void */
.fi-simple-layout::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 7%;
    transform: translateY(-50%);
    width: min(38vw, 420px);
    height: min(38vw, 420px);
    border-radius: 50%;
    border: 1.5px solid rgba(0, 255, 255, 0.07);
    pointer-events: none;
}

.fi-simple-layout::after {
    content: '';
    position: absolute;
    top: 32%;
    left: 3%;
    transform: translateY(-50%);
    width: min(22vw, 260px);
    height: min(22vw, 260px);
    border-radius: 50%;
    border: 1px solid rgba(24, 172, 197, 0.09);
    pointer-events: none;
}

/* Shift card to the right — ANTI-CENTER BIAS compliance */
.fi-simple-main-ctn {
    justify-content: flex-end !important;
    padding-right: clamp(1rem, 10vw, 120px) !important;
    padding-left: clamp(1rem, 4vw, 40px) !important;
    position: relative !important;
}

/* The form card — clean floating surface */
.fi-simple-main {
    background: #ffffff !important;
    border-radius: 20px !important;
    /* Override Tailwind ring-1 + branded tinted shadow */
    box-shadow: 0 40px 80px -20px rgba(0, 0, 0, 0.48),
                0 0 0 1px rgba(255, 255, 255, 0.06) !important;
    animation: fi-login-in 0.55s cubic-bezier(0.16, 1, 0.3, 1) both !important;
}

.dark .fi-simple-main {
    background: #0f172a !important;
    box-shadow: 0 40px 80px -20px rgba(0, 0, 0, 0.70),
                0 0 0 1px rgba(255, 255, 255, 0.06) !important;
}

/* Remove inner page stacking (inherits from card) */
.fi-simple-page {
    background: transparent !important;
    box-shadow: none !important;
    border-radius: 0 !important;
}

@keyframes fi-login-in {
    from { opacity: 0; transform: translateY(18px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Mobile: collapse to centered single-column */
@media (max-width: 767px) {
    .fi-simple-main-ctn {
        justify-content: center !important;
        padding-right: 1rem !important;
        padding-left: 1rem !important;
    }

    .fi-simple-layout::before,
    .fi-simple-layout::after {
        display: none !important;
    }
}

/* ═══════════════════════════════════════════════════════════
   14. SCROLL BARS (global)
═══════════════════════════════════════════════════════════ */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background-color: rgba(0, 42, 134, 0.15);
    border-radius: 6px;
}

::-webkit-scrollbar-thumb:hover {
    background-color: rgba(24, 172, 197, 0.4);
}

/* ═══════════════════════════════════════════════════════════
   15. FOCUS RING
═══════════════════════════════════════════════════════════ */
:focus-visible {
    outline: 2px solid #18ACC5 !important;
    outline-offset: 2px !important;
}

/* ═══════════════════════════════════════════════════════════
   16. UX/READABILITY IMPROVEMENTS
   SKILL.md: MOTION_INTENSITY=6 | VISUAL_DENSITY=4
   Fixes: small fonts, eye-strain, widget readability
═══════════════════════════════════════════════════════════ */

/* — Base text size bump (Filament defaults to ~14px, 15px is more comfortable) — */
.fi-main-ctn,
.fi-main {
    font-size: 15px !important;
}

/* — Stat card description — */
.fi-wi-stats-overview-stat-description {
    font-size: 12.5px !important;
    color: #475569 !important;
    line-height: 1.45 !important;
    margin-top: 2px !important;
}

.dark .fi-wi-stats-overview-stat-description {
    color: #94a3b8 !important;
}

/* — Stat value: slightly softer navy (less eye strain) — */
.fi-wi-stats-overview-stat-value {
    color: #1e293b !important;
}

.dark .fi-wi-stats-overview-stat-value {
    color: #f0f4ff !important;
}

/* — Table body cells — */
.fi-table-cell {
    font-size: 14px !important;
    line-height: 1.5 !important;
}

/* — Table row height: slightly more breathing room — */
.fi-table-row td {
    padding-top: 0.6875rem !important;
    padding-bottom: 0.6875rem !important;
}

/* — Table header slightly larger — */
.fi-table-header-cell {
    font-size: 11.5px !important;
}

/* — Widget (chart/table) heading: bolder, clear hierarchy — */
.fi-wi-chart .fi-section-header-heading,
.fi-wi-table .fi-section-header-heading,
.fi-wi-chart-heading,
.fi-wi-table-heading {
    font-size: 15px !important;
    font-weight: 700 !important;
    letter-spacing: -0.015em !important;
    color: #0f172a !important;
}

.dark .fi-wi-chart .fi-section-header-heading,
.dark .fi-wi-table .fi-section-header-heading,
.dark .fi-wi-chart-heading,
.dark .fi-wi-table-heading {
    color: #f1f5f9 !important;
}

/* — Widget description text — */
.fi-wi-chart .fi-section-header-description,
.fi-wi-table .fi-section-header-description {
    font-size: 13px !important;
    color: #475569 !important;
}

.dark .fi-wi-chart .fi-section-header-description,
.dark .fi-wi-table .fi-section-header-description {
    color: #94a3b8 !important;
}

/* — Stats overview heading — */
.fi-wi-stats-overview-heading {
    font-size: 15px !important;
    font-weight: 700 !important;
    letter-spacing: -0.015em !important;
    color: #0f172a !important;
}

.dark .fi-wi-stats-overview-heading {
    color: #f1f5f9 !important;
}

/* — Page header: slightly larger title — */
.fi-page-header-heading {
    font-size: 1.625rem !important;
}

/* — Main background: marginally warmer to reduce blue glare — */
.fi-main {
    background-color: #f5f6fb !important;
}

/* — Widget cards: slightly increased inner padding for breathing room — */
.fi-wi-stats-overview-stat {
    padding: 1.25rem 1.375rem !important;
}

/* — Monospace in tables (codes, amounts) — */
.fi-table-cell code,
.fi-table-cell [class*="font-mono"] {
    font-size: 13px !important;
    letter-spacing: -0.01em !important;
}

/* — Form labels: slightly more readable — */
.fi-fo-field-wrp-label {
    font-size: 13px !important;
}

/* — Form helper text — */
.fi-fo-field-wrp-helper-text {
    font-size: 12.5px !important;
    color: #64748b !important;
    line-height: 1.45 !important;
}

/* — Dashboard widget gap: add top spacing so rows breathe — */
.fi-wi {
    transition: box-shadow 0.28s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

/* — Table widget heading row — */
.fi-wi-table > .fi-section > .fi-section-header {
    padding-top: 1rem !important;
    padding-bottom: 0.75rem !important;
}

/* ═══════════════════════════════════════════════════════════
   17. STATS OVERVIEW WIDGET LABEL — tone down ALLCAPS intensity
═══════════════════════════════════════════════════════════ */
.fi-wi-stats-overview-stat-label {
    text-transform: none !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    letter-spacing: -0.01em !important;
    color: #475569 !important;
}

.dark .fi-wi-stats-overview-stat-label {
    color: #94a3b8 !important;
}

/* ═══════════════════════════════════════════════════════════
   18. ORDERS BY COMPANY WIDGET
═══════════════════════════════════════════════════════════ */
.hqw-company {
    background: #fff;
    border-radius: 12px;
    border: 1px solid #e2e8f2;
    overflow: hidden;
    height: 100%;
    display: flex;
    flex-direction: column;
}
.dark .hqw-company { background: #111827; border-color: rgba(255,255,255,0.06); }
.hqw-company-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.25rem 0.75rem;
    border-bottom: 1px solid #f1f5fb;
    flex-shrink: 0;
}
.dark .hqw-company-header { border-bottom-color: rgba(255,255,255,0.06); }
.hqw-company-title {
    font-size: 15px;
    font-weight: 700;
    letter-spacing: -0.015em;
    color: #1e293b;
    margin: 0;
}
.dark .hqw-company-title { color: #f1f5f9; }
.hqw-company-desc {
    font-size: 12px;
    color: #94a3b8;
    margin: 1px 0 0;
}
.hqw-company-empty {
    padding: 2.5rem 1.25rem;
    text-align: center;
    color: #94a3b8;
    font-size: 13px;
}
.hqw-company-list {
    list-style: none;
    margin: 0;
    padding: 0.25rem 0;
    overflow-y: auto;
    flex: 1;
}
.hqw-company-item {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.625rem 1.25rem;
    transition: background-color 0.15s ease;
}
.hqw-company-item:hover { background-color: #f8faff; }
.dark .hqw-company-item:hover { background-color: rgba(255,255,255,0.03); }
.hqw-rank {
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #f1f5f9;
    color: #64748b;
    font-size: 11px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 1px;
}
.dark .hqw-rank { background: rgba(255,255,255,0.08); color: #94a3b8; }
.hqw-rank-top {
    background: rgba(24,172,197,0.12);
    color: #0e8fa8;
}
.dark .hqw-rank-top { background: rgba(24,172,197,0.18); color: #5ecfe3; }
.hqw-company-info { flex: 1; min-width: 0; }
.hqw-company-name-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 0.5rem;
    margin-bottom: 4px;
}
.hqw-company-name {
    font-size: 13px;
    font-weight: 600;
    color: #1e293b;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1;
    min-width: 0;
}
.dark .hqw-company-name { color: #f1f5f9; }
.hqw-company-val {
    font-size: 12px;
    font-weight: 700;
    color: #16a34a;
    white-space: nowrap;
    flex-shrink: 0;
}
.dark .hqw-company-val { color: #4ade80; }
.hqw-bar-wrap {
    height: 4px;
    background: #f1f5f9;
    border-radius: 9999px;
    overflow: hidden;
    margin-bottom: 3px;
}
.dark .hqw-bar-wrap { background: rgba(255,255,255,0.08); }
.hqw-bar {
    height: 100%;
    background: linear-gradient(90deg, #18ACC5, #0e8fa8);
    border-radius: 9999px;
}
.hqw-order-count {
    font-size: 11px;
    color: #94a3b8;
}

/* ═══════════════════════════════════════════════════════════
   19. LIGHT MODE CONTRAST — WCAG AA compliance audit
   All primary text ≥ 7:1 · secondary ≥ 4.5:1 on #fff/#f5f6fb
═══════════════════════════════════════════════════════════ */

/* — Generic fi-section headings (covers ALL widget types) — */
.fi-section-header-heading {
    color: #0f172a !important;
}
.dark .fi-section-header-heading {
    color: #f1f5f9 !important;
}

/* — Generic fi-section descriptions — */
.fi-section-header-description {
    color: #475569 !important;
}
.dark .fi-section-header-description {
    color: #94a3b8 !important;
}

/* — Table cell body text — */
.fi-table-cell {
    color: #1e293b !important;
}
.dark .fi-table-cell {
    color: #e2e8f0 !important;
}

/* — Table cell nested text (description lines, subtitles) — */
.fi-table-cell p,
.fi-table-cell span:not(.fi-badge) {
    color: inherit !important;
}

/* — Table header cell: slightly stronger than before — */
.fi-table-header-cell {
    color: #374151 !important;
}
.dark .fi-table-header-cell {
    color: #94a3b8 !important;
}

/* — Stat value: ensure it is never too light in either mode — */
.fi-wi-stats-overview-stat-value {
    color: #0f172a !important;
}
.dark .fi-wi-stats-overview-stat-value {
    color: #f0f4ff !important;
}

/* — Stat label — */
.fi-wi-stats-overview-stat-label {
    color: #374151 !important;
}
.dark .fi-wi-stats-overview-stat-label {
    color: #94a3b8 !important;
}

/* — Widget section backgrounds: always white in light, dark in dark — */
.fi-section {
    background-color: #ffffff !important;
}
.dark .fi-section {
    background-color: #111827 !important;
}

/* — Page/content area text base — */
.fi-main-ctn {
    color: #1e293b !important;
}
.dark .fi-main-ctn {
    color: #e2e8f0 !important;
}

/* — Form input text — */
.fi-input,
.fi-select,
.fi-textarea {
    color: #1e293b !important;
    background-color: #fff !important;
}
.dark .fi-input,
.dark .fi-select,
.dark .fi-textarea {
    color: #f1f5f9 !important;
    background-color: #1e293b !important;
}

/* — Dropdown / select options text — */
.fi-fo-select-option-label {
    color: #1e293b !important;
}
.dark .fi-fo-select-option-label {
    color: #f1f5f9 !important;
}