/* ================================
   BioLab LIMS – UI 2025 (Bootstrap)
   Place: resources/css/app.css
   Then:  @vite(['resources/css/app.css','resources/js/app.js'])
   ================================ */

/* ---------- Variables & Base ---------- */
:root{
  /* Palette sky/ink douce */
  --sky-50:#f6fbff;
  --sky-100:#eaf5ff;
  --sky-200:#d9ecff;
  --sky-600:#2563eb; /* bootstrap primary compatible */
  --ink-700:#0f172a;

  /* Tokens UI */
  --radius-lg: 1rem;
  --radius-md: .75rem;
  --shadow-soft: 0 10px 28px rgba(2,6,23,.06);
  --shadow-focus: 0 0 0 .25rem rgba(37,99,235,.15);
  --border-soft: 1px solid rgba(0,0,0,.06);
}

/* Typos plus nettes */
body{
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  color: #111827;
  background: #f8fafc;
}

/* ---------- Cards modernes ---------- */
.soft-card{
  border: none !important;
  border-radius: var(--radius-lg) !important;
  box-shadow: var(--shadow-soft) !important;
  background: #fff;
}
.card-header{
  background: #fff !important;
  border-bottom: var(--border-soft) !important;
  border-top-left-radius: var(--radius-lg);
  border-top-right-radius: var(--radius-lg);
}
.card-footer{
  background: #fff !important;
  border-top: var(--border-soft) !important;
  border-bottom-left-radius: var(--radius-lg);
  border-bottom-right-radius: var(--radius-lg);
}

/* ---------- Boutons pill & états ---------- */
.btn-pill{ border-radius:999px !important; }
.btn{ transition: transform .04s ease, box-shadow .2s ease; }
.btn:active{ transform: translateY(1px); }
.btn-primary{
  background: var(--sky-600);
  border-color: var(--sky-600);
  box-shadow: 0 6px 18px rgba(37,99,235,.18);
}
.btn-primary:hover{
  filter: brightness(1.02);
  box-shadow: 0 10px 28px rgba(37,99,235,.22);
}
.btn-outline-secondary:hover{ background:#fff; }

/* Small icon buttons */
.btn-sm i{ line-height: 1; }

/* ---------- Inputs & Groups ---------- */
.input-group-text{
  background:#fff;
}
.input-group .form-control{
  border-right: none;
}
.form-control, .form-select{
  border-radius: .6rem;
  border-color:#e9eff6;
  background:#fbfdff;
  transition: box-shadow .2s ease, border-color .2s ease, background .2s ease;
}
.form-control:focus, .form-select:focus{
  border-color:#cfe3ff;
  box-shadow: var(--shadow-focus);
  background:#fff;
}

/* Labels subtils */
.form-label.small{ font-weight:600; letter-spacing:.2px; }

/* ---------- Table “soft” ---------- */
.table-soft tbody tr{
  transition: background .15s ease, transform .06s ease;
}
.table-soft tbody tr:hover{
  background-color: rgba(37,99,235,.04);
}
.table thead th{
  font-weight:600;
  text-transform: uppercase;
  font-size:.78rem;
  letter-spacing:.4px;
  border-top: none !important;
}
.table td, .table th{
  vertical-align: middle;
}

/* Avatar badge rond (liste patients, orders…) */
.avatar-sm{
  width:40px;height:40px;
  border-radius:50%;
  box-shadow: inset 0 0 0 1px rgba(37,99,235,.12);
}

/* ---------- Badges ---------- */
.badge.bg-light.text-dark{
  border:1px solid rgba(0,0,0,.06);
  background: #fff !important;
  box-shadow: 0 1px 2px rgba(0,0,0,.04);
}

/* ---------- Breadcrumb ---------- */
.breadcrumb{
  --bs-breadcrumb-divider-color:#94a3b8;
}
.breadcrumb .breadcrumb-item a{
  color:#64748b;
  text-decoration:none;
}
.breadcrumb .breadcrumb-item.active{
  color:#0f172a;
  font-weight:600;
}

/* ---------- Pagination ---------- */
.page-link{
  border-radius:.5rem !important;
}
.page-item.active .page-link{
  box-shadow: var(--shadow-focus);
}

/* ---------- Utilities ---------- */
.shadow-soft{ box-shadow: var(--shadow-soft) !important; }
.rounded-lg{ border-radius: var(--radius-lg) !important; }
.rounded-md{ border-radius: var(--radius-md) !important; }

/* ---------- Tables réactives & collantes (optionnel) ---------- */
/* Header sticky sur grands écrans */
@media (min-width: 992px){
  .table-responsive thead th{
    position: sticky; top: 0; z-index: 2;
    background: #ffffff;
  }
}

/* ---------- States / Empty ---------- */
.empty-state{
  color:#64748b;
}
.empty-state i{ opacity:.6; }

/* ---------- Hover sur rows actions ---------- */
.table .btn-outline-primary{
  border-color:#dbeafe;
}
.table .btn-outline-primary:hover{
  background:#eff6ff;
}

/* ---------- Cards “ghost” pour filtres ---------- */
.card.shadow-sm.mb-3 .card-body{
  border-radius: var(--radius-lg);
}

/* ---------- Focus visible global ---------- */
:focus-visible{
  outline: none;
  box-shadow: var(--shadow-focus);
  border-radius:.5rem;
}

/* ---------- Dark mode (optionnel, automatique) ---------- */
@media (prefers-color-scheme: dark){
  :root{
    --shadow-soft: 0 10px 28px rgba(0,0,0,.35);
    --border-soft: 1px solid rgba(255,255,255,.08);
  }
  body{ background:#0b1220; color:#e5e7eb; }
  .page-bar{
    background: linear-gradient(135deg,#0f1a30,#0e1628);
    border: 1px solid rgba(255,255,255,.06);
  }
  .soft-card, .card, .card-header, .card-footer{
    background:#0f172a !important; color:#e5e7eb;
    border-color: rgba(255,255,255,.08) !important;
  }
  .table{
    color:#d1d5db;
  }
  .table thead th{
    background:#0f172a !important; color:#94a3b8;
    border-color: rgba(255,255,255,.06) !important;
  }
  .table tbody tr:hover{ background: rgba(37,99,235,.08); }
  .form-control, .form-select{
    background:#0d1426; border-color:#1f2a44; color:#e5e7eb;
  }
  .input-group-text{ background:#0d1426; border-color:#1f2a44; color:#9cb6e6; }
  .breadcrumb .breadcrumb-item a{ color:#9aa7bd; }
  .breadcrumb .breadcrumb-item.active{ color:#e5e7eb; }
  .badge.bg-light.text-dark{
    background:#0d1426 !important; color:#e5e7eb !important; border-color:#1f2a44;
  }
}