* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: var(--font-family); font-size: var(--font-size-md); color: var(--color-neutral-9); background: var(--color-neutral-3); line-height: 1.5; }

/* ═══════════ APP LAYOUT (Sidebar + Main) ═══════════ */
.app-layout { display: flex; min-height: 100vh; }
.sidebar {
  width: 240px; min-width: 240px; background: var(--color-neutral-10); color: var(--color-neutral-2);
  display: flex; flex-direction: column; position: fixed; top: 0; left: 0; bottom: 0; z-index: 200;
  transition: transform 0.25s ease;
}
.sidebar-brand { display: flex; align-items: center; gap: var(--spacing-sm); padding: var(--spacing-lg) var(--spacing-xl); border-bottom: 1px solid rgba(255,255,255,0.08); }
.sidebar-logo { color: var(--color-primary); flex-shrink: 0; }
.sidebar-brand-text { font-size: var(--font-size-lg); font-weight: 700; letter-spacing: -0.3px; }
.sidebar-nav { flex: 1; padding: var(--spacing-md) 0; overflow-y: auto; }
.sidebar-link {
  display: flex; align-items: center; gap: var(--spacing-md); padding: var(--spacing-sm) var(--spacing-xl);
  color: var(--color-neutral-6); text-decoration: none; font-size: var(--font-size-md); font-weight: 500;
  margin: 2px var(--spacing-sm); border-radius: var(--radius-md); transition: all 0.15s; position: relative;
}
.sidebar-link:hover { background: rgba(255,255,255,0.06); color: var(--color-neutral-1); }
.sidebar-link.active { background: var(--color-primary); color: #fff; font-weight: 600; }
.sidebar-icon { flex-shrink: 0; opacity: 0.7; }
.sidebar-link.active .sidebar-icon { opacity: 1; }
.sidebar-footer { padding: var(--spacing-lg) var(--spacing-xl); border-top: 1px solid rgba(255,255,255,0.08); }
.sidebar-version { font-size: var(--font-size-xs); color: var(--color-neutral-7); text-align: center; }

.main-area { margin-left: 240px; flex: 1; display: flex; flex-direction: column; min-height: 100vh; min-width: 0; }
.topbar {
  background: var(--color-neutral-1); border-bottom: 1px solid var(--color-neutral-5); padding: 0 var(--spacing-xl);
  height: 56px; display: flex; align-items: center; justify-content: space-between; position: sticky; top: 0; z-index: 100;
  box-shadow: var(--shadow-sm);
}
.topbar-title { font-size: var(--font-size-lg); font-weight: 600; color: var(--color-neutral-9); }
.topbar-right { display: flex; align-items: center; gap: var(--spacing-md); }
.topbar-user { font-size: var(--font-size-sm); color: var(--color-neutral-7); font-weight: 500; }
.topbar-btn {
  padding: 5px 14px; border: 1px solid var(--color-neutral-5); background: var(--color-neutral-1); border-radius: var(--radius-md);
  font-size: var(--font-size-sm); cursor: pointer; color: var(--color-neutral-8); transition: all 0.15s; font-family: inherit;
}
.topbar-btn:hover { background: var(--color-neutral-3); }
.topbar-btn-logout { background: var(--color-error); color: #fff; border-color: var(--color-error); }
.topbar-btn-logout:hover { opacity: 0.9; }

.page-content { padding: var(--spacing-xl); flex: 1; /* max-width: 1100px; width: 100%; */ }

/* ═══════════ LOOKUP CARD ═══════════ */
.lookup-card {
  background: var(--color-neutral-1); border-radius: var(--radius-lg); padding: var(--spacing-lg); margin-bottom: var(--spacing-xl);
  box-shadow: var(--shadow-md); border: 1px solid var(--color-neutral-5);
}
.lookup-row { display: flex; gap: var(--spacing-md); align-items: flex-end; }
.lookup-field { flex: 1; }
.lookup-field label { display: block; font-size: var(--font-size-sm); font-weight: 600; margin-bottom: var(--spacing-xs); color: var(--color-neutral-8); }
.lookup-field input { width: 100%; padding: var(--spacing-sm) var(--spacing-md); border: 1px solid var(--color-neutral-6); border-radius: var(--radius-md); font-size: var(--font-size-md); outline: none; transition: border-color 0.15s; }
.lookup-field input:focus { border-color: var(--color-primary); box-shadow: 0 0 0 1px var(--color-primary); }
.lookup-field input.input-error { border-color: var(--color-error); }
.lookup-field input.input-valid { border-color: var(--color-success); }
.lookup-btn button {
  padding: var(--spacing-sm) var(--spacing-xl); background: var(--color-primary); color: var(--color-neutral-1); border: none; border-radius: var(--radius-md);
  font-size: var(--font-size-md); font-weight: 600; cursor: pointer; white-space: nowrap; transition: background 0.15s;
}
.lookup-btn button:hover { background: var(--color-primary-hover); }
.lookup-btn button:active { background: var(--color-primary-active); }

.emp-status { font-size: var(--font-size-sm); margin-top: var(--spacing-sm); min-height: 20px; }
.emp-status.show { padding: var(--spacing-sm) var(--spacing-md); border-radius: var(--radius-md); }
.emp-status.success { background: var(--color-success-bg); color: var(--color-success); }
.emp-status.error { background: var(--color-error-bg); color: var(--color-error); }
.emp-status.loading { background: var(--color-info-bg); color: var(--color-primary); }
.emp-detail-row { display: none; grid-template-columns: repeat(3, 1fr); gap: var(--spacing-md); margin-top: var(--spacing-lg); padding-top: var(--spacing-lg); border-top: 1px solid var(--color-neutral-4); }
.emp-detail-row + .emp-detail-row { margin-top: 0; }
.emp-detail-row.show { display: grid; }
.form-card .emp-detail-row.show { background: var(--color-neutral-2); border-radius: var(--radius-md); padding: var(--spacing-md); margin-bottom: var(--spacing-lg); border-top: none; border: 1px solid var(--color-neutral-4); }
.form-card .emp-status { margin-bottom: var(--spacing-sm); }
.emp-detail-item { padding: var(--spacing-sm); }
.emp-detail-label { font-size: var(--font-size-xs); color: var(--color-neutral-7); text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: var(--spacing-xs); }
.emp-detail-value { font-size: var(--font-size-md); font-weight: 600; color: var(--color-neutral-9); }
.leave-balance .emp-detail-value { color: var(--color-primary); }

/* ═══════════ FORM CARD ═══════════ */
.form-card { background: var(--color-neutral-1); border-radius: var(--radius-lg); padding: var(--spacing-xl); box-shadow: var(--shadow-md); border: 1px solid var(--color-neutral-5); }
.section-title { font-size: var(--font-size-xl); font-weight: 600; color: var(--color-neutral-10); margin-bottom: var(--spacing-xs); }
.section-subtitle { font-size: var(--font-size-sm); color: var(--color-neutral-7); margin-bottom: var(--spacing-xl); }
.section-label { font-size: var(--font-size-sm); font-weight: 600; color: var(--color-neutral-8); margin-bottom: var(--spacing-md); text-transform: uppercase; letter-spacing: 0.5px; }

.form-row { display: flex; gap: var(--spacing-lg); margin-bottom: var(--spacing-lg); }
.form-group { flex: 1; }
.form-group.third { flex: 1 1 0; min-width: 0; }
.form-group.full { flex: 0 0 100%; }
.form-group label { display: block; font-size: var(--font-size-sm); font-weight: 600; margin-bottom: var(--spacing-xs); color: var(--color-neutral-8); }
.form-group input, .form-group select, .form-group textarea {
  width: 100%; padding: var(--spacing-sm) var(--spacing-md); border: 1px solid var(--color-neutral-6); border-radius: var(--radius-md);
  font-size: var(--font-size-md); font-family: inherit; outline: none; transition: border-color 0.15s; background: var(--color-neutral-1);
}
.form-group input:focus, .form-group select:focus, .form-group textarea:focus { border-color: var(--color-primary); box-shadow: 0 0 0 1px var(--color-primary); }
.form-group input:read-only, .form-group input[readonly] { background: var(--color-neutral-3); color: var(--color-neutral-8); cursor: default; }
.form-group textarea { resize: vertical; min-height: 60px; }
.required-star { color: var(--color-error); }
.field-hint { display: block; font-size: var(--font-size-xs); color: var(--color-neutral-7); margin-top: var(--spacing-xs); }
.char-count { display: block; font-size: var(--font-size-xs); color: var(--color-neutral-7); text-align: right; margin-top: var(--spacing-xs); }

.alert { display: none; padding: var(--spacing-md) var(--spacing-lg); border-radius: var(--radius-md); margin-bottom: var(--spacing-lg); font-size: var(--font-size-sm); line-height: 1.6; }
.alert.show { display: block; }
.alert-success { background: var(--color-success-bg); color: var(--color-success); border: 1px solid var(--color-success); }
.alert-error { background: var(--color-error-bg); color: var(--color-error); border: 1px solid var(--color-error); }
.alert-info { background: var(--color-info-bg); color: var(--color-primary); border: 1px solid var(--color-primary); }

.section-divider { border: none; border-top: 1px solid var(--color-neutral-4); margin: var(--spacing-xl) 0; }
.conditional-section { display: none; }
.conditional-section.visible { display: block; }

.day-counter { font-size: var(--font-size-xxl); font-weight: 700; color: var(--color-primary); padding: var(--spacing-sm) 0; }

.btn-row { display: flex; gap: var(--spacing-md); justify-content: flex-end; margin-top: var(--spacing-xl); }
.form-actions { display: flex; gap: var(--spacing-md); justify-content: flex-end; margin-top: var(--spacing-xl); }
.form-label { display: block; font-size: var(--font-size-sm); font-weight: 600; margin-bottom: var(--spacing-xs); color: var(--color-neutral-8); }
.form-input { width: 100%; padding: var(--spacing-sm) var(--spacing-md); border: 1px solid var(--color-neutral-6); border-radius: var(--radius-md); font-size: var(--font-size-md); font-family: inherit; outline: none; transition: border-color 0.15s; background: var(--color-neutral-1); }
.form-input:focus { border-color: var(--color-primary); box-shadow: 0 0 0 1px var(--color-primary); }
.form-input[readonly] { background: var(--color-neutral-3); color: var(--color-neutral-8); cursor: default; }
.btn { padding: var(--spacing-sm) var(--spacing-xl); border: none; border-radius: var(--radius-md); font-size: var(--font-size-md); font-weight: 600; cursor: pointer; transition: all 0.15s; }
.btn-primary { background: var(--color-primary); color: var(--color-neutral-1); }
.btn-primary:hover { background: var(--color-primary-hover); }
.btn-primary:disabled { opacity: 0.5; cursor: not-allowed; }
.btn-secondary { background: var(--color-neutral-4); color: var(--color-neutral-9); }
.btn-secondary:hover { background: var(--color-neutral-5); }
.btn-danger { background: var(--color-error); color: #fff; border: none; }
.btn-danger:hover { opacity: 0.9; }

.backup-block {
  background: var(--color-neutral-2);
  border: 1px solid var(--color-neutral-5);
  border-radius: var(--radius-md);
  padding: var(--spacing-md);
  margin-bottom: var(--spacing-md);
}
.backup-block-title {
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--color-neutral-8);
  margin-bottom: var(--spacing-sm);
  padding-bottom: var(--spacing-xs);
  border-bottom: 1px solid var(--color-neutral-4);
}
.backup-row { display: flex; gap: var(--spacing-md); align-items: flex-end; }
.backup-field { flex: 1; min-width: 0; }
.remove-backup-btn { background: none; border: none; color: var(--color-error); font-size: var(--font-size-xl); cursor: pointer; padding: var(--spacing-sm); line-height: 1; }
.add-backup-link { background: none; border: none; color: var(--color-primary); font-size: var(--font-size-sm); font-weight: 600; cursor: pointer; padding: 0; margin-top: var(--spacing-sm); }
.add-backup-link:hover { text-decoration: underline; }
.add-backup-link.hidden { display: none; }

.holiday-info { background: var(--color-warning-bg); border: 1px solid #ffd966; border-radius: var(--radius-md); padding: var(--spacing-md); margin-top: var(--spacing-sm); }
.holiday-count { font-weight: 600; font-size: var(--font-size-sm); color: var(--color-warning); }
.holiday-info ul { margin: var(--spacing-xs) 0 0 var(--spacing-lg); font-size: var(--font-size-sm); color: var(--color-neutral-8); }
.holiday-info li { margin-bottom: var(--spacing-xs); }

/* ═══════════ DASHBOARD STYLES ═══════════ */
.dashboard-welcome { margin-bottom: var(--spacing-xl); }
.dashboard-welcome h2 { font-size: 24px; font-weight: 700; color: var(--color-neutral-10); margin-bottom: var(--spacing-xs); }
.dashboard-welcome p  { font-size: var(--font-size-md); color: var(--color-neutral-7); }

.stats-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--spacing-lg); margin-bottom: var(--spacing-xl); }
.stat-card {
  background: var(--color-neutral-1); border-radius: var(--radius-lg); padding: var(--spacing-xl);
  box-shadow: var(--shadow-sm); border: 1px solid var(--color-neutral-5); display: flex; align-items: center; gap: var(--spacing-lg);
}
.stat-icon {
  width: 48px; height: 48px; border-radius: var(--radius-md); display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.stat-icon.blue   { background: #deecf9; color: var(--color-primary); }
.stat-icon.green  { background: var(--color-success-bg); color: var(--color-success); }
.stat-icon.amber  { background: var(--color-warning-bg); color: var(--color-warning); }
.stat-body { flex: 1; min-width: 0; }
.stat-value { font-size: var(--font-size-xxl); font-weight: 700; color: var(--color-neutral-10); line-height: 1.2; }
.stat-label { font-size: var(--font-size-sm); color: var(--color-neutral-7); margin-top: var(--spacing-xs); }

.quick-actions { margin-bottom: var(--spacing-xl); }
.quick-actions h3 { font-size: var(--font-size-lg); font-weight: 600; color: var(--color-neutral-9); margin-bottom: var(--spacing-lg); }
.actions-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--spacing-md); }
.action-card {
  background: var(--color-neutral-1); border-radius: var(--radius-lg); padding: var(--spacing-xl); text-align: center;
  box-shadow: var(--shadow-sm); border: 1px solid var(--color-neutral-5); cursor: pointer; transition: all 0.15s;
  text-decoration: none; color: inherit; display: block;
}
.action-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); border-color: var(--color-primary); }
.action-card-icon {
  width: 40px; height: 40px; border-radius: var(--radius-md); background: var(--color-info-bg); color: var(--color-primary);
  display: flex; align-items: center; justify-content: center; margin: 0 auto var(--spacing-md);
}
.action-card-label { font-size: var(--font-size-md); font-weight: 600; color: var(--color-neutral-9); }

