/*
 * gestit.css — Feuille de styles partagée GestIT
 * Centralise les classes communes à toutes les pages.
 * Chargée via layouts/app.blade.php.
 * Auteur : GestIT / généré 2026-05
 */

/* ─────────────────────────────────────────────
   OVERRIDE BOOTSTRAP PRIMARY → Tailwind blue-600
   Remplace #0d6efd (Bootstrap) par #2563eb
───────────────────────────────────────────── */
:root {
  --bs-primary:              #2563eb;
  --bs-primary-rgb:          37, 99, 235;
  --bs-link-color:           #2563eb;
  --bs-link-color-rgb:       37, 99, 235;
  --bs-link-hover-color:     #1d4ed8;
  --bs-link-hover-color-rgb: 29, 78, 216;
}
/* btn-primary */
.btn-primary {
  --bs-btn-bg:              #2563eb;
  --bs-btn-border-color:    #2563eb;
  --bs-btn-hover-bg:        #1d4ed8;
  --bs-btn-hover-border-color: #1a46cc;
  --bs-btn-active-bg:       #1a46cc;
  --bs-btn-active-border-color: #1740c0;
  --bs-btn-disabled-bg:     #2563eb;
  --bs-btn-disabled-border-color: #2563eb;
}
/* outline-primary */
.btn-outline-primary {
  --bs-btn-color:            #2563eb;
  --bs-btn-border-color:     #2563eb;
  --bs-btn-hover-bg:         #2563eb;
  --bs-btn-hover-border-color: #2563eb;
  --bs-btn-active-bg:        #2563eb;
  --bs-btn-active-border-color: #2563eb;
}
/* badge-primary, bg-primary, text-primary, border-primary */
.bg-primary           { background-color: #2563eb !important; }
.text-primary         { color: #2563eb !important; }
.border-primary       { border-color: #2563eb !important; }
.badge.bg-primary     { background-color: #2563eb !important; }
/* focus ring */
.btn-primary:focus,
.btn-primary:focus-visible {
  box-shadow: 0 0 0 .25rem rgba(37,99,235,.35);
}
.btn-outline-primary:focus,
.btn-outline-primary:focus-visible {
  box-shadow: 0 0 0 .25rem rgba(37,99,235,.35);
}

/* ─────────────────────────────────────────────
   SAAS MODERN — style global 2025
   Boutons gradient · ombres douces · coins ronds
───────────────────────────────────────────── */

/* ── Tous les boutons : coins plus ronds ── */
.btn {
  border-radius: .6rem !important;
  font-weight: 600;
  letter-spacing: .01em;
  transition: all .18s cubic-bezier(.4,0,.2,1);
}

/* ── btn-primary : gradient + ombre ── */
.btn-primary {
  background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%) !important;
  border-color: #1d4ed8 !important;
  box-shadow: 0 2px 8px rgba(37,99,235,.35) !important;
}
.btn-primary:hover,
.btn-primary:focus {
  background: linear-gradient(135deg, #1d4ed8 0%, #1a46cc 100%) !important;
  border-color: #1a46cc !important;
  box-shadow: 0 4px 14px rgba(37,99,235,.45) !important;
  transform: translateY(-1px);
}
.btn-primary:active {
  transform: translateY(0);
  box-shadow: 0 1px 4px rgba(37,99,235,.3) !important;
}

/* ── btn-outline-primary : hover lift ── */
.btn-outline-primary:hover {
  box-shadow: 0 3px 10px rgba(37,99,235,.3) !important;
  transform: translateY(-1px);
}

/* ── btn-secondary : légère profondeur ── */
.btn-secondary {
  background: #f1f5f9 !important;
  border-color: #e2e8f0 !important;
  color: #374151 !important;
  box-shadow: none !important;
}
.btn-secondary:hover {
  background: #e2e8f0 !important;
  border-color: #cbd5e1 !important;
  color: #0f172a !important;
  transform: translateY(-1px);
}

/* ── btn-danger : gradient rouge ── */
.btn-danger {
  background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%) !important;
  border-color: #b91c1c !important;
  box-shadow: 0 2px 8px rgba(220,38,38,.3) !important;
}
.btn-danger:hover {
  box-shadow: 0 4px 12px rgba(220,38,38,.4) !important;
  transform: translateY(-1px);
}

/* ── Cartes : ombre en couches (Material depth) ── */
.pg-card,
.pk,
.sk-card,
.eq-section-card,
.pg-filter {
  box-shadow:
    0 1px 2px rgba(0,0,0,.04),
    0 4px 12px rgba(0,0,0,.06) !important;
  border: 1px solid rgba(0,0,0,.04) !important;
  transition: box-shadow .2s, transform .2s;
}
/* hover lift sur les KPI */
.pk:hover, .sk-card:hover {
  box-shadow:
    0 2px 4px rgba(0,0,0,.05),
    0 8px 20px rgba(0,0,0,.09) !important;
  transform: translateY(-2px);
}

/* ── KPI : icône avec fond dégradé doux ── */
.pk-ico[style*="#2563eb"],
.pk-ico[style*="#eff6ff"] {
  background: linear-gradient(135deg,#eff6ff,#dbeafe) !important;
}
.pk-ico[style*="#16a34a"],
.pk-ico[style*="#f0fdf4"] {
  background: linear-gradient(135deg,#f0fdf4,#dcfce7) !important;
}
.pk-ico[style*="#f59e0b"],
.pk-ico[style*="#fffbeb"] {
  background: linear-gradient(135deg,#fffbeb,#fef3c7) !important;
}
.pk-ico[style*="#dc2626"],
.pk-ico[style*="#fef2f2"] {
  background: linear-gradient(135deg,#fef2f2,#fee2e2) !important;
}

/* ── Inputs : focus ring net ── */
.form-control:focus,
.form-select:focus {
  border-color: #93c5fd !important;
  box-shadow: 0 0 0 3px rgba(37,99,235,.12) !important;
  outline: none;
}

/* ── Badges de statut : coins + arrondis ── */
.badge { border-radius: .45rem; }

/* ─────────────────────────────────────────────
   FILTRES DE PAGE
───────────────────────────────────────────── */
.pg-filter {
  background: #fff;
  border-radius: .875rem;
  padding: 1rem 1.25rem;
  box-shadow: 0 1px 3px rgba(0,0,0,.06);
  margin-bottom: 1rem;
}
.pg-lbl {
  font-size: .75rem;
  font-weight: 600;
  color: #64748b;
  margin-bottom: .25rem;
  display: block;
}

/* ─────────────────────────────────────────────
   CARTES DE PAGE (conteneur tableau + filtres)
───────────────────────────────────────────── */
.pg-card {
  background: #fff;
  border-radius: .875rem;
  box-shadow: 0 1px 3px rgba(0,0,0,.06);
  overflow: hidden;
}

/* ─────────────────────────────────────────────
   TABLEAUX
───────────────────────────────────────────── */
.pg-row { transition: background .12s; }
.pg-row:hover { background: #f8fafc !important; }

.pg-th {
  font-size: .71rem;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: #94a3b8;
  font-weight: 600;
  padding: .7rem 1rem;
  white-space: nowrap !important;
  background: #f8fafc;
}
.pg-td {
  padding: .8rem 1rem;
  vertical-align: middle;
  font-size: .86rem;
}
.tbl-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: .5rem 1rem;
  font-size: .8rem;
  color: #94a3b8;
}

/* ─────────────────────────────────────────────
   BOUTONS ICÔNE (actions sur lignes de tableau)
   Utilisés avec .ia + modificateur de couleur
───────────────────────────────────────────── */
.ia {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: .4rem;
  border: 1px solid #e2e8f0;
  background: #fff;
  color: #64748b;
  text-decoration: none;
  transition: all .15s;
  font-size: .85rem;
  cursor: pointer;
}
.ia:hover         { background: #f8fafc; border-color: #cbd5e1; color: #0f172a; }
.ia.v:hover       { background: #eff6ff; border-color: #93c5fd; color: #2563eb; } /* view */
.ia.e:hover       { background: #fefce8; border-color: #fde047; color: #ca8a04; } /* edit */
.ia.d:hover       { background: #fef2f2; border-color: #fca5a5; color: #dc2626; } /* delete */
.ia.s:hover       { background: #f0fdf4; border-color: #86efac; color: #16a34a; } /* success */

/* ─────────────────────────────────────────────
   KPI CARDS (grille + cartes individuelles)
   .pg-kpi = grille, .pk = carte, .pk-* = couleur
───────────────────────────────────────────── */
.pg-kpi {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: .875rem;
  margin-bottom: 1rem;
}
@media (max-width: 900px) { .pg-kpi { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .pg-kpi { grid-template-columns: repeat(2, 1fr); } }

.pk {
  background: #fff;
  border-radius: .875rem;
  padding: .875rem 1rem;
  box-shadow: 0 1px 3px rgba(0,0,0,.06);
  overflow: hidden;
  min-width: 0;
  height: 100%;
  display: flex;
  flex-direction: column;
}
.pk-inner { display: flex; align-items: center; justify-content: space-between; gap: .625rem; }
.pk-body  { min-width: 0; flex: 1 1 0; overflow: hidden; }
.pk-lbl   { font-size: .7rem; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: #94a3b8; margin-bottom: .15rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pk-val   { font-size: 1.45rem; font-weight: 800; color: #0f172a; line-height: 1.1; white-space: nowrap; }
.pk-hint  { font-size: .72rem; color: #94a3b8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pk-ico   { width: 40px; height: 40px; min-width: 40px; border-radius: .6rem; display: flex; align-items: center; justify-content: center; font-size: 1.1rem; flex-shrink: 0; }

.pk-blue   { border-top: 3px solid #2563eb; }
.pk-green  { border-top: 3px solid #16a34a; }
.pk-orange { border-top: 3px solid #f59e0b; }
.pk-red    { border-top: 3px solid #dc2626; }
.pk-sky    { border-top: 3px solid #0dcaf0; }
.pk-gray   { border-top: 3px solid #e2e8f0; }
.pk-purple { border-top: 3px solid #7c3aed; }

/* Aliases pour les pages stock qui utilisaient .sk-* */
.sk-kpi-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: .875rem; margin-bottom: 1rem; }
@media (max-width: 900px) { .sk-kpi-grid { grid-template-columns: repeat(2, 1fr); } }
.sk-card       { background: #fff; border-radius: .875rem; padding: .875rem 1rem; box-shadow: 0 1px 3px rgba(0,0,0,.06); overflow: hidden; min-width: 0; height: 100%; display: flex; flex-direction: column; }
.sk-card-inner { display: flex; align-items: center; justify-content: space-between; gap: .625rem; }
.sk-card-body  { min-width: 0; flex: 1 1 0; overflow: hidden; }
.sk-icon       { width: 40px; height: 40px; min-width: 40px; border-radius: .6rem; display: flex; align-items: center; justify-content: center; font-size: 1.1rem; flex-shrink: 0; }
.sk-label  { font-size: .7rem; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: #94a3b8; margin-bottom: .15rem; }
.sk-val    { font-size: 1.45rem; font-weight: 800; color: #0f172a; line-height: 1.1; }
.sk-val-sm { font-size: 1.2rem; }
.sk-hint   { font-size: .72rem; color: #94a3b8; }
.sk-blue   { border-top: 3px solid #2563eb; }
.sk-green  { border-top: 3px solid #16a34a; }
.sk-orange { border-top: 3px solid #f59e0b; }
.sk-red    { border-top: 3px solid #dc2626; }
.sk-gray   { border-top: 3px solid #e2e8f0; }

/* ─────────────────────────────────────────────
   FORMULAIRES (labels + sections)
───────────────────────────────────────────── */
.eq-lbl,
.form-lbl {
  font-size: .75rem;
  font-weight: 600;
  color: #64748b;
  margin-bottom: .3rem;
  display: block;
}
.eq-section-card {
  background: #fff;
  border-radius: .875rem;
  padding: 1.5rem;
  box-shadow: 0 1px 3px rgba(0,0,0,.06);
  margin-bottom: 0;
}
.eq-section-title {
  display: flex;
  align-items: center;
  gap: .55rem;
  font-size: .78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: #64748b;
  margin-bottom: 1.1rem;
  padding-bottom: .75rem;
  border-bottom: 1px solid #f1f5f9;
}
.eq-section-title i { font-size: .95rem; }
.eq-actions {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: 1rem 0 .5rem;
}
.eq-photo-preview {
  width: 72px;
  height: 72px;
  object-fit: cover;
  border-radius: .55rem;
  border: 2px solid #e2e8f0;
}
.eq-upload-area {
  border: 2px dashed #cbd5e1;
  border-radius: .75rem;
  padding: 1.25rem;
  text-align: center;
  background: #f8fafc;
  transition: all .15s;
  cursor: pointer;
}
.eq-upload-area:hover { border-color: #93c5fd; background: #eff6ff; }

/* ─────────────────────────────────────────────
   CHIPS FILTRE / DATE (maintenance + autres)
───────────────────────────────────────────── */
.btn-date-chip {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 2rem;
  padding: .2rem .7rem;
  font-size: .72rem;
  font-weight: 600;
  color: #475569;
  cursor: pointer;
  transition: all .12s;
  white-space: nowrap;
  text-decoration: none;
  display: inline-block;
}
.btn-date-chip:hover,
.btn-date-chip-active {
  background: #eff6ff;
  border-color: #93c5fd;
  color: #2563eb;
}

/* ─────────────────────────────────────────────
   PAGINATION BOOTSTRAP (customisée)
───────────────────────────────────────────── */
.pagination { gap: .2rem; flex-wrap: wrap; }
.pagination .page-link {
  border-radius: .5rem !important;
  border-color: #e2e8f0;
  color: #475569;
  font-size: .82rem;
  padding: .4rem .7rem;
  transition: all .12s;
}
.pagination .page-link:hover {
  background: #eff6ff;
  border-color: #93c5fd;
  color: #2563eb;
}
.pagination .page-item.active .page-link {
  background: #2563eb;
  border-color: #2563eb;
  color: #fff;
}
.pagination .page-item.disabled .page-link {
  background: #f8fafc;
  color: #cbd5e1;
  border-color: #f1f5f9;
}

/* ─────────────────────────────────────────────
   BADGES DE STATUT (équipements, maintenance…)
───────────────────────────────────────────── */
.badge-status {
  display: inline-block;
  padding: .2rem .55rem;
  border-radius: .35rem;
  font-size: .73rem;
  font-weight: 600;
}

/* ─────────────────────────────────────────────
   RESPONSIVE — mobile & tablette
───────────────────────────────────────────── */

/* ── ≤ 640px : hero dashboard ── */
@media (max-width: 640px) {
  /* !important nécessaire : le style inline du dashboard déclare
     overflow:hidden sur .hero-stats et prend le dessus sur le fichier externe */
  .hero-stats    { overflow-x: auto !important; overflow-y: hidden; -webkit-overflow-scrolling: touch; }
  .hero-stat     { min-width: 80px; padding: .6rem .8rem; }
  .hero-stat-val { font-size: 1.1rem; }
  .hero-right    { flex-shrink: 1 !important; min-width: 0; width: 100%; }
  .hero-inner    { flex-direction: column; padding: 1.25rem; }
}

/* ── ≤ 575px : mobile standard ── */
@media (max-width: 575.98px) {
  /* Infos tableau : les deux infos s'empilent */
  .tbl-info { flex-direction: column; align-items: flex-start; gap: .15rem; }

  /* Réduction padding cellules pour gagner de la place */
  .pg-td { padding: .55rem .65rem; font-size: .82rem; }
  .pg-th { padding: .55rem .65rem; }

  /* Valeurs KPI légèrement réduites */
  .pk-val, .sk-val { font-size: 1.2rem; }

  /* Actions formulaire : les boutons passent en pleine largeur */
  .eq-actions { flex-wrap: wrap; }
  .eq-actions .btn { flex: 1 1 auto; min-width: 120px; }

  /* Padding réduit dans les cards de section */
  .eq-section-card { padding: 1rem; }

  /* KPI grid : gap réduit */
  .pg-kpi, .sk-kpi-grid { gap: .5rem; }

  /* Pagination : taille réduite */
  .pagination .page-link { padding: .3rem .55rem; font-size: .78rem; }

  /* Filtre page : séparer clairement les chips */
  .btn-date-chip { font-size: .7rem; padding: .2rem .55rem; }
}

/* ── ≤ 380px : très petits écrans (iPhone SE 1ère gen, Galaxy A…) ── */
@media (max-width: 380px) {
  /* 1 colonne pour les grilles KPI */
  .pg-kpi, .sk-kpi-grid { grid-template-columns: 1fr; }
  /* Padding navbar réduit */
  .pg-filter { padding: .75rem 1rem; }
}

/* ─────────────────────────────────────────────
   DARK MODE — surcharges pour les composants partagés
───────────────────────────────────────────── */
[data-bs-theme=dark] .pg-filter,
[data-bs-theme=dark] .pg-card,
[data-bs-theme=dark] .pk,
[data-bs-theme=dark] .sk-card,
[data-bs-theme=dark] .eq-section-card {
  background: #1e293b;
}
[data-bs-theme=dark] .pg-lbl,
[data-bs-theme=dark] .eq-lbl,
[data-bs-theme=dark] .form-lbl {
  color: #94a3b8;
}
[data-bs-theme=dark] .pg-row:hover  { background: #0f172a !important; }
[data-bs-theme=dark] .pg-th         { background: #0f172a; color: #64748b; }
[data-bs-theme=dark] .tbl-info      { color: #475569; }
[data-bs-theme=dark] .pk-val,
[data-bs-theme=dark] .sk-val        { color: #f1f5f9; }
[data-bs-theme=dark] .pk-lbl,
[data-bs-theme=dark] .sk-label      { color: #64748b; }

[data-bs-theme=dark] .ia            { background: #1e293b; border-color: #334155; color: #94a3b8; }
[data-bs-theme=dark] .ia:hover      { background: #0f172a; border-color: #475569; color: #f1f5f9; }
[data-bs-theme=dark] .ia.v:hover    { background: #1e3a5f; border-color: #2563eb; color: #60a5fa; }
[data-bs-theme=dark] .ia.e:hover    { background: #2d2000; border-color: #b45309; color: #fbbf24; }
[data-bs-theme=dark] .ia.d:hover    { background: #1f0f0f; border-color: #b91c1c; color: #f87171; }
[data-bs-theme=dark] .ia.s:hover    { background: #052e16; border-color: #15803d; color: #4ade80; }

[data-bs-theme=dark] .pagination .page-link {
  background: #1e293b;
  border-color: #334155;
  color: #94a3b8;
}
[data-bs-theme=dark] .pagination .page-link:hover {
  background: #1e3a5f;
  border-color: #2563eb;
  color: #60a5fa;
}
[data-bs-theme=dark] .pagination .page-item.active .page-link {
  background: #2563eb;
  border-color: #2563eb;
  color: #fff;
}

[data-bs-theme=dark] .btn-date-chip {
  background: #1e293b;
  border-color: #334155;
  color: #94a3b8;
}
[data-bs-theme=dark] .btn-date-chip:hover,
[data-bs-theme=dark] .btn-date-chip-active {
  background: #1e3a5f;
  border-color: #2563eb;
  color: #60a5fa;
}

[data-bs-theme=dark] .eq-section-title { border-bottom-color: #334155; }
[data-bs-theme=dark] .eq-upload-area   { background: #0f172a; border-color: #334155; color: #94a3b8; }
[data-bs-theme=dark] .eq-upload-area:hover { background: #1e293b; border-color: #2563eb; }