/* AkiraConzept Admin · IBM Plex */
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+Thai:wght@300;400;500;600;700&family=IBM+Plex+Mono:wght@400;500&display=swap');

:root {
  /* Brand */
  --primary: #1c1917;
  --primary-light: #292524;
  --accent: #f97316;
  --accent-hover: #ea580c;
  --accent-light: #fff7ed;
  --accent-soft: #ffedd5;

  /* Surfaces */
  --bg: #f8fafc;
  --surface: #ffffff;
  --surface-alt: #f1f5f9;
  --border: #e2e8f0;
  --border-strong: #cbd5e1;

  /* Text */
  --text: #0f172a;
  --text-muted: #64748b;
  --text-subtle: #94a3b8;

  /* States */
  --success: #10b981;
  --success-bg: #d1fae5;
  --danger: #ef4444;
  --danger-bg: #fee2e2;
  --warning: #f59e0b;
  --warning-bg: #fef3c7;
  --info: #3b82f6;
  --info-bg: #dbeafe;

  /* Layout */
  --sidebar-w: 240px;
  --header-h: 64px;
  --radius: 10px;
  --radius-sm: 6px;
  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.04);
  --shadow: 0 1px 3px 0 rgb(0 0 0 / 0.06), 0 1px 2px -1px rgb(0 0 0 / 0.04);
  --shadow-lg: 0 10px 25px -5px rgb(0 0 0 / 0.08), 0 8px 10px -6px rgb(0 0 0 / 0.04);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  font-family: "IBM Plex Sans Thai", "IBM Plex Sans", -apple-system, BlinkMacSystemFont, sans-serif;
  background: var(--bg);
  color: var(--text);
  font-size: 14px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a { color: var(--accent); text-decoration: none; transition: color .15s; }
a:hover { color: var(--accent-hover); }

code, pre { font-family: "IBM Plex Mono", monospace; }

/* ===== Layout ===== */
.app {
  display: grid;
  grid-template-columns: var(--sidebar-w) 1fr;
  min-height: 100vh;
}

/* ===== Sidebar ===== */
.sidebar {
  background: var(--primary);
  color: #cbd5e1;
  padding: 0;
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
}
.sidebar-brand {
  padding: 20px 20px 24px;
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.sidebar-brand .logo {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #fff;
  font-weight: 600;
  font-size: 16px;
  letter-spacing: -0.01em;
}
.sidebar-brand .logo-mark {
  width: 32px; height: 32px;
  background: linear-gradient(135deg, #f97316 0%, #fbbf24 100%);
  border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; color: #fff;
  box-shadow: 0 4px 12px rgba(249,115,22,.4);
}
.sidebar-brand .sub {
  display: block;
  margin-top: 6px;
  color: #64748b;
  font-size: 11px;
  letter-spacing: .05em;
  text-transform: uppercase;
}

.sidebar-nav {
  flex: 1;
  padding: 16px 12px;
}
.sidebar-nav .nav-label {
  padding: 12px 10px 6px;
  color: #475569;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.sidebar-nav a {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  margin-bottom: 2px;
  color: #cbd5e1;
  border-radius: var(--radius-sm);
  font-size: 14px;
  font-weight: 400;
  transition: all .15s;
}
.sidebar-nav a svg { flex-shrink: 0; opacity: .85; }
.sidebar-nav a.active svg { opacity: 1; }
.sidebar-nav a:hover {
  background: rgba(255,255,255,.04);
  color: #fff;
  text-decoration: none;
}
.sidebar-nav a.active {
  background: var(--accent);
  color: #fff;
  font-weight: 500;
  box-shadow: 0 2px 8px rgba(249,115,22,.4);
}
.sidebar-nav .nav-badge {
  margin-left: auto;
  min-width: 20px;
  padding: 2px 6px;
  background: var(--danger);
  color: #fff;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 600;
  text-align: center;
  line-height: 1.3;
  font-feature-settings: "tnum";
}
.sidebar-nav a.active .nav-badge { background: rgba(255,255,255,.25); }
.sidebar-nav .icon {
  width: 18px; height: 18px;
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}

.sidebar-user {
  padding: 16px 20px;
  border-top: 1px solid rgba(255,255,255,.06);
  display: flex;
  align-items: center;
  gap: 10px;
}
.sidebar-user .avatar {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: linear-gradient(135deg, #f97316, #fbbf24);
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-weight: 600; font-size: 14px;
}
.sidebar-user .info { flex: 1; min-width: 0; }
.sidebar-user .info .name {
  color: #fff;
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.3;
}
.sidebar-user .info .role {
  color: #94a3b8;
  font-size: 11px;
  letter-spacing: 0;
  text-transform: none;
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sidebar-user .logout {
  color: #94a3b8;
  width: 32px; height: 32px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 6px;
  transition: all .15s;
}
.sidebar-user .logout:hover { background: rgba(239,68,68,.1); color: var(--danger); }

/* ===== Main ===== */
.main {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.topbar {
  height: var(--header-h);
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  padding: 0 32px;
  position: sticky;
  top: 0;
  z-index: 10;
}
.topbar .page-title {
  font-size: 18px;
  font-weight: 600;
  color: var(--text);
  letter-spacing: -0.01em;
}
.topbar .breadcrumb {
  font-size: 12px;
  color: var(--text-subtle);
  margin-top: 2px;
}
.topbar-right {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 16px;
  color: var(--text-muted);
  font-size: 13px;
}
.topbar-date {
  padding-left: 16px;
  border-left: 1px solid var(--border);
}
.bell-btn {
  position: relative;
  background: none;
  border: none;
  cursor: pointer;
  width: 38px; height: 38px;
  display: inline-flex;
  align-items: center; justify-content: center;
  border-radius: 8px;
  color: var(--text-muted);
  transition: all .15s;
}
.bell-btn:hover { background: var(--surface-alt); color: var(--text); }
.bell-dot {
  position: absolute;
  top: 7px; right: 8px;
  width: 8px; height: 8px;
  background: var(--danger);
  border-radius: 50%;
  border: 2px solid var(--surface);
  display: none;
}
.bell-btn.has-notif .bell-dot { display: block; }
.bell-count {
  position: absolute;
  top: -2px; right: -2px;
  min-width: 18px; height: 18px;
  padding: 0 5px;
  background: var(--danger);
  color: #fff;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--surface);
  line-height: 1;
}

/* Notification dropdown */
.bell-wrap { position: relative; }
.notif-drop {
  display: none;
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  width: 320px;
  max-width: 90vw;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: var(--shadow-lg);
  z-index: 50;
  overflow: hidden;
}
.notif-drop.open { display: block; }
.notif-head {
  padding: 14px 16px;
  font-weight: 600;
  font-size: 14px;
  border-bottom: 1px solid var(--border);
  color: var(--text);
}
.notif-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  color: var(--text);
  font-size: 13px;
  border-bottom: 1px solid var(--border);
  transition: background .1s;
}
.notif-item:last-of-type { border-bottom: none; }
.notif-item:hover { background: var(--surface-alt); text-decoration: none; }
.notif-item svg { color: var(--accent); flex-shrink: 0; }
.notif-empty {
  padding: 30px 16px;
  text-align: center;
  color: var(--text-subtle);
  font-size: 13px;
}
.notif-foot {
  padding: 10px 16px;
  background: var(--surface-alt);
  text-align: center;
  color: var(--text-subtle);
  border-top: 1px solid var(--border);
}

/* Sidebar avatar img fallback */
.sidebar-user .avatar-img {
  width: 36px; height: 36px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  border: 0;
  box-shadow: none;
}

.content {
  padding: 28px 32px 60px;
  flex: 1;
}

/* ===== Page head ===== */
.page-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
}
.page-head h1 {
  margin: 0;
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.02em;
}
.page-head .desc {
  color: var(--text-muted);
  font-size: 13px;
  margin-top: 4px;
}

/* ===== Cards ===== */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 24px;
  margin-bottom: 20px;
  box-shadow: var(--shadow-sm);
}
.card h2, .card h3 { margin-top: 0; }
.card h3 {
  font-size: 15px;
  font-weight: 600;
  margin-bottom: 16px;
  color: var(--text);
  letter-spacing: -0.01em;
}
.card.compact { padding: 0; }
.card.compact .card-head {
  padding: 16px 20px;
  border-bottom: 1px solid var(--border);
  display: flex; align-items: center; justify-content: space-between;
}
.card.compact .card-head h3 { margin: 0; }

/* ===== Stats ===== */
.stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
  margin-bottom: 24px;
}
.stat {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px;
  position: relative;
  overflow: hidden;
  transition: all .2s;
}
.stat:hover {
  border-color: var(--border-strong);
  box-shadow: var(--shadow);
  transform: translateY(-1px);
}
.stat .label {
  color: var(--text-muted);
  font-size: 13px;
  font-weight: 500;
  margin-bottom: 8px;
}
.stat .value {
  font-size: 28px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--text);
  font-feature-settings: "tnum";
}
.stat .trend {
  margin-top: 6px;
  font-size: 12px;
  color: var(--success);
}
.stat::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 3px; height: 100%;
  background: var(--accent);
  opacity: .8;
}
.stat.success::before { background: var(--success); }
.stat.warning::before { background: var(--warning); }
.stat.danger::before { background: var(--danger); }

/* ===== Buttons ===== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 38px;
  padding: 0 16px;
  border-radius: 6px;
  border: 1px solid transparent;
  background: var(--accent);
  color: #fff;
  cursor: pointer;
  font-size: 14px;
  font-family: inherit;
  font-weight: 500;
  text-decoration: none;
  transition: all .15s;
  line-height: 1;
  white-space: nowrap;
  box-sizing: border-box;
}
.btn svg { flex-shrink: 0; }
.btn:hover { background: var(--accent-hover); text-decoration: none; color: #fff; }
.btn:active { transform: translateY(1px); }

.btn-primary { background: var(--accent); }
.btn-success { background: var(--success); }
.btn-success:hover { background: #059669; color: #fff; }
.btn-danger  { background: var(--danger); }
.btn-danger:hover { background: #dc2626; color: #fff; }
.btn-warning { background: var(--warning); color: #fff; }

.btn-secondary {
  background: var(--surface);
  color: var(--text);
  border-color: var(--border-strong);
}
.btn-secondary:hover { background: var(--surface-alt); color: var(--text); }

.btn-outline {
  background: transparent;
  border-color: var(--border-strong);
  color: var(--text);
}
.btn-outline:hover { background: var(--surface-alt); color: var(--text); }

.btn-ghost {
  background: transparent;
  color: var(--text-muted);
}
.btn-ghost:hover { background: var(--surface-alt); color: var(--text); }

.btn-sm { height: 30px; padding: 0 10px; font-size: 13px; border-radius: 5px; }
.btn-lg { height: 44px; padding: 0 24px; font-size: 15px; }
.btn-block { width: 100%; }
.btn-icon { padding: 0; width: 38px; }
.btn-icon.btn-sm { width: 30px; }

/* ===== Tables ===== */
.table-wrap { overflow-x: auto; }
table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  background: var(--surface);
}
th, td {
  text-align: left;
  padding: 14px 16px;
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
  font-size: 14px;
  white-space: nowrap;
}
th {
  background: var(--surface-alt);
  font-weight: 600;
  font-size: 11px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: .05em;
  padding-top: 12px;
  padding-bottom: 12px;
}
td.wrap, th.wrap { white-space: normal; }
table.tbl-fixed { table-layout: fixed; }
table.tbl-fixed td { overflow: hidden; text-overflow: ellipsis; }
table.tbl-fixed td.wrap { white-space: normal; overflow: visible; text-overflow: clip; word-break: break-word; }
tbody tr { transition: background .1s; }
tbody tr:hover td { background: #fafbfc; }
tbody tr:last-child td { border-bottom: none; }
td.right, th.right { text-align: right; font-feature-settings: "tnum"; }
td.center, th.center { text-align: center; }
td small { color: var(--text-subtle); font-size: 12px; }

.table-empty {
  padding: 48px 20px;
  text-align: center;
  color: var(--text-subtle);
}

/* ===== Forms ===== */
.form-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px 18px;
  margin-bottom: 14px;
}
.form-row.cols-2 { grid-template-columns: repeat(2, 1fr); }
.form-row.cols-1 { grid-template-columns: minmax(0, 1fr); }
.form-group { min-width: 0; }
@media (max-width: 700px) {
  .form-row, .form-row.cols-2 { grid-template-columns: minmax(0, 1fr); }
}
.form-group label {
  display: block;
  margin-bottom: 7px;
  font-weight: 500;
  font-size: 13px;
  color: var(--text);
  letter-spacing: -0.005em;
}
.form-group label .req { color: var(--danger); margin-left: 2px; }
.form-group label small { font-weight: 400; color: var(--text-subtle); font-size: 12px; margin-left: 4px; }

/* Form controls — ทุกช่องสูงเท่ากัน 38px */
input:not([type=checkbox]):not([type=radio]):not([type=submit]):not([type=button]):not([type=reset]):not([type=file]):not([type=hidden]):not([type=range]):not([type=color]),
select, textarea {
  display: block;
  width: 100%;
  box-sizing: border-box;
  height: 38px;
  min-height: 38px;
  max-height: 38px;
  padding: 0 12px;
  margin: 0;
  border: 1px solid var(--border-strong);
  border-radius: 6px;
  font-family: inherit;
  font-size: 14px;
  line-height: 36px;
  background: var(--surface);
  color: var(--text);
  vertical-align: middle;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}
textarea {
  height: auto;
  min-height: 90px;
  max-height: none;
  padding: 9px 12px;
  line-height: 1.5;
  resize: vertical;
}
select {
  padding-right: 32px;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  cursor: pointer;
}
/* ซ่อน native icon ของ date / number ให้ทุกช่องเท่ากัน */
input[type=number] { -moz-appearance: textfield; }
input[type=number]::-webkit-outer-spin-button,
input[type=number]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
input[type=date]::-webkit-calendar-picker-indicator {
  opacity: .5;
  cursor: pointer;
  padding: 0;
  margin: 0;
}
input[type=date] {
  font-family: inherit;
  line-height: normal;
}
input[type=file] {
  display: block;
  width: 100%;
  box-sizing: border-box;
  height: 38px;
  padding: 7px 10px;
  border: 1px solid var(--border-strong);
  border-radius: 6px;
  font-family: inherit;
  font-size: 13px;
  background: var(--surface);
  color: var(--text-muted);
  cursor: pointer;
}
input[type=file]::-webkit-file-upload-button {
  background: var(--surface-alt);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 3px 10px;
  font-family: inherit;
  font-size: 12px;
  color: var(--text);
  cursor: pointer;
  margin-right: 10px;
}
input::placeholder, textarea::placeholder { color: var(--text-subtle); }

input:hover:not([readonly]), select:hover, textarea:hover { border-color: #94a3b8; }
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 2px rgba(249,115,22,.15);
}
input[readonly] { background: var(--surface-alt); color: var(--text-muted); cursor: default; }
input:disabled, select:disabled, textarea:disabled { background: var(--surface-alt); color: var(--text-subtle); cursor: not-allowed; }

.form-hint {
  font-size: 12px;
  color: var(--text-subtle);
  margin-top: 4px;
}

.form-divider {
  height: 1px;
  background: var(--border);
  margin: 24px -24px;
}

.section-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: .05em;
  margin: 24px 0 14px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border);
}
.section-title:first-child { margin-top: 0; }

