/* ============================================================
   屹澧倉庫管理系統 — 共用樣式
   設計語言對齊 yili-platform(Bootstrap 5 + 綠色主題 + Noto Sans TC)
   ============================================================ */

:root {
  /* yili 主色 */
  --yili-green: #06C755;
  --yili-green-dark: #05A847;
  --yili-green-light: rgba(6, 199, 85, 0.15);

  --c-bg: #F5F7FA;
  --c-text: #1C1C1C;
  --c-muted: #9CA3AF;
  --c-border: #E8EAED;
  --c-border-soft: #F0F2F5;

  /* 板位三色(沿用原型) */
  --slot-empty-1: #2ecc71;
  --slot-empty-2: #27ae60;
  --slot-occupied-1: #e74c3c;
  --slot-occupied-2: #c0392b;
  --slot-rented-1: #f1c40f;
  --slot-rented-2: #f39c12;
}

body {
  background: var(--c-bg);
  color: var(--c-text);
  font-family: 'Segoe UI', 'Noto Sans TC', '微軟正黑體', sans-serif;
  font-size: 14px;
}

/* ===== Bootstrap 主色覆蓋成 yili 綠 ===== */
.btn-primary {
  background: var(--yili-green) !important;
  border-color: var(--yili-green) !important;
}
.btn-primary:hover, .btn-primary:focus {
  background: var(--yili-green-dark) !important;
  border-color: var(--yili-green-dark) !important;
}
.btn-outline-primary {
  color: var(--yili-green) !important;
  border-color: var(--yili-green) !important;
}
.btn-outline-primary:hover {
  background: var(--yili-green) !important;
  color: #fff !important;
}
a, .text-primary { color: var(--yili-green) !important; }
.form-control:focus, .form-select:focus {
  border-color: var(--yili-green) !important;
  box-shadow: 0 0 0 0.2rem var(--yili-green-light) !important;
}
.bg-primary { background: var(--yili-green) !important; }

