/*
 * Haulio Client Portal — Custom Layout CSS
 * Enterprise-grade design system for the shipper/client portal
 */

/* ─── Design System Tokens ───────────────────────────────────────────────── */
:root {
    --hlo-primary:         #F59E0B;
    --hlo-primary-dark:    #D97706;
    --hlo-primary-light:   #FEF3C7;
    --hlo-primary-muted:   rgba(245,158,11,0.10);
    --hlo-success:         #10B981;
    --hlo-success-light:   rgba(16,185,129,0.10);
    --hlo-danger:          #EF4444;
    --hlo-danger-light:    rgba(239,68,68,0.10);
    --hlo-info:            #3B82F6;
    --hlo-info-light:      rgba(59,130,246,0.10);
    --hlo-violet:          #7C3AED;
    --hlo-violet-light:    rgba(124,58,237,0.10);
    --hlo-orange:          #F97316;
    --hlo-orange-light:    rgba(249,115,22,0.10);
    --hlo-dark:            #111827;
    --hlo-dark-2:          #374151;
    --hlo-gray:            #6B7280;
    --hlo-gray-light:      #9CA3AF;
    --hlo-gray-border:     #E5E7EB;
    --hlo-gray-bg:         #F3F4F6;
    --hlo-bg:              #F8FAFC;
    --hlo-white:           #FFFFFF;
    --hlo-shadow-sm:       0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
    --hlo-shadow-md:       0 4px 12px rgba(0,0,0,0.07), 0 2px 4px rgba(0,0,0,0.04);
    --hlo-shadow-lg:       0 10px 25px rgba(0,0,0,0.10), 0 4px 8px rgba(0,0,0,0.05);
    --hlo-radius-sm:       6px;
    --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 & Layout Utilities ────────────────────────────────────────────── */
.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%; }
.hlo-mb-4    { margin-bottom: 1rem; }
.hlo-mb-5    { margin-bottom: 1.25rem; }
.hlo-mb-6    { margin-bottom: 1.5rem; }

