/*
 * Haulio Driver Portal — Custom Layout CSS
 * Extends Filament's compiled CSS with grid utilities and design system tokens
 */

/* ─── Design System Tokens ───────────────────────────────────────────────── */
:root {
    --hlo-primary:         #F59E0B;
    --hlo-primary-dark:    #D97706;
    --hlo-primary-light:   #FEF3C7;
    --hlo-primary-muted:   rgba(245,158,11,0.12);
    --hlo-success:         #10B981;
    --hlo-success-light:   rgba(16,185,129,0.12);
    --hlo-danger:          #EF4444;
    --hlo-danger-light:    rgba(239,68,68,0.12);
    --hlo-info:            #3B82F6;
    --hlo-info-light:      rgba(59,130,246,0.12);
    --hlo-violet:          #7C3AED;
    --hlo-violet-light:    rgba(124,58,237,0.12);
    --hlo-dark:            #1F2937;
    --hlo-dark-2:          #374151;
    --hlo-gray:            #6B7280;
    --hlo-gray-light:      #9CA3AF;
    --hlo-gray-border:     #E5E7EB;
    --hlo-gray-bg:         #F3F4F6;
    --hlo-bg:              #F9FAFB;
    --hlo-white:           #FFFFFF;
    --hlo-shadow-sm:       0 1px 3px rgba(0,0,0,0.07), 0 1px 2px rgba(0,0,0,0.05);
    --hlo-shadow-md:       0 4px 6px -1px rgba(0,0,0,0.07), 0 2px 4px -2px rgba(0,0,0,0.05);
    --hlo-radius-md:       8px;
    --hlo-radius-lg:       12px;
    --hlo-radius-xl:       16px;
    --hlo-radius-2xl:      20px;
    --hlo-radius-full:     9999px;
    --hlo-transition:      all 0.15s ease;
    --hlo-font:            'Inter', 'Segoe UI', -apple-system, BlinkMacSystemFont, sans-serif;
}

/* ─── Grid Utilities (missing from Filament's compiled CSS) ──────────────── */
.hlo-grid-2  { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 1rem; }
.hlo-grid-3  { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 1rem; }
.hlo-grid-4  { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 1rem; }
.hlo-grid-12 { display: grid; grid-template-columns: repeat(12, minmax(0,1fr)); gap: 1rem; }
.hlo-flex    { display: flex; }
.hlo-flex-1  { flex: 1 1 0%; }

