/* style.css — electrify.tw ADAS 事故彙整 */

/* ===== 主題變數 ===== */
:root{
  --bg:#0b1020;            /* 背景深藍 */
  --panel:#111831;         /* 卡片底色 */
  --muted:#9aa4c4;         /* 次要文字 */
  --text:#e9ecf5;          /* 主要文字 */
  --accent:#6ea8fe;        /* 藍色重點 */
  --accent2:#9bdf9b;       /* 綠色重點 */
  --line:#1e2a56;          /* 邊框線 */
  --tableBg:#0f1836;       /* 表格底色 */
  --stripe:#13204a;        /* 表格交錯色 */
  --hover:#162a64;         /* 表格 hover */
}

/* ===== 基本設定 ===== */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background:linear-gradient(120deg,#0b1020,#0e1430 35%,#0b1020);
  color:var(--text);
  font-family:ui-sans-serif,system-ui,-apple-system,"Noto Sans TC",Segoe UI,Roboto,Helvetica,Arial,"Apple Color Emoji","Segoe UI Emoji";
}

/* ===== 頁首 ===== */
.site-header{
  position:sticky;top:0;z-index:1030;
  padding:.85rem 0;
  border-bottom:1px solid #1a2346;
  background:#0e1530cc;backdrop-filter:saturate(140%) blur(8px);
}
.site-title{
  margin:0;font-size:1.125rem;letter-spacing:.2px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.badge-soft{
  background:#142457;color:#cfe0ff;border:1px solid #223d8e;
}

/* ===== 卡片 ===== */
.card{background:var(--panel);border:1px solid var(--line);color:var(--text);border-radius:.8rem}
.card .card-header{background:#0e1530;border-bottom:1px solid var(--line);color:var(--text)}
.card .card-body{color:var(--text)}

/* ===== 表單 ===== */
.form-label{color:var(--muted)}
.form-select,.form-control{background:#0f1a3a;color:var(--text);border:1px solid #21306a}
.form-select:focus,.form-control:focus{border-color:#2c418e;box-shadow:0 0 0 .2rem rgba(110,168,254,.15)}

/* ===== 表格（Bootstrap 覆寫） ===== */
.table-dark{
  --bs-table-color:var(--text);
  --bs-table-bg:var(--tableBg);
  --bs-table-border-color:var(--line);
  --bs-table-striped-bg:var(--stripe);
  --bs-table-striped-color:var(--text);
  --bs-table-hover-bg:var(--hover);
  --bs-table-hover-color:var(--text);
}
.table thead th{color:#cfe0ff;border-bottom-color:var(--line)!important}
.table td,.table th{
  text-align:left; /* 文字靠左 */
  border-color:var(--line)!important;
  vertical-align:middle;
}
.table a{color:var(--accent);text-decoration:none}
.table a:hover{text-decoration:underline}
.table-responsive{border:1px solid var(--line);border-radius:.6rem}

/* ===== 統計區塊 ===== */
.stats{display:flex;gap:1rem;flex-wrap:wrap}
.stats .stat{
  background:#0f1a3a;border:1px solid #21306a;border-radius:.6rem;
  padding:.6rem .8rem;min-width:160px
}
.stats .stat .muted{color:var(--muted);font-size:.85rem}
.stats .stat .num{font-weight:700;font-variant-numeric:tabular-nums;font-size:1.1rem}
/* 手機雙欄排列 */
@media (max-width:576px){
  .stats{display:grid;grid-template-columns:1fr 1fr;gap:.75rem}
  .stats .stat{min-width:0}
}

/* ===== 水平長條圖（品牌分布） ===== */
.bars{display:flex;flex-direction:column;gap:.5rem}
.bar{display:flex;align-items:center;gap:.6rem}
.bar .label{min-width:110px;color:#cfe0ff;font-variant-numeric:tabular-nums}
.bar .track{
  flex:1;height:12px;overflow:hidden;border-radius:999px;
  background:#0f1a3a;border:1px solid #21306a;
}
.bar .fill{
  height:100%;
  background:linear-gradient(90deg,var(--accent),#4c7ff6);
  box-shadow:0 0 0 1px rgba(33,48,106,.35) inset, 0 0 10px rgba(78,127,246,.25);
  transition:width .3s ease;
}
/* 兼容舊版 .bar-fill（無 track 容器時） */
.bar-fill{
  height:12px;border-radius:999px;
  background:linear-gradient(90deg,var(--accent),#4c7ff6);
  border:1px solid #21306a;
  box-shadow:0 0 0 1px rgba(33,48,106,.35) inset, 0 0 10px rgba(78,127,246,.25);
  transition:width .3s ease;
}

/* ===== 側邊固定區塊 ===== */
.sticky-aside{position:sticky;top:1rem}

/* ===== 頁尾 ===== */
.site-footer{border-top:1px solid var(--line);color:var(--muted);background:#0e1530}
.site-footer a{color:var(--accent);text-decoration:none}
.site-footer a:hover{text-decoration:underline}