/* ===== 頂部 Nav ===== */
.app-nav {
  background: #fff;
  border-bottom: 1px solid var(--c-border);
  padding: 12px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-shadow: 0 1px 4px rgba(0,0,0,0.04);
  position: sticky;
  top: 0;
  z-index: 100;
}
.app-nav .brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
  color: var(--c-text);
  text-decoration: none;
  font-size: 15px;
}
.app-nav .brand img {
  width: 32px;
  height: 32px;
  object-fit: contain;
}
.app-nav .brand small {
  font-weight: 400;
  color: var(--c-muted);
  margin-left: 6px;
  font-size: 12px;
}
.app-nav .nav-links {
  display: flex;
  gap: 4px;
}
.app-nav .nav-links a {
  color: #4B5563;
  text-decoration: none;
  padding: 8px 14px;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 500;
}
.app-nav .nav-links a:hover { background: #F3F4F6; }
.app-nav .nav-links a.active {
  background: var(--yili-green-light);
  color: var(--yili-green) !important;
}
.app-nav .user-block {
  display: flex; align-items: center; gap: 12px;
  font-size: 13px; color: #4B5563;
}

/* ===== 主容器 ===== */
.container-fluid.main {
  padding: 24px;
  max-width: 1500px;
  margin: 0 auto;
}

/* ===== Card 卡片(覆蓋 Bootstrap) ===== */
.card {
  border: 1px solid var(--c-border);
  border-radius: 12px;
  box-shadow: 0 1px 4px rgba(0,0,0,0.04);
}
.card-body { padding: 20px; }
.card-title {
  font-size: 15px;
  font-weight: 600;
  color: #1C1C1C;
  margin-bottom: 16px;
}

/* ===== 統計卡 ===== */
.stat-card {
  background: #fff;
  border: 1px solid var(--c-border);
  border-radius: 12px;
  padding: 16px 20px;
  display: flex;
  align-items: center;
  gap: 14px;
}
.stat-card .stat-icon {
  width: 48px; height: 48px;
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  font-size: 22px;
  flex-shrink: 0;
}
.stat-card .stat-icon.green { background: rgba(39,174,96,0.12); color: #27ae60; }
.stat-card .stat-icon.red { background: rgba(231,76,60,0.12); color: #e74c3c; }
.stat-card .stat-icon.yellow { background: rgba(243,156,18,0.12); color: #f39c12; }
.stat-card .stat-icon.gray { background: rgba(75,85,99,0.10); color: #4B5563; }
.stat-card .stat-label { font-size: 12px; color: var(--c-muted); }
.stat-card .stat-value { font-size: 24px; font-weight: 700; line-height: 1.2; }

/* ===== 圖例 ===== */
.legend {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}
.legend-item {
  display: flex; align-items: center; gap: 6px;
  font-size: 13px; color: #4B5563;
}
.legend-box { width: 16px; height: 16px; border-radius: 4px; }
.legend-box.empty { background: var(--slot-empty-2); }
.legend-box.rented_empty { background: var(--slot-rented-2); }
.legend-box.occupied { background: var(--slot-occupied-2); }

/* ===== 板位 Grid ===== */
.area-block { margin-bottom: 28px; }
.area-title {
  font-size: 15px; font-weight: 600;
  margin: 0 0 12px 0;
  color: var(--c-text);
}
.slot-grid {
  display: grid;
  gap: 8px;
}
.slot {
  position: relative;
  aspect-ratio: 1 / 1;
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: #fff;
  font-weight: 600;
  text-align: center;
  padding: 6px;
  transition: transform 0.15s, box-shadow 0.15s;
  user-select: none;
  font-size: 13px;
  border: none;
}
.slot:hover { transform: translateY(-2px); box-shadow: 0 4px 14px rgba(0,0,0,0.18); }
.slot.empty { background: linear-gradient(135deg, var(--slot-empty-1), var(--slot-empty-2)); }
.slot.occupied { background: linear-gradient(135deg, var(--slot-occupied-1), var(--slot-occupied-2)); }
.slot.rented_empty {
  background: linear-gradient(135deg, var(--slot-rented-1), var(--slot-rented-2));
  color: #5d4a00;
}
.slot .code { font-size: 12px; opacity: 0.85; }
.slot .product, .slot .customer { font-size: 11px; margin-top: 2px; }

/* 已逾期:粉色閃爍邊框 */
.slot.overdue {
  outline: 4px solid #ff4d8d;
  outline-offset: -4px;
  animation: overdue-pulse 1.4s ease-in-out infinite;
}
.slot.overdue::after {
  content: "⚠ 逾期";
  position: absolute;
  top: 4px; right: 4px;
  background: #ff4d8d;
  color: #fff;
  font-size: 10px;
  padding: 2px 5px;
  border-radius: 4px;
  font-weight: 700;
}
@keyframes overdue-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255, 77, 141, 0.55); }
  50%      { box-shadow: 0 0 0 8px rgba(255, 77, 141, 0); }
}

/* 7 天內到期(非逾期):粉色虛線邊框 */
.slot.due-soon {
  outline: 3px dashed #ff4d8d;
  outline-offset: -3px;
}

/* 批次模式 - 板位選中狀態 */
.slot.batch-selected {
  outline: 4px solid #06C755;
  outline-offset: -4px;
  position: relative;
}
.slot.batch-selected::before {
  content: "✓";
  position: absolute;
  top: 4px; left: 4px;
  background: #06C755; color: #fff;
  width: 22px; height: 22px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-weight: bold;
  font-size: 14px;
  z-index: 2;
}
.slot.batch-disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* 批次模式浮動 bar */
.batch-bar {
  position: fixed;
  bottom: 16px;
  left: 50%;
  transform: translateX(-50%);
  background: #fff;
  border: 1px solid var(--c-border);
  border-radius: 12px;
  padding: 12px 18px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.15);
  z-index: 1050;
  display: flex !important;
  align-items: center;
  gap: 16px;
}
.batch-bar.d-none { display: none !important; }

/* Nav 鈴鐺 */
.nav-bell {
  position: relative;
  background: none;
  border: 1px solid var(--c-border);
  width: 36px; height: 36px;
  border-radius: 8px;
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
  margin-right: 8px;
  color: #4B5563;
}
.nav-bell:hover { background: #F3F4F6; }
.nav-bell.has-overdue { color: #ff4d8d; animation: overdue-pulse 1.6s ease-in-out infinite; }
.nav-bell .bell-badge {
  position: absolute;
  top: -4px; right: -4px;
  background: #e74c3c;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 9px;
  display: inline-flex; align-items: center; justify-content: center;
}

/* ===== Login Page ===== */
.login-bg {
  min-height: 100vh;
  display: flex; align-items: center; justify-content: center;
  background: var(--c-bg);
  padding: 20px;
}
.login-card {
  background: #fff;
  border-radius: 16px;
  padding: 36px 32px;
  width: 100%;
  max-width: 400px;
  border: 1px solid var(--c-border);
  box-shadow: 0 2px 16px rgba(0,0,0,0.08);
}
.login-card .brand-logo {
  width: 72px; height: 72px;
  margin: 0 auto 12px;
  display: block;
  object-fit: contain;
}
.login-card h2 {
  text-align: center;
  font-size: 18px;
  font-weight: 700;
  color: var(--c-text);
  margin-bottom: 4px;
}
.login-card .subtitle {
  text-align: center;
  color: var(--c-muted);
  font-size: 13px;
  margin-bottom: 24px;
}
.login-card .footer-text {
  text-align: center;
  font-size: 12px;
  color: var(--c-muted);
  margin-top: 18px;
  margin-bottom: 0;
}

/* ===== Toast ===== */
#toast-host {
  position: fixed; top: 24px; right: 24px;
  z-index: 9999;
  display: flex; flex-direction: column; gap: 8px;
}

/* ===== 表格 ===== */
.table > :not(caption) > * > * { padding: 12px; }
.table thead th {
  background: #FAFBFC;
  font-weight: 600;
  font-size: 13px;
  color: #4B5563;
  border-bottom: 2px solid var(--c-border);
}
.table tbody td { font-size: 14px; vertical-align: middle; }

/* ===== 設定/說明區塊 ===== */
.section-tip {
  background: #FFFBEB;
  border: 1px solid #F8E5B3;
  color: #78510D;
  padding: 12px 14px;
  border-radius: 8px;
  font-size: 13px;
  margin-bottom: 16px;
}
.section-tip .bi { margin-right: 6px; }

/* ===== Modal 自訂 ===== */
.modal-header {
  border-bottom: 1px solid var(--c-border);
  padding: 16px 20px;
}
.modal-title { font-size: 16px; font-weight: 600; }
.modal-body { padding: 20px; }
.modal-footer { padding: 12px 20px; border-top: 1px solid var(--c-border); }