:root {
    --pf-bg-body: #f6f7f9;
    --pf-bg-sidebar: #ffffff;
    --pf-bg-card: #ffffff;
    --pf-bg-header: rgba(255,255,255,0.8);
    --pf-bg-input: #f1f5f9;
    --pf-bg-hover: #f1f5f9;
    --pf-bg-table-stripe: #f8fafc;
    --pf-bg-main: #f6f7f9;

    --pf-border: #e2e8f0;
    --pf-border-light: #f1f5f9;
    --pf-ring: rgba(0,0,0,0.05);

    --pf-text-primary: #0f172a;
    --pf-text-secondary: #475569;
    --pf-text-muted: #94a3b8;
    --pf-text-heading: #1e293b;

    --pf-shadow-sm: 0 1px 2px rgba(0,0,0,0.04);
    --pf-shadow-md: 0 4px 12px rgba(0,0,0,0.06);
    --pf-shadow-lg: 0 8px 24px rgba(0,0,0,0.08);
    --pf-shadow-xl: 0 16px 48px rgba(0,0,0,0.1);

    --pf-scrollbar-thumb: #cbd5e1;
    --pf-scrollbar-hover: #94a3b8;
}

.dark {
    --pf-bg-body: #0b0f19;
    --pf-bg-sidebar: #0f1525;
    --pf-bg-card: #141b2d;
    --pf-bg-header: rgba(15,21,37,0.85);
    --pf-bg-input: #1a2236;
    --pf-bg-hover: #1a2236;
    --pf-bg-table-stripe: #111827;
    --pf-bg-main: #0f1525;

    --pf-border: #1e293b;
    --pf-border-light: #1e293b;
    --pf-ring: rgba(255,255,255,0.04);

    --pf-text-primary: #f1f5f9;
    --pf-text-secondary: #94a3b8;
    --pf-text-muted: #64748b;
    --pf-text-heading: #f8fafc;

    --pf-shadow-sm: 0 1px 2px rgba(0,0,0,0.2);
    --pf-shadow-md: 0 4px 12px rgba(0,0,0,0.3);
    --pf-shadow-lg: 0 8px 24px rgba(0,0,0,0.4);
    --pf-shadow-xl: 0 16px 48px rgba(0,0,0,0.5);

    --pf-scrollbar-thumb: #334155;
    --pf-scrollbar-hover: #475569;
}

[x-cloak] { display: none !important; }

* { scrollbar-width: thin; scrollbar-color: var(--pf-scrollbar-thumb) transparent; }
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--pf-scrollbar-thumb); border-radius: 999px; }
::-webkit-scrollbar-thumb:hover { background: var(--pf-scrollbar-hover); }

body {
    background: var(--pf-bg-body);
    color: var(--pf-text-primary);
    font-feature-settings: 'cv02', 'cv03', 'cv04', 'cv11';
}

.pf-sidebar {
    background: var(--pf-bg-sidebar);
    border-color: var(--pf-border);
}

.pf-header {
    background: var(--pf-bg-header);
    backdrop-filter: blur(16px) saturate(180%);
    -webkit-backdrop-filter: blur(16px) saturate(180%);
    border-color: var(--pf-border);
}

.pf-card {
    background: var(--pf-bg-card);
    border: 1px solid var(--pf-border);
    border-radius: 16px;
    box-shadow: var(--pf-shadow-sm);
    transition: box-shadow 0.2s, border-color 0.2s;
}
.pf-card:hover { box-shadow: var(--pf-shadow-md); }

.pf-main {
    background: var(--pf-bg-main);
}

.pf-input {
    background: var(--pf-bg-input);
    border: 1px solid var(--pf-border);
    color: var(--pf-text-primary);
    border-radius: 12px;
    padding: 10px 14px;
    font-size: 14px;
    transition: border-color 0.15s, box-shadow 0.15s;
    outline: none;
    width: 100%;
}
.pf-input:focus {
    border-color: #6c5ce7;
    box-shadow: 0 0 0 3px rgba(108, 92, 231,0.1);
}
.pf-input::placeholder { color: var(--pf-text-muted); }

