/* ==========================================================================
   Composants : verre, cartes 3D, boutons 3D, formulaires, badges, tableaux.
   Règles : propriétés logiques, états jamais signalés par la couleur seule,
   animation continue interdite (sauf spinner de chargement, désactivé si reduced-motion).
   ========================================================================== */

/* ---------- Verre (glassmorphism) ---------- */
.glass, .card, .sidebar, .topbar {
    background: var(--glass-bg);
    -webkit-backdrop-filter: blur(var(--blur)) saturate(140%);
    backdrop-filter: blur(var(--blur)) saturate(140%);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .glass, .card, .sidebar, .topbar { background: var(--surface-solid); }
}
@media (prefers-reduced-transparency: reduce) {
    .glass, .card, .sidebar, .topbar { background: var(--surface-solid); -webkit-backdrop-filter: none; backdrop-filter: none; }
}
@media (max-width: 768px) { :root { --blur: 8px; } }
/* Mode « lite » (appareils faibles, détecté par app.js) : plus de flou ni de 3D */
[data-effects="lite"] .glass, [data-effects="lite"] .card, [data-effects="lite"] .sidebar, [data-effects="lite"] .topbar {
    background: var(--surface-solid); -webkit-backdrop-filter: none; backdrop-filter: none;
}

/* ---------- Cartes 3D ---------- */
.card {
    --rx: 0deg; --ry: 0deg;
    position: relative;
    padding: var(--space-5);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-lg);
    box-shadow:
        inset 0 1px 0 var(--glass-highlight),
        0 1px 2px rgb(var(--shadow-rgb) / .10),
        0 6px 14px rgb(var(--shadow-rgb) / .10),
        0 18px 40px rgb(var(--shadow-rgb) / .12);
    transform: perspective(900px) rotateX(var(--rx)) rotateY(var(--ry)) translateZ(0);
    transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
/* Reflet léger en haut de la carte */
.card::before {
    content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
    background: linear-gradient(160deg, var(--glass-highlight), transparent 38%);
    opacity: .55;
}
.card > * { position: relative; }
@media (hover: hover) {
    .card.is-interactive:hover {
        transform: perspective(900px) rotateX(var(--rx)) rotateY(var(--ry)) translateY(-4px);
        box-shadow:
            inset 0 1px 0 var(--glass-highlight),
            0 2px 4px rgb(var(--shadow-rgb) / .10),
            0 12px 24px rgb(var(--shadow-rgb) / .14),
            0 28px 56px rgb(var(--shadow-rgb) / .16);
    }
}
.card:focus-within { outline: 2px solid var(--focus); outline-offset: 2px; }
.card.is-selected { border-color: var(--primary); box-shadow: 0 0 0 2px var(--primary), 0 12px 28px rgb(var(--shadow-rgb) / .16); }
.card.is-selected::after {
    content: "✓"; position: absolute; inset-block-start: var(--space-3); inset-inline-end: var(--space-3);
    inline-size: 1.6rem; block-size: 1.6rem; display: grid; place-items: center; border-radius: 50%;
    background: var(--primary); color: var(--primary-on); font-weight: 800;
}
.card.is-disabled, .card[aria-disabled="true"] { opacity: .6; filter: grayscale(.4); pointer-events: none; }
.card-title { font-size: var(--text-lg); margin: 0 0 var(--space-2); }
[data-effects="lite"] .card { transform: none !important; }

/* ---------- Cartes KPI ---------- */
.kpi { display: grid; gap: var(--space-2); }
.kpi-label { color: var(--text-muted); font-size: var(--text-sm); font-weight: 600; display: flex; align-items: center; gap: var(--space-2); }
.kpi-value { font-family: var(--font-display); font-size: var(--text-2xl); font-weight: 700; line-height: 1.1; font-variant-numeric: tabular-nums; }
.kpi-note { font-size: var(--text-sm); color: var(--text-muted); }

