/*
 * Renov'x brand theme — overrides Tabler defaults.
 *
 * Identity: black sidebar (already enforced by ``data-bs-theme="dark"`` on the
 * navbar) + orange accent on every primary control. Works in both light and
 * dark page themes; the orange stays the same so the brand reads identically
 * across modes.
 *
 * The ``--tblr-primary`` family drives buttons, links, focus rings, switches,
 * progress bars and the ``.text-primary`` / ``.bg-primary`` utility classes.
 * Overriding the variables propagates the change without touching component
 * styles individually.
 */

:root,
[data-bs-theme="light"],
[data-bs-theme="dark"] {
  --tblr-primary: #f76707;
  --tblr-primary-rgb: 247, 103, 7;
  --tblr-primary-fg: #ffffff;
  --tblr-link-color: #f76707;
  --tblr-link-color-rgb: 247, 103, 7;
  --tblr-link-hover-color: #c4530a;
  --tblr-link-hover-color-rgb: 196, 83, 10;
}

.btn-primary,
.btn-primary:focus {
  --tblr-btn-bg: #f76707;
  --tblr-btn-border-color: #f76707;
  --tblr-btn-hover-bg: #d85a06;
  --tblr-btn-hover-border-color: #cc5505;
  --tblr-btn-active-bg: #cc5505;
  --tblr-btn-active-border-color: #b04a04;
  --tblr-btn-disabled-bg: #f76707;
  --tblr-btn-disabled-border-color: #f76707;
}

.btn-outline-primary {
  --tblr-btn-color: #f76707;
  --tblr-btn-border-color: #f76707;
  --tblr-btn-hover-bg: #f76707;
  --tblr-btn-hover-border-color: #f76707;
  --tblr-btn-active-bg: #cc5505;
  --tblr-btn-active-border-color: #cc5505;
}

.nav-link.active,
.nav-item.active > .nav-link {
  color: #f76707;
}

/*
 * Theme toggle button — placed in the admin page-header and the collaborator
 * navbar. The two icons are stacked and shown via ``data-theme-mode`` on the
 * root element so the user sees the current mode (sun = light, moon = dark).
 */

.theme-toggle {
  --bs-btn-padding-x: 0.5rem;
  --bs-btn-padding-y: 0.5rem;
  line-height: 1;
}

.theme-toggle .icon {
  width: 20px;
  height: 20px;
  display: none;
}

[data-theme-mode="light"] .theme-toggle .icon-light,
[data-theme-mode="dark"] .theme-toggle .icon-dark {
  display: inline-block;
}

/* Login page brand block */
.login-brand {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.75rem;
}

.login-brand img {
  max-height: 64px;
  max-width: 220px;
  height: auto;
  width: auto;
}

/* TASK-166 — branded login: bigger, highlighted logo + theme-aware swap.
   Clean solid background (the earlier blueprint grid read as wireframe). */
.login-brand .login-logo {
  max-height: 112px;
  max-width: 280px;
  height: auto;
  width: auto;
}
.login-logo--dark {
  display: none;
}
[data-bs-theme="dark"] .login-logo--light {
  display: none;
}
[data-bs-theme="dark"] .login-logo--dark {
  display: inline-block;
}

/* Alpine.js x-cloak — hide elements until Alpine initialises so x-show
   conditions do not flash on first paint. */
[x-cloak] { display: none !important; }

/* Planning — the "Qui" column (TASK-146).
   Lists employees and external intervenants, so it carries an extra
   "ext." badge next to the initiales. Desktop also shows the surname,
   which needs the wider track; mobile hides the surname (d-none
   d-md-inline) and must NOT pay for the desktop width — every pixel
   here is taken from the day columns, which are already tight at 375px
   in week mode. Set here rather than inline on the <th> because an
   inline width would win over this media query. */
.planning-who-col { width: 140px; }

@media (min-width: 768px) {
  .planning-who-col { width: 170px; }
}

/* =====================================================================
 * TASK-165 — Design system « Chantier » (refonte GUI)
 * Purement présentationnel. Étend Tabler via ses variables + composants.
 * Neutres béton chauds, orange sécurité conservé, profondeur douce.
 * ===================================================================== */

