/* =====================================================================================
   THÈME DESIGN « PREMIUM » — couche d'amélioration visuelle
   -------------------------------------------------------------------------------------
   • Chargé APRÈS style.css : il ne remplace rien, il affine (ombres, relief, contrôles,
     tableaux, menus, fenêtres, animations).
   • 100 % visuel : aucune donnée, aucune logique, aucun fichier PHP n'est concerné.
   • Respecte votre « Personnalisation visuelle » (couleur, police, arrondis) : tout est
     calculé à partir des variables --orange, --radius, --surface, --border, etc.
   • Respecte le mode sombre (body.dark-mode).
   • Exclusivement à l'écran (@media screen) : factures, reçus et bons imprimés inchangés.
   • RETOUR ARRIÈRE : supprimer la ligne <link ... theme-premium.css> de index.html et
     login.html (ou supprimer ce fichier) rétablit exactement l'ancien aspect.
   ===================================================================================== */

/* ---------- Jetons de design (déclarés sur <body> pour suivre le mode sombre) ---------- */
body {
  --pm-radius-card: calc(var(--radius) + 4px);
  --pm-ring: color-mix(in srgb, var(--orange) 26%, transparent);
  --pm-tint: color-mix(in srgb, var(--orange) 6%, transparent);
  --pm-tint-2: color-mix(in srgb, var(--orange) 12%, transparent);
  --pm-line: color-mix(in srgb, var(--border) 75%, transparent);
  --pm-shadow-1: 0 1px 2px rgba(36, 28, 20, .05), 0 2px 8px rgba(36, 28, 20, .045);
  --pm-shadow-2: 0 2px 4px rgba(36, 28, 20, .05), 0 10px 26px rgba(36, 28, 20, .08);
  --pm-shadow-3: 0 4px 10px rgba(36, 28, 20, .07), 0 22px 54px rgba(36, 28, 20, .14);
  --pm-ease: cubic-bezier(.22, .8, .3, 1);
}
body.dark-mode {
  --pm-shadow-1: 0 1px 2px rgba(0, 0, 0, .45), 0 2px 10px rgba(0, 0, 0, .3);
  --pm-shadow-2: 0 2px 4px rgba(0, 0, 0, .45), 0 12px 30px rgba(0, 0, 0, .38);
  --pm-shadow-3: 0 4px 10px rgba(0, 0, 0, .5), 0 24px 60px rgba(0, 0, 0, .5);
}