/* ---------- Boutons 3D ---------- */
.btn {
    --btn-bg: var(--surface-solid); --btn-fg: var(--text); --btn-edge: var(--line);
    --btn-depth: 4px;
    display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
    min-block-size: var(--touch-min); min-inline-size: var(--touch-min);
    padding: .55rem 1.1rem;
    font: inherit; font-weight: 700; line-height: 1.2; text-decoration: none; cursor: pointer;
    color: var(--btn-fg);
    background: linear-gradient(180deg, color-mix(in srgb, var(--btn-bg) 88%, #fff) 0%, var(--btn-bg) 55%, color-mix(in srgb, var(--btn-bg) 90%, #000) 100%);
    border: 1px solid var(--btn-edge);
    border-radius: var(--radius-md);
    box-shadow:
        inset 0 1px 0 rgb(255 255 255 / .38),
        0 var(--btn-depth) 0 var(--btn-edge),
        0 calc(var(--btn-depth) + 4px) 14px rgb(var(--shadow-rgb) / .22);
    transform: translateY(0);
    transition: transform var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease), filter var(--dur-fast) var(--ease);
    -webkit-tap-highlight-color: transparent;
    user-select: none;
}
@media (hover: hover) {
    .btn:hover:not(:disabled):not([aria-disabled="true"]) {
        transform: translateY(-2px);
        box-shadow:
            inset 0 1px 0 rgb(255 255 255 / .45),
            0 calc(var(--btn-depth) + 2px) 0 var(--btn-edge),
            0 calc(var(--btn-depth) + 8px) 18px rgb(var(--shadow-rgb) / .26);
    }
}
.btn:active:not(:disabled):not([aria-disabled="true"]) {
    transform: translateY(calc(var(--btn-depth) - 1px));
    box-shadow: inset 0 2px 4px rgb(0 0 0 / .25), 0 1px 0 var(--btn-edge);
    transition-duration: 60ms;
}
.btn:disabled, .btn[aria-disabled="true"] {
    opacity: .55; cursor: not-allowed; filter: grayscale(.5); transform: none;
    box-shadow: 0 1px 0 var(--btn-edge);
}
.btn .icon { inline-size: 1.2em; block-size: 1.2em; }

/* Variantes : l'icône ET le libellé portent le sens, la couleur n'est qu'un renfort */
.btn-add, .btn-save, .btn-primary, .btn-pay { --btn-bg: var(--primary); --btn-fg: var(--primary-on); --btn-edge: var(--primary-edge); }
.btn-confirm { --btn-bg: var(--success-fill); --btn-fg: var(--success-on); --btn-edge: var(--success-edge); }
.btn-delete  { --btn-bg: var(--danger-fill);  --btn-fg: var(--danger-on);  --btn-edge: var(--danger-edge); }
.btn-pay { border-style: double; border-width: 3px; }   /* distingue « Payer » de « Ajouter » sans dépendre de la teinte */
.btn-edit, .btn-print, .btn-export, .btn-cancel { --btn-bg: var(--surface-solid); --btn-fg: var(--text); --btn-edge: var(--line); }
.btn-cancel { border-style: dashed; }
.btn-sm { min-block-size: 36px; padding: .35rem .8rem; --btn-depth: 3px; font-size: var(--text-sm); }
.btn-block { inline-size: 100%; }

/* États : chargement, succès, erreur (icône + libellé, pas seulement la couleur) */
.btn.is-loading { pointer-events: none; opacity: .85; }
.btn.is-loading .icon { animation: none; }
@media (prefers-reduced-motion: no-preference) {
    .btn.is-loading .icon { animation: plat-spin .9s linear infinite; }
}
@keyframes plat-spin { to { transform: rotate(360deg); } }
.btn.is-success { --btn-bg: var(--success-fill); --btn-fg: var(--success-on); --btn-edge: var(--success-edge); }
.btn.is-error   { --btn-bg: var(--danger-fill);  --btn-fg: var(--danger-on);  --btn-edge: var(--danger-edge); }

/* ---------- Formulaires ---------- */
label { display: block; margin-block: var(--space-3) var(--space-1); font-weight: 600; }
.input, input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]), select, textarea {
    inline-size: 100%; min-block-size: var(--touch-min); padding: .6rem .8rem;
    font: inherit; color: var(--text);
    background: var(--surface-solid); border: 1px solid var(--line); border-radius: var(--radius-sm);
    box-shadow: inset 0 2px 4px rgb(var(--shadow-rgb) / .08);
}
input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 3px solid var(--focus); outline-offset: 1px; }
input[aria-invalid="true"] { border-color: var(--danger-text); border-inline-start-width: 5px; }
.field-error { color: var(--danger-text); font-size: var(--text-sm); font-weight: 600; }
.select-inline { inline-size: auto; min-inline-size: 8rem; }
label.label-reset { margin: 0; }

/* ---------- Alertes (icône + texte) ---------- */
.alert { display: flex; gap: var(--space-2); align-items: flex-start; padding: var(--space-3) var(--space-4); border-radius: var(--radius-sm); border: 1px solid; border-inline-start-width: 6px; background: var(--surface-solid); font-weight: 600; margin-block-end: var(--space-3); }
.alert-error   { color: var(--danger-text);  border-color: var(--danger-text); }
.alert-success { color: var(--success-text); border-color: var(--success-text); }
.alert-warning { color: var(--warning-text); border-color: var(--warning-text); }

/* ---------- Badges de statut ---------- */
.badge { display: inline-flex; align-items: center; gap: var(--space-1); padding: .15rem .65rem; border-radius: var(--radius-pill); border: 1px solid currentColor; background: var(--surface-solid); font-size: var(--text-sm); font-weight: 700; }
.badge-available { color: var(--success-text); }
.badge-reserved  { color: var(--warning-text); border-style: dashed; }
.badge-sold      { color: var(--danger-text);  border-style: double; border-width: 3px; }

/* ---------- Tableaux ---------- */
.table-wrap { overflow-x: auto; border-radius: var(--radius-md); border: 1px solid var(--line); background: var(--surface-solid); }
table { inline-size: 100%; border-collapse: collapse; }
th, td { padding: var(--space-3) var(--space-4); text-align: start; border-block-end: 1px solid var(--line); }
th { font-size: var(--text-sm); color: var(--text-muted); text-transform: uppercase; letter-spacing: .04em; }
td.num, th.num { text-align: end; font-variant-numeric: tabular-nums; }
tbody tr:hover { background: color-mix(in srgb, var(--primary) 7%, transparent); }

/* ---------- Mouvement réduit : tout est instantané ---------- */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; }
    .card, .card.is-interactive:hover { transform: none !important; }
    .btn:hover:not(:disabled) { transform: none; }
}