:root {
  --purple-950: #2e1065;
  --purple-900: #3b0764;
  --purple-800: #4c1d95;
  --purple-700: #5b21b6;
  --purple-600: #7c3aed;
  --purple-500: #8b5cf6;
  --purple-300: #c4b5fd;
  --purple-200: #ddd6fe;
  --purple-100: #ede9fe;
  --purple-50: #f5f3ff;
  --gold-500: #f59e0b;
  --gold-400: #fbbf24;
  --gold-100: #fef3c7;
  --green-600: #059669;
  --green-100: #d1fae5;
  --red-600: #dc2626;
  --red-100: #fee2e2;
  --orange-600: #ea580c;
  --orange-100: #ffedd5;
  --blue-600: #2563eb;
  --blue-100: #dbeafe;
  --slate-950: #0f172a;
  --slate-800: #1e293b;
  --slate-700: #334155;
  --slate-600: #475569;
  --slate-500: #64748b;
  --slate-400: #94a3b8;
  --slate-300: #cbd5e1;
  --slate-200: #e2e8f0;
  --slate-100: #f1f5f9;
  --slate-50: #f8fafc;
  --white: #ffffff;
  --shadow-sm: 0 2px 8px rgba(46, 16, 101, 0.07);
  --shadow-md: 0 12px 28px rgba(46, 16, 101, 0.12);
  --shadow-lg: 0 24px 60px rgba(46, 16, 101, 0.2);
  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --sidebar-width: 286px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: 'Leelawadee UI', Tahoma, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  color: var(--slate-800);
  background: var(--slate-50);
  line-height: 1.55;
}
button, input, select, textarea { font: inherit; }
button { cursor: pointer; }
a { color: inherit; }
.hidden { display: none !important; }
.mobile-only { display: none; }