@keyframes pmFadeUp { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes pmRise   { from { opacity: 0; transform: translateY(14px) scale(.985); } to { opacity: 1; transform: none; } }
@keyframes pmBackdrop { from { opacity: 0; } to { opacity: 1; } }

@media screen {

  /* ===================================== 1. BASE ===================================== */
  html { scroll-behavior: smooth; }
  body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
  }
  ::selection { background: var(--pm-tint-2); color: inherit; }
  input[type="checkbox"], input[type="radio"], input[type="range"], progress { accent-color: var(--orange); }

  /* Anneau de focus homogène pour la navigation au clavier */
  :is(a, button, [role="button"], summary, .nav-item):focus-visible {
    outline: 2px solid var(--orange);
    outline-offset: 2px;
    border-radius: var(--radius);
  }

  /* Barres de défilement discrètes */
  * { scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--ink-soft) 38%, transparent) transparent; }
  *::-webkit-scrollbar { width: 10px; height: 10px; }
  *::-webkit-scrollbar-track { background: transparent; }
  *::-webkit-scrollbar-thumb {
    background: color-mix(in srgb, var(--ink-soft) 34%, transparent);
    border-radius: 999px; border: 3px solid transparent; background-clip: padding-box;
  }
  *::-webkit-scrollbar-thumb:hover { background: color-mix(in srgb, var(--ink-soft) 55%, transparent); background-clip: padding-box; border: 3px solid transparent; }

  /* ================================ 2. TITRES DE PAGE ================================ */
  .view-header h1 {
    font-family: var(--font-display);
    font-size: 27px;
    letter-spacing: -.022em;
    line-height: 1.15;
  }
  .view-header h1::after {
    content: "";
    display: block;
    width: 38px; height: 3px; margin-top: 9px;
    border-radius: 3px;
    background: linear-gradient(90deg, var(--orange), color-mix(in srgb, var(--orange) 15%, transparent));
  }
  .view-header p { color: var(--ink-soft); font-size: 13.5px; line-height: 1.55; max-width: 70ch; }

  /* Apparition douce de chaque page à l'ouverture */
  .view:not(.hidden) { animation: pmFadeUp .32s var(--pm-ease); }

  /* ============================ 3. CHAMPS DE FORMULAIRE ============================== */
  :is(.main, .modal, .toolbar, .panel) :is(
    input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]):not([type="hidden"]):not([type="button"]):not([type="submit"]),
    select, textarea) {
    background-color: var(--surface);
    color: var(--ink);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 8px 12px;
    font-size: 13.5px;
    transition: border-color .16s ease, box-shadow .16s ease, background-color .16s ease;
  }
  :is(.toolbar, .modal) :is(
    input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]):not([type="hidden"]),
    select) { min-height: 38px; }
  :is(.main, .modal, .toolbar, .panel) :is(input, select, textarea):hover:not(:disabled):not(:focus) {
    border-color: color-mix(in srgb, var(--orange) 38%, var(--border));
  }
  :is(.main, .modal, .toolbar, .panel) :is(input, select, textarea):focus {
    outline: none;
    border-color: var(--orange);
    box-shadow: 0 0 0 3px var(--pm-ring);
  }
  :is(.main, .modal, .toolbar, .panel) :is(input, select, textarea):disabled { opacity: .6; background: var(--gray-bg); cursor: not-allowed; }
  :is(.main, .modal, .toolbar, .panel) ::placeholder { color: color-mix(in srgb, var(--ink-soft) 70%, transparent); }

  /* Listes déroulantes : flèche soignée au lieu du style navigateur */
  :is(.main, .modal, .toolbar, .panel) select:not([multiple]):not([size]) {
    appearance: none; -webkit-appearance: none;
    padding-right: 34px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%238a7d6f' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 11px center;
    cursor: pointer;
  }
  :is(.main, .modal, .toolbar, .panel) textarea { line-height: 1.5; resize: vertical; }
  .modal label, .panel label { font-weight: 600; font-size: 12.5px; letter-spacing: .005em; }

  /* Correctif d'un ancien défaut : la pastille « optionnel » s'étirait sur toute la largeur */
  .services-optional-tag { align-self: flex-start; width: fit-content; display: inline-block; }

  /* ================================== 4. BOUTONS ===================================== */
  .btn {
    border-radius: var(--radius);
    min-height: 38px;
    display: inline-flex; align-items: center; justify-content: center; gap: 7px;
    letter-spacing: .005em;
    cursor: pointer;
    transition: transform .16s var(--pm-ease), box-shadow .2s ease, background .16s ease, border-color .16s ease, color .16s ease;
  }
  .btn:active:not(:disabled) { transform: translateY(1px) scale(.992); }
  .btn:disabled { opacity: .55; cursor: not-allowed; }
  .btn-primary {
    background: linear-gradient(180deg, color-mix(in srgb, var(--orange) 90%, #fff), var(--orange));
    box-shadow: 0 1px 0 rgba(255, 255, 255, .28) inset, 0 6px 16px color-mix(in srgb, var(--orange) 34%, transparent);
  }
  .btn-primary:hover:not(:disabled) {
    background: linear-gradient(180deg, color-mix(in srgb, var(--orange) 84%, #fff), color-mix(in srgb, var(--orange) 94%, #000));
    transform: translateY(-1px);
    box-shadow: 0 1px 0 rgba(255, 255, 255, .3) inset, 0 10px 24px color-mix(in srgb, var(--orange) 44%, transparent);
  }
  .btn-ghost, .btn-export {
    background: var(--surface);
    border: 1px solid var(--border);
    color: var(--ink);
    box-shadow: var(--pm-shadow-1);
  }
  .btn-ghost:hover:not(:disabled), .btn-export:hover:not(:disabled) {
    border-color: color-mix(in srgb, var(--orange) 55%, var(--border));
    background: color-mix(in srgb, var(--orange) 5%, var(--surface));
    color: var(--orange-dark);
    transform: translateY(-1px);
    box-shadow: var(--pm-shadow-2);
  }
  .btn-icon {
    border-radius: calc(var(--radius) - 2px);
    transition: background .15s ease, transform .15s var(--pm-ease), box-shadow .15s ease;
  }
  .btn-icon:hover { background: var(--pm-tint-2); transform: translateY(-1px); }

  /* Boutons de la barre du haut (styles en ligne : on force avec précision) */
  #btn-retour-galerie, #btn-creation-rapide {
    border-radius: var(--radius) !important;
    min-height: 40px;
    transition: transform .16s var(--pm-ease), box-shadow .2s ease, border-color .16s ease !important;
  }
  #btn-retour-galerie { background: var(--surface) !important; box-shadow: var(--pm-shadow-1); }
  #btn-retour-galerie:hover { border-color: var(--orange) !important; transform: translateY(-1px); }
  #btn-creation-rapide {
    background: linear-gradient(180deg, color-mix(in srgb, var(--orange) 90%, #fff), var(--orange)) !important;
    box-shadow: 0 1px 0 rgba(255, 255, 255, .28) inset, 0 6px 16px color-mix(in srgb, var(--orange) 34%, transparent);
  }
  #btn-creation-rapide:hover { transform: translateY(-1px); box-shadow: 0 1px 0 rgba(255,255,255,.3) inset, 0 10px 24px color-mix(in srgb, var(--orange) 44%, transparent); }

  /* Bouton de tri et bascule Liste/Grille : même hauteur que les champs voisins */
  .sort-dir-btn, .view-toggle-btn { min-height: 38px; display: inline-flex; align-items: center; justify-content: center; }
  .sort-control select { min-height: 38px; }
  .view-toggle { border-radius: var(--radius); box-shadow: var(--pm-shadow-1); }

  /* ================================ 5. BARRE DU HAUT ================================= */
  #global-search-input {
    min-height: 40px;
    border-radius: var(--radius);
    background: var(--surface);
    box-shadow: var(--pm-shadow-1);
    transition: box-shadow .2s ease, border-color .16s ease;
  }
  #global-search-input:focus { box-shadow: 0 0 0 3px var(--pm-ring), var(--pm-shadow-2); }
  .global-search-results { border-radius: var(--pm-radius-card); box-shadow: var(--pm-shadow-3); overflow: hidden; }

  @media (min-width: 901px) {
    .global-search-wrap {
      position: sticky; top: 0; z-index: 60;
      padding: 12px 0; margin-bottom: 4px;
      background: color-mix(in srgb, var(--bg) 82%, transparent);
      -webkit-backdrop-filter: blur(12px) saturate(140%);
      backdrop-filter: blur(12px) saturate(140%);
    }
  }

  /* ========================== 6. CARTES, PANNEAUX, INDICATEURS ======================= */
  .panel, .table-wrap, .kpi-card {
    border-radius: var(--pm-radius-card);
    border-color: var(--pm-line);
    box-shadow: var(--pm-shadow-1);
  }
  .panel { transition: box-shadow .22s ease, border-color .22s ease; }
  .panel:hover { box-shadow: var(--pm-shadow-2); }
  .kpi-card { position: relative; transition: transform .22s var(--pm-ease), box-shadow .22s ease; }
  .kpi-card:hover { transform: translateY(-2px); box-shadow: var(--pm-shadow-2); }

  /* ================================== 7. TABLEAUX ==================================== */
  .data-table th {
    background: color-mix(in srgb, var(--orange) 7%, var(--surface));
    color: var(--orange-dark);
    padding: 12px 14px;
    border-bottom: 1px solid color-mix(in srgb, var(--orange) 22%, var(--border));
    -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  }
  .data-table td { padding: 11px 14px; border-top: 1px solid var(--pm-line); }
  .data-table tbody tr { transition: background-color .14s ease; }
  .data-table tbody tr:hover > td { background: var(--pm-tint); }
  .data-table tbody tr:first-child > td { border-top: none; }
  .data-table td:first-child { font-weight: 600; }
  .data-table input[type="checkbox"] { width: 16px; height: 16px; cursor: pointer; }

  /* Pastilles de statut : repère coloré + meilleure lisibilité */
  .status-pill {
    display: inline-flex; align-items: center; gap: 6px;
    letter-spacing: .01em;
    border: 1px solid color-mix(in srgb, currentColor 16%, transparent);
  }
  .status-pill::before {
    content: ""; flex: 0 0 auto;
    width: 6px; height: 6px; border-radius: 50%;
    background: currentColor; opacity: .85;
  }

  /* ============================ 8. MENU LATÉRAL (SIDEBAR) ============================ */
  .sidebar::before {
    content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
    background:
      radial-gradient(120% 55% at 0% 0%, rgba(255, 255, 255, .15), transparent 62%),
      radial-gradient(110% 50% at 100% 100%, rgba(0, 0, 0, .28), transparent 70%);
  }
  .sidebar { box-shadow: 4px 0 28px rgba(0, 0, 0, .14); }
  .nav-item { border-radius: calc(var(--radius) - 1px); transition: background .16s ease, color .16s ease, transform .16s var(--pm-ease), box-shadow .2s ease; }
  .nav-item:not(.active):hover { background: rgba(255, 255, 255, .12); transform: translateX(2px); }
  .nav-item.active { box-shadow: 0 6px 18px rgba(0, 0, 0, .2), 0 1px 0 rgba(255, 255, 255, .6) inset; }
  .nav-section-label { letter-spacing: .09em; }
  .sidebar *::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, .28); background-clip: padding-box; }
  .sidebar * { scrollbar-color: rgba(255, 255, 255, .3) transparent; }

  /* ============================ 9. FENÊTRES (MODALES) ================================ */
  .modal-overlay {
    background: rgba(24, 16, 9, .46);
    -webkit-backdrop-filter: blur(6px) saturate(120%);
    backdrop-filter: blur(6px) saturate(120%);
    animation: pmBackdrop .2s ease;
  }
  .modal {
    border-radius: 18px;
    box-shadow: var(--pm-shadow-3);
    border: 1px solid var(--pm-line);
    overflow: hidden;
  }
  .modal-header {
    background: linear-gradient(180deg, color-mix(in srgb, var(--orange) 9%, var(--surface)), var(--surface));
    border-bottom: 1px solid var(--pm-line);
  }
  .modal-header h2, .modal-header h3 { font-family: var(--font-display); letter-spacing: -.01em; }
  .modal-footer { border-top: 1px solid var(--pm-line); background: color-mix(in srgb, var(--bg) 60%, var(--surface)); }
  .modal-close { border-radius: 50%; transition: background .15s ease, transform .18s var(--pm-ease); }
  .modal-close:hover { background: var(--pm-tint-2); transform: rotate(90deg); }

  /* ================================== 10. NOTIFICATIONS ============================== */
  .toast {
    border-radius: 12px;
    padding: 12px 16px 12px 14px;
    border-left: 4px solid var(--orange);
    box-shadow: var(--pm-shadow-3);
    -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  }
  .toast.success { border-left-color: var(--green); }
  .toast.error { border-left-color: var(--red); }

  /* ============================ 11. ACCUEIL EN GALERIE =============================== */
  .galerie-accueil-salutation, .galerie-accueil-titre { letter-spacing: -.025em; }
  .galerie-accueil-kpi {
    position: relative; overflow: hidden;
    border-radius: var(--pm-radius-card);
    border-color: var(--pm-line);
    box-shadow: var(--pm-shadow-1);
    transition: transform .22s var(--pm-ease), box-shadow .22s ease;
  }
  .galerie-accueil-kpi::before {
    content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
    background: linear-gradient(180deg, var(--orange), color-mix(in srgb, var(--orange) 25%, transparent));
  }
  .galerie-accueil-kpi:hover { transform: translateY(-2px); box-shadow: var(--pm-shadow-2); }
  .galerie-accueil-kpi .valeur {
    font-family: var(--font-display);
    font-size: 27px; font-weight: 800; letter-spacing: -.02em;
    font-variant-numeric: tabular-nums;
  }
  .galerie-accueil-kpi .label { font-size: 12px; color: var(--ink-soft); }
  .galerie-accueil-pointage-zone { margin-top: 30px; }
  .galerie-accueil-tuile {
    border-radius: var(--pm-radius-card);
    border-color: var(--pm-line);
    box-shadow: var(--pm-shadow-1);
    transition: transform .24s var(--pm-ease), box-shadow .24s ease, border-color .2s ease;
  }
  .galerie-accueil-tuile:hover {
    transform: translateY(-4px);
    box-shadow: var(--pm-shadow-2);
    border-color: color-mix(in srgb, var(--orange) 50%, var(--border));
  }
  .galerie-accueil-tuile:active { transform: translateY(-1px) scale(.992); }
  .galerie-accueil-icone, .galerie-accueil-icone-badge { transition: transform .26s var(--pm-ease); }
  .galerie-accueil-tuile:hover .galerie-accueil-icone, .galerie-accueil-tuile:hover .galerie-accueil-icone-badge { transform: scale(1.1) rotate(-3deg); }

  /* Apparition en cascade des tuiles et indicateurs */
  .galerie-accueil-kpis > *, .galerie-accueil-grille > * { animation: pmRise .5s var(--pm-ease) both; }
  .galerie-accueil-kpis > :nth-child(2), .galerie-accueil-grille > :nth-child(2) { animation-delay: .05s; }
  .galerie-accueil-kpis > :nth-child(3), .galerie-accueil-grille > :nth-child(3) { animation-delay: .10s; }
  .galerie-accueil-kpis > :nth-child(4), .galerie-accueil-grille > :nth-child(4) { animation-delay: .15s; }
  .galerie-accueil-grille > :nth-child(5) { animation-delay: .20s; }
  .galerie-accueil-grille > :nth-child(6) { animation-delay: .25s; }
  .galerie-accueil-grille > :nth-child(n+7) { animation-delay: .30s; }

  /* =============================== 12. PAGE DE CONNEXION ============================= */
  .login-card {
    border-radius: 22px;
    padding: 44px 36px 38px;
    box-shadow: var(--pm-shadow-3), 0 0 0 1px rgba(255, 255, 255, .5) inset;
  }
  /* Logo de la page de connexion : tuile de couleur (le fond blanc d'origine disparaissait sur la
     carte blanche). Si vous avez téléversé votre propre logo, il reste affiché tel quel. */
  .login-card .login-mark:not(:has(img)) {
    width: 56px; height: 56px; border-radius: 17px; font-size: 20px; letter-spacing: .02em;
    background: linear-gradient(135deg, var(--orange), var(--orange-dark));
    color: #fff;
    box-shadow: 0 10px 24px color-mix(in srgb, var(--orange) 36%, transparent), 0 1px 0 rgba(255, 255, 255, .35) inset;
  }
  .login-card input {
    min-height: 44px;
    border-radius: var(--radius);
    transition: border-color .16s ease, box-shadow .2s ease;
  }
  .login-card input:focus { outline: none; border-color: var(--orange); box-shadow: 0 0 0 3px var(--pm-ring); }
  .login-card button[type="submit"], .login-card .btn-primary {
    min-height: 46px;
    border-radius: var(--radius);
    background: linear-gradient(180deg, color-mix(in srgb, var(--orange) 90%, #fff), var(--orange));
    box-shadow: 0 1px 0 rgba(255, 255, 255, .28) inset, 0 8px 20px color-mix(in srgb, var(--orange) 36%, transparent);
    transition: transform .16s var(--pm-ease), box-shadow .2s ease;
  }
  .login-card button[type="submit"]:hover:not(:disabled) { transform: translateY(-1px); }

  /* ====== 14. MODE SOMBRE : composants dont le fond blanc était codé en dur ========== */
  /* (listes de recherche, menu « + Créer », cartes de commande, pagination, bascules...)
     Seuls les états normaux sont adaptés : les états « actif » gardent la couleur de marque. */
  body.dark-mode :is(
    .view-toggle-btn:not(.active), .sort-dir-btn:not(.active), .doc-tab:not(.active), .caisse-pill:not(.active),
    .view-mode-btn:not(.active), .pagination-page-btn:not(.active), .pagination-nav-btn,
    .cf-produit-resultats, .produit-combo-input, .produit-combo-results, .global-search-results, .qc-menu,
    .cmd-carte, .cmd-context-menu, .resto-plat-btn, .resto-cuisine-carte, .resto-panier-ligne-qte button,
    .livreur-action-btn-sm, .caisse-montant-btn, .gantt-layout, .doc-editor-toolbar button,
    .rdv-cal-case:not(.rdv-cal-aujourdhui):not(.rdv-cal-hors-mois), .sort-control select
  ) {
    background: var(--surface);
    color: var(--ink);
    border-color: var(--border);
  }
  body.dark-mode :is(
    .view-toggle-btn:not(.active), .sort-dir-btn:not(.active), .doc-tab:not(.active), .caisse-pill:not(.active),
    .view-mode-btn:not(.active), .pagination-page-btn:not(.active), .pagination-nav-btn,
    .resto-plat-btn, .livreur-action-btn-sm, .caisse-montant-btn, .doc-editor-toolbar button
  ):hover:not(:disabled) {
    background: var(--orange-pale);
    color: var(--orange);
  }
  body.dark-mode :is(.cmd-carte, .rdv-cal-case):hover { background: color-mix(in srgb, var(--orange) 10%, var(--surface)); }
  body.dark-mode .qc-item:hover, body.dark-mode .global-search-results > *:hover { background: var(--pm-tint-2); }

  /* ============================== 13. MOBILE / TACTILE =============================== */
  @media (max-width: 820px) {
    .btn, .toolbar :is(input, select) { min-height: 44px; }
    .nav-item { min-height: 44px; }
    .view-header h1 { font-size: 23px; }
    .modal { border-radius: 16px; }
    .sort-dir-btn, .view-toggle-btn, .sort-control select { min-height: 44px; }
    /* Barre du haut : boutons sur une ligne, recherche pleine largeur dessous */
    .global-search-wrap { flex-wrap: wrap !important; row-gap: 8px !important; }
    .global-search-wrap > div[style*="flex:1"] { order: 10; flex: 1 1 100% !important; }
  }
  @media (hover: none) {
    .kpi-card:hover, .galerie-accueil-kpi:hover, .galerie-accueil-tuile:hover, .btn-primary:hover, .btn-ghost:hover { transform: none; }
  }
}

/* ================================== ACCESSIBILITÉ ====================================
   Si l'utilisateur a demandé « réduire les animations » dans son système, on les coupe. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}

/* ================================== IMPRESSION =======================================
   CAUSE D'UN BUG D'IMPRESSION VIDE (reçus, bons, bilans, listes) : à l'écran ce thème remplace l'animation
   d'ouverture de chaque page par la sienne ; à l'impression, la règle d'origine revenait, et le navigateur
   démarrait alors une NOUVELLE animation de fondu à zéro : la page était « photographiée » à l'instant où
   elle était encore invisible. On supprime donc toute animation à l'impression.
   Ce bloc ne s'applique qu'à l'impression : il n'a aucun effet à l'écran. */
@media print {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}