/* =========================
   全站樣式：style.css
   可自行調色：--brand-* 變數
   ========================= */
:root{
  --brand-start:#243447;
  --brand-end:#2f3e56;
  --brand-accent:#ffd761;
  --text:#333;
  --bg:#f4f6f8;
  --card:#fff;
  --muted:#6b7280;
  --border:#e5e7eb;
}

/* 全域基礎 */
*{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
/* 全站字體：統一微軟正黑體 */
html, body, input, select, textarea, button, table, th, td, .navbar, .card, .alert{
  font-family:"Microsoft JhengHei", sans-serif !important;
}
body{
  margin:0;
  font-family:"Microsoft JhengHei", sans-serif;
  color:var(--text);
  background:var(--bg);
  line-height:1.6;
  padding:10px;
}

/* 容器 */
.container{
  max-width:1200px;
  margin:0 auto;
  padding:15px;
}

/* ========== Navbar（RWD + Active + 漢堡） ========== */
.navbar{
  position:sticky; top:0; z-index:50;
  display:flex; justify-content:space-between; align-items:center;
  background:linear-gradient(90deg,var(--brand-start),var(--brand-end));
  padding:12px 20px; color:#fff; flex-wrap:wrap;
  border-radius:8px; margin-bottom:16px;
  box-shadow:0 4px 16px rgba(0,0,0,.12);
}
.navbar .logo{ font-size:18px; font-weight:700; letter-spacing:.5px; }
.navbar .menu{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.navbar .menu .user{ color:var(--brand-accent); font-weight:600; margin-right:6px; }

.navbar a{
  position:relative; display:inline-block;
  color:#fff; text-decoration:none;
  padding:8px 12px; border-radius:8px;
  background:rgba(255,255,255,.06);
  transition:background .25s, transform .1s, color .25s;
}
.navbar a:hover{ background:rgba(255,255,255,.16); }
.navbar a:active{ transform:translateY(1px); }

/* 目前頁面高亮：低調微亮＋底線指示器 */
.navbar a.active{
  background:rgba(255,255,255,.22);
  font-weight:700;
}
.navbar a.active::after{
  content:"";
  position:absolute; left:10px; right:10px; bottom:-6px;
  height:3px; border-radius:3px;
  background:var(--brand-accent);
  box-shadow:0 2px 6px rgba(255,215,97,.6);
}

/* 手機漢堡鍵 */
.nav-toggle{
  display:none; appearance:none; border:none; outline:none;
  background:rgba(255,255,255,.12); color:#fff;
  padding:8px 10px; border-radius:8px; cursor:pointer;
  transition:background .25s;
}
.nav-toggle:hover{ background:rgba(255,255,255,.2); }

/* RWD：手機布局 */
@media (max-width: 768px){
  body{ padding:0; }
  .container{ padding:12px; }
  .navbar{ border-radius:0; margin:0; }
  .nav-toggle{ display:block; }
  .navbar .menu{
    display:none; width:100%;
    flex-direction:column; align-items:stretch;
    gap:8px; margin-top:10px;
  }
  .navbar .menu.open{ display:flex; }
  .navbar a{ width:100%; text-align:center; }
  .navbar a.active::after{ left:20%; right:20%; bottom:-4px; }
}

/* 可見焦點（鍵盤操作友善） */
.navbar a:focus-visible, .nav-toggle:focus-visible{
  outline:2px solid var(--brand-accent); outline-offset:2px;
  box-shadow:0 0 0 3px rgba(255,215,97,.35);
}

/* ========== 卡片/面板 ========== */
.card{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:10px;
  box-shadow:0 2px 5px rgba(0,0,0,.06);
  padding:16px;
}

/* ========== 表單 ========== */
form{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:10px;
  box-shadow:0 2px 5px rgba(0,0,0,.06);
  padding:20px; margin:10px 0;
}
form .row{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
@media (max-width: 768px){ form .row{ grid-template-columns:1fr; } }

input, select, textarea, button{
  font:inherit;
}
input[type="text"], input[type="email"], input[type="password"],
input[type="number"], select, textarea{
  width:100%; padding:10px; margin:8px 0;
  border:1px solid #ccc; border-radius:8px; background:#fff;
  transition:border-color .2s, box-shadow .2s;
}
input:focus, select:focus, textarea:focus{
  border-color:#9ca3af; box-shadow:0 0 0 3px rgba(156,163,175,.25);
  outline:none;
}
button, .btn{
  display:inline-block; padding:10px 14px; border:none;
  border-radius:8px; background:var(--brand-start); color:#fff;
  cursor:pointer; transition:background .25s, transform .05s;
}
button:hover, .btn:hover{ background:var(--brand-end); }
button:active, .btn:active{ transform:translateY(1px); }
.btn-secondary{ background:#6b7280; }
.btn-danger{ background:#dc2626; }

/* ========== 表格（含手機滑動） ========== */
.table-responsive{ overflow-x:auto; background:transparent; }
table{
  width:100%; border-collapse:collapse; margin:20px 0;
  background:var(--card); border-radius:8px; overflow:hidden;
  border:1px solid var(--border);
}
th, td{
  padding:12px; border:1px solid var(--border); text-align:center;
}
th{
  background:var(--brand-start);
  color:#fff; font-weight:700;
}
tr:nth-child(even) td{ background:#fafafa; }
@media (max-width: 768px){
  th, td{ font-size:14px; padding:8px; }
}

/* ========== 版面工具類別 ========== */
.grid-2{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.grid-3{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
@media (max-width: 992px){ .grid-3{ grid-template-columns:1fr 1fr; } }
@media (max-width: 640px){ .grid-2, .grid-3{ grid-template-columns:1fr; } }

.mt-1{ margin-top:4px; } .mt-2{ margin-top:8px; } .mt-3{ margin-top:12px; }
.mb-1{ margin-bottom:4px; } .mb-2{ margin-bottom:8px; } .mb-3{ margin-bottom:12px; }
.text-muted{ color:var(--muted); }

/* ========== 通知/提示 ========== */
.alert{
  padding:12px 14px; border-radius:8px; margin:10px 0;
  border:1px solid var(--border); background:#fff;
}
.alert.success{ border-color:#16a34a33; background:#16a34a11; }
.alert.error{ border-color:#dc262633; background:#dc262611; }
.alert.info{ border-color:#2563eb33; background:#2563eb11; }


.list-table th {
  font-weight: 700;
  background: #f9fafb;
  color: #374151;
}
/* 查詢表單 label 粗體 */
form .field label {
  font-weight: 700;
  color: #374151;   /* 和 create/edit 保持一致的深灰 */
}

/* =========================
   新增：儀表板統計卡配色 & 新增收據按鈕
   ========================= */

/* 統計卡配色：總數 / 已開立 / 作廢 / 合計金額 */
.stat-total{
  border-color:#c7d2fe;                                  /* Indigo-200 */
  background:linear-gradient(180deg,#e0e7ff,#ffffff);     /* Indigo-100 -> 白 */
}
.stat-open{
  border-color:#bbf7d0;                                  /* Emerald-200 */
  background:linear-gradient(180deg,#dcfce7,#ffffff);     /* Emerald-100 -> 白 */
}
.stat-void{
  border-color:#fecdd3;                                  /* Rose-200 */
  background:linear-gradient(180deg,#ffe4e6,#ffffff);     /* Rose-100 -> 白 */
}
.stat-amount{
  border-color:#fde68a;                                  /* Amber-300 */
  background:linear-gradient(180deg,#fef3c7,#ffffff);     /* Amber-100 -> 白 */
}

/* 顯眼版「＋ 新增收據」按鈕（與藍/靛品牌色協調） */
.btn-accent{
  background:linear-gradient(180deg,#4f46e5,#2563eb);     /* Indigo-600 -> Blue-600 */
  color:#fff;
  border:1px solid #1d4ed8;                               /* Blue-700 */
  padding:10px 16px; border-radius:10px;
  display:inline-flex; align-items:center; justify-content:center;
  text-decoration:none;
  box-shadow:0 3px 10px rgba(37,99,235,.30);
  transition:transform .06s ease, box-shadow .12s ease, filter .12s ease;
}
.btn-accent:hover{
  background:linear-gradient(180deg,#4338ca,#1e40af);     /* Indigo-700 -> Blue-800 */
  transform:translateY(-1px);
  filter:brightness(1.02);
}
.btn-accent:active{ transform:none; }

.mt-3{margin-top:16px;}


<style>
.kpi.kpi-total,  .kip.kpi-total  { background:linear-gradient(180deg,#f3e8ff,#e9d5ff)!important; }
.kpi.kpi-open,   .kip.kpi-open   { background:linear-gradient(180deg,#ede9fe,#ddd6fe)!important; }
.kpi.kpi-void,   .kip.kpi-void   { background:linear-gradient(180deg,#ffe4f1,#fec7e7)!important; }
.kpi.kpi-amount, .kip.kpi-amount { background:linear-gradient(180deg,#e0e7ff,#c7d2fe)!important; }
.kpi.kpi-void .num, .kip.kpi-void .num{ color:#9f1239; }
</style>