:root {
  --green: #49A18B;
  --brick: #AE5A4E;
  --gray: #B7B8B5;
  --whiteish: #F7F7F7;
  --ink: #26312f;
}

body {
  background: var(--whiteish);
  color: var(--ink);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans TC", sans-serif;
}

.app-shell { min-height: 100vh; }
.topbar { background: #fff; border-bottom: 1px solid #e6e7e4; }
.brand-mark { width: 12px; height: 32px; background: var(--green); border-radius: 3px; display: inline-block; }
.sidebar { background: #fff; border-right: 1px solid #e6e7e4; min-height: calc(100vh - 65px); }
.nav-link { color: #4d5a57; border-radius: 6px; }
.nav-link:hover, .nav-link.active { background: rgba(73, 161, 139, .12); color: var(--green); }
.page-title { font-weight: 700; letter-spacing: 0; }
.stat-card, .panel, .schedule-card { background: #fff; border: 1px solid #e6e7e4; border-radius: 8px; }
.stat-card { padding: 18px; }
.stat-value { font-size: 1.9rem; font-weight: 800; color: var(--green); }
.badge-green { background: rgba(73,161,139,.14); color: #256d5d; }
.badge-brick { background: rgba(174,90,78,.14); color: var(--brick); }
.badge-gray { background: #eee; color: #5b6461; }
.btn-primary { background: var(--green); border-color: var(--green); }
.btn-primary:hover { background: #3b8976; border-color: #3b8976; }
.btn-outline-primary { border-color: var(--green); color: var(--green); }
.btn-outline-primary:hover { background: var(--green); border-color: var(--green); }
.btn-danger, .bg-brick { background: var(--brick) !important; border-color: var(--brick) !important; }
.text-brick { color: var(--brick); }
.table-schedule th { background: #f0f2f1; white-space: nowrap; font-size: .85rem; }
.table-schedule td { min-width: 54px; text-align: center; vertical-align: middle; }
.shift-a { background: rgba(73,161,139,.18) !important; color: #236452 !important; font-weight: 700; }
.shift-b { background: rgba(174,90,78,.16) !important; color: #8b4339 !important; font-weight: 700; }
.shift-c { background: #e7e8e5 !important; color: #4f5754 !important; font-weight: 700; }
.shift-off { background: #fff !important; color: #98a19e !important; }
.calendar-grid { display: grid; grid-template-columns: repeat(7, minmax(92px, 1fr)); gap: 8px; }
.calendar-day { background: #fff; border: 1px solid #e5e7e4; border-radius: 8px; min-height: 96px; padding: 10px; }
.calendar-day .date { font-weight: 700; font-size: .9rem; }
.hero-login { background: linear-gradient(120deg, rgba(73,161,139,.15), rgba(174,90,78,.10)); border-bottom: 1px solid #e5e7e4; }
.small-label { color: #6b7572; font-size: .82rem; }
.rule-ok { border-left: 4px solid var(--green); }
.rule-warn { border-left: 4px solid var(--brick); }
@media (max-width: 991px) {
  .sidebar { min-height: auto; border-right: 0; border-bottom: 1px solid #e6e7e4; }
  .calendar-grid { grid-template-columns: repeat(2, minmax(130px, 1fr)); }
}
@media (max-width: 575px) {
  .calendar-grid { grid-template-columns: 1fr; }
  .table-schedule td, .table-schedule th { min-width: 48px; font-size: .8rem; }
}
.month-calendar { min-width: 980px; }
.month-calendar .weekday { background: #eef1ef; color: #59635f; font-weight: 700; text-align: center; padding: 10px; border: 1px solid #e1e4e1; }
.month-grid { display: grid; grid-template-columns: repeat(7, minmax(140px, 1fr)); }
.month-cell { min-height: 148px; background: #fff; border: 1px solid #e1e4e1; padding: 8px; }
.month-cell.muted { background: #f1f2f0; color: #9aa19e; }
.month-date { font-weight: 800; margin-bottom: 6px; }
.shift-line { display: flex; gap: 6px; align-items: flex-start; margin-bottom: 5px; font-size: .78rem; line-height: 1.25; }
.shift-tag { flex: 0 0 auto; min-width: 22px; border-radius: 4px; text-align: center; padding: 1px 4px; font-weight: 800; }
.shift-tag.a { background: rgba(73,161,139,.18); color: #236452; }
.shift-tag.b { background: rgba(174,90,78,.16); color: #8b4339; }
.shift-tag.c { background: #e7e8e5; color: #4f5754; }
.personal-shift { display: inline-block; border-radius: 6px; padding: 4px 8px; font-weight: 800; margin-bottom: 6px; }
.calendar-note { font-size: .76rem; color: #6b7572; }
@media (max-width: 991px) {
  .month-calendar { min-width: 860px; }
  .month-cell { min-height: 132px; }
}
.schedule-scroll { overflow: auto; max-width: 100%; border: 1px solid #e1e4e1; border-radius: 8px; max-height: 72vh; }
.excel-schedule { table-layout: fixed; width: 2680px; border-collapse: separate; border-spacing: 0; margin-bottom: 0; }
.excel-schedule th, .excel-schedule td { border: 1px solid #e1e4e1; height: 48px; text-align: center; vertical-align: middle; white-space: nowrap; background: #fff; }
.excel-schedule thead th { position: sticky; top: 0; z-index: 5; font-size: .8rem; }
.excel-schedule .date-col { width: 72px; }
.excel-schedule .date-head span { display: block; font-weight: 800; }
.excel-schedule .date-head small { display: block; color: #69736f; font-size: .72rem; }
.excel-schedule .sticky-left-1 { position: sticky; left: 0; width: 120px; min-width: 120px; z-index: 8; text-align: left; padding-left: 12px; }
.excel-schedule .sticky-left-2 { position: sticky; left: 120px; width: 96px; min-width: 96px; z-index: 8; }
.excel-schedule .sticky-right-2 { position: sticky; right: 84px; width: 84px; min-width: 84px; z-index: 8; }
.excel-schedule .sticky-right-1 { position: sticky; right: 0; width: 84px; min-width: 84px; z-index: 8; }
.excel-schedule thead .sticky-left-1, .excel-schedule thead .sticky-left-2, .excel-schedule thead .sticky-right-1, .excel-schedule thead .sticky-right-2 { z-index: 12; }
.excel-schedule .week-green { background: rgba(73, 161, 139, .10); }
.excel-schedule .week-red { background: rgba(174, 90, 78, .10); }
.excel-schedule .shift-a, .excel-schedule .shift-b, .excel-schedule .shift-c, .excel-schedule .shift-off { font-weight: 800; }
.excel-schedule .locked { box-shadow: inset 0 -3px 0 rgba(174, 90, 78, .45); }