/**
 * invoRiva — Design Tokens
 * ════════════════════════════════════════════════════════════
 * Source unique de vérité pour toutes les CSS custom properties.
 * VERSION 2.0 — Typographie augmentée pour meilleure lisibilité
 *
 * Structure :
 *   1. Thème Light   (default)
 *   2. Thème Dark    [data-theme="dark"]
 *   3. Thème Admin   [data-role="admin"]
 *   4. Familles de polices
 *   5. Constantes de mise en page
 *   6. Motion / animation
 * ════════════════════════════════════════════════════════════
 */

/* ══════════════════════════════════════════════════════════════
   1. THÈME LIGHT (défaut)
   ══════════════════════════════════════════════════════════════ */
:root {
    /* Fonds */
    --bg-canvas:  #f4f6fb;
    --bg-surface: #f8faff;
    --bg-card:    #ffffff;
    --bg-overlay: rgba(0, 0, 0, 0.40);

    /* Texte */
    --ink:     #0d0d0d;
    --ink-mid: #64748b;
    --ink-lt:  #b0a99f;
    --ink-inv: #f8fafc;

    /* Bordures */
    --border:       #e4e9f5;
    --border2:      #eef2fb;
    --border-focus: #2563eb;

    /* Accent principal (terracotta) */
    --accent:    #2563eb;
    --accent-hv: #1d4ed8;
    --accent-lt: #dbeafe;

    /* Couleurs sémantiques */
    --color-success:    #27ae60;
    --color-success-bg: #e8f8ef;
    --color-warning:    #e67e22;
    --color-warning-bg: #fff9ec;
    --color-danger:     #c0392b;
    --color-danger-bg:  #fdf0ef;
    --color-info:       #3498db;
    --color-info-bg:    #ebf4fb;

    /* Sidebar — MediLab cyan/electric-blue on deep dark */
    --sidebar-accent:      #22d3ee;
    --sidebar-accent-2:    #3b82f6;
    --sidebar-accent-soft: rgba(34, 211, 238, 0.10);
    --sidebar-bg:          #121826;
    --sidebar-text:        #8a94a8;
    --sidebar-text-active: #eef2f8;
    --sidebar-item-hover:  rgba(20, 26, 40, 0.55);
    --sidebar-item-active: rgba(34, 211, 238, 0.10);
    --sidebar-section:     #8a94a8;
    --sidebar-border:      rgba(255, 255, 255, 0.07);
    --sidebar-footer-bg:   transparent;

    /* Topbar */
    --topbar-bg:     #ffffff;
    --topbar-border: var(--border);

    /* Inputs */
    --input-bg:           #ffffff;
    --input-border:       #8faac8;
    --input-focus-border: #2563eb;
    --input-text:         #0d0d0d;
    --input-placeholder:  #7b8fab;

    /* Tables */
    --table-th-bg:  #f5f7ff;
    --table-stripe: #fafbff;
    --table-hover:  #eff4ff;
    --table-border: #eef2fb;

    /* Ombres */
    --shadow-xs:    0 1px 3px rgba(0,0,0,.06);
    --shadow-sm:    0 2px 8px rgba(0,0,0,.07);
    --shadow-md:    0 4px 16px rgba(0,0,0,.08);
    --shadow-lg:    0 8px 32px rgba(0,0,0,.10);
    --shadow-popup: 0 4px 20px rgba(0,0,0,.07);

    /* Scrollbar */
    --scrollbar-track:       transparent;
    --scrollbar-thumb:       #cbd5e1;
    --scrollbar-thumb-hover: #b0a99f;

    /* ── UI Customization bridge variables ─────────────────────────────
       These variables are controlled by the UI Customization admin panel
       (settings/ui-customization/). They are overridden at runtime via
       the DynamicCSSView endpoint loaded as the last stylesheet.
       Components MUST reference these variables instead of hard-coding
       values so that admin changes take effect globally.
       ─────────────────────────────────────────────────────────────── */
    --color-secondary:   #647488;   /* secondary UI colour (badges, tags) */
    --border-radius:     9px;       /* unified radius for cards/inputs/buttons */
    --border-width:      1px;       /* unified border thickness */
    --icon-color:        inherit;   /* icon tint – inherits text color by default */
    --icon-size:         1rem;      /* 16 px default icon size */
    --font-weight-base:  400;       /* body font weight — controlled by font_weight setting */
    --spacing-density:   1;         /* 1 = comfortable, 0.75 = compact */
    --color-focus-ring:  rgba(37, 99, 235, .12); /* focus box-shadow – matches default accent */

    /* ── Additional UI Customization bridge variables ──────────────────
       These are set by DynamicCSSView at runtime. Declared here so that
       all components always have a valid fallback value even before any
       admin customization is saved.
       ─────────────────────────────────────────────────────────────── */
    --header-font-size:  1.15;      /* h1–h3 unitless scale multiplier (header_font_size setting) */
    /* --radius-sm/md/lg/xl, --shadow-xs/md/lg/popup, --font-normal/medium/semibold/bold
       are also controlled by DynamicCSSView — defaults defined in the constants section below */
    --font-mono-family:  'JetBrains Mono', 'Fira Code', 'SF Mono', 'Courier New', monospace; /* monospace_font setting */
    --font-size-base:    16px;      /* mirrors font_size setting (sm=13/md=15/lg=16/xl=18px) */
}

