/* ============================================================
   PREFITAXI — Feuille de styles
   ============================================================ */

*{box-sizing:border-box;margin:0;padding:0}

:root{
  --gold:#C9A84C;--gold-light:#F5E6C0;--gold-dark:#8B6914;
  --bg:#0A0C10;--bg2:#12151C;--bg3:#1A1E28;--bg4:#222736;
  --border:rgba(201,168,76,0.15);--border2:rgba(201,168,76,0.3);
  --text:#F0EDE6;--text2:#A09880;--text3:#5C5648;
  --green:#2ECC71;--red:#E74C3C;--blue:#3498DB;
  --font:'DM Sans',sans-serif;--font2:'Space Grotesk',sans-serif;
  --r:12px;--r2:8px;
}

body{
  font-family:var(--font);
  background:var(--bg);
  color:var(--text);
  min-height:100vh;
}

#app{
  max-width:430px;
  margin:0 auto;
  min-height:100vh;
  position:relative;
  display:flex;
  flex-direction:column;
}

/* ── LOGIN ── */
#login-screen{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  min-height:100vh;
  padding:2rem 1.5rem;
  background:var(--bg);
}
.login-logo{
  font-family:var(--font2);
  font-size:2.4rem;
  font-weight:700;
  letter-spacing:-1px;
  margin-bottom:0.25rem;
}
.login-logo span{color:var(--gold)}
.login-sub{
  color:var(--text2);
  font-size:0.75rem;
  letter-spacing:3px;
  text-transform:uppercase;
  margin-bottom:2.5rem;
}
.login-card{
  background:var(--bg2);
  border:1px solid var(--border);
  border-radius:var(--r);
  padding:2rem;
  width:100%;
}
.login-card h2{
  font-family:var(--font2);
  font-size:1.05rem;
  font-weight:600;
  margin-bottom:1.5rem;
}
.field{margin-bottom:1rem}
.field label{
  font-size:0.7rem;
  color:var(--text2);
  letter-spacing:1px;
  text-transform:uppercase;
  display:block;
  margin-bottom:0.4rem;
}
.field input,
.field select{
  width:100%;
  background:var(--bg3);
  border:1px solid var(--border);
  border-radius:var(--r2);
  color:var(--text);
  font-family:var(--font);
  font-size:0.9rem;
  padding:0.7rem 1rem;
  outline:none;
  transition:border-color 0.2s;
}
.field input:focus,
.field select:focus{border-color:var(--gold)}

.btn-primary{
  width:100%;
  background:var(--gold);
  color:#0A0C10;
  border:none;
  border-radius:var(--r2);
  font-family:var(--font2);
  font-weight:600;
  font-size:0.95rem;
  padding:0.8rem;
  cursor:pointer;
  transition:opacity 0.2s;
  margin-top:0.5rem;
}
.btn-primary:hover{opacity:0.9}
.login-err{
  color:var(--red);
  font-size:0.8rem;
  margin-top:0.75rem;
  text-align:center;
}

/* ── HEADER ── */
#header{
  position:sticky;
  top:0;
  z-index:100;
  background:var(--bg);
  border-bottom:1px solid var(--border);
  padding:0.9rem 1.25rem;
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-shrink:0;
}
.header-logo{
  font-family:var(--font2);
  font-size:1.25rem;
  font-weight:700;
}
.header-logo span{color:var(--gold)}
.header-right{display:flex;align-items:center;gap:10px}
.badge-role{
  font-size:0.62rem;
  letter-spacing:1.5px;
  text-transform:uppercase;
  background:rgba(201,168,76,0.1);
  color:var(--gold);
  border:1px solid var(--border2);
  border-radius:20px;
  padding:3px 10px;
}
.btn-icon{
  background:var(--bg3);
  border:1px solid var(--border);
  border-radius:var(--r2);
  color:var(--text2);
  width:34px;height:34px;
  cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  font-size:1rem;
  transition:all 0.2s;
}
.btn-icon:hover{border-color:var(--gold);color:var(--gold)}

/* ── NAV ── */
#nav{
  position:sticky;
  bottom:0;
  z-index:100;
  background:var(--bg2);
  border-top:1px solid var(--border);
  display:flex;
  padding:0.5rem 0.5rem 0.75rem;
  flex-shrink:0;
}
.nav-item{
  flex:1;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:3px;
  padding:0.5rem;
  cursor:pointer;
  border-radius:var(--r2);
  transition:all 0.2s;
  color:var(--text3);
  font-size:0.6rem;
  letter-spacing:0.5px;
  text-transform:uppercase;
}
.nav-item i{font-size:1.2rem}
.nav-item.active{color:var(--gold);background:rgba(201,168,76,0.07)}
.nav-item:hover{color:var(--text2)}