/* ─── Base Card ──────────────────────────────────────────────────────────── */
.hlo-card {
    background: var(--hlo-white);
    border: 1px solid var(--hlo-gray-border);
    border-radius: var(--hlo-radius-xl);
    box-shadow: var(--hlo-shadow-sm);
    overflow: hidden;
}
.hlo-card-header {
    padding: 1rem 1.5rem;
    border-bottom: 1px solid var(--hlo-gray-border);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.hlo-card-body  { padding: 1.25rem 1.5rem; }
.hlo-card-footer { padding: 1rem 1.5rem; border-top: 1px solid var(--hlo-gray-border); }

/* ─── KPI Stat Card ──────────────────────────────────────────────────────── */
.hlo-stat {
    background: var(--hlo-white);
    border: 1px solid var(--hlo-gray-border);
    border-radius: var(--hlo-radius-xl);
    box-shadow: var(--hlo-shadow-sm);
    padding: 1.25rem 1.5rem;
    display: flex;
    align-items: center;
    gap: 1rem;
}
.hlo-stat-icon {
    width: 2.75rem;
    height: 2.75rem;
    border-radius: var(--hlo-radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.hlo-stat-icon--amber  { background: var(--hlo-primary-muted); color: var(--hlo-primary); }
.hlo-stat-icon--green  { background: var(--hlo-success-light); color: var(--hlo-success); }
.hlo-stat-icon--blue   { background: var(--hlo-info-light);    color: var(--hlo-info); }
.hlo-stat-icon--violet { background: var(--hlo-violet-light);  color: var(--hlo-violet); }
.hlo-stat-value { font-size: 1.625rem; font-weight: 700; color: var(--hlo-dark); line-height: 1.2; }
.hlo-stat-label { font-size: 0.6875rem; font-weight: 600; color: var(--hlo-gray-light); text-transform: uppercase; letter-spacing: 0.06em; margin-top: 2px; }
.hlo-stat-sub   { font-size: 0.6875rem; color: var(--hlo-gray-light); margin-top: 1px; }
.hlo-stat--amber  .hlo-stat-value { color: var(--hlo-primary-dark); }
.hlo-stat--green  .hlo-stat-value { color: #065F46; }
.hlo-stat--blue   .hlo-stat-value { color: #1E40AF; }
.hlo-stat--violet .hlo-stat-value { color: #4C1D95; }

/* ─── Pill Tabs ──────────────────────────────────────────────────────────── */
.hlo-tabs {
    display: flex;
    align-items: center;
    background: var(--hlo-gray-bg);
    border-radius: var(--hlo-radius-lg);
    padding: 0.25rem;
    gap: 0.25rem;
    margin-bottom: 1rem;
}
.hlo-tab {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.375rem;
    padding: 0.5rem 0.75rem;
    border-radius: var(--hlo-radius-md);
    font-size: 0.8125rem;
    font-weight: 500;
    cursor: pointer;
    border: none;
    background: transparent;
    color: var(--hlo-gray);
    transition: var(--hlo-transition);
    white-space: nowrap;
}
.hlo-tab:hover { color: var(--hlo-dark); }
.hlo-tab.active {
    background: var(--hlo-white);
    color: var(--hlo-dark);
    box-shadow: var(--hlo-shadow-sm);
    font-weight: 600;
}
.hlo-tab-badge {
    font-size: 0.6875rem;
    font-weight: 700;
    padding: 1px 6px;
    border-radius: var(--hlo-radius-full);
    background: var(--hlo-gray-border);
    color: var(--hlo-gray);
    min-width: 1.25rem;
    text-align: center;
}
.hlo-tab.active .hlo-tab-badge {
    background: var(--hlo-primary-muted);
    color: var(--hlo-primary-dark);
}

/* ─── Status Badges ──────────────────────────────────────────────────────── */
.hlo-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.6875rem;
    font-weight: 600;
    padding: 0.2rem 0.6rem;
    border-radius: var(--hlo-radius-full);
    white-space: nowrap;
}
.hlo-badge--green  { background: var(--hlo-success-light); color: #065F46; border: 1px solid rgba(16,185,129,0.2); }
.hlo-badge--amber  { background: var(--hlo-primary-muted); color: #92400E; border: 1px solid rgba(245,158,11,0.2); }
.hlo-badge--blue   { background: var(--hlo-info-light);    color: #1E3A8A; border: 1px solid rgba(59,130,246,0.2); }
.hlo-badge--violet { background: var(--hlo-violet-light);  color: #3B0764; border: 1px solid rgba(124,58,237,0.2); }
.hlo-badge--red    { background: var(--hlo-danger-light);  color: #7F1D1D; border: 1px solid rgba(239,68,68,0.2); }
.hlo-badge--gray   { background: var(--hlo-gray-bg);       color: var(--hlo-gray); border: 1px solid var(--hlo-gray-border); }
.hlo-badge-dot { width: 6px; height: 6px; border-radius: 50%; display: inline-block; flex-shrink: 0; }
.hlo-badge--green .hlo-badge-dot  { background: var(--hlo-success); }
.hlo-badge--amber .hlo-badge-dot  { background: var(--hlo-primary); }
.hlo-badge--blue .hlo-badge-dot   { background: var(--hlo-info); }
.hlo-badge--red .hlo-badge-dot    { background: var(--hlo-danger); }
.hlo-badge--gray .hlo-badge-dot   { background: var(--hlo-gray-light); }

/* ─── Buttons ────────────────────────────────────────────────────────────── */
.hlo-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    font-size: 0.8125rem;
    font-weight: 600;
    padding: 0.625rem 1.25rem;
    border-radius: var(--hlo-radius-lg);
    border: none;
    cursor: pointer;
    transition: var(--hlo-transition);
    white-space: nowrap;
    text-decoration: none;
}
.hlo-btn:disabled { opacity: 0.6; cursor: not-allowed; }
.hlo-btn--primary  { background: var(--hlo-primary); color: var(--hlo-white); }
.hlo-btn--primary:hover:not(:disabled)  { background: var(--hlo-primary-dark); }
.hlo-btn--green    { background: var(--hlo-success); color: var(--hlo-white); }
.hlo-btn--green:hover:not(:disabled)    { background: #059669; }
.hlo-btn--blue     { background: var(--hlo-info); color: var(--hlo-white); }
.hlo-btn--blue:hover:not(:disabled)     { background: #2563EB; }
.hlo-btn--violet   { background: var(--hlo-violet); color: var(--hlo-white); }
.hlo-btn--violet:hover:not(:disabled)   { background: #6D28D9; }
.hlo-btn--ghost    { background: var(--hlo-gray-bg); color: var(--hlo-dark); border: 1px solid var(--hlo-gray-border); }
.hlo-btn--ghost:hover:not(:disabled)    { background: var(--hlo-gray-border); }
.hlo-btn--sm { padding: 0.4rem 0.875rem; font-size: 0.75rem; border-radius: var(--hlo-radius-md); }
.hlo-btn--full { width: 100%; }

/* ─── Page Header ────────────────────────────────────────────────────────── */
.hlo-page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.5rem;
}
.hlo-page-title { font-size: 1.5rem; font-weight: 700; color: var(--hlo-dark); }
.hlo-page-sub   { font-size: 0.8125rem; color: var(--hlo-gray-light); margin-top: 2px; }

/* ─── Driver Identity Card ───────────────────────────────────────────────── */
.hlo-driver-card {
    background: var(--hlo-white);
    border: 1px solid var(--hlo-gray-border);
    border-radius: var(--hlo-radius-xl);
    box-shadow: var(--hlo-shadow-sm);
    padding: 1.25rem 1.5rem;
    display: flex;
    align-items: center;
    gap: 1.25rem;
    margin-bottom: 1.25rem;
}
.hlo-avatar {
    width: 3.25rem;
    height: 3.25rem;
    border-radius: var(--hlo-radius-xl);
    background: linear-gradient(135deg, var(--hlo-primary) 0%, var(--hlo-primary-dark) 100%);
    color: var(--hlo-white);
    font-size: 1.25rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    position: relative;
    box-shadow: 0 4px 12px rgba(245,158,11,0.3);
}
.hlo-avatar-online::after {
    content: '';
    position: absolute;
    bottom: -2px;
    right: -2px;
    width: 14px;
    height: 14px;
    background: var(--hlo-success);
    border: 2px solid var(--hlo-white);
    border-radius: 50%;
}

/* ─── Table ──────────────────────────────────────────────────────────────── */
.hlo-table { width: 100%; }
.hlo-table-header {
    display: grid;
    padding: 0.625rem 1.5rem;
    background: var(--hlo-bg);
    border-bottom: 1px solid var(--hlo-gray-border);
    font-size: 0.6875rem;
    font-weight: 600;
    color: var(--hlo-gray-light);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
.hlo-table-row {
    display: grid;
    padding: 1rem 1.5rem;
    border-bottom: 1px solid var(--hlo-gray-bg);
    align-items: center;
    transition: background 0.1s ease;
}
.hlo-table-row:last-child { border-bottom: none; }
.hlo-table-row:hover { background: var(--hlo-bg); }

/* ─── Progress Bar ───────────────────────────────────────────────────────── */
.hlo-progress-bar {
    height: 0.625rem;
    background: var(--hlo-gray-bg);
    border-radius: var(--hlo-radius-full);
    overflow: hidden;
}
.hlo-progress-fill {
    height: 100%;
    border-radius: var(--hlo-radius-full);
    background: linear-gradient(90deg, var(--hlo-primary) 0%, var(--hlo-primary-dark) 100%);
    transition: width 0.4s ease;
}
.hlo-progress-fill--green  { background: linear-gradient(90deg, var(--hlo-success) 0%, #059669 100%); }
.hlo-progress-fill--red    { background: linear-gradient(90deg, var(--hlo-danger) 0%, #DC2626 100%); }

/* ─── Sidebar Nav ────────────────────────────────────────────────────────── */
.hlo-sidebar-nav {
    background: var(--hlo-white);
    border: 1px solid var(--hlo-gray-border);
    border-radius: var(--hlo-radius-xl);
    box-shadow: var(--hlo-shadow-sm);
    overflow: hidden;
    width: 13rem;
    flex-shrink: 0;
}
.hlo-nav-item {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    width: 100%;
    padding: 0.875rem 1.25rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--hlo-gray);
    background: none;
    border: none;
    border-bottom: 1px solid var(--hlo-gray-bg);
    cursor: pointer;
    text-align: left;
    transition: var(--hlo-transition);
}
.hlo-nav-item:last-child { border-bottom: none; }
.hlo-nav-item:hover { background: var(--hlo-bg); color: var(--hlo-dark); }
.hlo-nav-item.active {
    background: var(--hlo-primary-muted);
    color: var(--hlo-primary-dark);
    font-weight: 600;
    border-right: 3px solid var(--hlo-primary);
}
.hlo-nav-item.active svg { color: var(--hlo-primary); }
.hlo-nav-badge {
    margin-left: auto;
    background: var(--hlo-primary);
    color: var(--hlo-white);
    font-size: 0.6875rem;
    font-weight: 700;
    width: 1.25rem;
    height: 1.25rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

/* ─── Form Controls ──────────────────────────────────────────────────────── */
.hlo-label {
    display: block;
    font-size: 0.6875rem;
    font-weight: 600;
    color: var(--hlo-gray-light);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 0.375rem;
}
.hlo-input {
    width: 100%;
    padding: 0.625rem 0.875rem;
    border: 1px solid var(--hlo-gray-border);
    border-radius: var(--hlo-radius-lg);
    font-size: 0.875rem;
    color: var(--hlo-dark);
    background: var(--hlo-bg);
    transition: var(--hlo-transition);
    outline: none;
}
.hlo-input:focus {
    background: var(--hlo-white);
    border-color: var(--hlo-primary);
    box-shadow: 0 0 0 3px var(--hlo-primary-muted);
}
.hlo-input:disabled {
    background: var(--hlo-gray-bg);
    color: var(--hlo-gray-light);
    cursor: not-allowed;
}
.hlo-input-error { border-color: var(--hlo-danger); }
.hlo-select { appearance: none; }
.hlo-error { font-size: 0.75rem; color: var(--hlo-danger); margin-top: 0.25rem; }
.hlo-hint  { font-size: 0.75rem; color: var(--hlo-gray-light); margin-top: 0.25rem; }

/* ─── Status Timeline (Load Cards) ──────────────────────────────────────── */
.hlo-timeline {
    display: flex;
    align-items: center;
    padding: 0.75rem 1.5rem;
    background: var(--hlo-bg);
    border-bottom: 1px solid var(--hlo-gray-border);
}
.hlo-timeline-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex-shrink: 0;
}
.hlo-timeline-connector {
    flex: 1;
    height: 2px;
    margin: 0 0.25rem;
    margin-bottom: 1.1rem;
    border-radius: 1px;
    background: var(--hlo-gray-border);
    transition: background 0.2s;
}
.hlo-timeline-connector.done { background: var(--hlo-success); }
.hlo-timeline-dot {
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.6875rem;
    font-weight: 700;
    border: 2px solid var(--hlo-gray-border);
    background: var(--hlo-white);
    color: var(--hlo-gray-light);
    transition: all 0.2s;
}
.hlo-timeline-dot.done {
    background: var(--hlo-success);
    border-color: var(--hlo-success);
    color: var(--hlo-white);
}
.hlo-timeline-dot.active {
    background: var(--hlo-primary);
    border-color: var(--hlo-primary);
    color: var(--hlo-white);
    box-shadow: 0 0 0 3px var(--hlo-primary-muted);
}
.hlo-timeline-label {
    font-size: 0.625rem;
    font-weight: 600;
    margin-top: 0.2rem;
    white-space: nowrap;
    color: var(--hlo-gray-light);
}
.hlo-timeline-label.done   { color: var(--hlo-success); }
.hlo-timeline-label.active { color: var(--hlo-primary-dark); }

/* ─── Load Card ──────────────────────────────────────────────────────────── */
.hlo-load-card { margin-bottom: 1rem; }
.hlo-load-card-top {
    padding: 1rem 1.5rem;
    border-bottom: 1px solid var(--hlo-gray-bg);
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
}
.hlo-load-ref   { font-size: 0.6875rem; font-family: monospace; color: var(--hlo-gray-light); text-transform: uppercase; letter-spacing: 0.05em; }
.hlo-load-title { font-size: 1rem; font-weight: 700; color: var(--hlo-dark); margin-top: 2px; }
.hlo-load-rate  { font-size: 1.5rem; font-weight: 700; color: var(--hlo-dark); text-align: right; line-height: 1.2; }
.hlo-load-ratepm { font-size: 0.6875rem; color: var(--hlo-gray-light); margin-top: 1px; }
.hlo-load-body  { padding: 1rem 1.5rem; }
.hlo-load-route { display: flex; align-items: flex-start; gap: 1rem; }
.hlo-route-line { display: flex; flex-direction: column; align-items: center; padding-top: 3px; flex-shrink: 0; }
.hlo-route-dot-pickup   { width: 10px; height: 10px; border-radius: 50%; background: var(--hlo-success); box-shadow: 0 0 0 3px rgba(16,185,129,0.15); flex-shrink: 0; }
.hlo-route-dot-delivery { width: 10px; height: 10px; border-radius: 50%; background: var(--hlo-danger); box-shadow: 0 0 0 3px rgba(239,68,68,0.15); flex-shrink: 0; }
.hlo-route-connector    { width: 1px; flex: 1; min-height: 1.5rem; background: linear-gradient(to bottom, var(--hlo-success), var(--hlo-danger)); margin: 3px 0; opacity: 0.4; }
.hlo-route-point        { flex: 1; }
.hlo-route-label        { font-size: 0.625rem; font-weight: 600; color: var(--hlo-gray-light); text-transform: uppercase; letter-spacing: 0.06em; }
.hlo-route-city         { font-size: 0.875rem; font-weight: 600; color: var(--hlo-dark); margin-top: 1px; }
.hlo-route-time         { font-size: 0.75rem; color: var(--hlo-gray-light); margin-top: 1px; }
.hlo-meta-pills         { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.875rem; }
.hlo-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.75rem;
    color: var(--hlo-gray);
    background: var(--hlo-bg);
    border: 1px solid var(--hlo-gray-border);
    padding: 0.2rem 0.6rem;
    border-radius: var(--hlo-radius-full);
}
.hlo-load-actions { padding: 0.75rem 1.5rem; display: flex; gap: 0.625rem; }

/* ─── Compliance Progress Ring ──────────────────────────────────────────── */
.hlo-compliance {
    text-align: right;
}
.hlo-compliance-pct { font-size: 1.625rem; font-weight: 700; }
.hlo-compliance-pct--good   { color: var(--hlo-success); }
.hlo-compliance-pct--mid    { color: var(--hlo-primary); }
.hlo-compliance-pct--low    { color: var(--hlo-danger); }
.hlo-compliance-label { font-size: 0.6875rem; color: var(--hlo-gray-light); }

/* ─── Document Row ───────────────────────────────────────────────────────── */
.hlo-doc-row {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.875rem 1.5rem;
    border-bottom: 1px solid var(--hlo-gray-bg);
    transition: background 0.1s;
}
.hlo-doc-row:last-child { border-bottom: none; }
.hlo-doc-row:hover { background: var(--hlo-bg); }
.hlo-doc-icon {
    width: 2rem;
    height: 2rem;
    border-radius: var(--hlo-radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border: 1px solid;
}
.hlo-doc-icon--green  { background: var(--hlo-success-light); border-color: rgba(16,185,129,0.2); color: var(--hlo-success); }
.hlo-doc-icon--amber  { background: var(--hlo-primary-muted); border-color: rgba(245,158,11,0.2); color: var(--hlo-primary); }
.hlo-doc-icon--red    { background: var(--hlo-danger-light);  border-color: rgba(239,68,68,0.2);  color: var(--hlo-danger); }
.hlo-doc-icon--gray   { background: var(--hlo-gray-bg);       border-color: var(--hlo-gray-border); color: var(--hlo-gray-light); }
.hlo-doc-name    { font-size: 0.875rem; font-weight: 600; color: var(--hlo-dark); }
.hlo-doc-meta    { font-size: 0.75rem; color: var(--hlo-gray-light); margin-top: 1px; }

/* ─── Upload Drop Zone ───────────────────────────────────────────────────── */
.hlo-dropzone {
    border: 2px dashed var(--hlo-gray-border);
    border-radius: var(--hlo-radius-xl);
    padding: 2rem 1.5rem;
    text-align: center;
    cursor: pointer;
    transition: var(--hlo-transition);
}
.hlo-dropzone:hover { border-color: var(--hlo-primary); background: var(--hlo-primary-muted); }

/* ─── Payout Banner ──────────────────────────────────────────────────────── */
.hlo-payout-banner {
    background: linear-gradient(135deg, var(--hlo-primary) 0%, var(--hlo-primary-dark) 100%);
    border-radius: var(--hlo-radius-xl);
    padding: 1.25rem 1.5rem;
    margin-bottom: 1.25rem;
    color: var(--hlo-white);
    box-shadow: 0 4px 16px rgba(245,158,11,0.25);
}
.hlo-payout-banner-grid { display: flex; gap: 1.5rem; align-items: flex-start; flex-wrap: wrap; }
.hlo-payout-banner-grid > div:last-child { margin-left: auto; text-align: right; }
.hlo-payout-label { font-size: 0.6875rem; font-weight: 600; opacity: 0.8; text-transform: uppercase; letter-spacing: 0.06em; }
.hlo-payout-value { font-size: 1.75rem; font-weight: 700; line-height: 1.2; margin-top: 2px; }
.hlo-payout-sub   { font-size: 0.75rem; opacity: 0.7; margin-top: 2px; }
.hlo-payout-progress { height: 4px; background: rgba(255,255,255,0.25); border-radius: var(--hlo-radius-full); margin-top: 1rem; overflow: hidden; }
.hlo-payout-progress-fill { height: 100%; background: var(--hlo-white); border-radius: var(--hlo-radius-full); }

/* ─── Info Banner ────────────────────────────────────────────────────────── */
.hlo-info-banner {
    background: var(--hlo-primary-muted);
    border: 1px solid rgba(245,158,11,0.2);
    border-radius: var(--hlo-radius-lg);
    padding: 0.75rem 1rem;
    font-size: 0.8125rem;
    color: #92400E;
    display: flex;
    align-items: flex-start;
    gap: 0.625rem;
}

/* ─── Empty State ────────────────────────────────────────────────────────── */
.hlo-empty {
    padding: 4rem 1.5rem;
    text-align: center;
}
.hlo-empty-icon {
    width: 4rem;
    height: 4rem;
    background: var(--hlo-gray-bg);
    border-radius: var(--hlo-radius-xl);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1rem;
    color: var(--hlo-gray-border);
}
.hlo-empty-title { font-size: 0.9375rem; font-weight: 600; color: var(--hlo-dark); }
.hlo-empty-sub   { font-size: 0.8125rem; color: var(--hlo-gray-light); margin-top: 0.25rem; }

/* ─── Radius alias ───────────────────────────────────────────────────────── */
.hlo-card { --hlo-radius: var(--hlo-radius-lg); }

/* ─── Mobile Responsive ──────────────────────────────────────────────────── */
@media (max-width: 768px) {

    /* Grids */
    .hlo-grid-2 { grid-template-columns: 1fr; }
    .hlo-grid-3 { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 0.75rem; }
    .hlo-grid-4 { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 0.75rem; }

    /* Card padding */
    .hlo-card-header  { padding: 0.875rem 1rem; }
    .hlo-card-body    { padding: 0.875rem 1rem; }
    .hlo-card-footer  { padding: 0.875rem 1rem; }

    /* KPI stat cards */
    .hlo-stat         { padding: 0.875rem 1rem; gap: 0.75rem; }
    .hlo-stat-icon    { width: 2.25rem; height: 2.25rem; }
    .hlo-stat-value   { font-size: 1.25rem; }
    .hlo-stat-label   { font-size: 0.625rem; }

    /* Driver identity card */
    .hlo-driver-card  { padding: 1rem; gap: 0.875rem; flex-wrap: wrap; }
    .hlo-avatar       { width: 2.75rem; height: 2.75rem; font-size: 1rem; }

    /* Page header */
    .hlo-page-header  { flex-wrap: wrap; gap: 0.5rem; margin-bottom: 1rem; }
    .hlo-page-title   { font-size: 1.25rem; }
    .hlo-page-sub     { font-size: 0.75rem; }

    /* Tabs — horizontal scroll, no wrap */
    .hlo-tabs {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        gap: 0.125rem;
    }
    .hlo-tabs::-webkit-scrollbar { display: none; }
    .hlo-tab  { flex: 0 0 auto; font-size: 0.75rem; padding: 0.4375rem 0.75rem; }

    /* Payout banner */
    .hlo-payout-banner       { padding: 1rem; }
    .hlo-payout-banner-grid  { grid-template-columns: 1fr; gap: 0.375rem; }
    .hlo-payout-banner-grid > div:last-child { text-align: left; }
    .hlo-payout-value        { font-size: 1.5rem; }

    /* Tables — hide header, stack rows as cards */
    .hlo-table-header { display: none !important; }
    .hlo-table-row {
        display: flex !important;
        flex-direction: column !important;
        gap: 0.375rem;
        padding: 0.875rem 1rem !important;
        grid-template-columns: unset !important;
    }
    .hlo-table-row > div[style*="text-align:right"],
    .hlo-table-row > div[style*="text-align: right"] {
        text-align: left !important;
    }

    /* Load card */
    .hlo-load-card-top  { padding: 0.875rem 1rem; }
    .hlo-load-body      { padding: 0.875rem 1rem; }
    .hlo-load-actions   { padding: 0.75rem 1rem; flex-wrap: wrap; }
    .hlo-load-rate      { font-size: 1.25rem; }

    /* Status timeline — allow horizontal scroll on small */
    .hlo-timeline          { padding: 0.625rem 1rem; overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .hlo-timeline-label    { font-size: 0.5625rem; }
    .hlo-timeline-dot      { width: 1.25rem; height: 1.25rem; font-size: 0.5625rem; }

    /* Document rows */
    .hlo-doc-row        { padding: 0.75rem 1rem; flex-wrap: wrap; }
    .hlo-doc-row > div:last-child { flex-basis: 100%; justify-content: flex-end; }

    /* Compliance percentage */
    .hlo-compliance-pct { font-size: 1.25rem; }

    /* Empty state */
    .hlo-empty { padding: 2.5rem 1rem; }

    /* Margin adjustments */
    .hlo-mb-5 { margin-bottom: 1rem; }
    .hlo-mb-6 { margin-bottom: 1.25rem; }
}

@media (max-width: 480px) {
    /* Single column below 480px */
    .hlo-grid-3 { grid-template-columns: 1fr; }

    /* Driver card — stack everything */
    .hlo-driver-card {
        display: grid;
        grid-template-columns: auto 1fr;
        grid-template-rows: auto auto;
        align-items: center;
    }
    .hlo-driver-card > div:last-child {
        grid-column: 1 / -1;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding-top: 0.5rem;
        border-top: 1px solid var(--hlo-gray-border);
    }
}

/* ─── Misc Utilities ─────────────────────────────────────────────────────── */
.hlo-divider { border: none; border-top: 1px solid var(--hlo-gray-border); margin: 1rem 0; }
.hlo-text-xs   { font-size: 0.75rem; }
.hlo-text-sm   { font-size: 0.875rem; }
.hlo-text-base { font-size: 1rem; }
.hlo-text-lg   { font-size: 1.125rem; }
.hlo-mono { font-family: monospace; }
.hlo-mb-1 { margin-bottom: 0.25rem; }
.hlo-mb-4 { margin-bottom: 1rem; }
.hlo-mb-5 { margin-bottom: 1.25rem; }
.hlo-mb-6 { margin-bottom: 1.5rem; }
.hlo-mt-1 { margin-top: 0.25rem; }
.hlo-gap-2 { gap: 0.5rem; }
.hlo-gap-3 { gap: 0.75rem; }
.hlo-gap-4 { gap: 1rem; }
.hlo-items-center { align-items: center; }
.hlo-justify-between { justify-content: space-between; }
.hlo-truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hlo-text-right { text-align: right; }
.hlo-min-w-0 { min-width: 0; }
.hlo-w-full { width: 100%; }
.hlo-animate-spin { animation: spin 1s linear infinite; }
@keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
.hlo-animate-pulse { animation: pulse 2s ease-in-out infinite; }
@keyframes pulse { 0%,100% { opacity:1; } 50% { opacity:0.5; } }

/* ─── Additional Responsive Breakpoints (1024px + 640px) ─────────────────── */
@media (max-width: 1024px) {
    .hlo-stat-grid--4 { grid-template-columns: repeat(2, 1fr); }
    .hlo-grid-4       { grid-template-columns: repeat(2, 1fr); }
    .hlo-grid-3       { grid-template-columns: repeat(2, 1fr); }
    .hlo-form-row-3   { grid-template-columns: repeat(2, 1fr); }

    /* Filament sidebar narrowing */
    .fi-main { padding-left: 0.75rem; padding-right: 0.75rem; }
}

@media (max-width: 640px) {
    .hlo-stat-grid--4 { grid-template-columns: repeat(2, 1fr); }
    .hlo-grid-2       { grid-template-columns: 1fr; }
    .hlo-grid-3       { grid-template-columns: 1fr; }
    .hlo-grid-4       { grid-template-columns: 1fr; }
    .hlo-form-row-2,
    .hlo-form-row-3   { grid-template-columns: 1fr; }

    /* Tighter page padding on small phones */
    .fi-main { padding-left: 0.5rem; padding-right: 0.5rem; }

    /* Modal full-width on mobile */
    .hlo-modal { padding: 1rem; }
}