.pf-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 20px;
    font-size: 14px;
    font-weight: 600;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.15s;
    border: none;
    outline: none;
}

.pf-btn-primary {
    background: linear-gradient(135deg, #6c5ce7, #5a4bd1);
    color: white;
    box-shadow: 0 2px 8px rgba(108, 92, 231,0.3);
}
.pf-btn-primary:hover {
    background: linear-gradient(135deg, #8b7cf0, #6c5ce7);
    box-shadow: 0 4px 16px rgba(108, 92, 231,0.4);
    transform: translateY(-1px);
}

.pf-btn-secondary {
    background: var(--pf-bg-input);
    color: var(--pf-text-secondary);
    border: 1px solid var(--pf-border);
}
.pf-btn-secondary:hover {
    background: var(--pf-bg-hover);
    border-color: #6c5ce7;
    color: #6c5ce7;
}

.pf-btn-danger {
    background: linear-gradient(135deg, #ef4444, #dc2626);
    color: white;
    box-shadow: 0 2px 8px rgba(239,68,68,0.3);
}
.pf-btn-danger:hover {
    box-shadow: 0 4px 16px rgba(239,68,68,0.4);
    transform: translateY(-1px);
}

.pf-btn-success {
    background: linear-gradient(135deg, #10b981, #059669);
    color: white;
    box-shadow: 0 2px 8px rgba(16,185,129,0.3);
}

.pf-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
}
.pf-table thead th {
    background: var(--pf-bg-input);
    color: var(--pf-text-muted);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    padding: 12px 16px;
    text-align: left;
    border-bottom: 1px solid var(--pf-border);
}
.pf-table thead th:first-child { border-radius: 12px 0 0 0; }
.pf-table thead th:last-child { border-radius: 0 12px 0 0; }
.pf-table tbody td {
    padding: 14px 16px;
    font-size: 14px;
    color: var(--pf-text-secondary);
    border-bottom: 1px solid var(--pf-border-light);
    transition: background 0.1s;
}
.pf-table tbody tr:hover td {
    background: var(--pf-bg-hover);
}
.pf-table tbody tr:last-child td { border-bottom: none; }

.pf-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    font-size: 12px;
    font-weight: 600;
    border-radius: 8px;
    white-space: nowrap;
}

.pf-nav-link {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 500;
    color: var(--pf-text-muted);
    transition: all 0.15s;
    position: relative;
}
.pf-nav-link:hover {
    color: var(--pf-text-primary);
    background: var(--pf-bg-hover);
}
.pf-nav-link.active {
    color: #6c5ce7;
    background: rgba(108, 92, 231,0.08);
}
.pf-nav-link.active::before {
    content: '';
    position: absolute;
    left: 0;
    top: 8px;
    bottom: 8px;
    width: 3px;
    border-radius: 0 3px 3px 0;
    background: #6c5ce7;
}

.pf-dropdown {
    background: var(--pf-bg-card);
    border: 1px solid var(--pf-border);
    border-radius: 12px;
    box-shadow: var(--pf-shadow-lg);
    overflow: hidden;
}
.pf-dropdown a,
.pf-dropdown button {
    display: block;
    width: 100%;
    text-align: left;
    padding: 10px 16px;
    font-size: 14px;
    color: var(--pf-text-secondary);
    transition: all 0.1s;
}
.pf-dropdown a:hover,
.pf-dropdown button:hover {
    background: var(--pf-bg-hover);
    color: var(--pf-text-primary);
}

.pf-section-title {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--pf-text-muted);
    padding: 16px 14px 8px;
}

/* ──────────────────────────────────────────────────────────────────
   Collapsible navigation groups (premium SuperAdmin sidebar).
   Used by <x-nav-group> to wrap related x-nav-link items.

   NOTE: `display:flex` is marked !important to defend against the
   Tailwind CDN script (loaded *after* this file) which otherwise
   strips inherited form-element styles from <button> and can leave
   children stacked. Same precaution applied to the icon size.
   ────────────────────────────────────────────────────────────────── */
.pf-nav-group {
    margin-top: 4px;
}
.pf-nav-group + .pf-nav-group {
    margin-top: 2px;
}
.pf-nav-group-header {
    width: 100%;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 10px;
    padding: 8px 10px;
    border-radius: 10px;
    color: var(--pf-text-secondary);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    transition: background-color .15s ease, color .15s ease;
    cursor: pointer;
    user-select: none;
    background: transparent;
    border: 0;
    text-align: left;
    font-family: inherit;
    line-height: 1.2;
}
.pf-nav-group-header:hover {
    background: var(--pf-bg-hover);
    color: var(--pf-text-primary);
}
.pf-nav-group-header-open {
    color: var(--pf-text-primary);
}
.pf-nav-group-icon {
    width: 28px !important;
    height: 28px !important;
    min-width: 28px;
    border-radius: 8px;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0;
    transition: transform .15s ease;
}
.pf-nav-group-header:hover .pf-nav-group-icon {
    transform: scale(1.05);
}
.pf-nav-group-title {
    flex: 1 1 auto;
    min-width: 0;
    text-align: left;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.pf-nav-group-badge {
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    line-height: 1;
    padding: 3px 7px;
    border-radius: 999px;
    letter-spacing: 0;
    flex-shrink: 0;
}
.pf-nav-group-chevron {
    color: var(--pf-text-muted);
    flex-shrink: 0;
}
.pf-nav-group-body {
    padding: 2px 0 4px 4px;
    display: flex;
    flex-direction: column;
    gap: 1px;
}
/* Tighten nested links so they feel like children, not siblings. */
.pf-nav-group-body .pf-nav-link {
    padding: 7px 10px 7px 14px;
    font-size: 13px;
    border-left: 2px solid transparent;
    border-radius: 8px;
}
.pf-nav-group-body .pf-nav-link.active {
    border-left-color: #6c5ce7;
    background: rgba(108, 92, 231, 0.08);
}
.pf-nav-group-body .pf-nav-link.active::before {
    display: none; /* group bar replaces the global left ribbon */
}

.pf-avatar {
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    font-weight: 700;
    font-size: 14px;
}

.pf-theme-toggle {
    position: relative;
    width: 44px;
    height: 24px;
    border-radius: 999px;
    cursor: pointer;
    transition: background 0.3s;
}
.pf-theme-toggle .pf-toggle-knob {
    position: absolute;
    top: 2px;
    width: 20px;
    height: 20px;
    border-radius: 999px;
    background: white;
    box-shadow: 0 1px 3px rgba(0,0,0,0.2);
    transition: transform 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.leaflet-container { background: #f0ede6 !important; }
.dark .leaflet-container { background: #f0ede6 !important; }

@keyframes pf-fade-in {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}
.pf-animate-in { animation: pf-fade-in 0.4s ease-out; }

@keyframes pf-slide-in {
    from { opacity: 0; transform: translateX(-12px); }
    to { opacity: 1; transform: translateX(0); }
}

@keyframes pf-pulse-soft {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.7; }
}
.pf-pulse { animation: pf-pulse-soft 2s ease-in-out infinite; }

@keyframes pf-glow-pulse {
    0%, 100% { box-shadow: 0 0 8px rgba(108, 92, 231,0.15); }
    50% { box-shadow: 0 0 20px rgba(108, 92, 231,0.3); }
}

@keyframes pf-shimmer {
    0% { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}

.pf-glass {
    background: rgba(20, 27, 45, 0.6);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border: 1px solid rgba(255,255,255,0.06);
}
:root:not(.dark) .pf-glass {
    background: rgba(255,255,255,0.7);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border: 1px solid rgba(0,0,0,0.06);
}

.pf-glow { animation: pf-glow-pulse 3s ease-in-out infinite; }

.pf-stat-card {
    background: rgba(20, 27, 45, 0.7);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 14px;
    padding: 10px 16px;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
.pf-stat-card:hover {
    border-color: rgba(108, 92, 231,0.3);
    transform: translateY(-1px);
    box-shadow: 0 8px 24px rgba(0,0,0,0.3);
}
:root:not(.dark) .pf-stat-card {
    background: rgba(255,255,255,0.85);
    border-color: rgba(0,0,0,0.08);
}
:root:not(.dark) .pf-stat-card:hover {
    border-color: rgba(108, 92, 231,0.3);
    box-shadow: 0 8px 24px rgba(0,0,0,0.1);
}

.pf-input-premium {
    background: var(--pf-bg-input);
    border: 1px solid var(--pf-border);
    color: var(--pf-text-primary);
    border-radius: 10px;
    padding: 8px 12px;
    font-size: 13px;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    outline: none;
    width: 100%;
}
.pf-input-premium:focus {
    border-color: #6c5ce7;
    box-shadow: 0 0 0 3px rgba(108, 92, 231,0.12), 0 2px 8px rgba(108, 92, 231,0.08);
}
.pf-input-premium::placeholder { color: var(--pf-text-muted); opacity: 0.6; }

.pf-form-section {
    padding: 12px 16px;
    border-bottom: 1px solid var(--pf-border);
}

.pf-order-row {
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    border-left: 3px solid transparent;
}
.pf-order-row:hover {
    background: var(--pf-bg-hover);
    border-left-color: #6c5ce7;
}

.pf-sidebar-premium {
    background: linear-gradient(180deg, var(--pf-bg-sidebar) 0%, var(--pf-bg-body) 100%);
    border-color: var(--pf-border);
}

.pf-sidebar-link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 12px;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    color: var(--pf-text-muted);
    position: relative;
}
.pf-sidebar-link:hover {
    background: var(--pf-bg-hover);
    color: var(--pf-text-primary);
    transform: scale(1.05);
}
.pf-sidebar-link.active {
    background: linear-gradient(135deg, #6c5ce7, #5a4bd1);
    color: white;
    box-shadow: 0 4px 16px rgba(108, 92, 231,0.35);
}
.pf-sidebar-link.active::after {
    content: '';
    position: absolute;
    right: -8px;
    top: 50%;
    transform: translateY(-50%);
    width: 3px;
    height: 20px;
    border-radius: 3px 0 0 3px;
    background: #6c5ce7;
}

.pf-btn-premium {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 11px 16px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.01em;
    border-radius: 12px;
    background: linear-gradient(135deg, #6c5ce7 0%, #5a4bd1 50%, #dc2626 100%);
    color: white;
    box-shadow: 0 4px 16px rgba(108, 92, 231,0.3), inset 0 1px 0 rgba(255,255,255,0.1);
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    border: none;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}
.pf-btn-premium::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.1), transparent);
    background-size: 200% 100%;
    animation: pf-shimmer 3s ease infinite;
}
.pf-btn-premium:hover {
    transform: translateY(-1px);
    box-shadow: 0 8px 24px rgba(108, 92, 231,0.4), inset 0 1px 0 rgba(255,255,255,0.15);
}
.pf-btn-premium:active {
    transform: scale(0.97);
}
.pf-btn-premium:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
}

.pf-tariff-chip {
    padding: 6px 14px;
    border-radius: 10px;
    font-size: 12px;
    font-weight: 600;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    border: 1px solid transparent;
    cursor: pointer;
    background: var(--pf-bg-input);
    color: var(--pf-text-secondary);
}
.pf-tariff-chip:hover {
    border-color: rgba(108, 92, 231,0.3);
    background: rgba(108, 92, 231,0.06);
}
.pf-tariff-chip.selected {
    background: rgba(108, 92, 231,0.12);
    border-color: #6c5ce7;
    color: #6c5ce7;
    box-shadow: 0 2px 8px rgba(108, 92, 231,0.15);
}

.pf-fare-card {
    background: linear-gradient(135deg, var(--pf-bg-input) 0%, var(--pf-bg-hover) 100%);
    border: 1px solid var(--pf-border);
    border-radius: 12px;
    padding: 12px 14px;
}

/*
 * Override hardcoded dark classes when in light mode.
 * Content pages use gray-800/50, gray-700/50, text-white etc.
 * These overrides ensure they look correct in light mode.
 */
:root:not(.dark) .pf-main .bg-gray-800\/50,
:root:not(.dark) .pf-main .bg-gray-800\/80 {
    background-color: var(--pf-bg-card) !important;
    border-color: var(--pf-border) !important;
}
:root:not(.dark) .pf-main .ring-gray-700\/50,
:root:not(.dark) .pf-main .ring-gray-700\/30 {
    --tw-ring-color: var(--pf-border) !important;
}
:root:not(.dark) .pf-main .border-gray-700\/50,
:root:not(.dark) .pf-main .border-gray-700,
:root:not(.dark) .pf-main .divide-gray-700\/50 > :not([hidden]) ~ :not([hidden]) {
    border-color: var(--pf-border) !important;
}
:root:not(.dark) .pf-main .text-white {
    color: var(--pf-text-heading) !important;
}
:root:not(.dark) .pf-main .text-gray-400 {
    color: var(--pf-text-secondary) !important;
}
:root:not(.dark) .pf-main .text-gray-500 {
    color: var(--pf-text-muted) !important;
}
:root:not(.dark) .pf-main .text-gray-300 {
    color: var(--pf-text-secondary) !important;
}
:root:not(.dark) .pf-main .bg-gray-900\/50,
:root:not(.dark) .pf-main .bg-gray-900 {
    background-color: var(--pf-bg-body) !important;
}
:root:not(.dark) .pf-main .bg-gray-700\/50,
:root:not(.dark) .pf-main .bg-gray-700\/30 {
    background-color: var(--pf-bg-hover) !important;
}
:root:not(.dark) .pf-main .hover\:bg-gray-700\/30:hover {
    background-color: var(--pf-bg-hover) !important;
}
:root:not(.dark) .pf-main input,
:root:not(.dark) .pf-main select,
:root:not(.dark) .pf-main textarea {
    background-color: var(--pf-bg-input) !important;
    border-color: var(--pf-border) !important;
    color: var(--pf-text-primary) !important;
}
:root:not(.dark) .pf-main input::placeholder,
:root:not(.dark) .pf-main textarea::placeholder {
    color: var(--pf-text-muted) !important;
}
:root:not(.dark) .pf-main table thead th {
    background-color: var(--pf-bg-input) !important;
    color: var(--pf-text-muted) !important;
}
:root:not(.dark) .pf-main table tbody td {
    border-color: var(--pf-border-light) !important;
    color: var(--pf-text-secondary) !important;
}
:root:not(.dark) .pf-main table tbody tr:hover td {
    background-color: var(--pf-bg-hover) !important;
}
:root:not(.dark) .pf-main .bg-orange-500\/10 {
    background-color: rgba(108, 92, 231,0.06) !important;
}
:root:not(.dark) .pf-main .bg-emerald-500\/10 {
    background-color: rgba(16,185,129,0.06) !important;
}
:root:not(.dark) .pf-main .bg-blue-500\/10 {
    background-color: rgba(59,130,246,0.06) !important;
}
:root:not(.dark) .pf-main .bg-red-500\/10 {
    background-color: rgba(239,68,68,0.06) !important;
}
:root:not(.dark) .pf-main .bg-violet-500\/10 {
    background-color: rgba(139,92,246,0.06) !important;
}
:root:not(.dark) .pf-main .shadow-2xl {
    box-shadow: var(--pf-shadow-lg) !important;
}
:root:not(.dark) .pf-main a.bg-orange-500:hover,
:root:not(.dark) .pf-main button.bg-orange-500:hover {
    background-color: #5a4bd1 !important;
}
:root:not(.dark) .pf-main a.bg-emerald-500:hover,
:root:not(.dark) .pf-main button.bg-emerald-500:hover {
    background-color: #059669 !important;
}

/* ──────────────────────────────────────────────────────────────────
   FLEET DISPATCHER MODE — typography + spacing boost.

   Activated only when <body data-pf-app="fleet"> is present, so other
   panels (admin, agent, partner, delivery) are untouched. Dispatchers
   stare at this UI for an entire shift — they need every label,
   number, status and phone to read effortlessly from a normal sitting
   distance, even on smaller laptop screens.

   Strategy:
     • Bump every Tailwind text-* utility one step up.
     • Enlarge table rows, nav links, headers, badges, dropdowns.
     • Add more vertical air around critical info blocks.
     • Promote brand colours on the bits a dispatcher actually scans:
       order amount, status badges, driver phone, time, source chip.

   Everything is `!important` because the source markup uses Tailwind
   utility classes injected by the CDN script (which loads AFTER this
   stylesheet) — without !important the bumped sizes lose specificity.
   ────────────────────────────────────────────────────────────────── */

[data-pf-app="fleet"] {
    /* Friendly base — body line height & weight for long reading sessions. */
    font-size: 15px;
    line-height: 1.55;
}

/* ── Sidebar ────────────────────────────────────────────────────── */
[data-pf-app="fleet"] .pf-sidebar { font-size: 15px; }
[data-pf-app="fleet"] .pf-nav-link {
    font-size: 15.5px !important;
    font-weight: 600 !important;
    padding: 12px 16px !important;
    gap: 14px !important;
    letter-spacing: 0.005em;
}
[data-pf-app="fleet"] .pf-nav-link svg,
[data-pf-app="fleet"] .pf-nav-link .w-5 {
    width: 22px !important;
    height: 22px !important;
}
[data-pf-app="fleet"] .pf-nav-link.active {
    background: linear-gradient(90deg, rgba(108, 92, 231,0.16) 0%, rgba(108, 92, 231,0.04) 100%) !important;
}
[data-pf-app="fleet"] .pf-section-title {
    font-size: 12.5px !important;
    font-weight: 800 !important;
    padding: 22px 14px 10px !important;
    color: var(--pf-text-secondary) !important;
}

/* Sidebar brand block */
[data-pf-app="fleet"] aside.pf-sidebar .text-lg { font-size: 20px !important; }
[data-pf-app="fleet"] aside.pf-sidebar .text-\[9px\] { font-size: 11px !important; letter-spacing: 0.12em !important; }

/* ── Header ─────────────────────────────────────────────────────── */
[data-pf-app="fleet"] .pf-header { height: 68px !important; padding-inline: 28px !important; }
[data-pf-app="fleet"] .pf-header h1 {
    font-size: 22px !important;
    font-weight: 700 !important;
    letter-spacing: -0.005em;
}
[data-pf-app="fleet"] .pf-header .text-sm { font-size: 15px !important; }
[data-pf-app="fleet"] .pf-header .text-xs { font-size: 12.5px !important; }

/* User pill */
[data-pf-app="fleet"] .pf-header .pf-avatar,
[data-pf-app="fleet"] .pf-header img.w-8 {
    width: 38px !important;
    height: 38px !important;
    font-size: 16px !important;
}

/* ── Headings inside content ────────────────────────────────────── */
[data-pf-app="fleet"] .pf-main h1 { font-size: 26px !important; font-weight: 800 !important; }
[data-pf-app="fleet"] .pf-main h2 { font-size: 22px !important; font-weight: 800 !important; }
[data-pf-app="fleet"] .pf-main h3 { font-size: 18px !important; font-weight: 700 !important; }
[data-pf-app="fleet"] .pf-main h4 { font-size: 16px !important; font-weight: 700 !important; }

/* ── Generic Tailwind text utility bump (one notch up) ──────────── */
[data-pf-app="fleet"] .pf-main .text-\[9px\]  { font-size: 11px !important; }
[data-pf-app="fleet"] .pf-main .text-\[10px\] { font-size: 12.5px !important; }
[data-pf-app="fleet"] .pf-main .text-\[11px\] { font-size: 13px !important; }
[data-pf-app="fleet"] .pf-main .text-\[12px\] { font-size: 14px !important; }
[data-pf-app="fleet"] .pf-main .text-xs   { font-size: 13.5px !important; line-height: 1.5 !important; }
[data-pf-app="fleet"] .pf-main .text-sm   { font-size: 15px !important;   line-height: 1.55 !important; }
[data-pf-app="fleet"] .pf-main .text-base { font-size: 16.5px !important; line-height: 1.55 !important; }
[data-pf-app="fleet"] .pf-main .text-lg   { font-size: 19px !important;   line-height: 1.45 !important; }
[data-pf-app="fleet"] .pf-main .text-xl   { font-size: 23px !important;   line-height: 1.35 !important; }
[data-pf-app="fleet"] .pf-main .text-2xl  { font-size: 30px !important;   line-height: 1.25 !important; }
[data-pf-app="fleet"] .pf-main .text-3xl  { font-size: 36px !important;   line-height: 1.2  !important; }

/* ── Tables — dispatcher's bread & butter ───────────────────────── */
[data-pf-app="fleet"] .pf-main table thead th,
[data-pf-app="fleet"] .pf-table thead th {
    font-size: 12.5px !important;
    font-weight: 800 !important;
    letter-spacing: 0.08em !important;
    padding: 16px 18px !important;
    color: var(--pf-text-secondary) !important;
    background: var(--pf-bg-input) !important;
}
[data-pf-app="fleet"] .pf-main table tbody td,
[data-pf-app="fleet"] .pf-table tbody td {
    font-size: 15px !important;
    padding: 16px 18px !important;
    line-height: 1.45 !important;
}
[data-pf-app="fleet"] .pf-main table tbody tr,
[data-pf-app="fleet"] .pf-table tbody tr {
    transition: background 0.12s ease, transform 0.12s ease;
}
[data-pf-app="fleet"] .pf-main table tbody tr:hover td,
[data-pf-app="fleet"] .pf-table tbody tr:hover td {
    background: rgba(108, 92, 231,0.06) !important;
}

/* In-cell secondary lines (phone, address sub-text) — visible but not noisy */
[data-pf-app="fleet"] .pf-main td .text-xs   { font-size: 13.5px !important; }
[data-pf-app="fleet"] .pf-main td .text-\[10px\],
[data-pf-app="fleet"] .pf-main td .text-\[11px\] { font-size: 13px !important; }

/* Driver avatar in tables */
[data-pf-app="fleet"] .pf-main td .w-9.h-9 { width: 44px !important; height: 44px !important; }
[data-pf-app="fleet"] .pf-main td img.rounded-full { object-fit: cover; }

/* ── Order amount: hero typography ──────────────────────────────── */
[data-pf-app="fleet"] .pf-main td.font-semibold.text-orange-400,
[data-pf-app="fleet"] .pf-main td .text-orange-400.font-semibold,
[data-pf-app="fleet"] .pf-main td .text-orange-500.font-semibold {
    font-size: 17px !important;
    font-weight: 800 !important;
    color: #6c5ce7 !important;
    letter-spacing: 0.005em;
}

/* ── Status / source chips — louder, easier to scan ─────────────── */
[data-pf-app="fleet"] .pf-main .rounded-full.text-\[10px\],
[data-pf-app="fleet"] .pf-main .rounded-full.text-\[11px\] {
    font-size: 13px !important;
    padding: 5px 12px !important;
    font-weight: 800 !important;
    letter-spacing: 0.02em;
}
[data-pf-app="fleet"] .pf-badge {
    font-size: 13.5px !important;
    padding: 6px 14px !important;
    font-weight: 700 !important;
}

/* ── Cards ──────────────────────────────────────────────────────── */
[data-pf-app="fleet"] .pf-main .pf-card,
[data-pf-app="fleet"] .pf-main .rounded-2xl {
    border-radius: 18px;
}
[data-pf-app="fleet"] .pf-main .pf-card .p-5,
[data-pf-app="fleet"] .pf-main .pf-card.p-5  { padding: 22px !important; }
[data-pf-app="fleet"] .pf-main .pf-card .p-6,
[data-pf-app="fleet"] .pf-main .pf-card.p-6  { padding: 26px !important; }

/* Stat cards on dashboard — give the number room to breathe */
[data-pf-app="fleet"] .pf-main .pf-card p.text-2xl {
    font-size: 32px !important;
    font-weight: 800 !important;
    letter-spacing: -0.01em;
    margin-top: 4px;
}
[data-pf-app="fleet"] .pf-main .pf-card p.text-xs {
    font-size: 13px !important;
    font-weight: 600 !important;
}

/* ── Buttons ────────────────────────────────────────────────────── */
[data-pf-app="fleet"] .pf-main .pf-btn,
[data-pf-app="fleet"] .pf-btn {
    font-size: 15px !important;
    padding: 12px 22px !important;
}
[data-pf-app="fleet"] .pf-btn-premium {
    font-size: 15px !important;
    padding: 13px 18px !important;
    letter-spacing: 0.02em !important;
}

/* Tailwind-coloured buttons (red-500, orange-500, emerald-500…) */
[data-pf-app="fleet"] .pf-main a.text-sm,
[data-pf-app="fleet"] .pf-main button.text-sm {
    font-size: 15px !important;
    font-weight: 600 !important;
}

/* ── Inputs / selects / textareas ───────────────────────────────── */
[data-pf-app="fleet"] .pf-main input,
[data-pf-app="fleet"] .pf-main select,
[data-pf-app="fleet"] .pf-main textarea,
[data-pf-app="fleet"] .pf-input,
[data-pf-app="fleet"] .pf-input-premium {
    font-size: 15px !important;
    padding: 12px 14px !important;
    border-radius: 12px !important;
}
[data-pf-app="fleet"] .pf-main label {
    font-size: 14px !important;
    font-weight: 600 !important;
}

/* ── Dropdown menus ─────────────────────────────────────────────── */
[data-pf-app="fleet"] .pf-dropdown a,
[data-pf-app="fleet"] .pf-dropdown button {
    font-size: 15px !important;
    padding: 12px 18px !important;
}

/* ── Tariff chips & tabs ────────────────────────────────────────── */
[data-pf-app="fleet"] .pf-tariff-chip {
    font-size: 14px !important;
    padding: 9px 18px !important;
}

/* ── Notification toasts (top-right popups) ─────────────────────── */
[data-pf-app="fleet"] .fixed.top-4.right-4 .font-bold { font-size: 15px !important; }
[data-pf-app="fleet"] .fixed.top-4.right-4 .text-xs   { font-size: 13.5px !important; }

/* ── Photo Control / Drivers list ───────────────────────────────── */
[data-pf-app="fleet"] .pf-main .text-emerald-400,
[data-pf-app="fleet"] .pf-main .text-orange-400,
[data-pf-app="fleet"] .pf-main .text-red-400,
[data-pf-app="fleet"] .pf-main .text-blue-400 {
    font-weight: 700;
}

/* ── Spacing: give content sections genuine air ─────────────────── */
[data-pf-app="fleet"] .pf-main {
    --pf-section-gap: 28px;
}
[data-pf-app="fleet"] .pf-main .p-6 { padding: 28px !important; }
[data-pf-app="fleet"] .pf-main .mb-6 { margin-bottom: 28px !important; }
[data-pf-app="fleet"] .pf-main .mb-4 { margin-bottom: 20px !important; }
[data-pf-app="fleet"] .pf-main .gap-4 { gap: 20px !important; }
[data-pf-app="fleet"] .pf-main .gap-3 { gap: 14px !important; }

/* ── Mobile (laptops at small zoom) — keep proportions sensible ─── */
@media (max-width: 1366px) {
    [data-pf-app="fleet"] { font-size: 14.5px; }
    [data-pf-app="fleet"] .pf-main .text-2xl { font-size: 28px !important; }
    [data-pf-app="fleet"] .pf-main .pf-card p.text-2xl { font-size: 28px !important; }
}

/* ── A11y: respect users who really want compact text ──────────── */
[data-pf-app="fleet"][data-pf-density="compact"] {
    font-size: 14px;
}
[data-pf-app="fleet"][data-pf-density="compact"] .pf-main .text-sm   { font-size: 14px !important; }
[data-pf-app="fleet"][data-pf-density="compact"] .pf-main .text-base { font-size: 15px !important; }
[data-pf-app="fleet"][data-pf-density="compact"] .pf-main table tbody td { padding: 12px 14px !important; font-size: 14px !important; }