/* ══════════════════════════════════════════════════════════════
   2. THÈME DARK
   ══════════════════════════════════════════════════════════════ */
[data-theme="dark"] {
    --bg-canvas:  #111110;
    --bg-surface: #1a1917;
    --bg-card:    #1e1d1b;
    --bg-overlay: rgba(0,0,0,.65);

    --ink:     #f0ece4;
    --ink-mid: #a09890;
    --ink-lt:  #5c5550;
    --ink-inv: #0d0d0d;

    --border:       #2e2c28;
    --border2:      #252320;
    --border-focus: #2563eb;

    --accent:    #3b82f6;
    --accent-hv: #2563eb;
    --accent-lt: #1e3a8a;

    --color-success:    #2ecc71;
    --color-success-bg: #0d2318;
    --color-warning:    #f39c12;
    --color-warning-bg: #231a08;
    --color-danger:     #e74c3c;
    --color-danger-bg:  #2a0d0b;
    --color-info:       #5dade2;
    --color-info-bg:    #0c1e2e;

    --sidebar-bg:          #161513;
    --sidebar-text:        rgba(240,236,228,.60);
    --sidebar-text-active: #f0ece4;
    --sidebar-item-hover:  rgba(255,255,255,.04);
    --sidebar-item-active: rgba(37,99,235,.22);
    --sidebar-section:     #5c5550;
    --sidebar-border:      rgba(255,255,255,.05);
    --sidebar-footer-bg:   transparent;

    --topbar-bg:     #1a1917;
    --topbar-border: #2e2c28;

    --input-bg:           #252320;
    --input-border:       #5a6880;
    --input-focus-border: #3b82f6;
    --input-text:         #f0ece4;
    --input-placeholder:  #6b7a96;

    --table-th-bg:  #1a1917;
    --table-stripe: #1a1917;
    --table-hover:  #252320;
    --table-border: #2e2c28;

    --shadow-xs:    0 1px 3px rgba(0,0,0,.25);
    --shadow-sm:    0 2px 8px rgba(0,0,0,.30);
    --shadow-md:    0 4px 16px rgba(0,0,0,.35);
    --shadow-lg:    0 8px 32px rgba(0,0,0,.40);
    --shadow-popup: 0 4px 20px rgba(0,0,0,.40);

    --scrollbar-thumb:       #2e2c28;
    --scrollbar-thumb-hover: #5c5550;
}

/* ══════════════════════════════════════════════════════════════
   3. THÈME ADMIN (variante pour les comptes is_staff)
   Activé en ajoutant data-role="admin" sur <html> côté JS
   ══════════════════════════════════════════════════════════════ */
[data-role="admin"] {
    /* Accent admin : bleu ardoise professionnel */
    --accent:    #2563eb;
    --accent-hv: #1d4ed8;
    --accent-lt: #dbeafe;

    /* Sidebar admin : bleu foncé au lieu du noir */
    --sidebar-bg:          #0f172a;
    --sidebar-item-active: rgba(37,99,235,.22);
    --sidebar-border:      rgba(255,255,255,.07);

    /* Topbar admin : bande d'identification */
    --topbar-bg:     #f8faff;
    --topbar-border: #c7d2fe;

    /* Focus ring admin */
    --border-focus: #2563eb;
}

/* Indicateur visuel topbar admin */
[data-role="admin"] .topbar {
    box-shadow: inset 0 3px 0 0 var(--accent);
}

[data-theme="dark"][data-role="admin"] {
    --accent:    #3b82f6;
    --accent-hv: #2563eb;
    --accent-lt: #1e3a8a;
    --sidebar-bg:     #0a0f1e;
    --topbar-bg:      #0f172a;
    --topbar-border:  #1e3a8a;
}

