<style>
:root{
  --panel:rgba(17,24,39,.6);
  --border:rgba(99,102,241,.35);
  --text:#e5e7eb;
  --muted:#9ca3af;
  --accent:#00e5ff;
  --accent2:#ff00e5;
  --glow:0 0 24px rgba(0,229,255,.25), 0 0 48px rgba(255,0,229,.15);
}

*{ box-sizing:border-box; }

body{
  background: radial-gradient(1200px 600px at 70% -20%, #111827 0%, #0b0f1a 40%, #070b13 100%) fixed;
  color:var(--text);
  font-family:system-ui,-apple-system,Segoe UI,Roboto;
  margin:0;
}

.wrap{
  max-width: 1500px;
  width: 98%;
  margin: 0 auto;
  padding: 16px;
}
.card{
  background:var(--panel);
  backdrop-filter:blur(10px) saturate(120%);
  -webkit-backdrop-filter:blur(10px) saturate(120%);
  border:1px solid var(--border);
  border-radius:18px;
  padding:12px;
  box-shadow:var(--glow);
}

/* Generic form rows that must never overflow */
.form-row{ align-items:flex-end; }
.form-row .field{ flex:1 1 220px; min-width:180px; }
.form-row .actions{ flex:0 0 auto; display:flex; gap:8px; flex-wrap:wrap; }
.form-row .actions .btn{ white-space:nowrap; }

@media (max-width:780px){
  .form-row .field{ flex:1 1 100%; min-width:0; }
  .form-row .actions{ width:100%; justify-content:flex-start; }
}

/* Filter row: keep buttons inside, allow wrapping nicely */
.filter-row{ align-items:flex-end; }
.filter-row .field{ flex:1 1 220px; min-width:180px; }
.filter-row .actions{ flex:0 0 auto; display:flex; gap:8px; flex-wrap:wrap; }
.filter-row .actions .btn{ white-space:nowrap; }

@media (max-width:780px){
  .filter-row .field{ flex:1 1 100%; min-width:0; }
  .filter-row .actions{ width:100%; justify-content:flex-start; }
}

.row{ display:flex; gap:10px; flex-wrap:wrap; }
.row > *{ min-width:0; flex:1 1 0; }

label{
  font-size:.9rem;
  color:#cbd5e1;
  display:block;
  margin:.5rem 0 .2rem;
}

input,select,textarea{
  display:block;
  width:100%;
  padding:.6rem .75rem;
  background:rgba(17,24,39,.7);
  border:1px solid var(--border);
  color:var(--text);
  border-radius:10px;
}

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

/* ? Better focus: consistent with theme */
input:focus,select:focus,textarea:focus{ outline:none; }
input:focus-visible,select:focus-visible,textarea:focus-visible{
  border-color: rgba(0,229,255,.55);
  box-shadow: 0 0 0 3px rgba(0,229,255,.16);
}

/* ======================================================
   ? BUTTONS (FIXED) — NO HTML CHANGE
   Replaces the "candy neon" look with glass + controlled glow
   ====================================================== */

.btn{
  appearance:none;
  -webkit-appearance:none;

  background: linear-gradient(180deg, rgba(2,6,23,.65), rgba(2,6,23,.30));
  border: 1px solid rgba(148,163,184,.20);
  border-radius: 10px;

  color:#e5e7eb;
  font-weight:800;
  padding:.48rem 1rem;
  font-size:.9rem;
  letter-spacing:.06em;
  text-transform:uppercase;
  font-family: 'Orbitron', system-ui, sans-serif;

  cursor:pointer;
  text-decoration:none;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.45rem;
  white-space:nowrap;

  box-shadow: 0 12px 26px rgba(0,0,0,.28);
  backdrop-filter: blur(8px) saturate(120%);
  -webkit-backdrop-filter: blur(8px) saturate(120%);

  transition:
    transform .12s ease,
    background .18s ease,
    border-color .18s ease,
    box-shadow .18s ease,
    filter .18s ease;
}

.btn:hover{
  transform: translateY(-1px);
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(2,6,23,.26));
  border-color: rgba(0,229,255,.30);
  box-shadow: 0 16px 32px rgba(0,0,0,.34);
}

