/* =========================================================
   SYBIOCARE - PAGE: referenciels
   Path: ./assets/css/pages/referenciels.css
========================================================= */

.ref-page{
  padding:30px;
}

/* Header */
.ref-header{
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:16px;
  margin-bottom:16px;
}

.ref-title{
  margin:0;
  font-size:26px;
  font-weight:900;
  letter-spacing:-0.4px;
  color:#0f172a;
}

/* Tabs */
.ref-tabs{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin:14px 0 18px 0;
}

.ref-tab{
  border:1px solid #e2e8f0;
  background:#fff;
  color:#334155;
  border-radius:10px;
  padding:10px 12px;
  font-weight:800;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  gap:8px;
  transition:all .15s ease;
}

.ref-tab:hover{
  background:#f8fafc;
}

.ref-tab.active{
  border-color:#1e222d;
  background:#1e222d;
  color:#fff;
}

.ref-panel{
  display:none;
}

.ref-panel.active{
  display:block;
}

/* Cards */
.card{
  background:#fff;
  border:1px solid #e2e8f0;
  border-radius:14px;
  padding:18px;
}

.card-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:14px;
  flex-wrap:wrap;
}

.card-title{
  font-weight:900;
  color:#0f172a;
}

.actions{
  display:flex;
  gap:10px;
  align-items:center;
  flex-wrap:wrap;
}

/* Inputs */
.input{
  border:1px solid #cbd5e1;
  border-radius:10px;
  padding:10px 12px;
  background:#fff;
  font-weight:700;
  outline:none;
  min-width:260px;
  box-sizing:border-box;
}

.ref-filters{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}

.ref-filters .input{
  min-width:220px;
}

/* Table */
.table-wrap{
  background:#fff;
  border:1px solid #e2e8f0;
  border-radius:14px;
  overflow:hidden;
}

.ref-table{
  width:100%;
  border-collapse:collapse;
  font-size:14px;
  text-align:left;
}

.ref-table thead tr{
  background:#f8fafc;
  border-bottom:1px solid #e2e8f0;
}

.ref-table th{
  padding:14px 16px;
  font-weight:900;
  color:#0f172a;
}

.ref-table td{
  padding:14px 16px;
  border-bottom:1px solid #f1f5f9;
  vertical-align:top;
}

.td-loading{
  padding:14px 16px;
}

/* Width helpers */
.col-30{ width:30%; }
.col-16{ width:16%; }
.col-18{ width:18%; }
.col-14{ width:14%; }

.col-actions{
  width:8%;
  text-align:right;
}

.ref-table th.col-actions{
  text-align:right;
}

/* Grid refs */
.grid-refs{
  display:grid;
  grid-template-columns:1fr 1.4fr;
  gap:14px;
}

/* Utils */
.muted{
  color:#64748b;
  font-weight:700;
}

.mt-4{ margin-top:4px; }
.mt-10{ margin-top:10px; }
.mb-14{ margin-bottom:14px; }

/* Buttons fallback (si besoin) */
.btn{
  border:none;
  cursor:pointer;
  border-radius:10px;
  font-weight:900;
  padding:10px 12px;
  display:inline-flex;
  align-items:center;
  gap:8px;
}

.btn-primary{
  background:#1e222d;
  color:#fff;
}

.btn-soft{
  background:#f8fafc;
  color:#0f172a;
  border:1px solid #e2e8f0;
}

/* Responsive */
@media (max-width: 1100px){
  .ref-page{ padding:20px; }
  .grid-refs{ grid-template-columns:1fr; }
  .input{ min-width:220px; width:100%; }
}