.recent-section { margin-bottom: var(--spacing-xl); }
.recent-section h3 { font-size: var(--font-size-lg); font-weight: 600; color: var(--color-neutral-9); margin-bottom: var(--spacing-md); }
.recent-card { background: var(--color-neutral-1); border-radius: var(--radius-lg); padding: var(--spacing-lg); box-shadow: var(--shadow-sm); border: 1px solid var(--color-neutral-5); }

/* ═══════════ EMPLOYEE DETAILS ═══════════ */
.emp-details-section { margin-bottom: var(--spacing-xl); }
.emp-details-section h3 { font-size: var(--font-size-lg); font-weight: 600; color: var(--color-neutral-9); margin-bottom: var(--spacing-md); }
.details-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: var(--spacing-md); }
.detail-tile {
  background: var(--color-neutral-1); border-radius: var(--radius-md); padding: var(--spacing-lg);
  border: 1px solid var(--color-neutral-5); box-shadow: var(--shadow-sm);
}
.detail-tile-label { font-size: var(--font-size-xs); color: var(--color-neutral-7); text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: var(--spacing-xs); }
.detail-tile-value { font-size: var(--font-size-md); font-weight: 600; color: var(--color-neutral-9); }
.expiry-tag { display: inline-block; font-size: var(--font-size-xs); padding: 1px 6px; border-radius: var(--radius-sm); margin-left: var(--spacing-xs); font-weight: 600; vertical-align: middle; }
.expiry-tag.expired { background: var(--color-error-bg); color: var(--color-error); }
.expiry-tag.soon   { background: var(--color-warning-bg); color: var(--color-warning); }
.expiry-tag.ok     { background: var(--color-success-bg); color: var(--color-success); }

