:root {
  --topbar: 68px;
  --demo-topbar: 68px;
  --sidebar: 252px;
  --demo-sidebar: 252px;
  --primary: #087451;
  --primary-dark: #075d42;
  --primary-soft: #e5f6ef;
  --ink: #152638;
  --muted: #687786;
  --line: #dce4e8;
  --canvas: #f5f7f9;
  --surface: #fff;
  --radius: 8px;
  --shadow: 0 1px 2px rgba(16,35,50,.04), 0 8px 24px rgba(16,35,50,.055);
}

body {
  background: var(--canvas);
  color: var(--ink);
  font-family: var(--font, "Noto Sans Thai", "Leelawadee UI", Tahoma, sans-serif);
  font-size: 15px;
  line-height: 1.55;
  letter-spacing: 0;
}

.setup-step-grid { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:12px; }
.setup-step { min-height:64px; display:flex; align-items:center; gap:10px; padding:12px; border:1px solid #d9e2e8; background:#f8fafb; border-radius:6px; color:#64748b; }
.setup-step svg { width:20px; height:20px; flex:0 0 auto; }
.setup-step.complete { border-color:#9edfc3; background:#edf9f3; color:#08784d; }
@media (max-width: 900px) { .setup-step-grid { grid-template-columns:1fr 1fr; } }
@media (max-width: 520px) { .setup-step-grid { grid-template-columns:1fr; } }

.demo-topbar, .app-topbar {
  min-height: 68px;
  padding: 8px 24px;
  background: #fff;
  border-bottom: 1px solid #dfe6e9;
  box-shadow: 0 1px 8px rgba(20,41,55,.04);
}

.demo-topbar .app-brand, .app-topbar .app-brand { gap: 12px; min-width: 0; }
.app-brand strong { color: #14324a; font-size: 17px; font-weight: 800; line-height: 1.25; }
.app-brand small { margin-top: 2px; color: #71808d; font-size: 11px; }
.brand-logo { width: 34px; height: 48px; flex: 0 0 auto; object-fit: contain; }
.topbar-actions { display: flex; align-items: center; gap: 8px; }
.topbar-actions, .topbar-user { padding-left: 14px; border-left: 1px solid var(--line); }
.avatar { width: 38px; height: 38px; border: 1px solid #c6eadb; border-radius: 8px; background: #e3f7ee; }
.notification-menu { position: relative; }
.notification-button { position: relative; }
.notification-dot { position: absolute; top: 1px; right: 0; display: grid; place-items: center; min-width: 18px; height: 18px; padding: 0 5px; border: 2px solid #fff; border-radius: 999px; background: #dc2f46; color: #fff; font-size: 10px; font-weight: 800; line-height: 1; }
.notification-dot[hidden] { display: none !important; }
.notification-dropdown, .notification-dropdown.dropdown-menu { position: absolute; z-index: 1050; top: calc(100% + 10px); right: 0; left: auto; width: min(380px,calc(100vw - 24px)); padding: 0; overflow: hidden; border: 1px solid #d8e2e6; border-radius: 8px; background: #fff; box-shadow: 0 18px 44px rgba(16,35,50,.17); }
.notification-dropdown[hidden] { display: none !important; }
.notification-header { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 66px; padding: 12px 16px; border-bottom: 1px solid var(--line); }
.notification-header > div { display: grid; }
.notification-header strong { color: #173249; font-size: 15px; }
.notification-header small { color: var(--muted); font-size: 11px; }
.notification-header button { min-height: 32px; padding: 4px 6px; border: 0; background: transparent; color: var(--primary); font-size: 12px; font-weight: 750; }
.notification-header button:hover { color: var(--primary-dark); text-decoration: underline; }
.notification-header button:focus-visible { outline: 3px solid rgba(8,116,81,.16); border-radius: 4px; }
.notification-list { max-height: 420px; overflow-y: auto; }
.notification-item { position: relative; display: grid; grid-template-columns: 38px minmax(0,1fr); gap: 11px; align-items: start; min-height: 82px; padding: 13px 16px; border-bottom: 1px solid #e7edef; color: #263c4f; text-decoration: none; }
.notification-item:last-child { border-bottom: 0; }
.notification-item:hover, .notification-item:focus-visible { background: #f2f9f6; color: #173249; }
.notification-item:focus-visible { outline: 2px solid var(--primary); outline-offset: -2px; }
.notification-item.unread { background: #edf8f3; }
.notification-item.unread::after { position: absolute; top: 18px; right: 12px; width: 7px; height: 7px; border-radius: 50%; background: #0b8d61; content: ""; }
.notification-icon { display: grid; place-items: center; width: 38px; height: 38px; border: 1px solid #bfe5d4; border-radius: 7px; background: #e4f7ef; color: #087451; }
.notification-icon svg { width: 19px; height: 19px; }
.notification-item > span:last-child { display: grid; min-width: 0; padding-right: 9px; }
.notification-item strong { color: #173249; font-size: 13px; line-height: 1.4; }
.notification-item small { margin-top: 2px; color: #596d7c; font-size: 12px; line-height: 1.45; }
.notification-item time { margin-top: 4px; color: #87939c; font-size: 10px; }
.notification-empty { display: grid; justify-items: center; gap: 5px; padding: 28px 16px; color: #6f7e89; text-align: center; }
.notification-empty svg { width: 26px; height: 26px; color: #7a948a; }
.notification-empty strong { color: #425969; font-size: 13px; }
.notification-empty small { font-size: 11px; }
.user-menu { position: relative; }
.user-menu-toggle { display: flex; align-items: center; gap: 10px; min-height: 46px; padding: 3px 7px; border: 1px solid transparent; border-radius: 8px; background: transparent; color: var(--ink); text-align: left; }
.user-menu-toggle:hover, .user-menu-toggle[aria-expanded="true"] { border-color: #cfe3db; background: #f1f9f6; }
.user-menu-toggle:focus-visible { outline: 3px solid rgba(8,116,81,.18); border-color: var(--primary); }
.user-menu-toggle .user-copy { display: grid; min-width: 0; }
.user-menu-toggle .user-copy strong { max-width: 220px; overflow: hidden; font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.user-menu-toggle .user-copy small { color: var(--muted); font-size: 11px; }
.user-menu-chevron { color: #71808d; font-size: 12px; transition: transform .16s ease; }
.user-menu-toggle[aria-expanded="true"] .user-menu-chevron { transform: rotate(180deg); }
.user-dropdown { position: absolute; z-index: 1000; top: calc(100% + 8px); right: 0; left: auto; width: min(310px,calc(100vw - 24px)); padding: 10px; border: 1px solid #d8e2e6; border-radius: 8px; background: #fff; box-shadow: 0 18px 44px rgba(16,35,50,.16); }
.user-dropdown[hidden] { display: none !important; }
.user-dropdown-header { display: flex; align-items: center; gap: 11px; padding: 7px 7px 12px; border-bottom: 1px solid var(--line); }
.user-dropdown-header > div { display: grid; min-width: 0; }
.user-dropdown-header strong { overflow: hidden; color: #173249; font-size: 14px; text-overflow: ellipsis; white-space: nowrap; }
.user-dropdown-header small { color: var(--muted); font-size: 12px; }
.user-dropdown-details { display: grid; gap: 8px; margin: 0; padding: 12px 7px; }
.user-dropdown-details > div { display: grid; grid-template-columns: 84px minmax(0,1fr); gap: 8px; }
.user-dropdown-details dt { color: var(--muted); font-size: 11px; font-weight: 600; }
.user-dropdown-details dd { margin: 0; color: #263c4f; font-size: 12px; font-weight: 700; overflow-wrap: anywhere; }
.user-manual-button { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; min-height: 40px; margin-bottom: 8px; border: 1px solid #a7d7c3; border-radius: 7px; background: #f0fbf6; color: #087653; font-weight: 700; text-decoration: none; }
.user-manual-button:hover { border-color: #6dbb9a; background: #e5f8ef; color: #056344; }
.user-manual-button svg { width: 17px; height: 17px; }
.user-logout-button { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; min-height: 40px; border: 1px solid #f0b9c0; border-radius: 7px; background: #fff5f6; color: #b42335; font-weight: 700; }
.user-logout-button:hover { border-color: #df8994; background: #ffecef; }

.demo-sidebar, .app-sidebar { padding: 14px 10px; background: #fff; border-right: 1px solid #dfe6e9; }
.app-nav { gap: 4px; }
.app-nav a, .demo-sidebar .app-nav a {
  min-height: 44px;
  gap: 11px;
  padding: 9px 12px;
  border: 1px solid transparent;
  border-radius: 7px;
  color: #314457;
  font-size: 14px;
  font-weight: 650;
  transition: background-color .16s ease, border-color .16s ease, color .16s ease;
}
.app-nav a i { width: 23px; color: #527064; font-size: 18px; }
.app-nav a:hover { border-color: #d7e9e1; background: #f3faf7; color: var(--primary-dark); }
.app-nav a.active, .app-nav a.active:hover { border-color: #c6eadb; background: #e4f7ef; color: #065f43; box-shadow: inset 3px 0 #079260; }
.app-nav a.active i { color: #087451; }
.sidebar-footer { border-top-color: var(--line); color: #77838d; }
.print-report-brand { display: none; }

.demo-main, .app-content { width: min(100%,1580px); padding: 24px 26px 34px; }
.content-stack { gap: 16px; }
.page-heading, .page-heading.has-page-icon { min-height: 54px; margin: 0 2px 16px; align-items: center; }
.page-heading h1 { color: #14283a; font-size: 28px; font-weight: 800; line-height: 1.22; }
.page-heading p { margin-top: 3px; color: var(--muted); font-size: 14px; }
.page-icon { width: 48px; height: 48px; box-shadow: inset 0 0 0 1px rgba(255,255,255,.5); }

.surface { border: 1px solid var(--line); border-radius: 8px; background: var(--surface); box-shadow: var(--shadow); }
.panel { padding: 18px; }
.panel.flush { padding: 0; }
.section-header { margin-bottom: 14px; }
.section-header h2, .panel h2, .panel-title h2, .ranking h2 { color: #1b3448; font-size: 17px; font-weight: 800; line-height: 1.35; }
.section-header p, .panel-title p { color: #778590; font-size: 13px; }
.section-icon { width: 38px; height: 38px; border-radius: 7px; }

.toolbar, .filter-panel, .report-toolbar { border-color: #dce5e8; background: #fbfcfd; }
.responsible-school-filter { display: grid; grid-template-columns: minmax(260px, 1fr) auto; align-items: end; gap: 12px; }
.responsible-school-filter label, .supervisor-school-search label { display: grid; gap: 6px; }
.supervisor-school-search { display: grid; grid-template-columns: minmax(260px, 1fr) auto auto; align-items: end; gap: 12px; }
.school-comparison-filter, .school-comparison-filters { display: grid; grid-template-columns: repeat(5, minmax(130px, 1fr)) auto auto; align-items: end; gap: 12px; }
.school-comparison-filter label, .school-comparison-filters label { display: grid; gap: 6px; color: #3c5062; font-size: 12px; font-weight: 700; }
.school-result-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.school-ranking-chart, .school-chart-scroll { overflow-x: auto; }
.school-chart-scroll .css-chart { min-width: 760px; }
.toolbar label, .report-filter-grid label, .student-filter-row label, .score-filter-grid label,
.import-filter-grid label, .general-settings-grid label, .individual-filter-grid label,
.preview-user-filter label, .user-filter-grid label { color: #3c5062; font-size: 12px; font-weight: 700; }
.form-control, .form-select { min-height: 41px; border-color: #cfdbe0; border-radius: 6px; background-color: #fff; color: #1d3345; font-size: 14px; }
.form-control:hover, .form-select:hover { border-color: #aac2cc; }
.form-control:focus, .form-select:focus { border-color: #168b66; box-shadow: 0 0 0 3px rgba(8,116,81,.12); }
.btn { min-height: 39px; border-radius: 6px; font-size: 13px; font-weight: 700; box-shadow: none; }
.btn-primary { --bs-btn-bg:#087451; --bs-btn-border-color:#087451; --bs-btn-hover-bg:#075d42; --bs-btn-hover-border-color:#075d42; --bs-btn-active-bg:#064d37; }
.btn-outline-primary { --bs-btn-color:#087451; --bs-btn-border-color:#85bda7; --bs-btn-hover-bg:#e5f6ef; --bs-btn-hover-color:#075d42; --bs-btn-hover-border-color:#5da98c; }

.compact-stats, .stat-grid { gap: 12px; }
.metric, .stat-card { min-height: 106px; padding: 17px; border-top: 3px solid #82c9ad; }
.metric:nth-child(2), .stat-card:nth-child(2) { border-top-color: #65a5df; }
.metric:nth-child(3), .stat-card:nth-child(3) { border-top-color: #4ab8b2; }
.metric:nth-child(4), .stat-card:nth-child(4) { border-top-color: #e5ad42; }
.metric-icon, .stat-icon { width: 48px; height: 48px; border-radius: 8px; background: #e3f7ee; color: #087451; }
.metric:nth-child(2) .metric-icon, .stat-card:nth-child(2) .stat-icon { background: #e9f3fc; color: #256da8; }
.metric:nth-child(3) .metric-icon, .stat-card:nth-child(3) .stat-icon { background: #e3f6f5; color: #087d79; }
.metric:nth-child(4) .metric-icon, .stat-card:nth-child(4) .stat-icon { background: #fff3dc; color: #aa6c00; }
.metric b, .stat-value { color: #102b40; font-size: 28px; font-weight: 800; }
.metric small, .stat-card p { color: #71808d; }

.dashboard-grid, .chart-grid, .approval-layout, .report-detail-grid, .score-entry-layout, .import-layout { gap: 16px; }
.css-chart, .trend-chart, .individual-trend { border-bottom-color: #b9c5ca; background-color: #fff; background-image: repeating-linear-gradient(to top,transparent 0,transparent 48px,#e9eef1 49px); }
.css-bar i, .individual-trend i { border-radius: 6px 6px 0 0; box-shadow: inset 0 -1px rgba(0,0,0,.1); }
.legend-row { color: #536573; font-weight: 650; }

.table-responsive { scrollbar-color: #b9c7cd transparent; }
.data-table { color: #263c4d; font-size: 13px; }
.data-table thead th { padding: 11px 10px; border-bottom: 1px solid #d4dfe3; background: #eef3f5; color: #344b5d; font-size: 12px; font-weight: 800; }
.data-table td { padding: 10px; border-color: #e5ebee; }
.data-table tbody tr:nth-child(even) { background: #fbfcfd; }
.data-table tbody tr:hover { background: #eef8f4; }
.status { min-width: 74px; padding: 4px 9px; border: 1px solid transparent; border-radius: 999px; font-size: 11px; }
.status.success { border-color: #afe2ca; background: #def5ea; color: #086b49; }
.status.pending { border-color: #f1d58d; background: #fff3ca; color: #865e00; }
.status.danger { border-color: #f1bcc4; background: #ffe5e9; color: #b52336; }
.table-footer { min-height: 58px; border-top: 1px solid #e5ebee; background: #fbfcfd; color: #667784; font-size: 12px; }

.person-avatar { border: 1px solid #c4ead9; border-radius: 8px; background: #e6f7ef; }
.score-chip { border: 1px solid #bfe8d5; background: #e7f7ef; }
.blueprint-card { box-shadow: 0 1px 2px rgba(16,35,50,.04); }
.selected-row, .selectable .selected { background: #e9f8f1 !important; box-shadow: inset 3px 0 #168b66; }
.notice, .panel-subtle, .supplemental-checks { background: #fbfcfd; }
.drop-zone { border-color: #9dbab0; background: #f8fcfa; }
.drop-zone:hover { border-color: #168b66; background: #eff9f5; }
.app-dialog, .modal-content { border: 1px solid #d8e2e6; border-radius: 8px; box-shadow: 0 22px 70px rgba(18,42,57,.2); }

.login-topbar, .login-footer { background: #fff; }
.login-card { border: 1px solid rgba(220,228,232,.9); box-shadow: 0 18px 52px rgba(21,50,67,.18); }
.login-system-icon, .login-card-icon { background: #087451; }
.login-obec-logo { width: 44px; height: 64px; flex: 0 0 auto; object-fit: contain; }
.login-card-logo { display: block; width: 44px; height: 64px; margin: 0 auto 10px; object-fit: contain; }

@media (max-width: 991.98px) {
  .demo-main, .app-content { padding: 18px 16px 28px; }
  .demo-sidebar, .app-sidebar { box-shadow: 12px 0 32px rgba(17,41,55,.13); }
  .brand-logo { width: 29px; height: 42px; }
  .user-menu-toggle { gap: 6px; padding-inline: 4px; }
  .user-menu-toggle .user-copy { display: none; }
  .school-comparison-filter, .school-comparison-filters { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .school-comparison-filter .filter-actions { grid-column: 1 / -1; }
}

@media (max-width: 575.98px) {
  body { font-size: 14px; }
  .app-brand strong { display: block; max-width: calc(100vw - 190px); overflow: hidden; font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
  .demo-main, .app-content { padding: 14px 10px 24px; }
  .page-heading h1 { font-size: 23px; }
  .page-heading p { font-size: 13px; }
  .panel { padding: 14px; }
  .metric, .stat-card { min-height: 92px; padding: 14px; }
  .login-obec-logo { width: 34px; height: 50px; }
  .topbar-actions { gap: 4px; padding-left: 6px; }
  .notification-button { width: 34px; }
  .user-menu-toggle .avatar { width: 35px; height: 35px; }
  .responsible-school-filter, .supervisor-school-search, .school-comparison-filter, .school-comparison-filters, .school-result-stats { grid-template-columns: 1fr; }
  .school-comparison-filter .filter-actions { grid-column: auto; }
}

@media print {
  .surface, .metric, .stat-card { box-shadow: none; }
  .print-report-brand { display: flex !important; align-items: center; justify-content: center; gap: 4mm; margin-bottom: 5mm; padding-bottom: 3mm; border-bottom: 1px solid #aeb8bd; text-align: left; }
  .print-report-brand img { width: auto; height: 18mm; object-fit: contain; }
  .print-report-brand div { display: grid; }
  .print-report-brand strong { font-size: 15pt; }
  .print-report-brand small { color: #444; font-size: 9pt; }
}