/* assets/css/styles.css */

/* ===============================
   Thème & variables
   =============================== */
:root{
  --bg:#0f172a;                 /* fond navbar & footer */
  --text:#e5e7eb;
  --muted:#94a3b8;
  --accent:#d4af37;             /* or premium */
  --accent2:#4da6ff;            /* bleu pour liens */
  --err:#ff6b6b;

  /* Fond avec photo + overlay réglable */
  --bg-img: url('/assets/bg-garage.png');  /* change le chemin si besoin */
  --bg-overlay: rgba(8,12,22,.58);         /* <— force l’assombrissement ici */
  --bg-fallback:#0b1022;

  /* Surfaces “glass” harmonisées */
  --surface: rgba(15,23,42,.58);
  --surface-border: rgba(255,255,255,.08);

  /* Boutons */
  --btn: rgba(31,41,55,.78);
  --btn-border: rgba(255,255,255,.16);
  --btn-border-hover: rgba(255,255,255,.32);
}

/* ===============================
   Reset & base
   =============================== */
*{ box-sizing:border-box }
html, body{ height:100% }
html{ -webkit-text-size-adjust:100% }  /* iOS: pas de zoom auto */
body{
  margin:0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, sans-serif;
  color:var(--text);
  background:
    linear-gradient(var(--bg-overlay), var(--bg-overlay)),
    var(--bg-img) center / cover fixed no-repeat;
  background-color: var(--bg-fallback); /* au cas où l’image ne charge pas */
  position:relative;
  overflow-x:hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Mobile: éviter background-attachment:fixed (saccades iOS) */
@media (max-width: 768px){
  body{
    background:
      linear-gradient(var(--bg-overlay), var(--bg-overlay)),
      var(--bg-img) center / cover no-repeat;
    background-attachment: scroll;
  }
}

/* Halo / vignette douce en plus du bg */
body::before{
  content:"";
  position:fixed; inset:-20% -10% -10% -10%;
  pointer-events:none;
  background:
    radial-gradient(60rem 40rem at 50% 8%, rgba(77,166,255,.05), transparent 60%),
    radial-gradient(80rem 50rem at 85% 92%, rgba(212,175,55,.05), transparent 65%);
  z-index:-1;
}

/* ===============================
   Liens & conteneur
   =============================== */
a{ color:var(--accent2); text-decoration:none; transition:.2s }
a:hover{ color:var(--accent) }

.container{ max-width:1280px; margin:0 auto; padding:0 16px; width:100% }

/* ===============================
   Header / Topbar (structure dans layout.php)
   =============================== */
.topbar{
  background:var(--bg);               /* fallback si le style inline n’est pas chargé */
  border-bottom:1px solid #1f2937;
}
.topbar .container{
  display:flex;
  align-items:center;
  gap:20px;
  padding:12px 20px;
}
.brand{ display:flex; align-items:center; gap:10px; color:inherit }
.brand img{ display:block; height:60px; width:auto }
.brand .brand-text{ display:flex; flex-direction:column; line-height:1.1 }
.brand .brand-text .name{ font-weight:700; letter-spacing:.5px }
.brand .brand-text .tagline{ font-size:.75rem; opacity:.75 }
.topbar nav{ display:flex; gap:18px; margin-left:auto; flex-wrap:wrap }
.topbar nav a{ opacity:.9; padding:8px 10px; border-radius:8px }
.topbar nav a:hover{ opacity:1; background:rgba(255,255,255,.06) }
.topbar nav .logout{ color:var(--err); font-weight:600 }
.topbar nav .logout:hover{ color:#ff3333 }

/* ===============================
   Flash
   =============================== */
.flash{ padding:10px 12px; border-radius:10px; margin:10px 0 }
.flash.ok{ background:#064e3b; color:#d1fae5 }
.flash.err{ background:#7f1d1d; color:#fee2e2 }

/* ===============================
   Surfaces (glass) — cartes/panels/tables unifiées
   =============================== */
.card, .panel, .table, .glass{
  background: #00102000;                 /* <— semi-transparent partout */
  border: 1px solid var(--surface-border);
  border-radius:14px;
  padding:16px;
  margin:12px 0;
  box-shadow:0 10px 20px rgba(0,0,0,.25);
  backdrop-filter: blur(8px) saturate(120%);
  -webkit-backdrop-filter: blur(8px) saturate(120%);
  transition: border-color .2s ease, box-shadow .2s ease, transform .06s ease;
}
.card:hover, .panel:hover{
  border-color: var(--accent);
  box-shadow:0 0 14px rgba(212,175,55,.28);
}

/* Titres & tableaux */
h1,h2{ margin:8px 0 10px }
table{ width:100%; border-collapse:separate; border-spacing:0 }
th,td{ padding:10px 12px; border-bottom:1px solid rgba(255,255,255,.08) }
.table-wrapper{ overflow-x:auto; -webkit-overflow-scrolling:touch }

/* ===============================
   Formulaires
   =============================== */
input,select,button,textarea{
  background:#0b1220;
  color:#e5e7eb;
  border:1px solid #243041;
  border-radius:10px;
  padding:10px;
  width:100%;
  font-size:16px;     /* empêche le zoom iOS au focus */
}
button{ cursor:pointer; transition:.2s }
button:hover{ border-color:var(--accent); color:var(--accent) }

/* ===============================
   Layouts & utilitaires
   =============================== */
.form-row{ display:flex; gap:12px; align-items:flex-end; flex-wrap:wrap }
.form-row > div{ flex:1 1 200px }  /* évite l’étouffement sur mobile */

.badge{
  display:inline-block;
  padding:4px 10px;
  border-radius:999px;
  background:rgba(31,41,55,.85);
  color:#e5e7eb;
  font-size:12px;
  font-weight:500;
}
.actions{ display:flex; gap:8px; flex-wrap:wrap }

/* Boutons génériques (pour pages simples) */
.btn{
  background: var(--btn);
  color:#fff;
  border:1px solid var(--btn-border);
  border-radius:12px;
  padding:12px 14px;
  display:inline-block;
  text-decoration:none;
  transition: transform .06s ease, border-color .2s ease, background .2s ease;
  font-size:16px; /* iOS */
}
.btn:hover{ transform:translateY(-1px); border-color:var(--btn-border-hover); background:rgba(31,41,55,.95) }
.btn-ghost{ background: rgba(15,23,42,.65) }

/* ===============================
   Footer
   =============================== */
.footer{
  background:var(--bg);
  border-top:1px solid #1f2937;
  margin-top:24px;
  padding:16px 0;
  text-align:center;
  font-size:.9rem;
  color:var(--muted);
}
.footer .brand{ color:var(--accent); font-weight:600 }

/* ===============================
   Dashboard / Stats touches
   =============================== */
.card .form-row h2{
  color:var(--accent);
  font-weight:700;
  font-size:1.6rem;
}
.card h2, .nav-actions h2{
  font-weight:600;
}
.nav-actions{ display:flex; justify-content:space-between; align-items:center; margin-bottom:10px; flex-wrap:wrap }

/* ===============================
   Mobile optimisations
   =============================== */
@media (max-width: 980px){
  .brand img{ height:48px }
  .topbar .container{ gap:12px; padding:10px 16px }
}
@media (max-width: 720px){
  .container{ padding:0 14px }
  .form-row{ gap:10px }
  .card, .panel, .table{ padding:14px }
}
@media (max-width: 420px){
  .brand .brand-text .name{ font-size:14px }
  .brand .brand-text .tagline{ font-size:.7rem }
}

/* ===============================
   Impression
   =============================== */
.printable{ background:#fff; color:#000; padding:20px; border-radius:8px }
.printable h1,h2,h3{ color:#000 }

/* ===============================
   Devis : boutons lignes
   =============================== */
.btn-del-line{
  padding:6px 10px;
  border:1px solid rgba(255,255,255,.15);
  background:#1e293b;
  border-radius:8px;
  cursor:pointer;
}
.btn-del-line:hover{ background:#0f172a; color:var(--err) }

#btnAddLine, #submitQuote{
  padding:8px 12px;
  border:1px solid rgba(255,255,255,.15);
  background:#1e293b;
  border-radius:10px;
  cursor:pointer;
}
#btnAddLine:hover, #submitQuote:hover{ background:#0f172a; color:var(--accent) }