/* ======================================
   RESET & BASE STYLES
====================================== */
* {
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    box-sizing: border-box;
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text",
                 "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    margin: 0;
    padding: 0;
    user-select: none;
}

::selection {
    background: transparent;
}

input, textarea, select, [contenteditable="true"] {
    user-select: text;
    -webkit-user-select: text;
    -webkit-touch-callout: default;
}

/* ======================================
   VARIABLES CSS - APPLE DESIGN SYSTEM
====================================== */
:root {
    /* Colors */
    --apple-blue: #007aff;
    --apple-blue-dark: #0051a8;
    --apple-green: #34c759;
    --apple-orange: #ff9500;
    --apple-red: #ff3b30;
    --apple-purple: #af52de;
    --apple-pink: #ff2d55;
    --apple-gray: #8e8e93;
    --apple-gray-2: #636366;
    --apple-gray-3: #48484a;
    --apple-gray-4: #3a3a3c;
    --apple-gray-5: #2c2c2e;
    --apple-gray-6: #1c1c1e;

    /* Light mode backgrounds */
    --bg-primary: #ffffff;
    --bg-secondary: #f2f2f7;
    --bg-tertiary: #e5e5ea;
    --bg-grouped: #f2f2f7;

    /* Text */
    --text-primary: #1c1c1e;
    --text-secondary: #3c3c43;
    --text-tertiary: #8e8e93;

    /* Glass effect */
    --glass-bg: rgba(255, 255, 255, 0.72);
    --glass-bg-heavy: rgba(255, 255, 255, 0.85);
    --glass-border: rgba(255, 255, 255, 0.5);
    --glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.08);

    /* Spacing */
    --spacing-xs: 4px;
    --spacing-sm: 8px;
    --spacing-md: 16px;
    --spacing-lg: 24px;
    --spacing-xl: 32px;

    /* Border radius */
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-xl: 20px;
    --radius-full: 9999px;

    /* Transitions */
    --transition-fast: 0.15s cubic-bezier(0.25, 0.1, 0.25, 1);
    --transition-normal: 0.25s cubic-bezier(0.25, 0.1, 0.25, 1);
    --transition-spring: 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* ======================================
   THÈME SOMBRE - APPLE DARK MODE
====================================== */
[data-theme="dark"] {
    /* Dark backgrounds */
    --bg-primary: #1c1c1e;
    --bg-secondary: #2c2c2e;
    --bg-tertiary: #3a3a3c;
    --bg-grouped: #2c2c2e;

    /* Dark text */
    --text-primary: #ffffff;
    --text-secondary: #ebebf5;
    --text-tertiary: #8e8e93;

    /* Dark glass effect */
    --glass-bg: rgba(44, 44, 46, 0.8);
    --glass-bg-heavy: rgba(44, 44, 46, 0.95);
    --glass-border: rgba(84, 84, 88, 0.5);
    --glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);

    /* Adjusted grays for dark */
    --apple-gray-6: #f5f5f7;
    --apple-gray-5: #e5e5ea;
    --apple-gray-4: #d1d1d6;
    --apple-gray-3: #aeaeb2;
}

[data-theme="dark"] body {
    background: linear-gradient(180deg, #000000 0%, #1c1c1e 100%);
}

/* Header dark */
[data-theme="dark"] #app-header {
    background: rgba(28, 28, 30, 0.9);
    border-bottom-color: rgba(84, 84, 88, 0.5);
}

/* Nav dark */
[data-theme="dark"] #main-nav {
    background: rgba(28, 28, 30, 0.95);
    border-bottom-color: rgba(84, 84, 88, 0.5);
}

[data-theme="dark"] .segmented {
    background: #3a3a3c;
}

[data-theme="dark"] .segmented button.active {
    background: #636366;
    color: #ffffff;
}

/* Login — always dark (no theme switch needed) */

/* Cards & containers dark */
/* Items dark */
/* Ma Liste dark */
/* Ma Liste scroll zone dark */
/* Ma Liste header dark */
/* Hygiene tabs dark */
[data-theme="dark"] .hygiene-tab.active {
    background: #48484a;
    color: #ffffff;
}

/* Nettoyage items dark */
/* Inputs & selects dark */
/* Buttons dark */
[data-theme="dark"] #logout-btn {
    color: #ff453a;
}

/* Floating button dark */
[data-theme="dark"] .floating-btn {
    background: rgba(44, 44, 46, 0.95);
    color: #ffffff;
}

/* Tables dark */
[data-theme="dark"] td {
    border-color: #3a3a3c;
    color: #ebebf5;
}

/* Popup overlay dark */
[data-theme="dark"] .edit-popup-overlay {
    background: rgba(0, 0, 0, 0.7);
}

/* Modal content dark */
/* Refroidissement popup dark */
/* ======================================
   DARK MODE - POPUPS EDIT/ORDER COMPLET
====================================== */

/* Popup box (edit item MEP, edit item Order) */
[data-theme="dark"] .popup-box {
    background: #2c2c2e !important;
    color: #ffffff !important;
    border: 1px solid #3a3a3c;
}

[data-theme="dark"] .popup-box input:focus,
[data-theme="dark"] .popup-box select:focus,
[data-theme="dark"] .popup-box textarea:focus {
    background: #3a3a3c !important;
    border-color: var(--apple-blue) !important;
}

/* Popup actions buttons */
[data-theme="dark"] .popup-actions button:last-child:hover {
    background: #0056b3 !important;
}

/* Popup services (attribution Midi/Soir) */
/* Order edit popup overlay */
/* Popup selects container */
/* MEP edit popup */
/* Section headers dark */
/* Empty states dark */
/* Checkbox containers dark */
[data-theme="dark"] .checkbox-row,
[data-theme="dark"] .service-toggle {
    background: #3a3a3c;
    border-color: #48484a;
}

/* Date selectors dark */
/* Scrollbar dark */
/* Cook name dark */
[data-theme="dark"] #cook-name {
    background: rgba(255, 255, 255, 0.1);
    color: #ffffff;
}

[data-theme="dark"] #cook-name:hover {
    background: rgba(255, 255, 255, 0.16);
}

/* Predict mode dark */
[data-theme="dark"] .predict-bar {
    background: rgba(175, 82, 222, 0.25);
}

/* ======================================
   DARK MODE - COMPLÉMENTS ORDERS
====================================== */

/* Mode urgence toggle dark */
[data-theme="dark"] .urgence-toggle-container {
    background: #2c2c2e !important;
    border: 1px solid #48484a !important;
}

/* Service toggles (Midi/Soir) dark */
/* Reset catégorie button dark */
[data-theme="dark"] .reset-category-btn {
    color: var(--apple-orange) !important;
    background: rgba(255, 149, 0, 0.15) !important;
}

/* Input recherche dark - plus visible */
/* Section titles (catégories) dark */
/* Switch toggle dark (mode urgence) */
[data-theme="dark"] input:checked + .switch-slider {
    background: var(--apple-green);
}

/* Labels et textes généraux dark */
/* Create item section dark */
/* Select dropdowns dark */
/* Checkbox styling dark */
[data-theme="dark"] input[type="checkbox"] {
    accent-color: var(--apple-blue);
}

/* Primary buttons dark */
/* Secondary buttons dark */
/* Danger buttons dark */
[data-theme="dark"] button.danger,
[data-theme="dark"] .btn-danger {
    background: rgba(255, 69, 58, 0.2) !important;
    color: #ff453a !important;
}

