/* ═══════════════════════════════════════════════════════════════════
   GRÉSIVAUDAN INFORMATIQUE — Feuille de style complémentaire
   À charger APRÈS DaisyUI v5. Complète le thème défini dans le build Tailwind v4.
   Objectif : pro, lisible, sobre, sans fatigue visuelle.
   ═══════════════════════════════════════════════════════════════════ */

/* ── 1. TYPOGRAPHIE ────────────────────────────────────────────── */
body {
    font-family: 'Inter', ui-sans-serif, system-ui, -apple-system, sans-serif;
    font-feature-settings: 'cv11', 'ss01';       /* Inter : alternates pour l/1, I */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Taille de texte de base confortable */
html { font-size: 15px; }

/* ── 2. ACCESSIBILITÉ : FOCUS CLAVIER ──────────────────────────── */
/* Anneau de focus visible et cohérent sur tous les éléments interactifs */
*:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
    border-radius: var(--radius-field, 0.375rem);
    transition: outline-offset 0.1s ease;
}

/* Pas de outline sur les éléments non-clavier (souris) */
*:focus:not(:focus-visible) { outline: none; }

/* ── 3. CARTES (GÉNÉRIQUE) ─────────────────────────────────────── */
.card,
.gresi-card {
    border-radius: var(--radius-box, 0.5rem);
    border: 1px solid var(--color-base-300);
    box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.04);
    transition: box-shadow 0.15s ease, border-color 0.15s ease;
}

.card:hover,
.gresi-card:hover {
    box-shadow: 0 4px 12px -2px rgb(0 0 0 / 0.08);
}

/* ── 4. STAT CARDS (KPI) ───────────────────────────────────────── */
.gresi-stat {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    padding: 1.25rem;
    border-radius: var(--radius-box, 0.5rem);
    border: 1px solid var(--color-base-300);
    background-color: var(--color-base-100);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.gresi-stat:hover {
    box-shadow: 0 4px 12px -2px rgb(0 0 0 / 0.06);
}

.gresi-stat-label {
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: color-mix(in oklch, var(--color-base-content) 50%, transparent);
    line-height: 1;
}

.gresi-stat-value {
    font-size: 1.75rem;
    font-weight: 800;
    line-height: 1.2;
    color: var(--color-base-content);
}

.gresi-stat-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: var(--radius-field, 0.375rem);
    font-size: 1.125rem;
}

/* Variantes couleur pour les stat cards */
.gresi-stat--primary .gresi-stat-icon { background: color-mix(in oklch, var(--color-primary) 12%, transparent); color: var(--color-primary); }
.gresi-stat--info    .gresi-stat-icon { background: color-mix(in oklch, var(--color-info) 12%, transparent); color: var(--color-info); }
.gresi-stat--success .gresi-stat-icon { background: color-mix(in oklch, var(--color-success) 12%, transparent); color: var(--color-success); }
.gresi-stat--warning .gresi-stat-icon { background: color-mix(in oklch, var(--color-warning) 12%, transparent); color: var(--color-warning); }
.gresi-stat--error   .gresi-stat-icon { background: color-mix(in oklch, var(--color-error) 12%, transparent); color: var(--color-error); }
.gresi-stat--neutral .gresi-stat-icon { background: color-mix(in oklch, var(--color-neutral) 12%, transparent); color: var(--color-neutral); }

/* ── 5. BADGES DE STATUT ───────────────────────────────────────── */
/* Badges avec pastille de couleur + texte, pour une lecture rapide */
.gresi-status-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.25rem 0.625rem;
    border-radius: var(--radius-selector, 0.375rem);
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1.25rem;
    white-space: nowrap;
}

.gresi-status-badge::before {
    content: '';
    display: inline-block;
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 9999px;
    flex-shrink: 0;
}

.gresi-status-badge--success { background: color-mix(in oklch, var(--color-success) 12%, transparent); color: var(--color-success); }
.gresi-status-badge--success::before { background: var(--color-success); }