.btn:active{
  transform: translateY(0);
  filter: brightness(.98);
}

.btn:focus-visible{
  outline:none;
  border-color: rgba(0,229,255,.60);
  box-shadow:
    0 0 0 3px rgba(0,229,255,.22),
    0 16px 32px rgba(0,0,0,.34);
}

.btn:disabled,
.btn[aria-disabled="true"]{
  opacity:.45;
  cursor:not-allowed;
  transform:none;
  box-shadow:none;
}

/* Muted button */
.btn.muted{
  background: rgba(2,6,23,.30);
  border: 1px solid rgba(148,163,184,.16);
  box-shadow: none;
}
.btn.muted:hover{
  background: rgba(255,255,255,.05);
  border-color: rgba(148,163,184,.22);
  box-shadow: 0 12px 24px rgba(0,0,0,.22);
}

/* Good / Bad keep meaning but match style */
.btn.good{
  background: linear-gradient(180deg, rgba(34,197,94,.20), rgba(2,6,23,.22));
  border: 1px solid rgba(34,197,94,.45);
  box-shadow: 0 0 16px rgba(34,197,94,.14), 0 12px 26px rgba(0,0,0,.28);
}
.btn.good:hover{
  border-color: rgba(34,197,94,.60);
  filter: brightness(1.04);
}

.btn.bad{
  background: linear-gradient(180deg, rgba(239,68,68,.18), rgba(2,6,23,.22));
  border: 1px solid rgba(239,68,68,.45);
  box-shadow: 0 0 16px rgba(239,68,68,.14), 0 12px 26px rgba(0,0,0,.28);
}
.btn.bad:hover{
  border-color: rgba(239,68,68,.62);
  filter: brightness(1.04);
}

.muted{ color:var(--muted); }

.badge{
  display:inline-block;
  margin:.2rem 0 .2rem 0;
  padding:.18rem .55rem;
  border-radius:999px;
  border:1px solid rgba(245,158,11,.55);
  background:rgba(245,158,11,.10);
  color:#fde68a;
  font-weight:800;
  font-size:.82rem;
}

.hr{ height:1px; background:rgba(99,102,241,.25); margin:10px 0; }

.notice-ok{
  border-color:rgba(16,185,129,.65) !important;
  box-shadow:0 0 22px rgba(16,185,129,.15) !important;
}
.notice-warn{
  border-color:rgba(245,158,11,.65) !important;
  box-shadow:0 0 22px rgba(245,158,11,.12) !important;
}
.notice-err{
  border-color:rgba(239,68,68,.65) !important;
  box-shadow:0 0 22px rgba(239,68,68,.12) !important;
}

.table th{
  white-space: nowrap;
  word-break: normal !important;
  overflow-wrap: normal !important;
}

.table td{
  word-break: break-word; /* autorisé seulement pour le contenu */
}

.table{
  table-layout: auto; /* IMPORTANT */
}

.small{ font-size:.88rem; }

.pill{
  display:inline-block;
  padding:.15rem .55rem;
  border-radius:999px;
  border:1px solid rgba(99,102,241,.35);
  background:rgba(99,102,241,.10);
  font-weight:800;
  font-size:.82rem;
}