/* ═══════════ LOGIN PAGE ═══════════ */
.login-page { display: flex; align-items: center; justify-content: center; min-height: 100vh; background: linear-gradient(135deg, #e8edf2 0%, #d0dce8 100%); }
.login-wrapper { display: flex; width: 800px; max-width: 94vw; min-height: 480px; background: #fff; border-radius: 12px; box-shadow: 0 8px 40px rgba(0,0,0,0.12); overflow: hidden; }
.login-banner { flex: 1; background: var(--color-primary); padding: 48px 40px; display: flex; flex-direction: column; justify-content: space-between; }
.login-banner h2 { font-size: 26px; font-weight: 700; color: #fff; margin-bottom: 8px; line-height: 1.3; }
.login-banner p { font-size: 14px; color: rgba(255,255,255,0.85); line-height: 1.7; max-width: 280px; }
.login-banner-copy { font-size: 12px; color: rgba(255,255,255,0.5); }
.login-form-area { flex: 1; padding: 48px 40px; display: flex; flex-direction: column; justify-content: center; }
.login-form-area h3 { font-size: 22px; font-weight: 700; color: #1a1a1a; margin-bottom: 6px; }
.login-form-area .login-sub { font-size: 13px; color: #666; margin-bottom: 32px; }
.login-form-area label { display: block; font-size: 11px; font-weight: 700; letter-spacing: 0.8px; color: #555; margin-bottom: 6px; text-transform: uppercase; }
.login-form-area input {
  width: 100%; padding: 11px 14px; border: 1px solid #ddd; border-radius: 6px; font-size: 14px; font-family: inherit;
  outline: none; box-sizing: border-box; transition: border-color 0.15s; margin-bottom: 16px;
}
.login-form-area input:focus { border-color: var(--color-primary); }
.login-btn {
  width: 100%; padding: 12px 24px; background: var(--color-primary); color: #fff; border: none; border-radius: 6px;
  font-size: 15px; font-weight: 600; cursor: pointer; transition: opacity 0.15s; font-family: inherit;
}
.login-btn:hover { background: var(--color-primary-hover); }
.login-btn:disabled { opacity: 0.5; cursor: not-allowed; }

/* ═══════════ TOAST / SPINNER / BADGES ═══════════ */
.toast-container { position: fixed; top: var(--spacing-lg); right: var(--spacing-lg); z-index: 999; display: flex; flex-direction: column; gap: var(--spacing-sm); }
.toast { padding: var(--spacing-md) var(--spacing-lg); border-radius: var(--radius-md); font-size: var(--font-size-sm); font-weight: 500; box-shadow: var(--shadow-lg); animation: slideIn 0.25s ease; max-width: 360px; }
.toast-success { background: var(--color-success); color: var(--color-neutral-1); }
.toast-error { background: var(--color-error); color: var(--color-neutral-1); }
.toast-info { background: var(--color-primary); color: var(--color-neutral-1); }
.toast-warning { background: var(--color-warning); color: var(--color-neutral-1); }

.spinner { display: inline-block; width: 14px; height: 14px; border: 2px solid rgba(255,255,255,0.3); border-top-color: #fff; border-radius: 50%; animation: spin 0.6s linear infinite; vertical-align: middle; }
.spinner.show { display: inline-block; }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes slideIn { from { transform: translateX(100%); opacity: 0; } to { transform: translateX(0); opacity: 1; } }

.footer { text-align: center; padding: var(--spacing-xl); color: var(--color-neutral-7); font-size: var(--font-size-sm); margin-top: var(--spacing-xxl); }

.approval-badge { display: inline-block; padding: var(--spacing-xs) var(--spacing-md); border-radius: var(--radius-md); font-size: var(--font-size-sm); font-weight: 600; }
.approval-badge-lg { font-size: var(--font-size-lg); padding: var(--spacing-sm) var(--spacing-lg); }
.badge-approved { background: var(--color-success-bg); color: var(--color-success); border: 1px solid var(--color-success); }
.badge-rejected { background: var(--color-error-bg); color: var(--color-error); border: 1px solid var(--color-error); }
.badge-pending { background: var(--color-warning-bg); color: #8a6d00; border: 1px solid #ffd966; }

.status-empty { display: none; text-align: center; padding: var(--spacing-xl); color: var(--color-neutral-7); font-size: var(--font-size-md); }
.status-empty p { margin: 0; }

.table-scroll { overflow-x: auto; margin-top: var(--spacing-lg); }
.request-table { width: 100%; border-collapse: collapse; font-size: var(--font-size-sm); }
.request-table thead { background: var(--color-neutral-3); }
.request-table th { padding: var(--spacing-sm) var(--spacing-md); text-align: left; font-weight: 600; color: var(--color-neutral-8); border-bottom: 2px solid var(--color-neutral-5); white-space: nowrap; }
.request-table td { padding: var(--spacing-sm) var(--spacing-md); border-bottom: 1px solid var(--color-neutral-4); color: var(--color-neutral-9); }
.request-table tbody tr:hover { background: var(--color-neutral-2); }
.request-table .td-request-no { font-family: monospace; font-size: var(--font-size-sm); color: var(--color-primary); font-weight: 600; white-space: nowrap; }

.dash-table .request-table { margin-top: 0; }
.dash-table .request-table tbody tr:last-child td { border-bottom: none; }

/* ═══════════ REQUEST TAB SWITCHER ═══════════ */
.req-tab-switcher { display: flex; gap: var(--spacing-xs); margin-bottom: var(--spacing-xl); background: var(--color-neutral-4); padding: 4px; border-radius: var(--radius-md); width: fit-content; }
.req-tab-btn {
  padding: var(--spacing-sm) var(--spacing-xl); border: none; border-radius: var(--radius-md);
  font-size: var(--font-size-md); font-weight: 600; cursor: pointer; background: transparent; color: var(--color-neutral-7);
  transition: all 0.15s; font-family: inherit;
}
.req-tab-btn:hover { color: var(--color-neutral-9); }
.req-tab-btn.active { background: var(--color-neutral-1); color: var(--color-neutral-9); box-shadow: var(--shadow-sm); }
.req-section { display: block; }

/* ═══════════ SEARCHABLE DROPDOWN (Team Members) ═══════════ */
.searchable-dropdown { position: relative; width: 100%; }
.team-member-search-input {
  width: 100%; padding: var(--spacing-sm) var(--spacing-md); border: 1px solid var(--color-neutral-6);
  border-radius: var(--radius-md); font-size: var(--font-size-md); font-family: inherit; outline: none;
  transition: border-color 0.15s; background: var(--color-neutral-1); cursor: pointer;
}
.team-member-search-input:focus { border-color: var(--color-primary); box-shadow: 0 0 0 1px var(--color-primary); }
.team-member-search-input::placeholder { color: var(--color-neutral-7); font-style: italic; }
.team-member-dropdown-list {
  display: none; position: absolute; top: 100%; left: 0; right: 0; z-index: 300;
  background: var(--color-neutral-1); border: 1px solid var(--color-neutral-5);
  border-radius: var(--radius-md); box-shadow: var(--shadow-lg); max-height: 220px; overflow-y: auto;
  margin-top: 2px;
}
.team-member-dropdown-list.open { display: block; }
.team-member-item {
  padding: var(--spacing-sm) var(--spacing-md); font-size: var(--font-size-sm); color: var(--color-neutral-9);
  cursor: pointer; transition: background 0.1s;
}
.team-member-item:hover, .team-member-item.highlighted { background: var(--color-info-bg); color: var(--color-primary); }
.team-member-item.selected { background: var(--color-primary); color: var(--color-neutral-1); }
.team-member-item.no-results {
  padding: var(--spacing-md); text-align: center; color: var(--color-neutral-7); cursor: default;
  font-style: italic;
}
.team-member-item.no-results:hover { background: transparent; color: var(--color-neutral-7); }

/* ═══════════ DELEGATION PAGE ═══════════ */
.delegation-banner {
  border-radius: var(--radius-md); padding: var(--spacing-lg); margin-bottom: var(--spacing-lg);
  font-size: var(--font-size-sm);
}
.delegation-banner.active {
  background: var(--color-success-bg); color: var(--color-success); border: 1px solid var(--color-success);
}
.delegation-banner.expired {
  background: var(--color-warning-bg); color: #8a6d00; border: 1px solid #ffd966;
}
.delegation-banner.inactive {
  background: var(--color-neutral-3); color: var(--color-neutral-7); border: 1px solid var(--color-neutral-5);
}
.delegation-banner-content { line-height: 1.6; }
.delegation-status-row {
  display: flex; gap: var(--spacing-xl); flex-wrap: wrap;
  padding: var(--spacing-lg); background: var(--color-neutral-3); border-radius: var(--radius-md);
  margin-bottom: var(--spacing-lg);
}
.delegation-status-info { min-width: 120px; }
.delegation-status-label { font-size: var(--font-size-xs); color: var(--color-neutral-7); text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 4px; }
.delegation-status-value { font-size: var(--font-size-md); font-weight: 500; color: var(--color-neutral-9); }
.delegation-actions { display: flex; gap: var(--spacing-md); flex-wrap: wrap; }
.lookup-hint { font-size: var(--font-size-xs); margin-top: 4px; color: var(--color-neutral-7); }
.lookup-hint.success { color: var(--color-success); }
.lookup-hint.error { color: var(--color-error); }
.lookup-hint.loading { color: var(--color-primary); }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--spacing-lg); }
@media (max-width: 640px) { .form-grid { grid-template-columns: 1fr; } }

/* ═══════════ RESPONSIVE ═══════════ */
@media (max-width: 900px) {
  .sidebar { transform: translateX(-100%); }
  .sidebar.mobile-open { transform: translateX(0); }
  .main-area { margin-left: 0; }
  .page-content { padding: var(--spacing-lg); }
  .stats-grid { grid-template-columns: 1fr; }
  .actions-grid { grid-template-columns: repeat(2, 1fr); }
  .topbar { padding: 0 var(--spacing-lg); }
  .topbar-user { display: none; }
}

@media (max-width: 640px) {
  .form-row { flex-direction: column; gap: var(--spacing-md); }
  .emp-detail-row { grid-template-columns: 1fr; }
  .lookup-row { flex-direction: column; }
  .backup-row { flex-direction: column; gap: var(--spacing-sm); }
  .backup-field { width: 100%; }
  .actions-grid { grid-template-columns: 1fr; }
  .login-wrapper { flex-direction: column; min-height: auto; }
  .login-banner { padding: 32px 24px; }
  .login-form-area { padding: 32px 24px; }
  .topbar-title { font-size: var(--font-size-md); }
}