/* Floating button amélioré dark */
[data-theme="dark"] .floating-btn {
    background: #3a3a3c !important;
    color: #ffffff !important;
    border: 1px solid #48484a !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}

/* Toast dark */
[data-theme="dark"] .print-toast {
    background: rgba(58, 58, 60, 0.95);
    color: #ffffff;
}

/* Popup edit dark */
[data-theme="dark"] .edit-popup,
[data-theme="dark"] .refroidissement-popup {
    background: #2c2c2e !important;
    border: 1px solid #48484a;
}

/* Action row buttons dark */
[data-theme="dark"] .actions-row {
    background: #1c1c1e;
    border-color: #3a3a3c;
}

/* Items avec couleurs cuisiniers - garder les couleurs */
[data-theme="dark"] .mep-item.cook-1,
[data-theme="dark"] .mep-item.cook-2,
[data-theme="dark"] .mep-item.cook-3,
[data-theme="dark"] .mep-item.cook-4,
[data-theme="dark"] .mep-item.cook-5,
[data-theme="dark"] .order-item.cook-1,
[data-theme="dark"] .order-item.cook-2,
[data-theme="dark"] .order-item.cook-3,
[data-theme="dark"] .order-item.cook-4,
[data-theme="dark"] .order-item.cook-5 {
    color: white !important;
}

/* Hygiene section cards dark */
/* Countdown text dark */
[data-theme="dark"] .countdown {
    color: #aeaeb2;
}

/* Memos dark */
[data-theme="dark"] .memo-item {
    background: #2c2c2e !important;
    border-color: #3a3a3c;
}

/* Mémo du jour dark */
[data-theme="dark"] .memo-du-jour {
    background: linear-gradient(135deg, #3a3a1e 0%, #4a4a2e 100%) !important;
    border-left-color: #e9b300 !important;
}

[data-theme="dark"] .memo-du-jour-header {
    color: #ffd700 !important;
}

/* Module création mémo dark */
[data-theme="dark"] .memo-create-toggle {
    background: #2c2c2e !important;
    color: #ffffff !important;
    border-color: #3a3a3c !important;
}

[data-theme="dark"] .memo-input {
    background: #3a3a3c !important;
    color: #ffffff !important;
    border-color: #48484a !important;
}

/* Mémo meta dark */
/* TIR mémo dark */
[data-theme="dark"] .memo-item-tir {
    background: linear-gradient(135deg, #4a1a1a 0%, #5c2020 100%) !important;
    border-left: 4px solid var(--apple-red) !important;
    box-shadow: 0 0 20px rgba(255, 59, 48, 0.3) !important;
}

[data-theme="dark"] .memo-tir-badge {
    background: var(--apple-red) !important;
    color: #ffffff !important;
    padding: 3px 10px;
    border-radius: 6px;
    font-weight: 700;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

@keyframes tirPulseDark {
    0%, 100% { box-shadow: 0 0 15px rgba(255, 59, 48, 0.4); }
    50% { box-shadow: 0 0 25px rgba(255, 59, 48, 0.6); }
}

[data-theme="dark"] .memo-item-tir {
    animation: tirPulseDark 2s ease-in-out infinite;
}

/* ======================================
   DARK MODE - MEP COMPLET
====================================== */

/* Date selector dark */
[data-theme="dark"] #selector-date {
    background: #2c2c2e !important;
    color: #ffffff !important;
    border-color: #48484a !important;
}

/* Switch Midi/Soir MEP dark */
/* Mode Predict toggle dark */
/* Predict feedback dark */
[data-theme="dark"] #predict-feedback,
[data-theme="dark"] .predict-feedback {
    background: rgba(175, 82, 222, 0.2) !important;
    color: #d8b4fe !important;
}

/* Predict initial dark */
[data-theme="dark"] .predict-initial {
    background: #8b5cf6 !important;
}

/* Mode Config toggle dark */
[data-theme="dark"] #mep-config-mode span,
[data-theme="dark"] .config-toggle span {
    color: #ffb340 !important;
}

/* Config feedback dark */
[data-theme="dark"] #config-feedback,
[data-theme="dark"] .config-feedback {
    background: rgba(255, 149, 0, 0.2) !important;
    color: #ffb340 !important;
}

/* Item non configuré dark - même gris */
/* MEP sections (catégories générées dynamiquement) dark */
[data-theme="dark"] #mep-items > section,
[data-theme="dark"] #mep-items > div {
    background: #1c1c1e !important;
    border: 1px solid #3a3a3c !important;
    border-radius: 16px;
}

/* MEP section headers dark */
/* MEP create item dark */
[data-theme="dark"] .create-item-options {
    gap: 8px;
}

[data-theme="dark"] .edit-toggles-group {
    background: transparent;
}

/* ======================================
   DARK MODE - ORDERS COMPLET
====================================== */

/* Orders sections dark */
/* Orders create item dark */
/* Urgence toggle container dark */
/* Orders service filter dark */
/* Actions row dark */
/* ======================================
   DARK MODE - GENERAL VIEWS
====================================== */

/* Views background dark */
[data-theme="dark"] #app-section-content {
    background: #000000 !important;
}

/* All white backgrounds → dark */
/* Slider switch dark */
[data-theme="dark"] .slider::before {
    background: #ffffff !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4) !important;
}

[data-theme="dark"] input:checked + .slider {
    background: var(--apple-green) !important;
}

[data-theme="dark"] input:checked + .slider.predict-slider {
    background: var(--apple-purple) !important;
}

/* Switch container dark - fix overflow */
/* ======================================
   DARK MODE - HYGIENE COMPLET
====================================== */

/* Hygiene sections dark */
/* Hygiene section titles (CUISINE HAUT, CUISINE BAS, etc.) */
/* Temperature rows dark */
/* Temperature buttons dark */
/* Camion livraison card dark */
/* Status badges dark */
[data-theme="dark"] .status-badge,
[data-theme="dark"] .releve-status {
    background: #3a3a3c !important;
}

/* Nettoyages section dark */
/* Tracabilité dark */
/* Refroidissement items dark */
/* Config section dark */
/* ======================================
   DARK MODE - NAV FIX
====================================== */

/* Navigation segmented control - fix bouton actif blanc */
/* Tous les spans et labels dans view-hygiene */
/* Fix spécifique pour les titres de groupe temp */
[data-theme="dark"] .temp-group h4,
[data-theme="dark"] .frigo-group h4 {
    color: #ffffff !important;
    font-weight: 600;
}

/* ======================================
   DARK MODE - ORDERS SERVICE FILTER FIX
====================================== */

/* Bloc SERVICE / ACTIONS (fond blanc → sombre) */
/* Labels SERVICE, ACTIONS */
/* Boutons Tous/Midi/Soir - fix bouton actif */
/* ======================================
   DARK MODE - HYGIENE TEMP ROWS FIX
====================================== */

/* Lignes température - fond sombre */
/* Labels dans les lignes temp */
/* Input number dans temp */
/* Forcer tous les éléments enfants de hygiene-section */
[data-theme="dark"] .hygiene-section * {
    color: inherit;
}

/* Div avec fond blanc dans hygiene → sombre */
/* ======================================
   DARK MODE - FRIGO/TEMP ITEMS FIX
====================================== */

/* Frigo items (lignes température) */
[data-theme="dark"] .frigo-item {
    background: #2c2c2e !important;
    border: 1px solid #3a3a3c !important;
    border-radius: 12px !important;
}

/* Frigo category header */
/* Frigo items container */
/* Temp input group */
[data-theme="dark"] .temp-input-group {
    background: #3a3a3c !important;
    border-radius: 10px !important;
}

/* Temp input */
[data-theme="dark"] .temp-input,
[data-theme="dark"] .frigo-temp-input {
    background: #3a3a3c !important;
    color: #ffffff !important;
    border: none !important;
}

/* Temp unit */
/* Temp buttons */
[data-theme="dark"] .temp-btn,
[data-theme="dark"] .frigo-temp-btn {
    background: #48484a !important;
    color: #ffffff !important;
    border: none !important;
}

[data-theme="dark"] .temp-btn:hover,
[data-theme="dark"] .frigo-temp-btn:hover {
    background: #636366 !important;
}

/* Camion livraison section */
/* Relevé status badge */
/* Nettoyage items */
/* Tracabilité section */
/* Refroidissement popup */
[data-theme="dark"] .refroidissement-popup {
    background: #2c2c2e !important;
    color: #ffffff !important;
}

/* Tout élément avec fond gris/blanc dans hygiene */
/* ======================================
   DARK MODE - TRAÇABILITÉ FIX
====================================== */

/* Zone photo traçabilité */
[data-theme="dark"] .traca-photo-zone,
[data-theme="dark"] .photo-upload-zone,
[data-theme="dark"] .upload-zone,
[data-theme="dark"] #traca-photo-zone,
[data-theme="dark"] [class*="photo-zone"],
[data-theme="dark"] [class*="upload"] {
    background: #2c2c2e !important;
    border: 2px dashed #48484a !important;
    color: #aeaeb2 !important;
}

/* Bouton Envoyer traçabilité */
[data-theme="dark"] .traca-submit,
[data-theme="dark"] #traca-submit,
[data-theme="dark"] .traca-btn,
[data-theme="dark"] [class*="traca"] button {
    background: #3a3a3c !important;
    color: #aeaeb2 !important;
    border: 1px solid #48484a !important;
}

/* Selects traçabilité */
/* ======================================
   DARK MODE - BLOC SERVICE/ACTIONS FIX
====================================== */

/* Le conteneur SERVICE / ACTIONS dans Orders */
/* Labels SERVICE, ACTIONS */
/* Forcer fond sombre sur tous les divs directs de view-orders */
/* ======================================
   DARK MODE - FILTER BUTTONS ACTIVE FIX
====================================== */

/* Tous les boutons de filtre (SERVICE, MEP, etc.) */
/* Boutons filtre ACTIFS - fond bleu, texte blanc */
/* Toast dark */
[data-theme="dark"] .print-toast {
    background: rgba(58, 58, 60, 0.95);
}

/* ======================================
   BODY & BASE
====================================== */
body {
    background: linear-gradient(180deg, #f5f5f7 0%, #e8e8ed 100%);
    min-height: 100vh;
    color: var(--text-primary);
}

button {
    cursor: pointer;
    border: none;
    background: none;
    font-family: inherit;
    font-size: 15px;
    transition: all var(--transition-fast);
}

button:active {
    transform: scale(0.97);
}

/* ======================================
   COULEURS CUISINIERS
====================================== */
.cook-1 { background: var(--apple-blue) !important; color: white !important; }
.cook-2 { background: var(--apple-orange) !important; color: white !important; }
.cook-3 { background: var(--apple-green) !important; color: white !important; }
.cook-4 { background: var(--apple-purple) !important; color: white !important; }
.cook-5 { background: var(--apple-pink) !important; color: white !important; }

/* ======================================
   LOGIN — CHEF LINE (dark luxury)
====================================== */
#login-section {
    position: relative;
    min-height: 100dvh;
    overflow: hidden;
    background: #050505;
    color: #fff;
    font-family: 'DM Sans', -apple-system, sans-serif;
    -webkit-font-smoothing: antialiased;
    max-width: 430px;
    margin: 0 auto;
}
#login-section * { box-sizing: border-box; }

/* BG layers */
.cl-bg-grad {
    position: absolute; inset: 0;
    background:
        radial-gradient(circle at 20% 15%, rgba(201,169,98,0.16), transparent 22%),
        radial-gradient(circle at 80% 10%, rgba(255,255,255,0.05), transparent 18%),
        radial-gradient(circle at 50% 100%, rgba(201,169,98,0.10), transparent 30%),
        linear-gradient(180deg, #080808 0%, #050505 45%, #020202 100%);
}
.cl-bg-grid {
    position: absolute; inset: 0; opacity: 0.08;
    background-image:
        linear-gradient(rgba(255,255,255,0.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.05) 1px, transparent 1px);
    background-size: 80px 80px;
}
.cl-bg-orb {
    position: absolute; border-radius: 50%; filter: blur(48px); pointer-events: none;
}
.cl-bg-orb--left   { left: -80px; top: 96px; width: 288px; height: 288px; background: rgba(201,169,98,0.10); }
.cl-bg-orb--right  { right: -60px; top: 40px; width: 256px; height: 256px; background: rgba(255,255,255,0.05); }
.cl-bg-orb--bottom { bottom: -40px; left: 50%; transform: translateX(-50%); width: 384px; height: 256px; background: rgba(201,169,98,0.10); }
.cl-bg-line {
    position: absolute; left: 50%; top: 0; height: 38vh; width: 1px;
    transform: translateX(-50%);
    background: linear-gradient(to bottom, rgba(240,222,174,0.70), rgba(201,169,98,0.30), transparent);
}

/* Center */
.cl-center {
    position: relative; z-index: 10; display: flex;
    min-height: 100dvh; align-items: center; justify-content: center;
    padding: 40px 20px;
}
.cl-inner { width: 100%; max-width: 448px; }

/* Brand */
.cl-brand { margin-bottom: 32px; text-align: center; }
.cl-logo-outer {
    margin: 0 auto 20px; display: flex;
    width: 112px; height: 112px; align-items: center; justify-content: center;
    border-radius: 28px; border: 1px solid rgba(255,255,255,0.10);
    background: rgba(255,255,255,0.05);
    box-shadow: 0 20px 70px rgba(0,0,0,0.55), 0 0 30px rgba(201,169,98,0.14);
    backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
    position: relative; overflow: hidden;
}
.cl-logo-grad-overlay {
    position: absolute; inset: 0; border-radius: 22px;
    background: linear-gradient(135deg, rgba(255,255,255,0.06), transparent);
}
.cl-logo-content { position: relative; text-align: center; line-height: 1; }
.cl-logo-text {
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 42px; letter-spacing: -0.04em; color: #fff;
}
.cl-logo-sub {
    margin-top: 6px; font-size: 10px; font-weight: 500;
    text-transform: uppercase; letter-spacing: 0.3em; color: #c9a962;
}
.cl-brand-meta { display: flex; flex-direction: column; gap: 8px; align-items: center; }
.cl-access-label {
    font-size: 11px; font-weight: 500; text-transform: uppercase;
    letter-spacing: 0.45em; color: rgba(201,169,98,0.90);
}
.cl-heading {
    font-size: 28px; font-weight: 600; letter-spacing: -0.03em; color: #fff;
    margin: 0; padding: 0;
    background: none; -webkit-background-clip: unset; -webkit-text-fill-color: unset; background-clip: unset;
}

/* Stats row */
.cl-stats-row {
    display: flex; align-items: center; gap: 0;
    margin-top: 4px; padding: 14px 0;
    background: rgba(255,255,255,0.03);
    border-radius: 16px; border: 1px solid rgba(255,255,255,0.06);
    width: 100%;
}
.cl-stat-box { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.cl-stat-num {
    font-size: 24px; font-weight: 700; color: #c9a962;
    font-feature-settings: 'tnum'; line-height: 1;
}
.cl-stat-label {
    font-size: 10px; font-weight: 400; color: rgba(255,255,255,0.35);
    letter-spacing: 0.05em; text-transform: uppercase;
}
.cl-stat-divider { width: 1px; height: 32px; background: rgba(255,255,255,0.06); flex-shrink: 0; }

/* Card */
.cl-card {
    position: relative; overflow: hidden; border-radius: 32px;
    border: 1px solid rgba(255,255,255,0.10);
    background: rgba(255,255,255,0.045); padding: 24px;
    box-shadow: 0 30px 80px rgba(0,0,0,0.62), 0 0 40px rgba(201,169,98,0.12);
    backdrop-filter: blur(40px); -webkit-backdrop-filter: blur(40px);
}
.cl-card-glow {
    position: absolute; inset: 0;
    background: linear-gradient(135deg, rgba(255,255,255,0.07), transparent 28%, transparent 72%, rgba(201,169,98,0.07));
    pointer-events: none;
}
.cl-card-top-line {
    position: absolute; left: 0; right: 0; top: 0; height: 1px;
    background: linear-gradient(90deg, transparent, rgba(241,223,177,0.70), transparent);
    pointer-events: none;
}
.cl-card-corner-blur {
    position: absolute; left: 24px; top: 0; width: 96px; height: 96px;
    border-radius: 50%; background: rgba(201,169,98,0.10); filter: blur(32px);
    pointer-events: none;
}
.cl-card-inner {
    position: relative; display: flex; flex-direction: column; gap: 20px;
}

/* Fields */
.cl-field-group { display: flex; flex-direction: column; gap: 8px; }
.cl-label {
    font-size: 11px; font-weight: 500; text-transform: uppercase;
    letter-spacing: 0.32em; color: rgba(255,255,255,0.45);
}
.cl-input-wrap {
    position: relative; border-radius: 16px;
    border: 1px solid rgba(255,255,255,0.10);
    background: rgba(0,0,0,0.25); padding: 16px;
    transition: all 0.3s ease; display: flex; align-items: center;
}
.cl-input-wrap:focus-within {
    border-color: rgba(201,169,98,0.70);
    background: rgba(0,0,0,0.35);
    box-shadow: 0 0 0 1px rgba(201,169,98,0.25), 0 12px 30px rgba(0,0,0,0.28);
}
#login-section .cl-input {
    flex: 1; width: 100%; background: transparent !important;
    border: none !important; outline: none !important; font-size: 17px !important; font-weight: 400;
    letter-spacing: 0.01em; color: #fff !important; font-family: 'DM Sans', sans-serif;
    padding: 0 !important; margin: 0; border-radius: 0;
    box-shadow: none !important;
}
#login-section .cl-input::placeholder { color: rgba(255,255,255,0.20) !important; font-weight: 300; }
#login-section .cl-input-pass { letter-spacing: 0.12em; }
.cl-toggle-pass {
    background: none; border: none; cursor: pointer;
    padding: 4px; display: flex; align-items: center; margin-left: 8px;
}
.cl-underline {
    position: absolute; left: 16px; right: 16px; bottom: 0; height: 1px;
    background: linear-gradient(90deg, #c9a962, #f3e3b8, transparent);
    transform-origin: left; transform: scaleX(0);
    transition: transform 0.3s ease; pointer-events: none;
}
.cl-input-wrap:focus-within .cl-underline { transform: scaleX(1); }

/* Button */
#login-section .cl-btn {
    position: relative; width: 100%; overflow: hidden; border-radius: 16px !important;
    border: 1px solid rgba(232,208,155,0.20) !important;
    background: linear-gradient(135deg, #dbc27f 0%, #c9a962 34%, #a98545 70%, #7f612f 100%) !important;
    padding: 16px 20px !important; font-family: 'DM Sans', sans-serif;
    font-size: 16px !important; font-weight: 600; letter-spacing: 0.01em;
    color: #fffdf8 !important; cursor: pointer;
    transition: all 0.3s ease; margin-top: 4px;
    box-shadow: 0 18px 30px rgba(0,0,0,0.35), 0 0 22px rgba(201,169,98,0.22) !important;
}
#login-section .cl-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 22px 35px rgba(0,0,0,0.42), 0 0 28px rgba(201,169,98,0.28) !important;
}
#login-section .cl-btn:active { transform: translateY(0); }
.cl-shimmer {
    position: absolute; inset: 0;
    background: linear-gradient(110deg, transparent 20%, rgba(255,255,255,0.24) 48%, transparent 72%);
    opacity: 0.7; pointer-events: none;
    transform: translateX(-100%);
}
.cl-btn-inner {
    position: relative; display: flex; align-items: center;
    justify-content: center; gap: 12px;
}
.cl-btn-arrow {
    font-size: 18px; display: inline-block;
    transition: transform 0.3s;
}
.cl-btn:hover .cl-btn-arrow { transform: translateX(2px); }

/* Spinner (loading state) */
.cl-btn .cl-spinner {
    width: 20px; height: 20px;
    border: 2px solid rgba(255,253,248,0.3);
    border-top-color: #fffdf8; border-radius: 50%;
    animation: cl-spin 0.7s linear infinite;
}
@keyframes cl-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

/* Footer */
.cl-card-footer {
    display: flex; align-items: center; justify-content: space-between;
    padding-top: 8px; font-size: 12px; color: rgba(255,255,255,0.35);
}
.cl-foot-service { display: flex; align-items: center; gap: 6px; }
.cl-service-dot { width: 6px; height: 6px; border-radius: 3px; background: #c9a962; }
.cl-foot-left { font-weight: 400; }
.cl-foot-right {
    text-transform: uppercase; letter-spacing: 0.28em;
    color: rgba(201,169,98,0.80); font-weight: 500;
}

/* Bottom */
.cl-bottom { margin-top: 24px; text-align: center; }
.cl-bottom-text {
    font-size: 12px; font-weight: 400; text-transform: uppercase;
    letter-spacing: 0.28em; color: rgba(255,255,255,0.28); margin: 0;
}

/* ======================================
   HEADER - GLASSMORPHISM
====================================== */
#app-header {
    position: sticky;
    top: 0;
    z-index: 100;
    padding: 10px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: var(--glass-bg);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

.header-left {
    display: flex;
    align-items: center;
    gap: 12px;
}

.header-logo {
    height: 36px;
    width: auto;
    border-radius: 6px;
}

.rd-logo-icon {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    background: linear-gradient(135deg, #1a1a1a 0%, #0f0f0f 100%);
    border: 1px solid #c9a96240;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #c9a962;
}

/* Theme Toggle Button */
.theme-toggle {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.06);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.theme-toggle:hover {
    background: rgba(0, 0, 0, 0.1);
    transform: scale(1.05);
}

.theme-toggle:active {
    transform: scale(0.95);
}

.theme-icon-light,
.theme-icon-dark {
    position: absolute;
    font-size: 18px;
    transition: all 0.3s ease;
}

.theme-icon-light {
    opacity: 0;
    transform: rotate(-90deg) scale(0.5);
}

.theme-icon-dark {
    opacity: 1;
    transform: rotate(0deg) scale(1);
}

/* Dark mode: show sun, hide moon */
[data-theme="dark"] .theme-toggle {
    background: rgba(255, 255, 255, 0.1);
}

[data-theme="dark"] .theme-toggle:hover {
    background: rgba(255, 255, 255, 0.15);
}

[data-theme="dark"] .theme-icon-light {
    opacity: 1;
    transform: rotate(0deg) scale(1);
}

[data-theme="dark"] .theme-icon-dark {
    opacity: 0;
    transform: rotate(90deg) scale(0.5);
}

.header-right {
    display: flex;
    align-items: center;
    gap: 12px;
}

#cook-name {
    font-size: 15px;
    font-weight: 600;
    color: var(--text-primary);
    padding: 8px 16px;
    background: rgba(0, 0, 0, 0.04);
    border-radius: var(--radius-full);
    text-decoration: none;
    cursor: pointer;
    transition: background 0.2s, opacity 0.2s;
}

#cook-name:hover {
    background: rgba(0, 0, 0, 0.08);
    opacity: 0.85;
}

#logout-btn {
    padding: 10px 18px;
    background: rgba(255, 59, 48, 0.12);
    color: var(--apple-red);
    border-radius: var(--radius-full);
    font-size: 14px;
    font-weight: 600;
    transition: all var(--transition-fast);
}

#logout-btn:hover {
    background: rgba(255, 59, 48, 0.2);
}

/* ======================================
   NAVIGATION - SEGMENTED CONTROL
====================================== */
#main-nav {
    display: flex;
    justify-content: center;
    padding: 16px 20px;
    background: var(--glass-bg);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

#main-nav .segmented {
    display: flex;
    background: rgba(0, 0, 0, 0.06);
    padding: 3px;
    border-radius: var(--radius-md);
    gap: 2px;
}

#main-nav button {
    padding: 10px 24px;
    background: transparent;
    border-radius: 10px;
    font-size: 15px;
    font-weight: 600;
    color: var(--text-secondary);
    transition: all var(--transition-normal);
}

#main-nav button.active {
    background: white;
    color: var(--text-primary);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

#main-nav button:not(.active):hover {
    color: var(--text-primary);
}

/* ======================================
   APP SECTION & CONTENT
====================================== */
#app-section {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

#app-section-content {
    flex: 1;
    display: flex;
    justify-content: center;
    padding: 0;
}

.view {
    width: 100%;
    max-width: 800px;
    margin: 0 auto;
    padding: var(--spacing-lg);
    background: transparent;
    box-shadow: none;
    border-radius: 0;
}

/* ======================================
   DATE SELECTOR
====================================== */
#selection-date {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 12px;
    padding: 16px;
    margin-bottom: 8px;
}

#selection-date > div {
    display: flex;
    align-items: center;
    gap: 12px;
}

#selected-date {
    font-size: 20px;
    font-weight: 700;
    color: var(--text-primary);
    letter-spacing: -0.3px;
}

#selector-date {
    padding: 10px 14px;
    border-radius: var(--radius-md);
    border: 1px solid rgba(0, 0, 0, 0.1);
    background: white;
    font-size: 15px;
    font-weight: 500;
    transition: all var(--transition-fast);
}

#selector-date:focus {
    outline: none;
    border-color: var(--apple-blue);
    box-shadow: 0 0 0 3px rgba(0, 122, 255, 0.15);
}

/* ======================================
   SWITCH MIDI / SOIR
====================================== */
#mep-switch {
    display: flex;
    gap: 4px;
    margin-bottom: 16px;
    background: rgba(0, 0, 0, 0.06);
    padding: 4px;
    border-radius: var(--radius-md);
}

#mep-switch button {
    flex: 1;
    padding: 12px 0;
    border-radius: 10px;
    font-size: 15px;
    font-weight: 600;
    color: var(--text-secondary);
    transition: all var(--transition-normal);
}

#mep-switch button.active {
    background: white;
    color: var(--text-primary);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

/* ======================================
   MODE PREDICT
====================================== */
.predict-toggle {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 18px;
    margin-bottom: 16px;
    background: rgba(88, 86, 214, 0.08);
    border-radius: var(--radius-lg);
    border: 1px solid rgba(88, 86, 214, 0.15);
}

.predict-toggle span {
    font-size: 15px;
    font-weight: 600;
    color: #5856d6;
}

.predict-slider {
    background: #e9e9eb !important;
}

.switch input:checked + .predict-slider {
    background: #5856d6 !important;
}

.predict-date-picker {
    padding: 8px 12px;
    border-radius: var(--radius-md);
    border: 1px solid rgba(88, 86, 214, 0.3);
    background: white;
    font-size: 14px;
    font-weight: 500;
    color: #5856d6;
    margin-left: auto;
}

.predict-date-picker:focus {
    outline: none;
    border-color: #5856d6;
    box-shadow: 0 0 0 3px rgba(88, 86, 214, 0.15);
}

.predict-feedback {
    padding: 12px 16px;
    background: rgba(88, 86, 214, 0.12);
    color: #5856d6;
    border-radius: var(--radius-md);
    font-weight: 700;
    text-align: center;
    margin-bottom: 16px;
    animation: predictPulse 2s infinite;
}

@keyframes predictPulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.7; }
}

