/* Fromapp — Administration des produits
   Harmonisation visuelle avec le module Ressources humaines. */

:root{
  --products-blue:#1d4ed8;
  --products-blue-dark:#1e3a8a;
  --products-blue-soft:#eff6ff;
  --products-text:#172033;
  --products-muted:#64748b;
  --products-border:#dbe3ee;
  --products-bg:#f3f6fb;
  --products-surface:rgba(255,255,255,.94);
  --products-shadow:0 16px 38px rgba(15,23,42,.08);
  --products-shadow-soft:0 8px 22px rgba(15,23,42,.07);
  --products-radius:21px;
  --products-transition:160ms ease;
}

*{ box-sizing:border-box; }

body{
  min-height:100vh;
  margin:0 !important;
  padding:0 0 48px !important;
  background:
    radial-gradient(circle at 8% 0%,rgba(37,99,235,.10),transparent 31%),
    radial-gradient(circle at 94% 5%,rgba(14,165,233,.07),transparent 28%),
    var(--products-bg) !important;
  color:var(--products-text);
  font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif !important;
}

button,input,select,textarea{ font:inherit; }
button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{
  outline:3px solid rgba(59,130,246,.20);
  outline-offset:2px;
}

/* En-tête */
.produits-header{
  position:sticky;
  top:0;
  z-index:80;
  max-width:none !important;
  margin:0 0 28px !important;
  padding:18px clamp(18px,4vw,44px);
  border-bottom:1px solid rgba(203,213,225,.75);
  background:rgba(255,255,255,.82);
  box-shadow:0 8px 26px rgba(15,23,42,.05);
  backdrop-filter:blur(18px) saturate(145%);
  -webkit-backdrop-filter:blur(18px) saturate(145%);
}
.produits-header h2{
  margin:0;
  color:var(--products-text);
  font-size:clamp(23px,3vw,33px) !important;
  font-weight:850;
  line-height:1.08;
  letter-spacing:-.035em;
}
.produits-header p{
  margin:7px 0 0;
  color:var(--products-muted);
  font-size:14px;
  line-height:1.4;
}

