/* ==========================================================================
   Employee portal in the "Crisp and calm" look.
   Maps the portal's own classes (emp-*) onto design-system.css tokens.
   Load after employee-portal.css, the layout's inline styles and design-system.css.
   ========================================================================== */

:root {
  --emp-primary: var(--ds-accent);
  --emp-primary-dark: var(--ds-accent-hover);
  --emp-secondary: var(--ds-text-muted);
  --emp-success: var(--ds-success-dot);
  --emp-warning: var(--ds-warning-dot);
  --emp-danger: var(--ds-danger-dot);
  --emp-sidebar-bg: var(--ds-surface);
  --emp-body-bg: var(--ds-bg);
}

body:not(.auth) { background: var(--ds-bg); color: var(--ds-text); font-family: var(--ds-font); }

/* ---------- Sidebar ---------- */
.emp-sidebar {
  background: var(--ds-surface);
  color: var(--ds-text);
  border-right: 1px solid var(--ds-border);
  box-shadow: none;
  padding: 12px !important;
}

@media (min-width: 768px) {
  .emp-sidebar { position: sticky; top: 0; height: 100vh; overflow-y: auto; }
}

.emp-brand { padding: 4px 8px 12px; gap: 10px; margin-bottom: 4px !important; }

.emp-brand-mark {
  width: 28px;
  height: 28px;
  border-radius: 7px;
  background: var(--ds-accent);
  box-shadow: none;
  font-size: 13px;
}

.emp-brand-title { font-size: 15px; font-weight: 600; color: var(--ds-text); letter-spacing: -0.01em; }
.emp-brand-subtitle { font-size: 11px; color: var(--ds-text-faint); text-transform: none; letter-spacing: 0; }

.emp-profile {
  margin: 0 0 4px;
  padding: 10px;
  border-radius: var(--ds-radius);
  background: var(--ds-surface-2);
  border: 1px solid var(--ds-border-subtle);
}

.emp-profile-avatar {
  width: 32px;
  height: 32px;
  background: var(--ds-accent-soft);
  color: var(--ds-accent-text);
  font-size: 12px;
  font-weight: 600;
}

.emp-profile-name { font-size: 13px; font-weight: 600; color: var(--ds-text); }
.emp-profile-role,
.emp-profile-role-badge { font-size: 11px; color: var(--ds-text-faint); opacity: 1 !important; }

.emp-divider { background: var(--ds-border-subtle); margin: 8px 0; }

.emp-nav-section {
  font-size: 11px;
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0;
  color: var(--ds-text-faint);
  padding: 12px 10px 4px;
  margin: 0;
}

.emp-sidebar .nav-link,
.emp-nav-toggle {
  min-height: 34px;
  padding: 6px 10px;
  margin: 1px 0;
  border-radius: var(--ds-radius-sm);
  color: var(--ds-text-2);
  font-size: var(--ds-text-base);
  font-weight: 500;
  gap: 10px;
}

.emp-sidebar .nav-link i,
.emp-nav-toggle .emp-nav-left i { width: 16px; color: var(--ds-text-faint); font-size: 13px; }

.emp-sidebar .nav-link:hover,
.emp-nav-toggle:hover { background: var(--ds-surface-hover); color: var(--ds-text); }

.emp-nav-toggle[aria-expanded="true"] { background: transparent; color: var(--ds-text); }
.emp-nav-toggle i.fa-chevron-down { color: var(--ds-text-faint); }

.emp-sidebar .nav-link.active {
  background: var(--ds-accent-soft);
  color: var(--ds-accent-text);
  box-shadow: none;
  font-weight: 600;
}

.emp-sidebar .nav-link.active i { color: var(--ds-accent); }

.emp-nav-submenu { margin: 0 0 4px 17px; padding-left: 8px; border-left: 1px solid var(--ds-border); }
.emp-nav-submenu .nav-link { font-size: var(--ds-text-sm); padding: 5px 10px; min-height: 30px; }
.emp-nav-submenu .nav-link i { display: none; }