/* ── MAIN / PAGES ── */
#main{
  padding:1rem 1.25rem 1.5rem;
  flex:1;
  overflow-y:auto;
}
.page{display:none}
.page.active{display:block}

/* ── HERO SOLDE ── */
.hero-solde{
  background:var(--bg2);
  border:1px solid var(--border);
  border-radius:var(--r);
  padding:1.5rem;
  margin-bottom:1rem;
  text-align:center;
  position:relative;
  overflow:hidden;
}
.hero-solde::before{
  content:'';
  position:absolute;
  top:0;left:0;right:0;
  height:2px;
  background:linear-gradient(90deg,transparent,var(--gold),transparent);
}
.hero-label{
  font-size:0.68rem;
  letter-spacing:2px;
  text-transform:uppercase;
  color:var(--text2);
  margin-bottom:0.5rem;
}
.hero-amount{
  font-family:var(--font2);
  font-size:2.6rem;
  font-weight:700;
  color:var(--gold);
  line-height:1;
  margin-bottom:0.25rem;
}
.hero-sub{font-size:0.72rem;color:var(--text3)}

/* ── STATS GRID ── */
.stats-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:0.75rem;
  margin-bottom:1rem;
}
.stat-card{
  background:var(--bg2);
  border:1px solid var(--border);
  border-radius:var(--r);
  padding:1rem;
}
.sc-label{
  font-size:0.62rem;
  color:var(--text2);
  letter-spacing:1px;
  text-transform:uppercase;
  margin-bottom:0.4rem;
}
.sc-val{font-family:var(--font2);font-size:1.25rem;font-weight:600}
.sc-val.green{color:var(--green)}
.sc-val.red{color:var(--red)}
.sc-val.gold{color:var(--gold)}
.sc-val.blue{color:var(--blue)}
.sc-sub{font-size:0.68rem;color:var(--text3);margin-top:0.2rem}

/* ── SECTION TITLE ── */
.sec-title{
  font-family:var(--font2);
  font-size:0.72rem;
  font-weight:600;
  letter-spacing:2px;
  text-transform:uppercase;
  color:var(--text2);
  margin-bottom:0.75rem;
  margin-top:1.25rem;
  display:flex;
  align-items:center;
  gap:8px;
}
.sec-title::after{
  content:'';
  flex:1;
  height:1px;
  background:var(--border);
}

/* ── CALENDRIER ── */
.cal-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:0.75rem;
}
.cal-month{font-family:var(--font2);font-size:0.95rem;font-weight:600}
.cal-nav{
  background:var(--bg3);
  border:1px solid var(--border);
  border-radius:var(--r2);
  width:30px;height:30px;
  cursor:pointer;
  color:var(--text2);
  display:flex;align-items:center;justify-content:center;
  font-size:0.85rem;
  transition:all 0.2s;
}
.cal-nav:hover{border-color:var(--gold);color:var(--gold)}
.cal-grid{
  display:grid;
  grid-template-columns:repeat(7,1fr);
  gap:3px;
}
.cal-dow{
  text-align:center;
  font-size:0.58rem;
  color:var(--text3);
  letter-spacing:0.5px;
  text-transform:uppercase;
  padding:3px 0;
}
.cal-day{
  aspect-ratio:1;
  display:flex;align-items:center;justify-content:center;
  border-radius:6px;
  font-size:0.72rem;
  cursor:pointer;
  position:relative;
  transition:all 0.15s;
  font-weight:500;
  background:var(--bg3);
  color:var(--text2);
  border:1px solid transparent;
}
.cal-day.empty{background:transparent;cursor:default;border-color:transparent}
.cal-day.before-start{background:var(--bg2);color:var(--text3);cursor:default;opacity:0.5}
.cal-day.future{background:var(--bg3);color:var(--text3);cursor:default;opacity:0.4}
.cal-day.ok{background:rgba(46,204,113,0.12);color:var(--green);border-color:rgba(46,204,113,0.3)}
.cal-day.miss{background:rgba(231,76,60,0.1);color:var(--red);border-color:rgba(231,76,60,0.25)}
.cal-day.today{box-shadow:0 0 0 2px var(--gold)}
.cal-day:not(.empty):not(.before-start):not(.future):hover{border-color:var(--gold)}
.dot{position:absolute;bottom:2px;width:3px;height:3px;border-radius:50%}
.cal-day.ok .dot{background:var(--green)}
.cal-day.miss .dot{background:var(--red)}
.legend{display:flex;gap:1rem;margin-top:0.75rem;margin-bottom:0.5rem}
.leg-item{display:flex;align-items:center;gap:5px;font-size:0.68rem;color:var(--text2)}
.leg-dot{width:8px;height:8px;border-radius:2px}
.leg-dot.ok{background:rgba(46,204,113,0.4);border:1px solid var(--green)}
.leg-dot.miss{background:rgba(231,76,60,0.3);border:1px solid var(--red)}
.leg-dot.future{background:var(--bg3);border:1px solid var(--text3)}