/* ======================================
   MODE CONFIG
====================================== */
.config-toggle {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 18px;
    margin-bottom: 16px;
    background: rgba(255, 149, 0, 0.08);
    border-radius: var(--radius-lg);
    border: 1px solid rgba(255, 149, 0, 0.15);
}

.config-toggle span {
    font-size: 15px;
    font-weight: 600;
    color: #ff9500;
}

.config-slider {
    background: #e9e9eb !important;
}

.switch input:checked + .config-slider {
    background: #ff9500 !important;
}

.config-feedback {
    padding: 12px 16px;
    background: rgba(255, 149, 0, 0.12);
    color: #ff9500;
    border-radius: var(--radius-md);
    font-weight: 700;
    text-align: center;
    margin-bottom: 16px;
    animation: configPulse 2s infinite;
}

@keyframes configPulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.7; }
}

/* Item NON configuré - texte gris */
.mep-item.not-configured {
    color: #8e8e93;
}

.mep-item.not-configured .mep-item-label {
    color: #8e8e93;
}

/* Item en mode config - hover */
.mep-item.config-mode-active {
    cursor: pointer;
}

.mep-item.config-mode-active:hover {
    border-color: #ff9500;
}

/* Item configuré en mode config - check visuel */
.mep-item.configured.config-mode-active {
    border: 2px solid #34c759 !important;
}

.mep-item.configured.config-mode-active::before {
    content: "✓";
    position: absolute;
    top: -8px;
    left: -8px;
    font-size: 12px;
    background: #34c759;
    color: white;
    border-radius: 50%;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
}

/* Item avec predict - bordure pointillée */
.mep-item.predicted {
    border: 2px dashed #5856d6 !important;
    position: relative;
}

.mep-item.predicted::after {
    content: "📌";
    position: absolute;
    top: -8px;
    right: -8px;
    font-size: 14px;
    background: white;
    border-radius: 50%;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
}

/* Initiale du predicteur */
.predict-initial {
    position: absolute;
    top: -8px;
    right: 14px;
    font-size: 11px;
    background: #5856d6;
    color: white;
    border-radius: 50%;
    width: 18px;
    height: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
}

/* Predict sur item déjà pris (couleur cuisinier + pointillés) */
.mep-item.cook-1.predicted,
.mep-item.cook-2.predicted,
.mep-item.cook-3.predicted,
.mep-item.cook-4.predicted,
.mep-item.cook-5.predicted {
    border: 2px dashed #5856d6 !important;
}

/* Predict sur item rayé */
.mep-item.done.predicted {
    border: 2px dashed #5856d6 !important;
}

/* ======================================
   MEP ITEMS
====================================== */
.mep-group-section {
    margin-bottom: 24px;
    padding: 20px;
    background: white;
    border-radius: var(--radius-xl);
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
}

.mep-group-section h3 {
    margin: 0 0 16px 4px;
    font-size: 17px;
    font-weight: 700;
    color: var(--text-primary);
    letter-spacing: -0.2px;
}

.mep-items-box {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.mep-item {
    padding: 12px 18px;
    background: var(--bg-secondary);
    border-radius: var(--radius-full);
    font-size: 15px;
    font-weight: 500;
    color: var(--text-primary);
    cursor: pointer;
    transition: all var(--transition-fast);
    border: 2px solid transparent;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    position: relative;
}

.mep-item-label {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mep-item-badges {
    display: flex;
    flex-direction: column;
    gap: 2px;
    font-size: 12px;
    line-height: 1;
    flex-shrink: 0;
}

.mep-badge {
    opacity: 0.7;
}

.mep-item:hover {
    background: var(--bg-tertiary);
    transform: translateY(-2px);
}

.mep-item.cook-1, .mep-item.cook-2, .mep-item.cook-3,
.mep-item.cook-4, .mep-item.cook-5 {
    border-color: currentColor;
}

.mep-item.done {
    opacity: 0.5;
    text-decoration: line-through;
}

.mep-item.rejected {
    background: rgba(255, 59, 48, 0.15) !important;
    border: 2px solid #ff3b30 !important;
    color: #ff3b30;
    text-decoration: none;
    opacity: 1;
}

/* ======================================
   CRÉATION ITEM - MEP
====================================== */
#mep-create-item {
    background: white;
    padding: 20px;
    border-radius: var(--radius-xl);
    margin-top: 24px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
}

#mep-create-item h3 {
    font-size: 17px;
    font-weight: 700;
    margin-bottom: 16px;
    color: var(--text-primary);
}

#mep-create-item input,
#mep-create-item select {
    width: 100%;
    padding: 14px 16px;
    border-radius: var(--radius-md);
    border: 1px solid rgba(0, 0, 0, 0.1);
    background: var(--bg-secondary);
    font-size: 15px;
    margin-bottom: 12px;
    transition: all var(--transition-fast);
}

#mep-create-item input:focus,
#mep-create-item select:focus {
    outline: none;
    border-color: var(--apple-blue);
    box-shadow: 0 0 0 3px rgba(0, 122, 255, 0.15);
    background: white;
}

#mep-add-item-btn {
    width: 100%;
    padding: 14px;
    background: var(--apple-blue);
    color: white;
    border-radius: var(--radius-md);
    font-size: 16px;
    font-weight: 600;
    box-shadow: 0 4px 12px rgba(0, 122, 255, 0.25);
}

#mep-add-item-btn:hover {
    background: var(--apple-blue-dark);
}

/* ======================================
   COMMANDES - SEARCH & FILTERS
====================================== */
#order-search-wrapper {
    position: relative;
    margin-bottom: 16px;
}

#order-search {
    width: 100%;
    padding: 14px 44px 14px 18px;
    border-radius: var(--radius-lg);
    border: 1px solid rgba(0, 0, 0, 0.08);
    background: white;
    font-size: 16px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
    transition: all var(--transition-fast);
}

#order-search:focus {
    outline: none;
    border-color: var(--apple-blue);
    box-shadow: 0 0 0 3px rgba(0, 122, 255, 0.15);
}

#order-search-clear {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--apple-gray);
    color: white;
    font-size: 16px;
    display: none;
    align-items: center;
    justify-content: center;
}

#order-search:not(:placeholder-shown) + #order-search-clear {
    display: flex;
}

/* Mode urgence toggle */
.urgent-toggle {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 18px;
    margin-bottom: 16px;
    background: rgba(255, 59, 48, 0.08);
    border-radius: var(--radius-lg);
    border: 1px solid rgba(255, 59, 48, 0.15);
}

.urgent-toggle span {
    font-size: 15px;
    font-weight: 600;
    color: var(--apple-red);
}

/* Switch iOS style */
.switch {
    position: relative;
    width: 51px;
    height: 31px;
}

.switch input {
    display: none;
}

.slider {
    position: absolute;
    inset: 0;
    background: #e9e9eb;
    border-radius: var(--radius-full);
    cursor: pointer;
    transition: all var(--transition-fast);
}

.slider::before {
    content: "";
    position: absolute;
    width: 27px;
    height: 27px;
    left: 2px;
    top: 2px;
    background: white;
    border-radius: 50%;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    transition: all var(--transition-fast);
}

.switch input:checked + .slider {
    background: var(--apple-red);
}

.switch input:checked + .slider::before {
    transform: translateX(20px);
}

/* Feedback urgence */
.urgent-feedback {
    padding: 12px 16px;
    background: rgba(255, 59, 48, 0.12);
    color: var(--apple-red);
    border-radius: var(--radius-md);
    font-weight: 700;
    text-align: center;
    margin-bottom: 16px;
    animation: pulse 2s infinite;
}

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

/* Filtres */
#order-readonly-filters {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 16px;
    margin-bottom: 20px;
    background: white;
    border-radius: var(--radius-xl);
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
}

.order-filter-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

.filter-label {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-tertiary);
    min-width: 60px;
}

.order-filter-btn {
    padding: 8px 16px;
    border-radius: var(--radius-full);
    background: var(--bg-secondary);
    border: 1px solid transparent;
    font-size: 14px;
    font-weight: 500;
    color: var(--text-secondary);
    transition: all var(--transition-fast);
}

.order-filter-btn:hover {
    background: var(--bg-tertiary);
}

.order-filter-btn.active {
    background: var(--text-primary);
    color: white;
}

#order-reset-mep-category {
    padding: 8px 14px;
    border-radius: var(--radius-md);
    font-size: 13px;
    font-weight: 600;
    background: transparent;
    border: 1px dashed rgba(255, 59, 48, 0.4);
    color: var(--apple-red);
}

#order-reset-mep-category:hover {
    background: rgba(255, 59, 48, 0.08);
}

.mep-row {
    display: none;
}

#order-readonly-filters.has-service .mep-row {
    display: flex;
}

/* ======================================
   ORDER ITEMS
====================================== */
.order-group-section {
    margin-bottom: 24px;
    padding: 20px;
    background: white;
    border-radius: var(--radius-xl);
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
}

.order-group-section h3 {
    margin: 0 0 16px 4px;
    font-size: 17px;
    font-weight: 700;
    color: var(--text-primary);
}

.order-items-box {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.order-item {
    position: relative;
    display: inline-flex;
    align-items: center;
    padding: 12px 24px 12px 18px;
    border-radius: var(--radius-full);
    background: var(--bg-secondary);
    font-size: 15px;
    font-weight: 500;
    cursor: pointer;
    transition: all var(--transition-fast);
    overflow: visible;
}

.order-item:hover {
    background: var(--bg-tertiary);
    transform: translateY(-2px);
}

.order-item.done {
    opacity: 0.5;
    text-decoration: line-through;
}

.order-item.ordered {
    opacity: 0.4;
    text-decoration: line-through;
}

.order-item.pending {
    background: rgba(255, 149, 0, 0.15);
    border-left: 3px solid var(--apple-orange);
}

/* Contributions collaboratives */
.order-item {
    flex-direction: column;
    align-items: flex-start;
}

.order-item-label {
    display: block;
}

.order-item-contributions {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-top: 4px;
    font-size: 11px;
    opacity: 0.7;
}

.order-item-contribution {
    display: block;
    color: var(--accent);
    font-weight: 400;
}

/* Item avec contribution (user qui contribue) */
.order-item.has-contribution {
    background: rgba(138, 43, 226, 0.1);
    border-left: 3px solid rgba(138, 43, 226, 0.6);
}

[data-theme="dark"] .order-item.has-contribution {
    background: rgba(138, 43, 226, 0.15);
    border-left: 3px solid rgba(138, 43, 226, 0.8);
}

/* Popup contribution */
.contribution-popup .contribution-info {
    text-align: center;
    font-size: 14px;
    margin: -8px 0 16px 0;
    color: var(--text-secondary);
}

.contribution-popup .contribution-info strong {
    color: var(--accent);
    font-weight: 600;
}

/* Service badges - icônes soleil/lune */
.order-service-badges {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    gap: 1px;
    pointer-events: none;
}

.order-service-icon {
    font-size: 10px;
    line-height: 1;
    opacity: 0.8;
}

.order-item.done .order-service-icon {
    opacity: 0.4;
}

/* Icône de confirmation (commandé dans les 7 derniers jours) */
.order-confirm-icon {
    position: absolute;
    top: -6px;
    right: -6px;
    width: 18px;
    height: 18px;
    background: var(--apple-green);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: bold;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
    z-index: 10;
}

[data-theme="dark"] .order-confirm-icon {
    background: var(--apple-green);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
}

/* Swipe ready (300ms) - léger highlight */
.order-item.swipe-ready {
    transform: scale(1.02);
    box-shadow: 0 2px 8px rgba(0, 122, 255, 0.15);
    border: 1px solid var(--apple-blue);
}

/* Long press (600ms) - highlight fort */
.order-item.long-press-active {
    transform: scale(1.05);
    box-shadow: 0 4px 16px rgba(0, 122, 255, 0.3);
    border: 2px solid var(--apple-blue);
}

/* Toast notification */
.order-toast {
    position: fixed;
    bottom: 100px;
    left: 50%;
    transform: translateX(-50%) translateY(20px);
    background: rgba(45, 45, 48, 0.95);
    color: white;
    padding: 14px 24px;
    border-radius: 12px;
    font-size: 15px;
    font-weight: 600;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
    opacity: 0;
    transition: all 0.3s ease;
    z-index: 10000;
    pointer-events: none;
}

.order-toast.show {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

/* ================================
   MODULE HYGIÈNE
================================ */
#view-hygiene {
    padding-bottom: 100px;
}

.hygiene-section {
    background: var(--bg-primary);
    border-radius: 16px;
    padding: 20px;
    margin-bottom: 16px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.hygiene-section h3 {
    margin: 0 0 16px 0;
    font-size: 17px;
    font-weight: 600;
    color: #1d1d1f;
}

/* Camion Livraison */
.hygiene-camion {
    background: linear-gradient(135deg, #f0f4ff 0%, #e8f0fe 100%);
    border: 1px solid rgba(0, 122, 255, 0.2);
}

.hygiene-camion-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

/* Input température */
.temp-input-group {
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--bg-primary);
    padding: 8px 12px;
    border-radius: 12px;
    border: 1px solid var(--apple-gray-4);
}

.temp-input-group.small {
    padding: 6px 8px;
    gap: 4px;
}

.temp-btn {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--apple-gray-6);
    border: none;
    font-size: 20px;
    font-weight: 600;
    color: var(--apple-blue);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.temp-input-group.small .temp-btn {
    width: 28px;
    height: 28px;
    font-size: 16px;
}

.temp-btn:hover {
    background: var(--apple-blue);
    color: white;
}

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

.temp-input {
    width: 70px;
    text-align: center;
    font-size: 18px;
    font-weight: 600;
    border: none;
    background: transparent;
    color: #1d1d1f;
}

.temp-input-group.small .temp-input {
    width: 50px;
    font-size: 15px;
}

.temp-input:focus {
    outline: none;
}

.temp-unit {
    font-size: 14px;
    color: var(--apple-gray);
    font-weight: 500;
}

/* Bouton valider */
.hygiene-validate-btn {
    padding: 12px 24px;
    background: var(--apple-blue);
    color: white;
    border: none;
    border-radius: 12px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.hygiene-validate-btn:hover {
    background: #0071e3;
}

.hygiene-validate-btn:disabled {
    background: var(--apple-gray-4);
    cursor: not-allowed;
}

.hygiene-validate-btn.full-width {
    width: 100%;
    margin-top: 16px;
}

/* Status relevé */
.hygiene-status {
    margin-bottom: 16px;
    padding: 12px 16px;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 500;
}

.status-pending {
    background: rgba(255, 149, 0, 0.1);
    color: #ff9500;
    padding: 12px 16px;
    border-radius: 10px;
    display: inline-block;
    font-size: 15px;
    font-weight: 500;
}

.status-done {
    background: rgba(52, 199, 89, 0.1);
    color: var(--apple-green);
    padding: 12px 16px;
    border-radius: 10px;
    display: inline-block;
    font-size: 15px;
    font-weight: 500;
}

.status-pause {
    background: rgba(142, 142, 147, 0.1);
    color: var(--apple-gray);
    padding: 12px 16px;
    border-radius: 10px;
    display: inline-block;
    font-size: 15px;
    font-weight: 500;
}

/* Frigos */
.frigo-category {
    margin-bottom: 20px;
}

.frigo-category:last-child {
    margin-bottom: 0;
}

.frigo-category h4 {
    margin: 0 0 12px 0;
    font-size: 14px;
    font-weight: 600;
    color: var(--apple-gray);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.frigo-items {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.frigo-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    background: #ffffff;
    border-radius: 12px;
    transition: all 0.2s ease;
    border: 1px solid var(--apple-gray-5);
}

.frigo-item.disabled {
    opacity: 0.6;
}

.frigo-label {
    font-size: 15px;
    font-weight: 500;
    color: #1d1d1f;
}

/* Traçabilité */
.tracabilite-form {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.tracabilite-row {
    display: flex;
    gap: 12px;
}

.tracabilite-row select {
    flex: 1;
    padding: 12px 16px;
    border-radius: 12px;
    border: 1px solid var(--apple-gray-4);
    background: var(--bg-primary);
    font-size: 15px;
}

.tracabilite-upload {
    position: relative;
}

.tracabilite-upload input[type="file"] {
    position: absolute;
    opacity: 0;
    width: 100%;
    height: 100%;
    cursor: pointer;
}

.upload-label {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: var(--apple-gray-6);
    border: 2px dashed var(--apple-gray-4);
    border-radius: 12px;
    font-size: 15px;
    font-weight: 500;
    color: var(--apple-gray);
    cursor: pointer;
    transition: all 0.2s ease;
}

.upload-label:hover {
    border-color: var(--apple-blue);
    color: var(--apple-blue);
}

.photo-preview {
    max-width: 100%;
    max-height: 200px;
    border-radius: 12px;
    margin-top: 12px;
}

/* Refroidissement */
.refroidissement-form {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.refroidissement-form select {
    padding: 12px 16px;
    border-radius: 12px;
    border: 1px solid var(--apple-gray-4);
    background: var(--bg-primary);
    font-size: 15px;
}

.refroidissement-temps-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}

.refroidissement-field {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.refroidissement-field label {
    font-size: 12px;
    font-weight: 600;
    color: var(--apple-gray);
    text-transform: uppercase;
}

/* Nettoyages */
.nettoyage-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    background: #ffffff;
    border-radius: 12px;
    margin-bottom: 10px;
    border: 1px solid var(--apple-gray-4);
    cursor: pointer;
    transition: all 0.2s ease;
}

.nettoyage-item:active {
    transform: scale(0.98);
}

/* Mode URGENT (countdown = 0) */
.nettoyage-item.urgent {
    border: 2px solid var(--apple-red);
    background: rgba(255, 59, 48, 0.12);
    animation: urgentPulse 2s ease-in-out infinite;
}

@keyframes urgentPulse {
    0%, 100% {
        background: rgba(255, 59, 48, 0.12);
        box-shadow: 0 0 0 0 rgba(255, 59, 48, 0.4);
    }
    50% {
        background: rgba(255, 59, 48, 0.2);
        box-shadow: 0 0 12px 4px rgba(255, 59, 48, 0.3);
    }
}

.nettoyage-item.urgent .nettoyage-label {
    color: var(--apple-red);
    font-weight: 700;
}

.nettoyage-item.taken {
    opacity: 0.9;
}

.nettoyage-item.taken {
    border-left-color: var(--apple-blue);
    background: rgba(0, 122, 255, 0.05);
}

/* Couleurs spécifiques par cook */
.nettoyage-item.taken.cook-1 {
    border-left-color: var(--apple-blue);
    background: rgba(0, 122, 255, 0.08);
}
.nettoyage-item.taken.cook-2 {
    border-left-color: var(--apple-orange);
    background: rgba(255, 149, 0, 0.08);
}
.nettoyage-item.taken.cook-3 {
    border-left-color: var(--apple-green);
    background: rgba(52, 199, 89, 0.08);
}
.nettoyage-item.taken.cook-4 {
    border-left-color: var(--apple-purple);
    background: rgba(175, 82, 222, 0.08);
}
.nettoyage-item.taken.cook-5 {
    border-left-color: var(--apple-pink);
    background: rgba(255, 45, 85, 0.08);
}

.nettoyage-item.mine {
    /* Couleur héritée de .taken.cook-X - pas d'override */
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.15);
}

.nettoyage-item.overdue {
    border-left-color: var(--apple-red);
    background: rgba(255, 59, 48, 0.05);
}

.nettoyage-info {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.nettoyage-label {
    font-size: 15px;
    font-weight: 600;
    color: #1d1d1f;
}

.countdown {
    font-size: 13px;
    color: var(--apple-gray);
}

.countdown.overdue,
.countdown.urgent {
    color: var(--apple-red);
    font-weight: 700;
}

.nettoyage-taken-by {
    font-size: 12px;
    color: var(--apple-blue);
}

.nettoyage-actions {
    display: flex;
    gap: 8px;
}

.nettoyage-btn {
    padding: 8px 16px;
    border-radius: 8px;
    border: none;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.nettoyage-btn.take {
    background: var(--apple-blue);
    color: white;
}

.nettoyage-btn.release {
    background: var(--apple-gray-5);
    color: var(--apple-gray-2);
}

.nettoyage-btn.done {
    background: var(--apple-green);
    color: white;
}

.hygiene-empty {
    text-align: center;
    color: var(--apple-gray);
    padding: 24px;
    font-size: 14px;
}

/* Toast Hygiène */
.hygiene-toast {
    position: fixed;
    bottom: 100px;
    left: 50%;
    transform: translateX(-50%) translateY(20px);
    background: rgba(45, 45, 48, 0.95);
    color: white;
    padding: 14px 24px;
    border-radius: 12px;
    font-size: 15px;
    font-weight: 600;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
    opacity: 0;
    transition: all 0.3s ease;
    z-index: 10000;
    pointer-events: none;
}

.hygiene-toast.show {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

@media (max-width: 480px) {
    .refroidissement-temps-row {
        grid-template-columns: 1fr;
    }

    .hygiene-camion-row {
        flex-direction: column;
        align-items: stretch;
    }

    .tracabilite-row {
        flex-direction: column;
    }
}

/* Edit button (desktop only) */
.order-item-edit {
    position: absolute;
    right: -12px;
    top: 50%;
    transform: translateY(-50%);
    width: 28px;
    height: 28px;
    background: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    opacity: 0;
    transition: all var(--transition-fast);
    z-index: 10;
}

.order-item:hover .order-item-edit {
    opacity: 1;
}

/* ======================================
   CRÉATION COMMANDE
====================================== */
#order-create-item {
    background: white;
    padding: 20px;
    border-radius: var(--radius-xl);
    margin-top: 24px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
}

#order-create-item h3 {
    font-size: 17px;
    font-weight: 700;
    margin-bottom: 16px;
    color: var(--text-primary);
}

#order-create-item input,
#order-create-item select {
    width: 100%;
    padding: 14px 16px;
    border-radius: var(--radius-md);
    border: 1px solid rgba(0, 0, 0, 0.1);
    background: var(--bg-secondary);
    font-size: 15px;
    margin-bottom: 12px;
}

#order-create-item input:focus,
#order-create-item select:focus {
    outline: none;
    border-color: var(--apple-blue);
    box-shadow: 0 0 0 3px rgba(0, 122, 255, 0.15);
    background: white;
}

#order-add-item-btn {
    width: 100%;
    padding: 14px;
    background: var(--apple-blue);
    color: white;
    border-radius: var(--radius-md);
    font-size: 16px;
    font-weight: 600;
}

/* ======================================
   DRAWER - MA LISTE
====================================== */
#mylist-drawer {
    position: fixed;
    top: 0;
    right: -100%;
    width: 380px;
    max-width: 95vw;
    height: 100vh;
    background: var(--glass-bg-heavy);
    backdrop-filter: blur(30px);
    -webkit-backdrop-filter: blur(30px);
    border-left: 1px solid rgba(255, 255, 255, 0.3);
    box-shadow: -20px 0 60px rgba(0, 0, 0, 0.15);
    z-index: 9999;
    display: flex;
    flex-direction: column;
    transition: right 0.4s cubic-bezier(0.25, 0.1, 0.25, 1);
}

#mylist-drawer.open {
    right: 0;
}

