/* Styles modernes pour la page de modification produit */

:root{
  --bg:#f5f7fb;
  --card:#ffffff;
  --accent:#2b7be4;
  --accent-2:#1e90ff;
  --muted:#6b7280;
  --success:#16a34a;
  --danger:#ef4444;
  --radius:10px;
  --shadow: 0 6px 20px rgba(36,59,85,0.08);
  --glass: rgba(255,255,255,0.6);
  --gap:18px;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background: linear-gradient(180deg,#eef4ff 0%, var(--bg) 60%);
  color:#111827;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  padding:40px 18px;
}

/* Conteneur centré */
.container{
  max-width:980px;
  margin:0 auto;
  background: linear-gradient(180deg, rgba(255,255,255,0.85), rgba(250,250,250,0.9));
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:28px;
  border:1px solid rgba(15,23,42,0.04);
}

/* En-tête */
h2{
  margin:0 0 18px 0;
  font-size:1.45rem;
  letter-spacing:-0.2px;
  color:#0f172a;
}

/* Formulaire en grille responsive */
form{
  display:grid;
  grid-template-columns: repeat(2, 1fr);
  gap:var(--gap);
  align-items:start;
}

/* Full width for single-column fields (magasin, actions) */
.form-full{
  grid-column:1 / -1;
}

/* Label */
label{
  display:block;
  font-size:0.9rem;
  color:var(--muted);
  margin-bottom:8px;
}

/* Inputs et selects */
input[type="text"],
input[type="number"],
select,
textarea{
  width:100%;
  padding:10px 12px;
  border-radius:8px;
  border:1px solid rgba(15,23,42,0.08);
  background:linear-gradient(180deg, #fff, #fbfdff);
  font-size:0.95rem;
  color:#0b1220;
  transition:box-shadow .15s, border-color .15s, transform .06s;
  outline:none;
  -webkit-appearance:none;
}
input:focus, select:focus, textarea:focus{
  box-shadow: 0 6px 18px rgba(30,126,255,0.12);
  border-color:var(--accent);
  transform:translateY(-1px);
}

/* Placeholder styling */
input::placeholder, textarea::placeholder{
  color: #9aa3b2;
}

/* Boutons */
.button{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:11px 16px;
  border-radius:10px;
  border:none;
  cursor:pointer;
  font-weight:600;
  color:white;
  background:linear-gradient(90deg,var(--accent),var(--accent-2));
  box-shadow: 0 8px 20px rgba(30,126,255,0.15);
  transition:transform .12s ease, box-shadow .12s ease, opacity .12s;
}
.button:hover{ transform:translateY(-2px) }
.button:active{ transform:translateY(0) }
.button.secondary{
  background:transparent;
  color:var(--accent);
  border:1px solid rgba(30,126,255,0.12);
  box-shadow:none;
}

/* Messages */
.msg{
  padding:10px 14px;
  border-radius:8px;
  font-weight:600;
  font-size:0.95rem;
  display:inline-block;
}
.msg.success{ background: rgba(22,163,74,0.12); color:var(--success); border:1px solid rgba(22,163,74,0.12); }
.msg.error{ background: rgba(239,68,68,0.08); color:var(--danger); border:1px solid rgba(239,68,68,0.08); }

/* Lien retour */
a.return{
  color:var(--muted);
  text-decoration:none;
  font-size:0.92rem;
}
a.return:hover{ text-decoration:underline; color:var(--accent) }

/* Small helper note under inputs */
.helper{
  display:block;
  margin-top:6px;
  font-size:0.82rem;
  color:#94a3b8;
}

/* Mobile responsive */
@media (max-width:820px){
  .container{ padding:20px }
  form{ grid-template-columns: 1fr; gap:14px; }
  h2{ font-size:1.25rem }
}

/* Table-like alignment for label+input pairs (optional) */
.form-row{
  display:flex;
  flex-direction:column;
}

/* Accessibility focus outline for keyboard users */
:focus{ outline: 3px solid rgba(59,130,246,0.12); outline-offset:3px; }

/* Minor visual polish */
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }