/* ============================================================
   TwmOpenSource — Shared Design System
   深藍企業信任感 × 開源語彙（等寬字 + 螢光綠 accent）
   ============================================================ */

:root{
  --navy:#0f2742; --navy-2:#15324f; --blue:#2f6fb0; --accent:#7ee787;
  --ink:#1b2430; --muted:#5b6b7d; --bg:#f5f7fa; --line:#e2e8f0;
  --mono:"SF Mono","Cascadia Code",Consolas,monospace;

  /* 延伸 token */
  --radius-sm:.35rem;
  --radius:.5rem;
  --radius-lg:.75rem;
  --shadow-sm:0 1px 3px rgba(15,39,66,.06);
  --shadow:0 4px 12px rgba(15,39,66,.1);
  --transition:150ms ease;
}

/* ── Reset & Base ── */
*{box-sizing:border-box}

body{
  margin:0;
  font-family:system-ui,-apple-system,"Noto Sans TC",sans-serif;
  color:var(--ink);
  background:#fff;
  line-height:1.6;
}

a{color:var(--blue);text-decoration:none;transition:color var(--transition)}
a:hover{color:var(--navy)}

h1,h2,h3,h4,h5,h6{
  margin:0 0 .5em;
  color:var(--navy);
  line-height:1.25;
  font-weight:700;
}

p{margin:0 0 1em}

img{max-width:100%;height:auto;display:block}

.mono{font-family:var(--mono)}

/* ── Layout: Container ── */
.container{
  max-width:1160px;
  margin-inline:auto;
  padding-inline:1.25rem;
  width:100%;
}

