/* =====================================================================
   Genfiny HR - design system (light default, dark via [data-theme=dark])
   ===================================================================== */
:root {
  /* สีแบรนด์จากโลโก้ ใช้ไล่เฉดในโลโก้ ปุ่มเน้น และเส้นตกแต่ง */
  --brand-1: #2f7ecd; --brand-2: #26a06f; --brand-3: #8cc63f; --brand-4: #f6b52c;
  --brand-5: #f07226; --brand-6: #df3a41; --brand-7: #bd2f7f; --brand-8: #6a3fa0;
  --brand-grad: linear-gradient(100deg, var(--brand-1), var(--brand-2), var(--brand-3), var(--brand-4), var(--brand-5), var(--brand-6), var(--brand-7), var(--brand-8));
  /* พื้นผิวโทนอุ่นเล็กน้อย (sepia) เพื่อลดแสงจ้าเวลาใช้งานนาน */
  --bg: #f7f3ec; --surface: #fffdf9; --surface-2: #faf6ef; --surface-3: #f1ebe1;
  --border: #e6ddcf; --border-strong: #d3c7b4;
  --text: #2e2924; --text-muted: #6d6459; --text-faint: #9c9184;
  --primary: #0f7d72; --primary-hover: #0b665d; --primary-soft: #d9ede9; --primary-contrast: #ffffff;
  --accent: #7a3f9e; --accent-soft: #ece0f3;
  --danger: #c0392f; --danger-soft: #fbe3df; --success: #2f8f4e; --success-soft: #e0f0e2;
  --warning: #b9782a; --warning-soft: #fbeed6; --info: #2b6fa8; --info-soft: #ddebf6; --neutral-soft: #ece5da;
  --sidebar-bg: #241f2c; --sidebar-text: #cdc5d3; --sidebar-active: #0f7d72; --sidebar-hover: #322a3c;
  --radius: 10px; --radius-sm: 6px; --radius-lg: 14px;
  --shadow: 0 1px 3px rgba(15,23,42,.08), 0 1px 2px rgba(15,23,42,.04);
  --shadow-lg: 0 10px 30px rgba(15,23,42,.15);
  --sidebar-w: 264px; --topbar-h: 56px;
  --font: 'Segoe UI', 'Leelawadee UI', 'Noto Sans Thai', Tahoma, system-ui, sans-serif;
  color-scheme: light;
}
[data-theme="dark"] {
  --bg: #1a1620; --surface: #221d2a; --surface-2: #1e1926; --surface-3: #2c2536;
  --border: #372f42; --border-strong: #4b4159;
  --text: #ece6f0; --text-muted: #a89fb2; --text-faint: #7c738a;
  --primary: #35b3a4; --primary-hover: #4ec7b8; --primary-soft: #0d4a44; --primary-contrast: #06231f;
  --accent: #b07fd6; --accent-soft: #3a2a4d;
  --danger: #f08a80; --danger-soft: #5c2420; --success: #6cc887; --success-soft: #1e4429;
  --warning: #e8b465; --warning-soft: #533a17; --info: #6fb3e0; --info-soft: #1c3d55; --neutral-soft: #362e42;
  --sidebar-bg: #15111b; --sidebar-text: #c3bacd; --sidebar-active: #12776c; --sidebar-hover: #241f2e;
  --shadow: 0 1px 3px rgba(0,0,0,.5); --shadow-lg: 0 10px 30px rgba(0,0,0,.6);
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { font-size: 15px; -webkit-text-size-adjust: 100%; }
body { margin: 0; font-family: var(--font); background: var(--bg); color: var(--text); line-height: 1.5; }
a { color: var(--primary); text-decoration: none; } a:hover { text-decoration: underline; }
img { max-width: 100%; }
h1, h2, h3, h4 { margin: 0 0 .5rem; line-height: 1.3; font-weight: 600; }
h1 { font-size: 1.5rem; } h2 { font-size: 1.25rem; } h3 { font-size: 1.05rem; } h4 { font-size: .95rem; }
p { margin: 0 0 .75rem; }
hr { border: 0; border-top: 1px solid var(--border); margin: 1rem 0; }
code, pre { font-family: Consolas, 'Courier New', monospace; font-size: .9em; }
pre { background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: .75rem; overflow: auto; }
small, .small { font-size: .85rem; }
.muted { color: var(--text-muted); } .faint { color: var(--text-faint); }
.text-danger { color: var(--danger); } .text-success { color: var(--success); } .text-warning { color: var(--warning); } .text-primary { color: var(--primary); }
.text-right { text-align: right; } .text-center { text-align: center; } .nowrap { white-space: nowrap; }
.fw-600 { font-weight: 600; } .fw-700 { font-weight: 700; }
.mono { font-family: Consolas, monospace; }
.hidden { display: none !important; }
[x-cloak] { display: none !important; }

/* ---------- layout ---------- */
.app { display: flex; min-height: 100vh; }
.sidebar { width: var(--sidebar-w); background: var(--sidebar-bg); color: var(--sidebar-text); position: fixed; inset: 0 auto 0 0; overflow-y: auto; z-index: 40; transition: transform .2s; display: flex; flex-direction: column; }
.sidebar::-webkit-scrollbar { width: 6px; } .sidebar::-webkit-scrollbar-thumb { background: #334155; border-radius: 3px; }
.brand { display: flex; align-items: center; gap: .6rem; padding: .9rem 1rem; height: var(--topbar-h); border-bottom: 1px solid rgba(255,255,255,.06); color: #fff; font-weight: 700; font-size: 1.1rem; }
.brand .logo { width: 34px; height: 34px; border-radius: 9px; background: linear-gradient(135deg, #3b82f6, #06b6d4); display: grid; place-items: center; font-size: 1.1rem; }
.brand small { display: block; font-weight: 400; font-size: .7rem; color: var(--text-faint); }
.sidebar-company { padding: .6rem 1rem; font-size: .8rem; color: var(--text-faint); border-bottom: 1px solid rgba(255,255,255,.06); }
.sidebar-company b { color: #e2e8f0; display: block; font-size: .85rem; }
.nav { padding: .5rem 0 1rem; flex: 1; }
.nav-group { margin: .15rem .5rem; }
.nav-group-btn { width: 100%; display: flex; align-items: center; gap: .6rem; padding: .55rem .75rem; background: none; border: 0; color: var(--sidebar-text); font: inherit; font-size: .92rem; cursor: pointer; border-radius: 8px; text-align: left; }
.nav-group-btn:hover { background: var(--sidebar-hover); color: #fff; }
.nav-group-btn .chev { margin-left: auto; transition: transform .15s; font-size: .7rem; opacity: .7; }
.nav-group-btn.open .chev { transform: rotate(90deg); }
.nav-group-btn .gbadge { margin-left: auto; }
.nav-items { padding-left: .5rem; }
.nav-item { display: flex; align-items: center; gap: .5rem; padding: .42rem .75rem .42rem 1.6rem; color: var(--sidebar-text); font-size: .875rem; border-radius: 8px; margin: 1px 0; }
.nav-item:hover { background: var(--sidebar-hover); color: #fff; text-decoration: none; }
.nav-item.active { background: var(--primary); color: #fff; }
.nav-item .ico { width: 1.2rem; text-align: center; }
.nav-item .cnt { margin-left: auto; }
.nav-item.disabled { opacity: .45; }
.main { flex: 1; margin-left: var(--sidebar-w); min-width: 0; display: flex; flex-direction: column; }
.topbar { height: var(--topbar-h); background: var(--surface); border-bottom: 1px solid var(--border); display: flex; align-items: center; gap: .75rem; padding: 0 1.25rem; position: sticky; top: 0; z-index: 30; }
.topbar .company-name { font-weight: 600; } .topbar .company-name small { color: var(--text-muted); font-weight: 400; margin-left: .4rem; }
.topbar .spacer { flex: 1; }
.content { padding: 1.25rem 1.5rem 3rem; max-width: 1600px; width: 100%; }
.hamburger { display: none; }
@media (max-width: 1024px) {
  .sidebar { transform: translateX(-100%); } .sidebar.open { transform: none; box-shadow: var(--shadow-lg); }
  .main { margin-left: 0; } .hamburger { display: inline-flex; }
  .content { padding: 1rem; }
  .sidebar-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,.4); z-index: 35; }
}

/* ---------- icon buttons / dropdown ---------- */
.icon-btn { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 50%; border: 1px solid transparent; background: none; color: var(--text); cursor: pointer; font-size: 1.1rem; }
.icon-btn:hover { background: var(--surface-3); }
.icon-btn .dot { position: absolute; top: 4px; right: 4px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--danger); color: #fff; font-size: .7rem; font-weight: 700; display: grid; place-items: center; }
.dropdown { position: relative; }
.dropdown-menu { position: absolute; right: 0; top: calc(100% + 6px); min-width: 220px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-lg); padding: .35rem; z-index: 50; }
.dropdown-menu a, .dropdown-menu button { display: flex; align-items: center; gap: .6rem; width: 100%; padding: .55rem .75rem; border: 0; background: none; color: var(--text); font: inherit; text-align: left; border-radius: 6px; cursor: pointer; text-decoration: none; }
.dropdown-menu a:hover, .dropdown-menu button:hover { background: var(--surface-3); text-decoration: none; }
.dropdown-menu .dd-head { padding: .5rem .75rem; border-bottom: 1px solid var(--border); margin-bottom: .25rem; }
.dropdown-menu .dd-head b { display: block; }
.avatar { width: 34px; height: 34px; border-radius: 50%; background: var(--primary); color: #fff; display: grid; place-items: center; font-weight: 700; font-size: .9rem; }

/* ---------- page header ---------- */
.page-header { display: flex; flex-wrap: wrap; align-items: flex-start; gap: .75rem 1rem; margin-bottom: 1.1rem; }
.page-header h1 { margin: 0; font-size: 1.35rem; }
.page-header .sub { color: var(--text-muted); font-size: .9rem; margin-top: .15rem; }
.page-header .actions { margin-left: auto; display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.breadcrumb { font-size: .8rem; color: var(--text-muted); margin-bottom: .35rem; }

/* ---------- cards ---------- */
.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); margin-bottom: 1.1rem; }
.card-header { display: flex; align-items: center; gap: .75rem; padding: .8rem 1.1rem; border-bottom: 1px solid var(--border); }
.card-header h3 { margin: 0; font-size: 1rem; } .card-header .actions { margin-left: auto; display: flex; gap: .5rem; align-items: center; }
.card-body { padding: 1.1rem; }
.card-body.compact { padding: .6rem .9rem; }
.card-footer { padding: .8rem 1.1rem; border-top: 1px solid var(--border); display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; background: var(--surface-2); border-radius: 0 0 var(--radius) var(--radius); }
.card.flat { box-shadow: none; }

/* ---------- grid utilities ---------- */
.row { display: flex; flex-wrap: wrap; gap: 1rem; }
.row > * { flex: 1 1 0; min-width: 0; }
.grid { display: grid; gap: 1rem; }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grid-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.span-2 { grid-column: span 2; } .span-3 { grid-column: span 3; } .span-4 { grid-column: span 4; } .span-full { grid-column: 1 / -1; }
@media (max-width: 900px) { .grid-3, .grid-4, .grid-6 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .span-3, .span-4 { grid-column: span 2; } }
@media (max-width: 600px) { .grid-2, .grid-3, .grid-4, .grid-6 { grid-template-columns: 1fr; } .span-2, .span-3, .span-4 { grid-column: span 1; } }
.flex { display: flex; } .flex-wrap { flex-wrap: wrap; } .items-center { align-items: center; } .items-start { align-items: flex-start; } .justify-between { justify-content: space-between; } .justify-end { justify-content: flex-end; }
.gap-1 { gap: .25rem; } .gap-2 { gap: .5rem; } .gap-3 { gap: .75rem; } .gap-4 { gap: 1rem; }
.mt-1 { margin-top: .25rem; } .mt-2 { margin-top: .5rem; } .mt-3 { margin-top: .75rem; } .mt-4 { margin-top: 1rem; } .mt-6 { margin-top: 1.5rem; }
.mb-0 { margin-bottom: 0; } .mb-1 { margin-bottom: .25rem; } .mb-2 { margin-bottom: .5rem; } .mb-3 { margin-bottom: .75rem; } .mb-4 { margin-bottom: 1rem; }
.ml-auto { margin-left: auto; } .w-full { width: 100%; } .w-auto { width: auto !important; }
.p-0 { padding: 0 !important; }

/* ---------- stat tiles ---------- */
.stat { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: .9rem 1.1rem; box-shadow: var(--shadow); display: flex; gap: .9rem; align-items: center; }
.stat .ico { width: 44px; height: 44px; border-radius: 10px; display: grid; place-items: center; font-size: 1.4rem; background: var(--primary-soft); flex-shrink: 0; }
.stat .val { font-size: 1.45rem; font-weight: 700; line-height: 1.1; }
.stat .lbl { color: var(--text-muted); font-size: .82rem; }

/* ---------- dashboard tiles (like the reference screenshot) ---------- */
.tile-tabs { display: inline-flex; border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; margin-bottom: 1rem; background: var(--surface); }
.tile-tabs button { padding: .6rem 1.2rem; border: 0; background: none; font: inherit; font-weight: 600; cursor: pointer; color: var(--text-muted); }
.tile-tabs button.active { background: var(--primary); color: #fff; }
.tile-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: .75rem; }
.tile { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: .5rem; padding: 1rem .6rem .8rem; background: var(--surface); border: 1px dashed var(--border-strong); border-radius: var(--radius); text-align: center; color: var(--text); text-decoration: none; min-height: 132px; transition: transform .12s, box-shadow .12s, border-color .12s; }
.tile:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); border-color: var(--primary); text-decoration: none; }
.tile .ticon { width: 58px; height: 58px; border-radius: 14px; display: grid; place-items: center; font-size: 1.8rem; background: linear-gradient(145deg, var(--primary-soft), var(--surface-3)); box-shadow: inset 0 0 0 1px var(--border); }
.tile .tlabel { font-size: .82rem; line-height: 1.3; }
.tile .tbadge { position: absolute; top: 8px; right: 10px; min-width: 26px; height: 26px; padding: 0 7px; border-radius: 13px; background: var(--danger); color: #fff; font-weight: 700; font-size: .85rem; display: grid; place-items: center; box-shadow: 0 2px 4px rgba(0,0,0,.25); }
.tile.has-badge .ticon { background: linear-gradient(145deg, var(--warning-soft), var(--surface-3)); }
.tile-section { margin: 1.2rem 0 .5rem; font-weight: 700; color: var(--text-muted); font-size: .85rem; letter-spacing: .02em; text-transform: uppercase; display: flex; align-items: center; gap: .5rem; }
.tile-section::after { content: ''; flex: 1; border-top: 1px solid var(--border); }

/* ---------- buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .4rem; padding: .5rem .95rem; border-radius: var(--radius-sm); border: 1px solid var(--border-strong); background: var(--surface); color: var(--text); font: inherit; font-size: .9rem; font-weight: 500; cursor: pointer; text-decoration: none; white-space: nowrap; line-height: 1.3; transition: background .12s, border-color .12s; }
.btn:hover { background: var(--surface-3); text-decoration: none; }
.btn:disabled, .btn.disabled { opacity: .55; cursor: not-allowed; }
.btn-primary { background: var(--primary); border-color: var(--primary); color: var(--primary-contrast); } .btn-primary:hover { background: var(--primary-hover); border-color: var(--primary-hover); }
.btn-danger { background: var(--danger); border-color: var(--danger); color: #fff; } .btn-danger:hover { filter: brightness(.92); }
.btn-success { background: var(--success); border-color: var(--success); color: #fff; } .btn-success:hover { filter: brightness(.92); }
.btn-warning { background: var(--warning); border-color: var(--warning); color: #fff; } .btn-warning:hover { filter: brightness(.92); }
.btn-outline-primary { color: var(--primary); border-color: var(--primary); background: transparent; } .btn-outline-primary:hover { background: var(--primary-soft); }
.btn-outline-danger { color: var(--danger); border-color: var(--danger); background: transparent; } .btn-outline-danger:hover { background: var(--danger-soft); }
.btn-ghost { border-color: transparent; background: transparent; } .btn-ghost:hover { background: var(--surface-3); }
.btn-link { border: 0; background: none; color: var(--primary); padding: 0; } .btn-link:hover { text-decoration: underline; background: none; }
.btn-sm { padding: .3rem .65rem; font-size: .82rem; } .btn-xs { padding: .15rem .45rem; font-size: .75rem; } .btn-lg { padding: .7rem 1.4rem; font-size: 1rem; }
.btn-block { width: 100%; }
.btn-group { display: inline-flex; gap: .35rem; flex-wrap: wrap; }

/* ---------- badges / status ---------- */
.badge { display: inline-flex; align-items: center; gap: .3rem; padding: .15rem .55rem; border-radius: 999px; font-size: .75rem; font-weight: 600; line-height: 1.5; background: var(--neutral-soft); color: var(--text); white-space: nowrap; }
.badge-success { background: var(--success-soft); color: var(--success); }
.badge-danger { background: var(--danger-soft); color: var(--danger); }
.badge-warning { background: var(--warning-soft); color: var(--warning); }
.badge-info { background: var(--info-soft); color: var(--info); }
.badge-primary { background: var(--primary-soft); color: var(--primary); }
.badge-neutral { background: var(--neutral-soft); color: var(--text-muted); }
.badge-count { background: var(--danger); color: #fff; min-width: 20px; justify-content: center; padding: 0 6px; font-size: .72rem; }
.required { color: var(--danger); margin-left: 2px; font-weight: 700; }

/* ---------- alerts ---------- */
.alert { display: flex; gap: .7rem; align-items: flex-start; padding: .75rem 1rem; border-radius: var(--radius); border: 1px solid var(--border); background: var(--surface-2); margin-bottom: 1rem; }
.alert .close { margin-left: auto; border: 0; background: none; cursor: pointer; font-size: 1.1rem; color: inherit; opacity: .6; }
.alert-success { background: var(--success-soft); border-color: transparent; color: var(--success); }
.alert-danger { background: var(--danger-soft); border-color: transparent; color: var(--danger); }
.alert-warning { background: var(--warning-soft); border-color: transparent; color: var(--warning); }
.alert-info { background: var(--info-soft); border-color: transparent; color: var(--info); }
[data-theme="dark"] .alert-success, [data-theme="dark"] .alert-danger, [data-theme="dark"] .alert-warning, [data-theme="dark"] .alert-info { color: var(--text); }

/* ---------- forms ---------- */
.field { margin-bottom: .9rem; }
.field label, .label { display: block; font-size: .85rem; font-weight: 600; margin-bottom: .3rem; color: var(--text); }
.field .help { font-size: .78rem; color: var(--text-muted); margin-top: .25rem; }
.field .error { font-size: .8rem; color: var(--danger); margin-top: .25rem; }
.input, .select, .textarea, input[type="text"], input[type="email"], input[type="password"], input[type="number"], input[type="date"], input[type="time"], input[type="datetime-local"], input[type="search"], input[type="tel"], input[type="url"], select, textarea {
  width: 100%; padding: .5rem .7rem; border: 1px solid var(--border-strong); border-radius: var(--radius-sm); background: var(--surface); color: var(--text); font: inherit; font-size: .92rem; transition: border-color .12s, box-shadow .12s; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-soft); }
input[readonly], input:disabled, select:disabled, textarea:disabled { background: var(--surface-2); color: var(--text-muted); }
input.is-invalid, select.is-invalid, textarea.is-invalid { border-color: var(--danger); }
textarea { min-height: 88px; resize: vertical; }
input[type="checkbox"], input[type="radio"] { width: 1rem; height: 1rem; accent-color: var(--primary); margin: 0 .35rem 0 0; vertical-align: -2px; }
input[type="file"] { padding: .35rem; }
.check { display: inline-flex; align-items: center; gap: .4rem; font-weight: 400; cursor: pointer; margin-right: 1rem; font-size: .9rem; }
.check-list { display: flex; flex-wrap: wrap; gap: .4rem 1rem; }
.input-group { display: flex; } .input-group > * { border-radius: 0; } .input-group > :first-child { border-radius: var(--radius-sm) 0 0 var(--radius-sm); } .input-group > :last-child { border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }
.input-sm { padding: .3rem .5rem; font-size: .85rem; }
.form-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 0 1rem; }
.form-grid .w-third { grid-column: span 4; } .form-grid .w-half { grid-column: span 6; } .form-grid .w-full { grid-column: span 12; } .form-grid .w-quarter { grid-column: span 3; } .form-grid .w-two-third { grid-column: span 8; }
@media (max-width: 900px) { .form-grid .w-third, .form-grid .w-quarter { grid-column: span 6; } }
@media (max-width: 600px) { .form-grid .w-third, .form-grid .w-half, .form-grid .w-quarter, .form-grid .w-two-third { grid-column: span 12; } }
.form-section { margin: 1.25rem 0 .75rem; padding-bottom: .4rem; border-bottom: 2px solid var(--primary-soft); font-weight: 700; color: var(--primary); display: flex; align-items: center; gap: .5rem; }
.form-actions { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--border); }
.filter-bar { display: flex; flex-wrap: wrap; gap: .5rem; align-items: flex-end; margin-bottom: 1rem; }
.filter-bar .field { margin: 0; min-width: 160px; flex: 1 1 160px; } .filter-bar .field.grow { flex: 2 1 240px; }
.filter-bar .btn { height: 38px; }
.toggle { display: inline-flex; align-items: center; gap: .5rem; cursor: pointer; }
.switch { position: relative; width: 40px; height: 22px; border-radius: 11px; background: var(--border-strong); transition: background .15s; flex-shrink: 0; }
.switch::after { content: ''; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: transform .15s; }
input:checked + .switch { background: var(--success); } input:checked + .switch::after { transform: translateX(18px); }
.toggle input { position: absolute; opacity: 0; width: 0; height: 0; }

/* ---------- tables ---------- */
.table-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); }
.card .table-wrap { border: 0; border-radius: 0; }
table.table { width: 100%; border-collapse: collapse; font-size: .9rem; }
.table th, .table td { padding: .6rem .8rem; border-bottom: 1px solid var(--border); text-align: left; vertical-align: middle; }
.table th { background: var(--surface-2); font-weight: 600; font-size: .8rem; color: var(--text-muted); white-space: nowrap; text-transform: uppercase; letter-spacing: .02em; }
.table tbody tr:hover { background: var(--surface-2); }
.table tbody tr:last-child td { border-bottom: 0; }
.table td.num, .table th.num { text-align: right; font-variant-numeric: tabular-nums; }
.table .actions { white-space: nowrap; text-align: right; }
.table-sm th, .table-sm td { padding: .35rem .5rem; font-size: .85rem; }
.table tfoot td { font-weight: 700; background: var(--surface-2); }
.table tr.highlight td { background: var(--warning-soft); }
.table tr.row-danger td { background: var(--danger-soft); }
.table tr.row-success td { background: var(--success-soft); }
.table tr.row-muted td { color: var(--text-muted); }
.kv { width: 100%; border-collapse: collapse; font-size: .9rem; }
.kv th { width: 34%; text-align: left; color: var(--text-muted); font-weight: 500; padding: .4rem .6rem; vertical-align: top; border-bottom: 1px solid var(--border); }
.kv td { padding: .4rem .6rem; border-bottom: 1px solid var(--border); }
.kv tr:last-child th, .kv tr:last-child td { border-bottom: 0; }

/* ---------- pagination ---------- */
.pagination { display: flex; flex-wrap: wrap; gap: .3rem; align-items: center; margin: 1rem 0 0; padding: 0; list-style: none; }
.pagination a, .pagination span { display: inline-flex; min-width: 34px; height: 34px; align-items: center; justify-content: center; padding: 0 .5rem; border-radius: var(--radius-sm); border: 1px solid var(--border); background: var(--surface); color: var(--text); font-size: .85rem; text-decoration: none; }
.pagination a:hover { background: var(--surface-3); }
.pagination .active span { background: var(--primary); color: #fff; border-color: var(--primary); }
.pagination .disabled span { opacity: .45; }
.pagination .summary { border: 0; background: none; color: var(--text-muted); margin-left: auto; }

/* ---------- tabs ---------- */
.tabs { display: flex; gap: .25rem; border-bottom: 1px solid var(--border); margin-bottom: 1rem; flex-wrap: wrap; }
.tabs a, .tabs button { padding: .55rem .9rem; border: 0; border-bottom: 2px solid transparent; background: none; color: var(--text-muted); font: inherit; font-weight: 600; cursor: pointer; text-decoration: none; margin-bottom: -1px; }
.tabs a.active, .tabs button.active { color: var(--primary); border-bottom-color: var(--primary); }
.tabs a:hover, .tabs button:hover { color: var(--text); text-decoration: none; }

/* ---------- modal ---------- */
.modal-backdrop { position: fixed; inset: 0; background: rgba(15,23,42,.55); z-index: 60; display: flex; align-items: flex-start; justify-content: center; padding: 4vh 1rem; overflow-y: auto; }
.modal { background: var(--surface); border-radius: var(--radius-lg); width: 100%; max-width: 640px; box-shadow: var(--shadow-lg); border: 1px solid var(--border); }
.modal.lg { max-width: 900px; } .modal.xl { max-width: 1200px; } .modal.sm { max-width: 440px; }
.modal-header { display: flex; align-items: center; padding: .9rem 1.2rem; border-bottom: 1px solid var(--border); } .modal-header h3 { margin: 0; } .modal-header .close { margin-left: auto; }
.modal-body { padding: 1.2rem; } .modal-footer { padding: .9rem 1.2rem; border-top: 1px solid var(--border); display: flex; gap: .5rem; justify-content: flex-end; }

/* ---------- misc ---------- */
.empty { text-align: center; padding: 2.5rem 1rem; color: var(--text-muted); }
.empty .ico { font-size: 2.4rem; margin-bottom: .5rem; opacity: .7; }
.timeline { list-style: none; padding: 0; margin: 0; }
.timeline li { position: relative; padding: 0 0 1rem 1.6rem; border-left: 2px solid var(--border); margin-left: .5rem; }
.timeline li::before { content: ''; position: absolute; left: -7px; top: 4px; width: 12px; height: 12px; border-radius: 50%; background: var(--primary); border: 2px solid var(--surface); }
.timeline li:last-child { border-left-color: transparent; }
.timeline .when { font-size: .78rem; color: var(--text-muted); }
.attachment-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: .4rem; }
.attachment-list li { display: flex; align-items: center; gap: .6rem; padding: .45rem .7rem; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface-2); font-size: .88rem; }
.attachment-list .meta { color: var(--text-muted); font-size: .78rem; margin-left: auto; white-space: nowrap; }
.thumb { width: 40px; height: 40px; object-fit: cover; border-radius: 6px; border: 1px solid var(--border); }
.dropzone { border: 2px dashed var(--border-strong); border-radius: var(--radius); padding: 1.2rem; text-align: center; color: var(--text-muted); cursor: pointer; background: var(--surface-2); }
.dropzone.drag { border-color: var(--primary); background: var(--primary-soft); }
.progress { height: 8px; background: var(--surface-3); border-radius: 4px; overflow: hidden; } .progress > div { height: 100%; background: var(--primary); }
.chip { display: inline-flex; align-items: center; gap: .3rem; background: var(--surface-3); border-radius: 999px; padding: .15rem .6rem; font-size: .8rem; }
.step-list { display: flex; gap: .5rem; flex-wrap: wrap; counter-reset: s; margin-bottom: 1rem; }
.step-list .step { display: flex; align-items: center; gap: .5rem; padding: .4rem .8rem; border-radius: 999px; background: var(--surface); border: 1px solid var(--border); font-size: .85rem; color: var(--text-muted); }
.step-list .step.done { background: var(--success-soft); color: var(--success); border-color: transparent; }
.step-list .step.current { background: var(--primary); color: #fff; border-color: var(--primary); }
.rev-diff { background: var(--warning-soft); }
.print-only { display: none; }
.sticky-actions { position: sticky; bottom: 0; background: var(--surface); border-top: 1px solid var(--border); padding: .75rem 1rem; display: flex; gap: .5rem; z-index: 10; }
.toast-wrap { position: fixed; right: 1rem; bottom: 1rem; z-index: 100; display: flex; flex-direction: column; gap: .5rem; }
.toast { background: var(--text); color: var(--bg); padding: .6rem 1rem; border-radius: var(--radius-sm); box-shadow: var(--shadow-lg); font-size: .9rem; }
.toast.success { background: var(--success); color: #fff; } .toast.danger { background: var(--danger); color: #fff; }
.tree ul { list-style: none; padding-left: 1.2rem; border-left: 1px dashed var(--border); margin: .2rem 0; }
.tree li { padding: .15rem 0; }
.emp-avatar { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; background: var(--surface-3); display: inline-grid; place-items: center; font-weight: 700; color: var(--text-muted); }
.rating { color: var(--warning); letter-spacing: 1px; }
.help-box { background: var(--info-soft); border-radius: var(--radius); padding: .8rem 1rem; font-size: .88rem; }
[data-theme="dark"] .help-box { color: var(--text); }
.calendar { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.calendar .d { background: var(--surface); border: 1px solid var(--border); min-height: 64px; padding: .25rem .35rem; font-size: .75rem; }
.calendar .d.off { background: var(--surface-2); color: var(--text-faint); } .calendar .d.hol { background: var(--danger-soft); } .calendar .d .n { font-weight: 700; }
.calendar .hd { text-align: center; font-weight: 600; font-size: .78rem; color: var(--text-muted); padding: .25rem; }

/* ---------- auth pages ---------- */
.auth-body { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 2rem 1rem; background: var(--bg); position: relative; overflow: hidden; }
.auth-box { width: 100%; max-width: 440px; position: relative; z-index: 1; }
.auth-brand { text-align: center; margin-bottom: 1.25rem; }
.auth-brand p { color: var(--text-muted); margin: .35rem 0 0; }
.auth-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); padding: 1.6rem; position: relative; overflow: hidden; }
/* เส้นไล่สีแบรนด์บาง ๆ ขอบบนการ์ด ค่อย ๆ เลื่อนช้า ๆ ให้ไม่นิ่งสนิท */
.auth-card::before { content: ""; position: absolute; inset: 0 0 auto; height: 3px; background: var(--brand-grad); background-size: 220% 100%; animation: gf-slide 18s linear infinite; }
.auth-foot { text-align: center; margin-top: 1rem; color: var(--text-muted); font-size: .85rem; }
.auth-foot button { border: 0; background: none; color: var(--text-muted); cursor: pointer; font: inherit; }

/* ---------- public applicant pages ---------- */
.public-body { background: var(--bg); min-height: 100vh; }
.public-header { background: var(--surface); border-bottom: 1px solid var(--border); padding: .9rem 1rem; }
.public-header .inner { max-width: 1000px; margin: 0 auto; display: flex; align-items: center; gap: 1rem; }
.public-main { max-width: 1000px; margin: 1.25rem auto 4rem; padding: 0 1rem; }
.repeater-table { width: 100%; border-collapse: collapse; }
.repeater-table th, .repeater-table td { padding: .3rem; vertical-align: top; }
.repeater-table th { font-size: .78rem; color: var(--text-muted); font-weight: 600; text-align: left; }
.repeater-table input, .repeater-table select { padding: .35rem .5rem; font-size: .85rem; }

/* ---------- print ---------- */
@media print {
  .sidebar, .topbar, .no-print, .page-header .actions, .alert, .toast-wrap { display: none !important; }
  .main { margin: 0; } .content { padding: 0; max-width: none; }
  .card { box-shadow: none; border: 0; break-inside: avoid; }
  body { background: #fff; color: #000; }
  .print-only { display: block; }
  a { color: inherit; text-decoration: none; }
}

/* =====================================================================
   แบรนด์ GenfinyHR - โลโก้ อนิเมชันตอนเข้าหน้า และการเคลื่อนไหวเบา ๆ
   หลักการ: เคลื่อนไหวช้า แอมพลิจูดต่ำ ไม่ดึงความสนใจไปจากเนื้อหา
   และหยุดทั้งหมดเมื่อผู้ใช้ตั้งค่าลดการเคลื่อนไหวในระบบปฏิบัติการ
   ===================================================================== */

/* ---------- โลโก้แบบนิ่ง (แถบข้าง / หัวเรื่อง) ---------- */
.gf-logo { display: block; width: 100%; height: 100%; }
.brand .logo { width: 38px; height: auto; border-radius: 0; background: none; box-shadow: none; padding: 0; display: block; }
.brand .logo img, .brand .logo svg { width: 100%; height: auto; display: block; animation: gf-hue 60s ease-in-out infinite; }

/* ---------- ตัวอักษรโลโก้ ---------- */
.gf-wordmark {
  font-size: 1.85rem; font-weight: 700; letter-spacing: -.01em; margin: .55rem 0 0; line-height: 1.15;
  background: linear-gradient(96deg, #0f8f7e 0%, #2f7ecd 38%, #7a3f9e 70%, #bd2f7f 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.gf-wordmark span { background: inherit; -webkit-background-clip: text; background-clip: text; }

/* ---------- โลโก้แบบเคลื่อนไหวบนหน้าเข้าสู่ระบบ ---------- */
/* เวทีของโลโก้: SVG ที่ประกอบตัวเอง กับไฟล์โลโก้จริง วางซ้อนกันในช่องเดียวด้วย grid
   จึงสลับกันได้โดยไม่ขยับตำแหน่ง และ transform ของแต่ละชั้นไม่ชนกัน */
.gf-mark-stage { position: relative; width: 132px; height: 132px; margin: 0 auto; display: grid; place-items: center; }
.gf-mark-stage > * { grid-area: 1 / 1; }
.gf-intro { width: 118px; height: 118px; display: block; overflow: visible; }
.gf-mark-real { width: 132px; height: auto; opacity: 0; transform: scale(.9); }
.gf-mark-bloom { width: 132px; height: 132px; border-radius: 50%; opacity: 0; pointer-events: none;
  background: radial-gradient(circle, rgba(255,255,255,.95) 0%, rgba(255,255,255,.55) 38%, transparent 66%); }
[data-theme="dark"] .gf-mark-bloom { background: radial-gradient(circle, rgba(255,255,255,.7) 0%, rgba(255,255,255,.3) 38%, transparent 66%); }

/* ส่งไม้ต่อ: SVG จางหายพร้อมขยายเล็กน้อย มีแสงวาบคั่น แล้วโลโก้จริงค่อย ๆ ปรากฏ */
.gf-intro { animation: gf-handoff .5s ease-in 3.05s forwards; }
.gf-mark-bloom { animation: gf-bloom .8s ease-out 2.95s forwards; }
.gf-mark-real { animation: gf-appear .65s cubic-bezier(.2,.85,.3,1) 3.2s forwards; }
.gf-mark-stage { animation: gf-float 9s ease-in-out 4.1s infinite, gf-hue 34s ease-in-out 4.1s infinite; }
@keyframes gf-handoff { to { opacity: 0; transform: scale(1.07); } }
@keyframes gf-bloom { 0% { opacity: 0; transform: scale(.7); } 45% { opacity: .9; } 100% { opacity: 0; transform: scale(1.25); } }
@keyframes gf-appear { to { opacity: 1; transform: scale(1); } }

/* เส้น infinity ถูกวาดทีละเส้นด้วย stroke-dashoffset (path ตั้ง pathLength=100 ไว้) */
.gf-draw { stroke-dasharray: 100; stroke-dashoffset: 100; animation: gf-draw 1.15s cubic-bezier(.65,.05,.36,1) forwards; }
.gf-draw-a { animation-delay: .25s; }
.gf-draw-b { animation-delay: .95s; }
@keyframes gf-draw { to { stroke-dashoffset: 0; } }

/* แท่งกราฟโตขึ้นจากฐาน ไล่จากแท่งกลางออกไปด้านข้าง */
.gf-bar { transform-box: fill-box; transform-origin: 50% 100%; transform: scaleY(0); opacity: 0;
  animation: gf-grow .72s cubic-bezier(.22,1.2,.36,1) forwards; animation-delay: calc(1.75s + var(--i) * .16s); }
@keyframes gf-grow { 0% { transform: scaleY(0); opacity: 0; } 60% { opacity: 1; } 100% { transform: scaleY(1); opacity: 1; } }


@keyframes gf-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
@keyframes gf-hue { 0%, 100% { filter: hue-rotate(0deg); } 30% { filter: hue-rotate(14deg); } 65% { filter: hue-rotate(-11deg); } }

/* ชื่อระบบและคำโปรยโผล่หลังโลโก้ประกอบเสร็จ */
.auth-brand .gf-wordmark, .auth-brand p { opacity: 0; animation: gf-rise .7s ease-out forwards; }
.auth-brand .gf-wordmark { animation-delay: 2.95s; }
.auth-brand p { animation-delay: 3.15s; }
@keyframes gf-rise { from { opacity: 0; transform: translateY(9px); } to { opacity: 1; transform: none; } }

/* การ์ดฟอร์มโผล่ตามมา ไม่ต้องรอจนอนิเมชันจบ ผู้ใช้กรอกได้ทันที */
.auth-card, .auth-foot { opacity: 0; animation: gf-rise .6s ease-out .45s forwards; }

@keyframes gf-slide { to { background-position: 220% 0; } }

/* ---------- ไอแสงลอยขึ้น (เฉพาะหน้าเข้าสู่ระบบ) ----------
   เส้นบางเรืองแสงลอยขึ้นจากขอบล่างไปพ้นขอบบน ความเร็ว 10-18 วินาทีต่อรอบ
   ให้รู้สึกเคลื่อนไหวแบบตั้งใจ ไม่ใช่ของประดับที่กวนสายตา */
.gf-beams { position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; opacity: 1; }
[data-theme="dark"] .gf-beams { opacity: 1; }
.gf-beams b {
  position: absolute; left: var(--x); bottom: -36vh; width: var(--w, 2.5px); height: var(--h, 22vh);
  border-radius: 999px; opacity: 0; will-change: transform, opacity;
  background: linear-gradient(to top, transparent 0%, var(--c) 28%, var(--c) 72%, transparent 100%);
  filter: blur(.6px) drop-shadow(0 0 10px var(--c)) drop-shadow(0 0 22px var(--c));
  animation: gf-beam var(--t, 14s) linear var(--d, 0s) infinite;
}
@keyframes gf-beam {
  0%   { transform: translate3d(0, 0, 0); opacity: 0; }
  10%  { opacity: var(--o, .35); }
  86%  { opacity: var(--o, .35); }
  100% { transform: translate3d(0, -152vh, 0); opacity: 0; }
}

/* ---------- ฉากหลังเคลื่อนไหวช้า ๆ ---------- */
.gf-ambient { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.gf-ambient i { position: absolute; display: block; border-radius: 50%; filter: blur(90px); opacity: .17; }
.gf-ambient i:nth-child(1) { width: 38vmax; height: 38vmax; left: -12vmax; top: -10vmax;
  background: radial-gradient(circle, var(--brand-1), transparent 68%); animation: gf-drift-a 30s ease-in-out infinite; }
.gf-ambient i:nth-child(2) { width: 34vmax; height: 34vmax; right: -10vmax; top: 6vmax;
  background: radial-gradient(circle, var(--brand-7), transparent 68%); animation: gf-drift-b 38s ease-in-out infinite; }
.gf-ambient i:nth-child(3) { width: 32vmax; height: 32vmax; left: 28vmax; bottom: -14vmax;
  background: radial-gradient(circle, var(--brand-4), transparent 68%); animation: gf-drift-c 34s ease-in-out infinite; }
[data-theme="dark"] .gf-ambient i { opacity: .13; }
@keyframes gf-drift-a { 0%, 100% { transform: translate(0, 0) scale(1); } 50% { transform: translate(5vmax, 4vmax) scale(1.1); } }
@keyframes gf-drift-b { 0%, 100% { transform: translate(0, 0) scale(1); } 50% { transform: translate(-4vmax, 6vmax) scale(.92); } }
@keyframes gf-drift-c { 0%, 100% { transform: translate(0, 0) scale(1); } 50% { transform: translate(-6vmax, -4vmax) scale(1.07); } }

/* ---------- ลูกเล่นเบา ๆ ในระบบหลัง (คงความเป็นทางการ) ---------- */
/* เส้นแบรนด์บางใต้แถบบน บอกตัวตนโดยไม่รบกวนสายตา */
.topbar { position: sticky; }
.topbar::after { content: ""; position: absolute; inset: auto 0 -1px; height: 2px; background: var(--brand-grad); opacity: .85; }
/* ไอคอนในหน้าว่างขยับเบา ๆ ให้ไม่ดูตาย */
.empty .ico, .empty-icon { animation: gf-float 7s ease-in-out infinite; }
/* การ์ดสถิติมีแถบสีแบรนด์จาง ๆ ด้านซ้าย */
.stat { position: relative; overflow: hidden; }
.stat::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 3px; background: var(--brand-grad); opacity: .7; }

/* ---------- เคารพการตั้งค่าลดการเคลื่อนไหว ---------- */
@media (prefers-reduced-motion: reduce) {
  .gf-draw { stroke-dashoffset: 0; animation: none; }
  .gf-bar { transform: none; opacity: 1; animation: none; }
  .gf-intro { animation: none; opacity: 0; }
  .gf-mark-real { opacity: 1; transform: none; animation: none; }
  .gf-mark-bloom { display: none; }
  .gf-mark-stage { animation: none; }
  .gf-beams { display: none; }
  .auth-brand .gf-wordmark, .auth-brand p, .auth-card, .auth-foot { opacity: 1; animation: none; }
  .auth-card::before, .gf-ambient i, .empty .ico, .empty-icon { animation: none; }
}
/* ---------- งานพิมพ์: ไม่มีอนิเมชันและไม่มีฉากหลัง ---------- */
@media print {
  .gf-ambient, .gf-beams, .gf-mark-bloom { display: none !important; }
  .gf-intro, .gf-mark-stage, .brand .logo svg, .auth-card::before, .empty .ico { animation: none !important; }
  .gf-intro { display: none !important; } .gf-mark-real { opacity: 1 !important; transform: none !important; }
  .topbar::after, .stat::before { display: none !important; }
}
/* =====================================================================
   ปุ่ม (?) คู่มือรายหน้า มุมขวาบนของทุกหน้า
   เปิดเป็นการ์ดลอย ปิดด้วยกากบาท ปุ่มปิด คลิกนอกกรอบ หรือ Esc
   ===================================================================== */
.gf-help { position: relative; margin-left: auto; flex-shrink: 0; }
.page-header .actions ~ .gf-help { margin-left: .4rem; }
.gf-help-btn { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 50%;
  border: 1px solid var(--border-strong); background: var(--surface); color: var(--text-muted); font: inherit; font-weight: 700; line-height: 1; cursor: pointer;
  transition: transform .15s, box-shadow .15s, color .15s, border-color .15s, background .15s; }
.gf-help-btn .q { font-size: 1.02rem; }
.gf-help-btn:hover, .gf-help-btn.on { color: var(--primary); border-color: var(--primary); background: var(--primary-soft); transform: translateY(-1px); box-shadow: 0 4px 14px rgba(15,125,114,.18); }
/* วงแหวนเต้นเบา ๆ สองครั้งตอนเข้าหน้า พอให้สังเกตเห็นว่ามีคู่มือ แล้วหยุดไปเอง */
.gf-help-btn::after { content: ""; position: absolute; inset: -2px; border-radius: 50%; border: 2px solid var(--primary); opacity: 0; animation: gf-help-pulse 3.2s ease-out 1.2s 2; }
@keyframes gf-help-pulse { 0% { opacity: .5; transform: scale(1); } 45% { opacity: 0; transform: scale(1.45); } 100% { opacity: 0; transform: scale(1.45); } }
.gf-help-hint { position: absolute; top: calc(100% + 8px); right: 0; white-space: nowrap; background: var(--text); color: var(--surface); font-size: .72rem; font-weight: 500;
  padding: .25rem .5rem; border-radius: 6px; opacity: 0; transform: translateY(-4px); pointer-events: none; transition: opacity .15s, transform .15s; }
.gf-help-btn:hover .gf-help-hint { opacity: .95; transform: none; }
.gf-help-btn.on .gf-help-hint { opacity: 0; }

.gf-help-pop { position: absolute; top: calc(100% + 10px); right: 0; width: min(430px, calc(100vw - 2rem)); z-index: 58; transform-origin: top right;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); overflow: hidden; text-align: left;
  animation: gf-help-in .16s ease-out; }
@keyframes gf-help-in { from { opacity: 0; transform: scale(.96) translateY(-4px); } to { opacity: 1; transform: none; } }
.gf-help-pop::before { content: ""; position: absolute; inset: 0 0 auto; height: 3px; background: var(--brand-grad); }
.gf-help-head { display: flex; gap: .6rem; align-items: flex-start; padding: .9rem 1rem .7rem; border-bottom: 1px solid var(--border); background: var(--surface-2); }
.gf-help-head .ic { font-size: 1.2rem; line-height: 1.35; }
.gf-help-head .t b { display: block; font-size: .97rem; line-height: 1.3; }
.gf-help-head .t small { color: var(--text-muted); font-size: .75rem; }
.gf-help-head .x { margin-left: auto; border: 0; background: none; font-size: 1.35rem; line-height: 1; color: var(--text-muted); cursor: pointer; padding: 0 .2rem; border-radius: 6px; }
.gf-help-head .x:hover { background: var(--surface-3); color: var(--danger); }
.gf-help-body { padding: .85rem 1rem; max-height: min(62vh, 520px); overflow-y: auto; font-size: .86rem; }
.gf-help-body .what { background: var(--primary-soft); color: var(--text); border-radius: var(--radius-sm); padding: .55rem .7rem; margin: 0 0 .85rem; }
.gf-help-body h4 { font-size: .82rem; margin: .95rem 0 .35rem; color: var(--text-muted); }
.gf-help-body h4:first-child { margin-top: 0; }
.gf-help-body ol, .gf-help-body ul { margin: 0; padding-left: 1.2rem; }
.gf-help-body li { margin-bottom: .32rem; }
.gf-help-body ol li::marker { color: var(--primary); font-weight: 700; }
.gf-help-body ul.tips { list-style: none; padding-left: 0; }
.gf-help-body ul.tips li { position: relative; padding-left: 1.05rem; }
.gf-help-body ul.tips li::before { content: "•"; position: absolute; left: .2rem; color: var(--warning); font-weight: 700; }
.gf-help-body .fields { margin: 0; }
.gf-help-body .fields dt { font-weight: 600; margin-top: .5rem; }
.gf-help-body .fields dt:first-child { margin-top: 0; }
.gf-help-body .fields dd { margin: .1rem 0 0; color: var(--text-muted); }
.gf-help-foot { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; padding: .7rem 1rem; border-top: 1px solid var(--border); background: var(--surface-2); }
.gf-help-foot .gf-help-close { margin-left: auto; }
@media (max-width: 640px) {
  .gf-help-pop { position: fixed; inset: auto .75rem .75rem; width: auto; }
  .gf-help-body { max-height: 50vh; }
  /* จอแคบ ปุ่มจัดการมักตกบรรทัด ดันปุ่มคู่มือให้ยังชิดขวาเสมอ */
  .page-header .actions ~ .gf-help { margin-left: auto; }
}

/* =====================================================================
   คู่มือระบบ (โหมดทดลอง) - หน้าเรียนรู้แบบกดเล่นได้ ไม่มีการบันทึกจริง
   ===================================================================== */
/* แถบเตือนว่าเป็นโหมดทดลอง ติดอยู่บนสุดของทุกบทเรียน */
.gf-sim { display: flex; flex-wrap: wrap; gap: .6rem .9rem; align-items: center; margin-bottom: 1.1rem; padding: .7rem 1rem;
  border: 1px dashed var(--warning); border-left: 4px solid var(--warning); border-radius: var(--radius); background: var(--warning-soft); color: var(--text); font-size: .88rem; }
.gf-sim .chip { display: inline-flex; align-items: center; gap: .35rem; padding: .18rem .55rem; border-radius: 999px; background: var(--warning); color: #fff; font-size: .76rem; font-weight: 700; white-space: nowrap; }
.gf-sim .sp { margin-left: auto; display: flex; gap: .4rem; }

/* หน้าแรกของคู่มือ */
.gf-guide-hero { position: relative; overflow: hidden; border-radius: var(--radius-lg); border: 1px solid var(--border); background: var(--surface); box-shadow: var(--shadow); padding: 1.4rem 1.5rem; margin-bottom: 1.2rem; }
.gf-guide-hero::before { content: ""; position: absolute; inset: 0 0 auto; height: 4px; background: var(--brand-grad); }
.gf-guide-hero h2 { margin: 0 0 .4rem; font-size: 1.2rem; }
.gf-guide-hero p { color: var(--text-muted); margin: 0 0 .5rem; max-width: 72ch; }
.gf-chapters { display: grid; grid-template-columns: repeat(auto-fill, minmax(265px, 1fr)); gap: .9rem; }
.gf-ch { display: flex; flex-direction: column; gap: .4rem; padding: 1rem; background: var(--surface); border: 1px solid var(--border); border-left: 3px solid var(--primary);
  border-radius: var(--radius); color: var(--text); text-decoration: none; box-shadow: var(--shadow); transition: transform .12s, box-shadow .12s, border-color .12s; }
.gf-ch:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); text-decoration: none; border-left-color: var(--accent); }
.gf-ch .top { display: flex; align-items: center; gap: .55rem; }
.gf-ch .ic { width: 38px; height: 38px; flex: none; display: grid; place-items: center; font-size: 1.25rem; border-radius: 11px; background: linear-gradient(145deg, var(--primary-soft), var(--surface-3)); }
.gf-ch b { font-size: .97rem; }
.gf-ch p { margin: 0; font-size: .84rem; color: var(--text-muted); flex: 1; }
.gf-ch .meta { display: flex; gap: .45rem; align-items: center; font-size: .76rem; color: var(--text-faint); }

/* ตัวติดตามขั้นตอนของบทเรียน */
.gf-steps { display: flex; flex-wrap: wrap; gap: .4rem; list-style: none; margin: 0 0 1rem; padding: 0; counter-reset: gfstep; }
.gf-steps li { counter-increment: gfstep; display: flex; align-items: center; gap: .4rem; padding: .35rem .7rem .35rem .45rem; border: 1px solid var(--border); border-radius: 999px;
  background: var(--surface); color: var(--text-muted); font-size: .82rem; }
.gf-steps li::before { content: counter(gfstep); width: 20px; height: 20px; flex: none; display: grid; place-items: center; border-radius: 50%; background: var(--surface-3); color: var(--text-muted); font-size: .72rem; font-weight: 700; }
.gf-steps li.now { border-color: var(--primary); background: var(--primary-soft); color: var(--primary); font-weight: 600; }
.gf-steps li.now::before { background: var(--primary); color: #fff; }
.gf-steps li.done { border-color: var(--success); color: var(--success); }
.gf-steps li.done::before { content: "\2713"; background: var(--success); color: #fff; }

/* โครงบทเรียน: ซ้ายลองทำ ขวาอธิบายว่าเกิดอะไรขึ้น */
.gf-lesson { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 1.1rem; align-items: start; }
@media (max-width: 900px) { .gf-lesson { grid-template-columns: minmax(0, 1fr); } }
.gf-why { position: sticky; top: calc(var(--topbar-h) + .75rem); }
@media (max-width: 900px) { .gf-why { position: static; } }
.gf-why h4 { font-size: .85rem; color: var(--text-muted); margin: .9rem 0 .3rem; }
.gf-why h4:first-child { margin-top: 0; }
.gf-why ul { margin: 0; padding-left: 1.15rem; font-size: .87rem; }
.gf-why li { margin-bottom: .3rem; }

/* กล่องผลลัพธ์จำลอง (เอกสารที่ระบบจะสร้าง / การแจ้งเตือน / บรรทัด audit) */
.gf-out { border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface-2); padding: .85rem 1rem; margin-bottom: .8rem; }
.doc-no { font-family: Consolas, monospace; font-weight: 700; color: var(--primary); }
.gf-line { display: flex; gap: .55rem; align-items: flex-start; padding: .5rem .7rem; border-radius: var(--radius-sm); background: var(--surface); border: 1px solid var(--border); margin-bottom: .4rem; font-size: .85rem; }
.gf-line .ic { font-size: 1rem; line-height: 1.3; }
.gf-line small { display: block; color: var(--text-muted); }
.gf-line.audit { background: var(--surface-3); font-family: Consolas, monospace; font-size: .78rem; }

/* หน้าจอจำลองสำหรับบท "รู้จักหน้าจอ" */
.gf-mock { position: relative; display: grid; grid-template-columns: 148px minmax(0, 1fr); border: 1px solid var(--border-strong); border-radius: var(--radius); overflow: hidden; background: var(--surface); font-size: .74rem; }
@media (max-width: 640px) { .gf-mock { grid-template-columns: 92px minmax(0, 1fr); font-size: .68rem; } }
.gf-mock .m-side { background: var(--sidebar-bg); color: var(--sidebar-text); padding: .55rem .5rem; min-height: 236px; }
.gf-mock .m-side .m-brand { color: #fff; font-weight: 700; padding: .3rem .35rem .55rem; border-bottom: 1px solid rgba(255,255,255,.08); margin-bottom: .4rem; }
.gf-mock .m-side .m-item { padding: .28rem .4rem; border-radius: 6px; margin-bottom: 2px; }
.gf-mock .m-side .m-item.on { background: var(--primary); color: #fff; }
.gf-mock .m-top { display: flex; align-items: center; gap: .4rem; padding: .45rem .6rem; border-bottom: 1px solid var(--border); background: var(--surface); }
.gf-mock .m-top .sp { margin-left: auto; display: flex; gap: .3rem; }
.gf-mock .m-body { padding: .6rem; background: var(--bg); }
.gf-mock .m-head { display: flex; align-items: center; gap: .4rem; margin-bottom: .5rem; }
.gf-mock .m-head b { font-size: .92rem; }
.gf-mock .m-btn { padding: .18rem .5rem; border-radius: 5px; background: var(--primary); color: #fff; font-size: .68rem; }
.gf-mock .m-filter { display: flex; gap: .3rem; margin-bottom: .5rem; }
.gf-mock .m-filter span { flex: 1; padding: .25rem .4rem; border: 1px solid var(--border-strong); border-radius: 5px; background: var(--surface); color: var(--text-faint); }
.gf-mock table { width: 100%; border-collapse: collapse; background: var(--surface); border: 1px solid var(--border); }
.gf-mock th, .gf-mock td { padding: .28rem .45rem; border-bottom: 1px solid var(--border); text-align: left; }
.gf-mock th { background: var(--surface-2); color: var(--text-muted); font-weight: 600; }
.gf-hot { position: relative; display: inline-grid; vertical-align: middle; width: 22px; height: 22px; border-radius: 50%; border: 2px solid #fff; background: var(--accent); color: #fff; font-size: .72rem; font-weight: 700;
  place-items: center; cursor: pointer; box-shadow: 0 2px 8px rgba(0,0,0,.3); transition: transform .12s; z-index: 2; padding: 0; line-height: 1; }
.gf-hot:hover { transform: scale(1.15); }
.gf-hot.on { background: var(--primary); animation: gf-hot-ring 1.6s ease-out infinite; }
@keyframes gf-hot-ring { 0% { box-shadow: 0 0 0 0 rgba(15,125,114,.55); } 100% { box-shadow: 0 0 0 12px rgba(15,125,114,0); } }

/* สลิปเงินเดือนจำลอง */
.gf-slip { border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; background: var(--surface); }
.gf-slip .sl-head { padding: .6rem .9rem; background: var(--surface-2); border-bottom: 1px solid var(--border); font-weight: 600; font-size: .9rem; }
.gf-slip table { width: 100%; border-collapse: collapse; font-size: .87rem; }
.gf-slip td { padding: .35rem .9rem; border-bottom: 1px solid var(--border); }
.gf-slip td:last-child { text-align: right; font-family: Consolas, monospace; white-space: nowrap; }
.gf-slip tr.sec td { background: var(--surface-2); font-weight: 600; font-size: .82rem; color: var(--text-muted); }
.gf-slip tr.net td { background: var(--primary-soft); font-weight: 700; font-size: .95rem; }
.gf-slip tr.pick { cursor: pointer; }
.gf-slip tr.pick:hover td { background: var(--surface-3); }
.gf-slip tr.pick.on td { background: var(--info-soft); }

/* เส้นทางผู้สมัคร */
.gf-pipe { display: flex; flex-wrap: wrap; gap: .35rem; margin-bottom: 1rem; }
.gf-pipe .st { flex: 1 1 110px; font: inherit; cursor: pointer; padding: .45rem .5rem; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); text-align: center; font-size: .78rem; color: var(--text-muted); }
.gf-pipe .st.done { border-color: var(--success); background: var(--success-soft); color: var(--success); }
.gf-pipe .st.now { border-color: var(--primary); background: var(--primary-soft); color: var(--primary); font-weight: 700; box-shadow: 0 0 0 3px var(--primary-soft); }
.gf-pipe .st b { display: block; font-size: .74rem; opacity: .75; font-weight: 500; }

/* คำถามพบบ่อย */
.gf-faq { border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; background: var(--surface); }
.gf-faq .q { width: 100%; display: flex; gap: .5rem; align-items: center; padding: .7rem .9rem; background: none; border: 0; border-bottom: 1px solid var(--border);
  font: inherit; font-size: .9rem; font-weight: 600; text-align: left; color: var(--text); cursor: pointer; }
.gf-faq .q:hover { background: var(--surface-2); }
.gf-faq .q .cv { margin-left: auto; color: var(--text-faint); transition: transform .15s; font-size: .8rem; }
.gf-faq .q.on .cv { transform: rotate(90deg); }
.gf-faq .a { padding: .1rem .9rem .9rem 2rem; border-bottom: 1px solid var(--border); font-size: .88rem; color: var(--text-muted); }
.gf-faq .a b { color: var(--text); }
.gf-kbd { display: inline-block; padding: .05rem .35rem; border: 1px solid var(--border-strong); border-bottom-width: 2px; border-radius: 4px; background: var(--surface-2); font-family: Consolas, monospace; font-size: .8em; }

@media (prefers-reduced-motion: reduce) {
  .gf-help-btn::after, .gf-hot.on, .gf-help-pop { animation: none; }
}

/* ===================================================================
   โหมดดูบทเรียน (public/js/tutorial.js) - เมาส์ปลอม วงไฮไลต์ คำบรรยาย
   ใช้ทั้งตอนคนดูในระบบและตอนอัดวิดีโอ จึงต้องอ่านง่ายบนจอเล็กและในวิดีโอ
   =================================================================== */
.gf-tut { position: fixed; inset: 0; z-index: 9000; pointer-events: none; font-family: var(--font); }
.gf-tut * { box-sizing: border-box; }

/* วงไฮไลต์รอบจุดที่กำลังพูดถึง */
.gf-tut-spot { position: absolute; border-radius: var(--radius); opacity: 0; transition: opacity .3s ease, left .45s cubic-bezier(.4,0,.2,1), top .45s cubic-bezier(.4,0,.2,1), width .45s, height .45s; box-shadow: 0 0 0 3px var(--primary), 0 0 0 7px rgba(15,125,114,.32); }
.gf-tut-spot.on { opacity: 1; }


/* เมาส์ปลอม - ลูกศรเดียวกับที่ผู้ใช้เห็นจริง วาดด้วย SVG จึงคมทุกความละเอียด */
.gf-tut-cursor { position: absolute; width: 26px; height: 26px; margin: -3px 0 0 -3px; transition: left .5s cubic-bezier(.34,.05,.2,1), top .5s cubic-bezier(.34,.05,.2,1), transform .15s ease; filter: drop-shadow(0 2px 4px rgba(0,0,0,.45)); background: center/contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5.5 3.2 5.5 19.6 9.7 15.6 12.5 21.7 15.2 20.4 12.4 14.4 18.3 13.9Z' fill='%23fff' stroke='%23181320' stroke-width='1.3' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.gf-tut-cursor.down { transform: scale(.82); }
.gf-tut-ripple { position: absolute; width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%; border: 2px solid var(--primary); animation: gf-tut-ripple .65s ease-out forwards; }
@keyframes gf-tut-ripple { from { opacity: .9; transform: scale(.4); } to { opacity: 0; transform: scale(4.6); } }

/* คำบรรยาย - อ่านได้ทั้งบนจอมือถือและในวิดีโอ 1080p */
.gf-tut-cc { position: absolute; left: 50%; bottom: 2.2rem; transform: translate(-50%, 14px); width: min(60rem, calc(100% - 3rem)); padding: .95rem 1.35rem 1.05rem; border-radius: 14px; background: rgba(20,16,26,.9); color: #fff; box-shadow: 0 18px 44px rgba(0,0,0,.4); backdrop-filter: blur(10px); opacity: 0; transition: opacity .35s ease, transform .35s ease; }
.gf-tut-cc.on { opacity: 1; transform: translate(-50%, 0); }
.gf-tut-cc-n { font-size: .7rem; letter-spacing: .06em; text-transform: uppercase; color: #9fe6dc; margin-bottom: .3rem; }
.gf-tut-cc-t { font-size: 1.18rem; line-height: 1.72; }
.gf-tut-cc-t b { color: #7fe3d5; }

/* แถบความคืบหน้าบนสุด ใช้เฉดสีโลโก้ */
.gf-tut-bar { position: absolute; top: 0; left: 0; right: 0; height: 3px; background: rgba(0,0,0,.12); }
.gf-tut-bar i { display: block; height: 100%; width: 0; background: var(--brand-grad); transition: width .4s ease; }

/* การ์ดเปิด-ปิดเรื่อง */
.gf-tut-card { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; background: radial-gradient(120% 120% at 50% 0%, #2c2437, #15111b 70%); color: #fff; opacity: 0; visibility: hidden; transition: opacity .5s ease; }
.gf-tut-card.on { opacity: 1; visibility: visible; }
.gf-tut-card .in { max-width: 46rem; padding: 2rem; }
.gf-tut-card .gf-logo { width: 84px; height: 84px; margin-bottom: 1.1rem; }
.gf-tut-card .ttl { font-size: 2.5rem; font-weight: 800; line-height: 1.3; background: var(--brand-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.gf-tut-card .sub { margin-top: .9rem; font-size: 1.15rem; line-height: 1.7; color: #c9c1d4; }

/* ปุ่มควบคุมสำหรับคนดูในระบบ (ตอนอัดวิดีโอจะไม่ถูกสร้าง) */
.gf-tut-ctl { position: absolute; right: 1.1rem; bottom: 1.1rem; display: flex; gap: .4rem; pointer-events: auto; }
.gf-tut.paused .gf-tut-cc::after { content: 'หยุดชั่วคราว'; position: absolute; right: 1.35rem; top: .8rem; font-size: .72rem; color: #f3c98a; }

/* ตอนกำลังเล่น ห้ามคนดูเผลอกดอะไรในหน้า - กันเผลอไปแตะจนบทเรียนเพี้ยน */
html.gf-watching .app-main { user-select: none; }
html.gf-watching .gf-help { display: none; }

@media (max-width: 640px) {
  .gf-tut-cc { bottom: 1rem; padding: .8rem 1rem; }
  .gf-tut-cc-t { font-size: 1rem; line-height: 1.65; }
  .gf-tut-card .ttl { font-size: 1.7rem; }
  .gf-tut-card .sub { font-size: 1rem; }
}
@media (prefers-reduced-motion: reduce) {
  .gf-tut-spot, .gf-tut-cursor, .gf-tut-cc, .gf-tut-bar i, .gf-tut-card { transition: none; }
  .gf-tut-ripple { animation: none; opacity: 0; }
}
@media print { .gf-tut { display: none !important; } }

/* ---------- ช่องวันที่ dd/mm/yyyy + ปฏิทิน (components/date-input · Alpine gfDate) ---------- */
.gf-date { position: relative; display: inline-flex; align-items: stretch; vertical-align: middle; max-width: 100%; }
.field > .gf-date { display: flex; width: 100%; }
.gf-date > input { flex: 1 1 auto; min-width: 0; padding-right: 2.1rem; font-variant-numeric: tabular-nums; }
.gf-date-btn { position: absolute; right: .25rem; top: 50%; transform: translateY(-50%); border: 0; background: transparent; cursor: pointer; font-size: .95rem; line-height: 1; padding: .2rem .3rem; border-radius: var(--radius-sm); color: var(--text-muted); }
.gf-date-btn:hover { background: var(--surface-3); color: var(--text); }
.gf-date-pop { position: absolute; top: calc(100% + 6px); left: 0; z-index: 60; width: 296px; max-width: calc(100vw - 2rem); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-lg); padding: .6rem; animation: gf-help-in .12s ease-out; text-align: left; }
.gf-date-head { display: flex; gap: .3rem; align-items: center; margin-bottom: .45rem; }
.gf-date-sel { flex: 1 1 auto; min-width: 0; padding: .25rem .3rem !important; font-size: .85rem !important; height: auto !important; }
.gf-date-year { flex: 0 0 5.6rem; }
.gf-date-nav { flex: 0 0 auto; border: 1px solid var(--border); background: var(--surface-2); border-radius: var(--radius-sm); width: 1.9rem; height: 1.9rem; cursor: pointer; color: var(--text); font-size: 1.05rem; line-height: 1; }
.gf-date-nav:hover { background: var(--surface-3); }
.gf-date-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.gf-date-dow { text-align: center; font-size: .72rem; color: var(--text-faint); padding: .15rem 0 .25rem; }
.gf-date-dow:first-child, .gf-date-dow:nth-child(7) { color: var(--danger); opacity: .75; }
.gf-date-day { border: 0; background: transparent; border-radius: var(--radius-sm); height: 2rem; cursor: pointer; font-size: .85rem; color: var(--text); font-variant-numeric: tabular-nums; }
.gf-date-day:hover:not(:disabled) { background: var(--primary-soft); }
.gf-date-day.is-other { color: var(--text-faint); }
.gf-date-day.is-today { box-shadow: inset 0 0 0 1px var(--primary); }
.gf-date-day.is-selected { background: var(--primary); color: var(--primary-contrast); font-weight: 600; }
.gf-date-day.is-disabled { color: var(--border-strong); cursor: not-allowed; }
.gf-date-foot { display: flex; gap: .4rem; align-items: center; justify-content: flex-end; margin-top: .45rem; padding-top: .45rem; border-top: 1px solid var(--border); }
.gf-date-time { margin-right: auto; font-size: .8rem; color: var(--text-muted); display: flex; align-items: center; gap: .3rem; }
.gf-date-time input { padding: .2rem .3rem !important; font-size: .85rem !important; width: auto !important; }
@media (max-width: 640px) { .gf-date-pop { left: auto; right: 0; } }
@media print { .gf-date-btn, .gf-date-pop { display: none !important; } }