.gresi-status-badge--warning { background: color-mix(in oklch, var(--color-warning) 15%, transparent); color: oklch(0.45 0.12 85); }
.gresi-status-badge--warning::before { background: var(--color-warning); }

.gresi-status-badge--error { background: color-mix(in oklch, var(--color-error) 12%, transparent); color: var(--color-error); }
.gresi-status-badge--error::before { background: var(--color-error); }

.gresi-status-badge--info { background: color-mix(in oklch, var(--color-info) 12%, transparent); color: var(--color-info); }
.gresi-status-badge--info::before { background: var(--color-info); }

.gresi-status-badge--neutral { background: color-mix(in oklch, var(--color-neutral) 12%, transparent); color: var(--color-neutral); }
.gresi-status-badge--neutral::before { background: color-mix(in oklch, var(--color-neutral) 60%, transparent); }

/* En dark mode, le texte warning doit rester lisible */
html[data-theme="dark"] .gresi-status-badge--warning { color: var(--color-warning); }

/* ── 6. TABLEAUX (affinement) ──────────────────────────────────── */
.table {
    border-radius: var(--radius-box, 0.5rem);
    overflow: hidden;
}

.table thead tr {
    background: var(--color-base-200);
    border-bottom: 2px solid var(--color-base-300);
}

.table thead th {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: color-mix(in oklch, var(--color-base-content) 55%, transparent);
    white-space: nowrap;
}

.table tbody tr {
    border-bottom: 1px solid color-mix(in oklch, var(--color-base-300) 50%, transparent);
    transition: background-color 0.1s ease;
}

.table tbody tr:nth-child(even) {
    background: color-mix(in oklch, var(--color-base-200) 40%, transparent);
}

.table tbody tr:hover {
    background: var(--color-base-200);
}

.table tbody td {
    font-size: 0.875rem;
    vertical-align: middle;
}

/* ── 7. SIDEBAR / MENU NAVIGATION ──────────────────────────────── */
.menu > ul > li > a,
.menu li > a {
    border-radius: var(--radius-field, 0.375rem);
    font-size: 0.875rem;
    font-weight: 500;
    padding: 0.5rem 0.75rem;
    color: color-mix(in oklch, var(--color-base-content) 75%, transparent);
    transition: background-color 0.1s ease, color 0.1s ease;
}

.menu li > a:hover {
    background: var(--color-base-200);
    color: var(--color-base-content);
}

/* Élément actif : sobre, trait latéral primary + fond léger */
.menu li > a.active,
.menu li > a[class*="active"] {
    background: color-mix(in oklch, var(--color-primary) 8%, transparent);
    color: var(--color-primary);
    font-weight: 600;
    position: relative;
}

.menu li > a.active::before,
.menu li > a[class*="active"]::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 3px;
    height: 60%;
    background: var(--color-primary);
    border-radius: 0 2px 2px 0;
}

.menu-title {
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: color-mix(in oklch, var(--color-base-content) 40%, transparent);
    margin-top: 1rem;
    margin-bottom: 0.25rem;
    padding-left: 0.75rem;
}

/* ── 8. FORMULAIRES ────────────────────────────────────────────── */
.input, .select, .textarea {
    border-radius: var(--radius-field, 0.375rem);
    border: 1px solid var(--color-base-300);
    background: var(--color-base-100);
    font-size: 0.875rem;
    transition: border-color 0.1s ease, box-shadow 0.1s ease;
}

.input:focus, .select:focus, .textarea:focus {
    border-color: color-mix(in oklch, var(--color-primary) 60%, transparent);
    box-shadow: 0 0 0 3px color-mix(in oklch, var(--color-primary) 12%, transparent);
    outline: none;
}

/* Label de formulaire */
label.form-label,
.form-label-legacy > label {
    font-size: 0.8125rem;
    font-weight: 600;
    color: color-mix(in oklch, var(--color-base-content) 80%, transparent);
    margin-bottom: 0.25rem;
}

