.camera-container {
  background: #0f172a;
  border-radius: 10px;
  overflow: hidden;
  position: relative;
  width: 100%;
  height: 210px !important;
  max-height: 210px !important;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 12px;
  border: 2px solid #334155;
}

.camera-video, .camera-preview-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.camera-face-guide {
  width: 130px !important;
  height: 160px !important;
}

.geo-info-box {
  padding: 8px 12px !important;
  margin-bottom: 14px !important;
}


/* Modal Centering & Responsive Fix */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.65);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 20px;
  overflow-y: auto;
}

.modal-content {
  background: var(--card-bg);
  border-radius: 12px;
  width: 100%;
  max-width: 540px;
  max-height: calc(100vh - 40px);
  overflow-y: auto;
  overflow-x: auto;
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.2), 0 10px 10px -5px rgba(0, 0, 0, 0.1);
  padding: 20px 24px;
  animation: popIn 0.2s ease-out;
  position: relative;
  z-index: 1001;
}

.camera-preview-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 8px;
  display: block;
  background: #0f172a;
}


/* ==================== CORE APP LAYOUT & SIDEBAR ==================== */
.app-layout {
  display: flex;
  min-height: 100vh;
  width: 100%;
  background: #f8fafc;
  color: #1e293b;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

.sidebar {
  width: 260px;
  min-width: 260px;
  max-width: 260px;
  background: #ffffff;
  border-right: 1px solid #e2e8f0;
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  height: 100vh;
  z-index: 50;
}

.sidebar-brand {
  padding: 20px 20px;
  display: flex;
  align-items: center;
  gap: 12px;
  border-bottom: 1px solid #e2e8f0;
}

.brand-logo {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: linear-gradient(135deg, #0171bf 0%, #29246c 100%);
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 10px rgba(79, 70, 229, 0.25);
}

.brand-info span {
  font-size: 17px;
  font-weight: 800;
  color: #0f172a;
  display: block;
  line-height: 1.2;
  letter-spacing: -0.3px;
}

.brand-info small {
  font-size: 11px;
  color: #64748b;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.sidebar-nav {
  padding: 16px 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
  overflow: visible;
}

.compact-nav { gap: 3px; }
.nav-group { border: 0; }
.nav-group summary { list-style: none; cursor: pointer; }
.nav-group summary::-webkit-details-marker { display: none; }
.nav-group-summary { width: 100%; }
.nav-chevron { margin-left: auto; transition: transform .16s ease; }
.nav-group[open] .nav-chevron { transform: rotate(90deg); }
.nav-group-items { padding: 2px 0 4px 30px; }
.nav-child { min-height: 30px; padding: 6px 10px; font-size: 12px; }
.nav-child.active { font-weight: 700; }

.nav-section-title {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: #94a3b8;
  padding: 8px 12px 4px 12px;
}

.nav-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  border-radius: 8px;
  color: #475569;
  font-size: 13.5px;
  font-weight: 500;
  background: transparent;
  border: none;
  cursor: pointer;
  text-align: left;
  width: 100%;
  transition: all 0.15s ease-in-out;
}

.nav-item:hover {
  background: #f1f5f9;
  color: #0f172a;
}

.nav-item.active {
  background: #e8f3fb;
  color: #0171bf;
  font-weight: 700;
}

.sidebar-footer {
  padding: 16px;
  border-top: 1px solid #e2e8f0;
  margin-top: auto;
  background: #ffffff;
}

.user-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 6px;
  border-radius: 8px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
}

.user-info {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.user-name {
  font-size: 13px;
  font-weight: 700;
  color: #0f172a;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.user-role {
  font-size: 11px;
  color: #64748b;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ==================== MAIN CONTENT & TOPBAR ==================== */
.main-content {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  height: 100vh;
  overflow-y: auto;
  background: #f8fafc;
}

.topbar {
  background: #ffffff;
  border-bottom: 1px solid #e2e8f0;
  padding: 14px 28px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: sticky;
  top: 0;
  z-index: 40;
}

.topbar-left {
  display: flex;
  align-items: center;
  gap: 12px;
}

.content-body {
  padding: 24px 28px;
  flex: 1;
}

/* ==================== STATS CARDS ==================== */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 16px;
  margin-bottom: 24px;
}

.stat-card {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  padding: 18px;
  display: flex;
  align-items: center;
  gap: 16px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}

.stat-icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.stat-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  color: #64748b;
  letter-spacing: 0.5px;
}

.stat-value {
  font-size: 22px;
  font-weight: 800;
  color: #0f172a;
  line-height: 1.2;
}

/* ==================== BADGES ==================== */
.badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 8px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.3;
}

.badge-info {
  background: #e0f2fe;
  color: #0369a1;
}

.badge-success {
  background: #dcfce7;
  color: #15803d;
}

.badge-warning {
  background: #fef3c7;
  color: #b45309;
}

.badge-danger {
  background: #fee2e2;
  color: #b91c1c;
}

.badge-neutral {
  background: #f1f5f9;
  color: #475569;
}

/* ==================== STEPPER (APPROVAL FLOW) ==================== */
.stepper {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 4px;
}

.step-item {
  flex: 1;
  min-width: 140px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 10px;
  position: relative;
}

.step-approved {
  border-color: #86efac;
  background: #f0fdf4;
}

.step-current {
  border-color: #93c5fd;
  background: #eff6ff;
  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2);
}

.step-rejected {
  border-color: #fca5a5;
  background: #fef2f2;
}

.step-badge {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #cbd5e1;
  color: #ffffff;
  font-size: 11px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 6px;
}

.step-approved .step-badge {
  background: #16a34a;
}

.step-current .step-badge {
  background: #2563eb;
}

.step-rejected .step-badge {
  background: #dc2626;
}

.step-title {
  font-size: 12px;
  font-weight: 700;
  color: #1e293b;
}

.step-sub {
  font-size: 11px;
  color: #64748b;
  margin-top: 2px;
}