.emp-nav-submenu .nav-link.coming-soon { color: var(--ds-text-faint); }
.emp-nav-submenu .nav-link.coming-soon::after { background: var(--ds-neutral-soft); color: var(--ds-text-faint); font-weight: 600; }

.emp-sidebar .nav-link.text-danger { color: var(--ds-text-muted) !important; }
.emp-sidebar .nav-link.text-danger:hover { color: var(--ds-danger) !important; background: var(--ds-danger-soft); }

/* ---------- Main area ---------- */
.emp-main { background: var(--ds-bg); padding: 28px 32px !important; }

.emp-page-header { margin-bottom: 20px; }
.emp-page-title { font-size: var(--ds-text-xl); font-weight: 600; letter-spacing: -0.02em; color: var(--ds-text); }
.emp-page-title::before { display: none !important; }

/* Home greeting: a calm header instead of a gradient banner */
.emp-hero {
  background: transparent;
  color: var(--ds-text);
  box-shadow: none;
  border-radius: 0;
  padding: 0;
  margin-bottom: 20px;
}

.emp-hero::after { display: none; }
.emp-hero-greeting { font-size: var(--ds-text-xl); font-weight: 600; letter-spacing: -0.02em; margin-bottom: 2px; }
.emp-hero-sub { font-size: var(--ds-text-base); color: var(--ds-text-muted); opacity: 1; }
.emp-hero-sub .opacity-75 { opacity: 1 !important; color: var(--ds-text-faint); }

.emp-hero-date,
.emp-hero-stat {
  background: var(--ds-surface);
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius);
  color: var(--ds-text-2);
  font-size: var(--ds-text-sm);
  font-weight: 500;
  backdrop-filter: none;
}

.emp-hero-date i { color: var(--ds-text-faint); }

/* Quick actions */
.emp-quick-actions {
  background: transparent;
  border: 0;
  box-shadow: none;
  padding: 0;
  gap: 8px;
  margin-bottom: 20px;
}

.emp-quick-action {
  height: 36px;
  padding: 0 14px;
  border-radius: var(--ds-radius);
  background: var(--ds-surface);
  border: 1px solid var(--ds-border);
  box-shadow: var(--ds-shadow-sm);
  color: var(--ds-text);
  font-size: var(--ds-text-sm);
  font-weight: 500;
}

.emp-quick-action:hover { background: var(--ds-surface-hover); color: var(--ds-text); transform: none; box-shadow: var(--ds-shadow-sm); }
.emp-quick-action i { color: var(--ds-text-faint); font-size: 13px; }

.emp-quick-action-primary { background: var(--ds-accent); border-color: var(--ds-accent); color: var(--ds-on-accent); }
.emp-quick-action-primary i { color: var(--ds-on-accent); }
.emp-quick-action-primary:hover { background: var(--ds-accent-hover); color: var(--ds-on-accent); }

/* Cards and widgets */
.emp-card,
.emp-home-widget,
.emp-stat-card,
.emp-kpi-card,
.leave-balance-card,
.quick-action {
  background: var(--ds-surface);
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-lg);
  box-shadow: var(--ds-shadow-sm);
}

.emp-stat-card:hover,
.quick-action:hover { transform: none; box-shadow: var(--ds-shadow); }

.emp-card-header,
.emp-home-widget-header {
  background: transparent;
  border-bottom: 1px solid var(--ds-border-subtle);
  padding: 14px 16px;
}

.emp-card-title,
.emp-home-widget-header h3 { font-size: var(--ds-text-base); font-weight: 600; color: var(--ds-text); }

.emp-home-widget-header h3 i,
.emp-card-title i { color: var(--ds-text-faint) !important; }

.emp-home-view-all { font-size: var(--ds-text-sm); font-weight: 500; color: var(--ds-accent); text-decoration: none; }
.emp-home-view-all:hover { color: var(--ds-accent-hover); }