.login-screen {
  min-height: 100vh;
  display: grid;
  place-items: center;
  position: relative;
  overflow: hidden;
  padding: 32px;
  background:
    radial-gradient(circle at top left, rgba(251,191,36,.25), transparent 25%),
    radial-gradient(circle at bottom right, rgba(196,181,253,.35), transparent 30%),
    linear-gradient(135deg, #2e1065 0%, #4c1d95 48%, #7c3aed 100%);
}
.login-decoration {
  position: absolute;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.15);
}
.login-decoration-one { width: 520px; height: 520px; left: -200px; bottom: -220px; }
.login-decoration-two { width: 420px; height: 420px; right: -160px; top: -180px; }
.login-card {
  position: relative;
  z-index: 1;
  width: min(980px, 100%);
  background: rgba(255,255,255,.97);
  border: 1px solid rgba(255,255,255,.45);
  border-radius: 30px;
  padding: 38px;
  box-shadow: var(--shadow-lg);
}
.brand { display: flex; align-items: center; gap: 14px; }
.brand-login { padding-bottom: 28px; border-bottom: 1px solid var(--slate-200); }
.brand-mark {
  width: 78px;
  height: 78px;
  flex: 0 0 78px;
  display: grid;
  place-items: center;
  color: var(--white);
  font-weight: 800;
  font-size: 24px;
  border-radius: 24px;
  background: linear-gradient(145deg, var(--purple-600), var(--purple-950));
  border: 3px solid var(--gold-400);
  box-shadow: 0 12px 26px rgba(91,33,182,.25);
}
.brand-mark.small { width: 48px; height: 48px; flex-basis: 48px; border-radius: 15px; font-size: 15px; border-width: 2px; }
.brand-kicker, .brand p { margin: 0; color: var(--slate-500); font-size: 13px; }
.brand h1 { margin: 1px 0 0; color: var(--purple-800); font-size: clamp(24px, 4vw, 36px); line-height: 1.15; }
.compact h1 { font-size: 20px; color: var(--white); }
.compact p { color: rgba(255,255,255,.68); font-size: 11px; }
.login-copy { margin: 28px 0 22px; }
.eyebrow, .page-kicker {
  display: inline-flex;
  color: var(--purple-700);
  background: var(--purple-100);
  border-radius: 999px;
  padding: 4px 10px;
  font-weight: 700;
  font-size: 12px;
}
.login-copy h2 { margin: 10px 0 6px; font-size: clamp(24px, 3vw, 34px); color: var(--slate-950); }
.login-copy p { margin: 0; color: var(--slate-600); }
.login-form { display: grid; grid-template-columns: 1fr 1fr auto; gap: 14px; align-items: end; }
label { display: grid; gap: 6px; color: var(--slate-700); font-size: 13px; font-weight: 600; }
input, select, textarea {
  width: 100%;
  border: 1px solid var(--slate-300);
  border-radius: 12px;
  padding: 11px 13px;
  color: var(--slate-800);
  background: var(--white);
  outline: none;
  transition: .2s ease;
}
input:focus, select:focus, textarea:focus {
  border-color: var(--purple-500);
  box-shadow: 0 0 0 4px rgba(139,92,246,.12);
}
textarea { min-height: 100px; resize: vertical; }
.btn {
  border: none;
  border-radius: 12px;
  padding: 10px 16px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: transform .15s ease, box-shadow .15s ease, opacity .15s ease;
}
.btn:hover { transform: translateY(-1px); }
.btn:disabled { opacity: .55; cursor: not-allowed; transform: none; }
.btn-primary { color: var(--white); background: linear-gradient(135deg, var(--purple-600), var(--purple-800)); box-shadow: 0 8px 16px rgba(91,33,182,.2); }
.btn-secondary { color: var(--purple-800); background: var(--purple-100); }
.btn-success { color: var(--white); background: var(--green-600); }
.btn-danger { color: var(--white); background: var(--red-600); }
.btn-warning { color: #78350f; background: var(--gold-100); }
.btn-ghost { color: var(--slate-600); background: var(--white); border: 1px solid var(--slate-200); }
.btn-sm { padding: 7px 11px; font-size: 12px; }
.btn-full { min-height: 45px; }
.demo-login { margin-top: 26px; padding-top: 22px; border-top: 1px dashed var(--slate-300); }
.demo-title { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.demo-title span { color: var(--slate-500); font-size: 12px; }
.demo-title code { color: var(--purple-700); background: var(--purple-50); padding: 2px 7px; border-radius: 6px; }
.demo-grid { display: grid; grid-template-columns: repeat(5, minmax(0,1fr)); gap: 10px; }
.demo-account {
  border: 1px solid var(--slate-200);
  background: var(--white);
  border-radius: 12px;
  padding: 10px;
  text-align: left;
  transition: .2s ease;
}
.demo-account:hover { border-color: var(--purple-300); background: var(--purple-50); transform: translateY(-2px); }
.demo-account strong { display: block; color: var(--purple-800); font-size: 12px; }
.demo-account span { color: var(--slate-500); font-size: 11px; }
.developer-credit { margin: 24px 0 0; text-align: center; color: var(--slate-500); font-size: 12px; }

.app-shell { min-height: 100vh; }
.sidebar {
  width: var(--sidebar-width);
  position: fixed;
  inset: 0 auto 0 0;
  z-index: 30;
  display: flex;
  flex-direction: column;
  padding: 22px 16px;
  color: var(--white);
  overflow-y: auto;
  background:
    radial-gradient(circle at top right, rgba(251,191,36,.14), transparent 26%),
    linear-gradient(180deg, var(--purple-950), #3b0764 55%, #2e1065);
  box-shadow: 8px 0 30px rgba(46,16,101,.13);
}
.sidebar-head { display: flex; align-items: center; justify-content: space-between; padding: 0 5px 18px; border-bottom: 1px solid rgba(255,255,255,.1); }
.user-card {
  margin: 18px 0;
  padding: 14px;
  border-radius: 16px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.1);
}
.user-card-row { display: flex; gap: 10px; align-items: center; }
.avatar {
  width: 42px; height: 42px; flex: 0 0 42px;
  display: grid; place-items: center;
  border-radius: 14px;
  color: var(--purple-950); background: var(--gold-400);
  font-weight: 800;
}
.user-card strong { display: block; font-size: 13px; }
.user-card span { display: block; color: rgba(255,255,255,.65); font-size: 11px; }
.main-nav { display: grid; gap: 5px; }
.nav-section { margin: 14px 10px 4px; color: rgba(255,255,255,.42); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; }
.nav-item {
  width: 100%;
  border: none;
  border-radius: 12px;
  padding: 10px 12px;
  display: flex;
  align-items: center;
  gap: 10px;
  color: rgba(255,255,255,.73);
  background: transparent;
  text-align: left;
  font-weight: 600;
  font-size: 13px;
}
.nav-item:hover { background: rgba(255,255,255,.07); color: var(--white); }
.nav-item.active { background: linear-gradient(90deg, rgba(251,191,36,.22), rgba(255,255,255,.1)); color: var(--white); box-shadow: inset 3px 0 0 var(--gold-400); }
.nav-icon { width: 24px; text-align: center; font-size: 17px; }
.nav-badge { margin-left: auto; min-width: 22px; height: 22px; display: grid; place-items: center; border-radius: 999px; background: var(--gold-400); color: var(--purple-950); font-size: 10px; font-weight: 800; }
.sidebar-footer { margin-top: auto; padding: 18px 7px 0; color: rgba(255,255,255,.52); font-size: 10px; }
.sidebar-footer strong { color: rgba(255,255,255,.78); }
.regulation-note { display: flex; gap: 8px; padding: 10px; margin-bottom: 12px; border-radius: 10px; background: rgba(255,255,255,.06); }
.regulation-note p { margin: 0; }
.dot { width: 8px; height: 8px; flex: 0 0 8px; margin-top: 4px; border-radius: 50%; background: var(--gold-400); box-shadow: 0 0 0 4px rgba(251,191,36,.12); }

.main-area { margin-left: var(--sidebar-width); min-height: 100vh; display: flex; flex-direction: column; }
.topbar {
  min-height: 78px;
  position: sticky;
  top: 0;
  z-index: 20;
  padding: 13px 28px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  background: rgba(248,250,252,.93);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--slate-200);
}
.topbar-left { display: flex; align-items: center; gap: 12px; }
.page-kicker { margin: 0 0 3px; padding: 2px 7px; font-size: 10px; }
.topbar h2 { margin: 0; font-size: 22px; color: var(--slate-950); line-height: 1.2; }
.topbar-actions { display: flex; align-items: center; gap: 8px; }
.icon-btn, .notification-button, .profile-button {
  border: 1px solid var(--slate-200);
  background: var(--white);
  border-radius: 12px;
  min-width: 40px;
  height: 40px;
  display: inline-grid;
  place-items: center;
  color: var(--slate-700);
}
.notification-button { position: relative; }
.notification-button b { position: absolute; right: -5px; top: -5px; min-width: 18px; height: 18px; display: grid; place-items: center; border-radius: 999px; background: var(--red-600); color: var(--white); font-size: 9px; border: 2px solid var(--slate-50); }
.profile-button { border-radius: 999px; color: var(--purple-950); background: var(--gold-400); font-weight: 800; }
.content { flex: 1; padding: 26px 28px 38px; }
.app-footer { min-height: 58px; padding: 15px 28px; display: flex; justify-content: space-between; gap: 18px; color: var(--slate-500); background: var(--white); border-top: 1px solid var(--slate-200); font-size: 11px; }

.hero-panel {
  padding: 24px;
  border-radius: var(--radius-lg);
  color: var(--white);
  background:
    radial-gradient(circle at right top, rgba(251,191,36,.28), transparent 30%),
    linear-gradient(135deg, var(--purple-800), var(--purple-600));
  box-shadow: var(--shadow-md);
  position: relative;
  overflow: hidden;
}
.hero-panel::after { content: ''; position: absolute; width: 240px; height: 240px; border: 1px solid rgba(255,255,255,.12); border-radius: 50%; right: -80px; bottom: -110px; }
.hero-grid { position: relative; z-index: 1; display: grid; grid-template-columns: 1.4fr .6fr; gap: 22px; align-items: center; }
.hero-panel h3 { margin: 5px 0 8px; font-size: clamp(23px,3vw,32px); }
.hero-panel p { margin: 0; color: rgba(255,255,255,.78); max-width: 680px; }
.hero-actions { display: flex; justify-content: flex-end; gap: 10px; flex-wrap: wrap; }
.hero-actions .btn-ghost { border-color: rgba(255,255,255,.3); color: var(--white); background: rgba(255,255,255,.11); }

.metrics-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-top: 18px; }
.metric-card, .card {
  background: var(--white);
  border: 1px solid var(--slate-200);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
}
.metric-card { padding: 18px; position: relative; overflow: hidden; }
.metric-card::after { content:''; position:absolute; width:76px; height:76px; right:-22px; top:-22px; border-radius:50%; background: var(--purple-50); }
.metric-icon { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 11px; background: var(--purple-100); color: var(--purple-700); font-size: 19px; }
.metric-label { display: block; margin-top: 13px; color: var(--slate-500); font-size: 12px; }
.metric-value { display: flex; align-items: baseline; gap: 5px; margin-top: 2px; color: var(--slate-950); font-weight: 800; font-size: 27px; }
.metric-value small { color: var(--slate-500); font-size: 11px; font-weight: 600; }
.metric-foot { margin-top: 7px; color: var(--slate-500); font-size: 10px; }

