/* ── TOKENS ──────────────────────────────────────────────── */
:root {
  --c-bg:       #F8F7F5;
  --c-surface:  #FFFFFF;
  --c-border:   #E8E6E1;
  --c-text:     #1A1A18;
  --c-muted:    #7A7873;
  --c-accent:   #2A7C5F;
  --c-accent2:  #F0A830;
  --c-danger:   #D94F3D;
  --c-success:  #2A7C5F;
  --c-overlay:  rgba(26,26,24,.45);
  --r-sm: 8px; --r-md: 14px; --r-lg: 22px; --r-xl: 32px;
  --shadow-sm: 0 1px 3px rgba(0,0,0,.06),0 1px 2px rgba(0,0,0,.04);
  --shadow-md: 0 4px 16px rgba(0,0,0,.08),0 1px 4px rgba(0,0,0,.04);
  --shadow-lg: 0 12px 40px rgba(0,0,0,.12);
  --font-display: 'DM Serif Display', serif;
  --font-body:    'DM Sans', sans-serif;
  --transition: .2s cubic-bezier(.4,0,.2,1);
}

/* ── RESET ─────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{font-size:16px;-webkit-text-size-adjust:100%}
body{font-family:var(--font-body);background:var(--c-bg);color:var(--c-text);min-height:100dvh;overflow-x:hidden}
button{font-family:inherit;cursor:pointer;border:none;background:none}
input,select,textarea{font-family:inherit}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}

/* ── UTILITIES ─────────────────────────────────────────── */
.hidden{display:none!important}
.flex{display:flex}.flex-col{flex-direction:column}
.items-center{align-items:center}.justify-between{justify-content:space-between}
.gap-2{gap:8px}.gap-3{gap:12px}.gap-4{gap:16px}.gap-6{gap:24px}
.w-full{width:100%}
.text-muted{color:var(--c-muted)}.text-sm{font-size:.875rem}.text-xs{font-size:.75rem}.text-lg{font-size:1.125rem}
.font-medium{font-weight:500}.font-semibold{font-weight:600}.text-center{text-align:center}
.mt-1{margin-top:4px}.mt-2{margin-top:8px}.mt-3{margin-top:12px}.mt-4{margin-top:16px}.mt-6{margin-top:24px}

/* ── LAYOUT ─────────────────────────────────────────────── */
.app-shell{display:grid;grid-template-rows:auto 1fr auto;min-height:100dvh;max-width:430px;margin:0 auto;background:var(--c-surface);box-shadow:var(--shadow-lg);position:relative}
.app-shell.admin-shell{max-width:100%}

/* ── TOP BAR ─────────────────────────────────────────────── */
.topbar{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;border-bottom:1px solid var(--c-border);background:var(--c-surface);position:sticky;top:0;z-index:50}
.topbar-logo{font-family:var(--font-display);font-size:1.4rem;color:var(--c-accent);letter-spacing:-.5px}
.topbar-logo span{color:var(--c-accent2)}
.topbar-back{display:flex;align-items:center;gap:6px;font-size:.875rem;font-weight:500;color:var(--c-accent)}
.icon-btn{width:38px;height:38px;border-radius:50%;display:flex;align-items:center;justify-content:center;transition:background var(--transition)}
.icon-btn:hover{background:var(--c-bg)}

/* ── BOTTOM NAV ─────────────────────────────────────────── */
.bottom-nav{display:flex;border-top:1px solid var(--c-border);background:var(--c-surface);position:sticky;bottom:0;z-index:50}
.nav-item{flex:1;display:flex;flex-direction:column;align-items:center;gap:4px;padding:10px 0 12px;font-size:.7rem;font-weight:500;color:var(--c-muted);transition:color var(--transition);cursor:pointer}
.nav-item.active{color:var(--c-accent)}
.nav-item svg{width:22px;height:22px}

/* ── VIEWS ──────────────────────────────────────────────── */
[data-view]{display:none;flex-direction:column;flex:1;overflow-y:auto}
[data-view].active{display:flex}
.view-body{padding:20px;flex:1}
.view-body.no-pad{padding:0}

