/* =====================================================================
   RÉCOMPENSES BAR — Styles globaux
   ===================================================================== */

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
    /* Palette */
    --bg-900:        #0a0a14;
    --bg-800:        #10101e;
    --bg-700:        #17172a;
    --bg-600:        #1e1e35;
    --surface:       rgba(255, 255, 255, 0.04);
    --surface-2:     rgba(255, 255, 255, 0.07);
    --border:        rgba(255, 255, 255, 0.08);
    --border-strong: rgba(255, 255, 255, 0.16);

    --text:          #f5f5fa;
    --text-muted:    #9a9ab0;
    --text-dim:      #6e6e88;

    /* Accents */
    --amber:         #f5b544;
    --amber-soft:    #ffcf70;
    --violet:        #8b5cf6;
    --violet-soft:   #a78bfa;
    --emerald:       #10b981;
    --rose:          #f43f5e;
    --sky:           #0ea5e9;

    /* Rayons & ombres */
    --radius-sm:  8px;
    --radius:     14px;
    --radius-lg:  22px;
    --radius-xl:  32px;

    --shadow-sm:  0 1px 3px rgba(0,0,0,.25);
    --shadow:     0 10px 30px -12px rgba(0,0,0,.5);
    --shadow-lg:  0 30px 60px -20px rgba(0,0,0,.6);
    --shadow-glow:0 0 40px -5px rgba(139,92,246,.4);

    /* Transitions */
    --t-fast:  .18s cubic-bezier(.4,0,.2,1);
    --t-base:  .28s cubic-bezier(.4,0,.2,1);
    --t-slow:  .5s  cubic-bezier(.4,0,.2,1);

    /* Typo */
    --ff-body: 'Inter', system-ui, -apple-system, sans-serif;
    --ff-head: 'Outfit', 'Inter', system-ui, sans-serif;
}

html { scroll-behavior: smooth; }

body {
    font-family: var(--ff-body);
    background: var(--bg-900);
    color: var(--text);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    min-height: 100vh;
    overflow-x: hidden;
}

h1, h2, h3, h4 { font-family: var(--ff-head); line-height: 1.2; letter-spacing: -.02em; }

a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; }
input, textarea, select { font-family: inherit; }

/* ---------- Boutons ---------- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .55rem;
    padding: .85rem 1.4rem;
    border-radius: var(--radius);
    font-weight: 600;
    font-size: .95rem;
    letter-spacing: .01em;
    transition: all var(--t-base);
    position: relative;
    overflow: hidden;
    white-space: nowrap;
}

.btn i { font-size: .95em; }

.btn-primary {
    background: linear-gradient(135deg, var(--violet) 0%, #6d28d9 100%);
    color: #fff;
    box-shadow: 0 10px 24px -10px rgba(139,92,246,.75),
                inset 0 1px 0 rgba(255,255,255,.15);
}
.btn-primary:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: 0 16px 32px -10px rgba(139,92,246,.85),
                inset 0 1px 0 rgba(255,255,255,.2);
}
.btn-primary:active:not(:disabled) { transform: translateY(0); }

.btn-ghost {
    background: var(--surface);
    color: var(--text);
    border: 1px solid var(--border);
    backdrop-filter: blur(10px);
}
.btn-ghost:hover {
    background: var(--surface-2);
    border-color: var(--border-strong);
}

.btn-block { width: 100%; }

.btn:disabled { opacity: .6; cursor: not-allowed; }

/* ---------- Champs de formulaire ---------- */
.field { display: flex; flex-direction: column; gap: .5rem; }

.field label {
    display: flex;
    align-items: center;
    gap: .45rem;
    font-size: .82rem;
    font-weight: 500;
    color: var(--text-muted);
    letter-spacing: .02em;
    text-transform: uppercase;
}

.field label i { color: var(--text-dim); font-size: .85em; }

.input-wrap {
    position: relative;
    display: flex;
    align-items: center;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    transition: all var(--t-base);
    overflow: hidden;
}
.input-wrap:focus-within {
    border-color: var(--violet-soft);
    background: var(--surface-2);
    box-shadow: 0 0 0 4px rgba(139,92,246,.15);
}

.input-wrap input {
    flex: 1;
    background: transparent;
    border: none;
    outline: none;
    padding: .95rem 1rem;
    color: var(--text);
    font-size: 1rem;
    min-width: 0;
}
.input-wrap input::placeholder { color: var(--text-dim); }

