/* ===== STAR — style.css ===== */
:root{
  --bg:#fff;
  --text:#111;
  --muted:#6b7280;
  --border:#e5e7eb;
  --card:#fff;
  --primary:#0d47a1;      /* bleu boutons */
  --primary-weak:#e3f2fd; /* fond léger bleu */
  --accent:#d32f2f;       /* accent STAR rouge */
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

/* Container & layout */
.container{
  max-width:1100px;
  margin:24px auto;
  padding:0 16px;
}
.header{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:16px;
  margin:16px 0 20px;
}
.header .title{
  font-size:22px;
  font-weight:700;
  margin:0;
}
.small{font-size:.875rem;color:var(--muted)}
.logo img{max-width:100%;height:auto;display:block}

/* Typo */
h1{font-size:28px;margin:0 0 12px}
h2{font-size:22px;margin:20px 0 10px}
h3{font-size:18px;margin:18px 0 8px}
a{color:var(--primary);text-decoration:none}
a:hover{text-decoration:underline}

/* Cards */
.card{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:14px;
  padding:16px;
  box-shadow:0 1px 4px rgba(0,0,0,.06);
  margin:12px 0;
}

/* Buttons */
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  padding:10px 16px;border-radius:12px;border:1px solid transparent;
  font-weight:600;cursor:pointer;user-select:none;
}
.btn:disabled{opacity:.6;cursor:not-allowed}
.btn.primary{background:var(--primary);color:#fff}
.btn.primary:hover{filter:brightness(.95)}
.btn.light{background:#fff;border-color:var(--border);color:var(--text)}
.btn.light:hover{background:#f9fafb}
.btn.accent{background:var(--accent);color:#fff}

/* Tables */
.table{width:100%;border-collapse:collapse}
.table th,.table td{
  padding:.6rem .7rem;
  border-bottom:1px solid var(--border);
  text-align:left;
  vertical-align:middle;
}
.table th{font-weight:700;background:#fafafa}
.table tr:hover td{background:#fcfcfc}

/* Badges (ton extrait + léger renfort de visibilité) */
.badge{display:inline-block;padding:.25rem .5rem;border-radius:9999px;font-weight:600;line-height:1}
.badge.vip{background:#fdecea;color:#b71c1c;border:1px solid #ffcdd2}           /* rouge clair */
.badge.premium{background:#e3f2fd;color:#0d47a1;border:1px solid #bbdefb}       /* bleu clair */
.badge.standard{background:#f3f4f6;color:#374151;border:1px solid #e5e7eb}
.badge.gratuit{background:#f9fafb;color:#6b7280;border:1px solid #e5e7eb}

/* Utilities */
.row{display:flex;gap:12px;flex-wrap:wrap}
.space{height:12px}
hr{border:0;border-top:1px solid var(--border);margin:16px 0}

/* Responsive */
@media (max-width:640px){
  h1{font-size:24px}
  .header{flex-direction:column;align-items:flex-start}
  .table th,.table td{padding:.55rem .5rem}
}
/* --- Formulaire Nouveau ticket --- */
.row { display:flex; gap:12px; flex-wrap:wrap; }
.row > div { flex:1; min-width:220px; }

label { display:block; margin:4px 0 6px; }
label.small { color:var(--muted); font-size:.9rem; }

input[type="text"],
input[type="email"],
input[type="tel"],
input[type="date"],
input[type="number"],
select,
textarea{
  width:100%;
  padding:10px;
  border:1px solid var(--border);
  border-radius:12px;
  background:#fff;
}

textarea{ min-height:90px; resize:vertical; }

.actions{
  margin-top:8px;
  display:flex; gap:8px; align-items:center;
}
/* --- Statuts tickets --- */
.lbl {
  display:inline-block;
  padding:4px 10px;
  border-radius:12px;
  font-weight:600;
  font-size:.85rem;
  text-transform:capitalize;
}

.lbl.nouveau     { background:#e0f2fe; color:#0369a1; }    /* bleu clair */
.lbl.en_cours    { background:#fef9c3; color:#a16207; }   /* jaune */
.lbl.en_attente  { background:#f3e8ff; color:#6b21a8; }   /* violet */
.lbl.reporte     { background:#fef2f2; color:#b91c1c; }   /* rouge clair */
.lbl.resolu      { background:#dcfce7; color:#166534; }   /* vert */
.lbl.annule      { background:#e5e7eb; color:#374151; }   /* gris */


/* ===== STAR FINAL PATCH v5.3 — DO NOT REMOVE (overrides) ===== */

/* Header — logo fixé */
header { padding: 8px 0; margin-bottom: 8px; }
header .brand { display:flex; align-items:center; justify-content:center; gap:12px; flex-wrap:wrap; text-align:center; }
header .brand .logo-img { display:inline-block; height:auto !important; width:auto !important; max-height:90px; max-width:260px; }
@media (max-width:768px){ header .brand .logo-img{ max-height:72px; max-width:180px; } }

/* Card base (au cas où) */
.card{ background: var(--card); border:1px solid var(--border); border-radius:12px; padding:12px; box-shadow:0 1px 2px rgba(0,0,0,.05); margin:12px 0; }

/* Table aux dimensions raisonnables */
table { width:100%; border-collapse:collapse; table-layout:auto; }
th,td{ padding:10px 8px; border-bottom:1px solid #eee; vertical-align:middle; }
th{ text-align:left; font-weight:700; }

/* Colonne Actions — compacter et neutraliser le min-width inline */
td:last-child > div[style*="min-width"]{ min-width:0 !important; width:100% !important; }
td:last-child form{ display:flex; flex-wrap:wrap; gap:6px; align-items:center; margin-bottom:6px; }
td:last-child select,
td:last-child input[type="text"],
td:last-child input[type="date"]{ height:36px; padding:6px 10px; font-size:.9em; }
td:last-child .btn, td:last-child a.btn, td:last-child button{ height:36px; line-height:36px; padding:0 12px; font-size:.9em; }

/* Barre de filtres (ligne sur desktop, colonne sur mobile) */
.card .filters{ display:grid; grid-template-columns:minmax(180px,220px) minmax(180px,220px) auto; gap:12px; align-items:end; }
.card .filters label{ display:block; font-size:.85em; color:#6b7280; }
.card .filters .btn{ height:36px; line-height:36px; padding:0 12px; white-space:nowrap; }
@media (max-width:992px){ .card .filters{ grid-template-columns:1fr 1fr; } }
@media (max-width:768px){ .card .filters{ grid-template-columns:1fr !important; } }

/* Badges */
.badge{ display:inline-block; padding:4px 10px; border-radius:999px; font-weight:700; }

/* Statuts (si helpers produisent .lbl et classes statut) */
.lbl{ display:inline-block; padding:2px 8px; border-radius:999px; font-weight:700; font-size:.85em; background:#f3f4f6; color:#374151; }
.lbl.en_cours{ background:#fff9c4; color:#5d4037; }
.lbl.en_attente{ background:#e1f5fe; color:#01579b; }
.lbl.resolu{ background:#c8e6c9; color:#1b5e20; }
.lbl.reporte{ background:#ffe0b2; color:#e65100; }
.lbl.annule{ background:#ef9a9a; color:#b71c1c; }

/* ===== Mobile stable ===== */
@media (max-width:768px){
  html,body{ width:100% !important; max-width:100% !important; overflow-x:hidden !important; -webkit-text-size-adjust:100%; }
  .wrap,.container,main{ width:100% !important; max-width:100% !important; min-width:0 !important; margin:0 auto !important; padding-left:12px !important; padding-right:12px !important; overflow:visible !important; }

  /* Tables: lisibles, avec scroll horizontal dans leur carte si trop larges */
  .card{ overflow-x:auto !important; -webkit-overflow-scrolling:touch; }
  .card > table{ table-layout:fixed !important; width:100% !important; min-width:900px; border-spacing:0 !important; }

  /* Texte horizontal lisible (anti “vertical”) */
  th,td{ writing-mode:horizontal-tb !important; text-orientation:mixed !important; transform:none !important; white-space:normal !important; word-break:normal !important; overflow-wrap:anywhere; }

  /* Colonne Actions en pile */
  td:last-child{ display:block !important; white-space:normal !important; }
  td:last-child form{ display:grid !important; grid-template-columns:1fr !important; gap:8px !important; }
  td:last-child select, td:last-child input[type="text"], td:last-child input[type="date"], td:last-child .btn, td:last-child a.btn, td:last-child button{ width:100% !important; height:38px; line-height:38px; font-size:.95em; }
}
.badge-garantie {
  background: #10b981; /* vert doux */
  color: #fff;
}