/* ── CARDS ──────────────────────────────────────────────── */
.card{background:var(--c-surface);border:1px solid var(--c-border);border-radius:var(--r-md);padding:16px;box-shadow:var(--shadow-sm)}
.card+.card{margin-top:12px}

/* ── BUTTONS ─────────────────────────────────────────────── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:13px 20px;border-radius:var(--r-md);font-size:.9375rem;font-weight:500;transition:all var(--transition);cursor:pointer;border:none}
.btn-primary{background:var(--c-accent);color:#fff}
.btn-primary:hover{background:#236b51}
.btn-secondary{background:var(--c-bg);color:var(--c-text);border:1px solid var(--c-border)}
.btn-secondary:hover{background:var(--c-border)}
.btn-danger{background:var(--c-danger);color:#fff}
.btn-danger:hover{background:#b83e2e}
.btn-outline{background:transparent;color:var(--c-accent);border:1.5px solid var(--c-accent)}
.btn-ghost{background:transparent;color:var(--c-muted)}
.btn-full{width:100%}
.btn-sm{padding:8px 14px;font-size:.8125rem;border-radius:var(--r-sm)}
.btn-lg{padding:16px 24px;font-size:1rem}

/* ── FORM ELEMENTS ─────────────────────────────────────── */
.form-group{display:flex;flex-direction:column;gap:6px}
.form-label{font-size:.8125rem;font-weight:500;color:var(--c-muted)}
.form-input{padding:12px 14px;border-radius:var(--r-sm);border:1.5px solid var(--c-border);font-size:.9375rem;background:var(--c-bg);transition:border-color var(--transition);outline:none;width:100%}
.form-input:focus{border-color:var(--c-accent);background:#fff}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}

/* ── BADGE ──────────────────────────────────────────────── */
.badge{display:inline-flex;align-items:center;gap:4px;padding:3px 9px;border-radius:20px;font-size:.72rem;font-weight:600}
.badge-green{background:#E6F4EE;color:var(--c-accent)}
.badge-amber{background:#FEF3DC;color:#B07B1A}
.badge-red{background:#FDECEA;color:var(--c-danger)}
.badge-gray{background:var(--c-bg);color:var(--c-muted)}
.badge-blue{background:#E8F0FE;color:#2962FF}

/* ── DIVIDER ────────────────────────────────────────────── */
.divider{height:1px;background:var(--c-border);margin:16px 0}
.or-divider{display:flex;align-items:center;gap:12px;color:var(--c-muted);font-size:.8125rem;margin:16px 0}
.or-divider::before,.or-divider::after{content:'';flex:1;height:1px;background:var(--c-border)}

/* ── CHIP FILTERS ───────────────────────────────────────── */
.chip-row{display:flex;gap:8px;overflow-x:auto;padding-bottom:4px}
.chip-row::-webkit-scrollbar{display:none}
.chip{flex-shrink:0;padding:6px 14px;border-radius:20px;font-size:.8125rem;font-weight:500;cursor:pointer;border:1.5px solid var(--c-border);background:var(--c-surface);transition:all var(--transition)}
.chip.active{background:var(--c-accent);color:#fff;border-color:var(--c-accent)}

/* ── SEARCH BAR ─────────────────────────────────────────── */
.search-bar{display:flex;align-items:center;gap:10px;background:var(--c-bg);border:1.5px solid var(--c-border);border-radius:var(--r-md);padding:10px 14px;transition:border-color var(--transition)}
.search-bar:focus-within{border-color:var(--c-accent)}
.search-bar input{border:none;background:none;outline:none;flex:1;font-size:.9375rem;color:var(--c-text)}

/* ── MAP ────────────────────────────────────────────────── */
.map-container{height:280px;border-radius:var(--r-md);overflow:hidden;position:relative;z-index:0}

/* ── STATION CARD ───────────────────────────────────────── */
.station-card{display:flex;gap:14px;align-items:flex-start;padding:14px 16px;border-bottom:1px solid var(--c-border);cursor:pointer;transition:background var(--transition)}
.station-card:hover{background:var(--c-bg)}
.station-icon{width:44px;height:44px;border-radius:var(--r-sm);background:var(--c-bg);display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:1.3rem}
.station-info{flex:1}
.station-info h4{font-size:.9375rem;font-weight:600}
.station-meta{font-size:.78rem;color:var(--c-muted);margin-top:2px}
.avail-bar{height:4px;border-radius:2px;background:var(--c-border);margin-top:8px;overflow:hidden}
.avail-bar-fill{height:100%;border-radius:2px;background:var(--c-accent)}

/* ── SLOT GRID ──────────────────────────────────────────── */
.slot-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.slot-cell{aspect-ratio:1;border-radius:var(--r-sm);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;font-size:.7rem;font-weight:600;border:1.5px solid transparent;transition:all var(--transition)}
.slot-cell.available{background:#E6F4EE;color:var(--c-accent);border-color:#B8DECE}
.slot-cell.charging{background:#FEF3DC;color:#B07B1A;border-color:#F8D89A}
.slot-cell.empty{background:var(--c-bg);color:var(--c-muted);border-color:var(--c-border)}
.slot-cell .pct{font-size:.9rem}

/* ── QR SCANNER ─────────────────────────────────────────── */
.qr-frame{width:220px;height:220px;border-radius:var(--r-lg);border:3px solid var(--c-accent);position:relative;overflow:hidden;background:#000;margin:0 auto}
.qr-corner{position:absolute;width:28px;height:28px;border-color:var(--c-accent);border-style:solid;border-width:0}
.qr-corner.tl{top:8px;left:8px;border-top-width:3px;border-left-width:3px}
.qr-corner.tr{top:8px;right:8px;border-top-width:3px;border-right-width:3px}
.qr-corner.bl{bottom:8px;left:8px;border-bottom-width:3px;border-left-width:3px}
.qr-corner.br{bottom:8px;right:8px;border-bottom-width:3px;border-right-width:3px}
.qr-scan-line{position:absolute;left:0;right:0;height:2px;background:linear-gradient(90deg,transparent,var(--c-accent),transparent);animation:scanLine 2s ease-in-out infinite}
@keyframes scanLine{0%{top:10%}50%{top:88%}100%{top:10%}}

/* ── ACTIVE RENTAL ──────────────────────────────────────── */
.rental-timer{font-family:var(--font-display);font-size:3.5rem;letter-spacing:-2px;color:var(--c-text);text-align:center;line-height:1}
.rental-cost{font-size:2rem;font-weight:300;color:var(--c-accent);text-align:center;margin-top:4px}
.rental-pulse{width:10px;height:10px;border-radius:50%;background:var(--c-accent);animation:pulse 1.4s ease-in-out infinite;display:inline-block}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.4;transform:scale(.7)}}

/* ── PAYMENT ─────────────────────────────────────────────── */
.pay-method{display:flex;align-items:center;gap:14px;padding:14px 16px;border:1.5px solid var(--c-border);border-radius:var(--r-md);cursor:pointer;transition:all var(--transition);margin-bottom:10px}
.pay-method:hover{border-color:var(--c-accent);background:#F5FBF8}
.pay-method.selected{border-color:var(--c-accent);background:#F0F8F4}
.pay-icon{width:40px;height:40px;border-radius:var(--r-sm);display:flex;align-items:center;justify-content:center;font-size:1.3rem;flex-shrink:0}
.amount-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.amount-btn{padding:14px 0;border-radius:var(--r-md);text-align:center;font-weight:600;font-size:.9375rem;border:1.5px solid var(--c-border);background:var(--c-surface);cursor:pointer;transition:all var(--transition)}
.amount-btn.selected{border-color:var(--c-accent);background:#F0F8F4;color:var(--c-accent)}

/* ── PROFILE ─────────────────────────────────────────────── */
.avatar-circle{width:64px;height:64px;border-radius:50%;background:linear-gradient(135deg,var(--c-accent),#4CAF85);display:flex;align-items:center;justify-content:center;font-family:var(--font-display);font-size:1.5rem;color:#fff}
.history-row{display:flex;align-items:center;justify-content:space-between;padding:13px 0;border-bottom:1px solid var(--c-border)}
.history-row:last-child{border-bottom:none}
.wallet-card{background:linear-gradient(135deg,var(--c-accent) 0%,#1d5c46 100%);border-radius:var(--r-lg);padding:24px;color:#fff;position:relative;overflow:hidden}
.wallet-card::after{content:'';position:absolute;width:180px;height:180px;border-radius:50%;background:rgba(255,255,255,.06);top:-60px;right:-40px}
.wallet-balance{font-size:2.5rem;font-weight:300;letter-spacing:-1px;margin-top:8px}

/* ── TOAST ──────────────────────────────────────────────── */
#toast{position:fixed;bottom:90px;left:50%;transform:translateX(-50%) translateY(20px);background:var(--c-text);color:#fff;padding:12px 20px;border-radius:var(--r-md);font-size:.875rem;font-weight:500;opacity:0;transition:all .3s ease;pointer-events:none;z-index:9999;white-space:nowrap;max-width:calc(100% - 40px)}
#toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

/* ── MODAL ──────────────────────────────────────────────── */
.modal-overlay{position:fixed;inset:0;background:var(--c-overlay);z-index:200;display:flex;align-items:flex-end;opacity:0;transition:opacity .25s;pointer-events:none}
.modal-overlay.show,.modal-overlay.active{opacity:1;pointer-events:all}
.modal-sheet{background:var(--c-surface);border-radius:var(--r-xl) var(--r-xl) 0 0;width:100%;max-width:430px;margin:0 auto;padding:24px;max-height:90dvh;overflow-y:auto;transform:translateY(30px);transition:transform .25s}
.modal-overlay.show .modal-sheet,.modal-overlay.active .modal-sheet{transform:translateY(0)}
.modal-handle{width:40px;height:4px;border-radius:2px;background:var(--c-border);margin:-8px auto 20px}

/* ── RGPD BANNER ─────────────────────────────────────────── */
.rgpd-banner{background:#1A1A18;color:#fff;padding:16px 20px;font-size:.8125rem;display:flex;flex-direction:column;gap:10px}
.rgpd-banner a{color:var(--c-accent2);text-decoration:underline}
.rgpd-actions{display:flex;gap:10px}
.rgpd-actions .btn{padding:8px 16px;font-size:.8125rem;flex:1}

/* ── SPINNER ─────────────────────────────────────────────── */
.spinner{width:20px;height:20px;border-radius:50%;border:2.5px solid rgba(255,255,255,.3);border-top-color:#fff;animation:spin .7s linear infinite;display:inline-block}
@keyframes spin{to{transform:rotate(360deg)}}

/* ── HERO ────────────────────────────────────────────────── */
.hero-section{padding:40px 24px 32px;background:linear-gradient(180deg,#F0F8F4 0%,var(--c-surface) 100%)}
.hero-title{font-family:var(--font-display);font-size:2.2rem;line-height:1.15;letter-spacing:-.5px}
.hero-title em{color:var(--c-accent);font-style:italic}

/* ── SCA ─────────────────────────────────────────────────── */
.sca-digits{display:flex;gap:10px;justify-content:center;margin:20px 0}
.sca-digit{width:44px;height:56px;border-radius:var(--r-sm);border:1.5px solid var(--c-border);display:flex;align-items:center;justify-content:center;font-size:1.5rem;font-weight:600;background:var(--c-bg);transition:border-color var(--transition)}
.sca-digit.filled{border-color:var(--c-accent);background:#F0F8F4}

/* ── ADMIN SIDEBAR ──────────────────────────────────────── */
.admin-sidebar{width:220px;flex-shrink:0;background:var(--c-text);color:#fff;min-height:100dvh;padding:24px 0;display:flex;flex-direction:column;position:fixed;top:0;left:0}
.admin-sidebar-logo{padding:0 20px 24px;font-family:var(--font-display);font-size:1.35rem;color:var(--c-accent2);border-bottom:1px solid rgba(255,255,255,.08)}
.admin-nav-item{display:flex;align-items:center;gap:10px;padding:11px 20px;font-size:.875rem;font-weight:500;cursor:pointer;transition:background var(--transition);color:rgba(255,255,255,.65)}
.admin-nav-item:hover{background:rgba(255,255,255,.06);color:#fff}
.admin-nav-item.active{background:rgba(255,255,255,.1);color:#fff}
.admin-nav-item svg{width:18px;height:18px;flex-shrink:0}
.admin-main{margin-left:220px;padding:32px;flex:1;min-height:100dvh;overflow-y:auto}
.admin-topbar{display:flex;align-items:center;justify-content:space-between;margin-bottom:28px}
.admin-topbar h1{font-size:1.5rem;font-weight:600;letter-spacing:-.3px}
.stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:28px}
.stat-card{background:var(--c-surface);border:1px solid var(--c-border);border-radius:var(--r-md);padding:18px}
.stat-card .stat-val{font-size:1.75rem;font-weight:600;letter-spacing:-.5px}
.stat-card .stat-lbl{font-size:.78rem;color:var(--c-muted);margin-top:2px}
.stat-card .stat-trend{font-size:.75rem;font-weight:600;margin-top:8px}
.stat-card .stat-trend.up{color:var(--c-accent)}.stat-card .stat-trend.down{color:var(--c-danger)}
.data-table{width:100%;border-collapse:collapse;font-size:.875rem}
.data-table th{text-align:left;padding:10px 14px;font-size:.75rem;font-weight:600;color:var(--c-muted);text-transform:uppercase;letter-spacing:.5px;border-bottom:1px solid var(--c-border)}
.data-table td{padding:12px 14px;border-bottom:1px solid var(--c-border);vertical-align:middle}
.data-table tr:last-child td{border-bottom:none}
.data-table tr:hover td{background:var(--c-bg)}
.table-card{background:var(--c-surface);border:1px solid var(--c-border);border-radius:var(--r-md);overflow:hidden}
.section-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}
.section-head h2{font-size:1rem;font-weight:600}
.admin-filters{display:flex;gap:10px;margin-bottom:16px;flex-wrap:wrap}
.admin-filters .form-input{max-width:220px;padding:9px 12px;font-size:.875rem}

/* ── LANG TOGGLE ─────────────────────────────────────────── */
.lang-toggle{display:flex;gap:6px;padding:4px;background:var(--c-bg);border-radius:20px;border:1px solid var(--c-border)}
.lang-btn{padding:4px 10px;border-radius:16px;font-size:.75rem;font-weight:600;cursor:pointer;transition:all var(--transition);color:var(--c-muted)}
.lang-btn.active{background:var(--c-surface);color:var(--c-text);box-shadow:var(--shadow-sm)}

/* ── TOGGLE SWITCH (payment methods admin) ──────────────── */
.toggle-switch{position:relative;display:inline-block;width:44px;height:24px;flex-shrink:0}
.toggle-switch input{opacity:0;width:0;height:0}
.slider{position:absolute;cursor:pointer;inset:0;background:var(--c-border);border-radius:24px;transition:background var(--transition)}
.slider::before{content:'';position:absolute;height:18px;width:18px;left:3px;bottom:3px;background:#fff;border-radius:50%;transition:transform var(--transition);box-shadow:var(--shadow-sm)}
.toggle-switch input:checked+.slider{background:var(--c-accent)}
.toggle-switch input:checked+.slider::before{transform:translateX(20px)}

/* ── PAYMENT METHOD ADMIN CARD ──────────────────────────── */
.pm-admin-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:4px}
.pm-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;max-width:900px}

/* ── RESPONSIVE (admin) ─────────────────────────────────── */
@media(max-width:900px){
  .stats-grid{grid-template-columns:repeat(2,1fr)}
  .admin-sidebar{display:none}
  .admin-main{margin-left:0;padding:20px}
  .pm-grid{grid-template-columns:1fr}
}