.emp-home-widget-body,
.emp-card-body { padding: 16px; }

.emp-stat-value,
.emp-kpi-value,
.emp-salary-days,
.emp-leave-total-value,
.leave-balance-value {
  color: var(--ds-text) !important;
  font-weight: 600;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  background: none !important;
  -webkit-text-fill-color: currentColor;
}

.emp-stat-label,
.emp-kpi-label,
.emp-salary-days-label,
.emp-leave-total-label,
.leave-balance-label { color: var(--ds-text-faint); }

.emp-stat-icon,
.emp-kpi-icon,
.quick-action-icon {
  background: var(--ds-accent-soft) !important;
  color: var(--ds-accent) !important;
  box-shadow: none !important;
}

.emp-widget-metric {
  background: var(--ds-surface-2);
  border: 1px solid var(--ds-border-subtle);
  border-radius: var(--ds-radius);
}

.emp-leave-row { background: transparent; border-bottom: 1px solid var(--ds-border-subtle); border-radius: 0; }
.emp-leave-row:last-child { border-bottom: 0; }

.emp-widget-empty,
.emp-doc-empty { color: var(--ds-text-faint); }

/* Status pills */
.emp-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: var(--ds-text-xs);
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0;
  border: 0;
}

.emp-badge-pending { background: var(--ds-warning-soft); color: var(--ds-warning); }
.emp-badge-approved { background: var(--ds-success-soft); color: var(--ds-success); }
.emp-badge-rejected { background: var(--ds-danger-soft); color: var(--ds-danger); }
.emp-badge-canceled { background: var(--ds-neutral-soft); color: var(--ds-text-muted); }

.emp-widget-status { border-radius: 999px; font-size: var(--ds-text-xs); font-weight: 500; letter-spacing: 0; text-transform: none; }

/* Buttons and forms */
.emp-btn-primary {
  background: var(--ds-accent);
  border: 1px solid var(--ds-accent);
  color: var(--ds-on-accent);
  border-radius: var(--ds-radius);
  box-shadow: none;
  font-weight: 500;
}

.emp-btn-primary:hover,
.emp-btn-primary:focus { background: var(--ds-accent-hover); border-color: var(--ds-accent-hover); color: var(--ds-on-accent); transform: none; box-shadow: none; }

.emp-btn-secondary {
  background: var(--ds-surface);
  border: 1px solid var(--ds-border);
  color: var(--ds-text);
  border-radius: var(--ds-radius);
  font-weight: 500;
}

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

.emp-form-label { font-size: var(--ds-text-sm); font-weight: 500; color: var(--ds-text-2); }

.emp-form-control {
  border: 1px solid var(--ds-border-strong);
  border-radius: var(--ds-radius);
  background: var(--ds-surface);
  color: var(--ds-text);
  box-shadow: var(--ds-shadow-sm);
}

.emp-form-control:focus { border-color: var(--ds-accent); box-shadow: 0 0 0 3px var(--ds-focus); }

/* Tables */
.emp-table thead th {
  background: var(--ds-surface-2);
  color: var(--ds-text-muted);
  font-size: var(--ds-text-xs);
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0;
  border-bottom: 1px solid var(--ds-border);
}

.emp-table tbody td { border-bottom: 1px solid var(--ds-border-subtle); color: var(--ds-text-2); }
.emp-table tbody tr:hover { background: var(--ds-surface-hover); }

.emp-alert { border-radius: var(--ds-radius); }
.emp-alert-success { background: var(--ds-success-soft); color: var(--ds-success); border-color: transparent; }
.emp-alert-danger { background: var(--ds-danger-soft); color: var(--ds-danger); border-color: transparent; }
.emp-alert-warning { background: var(--ds-warning-soft); color: var(--ds-warning); border-color: transparent; }

