/* ============================================================
   GHOTEL — Admin-HG — Design tokens
   Palette : indigo/violet profond (identité GHOTEL), fond lavande pâle
   Type : Poppins (titres, boutons) + Inter (corps, données chiffrées)
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@500;600;700;800&family=Inter:wght@400;500;600;700&display=swap');

:root{
  --indigo-950:#241455;
  --indigo-900:#331C77;
  --indigo-800:#432999;
  --indigo-700:#5433B8;
  --indigo-600:#6C3CE0;
  --indigo-500:#8257F2;
  --indigo-100:#EDE7FB;
  --lavender-bg:#F4F2FB;
  --white:#FFFFFF;
  --ink:#1E1A33;
  --ink-soft:#5B5573;
  --muted:#8B85A3;
  --border:#E4DFF5;

  --green:#1FAE5F;
  --green-bg:#E4F8ED;
  --red:#E23F3F;
  --red-bg:#FDEAEA;
  --orange:#F0A020;
  --orange-bg:#FDF2E0;

  --radius-lg:22px;
  --radius-md:16px;
  --radius-sm:10px;
  --shadow-card:0 6px 24px rgba(67,41,153,0.10);
  --shadow-btn:0 8px 20px rgba(108,60,224,0.28);

  --font-display:'Poppins', sans-serif;
  --font-body:'Inter', sans-serif;
}

*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  font-family:var(--font-body);
  background:var(--lavender-bg);
  color:var(--ink);
  -webkit-tap-highlight-color:transparent;
}
h1,h2,h3{font-family:var(--font-display); margin:0;}
input,select,button{font-family:var(--font-body);}

/* ---------- Layout shells ---------- */
.screen{min-height:100vh; padding-bottom:88px;}
.screen-body{padding:18px 18px 32px;}
[hidden]{display:none !important;}

/* ---------- Login ---------- */
.screen-login{
  min-height:100vh;
  display:flex; align-items:center; justify-content:center;
  padding:24px;
  background:radial-gradient(circle at 20% -10%, var(--indigo-600), var(--indigo-950) 60%);
}
.login-card{
  width:100%; max-width:380px;
  background:var(--white);
  border-radius:var(--radius-lg);
  padding:32px 26px;
  box-shadow:0 24px 60px rgba(20,10,60,0.35);
  text-align:center;
}
.brand-mark{
  width:64px;height:64px;margin:0 auto 14px;
  border-radius:18px;
  box-shadow:var(--shadow-btn);
  overflow:hidden;
}
.brand-mark img{width:100%; height:100%; display:block;}
.brand h1{font-size:26px; letter-spacing:1px; color:var(--indigo-900);}
.brand-sub{margin:2px 0 18px; color:var(--muted); font-weight:600; font-size:13px; letter-spacing:.5px;}
.login-hint{color:var(--ink-soft); font-size:13.5px; margin-bottom:18px; line-height:1.5;}
.login-secure{margin-top:16px; font-size:12px; color:var(--muted);}