/* ==================== TABLES & CONTAINERS ==================== */
.table-container {
  width: 100%;
  overflow-x: auto;
  background: #ffffff;
  border-radius: 8px;
}

.clickable-row {
  cursor: pointer;
  transition: background 0.15s ease;
}

.clickable-row:hover {
  background: #f8fafc;
}

.btn-icon-danger {
  background: transparent;
  border: none;
  color: #ef4444;
  cursor: pointer;
  padding: 4px 6px;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  transition: background 0.15s;
}

.btn-icon-danger:hover {
  background: #fee2e2;
}

/* ==================== MODAL HELPERS ==================== */
.modal-header {
  padding: 16px 20px;
  border-bottom: 1px solid #e2e8f0;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.modal-title {
  font-size: 16px;
  font-weight: 700;
  color: #0f172a;
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
}

.modal-footer {
  padding: 16px 20px;
  border-top: 1px solid #e2e8f0;
}

/* XeraHR Design System: Modern SaaS, Clean Typography, Glassmorphism, Responsive */
:root {
  --primary: #0171bf;
  --primary-hover: #015a96;
  --primary-light: #e8f3fb;
  --primary-glow: rgba(1, 113, 191, 0.25);
  --secondary: #009487;
  --success: #10b981;
  --warning: #f59e0b;
  --danger: #ef4444;
  --dark: #0f172a;
  --dark-surface: #1e293b;
  --card-bg: #ffffff;
  --text-main: #1e293b;
  --text-muted: #64748b;
  --border: #e2e8f0;
  --bg-app: #f8fafc;
  --radius: 12px;
  --shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -2px rgba(0, 0, 0, 0.05);
  --shadow-lg: 0 10px 25px -5px rgba(0, 0, 0, 0.08), 0 8px 10px -6px rgba(0, 0, 0, 0.05);
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

body {
  background-color: var(--bg-app);
  color: var(--text-main);
  line-height: 1.5;
  overflow-x: hidden;
}

/* Utilities */
.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 20px;
  font-size: 14px;
  font-weight: 600;
  border-radius: var(--radius);
  border: 1px solid transparent;
  cursor: pointer;
  transition: all 0.2s ease;
  text-decoration: none;
}

.btn-primary {
  background: var(--primary);
  color: #fff;
  box-shadow: 0 2px 10px var(--primary-glow);
}
.btn-primary:hover {
  background: var(--primary-hover);
  transform: translateY(-1px);
}

.btn-outline {
  border-color: var(--border);
  background: #fff;
  color: var(--text-main);
}
.btn-outline:hover {
  background: #f1f5f9;
}

.btn-danger {
  background: var(--danger);
  color: #fff;
}
.btn-danger:hover {
  background: #dc2626;
}

.btn-danger-soft {
  background: #fef2f2;
  color: #dc2626;
  border: 1px solid #fecaca;
}

.btn-danger-soft:hover {
  background: #fee2e2;
}

.row-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  align-items: center;
}

.row-actions .btn {
  white-space: nowrap;
}

.btn-success {
  background: var(--success);
  color: #fff;
}
.btn-success:hover {
  background: #059669;
}

.badge {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 9999px;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
}

.badge-pending {
  background: #fef3c7;
  color: #b45309;
}

.badge-approved {
  background: #d1fae5;
  color: #065f46;
}

.badge-rejected {
  background: #fee2e2;
  color: #991b1b;
}

.badge-waiting {
  background: #f1f5f9;
  color: #64748b;
}

.badge-role {
  background: var(--primary-light);
  color: var(--primary);
}

/* Landing Page Styles */
.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 0;
  border-bottom: 1px solid rgba(226, 232, 240, 0.7);
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(8px);
  position: sticky;
  top: 0;
  z-index: 100;
}

.brand-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 22px;
  font-weight: 800;
  color: var(--primary);
  text-decoration: none;
}

.brand-logo svg {
  width: 32px;
  height: 32px;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 24px;
}

.nav-links a {
  text-decoration: none;
  color: var(--text-muted);
  font-weight: 500;
  font-size: 15px;
  transition: color 0.2s;
}

.nav-links a:hover {
  color: var(--primary);
}

.hero {
  padding: 80px 0 60px;
  text-align: center;
}

.hero-tag {
  display: inline-block;
  padding: 6px 14px;
  background: var(--primary-light);
  color: var(--primary);
  font-size: 13px;
  font-weight: 600;
  border-radius: 999px;
  margin-bottom: 20px;
}

.hero h1 {
  font-size: 48px;
  font-weight: 800;
  line-height: 1.15;
  margin-bottom: 20px;
  color: var(--dark);
}

.hero h1 span {
  background: linear-gradient(135deg, var(--primary) 0%, #a855f7 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.hero p {
  font-size: 18px;
  color: var(--text-muted);
  max-width: 650px;
  margin: 0 auto 32px;
}

.hero-btns {
  display: flex;
  gap: 16px;
  justify-content: center;
  margin-bottom: 50px;
}

.hero-preview {
  position: relative;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 16px;
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  max-width: 1000px;
  margin: 0 auto;
}

.feature-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 24px;
  padding: 60px 0;
}

.feature-card {
  background: #fff;
  padding: 30px;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  transition: transform 0.2s, box-shadow 0.2s;
}

.feature-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
}

.feature-icon {
  width: 48px;
  height: 48px;
  background: var(--primary-light);
  color: var(--primary);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
}

.feature-card h3 {
  font-size: 18px;
  margin-bottom: 10px;
}

.feature-card p {
  color: var(--text-muted);
  font-size: 14px;
  line-height: 1.6;
}

/* App Layout (Dashboard & Workspace) */
.app-container {
  display: flex;
  min-height: 100vh;
}

.sidebar {
  width: 260px;
  background: #fff;
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  height: 100vh;
}

.sidebar-header {
  padding: 24px 20px;
  border-bottom: 1px solid var(--border);
}

.sidebar-nav {
  padding: 16px 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
  overflow: visible;
}

