:root {
  --navy: #163a59;
  --navy-2: #1c4d70;
  --blue: #168fbd;
  --blue-soft: #eaf7fc;
  --cyan: #36a9c7;
  --green: #72b82f;
  --ink: #253446;
  --muted: #788697;
  --line: #e5ebf1;
  --bg: #f5f8fa;
  --surface: #ffffff;
  --success: #4d8f20;
  --success-bg: #eef8e7;
  --warning: #a05a08;
  --warning-bg: #fff6e6;
  --danger: #be3346;
  --danger-bg: #fff0f2;
  --shadow: 0 10px 30px rgba(37, 63, 84, .08);
}

* { box-sizing: border-box; }
body { margin: 0; color: var(--ink); background: var(--bg); font-family: "IBM Plex Sans Thai", system-ui, sans-serif; }
button, input, select, textarea { font: inherit; }
button { cursor: pointer; }
.hidden { display: none !important; }

.login-shell { min-height: 100vh; display: grid; grid-template-columns: 1.1fr .9fr; background: var(--surface); }
.login-brand { position: relative; overflow: hidden; padding: 64px; display: flex; flex-direction: column; justify-content: space-between; color: white; background:linear-gradient(145deg,#117fa9 0%,#16608d 52%,#173e62 100%); }
.login-brand::before { content:""; position:absolute; width:460px; height:460px; border-radius:50%; right:-170px; top:-150px; background:linear-gradient(145deg,rgba(255,255,255,.32),rgba(83,199,205,.18)); }
.login-brand::after { content:""; position:absolute; inset:auto 8% 18% auto; width:260px; height:260px; border:1px solid rgba(255,255,255,.18); border-radius:48px; transform:rotate(18deg); }
.brand-lockup { position:relative; z-index:1; display:flex; align-items:center; gap:12px; font-family:Manrope,sans-serif; font-weight:700; font-size:22px; }
.brand-mark { width:40px; height:40px; border-radius:12px; display:grid; place-items:center; background:linear-gradient(135deg,#1599c6,#76bd34); color:#fff; font-size:17px; box-shadow:0 7px 20px rgba(22,143,189,.22); }
.login-copy { position:relative; z-index:1; max-width:560px; }
.login-copy h1 { font-size:48px; line-height:1.18; letter-spacing:-1px; margin:0 0 18px; }
.login-copy p { font-size:19px; line-height:1.7; color:#cbd7e6; margin:0; }
.login-proof { position:relative; z-index:1; display:flex; gap:28px; color:#c7d4e3; }
.login-proof strong { display:block; color:white; font-size:22px; }
.login-panel { display:grid; place-items:center; padding:40px; }
.login-card { width:min(420px,100%); }
.login-card h2 { font-size:30px; margin:0 0 6px; }
.login-card > p { color:var(--muted); margin:0 0 30px; }
.field { display:grid; gap:8px; margin-bottom:18px; }
.field label { font-weight:600; font-size:14px; }
.input { width:100%; height:46px; border:1px solid #dce5ec; border-radius:8px; padding:0 13px; outline:none; color:var(--ink); background:white; }
textarea.input { height:auto; min-height:88px; padding-top:10px; resize:vertical; }
.input:focus { border-color:#72bdd8; box-shadow:0 0 0 3px rgba(22,143,189,.10); }
.login-note { display:flex; justify-content:space-between; font-size:13px; color:var(--muted); margin:-5px 0 24px; }
.btn { border:0; border-radius:9px; height:40px; padding:0 16px; display:inline-flex; align-items:center; justify-content:center; gap:8px; font-weight:600; color:var(--ink); background:#eef1f5; transition:.16s ease; }
.btn:hover { transform:translateY(-1px); filter:brightness(.98); }
.btn-primary { background:linear-gradient(135deg,#1998c4,#117fad); color:white; box-shadow:0 5px 14px rgba(22,143,189,.18); }
.btn-outline { border:1px solid var(--line); background:white; }
.btn-danger { background:var(--danger-bg); color:var(--danger); }
.btn-block { width:100%; height:48px; }
.demo-hint { margin-top:20px; padding:13px 15px; border-radius:10px; background:var(--blue-soft); color:#34547c; font-size:13px; }

.shell { min-height:100vh; display:grid; grid-template-columns:258px minmax(0,1fr); }
.sidebar { position:fixed; inset:0 auto 0 0; width:258px; color:var(--ink); background:#fff; border-right:1px solid var(--line); display:flex; flex-direction:column; z-index:20; box-shadow:4px 0 22px rgba(27,62,88,.035); }
.sidebar .brand-lockup { height:76px; padding:0 22px; color:#20506e; border-bottom:1px solid var(--line); letter-spacing:-.3px; }
.sidebar .brand-mark { width:34px; height:34px; border-radius:10px; }
.workspace { margin:18px 15px 8px; padding:12px; background:#f5fafc; border:1px solid #dfedf2; border-radius:10px; display:flex; align-items:center; gap:10px; font-size:13px; }
.workspace-badge { width:34px; height:34px; border-radius:8px; flex:none; display:grid; place-items:center; background:#dff2f8; color:#167fa5; font-weight:800; }
.workspace small { display:block; color:#8a99a7; }
.nav { overflow:auto; padding:4px 10px 18px; }
.nav-title { padding:16px 12px 6px; color:#a0adb9; font-size:10px; font-weight:700; letter-spacing:.8px; }
.nav-item { position:relative; width:100%; height:41px; border:0; border-radius:7px; padding:0 11px; margin:2px 0; color:#5e6c7b; background:transparent; display:flex; align-items:center; gap:11px; text-align:left; }
.nav-item:hover { background:#f4f8fa; color:#1d799c; }
.nav-item.active { color:#107da8; background:#eaf7fc; font-weight:600; }
.nav-item.active::before { content:""; position:absolute; left:-10px; top:7px; bottom:7px; width:3px; border-radius:0 3px 3px 0; background:var(--blue); }
.nav-icon { width:19px; text-align:center; font-size:16px; }
.sidebar-user { margin-top:auto; padding:16px; border-top:1px solid var(--line); display:flex; align-items:center; gap:10px; }
.avatar { width:34px; height:34px; flex:none; border-radius:50%; display:grid; place-items:center; background:#dbe8ff; color:#285aaf; font-weight:700; }
.sidebar-user small { display:block; color:#8a99a7; }

.main { grid-column:2; min-width:0; }
.topbar { height:76px; padding:0 34px; display:flex; align-items:center; justify-content:space-between; background:rgba(255,255,255,.96); border-bottom:1px solid var(--line); position:sticky; top:0; z-index:10; backdrop-filter:blur(12px); }
.mobile-menu { display:none; }
.topbar-left { display:flex; align-items:center; gap:12px; }
.topbar h1 { font-size:20px; margin:0; }
.topbar small { display:block; color:var(--muted); }
.top-actions { display:flex; align-items:center; gap:10px; }
.icon-btn { width:38px; height:38px; border-radius:9px; border:1px solid var(--line); background:white; display:grid; place-items:center; position:relative; }
.notify-dot { position:absolute; right:7px; top:7px; width:7px; height:7px; border-radius:50%; background:#e35a67; border:1px solid white; }
.content { padding:30px 34px 56px; max-width:1540px; margin:auto; }
.page-heading { display:flex; align-items:flex-end; justify-content:space-between; gap:16px; margin-bottom:22px; }
.page-heading h2 { margin:0; font-size:26px; letter-spacing:-.35px; color:#24384b; }
.page-heading p { margin:3px 0 0; color:var(--muted); }
.page-actions { display:flex; gap:9px; }

.metric-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px; }
.metric-card { position:relative; overflow:hidden; background:white; border:1px solid var(--line); border-radius:14px; padding:19px; box-shadow:0 5px 18px rgba(37,63,84,.045); }
.metric-card::after { content:""; position:absolute; left:0; right:0; bottom:0; height:3px; background:#72b82f; opacity:.9; }
.metric-card:nth-child(4n+1)::after { background:#1698c5; }
.metric-card:nth-child(4n+2)::after { background:#72b82f; }
.metric-card:nth-child(4n+3)::after { background:#f1ad3d; }
.metric-card:nth-child(4n+4)::after { background:#6d85c7; }
.metric-top { display:flex; justify-content:space-between; align-items:center; color:var(--muted); font-size:13px; }
.metric-icon { width:36px; height:36px; display:grid; place-items:center; border-radius:50%; background:var(--blue-soft); color:var(--blue); }
.metric-value { margin:15px 0 5px; font-family:Manrope,"IBM Plex Sans Thai",sans-serif; font-size:25px; font-weight:700; }
.trend { font-size:12px; color:var(--success); }
.trend.down { color:var(--danger); }
.dashboard-grid { display:grid; grid-template-columns:minmax(0,1.5fr) minmax(300px,.7fr); gap:16px; margin-top:16px; }
.card { background:white; border:1px solid var(--line); border-radius:14px; box-shadow:0 5px 18px rgba(37,63,84,.04); }
.card-header { min-height:58px; padding:15px 18px; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid var(--line); }
.card-header h3 { font-size:16px; margin:0; }
.card-body { padding:18px; }
.legend { display:flex; gap:16px; font-size:12px; color:var(--muted); }
.legend span::before { content:""; display:inline-block; width:8px; height:8px; border-radius:50%; background:var(--blue); margin-right:6px; }
.legend span:last-child::before { background:#b9c7db; }
.chart { height:245px; display:flex; align-items:end; gap:12px; border-bottom:1px solid var(--line); padding:15px 8px 0; position:relative; }
.bar-group { flex:1; height:100%; display:flex; align-items:end; justify-content:center; gap:4px; position:relative; }
.bar { width:12px; border-radius:4px 4px 0 0; background:linear-gradient(#43b5d7,#168fbd); min-height:8px; }
.bar.expense { background:#c7d1df; }
.bar-label { position:absolute; bottom:-25px; font-size:11px; color:var(--muted); }
.chart-wrap { padding-bottom:25px; }
.quick-grid { display:grid; grid-template-columns:1fr 1fr; gap:9px; }
.quick { min-height:82px; border:1px solid var(--line); border-radius:10px; padding:13px; background:white; text-align:left; color:var(--ink); transition:.16s ease; }
.quick:hover { border-color:#9ed1e2; background:#f6fcfe; transform:translateY(-2px); box-shadow:0 5px 14px rgba(22,143,189,.08); }
.quick span { display:block; color:var(--blue); font-size:19px; margin-bottom:5px; }
.todo { display:flex; align-items:center; gap:12px; padding:12px 0; border-bottom:1px solid #eef1f4; }
.todo:last-child { border-bottom:0; }
.todo-icon { width:36px; height:36px; display:grid; place-items:center; border-radius:9px; background:var(--warning-bg); color:var(--warning); }
.todo b { margin-left:auto; font:700 15px Manrope,sans-serif; }

.toolbar { display:flex; align-items:center; gap:10px; padding:14px 16px; border-bottom:1px solid var(--line); }
.search { position:relative; flex:1; max-width:340px; }
.search .input { padding-left:38px; height:40px; }
.search::before { content:"⌕"; position:absolute; left:13px; top:7px; color:var(--muted); font-size:19px; z-index:1; }
.select { height:40px; border:1px solid var(--line); border-radius:9px; background:white; padding:0 32px 0 12px; color:#465467; }
.table-wrap { overflow:auto; }
table { width:100%; border-collapse:collapse; min-width:790px; }
th { height:45px; padding:0 16px; background:#f6f9fb; color:#718093; font-size:12px; font-weight:600; text-align:left; white-space:nowrap; }
td { padding:14px 16px; border-top:1px solid var(--line); font-size:13px; vertical-align:middle; }
tbody tr:hover { background:#f7fbfd; }
.name-cell { display:flex; align-items:center; gap:10px; }
.name-cell .avatar { border-radius:9px; }
.name-cell strong { display:block; }
.name-cell small { color:var(--muted); }
.money { font:600 13px Manrope,"IBM Plex Sans Thai",sans-serif; white-space:nowrap; }
.muted { color:var(--muted); }
.status { display:inline-flex; align-items:center; gap:6px; height:25px; padding:0 9px; border-radius:999px; font-size:11px; font-weight:600; background:#eef1f5; color:#5d6c7d; white-space:nowrap; }
.status::before { content:""; width:6px; height:6px; border-radius:50%; background:currentColor; }
.status.paid,.status.approved,.status.active,.status.sent { background:var(--success-bg); color:var(--success); }
.status.waiting,.status.overdue { background:var(--warning-bg); color:var(--warning); }
.status.draft { background:#eef1f5; color:#657386; }
.status.cancelled { background:var(--danger-bg); color:var(--danger); }
.action-btn { width:30px; height:30px; border:1px solid var(--line); background:white; border-radius:7px; color:#66758a; }
.pagination { padding:14px 16px; display:flex; align-items:center; justify-content:space-between; color:var(--muted); font-size:12px; border-top:1px solid var(--line); }

.modal-backdrop { position:fixed; inset:0; z-index:50; background:rgba(8,20,35,.54); display:grid; place-items:center; padding:20px; backdrop-filter:blur(2px); }
.modal { width:min(660px,100%); max-height:92vh; overflow:auto; background:white; border-radius:15px; box-shadow:0 30px 70px rgba(0,0,0,.22); }
.modal.wide { width:min(880px,100%); }
.modal-header { min-height:66px; padding:16px 22px; display:flex; justify-content:space-between; align-items:center; border-bottom:1px solid var(--line); }
.modal-header h3 { margin:0; font-size:20px; }
.close { border:0; background:#f0f2f5; width:32px; height:32px; border-radius:8px; font-size:20px; color:#687588; }
.modal-body { padding:22px; }
.form-grid { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.form-grid .field { margin:0; }
.span-2 { grid-column:1/-1; }
.modal-footer { padding:15px 22px; display:flex; justify-content:flex-end; gap:9px; border-top:1px solid var(--line); }
.line-items { margin-top:6px; border:1px solid var(--line); border-radius:10px; overflow:hidden; }
.line-head,.line-row { display:grid; grid-template-columns:2fr .55fr .8fr .85fr 34px; gap:8px; align-items:center; padding:9px; }
.line-head { background:#f7f9fb; color:var(--muted); font-size:11px; }
.line-row { border-top:1px solid var(--line); }
.line-row .input { height:36px; }
.doc-total { width:310px; margin:18px 0 0 auto; }
.total-row { display:flex; justify-content:space-between; padding:5px 0; font-size:13px; }
.total-row.grand { margin-top:7px; padding-top:10px; border-top:1px solid var(--line); font-size:16px; font-weight:700; }
.empty { padding:48px 20px; text-align:center; color:var(--muted); }
.empty-icon { width:52px; height:52px; border-radius:15px; display:grid; place-items:center; margin:0 auto 12px; background:var(--blue-soft); color:var(--blue); font-size:23px; }
.toast { position:fixed; right:24px; bottom:24px; z-index:90; background:#13263f; color:white; padding:13px 18px; border-radius:10px; box-shadow:var(--shadow); animation:toast-in .2s ease; }
@keyframes toast-in { from { transform:translateY(10px); opacity:0; } }

.payroll-summary { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-bottom:16px; }
.summary-block { padding:16px; border:1px solid var(--line); border-radius:11px; background:white; }
.summary-block small { color:var(--muted); }
.summary-block strong { display:block; font:700 20px Manrope,sans-serif; margin-top:5px; }
.summary-block.net { background:linear-gradient(135deg,#168fbd,#17668e); color:white; border-color:#168fbd; }
.summary-block.net small { color:#b8c7d8; }

@media (max-width:1100px) {
  .metric-grid { grid-template-columns:repeat(2,1fr); }
  .dashboard-grid { grid-template-columns:1fr; }
}
@media (max-width:780px) {
  .login-shell { grid-template-columns:1fr; }
  .login-brand { display:none; }
  .shell { grid-template-columns:1fr; }
  .sidebar { transform:translateX(-100%); transition:.2s ease; box-shadow:20px 0 50px rgba(0,0,0,.2); }
  .sidebar.open { transform:translateX(0); }
  .main { grid-column:1; }
  .mobile-menu { display:grid; }
  .topbar { padding:0 16px; }
  .topbar small,.top-actions .icon-btn:nth-child(1) { display:none; }
  .content { padding:20px 16px 40px; }
  .page-heading { align-items:flex-start; }
  .page-heading p { font-size:13px; }
  .page-actions .btn-outline { display:none; }
  .metric-grid { grid-template-columns:1fr 1fr; gap:10px; }
  .metric-card { padding:14px; }
  .metric-value { font-size:20px; }
  .toolbar { flex-wrap:wrap; }
  .search { max-width:none; width:100%; flex-basis:100%; }
  .form-grid { grid-template-columns:1fr; }
  .span-2 { grid-column:auto; }
  .payroll-summary { grid-template-columns:1fr; }
}
@media (max-width:480px) {
  .metric-grid { grid-template-columns:1fr; }
  .page-heading { flex-direction:column; }
  .page-actions { width:100%; }
  .page-actions .btn-primary { flex:1; }
  .quick-grid { grid-template-columns:1fr; }
}

@media print {
  body { background:white; }
  .sidebar,.topbar,.page-heading,.toolbar,.pagination,.action-btn { display:none !important; }
  .shell,.main { display:block; }
  .content { padding:0; }
  .card { border:0; box-shadow:none; }
}