/* ══════════════════════════════════════════════════════════════
   4. POLICES — TYPOGRAPHIE AUGMENTÉE
   ══════════════════════════════════════════════════════════════ */
:root {
    /* Polices de base */
    --font-sans:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Helvetica Neue', sans-serif;
    --font-serif:   'DM Serif Display', Georgia, 'Times New Roman', serif;
    --font-mono:    'JetBrains Mono', 'Fira Code', 'SF Mono', 'Courier New', monospace;
    --font-body:    var(--font-sans);
    --font-heading: var(--font-serif);
    --font-main:    var(--font-sans);  /* alias for print templates — controlled by font_family setting */

    /* Échelle typographique augmentée pour meilleure lisibilité */
    --text-xxs:   0.75rem;   /* 12px */
    --text-xs:    0.8125rem; /* 13px */
    --text-sm:    0.875rem;  /* 14px */
    --text-base:  0.9375rem; /* 15px */
    --text-md:    1rem;      /* 16px */
    --text-lg:    1.125rem;  /* 18px */
    --text-xl:    1.25rem;   /* 20px */
    --text-2xl:   1.5rem;    /* 24px */
    --text-3xl:   1.875rem;  /* 30px */
    --text-4xl:   2.25rem;   /* 36px */
    --text-5xl:   3rem;      /* 48px */

    /* Interlignages */
    --leading-tight:   1.2;
    --leading-snug:    1.3;
    --leading-normal:  1.5;
    --leading-relaxed: 1.6;
    --leading-loose:   1.7;

    /* Épaisseurs */
    --font-light:    300;
    --font-regular:  400;
    --font-medium:   500;
    --font-semibold: 600;
    --font-bold:     700;
}

/* Application de la typographie de base */
body {
    font-family: var(--font-body);
    font-size: var(--text-base);
    line-height: var(--leading-normal);
    color: var(--ink);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Titres avec police serif */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    font-family: var(--font-heading);
    font-weight: var(--font-semibold);
    line-height: var(--leading-tight);
    letter-spacing: -0.01em;
}

h1, .h1 { font-size: var(--text-4xl); margin-bottom: 1.5rem; }
h2, .h2 { font-size: var(--text-3xl); margin-bottom: 1.25rem; }
h3, .h3 { font-size: var(--text-2xl); margin-bottom: 1rem; }
h4, .h4 { font-size: var(--text-xl); margin-bottom: 0.875rem; }
h5, .h5 { font-size: var(--text-lg); margin-bottom: 0.75rem; }
h6, .h6 { font-size: var(--text-md); margin-bottom: 0.75rem; }

/* Texte courant */
p, .text-body {
    font-size: var(--text-base);
    line-height: var(--leading-relaxed);
    margin-bottom: 1rem;
}

/* Texte petit mais lisible */
.text-small, small, .small {
    font-size: var(--text-sm);
    line-height: var(--leading-normal);
}

.text-xs {
    font-size: var(--text-xs);
    line-height: var(--leading-snug);
}

.text-xxs {
    font-size: var(--text-xxs);
    line-height: var(--leading-snug);
}

/* Texte grand */
.text-large, .lead {
    font-size: var(--text-lg);
    line-height: var(--leading-relaxed);
}

/* Éléments d'interface */
button, .btn, input, select, textarea, .input, .select {
    font-size: var(--text-sm);
    font-family: var(--font-body);
    line-height: var(--leading-normal);
}

/* Labels et légendes */
label, .label, .legend {
    font-size: var(--text-xs);
    font-weight: var(--font-medium);
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--ink-mid);
}

/* Code et monospace */
code, pre, .code, .mono {
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    line-height: var(--leading-normal);
}

/* ══════════════════════════════════════════════════════════════
   5. MISE EN PAGE
   ══════════════════════════════════════════════════════════════ */
:root {
    --sidebar-w:   252px;
    --sidebar-w-collapsed: 76px;
    --sidebar-font-display: 'Space Grotesk', sans-serif;
    --topbar-h:     64px;
    --content-max: 1440px;

    --radius-sm:   4px;
    --radius-md:   6px;
    --radius-lg:   8px;
    --radius-xl:   12px;
    --radius-full: 9999px;

    --spacing-1:  .25rem;  --spacing-2:  .5rem;
    --spacing-3:  .75rem;  --spacing-4:  1rem;
    --spacing-5:  1.25rem; --spacing-6:  1.5rem;
    --spacing-8:  2rem;    --spacing-10: 2.5rem;
    --spacing-12: 3rem;    --spacing-16: 4rem;
}