.input-prefix {
    padding: .95rem 0 .95rem 1rem;
    color: var(--text-muted);
    font-weight: 600;
    font-size: .95rem;
    border-right: 1px solid var(--border);
    margin-right: .1rem;
}
.input-wrap:has(.input-prefix) input { padding-left: .6rem; }

.toggle-pwd {
    padding: .5rem .9rem;
    color: var(--text-dim);
    transition: color var(--t-fast);
}
.toggle-pwd:hover { color: var(--amber); }

.field-hint {
    font-size: .8rem;
    color: var(--rose);
    min-height: 1em;
    transition: opacity var(--t-fast);
}

/* ---------- Toasts ---------- */
.toast-container {
    position: fixed;
    top: 1.25rem;
    right: 1.25rem;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    gap: .75rem;
    pointer-events: none;
    max-width: min(420px, calc(100vw - 2rem));
}

.toast {
    pointer-events: auto;
    display: flex;
    align-items: flex-start;
    gap: .85rem;
    padding: .95rem 1.1rem;
    border-radius: var(--radius);
    background: rgba(20,20,35,.92);
    backdrop-filter: blur(14px);
    border: 1px solid var(--border-strong);
    box-shadow: var(--shadow-lg);
    color: var(--text);
    font-size: .92rem;
    line-height: 1.45;
    animation: toast-in .35s cubic-bezier(.34,1.56,.64,1) both;
    position: relative;
    overflow: hidden;
}

.toast::before {
    content: '';
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 4px;
    background: var(--sky);
}
.toast.success::before { background: var(--emerald); }
.toast.error::before   { background: var(--rose); }
.toast.warning::before { background: var(--amber); }
.toast.info::before    { background: var(--sky); }

.toast-icon {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    border-radius: 10px;
    display: grid;
    place-items: center;
    background: rgba(14,165,233,.15);
    color: var(--sky);
    font-size: .95rem;
}
.toast.success .toast-icon { background: rgba(16,185,129,.15); color: var(--emerald); }
.toast.error   .toast-icon { background: rgba(244,63,94,.15);  color: var(--rose); }
.toast.warning .toast-icon { background: rgba(245,181,68,.15); color: var(--amber); }

.toast-body { flex: 1; min-width: 0; }
.toast-title { font-weight: 600; font-size: .9rem; margin-bottom: .1rem; }
.toast-msg   { color: var(--text-muted); font-size: .85rem; }

.toast-close {
    color: var(--text-dim);
    padding: .15rem;
    transition: color var(--t-fast);
}
.toast-close:hover { color: var(--text); }

.toast.leaving { animation: toast-out .3s ease forwards; }

@keyframes toast-in {
    from { opacity: 0; transform: translateX(30px) scale(.95); }
    to   { opacity: 1; transform: translateX(0) scale(1); }
}
@keyframes toast-out {
    to { opacity: 0; transform: translateX(30px) scale(.95); }
}

/* ---------- Spinner bouton ---------- */
.btn-spinner {
    display: none;
    width: 16px;
    height: 16px;
    border: 2px solid rgba(255,255,255,.3);
    border-top-color: #fff;
    border-radius: 50%;
    animation: spin .7s linear infinite;
}
.btn.is-loading .btn-label  { display: none; }
.btn.is-loading .btn-spinner { display: inline-block; }

@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- Animations d'entrée ---------- */
.fade-in-down  { animation: fadeInDown .7s cubic-bezier(.4,0,.2,1) both; }
.fade-in-up    { animation: fadeInUp   .7s cubic-bezier(.4,0,.2,1) both; animation-delay: var(--delay, 0s); }
.fade-in-left  { animation: fadeInLeft .8s cubic-bezier(.4,0,.2,1) both; }
.fade-in-right { animation: fadeInRight .8s cubic-bezier(.4,0,.2,1) both; }

@keyframes fadeInDown  { from { opacity:0; transform: translateY(-16px); } to { opacity:1; transform: none; } }
@keyframes fadeInUp    { from { opacity:0; transform: translateY(16px); }  to { opacity:1; transform: none; } }
@keyframes fadeInLeft  { from { opacity:0; transform: translateX(-24px); } to { opacity:1; transform: none; } }
@keyframes fadeInRight { from { opacity:0; transform: translateX(24px); }  to { opacity:1; transform: none; } }