.layout-grid { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(280px, .7fr); gap: 18px; margin-top: 18px; }
.layout-grid.equal { grid-template-columns: repeat(2,minmax(0,1fr)); }
.card { padding: 20px; }
.card-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.card-header h3, .card-header h4 { margin: 0; color: var(--slate-950); }
.card-header h3 { font-size: 17px; }
.card-header p { margin: 3px 0 0; color: var(--slate-500); font-size: 11px; }
.card-title-row { display: flex; align-items: center; gap: 9px; }
.card-title-icon { width: 32px; height: 32px; display: grid; place-items:center; border-radius: 10px; background: var(--purple-100); }

.table-wrap { width: 100%; overflow-x: auto; }
table { width: 100%; border-collapse: collapse; min-width: 720px; }
th, td { padding: 11px 12px; text-align: left; border-bottom: 1px solid var(--slate-200); vertical-align: middle; }
th { color: var(--slate-500); background: var(--slate-50); font-size: 11px; font-weight: 700; white-space: nowrap; }
td { font-size: 12px; }
tbody tr:hover { background: var(--purple-50); }
.cell-title { font-weight: 700; color: var(--slate-800); }
.cell-sub { margin-top: 2px; color: var(--slate-500); font-size: 10px; }
.status {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border-radius: 999px;
  padding: 4px 8px;
  font-size: 10px;
  font-weight: 700;
  white-space: nowrap;
}
.status::before { content:''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.status-pending { color: var(--orange-600); background: var(--orange-100); }
.status-approved { color: var(--green-600); background: var(--green-100); }
.status-rejected { color: var(--red-600); background: var(--red-100); }
.status-draft { color: var(--slate-600); background: var(--slate-100); }
.status-info { color: var(--blue-600); background: var(--blue-100); }

.progress-list { display: grid; gap: 13px; }
.progress-item { display: grid; grid-template-columns: 100px 1fr 38px; gap: 10px; align-items: center; }
.progress-item span, .progress-item strong { font-size: 11px; }
.progress-track { height: 8px; border-radius: 999px; background: var(--slate-100); overflow: hidden; }
.progress-bar { height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--purple-500), var(--purple-700)); }
.progress-item strong { text-align: right; color: var(--purple-700); }