/* --- Neutres chauds : on réchauffe le fond/surfaces/bordures de Tabler --- */
[data-bs-theme="light"] {
  --tblr-body-bg: #f4f1ec;
  --tblr-bg-surface: #ffffff;
  --tblr-bg-surface-secondary: #efeae3;
  --tblr-border-color: #e6e0d7;
  --tblr-border-color-translucent: rgba(30, 22, 10, 0.08);
  --tblr-body-color: #1a1712;
}
[data-bs-theme="dark"] {
  --tblr-body-bg: #14120d;
  --tblr-bg-surface: #1e1a13;
  --tblr-bg-surface-secondary: #262117;
  /* Tabler ships these two as a COOL blue-grey (#151f2c) in dark mode, which
     clashes with our warm surfaces on form inputs and table headers
     (``--tblr-bg-forms`` drives .form-control, ``--tblr-bg-surface-tertiary``
     drives .table thead th). Warm them up so both read consistently. */
  --tblr-bg-surface-tertiary: #211d15;
  --tblr-bg-forms: #211d15;
  --tblr-border-color: #2c271d;
  --tblr-border-color-translucent: rgba(255, 255, 255, 0.07);
  --tblr-body-color: #f1ece2;
}

/* --- Cartes : rayon plus doux + ombre légère (hover réservé à .card-lift) --- */
.card {
  border-radius: 14px;
  box-shadow: 0 1px 2px rgba(30, 22, 10, 0.04), 0 8px 24px -10px rgba(30, 22, 10, 0.10);
}
[data-bs-theme="dark"] .card {
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 10px 26px -12px rgba(0, 0, 0, 0.5);
}
.card-lift {
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.card-lift:hover {
  transform: translateY(-3px);
  box-shadow: 0 4px 8px rgba(30, 22, 10, 0.06), 0 16px 34px -12px rgba(30, 22, 10, 0.18);
}
@media (prefers-reduced-motion: reduce) {
  .card-lift:hover { transform: none; }
}

/* --- Contrôles un poil plus arrondis --- */
.btn { border-radius: 10px; }
.form-control, .form-select { border-radius: 10px; }

/* --- Typographie : titres serrés + chiffres tabulaires --- */
h1, h2, h3, .h1, .h2, .h3, .page-title {
  letter-spacing: -0.02em;
}
.num, .text-tabular {
  font-variant-numeric: tabular-nums;
}

/* --- Sidebar : fond charbon chaud + en-têtes de groupe + actif souligné --- */
.navbar-vertical {
  background-color: #17140f;
}
.navbar-vertical .renovx-nav-sec {
  padding: 1rem 0.9rem 0.3rem;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: rgba(233, 221, 208, 0.42);
  pointer-events: none;
}
.navbar-vertical .renovx-nav-sec:first-of-type {
  padding-top: 0.4rem;
}
/* Barre orange sur l'entrée active (conserve la couleur + le hover Tabler) */
.navbar-vertical .nav-link {
  border-radius: 9px;
  position: relative;
}
.navbar-vertical .nav-link.active::before {
  content: "";
  position: absolute;
  left: 0;
  top: 8px;
  bottom: 8px;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: #f76707;
}

/* --- Pastilles de statut réutilisables (teintées) --- */
.pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 700;
  padding: 4px 11px;
  border-radius: 999px;
  line-height: 1.2;
}
.pill::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
}
.pill-success { color: #2f9e44; background: rgba(47, 158, 68, 0.12); }
.pill-danger  { color: #e03131; background: rgba(224, 49, 49, 0.12); }
.pill-warning { color: #e8891a; background: rgba(232, 137, 26, 0.14); }
.pill-info    { color: #1971c2; background: rgba(25, 113, 194, 0.12); }

/* --- Skeleton de chargement (primitive réutilisable) --- */
.skeleton {
  border-radius: 8px;
  background: linear-gradient(
    90deg,
    var(--tblr-bg-surface-secondary) 25%,
    var(--tblr-border-color) 37%,
    var(--tblr-bg-surface-secondary) 63%
  );
  background-size: 400% 100%;
  animation: renovx-shimmer 1.4s ease infinite;
}
@keyframes renovx-shimmer {
  0% { background-position: 100% 0; }
  100% { background-position: 0 0; }
}
@media (prefers-reduced-motion: reduce) {
  .skeleton { animation: none; }
}

/* --- Toasts (conteneur + carte) — pilotés par window.renovxToast() --- */
.renovx-toasts {
  position: fixed;
  bottom: 1rem;
  right: 1rem;
  z-index: 1090;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  max-width: min(360px, 92vw);
}
.renovx-toast {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--tblr-bg-surface);
  color: var(--tblr-body-color);
  border: 1px solid var(--tblr-border-color);
  border-left: 4px solid #f76707;
  border-radius: 11px;
  box-shadow: 0 8px 28px -10px rgba(30, 22, 10, 0.3);
  padding: 12px 15px;
  font-size: 13.5px;
  font-weight: 600;
  animation: renovx-toast-in 0.2s ease;
}
.renovx-toast.is-success { border-left-color: #2f9e44; }
.renovx-toast.is-danger { border-left-color: #e03131; }
.renovx-toast.is-out { opacity: 0; transform: translateY(6px); transition: opacity 0.25s ease, transform 0.25s ease; }
@keyframes renovx-toast-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .renovx-toast { animation: none; }
}