/* ── 9. BOUTONS (affinement) ───────────────────────────────────── */
.btn {
    border-radius: var(--radius-field, 0.375rem);
    font-weight: 600;
    letter-spacing: -0.01em;
    transition: all 0.12s ease;
}

.btn-primary:hover {
    filter: brightness(1.08);
    box-shadow: 0 2px 8px -2px color-mix(in oklch, var(--color-primary) 40%, transparent);
}

.btn-ghost:hover {
    background: var(--color-base-200);
}

/* ── 10. SCROLLBARS ────────────────────────────────────────────── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--color-base-300); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: color-mix(in oklch, var(--color-base-content) 30%, transparent); }

/* ── 11. ÉTAT VIDE (empty state) ───────────────────────────────── */
.gresi-empty {
    text-align: center;
    padding: 3rem 1.5rem;
    color: color-mix(in oklch, var(--color-base-content) 40%, transparent);
}

.gresi-empty i,
.gresi-empty .icon {
    font-size: 2.5rem;
    margin-bottom: 0.75rem;
    opacity: 0.4;
}

.gresi-empty p {
    font-size: 0.875rem;
}

/* ── 12. IMPRESSION ────────────────────────────────────────────── */
@media print {
    @page { size: A4 portrait; margin: 1cm; }
    .drawer-side, .navbar, .no-print, #toast-container, #flash-messages-data {
        display: none !important;
    }
    body {
        background-color: white !important;
        color: black !important;
    }
    .drawer-content {
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    .print-only { display: block !important; }
}
@media screen { .print-only { display: none !important; } }

/* ── 13. SÉLECTION DE TEXTE ────────────────────────────────────── */
::selection {
    background: color-mix(in oklch, var(--color-primary) 15%, transparent);
    color: var(--color-base-content);
}

/* ── 14. LIENS ─────────────────────────────────────────────────── */
a {
    color: var(--color-primary);
    text-decoration: none;
    transition: color 0.1s ease;
}

a:hover {
    color: var(--color-primary);
}

/* ── 15. ALERTE / BANNIÈRE SÉMANTIQUE ─────────────────────────── */
/* Bloc d'alerte harmonisé : remplace les gradients hardcodés */
.gresi-alert {
    border-radius: var(--radius-box, 0.5rem);
    border: 1px solid;
    padding: 1.25rem 1.5rem;
}
.gresi-alert--warning { background: color-mix(in oklch, var(--color-warning) 8%, transparent); border-color: color-mix(in oklch, var(--color-warning) 30%, transparent); }
.gresi-alert--error   { background: color-mix(in oklch, var(--color-error) 8%, transparent); border-color: color-mix(in oklch, var(--color-error) 25%, transparent); }
.gresi-alert--info    { background: color-mix(in oklch, var(--color-info) 8%, transparent); border-color: color-mix(in oklch, var(--color-info) 25%, transparent); }
.gresi-alert--success { background: color-mix(in oklch, var(--color-success) 8%, transparent); border-color: color-mix(in oklch, var(--color-success) 25%, transparent); }

.gresi-alert-icon {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: var(--radius-field, 0.375rem);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.125rem;
    flex-shrink: 0;
}
.gresi-alert--warning .gresi-alert-icon { background: var(--color-warning); color: var(--color-warning-content); }
.gresi-alert--error   .gresi-alert-icon { background: var(--color-error); color: var(--color-error-content); }
.gresi-alert--info    .gresi-alert-icon { background: var(--color-info); color: var(--color-info-content); }
.gresi-alert--success .gresi-alert-icon { background: var(--color-success); color: var(--color-success-content); }

/* ── 16. SECTION CARD — header coloré sémantique ──────────────── */
/* Pour task_detail sections client/suivi/note/liées */
.gresi-section--info    { background: color-mix(in oklch, var(--color-info) 4%, transparent); border-color: color-mix(in oklch, var(--color-info) 20%, transparent); }
.gresi-section--warning { background: color-mix(in oklch, var(--color-warning) 6%, transparent); border-color: color-mix(in oklch, var(--color-warning) 25%, transparent); }
.gresi-section--success { background: color-mix(in oklch, var(--color-success) 4%, transparent); border-color: color-mix(in oklch, var(--color-success) 20%, transparent); }
.gresi-section--neutral { background: var(--color-base-200); border-color: var(--color-base-300); }