/* ---------- Form fields ---------- */
.field{margin-bottom:16px; text-align:left;}
.field label, .field-label{
  display:block; font-size:12.5px; font-weight:600; color:var(--ink-soft);
  margin-bottom:6px;
}
input[type=text], input[type=password], input[type=number], select{
  width:100%; padding:13px 14px; border-radius:var(--radius-sm);
  border:1.5px solid var(--border); background:#FBFAFF;
  font-size:14.5px; color:var(--ink); outline:none;
  transition:border-color .15s;
}
input:focus, select:focus{border-color:var(--indigo-600); background:#fff;}
.input-wrap{position:relative;}
.input-wrap input{padding-right:44px;}
.icon-toggle{
  position:absolute; right:8px; top:50%; transform:translateY(-50%);
  background:none; border:none; font-size:16px; cursor:pointer; color:var(--muted);
}
.field-error{color:var(--red); font-size:13px; margin:-6px 0 12px;}
.field-success{color:var(--green); font-size:13px; margin:8px 0 0; font-weight:600;}

/* ---------- Buttons ---------- */
.btn{
  border:none; border-radius:var(--radius-sm); font-weight:700; font-size:14.5px;
  padding:14px 18px; cursor:pointer; display:inline-flex; align-items:center;
  justify-content:center; gap:8px; transition:transform .1s, box-shadow .15s;
}
.btn:active{transform:scale(0.98);}
.btn-block{width:100%;}
.btn-primary{
  background:linear-gradient(135deg, var(--indigo-600), var(--indigo-800));
  color:#fff; box-shadow:var(--shadow-btn);
}
.btn-danger{background:linear-gradient(135deg, #F05555, #C62828); color:#fff; box-shadow:0 8px 20px rgba(198,40,40,.28);}
.btn-outline{background:#fff; color:var(--indigo-800); border:1.5px solid var(--border);}
.btn-icon{font-size:15px;}

/* ---------- Top bar ---------- */
.topbar{
  position:sticky; top:0; z-index:5;
  display:flex; align-items:center; justify-content:space-between;
  padding:16px 18px; background:linear-gradient(135deg, var(--indigo-700), var(--indigo-900));
  color:#fff;
}
.topbar-title{font-family:var(--font-display); font-weight:700; font-size:15px; letter-spacing:.5px;}
.icon-btn{background:rgba(255,255,255,.14); border:none; color:#fff; width:38px; height:38px;
  border-radius:12px; font-size:17px; cursor:pointer;}
.avatar-btn{width:36px;height:36px;border-radius:50%;background:rgba(255,255,255,.16);
  display:flex;align-items:center;justify-content:center;font-size:16px;}

/* ---------- Lock banner ---------- */
.lock-banner{
  display:flex; gap:12px; align-items:center;
  background:var(--indigo-100); border-radius:var(--radius-md);
  padding:14px 16px; margin:18px 0 6px;
}
.lock-icon{font-size:20px;}
.lock-banner strong{font-size:13.5px; color:var(--indigo-900);}
.lock-banner p{margin:2px 0 0; font-size:12px; color:var(--ink-soft);}

.section-title{font-size:15px; font-weight:700; margin:20px 0 12px; color:var(--indigo-900);}

/* ---------- Cards ---------- */
.card{
  background:#fff; border-radius:var(--radius-lg); padding:20px;
  box-shadow:var(--shadow-card); margin-bottom:18px;
}
.card-head{display:flex; align-items:center; gap:12px; margin-bottom:16px;}
.card-head h3{font-size:15px;}
.card-icon{
  width:38px; height:38px; border-radius:12px; display:flex; align-items:center;
  justify-content:center; font-size:17px; flex-shrink:0;
}
.icon-purple{background:var(--indigo-100); color:var(--indigo-700);}
.icon-indigo{background:#E4E8FD; color:#4A3FCB;}
.icon-red{background:var(--red-bg); color:var(--red);}
.icon-green{background:var(--green-bg); color:var(--green);}

/* ---------- Chips (durée abonnement) ---------- */
.chip-grid{display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:10px;}
.chip{
  border:1.5px solid var(--border); background:#fff; color:var(--ink-soft);
  padding:12px; border-radius:var(--radius-sm); font-weight:600; font-size:14px; cursor:pointer;
}
.chip.selected{background:linear-gradient(135deg, var(--indigo-600), var(--indigo-800)); color:#fff; border-color:transparent;}
.chip-block{width:100%; margin-bottom:14px;}
.checkbox-row{display:flex; align-items:center; gap:10px; font-size:13.5px; color:var(--ink-soft); margin-bottom:16px;}
.checkbox-row input{width:18px; height:18px;}

.info-note{
  background:var(--indigo-100); color:var(--indigo-900); font-size:12.5px;
  padding:12px 14px; border-radius:var(--radius-sm); margin-top:14px; line-height:1.5;
}

/* ---------- Search ---------- */
.search-wrap{margin-bottom:16px;}

/* ---------- Codes list ---------- */
.codes-list{display:flex; flex-direction:column; gap:16px;}
.code-card{background:#fff; border-radius:var(--radius-lg); padding:18px; box-shadow:var(--shadow-card);}
.code-card-top{display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:6px;}
.code-id{font-family:var(--font-display); font-weight:700; font-size:15px; color:var(--indigo-900);}
.badge{font-size:11px; font-weight:700; padding:4px 10px; border-radius:20px;}
.badge-actif{background:var(--green-bg); color:var(--green);}
.badge-expire{background:var(--orange-bg); color:var(--orange);}
.badge-revoque{background:var(--red-bg); color:var(--red);}
.code-etab-name{font-size:14.5px; font-weight:600; margin:2px 0 2px;}
.code-type{display:inline-block; font-size:11px; font-weight:700; color:var(--indigo-700); background:var(--indigo-100); padding:3px 9px; border-radius:20px; margin-bottom:10px;}
.code-meta{font-size:12.5px; color:var(--ink-soft); margin:2px 0;}
.progress-track{height:8px; border-radius:6px; background:#EEE9FA; margin:10px 0 4px; overflow:hidden;}
.progress-fill{height:100%; border-radius:6px; background:linear-gradient(90deg, var(--indigo-600), var(--indigo-500));}
.progress-fill.warn{background:linear-gradient(90deg, var(--orange), #F7C15C);}
.progress-fill.danger{background:linear-gradient(90deg, var(--red), #F17878);}
.code-actions{display:grid; grid-template-columns:repeat(5,1fr); gap:8px; margin-top:14px;}
.code-actions button{
  border:none; background:var(--lavender-bg); border-radius:10px; padding:9px 0;
  font-size:16px; cursor:pointer; color:var(--indigo-800);
}
.code-actions button.danger{color:var(--red); background:var(--red-bg);}
.code-actions button.warn{color:var(--orange); background:var(--orange-bg);}

/* ---------- Tabs (Stockage) ---------- */
.tabs{display:flex; gap:8px; margin-bottom:18px; background:#fff; padding:5px; border-radius:14px; box-shadow:var(--shadow-card);}
.tab{flex:1; border:none; background:none; padding:10px; border-radius:10px; font-weight:700; font-size:13.5px; color:var(--ink-soft); cursor:pointer;}
.tab.active{background:linear-gradient(135deg, var(--indigo-600), var(--indigo-800)); color:#fff;}

.stockage-list{display:flex; flex-direction:column; gap:14px;}
.stockage-item{background:#fff; border-radius:var(--radius-md); padding:16px; box-shadow:var(--shadow-card);}
.stockage-item-top{display:flex; justify-content:space-between; font-size:13.5px; font-weight:700; margin-bottom:8px;}
.stockage-item-top span.muted{font-weight:600; color:var(--muted); font-size:12.5px;}
.stockage-actions{display:flex; gap:8px; margin-top:12px;}
.stockage-actions select{flex:1;}
.stockage-actions .btn{padding:11px 14px; font-size:13px;}

.donut-card{background:#fff; border-radius:var(--radius-lg); padding:26px; text-align:center; box-shadow:var(--shadow-card); margin-bottom:16px;}
.donut{
  width:150px; height:150px; border-radius:50%; margin:0 auto 14px;
  display:flex; align-items:center; justify-content:center;
  background:conic-gradient(var(--indigo-600) 0deg, var(--indigo-100) 0deg);
  position:relative;
}
.donut::before{content:''; position:absolute; inset:14px; background:#fff; border-radius:50%;}
.donut span{position:relative; font-family:var(--font-display); font-weight:800; font-size:22px; color:var(--indigo-900);}
.donut-caption{color:var(--ink-soft); font-size:13.5px;}
.stat-row{display:grid; grid-template-columns:repeat(3,1fr); gap:10px;}
.stat-box{background:#fff; border-radius:var(--radius-md); padding:14px 10px; text-align:center; box-shadow:var(--shadow-card);}
.stat-box span{display:block; font-size:11px; color:var(--muted); margin-bottom:4px;}
.stat-box strong{font-size:14px; color:var(--indigo-900);}

/* ---------- Bottom nav ---------- */
.bottom-nav{
  position:fixed; bottom:0; left:0; right:0; z-index:10;
  display:flex; background:#fff; box-shadow:0 -6px 24px rgba(67,41,153,0.12);
  padding:8px 6px calc(8px + env(safe-area-inset-bottom));
}
.nav-item{
  flex:1; background:none; border:none; display:flex; flex-direction:column; align-items:center;
  gap:3px; font-size:11px; font-weight:600; color:var(--muted); padding:6px 0; cursor:pointer;
}
.nav-item span{font-size:19px;}
.nav-item.active{color:var(--indigo-700);}

/* ---------- Drawer ---------- */
.drawer-overlay{position:fixed; inset:0; background:rgba(20,10,50,.45); z-index:20;}
.drawer{
  position:fixed; top:0; left:0; bottom:0; width:82%; max-width:320px; z-index:21;
  background:#fff; padding:22px 18px; display:flex; flex-direction:column;
  box-shadow:12px 0 40px rgba(0,0,0,.2);
}
.drawer-head{display:flex; align-items:center; gap:12px; margin-bottom:24px; position:relative;}
.avatar-lg{width:52px; height:52px; border-radius:50%; background:var(--indigo-100); display:flex; align-items:center; justify-content:center; font-size:24px;}
.drawer-head strong{font-size:14.5px;}
.drawer-head p{margin:2px 0 0; font-size:12px; color:var(--muted);}
.drawer-close{position:absolute; right:0; top:0;}
.drawer-nav{display:flex; flex-direction:column; gap:4px; flex:1;}
.drawer-link{
  text-align:left; background:none; border:none; padding:13px 14px; border-radius:12px;
  font-size:14px; font-weight:600; color:var(--ink-soft); cursor:pointer;
}
.drawer-link.active, .drawer-link:hover{background:var(--indigo-100); color:var(--indigo-800);}

/* ---------- Modals ---------- */
.modal-overlay{position:fixed; inset:0; background:rgba(20,10,50,.5); z-index:30; display:flex; align-items:flex-end; justify-content:center;}
.modal{background:#fff; width:100%; max-width:420px; border-radius:22px 22px 0 0; padding:24px; animation:slideUp .2s ease-out;}
@keyframes slideUp{from{transform:translateY(30px); opacity:0;} to{transform:translateY(0); opacity:1;}}
.modal h3{font-size:16px; margin-bottom:8px;}
.modal p{font-size:13px; color:var(--ink-soft); line-height:1.5; margin:0 0 16px;}
.modal-actions{display:flex; gap:10px; margin-top:6px;}
.modal-actions .btn{flex:1;}

/* ---------- Toast ---------- */
.toast{
  position:fixed; bottom:96px; left:50%; transform:translateX(-50%);
  background:var(--ink); color:#fff; padding:12px 20px; border-radius:30px;
  font-size:13.5px; z-index:40; box-shadow:0 10px 30px rgba(0,0,0,.25);
}

@media (min-width:480px){
  .screen-body{max-width:460px; margin:0 auto; width:100%;}
  .bottom-nav > *{max-width:460px;}
}

/* ---------- Fiche de stock table ---------- */
.fiche-nav{display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:14px;}
.fiche-nav button{background:#fff; border:1.5px solid var(--border); border-radius:10px; width:38px; height:38px; font-size:16px; cursor:pointer;}
.fiche-tabs{display:flex; flex-wrap:wrap; gap:8px; margin-bottom:14px;}
.fiche-tab-btn{flex:1 1 70px; padding:9px 0; border-radius:10px; border:1.5px solid var(--border); background:#fff; font-weight:700; font-size:13px; cursor:pointer;}
.fiche-tab-btn.active{background:var(--indigo-600); border-color:var(--indigo-600); color:#fff;}
.fiche-date-picker{flex:1; text-align:center; font-weight:700; font-family:var(--font-display); color:var(--indigo-900); background:#fff; border:1.5px solid var(--border); border-radius:10px; padding:9px;}
.summary-strip{display:grid; grid-template-columns:repeat(5,1fr); gap:6px; margin-bottom:14px;}
.summary-box{background:#fff; border-radius:12px; padding:8px 4px; text-align:center; box-shadow:var(--shadow-card);}
.summary-box span{display:block; font-size:9.5px; color:var(--muted); font-weight:700;}
.summary-box strong{font-size:12px; color:var(--indigo-900);}
.fiche-table-wrap{overflow-x:auto; background:#fff; border-radius:var(--radius-md); box-shadow:var(--shadow-card); margin-bottom:16px;}
table.fiche-table{border-collapse:collapse; width:100%; min-width:640px; font-size:12.5px;}
table.fiche-table th{background:var(--indigo-100); color:var(--indigo-900); padding:10px 8px; text-align:left; font-weight:700; position:sticky; top:0;}
table.fiche-table td{padding:8px; border-bottom:1px solid var(--border); white-space:nowrap;}
table.fiche-table td input{width:64px; padding:6px 7px; border-radius:7px; border:1px solid var(--border); font-size:12.5px;}
table.fiche-table tr.total-row td{font-weight:800; background:var(--indigo-100); color:var(--indigo-900);}
.fiche-actions{display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:10px;}
.fiche-actions-2{display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:16px;}

/* ---------- Registre ---------- */
.registre-group{margin-bottom:4px;}
.registre-date-bar{
  background:linear-gradient(135deg, var(--indigo-700), var(--indigo-900));
  color:#fff; font-family:var(--font-display); font-weight:700; font-size:13px;
  padding:10px 14px; border-radius:10px; margin:18px 0 8px;
}
.registre-table-wrap{overflow-x:auto; background:#fff; border-radius:var(--radius-md); box-shadow:var(--shadow-card); margin-bottom:4px;}
table.registre-table{border-collapse:collapse; width:100%; min-width:560px; font-size:12.5px;}
table.registre-table th{background:var(--indigo-100); color:var(--indigo-900); padding:8px; text-align:center; font-weight:700; white-space:nowrap;}
table.registre-table td{padding:8px; border-bottom:1px solid var(--border); text-align:center; white-space:nowrap;}
table.registre-table td:first-child, table.registre-table th:first-child{text-align:left;}
table.registre-table th.reg-group-start, table.registre-table td.reg-group-start{border-left:1.5px solid var(--border);}
table.registre-table td input{width:64px; padding:5px 6px; border-radius:6px; border:1px solid var(--border); font-size:12px; text-align:center;}
.reg-breakdown{display:flex; flex-direction:column; gap:2px; font-size:10.5px; font-weight:600; line-height:1.3; white-space:nowrap;}
.registre-total{display:flex; justify-content:space-between; background:#fff; border-radius:12px; padding:12px 16px; box-shadow:var(--shadow-card); margin-bottom:16px; font-weight:700; font-size:13px;}

/* ---------- Chip select (type de mouvement) ---------- */
.mvt-chip-grid{display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:16px;}
.mvt-chip{border:1.5px solid var(--border); background:#fff; border-radius:var(--radius-md); padding:14px 10px; text-align:left; cursor:pointer;}
.mvt-chip.selected{border-color:var(--indigo-600); background:var(--indigo-100);}
.mvt-chip strong{display:block; font-size:13.5px; color:var(--ink);}
.mvt-chip span{font-size:11.5px; color:var(--muted);}

/* ---------- Choix établissement (login multi-établissements) ---------- */
.pick-etab-btn{
  display:block; width:100%; text-align:left; background:#FBFAFF; border:1.5px solid var(--border);
  border-radius:var(--radius-sm); padding:14px; margin-bottom:10px; cursor:pointer; font-size:14px; font-weight:600; color:var(--ink);
}
.pick-etab-btn:active{border-color:var(--indigo-600);}
.pick-etab-btn span{display:block; font-size:11.5px; color:var(--muted); font-weight:500; margin-top:2px;}

/* ---------- Bannière d'installation PWA ---------- */
.install-banner{
  display:flex; flex-wrap:wrap; align-items:center; gap:12px;
  background:linear-gradient(135deg, var(--indigo-600), var(--indigo-800));
  color:#fff; border-radius:var(--radius-md); padding:14px 14px; margin-bottom:16px;
  position:relative;
}
.install-icon{font-size:24px;}
.install-text{flex:1;}
.install-text strong{font-size:13.5px; display:block;}
.install-text p{margin:2px 0 0; font-size:11.5px; opacity:.85;}
.install-banner .btn{padding:9px 14px; font-size:12.5px; background:#fff; color:var(--indigo-800); box-shadow:none;}
.install-dismiss{position:absolute; top:6px; right:8px; background:none; border:none; color:#fff; opacity:.7; font-size:13px; cursor:pointer; padding:4px;}

/* ---------- Registre : table clarifiée (Type/Détail/Montant) ---------- */
.registre-total{flex-direction:column; align-items:flex-start; gap:4px;}

.install-help{
  grid-column:1 / -1; width:100%; margin:10px 0 0; font-size:11.5px; color:#fff; opacity:.95;
  background:rgba(255,255,255,0.14); padding:9px 12px; border-radius:8px; line-height:1.4;
}