/* ---------- Utilitaires ---------- */
.grad-text {
    background: linear-gradient(135deg, var(--amber) 0%, var(--violet-soft) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.link-muted {
    color: var(--amber);
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    transition: all var(--t-fast);
}
.link-muted:hover { color: var(--amber-soft); gap: .55rem; }

/* ---------- Accessibilité ---------- */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
}

/* ---------- Scrollbar ---------- */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--bg-800); }
::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, var(--violet), #4c1d95);
    border-radius: 10px;
    border: 2px solid var(--bg-800);
}
::-webkit-scrollbar-thumb:hover { background: var(--violet-soft); }


/* =====================================================================
   THÈME — MODE CLAIR
   ===================================================================== */

/* ---- Bouton toggle (topbar) ---- */
.topbar-theme {
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    border-radius: 10px;
    background: var(--surface);
    border: 1px solid var(--border);
    color: var(--text-muted);
    transition: all var(--t-base);
    flex-shrink: 0;
}
.topbar-theme:hover {
    background: var(--surface-2);
    border-color: var(--border-strong);
    color: var(--amber);
    transform: translateY(-1px);
}
.topbar-theme i {
    transition: transform .5s cubic-bezier(.34,1.56,.64,1);
    font-size: .95rem;
}
.topbar-theme:hover i { transform: rotate(360deg); }

/* ---- Palette light ---- */
[data-theme="light"] {
    --bg-900:        #f4f5fa;
    --bg-800:        #ffffff;
    --bg-700:        #eef0f5;
    --bg-600:        #e2e5ee;
    --surface:       rgba(0, 0, 0, 0.035);
    --surface-2:     rgba(0, 0, 0, 0.07);
    --border:        rgba(0, 0, 0, 0.08);
    --border-strong: rgba(0, 0, 0, 0.16);

    --text:          #16162a;
    --text-muted:    #56566e;
    --text-dim:      #8a8aa0;

    --amber:         #d97706;
    --amber-soft:    #f59e0b;
    --violet:        #7c3aed;
    --violet-soft:   #8b5cf6;
    --emerald:       #059669;
    --rose:          #e11d48;
    --sky:           #0284c7;

    --shadow-sm:     0 1px 3px rgba(0,0,0,.06);
    --shadow:        0 10px 30px -12px rgba(0,0,0,.12);
    --shadow-lg:     0 30px 60px -20px rgba(0,0,0,.18);
    --shadow-glow:   0 0 40px -5px rgba(124,58,237,.25);

    color-scheme: light;
}

/* Transition douce sur le body quand on bascule */
html { transition: background-color .35s ease, color .35s ease; }
body { transition: background-color .35s ease, color .35s ease; }

/* =====================================================================
   OVERRIDES COMPOSANTS (light)
   ===================================================================== */

/* ---- Layout dashboard ---- */
[data-theme="light"] .app-topbar {
    background: rgba(255,255,255,.88);
    border-bottom-color: var(--border);
    backdrop-filter: blur(16px) saturate(150%);
}
[data-theme="light"] .topbar-clock,
[data-theme="light"] .topbar-burger,
[data-theme="light"] .topbar-logout,
[data-theme="light"] .topbar-theme {
    background: var(--surface);
    border-color: var(--border);
}
[data-theme="light"] .topbar-logout:hover { background: rgba(225,29,72,.08); }
[data-theme="light"] .topbar-icon {
    box-shadow: 0 8px 20px -10px rgba(124,58,237,.4);
}
[data-theme="light"] .topbar-brand-mark {
    box-shadow: 0 8px 20px -8px rgba(124,58,237,.5),
                inset 0 1px 0 rgba(255,255,255,.2);
}