.gresi-section-header {
    padding: 0.75rem 1.25rem;
    border-bottom: 1px solid;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 700;
    font-size: 0.875rem;
}
.gresi-section--info    .gresi-section-header { border-color: color-mix(in oklch, var(--color-info) 20%, transparent); background: color-mix(in oklch, var(--color-info) 8%, transparent); color: var(--color-info); }
.gresi-section--warning .gresi-section-header { border-color: color-mix(in oklch, var(--color-warning) 25%, transparent); background: color-mix(in oklch, var(--color-warning) 12%, transparent); color: oklch(0.45 0.12 85); }
.gresi-section--success .gresi-section-header { border-color: color-mix(in oklch, var(--color-success) 20%, transparent); background: color-mix(in oklch, var(--color-success) 8%, transparent); color: var(--color-success); }
.gresi-section--neutral .gresi-section-header { border-color: var(--color-base-300); background: color-mix(in oklch, var(--color-base-200) 60%, transparent); color: color-mix(in oklch, var(--color-base-content) 80%, transparent); }

html[data-theme="dark"] .gresi-section--warning .gresi-section-header { color: var(--color-warning); }

/* ── 17. KANBAN — Couleurs statuts via variables thème ────────── */
/* Remplace les hex bruts #38bdf8 etc par les variables OKLCH */
:root, html[data-theme="light"] {
    --kanban-depose:    oklch(0.62 0.14 230);   /* info bleu */
    --kanban-en-cours:  oklch(0.75 0.15 85);     /* warning jaune */
    --kanban-attente:   oklch(0.70 0.15 50);     /* warning orange (plus chaud) */
    --kanban-termine:   oklch(0.62 0.15 150);    /* success vert */
    --kanban-restitue:  oklch(0.55 0.01 260);    /* neutral gris */
    --kanban-urgent:    oklch(0.55 0.20 20);     /* error rouge */
}
html[data-theme="dark"] {
    --kanban-depose:    oklch(0.68 0.14 230);
    --kanban-en-cours:  oklch(0.78 0.16 85);
    --kanban-attente:   oklch(0.73 0.16 50);
    --kanban-termine:   oklch(0.68 0.15 150);
    --kanban-restitue:  oklch(0.60 0.01 260);
    --kanban-urgent:    oklch(0.62 0.20 20);
}

/* ── 18. CHAT BUBBLE (options page, assistant) ─────────────────── */
.gresi-chat-bubble-user {
    background: color-mix(in oklch, var(--color-primary) 10%, transparent);
    color: var(--color-base-content);
    border: 1px solid color-mix(in oklch, var(--color-primary) 15%, transparent);
}
.gresi-chat-bubble-ai {
    background: var(--color-base-200);
    color: color-mix(in oklch, var(--color-base-content) 90%, transparent);
    border: 1px solid var(--color-base-300);
}

/* ── 19. FILTRE ALPHABÉTIQUE (clients) ─────────────────────────── */
.gresi-alpha-filter {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: var(--radius-field, 0.375rem);
    font-size: 0.75rem;
    font-weight: 700;
    color: color-mix(in oklch, var(--color-base-content) 50%, transparent);
    transition: all 0.12s ease;
}
.gresi-alpha-filter:hover {
    background: var(--color-base-200);
    color: color-mix(in oklch, var(--color-base-content) 80%, transparent);
}
.gresi-alpha-filter.active {
    background: color-mix(in oklch, var(--color-primary) 10%, transparent);
    color: var(--color-primary);
}