/* ─── 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;
    transition: var(--hlo-transition);
}
.hlo-stat:hover { box-shadow: var(--hlo-shadow-md); transform: translateY(-1px); }
.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-dark); }
.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-icon--red    { background: var(--hlo-danger-light); color: var(--hlo-danger); }
.hlo-stat-value { font-size: 1.625rem; font-weight: 800; color: var(--hlo-dark); line-height: 1.1; }
.hlo-stat-label { font-size: 0.75rem; color: var(--hlo-gray); margin-top: 2px; font-weight: 500; }
.hlo-stat-trend { font-size: 0.6875rem; font-weight: 600; margin-top: 4px; display: flex; align-items: center; gap: 3px; }
.hlo-stat-trend--up   { color: var(--hlo-success); }
.hlo-stat-trend--down { color: var(--hlo-danger); }
.hlo-stat--amber  { border-left: 3px solid var(--hlo-primary); }
.hlo-stat--green  { border-left: 3px solid var(--hlo-success); }
.hlo-stat--blue   { border-left: 3px solid var(--hlo-info); }
.hlo-stat--violet { border-left: 3px solid var(--hlo-violet); }
.hlo-stat--red    { border-left: 3px solid var(--hlo-danger); }

/* ─── Client Identity Banner ─────────────────────────────────────────────── */
.hlo-client-banner {
    background: linear-gradient(135deg, #1F2937 0%, #374151 100%);
    border-radius: var(--hlo-radius-2xl);
    padding: 1.5rem 2rem;
    display: flex;
    align-items: center;
    gap: 1.25rem;
    margin-bottom: 1.5rem;
    position: relative;
    overflow: hidden;
}
.hlo-client-banner::before {
    content: '';
    position: absolute;
    top: -40px; right: -40px;
    width: 160px; height: 160px;
    background: rgba(245,158,11,0.08);
    border-radius: 50%;
}
.hlo-client-banner::after {
    content: '';
    position: absolute;
    bottom: -60px; right: 80px;
    width: 200px; height: 200px;
    background: rgba(245,158,11,0.05);
    border-radius: 50%;
}
.hlo-client-avatar {
    width: 3.5rem;
    height: 3.5rem;
    border-radius: var(--hlo-radius-lg);
    background: rgba(245,158,11,0.2);
    border: 2px solid rgba(245,158,11,0.35);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    font-weight: 800;
    color: var(--hlo-primary);
    flex-shrink: 0;
    position: relative;
    z-index: 1;
}
.hlo-client-banner-content { flex: 1; min-width: 0; position: relative; z-index: 1; }
.hlo-client-banner-greeting { font-size: 0.6875rem; font-weight: 600; color: rgba(255,255,255,0.45); text-transform: uppercase; letter-spacing: 0.06em; }
.hlo-client-banner-name { font-size: 1.375rem; font-weight: 800; color: #fff; margin-top: 2px; }
.hlo-client-banner-sub { font-size: 0.75rem; color: rgba(255,255,255,0.45); margin-top: 2px; }
.hlo-client-banner-actions { display: flex; align-items: center; gap: 0.75rem; position: relative; z-index: 1; flex-shrink: 0; }

/* ─── Status Pill Badges ─────────────────────────────────────────────────── */
.hlo-badge { display: inline-flex; align-items: center; gap: 0.3rem; padding: 0.2rem 0.65rem; border-radius: var(--hlo-radius-full); font-size: 0.6875rem; font-weight: 600; white-space: nowrap; }
.hlo-badge-dot { width: 6px; height: 6px; border-radius: 50%; display: inline-block; }
.hlo-badge--amber  { background: var(--hlo-primary-light); color: var(--hlo-primary-dark); }
.hlo-badge--green  { background: var(--hlo-success-light); color: #065F46; }
.hlo-badge--blue   { background: var(--hlo-info-light);    color: #1E40AF; }
.hlo-badge--gray   { background: var(--hlo-gray-bg);       color: var(--hlo-dark-2); }
.hlo-badge--red    { background: var(--hlo-danger-light);  color: #991B1B; }
.hlo-badge--violet { background: var(--hlo-violet-light);  color: #5B21B6; }
.hlo-badge--live   { background: var(--hlo-success-light); color: #065F46; animation: pulse-badge 2s infinite; }

@keyframes pulse-badge { 0%,100% { opacity:1; } 50% { opacity:0.7; } }
@keyframes pulse { 0%,100% { transform:scale(1); opacity:1; } 50% { transform:scale(1.15); opacity:0.8; } }

/* ─── Buttons ────────────────────────────────────────────────────────────── */
.hlo-btn {
    display: inline-flex; align-items: center; gap: 0.4rem;
    padding: 0.5rem 1rem; border-radius: var(--hlo-radius-md);
    font-size: 0.8125rem; font-weight: 600; cursor: pointer;
    border: none; transition: var(--hlo-transition); text-decoration: none;
}
.hlo-btn--primary { background: var(--hlo-primary); color: #fff; }
.hlo-btn--primary:hover { background: var(--hlo-primary-dark); color: #fff; transform: translateY(-1px); box-shadow: 0 4px 12px rgba(245,158,11,0.35); }
.hlo-btn--ghost { background: transparent; color: var(--hlo-gray); border: 1px solid var(--hlo-gray-border); }
.hlo-btn--ghost:hover { background: var(--hlo-gray-bg); color: var(--hlo-dark); }
.hlo-btn--danger { background: var(--hlo-danger); color: #fff; }
.hlo-btn--sm { padding: 0.35rem 0.75rem; font-size: 0.75rem; }
.hlo-btn--lg { padding: 0.75rem 1.5rem; font-size: 0.9375rem; border-radius: var(--hlo-radius-lg); }

/* ─── Load / Shipment Cards ──────────────────────────────────────────────── */
.hlo-load-card {
    background: var(--hlo-white);
    border: 1px solid var(--hlo-gray-border);
    border-radius: var(--hlo-radius-xl);
    padding: 1rem 1.25rem;
    transition: var(--hlo-transition);
    cursor: pointer;
}
.hlo-load-card:hover { border-color: var(--hlo-primary); box-shadow: 0 0 0 2px var(--hlo-primary-muted); }
.hlo-load-card-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.625rem; }
.hlo-load-card-id { font-size: 0.6875rem; font-family: monospace; color: var(--hlo-gray-light); font-weight: 600; }
.hlo-load-card-route { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.5rem; }
.hlo-load-card-city { font-size: 0.9375rem; font-weight: 700; color: var(--hlo-dark); }
.hlo-load-card-arrow { color: var(--hlo-gray-light); }
.hlo-load-card-meta { display: flex; align-items: center; gap: 1rem; font-size: 0.75rem; color: var(--hlo-gray); flex-wrap: wrap; }
.hlo-load-card-rate { font-size: 1rem; font-weight: 700; color: var(--hlo-dark); }

/* ─── Progress / Tracking Timeline ──────────────────────────────────────── */
.hlo-timeline { display: flex; flex-direction: column; gap: 0; }
.hlo-timeline-item { display: flex; gap: 1rem; position: relative; }
.hlo-timeline-item:not(:last-child)::before {
    content: '';
    position: absolute;
    left: 0.5625rem;
    top: 1.375rem;
    bottom: -0.5rem;
    width: 2px;
    background: var(--hlo-gray-border);
}
.hlo-timeline-dot {
    width: 1.125rem; height: 1.125rem;
    border-radius: 50%; flex-shrink: 0;
    border: 2px solid var(--hlo-gray-border);
    background: var(--hlo-white);
    margin-top: 0.125rem;
    position: relative; z-index: 1;
}
.hlo-timeline-dot--done   { background: var(--hlo-success); border-color: var(--hlo-success); }
.hlo-timeline-dot--active { background: var(--hlo-primary); border-color: var(--hlo-primary); animation: pulse 1.5s infinite; }
.hlo-timeline-content { flex: 1; padding-bottom: 1.25rem; }
.hlo-timeline-label { font-size: 0.8125rem; font-weight: 600; color: var(--hlo-dark); }
.hlo-timeline-sub { font-size: 0.75rem; color: var(--hlo-gray-light); margin-top: 2px; }

/* ─── Status Progress Bar ────────────────────────────────────────────────── */
.hlo-progress-bar { height: 6px; 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: var(--hlo-primary); transition: width 0.4s ease; }
.hlo-progress-fill--green  { background: var(--hlo-success); }
.hlo-progress-fill--blue   { background: var(--hlo-info); }

/* ─── Status Breakdown Row ───────────────────────────────────────────────── */
.hlo-status-row { display: flex; align-items: center; gap: 0.75rem; padding: 0.5rem 0; }
.hlo-status-row + .hlo-status-row { border-top: 1px solid var(--hlo-gray-bg); }
.hlo-status-bar-wrap { flex: 1; }
.hlo-status-count { font-size: 0.875rem; font-weight: 700; color: var(--hlo-dark); min-width: 2rem; text-align: right; }

/* ─── Modal Overlay ──────────────────────────────────────────────────────── */
.hlo-modal-backdrop {
    position: fixed; inset: 0;
    background: rgba(0,0,0,0.45);
    backdrop-filter: blur(3px);
    z-index: 50;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}
.hlo-modal {
    background: var(--hlo-white);
    border-radius: var(--hlo-radius-2xl);
    box-shadow: var(--hlo-shadow-lg);
    width: 100%;
    max-width: 640px;
    max-height: 90vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
.hlo-modal-header {
    padding: 1.25rem 1.5rem;
    border-bottom: 1px solid var(--hlo-gray-border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-shrink: 0;
}
.hlo-modal-title { font-size: 1rem; font-weight: 700; color: var(--hlo-dark); }
.hlo-modal-close { width: 2rem; height: 2rem; border-radius: var(--hlo-radius-md); border: none; background: var(--hlo-gray-bg); cursor: pointer; display: flex; align-items: center; justify-content: center; color: var(--hlo-gray); transition: var(--hlo-transition); }
.hlo-modal-close:hover { background: var(--hlo-gray-border); color: var(--hlo-dark); }
.hlo-modal-tabs { display: flex; gap: 0; border-bottom: 1px solid var(--hlo-gray-border); padding: 0 1.5rem; flex-shrink: 0; }
.hlo-modal-tab { padding: 0.75rem 1rem; font-size: 0.8125rem; font-weight: 600; color: var(--hlo-gray); border-bottom: 2px solid transparent; cursor: pointer; margin-bottom: -1px; transition: var(--hlo-transition); white-space: nowrap; }
.hlo-modal-tab:hover { color: var(--hlo-dark); }
.hlo-modal-tab.active { color: var(--hlo-primary-dark); border-color: var(--hlo-primary); }
.hlo-modal-body { flex: 1; overflow-y: auto; padding: 1.5rem; }

/* ─── Wizard Steps ───────────────────────────────────────────────────────── */
.hlo-wizard-header {
    display: flex;
    align-items: center;
    padding: 1.25rem 2rem;
    border-bottom: 1px solid var(--hlo-gray-border);
    background: var(--hlo-white);
    position: sticky;
    top: 0;
    z-index: 10;
}
.hlo-wizard-steps { display: flex; align-items: center; gap: 0; flex: 1; }
.hlo-wizard-step { display: flex; align-items: center; gap: 0.5rem; }
.hlo-wizard-step-connector { flex: 1; height: 1px; background: var(--hlo-gray-border); margin: 0 0.5rem; min-width: 2rem; }
.hlo-wizard-step-connector.done { background: var(--hlo-primary); }
.hlo-wizard-step-num {
    width: 2rem; height: 2rem; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 0.8125rem; font-weight: 700;
    border: 2px solid var(--hlo-gray-border);
    color: var(--hlo-gray-light);
    background: var(--hlo-white);
    transition: var(--hlo-transition);
    flex-shrink: 0;
}
.hlo-wizard-step-num.active { border-color: var(--hlo-primary); color: var(--hlo-primary-dark); background: var(--hlo-primary-light); }
.hlo-wizard-step-num.done   { border-color: var(--hlo-primary); background: var(--hlo-primary); color: #fff; }
.hlo-wizard-step-label { font-size: 0.8125rem; font-weight: 600; color: var(--hlo-gray-light); transition: var(--hlo-transition); white-space: nowrap; }
.hlo-wizard-step-label.active { color: var(--hlo-dark); }
.hlo-wizard-step-label.done   { color: var(--hlo-primary-dark); }
.hlo-wizard-body { max-width: 640px; margin: 0 auto; padding: 2.5rem 1.5rem; }
.hlo-wizard-title { font-size: 1.75rem; font-weight: 800; color: var(--hlo-dark); margin-bottom: 0.375rem; }
.hlo-wizard-subtitle { font-size: 0.875rem; color: var(--hlo-gray); margin-bottom: 2rem; }
.hlo-wizard-footer {
    display: flex; justify-content: space-between; align-items: center;
    padding: 1.25rem 2rem;
    border-top: 1px solid var(--hlo-gray-border);
    background: var(--hlo-white);
    position: sticky; bottom: 0; z-index: 10;
}

/* ─── Form Controls ──────────────────────────────────────────────────────── */
.hlo-form-group { margin-bottom: 1.25rem; }
.hlo-form-label { font-size: 0.8125rem; font-weight: 600; color: var(--hlo-dark); margin-bottom: 0.375rem; display: block; }
.hlo-form-label span { color: var(--hlo-danger); margin-left: 2px; }
.hlo-form-input {
    width: 100%; padding: 0.625rem 0.875rem;
    border: 1.5px solid var(--hlo-gray-border);
    border-radius: var(--hlo-radius-md);
    font-size: 0.875rem; color: var(--hlo-dark);
    background: var(--hlo-white);
    transition: var(--hlo-transition);
    outline: none;
    font-family: var(--hlo-font);
}
.hlo-form-input:focus { border-color: var(--hlo-primary); box-shadow: 0 0 0 3px var(--hlo-primary-muted); }
.hlo-form-input::placeholder { color: var(--hlo-gray-light); }
.hlo-form-input[disabled] { background: var(--hlo-gray-bg); color: var(--hlo-gray); cursor: not-allowed; }
.hlo-form-textarea { resize: vertical; min-height: 80px; }
.hlo-form-select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236B7280' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 0.875rem center; padding-right: 2.25rem; }
.hlo-form-hint { font-size: 0.75rem; color: var(--hlo-gray-light); margin-top: 0.25rem; }
.hlo-form-error { font-size: 0.75rem; color: var(--hlo-danger); margin-top: 0.25rem; }
.hlo-form-row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.hlo-form-row-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 1rem; }

/* ─── Service Speed Cards ────────────────────────────────────────────────── */
.hlo-speed-cards { display: grid; grid-template-columns: repeat(3,1fr); gap: 0.875rem; margin-bottom: 1.5rem; }
.hlo-speed-card {
    border: 2px solid var(--hlo-gray-border);
    border-radius: var(--hlo-radius-lg);
    padding: 1rem;
    cursor: pointer;
    transition: var(--hlo-transition);
    background: var(--hlo-white);
}
.hlo-speed-card:hover { border-color: var(--hlo-primary); background: var(--hlo-primary-muted); }
.hlo-speed-card.selected { border-color: var(--hlo-primary); background: var(--hlo-primary-light); }
.hlo-speed-card.selected--rush { border-color: var(--hlo-primary); }
.hlo-speed-card.selected--direct { border-color: var(--hlo-danger); background: var(--hlo-danger-light); }
.hlo-speed-icon { font-size: 1.25rem; margin-bottom: 0.5rem; }
.hlo-speed-name { font-size: 0.9375rem; font-weight: 700; color: var(--hlo-dark); }
.hlo-speed-desc { font-size: 0.75rem; color: var(--hlo-gray); margin-top: 2px; }
.hlo-speed-rate { font-size: 0.6875rem; font-weight: 700; color: var(--hlo-primary-dark); margin-top: 6px; }
.hlo-speed-card.selected--direct .hlo-speed-rate { color: var(--hlo-danger); }

/* ─── Package Builder ────────────────────────────────────────────────────── */
.hlo-pkg-row { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.5rem; background: var(--hlo-gray-bg); border-radius: var(--hlo-radius-md); padding: 0.625rem 0.75rem; }
.hlo-pkg-row select, .hlo-pkg-row input { background: var(--hlo-white); border: 1.5px solid var(--hlo-gray-border); border-radius: var(--hlo-radius-sm); padding: 0.35rem 0.5rem; font-size: 0.8125rem; color: var(--hlo-dark); }
.hlo-pkg-dim-label { font-size: 0.6875rem; color: var(--hlo-gray-light); font-weight: 600; }
.hlo-pkg-add { font-size: 0.8125rem; font-weight: 600; color: var(--hlo-primary-dark); cursor: pointer; display: inline-flex; align-items: center; gap: 0.25rem; border: none; background: none; padding: 0.375rem 0; transition: var(--hlo-transition); }
.hlo-pkg-add:hover { color: var(--hlo-primary); }

/* ─── Review Summary Card ────────────────────────────────────────────────── */
.hlo-review-card {
    border: 1px solid var(--hlo-gray-border);
    border-radius: var(--hlo-radius-xl);
    overflow: hidden;
    margin-bottom: 1rem;
}
.hlo-review-section { padding: 1rem 1.25rem; }
.hlo-review-section + .hlo-review-section { border-top: 1px solid var(--hlo-gray-bg); }
.hlo-review-label { font-size: 0.6875rem; font-weight: 700; color: var(--hlo-gray-light); text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 0.375rem; }
.hlo-review-value { font-size: 0.875rem; color: var(--hlo-dark); font-weight: 500; }
.hlo-review-route { display: flex; flex-direction: column; gap: 0.375rem; }
.hlo-review-route-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; margin-top: 5px; }
.hlo-review-route-dot--pickup   { background: var(--hlo-success); }
.hlo-review-route-dot--delivery { background: var(--hlo-danger); }
.hlo-pricing-row { display: flex; justify-content: space-between; align-items: center; padding: 0.4rem 0; }
.hlo-pricing-row + .hlo-pricing-row { border-top: 1px solid var(--hlo-gray-bg); }
.hlo-pricing-label { font-size: 0.8125rem; color: var(--hlo-gray); }
.hlo-pricing-value { font-size: 0.8125rem; font-weight: 600; color: var(--hlo-dark); }
.hlo-pricing-total { padding: 0.875rem 0; margin-top: 0.25rem; border-top: 2px solid var(--hlo-gray-border); }
.hlo-pricing-total-label { font-size: 0.875rem; color: var(--hlo-dark); font-weight: 600; }
.hlo-pricing-total-value { font-size: 1.5rem; font-weight: 800; color: var(--hlo-dark); }

/* ─── Table ──────────────────────────────────────────────────────────────── */
.hlo-table-wrap { overflow-x: auto; }
.hlo-table { width: 100%; border-collapse: collapse; font-size: 0.8125rem; }
.hlo-table th { padding: 0.625rem 1rem; text-align: left; font-size: 0.6875rem; font-weight: 700; color: var(--hlo-gray-light); text-transform: uppercase; letter-spacing: 0.05em; border-bottom: 1px solid var(--hlo-gray-border); background: var(--hlo-gray-bg); }
.hlo-table td { padding: 0.875rem 1rem; border-bottom: 1px solid var(--hlo-gray-bg); vertical-align: middle; }
.hlo-table tr:hover td { background: rgba(245,158,11,0.02); }
.hlo-table tr:last-child td { border-bottom: none; }

/* ─── Invoice Card ───────────────────────────────────────────────────────── */
.hlo-invoice-row { display: flex; align-items: center; gap: 1rem; padding: 1rem 1.25rem; border-bottom: 1px solid var(--hlo-gray-bg); transition: var(--hlo-transition); cursor: pointer; }
.hlo-invoice-row:last-child { border-bottom: none; }
.hlo-invoice-row:hover { background: var(--hlo-gray-bg); }
.hlo-invoice-icon { width: 2.25rem; height: 2.25rem; border-radius: var(--hlo-radius-md); background: var(--hlo-info-light); display: flex; align-items: center; justify-content: center; color: var(--hlo-info); flex-shrink: 0; }
.hlo-invoice-info { flex: 1; min-width: 0; }
.hlo-invoice-num { font-size: 0.875rem; font-weight: 700; color: var(--hlo-dark); }
.hlo-invoice-meta { font-size: 0.75rem; color: var(--hlo-gray-light); margin-top: 1px; }
.hlo-invoice-amount { font-size: 1rem; font-weight: 700; color: var(--hlo-dark); }
.hlo-invoice-detail { background: var(--hlo-gray-bg); padding: 1rem 1.25rem 1rem 3.5rem; border-bottom: 1px solid var(--hlo-gray-border); font-size: 0.8125rem; }

/* ─── Profile Tabs ───────────────────────────────────────────────────────── */
.hlo-profile-nav { display: flex; flex-direction: column; gap: 0.25rem; }
.hlo-profile-nav-item { display: flex; align-items: center; gap: 0.625rem; padding: 0.625rem 0.875rem; border-radius: var(--hlo-radius-md); font-size: 0.875rem; font-weight: 500; color: var(--hlo-gray); cursor: pointer; transition: var(--hlo-transition); border: none; background: none; text-align: left; width: 100%; }
.hlo-profile-nav-item:hover { background: var(--hlo-gray-bg); color: var(--hlo-dark); }
.hlo-profile-nav-item.active { background: var(--hlo-primary-light); color: var(--hlo-primary-dark); font-weight: 600; }
.hlo-profile-section { background: var(--hlo-white); border: 1px solid var(--hlo-gray-border); border-radius: var(--hlo-radius-xl); padding: 1.5rem; }
.hlo-profile-section-title { font-size: 0.6875rem; font-weight: 700; color: var(--hlo-gray-light); text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 1rem; display: flex; align-items: center; gap: 0.5rem; }

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

/* ─── Map Container ──────────────────────────────────────────────────────── */
#client-map { height: 300px; border-radius: 0; }
.leaflet-container { border-radius: 0; }

/* ─── Search & Filters ───────────────────────────────────────────────────── */
.hlo-filters { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; margin-bottom: 1rem; }
.hlo-search-wrap { position: relative; flex: 1; min-width: 200px; }
.hlo-search-icon { position: absolute; left: 0.75rem; top: 50%; transform: translateY(-50%); color: var(--hlo-gray-light); pointer-events: none; }
.hlo-search-input { padding-left: 2.25rem; }
.hlo-filter-select { min-width: 130px; }

/* ─── Top Route Row ──────────────────────────────────────────────────────── */
.hlo-route-row { display: flex; align-items: center; justify-content: space-between; padding: 0.625rem 0; }
.hlo-route-row + .hlo-route-row { border-top: 1px solid var(--hlo-gray-bg); }
.hlo-route-label { font-size: 0.8125rem; font-weight: 500; color: var(--hlo-dark); }
.hlo-route-count { font-size: 0.8125rem; color: var(--hlo-gray-light); }

/* ─── Responsive Layout Classes ──────────────────────────────────────────── */

/* Dashboard: 2-col on desktop, 1-col on mobile */
.hlo-dashboard-grid {
    display: grid;
    grid-template-columns: 1fr 320px;
    gap: 1.25rem;
    align-items: start;
}

/* Profile: sidebar + content on desktop, stacked on mobile */
.hlo-profile-grid {
    display: grid;
    grid-template-columns: 200px 1fr;
    gap: 1.5rem;
    align-items: start;
}

/* Stat grid: always 4-col on desktop, adapts on mobile */
.hlo-stat-grid { display: grid; gap: 1rem; }
.hlo-stat-grid--4 { grid-template-columns: repeat(4, 1fr); }
.hlo-stat-grid--3 { grid-template-columns: repeat(3, 1fr); }

/* Modal detail grid */
.hlo-modal-detail-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; }
.hlo-modal-detail-grid--3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }

/* ─── Responsive ─────────────────────────────────────────────────────────── */

/* Tablet (≤ 1024px) */
@media (max-width: 1024px) {
    .hlo-dashboard-grid { grid-template-columns: 1fr; }
    .hlo-stat-grid--4   { grid-template-columns: repeat(2, 1fr); }
}

/* Mobile (≤ 768px) */
@media (max-width: 768px) {
    /* Grids */
    .hlo-grid-4         { grid-template-columns: repeat(2, 1fr); }
    .hlo-grid-3         { grid-template-columns: repeat(2, 1fr); }
    .hlo-grid-2         { grid-template-columns: 1fr; }
    .hlo-stat-grid--4   { grid-template-columns: repeat(2, 1fr); }
    .hlo-stat-grid--3   { grid-template-columns: repeat(2, 1fr); }
    .hlo-profile-grid   { grid-template-columns: 1fr; }
    .hlo-dashboard-grid { grid-template-columns: 1fr; }
    .hlo-form-row-2     { grid-template-columns: 1fr; }
    .hlo-form-row-3     { grid-template-columns: 1fr; }
    .hlo-modal-detail-grid   { grid-template-columns: 1fr; }
    .hlo-modal-detail-grid--3 { grid-template-columns: 1fr 1fr; }
    .hlo-speed-cards    { grid-template-columns: 1fr; }

    /* Banner */
    .hlo-client-banner         { flex-wrap: wrap; padding: 1.25rem; gap: 0.875rem; }
    .hlo-client-banner-actions { flex-wrap: wrap; gap: 0.5rem; width: 100%; }
    .hlo-client-banner-actions .hlo-btn { flex: 1; justify-content: center; }

    /* Wizard */
    .hlo-wizard-header { padding: 1rem; }
    .hlo-wizard-body   { padding: 1.5rem 1rem 5rem; }
    .hlo-wizard-footer { padding: 1rem; }
    .hlo-wizard-step-label { display: none; }
    .hlo-wizard-step-connector { min-width: 1rem; }
    .hlo-wizard-title    { font-size: 1.375rem; }

    /* Modal */
    .hlo-modal-tabs { overflow-x: auto; -webkit-overflow-scrolling: touch; flex-wrap: nowrap; white-space: nowrap; }
    .hlo-modal      { max-height: 95vh; border-radius: var(--hlo-radius-xl) var(--hlo-radius-xl) 0 0; margin-top: auto; }
    .hlo-modal-backdrop { align-items: flex-end; padding: 0; }

    /* Filters */
    .hlo-filters { flex-direction: column; align-items: stretch; }
    .hlo-search-wrap { min-width: 100%; }
    .hlo-filter-select { width: 100%; }

    /* Stat cards — tighter on mobile */
    .hlo-stat { padding: 1rem; }
    .hlo-stat-value { font-size: 1.375rem; }

    /* Table — make horizontally scrollable */
    .hlo-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .hlo-table { min-width: 560px; }

    /* Invoice row */
    .hlo-invoice-row { gap: 0.625rem; }
    .hlo-invoice-amount { font-size: 0.875rem; }

    /* Load card */
    .hlo-load-card-meta { gap: 0.5rem; }

    /* Profile nav — horizontal on mobile */
    .hlo-profile-nav { flex-direction: row; overflow-x: auto; -webkit-overflow-scrolling: touch; flex-wrap: nowrap; gap: 0.25rem; padding-bottom: 0.25rem; }
    .hlo-profile-nav-item { white-space: nowrap; flex-shrink: 0; }

    /* Adjust page spacing */
    .hlo-mb-6 { margin-bottom: 1rem; }
    .hlo-mb-5 { margin-bottom: 0.875rem; }

    /* Filament sidebar hidden on mobile — handled by Filament, just make content full-width */
    #client-map { height: 220px; }
}

/* Small mobile (≤ 480px) */
@media (max-width: 480px) {
    .hlo-stat-grid--4 { grid-template-columns: 1fr 1fr; }
    .hlo-grid-4       { grid-template-columns: 1fr 1fr; }
    .hlo-grid-3       { grid-template-columns: 1fr 1fr; }
    .hlo-modal-detail-grid--3 { grid-template-columns: 1fr; }
    .hlo-client-avatar { width: 2.75rem; height: 2.75rem; font-size: 1rem; }
    .hlo-wizard-title  { font-size: 1.25rem; }
    .hlo-card-body     { padding: 1rem; }
    .hlo-card-header   { padding: 0.875rem 1rem; }
}

/* ─── Touch & Mobile UX ──────────────────────────────────────────────────── */

/* Minimum 44px touch targets */
.hlo-btn                  { min-height: 40px; }
.hlo-profile-nav-item     { min-height: 40px; }
.hlo-modal-tab            { min-height: 40px; padding-top: 0.625rem; padding-bottom: 0.625rem; }

/* Active press feedback on touch */
@media (hover: none) and (pointer: coarse) {
    .hlo-load-card:active   { transform: scale(0.99); }
    .hlo-btn:active         { opacity: 0.85; }
    .hlo-invoice-row:active { background: var(--hlo-gray-bg); }
    .hlo-stat:hover         { transform: none; box-shadow: var(--hlo-shadow-sm); }
}

/* Prevent text overflow in compact views */
.hlo-load-card-city { max-width: 140px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Speed card touch — full tap area */
.hlo-speed-card { -webkit-tap-highlight-color: transparent; }

/* Scrollable filter row on mobile */
@media (max-width: 640px) {
    .hlo-filters { flex-direction: column; }
    .hlo-filters > * { width: 100%; }
    .hlo-filters .hlo-filter-select { width: 100%; }

    /* Date pair: keep inline */
    .hlo-filters input[type="date"] { flex: 1; min-width: 0; }

    /* Tabs don't wrap */
    .hlo-modal-tabs { gap: 0; }

    /* Wizard footer full-width buttons */
    .hlo-wizard-footer { gap: 0.625rem; }
    .hlo-wizard-footer .hlo-btn--lg { flex: 1; justify-content: center; }
    .hlo-wizard-footer .hlo-btn--ghost { min-width: 80px; }

    /* Profile nav — ensure visible scroll hint */
    .hlo-profile-nav::after {
        content: '';
        flex-shrink: 0;
        width: 1rem;
    }

    /* Invoice filter tabs wrap on very small */
    .hlo-invoice-filter-tabs { flex-wrap: wrap; gap: 0.375rem; }

    /* Billing alert full width */
    .hlo-client-banner-actions .hlo-badge { flex-shrink: 0; }
}

/* ─── Filament panel body padding fix on mobile ──────────────────────────── */
@media (max-width: 768px) {
    /* Filament wraps content in fi-main — reduce padding on mobile */
    .fi-main { padding: 1rem !important; }
    .fi-page-header { padding: 0 !important; }
}