/* ===== Badges ===== */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.4;
}
.badge::before {
  content: '';
  width: 6px; height: 6px;
  border-radius: 50%;
  background: currentColor;
}
.badge-secondary { background: #f1f5f9; color: #475569; }
.badge-warning   { background: var(--warning-bg); color: #b45309; }
.badge-info      { background: var(--info-bg); color: #1d4ed8; }
.badge-success   { background: var(--success-bg); color: #047857; }
.badge-danger    { background: var(--danger-bg); color: #b91c1c; }
.badge-dark      { background: #e2e8f0; color: #0f172a; }

/* ===== Alerts ===== */
.alert {
  padding: 12px 16px;
  border-radius: var(--radius-sm);
  margin-bottom: 16px;
  border: 1px solid transparent;
  font-size: 14px;
  display: flex;
  align-items: flex-start;
  gap: 10px;
}
.alert-danger  { background: var(--danger-bg);  color: #991b1b; border-color: #fecaca; }
.alert-success { background: var(--success-bg); color: #065f46; border-color: #a7f3d0; }
.alert-info    { background: var(--info-bg);    color: #1e40af; border-color: #bfdbfe; }
.alert-warning { background: var(--warning-bg); color: #92400e; border-color: #fde68a; }

/* ===== Filter bar ===== */
.filter-bar {
  display: flex;
  gap: 12px;
  align-items: flex-end;
  flex-wrap: wrap;
  margin-bottom: 20px;
  background: var(--surface);
  padding: 16px 20px;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
}
.filter-bar .form-group { margin: 0; min-width: 160px; flex: 1; }
.filter-bar .form-group.grow { flex: 2; }

/* ===== Actions ===== */
.actions { display: flex; gap: 6px; }
.row-actions {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.row-actions .btn { white-space: nowrap; }

/* ===== Login ===== */
.login-wrap {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #1c1917 0%, #292524 50%, #7c2d12 100%);
  padding: 20px;
  position: relative;
  overflow: hidden;
}
.login-wrap::before {
  content: '';
  position: absolute;
  width: 600px; height: 600px;
  background: radial-gradient(circle, rgba(249,115,22,.18) 0%, transparent 70%);
  top: -200px; right: -200px;
  border-radius: 50%;
}
.login-wrap::after {
  content: '';
  position: absolute;
  width: 500px; height: 500px;
  background: radial-gradient(circle, rgba(251,191,36,.12) 0%, transparent 70%);
  bottom: -150px; left: -150px;
  border-radius: 50%;
}
.login-card {
  background: var(--surface);
  padding: 40px 44px;
  border-radius: 16px;
  box-shadow: 0 25px 50px -12px rgba(0,0,0,.4);
  width: 100%;
  max-width: 420px;
  position: relative;
  z-index: 1;
}
.login-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 8px;
}
.login-brand .logo-mark {
  width: 44px; height: 44px;
  background: linear-gradient(135deg, #f97316 0%, #fbbf24 100%);
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; color: #fff; font-size: 18px;
  box-shadow: 0 8px 20px rgba(249,115,22,.4);
}
.login-brand h1 {
  margin: 0;
  font-size: 22px;
  font-weight: 600;
  color: var(--text);
  letter-spacing: -0.02em;
}
.login-card .sub {
  color: var(--text-muted);
  margin-bottom: 28px;
  font-size: 13px;
}
.login-card .form-group { margin-bottom: 16px; }
.login-card .btn { width: 100%; justify-content: center; padding: 11px; margin-top: 8px; }
.login-footer {
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid var(--border);
  font-size: 12px;
  color: var(--text-subtle);
  text-align: center;
}
.login-card .divider {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 18px 0 14px;
  color: var(--text-subtle);
  font-size: 12px;
}
.login-card .divider::before,
.login-card .divider::after { content: ''; flex: 1; height: 1px; background: var(--border); }
.g_id_signin { display: flex; justify-content: center; margin: 14px 0 6px; }
#g_id_onload { display: none; }

/* Invite public page */
.invite-wrap {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #1c1917 0%, #7c2d12 100%);
  padding: 20px;
}
.invite-card {
  background: #fff;
  padding: 40px;
  border-radius: 14px;
  max-width: 480px;
  width: 100%;
  box-shadow: 0 25px 50px -12px rgba(0,0,0,.4);
  text-align: center;
}
.invite-card .logo-mark {
  width: 56px; height: 56px;
  margin: 0 auto 16px;
  background: linear-gradient(135deg, #f97316 0%, #fbbf24 100%);
  border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; color: #fff; font-size: 24px;
  box-shadow: 0 8px 20px rgba(249,115,22,.4);
}
.invite-card h1 {
  margin: 0 0 6px;
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.02em;
}
.invite-card .sub { color: var(--text-muted); margin-bottom: 24px; font-size: 14px; }
.invite-card .details {
  background: var(--surface-alt);
  border-radius: 8px;
  padding: 16px;
  text-align: left;
  margin-bottom: 24px;
  font-size: 13px;
}
.invite-card .details .row { display: flex; justify-content: space-between; padding: 4px 0; }
.invite-card .details .row .lbl { color: var(--text-muted); }
.invite-card .details .row .val { font-weight: 500; }

/* ===== Timeline / history ===== */
.history-item {
  padding: 10px 0;
  border-bottom: 1px dashed var(--border);
}
.history-item:last-child { border-bottom: none; }
.history-item .who {
  font-weight: 500;
  font-size: 13px;
  color: var(--text);
}
.history-item .when {
  font-size: 12px;
  color: var(--text-subtle);
  font-family: "IBM Plex Mono", monospace;
}

/* ===== Mobile menu toggle (hidden on desktop) ===== */
.menu-toggle {
  display: none;
  background: none;
  border: none;
  color: var(--text);
  cursor: pointer;
  padding: 0;
  margin-right: 12px;
  width: 38px;
  height: 38px;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
}
.menu-toggle:hover { background: var(--surface-alt); }

/* Backdrop ด้านหลัง sidebar บนมือถือ */
.sidebar-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, .55);
  z-index: 90;
  backdrop-filter: blur(2px);
  animation: fadeIn .2s;
}
.sidebar-backdrop.open { display: block; }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

/* ===== Responsive ===== */
@media (max-width: 900px) {
  .app {
    grid-template-columns: minmax(0, 1fr);
  }
  .sidebar {
    position: fixed;
    top: 0; left: 0; bottom: 0;
    width: 280px;
    max-width: 85vw;
    z-index: 100;
    transform: translateX(-100%);
    transition: transform .25s ease;
    box-shadow: 4px 0 24px rgba(0,0,0,.2);
  }
  .sidebar.open { transform: translateX(0); }
  .topbar { padding: 0 16px; height: 56px; }
  .content { padding: 16px; padding-bottom: 60px; }
  .menu-toggle { display: inline-flex; }
  .topbar .page-title { font-size: 16px; }
  .topbar-date { display: none; }   /* ซ่อนวันที่ถ้าหน้าจอแคบ */
  .page-head {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }
  .page-head > div:last-child, .page-head > a:last-child { align-self: stretch; }
  .home-grid { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .grid-2 { grid-template-columns: minmax(0, 1fr); }
  .stats { grid-template-columns: 1fr 1fr; gap: 10px; }
  .stat { padding: 14px; }
  .stat .value { font-size: 20px; }
  .card { padding: 16px; }
  .profile-head { padding: 20px; }
  .profile-head-inner { flex-direction: column; align-items: flex-start; text-align: left; gap: 16px; }
  .profile-head .actions { margin-left: 0; width: 100%; }
  .profile-head .actions .btn { width: 100%; }
  .avatar-img.xl, .avatar-initial.xl { width: 80px; height: 80px; font-size: 32px; }
  .filter-bar { padding: 12px; gap: 10px; }
  .filter-bar .form-group { min-width: 100%; }
  .filter-bar .btn { width: 100%; }
  .mc-body { flex-direction: column; text-align: center; gap: 14px; }
  .mc-foot { grid-template-columns: minmax(0, 1fr); gap: 10px; text-align: center; }
  .modal { border-radius: 10px; }
  .modal-body { padding: 16px; max-height: calc(100vh - 180px); }
  .modal-head, .modal-foot { padding: 14px 16px; }
  .modal-backdrop { padding: 10px; align-items: flex-end; }
  .modal { max-height: calc(100vh - 20px); }
  .tabs { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .tabs::-webkit-scrollbar { height: 2px; }
}

@media (max-width: 500px) {
  .topbar .page-title { font-size: 15px; }
  .stats { grid-template-columns: minmax(0, 1fr); }
  .home-greet h1 { font-size: 20px; }
  .info-grid { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .cal-day { min-height: 44px; padding: 4px; font-size: 11px; }
  .cal-day .cal-d { font-size: 12px; }
  .cal-ev { font-size: 9px; }
}

/* ===== Utilities ===== */
.mt-0 { margin-top: 0 !important; }
.mb-0 { margin-bottom: 0 !important; }
.text-muted { color: var(--text-muted); }
.text-right { text-align: right; }
.text-center { text-align: center; }
.font-mono { font-family: "IBM Plex Mono", monospace; }
.strong { font-weight: 600; }

.grid-2 { display: grid; grid-template-columns: 2fr 1fr; gap: 20px; }
@media (max-width: 900px) { .grid-2 { grid-template-columns: minmax(0, 1fr); } }

.money {
  font-family: "IBM Plex Mono", monospace;
  font-feature-settings: "tnum";
  font-weight: 500;
}
.money-lg { font-size: 22px; font-weight: 600; color: var(--accent); }

/* ===== Home page ===== */
.home-greet { margin-bottom: 24px; }
.home-greet h1 { margin: 0 0 4px; font-size: 26px; font-weight: 600; letter-spacing: -0.02em; }
.home-greet .desc { color: var(--text-muted); font-size: 14px; }
.home-grid {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 24px;
  align-items: start;
}
@media (max-width: 900px) { .home-grid { grid-template-columns: minmax(0, 1fr); } }

/* Member card */
.member-card {
  background: linear-gradient(135deg, #1c1917 0%, #44403c 55%, #7c2d12 100%);
  border-radius: 16px;
  color: #fff;
  padding: 24px;
  position: relative;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0,0,0,.15);
  margin-bottom: 20px;
}
.member-card::before {
  content: '';
  position: absolute;
  width: 300px; height: 300px;
  background: radial-gradient(circle, rgba(249,115,22,.35) 0%, transparent 70%);
  top: -140px; right: -100px;
  border-radius: 50%;
}
.member-card::after {
  content: '';
  position: absolute;
  width: 200px; height: 200px;
  background: radial-gradient(circle, rgba(251,191,36,.18) 0%, transparent 70%);
  bottom: -100px; left: -60px;
  border-radius: 50%;
}
.mc-header {
  position: relative; z-index: 1;
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 22px;
}
.mc-brand { display: flex; align-items: center; gap: 10px; }
.mc-logo {
  width: 36px; height: 36px;
  background: linear-gradient(135deg, #f97316 0%, #fbbf24 100%);
  border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 16px;
  box-shadow: 0 4px 12px rgba(249,115,22,.4);
}
.mc-brand-name { font-weight: 600; font-size: 15px; }
.mc-brand-sub { font-size: 10px; letter-spacing: .15em; color: rgba(255,255,255,.6); font-weight: 500; }
.mc-code {
  font-family: "IBM Plex Mono", monospace;
  font-size: 12px;
  color: rgba(255,255,255,.75);
  background: rgba(255,255,255,.1);
  padding: 4px 10px;
  border-radius: 6px;
  letter-spacing: .05em;
}
.mc-body {
  position: relative; z-index: 1;
  display: flex; align-items: center; gap: 20px;
  margin-bottom: 24px;
}
.mc-avatar {
  width: 88px; height: 88px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid rgba(255,255,255,.2);
  box-shadow: 0 8px 20px rgba(0,0,0,.3);
}
.mc-name { font-size: 20px; font-weight: 600; letter-spacing: -0.01em; margin-bottom: 2px; }
.mc-nick { font-size: 13px; color: rgba(255,255,255,.7); margin-bottom: 4px; }
.mc-pos { font-size: 13px; color: rgba(255,255,255,.85); }
.mc-foot {
  position: relative; z-index: 1;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  padding-top: 20px;
  border-top: 1px solid rgba(255,255,255,.1);
}
.mc-stat .l { font-size: 10px; color: rgba(255,255,255,.55); letter-spacing: .08em; text-transform: uppercase; margin-bottom: 4px; }
.mc-stat .v { font-size: 14px; font-weight: 500; }

/* Check-in card */
.checkin-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 20px 24px;
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 24px;
  align-items: center;
  margin-bottom: 20px;
  box-shadow: var(--shadow-sm);
}
@media (max-width: 700px) {
  .checkin-card { grid-template-columns: minmax(0, 1fr); gap: 16px; text-align: left; }
}
.ci-left { text-align: center; padding-right: 24px; border-right: 1px solid var(--border); min-width: 120px; }
@media (max-width: 700px) {
  .ci-left { padding-right: 0; border-right: none; border-bottom: 1px solid var(--border); padding-bottom: 12px; text-align: left; display: flex; justify-content: space-between; align-items: center; }
}
.ci-clock { font-size: 36px; font-weight: 700; color: var(--accent); font-feature-settings: "tnum"; letter-spacing: -0.02em; line-height: 1; }
.ci-today { font-size: 12px; color: var(--text-muted); margin-top: 4px; }
.ci-status { display: flex; gap: 32px; flex-wrap: wrap; }
.ci-row { display: flex; align-items: center; gap: 10px; }
.ci-icon {
  width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--surface-alt);
  color: var(--text-subtle);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.ci-icon.in.done  { background: var(--success-bg); color: #047857; }
.ci-icon.out.done { background: var(--info-bg); color: #1d4ed8; }
.ci-lbl { font-size: 11px; color: var(--text-muted); text-transform: uppercase; letter-spacing: .05em; font-weight: 500; }
.ci-val { font-size: 18px; font-weight: 600; font-feature-settings: "tnum"; display: flex; align-items: center; gap: 6px; }
.ci-done {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--success);
  font-weight: 500;
  padding: 10px 20px;
  background: var(--success-bg);
  border-radius: 8px;
}

/* Selfie modal */
.selfie-stage {
  position: relative;
  background: #0f172a;
  border-radius: 10px;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  margin-bottom: 14px;
}
.selfie-stage video,
.selfie-stage img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transform: scaleX(-1); /* mirror */
}
.selfie-error {
  position: absolute;
  inset: 0;
  display: flex !important;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: #fff;
  background: rgba(239, 68, 68, 0.9);
  padding: 20px;
  font-size: 13px;
}
.selfie-controls { display: flex; justify-content: center; gap: 10px; }

/* Quick actions */
.quick-actions {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 10px;
}
.quick-actions.tall {
  grid-auto-rows: 1fr;
  height: 100%;
}
.quick-actions.tall .qa-card { padding: 20px 22px; }
.qa-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 14px 18px;
  display: flex;
  align-items: center;
  gap: 14px;
  color: var(--text);
  transition: all .15s;
}
.qa-card:hover {
  border-color: var(--accent);
  box-shadow: var(--shadow);
  text-decoration: none;
  transform: translateY(-1px);
}
.qa-card svg:last-child { color: var(--text-subtle); }
.qa-card:hover svg:last-child { color: var(--accent); }
.qa-icon {
  width: 44px; height: 44px;
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.qa-blue   { background: #dbeafe; color: #2563eb; }
.qa-green  { background: #d1fae5; color: #059669; }
.qa-orange { background: #ffedd5; color: #ea580c; }
.qa-text { flex: 1; }
.qa-title { font-weight: 500; font-size: 14px; }
.qa-desc { color: var(--text-muted); font-size: 12px; margin-top: 2px; }

/* Calendar */
.cal-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; }
.cal-nav { display: flex; align-items: center; gap: 4px; }
.cal-title {
  font-weight: 600;
  font-size: 14px;
  min-width: 140px;
  text-align: center;
  color: var(--text);
}
.cal-btn {
  width: 28px; height: 28px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 6px;
  color: var(--text-muted);
}
.cal-btn:hover { background: var(--surface-alt); color: var(--text); text-decoration: none; }

.cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
}
.cal-dow {
  text-align: center;
  padding: 6px 0;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: .05em;
}
.cal-day {
  min-height: 56px;
  padding: 6px;
  border-radius: 6px;
  background: var(--surface);
  border: 1px solid transparent;
  font-size: 12px;
  overflow: hidden;
  cursor: pointer;
  transition: all .12s;
}
.cal-day:hover:not(.empty) {
  background: var(--surface-alt);
  border-color: var(--border-strong);
  transform: translateY(-1px);
  box-shadow: var(--shadow-sm);
}
.cal-day.empty { background: transparent; cursor: default; }
.cal-day.empty:hover { background: transparent; border-color: transparent; transform: none; box-shadow: none; }
.cal-day .cal-d {
  font-weight: 500;
  color: var(--text);
  margin-bottom: 4px;
  font-size: 13px;
}
.cal-day.weekend { background: #fafbfc; }
.cal-day.weekend .cal-d { color: var(--text-muted); }
.cal-day.today {
  background: var(--accent-light);
  border-color: var(--accent);
}
.cal-day.today .cal-d { color: var(--accent); font-weight: 700; }
.cal-day.holiday-day { background: #fff1f2; border-color: #fecdd3; }
.cal-day.holiday-day .cal-d { color: #be123c; }

.cal-ev {
  display: flex;
  align-items: center;
  gap: 3px;
  font-size: 10px;
  padding: 2px 5px;
  border-radius: 3px;
  margin-top: 2px;
  overflow: hidden;
  background: var(--success-bg);
  color: #065f46;
}
.cal-ev svg { flex-shrink: 0; opacity: .8; }
.cal-ev span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cal-ev.ev-leave             { background: #e0f2fe; color: #075985; }
.cal-ev.ev-leave.pending     { background: var(--warning-bg); color: #92400e; }
.cal-ev.ev-birthday          { background: #fce7f3; color: #9d174d; }
.cal-ev.ev-holiday           { background: #fee2e2; color: #991b1b; font-weight: 500; }
.cal-ev.ev-event             { background: #f3e8ff; color: #6b21a8; }
.cal-more {
  font-size: 10px;
  color: var(--text-muted);
  padding: 2px 5px;
  margin-top: 2px;
  font-weight: 500;
}

/* Big calendar (full-width) */
.cal-head.big {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: 20px;
}
.cal-grid.big .cal-day { min-height: 110px; }
.cal-grid.big .cal-dow { padding: 10px 6px; font-size: 12px; }
@media (max-width: 700px) {
  .cal-grid.big .cal-day { min-height: 70px; padding: 4px; }
  .cal-grid.big .cal-dow { font-size: 10px; padding: 6px 2px; }
  .cal-grid.big .cal-ev span { display: none; }
  .cal-grid.big .cal-ev { justify-content: center; padding: 3px; }
}

.cal-legend {
  display: flex;
  justify-content: center;
  gap: 18px;
  margin-top: 16px;
  flex-wrap: wrap;
  font-size: 12px;
  color: var(--text-muted);
}
.cal-legend span { display: inline-flex; align-items: center; gap: 6px; }
.cal-legend .dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
.cal-legend .dot.today   { background: var(--accent); }
.cal-legend .dot.leave   { background: #075985; }
.cal-legend .dot.pending { background: var(--warning); }
.cal-legend .dot.birthday{ background: #ec4899; }
.cal-legend .dot.event   { background: #a855f7; }
.cal-legend .dot.holiday { background: #dc2626; }

/* Event list red variant (holidays) */
.ev-date.red .d { color: var(--danger); }

/* Day popup content */
.day-list { display: flex; flex-direction: column; gap: 10px; }
.day-empty {
  padding: 30px 10px;
  text-align: center;
  color: var(--text-subtle);
  font-size: 13px;
}
.day-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  background: var(--surface-alt);
  border-left: 3px solid var(--accent);
  border-radius: 0 8px 8px 0;
}
.day-item .day-icon {
  width: 36px; height: 36px;
  border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.day-item .day-info { flex: 1; min-width: 0; }
.day-item .day-type {
  font-size: 11px;
  color: var(--text-muted);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .05em;
  margin-bottom: 2px;
}
.day-item .day-label {
  font-size: 14px;
  color: var(--text);
  font-weight: 500;
  word-break: break-word;
}
.day-status {
  display: inline-block;
  padding: 1px 6px;
  background: var(--warning-bg);
  color: #92400e;
  border-radius: 10px;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
}

/* Event list */
.event-list { display: flex; flex-direction: column; gap: 10px; }
.event-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px;
  border-radius: 8px;
  background: var(--surface-alt);
}
.ev-date {
  width: 48px; height: 48px;
  background: var(--surface);
  border-radius: 8px;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  border: 1px solid var(--border);
  flex-shrink: 0;
}
.ev-date .d { font-size: 18px; font-weight: 600; color: var(--accent); line-height: 1; }
.ev-date .m { font-size: 10px; color: var(--text-muted); text-transform: uppercase; margin-top: 2px; }
.ev-info { flex: 1; min-width: 0; }
.ev-title { font-weight: 500; font-size: 14px; }
.ev-meta { font-size: 12px; color: var(--text-muted); margin-top: 2px; }

/* ===== Avatar ===== */
.avatar-img {
  width: 36px; height: 36px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--surface-alt);
  border: 2px solid var(--surface);
  box-shadow: var(--shadow-sm);
}
.avatar-img.sm { width: 28px; height: 28px; }
.avatar-img.lg { width: 96px; height: 96px; border-width: 3px; }
.avatar-img.xl { width: 128px; height: 128px; border-width: 4px; box-shadow: var(--shadow-lg); }
.avatar-initial {
  display: inline-flex;
  align-items: center; justify-content: center;
  width: 36px; height: 36px;
  border-radius: 50%;
  color: #fff;
  font-weight: 600;
  font-size: 14px;
  border: 2px solid var(--surface);
  box-shadow: var(--shadow-sm);
  flex-shrink: 0;
}
.avatar-initial.sm { width: 28px; height: 28px; font-size: 12px; }
.avatar-initial.lg { width: 96px; height: 96px; font-size: 36px; border-width: 3px; }
.avatar-initial.xl { width: 128px; height: 128px; font-size: 48px; border-width: 4px; box-shadow: var(--shadow-lg); }

.emp-cell { display: flex; align-items: center; gap: 10px; }
.emp-cell .name { font-weight: 500; }
.emp-cell .nick { color: var(--text-subtle); font-size: 12px; }

/* ===== Tabs ===== */
.tabs {
  display: flex;
  gap: 2px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 24px;
  overflow-x: auto;
}
.tabs a, .tabs button {
  padding: 12px 18px;
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--text-muted);
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  text-decoration: none;
  transition: all .15s;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: -1px;
}
.tabs a svg, .tabs button svg { opacity: .7; }
.tabs a.active svg, .tabs button.active svg { opacity: 1; }
.tabs a:hover, .tabs button:hover { color: var(--text); background: var(--surface-alt); text-decoration: none; }
.tabs a.active, .tabs button.active {
  color: var(--accent);
  border-bottom-color: var(--accent);
}
.tab-panel { display: none; }
.tab-panel.active { display: block; }

/* ===== Profile Header ===== */
.profile-head {
  background: linear-gradient(135deg, var(--primary) 0%, #78350f 100%);
  border-radius: var(--radius);
  padding: 40px;
  color: #fff;
  position: relative;
  overflow: hidden;
  margin-bottom: 24px;
}
.profile-head::before {
  content: '';
  position: absolute;
  top: -100px; right: -100px;
  width: 400px; height: 400px;
  background: radial-gradient(circle, rgba(249,115,22,.25) 0%, transparent 70%);
  border-radius: 50%;
}
.profile-head-inner {
  display: flex;
  align-items: center;
  gap: 28px;
  position: relative;
  z-index: 1;
}
.profile-head h2 {
  margin: 0 0 4px;
  font-size: 24px;
  font-weight: 600;
  letter-spacing: -0.02em;
}
.profile-head .code {
  font-family: "IBM Plex Mono", monospace;
  font-size: 12px;
  color: rgba(255,255,255,.65);
  letter-spacing: .05em;
  margin-bottom: 10px;
}
.profile-head .meta {
  display: flex;
  gap: 20px;
  margin-top: 16px;
  flex-wrap: wrap;
  color: rgba(255,255,255,.85);
  font-size: 13px;
}
.profile-head .meta .mi { display: inline-flex; align-items: center; gap: 7px; }
.profile-head .meta .mi svg { opacity: .75; }
.profile-head .position { color: rgba(255,255,255,.85); font-size: 14px; margin-top: 2px; }
.profile-head .actions { margin-left: auto; z-index: 2; position: relative; }

.info-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 20px 32px;
}
.info-item .label {
  font-size: 12px;
  color: var(--text-muted);
  font-weight: 500;
  margin-bottom: 5px;
}
.info-item .label .lbl-icn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.info-item .label .lbl-icn svg {
  color: var(--accent);
  opacity: .9;
  flex-shrink: 0;
}
.info-item .value {
  font-size: 14px;
  color: var(--text);
  font-weight: 500;
}
.info-item .value.empty { color: var(--text-subtle); font-weight: 400; font-style: italic; }

/* ===== Modal ===== */
.modal-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, .6);
  backdrop-filter: blur(4px);
  z-index: 100;
  align-items: flex-start;
  justify-content: center;
  padding: 40px 20px;
  overflow-y: auto;
}
.modal-backdrop.open { display: flex; }
.modal {
  background: var(--surface);
  border-radius: var(--radius);
  max-width: 820px;
  width: 100%;
  box-shadow: var(--shadow-lg);
  animation: modalIn .2s ease-out;
}
@keyframes modalIn {
  from { opacity: 0; transform: translateY(-20px); }
  to { opacity: 1; transform: translateY(0); }
}
.modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 24px;
  border-bottom: 1px solid var(--border);
}
.modal-head h3 { margin: 0; font-size: 16px; font-weight: 600; }
.modal-close {
  background: none;
  border: none;
  font-size: 22px;
  color: var(--text-muted);
  cursor: pointer;
  width: 32px; height: 32px;
  border-radius: 6px;
}
.modal-close:hover { background: var(--surface-alt); color: var(--text); }
.modal-body { padding: 24px; max-height: calc(100vh - 220px); overflow-y: auto; }
.modal-foot {
  padding: 16px 24px;
  border-top: 1px solid var(--border);
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  background: var(--surface-alt);
  border-radius: 0 0 var(--radius) var(--radius);
}

/* ===== Document cards ===== */
.doc-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 14px;
}
.doc-card {
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 14px;
  background: var(--surface);
  display: flex;
  gap: 12px;
  align-items: center;
  transition: all .15s;
}
.doc-card:hover { border-color: var(--accent); box-shadow: var(--shadow); }
.doc-card .doc-icon {
  width: 44px; height: 44px;
  background: var(--accent-light);
  color: var(--accent);
  border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.doc-card .doc-icon.blue  { background: #dbeafe; color: #2563eb; }
.doc-card .doc-icon.green { background: #d1fae5; color: #059669; }
.doc-card .doc-icon.red   { background: #fee2e2; color: #dc2626; }
.doc-card .doc-icon.gray  { background: #f1f5f9; color: #64748b; }
.doc-card .info { flex: 1; min-width: 0; }
.doc-card .name {
  font-weight: 500;
  font-size: 14px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.doc-card .meta { font-size: 12px; color: var(--text-muted); }
.doc-card .del {
  color: var(--text-subtle);
  background: none; border: none; cursor: pointer;
  padding: 4px;
}
.doc-card .del:hover { color: var(--danger); }

.doc-upload {
  border: 2px dashed var(--border-strong);
  border-radius: var(--radius-sm);
  padding: 20px;
  text-align: center;
  color: var(--text-muted);
  cursor: pointer;
  transition: all .15s;
}
.doc-upload:hover { border-color: var(--accent); background: var(--accent-light); color: var(--accent); }

/* Toggle switch */
.switch {
  position: relative;
  display: inline-block;
  width: 40px;
  height: 22px;
  vertical-align: middle;
}
.switch input { opacity: 0; width: 0; height: 0; }
.switch .slider {
  position: absolute;
  cursor: pointer;
  inset: 0;
  background-color: #cbd5e1;
  border-radius: 22px;
  transition: .2s;
}
.switch .slider:before {
  position: absolute;
  content: "";
  height: 16px; width: 16px;
  left: 3px; top: 3px;
  background-color: white;
  border-radius: 50%;
  transition: .2s;
}
.switch input:checked + .slider { background-color: var(--accent); }
.switch input:checked + .slider:before { transform: translateX(18px); }

/* Quota table inputs — ชิดตารางไม่มี margin */
.modal-body table input {
  height: 32px;
  padding: 0 10px;
  font-size: 13px;
}

/* Leave quota grid */
.quota-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}
@media (max-width: 500px) {
  .quota-grid { grid-template-columns: minmax(0, 1fr); }
}
.quota-item {
  background: var(--surface-alt);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px 12px;
}
.quota-item .qi-name { font-size: 12px; color: var(--text-muted); font-weight: 500; }
.quota-item .qi-val { font-size: 18px; font-weight: 600; margin: 2px 0 6px; font-feature-settings: "tnum"; }
.quota-item .qi-val small { font-size: 11px; color: var(--text-subtle); font-weight: 400; }
.quota-item .qi-bar {
  height: 4px;
  background: #e2e8f0;
  border-radius: 2px;
  overflow: hidden;
}
.quota-item .qi-bar span {
  display: block;
  height: 100%;
  background: var(--success);
  transition: width .3s;
}
.quota-item.warning .qi-bar span { background: var(--warning); }
.quota-item.danger  .qi-bar span { background: var(--danger); }
.quota-item.danger  .qi-val { color: var(--danger); }

.quota-line {
  height: 4px;
  background: #e2e8f0;
  border-radius: 2px;
  margin-top: 6px;
  overflow: hidden;
}
.quota-line span { display: block; height: 100%; background: var(--success); transition: width .3s; }
.stat.warning .quota-line span { background: var(--warning); }
.stat.danger  .quota-line span { background: var(--danger); }
.quota-sub { font-size: 11px; color: var(--text-muted); margin-top: 4px; }

/* ======= Leaves management page ======= */
.leaves-layout {
  display: grid;
  grid-template-columns: minmax(0,1fr) 320px;
  gap: 20px;
  align-items: start;
}
@media (max-width: 1200px) {
  .leaves-layout { grid-template-columns: minmax(0, 1fr); }
}
.leaves-side { display: flex; flex-direction: column; gap: 16px; }

.leave-list { display: flex; flex-direction: column; }
.leave-item {
  display: grid;
  grid-template-columns: 56px 1fr auto;
  gap: 16px;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border);
  align-items: flex-start;
}
.leave-item:last-child { border-bottom: none; }
.leave-item:hover { background: var(--surface-alt); }
.leave-item.pending {
  border-left: 3px solid var(--warning);
  padding-left: 17px;
}

/* Date block */
.li-date {
  width: 56px;
  background: var(--surface-alt);
  border-radius: 10px;
  padding: 10px 6px;
  text-align: center;
  border: 1px solid var(--border);
}
.li-date-day {
  font-size: 22px;
  font-weight: 700;
  color: var(--accent);
  line-height: 1;
  font-feature-settings: "tnum";
}
.li-date-mon {
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 4px;
  font-weight: 500;
}

/* Main content */
.li-main { min-width: 0; }
.li-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
  flex-wrap: wrap;
}
.li-emp { min-width: 0; flex: 1; }
.li-name { font-size: 15px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.li-meta { font-size: 11px; color: var(--text-muted); margin-top: 1px; font-family: "IBM Plex Mono", monospace; }

.li-detail { font-size: 13px; color: var(--text-muted); }
.li-range {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--text);
  font-weight: 500;
  padding: 4px 10px;
  background: var(--surface-alt);
  border-radius: 6px;
  font-size: 13px;
  margin-bottom: 6px;
}
.li-range strong { color: var(--accent); margin-left: 4px; }
.li-reason {
  padding: 6px 0;
  color: var(--text);
  font-size: 13px;
  line-height: 1.5;
}
.li-reject {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  background: var(--danger-bg);
  color: #991b1b;
  font-size: 12px;
  border-radius: 6px;
  margin-top: 4px;
}
.li-footer-meta {
  display: flex;
  gap: 14px;
  font-size: 11px;
  color: var(--text-subtle);
  margin-top: 8px;
  flex-wrap: wrap;
}
.li-footer-meta span, .li-footer-meta a {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.li-attach {
  color: var(--accent);
  padding: 2px 8px;
  background: var(--accent-light);
  border-radius: 4px;
}
.li-attach:hover { background: var(--accent-soft); text-decoration: none; }

/* Action buttons */
.li-actions {
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-self: center;
}
@media (max-width: 700px) {
  .leave-item { grid-template-columns: minmax(0, 1fr); }
  .li-date { width: 100%; display: flex; gap: 10px; align-items: center; justify-content: center; }
  .li-date-day, .li-date-mon { display: inline; margin: 0; }
  .li-actions { flex-direction: row; }
}

/* Sidebar lists */
.side-list { padding: 8px 0; max-height: 400px; overflow-y: auto; }
.side-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  border-bottom: 1px solid var(--border);
  font-size: 13px;
}
.side-item:last-child { border-bottom: none; }
.side-item:hover { background: var(--surface-alt); }
.side-item .si-info { flex: 1; min-width: 0; }
.si-name { font-weight: 500; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.si-meta { font-size: 11px; color: var(--text-muted); margin-top: 1px; }
.si-tail { font-size: 13px; color: var(--accent); font-weight: 600; text-align: right; font-feature-settings: "tnum"; }
.si-tail small { color: var(--text-muted); font-weight: 400; margin-left: 2px; }
.si-tail-sm {
  font-size: 11px;
  color: var(--accent);
  background: var(--accent-light);
  padding: 3px 8px;
  border-radius: 10px;
  font-weight: 500;
}
.si-date-mini {
  width: 36px;
  text-align: center;
  background: var(--surface-alt);
  border-radius: 6px;
  padding: 4px 2px;
  border: 1px solid var(--border);
}
.si-date-mini .d { font-size: 15px; font-weight: 700; color: var(--accent); line-height: 1; font-feature-settings: "tnum"; }
.si-date-mini .m { font-size: 9px; color: var(--text-muted); margin-top: 2px; }

/* ===== Expense admin list — expandable cards ===== */
.ex-list { display: flex; flex-direction: column; }
.ex-card {
  border-bottom: 1px solid var(--border);
  background: var(--surface);
  transition: background .15s;
}
.ex-card:last-child { border-bottom: none; }
.ex-card.pending  { border-left: 3px solid var(--warning); }
.ex-card.approved { border-left: 3px solid var(--info); }
.ex-card.paid     { border-left: 3px solid var(--success); }

.ex-head {
  display: grid;
  grid-template-columns: minmax(200px, 1.4fr) minmax(0, 2fr) 120px 120px 24px;
  gap: 20px;
  padding: 16px 20px;
  align-items: center;
  cursor: pointer;
  transition: background .12s;
}
.ex-head > * { min-width: 0; }
.ex-card.pending  > .ex-head { padding-left: 17px; }
.ex-card.approved > .ex-head { padding-left: 17px; }
.ex-card.paid     > .ex-head { padding-left: 17px; }
.ex-head:hover { background: var(--surface-alt); }
.ex-card.expanded > .ex-head { background: var(--accent-light); }

.ex-head > input[type=checkbox] { align-self: center; }

.ex-emp { display: flex; align-items: center; gap: 10px; min-width: 0; }
.ex-emp > div { min-width: 0; }
.ex-name { font-weight: 600; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ex-sub { font-size: 11px; color: var(--text-muted); margin-top: 2px; display: flex; gap: 8px; flex-wrap: wrap; }
.ex-proxy { color: var(--info); }

.ex-project { min-width: 0; font-size: 13px; overflow: hidden; }
.ex-proj-name {
  display: flex; align-items: center; gap: 4px;
  font-weight: 500; color: var(--text);
  margin-bottom: 6px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ex-proj-name svg { flex-shrink: 0; }
.ex-cats { display: flex; gap: 4px; flex-wrap: wrap; margin-bottom: 4px; min-width: 0; }
.ex-cat {
  font-size: 10px;
  background: var(--surface-alt);
  color: var(--text-muted);
  padding: 2px 6px;
  border-radius: 4px;
  font-weight: 500;
}
.ex-cat-more { font-size: 10px; color: var(--text-subtle); padding: 2px 4px; }
.ex-counts { font-size: 11px; color: var(--text-subtle); display: inline-flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.ex-counts svg { opacity: .7; }

.ex-money { text-align: right; white-space: nowrap; }
.ex-money-val {
  font-size: 22px;
  font-weight: 700;
  color: var(--accent);
  font-feature-settings: "tnum";
  line-height: 1;
}
.ex-money-lbl { font-size: 11px; color: var(--text-muted); margin-top: 3px; }

.ex-stat { text-align: right; white-space: nowrap; }
.ex-meta { font-size: 11px; color: var(--text-muted); margin-top: 6px; display: inline-flex; align-items: center; gap: 3px; }

.ex-expand-btn {
  color: var(--text-subtle);
  transition: transform .2s;
  display: flex; align-items: center; justify-content: center;
}
.ex-card.expanded .ex-expand-btn { transform: rotate(180deg); color: var(--accent); }

/* Expandable body */
.ex-body {
  display: none;
  background: var(--surface-alt);
  border-top: 1px solid var(--border);
}
.ex-card.expanded .ex-body { display: block; animation: exBodyIn .25s ease-out; }
@keyframes exBodyIn {
  from { opacity: 0; max-height: 0; }
  to { opacity: 1; max-height: 1000px; }
}
.ex-body-inner {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: 20px;
  padding: 20px 24px;
}
@media (max-width: 900px) { .ex-body-inner { grid-template-columns: minmax(0, 1fr); } }

.ex-section-title {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: .05em;
  margin-bottom: 10px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.ex-items-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  background: var(--surface);
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid var(--border);
}
.ex-items-table th, .ex-items-table td {
  padding: 8px 12px;
  font-size: 13px;
  border-bottom: 1px solid var(--border);
}
.ex-items-table th {
  background: var(--surface-alt);
  font-weight: 600;
  font-size: 11px;
  color: var(--text-muted);
  text-transform: uppercase;
}
.ex-items-table tfoot td {
  background: var(--surface-alt);
  border-top: 2px solid var(--border);
  border-bottom: none;
  font-weight: 600;
}
.ex-items-table .right { text-align: right; }
.ex-items-table .center { text-align: center; }

.ex-side { display: flex; flex-direction: column; gap: 10px; }
.ex-info-box {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px 12px;
}
.ex-info-lbl {
  font-size: 10px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: .05em;
  font-weight: 600;
  margin-bottom: 4px;
}
.ex-info-val { font-size: 14px; font-weight: 500; }
.ex-info-acct {
  font-size: 16px;
  color: var(--accent);
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 2px;
}
.ex-info-acct:hover { opacity: .75; }
.ex-info-note { font-size: 13px; color: var(--text); line-height: 1.5; }

.ex-action-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 8px;
}
.ex-action-group form { display: flex; }
.ex-action-group form .btn { width: 100%; }

@media (max-width: 900px) {
  .ex-head {
    grid-template-columns: 1fr auto;
    row-gap: 10px;
  }
  .ex-emp { grid-column: 1 / -1; }
  .ex-project { grid-column: 1 / -1; order: 3; }
  .ex-money { grid-column: 1; order: 4; text-align: left; }
  .ex-stat { grid-column: 2; order: 5; text-align: right; }
  .ex-expand-btn { grid-column: 2; order: 2; }
}

/* ===== Expense grouped by person (scheduled tab) ===== */
.ex-grouped { padding: 16px; display: flex; flex-direction: column; gap: 16px; }
.ex-group {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
  border-left: 4px solid var(--info);
}
.ex-group-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 20px;
  background: linear-gradient(135deg, var(--surface-alt) 0%, #eff6ff 100%);
  gap: 20px;
  flex-wrap: wrap;
}
.ex-group-emp { display: flex; align-items: center; gap: 14px; min-width: 0; flex: 1; }
.ex-group-emp .avatar-img.lg, .ex-group-emp .avatar-initial.lg { width: 48px; height: 48px; font-size: 20px; border-width: 2px; }
.ex-group-name { font-weight: 600; font-size: 16px; }
.ex-group-sub { font-size: 12px; color: var(--text-muted); margin-top: 3px; font-family: "IBM Plex Mono", monospace; }
.ex-group-sum { text-align: right; white-space: nowrap; }
.ex-group-amt { font-size: 24px; font-weight: 700; color: var(--accent); font-feature-settings: "tnum"; line-height: 1; }
.ex-group-lbl { font-size: 11px; color: var(--text-muted); margin-top: 4px; }

.ex-group-body {
  padding: 4px 0;
}
.ex-mini-row {
  display: grid;
  grid-template-columns: 120px 1fr 90px 100px 20px;
  gap: 16px;
  align-items: center;
  padding: 10px 20px;
  border-top: 1px solid var(--border);
  cursor: pointer;
  transition: background .1s;
  font-size: 13px;
}
.ex-mini-row:hover { background: var(--surface-alt); }
.ex-mini-row > * { min-width: 0; }
.ex-mini-doc { display: flex; flex-direction: column; gap: 2px; }
.ex-mini-doc .font-mono { font-weight: 600; }
.ex-mini-proj { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--text); }
.ex-mini-cnt { color: var(--text-muted); font-size: 11px; text-align: center; }
.ex-mini-amt {
  text-align: right;
  font-weight: 600;
  color: var(--accent);
  font-family: "IBM Plex Mono", monospace;
  font-feature-settings: "tnum";
}
.ex-mini-arrow { color: var(--text-subtle); font-size: 20px; text-align: center; }

.ex-group-foot {
  padding: 14px 20px;
  background: var(--surface-alt);
  border-top: 1px solid var(--border);
}
.ex-group-foot .btn { width: 100%; }

@media (max-width: 700px) {
  .ex-mini-row { grid-template-columns: 1fr auto; gap: 8px; padding: 10px 14px; }
  .ex-mini-proj { grid-column: 1 / -1; order: 3; }
  .ex-mini-cnt { grid-column: 1 / -1; order: 4; text-align: left; }
}

/* ===== Expense item rows (reimbursement form) ===== */
.exp-items { display: flex; flex-direction: column; gap: 10px; }
.exp-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px;
  background: var(--surface-alt);
  border: 1px solid var(--border);
  border-radius: 10px;
  position: relative;
}
.exp-item-no {
  background: var(--accent);
  color: #fff;
  min-width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 600;
  flex-shrink: 0;
  margin-top: 20px;
}
.exp-item-fields { flex: 1; min-width: 0; }
.exp-item-rm {
  background: transparent;
  border: none;
  color: var(--text-subtle);
  cursor: pointer;
  padding: 6px;
  border-radius: 6px;
  margin-top: 14px;
}
.exp-item-rm:hover { color: var(--danger); background: var(--danger-bg); }

.exp-total {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 20px;
  background: var(--accent-light);
  border: 1px solid var(--accent);
  border-radius: 10px;
  margin-top: 16px;
}
.exp-total span:first-child { font-weight: 600; font-size: 14px; }

/* ===== Freelance detail modal (hero style) ===== */
.fr-detail-modal {
  overflow: hidden;
  position: relative;
  padding: 0;
  max-height: calc(100vh - 40px);
  display: flex;
  flex-direction: column;
}
.fr-modal-close {
  position: absolute;
  top: 16px; right: 16px;
  z-index: 5;
  width: 36px; height: 36px;
  border: none;
  background: rgba(255,255,255,.15);
  color: #fff;
  border-radius: 10px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(10px);
  transition: all .15s;
}
.fr-modal-close:hover { background: rgba(255,255,255,.25); }

.fr-hero {
  position: relative;
  background: linear-gradient(135deg, #1c1917 0%, #44403c 55%, #7c2d12 100%);
  color: #fff;
  padding: 28px 32px 24px;
  overflow: hidden;
}
.fr-hero-bg {
  position: absolute;
  top: -100px; right: -80px;
  width: 300px; height: 300px;
  background: radial-gradient(circle, rgba(249,115,22,.35) 0%, transparent 70%);
  border-radius: 50%;
}
.fr-hero-inner {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 18px;
  margin-bottom: 24px;
}
.fr-hero-avatar {
  width: 68px; height: 68px;
  border-radius: 50%;
  background: linear-gradient(135deg, #f97316, #fbbf24);
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 28px;
  color: #fff;
  box-shadow: 0 8px 20px rgba(249,115,22,.4);
  flex-shrink: 0;
}
.fr-hero-info { flex: 1; min-width: 0; }
.fr-hero-doc {
  font-size: 12px;
  color: rgba(255,255,255,.65);
  font-family: "IBM Plex Mono", monospace;
  letter-spacing: .05em;
  margin-bottom: 4px;
}
.fr-hero-name {
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.02em;
  margin-bottom: 6px;
}
.fr-hero-nick { opacity: .7; font-weight: 400; font-size: 16px; }
.fr-hero-meta {
  display: flex; gap: 16px;
  color: rgba(255,255,255,.75);
  font-size: 12px;
  flex-wrap: wrap;
}
.fr-hero-meta span { display: inline-flex; align-items: center; gap: 4px; }
.fr-hero-status { position: relative; z-index: 2; }
.fr-hero-status .badge { padding: 6px 12px; font-size: 12px; background: rgba(255,255,255,.15); color: #fff; border: 1px solid rgba(255,255,255,.2); backdrop-filter: blur(10px); }
.fr-hero-status .badge::before { background: #fbbf24; }

/* Amount hero (3 columns: full / wht / net) */
.fr-amount-hero {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1.3fr;
  gap: 12px;
  align-items: center;
  padding: 16px;
  background: rgba(0,0,0,.25);
  border-radius: 12px;
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,.1);
}
.fr-amount-item { text-align: center; }
.fr-amount-item.fr-amount-net { text-align: center; }
.fr-amount-item.fr-amount-net .fr-amount-val {
  color: #fbbf24;
  font-size: 26px;
}
.fr-amount-lbl {
  font-size: 10px;
  color: rgba(255,255,255,.65);
  text-transform: uppercase;
  letter-spacing: .08em;
  margin-bottom: 4px;
}
.fr-amount-val {
  font-size: 18px;
  font-weight: 600;
  font-feature-settings: "tnum";
  color: #fff;
}
.fr-amount-sep {
  color: rgba(255,255,255,.4);
  font-size: 20px;
  font-weight: 300;
}

.fr-body-inner {
  padding: 20px 24px;
  overflow-y: auto;
  flex: 1;
}

.fr-alert { padding: 12px 14px; border-radius: 8px; font-size: 13px; margin-bottom: 16px; }
.fr-alert.danger { background: #fee2e2; color: #991b1b; border: 1px solid #fecaca; }

.fr-section { margin-bottom: 20px; }
.fr-section-h {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 10px;
}
.fr-section-icon {
  width: 32px; height: 32px;
  border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.fr-section-icon.orange { background: var(--accent-light); color: var(--accent); }
.fr-section-icon.green  { background: #d1fae5; color: #047857; }
.fr-section-icon.blue   { background: #dbeafe; color: #1d4ed8; }
.fr-section-icon.purple { background: #ede9fe; color: #6d28d9; }
.fr-section-t { font-weight: 600; font-size: 14px; }

.fr-section-body {
  background: var(--surface-alt);
  border-radius: 10px;
  padding: 14px 16px;
}

.fr-kv-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 500px) { .fr-kv-grid { grid-template-columns: minmax(0, 1fr); } }
.fr-kv { }
.fr-kv-k {
  font-size: 11px;
  color: var(--text-muted);
  margin-bottom: 2px;
  font-weight: 500;
}
.fr-kv-v {
  font-size: 14px;
  color: var(--text);
  font-weight: 500;
  word-break: break-word;
}
.fr-kv-copy {
  cursor: pointer;
  padding: 8px 10px;
  margin: -8px -10px;
  border-radius: 6px;
  transition: background .15s;
}
.fr-kv-copy:hover { background: var(--accent-light); }

.fr-desc {
  margin-top: 10px;
  padding: 10px 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--text);
}

/* Document cards */
.fr-docs-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 12px;
}
.fr-doc-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: all .15s;
}
.fr-doc-card:hover { border-color: var(--accent); transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0,0,0,.08); }
.fr-doc-thumb {
  display: block;
  position: relative;
  height: 110px;
  background: linear-gradient(135deg, #f1f5f9 0%, #e2e8f0 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  text-decoration: none;
}
.fr-doc-thumb img { width: 100%; height: 100%; object-fit: cover; }
.fr-doc-thumb.pdf {
  background: linear-gradient(135deg, #fee2e2 0%, #fecaca 100%);
  flex-direction: column;
  gap: 4px;
}
.fr-doc-ico { font-size: 36px; }
.fr-doc-ext {
  position: absolute;
  bottom: 6px; right: 6px;
  background: rgba(0,0,0,.6);
  color: #fff;
  padding: 2px 6px;
  border-radius: 3px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .05em;
}
.fr-doc-info {
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.fr-doc-title { font-size: 13px; font-weight: 500; color: var(--text); }
.fr-doc-meta { font-size: 11px; color: var(--text-muted); }

.fr-no-docs {
  text-align: center;
  color: var(--text-subtle);
  padding: 20px;
  font-size: 13px;
}

.fr-paid-info {
  padding: 10px 14px;
  background: var(--success-bg);
  color: #065f46;
  border-radius: 8px;
  font-size: 13px;
  margin-top: 8px;
}

@media (max-width: 700px) {
  .fr-hero { padding: 20px 20px 16px; }
  .fr-hero-inner { flex-direction: column; align-items: flex-start; gap: 12px; }
  .fr-hero-status { align-self: flex-start; }
  .fr-hero-name { font-size: 18px; }
  .fr-amount-hero { grid-template-columns: minmax(0, 1fr); gap: 8px; padding: 12px; }
  .fr-amount-sep { display: none; }
  .fr-body-inner { padding: 16px; }
}

/* ===== Freelance list rows ===== */
.fl-search {
  padding: 12px 20px;
  background: var(--surface-alt);
  border-top: 1px solid var(--border);
  display: flex;
  gap: 10px;
  align-items: center;
}
.fl-search-input {
  flex: 1;
  position: relative;
  display: flex;
  align-items: center;
}
.fl-search-input svg {
  position: absolute;
  left: 12px;
  color: var(--text-subtle);
  pointer-events: none;
}
.fl-search-input input { padding-left: 36px; background: var(--surface); }

.fl-list { display: flex; flex-direction: column; }
.fl-row {
  display: grid;
  grid-template-columns: 220px 1fr 180px 140px 140px auto;
  gap: 16px;
  align-items: center;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  transition: background .12s;
}
.fl-row:last-child { border-bottom: none; }
.fl-row:hover { background: var(--surface-alt); }
.fl-row.pending  { border-left: 3px solid var(--warning); padding-left: 17px; }
.fl-row.approved { border-left: 3px solid var(--info); padding-left: 17px; }

.fl-emp { display: flex; align-items: center; gap: 10px; min-width: 0; }
.fl-name { font-weight: 600; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fl-doc { font-size: 11px; color: var(--text-muted); font-family: "IBM Plex Mono", monospace; margin-top: 2px; }

.fl-job { min-width: 0; font-size: 13px; }
.fl-job-type { font-weight: 500; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fl-job-proj { color: var(--text-muted); font-size: 12px; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fl-job-date { font-size: 11px; color: var(--text-subtle); margin-top: 4px; display: inline-flex; align-items: center; gap: 3px; }

.fl-bank {
  background: var(--surface-alt);
  padding: 8px 12px;
  border-radius: 8px;
  min-width: 0;
}
.fl-bank.subtle { background: transparent; padding: 0; color: var(--text-muted); }
.fl-bank-label { font-size: 10px; color: var(--text-muted); text-transform: uppercase; letter-spacing: .05em; font-weight: 500; margin-bottom: 2px; }
.fl-bank-name { font-weight: 500; font-size: 12px; }
.fl-bank-acct {
  font-size: 13px;
  font-weight: 600;
  color: var(--accent);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 0;
}
.fl-bank-acct:hover { opacity: .75; }

.fl-amount { text-align: right; }
.fl-amount-net {
  font-size: 20px;
  font-weight: 700;
  color: var(--accent);
  font-feature-settings: "tnum";
  line-height: 1;
}
.fl-amount-full { font-size: 11px; color: var(--text-muted); margin-top: 4px; }

.fl-status { text-align: center; }
.fl-meta { font-size: 11px; color: var(--text-muted); margin-top: 4px; display: inline-flex; align-items: center; gap: 3px; }

.fl-actions { display: flex; flex-direction: column; gap: 6px; align-items: flex-end; }

@media (max-width: 1200px) {
  .fl-row { grid-template-columns: 1fr 1fr; gap: 12px; }
  .fl-bank, .fl-amount, .fl-status, .fl-actions { grid-column: span 1; }
  .fl-job { grid-column: 1 / -1; order: 3; }
  .fl-actions { flex-direction: row; justify-content: flex-start; order: 10; grid-column: 1 / -1; }
}
@media (max-width: 700px) {
  .fl-row { grid-template-columns: minmax(0, 1fr); }
  .fl-amount { text-align: left; }
  .fl-status { text-align: left; }
}

/* Clickable leave item */
.leave-item { cursor: pointer; transition: all .15s; }
.leave-item:hover { background: var(--surface-alt); }
.leave-item.pending:hover { background: #fffbf5; }
.li-click-hint {
  margin-left: auto;
  color: var(--text-subtle);
  font-size: 11px;
  display: inline-flex;
  align-items: center;
  gap: 2px;
}
.leave-item:hover .li-click-hint { color: var(--accent); }
.li-paperclip {
  color: var(--accent);
  display: inline-flex;
  align-items: center;
  padding: 2px 6px;
  background: var(--accent-light);
  border-radius: 4px;
}

/* Leave detail modal */
.dm-header {
  display: flex;
  align-items: center;
  gap: 16px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 16px;
  flex-wrap: wrap;
}
.dm-header .avatar-img.lg, .dm-header .avatar-initial.lg { width: 56px; height: 56px; font-size: 22px; }
.dm-name { font-size: 16px; font-weight: 600; }
.dm-name small { color: var(--text-subtle); font-weight: 400; }
.dm-meta { font-size: 12px; color: var(--text-muted); font-family: "IBM Plex Mono", monospace; margin-top: 2px; }
.dm-badges { margin-left: auto; display: flex; gap: 6px; }

.dm-info-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  padding: 14px;
  background: var(--surface-alt);
  border-radius: 10px;
  margin-bottom: 16px;
}
.dm-info-item .dm-label { font-size: 11px; color: var(--text-muted); text-transform: uppercase; letter-spacing: .05em; font-weight: 500; margin-bottom: 4px; }
.dm-info-item .dm-val { font-size: 14px; font-weight: 500; }

.dm-section { margin-bottom: 16px; }
.dm-section-label {
  font-size: 11px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: .05em;
  font-weight: 600;
  margin-bottom: 8px;
}
.dm-text {
  padding: 10px 12px;
  background: var(--surface-alt);
  border-radius: 8px;
  font-size: 14px;
  line-height: 1.5;
  white-space: pre-wrap;
  word-break: break-word;
}
.dm-reject {
  padding: 10px 12px;
  background: var(--danger-bg);
  color: #991b1b;
  border-radius: 8px;
  font-size: 13px;
  margin-bottom: 16px;
}

/* Attachment */
.dm-attach { margin-bottom: 16px; }
.dm-img-wrap {
  display: block;
  margin-bottom: 8px;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid var(--border);
  max-height: 400px;
}
.dm-img-wrap img { width: 100%; max-height: 400px; object-fit: contain; display: block; background: #f1f5f9; }
.dm-file-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  background: var(--surface-alt);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text);
}
.dm-file-card:hover { border-color: var(--accent); text-decoration: none; }
.dm-file-icon { font-size: 24px; }
.dm-file-name { font-weight: 500; font-size: 14px; }
.dm-no-attach {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  background: #fef3c7;
  border: 1px dashed #fcd34d;
  color: #92400e;
  border-radius: 8px;
  margin-bottom: 16px;
  font-size: 13px;
}
.dm-no-attach span { flex: 1; }

/* Timeline */
.dm-timeline { display: flex; flex-direction: column; gap: 12px; }
.dm-timeline-item {
  display: flex;
  gap: 12px;
  font-size: 13px;
}
.dm-timeline-item .tl-dot {
  width: 10px; height: 10px;
  border-radius: 50%;
  margin-top: 5px;
  flex-shrink: 0;
}
.dm-timeline-item .tl-dot.pending { background: var(--warning); }
.dm-timeline-item .tl-dot.success { background: var(--success); }
.dm-timeline-item .tl-dot.danger  { background: var(--danger); }
.dm-timeline-item .tl-dot.secondary { background: var(--text-subtle); }
.dm-timeline-item small { color: var(--text-muted); font-size: 11px; }

/* Attendance Monthly Heatmap (GitHub-style) */
.att-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 20px;
  align-items: start;
}
@media (max-width: 1200px) {
  .att-layout { grid-template-columns: minmax(0, 1fr); }
}

/* Scrollable container ที่ scroll พร้อมกันทั้งหมด */
.card.compact > .hm-head,
.card.compact > .hm-rows { position: relative; }

/* Header row */
.hm-head {
  display: flex;
  align-items: flex-end;
  padding: 10px 0 6px;
  border-bottom: 1px solid var(--border);
  background: var(--surface-alt);
  overflow-x: auto;
  overflow-y: hidden;
}
.hm-head::-webkit-scrollbar { height: 0; }
.hm-emp-head {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: .05em;
  width: 180px;
  min-width: 180px;
  padding: 0 12px;
  position: sticky;
  left: 0;
  background: var(--surface-alt);
  z-index: 2;
}
.hm-days-head {
  display: flex;
  gap: 2px;
  padding: 0 8px;
  flex: 1;
}
.hm-sum-head {
  width: 90px;
  min-width: 90px;
  padding: 0 12px;
  position: sticky;
  right: 0;
  background: var(--surface-alt);
  z-index: 2;
}

.hm-dh {
  width: 22px;
  min-width: 22px;
  text-align: center;
  padding: 2px 0;
  border-radius: 3px;
  font-weight: 500;
}
.hm-dh .dh-num { font-size: 11px; color: var(--text); font-weight: 600; }
.hm-dh .dh-dow { font-size: 9px; color: var(--text-subtle); margin-top: 1px; }
.hm-dh.off { background: #fef3f2; }
.hm-dh.off .dh-num { color: #b91c1c; }
.hm-dh.today { background: var(--accent); }
.hm-dh.today .dh-num, .hm-dh.today .dh-dow { color: #fff; }
.hm-dh.wk-sep { margin-left: 6px; }

/* Rows - สร้างเป็น scroll area เดียวกัน */
.hm-rows {
  overflow-x: auto;
  overflow-y: hidden;
}
.hm-rows::-webkit-scrollbar { height: 6px; }
.hm-rows::-webkit-scrollbar-track { background: var(--surface-alt); }
.hm-rows::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 3px; }

.hm-row {
  display: flex;
  align-items: center;
  padding: 6px 0;
  border-bottom: 1px solid var(--border);
}
.hm-row:last-child { border-bottom: none; }
.hm-row:hover { background: var(--surface-alt); }

.hm-emp {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 180px;
  min-width: 180px;
  padding: 0 12px;
  overflow: hidden;
  position: sticky;
  left: 0;
  background: var(--surface);
  z-index: 2;
}
.hm-row:hover .hm-emp { background: var(--surface-alt); }
.hm-emp-info { min-width: 0; overflow: hidden; }
.hm-emp-name { font-size: 13px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hm-emp-code { font-size: 10px; color: var(--text-subtle); font-family: "IBM Plex Mono", monospace; }

.hm-days {
  display: flex;
  gap: 2px;
  padding: 2px 8px;
  flex: 1;
}

.hm-cell {
  width: 22px;
  min-width: 22px;
  height: 22px;
  border-radius: 3px;
  cursor: help;
  transition: transform .1s;
}
.hm-cell:hover { transform: scale(1.4); z-index: 5; position: relative; box-shadow: 0 2px 8px rgba(0,0,0,.2); }
.hm-cell.wk-sep { margin-left: 6px; }

.hm-ontime { background: #4ade80; }
.hm-late   { background: #fbbf24; }
.hm-absent { background: #fda4af; }
.hm-wknd   { background: #e2e8f0; }
.hm-hday   { background: #f87171; }
.hm-future { background: #f1f5f9; }

/* Summary column */
.hm-sum {
  width: 90px;
  min-width: 90px;
  padding: 0 12px;
  text-align: right;
  position: sticky;
  right: 0;
  background: var(--surface);
  z-index: 2;
  border-left: 1px solid var(--border);
}
.hm-row:hover .hm-sum { background: var(--surface-alt); }
.hm-sum-days { font-size: 14px; }
.hm-sum-days strong { font-weight: 600; color: var(--text); font-feature-settings: "tnum"; }
.hm-sum-days small { color: var(--text-subtle); font-size: 11px; margin-left: 2px; }
.hm-sum-late { font-size: 10px; color: var(--warning); font-weight: 500; margin-top: 2px; }
.hm-sum-ok   { font-size: 10px; color: var(--success); margin-top: 2px; }

/* Legend */
.hm-legend {
  display: flex;
  gap: 16px;
  padding: 12px 16px;
  border-top: 1px solid var(--border);
  background: var(--surface-alt);
  font-size: 11px;
  color: var(--text-muted);
  flex-wrap: wrap;
}
.hm-legend span { display: inline-flex; align-items: center; gap: 6px; }
.hm-legend .dot { width: 10px; height: 10px; border-radius: 2px; display: inline-block; }
.hm-legend .dot.ontime { background: #4ade80; }
.hm-legend .dot.late   { background: #fbbf24; }
.hm-legend .dot.absent { background: #fda4af; }
.hm-legend .dot.off    { background: #e2e8f0; }
.hm-legend .dot.future { background: #f1f5f9; border: 1px solid var(--border); }

@media (max-width: 700px) {
  .hm-head, .hm-row { grid-template-columns: 110px 1fr 70px; gap: 6px; }
  .hm-dh, .hm-cell { max-width: 24px; min-width: 18px; }
  .hm-emp-name { font-size: 12px; }
}

/* Today's sidebar */
.today-side { max-height: 700px; display: flex; flex-direction: column; }
.today-list {
  overflow-y: auto;
  padding: 10px;
  max-height: 640px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.today-list::-webkit-scrollbar { width: 6px; }
.today-list::-webkit-scrollbar-track { background: var(--surface-alt); }
.today-list::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 3px; }

.today-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 8px;
  background: var(--surface-alt);
  border-left: 3px solid transparent;
}
.today-item.ontime  { border-left-color: var(--success); }
.today-item.late    { border-left-color: var(--warning); }
.today-item.not-yet { border-left-color: var(--danger); opacity: .8; }
.today-item .ti-info { flex: 1; min-width: 0; }
.today-item .ti-name {
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.today-item .ti-time {
  font-size: 11px;
  color: var(--text-muted);
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 2px;
}
.today-item .badge { font-size: 10px; }

/* Quota cell in summary table */
.quota-cell { display: inline-block; min-width: 90px; }
.quota-cell .qc-num { font-size: 13px; }
.quota-cell .qc-num strong { font-size: 15px; font-feature-settings: "tnum"; }
.quota-cell .qc-num small { color: var(--text-muted); font-weight: 400; }
.quota-cell .qc-bar {
  height: 4px;
  background: #e2e8f0;
  border-radius: 2px;
  overflow: hidden;
  margin: 4px 0;
}
.quota-cell .qc-bar span { display: block; height: 100%; background: var(--success); transition: width .3s; }
.quota-cell.warning .qc-bar span { background: var(--warning); }
.quota-cell.danger  .qc-bar span { background: var(--danger); }
.quota-cell.danger  .qc-num strong { color: var(--danger); }
.quota-cell .qc-pending {
  font-size: 10px;
  color: var(--warning);
  margin-top: 2px;
}

.quota-hint {
  padding: 10px 12px;
  background: var(--info-bg);
  color: #1e40af;
  border: 1px solid #bfdbfe;
  border-radius: 6px;
  font-size: 13px;
  margin-bottom: 12px;
}
.quota-hint.error {
  background: var(--danger-bg);
  color: #991b1b;
  border-color: #fecaca;
}

/* Quick-action card (button variant) */
button.qa-card {
  width: 100%;
  text-align: left;
  cursor: pointer;
  font-family: inherit;
}
button.qa-card:disabled { opacity: .5; cursor: not-allowed; }

/* Education list */
.edu-list { display: flex; flex-direction: column; gap: 12px; }
.edu-item {
  padding: 14px 16px;
  border-left: 3px solid var(--accent);
  background: var(--surface-alt);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
}
.edu-item .degree { font-weight: 600; font-size: 14px; }
.edu-item .school { color: var(--text-muted); font-size: 13px; margin-top: 2px; }
.edu-item .year { color: var(--text-subtle); font-size: 12px; margin-top: 4px; font-family: "IBM Plex Mono", monospace; }
.edu-item .del {
  background: none; border: none; color: var(--text-subtle); cursor: pointer;
  padding: 4px 8px;
}
.edu-item .del:hover { color: var(--danger); }

/* ============================================================
   1-on-1 & ประเมินผล (KSA)
   ============================================================ */
.qa-purple { background: #ede9fe; color: #7c3aed; }
.qa-pink   { background: #fce7f3; color: #db2777; }
.pf-unit { font-size: 14px; color: var(--text-muted); font-weight: 400; }

.pf-form-grid { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 20px; align-items: start; }
.pf-side { position: sticky; top: calc(var(--header-h) + 16px); }
.pf-side .card h3 { font-size: 15px; }
@media (max-width: 1000px) { .pf-form-grid { grid-template-columns: minmax(0, 1fr); } .pf-side { position: static; } }
.pf-side-label { font-size: 12px; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: .03em; margin-bottom: 8px; }

.pf-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.pf-chip input, .pf-mood-opt input, .pf-rate input { position: absolute; opacity: 0; pointer-events: none; }
.pf-chip span {
  display: inline-block; padding: 6px 12px; border: 1px solid var(--border); border-radius: 999px;
  font-size: 13px; cursor: pointer; background: var(--surface); transition: all .15s;
}
.pf-chip input:checked + span { background: var(--accent-light); border-color: var(--accent); color: var(--accent-hover); font-weight: 600; }
.pf-chip input:focus-visible + span, .pf-mood-opt input:focus-visible + span, .pf-rate input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }

.pf-moods { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; }
.pf-mood-opt span {
  display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 10px 4px;
  border: 1px solid var(--border); border-radius: var(--radius-sm); cursor: pointer; background: var(--surface);
}
.pf-mood-opt b { font-size: 24px; line-height: 1; }
.pf-mood-opt small { font-size: 11px; color: var(--text-muted); }
.pf-mood-opt input:checked + span { border-color: var(--accent); background: var(--accent-light); box-shadow: 0 0 0 1px var(--accent); }
.pf-mood { white-space: nowrap; font-size: 16px; }
.pf-mood small { font-size: 12px; color: var(--text-muted); }

.pf-private { background: #fafaf9; border: 1px dashed var(--border-strong); border-radius: var(--radius-sm); padding: 12px; }
.pf-private label, .pf-private .pf-note-label { display: flex; align-items: center; gap: 6px; }

.pf-act-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 10px; }
.pf-act-row { display: grid; grid-template-columns: minmax(0, 1fr) 120px 150px 36px; gap: 8px; align-items: center; }
@media (max-width: 700px) { .pf-act-row { grid-template-columns: 1fr 1fr; } .pf-act-row input[name="act_title[]"] { grid-column: 1 / -1; } }
.pf-act-item { display: flex; align-items: flex-start; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--border); }
.pf-act-item:last-of-type { border-bottom: none; }
.pf-act-item input[type=checkbox] { width: 18px; height: 18px; margin-top: 2px; accent-color: var(--accent); }
.pf-act-item.done .pf-act-title { text-decoration: line-through; color: var(--text-muted); }
.pf-act-title { font-weight: 500; }
.pf-next { margin-top: 14px; padding: 10px 12px; background: var(--surface-alt); border-radius: var(--radius-sm); display: flex; gap: 8px; align-items: center; font-size: 14px; }

.pf-check { display: flex; gap: 10px; align-items: flex-start; padding: 6px 0; cursor: pointer; }
.pf-check input { width: 16px; height: 16px; margin-top: 3px; accent-color: var(--accent); flex-shrink: 0; }
.pf-check small { display: block; color: var(--text-muted); font-size: 12px; }
.pf-last { font-size: 13px; }
.pf-last p { margin: 6px 0; color: var(--text-muted); }
.pf-tips ul { margin: 0; padding-left: 18px; color: var(--text-muted); font-size: 13px; line-height: 1.8; }

.pf-person { display: flex; align-items: center; gap: 16px; }
.pf-person-name { font-size: 18px; font-weight: 600; }
.pf-note { padding: 12px 0; border-bottom: 1px solid var(--border); }
.pf-note:last-child { border-bottom: none; }
.pf-note.pf-private { border-bottom: 1px dashed var(--border-strong); margin-top: 8px; }
.pf-note-label { font-size: 12px; font-weight: 600; color: var(--text-muted); margin-bottom: 4px; }
.pf-note-body { line-height: 1.7; white-space: normal; }
.pf-timeline { display: flex; flex-direction: column; }
.pf-timeline a { display: flex; justify-content: space-between; padding: 8px 10px; border-radius: var(--radius-sm); color: var(--text); text-decoration: none; font-size: 14px; }
.pf-timeline a:hover { background: var(--surface-alt); }
.pf-timeline a.active { background: var(--accent-light); color: var(--accent-hover); font-weight: 600; }

/* KSA */
.pf-cat-head { display: flex; gap: 12px; align-items: center; margin: 22px 0 12px; }
.pf-cat-head:first-child { margin-top: 4px; }
.pf-cat-head small { color: var(--text-muted); }
.pf-cat-letter {
  display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; flex-shrink: 0;
  border-radius: 8px; font-weight: 700; color: #fff; background: var(--text-muted);
}
.pf-cat-tr .pf-cat-letter { width: 22px; height: 22px; font-size: 12px; border-radius: 6px; margin-right: 6px; }
.pf-cat-tr td { background: var(--surface-alt); font-weight: 600; }
.pf-cat-K .pf-cat-letter, .pf-cat-letter.pf-cat-K { background: #2563eb; }
.pf-cat-S .pf-cat-letter, .pf-cat-letter.pf-cat-S { background: #059669; }
.pf-cat-A .pf-cat-letter, .pf-cat-letter.pf-cat-A { background: var(--accent); }
.pf-crit-ref { margin: 0 0 8px; padding-left: 44px; line-height: 1.6; }
.pf-crit-ref li { margin-bottom: 6px; }
.pf-scale-tbl { width: 100%; border-collapse: collapse; font-size: 13px; }
.pf-scale-tbl td { padding: 6px 8px; border-bottom: 1px solid var(--border); vertical-align: top; }
.pf-scale-tbl td:first-child { width: 28px; text-align: center; }
.pf-scale-tbl td:nth-child(2) { width: 130px; white-space: nowrap; }
.pf-scale-box summary { cursor: pointer; }
.pf-scale-box[open] summary { margin-bottom: 10px; }

.pf-crit-row { display: grid; grid-template-columns: 64px minmax(0, 1fr) 90px 36px; gap: 10px; align-items: start; padding: 10px 0; border-bottom: 1px solid var(--border); }
.pf-crit-main { display: flex; flex-direction: column; gap: 6px; }
.pf-crit-main input { font-weight: 600; }
.pf-crit-w { font-size: 12px; color: var(--text-muted); display: flex; flex-direction: column; gap: 4px; }
@media (max-width: 700px) { .pf-crit-row { grid-template-columns: 64px 1fr; } }
.pf-weights { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.pf-weights label { display: flex; align-items: center; gap: 6px; font-weight: 400; margin: 0; }
.pf-weights input { width: 80px; }
.pf-pick { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 4px 16px; margin-top: 12px; }

.pf-q { margin-bottom: 12px; }
.pf-q-head { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; margin-bottom: 12px; }
.pf-q-name { font-weight: 600; font-size: 15px; }
.pf-q-desc { font-size: 13px; margin-top: 2px; }
.pf-self-tag { flex-shrink: 0; font-size: 12px; color: var(--text-muted); background: var(--surface-alt); border-radius: 999px; padding: 4px 10px; white-space: nowrap; }
.pf-self-tag b { color: var(--text); font-size: 14px; }
.pf-self-cmt { font-size: 13px; color: var(--text-muted); font-style: italic; margin: -6px 0 10px; }
.pf-rate { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; margin-bottom: 10px; }
.pf-rate span {
  display: flex; flex-direction: column; align-items: center; padding: 8px 4px; cursor: pointer;
  border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); transition: all .12s;
}
.pf-rate span:hover { border-color: var(--border-strong); }
.pf-rate b { font-size: 18px; }
.pf-rate small { font-size: 11px; color: var(--text-muted); text-align: center; line-height: 1.3; }
.pf-rate input:checked + span { background: var(--primary); border-color: var(--primary); color: #fff; }
.pf-rate input:checked + span small { color: #e7e5e4; }
.pf-q textarea { width: 100%; }

.pf-sticky-bar {
  position: sticky; bottom: 0; z-index: 5; display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 12px 16px; margin-bottom: 24px;
  box-shadow: var(--shadow-lg);
}

.pf-bar { display: inline-block; vertical-align: middle; width: calc(100% - 52px); height: 8px; background: var(--surface-alt); border-radius: 999px; overflow: hidden; }
.pf-bar-fill { height: 100%; background: var(--accent); border-radius: 999px; }
.pf-bar-val { display: inline-block; width: 44px; text-align: right; font-variant-numeric: tabular-nums; }
.pf-result-grid { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 20px; }
@media (max-width: 800px) { .pf-result-grid { grid-template-columns: minmax(0, 1fr); } }
.pf-score-hero { text-align: center; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.pf-score-big { font-size: 48px; font-weight: 700; line-height: 1.1; margin: 4px 0 10px; font-variant-numeric: tabular-nums; }
.pf-score-big small { font-size: 18px; color: var(--text-muted); font-weight: 400; }
.pf-ksa-row { display: flex; align-items: center; gap: 12px; padding: 10px 0; }
.pf-ksa-lbl { min-width: 110px; font-weight: 500; }
.pf-ksa-bar { flex: 1; min-width: 0; }
.pf-ksa-self { white-space: nowrap; }
.pf-score-pill { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%; background: var(--surface-alt); font-weight: 600; }
.pf-score-pill.strong { background: var(--primary); color: #fff; }

@media print {
  .sidebar, .topbar, .page-head .btn, .page-head button, .pf-sticky-bar, form button { display: none !important; }
  .main { margin: 0 !important; }
}

/* ---- Evaluation cycles (cards) ---- */
.ev-section-title { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: var(--text-muted); margin: 8px 0 12px; }
.ev-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 16px; margin-bottom: 28px; }
@media (max-width: 500px) { .ev-grid { grid-template-columns: minmax(0, 1fr); } }
.ev-card {
  display: flex; flex-direction: column; gap: 14px; padding: 20px; min-width: 0;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: var(--shadow-sm); color: var(--text); text-decoration: none;
  transition: border-color .15s, box-shadow .15s, transform .15s;
}
.ev-card:hover { border-color: var(--border-strong); box-shadow: var(--shadow-lg); transform: translateY(-1px); }
.ev-card.ev-open { border-top: 3px solid var(--success); }
.ev-card.ev-draft { border-top: 3px solid var(--border-strong); }
.ev-card.ev-closed { background: var(--surface-alt); }
.ev-card-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.ev-type { font-size: 12px; font-weight: 600; color: var(--accent-hover); background: var(--accent-light); padding: 3px 10px; border-radius: 999px; }
.ev-name { margin: 0; font-size: 18px; font-weight: 600; line-height: 1.35; }
.ev-meta { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: var(--text-muted); }
.ev-meta > span { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.ev-due { font-size: 11px; font-weight: 600; padding: 1px 8px; border-radius: 999px; background: var(--surface-alt); color: var(--text-muted); }
.ev-due.soon { background: var(--warning-bg); color: #b45309; }
.ev-due.late { background: var(--danger-bg); color: #b91c1c; }

.ev-progress-head { display: flex; justify-content: space-between; font-size: 13px; color: var(--text-muted); margin-bottom: 6px; }
.ev-progress-head strong { color: var(--text); font-variant-numeric: tabular-nums; }
.ev-stack { display: flex; height: 10px; border-radius: 999px; overflow: hidden; background: var(--surface-alt); gap: 2px; }
.ev-stack span { display: block; height: 100%; }
.s-done { background: var(--success); }
.s-self { background: #fbbf24; }
.s-pend { background: var(--border-strong); }
.ev-legend { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 8px; font-size: 12px; color: var(--text-muted); }
.ev-legend span { display: inline-flex; align-items: center; gap: 6px; }
.ev-legend i { width: 8px; height: 8px; border-radius: 2px; display: inline-block; }
.ev-legend b { color: var(--text); font-variant-numeric: tabular-nums; }

.ev-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-top: 14px; border-top: 1px solid var(--border); }
.ev-score-lbl { font-size: 12px; color: var(--text-muted); }
.ev-score-val { font-size: 26px; font-weight: 700; line-height: 1.1; font-variant-numeric: tabular-nums; }
.ev-grades { display: flex; gap: 4px; }
.ev-g { display: flex; flex-direction: column; align-items: center; min-width: 34px; padding: 4px 2px; border-radius: 6px; background: var(--surface-alt); font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; }
.ev-g b { font-size: 10px; color: var(--text-muted); font-weight: 600; }
.ev-g.zero { opacity: .4; }
.ev-next { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text-muted); }
.ev-next > span:first-child { flex: 1; min-width: 0; }
.ev-weights { font-size: 11px; font-family: ui-monospace, monospace; color: var(--text-subtle); white-space: nowrap; }
.ev-card:hover .ev-next svg { color: var(--accent); transform: translateX(2px); }
.ev-next svg { transition: transform .15s; flex-shrink: 0; }

.ev-empty { text-align: center; padding: 48px 24px; }
.ev-empty-icon { width: 56px; height: 56px; margin: 0 auto 12px; border-radius: 14px; display: flex; align-items: center; justify-content: center; background: var(--accent-light); color: var(--accent); }
.ev-empty h3 { margin: 0 0 6px; }

/* ---- ข้อมูลของฉัน ---- */
.mp-card-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 16px; }
.mp-complete { padding: 16px 20px; }
.mp-complete-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.mp-chip { border: 1px solid var(--border); background: var(--surface); border-radius: 999px; padding: 5px 12px; font: inherit; font-size: 12px; cursor: pointer; color: var(--text-muted); }
.mp-chip:hover { border-color: var(--accent); color: var(--accent-hover); background: var(--accent-light); }
.mp-drop {
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; text-align: center;
  padding: 28px 16px; border: 2px dashed var(--border-strong); border-radius: var(--radius); cursor: pointer; color: var(--text-muted);
  background: var(--surface-alt); transition: border-color .15s, background .15s;
}
.mp-drop:hover, .mp-drop.over { border-color: var(--accent); background: var(--accent-light); color: var(--accent-hover); }
.mp-drop input[type=file] { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.mp-drop small { font-size: 12px; }

/* ============================================================
   Home dashboard (hx-)
   ============================================================ */
.hx-hero {
  position: relative; overflow: hidden; display: flex; align-items: stretch; justify-content: space-between; gap: 24px; flex-wrap: wrap;
  padding: 28px 28px; margin-bottom: 20px; border-radius: 16px; color: #fff;
  background: radial-gradient(120% 140% at 100% 0%, #9a3412 0%, #431407 45%, #1c1917 100%);
  box-shadow: var(--shadow-lg);
}
.hx-hero::after {
  content: ""; position: absolute; width: 340px; height: 340px; right: -120px; bottom: -200px; border-radius: 50%;
  background: radial-gradient(circle, rgba(249,115,22,.35), transparent 70%); pointer-events: none;
}
.hx-hero-main { display: flex; flex-direction: column; justify-content: center; min-width: 0; position: relative; z-index: 1; }
.hx-date { font-size: 13px; color: #fdba74; font-weight: 500; letter-spacing: .02em; }
.hx-greet { margin: 6px 0 8px; font-size: 30px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.2; }
.hx-sub { color: #e7e5e4; font-size: 14px; }
.hx-sub strong { color: #fdba74; }

.hx-clock-box {
  position: relative; z-index: 1; display: grid; grid-template-columns: auto auto; grid-template-rows: auto auto; gap: 12px 20px; align-items: center;
  padding: 16px 18px; border-radius: 12px; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.12); backdrop-filter: blur(6px);
}
.hx-clock { font-size: 44px; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }
.hx-att { display: flex; flex-direction: column; gap: 6px; }
.hx-att-item { display: flex; align-items: center; gap: 8px; font-size: 13px; color: #a8a29e; }
.hx-att-item::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #57534e; flex-shrink: 0; }
.hx-att-item.on::before { background: #4ade80; box-shadow: 0 0 0 3px rgba(74,222,128,.2); }
.hx-att-lbl { min-width: 48px; }
.hx-att-val { color: #fff; font-weight: 600; font-variant-numeric: tabular-nums; }
.hx-pill { font-size: 11px; padding: 1px 8px; border-radius: 999px; font-weight: 600; }
.hx-pill.ok { background: rgba(74,222,128,.18); color: #86efac; }
.hx-pill.late { background: rgba(251,191,36,.2); color: #fcd34d; }
.hx-cta {
  grid-column: 1 / -1; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 11px 16px; border: 0; border-radius: 10px; font: inherit; font-weight: 600; font-size: 15px; cursor: pointer;
  background: var(--accent); color: #fff; transition: background .15s, transform .1s;
}
.hx-cta:hover { background: var(--accent-hover); }
.hx-cta:active { transform: translateY(1px); }
.hx-cta.out { background: #fff; color: var(--primary); }
.hx-cta.out:hover { background: #f5f5f4; }
.hx-cta.done { background: rgba(74,222,128,.15); color: #86efac; cursor: default; }
.hx-cta:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

.hx-layout { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 20px; align-items: start; margin-bottom: 20px; }
.hx-main, .hx-side { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.hx-main > .card, .hx-side > .card { margin: 0; }
@media (max-width: 1100px) { .hx-layout { grid-template-columns: minmax(0, 1fr); } }

.hx-panel { padding: 20px; }
.hx-panel-head { display: flex; align-items: center; gap: 8px; margin-bottom: 14px; }
.hx-panel-head h3 { margin: 0; font-size: 16px; }
.hx-panel-head small { margin-left: auto; }

.hx-ico { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 10px; flex-shrink: 0; }
.hx-ico.sm { width: 26px; height: 26px; border-radius: 7px; }
.t-blue   { background: #dbeafe; color: #2563eb; }
.t-green  { background: #d1fae5; color: #059669; }
.t-orange { background: #ffedd5; color: #ea580c; }
.t-purple { background: #ede9fe; color: #7c3aed; }
.t-pink   { background: #fce7f3; color: #db2777; }
.t-red    { background: #fee2e2; color: #dc2626; }
.t-gray   { background: var(--surface-alt); color: var(--text-muted); }

.hx-todo { display: flex; flex-direction: column; }
.hx-todo-item {
  display: flex; align-items: center; gap: 14px; padding: 12px 10px; margin: 0 -10px; border-radius: 10px;
  color: var(--text); text-decoration: none; transition: background .12s;
}
.hx-todo-item + .hx-todo-item { border-top: 1px solid var(--border); }
.hx-todo-item:hover { background: var(--surface-alt); }
.hx-todo-item > svg { color: var(--text-subtle); flex-shrink: 0; transition: transform .15s, color .15s; }
.hx-todo-item:hover > svg { color: var(--accent); transform: translateX(2px); }
.hx-todo-text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.hx-todo-text strong { font-weight: 600; font-size: 14px; }
.hx-todo-text small { color: var(--text-muted); font-size: 12px; }
.hx-allclear { display: flex; align-items: center; gap: 14px; padding: 8px 0; }
.hx-allclear div { display: flex; flex-direction: column; }
.hx-allclear small { color: var(--text-muted); }

.hx-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
@media (max-width: 600px) { .hx-tiles { grid-template-columns: repeat(2, 1fr); } }
.hx-tile {
  display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 16px; min-width: 0;
  border: 1px solid var(--border); border-radius: 12px; color: var(--text); text-decoration: none; background: var(--surface);
  transition: border-color .15s, box-shadow .15s, transform .15s;
}
.hx-tile .hx-ico { margin-bottom: 10px; }
.hx-tile strong { font-size: 14px; font-weight: 600; }
.hx-tile small { font-size: 12px; color: var(--text-muted); }
.hx-tile:hover { border-color: var(--border-strong); box-shadow: var(--shadow); transform: translateY(-2px); }

.hx-member { margin: 0; }
.hx-kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.hx-kpi { display: flex; flex-direction: column; padding: 12px; border-radius: 10px; background: var(--surface-alt); min-width: 0; }
.hx-kpi small { font-size: 11px; color: var(--text-muted); }
.hx-kpi strong { font-size: 24px; font-weight: 700; line-height: 1.2; margin-top: 4px; font-variant-numeric: tabular-nums; }
.hx-kpi span { font-size: 11px; color: var(--text-muted); }

.hx-leave-today { padding: 10px 12px; margin-bottom: 12px; border-radius: 10px; background: #f0f9ff; }
.hx-leave-today > small { font-size: 11px; font-weight: 600; color: #0369a1; }
.hx-faces { display: flex; align-items: center; margin-top: 6px; }
.hx-faces > span { margin-right: -8px; border: 2px solid #f0f9ff; border-radius: 50%; display: inline-flex; }
.hx-faces > span .avatar-img, .hx-faces > span .avatar-initial { width: 28px; height: 28px; font-size: 12px; }
.hx-faces em { font-style: normal; font-size: 13px; margin-left: 16px; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hx-up { list-style: none; margin: 0; padding: 0; }
.hx-up li { display: flex; align-items: center; gap: 10px; padding: 8px 0; }
.hx-up li + li { border-top: 1px solid var(--border); }
.hx-up-date { display: flex; flex-direction: column; align-items: center; width: 34px; font-size: 10px; color: var(--text-muted); line-height: 1.1; flex-shrink: 0; }
.hx-up-date b { font-size: 16px; color: var(--text); }
.hx-up-label { flex: 1; min-width: 0; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hx-up li small { font-size: 11px; color: var(--text-muted); white-space: nowrap; }

@media (max-width: 700px) {
  .hx-hero { padding: 22px 18px; }
  .hx-greet { font-size: 24px; }
  .hx-clock-box { width: 100%; }
  .hx-clock { font-size: 38px; }
}

/* ---- Calendar day popup (dm2) ---- */
.modal.dm2 { max-width: 480px; padding: 0; overflow: hidden; border-radius: 18px; }
.dm2-hero {
  position: relative; padding: 22px 56px 18px; color: #fff; text-align: center;
  background: radial-gradient(120% 140% at 100% 0%, #9a3412 0%, #431407 50%, #1c1917 100%);
}
.dm2-hero.is-today { background: radial-gradient(120% 140% at 100% 0%, #fb923c 0%, #c2410c 55%, #7c2d12 100%); }
.dm2-hero.is-holiday { background: radial-gradient(120% 140% at 100% 0%, #f87171 0%, #b91c1c 55%, #450a0a 100%); }
.dm2-date { display: inline-flex; align-items: center; gap: 14px; }
.dm2-num { font-size: 52px; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; letter-spacing: -0.03em; }
.dm2-txt { text-align: left; }
.dm2-dow { font-size: 16px; font-weight: 600; }
.dm2-my { font-size: 13px; color: rgba(255,255,255,.75); margin-top: 2px; }
.dm2-nav, .dm2-close {
  position: absolute; display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px;
  border: 0; border-radius: 50%; background: rgba(255,255,255,.12); color: #fff; cursor: pointer; transition: background .15s;
}
.dm2-nav:hover:not(:disabled), .dm2-close:hover { background: rgba(255,255,255,.25); }
.dm2-nav:disabled { opacity: .3; cursor: default; }
.dm2-nav:focus-visible, .dm2-close:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.dm2-nav { top: 44px; }
.dm2-nav.prev { left: 14px; }
.dm2-nav.next { right: 14px; }
.dm2-close { right: 10px; top: 10px; width: 28px; height: 28px; background: transparent; }
.dm2-tags { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin-top: 14px; }
.dm2-tag { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; border-radius: 999px; font-size: 12px; background: rgba(255,255,255,.14); }
.dm2-tag svg { width: 13px; height: 13px; }

.dm2-body { max-height: min(60vh, 520px); overflow-y: auto; padding: 8px 20px 20px; }
.dm2-group { padding-top: 14px; }
.dm2-group-h { display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: .03em; margin-bottom: 6px; }
.dm2-group-h em { font-style: normal; margin-left: auto; font-size: 11px; background: var(--surface-alt); padding: 1px 8px; border-radius: 999px; }
.dm2-dot { width: 8px; height: 8px; border-radius: 50%; }
.dm2-dot.t-red { background: #dc2626; } .dm2-dot.t-purple { background: #7c3aed; } .dm2-dot.t-pink { background: #db2777; } .dm2-dot.t-blue { background: #2563eb; }
.dm2-item { display: flex; align-items: center; gap: 12px; padding: 10px; margin: 0 -10px; border-radius: 12px; transition: background .12s; }
.dm2-item:hover { background: var(--surface-alt); }
.dm2-av { width: 38px; height: 38px; border-radius: 50%; object-fit: cover; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; color: #fff; font-weight: 600; font-size: 15px; }
.dm2-ic { width: 38px; height: 38px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.dm2-info { flex: 1; min-width: 0; }
.dm2-title { font-weight: 600; font-size: 14px; }
.dm2-sub { font-size: 12px; color: var(--text-muted); margin-top: 1px; }
.dm2-meta { display: flex; flex-wrap: wrap; gap: 4px 12px; margin-top: 4px; font-size: 12px; color: var(--text-muted); }
.dm2-meta span { display: inline-flex; align-items: center; gap: 4px; }
.dm2-meta svg { width: 13px; height: 13px; }
.dm2-pill { flex-shrink: 0; font-size: 11px; font-weight: 600; padding: 2px 9px; border-radius: 999px; white-space: nowrap; }
.dm2-pill.ok { background: var(--success-bg); color: #047857; }
.dm2-pill.wait { background: var(--warning-bg); color: #b45309; }
.dm2-pill.hbd { background: #fce7f3; color: #be185d; }
.dm2-empty { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 4px; padding: 28px 0 12px; }
.dm2-empty-ic { width: 52px; height: 52px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--accent-light); color: var(--accent); margin-bottom: 8px; }
.dm2-empty-ic svg { width: 24px; height: 24px; }
.dm2-empty small { color: var(--text-muted); }

/* ---- Attendance: clickable cells + photo popup (ap-) ---- */
button.hm-cell { border: 0; padding: 0; font: inherit; display: block; }
.hm-click { cursor: pointer; position: relative; }
.hm-click:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.hm-cam { position: absolute; right: 2px; top: 2px; width: 6px; height: 6px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 1px rgba(0,0,0,.15); }
.ti-click { cursor: pointer; transition: background .12s; }
.ti-click:hover { background: var(--surface-alt); }
.ti-click:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }

.modal.ap { max-width: 620px; padding: 0; overflow: hidden; border-radius: 18px; }
.ap-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 18px 20px 14px; }
.ap-person { display: flex; align-items: center; gap: 12px; min-width: 0; }
.ap-av { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; color: #fff; font-weight: 600; font-size: 18px; }
.ap-name { font-weight: 600; font-size: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ap-sub { font-size: 12px; color: var(--text-muted); }
.ap-daybar { display: flex; align-items: center; gap: 10px; padding: 10px 20px; background: var(--surface-alt); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.ap-date { flex: 1; display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap; font-size: 14px; }
.ap-nav { width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--border); background: var(--surface); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; color: var(--text); }
.ap-nav:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); }
.ap-nav:disabled { opacity: .35; cursor: default; }
.ap-pill { display: inline-block; font-size: 11px; font-weight: 600; padding: 2px 9px; border-radius: 999px; white-space: nowrap; }
.ap-pill.ok { background: var(--success-bg); color: #047857; }
.ap-pill.warn { background: var(--warning-bg); color: #b45309; }
.ap-pill.bad { background: var(--danger-bg); color: #b91c1c; }
.ap-pill.muted { background: var(--surface-alt); color: var(--text-muted); }
.ap-body { padding: 20px; }
.ap-shots { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 520px) { .ap-shots { grid-template-columns: minmax(0, 1fr); } }
.ap-shot { border: 1px solid var(--border); border-radius: 14px; overflow: hidden; background: var(--surface); }
.ap-photo { position: relative; display: block; aspect-ratio: 3 / 4; background: #1c1917; overflow: hidden; }
.ap-photo img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .25s; }
.ap-photo:hover img { transform: scale(1.03); }
.ap-zoom { position: absolute; right: 8px; bottom: 8px; font-size: 11px; color: #fff; background: rgba(0,0,0,.55); padding: 3px 9px; border-radius: 999px; opacity: 0; transition: opacity .15s; }
.ap-photo:hover .ap-zoom, .ap-photo:focus-visible .ap-zoom { opacity: 1; }
.ap-photo.none { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; background: var(--surface-alt); color: var(--text-subtle); }
.ap-photo.none small { font-size: 12px; color: var(--text-muted); }
.ap-shot-info { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 10px 12px; }
.ap-shot-info strong { font-size: 20px; font-variant-numeric: tabular-nums; margin-right: auto; order: 2; }
.ap-shot-info .ap-pill { order: 3; }
.ap-shot-lbl { display: flex; align-items: center; gap: 6px; width: 100%; font-size: 12px; color: var(--text-muted); order: 1; }
.ap-shot-lbl i { width: 8px; height: 8px; border-radius: 50%; }
.ap-shot.in .ap-shot-lbl i { background: var(--success); }
.ap-shot.out .ap-shot-lbl i { background: var(--accent); }
.ap-note { margin-top: 14px; padding: 10px 12px; border-radius: 10px; background: var(--surface-alt); font-size: 13px; }
.ap-note span { display: block; font-size: 11px; color: var(--text-muted); font-weight: 600; margin-bottom: 2px; }
.ap-empty { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 36px 0 24px; color: var(--text-subtle); text-align: center; }
.ap-empty strong { color: var(--text); }
.ap-empty small { color: var(--text-muted); }

/* ============================================================
   โครงสร้างองค์กร (og-) และผังองค์กร (oc-)
   ============================================================ */
.og-swatch { display: inline-block; width: 10px; height: 10px; border-radius: 3px; background: var(--c, #94a3b8); flex-shrink: 0; margin-right: 8px; vertical-align: middle; }
.og-tree-list { display: flex; flex-direction: column; }
.og-row {
  display: flex; align-items: center; gap: 16px; padding: 12px 18px 12px calc(18px + var(--d) * 28px);
  border-bottom: 1px solid var(--border); position: relative;
}
.og-row:last-child { border-bottom: 0; }
.og-row:hover { background: var(--surface-alt); }
.og-row::before { content: ""; position: absolute; left: calc(8px + var(--d) * 28px); top: 0; bottom: 0; width: 3px; border-radius: 2px; background: var(--c); opacity: .85; }
.og-row.og-company { background: #fff7ed; }
.og-row.og-company .og-row-name { font-size: 17px; }
.og-row.og-division .og-row-name { font-size: 15px; }
.og-row.off { opacity: .5; }
.og-row-main { display: flex; align-items: center; flex: 1; min-width: 0; }
.og-row-name { font-weight: 600; }
.og-row-name code { font-size: 11px; font-weight: 500; color: var(--text-muted); background: var(--surface-alt); padding: 1px 6px; border-radius: 4px; margin-left: 4px; }
.og-row-meta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 3px; font-size: 12px; color: var(--text-muted); }
.og-type { font-size: 11px; font-weight: 600; padding: 1px 8px; border-radius: 999px; background: var(--surface-alt); color: var(--text-muted); }
.og-head { display: inline-flex; align-items: center; gap: 6px; }
.og-head .avatar-img, .og-head .avatar-initial { width: 20px; height: 20px; font-size: 10px; }
.og-nohead { color: var(--warning); }
.og-row-stats { display: flex; gap: 14px; font-size: 13px; color: var(--text-muted); }
.og-row-stats span { display: inline-flex; align-items: center; gap: 4px; font-variant-numeric: tabular-nums; }
.og-row-actions { display: flex; gap: 6px; align-items: center; }
@media (max-width: 800px) {
  .og-row { flex-wrap: wrap; padding-left: calc(18px + var(--d) * 14px); }
  .og-row::before { left: calc(8px + var(--d) * 14px); }
  .og-row-actions { width: 100%; justify-content: flex-end; }
}
.og-pos-group .card-head h3 { display: flex; align-items: center; }
.og-level { display: inline-block; font-size: 11px; font-weight: 600; padding: 2px 9px; border-radius: 999px; background: var(--surface-alt); color: var(--text-muted); white-space: nowrap; }
.og-level.l1 { background: #1c1917; color: #fff; }
.og-level.l2 { background: #ffedd5; color: #c2410c; }
.og-level.l3 { background: #fef3c7; color: #b45309; }
.og-level.l4 { background: #dbeafe; color: #1d4ed8; }
.og-faces { display: flex; align-items: center; }
.og-faces a { margin-right: -6px; border: 2px solid var(--surface); border-radius: 50%; display: inline-flex; }
.og-faces .avatar-img, .og-faces .avatar-initial { width: 28px; height: 28px; font-size: 12px; }
.og-under { color: var(--warning); }

/* ---- Org chart ---- */
.oc-toolbar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.oc-seg { display: inline-flex; padding: 3px; background: var(--surface-alt); border: 1px solid var(--border); border-radius: 10px; }
.oc-seg a { display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; border-radius: 8px; font-size: 14px; color: var(--text-muted); text-decoration: none; font-weight: 500; }
.oc-seg a.active { background: var(--surface); color: var(--text); box-shadow: var(--shadow-sm); }
.oc-search { display: flex; align-items: center; gap: 6px; flex: 1; min-width: 200px; max-width: 360px; padding: 0 12px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); color: var(--text-muted); }
.oc-search input { border: 0; outline: 0; background: transparent; padding: 9px 0; flex: 1; font: inherit; box-shadow: none; }
.oc-zoom { display: inline-flex; align-items: center; gap: 2px; margin-left: auto; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); padding: 3px; }
.oc-zoom button { border: 0; background: transparent; min-width: 30px; height: 30px; border-radius: 7px; cursor: pointer; font: inherit; font-size: 16px; color: var(--text); }
.oc-zoom button:hover { background: var(--surface-alt); }
.oc-zoom .oc-fit { font-size: 13px; padding: 0 10px; }
.oc-zoom span { font-size: 12px; color: var(--text-muted); min-width: 42px; text-align: center; font-variant-numeric: tabular-nums; }

.oc-canvas {
  padding: 32px 16px; overflow: auto; cursor: grab; min-height: 420px; max-height: calc(100vh - 220px);
  background-color: var(--surface);
  background-image: radial-gradient(circle, var(--border) 1px, transparent 1px); background-size: 20px 20px;
}
.oc-canvas.grabbing { cursor: grabbing; user-select: none; }
.oc-stage { width: max-content; min-width: 100%; display: flex; flex-direction: column; align-items: center; gap: 40px; }

/* classic CSS tree connectors */
.oc-tree, .oc-tree ul { display: flex; justify-content: center; margin: 0; padding: 0; list-style: none; }
.oc-tree ul { padding-top: 24px; position: relative; }
.oc-tree li { display: flex; flex-direction: column; align-items: center; position: relative; padding: 24px 10px 0; }
.oc-tree > li { padding-top: 0; }
.oc-tree ul::before { content: ""; position: absolute; top: 0; left: 50%; height: 24px; border-left: 2px solid var(--border-strong); }
.oc-tree li::before, .oc-tree li::after { content: ""; position: absolute; top: 0; height: 24px; width: 50%; border-top: 2px solid var(--border-strong); }
.oc-tree li::before { right: 50%; }
.oc-tree li::after { left: 50%; border-left: 2px solid var(--border-strong); }
.oc-tree li:first-child::before, .oc-tree li:last-child::after { border-top: 0; }
.oc-tree li:last-child::before { border-right: 2px solid var(--border-strong); border-top-right-radius: 8px; }
.oc-tree li:first-child::after { border-top-left-radius: 8px; }
.oc-tree li:only-child::before, .oc-tree li:only-child::after { border-top: 0; }
.oc-tree li:only-child::before { display: none; }
.oc-tree > li::before, .oc-tree > li::after { display: none; }
.oc-tree li:only-child { padding-top: 24px; }
.oc-tree > li:only-child { padding-top: 0; }

.oc-node {
  position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; width: 200px; padding: 14px 14px 12px;
  border: 1px solid var(--border); border-top: 4px solid var(--c); border-radius: 12px; background: var(--surface);
  font: inherit; text-align: left; color: var(--text); cursor: pointer; box-shadow: var(--shadow-sm);
  transition: box-shadow .15s, transform .15s, border-color .15s;
}
.oc-node:hover { box-shadow: var(--shadow-lg); transform: translateY(-2px); }
.oc-node:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.oc-node.oc-company { width: 240px; background: linear-gradient(135deg, #1c1917, #431407); color: #fff; border-color: transparent; border-top-color: var(--accent); }
.oc-node.oc-company .oc-type { background: rgba(255,255,255,.12); color: #fdba74; }
.oc-node.oc-company .oc-count { color: #e7e5e4; }
.oc-node.oc-company .oc-name { font-size: 18px; }
.oc-node.oc-division { width: 220px; }
.oc-node.oc-team { width: 180px; }
.oc-type { font-size: 10px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; padding: 2px 8px; border-radius: 999px; background: color-mix(in srgb, var(--c) 14%, transparent); color: var(--c); }
.oc-name { font-weight: 700; font-size: 15px; line-height: 1.3; }
.oc-head { display: flex; align-items: center; gap: 8px; width: 100%; padding: 8px; margin-top: 2px; border-radius: 8px; background: var(--surface-alt); }
.oc-head > span:last-child { display: flex; flex-direction: column; min-width: 0; }
.oc-head b { font-size: 13px; font-weight: 600; }
.oc-head small { font-size: 11px; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.oc-head .avatar-img, .oc-head .avatar-initial { width: 30px; height: 30px; font-size: 13px; flex-shrink: 0; }
.oc-head.empty b { color: var(--warning); font-weight: 500; }
.oc-q { width: 30px; height: 30px; border-radius: 50%; border: 2px dashed var(--border-strong); display: inline-flex; align-items: center; justify-content: center; color: var(--text-subtle); font-weight: 700; flex-shrink: 0; }
.oc-foot { display: flex; align-items: center; justify-content: space-between; width: 100%; margin-top: 2px; }
.oc-faces { display: flex; }
.oc-faces > * { margin-right: -6px; border: 2px solid var(--surface); border-radius: 50%; }
.oc-faces .avatar-img, .oc-faces .avatar-initial { width: 22px; height: 22px; font-size: 10px; }
.oc-count { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; color: var(--text-muted); font-variant-numeric: tabular-nums; }

.oc-node.oc-person { width: 170px; align-items: center; text-align: center; gap: 2px; padding: 16px 12px 12px; }
.oc-person .avatar-img, .oc-person .avatar-initial { width: 52px; height: 52px; font-size: 20px; margin-bottom: 6px; }
.oc-pname { font-weight: 700; font-size: 14px; }
.oc-ppos { font-size: 12px; color: var(--text); }
.oc-punit { font-size: 11px; color: var(--c); font-weight: 600; margin-top: 4px; }
.oc-reports { position: absolute; bottom: -11px; left: 50%; transform: translateX(-50%); font-size: 11px; padding: 1px 8px; border-radius: 999px; background: var(--surface); border: 1px solid var(--border); color: var(--text-muted); white-space: nowrap; z-index: 1; }
.oc-node.hit { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(249,115,22,.35); }
.oc-node.dim, .oc-chip.dim { opacity: .35; }

.oc-loose h3 { display: flex; align-items: center; gap: 8px; }
.oc-loose-list { display: flex; flex-wrap: wrap; gap: 8px; }
.oc-chip { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px 6px 6px; border: 1px solid var(--border); border-radius: 999px; background: var(--surface); font: inherit; cursor: pointer; text-align: left; }
.oc-chip:hover { border-color: var(--border-strong); background: var(--surface-alt); }
.oc-chip.hit { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(249,115,22,.25); }
.oc-chip span { display: flex; flex-direction: column; line-height: 1.25; }
.oc-chip b { font-size: 13px; }
.oc-chip small { font-size: 11px; color: var(--text-muted); }
.oc-chip .avatar-img, .oc-chip .avatar-initial { width: 30px; height: 30px; font-size: 12px; }

/* popup */
.modal.oc-pop { max-width: 460px; padding: 0; overflow: hidden; border-radius: 18px; }
.oc-pop-head { position: relative; padding: 22px 22px 16px; border-bottom: 1px solid var(--border); }
.oc-pop-head .modal-close { position: absolute; right: 12px; top: 12px; }
.oc-pop-band { position: absolute; left: 0; right: 0; top: 0; height: 5px; background: var(--c, var(--accent)); }
.oc-pop-head h3 { margin: 8px 0 2px; font-size: 20px; }
.oc-pop-path { font-size: 13px; color: var(--text-muted); }
.oc-pop-stats { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 12px; font-size: 13px; color: var(--text-muted); }
.oc-pop-stats b { color: var(--text); font-size: 16px; }
.oc-pop-person { display: flex; align-items: center; gap: 14px; }
.oc-pop-person h3 { margin: 0 0 2px; }
.oc-pop-body { padding: 8px 22px 22px; max-height: min(60vh, 520px); overflow-y: auto; }
.oc-desc { font-size: 14px; color: var(--text-muted); margin: 12px 0 0; }
.oc-sec { font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--text-muted); margin: 16px 0 6px; }
.oc-pr { display: flex; align-items: center; gap: 10px; padding: 8px; margin: 0 -8px; border-radius: 10px; color: var(--text); text-decoration: none; }
a.oc-pr:hover { background: var(--surface-alt); }
.oc-pr-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.oc-pr-txt b { font-size: 14px; font-weight: 600; }
.oc-pr-txt b small { font-weight: 400; color: var(--text-muted); }
.oc-pr-txt > small { font-size: 12px; color: var(--text-muted); }
.oc-tag { font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 999px; background: #ffedd5; color: #c2410c; }
.oc-none { font-size: 14px; color: var(--text-subtle); padding: 6px 0; }
.oc-av { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; color: #fff; font-weight: 600; }
.oc-av.xl { width: 56px; height: 56px; font-size: 22px; }
.oc-subs { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.oc-subs button { display: flex; flex-direction: column; align-items: flex-start; padding: 10px 12px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); font: inherit; cursor: pointer; text-align: left; }
.oc-subs button:hover { border-color: var(--accent); }
.oc-subs small { font-size: 12px; color: var(--text-muted); }

/* ---- บัญชีผู้ใช้ & สิทธิ์ (หน้า employee view) ---- */
.acct-row { display: flex; align-items: center; gap: 12px; padding: 10px 0; flex-wrap: wrap; }
.acct-row + .acct-row { border-top: 1px solid var(--border); }
.acct-ic { width: 38px; height: 38px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; background: var(--surface-alt); color: var(--text-muted); flex-shrink: 0; }
.acct-ic.exec { background: #ffedd5; color: #c2410c; }
.acct-info { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.acct-info small { color: var(--text-muted); font-size: 12px; }
.acct-edit { border: 1px solid var(--border); border-radius: 12px; padding: 12px 14px; margin-bottom: 12px; }
.acct-edit-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.acct-edit-head > span { display: inline-flex; align-items: center; gap: 6px; }
.acct-roles { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
@media (max-width: 560px) { .acct-roles { grid-template-columns: minmax(0, 1fr); } }
.acct-role { cursor: pointer; margin: 0; }
.acct-role input { position: absolute; opacity: 0; pointer-events: none; }
.acct-role > span { display: flex; flex-direction: column; gap: 3px; height: 100%; padding: 10px 12px; border: 1px solid var(--border); border-radius: 10px; transition: border-color .15s, background .15s; }
.acct-role b { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; }
.acct-role small { font-size: 12px; color: var(--text-muted); font-weight: 400; line-height: 1.45; }
.acct-role:hover > span { border-color: var(--border-strong); }
.acct-role input:checked + span { border-color: var(--accent); background: var(--accent-light); box-shadow: 0 0 0 1px var(--accent); }
.acct-role input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }
.acct-role.locked { cursor: not-allowed; opacity: .7; }
.acct-toggle { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; margin: 0; font-size: 13px; font-weight: 500; }
.acct-toggle input { position: absolute; opacity: 0; pointer-events: none; }
.acct-toggle-ui { width: 36px; height: 20px; border-radius: 999px; background: var(--border-strong); position: relative; transition: background .15s; flex-shrink: 0; }
.acct-toggle-ui::after { content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.2); transition: transform .15s; }
.acct-toggle input:checked + .acct-toggle-ui { background: var(--success); }
.acct-toggle input:checked + .acct-toggle-ui::after { transform: translateX(16px); }
.acct-toggle input:disabled + .acct-toggle-ui { opacity: .5; }
.acct-toggle input:focus-visible + .acct-toggle-ui { outline: 2px solid var(--accent); outline-offset: 2px; }
.acct-none { padding: 12px 14px; border: 1px dashed var(--border-strong); border-radius: 10px; font-size: 13px; color: var(--text-muted); margin-bottom: 12px; }

/* ---- Sidebar: ตรึงส่วนผู้ใช้ไว้ด้านล่าง เลื่อนเฉพาะเมนู ---- */
.sidebar { overflow: hidden; }
.sidebar-brand, .sidebar-user { flex-shrink: 0; }
.sidebar-nav { min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.15) transparent; }
.sidebar-nav::-webkit-scrollbar { width: 6px; }
.sidebar-nav::-webkit-scrollbar-thumb { background: rgba(255,255,255,.15); border-radius: 3px; }
.sidebar-user { background: var(--primary); box-shadow: 0 -8px 16px -8px rgba(0,0,0,.4); }
.sidebar-user a.info { display: block; text-decoration: none; border-radius: 6px; }
.sidebar-user a.info:hover .name { color: #fdba74; }
.sidebar-user .avatar-img { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
@supports (height: 100dvh) { .sidebar { height: 100dvh; } }

/* ---- แจ้งเตือนเบราว์เซอร์ในแอป (LINE/Facebook) บนหน้า login/invite ---- */
.inapp-warn { text-align: left; background: #fff7ed; border: 1px solid #fdba74; border-radius: 12px; padding: 14px 16px; margin-bottom: 18px; color: #7c2d12; }
.inapp-warn strong { display: block; font-size: 15px; margin-bottom: 4px; }
.inapp-warn p { margin: 0 0 10px; font-size: 13px; line-height: 1.6; }
.inapp-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.g-btn-wrap { display: flex; justify-content: center; min-height: 44px; }

/* ============================================================
   ตารางในพื้นที่แคบ (เนื้อหากว้าง ≤720px — มือถือ/แท็บเล็ต/จอเล็กที่เปิดเมนู): แต่ละแถวเป็นการ์ด  label : ค่า
   class "rt" ใส่ให้อัตโนมัติจาก footer.php — ใส่ class "no-stack" ที่ table เพื่อไม่ให้แปลง
   ============================================================ */
.content { container-type: inline-size; container-name: content; }
@container content (max-width: 720px) {
  .table-wrap:has(table.rt) { overflow: visible; }
  table.rt, table.rt tbody, table.rt tfoot { display: block; width: 100% !important; }
  table.rt.tbl-fixed { table-layout: auto; }
  table.rt thead, table.rt colgroup { display: none; }
  table.rt tr { display: block; padding: 12px 16px; border-bottom: 1px solid var(--border); }
  table.rt tbody tr:last-child { border-bottom: 0; }
  table.rt tbody tr:hover td { background: transparent; }
  table.rt td {
    display: grid; grid-template-columns: minmax(84px, 36%) minmax(0, 1fr); gap: 10px; align-items: start;
    padding: 4px 0 !important; border: 0 !important; white-space: normal !important; overflow: visible !important;
    text-overflow: clip !important; text-align: left !important; width: auto !important; min-width: 0; word-break: break-word;
  }
  table.rt td::before { content: attr(data-label); font-size: 12px; color: var(--text-muted); font-weight: 500; line-height: 1.6; }
  table.rt td:not([data-label]) { grid-template-columns: minmax(0, 1fr); }
  table.rt td:not([data-label])::before { display: none; }
  table.rt td .rt-v { min-width: 0; }
  table.rt td.rt-primary { padding-bottom: 8px !important; font-size: 15px; }
  table.rt td.rt-primary .emp-cell { gap: 10px; }
  table.rt td.rt-actions { display: flex; flex-wrap: wrap; gap: 8px; padding-top: 10px !important; }
  table.rt td.rt-actions:empty { display: none; }
  table.rt td.rt-actions .row-actions { justify-content: flex-start !important; flex-wrap: wrap; }
  table.rt td.rt-full { display: block; text-align: center !important; }
  table.rt td.rt-full.table-empty { padding: 28px 0 !important; }
  table.rt tr.pf-cat-tr td { text-align: left !important; }
  table.rt td.center .rt-v, table.rt td.text-right .rt-v, table.rt td.right .rt-v { text-align: left; }
}
@container content (max-width: 720px) {
  /* แถวที่มีคอลัมน์เยอะ: ค่าเรียง 3 ช่องต่อแถว (label อยู่บนค่า) */
  table.rt tr.rt-many { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
  table.rt tr.rt-many td.rt-primary, table.rt tr.rt-many td.rt-actions, table.rt tr.rt-many td.rt-full { grid-column: 1 / -1; }
  table.rt tr.rt-many td[data-label] { display: flex; flex-direction: column; gap: 0; padding: 6px 8px !important; background: var(--surface-alt); border-radius: 8px; }
  table.rt tr.rt-many td[data-label]::before { font-size: 11px; line-height: 1.3; }
}
@media (max-width: 700px) {
  /* การ์ดสรุปด้านบน: 2 ช่องต่อแถว */
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 10px; }
  .stat { padding: 14px; }
  .stat .label { font-size: 12px; }
  .stat .value { font-size: 22px; }
}

/* ---- เชื่อม Google Calendar ---- */
.cal-head.big { flex-wrap: wrap; gap: 10px; }
.gcal-btn { display: inline-flex; align-items: center; gap: 6px; }
.gcal-lead { margin: 0 0 16px; font-size: 14px; line-height: 1.7; color: var(--text-muted); }
.gcal-lead b { color: var(--text); font-weight: 600; }
.gcal-add { justify-content: center; margin-bottom: 6px; }
.gcal-sep { display: flex; align-items: center; gap: 10px; margin: 18px 0 10px; font-size: 12px; color: var(--text-subtle); }
.gcal-sep::before, .gcal-sep::after { content: ""; flex: 1; height: 1px; background: var(--border); }
.gcal-steps { margin: 0 0 10px; padding-left: 20px; font-size: 13px; line-height: 1.9; }
.gcal-copy { display: flex; gap: 8px; }
.gcal-copy input { flex: 1; min-width: 0; font-family: ui-monospace, monospace; font-size: 12px; }
.gcal-notes { margin: 14px 0 0; padding-left: 18px; font-size: 12px; line-height: 1.7; color: var(--text-muted); }
.gcal-notes li + li { margin-top: 4px; }
.dm2-gcal { flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 8px; border: 1px solid var(--border); background: var(--surface); color: #4285F4; text-decoration: none; }
.dm2-gcal:hover { border-color: #4285F4; background: #eef4ff; }