.timeline { display: grid; gap: 0; }
.timeline-item { display: grid; grid-template-columns: 30px 1fr; gap: 10px; min-height: 64px; }
.timeline-marker { position: relative; display: grid; place-items: start center; }
.timeline-marker::before { content:''; position: absolute; top: 13px; bottom: -12px; width: 2px; background: var(--slate-200); }
.timeline-item:last-child .timeline-marker::before { display:none; }
.timeline-dot { position: relative; z-index:1; width: 12px; height: 12px; margin-top: 4px; border-radius:50%; background: var(--purple-600); box-shadow: 0 0 0 4px var(--purple-100); }
.timeline-content strong { display:block; color: var(--slate-800); font-size: 12px; }
.timeline-content span { color: var(--slate-500); font-size:10px; }
.timeline-content p { margin:3px 0 0; color:var(--slate-600); font-size:11px; }

.toolbar { display:flex; align-items:end; justify-content:space-between; flex-wrap:wrap; gap:12px; margin-bottom:16px; }
.toolbar-group { display:flex; align-items:end; gap:10px; flex-wrap:wrap; }
.toolbar label { min-width:150px; }
.search-box { position:relative; min-width:240px; }
.search-box input { padding-left:38px; }
.search-box::before { content:'⌕'; position:absolute; left:13px; top:50%; transform:translateY(-50%); color:var(--slate-400); font-size:19px; }