/* ══════════════════════════════════════════════════════════════
   6. MOTION
   ══════════════════════════════════════════════════════════════ */
:root {
    --ease-out:    cubic-bezier(0.0, 0.0, 0.2, 1);
    --ease-in:     cubic-bezier(0.4, 0.0, 1.0, 1);
    --ease-inout:  cubic-bezier(0.4, 0.0, 0.2, 1);
    --ease-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);
    --dur-fast:    150ms;
    --dur-base:    250ms;
    --dur-slow:    350ms;
    --dur-sidebar: 300ms;
}

@media (prefers-reduced-motion: reduce) {
    :root {
        --dur-fast: 0ms;
        --dur-base: 0ms;
        --dur-slow: 0ms;
        --dur-sidebar: 0ms;
    }

    * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* ══════════════════════════════════════════════════════════════
   7. RESPONSIVE TYPOGRAPHY
   ══════════════════════════════════════════════════════════════ */
/* Tablette */
@media (max-width: 1024px) {
    :root {
        --text-xxs:   0.7rem;   /* 11.2px */
        --text-xs:    0.75rem;  /* 12px */
        --text-sm:    0.8125rem; /* 13px */
        --text-base:  0.875rem;  /* 14px */
        --text-md:    0.9375rem; /* 15px */
        --text-lg:    1rem;      /* 16px */
        --text-xl:    1.125rem;  /* 18px */
        --text-2xl:   1.375rem;  /* 22px */
        --text-3xl:   1.75rem;   /* 28px */
        --text-4xl:   2rem;      /* 32px */
        --text-5xl:   2.5rem;    /* 40px */
    }
}

/* Mobile */
@media (max-width: 768px) {
    :root {
        --text-xxs:   0.6875rem; /* 11px */
        --text-xs:    0.75rem;   /* 12px */
        --text-sm:    0.8125rem; /* 13px */
        --text-base:  0.875rem;  /* 14px */
        --text-md:    0.9375rem; /* 15px */
        --text-lg:    1rem;      /* 16px */
        --text-xl:    1.125rem;  /* 18px */
        --text-2xl:   1.25rem;   /* 20px */
        --text-3xl:   1.5rem;    /* 24px */
        --text-4xl:   1.75rem;   /* 28px */
        --text-5xl:   2rem;      /* 32px */

        --topbar-h: 56px;
        --sidebar-w: 240px;
    }

    h1, .h1 { font-size: var(--text-3xl); margin-bottom: 1rem; }
    h2, .h2 { font-size: var(--text-2xl); margin-bottom: 0.875rem; }
    h3, .h3 { font-size: var(--text-xl); margin-bottom: 0.75rem; }
}

/* Très petit mobile */
@media (max-width: 480px) {
    :root {
        --text-xs:    0.6875rem; /* 11px */
        --text-sm:    0.75rem;   /* 12px */
        --text-base:  0.8125rem; /* 13px */
        --text-md:    0.875rem;  /* 14px */
        --text-lg:    0.9375rem; /* 15px */
        --text-xl:    1rem;      /* 16px */
        --text-2xl:   1.125rem;  /* 18px */
        --text-3xl:   1.375rem;  /* 22px */
        --text-4xl:   1.5rem;    /* 24px */
    }
}

/* ══════════════════════════════════════════════════════════════
   8. UTILITAIRES TYPOGRAPHIQUES
   ══════════════════════════════════════════════════════════════ */
/* Classes de texte */
.text-xxs { font-size: var(--text-xxs); }
.text-xs  { font-size: var(--text-xs); }
.text-sm  { font-size: var(--text-sm); }
.text-base { font-size: var(--text-base); }
.text-md  { font-size: var(--text-md); }
.text-lg  { font-size: var(--text-lg); }
.text-xl  { font-size: var(--text-xl); }
.text-2xl { font-size: var(--text-2xl); }
.text-3xl { font-size: var(--text-3xl); }
.text-4xl { font-size: var(--text-4xl); }
.text-5xl { font-size: var(--text-5xl); }

/* Épaisseurs */
.font-light    { font-weight: var(--font-light); }
.font-regular  { font-weight: var(--font-regular); }
.font-medium   { font-weight: var(--font-medium); }
.font-semibold { font-weight: var(--font-semibold); }
.font-bold     { font-weight: var(--font-bold); }

/* Interlignages */
.leading-tight   { line-height: var(--leading-tight); }
.leading-snug    { line-height: var(--leading-snug); }
.leading-normal  { line-height: var(--leading-normal); }
.leading-relaxed { line-height: var(--leading-relaxed); }
.leading-loose   { line-height: var(--leading-loose); }

/* Couleurs de texte */
.text-ink      { color: var(--ink); }
.text-ink-mid  { color: var(--ink-mid); }
.text-ink-lt   { color: var(--ink-lt); }
.text-success  { color: var(--color-success); }
.text-warning  { color: var(--color-warning); }
.text-danger   { color: var(--color-danger); }
.text-info     { color: var(--color-info); }
.text-accent   { color: var(--accent); }

/* Utilitaires généraux */
.text-truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.text-center    { text-align: center; }
.text-left      { text-align: left; }
.text-right     { text-align: right; }
.text-uppercase { text-transform: uppercase; }
.text-capitalize { text-transform: capitalize; }

/* ══════════════════════════════════════════════════════════════
   9. AMÉLIORATIONS GLOBALES
   ══════════════════════════════════════════════════════════════ */
/* Meilleur contraste et lisibilité */
::selection {
    background: var(--accent-lt);
    color: var(--accent);
}

::-moz-selection {
    background: var(--accent-lt);
    color: var(--accent);
}

/* Liens */
a {
    color: var(--accent);
    text-decoration: none;
    transition: color var(--dur-fast) var(--ease-out);
}

a:hover {
    color: var(--accent-hv);
    /* text-decoration: underline; */
}

/* Inputs améliorés */
input, textarea, select {
    font-size: var(--text-sm);
    padding: 0.6rem 0.75rem;
    border-radius: var(--radius-md);
    border: 1px solid var(--input-border);
    background: var(--input-bg);
    color: var(--input-text);
    transition: border-color var(--dur-fast), box-shadow var(--dur-fast);
}

input:focus, textarea:focus, select:focus {
    outline: none;
    border-color: var(--border-focus);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}

/* Boutons */
button, .btn {
    font-size: var(--text-sm);
    font-weight: var(--font-medium);
    padding: 0.6rem 1.25rem;
    border-radius: var(--radius-md);
    transition: all var(--dur-fast) var(--ease-out);
    cursor: pointer;
}

/* Tables */
table {
    font-size: var(--text-sm);
}

th {
    font-weight: var(--font-semibold);
    font-size: var(--text-xs);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--ink-mid);
    padding: 0.75rem 1rem;
}

