/*
 * Falcon Taxi admin theme.
 * The panel runs in Filament's forced dark mode with a navy gray palette
 * (see AdminPanelProvider), so this file only adds brand accents on top.
 * Use logical properties (inline-start/end) so every rule works in RTL and LTR.
 */

@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@400;500;600;700;800&display=swap');

:root {
    --falcon-bg: #091020;
    --falcon-surface: #0f1a30;
    --falcon-surface-2: #14223d;
    --falcon-gold: #d4af37;
    --falcon-gold-soft: rgba(212, 175, 55, 0.12);
    --falcon-gold-line: rgba(212, 175, 55, 0.18);
    --falcon-line: rgba(148, 163, 184, 0.12);
    --falcon-text: #e5e9f0;
    --falcon-muted: #94a3b8;
    --falcon-radius: 14px;
}

/* ---------- Typography ---------- */

body,
.fi-body {
    font-family: 'Outfit', 'Cairo', ui-sans-serif, system-ui, sans-serif;
    background-color: var(--falcon-bg);
}

/* Cairo first in Arabic: Outfit has no Arabic glyphs */
[dir='rtl'] body,
[dir='rtl'] .fi-body,
[dir='rtl'] .fi-body * {
    font-family: 'Cairo', 'Outfit', ui-sans-serif, system-ui, sans-serif;
}

.fi-header-heading {
    font-weight: 800;
    letter-spacing: -0.01em;
}

[dir='rtl'] .fi-header-heading {
    letter-spacing: 0;
}

.fi-header-subheading {
    color: var(--falcon-muted);
}

.fi-ta-text-item-label,
.fi-wi-stats-overview-stat-value {
    font-variant-numeric: tabular-nums;
}

/* ---------- Layout surfaces ---------- */

.fi-main-ctn {
    background:
        radial-gradient(1200px 500px at 100% -10%, rgba(212, 175, 55, 0.06), transparent 60%),
        var(--falcon-bg);
}

.fi-topbar > nav {
    background-color: rgba(9, 16, 32, 0.85);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--falcon-line);
    box-shadow: none;
}

.fi-sidebar {
    background-color: var(--falcon-surface);
    border-inline-end: 1px solid var(--falcon-line);
}

.fi-sidebar-header {
    background-color: var(--falcon-surface);
    border-bottom: 1px solid var(--falcon-line);
    box-shadow: none;
}

.fi-sidebar-group-label {
    color: var(--falcon-muted);
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

[dir='rtl'] .fi-sidebar-group-label {
    font-size: 0.8rem;
    text-transform: none;
    letter-spacing: 0;
}

.fi-sidebar-item-button {
    border-radius: 10px;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.fi-sidebar-item-label {
    color: #cbd5e1;
}

.fi-sidebar-item-button:hover .fi-sidebar-item-label {
    color: #fff;
}

.fi-sidebar-item-active .fi-sidebar-item-button {
    background-color: var(--falcon-gold-soft);
    box-shadow: inset 3px 0 0 var(--falcon-gold);
}

[dir='rtl'] .fi-sidebar-item-active .fi-sidebar-item-button {
    box-shadow: inset -3px 0 0 var(--falcon-gold);
}

.fi-sidebar-item-active .fi-sidebar-item-label,
.fi-sidebar-item-active .fi-sidebar-item-icon {
    color: var(--falcon-gold);
}

/* ---------- Cards, sections, tables ---------- */

.fi-section,
.fi-ta-ctn,
.fi-wi-stats-overview-stat,
.fi-fo-tabs,
.fi-in-tabs {
    background-color: var(--falcon-surface);
    border-radius: var(--falcon-radius);
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.03) inset, 0 8px 24px rgba(0, 0, 0, 0.25);
    --tw-ring-color: var(--falcon-line);
}

.fi-wi-stats-overview-stat {
    position: relative;
    overflow: hidden;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.fi-wi-stats-overview-stat::before {
    content: '';
    position: absolute;
    inset-block-start: 0;
    inset-inline: 0;
    height: 2px;
    background: linear-gradient(90deg, var(--falcon-gold), transparent);
    opacity: 0.6;
}

[dir='rtl'] .fi-wi-stats-overview-stat::before {
    background: linear-gradient(-90deg, var(--falcon-gold), transparent);
}

.fi-wi-stats-overview-stat:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.35);
}

.fi-wi-stats-overview-stat-value {
    font-weight: 800;
}

.fi-ta-header-cell {
    background-color: var(--falcon-surface-2);
}