.nav-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  border-radius: 8px;
  color: var(--text-muted);
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
}

.nav-item:hover, .nav-item.active {
  background: var(--primary-light);
  color: var(--primary);
  font-weight: 600;
}

.sidebar-user {
  padding: 16px;
  border-top: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: 12px;
}

.avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--border);
}

.main-content {
  flex: 1;
  background: var(--bg-app);
  display: flex;
  flex-direction: column;
  min-width: 0;
  height: 100vh;
  overflow-y: auto;
  overflow-x: hidden;
}

.topbar {
  background: #fff;
  border-bottom: 1px solid var(--border);
  padding: 16px 30px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.page-body {
  padding: 30px;
  flex: 1;
  overflow-y: auto;
}

/* Card, Grid, Stats */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 20px;
  margin-bottom: 30px;
}

.stat-card {
  background: #fff;
  padding: 22px;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
}

.stat-card h4 {
  color: var(--text-muted);
  font-size: 13px;
  font-weight: 500;
  margin-bottom: 8px;
}

.stat-card .value {
  font-size: 28px;
  font-weight: 700;
  color: var(--dark);
}

.card {
  background: #fff;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
  padding: 24px;
  margin-bottom: 24px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.card-title {
  font-size: 17px;
  font-weight: 700;
}

/* Multi-stage pipeline tracker */
.pipeline-track {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  row-gap: 6px;
  margin: 12px 0;
}

.stage-step {
  display: flex;
  align-items: center;
  flex: none;
  white-space: nowrap;
  gap: 8px;
  padding: 6px 12px;
  border-radius: 8px;
  font-size: 12px;
  border: 1px solid var(--border);
  background: #f8fafc;
}

.stage-step.active {
  border-color: var(--warning);
  background: #fffbeb;
  color: #b45309;
  font-weight: 600;
}

.stage-step.completed {
  border-color: var(--success);
  background: #f0fdf4;
  color: #166534;
  font-weight: 600;
}

.stage-step.rejected {
  border-color: var(--danger);
  background: #fef2f2;
  color: #991b1b;
  font-weight: 600;
}

.pipeline-arrow {
  color: #cbd5e1;
  font-size: 14px;
}

/* Tables */
.table-responsive {
  overflow-x: auto;
}

table {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
}

th {
  background: #f8fafc;
  padding: 12px 16px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
  border-bottom: 1px solid var(--border);
  text-transform: uppercase;
}

td {
  padding: 14px 16px;
  border-bottom: 1px solid var(--border);
  font-size: 14px;
}

tr:hover td {
  background: #fdfdfd;
}

/* Modals */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

.modal-content {
  background: #fff;
  border-radius: var(--radius);
  width: 100%;
  max-width: 540px;
  box-shadow: var(--shadow-lg);
  padding: 24px;
  animation: popIn 0.2s ease-out;
}

@keyframes popIn {
  from { opacity: 0; transform: scale(0.95); }
  to { opacity: 1; transform: scale(1); }
}

.form-group {
  margin-bottom: 16px;
}

.form-group label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 6px;
}

.form-control {
  width: 100%;
  padding: 10px 14px;
  border-radius: 8px;
  border: 1px solid var(--border);
  font-size: 14px;
  outline: none;
  transition: border-color 0.2s;
}

.form-control:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-glow);
}

/* Form grid: label di atas kolom, dua kolom (dipakai formulir kandidat, karyawan, dll.) */
.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.form-grid > label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
}

.form-grid > label > input,
.form-grid > label > select,
.form-grid > label > textarea {
  width: 100%;
  padding: 10px 14px;
  border-radius: 8px;
  border: 1px solid var(--border);
  font-size: 14px;
  font-weight: 400;
  outline: none;
  transition: border-color 0.2s;
  font-family: inherit;
  color: var(--text);
  box-sizing: border-box;
}

.form-grid > label > input:focus,
.form-grid > label > select:focus,
.form-grid > label > textarea:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-glow);
}

.form-grid > label > textarea {
  min-height: 76px;
  resize: vertical;
}

.form-span-2 {
  grid-column: span 2;
}

@media (max-width: 640px) {
  .form-grid {
    grid-template-columns: 1fr;
  }

  .form-span-2 {
    grid-column: span 1;
  }
}

/* Switcher Banner */
.role-switcher-banner {
  background: #1e1b4b;
  color: #fff;
  padding: 8px 16px;
  font-size: 13px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* UI Icon Utility */
.ui-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
  flex-shrink: 0;
}

/* Tabs System */
.tabs {
  display: flex;
  gap: 8px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 24px;
  overflow-x: auto;
}
.tab-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-muted);
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.15s ease;
}
.tab-btn:hover {
  color: var(--primary);
}
.tab-btn.active {
  color: var(--primary);
  border-bottom-color: var(--primary);
  font-weight: 700;
}

/* Search and Filters */
.filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
}
.search-box {
  position: relative;
  display: flex;
  align-items: center;
  min-width: 260px;
}
.search-box .ui-icon {
  position: absolute;
  left: 12px;
  color: var(--text-muted);
}
.search-box input {
  padding-left: 36px;
}

/* Document & Letter Printable Card */
.document-sheet {
  background: #ffffff;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  padding: 40px;
  max-width: 720px;
  margin: 0 auto;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
  font-family: 'Times New Roman', Times, serif, sans-serif;
  color: #1e293b;
}
.letter-header {
  text-align: center;
  border-bottom: 3px double #0f172a;
  padding-bottom: 16px;
  margin-bottom: 24px;
}
.letter-header h2 {
  font-size: 20px;
  font-weight: 800;
  letter-spacing: 1px;
  text-transform: uppercase;
}
.letter-header p {
  font-size: 12px;
  color: #64748b;
  margin-top: 4px;
}

/* Export Cards */
.export-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
}
.export-card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 24px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-shadow: var(--shadow);
  transition: transform 0.2s, box-shadow 0.2s;
}
.export-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
}