td {
    padding: 0.75rem 1rem;
    font-size: var(--text-sm);
}

/* Badges et tags */
.badge, .tag {
    font-size: var(--text-xxs);
    font-weight: var(--font-semibold);
    padding: 0.2rem 0.5rem;
    border-radius: var(--radius-full);
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

/* Tooltips */
[data-tooltip] {
    position: relative;
    cursor: help;
}

[data-tooltip]:before {
    content: attr(data-tooltip);
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    background: var(--ink);
    color: var(--ink-inv);
    font-size: var(--text-xxs);
    padding: 0.25rem 0.5rem;
    border-radius: var(--radius-sm);
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    transition: opacity var(--dur-fast);
    z-index: 1000;
}

[data-tooltip]:hover:before {
    opacity: 1;
}

/* ══════════════════════════════════════════════════════════════
   10. SCROLLBAR STYLES
   ══════════════════════════════════════════════════════════════ */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: var(--scrollbar-track);
    border-radius: var(--radius-full);
}

::-webkit-scrollbar-thumb {
    background: var(--scrollbar-thumb);
    border-radius: var(--radius-full);
}

::-webkit-scrollbar-thumb:hover {
    background: var(--scrollbar-thumb-hover);
}

/* Firefox */
* {
    scrollbar-width: thin;
    scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
}

/* ══════════════════════════════════════════════════════════════
   11. ANIMATIONS GLOBALES
   ══════════════════════════════════════════════════════════════ */
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes slideInUp {
    from {
        transform: translateY(20px);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

@keyframes slideInDown {
    from {
        transform: translateY(-20px);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

.fade-in {
    animation: fadeIn var(--dur-base) var(--ease-out);
}

.slide-in-up {
    animation: slideInUp var(--dur-base) var(--ease-out);
}

.slide-in-down {
    animation: slideInDown var(--dur-base) var(--ease-out);
}