/* Status badges */
.st-open{ border-color:rgba(245,158,11,.55)!important; background:rgba(245,158,11,.10)!important; color:#fde68a!important; }
.st-waiting{ border-color:rgba(59,130,246,.55)!important; background:rgba(59,130,246,.10)!important; color:#bfdbfe!important; }
.st-answered{ border-color:rgba(168,85,247,.55)!important; background:rgba(168,85,247,.10)!important; color:#e9d5ff!important; }
.st-resolved{ border-color:rgba(34,197,94,.55)!important; background:rgba(34,197,94,.10)!important; color:#bbf7d0!important; }
.st-closed{ border-color:rgba(107,114,128,.55)!important; background:rgba(107,114,128,.10)!important; color:#e5e7eb!important; }

/* Priority badges */
.pr-low{ border-color:rgba(107,114,128,.55)!important; background:rgba(107,114,128,.10)!important; color:#e5e7eb!important; }
.pr-normal{ border-color:rgba(99,102,241,.35)!important; background:rgba(99,102,241,.10)!important; color:#e0e7ff!important; }
.pr-high{ border-color:rgba(245,158,11,.65)!important; background:rgba(245,158,11,.12)!important; color:#fde68a!important; }
.pr-urgent{ border-color:rgba(239,68,68,.65)!important; background:rgba(239,68,68,.12)!important; color:#fecaca!important; }

/* Message cards + role colors */
.msg{
  border:1px solid rgba(99,102,241,.22);
  border-radius:14px;
  padding:10px;
  margin:8px 0;
  background:rgba(17,24,39,.35);
}
.msg.resident{
  border-color: rgba(99,102,241,.22);
  background: rgba(17,24,39,.35);
}
.msg.admin{
  border-color: rgba(239,68,68,.45);
  background: rgba(239,68,68,.08);
  box-shadow: 0 0 18px rgba(239,68,68,.10);
}
.msg.admin .meta{ color:#fecaca; }

.msg .meta{
  color:#cbd5e1;
  font-weight:800;
  font-size:.9rem;
}
.msg .sub{
  color:var(--muted);
  font-size:.85rem;
  margin-top:2px;
}
.msg pre{
  white-space:pre-wrap;
  word-break:break-word;
  margin:8px 0 0 0;
}

.kv a{ color:var(--accent); }

.audit{
  border:1px solid rgba(99,102,241,.18);
  border-radius:12px;
  padding:10px;
  background:rgba(17,24,39,.25);
}
.audit .rowitem{
  padding:6px 0;
  border-bottom:1px solid rgba(99,102,241,.12);
}
.audit .rowitem:last-child{ border-bottom:none; }
/* Layout page: liste + panneau droite */
.page-grid{
  display:grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  gap: 12px;
  align-items:start;
}

/* Sur tablette/mobile: tout repasse en 1 colonne */
@media (max-width: 1100px){
  .page-grid{ grid-template-columns: 1fr; }
}

/* Panneau admin à droite: sticky (optionnel mais super utile) */
.sticky{
  position: sticky;
  top: 90px; /* ajuste selon ton header */
}
/* ===== DASHBOARD LAYOUT ===== */

.dashboard{
  display:grid;
  grid-template-columns: minmax(0,1fr) 360px;
  gap:16px;
  align-items:start;
}

@media (max-width:1100px){
  .dashboard{
    grid-template-columns:1fr;
  }
}

.sidebar{
  display:flex;
  flex-direction:column;
  gap:16px;
}

.section-title{
  font-size:1.2rem;
  font-weight:900;
  margin-bottom:8px;
  letter-spacing:.05em;
}

.card.clean{
  box-shadow:none;
  border:1px solid rgba(99,102,241,.25);
}
/* Prevent badge text from splitting (high -> hi/gh) */
.pill, .badge{
  white-space: nowrap !important;
  word-break: normal !important;
  overflow-wrap: normal !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1.1;
}

.table-wrap{
  width:100%;
  overflow:hidden; /* aucun scroll */
}

.table{
  width:100%;
  table-layout:fixed; /* IMPORTANT */
  border-collapse:collapse;
}

.table th,
.table td{
  padding:10px 8px;
  vertical-align:top;
  word-wrap:break-word;
}

/* Colonnes fixes intelligentes */
.table th:nth-child(1),
.table td:nth-child(1){
  width:70px; /* ID */
}

.table th:last-child,
.table td:last-child{
  width:90px; /* bouton View */
}

/* Texte long propre */.tabs{
  display:inline-flex;
  gap:6px;
  padding:4px;
  border-radius:999px;
  border:1px solid rgba(99,102,241,.25);
  background:rgba(17,24,39,.25);
}

.tab{
  padding:.35rem .75rem;
  border-radius:999px;
  text-decoration:none;
  font-weight:600;        /* plus léger */
  font-size:.85rem;       /* plus petit */
  letter-spacing:normal;  /* plus naturel */
  text-transform:none;    /* plus en majuscules */
  color:#cbd5e1;
  border:1px solid transparent;
  background:transparent;
  transition:all .15s ease;
}

.tab:hover{
  background:rgba(255,255,255,.05);
}

.tab.active{
  color:#fff;
  background:rgba(99,102,241,.25);
  border-color:rgba(99,102,241,.45);
}

.table td{
  overflow:hidden;
  text-overflow:ellipsis;
}
/* =========================
   FIX FINAL (override)
   ========================= */

.card{ padding:10px !important; border-radius:14px !important; }

/* Dashboard */
.dashboard{
  display:grid !important;
  grid-template-columns: minmax(0,1fr) 320px !important;
  gap:12px !important;
  align-items:start !important;
}
@media (max-width:1100px){
  .dashboard{ grid-template-columns:1fr !important; }
}

.tabs{ padding:3px !important; gap:4px !important; }
.tab{ padding:.25rem .55rem !important; font-size:.82rem !important; font-weight:700 !important; }

.table-wrap{ width:100% !important; overflow:hidden !important; }

.table{
  width:100% !important;
  border-collapse:collapse !important;
  table-layout: fixed !important;  /* <-- une seule stratégie */
}

.table th{
  white-space:nowrap !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
  word-break:normal !important;
  overflow-wrap:normal !important;
  font-size:.85rem !important;
  padding:8px 10px !important;
}

.table td{
  font-size:.85rem !important;
  padding:8px 10px !important;
  vertical-align:top !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
  white-space:nowrap !important;   
}

.table td:nth-child(2), /* Subject */
.table td:nth-child(9)  /* Creator */
{
  white-space:normal !important;
  overflow-wrap:anywhere !important;
  word-break:break-word !important;
}

.table th:nth-child(1), .table td:nth-child(1){ width:70px !important; }   /* ID */
.table th:nth-child(2), .table td:nth-child(2){ width:220px !important; }  /* Subject */
.table th:nth-child(3), .table td:nth-child(3){ width:140px !important; }  /* Category */
.table th:nth-child(4), .table td:nth-child(4){ width:120px !important; }  /* Status */
.table th:nth-child(5), .table td:nth-child(5){ width:110px !important; }  /* Priority */
.table th:nth-child(6), .table td:nth-child(6){ width:170px !important; }  /* Assigned */
.table th:nth-child(7), .table td:nth-child(7){ width:160px !important; }  /* Last reply */
.table th:nth-child(8), .table td:nth-child(8){ width:140px !important; }  /* Updated */
.table th:nth-child(9), .table td:nth-child(9){ width:180px !important; }  /* Creator */
.table th:nth-child(10),.table td:nth-child(10){ width:90px !important; }  /* Open */

.pill, .badge{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  white-space:nowrap !important;
  word-break:normal !important;
  overflow-wrap:normal !important;
  line-height:1.1 !important;
}

.table td pre{ white-space:pre-wrap !important; }
.card{
  overflow: hidden; 
}


.table-wrap{
  border-radius: 12px;
  overflow: hidden;
}

.table{
  border-radius: 12px;
  overflow: hidden;
}

.table th, .table td{
  background-clip: padding-box;
}

</style>