/* ── BARRES MENSUELLES ── */
.monthly-bar-wrap{margin-bottom:0.5rem}
.mbar-row{display:flex;align-items:center;gap:8px;margin-bottom:4px}
.mbar-month{font-size:0.68rem;color:var(--text2);width:28px;flex-shrink:0}
.mbar-track{flex:1;background:var(--bg3);border-radius:3px;height:20px;overflow:hidden}
.mbar-fill{height:100%;border-radius:3px;background:var(--gold);transition:width 0.5s ease;min-width:2px}
.mbar-fill.expense{background:rgba(231,76,60,0.55)}
.mbar-val{font-size:0.65rem;color:var(--text2);width:68px;text-align:right;flex-shrink:0}

/* ── CHARGES ── */
.charge-item{
  display:flex;align-items:center;gap:10px;
  background:var(--bg3);
  border:1px solid var(--border);
  border-radius:var(--r2);
  padding:0.75rem;
  margin-bottom:0.6rem;
}
.charge-icon{
  width:32px;height:32px;
  border-radius:8px;
  background:rgba(231,76,60,0.1);
  display:flex;align-items:center;justify-content:center;
  color:var(--red);
  font-size:1rem;
  flex-shrink:0;
}
.charge-info{flex:1}
.charge-name{font-size:0.85rem;font-weight:500}
.charge-date{font-size:0.68rem;color:var(--text3)}
.charge-amount{font-family:var(--font2);font-size:0.88rem;font-weight:600;color:var(--red);flex-shrink:0}
.btn-add{
  width:100%;
  background:var(--bg3);
  border:1px dashed var(--border2);
  border-radius:var(--r2);
  color:var(--gold);
  font-family:var(--font);
  font-size:0.85rem;
  padding:0.75rem;
  cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  gap:6px;
  margin-top:0.75rem;
  transition:all 0.2s;
}
.btn-add:hover{background:rgba(201,168,76,0.05);border-color:var(--gold)}

/* ── CHAUFFEUR ── */
.driver-card{
  background:var(--bg2);
  border:1px solid var(--border);
  border-radius:var(--r);
  padding:1.25rem;
  margin-bottom:1rem;
  display:flex;align-items:center;gap:1rem;
}
.driver-av{
  width:52px;height:52px;
  border-radius:50%;
  background:rgba(201,168,76,0.15);
  border:2px solid var(--border2);
  display:flex;align-items:center;justify-content:center;
  font-family:var(--font2);
  font-size:1.2rem;
  font-weight:700;
  color:var(--gold);
  flex-shrink:0;
}
.driver-name{font-family:var(--font2);font-size:1rem;font-weight:600}
.driver-sub{font-size:0.72rem;color:var(--text2);margin-top:2px}
.input-group{display:flex;gap:8px}

/* ── BULLETIN PAIE ── */
.payslip-card{
  background:var(--bg2);
  border:1px solid var(--border);
  border-radius:var(--r);
  padding:1.25rem;
}
.payslip-header{
  border-bottom:1px solid var(--border);
  padding-bottom:0.9rem;
  margin-bottom:0.9rem;
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
}
.payslip-company{font-family:var(--font2);font-size:1.1rem;font-weight:700;color:var(--gold)}
.payslip-period{font-size:0.72rem;color:var(--text2);margin-top:2px}
.payslip-row{
  display:flex;
  justify-content:space-between;
  padding:0.45rem 0;
  border-bottom:1px solid rgba(255,255,255,0.04);
  font-size:0.82rem;
}
.pr-label{color:var(--text2)}
.pr-val{font-weight:500}
.payslip-row.total{
  background:rgba(201,168,76,0.06);
  border-radius:var(--r2);
  padding:0.75rem;
  margin-top:0.5rem;
  border-bottom:none;
}
.payslip-row.total .pr-label{font-weight:600;color:var(--text)}
.payslip-row.total .pr-val{font-family:var(--font2);font-size:1.05rem;color:var(--gold)}
.payslip-sig{
  text-align:right;
  margin-top:1.25rem;
  padding-top:0.75rem;
  border-top:1px solid var(--border);
}
.sig-label{font-size:0.68rem;color:var(--text3)}
.sig-name{
  font-family:'Georgia',serif;
  font-style:italic;
  font-size:1.5rem;
  color:var(--gold);
  margin-top:2px;
}