#mylist-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 24px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

#mylist-header h3 {
    font-size: 22px;
    font-weight: 700;
    letter-spacing: -0.3px;
}

#mylist-close {
    width: 36px;
    height: 36px;
    border-radius: var(--radius-md);
    background: rgba(0, 0, 0, 0.06);
    font-size: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--transition-fast);
}

#mylist-close:hover {
    background: rgba(0, 0, 0, 0.12);
}

#mylist-scroll-zone {
    flex: 1;
    overflow-y: auto;
    padding: 20px 24px 100px;
    -webkit-overflow-scrolling: touch;
}

#mylist-drawer h4 {
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-tertiary);
    margin: 20px 0 12px;
}

#mylist-drawer h4:first-child {
    margin-top: 0;
}

#mylist-drawer ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

/* Mylist cells */
.mylist-cell {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 18px;
    margin-bottom: 10px;
    background: white;
    border-radius: var(--radius-lg);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
    transition: all var(--transition-fast);
}

.mylist-cell:active {
    transform: scale(0.98);
    background: var(--bg-secondary);
}

.mylist-label {
    font-size: 15px;
    font-weight: 500;
    color: var(--text-primary);
}

/* 🤝 Contributions dans my list */
.mylist-contributions {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 6px;
    margin-left: 4px;
}

.mylist-contrib-badge {
    font-size: 12px;
    color: #8a2be2;
    background: rgba(138, 43, 226, 0.1);
    padding: 2px 8px;
    border-radius: 10px;
    font-weight: 500;
}

.mylist-check {
    width: 24px;
    height: 24px;
    border-radius: 7px;
    border: 2px solid var(--apple-gray);
    background: white;
    transition: all var(--transition-fast);
}

.mylist-check.on {
    background: var(--apple-green);
    border-color: var(--apple-green);
    position: relative;
}

.mylist-check.on::after {
    content: "✓";
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 14px;
    font-weight: 700;
}

/* Orders dans ma liste */
.mylist-order {
    padding: 12px 18px;
    cursor: default;
}

.mylist-order.clickable {
    cursor: pointer;
}

.mylist-order.urgent {
    background: rgba(255, 59, 48, 0.08);
    border-left: 3px solid var(--apple-red);
}

.mylist-order:not(.clickable) .mylist-check {
    display: none;
}

/* Backdrop */
body.drawer-open::after {
    content: "";
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(4px);
    z-index: 9000;
}

body.drawer-open {
    overflow: hidden;
}

/* ======================================
   BOUTON FLOTTANT
====================================== */
#mylist-open-btn {
    position: fixed;
    bottom: 24px;
    right: 24px;
    width: 64px;
    height: 64px;
    border-radius: var(--radius-xl);
    background: white;
    border: 1px solid rgba(0, 0, 0, 0.06);
    color: var(--apple-blue);
    font-size: 28px;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow:
        0 8px 24px rgba(0, 0, 0, 0.12),
        0 4px 8px rgba(0, 0, 0, 0.08);
    z-index: 9500;
    transition: all var(--transition-spring);
}

#mylist-open-btn:hover {
    transform: scale(1.08);
    box-shadow:
        0 12px 32px rgba(0, 0, 0, 0.16),
        0 6px 12px rgba(0, 0, 0, 0.1);
}

#mylist-badge {
    position: absolute;
    top: -6px;
    right: -6px;
    min-width: 24px;
    height: 24px;
    padding: 0 7px;
    background: var(--apple-red);
    color: white;
    font-size: 13px;
    font-weight: 700;
    border-radius: var(--radius-full);
    display: none;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 8px rgba(255, 59, 48, 0.4);
}

/* ======================================
   MÉMO DU JOUR
====================================== */
.memo-du-jour {
    position: relative;
    padding: 16px 40px 16px 18px;
    margin-bottom: 20px;
    background: linear-gradient(135deg, #fff9e6 0%, #fff3cd 100%);
    border-radius: var(--radius-lg);
    border-left: 4px solid #e9b300;
}

.memo-du-jour-header {
    font-size: 14px;
    font-weight: 700;
    color: #8a6d00;
    margin-bottom: 8px;
}

.memo-du-jour-text {
    font-size: 15px;
    color: var(--text-primary);
    line-height: 1.5;
}

.memo-du-jour-date {
    font-size: 12px;
    color: var(--text-tertiary);
    margin-top: 8px;
}

/* Mémo item individuel */
.memo-item {
    position: relative;
    padding: 14px 40px 14px 16px;
    margin-bottom: 12px;
    background: rgba(255, 255, 255, 0.8);
    border-radius: var(--radius-md);
}

.memo-item:last-child {
    margin-bottom: 0;
}

/* TIR - Mémo rouge important */
.memo-item-tir {
    background: linear-gradient(135deg, #fff0f0 0%, #ffe0e0 100%) !important;
    border-left: 4px solid var(--apple-red);
    animation: tirPulse 2s ease-in-out infinite;
}

@keyframes tirPulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(255, 59, 48, 0.3); }
    50% { box-shadow: 0 0 0 8px rgba(255, 59, 48, 0); }
}

.memo-tir-badge {
    display: inline-block;
    padding: 2px 8px;
    background: var(--apple-red);
    color: white;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 700;
    margin-right: 6px;
    vertical-align: middle;
}

.memo-content {
    font-size: 15px;
    line-height: 1.5;
    color: var(--text-primary);
}

.memo-meta {
    font-size: 12px;
    color: var(--text-tertiary);
    margin-top: 8px;
}

.memo-du-jour button.memo-close {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: rgba(138, 109, 0, 0.1);
    color: #8a6d00;
    font-size: 16px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: all var(--transition-fast);
    border: none;
    cursor: pointer;
}

.memo-item button.memo-close {
    position: absolute;
    top: 50%;
    right: 10px;
    transform: translateY(-50%);
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.08);
    color: var(--text-secondary);
    font-size: 16px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: all var(--transition-fast);
    border: none;
    cursor: pointer;
}

.memo-item-tir button.memo-close {
    background: rgba(255, 59, 48, 0.15);
    color: var(--apple-red);
}

.memo-du-jour:hover button.memo-close,
.memo-item:hover button.memo-close {
    opacity: 1;
}

.memo-du-jour button.memo-close:hover,
.memo-item button.memo-close:hover {
    background: rgba(138, 109, 0, 0.2);
    transform: translateY(-50%) scale(1.1);
}

/* Module création mémo */
#module-creation-memo {
    margin-top: 24px;
    margin-bottom: 40px;
    position: relative;
    z-index: 100;
}

.memo-create-toggle {
    width: 100%;
    padding: 14px 18px;
    border-radius: var(--radius-lg);
    background: var(--apple-blue);
    border: none;
    font-size: 15px;
    font-weight: 600;
    color: white;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    transition: all var(--transition-fast);
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(0, 122, 255, 0.3);
}

.memo-create-toggle:hover {
    background: #0071e3;
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(0, 122, 255, 0.4);
}

.memo-create-body {
    margin-top: 16px;
    padding: 18px;
    background: white;
    border-radius: var(--radius-lg);
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
}

.memo-create-body label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-tertiary);
    margin-bottom: 6px;
    margin-top: 14px;
}

.memo-create-body label:first-child {
    margin-top: 0;
}

.memo-input {
    width: 100%;
    padding: 12px 14px;
    border-radius: var(--radius-md);
    border: 1px solid rgba(0, 0, 0, 0.1);
    background: var(--bg-secondary);
    font-size: 15px;
    margin: 0;
}

.memo-input:focus {
    outline: none;
    border-color: var(--apple-blue);
    box-shadow: 0 0 0 3px rgba(0, 122, 255, 0.15);
    background: white;
}

.btn-memo-save {
    width: 100%;
    margin-top: 18px;
    padding: 14px;
    background: var(--apple-blue);
    color: white;
    border-radius: var(--radius-md);
    font-size: 16px;
    font-weight: 600;
}

.hidden {
    display: none !important;
}

/* ======================================
   POPUPS
====================================== */
.order-edit-popup,
.order-mep-popup {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.popup-box {
    background: white;
    width: 100%;
    max-width: 400px;
    max-height: 90vh;
    overflow-y: auto;
    padding: 24px;
    border-radius: var(--radius-xl);
    box-shadow: 0 24px 48px rgba(0, 0, 0, 0.2);
}

.popup-box h4 {
    font-size: 20px;
    font-weight: 700;
    margin: 0 0 20px;
    letter-spacing: -0.3px;
}

.popup-box label {
    display: block;
    margin-bottom: 16px;
    font-size: 14px;
    font-weight: 600;
    color: var(--text-secondary);
}

.popup-box input,
.popup-box select {
    width: 100%;
    margin-top: 8px;
    padding: 14px 16px;
    border-radius: var(--radius-md);
    border: 1px solid rgba(0, 0, 0, 0.1);
    background: var(--bg-secondary);
    font-size: 16px;
}

.popup-box input:focus,
.popup-box select:focus {
    outline: none;
    border-color: var(--apple-blue);
    box-shadow: 0 0 0 3px rgba(0, 122, 255, 0.15);
    background: white;
}

.popup-actions {
    display: flex;
    justify-content: space-between;
    margin-top: 24px;
    gap: 12px;
}

.popup-actions-right {
    display: flex;
    gap: 10px;
}

.popup-actions button {
    padding: 12px 18px;
    border-radius: var(--radius-md);
    font-size: 15px;
    font-weight: 600;
    background: var(--bg-secondary);
    color: var(--text-primary);
    transition: all var(--transition-fast);
}

.popup-actions button:hover {
    background: var(--bg-tertiary);
}

.popup-actions button:last-child {
    background: var(--text-primary);
    color: white;
}

.popup-actions button:last-child:hover {
    background: var(--apple-gray-3);
}

button.danger {
    background: var(--apple-red) !important;
    color: white !important;
}

button.danger:hover {
    background: #d32f2f !important;
}

/* Popup services */
.popup-services {
    display: flex;
    gap: 10px;
    margin-bottom: 18px;
}

.popup-services .service-toggle {
    flex: 1;
    padding: 12px 0;
    border-radius: var(--radius-full);
    border: 1px solid rgba(0, 0, 0, 0.1);
    background: var(--bg-secondary);
    font-size: 15px;
    font-weight: 600;
    color: var(--text-secondary);
    transition: all var(--transition-fast);
}

.popup-services .service-toggle.active {
    background: var(--text-primary);
    color: white;
    border-color: var(--text-primary);
}

#popup-mep-selects {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 20px;
}

#popup-mep-selects select {
    padding: 14px 16px;
    border-radius: var(--radius-md);
    border: 1px solid rgba(0, 0, 0, 0.1);
    background: var(--bg-secondary);
    font-size: 15px;
    font-weight: 500;
}

/* ======================================
   RESPONSIVE
====================================== */
@media (max-width: 768px) {
    .view {
        padding: var(--spacing-md);
    }

    #mylist-drawer {
        width: 100%;
        max-width: 100%;
    }

    #mylist-open-btn {
        bottom: 16px;
        right: 16px;
        width: 56px;
        height: 56px;
        font-size: 24px;
    }

    .mep-group-section,
    .order-group-section {
        padding: 16px;
        border-radius: var(--radius-lg);
    }

    .mep-item,
    .order-item {
        padding: 10px 14px;
        font-size: 14px;
    }

    #app-header {
        padding: 10px 16px;
    }

    #main-nav {
        padding: 12px 16px;
    }

    #main-nav button {
        padding: 10px 18px;
        font-size: 14px;
    }
}

