/* ============================================
   餐飲 ERP — 眼睛舒服配色（暖米白底 + 沉穩主色）
   ============================================ */
:root {
  --bg-body:       #FAFAF7;   /* 溫米白底 */
  --bg-card:       #FFFFFF;
  --bg-soft:       #F4F2EE;   /* 淡米色（區塊背景） */
  --bg-nav:        #2D3748;   /* 沉穩深藍灰（取代純黑 navbar） */

  --color-text:    #2D3142;   /* 主文字（深石板色，不刺眼） */
  --color-muted:   #6B7280;   /* 次要文字 */
  --color-border:  #E5E7EB;

  --color-primary: #5B7C99;   /* 沉穩藍灰（主按鈕） */
  --color-primary-dark: #4A6680;
  --color-accent:  #C97B47;   /* 暖肉桂橘（強調，餐飲感） */
  --color-success: #5A8364;   /* 沉森林綠 */
  --color-warning: #D4A05A;   /* 蜜糖黃 */
  --color-danger:  #C26B5C;   /* 暖紅 */
  --color-info:    #6B8FA3;   /* 沉穩藍 */
}

body {
  background: var(--bg-body);
  color: var(--color-text);
  font-family: -apple-system, "Segoe UI", "Microsoft JhengHei", Roboto, sans-serif;
  font-weight: 500;
}

/* Navbar */
.navbar.bg-dark {
  background: var(--bg-nav) !important;
  border-bottom: 3px solid var(--color-accent);
}
.navbar-brand { letter-spacing: 1px; }
.navbar .nav-link { font-size: 0.92rem; }
.navbar .dropdown-menu { font-size: 0.92rem; }

/* 卡片 */
.card {
  border: 1px solid var(--color-border);
  border-radius: 8px;
  box-shadow: 0 1px 3px rgba(0,0,0,.04);
  background: var(--bg-card);
}
.card-header {
  background: var(--bg-soft);
  border-bottom: 1px solid var(--color-border);
  font-weight: 500;
}

/* 強調卡 */
.metric-card {
  border-left: 4px solid var(--color-primary);
  transition: transform .12s ease;
}
.metric-card:hover { transform: translateY(-2px); }
.metric-card.success { border-left-color: var(--color-success); }
.metric-card.warning { border-left-color: var(--color-warning); }
.metric-card.danger  { border-left-color: var(--color-danger); }
.metric-card.accent  { border-left-color: var(--color-accent); }

.metric-value {
  font-size: 2rem;
  font-weight: 700;
  letter-spacing: -0.5px;
  color: var(--color-text);
}
.metric-label { font-size: 0.85rem; font-weight: 600; color: var(--color-muted); margin-bottom: 4px; }
.metric-sub { font-size: 0.78rem; font-weight: 500; color: var(--color-muted); }

/* Buttons */
.btn-primary { background: var(--color-primary); border-color: var(--color-primary); }
.btn-primary:hover, .btn-primary:focus {
  background: var(--color-primary-dark); border-color: var(--color-primary-dark);
}
.btn-success { background: var(--color-success); border-color: var(--color-success); }
.btn-warning { background: var(--color-warning); border-color: var(--color-warning); color: #fff; }
.btn-danger  { background: var(--color-danger);  border-color: var(--color-danger); }
.btn-info    { background: var(--color-info);    border-color: var(--color-info); color: #fff; }
.btn-outline-primary { color: var(--color-primary); border-color: var(--color-primary); }
.btn-outline-primary:hover { background: var(--color-primary); border-color: var(--color-primary); color: #fff; }

/* Tables */
.table { color: var(--color-text); }
.table th { font-weight: 500; color: var(--color-muted); }
.table thead.table-light th { background: var(--bg-soft); border-bottom: 2px solid var(--color-border); }
.table-striped > tbody > tr:nth-of-type(odd) > * { background: rgba(244,242,238,.4); }
.table-sm { font-size: 0.86rem; }
.table-sm th, .table-sm td { padding: 0.4rem 0.5rem; }

/* Badges */
.badge.bg-success { background: var(--color-success) !important; }
.badge.bg-warning { background: var(--color-warning) !important; color: #fff; }
.badge.bg-danger  { background: var(--color-danger) !important; }
.badge.bg-info    { background: var(--color-info) !important; }

/* 文字色 */
.text-success { color: var(--color-success) !important; }
.text-warning { color: var(--color-warning) !important; }
.text-danger  { color: var(--color-danger) !important; }
.text-primary { color: var(--color-primary) !important; }
.text-info    { color: var(--color-info) !important; }
.text-muted   { color: var(--color-muted) !important; }
.text-accent  { color: var(--color-accent) !important; }

/* Alerts */
.alert-success { background: #ECF3EE; color: #3A5A44; border-color: #C8D9CD; }
.alert-warning { background: #FAF1E0; color: #8A6627; border-color: #ECD8A8; }
.alert-danger  { background: #F7E4E0; color: #8A4137; border-color: #E8C4BE; }
.alert-info    { background: #E8EFF3; color: #3D5970; border-color: #C7D6DD; }

/* 連結 */
a { color: var(--color-primary); text-decoration: none; }
a:hover { color: var(--color-primary-dark); text-decoration: underline; }

/* 儀表板：分店比較卡 */
.store-card {
  border-radius: 10px;
  padding: 18px 20px;
  background: linear-gradient(135deg, #FFFFFF, #FAFAF7);
  border: 1px solid var(--color-border);
  height: 100%;
}
.store-card h3 {
  font-size: 1.15rem;
  font-weight: 700;
  margin: 0 0 12px;
  color: var(--color-text);
  border-bottom: 2px solid var(--color-accent);
  padding-bottom: 6px;
  display: inline-block;
}
.store-stat {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 6px 0;
  border-bottom: 1px dashed var(--color-border);
}
.store-stat:last-child { border-bottom: 0; }
.store-stat .label { font-size: 0.86rem; font-weight: 600; color: var(--color-muted); }
.store-stat .value { font-size: 1.08rem; font-weight: 700; }
.store-stat .value.big { font-size: 1.5rem; font-weight: 700; }

.cost-rate-good { color: var(--color-success); }
.cost-rate-warn { color: var(--color-warning); }
.cost-rate-bad  { color: var(--color-danger); }

.trend-up   { color: var(--color-danger); font-weight: 600; }
.trend-down { color: var(--color-success); font-weight: 600; }

.alert-list { padding: 0; margin: 0; list-style: none; }
.alert-list li {
  padding: 8px 12px;
  border-bottom: 1px solid var(--color-border);
  font-size: 0.9rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.alert-list li:last-child { border-bottom: 0; }
.alert-list .a-name { color: var(--color-text); font-weight: 600; }
.alert-list .a-value { font-weight: 700; font-size: 1.02rem; }