/* ── BTN PDF ── */
.btn-pdf{
  width:100%;
  background:linear-gradient(135deg,#C9A84C,#8B6914);
  color:#fff;
  border:none;
  border-radius:var(--r2);
  font-family:var(--font2);
  font-weight:600;
  font-size:0.95rem;
  padding:0.9rem;
  cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  gap:8px;
  margin-top:1rem;
  transition:opacity 0.2s;
}
.btn-pdf:hover{opacity:0.88}
.btn-pdf i{font-size:1.1rem}

/* ── GESTION ACCÈS ── */
.user-card{
  background:var(--bg3);
  border:1px solid var(--border);
  border-radius:var(--r2);
  padding:1rem;
  margin-bottom:0.6rem;
  display:flex;align-items:center;gap:10px;
}
.user-av{
  width:38px;height:38px;
  border-radius:50%;
  background:rgba(201,168,76,0.12);
  display:flex;align-items:center;justify-content:center;
  font-family:var(--font2);font-weight:600;font-size:0.9rem;color:var(--gold);flex-shrink:0;
}
.user-info{flex:1}
.user-name{font-size:0.88rem;font-weight:500}
.user-role{font-size:0.68rem;color:var(--text2)}
.user-badge{
  font-size:0.58rem;
  letter-spacing:1px;
  text-transform:uppercase;
  padding:3px 8px;
  border-radius:20px;
  display:inline-block;
}
.user-badge.super{background:rgba(201,168,76,0.1);color:var(--gold);border:1px solid var(--border2)}
.user-badge.admin{background:rgba(52,152,219,0.1);color:var(--blue);border:1px solid rgba(52,152,219,0.3)}

/* ── MODALS ── */
.modal-overlay{
  position:fixed;inset:0;
  background:rgba(0,0,0,0.8);
  display:flex;align-items:flex-end;justify-content:center;
  z-index:200;
}
.modal{
  background:var(--bg2);
  border:1px solid var(--border);
  border-top:2px solid var(--gold);
  border-radius:var(--r) var(--r) 0 0;
  padding:1.5rem 1.25rem;
  width:100%;
  max-width:430px;
  animation:slideup 0.25s ease;
}
@keyframes slideup{
  from{transform:translateY(100%)}
  to{transform:translateY(0)}
}
.modal-title{font-family:var(--font2);font-size:1rem;font-weight:600;margin-bottom:0.2rem}
.modal-sub{font-size:0.78rem;color:var(--text2);margin-bottom:1.25rem}
.modal-row{display:flex;gap:0.75rem;margin-top:1rem}
.btn-sec{
  flex:1;
  background:var(--bg3);
  border:1px solid var(--border);
  border-radius:var(--r2);
  color:var(--text2);
  font-family:var(--font);
  font-size:0.9rem;
  padding:0.7rem;
  cursor:pointer;
  transition:all 0.2s;
}
.btn-sec:hover{border-color:var(--border2);color:var(--text)}
.toggle-row{
  display:flex;align-items:center;justify-content:space-between;
  padding:0.75rem 0;
  border-bottom:1px solid var(--border);
}
.toggle{
  width:42px;height:24px;
  background:var(--bg4);
  border-radius:12px;
  position:relative;
  cursor:pointer;
  transition:background 0.2s;
  border:none;
  flex-shrink:0;
}
.toggle::after{
  content:'';
  position:absolute;
  top:3px;left:3px;
  width:18px;height:18px;
  border-radius:50%;
  background:var(--text3);
  transition:all 0.2s;
}
.toggle.on{background:rgba(46,204,113,0.2)}
.toggle.on::after{left:21px;background:var(--green)}

/* ── INPUTS STYLED ── */
.input-styled{
  width:100%;
  background:var(--bg3);
  border:1px solid var(--border);
  border-radius:var(--r2);
  color:var(--text);
  font-family:var(--font);
  font-size:0.88rem;
  padding:0.65rem 0.9rem;
  outline:none;
  transition:border-color 0.2s;
}
.input-styled:focus{border-color:var(--gold)}
select.input-styled option{background:var(--bg2)}

/* ── TOAST ── */
.toast{
  position:fixed;
  bottom:90px;
  left:50%;
  transform:translateX(-50%) translateY(20px);
  background:var(--bg2);
  border:1px solid var(--border2);
  border-radius:var(--r2);
  padding:0.6rem 1.2rem;
  font-size:0.82rem;
  color:var(--text);
  z-index:999;
  opacity:0;
  transition:all 0.3s;
  pointer-events:none;
  white-space:nowrap;
}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
.toast.success{border-color:rgba(46,204,113,0.5);color:var(--green)}
.toast.error{border-color:rgba(231,76,60,0.5);color:var(--red)}

/* ── UTILITAIRES ── */
.hidden{display:none!important}