.form-section { padding: 18px; border:1px solid var(--slate-200); border-radius:16px; background:var(--white); }
.form-section + .form-section { margin-top:14px; }
.form-section-title { display:flex; align-items:center; gap:9px; margin-bottom:14px; }
.form-section-title span { width:30px; height:30px; display:grid; place-items:center; border-radius:10px; color:var(--purple-700); background:var(--purple-100); }
.form-section-title h3 { margin:0; font-size:15px; color:var(--slate-950); }
.form-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
.form-grid.three { grid-template-columns:repeat(3,minmax(0,1fr)); }
.form-grid .full { grid-column:1/-1; }
.field-hint { color:var(--slate-500); font-size:10px; font-weight:400; }
.required::after { content:' *'; color:var(--red-600); }
.radio-group, .check-group { display:flex; gap:9px; flex-wrap:wrap; }
.radio-option, .check-option { display:flex; align-items:center; gap:7px; padding:9px 11px; border:1px solid var(--slate-200); border-radius:11px; background:var(--white); font-size:11px; cursor:pointer; }
.radio-option input, .check-option input { width:auto; }
.rule-alert { display:flex; gap:10px; padding:12px; border-radius:12px; color:#78350f; background:var(--gold-100); border:1px solid #fde68a; font-size:11px; }
.form-actions { display:flex; justify-content:flex-end; gap:10px; margin-top:18px; }
.file-drop { padding:18px; text-align:center; border:1.5px dashed var(--purple-300); border-radius:14px; background:var(--purple-50); }
.file-drop input { border:none; padding:0; background:transparent; }
.calculation-panel { display:grid; grid-template-columns:repeat(4,1fr); gap:9px; margin-top:12px; }
.calculation-item { padding:12px; border-radius:12px; background:var(--slate-50); border:1px solid var(--slate-200); }
.calculation-item span { display:block; color:var(--slate-500); font-size:10px; }
.calculation-item strong { display:block; margin-top:3px; color:var(--purple-800); font-size:18px; }

.empty-state { padding:38px 20px; text-align:center; color:var(--slate-500); }
.empty-icon { width:64px; height:64px; margin:0 auto 12px; display:grid; place-items:center; border-radius:20px; background:var(--purple-50); font-size:28px; }
.empty-state h3 { margin:0 0 5px; color:var(--slate-800); }
.empty-state p { margin:0; font-size:12px; }

.approval-card { padding:16px; border:1px solid var(--slate-200); border-radius:14px; background:var(--white); }
.approval-card + .approval-card { margin-top:10px; }
.approval-head { display:flex; align-items:flex-start; justify-content:space-between; gap:10px; }
.approval-person { display:flex; align-items:center; gap:10px; }
.approval-detail { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px; margin:13px 0; padding:11px; background:var(--slate-50); border-radius:11px; }
.approval-detail span { display:block; color:var(--slate-500); font-size:9px; }
.approval-detail strong { display:block; color:var(--slate-800); font-size:11px; }
.approval-actions { display:flex; justify-content:flex-end; gap:8px; }

.chart-bars { min-height:220px; display:flex; align-items:end; gap:12px; padding:24px 8px 0; border-bottom:1px solid var(--slate-200); }
.chart-bar-wrap { flex:1; min-width:36px; text-align:center; }
.chart-bar { width:70%; max-width:40px; min-height:5px; margin:auto; border-radius:8px 8px 0 0; background:linear-gradient(180deg,var(--purple-500),var(--purple-800)); position:relative; }
.chart-bar b { position:absolute; top:-22px; left:50%; transform:translateX(-50%); color:var(--slate-700); font-size:10px; }
.chart-bar-wrap span { display:block; padding-top:8px; color:var(--slate-500); font-size:9px; }
.donut {
  width:180px; height:180px; margin:10px auto; border-radius:50%; position:relative;
  background:conic-gradient(var(--purple-600) 0 46%, var(--gold-400) 46% 68%, var(--green-600) 68% 85%, var(--blue-600) 85% 94%, var(--slate-300) 94% 100%);
}
.donut::after { content:''; position:absolute; inset:33px; border-radius:50%; background:var(--white); }
.donut-center { position:absolute; inset:0; z-index:1; display:grid; place-items:center; text-align:center; }
.donut-center strong { display:block; font-size:26px; color:var(--slate-950); }
.donut-center span { color:var(--slate-500); font-size:10px; }
.legend { display:grid; gap:8px; }
.legend-item { display:flex; justify-content:space-between; gap:10px; font-size:11px; }
.legend-label { display:flex; align-items:center; gap:7px; }
.legend-color { width:9px; height:9px; border-radius:3px; background:var(--purple-600); }

.modal-backdrop { position:fixed; inset:0; z-index:60; display:grid; place-items:center; padding:20px; background:rgba(15,23,42,.58); backdrop-filter:blur(4px); }
.modal { width:min(720px,100%); max-height:90vh; overflow:auto; border-radius:22px; background:var(--white); box-shadow:var(--shadow-lg); }
.modal.wide { width:min(980px,100%); }
.modal-header { position:sticky; top:0; z-index:2; display:flex; justify-content:space-between; align-items:flex-start; gap:14px; padding:20px; background:var(--white); border-bottom:1px solid var(--slate-200); }
.modal-header h3 { margin:0; color:var(--slate-950); }
.modal-header p { margin:3px 0 0; color:var(--slate-500); font-size:11px; }
.modal-close { border:none; width:34px; height:34px; border-radius:10px; background:var(--slate-100); color:var(--slate-600); font-size:20px; }
.modal-body { padding:20px; }
.modal-footer { position:sticky; bottom:0; padding:14px 20px; display:flex; justify-content:flex-end; gap:8px; background:var(--white); border-top:1px solid var(--slate-200); }
.detail-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.detail-item { padding:12px; border-radius:12px; background:var(--slate-50); }
.detail-item span { display:block; color:var(--slate-500); font-size:10px; }
.detail-item strong { display:block; margin-top:2px; color:var(--slate-800); font-size:12px; }
.detail-item.full { grid-column:1/-1; }

.toast-root { position:fixed; z-index:100; right:20px; top:20px; display:grid; gap:9px; }
.toast { min-width:280px; max-width:360px; padding:13px 15px; display:flex; gap:10px; align-items:flex-start; border-radius:13px; color:var(--slate-800); background:var(--white); border:1px solid var(--slate-200); box-shadow:var(--shadow-md); animation:toastIn .25s ease; }
.toast.success { border-left:4px solid var(--green-600); }
.toast.error { border-left:4px solid var(--red-600); }
.toast.info { border-left:4px solid var(--purple-600); }
.toast strong { display:block; font-size:12px; }
.toast span { display:block; color:var(--slate-500); font-size:10px; }
@keyframes toastIn { from { opacity:0; transform:translateY(-8px); } to { opacity:1; transform:none; } }

.notice-list { display:grid; gap:9px; }
.notice-item { display:flex; gap:10px; padding:11px; border-radius:12px; background:var(--slate-50); border:1px solid var(--slate-200); }
.notice-item.unread { background:var(--purple-50); border-color:var(--purple-200); }
.notice-item-icon { width:34px; height:34px; flex:0 0 34px; display:grid; place-items:center; border-radius:10px; background:var(--white); }
.notice-item strong { display:block; font-size:11px; }
.notice-item p { margin:2px 0; color:var(--slate-600); font-size:10px; }
.notice-item time { color:var(--slate-400); font-size:9px; }

.print-sheet { color:#111; background:#fff; font-family:'Leelawadee UI',Tahoma,sans-serif; }
.print-header { text-align:center; margin-bottom:20px; }
.print-header h2 { margin:0; font-size:20px; }
.print-header p { margin:3px 0; font-size:12px; }
.print-lines { display:grid; gap:12px; font-size:13px; }
.print-signatures { display:grid; grid-template-columns:repeat(2,1fr); gap:35px; margin-top:60px; }
.signature { text-align:center; }
.signature-line { border-bottom:1px dotted #333; height:32px; }

@media print {
  .sidebar, .topbar, .app-footer, .toolbar button, .btn, .notification-button { display:none !important; }
  .main-area { margin-left:0 !important; }
  .content { padding:0 !important; }
  .card, .metric-card, .hero-panel { box-shadow:none !important; break-inside:avoid; }
  body.print-form * { visibility:hidden !important; }
  body.print-form .print-sheet, body.print-form .print-sheet * { visibility:visible !important; }
  body.print-form .print-sheet { position:absolute; inset:0; padding:18mm; }
  body.print-form .modal-backdrop { background:#fff; padding:0; }
  body.print-form .modal { width:100%; max-height:none; overflow:visible; box-shadow:none; border-radius:0; }
  body.print-form .modal-header, body.print-form .modal-footer { display:none !important; }
  body.print-form .modal-body { padding:0; }
}

@media (max-width: 1100px) {
  .metrics-grid { grid-template-columns:repeat(2,1fr); }
  .layout-grid, .layout-grid.equal { grid-template-columns:1fr; }
  .demo-grid { grid-template-columns:repeat(3,1fr); }
  .approval-detail { grid-template-columns:repeat(2,1fr); }
}

@media (max-width: 820px) {
  .mobile-only { display:inline-grid; }
  .sidebar { transform:translateX(-105%); transition:.25s ease; }
  .sidebar.open { transform:none; }
  .sidebar-backdrop { position:fixed; inset:0; z-index:25; background:rgba(15,23,42,.55); }
  .main-area { margin-left:0; }
  .topbar { padding:12px 16px; }
  .content { padding:18px 16px 30px; }
  .app-footer { padding:14px 16px; flex-direction:column; gap:2px; }
  .login-form { grid-template-columns:1fr; }
  .demo-grid { grid-template-columns:repeat(2,1fr); }
  .hero-grid { grid-template-columns:1fr; }
  .hero-actions { justify-content:flex-start; }
  .form-grid, .form-grid.three { grid-template-columns:1fr; }
  .calculation-panel { grid-template-columns:repeat(2,1fr); }
}

@media (max-width: 540px) {
  .login-screen { padding:14px; }
  .login-card { padding:22px; border-radius:22px; }
  .brand-login { align-items:flex-start; }
  .brand-mark { width:60px; height:60px; flex-basis:60px; border-radius:18px; font-size:18px; }
  .demo-grid { grid-template-columns:1fr; }
  .demo-title { align-items:flex-start; flex-direction:column; }
  .metrics-grid { grid-template-columns:1fr; }
  .topbar-actions .btn { display:none; }
  .topbar h2 { font-size:18px; }
  .approval-detail, .detail-grid, .print-signatures { grid-template-columns:1fr; }
  .toolbar { align-items:stretch; }
  .toolbar-group, .search-box { width:100%; }
  .toolbar label { flex:1; min-width:130px; }
  .calculation-panel { grid-template-columns:1fr 1fr; }
}


/* v2.1 Personnel monitoring */
.monitor-card { border:1px solid var(--slate-200); border-radius:20px; padding:18px; margin-bottom:16px; background:#fff; box-shadow:0 8px 24px rgba(15,23,42,.05); }
.workflow-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; margin:14px 0; }
.workflow-step { display:flex; gap:10px; align-items:flex-start; border:1px solid var(--slate-200); border-radius:14px; padding:12px; min-height:94px; background:var(--slate-50); }
.workflow-step-mark { width:30px; height:30px; border-radius:999px; display:grid; place-items:center; flex:0 0 auto; font-weight:800; background:#fff; border:1px solid var(--slate-200); }
.workflow-step strong,.workflow-step span,.workflow-step small { display:block; }
.workflow-step span { font-size:12px; margin-top:3px; color:var(--slate-700); }
.workflow-step small { font-size:11px; margin-top:5px; color:var(--slate-500); }
.workflow-step.done { border-color:#a7f3d0; background:#ecfdf5; }
.workflow-step.done .workflow-step-mark { color:var(--green-600); border-color:#a7f3d0; }
.workflow-step.current { border-color:#fed7aa; background:#fff7ed; }
.workflow-step.current .workflow-step-mark { color:var(--orange-600); border-color:#fdba74; }
.workflow-step.skipped { opacity:.68; background:var(--slate-50); }
.monitor-meta { display:flex; flex-wrap:wrap; gap:8px 18px; color:var(--slate-600); font-size:12px; margin-bottom:12px; }
@media (max-width:1100px){.workflow-grid{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media (max-width:640px){.workflow-grid{grid-template-columns:1fr;}}


/* v2.3 Daily report, official duty and HR proxy submission */
.proxy-section{border:1px solid #c4b5fd;background:linear-gradient(135deg,#faf5ff,#f5f3ff)}
.daily-summary-panel{display:flex;align-items:center;justify-content:space-between;gap:16px;margin:0 0 18px;padding:14px 18px;border:1px solid #ddd6fe;border-radius:16px;background:#fff;box-shadow:var(--shadow-sm)}
.daily-summary-panel div{display:flex;flex-direction:column;gap:3px}.daily-summary-panel span{color:var(--muted);font-size:13px}
@media(max-width:700px){.daily-summary-panel{align-items:flex-start;flex-direction:column}.daily-summary-panel .btn{width:100%}}

/* v2.4 Grade privacy, searchable proxy and profile settings */
.avatar, .profile-button, .profile-avatar-large, .profile-avatar-admin { overflow:hidden; }
.avatar img, .profile-button img, .profile-avatar-large img, .profile-avatar-admin img { width:100%; height:100%; display:block; object-fit:cover; border-radius:inherit; }
.avatar-sm { width:34px; height:34px; flex-basis:34px; border-radius:10px; font-size:11px; }
.person-name-cell { display:flex; align-items:center; gap:10px; min-width:210px; }
.profile-settings-wrap { display:flex; align-items:center; gap:18px; padding:12px 0; }
.profile-avatar-large { width:112px; height:112px; flex:0 0 112px; display:grid; place-items:center; border-radius:30px; background:linear-gradient(135deg,var(--gold-400),#fde68a); color:var(--purple-950); font-size:30px; font-weight:900; box-shadow:var(--shadow-md); border:4px solid #fff; }
.profile-settings-info { display:flex; flex-direction:column; gap:5px; }
.profile-settings-info strong { font-size:20px; color:var(--slate-950); }
.profile-settings-info span { font-size:12px; color:var(--slate-500); }
.admin-avatar-panel { display:flex; align-items:center; gap:18px; padding:16px; border:1px solid var(--slate-200); border-radius:16px; background:var(--slate-50); }
.profile-avatar-admin { width:88px; height:88px; flex:0 0 88px; display:grid; place-items:center; border-radius:24px; background:linear-gradient(135deg,var(--gold-400),#fde68a); color:var(--purple-950); font-size:24px; font-weight:900; border:3px solid #fff; box-shadow:var(--shadow-sm); }
.inline-field-action { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:8px; align-items:center; }
.profile-button { padding:0; }
.profile-button img { border-radius:999px; }
@media(max-width:640px){.profile-settings-wrap,.admin-avatar-panel{align-items:flex-start;flex-direction:column}.profile-avatar-large{width:92px;height:92px;flex-basis:92px}.inline-field-action{grid-template-columns:1fr}.inline-field-action .btn{width:100%}}


/* v2.5 Multi-class substitute assignments and cross-device responsive UI */
html { -webkit-text-size-adjust:100%; }
body { padding-left:env(safe-area-inset-left); padding-right:env(safe-area-inset-right); }
.topbar { padding-top:max(12px,env(safe-area-inset-top)); }
.app-footer { padding-bottom:max(14px,env(safe-area-inset-bottom)); }
button,.btn,input,select,textarea { touch-action:manipulation; }
.table-wrap { -webkit-overflow-scrolling:touch; overscroll-behavior-inline:contain; }
.assignment-builder { border:1px solid var(--purple-200); border-radius:16px; overflow:hidden; background:var(--purple-50); }
.assignment-builder-head { display:flex; justify-content:space-between; align-items:center; gap:12px; padding:14px; border-bottom:1px solid var(--purple-200); background:#fff; }
.assignment-builder-head strong,.assignment-builder-head span { display:block; }
.assignment-builder-head span { margin-top:3px; color:var(--slate-500); font-size:10px; }
.assignment-rows { display:grid; gap:10px; padding:12px; }
.teaching-assignment-row { display:grid; grid-template-columns:34px minmax(145px,.85fr) minmax(125px,.8fr) minmax(105px,.6fr) minmax(150px,1fr) minmax(210px,1.4fr) auto; gap:9px; align-items:end; padding:12px; border:1px solid var(--slate-200); border-radius:14px; background:#fff; box-shadow:var(--shadow-sm); }
.assignment-number { width:30px; height:30px; display:grid; place-items:center; align-self:center; border-radius:10px; color:var(--purple-700); background:var(--purple-100); font-weight:800; }
.assignment-task { min-width:0; }
.assignment-remove { margin-bottom:1px; }
.decision-assignment-list { display:grid; gap:10px; }
.decision-assignment-row { display:grid; grid-template-columns:34px minmax(230px,1fr) minmax(260px,1.15fr); gap:12px; align-items:center; padding:13px; border:1px solid var(--slate-200); border-radius:14px; background:var(--slate-50); }
.decision-assignment-info strong,.decision-assignment-info span { display:block; }
.decision-assignment-info span { margin-top:4px; color:var(--slate-500); font-size:10px; }
.substitute-table { min-width:1180px; }

@media (hover:none) and (pointer:coarse) {
  .btn,button,.notification-button,.profile-button,.sidebar-toggle { min-height:44px; }
  input,select,textarea { min-height:44px; }
}
@media (max-width:1100px) {
  .teaching-assignment-row { grid-template-columns:34px repeat(3,minmax(120px,1fr)); }
  .teaching-assignment-row .assignment-task { grid-column:2/4; }
  .teaching-assignment-row .assignment-remove { grid-column:4; }
}
@media (max-width:820px) {
  input,select,textarea { font-size:16px; }
  .assignment-builder-head { align-items:stretch; flex-direction:column; }
  .assignment-builder-head .btn { width:100%; }
  .teaching-assignment-row { grid-template-columns:34px 1fr; align-items:stretch; }
  .teaching-assignment-row label,.teaching-assignment-row .assignment-task,.teaching-assignment-row .assignment-remove { grid-column:2; }
  .teaching-assignment-row .assignment-number { grid-row:1/7; align-self:start; position:sticky; top:6px; }
  .teaching-assignment-row .assignment-remove { width:100%; }
  .decision-assignment-row { grid-template-columns:34px 1fr; align-items:start; }
  .decision-assignment-row label { grid-column:2; }
  .modal-backdrop { align-items:end; padding:0; }
  .modal,.modal.wide { width:100%; max-height:94dvh; border-radius:22px 22px 0 0; padding-bottom:env(safe-area-inset-bottom); }
}
@media (max-width:640px) {
  .content { padding-left:12px; padding-right:12px; }
  .form-section { padding:14px; border-radius:14px; }
  .form-actions { position:sticky; bottom:0; z-index:5; margin:18px -14px -14px; padding:12px 14px max(12px,env(safe-area-inset-bottom)); background:rgba(255,255,255,.96); border-top:1px solid var(--slate-200); backdrop-filter:blur(10px); }
  .form-actions .btn { flex:1; }
  .substitute-table-wrap { overflow:visible; }
  .substitute-table { min-width:0; width:100%; }
  .substitute-table thead { display:none; }
  .substitute-table,.substitute-table tbody,.substitute-table tr,.substitute-table td { display:block; }
  .substitute-table tr { margin-bottom:12px; padding:12px; border:1px solid var(--slate-200); border-radius:14px; background:#fff; box-shadow:var(--shadow-sm); }
  .substitute-table td { display:grid; grid-template-columns:115px minmax(0,1fr); gap:10px; padding:7px 0; border:none; }
  .substitute-table td::before { content:attr(data-label); color:var(--slate-500); font-size:10px; font-weight:700; }
  .substitute-table td .btn { width:100%; }
}


/* v2.6 Admin-only development information */
.admin-development-badge {
  margin: 10px 0 14px; padding: 10px 12px; border: 1px solid rgba(251,191,36,.42);
  border-radius: 12px; background: rgba(251,191,36,.11); color: #fff; font-size: 12px; line-height: 1.5;
}
.admin-development-badge strong, .admin-development-badge span { display:block; }
.admin-development-badge span { opacity:.82; margin-top:2px; }
.admin-management-note { border-left:4px solid var(--gold-500); }
.admin-edit-assignment-row { display:grid; grid-template-columns:42px 1.15fr 1fr .8fr 1fr 1.4fr 1.25fr auto; gap:10px; align-items:end; padding:12px; border:1px solid var(--slate-200); border-radius:14px; margin-bottom:10px; background:#fff; }
.admin-edit-assignment-row .assignment-number { align-self:center; }
@media (max-width: 1100px) { .admin-edit-assignment-row { grid-template-columns:42px repeat(2,minmax(0,1fr)); } .admin-edit-assignment-row .admin-assignment-wide { grid-column:span 2; } }
@media (max-width: 680px) { .admin-edit-assignment-row { grid-template-columns:1fr; } .admin-edit-assignment-row .assignment-number, .admin-edit-assignment-row .admin-assignment-wide { grid-column:auto; } }


/* v3.0 Installable PWA */
.btn-install{background:linear-gradient(135deg,#5b21b6,#8b3fe3);color:#fff;border:1px solid rgba(255,255,255,.28);box-shadow:0 10px 24px rgba(91,33,182,.22)}
.btn-install:hover{transform:translateY(-1px);box-shadow:0 14px 30px rgba(91,33,182,.28)}
.pwa-status{margin:0;text-align:center;font-size:.86rem;color:#66728a;line-height:1.55}.pwa-status[data-kind="success"]{color:#087f5b}.pwa-status[data-kind="warning"]{color:#b45309}
.network-status-banner{position:fixed;z-index:10020;left:50%;bottom:max(18px,env(safe-area-inset-bottom));transform:translateX(-50%);padding:10px 16px;border-radius:999px;color:#fff;font-weight:700;font-size:.88rem;box-shadow:0 12px 30px rgba(0,0,0,.18);transition:.2s}.network-status-banner.offline{background:#b45309}.network-status-banner.online{background:#087f5b}.network-status-banner.hidden{display:none}
.pwa-update-bar{position:fixed;z-index:10015;left:50%;bottom:max(18px,env(safe-area-inset-bottom));transform:translateX(-50%);background:#1f1634;color:#fff;border-radius:18px;padding:12px 14px 12px 18px;display:flex;align-items:center;gap:16px;box-shadow:0 16px 40px rgba(32,17,58,.3)}.pwa-update-bar button{border:0;border-radius:12px;padding:9px 13px;background:#ffc400;color:#362100;font-weight:800;cursor:pointer}
.pwa-modal-backdrop{position:fixed;inset:0;z-index:11000;background:rgba(22,12,42,.62);backdrop-filter:blur(8px);display:grid;place-items:center;padding:20px}.pwa-modal{position:relative;width:min(500px,100%);background:#fff;border-radius:26px;padding:30px;box-shadow:0 30px 80px rgba(24,10,52,.35)}.pwa-modal-close{position:absolute;right:16px;top:14px;border:0;background:#f1edfa;width:38px;height:38px;border-radius:12px;font-size:24px;cursor:pointer}.pwa-guide-icon{width:76px;height:76px;border-radius:22px;background:#5b21b6;border:4px solid #ffc400;color:#fff;display:grid;place-items:center;font-size:24px;font-weight:900;margin-bottom:18px}.pwa-modal h2{margin:0 0 8px}.pwa-modal>p{color:#66728a;line-height:1.65}.pwa-modal ol{padding-left:24px;line-height:1.9}.pwa-warning{background:#fff7e6;border:1px solid #ffd8a8;color:#9a4b00;border-radius:14px;padding:12px 14px;margin:16px 0}
@media (max-width:680px){.topbar-actions .btn-install{font-size:0;width:42px;height:42px;padding:0;border-radius:14px}.topbar-actions .btn-install::after{content:'⬇';font-size:18px}.pwa-update-bar{width:calc(100% - 28px);justify-content:space-between}.pwa-modal{padding:26px 22px}}
@media (display-mode:standalone){body{overscroll-behavior-y:none}.login-screen,.app-shell{min-height:100dvh}.topbar{padding-top:max(10px,env(safe-area-inset-top))}.sidebar{padding-bottom:max(12px,env(safe-area-inset-bottom))}}

.login-mode-hint {
  margin: 12px 0 0;
  color: var(--muted, #64748b);
  font-size: .88rem;
  line-height: 1.55;
}
html[data-data-mode="supabase"] .login-mode-hint::before {
  content: "● ";
  color: #16a34a;
}
html[data-data-mode="local-preview"] .login-mode-hint::before {
  content: "● ";
  color: #d97706;
}