@media print {
  body * {
    visibility: hidden;
  }
  .printable-area, .printable-area * {
    visibility: visible;
  }
  .printable-area {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    box-shadow: none;
    border: none;
    padding: 0;
  }
  .no-print {
    display: none !important;
  }
}

/* ==================== NOTIFICATION BELL & DROPDOWN ==================== */
.bell-container {
  position: relative;
  display: inline-block;
}

.bell-btn {
  background: none;
  border: 1px solid var(--border);
  padding: 8px 10px;
  border-radius: 8px;
  cursor: pointer;
  position: relative;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
}

.bell-btn:hover {
  background: #f1f5f9;
  color: var(--primary);
  border-color: var(--primary-light);
}

.notif-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  background: #ef4444;
  color: #ffffff;
  font-size: 11px;
  font-weight: 700;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid #ffffff;
  box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}

.notif-dropdown {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  width: 380px;
  max-width: 90vw;
  background: #ffffff;
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.12);
  z-index: 1000;
  display: none;
  flex-direction: column;
  overflow: hidden;
  animation: slideDown 0.18s ease-out;
}

.notif-dropdown.show {
  display: flex;
}

@keyframes slideDown {
  from { opacity: 0; transform: translateY(-8px); }
  to { opacity: 1; transform: translateY(0); }
}

.notif-header {
  padding: 14px 16px;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #f8fafc;
}

.notif-header h4 {
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
  margin: 0;
}

.notif-list {
  max-height: 380px;
  overflow-y: auto;
  padding: 0;
}

.notif-item {
  padding: 12px 16px;
  border-bottom: 1px solid #f1f5f9;
  transition: background 0.15s;
  cursor: pointer;
}

.notif-item:hover {
  background: #f8fafc;
}

.notif-item:last-child {
  border-bottom: none;
}

.notif-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 4px;
  line-height: 1.4;
}

.notif-meta {
  font-size: 11px;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.notif-footer {
  padding: 10px 16px;
  background: #f8fafc;
  border-top: 1px solid var(--border);
  text-align: center;
}

/* ==================== CAMERA FEED & GEO TAGGING ==================== */
.camera-container {
  background: #0f172a;
  border-radius: 12px;
  overflow: hidden;
  position: relative;
  width: 100%;
  aspect-ratio: 4/3;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
  border: 2px solid #334155;
}

.camera-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.camera-canvas {
  display: none;
}

.camera-preview-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.camera-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 12px;
  background: linear-gradient(180deg, rgba(0,0,0,0.4) 0%, transparent 25%, transparent 75%, rgba(0,0,0,0.6) 100%);
}

.camera-face-guide {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 180px;
  height: 220px;
  border: 2px dashed rgba(255, 255, 255, 0.6);
  border-radius: 50%;
  pointer-events: none;
}

.geo-info-box {
  background: #f8fafc;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 12px;
  margin-bottom: 16px;
  font-size: 13px;
}

.geo-info-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
}

.geo-status-ok {
  color: #16a34a;
  font-weight: 600;
}

/* ==================== ENTERPRISE EMPLOYEE PROFILE MODAL ==================== */
.profile-modal-dialog {
  max-width: 840px !important;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  padding: 0 !important;
  overflow: hidden;
}

