/* ===================================================================
   coachindie v2 mockup — shared layout components
   建立於 styles.css 之上（variables / typography / palette 來自 styles.css）
   =================================================================== */

@import url('styles.css');

/* ============ Page frame ============ */
body { background: var(--paper); margin: 0; font-family: var(--font-sans); color: var(--ink); }
.page-frame { max-width: 1100px; margin: 0 auto; background: var(--paper); }

/* ============ Top nav ============ */
.topnav { background: var(--ink); color: var(--paper); padding: 10px 20px; display: flex; align-items: center; gap: 16px; font-family: var(--font-mono); font-size: 11px; }
.topnav .brand { font-family: var(--font-display); font-size: 16px; font-weight: 500; margin-right: 12px; letter-spacing: -0.01em; }
.topnav .nav-item { padding: 6px 10px; cursor: pointer; text-decoration: none; color: inherit; }
.topnav .nav-item.active { background: var(--clay); }
.topnav .account { margin-left: auto; color: var(--sage-soft); font-family: var(--font-mono); font-size: 10px; }

/* ============ Toolbar ============ */
.toolbar { display: flex; align-items: center; gap: 12px; padding: 12px 16px; background: var(--paper); border-bottom: 1px solid var(--line); }
.toolbar .spacer { flex: 1; }
.toolbar .month-nav, .toolbar .week-nav { display: flex; align-items: center; gap: 8px; font-family: var(--font-display); font-size: 16px; font-weight: 500; }
.toolbar .arrow { font-family: var(--font-mono); font-size: 12px; padding: 4px 8px; border: 1px solid var(--line); cursor: pointer; background: var(--paper); }
.toolbar .status-tag { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; padding: 4px 10px; border-left: 3px solid; }
.toolbar .status-tag.pending { color: var(--clay-deep); background: var(--clay-wash); border-left-color: var(--clay); }
.toolbar .status-tag.settled { color: #4A5A38; background: var(--sage-wash); border-left-color: var(--sage); }
.toolbar .filter { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-soft); padding: 4px 10px; background: var(--paper-soft); border: 1px solid var(--line); cursor: pointer; }

/* ============ Tabs ============ */
.tabs { display: flex; border: 1px solid var(--ink); }
.tabs .tab { padding: 6px 12px; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; cursor: pointer; background: var(--paper); color: var(--ink); border: none; }
.tabs .tab.active { background: var(--ink); color: var(--paper); }

/* ============ Buttons ============ */
.btn { padding: 8px 14px; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; border: 1px solid var(--ink); cursor: pointer; background: var(--paper); color: var(--ink); }
.btn.primary { background: var(--clay); color: var(--paper); border-color: var(--clay); }
.btn.primary.ink { background: var(--ink); color: var(--paper); }
.btn.secondary { background: var(--paper); color: var(--ink); }

/* ============ Stat cards (4 across top) ============ */
.stats-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; padding: 16px; }
.stat-card { background: #fff; border: 1px solid var(--line); padding: 14px 16px; }
.stat-card.action { background: var(--clay-wash); border-left: 3px solid var(--clay); }
.stat-card.profit { background: var(--sage-wash); border-left: 3px solid var(--sage); }
.stat-card .label { font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); margin-bottom: 6px; }
.stat-card .value { font-family: var(--font-display); font-size: 26px; font-weight: 400; color: var(--ink); line-height: 1; letter-spacing: -0.02em; }
.stat-card.action .value { color: var(--clay-deep); }
.stat-card.profit .value { color: #4A5A38; }
.stat-card .sub { font-family: var(--font-sans); font-size: 11px; color: var(--muted); margin-top: 6px; }

/* ============ Side panel (slide-in from right) ============ */
.panel-backdrop { position: fixed; inset: 0; background: rgba(31,27,22,0.2); display: none; z-index: 100; }
.panel-backdrop.open { display: block; }
.side-panel { position: fixed; top: 0; right: 0; bottom: 0; width: 380px; background: #fff; border-left: 2px solid var(--ink); transform: translateX(100%); transition: transform 0.25s ease-out; z-index: 101; display: flex; flex-direction: column; }
.side-panel.open { transform: translateX(0); }
.side-panel .panel-header { padding: 16px 20px; border-bottom: 1px solid var(--line); display: flex; justify-content: space-between; align-items: flex-start; }
.side-panel .panel-title { font-family: var(--font-display); font-size: 18px; font-weight: 500; letter-spacing: -0.01em; }
.side-panel .panel-sub { font-family: var(--font-mono); font-size: 10px; color: var(--muted); margin-top: 2px; }
.side-panel .panel-close { font-family: var(--font-mono); font-size: 16px; color: var(--muted); cursor: pointer; user-select: none; }
.side-panel .panel-body { padding: 20px; flex: 1; overflow-y: auto; }
.side-panel .panel-actions { display: flex; gap: 10px; padding: 16px 20px; border-top: 1px solid var(--line); }
.side-panel .panel-actions .btn { flex: 1; padding: 10px; }

/* ============ Section heading ============ */
.section-label { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); margin: 0 0 8px; }
.section-h { font-family: var(--font-display); font-size: 18px; font-weight: 500; color: var(--ink); margin: 0 0 12px; letter-spacing: -0.01em; }

/* ============ Tables ============ */
.data-table { width: 100%; border-collapse: collapse; background: #fff; border: 1px solid var(--line); }
.data-table th { text-align: left; padding: 10px 12px; font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); border-bottom: 1px solid var(--ink); background: var(--paper-soft); }
.data-table th.right { text-align: right; }
.data-table td { padding: 12px; border-bottom: 1px solid var(--line-soft); font-family: var(--font-sans); font-size: 13px; vertical-align: middle; }
.data-table td.right { text-align: right; }
.data-table tr.row:hover { background: var(--clay-wash); cursor: pointer; }
.data-table tr.selected { background: var(--clay-wash); }
.data-table tfoot td { background: var(--paper-soft); padding: 14px 12px; font-weight: 600; border-top: 2px solid var(--ink); }

/* ============ Tags / Badges ============ */
.tag { display: inline-block; padding: 2px 6px; border-radius: 2px; font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.1em; text-transform: uppercase; }
.tag.invoice { background: var(--clay-wash); color: var(--clay-deep); }
.tag.schedule { background: var(--sage-wash); color: #4A5A38; }
.tag.expire { background: var(--amber-wash); color: #7a5a16; }
.tag.unscheduled { background: var(--sage-wash); color: #4A5A38; }
.tag.warning { background: var(--clay-wash); color: var(--clay-deep); }
.tag.alert { background: var(--rose-wash); color: var(--rose); }

/* ============ Responsive ============ */
@media (max-width: 1023px) {
  .stats-row { grid-template-columns: 1fr 1fr; }
  .side-panel { width: 100vw; }
}
@media (max-width: 767px) {
  .stats-row { grid-template-columns: 1fr; }
  .topnav { flex-wrap: wrap; }
}