/* ==========================================================================
   MOUAHHMANE ADMIN — SIGNATURE NOIR & OR  (#1a1a1a / #c9a227)
   Luxury design system — Cinzel headings, Inter body, gold hairlines
   ========================================================================== */

:root {
    /* Noir & Or */
    --noir: #141414;
    --anthracite: #f6f6f6;
    --surface: #1f1f1f;
    --surface-2: #242424;
    --surface-3: #2a2a2a;

    --gold: #c9a227;
    --gold-hi: #e2c044;
    --gold-deep: #a3821b;
    --gold-glow: rgba(201, 162, 39, 0.35);

    --cream: #1f2937;
    --muted: #5c5240;
    --dim: #857d68;

    --ok: #2e7d4f;
    --warn: #b8860b;
    --danger: #c0392b;
    --info: #2c5f8a;

    --primary: var(--gold);
    --primary-dark: var(--gold-deep);
    --primary-light: var(--gold-hi);
    --success: var(--ok);
    --warning: var(--warn);
    --info: var(--info);

    --line: rgba(201, 162, 39, 0.16);
    --line-gold: rgba(201, 162, 39, 0.35);
    --line-strong: rgba(201, 162, 39, 0.55);

    --border-light: var(--line);
    --border-medium: var(--line-gold);

    --bg-body: radial-gradient(1400px 700px at 85% -10%, rgba(201, 162, 39, 0.07), transparent 60%),
               radial-gradient(900px 500px at -10% 110%, rgba(201, 162, 39, 0.05), transparent 55%),
               var(--anthracite);
    --bg-card: linear-gradient(180deg, #f6f6f6 0%,#eaeaea 100%);
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-xl: 22px;
    --radius-full: 9999px;

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.1);
    --shadow-md: 0 6px 5px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 16px 10px rgba(0, 0, 0, 0.1);
    --shadow-xl: 0 24px 15px rgba(0, 0, 0, 0.1);
    --shadow-gold: 0 1px 3px rgba(201, 162, 39, 0.1);
}

* { box-sizing: border-box; }