.profile-modal-header {
  padding: 20px 24px;
  background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.profile-avatar-wrap { position: relative; display: inline-block; }
.avatar-edit-btn { position: absolute; right: -4px; bottom: -4px; width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: #2563eb; color: #fff; border: 2px solid #fff; cursor: pointer; box-shadow: 0 2px 6px rgba(15,23,42,.25); }
.avatar-edit-btn:hover { background: #1d4ed8; }
.profile-avatar-lg {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  border: 3px solid #ffffff;
  object-fit: cover;
  box-shadow: 0 4px 10px rgba(0,0,0,0.25);
}

.profile-header-meta {
  display: flex;
  align-items: center;
  gap: 16px;
}

.profile-modal-body {
  padding: 24px;
  overflow-y: auto;
  flex: 1;
}

.profile-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
  margin-bottom: 20px;
}

.profile-field {
  background: #f8fafc;
  padding: 10px 14px;
  border-radius: 8px;
  border: 1px solid #e2e8f0;
}

.profile-field-label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  color: #64748b;
  margin-bottom: 4px;
}

.profile-field-value {
  font-size: 14px;
  font-weight: 600;
  color: #1e293b;
  word-break: break-word;
}

.profile-section-title {
  font-size: 14px;
  font-weight: 700;
  color: #334155;
  margin-top: 20px;
  margin-bottom: 12px;
  padding-bottom: 6px;
  border-bottom: 2px solid #e2e8f0;
  display: flex;
  align-items: center;
  gap: 8px;
}

/* ==================== FILTER & EXPORT TOOLBAR ==================== */
.export-toolbar {
  background: #ffffff;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 14px 18px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 20px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}

.export-filter-group {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

.export-filter-group label {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
}

.export-filter-group select,
.export-filter-group input {
  padding: 6px 10px;
  font-size: 13px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: #fff;
  outline: none;
}

/* Small Buttons & Actions */
.btn-sm {
  padding: 6px 12px;
  font-size: 12px;
}

.btn-secondary {
  background: #f1f5f9;
  color: #334155;
  border: 1px solid #cbd5e1;
}

.btn-secondary:hover {
  background: #e2e8f0;
  color: #0f172a;
}

.btn-danger {
  background: #ef4444;
  color: #ffffff;
  border: none;
}

.btn-danger:hover {
  background: #dc2626;
}

.btn-icon-danger {
  background: none;
  border: none;
  color: #ef4444;
  cursor: pointer;
  padding: 4px;
  border-radius: 4px;
}

.btn-icon-danger:hover {
  background: #fee2e2;
}

.clickable-row {
  cursor: pointer;
}

.clickable-row:hover {
  background: #f8fafc !important;
}

/* Attendance Selfie Thumbnail */
.att-photo-thumb {
  width: 36px;
  height: 36px;
  border-radius: 6px;
  object-fit: cover;
  border: 1px solid var(--border);
  cursor: pointer;
}


/* ==================== ENTERPRISE HR MODULES ==================== */

/* Upload Dropzone & Import Preview */
.upload-dropzone {
  border: 2px dashed #cbd5e1;
  border-radius: 12px;
  padding: 32px 20px;
  text-align: center;
  background: #f8fafc;
  cursor: pointer;
  transition: all 0.2s ease;
  margin-bottom: 20px;
}
.upload-dropzone:hover {
  border-color: var(--primary);
  background: #f1f5f9;
}
.upload-dropzone input[type="file"] {
  display: none;
}
.csv-preview-table-wrapper {
  max-height: 280px;
  overflow-y: auto;
  border: 1px solid var(--border);
  border-radius: 8px;
  margin-bottom: 20px;
}

/* BAST (Berita Acara Serah Terima) Document Layout */
.bast-document {
  background: #ffffff;
  padding: 36px 40px;
  border: 1px solid var(--border);
  border-radius: 10px;
  color: #1e293b;
  font-family: inherit;
  line-height: 1.6;
}
.bast-header {
  border-bottom: 2px solid #0f172a;
  padding-bottom: 16px;
  margin-bottom: 24px;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}
.bast-signatures {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  margin-top: 40px;
  text-align: center;
}
.bast-sig-box {
  border-top: 1px dashed #94a3b8;
  padding-top: 10px;
  margin-top: 70px;
  font-weight: 600;
}
.sig-canvas-wrapper {
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  background: #f8fafc;
  margin-top: 8px;
}

/* Executive Report Grid */
.report-grid-3 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
  margin-bottom: 24px;
}
.report-card-metric {
  background: #ffffff;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 20px;
}
.report-metric-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 8px;
}
.report-metric-number {
  font-size: 26px;
  font-weight: 800;
  color: var(--text);
  line-height: 1.2;
}

/* Payroll Calculator Layout */
.calc-grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 24px;
}
@media (max-width: 900px) {
  .calc-grid {
    grid-template-columns: 1fr;
  }
}
.calc-summary-card {
  background: linear-gradient(135deg, #1e1b4b 0%, #312e81 100%);
  color: #ffffff;
  border-radius: 12px;
  padding: 24px;
}
.calc-summary-row {
  display: flex;
  justify-content: space-between;
  padding: 10px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  font-size: 14px;
}

/* Mass Payroll Horizontal Table & Payslip Styles */
.payroll-horizontal-wrapper {
  overflow-x: auto !important;
  max-width: 100% !important;
  display: block;
  border-radius: 8px;
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
  margin-bottom: 12px;
}

.payroll-horizontal-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 1200px;
}

.payroll-horizontal-table th {
  background: #f8fafc;
  color: #475569;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  padding: 10px 10px;
  border-bottom: 2px solid var(--border);
  white-space: nowrap;
}

.payroll-horizontal-table td {
  padding: 9px 10px;
  border-bottom: 1px solid var(--border);
  font-size: 12px;
  white-space: nowrap;
  vertical-align: middle;
}

.payroll-horizontal-table tr:hover {
  background: #f1f5f9;
}

.payslip-box {
  background: #ffffff;
  padding: 32px 36px;
  border-radius: 8px;
  border: 1px solid #cbd5e1;
  max-width: 740px;
  margin: 0 auto;
}

.payslip-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  border-bottom: 2px solid #0f172a;
  padding-bottom: 16px;
  margin-bottom: 20px;
}

.payslip-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin-bottom: 24px;
}

.payslip-card {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 16px;
}

.payslip-card-title {
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding-bottom: 8px;
  margin-bottom: 10px;
  border-bottom: 1px solid #cbd5e1;
}

.payslip-row {
  display: flex;
  justify-content: space-between;
  font-size: 12.5px;
  padding: 5px 0;
}

.payslip-total-box {
  background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
  color: #ffffff;
  padding: 20px 24px;
  border-radius: 8px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
}

/* ==================== PAGE SECTION & SECTION HEADER ==================== */
/* Dipakai Recruitment, Offboarding, Security Center, Audit Log, dan modul
   placeholder. Kelas ini sebelumnya TIDAK terdefinisi sama sekali, sehingga
   header tampil tanpa flex/spasi dan tombol jatuh di bawah judul. */
.page-section {
  padding: 24px 28px;
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 22px;
}

.section-header h2 {
  font-size: 22px;
  font-weight: 800;
  color: var(--dark);
  letter-spacing: -0.01em;
}

.section-header p {
  color: var(--text-muted);
  font-size: 13.5px;
  margin-top: 4px;
}

/* ==================== RECRUITMENT ==================== */
.avatar-initials {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: #e0e7ff;
  color: #3730a3;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 13px;
  flex: none;
}

.candidate-cell {
  display: flex;
  align-items: center;
  gap: 12px;
}

.candidate-cell .candidate-name {
  font-weight: 700;
  color: var(--dark);
}

.candidate-cell .candidate-sub {
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 1px;
}

.empty-state {
  text-align: center;
  padding: 46px 20px;
  color: var(--text-muted);
}

.empty-state .empty-icon {
  width: 64px;
  height: 64px;
  border-radius: 20px;
  background: #e8f3fb;
  color: #0171bf;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 14px;
}

.empty-state h4 {
  color: var(--dark);
  font-size: 16px;
  margin-bottom: 6px;
}

.empty-state p {
  font-size: 13.5px;
  margin-bottom: 18px;
}

