/* =========================================================
   MaintenanceApp — Design System (Phase 5)
   Goal: professional, consistent UI without breaking legacy markup.
   Loaded early; page-specific CSS can override.
   ========================================================= */

:root{
  /* Typography */
  --ds-font-sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, "Apple Color Emoji","Segoe UI Emoji";
  --ds-font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;

  /* Spacing scale */
  --ds-0: 0;
  --ds-1: 4px;
  --ds-2: 8px;
  --ds-3: 12px;
  --ds-4: 16px;
  --ds-5: 20px;
  --ds-6: 24px;
  --ds-7: 32px;

  /* Radius */
  --ds-r-sm: 10px;
  --ds-r: 14px;
  --ds-r-lg: 18px;

  /* Shadows */
  --ds-shadow-sm: 0 1px 2px rgba(0,0,0,.06), 0 1px 1px rgba(0,0,0,.04);
  --ds-shadow: 0 8px 24px rgba(0,0,0,.12);
  --ds-shadow-lg: 0 18px 48px rgba(0,0,0,.18);

  /* Borders */
  --ds-border: 1px solid rgba(255,255,255,.10);

  /* Colors — reuse existing tokens if present */
  --ds-bg: var(--color-bg, #0f172a);
  --ds-surface: var(--color-surface, rgba(255,255,255,.06));
  --ds-surface-2: var(--color-surface-2, rgba(255,255,255,.08));
  --ds-text: var(--color-text, rgba(255,255,255,.92));
  --ds-text-muted: var(--color-muted, rgba(255,255,255,.72));
  --ds-primary: var(--color-primary, #3b82f6);
  --ds-primary-hover: var(--color-primary-hover, #2563eb);
  --ds-danger: var(--color-danger, #ef4444);
  --ds-warning: var(--color-warning, #f59e0b);
  --ds-success: var(--color-success, #10b981);
}

html, body{
  font-family: var(--ds-font-sans);
  color: var(--ds-text);
  background: var(--ds-bg);
  text-rendering: geometricPrecision;
}

a{ color: inherit; }
a:hover{ opacity: .92; }

/* Base layout helpers */
.ds-container{
  max-width: 1200px;
  margin: 0 auto;
  padding: var(--ds-6);
}
.ds-stack{ display: grid; gap: var(--ds-4); }
.ds-row{ display:flex; gap: var(--ds-3); align-items:center; flex-wrap: wrap; }
.ds-spacer{ flex:1; }

/* Cards */
.ds-card,
.card,
.panel,
.box{
  background: var(--ds-surface);
  border: var(--ds-border);
  border-radius: var(--ds-r-lg);
  box-shadow: var(--ds-shadow-sm);
}
.ds-card{ padding: var(--ds-5); }
.ds-card-header{ display:flex; align-items:center; gap: var(--ds-3); margin-bottom: var(--ds-4); }
.ds-card-title{ font-size: 18px; font-weight: 700; letter-spacing: .2px; }
.ds-card-subtitle{ color: var(--ds-text-muted); font-size: 13px; }

/* Headings */
h1{ font-size: 26px; margin: 0 0 var(--ds-4); letter-spacing: .2px; }
h2{ font-size: 20px; margin: var(--ds-6) 0 var(--ds-3); }
h3{ font-size: 16px; margin: var(--ds-5) 0 var(--ds-2); }

/* Buttons (NO TRANSFORM - safe for click) */
.ds-btn,
.btn,
a.btn,
button,
input[type="submit"],
input[type="button"],
a.button{
  appearance: none;
  border: var(--ds-border);
  background: var(--ds-surface-2);
  color: var(--ds-text);
  border-radius: var(--ds-r);
  padding: 10px 12px;
  font-weight: 650;
  cursor: pointer;
  box-shadow: var(--ds-shadow-sm);
  transition: opacity .12s ease, background .12s ease, border-color .12s ease, box-shadow .12s ease;
  text-decoration: none;
  display:inline-flex;
  align-items:center;
  gap: 8px;
}
.ds-btn:hover,
button:hover,
input[type="submit"]:hover,
input[type="button"]:hover,
a.button:hover{
  border-color: rgba(255,255,255,.16);
  filter: brightness(1.05);
}
.ds-btn:active,
button:active,
input[type="submit"]:active,
input[type="button"]:active,
a.button:active{
  opacity: .92;
  filter: brightness(0.95);
}

.ds-btn-primary,
.btn-primary,
a.btn-primary{
  background: var(--ds-primary);
  border-color: rgba(255,255,255,.16);
}
.ds-btn-primary:hover,
.btn-primary:hover,
a.btn-primary:hover{
  background: var(--ds-primary-hover);
}
.ds-btn-danger,
.btn-danger,
a.btn-danger{
  background: rgba(239,68,68,.14);
  border-color: rgba(239,68,68,.36);
  color: #ffd1d1;
}
.ds-btn-danger:hover,
.btn-danger:hover,
a.btn-danger:hover{
  background: rgba(239,68,68,.20);
}
.ds-btn-info,
.btn-info,
a.btn-info{
  background: rgba(14,165,233,.14);
  border-color: rgba(14,165,233,.36);
  color: #d1f0ff;
}
.ds-btn-info:hover,
.btn-info:hover,
a.btn-info:hover{
  background: rgba(14,165,233,.20);
}
.ds-btn-ghost,
.btn-ghost{
  background: transparent;
  box-shadow: none;
}

.ds-btn-small{ padding: 7px 10px; border-radius: var(--ds-r-sm); font-weight: 600; }
.ds-btn-wide{ padding-left: 16px; padding-right: 16px; }

/* Inputs */
.ds-input,
input[type="text"],
input[type="number"],
input[type="date"],
input[type="time"],
input[type="email"],
input[type="password"],
select,
textarea{
  width: 100%;
  background: rgba(255,255,255,.06);
  border: var(--ds-border);
  color: var(--ds-text);
  border-radius: var(--ds-r);
  padding: 10px 12px;
  outline: none;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
}
textarea{ min-height: 110px; resize: vertical; }
.ds-input:focus,
input:focus,
select:focus,
textarea:focus{
  border-color: rgba(59,130,246,.55);
  box-shadow: 0 0 0 3px rgba(59,130,246,.18);
}

/* Form layout */
.ds-form{ display:grid; gap: var(--ds-4); }
.ds-field{ display:grid; gap: var(--ds-2); }
.ds-label, label{ color: var(--ds-text-muted); font-size: 13px; font-weight: 650; }
.ds-help{ color: var(--ds-text-muted); font-size: 12px; }

/* Tables */
.ds-table,
table{
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  background: var(--ds-surface);
  border: var(--ds-border);
  border-radius: var(--ds-r-lg);
  overflow: hidden;
  box-shadow: var(--ds-shadow-sm);
}
table thead th{
  background: rgba(255,255,255,.06);
  color: var(--ds-text-muted);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .08em;
  padding: 12px 12px;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
table tbody td{
  padding: 12px 12px;
  border-bottom: 1px solid rgba(255,255,255,.06);
}
table tbody tr:hover td{ background: rgba(255,255,255,.03); }
table tbody tr:last-child td{ border-bottom: none; }

/* Badges */
.ds-badge,
.badge{
  display:inline-flex;
  align-items:center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
  font-size: 12px;
  font-weight: 700;
}
.badge.success{ border-color: rgba(16,185,129,.35); background: rgba(16,185,129,.12); }
.badge.warning{ border-color: rgba(245,158,11,.35); background: rgba(245,158,11,.12); }
.badge.danger{ border-color: rgba(239,68,68,.35); background: rgba(239,68,68,.12); }
.badge.info{ border-color: rgba(59,130,246,.35); background: rgba(59,130,246,.12); }
.badge.secondary{ border-color: rgba(107,114,128,.35); background: rgba(107,114,128,.12); }

/* Compat classes existantes (interventions) */
.badge.status-ouvert, .badge.priority-haute{ border-color: rgba(239,68,68,.35); background: rgba(239,68,68,.12); }
.badge.status-en-cours, .badge.status-en_attente, .badge.priority-normale{ border-color: rgba(245,158,11,.35); background: rgba(245,158,11,.12); }
.badge.status-cloture, .badge.priority-basse{ border-color: rgba(16,185,129,.35); background: rgba(16,185,129,.12); }

/* Compat selects quick-update (interventions-quick-update.js) */
select.statut-ouvert, select.prio-haute{ border-color: rgba(239,68,68,.55); }
select.statut-en_cours, select.statut-en-attente, select.statut-en_attente, select.prio-normale{ border-color: rgba(245,158,11,.55); }
select.statut-cloture, select.prio-basse{ border-color: rgba(16,185,129,.55); }

/* Alerts / flash */
.ds-alert,
.flash-message{
  border-radius: var(--ds-r-lg);
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
  padding: 12px 14px;
  box-shadow: var(--ds-shadow-sm);
}
.flash-message.success{ border-color: rgba(16,185,129,.35); background: rgba(16,185,129,.10); }
.flash-message.error{ border-color: rgba(239,68,68,.35); background: rgba(239,68,68,.10); }
.flash-message.warning{ border-color: rgba(245,158,11,.35); background: rgba(245,158,11,.10); }

/* Topbar / nav harmonisation (works with existing classes) */
.main-header{
  position: sticky;
  top: 0;
  z-index: 8000;
  backdrop-filter: blur(10px);
  background: rgba(10,14,25,.72);
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.header-content{
  max-width: 1200px;
  margin: 0 auto;
  padding: 10px var(--ds-6);
  display:flex;
  align-items:center;
  gap: var(--ds-3);
}
.main-header .logo{
  font-weight: 900;
  letter-spacing: .2px;
  font-size: 15px;
}
.nav-drawer{
  border-right: 1px solid rgba(255,255,255,.08);
  background: rgba(10,14,25,.92);
}
.nav-drawer a{
  border-radius: 12px;
}
.nav-drawer a.active{
  background: rgba(59,130,246,.16);
  border: 1px solid rgba(59,130,246,.28);
}

/* Rows that should be clickable */
.row-clickable{ cursor: pointer; }
.row-clickable:hover{ background: rgba(255,255,255,.03); }

/* Page containers (legacy compatibility) */
.container,
.content,
.main-content{
  max-width: 1200px;
  margin: 0 auto;
  padding: var(--ds-6);
}

/* Desktop large: utilise l'espace dispo (sans casser les layouts) */
@media (min-width: 1400px){
  .header-content{ max-width: 1480px; }
  .container,
  .content,
  .main-content{ max-width: 1480px; }
}

@media (min-width: 1700px){
  .header-content{ max-width: 1600px; }
  .container,
  .content,
  .main-content{ max-width: 1600px; }
}

/* Ultra wide desktop: arrête de gaspiller de l'espace */
@media (min-width: 1900px){
  .header-content{ max-width: 1780px; }
  .container,
  .content,
  .main-content{ max-width: 1780px; }
}

/* Tables: un peu moins compact en grand écran */
@media (min-width: 1400px){
  .data-table th,
  .data-table td{ padding: 14px 16px; }
  .table-wrapper{ overflow-x: auto; }
}

/* Reduce visual noise on small screens */
@media (max-width: 760px){
  .header-content{ padding: 10px var(--ds-4); }
  .container, .content, .main-content{ padding: var(--ds-4); }
  table thead{ display:none; }
}

/* Plomberie system layout utilities */
.plomberie-equipements-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
    gap: var(--ds-4);
}

.plomberie-card-dates {
    margin: var(--ds-4) 0;
    padding: var(--ds-4);
    background: var(--ds-surface);
    border-radius: var(--ds-r);
    border: var(--ds-border);
}

.plomberie-date-item {
    display: flex;
    justify-content: space-between;
    margin: 6px 0;
    font-size: 13px;
    color: var(--ds-text-muted);
}

.plomberie-date-item .label {
    color: var(--ds-text-muted);
}

.plomberie-date-item .value {
    font-weight: 600;
    color: var(--ds-text);
}

.plomberie-date-item.overdue .value {
    color: var(--ds-danger);
    font-weight: 700;
}

.plomberie-alert-info {
    background: rgba(245,158,11,0.1);
    border-left: 4px solid var(--ds-warning);
    padding: var(--ds-3) var(--ds-4);
    margin: var(--ds-4) 0;
    font-size: 13px;
    border-radius: var(--ds-r);
}

@media (max-width: 768px) {
    .plomberie-equipements-grid {
        grid-template-columns: 1fr;
    }
}