/* ── 20. BADGE ACTIVITÉ (clients) ──────────────────────────────── */
/* Remplace les teal/purple/orange hardcodés */
.gresi-activity-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.75rem;
    border-radius: var(--radius-field, 0.375rem);
    font-size: 0.75rem;
    font-weight: 700;
    border: 1px solid;
}
.gresi-activity-badge--info    { background: color-mix(in oklch, var(--color-info) 10%, transparent); color: var(--color-info); border-color: color-mix(in oklch, var(--color-info) 25%, transparent); }
.gresi-activity-badge--success { background: color-mix(in oklch, var(--color-success) 10%, transparent); color: var(--color-success); border-color: color-mix(in oklch, var(--color-success) 25%, transparent); }
.gresi-activity-badge--warning { background: color-mix(in oklch, var(--color-warning) 10%, transparent); color: var(--color-warning); border-color: color-mix(in oklch, var(--color-warning) 25%, transparent); }
.gresi-activity-badge--accent  { background: color-mix(in oklch, var(--color-accent) 10%, transparent); color: var(--color-accent); border-color: color-mix(in oklch, var(--color-accent) 25%, transparent); }

/* ── 20bis. WIZARD STEPS DAISYUI ─────────────────────────────── */
/* Le conteneur .steps (display:inline-grid; grid-auto-flow:column)   */
/* est purgé par le build Tailwind → on le redéfinit.                 */
/* + variantes couleur step-primary/step-success (themes:false).      */

/* Container : grille horizontale */
#wiz-steps {
  display: inline-grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  overflow: hidden;
  overflow-x: auto;
  counter-reset: step;
  width: 100%;
}

/* Couleurs des étapes (spécificité > DaisyUI) */
#wiz-steps .step-primary::after {
  background-color: var(--color-primary);
  color: var(--color-primary-content);
}
#wiz-steps .step-success::after {
  background-color: var(--color-success);
  color: var(--color-success-content);
}

/* Curseur + sélection */
#wiz-steps .step { cursor: pointer; user-select: none; }

/* ── Mobile : passer en vertical ── */
@media (max-width: 1023px) {
  #wiz-steps {
    grid-auto-flow: row;
    grid-auto-columns: auto;
  }
  #wiz-steps .step {
    grid-template-columns: 40px 1fr;
    grid-template-rows: auto;
    min-height: 3rem;
    justify-items: start;
    gap: 0.5rem;
  }
  #wiz-steps .step::before {
    height: 100%;
    width: 0.5rem;
    transform: translate(-50%, -50%);
    margin-inline-start: 0.5rem;
  }
}

/* ── 21. SCHÉMA DE VERROUILLAGE (PATTERN LOCK) ──────────────────── */
/* Styles explicites pour le dessin du schéma Android — robuste même
   sans les classes utilitaires Tailwind/DaisyUI dynamiques */

.pattern-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.5rem;
    padding: 0.5rem;
    background: var(--color-base-200);
    border-radius: 0.5rem;
    position: relative;
    user-select: none;
    -webkit-user-select: none;
    touch-action: none;              /* Empêche le scroll sur mobile pendant le dessin */
}

.pattern-container svg.pattern-lines {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1;
}

.pattern-container svg.pattern-lines line {
    stroke: var(--color-primary);
    stroke: var(--color-primary);
    stroke-width: 2.5;
    stroke-linecap: round;
}

.pattern-dot {
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 9999px;
    background: var(--color-base-100);
    border: 2px solid var(--color-base-300);
    margin: 0 auto;
    position: relative;
    z-index: 10;
    cursor: pointer;
    transition: background-color 0.1s ease, border-color 0.1s ease, transform 0.1s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.pattern-dot:hover {
    border-color: color-mix(in oklch, var(--color-primary) 50%, transparent);
    transform: scale(1.15);
}

/* Point activé (dessiné) */
.pattern-dot.active,
.pattern-dot.bg-primary {
    background: var(--color-primary);
    border-color: var(--color-primary);
    transform: scale(1.1);
}

/* Version large (create.html) */
.pattern-dot--lg {
    width: 2rem;
    height: 2rem;
}

.pattern-container--lg {
    gap: 1rem;
    padding: 1rem;
    width: 12rem;                    /* 3×2rem + 2×1rem + 2×1rem padding */
}