/* Team leave calendar (added with the leave-calendar feature) */
.cal-weekhead { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; font-size: 11px; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: .04em; margin-bottom: 6px; }
.cal-weekhead > div { text-align: center; }
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.cal-cell { min-height: 86px; border: 1px solid var(--border); border-radius: 10px; padding: 6px; background: #fff; display: flex; flex-direction: column; gap: 3px; }
.cal-cell.cal-empty { background: #f8fafc; border-style: dashed; }
.cal-cell.cal-today { border-color: var(--primary, #2563eb); box-shadow: 0 0 0 1px var(--primary, #2563eb) inset; }
.cal-cell.cal-holiday { background: #fff7ed; }
.cal-daynum { font-size: 12px; font-weight: 800; }
.cal-holname { font-size: 10px; color: #9a3412; line-height: 1.3; }
.cal-chip { display: inline-block; font-size: 10px; font-weight: 700; background: #dbeafe; color: #1d4ed8; border-radius: 99px; padding: 1px 7px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cal-chip-perm { background: #fee2e2; color: #b91c1c; }
.cal-more { font-size: 10px; color: var(--text-muted); font-weight: 700; }
@media (max-width: 720px) { .cal-cell { min-height: 64px; } }

/* Organization chart */
.org-node { display:flex; align-items:center; gap:12px; padding:10px 14px; border:1px solid var(--border); border-radius:12px; background:var(--card-bg); margin:8px 0; max-width:560px; box-shadow:0 1px 2px rgba(15,23,42,.05); }
.org-node .candidate-cell { flex:1; }
.org-children { border-left:2px dashed var(--border); padding-left:14px; margin-left:20px; }

/* ================= XERA BRAND POLISH (20 Okt 2026) =================
   Identitas visual diselaraskan ke logo Kincir X: biru #0171BF, navy
   #29246C, teal #009487, koral #F15B4B. Blok ini murni aditif (menimpa
   lewat urutan) agar aman dari regresi tampilan lama. */
::selection { background: rgba(1, 113, 191, 0.18); }

.btn-primary {
  background: linear-gradient(135deg, #0171bf 0%, #29246c 135%);
  border-color: transparent;
}
.btn-primary:hover { background: linear-gradient(135deg, #015a96 0%, #29246c 135%); }
.btn:active { transform: translateY(0) scale(0.99); }
.btn-secondary, .btn-outline { transition: all 0.2s ease; }
.btn-secondary:hover, .btn-outline:hover { transform: translateY(-1px); }

.nav-item { transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease; }
.nav-item:hover { transform: translateX(2px); }
.nav-item.active {
  background: var(--primary-light);
  color: var(--primary);
  box-shadow: inset 3px 0 0 var(--primary);
}

.card, .stat-card { transition: box-shadow 0.25s ease, transform 0.25s ease; }
.card:hover, .stat-card:hover { box-shadow: var(--shadow-lg); }

.table tbody tr, table tbody tr { transition: background 0.15s ease; }
.table tbody tr:hover, table tbody tr:hover { background: #f4f9fd; }

:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }

.modal-overlay { animation: xeraOverlayFade 0.18s ease-out; }
@keyframes xeraOverlayFade { from { opacity: 0; } to { opacity: 1; } }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #c3d5e4; border-radius: 8px; border: 2px solid var(--bg-app); }
::-webkit-scrollbar-thumb:hover { background: #9db8cf; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

/* === MODE GELAP (Gelombang 21 Okt) — tingkat kerangka via variabel tema.
   Panel dengan warna tertanam (inline) tetap mengikuti warna aslinya. === */
:root { --text: #1e293b; }
[data-theme="dark"] {
  --text: #e2e8f0;
  --card-bg: #1c2739;
  --text-main: #e2e8f0;
  --text-muted: #94a3b8;
  --border: #334155;
  --bg-app: #0b1220;
  --primary-light: #12314d;
}
[data-theme="dark"] body { background: var(--bg-app); color: var(--text-main); }
[data-theme="dark"] .card,
[data-theme="dark"] .modal-content,
[data-theme="dark"] .stat-card { background: var(--card-bg); color: var(--text-main); border-color: var(--border); }
[data-theme="dark"] .form-control { background: #0f172a; color: var(--text-main); border-color: var(--border); }
[data-theme="dark"] table th { background: #16233a; color: var(--text-main); }
[data-theme="dark"] .modal-footer { background: #16233a !important; }
/* Tabel boleh digeser horizontal di layar sempit (26 Okt siang: tabel User & Role
   terpotong di HP dan kolom Aksi/Reset Password tidak terjangkau). */
/* A11 (27 Okt): responsif beneran — kolom pertama menempel (sticky) supaya baris
   tetap teridentifikasi saat menggeser, dan padding mengecil di HP supaya lebih
   banyak kolom muat tanpa geser. Berlaku SEMUA tabel (CSS saja, tanpa ubah
   markup per view). Latar sticky memakai --card-bg agar tidak tembus saat
   digeser; tema gelap ikut (variabel yang sama). */
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; }
/* Perbaikan tabel HP (27 Okt 2026): penyebab bentuk terjepit di screenshot
   user adalah table{width:100%} tanpa lebar minimum — browser memaksa 7
   kolom masuk ke lebar HP, tiap kolom jadi ~50px dan teks membungkus
   berbaris-baris sehingga barisnya tinggi. Solusi: tabel dengan 5 kolom
   atau lebih diberi lebar minimum 680px, sehingga di HP tabel TIDAK
   terjepit melainkan bisa digeser horizontal (kolom pertama tetap
   menempel/sticky sebagai penanda baris). Tabel kecil (<5 kolom) tetap
   menyesuaikan lebar layar seperti biasa. :has() didukung Chrome Android
   modern; bila tidak didukung, tampilannya kembali ke perilaku lama. */
.table-wrap table:has(th:nth-child(5)), .table-container table:has(th:nth-child(5)) { min-width: 680px; }
.table-wrap table th:first-child, .table-wrap table td:first-child { min-width: 140px; }
.table-wrap table th:first-child, .table-wrap table td:first-child {
  position: sticky; left: 0; z-index: 1;
  box-shadow: 1px 0 0 var(--border);
}
/* th sudah berlatar (#f8fafc / #16233a gelap); td transparan sehingga hanya
   td pertama yang diberi latar kartu agar tidak tembus saat digeser. */
.table-wrap table td:first-child { background: var(--card-bg); }
@media (max-width: 640px) {
  .table-wrap table th { padding: 8px 10px; font-size: 11px; }
  .table-wrap table td { padding: 10px; font-size: 13px; }
  .content-body { padding: 12px; }
}
[data-theme="dark"] .table-wrap td { border-color: var(--border); }
[data-theme="dark"] .topbar { background: #16233a; border-color: var(--border); color: var(--text-main); }
[data-theme="dark"] .sidebar { background: #101a2e; border-color: var(--border); }
[data-theme="dark"] .sidebar .nav-item { color: #cbd5e1; }
[data-theme="dark"] .sidebar-footer { background: #101a2e; border-color: var(--border); }
/* SIDEBAR FOOTER GELAP 28 OKT 2026: nama & role chip profil sempat gelap di atas kartu gelap */
[data-theme="dark"] .sidebar-footer .user-card { background: #16233a; border-color: var(--border); }
[data-theme="dark"] .sidebar-footer .user-card .user-name { color: var(--text-main); }
[data-theme="dark"] .sidebar-footer .user-card .user-role { color: #94a3b8; }
[data-theme="dark"] .content-body { background: var(--bg-app); }
/* === MODE GELAP 28 OKT 2026 — perbaikan akar: panel-panel di bawah ini masih
   berlatar putih hard-coded sehingga teks terang tenggelam di atasnya
   (bukti: tabel & kartu statistik Rekap Absensi, tabel Dashboard).
   Aturan-aturan ini hanya berlaku saat data-theme="dark", jadi mode terang
   tidak berubah sama sekali. Dokumen kertas (.document-sheet/.bast-document)
   sengaja TETAP putih, tapi variabel teksnya dikembalikan ke tinta gelap
   supaya tetap terbaca dan tetap layak cetak. === */
[data-theme="dark"] .table-container,
[data-theme="dark"] .export-toolbar,
[data-theme="dark"] .report-card-metric,
[data-theme="dark"] .export-card,
[data-theme="dark"] .notif-dropdown { background: var(--card-bg); color: var(--text-main); border-color: var(--border); }
[data-theme="dark"] .stat-card .value,
[data-theme="dark"] .stat-value { color: var(--text-main); }
[data-theme="dark"] .stat-label { color: var(--text-muted); }
[data-theme="dark"] .btn-outline { background: var(--card-bg); color: var(--text-main); }
[data-theme="dark"] .btn-outline:hover { background: #16233a; }
[data-theme="dark"] .btn-secondary { background: #16233a; color: var(--text-main); border-color: var(--border); }
[data-theme="dark"] .btn-secondary:hover { background: #1e293b; color: var(--text-main); }
[data-theme="dark"] .export-filter-group select,
[data-theme="dark"] .export-filter-group input { background: #0f172a; color: var(--text-main); border-color: var(--border); }
[data-theme="dark"] tr:hover td,
[data-theme="dark"] .table tbody tr:hover,
[data-theme="dark"] table tbody tr:hover { background: #16233a; }
[data-theme="dark"] .notif-item { border-color: var(--border); }
[data-theme="dark"] .notif-item:hover { background: #16233a; }
[data-theme="dark"] .document-sheet,
[data-theme="dark"] .bast-document { background: #ffffff; color: #1e293b; --text: #1e293b; --text-main: #1e293b; --text-muted: #64748b; --border: #cbd5e1; }

/* === MODE GELAP 28 OKT 2026 — audit lanjutan (laporan user: banyak teks tak terlihat) ===
   Bukti (harness headless + screenshot HP): (1) .section-header h2 memakai
   var(--dark) = #0f172a sehingga judul halaman nyaris hitam di atas latar
   gelap; (2) input/select/textarea tanpa .form-control (form-grid, filter,
   modal) tetap berlatar putih browser sementara color:var(--text) sudah
   terang, jadi nilai ketikan & opsi select tak terbaca; (3) .upload-dropzone
   berlatar #f8fafc dengan teks terang, jadi tak terbaca; (4) .cal-cell
   berlatar #fff sementara nomor hari mewarisi teks terang, jadi angka
   hilang; (5) sel tabel polos hanya mewarisi warna sehingga rapuh terhadap
   cascade apa pun, jadi dipaksa eksplisit. color-scheme: dark membuat
   kontrol native (date picker, dropdown) ikut gelap. Dokumen kertas
   (.document-sheet/.bast-document) dikembalikan ke tinta gelap di akhir
   blok supaya aturan td di bawah tidak merusaknya. === */
[data-theme="dark"] { color-scheme: dark; --text-muted: #cbd5e1; }
[data-theme="dark"] .section-header h2,
[data-theme="dark"] .empty-state h4,
[data-theme="dark"] .candidate-cell .candidate-name { color: var(--text-main); }
[data-theme="dark"] .section-header p { color: #cbd5e1; }
[data-theme="dark"] .form-grid > label > input,
[data-theme="dark"] .form-grid > label > select,
[data-theme="dark"] .form-grid > label > textarea,
[data-theme="dark"] input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="hidden"]):not([type="button"]):not([type="submit"]):not([type="range"]):not([type="color"]),
[data-theme="dark"] select,
[data-theme="dark"] textarea { background: #0f172a; color: var(--text-main); border-color: var(--border); }
[data-theme="dark"] input::placeholder,
[data-theme="dark"] textarea::placeholder { color: #94a3b8; opacity: 1; }
[data-theme="dark"] select option { background: #0f172a; color: var(--text-main); }
[data-theme="dark"] .table-wrap td,
[data-theme="dark"] table td { color: var(--text-main); }
[data-theme="dark"] .document-sheet .table-wrap td,
[data-theme="dark"] .document-sheet table td,
[data-theme="dark"] .bast-document .table-wrap td,
[data-theme="dark"] .bast-document table td { color: #1e293b; }
[data-theme="dark"] .upload-dropzone { background: #16233a; border-color: #334155; color: var(--text-main); }
[data-theme="dark"] .upload-dropzone:hover { background: #1c2739; border-color: var(--primary); }
[data-theme="dark"] .cal-cell { background: #16233a; border-color: var(--border); }
[data-theme="dark"] .cal-cell.cal-empty { background: #0f172a; }
[data-theme="dark"] .cal-cell.cal-holiday { background: #3a2a1a; }
[data-theme="dark"] .cal-daynum { color: var(--text-main); }
[data-theme="dark"] .cal-holname { color: #fdba74; }

/* === DASHBOARD & SHELL MUAT DI HP — 28 OKT 2026 ===
   Bukti (screenshot user + repro headless lebar 393px): konten dashboard
   meluber ke kanan dan terpotong permanen oleh .main-content{overflow-x:hidden}
   (main 372px vs ruang 123px; topbar 322px; grid bawah 360px).
   Penyebab: (1) topbar tanpa flex-wrap + badge Role panjang; (2) grid
   stats minmax(220/230px) dan grid bawah dashboard minmax(360px) memaksa
   kolom minimum melebihi ruang konten HP; (3) item grid tanpa min-width:0
   sehingga min-content item ikut memaksa kolom melebar.
   Perbaikan: kolom grid boleh mengecil sampai 100% lebar wadah, item grid
   boleh menyusut, topbar membungkus ke baris berikut, dan padding
   diperkecil di layar sempit. Mode terang tidak berubah nilainya. === */
.stats-grid { grid-template-columns: repeat(auto-fit, minmax(min(230px, 100%), 1fr)); }
.stats-grid > *, .dashboard-bottom-grid > * { min-width: 0; }
.card { min-width: 0; }
.dashboard-bottom-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(360px, 100%), 1fr)); gap: 24px; margin-top: 24px; }
.topbar { flex-wrap: wrap; gap: 12px; }
.topbar-left { min-width: 0; }
.topbar-left h2 { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.topbar .header-right { flex-wrap: wrap; gap: 10px; }
/* === TOPBAR HP DIRAPATKAN — 29 OKT 2026 ===
   Di HP, topbar berisi 6 kontrol (menu, judul, bahasa, lonceng, role, tema,
   keluar) sehingga membungkus jadi 3 baris tak rata dan terlihat berantakan.
   Peran sudah tampil di kartu pengguna sidebar, jadi lencana role di topbar
   disembunyikan di HP; celah dan tombol diperkecil agar topbar muat 2 baris. === */
@media (max-width: 720px) {
  .content-body { padding: 12px; }
  .topbar { padding: 12px 16px; }
  .topbar .header-right { gap: 8px !important; }
  /* Dropdown lonceng HP (29 Okt 2026): lebar 380px yang menempel ke tombol
     lonceng membuat sisi kirinya terpotong keluar layar di HP. Di HP,
     wadah lonceng dibuat statis sehingga dropdown menempel ke topbar dan
     membentang selebar topbar dikurangi 12px tiap sisi. */
  .topbar .bell-container { position: static; }
  .topbar .notif-dropdown { left: 12px; right: 12px; width: auto; max-width: none; }
  .topbar .notif-header { flex-wrap: wrap; gap: 8px; }
  .topbar .btn-sm { padding: 6px 10px; font-size: 12px; }
  .stat-card { padding: 14px; }
  .card .btn { max-width: 100%; white-space: normal; text-align: center; }
}

/* === MENU PENGATURAN TOPBAR — 29 OKT 2026 (usul user) ===
   Satu tombol gerigi di kanan atas untuk HP maupun desktop; menunya berisi
   bahasa, info role, tema, dan keluar. Tombol gerigi posisinya paling kanan
   sehingga menu yang menempel ke kanannya tidak terpotong layar. === */
.topbar-settings { position: relative; display: inline-block; }
.topbar-settings-menu {
  display: none; position: absolute; top: calc(100% + 8px); right: 0;
  width: 280px; max-width: calc(100vw - 24px);
  background: var(--card-bg, #fff); border: 1px solid var(--border);
  border-radius: 12px; box-shadow: 0 12px 30px rgba(0, 0, 0, 0.12);
  z-index: 1000; padding: 12px; flex-direction: column; gap: 10px;
}
.topbar-settings-menu.show { display: flex; }
.topbar-settings-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 13px; font-weight: 600; color: var(--text-muted); }
.topbar-settings-row .form-control { width: auto; flex: 1; }
.topbar-settings-btn { width: 100%; }

/* === SIDEBAR HP JADI LACI — 28 OKT 2026 ===
   Sidebar 260px paten membuat konten HP 393px hanya tersisa ~99px, sehingga
   kartu/tabel/topbar apa pun pasti meluber dan terpotong. Di layar ≤720px
   sidebar disembunyikan ke laci geser: dibuka tombol ☰ di topbar, ditutup
   dengan ketuk backdrop atau pindah menu (setView menghapus class-nya).
   Desktop (>720px) tidak berubah sama sekali. === */
.sidebar-toggle { display: none; }
.sidebar-backdrop { display: none; }
@media (max-width: 720px) {
  .sidebar-toggle { display: inline-flex; }
  .app-layout .sidebar {
    position: fixed; left: 0; top: 0; bottom: 0; z-index: 100;
    transform: translateX(-105%);
    transition: transform .2s ease;
    box-shadow: 8px 0 24px rgba(0,0,0,.25);
    overflow-y: auto;
  }
  body.sidebar-open .app-layout .sidebar { transform: none; }
  .sidebar-backdrop {
    display: none; position: fixed; inset: 0; z-index: 90;
    background: rgba(15,23,42,.5);
  }
  body.sidebar-open .sidebar-backdrop { display: block; }
  .stat-card { flex-direction: column; align-items: flex-start; gap: 10px; }
  .stat-card > div { min-width: 0; }
  .card-header { flex-wrap: wrap; gap: 8px; }
  .card-header > * { min-width: 0; }
}