/* Nettoyages dans Ma Liste */
.mylist-cell.finished {
    opacity: 0.6;
}

.mylist-cell.finished .mylist-label {
    text-decoration: line-through;
    color: var(--apple-gray);
}

/* Section nettoyages dans MEP */
.nettoyages-section h3 {
    color: var(--apple-green);
}

/* Nettoyage pending (en attente 24h) */
.nettoyage-item.pending {
    background: rgba(52, 199, 89, 0.1);
    border: 2px solid var(--apple-green);
    cursor: default;
}

.nettoyage-item.pending .nettoyage-label {
    text-decoration: line-through;
    opacity: 0.7;
}

.countdown.pending {
    color: var(--apple-green);
    font-weight: 500;
}

/* Toggle refroidissement dans popup edit */
.edit-toggle-label {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 0;
    cursor: pointer;
}

.edit-toggle-label input[type="checkbox"] {
    width: 20px;
    height: 20px;
    cursor: pointer;
}

.edit-toggle-label span {
    font-size: 14px;
    font-weight: 500;
}

/* Popup Refroidissement */
.refroid-popup-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    padding: 20px;
}

.refroid-popup {
    background: white;
    border-radius: 16px;
    padding: 24px;
    width: 100%;
    max-width: 360px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
}

.refroid-popup h3 {
    margin: 0 0 8px 0;
    font-size: 20px;
    text-align: center;
}

.refroid-item-name {
    text-align: center;
    font-weight: 600;
    color: var(--apple-blue);
    margin-bottom: 20px;
}

.refroid-row {
    display: flex;
    gap: 12px;
    margin-bottom: 16px;
}

.refroid-field {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.refroid-field label {
    font-size: 12px;
    font-weight: 600;
    color: var(--apple-gray);
    text-transform: uppercase;
}

.refroid-field input {
    padding: 12px;
    border: 1px solid var(--apple-gray-4);
    border-radius: 10px;
    font-size: 16px;
    text-align: center;
}

.refroid-actions {
    display: flex;
    gap: 12px;
    margin-top: 20px;
}

.refroid-btn {
    flex: 1;
    padding: 14px;
    border: none;
    border-radius: 12px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.refroid-btn.skip {
    background: var(--apple-gray-5);
    color: #1d1d1f;
}

.refroid-btn.validate {
    background: var(--apple-blue);
    color: white;
}

.refroid-btn:active {
    transform: scale(0.96);
}

/* Refroidissement widget amélioré */
.refroid-selects-row {
    display: flex;
    gap: 10px;
    margin-bottom: 16px;
}

.refroid-selects-row select {
    flex: 1;
    padding: 12px;
    border-radius: 10px;
    border: 1px solid var(--apple-gray-4);
    font-size: 14px;
    background: white;
}

.refroid-temps-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.refroid-time-input {
    width: 100%;
    padding: 12px;
    border: 1px solid var(--apple-gray-4);
    border-radius: 10px;
    font-size: 16px;
    text-align: center;
}

/* Toggle refroidissement dans create item */
.create-item-options {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 12px 0;
}

.create-item-toggle {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    cursor: pointer;
    font-size: 13px;
    background: var(--bg-secondary);
    border-radius: var(--radius-sm);
    transition: all var(--transition-fast);
}

.create-item-toggle:hover {
    background: var(--apple-gray-5);
}

.create-item-toggle input[type="checkbox"] {
    width: 16px;
    height: 16px;
    cursor: pointer;
    accent-color: var(--apple-blue);
}

.create-item-toggle span {
    color: var(--text-secondary);
    transition: color var(--transition-fast);
}

.create-item-toggle input[type="checkbox"]:checked + span {
    color: var(--text-primary);
    font-weight: 500;
}

/* Groupe toggles dans popup édition */
.edit-toggles-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 12px 0;
}

/* Overlay pour fermer le drawer Ma Liste */
#mylist-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    z-index: 999;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

#mylist-overlay.open {
    opacity: 1;
    visibility: visible;
}

/* Camion - Sélecteur fournisseurs */
.camion-form {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.camion-fournisseur-row {
    display: flex;
    gap: 10px;
    align-items: center;
}

.camion-select {
    flex: 1;
    padding: 12px;
    border: 1px solid var(--apple-gray-4);
    border-radius: 10px;
    font-size: 16px;
    background: white;
}

.camion-manage-btn {
    padding: 12px 16px;
    border: 1px solid var(--apple-gray-4);
    border-radius: 10px;
    background: white;
    font-size: 16px;
    cursor: pointer;
}

.camion-done-status {
    background: rgba(52, 199, 89, 0.1);
    border: 1px solid var(--apple-green);
    border-radius: 12px;
    padding: 16px;
    text-align: center;
}

.camion-done-status p {
    margin: 8px 0 0 0;
    font-size: 14px;
    color: var(--apple-gray);
}

/* Popup fournisseurs */
.fournisseurs-popup-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    padding: 20px;
}

.fournisseurs-popup {
    background: white;
    border-radius: 16px;
    padding: 24px;
    width: 100%;
    max-width: 360px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
}

.fournisseurs-popup h3 {
    margin: 0 0 16px 0;
    text-align: center;
}

.fournisseurs-list {
    max-height: 200px;
    overflow-y: auto;
    margin-bottom: 16px;
}

.fournisseur-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px;
    background: var(--apple-gray-6);
    border-radius: 8px;
    margin-bottom: 8px;
}

.fournisseur-item span {
    font-weight: 500;
}

.fournisseur-delete {
    background: none;
    border: none;
    font-size: 18px;
    cursor: pointer;
    padding: 4px 8px;
}

.fournisseur-add-row {
    display: flex;
    gap: 10px;
    margin-bottom: 16px;
}

.fournisseur-add-row input {
    flex: 1;
    padding: 12px;
    border: 1px solid var(--apple-gray-4);
    border-radius: 10px;
    font-size: 16px;
}

.fournisseur-add-row button {
    padding: 12px 20px;
    background: var(--apple-blue);
    color: white;
    border: none;
    border-radius: 10px;
    font-weight: 600;
    cursor: pointer;
}

.fournisseurs-close-btn {
    width: 100%;
    padding: 14px;
    background: var(--apple-gray-5);
    border: none;
    border-radius: 12px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
}

/* Admin - Camion fournisseur */
.camion-fournisseur {
    font-weight: 600;
    color: var(--apple-blue);
    display: block;
    margin-bottom: 4px;
}

/* Items répétés - Productivité */
.productivity-card-repeat {
    border-left: 4px solid var(--apple-orange);
}

.repeated-items-header {
    display: grid;
    grid-template-columns: 1fr repeat(7, 40px);
    gap: 4px;
    padding: 8px 0;
    border-bottom: 1px solid var(--apple-gray-5);
    margin-bottom: 8px;
}

.repeated-item-label-header {
    font-weight: 600;
    font-size: 12px;
    color: var(--apple-gray);
    text-transform: uppercase;
}

.repeated-day-header {
    text-align: center;
    font-size: 11px;
    font-weight: 600;
    color: var(--apple-gray);
}

.repeated-day-date {
    font-size: 10px;
    color: var(--apple-gray-2);
}

.repeated-item-row {
    display: grid;
    grid-template-columns: 1fr repeat(7, 40px);
    gap: 4px;
    padding: 8px 0;
    border-bottom: 1px solid var(--apple-gray-6);
    align-items: center;
}

.repeated-item-row:last-child {
    border-bottom: none;
}