/* ---- Sidebar ---- */
[data-theme="light"] .sidebar {
    background: linear-gradient(180deg, #ffffff 0%, #f5f6fa 100%);
    border-right-color: var(--border);
}
[data-theme="light"] .sidebar-link .link-icon {
    background: rgba(0,0,0,.025);
    border-color: var(--border);
}
[data-theme="light"] .sidebar-link:hover .link-icon {
    background: rgba(124,58,237,.1);
    border-color: rgba(124,58,237,.25);
}
[data-theme="light"] .sidebar-link.active {
    background: linear-gradient(90deg, rgba(124,58,237,.1) 0%, rgba(124,58,237,.02) 100%);
    border-color: rgba(124,58,237,.2);
}
[data-theme="light"] .sidebar-logout {
    background: var(--surface);
    border-color: var(--border);
}
[data-theme="light"] .user-avatar {
    border-color: rgba(0,0,0,.08);
}

/* ---- Cartes / stats ---- */
[data-theme="light"] .card,
[data-theme="light"] .stat-card {
    background: linear-gradient(160deg, #ffffff 0%, #f8f9fc 100%);
    border-color: var(--border);
    box-shadow: 0 4px 20px -8px rgba(0,0,0,.06);
}
[data-theme="light"] .stat-card:hover {
    box-shadow: 0 12px 30px -12px rgba(0,0,0,.12);
}

/* ---- Tables ---- */
[data-theme="light"] .data-table thead th {
    background: rgba(0,0,0,.02);
}
[data-theme="light"] .data-table tbody tr:hover {
    background: rgba(124,58,237,.035);
}
[data-theme="light"] .cell-avatar {
    border-color: rgba(0,0,0,.06);
}

/* ---- Boutons ---- */
[data-theme="light"] .btn-ghost,
[data-theme="light"] .icon-btn {
    background: var(--surface);
    border-color: var(--border);
}
[data-theme="light"] .btn-ghost:hover,
[data-theme="light"] .icon-btn:hover {
    background: var(--surface-2);
    border-color: var(--border-strong);
}
[data-theme="light"] .btn-primary {
    box-shadow: 0 10px 24px -10px rgba(124,58,237,.55),
                inset 0 1px 0 rgba(255,255,255,.2);
}

/* ---- Inputs ---- */
[data-theme="light"] .input-wrap {
    background: #ffffff;
    border-color: var(--border);
}
[data-theme="light"] .input-wrap:focus-within {
    background: #ffffff;
    box-shadow: 0 0 0 4px rgba(124,58,237,.1);
    border-color: var(--violet);
}
[data-theme="light"] .search-box input {
    background: #ffffff;
    border-color: var(--border);
}
[data-theme="light"] .search-box input:focus {
    background: #ffffff;
}
[data-theme="light"] select option {
    background: #ffffff;
    color: var(--text);
}

/* ---- Modales ---- */
[data-theme="light"] .modal-backdrop {
    background: rgba(30,30,55,.35);
}
[data-theme="light"] .modal {
    background: linear-gradient(160deg, #ffffff 0%, #f5f6fa 100%);
    border-color: var(--border-strong);
    box-shadow: 0 40px 80px -20px rgba(0,0,0,.2);
}
[data-theme="light"] .modal::before {
    background: radial-gradient(circle, rgba(124,58,237,.1), transparent 70%);
}
[data-theme="light"] .modal-close {
    background: var(--surface);
    border-color: var(--border);
}

/* ---- Toasts ---- */
[data-theme="light"] .toast {
    background: rgba(255,255,255,.97);
    border-color: var(--border-strong);
    color: var(--text);
    box-shadow: 0 20px 40px -15px rgba(0,0,0,.12);
}
[data-theme="light"] .toast-msg { color: var(--text-muted); }
[data-theme="light"] .toast-close { color: var(--text-dim); }

/* ---- Activité ---- */
[data-theme="light"] .activity-item:hover {
    background: rgba(124,58,237,.035);
}

/* ---- Checkbox ---- */
[data-theme="light"] .checkbox-mark {
    background: #ffffff;
    border-color: var(--border-strong);
}

/* ---- Dropdown de recherche (agent) ---- */
[data-theme="light"] .search-results {
    background: rgba(255,255,255,.99);
    border-color: var(--border-strong);
    box-shadow: 0 20px 40px -15px rgba(0,0,0,.12);
}
[data-theme="light"] .search-result:hover,
[data-theme="light"] .search-result.highlight {
    background: rgba(124,58,237,.05);
}

/* ---- Tabs (admin + client) ---- */
[data-theme="light"] .tabs,
[data-theme="light"] .client-tabs {
    background: rgba(0,0,0,.03);
    border-color: var(--border);
}
[data-theme="light"] .tab:hover,
[data-theme="light"] .client-tab:hover {
    background: rgba(0,0,0,.04);
}
[data-theme="light"] .tab .tab-count,
[data-theme="light"] .client-tab .tab-count {
    background: rgba(0,0,0,.08);
}

/* ---- Landing page ---- */
[data-theme="light"] .landing-page {
    background:
        radial-gradient(1200px 800px at 20% -10%, rgba(124,58,237,.09), transparent 60%),
        radial-gradient(1000px 700px at 100% 20%, rgba(217,119,6,.07), transparent 55%),
        var(--bg-900);
}
[data-theme="light"] .grid-overlay {
    background-image:
        linear-gradient(rgba(0,0,0,.045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0,0,0,.045) 1px, transparent 1px);
}
[data-theme="light"] .blob { opacity: .22; }

[data-theme="light"] .hero-badge {
    background: rgba(124,58,237,.08);
    border-color: rgba(124,58,237,.22);
}
[data-theme="light"] .hero-badge-emerald {
    background: rgba(5,150,105,.08);
    border-color: rgba(5,150,105,.22);
}
[data-theme="light"] .hero-stats {
    background: rgba(255,255,255,.7);
    border-color: var(--border);
}
[data-theme="light"] .stat-divider {
    background: var(--border-strong);
}

/* ---- Auth (login / register) ---- */
[data-theme="light"] .auth-card {
    background: linear-gradient(160deg, rgba(255,255,255,.98) 0%, rgba(248,249,252,.98) 100%);
    border-color: var(--border-strong);
    box-shadow: 0 30px 60px -20px rgba(0,0,0,.12);
}
[data-theme="light"] .auth-card-glow {
    background: radial-gradient(circle at 70% 30%, rgba(124,58,237,.1), transparent 50%);
}
[data-theme="light"] .auth-header h2 { color: var(--text); }
[data-theme="light"] .auth-header p  { color: var(--text-muted); }
[data-theme="light"] .auth-note      { color: var(--text-dim); }
[data-theme="light"] .auth-footer    { border-color: var(--border); }
[data-theme="light"] .auth-footer p  { color: var(--text-muted); }

/* ---- Landing footer ---- */
[data-theme="light"] .landing-footer {
    border-top-color: var(--border);
    color: var(--text-dim);
}

/* ---- Client dashboard ---- */
[data-theme="light"] .bar-card {
    background: linear-gradient(160deg, #ffffff 0%, #f8f9fc 100%);
    border-color: var(--border);
    box-shadow: 0 4px 20px -8px rgba(0,0,0,.06);
}
[data-theme="light"] .bar-card-available:hover {
    border-color: rgba(2,132,199,.5);
}
[data-theme="light"] .reward-access-card {
    background: linear-gradient(160deg, rgba(5,150,105,.05) 0%, #ffffff 100%);
}
[data-theme="light"] .next-point-box {
    background: linear-gradient(135deg, rgba(124,58,237,.05) 0%, rgba(217,119,6,.03) 100%);
    border-color: rgba(124,58,237,.18);
}
[data-theme="light"] .hero-points {
    box-shadow: 0 30px 60px -22px rgba(124,58,237,.3);
}

/* ---- Admin : reward cards ---- */
[data-theme="light"] .reward-card {
    background: linear-gradient(160deg, #ffffff 0%, #f8f9fc 100%);
    border-color: var(--border);
}

/* ---- Agent : spend card ---- */
[data-theme="light"] .spend-card {
    background: linear-gradient(160deg, #ffffff 0%, #f8f9fc 100%);
    border-color: var(--border);
    box-shadow: 0 4px 20px -8px rgba(0,0,0,.06);
}
[data-theme="light"] .amount-wrap .input-wrap input { color: var(--text); }
[data-theme="light"] .amount-quick button {
    background: var(--surface);
    border-color: var(--border);
}
[data-theme="light"] .amount-quick button:hover {
    background: var(--surface-2);
}
[data-theme="light"] .points-preview {
    background: linear-gradient(135deg, rgba(217,119,6,.06) 0%, rgba(124,58,237,.05) 100%);
}
[data-theme="light"] .client-card {
    background: rgba(124,58,237,.06);
}
[data-theme="light"] .client-card-remove { background: rgba(225,29,72,.08); }

/* ---- Modales internes (agent + client) ---- */
[data-theme="light"] .history-item,
[data-theme="light"] .bar-modal-item,
[data-theme="light"] .reward-modal-card {
    background: #ffffff;
    border-color: var(--border);
}
[data-theme="light"] .reward-modal-card.locked { opacity: .45; }

/* ---- Confirm modal ---- */
[data-theme="light"] .confirm-icon {
    background: rgba(225,29,72,.08);
    border-color: rgba(225,29,72,.22);
}
[data-theme="light"] .confirm-icon.warning {
    background: rgba(217,119,6,.08);
    border-color: rgba(217,119,6,.22);
}
[data-theme="light"] .confirm-icon.info {
    background: rgba(2,132,199,.08);
    border-color: rgba(2,132,199,.22);
}

/* ---- Scrollbar ---- */
[data-theme="light"] ::-webkit-scrollbar-track { background: #eef0f5; }
[data-theme="light"] ::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, var(--violet), #6d28d9);
    border-color: #eef0f5;
}