:root {
  --bg: #F8FAF8;
  --surface: #FFFFFF;
  --surface-soft: #F2F7F5;
  --surface-mint: #EAF6F2;
  --primary: #167D7F;
  --primary-dark: #123C4A;
  --primary-soft: #E6F3F1;
  --mint: #8FD6C8;
  --coral: #FF8A65;
  --text: #202B2D;
  --text-secondary: #687678;
  --text-tertiary: #94A09F;
  --border: #E4EAE7;
  --border-strong: #D7E0DC;
  --success: #2E9B68;
  --success-bg: #EAF6F0;
  --warning: #E6A23C;
  --warning-bg: #FFF6E5;
  --danger: #D9534F;
  --danger-bg: #FDEEEE;
  --info: #3B82F6;
  --info-bg: #EDF4FF;
  --radius-card: 18px;
  --radius-button: 11px;
  --radius-input: 11px;
  --radius-modal: 24px;
  --shadow-soft: 0 8px 24px rgba(18, 60, 74, .045);
  --shadow-float: 0 24px 70px rgba(18, 60, 74, .14);
  --font-th: "IBM Plex Sans Thai", sans-serif;
  --font-en: "IBM Plex Sans", "IBM Plex Sans Thai", sans-serif;
}

* { box-sizing: border-box; }
html { background: var(--bg); }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-th);
  font-size: 14px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
body.mobile-nav-open { overflow: hidden; }
button, input, select, textarea { font: inherit; }
button { cursor: pointer; }
button, a, input, select, textarea { -webkit-tap-highlight-color: transparent; }
button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 3px solid rgba(22, 125, 127, .16);
  outline-offset: 2px;
}
svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Brand */
.brand-lockup { display: flex; align-items: center; gap: 11px; min-width: 0; }
.brand-mark {
  width: 46px;
  height: 46px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  border-radius: 14px;
  background: var(--primary);
  color: #fff;
  font-family: var(--font-th);
  font-size: 22px;
  font-weight: 700;
  line-height: 1;
}
.brand-mark.small { width: 40px; height: 40px; border-radius: 12px; font-size: 19px; }
.brand-wordmark { min-width: 0; }
.brand-wordmark strong { display: block; color: var(--primary-dark); font-size: 18px; font-weight: 700; line-height: 1.15; }
.brand-wordmark span { display: block; margin-top: 3px; color: var(--text-tertiary); font: 400 10.5px/1.2 var(--font-en); letter-spacing: .01em; white-space: nowrap; }

.kicker {
  margin: 0;
  color: var(--primary);
  font: 600 10px/1.3 var(--font-en);
  letter-spacing: .115em;
  text-transform: uppercase;
}
.kicker-light { color: var(--mint); }
.muted { color: var(--text-secondary); }

/* Login */
.login-overlay {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  place-items: center;
  padding: 28px;
  background: #EEF3F0;
}
.login-overlay.hidden { display: none; }
.login-shell {
  width: min(960px, 100%);
  min-height: 570px;
  display: grid;
  grid-template-columns: 1.12fr .88fr;
  overflow: hidden;
  border: 1px solid rgba(18, 60, 74, .09);
  border-radius: 28px;
  background: var(--surface);
  box-shadow: var(--shadow-float);
}
.login-brand-panel {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 42px;
  background: var(--primary-dark);
  color: #fff;
}
.login-brand-panel::after {
  content: "";
  position: absolute;
  right: -105px;
  bottom: -130px;
  width: 350px;
  height: 350px;
  border-radius: 50%;
  background: rgba(143, 214, 200, .11);
}
.login-lockup .brand-mark { background: var(--mint); color: var(--primary-dark); }
.login-lockup .brand-wordmark strong { color: #fff; }
.login-lockup .brand-wordmark span { color: rgba(255,255,255,.56); }
.login-brand-copy { position: relative; z-index: 2; }
.login-brand-copy .kicker { margin-top: 68px; }
.login-brand-copy h1 {
  max-width: 460px;
  margin: 12px 0 13px;
  font-size: clamp(32px, 4vw, 45px);
  line-height: 1.2;
  font-weight: 700;
  letter-spacing: -.025em;
}
.login-lead { max-width: 430px; margin: 0; color: rgba(255,255,255,.72); font-size: 14px; }
.login-card {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 58px 52px;
  background: var(--surface);
}
.login-mobile-brand { display: none; margin-bottom: 34px; }
.login-card h2 { margin: 8px 0 3px; color: var(--primary-dark); font-size: 27px; line-height: 1.25; }
.login-description { margin: 0 0 26px; }
.standalone-field { margin-bottom: 14px; }
.security-note { margin: 13px 0 0; color: var(--text-tertiary); font-size: 11px; }
.security-note span { color: var(--success); font-size: 9px; margin-right: 5px; }
.error-text { min-height: 20px; margin-top: 8px; color: var(--danger); font-size: 12px; }

.otter-scene { position: relative; z-index: 1; height: 190px; }
.otter-desk { position: absolute; inset: auto 0 0; height: 170px; }
.desk-line { position: absolute; left: 12px; right: 6px; bottom: 16px; height: 10px; border-radius: 6px; background: #8C654B; }
.otter-monitor {
  position: absolute;
  right: 38px;
  bottom: 27px;
  width: 128px;
  height: 88px;
  display: grid;
  place-items: center;
  border: 8px solid #DDE7E3;
  border-radius: 10px;
  background: #F7FAF8;
  color: var(--primary);
  font: 700 24px/1 var(--font-en);
}
.otter-monitor::after { content:""; position:absolute; left:50%; bottom:-31px; width:8px; height:24px; background:#DDE7E3; transform:translateX(-50%); }
.otter-monitor::before { content:""; position:absolute; left:50%; bottom:-36px; width:46px; height:6px; border-radius:4px; background:#DDE7E3; transform:translateX(-50%); }
.otter-character { position: absolute; left: 40px; bottom: 26px; width: 142px; height: 135px; }
.otter-body { position:absolute; left:30px; bottom:0; width:84px; height:78px; border-radius:48% 48% 26% 26%; background:#8B6247; }
.otter-face { position:absolute; z-index:2; left:24px; top:6px; width:96px; height:82px; border-radius:48% 48% 43% 43%; background:#A97855; border:3px solid rgba(74,47,34,.13); }
.otter-face::after { content:""; position:absolute; left:18px; top:37px; width:60px; height:34px; border-radius:50%; background:#D8B08C; }
.ear { position:absolute; z-index:1; top:4px; width:32px; height:32px; border-radius:50%; background:#8B6247; border:6px solid #A97855; }
.ear.left { left:20px; } .ear.right { right:17px; }
.eye { position:absolute; z-index:4; top:33px; width:5px; height:5px; border-radius:50%; background:#2B2521; }
.eye.left { left:30px; } .eye.right { right:30px; }
.nose { position:absolute; z-index:5; left:43px; top:49px; width:11px; height:8px; border-radius:50% 50% 45% 45%; background:#30241E; }
.mouth { position:absolute; z-index:5; left:47px; top:57px; width:7px; height:4px; border-bottom:1.5px solid #5A3E31; border-radius:50%; }

/* App shell */
.app-shell { min-height: 100vh; display: grid; grid-template-columns: 256px minmax(0, 1fr); }
.sidebar {
  position: sticky;
  top: 0;
  z-index: 60;
  height: 100vh;
  display: flex;
  flex-direction: column;
  padding: 24px 16px 18px;
  border-right: 1px solid var(--border);
  background: rgba(255,255,255,.88);
  backdrop-filter: blur(16px);
}
.sidebar-brand { padding: 0 8px 20px; }
.company-switcher {
  display: grid;
  grid-template-columns: 34px minmax(0,1fr) 18px;
  gap: 9px;
  align-items: center;
  margin: 0 3px 18px;
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: 13px;
  background: var(--surface-soft);
}
.company-switcher .company-avatar { width:34px; height:34px; display:grid; place-items:center; border-radius:10px; background:#fff; color:var(--primary); font:600 13px/1 var(--font-en); border:1px solid var(--border); }
.company-switcher strong { display:block; overflow:hidden; color:var(--primary-dark); font-size:12px; font-weight:600; text-overflow:ellipsis; white-space:nowrap; }
.company-switcher span { display:block; margin-top:1px; color:var(--text-tertiary); font-size:9.5px; }
.company-switcher svg { width:16px; height:16px; color:var(--text-tertiary); }
.sidebar nav { display: flex; flex: 1; flex-direction: column; min-height: 0; overflow: auto; padding: 0 3px; scrollbar-width: thin; }
.nav-label { margin: 18px 10px 7px; color: var(--text-tertiary); font: 500 9.5px/1.2 var(--font-th); letter-spacing: .045em; }
.nav-label:first-child { margin-top: 1px; }
.nav-item {
  position: relative;
  width: 100%;
  min-height: 42px;
  display: flex;
  align-items: center;
  gap: 11px;
  border: 0;
  border-radius: 11px;
  padding: 9px 11px;
  background: transparent;
  color: #536163;
  text-align: left;
  transition: background .15s ease, color .15s ease, transform .15s ease;
}
.nav-item svg { width:18px; height:18px; flex:0 0 auto; stroke-width:1.8; }
.nav-item > span { min-width:0; overflow:hidden; font-size:12px; font-weight:500; text-overflow:ellipsis; white-space:nowrap; }
.nav-item:hover { background: #F2F6F4; color: var(--primary-dark); }
.nav-item.active { background: var(--primary-soft); color: var(--primary); }
.nav-item.active > span { font-weight: 600; }
.settings-nav-section {
  display: grid;
  gap: 6px;
  margin: 4px 4px 8px 34px;
  padding: 10px;
  border-left: 1px solid rgba(23,139,139,.16);
}
.settings-nav-section.hidden { display: none !important; }
.nav-subitem {
  width: 100%;
  display: grid;
  gap: 2px;
  padding: 9px 11px;
  border: 0;
  border-radius: 12px;
  background: transparent;
  text-align: left;
  color: #5f7072;
  transition: background .15s ease, color .15s ease, transform .15s ease;
}
.nav-subitem span { font-size: 11.5px; font-weight: 600; color: #29454a; }
.nav-subitem small { display: block; font-size: 9.5px; line-height: 1.45; color: #839194; }
.nav-subitem:hover { background: #f2f7f5; }
.nav-subitem.active { background: rgba(23,139,139,.10); color: var(--primary); }
.nav-subitem.active span { color: var(--primary); }
.nav-subitem.active small { color: #5f8b89; }
.nav-alert {
  min-width: 21px;
  height: 20px;
  margin-left: auto;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: var(--coral);
  color: #fff;
  font: 600 10px/1 var(--font-en);
  font-style: normal;
}
.nav-alert:empty, .nav-alert[data-empty="true"] { display:none; }
.soon-dot { width:6px; height:6px; margin-left:auto; border-radius:50%; background:var(--mint); }
.sidebar-footer { padding: 18px 3px 0; border-top: 1px solid var(--border); }
.line-status { display:flex; align-items:center; gap:9px; margin:0 0 13px; padding:10px; border-radius:12px; background:#F3F8F5; }
.line-logo { display:grid; place-items:center; width:36px; height:25px; border-radius:7px; background:#06C755; color:#fff; font:700 8px/1 var(--font-en); }
.line-status strong { display:block; color:var(--text); font-size:10.5px; font-weight:600; }
.line-status small { display:block; color:var(--text-tertiary); font:400 8.5px/1.2 var(--font-en); margin-top:2px; }
.sidebar-meta { display:flex; justify-content:space-between; padding:0 8px 10px; color:var(--text-tertiary); font:400 9px/1.2 var(--font-en); }
.logout-btn { width:100%; display:flex; align-items:center; gap:8px; border:0; padding:9px 10px; border-radius:10px; background:transparent; color:var(--text-secondary); font-size:11px; text-align:left; }
.logout-btn:hover { background:#F7F2F1; color:var(--danger); }
.logout-btn svg { width:16px; height:16px; }

main { min-width: 0; padding: 0 34px 48px; }
.topbar {
  min-height: 88px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}
.topbar-title { display:flex; align-items:center; gap:10px; min-width:0; }
.topbar h2 { margin:3px 0 0; color:var(--primary-dark); font-size:22px; font-weight:600; line-height:1.2; }
.top-actions { display:flex; align-items:center; gap:9px; }
.date-chip { height:38px; display:flex; align-items:center; gap:8px; padding:0 11px; border:1px solid var(--border); border-radius:11px; background:var(--surface); color:var(--text-secondary); font-size:11px; }
.date-chip svg { width:15px; height:15px; color:var(--primary); }
.icon-btn {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border: 1px solid var(--border);
  border-radius: 11px;
  background: var(--surface);
  color: var(--text-secondary);
  transition: border-color .15s, background .15s, color .15s;
}
.icon-btn:hover { border-color:#C9D8D2; background:#F4F8F6; color:var(--primary); }
.icon-btn svg { width:17px; height:17px; }
.icon-btn.loading svg { animation: spin .75s linear infinite; }
.mobile-menu-btn { display:none; }
.profile-chip { height:40px; display:flex; align-items:center; gap:8px; border:0; padding:4px 8px 4px 4px; border-radius:12px; background:transparent; color:var(--text); text-align:left; }
.profile-chip:hover { background:#F1F5F3; }
.profile-chip > span { width:32px; height:32px; display:grid; place-items:center; border-radius:10px; background:var(--primary-dark); color:#fff; font:600 10px/1 var(--font-en); }
.profile-chip strong { display:block; font-size:10.5px; font-weight:600; }
.profile-chip small { display:block; margin-top:1px; color:var(--text-tertiary); font-size:8.5px; }

/* Shared page */
.view { display: none; animation: viewIn .18s ease both; }
.view.active { display: block; }
.page-intro { display:flex; align-items:flex-end; justify-content:space-between; gap:20px; margin:18px 0 22px; }
.page-intro h1 { margin:5px 0 4px; color:var(--primary-dark); font-size:30px; font-weight:600; line-height:1.2; letter-spacing:-.02em; }
.page-intro p:not(.kicker) { max-width:650px; margin:0; color:var(--text-secondary); font-size:12.5px; }
.panel {
  min-width: 0;
  padding: 21px;
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  background: var(--surface);
}
.panel-head { display:flex; align-items:flex-start; justify-content:space-between; gap:14px; margin-bottom:14px; }
.panel-head h3 { margin:4px 0 0; color:var(--primary-dark); font-size:17px; font-weight:600; }
.panel-subtitle { margin:3px 0 0; color:var(--text-tertiary); font-size:10.5px; }

/* Dashboard */
.welcome-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
  min-height: 142px;
  padding: 24px 27px;
  border: 1px solid #D9E9E4;
  border-radius: 22px;
  background: #F0F7F4;
}
.welcome-bar h1 { margin:6px 0 3px; color:var(--primary-dark); font-size:28px; font-weight:600; line-height:1.25; letter-spacing:-.02em; }
.welcome-bar > div > p:not(.kicker) { margin:0; color:var(--text-secondary); font-size:12px; }
.attention-summary { display:flex; align-items:center; gap:12px; min-width:285px; padding-left:24px; border-left:1px solid #D5E5E0; }
.attention-ring { width:64px; height:64px; flex:0 0 auto; display:grid; place-items:center; align-content:center; border:1px solid #BFDCD4; border-radius:50%; background:#fff; }
.attention-ring strong { color:var(--primary); font:700 23px/1 var(--font-en); }
.attention-ring span { margin-top:3px; color:var(--text-tertiary); font-size:8.5px; }
.attention-summary > div:last-child strong { display:block; color:var(--primary-dark); font-size:12px; font-weight:600; }
.attention-summary > div:last-child span { display:block; max-width:175px; margin-top:3px; color:var(--text-secondary); font-size:10px; line-height:1.45; }
.summary-strip {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  margin: 16px 0 20px;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 17px;
  background: var(--surface);
}
.summary-item { position:relative; padding:17px 18px; }
.summary-item + .summary-item::before { content:""; position:absolute; left:0; top:15px; bottom:15px; width:1px; background:var(--border); }
.summary-label { display:flex; align-items:center; gap:7px; color:var(--text-secondary); font-size:10.5px; }
.summary-dot { width:7px; height:7px; border-radius:50%; background:var(--text-tertiary); }
.summary-dot.brand { background:var(--primary); }.summary-dot.success { background:var(--success); }.summary-dot.warning { background:var(--warning); }.summary-dot.info { background:var(--info); }.summary-dot.danger { background:var(--danger); }
.summary-value { margin-top:5px; color:var(--text); font:700 25px/1.1 var(--font-en); }
.summary-value small { margin-left:3px; color:var(--text-tertiary); font:400 9px/1 var(--font-th); }
.dashboard-grid { display:grid; gap:16px; margin-top:16px; }
.primary-dashboard-grid { grid-template-columns: minmax(0, 1.28fr) minmax(300px, .72fr); }
.secondary-dashboard-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.radar-panel { min-height: 330px; }
.list-stack { display:grid; }
.list-row {
  min-width:0;
  display:flex;
  align-items:center;
  gap:11px;
  padding:11px 2px;
  border-bottom:1px solid #EEF2F0;
}
.list-row:last-child { border-bottom:0; }
.list-row.actionable { cursor:pointer; border-radius:10px; transition:background .15s; }
.list-row.actionable:hover { margin-inline:-7px; padding-inline:9px; background:#F7FAF8; }
.list-icon { width:34px; height:34px; flex:0 0 auto; display:grid; place-items:center; border-radius:10px; background:#F3F7F5; color:var(--primary-dark); }
.list-icon svg { width:17px; height:17px; }
.list-icon.warning { background:var(--warning-bg); color:#B97812; }
.list-icon.coral { background:#FFF0EB; color:#DD6C4A; }
.list-icon.info { background:var(--info-bg); color:var(--info); }
.list-icon.success { background:var(--success-bg); color:var(--success); }
.list-copy { min-width:0; flex:1; }
.list-copy strong { display:block; overflow:hidden; color:var(--text); font-size:11.5px; font-weight:600; text-overflow:ellipsis; white-space:nowrap; }
.list-copy small { display:block; margin-top:2px; overflow:hidden; color:var(--text-tertiary); font-size:9.5px; text-overflow:ellipsis; white-space:nowrap; }
.count { min-width:32px; text-align:right; color:var(--primary-dark); font:700 17px/1 var(--font-en); }
.compact-list .list-row { padding-block:9px; }
.pipeline { display:grid; grid-template-columns:repeat(6, minmax(72px,1fr)); overflow:hidden; border:1px solid var(--border); border-radius:14px; background:#FBFCFB; }
.pipe-item { position:relative; padding:15px 12px; }
.pipe-item + .pipe-item::before { content:""; position:absolute; left:0; top:12px; bottom:12px; width:1px; background:var(--border); }
.pipe-item b { display:block; color:var(--primary-dark); font:700 21px/1.1 var(--font-en); }
.pipe-item span { display:block; margin-top:5px; color:var(--text-tertiary); font:400 8.5px/1.25 var(--font-en); white-space:nowrap; }

/* Badges */
.badge { display:inline-flex; align-items:center; gap:5px; min-height:25px; padding:4px 9px; border-radius:999px; background:#F2F4F3; color:#657171; font-size:9.5px; font-weight:500; white-space:nowrap; }
.badge-brand { background:var(--primary-soft); color:var(--primary); }
.badge-soft { background:#EEF7F4; color:#4A786F; }
.badge-neutral { background:#F2F4F3; color:#687474; }
.badge-success, .badge.green { background:var(--success-bg); color:var(--success); }
.badge-warning, .badge.amber { background:var(--warning-bg); color:#B97812; }
.badge-danger, .badge.red { background:var(--danger-bg); color:var(--danger); }
.badge-info { background:var(--info-bg); color:var(--info); }
.status-dot { width:6px; height:6px; margin:0; border-radius:50%; background:currentColor; }

/* Buttons */
.primary-btn, .secondary-btn, .text-btn, .close-btn {
  border-radius: var(--radius-button);
  font-weight: 600;
  transition: background .15s, border-color .15s, color .15s, transform .08s;
}
.primary-btn {
  min-height: 40px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  border:1px solid var(--primary);
  padding:8px 14px;
  background:var(--primary);
  color:#fff;
  font-size:11.5px;
}
.primary-btn:hover { border-color:var(--primary-dark); background:var(--primary-dark); }
.primary-btn:active, .secondary-btn:active { transform:translateY(1px); }
.primary-btn svg { width:15px; height:15px; }
.secondary-btn {
  min-height: 40px;
  border:1px solid var(--border-strong);
  padding:8px 14px;
  background:#fff;
  color:var(--primary-dark);
  font-size:11.5px;
}
.secondary-btn:hover { border-color:#BDD2CA; background:#F5F9F7; }
.text-btn { border:0; padding:5px 2px; background:transparent; color:var(--primary); font-size:10.5px; }
.text-btn:hover { color:var(--primary-dark); }
.text-btn.danger { color:var(--danger); }
.text-btn.danger:hover { color:#B63834; }
.wide-btn { width:100%; }

/* Toolbar + tables */
.toolbar { display:flex; align-items:center; justify-content:space-between; gap:12px; margin:0 0 14px; }
.search-box { width:min(390px,100%); height:40px; display:flex; align-items:center; gap:8px; border:1px solid var(--border); border-radius:11px; background:#fff; padding:0 11px; transition:border-color .15s, box-shadow .15s; }
.search-box:focus-within { border-color:#A9CEC4; box-shadow:0 0 0 3px rgba(22,125,127,.08); }
.search-box svg { width:16px; height:16px; color:var(--text-tertiary); }
.search-box input { min-width:0; flex:1; border:0; outline:0; background:transparent; color:var(--text); font-size:11.5px; }
.search-box input::placeholder { color:#A5AEAD; }
.toolbar-meta { color:var(--text-secondary); font-size:10.5px; }
.table-card { overflow:auto; border:1px solid var(--border); border-radius:var(--radius-card); background:var(--surface); }
table { width:100%; min-width:760px; border-collapse:separate; border-spacing:0; }
th { position:sticky; top:0; z-index:1; padding:11px 15px; border-bottom:1px solid var(--border); background:#FAFCFB; color:var(--text-tertiary); font-size:9px; font-weight:500; text-align:left; letter-spacing:.015em; }
td { padding:13px 15px; border-bottom:1px solid #EEF2F0; color:#425052; font-size:11.5px; vertical-align:middle; }
tbody tr:last-child td { border-bottom:0; }
tbody tr { transition:background .12s; }
tbody tr:hover { background:#FBFCFB; }
.person { display:flex; align-items:center; gap:9px; min-width:0; }
.avatar { width:35px; height:35px; flex:0 0 auto; display:grid; place-items:center; border:1px solid #D6E9E3; border-radius:11px; background:var(--surface-mint); color:var(--primary); font:600 12px/1 var(--font-th); }
.person strong { display:block; overflow:hidden; max-width:230px; color:var(--text); font-size:11.5px; font-weight:600; text-overflow:ellipsis; white-space:nowrap; }
.person small { display:block; margin-top:1px; color:var(--text-tertiary); font:400 9px/1.2 var(--font-en); }
.table-summary { display:flex; gap:18px; margin:0 0 14px; padding:10px 13px; border:1px solid var(--border); border-radius:12px; background:#fff; }
.table-summary span { color:var(--text-secondary); font-size:10.5px; }
.table-summary strong { margin-right:4px; color:var(--primary-dark); font:600 12px/1 var(--font-en); }

/* Forms */
.field label { display:block; margin:0 0 6px; color:#516062; font-size:10.5px; font-weight:500; }
.field label em { color:var(--danger); font-style:normal; }
.field input, .field select, .field textarea, .input-wrap {
  width:100%;
  border:1px solid var(--border-strong);
  border-radius:var(--radius-input);
  background:#fff;
  transition:border-color .15s, box-shadow .15s, background .15s;
}
.field input, .field select, .field textarea { min-height:42px; padding:9px 11px; outline:0; color:var(--text); font-size:11.5px; }
.field textarea { min-height:96px; resize:vertical; }
.field input:focus, .field select:focus, .field textarea:focus { border-color:#95C7BA; box-shadow:0 0 0 3px rgba(22,125,127,.08); }
.input-wrap { height:43px; display:flex; align-items:center; gap:8px; padding:0 10px; }
.input-wrap:focus-within { border-color:#95C7BA; box-shadow:0 0 0 3px rgba(22,125,127,.08); }
.input-wrap svg { width:16px; height:16px; color:var(--text-tertiary); }
.input-wrap input { min-width:0; flex:1; border:0; outline:0; color:var(--text); background:transparent; font:400 11.5px/1.4 var(--font-en); }
.input-wrap input::placeholder { color:#A7B0AF; }

/* ATS */
.ats-summary { display:flex; align-items:center; gap:10px; margin:-8px 0 15px; }
.ats-summary > span { padding-right:12px; border-right:1px solid var(--border); color:var(--text-secondary); font-size:10px; }
.ats-summary > span:last-child { border-right:0; }
.ats-summary strong { margin-right:4px; color:var(--primary-dark); font:600 13px/1 var(--font-en); }
.kanban { display:grid; grid-template-columns:repeat(6,minmax(220px,1fr)); gap:11px; overflow:auto; padding-bottom:8px; scroll-snap-type:x proximity; }
.kanban-col { min-height:470px; scroll-snap-align:start; padding:10px; border:1px solid var(--border); border-radius:16px; background:#F5F8F6; }
.kanban-head { display:flex; align-items:center; justify-content:space-between; padding:3px 3px 10px; color:var(--primary-dark); font-size:10.5px; font-weight:600; }
.candidate-card { margin-bottom:9px; padding:12px; border:1px solid var(--border); border-radius:13px; background:#fff; }
.candidate-card strong { display:block; color:var(--text); font-size:11.5px; font-weight:600; }
.candidate-card > small { display:block; margin:2px 0 10px; color:var(--text-secondary); font-size:9.5px; }
.candidate-meta { display:flex; justify-content:space-between; gap:8px; color:var(--text-tertiary); font:400 8.5px/1.2 var(--font-en); }
.candidate-card select { width:100%; min-height:34px; margin-top:10px; border:1px solid var(--border); border-radius:9px; outline:0; padding:5px 8px; background:#FBFCFB; color:#526062; font-size:9.5px; }
.candidate-card select:focus { border-color:#A9CEC4; }

/* HR Requests */
.request-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:13px; }
.request-card { display:flex; flex-direction:column; min-height:190px; padding:17px; border:1px solid var(--border); border-radius:16px; background:#fff; transition:border-color .15s, transform .15s; }
.request-card:hover { border-color:#C8D9D4; transform:translateY(-1px); }
.request-card h4 { margin:10px 0 4px; color:var(--primary-dark); font-size:13px; font-weight:600; }
.request-card > p { flex:1; margin:0 0 16px; color:var(--text-secondary); font-size:10.5px; }

/* Empty / future */
.empty-state { min-height:155px; display:grid; place-items:center; align-content:center; padding:22px 14px; text-align:center; }
.empty-face { position:relative; width:46px; height:39px; margin-bottom:9px; border-radius:48% 48% 42% 42%; background:#A97855; }
.empty-face::before, .empty-face::after { content:""; position:absolute; top:15px; width:4px; height:4px; border-radius:50%; background:#2F2722; }
.empty-face::before { left:13px; } .empty-face::after { right:13px; }
.empty-face span { position:absolute; left:19px; top:23px; width:8px; height:5px; border-radius:50%; background:#382820; }
.empty-state strong { color:var(--primary-dark); font-size:11.5px; font-weight:600; }
.empty-state p { max-width:280px; margin:3px 0 0; color:var(--text-tertiary); font-size:9.5px; }
.future-view { min-height:calc(100vh - 130px); }
.module-empty { min-height:510px; display:grid; place-items:center; align-content:center; padding:40px; border:1px dashed #C9D8D2; border-radius:22px; background:rgba(255,255,255,.56); text-align:center; }
.module-icon { width:58px; height:58px; display:grid; place-items:center; margin-bottom:14px; border-radius:18px; background:var(--primary-soft); color:var(--primary); }
.module-icon svg { width:25px; height:25px; }
.module-empty h1 { margin:9px 0 5px; color:var(--primary-dark); font-size:23px; font-weight:600; }
.module-empty p { max-width:470px; margin:0 0 18px; color:var(--text-secondary); font-size:11.5px; }
.settings-preview { padding-top:1px; }
.settings-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:13px; }
.setting-card { display:grid; grid-template-columns:42px minmax(0,1fr) 18px; gap:11px; align-items:center; padding:16px; border:1px solid var(--border); border-radius:16px; background:#fff; }
.setting-card > span { color:var(--text-tertiary); font-size:18px; }
.setting-icon { width:42px; height:42px; display:grid; place-items:center; border-radius:12px; background:var(--surface-mint); color:var(--primary); }
.setting-icon svg { width:19px; height:19px; }
.setting-card strong { color:var(--primary-dark); font-size:11.5px; font-weight:600; }
.setting-card p { margin:2px 0 0; color:var(--text-tertiary); font-size:9.5px; }

/* Modal */
dialog { width:min(650px, calc(100vw - 28px)); max-height:calc(100vh - 30px); overflow:auto; border:1px solid var(--border); border-radius:var(--radius-modal); padding:0; background:#fff; box-shadow:var(--shadow-float); }
dialog::backdrop { background:rgba(18,45,50,.32); backdrop-filter:blur(5px); }
dialog form { padding:25px; }
.modal-head { display:flex; align-items:flex-start; justify-content:space-between; gap:18px; padding-bottom:17px; border-bottom:1px solid var(--border); }
.modal-head h3 { margin:4px 0 1px; color:var(--primary-dark); font-size:20px; font-weight:600; }
.modal-head p:not(.kicker) { margin:0; color:var(--text-tertiary); font-size:10px; }
.close-btn { width:35px; height:35px; flex:0 0 auto; display:grid; place-items:center; border:1px solid var(--border); background:#fff; color:var(--text-secondary); }
.close-btn:hover { background:#F7F9F8; color:var(--text); }
.close-btn svg { width:16px; height:16px; }
.modal-fields { display:grid; grid-template-columns:1fr 1fr; gap:14px 12px; margin:20px 0; }
.field.full { grid-column:1 / -1; }
.modal-actions { display:flex; justify-content:flex-end; gap:8px; padding-top:17px; border-top:1px solid var(--border); }

/* Toast */
.toast { position:fixed; z-index:300; right:22px; bottom:22px; display:flex; align-items:center; gap:8px; min-width:180px; max-width:340px; padding:11px 13px; border:1px solid #CFE6DB; border-radius:12px; background:#F2FAF6; color:#286F50; box-shadow:0 14px 35px rgba(18,60,74,.12); opacity:0; transform:translateY(8px); pointer-events:none; transition:.18s; font-size:10.5px; }
.toast.show { opacity:1; transform:none; }
.toast.error { border-color:#F1C9C7; background:#FFF5F4; color:var(--danger); }
.toast > span:first-child { width:20px; height:20px; display:grid; place-items:center; border-radius:50%; background:var(--success); color:#fff; font:600 10px/1 var(--font-en); }
.toast.error > span:first-child { background:var(--danger); }
.toast > span:first-child::first-letter { color:#fff; }

/* Loading */
.skeleton { position:relative; overflow:hidden; border-radius:8px; background:#EDF2EF; color:transparent!important; }
.skeleton::after { content:""; position:absolute; inset:0; transform:translateX(-100%); background:linear-gradient(90deg, transparent, rgba(255,255,255,.62), transparent); animation: shimmer 1.2s infinite; }
.loading-row { height:54px; border-bottom:1px solid #EEF2F0; }

/* Mobile nav backdrop */
.mobile-nav-backdrop { display:none; position:fixed; inset:0; z-index:55; background:rgba(18,45,50,.28); backdrop-filter:blur(2px); }
body.mobile-nav-open .mobile-nav-backdrop { display:block; }

@keyframes spin { to { transform:rotate(360deg); } }
@keyframes shimmer { to { transform:translateX(100%); } }
@keyframes viewIn { from { opacity:0; transform:translateY(4px); } to { opacity:1; transform:none; } }

@media (max-width: 1120px) {
  .app-shell { grid-template-columns: 225px minmax(0,1fr); }
  main { padding-inline:24px; }
  .primary-dashboard-grid { grid-template-columns:1fr; }
  .moments-panel { min-height:0; }
  .request-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .settings-grid { grid-template-columns:1fr 1fr; }
}

@media (max-width: 900px) {
  .app-shell { display:block; }
  .sidebar {
    position:fixed;
    left:0;
    top:0;
    bottom:0;
    width:270px;
    height:100dvh;
    transform:translateX(-105%);
    transition:transform .2s ease;
    box-shadow:18px 0 50px rgba(18,60,74,.1);
  }
  body.mobile-nav-open .sidebar { transform:translateX(0); }
  main { padding-inline:20px; }
  .mobile-menu-btn { display:grid; }
  .topbar { min-height:78px; }
  .summary-strip { grid-template-columns:repeat(3,1fr); }
  .summary-item:nth-child(4), .summary-item:nth-child(5) { border-top:1px solid var(--border); }
  .summary-item:nth-child(4)::before { display:none; }
  .secondary-dashboard-grid { grid-template-columns:1fr; }
  .login-shell { grid-template-columns:1fr; max-width:480px; min-height:0; }
  .login-brand-panel { display:none; }
  .login-card { min-height:520px; padding:44px; }
  .login-mobile-brand { display:flex; }
}

@media (max-width: 680px) {
  body { font-size:13px; }
  main { padding:0 14px 34px; }
  .topbar { min-height:70px; }
  .topbar .kicker { display:none; }
  .topbar h2 { margin:0; font-size:18px; }
  .date-chip, .profile-chip div { display:none; }
  .profile-chip { padding:4px; }
  .welcome-bar { display:block; min-height:0; padding:19px; border-radius:18px; }
  .welcome-bar h1 { font-size:22px; }
  .attention-summary { min-width:0; margin-top:18px; padding:14px 0 0; border-left:0; border-top:1px solid #D5E5E0; }
  .attention-ring { width:55px; height:55px; }
  .attention-ring strong { font-size:20px; }
  .summary-strip { grid-template-columns:repeat(2,1fr); }
  .summary-item { padding:14px; }
  .summary-item:nth-child(3), .summary-item:nth-child(4), .summary-item:nth-child(5) { border-top:1px solid var(--border); }
  .summary-item:nth-child(3)::before, .summary-item:nth-child(5)::before { display:none; }
  .summary-item:nth-child(4)::before { display:block; }
  .summary-value { font-size:22px; }
  .dashboard-grid { gap:12px; margin-top:12px; }
  .panel { padding:16px; border-radius:16px; }
  .panel-head { gap:9px; }
  .panel-head h3 { font-size:15px; }
  .panel-subtitle { display:none; }
  .pipeline { grid-template-columns:repeat(3,1fr); }
  .pipe-item:nth-child(4), .pipe-item:nth-child(5), .pipe-item:nth-child(6) { border-top:1px solid var(--border); }
  .pipe-item:nth-child(4)::before { display:none; }
  .page-intro { align-items:flex-start; margin:12px 0 16px; }
  .page-intro h1 { font-size:24px; }
  .page-intro .primary-btn { flex:0 0 auto; min-width:40px; padding-inline:10px; font-size:0; }
  .page-intro .primary-btn svg { width:18px; height:18px; }
  .toolbar { display:block; }
  .search-box { width:100%; }
  .toolbar-meta { margin-top:7px; text-align:right; }
  .request-grid { grid-template-columns:1fr; }
  .table-summary { overflow:auto; gap:13px; white-space:nowrap; }

  .table-card { overflow:visible; border:0; background:transparent; }
  table { min-width:0; border-collapse:separate; border-spacing:0 9px; }
  thead { display:none; }
  tbody, tr, td { display:block; width:100%; }
  tbody tr { overflow:hidden; margin-bottom:9px; border:1px solid var(--border); border-radius:15px; background:#fff; }
  tbody tr:hover { background:#fff; }
  td { min-height:40px; display:flex; align-items:center; justify-content:space-between; gap:14px; padding:9px 13px; border-bottom:1px solid #EEF2F0; text-align:right; }
  td:last-child { border-bottom:0; }
  td::before { content:attr(data-label); flex:0 0 92px; color:var(--text-tertiary); font-size:9px; text-align:left; }
  td:first-child { padding-top:12px; }
  td:first-child::before { display:none; }
  td:first-child .person { flex:1; }
  td:first-child .person strong { max-width:185px; }
  td:last-child:empty { display:none; }
  .kanban { margin-inline:-14px; padding:0 14px 10px; }
  .ats-summary { overflow:auto; white-space:nowrap; padding-bottom:3px; }
  .settings-grid { grid-template-columns:1fr; }
  .module-empty { min-height:430px; padding:25px; }
  dialog { width:calc(100vw - 18px); max-height:calc(100dvh - 18px); border-radius:20px; }
  dialog form { padding:18px; }
  .modal-fields { grid-template-columns:1fr; gap:12px; }
  .field.full { grid-column:auto; }
  .modal-actions { position:sticky; bottom:-18px; margin-inline:-18px; padding:13px 18px 18px; background:#fff; }
  .toast { left:14px; right:14px; bottom:14px; max-width:none; }
  .login-overlay { padding:12px; }
  .login-card { min-height:calc(100dvh - 24px); padding:34px 24px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior:auto!important; animation-duration:.001ms!important; animation-iteration-count:1!important; transition-duration:.001ms!important; }
}

@media (max-width:680px){.table-card td[colspan]{display:block!important;text-align:center}.table-card td[colspan]::before{display:none!important}}

/* Nakna SaaS auth — Google-first */
.hidden { display: none !important; }
.google-btn {
  min-height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 11px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-button);
  background: #fff;
  color: var(--primary-dark);
  font-weight: 600;
  transition: border-color .15s ease, background .15s ease, transform .15s ease;
}
.google-btn:hover { background: #F8FAF8; border-color: #C9D6D1; }
.google-btn:active { transform: translateY(1px); }
.google-mark {
  width: 27px;
  height: 27px;
  display: grid;
  place-items: center;
  border: 1px solid var(--border);
  border-radius: 50%;
  background: #fff;
  color: #4285F4;
  font: 700 15px/1 var(--font-en);
}
.login-divider { display:flex; align-items:center; gap:12px; margin:20px 0 16px; color:var(--text-tertiary); font-size:10.5px; }
.login-divider::before, .login-divider::after { content:""; height:1px; flex:1; background:var(--border); }
.login-divider span { white-space:nowrap; }
.login-points { display:grid; gap:8px; color:var(--text-secondary); font-size:11px; }
.login-points span { display:flex; align-items:flex-start; gap:7px; }
.login-points i { width:17px; height:17px; display:grid; place-items:center; flex:0 0 auto; border-radius:50%; background:var(--success-bg); color:var(--success); font:600 10px/1 var(--font-en); font-style:normal; }

.onboarding-overlay {
  position: fixed;
  inset: 0;
  z-index: 210;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(238, 243, 240, .96);
  backdrop-filter: blur(12px);
}
.onboarding-card {
  width: min(520px, 100%);
  padding: 36px;
  border: 1px solid var(--border);
  border-radius: 26px;
  background: #fff;
  box-shadow: var(--shadow-float);
}
.onboarding-brand { margin-bottom: 30px; }
.onboarding-card h2 { margin:8px 0 5px; color:var(--primary-dark); font-size:27px; line-height:1.25; }
.onboarding-card > .muted { margin:0 0 24px; }
.onboarding-separator { display:flex; align-items:center; gap:12px; margin:18px 0; color:var(--text-tertiary); font-size:10px; }
.onboarding-separator::before, .onboarding-separator::after { content:""; height:1px; flex:1; background:var(--border); }
.claim-company-card {
  width:100%;
  display:grid;
  grid-template-columns:42px minmax(0,1fr) auto;
  gap:12px;
  align-items:center;
  padding:14px;
  border:1px solid rgba(22,125,127,.2);
  border-radius:15px;
  background:var(--primary-soft);
  color:var(--text);
  text-align:left;
}
.claim-company-card:hover { border-color:rgba(22,125,127,.38); background:#DFF0ED; }
.claim-icon { width:42px; height:42px; display:grid; place-items:center; border-radius:12px; background:#fff; color:var(--primary); font:600 18px/1 var(--font-en); }
.claim-company-card strong { display:block; color:var(--primary-dark); font-size:12px; }
.claim-company-card small { display:block; margin-top:2px; color:var(--text-secondary); font-size:10px; }
.claim-company-card b { color:var(--primary); font-size:11px; font-weight:600; }
.onboarding-note { margin:12px 0 8px; color:var(--text-tertiary); font-size:10px; text-align:center; }
.text-btn { border:0; padding:7px 9px; background:transparent; color:var(--primary); font-size:11px; font-weight:500; }
.text-btn:hover { text-decoration:underline; }
.onboarding-card > .text-btn { display:block; margin:2px auto 0; color:var(--text-tertiary); }

.company-switcher-wrap { position:relative; margin:0 3px 18px; }
.company-switcher-wrap .company-switcher { width:100%; margin:0; color:var(--text); text-align:left; cursor:pointer; }
.company-switcher:hover { border-color:var(--border-strong); background:#EDF4F1; }
.company-menu {
  position:absolute;
  z-index:80;
  top:calc(100% + 7px);
  left:0;
  right:0;
  overflow:hidden;
  padding:6px;
  border:1px solid var(--border);
  border-radius:14px;
  background:#fff;
  box-shadow:0 14px 36px rgba(18,60,74,.12);
}
.company-menu-item {
  width:100%;
  display:grid;
  grid-template-columns:32px minmax(0,1fr) 18px;
  gap:9px;
  align-items:center;
  border:0;
  border-radius:10px;
  padding:8px;
  background:transparent;
  color:var(--text);
  text-align:left;
}
.company-menu-item:hover, .company-menu-item.active { background:var(--primary-soft); }
.company-menu-avatar { width:32px; height:32px; display:grid; place-items:center; border:1px solid var(--border); border-radius:9px; background:#fff; color:var(--primary); font:600 12px/1 var(--font-en); }
.company-menu-item strong { display:block; overflow:hidden; color:var(--primary-dark); font-size:10.5px; text-overflow:ellipsis; white-space:nowrap; }
.company-menu-item small { display:block; margin-top:1px; color:var(--text-tertiary); font-size:8.5px; }
.company-menu-item b { color:var(--primary); font-size:11px; }
.profile-chip > span.has-photo { background-size:cover; background-position:center; color:transparent; }

.integration-section { margin-top:28px; padding-top:26px; border-top:1px solid var(--border); }
.page-intro.compact { margin-bottom:14px; }
.page-intro.compact h2 { margin:5px 0 2px; color:var(--primary-dark); font-size:18px; }
.integration-card {
  display:grid;
  grid-template-columns:46px minmax(0,1fr) auto auto;
  gap:13px;
  align-items:center;
  padding:16px;
  border:1px solid var(--border);
  border-radius:16px;
  background:#fff;
}
.integration-logo { width:46px; height:46px; display:grid; place-items:center; border-radius:13px; font:700 17px/1 var(--font-en); }
.google-mail-logo { background:#F8F9FA; border:1px solid var(--border); color:#EA4335; }
.integration-copy strong { color:var(--primary-dark); font-size:12px; font-weight:600; }
.integration-copy p { margin:2px 0 0; color:var(--text-tertiary); font-size:9.5px; }
.danger-text { color:var(--danger); }

@media (max-width: 720px) {
  .onboarding-overlay { padding:12px; }
  .onboarding-card { min-height:calc(100dvh - 24px); display:flex; flex-direction:column; justify-content:center; padding:30px 24px; border-radius:22px; }
  .integration-card { grid-template-columns:42px minmax(0,1fr) auto; }
  .integration-card .secondary-btn, .integration-card .text-btn { grid-column:1 / -1; width:100%; }
}

/* Nakna V0.4 — Invite-first onboarding + Work Location */
.page-actions{display:flex;align-items:center;gap:8px}.page-actions .secondary-btn,.page-actions .primary-btn{display:inline-flex;align-items:center;gap:7px}.page-actions svg{width:16px;height:16px}.people-overview{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));overflow:hidden;margin:0 0 16px;border:1px solid var(--border);border-radius:17px;background:#fff}.people-overview>div{position:relative;padding:15px 18px}.people-overview>div+div::before{content:"";position:absolute;left:0;top:12px;bottom:12px;width:1px;background:var(--border)}.people-overview span{display:block;color:var(--text-tertiary);font-size:9.5px}.people-overview strong{display:block;margin-top:4px;color:var(--primary-dark);font:700 23px/1.1 var(--font-en)}.invite-center{margin-bottom:16px}.invite-list{display:grid}.invite-row{display:grid;grid-template-columns:minmax(0,1fr) 82px auto auto;gap:14px;align-items:center;padding:11px 2px;border-bottom:1px solid #EEF2F0}.invite-row:last-child{border-bottom:0}.invite-main{display:flex;align-items:center;gap:10px;min-width:0}.invite-icon{width:34px;height:34px;display:grid;place-items:center;flex:0 0 auto;border-radius:10px;background:var(--primary-soft);color:var(--primary);font:600 16px/1 var(--font-en)}.invite-main strong{display:block;overflow:hidden;color:var(--text);font-size:11px;font-weight:600;text-overflow:ellipsis;white-space:nowrap}.invite-main small{display:block;overflow:hidden;margin-top:2px;color:var(--text-tertiary);font-size:9px;text-overflow:ellipsis;white-space:nowrap}.invite-usage{text-align:right}.invite-usage strong{display:block;color:var(--primary-dark);font:700 15px/1 var(--font-en)}.invite-usage small{display:block;margin-top:2px;color:var(--text-tertiary);font-size:8.5px}.invite-actions{display:flex;align-items:center;gap:3px}.line-connected{display:grid;gap:3px;justify-items:start}.line-connected small{max-width:130px;overflow:hidden;color:var(--text-tertiary);font-size:8.5px;text-overflow:ellipsis;white-space:nowrap}.location-inline{display:inline-block;max-width:190px;overflow:hidden;color:var(--text-secondary);font-size:9.5px;text-overflow:ellipsis;white-space:nowrap}.avatar-photo{background-size:cover!important;background-position:center!important;color:transparent!important}.attendance-location{display:grid;gap:1px;max-width:220px}.attendance-location strong{color:var(--text);font-size:10px;font-weight:600}.attendance-location small{color:var(--text-tertiary);font-size:8.5px}.attendance-location a{width:max-content;color:var(--primary);font-size:8.5px;text-decoration:none}.attendance-location a:hover{text-decoration:underline}.work-location-section{margin-top:28px;padding-top:26px;border-top:1px solid var(--border)}.work-location-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.work-location-card{display:grid;grid-template-columns:42px minmax(0,1fr) auto;gap:11px;align-items:center;padding:14px;border:1px solid var(--border);border-radius:15px;background:#fff}.work-location-card.inactive{opacity:.62}.work-location-pin{width:42px;height:42px;display:grid;place-items:center;border-radius:12px;background:var(--primary-soft);color:var(--primary);font:600 20px/1 var(--font-en)}.work-location-copy{min-width:0}.work-location-title{display:flex;align-items:center;gap:7px;min-width:0}.work-location-title strong{display:block;min-width:0;overflow:hidden;color:var(--primary-dark);font-size:11px;font-weight:600;text-overflow:ellipsis;white-space:nowrap}.work-location-title .badge{flex:0 0 auto}.work-location-card p{margin:2px 0;color:var(--text-secondary);font-size:9px;line-height:1.4}.work-location-card small{color:var(--text-tertiary);font-size:8.5px}.work-location-actions{display:flex;align-items:center;gap:4px}.work-location-actions .text-btn{padding:7px 8px;border-radius:9px}.work-location-actions .danger-text{color:#b84f4d}.work-location-actions .danger-text:hover{background:#fff4f2}.location-check-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.location-check{display:grid;grid-template-columns:18px minmax(0,1fr);gap:9px;align-items:start;padding:10px;border:1px solid var(--border);border-radius:11px;background:#FBFCFB;cursor:pointer}.location-check:has(input:checked){border-color:#A8D5CD;background:var(--primary-soft)}.location-check input{width:16px;height:16px;margin:2px 0 0;accent-color:var(--primary)}.location-check strong{display:block;color:var(--text);font-size:10px;font-weight:600}.location-check small{display:block;margin-top:2px;color:var(--text-tertiary);font-size:8px}.location-empty-inline{padding:12px;border:1px dashed var(--border-strong);border-radius:11px;background:#FAFCFB}.location-empty-inline strong{display:block;color:var(--primary-dark);font-size:10px}.location-empty-inline span{display:block;margin-top:2px;color:var(--text-tertiary);font-size:8.5px}.input-suffix{display:flex;align-items:center;border:1px solid var(--border);border-radius:var(--radius-input);background:#fff}.input-suffix:focus-within{outline:3px solid rgba(22,125,127,.12);border-color:#9CCFC6}.input-suffix input{border:0;outline:0!important;box-shadow:none!important}.input-suffix span{padding:0 11px;color:var(--text-tertiary);font-size:9px}.invite-modal{width:min(660px,calc(100vw - 30px))}
@media(max-width:900px){.people-overview{grid-template-columns:repeat(2,1fr)}.people-overview>div:nth-child(3),.people-overview>div:nth-child(4){border-top:1px solid var(--border)}.people-overview>div:nth-child(3)::before{display:none}.invite-row{grid-template-columns:minmax(0,1fr) auto}.invite-usage{display:none}.invite-actions{grid-column:1/-1;justify-content:flex-end}.work-location-list{grid-template-columns:1fr}}
@media(max-width:720px){.page-actions{gap:6px}.page-actions .secondary-btn,.page-actions .primary-btn{min-width:40px;padding-inline:10px;font-size:0}.page-actions svg{width:18px;height:18px}.people-overview{margin-bottom:12px}.people-overview>div{padding:12px 13px}.people-overview strong{font-size:20px}.invite-center{padding:15px}.invite-row{grid-template-columns:minmax(0,1fr) auto;gap:8px}.invite-row>.badge{align-self:start}.location-check-grid{grid-template-columns:1fr}.attendance-location{align-items:end;text-align:right}.work-location-section .page-intro.compact{display:flex}.work-location-section .page-intro.compact .primary-btn{font-size:0;min-width:40px;padding-inline:10px}}

/* Nakna HR V0.5 — Leave Control */
.leave-layout{display:grid;grid-template-columns:minmax(0,1.65fr) minmax(300px,.75fr);gap:16px;align-items:start}.leave-queue-panel,.leave-calendar-panel{min-width:0}.table-card.embedded{border:0;border-radius:0;box-shadow:none;margin:0 -2px -2px}.table-primary{display:block;color:var(--primary-dark);font-size:10.5px;font-weight:600}.table-secondary{display:block;margin-top:3px;color:var(--text-tertiary);font-size:8.7px}.approver-inline{display:grid;gap:2px}.approver-inline strong{color:var(--text);font-size:10px;font-weight:600}.approver-inline small{color:var(--text-tertiary);font-size:8.4px}.muted-btn{color:var(--text-tertiary)!important}.leave-calendar{display:grid;gap:3px}.leave-day{display:grid;grid-template-columns:54px minmax(0,1fr);gap:10px;align-items:start;padding:9px 4px;border-bottom:1px solid #EEF2F0}.leave-day:last-child{border-bottom:0}.leave-day.has-leave{background:linear-gradient(90deg,rgba(143,214,200,.12),transparent);border-radius:10px}.leave-day-date{display:grid}.leave-day-date strong{color:var(--primary-dark);font:700 16px/1 var(--font-en)}.leave-day-date span{margin-top:3px;color:var(--text-tertiary);font-size:8.4px}.leave-day-people{display:grid;gap:3px}.leave-day-people span{width:max-content;max-width:100%;padding:4px 7px;border-radius:8px;background:var(--primary-soft);color:var(--primary-dark);font-size:8.6px;font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.leave-day-people small{color:var(--text-tertiary);font-size:8.5px}.leave-policy-section{margin-top:28px;padding-top:26px;border-top:1px solid var(--border)}.leave-policy-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.leave-policy-card{display:grid;grid-template-columns:42px minmax(0,1fr) auto auto;gap:11px;align-items:center;padding:14px;border:1px solid var(--border);border-radius:15px;background:#fff}.leave-policy-card.inactive{opacity:.58}.leave-policy-icon{width:42px;height:42px;display:grid;place-items:center;border-radius:12px;background:var(--primary-soft);color:var(--primary);font:700 18px/1 var(--font-en)}.leave-policy-copy{min-width:0}.leave-policy-copy strong{display:block;color:var(--primary-dark);font-size:11px;font-weight:600}.leave-policy-copy p{margin:3px 0 0;color:var(--text-secondary);font-size:8.8px;line-height:1.45}.settings-hint{margin:10px 2px 0;color:var(--text-tertiary);font-size:8.7px;line-height:1.5}.leave-profile-modal{width:min(760px,calc(100vw - 28px))}.leave-profile-head{display:grid;grid-template-columns:150px minmax(0,1fr);gap:10px;margin-bottom:14px}.entitlement-list{display:grid;gap:7px;max-height:55vh;overflow:auto;padding-right:3px}.entitlement-row{display:grid;grid-template-columns:minmax(150px,1.5fr) 105px 105px 105px;gap:10px;align-items:end;padding:12px;border:1px solid var(--border);border-radius:13px;background:#FBFCFB}.entitlement-name strong{display:block;color:var(--primary-dark);font-size:10.5px;font-weight:600}.entitlement-name small{display:block;margin-top:3px;color:var(--text-tertiary);font-size:8.3px}.entitlement-input label,.entitlement-balance span{display:block;margin-bottom:4px;color:var(--text-tertiary);font-size:8px;font-weight:500}.entitlement-input input{width:100%;height:36px;padding:0 9px;border:1px solid var(--border);border-radius:9px;background:#fff;font:500 10px/1 var(--font-en);color:var(--text)}.entitlement-input input:disabled{background:#F2F5F3;color:var(--text-tertiary)}.entitlement-balance{padding:0 5px 7px}.entitlement-balance strong{display:block;color:var(--primary);font:700 13px/1 var(--font-en)}.option-stack{align-content:center;gap:7px!important}.toggle-line{display:flex!important;align-items:center;gap:8px;margin:0!important;padding:3px 0;color:var(--text-secondary)!important;font-size:9px!important;cursor:pointer}.toggle-line input{width:16px;height:16px;accent-color:var(--primary)}textarea{width:100%;padding:10px 11px;border:1px solid var(--border);border-radius:var(--radius-input);background:#fff;color:var(--text);font:400 10px/1.55 var(--font-th);resize:vertical;outline:0}textarea:focus{border-color:#9CCFC6;box-shadow:0 0 0 3px rgba(22,125,127,.12)}.leave-detail{display:grid;gap:10px}.detail-block,.detail-grid>div{padding:12px;border:1px solid var(--border);border-radius:12px;background:#FBFCFB}.detail-block>span,.detail-grid span{display:block;margin-bottom:4px;color:var(--text-tertiary);font-size:8.4px}.detail-block>strong,.detail-grid strong{color:var(--text);font-size:10.5px;font-weight:600}.detail-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}.evidence-links{display:flex;flex-wrap:wrap;gap:7px}.evidence-links .secondary-btn{height:34px;font-size:8.8px;text-decoration:none}.badge-coral{background:#FFF1EC;color:#C65D3E;border-color:#FFD9CC}
@media(max-width:1050px){.leave-layout{grid-template-columns:1fr}.leave-calendar-panel{order:2}.leave-policy-list{grid-template-columns:1fr}}
@media(max-width:720px){.leave-profile-head{grid-template-columns:1fr}.entitlement-row{grid-template-columns:1fr 1fr}.entitlement-name{grid-column:1/-1}.entitlement-balance{padding:4px 0}.leave-policy-card{grid-template-columns:38px minmax(0,1fr) auto}.leave-policy-card>.text-btn{grid-column:2/-1;justify-self:start}.leave-day{grid-template-columns:46px minmax(0,1fr)}.leave-layout .panel{padding:14px}.leave-queue-panel .table-card.embedded{margin:0}.detail-grid{grid-template-columns:1fr}}
.evidence-upload{display:flex;gap:8px;align-items:center;margin-top:10px;padding-top:10px;border-top:1px dashed var(--border)}.evidence-upload input{min-width:0;flex:1;color:var(--text-secondary);font-size:8.7px}.evidence-upload .secondary-btn{flex:0 0 auto}
@media(max-width:600px){.evidence-upload{align-items:stretch;flex-direction:column}}

/* Nakna V0.6 — Company LINE Official Account integration */
.setting-card-action{cursor:pointer;transition:border-color .15s ease,background .15s ease,transform .15s ease}.setting-card-action:hover{border-color:#BFD8D1;background:#FBFDFC;transform:translateY(-1px)}.company-line-section{margin-top:28px;padding-top:26px;border-top:1px solid var(--border)}.company-line-card{grid-template-columns:52px minmax(0,1fr) auto auto auto auto}.line-business-logo{width:52px;height:52px;border-radius:15px;background:#06C755;color:#fff;font:700 10px/1 var(--font-en);letter-spacing:.03em}.integration-meta{display:flex;flex-wrap:wrap;gap:6px 12px;margin-top:7px;color:var(--text-tertiary);font-size:8.5px}.integration-meta span{display:inline-flex;align-items:center;gap:4px}.integration-meta b{color:var(--text-secondary);font-weight:500}.inline-copy-btn{padding:0;border:0;background:transparent;color:var(--primary);font:600 8.5px/1 var(--font-th);cursor:pointer}.inline-copy-btn:hover{text-decoration:underline}.line-integration-modal{width:min(700px,calc(100vw - 28px))}.line-connect-note{display:grid;gap:3px;margin:18px 0 -2px;padding:12px 13px;border:1px solid #D6E9E3;border-radius:12px;background:var(--primary-soft)}.line-connect-note strong{color:var(--primary-dark);font-size:10px;font-weight:600}.line-connect-note span{color:var(--text-secondary);font-size:9px;line-height:1.5}.copy-field{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:7px}.copy-field input{min-width:0;background:#F7F9F8;color:var(--text-secondary)}.copy-field .secondary-btn{height:40px;white-space:nowrap}.field label small{color:var(--text-tertiary);font-size:8px;font-weight:400}.company-line-card .badge{justify-self:end}
@media(max-width:980px){.company-line-card{grid-template-columns:46px minmax(0,1fr) auto}.company-line-card>.secondary-btn,.company-line-card>.text-btn{grid-row:2}.company-line-card>#lineConfigureBtn{grid-column:2}.company-line-card>#lineTestBtn,.company-line-card>#lineDisconnectBtn{grid-column:3}}
@media(max-width:720px){.company-line-card{grid-template-columns:42px minmax(0,1fr) auto}.line-business-logo{width:42px;height:42px;border-radius:12px;font-size:8px}.company-line-card>#lineConfigureBtn,.company-line-card>#lineTestBtn,.company-line-card>#lineDisconnectBtn{grid-column:1/-1;grid-row:auto;width:100%}.copy-field{grid-template-columns:1fr}.copy-field .secondary-btn{width:100%}}


/* V0.6.1 — Approver Access */
.approver-access-section{margin-top:28px;padding-top:28px;border-top:1px solid var(--border,#E4EAE7)}
.section-action-group{display:flex;align-items:center;gap:10px}
.approver-role-guide{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:16px 0 14px}
.approver-role-guide>div{background:#F8FAF8;border:1px solid #E4EAE7;border-radius:16px;padding:15px 16px;display:flex;flex-direction:column;gap:4px}
.approver-role-guide strong{color:#123C4A;font-size:14px}.approver-role-guide span{color:#687678;font-size:12px;line-height:1.45}
.approver-access-list{background:#fff;border:1px solid #E4EAE7;border-radius:18px;overflow:hidden}
.approver-access-row{display:grid;grid-template-columns:minmax(240px,1fr) minmax(280px,1.25fr) auto;gap:18px;align-items:center;padding:16px 18px;border-bottom:1px solid #EEF2F0}
.approver-access-row:last-child{border-bottom:0}.permission-chip-list{display:flex;gap:7px;flex-wrap:wrap}.permission-chip{display:inline-flex;align-items:center;border-radius:999px;background:#EAF6F3;color:#167D7F;padding:6px 9px;font-size:11px;font-weight:600}
.permission-option-list{display:grid;gap:10px;margin-top:8px}.permission-option{display:flex;gap:12px;align-items:flex-start;border:1px solid #E4EAE7;border-radius:14px;padding:13px 14px;background:#fff;cursor:pointer}.permission-option:has(input:checked){border-color:#8FD6C8;background:#F1FAF7}.permission-option input{margin-top:3px;accent-color:#167D7F;width:17px;height:17px}.permission-option span{display:flex;flex-direction:column;gap:3px}.permission-option strong{color:#123C4A;font-size:13px}.permission-option small{color:#728082;font-size:11px;line-height:1.4}.field-label{font-size:12px;font-weight:500;color:#445355}.single-column{grid-template-columns:1fr!important}
@media(max-width:800px){.approver-role-guide{grid-template-columns:1fr}.approver-access-row{grid-template-columns:1fr;gap:10px}.section-action-group{width:100%;justify-content:space-between}.approver-access-section .page-intro.compact{align-items:flex-start;flex-direction:column}}

/* Nakna V0.6.3 — Workspace setup status + Google Workspace */
.setup-overview-section,.google-workspace-section{margin-top:28px;padding-top:26px;border-top:1px solid var(--border)}
.setup-progress{height:10px;margin:14px 0 16px;border:1px solid var(--border);border-radius:999px;background:#F4F8F6;overflow:hidden}.setup-progress-bar{height:100%;width:0;background:var(--primary);transition:width .2s ease}
.setup-status-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.status-card{display:grid;gap:10px;padding:16px;border:1px solid var(--border);border-radius:16px;background:#fff}.status-card-head{display:flex;align-items:center;justify-content:space-between;gap:10px}.status-icon{width:42px;height:42px;display:grid;place-items:center;border-radius:12px;background:var(--primary-soft);color:var(--primary-dark);font:700 18px/1 var(--font-en)}.line-status-icon{background:#EFFFF5;color:#06C755;font-size:9px;letter-spacing:.03em}.google-status-icon{background:#F8F9FA;border:1px solid var(--border);color:#4285F4;font-size:16px}.status-card strong{color:var(--primary-dark);font-size:12px;font-weight:600}.status-card p{min-height:44px;margin:0;color:var(--text-secondary);font-size:9px;line-height:1.6}.setting-card.disabled{pointer-events:none;opacity:.65}.company-profile-modal{width:min(660px,calc(100vw - 28px))}
.workspace-google-card{grid-template-columns:52px minmax(0,1fr) auto auto auto auto auto}.google-workspace-logo{width:52px;height:52px;border-radius:15px;background:#F8F9FA;border:1px solid var(--border);color:#4285F4}.service-pill-row{display:flex;flex-wrap:wrap;gap:5px;margin-top:7px}.service-pill{padding:4px 7px;border:1px solid #DDE8E4;border-radius:999px;background:#F8FAF8;color:var(--primary-dark);font-size:8px;font-weight:500}.integration-error{color:var(--danger)!important}.workspace-google-card a.secondary-btn{text-decoration:none;white-space:nowrap}
@media(max-width:1120px){.workspace-google-card{grid-template-columns:46px minmax(0,1fr) auto}.workspace-google-card>.secondary-btn,.workspace-google-card>.text-btn{grid-row:auto}.workspace-google-card>#googleWorkspaceConnectBtn,.workspace-google-card>#googleWorkspaceSyncBtn,.workspace-google-card>#googleWorkspaceDriveBtn,.workspace-google-card>#googleWorkspaceSheetBtn,.workspace-google-card>#googleWorkspaceDisconnectBtn{grid-column:2/-1;justify-self:start}}
@media(max-width:980px){.setup-status-grid{grid-template-columns:1fr}}
@media(max-width:720px){.workspace-google-card{grid-template-columns:42px minmax(0,1fr) auto}.workspace-google-card>#googleWorkspaceConnectBtn,.workspace-google-card>#googleWorkspaceSyncBtn,.workspace-google-card>#googleWorkspaceDriveBtn,.workspace-google-card>#googleWorkspaceSheetBtn,.workspace-google-card>#googleWorkspaceDisconnectBtn{grid-column:1/-1;width:100%;justify-content:center}}

/* Nakna HR V1.0-P1 — Foundation + People Core */
.people-core-section{margin-top:28px;padding-top:26px;border-top:1px solid var(--border)}
.organization-chart{display:grid;gap:12px}.org-view-shell{display:grid;gap:12px}.org-view-toolbar{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}.org-view-switch{display:inline-flex;padding:4px;border:1px solid var(--border);border-radius:16px;background:#fff;box-shadow:0 6px 18px rgba(18,60,74,.04)}.org-view-btn{min-width:110px;padding:10px 18px;border:0;border-radius:12px;background:transparent;color:var(--text-secondary);font-weight:600;cursor:pointer}.org-view-btn.active{background:linear-gradient(135deg,var(--primary),#1A9892);color:#fff;box-shadow:0 10px 20px rgba(22,125,127,.18)}.org-view-summary{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.org-view-summary strong{color:var(--primary-dark);font-size:12px}.org-view-summary span{color:var(--text-tertiary);font-size:10px}.org-view-note{padding:11px 14px;border:1px dashed #CFE2DB;border-radius:14px;background:#F8FCFA;color:var(--text-secondary);font-size:9px;line-height:1.6}.organization-list-stack{display:grid;gap:10px}.org-node{position:relative;padding-left:calc(var(--depth) * 24px)}.org-card{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 16px;border:1px solid var(--border);border-radius:16px;background:#fff}.org-card-modern{box-shadow:0 10px 28px rgba(18,60,74,.04)}.org-card-copy{min-width:0}.org-card strong{display:block;color:var(--primary-dark);font-size:11px;font-weight:600}.org-card small{display:block;margin-top:3px;color:var(--text-tertiary);font-size:8.7px}.org-card-copy em{display:block;margin-top:4px;font-style:normal;color:var(--text-secondary);font-size:8.4px;line-height:1.5}.org-card-actions{display:flex;align-items:center;justify-content:flex-end;gap:8px;flex-wrap:wrap}.org-node[style*="--depth:1"] .org-card,.org-node[style*="--depth:2"] .org-card,.org-node[style*="--depth:3"] .org-card{background:#FBFDFC}.org-line{position:absolute;left:calc((var(--depth) * 24px) - 10px);top:-8px;bottom:0;width:1px;background:var(--border)}.org-chart-stage{overflow:auto;padding:10px 10px 18px;border:1px solid var(--border);border-radius:24px;background:linear-gradient(180deg,#FFFFFF 0%,#FBFDFC 100%)}.org-tree-root,.org-tree-root ul{display:flex;justify-content:center;align-items:flex-start;width:max-content;min-width:100%;padding-top:24px;position:relative}.org-tree-root>li{padding-top:0}.org-tree-root li{list-style:none;text-align:center;position:relative;padding:24px 10px 0}.org-tree-root>li::before,.org-tree-root>li::after{display:none}.org-tree-root li::before,.org-tree-root li::after{content:'';position:absolute;top:0;right:50%;width:50%;height:24px;border-top:1px solid #C9D7D1}.org-tree-root li::after{right:auto;left:50%;border-left:1px solid #C9D7D1}.org-tree-root li:only-child::before,.org-tree-root li:only-child::after{display:none}.org-tree-root li:only-child{padding-top:0}.org-tree-root li:first-child::before,.org-tree-root li:last-child::after{border:0}.org-tree-root li:last-child::before{border-right:1px solid #C9D7D1;border-radius:0 12px 0 0}.org-tree-root li:first-child::after{border-radius:12px 0 0 0}.org-tree-root ul::before{content:'';position:absolute;top:0;left:50%;width:0;height:24px;border-left:1px solid #C9D7D1}.org-visual-card{width:240px;display:grid;gap:10px;padding:14px;border:1px solid var(--border);border-radius:18px;background:#fff;box-shadow:0 14px 32px rgba(18,60,74,.07)}.org-visual-head{display:flex;align-items:flex-start;justify-content:space-between;gap:8px;text-align:left}.org-visual-head strong{color:var(--primary-dark);font-size:11px;line-height:1.4}.org-visual-meta{display:grid;gap:3px;text-align:left}.org-visual-meta span{color:var(--text-tertiary);font-size:8.2px;line-height:1.4}.org-person-strip{display:flex;align-items:center;justify-content:flex-start;flex-wrap:wrap;gap:6px}.org-person-strip.empty{justify-content:flex-start}.org-person-chip{width:34px;height:34px;display:grid;place-items:center;border-radius:999px;background:var(--primary-soft);color:var(--primary-dark);font:700 11px/1 var(--font-en)}.org-person-chip.more{width:auto;min-width:34px;padding:0 10px;border-radius:999px;background:#EDF6F3;color:var(--primary);font-size:10px}.org-empty-note{color:var(--text-tertiary);font-size:8.2px}.org-visual-actions{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-start;padding-top:8px;border-top:1px dashed #E5EEEA}.org-visual-actions .text-btn,.org-card-actions .text-btn{font-size:8.4px;white-space:nowrap}.field-static{display:flex;align-items:center;min-height:44px;padding:11px 13px;border:1px solid var(--border);border-radius:14px;background:#F8FBFA;color:var(--primary-dark);font-weight:600}
.work-schedule-list{display:grid;gap:10px}.schedule-card{padding:14px 15px;border:1px solid var(--border);border-radius:15px;background:#fff}.schedule-card.default{background:#FBFDFC}.schedule-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px}.schedule-head>div{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.schedule-head strong{color:var(--primary-dark);font-size:11px}.schedule-head small{color:var(--text-tertiary);font-size:8.5px}.scope-chip{padding:4px 7px;border-radius:999px;background:var(--primary-soft);color:var(--primary);font-size:8px;font-weight:600}.week-strip{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:6px}.day-cell{display:grid;gap:3px;min-height:52px;padding:8px;border:1px solid var(--border);border-radius:10px;background:#F8FAF8;text-align:center}.day-cell.work{border-color:#CDE7DF;background:#F2FBF8}.day-cell.off{background:#F6F7F6}.day-cell b{color:var(--primary-dark);font-size:9px}.day-cell span{color:var(--text-tertiary);font-size:7.7px;line-height:1.25}
.weekday-picker{display:grid;grid-template-columns:repeat(7,1fr);gap:7px}.weekday-picker label{display:grid;place-items:center;gap:5px;padding:9px 4px;border:1px solid var(--border);border-radius:10px;background:#FBFCFB;color:var(--text-secondary);font-size:9px;cursor:pointer}.weekday-picker label:has(input:checked){border-color:#A8D5CD;background:var(--primary-soft);color:var(--primary-dark);font-weight:600}.weekday-picker input{accent-color:var(--primary)}
.holiday-compliance{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:12px;padding:12px 14px;border-radius:12px}.holiday-compliance.ok{border:1px solid #CBE7D7;background:#F1FAF5}.holiday-compliance.warn{border:1px solid #F0D9A9;background:#FFF9EC}.holiday-compliance strong{display:block;color:var(--primary-dark);font-size:10px}.holiday-compliance span{color:var(--text-secondary);font-size:8.6px}.holiday-list{display:grid}.holiday-row{display:grid;grid-template-columns:42px minmax(0,1fr) auto;gap:12px;align-items:center;padding:10px 4px;border-bottom:1px solid #EEF2F0}.holiday-row:last-child{border-bottom:0}.holiday-date{width:42px;height:42px;display:grid;place-items:center;align-content:center;border-radius:11px;background:var(--primary-soft)}.holiday-date strong{color:var(--primary-dark);font:700 14px/1 var(--font-en)}.holiday-date span{margin-top:2px;color:var(--text-tertiary);font-size:7.8px}.holiday-row>div:nth-child(2)>strong{display:block;color:var(--text);font-size:10px}.holiday-row>div:nth-child(2)>small{display:block;margin-top:2px;color:var(--text-tertiary);font-size:8.4px}
.attendance-policy-card{display:flex;align-items:center;justify-content:space-between;gap:16px;margin:0 0 12px;padding:13px 14px;border:1px solid var(--border);border-radius:13px;background:#FBFCFB}.attendance-policy-card strong{display:block;color:var(--primary-dark);font-size:10.5px}.attendance-policy-card p{margin:3px 0 0;color:var(--text-tertiary);font-size:8.6px;line-height:1.5}.attendance-policy-status{display:block;margin-top:7px;color:var(--text-tertiary);font-size:8px;font-weight:600}.attendance-policy-status.saving{color:var(--primary)}.attendance-policy-status.saved{color:var(--success)}.switch{position:relative;flex:0 0 auto;width:42px;height:24px}.switch input{position:absolute;opacity:0}.switch span{position:absolute;inset:0;border-radius:999px;background:#CDD6D2;cursor:pointer;transition:.2s}.switch span:after{content:"";position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.16);transition:.2s}.switch input:checked+span{background:var(--primary)}.switch input:checked+span:after{transform:translateX(18px)}
.people-status{display:inline-flex;width:max-content;margin-top:4px;padding:3px 6px;border-radius:999px;font-size:7.6px;font-weight:600}.people-status.ok{background:#ECF8F1;color:#2E9B68}.people-status.wait{background:#FFF7E8;color:#B97A12}.people-status.off{background:#F1F3F2;color:#73807B}.people-status.info{background:#EFF6FF;color:#3B82F6}
@media(max-width:900px){.week-strip{grid-template-columns:repeat(4,1fr)}.holiday-compliance{align-items:flex-start;flex-direction:column}.section-action-group{flex-wrap:wrap}}
@media(max-width:900px){.week-strip{grid-template-columns:repeat(4,1fr)}.holiday-compliance{align-items:flex-start;flex-direction:column}.section-action-group{flex-wrap:wrap}.org-view-toolbar{align-items:flex-start;flex-direction:column}.org-view-summary{width:100%;justify-content:space-between}.org-chart-stage{padding:8px}.org-tree-root,.org-tree-root ul{justify-content:flex-start}}
@media(max-width:600px){.week-strip{grid-template-columns:repeat(2,1fr)}.weekday-picker{grid-template-columns:repeat(4,1fr)}.org-node{padding-left:calc(var(--depth) * 12px)}.org-line{left:calc((var(--depth) * 12px) - 6px)}.org-view-btn{min-width:92px;padding:9px 14px}.org-visual-card{width:215px}.org-card{align-items:flex-start;flex-direction:column}.org-card-actions{justify-content:flex-start}}

/* Nakna HR V1.0-P2 — Employee Service */
.service-summary-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-bottom:16px}.service-summary-card{display:grid;grid-template-columns:48px minmax(0,1fr);gap:12px;align-items:start;padding:16px;border:1px solid var(--border);border-radius:16px;background:#fff}.service-summary-card>span{width:48px;height:48px;display:grid;place-items:center;border-radius:13px;background:var(--primary-soft);font-size:20px}.service-summary-card small{display:block;color:var(--text-tertiary);font-size:8.5px}.service-summary-card strong{display:block;margin:3px 0;color:var(--primary-dark);font:700 23px/1.1 var(--font-en)}.service-summary-card p{margin:0;color:var(--text-secondary);font-size:8.8px;line-height:1.45}.service-grid{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(340px,.8fr);gap:16px;align-items:start}.hr-case-list{display:grid;gap:7px}.hr-case-row{width:100%;display:grid;grid-template-columns:88px minmax(0,1fr) auto;gap:12px;align-items:center;padding:12px;border:1px solid var(--border);border-radius:13px;background:#fff;text-align:left;cursor:pointer}.hr-case-row:hover{border-color:#BCD8D1;background:#FBFDFC}.hr-case-id{display:grid;gap:6px;justify-items:start}.hr-case-id strong{color:var(--primary-dark);font:700 10px/1 var(--font-en)}.hr-case-copy{min-width:0}.hr-case-copy strong{display:block;color:var(--text);font-size:10.5px;font-weight:600}.hr-case-copy p{display:-webkit-box;overflow:hidden;margin:3px 0;color:var(--text-secondary);font-size:9px;line-height:1.45;-webkit-line-clamp:2;-webkit-box-orient:vertical}.hr-case-copy small{color:var(--text-tertiary);font-size:8.2px}.rich-menu-preview{display:grid;grid-template-columns:150px minmax(0,1fr);gap:12px;align-items:center;padding:12px;border:1px solid var(--border);border-radius:14px;background:#FBFCFB}.rich-menu-preview img{width:150px;border:1px solid var(--border);border-radius:10px}.rich-menu-preview strong{display:block;color:var(--primary-dark);font-size:11px}.rich-menu-preview p{margin:4px 0 0;color:var(--text-secondary);font-size:8.8px;line-height:1.5}.service-tool-actions{display:flex;gap:8px;align-items:center;margin-top:10px}.service-broadcast-head{margin-top:22px}.broadcast-list{display:grid;gap:7px}.broadcast-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;padding:11px;border-bottom:1px solid #EDF1EF}.broadcast-row:last-child{border-bottom:0}.broadcast-row strong{display:block;color:var(--primary-dark);font-size:10px}.broadcast-row p{margin:3px 0;color:var(--text-secondary);font-size:8.7px;line-height:1.45}.broadcast-row small{color:var(--text-tertiary);font-size:8px}.broadcast-stats{display:grid;justify-items:end;gap:4px}.legacy-request-panel{margin-top:16px}.leave-access-section{margin-top:28px;padding-top:26px;border-top:1px solid var(--border)}.policy-toggle-card{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px;border:1px solid var(--border);border-radius:15px;background:#fff}.policy-toggle-card strong{display:block;color:var(--primary-dark);font-size:11px}.policy-toggle-card p{margin:3px 0 0;color:var(--text-secondary);font-size:9px}.switch{position:relative;width:46px;height:26px;flex:0 0 auto}.switch input{position:absolute;opacity:0}.switch span{position:absolute;inset:0;border-radius:999px;background:#DCE4E0;cursor:pointer;transition:.2s}.switch span:after{content:"";position:absolute;width:20px;height:20px;left:3px;top:3px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.15);transition:.2s}.switch input:checked+span{background:var(--primary)}.switch input:checked+span:after{transform:translateX(20px)}.broadcast-modal,.hr-case-modal{width:min(760px,calc(100vw - 28px))}.hr-case-detail{display:grid;gap:9px;margin-bottom:14px}.private-case-banner{padding:10px 12px;border:1px solid #F4D2C6;border-radius:11px;background:var(--coral-soft,#FFF2EE);color:#9A4F38;font-size:9px;font-weight:600}.case-timeline{display:grid;gap:6px;padding:10px;border:1px solid var(--border);border-radius:12px;background:#FBFCFB}.case-timeline>div{display:grid;grid-template-columns:110px 120px minmax(0,1fr);gap:8px;align-items:start;padding:5px 0;border-bottom:1px solid #EDF1EF}.case-timeline>div:last-child{border-bottom:0}.case-timeline span,.case-timeline p{margin:0;color:var(--text-tertiary);font-size:8px}.case-timeline strong{color:var(--text);font-size:8.5px}.badge-danger{background:#FDECEC;color:#D9534F;border-color:#F5C9C6}
@media(max-width:1050px){.service-grid{grid-template-columns:1fr}.service-summary-grid{grid-template-columns:1fr}.rich-menu-preview{grid-template-columns:120px minmax(0,1fr)}.rich-menu-preview img{width:120px}}
@media(max-width:720px){.hr-case-row{grid-template-columns:1fr auto}.hr-case-id{grid-column:1/-1;display:flex;align-items:center}.rich-menu-preview{grid-template-columns:1fr}.rich-menu-preview img{width:100%;max-width:260px}.service-tool-actions{align-items:stretch;flex-direction:column}.service-tool-actions>*{width:100%}.broadcast-row{grid-template-columns:1fr}.broadcast-stats{justify-items:start}.case-timeline>div{grid-template-columns:1fr}}

/* Nakna HR V1.0-P3 — Payroll + Documents */
.payroll-summary{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px;margin-bottom:16px}.payroll-summary-card{padding:15px 16px;border:1px solid var(--border);border-radius:15px;background:#fff}.payroll-summary-card span{display:block;color:var(--text-tertiary);font-size:9px}.payroll-summary-card strong{display:block;margin-top:5px;color:var(--primary-dark);font:700 17px/1.2 var(--font-en)}.payroll-summary-card.success{background:#F5FBF7}.payroll-summary-card.warning{background:#FFFBF2}.payroll-layout{display:grid;grid-template-columns:minmax(280px,.72fr) minmax(0,1.8fr);gap:16px;align-items:start}.payroll-period-panel,.payroll-detail-panel{min-width:0}.payroll-period-list{display:grid;gap:7px}.payroll-period-row{width:100%;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;align-items:center;padding:12px;border:1px solid var(--border);border-radius:13px;background:#fff;text-align:left;cursor:pointer;transition:.15s}.payroll-period-row:hover,.payroll-period-row.active{border-color:#A8D5CD;background:var(--primary-soft)}.payroll-period-row strong{display:block;color:var(--primary-dark);font:700 12px/1.2 var(--font-en)}.payroll-period-row small{display:block;margin-top:3px;color:var(--text-tertiary);font-size:8.4px}.payroll-period-row>span:last-child{display:grid;justify-items:end;gap:4px}.payroll-period-row b{color:var(--text);font:700 10px/1 var(--font-en)}.payroll-period-row em{font-style:normal}.payroll-detail-empty{min-height:420px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;color:var(--text-tertiary)}.payroll-detail-empty h3{margin:10px 0 4px;color:var(--primary-dark)}.payroll-detail-empty p{max-width:430px;font-size:9.5px;line-height:1.6}.payroll-detail-head{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;margin-bottom:15px}.payroll-detail-head h2{margin:4px 0;color:var(--primary-dark);font-size:20px}.payroll-status-line{display:flex;align-items:center;gap:8px}.payroll-status-line small{color:var(--text-tertiary);font-size:8.5px}.payroll-detail-totals{display:grid;grid-template-columns:repeat(3,1fr);overflow:hidden;margin-bottom:14px;border:1px solid var(--border);border-radius:14px;background:#FBFCFB}.payroll-detail-totals>div{padding:13px 15px}.payroll-detail-totals>div+div{border-left:1px solid var(--border)}.payroll-detail-totals span{display:block;color:var(--text-tertiary);font-size:8.5px}.payroll-detail-totals strong{display:block;margin-top:4px;color:var(--primary-dark);font:700 16px/1.1 var(--font-en)}.payroll-detail-totals .net{background:var(--primary-soft)}.payroll-detail-totals .net strong{color:var(--primary)}.payroll-table-wrap{overflow:auto;border:1px solid var(--border);border-radius:13px}.payroll-table{width:100%;min-width:900px;border-collapse:collapse;background:#fff}.payroll-table th{padding:9px 10px;border-bottom:1px solid var(--border);background:#F8FAF8;color:var(--text-tertiary);font-size:8px;font-weight:500;text-align:right}.payroll-table th:first-child{text-align:left}.payroll-table td{padding:10px;border-bottom:1px solid #EEF2F0;color:var(--text);font-size:8.8px;text-align:right;vertical-align:middle}.payroll-table td:first-child{text-align:left}.payroll-table td strong{display:block;color:var(--primary-dark);font-size:9.5px}.payroll-table td small{display:block;margin-top:2px;color:var(--text-tertiary);font-size:7.7px}.payroll-table .net-cell strong{color:var(--primary);font:700 10.5px/1 var(--font-en)}.payroll-footnote{display:flex;justify-content:space-between;gap:12px;margin-top:10px;color:var(--text-tertiary);font-size:7.8px}.salary-setup-list{display:grid;gap:7px}.salary-setup-row{width:100%;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;padding:11px 12px;border:1px solid var(--border);border-radius:12px;background:#fff;text-align:left;cursor:pointer}.salary-setup-row:hover{background:var(--primary-soft);border-color:#BFD8D1}.salary-setup-row strong,.salary-setup-row small,.salary-setup-row b,.salary-setup-row em{display:block}.salary-setup-row strong{color:var(--primary-dark);font-size:9.5px}.salary-setup-row small,.salary-setup-row em{margin-top:2px;color:var(--text-tertiary);font-size:7.8px;font-style:normal}.salary-setup-row>span:last-child{text-align:right}.salary-setup-row b{color:var(--primary);font:700 10px/1 var(--font-en)}.embedded-head{margin-bottom:12px}.payroll-locked{padding:18px;border:1px dashed var(--border-strong);border-radius:14px;background:#FBFCFB;color:var(--text-secondary);font-size:9px}.legal-callout{display:grid;gap:3px;margin:12px 0;padding:12px 13px;border:1px solid #D6E9E3;border-radius:12px;background:var(--primary-soft)}.legal-callout strong{color:var(--primary-dark);font-size:9.5px}.legal-callout span{color:var(--text-secondary);font-size:8.5px;line-height:1.5}.document-summary{display:grid;grid-template-columns:repeat(4,1fr);margin-bottom:16px;border:1px solid var(--border);border-radius:15px;background:#fff;overflow:hidden}.document-summary>div{padding:14px 16px}.document-summary>div+div{border-left:1px solid var(--border)}.document-summary span{display:block;color:var(--text-tertiary);font-size:8.5px}.document-summary strong{display:block;margin-top:4px;color:var(--primary-dark);font:700 18px/1 var(--font-en)}.document-layout{display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:start}.document-list{display:grid;gap:7px}.document-row{display:grid;grid-template-columns:40px minmax(0,1fr) auto;gap:10px;align-items:center;padding:10px;border:1px solid var(--border);border-radius:12px;background:#fff}.document-file-icon{width:40px;height:40px;display:grid;place-items:center;border-radius:10px;background:#FFF2EE;color:#C75B3C;font:700 8px/1 var(--font-en)}.document-row strong{display:block;color:var(--primary-dark);font-size:9.5px}.document-row p{margin:2px 0;color:var(--text-secondary);font-size:8.3px}.document-row small{color:var(--text-tertiary);font-size:7.8px}.document-row .secondary-btn{height:32px;padding:0 10px;font-size:8px;text-decoration:none}.modal-fields .full{grid-column:1/-1}
@media(max-width:1100px){.payroll-summary{grid-template-columns:repeat(3,1fr)}.payroll-layout{grid-template-columns:1fr}.payroll-period-list{grid-template-columns:repeat(2,minmax(0,1fr))}.document-layout{grid-template-columns:1fr}}
@media(max-width:720px){.payroll-summary{grid-template-columns:repeat(2,1fr)}.payroll-summary-card:last-child{grid-column:1/-1}.payroll-period-list{grid-template-columns:1fr}.payroll-detail-head{display:grid}.payroll-detail-head .page-actions{justify-content:stretch;display:grid;grid-template-columns:1fr 1fr}.payroll-detail-head .page-actions button{font-size:8px}.payroll-detail-totals{grid-template-columns:1fr}.payroll-detail-totals>div+div{border-left:0;border-top:1px solid var(--border)}.document-summary{grid-template-columns:repeat(2,1fr)}.document-summary>div:nth-child(3){border-left:0;border-top:1px solid var(--border)}.document-summary>div:nth-child(4){border-top:1px solid var(--border)}.document-row{grid-template-columns:36px minmax(0,1fr)}.document-row .secondary-btn{grid-column:1/-1;width:100%}.payroll-footnote{display:grid}}
.service-pill-warning{background:#FFF7E8!important;color:#B7791F!important;border-color:#F2D79A!important}

/* Nakna V1.0-P4 — Learning & Performance */
.performance-summary{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));overflow:hidden;margin-bottom:16px;border:1px solid var(--border);border-radius:18px;background:#fff}.performance-summary>div{padding:15px 16px}.performance-summary>div+div{border-left:1px solid var(--border)}.performance-summary span{display:block;color:var(--text-tertiary);font-size:9px}.performance-summary strong{display:block;margin-top:4px;color:var(--primary-dark);font:700 24px/1 var(--font-en)}.performance-summary small{display:block;margin-top:4px;color:var(--text-tertiary);font-size:8px}.growth-grid{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.95fr);gap:16px;align-items:start}.growth-one-panel,.growth-probation-panel{min-height:280px}.learning-course-list,.kpi-goal-list,.one-on-one-list,.probation-review-list{display:grid;gap:10px}.learning-course-card{padding:14px;border:1px solid var(--border);border-radius:15px;background:#fff}.course-top{display:grid;grid-template-columns:42px minmax(0,1fr);gap:11px}.course-icon{width:42px;height:42px;display:grid;place-items:center;border-radius:12px;background:var(--primary-soft);color:var(--primary);font:700 17px/1 var(--font-en)}.course-title-line{display:flex;align-items:center;justify-content:space-between;gap:8px}.course-copy strong{color:var(--primary-dark);font-size:11.5px}.course-copy p{margin:3px 0;color:var(--text-secondary);font-size:9px;line-height:1.5}.course-copy small{color:var(--text-tertiary);font-size:8.2px}.course-progress{display:grid;grid-template-columns:auto minmax(100px,1fr);gap:10px;align-items:center;margin-top:11px}.course-progress span{color:var(--text-secondary);font-size:8.5px}.course-progress>div,.kpi-progress{height:6px;overflow:hidden;border-radius:999px;background:#EDF3F0}.course-progress i,.kpi-progress i{display:block;height:100%;border-radius:999px;background:var(--primary)}.course-module-strip{display:flex;flex-wrap:wrap;gap:5px;margin-top:10px}.course-module-strip span{max-width:100%;padding:5px 7px;border-radius:8px;background:#F6F8F7;color:var(--text-secondary);font-size:8px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.course-module-strip .empty-module{color:var(--text-tertiary)}.course-actions{display:flex;flex-wrap:wrap;gap:5px;justify-content:flex-end;margin-top:10px;padding-top:9px;border-top:1px solid #EEF2F0}.course-actions .secondary-btn{height:32px;padding:0 11px;font-size:8.5px}.kpi-card{padding:13px;border:1px solid var(--border);border-radius:14px;background:#fff}.kpi-person{display:grid;grid-template-columns:34px minmax(0,1fr) auto;gap:9px;align-items:center}.kpi-person .avatar{width:34px;height:34px}.kpi-person strong{display:block;color:var(--primary-dark);font-size:10.5px}.kpi-person small{display:block;color:var(--text-tertiary);font-size:8px}.kpi-card h4{margin:11px 0 3px;color:var(--text);font-size:11px}.kpi-card p{margin:0;color:var(--text-secondary);font-size:8.5px}.kpi-progress{margin-top:10px}.kpi-foot{display:flex;align-items:center;gap:9px;margin-top:8px;color:var(--text-tertiary);font-size:8px}.kpi-foot .text-btn{margin-left:auto}.timeline-card{position:relative;display:grid;grid-template-columns:16px minmax(0,1fr) auto;gap:9px;padding:10px 0;border-bottom:1px solid #EEF2F0}.timeline-dot{width:10px;height:10px;margin-top:4px;border:2px solid var(--warning);border-radius:50%;background:#fff}.timeline-dot.done{border-color:var(--success);background:var(--success)}.timeline-card strong{color:var(--primary-dark);font-size:10.5px}.timeline-card p{margin:2px 0;color:var(--text-secondary);font-size:8.5px}.timeline-card small{color:var(--text-tertiary);font-size:8px}.probation-card{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;align-items:center;padding:12px;border:1px solid var(--border);border-radius:13px;background:#fff}.probation-card strong{color:var(--primary-dark);font-size:10.5px}.probation-card p{margin:3px 0;color:var(--text-secondary);font-size:8.5px}.probation-card small{color:var(--text-tertiary);font-size:8px}.probation-card .secondary-btn{height:34px;font-size:8.5px}
@media(max-width:1050px){.performance-summary{grid-template-columns:repeat(3,1fr)}.performance-summary>div:nth-child(4),.performance-summary>div:nth-child(5){border-top:1px solid var(--border)}.growth-grid{grid-template-columns:1fr}}
@media(max-width:720px){.performance-summary{grid-template-columns:1fr 1fr}.performance-summary>div{border-top:1px solid var(--border)}.performance-summary>div:nth-child(1),.performance-summary>div:nth-child(2){border-top:0}.growth-grid{gap:12px}.course-progress{grid-template-columns:1fr}.course-actions{justify-content:flex-start}.probation-card{grid-template-columns:1fr}.probation-card .secondary-btn{width:100%}}

/* Nakna HR V1.0-P5 — Engagement, People Analytics, Subscription & SaaS */
.engagement-summary,.analytics-summary{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));overflow:hidden;margin-bottom:16px;border:1px solid var(--border);border-radius:18px;background:#fff}.analytics-summary{grid-template-columns:repeat(6,minmax(0,1fr))}.engagement-summary article,.analytics-summary article{position:relative;padding:16px 18px}.engagement-summary article+article:before,.analytics-summary article+article:before{content:"";position:absolute;left:0;top:14px;bottom:14px;width:1px;background:var(--border)}.engagement-summary span,.analytics-summary span{display:block;color:var(--text-tertiary);font:600 8px/1.2 var(--font-en);letter-spacing:.08em}.engagement-summary strong,.analytics-summary strong{display:block;margin-top:7px;color:var(--primary-dark);font:700 22px/1.1 var(--font-en)}.engagement-summary p,.analytics-summary small{display:block;margin:4px 0 0;color:var(--text-secondary);font-size:8.5px}.engagement-grid,.analytics-grid,.admin-grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(320px,.9fr);gap:16px;align-items:start}.engagement-reward-panel,.analytics-department-panel,.admin-invoice-panel{grid-column:1/-1}.phase5-list{display:grid}.phase5-row{display:grid;grid-template-columns:auto minmax(0,1fr) auto auto;gap:10px;align-items:center;padding:11px 2px;border-bottom:1px solid #EEF2F0}.phase5-row:last-child{border-bottom:0}.phase5-copy{min-width:0}.phase5-copy strong{display:block;overflow:hidden;color:var(--primary-dark);font-size:10.5px;font-weight:600;text-overflow:ellipsis;white-space:nowrap}.phase5-copy p{margin:3px 0 0;color:var(--text-tertiary);font-size:8.5px;line-height:1.45}.rule-state{width:10px;height:10px;border:2px solid #C9D4D0;border-radius:50%;background:#fff}.rule-state.on{border-color:var(--primary);background:var(--primary)}.leaderboard-list{display:grid}.leaderboard-row{display:grid;grid-template-columns:28px 36px minmax(0,1fr) auto;gap:9px;align-items:center;padding:9px 2px;border-bottom:1px solid #EEF2F0}.leaderboard-row:last-child{border:0}.rank{width:25px;height:25px;display:grid;place-items:center;border-radius:8px;background:#F1F5F3;color:var(--text-secondary);font:700 9px/1 var(--font-en)}.rank.top{background:#FFF5E7;color:#B87920}.mini-avatar{width:34px;height:34px;display:grid;place-items:center;border-radius:10px;background:var(--primary-soft);color:var(--primary);font-weight:700}.leaderboard-row strong{display:block;color:var(--text);font-size:10px}.leaderboard-row small{display:block;margin-top:2px;color:var(--text-tertiary);font-size:8px}.leaderboard-row>b{color:var(--primary);font:700 12px/1 var(--font-en)}.leaderboard-row>b small{display:inline;font-size:7px}.reward-catalog-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}.reward-card{display:grid;grid-template-columns:42px minmax(0,1fr) auto;gap:11px;align-items:start;padding:14px;border:1px solid var(--border);border-radius:15px;background:#fff}.reward-card.inactive{opacity:.55}.reward-emoji,.moment-icon{width:42px;height:42px;display:grid;place-items:center;border-radius:12px;background:#FFF7ED;font-size:19px}.reward-emoji.small{width:34px;height:34px;border-radius:10px;font-size:15px}.reward-card strong{display:block;color:var(--primary-dark);font-size:10.5px}.reward-card p{margin:3px 0;color:var(--text-secondary);font-size:8.5px}.reward-card small{color:var(--text-tertiary);font-size:8px}.row-actions{display:flex;gap:2px}.success-text{color:var(--success)!important}.metric-number{color:var(--primary);font:700 18px/1 var(--font-en)}
.headcount-trend{height:230px;display:flex;align-items:flex-end;gap:12px;padding:18px 4px 2px}.trend-column{min-width:0;flex:1;display:grid;grid-template-rows:180px auto auto;justify-items:center;gap:4px}.trend-bars{height:180px;width:100%;display:flex;justify-content:center;align-items:flex-end;gap:4px;border-bottom:1px solid var(--border)}.trend-bars i{display:block;width:18%;min-width:7px;border-radius:5px 5px 0 0;background:var(--primary)}.trend-bars i.hire{background:var(--mint)}.trend-bars i.exit{background:var(--coral)}.trend-column strong{color:var(--text-secondary);font:600 8px/1 var(--font-en)}.trend-column small{color:var(--text-tertiary);font-size:7.5px}.department-analytics{display:grid}.department-health-row{display:grid;grid-template-columns:minmax(150px,1fr) minmax(350px,2fr);gap:14px;align-items:center;padding:11px 2px;border-bottom:1px solid #EEF2F0}.department-health-row:last-child{border:0}.department-health-row>div>strong{display:block;color:var(--primary-dark);font-size:10.5px}.department-health-row>div>small{display:block;margin-top:2px;color:var(--text-tertiary);font-size:8px}.department-metrics{display:grid;grid-template-columns:repeat(4,1fr);gap:7px}.department-metrics span{padding:8px;border-radius:9px;background:#F7FAF8;color:var(--text-tertiary);font-size:7.5px;text-align:center}.department-metrics b{display:block;margin-bottom:2px;color:var(--text);font:700 11px/1 var(--font-en)}
.subscription-section{margin-top:28px;padding-top:26px;border-top:1px solid var(--border)}.subscription-card{display:grid;grid-template-columns:minmax(220px,.9fr) minmax(300px,1.4fr) auto;gap:22px;align-items:center;padding:18px;border:1px solid #CFE4DE;border-radius:17px;background:linear-gradient(120deg,#FFFFFF 0%,#F2FAF7 100%)}.subscription-main>span{display:block;color:var(--primary);font:600 8px/1 var(--font-en);letter-spacing:.12em}.subscription-main>strong{display:block;margin-top:7px;color:var(--primary-dark);font-size:17px}.subscription-main>p{margin:4px 0 0;color:var(--text-secondary);font-size:8.7px;line-height:1.5}.seat-meter>div:first-child{display:flex;justify-content:space-between;align-items:center}.seat-meter span{color:var(--text-secondary);font-size:8.5px}.seat-meter strong{color:var(--primary-dark);font:700 16px/1 var(--font-en)}.seat-track{height:8px;margin:9px 0 5px;overflow:hidden;border-radius:999px;background:#E4ECE8}.seat-track i{display:block;height:100%;width:0;border-radius:999px;background:var(--primary);transition:width .2s ease}.seat-meter small{color:var(--text-tertiary);font-size:7.5px}.subscription-actions{display:grid;gap:5px}.subscription-invoices{margin-top:9px}.subscription-invoice-head,.subscription-invoice-row{display:grid;grid-template-columns:minmax(150px,1fr) minmax(180px,1fr) 110px 80px;gap:10px;align-items:center;padding:8px 4px;border-bottom:1px solid #EEF2F0;color:var(--text-secondary);font-size:8.5px}.subscription-invoice-head{color:var(--text-tertiary)}.subscription-invoice-row strong{color:var(--text);font:600 9px/1 var(--font-en)}
.admin-grid{grid-template-columns:1fr 1fr}.admin-invoice-panel{grid-column:1/-1}
@media(max-width:1100px){.engagement-summary{grid-template-columns:repeat(3,1fr)}.analytics-summary{grid-template-columns:repeat(3,1fr)}.engagement-summary article:nth-child(4):before,.analytics-summary article:nth-child(4):before{display:none}.reward-catalog-list{grid-template-columns:repeat(2,1fr)}.subscription-card{grid-template-columns:1fr 1fr}.subscription-actions{grid-column:1/-1;grid-template-columns:auto auto;justify-content:end}}
@media(max-width:800px){.engagement-grid,.analytics-grid,.admin-grid{grid-template-columns:1fr}.engagement-reward-panel,.analytics-department-panel,.admin-invoice-panel{grid-column:auto}.engagement-summary,.analytics-summary{grid-template-columns:repeat(2,1fr)}.engagement-summary article:nth-child(odd):before,.analytics-summary article:nth-child(odd):before{display:none}.reward-catalog-list{grid-template-columns:1fr}.department-health-row{grid-template-columns:1fr}.subscription-card{grid-template-columns:1fr}.subscription-actions{grid-column:auto;grid-template-columns:1fr}.subscription-invoice-head{display:none}.subscription-invoice-row{grid-template-columns:1fr auto}.subscription-invoice-row span:nth-child(2){grid-column:1/-1}.headcount-trend{gap:4px}}

/* Nakna V1.0-P7 — LINE-first identity + Web Business Setup */
.line-business-btn {
  min-height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 11px;
  border: 1px solid #06B956;
  border-radius: var(--radius-button);
  background: #06C755;
  color: #fff;
  font-weight: 700;
  box-shadow: 0 10px 24px rgba(6, 199, 85, .14);
  transition: transform .15s ease, box-shadow .15s ease, opacity .15s ease;
}
.line-business-btn:hover { transform: translateY(-1px); box-shadow: 0 14px 28px rgba(6, 199, 85, .18); }
.line-business-btn:active { transform: translateY(0); }
.line-login-mark {
  display: inline-grid;
  place-items: center;
  min-width: 42px;
  height: 24px;
  padding: 0 6px;
  border-radius: 7px;
  background: rgba(255,255,255,.96);
  color: #06B956;
  font: 800 9px/1 var(--font-en);
  letter-spacing: -.02em;
}
.line-setup-hint {
  margin-top: 10px;
  padding: 10px 12px;
  border: 1px solid #D9EEE3;
  border-radius: 11px;
  background: #F4FBF7;
  color: #42705A;
  font-size: 10.5px;
  text-align: center;
}
.compact-login-points { margin-top: 16px; }

.data-load-banner {
  margin: 14px 20px 0;
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 11px 12px;
  border: 1px solid #E8D4A8;
  border-radius: 14px;
  background: #FFF9ED;
  color: #775B20;
}
.data-load-icon {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  border-radius: 50%;
  background: #F6E4B7;
  color: #8B6414;
  font: 700 13px/1 var(--font-en);
}
.data-load-copy { min-width: 0; display: grid; gap: 2px; flex: 1; }
.data-load-copy strong { font-size: 11px; color: #6E531D; }
.data-load-copy span { font-size: 10px; color: #8A7343; }
.data-load-banner .secondary-btn { min-height: 34px; padding: 0 12px; white-space: nowrap; background: #fff; }

@media (max-width: 680px) {
  .data-load-banner { margin: 10px 12px 0; align-items: flex-start; flex-wrap: wrap; }
  .data-load-banner .secondary-btn { width: 100%; }
}


/* ─────────────────────────────────────────────────────────────
   P7 · LINE → Web Business Setup + Gmail Recruitment + Benefits
   ───────────────────────────────────────────────────────────── */
.onboarding-card-wide{width:min(940px,calc(100vw - 36px));max-height:calc(100vh - 36px);overflow:auto;padding:0}
.onboarding-topbar{display:flex;align-items:center;justify-content:space-between;padding:22px 26px 16px;border-bottom:1px solid var(--line,#e8eeeb);position:sticky;top:0;background:rgba(255,255,255,.96);backdrop-filter:blur(14px);z-index:3}
.onboarding-brand{margin:0}
.setup-steps{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;padding:20px 26px 0}
.setup-step{display:flex;align-items:center;gap:9px;padding:10px 12px;border-radius:14px;color:#7b8986;background:#f5f8f7;font-size:12px;font-weight:700}
.setup-step b{display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:#e7eeec;color:#62726e}
.setup-step.active{background:#e8f5f2;color:#0a7778}.setup-step.active b{background:#128b8c;color:#fff}
.setup-step.done{background:#f0f8f4;color:#2c7b5d}.setup-step.done b{background:#d9f0e4;color:#207352}
.setup-panel{padding:25px 28px 30px}.setup-panel h2{font-size:28px;line-height:1.2;margin:6px 0 8px}.setup-panel>.muted{max-width:760px;margin-bottom:20px}
.setup-form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin:20px 0}.setup-form-grid .full{grid-column:1/-1}
.setup-note-card{display:flex;align-items:flex-start;gap:14px;padding:15px 17px;border:1px solid #d8ebe5;border-radius:15px;background:#f1f9f6;margin:18px 0}
.setup-note-card strong{white-space:nowrap;color:#0b7778}.setup-note-card span{font-size:12px;color:#63716e;line-height:1.5}
.integration-preview-grid,.setup-ready-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:20px 0}
.integration-preview-grid article,.setup-ready-grid article{border:1px solid #e1e9e6;border-radius:17px;padding:17px;background:#fbfcfc}
.integration-preview-grid article>span,.setup-ready-grid article>span{font-size:10px;letter-spacing:.12em;color:#128b8c;font-weight:800}
.integration-preview-grid strong,.setup-ready-grid strong{display:block;margin:7px 0 5px;font-size:15px;color:#153c40}
.integration-preview-grid p,.setup-ready-grid p{font-size:11px;color:#7a8784;line-height:1.45;margin:0}
.setup-connection-state{display:flex;gap:12px;align-items:center;padding:14px 16px;border-radius:14px;background:#fff7e7;border:1px solid #f0dba9;margin:16px 0}
.setup-connection-state .state-dot{width:10px;height:10px;border-radius:50%;background:#e0a53a;flex:0 0 auto}.setup-connection-state.connected{background:#eff9f3;border-color:#cdebd9}.setup-connection-state.connected .state-dot{background:#2fa46f}
.setup-connection-state strong{display:block;font-size:13px}.setup-connection-state p{font-size:11px;color:#7c8885;margin:3px 0 0}
.setup-toggle-card{display:flex;align-items:center;justify-content:space-between;gap:18px;border:1px solid #dfe9e6;background:#f8fbfa;border-radius:17px;padding:16px 18px;margin:18px 0}
.setup-toggle-card span>strong{display:block;font-size:14px}.setup-toggle-card span>small{display:block;color:#7b8885;margin-top:4px}
.setup-action-row{display:flex;justify-content:flex-end;gap:10px;margin-top:18px}.wide-btn{width:100%;justify-content:center;margin-top:12px}
.claim-company-card{width:100%;margin:12px 0 6px}
.recruitment-gmail-card{margin-bottom:18px}.gmail-sync-grid{display:grid;grid-template-columns:1.15fr 1.65fr 1fr .8fr;gap:1px;background:#e8eeec;border:1px solid #e8eeec;border-radius:15px;overflow:hidden}
.gmail-sync-grid>div{background:#fff;padding:14px 15px;min-width:0}.gmail-sync-grid span{display:block;font-size:9px;letter-spacing:.11em;color:#7d8b88;font-weight:800;margin-bottom:6px}.gmail-sync-grid strong{display:block;font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gmail-sync-actions{display:flex;gap:9px;justify-content:flex-end;margin-top:13px}.integration-error{padding:10px 12px;margin-top:10px;border-radius:10px;background:#fff0ed;color:#a54537;font-size:11px}
.benefit-summary{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:18px}.benefit-summary article{border:1px solid #e4ebe9;border-radius:17px;padding:16px;background:#fff}.benefit-summary span{font-size:9px;letter-spacing:.12em;color:#7b8986;font-weight:800}.benefit-summary strong{display:block;font-size:24px;margin:6px 0 2px}.benefit-summary p{font-size:11px;color:#7b8986;margin:0}
.benefit-layout{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(320px,.65fr);gap:16px}.benefit-program-list{display:grid;gap:10px}
.benefit-card{display:grid;grid-template-columns:46px 1fr auto;gap:13px;align-items:center;border:1px solid #e7eeec;border-radius:15px;padding:14px;background:#fff}.benefit-icon{display:grid;place-items:center;width:44px;height:44px;border-radius:14px;background:#eef8f5;font-size:20px}.benefit-copy{min-width:0}.benefit-title{display:flex;gap:9px;align-items:center}.benefit-copy p{margin:4px 0;font-size:11px;color:#72807d}.benefit-copy small{font-size:10px;color:#87938f}.benefit-actions{text-align:right}.benefit-actions>b{display:block;font-size:16px;margin-bottom:7px}.small-btn{padding:7px 10px;font-size:10px}
@media(max-width:900px){.integration-preview-grid,.setup-ready-grid,.benefit-summary{grid-template-columns:repeat(2,1fr)}.gmail-sync-grid{grid-template-columns:1fr 1fr}.benefit-layout{grid-template-columns:1fr}}
@media(max-width:640px){.onboarding-card-wide{width:calc(100vw - 18px);max-height:calc(100vh - 18px)}.onboarding-topbar{padding:16px}.setup-steps{padding:14px 16px 0;grid-template-columns:repeat(4,1fr)}.setup-step{justify-content:center;padding:9px 5px}.setup-step span{display:none}.setup-panel{padding:20px 16px 24px}.setup-panel h2{font-size:23px}.setup-form-grid,.integration-preview-grid,.setup-ready-grid,.benefit-summary,.gmail-sync-grid{grid-template-columns:1fr}.setup-form-grid .full{grid-column:auto}.setup-action-row,.gmail-sync-actions{flex-direction:column}.setup-action-row button,.gmail-sync-actions button{width:100%}.benefit-card{grid-template-columns:42px 1fr}.benefit-actions{grid-column:2;text-align:left;display:flex;align-items:center;gap:10px}}


/* P7.3 · mobile setup + stable Google handoff */
html.js body:not(.nakna-ready) dialog { display: none !important; }
.boot-splash {
  position: fixed;
  inset: 0;
  z-index: 5000;
  display: grid;
  place-items: center;
  overflow: hidden;
  background:
    radial-gradient(circle at 22% 18%, rgba(23,139,139,.16), transparent 26%),
    radial-gradient(circle at 78% 82%, rgba(18,60,74,.12), transparent 24%),
    linear-gradient(180deg, #f4f8f6 0%, #eef5f3 100%);
}
.boot-splash.hidden { display: none !important; }
.boot-orb {
  position: absolute;
  border-radius: 999px;
  filter: blur(6px);
  opacity: .85;
}
.boot-orb.orb-a {
  width: 240px;
  height: 240px;
  top: 12%;
  left: -60px;
  background: radial-gradient(circle, rgba(24,138,139,.18) 0%, rgba(24,138,139,0) 72%);
}
.boot-orb.orb-b {
  width: 280px;
  height: 280px;
  right: -70px;
  bottom: 10%;
  background: radial-gradient(circle, rgba(18,60,74,.14) 0%, rgba(18,60,74,0) 70%);
}
.boot-card {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 14px;
  min-width: 320px;
  width: min(430px, calc(100vw - 48px));
  padding: 24px 22px;
  border: 1px solid rgba(15,86,87,.10);
  border-radius: 28px;
  background: rgba(255,255,255,.9);
  box-shadow: 0 24px 70px rgba(14,43,48,.10);
  backdrop-filter: blur(18px);
}
.boot-brand-row { display: grid; grid-template-columns: 52px minmax(0,1fr) 24px; gap: 14px; align-items: center; }
.boot-copy { display: grid; gap: 4px; min-width: 0; }
.boot-card strong { color: #123c4a; font-size: 20px; line-height: 1.1; }
.boot-card span { color: #738184; font-size: 12px; }
.boot-brand-mark {
  width: 52px;
  height: 52px;
  border-radius: 16px;
  display: grid;
  place-items: center;
  background: linear-gradient(145deg, #18908f 0%, #137879 100%);
  color: #fff;
  font-size: 24px;
  font-weight: 700;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 12px 28px rgba(23,139,139,.18);
}
.boot-spinner {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 2px solid #dce9e5;
  border-top-color: #178b8b;
  animation: nakna-spin .75s linear infinite;
}
.boot-progress {
  width: 100%;
  height: 9px;
  border-radius: 999px;
  background: #edf4f1;
  overflow: hidden;
}
.boot-progress i {
  display: block;
  width: 38%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #17908f 0%, #53c4bf 100%);
  animation: nakna-loader 1.35s ease-in-out infinite;
}
.boot-pill-row { display: flex; flex-wrap: wrap; gap: 8px; }
.boot-pill-row span {
  padding: 6px 10px;
  border-radius: 999px;
  background: #f2f7f5;
  color: #426064;
  font-size: 11px;
  font-weight: 600;
}
.boot-footnote { color: #728184; font-size: 11px; line-height: 1.55; }
.boot-retry-btn {
  justify-self: start;
  border: 0;
  border-radius: 12px;
  padding: 9px 14px;
  background: #e9f5f2;
  color: #0b7778;
  font-weight: 700;
  font-size: 12px;
  white-space: nowrap;
}
@keyframes nakna-spin { to { transform: rotate(360deg); } }
@keyframes nakna-loader {
  0% { transform: translateX(-30%); }
  50% { transform: translateX(110%); }
  100% { transform: translateX(-30%); }
}



/* P7.3 · Mobile-first Business Setup + LINE -> external Google OAuth */
.boot-retry-btn{border:0;border-radius:10px;padding:8px 11px;background:#e9f5f2;color:#0b7778;font-weight:700;font-size:11px;white-space:nowrap}
.google-mobile-handoff{display:grid;grid-template-columns:42px minmax(0,1fr);gap:12px;align-items:center;margin:14px 0;padding:14px;border:1px solid #d7e7e2;border-radius:15px;background:#f7fbfa}
.google-mobile-handoff .handoff-icon{width:42px;height:42px;display:grid;place-items:center;border-radius:12px;background:#fff;border:1px solid #e0e7e5;color:#4285f4;font-weight:800}
.google-mobile-handoff strong{display:block;color:#153c40;font-size:13px}.google-mobile-handoff p{margin:3px 0 0;color:#71807d;font-size:11px;line-height:1.5}
.google-mobile-handoff .primary-btn{grid-column:1/-1;width:100%;text-decoration:none;text-align:center;justify-content:center}
@media(max-width:720px){
  html,body{min-height:100%;background:#f4f8f6}
  .onboarding-overlay{display:block;overflow-y:auto;overflow-x:hidden;overscroll-behavior-y:contain;padding:0;background:#f4f8f6;backdrop-filter:none;-webkit-overflow-scrolling:touch}
  .onboarding-card.onboarding-card-wide{width:100%;max-width:none;min-height:100dvh;max-height:none;overflow:visible;display:block;justify-content:flex-start;padding:0;border:0;border-radius:0;box-shadow:none;background:#fff}
  .onboarding-topbar{position:sticky;top:0;z-index:30;min-height:72px;padding:calc(12px + env(safe-area-inset-top)) 16px 12px;background:rgba(255,255,255,.98);border-bottom:1px solid #e7eeeb;backdrop-filter:blur(12px)}
  .onboarding-topbar .brand-mark{width:46px;height:46px;border-radius:14px}.onboarding-topbar .brand-wordmark strong{font-size:20px}.onboarding-topbar .brand-wordmark span{font-size:10px;max-width:190px;overflow:hidden;text-overflow:ellipsis}#onboardingLogoutBtn{font-size:12px;white-space:nowrap}
  .setup-steps{position:relative;z-index:1;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;padding:12px 14px;margin:0;background:#f7faf9;border-bottom:1px solid #edf2f0}.setup-step{min-width:0;justify-content:center;gap:5px;padding:8px 4px;border-radius:12px;font-size:10px}.setup-step b{width:23px;height:23px;font-size:10px;flex:0 0 auto}.setup-step span{display:none}
  .setup-panel{padding:22px 18px calc(34px + env(safe-area-inset-bottom));background:#fff}.setup-panel>.kicker{font-size:10px;letter-spacing:.14em}.setup-panel h2{margin-top:8px;font-size:25px;line-height:1.22}.setup-panel>.muted{margin-bottom:16px;font-size:12px;line-height:1.65}
  .integration-preview-grid,.setup-ready-grid{grid-template-columns:1fr;gap:9px;margin:15px 0}.integration-preview-grid article,.setup-ready-grid article{padding:14px 15px;border-radius:15px;background:#fbfdfc}.integration-preview-grid strong,.setup-ready-grid strong{font-size:14px;margin:5px 0 3px}.integration-preview-grid p,.setup-ready-grid p{font-size:10.5px;line-height:1.5}
  .setup-connection-state{align-items:flex-start;padding:13px 14px;margin:14px 0;border-radius:14px}.setup-connection-state strong{font-size:13px}.setup-connection-state p{font-size:10.5px;line-height:1.5}.wide-btn{min-height:50px;border-radius:14px;font-size:14px}
  .setup-form-grid{grid-template-columns:1fr;gap:11px;margin:15px 0}.setup-form-grid .full{grid-column:auto}.setup-note-card{display:grid;gap:5px;padding:13px 14px;margin:14px 0}.setup-note-card strong{white-space:normal}.setup-note-card span{font-size:10.5px}.setup-toggle-card{align-items:flex-start;padding:14px;gap:10px}.setup-toggle-card span>strong{font-size:13px}.setup-toggle-card span>small{font-size:10px;line-height:1.45}
  .google-mobile-handoff{grid-template-columns:38px minmax(0,1fr);padding:13px}.google-mobile-handoff .handoff-icon{width:38px;height:38px}.boot-card{width:calc(100vw - 44px);min-width:0;max-width:360px;padding:16px;border-radius:18px}.boot-card strong{font-size:18px}.boot-card span{font-size:12px}
  .boot-card{gap:12px;padding:18px 16px;border-radius:24px}.boot-brand-row{grid-template-columns:48px minmax(0,1fr) 22px;gap:12px}.boot-brand-mark{width:48px;height:48px;border-radius:15px;font-size:22px}.boot-card strong{font-size:18px}.boot-card span{font-size:12px}.boot-pill-row{gap:6px}.boot-pill-row span{font-size:10px;padding:5px 9px}.boot-footnote{font-size:10.5px}.settings-nav-section{margin-left:28px;padding-left:10px}.nav-subitem{padding:8px 10px}.nav-subitem span{font-size:11px}.nav-subitem small{font-size:9px}
}

/* P7.5 — Settings Center: category-first instead of one endless settings page */
.settings-home{padding-bottom:24px}
.settings-main-intro{align-items:center}
.settings-main-intro>div{max-width:680px}
.settings-guide-card{display:grid;grid-template-columns:48px minmax(0,1fr);gap:13px;align-items:center;margin-bottom:16px;padding:16px 18px;border:1px solid #CFE4DE;border-radius:17px;background:linear-gradient(120deg,#F5FBF9,#FFFFFF)}
.settings-guide-icon{width:48px;height:48px;display:grid;place-items:center;border-radius:14px;background:var(--primary);color:#fff;font-size:22px}
.settings-guide-card strong{display:block;color:var(--primary-dark);font-size:12px;font-weight:600}
.settings-guide-card p{margin:3px 0 0;color:var(--text-secondary);font-size:9.2px;line-height:1.55}
.settings-category-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.settings-category-card{width:100%;min-width:0;display:grid;grid-template-columns:48px minmax(0,1fr) 22px;gap:13px;align-items:center;padding:17px 18px;border:1px solid var(--border);border-radius:17px;background:#fff;color:inherit;text-align:left;cursor:pointer;transition:transform .15s ease,border-color .15s ease,box-shadow .15s ease,background .15s ease}
.settings-category-card:hover{transform:translateY(-1px);border-color:#BCD8D1;background:#FBFDFC;box-shadow:0 8px 24px rgba(18,60,74,.05)}
.settings-category-icon{width:48px;height:48px;display:grid;place-items:center;border-radius:14px;background:var(--primary-soft);color:var(--primary-dark);font:700 20px/1 var(--font-en)}
.settings-category-copy{min-width:0;display:grid;gap:2px}
.settings-category-copy strong{color:var(--primary-dark);font-size:12px;font-weight:600}
.settings-category-copy small{overflow:hidden;color:var(--text-secondary);font-size:9px;line-height:1.45;text-overflow:ellipsis;white-space:nowrap}
.settings-category-copy em{margin-top:4px;color:var(--primary);font-size:8.4px;font-style:normal;font-weight:500}
.settings-chevron{color:#9AA8A4;font:300 26px/1 var(--font-en)}
.settings-detail{padding-bottom:30px}
.settings-detail-head{display:grid;grid-template-columns:42px minmax(0,1fr);gap:12px;align-items:start;margin:12px 0 12px}
.settings-back-btn{width:42px;height:42px;display:grid;place-items:center;border:1px solid var(--border);border-radius:12px;background:#fff;color:var(--primary-dark);font:400 28px/1 var(--font-en);cursor:pointer}
.settings-back-btn:hover{background:var(--primary-soft);border-color:#C6E1DA}
.settings-detail-head h1{margin:3px 0 2px;color:var(--primary-dark);font-size:25px;font-weight:600}
.settings-detail-head p:not(.kicker){margin:0;color:var(--text-tertiary);font-size:10px}
.settings-detail-tabs{display:flex;gap:7px;overflow:auto;margin:0 0 18px;padding:2px 0 5px;scrollbar-width:none}
.settings-detail-tabs::-webkit-scrollbar{display:none}
.settings-detail-tabs button{flex:0 0 auto;min-height:34px;padding:0 12px;border:1px solid var(--border);border-radius:999px;background:#fff;color:var(--text-secondary);font:500 9px/1 var(--font-th);cursor:pointer;white-space:nowrap}
.settings-detail-tabs button.active{border-color:#A9D6CD;background:var(--primary-soft);color:var(--primary-dark);font-weight:600}
.settings-category-panel{display:grid;gap:0;animation:viewIn .14s ease}
.settings-category-panel>.setup-overview-section:first-child,
.settings-category-panel>.subscription-section:first-child,
.settings-category-panel>.company-line-section:first-child,
.settings-category-panel>.google-workspace-section:first-child,
.settings-category-panel>.people-core-section:first-child,
.settings-category-panel>.work-location-section:first-child,
.settings-category-panel>.approver-access-section:first-child,
.settings-category-panel>.leave-access-section:first-child,
.settings-category-panel>.leave-policy-section:first-child,
.settings-category-panel>.settings-subsection:first-child{margin-top:0;padding-top:0;border-top:0}
.settings-subsection{margin-top:28px;padding-top:26px;border-top:1px solid var(--border)}
.settings-wide-action{max-width:none}
.settings-integration-shortcuts{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:18px 0 0}
.settings-action-panel{display:grid;grid-template-columns:52px minmax(0,1fr) auto;gap:14px;align-items:center;padding:17px;border:1px solid var(--border);border-radius:16px;background:#fff}
.settings-action-icon{width:52px;height:52px;display:grid;place-items:center;border-radius:14px;background:var(--primary-soft);color:var(--primary-dark);font:700 20px/1 var(--font-en)}
.settings-action-panel strong{display:block;color:var(--primary-dark);font-size:12px;font-weight:600}
.settings-action-panel p{margin:3px 0 0;color:var(--text-secondary);font-size:9px;line-height:1.5}

@media(max-width:900px){
  .settings-category-grid{grid-template-columns:1fr 1fr}
}

@media(max-width:680px){
  #view-settings{margin-inline:-2px}
  .settings-preview{padding-top:0}
  .settings-main-intro{display:flex;align-items:flex-start;margin-top:8px}
  .settings-main-intro h1{font-size:22px}
  .settings-main-intro>span{flex:0 0 auto;margin-top:2px}
  .settings-guide-card{grid-template-columns:40px minmax(0,1fr);gap:11px;padding:14px;border-radius:15px}
  .settings-guide-icon{width:40px;height:40px;border-radius:12px;font-size:18px}
  .settings-guide-card strong{font-size:11px}
  .settings-guide-card p{font-size:8.8px}
  .settings-category-grid{grid-template-columns:1fr;gap:8px}
  .settings-category-card{grid-template-columns:44px minmax(0,1fr) 18px;gap:11px;padding:14px;border-radius:15px;box-shadow:none}
  .settings-category-card:hover{transform:none;box-shadow:none}
  .settings-category-icon{width:44px;height:44px;border-radius:13px;font-size:18px}
  .settings-category-copy strong{font-size:12px}
  .settings-category-copy small{font-size:8.8px;white-space:normal;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical}
  .settings-category-copy em{font-size:8.2px}
  .settings-detail-head{grid-template-columns:38px minmax(0,1fr);gap:10px;margin-top:8px}
  .settings-back-btn{width:38px;height:38px;border-radius:11px;font-size:25px}
  .settings-detail-head h1{font-size:21px}
  .settings-detail-head p:not(.kicker){font-size:9px;line-height:1.45}
  .settings-detail-tabs{margin-inline:-14px;padding:2px 14px 7px;gap:6px}
  .settings-detail-tabs button{min-height:33px;padding:0 11px;font-size:8.7px}
  .settings-category-panel .page-intro.compact{display:flex;align-items:flex-start;gap:10px}
  .settings-category-panel .page-intro.compact h2{font-size:17px}
  .settings-category-panel .page-intro.compact p:not(.kicker){font-size:8.8px;line-height:1.5}
  .settings-category-panel>.setup-overview-section,
  .settings-category-panel>.subscription-section,
  .settings-category-panel>.company-line-section,
  .settings-category-panel>.google-workspace-section,
  .settings-category-panel>.people-core-section,
  .settings-category-panel>.work-location-section,
  .settings-category-panel>.approver-access-section,
  .settings-category-panel>.leave-access-section,
  .settings-category-panel>.leave-policy-section,
  .settings-category-panel>.settings-subsection{margin-top:18px;padding-top:18px}
  .settings-category-panel>*:first-child{margin-top:0!important;padding-top:0!important;border-top:0!important}
  .settings-integration-shortcuts{grid-template-columns:1fr;gap:8px;margin-top:12px}
  .settings-action-panel{grid-template-columns:44px minmax(0,1fr);gap:11px;padding:14px}
  .settings-action-icon{width:44px;height:44px;border-radius:12px;font-size:17px}
  .settings-action-panel .primary-btn{grid-column:1/-1;width:100%;font-size:10px!important}
  .setup-status-grid{grid-template-columns:1fr}
  .status-card p{min-height:0}
  .subscription-card{grid-template-columns:1fr;gap:14px}
  .subscription-actions{grid-template-columns:1fr}
  .company-line-card,.workspace-google-card{grid-template-columns:44px minmax(0,1fr);gap:10px}
  .company-line-card .badge,.workspace-google-card .badge{grid-column:2;justify-self:start}
  .company-line-card>.secondary-btn,.company-line-card>.text-btn,.workspace-google-card>.secondary-btn,.workspace-google-card>.text-btn{grid-column:1/-1;width:100%;justify-content:center}
  .integration-logo,.line-business-logo{width:44px;height:44px;border-radius:12px}
  .work-location-list,.leave-policy-list{grid-template-columns:1fr}
  .work-location-card{grid-template-columns:38px minmax(0,1fr) auto}.work-location-actions{grid-column:2/-1;justify-content:flex-end;margin-top:2px}
  .work-location-pin{width:38px;height:38px;border-radius:11px;font-size:17px}
}

/* P7.7 — Settings opens directly into category detail; overview hub retired */
#settingsHome{display:none!important}

/* P7.9 — Organization + employee department/position flow */
.organization-position-block{margin-top:20px;padding-top:18px;border-top:1px solid var(--border)}
.organization-position-head{display:flex;align-items:flex-end;justify-content:space-between;gap:14px;margin-bottom:12px}
.organization-position-head h3{margin:4px 0;color:var(--primary-dark);font-size:18px}
.organization-position-head p{margin:0;color:var(--text-tertiary);font-size:11px}
.position-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.position-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:13px 14px;border:1px solid var(--border);border-radius:14px;background:#fff}
.position-row strong{display:block;color:var(--primary-dark);font-size:12px}.position-row small{display:block;margin-top:3px;color:var(--text-tertiary);font-size:10px}
.modal-inline-hint{grid-column:1/-1;display:grid;gap:3px;padding:11px 12px;border:1px solid #d8e8e4;border-radius:12px;background:#f5faf8}.modal-inline-hint strong{font-size:11px;color:#174c50}.modal-inline-hint span{font-size:10px;line-height:1.5;color:#758385}
@media(max-width:720px){.position-list{grid-template-columns:1fr}.organization-position-head{align-items:flex-start}.organization-position-head .secondary-btn{white-space:nowrap}.settings-nav-section .nav-subitem[data-settings-sidebar-jump="organization"]{margin-top:-2px}}

/* P7.10 — make Department creation obvious from Position flow */
.field-help{margin-top:7px;color:var(--text-tertiary);font-size:10px;line-height:1.5}
.inline-create-btn{margin-top:9px;border:0;background:transparent;color:var(--primary);font-weight:700;font-size:11px;padding:4px 0;text-align:left}
.inline-create-btn:hover{text-decoration:underline}
@media(max-width:720px){.inline-create-btn{font-size:12px;padding:8px 0}.field-help{font-size:10.5px}}

/* P7.11 — Organization assignment + visual cleanup */
.settings-category-panel[data-settings-category="company"]{max-width:1120px}
.settings-category-panel[data-settings-category="company"] .settings-company-profile{margin-bottom:18px}
.settings-category-panel[data-settings-category="company"] .people-core-section{padding-top:22px;border-top:1px solid var(--border)}
.settings-category-panel[data-settings-category="company"] .page-intro.compact{align-items:flex-start;margin-bottom:14px}
.settings-category-panel[data-settings-category="company"] .page-intro.compact h2{font-size:22px;letter-spacing:-.02em}
.settings-category-panel[data-settings-category="company"] .page-intro.compact p{max-width:620px}
.org-card-modern{padding:16px 17px;border-radius:16px;box-shadow:0 6px 24px rgba(22,57,60,.035)}
.org-card-copy{display:grid;gap:2px}.org-card-copy strong{font-size:13px}.org-card-copy small{font-size:10px}.org-card-copy em{font-style:normal;color:#7b898b;font-size:9.5px}
.org-card-actions{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.position-list{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.position-card-modern{padding:15px 16px;border-radius:16px;box-shadow:0 6px 24px rgba(22,57,60,.035)}
.position-card-main{display:flex;align-items:center;gap:11px;min-width:0}.position-symbol{width:38px;height:38px;flex:0 0 auto;display:grid;place-items:center;border-radius:12px;background:#eaf6f3;color:#147f80;font-weight:700;font-size:13px}.position-card-main strong{font-size:13px}.position-card-main em{display:block;margin-top:5px;font-style:normal;color:#6f7f81;font-size:9.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:230px}.position-card-actions{display:flex;align-items:center;gap:8px}.position-assign-btn{font-weight:700}
.position-assign-modal{width:min(680px,calc(100vw - 28px));max-height:min(82vh,760px)}
.department-assign-note{display:flex;gap:9px;align-items:flex-start;padding:10px 12px;margin:12px 0 2px;border:1px solid #dceceb;border-radius:12px;background:#f7fbfa}.department-assign-note strong{flex:0 0 auto;color:#166f70;font-size:10px}.department-assign-note span{color:#66787a;font-size:9px;line-height:1.45}.org-people-btn{font-weight:700;color:#117d7e}.department-person-row:has(input:checked){box-shadow:inset 3px 0 0 #178b8b}
.position-assign-toolbar{display:flex;gap:10px;align-items:center;margin:14px 0}.compact-search{flex:1;margin:0}.position-assign-people{display:grid;gap:7px;max-height:430px;overflow:auto;padding-right:2px}.position-person-row{display:grid;grid-template-columns:20px 36px minmax(0,1fr);gap:10px;align-items:center;padding:11px 12px;border:1px solid var(--border);border-radius:13px;background:#fff;cursor:pointer}.position-person-row:has(input:checked){border-color:#8accc6;background:#f2faf8}.position-person-row input{width:17px;height:17px;accent-color:#178b8b}.person-mini-avatar{width:36px;height:36px;display:grid;place-items:center;border-radius:11px;background:#eaf6f3;color:#147f80;font-weight:700}.position-person-copy{min-width:0}.position-person-copy strong{display:block;color:#163f47;font-size:11.5px}.position-person-copy small{display:block;margin-top:2px;color:#7d898b;font-size:9.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media(max-width:720px){
  .settings-detail-tabs{display:none!important}
  .settings-detail-head{margin-bottom:18px}
  .settings-category-panel[data-settings-category="company"] .page-intro.compact{display:grid;gap:12px}
  .settings-category-panel[data-settings-category="company"] .section-action-group{width:100%;display:grid;grid-template-columns:1fr 1fr;gap:8px}
  .settings-category-panel[data-settings-category="company"] .section-action-group button{width:100%;min-height:44px}
  .organization-position-head{display:grid;grid-template-columns:1fr auto;align-items:end}.organization-position-head h3{font-size:20px}
  .position-list{grid-template-columns:1fr}.position-card-modern{align-items:flex-start}.position-card-actions{flex-direction:column;align-items:flex-end}.position-card-main em{max-width:190px}
  .org-card-modern{align-items:flex-start}.org-card-actions{flex-direction:column;align-items:flex-end}.org-card-actions .text-btn{padding:3px 0}
  .position-assign-modal{width:calc(100vw - 20px);max-height:88dvh;border-radius:22px}.position-assign-toolbar{position:sticky;top:0;background:#fff;z-index:2;padding-top:4px}.position-assign-people{max-height:52dvh}.position-person-row{grid-template-columns:20px 34px minmax(0,1fr);padding:10px}.person-mini-avatar{width:34px;height:34px}.position-person-copy small{font-size:9px}
}


/* P7.60 — centered save / mutation feedback */
.action-status{
  position:fixed;
  z-index:7200;
  inset:0;
  display:grid;
  place-items:center;
  padding:22px;
  background:rgba(22,45,48,.18);
  backdrop-filter:blur(2px);
  -webkit-backdrop-filter:blur(2px);
  opacity:1;
  transition:opacity .16s ease;
  user-select:none;
  caret-color:transparent;
}
.action-status.hidden{display:none!important}
.action-status-card{
  width:min(330px,calc(100vw - 40px));
  display:grid;
  grid-template-columns:46px minmax(0,1fr);
  gap:13px;
  align-items:center;
  padding:17px 18px;
  border:1px solid rgba(17,92,94,.13);
  border-radius:20px;
  background:rgba(255,255,255,.98);
  box-shadow:0 24px 70px rgba(20,55,58,.22);
  animation:nakna-action-pop .16s ease-out both;
  user-select:none;
  caret-color:transparent;
}
.action-status-icon{
  width:46px;height:46px;border-radius:14px;display:grid;place-items:center;
  background:#eaf6f3;color:#128181;font-weight:800;
}
.action-status-copy{display:grid;gap:3px;min-width:0;user-select:none;caret-color:transparent}
.action-status-copy strong{font-size:14px;line-height:1.3;color:#123c4a;user-select:none;caret-color:transparent}
.action-status-copy small{font-size:11px;line-height:1.45;color:#7b898b;user-select:none;caret-color:transparent}
.action-status-spinner{width:21px;height:21px;border:2.5px solid #cfe4df;border-top-color:#178b8b;border-radius:50%;animation:nakna-action-spin .68s linear infinite}
.action-status.success{background:rgba(22,45,48,.10)}
.action-status.error{background:rgba(69,35,30,.15)}
.action-status.success .action-status-icon{background:#e8f7ef;color:#168457}
.action-status.error .action-status-icon{background:#fff0ed;color:#c95a4b}
.action-status.success .action-status-spinner,.action-status.error .action-status-spinner{display:none}
.action-status.success .action-status-icon::before{content:'✓';font-size:20px}
.action-status.error .action-status-icon::before{content:'!';font-size:19px}
body.is-mutating{cursor:progress}
body.is-mutating button[type="submit"],body.is-mutating .primary-btn[disabled]{cursor:wait}
.button-inline-spinner{width:14px;height:14px;display:inline-block;flex:0 0 auto;border:2px solid rgba(255,255,255,.42);border-top-color:currentColor;border-radius:50%;animation:nakna-action-spin .68s linear infinite}
.primary-btn[aria-busy="true"]{display:inline-flex;align-items:center;justify-content:center;gap:8px;cursor:wait}
#peopleProfileModal.is-saving{cursor:wait}
#peopleProfileModal :is(label,small,strong,p,h1,h2,h3,.field-label-note,.inline-create-btn,.primary-btn,.secondary-btn,.close-btn){caret-color:transparent}
#peopleProfileModal input,#peopleProfileModal textarea{caret-color:auto}
@keyframes nakna-action-spin{to{transform:rotate(360deg)}}
@keyframes nakna-action-pop{from{opacity:0;transform:translateY(8px) scale(.98)}to{opacity:1;transform:none}}
@media(max-width:720px){
  .action-status{padding:16px}
  .action-status-card{width:min(320px,calc(100vw - 28px));padding:15px 16px;border-radius:18px}
}


/* P7.15 — Unified account identity, account menu and safe workspace deletion */
.top-actions{position:relative}
.account-menu{position:absolute;top:calc(100% + 10px);right:0;z-index:120;width:330px;padding:12px;border:1px solid var(--border);border-radius:18px;background:rgba(255,255,255,.98);box-shadow:0 22px 60px rgba(23,49,52,.16);backdrop-filter:blur(18px)}
.account-menu.hidden{display:none!important}
.account-menu-head{display:grid;grid-template-columns:44px minmax(0,1fr);gap:11px;align-items:center;padding:7px 7px 12px;border-bottom:1px solid var(--border)}
.account-menu-avatar{width:44px;height:44px;display:grid;place-items:center;border-radius:14px;background:#e6f4f1;color:var(--primary);font-weight:700;background-size:cover;background-position:center}
.account-menu-avatar.has-photo{color:transparent}
.account-menu-head strong{display:block;color:var(--primary-dark);font-size:13px}.account-menu-head small{display:block;margin-top:2px;color:var(--text-tertiary);font-size:10px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.account-menu-status{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:10px 7px;color:#718083;font-size:10px;border-bottom:1px solid var(--border)}
.account-menu-action{width:100%;display:grid;grid-template-columns:34px minmax(0,1fr);gap:10px;align-items:center;margin-top:6px;padding:10px;border:0;border-radius:12px;background:transparent;text-align:left;color:#29484c}
.account-menu-action:hover{background:#f3f8f6}.account-menu-action>span{width:34px;height:34px;display:grid;place-items:center;border-radius:10px;background:#eef6f3;color:var(--primary);font-weight:700}.account-menu-action strong{display:block;font-size:11.5px}.account-menu-action small{display:block;margin-top:1px;color:#8a9798;font-size:9px;line-height:1.35}.account-menu-action.danger strong{color:#b44e4e}.account-menu-action.danger>span{background:#fff0ee;color:#b44e4e}
.company-menu-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px;align-items:center;border-radius:11px}.company-menu-row.active{background:var(--primary-soft)}.company-menu-row .company-menu-item{background:transparent}.company-delete-btn{min-width:46px;height:32px;display:inline-flex;align-items:center;justify-content:center;gap:4px;padding:0 9px;border:1px solid #f0d4cf;border-radius:10px;background:#fff7f5;color:#b44e4e;font-size:10px;font-weight:700;white-space:nowrap}.company-delete-btn>span{font-size:14px;line-height:1}.company-delete-btn>b{font-size:9.5px}.company-delete-btn:hover{background:#ffefec;border-color:#eabbb4;color:#9e3333}
.delete-company-modal{max-width:520px}.danger-kicker{color:#b44e4e!important}.delete-company-warning{display:grid;gap:5px;margin:4px 0 16px;padding:15px;border:1px solid #f0c8c2;border-radius:14px;background:#fff7f5}.delete-company-warning strong{color:#8f3939;font-size:14px}.delete-company-warning p{margin:0;color:#745d5b;font-size:11px;line-height:1.55}.delete-company-warning small{color:#9b8582;font-size:9.5px;line-height:1.45}.danger-btn{border:0;border-radius:11px;padding:10px 14px;background:#b94d4d;color:#fff;font-weight:700}.danger-btn:disabled{opacity:.55}
@media(max-width:720px){.account-menu{position:fixed;top:calc(72px + env(safe-area-inset-top));right:14px;left:14px;width:auto;max-width:none;border-radius:20px}.profile-chip>div{display:none}.profile-chip{padding:4px}.company-menu-row{grid-template-columns:minmax(0,1fr) auto}.company-delete-btn{min-width:52px;height:38px;padding:0 10px}}

/* P7.18 · Workspace Owner/Admin access */
.company-access-section{display:grid;gap:14px;margin-bottom:22px;padding-bottom:22px;border-bottom:1px solid var(--border)}
.access-role-guide{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}.access-role-guide>div{display:grid;gap:4px;padding:13px 14px;border:1px solid var(--border);border-radius:14px;background:#fbfdfc}.access-role-guide strong{font-size:12px;color:var(--primary-dark)}.access-role-guide span{font-size:10px;line-height:1.5;color:var(--text-tertiary)}
.company-access-list{display:grid;gap:9px}.company-access-card{display:grid;grid-template-columns:42px minmax(0,1fr) auto auto;gap:11px;align-items:center;padding:12px 14px;border:1px solid var(--border);border-radius:14px;background:#fff}.company-access-avatar{width:42px;height:42px;display:grid;place-items:center;overflow:hidden;border-radius:13px;background:var(--primary-soft);color:var(--primary);font-weight:700}.company-access-avatar img{width:100%;height:100%;object-fit:cover}.company-access-copy{min-width:0}.company-access-copy strong{display:block;overflow:hidden;color:var(--primary-dark);font-size:12px;text-overflow:ellipsis;white-space:nowrap}.company-access-copy p{margin:3px 0 0;color:var(--text-tertiary);font-size:10px}.company-access-self{padding:5px 8px;border-radius:999px;background:#f3f6f4;color:#758385;font-size:9px;font-weight:600}.access-warning-card{display:grid;gap:4px;padding:13px 14px;border:1px solid #f1d9a3;border-radius:14px;background:#fff8e9}.access-warning-card strong{color:#7b5512;font-size:12px}.access-warning-card span{color:#9a7b46;font-size:10px;line-height:1.5}
@media(max-width:720px){.access-role-guide{grid-template-columns:1fr}.company-access-card{grid-template-columns:40px minmax(0,1fr) auto}.company-access-card>.text-btn,.company-access-card>.company-access-self{grid-column:2/-1;justify-self:start}.company-access-avatar{width:40px;height:40px}.company-access-section .page-intro.compact{align-items:flex-start}.company-access-section .section-action-group{width:100%;justify-content:space-between}}

/* P7.20 · Employee edit/delete actions */
.employee-row-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.employee-row-actions .text-btn{white-space:nowrap}
.employee-row-actions .danger-text{color:#c75a58}
@media(max-width:720px){
  .employee-row-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;width:100%}
  .employee-row-actions .text-btn{min-height:40px;padding:8px 10px;border:1px solid #e1ebe7;border-radius:11px;background:#fff;text-align:center}
  .employee-row-actions .danger-text{border-color:#f1d7d4;background:#fff8f7;color:#b84f4d}
}

/* P7.28 Dedicated HR Inbox */
.hr-inbox-toolbar{align-items:flex-end;gap:16px}.hr-inbox-filters{display:flex;gap:10px;flex-wrap:wrap}.hr-inbox-filters .search-input{min-width:260px}.hr-inbox-filters select{min-height:40px;border:1px solid var(--border);border-radius:12px;background:#fff;padding:0 12px;color:var(--text)}.hr-inbox-list{display:grid;gap:10px}.hr-inbox-case-row{width:100%;text-align:left}.hr-case-title-line{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.hr-case-title-line strong{font-size:14px}@media(max-width:720px){.hr-inbox-toolbar{align-items:stretch}.hr-inbox-filters{display:grid;grid-template-columns:1fr}.hr-inbox-filters .search-input{min-width:0;width:100%}.hr-inbox-summary{grid-template-columns:1fr 1fr}.hr-inbox-summary .service-summary-card:last-child{grid-column:1/-1}}


/* P7.29 · Premium boot experience — logo.png aware */
.boot-splash{
  position:fixed;inset:0;z-index:5000;display:grid;place-items:center;overflow:hidden;
  background:
    radial-gradient(circle at 50% 43%,rgba(255,255,255,.98) 0%,rgba(249,252,251,.96) 34%,rgba(238,246,243,.98) 100%);
  color:#123c4a;
}
.boot-splash.hidden{display:none!important}
.boot-ambient{position:absolute;border-radius:50%;pointer-events:none;filter:blur(1px);opacity:.8}
.boot-ambient-a{width:min(68vw,760px);height:min(68vw,760px);left:-24vw;top:-28vw;background:radial-gradient(circle,rgba(111,215,201,.22),rgba(111,215,201,0) 69%);animation:nakna-float-a 8s ease-in-out infinite alternate}
.boot-ambient-b{width:min(56vw,680px);height:min(56vw,680px);right:-18vw;bottom:-24vw;background:radial-gradient(circle,rgba(20,112,118,.12),rgba(20,112,118,0) 70%);animation:nakna-float-b 9s ease-in-out infinite alternate}
.boot-stage{
  position:relative;z-index:1;width:min(420px,calc(100vw - 48px));display:flex;flex-direction:column;align-items:center;text-align:center;
  padding:38px 30px 30px;border:1px solid rgba(255,255,255,.9);border-radius:36px;
  background:linear-gradient(180deg,rgba(255,255,255,.86),rgba(255,255,255,.67));
  box-shadow:0 38px 100px rgba(17,63,68,.10),inset 0 1px 0 rgba(255,255,255,.95);
  backdrop-filter:blur(28px) saturate(135%);-webkit-backdrop-filter:blur(28px) saturate(135%);
}
.boot-logo-shell{position:relative;width:92px;height:92px;border-radius:27px;display:grid;place-items:center;margin-bottom:18px;background:rgba(255,255,255,.88);box-shadow:0 20px 52px rgba(16,92,94,.16),inset 0 0 0 1px rgba(18,95,96,.08);overflow:hidden}
.boot-logo{position:absolute;inset:10px;width:72px;height:72px;object-fit:contain;border-radius:18px;z-index:2;opacity:1;transition:opacity .2s ease}
.boot-logo.is-missing{opacity:0}
.boot-logo-fallback{font-size:38px;font-weight:700;color:#fff;width:72px;height:72px;border-radius:20px;display:grid;place-items:center;background:linear-gradient(145deg,#1a9894,#117679);box-shadow:inset 0 1px 0 rgba(255,255,255,.25)}
.boot-logo-glow{position:absolute;inset:-30%;background:conic-gradient(from 180deg,transparent,rgba(115,228,211,.24),transparent 42%);animation:nakna-orbit 5s linear infinite;z-index:0}
.boot-wordmark{font-size:31px;line-height:1.1;font-weight:700;letter-spacing:-.8px;color:#113f4d;margin-bottom:9px}
.boot-status-line{display:flex;align-items:center;justify-content:center;gap:8px;min-height:24px;color:#738183;font-size:13px;font-weight:400}
.boot-status-dots{display:inline-flex;gap:3px;align-items:center;height:14px}
.boot-status-dots i{display:block;width:3px;height:3px;border-radius:50%;background:#178b8b;animation:nakna-dot 1.1s ease-in-out infinite}
.boot-status-dots i:nth-child(2){animation-delay:.14s}.boot-status-dots i:nth-child(3){animation-delay:.28s}
.boot-progress{width:100%;height:3px;margin:25px 0 18px;border-radius:999px;background:rgba(18,98,99,.08);overflow:hidden}
.boot-progress i{display:block;width:38%;height:100%;border-radius:inherit;background:linear-gradient(90deg,rgba(28,151,146,.15),#1d9d98 50%,rgba(93,208,194,.35));box-shadow:0 0 16px rgba(29,157,152,.30);animation:nakna-loader-premium 1.55s cubic-bezier(.4,0,.2,1) infinite}
.boot-security-note{display:flex;align-items:center;gap:7px;color:#92a09f;font-size:10.5px;letter-spacing:.05px}
.boot-lock{width:16px;height:16px;border-radius:50%;display:grid;place-items:center;background:#edf7f4;color:#178b8b;font-size:9px;font-weight:700}
.boot-retry-btn{margin-top:18px;border:1px solid rgba(19,119,120,.16);border-radius:999px;padding:10px 17px;background:rgba(255,255,255,.74);color:#0b7778;font-weight:600;font-size:12px;box-shadow:0 8px 24px rgba(16,92,94,.06)}
@keyframes nakna-loader-premium{0%{transform:translateX(-120%)}55%{transform:translateX(130%)}100%{transform:translateX(260%)}}
@keyframes nakna-dot{0%,60%,100%{opacity:.25;transform:translateY(0)}30%{opacity:1;transform:translateY(-2px)}}
@keyframes nakna-orbit{to{transform:rotate(360deg)}}
@keyframes nakna-float-a{to{transform:translate(24px,20px) scale(1.03)}}
@keyframes nakna-float-b{to{transform:translate(-22px,-18px) scale(1.04)}}
@media(max-width:640px){
  .boot-stage{width:calc(100vw - 48px);max-width:370px;padding:34px 24px 27px;border-radius:32px}
  .boot-logo-shell{width:84px;height:84px;border-radius:25px}.boot-logo{inset:9px;width:66px;height:66px}.boot-logo-fallback{width:66px;height:66px;border-radius:18px;font-size:34px}
  .boot-wordmark{font-size:28px}.boot-status-line{font-size:12px}.boot-security-note{font-size:10px}
}
@media(prefers-reduced-motion:reduce){.boot-ambient,.boot-logo-glow,.boot-progress i,.boot-status-dots i{animation:none!important}.boot-progress i{width:64%}}

/* P7.31 — Nakna monochrome icon system + cleaner settings IA */
.nakna-metric-icon{width:44px!important;height:44px!important;border-radius:14px!important;background:var(--primary-soft)!important;color:var(--primary)!important;display:grid!important;place-items:center!important}
.nakna-metric-icon svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.65;stroke-linecap:round;stroke-linejoin:round}
.service-summary-card{grid-template-columns:44px minmax(0,1fr);gap:13px;border-radius:18px;box-shadow:0 1px 0 rgba(18,60,74,.02)}
.service-summary-card small{font-size:9px;font-weight:550;letter-spacing:.01em}
.service-summary-card strong{font-weight:650;letter-spacing:-.025em}
.settings-nav-section{gap:3px!important;margin-top:5px!important;padding-top:5px!important}
.settings-nav-section .nav-subitem{display:flex!important;align-items:center!important;min-height:36px!important;padding:8px 12px!important}
.settings-nav-section .nav-subitem span{font-size:10.5px!important;font-weight:550!important}
.settings-nav-section .nav-subitem small{display:none!important}
.people-config-item svg{stroke-width:1.55!important}
.people-config-item span{font-weight:500}
@media(max-width:720px){.nakna-metric-icon{width:40px!important;height:40px!important;border-radius:13px!important}.nakna-metric-icon svg{width:19px;height:19px}.service-summary-card{grid-template-columns:40px minmax(0,1fr)}}

/* P7.35 brand + company logo */
.brand-logo-image{overflow:hidden;background:#fff!important;border:1px solid #e1ece9!important;}
.brand-logo-image img{width:100%;height:100%;object-fit:contain;display:block;}
.brand-logo-image.logo-fallback::after{content:'น';display:grid;place-items:center;width:100%;height:100%;background:#178b8b;color:#fff;font-weight:700;}
.company-avatar.has-logo,.company-menu-avatar.has-logo{background-size:cover!important;background-position:center!important;background-repeat:no-repeat!important;color:transparent!important;}
.company-logo-editor{display:flex;gap:16px;align-items:center;padding:14px;border:1px solid #dce7e4;border-radius:18px;background:#f8fbfa;}
.company-logo-preview{width:76px;height:76px;flex:0 0 76px;border-radius:18px;background:#e9f4f1;border:1px solid #d5e6e1;display:grid;place-items:center;overflow:hidden;color:#178b8b;font-weight:700;}
.company-logo-preview img{width:100%;height:100%;object-fit:cover;display:block;}
.company-logo-actions{display:grid;gap:7px;min-width:0;flex:1}.company-logo-actions input[type=file]{width:100%;font-size:12px}.company-logo-actions small{color:#81908f;font-size:11px}.company-logo-actions .text-btn{justify-self:start;padding:0;}
@media(max-width:700px){.company-logo-editor{align-items:flex-start}.company-logo-preview{width:64px;height:64px;flex-basis:64px;border-radius:16px}}

/* P7.38 — Detailed in-app help center */
.help-center-trigger{height:36px;display:inline-flex;align-items:center;gap:7px;padding:0 13px;border:1px solid var(--border);border-radius:12px;background:#fff;color:var(--primary-dark);font:600 9px/1 var(--font-th);cursor:pointer;box-shadow:0 1px 2px rgba(14,57,60,.03);transition:.16s ease}.help-center-trigger:hover{border-color:#b8d8d2;background:#f8fbfa;transform:translateY(-1px)}.help-play-icon{width:17px;height:17px;display:grid;place-items:center;border-radius:50%;background:var(--primary-soft);color:var(--primary);font-size:7px;padding-left:1px}.help-center-modal{width:min(1180px,calc(100vw - 32px));height:min(820px,calc(100dvh - 32px));max-height:none;overflow:hidden;border:1px solid #dce8e5;border-radius:24px;background:#f8faf9;box-shadow:0 34px 90px rgba(14,45,48,.24)}.help-center-modal::backdrop{background:rgba(10,31,34,.34);backdrop-filter:blur(11px)}.help-center-shell{height:100%;display:grid;grid-template-columns:255px minmax(0,1fr)}.help-center-nav{display:flex;flex-direction:column;min-height:0;padding:22px 16px 18px;border-right:1px solid #e2ebe8;background:#f3f7f5}.help-center-brand{display:flex;align-items:center;gap:10px;padding:0 7px 17px}.help-center-logo{width:38px;height:38px;border-radius:12px;display:grid;place-items:center;overflow:hidden;background:#fff;border:1px solid #dbe8e4}.help-center-logo img{width:100%;height:100%;object-fit:contain}.help-center-logo.fallback:after{content:'น';font:700 16px var(--font-th);color:var(--primary)}.help-center-brand span{display:block;color:var(--primary);font:700 7px/1 var(--font-en);letter-spacing:.13em}.help-center-brand strong{display:block;margin-top:4px;color:var(--primary-dark);font-size:14px}.help-search{height:38px;display:flex;align-items:center;gap:8px;margin:0 6px 12px;padding:0 10px;border:1px solid #dce7e4;border-radius:11px;background:#fff}.help-search svg{width:16px;fill:none;stroke:#81908d;stroke-width:1.8}.help-search input{width:100%;border:0;outline:0;background:transparent;color:var(--text);font:400 9px var(--font-th)}.help-guide-nav{display:grid;gap:3px;overflow:auto;padding:1px 4px}.help-guide-nav button{width:100%;display:grid;grid-template-columns:26px minmax(0,1fr);gap:9px;align-items:center;padding:9px 10px;border:0;border-radius:11px;background:transparent;text-align:left;cursor:pointer;color:var(--text-secondary)}.help-guide-nav button>span{width:26px;height:26px;display:grid;place-items:center;border-radius:8px;background:#e9efed;color:#7d8d89;font:700 8px var(--font-en)}.help-guide-nav strong,.help-guide-nav small{display:block}.help-guide-nav strong{font-size:9.4px;color:inherit}.help-guide-nav small{margin-top:2px;color:#94a09d;font-size:7.6px}.help-guide-nav button:hover{background:#eaf3f0}.help-guide-nav button.active{background:#dff0ec;color:var(--primary-dark)}.help-guide-nav button.active>span{background:var(--primary);color:#fff}.help-guide-note{margin:auto 6px 0;padding:11px 12px;border:1px solid #dae7e3;border-radius:12px;background:#fff}.help-guide-note strong{color:var(--primary-dark);font-size:8.5px}.help-guide-note p{margin:3px 0 0;color:#7f8d8a;font-size:7.6px;line-height:1.55}.help-center-content{min-width:0;overflow:auto;background:#fff}.help-center-head{position:sticky;top:0;z-index:3;display:flex;align-items:flex-start;justify-content:space-between;gap:16px;padding:23px 28px 18px;border-bottom:1px solid #edf1f0;background:rgba(255,255,255,.94);backdrop-filter:blur(16px)}.help-center-head p{margin:0;color:var(--primary);font:700 7.5px var(--font-en);letter-spacing:.14em}.help-center-head h2{margin:3px 0 2px;color:var(--primary-dark);font-size:22px}.help-center-head span{color:#81908d;font-size:9px}.help-close-btn{width:35px;height:35px;display:grid;place-items:center;border:1px solid #dce6e3;border-radius:11px;background:#fff;cursor:pointer}.help-close-btn svg{width:17px;fill:none;stroke:#6f817d;stroke-width:1.8}.help-section{display:none;padding:25px 28px 30px}.help-section.active{display:block}.help-hero{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:22px 24px;border:1px solid #dcebe7;border-radius:18px;background:linear-gradient(135deg,#f0f8f5,#fbfdfc)}.help-eyebrow,.help-section-title>span{display:block;color:var(--primary);font:700 7px var(--font-en);letter-spacing:.14em}.help-hero h3,.help-section-title h3{margin:4px 0;color:var(--primary-dark);font-size:21px}.help-hero p,.help-section-title p{margin:0;color:#7d8b88;font-size:9px;line-height:1.6}.help-progress-orb{width:72px;height:72px;flex:0 0 auto;display:grid;place-items:center;align-content:center;border:1px solid #b9ddd5;border-radius:50%;background:#fff}.help-progress-orb b{color:var(--primary);font:700 22px/1 var(--font-en)}.help-progress-orb span{margin-top:4px;color:#8b9996;font-size:7px}.help-step-list{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:14px}.help-step-list article{display:grid;grid-template-columns:30px minmax(0,1fr);gap:10px;padding:12px 13px;border:1px solid #e5ecea;border-radius:13px;background:#fff}.help-step-list article>span{width:30px;height:30px;display:grid;place-items:center;border-radius:9px;background:#e8f4f1;color:var(--primary);font:700 9px var(--font-en)}.help-step-list strong{display:block;color:var(--primary-dark);font-size:9.5px}.help-step-list p{margin:3px 0 0;color:#7e8d89;font-size:8px;line-height:1.55}.help-step-list.compact{grid-template-columns:1fr}.help-callout,.help-warning,.help-tip{display:flex;align-items:center;gap:10px;margin-top:14px;padding:12px 14px;border-radius:13px}.help-callout{background:#edf8f4;border:1px solid #d4e9e3}.help-warning{background:#fff8eb;border:1px solid #f0dfb9}.help-tip{background:#f5f7f6;border:1px solid #e2e8e6}.help-callout strong,.help-warning strong,.help-tip strong{white-space:nowrap;color:var(--primary-dark);font-size:8.7px}.help-callout span,.help-warning span,.help-tip p{margin:0;color:#74827f;font-size:8px;line-height:1.5}.help-section-title{margin-bottom:15px}.help-card-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:9px}.help-card-grid article{padding:15px;border:1px solid #e3ebe9;border-radius:14px;background:#fff}.help-card-grid b{display:block;color:#9bb1ab;font:700 8px var(--font-en)}.help-card-grid strong{display:block;margin-top:8px;color:var(--primary-dark);font-size:10px}.help-card-grid p{margin:4px 0 0;color:#7c8b87;font-size:8.2px;line-height:1.55}.help-flow{display:flex;align-items:center;justify-content:center;gap:9px;margin:15px 0;padding:14px;border:1px solid #e1ebe8;border-radius:14px;background:#f8faf9}.help-flow span{padding:7px 10px;border-radius:9px;background:#e7f3f0;color:var(--primary-dark);font-size:8px;font-weight:600}.help-flow i{color:#9ca9a6;font-style:normal}.help-two-column{display:grid;grid-template-columns:1fr 1fr;gap:10px}.help-guide-panel{padding:17px 18px;border:1px solid #e1eae8;border-radius:15px;background:#fff}.help-guide-panel h4{margin:0 0 10px;color:var(--primary-dark);font-size:11px}.help-guide-panel ol{margin:0;padding-left:18px;color:#70807c;font-size:8.5px;line-height:1.9}.help-workflow{display:grid;grid-template-columns:1fr auto 1fr auto 1fr auto 1fr;gap:7px;align-items:stretch}.help-workflow article{padding:13px;border:1px solid #e2ebe8;border-radius:13px;background:#fff}.help-workflow article span{color:#8fa09c;font:700 7px var(--font-en);text-transform:uppercase}.help-workflow article strong{display:block;margin-top:6px;color:var(--primary-dark);font-size:9px}.help-workflow article p{margin:4px 0 0;color:#7d8c88;font-size:7.7px;line-height:1.5}.help-workflow>i{align-self:center;color:#9cacaa;font-style:normal}.help-checklist{margin-top:14px;padding:15px 17px;border:1px solid #e1ebe8;border-radius:14px;background:#f8faf9}.help-checklist h4{margin:0 0 9px;color:var(--primary-dark);font-size:10px}.help-checklist label{display:block;position:relative;padding:6px 0 6px 22px;color:#74837f;font-size:8.2px}.help-checklist label:before{content:'✓';position:absolute;left:0;top:5px;width:15px;height:15px;display:grid;place-items:center;border-radius:50%;background:#e1f2ed;color:var(--primary);font-size:8px}.help-role-table{display:grid;gap:7px}.help-role-table>div{display:grid;grid-template-columns:145px minmax(0,1fr);gap:12px;padding:11px 13px;border:1px solid #e5ecea;border-radius:11px}.help-role-table strong{color:var(--primary-dark);font-size:9px}.help-role-table span{color:#7c8a87;font-size:8.2px}.help-faq{display:grid;gap:7px}.help-faq details{border:1px solid #e1ebe8;border-radius:12px;background:#fff;overflow:hidden}.help-faq summary{padding:12px 14px;cursor:pointer;color:var(--primary-dark);font-size:9px;font-weight:600}.help-faq p{margin:0;padding:0 14px 13px;color:#758581;font-size:8.2px;line-height:1.65}.help-center-footer{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 28px 24px;padding-top:14px;border-top:1px solid #edf1f0;color:#95a19e;font-size:7.8px}.help-center-footer button{height:34px;padding:0 13px;border:0;border-radius:10px;background:var(--primary);color:#fff;font:600 8.5px var(--font-th);cursor:pointer}.help-search-empty{padding:28px;text-align:center;color:#879692;font-size:9px}
@media(max-width:820px){.help-center-trigger{width:36px;padding:0;justify-content:center}.help-center-trigger>span:last-child{display:none}.help-center-modal{width:100vw;height:100dvh;border:0;border-radius:0}.help-center-shell{grid-template-columns:1fr}.help-center-nav{display:none}.help-center-head{padding:18px 18px 15px}.help-center-head h2{font-size:20px}.help-section{padding:18px 16px 24px}.help-hero{padding:18px}.help-progress-orb{width:62px;height:62px}.help-step-list,.help-card-grid,.help-two-column{grid-template-columns:1fr}.help-workflow{grid-template-columns:1fr}.help-workflow>i{transform:rotate(90deg);justify-self:center}.help-flow{overflow:auto;justify-content:flex-start}.help-role-table>div{grid-template-columns:1fr;gap:4px}.help-center-footer{margin:0 16px 18px}.help-center-content:before{content:'หัวข้อ';display:block;position:sticky;top:77px;z-index:2;padding:8px 16px;background:#f7faf8;color:#8a9995;font-size:7px}.help-section-title h3{font-size:18px}}

/* P7.39 — direct company profile editor */
.company-profile-inline{max-width:1080px;width:100%;}
.company-profile-inline-head{margin-bottom:20px;}
.company-profile-inline-head h2{margin:4px 0 6px;}
.company-profile-inline-head p{margin:0;color:var(--muted,#7b8d8b);}
.company-profile-inline-card{background:rgba(255,255,255,.9);border:1px solid rgba(18,92,89,.12);border-radius:24px;padding:28px;box-shadow:0 18px 50px rgba(26,69,67,.06);}
.company-profile-inline-fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;}
.company-profile-inline-fields .field.full{grid-column:1/-1;}
.company-profile-inline-actions{display:flex;justify-content:flex-end;padding-top:22px;margin-top:22px;border-top:1px solid rgba(18,92,89,.1);}
@media(max-width:720px){.company-profile-inline-card{padding:20px;border-radius:20px}.company-profile-inline-fields{grid-template-columns:1fr}.company-profile-inline-fields .field.full{grid-column:auto}.company-profile-inline-actions .primary-btn{width:100%}}


/* P7.40 — Payroll-ready employee master table */
.employee-master-table-card{position:relative;overflow:auto;overscroll-behavior-x:contain;scrollbar-gutter:stable}
.employee-master-table{min-width:3300px;table-layout:auto}
.employee-master-table th,.employee-master-table td{white-space:nowrap}
.employee-master-table th{z-index:3}
.employee-master-table .employee-sticky-name{position:sticky;left:0;z-index:4;min-width:280px;background:#fff;box-shadow:8px 0 18px rgba(18,60,74,.035)}
.employee-master-table thead .employee-sticky-name{background:#FAFCFB;z-index:6}
.employee-master-table .employee-sticky-actions{position:sticky;right:0;z-index:4;min-width:250px;background:#fff;box-shadow:-8px 0 18px rgba(18,60,74,.035)}
.employee-master-table thead .employee-sticky-actions{background:#FAFCFB;z-index:6}
.employee-master-table tbody tr:hover .employee-sticky-name,.employee-master-table tbody tr:hover .employee-sticky-actions{background:#FBFCFB}
.employee-master-table td[data-label="อีเมล"]{max-width:240px;overflow:hidden;text-overflow:ellipsis}
.employee-master-table td[data-label="Work Location"]{max-width:260px;overflow:hidden;text-overflow:ellipsis}
.mono-data{font-family:var(--font-en);font-variant-numeric:tabular-nums;letter-spacing:.02em}
.salary-cell{color:var(--primary-dark);font-family:var(--font-en);font-variant-numeric:tabular-nums}
.employee-master-table-card::after{content:"เลื่อนแนวนอนเพื่อดูข้อมูล Payroll เพิ่มเติม →";position:sticky;left:14px;bottom:8px;display:block;width:max-content;margin:8px 12px 10px;padding:5px 8px;border-radius:999px;background:rgba(244,249,247,.94);color:var(--text-tertiary);font-size:8.5px;pointer-events:none}
@media(max-width:680px){
  .employee-master-table-card{overflow:auto;border:1px solid var(--border);border-radius:15px;background:#fff}
  .employee-master-table{min-width:3000px;border-collapse:separate;border-spacing:0}
  .employee-master-table thead{display:table-header-group}
  .employee-master-table tbody{display:table-row-group}
  .employee-master-table tr{display:table-row;width:auto;margin:0;border:0;border-radius:0}
  .employee-master-table td,.employee-master-table th{display:table-cell;width:auto;min-height:0;padding:11px 13px;border-bottom:1px solid #EEF2F0;text-align:left}
  .employee-master-table td::before{display:none}
  .employee-master-table .employee-sticky-name{min-width:230px}
  .employee-master-table .employee-sticky-actions{min-width:220px}
}


.document-count-btn{border:1px solid rgba(18,125,127,.14);background:#F1F8F6;color:var(--brand);border-radius:999px;padding:6px 10px;font:inherit;font-weight:600;cursor:pointer;white-space:nowrap}.document-count-btn:hover{background:#E8F4F1}.document-count-btn span{font-variant-numeric:tabular-nums}.employee-documents-modal{width:min(920px,calc(100vw - 28px));max-width:none}.employee-documents-box{width:100%;max-width:none}.employee-doc-upload-grid{display:grid;grid-template-columns:1.25fr 1fr 1fr;gap:12px;padding:18px 0}.employee-doc-upload-grid label{display:flex;flex-direction:column;gap:7px;font-size:12px;color:var(--text-secondary)}.employee-doc-upload-grid input,.employee-doc-upload-grid select{height:44px;border:1px solid var(--border);border-radius:12px;background:#fff;padding:0 12px;font:inherit;color:var(--text-primary)}.employee-doc-file-field{grid-column:1/-1}.employee-doc-file-field input{height:auto;padding:10px}.employee-doc-upload-actions{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:2px 0 18px;border-bottom:1px solid var(--border)}.employee-doc-upload-actions small{color:var(--text-tertiary)}.employee-documents-list{display:flex;flex-direction:column;gap:8px;padding-top:16px;max-height:430px;overflow:auto}.employee-document-row{display:grid;grid-template-columns:42px minmax(0,1fr) auto;gap:12px;align-items:center;padding:12px 14px;border:1px solid var(--border);border-radius:14px;background:#fff}.employee-document-icon{width:42px;height:42px;border-radius:12px;background:#EEF7F5;color:var(--brand);display:grid;place-items:center}.employee-document-icon svg{width:20px;height:20px}.employee-document-copy{min-width:0;display:flex;flex-direction:column;gap:3px}.employee-document-copy strong{font-size:13px}.employee-document-copy span,.employee-document-copy small{font-size:11px;color:var(--text-tertiary);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.employee-document-actions{display:flex;gap:10px;align-items:center}.employee-doc-loading{padding:30px;text-align:center;color:var(--text-tertiary)}
@media(max-width:700px){.employee-doc-upload-grid{grid-template-columns:1fr}.employee-doc-file-field{grid-column:auto}.employee-doc-upload-actions{align-items:stretch;flex-direction:column}.employee-document-row{grid-template-columns:38px minmax(0,1fr)}.employee-document-actions{grid-column:2;justify-content:flex-start}}


/* P7.46 · Monthly Leave Log */
.leave-monthly-report-panel{margin-top:18px;overflow:hidden}
.leave-report-head{align-items:flex-start;gap:20px}
.leave-report-controls{display:flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.leave-report-controls input[type="month"],.leave-report-controls select{height:40px;border:1px solid var(--line,#dfe8e5);border-radius:12px;background:#fff;padding:0 12px;color:var(--ink,#173f48);font:inherit}
.leave-report-controls .icon-btn{width:40px;height:40px;border:1px solid var(--line,#dfe8e5);border-radius:12px;background:#fff;font-size:24px;line-height:1;color:var(--brand,#168b8d);cursor:pointer}
.leave-report-summary{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin:16px 0}
.leave-report-summary article{border:1px solid var(--line,#dfe8e5);border-radius:16px;padding:15px 16px;background:linear-gradient(180deg,#fff,#fbfdfc)}
.leave-report-summary small{display:block;color:var(--muted,#8a9998);font-size:12px}
.leave-report-summary strong{display:inline-block;margin-top:6px;font-size:28px;line-height:1;color:var(--ink,#173f48)}
.leave-report-summary span{margin-left:5px;color:var(--muted,#8a9998);font-size:12px}
.leave-report-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:14px}
.leave-report-chart-card{border:1px solid var(--line,#dfe8e5);border-radius:16px;padding:16px;background:#fff;min-height:150px}
.mini-section-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px}.mini-section-head small{color:var(--muted,#8a9998)}
.leave-type-bars,.leave-top-people{display:grid;gap:10px}
.leave-type-bar{display:grid;grid-template-columns:minmax(100px,180px) 1fr auto;gap:10px;align-items:center}
.leave-type-bar label{font-size:13px;color:var(--ink,#173f48);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.leave-type-track{height:8px;background:#eef5f3;border-radius:99px;overflow:hidden}
.leave-type-fill{height:100%;background:var(--brand,#168b8d);border-radius:99px}
.leave-type-bar b{font-size:12px;color:var(--muted,#758684);font-weight:600}
.leave-top-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:8px 0;border-bottom:1px solid #edf2f0}.leave-top-row:last-child{border-bottom:0}
.leave-top-row .person-mini{display:flex;align-items:center;gap:9px;min-width:0}.leave-top-row .avatar-mini{width:30px;height:30px;border-radius:9px;background:#e9f5f2;display:grid;place-items:center;color:var(--brand,#168b8d);font-weight:700;flex:0 0 auto}
.leave-top-row strong{font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.leave-top-row small{display:block;color:var(--muted,#8a9998);margin-top:2px}
.leave-top-row b{font-size:13px;color:var(--brand,#168b8d);white-space:nowrap}
.leave-report-table-wrap{overflow:auto;border:1px solid var(--line,#dfe8e5);border-radius:16px;background:#fff}
.leave-report-table{width:100%;min-width:1250px;border-collapse:collapse}
.leave-report-table th,.leave-report-table td{padding:12px 14px;border-bottom:1px solid #edf2f0;text-align:left;vertical-align:top;font-size:12px}
.leave-report-table th{position:sticky;top:0;background:#f9fcfb;color:#83918f;font-weight:500;z-index:1}
.leave-report-table td strong{font-size:13px;color:var(--ink,#173f48)}.leave-report-table td small{display:block;color:var(--muted,#8a9998);margin-top:3px}
.leave-report-empty{padding:30px;text-align:center;color:var(--muted,#8a9998)}
@media(max-width:900px){
  .leave-report-head{display:block}.leave-report-controls{justify-content:flex-start;margin-top:14px}
  .leave-report-summary{grid-template-columns:1fr 1fr}.leave-report-grid{grid-template-columns:1fr}
}
@media(max-width:520px){
  .leave-report-summary{grid-template-columns:1fr 1fr}
  .leave-report-controls input[type="month"]{flex:1;min-width:130px}
  .leave-report-controls select{width:100%}
}


/* P7.47 · Dashboard Team Work Log */
.team-worklog-panel{margin:16px 0 18px;overflow:hidden}
.team-worklog-head{align-items:flex-start;gap:20px}
.team-worklog-controls{display:flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.segmented-control{display:inline-flex;gap:2px;padding:3px;border:1px solid var(--line,#dfe8e5);background:#f6faf9;border-radius:13px}
.segmented-control button{height:34px;border:0;background:transparent;border-radius:10px;padding:0 13px;color:var(--muted,#70817f);font:inherit;font-size:12px;cursor:pointer}
.segmented-control button.active{background:#fff;color:var(--brand,#168b8d);box-shadow:0 1px 4px rgba(20,62,70,.08);font-weight:600}
.team-worklog-controls input[type=date]{height:40px;border:1px solid var(--line,#dfe8e5);border-radius:12px;background:#fff;padding:0 12px;color:var(--ink,#173f48);font:inherit}
.team-worklog-controls .icon-btn{width:40px;height:40px;border:1px solid var(--line,#dfe8e5);border-radius:12px;background:#fff;font-size:24px;line-height:1;color:var(--brand,#168b8d);cursor:pointer}
.team-worklog-summary{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border:1px solid var(--line,#dfe8e5);border-radius:16px;overflow:hidden;margin:16px 0 12px;background:#fff}
.team-worklog-summary>div{padding:14px 16px;border-right:1px solid var(--line,#dfe8e5)}.team-worklog-summary>div:last-child{border-right:0}
.team-worklog-summary span{display:block;color:var(--muted,#879593);font-size:11px}.team-worklog-summary strong{display:inline-block;margin-top:5px;color:var(--ink,#173f48);font-size:25px;line-height:1}.team-worklog-summary small{margin-left:4px;color:var(--muted,#879593);font-size:11px}
.team-worklog-range{display:flex;justify-content:space-between;align-items:center;gap:12px;margin:10px 2px;color:var(--ink,#173f48);font-size:12px}.team-worklog-range span{color:var(--muted,#879593)}
.team-worklog-table-wrap{overflow:auto;border:1px solid var(--line,#dfe8e5);border-radius:16px;background:#fff;max-height:460px}
.team-worklog-table{width:100%;min-width:1060px;border-collapse:collapse}.team-worklog-table th,.team-worklog-table td{padding:11px 13px;border-bottom:1px solid #edf2f0;text-align:left;vertical-align:middle;font-size:12px}.team-worklog-table th{position:sticky;top:0;z-index:2;background:#f9fcfb;color:#879593;font-weight:500}.team-worklog-table tr:last-child td{border-bottom:0}
.team-worklog-person{display:flex;align-items:center;gap:9px}.team-worklog-avatar{width:30px;height:30px;border-radius:9px;background:#eaf5f2;color:var(--brand,#168b8d);display:grid;place-items:center;font-weight:700;flex:0 0 auto}.team-worklog-person strong{display:block;color:var(--ink,#173f48);font-size:12px}.team-worklog-person small,.team-worklog-cell small{display:block;color:var(--muted,#879593);margin-top:2px}
.worklog-time{font-variant-numeric:tabular-nums;color:var(--ink,#173f48);font-weight:600}.worklog-late{color:#b47719}.worklog-leave{display:inline-flex;align-items:center;border-radius:99px;padding:5px 8px;background:#edf7f5;color:var(--brand,#168b8d);font-size:11px}.worklog-status{display:inline-flex;align-items:center;border-radius:99px;padding:5px 8px;font-size:11px;background:#f1f4f3;color:#73817f}.worklog-status.ok{background:#eaf7ef;color:#27835a}.worklog-status.warn{background:#fff5e4;color:#a96d10}.worklog-status.leave{background:#edf5ff;color:#4276c9}.worklog-status.danger{background:#fff0ee;color:#c5574d}.worklog-status.future{background:#f3f5f4;color:#8a9694}
@media(max-width:900px){.team-worklog-head{display:block}.team-worklog-controls{justify-content:flex-start;margin-top:14px}.team-worklog-summary{grid-template-columns:1fr 1fr}.team-worklog-summary>div:nth-child(2){border-right:0}.team-worklog-summary>div:nth-child(-n+2){border-bottom:1px solid var(--line,#dfe8e5)}}
@media(max-width:520px){.team-worklog-controls{display:grid;grid-template-columns:auto 1fr auto;gap:7px}.team-worklog-controls .segmented-control{grid-column:1/-1;width:100%}.team-worklog-controls .segmented-control button{flex:1}.team-worklog-controls input[type=date]{width:100%;min-width:0}.team-worklog-summary strong{font-size:22px}}


/* P7.48 · Team Work Log month + custom range */
.team-worklog-date-controls{display:flex;align-items:center;gap:8px}
.team-worklog-controls input[type=month],.team-worklog-custom-range input[type=date]{height:40px;border:1px solid var(--line,#dfe8e5);border-radius:12px;background:#fff;padding:0 12px;color:var(--ink,#173f48);font:inherit}
.team-worklog-month{min-width:150px}
.team-worklog-custom-range{display:flex;align-items:flex-end;gap:8px;flex-wrap:wrap}
.team-worklog-custom-range[hidden],.team-worklog-month[hidden],.team-worklog-date-controls[hidden]{display:none!important}
.team-worklog-custom-range label{display:grid;gap:4px}
.team-worklog-custom-range label span{font-size:10px;color:var(--muted,#879593);padding-left:3px}
.team-worklog-custom-range .range-separator{height:40px;display:grid;place-items:center;color:var(--muted,#879593)}
.compact-btn{height:40px;padding:0 14px;border-radius:12px}
@media(max-width:760px){.team-worklog-custom-range{width:100%;display:grid;grid-template-columns:1fr auto 1fr}.team-worklog-custom-range .compact-btn{grid-column:1/-1;width:100%}.team-worklog-month{width:100%}}

/* P7.49 · Employee x Date attendance matrix */
.team-worklog-matrix-wrap{overflow:auto;border:1px solid var(--line,#dfe8e5);border-radius:16px;background:#fff;max-height:560px;overscroll-behavior:contain}
.team-worklog-matrix{border-collapse:separate;border-spacing:0;width:max-content;min-width:100%}
.team-worklog-matrix th,.team-worklog-matrix td{border-right:1px solid #edf2f0;border-bottom:1px solid #edf2f0;padding:0;vertical-align:top;background:#fff}
.team-worklog-matrix tr:last-child td{border-bottom:0}.team-worklog-matrix th:last-child,.team-worklog-matrix td:last-child{border-right:0}
.team-worklog-matrix thead th{position:sticky;top:0;z-index:5;background:rgba(249,252,251,.96);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.team-worklog-matrix .worklog-person-col{position:sticky;left:0;z-index:4;width:245px;min-width:245px;max-width:245px;padding:13px 14px;background:#fff;box-shadow:1px 0 0 #edf2f0}
.team-worklog-matrix thead .worklog-person-col{z-index:7;background:#f9fcfb;text-align:left;font-size:12px;color:#7f908e;font-weight:600}
.team-worklog-matrix .worklog-date-col{width:132px;min-width:132px;max-width:132px}
.team-worklog-matrix thead .worklog-date-col{padding:10px 9px;text-align:center;color:#173f48}
.team-worklog-matrix thead .worklog-date-col strong{display:block;font-size:12px;font-weight:600;white-space:nowrap}
.team-worklog-matrix thead .worklog-date-col small{display:block;margin-top:3px;font-size:10px;color:#93a19f;font-weight:400}
.team-worklog-matrix .team-worklog-person{align-items:flex-start}.team-worklog-matrix .team-worklog-person strong{display:block;font-size:12px;line-height:1.35}.team-worklog-matrix .team-worklog-person small{display:block;margin-top:2px;font-size:10px;color:#95a09f}.team-worklog-matrix .worklog-role{margin-top:6px!important;color:#6f807e!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.worklog-day-card{min-height:76px;padding:10px 10px;display:flex;flex-direction:column;justify-content:center;gap:5px}
.worklog-day-card.empty,.worklog-day-card.future,.worklog-day-card.missing{align-items:center;text-align:center;color:#9aa7a5}.worklog-day-card.missing{background:#fffafa}.worklog-day-card.future{background:#fbfcfc}
.worklog-line{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:10px;color:#8c9997}.worklog-line strong{font-size:12px;color:#173f48;font-weight:650}.worklog-line strong.late{color:#b87919}
.worklog-note{font-size:9px;color:#8e9b99}.late-note{color:#b87919}
.worklog-leave-note{margin-top:1px;padding:4px 6px;border-radius:8px;background:#edf7f4;color:#168b8d;font-size:9px;line-height:1.25;font-weight:600}
.worklog-day-card.has-leave{background:#fcfefd}
@media(max-width:700px){.team-worklog-matrix .worklog-person-col{width:190px;min-width:190px;max-width:190px}.team-worklog-matrix .worklog-date-col{width:118px;min-width:118px;max-width:118px}.worklog-day-card{min-height:72px;padding:9px 8px}}


/* P7.50 · Payroll Board */
.payroll-workspace{display:grid;grid-template-columns:260px minmax(0,1fr);gap:14px;align-items:start}.payroll-period-panel{position:sticky;top:82px;max-height:calc(100vh - 110px);overflow:auto}.payroll-detail-panel{min-width:0}.payroll-sheet-hint{display:flex;justify-content:space-between;gap:16px;padding:10px 12px;margin:12px 0;background:#f3f8f7;border-radius:12px;color:#6f817f;font-size:12px}.payroll-sheet-wrap{overflow:auto;border:1px solid #dfe8e5;border-radius:16px;background:#fff;max-height:62vh}.payroll-sheet{border-collapse:separate;border-spacing:0;min-width:1850px;width:100%;font-size:12px}.payroll-sheet th,.payroll-sheet td{padding:11px 12px;border-right:1px solid #edf2f0;border-bottom:1px solid #edf2f0;text-align:right;vertical-align:middle;white-space:nowrap}.payroll-sheet th{position:sticky;top:0;z-index:4;background:#f7faf9;color:#788987;font-weight:600}.payroll-sheet td small{display:block;color:#9aa7a5;font-size:10px;margin-top:3px}.payroll-sheet .sticky-col{position:sticky;left:0;z-index:3;text-align:left;background:#fff}.payroll-sheet th.sticky-col{z-index:6;background:#f7faf9}.payroll-sheet .employee-col{min-width:230px;max-width:230px}.payroll-sheet .sticky-action{position:sticky;right:0;z-index:3;background:#fff;text-align:left;min-width:125px}.payroll-sheet th.sticky-action{z-index:6;background:#f7faf9}.payroll-sheet tfoot td{position:sticky;bottom:0;background:#f8fbfa;font-weight:600;z-index:2}.payroll-sheet tfoot .sticky-col,.payroll-sheet tfoot .sticky-action{z-index:5;background:#f8fbfa}.payroll-person{display:flex;align-items:center;gap:9px}.payroll-person-avatar{width:30px;height:30px;border-radius:9px;display:grid;place-items:center;background:#e8f5f2;color:#168b8d;font-weight:700;flex:none}.payroll-person strong{display:block;color:#173f48}.payroll-person small{margin:2px 0 0}.payroll-sheet .gross-col{background:#fbf9f0}.payroll-sheet .deduct-col{background:#fff8f5}.payroll-sheet .net-col{background:#f0faf5;color:#125d46}.payroll-sheet th.gross-col{background:#f8f4e6}.payroll-sheet th.deduct-col{background:#fff2ed}.payroll-sheet th.net-col{background:#e8f7ef}.payroll-adjust-btn{border:0;border-radius:9px;background:#168b8d;color:#fff;padding:7px 10px;font:inherit;font-weight:600;cursor:pointer;margin-right:5px}.tax-plus{color:#c75a45!important}.tax-minus{color:#168b8d!important}.payroll-adjustment-log{margin-top:14px;border:1px solid #dfe8e5;border-radius:14px;background:#fff}.payroll-adjustment-log summary{cursor:pointer;padding:13px 15px;font-weight:600;color:#173f48}.payroll-adjustment-log summary span{color:#8a9998;font-weight:400;margin-left:6px}.payroll-adjustment-list{border-top:1px solid #edf2f0}.payroll-adjustment-list>div{display:grid;grid-template-columns:1fr auto auto;gap:12px;align-items:center;padding:10px 14px;border-bottom:1px solid #edf2f0}.payroll-adjustment-list>div:last-child{border-bottom:0}.payroll-adjustment-list small{display:block;color:#8a9998;margin-top:2px}.payroll-adjustment-list b{font-size:13px}.text-btn.danger{color:#d66555}@media(max-width:1100px){.payroll-workspace{grid-template-columns:1fr}.payroll-period-panel{position:relative;top:auto;max-height:none}.payroll-period-list{display:flex;gap:8px;overflow:auto}.payroll-period-row{min-width:220px}.payroll-sheet-wrap{max-height:58vh}}@media(max-width:700px){.payroll-sheet-hint{display:block}.payroll-sheet-hint span{display:block;margin:3px 0}.payroll-detail-totals{grid-template-columns:1fr 1fr!important}}


/* P7.51 · Mobile Team Work Log matrix fix */
@media (max-width: 700px) {
  .team-worklog-panel{
    padding:14px 12px;
    margin:12px 0 14px;
    border-radius:18px;
  }

  .team-worklog-head{
    display:block;
  }

  .team-worklog-controls{
    display:block;
    margin-top:12px;
  }

  .team-worklog-controls .segmented-control{
    display:grid;
    grid-template-columns:repeat(5,1fr);
    gap:4px;
    width:100%;
    padding:4px;
    border-radius:14px;
    overflow:visible;
  }

  .team-worklog-controls .segmented-control button{
    min-width:0;
    min-height:44px;
    padding:7px 3px;
    white-space:normal;
    line-height:1.15;
    font-size:11px;
    border-radius:10px;
  }

  .team-worklog-date-controls{
    display:grid;
    grid-template-columns:44px minmax(0,1fr) 44px;
    gap:7px;
    margin-top:10px;
    width:100%;
  }

  .team-worklog-date-controls .icon-btn{
    width:44px;
    height:44px;
  }

  .team-worklog-date-controls input[type=date],
  .team-worklog-month{
    width:100%;
    height:44px;
    min-width:0;
  }

  .team-worklog-custom-range{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:8px;
    width:100%;
    margin-top:10px;
  }

  .team-worklog-custom-range .range-separator{
    display:none;
  }

  .team-worklog-custom-range label{
    min-width:0;
  }

  .team-worklog-custom-range input[type=date]{
    width:100%;
    min-width:0;
  }

  .team-worklog-custom-range .compact-btn{
    grid-column:1/-1;
    width:100%;
    min-height:42px;
  }

  .team-worklog-summary{
    grid-template-columns:repeat(4,minmax(82px,1fr));
    overflow-x:auto;
    border-radius:14px;
    margin:12px 0 10px;
    scrollbar-width:none;
  }
  .team-worklog-summary::-webkit-scrollbar{display:none}
  .team-worklog-summary>div{
    min-width:82px;
    padding:11px 10px;
    border-bottom:0!important;
  }
  .team-worklog-summary>div:nth-child(2){border-right:1px solid var(--line,#dfe8e5)!important}
  .team-worklog-summary strong{font-size:20px}
  .team-worklog-summary span{font-size:10px}
  .team-worklog-summary small{font-size:9px}

  .team-worklog-range{
    margin:8px 2px;
    font-size:11px;
  }

  /* Override the generic mobile "table becomes cards" rule */
  .team-worklog-matrix{
    display:table!important;
    width:max-content!important;
    min-width:100%!important;
    border-collapse:separate!important;
    border-spacing:0!important;
  }
  .team-worklog-matrix thead{
    display:table-header-group!important;
  }
  .team-worklog-matrix tbody{
    display:table-row-group!important;
    width:auto!important;
  }
  .team-worklog-matrix tr{
    display:table-row!important;
    width:auto!important;
    margin:0!important;
    border:0!important;
    border-radius:0!important;
    background:transparent!important;
    overflow:visible!important;
  }
  .team-worklog-matrix th,
  .team-worklog-matrix td{
    display:table-cell!important;
    width:auto!important;
    min-height:0!important;
    padding:0!important;
    border-bottom:1px solid #edf2f0!important;
    text-align:left!important;
  }
  .team-worklog-matrix td::before{
    display:none!important;
    content:none!important;
  }

  .team-worklog-matrix-wrap{
    max-height:60dvh;
    margin-inline:-2px;
    border-radius:14px;
    -webkit-overflow-scrolling:touch;
    scroll-snap-type:x proximity;
  }

  .team-worklog-matrix .worklog-person-col{
    width:142px!important;
    min-width:142px!important;
    max-width:142px!important;
    padding:10px 9px!important;
    box-shadow:2px 0 8px rgba(23,63,72,.05);
  }

  .team-worklog-matrix thead .worklog-person-col{
    font-size:10px;
  }

  .team-worklog-matrix .team-worklog-person{
    gap:7px;
    align-items:flex-start;
  }

  .team-worklog-matrix .team-worklog-avatar{
    width:28px;
    height:28px;
    border-radius:8px;
    font-size:11px;
  }

  .team-worklog-matrix .team-worklog-person strong{
    font-size:11px;
    line-height:1.25;
    max-width:92px;
  }

  .team-worklog-matrix .team-worklog-person small{
    font-size:8px;
    line-height:1.25;
  }

  .team-worklog-matrix .worklog-role{
    margin-top:4px!important;
    max-width:92px;
    font-size:8px!important;
  }

  .team-worklog-matrix .worklog-date-col{
    width:108px!important;
    min-width:108px!important;
    max-width:108px!important;
    scroll-snap-align:start;
  }

  .team-worklog-matrix thead .worklog-date-col{
    padding:8px 6px!important;
    text-align:center!important;
  }

  .team-worklog-matrix thead .worklog-date-col strong{
    font-size:10px;
  }

  .team-worklog-matrix thead .worklog-date-col small{
    margin-top:2px;
    font-size:8px;
  }

  .worklog-day-card{
    min-height:66px;
    padding:8px 7px;
    gap:4px;
  }

  .worklog-line{
    gap:5px;
    font-size:8px;
  }

  .worklog-line strong{
    font-size:11px;
  }

  .worklog-note,
  .worklog-leave-note{
    font-size:8px;
  }

  .worklog-day-card.missing small,
  .worklog-day-card.future small{
    font-size:8px;
    max-width:80px;
    line-height:1.25;
  }

  .team-worklog-matrix th:first-child,
  .team-worklog-matrix td:first-child{
    position:sticky!important;
    left:0!important;
  }
}


/* P7.52 · Mobile Payroll redesign */
@media (max-width:700px){
  #view-payroll{padding-bottom:28px}
  .payroll-page-intro{
    padding-top:2px;
    display:block!important;
  }
  .payroll-page-intro .kicker{font-size:11px;letter-spacing:.16em}
  .payroll-page-intro h1{font-size:34px;line-height:1.05;margin:6px 0 8px}
  .payroll-page-intro p{font-size:13px;line-height:1.55;max-width:95%}
  .payroll-page-intro .page-actions{
    display:grid!important;
    grid-template-columns:1fr 1fr;
    gap:8px;
    margin-top:14px;
    width:100%;
  }
  .payroll-page-intro .page-actions button{
    min-height:46px;
    width:100%;
    padding:0 12px;
    font-size:12px;
    border-radius:14px;
  }
  .payroll-page-intro .page-actions button svg{width:17px;height:17px}

  .payroll-summary{
    display:grid!important;
    grid-template-columns:1fr 1fr!important;
    gap:9px;
    margin:14px 0 12px;
  }
  .payroll-summary-card{
    min-height:92px;
    padding:15px 14px;
    border-radius:18px;
  }
  .payroll-summary-card span{font-size:11px}
  .payroll-summary-card strong{font-size:22px;margin-top:9px}
  .payroll-summary-card:last-child{
    grid-column:1/-1!important;
    min-height:78px;
  }

  .payroll-workspace{
    display:block!important;
  }
  .payroll-period-panel{
    position:relative!important;
    top:auto!important;
    max-height:none!important;
    margin-bottom:12px;
    padding:15px 14px;
    border-radius:18px;
  }
  .payroll-period-panel .panel-head{margin-bottom:10px}
  .payroll-period-list{
    display:flex!important;
    overflow-x:auto;
    gap:8px;
    padding-bottom:2px;
    scroll-snap-type:x proximity;
    scrollbar-width:none;
  }
  .payroll-period-list::-webkit-scrollbar{display:none}
  .payroll-period-row{
    min-width:205px!important;
    max-width:205px;
    padding:12px;
    border-radius:14px;
    scroll-snap-align:start;
  }

  .payroll-detail-panel{
    padding:15px 12px;
    border-radius:18px;
  }
  .payroll-detail-empty{
    min-height:210px;
    padding:18px 8px;
  }
  .payroll-detail-empty h3{font-size:17px}
  .payroll-detail-empty p{font-size:11px;max-width:280px}

  .embedded-head{
    text-align:left;
  }
  .salary-setup-list{gap:8px}
  .salary-setup-row{
    grid-template-columns:minmax(0,1fr) auto!important;
    padding:12px 13px;
    border-radius:14px;
  }
  .salary-setup-row strong{font-size:12px;line-height:1.3}
  .salary-setup-row small,.salary-setup-row em{font-size:9px}
  .salary-setup-row b{font-size:12px}

  .payroll-detail-head{
    display:block!important;
    margin-bottom:12px;
  }
  .payroll-detail-head h2{font-size:23px}
  .payroll-status-line{flex-wrap:wrap}
  .payroll-detail-head .page-actions{
    display:grid!important;
    grid-template-columns:1fr 1fr;
    gap:7px;
    margin-top:12px;
  }
  .payroll-detail-head .page-actions button{
    width:100%;
    min-height:42px;
    border-radius:12px;
    font-size:10px!important;
    padding:0 8px;
  }

  .payroll-detail-totals{
    display:grid!important;
    grid-template-columns:1fr 1fr!important;
    gap:0;
    border-radius:15px;
  }
  .payroll-detail-totals>div{
    min-width:0;
    padding:13px;
  }
  .payroll-detail-totals>div:nth-child(odd){border-left:0!important}
  .payroll-detail-totals>div:nth-child(n+3){border-top:1px solid var(--border)}
  .payroll-detail-totals span{font-size:9px}
  .payroll-detail-totals strong{font-size:15px}

  .payroll-sheet-hint{
    padding:9px 10px;
    border-radius:12px;
    font-size:9px;
  }
  .payroll-sheet-hint span+span{display:none}

  /* keep spreadsheet behavior on mobile */
  .payroll-sheet-wrap{
    max-height:62dvh!important;
    border-radius:14px;
    -webkit-overflow-scrolling:touch;
  }
  .payroll-sheet{
    min-width:1620px!important;
    font-size:10px;
  }
  .payroll-sheet th,.payroll-sheet td{
    padding:9px 9px;
    font-size:9px;
  }
  .payroll-sheet .employee-col{
    min-width:154px!important;
    max-width:154px!important;
  }
  .payroll-sheet .sticky-action{min-width:92px!important}
  .payroll-person{gap:6px}
  .payroll-person-avatar{width:27px;height:27px;border-radius:8px}
  .payroll-person strong{font-size:10px;white-space:normal;line-height:1.2}
  .payroll-person small{font-size:8px}
  .payroll-adjust-btn{padding:6px 8px;font-size:9px}

  .payroll-adjustment-log summary{font-size:11px}
  .payroll-adjustment-list>div{
    grid-template-columns:1fr auto;
    gap:8px;
    padding:10px;
  }
  .payroll-adjustment-list>div button{grid-column:1/-1;justify-self:end}
  .payroll-footnote{font-size:8px}

  .payroll-auto-slip-toggle{
    padding:12px;
    border:1px solid #d6e9e3;
    border-radius:13px;
    background:#f4faf8;
  }
}


/* P7.54 · Mobile Employee Master — readable card layout */
@media (max-width: 700px) {
  .employee-master-table-card{
    overflow:visible!important;
    border:0!important;
    background:transparent!important;
    border-radius:0!important;
    box-shadow:none!important;
  }

  .employee-master-table-card::after{
    display:none!important;
    content:none!important;
  }

  .employee-master-table{
    display:block!important;
    min-width:0!important;
    width:100%!important;
    border:0!important;
  }

  .employee-master-table thead{
    display:none!important;
  }

  .employee-master-table tbody{
    display:grid!important;
    width:100%!important;
    gap:12px;
  }

  .employee-master-table tr{
    display:block!important;
    width:100%!important;
    margin:0!important;
    overflow:hidden!important;
    border:1px solid var(--border,#dfe8e5)!important;
    border-radius:18px!important;
    background:#fff!important;
    box-shadow:0 1px 0 rgba(16,54,61,.02)!important;
  }

  .employee-master-table td{
    position:static!important;
    display:grid!important;
    grid-template-columns:112px minmax(0,1fr)!important;
    align-items:start!important;
    gap:10px!important;
    width:100%!important;
    min-width:0!important;
    max-width:none!important;
    min-height:0!important;
    padding:10px 14px!important;
    white-space:normal!important;
    overflow:visible!important;
    text-overflow:clip!important;
    border:0!important;
    border-bottom:1px solid #edf2f0!important;
    background:#fff!important;
    box-shadow:none!important;
    text-align:right!important;
    font-size:12px!important;
    line-height:1.35!important;
  }

  .employee-master-table td:last-child{
    border-bottom:0!important;
  }

  .employee-master-table td::before{
    display:block!important;
    content:attr(data-label)!important;
    color:var(--text-tertiary,#8a9998)!important;
    font-size:10px!important;
    font-weight:500!important;
    text-align:left!important;
    letter-spacing:0!important;
  }

  .employee-master-table .employee-sticky-name{
    display:block!important;
    padding:14px!important;
    border-bottom:1px solid #e6eeeb!important;
    background:linear-gradient(180deg,#fff,#fbfdfc)!important;
  }

  .employee-master-table .employee-sticky-name::before{
    display:none!important;
    content:none!important;
  }

  .employee-master-table .employee-sticky-name .person{
    display:flex!important;
    align-items:center!important;
    gap:11px!important;
    text-align:left!important;
  }

  .employee-master-table .employee-sticky-name .avatar{
    width:46px!important;
    height:46px!important;
    min-width:46px!important;
    border-radius:14px!important;
  }

  .employee-master-table .employee-sticky-name .person strong{
    display:block!important;
    font-size:15px!important;
    line-height:1.25!important;
    color:var(--text-primary,#173f48)!important;
  }

  .employee-master-table .employee-sticky-name .person small{
    display:block!important;
    margin-top:3px!important;
    font-size:10px!important;
  }

  .employee-master-table .employee-sticky-name .people-status{
    display:inline-flex!important;
    margin-top:7px!important;
  }

  .employee-master-table td[data-label="อีเมล"],
  .employee-master-table td[data-label="Work Location"]{
    max-width:none!important;
    overflow-wrap:anywhere!important;
    word-break:break-word!important;
  }

  .employee-master-table td[data-label="เงินเดือน"] .salary-cell{
    color:var(--brand,#168b8d)!important;
    font-size:14px!important;
  }

  .employee-master-table td[data-label="LINE"] .line-connected{
    align-items:flex-end!important;
  }

  .employee-master-table .employee-sticky-actions{
    display:block!important;
    padding:12px 14px 14px!important;
    background:#fbfdfc!important;
    text-align:left!important;
  }

  .employee-master-table .employee-sticky-actions::before{
    display:block!important;
    content:"จัดการ"!important;
    margin-bottom:9px!important;
    color:var(--text-tertiary,#8a9998)!important;
    font-size:10px!important;
    font-weight:500!important;
  }

  .employee-master-table .employee-row-actions{
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:8px!important;
    width:100%!important;
  }

  .employee-master-table .employee-row-actions .text-btn{
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    min-height:42px!important;
    width:100%!important;
    padding:0 10px!important;
    margin:0!important;
    border:1px solid #dbe8e4!important;
    border-radius:12px!important;
    background:#fff!important;
    color:var(--brand,#168b8d)!important;
    font-size:12px!important;
    font-weight:600!important;
  }

  .employee-master-table .employee-row-actions .danger-text{
    grid-column:1/-1!important;
    border-color:#f0d3cd!important;
    background:#fff9f7!important;
    color:#cf5a49!important;
  }

  .employee-master-table .document-count-btn{
    justify-self:end!important;
  }

  .employee-master-table .badge,
  .employee-master-table .location-inline,
  .employee-master-table .approver-inline,
  .employee-master-table .mono-data{
    max-width:100%!important;
    white-space:normal!important;
    overflow-wrap:anywhere!important;
  }
}


/* Nakna HR P7.56 — Easier Organization Builder */
.org-manage-btn{border-color:#B9D9D1;background:#F5FBF9;color:var(--primary-dark);font-weight:700}
.org-builder-open-btn{height:36px;padding:0 14px;border-color:#A9D2C8;background:#F2FAF7;color:var(--primary-dark);font-weight:700}
.org-view-note-easy{font-size:10px}.org-view-note-easy strong{color:var(--primary-dark)}
.org-card-primary-action,.org-card-secondary-action{height:32px;padding:0 11px;border-radius:10px;font:600 8.5px/1 var(--font-th);cursor:pointer;transition:.15s}
.org-card-primary-action{border:1px solid #BCDCD4;background:#EAF6F3;color:var(--primary-dark)}
.org-card-secondary-action{border:1px solid var(--border);background:#fff;color:var(--text-secondary)}
.org-card-primary-action:hover,.org-card-secondary-action:hover{transform:translateY(-1px);box-shadow:0 5px 14px rgba(18,60,74,.08)}
.org-visual-actions{gap:7px}.org-visual-actions .org-card-primary-action,.org-visual-actions .org-card-secondary-action{flex:1;min-width:74px}
.organization-builder-modal{width:min(1080px,calc(100vw - 28px));max-width:none;padding:0;border:0;border-radius:24px;background:#fff;box-shadow:0 28px 90px rgba(10,45,55,.22)}
.organization-builder-modal::backdrop{background:rgba(13,36,42,.32);backdrop-filter:blur(3px)}
.organization-builder-shell{display:grid;gap:14px;max-height:min(86vh,900px);padding:22px;overflow:hidden}
.organization-builder-head{margin:0}.organization-builder-head h3{font-size:22px}.organization-builder-head p{max-width:720px}
.organization-builder-help{display:flex;gap:8px;flex-wrap:wrap}.organization-builder-help span{display:inline-flex;align-items:center;gap:7px;padding:8px 11px;border-radius:999px;background:#F2F8F6;color:var(--text-secondary);font-size:9px}.organization-builder-help b{width:20px;height:20px;display:grid;place-items:center;border-radius:50%;background:var(--primary);color:#fff;font:700 8px/1 var(--font-en)}
.organization-root-dropzone{display:grid;place-items:center;min-height:54px;border:1.5px dashed #A9CDC4;border-radius:16px;background:#F9FCFB;color:#66817C;font-size:10px;font-weight:600;transition:.15s}
.organization-root-dropzone.drag-over{border-color:var(--primary);background:#EAF7F3;color:var(--primary-dark);transform:scale(1.005)}
.organization-builder-toolbar{display:flex;align-items:center;justify-content:space-between;gap:12px}.organization-builder-toolbar>div{display:grid;gap:3px}.organization-builder-toolbar strong{color:var(--primary-dark);font-size:12px}.organization-builder-toolbar small{color:var(--text-tertiary);font-size:9px}
.organization-builder-list{display:grid;gap:8px;min-height:220px;max-height:58vh;padding:2px 3px 10px;overflow:auto}
.organization-builder-row{display:grid;grid-template-columns:34px minmax(220px,1fr) minmax(210px,.8fr) 78px 58px;gap:10px;align-items:center;margin-left:calc(var(--builder-depth) * 18px);padding:11px 12px;border:1px solid #DDE8E4;border-radius:15px;background:#fff;box-shadow:0 5px 18px rgba(18,60,74,.035);transition:.15s}
.organization-builder-row:hover{border-color:#BFDAD3;box-shadow:0 8px 24px rgba(18,60,74,.06)}
.organization-builder-row.dragging{opacity:.42}.organization-builder-row.drag-over{border-color:var(--primary);background:#EFF9F6;box-shadow:0 0 0 2px rgba(22,125,127,.08)}
.organization-drag-handle{width:30px;height:36px;display:grid;place-items:center;border-radius:9px;background:#F4F8F6;color:#78918B;font-size:15px;cursor:grab;user-select:none}.organization-drag-handle:active{cursor:grabbing}
.organization-builder-info{min-width:0}.organization-builder-title{display:flex;align-items:center;gap:8px;min-width:0}.organization-builder-title strong{overflow:hidden;color:var(--primary-dark);font-size:11px;text-overflow:ellipsis;white-space:nowrap}.organization-builder-title span{flex:0 0 auto;padding:4px 7px;border-radius:999px;background:#EDF6F3;color:var(--primary);font-size:8px;font-weight:600}.organization-builder-info small{display:block;margin-top:4px;overflow:hidden;color:var(--text-tertiary);font-size:8.5px;text-overflow:ellipsis;white-space:nowrap}
.organization-parent-control{display:grid;gap:4px}.organization-parent-control>span{color:var(--text-tertiary);font-size:7.8px;font-weight:600}.organization-parent-control select{width:100%;height:36px;padding:0 30px 0 10px;border:1px solid var(--border);border-radius:10px;background:#FBFDFC;color:var(--text);font-size:9px}
.organization-builder-order{display:flex;gap:5px}.organization-builder-order button,.organization-builder-edit{height:34px;border:1px solid var(--border);border-radius:10px;background:#fff;color:var(--primary-dark);font-size:10px;cursor:pointer}.organization-builder-order button{width:34px}.organization-builder-edit{padding:0 9px;font-size:8.5px}
.organization-builder-order button:hover,.organization-builder-edit:hover{border-color:#A9CDC4;background:#F3FAF7}
.organization-builder-actions{padding-top:12px;border-top:1px solid var(--border)}
@media(max-width:820px){.organization-builder-modal{width:calc(100vw - 14px);border-radius:18px}.organization-builder-shell{padding:15px}.organization-builder-row{grid-template-columns:30px minmax(0,1fr) 70px;margin-left:calc(var(--builder-depth) * 8px)}.organization-parent-control{grid-column:2/-1}.organization-builder-order{grid-column:2}.organization-builder-edit{grid-column:3;grid-row:1}.organization-builder-list{max-height:64vh}.org-view-summary{gap:7px}.org-builder-open-btn{width:100%}}


/* P7.57 — Simple team directory; no org chart */
.org-simple-intro{margin-bottom:16px}
.org-directory{display:grid;gap:16px}
.org-directory-summary{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.org-directory-summary>div{display:flex;align-items:baseline;gap:7px;padding:13px 15px;border:1px solid var(--border);border-radius:14px;background:#fff}
.org-directory-summary strong{color:var(--primary-dark);font:700 20px/1 var(--font-en)}
.org-directory-summary span{color:var(--text-tertiary);font-size:10px}
.department-directory-list{display:grid;gap:14px}
.department-directory-card{overflow:hidden;border:1px solid var(--border);border-radius:18px;background:#fff;box-shadow:0 10px 30px rgba(18,60,74,.035)}
.department-directory-card.unassigned{border-style:dashed;background:#FCFDFC}
.department-directory-head{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:15px 16px;border-bottom:1px solid #EEF2F0;background:#FBFDFC}
.department-title-line{display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.department-title-line h3{margin:0;color:var(--primary-dark);font-size:15px}
.department-directory-head p{margin:5px 0 0;color:var(--text-tertiary);font-size:9.5px}
.department-directory-actions{display:flex;align-items:center;justify-content:flex-end;gap:8px;flex-wrap:wrap}
.department-directory-actions .secondary-btn{height:34px;padding:0 12px;font-size:9px}
.department-people-list{display:grid}
.dept-person-row{display:grid;grid-template-columns:minmax(220px,1.2fr) minmax(180px,.8fr) auto;gap:14px;align-items:center;padding:12px 16px;border-bottom:1px solid #F0F3F2}
.dept-person-row:last-child{border-bottom:0}
.dept-person-main{display:flex;align-items:center;gap:10px;min-width:0}
.dept-person-avatar{flex:0 0 36px;width:36px;height:36px;display:grid;place-items:center;border-radius:12px;background:var(--primary-soft);color:var(--primary-dark);font:700 11px/1 var(--font-en)}
.dept-person-copy{min-width:0}.dept-person-copy strong{display:block;overflow:hidden;color:var(--text);font-size:11px;text-overflow:ellipsis;white-space:nowrap}.dept-person-copy small{display:block;margin-top:3px;color:var(--text-tertiary);font-size:8.5px}
.dept-person-position{min-width:0}.dept-person-position span{display:block;color:var(--text-tertiary);font-size:8px}.dept-person-position strong{display:block;margin-top:3px;overflow:hidden;color:var(--primary-dark);font-size:10.5px;text-overflow:ellipsis;white-space:nowrap}
.dept-person-edit{height:32px;padding:0 11px;font-size:8.5px;white-space:nowrap}
.department-empty{display:grid;gap:4px;padding:18px 16px;color:var(--text-tertiary)}.department-empty strong{color:var(--text-secondary);font-size:10px}.department-empty span{font-size:9px}
/* retire old chart/standalone position section on this page */
.organization-position-block,.org-view-shell,.org-chart-stage,.org-tree-root{display:none!important}
@media(max-width:760px){.org-directory-summary{grid-template-columns:repeat(3,1fr)}.department-directory-head{align-items:flex-start;flex-direction:column}.department-directory-actions{width:100%;justify-content:flex-start}.dept-person-row{grid-template-columns:minmax(0,1fr) auto;gap:9px}.dept-person-position{grid-column:1/2;padding-left:46px}.dept-person-edit{grid-column:2;grid-row:1/3}.org-directory-summary strong{font-size:17px}.org-directory-summary>div{padding:11px}}


/* P7.58 — clean team directory + company-wide positions */
.org-simple-intro{margin-bottom:12px}.org-simple-intro .section-action-group{gap:8px}
.team-directory-toolbar{display:grid;grid-template-columns:minmax(260px,1.2fr) minmax(180px,.55fr) auto auto;gap:10px;align-items:center;margin-bottom:12px;padding:10px;border:1px solid var(--border);border-radius:16px;background:#fff}
.team-directory-search{height:42px;display:flex;align-items:center;gap:9px;padding:0 12px;border:1px solid #DDE7E4;border-radius:12px;background:#FAFCFB}.team-directory-search span{color:#78908B;font-size:18px}.team-directory-search input{width:100%;border:0;outline:0;background:transparent;color:var(--text);font:inherit;font-size:11px}.team-directory-filter{height:42px;padding:0 34px 0 12px;border:1px solid #DDE7E4;border-radius:12px;background:#FAFCFB;color:var(--text);font-size:10px}.team-directory-count{display:flex;align-items:baseline;gap:5px;white-space:nowrap;padding:0 6px}.team-directory-count strong{color:var(--primary-dark);font:700 15px/1 var(--font-en)}.team-directory-count span{color:var(--text-tertiary);font-size:8.5px}.team-add-employee{height:42px;white-space:nowrap}
.team-directory-groups{display:grid;gap:10px}.team-department-group{overflow:hidden;border:1px solid var(--border);border-radius:16px;background:#fff;box-shadow:0 7px 22px rgba(18,60,74,.025)}.team-department-group.is-unassigned{border-style:dashed}.team-department-header{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:11px 13px;border-bottom:1px solid #EDF2F0;background:#FAFCFB}.team-department-title{display:flex;align-items:center;gap:8px}.team-department-title strong{color:var(--primary-dark);font-size:12px}.team-department-title span{padding:3px 7px;border-radius:999px;background:#EAF5F2;color:var(--primary);font-size:8px;font-weight:600}.team-department-header small{display:block;margin-top:3px;color:var(--text-tertiary);font-size:8px}.team-department-header-actions{display:flex;gap:5px}.team-department-header-actions button{height:30px;padding:0 9px;border:1px solid var(--border);border-radius:9px;background:#fff;color:var(--primary-dark);font-size:8px;cursor:pointer}.team-department-header-actions button:hover{border-color:#B8D6CF;background:#F3FAF7}
.team-directory-columns,.team-directory-row{display:grid;grid-template-columns:minmax(230px,1.3fr) minmax(170px,.7fr) minmax(170px,.7fr) 100px 62px;gap:12px;align-items:center}.team-directory-columns{padding:7px 13px;border-bottom:1px solid #F0F3F2;color:#95A29F;font-size:7.4px;font-weight:600;letter-spacing:.04em}.team-directory-row{min-height:54px;padding:8px 13px;border-bottom:1px solid #F1F4F3}.team-directory-row:last-child{border-bottom:0}.team-person-cell{display:flex;align-items:center;gap:9px;min-width:0}.team-person-avatar{flex:none;width:34px;height:34px;display:grid;place-items:center;border-radius:11px;background:#E9F5F2;color:var(--primary-dark);font:700 10px/1 var(--font-en)}.team-person-cell>div{min-width:0}.team-person-cell strong{display:block;overflow:hidden;color:var(--text);font-size:10.5px;text-overflow:ellipsis;white-space:nowrap}.team-person-cell small{display:block;margin-top:2px;color:var(--text-tertiary);font-size:7.8px}.team-position-cell select,.team-department-cell select{width:100%;height:34px;padding:0 30px 0 9px;border:1px solid transparent;border-radius:9px;background:#F7FAF9;color:var(--primary-dark);font-size:9px;font-weight:500;cursor:pointer}.team-position-cell select:hover,.team-department-cell select:hover,.team-position-cell select:focus,.team-department-cell select:focus{border-color:#B8D8D0;background:#fff;outline:0}.team-status-cell{display:flex;justify-content:flex-start}.team-status-cell .people-status{margin:0}.icon-action-btn{height:30px;padding:0 9px;border:1px solid var(--border);border-radius:9px;background:#fff;color:var(--primary-dark);font-size:8px;cursor:pointer}.mobile-cell-label{display:none}.team-empty-row{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 13px;color:var(--text-tertiary);font-size:9px}.team-empty-row button,.team-no-result button{border:0;background:transparent;color:var(--primary);font-size:8.5px;font-weight:600;cursor:pointer}.team-no-result{display:grid;justify-items:center;gap:5px;padding:34px;border:1px dashed var(--border);border-radius:16px;background:#FCFDFC;text-align:center}.team-no-result strong{color:var(--primary-dark);font-size:12px}.team-no-result span{color:var(--text-tertiary);font-size:9px}
.position-preset-grid{display:flex;flex-wrap:wrap;gap:7px}.position-preset-grid button{height:34px;padding:0 11px;border:1px solid #DCE7E3;border-radius:10px;background:#F8FBFA;color:var(--primary-dark);font-size:9px;cursor:pointer}.position-preset-grid button:hover{border-color:#9CCBC0;background:#EEF8F5}.field-label-note{margin-left:5px;color:var(--primary);font-size:8px;font-weight:500}
#peopleProfilePosition+ .inline-create-btn{margin-top:6px}
/* old P7.57 cards are no longer rendered */
.org-directory-summary,.department-directory-list{display:none!important}
@media(max-width:1050px){.team-directory-toolbar{grid-template-columns:1fr 220px auto}.team-directory-count{grid-column:1/3}.team-add-employee{grid-column:3;grid-row:1/3}.team-directory-columns,.team-directory-row{grid-template-columns:minmax(210px,1.2fr) minmax(150px,.8fr) minmax(150px,.8fr) 80px 58px}}
@media(max-width:760px){.team-directory-toolbar{grid-template-columns:1fr}.team-directory-count,.team-add-employee{grid-column:auto;grid-row:auto}.team-directory-columns{display:none}.team-directory-row{grid-template-columns:minmax(0,1fr) auto;gap:8px;padding:11px}.team-person-cell{grid-column:1}.team-status-cell{grid-column:2;grid-row:1}.team-position-cell,.team-department-cell{grid-column:1/-1;display:grid;grid-template-columns:68px minmax(0,1fr);align-items:center;gap:7px}.mobile-cell-label{display:block;color:var(--text-tertiary);font-size:8px}.icon-action-btn{grid-column:2;grid-row:4;justify-self:end}.team-department-header{align-items:flex-start;flex-direction:column}.team-department-header-actions{width:100%}.team-directory-count{padding:4px 2px}.org-simple-intro{align-items:flex-start;flex-direction:column}.org-simple-intro .section-action-group{width:100%;justify-content:flex-start}}


/* P7.62 — Mobile-first UX + route loading */
.view{position:relative}
.view-loading-overlay{position:absolute;z-index:80;inset:0;min-height:260px;display:grid;place-items:start center;padding-top:min(22vh,180px);pointer-events:none;background:linear-gradient(180deg,rgba(248,251,250,.82),rgba(248,251,250,.42) 42%,transparent 76%);backdrop-filter:blur(1px);-webkit-backdrop-filter:blur(1px)}
.view-loading-card{display:flex;align-items:center;gap:12px;width:min(360px,calc(100vw - 34px));padding:14px 16px;border:1px solid #D7E6E2;border-radius:18px;background:rgba(255,255,255,.97);box-shadow:0 18px 48px rgba(18,60,74,.13)}
.view-loading-card>div{display:grid;gap:2px;min-width:0}.view-loading-card strong{color:var(--primary-dark);font-size:12px}.view-loading-card small{color:var(--text-tertiary);font-size:9px;line-height:1.45}.view-loading-spinner{width:30px;height:30px;flex:0 0 auto;border:3px solid #D9EBE7;border-top-color:var(--primary);border-radius:50%;animation:nakna-action-spin .72s linear infinite}

@media(max-width:680px){
  html,body{overscroll-behavior-y:none}
  main{padding:0 10px calc(88px + env(safe-area-inset-bottom))}
  .topbar{position:sticky;top:0;z-index:42;min-height:62px;margin:0 -10px;padding:8px 10px;background:rgba(248,251,250,.94);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid rgba(220,231,227,.75)}
  .page-intro{margin:10px 0 12px}.page-intro h1,.page-intro h2{font-size:20px;line-height:1.25}.page-intro p{font-size:10px;line-height:1.5}
  select,input,textarea{font-size:16px}
  .primary-btn,.secondary-btn,.icon-btn,.text-btn{font-size:12px}
  .primary-btn,.secondary-btn{min-height:44px}
  .page-intro .primary-btn,.page-intro .secondary-btn{font-size:12px!important;padding-inline:14px!important;min-width:auto!important}
  .page-intro .primary-btn svg,.page-intro .secondary-btn svg{width:16px;height:16px}
  .team-directory-toolbar{position:sticky;top:64px;z-index:30;margin:0 -2px 10px;padding:8px;border-radius:14px;box-shadow:0 8px 24px rgba(18,60,74,.06)}
  .team-directory-search,.team-directory-filter,.team-add-employee{height:44px}.team-directory-search input,.team-directory-filter{font-size:16px}
  .team-directory-count{order:4}.team-add-employee{width:100%}
  .team-department-group{border-radius:15px}.team-department-header{padding:12px}.team-department-header-actions{display:grid;grid-template-columns:1fr 1fr;gap:7px}.team-department-header-actions button{height:40px;font-size:11px}
  .team-directory-row{padding:12px;gap:10px}.team-person-avatar{width:40px;height:40px;border-radius:12px}.team-person-cell strong{font-size:13px}.team-person-cell small{font-size:10px}.team-position-cell,.team-department-cell{grid-template-columns:78px minmax(0,1fr)}.team-position-cell select,.team-department-cell select{height:42px;font-size:16px;border-color:#E2EAE7;background:#FAFCFB}.mobile-cell-label{font-size:10px}.icon-action-btn{height:38px;padding:0 12px;font-size:11px}
  dialog{width:100vw;max-width:none;max-height:94dvh;margin:auto 0 0;border:0;border-radius:24px 24px 0 0;box-shadow:0 -22px 60px rgba(18,45,50,.2)}
  dialog::backdrop{background:rgba(18,45,50,.38);backdrop-filter:blur(4px)}
  dialog form{height:min(94dvh,760px);display:grid;grid-template-rows:auto minmax(0,1fr) auto;padding:0;overflow:hidden}
  .modal-head{position:relative;z-index:2;padding:18px 18px 14px;background:#fff}.modal-head h3{font-size:20px}.modal-head p:not(.kicker){font-size:10px}.close-btn,.modal-head .icon-btn{width:40px;height:40px}
  .modal-fields{display:grid;grid-template-columns:1fr;gap:13px;margin:0;padding:16px 18px 20px;overflow:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}.field.full{grid-column:auto}.field label{font-size:11px}.field input,.field select,.field textarea{min-height:46px;font-size:16px;border-radius:12px}
  .modal-actions{position:relative;bottom:auto;margin:0;padding:12px 18px calc(12px + env(safe-area-inset-bottom));background:#fff;box-shadow:0 -8px 20px rgba(18,60,74,.06);border-top:1px solid var(--border)}.modal-actions>*{flex:1;min-height:46px;font-size:12px}
  #peopleProfileModal .location-check-grid{grid-template-columns:1fr}#peopleProfileModal .location-check{min-height:68px;padding:12px}
  .action-status{padding:18px;padding-bottom:calc(18px + env(safe-area-inset-bottom));background:rgba(18,45,50,.28);backdrop-filter:blur(4px)}
  .action-status-card{width:min(340px,calc(100vw - 28px));grid-template-columns:44px minmax(0,1fr);padding:15px 16px;border-radius:20px}.action-status-icon{width:44px;height:44px}.action-status-copy strong{font-size:14px}.action-status-copy small{font-size:10px}
  .view-loading-overlay{position:fixed;z-index:70;inset:62px 0 0;padding:18vh 14px 0;background:rgba(248,251,250,.78);backdrop-filter:blur(2px)}.view-loading-card{width:min(340px,calc(100vw - 28px));padding:14px;border-radius:18px}.view-loading-card strong{font-size:13px}.view-loading-card small{font-size:10px}
  .toast{bottom:calc(14px + env(safe-area-inset-bottom));font-size:12px;border-radius:14px}
}

/* P7.68 actual attendance location clarity */
.attendance-location.actual-location strong{color:var(--primary-dark)}.attendance-location.actual-location small{display:block;margin-top:3px;line-height:1.45}.attendance-location.actual-location a{display:inline-flex;margin-top:5px;font-weight:600}


/* Nakna P7.75 — Broadcast acknowledgement */
.broadcast-ack-option{padding:12px 14px;border:1px solid #CFE4DE;border-radius:14px;background:#F6FBF9}.broadcast-ack-option .toggle-line{align-items:flex-start}.broadcast-ack-option .toggle-line span{display:grid;gap:3px}.broadcast-ack-option strong{color:var(--primary-dark);font-size:10.5px}.broadcast-ack-option small{color:var(--text-tertiary);font-size:8.5px;line-height:1.45}.broadcast-ack-inline{display:flex;align-items:center;justify-content:flex-end;gap:6px;flex-wrap:wrap}.broadcast-ack-inline small{font-size:8px}.broadcast-ack-modal{width:min(780px,calc(100vw - 28px))}.broadcast-ack-summary{display:grid;grid-template-columns:repeat(3,1fr);overflow:hidden;margin:4px 0 16px;border:1px solid var(--border);border-radius:16px;background:#fff}.broadcast-ack-summary>div{padding:14px 16px}.broadcast-ack-summary>div+div{border-left:1px solid var(--border)}.broadcast-ack-summary span{display:block;color:var(--text-tertiary);font-size:8.5px}.broadcast-ack-summary strong{display:block;margin-top:5px;color:var(--primary-dark);font:700 20px/1 var(--font-en)}.broadcast-ack-toolbar{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:10px}.broadcast-ack-toolbar>div{display:grid;gap:2px}.broadcast-ack-toolbar strong{color:var(--primary-dark);font-size:11px}.broadcast-ack-toolbar small{color:var(--text-tertiary);font-size:8.5px}.broadcast-ack-list{max-height:50vh;overflow:auto;border:1px solid var(--border);border-radius:16px;background:#fff}.broadcast-ack-person{display:grid;grid-template-columns:36px minmax(0,1fr) auto;gap:10px;align-items:center;padding:11px 12px;border-bottom:1px solid #EDF1EF}.broadcast-ack-person:last-child{border-bottom:0}.broadcast-ack-person.done{background:#FBFEFC}.broadcast-ack-person.failed{opacity:.7}.broadcast-ack-person>div:nth-child(2) strong{display:block;color:var(--text);font-size:10px}.broadcast-ack-person>div:nth-child(2) small{display:block;margin-top:2px;color:var(--text-tertiary);font-size:8px}.broadcast-ack-person-status{display:grid;justify-items:end;gap:3px}.broadcast-ack-person-status small{color:var(--text-tertiary);font-size:7.7px}
@media(max-width:720px){.broadcast-ack-inline{justify-content:flex-start}.broadcast-ack-summary{grid-template-columns:1fr 1fr}.broadcast-ack-summary>div:nth-child(3){grid-column:1/-1;border-left:0;border-top:1px solid var(--border)}.broadcast-ack-toolbar{align-items:stretch;flex-direction:column}.broadcast-ack-toolbar .secondary-btn{width:100%}.broadcast-ack-person{grid-template-columns:34px minmax(0,1fr)}.broadcast-ack-person-status{grid-column:2;justify-items:start}}


/* P7.78 · Attendance visibility in Dashboard */
.team-worklog-help{margin:-2px 2px 10px;padding:8px 10px;border-radius:10px;background:#f5faf8;color:#728481;font-size:10px;line-height:1.5}.team-worklog-help strong{color:#335d61;font-weight:600}
button.worklog-day-card{width:100%;border:0;background:#fff;text-align:left;font:inherit;color:inherit;cursor:default}.worklog-day-card.is-clickable{cursor:pointer;transition:background .15s ease,box-shadow .15s ease}.worklog-day-card.is-clickable:hover{background:#f8fcfa;box-shadow:inset 0 0 0 1px #dcebe6}.worklog-check-state{width:max-content;max-width:100%;padding:3px 6px;border-radius:999px;font-size:8px;font-weight:650;line-height:1.2;white-space:nowrap}.worklog-check-state.inside{background:#e9f7ef;color:#278963}.worklog-check-state.late{background:#fff4df;color:#a96a0d}.worklog-check-state.outside{background:#fff0e8;color:#c2632c}.worklog-place{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#56706d;font-size:8.5px;line-height:1.25}.worklog-detail-hint{margin-top:1px;color:#9ba7a5;font-size:7.5px;line-height:1.2}
.worklog-detail-modal{width:min(560px,calc(100vw - 28px))}.worklog-detail-body{display:grid;gap:12px}.worklog-detail-status{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:13px 14px;border-radius:14px}.worklog-detail-status span{color:#6f817f;font-size:11px}.worklog-detail-status strong{font-size:13px}.worklog-detail-status.inside{background:#edf9f3;color:#237c5b}.worklog-detail-status.late{background:#fff7e8;color:#a76d14}.worklog-detail-status.outside{background:#fff1ea;color:#bd5f2c}.worklog-detail-grid{display:grid;grid-template-columns:1fr 1fr;border:1px solid var(--border);border-radius:16px;overflow:hidden}.worklog-detail-grid>div{padding:12px 13px;border-right:1px solid var(--border);border-bottom:1px solid var(--border)}.worklog-detail-grid>div:nth-child(2n){border-right:0}.worklog-detail-grid>div:nth-last-child(-n+2){border-bottom:0}.worklog-detail-grid span{display:block;color:var(--text-tertiary);font-size:9px}.worklog-detail-grid strong{display:block;margin-top:4px;color:var(--primary-dark);font-size:11px;line-height:1.45}.worklog-detail-actions{display:flex;gap:8px;flex-wrap:wrap}.worklog-map-btn{display:inline-flex;align-items:center;justify-content:center;min-height:40px;padding:0 14px;border-radius:11px;background:var(--primary);color:#fff;text-decoration:none;font-size:10px;font-weight:600}.worklog-map-btn.secondary{background:#eef6f4;color:var(--primary-dark)}
@media(max-width:700px){.team-worklog-matrix .worklog-date-col{width:132px!important;min-width:132px!important;max-width:132px!important}.worklog-day-card{min-height:92px!important}.worklog-place{font-size:8px}.worklog-detail-hint{font-size:7px}.worklog-detail-modal{width:100%;max-width:none;margin:auto 0 0;border-radius:24px 24px 0 0}.worklog-detail-modal[open]{max-height:88dvh}.worklog-detail-grid{grid-template-columns:1fr}.worklog-detail-grid>div{border-right:0!important}.worklog-detail-grid>div:nth-last-child(-n+2){border-bottom:1px solid var(--border)}.worklog-detail-grid>div:last-child{border-bottom:0}.worklog-detail-actions{display:grid;grid-template-columns:1fr}.worklog-map-btn{width:100%}}

/* Nakna P7.80 — attendance detail employee-id fix + resilient fallback */
.worklog-work-location{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#8b9795;font-size:7.5px;line-height:1.25}
.worklog-detail-btn{align-self:flex-start;margin-top:2px;padding:4px 7px;border:1px solid #cfe2dc;border-radius:8px;background:#fff;color:var(--primary);font-size:7.8px;font-weight:650;line-height:1;cursor:pointer}
.worklog-detail-btn:hover{background:#eef8f5}
.worklog-detail-loading{min-height:150px;display:flex;align-items:center;justify-content:center;gap:10px;color:var(--text-secondary);font-size:11px}
.worklog-actual-location{display:grid;gap:5px;padding:14px;border:1px solid #d9e8e3;border-radius:16px;background:#f7fbf9}
.worklog-actual-location.outside{border-color:#f0d9c9;background:#fff8f3}
.worklog-actual-location>span{color:var(--text-tertiary);font-size:9px}.worklog-actual-location>strong{color:var(--primary-dark);font-size:14px;line-height:1.35}.worklog-actual-location>small{color:var(--text-secondary);font-size:9px;line-height:1.5}.worklog-actual-location .worklog-nearby{color:var(--primary);font-weight:600}
.worklog-detail-grid small{display:block;margin-top:4px;color:var(--text-tertiary);font-size:8px;line-height:1.4}
.worklog-coordinate-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:11px 13px;border:1px dashed #d6e4df;border-radius:13px;background:#fbfdfc}.worklog-coordinate-row span{color:var(--text-tertiary);font-size:9px}.worklog-coordinate-row code{color:var(--primary-dark);font-size:10px}
.worklog-detail-error{display:grid;gap:6px;padding:16px;border:1px solid #f1d7d3;border-radius:14px;background:#fff7f6}.worklog-detail-error strong{color:#9d473f}.worklog-detail-error span{color:var(--text-secondary);font-size:10px}
@media(max-width:700px){.worklog-detail-btn{font-size:8px;padding:5px 8px}.worklog-actual-location>strong{font-size:13px}.worklog-coordinate-row{align-items:flex-start;flex-direction:column}}

.worklog-detail-fallback-note{margin-top:10px;padding:9px 11px;border:1px dashed var(--border);border-radius:12px;background:#fbfcfb;color:var(--text-tertiary);font-size:8.5px;line-height:1.5}


/* Nakna P7.81 — full check-in + check-out place/status visibility */
.worklog-line.checkout{margin-top:5px;padding-top:5px;border-top:1px dashed #e2ebe7}
.checkout-place{color:#536f72}.checkout-work{color:#879694}
.worklog-points-stack{display:grid;gap:12px}
.worklog-point-card{display:grid;gap:11px;padding:14px;border:1px solid var(--border);border-radius:18px;background:#fff}
.worklog-point-card.inside{border-color:#d7eae3;background:#fbfefd}.worklog-point-card.outside{border-color:#f0d8c9;background:#fffdfb}.worklog-point-card.empty{background:#fafbfa}
.worklog-point-head{display:flex;align-items:center;justify-content:space-between;gap:12px}.worklog-point-head>div>span{display:block;color:var(--text-tertiary);font-size:9px}.worklog-point-head>div>strong{display:block;margin-top:3px;color:var(--primary-dark);font-size:17px}
.worklog-point-badge{display:inline-flex;align-items:center;justify-content:center;max-width:58%;padding:6px 9px;border-radius:999px;font-size:8.5px;font-weight:700;line-height:1.25;text-align:center}.worklog-point-badge.inside{background:#e9f7ef;color:#278963}.worklog-point-badge.late{background:#fff4df;color:#a96a0d}.worklog-point-badge.outside{background:#fff0e8;color:#c2632c}.worklog-point-badge.neutral{background:#eef2f0;color:#75817e}
.worklog-point-place{display:grid;gap:4px;padding:12px 13px;border-radius:14px;background:#f4faf7}.worklog-point-card.outside .worklog-point-place{background:#fff6ef}.worklog-point-place>span{color:var(--text-tertiary);font-size:8.5px}.worklog-point-place>strong{color:var(--primary-dark);font-size:12px;line-height:1.45}.worklog-point-place>small{color:var(--text-secondary);font-size:8.5px;line-height:1.45}
.worklog-detail-grid.compact{grid-template-columns:1fr 1fr}.worklog-detail-grid .coordinate-text{font-family:var(--font-en);font-size:9px;word-break:break-all}.worklog-point-actions{display:flex;gap:8px}.worklog-point-actions .worklog-map-btn{width:100%}
.worklog-detail-status.neutral{background:#f2f5f3;color:#6f817f}
@media(max-width:700px){.worklog-point-card{padding:13px}.worklog-point-head{align-items:flex-start}.worklog-point-badge{max-width:62%}.worklog-detail-grid.compact{grid-template-columns:1fr}.worklog-point-place>strong{font-size:13px}.worklog-line.checkout{margin-top:6px}}


/* Nakna P7.82 — approved leave merged into attendance matrix */
.worklog-approved-leave{display:grid;gap:3px;margin:1px 0 5px;padding:7px 8px;border:1px solid #dcd6fb;border-radius:10px;background:#f6f3ff;color:#57458c;line-height:1.25}
.worklog-approved-leave strong{font-size:9.5px;color:#493a7b;white-space:normal;overflow-wrap:anywhere}
.worklog-approved-leave small{font-size:8px;color:#7869a4}
.worklog-leave-chip{width:max-content;padding:3px 6px;border-radius:999px;background:#e9e3ff;color:#644db2;font-size:7.7px;font-weight:700}
.worklog-leave-note.pending{border:1px solid #f2dfb2;background:#fff8e8;color:#9a6a18}
.worklog-missing-note{margin-top:3px;padding:4px 6px;border-radius:8px;background:#fff0ee;color:#c5574d;font-size:8.4px;font-weight:600}
.worklog-day-card.has-approved-leave{background:#fcfbff}
@media(max-width:720px){.worklog-approved-leave{padding:6px}.worklog-approved-leave strong{font-size:9px}.worklog-approved-leave small{font-size:7.8px}}


/* Nakna HR V1.0-P7.83 — Dedicated Attendance Center */
.attendance-center-view{padding-bottom:26px}
.attendance-center-intro{align-items:flex-end}
.attendance-center-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap;justify-content:flex-end}
.attendance-worklog-panel{margin-top:8px;padding:20px;border-radius:22px}
.attendance-worklog-head{padding-bottom:4px}
.attendance-summary-expanded{grid-template-columns:repeat(6,minmax(0,1fr));margin-top:14px}
.attendance-filterbar{display:grid;grid-template-columns:minmax(280px,1fr) 190px 190px auto;gap:10px;align-items:center;margin:12px 0 10px}
.attendance-filterbar .search-box{min-width:0}
.attendance-filterbar select{height:42px;border:1px solid var(--border);border-radius:12px;background:#fff;padding:0 34px 0 12px;color:var(--text);font:inherit}
.attendance-filterbar .compact-btn{height:42px;white-space:nowrap}
.attendance-legend{display:flex;gap:7px;flex-wrap:wrap;margin:0 2px 10px}
.legend-chip{display:inline-flex;align-items:center;min-height:26px;padding:5px 9px;border-radius:999px;font-size:8.5px;font-weight:600;background:#f4f7f6;color:#627371}
.legend-chip.ok{background:#ecf8f1;color:#2e9b68}.legend-chip.warn{background:#fff7e8;color:#a46c0a}.legend-chip.leave{background:#f3efff;color:#7656b8}.legend-chip.danger{background:#fff0ee;color:#c45b50}
.attendance-matrix-wrap{max-height:calc(100dvh - 390px);min-height:480px}
.attendance-worklog-panel .team-worklog-matrix .worklog-person-col{width:270px;min-width:270px;max-width:270px}
@media(max-width:1200px){.attendance-summary-expanded{grid-template-columns:repeat(3,1fr)}.attendance-filterbar{grid-template-columns:minmax(220px,1fr) 170px 170px}.attendance-filterbar .compact-btn{grid-column:1/-1;justify-self:start}}
@media(max-width:760px){.attendance-center-intro{align-items:flex-start}.attendance-center-actions{width:100%;justify-content:space-between}.attendance-worklog-panel{margin-left:-6px;margin-right:-6px;padding:14px 12px;border-radius:18px}.attendance-summary-expanded{display:flex!important;overflow:auto;grid-template-columns:none!important;scrollbar-width:none}.attendance-summary-expanded>div{min-width:128px}.attendance-filterbar{display:grid;grid-template-columns:1fr 1fr;gap:8px}.attendance-filterbar .attendance-search{grid-column:1/-1}.attendance-filterbar .compact-btn{grid-column:1/-1;width:100%;justify-content:center}.attendance-filterbar select{width:100%;min-width:0}.attendance-matrix-wrap{max-height:none;min-height:0}.attendance-worklog-panel .team-worklog-matrix .worklog-person-col{width:190px;min-width:190px;max-width:190px}}


/* Nakna P7.84 — Attendance period summary for HR */
.attendance-person-summary-panel{margin:14px 0 12px;padding:16px;border:1px solid var(--border);border-radius:18px;background:#fbfdfc}
.attendance-person-summary-head{display:flex;align-items:flex-end;justify-content:space-between;gap:18px;margin-bottom:12px}
.attendance-person-summary-head h3{margin:2px 0 0;color:var(--primary-dark);font-size:15px}.attendance-person-summary-head p:not(.kicker){margin:4px 0 0;color:var(--text-secondary);font-size:9px;line-height:1.5}
.attendance-person-summary-wrap{overflow:auto;border:1px solid var(--border);border-radius:14px;background:#fff;max-height:360px}
.attendance-person-summary-table{width:100%;min-width:1160px;border-collapse:separate;border-spacing:0}
.attendance-person-summary-table th{position:sticky;top:0;z-index:2;padding:10px 11px;border-bottom:1px solid var(--border);background:#f7fbf9;color:#6c807d;font-size:8.5px;font-weight:650;text-align:left;white-space:nowrap}
.attendance-person-summary-table td{padding:10px 11px;border-bottom:1px solid #edf2f0;color:var(--primary-dark);font-size:9px;vertical-align:middle}.attendance-person-summary-table tr:last-child td{border-bottom:0}
.attendance-person-summary-table td>strong{display:block;font-size:10px}.attendance-person-summary-table td>small{display:block;margin-top:2px;color:var(--text-tertiary);font-size:7.7px;white-space:nowrap}
.attendance-summary-person{display:flex;align-items:center;gap:9px;min-width:210px}.attendance-summary-person>span{width:32px;height:32px;display:grid;place-items:center;flex:0 0 auto;border-radius:10px;background:var(--primary-soft);color:var(--primary);font-weight:700}.attendance-summary-person strong{display:block;font-size:9.8px}.attendance-summary-person small{display:block;margin-top:2px;color:var(--text-tertiary);font-size:7.6px;white-space:nowrap}
.attendance-person-summary-table .summary-ok{color:#238360}.attendance-person-summary-table .summary-warn{color:#ae7010}.attendance-person-summary-table .summary-danger{color:#c34f47}.attendance-person-summary-table .summary-leave{color:#6b54b5}.attendance-leave-breakdown{min-width:170px;max-width:260px;color:#65588d!important;line-height:1.45}
.attendance-summary-asof{margin-top:8px;color:var(--text-tertiary);font-size:8px;line-height:1.4}
@media(max-width:760px){.attendance-person-summary-panel{padding:13px 11px;margin-left:-1px;margin-right:-1px}.attendance-person-summary-head{align-items:flex-start;flex-direction:column}.attendance-person-summary-head .compact-btn{width:100%;justify-content:center}.attendance-person-summary-wrap{max-height:420px}.attendance-person-summary-table{min-width:1080px}.attendance-person-summary-table th,.attendance-person-summary-table td{padding:9px 10px}.attendance-summary-person{min-width:190px}}


/* Nakna P7.87 — Wellness test mode + Daily Stretch */
.wellness-summary{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));overflow:hidden;margin-bottom:16px;border:1px solid var(--border);border-radius:18px;background:#fff}.wellness-summary article{position:relative;padding:16px 18px}.wellness-summary article+article:before{content:"";position:absolute;left:0;top:14px;bottom:14px;width:1px;background:var(--border)}.wellness-summary span{display:block;color:var(--text-tertiary);font:600 8px/1.2 var(--font-en);letter-spacing:.08em}.wellness-summary strong{display:block;margin-top:7px;color:var(--primary-dark);font:700 22px/1.1 var(--font-en)}.wellness-summary p{margin:4px 0 0;color:var(--text-secondary);font-size:8.5px}.wellness-grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(320px,.9fr);gap:16px;align-items:start}.wellness-team-card{grid-column:1/-1}.wellness-setting-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}.wellness-setting-grid label{display:grid;gap:7px}.wellness-setting-grid label>span{color:var(--text-secondary);font-size:9px;font-weight:600}.wellness-setting-grid label>small{color:var(--text-tertiary);font-size:7.8px}.wellness-setting-grid input,.wellness-setting-grid select{min-height:42px;border:1px solid var(--border);border-radius:12px;background:#fff;padding:0 12px;color:var(--text)}.wellness-toggle-list{display:grid;gap:10px;margin-top:16px;padding-top:15px;border-top:1px solid var(--border)}.wellness-toggle-list .toggle-line{align-items:flex-start}.wellness-toggle-list .toggle-line span{display:grid;gap:2px}.wellness-toggle-list strong{font-size:9.5px;color:var(--primary-dark)}.wellness-toggle-list small{font-size:8px;color:var(--text-tertiary);line-height:1.5}.wellness-routine-preview{display:grid}.wellness-routine-row{display:grid;grid-template-columns:30px minmax(0,1fr) auto;gap:10px;align-items:center;padding:11px 2px;border-bottom:1px solid #EEF2F0}.wellness-routine-row:last-child{border:0}.wellness-routine-row>span{width:28px;height:28px;display:grid;place-items:center;border-radius:9px;background:var(--primary-soft);color:var(--primary);font:700 9px/1 var(--font-en)}.wellness-routine-row strong{display:block;color:var(--primary-dark);font-size:10px}.wellness-routine-row small{display:block;margin-top:3px;color:var(--text-tertiary);font-size:8px;line-height:1.4}.wellness-routine-row em{font-style:normal;color:var(--text-secondary);font-size:8.5px}.wellness-team-list{display:grid}.wellness-team-row{display:grid;grid-template-columns:36px minmax(0,1fr) auto auto;gap:10px;align-items:center;padding:10px 2px;border-bottom:1px solid #EEF2F0}.wellness-team-row:last-child{border:0}.wellness-team-row strong{display:block;color:var(--text);font-size:10px}.wellness-team-row small{display:block;margin-top:2px;color:var(--text-tertiary);font-size:8px}.wellness-team-row>b{color:var(--primary);font:700 10px/1 var(--font-en)}
@media(max-width:900px){.wellness-summary{grid-template-columns:repeat(2,1fr)}.wellness-summary article:nth-child(odd):before{display:none}.wellness-grid{grid-template-columns:1fr}.wellness-team-card{grid-column:auto}.wellness-setting-grid{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.wellness-summary{grid-template-columns:1fr 1fr}.wellness-setting-grid{grid-template-columns:1fr}.wellness-team-row{grid-template-columns:34px minmax(0,1fr) auto}.wellness-team-row>b{grid-column:2}.wellness-routine-row{grid-template-columns:28px minmax(0,1fr) auto}}

/* P7.87 — Wellness safe test mode */
.wellness-live-warning{display:grid;gap:4px;margin-bottom:14px;padding:12px 14px;border:1px solid #F0DDB4;border-radius:14px;background:#FFF9EC}.wellness-live-warning strong{color:#9A640A;font-size:9.5px}.wellness-live-warning span{color:#806D49;font-size:8px;line-height:1.5}.wellness-live-actions{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:15px;padding-top:14px;border-top:1px solid var(--border)}.wellness-live-actions small{color:var(--text-tertiary);font-size:8px}.danger-outline{border-color:#E9B8B0!important;color:#A34E45!important;background:#FFF8F6!important}.wellness-test-card{border-color:#BFE5DA;background:linear-gradient(150deg,#fff 0%,#F4FBF8 100%)}.wellness-test-recipient{display:grid;grid-template-columns:42px minmax(0,1fr);gap:11px;align-items:center;padding:13px 14px;border:1px solid var(--border);border-radius:14px;background:#fff}.wellness-test-recipient.unavailable{border-color:#F1C7C0;background:#FFF8F6}.wellness-test-avatar{width:40px;height:40px;display:grid;place-items:center;border-radius:12px;background:var(--primary-soft);color:var(--primary);font-weight:800}.wellness-test-recipient strong{display:block;color:var(--primary-dark);font-size:10px}.wellness-test-recipient small{display:block;margin-top:3px;color:var(--text-tertiary);font-size:8px;line-height:1.4}.wellness-test-controls{display:grid;grid-template-columns:minmax(150px,1fr) minmax(150px,1fr) auto;gap:10px;align-items:end;margin-top:12px}.wellness-test-controls label{display:grid;gap:6px}.wellness-test-controls label>span{color:var(--text-secondary);font-size:9px;font-weight:600}.wellness-test-controls select,.wellness-test-controls input{min-height:42px;border:1px solid var(--border);border-radius:12px;background:#fff;padding:0 12px;color:var(--text)}.wellness-test-status{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:12px;padding:11px 13px;border:1px solid #CDE8DF;border-radius:13px;background:#F2FAF7;color:var(--primary-dark);font-size:8.7px}.wellness-test-status button{border:0;background:transparent;color:#A34E45;font-size:8.5px;font-weight:700;cursor:pointer}.wellness-test-note{display:grid;gap:3px;margin-top:12px;padding:12px;border-radius:13px;background:#EEF8F5}.wellness-test-note b{color:var(--primary-dark);font-size:9px}.wellness-test-note span{color:var(--text-tertiary);font-size:8px;line-height:1.5}@media(max-width:760px){.wellness-test-controls{grid-template-columns:1fr 1fr}.wellness-test-controls .primary-btn{grid-column:1/-1;width:100%}}@media(max-width:520px){.wellness-test-controls{grid-template-columns:1fr}}


/* P7.88 — direct web preview: no LINE required */
.wellness-preview-launch{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:14px;align-items:center;margin-bottom:12px;padding:14px;border:1px solid #BFE5DA;border-radius:14px;background:#fff}.wellness-preview-launch strong{display:block;color:var(--primary-dark);font-size:10.5px}.wellness-preview-launch small{display:block;margin-top:4px;color:var(--text-tertiary);font-size:8.2px;line-height:1.5}.wellness-preview-launch .secondary-btn{white-space:nowrap}.wellness-test-divider{display:flex;align-items:center;gap:10px;margin:4px 0 12px;color:var(--text-tertiary);font-size:8px;font-weight:600}.wellness-test-divider:before,.wellness-test-divider:after{content:"";height:1px;flex:1;background:var(--border)}
@media(max-width:680px){.wellness-preview-launch{grid-template-columns:1fr}.wellness-preview-launch .secondary-btn{width:100%;justify-content:center}}


/* P7.94 — missing check-in reminder controls */
.attendance-reminder-card{margin:12px 0 14px;padding:16px;border:1px solid #cfe4de;border-radius:18px;background:linear-gradient(180deg,#fbfefd 0%,#f5fbf9 100%);box-shadow:0 8px 24px rgba(18,60,74,.035)}
.attendance-reminder-head{display:grid;grid-template-columns:42px minmax(0,1fr) auto;gap:12px;align-items:start}.attendance-reminder-icon{width:42px;height:42px;display:grid;place-items:center;border-radius:13px;background:#e7f6f2;color:var(--primary);font-size:20px;font-weight:700}.attendance-reminder-copy strong{display:block;color:var(--primary-dark);font-size:12px;font-weight:700}.attendance-reminder-copy p{margin:4px 0 0;color:var(--text-secondary);font-size:9.5px;line-height:1.55}.attendance-reminder-copy small{display:block;margin-top:7px;color:var(--primary);font-size:8.8px;font-weight:600}.attendance-reminder-copy small.is-off{color:#8b9795}.attendance-reminder-copy small.saving{color:#9a6700}
.attendance-reminder-editor{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(250px,.65fr);gap:12px;margin-top:14px;padding-top:14px;border-top:1px solid #dcece7}.attendance-reminder-message-field{margin:0}.attendance-reminder-message-field textarea{min-height:92px;resize:vertical;line-height:1.55}.attendance-reminder-field-meta{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:5px}.attendance-reminder-field-meta small{color:var(--text-tertiary);font-size:8.5px}.attendance-reminder-field-meta .text-btn{padding:4px 6px;font-size:8.5px}.attendance-reminder-preview{display:grid;align-content:start;gap:4px;padding:12px 13px;border:1px solid #d9e8e3;border-radius:14px;background:#fff}.attendance-reminder-preview>span{color:var(--primary);font-size:8px;font-weight:700;letter-spacing:.08em;text-transform:uppercase}.attendance-reminder-preview>strong{color:var(--primary-dark);font-size:10.5px}.attendance-reminder-preview>p{margin:1px 0;color:var(--text-secondary);font-size:9px;line-height:1.5;white-space:pre-wrap}.attendance-reminder-preview>em{margin-top:5px;color:var(--text-tertiary);font-size:8px;font-style:normal}.attendance-reminder-actions{grid-column:1/-1;display:flex;justify-content:flex-end}.attendance-reminder-actions .primary-btn{min-width:170px}.attendance-reminder-card.is-disabled{background:#fafcfb;border-color:#e3eae7}.attendance-reminder-card.is-disabled .attendance-reminder-icon{background:#f0f3f2;color:#8b9795}
@media(max-width:760px){.attendance-reminder-card{padding:14px;border-radius:16px}.attendance-reminder-head{grid-template-columns:38px minmax(0,1fr) auto;gap:10px}.attendance-reminder-icon{width:38px;height:38px;border-radius:11px}.attendance-reminder-copy p{font-size:9px}.attendance-reminder-editor{grid-template-columns:1fr}.attendance-reminder-actions{grid-column:auto}.attendance-reminder-actions .primary-btn{width:100%;min-height:44px}.attendance-reminder-preview{order:2}.attendance-reminder-actions{order:3}}

/* P7.96 — one-click leave access from employee list */
.employee-row-actions .quick-leave-btn{border-radius:9px;padding:6px 9px;background:#eefaf6;color:#0d7f69;font-weight:650}
.employee-row-actions .quick-leave-btn:hover{background:#e1f5ee;color:#096b59;text-decoration:none}
.employee-row-actions .quick-leave-btn.is-enabled,.employee-row-actions .quick-leave-btn:disabled.is-enabled{border-color:#d5eee5!important;background:#f0faf6!important;color:#23856c!important;cursor:default;opacity:1}
@media(max-width:720px){.employee-master-table .employee-row-actions .quick-leave-btn{border-color:#cfe9df!important;background:#eefaf6!important;color:#0d7f69!important}.employee-master-table .employee-row-actions .quick-leave-btn.is-enabled{background:#f0faf6!important;color:#23856c!important}}

/* Nakna P8.01 — Document Foundation */
.employee-document-row.is-archived{opacity:.58;background:#f7f7f5}.doc-version{display:inline-flex;margin-left:6px;padding:2px 7px;border-radius:999px;background:#eef7f5;color:var(--brand);font-size:10px;font-weight:700}.employee-doc-upload-grid{grid-template-columns:repeat(3,minmax(0,1fr))}@media(max-width:760px){.employee-doc-upload-grid{grid-template-columns:1fr 1fr}.employee-doc-file-field{grid-column:1/-1}.employee-document-row{grid-template-columns:38px minmax(0,1fr)}.employee-document-actions{grid-column:2;flex-wrap:wrap}}
.document-system-toolbar{display:flex;gap:10px;flex-wrap:wrap;margin:0 0 16px}.document-row small{line-height:1.5}.document-summary{grid-template-columns:repeat(auto-fit,minmax(120px,1fr))}

/* P8.13 — document-first generator */
.document-type-cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:8px}.document-type-card{appearance:none;border:1px solid #dbe6e4;background:#fff;border-radius:18px;padding:14px;text-align:left;display:flex;gap:12px;align-items:flex-start;color:#173d49;cursor:pointer}.document-type-card:hover,.document-type-card.active{border-color:#04878a;background:#f2fbfa;box-shadow:0 0 0 2px rgba(4,135,138,.08)}.document-type-card .doc-symbol{width:38px;height:38px;border-radius:12px;background:#edf7f6;display:grid;place-items:center;font-weight:800;color:#04878a;flex:none}.document-type-card strong{display:block;font-size:14px}.document-type-card small{display:block;color:#74878a;margin-top:3px;line-height:1.35}.document-draft-preview{border:1px solid #dbe6e4;background:#fbfdfd;border-radius:18px;padding:16px}.document-draft-preview strong,.document-draft-preview small{display:block}.document-draft-preview small{margin-top:5px;color:#758789}.document-generate-dialog .modal-fields{gap:18px}@media(max-width:640px){.document-type-cards{grid-template-columns:1fr}.document-type-card{padding:12px}.document-generate-dialog{width:calc(100vw - 18px);max-height:92dvh}.document-generate-dialog .modal-actions{position:sticky;bottom:0;background:#fff;padding-top:12px}}

/* P8.24 — Document branding + dual signature */
.document-settings-dialog{width:min(780px,calc(100vw - 24px));max-height:92dvh}.document-settings-dialog form{display:flex;flex-direction:column}.document-settings-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;padding:0 2px}.document-settings-grid .full{grid-column:1/-1}.document-brand-card{border:1px solid #dce7e5;border-radius:18px;padding:14px;background:#fbfdfc;display:grid;gap:10px}.settings-label{font-size:12px;font-weight:700;color:#173c43}.document-logo-preview,.document-signature-preview{min-height:90px;border:1px dashed #cbdad7;border-radius:14px;background:#fff;display:grid;place-items:center;padding:12px;color:#7b8a8c;font-size:12px;text-align:center}.document-logo-preview img{max-width:180px;max-height:70px;object-fit:contain}.document-signature-preview img{max-width:220px;max-height:76px;object-fit:contain}.document-signature-preview span,.document-logo-preview span{display:block}.document-signature-actions{display:flex;gap:10px;align-items:center;flex-wrap:wrap}.file-button{cursor:pointer;display:inline-flex;align-items:center;justify-content:center}.document-signature-note{border-radius:16px;background:#f0f8f7;border:1px solid #d7ebe8;padding:14px}.document-signature-note strong{display:block;color:#173c43;margin-bottom:4px}.document-signature-note p{margin:0;color:#6d7f82;font-size:12px;line-height:1.65}.document-a4-preview-sheet{background:#fff;border:1px solid #dfe8e6;border-radius:18px;padding:24px;box-shadow:0 8px 28px rgba(18,60,74,.06)}.document-a4-brand{display:flex;gap:12px;align-items:center;padding-bottom:14px;border-bottom:1px solid #edf1f0}.document-a4-logo{width:52px;height:52px;border-radius:12px;background:#f3f7f6;display:grid;place-items:center;overflow:hidden;flex:none;color:#839194;font-size:10px;font-weight:700}.document-a4-logo img{width:100%;height:100%;object-fit:contain}.document-a4-brand strong{display:block;color:#173c43;font-size:13px}.document-a4-brand small{display:block;margin-top:4px;color:#7a888b;font-size:10px}.document-a4-title{text-align:center;padding:22px 0 18px}.document-a4-title h3{margin:0 0 6px;color:#173c43}.document-a4-title small{color:#879497}.document-a4-body{font-size:14px;line-height:1.85;color:#243b40;min-height:140px}.document-a4-signatures{display:grid;grid-template-columns:minmax(220px,320px);justify-content:center;gap:18px;margin-top:28px;padding-top:18px;border-top:1px solid #edf1f0}.document-a4-signatures.two{grid-template-columns:repeat(2,minmax(0,1fr))}.signature-preview-box{border:1px solid #e1e9e7;border-radius:16px;padding:14px;text-align:center;background:#fbfdfc;min-height:150px;display:flex;flex-direction:column;align-items:center;justify-content:flex-end}.signature-preview-box>span{font-size:10px;font-weight:700;color:#04878a;align-self:flex-start}.signature-preview-box img{max-width:150px;max-height:58px;object-fit:contain;margin:auto 0 4px}.signature-placeholder{margin:auto 0 8px;color:#839194;font-size:11px}.signature-preview-box b{width:100%;border-top:1px solid #aebcba;padding-top:8px;font-size:12px;color:#173c43}.signature-preview-box small{font-size:10px;color:#7b898b;margin-top:3px}.document-a4-footnote{margin-top:14px;font-size:10px;color:#7b898b;line-height:1.55}
@media(max-width:640px){.document-settings-grid{grid-template-columns:1fr}.document-settings-grid .full{grid-column:auto}.document-a4-signatures.two{grid-template-columns:1fr}.document-settings-dialog{width:calc(100vw - 16px)}.document-a4-preview-sheet{padding:16px}}

/* P8.26 — explicit HR -> employee signature workflow */
.document-hr-sign-dialog{width:min(860px,calc(100vw - 24px));max-height:92dvh}.document-hr-sign-dialog form{display:flex;flex-direction:column}.document-sign-flow{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin:0 0 16px}.document-sign-flow span{display:flex;align-items:center;gap:7px;padding:9px 10px;border:1px solid var(--border);border-radius:12px;color:var(--text-tertiary);font-size:9px;background:#fafcfa}.document-sign-flow span b{width:22px;height:22px;border-radius:999px;display:grid;place-items:center;background:#edf2f0;color:#6f7e80;font:700 9px/1 var(--font-en)}.document-sign-flow span.active{border-color:#b9ddd7;background:#f0f8f7;color:var(--primary-dark)}.document-sign-flow span.active b{background:var(--primary);color:#fff}.hr-sign-document-card{display:grid;gap:3px;padding:13px 14px;margin-bottom:14px;border:1px solid #dce8e5;border-radius:14px;background:#fbfdfc}.hr-sign-document-card small{color:var(--text-tertiary);font-size:8px}.hr-sign-document-card strong{color:var(--primary-dark);font-size:13px}.hr-sign-document-card span{color:var(--text-secondary);font-size:9px}.hr-sign-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}.hr-sign-panel{border:1px solid #dce7e5;border-radius:16px;padding:13px;background:#fbfdfc;display:flex;flex-direction:column;gap:10px;min-width:0}.hr-sign-panel-head{display:flex;justify-content:space-between;gap:10px;align-items:flex-start}.hr-sign-panel-head small{display:block;color:var(--primary);font:700 7.5px/1 var(--font-en);letter-spacing:.1em}.hr-sign-panel-head strong{display:block;margin-top:4px;color:var(--primary-dark);font-size:10px}.hr-sign-saved-preview{min-height:112px;border:1px dashed #cbdad7;border-radius:13px;background:#fff;display:grid;place-items:center;padding:10px;color:var(--text-tertiary);font-size:9px;text-align:center;overflow:hidden}.hr-sign-saved-preview img{max-width:230px;max-height:86px;object-fit:contain}.document-hr-signature-pad{display:block;width:100%;height:112px;border:1px dashed #bfcfcb;border-radius:13px;background:#fff;touch-action:none;cursor:crosshair}.hr-sign-panel>small{color:var(--text-tertiary);font-size:8px;line-height:1.5}.hr-sign-use-saved{display:flex;align-items:flex-start;gap:8px;font-size:9px;color:var(--text-secondary);line-height:1.45}.hr-sign-use-saved input{margin-top:2px;accent-color:var(--primary)}.document-sign-workflow-note{display:grid;gap:3px;margin-top:14px;padding:12px 13px;border-radius:13px;background:#eef8f6;border:1px solid #d3e8e4}.document-sign-workflow-note strong{color:var(--primary-dark);font-size:9.5px}.document-sign-workflow-note span{color:var(--text-secondary);font-size:8.5px;line-height:1.55}.document-hr-sign-dialog .inline-error{min-height:18px;margin:9px 0 0;color:#b4473d;font-size:9px}.document-row-actions{display:flex;gap:7px;align-items:center;flex-wrap:wrap;justify-content:flex-end}.document-status-pill{display:inline-flex;align-items:center;padding:3px 7px;border-radius:999px;font-size:7.5px;font-weight:700;margin-left:5px}.document-status-pill.hr{background:#eef7f5;color:#16777a}.document-status-pill.wait{background:#fff5db;color:#8b6410}.document-status-pill.done{background:#e8f6ef;color:#21704b}
@media(max-width:720px){.document-sign-flow{grid-template-columns:1fr 1fr}.hr-sign-grid{grid-template-columns:1fr}.document-hr-sign-dialog{width:calc(100vw - 14px)}.document-row-actions{grid-column:1/-1;justify-content:stretch}.document-row-actions>*{flex:1;min-width:120px;text-align:center;justify-content:center}}


/* P8.27 — LINE iOS HR signature submit usability fix */
#documentHrSignModal.document-hr-sign-dialog{
  padding:0;
  overflow:hidden;
}
#documentHrSignModal.document-hr-sign-dialog>form{
  display:flex;
  flex-direction:column;
  max-height:92dvh;
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
  padding-bottom:calc(92px + env(safe-area-inset-bottom));
  overscroll-behavior:contain;
}
#documentHrSignModal .modal-actions{
  position:fixed;
  left:50%;
  bottom:max(8px, env(safe-area-inset-bottom));
  transform:translateX(-50%);
  width:min(824px,calc(100vw - 36px));
  z-index:2147483000;
  display:flex;
  gap:10px;
  margin:0;
  padding:12px 14px calc(12px + env(safe-area-inset-bottom));
  background:rgba(255,255,255,.98);
  -webkit-backdrop-filter:blur(10px);
  backdrop-filter:blur(10px);
  border:1px solid #dbe6e4;
  border-radius:16px;
  box-shadow:0 -10px 28px rgba(18,60,74,.16);
}
#documentHrSignModal .modal-actions>*{flex:1;min-height:48px}
#documentHrSignSubmitBtn.is-disabled,
#documentHrSignSubmitBtn[aria-disabled="true"]{
  opacity:.52;
  cursor:not-allowed;
}
#documentHrSignModal .document-hr-signature-pad{
  touch-action:none;
  -webkit-user-select:none;
  user-select:none;
}
@media(max-width:720px){
  #documentHrSignModal.document-hr-sign-dialog{
    width:calc(100vw - 12px);
    max-height:94dvh;
  }
  #documentHrSignModal.document-hr-sign-dialog>form{
    max-height:94dvh;
    padding-bottom:calc(104px + env(safe-area-inset-bottom));
  }
  #documentHrSignModal .modal-actions{
    width:calc(100vw - 24px);
    bottom:max(8px, env(safe-area-inset-bottom));
  }
  #documentHrSignSubmitBtn{font-size:13px;font-weight:700}
}

/* P9.00 — Payroll Control Center */
.payroll-detail-totals-v2{grid-template-columns:repeat(5,minmax(0,1fr))}
.payroll-approval-pill{display:inline-flex;align-items:center;padding:4px 8px;border-radius:999px;font-size:8px;font-weight:700;background:#f3f5f4;color:#71807e}
.payroll-approval-pill.pending{background:#fff5dc;color:#8d6814}.payroll-approval-pill.approved{background:#eaf7f0;color:#25704d}
.payroll-grid-toolbar{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:12px 0}.payroll-grid-toolbar>div{display:flex;align-items:center;gap:10px;min-width:0}.payroll-grid-toolbar input[type=search]{width:min(330px,38vw);height:38px;border:1px solid #dbe6e4;border-radius:11px;background:#fff;padding:0 12px;color:#173f48;outline:none}.payroll-grid-toolbar input[type=search]:focus{border-color:#04878a;box-shadow:0 0 0 3px rgba(4,135,138,.08)}.payroll-grid-toolbar span{font-size:10px;color:#7d8c89;white-space:nowrap}
.payroll-control-grid{max-height:66vh}.payroll-sheet-v2{min-width:2260px}.payroll-sheet-v2 thead .payroll-group-head th{top:0;height:30px;text-align:center;font-size:9px;letter-spacing:.04em;color:#42605f}.payroll-sheet-v2 thead tr:nth-child(2) th{top:30px}.payroll-sheet-v2 .group-fixed{background:#f5f9f8}.payroll-sheet-v2 .group-variable{background:#f6f9fc}.payroll-sheet-v2 .group-deduct{background:#fff7f3}.payroll-sheet-v2 .group-result{background:#eef9f4}.payroll-sheet-v2 .payroll-group-head .sticky-col,.payroll-sheet-v2 .payroll-group-head .sticky-action{top:0}
.payroll-person-button{appearance:none;border:0;background:transparent;padding:0;text-align:left;width:100%;cursor:pointer;color:inherit}.payroll-person-button:hover strong{color:#04878a}
.payroll-grid-input{width:92px;height:32px;border:1px solid #dbe6e4;border-radius:8px;background:#fff;padding:0 8px;text-align:right;font:600 11px/1 var(--font-en);color:#173f48;outline:none}.payroll-grid-input:focus{border-color:#04878a;box-shadow:0 0 0 2px rgba(4,135,138,.1)}.payroll-grid-input.saving{opacity:.55;background:#f3f7f6}.editable-pay-cell{background:#fbfdfd!important}
.payroll-variance{display:inline-flex;padding:4px 7px;border-radius:999px;font-size:8px;font-weight:700}.payroll-variance.up{background:#e9f7ef;color:#27734f}.payroll-variance.down{background:#fff0eb;color:#b84d37}.payroll-variance.warn{background:#fff1de;color:#9a6500}.payroll-variance.neutral{background:#f0f4f3;color:#74827f}
.payroll-exception-center{margin:12px 0 14px;border:1px solid #efd8c9;border-radius:16px;background:#fffaf7;overflow:hidden}.payroll-exception-center.is-clear{display:flex;align-items:center;justify-content:space-between;padding:14px 16px;border-color:#d5e9df;background:#f6fbf8}.payroll-exception-center.is-clear h3,.payroll-exception-head h3{margin:4px 0 2px;color:#173f48;font-size:15px}.payroll-exception-center.is-clear span,.payroll-exception-head span{font-size:9px;color:#7a8886}.payroll-exception-center.is-clear>b{width:32px;height:32px;border-radius:999px;display:grid;place-items:center;background:#e3f4ea;color:#26734f}.payroll-exception-head{display:flex;align-items:flex-start;justify-content:space-between;padding:14px 16px}.payroll-exception-count{display:grid;justify-items:center}.payroll-exception-count b{font:700 19px/1 var(--font-en);color:#c25740}.payroll-exception-count small{font-size:7px;color:#a07166}.payroll-exception-list{border-top:1px solid #f0e2da}.payroll-exception{width:100%;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 16px;border:0;border-bottom:1px solid #f4e9e3;background:#fff;text-align:left;cursor:pointer}.payroll-exception:last-of-type{border-bottom:0}.payroll-exception:hover{background:#fffbf8}.payroll-exception strong{display:block;color:#173f48;font-size:10px}.payroll-exception small{display:block;margin-top:2px;color:#7c8987;font-size:8.5px}.payroll-exception em{font-style:normal;font-size:8px;padding:4px 7px;border-radius:999px;background:#fff2df;color:#946000}.payroll-exception.error em{background:#ffebe5;color:#b64531}.payroll-more-exceptions{display:block;padding:8px 16px;color:#8b9795;font-size:8px}
.payroll-timeline{margin-top:14px;border:1px solid #dfe8e5;border-radius:14px;background:#fff}.payroll-timeline summary{cursor:pointer;padding:12px 14px;color:#173f48;font-weight:700;font-size:10px}.payroll-timeline summary span{font-weight:400;color:#84918f;margin-left:5px}.payroll-timeline>div{border-top:1px solid #edf2f0}.payroll-timeline article{display:grid;grid-template-columns:140px 1fr auto;gap:10px;align-items:center;padding:9px 14px;border-bottom:1px solid #edf2f0;font-size:8.5px}.payroll-timeline article:last-child{border-bottom:0}.payroll-timeline b{color:#173f48}.payroll-timeline span,.payroll-timeline time{color:#879391}
.payroll-recurring-components{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.payroll-component-input{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px;border:1px solid #dfe8e5;border-radius:12px;background:#fbfdfc}.payroll-component-input span{font-size:9px;color:#173f48}.payroll-component-input small{display:block;margin-top:2px;color:#899693;font-size:7.5px}.payroll-component-input input{width:120px;text-align:right}
.payroll-bulk-employees{max-height:260px;overflow:auto;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px;padding:8px;border:1px solid #dfe8e5;border-radius:12px;background:#fbfdfc}.payroll-bulk-employees label{display:flex;align-items:center;gap:8px;padding:8px;border-radius:9px;background:#fff;font-size:9px;color:#173f48}.payroll-bulk-employees input{accent-color:#04878a}
.payroll-component-list{display:grid;gap:7px;max-height:250px;overflow:auto;margin-bottom:14px}.payroll-component-list article{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 12px;border:1px solid #dfe8e5;border-radius:12px;background:#fbfdfc}.payroll-component-list strong{display:block;font-size:9.5px;color:#173f48}.payroll-component-list small{display:block;margin-top:2px;font-size:7.8px;color:#879492}.payroll-component-list em{font-style:normal;font-size:8px;color:#04878a}.payroll-component-builder{padding-top:12px;border-top:1px solid #e7eeec}
.payroll-employee-detail-modal{width:min(760px,calc(100vw - 24px))}.payroll-employee-kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin-bottom:12px}.payroll-employee-kpis div{padding:11px;border:1px solid #dfe8e5;border-radius:12px;background:#fbfdfc}.payroll-employee-kpis span{display:block;color:#83908e;font-size:8px}.payroll-employee-kpis strong{display:block;margin-top:4px;color:#173f48;font:700 14px/1.1 var(--font-en)}.payroll-employee-detail-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}.payroll-employee-detail-grid section{padding:12px;border:1px solid #dfe8e5;border-radius:12px;background:#fff}.payroll-employee-detail-grid h4{margin:0 0 8px;color:#04878a;font-size:10px}.payroll-employee-detail-grid p{display:flex;justify-content:space-between;gap:12px;margin:6px 0;color:#6f7f7c;font-size:8.5px}.payroll-employee-detail-grid b{color:#173f48;text-align:right}
.secondary-btn.danger{color:#b54f3b;border-color:#efd0c8;background:#fff8f5}
@media(max-width:1100px){.payroll-detail-totals-v2{grid-template-columns:repeat(3,1fr)}.payroll-grid-toolbar{align-items:stretch;flex-direction:column}.payroll-grid-toolbar>div{justify-content:space-between}.payroll-grid-toolbar input[type=search]{width:100%;max-width:360px}.payroll-sheet-v2{min-width:2080px}}
@media(max-width:720px){.payroll-detail-totals-v2{grid-template-columns:1fr 1fr!important}.payroll-detail-totals-v2>div:last-child{grid-column:1/-1}.payroll-grid-toolbar>div{display:grid}.payroll-grid-toolbar input[type=search]{width:100%;max-width:none}.payroll-grid-toolbar span{white-space:normal}.payroll-exception-head{padding:12px}.payroll-exception{padding:9px 12px}.payroll-recurring-components,.payroll-bulk-employees,.payroll-employee-detail-grid{grid-template-columns:1fr}.payroll-employee-kpis{grid-template-columns:1fr 1fr}.payroll-timeline article{grid-template-columns:1fr auto}.payroll-timeline article span{grid-column:1/-1}.payroll-control-grid{max-height:58vh}}


/* P9.01 — Payroll UX refresh: table-first onboarding + stronger hierarchy */
#view-payroll .payroll-page-intro{align-items:flex-end;margin-bottom:18px}
#view-payroll .payroll-page-intro h1{font-size:30px;letter-spacing:-.02em}
#view-payroll .payroll-page-intro>div>p:last-child{max-width:720px;color:#728381}
#view-payroll .payroll-page-intro .page-actions{gap:8px}
#view-payroll .payroll-page-intro .primary-btn{min-width:152px;box-shadow:0 8px 18px rgba(4,135,138,.12)}
.payroll-summary{grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-bottom:18px}
.payroll-summary-card{min-height:92px;padding:17px 18px;border-radius:18px;position:relative;overflow:hidden}
.payroll-summary-card::after{content:"";position:absolute;right:-24px;bottom:-38px;width:94px;height:94px;border-radius:999px;background:rgba(4,135,138,.035)}
.payroll-summary-card span{font-size:9px;font-weight:600;letter-spacing:.01em}
.payroll-summary-card strong{font-size:22px;letter-spacing:-.02em;margin-top:7px}
.payroll-summary-card small{display:block;margin-top:7px;color:#91a09e;font-size:7.8px;position:relative;z-index:1}
.payroll-summary-card.warning{background:#fffaf2;border-color:#f0e1c8}.payroll-summary-card.info{background:#f7faf9}.payroll-summary-card.brand{background:#f6fbfa}.payroll-summary-card.success{background:#f3faf6}
.payroll-workspace{grid-template-columns:280px minmax(0,1fr);gap:16px}
.payroll-workspace.setup-mode{grid-template-columns:300px minmax(0,1fr)}
.payroll-workspace.setup-mode .payroll-period-panel{padding:18px;overflow:visible;background:linear-gradient(180deg,#fbfdfc 0%,#f7fbfa 100%)}
.payroll-workspace.setup-mode .payroll-period-panel .panel-head{padding-bottom:12px;margin-bottom:12px;border-bottom:1px solid #e8efed}
.payroll-workspace.setup-mode .payroll-detail-panel{padding:0;overflow:hidden}
.payroll-onboarding{display:grid;gap:16px}
.payroll-onboarding-progress{height:7px;border-radius:999px;background:#e7efed;overflow:hidden}
.payroll-onboarding-progress span{display:block;height:100%;border-radius:inherit;background:#04878a;transition:width .25s ease}
.payroll-onboarding-score{display:flex;align-items:baseline;justify-content:space-between;gap:10px}.payroll-onboarding-score strong{font:700 27px/1 var(--font-en);color:#173f48}.payroll-onboarding-score span{font-size:8.5px;color:#7f8e8c}
.payroll-onboarding-steps{display:grid;gap:8px}.payroll-onboarding-steps>div{display:grid;grid-template-columns:30px 1fr;gap:10px;align-items:center;padding:10px;border:1px solid #e2eae8;border-radius:12px;background:#fff}.payroll-onboarding-steps b{width:30px;height:30px;border-radius:10px;display:grid;place-items:center;background:#f0f4f3;color:#7b8987;font:700 10px/1 var(--font-en)}.payroll-onboarding-steps strong,.payroll-onboarding-steps small{display:block}.payroll-onboarding-steps strong{font-size:9px;color:#27464b}.payroll-onboarding-steps small{margin-top:2px;font-size:7.5px;color:#93a09e}.payroll-onboarding-steps>div.done{border-color:#d4e8df;background:#f7fbf9}.payroll-onboarding-steps>div.done b{background:#dff2e8;color:#2d7956}.payroll-onboarding-steps>div.done b::before{content:"✓";font-size:12px}.payroll-onboarding-steps>div.done b{font-size:0}
.payroll-onboarding-actions{display:grid;gap:8px}.payroll-onboarding-actions button{width:100%;justify-content:center;min-height:40px}
.payroll-setup-head{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;padding:20px 22px 16px;border-bottom:1px solid #e8efed;background:#fff}.payroll-setup-head h2{margin:4px 0 3px;color:#173f48;font-size:20px}.payroll-setup-head p{margin:0;color:#7d8d8a;font-size:9px}.payroll-setup-head-status{display:grid;justify-items:end;flex:none}.payroll-setup-head-status strong{font:700 19px/1 var(--font-en);color:#04878a}.payroll-setup-head-status span{margin-top:4px;color:#8b9997;font-size:7.5px}
.payroll-setup-toolbar{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 16px;background:#fbfcfc;border-bottom:1px solid #edf1f0}.payroll-setup-search{display:flex;gap:8px;min-width:0}.payroll-setup-search input,.payroll-setup-search select{height:36px;border:1px solid #dce6e4;border-radius:10px;background:#fff;color:#23474d;padding:0 11px;outline:none;font-size:9px}.payroll-setup-search input{width:min(330px,32vw)}.payroll-setup-search input:focus,.payroll-setup-search select:focus{border-color:#72b9b0;box-shadow:0 0 0 3px rgba(4,135,138,.07)}.payroll-setup-toolbar>span{font-size:8px;color:#8b9896;white-space:nowrap}
.payroll-setup-table-wrap{overflow:auto;max-height:calc(100vh - 380px);background:#fff}.payroll-setup-table{width:100%;min-width:940px;border-collapse:separate;border-spacing:0}.payroll-setup-table th{position:sticky;top:0;z-index:3;padding:11px 12px;border-bottom:1px solid #e8eeec;background:#f8faf9;text-align:left;color:#83918f;font-size:7.8px;font-weight:600;white-space:nowrap}.payroll-setup-table td{padding:12px;border-bottom:1px solid #eef2f1;color:#526b6e;font-size:8.6px;vertical-align:middle}.payroll-setup-table tbody tr:hover td{background:#fbfdfc}.payroll-setup-table td strong,.payroll-setup-table td small{display:block}.payroll-setup-table td strong{color:#27474d;font-size:9px}.payroll-setup-table td small{margin-top:3px;color:#96a19f;font-size:7.3px}.payroll-setup-table th:first-child,.payroll-setup-table td:first-child{position:sticky;left:0;z-index:2;background:#fff}.payroll-setup-table th:first-child{z-index:4;background:#f8faf9}.payroll-setup-employee button{display:flex;align-items:center;gap:9px;border:0;background:transparent;padding:0;color:inherit;text-align:left;cursor:pointer}.payroll-setup-employee button:hover strong{color:#04878a}.payroll-setup-money strong{font:700 10px/1 var(--font-en);color:#173f48}.payroll-missing-value{display:inline-flex;padding:5px 8px;border-radius:8px;background:#fff4ee;color:#b75a45;font-size:7.8px;font-weight:600}.payroll-rule-badges{display:flex;gap:5px;flex-wrap:wrap}.payroll-rule-badges span{display:inline-flex;padding:4px 6px;border-radius:999px;font-size:7px;font-weight:600}.payroll-rule-badges .on{background:#eaf6f1;color:#36775b}.payroll-rule-badges .off{background:#f1f3f2;color:#879390}.payroll-setup-status{display:inline-flex;padding:5px 8px;border-radius:999px;font-size:7.4px;font-weight:700;white-space:nowrap}.payroll-setup-status.ready{background:#e8f6ef;color:#27734f}.payroll-setup-status.warning{background:#fff2df;color:#986600}.payroll-setup-status.missing{background:#ffebe6;color:#b84c38}.payroll-setup-action{text-align:right}.payroll-setup-action .secondary-btn{height:32px;padding:0 11px;font-size:8px}
.payroll-detail-panel:not(.payroll-detail-empty){display:block!important;align-items:initial!important;justify-content:initial!important;text-align:left!important;color:inherit!important;min-height:0!important}
.payroll-detail-panel .payroll-detail-head{padding-top:2px}
@media(max-width:1100px){.payroll-workspace.setup-mode{grid-template-columns:1fr}.payroll-workspace.setup-mode .payroll-period-panel{position:relative;top:auto}.payroll-onboarding{grid-template-columns:1fr 1.3fr;align-items:start}.payroll-onboarding-progress,.payroll-onboarding-score,.payroll-onboarding-actions{grid-column:1/-1}.payroll-onboarding-steps{grid-template-columns:repeat(3,1fr)}.payroll-onboarding-steps>div{grid-template-columns:30px 1fr}.payroll-setup-table-wrap{max-height:none}}
@media(max-width:720px){.payroll-summary{grid-template-columns:1fr 1fr!important}.payroll-summary-card{min-height:84px!important;padding:13px!important}.payroll-summary-card strong{font-size:18px}.payroll-summary-card small{font-size:7px}.payroll-workspace.setup-mode{display:block!important}.payroll-workspace.setup-mode .payroll-period-panel{margin-bottom:10px}.payroll-onboarding{display:grid;grid-template-columns:1fr}.payroll-onboarding-progress,.payroll-onboarding-score,.payroll-onboarding-actions{grid-column:auto}.payroll-onboarding-steps{grid-template-columns:1fr}.payroll-setup-head{align-items:flex-start;padding:16px;display:block}.payroll-setup-head-status{justify-items:start;margin-top:12px}.payroll-setup-toolbar{align-items:stretch;flex-direction:column}.payroll-setup-search{display:grid;grid-template-columns:1fr}.payroll-setup-search input{width:100%}.payroll-setup-toolbar>span{white-space:normal}.payroll-setup-table-wrap{max-height:58vh}.payroll-setup-table{min-width:900px}}


.payroll-inline-trigger{width:100%;display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;gap:2px;padding:9px 10px;border:1px dashed transparent;border-radius:12px;background:transparent;color:inherit;text-align:left;cursor:pointer;transition:border-color .18s ease,background .18s ease,transform .18s ease}
.payroll-inline-trigger:hover{background:#f7fbfa;border-color:#b8dad5;transform:translateY(-1px)}
.payroll-inline-trigger.is-empty{background:#fffdfc}
.payroll-inline-trigger .inline-edit-hint{margin-top:4px;color:#04878a;font-size:6.8px;font-weight:700;letter-spacing:.06em;text-transform:uppercase}
.payroll-inline-trigger .payroll-missing-value{margin-bottom:2px}
.payroll-quick-edit-intro small{display:block;margin-top:4px;color:#80908d;font-size:8px;line-height:1.6}
.payroll-quick-edit-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.payroll-quick-edit-grid .full{grid-column:1/-1}
@media(max-width:760px){.payroll-quick-edit-grid{grid-template-columns:1fr}}

/* P9.03 — company-specific payroll cycle + company payroll sheet */
.payroll-cycle-settings{padding:14px;border:1px solid #dbe7e4;border-radius:14px;background:#f8fbfa}
.payroll-cycle-row{display:grid;grid-template-columns:auto minmax(120px,1fr) 92px auto minmax(120px,1fr) 92px;gap:8px;align-items:center;margin-top:8px}
.payroll-cycle-row>span{font-size:8px;color:#6f8380;font-weight:700}
.payroll-cycle-row select,.payroll-cycle-row input{height:38px;border:1px solid #dce6e4;border-radius:10px;background:#fff;padding:0 10px;color:#23474d;font-size:9px}
.payroll-cycle-settings>small{display:block;margin-top:8px;color:#04878a;font-size:8px;font-weight:600}
.payroll-period-preview{display:grid;grid-template-columns:auto 1fr;gap:4px 12px;align-items:center;padding:13px 14px;border:1px solid #d6e8e4;border-radius:13px;background:#f2faf8}
.payroll-period-preview strong{color:#173f48;font-size:9px}
.payroll-period-preview span{color:#04878a;font-size:10px;font-weight:700}
.payroll-period-preview small{grid-column:1/-1;color:#80908d;font-size:7.8px}
.payroll-period-range{display:flex;align-items:center;gap:8px;margin:5px 0 8px;color:#04878a;font-size:9px;font-weight:700}
.payroll-period-range span{display:inline-flex;padding:3px 7px;border-radius:999px;background:#edf8f6;color:#50716f;font-size:7px;font-weight:600}
.payroll-sheet-company{min-width:3250px!important}
.payroll-sheet-v2 .group-bank{background:#f6f2fb}
.payroll-salary-mode{display:inline-flex;align-items:center;padding:4px 7px;border-radius:999px;font-size:7px;font-weight:700;white-space:nowrap}
.payroll-salary-mode.full{background:#eaf6ef;color:#25704d}
.payroll-salary-mode.partial{background:#fff0ea;color:#b6533f}
.payroll-sheet-company th,.payroll-sheet-company td{white-space:nowrap}
.payroll-sheet-company td small{white-space:normal;max-width:150px}
@media(max-width:760px){
  .payroll-cycle-row{grid-template-columns:1fr 1fr}
  .payroll-cycle-row>span{grid-column:1/-1}
  .payroll-sheet-company{min-width:3100px!important}
}

.payroll-cycle-presets{display:flex;gap:6px;flex-wrap:wrap;margin-top:9px}.payroll-cycle-presets button{border:1px solid #d7e5e2;background:#fff;color:#3e6563;border-radius:999px;padding:6px 9px;font-size:7.4px;cursor:pointer}.payroll-cycle-presets button:hover{border-color:#8bc5bc;background:#eef8f6;color:#047d80}

/* P9.04 — Payroll mobile redesign */
.payroll-mobile-list{display:none}
.payroll-mobile-card{display:grid;gap:12px;padding:14px;border:1px solid #dbe8e4;border-radius:18px;background:#fff;box-shadow:0 8px 20px rgba(12,55,61,.04)}
.payroll-mobile-card+.payroll-mobile-card{margin-top:12px}
.payroll-mobile-card-head{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;align-items:start}
.payroll-mobile-card-head .payroll-person{padding:0;background:transparent;border:0}
.payroll-mobile-card-head .payroll-person strong{font-size:16px}
.payroll-mobile-card-head .payroll-person small{font-size:12px;color:#7d8c89}
.payroll-mobile-net{display:grid;justify-items:end;gap:2px;padding:10px 12px;border-radius:14px;background:#f4fbfa;border:1px solid #d5ece6}
.payroll-mobile-net span{font-size:11px;color:#6f8a86}
.payroll-mobile-net strong{font:700 18px/1.1 var(--font-en);color:#04878a}
.payroll-mobile-meta{display:flex;flex-wrap:wrap;gap:8px}
.payroll-mobile-meta span{display:inline-flex;align-items:center;padding:7px 10px;border-radius:999px;background:#f5f8f7;color:#56726f;font-size:11px}
.payroll-mobile-sections{display:grid;gap:10px}
.payroll-mobile-section{padding:12px;border:1px solid #edf3f1;border-radius:15px;background:#fcfdfd}
.payroll-mobile-section-title{margin-bottom:10px;color:#173f48;font-size:12px;font-weight:700;letter-spacing:.02em}
.payroll-mobile-pairs{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.payroll-mobile-pairs>div,.payroll-mobile-edit-grid label{display:grid;gap:4px;padding:10px;border-radius:12px;background:#fff;border:1px solid #e8f0ed;min-width:0}
.payroll-mobile-pairs .full,.payroll-mobile-edit-grid .full{grid-column:1/-1}
.payroll-mobile-pairs span,.payroll-mobile-edit-grid label>span{font-size:11px;color:#83938f}
.payroll-mobile-pairs strong{color:#173f48;font-size:15px;line-height:1.2;word-break:break-word}
.payroll-mobile-pairs strong.net{color:#04878a}
.payroll-mobile-pairs small{font-size:10px;color:#8ea09c}
.payroll-mobile-edit-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.payroll-mobile-edit-grid .payroll-grid-input{width:100%;min-width:0;height:42px;border-radius:10px;font-size:14px}
.payroll-mobile-pairs-highlight{grid-template-columns:1fr 1fr}
.payroll-mobile-pairs-highlight .payroll-variance{justify-self:start}
.payroll-mobile-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.payroll-mobile-actions .primary-btn,.payroll-mobile-actions .secondary-btn{width:100%;justify-content:center}
.payroll-mobile-actions .primary-btn.ghost{background:#eef8f7;color:#0f6570;border:1px solid #cde4df}
.payroll-page-actions-mobile{display:flex;flex-wrap:wrap;gap:8px;justify-content:flex-end}
.payroll-page-actions-mobile button{height:38px}
.payroll-grid-toolbar-mobile>button{white-space:nowrap}
.payroll-sheet-hint-mobile{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;flex-wrap:wrap}
.payroll-sheet-hint-mobile span{font-size:11px;line-height:1.55}
.payroll-mobile-list .payroll-grid-input::-webkit-outer-spin-button,.payroll-mobile-list .payroll-grid-input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.payroll-mobile-list .payroll-grid-input{appearance:textfield}

@media(max-width:720px){
  .payroll-layout{display:block}
  .payroll-period-panel{margin-bottom:12px}
  .payroll-detail-head-mobile{display:grid;gap:12px}
  .payroll-detail-head-mobile h2{font-size:28px;line-height:1.1}
  .payroll-detail-head-mobile .kicker{font-size:11px;letter-spacing:.12em}
  .payroll-page-actions-mobile{display:grid;grid-template-columns:1fr 1fr}
  .payroll-page-actions-mobile button:last-child:nth-child(odd){grid-column:1/-1}
  .payroll-detail-totals-v2{grid-template-columns:1fr!important}
  .payroll-detail-totals-v2>div+div{border-left:0!important;border-top:1px solid var(--border)}
  .payroll-grid-toolbar-mobile{display:grid;gap:10px}
  .payroll-grid-toolbar-mobile>div{display:grid;gap:8px}
  .payroll-grid-toolbar-mobile>button{width:100%;height:44px;justify-content:center}
  .payroll-grid-toolbar-mobile input[type=search]{height:46px;font-size:16px;border-radius:14px}
  .payroll-grid-toolbar-mobile span{font-size:11px;line-height:1.55}
  .payroll-sheet-hint-mobile{display:grid;padding:12px 14px;border-radius:14px}
  .payroll-mobile-list{display:block;margin-top:12px}
  .payroll-desktop-grid{display:none}
  .payroll-mobile-card{padding:14px}
  .payroll-mobile-card-head{grid-template-columns:1fr;gap:12px}
  .payroll-mobile-net{justify-items:start}
  .payroll-mobile-pairs,.payroll-mobile-edit-grid,.payroll-mobile-pairs-highlight,.payroll-mobile-actions{grid-template-columns:1fr}
  .payroll-mobile-pairs>div,.payroll-mobile-edit-grid label{padding:11px}
  .payroll-mobile-pairs strong{font-size:16px}
  .payroll-mobile-meta span{font-size:10.5px}
  .payroll-mobile-section-title{font-size:12.5px}
  .payroll-exception-center{padding:14px}
  .payroll-exception-head{display:grid;gap:10px}
  .payroll-exception-count{justify-self:start}
  .payroll-footnote{display:grid;gap:8px}
}

/* P9.09 — Dashboard Command Center */
.dashboard-command-center{padding-bottom:26px}
.dashboard-hero-v2{min-height:128px;padding:24px 28px;background:linear-gradient(135deg,#f1f8f5 0%,#f8fbfa 100%);border-color:#d6e7e2;box-shadow:0 10px 34px rgba(12,57,63,.035)}
.dashboard-hero-v2 .kicker{color:#04878a;letter-spacing:.14em}
.dashboard-hero-v2 h1{font-size:30px;letter-spacing:-.025em}
.dashboard-attention-summary{min-width:265px}
.dashboard-quick-actions{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px;margin:14px 0}
.dashboard-quick-actions button{min-width:0;display:grid;gap:3px;padding:13px 14px;border:1px solid #dce8e5;border-radius:14px;background:#fff;text-align:left;cursor:pointer;transition:.16s ease;box-shadow:0 4px 14px rgba(12,57,63,.025)}
.dashboard-quick-actions button:hover{border-color:#a9d2ca;background:#f6fbf9;transform:translateY(-1px)}
.dashboard-quick-actions span{color:#173f48;font-size:11px;font-weight:700}
.dashboard-quick-actions small{color:#899895;font-size:8.3px;line-height:1.35;white-space:normal}
.summary-strip-v2{margin:0 0 14px}
.dashboard-grid-v2{margin-top:12px}
.operations-dashboard-grid{grid-template-columns:1fr 1fr}
.dashboard-compact-panel{min-height:0!important;padding:18px}
.dashboard-compact-panel .panel-head{margin-bottom:10px}
.dashboard-compact-panel .panel-head h3{font-size:16px}
.dashboard-action-row{padding-block:9px}
.dashboard-compact-empty{display:flex;align-items:center;gap:11px;min-height:68px;padding:12px 13px;border:1px solid #dcece7;border-radius:13px;background:#f7fbf9}
.dashboard-compact-empty.neutral{background:#fafbfb;border-color:#e7ecea}
.dashboard-compact-empty-icon{width:30px;height:30px;display:grid;place-items:center;flex:0 0 auto;border-radius:50%;background:#e5f5ee;color:#2c805b;font-size:14px;font-weight:700}
.dashboard-compact-empty strong{display:block;color:#173f48;font-size:11.5px}
.dashboard-compact-empty small{display:block;margin-top:2px;color:#8a9996;font-size:8.8px;line-height:1.4}
.attendance-progress-head{display:flex;align-items:end;justify-content:space-between;gap:12px}
.attendance-progress-head>div{display:flex;align-items:baseline;gap:7px}
.attendance-progress-head strong{color:#173f48;font:700 23px/1 var(--font-en)}
.attendance-progress-head span{color:#80918e;font-size:9px}
.attendance-progress-head>b{color:#04878a;font:700 16px/1 var(--font-en)}
.attendance-progress{height:7px;margin:10px 0 12px;border-radius:999px;background:#edf3f1;overflow:hidden}
.attendance-progress span{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,#04878a,#63b9aa)}
.attendance-mini-grid{display:grid;grid-template-columns:repeat(4,1fr);overflow:hidden;border:1px solid #e3ece9;border-radius:12px;background:#fbfcfc}
.attendance-mini-grid>div{padding:10px 11px;position:relative}
.attendance-mini-grid>div+div:before{content:"";position:absolute;left:0;top:9px;bottom:9px;width:1px;background:#e7eeec}
.attendance-mini-grid span{display:block;color:#899895;font-size:8.2px}
.attendance-mini-grid strong{display:block;margin-top:3px;color:#173f48;font:700 17px/1 var(--font-en)}
.attendance-mini-grid .warn strong{color:#c56a31}
.dashboard-module-snapshot{display:grid;gap:11px}
.module-snapshot-main{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.module-snapshot-main>div{min-width:0}
.dashboard-module-label{display:block;color:#83938f;font-size:8.4px;text-transform:uppercase;letter-spacing:.07em}
.module-snapshot-main strong{display:block;margin-top:4px;color:#173f48;font-size:11.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.module-snapshot-main small{display:block;margin-top:3px;color:#8a9996;font-size:8.5px}
.module-snapshot-money{display:flex;align-items:end;justify-content:space-between;gap:12px;padding:11px 12px;border-radius:12px;background:#f4faf8}
.module-snapshot-money span{color:#768a86;font-size:9px}
.module-snapshot-money strong{color:#04878a;font:700 18px/1 var(--font-en)}
.module-stat-grid{display:grid;grid-template-columns:repeat(3,1fr);overflow:hidden;border:1px solid #e4ecea;border-radius:12px;background:#fbfcfc}
.module-stat-grid>div{padding:12px 10px;position:relative}
.module-stat-grid>div+div:before{content:"";position:absolute;left:0;top:10px;bottom:10px;width:1px;background:#e7eeec}
.module-stat-grid span{display:block;color:#879793;font-size:8.2px}
.module-stat-grid strong{display:block;margin-top:4px;color:#173f48;font:700 19px/1 var(--font-en)}
.module-stat-grid .needs-action{background:#fffaf5}
.module-stat-grid .needs-action strong{color:#c16a34}
.module-clean-note{padding:8px 10px;border-radius:10px;background:#f4faf7;color:#5c7e75;font-size:8.5px;text-align:center}
.pipeline-v2 .pipe-item{padding:13px 10px}
.pipeline-v2 .pipe-item.has-data{background:#f8fbfa}
.pipeline-v2 .pipe-item i{position:absolute;right:-5px;top:50%;transform:translateY(-50%);z-index:2;color:#b7c4c1;font-style:normal;font-size:10px}
.timeline-list .timeline-row{padding-block:9px}
.birthday-list-merged.hidden{display:none!important}

@media(max-width:980px){
  .dashboard-quick-actions{grid-template-columns:repeat(3,minmax(0,1fr))}
  .operations-dashboard-grid{grid-template-columns:1fr}
}

@media(max-width:680px){
  .dashboard-command-center{padding-bottom:16px}
  .dashboard-hero-v2{padding:18px 17px;border-radius:18px;min-height:0}
  .dashboard-hero-v2 h1{font-size:23px;line-height:1.18;margin-top:6px}
  .dashboard-hero-v2>div>p:not(.kicker){font-size:11px;line-height:1.45}
  .dashboard-attention-summary{margin-top:15px;padding-top:13px}
  .dashboard-quick-actions{display:flex;gap:8px;overflow-x:auto;margin:10px -14px 12px;padding:0 14px 3px;scroll-snap-type:x proximity;scrollbar-width:none}
  .dashboard-quick-actions::-webkit-scrollbar{display:none}
  .dashboard-quick-actions button{flex:0 0 142px;min-height:62px;padding:11px 12px;scroll-snap-align:start;border-radius:13px}
  .dashboard-quick-actions span{font-size:10.5px}
  .dashboard-quick-actions small{font-size:7.8px}
  .summary-strip-v2{grid-template-columns:repeat(2,1fr)!important;margin-bottom:10px;border-radius:15px}
  .summary-strip-v2 .summary-item{padding:12px 13px;min-height:72px}
  .summary-strip-v2 .summary-item:nth-child(5){grid-column:1/-1;border-top:1px solid var(--border)}
  .summary-strip-v2 .summary-label{font-size:9.5px}
  .summary-strip-v2 .summary-value{font-size:20px}
  .dashboard-grid-v2{grid-template-columns:1fr!important;gap:10px;margin-top:10px}
  .dashboard-compact-panel{padding:14px;border-radius:16px}
  .dashboard-compact-panel .panel-head{margin-bottom:9px}
  .dashboard-compact-panel .panel-head h3{font-size:14.5px}
  .dashboard-compact-panel .panel-head .text-btn{font-size:8.5px}
  .dashboard-compact-empty{min-height:58px;padding:10px 11px}
  .attendance-mini-grid{grid-template-columns:repeat(2,1fr)}
  .attendance-mini-grid>div:nth-child(3),.attendance-mini-grid>div:nth-child(4){border-top:1px solid #e7eeec}
  .attendance-mini-grid>div:nth-child(3):before{display:none}
  .attendance-mini-grid span{font-size:8px}
  .attendance-mini-grid strong{font-size:16px}
  .module-stat-grid{grid-template-columns:repeat(3,1fr)}
  .module-stat-grid>div{padding:10px 8px}
  .module-stat-grid span{font-size:7.6px;line-height:1.3}
  .module-stat-grid strong{font-size:17px}
  .module-snapshot-main{align-items:center}
  .module-snapshot-main strong{font-size:10.5px}
  .module-snapshot-money strong{font-size:17px}
  .pipeline-v2{grid-template-columns:repeat(3,1fr)!important}
  .pipeline-v2 .pipe-item{padding:11px 8px}
  .pipeline-v2 .pipe-item b{font-size:18px}
  .pipeline-v2 .pipe-item span{font-size:7.8px;white-space:normal}
  .pipeline-v2 .pipe-item i{display:none}
  .radar-panel{min-height:0!important}
  .list-row{padding-block:9px}
  .list-copy strong{font-size:10.8px}
  .list-copy small{font-size:8.7px}
}

/* =========================================================
   Nakna P9.10 — Mobile Modal System
   Goal: one vertical scroll layer per dialog on LINE iOS,
   Safari and Chrome. Header/footer remain reachable and
   nested lists no longer trap touch scrolling.
   ========================================================= */
body.nakna-dialog-open{overflow:hidden;overscroll-behavior:none}

@media(max-width:720px){
  dialog.nakna-dialog[open]{
    box-sizing:border-box!important;
    width:100vw!important;
    max-width:none!important;
    height:var(--nakna-visual-height,100dvh)!important;
    max-height:var(--nakna-visual-height,100dvh)!important;
    min-height:0!important;
    inset:var(--nakna-visual-offset-top,0) 0 auto 0!important;
    margin:0!important;
    padding:0!important;
    border:0!important;
    border-radius:0!important;
    background:#fff!important;
    overflow-x:hidden!important;
    overflow-y:auto!important;
    overscroll-behavior:contain!important;
    -webkit-overflow-scrolling:touch!important;
    scroll-padding-top:88px!important;
    scroll-padding-bottom:calc(104px + env(safe-area-inset-bottom))!important;
    box-shadow:none!important;
  }
  dialog.nakna-dialog::backdrop{background:rgba(18,45,50,.38);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}

  /* Make the dialog itself the only vertical scroller. */
  dialog.nakna-dialog[open]>form{
    box-sizing:border-box!important;
    display:block!important;
    width:100%!important;
    height:auto!important;
    min-height:100%!important;
    max-height:none!important;
    margin:0!important;
    padding:0!important;
    overflow:visible!important;
  }
  dialog.nakna-dialog[open] .modal-fields{
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:13px!important;
    margin:0!important;
    padding:16px 18px 22px!important;
    max-height:none!important;
    overflow:visible!important;
    overscroll-behavior:auto!important;
  }
  dialog.nakna-dialog[open] .field.full{grid-column:auto!important}

  /* Stable top and bottom controls. */
  dialog.nakna-dialog[open] .modal-head{
    position:sticky!important;
    top:0!important;
    z-index:40!important;
    margin:0!important;
    padding:calc(14px + env(safe-area-inset-top)) 18px 14px!important;
    border-bottom:1px solid var(--border)!important;
    background:rgba(255,255,255,.97)!important;
    backdrop-filter:blur(16px)!important;
    -webkit-backdrop-filter:blur(16px)!important;
  }
  dialog.nakna-dialog[open] .modal-actions{
    position:sticky!important;
    left:0!important;
    right:0!important;
    bottom:0!important;
    z-index:45!important;
    display:flex!important;
    gap:10px!important;
    width:100%!important;
    box-sizing:border-box!important;
    margin:0!important;
    padding:12px 18px calc(12px + env(safe-area-inset-bottom))!important;
    border-top:1px solid var(--border)!important;
    background:rgba(255,255,255,.98)!important;
    box-shadow:0 -10px 28px rgba(18,60,74,.09)!important;
    backdrop-filter:blur(14px)!important;
    -webkit-backdrop-filter:blur(14px)!important;
  }
  dialog.nakna-dialog[open] .modal-actions>*{flex:1 1 0!important;min-height:48px!important;font-size:13px!important}

  /* Any custom content that sits directly between header/footer gets breathing room. */
  dialog.nakna-dialog[open]>form>:not(.modal-head):not(.modal-actions):not(.modal-fields):not(input[type="hidden"]){
    box-sizing:border-box;
    margin-left:18px;
    margin-right:18px;
  }

  /* Kill nested vertical scroll traps inside dialogs. */
  dialog.nakna-dialog[open] .entitlement-list,
  dialog.nakna-dialog[open] .position-assign-people,
  dialog.nakna-dialog[open] .broadcast-ack-list,
  dialog.nakna-dialog[open] .payroll-bulk-employees,
  dialog.nakna-dialog[open] .payroll-component-list,
  dialog.nakna-dialog[open] .employee-documents-list,
  dialog.nakna-dialog[open] .organization-builder-list,
  dialog.nakna-dialog[open] .help-guide-nav,
  dialog.nakna-dialog[open] .help-center-content,
  dialog.nakna-dialog[open] .document-hr-sign-dialog>form,
  dialog.nakna-dialog[open] .attendance-person-summary-wrap{
    max-height:none!important;
    height:auto!important;
    overflow:visible!important;
    overscroll-behavior:auto!important;
    -webkit-overflow-scrolling:auto!important;
  }

  /* Leave Profile — the reported broken screen. */
  #leaveProfileModal .leave-profile-head{
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:13px!important;
    margin:0!important;
    padding:16px 18px 4px!important;
  }
  #leaveProfileModal .entitlement-list{
    display:grid!important;
    gap:10px!important;
    margin:0!important;
    padding:12px 18px 24px!important;
  }
  #leaveProfileModal .entitlement-row{
    grid-template-columns:1fr 1fr!important;
    gap:12px!important;
    align-items:end!important;
    padding:14px!important;
    border-radius:16px!important;
  }
  #leaveProfileModal .entitlement-name{grid-column:1/-1}
  #leaveProfileModal .entitlement-balance{grid-column:1/-1;padding:2px 0 0!important}
  #leaveProfileModal .entitlement-name strong{font-size:14px!important}
  #leaveProfileModal .entitlement-name small{font-size:11px!important;line-height:1.45}
  #leaveProfileModal .entitlement-input label,#leaveProfileModal .entitlement-balance span{font-size:11px!important}
  #leaveProfileModal .entitlement-input input{height:46px!important;font-size:16px!important;border-radius:12px!important}
  #leaveProfileModal .entitlement-balance strong{font-size:18px!important}

  /* Payroll long forms / lists. */
  #payrollSettingsModal .payroll-cycle-row{display:grid!important;grid-template-columns:72px minmax(0,1fr)!important;gap:8px!important}
  #payrollSettingsModal .payroll-cycle-row>span{align-self:center}
  #payrollSettingsModal .payroll-cycle-presets{display:grid!important;grid-template-columns:1fr!important;gap:8px!important}
  #payrollBulkAdjustmentModal .payroll-bulk-employees{grid-template-columns:1fr!important;padding:0!important;border:0!important;background:transparent!important}
  #payrollComponentsModal .payroll-component-list{margin-bottom:18px!important}

  /* Broadcast acknowledgement / assignment dialogs without <form>. */
  #broadcastAckModal.nakna-dialog[open],
  #departmentAssignModal.nakna-dialog[open],
  #positionAssignModal.nakna-dialog[open],
  #workLogDetailModal.nakna-dialog[open]{padding-bottom:0!important}
  #broadcastAckModal>.broadcast-ack-summary,
  #broadcastAckModal>.broadcast-ack-toolbar,
  #broadcastAckModal>.broadcast-ack-list,
  #departmentAssignModal>.department-assign-note,
  #departmentAssignModal>.position-assign-toolbar,
  #departmentAssignModal>.position-assign-people,
  #positionAssignModal>.position-assign-toolbar,
  #positionAssignModal>.position-assign-people,
  #workLogDetailModal>.worklog-detail-body{
    box-sizing:border-box!important;
    margin-left:18px!important;
    margin-right:18px!important;
  }
  #broadcastAckModal>.broadcast-ack-summary{margin-top:16px!important}
  #broadcastAckModal>.broadcast-ack-list{margin-bottom:22px!important}
  #departmentAssignModal>.position-assign-people,#positionAssignModal>.position-assign-people{margin-bottom:22px!important}
  #workLogDetailModal>.worklog-detail-body{margin-top:16px!important;margin-bottom:22px!important}

  /* Organization builder: use the same page scroll, not an inner list. */
  #organizationBuilderModal.nakna-dialog[open]{overflow-y:auto!important}
  #organizationBuilderModal .organization-builder-shell{
    display:block!important;
    max-height:none!important;
    min-height:100%!important;
    padding:0 18px calc(24px + env(safe-area-inset-bottom))!important;
    overflow:visible!important;
  }
  #organizationBuilderModal .organization-builder-shell>.modal-head{margin:0 -18px 16px!important}
  #organizationBuilderModal .organization-builder-list{padding-bottom:20px!important}

  /* Help Center stays full-screen but also has a single scroll layer. */
  #helpCenterModal.nakna-dialog[open]{overflow-y:auto!important}
  #helpCenterModal .help-center-shell{display:block!important;height:auto!important;min-height:100%!important}
  #helpCenterModal .help-center-content{overflow:visible!important}
  #helpCenterModal .help-center-head{top:0!important}
  #helpCenterModal .help-center-content:before{position:static!important}

  /* Document dialogs had their own scrolling rules. Override them here. */
  #documentHrSignModal.document-hr-sign-dialog[open],
  #documentSettingsModal.document-settings-dialog[open],
  #documentGenerateModal.document-generate-dialog[open]{height:var(--nakna-visual-height,100dvh)!important;max-height:var(--nakna-visual-height,100dvh)!important}
  #documentHrSignModal.document-hr-sign-dialog>form{overflow:visible!important;height:auto!important;max-height:none!important;padding:0!important}
  #documentHrSignModal .document-sign-flow,
  #documentHrSignModal .hr-sign-document-card,
  #documentHrSignModal .hr-sign-grid,
  #documentHrSignModal .document-sign-workflow-note,
  #documentHrSignModal .inline-error{
    margin-left:18px!important;margin-right:18px!important;
  }
  #documentHrSignModal .document-sign-flow{margin-top:16px!important}
  #documentHrSignModal .inline-error{margin-bottom:10px!important}
  #documentSettingsModal .document-settings-grid{grid-template-columns:1fr!important;margin:16px 18px 22px!important;padding:0!important}
  #documentGenerateModal .document-type-cards{grid-template-columns:1fr!important}

  /* Long role / access / employee forms. */
  #companyAccessModal .modal-fields,
  #approverAccessModal .modal-fields,
  #peopleProfileModal .modal-fields,
  #scheduleModal .modal-fields,
  #leavePolicyModal .modal-fields,
  #broadcastModal .modal-fields,
  #probationReviewModal .modal-fields,
  #courseModal .modal-fields,
  #moduleModal .modal-fields,
  #kpiModal .modal-fields,
  #performanceCycleModal .modal-fields{padding-bottom:28px!important}

  /* Prevent iOS from zooming and make fields reliably tappable. */
  dialog.nakna-dialog[open] input,
  dialog.nakna-dialog[open] select,
  dialog.nakna-dialog[open] textarea{font-size:16px!important;touch-action:manipulation}
  dialog.nakna-dialog[open] textarea{min-height:104px}
  dialog.nakna-dialog[open] button{touch-action:manipulation}
}

/* P9.11 — global action / loading feedback */
.interaction-status{position:fixed;z-index:7150;left:50%;top:24px;transform:translateX(-50%);pointer-events:none;transition:opacity .16s ease,transform .16s ease;user-select:none;caret-color:transparent}
.interaction-status.hidden{display:none!important}
.interaction-status-card{width:min(390px,calc(100vw - 32px));display:grid;grid-template-columns:40px minmax(0,1fr);gap:11px;align-items:center;padding:12px 14px;border:1px solid rgba(17,92,94,.12);border-radius:17px;background:rgba(255,255,255,.98);box-shadow:0 18px 54px rgba(20,55,58,.18);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);animation:nakna-action-pop .16s ease-out both}
.interaction-status-icon{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;background:#eaf6f3;color:#128181;font-weight:800}
.interaction-status-copy{display:grid;gap:2px;min-width:0}
.interaction-status-copy strong{font-size:13px;line-height:1.3;color:#123c4a}
.interaction-status-copy small{font-size:10px;line-height:1.45;color:#7b898b;white-space:normal}
.interaction-status-spinner{width:19px;height:19px;border:2.4px solid #cfe4df;border-top-color:#178b8b;border-radius:50%;animation:nakna-action-spin .68s linear infinite}
.interaction-status.success .interaction-status-icon{background:#e8f7ef;color:#168457}
.interaction-status.error .interaction-status-icon{background:#fff0ed;color:#c95a4b}
.interaction-status.success .interaction-status-spinner,.interaction-status.error .interaction-status-spinner{display:none}
.interaction-status.success .interaction-status-icon::before{content:'✓';font-size:18px}
.interaction-status.error .interaction-status-icon::before{content:'!';font-size:18px}
body.nakna-reading{cursor:progress}
button,a,[role="button"],[data-view]{-webkit-tap-highlight-color:transparent}
button.nakna-tap-ack,a.nakna-tap-ack,[role="button"].nakna-tap-ack,[data-view].nakna-tap-ack{transform:scale(.985);filter:brightness(.985);transition:transform .08s ease,filter .08s ease}
button.nakna-read-pending,a.nakna-read-pending,[role="button"].nakna-read-pending,[data-view].nakna-read-pending{cursor:wait!important;position:relative}
button.nakna-read-pending:not(.icon-btn):not(.close-btn)::after,a.nakna-read-pending:not(.icon-btn)::after,[role="button"].nakna-read-pending::after,[data-view].nakna-read-pending::after{content:'';width:13px;height:13px;display:inline-block;margin-left:8px;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;vertical-align:-2px;animation:nakna-action-spin .68s linear infinite;opacity:.72}

@media(max-width:720px){
  .interaction-status{top:calc(72px + env(safe-area-inset-top));width:100%;padding:0 14px}
  .interaction-status-card{width:100%;max-width:420px;margin:0 auto;padding:12px 13px;border-radius:16px}
  .interaction-status-icon{width:38px;height:38px}
  .interaction-status-copy strong{font-size:13px}
  .interaction-status-copy small{font-size:10px}
}

/* P9.12 — smart/minimal action feedback */
/* Read actions: no floating popup. The clicked control itself shows a small spinner only when the request takes >220ms. */
#interactionStatus{display:none!important}
button.nakna-mutation-pending,a.nakna-mutation-pending,[role="button"].nakna-mutation-pending,[data-view].nakna-mutation-pending{cursor:wait!important;position:relative}
button.nakna-mutation-pending:not(.icon-btn):not(.close-btn)::after,a.nakna-mutation-pending:not(.icon-btn)::after,[role="button"].nakna-mutation-pending::after,[data-view].nakna-mutation-pending::after{content:'';width:13px;height:13px;display:inline-block;margin-left:8px;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;vertical-align:-2px;animation:nakna-action-spin .68s linear infinite;opacity:.72}

/* Page/view refresh: use one thin progress line, not a second popup card. */
.view-loading-overlay{position:absolute!important;z-index:85!important;inset:0 0 auto 0!important;min-height:0!important;height:3px!important;padding:0!important;background:transparent!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important;pointer-events:none!important;overflow:hidden}
.view-loading-progress-bar{display:block;width:42%;height:3px;border-radius:999px;background:linear-gradient(90deg,rgba(4,135,138,.15),#04878a,rgba(4,135,138,.15));animation:nakna-view-progress 1.05s ease-in-out infinite}
.view-loading-card{display:none!important}
@keyframes nakna-view-progress{0%{transform:translateX(-110%)}55%{transform:translateX(125%)}100%{transform:translateX(260%)}}
.sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}

/* Mutations: only show this compact status if the save/delete/publish actually takes >450ms. */
.action-status{position:fixed!important;z-index:7200!important;inset:auto!important;left:50%!important;top:22px!important;transform:translateX(-50%)!important;display:block!important;width:auto!important;padding:0!important;background:transparent!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important;pointer-events:none!important}
.action-status.hidden{display:none!important}
.action-status-card{width:min(360px,calc(100vw - 28px))!important;display:grid!important;grid-template-columns:38px minmax(0,1fr)!important;gap:10px!important;align-items:center!important;padding:11px 13px!important;border:1px solid rgba(17,92,94,.12)!important;border-radius:16px!important;background:rgba(255,255,255,.98)!important;box-shadow:0 12px 34px rgba(20,55,58,.16)!important;animation:nakna-action-pop .16s ease-out both!important}
.action-status-icon{width:38px!important;height:38px!important;border-radius:12px!important}
.action-status-spinner{width:18px!important;height:18px!important;border-width:2.3px!important}
.action-status-copy strong{font-size:12.5px!important;line-height:1.3!important}
.action-status-copy small{font-size:9.5px!important;line-height:1.4!important}
.action-status.error .action-status-card{border-color:#f0cbc4!important}
.action-status.success{display:none!important}

@media(max-width:720px){
  .action-status{top:calc(72px + env(safe-area-inset-top))!important;width:100%!important;padding:0 12px!important}
  .action-status-card{width:100%!important;max-width:420px!important;margin:0 auto!important;padding:11px 12px!important;border-radius:15px!important}
  .view-loading-overlay{position:absolute!important;inset:0 0 auto 0!important;height:3px!important}
}

/* P9.13 — Payroll flow & clarity */
.payroll-detail-head-simplified{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:12px}.payroll-detail-head-simplified h2{margin:4px 0 8px;color:var(--primary-dark);font-size:24px;letter-spacing:-.02em}.payroll-period-subline{display:flex;align-items:center;gap:8px;flex-wrap:wrap;color:#788987;font-size:10px}.payroll-period-subline>span:not(.badge){padding-right:8px;border-right:1px solid #dfe8e5}.payroll-period-nav{display:flex;gap:8px}.payroll-period-nav button{height:36px;padding:0 12px;border:1px solid #d9e6e2;border-radius:10px;background:#fff;color:#31555d;font:inherit;font-size:9px;cursor:pointer}
.payroll-workflow{margin:0 0 14px;padding:14px 16px;border:1px solid #dbe8e4;border-radius:16px;background:#fbfdfc}.payroll-workflow-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px}.payroll-workflow-head strong{display:block;margin-top:2px;color:#173f48;font-size:13px}.payroll-workflow-head>span{padding:6px 10px;border-radius:999px;background:#eef8f6;color:#168b8d;font-size:9px;font-weight:700}.payroll-workflow-steps{display:grid;grid-template-columns:repeat(5,1fr);gap:7px}.payroll-workflow-steps>div{display:flex;align-items:center;gap:7px;min-width:0;padding:9px 10px;border:1px solid #e7efed;border-radius:12px;background:#fff;color:#95a3a0}.payroll-workflow-steps b{width:22px;height:22px;display:grid;place-items:center;border-radius:50%;background:#f1f5f4;color:#7f908d;font-size:9px}.payroll-workflow-steps span{font-size:9px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.payroll-workflow-steps .done{color:#487069}.payroll-workflow-steps .done b{background:#e3f5ef;color:#158365}.payroll-workflow-steps .current{border-color:#a9d7cf;background:#eef8f6;color:#153f48;font-weight:700}.payroll-workflow-steps .current b{background:#168b8d;color:#fff}
.payroll-command-row{display:grid;grid-template-columns:minmax(220px,.7fr) minmax(0,1.3fr);gap:12px;align-items:stretch;margin-bottom:14px}.payroll-readiness-card{display:grid;align-content:center;padding:14px 16px;border:1px solid #dce8e5;border-radius:15px;background:#fff}.payroll-readiness-card span{font-size:9px;color:#8a9997}.payroll-readiness-card strong{margin-top:3px;color:#173f48;font-size:17px}.payroll-readiness-card small{margin-top:5px;color:#788a87;font-size:8.5px}.payroll-primary-command{display:flex;align-items:center;justify-content:flex-end;gap:10px;padding:12px 14px;border:1px solid #dce8e5;border-radius:15px;background:#fff}.payroll-next-action{min-height:42px;padding-inline:20px}.payroll-more-actions{position:relative}.payroll-more-actions>summary{list-style:none;cursor:pointer;padding:10px 12px;border:1px solid #d9e6e2;border-radius:10px;background:#fff;color:#4f696e;font-size:9px;white-space:nowrap}.payroll-more-actions>summary::-webkit-details-marker{display:none}.payroll-more-actions[open]>div{position:absolute;right:0;top:calc(100% + 7px);z-index:25;min-width:210px;display:grid;gap:5px;padding:8px;border:1px solid #dbe6e3;border-radius:12px;background:#fff;box-shadow:0 16px 34px rgba(16,60,68,.14)}.payroll-more-actions button{width:100%;padding:9px 10px;border:0;border-radius:9px;background:#f7faf9;color:#31555d;text-align:left;font:inherit;font-size:9px;cursor:pointer}.payroll-more-actions button:hover{background:#eef7f5}.payroll-more-actions button.danger{color:#c85f4c;background:#fff7f4}
.payroll-totals-readable{grid-template-columns:repeat(3,1fr)}.payroll-totals-readable>div{min-height:76px}.payroll-totals-readable small{display:block;margin-top:4px;color:#9aa7a5;font-size:7.5px}.payroll-validation-compact{display:flex;align-items:center;gap:10px;margin:12px 0;padding:11px 13px;border:1px solid #dbe9e4;border-radius:13px;background:#f8fcfa}.payroll-validation-compact.is-clear{border-color:#cde8da;background:#f5fbf7}.payroll-validation-icon{width:30px;height:30px;display:grid;place-items:center;border-radius:50%;background:#e1f5e9;color:#20845d;font-size:14px;font-weight:800}.payroll-validation-compact strong,.payroll-validation-compact small{display:block}.payroll-validation-compact strong{color:#23484e;font-size:10px}.payroll-validation-compact small{margin-top:2px;color:#82928f;font-size:8.5px}
.payroll-input-legend{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:10px 0 12px;padding:9px 11px;border-radius:12px;background:#f6f9f8;color:#758784}.payroll-input-legend>span{padding:5px 8px;border-radius:999px;font-size:8px;font-weight:700}.payroll-input-legend>span.editable{background:#fff4dc;color:#8c6718}.payroll-input-legend>span.system{background:#eaf5f3;color:#267268}.payroll-input-legend small{font-size:8px}.payroll-system-cell{background:#f8fbfa}.payroll-click-source{cursor:pointer}.payroll-click-source:hover{box-shadow:inset 0 0 0 1px #b9ddd6;background:#f0f9f6}
.payroll-mobile-card-compact .payroll-mobile-three{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.payroll-mobile-three>div{display:grid;gap:3px;padding:9px 10px;border:1px solid #e8f0ed;border-radius:11px;background:#fafcfb}.payroll-mobile-three span{font-size:10px;color:#899795}.payroll-mobile-three strong{font-size:13px;color:#173f48}.payroll-mobile-quick-edit{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}.payroll-mobile-quick-edit label{display:grid;gap:5px}.payroll-mobile-quick-edit label>span{font-size:9px;color:#7d8e8b}.payroll-mobile-quick-edit .payroll-grid-input{width:100%;min-width:0}.payroll-mobile-more{border-top:1px solid #edf2f0;padding-top:9px}.payroll-mobile-more>summary{cursor:pointer;color:#168b8d;font-size:10px;font-weight:700}.payroll-mobile-more-body{padding-top:10px}
.payroll-source-card{margin:12px 0;padding:14px;border:1px solid #dfe8e5;border-radius:15px;background:#fff}.payroll-source-card h4{margin:0 0 10px;color:#173f48;font-size:11px}.payroll-source-list{display:grid}.payroll-source-list>div{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 12px;padding:9px 0;border-bottom:1px solid #edf2f0}.payroll-source-list>div:last-child{border-bottom:0}.payroll-source-list span{color:#536d72;font-size:9px}.payroll-source-list strong{color:#173f48;font-size:10px}.payroll-source-list small{grid-column:1/-1;color:#98a6a4;font-size:8px}.payroll-source-list .deduct strong{color:#c16252}
.payroll-lock-preview-modal{max-width:620px}.payroll-lock-summary{display:grid;grid-template-columns:repeat(2,1fr);gap:9px;margin-bottom:12px}.payroll-lock-summary>div{display:grid;gap:3px;padding:12px;border:1px solid #e1eae7;border-radius:12px;background:#fafcfb}.payroll-lock-summary>div.net{grid-column:1/-1;background:#eef8f6;border-color:#cde6e0}.payroll-lock-summary span{font-size:9px;color:#849491}.payroll-lock-summary strong{color:#173f48;font-size:15px}.payroll-lock-summary .net strong{color:#168b8d;font-size:20px}.payroll-lock-readiness{display:grid;gap:4px;margin-bottom:12px;padding:12px 13px;border-radius:12px}.payroll-lock-readiness.is-ready{background:#f1faf5;color:#276c51}.payroll-lock-readiness.has-error{background:#fff5f2;color:#ad5443}.payroll-lock-readiness strong{font-size:10px}.payroll-lock-readiness span{font-size:8.5px}.payroll-bank-breakdown{padding:12px 13px;border:1px solid #e1eae7;border-radius:12px;background:#fff}.payroll-bank-breakdown h4{margin:0 0 8px;color:#173f48;font-size:10px}.payroll-bank-breakdown>div{display:flex;justify-content:space-between;gap:12px;padding:7px 0;border-top:1px solid #edf2f0;font-size:9px}

@media(max-width:900px){.payroll-workflow-steps{grid-template-columns:repeat(5,minmax(110px,1fr));overflow-x:auto;padding-bottom:3px}.payroll-command-row{grid-template-columns:1fr}.payroll-primary-command{justify-content:space-between}.payroll-totals-readable{grid-template-columns:repeat(2,1fr)}}
@media(max-width:720px){.payroll-detail-head-simplified{display:grid;gap:12px}.payroll-detail-head-simplified h2{font-size:22px}.payroll-period-nav{display:grid;grid-template-columns:1fr 1fr}.payroll-period-nav button{width:100%;height:40px}.payroll-workflow{padding:12px;margin-bottom:10px}.payroll-workflow-steps{display:flex;overflow-x:auto;gap:7px}.payroll-workflow-steps>div{min-width:118px}.payroll-command-row{gap:9px}.payroll-primary-command{display:grid;grid-template-columns:1fr;align-items:stretch}.payroll-next-action{width:100%}.payroll-more-actions>summary{width:100%;text-align:center}.payroll-more-actions[open]>div{position:static;margin-top:7px;box-shadow:none}.payroll-totals-readable{grid-template-columns:1fr 1fr!important}.payroll-totals-readable>div:last-child:nth-child(odd){grid-column:1/-1}.payroll-input-legend{display:grid;grid-template-columns:auto 1fr;align-items:start}.payroll-mobile-three{grid-template-columns:1fr 1fr!important}.payroll-mobile-three>div:last-child{grid-column:1/-1}.payroll-mobile-quick-edit{grid-template-columns:1fr 1fr}.payroll-lock-summary{grid-template-columns:1fr 1fr}.payroll-source-card{padding:12px}.payroll-source-list>div{grid-template-columns:1fr auto}}

/* P9.14 — Attendance Face Verification */
.attendance-face-card{margin-top:14px;padding:18px;border:1px solid var(--border,#dfe8e5);border-radius:22px;background:#fff;box-shadow:0 8px 28px rgba(18,60,74,.05)}
.attendance-face-head{display:flex;align-items:flex-start;gap:14px}.attendance-face-icon{width:44px;height:44px;display:grid;place-items:center;border-radius:14px;background:#e9f6f2;color:#04878a;font-size:22px;font-weight:800;flex:0 0 auto}.attendance-face-copy{min-width:0;flex:1}.attendance-face-title-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.attendance-face-copy strong{font-size:15px}.attendance-face-copy p{margin:6px 0;color:var(--muted,#6f7f7b);font-size:13px;line-height:1.55}.attendance-face-copy small{color:#6f7f7b}.attendance-face-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(280px,.8fr);gap:12px;margin-top:16px}.attendance-face-option{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:13px 14px;border:1px solid var(--border,#e0e8e6);border-radius:16px;background:#fbfdfc}.attendance-face-option>div{display:grid;gap:3px}.attendance-face-option strong{font-size:13px}.attendance-face-option small{color:var(--muted,#7a8784);font-size:11px}.attendance-face-summary{display:grid;grid-template-columns:140px 140px minmax(0,1fr);gap:10px;margin-top:12px}.attendance-face-summary>div{padding:12px 14px;border:1px solid var(--border,#e0e8e6);border-radius:16px;background:#fbfdfc}.attendance-face-summary>div:not(.attendance-face-privacy){display:grid;gap:3px}.attendance-face-summary>div:not(.attendance-face-privacy) strong{font-size:20px;color:#143d48}.attendance-face-summary>div:not(.attendance-face-privacy) span{font-size:11px;color:var(--muted,#7a8784)}.attendance-face-privacy{display:grid;gap:4px;background:#eef8f5!important;border-color:#d9eee8!important}.attendance-face-privacy b{font-size:12px;color:#176e70}.attendance-face-privacy span{font-size:11px;line-height:1.5;color:#58736f}.attendance-face-pending{display:flex;gap:7px;align-items:center;flex-wrap:wrap;margin-top:10px;padding:10px 12px;border-radius:14px;background:#fff8ea;color:#795817;font-size:11px}.attendance-face-pending b,.attendance-face-pending em{padding:4px 8px;border-radius:999px;background:#fff;border:1px solid #f1dfb9;font-style:normal;font-weight:700}.attendance-face-actions{display:flex;justify-content:flex-end;margin-top:14px}.attendance-face-actions .primary-btn{width:auto;min-width:210px}.people-face-profile-card{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:13px 14px;border:1px solid var(--border,#e0e8e6);border-radius:16px;background:#fbfdfc}.people-face-profile-card>div{display:grid;gap:3px}.people-face-profile-card strong{font-size:13px}.people-face-profile-card small{font-size:11px;color:var(--muted,#788682)}.attendance-face-rollout{margin-top:12px;padding:14px;border:1px solid #dcebe7;border-radius:18px;background:linear-gradient(180deg,#fbfefd 0%,#f5fbf9 100%);display:grid;gap:12px}.attendance-face-rollout-copy{display:grid;gap:4px}.attendance-face-rollout-copy strong{font-size:13px;color:#173f49}.attendance-face-rollout-copy span{font-size:11px;line-height:1.55;color:var(--muted,#71807d)}.attendance-face-rollout-buttons{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.attendance-face-rollout-buttons .primary-btn,.attendance-face-rollout-buttons .secondary-btn{width:auto;min-width:0}.attendance-face-rollout-buttons .text-btn{margin-left:auto}.attendance-face-rollout-status{font-size:11px;color:#6b7a77}.attendance-face-rollout-status.is-success{color:#1b8b65;font-weight:700}
.worklog-face-chip{display:inline-flex;align-items:center;width:max-content;margin-top:5px;padding:3px 7px;border-radius:999px;background:#eaf8f0;color:#287d58;font-size:10px;font-weight:800}.worklog-face-evidence{display:flex;justify-content:space-between;align-items:center;gap:12px;margin:0 0 12px;padding:12px 14px;border:1px solid #d8ece4;border-radius:16px;background:#eef8f5}.worklog-face-evidence>div{display:grid;gap:2px}.worklog-face-evidence span{font-size:10px;color:#6f827d;text-transform:uppercase;letter-spacing:.06em}.worklog-face-evidence strong{font-size:13px;color:#1d6f58}.worklog-face-evidence small{color:#5f7770;font-size:11px;text-align:right}
@media(max-width:720px){.attendance-face-card{padding:14px;border-radius:18px}.attendance-face-grid,.attendance-face-summary{grid-template-columns:1fr}.attendance-face-summary{gap:8px}.attendance-face-actions .primary-btn{width:100%}.attendance-face-option{min-height:64px}.attendance-face-rollout{padding:12px;border-radius:16px}.attendance-face-rollout-buttons{display:grid;grid-template-columns:1fr}.attendance-face-rollout-buttons .primary-btn,.attendance-face-rollout-buttons .secondary-btn,.attendance-face-rollout-buttons .text-btn{width:100%;margin:0}.people-face-profile-card{align-items:flex-start;flex-direction:column}.people-face-profile-card .secondary-btn{width:100%}.worklog-face-evidence{align-items:flex-start;flex-direction:column}.worklog-face-evidence small{text-align:left}}


/* P9.15.3 — Face settings lifecycle + deterministic visibility */
.attendance-face-scan-btn{font-weight:700;box-shadow:0 8px 18px rgba(4,135,138,.14)}
.attendance-face-card.face-card-recovered{outline:2px solid rgba(4,135,138,.10);outline-offset:2px}
@media(max-width:720px){
  .attendance-face-card{display:block!important;margin:14px 0!important}
  .attendance-face-head{align-items:flex-start}
  .attendance-face-title-row strong{font-size:16px}
  .attendance-face-copy p{font-size:12px;line-height:1.55}
  .attendance-face-rollout-copy strong{font-size:14px}
  .attendance-face-rollout-copy span{font-size:12px}
  .attendance-face-scan-btn{min-height:50px!important;font-size:14px!important}
}

/* P9.15.3 hard guarantee: attendance Face card is never collapsed by stale responsive rules. */
.settings-category-panel[data-settings-category="attendance"] #attendanceFaceCard{display:block!important;visibility:visible!important;opacity:1!important}


/* P9.19 — reliable switch hit-area on desktop/mobile/WebView */
.switch input{
  inset:0;
  width:100%;
  height:100%;
  margin:0;
  cursor:pointer;
  z-index:2;
  -webkit-tap-highlight-color:transparent;
  touch-action:manipulation;
}
.switch span{pointer-events:none;}
.switch input:disabled{cursor:not-allowed;}


/* Nakna P9.22 — editable payroll days / period salary */
.payroll-manual-input-wrap{display:grid;grid-template-columns:minmax(78px,1fr) auto;align-items:center;gap:5px;min-width:112px}
.payroll-manual-input-wrap .payroll-manual-input{width:100%;min-width:78px;background:#fffdf7;border-color:#eadfc2}
.payroll-manual-input-wrap .payroll-manual-input.salary{min-width:104px}
.payroll-manual-input-wrap.is-overridden .payroll-manual-input{border-color:#d8b55a;background:#fff8e8;box-shadow:inset 0 0 0 1px rgba(216,181,90,.08)}
.payroll-manual-input-wrap.is-derived .payroll-manual-input{border-color:#9fcfc6;background:#f4fbf9}
.payroll-auto-reset{height:27px;padding:0 7px;border:1px solid #dcc98f;border-radius:7px;background:#fffaf0;color:#87691d;font:700 8px/1 var(--font-en);cursor:pointer}
.payroll-auto-reset:hover{background:#fff3d6}
.payroll-auto-hint{white-space:nowrap;color:#91a09d!important;font-size:7px!important;font-weight:600}
.payroll-salary-override-cell{background:#fffdf8!important}
.payroll-salary-override-cell>small{margin-top:4px}
.payroll-salary-mode.manual{background:#fff0ca;color:#8b681b}
.payroll-mobile-quick-edit-v2{grid-template-columns:repeat(2,minmax(0,1fr))}
.payroll-mobile-quick-edit-v2 .payroll-manual-input-wrap{min-width:0}
.payroll-mobile-quick-edit-v2 .payroll-manual-input{height:42px;font-size:14px}
@media(max-width:720px){
  .payroll-manual-input-wrap{grid-template-columns:minmax(0,1fr) auto}
  .payroll-manual-input-wrap .payroll-manual-input{min-width:0;width:100%}
  .payroll-auto-reset{height:32px}
}

/* P9.23 — Saved payroll review Excel */
.payroll-export-panel{margin:18px 0;padding:18px;border:1px solid #d7e7e5;border-radius:20px;background:#fff;box-shadow:0 8px 28px rgba(14,67,70,.045)}
.payroll-export-panel.is-stale{border-color:#efdca8;background:#fffdf8}
.payroll-export-head{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:14px}
.payroll-export-head>div{display:flex;align-items:center;gap:12px;min-width:0}
.payroll-export-head strong{display:block;color:#173e43;font-size:15px;line-height:1.25}
.payroll-export-head small{display:block;color:#7b8e90;font-size:12px;margin-top:3px;line-height:1.45}
.payroll-export-panel.is-stale .payroll-export-head small{color:#9a7120}
.payroll-export-badge{display:inline-grid;place-items:center;min-width:54px;height:36px;padding:0 10px;border-radius:10px;background:#e8f6f3;color:#04878a;font-weight:800;font-size:12px;letter-spacing:.08em}
.payroll-export-new{white-space:nowrap}
.payroll-export-latest{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 16px;border:1px solid #e1eceb;border-radius:15px;background:#fbfdfd}
.payroll-export-file{min-width:0;display:flex;flex-direction:column;gap:4px}
.payroll-export-file strong{font-size:13px;color:#173e43;word-break:break-word}
.payroll-export-file span{font-size:12px;color:#6f8284}
.payroll-export-file small{font-size:11px}
.payroll-export-file small.ready{color:#32846b}
.payroll-export-file small.warning{color:#a86d17}
.payroll-export-latest .primary-btn{flex:0 0 auto;width:auto;min-width:150px;margin:0}
.payroll-export-history{margin-top:10px;border-top:1px solid #edf2f1;padding-top:10px}
.payroll-export-history>summary{cursor:pointer;color:#607779;font-size:12px;font-weight:700;list-style:none;display:flex;align-items:center;gap:6px}
.payroll-export-history>summary::-webkit-details-marker{display:none}
.payroll-export-history>summary span{display:inline-grid;place-items:center;min-width:20px;height:20px;padding:0 5px;border-radius:999px;background:#eef6f5;color:#537173;font-size:10px}
.payroll-export-history>div{display:grid;gap:8px;margin-top:10px}
.payroll-export-history article{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 12px;border-radius:12px;background:#f7faf9}
.payroll-export-history article span{min-width:0;display:flex;flex-direction:column;gap:2px}
.payroll-export-history article strong{font-size:12px;color:#294c50;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:520px}
.payroll-export-history article small{font-size:10px;color:#819092}
.payroll-export-history article button{border:0;background:transparent;color:#04878a;font-weight:700;cursor:pointer;padding:6px 8px}
@media(max-width:720px){
  .payroll-export-panel{padding:14px;border-radius:18px}
  .payroll-export-head{align-items:flex-start}
  .payroll-export-head>div{align-items:flex-start}
  .payroll-export-badge{min-width:48px;height:32px}
  .payroll-export-new{padding:9px 11px;font-size:12px}
  .payroll-export-latest{align-items:stretch;flex-direction:column;padding:13px}
  .payroll-export-latest .primary-btn{width:100%;min-width:0}
  .payroll-export-history article strong{max-width:210px}
}


/* P9.24 · Attendance retro approval */
.attendance-retro-approval-panel{margin-bottom:20px;border-color:#d8e8e3;background:linear-gradient(180deg,#fff 0%,#fbfefd 100%)}
.attendance-retro-approval-head{align-items:flex-start}.attendance-retro-approval-list{display:grid;gap:12px}
.attendance-retro-request-card{display:grid;grid-template-columns:minmax(230px,1fr) minmax(340px,1.65fr) auto;gap:18px;align-items:center;padding:16px 18px;border:1px solid #dbe9e5;border-radius:18px;background:#fff}
.attendance-retro-person{display:flex;align-items:center;gap:11px;min-width:0}.attendance-retro-person>span{display:grid;place-items:center;flex:0 0 42px;width:42px;height:42px;border-radius:14px;background:#e7f6f2;color:#0d8885;font-weight:800}.attendance-retro-person strong,.attendance-retro-person small{display:block}.attendance-retro-person strong{color:#153f49}.attendance-retro-person small{margin-top:3px;color:#8a9999;font-size:11px}
.attendance-retro-request-meta{display:grid;grid-template-columns:1fr 1fr;gap:8px 16px;padding:12px 14px;border-radius:14px;background:#f5faf8}.attendance-retro-request-meta .wide{grid-column:1/-1}.attendance-retro-request-meta span{display:block;color:#8b9a98;font-size:10px}.attendance-retro-request-meta strong{display:block;margin-top:3px;color:#294d53;font-size:12px;line-height:1.45}.attendance-retro-actions{display:flex;gap:8px;justify-content:flex-end}.danger-soft{border-color:#efd3ce!important;color:#a44b40!important;background:#fff7f5!important}.attendance-retro-empty{display:flex;align-items:center;gap:12px;padding:18px;border:1px dashed #cae4dc;border-radius:17px;background:#f6fcf9}.attendance-retro-empty>span{display:grid;place-items:center;width:38px;height:38px;border-radius:50%;background:#e0f5ea;color:#20815c;font-weight:800}.attendance-retro-empty strong,.attendance-retro-empty small{display:block}.attendance-retro-empty small{margin-top:3px;color:#879694}
.worklog-status.retro,.worklog-check-state.retro,.worklog-point-badge.retro{background:#eef0ff!important;color:#5858a8!important;border-color:#dfe0fb!important}.worklog-retro-pending{margin-top:6px;padding:6px 8px;border-radius:9px;background:#fff7e7;color:#a76b14;font-size:10px;font-weight:700;line-height:1.35}
@media(max-width:900px){.attendance-retro-request-card{grid-template-columns:1fr}.attendance-retro-actions{justify-content:stretch}.attendance-retro-actions button{flex:1}}

/* P9.31 — avoid reusing invoice-grid styles inside the narrow plan card. */
.enrollment-recovery{display:flex;flex-direction:column;align-items:stretch;gap:8px;padding:12px;margin-top:12px;min-width:0;border:1px solid #E7DABF;border-radius:12px;background:#FFF8EB;color:#55472C}
.enrollment-recovery p{margin:0;font-size:13px;line-height:1.65;overflow-wrap:anywhere}
.enrollment-recovery small{font-size:12px;line-height:1.55;overflow-wrap:anywhere}
.enrollment-recovery button{width:100%;min-height:42px;white-space:normal}
.enrollment-recovery.hidden{display:none}

/* P10.78: face verification placeholder */
#attendanceFaceCard.face-coming-soon{display:flex!important;flex-direction:column;align-items:center;text-align:center;padding:48px 24px;gap:14px;min-height:320px;justify-content:center}
.face-coming-soon-icon{margin-inline:auto;display:grid;place-items:center;width:64px;height:64px;border-radius:20px;background:#e9f6f4;color:#008d94;font-size:32px}
.face-coming-soon h2{margin:0;font-size:24px;line-height:1.4;color:#123944}
.face-coming-soon p{margin:0;color:#647b86}
.face-coming-soon .badge{font-size:13px;padding:6px 12px;background:#fff4de;color:#865d17}
.face-coming-soon-note{display:flex;flex-direction:column;gap:6px;max-width:560px;margin-top:12px;padding:18px 22px;border-radius:14px;background:#f0f9f7;color:#285d65;line-height:1.7}
.face-coming-soon-note span{font-size:14px}
.face-coming-soon-label{display:block;color:#826220;font-size:10px;line-height:1.5}
@media(max-width:600px){.face-coming-soon{padding:32px 18px;min-height:300px}.face-coming-soon h2{font-size:21px}.face-coming-soon-note{padding:16px}}

/* P10.85: shared detail blocks, including leave and other read-only dialogs. */
#modalFields:has(.detail-block){padding:20px 24px;min-width:0;box-sizing:border-box}
#modalFields .detail-block,#modalFields .detail-grid>div{display:flex;flex-direction:column;align-items:stretch;gap:8px;min-width:0;padding:16px}
#modalFields .detail-block>span,#modalFields .detail-grid>div>span{font-size:12px;line-height:1.5;margin:0}
#modalFields .detail-block>strong,#modalFields .detail-grid strong{display:block;font-size:14px;line-height:1.65;overflow-wrap:anywhere;white-space:pre-wrap}
#modalFields .detail-block>small{display:block;font-size:12px;line-height:1.65;color:var(--text-secondary);overflow-wrap:anywhere}
#modalFields .detail-grid .badge{align-self:flex-start;max-width:100%;width:auto}
.leave-download-buttons{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.leave-download-buttons button{font-size:14px;min-height:44px;height:auto;white-space:normal;padding:10px 16px;line-height:1.5}
#modalFields .evidence-links{gap:10px}
#modalFields .evidence-links a{height:auto;min-height:40px;white-space:normal;overflow-wrap:anywhere;padding:10px 12px;font-size:12px}
#modalFields .evidence-upload{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
#modalFields .evidence-upload input{max-width:100%;min-width:0}
#modalForm:has(.leave-detail) .modal-actions>button[value="cancel"]{display:none}
@media(max-width:600px){#modalFields:has(.detail-block){padding:16px}#modalFields .detail-grid{grid-template-columns:1fr}.leave-download-buttons{display:grid;grid-template-columns:1fr}.leave-download-buttons button{width:100%}}

/* P10.86 employee signature field */
.employee-signature-editor{padding:18px;border:1px solid #cfe1e2;border-radius:14px;background:#f7fbfb;display:grid;gap:12px;min-width:0}
.employee-signature-editor strong{font-size:15px;color:#173c43}
.employee-signature-editor p,.employee-signature-editor small{margin:4px 0 0;font-size:12px;line-height:1.6;color:#526d73}
.employee-signature-preview{display:flex;align-items:center;justify-content:center;min-height:110px;padding:12px;border:1px dashed #b7d1d2;border-radius:10px;background:white}
.employee-signature-preview img{display:block;width:auto;max-width:100%;height:100px;object-fit:contain}
.employee-signature-preview [hidden]{display:none}
.employee-signature-preview span{font-size:13px;color:#6a8085}
.employee-signature-buttons{display:flex;gap:10px;flex-wrap:wrap}
.employee-signature-buttons .secondary-btn{height:auto;min-height:42px;cursor:pointer;padding:10px 14px;font-size:13px;margin:0;display:inline-flex;align-items:center}
.employee-signature-buttons input[hidden]{display:none}