/* ===== E-TERPS - Styles customs (thèmes, animations, effets LED) ===== */
/* Tailwind CDN gère le layout, spacing, typography, colors, etc. */

@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800&family=JetBrains+Mono:wght@400;500;700&display=swap');

/* ---------- Thèmes (valeurs RGB pour supporter les opacités Tailwind) ---------- */
:root, [data-theme='dark'] {
  --c-ink: 8 12 10;
  --c-panel: 15 21 18;
  --c-panel2: 21 29 25;
  --c-line: 33 45 38;
  --c-neon: 94 214 127;
  --t-50: 238 244 239; --t-100: 224 233 226; --t-200: 200 213 203;
  --t-300: 163 179 167; --t-400: 129 146 134; --t-500: 107 124 112; --t-600: 84 100 89;
  --tint: 255 255 255; --grid: 255 255 255;
  --overlay: 2 5 3;
  --grid-alpha: 0.035; --halo-alpha: 0.13;
  color-scheme: dark;
}
[data-theme='light'] {
  --c-ink: 243 246 242;
  --c-panel: 255 255 255;
  --c-panel2: 248 250 247;
  --c-line: 223 230 223;
  --c-neon: 22 133 88;
  --t-50: 24 35 28; --t-100: 31 44 35; --t-200: 46 61 50;
  --t-300: 72 90 77; --t-400: 100 118 105; --t-500: 120 137 125; --t-600: 143 158 147;
  --tint: 18 45 28; --grid: 18 45 28;
  --overlay: 18 32 22;
  --grid-alpha: 0.045; --halo-alpha: 0.07;
  color-scheme: light;
}

/* ---------- RESET ---------- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html,body,#app{min-height:100%;width:100%}
body{background-color:rgb(var(--c-ink));color:rgb(var(--t-100));font-family:'Outfit',system-ui,sans-serif;-webkit-font-smoothing:antialiased;transition:background-color .3s ease,color .3s ease}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{cursor:pointer;font:inherit;color:inherit;background:none;border:none}
ul,ol{list-style:none}
input,select,textarea{font:inherit;color:inherit}
.font-mono-num{font-family:'JetBrains Mono',ui-monospace,monospace;font-feature-settings:'tnum'}

/* ---------- LED GRID BACKDROP ---------- */
.led-bg{background-image:radial-gradient(circle at 50% -10%,rgb(var(--c-neon)/var(--halo-alpha)),transparent 60%),linear-gradient(to bottom,rgb(var(--grid)/var(--grid-alpha)) 1px,transparent 1px),linear-gradient(to right,rgb(var(--grid)/var(--grid-alpha)) 1px,transparent 1px);background-size:100% 100%,100% 44px,44px 100%}

/* ---------- NEON EFFECTS ---------- */
.led-ring{box-shadow:0 0 0 1px rgb(var(--c-neon)/.35),0 0 22px -4px rgb(var(--c-neon)/.4)}
.led-text{text-shadow:0 0 18px rgb(var(--c-neon)/.45)}
[data-theme='light'] .led-text{text-shadow:none}
.led-divider{height:1px;background:linear-gradient(to right,transparent,rgb(var(--c-neon)/.55),transparent)}
.glow-btn{box-shadow:0 0 24px -6px rgb(var(--c-neon)/.55)}
.glow-soft{box-shadow:0 0 18px -6px rgb(var(--c-neon)/.6)}
.glow-line{box-shadow:0 0 10px 2px rgb(var(--c-neon)/.55)}
.glow-card:hover{box-shadow:0 0 30px -12px rgb(var(--c-neon)/.5)}
[data-theme='light'] .glow-btn{box-shadow:0 8px 18px -10px rgb(var(--c-neon)/.6)}
[data-theme='light'] .glow-soft{box-shadow:0 6px 14px -8px rgb(var(--c-neon)/.45)}
[data-theme='light'] .glow-line{box-shadow:0 0 6px 1px rgb(var(--c-neon)/.35)}
[data-theme='light'] .glow-card:hover{box-shadow:0 10px 26px -14px rgb(18 45 28/.22)}