/* Cartes */
.card{
  width:min(1480px,calc(100% - 32px));
  max-width:1480px !important;
  margin:0 auto 22px !important;
  padding:21px !important;
  overflow:hidden;
  border:1px solid var(--products-border);
  border-radius:var(--products-radius) !important;
  background:var(--products-surface) !important;
  box-shadow:var(--products-shadow) !important;
}
.card > h3{
  margin:-21px -21px 20px !important;
  padding:18px 21px;
  border-bottom:1px solid var(--products-border);
  background:linear-gradient(135deg,#eef4ff,#dfeaff);
  color:var(--products-text);
  font-size:20px;
  font-weight:850;
  letter-spacing:-.02em;
}

/* Boutons */
.btn-primary,.btn-danger,.btn-secondary,.btn-ghost{
  display:inline-flex;
  min-height:41px;
  align-items:center;
  justify-content:center;
  gap:6px;
  padding:9px 14px !important;
  border-radius:11px !important;
  font-size:13px;
  font-weight:800 !important;
  text-decoration:none;
  transition:transform var(--products-transition),box-shadow var(--products-transition),background var(--products-transition);
}
.btn-primary{
  border:1px solid var(--products-blue) !important;
  background:linear-gradient(145deg,#2563eb,#1d4ed8) !important;
  color:#fff;
  box-shadow:0 8px 18px rgba(29,78,216,.18);
}
.btn-primary:hover{ background:linear-gradient(145deg,#1d4ed8,#1e40af) !important; transform:translateY(-1px); }
.btn-secondary{ border:1px solid var(--products-border) !important; background:#fff !important; color:#334155; }
.btn-ghost{ border:1px solid #bfdbfe !important; background:var(--products-blue-soft) !important; color:var(--products-blue-dark) !important; }
.btn-danger{ border:1px solid #dc2626 !important; background:linear-gradient(145deg,#ef4444,#dc2626) !important; color:#fff; }
.btn-secondary:hover,.btn-ghost:hover,.btn-danger:hover{ transform:translateY(-1px); box-shadow:var(--products-shadow-soft); }

/* Tableau */
.produits-table-wrap{
  width:100%;
  overflow:auto;
  border:1px solid var(--products-border);
  border-radius:15px;
  background:#fff;
  -webkit-overflow-scrolling:touch;
}
#produitsTable{ min-width:1040px; border-collapse:separate; border-spacing:0; }
#produitsTable th,#produitsTable td{
  padding:11px 12px;
  border:0;
  border-bottom:1px solid #e8edf4;
  font-size:13px;
  vertical-align:middle;
}
#produitsTable thead tr:first-child th{
  position:sticky;
  top:0;
  z-index:2;
  background:#e7efff !important;
  color:#334155;
  font-size:12px;
  font-weight:850;
  letter-spacing:.025em;
  text-transform:uppercase;
}
#produitsTable thead tr:nth-child(2) th{ padding:9px; background:#f8fafc; }
#produitsTable tbody tr:nth-child(even){ background:#f8fafc; }
#produitsTable tbody tr:hover{ background:#eff6ff; }
#produitsTable tbody tr:last-child td{ border-bottom:0; }
#produitsTable td:last-child{ white-space:nowrap; }
.filter-input,#rowsPerPageSelect{
  min-height:38px;
  border:1px solid #cbd5e1;
  border-radius:10px;
  background:#fff;
}
.filter-input{ padding:8px 10px !important; }
.filter-input:focus,#rowsPerPageSelect:focus{
  border-color:#60a5fa;
  box-shadow:0 0 0 4px rgba(59,130,246,.11);
  outline:none;
}
.table-toolbar{ margin:0 0 14px !important; }
.table-toolbar .muted{ color:var(--products-muted) !important; font-weight:650; }
#rowsPerPageSelect{ margin-left:5px; padding:6px 30px 6px 9px; }
#paginationControls .btn-primary,#paginationControls .btn-secondary{ margin:3px; min-width:40px; }

/* Formulaires */
.form-card form{ display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); gap:14px; align-items:end; }
.form-card input[type="text"],.form-card input[type="number"],.form-card select,
.modal input[type="text"],.modal input[type="number"],.modal select{
  width:100%;
  min-height:43px;
  padding:10px 12px;
  border:1px solid #cbd5e1;
  border-radius:11px;
  background:#fff;
  color:var(--products-text);
}
.form-card input:focus,.form-card select:focus,.modal input:focus,.modal select:focus{
  border-color:#60a5fa;
  box-shadow:0 0 0 4px rgba(59,130,246,.11);
  outline:none;
}
.product-form-card form > input,.product-form-card form > select{ grid-column:span 3; }
.product-form-card form > .row{ grid-column:span 8; min-height:43px; padding:9px 12px; border:1px solid var(--products-border); border-radius:11px; background:#f8fafc; }
.product-form-card form > #boite-fields{ grid-column:1/-1; padding:14px; border:1px solid #bfdbfe; border-radius:13px; background:var(--products-blue-soft); }
.product-form-card form > #boite-fields:not(.hidden){ display:flex; gap:14px; }
.product-form-card form > #boite-fields label{ flex:1; color:#475569; font-size:13px; font-weight:750; }
.product-form-card form > .btn-primary{ grid-column:span 2; justify-self:start; }
.compact-form-card form > input{ grid-column:span 4; }
.compact-form-card form > .btn-primary{ grid-column:span 2; justify-self:start; }

/* Fenêtre d'édition */
.modal-backdrop{ background:rgba(15,23,42,.48) !important; backdrop-filter:blur(4px); }
.modal{
  max-width:680px !important;
  padding:21px !important;
  border:1px solid var(--products-border);
  border-radius:21px !important;
  box-shadow:0 24px 65px rgba(15,23,42,.22) !important;
}
.modal header{ margin:-21px -21px 20px !important; padding:17px 21px; border-bottom:1px solid var(--products-border); background:linear-gradient(135deg,#eef4ff,#dfeaff); }
.modal h3{ color:var(--products-text); font-size:20px !important; font-weight:850; }
.modal .grid{ gap:14px !important; }
.modal label{ display:grid; gap:6px; color:#475569; font-size:13px; font-weight:750; }
.modal .actions{ padding-top:5px; }

@media (max-width:900px){
  .produits-header{ position:relative; align-items:flex-start !important; padding:16px; }
  .card{ width:calc(100% - 24px); padding:17px !important; border-radius:17px !important; }
  .card > h3{ margin:-17px -17px 17px !important; padding:16px 17px; }
  .product-form-card form > input,.product-form-card form > select{ grid-column:span 6; }
  .product-form-card form > .row{ grid-column:1/-1; }
  .compact-form-card form > input{ grid-column:span 6; }
}

@media (max-width:620px){
  .produits-header{ flex-direction:column; gap:14px; }
  .produits-header .btn-primary{ width:100%; }
  .form-card form > input,.form-card form > select,.form-card form > .btn-primary{ grid-column:1/-1; width:100%; }
  .product-form-card form > #boite-fields:not(.hidden){ flex-direction:column; }
  .modal .grid{ grid-template-columns:1fr !important; }
  .table-toolbar{ align-items:flex-start !important; justify-content:space-between !important; }
}

@media print{
  .produits-header,.form-card,.table-toolbar,#paginationControls,#produitsTable td:last-child,#produitsTable th:last-child{ display:none !important; }
  body{ padding:0 !important; background:#fff !important; }
  .card{ width:100%; box-shadow:none !important; border:0; }
  .produits-table-wrap{ overflow:visible; }
}