.repeated-item-label {
    font-size: 14px;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.repeated-count {
    font-size: 12px;
    color: var(--apple-orange);
    font-weight: 600;
}

.repeated-item-timeline {
    display: contents;
}

.repeated-day-cell {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.repeated-day-cell.empty {
    background: var(--apple-gray-6);
}

.repeated-day-cell.filled {
    color: white;
    font-weight: 700;
    cursor: pointer;
    transition: transform 0.2s ease;
}

.repeated-day-cell.filled:hover {
    transform: scale(1.1);
}

.repeated-user-initial {
    font-size: 14px;
    text-transform: uppercase;
}

/* ======================================
   MAINTENANCE
====================================== */
.maintenance-warning {
    background: rgba(255, 59, 48, 0.1);
    border: 1px solid var(--apple-red);
    border-radius: 12px;
    padding: 16px;
    margin-bottom: 20px;
    color: var(--apple-red);
    font-size: 14px;
}

.maintenance-card {
    background: white;
    border-radius: 16px;
    margin-bottom: 20px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.maintenance-card-header {
    padding: 16px 20px;
    border-bottom: 1px solid var(--apple-gray-5);
}

.maintenance-card-header h3 {
    margin: 0;
    font-size: 18px;
}

.maintenance-card-content {
    padding: 20px;
}

.maintenance-info {
    margin: 0 0 16px 0;
    color: var(--apple-gray);
    font-size: 14px;
}

.maintenance-checkboxes {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 20px;
}

.maintenance-checkbox {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 16px;
    background: var(--apple-gray-6);
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.maintenance-checkbox:hover {
    background: var(--apple-gray-5);
}

.maintenance-checkbox input[type="checkbox"] {
    width: 22px;
    height: 22px;
    margin-top: 2px;
    cursor: pointer;
    flex-shrink: 0;
}

.maintenance-checkbox .checkbox-label {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.maintenance-checkbox .checkbox-label strong {
    font-size: 15px;
}

.maintenance-checkbox .checkbox-label small {
    font-size: 12px;
    color: var(--apple-gray);
}

.maintenance-actions {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.maintenance-btn {
    padding: 12px 20px;
    border: none;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.maintenance-btn.secondary {
    background: var(--apple-gray-5);
    color: #1d1d1f;
}

.maintenance-btn.danger {
    background: var(--apple-red);
    color: white;
}

.maintenance-btn:hover {
    opacity: 0.9;
    transform: translateY(-1px);
}

.maintenance-btn:active {
    transform: scale(0.98);
}

/* Stats maintenance */
.maintenance-stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 12px;
}

.maintenance-stat-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    background: var(--apple-gray-6);
    border-radius: 10px;
}

.maintenance-stat-label {
    font-size: 14px;
    color: var(--apple-gray);
}

.maintenance-stat-value {
    font-size: 18px;
    font-weight: 700;
    color: var(--apple-blue);
}

/* ======================================
   POPUP ÉTIQUETTE
====================================== */
.etiquette-popup-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    padding: 20px;
}

.etiquette-popup {
    background: #ffffff;
    border-radius: 16px;
    padding: 24px;
    width: 100%;
    max-width: 340px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
    color: #1d1d1f;
}

.etiquette-popup h3 {
    margin: 0 0 20px 0;
    font-size: 20px;
    text-align: center;
    color: #1d1d1f;
}

.etiquette-info {
    background: #f5f5f7;
    border-radius: 12px;
    padding: 16px;
    margin-bottom: 20px;
}

.etiquette-row {
    display: flex;
    justify-content: space-between;
    padding: 8px 0;
    border-bottom: 1px solid #e5e5e7;
}

.etiquette-row:last-child {
    border-bottom: none;
}

.etiquette-label {
    color: #86868b;
    font-size: 14px;
}

.etiquette-value {
    font-weight: 600;
    font-size: 14px;
    color: #1d1d1f;
}

.etiquette-options {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-bottom: 24px;
}

.etiquette-checkbox {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background: #f5f5f7;
    border-radius: 10px;
    cursor: pointer;
}

.etiquette-checkbox input {
    width: 22px;
    height: 22px;
}

.etiquette-checkbox span {
    font-size: 16px;
    font-weight: 500;
    color: #1d1d1f;
}

.etiquette-quantity {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    background: #f5f5f7;
    border-radius: 10px;
}

.etiquette-quantity > span {
    font-size: 16px;
    font-weight: 500;
    color: #1d1d1f;
}

.etiquette-qty-controls {
    display: flex;
    align-items: center;
    gap: 8px;
}

.etiquette-qty-btn {
    width: 36px;
    height: 36px;
    border: none;
    border-radius: 50%;
    background: #007aff;
    color: white;
    font-size: 20px;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.etiquette-qty-btn:active {
    transform: scale(0.95);
}

.etiquette-qty-input {
    width: 50px;
    text-align: center;
    font-size: 18px;
    font-weight: 600;
    border: 2px solid #e5e5e7;
    border-radius: 8px;
    padding: 6px;
    background: #ffffff;
    color: #1d1d1f;
}

.etiquette-qty-input::-webkit-inner-spin-button,
.etiquette-qty-input::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.etiquette-actions {
    display: flex;
    gap: 12px;
}

.etiquette-btn {
    flex: 1;
    padding: 14px;
    border: none;
    border-radius: 12px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.etiquette-btn.skip {
    background: var(--apple-gray-5);
    color: var(--apple-gray);
}

.etiquette-btn.print {
    background: var(--apple-blue);
    color: white;
}

.etiquette-btn:active {
    transform: scale(0.98);
}

/* ======================================
   TOAST IMPRESSION
====================================== */
.print-toast {
    position: fixed;
    bottom: 100px;
    left: 50%;
    transform: translateX(-50%) translateY(20px);
    background: rgba(99, 99, 102, 0.95);
    color: white;
    padding: 14px 24px;
    border-radius: 12px;
    font-size: 15px;
    font-weight: 500;
    z-index: 99999;
    opacity: 0;
    transition: all 0.3s ease;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25);
}

.print-toast.show {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

.print-toast.success {
    background: rgba(52, 199, 89, 0.95);
}

.print-toast.error {
    background: rgba(255, 59, 48, 0.95);
}

/* Sélecteur imprimante dans popup étiquette */
.etiquette-printer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    background: #f5f5f7;
    border-radius: 10px;
}

.etiquette-printer > span {
    font-size: 16px;
    font-weight: 500;
    color: #1d1d1f;
}

.etiquette-printer-select {
    padding: 8px 12px;
    border: 2px solid #e5e5e7;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    background: #ffffff;
    color: #1d1d1f;
    min-width: 140px;
}

.etiquette-printer-select:focus {
    outline: none;
    border-color: var(--apple-blue);
}

.etiquette-qty-value {
    font-size: 18px;
    font-weight: 600;
    min-width: 30px;
    text-align: center;
    color: #1d1d1f;
}

/* ======================================
   DARK MODE - POPUP ÉTIQUETTE
====================================== */
[data-theme="dark"] .etiquette-popup {
    background: #1c1c1e;
    color: #f5f5f7;
}

[data-theme="dark"] .etiquette-row {
    border-bottom-color: #3a3a3c;
}

[data-theme="dark"] .etiquette-label {
    color: #98989d;
}

[data-theme="dark"] .etiquette-btn.skip {
    background: #3a3a3c;
    color: #98989d;
}

/* ========================================
   DRAG & DROP MODE CONFIG
======================================== */

/* Zone de drop active */
.config-drop-zone {
    min-height: 60px;
    transition: background-color 0.2s;
}

.config-drop-zone.drag-over {
    background-color: rgba(0, 122, 255, 0.08);
    border-radius: 8px;
}

/* Item en cours de drag */
.mep-item.dragging {
    opacity: 0.3;
    transform: scale(0.9);
}

/* Clone touch mobile */
.mep-item.touch-clone {
    opacity: 0.95;
    transform: scale(1.05);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
    border: 2px solid var(--accent);
    background: var(--card-bg);
}

/* 🔒 Indicateurs d'insertion - espace horizontal réel */
.mep-item.drag-insert-before {
    margin-left: 60px !important;
    transition: margin 0.15s ease;
}

.mep-item.drag-insert-after {
    margin-right: 60px !important;
    transition: margin 0.15s ease;
}

/* Curseur drag en mode config */
.mep-item.config-mode-active {
    cursor: grab;
    touch-action: none;
}

.mep-item.config-mode-active:active {
    cursor: grabbing;
}
/* ========================================
   POPUP QUANTITÉ ORDERS
======================================== */

.quantity-popup-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    padding: 20px;
}

.quantity-popup {
    background: var(--card-bg, #fff);
    border-radius: 16px;
    padding: 24px;
    width: 90%;
    max-width: 320px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
    box-sizing: border-box;
}

.quantity-popup h4 {
    margin: 0 0 20px 0;
    font-size: 18px;
    text-align: center;
    color: var(--text-primary, #1c1c1e);
}

.quantity-fields {
    display: flex;
    gap: 10px;
    margin-bottom: 20px;
}

/* 🔧 Contrôles avec boutons +/- */
.quantity-controls-inline {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--input-bg, #f5f5f7);
    border: 1px solid var(--border-color, #e0e0e0);
    border-radius: 10px;
    padding: 8px 12px;
}

.quantity-btn-minus,
.quantity-btn-plus {
    width: 32px;
    height: 32px;
    border: none;
    background: var(--accent, #007aff);
    color: white;
    border-radius: 8px;
    font-size: 20px;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
    flex-shrink: 0;
}

.quantity-btn-minus:hover,
.quantity-btn-plus:hover {
    background: #005bb5;
    transform: scale(1.05);
}

.quantity-btn-minus:active,
.quantity-btn-plus:active {
    transform: scale(0.95);
}

.quantity-value-display {
    flex: 1;
    min-width: 0;
    border: none;
    background: transparent;
    font-size: 18px;
    font-weight: 600;
    color: var(--text-primary, #1c1c1e);
    text-align: center;
    padding: 0;
}

.quantity-value-display:focus {
    outline: none;
}

.quantity-input {
    flex: 1;
    min-width: 0;
    padding: 14px 12px;
    border: 1px solid var(--border-color, #e0e0e0);
    border-radius: 10px;
    font-size: 18px;
    background: var(--input-bg, #f5f5f7);
    color: var(--text-primary, #1c1c1e);
    text-align: center;
    box-sizing: border-box;
}

.quantity-input:focus {
    outline: none;
    border-color: var(--accent, #007aff);
    box-shadow: 0 0 0 3px rgba(0, 122, 255, 0.2);
}

.quantity-unit {
    width: 90px;
    flex-shrink: 0;
    padding: 14px 8px;
    border: 1px solid var(--border-color, #e0e0e0);
    border-radius: 10px;
    font-size: 14px;
    background: var(--input-bg, #f5f5f7);
    color: var(--text-primary, #1c1c1e);
    cursor: pointer;
    box-sizing: border-box;
}

.quantity-unit:focus {
    outline: none;
    border-color: var(--accent, #007aff);
}

.quantity-actions {
    display: flex;
    gap: 12px;
}

.quantity-skip,
.quantity-validate {
    flex: 1;
    padding: 14px 20px;
    border: none;
    border-radius: 10px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}

.quantity-skip {
    background: var(--bg-secondary, #e5e5ea);
    color: var(--text-primary, #1c1c1e);
}

.quantity-skip:hover {
    background: var(--bg-tertiary, #d1d1d6);
}

.quantity-validate {
    background: var(--accent, #007aff);
    color: white;
}

.quantity-validate:hover {
    background: #0056b3;
}

/* ========================================
   DARK MODE
======================================== */

[data-theme="dark"] .quantity-popup {
    background: #2c2c2e;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
}

[data-theme="dark"] .quantity-skip {
    background: #48484a;
    color: #f5f5f7;
}

/* 🔧 Contrôles +/- en dark mode */
[data-theme="dark"] .quantity-controls-inline {
    background: #1c1c1e;
    border-color: #38383a;
}

[data-theme="dark"] .quantity-btn-minus,
[data-theme="dark"] .quantity-btn-plus {
    background: #0a84ff;
}

[data-theme="dark"] .quantity-btn-minus:hover,
[data-theme="dark"] .quantity-btn-plus:hover {
    background: #409cff;
}

[data-theme="dark"] .quantity-value-display {
    color: #f5f5f7;
}

/* Zone de drop active */
.config-drop-zone {
    min-height: 60px;
    transition: background-color 0.2s;
}

.config-drop-zone.drag-over {
    background-color: rgba(0, 122, 255, 0.08);
    border-radius: 8px;
}

/* Curseur drag en mode config */
.mep-item.config-mode-active {
    cursor: pointer;
}

/* ========================================
   DRAG & DROP DRAWER MY LIST
======================================== */

.mylist-drag-handle {
    cursor: grab;
    padding: 0 8px;
    opacity: 0.4;
    font-size: 14px;
    user-select: none;
}

.mylist-drag-handle:active {
    cursor: grabbing;
}

.mylist-cell.dragging {
    opacity: 0.5;
    background: var(--accent) !important;
}

.mylist-cell.drag-above {
    border-top: 3px solid var(--accent) !important;
    margin-top: -3px;
}

.mylist-cell.drag-below {
    border-bottom: 3px solid var(--accent) !important;
    margin-bottom: -3px;
}

.mylist-cell[draggable="true"] {
    touch-action: none;
}
/* ========================================
   PREDICT MODE - OBLIGATOIRE / FACULTATIF
======================================== */

/* Container pour l'option facultatif */
#predict-optional-container {
    display: none;
    align-items: center;
    gap: 10px;
    margin-top: 10px;
    padding: 10px 14px;
    background: rgba(175, 82, 222, 0.08);
    border-radius: 10px;
}

#predict-optional-container span {
    font-size: 14px;
    color: #5856d6;
}

/* Feedback OBLIGATOIRE (rouge) */
.predict-feedback.mandatory {
    background: rgba(255, 59, 48, 0.15) !important;
    color: #ff3b30 !important;
    border: 1px solid rgba(255, 59, 48, 0.3);
}

/* Feedback FACULTATIF (violet) */
.predict-feedback.optional {
    background: rgba(88, 86, 214, 0.15) !important;
    color: #5856d6 !important;
    border: 1px solid rgba(88, 86, 214, 0.3);
}

/* ========================================
   ITEMS PREDICTED - OBLIGATOIRE (ROUGE)
======================================== */

/* Bordure rouge pointillée pour obligatoire */
.mep-item.predicted.predicted-mandatory {
    border: 2px dashed #ff3b30 !important;
    position: relative;
}

.mep-item.predicted.predicted-mandatory::after {
    content: "📌";
    position: absolute;
    top: -8px;
    right: -8px;
    font-size: 14px;
    background: white;
    border-radius: 50%;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
}

/* Initiale ROUGE pour obligatoire */
.predict-initial.mandatory {
    position: absolute;
    top: -8px;
    right: 14px;
    font-size: 11px;
    background: #ff3b30 !important;
    color: white;
    border-radius: 50%;
    width: 18px;
    height: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    box-shadow: 0 2px 4px rgba(255, 59, 48, 0.4);
}

/* ========================================
   ITEMS PREDICTED - FACULTATIF (VIOLET)
======================================== */

/* Bordure violette pointillée pour facultatif */
.mep-item.predicted.predicted-optional {
    border: 2px dashed #5856d6 !important;
    position: relative;
}

.mep-item.predicted.predicted-optional::after {
    content: "💜";
    position: absolute;
    top: -8px;
    right: -8px;
    font-size: 14px;
    background: white;
    border-radius: 50%;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
}

/* Initiale VIOLETTE pour facultatif */
.predict-initial.optional {
    position: absolute;
    top: -8px;
    right: 14px;
    font-size: 11px;
    background: #5856d6 !important;
    color: white;
    border-radius: 50%;
    width: 18px;
    height: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    box-shadow: 0 2px 4px rgba(88, 86, 214, 0.4);
}

/* ========================================
   PREDICT SUR ITEMS DÉJÀ PRIS
======================================== */

/* Predict obligatoire sur item déjà coloré */
.mep-item.cook-1.predicted.predicted-mandatory,
.mep-item.cook-2.predicted.predicted-mandatory,
.mep-item.cook-3.predicted.predicted-mandatory,
.mep-item.cook-4.predicted.predicted-mandatory,
.mep-item.cook-5.predicted.predicted-mandatory {
    border: 2px dashed #ff3b30 !important;
}

/* Predict facultatif sur item déjà coloré */
.mep-item.cook-1.predicted.predicted-optional,
.mep-item.cook-2.predicted.predicted-optional,
.mep-item.cook-3.predicted.predicted-optional,
.mep-item.cook-4.predicted.predicted-optional,
.mep-item.cook-5.predicted.predicted-optional {
    border: 2px dashed #5856d6 !important;
}

/* Predict sur item rayé */
.mep-item.done.predicted.predicted-mandatory {
    border: 2px dashed #ff3b30 !important;
}

.mep-item.done.predicted.predicted-optional {
    border: 2px dashed #5856d6 !important;
}

/* ========================================
   DARK MODE
======================================== */

[data-theme="dark"] #predict-optional-container {
    background: rgba(175, 82, 222, 0.15);
}

[data-theme="dark"] #predict-optional-container span {
    color: #d8b4fe;
}

[data-theme="dark"] .predict-feedback.mandatory {
    background: rgba(255, 59, 48, 0.2) !important;
    color: #ff6b6b !important;
}

[data-theme="dark"] .predict-feedback.optional {
    background: rgba(88, 86, 214, 0.2) !important;
    color: #d8b4fe !important;
}

/* Boutons +/- quantité dans My List */
.mylist-qty-controls {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: auto;
}

.mylist-qty-btn {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: none;
    background: var(--accent, #007aff);
    color: white;
    font-size: 18px;
    font-weight: bold;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.1s, opacity 0.1s;
}

.mylist-qty-btn:active {
    transform: scale(0.9);
    opacity: 0.8;
}

.mylist-qty-value {
    min-width: 30px;
    text-align: center;
    font-weight: 600;
    font-size: 16px;
    color: var(--text-primary, #1c1c1e);
}

.mylist-qty-unit {
    font-size: 12px;
    color: var(--text-secondary, #8e8e93);
}

/* Dark mode */
[data-theme="dark"] .mylist-qty-value {
    color: var(--text-primary, #f5f5f7);
}

[data-theme="dark"] .mylist-qty-btn {
    background: var(--accent, #0a84ff);
}

/* Bouton de libération dans My List */
.mylist-release-btn {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: none;
    background: rgba(255, 59, 48, 0.1);
    color: #ff3b30;
    font-size: 24px;
    font-weight: 300;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    margin-left: 8px;
    flex-shrink: 0;
}

.mylist-release-btn:hover {
    background: rgba(255, 59, 48, 0.2);
    transform: scale(1.05);
}

.mylist-release-btn:active {
    transform: scale(0.95);
    background: rgba(255, 59, 48, 0.3);
}

/* Dark mode */
[data-theme="dark"] .mylist-release-btn {
    background: rgba(255, 69, 58, 0.15);
    color: #ff453a;
}

[data-theme="dark"] .mylist-release-btn:hover {
    background: rgba(255, 69, 58, 0.25);
}

[data-theme="dark"] .mylist-release-btn:active {
    background: rgba(255, 69, 58, 0.35);
}

/* 🤝 Contributions en dark mode */
[data-theme="dark"] .mylist-contrib-badge {
    color: #bf94ff;
    background: rgba(191, 148, 255, 0.15);
}

/* Ajouter après .etiquette-printer-select:focus */

.etiquette-qty-value {
    font-size: 18px;
    font-weight: 600;
    min-width: 30px;
    text-align: center;
    color: #1d1d1f;
}

/* Login — no theme toggle needed (always dark) */

/* ======================================
   DARK MODE - OPTIMIZED (MERGED)
====================================== */
[data-theme="dark"] .segmented button,
[data-theme="dark"] .hygiene-tab,
[data-theme="dark"] .predict-bar span,
[data-theme="dark"] label,
[data-theme="dark"] #view-hygiene span,
[data-theme="dark"] #view-hygiene label {
    color: #ebebf5;
}

[data-theme="dark"] input,
[data-theme="dark"] select,
[data-theme="dark"] textarea {
    background: #3a3a3c;
    border-color: #48484a;
    color: #ffffff;
}

[data-theme="dark"] input::placeholder,
[data-theme="dark"] textarea::placeholder,
[data-theme="dark"] .hygiene-empty,
[data-theme="dark"] .empty-state,
[data-theme="dark"] .quantity-input::placeholder {
    color: #8e8e93;
}

[data-theme="dark"] .mep-section,
[data-theme="dark"] .order-category,
[data-theme="dark"] #mep-create-item,
[data-theme="dark"] .productivity-card,
[data-theme="dark"] .ranking-card,
[data-theme="dark"] .hygiene-card,
[data-theme="dark"] .mylist-cell,
[data-theme="dark"] .nettoyage-item {
    background: #2c2c2e;
    border-color: #3a3a3c;
}

[data-theme="dark"] .mep-item,
[data-theme="dark"] .order-item,
[data-theme="dark"] th,
[data-theme="dark"] .date-nav button {
    background: #3a3a3c;
    color: #ffffff;
}

[data-theme="dark"] .mep-item:hover,
[data-theme="dark"] .order-item:hover,
[data-theme="dark"] .date-nav button:hover,
[data-theme="dark"] ::-webkit-scrollbar-thumb,
[data-theme="dark"] .switch {
    background: #48484a;
}

[data-theme="dark"] .mylist-popup,
[data-theme="dark"] .mylist-popup-content,
[data-theme="dark"] ::-webkit-scrollbar-track {
    background: #1c1c1e;
}

[data-theme="dark"] .mylist-label,
[data-theme="dark"] .nettoyage-label,
[data-theme="dark"] .refroidissement-popup h3,
[data-theme="dark"] .mep-section h2,
[data-theme="dark"] .order-category h2,
[data-theme="dark"] h1,
[data-theme="dark"] h2,
[data-theme="dark"] h3,
[data-theme="dark"] h4,
[data-theme="dark"] #order-create-item h3,
[data-theme="dark"] #mep-create-item h3,
[data-theme="dark"] .edit-popup h3,
[data-theme="dark"] .edit-popup label,
[data-theme="dark"] .refroidissement-popup h3,
[data-theme="dark"] .refroidissement-popup label,
[data-theme="dark"] .hygiene-section-card h3 {
    color: #ffffff;
}

[data-theme="dark"] #mylist-scroll-zone,
[data-theme="dark"] #selection-date,
[data-theme="dark"] [style*="background: white"],
[data-theme="dark"] [style*="background:#fff"],
[data-theme="dark"] [style*="background: #fff"],
[data-theme="dark"] .hygiene-config,
[data-theme="dark"] #hygiene-tab-config,
[data-theme="dark"] #view-hygiene > div,
[data-theme="dark"] #view-hygiene section {
    background: #1c1c1e !important;
}

[data-theme="dark"] #mylist-scroll-zone h4,
[data-theme="dark"] .mylist-popup h2,
[data-theme="dark"] #mylist-title,
[data-theme="dark"] #mylist-close:hover,
[data-theme="dark"] .popup-box h4,
[data-theme="dark"] .order-category h2,
[data-theme="dark"] .mep-section h2,
[data-theme="dark"] .memo-du-jour-text,
[data-theme="dark"] .memo-item-tir .memo-content,
[data-theme="dark"] #selected-date,
[data-theme="dark"] #mep-items h2,
[data-theme="dark"] #mep-create-item h3,
[data-theme="dark"] .create-item-toggle input[type="checkbox"]:checked + span,
[data-theme="dark"] .order-category h2,
[data-theme="dark"] #order-items h2,
[data-theme="dark"] .hygiene-section h3,
[data-theme="dark"] .hygiene-section h4,
[data-theme="dark"] .hygiene-group-title,
[data-theme="dark"] .temp-group-title,
[data-theme="dark"] .hygiene-section p,
[data-theme="dark"] #view-hygiene h3,
[data-theme="dark"] #view-hygiene h4,
[data-theme="dark"] #view-hygiene p,
[data-theme="dark"] .temp-row span,
[data-theme="dark"] .temp-row label,
[data-theme="dark"] .frigo-row span,
[data-theme="dark"] .frigo-row label,
[data-theme="dark"] .hygiene-camion h3,
[data-theme="dark"] .camion-card h3,
[data-theme="dark"] .traca-item span,
[data-theme="dark"] .tracabilite-item span,
[data-theme="dark"] .refroid-item span,
[data-theme="dark"] .refroid-item label,
[data-theme="dark"] .hygiene-config h4,
[data-theme="dark"] .hygiene-config label,
[data-theme="dark"] .temp-input-row label,
[data-theme="dark"] .temp-input-row span,
[data-theme="dark"] .frigo-input-row label,
[data-theme="dark"] .frigo-input-row span,
[data-theme="dark"] .temp-control label,
[data-theme="dark"] .temp-control span,
[data-theme="dark"] .hygiene-section h3,
[data-theme="dark"] .hygiene-section h4,
[data-theme="dark"] .frigo-item .frigo-label,
[data-theme="dark"] .frigo-category h4,
[data-theme="dark"] .hygiene-camion h3,
[data-theme="dark"] .nettoyage-item .nettoyage-label,
[data-theme="dark"] .traca-label {
    color: #ffffff !important;
}

[data-theme="dark"] #mylist-scroll-zone ul,
[data-theme="dark"] .view,
[data-theme="dark"] .switch,
[data-theme="dark"] #hygiene-nettoyages-list,
[data-theme="dark"] .frigo-items {
    background: transparent !important;
}

[data-theme="dark"] #mylist-close,
[data-theme="dark"] .popup-box label,
[data-theme="dark"] .memo-du-jour-date,
[data-theme="dark"] .memo-meta,
[data-theme="dark"] .create-item-toggle span,
[data-theme="dark"] .temp-unit,
[data-theme="dark"] .nettoyage-item .countdown,
[data-theme="dark"] .traca-photo-zone span,
[data-theme="dark"] .photo-upload-zone span,
[data-theme="dark"] .upload-zone span,
[data-theme="dark"] #order-filters-container span,
[data-theme="dark"] #order-filters-container label,
[data-theme="dark"] .filters-box span,
[data-theme="dark"] .filters-box label {
    color: #aeaeb2 !important;
}

[data-theme="dark"] .hygiene-tabs,
[data-theme="dark"] table,
[data-theme="dark"] .etiquette-info,
[data-theme="dark"] .etiquette-checkbox,
[data-theme="dark"] .etiquette-quantity,
[data-theme="dark"] .etiquette-printer {
    background: #2c2c2e;
}

[data-theme="dark"] .edit-popup,
[data-theme="dark"] .modal-content,
[data-theme="dark"] .refroidissement-popup,
[data-theme="dark"] select option {
    background: #2c2c2e;
    color: #ffffff;
}

[data-theme="dark"] .popup-box input,
[data-theme="dark"] .popup-box select,
[data-theme="dark"] .popup-box textarea,
[data-theme="dark"] .popup-actions button,
[data-theme="dark"] #popup-mep-selects select,
[data-theme="dark"] button.secondary,
[data-theme="dark"] .btn-secondary,
[data-theme="dark"] .temp-btn,
[data-theme="dark"] .temp-input,
[data-theme="dark"] input[type="number"].temp-value,
[data-theme="dark"] .refroidissement-popup input {
    background: #3a3a3c !important;
    color: #ffffff !important;
    border: 1px solid #48484a !important;
}

[data-theme="dark"] .popup-box input::placeholder,
[data-theme="dark"] input::placeholder,
[data-theme="dark"] .mep-item.not-configured,
[data-theme="dark"] .mep-item.not-configured .mep-item-label {
    color: #8e8e93 !important;
}

[data-theme="dark"] .popup-actions button:hover,
[data-theme="dark"] .create-item-toggle:hover,
[data-theme="dark"] .slider,
[data-theme="dark"] .slider.predict-slider,
[data-theme="dark"] .temp-btn:hover,
[data-theme="dark"] .traca-submit:hover,
[data-theme="dark"] #traca-submit:hover {
    background: #48484a !important;
}

[data-theme="dark"] .popup-actions button:last-child,
[data-theme="dark"] .popup-services .service-toggle.active,
[data-theme="dark"] .service-toggle.active,
[data-theme="dark"] .filter-btn.active,
[data-theme="dark"] .service-filter-btn.active,
[data-theme="dark"] .filter-btn.active,
[data-theme="dark"] .service-btn.active,
[data-theme="dark"] .mep-filter-btn.active,
[data-theme="dark"] [class*="filter"] button.active {
    background: var(--apple-blue) !important;
    color: #ffffff !important;
    border-color: var(--apple-blue) !important;
}

[data-theme="dark"] .popup-services .service-toggle,
[data-theme="dark"] .service-toggle,
[data-theme="dark"] .filter-btn,
[data-theme="dark"] .service-filter-btn,
[data-theme="dark"] .filter-btn,
[data-theme="dark"] .service-btn,
[data-theme="dark"] .mep-filter-btn,
[data-theme="dark"] [class*="filter"] button {
    background: #3a3a3c !important;
    color: #ebebf5 !important;
    border: 1px solid #48484a !important;
}

[data-theme="dark"] .order-edit-popup,
[data-theme="dark"] .order-mep-popup,
[data-theme="dark"] .mep-edit-popup {
    background: rgba(0, 0, 0, 0.75);
}

[data-theme="dark"] .mep-edit-popup .popup-box,
[data-theme="dark"] .memo-create-body,
[data-theme="dark"] .mep-item.predicted::after,
[data-theme="dark"] #order-service-filter,
[data-theme="dark"] .mep-item.predicted::after {
    background: #2c2c2e !important;
}

[data-theme="dark"] ::-webkit-scrollbar-thumb:hover,
[data-theme="dark"] .switch-slider,
[data-theme="dark"] .quantity-skip:hover {
    background: #636366;
}

[data-theme="dark"] .urgence-toggle-container span,
[data-theme="dark"] .urgence-label,
[data-theme="dark"] .memo-content,
[data-theme="dark"] .memo-create-body label,
[data-theme="dark"] #mep-predict-mode span,
[data-theme="dark"] .predict-toggle span,
[data-theme="dark"] #order-urgence-toggle span,
[data-theme="dark"] .order-filters span,
[data-theme="dark"] .order-filters label,
[data-theme="dark"] .order-controls span,
[data-theme="dark"] .order-controls label,
[data-theme="dark"] .hygiene-section label,
[data-theme="dark"] .hygiene-section span,
[data-theme="dark"] .hygiene-section p {
    color: #ebebf5 !important;
}

[data-theme="dark"] #order-search,
[data-theme="dark"] #mep-search,
[data-theme="dark"] input[type="text"],
[data-theme="dark"] input[type="number"],
[data-theme="dark"] input[type="password"],
[data-theme="dark"] input[type="email"],
[data-theme="dark"] select,
[data-theme="dark"] .traca-select,
[data-theme="dark"] #traca-service-select,
[data-theme="dark"] #traca-category-select {
    background: #2c2c2e !important;
    border: 1px solid #48484a !important;
    color: #ffffff !important;
}

[data-theme="dark"] #order-create-item,
[data-theme="dark"] #mep-create-item,
[data-theme="dark"] .hygiene-section-card,
[data-theme="dark"] #mep-create-item,
[data-theme="dark"] #order-items > section,
[data-theme="dark"] #order-items > div,
[data-theme="dark"] .order-category,
[data-theme="dark"] #order-create-item,
[data-theme="dark"] .hygiene-section,
[data-theme="dark"] .hygiene-camion,
[data-theme="dark"] .camion-card,
[data-theme="dark"] .order-filters,
[data-theme="dark"] .order-controls,
[data-theme="dark"] #order-filters,
[data-theme="dark"] .filters-container,
[data-theme="dark"] .hygiene-camion,
[data-theme="dark"] #order-filters-container,
[data-theme="dark"] .order-filters-box,
[data-theme="dark"] .filters-box,
[data-theme="dark"] #view-orders > div:not(.order-category) {
    background: #1c1c1e !important;
    border: 1px solid #3a3a3c !important;
}

[data-theme="dark"] button.primary,
[data-theme="dark"] button[type="submit"],
[data-theme="dark"] .btn-primary,
[data-theme="dark"] .btn-memo-save,
[data-theme="dark"] #mep-switch button.active,
[data-theme="dark"] #order-service-filter button.active,
[data-theme="dark"] .segmented button.active {
    background: var(--apple-blue) !important;
    color: #ffffff !important;
}

[data-theme="dark"] .module-memo,
[data-theme="dark"] #module-creation-memo,
[data-theme="dark"] .actions-row,
[data-theme="dark"] #order-actions-row,
[data-theme="dark"] #view-orders > div {
    background: #1c1c1e !important;
    border-color: #3a3a3c !important;
}

[data-theme="dark"] #selection-date div,
[data-theme="dark"] #mep-switch,
[data-theme="dark"] #mep-predict-mode,
[data-theme="dark"] .predict-toggle,
[data-theme="dark"] #mep-config-mode,
[data-theme="dark"] .config-toggle {
    background: #2c2c2e !important;
    border-color: #3a3a3c !important;
}

[data-theme="dark"] #mep-switch button,
[data-theme="dark"] .create-item-toggle,
[data-theme="dark"] #order-service-filter button,
[data-theme="dark"] .releve-badge,
[data-theme="dark"] .releve-status {
    background: #3a3a3c !important;
    color: #ebebf5 !important;
}

[data-theme="dark"] #order-urgence-toggle,
[data-theme="dark"] .urgence-toggle,
[data-theme="dark"] .temp-row,
[data-theme="dark"] .hygiene-temp-row,
[data-theme="dark"] .frigo-row,
[data-theme="dark"] .traca-item,
[data-theme="dark"] .tracabilite-item,
[data-theme="dark"] .refroid-item,
[data-theme="dark"] .nettoyage-item,
[data-theme="dark"] .traca-item {
    background: #2c2c2e !important;
    border: 1px solid #3a3a3c !important;
}

/* Dark mode - Couleurs nettoyages pris par cook */
[data-theme="dark"] .nettoyage-item.taken.cook-1 {
    border-left: 4px solid var(--apple-blue) !important;
    background: rgba(0, 122, 255, 0.15) !important;
}
[data-theme="dark"] .nettoyage-item.taken.cook-2 {
    border-left: 4px solid var(--apple-orange) !important;
    background: rgba(255, 149, 0, 0.15) !important;
}
[data-theme="dark"] .nettoyage-item.taken.cook-3 {
    border-left: 4px solid var(--apple-green) !important;
    background: rgba(52, 199, 89, 0.15) !important;
}
[data-theme="dark"] .nettoyage-item.taken.cook-4 {
    border-left: 4px solid var(--apple-purple) !important;
    background: rgba(175, 82, 222, 0.15) !important;
}
[data-theme="dark"] .nettoyage-item.taken.cook-5 {
    border-left: 4px solid var(--apple-pink) !important;
    background: rgba(255, 45, 85, 0.15) !important;
}

[data-theme="dark"] .temp-input-row,
[data-theme="dark"] .frigo-input-row,
[data-theme="dark"] .temp-control,
[data-theme="dark"] .hygiene-input-row,
[data-theme="dark"] .hygiene-section > div {
    background: #2c2c2e !important;
    border: 1px solid #3a3a3c !important;
    border-radius: 12px;
}

[data-theme="dark"] .etiquette-popup h3,
[data-theme="dark"] .etiquette-value,
[data-theme="dark"] .etiquette-checkbox span,
[data-theme="dark"] .etiquette-quantity > span,
[data-theme="dark"] .etiquette-qty-value,
[data-theme="dark"] .etiquette-printer > span,
[data-theme="dark"] .quantity-popup h4 {
    color: #f5f5f7;
}

[data-theme="dark"] .etiquette-qty-input,
[data-theme="dark"] .etiquette-printer-select,
[data-theme="dark"] .quantity-input,
[data-theme="dark"] .quantity-unit {
    background: #3a3a3c;
    border-color: #48484a;
    color: #f5f5f7;
}
/* ============================================
   RECETTES - CSS (Light + Dark Mode)
   À ajouter à la fin de style.css
   ============================================ */

/* ========== TABS ========== */


.recette-tab-btn {
    flex: 1;
    padding: 12px 16px;
    border: none;
    border-radius: 10px;
    font-size: 15px;
    font-weight: 600;
    background: #f5f5f7;
    color: #666;
    cursor: pointer;
    transition: all 0.2s;
}

.recette-tab-btn.active {
    background: var(--apple-blue, #007aff);
    color: white;
}

[data-theme="dark"] .recette-tab-btn {
    background: #2c2c2e;
    color: #98989d;
}

[data-theme="dark"] .recette-tab-btn.active {
    background: var(--apple-blue, #0a84ff);
    color: white;
}

/* ========== SECTION ========== */
.recettes-section {
    padding: 16px;
}

/* ========== PRÉSENTATIONS GRID ========== */
.presentations-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
}

@media (min-width: 768px) {
    .presentations-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (min-width: 1024px) {
    .presentations-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* ========== PRESENTATION CARD ========== */
.presentation-card {
    background: var(--card-bg, #fff);
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    transition: transform 0.2s, box-shadow 0.2s;
}

.presentation-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(0,0,0,0.12);
}

[data-theme="dark"] .presentation-card {
    background: #1c1c1e;
    box-shadow: 0 2px 8px rgba(0,0,0,0.3);
}

.presentation-photo {
    aspect-ratio: 4/3;
    background: #f5f5f7;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
}

.presentation-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.presentation-photo.no-photo {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

[data-theme="dark"] .presentation-photo {
    background: #2c2c2e;
}

[data-theme="dark"] .presentation-photo.no-photo {
    background: linear-gradient(135deg, #4a5568 0%, #2d3748 100%);
}

.placeholder-icon {
    font-size: 48px;
    opacity: 0.5;
}

.pending-badge {
    position: absolute;
    top: 8px;
    right: 8px;
    background: #ff9500;
    color: white;
    font-size: 11px;
    font-weight: 600;
    padding: 4px 8px;
    border-radius: 6px;
}

.presentation-info {
    padding: 12px;
}

.presentation-category {
    margin: 0 0 4px 0;
    font-size: 14px;
    font-weight: 600;
    color: var(--text, #1d1d1f);
}

[data-theme="dark"] .presentation-category {
    color: #f5f5f7;
}

.presentation-author {
    font-size: 12px;
    color: #86868b;
}

.presentation-status {
    display: block;
    font-size: 11px;
    margin-top: 4px;
    padding: 4px 8px;
    border-radius: 4px;
}

.presentation-status.rejected {
    background: rgba(255, 59, 48, 0.1);
    color: #ff3b30;
}

.presentation-status.approved {
    background: rgba(52, 199, 89, 0.1);
    color: #34c759;
}

.suggest-btn {
    width: 100%;
    padding: 10px;
    border: none;
    border-top: 1px solid var(--border, #e5e5e7);
    background: transparent;
    font-size: 13px;
    font-weight: 600;
    color: var(--apple-blue, #007aff);
    cursor: pointer;
    transition: background 0.2s;
}

.suggest-btn:hover {
    background: rgba(0, 122, 255, 0.1);
}

[data-theme="dark"] .suggest-btn {
    border-color: #3a3a3c;
    color: #0a84ff;
}

[data-theme="dark"] .suggest-btn:hover {
    background: rgba(10, 132, 255, 0.1);
}

/* ========== PHOTO VIEWER ========== */
.photo-viewer-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.9);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    padding: 20px;
}

.photo-viewer {
    position: relative;
    max-width: 90vw;
    max-height: 90vh;
}

.photo-viewer img {
    max-width: 100%;
    max-height: 80vh;
    border-radius: 12px;
}

.photo-viewer h3 {
    text-align: center;
    color: white;
    margin-top: 16px;
    font-size: 18px;
}

.photo-viewer-close {
    position: absolute;
    top: -40px;
    right: 0;
    background: none;
    border: none;
    color: white;
    font-size: 24px;
    cursor: pointer;
}

/* ========== RECIPES LIST ========== */
.recipes-header {
    display: flex;
    gap: 12px;
    margin-bottom: 16px;
}

.recipes-search {
    flex: 1;
    padding: 12px 16px;
    border: 2px solid var(--border, #e5e5e7);
    border-radius: 12px;
    font-size: 15px;
    background: var(--card-bg, #fff);
    color: var(--text, #1d1d1f);
}

.recipes-search:focus {
    outline: none;
    border-color: var(--apple-blue, #007aff);
}

[data-theme="dark"] .recipes-search {
    background: #1c1c1e;
    border-color: #3a3a3c;
    color: #f5f5f7;
}

.add-recipe-btn {
    padding: 12px 20px;
    border: none;
    border-radius: 12px;
    background: var(--apple-blue, #007aff);
    color: white;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
}

.add-recipe-btn:active {
    transform: scale(0.98);
}

.recipes-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.recipe-item {
    background: var(--card-bg, #fff);
    border-radius: 12px;
    padding: 16px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}

[data-theme="dark"] .recipe-item {
    background: #1c1c1e;
}

.recipe-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 4px;
}

.recipe-name {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    color: var(--text, #1d1d1f);
}

[data-theme="dark"] .recipe-name {
    color: #f5f5f7;
}

.recipe-badge {
    font-size: 10px;
    font-weight: 600;
    padding: 3px 8px;
    border-radius: 4px;
}

.recipe-badge.pending {
    background: #ff950020;
    color: #ff9500;
}

.recipe-badge.rejected {
    background: #ff3b3020;
    color: #ff3b30;
}

.recipe-authors {
    font-size: 12px;
    color: #86868b;
    margin-bottom: 12px;
}

.recipe-actions {
    display: flex;
    gap: 8px;
}

.recipe-btn {
    padding: 8px 16px;
    border: none;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
}

.recipe-btn.view {
    background: #f5f5f7;
    color: #666;
}

.recipe-btn.edit {
    background: var(--apple-blue, #007aff);
    color: white;
}

[data-theme="dark"] .recipe-btn.view {
    background: #2c2c2e;
    color: #98989d;
}

.recipe-btn:active {
    transform: scale(0.97);
}

/* ========== EMPTY STATE ========== */
.empty-state {
    text-align: center;
    padding: 60px 20px;
    color: #86868b;
}

.empty-icon {
    font-size: 48px;
    display: block;
    margin-bottom: 16px;
    opacity: 0.5;
}

/* ========== POPUP ========== */
.recette-popup-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    padding: 20px;
}

.recette-popup {
    background: var(--card-bg, #fff);
    border-radius: 20px;
    padding: 24px;
    width: 100%;
    max-width: 400px;
    max-height: 90vh;
    overflow-y: auto;
    position: relative;
}

[data-theme="dark"] .recette-popup {
    background: #1c1c1e;
}

.recette-popup h3 {
    margin: 0 0 8px 0;
    font-size: 20px;
    color: var(--text, #1d1d1f);
}

[data-theme="dark"] .recette-popup h3 {
    color: #f5f5f7;
}

.popup-subtitle {
    color: #86868b;
    margin: 0 0 20px 0;
    font-size: 14px;
}

.popup-close {
    position: absolute;
    top: 16px;
    right: 16px;
    background: none;
    border: none;
    font-size: 20px;
    color: #86868b;
    cursor: pointer;
}

.warning-box {
    background: #ff950020;
    color: #b36b00;
    padding: 12px;
    border-radius: 10px;
    font-size: 13px;
    margin-bottom: 20px;
}

.warning-box.error {
    background: #ff3b3020;
    color: #ff3b30;
}

[data-theme="dark"] .warning-box {
    background: #ff950030;
    color: #ffb340;
}

[data-theme="dark"] .warning-box.error {
    background: #ff3b3030;
    color: #ff6961;
}

/* Photo upload */
.photo-upload-area {
    border: 2px dashed var(--border, #e5e5e7);
    border-radius: 12px;
    padding: 40px 20px;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s;
    margin-bottom: 20px;
}

.photo-upload-area:hover {
    border-color: var(--apple-blue, #007aff);
    background: rgba(0, 122, 255, 0.05);
}

[data-theme="dark"] .photo-upload-area {
    border-color: #3a3a3c;
}

.upload-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    color: #86868b;
}

.upload-icon {
    font-size: 32px;
}

.upload-preview {
    max-width: 100%;
    max-height: 200px;
    border-radius: 8px;
}

/* Form inputs */
.recette-popup label {
    display: block;
    margin-bottom: 16px;
    font-size: 13px;
    font-weight: 600;
    color: #86868b;
}

.recipe-input,
.recipe-textarea {
    width: 100%;
    padding: 12px;
    border: 2px solid var(--border, #e5e5e7);
    border-radius: 10px;
    font-size: 15px;
    margin-top: 6px;
    background: var(--card-bg, #fff);
    color: var(--text, #1d1d1f);
}

.recipe-textarea {
    min-height: 100px;
    resize: vertical;
}

.recipe-input:focus,
.recipe-textarea:focus {
    outline: none;
    border-color: var(--apple-blue, #007aff);
}

[data-theme="dark"] .recipe-input,
[data-theme="dark"] .recipe-textarea {
    background: #2c2c2e;
    border-color: #3a3a3c;
    color: #f5f5f7;
}

/* Popup actions */
.popup-actions {
    display: flex;
    gap: 12px;
    margin-top: 20px;
}

.popup-btn {
    flex: 1;
    padding: 14px;
    border: none;
    border-radius: 12px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}

.popup-btn.cancel {
    background: #f5f5f7;
    color: #666;
}

.popup-btn.submit {
    background: var(--apple-blue, #007aff);
    color: white;
}

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

.popup-btn:active:not(:disabled) {
    transform: scale(0.98);
}

[data-theme="dark"] .popup-btn.cancel {
    background: #2c2c2e;
    color: #98989d;
}

/* Recipe viewer */
.recipe-viewer {
    max-width: 500px;
}

.recipe-viewer h2 {
    margin: 0 0 20px 0;
    font-size: 22px;
    color: var(--text, #1d1d1f);
    padding-right: 40px;
}

[data-theme="dark"] .recipe-viewer h2 {
    color: #f5f5f7;
}

.recipe-section {
    margin-bottom: 20px;
}

.recipe-section h4 {
    margin: 0 0 8px 0;
    font-size: 14px;
    color: var(--apple-blue, #007aff);
}

.recipe-content {
    font-size: 15px;
    line-height: 1.6;
    color: var(--text, #1d1d1f);
    white-space: pre-wrap;
}

[data-theme="dark"] .recipe-content {
    color: #e5e5e7;
}

.recipe-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding-top: 16px;
    border-top: 1px solid var(--border, #e5e5e7);
    font-size: 12px;
    color: #86868b;
}

[data-theme="dark"] .recipe-meta {
    border-color: #3a3a3c;
}

/* Toast */
.recette-toast {
    position: fixed;
    bottom: 100px;
    left: 50%;
    transform: translateX(-50%) translateY(20px);
    background: rgba(52, 199, 89, 0.95);
    color: white;
    padding: 14px 24px;
    border-radius: 12px;
    font-size: 15px;
    font-weight: 500;
    z-index: 99999;
    opacity: 0;
    transition: all 0.3s ease;
}

.recette-toast.show {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

/* Fix dark mode recettes */
[data-theme="dark"] .recette-tabs {
    background: #1c1c1e !important;
    border-color: #3a3a3c !important;
}

[data-theme="dark"] .recette-tabs .tab-btn {
    background: #2c2c2e !important;
    color: #f5f5f7 !important;
    border-color: #3a3a3c !important;
}

[data-theme="dark"] .recette-tabs .tab-btn.active {
    background: #0a84ff !important;
    color: white !important;
}

[data-theme="dark"] .recettes-section {
    background: transparent !important;
}

[data-theme="dark"] .pres-card {
    background: #2c2c2e !important;
}

[data-theme="dark"] .pres-card .category-name {
    color: #f5f5f7 !important;
}

[data-theme="dark"] .placeholder-photo {
    background: #3a3a3c !important;
    color: #86868b !important;
}
/* ============================================
   OVERLAY VALIDATION OBLIGATOIRE
============================================ */
.validation-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.95);
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.validation-box {
    background: var(--bg-primary);
    border-radius: 12px;
    padding: 30px;
    max-width: 500px;
    width: 100%;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}

.validation-box h2 {
    margin: 0 0 15px 0;
    color: #ff4444;
    font-size: 24px;
    text-align: center;
}

.validation-box p {
    margin: 10px 0;
    text-align: center;
    color: var(--text-primary);
}

.penalty-notice {
    font-weight: bold;
    color: #ff6b6b;
    font-size: 14px;
}

.validation-items-list {
    margin-top: 20px;
    max-height: 400px;
    overflow-y: auto;
}

.validation-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 15px;
    background: var(--bg-secondary);
    border-radius: 8px;
    margin-bottom: 10px;
}

.validation-item-label {
    flex: 1;
    font-weight: 500;
    color: var(--text-primary);
}

.validation-item-delay {
    margin: 0 10px;
    font-size: 12px;
    color: #ff4444;
}

.validation-item-btn {
    padding: 8px 16px;
    background: #4CAF50;
    color: white;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-weight: 500;
    transition: background 0.2s;
}

.validation-item-btn:hover {
    background: #45a049;
}

.validation-item-btn:active {
    transform: scale(0.98);
}

/* Dark theme support */
[data-theme="dark"] .validation-box {
    background: #1c1c1e;
}

[data-theme="dark"] .validation-item {
    background: #2c2c2e;
}

/* ============================================
   ASSIST SYSTEM - Styles
   ============================================ */

/* Popup overlay commun */
.assist-popup-overlay,
.assist-incoming-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    animation: fadeIn 0.2s ease;
}

.assist-popup,
.assist-incoming-popup {
    background: var(--bg-primary, #ffffff);
    border-radius: var(--radius-lg, 16px);
    padding: 24px;
    max-width: 320px;
    width: 90%;
    text-align: center;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    animation: popIn 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.assist-popup h3,
.assist-incoming-popup h3 {
    margin: 0 0 16px 0;
    font-size: 20px;
    font-weight: 600;
    color: var(--text-primary, #1c1c1e);
}

.assist-popup p,
.assist-incoming-popup p {
    margin: 0 0 12px 0;
    font-size: 15px;
    color: var(--text-secondary, #3c3c43);
}

.assist-item-label {
    font-weight: 600;
    font-size: 17px;
    color: var(--apple-blue, #007aff);
    padding: 12px;
    background: var(--bg-secondary, #f2f2f7);
    border-radius: var(--radius-md, 12px);
    margin-bottom: 20px;
}

.assist-actions {
    display: flex;
    gap: 12px;
}

.assist-btn {
    flex: 1;
    padding: 14px 20px;
    border: none;
    border-radius: var(--radius-md, 12px);
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.assist-btn.cancel,
.assist-btn.decline {
    background: var(--bg-tertiary, #e5e5ea);
    color: var(--text-primary, #1c1c1e);
}

.assist-btn.cancel:hover,
.assist-btn.decline:hover {
    background: #d1d1d6;
}

.assist-btn.confirm,
.assist-btn.accept {
    background: var(--apple-green, #34c759);
    color: white;
}

.assist-btn.confirm:hover,
.assist-btn.accept:hover {
    background: #2da44e;
}

.assist-btn:active {
    transform: scale(0.97);
}

/* Popup entrante - style plus visible */
.assist-incoming-popup {
    border: 3px solid var(--apple-green, #34c759);
    animation: popIn 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), pulse 1.5s infinite;
}

@keyframes pulse {
    0%, 100% {
        box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3), 0 0 0 0 rgba(52, 199, 89, 0.4);
    }
    50% {
        box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3), 0 0 0 15px rgba(52, 199, 89, 0);
    }
}

/* MEP Item - Style assisté (2 couleurs) */
.mep-item.assisted {
    background: linear-gradient(
        135deg,
        var(--owner-color, #e5e5ea) 0%,
        var(--owner-color, #e5e5ea) 45%,
        var(--assist-color, #d1d1d6) 55%,
        var(--assist-color, #d1d1d6) 100%
    );
    position: relative;
}

.mep-item.assisted::before {
    content: "";
    position: absolute;
    top: 2px;
    right: 2px;
    width: 16px;
    height: 16px;
    font-size: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--apple-green, #34c759);
    color: white;
    font-weight: 700;
}

/* Badge indiquant l'assist */
.mep-item.assisted::after {
    content: "2";
    position: absolute;
    top: 2px;
    right: 2px;
    width: 18px;
    height: 18px;
    font-size: 11px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--apple-green, #34c759);
    color: white;
    font-weight: 700;
}

/* Demande d'assist en cours */
.mep-item.assist-pending {
    position: relative;
}

.mep-item.assist-pending::after {
    content: "?";
    position: absolute;
    top: 2px;
    right: 2px;
    width: 18px;
    height: 18px;
    font-size: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--apple-orange, #ff9500);
    color: white;
    font-weight: 700;
    animation: blink 1s infinite;
}

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

/* Dark mode */
[data-theme="dark"] .assist-popup,
[data-theme="dark"] .assist-incoming-popup {
    background: #1c1c1e;
}

[data-theme="dark"] .assist-popup h3,
[data-theme="dark"] .assist-incoming-popup h3 {
    color: #ffffff;
}

[data-theme="dark"] .assist-popup p,
[data-theme="dark"] .assist-incoming-popup p {
    color: #ebebf5;
}

[data-theme="dark"] .assist-item-label {
    background: #2c2c2e;
    color: var(--apple-blue);
}

[data-theme="dark"] .assist-btn.cancel,
[data-theme="dark"] .assist-btn.decline {
    background: #3a3a3c;
    color: #ffffff;
}

[data-theme="dark"] .assist-btn.cancel:hover,
[data-theme="dark"] .assist-btn.decline:hover {
    background: #48484a;
}

/* ======================================
   BARRE SUPÉRIEURE COMMANDES
====================================== */
.orders-top-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
    gap: 12px;
}

.order-history-btn {
    padding: 10px 16px;
    background: var(--apple-blue);
    color: white;
    border: none;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.order-history-btn:hover {
    background: #0056b3;
    transform: scale(1.02);
}

.order-history-btn:active {
    transform: scale(0.98);
}

/* ======================================
   DRAWER HISTORIQUE COMMANDES
====================================== */
.orders-history-drawer {
    position: fixed;
    top: 0;
    right: -100%;
    width: 100%;
    max-width: 400px;
    height: 100vh;
    background: var(--bg-primary);
    box-shadow: -4px 0 20px rgba(0, 0, 0, 0.15);
    z-index: 9002;
    transition: right 0.3s ease;
    display: flex;
    flex-direction: column;
}

.orders-history-drawer.open {
    right: 0;
}

.orders-history-drawer-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    border-bottom: 1px solid var(--apple-gray-5);
    background: var(--bg-secondary);
}

.orders-history-drawer-header h3 {
    font-size: 18px;
    font-weight: 700;
    margin: 0;
    color: var(--text-primary);
}

.orders-history-drawer .drawer-close {
    width: 36px;
    height: 36px;
    border: none;
    background: var(--apple-gray-5);
    border-radius: 50%;
    font-size: 20px;
    cursor: pointer;
    color: var(--text-secondary);
    transition: all 0.2s ease;
}

.orders-history-drawer .drawer-close:hover {
    background: var(--apple-gray-4);
}

.orders-history-drawer-content {
    flex: 1;
    overflow-y: auto;
    padding: 16px 20px;
}

/* Overlay pour le drawer */
#orders-history-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.4);
    z-index: 9001;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}

#orders-history-overlay.visible {
    opacity: 1;
    visibility: visible;
}

/* Dark mode */
[data-theme="dark"] .orders-history-drawer {
    box-shadow: -4px 0 20px rgba(0, 0, 0, 0.4);
}

[data-theme="dark"] #orders-history-overlay {
    background: rgba(0, 0, 0, 0.6);
}

/* ======================================
   VUE HISTORIQUE COMMANDES (DRAWER)
====================================== */

/* Filtres date */
#user-history-date-filter {
    display: flex;
    gap: 8px;
    margin-bottom: 16px;
    flex-wrap: wrap;
}

#user-history-date-picker {
    flex: 1;
    min-width: 120px;
    padding: 10px 12px;
    border-radius: 10px;
    border: 1px solid var(--apple-gray);
    background: var(--bg-secondary);
    font-size: 14px;
    color: var(--text-primary);
    transition: all 0.2s ease;
}

#user-history-date-picker:focus {
    outline: none;
    border-color: var(--apple-blue);
    box-shadow: 0 0 0 3px rgba(0, 122, 255, 0.15);
}

#user-history-today-btn,
#user-history-week-btn {
    padding: 10px 14px;
    background: var(--apple-gray);
    color: white;
    border-radius: 10px;
    font-weight: 600;
    font-size: 13px;
    white-space: nowrap;
    border: none;
    cursor: pointer;
    transition: all 0.2s ease;
}

#user-history-today-btn:hover,
#user-history-week-btn:hover {
    background: #6e6e73;
}

#user-history-today-btn.active,
#user-history-week-btn.active {
    background: var(--apple-blue);
}

#user-history-week-select {
    padding: 10px 12px;
    border-radius: 10px;
    border: 1px solid var(--apple-gray);
    background: var(--bg-secondary);
    color: var(--text-primary);
    font-size: 13px;
    font-weight: 500;
}

/* Stats */
.user-history-stats {
    display: flex;
    gap: 10px;
    margin-bottom: 16px;
    padding: 12px;
    background: linear-gradient(135deg, rgba(0, 122, 255, 0.08) 0%, rgba(0, 122, 255, 0.04) 100%);
    border-radius: 12px;
}

.user-history-stat {
    flex: 1;
    text-align: center;
}

.user-history-stat-value {
    font-size: 20px;
    font-weight: 700;
    color: var(--apple-blue);
}

.user-history-stat-label {
    font-size: 11px;
    color: var(--text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.user-history-stat.stat-warning .user-history-stat-value {
    color: var(--apple-red);
}

/* Liste historique */
#user-orders-history {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.user-history-item {
    background: var(--bg-secondary);
    padding: 12px 14px;
    border-radius: 12px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
    transition: all 0.2s ease;
}

.user-history-item:hover {
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
}

.user-history-item-info {
    flex: 1;
    min-width: 0;
}

.user-history-item-label {
    font-size: 14px;
    font-weight: 500;
    color: var(--text-primary);
    margin-bottom: 3px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.user-history-item-meta {
    font-size: 12px;
    color: var(--text-tertiary);
}

.user-history-item-qty {
    font-size: 12px;
    color: var(--apple-blue);
    margin-top: 3px;
    font-weight: 500;
}

.user-history-item-time {
    font-size: 13px;
    font-weight: 600;
    color: var(--apple-blue);
    white-space: nowrap;
}

/* États spéciaux */
.user-history-item.urgent .user-history-item-label::before {
    content: "⚠️ ";
}

.user-history-item.reordered .user-history-item-label::before {
    content: "🔄 ";
}

.user-history-item.not-received {
    border-left: 4px solid var(--apple-red);
    background: rgba(255, 59, 48, 0.05);
}

.user-history-item.not-needed {
    opacity: 0.6;
    text-decoration: line-through;
}

.history-not-needed-badge {
    color: var(--apple-red);
    font-weight: bold;
}

/* Quantité modifiée par admin */
.history-qty-old {
    text-decoration: line-through;
    color: var(--apple-red);
}

.history-qty-arrow {
    color: var(--text-tertiary);
    margin: 0 4px;
}

.history-qty-new {
    color: var(--apple-green);
    font-weight: 600;
}

.history-qty-modifier {
    font-size: 11px;
    color: var(--text-tertiary);
    font-style: italic;
    margin-left: 6px;
}

/* Historique vide */
.user-history-empty {
    text-align: center;
    padding: 40px 20px;
    color: var(--text-tertiary);
    font-size: 15px;
}

/* Dark mode */
[data-theme="dark"] #user-history-date-picker,
[data-theme="dark"] #user-history-week-select {
    background: var(--bg-secondary);
    border-color: var(--apple-gray-4);
}

[data-theme="dark"] .user-history-stats {
    background: linear-gradient(135deg, rgba(0, 122, 255, 0.15) 0%, rgba(0, 122, 255, 0.08) 100%);
}

[data-theme="dark"] .user-history-item {
    background: var(--bg-secondary);
}

[data-theme="dark"] .user-history-item.not-received {
    background: rgba(255, 59, 48, 0.1);
}

/* Badge "Recommandé" pour les items dans la vue commandes */
.order-item.reordered-badge::after {
    content: "🔄";
    position: absolute;
    top: -8px;
    right: -8px;
    font-size: 14px;
    background: var(--apple-orange);
    border-radius: 50%;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 6px rgba(255, 149, 0, 0.4);
}

.order-item {
    position: relative;
}