/* =========================================================
   X Detailing — Status Board Styles (Dark UI, theme-safe)
   ========================================================= */

/* Tokens */
:root{
  --xds-card: #151922;
  --xds-card-2: #131722;
  --xds-stroke: rgba(255,255,255,0.06);
  --xds-text: #e7ecf2;
  --xds-muted: #9aa4b2;
  --xds-shadow: 0 8px 30px rgba(0,0,0,0.35);

  --xds-green:  #10b981;
  --xds-red:    #ef4444;
  --xds-yellow: #eab308;
  --xds-blue:   #3b82f6;

  --xds-purpleGlow: rgba(139,92,246,0.06);
  --xds-cyanGlow:   rgba(34,211,238,0.06);
}

/* Board container */
.xds-board{
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color: var(--xds-text);
  display: grid;
  gap: 18px;
}

/* Legend */
.xds-legend{ display:flex; gap:12px; flex-wrap:wrap; margin:6px 0 2px; }
.xds-badge{
  display:inline-flex; align-items:center; line-height:1;
  padding:6px 12px; border-radius:999px;
  font-size:12px; font-weight:800; letter-spacing:.2px;
  color:#0b0e13; background:#e5e7eb;
  box-shadow: inset 0 -1px 0 rgba(255,255,255,0.35);
}
.xds-open{    background:linear-gradient(180deg,#1ee6a7,var(--xds-green));  color:#042318; }
.xds-closed{  background:linear-gradient(180deg,#ff6b6b,var(--xds-red));    color:#2a0c0c; }
.xds-weather{ background:linear-gradient(180deg,#ffd54a,var(--xds-yellow)); color:#2a2104; }
.xds-unknown{ background:linear-gradient(180deg,#77aaff,var(--xds-blue));   color:#07162f; }

/* Card */
.xds-row{
  position:relative;
  display:grid; grid-template-columns:1.3fr 1fr auto; gap:22px;
  padding:18px; border-radius:16px; border:1px solid var(--xds-stroke);
  background:
    radial-gradient(1200px 300px at -200px -200px, var(--xds-purpleGlow), transparent 60%),
    radial-gradient(800px 200px at 120% 0%, var(--xds-cyanGlow), transparent 55%),
    var(--xds-card);
  box-shadow:var(--xds-shadow);
}

/* Left colored strip */
.xds-row.xds-open::before,
.xds-row.xds-closed::before,
.xds-row.xds-weather::before,
.xds-row.xds-unknown::before{
  content:""; position:absolute; inset:0 auto 0 0; width:4px; border-radius:16px 0 0 16px;
}
.xds-row.xds-open::before{    background:var(--xds-green);  box-shadow:0 0 10px rgba(16,185,129,0.55); }
.xds-row.xds-closed::before{  background:var(--xds-red);    box-shadow:0 0 10px rgba(239,68,68,0.50); }
.xds-row.xds-weather::before{ background:var(--xds-yellow); box-shadow:0 0 10px rgba(234,179,8,0.50); }
.xds-row.xds-unknown::before{ background:var(--xds-blue);   box-shadow:0 0 10px rgba(59,130,246,0.50); }

/* LEFT column */
.xds-left{ min-width:260px; }
.xds-left .xds-title{ display:flex; gap:.5rem; align-items:baseline; margin-bottom:8px; }
.xds-left .xds-title .xds-name{
  font-size:18px; font-weight:800; line-height:1.2; color:#fff; text-shadow:0 1px 0 rgba(0,0,0,.28);
}
.xds-left .xds-title .xds-type{
  font-size:12px; font-weight:700; opacity:.75; color:#cbd5e1;
  padding:2px 8px; border-radius:999px;
  background:rgba(255,255,255,0.06); border:1px solid var(--xds-stroke);
}
.xds-sub{ color:var(--xds-muted); margin-top:8px; }

/* MID column */
.xds-mid{ display:flex; flex-direction:column; gap:10px; }
.xds-reason{
  font-size:12px; color:#ffe08a;
  background:rgba(234,179,8,0.12); border:1px solid rgba(234,179,8,0.35);
  border-radius:8px; padding:6px 10px; width:max-content;
}
.xds-today{ font-size:14px; color:#c8d0da; }

/* Hours accordion/table */
.xds-hours summary{ cursor:pointer; font-weight:700; color:#d7def0; }
.xds-hours[open] summary{ color:#fff; }
.xds-hours-table{
  margin-top:10px; width:100%; border-collapse:collapse;
  border:1px solid var(--xds-stroke); background:var(--xds-card-2);
  border-radius:10px; overflow:hidden;
}
.xds-hours-table th,
.xds-hours-table td{
  text-align:left; padding:8px 10px; border-bottom:1px solid var(--xds-stroke);
}
.xds-hours-table th{ width:62px; color:#9fb0c6; background:rgba(255,255,255,0.02); }

/* RIGHT column / buttons */
.xds-right{ display:flex; flex-direction:column; align-items:flex-end; gap:10px; }
.xds-report{
  border:1px solid var(--xds-stroke); border-radius:12px;
  padding:10px 14px; font-weight:800; cursor:pointer; color:#fff;
  background:linear-gradient(180deg,#1a2231,#0f1523);
  box-shadow:inset 0 -1px 0 rgba(255,255,255,0.06), var(--xds-shadow);
  transition:transform .08s ease, box-shadow .2s ease, filter .15s ease;
}
.xds-report:hover{ transform:translateY(-1px); filter:brightness(1.05); }
.xds-report:active{ transform:translateY(0);    filter:brightness(0.98); }
.xds-report:disabled{ opacity:.65; cursor:default; filter:none; }

.xds-row.xds-open    .xds-report[data-vote="open"]{
  background:linear-gradient(180deg,#2af0b8,var(--xds-green)); color:#062418;
  box-shadow:0 6px 22px rgba(16,185,129,0.35), inset 0 -1px 0 rgba(255,255,255,0.25);
}
.xds-row.xds-closed  .xds-report[data-vote="closed"]{
  background:linear-gradient(180deg,#ff7474,var(--xds-red)); color:#2a0c0c;
  box-shadow:0 6px 22px rgba(239,68,68,0.35), inset 0 -1px 0 rgba(255,255,255,0.25);
}
.xds-row.xds-weather .xds-report[data-vote="closed"]{
  background:linear-gradient(180deg,#ffd866,var(--xds-yellow)); color:#2a2104;
  box-shadow:0 6px 22px rgba(234,179,8,0.35), inset 0 -1px 0 rgba(255,255,255,0.25);
}

.xds-report-msg{ font-size:12px; min-height:16px; color:#aab4c0; }

/* Links */
.xds-row a{ color:#a8c0ff; text-decoration:none; }
.xds-row a:hover{ color:#c9d8ff; text-shadow:0 0 6px rgba(168,192,255,0.35); }

/* Responsive */
@media (max-width:1024px){
  .xds-row{ grid-template-columns:1fr; }
  .xds-right{ align-items:flex-start; }
}