html { scrollbar-color: #4a463a var(--anthracite); }

body {
    font-family: 'Inter', 'Cairo', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    background: var(--bg-body);
    background-attachment: fixed;
    min-height: 100vh;
    color: var(--cream);
    -webkit-font-smoothing: antialiased;
}

::selection { background: var(--gold); color: #141414; }

h1, h2, h3, .brand-font {
    font-family: 'Cinzel', 'Cairo', serif;
    letter-spacing: 0.02em;
}

/* Elegant gold scrollbar */
::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-track { background: #191919; }
::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, #4a4132, #332e22);
    border-radius: var(--radius-full);
    border: 2px solid #191919;
}
::-webkit-scrollbar-thumb:hover { background: linear-gradient(180deg, var(--gold-deep), #4a4132); }

/* --------------------------------------------------------------------------
   Toasts (jquery-toast)
   -------------------------------------------------------------------------- */
.toast-container { z-index: 9999; }
.jq-toast-wrap { border-radius: var(--radius-md) !important; box-shadow: var(--shadow-xl) !important; }
.jq-toast-heading { font-weight: 600; color: #fffdf6; }
.jq-toast-single { background: #cfffd9 !important; border-bottom: 1px solid #cfffd9 !important; color: var(--cream) !important; }
.jq-toast-success { background: linear-gradient(135deg, #243024 0%, #1c251c 100%) !important; border-left: 3px solid var(--ok) !important; }
.jq-toast-error { background: linear-gradient(135deg, #32201f 0%, #271817 100%) !important; border-left: 3px solid var(--danger) !important; }
.jq-toast-warning { background: linear-gradient(135deg, #322a1a 0%, #272113 100%) !important; border-left: 3px solid var(--warn) !important; }
.jq-toast-info { background: linear-gradient(135deg, #1f2a35 0%, #18202a 100%) !important; border-left: 3px solid var(--info) !important; }

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */
.btn-primary {
    display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
    padding: 0.7rem 1.4rem;
    background: linear-gradient(135deg, var(--gold-hi) 0%, var(--gold) 45%, var(--gold-deep) 100%);
    color: #141414 !important;
    border: none;
    border-radius: var(--radius-md);
    font-weight: 600; font-size: 0.875rem; letter-spacing: 0.02em;
    box-shadow: var(--shadow-gold), inset 0 1px 0 rgba(255, 250, 230, 0.45);
    cursor: pointer;
    transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.25s ease, filter 0.25s ease;
}
.btn-primary:hover {
    transform: translateY(-2px);
    filter: brightness(1.06);
    box-shadow: 0 14px 34px rgba(201, 162, 39, 0.32), inset 0 1px 0 rgba(255, 250, 230, 0.5);
    color: #141414;
}
.btn-primary:active { transform: translateY(0); }

.btn-secondary {
    display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
    padding: 0.7rem 1.4rem;
    background: var(--surface-3);
    color: var(--cream) !important;
    border: 1px solid var(--line-gold);
    border-radius: var(--radius-md);
    font-weight: 500; font-size: 0.875rem;
    cursor: pointer;
    transition: all 0.25s ease;
}
.btn-secondary:hover { background: #322e26; border-color: var(--gold); color: var(--gold-hi); transform: translateY(-1px); }

.btn-success {
    display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
    padding: 0.7rem 1.4rem;
    background: linear-gradient(135deg, #2c4633 0%, #203325 100%);
    color: #a8e2b4 !important;
    border: 1px solid rgba(125, 201, 143, 0.4);
    border-radius: var(--radius-md);
    font-weight: 600; font-size: 0.875rem; cursor: pointer;
    transition: all 0.25s ease;
}
.btn-success:hover { box-shadow: 0 10px 26px rgba(125, 201, 143, 0.18); transform: translateY(-1px); color: #c4f0ce; }

.btn-danger {
    display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
    padding: 0.7rem 1.4rem;
    background: linear-gradient(135deg, #45231f 0%, #331815 100%);
    color: #f0a8a2 !important;
    border: 1px solid rgba(224, 101, 101, 0.4);
    border-radius: var(--radius-md);
    font-weight: 600; font-size: 0.875rem; cursor: pointer;
    transition: all 0.25s ease;
}
.btn-danger:hover { box-shadow: 0 10px 26px rgba(224, 101, 101, 0.2); transform: translateY(-1px); color: #ffc4bf; }

.btn-outline {
    display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
    padding: 0.65rem 1.3rem;
    background: transparent;
    color: var(--gold) !important;
    border: 1px solid var(--line-gold);
    border-radius: var(--radius-md);
    font-weight: 500; font-size: 0.875rem;
    cursor: pointer;
    transition: all 0.25s ease;
}
.btn-outline:hover { border-color: var(--gold); background: rgba(201, 162, 39, 0.08); box-shadow: var(--shadow-gold); color: var(--gold-hi); }

/* --------------------------------------------------------------------------
   Forms
   -------------------------------------------------------------------------- */
.form-input {
    width: 100%;
    padding: 0.7rem 1rem;
    background: var(--anthracite);
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    color: var(--cream);
    font-size: 0.9rem;
    font-family: inherit;
    transition: border-color 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
}
.form-input::placeholder { color: var(--dim); }
.form-input:focus {
    outline: none;
    border-color: var(--gold);
    box-shadow: 0 0 0 3px rgba(201, 162, 39, 0.18);
}
.form-label {
    display: block;
    margin-bottom: 0.45rem;
    color: var(--muted);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}
select.form-input option { background: #1f1f1f; color: var(--anthracite); }

/* Focus rings premium partout */
input:focus-visible, select:focus-visible, textarea:focus-visible, button:focus-visible, a:focus-visible {
    outline: 2px solid rgba(201, 162, 39, 0.6);
    outline-offset: 2px;
}

/* --------------------------------------------------------------------------
   Badges (jewel tones)
   -------------------------------------------------------------------------- */
.badge {
    display: inline-flex; align-items: center; gap: 0.35rem;
    padding: 0.3rem 0.75rem;
    border-radius: var(--radius-full);
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    border: 1px solid transparent;
    white-space: nowrap;
}
.badge-success { background: #d4edda; color: #155724; border-color: #c3e6cb; }
.badge-info { background: #d1ecf1; color: #0c5460; border-color: #bee5eb; }
.badge-danger { background: #f8d7da; color: #721c24; border-color: #f5c6cb; }
.badge-warning { background: #fff3cd; color: #856404; border-color: #ffeaa7; }
.badge-neutral { background: #fff8e1; color: #8a6d14; border-color: #ffe082; }

/* --------------------------------------------------------------------------
   Cards & Stat Cards
   -------------------------------------------------------------------------- */
.stat-card {
    background: var(--bg-card);
    color: #1a1a1a;
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    padding: 1.25rem;
    box-shadow: var(--shadow-md);
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.3s ease, border-color 0.3s ease;
}
.stat-card:hover {
    transform: translateY(-4px);
    border-color: var(--line-gold);
    box-shadow: var(--shadow-gold), var(--shadow-sm);
}
.stat-icon {
    width: 48px; height: 48px;
    border-radius: var(--radius-md);
    display: flex; align-items: center; justify-content: center;
    font-size: 1.1rem;
    color: #141414;
    background: linear-gradient(135deg, var(--gold-hi) 0%, var(--gold) 55%, var(--gold-deep) 100%);
    box-shadow: var(--shadow-gold), inset 0 1px 0 rgba(255, 250, 230, 0.45);
    flex-shrink: 0;
}

/* Boîtes d'information claires à liseré or */
.info-box, .client-box, .moto-box, .financial-box {
    background: var(--bg-card);
    border: 1px solid var(--line);
    border-left: 3px solid var(--gold);
    border-radius: var(--radius-lg);
    padding: 1.25rem;
}

/* Gradient helpers (legacy) */
.gradient-bg { background: linear-gradient(135deg, #232323 0%, #1b1b1b 100%); }
.gradient-primary { background: linear-gradient(135deg, var(--gold-hi) 0%, var(--gold) 50%, var(--gold-deep) 100%); }
.gradient-dark { background: linear-gradient(160deg, #202020 0%, #161616 100%); }
.gradient-light { background: linear-gradient(135deg, #262626 0%, #1e1e1e 100%); }

/* --------------------------------------------------------------------------
   Tables
   -------------------------------------------------------------------------- */
.table-container {
    background: var(--bg-card);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    overflow: hidden;
}
.table-header {
    background: rgba(201, 162, 39, 0.07);
    border-bottom: 1px solid var(--line-gold);
}
.table-header th {
    padding: 0.9rem 1.1rem;
    color: var(--gold-hi);
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    white-space: nowrap;
}
.table-row { transition: background 0.2s ease; }
.table-row:nth-child(even) { background: rgba(255, 253, 246, 0.015); }
.table-row:hover { background: rgba(201, 162, 39, 0.06); }
.table-row td {
    padding: 0.9rem 1.1rem;
    color: var(--cream);
    border-top: 1px solid rgba(245, 239, 224, 0.06);
    vertical-align: middle;
}

/* --------------------------------------------------------------------------
   Page header / filters / empty state / action buttons
   -------------------------------------------------------------------------- */
.page-header { margin-bottom: 2rem; }
.page-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--cream);
}
.page-subtitle { color: var(--muted); font-size: 0.875rem; margin-top: 0.25rem; }

.filters-container {
    background: var(--bg-card);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    padding: 1.25rem;
    margin-bottom: 1.5rem;
}

.action-btn {
    width: 34px; height: 34px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 10px;
    background: rgba(0, 0, 0, 0.04);
    color: var(--muted) !important;
    border: 1px solid #ccc;
    font-size: 0.8rem;
    transition: all 0.22s ease;
}
.action-btn:hover {
    background: rgba(201, 162, 39, 0.12);
    color: var(--gold-hi) !important;
    border-color: var(--line-gold);
    box-shadow: var(--shadow-gold);
    transform: translateY(-2px);
}
.action-btn.btn-delete:hover { background: rgba(224, 101, 101, 0.12); color: #c0392b !important; border-color: rgba(224, 101, 101, 0.4); }

/* --------------------------------------------------------------------------
   Modals
   -------------------------------------------------------------------------- */
.modal-overlay {
    background: rgba(10, 10, 10, 0.72);
    backdrop-filter: blur(6px);
}
.modal-content {
    background: #ffffff;
    border: 1px solid var(--line-gold);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-xl), 0 0 0 1px rgba(0, 0, 0, 0.4);
}

/* --------------------------------------------------------------------------
   Form sections
   -------------------------------------------------------------------------- */
.form-section {
    background: var(--bg-card);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    padding: 1.5rem;
    margin-bottom: 1.5rem;
}
.form-section-title {
    display: flex; align-items: center; gap: 0.6rem;
    color: var(--gold-hi);
    font-size: 0.95rem;
    font-weight: 600;
    margin-bottom: 1.25rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--line-gold);
}

/* --------------------------------------------------------------------------
   Empty state
   -------------------------------------------------------------------------- */
.empty-state { text-align: center; padding: 3rem 1rem; }
.empty-state-icon {
    width: 72px; height: 72px;
    margin: 0 auto 1rem;
    border-radius: var(--radius-full);
    display: flex; align-items: center; justify-content: center;
    background: rgba(201, 162, 39, 0.08);
    border: 1px solid var(--line-gold);
    color: var(--gold);
    font-size: 1.4rem;
}
.empty-state-text { color: var(--muted); font-size: 0.9rem; }

.card-hover { transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.3s ease, border-color 0.3s ease; }
.card-hover:hover { transform: translateY(-4px); box-shadow: var(--shadow-gold), var(--shadow-lg); border-color: var(--line-gold); }


/* --------------------------------------------------------------------------
   Statuts métier (locations / motos / réservations)
   -------------------------------------------------------------------------- */
.status-en_cours, .status-active, .status-loue { background: #fff8e1; color: #8a6d14; border-color: #ffe082; }
.status-termine, .status-disponible, .status-paid { background: #d4edda; color: #155724; border-color: #c3e6cb; }
.status-annule, .status-cancelled, .status-blacklisted { background: #f8d7da; color: #721c24; border-color: #f5c6cb; }
.status-maintenance, .status-retard, .status-overdue { background: #ffe0b2; color: #e65100; border-color: #ffcc80; }
.status-pending, .status-en_attente, .status-reserved { background: #d1ecf1; color: #0c5460; border-color: #bee5eb; }

/* --------------------------------------------------------------------------
   Graphiques Chart.js / ApexCharts en encre sombre
   -------------------------------------------------------------------------- */
.chart-container, .chart-card, [class*="chart"] {
    color-scheme: dark;
}
canvas { filter: saturate(1.05); }

/* Légendes Apex / Chart en crème */
.apexcharts-legend-text, .apexcharts-tooltip { color: var(--cream) !important; background: #242424 !important; border-color: var(--line-gold) !important; }
.apexcharts-tooltip-title { background: #1d1d1d !important; border-color: var(--line-gold) !important; }
.apexcharts-menu { background: #242424 !important; border-color: var(--line-gold) !important; }
.apexcharts-menu-item:hover { background: rgba(201, 162, 39, 0.12) !important; }

/* --------------------------------------------------------------------------
   RTL (arabe) — inversions décoratives
   -------------------------------------------------------------------------- */
[dir="rtl"] .info-box, [dir="rtl"] .client-box, [dir="rtl"] .moto-box, [dir="rtl"] .financial-box {
    border-left: 1px solid var(--line);
    border-right: 3px solid var(--gold);
}
[dir="rtl"] .form-section-title { letter-spacing: 0; }
[dir="rtl"] .table-header th { letter-spacing: 0; font-size: 0.72rem; }

/* --------------------------------------------------------------------------
   Impression (contrats, rapports)
   -------------------------------------------------------------------------- */
@media print {
    body { background: #ffffff !important; color: #141414 !important; }
    .no-print, #sidebar, header, .btn-primary, .btn-secondary, .btn-success,
    .btn-danger, .btn-outline, button, .filters-container { display: none !important; }
    main { margin: 0 !important; padding: 0 !important; }
    .print-sheet, .table-container, .stat-card, .info-box {
        background: #ffffff !important;
        color: #141414 !important;
        box-shadow: none !important;
        border-color: #d8cba0 !important;
    }
    .table-row td, .table-header th { color: #141414 !important; border-color: #d8cba0 !important; }
    .page-title { color: #141414 !important; -webkit-text-fill-color: #141414 !important; }
}

/* --------------------------------------------------------------------------
   Divers
   -------------------------------------------------------------------------- */
.text-gold { color: var(--gold); }
.bg-gold { background-color: var(--gold); }
.bg-gold-gradient { background: linear-gradient(135deg, var(--gold-hi), var(--gold-deep)); }
.border-gold { border-color: var(--line-gold); }