:root {
  --primary: #1d5b8f;
  --primary-dark: #123f66;
  --bg: #f4f6f8;
  --card-bg: #ffffff;
  --border: #dfe4ea;
  --text: #1f2933;
  --text-muted: #6b7480;
  --success-bg: #e6f6ec;
  --success-text: #146c3a;
  --error-bg: #fdecec;
  --error-text: #a4262c;
}
* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: "Segoe UI", "Malgun Gothic", "Apple SD Gothic Neo", sans-serif;
  background: var(--bg);
  color: var(--text);
}
.app-shell { display: flex; min-height: 100vh; }
.sidebar { width: 220px; background: var(--primary-dark); color: #fff; flex-shrink: 0; padding: 20px 0; }
.sidebar .brand { font-size: 18px; font-weight: 700; padding: 0 20px 20px; border-bottom: 1px solid rgba(255,255,255,0.15); margin-bottom: 10px; }
.sidebar nav a { display: block; padding: 12px 20px; color: #dce8f2; text-decoration: none; font-size: 14px; }
.sidebar nav a:hover, .sidebar nav a.active { background: var(--primary); color: #fff; }
.sidebar nav a.disabled { color: #7c93a8; cursor: default; }
.sidebar nav .section-label { padding: 16px 20px 4px; font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; color: #7c93a8; }
.main { flex: 1; padding: 28px 36px 48px; max-width: 1320px; }
.topbar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; }
.topbar .user-info { font-size: 14px; color: var(--text-muted); }
.topbar .user-info a { color: var(--primary); text-decoration: none; margin-left: 12px; }
h1 { font-size: 22px; margin: 0 0 20px; }
h2 { font-size: 18px; margin: 0 0 12px; }
.card { background: var(--card-bg); border: 1px solid var(--border); border-radius: 8px; padding: 20px; margin-bottom: 20px; }
.stat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-bottom: 24px; }
.stat-card { background: var(--card-bg); border: 1px solid var(--border); border-radius: 8px; padding: 20px; text-align: center; }
.stat-card .num { font-size: 28px; font-weight: 700; color: var(--primary-dark); }
.stat-card .label { font-size: 13px; color: var(--text-muted); margin-top: 4px; }
table { width: 100%; border-collapse: collapse; font-size: 14px; }
th, td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--border); }
th { background: #f0f3f6; font-weight: 600; color: var(--text-muted); font-size: 12px; text-transform: uppercase; }
tr:hover td { background: #fafbfc; }
.btn { display: inline-block; padding: 8px 16px; background: var(--primary); color: #fff; border: none; border-radius: 6px; font-size: 14px; text-decoration: none; cursor: pointer; }
.btn:hover { background: var(--primary-dark); }
.btn.secondary { background: #fff; color: var(--primary); border: 1px solid var(--primary); }
.btn.danger { background: #c0392b; }
.btn.small { padding: 4px 10px; font-size: 12px; }
.actions-row { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.form-group { margin-bottom: 14px; }
.form-group.full { grid-column: 1 / -1; }
.form-group label { display: block; font-size: 13px; margin-bottom: 6px; color: var(--text-muted); }
.form-group input, .form-group select, .form-group textarea { width: 100%; padding: 9px 10px; border: 1px solid var(--border); border-radius: 6px; font-size: 14px; font-family: inherit; }
.form-actions { margin-top: 20px; display: flex; gap: 10px; }
.badge { display: inline-block; padding: 2px 9px; border-radius: 12px; font-size: 12px; }
.badge.active { background: var(--success-bg); color: var(--success-text); }
.badge.inactive { background: #eee; color: #888; }
.flash { padding: 12px 16px; border-radius: 6px; margin-bottom: 16px; font-size: 14px; }
.flash.success { background: var(--success-bg); color: var(--success-text); }
.flash.error { background: var(--error-bg); color: var(--error-text); }
.login-wrap { min-height: 100vh; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, var(--primary-dark), var(--primary)); }
.login-card { background: #fff; border-radius: 10px; padding: 36px 32px; width: 340px; box-shadow: 0 10px 30px rgba(0,0,0,0.2); }
.login-card h1 { text-align: center; margin-bottom: 4px; }
.login-card .subtitle { text-align: center; color: var(--text-muted); font-size: 13px; margin-bottom: 24px; }
.login-card .btn { width: 100%; padding: 11px; font-size: 15px; margin-top: 6px; }
.empty-state { text-align: center; padding: 40px; color: var(--text-muted); }

/* Finance dashboard */
.dashboard-hero { display:flex; justify-content:space-between; gap:24px; align-items:flex-end; margin:4px 0 24px; }
.dashboard-hero h1 { font-size:32px; letter-spacing:-.04em; margin:2px 0 6px; color:#17253b; }
.eyebrow { color:#71809a; font-size:11px; font-weight:700; letter-spacing:.12em; margin:0 0 7px; }
.hero-copy { color:#71809a; font-size:14px; margin:0; }
.period-picker { background:#fff; border:1px solid #e5eaf2; box-shadow:0 8px 20px rgba(31,48,79,.06); border-radius:12px; padding:12px 14px; min-width:360px; }
.period-picker label { display:block; color:#71809a; font-size:11px; font-weight:700; margin-bottom:7px; letter-spacing:.08em; }
.period-picker div { display:flex; gap:8px; align-items:center; }
.period-picker select { border:0; background:#f5f7fb; border-radius:7px; padding:8px; color:#27364e; font-weight:600; }
.period-picker span { color:#a6b1c3; }.period-picker .btn { padding:8px 13px; }
.metric-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-bottom:16px; }
.metric-card { padding:20px; border-radius:14px; color:#fff; box-shadow:0 10px 22px rgba(36,53,85,.12); min-height:126px; display:flex; flex-direction:column; }
.metric-card span { font-size:12px; opacity:.76; font-weight:700; letter-spacing:.04em; }.metric-card strong { font-size:25px; letter-spacing:-.04em; margin:14px 0 5px; white-space:nowrap; }.metric-card small { font-size:12px; opacity:.72; }
.metric-card.revenue { background:linear-gradient(135deg,#526ce7,#7894ff); }.metric-card.cogs { background:linear-gradient(135deg,#e99345,#f5b76b); }.metric-card.expense { background:linear-gradient(135deg,#cf6382,#ed92ad); }.metric-card.profit { background:linear-gradient(135deg,#257b72,#47a99a); }
.dashboard-grid { display:grid; grid-template-columns:minmax(0,1.65fr) minmax(290px,.85fr); gap:16px; margin-bottom:16px; }.lower-grid { grid-template-columns:1fr 1fr; }
.panel { background:#fff; border:1px solid #e5eaf2; border-radius:14px; padding:20px; box-shadow:0 7px 22px rgba(37,52,78,.05); overflow:hidden; }.panel h2 { color:#24344d; letter-spacing:-.02em; margin:0; }.panel-heading { display:flex; align-items:flex-start; justify-content:space-between; gap:14px; margin-bottom:14px; }.panel-total { color:#334e80; font-size:18px; }.asof { color:#8795aa; font-size:11px; font-weight:700; padding-top:6px; }
.trend-chart { width:100%; height:auto; display:block; min-height:238px; }.chart-grid { stroke:#e8edf4; stroke-width:1; }.chart-axis { fill:#94a0b3; font-size:10px; font-family:Arial,sans-serif; }.chart-legend { display:flex; gap:12px; flex-wrap:wrap; font-size:11px; color:#7d8b9f; }.legend-dot { display:inline-block; width:8px; height:8px; border-radius:50%; margin-right:4px; }.revenue-dot { background:#5b7cfa; }.cogs-dot { background:#f6a65a; }.expense-dot { background:#e77291; }
.balance-stack { display:grid; gap:9px; }.balance-card { background:#f6f8fc; border-radius:10px; padding:13px 14px; display:flex; justify-content:space-between; gap:8px; align-items:center; }.balance-card span { color:#77869c; font-size:12px; }.balance-card strong { color:#2a3b58; font-size:16px; }.cash-note { color:#98a4b5; font-size:11px; margin-top:14px; }
.receipt-total { background:linear-gradient(135deg,#f0f4ff,#f8faff); border-radius:10px; padding:14px; display:flex; align-items:baseline; gap:10px; }.receipt-total strong { color:#3e5fc3; font-size:23px; }.receipt-total span { color:#8090aa; font-size:12px; }.channel-list { margin-top:10px; }.channel-row { display:flex; justify-content:space-between; border-bottom:1px solid #edf1f6; padding:10px 2px; color:#71809a; font-size:13px; }.channel-row strong { color:#344765; }
.non-account-revenue { margin-top:10px; padding:11px 13px; border:1px solid #f0ddbc; border-radius:10px; background:#fffaf1; }.non-account-revenue span { display:block; color:#9a6a20; font-size:11px; margin-bottom:5px; }.non-account-revenue strong { color:#7b5112; font-size:16px; }.non-account-revenue small { color:#9c7b47; font-size:11px; font-weight:600; }
.flow-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }.flow-grid div, .flow-grid .flow-link { background:#f6f8fc; border-radius:10px; padding:13px; }.flow-grid .flow-link { display:block; border:1px solid #d9e4ff; text-decoration:none; }.flow-grid .flow-link:hover { background:#eef3ff; }.flow-grid span { display:block; color:#7b899c; font-size:11px; margin-bottom:7px; }.flow-grid strong { color:#2a3b58; font-size:15px; white-space:nowrap; }.flow-grid small { display:block; color:#4a67c9; font-size:10px; margin-top:6px; }.flow-grid strong.negative { color:#b03c4d; }
.table-panel { margin-bottom:16px; }.table-scroll { overflow:auto; }.mini-table table, .table-panel table { font-size:13px; }.mini-table th, .mini-table td, .table-panel th, .table-panel td { padding:10px 8px; }.mini-table th, .table-panel th { background:transparent; color:#95a1b3; }.mini-table tr:last-child td, .table-panel tr:last-child td { border-bottom:0; }
.ap-summary-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin:16px 0 26px; }.ap-summary-card { background:#fff; border:1px solid #e3e9f2; border-radius:12px; padding:17px; box-shadow:0 7px 20px rgba(37,52,78,.05); }.ap-summary-card > span { display:block; color:#77869c; font-size:12px; font-weight:700; margin-bottom:10px; }.ap-summary-card.due { border-color:#f1d7a9; background:#fffcf5; }.dual-money { display:flex; flex-direction:column; gap:3px; white-space:nowrap; }.dual-money strong { color:#2c405f; font-size:14px; }.dual-money span { color:#8796aa; font-size:12px; }.payment-status { display:inline-block; border-radius:99px; padding:4px 8px; font-size:11px; font-weight:700; white-space:nowrap; }.payment-status.paid { background:#e7f7ee; color:#167044; }.payment-status.partial { background:#fff2d8; color:#a86100; }.payment-status.unpaid { background:#fde9eb; color:#b03c4d; }
.ap-filter { display:flex; align-items:flex-end; gap:10px; flex-wrap:wrap; margin:0 0 16px; padding:14px; background:#fff; border:1px solid #e3e9f2; border-radius:12px; box-shadow:0 7px 20px rgba(37,52,78,.05); }.ap-filter div { display:flex; flex-direction:column; gap:5px; }.ap-filter label { color:#71809a; font-size:11px; font-weight:700; letter-spacing:.04em; }.ap-filter select { min-width:150px; padding:8px 10px; border:1px solid #dfe6f0; border-radius:7px; background:#f8faff; color:#27364e; font:inherit; }.ap-filter .btn { padding:8px 13px; }
.table-note { margin:-4px 0 10px; color:#7b899c; font-size:12px; }.schedule-table table { min-width:1060px; }.schedule-table th { white-space:nowrap; text-align:center; }.schedule-table td { vertical-align:middle; text-align:center; min-width:122px; }.schedule-table td:first-child, .schedule-table td:nth-child(2) { min-width:110px; text-align:left; }.schedule-table .carry-col { background:#fff7e8; color:#a86100; }.schedule-table td:nth-child(3) { background:#fffdf7; }.schedule-table .dual-money { align-items:center; }.schedule-table .payment-status { margin-top:4px; }.schedule-table .schedule-balance { display:block; margin-top:4px; color:#a86100; font-size:10px; font-weight:700; white-space:nowrap; }.schedule-table tfoot th { background:#f6f8fc; }.schedule-empty { color:#a5afbd; }
.attendance-grid table { min-width:2000px; font-size:12px; border-collapse:separate; border-spacing:0; }.attendance-grid th, .attendance-grid td { padding:4px 5px; text-align:center; white-space:nowrap; border-bottom:1px solid #eef1f6; border-right:1px solid #eef1f6; }.attendance-grid thead th { background:#f6f8fc; font-weight:700; color:#4a5568; vertical-align:top; }.attendance-grid td.meta-name, .attendance-grid th.meta-name { text-align:left; }.attendance-grid .meta-col { position:sticky; background:#fff; z-index:2; }.attendance-grid thead .meta-col { background:#f6f8fc; z-index:4; }.attendance-grid .meta-no { left:0; width:32px; min-width:32px; }.attendance-grid .meta-dept { left:32px; width:76px; min-width:76px; }.attendance-grid .meta-name { left:108px; width:96px; min-width:96px; }.attendance-grid .meta-staffno { left:204px; width:64px; min-width:64px; }.attendance-grid .day-col { min-width:30px; }.attendance-grid .ot-row-cell { color:#a86100; font-weight:700; background:#fffaf1; }.attendance-grid .grid-filter { width:100%; max-width:100px; margin-top:3px; font-size:11px; padding:2px 3px; border:1px solid #dfe6f0; border-radius:4px; box-sizing:border-box; font-weight:400; }.attendance-grid .sunday-col { background:#fdf2f2; color:#c98a90; }.attendance-grid thead .sunday-col { background:#fdeaea; }
.daily-report-stats { margin:18px 0; }.stat-card.good .num { color:#167044; }.stat-card.warn .num { color:#a86100; }.stat-card.muted .num { color:#77869c; }
.daily-report-card { padding:0; overflow:hidden; box-shadow:0 10px 26px rgba(37,52,78,.06); }
table.daily-report-table { width:auto; min-width:0; border-collapse:separate; border-spacing:0; table-layout:auto; }
.daily-report-table th, .daily-report-table td { text-align:center; padding:6px 5px; white-space:nowrap; }
.daily-report-table thead th { background:#f6f8fc; color:#6b7684; font-size:10.5px; font-weight:700; text-transform:uppercase; letter-spacing:.01em; border-bottom:2px solid var(--border); position:sticky; top:0; }
.daily-report-table tbody tr:not(.group-label-row):not(.subtotal-row):hover td { background:#f8faff; }
.daily-report-table tbody tr:not(.group-label-row):not(.subtotal-row):nth-child(even) td { background:#fbfcfe; }
.daily-report-table .dept-cell { text-align:left; font-weight:600; color:#2c405f; }
.daily-report-table .num-cell { font-variant-numeric:tabular-nums; color:#3a4a63; }
.daily-report-table .cell-warn { color:#b03c4d; font-weight:700; }
.daily-report-table .cell-muted { color:#8796aa; }
.daily-report-table .cell-strong { font-weight:700; color:#1f2933; }
.daily-report-table .group-label-row td { text-align:left; background:#eef2fb; color:#4a67c9; font-size:11px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; padding:7px 12px; border-top:1px solid var(--border); border-bottom:1px solid var(--border); }
.daily-report-table .subtotal-row td { background:#f6f8fc; font-weight:700; border-top:1px solid var(--border); }
.daily-report-table .grand-row td { background:#1d5b8f; color:#fff; font-weight:800; }
.daily-report-table .grand-row .dept-cell, .daily-report-table .grand-row .num-cell, .daily-report-table .grand-row .cell-strong { color:#fff; }
.role-pill { display:inline-block; min-width:22px; padding:2px 7px; border-radius:99px; font-size:12px; font-weight:700; background:#eef1f6; color:#4a5568; }
.role-pill.role-mgr { background:#efe6fb; color:#6b3fa0; }.role-pill.role-super { background:#e3ecff; color:#3457c9; }.role-pill.role-leader { background:#e0f5f0; color:#12806f; }.role-pill.role-op { background:#f1f3f6; color:#4a5568; }.role-pill.role-helper { background:#fdf0e3; color:#a8641f; }
.daily-report-table .cell-good { color:#167044; font-weight:700; }
.daily-report-table .remark-cell { text-align:left; white-space:normal; min-width:150px; font-size:11px; color:#8a5a1f; background:#fffaf1; }
.daily-report-table .subtotal-row .remark-cell, .daily-report-table .grand-row .remark-cell { background:transparent; }
.report-footer-summary { display:flex; flex-wrap:wrap; gap:18px; padding:12px 16px; border-top:1px solid var(--border); background:#f9fafc; font-size:13px; color:#3a4a63; }
.report-footer-summary strong { color:#1f2933; margin-right:4px; }
.print-header { display:flex; align-items:flex-start; justify-content:space-between; margin-bottom:14px; }
.sign-boxes { display:flex; gap:8px; }
.sign-box { display:flex; flex-direction:column; align-items:center; gap:6px; border:1px solid var(--border); border-radius:8px; padding:8px 14px 10px; min-width:78px; background:#fff; }
.sign-box span { font-size:11px; font-weight:700; color:#71809a; letter-spacing:.04em; }
.sign-box .sign-line { width:100%; height:34px; border-bottom:1px solid #b7c0cf; }
@media print {
  .no-print, .sidebar, .topbar, .flash { display:none !important; }
  .app-shell { display:block; }
  .main { padding:0; max-width:none; }
  body { background:#fff; }
  @page { size:A4 landscape; margin:6mm; }
  .print-sheet { padding:0; width:fit-content; max-width:100%; }
  .daily-report-stats { display:none; }
  .print-header { margin-bottom:3px; }
  .print-header h2 { font-size:14.5px; }
  .eyebrow { margin-bottom:0; font-size:9px; }
  .daily-report-card { box-shadow:none; border:1px solid #000; break-inside:avoid; page-break-inside:avoid; }
  table.daily-report-table { min-width:0; width:auto; table-layout:auto; border-collapse:collapse; }
  .daily-report-table th, .daily-report-table td { padding:1.3px 8px; font-size:12px; line-height:1.1; white-space:nowrap; }
  .daily-report-table thead th { padding:1.6px 8px; }
  .role-pill, .payment-status { padding:0 7px; font-size:10.5px; border-radius:6px; min-width:0; }
  .daily-report-table .group-label-row td { padding:1.6px 8px; font-size:11px; }
  .daily-report-table .remark-cell { font-size:10.5px; min-width:0; white-space:nowrap; }
  .report-footer-summary { padding:3.6px 18px; font-size:12px; gap:22px; border-top-width:1px; }
  .sign-boxes { gap:6.5px; }
  .sign-box { min-width:82px; padding:1.3px 13px 2.6px; gap:2px; }
  .sign-box span { font-size:10px; }
  .sign-box .sign-line { height:17px; }
}
.excel-col-preview { overflow:auto; margin:10px 0; border:1px solid #cfd9ea; border-radius:8px; }
.excel-col-preview table { border-collapse:separate; border-spacing:0; min-width:100%; }
.excel-col-preview th { background:#eef1f6; color:#5d6b80; font-size:11px; font-weight:700; text-align:center; padding:5px 4px; border-bottom:1px solid #cfd9ea; border-right:1px solid #e4eaf3; }
.excel-col-preview th:last-child, .excel-col-preview td:last-child { border-right:0; }
.excel-col-preview td { background:#fff; text-align:center; padding:8px 10px; font-size:12px; font-weight:700; color:#27364e; border-right:1px solid #e4eaf3; white-space:nowrap; }
.excel-col-preview td small { display:block; font-weight:400; color:#8796aa; font-size:11px; margin-top:2px; white-space:normal; }
@media (max-width:900px) { .main { padding:22px 18px 38px; }.dashboard-hero { align-items:stretch; flex-direction:column; }.period-picker { min-width:0; }.metric-grid { grid-template-columns:repeat(2,1fr); }.dashboard-grid,.lower-grid { grid-template-columns:1fr; }.sidebar { width:190px; } }
@media (max-width:620px) { .app-shell { display:block; }.sidebar { width:100%; padding:12px 0; }.sidebar .brand { padding-bottom:12px; }.sidebar nav { display:flex; overflow:auto; }.sidebar nav a { white-space:nowrap; padding:9px 12px; }.sidebar nav .section-label,.sidebar nav a.disabled { display:none; }.topbar { margin-bottom:12px; }.metric-grid { grid-template-columns:1fr; }.period-picker div { flex-wrap:wrap; }.chart-panel { padding:14px; }.ap-filter { align-items:stretch; }.ap-filter div, .ap-filter select { width:100%; } }