/* ---------- SCROLLBAR ---------- */
::-webkit-scrollbar{width:8px;height:8px}
::-webkit-scrollbar-track{background:rgb(var(--c-ink))}
::-webkit-scrollbar-thumb{background:rgb(var(--c-line));border-radius:999px}
::-webkit-scrollbar-thumb:hover{background:rgb(var(--t-600))}
.no-scrollbar::-webkit-scrollbar{display:none}
.no-scrollbar{-ms-overflow-style:none;scrollbar-width:none}

/* ---------- ANIMATIONS ---------- */
@keyframes led-pulse{0%,100%{opacity:1;box-shadow:0 0 0 0 rgb(var(--c-neon)/.55)}50%{opacity:.75;box-shadow:0 0 0 6px rgb(var(--c-neon)/0)}}
.animate-led-pulse{animation:led-pulse 2s ease-in-out infinite}
@keyframes led-sweep{0%{transform:translateX(-120%)}100%{transform:translateX(320%)}}
.animate-led-sweep{animation:led-sweep 3.2s ease-in-out infinite}
@keyframes fadeInUp{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes slideInLeft{from{transform:translateX(-280px)}to{transform:translateX(0)}}
@keyframes slideUp{from{transform:translateY(40px);opacity:0}to{transform:translateY(0);opacity:1}}
@keyframes scaleIn{from{transform:scale(.98);opacity:0}to{transform:scale(1);opacity:1}}
@keyframes spin{to{transform:rotate(360deg)}}
.animate-spin{animation:spin 1s linear infinite}
.animate-fade-in{animation:fadeIn .25s ease-out}
.animate-slide-up{animation:slideUp .3s ease-out}
.animate-scale-in{animation:scaleIn .3s ease-out}
.animate-fade-in-up{animation:fadeInUp .3s ease-out}

/* ---------- MOBILE MENU ---------- */
.admin-sidebar-mobile{position:fixed;inset:0;z-index:50;display:none}
.admin-sidebar-mobile.open{display:block}
.admin-sidebar-mobile .backdrop{position:absolute;inset:0;background:rgb(var(--overlay)/.7);animation:fadeIn .2s ease-out}
.admin-sidebar-mobile .sidebar-panel{position:relative;height:100%;width:280px;border-right:1px solid rgb(var(--c-line));background:rgb(var(--c-panel));animation:slideInLeft .3s ease-out}

/* ---------- MODAL ---------- */
.modal-overlay{position:fixed;inset:0;z-index:50;display:none;align-items:flex-end;justify-content:center;padding:0}
@media(min-width:640px){.modal-overlay{align-items:center;padding:24px}}
.modal-overlay.open,.modal-overlay[style*="display:flex"]{display:flex}
.modal-overlay .modal-bg{position:absolute;inset:0;background:rgb(var(--overlay)/.7);backdrop-filter:blur(4px);animation:fadeIn .2s ease-out}
.modal-overlay .modal-content{position:relative;z-index:10;display:flex;flex-direction:column;max-height:92vh;width:100%;max-width:512px;overflow:hidden;border-radius:24px 24px 0 0;border:1px solid rgb(var(--c-line));background:rgb(var(--c-panel));animation:slideUp .3s ease-out}
@media(min-width:640px){.modal-overlay .modal-content{border-radius:24px}}

/* ---------- TOAST ---------- */
.toast-container{position:fixed;top:16px;left:50%;transform:translateX(-50%);z-index:100;display:flex;flex-direction:column;gap:8px;pointer-events:none}
.toast{pointer-events:auto;background:rgb(var(--c-panel));border:1px solid rgb(var(--c-line));border-radius:16px;padding:12px 18px;min-width:280px;box-shadow:0 8px 32px rgba(0,0,0,.3);animation:slideDown .3s ease-out;display:flex;align-items:flex-start;gap:10px}
.toast.success .toast-icon{color:#5ed67f}.toast.error .toast-icon{color:#d75757}.toast.info .toast-icon{color:#2196bd}
.toast-body{flex:1}.toast-title{font-size:13px;font-weight:600;color:rgb(var(--t-50))}.toast-desc{font-size:11px;color:rgb(var(--t-400));margin-top:2px}
.toast-close{color:rgb(var(--t-500));font-size:14px;line-height:1;cursor:pointer;padding:0 2px}
@keyframes slideDown{from{transform:translateY(-20px);opacity:0}to{transform:translateY(0);opacity:1}}
.toast.removing{animation:slideUpOut .2s ease-in forwards}
@keyframes slideUpOut{from{transform:translateY(0);opacity:1}to{transform:translateY(-20px);opacity:0}}

/* ---------- ACCORDION ---------- */
.accordion-content{overflow:hidden;max-height:0;transition:max-height .3s ease,opacity .3s ease;opacity:0}
.accordion-content.open{max-height:2000px;opacity:1}

/* ---------- RANGE INPUT ---------- */
input[type=range]{-webkit-appearance:none;appearance:none;height:6px;background:rgb(var(--c-line));border-radius:999px;outline:none}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:16px;height:16px;border-radius:50%;background:rgb(var(--c-neon));cursor:pointer;box-shadow:0 0 8px rgb(var(--c-neon)/.5)}

/* ---------- LINE CLAMP ---------- */
.line-clamp-2{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}

/* ---------- BUTTON BASE ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border-radius:12px;padding:10px 16px;font-size:14px;transition:all .2s ease;font-weight:500;cursor:pointer;border:none}
.btn:active{transform:scale(.97)}.btn:focus{outline:none}.btn:focus-visible{box-shadow:0 0 0 2px rgb(var(--c-neon)/.7)}.btn:disabled{cursor:not-allowed}
.btn-primary{background:rgb(var(--c-neon));color:rgb(var(--c-ink));font-weight:600;box-shadow:0 0 24px -6px rgb(var(--c-neon)/.55)}.btn-primary:hover{filter:brightness(1.1)}.btn-primary:disabled{opacity:.4;box-shadow:none}
.btn-ghost{border:1px solid rgb(var(--c-line));background:rgb(var(--tint)/.06);color:rgb(var(--t-200))}.btn-ghost:hover{background:rgb(var(--tint)/.12)}
.btn-outline{border:1px solid rgb(var(--c-neon)/.5);color:rgb(var(--c-neon))}.btn-outline:hover{background:rgb(var(--c-neon)/.1)}
.btn-danger{border:1px solid rgb(239 68 68/.4);color:#d75757}.btn-danger:hover{background:rgb(239 68 68/.1)}
.btn-full{width:100%}.btn-sm{padding:8px 12px;font-size:12px}

/* ---------- INPUT BASE ---------- */
.input-base{width:100%;border-radius:12px;border:1px solid rgb(var(--c-line));background:rgb(var(--c-ink)/.8);padding:10px 14px;font-size:14px;color:rgb(var(--t-100));transition:all .2s ease}
.input-base::placeholder{color:rgb(var(--t-600))}.input-base:focus{border-color:rgb(var(--c-neon)/.6);outline:none;box-shadow:0 0 0 2px rgb(var(--c-neon)/.2)}

/* ---------- ORDER DETAILS ---------- */
.order-details{display:none}
.order-details.open{display:block;animation:fadeInUp .3s ease-out}

/* ---------- STEP ANIMATIONS (Telegram gate) ---------- */
.step-done{border-color:rgb(var(--c-neon)/.35)!important;background:rgb(var(--c-neon)/.05)!important}
.step-done span,.step-done svg{color:rgb(var(--t-200))!important}
.step-active{border-color:rgb(var(--c-line))!important;background:rgb(var(--tint)/.06)!important}
.step-active span,.step-active svg{color:rgb(var(--t-300))!important}

/* ---------- CHART CONTAINER ---------- */
.chart-container{width:100%;height:100%}.chart-container canvas{width:100%!important}