/* ── Buttons ── */
.btn{
  display:inline-flex;
  align-items:center;
  gap:.4rem;
  background:var(--navy);
  color:#fff;
  padding:.55rem 1.1rem;
  border-radius:var(--radius);
  border:0;
  font-size:.9rem;
  cursor:pointer;
  text-decoration:none;
  transition:background var(--transition),box-shadow var(--transition);
  white-space:nowrap;
}
.btn:hover{background:var(--navy-2);color:#fff}
.btn:focus-visible{outline:3px solid var(--accent);outline-offset:2px}

.btn-accent{background:var(--accent);color:#0a2e12}
.btn-accent:hover{background:#6ed87a;color:#0a2e12}

.btn-ghost{
  background:transparent;
  border:1px solid var(--line);
  color:var(--ink);
}
.btn-ghost:hover{background:var(--bg);color:var(--ink)}

.btn-sm{padding:.35rem .75rem;font-size:.8rem}
.btn-lg{padding:.75rem 1.5rem;font-size:1rem}

/* ── Badges ── */
.badge{
  font-family:var(--mono);
  font-size:.72rem;
  padding:.15rem .5rem;
  border-radius:var(--radius-sm);
  background:#eef2f7;
  color:var(--muted);
  border:1px solid var(--line);
  display:inline-block;
  line-height:1.5;
}
.badge-accent{background:rgba(126,231,135,.12);color:#1d7a33;border-color:rgba(126,231,135,.5)}
.badge-blue{background:rgba(47,111,176,.1);color:var(--blue);border-color:rgba(47,111,176,.4)}
.badge-warn{background:rgba(229,83,75,.08);color:#c0392b;border-color:rgba(229,83,75,.35)}

/* ── Cards ── */
.card{
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-sm);
  transition:box-shadow var(--transition);
}
.card:hover{box-shadow:var(--shadow)}

.card-body{padding:1.25rem}
.card-header{padding:1rem 1.25rem;border-bottom:1px solid var(--line);font-weight:600;color:var(--navy)}
.card-footer{padding:.85rem 1.25rem;border-top:1px solid var(--line);background:var(--bg);border-radius:0 0 var(--radius-lg) var(--radius-lg)}

/* ── Stat Blocks ── */
.stat-num{font-family:var(--mono);font-size:2rem;font-weight:700;color:var(--navy)}
.stat-label{color:var(--muted);font-size:.85rem;margin-top:.15rem}
.stat-delta{font-family:var(--mono);font-size:.78rem}
.stat-delta.up{color:#1d7a33}
.stat-delta.down{color:#c0392b}

/* ── Sidebar ── */
.sidebar{
  background:var(--navy);
  color:#cdd9e5;
  min-height:100vh;
  width:240px;
  padding:1.25rem 0;
  flex-shrink:0;
}
.sidebar a{
  display:block;
  padding:.7rem 1.5rem;
  color:#cdd9e5;
  text-decoration:none;
  font-size:.92rem;
  transition:background var(--transition),color var(--transition);
}
.sidebar a:hover{background:rgba(255,255,255,.06);color:#fff}
.sidebar a.active{background:var(--blue);color:#fff;border-left:3px solid var(--accent)}

.sidebar-logo{
  padding:.5rem 1.5rem 1.25rem;
  border-bottom:1px solid rgba(255,255,255,.08);
  margin-bottom:.5rem;
  font-weight:700;
  font-size:1.05rem;
  color:#fff;
  letter-spacing:.01em;
}
.sidebar-section{
  padding:.5rem 1.5rem .2rem;
  font-size:.72rem;
  text-transform:uppercase;
  letter-spacing:.08em;
  color:rgba(205,217,229,.45);
  margin-top:.75rem;
}

/* ── Table ── */
.table{width:100%;border-collapse:collapse;font-size:.9rem}
.table th{
  background:#eef3f8;
  color:var(--navy);
  text-align:left;
  padding:.6rem .75rem;
  border-bottom:2px solid var(--line);
  font-weight:600;
  white-space:nowrap;
}
.table td{padding:.55rem .75rem;border-bottom:1px solid var(--line);vertical-align:middle}
.table td.num,.table th.num{text-align:right;font-family:var(--mono)}
.table tfoot td{font-weight:700;background:#f7fafc}
.table tbody tr:hover{background:rgba(47,111,176,.03)}

/* ── Progress Bar ── */
.bar{height:8px;background:#e7edf3;border-radius:99px;overflow:hidden}
.bar>span{display:block;height:100%;background:var(--accent);border-radius:99px;transition:width .4s ease}
.bar.over>span{background:#e5534b}

/* ── Details / Accordion ── */
details{border:1px solid var(--line);border-radius:var(--radius);margin-bottom:.5rem;overflow:hidden}
details[open]{box-shadow:var(--shadow-sm)}

details>summary{
  padding:.8rem 1.1rem;
  cursor:pointer;
  font-weight:600;
  color:var(--navy);
  list-style:none;
  display:flex;
  justify-content:space-between;
  align-items:center;
  user-select:none;
  background:#fff;
  transition:background var(--transition);
}
details>summary::-webkit-details-marker{display:none}
details>summary::after{
  content:"＋";
  font-family:var(--mono);
  color:var(--muted);
  font-size:.9rem;
  transition:transform var(--transition);
}
details[open]>summary{background:var(--bg)}
details[open]>summary::after{content:"－"}

details>.details-body{padding:1rem 1.1rem;border-top:1px solid var(--line);font-size:.92rem}

/* ── Form Elements ── */
.form-group{margin-bottom:1rem}
.form-label{display:block;font-size:.88rem;font-weight:600;color:var(--navy);margin-bottom:.35rem}
.form-control{
  width:100%;
  padding:.5rem .75rem;
  border:1px solid var(--line);
  border-radius:var(--radius);
  font-size:.92rem;
  color:var(--ink);
  background:#fff;
  transition:border-color var(--transition),box-shadow var(--transition);
}
.form-control:focus{
  outline:none;
  border-color:var(--blue);
  box-shadow:0 0 0 3px rgba(47,111,176,.15);
}
.form-hint{font-size:.78rem;color:var(--muted);margin-top:.3rem}

/* ── Utility ── */
.flex{display:flex}
.flex-col{display:flex;flex-direction:column}
.items-center{align-items:center}
.justify-between{justify-content:space-between}
.gap-1{gap:.25rem}
.gap-2{gap:.5rem}
.gap-3{gap:.75rem}
.gap-4{gap:1rem}

.mt-auto{margin-top:auto}
.text-muted{color:var(--muted)}
.text-navy{color:var(--navy)}
.text-accent{color:var(--accent)}
.text-sm{font-size:.85rem}
.text-xs{font-size:.75rem}
.font-bold{font-weight:700}
.truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ── Page Layout Helper ── */
.app-shell{display:flex;min-height:100vh}
.main-content{flex:1;padding:2rem;overflow-x:hidden;background:var(--bg)}
.page-title{font-size:1.5rem;font-weight:700;color:var(--navy);margin-bottom:1.25rem}
.section-title{font-size:1.05rem;font-weight:700;color:var(--navy);margin-bottom:.75rem}

/* ── Divider ── */
hr,.divider{border:none;border-top:1px solid var(--line);margin:1.25rem 0}

/* ── Print ── */
@media print{
  .sidebar,.no-print,.btn,.btn-accent,.btn-ghost{display:none!important}
  body{background:#fff}
  .print-full{width:100%!important;margin:0!important}
  .card{box-shadow:none;border:1px solid #ccc}
  .table td,.table th{border-color:#ccc}
}

/* ── Responsive ── */
@media(max-width:768px){
  .sidebar{width:100%;min-height:auto}
  .app-shell{flex-direction:column}
  .main-content{padding:1rem}
  .stat-num{font-size:1.5rem}
  .container{padding-inline:.75rem}
  .table{font-size:.82rem}
}