.emp-pagination .page-item.active .page-link { background: var(--ds-accent); border-color: var(--ds-accent); }

/* Phone top bar */
.emp-mobile-bar { background: var(--ds-surface); border-bottom-color: var(--ds-border); }
.emp-mobile-menu-btn { border-color: var(--ds-border); background: var(--ds-surface); color: var(--ds-text); }
.emp-mobile-title { color: var(--ds-text); font-weight: 600; }

@media (max-width: 767px) {
  .emp-main { padding: 16px !important; }
}

/* Some portal pages put the sidebar row straight in <body> without a container;
   cancel the row's negative margins so the page doesn't scroll sideways. */
body > .row { margin-left: 0; margin-right: 0; }

/* ---------- Clock in / out ---------- */
.emp-clock-panel {
  background: var(--ds-surface);
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-xl);
  box-shadow: var(--ds-shadow-sm);
  color: var(--ds-text);
  padding: 28px 24px;
}
.emp-clock-label { font-size: var(--ds-text-sm); color: var(--ds-text-muted); }
.emp-live-timer {
  font-size: 44px;
  font-weight: 600;
  letter-spacing: -0.02em;
  background: none;
  -webkit-text-fill-color: currentColor;
  color: var(--ds-text);
}
.emp-punch-ring {
  width: 72px;
  height: 72px;
  border: 2px solid var(--ds-border);
  background: var(--ds-surface-2);
  color: var(--ds-text-faint);
  margin-bottom: 12px;
}
.emp-punch-ring .fa-2x { font-size: 1.6em; }
.emp-punch-ring.working { border-color: var(--ds-success-dot); color: var(--ds-success); background: var(--ds-success-soft); }
.emp-geo-badge { background: var(--ds-success-soft); color: var(--ds-success); font-weight: 500; }
.emp-geo-badge.off { background: var(--ds-warning-soft); color: var(--ds-warning); }
.emp-method-tab { border-radius: var(--ds-radius) !important; font-weight: 500 !important; }
.emp-method-tab.active { background: var(--ds-accent) !important; border-color: var(--ds-accent) !important; color: #fff !important; }
.emp-today-tile .emp-card-body { display: flex; align-items: center; gap: 14px; }
.emp-today-icon { width: 40px; height: 40px; border-radius: 999px; display: grid; place-items: center; flex: none; background: var(--ds-surface-2); color: var(--ds-text-faint); }
.emp-today-icon #statusIcon { display: grid; place-items: center; }
.emp-today-label { font-size: var(--ds-text-xs); color: var(--ds-text-faint); }
.emp-today-value { font-size: var(--ds-text-lg); font-weight: 600; color: var(--ds-text); }
.min-w-0 { min-width: 0; }
@media (max-width: 767px) { .emp-live-timer { font-size: 36px; } }

/* Remaining portal accents, flattened to tokens */
.emp-birthday-avatar { background: var(--ds-accent-soft); color: var(--ds-accent-text); }
.emp-timeline::before { background: var(--ds-border); }
.emp-coming-soon-icon { background: var(--ds-accent-soft); color: var(--ds-accent); }
.emp-doc-vault-hero { background: var(--ds-surface); color: var(--ds-text); border: 1px solid var(--ds-border); box-shadow: var(--ds-shadow-sm); }
.emp-doc-vault-hero * { color: inherit; }
.emp-doc-vault-hero .text-white-50, .emp-doc-vault-hero p { color: var(--ds-text-muted) !important; }
.emp-doc-vault-icon { background: var(--ds-accent-soft) !important; color: var(--ds-accent) !important; }
.emp-doc-stat { background: var(--ds-surface-2) !important; border: 1px solid var(--ds-border-subtle) !important; color: var(--ds-text) !important; }
.emp-doc-expiry-banner { background: var(--ds-warning-soft); }
.team-reject-modal__header { background: var(--ds-danger-soft); }
.team-approve-modal__header { background: var(--ds-success-soft); }