.fi-ta-header-cell-label {
    color: #cbd5e1;
    font-weight: 700;
}

.fi-ta-row {
    transition: background-color 0.12s ease;
}

.fi-ta-row:hover {
    background-color: rgba(212, 175, 55, 0.04);
}

.fi-ta-row > td {
    border-color: var(--falcon-line);
}

/* ---------- Inputs and buttons ---------- */

.fi-input-wrp {
    background-color: rgba(9, 16, 32, 0.6);
    border-radius: 10px;
}

.fi-input-wrp:focus-within {
    --tw-ring-color: var(--falcon-gold);
}

.fi-btn {
    border-radius: 10px;
    font-weight: 600;
}

/* Dark text on gold buttons for contrast */
.fi-btn-color-primary,
.fi-btn-color-primary .fi-btn-label,
.fi-btn-color-primary .fi-btn-icon {
    color: #1a1405;
}

.fi-badge {
    border-radius: 9999px;
    font-weight: 600;
}

.fi-modal-window {
    background-color: var(--falcon-surface);
    border-radius: 18px;
}

.fi-dropdown-panel {
    background-color: var(--falcon-surface-2);
}

/* ---------- Login ---------- */

.fi-simple-layout {
    background:
        radial-gradient(900px 500px at 15% 10%, rgba(212, 175, 55, 0.10), transparent 60%),
        radial-gradient(900px 600px at 90% 90%, rgba(30, 64, 175, 0.18), transparent 60%),
        var(--falcon-bg);
}

.fi-simple-main {
    background-color: rgba(15, 26, 48, 0.85);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid var(--falcon-gold-line);
    border-radius: 20px;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45);
}

.fi-simple-header-heading {
    font-weight: 800;
}

/* ---------- Custom page components ---------- */

.valcon-card {
    background: linear-gradient(135deg, var(--falcon-surface-2) 0%, var(--falcon-surface) 100%);
    border: 1px solid var(--falcon-gold-line);
    border-radius: var(--falcon-radius);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.valcon-card:hover {
    border-color: rgba(212, 175, 55, 0.4);
    transform: translateY(-2px);
}

.valcon-gold-glow {
    box-shadow: 0 0 12px var(--falcon-gold);
}

.status-pulse {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    margin-inline-end: 6px;
    animation: status-pulsate 1.8s infinite ease-in-out;
}

.status-pulse.green { background-color: #10b981; box-shadow: 0 0 8px #10b981; }
.status-pulse.amber { background-color: #f59e0b; box-shadow: 0 0 8px #f59e0b; }
.status-pulse.blue  { background-color: #3b82f6; box-shadow: 0 0 8px #3b82f6; }
.status-pulse.red   { background-color: #ef4444; box-shadow: 0 0 8px #ef4444; }

@keyframes status-pulsate {
    0%, 100% { transform: scale(0.9); opacity: 0.6; }
    50% { transform: scale(1.25); opacity: 1; }
}

/* Custom dashboard blades that use light-only utility classes */
.fi-main .bg-white:not([class*='dark:bg']),
.fi-main .bg-gray-50:not([class*='dark:bg']) {
    background-color: var(--falcon-surface);
}

.fi-main .text-gray-900:not([class*='dark:text']),
.fi-main .text-gray-800:not([class*='dark:text']),
.fi-main .text-gray-700:not([class*='dark:text']) {
    color: var(--falcon-text);
}

/* Maps */
.leaflet-control-zoom a {
    background: var(--falcon-surface-2) !important;
    color: var(--falcon-text) !important;
    border-color: var(--falcon-line) !important;
}

.leaflet-container {
    border-radius: var(--falcon-radius);
}

/* ---------- Scrollbars ---------- */

* {
    scrollbar-width: thin;
    scrollbar-color: rgba(212, 175, 55, 0.25) transparent;
}

::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(212, 175, 55, 0.22); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--falcon-gold); }

/* Logical spacing utilities used by custom blades but missing from Filament's compiled CSS */
.me-0\.5 { margin-inline-end: 0.125rem; }
.me-1\.5 { margin-inline-end: 0.375rem; }
.me-2 { margin-inline-end: 0.5rem; }
.ms-2 { margin-inline-start: 0.5rem; }
.ps-6 { padding-inline-start: 1.5rem; }
.ps-9 { padding-inline-start: 2.25rem; }
.ps-10 { padding-inline-start: 2.5rem; }
.pe-10 { padding-inline-end: 2.5rem; }
.pe-28 { padding-inline-end: 7rem; }