/* ═══════════════════════════════════════════════════════════
   HR SYSTEM — CONSOLIDATED CSS (merged from v10-v109 patches)
   v110 · Do not edit individual patch files
═══════════════════════════════════════════════════════════ */


/* ── from v10-private-deploy-theme.css ─────────────────────────────────── */
/* ── 1. Root Variables ── */
:root {
  /* Core palette */
  --v10-bg: #050A1A;
  --v10-panel: #0B1628;
  --v10-panel-2: #0F1F37;
  --v10-line: rgba(0, 194, 255, .18);
  --v10-line-str: rgba(0, 194, 255, .36);
  /* Brand colors */
  --v10-cyan: #00C2FF;
  --v10-blue: #1A6EFF;
  --v10-purple: #8B5CF6;
  --v10-red: #FF3B6B;
  --v10-amber: #FF8C00;
  --v10-green: #00D68F;
  --v10-yellow: #FACC15;
  /* Text */
  --v10-text: #E8F0FF;
  --v10-muted: #7A94C1;
  --v10-soft: #9CB3D9;
  /* Surfaces */
  --v10-card-bg: linear-gradient(180deg, rgba(11, 22, 40, .96), rgba(8, 18, 34, .94));
  --v10-card-glow: 0 0 28px rgba(0, 80, 200, .14);
  --v10-shadow: 0 0 28px rgba(0, 0, 0, .32);
  /* Geometry */
  --v10-radius: 16px;
  --v10-radius-sm: 10px;
  --v10-radius-xl: 24px;
  /* Typography */
  --v10-font: "Cairo", "Tajawal", "IBM Plex Sans Arabic", system-ui, sans-serif;

  /* ── Map to global vars so all components inherit ── */
  --bg: var(--v10-bg);
  --bg-deep: #030812;
  --bg-2: var(--v10-panel);
  --surface: var(--v10-panel);
  --panel: var(--v10-panel);
  --panel-strong: var(--v10-panel-2);
  --border: var(--v10-line);
  --border-strong: var(--v10-line-str);
  --text: var(--v10-text);
  --text-strong: #ffffff;
  --muted: var(--v10-muted);
  --muted-2: rgba(122, 148, 193, .68);
  --brand: var(--v10-cyan);
  --brand-2: #22DAFF;
  --primary: var(--v10-blue);
  --accent: var(--v10-cyan);
  --success: var(--v10-green);
  --danger: var(--v10-red);
  --warning: var(--v10-amber);
  --info: var(--v10-cyan);
}

/* ── 2. Base Reset ── */
html {
  background: var(--v10-bg) !important;
  color-scheme: dark;
}

body,
body.employee-portal,
.app,
.admin-app,
.employee-app,
.executive-portal-app,
.gate-page {
  direction: rtl !important;
  font-family: var(--v10-font) !important;
  background:
    radial-gradient(circle at 18% 0%, rgba(0, 194, 255, .10), transparent 30%),
    radial-gradient(circle at 78% 18%, rgba(26, 110, 255, .12), transparent 28%),
    var(--v10-bg) !important;
  color: var(--v10-text) !important;
  letter-spacing: 0 !important;
}

/* Subtle grid pattern */
body::before,
.app::before,
.employee-app::before,
.admin-app::before,
.executive-portal-app::before {
  opacity: .16 !important;
}

/* ── 3. Navigation bars & sidebar ── */
.topbar,
.admin-topbar,
.employee-topbar,
.executive-topbar,
.employee-bottom-nav,
.sidebar,
.mobile-nav,
.toolbar-shell {
  background: rgba(5, 10, 26, .93) !important;
  border-color: var(--v10-line) !important;
  box-shadow: 0 8px 28px rgba(0, 0, 0, .26) !important;
  backdrop-filter: blur(10px) !important;
}

.employee-bottom-nav {
  border-top: 1px solid var(--v10-line) !important;
  padding: 8px max(8px, env(safe-area-inset-left)) calc(8px + env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-right)) !important;
  gap: 6px !important;
}

.employee-bottom-nav button {
  min-width: 0 !important;
  height: 64px !important;
  border-radius: 16px !important;
  padding: 6px 4px !important;
  background: rgba(11, 24, 48, .72) !important;
  color: var(--v10-muted) !important;
  box-shadow: none !important;
  transition: background .18s, color .18s, box-shadow .18s !important;
}

.employee-bottom-nav button strong {
  font-size: 20px !important;
  line-height: 1 !important;
}

.employee-bottom-nav button span {
  font-size: 11px !important;
  line-height: 1.2 !important;
  white-space: normal !important;
  max-width: 100%;
  display: -webkit-box !important;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.employee-bottom-nav button.is-active {
  background: linear-gradient(135deg, var(--v10-cyan), var(--v10-blue)) !important;
  color: #031022 !important;
  transform: none !important;
  box-shadow: 0 8px 22px rgba(0, 80, 200, .26) !important;
}

/* ── 4. Page Titles ── */
.topbar h1,
.page-title h1,
.employee-page-head h1,
.login-panel h1,
.executive-shell h1,
.gate h1 {
  color: var(--v10-text) !important;
  font-size: clamp(28px, 4.2vw, 44px) !important;
  font-weight: 800 !important;
  line-height: 1.18 !important;
  letter-spacing: 0 !important;
  background: linear-gradient(90deg, var(--v10-cyan), var(--v10-blue)) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}

.panel-head h2,
.panel>h2,
.card-title,
.employee-card h2,
.employee-card h3,
.section-title,
.profile-card h2,
.chart-title {
  color: var(--v10-text) !important;
  font-size: 18px !important;
  font-weight: 700 !important;
  letter-spacing: 0 !important;
}

.topbar p,
.panel-head p,
.panel-head span,
.card-subtitle,
.employee-card p,
.employee-page-head p,
.muted,
small,
label,
.form-hint,
.helper-text {
  color: var(--v10-muted) !important;
}

/* ── 5. Cards & Panels ── */
.panel,
.card,
.stat-card,
.metric-card,
.dashboard-card,
.section-card,
.info-card,
.employee-card,
.admin-card,
.executive-card,
.review-card,
.risk-card,
.kpi-card,
.quick-action,
.quick-action-card,
.action-card,
.table-card,
.widget-card,
.profile-card,
.person-card,
.status-location-card,
.address-card,
.login-panel,
.gate,
.employee-more-sheet,
.latest-punches-panel,
.attendance-reminder-card,
.identity-policy-panel,
.identity-selfie-panel,
.complex-settings-page .compact-address-card,
.diagnostics-page .accent-panel {
  background: var(--v10-card-bg) !important;
  border: 1px solid var(--v10-line) !important;
  border-radius: var(--v10-radius) !important;
  box-shadow: var(--v10-card-glow) !important;
  color: var(--v10-text) !important;
  backdrop-filter: blur(8px) !important;
}

.panel,
.card,
.employee-card,
.metric-card,
.stat-card,
.quick-action-card,
.action-card,
.person-card {
  padding: clamp(16px, 2vw, 24px) !important;
}

/* Card hover lift */
.panel:hover,
.card:hover,
.employee-card:hover,
.metric-card:hover,
.stat-card:hover,
.quick-action-card:hover,
.action-card:hover,
.person-card:hover,
.employee-bottom-nav button:hover:not(.is-active) {
  transform: translateY(-2px) !important;
  box-shadow: 0 0 36px rgba(0, 100, 255, .22) !important;
  border-color: rgba(0, 194, 255, .40) !important;
}

/* ── 6. Metric / Stat Cards ── */
.dashboard-grid,
.cards-grid,
.metrics-grid,
.quick-actions-grid,
.employee-stats-grid,
.features-grid {
  gap: 16px !important;
}

.metric-card,
.stat-card,
.employee-stat,
.compact-metric-badge,
.kpi-card {
  position: relative !important;
  overflow: hidden !important;
  min-height: 114px !important;
  text-align: center !important;
}

/* Top accent bar */
.metric-card::before,
.stat-card::before,
.employee-stat::before,
.compact-metric-badge::before,
.kpi-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: linear-gradient(90deg, var(--v10-cyan), var(--v10-blue), var(--v10-red));
  opacity: .9;
}

/* Decorative corner icon glow */
.metric-card::after,
.stat-card::after,
.employee-stat::after,
.compact-metric-badge::after {
  content: "";
  position: absolute;
  inset: 12px auto auto 12px;
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: linear-gradient(135deg, var(--v10-cyan), var(--v10-blue));
  opacity: .22;
  pointer-events: none;
}

.metric-card:nth-child(4n+2)::after,
.stat-card:nth-child(4n+2)::after {
  background: linear-gradient(135deg, var(--v10-green), var(--v10-cyan));
}

.metric-card:nth-child(4n+3)::after,
.stat-card:nth-child(4n+3)::after {
  background: linear-gradient(135deg, var(--v10-amber), var(--v10-blue));
}

.metric-card:nth-child(4n+4)::after,
.stat-card:nth-child(4n+4)::after {
  background: linear-gradient(135deg, var(--v10-red), var(--v10-amber));
}

/* Metric numbers */
.metric-card strong,
.stat-card strong,
.employee-stat strong,
.compact-metric-badge strong,
.kpi-card strong,
.stat-number,
.metric-value {
  display: block !important;
  color: var(--v10-text) !important;
  font-size: clamp(28px, 2.8vw, 38px) !important;
  font-weight: 700 !important;
  line-height: 1.1 !important;
  animation: v10-count-in .4s ease both;
}

.metric-card span,
.stat-card span,
.employee-stat span,
.compact-metric-badge span,
.kpi-card span,
.metric-label,
.stat-label {
  color: var(--v10-muted) !important;
  font-size: 13px !important;
  font-weight: 400 !important;
}

/* ── 7. Buttons ── */
button,
.button,
.submit,
.icon-button,
.nav-button,
.employee-bottom-nav button,
.quick-action,
.action-card {
  border-radius: 8px !important;
  font-family: var(--v10-font) !important;
  letter-spacing: 0 !important;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, background .18s ease !important;
}

.button.primary,
.submit,
button.submit,
.primary-action,
.employee-bottom-nav button.is-active {
  background: linear-gradient(135deg, var(--v10-cyan), var(--v10-blue)) !important;
  color: #031022 !important;
  border-color: rgba(0, 194, 255, .55) !important;
  box-shadow: 0 0 22px rgba(26, 110, 255, .28) !important;
  font-weight: 800 !important;
}

.button.primary:hover:not([disabled]),
.submit:hover:not([disabled]) {
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 28px rgba(0, 100, 255, .38) !important;
}

.button.ghost,
.button.secondary,
.employee-actions-row .button.ghost,
.toolbar .button {
  background: rgba(11, 22, 40, .88) !important;
  border: 1px solid var(--v10-line) !important;
  color: var(--v10-text) !important;
}

.button.ghost:hover,
.employee-actions-row .button.ghost:hover {
  border-color: rgba(0, 194, 255, .42) !important;
  background: rgba(14, 30, 58, .92) !important;
}

.button.danger {
  background: rgba(255, 59, 107, .14) !important;
  border-color: rgba(255, 59, 107, .44) !important;
  color: #ffd0dc !important;
}

.button.danger:hover {
  background: rgba(255, 59, 107, .24) !important;
  box-shadow: 0 4px 16px rgba(255, 59, 107, .24) !important;
}

/* ── 8. Forms & Inputs ── */
input,
select,
textarea,
.input,
.select,
.search-input {
  background: rgba(5, 10, 26, .72) !important;
  border: 1px solid var(--v10-line) !important;
  border-radius: 8px !important;
  color: var(--v10-text) !important;
  caret-color: var(--v10-cyan) !important;
  box-shadow: inset 0 1px 0 rgba(0, 0, 0, .18) !important;
}

input:focus,
select:focus,
textarea:focus,
.input:focus,
.select:focus {
  outline: none !important;
  border-color: var(--v10-cyan) !important;
  box-shadow: 0 0 0 4px rgba(0, 194, 255, .14), inset 0 1px 0 rgba(0, 194, 255, .05) !important;
}

input::placeholder,
textarea::placeholder {
  color: var(--v10-muted) !important;
}

/* ── 9. Tables ── */
table,
.table,
.data-table {
  background: transparent !important;
  color: var(--v10-text) !important;
  border-color: var(--v10-line) !important;
}

thead,
th {
  background: rgba(10, 28, 55, .92) !important;
  color: var(--v10-text) !important;
  border-color: var(--v10-line) !important;
}

td,
tr {
  border-color: rgba(26, 42, 74, .70) !important;
}

tbody tr:hover {
  background: rgba(26, 110, 255, .07) !important;
}

/* ── 10. Status Badges ── */
.badge,
.status,
.status-badge,
.pill,
[class*="badge"] {
  border-radius: 6px !important;
  border: 1px solid rgba(122, 148, 193, .22) !important;
  background: rgba(26, 42, 74, .72) !important;
  color: var(--v10-text) !important;
  font-size: 10px !important;
  font-weight: 800 !important;
  line-height: 1.1 !important;
  letter-spacing: 0 !important;
  padding: 5px 9px !important;
}

/* Green — success / active / approved */
.status.ACTIVE,
.status.PRESENT,
.status.CHECK_IN,
.status.SUCCESS,
.status.APPROVED,
.status.COMPLETED,
.pill.success,
.badge.success,
.status-success,
[data-status="approved"],
[data-status="ok"],
.risk-low,
.verified {
  background: rgba(0, 214, 143, .13) !important;
  border-color: rgba(0, 214, 143, .42) !important;
  color: #B9FFE9 !important;
}

/* Amber — pending / review */
.status.PENDING,
.status.ON_LEAVE,
.status.LEAVE,
.status.LATE,
.status.MISSION,
.status.IN_REVIEW,
.status.OPEN,
.status.CHECK_OUT,
.pill.warning,
.badge.warning,
.status-warning,
.risk-medium,
[data-status="pending"] {
  background: rgba(255, 140, 0, .13) !important;
  border-color: rgba(255, 140, 0, .44) !important;
  color: #FFD8A6 !important;
}

/* Red — rejected / absent / locked */
.status.REJECTED,
.status.ABSENT,
.status.SUSPENDED,
.status.DISABLED,
.status.INACTIVE,
.status.LOCKED,
.status.TERMINATED,
.status.ESCALATED,
.status.HIGH,
.pill.danger,
.badge.danger,
.status-danger,
.risk-high,
[data-risk="high"],
[data-status="rejected"] {
  background: rgba(255, 59, 107, .14) !important;
  border-color: rgba(255, 59, 107, .48) !important;
  color: #FFD0DC !important;
}

/* Live / active with pulse */
.active-badge,
.badge-active,
.status-active,
[data-status="active"],
.status.ACTIVE {
  background: var(--v10-red) !important;
  border-color: var(--v10-red) !important;
  color: #fff !important;
  box-shadow: 0 0 16px rgba(255, 59, 107, .38) !important;
  animation: v10-active-glow 1.5s ease-in-out infinite;
}

/* ── 11. Charts ── */
.chart,
.chart-card,
.chart-shell,
.analytics-chart {
  background: linear-gradient(180deg, rgba(11, 22, 40, .96), rgba(5, 10, 26, .92)) !important;
  border: 1px solid var(--v10-line) !important;
  border-radius: 16px !important;
}

.chart svg path:not([fill="none"]),
.chart-card svg path:not([fill="none"]) {
  fill: rgba(26, 110, 255, .22) !important;
}

.chart svg path[stroke],
.chart-card svg path[stroke],
.chart svg polyline,
.chart-card svg polyline {
  stroke: var(--v10-cyan) !important;
  stroke-width: 2 !important;
}

.chart svg line,
.chart-card svg line {
  stroke: rgba(26, 42, 74, .36) !important;
}

.chart svg text,
.chart-card svg text {
  fill: var(--v10-muted) !important;
  font-family: var(--v10-font) !important;
}

.tooltip,
.chart-tooltip,
.recharts-tooltip-wrapper .recharts-default-tooltip {
  background: rgba(11, 22, 40, .97) !important;
  border: 1px solid var(--v10-line) !important;
  border-radius: 12px !important;
  color: var(--v10-text) !important;
  box-shadow: var(--v10-card-glow) !important;
}

/* ── 12. Maps & Location ── */
.live-map-board,
.map-card,
.gps-map-preview,
.branch-readable-card,
.readable-location,
.v10-location-card,
.org-chart {
  background:
    linear-gradient(rgba(5, 10, 26, .78), rgba(5, 10, 26, .78)),
    radial-gradient(circle at 35% 36%, rgba(0, 194, 255, .15), transparent 20%),
    radial-gradient(circle at 68% 64%, rgba(255, 59, 107, .12), transparent 20%),
    var(--v10-panel) !important;
  border: 1px solid var(--v10-line) !important;
  border-radius: 16px !important;
  box-shadow: var(--v10-card-glow) !important;
}

.map-pin,
.incident-dot,
.geo-circle i,
.presence-dot,
.live-dot {
  background: var(--v10-red) !important;
  box-shadow: 0 0 0 8px rgba(255, 59, 107, .12), 0 0 22px rgba(255, 59, 107, .40) !important;
  animation: v10-pulse 1.5s ease-out infinite;
}

.geo-circle i,
.presence-dot.ok,
.live-dot.ok {
  background: var(--v10-green) !important;
  box-shadow: 0 0 0 8px rgba(0, 214, 143, .12), 0 0 20px rgba(0, 214, 143, .34) !important;
}

/* ── 13. Toggles ── */
.toggle,
.switch,
.module-toggle {
  background: rgba(26, 42, 74, .8) !important;
  border: 1px solid var(--v10-line) !important;
  border-radius: 999px !important;
  transition: background .2s, border-color .2s !important;
}

.toggle.is-on,
.switch.is-on,
.module-toggle.is-on,
input[type="checkbox"]:checked+.toggle,
input[type="checkbox"]:checked+.switch {
  background: var(--v10-blue) !important;
  border-color: var(--v10-blue) !important;
}

/* ── 14. Grids ── */
.quick-actions-grid,
.module-grid,
.settings-grid,
.feature-toggle-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)) !important;
}

.features-grid,
.system-features-grid {
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)) !important;
}

/* ── 15. More Sheet ── */
.more-sheet-grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 12px !important;
}

.more-sheet-grid button {
  background: linear-gradient(145deg, rgba(14, 34, 58, .95), rgba(11, 24, 48, .9)) !important;
  border: 1px solid var(--v10-line) !important;
  box-shadow: none !important;
  color: var(--v10-text) !important;
  min-height: 84px !important;
}

.more-sheet-grid button:nth-child(4n+1) {
  border-color: rgba(0, 194, 255, .32) !important;
}

.more-sheet-grid button:nth-child(4n+2) {
  border-color: rgba(139, 92, 246, .34) !important;
}

.more-sheet-grid button:nth-child(4n+3) {
  border-color: rgba(0, 214, 143, .28) !important;
}

.more-sheet-grid button:nth-child(4n+4) {
  border-color: rgba(255, 59, 107, .28) !important;
}

.more-sheet-grid button span {
  color: var(--v10-text) !important;
  font-weight: 800 !important;
}

.more-sheet-grid button strong {
  font-size: 26px !important;
}

/* ── 16. Icons ── */
.icon,
.icon-wrap,
.icon-container,
.metric-icon,
.stat-icon,
.quick-action strong,
.action-card strong {
  color: var(--v10-cyan) !important;
  filter: drop-shadow(0 0 8px rgba(0, 194, 255, .22)) !important;
}

/* ── 17. Operations Gate ── */
.gate .target,
.target-card,
.portal-card {
  background: rgba(11, 22, 40, .88) !important;
  border: 1px solid var(--v10-line) !important;
  border-radius: 16px !important;
  color: var(--v10-text) !important;
}

.gate .target:hover,
.target-card:hover,
.portal-card:hover {
  border-color: rgba(0, 194, 255, .5) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 22px rgba(0, 80, 200, .18) !important;
}

.gate .target.is-active,
.target-card.is-active,
.portal-card.is-active {
  background: linear-gradient(135deg, rgba(0, 194, 255, .16), rgba(26, 110, 255, .20)) !important;
  border-color: var(--v10-cyan) !important;
  box-shadow: 0 0 0 4px rgba(0, 194, 255, .10), 0 0 28px rgba(0, 80, 200, .16) !important;
}

.gate .submit,
.gate button.submit {
  background: linear-gradient(135deg, var(--v10-cyan), var(--v10-blue)) !important;
  color: #031022 !important;
  border: 1px solid rgba(0, 194, 255, .5) !important;
}

/* ── 18. Employee User Header ── */
.employee-user,
.employee-header-card {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  min-width: 0 !important;
  padding: 8px 12px !important;
  background: rgba(11, 24, 48, .78) !important;
  border: 1px solid var(--v10-line) !important;
  border-radius: 22px !important;
}

.employee-user span,
.employee-header-card span {
  display: grid !important;
  min-width: 0 !important;
}

.employee-user strong,
.employee-header-card strong {
  font-size: 15px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--v10-text) !important;
}

.employee-user small,
.employee-header-card small {
  color: var(--v10-muted) !important;
  font-size: 12px !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.employee-brand img {
  width: 62px !important;
  height: 62px !important;
  filter: drop-shadow(0 0 10px rgba(0, 194, 255, .26)) !important;
}

/* ── 19. Toast notifications ── */
.hr-toast {
  position: fixed !important;
  top: calc(14px + env(safe-area-inset-top)) !important;
  bottom: auto !important;
  left: 50% !important;
  right: auto !important;
  width: max-content !important;
  min-width: min(280px, calc(100vw - 28px)) !important;
  max-width: min(92vw, 520px) !important;
  margin: 0 !important;
  padding: 14px 20px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  line-height: 1.55 !important;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
  border-radius: 18px !important;
  background: rgba(11, 22, 40, .97) !important;
  border: 1px solid var(--v10-line-str) !important;
  color: var(--v10-text) !important;
  box-shadow: 0 18px 46px rgba(0, 0, 0, .38) !important;
  z-index: 999999 !important;
  opacity: 0 !important;
  transform: translate(-50%, -14px) !important;
  transition: transform .22s cubic-bezier(.34, 1.56, .64, 1), opacity .18s ease !important;
}

.hr-toast.is-visible {
  opacity: 1 !important;
  transform: translate(-50%, 0) !important;
}

.hr-toast.error {
  border-color: rgba(255, 59, 107, .50) !important;
}

.hr-toast.ok {
  border-color: rgba(0, 214, 143, .45) !important;
}

/* ── 20. Modal & Confirm ── */
.modal-backdrop {
  z-index: 99990 !important;
  padding:
    max(16px, env(safe-area-inset-top)) max(14px, env(safe-area-inset-right)) max(16px, env(safe-area-inset-bottom)) max(14px, env(safe-area-inset-left)) !important;
}

.confirm-modal,
.hr-toast,
.modal,
.dialog,
.drawer,
.employee-more-sheet {
  background: linear-gradient(180deg, rgba(11, 22, 40, .98), rgba(5, 10, 26, .98)) !important;
  border-color: var(--v10-line-str) !important;
  color: var(--v10-text) !important;
  box-shadow: 0 28px 80px rgba(0, 0, 0, .52), var(--v10-card-glow) !important;
}

.confirm-modal {
  width: min(440px, calc(100vw - 28px)) !important;
  max-height: calc(100dvh - 32px) !important;
  overflow: auto !important;
  border-radius: 22px !important;
}

.confirm-modal .panel-head {
  display: block !important;
  margin-bottom: 16px !important;
}

.confirm-modal .panel-head h2 {
  margin: 0 0 8px !important;
  font-size: 20px !important;
  line-height: 1.35 !important;
  color: var(--v10-text) !important;
}

.confirm-modal .panel-head p {
  margin: 0 !important;
  font-size: 13px !important;
  line-height: 1.75 !important;
  color: var(--v10-muted) !important;
}

.confirm-modal .form-actions {
  display: flex !important;
  gap: 10px !important;
  justify-content: flex-start !important;
  flex-wrap: wrap !important;
}

.confirm-modal .form-actions .button {
  min-width: 100px !important;
}

/* ── 21. Scrollbar ── */
::-webkit-scrollbar {
  width: 9px;
  height: 9px;
}

::-webkit-scrollbar-track {
  background: #050A1A;
}

::-webkit-scrollbar-thumb {
  background: #1A2A4A;
  border-radius: 999px;
  border: 2px solid #050A1A;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--v10-blue);
}

::selection {
  background: rgba(0, 194, 255, .26);
  color: var(--v10-text);
}

/* ── 22. Keyframes ── */
@keyframes v10-pulse {
  0% {
    transform: scale(1);
    opacity: 1;
  }

  70% {
    transform: scale(1.6);
    opacity: .3;
  }

  100% {
    transform: scale(1);
    opacity: 1;
  }
}

@keyframes v10-active-glow {

  0%,
  100% {
    box-shadow: 0 0 10px rgba(255, 59, 107, .28);
  }

  50% {
    box-shadow: 0 0 26px rgba(255, 59, 107, .60);
  }
}

@keyframes v10-count-in {
  from {
    opacity: 0;
    transform: translateY(8px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes v10-fade-in {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes v10-slide-up {
  from {
    opacity: 0;
    transform: translateY(16px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes v10-skeleton {

  0%,
  100% {
    opacity: .45;
  }

  50% {
    opacity: .9;
  }
}

/* ── 23. Loading Skeleton ── */
.skeleton,
.loading-skeleton {
  background: linear-gradient(90deg, rgba(26, 42, 74, .5) 25%, rgba(26, 42, 74, .8) 50%, rgba(26, 42, 74, .5) 75%) !important;
  background-size: 200% 100% !important;
  animation: v10-skeleton-sweep 1.6s ease infinite !important;
  border-radius: 8px !important;
  color: transparent !important;
}

@keyframes v10-skeleton-sweep {
  0% {
    background-position: 200% 0;
  }

  100% {
    background-position: -200% 0;
  }
}

/* ── 24. Responsive Adjustments ── */
@media (max-width: 900px) {

  .topbar h1,
  .page-title h1,
  .employee-page-head h1,
  .login-panel h1,
  .executive-shell h1,
  .gate h1 {
    font-size: clamp(26px, 8vw, 36px) !important;
  }

  .panel,
  .card,
  .employee-card,
  .metric-card,
  .stat-card,
  .quick-action-card,
  .action-card,
  .person-card {
    padding: 16px !important;
  }

  .metric-card strong,
  .stat-card strong,
  .employee-stat strong,
  .compact-metric-badge strong,
  .kpi-card strong {
    font-size: 30px !important;
  }
}

@media (max-width: 640px) {
  .employee-main {
    padding-bottom: 92px !important;
  }

  .employee-page-head h1 {
    font-size: 32px !important;
  }

  .employee-card {
    border-radius: 22px !important;
  }

  .quick-actions-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }

  .metric-card {
    min-height: 84px !important;
  }

  .employee-user {
    max-width: calc(100vw - 118px) !important;
  }

  .employee-brand img {
    width: 56px !important;
    height: 56px !important;
  }
}

/* ── 25. Accessibility ── */
@media (prefers-reduced-motion: reduce) {

  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}

@media (prefers-contrast: high) {
  :root {
    --v10-line: rgba(0, 194, 255, .5);
    --v10-muted: #b0c8e8;
  }
}

/* ============================================================
   Unified Ahla Shabab HR command theme — V101 deep polish layer
   إصلاحات وتحسينات شاملة: UX, forms, tables, print, buttons, shell.
   ============================================================ */
:root {
  --text-bold: var(--v10-text);
  --text-muted: var(--v10-muted);
  --text-soft: var(--v10-soft);
  --card: var(--v10-panel);
  --card-2: var(--v10-panel-2);
  --radius: var(--v10-radius);
  --radius-lg: var(--v10-radius-xl);
  --shadow-soft: 0 18px 48px rgba(0, 0, 0, .30);
  --focus-ring: 0 0 0 4px rgba(0, 194, 255, .18);
  --control-h: 46px;
}

html.v101-deep-fix {
  scroll-behavior: smooth;
}

html.v101-deep-fix body {
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

/* App shells */
.admin-app,
.employee-app,
.executive-portal-app,
#app {
  min-height: 100dvh;
}

.shell,
.admin-shell,
.employee-shell,
.executive-shell,
.main,
.content,
.main-content {
  isolation: isolate;
}

.topbar,
.admin-topbar,
.employee-topbar,
.executive-topbar {
  position: sticky !important;
  top: 0 !important;
  z-index: 70 !important;
}

.sidebar {
  scrollbar-width: thin;
  scrollbar-color: rgba(0, 194, 255, .38) transparent;
}

.sidebar .nav button,
.nav button[data-route] {
  position: relative !important;
  min-height: 44px !important;
  justify-content: space-between !important;
  gap: 8px !important;
}

.sidebar .nav button.is-active,
.nav button.is-active {
  background: linear-gradient(135deg, rgba(0, 194, 255, .18), rgba(26, 110, 255, .20)) !important;
  border-color: rgba(0, 194, 255, .48) !important;
  color: var(--v10-text) !important;
  box-shadow: inset 3px 0 0 var(--v10-cyan), 0 10px 22px rgba(0, 80, 200, .14) !important;
}

.v10-nav-search {
  display: grid !important;
  gap: 6px !important;
  margin: 0 0 12px !important;
  padding: 10px !important;
  border: 1px solid rgba(0, 194, 255, .18) !important;
  border-radius: 16px !important;
  background: rgba(5, 10, 26, .50) !important;
}

.v10-nav-search span {
  font-size: 11px !important;
  font-weight: 900 !important;
  color: var(--v10-muted) !important;
}

.v10-nav-search input {
  height: 38px !important;
  font-size: 13px !important;
}

.v10-nav-hidden {
  display: none !important;
}

.kbd {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 34px !important;
  height: 22px !important;
  padding: 0 7px !important;
  border: 1px solid rgba(0, 194, 255, .24) !important;
  border-radius: 8px !important;
  color: var(--v10-muted) !important;
  background: rgba(5, 10, 26, .62) !important;
  font-size: 10px !important;
  font-weight: 900 !important;
  direction: ltr !important;
}

/* Login screens */
.login-screen {
  min-height: 100dvh !important;
  display: grid !important;
  place-items: center !important;
  padding: clamp(16px, 4vw, 42px) !important;
  background:
    radial-gradient(circle at 15% 12%, rgba(0, 194, 255, .18), transparent 28%),
    radial-gradient(circle at 82% 20%, rgba(139, 92, 246, .16), transparent 30%),
    radial-gradient(circle at 52% 96%, rgba(255, 59, 107, .12), transparent 32%),
    var(--v10-bg) !important;
}

.login-panel {
  width: min(460px, 100%) !important;
  border-radius: 28px !important;
  padding: clamp(22px, 4vw, 34px) !important;
  box-shadow: 0 28px 88px rgba(0, 0, 0, .46), 0 0 0 1px rgba(0, 194, 255, .08) !important;
}

.login-logo-mark img,
.login-panel img[alt=""] {
  width: 86px !important;
  height: 86px !important;
  object-fit: contain !important;
  filter: drop-shadow(0 0 18px rgba(0, 194, 255, .36)) !important;
}

.login-password-field {
  position: relative !important;
  display: block !important;
}

.login-password-field input {
  padding-inline-end: 88px !important;
}

.login-password-field button,
[data-toggle-password] {
  position: absolute !important;
  inset-inline-end: 8px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  min-height: 32px !important;
  border-radius: 999px !important;
  padding: 0 12px !important;
}

/* Metric cards and count up */
.metric,
.metric-card,
.stat-card,
.employee-stat,
.mini-stats>div,
.score-ring,
.kpi-card {
  will-change: transform;
}

.metric-card strong[data-count],
.stat-card strong[data-count],
.metric strong[data-count],
.employee-stat strong[data-count],
.mini-stats strong[data-count] {
  font-variant-numeric: tabular-nums;
}

.metric-card:hover strong,
.stat-card:hover strong,
.metric:hover strong,
.employee-stat:hover strong {
  text-shadow: 0 0 20px rgba(0, 194, 255, .22) !important;
}

.metric-card small,
.stat-card small,
.metric small,
.employee-stat small {
  display: block !important;
  margin-top: 7px !important;
  line-height: 1.55 !important;
}

.delta,
.trend-badge,
.metric-delta {
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  padding: 4px 8px !important;
  border-radius: 999px !important;
  background: rgba(0, 214, 143, .12) !important;
  color: #B9FFE9 !important;
  border: 1px solid rgba(0, 214, 143, .26) !important;
  font-size: 11px !important;
  font-weight: 900 !important;
}

/* Employee home/hero */
.employee-hero,
.employee-hero-card,
.home-hero,
.punch-hero,
.today-hero {
  position: relative !important;
  overflow: hidden !important;
  border-radius: 28px !important;
  background:
    linear-gradient(135deg, rgba(0, 194, 255, .16), rgba(26, 110, 255, .16) 46%, rgba(139, 92, 246, .14)),
    var(--v10-card-bg) !important;
  border: 1px solid rgba(0, 194, 255, .30) !important;
  box-shadow: 0 24px 70px rgba(0, 70, 180, .22) !important;
}

.employee-hero::after,
.employee-hero-card::after,
.home-hero::after,
.punch-hero::after,
.today-hero::after {
  content: "";
  position: absolute;
  inset: auto -80px -120px auto;
  width: 260px;
  height: 260px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(0, 194, 255, .20), transparent 65%);
  pointer-events: none;
}

.quick-actions-grid,
.employee-quick-actions,
.action-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(128px, 1fr)) !important;
  gap: 12px !important;
}

.quick-action,
.quick-action-card,
.employee-quick-actions button,
.action-card {
  min-height: 96px !important;
  align-content: center !important;
  justify-items: center !important;
  text-align: center !important;
  border-radius: 22px !important;
}

/* Forms */
form label {
  position: relative !important;
}

input,
select,
textarea {
  min-height: var(--control-h) !important;
  padding: 10px 13px !important;
}

textarea {
  min-height: 112px !important;
  resize: vertical !important;
}

input.is-valid,
select.is-valid,
textarea.is-valid {
  border-color: rgba(0, 214, 143, .58) !important;
  box-shadow: 0 0 0 4px rgba(0, 214, 143, .10) !important;
}

input.is-invalid,
select.is-invalid,
textarea.is-invalid,
.has-error input,
.has-error select,
.has-error textarea {
  border-color: rgba(255, 59, 107, .74) !important;
  box-shadow: 0 0 0 4px rgba(255, 59, 107, .13) !important;
  animation: v10-shake .22s ease both;
}

.field-error.v10 {
  display: block !important;
  margin-top: 6px !important;
  color: #FFD0DC !important;
  font-size: 11px !important;
  line-height: 1.55 !important;
  animation: v10-slide-up .18s ease both;
}

.form-actions {
  gap: 10px !important;
  align-items: center !important;
}

button.is-loading,
.button.is-loading {
  pointer-events: none !important;
  opacity: .78 !important;
  position: relative !important;
}

button.is-loading::after,
.button.is-loading::after {
  content: "";
  width: 15px;
  height: 15px;
  margin-inline-start: 8px;
  border-radius: 50%;
  border: 2px solid currentColor;
  border-top-color: transparent;
  display: inline-block;
  vertical-align: -3px;
  animation: v10-spin .75s linear infinite;
}

/* Buttons + ripple */
button,
.button,
.quick-action,
.action-card,
[role="button"] {
  position: relative !important;
  overflow: hidden !important;
  -webkit-tap-highlight-color: transparent !important;
  touch-action: manipulation !important;
}

.v10-ripple {
  position: absolute;
  border-radius: 50%;
  transform: scale(0);
  pointer-events: none;
  background: rgba(255, 255, 255, .34);
  animation: v10-ripple .62s ease-out forwards;
  z-index: 0;
}

button> :not(.v10-ripple),
.button> :not(.v10-ripple) {
  position: relative;
  z-index: 1;
}

button:focus-visible,
.button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: none !important;
  box-shadow: var(--focus-ring) !important;
}

/* Tables */
.table-wrap {
  max-width: 100% !important;
  border-radius: 18px !important;
  border: 1px solid rgba(0, 194, 255, .16) !important;
  overflow: auto !important;
  background: rgba(5, 10, 26, .34) !important;
}

.table-wrap table,
.v10-table {
  width: 100% !important;
  border-collapse: separate !important;
  border-spacing: 0 !important;
}

.table-wrap thead th,
.v10-table thead th {
  position: sticky !important;
  top: 0 !important;
  z-index: 3 !important;
  box-shadow: inset 0 -2px 0 rgba(0, 194, 255, .42) !important;
}

.table-wrap td,
.table-wrap th,
.v10-table td,
.v10-table th {
  vertical-align: middle !important;
  padding: 11px 12px !important;
}

.table-wrap tbody tr:nth-child(even),
.v10-table tbody tr:nth-child(even) {
  background: rgba(255, 255, 255, .018) !important;
}

th[data-sort] {
  cursor: pointer !important;
  user-select: none !important;
}

th[data-sort]::after {
  content: " ⇅";
  color: var(--v10-muted);
  font-size: 11px;
}

th[data-sort="asc"]::after {
  content: " ↑";
  color: var(--v10-cyan);
}

th[data-sort="desc"]::after {
  content: " ↓";
  color: var(--v10-cyan);
}

.person-cell {
  min-width: 180px !important;
}

/* Empty states */
.empty-state,
.v10-empty-enhanced,
.empty {
  text-align: center !important;
  padding: clamp(18px, 4vw, 34px) !important;
  color: var(--v10-muted) !important;
}

.v10-empty-enhanced {
  display: grid !important;
  place-items: center !important;
  gap: 8px !important;
}

.v10-empty-enhanced .v10-empty-icon {
  display: grid !important;
  place-items: center !important;
  width: 54px !important;
  height: 54px !important;
  border-radius: 18px !important;
  background: rgba(0, 194, 255, .10) !important;
  border: 1px solid rgba(0, 194, 255, .22) !important;
  color: var(--v10-cyan) !important;
  font-size: 30px !important;
  font-weight: 900 !important;
}

.v10-empty-enhanced strong {
  color: var(--v10-text) !important;
  font-size: 16px !important;
}

.v10-empty-enhanced small {
  max-width: 420px !important;
  line-height: 1.7 !important;
}

/* Utility UI */
.v10-progress {
  position: fixed;
  inset: 0 0 auto 0;
  height: 3px;
  z-index: 999999;
  transform-origin: right center;
  transform: scaleX(0);
  background: linear-gradient(90deg, var(--v10-cyan), var(--v10-blue), var(--v10-purple));
  box-shadow: 0 0 18px rgba(0, 194, 255, .55);
  opacity: 0;
}

.v10-progress.is-running {
  animation: v10-progress .65s ease both;
}

.v10-scroll-top {
  position: fixed !important;
  inset-inline-end: calc(18px + env(safe-area-inset-right)) !important;
  bottom: calc(22px + env(safe-area-inset-bottom)) !important;
  width: 46px !important;
  height: 46px !important;
  border-radius: 16px !important;
  border: 1px solid rgba(0, 194, 255, .36) !important;
  background: linear-gradient(135deg, var(--v10-cyan), var(--v10-blue)) !important;
  color: #031022 !important;
  font-size: 22px !important;
  font-weight: 900 !important;
  box-shadow: 0 16px 34px rgba(0, 80, 200, .28) !important;
  opacity: 0 !important;
  pointer-events: none !important;
  transform: translateY(14px) !important;
  transition: opacity .18s ease, transform .18s ease !important;
  z-index: 120 !important;
}

.v10-scroll-top.is-visible {
  opacity: 1 !important;
  pointer-events: auto !important;
  transform: translateY(0) !important;
}

[data-tip] {
  position: relative !important;
}

[data-tip]:hover::after,
[data-tip]:focus-visible::after {
  content: attr(data-tip);
  position: absolute;
  inset: auto 50% calc(100% + 9px) auto;
  transform: translateX(50%);
  max-width: 260px;
  width: max-content;
  white-space: normal;
  padding: 7px 10px;
  border-radius: 10px;
  border: 1px solid rgba(0, 194, 255, .24);
  background: rgba(5, 10, 26, .96);
  color: var(--v10-text);
  font-size: 11px;
  line-height: 1.55;
  box-shadow: var(--shadow-soft);
  z-index: 999;
}

.alert,
.alert.info,
.alert.success,
.alert.warning,
.alert.danger {
  border-radius: 16px !important;
  border: 1px solid rgba(0, 194, 255, .22) !important;
  padding: 12px 14px !important;
  background: rgba(0, 194, 255, .10) !important;
  color: var(--v10-text) !important;
  animation: v10-slide-up .2s ease both;
}

.alert.success {
  background: rgba(0, 214, 143, .12) !important;
  border-color: rgba(0, 214, 143, .32) !important;
}

.alert.warning {
  background: rgba(255, 140, 0, .12) !important;
  border-color: rgba(255, 140, 0, .34) !important;
}

.alert.danger {
  background: rgba(255, 59, 107, .12) !important;
  border-color: rgba(255, 59, 107, .34) !important;
}

.gps-status.acquiring::before,
.gps-status.acquired::before,
.gps-status.error::before {
  content: "";
  display: inline-block;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  margin-inline-end: 7px;
  background: var(--v10-amber);
}

.gps-status.acquiring::before {
  animation: v10-active-glow 1.2s infinite;
}

.gps-status.acquired::before {
  background: var(--v10-green);
}

.gps-status.error::before {
  background: var(--v10-red);
}

/* Print */
@media print {
  :root {
    color-scheme: light;
  }

  body,
  .app,
  .admin-app,
  .employee-app,
  .executive-portal-app {
    background: #fff !important;
    color: #111827 !important;
    font-family: Cairo, Arial, sans-serif !important;
  }

  body::before,
  .app::before,
  .sidebar,
  .topbar,
  .admin-topbar,
  .employee-topbar,
  .executive-topbar,
  .employee-bottom-nav,
  .nav-fab,
  .mobile-menu,
  .v10-scroll-top,
  .v10-progress,
  .hr-toast,
  .form-actions,
  .toolbar,
  button,
  .button {
    display: none !important;
  }

  .panel,
  .card,
  .metric-card,
  .stat-card,
  .table-wrap {
    background: #fff !important;
    color: #111827 !important;
    border: 1px solid #cbd5e1 !important;
    box-shadow: none !important;
    break-inside: avoid !important;
  }

  h1,
  h2,
  h3,
  p,
  span,
  strong,
  small,
  td,
  th,
  label {
    color: #111827 !important;
    -webkit-text-fill-color: currentColor !important;
  }

  table {
    page-break-inside: auto !important;
  }

  tr {
    page-break-inside: avoid !important;
    page-break-after: auto !important;
  }

  thead {
    display: table-header-group !important;
  }

  th {
    background: #e5efff !important;
    color: #0f172a !important;
  }

  .table-wrap {
    overflow: visible !important;
  }
}

@media (max-width: 720px) {
  .table-wrap {
    border: 0 !important;
    background: transparent !important;
    overflow: visible !important;
  }

  .table-wrap table,
  .v10-table {
    min-width: 0 !important;
  }

  .table-wrap thead,
  .v10-table thead {
    display: none !important;
  }

  .table-wrap tbody,
  .table-wrap tr,
  .table-wrap td,
  .v10-table tbody,
  .v10-table tr,
  .v10-table td {
    display: block !important;
    width: 100% !important;
  }

  .table-wrap tr,
  .v10-table tr {
    margin: 0 0 12px !important;
    border: 1px solid rgba(0, 194, 255, .18) !important;
    border-radius: 18px !important;
    background: rgba(11, 22, 40, .78) !important;
    overflow: hidden !important;
  }

  .table-wrap td,
  .v10-table td {
    display: grid !important;
    grid-template-columns: minmax(92px, 38%) 1fr !important;
    gap: 10px !important;
    border: 0 !important;
    border-bottom: 1px solid rgba(26, 42, 74, .58) !important;
    text-align: start !important;
  }

  .table-wrap td:last-child,
  .v10-table td:last-child {
    border-bottom: 0 !important;
  }

  .table-wrap td::before,
  .v10-table td::before {
    content: attr(data-label);
    color: var(--v10-muted);
    font-size: 11px;
    font-weight: 900;
  }

  .quick-actions-grid,
  .employee-quick-actions,
  .action-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .v10-scroll-top {
    bottom: calc(92px + env(safe-area-inset-bottom)) !important;
  }

  .kbd {
    display: none !important;
  }
}

@keyframes v10-ripple {
  to {
    transform: scale(2.35);
    opacity: 0;
  }
}

@keyframes v10-shake {

  0%,
  100% {
    transform: translateX(0);
  }

  35% {
    transform: translateX(4px);
  }

  70% {
    transform: translateX(-4px);
  }
}

@keyframes v10-spin {
  to {
    transform: rotate(360deg);
  }
}

@keyframes v10-progress {
  0% {
    opacity: 1;
    transform: scaleX(0);
  }

  65% {
    opacity: 1;
    transform: scaleX(.82);
  }

  100% {
    opacity: 0;
    transform: scaleX(1);
  }
}

/* ── from v101-deep-quality.css ─────────────────────────────────── */
:root {
  --hr-bg: #050A1A;
  --hr-bg-2: #081225;
  --hr-surface: rgba(11, 22, 40, 0.92);
  --hr-surface-2: rgba(15, 29, 55, 0.86);
  --hr-line: rgba(0, 194, 255, 0.20);
  --hr-line-strong: rgba(0, 194, 255, 0.36);
  --hr-text: #E8F4FF;
  --hr-muted: #9CB4D4;
  --hr-soft: #C9DAF3;
  --hr-blue: #1A6EFF;
  --hr-cyan: #00C2FF;
  --hr-purple: #8B5CF6;
  --hr-green: #00D68F;
  --hr-red: #FF3B6B;
  --hr-warning: #FFB020;
  --hr-radius-xs: 10px;
  --hr-radius-sm: 14px;
  --hr-radius-md: 18px;
  --hr-radius-lg: 24px;
  --hr-shadow: 0 22px 70px rgba(0, 0, 0, 0.34);
  --hr-shadow-soft: 0 12px 34px rgba(0, 0, 0, 0.22);
  --hr-focus: 0 0 0 4px rgba(0, 194, 255, 0.18);
  --hr-transition: 170ms ease;
  color-scheme: dark;
}

html.v101-quality-ready {
  background: radial-gradient(circle at top right, rgba(26, 110, 255, .16), transparent 34%),
    radial-gradient(circle at bottom left, rgba(139, 92, 246, .12), transparent 30%), var(--hr-bg);
  scroll-behavior: smooth;
}

body {
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  accent-color: var(--hr-cyan);
}

::selection {
  background: rgba(0, 194, 255, .32);
  color: #fff;
}

:focus-visible {
  outline: none !important;
  box-shadow: var(--hr-focus) !important;
  border-color: var(--hr-cyan) !important;
}

#app.app,
.admin-app,
.employee-app,
.executive-portal-app {
  min-height: 100dvh;
}

/* App shell */
.admin-shell,
.dashboard-shell,
.employee-shell,
.executive-shell,
.app-shell {
  isolation: isolate;
}

.sidebar,
.app-sidebar,
aside,
nav.sidebar {
  scrollbar-width: thin;
  scrollbar-color: rgba(0, 194, 255, .28) transparent;
}

.sidebar::-webkit-scrollbar,
.app-sidebar::-webkit-scrollbar,
aside::-webkit-scrollbar,
nav.sidebar::-webkit-scrollbar {
  width: 8px;
}

.sidebar::-webkit-scrollbar-thumb,
.app-sidebar::-webkit-scrollbar-thumb,
aside::-webkit-scrollbar-thumb,
nav.sidebar::-webkit-scrollbar-thumb {
  background: rgba(0, 194, 255, .24);
  border-radius: 999px;
}

.v101-nav-search,
.v10-nav-search,
.sidebar-search {
  display: grid;
  gap: 7px;
  margin: 10px 8px 14px;
  padding: 10px;
  border: 1px solid var(--hr-line);
  border-radius: var(--hr-radius-sm);
  background: rgba(5, 10, 26, .46);
}

.v101-nav-search span,
.v10-nav-search span,
.sidebar-search span {
  color: var(--hr-muted);
  font-size: 11px;
  font-weight: 800;
}

.v101-nav-search input,
.v10-nav-search input,
.sidebar-search input {
  min-height: 38px;
  border-radius: 999px;
  border: 1px solid rgba(148, 163, 184, .22);
  background: rgba(4, 10, 24, .74);
  color: var(--hr-text);
  padding: 0 13px;
}

.v10-nav-hidden,
.v101-nav-hidden {
  display: none !important;
}

.kbd,
.shortcut-hint {
  margin-inline-start: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  min-height: 20px;
  padding: 0 7px;
  border-radius: 7px;
  border: 1px solid rgba(148, 163, 184, .22);
  background: rgba(255, 255, 255, .06);
  color: var(--hr-muted);
  font-size: 10px;
  direction: ltr;
}

/* Cards and panels */
.panel,
.card,
.dashboard-card,
.metric-card,
.stat-card,
.employee-card,
.executive-card,
.login-panel,
.gate,
.table-card,
.widget-card,
.section-card {
  backdrop-filter: blur(14px) saturate(1.18);
  transform: translateZ(0);
}

.panel:hover,
.card:hover,
.metric-card:hover,
.stat-card:hover,
.employee-card:hover,
.quick-action-card:hover,
.quick-action:hover {
  border-color: rgba(0, 194, 255, .34) !important;
}

.metric-card,
.stat-card,
.metric,
.employee-stat,
.compact-metric-badge,
.mini-stats>*,
.kpi-card {
  position: relative;
  overflow: hidden;
}

.metric-card::before,
.stat-card::before,
.metric::before,
.employee-stat::before,
.compact-metric-badge::before {
  content: "";
  position: absolute;
  inset: -1px;
  pointer-events: none;
  background: linear-gradient(135deg, rgba(0, 194, 255, .14), transparent 42%, rgba(139, 92, 246, .13));
  opacity: .72;
}

.metric-card>*,
.stat-card>*,
.metric>*,
.employee-stat>*,
.compact-metric-badge>* {
  position: relative;
  z-index: 1;
}

[data-count-done="true"],
.counting {
  animation: hrCounterPop .34s ease both;
}

@keyframes hrCounterPop {
  0% {
    transform: scale(.98)
  }

  60% {
    transform: scale(1.035)
  }

  100% {
    transform: scale(1)
  }
}

/* Employee home polish */
.employee-hero,
.home-hero,
.employee-card.hero-card,
.employee-home-hero {
  position: relative;
  overflow: hidden;
  border-radius: clamp(22px, 5vw, 34px) !important;
  background:
    radial-gradient(circle at 88% 12%, rgba(0, 194, 255, .24), transparent 30%),
    linear-gradient(135deg, rgba(26, 110, 255, .22), rgba(139, 92, 246, .16)),
    var(--hr-surface) !important;
}

.employee-hero::after,
.home-hero::after,
.employee-card.hero-card::after,
.employee-home-hero::after {
  content: "";
  position: absolute;
  inset: auto -15% -35% -15%;
  height: 55%;
  background: radial-gradient(closest-side, rgba(0, 214, 143, .18), transparent 72%);
  pointer-events: none;
}

.quick-actions,
.quick-actions-grid,
.employee-actions-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(136px, 1fr));
  gap: 12px;
}

.quick-action,
.quick-action-card,
.action-card {
  min-height: 112px;
  text-align: start;
  align-content: start;
}

.quick-icon,
.badge-icon {
  filter: drop-shadow(0 10px 18px rgba(0, 194, 255, .18));
}

/* Buttons */
button,
.button,
.quick-action,
.quick-action-card,
.target,
a.button {
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

.button,
button,
.quick-action,
.quick-action-card,
.target {
  position: relative;
  overflow: hidden;
}

.hr-ripple,
.v10-ripple,
.button::after {
  pointer-events: none;
}

.hr-ripple {
  position: absolute;
  width: 12px;
  height: 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .44);
  transform: translate(-50%, -50%) scale(1);
  animation: hrRipple .62s ease-out forwards;
  mix-blend-mode: screen;
}

@keyframes hrRipple {
  to {
    opacity: 0;
    transform: translate(-50%, -50%) scale(24);
  }
}

.button.is-loading,
button.is-loading {
  pointer-events: none;
  opacity: .74;
}

.button.is-loading::before,
button.is-loading::before {
  content: "";
  width: 1em;
  height: 1em;
  margin-inline-end: .45em;
  display: inline-block;
  vertical-align: -2px;
  border-radius: 50%;
  border: 2px solid currentColor;
  border-inline-start-color: transparent;
  animation: hrSpin .75s linear infinite;
}

@keyframes hrSpin {
  to {
    transform: rotate(360deg);
  }
}

/* Forms */
input,
select,
textarea {
  transition: border-color var(--hr-transition), box-shadow var(--hr-transition), background-color var(--hr-transition), transform var(--hr-transition);
}

input:hover,
select:hover,
textarea:hover {
  border-color: rgba(0, 194, 255, .30) !important;
}

input.is-valid,
select.is-valid,
textarea.is-valid {
  border-color: rgba(0, 214, 143, .55) !important;
}

input.is-invalid,
select.is-invalid,
textarea.is-invalid,
.has-error input,
.has-error select,
.has-error textarea {
  border-color: rgba(255, 59, 107, .72) !important;
  box-shadow: 0 0 0 4px rgba(255, 59, 107, .13) !important;
}

.field-error,
.field-error.v10,
.hr-field-error {
  display: block;
  margin-top: 6px;
  color: #ffc6d3;
  font-size: 12px;
  line-height: 1.5;
}

.field-error:empty,
.field-error[hidden],
.hr-field-error:empty {
  display: none !important;
}

.password-toggle,
.hr-password-toggle {
  white-space: nowrap;
}

/* Tables */
.table-wrap,
.table-scroll,
.table-card {
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: rgba(0, 194, 255, .22) transparent;
}

table,
.v10-table,
.data-table {
  border-spacing: 0;
}

thead th,
.v10-table thead th,
.data-table thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  backdrop-filter: blur(16px);
  background: rgba(9, 20, 38, .96) !important;
}

tbody tr {
  transition: background-color var(--hr-transition), transform var(--hr-transition);
}

tbody tr:hover {
  background: rgba(0, 194, 255, .065) !important;
}

td[data-label]::before {
  font-weight: 900;
}

/* Empty states */
.empty-state,
.empty,
.v10-empty-enhanced,
.hr-empty-state {
  min-height: 118px;
  display: grid;
  place-items: center;
  text-align: center;
  gap: 8px;
  border: 1px dashed rgba(0, 194, 255, .28) !important;
  border-radius: var(--hr-radius-md) !important;
  background: rgba(0, 194, 255, .055) !important;
  color: var(--hr-muted) !important;
  padding: 20px !important;
}

.v10-empty-icon,
.hr-empty-icon {
  width: 48px;
  height: 48px;
  border-radius: 18px;
  display: grid;
  place-items: center;
  color: var(--hr-cyan);
  background: rgba(0, 194, 255, .10);
  border: 1px solid rgba(0, 194, 255, .20);
  font-size: 24px;
}

.empty-state strong,
.v10-empty-enhanced strong,
.hr-empty-state strong {
  color: var(--hr-text);
}

/* Login and gateway */
.login-screen,
.login-page,
.login-panel,
.gate {
  box-shadow: var(--hr-shadow);
}

.login-panel::before,
.gate::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  background: linear-gradient(135deg, rgba(0, 194, 255, .18), transparent 36%, rgba(139, 92, 246, .16));
  opacity: .55;
}

.login-panel>*,
.gate>* {
  position: relative;
  z-index: 1;
}

/* Global feedback */
.hr-qc-toast,
.hr-toast.v101 {
  position: fixed;
  inset-inline: auto 18px;
  bottom: calc(18px + env(safe-area-inset-bottom));
  z-index: 999999;
  max-width: min(420px, calc(100vw - 28px));
  border-radius: 16px;
  padding: 13px 16px;
  border: 1px solid rgba(0, 194, 255, .30);
  background: rgba(8, 18, 37, .94);
  color: var(--hr-text);
  box-shadow: var(--hr-shadow-soft);
  transform: translateY(18px);
  opacity: 0;
  transition: opacity .22s ease, transform .22s ease;
}

.hr-qc-toast.is-visible,
.hr-toast.v101.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.hr-qc-toast.error {
  border-color: rgba(255, 59, 107, .52);
  background: rgba(39, 11, 25, .95);
}

.hr-qc-toast.warn {
  border-color: rgba(255, 176, 32, .48);
  background: rgba(38, 25, 9, .95);
}

.hr-qc-network {
  position: fixed;
  z-index: 999998;
  inset-inline: 16px;
  top: calc(12px + env(safe-area-inset-top));
  border-radius: 999px;
  padding: 9px 13px;
  text-align: center;
  background: rgba(255, 176, 32, .15);
  border: 1px solid rgba(255, 176, 32, .40);
  color: #ffe5ad;
  font-weight: 900;
  transform: translateY(-140%);
  transition: transform .24s ease;
}

.hr-qc-network.is-visible {
  transform: translateY(0);
}

.v101-progress {
  position: fixed;
  top: 0;
  inset-inline: 0;
  z-index: 1000000;
  height: 3px;
  background: linear-gradient(90deg, var(--hr-cyan), var(--hr-blue), var(--hr-purple));
  transform: scaleX(0);
  transform-origin: right center;
  opacity: 0;
}

.v101-progress.is-running {
  animation: hrProgress .72s ease;
}

@keyframes hrProgress {
  0% {
    transform: scaleX(0);
    opacity: 1;
  }

  60% {
    transform: scaleX(.78);
    opacity: 1;
  }

  100% {
    transform: scaleX(1);
    opacity: 0;
  }
}

.v101-scroll-top {
  position: fixed;
  inset-inline-end: 18px;
  bottom: calc(82px + env(safe-area-inset-bottom));
  z-index: 10000;
  width: 46px;
  height: 46px;
  border-radius: 16px;
  border: 1px solid rgba(0, 194, 255, .35);
  background: rgba(8, 18, 37, .86);
  color: var(--hr-cyan);
  box-shadow: var(--hr-shadow-soft);
  opacity: 0;
  transform: translateY(14px) scale(.96);
  pointer-events: none;
  transition: opacity .2s ease, transform .2s ease;
}

.v101-scroll-top.is-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

/* Mobile tables */
@media (max-width: 760px) {

  .table-wrap,
  .table-scroll {
    overflow: visible;
  }

  table.v101-mobile-table,
  .v101-mobile-table thead,
  .v101-mobile-table tbody,
  .v101-mobile-table tr,
  .v101-mobile-table th,
  .v101-mobile-table td {
    display: block;
    width: 100%;
  }

  .v101-mobile-table thead {
    display: none;
  }

  .v101-mobile-table tbody {
    display: grid;
    gap: 10px;
  }

  .v101-mobile-table tr {
    border: 1px solid var(--hr-line);
    border-radius: var(--hr-radius-md);
    padding: 10px;
    background: rgba(9, 20, 38, .72);
    box-shadow: 0 8px 24px rgba(0, 0, 0, .16);
  }

  .v101-mobile-table td {
    border: 0 !important;
    display: grid;
    grid-template-columns: minmax(92px, 38%) 1fr;
    gap: 10px;
    align-items: start;
    padding: 8px 2px !important;
  }

  .v101-mobile-table td::before {
    content: attr(data-label);
    color: var(--hr-muted);
    font-size: 12px;
  }

  .v101-mobile-table td:empty::after {
    content: "—";
    color: var(--hr-muted);
  }

  .quick-actions,
  .quick-actions-grid,
  .employee-actions-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .quick-action,
  .quick-action-card {
    min-height: 104px;
  }
}

@media (max-width: 420px) {

  .quick-actions,
  .quick-actions-grid,
  .employee-actions-grid {
    grid-template-columns: 1fr;
  }

  .panel,
  .card,
  .employee-card {
    border-radius: 18px !important;
  }
}

/* Print */
@media print {
  :root {
    color-scheme: light;
  }

  html,
  body {
    background: #fff !important;
    color: #111827 !important;
  }

  body {
    font-family: Arial, Tahoma, sans-serif !important;
  }

  .sidebar,
  .app-sidebar,
  nav,
  .bottom-nav,
  .employee-bottom-nav,
  .toolbar,
  .button,
  button,
  .v101-scroll-top,
  .scroll-top,
  .v10-scroll-top,
  .hr-qc-toast,
  .hr-qc-network,
  .v101-progress,
  .v10-progress {
    display: none !important;
  }

  #app,
  main,
  .content,
  .page-content {
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  .panel,
  .card,
  .employee-card,
  .metric-card,
  .stat-card {
    break-inside: avoid;
    box-shadow: none !important;
    background: #fff !important;
    color: #111827 !important;
    border: 1px solid #d1d5db !important;
  }

  table {
    width: 100% !important;
    border-collapse: collapse !important;
    page-break-inside: auto;
  }

  thead {
    display: table-header-group !important;
  }

  tr {
    break-inside: avoid;
  }

  th,
  td {
    color: #111827 !important;
    border: 1px solid #d1d5db !important;
    background: #fff !important;
  }

  a[href]::after {
    content: "" !important;
  }
}

@media (prefers-reduced-motion: reduce) {

  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 0.001ms !important;
  }
}

/* ── from v102-ui-overhaul.css ─────────────────────────────────── */
/* ── 1. Root Extensions ── */
:root {
  --hr102-glow-cyan: 0 0 0 4px rgba(0, 194, 255, .12), 0 0 22px rgba(0, 194, 255, .18);
  --hr102-glow-green: 0 0 0 4px rgba(0, 214, 143, .12), 0 0 18px rgba(0, 214, 143, .16);
  --hr102-glow-red: 0 0 0 4px rgba(255, 59, 107, .14), 0 0 20px rgba(255, 59, 107, .20);
  --hr102-transition: 190ms cubic-bezier(.4, 0, .2, 1);
}

/* ── 2. Hero Card (Employee Home) ── */
.employee-hero-card.home-welcome,
.employee-hero-card {
  position: relative;
  overflow: hidden;
  border-color: rgba(0, 194, 255, .28) !important;
  background:
    radial-gradient(circle at 90% 8%, rgba(0, 194, 255, .22), transparent 32%),
    radial-gradient(circle at 10% 90%, rgba(139, 92, 246, .14), transparent 30%),
    linear-gradient(160deg, rgba(11, 22, 40, .96), rgba(7, 16, 30, .98)) !important;
  border-radius: 26px !important;
}

.employee-hero-card::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  background: linear-gradient(135deg, rgba(0, 194, 255, .18), transparent 42%, rgba(139, 92, 246, .12));
  pointer-events: none;
  opacity: .8;
}

.employee-hero-card::after {
  content: "";
  position: absolute;
  inset: auto -10% -30% -10%;
  height: 52%;
  background: radial-gradient(closest-side, rgba(0, 194, 255, .10), transparent 75%);
  pointer-events: none;
}

.employee-hero-card>* {
  position: relative;
  z-index: 1;
}

.employee-hero-card.has-live-alert {
  border-color: rgba(255, 59, 107, .36) !important;
}

.employee-hero-card.has-live-alert::before {
  background: linear-gradient(135deg, rgba(255, 59, 107, .14), transparent 38%, rgba(0, 194, 255, .10));
}

/* ── 3. Hero Greeting Block ── */
.hero-greeting-block {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  margin: 12px 0 10px;
  flex-wrap: wrap;
}

.hero-text {
  flex: 1;
  min-width: 0;
}

.hero-greeting-label {
  display: block;
  font-size: clamp(18px, 4.5vw, 22px);
  font-weight: 900;
  color: var(--hr-text, #E8F4FF);
  margin-bottom: 4px;
}

.hero-greeting-block p {
  margin: 0;
  font-size: 13px;
  color: var(--hr-muted, #9CB4D4);
  line-height: 1.6;
}

/* ── 4. Live Clock ── */
.hero-live-clock {
  text-align: center;
  min-width: 80px;
  padding: 10px 14px;
  border-radius: 16px;
  background: rgba(0, 194, 255, .08);
  border: 1px solid rgba(0, 194, 255, .22);
  backdrop-filter: blur(8px);
  flex-shrink: 0;
  transition: border-color var(--hr102-transition);
}

.hero-live-clock strong {
  display: block;
  font-size: clamp(20px, 5vw, 26px);
  font-weight: 900;
  color: #00C2FF;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  direction: ltr;
}

.hero-live-clock small {
  display: block;
  font-size: 11px;
  color: var(--hr-muted, #9CB4D4);
  margin-top: 4px;
  white-space: nowrap;
}

/* ── 5. Hero Chips ── */
.hero-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
}

.hero-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 11px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  border: 1px solid rgba(255, 255, 255, .12);
  background: rgba(255, 255, 255, .07);
  color: var(--hr-soft, #C9DAF3);
  white-space: nowrap;
}

.hero-chip.success {
  border-color: rgba(0, 214, 143, .42);
  background: rgba(0, 214, 143, .12);
  color: #B9FFE9;
}

.hero-chip.warning {
  border-color: rgba(255, 176, 32, .42);
  background: rgba(255, 176, 32, .12);
  color: #FFE5AD;
}

.hero-chip.holiday {
  border-color: rgba(139, 92, 246, .42);
  background: rgba(139, 92, 246, .12);
  color: #E9D5FF;
}

.hero-chip.info {
  border-color: rgba(0, 194, 255, .38);
  background: rgba(0, 194, 255, .10);
  color: #BAE6FF;
}

.hero-chip.urgent {
  border-color: rgba(255, 59, 107, .48);
  background: rgba(255, 59, 107, .14);
  color: #FFD0DC;
}

.hero-chip.success-soft {
  border-color: rgba(0, 214, 143, .28);
  background: rgba(0, 214, 143, .07);
  color: #A7F3D0;
}

/* ── 6. Urgent Card ── */
.hr-urgent-card {
  border-color: rgba(255, 59, 107, .42) !important;
  background: linear-gradient(135deg, rgba(255, 59, 107, .08), rgba(7, 16, 30, .96)) !important;
  position: relative;
  overflow: hidden;
}

.hr-urgent-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: linear-gradient(90deg, #FF3B6B, #FF8C00);
  opacity: .9;
}

.hr-urgent-header {
  display: flex;
  gap: 14px;
  align-items: flex-start;
}

.hr-urgent-icon {
  font-size: 28px;
  line-height: 1;
  flex-shrink: 0;
  margin-top: 2px;
}

/* ── 7. Punch Row with Type Indicator ── */
.hr-punch-row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  position: relative;
}

.hr-punch-type-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
  margin-top: 5px;
  background: rgba(0, 214, 143, .8);
  box-shadow: 0 0 8px rgba(0, 214, 143, .4);
}

.hr-punch-row[data-punch-type="out"] .hr-punch-type-dot {
  background: rgba(255, 59, 107, .8);
  box-shadow: 0 0 8px rgba(255, 59, 107, .4);
}

/* ── 8. Punch CTA Glow State ── */
.punch-cta-glow {
  border-color: rgba(255, 176, 32, .44) !important;
  background: linear-gradient(135deg, rgba(255, 176, 32, .06), rgba(7, 16, 30, .96)) !important;
  animation: punchCtaPulse 2.4s ease-in-out infinite;
}

@keyframes punchCtaPulse {

  0%,
  100% {
    box-shadow: 0 0 0 0 rgba(255, 176, 32, .0), var(--shadow-soft, none);
  }

  50% {
    box-shadow: 0 0 24px rgba(255, 176, 32, .18), var(--shadow-soft, none);
  }
}

.punch-cta-glow::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, #FFB020, transparent);
  animation: punchSweep 2.4s ease-in-out infinite;
}

@keyframes punchSweep {
  0% {
    transform: translateX(-100%);
    opacity: .6;
  }

  100% {
    transform: translateX(100%);
    opacity: 0;
  }
}

/* ── 9. Stats Grid ── */
.home-stats-grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 10px !important;
}

@media (min-width: 480px) {
  .home-stats-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }
}

@media (min-width: 700px) {
  .home-stats-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  }
}

/* ── 10. HR Pulse Animation ── */
@keyframes hrPulse {

  0%,
  100% {
    opacity: 1;
    transform: scale(1);
  }

  50% {
    opacity: .7;
    transform: scale(1.06);
  }
}

.hr-pulse {
  animation: hrPulse 1.4s ease-in-out infinite;
}

/* ── 11. Permissions Row ── */
.hr-permissions-row {
  flex-wrap: wrap;
  gap: 8px;
  padding: 10px 14px;
  border-radius: 14px;
  background: rgba(0, 0, 0, .18);
  border: 1px solid rgba(255, 255, 255, .06);
}

/* ── 12. Admin Dashboard Improvements ── */
.executive-dashboard .metric {
  background:
    radial-gradient(circle at 18% 14%, rgba(0, 194, 255, .10), transparent 38%),
    var(--panel) !important;
  border: 1px solid rgba(0, 194, 255, .16) !important;
  transition: transform var(--hr102-transition), box-shadow var(--hr102-transition), border-color var(--hr102-transition) !important;
}

.executive-dashboard .metric:hover {
  border-color: rgba(0, 194, 255, .36) !important;
  transform: translateY(-3px) !important;
  box-shadow: 0 14px 36px rgba(0, 80, 200, .18) !important;
}

/* Metric card number animation on hover */
.executive-dashboard .metric strong {
  background: linear-gradient(135deg, #fff, #00C2FF);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 8px rgba(0, 194, 255, .22));
}

/* ── 13. Admin Topbar Enhancement ── */
.topbar {
  position: sticky !important;
  top: 0 !important;
  z-index: 30 !important;
}

/* ── 14. Sidebar Nav Item Improvements ── */
.nav button {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 11px 14px !important;
  border-radius: 12px !important;
  margin: 2px 8px !important;
  border: 1px solid transparent !important;
  transition: all var(--hr102-transition) !important;
  min-height: 44px !important;
}

.nav button.is-active {
  background: linear-gradient(135deg, rgba(0, 194, 255, .14), rgba(26, 110, 255, .12)) !important;
  border-color: rgba(0, 194, 255, .38) !important;
  box-shadow: inset -3px 0 0 rgba(0, 194, 255, .7) !important;
  color: #E8F4FF !important;
  font-weight: 800 !important;
}

.nav button:hover:not(.is-active) {
  background: rgba(0, 194, 255, .06) !important;
  border-color: rgba(0, 194, 255, .16) !important;
  transform: translateX(-1px) !important;
}

/* ── 15. Admin Shell Panel ── */
.admin-shell .main,
.admin-shell main {
  animation: hr102PageIn .24s ease both;
}

@keyframes hr102PageIn {
  from {
    opacity: 0;
    transform: translateY(8px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ── 16. Metric Grid Color Variants ── */
.metric-grid .metric:nth-child(4n+1) .metric-icon,
.metric-grid .metric:nth-child(4n+1) strong {
  color: #00C2FF !important;
  -webkit-text-fill-color: #00C2FF !important;
}

.metric-grid .metric:nth-child(4n+2) .metric-icon,
.metric-grid .metric:nth-child(4n+2) strong {
  color: #00D68F !important;
  -webkit-text-fill-color: #00D68F !important;
}

.metric-grid .metric:nth-child(4n+3) .metric-icon,
.metric-grid .metric:nth-child(4n+3) strong {
  color: #FFB020 !important;
  -webkit-text-fill-color: #FFB020 !important;
}

.metric-grid .metric:nth-child(4n+4) .metric-icon,
.metric-grid .metric:nth-child(4n+4) strong {
  color: #FF3B6B !important;
  -webkit-text-fill-color: #FF3B6B !important;
}

/* ── 17. Table Sticky Header with Gradient ── */
thead th {
  background: rgba(6, 14, 30, .97) !important;
  border-bottom: 2px solid rgba(0, 194, 255, .18) !important;
}

thead th:first-child {
  border-radius: 0 8px 0 0;
}

thead th:last-child {
  border-radius: 8px 0 0 0;
}

/* ── 18. Attendance List Row Color by Status ── */
.employee-list-item[data-status="PRESENT"],
.employee-list-item[data-status="CHECK_IN"] {
  border-inline-start: 3px solid #00D68F !important;
  padding-inline-start: 12px;
}

.employee-list-item[data-status="ABSENT"] {
  border-inline-start: 3px solid #FF3B6B !important;
  padding-inline-start: 12px;
}

.employee-list-item[data-status="LATE"] {
  border-inline-start: 3px solid #FFB020 !important;
  padding-inline-start: 12px;
}

/* ── 19. Button States ── */
.button.primary {
  background: linear-gradient(135deg, #00C2FF 0%, #1A6EFF 60%, #3B4EFF 100%) !important;
  border-color: rgba(0, 194, 255, .5) !important;
  color: #031022 !important;
  font-weight: 900 !important;
  box-shadow: 0 6px 20px rgba(0, 80, 200, .28) !important;
  letter-spacing: 0 !important;
}

.button.primary:hover:not([disabled]) {
  background: linear-gradient(135deg, #22DAFF 0%, #2B82FF 60%, #4B5EFF 100%) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 10px 30px rgba(0, 80, 200, .38) !important;
}

.button.primary:active:not([disabled]) {
  transform: translateY(0) !important;
  box-shadow: 0 4px 12px rgba(0, 80, 200, .22) !important;
}

.button.primary.full {
  border-radius: 16px !important;
}

/* ── 20. Better Form Controls ── */
input,
select,
textarea {
  transition: border-color var(--hr102-transition), box-shadow var(--hr102-transition) !important;
}

input:focus,
select:focus,
textarea:focus {
  border-color: #00C2FF !important;
  box-shadow: 0 0 0 4px rgba(0, 194, 255, .14), inset 0 1px 0 rgba(0, 194, 255, .06) !important;
  background: rgba(5, 10, 26, .82) !important;
}

label {
  font-size: 13px !important;
  font-weight: 800 !important;
  color: var(--muted) !important;
  letter-spacing: 0 !important;
}

/* ── 21. Login Screen ── */
.login-screen {
  background:
    radial-gradient(circle at 25% 12%, rgba(0, 194, 255, .16), transparent 35%),
    radial-gradient(circle at 78% 85%, rgba(139, 92, 246, .12), transparent 30%),
    #050A1A !important;
}

.login-panel {
  background: linear-gradient(180deg, rgba(11, 22, 40, .98), rgba(7, 16, 30, .99)) !important;
  border: 1px solid rgba(0, 194, 255, .20) !important;
  box-shadow: 0 0 0 1px rgba(0, 194, 255, .04), 0 32px 90px rgba(0, 0, 0, .50) !important;
}

.login-panel h1 {
  background: linear-gradient(90deg, #00C2FF, #1A6EFF);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* ── 22. Executive Tabs ── */
.executive-tabs button.is-active {
  background: linear-gradient(135deg, #00C2FF, #1A6EFF) !important;
  color: #031022 !important;
  font-weight: 900 !important;
  box-shadow: 0 4px 18px rgba(0, 80, 200, .30) !important;
}

/* ── 23. Panel Head Improvements ── */
.panel-head h2 {
  font-size: clamp(16px, 2.2vw, 20px) !important;
  font-weight: 800 !important;
}

.panel-head p {
  font-size: 13px !important;
  line-height: 1.65 !important;
  max-width: 680px !important;
}

/* ── 24. Compact Metric Badges (Quick Actions) ── */
.compact-metric-badge,
.compactMetricCard {
  position: relative;
  overflow: hidden;
  min-height: 98px !important;
  border-radius: 18px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  padding: clamp(12px, 2vw, 16px) !important;
  gap: 6px !important;
  cursor: pointer !important;
  transition: transform var(--hr102-transition), box-shadow var(--hr102-transition), border-color var(--hr102-transition) !important;
}

.compact-metric-badge::after,
.compactMetricCard::after {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  background: linear-gradient(135deg, rgba(0, 194, 255, .12), transparent 50%);
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--hr102-transition);
}

.compact-metric-badge:hover::after,
.compactMetricCard:hover::after {
  opacity: 1;
}

.compact-metric-badge:hover,
.compactMetricCard:hover {
  transform: translateY(-3px) !important;
  border-color: rgba(0, 194, 255, .36) !important;
  box-shadow: 0 10px 28px rgba(0, 80, 200, .20) !important;
}

.compact-metric-badge:active,
.compactMetricCard:active {
  transform: translateY(-1px) scale(.98) !important;
  transition-duration: .08s !important;
}

/* Icon in compact metric */
.compact-metric-badge>strong:first-child,
.compactMetricCard>strong:first-child {
  font-size: 22px !important;
  line-height: 1 !important;
  filter: drop-shadow(0 2px 6px rgba(0, 194, 255, .20));
}

/* Number in compact metric */
.compact-metric-badge>[data-count],
.compact-metric-badge>b,
.compactMetricCard>b {
  font-size: clamp(20px, 4vw, 26px) !important;
  font-weight: 900 !important;
  color: #E8F4FF !important;
  line-height: 1 !important;
}

/* Label in compact metric */
.compact-metric-badge>small,
.compactMetricCard>small {
  font-size: 11px !important;
  color: var(--hr-muted, #9CB4D4) !important;
  line-height: 1.3 !important;
}

/* ── 25. Employee List Item Improvements ── */
.employee-list-item {
  display: flex !important;
  align-items: flex-start !important;
  gap: 12px !important;
  padding: 12px 14px !important;
  border-radius: 14px !important;
  border: 1px solid rgba(255, 255, 255, .06) !important;
  background: rgba(10, 22, 42, .6) !important;
  transition: background var(--hr102-transition), border-color var(--hr102-transition) !important;
  margin-bottom: 8px !important;
}

.employee-list-item:last-child {
  margin-bottom: 0 !important;
}

.employee-list-item:hover {
  background: rgba(0, 194, 255, .06) !important;
  border-color: rgba(0, 194, 255, .22) !important;
}

.employee-list-item>div:first-child strong {
  display: block;
  font-size: 14px;
  font-weight: 800;
  color: #E8F4FF;
  margin-bottom: 3px;
}

.employee-list-item>div:first-child span {
  display: block;
  font-size: 12px;
  color: var(--hr-muted);
}

.employee-list-item .list-item-side {
  margin-inline-start: auto;
  flex-shrink: 0;
}

/* ── 26. Avatar Improvements ── */
.person-avatar,
.avatar {
  border-radius: 50% !important;
  object-fit: cover !important;
  border: 2px solid rgba(0, 194, 255, .22) !important;
  transition: border-color var(--hr102-transition) !important;
}

.person-avatar:hover,
.avatar:hover {
  border-color: rgba(0, 194, 255, .50) !important;
}

/* Fallback avatar text */
.avatar.fallback,
.avatar-initials {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-weight: 900 !important;
  color: #00C2FF !important;
  background: rgba(0, 194, 255, .10) !important;
  border: 2px solid rgba(0, 194, 255, .24) !important;
  font-size: 13px !important;
}

/* ── 27. Executive Portal ── */
.executive-shell {
  isolation: isolate;
}

.executive-topbar {
  background: rgba(5, 10, 26, .94) !important;
  border: 1px solid rgba(0, 194, 255, .18) !important;
  border-radius: 20px !important;
  box-shadow: 0 8px 28px rgba(0, 0, 0, .28) !important;
  backdrop-filter: blur(12px) !important;
}

.executive-tabs {
  background: rgba(5, 10, 26, .72) !important;
  border: 1px solid rgba(0, 194, 255, .14) !important;
  border-radius: 16px !important;
  gap: 4px !important;
  padding: 4px !important;
}

.executive-tabs button {
  border-radius: 12px !important;
  padding: 10px 16px !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  transition: all var(--hr102-transition) !important;
}

.executive-tabs button:hover:not(.is-active) {
  background: rgba(0, 194, 255, .08) !important;
  color: #E8F4FF !important;
}

/* ── 28. Operations Gate ── */
.gate {
  position: relative;
  overflow: hidden;
}

.gate .kicker {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 14px;
  border-radius: 999px;
  border: 1px solid rgba(0, 194, 255, .38);
  background: rgba(0, 194, 255, .1);
  color: #00C2FF;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .07em;
  margin-bottom: 6px;
}

.gate .lead {
  display: block !important;
  color: var(--hr-muted) !important;
  font-size: 13px !important;
  margin-top: 6px !important;
  line-height: 1.7 !important;
}

.gate .target small {
  display: block !important;
  font-size: 11px !important;
  color: var(--hr-muted) !important;
  margin-top: 5px !important;
  line-height: 1.55 !important;
  text-align: center !important;
}

.gate .target.is-active small {
  color: rgba(186, 230, 255, .85) !important;
}

/* ── 29. Tooltip via data-tip ── */
[data-tip] {
  position: relative;
}

[data-tip]::after {
  content: attr(data-tip);
  position: absolute;
  inset-block-end: calc(100% + 8px);
  inset-inline-start: 50%;
  transform: translateX(-50%);
  min-width: max-content;
  max-width: 200px;
  padding: 7px 12px;
  border-radius: 10px;
  background: rgba(6, 14, 30, .96);
  border: 1px solid rgba(0, 194, 255, .22);
  color: #E8F4FF;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.45;
  text-align: center;
  pointer-events: none;
  opacity: 0;
  transform: translateX(-50%) translateY(4px);
  transition: opacity .18s ease, transform .18s ease;
  z-index: 9999;
  white-space: normal;
  word-break: keep-all;
}

[data-tip]:hover::after,
[data-tip]:focus-visible::after {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* ── 30. Scrollbar Global Refinement ── */
* {
  scrollbar-width: thin;
  scrollbar-color: rgba(0, 194, 255, .22) transparent;
}

*::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

*::-webkit-scrollbar-track {
  background: transparent;
}

*::-webkit-scrollbar-thumb {
  background: rgba(26, 42, 74, .8);
  border-radius: 999px;
  border: 2px solid transparent;
  background-clip: content-box;
}

*::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 194, 255, .4) content-box;
}

/* ── 31. Mobile Refinements ── */
@media (max-width: 640px) {
  .hero-live-clock {
    padding: 8px 12px;
  }

  .hero-live-clock strong {
    font-size: 20px;
  }

  .hr-urgent-header {
    flex-direction: column;
    gap: 8px;
  }

  .hr-urgent-icon {
    font-size: 24px;
  }

  .hero-meta {
    gap: 5px;
  }

  .hero-chip {
    font-size: 11px;
    padding: 4px 9px;
  }

  .compact-metric-badge,
  .compactMetricCard {
    min-height: 88px !important;
  }
}

@media (max-width: 380px) {
  .home-stats-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .hero-greeting-block {
    flex-direction: column;
    gap: 10px;
  }

  .hero-live-clock {
    width: 100%;
    text-align: right;
  }
}

/* Employee more drawer: vertical, readable list */
body.employee-portal .more-drawer {
  width: min(calc(100vw - 28px), 360px) !important;
}

body.employee-portal .more-drawer-body {
  display: grid !important;
  gap: 10px !important;
  overflow-y: auto !important;
  max-height: calc(100svh - var(--v108-nav-h) - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px) - 86px) !important;
  padding: 8px 12px 14px !important;
}

body.employee-portal .more-drawer-grid {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 8px !important;
  margin: 0 !important;
}

body.employee-portal .more-drawer-item {
  width: 100% !important;
  min-height: 48px !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 10px !important;
  padding: 10px 12px !important;
  border-radius: 13px !important;
  text-align: start !important;
}

body.employee-portal .more-drawer-item .di-icon {
  width: 30px !important;
  min-width: 30px !important;
  height: 30px !important;
  display: grid !important;
  place-items: center !important;
  font-size: 18px !important;
  line-height: 1 !important;
}

body.employee-portal .more-drawer-item .di-label {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  font-size: 12px !important;
  line-height: 1.35 !important;
  font-weight: 800 !important;
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
}

body.employee-portal .more-drawer-section-label {
  padding: 4px 2px 0 !important;
  font-size: 10px !important;
  line-height: 1.4 !important;
  text-align: start !important;
  color: rgba(186, 230, 255, .72) !important;
}

/* Clear, word-separated address display for punch/location screens */
body.employee-portal .detailed-address-block {
  display: grid !important;
  gap: 8px !important;
  margin: 10px 0 !important;
  padding: 12px !important;
  border: 1px solid rgba(56, 199, 244, .24) !important;
  border-radius: 14px !important;
  background: rgba(7, 17, 34, .72) !important;
}

body.employee-portal .detailed-address-title {
  color: rgba(186, 230, 255, .78) !important;
  font-size: 11px !important;
  font-weight: 900 !important;
  line-height: 1.4 !important;
}

body.employee-portal .detailed-address-words {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 7px !important;
  align-items: center !important;
}

body.employee-portal .detailed-address-words span {
  display: inline-flex !important;
  align-items: center !important;
  min-height: 28px !important;
  padding: 5px 9px !important;
  border: 1px solid rgba(148, 163, 184, .22) !important;
  border-radius: 9px !important;
  background: rgba(15, 23, 42, .7) !important;
  color: #f8fbff !important;
  font-size: 13px !important;
  font-weight: 900 !important;
  line-height: 1.35 !important;
  word-break: keep-all !important;
}

/* SAP-like request approval flow */
body.employee-portal .sap-request-item {
  align-items: stretch !important;
}

body.employee-portal .sap-flow {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 6px !important;
  margin-top: 10px !important;
}

body.employee-portal .sap-step {
  position: relative !important;
  display: grid !important;
  gap: 3px !important;
  min-height: 70px !important;
  padding: 9px 7px !important;
  border: 1px solid rgba(148, 163, 184, .22) !important;
  border-radius: 12px !important;
  background: rgba(15, 23, 42, .68) !important;
}

body.employee-portal .sap-index {
  width: 22px !important;
  height: 22px !important;
  display: grid !important;
  place-items: center !important;
  border-radius: 999px !important;
  background: rgba(148, 163, 184, .18) !important;
  color: #e5f1ff !important;
  font-size: 11px !important;
  font-weight: 900 !important;
}

body.employee-portal .sap-step strong {
  color: #f8fbff !important;
  font-size: 11px !important;
  line-height: 1.25 !important;
}

body.employee-portal .sap-step small {
  color: rgba(203, 213, 225, .78) !important;
  font-size: 9.5px !important;
  line-height: 1.25 !important;
}

body.employee-portal .sap-step.done {
  border-color: rgba(73, 211, 154, .42) !important;
  background: rgba(6, 78, 59, .22) !important;
}

body.employee-portal .sap-step.active {
  border-color: rgba(56, 199, 244, .55) !important;
  background: rgba(8, 145, 178, .24) !important;
}

body.employee-portal .sap-step.late {
  border-color: rgba(245, 158, 11, .55) !important;
  background: rgba(120, 53, 15, .26) !important;
}

body.employee-portal .sap-step.rejected {
  border-color: rgba(248, 113, 113, .55) !important;
  background: rgba(127, 29, 29, .24) !important;
}

body.employee-portal .sap-request-item.is-escalated,
body.employee-portal .sap-escalation-panel {
  border-color: rgba(245, 158, 11, .42) !important;
  box-shadow: 0 18px 44px rgba(245, 158, 11, .08) !important;
}

/* Unified action center and notifications */
body.employee-portal .action-center-unified .panel-head {
  align-items: center !important;
  gap: 12px !important;
}

body.employee-portal .action-required-list .employee-list-item {
  border-color: rgba(245, 158, 11, .28) !important;
  background: linear-gradient(135deg, rgba(120, 53, 15, .18), rgba(15, 23, 42, .72)) !important;
}

body.employee-portal .notifications-unified-list .employee-list-item.is-unread {
  border-color: rgba(56, 199, 244, .34) !important;
  background: linear-gradient(135deg, rgba(8, 145, 178, .18), rgba(15, 23, 42, .72)) !important;
}

body.employee-portal .notifications-unified-list .employee-list-item.is-unread strong::after {
  content: " جديد";
  display: inline-flex;
  margin-inline-start: 6px;
  padding: 2px 6px;
  border-radius: 999px;
  background: rgba(56, 199, 244, .18);
  color: #bae6fd;
  font-size: 10px;
  font-weight: 900;
}

/* Home: explicit punch and live location actions */
body.employee-portal .home-punch-actions {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 10px !important;
}

body.employee-portal .home-punch-actions .button {
  width: 100% !important;
  min-height: 56px !important;
  justify-content: center !important;
  font-size: 15px !important;
  font-weight: 900 !important;
  line-height: 1.35 !important;
  white-space: normal !important;
}

body.employee-portal .home-punch-checkin {
  border-color: rgba(73, 211, 154, .46) !important;
  background: linear-gradient(135deg, rgba(6, 95, 70, .96), rgba(8, 145, 178, .88)) !important;
}

body.employee-portal .home-punch-checkout {
  border-color: rgba(248, 113, 113, .42) !important;
  background: linear-gradient(135deg, rgba(127, 29, 29, .92), rgba(88, 28, 135, .76)) !important;
}

body.employee-portal .home-location-send {
  border-color: rgba(56, 199, 244, .36) !important;
  background: rgba(15, 23, 42, .78) !important;
}

@media (min-width: 700px) {
  body.employee-portal .home-punch-actions {
    grid-template-columns: 1fr 1fr 1fr !important;
  }
}

@media (max-width: 430px) {
  body.employee-portal .sap-flow {
    grid-template-columns: 1fr 1fr !important;
  }
}

/* ── 32. Reduced Motion ── */
@media (prefers-reduced-motion: reduce) {

  .hr-pulse,
  .punch-cta-glow,
  .punch-cta-glow::before,
  .hero-logo-float,
  .hrPulse {
    animation: none !important;
  }
}

/* ── 33. PWA Install Banner ── */
.hr102-install-banner {
  position: fixed;
  bottom: calc(16px + env(safe-area-inset-bottom));
  inset-inline: 16px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 13px 16px;
  border-radius: 18px;
  background: rgba(10, 22, 45, .97);
  border: 1px solid rgba(0, 194, 255, .32);
  box-shadow: 0 16px 50px rgba(0, 0, 0, .40);
  color: #E8F4FF;
  font-size: 13px;
  font-weight: 700;
  z-index: 99998;
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .24s ease, transform .24s cubic-bezier(.34, 1.56, .64, 1);
}

.hr102-install-banner.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.hr102-install-banner>span {
  flex: 1;
}

.hr102-install-btn {
  min-height: 34px;
  padding: 0 14px;
  border-radius: 10px;
  border: 1px solid rgba(0, 194, 255, .48);
  background: linear-gradient(135deg, rgba(0, 194, 255, .22), rgba(26, 110, 255, .22));
  color: #00C2FF;
  font: 700 13px/1 inherit;
  cursor: pointer;
  white-space: nowrap;
  transition: background .18s, box-shadow .18s;
}

.hr102-install-btn:hover {
  background: linear-gradient(135deg, rgba(0, 194, 255, .36), rgba(26, 110, 255, .36));
  box-shadow: 0 4px 14px rgba(0, 80, 200, .22);
}

.hr102-install-dismiss {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, .12);
  background: rgba(255, 255, 255, .06);
  color: var(--hr-muted);
  font: 700 13px/1 inherit;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background .16s, color .16s;
}

.hr102-install-dismiss:hover {
  background: rgba(255, 59, 107, .16);
  border-color: rgba(255, 59, 107, .36);
  color: #FFD0DC;
}

/* ── 34. Slow Connection Warning ── */
.hr102-slow-conn {
  position: fixed;
  top: calc(12px + env(safe-area-inset-top));
  inset-inline: 16px;
  padding: 10px 16px;
  border-radius: 14px;
  background: rgba(255, 176, 32, .14);
  border: 1px solid rgba(255, 176, 32, .40);
  color: #FFE5AD;
  font-size: 13px;
  font-weight: 700;
  text-align: center;
  z-index: 99997;
  opacity: 0;
  transform: translateY(-110%);
  transition: opacity .22s ease, transform .22s ease;
}

.hr102-slow-conn.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ── 35. Better Badge Pill Variants ── */
.pill,
.badge {
  font-variant-numeric: tabular-nums;
}

.pill.active,
.pill.live {
  animation: hrPulse 1.6s ease-in-out infinite;
}

/* ── 36. Panel kicker improvements ── */
.panel-kicker {
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  padding: 4px 12px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(0, 194, 255, .28) !important;
  background: rgba(0, 194, 255, .08) !important;
  color: #00C2FF !important;
  font-size: 11px !important;
  font-weight: 900 !important;
  letter-spacing: .06em !important;
  margin-bottom: 8px !important;
}

/* ── 37. Sort Arrow Styling ── */
.sort-arrow {
  user-select: none;
  transition: opacity .16s, color .16s;
}

[aria-sort="ascending"] .sort-arrow {
  color: #00C2FF;
  opacity: 1;
}

[aria-sort="descending"] .sort-arrow {
  color: #00C2FF;
  opacity: 1;
}

/* ── 38. Focus Ring on Cards ── */
.compact-metric-badge:focus-visible,
.compactMetricCard:focus-visible,
.person-card:focus-visible,
.employee-card:focus-visible,
.panel:focus-visible {
  outline: 2px solid rgba(0, 194, 255, .5) !important;
  outline-offset: 2px !important;
}

/* ── from v103-mobile-nav.css ─────────────────────────────────── */
/* ──────────────────────────────────────────────────────────────
   EMPLOYEE BOTTOM NAV — vibrant, clear, high-contrast
   ────────────────────────────────────────────────────────────── */
body.employee-portal .employee-bottom-nav {
  position: fixed;
  inset-inline: 0;
  bottom: 0;
  z-index: 200;
  width: 100%;
  height: calc(68px + env(safe-area-inset-bottom, 0px));
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  align-items: stretch;
  padding-bottom: env(safe-area-inset-bottom, 0px);
  background: linear-gradient(180deg,
      rgba(4, 12, 26, 0.82) 0%,
      rgba(4, 12, 26, 0.97) 100%);
  backdrop-filter: blur(24px) saturate(160%);
  -webkit-backdrop-filter: blur(24px) saturate(160%);
  border-top: 1px solid rgba(56, 199, 244, 0.20);
  box-shadow:
    0 -1px 0 rgba(56, 199, 244, 0.08),
    0 -8px 32px rgba(0, 0, 0, 0.55),
    inset 0 1px 0 rgba(255, 255, 255, 0.04);
  overflow: visible;
  gap: 0;
}

body.employee-portal .employee-bottom-nav button {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 8px 4px 10px;
  border: none;
  background: transparent;
  color: rgba(148, 172, 200, 0.75);
  font: inherit;
  font-size: 10.5px;
  font-weight: 700;
  cursor: pointer;
  transition: color 0.18s, transform 0.15s;
  overflow: hidden;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

body.employee-portal .employee-bottom-nav button::before {
  content: '';
  position: absolute;
  top: 6px;
  left: 50%;
  transform: translateX(-50%) scaleX(0);
  width: 28px;
  height: 3px;
  border-radius: 2px;
  background: var(--brand, #38c7f4);
  transition: transform 0.22s cubic-bezier(.34, 1.56, .64, 1);
}

body.employee-portal .employee-bottom-nav button strong {
  font-size: 22px;
  line-height: 1;
  display: block;
  transition: transform 0.18s cubic-bezier(.34, 1.56, .64, 1);
  filter: grayscale(0.3);
}

body.employee-portal .employee-bottom-nav button span {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.01em;
  line-height: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
  opacity: 0.8;
}

/* Active state — glowing pill indicator */
body.employee-portal .employee-bottom-nav button.is-active {
  color: var(--brand, #38c7f4);
}

body.employee-portal .employee-bottom-nav button.is-active::before {
  transform: translateX(-50%) scaleX(1);
}

body.employee-portal .employee-bottom-nav button.is-active strong {
  transform: translateY(-2px) scale(1.12);
  filter: grayscale(0) drop-shadow(0 2px 6px rgba(56, 199, 244, .5));
}

body.employee-portal .employee-bottom-nav button.is-active span {
  color: var(--brand, #38c7f4);
  opacity: 1;
}

/* Punch button — special accent */
body.employee-portal .employee-bottom-nav button[data-route="punch"].is-active {
  color: #6effc8;
}

body.employee-portal .employee-bottom-nav button[data-route="punch"].is-active::before {
  background: #6effc8;
}

body.employee-portal .employee-bottom-nav button[data-route="punch"].is-active strong {
  filter: grayscale(0) drop-shadow(0 2px 8px rgba(73, 211, 154, .6));
}

/* Action-center — orange accent */
body.employee-portal .employee-bottom-nav button[data-route="action-center"].is-active {
  color: #ffb347;
}

body.employee-portal .employee-bottom-nav button[data-route="action-center"].is-active::before {
  background: #ffb347;
}

/* Hover + press */
body.employee-portal .employee-bottom-nav button:hover {
  color: rgba(200, 225, 245, 0.90);
}

body.employee-portal .employee-bottom-nav button:active {
  transform: scale(0.92);
}

/* ──────────────────────────────────────────────────────────────
   MORE DRAWER — full-screen beautiful menu
   ────────────────────────────────────────────────────────────── */
.more-drawer-overlay {
  position: fixed;
  inset: 0;
  z-index: 300;
  background: rgba(2, 8, 20, 0.72);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  opacity: 0;
  transition: opacity 0.25s;
  pointer-events: none;
}

.more-drawer-overlay.is-open {
  opacity: 1;
  pointer-events: auto;
}

.more-drawer {
  position: fixed;
  inset-inline: 0;
  bottom: 0;
  z-index: 301;
  max-height: 88svh;
  background: linear-gradient(180deg, rgba(6, 14, 30, 0.98) 0%, rgba(4, 10, 22, 1) 100%);
  border-top: 1px solid rgba(56, 199, 244, 0.22);
  border-radius: 28px 28px 0 0;
  display: flex;
  flex-direction: column;
  transform: translateY(100%);
  transition: transform 0.32s cubic-bezier(.32, 1, .56, 1);
  box-shadow: 0 -20px 60px rgba(0, 0, 0, 0.7);
  overflow: hidden;
}

.more-drawer.is-open {
  transform: translateY(0);
}

.more-drawer-handle {
  width: 40px;
  height: 4px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.18);
  margin: 12px auto 0;
  flex-shrink: 0;
}

.more-drawer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 20px 10px;
  flex-shrink: 0;
}

.more-drawer-title {
  font-size: 17px;
  font-weight: 900;
  color: #fff;
}

.more-drawer-close {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: rgba(200, 220, 240, 0.8);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  cursor: pointer;
  transition: background 0.15s;
  flex-shrink: 0;
}

.more-drawer-close:hover {
  background: rgba(255, 255, 255, 0.14);
}

.more-drawer-body {
  flex: 1;
  overflow-y: auto;
  padding: 8px 16px calc(24px + env(safe-area-inset-bottom, 0px));
  -webkit-overflow-scrolling: touch;
}

/* More drawer grid */
.more-drawer-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-bottom: 16px;
}

@media (min-width: 400px) {
  .more-drawer-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

.more-drawer-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  padding: 16px 8px 12px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 18px;
  cursor: pointer;
  color: rgba(200, 220, 240, 0.85);
  font: inherit;
  transition: background 0.18s, border-color 0.18s, transform 0.12s;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

.more-drawer-item:hover {
  background: rgba(56, 199, 244, 0.08);
  border-color: rgba(56, 199, 244, 0.22);
  color: #b8e8ff;
}

.more-drawer-item:active {
  transform: scale(0.94);
}

.more-drawer-item .di-icon {
  font-size: 26px;
  line-height: 1;
  display: block;
  transition: transform 0.15s;
}

.more-drawer-item:hover .di-icon {
  transform: scale(1.12);
}

.more-drawer-item .di-label {
  font-size: 10.5px;
  font-weight: 800;
  text-align: center;
  line-height: 1.25;
}

.more-drawer-item.is-active {
  background: linear-gradient(135deg, rgba(56, 199, 244, 0.18), rgba(56, 199, 244, 0.08));
  border-color: rgba(56, 199, 244, 0.35);
  color: var(--brand, #38c7f4);
}

/* Section label inside drawer */
.more-drawer-section-label {
  font-size: 10px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: rgba(148, 172, 200, 0.45);
  padding: 12px 4px 6px;
}

/* ──────────────────────────────────────────────────────────────
   ADMIN SIDEBAR — higher contrast, clearer navigation
   ────────────────────────────────────────────────────────────── */
.sidebar {
  --sidebar-bg: rgba(3, 9, 22, 0.97);
  --sidebar-active-bg: rgba(56, 199, 244, 0.12);
  --sidebar-hover-bg: rgba(255, 255, 255, 0.04);
  --sidebar-text: rgba(185, 210, 235, 0.80);
  --sidebar-active-text: #7de8ff;
  --sidebar-border: rgba(56, 199, 244, 0.12);
}

.sidebar-nav,
aside.sidebar {
  background: var(--sidebar-bg) !important;
  border-inline-end: 1px solid var(--sidebar-border) !important;
}

/* Admin nav links — higher contrast */
.sidebar .nav-link,
.sidebar-nav .nav-link {
  color: var(--sidebar-text) !important;
  font-weight: 700;
  padding: 10px 16px !important;
  border-radius: 12px !important;
  margin: 1px 8px !important;
  transition: background 0.15s, color 0.15s, padding-inline-start 0.15s !important;
  border: 1px solid transparent !important;
}

.sidebar .nav-link:hover,
.sidebar-nav .nav-link:hover {
  background: var(--sidebar-hover-bg) !important;
  color: rgba(220, 238, 252, 0.95) !important;
}

.sidebar .nav-link.active,
.sidebar .nav-link[aria-current="page"],
.sidebar-nav .nav-link.active {
  background: var(--sidebar-active-bg) !important;
  color: var(--sidebar-active-text) !important;
  border-color: rgba(56, 199, 244, 0.22) !important;
  box-shadow: inset 3px 0 0 var(--brand, #38c7f4) !important;
  padding-inline-start: 19px !important;
}

/* ──────────────────────────────────────────────────────────────
   ADMIN MOBILE — bottom nav / hamburger
   ────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {

  /* Admin topbar on mobile */
  .topbar,
  .neon-topbar {
    padding-inline: 14px !important;
    height: 56px !important;
    background: rgba(3, 9, 22, 0.97) !important;
    backdrop-filter: blur(20px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
    border-bottom: 1px solid rgba(56, 199, 244, 0.15) !important;
    box-shadow: 0 2px 20px rgba(0, 0, 0, 0.5) !important;
  }

  .topbar .topbar-title,
  .neon-topbar-title {
    font-size: 15px !important;
    font-weight: 900 !important;
  }

  /* Hide desktop sidebar on mobile */
  .sidebar-wrap,
  .sidebar-nav {
    display: none !important;
  }

  /* Content uses full width */
  .content-area,
  .admin-content,
  .main-content {
    margin-inline-start: 0 !important;
    padding: 14px 14px 90px !important;
  }

  /* Admin mobile nav tabs at bottom */
  .admin-mobile-nav {
    position: fixed;
    inset-inline: 0;
    bottom: 0;
    z-index: 200;
    display: flex !important;
    height: calc(62px + env(safe-area-inset-bottom, 0px));
    padding-bottom: env(safe-area-inset-bottom, 0px);
    background: rgba(3, 9, 22, 0.97);
    backdrop-filter: blur(24px) saturate(160%);
    -webkit-backdrop-filter: blur(24px) saturate(160%);
    border-top: 1px solid rgba(56, 199, 244, 0.18);
    box-shadow: 0 -8px 32px rgba(0, 0, 0, 0.6);
  }

  .admin-mobile-nav a,
  .admin-mobile-nav button {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    font-size: 9.5px;
    font-weight: 800;
    color: rgba(148, 172, 200, 0.7);
    text-decoration: none;
    border: none;
    background: transparent;
    cursor: pointer;
    transition: color 0.15s;
    -webkit-tap-highlight-color: transparent;
  }

  .admin-mobile-nav a .mob-icon,
  .admin-mobile-nav button .mob-icon {
    font-size: 20px;
    line-height: 1;
  }

  .admin-mobile-nav a.active,
  .admin-mobile-nav button.active {
    color: #7de8ff;
  }
}

/* ──────────────────────────────────────────────────────────────
   MOBILE-FIRST GLOBAL IMPROVEMENTS
   ────────────────────────────────────────────────────────────── */

/* Touch targets — minimum 44px */
button,
[role="button"],
a,
select,
input[type="checkbox"],
input[type="radio"] {
  min-height: 44px;
}

.button {
  min-height: 46px;
  padding-block: 11px;
}

.button.small {
  min-height: 36px;
  padding-block: 7px;
}

/* Safe area padding for content */
.content-area,
.employee-content-wrap,
.app-content {
  padding-bottom: calc(var(--employee-bottom-nav-height, 86px) + env(safe-area-inset-bottom, 0px) + 16px);
}

/* Prevent text size inflation on iOS */
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

/* Better input on mobile */
input,
select,
textarea {
  font-size: 16px !important;
  /* Prevents iOS auto-zoom */
  border-radius: 12px;
}

@media (min-width: 640px) {

  input,
  select,
  textarea {
    font-size: 14px !important;
  }
}

/* Card touch feedback */
.employee-card,
.panel,
.neon-card {
  -webkit-tap-highlight-color: transparent;
}

.employee-card[data-route],
.quick-action-card {
  cursor: pointer;
  touch-action: manipulation;
}

/* Swipe-friendly scroll areas */
.employee-table-wrap,
.data-table-wrap,
.scroll-x {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
}

/* ──────────────────────────────────────────────────────────────
   LOCATION PAGE — better mobile GPS UX
   ────────────────────────────────────────────────────────────── */
.location-send-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  padding: 32px 20px;
  text-align: center;
}

.location-map-preview {
  width: 100%;
  max-width: 480px;
  aspect-ratio: 16/9;
  border-radius: 20px;
  overflow: hidden;
  border: 1px solid var(--border);
  background: var(--surface);
  position: relative;
}

.location-map-preview iframe {
  width: 100%;
  height: 100%;
  border: none;
}

.location-send-btn {
  width: 100%;
  max-width: 360px;
  min-height: 58px !important;
  font-size: 17px !important;
  border-radius: 18px !important;
  box-shadow: 0 8px 24px rgba(56, 199, 244, 0.28) !important;
}

.location-accuracy-bar {
  width: 100%;
  max-width: 360px;
  background: var(--surface-raised);
  border-radius: 8px;
  height: 6px;
  overflow: hidden;
}

.location-accuracy-fill {
  height: 100%;
  border-radius: 8px;
  background: var(--success);
  transition: width 0.4s ease;
}

/* ──────────────────────────────────────────────────────────────
   NOTIFICATIONS PAGE — improved cards
   ────────────────────────────────────────────────────────────── */
.notif-card {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  margin-bottom: 10px;
  transition: background 0.15s;
  cursor: pointer;
}

.notif-card:hover {
  background: var(--surface-raised);
}

.notif-card.unread {
  border-inline-start: 3px solid var(--brand);
  background: rgba(56, 199, 244, 0.04);
}

.notif-card.urgent {
  border-inline-start: 3px solid var(--danger);
  background: rgba(255, 107, 122, 0.05);
}

.notif-icon {
  width: 42px;
  height: 42px;
  border-radius: 14px;
  background: var(--surface-raised);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  flex-shrink: 0;
}

.notif-body {
  flex: 1;
  min-width: 0;
}

.notif-title {
  font-size: 14px;
  font-weight: 800;
  color: var(--text);
  margin: 0 0 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.notif-text {
  font-size: 12.5px;
  color: var(--muted);
  line-height: 1.45;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.notif-time {
  font-size: 11px;
  color: var(--muted);
  white-space: nowrap;
  flex-shrink: 0;
}

/* ──────────────────────────────────────────────────────────────
   PUNCH / ATTENDANCE PAGE — improved
   ────────────────────────────────────────────────────────────── */
.punch-page-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  padding: 24px 16px;
}

.punch-status-banner {
  width: 100%;
  max-width: 480px;
  padding: 14px 18px;
  border-radius: 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 13px;
  font-weight: 700;
}

.punch-status-banner.checked-in {
  background: rgba(73, 211, 154, 0.10);
  border: 1px solid rgba(73, 211, 154, 0.25);
  color: var(--success);
}

.punch-status-banner.checked-out {
  background: rgba(148, 172, 200, 0.08);
  border: 1px solid rgba(148, 172, 200, 0.18);
  color: var(--muted);
}

.punch-history-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: var(--surface);
  border-radius: 12px;
  font-size: 13px;
}

.punch-history-row .ph-time {
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.punch-history-row .ph-type {
  color: var(--muted);
  font-size: 12px;
}

/* ──────────────────────────────────────────────────────────────
   ACTION CENTER / HOME — improved cards
   ────────────────────────────────────────────────────────────── */
.action-item-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  margin-bottom: 10px;
  cursor: pointer;
  transition: background 0.15s, transform 0.12s;
  -webkit-tap-highlight-color: transparent;
}

.action-item-card:hover {
  background: var(--surface-raised);
}

.action-item-card:active {
  transform: scale(0.98);
}

.action-item-card.urgent {
  border-color: rgba(255, 107, 122, 0.35);
  background: rgba(255, 107, 122, 0.04);
}

.action-item-card .ai-icon {
  width: 46px;
  height: 46px;
  border-radius: 14px;
  background: var(--surface-raised);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  flex-shrink: 0;
}

.action-item-card.urgent .ai-icon {
  background: rgba(255, 107, 122, 0.12);
}

.action-item-card .ai-body {
  flex: 1;
  min-width: 0;
}

.action-item-card .ai-title {
  font-size: 14px;
  font-weight: 800;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.action-item-card .ai-desc {
  font-size: 12px;
  color: var(--muted);
  margin-top: 3px;
}

.action-item-card .ai-arrow {
  color: var(--muted);
  font-size: 16px;
  flex-shrink: 0;
}

/* ──────────────────────────────────────────────────────────────
   PWA INSTALL BANNER — improved
   ────────────────────────────────────────────────────────────── */
.hr102-install-banner {
  position: fixed;
  bottom: calc(var(--employee-bottom-nav-height, 86px) + env(safe-area-inset-bottom, 0px) + 10px);
  inset-inline: 12px;
  z-index: 250;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  background: linear-gradient(135deg, rgba(6, 18, 38, .98), rgba(4, 12, 28, .98));
  border: 1px solid rgba(56, 199, 244, 0.28);
  border-radius: 18px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(56, 199, 244, 0.08);
  font-size: 13px;
  color: rgba(200, 225, 245, 0.9);
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.28s, transform 0.28s;
  pointer-events: none;
}

.hr102-install-banner.is-visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.hr102-install-banner span {
  flex: 1;
  font-weight: 700;
}

.hr102-install-btn {
  padding: 7px 14px;
  background: var(--brand, #38c7f4);
  color: #03101c;
  border: none;
  border-radius: 10px;
  font: inherit;
  font-size: 12px;
  font-weight: 900;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
}

.hr102-install-dismiss {
  width: 28px;
  height: 28px;
  background: rgba(255, 255, 255, 0.08);
  border: none;
  border-radius: 50%;
  color: rgba(200, 225, 245, 0.6);
  font-size: 14px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* ──────────────────────────────────────────────────────────────
   SLOW CONNECTION WARNING
   ────────────────────────────────────────────────────────────── */
.hr102-slow-conn {
  position: fixed;
  top: 0;
  inset-inline: 0;
  z-index: 500;
  padding: 10px 16px;
  background: rgba(247, 163, 40, 0.95);
  color: #1a0a00;
  font-size: 13px;
  font-weight: 800;
  text-align: center;
  opacity: 0;
  transform: translateY(-100%);
  transition: opacity 0.25s, transform 0.25s;
}

.hr102-slow-conn.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ──────────────────────────────────────────────────────────────
   PUSH NOTIFICATION MODAL
   ────────────────────────────────────────────────────────────── */
.push-explain-modal {
  text-align: center !important;
}

.push-explain-icon {
  font-size: 52px;
  margin-bottom: 12px;
  display: block;
  animation: iconBounce 0.5s cubic-bezier(.34, 1.56, .64, 1);
}

@keyframes iconBounce {
  from {
    transform: scale(0.4);
    opacity: 0;
  }

  to {
    transform: scale(1);
    opacity: 1;
  }
}

.push-explain-list {
  list-style: none;
  padding: 0 4px;
  margin: 0 0 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  text-align: start;
}

.push-explain-list li {
  font-size: 13px;
  color: var(--text-muted, #9aa8bd);
  padding: 8px 12px;
  background: var(--surface-soft, rgba(255, 255, 255, 0.04));
  border-radius: 10px;
  border: 1px solid var(--border, rgba(255, 255, 255, 0.08));
}

/* ──────────────────────────────────────────────────────────────
   RESPONSIVE GRID FIXES
   ────────────────────────────────────────────────────────────── */
@media (max-width: 480px) {

  .panel,
  .employee-card,
  .neon-card {
    border-radius: 18px !important;
    padding: 16px !important;
  }

  h1,
  .page-title {
    font-size: clamp(18px, 5vw, 24px) !important;
  }

  h2 {
    font-size: clamp(15px, 4.5vw, 20px) !important;
  }

  .button {
    font-size: 14px !important;
  }

  .neon-metric-cards-grid,
  .metric-cards-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
  }

  .quick-actions-grid {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 8px !important;
  }
}

@media (max-width: 360px) {

  .neon-metric-cards-grid,
  .metric-cards-grid {
    grid-template-columns: 1fr 1fr !important;
  }
}

/* ──────────────────────────────────────────────────────────────
   ADMIN STAT GRID — tablet/mobile breakpoints
   ────────────────────────────────────────────────────────────── */
@media (max-width: 900px) {

  .neon-metric-cards-grid,
  .metric-cards-grid,
  .admin-stats-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  .admin-row-2col,
  .admin-grid-2col {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 500px) {
  .neon-metric-cards-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
  }
}

/* ── from v104-royal-blue-overhaul.css ─────────────────────────────────── */
/* ──────────────────────────────────────────────────────────────
   DESIGN TOKENS — Royal Blue / Deep Navy Identity
   ────────────────────────────────────────────────────────────── */
:root {
  /* Brand Identity */
  --royal-blue: #1A6EFF;
  --royal-blue-light: #3D8AFF;
  --royal-blue-dark: #0E4FCC;
  --royal-blue-soft: rgba(26, 110, 255, 0.12);
  --royal-blue-glow: rgba(26, 110, 255, 0.25);

  --deep-navy: #050A1A;
  --deep-navy-2: #080E20;
  --deep-navy-3: #0B1428;

  --purple-accent: #8B5CF6;
  --purple-soft: rgba(139, 92, 246, 0.14);

  --cyan-bright: #00C2FF;
  --cyan-soft: rgba(0, 194, 255, 0.12);

  --green-success: #00D68F;
  --green-soft: rgba(0, 214, 143, 0.12);

  --red-alert: #FF3B6B;
  --red-soft: rgba(255, 59, 107, 0.12);

  --amber-warn: #F59E0B;
  --amber-soft: rgba(245, 158, 11, 0.12);

  /* Surface Hierarchy */
  --surface-0: #050A1A;
  --surface-1: #080E22;
  --surface-2: #0C1530;
  --surface-3: #101B3A;
  --surface-4: #152044;

  /* Text */
  --text-primary: #EEF5FF;
  --text-secondary: #9AB0CC;
  --text-muted-v104: #647A9B;
  --text-accent: #7DC8FF;

  /* Borders */
  --border-subtle: rgba(26, 110, 255, 0.12);
  --border-medium: rgba(26, 110, 255, 0.22);
  --border-strong: rgba(26, 110, 255, 0.38);

  /* Spacing Scale */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-8: 32px;
  --sp-10: 40px;
  --sp-12: 48px;

  /* Radius */
  --r-xs: 6px;
  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 20px;
  --r-xl: 28px;
  --r-full: 999px;

  /* Shadows */
  --shadow-royal: 0 0 0 1px rgba(26, 110, 255, .08), 0 8px 32px rgba(0, 0, 0, .4);
  --shadow-blue: 0 4px 24px rgba(26, 110, 255, .22);
  --shadow-glow: 0 0 40px rgba(26, 110, 255, .18);

  /* Typography */
  --font-size-xs: 11px;
  --font-size-sm: 13px;
  --font-size-base: 15px;
  --font-size-md: 17px;
  --font-size-lg: 20px;
  --font-size-xl: 24px;
  --font-size-2xl: 30px;
  --font-size-3xl: 38px;

  /* Z-Index */
  --z-sidebar: 300;
  --z-topbar: 400;
  --z-fab: 500;
  --z-modal: 600;
  --z-toast: 800;
  --z-banner: 900;
}

/* ──────────────────────────────────────────────────────────────
   GLOBAL BODY & BACKGROUND
   ────────────────────────────────────────────────────────────── */
body {
  background:
    radial-gradient(ellipse 60% 35% at 15% 0%, rgba(26, 110, 255, .13) 0%, transparent 55%),
    radial-gradient(ellipse 50% 30% at 85% 0%, rgba(139, 92, 246, .09) 0%, transparent 50%),
    radial-gradient(ellipse 40% 25% at 50% 100%, rgba(0, 194, 255, .06) 0%, transparent 50%),
    linear-gradient(180deg, var(--deep-navy) 0%, #060C1C 60%, #050A1A 100%);
}

/* Grid background texture */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background-image:
    linear-gradient(rgba(26, 110, 255, .022) 1px, transparent 1px),
    linear-gradient(90deg, rgba(26, 110, 255, .022) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, rgba(0, 0, 0, .6), transparent 70%);
}

/* ──────────────────────────────────────────────────────────────
   SIDEBAR — Royal Blue Professional
   ────────────────────────────────────────────────────────────── */
.sidebar,
aside.sidebar,
.sidebar-nav {
  background: linear-gradient(180deg,
      rgba(8, 14, 34, 0.98) 0%,
      rgba(5, 10, 26, 0.99) 100%) !important;
  border-inline-end: 1px solid rgba(26, 110, 255, 0.14) !important;
  box-shadow: 4px 0 24px rgba(0, 0, 0, 0.4) !important;
}

/* Sidebar Brand/Logo Area */
.sidebar-brand,
.sidebar .logo-area {
  padding: 20px 16px;
  border-bottom: 1px solid rgba(26, 110, 255, .12);
  background: linear-gradient(135deg, rgba(26, 110, 255, .08), rgba(139, 92, 246, .06));
}

/* Sidebar Group Headers */
.sidebar .nav-group-label,
.sidebar-group-label {
  padding: 16px 16px 6px;
  font-size: var(--font-size-xs);
  font-weight: 900;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(26, 110, 255, 0.65) !important;
}

/* Sidebar Nav Links */
.sidebar .nav-link,
.sidebar-nav .nav-link,
.sidebar [role="menuitem"] {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  margin: 1px 8px;
  border-radius: var(--r-md);
  font-size: var(--font-size-sm);
  font-weight: 700;
  color: rgba(154, 176, 204, 0.82) !important;
  text-decoration: none;
  cursor: pointer;
  transition: all .18s ease;
  border: 1px solid transparent;
  position: relative;
  overflow: hidden;
}

.sidebar .nav-link:hover,
.sidebar-nav .nav-link:hover {
  background: rgba(26, 110, 255, 0.08) !important;
  color: rgba(200, 225, 255, 0.95) !important;
  border-color: rgba(26, 110, 255, 0.14) !important;
}

.sidebar .nav-link.is-active,
.sidebar .nav-link[aria-current="page"],
.sidebar-nav .nav-link.is-active {
  background: linear-gradient(135deg, rgba(26, 110, 255, .18), rgba(139, 92, 246, .1)) !important;
  color: #7DC8FF !important;
  border-color: rgba(26, 110, 255, 0.28) !important;
  box-shadow: inset 0 0 0 1px rgba(26, 110, 255, .12), 0 2px 12px rgba(26, 110, 255, .1) !important;
}

/* Active indicator bar */
.sidebar .nav-link.is-active::before,
.sidebar-nav .nav-link.is-active::before {
  content: '';
  position: absolute;
  inset-inline-start: 0;
  top: 25%;
  bottom: 25%;
  width: 3px;
  border-radius: 0 2px 2px 0;
  background: linear-gradient(180deg, var(--royal-blue), var(--purple-accent));
}

/* ──────────────────────────────────────────────────────────────
   TOP BAR
   ────────────────────────────────────────────────────────────── */
.topbar,
.top-bar,
header.main-header {
  background: rgba(8, 14, 34, 0.96) !important;
  border-bottom: 1px solid rgba(26, 110, 255, 0.14) !important;
  backdrop-filter: blur(20px) saturate(160%) !important;
  -webkit-backdrop-filter: blur(20px) saturate(160%) !important;
  box-shadow: 0 2px 24px rgba(0, 0, 0, 0.35) !important;
}

/* ──────────────────────────────────────────────────────────────
   BUTTONS — Royal Blue Hierarchy
   ────────────────────────────────────────────────────────────── */

/* Primary Button */
.button.primary,
button.primary,
[class*="btn-primary"] {
  background: linear-gradient(135deg, var(--royal-blue) 0%, var(--royal-blue-dark) 100%);
  border-color: rgba(26, 110, 255, 0.5);
  color: #fff;
  box-shadow: 0 4px 16px rgba(26, 110, 255, 0.28), 0 1px 0 rgba(255, 255, 255, .08) inset;
  font-weight: 800;
  transition: all .2s ease;
  position: relative;
  overflow: hidden;
}

.button.primary:hover:not([disabled]),
button.primary:hover:not([disabled]) {
  background: linear-gradient(135deg, var(--royal-blue-light) 0%, var(--royal-blue) 100%);
  box-shadow: 0 6px 22px rgba(26, 110, 255, 0.38), 0 1px 0 rgba(255, 255, 255, .1) inset;
  transform: translateY(-1px);
}

.button.primary:active:not([disabled]) {
  transform: translateY(0);
  box-shadow: 0 2px 8px rgba(26, 110, 255, 0.2);
}

/* Ripple effect on buttons */
.button::after,
button.primary::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(circle at center, rgba(255, 255, 255, .15), transparent 60%);
  opacity: 0;
  transition: opacity .3s;
  pointer-events: none;
}

.button:active::after,
button:active::after {
  opacity: 1;
  transition: opacity 0s;
}

/* Ghost Button */
.button.ghost,
button.ghost {
  background: rgba(26, 110, 255, 0.06);
  border: 1px solid rgba(26, 110, 255, 0.22);
  color: rgba(100, 180, 255, 0.9);
  font-weight: 700;
}

.button.ghost:hover:not([disabled]) {
  background: rgba(26, 110, 255, 0.12);
  border-color: rgba(26, 110, 255, 0.38);
  color: #7DC8FF;
}

/* Danger Button */
.button.danger,
button.danger {
  background: linear-gradient(135deg, #C0203B, #FF3B6B);
  border-color: rgba(255, 59, 107, 0.45);
  box-shadow: 0 4px 16px rgba(255, 59, 107, 0.22);
}

.button.danger:hover:not([disabled]) {
  box-shadow: 0 6px 22px rgba(255, 59, 107, 0.35);
  transform: translateY(-1px);
}

/* Success Button */
.button.success,
button.success {
  background: linear-gradient(135deg, #00A86B, var(--green-success));
  border-color: rgba(0, 214, 143, 0.45);
  box-shadow: 0 4px 16px rgba(0, 214, 143, 0.2);
  color: #002A1C;
}

/* ──────────────────────────────────────────────────────────────
   CARDS & PANELS
   ────────────────────────────────────────────────────────────── */
.panel,
.card,
.stat-card,
.dashboard-card {
  background: linear-gradient(135deg,
      rgba(12, 21, 48, 0.95) 0%,
      rgba(8, 14, 34, 0.98) 100%);
  border: 1px solid rgba(26, 110, 255, 0.12);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-royal);
  transition: border-color .22s, box-shadow .22s, transform .18s;
  position: relative;
  overflow: hidden;
}

.panel::before,
.card::before {
  content: '';
  position: absolute;
  inset-inline-start: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: linear-gradient(180deg,
      var(--royal-blue) 0%,
      var(--purple-accent) 60%,
      transparent 100%);
  opacity: 0;
  transition: opacity .22s;
}

.panel:hover::before,
.card:hover::before {
  opacity: .6;
}

.panel:hover,
.card:hover {
  border-color: rgba(26, 110, 255, 0.22);
  box-shadow: var(--shadow-blue);
}

/* Stat Cards with Color Variants */
.stat-card.stat-present,
.stat-card.stat-success {
  border-top: 2px solid rgba(0, 214, 143, 0.5);
}

.stat-card.stat-late,
.stat-card.stat-warning {
  border-top: 2px solid rgba(245, 158, 11, 0.5);
}

.stat-card.stat-absent,
.stat-card.stat-danger {
  border-top: 2px solid rgba(255, 59, 107, 0.5);
}

.stat-card.stat-primary {
  border-top: 2px solid rgba(26, 110, 255, 0.6);
}

/* Stat Numbers */
.stat-value,
.stat-number,
.kpi-number {
  font-size: clamp(28px, 5vw, 42px);
  font-weight: 900;
  line-height: 1;
  background: linear-gradient(135deg, var(--royal-blue-light), var(--cyan-bright));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  letter-spacing: -.02em;
}

/* ──────────────────────────────────────────────────────────────
   FORMS & INPUTS
   ────────────────────────────────────────────────────────────── */
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
select,
textarea {
  background: rgba(5, 10, 26, 0.75) !important;
  border: 1px solid rgba(26, 110, 255, 0.18) !important;
  border-radius: var(--r-md) !important;
  color: var(--text-primary) !important;
  transition: border-color .18s, box-shadow .18s !important;
  caret-color: var(--royal-blue-light) !important;
}

input:focus:not([type="checkbox"]):not([type="radio"]),
select:focus,
textarea:focus {
  border-color: rgba(26, 110, 255, 0.55) !important;
  box-shadow: 0 0 0 4px rgba(26, 110, 255, 0.12),
    inset 0 1px 0 rgba(26, 110, 255, 0.05) !important;
  outline: none !important;
}

input.is-invalid,
select.is-invalid,
textarea.is-invalid {
  border-color: rgba(255, 59, 107, 0.55) !important;
  box-shadow: 0 0 0 3px rgba(255, 59, 107, 0.1) !important;
}

label {
  font-weight: 800;
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
}

.field-error {
  color: #FF8FA0;
  font-size: var(--font-size-xs);
  margin-top: 4px;
  display: flex;
  align-items: center;
  gap: 4px;
}

/* ──────────────────────────────────────────────────────────────
   TOAST SYSTEM
   ────────────────────────────────────────────────────────────── */
.toast,
.toast-item {
  background: linear-gradient(135deg,
      rgba(12, 21, 48, 0.96),
      rgba(8, 14, 34, 0.98)) !important;
  border: 1px solid rgba(26, 110, 255, 0.22) !important;
  border-radius: var(--r-md) !important;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(26, 110, 255, .06) !important;
  backdrop-filter: blur(20px) !important;
  color: var(--text-primary) !important;
}

.toast.success,
.toast-item.ok,
.toast-item.success {
  border-color: rgba(0, 214, 143, 0.35) !important;
  border-inline-start: 3px solid var(--green-success) !important;
}

.toast.error,
.toast-item.error {
  border-color: rgba(255, 59, 107, 0.35) !important;
  border-inline-start: 3px solid var(--red-alert) !important;
}

.toast.warning,
.toast-item.warn {
  border-color: rgba(245, 158, 11, 0.35) !important;
  border-inline-start: 3px solid var(--amber-warn) !important;
}

/* ──────────────────────────────────────────────────────────────
   MODALS
   ────────────────────────────────────────────────────────────── */
.modal-backdrop,
.confirm-modal-overlay {
  background: rgba(2, 5, 14, 0.82) !important;
  backdrop-filter: blur(8px) !important;
}

.confirm-modal,
.modal-box,
.modal-panel {
  background: linear-gradient(160deg,
      rgba(12, 21, 48, 0.98),
      rgba(8, 14, 34, 0.99)) !important;
  border: 1px solid rgba(26, 110, 255, 0.22) !important;
  border-radius: var(--r-xl) !important;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.6),
    0 0 0 1px rgba(26, 110, 255, .06) !important;
  padding: 24px !important;
  max-width: min(480px, calc(100vw - 32px)) !important;
  width: 100% !important;
}

/* ──────────────────────────────────────────────────────────────
   TABLES
   ────────────────────────────────────────────────────────────── */
.table-wrapper,
.table-container {
  border-radius: var(--r-lg);
  overflow: hidden;
  border: 1px solid rgba(26, 110, 255, 0.12);
  box-shadow: var(--shadow-royal);
}

table {
  width: 100%;
  border-collapse: collapse;
}

thead th {
  background: rgba(12, 21, 48, 0.95) !important;
  color: rgba(100, 180, 255, 0.9) !important;
  font-weight: 900;
  font-size: var(--font-size-xs);
  letter-spacing: .04em;
  text-transform: uppercase;
  padding: 12px 14px;
  border-bottom: 1px solid rgba(26, 110, 255, 0.18);
  position: sticky;
  top: 0;
  z-index: 2;
}

tbody tr {
  border-bottom: 1px solid rgba(26, 110, 255, 0.07);
  transition: background .15s;
}

tbody tr:hover {
  background: rgba(26, 110, 255, 0.06);
}

tbody td {
  padding: 11px 14px;
  font-size: var(--font-size-sm);
  vertical-align: middle;
}

/* Mobile: Tables as Cards */
@media (max-width: 640px) {

  .table-to-cards table,
  .table-to-cards thead,
  .table-to-cards tbody,
  .table-to-cards tr,
  .table-to-cards th {
    display: block;
  }

  .table-to-cards thead {
    display: none;
  }

  .table-to-cards tbody tr {
    display: block;
    background: linear-gradient(135deg, rgba(12, 21, 48, .95), rgba(8, 14, 34, .98));
    border: 1px solid rgba(26, 110, 255, .14);
    border-radius: var(--r-md);
    padding: 14px;
    margin-bottom: 10px;
  }

  .table-to-cards td {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 0;
    border-bottom: 1px solid rgba(26, 110, 255, .07);
    font-size: var(--font-size-sm);
  }

  .table-to-cards td:last-child {
    border-bottom: none;
  }

  .table-to-cards td::before {
    content: attr(data-label);
    font-weight: 900;
    font-size: var(--font-size-xs);
    color: rgba(100, 180, 255, 0.75);
    letter-spacing: .03em;
    flex-shrink: 0;
    margin-inline-end: 8px;
  }
}

/* ──────────────────────────────────────────────────────────────
   STATUS BADGES
   ────────────────────────────────────────────────────────────── */
.badge,
.status-badge,
[class*="badge-"] {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  border-radius: var(--r-full);
  font-size: var(--font-size-xs);
  font-weight: 900;
  letter-spacing: .04em;
  white-space: nowrap;
}

.badge-success,
.badge.success,
.badge-present {
  background: var(--green-soft);
  color: #00D68F;
  border: 1px solid rgba(0, 214, 143, .28);
}

.badge-danger,
.badge.danger,
.badge-absent {
  background: var(--red-soft);
  color: #FF8FA0;
  border: 1px solid rgba(255, 59, 107, .28);
}

.badge-warning,
.badge.warning,
.badge-late {
  background: var(--amber-soft);
  color: #FCD34D;
  border: 1px solid rgba(245, 158, 11, .28);
}

.badge-primary,
.badge.primary {
  background: var(--royal-blue-soft);
  color: var(--royal-blue-light);
  border: 1px solid rgba(26, 110, 255, .28);
}

.badge-purple {
  background: var(--purple-soft);
  color: #C4B5FD;
  border: 1px solid rgba(139, 92, 246, .28);
}

.badge-cyan {
  background: var(--cyan-soft);
  color: #7DE8FF;
  border: 1px solid rgba(0, 194, 255, .28);
}

/* ──────────────────────────────────────────────────────────────
   SKELETON LOADING
   ────────────────────────────────────────────────────────────── */
.skeleton,
.skeleton-line,
.skeleton-block {
  background: linear-gradient(90deg,
      rgba(26, 110, 255, 0.06) 0%,
      rgba(26, 110, 255, 0.12) 50%,
      rgba(26, 110, 255, 0.06) 100%);
  background-size: 200% 100%;
  animation: skeleton-shimmer 1.6s ease-in-out infinite;
  border-radius: var(--r-sm);
}

@keyframes skeleton-shimmer {
  0% {
    background-position: 200% 0;
  }

  100% {
    background-position: -200% 0;
  }
}

/* ──────────────────────────────────────────────────────────────
   EMPTY STATES
   ────────────────────────────────────────────────────────────── */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 48px 24px;
  text-align: center;
  gap: 14px;
  color: var(--text-secondary);
}

.empty-state-icon {
  font-size: 48px;
  opacity: .5;
  filter: grayscale(.3);
  margin-bottom: 4px;
}

.empty-state-title {
  font-size: var(--font-size-md);
  font-weight: 900;
  color: var(--text-primary);
  opacity: .7;
}

.empty-state-desc {
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
  max-width: 300px;
  line-height: 1.7;
}

/* ──────────────────────────────────────────────────────────────
   NOTIFICATION STATUS BADGES
   ────────────────────────────────────────────────────────────── */
.push-status-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: var(--r-full);
  font-size: var(--font-size-xs);
  font-weight: 900;
  letter-spacing: .04em;
}

.push-status-badge.enabled {
  background: var(--green-soft);
  color: var(--green-success);
  border: 1px solid rgba(0, 214, 143, .3);
}

.push-status-badge.enabled::before {
  content: '🔔';
}

.push-status-badge.denied {
  background: var(--red-soft);
  color: #FF8FA0;
  border: 1px solid rgba(255, 59, 107, .3);
}

.push-status-badge.denied::before {
  content: '🔕';
}

.push-status-badge.unsupported {
  background: rgba(100, 122, 155, .1);
  color: var(--text-secondary);
  border: 1px solid rgba(100, 122, 155, .2);
}

.push-status-badge.unsupported::before {
  content: '⚠️';
}

.push-status-badge.pending {
  background: var(--amber-soft);
  color: #FCD34D;
  border: 1px solid rgba(245, 158, 11, .3);
}

.push-status-badge.pending::before {
  content: '⏳';
}

/* ──────────────────────────────────────────────────────────────
   LOCATION REQUEST STATUS
   ────────────────────────────────────────────────────────────── */
.location-status-card {
  border-radius: var(--r-lg);
  padding: 16px 18px;
  border: 1px solid rgba(26, 110, 255, .16);
  background: linear-gradient(135deg, rgba(12, 21, 48, .95), rgba(8, 14, 34, .98));
  display: flex;
  align-items: center;
  gap: 14px;
}

.location-status-card.waiting {
  border-color: rgba(245, 158, 11, .3);
}

.location-status-card.received {
  border-color: rgba(0, 214, 143, .3);
}

.location-status-card.rejected {
  border-color: rgba(255, 59, 107, .3);
}

.location-status-card.failed {
  border-color: rgba(255, 59, 107, .25);
}

/* Location Request Banner (employee) */
.location-request-banner {
  position: fixed;
  top: 0;
  inset-inline: 0;
  z-index: var(--z-banner);
  background: linear-gradient(135deg, rgba(26, 110, 255, .96), rgba(139, 92, 246, .95));
  backdrop-filter: blur(20px);
  padding: 14px 20px;
  display: flex;
  align-items: center;
  gap: 12px;
  box-shadow: 0 4px 24px rgba(26, 110, 255, .4);
  animation: slide-down .3s ease;
  border-bottom: 1px solid rgba(255, 255, 255, .12);
}

@keyframes slide-down {
  from {
    transform: translateY(-100%);
    opacity: 0;
  }

  to {
    transform: translateY(0);
    opacity: 1;
  }
}

.location-request-banner .banner-text {
  flex: 1;
  font-weight: 800;
  color: #fff;
  font-size: var(--font-size-sm);
}

.location-request-banner .banner-btn {
  background: rgba(255, 255, 255, .2);
  border: 1px solid rgba(255, 255, 255, .35);
  color: #fff;
  border-radius: var(--r-full);
  padding: 8px 18px;
  font-weight: 900;
  font-size: var(--font-size-sm);
  cursor: pointer;
  white-space: nowrap;
  transition: background .18s;
}

.location-request-banner .banner-btn:hover {
  background: rgba(255, 255, 255, .3);
}

/* ──────────────────────────────────────────────────────────────
   OFFLINE / ONLINE BANNERS
   ────────────────────────────────────────────────────────────── */
.offline-banner {
  position: fixed;
  bottom: 80px;
  inset-inline: 0;
  z-index: var(--z-banner);
  background: linear-gradient(135deg, rgba(200, 40, 80, .96), rgba(120, 20, 50, .98));
  color: #fff;
  text-align: center;
  padding: 10px 16px;
  font-size: var(--font-size-sm);
  font-weight: 800;
  box-shadow: 0 -4px 20px rgba(0, 0, 0, .4);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  animation: slide-up .3s ease;
}

.online-restored-banner {
  position: fixed;
  bottom: 80px;
  inset-inline: 0;
  z-index: var(--z-banner);
  background: linear-gradient(135deg, rgba(0, 168, 107, .96), rgba(0, 100, 70, .98));
  color: #fff;
  text-align: center;
  padding: 10px 16px;
  font-size: var(--font-size-sm);
  font-weight: 800;
  box-shadow: 0 -4px 20px rgba(0, 0, 0, .4);
  animation: slide-up .3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

@keyframes slide-up {
  from {
    transform: translateY(100%);
    opacity: 0;
  }

  to {
    transform: translateY(0);
    opacity: 1;
  }
}

/* ──────────────────────────────────────────────────────────────
   EMPLOYEE APP — Hero Card
   ────────────────────────────────────────────────────────────── */
.employee-hero-card {
  background: linear-gradient(135deg,
      rgba(26, 110, 255, .18) 0%,
      rgba(139, 92, 246, .12) 50%,
      rgba(0, 194, 255, .08) 100%);
  border: 1px solid rgba(26, 110, 255, .28);
  border-radius: var(--r-xl);
  padding: 20px;
  position: relative;
  overflow: hidden;
  box-shadow: 0 8px 32px rgba(26, 110, 255, .15);
}

.employee-hero-card::after {
  content: '';
  position: absolute;
  inset-inline-end: -20px;
  top: -20px;
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(26, 110, 255, .15), transparent 70%);
  pointer-events: none;
}

/* ──────────────────────────────────────────────────────────────
   EMPLOYEE APP — Quick Actions Grid
   ────────────────────────────────────────────────────────────── */
.quick-action-item {
  background: linear-gradient(135deg, rgba(12, 21, 48, .95), rgba(8, 14, 34, .98));
  border: 1px solid rgba(26, 110, 255, .14);
  border-radius: var(--r-lg);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 16px 12px;
  cursor: pointer;
  transition: all .2s ease;
  text-align: center;
  min-height: 88px;
  position: relative;
  overflow: hidden;
}

.quick-action-item:hover,
.quick-action-item:focus-visible {
  background: linear-gradient(135deg, rgba(26, 110, 255, .12), rgba(139, 92, 246, .08));
  border-color: rgba(26, 110, 255, .3);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(26, 110, 255, .14);
}

.quick-action-item:active {
  transform: translateY(0) scale(.97);
}

.quick-action-icon {
  font-size: 28px;
  line-height: 1;
  filter: drop-shadow(0 2px 8px rgba(26, 110, 255, .3));
}

.quick-action-label {
  font-size: var(--font-size-xs);
  font-weight: 900;
  color: var(--text-secondary);
  letter-spacing: .02em;
  line-height: 1.3;
}

/* ──────────────────────────────────────────────────────────────
   EXECUTIVE DASHBOARD — Live Stats
   ────────────────────────────────────────────────────────────── */
.live-stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 12px;
}

.live-stat-card {
  background: linear-gradient(135deg, rgba(12, 21, 48, .95), rgba(8, 14, 34, .98));
  border: 1px solid rgba(26, 110, 255, .14);
  border-radius: var(--r-lg);
  padding: 16px;
  text-align: center;
  position: relative;
  overflow: hidden;
  transition: border-color .2s, box-shadow .2s;
}

.live-stat-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, transparent, rgba(26, 110, 255, .04));
  pointer-events: none;
}

.live-stat-card.stat-present {
  border-top: 2px solid rgba(0, 214, 143, .6);
}

.live-stat-card.stat-late {
  border-top: 2px solid rgba(245, 158, 11, .6);
}

.live-stat-card.stat-absent {
  border-top: 2px solid rgba(255, 59, 107, .6);
}

.live-stat-card.stat-review {
  border-top: 2px solid rgba(139, 92, 246, .6);
}

.live-stat-number {
  font-size: 36px;
  font-weight: 900;
  line-height: 1;
  letter-spacing: -.03em;
  margin-bottom: 4px;
}

.live-stat-card.stat-present .live-stat-number {
  color: var(--green-success);
}

.live-stat-card.stat-late .live-stat-number {
  color: #FCD34D;
}

.live-stat-card.stat-absent .live-stat-number {
  color: var(--red-alert);
}

.live-stat-card.stat-review .live-stat-number {
  color: #C4B5FD;
}

.live-stat-card.stat-primary .live-stat-number {
  color: var(--royal-blue-light);
}

.live-stat-label {
  font-size: var(--font-size-xs);
  font-weight: 800;
  color: var(--text-secondary);
  letter-spacing: .04em;
}

/* Live pulse indicator */
.live-indicator {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--font-size-xs);
  font-weight: 900;
  color: var(--green-success);
  letter-spacing: .04em;
}

.live-indicator::before {
  content: '';
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--green-success);
  box-shadow: 0 0 0 0 rgba(0, 214, 143, .4);
  animation: live-pulse 2s ease infinite;
}

@keyframes live-pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(0, 214, 143, .5);
  }

  70% {
    box-shadow: 0 0 0 8px rgba(0, 214, 143, 0);
  }

  100% {
    box-shadow: 0 0 0 0 rgba(0, 214, 143, 0);
  }
}

/* ──────────────────────────────────────────────────────────────
   COUNT-UP ANIMATION
   ────────────────────────────────────────────────────────────── */
.count-up {
  display: inline-block;
  transition: opacity .2s;
}

/* ──────────────────────────────────────────────────────────────
   PROGRESS BAR (Top of Page)
   ────────────────────────────────────────────────────────────── */
.page-progress-bar {
  position: fixed;
  top: 0;
  inset-inline-start: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--royal-blue), var(--purple-accent), var(--cyan-bright));
  z-index: calc(var(--z-topbar) + 1);
  transition: width .3s ease, opacity .3s;
  border-radius: 0 2px 2px 0;
}

/* ──────────────────────────────────────────────────────────────
   GAMIFICATION BADGES
   ────────────────────────────────────────────────────────────── */
.achievement-badge {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 12px 16px;
  background: linear-gradient(135deg, rgba(245, 158, 11, .12), rgba(251, 191, 36, .08));
  border: 1px solid rgba(245, 158, 11, .28);
  border-radius: var(--r-md);
  text-align: center;
  transition: all .2s;
}

.achievement-badge:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(245, 158, 11, .15);
}

.achievement-badge .badge-icon {
  font-size: 32px;
  filter: drop-shadow(0 2px 8px rgba(245, 158, 11, .4));
}

.achievement-badge .badge-label {
  font-size: var(--font-size-xs);
  font-weight: 900;
  color: #FCD34D;
  letter-spacing: .03em;
}

/* ──────────────────────────────────────────────────────────────
   SYSTEM HEALTH INDICATORS
   ────────────────────────────────────────────────────────────── */
.health-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  border-radius: var(--r-md);
  background: rgba(12, 21, 48, .7);
  border: 1px solid rgba(26, 110, 255, .1);
  gap: 10px;
  transition: border-color .18s;
}

.health-item:hover {
  border-color: rgba(26, 110, 255, .22);
}

.health-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}

.health-dot.ok {
  background: var(--green-success);
  box-shadow: 0 0 8px rgba(0, 214, 143, .5);
}

.health-dot.warning {
  background: var(--amber-warn);
  box-shadow: 0 0 8px rgba(245, 158, 11, .5);
}

.health-dot.error {
  background: var(--red-alert);
  box-shadow: 0 0 8px rgba(255, 59, 107, .5);
}

.health-dot.unknown {
  background: var(--text-muted-v104);
}

/* ──────────────────────────────────────────────────────────────
   PRINT STYLES
   ────────────────────────────────────────────────────────────── */
@media print {
  :root {
    --text-primary: #1a1a1a;
    --text-secondary: #444;
    --surface-0: #fff;
    --surface-1: #f8f8f8;
  }

  .sidebar,
  .topbar,
  .employee-bottom-nav,
  .fab-button,
  .toast-container,
  .modal-backdrop,
  [class*="no-print"],
  .page-progress-bar {
    display: none !important;
  }

  body {
    background: #fff !important;
    color: #1a1a1a !important;
  }

  .panel,
  .card {
    background: #fff !important;
    border: 1px solid #ddd !important;
    box-shadow: none !important;
    break-inside: avoid;
  }

  table {
    font-size: 11px;
  }

  thead th {
    background: #f0f0f0 !important;
    color: #333 !important;
    border-bottom: 2px solid #ccc !important;
  }

  .stat-value,
  .live-stat-number {
    -webkit-text-fill-color: #1A6EFF !important;
    color: #1A6EFF !important;
  }

  @page {
    margin: 1.5cm;
    size: A4;
  }
}

/* ──────────────────────────────────────────────────────────────
   RESPONSIVE UTILITIES
   ────────────────────────────────────────────────────────────── */
@media (max-width: 480px) {

  .panel,
  .card {
    border-radius: var(--r-md);
    padding: 14px;
  }

  .live-stat-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .confirm-modal,
  .modal-box {
    padding: 18px !important;
    border-radius: var(--r-lg) !important;
  }
}

@media (max-width: 360px) {
  .live-stat-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
  }

  .live-stat-number {
    font-size: 28px;
  }
}

/* ──────────────────────────────────────────────────────────────
   FOCUS VISIBLE (Accessibility)
   ────────────────────────────────────────────────────────────── */
:focus-visible {
  outline: 3px solid rgba(26, 110, 255, 0.5) !important;
  outline-offset: 2px !important;
}

/* ──────────────────────────────────────────────────────────────
   SCROLLBAR STYLING
   ────────────────────────────────────────────────────────────── */
::-webkit-scrollbar {
  width: 5px;
  height: 5px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: rgba(26, 110, 255, 0.25);
  border-radius: 999px;
}

::-webkit-scrollbar-thumb:hover {
  background: rgba(26, 110, 255, 0.45);
}

/* ──────────────────────────────────────────────────────────────
   SMOOTH TRANSITIONS (performance-safe)
   ────────────────────────────────────────────────────────────── */
* {
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {

  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

/* ── from v105-ui-fixes.css ─────────────────────────────────── */
/* ──────────────────────────────────────────────────────────────
   0. SYSTEM-WIDE OVERRIDES & RESET HELPERS
   ────────────────────────────────────────────────────────────── */
*,
*::before,
*::after {
  box-sizing: border-box;
}

:root {
  --v105-transition: 0.18s cubic-bezier(0.4, 0, 0.2, 1);
  --v105-spring: 0.28s cubic-bezier(0.34, 1.56, 0.64, 1);
  --v105-slow: 0.36s cubic-bezier(0.4, 0, 0.2, 1);
  --v105-glow-cyan: 0 0 0 1px rgba(0, 194, 255, .18), 0 0 32px rgba(0, 194, 255, .12);
  --v105-glow-blue: 0 0 0 1px rgba(26, 110, 255, .18), 0 0 32px rgba(26, 110, 255, .12);
  --v105-glow-green: 0 0 0 1px rgba(0, 214, 143, .18), 0 0 24px rgba(0, 214, 143, .10);
  --v105-surface-a: rgba(11, 20, 40, 0.96);
  --v105-surface-b: rgba(8, 14, 32, 0.98);
}

/* ──────────────────────────────────────────────────────────────
   1. OPERATIONS GATE — COMPLETE POLISH
   ────────────────────────────────────────────────────────────── */

/* Smooth entrance */
.gate {
  animation: v105-gate-in 0.38s cubic-bezier(0.34, 1.2, 0.64, 1) both !important;
}

@keyframes v105-gate-in {
  from {
    opacity: 0;
    transform: translateY(18px) scale(0.97);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* Logo pulse */
.gate .brand img {
  animation: v105-logo-pulse 3s ease-in-out infinite !important;
}

@keyframes v105-logo-pulse {

  0%,
  100% {
    filter: drop-shadow(0 0 12px rgba(0, 194, 255, .3));
  }

  50% {
    filter: drop-shadow(0 0 26px rgba(0, 194, 255, .6));
  }
}

/* Title gradient shimmer */
.gate .title {
  background-size: 200% auto !important;
  animation: v105-shimmer 4s linear infinite !important;
}

@keyframes v105-shimmer {
  from {
    background-position: 0 center;
  }

  to {
    background-position: 200% center;
  }
}

/* Target buttons — lift + glow on hover */
.gate .target {
  position: relative;
  overflow: hidden;
  transition:
    border-color var(--v105-transition),
    background var(--v105-transition),
    transform var(--v105-spring),
    box-shadow var(--v105-transition) !important;
}

.gate .target:hover {
  transform: translateY(-3px) !important;
  box-shadow: 0 12px 32px rgba(0, 100, 255, .18), var(--v105-glow-cyan) !important;
}

.gate .target.is-active {
  background: linear-gradient(135deg, rgba(0, 194, 255, .15), rgba(26, 110, 255, .18)) !important;
  border-color: #00C2FF !important;
  box-shadow: 0 0 0 3px rgba(0, 194, 255, .14), 0 12px 32px rgba(0, 100, 255, .18) !important;
}

/* Active check icon */
.gate .target.is-active::after {
  content: '✓';
  position: absolute;
  top: 8px;
  inset-inline-start: 10px;
  font-size: 10px;
  font-weight: 900;
  color: #00C2FF;
  line-height: 1;
}

/* Password toggle — fix vertical alignment */
.password-toggle {
  position: absolute !important;
  inset-inline-end: 8px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  min-height: 34px !important;
  height: 34px !important;
  border: 1px solid rgba(0, 194, 255, .32) !important;
  border-radius: 999px !important;
  padding: 0 14px !important;
  background: rgba(5, 12, 28, .9) !important;
  color: #7A94C1 !important;
  font-family: inherit !important;
  font-weight: 900 !important;
  font-size: 12px !important;
  cursor: pointer !important;
  transition: border-color var(--v105-transition), color var(--v105-transition) !important;
  white-space: nowrap !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  z-index: 2 !important;
}

.password-toggle:hover {
  border-color: #00C2FF !important;
  color: #00C2FF !important;
  background: rgba(0, 194, 255, .08) !important;
}

/* Password field wrapper */
.password-field {
  position: relative !important;
  display: block !important;
}

.password-field input {
  padding-inline-end: 88px !important;
}

/* Gate inputs — focus improvement */
.gate input:focus {
  border-color: #00C2FF !important;
  box-shadow: 0 0 0 4px rgba(0, 194, 255, .16), inset 0 1px 0 rgba(0, 194, 255, .06) !important;
  transform: translateY(-1px) !important;
  transition: transform var(--v105-spring), box-shadow var(--v105-transition), border-color var(--v105-transition) !important;
}

/* Gate submit button — polish */
.gate .submit {
  position: relative;
  overflow: hidden;
  letter-spacing: 0.03em !important;
  transition: transform var(--v105-spring), box-shadow var(--v105-transition), opacity var(--v105-transition) !important;
}

.gate .submit:hover:not([disabled]) {
  transform: translateY(-3px) !important;
  box-shadow: 0 16px 36px rgba(0, 100, 255, .38) !important;
}

.gate .submit::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .18), transparent);
  background-size: 200% auto;
  opacity: 0;
  animation: v105-btn-shine 2.2s linear infinite paused;
  transition: opacity 0.3s;
}

.gate .submit:hover::before {
  opacity: 1;
  animation-play-state: running;
}

@keyframes v105-btn-shine {
  from {
    background-position: -200% center;
  }

  to {
    background-position: 200% center;
  }
}

/* Status message */
.gate .msg {
  border-radius: 14px !important;
  padding: 13px 16px !important;
  font-size: 13px !important;
  line-height: 1.65 !important;
  animation: v105-msg-in 0.24s ease both !important;
}

@keyframes v105-msg-in {
  from {
    opacity: 0;
    transform: translateY(-6px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ──────────────────────────────────────────────────────────────
   2. EXECUTIVE PORTAL — FULL TOPBAR REWORK
   ────────────────────────────────────────────────────────────── */

/* Shell page-in animation */
.executive-shell {
  animation: v105-page-in 0.26s ease both;
}

@keyframes v105-page-in {
  from {
    opacity: 0;
    transform: translateY(10px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ── Desktop Topbar ── */
.executive-topbar {
  position: sticky !important;
  top: 0 !important;
  z-index: var(--z-topbar, 400) !important;
  display: flex !important;
  flex-direction: column !important;
  /* stack brand + tabs on separate rows */
  gap: 0 !important;
  padding: 0 !important;
  background: var(--v105-surface-a) !important;
  border: none !important;
  border-bottom: 1px solid rgba(26, 110, 255, .18) !important;
  box-shadow: 0 4px 24px rgba(0, 0, 0, .32) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
}

/* Top row: brand + user actions */
.executive-topbar-row-1 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 20px;
  gap: 12px;
  min-height: 60px;
}

/* Patch: existing brand is inside topbar with no row wrapper — compensate */
.executive-brand {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  flex-shrink: 0 !important;
  padding: 10px 20px 0 !important;
}

.executive-brand img {
  width: 38px !important;
  height: 38px !important;
  object-fit: contain !important;
  border-radius: 10px !important;
  background: rgba(255, 255, 255, .08) !important;
  border: 1px solid rgba(26, 110, 255, .28) !important;
  padding: 3px !important;
}

.executive-brand strong {
  font-size: 15px !important;
  font-weight: 900 !important;
  color: #EEF5FF !important;
  line-height: 1.2 !important;
  white-space: nowrap !important;
}

.executive-brand span {
  font-size: 10px !important;
  color: #00C2FF !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  font-weight: 700 !important;
  display: block !important;
}

/* ── Navigation tabs — Scrollable pill row ── */
.executive-tabs {
  display: flex !important;
  flex-direction: row !important;
  gap: 4px !important;
  padding: 6px 16px 10px !important;
  overflow-x: auto !important;
  scrollbar-width: none !important;
  -webkit-overflow-scrolling: touch !important;
  border-top: 1px solid rgba(26, 110, 255, .10) !important;
  background: transparent !important;
  border-radius: 0 !important;
  border: none !important;
  scroll-snap-type: x mandatory !important;
}

.executive-tabs::-webkit-scrollbar {
  display: none !important;
}

.executive-tabs button {
  flex-shrink: 0 !important;
  scroll-snap-align: start !important;
  white-space: nowrap !important;
  padding: 8px 16px !important;
  border-radius: 999px !important;
  border: 1px solid transparent !important;
  background: rgba(26, 110, 255, .07) !important;
  color: #9AB0CC !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  transition:
    background var(--v105-transition),
    color var(--v105-transition),
    border-color var(--v105-transition),
    transform var(--v105-spring),
    box-shadow var(--v105-transition) !important;
  line-height: 1.3 !important;
  font-family: inherit !important;
}

.executive-tabs button:hover:not(.is-active) {
  background: rgba(26, 110, 255, .14) !important;
  color: #EEF5FF !important;
  transform: translateY(-1px) !important;
}

.executive-tabs button.is-active {
  background: linear-gradient(135deg, #00C2FF, #1A6EFF) !important;
  color: #031022 !important;
  font-weight: 900 !important;
  border-color: transparent !important;
  box-shadow: 0 4px 16px rgba(26, 110, 255, .36) !important;
  transform: translateY(-1px) !important;
}

/* ── User actions row ── */
.executive-user {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  flex-wrap: nowrap !important;
  flex-shrink: 0 !important;
  padding: 10px 20px 0 !important;
}

.executive-user .user-chip {
  display: flex !important;
  align-items: center !important;
  gap: 7px !important;
  padding: 5px 12px 5px 6px !important;
  border-radius: 999px !important;
  background: rgba(26, 110, 255, .10) !important;
  border: 1px solid rgba(26, 110, 255, .22) !important;
  color: #EEF5FF !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  white-space: nowrap !important;
  max-width: 160px !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.executive-user .button {
  padding: 7px 14px !important;
  font-size: 12px !important;
  border-radius: 10px !important;
  font-weight: 800 !important;
  white-space: nowrap !important;
}

.executive-user .button.danger {
  padding: 7px 12px !important;
}

/* ── Executive main content area — compensate for taller header ── */
.executive-main {
  padding: clamp(16px, 2.5vw, 28px) clamp(14px, 2.5vw, 24px) !important;
  width: 100% !important;
  max-width: 1200px !important;
  margin: 0 auto !important;
}

/* Page head */
.executive-page-head {
  display: flex !important;
  align-items: flex-end !important;
  justify-content: space-between !important;
  flex-wrap: wrap !important;
  gap: 12px !important;
  margin-bottom: 24px !important;
  padding-bottom: 16px !important;
  border-bottom: 1px solid rgba(26, 110, 255, .14) !important;
}

.executive-page-head h1 {
  font-size: clamp(20px, 4vw, 28px) !important;
  font-weight: 900 !important;
  margin: 6px 0 0 !important;
  background: linear-gradient(135deg, #EEF5FF, #7DC8FF);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.executive-page-head p {
  font-size: 13px !important;
  color: #9AB0CC !important;
  margin: 4px 0 0 !important;
}

.role-chip {
  padding: 6px 16px !important;
  border-radius: 999px !important;
  background: rgba(26, 110, 255, .12) !important;
  border: 1px solid rgba(26, 110, 255, .26) !important;
  color: #7DC8FF !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  letter-spacing: 0.04em !important;
  white-space: nowrap !important;
}

/* ── Executive Metric Cards ── */
.executive-dashboard .metric,
.executive-shell .metric,
.executive-report-page .metric {
  position: relative !important;
  overflow: hidden !important;
  background:
    linear-gradient(135deg,
      rgba(26, 110, 255, .09) 0%,
      rgba(0, 194, 255, .06) 50%,
      rgba(8, 14, 32, .92) 100%) !important;
  border: 1px solid rgba(26, 110, 255, .20) !important;
  border-radius: 18px !important;
  padding: 18px !important;
  transition:
    transform var(--v105-spring),
    box-shadow var(--v105-transition),
    border-color var(--v105-transition) !important;
}

.executive-dashboard .metric:hover,
.executive-shell .metric:hover {
  transform: translateY(-4px) !important;
  border-color: rgba(26, 110, 255, .40) !important;
  box-shadow: 0 20px 50px rgba(0, 0, 0, .38), var(--v105-glow-blue) !important;
}

.executive-dashboard .metric strong,
.executive-shell .metric strong,
.executive-report-page .metric strong {
  background: linear-gradient(135deg, #00C2FF, #1A6EFF) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  font-variant-numeric: tabular-nums !important;
  display: block !important;
  line-height: 1.1 !important;
}

.executive-dashboard .metric>span,
.executive-shell .metric>span {
  color: #9AB0CC !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  display: block !important;
  margin-bottom: 6px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
}

/* Metric card shimmer on load */
.executive-shell .metric::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 60%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .05), transparent);
  animation: v105-metric-shimmer 2.8s ease infinite;
}

@keyframes v105-metric-shimmer {
  0% {
    left: -100%;
    opacity: 0;
  }

  30% {
    opacity: 1;
  }

  100% {
    left: 200%;
    opacity: 0;
  }
}

/* ── Executive "Score Ring" ── */
.score-display {
  display: inline-flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  width: 68px !important;
  height: 68px !important;
  border-radius: 50% !important;
  background: radial-gradient(circle at 40% 35%,
      rgba(26, 110, 255, .22), rgba(0, 194, 255, .10), transparent 70%) !important;
  border: 2px solid rgba(26, 110, 255, .36) !important;
  box-shadow: var(--v105-glow-blue) !important;
  transition: transform var(--v105-spring) !important;
  flex-shrink: 0 !important;
}

.score-display:hover {
  transform: scale(1.08) !important;
}

.score-display strong {
  font-size: 18px !important;
  font-weight: 900 !important;
  background: linear-gradient(135deg, #00C2FF, #1A6EFF) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  line-height: 1 !important;
}

.score-display span {
  font-size: 9px !important;
  color: #9AB0CC !important;
  font-weight: 700 !important;
  line-height: 1 !important;
}

/* ── Executive Hero section ── */
.executive-hero {
  background:
    linear-gradient(135deg,
      rgba(26, 110, 255, .10) 0%,
      rgba(0, 194, 255, .07) 40%,
      rgba(139, 92, 246, .07) 100%),
    linear-gradient(180deg, rgba(11, 20, 40, .96), rgba(5, 10, 26, .98)) !important;
  border: 1px solid rgba(26, 110, 255, .22) !important;
  box-shadow: 0 16px 48px rgba(0, 0, 0, .3), var(--v105-glow-blue) !important;
  animation: v105-hero-in 0.4s cubic-bezier(0.34, 1.2, 0.64, 1) both !important;
}

@keyframes v105-hero-in {
  from {
    opacity: 0;
    transform: scale(0.97) translateY(12px);
  }

  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

/* ──────────────────────────────────────────────────────────────
   3. MOBILE — EXECUTIVE TOPBAR FULL REWRITE (≤ 768px)
   ────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {

  /* Stack topbar brand + user on one line, tabs below */
  .executive-topbar {
    flex-direction: column !important;
    padding: 0 !important;
    gap: 0 !important;
    border-radius: 0 !important;
  }

  /* Top row */
  .executive-brand {
    padding: 10px 14px 8px !important;
    width: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
  }

  .executive-brand>div {
    display: flex !important;
    flex-direction: column !important;
  }

  .executive-brand strong {
    font-size: 14px !important;
  }

  .executive-brand span {
    font-size: 9px !important;
  }

  .executive-user {
    padding: 0 14px 8px !important;
    gap: 6px !important;
    width: 100% !important;
    justify-content: flex-end !important;
    flex-wrap: nowrap !important;
  }

  .executive-user .user-chip {
    max-width: 120px !important;
    font-size: 11px !important;
  }

  .executive-user .button {
    padding: 6px 10px !important;
    font-size: 11px !important;
    border-radius: 8px !important;
  }

  /* Tabs: single scrollable row with smaller text */
  .executive-tabs {
    padding: 6px 10px 10px !important;
    gap: 5px !important;
    border-top: 1px solid rgba(26, 110, 255, .12) !important;
  }

  .executive-tabs button {
    padding: 7px 13px !important;
    font-size: 12px !important;
    border-radius: 999px !important;
  }

  /* Page head — compact */
  .executive-page-head {
    margin-bottom: 16px !important;
    padding-bottom: 12px !important;
  }

  .executive-page-head h1 {
    font-size: 20px !important;
  }

  .role-chip {
    font-size: 11px !important;
    padding: 5px 12px !important;
  }

  /* Metrics grid — 2 columns on phone */
  .executive-shell .metric-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
  }

  .executive-shell .metric {
    padding: 14px 12px !important;
    border-radius: 14px !important;
  }

  /* Hero — compact on mobile */
  .executive-hero {
    flex-direction: column !important;
    gap: 20px !important;
    padding: 20px !important;
  }
}

@media (max-width: 420px) {
  .executive-tabs button {
    padding: 6px 11px !important;
    font-size: 11.5px !important;
  }

  .executive-user .user-chip {
    display: none !important;
  }

  /* hide on very small screens */
  .executive-shell .metric-grid {
    grid-template-columns: 1fr 1fr !important;
  }
}

/* ──────────────────────────────────────────────────────────────
   4. EMPLOYEE APP — HERO CARD & HOME IMPROVEMENTS
   ────────────────────────────────────────────────────────────── */

/* Hero card */
.employee-home-hero,
.employee-hero-card,
[class*="home-hero"],
.home-welcome {
  background:
    linear-gradient(135deg,
      rgba(0, 194, 255, .10) 0%,
      rgba(26, 110, 255, .08) 50%,
      rgba(139, 92, 246, .06) 100%),
    linear-gradient(180deg, rgba(11, 20, 40, .97), rgba(5, 10, 26, .97)) !important;
  border: 1px solid rgba(0, 194, 255, .22) !important;
  border-radius: 20px !important;
  box-shadow: 0 16px 48px rgba(0, 0, 0, .36), var(--v105-glow-cyan) !important;
  position: relative !important;
  overflow: hidden !important;
}

.employee-home-hero::before {
  content: '';
  position: absolute;
  top: -40%;
  inset-inline-end: -5%;
  width: 180px;
  height: 180px;
  background: radial-gradient(circle, rgba(0, 194, 255, .08), transparent 65%);
  border-radius: 50%;
  pointer-events: none;
  animation: v105-hero-orb 6s ease-in-out infinite alternate;
}

@keyframes v105-hero-orb {
  from {
    transform: scale(1);
    opacity: 0.5;
  }

  to {
    transform: scale(1.4) translate(-8%, 8%);
    opacity: 0.9;
  }
}

/* Compact metric badges (the 4/5 stats grid) */
.compact-metric-badge {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 3px !important;
  padding: 13px 8px !important;
  border-radius: 16px !important;
  border: 1px solid rgba(0, 194, 255, .14) !important;
  background: linear-gradient(180deg, rgba(11, 20, 40, .90), rgba(5, 10, 26, .85)) !important;
  cursor: pointer !important;
  transition:
    transform var(--v105-spring),
    box-shadow var(--v105-transition),
    border-color var(--v105-transition) !important;
  text-align: center !important;
  overflow: hidden !important;
  position: relative !important;
}

.compact-metric-badge:hover {
  transform: translateY(-4px) scale(1.04) !important;
  border-color: rgba(0, 194, 255, .32) !important;
  box-shadow: 0 12px 32px rgba(0, 0, 0, .32), var(--v105-glow-cyan) !important;
}

.compact-metric-badge:active {
  transform: translateY(0) scale(0.97) !important;
}

.compact-metric-badge .badge-icon {
  font-size: 20px !important;
  line-height: 1 !important;
  display: block !important;
}

.compact-metric-badge strong {
  font-size: 19px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  background: linear-gradient(135deg, #00C2FF, #1A6EFF) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  font-variant-numeric: tabular-nums !important;
  display: block !important;
}

.compact-metric-badge>span:last-child {
  font-size: 10px !important;
  color: #7A94C1 !important;
  line-height: 1.3 !important;
  display: block !important;
}

/* Attendance punch card */
.attendance-status-card,
.punch-card {
  background:
    linear-gradient(135deg, rgba(0, 214, 143, .07), rgba(0, 194, 255, .07), rgba(5, 10, 26, .94)) !important;
  border: 1px solid rgba(0, 194, 255, .18) !important;
  border-radius: 20px !important;
}

/* Punch button */
.punch-btn,
button[data-action="punch"],
.btn-punch {
  background: linear-gradient(135deg, #00C2FF, #1A6EFF) !important;
  color: #031022 !important;
  font-weight: 900 !important;
  border-radius: 14px !important;
  border: none !important;
  padding: 14px 24px !important;
  font-size: 15px !important;
  box-shadow: 0 8px 28px rgba(0, 194, 255, .30) !important;
  transition: transform var(--v105-spring), box-shadow var(--v105-transition) !important;
  cursor: pointer !important;
  font-family: inherit !important;
  letter-spacing: 0.02em !important;
}

.punch-btn:hover:not([disabled]) {
  transform: translateY(-3px) !important;
  box-shadow: 0 14px 36px rgba(0, 194, 255, .44) !important;
}

/* ──────────────────────────────────────────────────────────────
   5. EMPLOYEE BOTTOM NAV — COMPLETE REDESIGN
   ────────────────────────────────────────────────────────────── */
.employee-bottom-nav {
  background: rgba(5, 10, 26, .97) !important;
  border-top: 1px solid rgba(0, 194, 255, .14) !important;
  box-shadow: 0 -12px 36px rgba(0, 0, 0, .36) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  padding-bottom: env(safe-area-inset-bottom, 0px) !important;
}

body.employee-portal .employee-bottom-nav button {
  flex: 1 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 3px !important;
  border: none !important;
  background: transparent !important;
  color: #647A9B !important;
  cursor: pointer !important;
  padding: 10px 4px !important;
  border-radius: 12px !important;
  margin: 4px 2px !important;
  transition:
    background var(--v105-transition),
    color var(--v105-transition),
    transform var(--v105-spring),
    box-shadow var(--v105-transition) !important;
  font-family: inherit !important;
  min-width: 0 !important;
}

body.employee-portal .employee-bottom-nav button:hover:not(.is-active) {
  background: rgba(0, 194, 255, .08) !important;
  color: #9AB0CC !important;
  transform: translateY(-2px) !important;
}

body.employee-portal .employee-bottom-nav button.is-active {
  background: linear-gradient(135deg, rgba(0, 194, 255, .16), rgba(26, 110, 255, .18)) !important;
  color: #00C2FF !important;
  transform: translateY(-3px) !important;
  box-shadow: 0 6px 20px rgba(0, 194, 255, .20) !important;
}

body.employee-portal .employee-bottom-nav button.is-active strong {
  color: #00C2FF !important;
  -webkit-text-fill-color: #00C2FF !important;
}

/* Punch button in nav — special highlight */
body.employee-portal .employee-bottom-nav button[data-route="punch"] {
  background: linear-gradient(135deg, rgba(0, 194, 255, .18), rgba(26, 110, 255, .22)) !important;
  border: 1px solid rgba(0, 194, 255, .24) !important;
  border-radius: 16px !important;
  color: #00C2FF !important;
  padding: 8px 10px !important;
  margin: 6px 4px !important;
}

body.employee-portal .employee-bottom-nav button[data-route="punch"].is-active {
  background: linear-gradient(135deg, #00C2FF, #1A6EFF) !important;
  color: #031022 !important;
  box-shadow: 0 8px 24px rgba(0, 194, 255, .36) !important;
}

body.employee-portal .employee-bottom-nav button[data-route="punch"].is-active strong {
  color: #031022 !important;
  -webkit-text-fill-color: #031022 !important;
}

/* ──────────────────────────────────────────────────────────────
   6. ADMIN PORTAL — SIDEBAR & SHELL IMPROVEMENTS
   ────────────────────────────────────────────────────────────── */
.sidebar {
  background: var(--v105-surface-b) !important;
  border-inline-end: 1px solid rgba(26, 110, 255, .12) !important;
  box-shadow: 4px 0 24px rgba(0, 0, 0, .24) !important;
}

/* Brand area */
.brand {
  border-bottom: 1px solid rgba(26, 110, 255, .10) !important;
  padding: 16px 14px !important;
  transition: background var(--v105-transition) !important;
}

.brand:hover {
  background: rgba(26, 110, 255, .06) !important;
}

.brand img {
  transition: transform var(--v105-spring), filter var(--v105-transition) !important;
}

.brand:hover img {
  transform: scale(1.07) rotate(-2deg) !important;
  filter: drop-shadow(0 0 12px rgba(0, 194, 255, .4)) !important;
}

/* Nav buttons */
.nav button,
.nav a {
  border-radius: 12px !important;
  transition:
    background var(--v105-transition),
    color var(--v105-transition),
    transform var(--v105-spring),
    box-shadow var(--v105-transition) !important;
}

.nav button:hover:not(.is-active) {
  background: rgba(26, 110, 255, .08) !important;
  color: #EEF5FF !important;
  transform: translateX(-2px) !important;
}

html[dir="rtl"] .nav button:hover:not(.is-active) {
  transform: translateX(2px) !important;
}

.nav button.is-active {
  background: linear-gradient(135deg, rgba(0, 194, 255, .14), rgba(26, 110, 255, .16)) !important;
  color: #00C2FF !important;
  box-shadow: inset -3px 0 0 #00C2FF !important;
  font-weight: 800 !important;
}

html[dir="rtl"] .nav button.is-active {
  box-shadow: inset 3px 0 0 #00C2FF !important;
}

/* Topbar */
.topbar {
  background: rgba(5, 10, 26, .97) !important;
  border-bottom: 1px solid rgba(26, 110, 255, .14) !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, .28) !important;
  backdrop-filter: blur(16px) !important;
}

.topbar h1 {
  background: linear-gradient(90deg, #EEF5FF, #7DC8FF) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}

/* Main area page-in animation */
.main>*,
.admin-main>* {
  animation: v105-page-in 0.22s ease both;
}

/* Panel improvements */
.panel {
  border: 1px solid rgba(26, 110, 255, .12) !important;
  border-radius: 20px !important;
  background:
    linear-gradient(135deg, rgba(11, 20, 40, .94), rgba(8, 14, 32, .96)) !important;
  transition:
    border-color var(--v105-transition),
    box-shadow var(--v105-transition) !important;
}

.panel:hover {
  border-color: rgba(26, 110, 255, .22) !important;
}

/* ──────────────────────────────────────────────────────────────
   7. METRIC CARDS — UNIVERSAL IMPROVEMENTS
   ────────────────────────────────────────────────────────────── */
.metric-card,
.metric,
.stat-card {
  position: relative !important;
  overflow: hidden !important;
  background:
    linear-gradient(135deg,
      rgba(26, 110, 255, .09) 0%,
      rgba(0, 194, 255, .05) 50%,
      rgba(8, 14, 32, .92) 100%) !important;
  border: 1px solid rgba(26, 110, 255, .16) !important;
  border-radius: 18px !important;
  transition:
    transform var(--v105-spring),
    box-shadow var(--v105-transition),
    border-color var(--v105-transition) !important;
}

.metric-card:hover,
.metric:hover,
.stat-card:hover {
  transform: translateY(-4px) !important;
  border-color: rgba(26, 110, 255, .36) !important;
  box-shadow: 0 20px 50px rgba(0, 0, 0, .36), var(--v105-glow-blue) !important;
}

.metric-card strong,
.metric strong,
.stat-card strong {
  background: linear-gradient(135deg, #00C2FF, #1A6EFF) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  font-variant-numeric: tabular-nums !important;
  display: block !important;
  line-height: 1.1 !important;
}

/* Count-up animation class */
.counting-up {
  animation: v105-count-pulse 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) both !important;
}

@keyframes v105-count-pulse {
  from {
    transform: scale(0.88);
    opacity: 0.7;
  }

  to {
    transform: scale(1);
    opacity: 1;
  }
}

/* ──────────────────────────────────────────────────────────────
   8. BUTTONS — UNIVERSAL RIPPLE + POLISH
   ────────────────────────────────────────────────────────────── */
button,
.button {
  font-family: inherit !important;
}

.button {
  position: relative !important;
  overflow: hidden !important;
  isolation: isolate !important;
  transition:
    transform var(--v105-spring),
    box-shadow var(--v105-transition),
    background var(--v105-transition),
    border-color var(--v105-transition),
    color var(--v105-transition),
    opacity var(--v105-transition) !important;
}

/* Ripple pseudoelement */
.button::after {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  background: radial-gradient(circle at var(--x, 50%) var(--y, 50%),
      rgba(255, 255, 255, .22) 0%, transparent 68%) !important;
  opacity: 0 !important;
  transition: opacity 0.45s !important;
  pointer-events: none !important;
  border-radius: inherit !important;
  z-index: 1 !important;
}

.button:active::after {
  opacity: 1 !important;
  transition: opacity 0s !important;
}

.button:hover:not([disabled]):not(:disabled) {
  transform: translateY(-2px) !important;
}

.button:active:not([disabled]):not(:disabled) {
  transform: translateY(0) !important;
}

.button.primary {
  background: linear-gradient(135deg, #00C2FF, #1A6EFF) !important;
  color: #031022 !important;
  border: none !important;
  font-weight: 900 !important;
  box-shadow: 0 6px 22px rgba(26, 110, 255, .28) !important;
}

.button.primary:hover:not([disabled]) {
  box-shadow: 0 12px 32px rgba(26, 110, 255, .42) !important;
}

.button.danger {
  background: rgba(255, 59, 107, .14) !important;
  border: 1px solid rgba(255, 59, 107, .32) !important;
  color: #FF3B6B !important;
}

.button.danger:hover:not([disabled]) {
  background: rgba(255, 59, 107, .22) !important;
  box-shadow: 0 8px 24px rgba(255, 59, 107, .24) !important;
}

.button.ghost {
  background: rgba(26, 110, 255, .08) !important;
  border: 1px solid rgba(26, 110, 255, .22) !important;
  color: #9AB0CC !important;
}

.button.ghost:hover:not([disabled]) {
  background: rgba(26, 110, 255, .16) !important;
  border-color: rgba(26, 110, 255, .38) !important;
  color: #EEF5FF !important;
}

/* ──────────────────────────────────────────────────────────────
   9. FORM INPUTS — UNIVERSAL POLISH
   ────────────────────────────────────────────────────────────── */
input,
select,
textarea {
  transition:
    border-color var(--v105-transition),
    box-shadow var(--v105-transition),
    transform 0.14s ease !important;
}

input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: none !important;
  border-color: #00C2FF !important;
  box-shadow: 0 0 0 4px rgba(0, 194, 255, .16), inset 0 1px 0 rgba(0, 194, 255, .06) !important;
  transform: translateY(-1px) !important;
}

input.is-valid,
select.is-valid {
  border-color: #00D68F !important;
}

input.is-invalid,
select.is-invalid {
  border-color: #FF3B6B !important;
  animation: v105-shake 0.32s ease both !important;
}

@keyframes v105-shake {

  0%,
  100% {
    transform: translateX(0);
  }

  25% {
    transform: translateX(-6px);
  }

  75% {
    transform: translateX(6px);
  }
}

/* ──────────────────────────────────────────────────────────────
   10. TABLE — STICKY HEADERS + MOBILE CARD VIEW
   ────────────────────────────────────────────────────────────── */
.table-wrap {
  overflow-x: auto;
  border-radius: 16px;
}

table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
}

thead th {
  position: sticky !important;
  top: 0 !important;
  z-index: 3 !important;
  background: rgba(5, 10, 26, .96) !important;
  backdrop-filter: blur(12px) !important;
  border-bottom: 1px solid rgba(26, 110, 255, .20) !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  color: #647A9B !important;
  padding: 11px 14px !important;
  white-space: nowrap !important;
  transition: color var(--v105-transition) !important;
}

thead th:hover {
  color: #9AB0CC !important;
}

tbody tr {
  transition: background var(--v105-transition) !important;
}

tbody tr:hover {
  background: rgba(26, 110, 255, .04) !important;
}

tbody td {
  padding: 11px 14px !important;
  border-bottom: 1px solid rgba(26, 110, 255, .06) !important;
  font-size: 14px !important;
  vertical-align: middle !important;
}

tbody tr:last-child td {
  border-bottom: none !important;
}

@media (max-width: 600px) {

  .table-responsive table,
  .table-responsive thead,
  .table-responsive tbody,
  .table-responsive th,
  .table-responsive td,
  .table-responsive tr {
    display: block !important;
  }

  .table-responsive thead tr {
    position: absolute;
    top: -9999px;
    left: -9999px;
  }

  .table-responsive tbody tr {
    border: 1px solid rgba(26, 110, 255, .14) !important;
    border-radius: 14px !important;
    margin-bottom: 10px !important;
    padding: 8px 0 !important;
    background: rgba(11, 20, 40, .86) !important;
  }

  .table-responsive td {
    border: none !important;
    border-bottom: 1px solid rgba(26, 110, 255, .06) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 8px !important;
    padding: 9px 14px !important;
    font-size: 13px !important;
  }

  .table-responsive td::before {
    content: attr(data-label);
    font-weight: 800;
    color: #647A9B;
    font-size: 11px;
    letter-spacing: 0.04em;
    min-width: 80px;
    flex-shrink: 0;
  }

  .table-responsive td:last-child {
    border-bottom: none !important;
  }
}

/* ──────────────────────────────────────────────────────────────
   11. EMPTY STATES
   ────────────────────────────────────────────────────────────── */
.empty-state {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  padding: 52px 24px !important;
  text-align: center !important;
  color: #647A9B !important;
  animation: v105-page-in 0.3s ease both !important;
}

.empty-state .empty-icon {
  font-size: 48px;
  line-height: 1;
  opacity: 0.4;
  display: block;
  animation: v105-float 4s ease-in-out infinite;
}

@keyframes v105-float {

  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-8px);
  }
}

.empty-state strong {
  font-size: 15px !important;
  color: #9AB0CC !important;
  display: block;
}

.empty-state p {
  margin: 0;
  font-size: 13px !important;
}

/* ──────────────────────────────────────────────────────────────
   12. TOASTS
   ────────────────────────────────────────────────────────────── */
.hr-toast,
.v104-toast,
[class*="toast"] {
  position: fixed !important;
  bottom: 96px !important;
  left: 50% !important;
  transform: translateX(-50%) translateY(24px) !important;
  z-index: 900 !important;
  min-width: 240px !important;
  max-width: min(90vw, 420px) !important;
  padding: 13px 20px !important;
  border-radius: 14px !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  text-align: center !important;
  opacity: 0 !important;
  transition: opacity 0.26s ease, transform 0.26s cubic-bezier(0.34, 1.4, 0.64, 1) !important;
  backdrop-filter: blur(16px) !important;
  pointer-events: none !important;
}

.hr-toast.is-visible,
[class*="toast"].is-visible {
  opacity: 1 !important;
  transform: translateX(-50%) translateY(0) !important;
}

.hr-toast.ok {
  background: rgba(0, 214, 143, .18) !important;
  border: 1px solid rgba(0, 214, 143, .32) !important;
  color: #5fffc2 !important;
}

.hr-toast.error {
  background: rgba(255, 59, 107, .18) !important;
  border: 1px solid rgba(255, 59, 107, .32) !important;
  color: #ffb0c0 !important;
}

/* ──────────────────────────────────────────────────────────────
   13. STATUS BADGES
   ────────────────────────────────────────────────────────────── */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.04em;
  white-space: nowrap;
}

.badge.ok,
.badge.success,
.badge.active,
.badge.present,
.badge.approved {
  background: rgba(0, 214, 143, .12);
  border: 1px solid rgba(0, 214, 143, .26);
  color: #00D68F;
}

.badge.error,
.badge.danger,
.badge.absent,
.badge.rejected {
  background: rgba(255, 59, 107, .12);
  border: 1px solid rgba(255, 59, 107, .24);
  color: #FF3B6B;
}

.badge.warn,
.badge.warning,
.badge.pending,
.badge.late {
  background: rgba(245, 158, 11, .12);
  border: 1px solid rgba(245, 158, 11, .24);
  color: #F59E0B;
}

.badge.info,
.badge.remote,
.badge.mission {
  background: rgba(0, 194, 255, .10);
  border: 1px solid rgba(0, 194, 255, .22);
  color: #00C2FF;
}

/* ──────────────────────────────────────────────────────────────
   14. SCROLLBAR POLISH
   ────────────────────────────────────────────────────────────── */
::-webkit-scrollbar {
  width: 7px;
  height: 7px;
}

::-webkit-scrollbar-track {
  background: rgba(5, 10, 26, .5);
  border-radius: 999px;
}

::-webkit-scrollbar-thumb {
  background: rgba(26, 42, 80, .9);
  border-radius: 999px;
  border: 2px solid rgba(5, 10, 26, .4);
}

::-webkit-scrollbar-thumb:hover {
  background: rgba(26, 110, 255, .5);
}

::-webkit-scrollbar-corner {
  background: transparent;
}

/* ──────────────────────────────────────────────────────────────
   15. OFFLINE/ONLINE BANNERS (v104 styles fix)
   ────────────────────────────────────────────────────────────── */
.offline-banner {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 9999 !important;
  background: rgba(255, 59, 107, .92) !important;
  color: #fff !important;
  text-align: center !important;
  padding: 9px 20px !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  backdrop-filter: blur(10px) !important;
  animation: v105-banner-in 0.24s ease both !important;
}

.online-restored-banner {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 9999 !important;
  background: rgba(0, 214, 143, .90) !important;
  color: #031022 !important;
  text-align: center !important;
  padding: 9px 20px !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  backdrop-filter: blur(10px) !important;
  animation: v105-banner-in 0.24s ease both !important;
}

@keyframes v105-banner-in {
  from {
    transform: translateY(-100%);
    opacity: 0;
  }

  to {
    transform: translateY(0);
    opacity: 1;
  }
}

/* ──────────────────────────────────────────────────────────────
   16. PRINT FIXES
   ────────────────────────────────────────────────────────────── */
@media print {
  body {
    background: #fff !important;
    color: #111 !important;
  }

  .sidebar,
  .topbar,
  .employee-bottom-nav,
  .executive-topbar,
  .hr-toast,
  .offline-banner,
  .online-restored-banner,
  .scroll-top,
  .nav-fab,
  .modal-backdrop {
    display: none !important;
  }

  .main,
  .executive-main,
  .employee-main,
  #app {
    margin: 0 !important;
    padding: 0 !important;
    max-width: 100% !important;
  }

  .panel,
  .metric-card,
  .metric {
    box-shadow: none !important;
    border: 1px solid #ccc !important;
    background: #fff !important;
    break-inside: avoid;
  }

  .metric-card strong,
  .metric strong {
    -webkit-text-fill-color: #111 !important;
    color: #111 !important;
  }

  table {
    border-collapse: collapse !important;
  }

  th,
  td {
    border: 1px solid #bbb !important;
    padding: 7px 10px !important;
    color: #111 !important;
    background: #fff !important;
  }

  thead th {
    background: #f0f0f0 !important;
  }

  @page {
    margin: 2cm 1.5cm;
  }
}

/* ──────────────────────────────────────────────────────────────
   17. MODAL IMPROVEMENTS
   ────────────────────────────────────────────────────────────── */
.modal-backdrop {
  animation: v105-backdrop-in 0.2s ease both !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
}

@keyframes v105-backdrop-in {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

.confirm-dialog,
.modal-box {
  animation: v105-modal-in 0.28s cubic-bezier(0.34, 1.4, 0.64, 1) both !important;
  border: 1px solid rgba(26, 110, 255, .22) !important;
  box-shadow: 0 32px 80px rgba(0, 0, 0, .5), var(--v105-glow-blue) !important;
  border-radius: 22px !important;
}

@keyframes v105-modal-in {
  from {
    opacity: 0;
    transform: scale(0.88) translateY(20px);
  }

  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

/* ──────────────────────────────────────────────────────────────
   18. PROGRESS BAR (page loading)
   ────────────────────────────────────────────────────────────── */
.v104-progress-bar,
.progress-bar-top {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  height: 3px !important;
  background: linear-gradient(90deg, #00C2FF, #1A6EFF, #8B5CF6) !important;
  z-index: 9999 !important;
  border-radius: 0 0 3px 3px !important;
  animation: v105-progress 1s ease forwards !important;
}

@keyframes v105-progress {
  from {
    opacity: 1;
    transform: scaleX(0);
    transform-origin: left;
  }

  80% {
    opacity: 1;
    transform: scaleX(0.9);
  }

  to {
    opacity: 0;
    transform: scaleX(1);
  }
}

/* ──────────────────────────────────────────────────────────────
   19. NOTIFICATION BADGE
   ────────────────────────────────────────────────────────────── */
.notification-badge,
.notif-count,
[class*="badge-count"] {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 18px !important;
  height: 18px !important;
  padding: 0 5px !important;
  border-radius: 999px !important;
  background: #FF3B6B !important;
  color: #fff !important;
  font-size: 10px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  animation: v105-badge-pop 0.32s cubic-bezier(0.34, 1.56, 0.64, 1) both !important;
}

@keyframes v105-badge-pop {
  from {
    transform: scale(0);
  }

  to {
    transform: scale(1);
  }
}

/* ──────────────────────────────────────────────────────────────
   20. EXECUTIVE TOPBAR — BRAND/USER INLINE ON DESKTOP
   ────────────────────────────────────────────────────────────── */
@media (min-width: 769px) {
  .executive-topbar {
    flex-direction: row !important;
    align-items: center !important;
    padding: 0 24px !important;
    gap: 16px !important;
    min-height: 60px !important;
  }

  .executive-brand {
    padding: 0 !important;
    flex-shrink: 0 !important;
  }

  .executive-tabs {
    flex: 1 !important;
    border-top: none !important;
    padding: 8px 0 !important;
    min-width: 0 !important;
  }

  .executive-user {
    padding: 0 !important;
    flex-shrink: 0 !important;
  }
}

/* ── from v106-mobile-stability.css ─────────────────────────────────── */
:root {
  --hr-v106-app-max: 480px;
  --hr-v106-bottom-nav-h: 74px;
  --hr-v106-safe-bottom: env(safe-area-inset-bottom, 0px);
  --hr-v106-blue: #1A6EFF;
  --hr-v106-cyan: #00C2FF;
  --hr-v106-surface: rgba(5, 14, 34, .96);
  --hr-v106-border: rgba(0, 194, 255, .20);
}

html,
body {
  width: 100%;
  max-width: 100%;
  overflow-x: hidden !important;
}

body.employee-portal {
  min-height: 100dvh;
  background: #050A1A !important;
  padding-bottom: calc(var(--hr-v106-bottom-nav-h) + var(--hr-v106-safe-bottom) + 16px) !important;
}

.employee-app,
.employee-shell {
  width: 100% !important;
  max-width: min(100vw, var(--hr-v106-app-max)) !important;
  margin-inline: auto !important;
  overflow-x: hidden !important;
  position: relative !important;
}

.employee-main {
  width: 100% !important;
  max-width: 100% !important;
  padding-inline: clamp(10px, 3vw, 16px) !important;
  padding-bottom: calc(var(--hr-v106-bottom-nav-h) + var(--hr-v106-safe-bottom) + 20px) !important;
}

.employee-topbar {
  width: 100% !important;
  max-width: min(100vw, var(--hr-v106-app-max)) !important;
  margin-inline: auto !important;
  inset-inline: 0 !important;
  padding-inline: clamp(10px, 3vw, 14px) !important;
  gap: 10px !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: center !important;
  overflow: hidden !important;
}

.employee-brand,
.employee-user {
  min-width: 0 !important;
  max-width: 100% !important;
}

.employee-brand>div,
.employee-user>span {
  min-width: 0 !important;
}

.employee-brand strong,
.employee-brand span,
.employee-user strong,
.employee-user small {
  display: block !important;
  max-width: 100% !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.employee-user {
  justify-self: end !important;
  max-width: 52vw !important;
}

.employee-page-head {
  margin: 18px 0 14px !important;
  padding-inline: 2px !important;
}

.employee-page-head h1 {
  font-size: clamp(2rem, 9vw, 2.75rem) !important;
  line-height: 1.08 !important;
}

.employee-page-head p {
  max-width: 100% !important;
  overflow-wrap: anywhere !important;
}

.employee-card,
.panel,
.metric,
.metric-card,
.employee-stat,
.compact-metric-badge,
.quick-action-card,
.employee-list-item {
  max-width: 100% !important;
  min-width: 0 !important;
  overflow: hidden !important;
  overflow-wrap: anywhere !important;
}

.employee-card.full {
  grid-column: 1 / -1 !important;
}

.employee-actions-row,
.form-actions,
.toolbar {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: stretch !important;
  gap: 10px !important;
  min-width: 0 !important;
}

.employee-actions-row>*,
.form-actions>*,
.toolbar>* {
  min-width: 0 !important;
}

.employee-actions-row .button,
.employee-actions-row button,
.employee-card .button,
.employee-card button[type="button"] {
  max-width: 100% !important;
  min-height: 44px !important;
  white-space: normal !important;
  word-break: normal !important;
  overflow-wrap: anywhere !important;
}

.employee-actions-row .button.full,
.employee-actions-row button.full,
.button.full {
  width: 100% !important;
  flex: 1 1 100% !important;
}

/* Location page: prevent the Send Location button/card from becoming a huge square on laptop/mobile. */
.location-status-card .button,
.employee-card:has([data-send-location]) .button,
button[data-send-location],
button[data-location-submit],
button[data-route="location"].button {
  min-height: 48px !important;
  height: auto !important;
  max-height: 64px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 12px 16px !important;
}

.readable-location,
.gps-map-preview,
.map-card,
.location-card,
.live-map-board {
  max-width: 100% !important;
  min-height: 0 !important;
  overflow: hidden !important;
}

/* Bottom nav: lock to employee app width instead of full desktop viewport. */
.employee-bottom-nav,
body.employee-portal .employee-bottom-nav {
  position: fixed !important;
  left: 50% !important;
  right: auto !important;
  transform: translateX(-50%) !important;
  bottom: 0 !important;
  width: min(100vw, var(--hr-v106-app-max)) !important;
  max-width: var(--hr-v106-app-max) !important;
  height: calc(var(--hr-v106-bottom-nav-h) + var(--hr-v106-safe-bottom)) !important;
  display: grid !important;
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  gap: 4px !important;
  padding: 6px 6px calc(6px + var(--hr-v106-safe-bottom)) !important;
  border-radius: 20px 20px 0 0 !important;
  background: linear-gradient(180deg, rgba(7, 17, 38, .98), rgba(2, 8, 22, .99)) !important;
  border: 1px solid rgba(0, 194, 255, .18) !important;
  border-bottom: 0 !important;
  box-shadow: 0 -12px 34px rgba(0, 0, 0, .42) !important;
  z-index: 900 !important;
  overflow: hidden !important;
}

body.employee-portal .employee-bottom-nav button,
.employee-bottom-nav button {
  min-width: 0 !important;
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  padding: 6px 3px !important;
  border-radius: 14px !important;
  display: grid !important;
  place-items: center !important;
  align-content: center !important;
  gap: 3px !important;
  overflow: hidden !important;
}

.employee-bottom-nav button strong {
  font-size: 17px !important;
  line-height: 1 !important;
}

.employee-bottom-nav button span {
  max-width: 100% !important;
  font-size: 9.5px !important;
  line-height: 1.15 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.employee-bottom-nav button.is-active {
  transform: none !important;
  background: linear-gradient(135deg, #00C2FF, #1A6EFF) !important;
  color: #031022 !important;
  box-shadow: 0 8px 22px rgba(0, 194, 255, .26) !important;
}

.employee-bottom-nav button.is-active strong,
.employee-bottom-nav button.is-active span {
  color: #031022 !important;
  -webkit-text-fill-color: #031022 !important;
}

/* Password field/toggle: final override for login, gate, admin, executive. */
.login-password-field,
.password-field,
label:has(.password-toggle) {
  position: relative !important;
  display: block !important;
  width: 100% !important;
}

.login-password-field input,
.password-field input,
label:has(.password-toggle) input[type="password"],
label:has(.password-toggle) input[type="text"] {
  width: 100% !important;
  padding-inline-end: 92px !important;
  min-height: 48px !important;
}

.password-toggle,
.login-panel .password-toggle,
.gate .password-toggle,
body.employee-portal .password-toggle {
  position: absolute !important;
  inset-inline-end: 8px !important;
  top: 50% !important;
  bottom: auto !important;
  transform: translateY(-50%) !important;
  width: auto !important;
  min-width: 68px !important;
  max-width: 78px !important;
  height: 34px !important;
  min-height: 34px !important;
  padding: 0 10px !important;
  border-radius: 999px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 1 !important;
  font-size: 12px !important;
  z-index: 5 !important;
}

/* Gate and login mobile. */
.gate,
.login-panel,
.employee-login-panel,
.executive-login-panel {
  width: min(100%, 430px) !important;
  max-width: calc(100vw - 20px) !important;
  margin-inline: auto !important;
}

.gate .target-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}

.gate .target {
  min-width: 0 !important;
}

/* Executive topbar/tabs responsive. */
.executive-shell {
  max-width: 100vw !important;
  overflow-x: hidden !important;
}

.executive-topbar {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  gap: 10px !important;
  align-items: center !important;
  padding: 10px clamp(8px, 3vw, 18px) !important;
  overflow: hidden !important;
}

.executive-brand,
.executive-user {
  min-width: 0 !important;
}

.executive-tabs {
  grid-column: 1 / -1 !important;
  width: 100% !important;
  max-width: 100% !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  display: flex !important;
  flex-wrap: nowrap !important;
  gap: 6px !important;
  padding: 5px !important;
  scroll-snap-type: x proximity !important;
  -webkit-overflow-scrolling: touch !important;
}

.executive-tabs button {
  flex: 0 0 auto !important;
  min-width: max-content !important;
  max-width: none !important;
  padding: 9px 13px !important;
  font-size: 12px !important;
  scroll-snap-align: center !important;
}

.executive-user {
  justify-content: end !important;
  flex-wrap: wrap !important;
}

.executive-user .button {
  min-height: 38px !important;
  padding: 8px 10px !important;
}

.executive-main {
  max-width: min(100%, 1120px) !important;
  overflow-x: hidden !important;
  padding-inline: clamp(10px, 3vw, 22px) !important;
}

.executive-main .metric-grid,
.executive-metric-grid {
  grid-template-columns: repeat(auto-fit, minmax(132px, 1fr)) !important;
  gap: 10px !important;
}

.executive-main .metric,
.executive-main .metric-card,
.exec-metric {
  min-width: 0 !important;
  padding: 14px 12px !important;
}

.exec-metric strong,
.executive-main .metric strong {
  font-size: clamp(1.5rem, 7vw, 2.1rem) !important;
}

/* Local CORS diagnostic banner. */
.hr-cors-local-warning {
  position: fixed;
  inset-inline: 10px;
  bottom: calc(var(--hr-v106-bottom-nav-h) + var(--hr-v106-safe-bottom) + 12px);
  z-index: 1200;
  width: min(460px, calc(100vw - 20px));
  margin-inline: auto;
  padding: 12px 14px;
  border: 1px solid rgba(255, 184, 77, .42);
  border-radius: 16px;
  background: rgba(40, 24, 4, .94);
  color: #FFE8B6;
  box-shadow: 0 12px 34px rgba(0, 0, 0, .35);
  font: 800 12px/1.75 Cairo, Tahoma, sans-serif;
}

.hr-cors-local-warning button {
  margin-top: 8px;
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: 999px;
  padding: 6px 12px;
  background: rgba(255, 255, 255, .08);
  color: inherit;
  font: inherit;
}

@media (max-width: 520px) {
  :root {
    --hr-v106-bottom-nav-h: 70px;
  }

  .employee-topbar {
    grid-template-columns: 1fr !important;
    align-items: stretch !important;
  }

  .employee-user {
    justify-self: stretch !important;
    max-width: 100% !important;
  }

  .employee-page-head h1 {
    font-size: clamp(1.85rem, 10vw, 2.35rem) !important;
  }

  .gate .target-grid {
    grid-template-columns: 1fr !important;
  }

  .home-stats-grid,
  .quick-actions-grid.unified-actions,
  .employee-metrics,
  .metric-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .compact-metric-badge {
    min-height: 76px !important;
    padding: 9px 6px !important;
  }

  .compact-metric-badge strong {
    font-size: 1.25rem !important;
  }

  .employee-card {
    border-radius: 18px !important;
    padding: 14px !important;
  }

  .employee-actions-row .button,
  .employee-actions-row button {
    flex: 1 1 100% !important;
  }

  .executive-topbar {
    grid-template-columns: 1fr !important;
  }

  .executive-user {
    justify-content: stretch !important;
    width: 100% !important;
  }

  .executive-user .button {
    flex: 1 1 calc(50% - 6px) !important;
  }
}

@media (max-width: 349px) {
  .employee-bottom-nav button span {
    font-size: 8.5px !important;
  }

  .employee-bottom-nav button strong {
    font-size: 15px !important;
  }

  .home-stats-grid,
  .quick-actions-grid.unified-actions,
  .employee-metrics,
  .metric-grid {
    grid-template-columns: 1fr !important;
  }
}

@media (min-width: 760px) {
  body.employee-portal::before {
    content: "";
    position: fixed;
    inset-block: 0;
    left: 50%;
    width: min(100vw, var(--hr-v106-app-max));
    transform: translateX(-50%);
    background: linear-gradient(180deg, rgba(5, 10, 26, .18), rgba(5, 10, 26, .08));
    pointer-events: none;
    z-index: -1;
  }
}

/* ── from v107-final-ui-polish.css ─────────────────────────────────── */
:root {
  --v107-max-mobile: 480px;
  --v107-nav-height: 74px;
  --v107-calm-panel: linear-gradient(180deg, rgba(8, 21, 42, .96), rgba(5, 14, 30, .98));
  --v107-calm-border: rgba(68, 172, 255, .20);
}

html,
body {
  max-width: 100%;
  overflow-x: hidden !important;
}

body.employee-portal .employee-shell,
body.employee-portal .employee-main,
body.employee-portal .employee-topbar,
body.employee-portal .employee-bottom-nav {
  box-sizing: border-box;
}

body.employee-portal .employee-main {
  padding-bottom: calc(var(--v107-nav-height) + 22px + env(safe-area-inset-bottom)) !important;
}

body.employee-portal .employee-topbar {
  width: min(100%, var(--v107-max-mobile));
  margin-inline: auto !important;
  left: auto !important;
  right: auto !important;
}

body.employee-portal .employee-page-head {
  width: min(100%, var(--v107-max-mobile));
  margin-inline: auto !important;
  text-align: center;
}

body.employee-portal .employee-bottom-nav {
  position: fixed !important;
  left: 50% !important;
  right: auto !important;
  bottom: 0 !important;
  transform: translateX(-50%) !important;
  width: min(calc(100vw - 18px), var(--v107-max-mobile)) !important;
  max-width: var(--v107-max-mobile) !important;
  height: calc(var(--v107-nav-height) + env(safe-area-inset-bottom)) !important;
  padding: 8px 8px calc(8px + env(safe-area-inset-bottom)) !important;
  display: grid !important;
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  gap: 6px !important;
  border-radius: 22px 22px 0 0 !important;
  overflow: hidden !important;
}

body.employee-portal .employee-bottom-nav button {
  min-width: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  padding: 7px 4px !important;
  border-radius: 15px !important;
  gap: 2px !important;
}

body.employee-portal .employee-bottom-nav button strong {
  font-size: 16px !important;
  line-height: 1 !important;
}

body.employee-portal .employee-bottom-nav button span {
  font-size: 9px !important;
  line-height: 1.15 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

body.employee-portal .employee-grid,
body.employee-portal .employee-card,
body.employee-portal .employee-list,
body.employee-portal .employee-list-item {
  min-width: 0 !important;
  max-width: 100% !important;
}

body.employee-portal .employee-list-item {
  overflow: hidden !important;
  align-items: center !important;
  gap: 10px !important;
  background: var(--v107-calm-panel) !important;
  border-color: var(--v107-calm-border) !important;
}

body.employee-portal .employee-list-item>div:first-child {
  min-width: 0 !important;
  overflow: hidden !important;
}

body.employee-portal .employee-list-item strong,
body.employee-portal .employee-list-item span,
body.employee-portal .employee-list-item small {
  overflow: hidden;
  text-overflow: ellipsis;
}

body.employee-portal .employee-list-item small {
  white-space: normal !important;
  line-height: 1.55 !important;
}

body.employee-portal .list-item-side {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 6px !important;
  flex-wrap: wrap !important;
  max-width: 45% !important;
}

body.employee-portal .list-item-side .button {
  width: auto !important;
  min-width: 72px !important;
  max-width: 140px !important;
  padding: 8px 10px !important;
  font-size: 12px !important;
}

body.employee-portal .hr-punch-row,
body.employee-portal .location-history-item,
body.employee-portal .polished-history-list .employee-list-item {
  background: linear-gradient(135deg, rgba(8, 28, 48, .96), rgba(4, 17, 35, .98)) !important;
  border: 1px solid rgba(0, 194, 255, .18) !important;
  color: var(--emp-text, #eaf6ff) !important;
}

body.employee-portal .hr-punch-row::before,
body.employee-portal .location-history-item::before {
  display: none !important;
}

body.employee-portal .hr-punch-type-dot {
  box-shadow: 0 0 0 5px rgba(0, 194, 255, .08) !important;
}

body.employee-portal .attendance-floating-reminder,
.attendance-floating-reminder {
  left: 50% !important;
  right: auto !important;
  transform: translateX(-50%) translateY(14px) !important;
  width: min(calc(100vw - 24px), 420px) !important;
  max-height: 34svh !important;
  overflow: auto !important;
  bottom: calc(var(--v107-nav-height) + 14px + env(safe-area-inset-bottom)) !important;
  border-radius: 22px !important;
  padding: 14px !important;
}

body.employee-portal .attendance-floating-reminder.is-visible,
.attendance-floating-reminder.is-visible {
  transform: translateX(-50%) translateY(0) !important;
}

body.employee-portal .attendance-floating-actions,
.attendance-floating-actions {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 8px !important;
}

body.employee-portal .attendance-floating-actions .button,
.attendance-floating-actions .button {
  width: 100% !important;
  min-height: 44px !important;
}

body.employee-portal .attendance-floating-actions .button:nth-child(n+2) {
  display: none !important;
}

.hr-toast,
.online-restored-banner,
.offline-banner,
.sw-update-banner {
  max-width: min(calc(100vw - 24px), 440px) !important;
  margin-inline: auto !important;
  border-radius: 16px !important;
}

body.employee-portal .message,
body.employee-portal .empty-state {
  max-width: 100% !important;
  overflow: hidden !important;
}

body.employee-portal .compact-actions {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 8px !important;
}

body.employee-portal .compact-actions .button {
  width: 100% !important;
  min-height: 46px !important;
}

/* Compact, scrollable More drawer */
.more-drawer {
  left: 50% !important;
  right: auto !important;
  inset-inline: auto !important;
  transform: translate(-50%, 100%) !important;
  width: min(calc(100vw - 16px), 440px) !important;
  max-height: min(76svh, 620px) !important;
  border-radius: 24px 24px 0 0 !important;
}

.more-drawer.is-open {
  transform: translate(-50%, 0) !important;
}

.more-drawer-header {
  padding: 8px 14px 6px !important;
}

.more-drawer-title {
  font-size: 15px !important;
}

.more-drawer-close {
  width: 32px !important;
  height: 32px !important;
}

.more-drawer-handle {
  margin-top: 8px !important;
}

.more-drawer-body {
  overflow-y: auto !important;
  max-height: calc(min(76svh, 620px) - 58px) !important;
  padding: 4px 10px calc(10px + env(safe-area-inset-bottom)) !important;
}

.more-drawer-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 7px !important;
  margin-bottom: 8px !important;
}

.more-drawer-item {
  min-height: 56px !important;
  padding: 8px 5px !important;
  border-radius: 14px !important;
  gap: 4px !important;
}

.more-drawer-item .di-icon {
  font-size: 20px !important;
}

.more-drawer-item .di-label {
  font-size: 9.5px !important;
  line-height: 1.2 !important;
}

.more-drawer-section-label {
  font-size: 9px !important;
  padding: 7px 4px 4px !important;
  letter-spacing: .04em !important;
}

.employee-more-sheet {
  max-height: 72svh !important;
  overflow-y: auto !important;
  width: min(calc(100vw - 16px), 440px) !important;
}

.more-sheet-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 7px !important;
}

.more-sheet-grid button {
  min-height: 58px !important;
  padding: 8px 5px !important;
  border-radius: 14px !important;
}

.more-sheet-grid button strong {
  font-size: 20px !important;
}

.more-sheet-grid button span {
  font-size: 10px !important;
}

/* Location */
body.employee-portal .readable-location {
  background: rgba(9, 24, 44, .92) !important;
  border-color: rgba(0, 194, 255, .20) !important;
}

body.employee-portal .readable-location strong {
  white-space: normal !important;
  line-height: 1.55 !important;
  font-size: 15px !important;
}

body.employee-portal .location-meta-row {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 6px !important;
}

.gps-real-map {
  max-height: 260px !important;
  overflow: hidden !important;
  border-radius: 18px !important;
}

.gps-real-map iframe {
  height: 220px !important;
}

/* KPI cleanup */
.compact-status-card {
  background: linear-gradient(135deg, rgba(0, 194, 255, .10), rgba(26, 110, 255, .08)) !important;
}

/* Admin / Executive responsive guard */
.admin-app .toolbar,
.executive-portal-app .toolbar {
  flex-wrap: wrap !important;
}

.admin-app .toolbar .button,
.executive-portal-app .toolbar .button {
  white-space: normal !important;
  min-width: 0 !important;
}

.executive-tabs {
  max-width: 100% !important;
  overflow-x: auto !important;
}

.executive-tabs button {
  min-width: max-content !important;
}

/* Duplicate scroll top buttons */
.v10-scroll-top+.v10-scroll-top,
.hr-scroll-top+.hr-scroll-top {
  display: none !important;
}

@media(max-width:430px) {
  body.employee-portal .employee-main {
    padding-inline: 10px !important;
  }

  body.employee-portal .employee-card {
    padding: 14px !important;
    border-radius: 20px !important;
  }

  body.employee-portal .list-item-side {
    max-width: 42% !important;
  }

  .more-drawer-grid,
  .more-sheet-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }

  .more-drawer {
    max-height: 70svh !important;
  }

  .more-drawer-body {
    max-height: calc(70svh - 54px) !important;
  }
}

@media(max-width:360px) {

  .more-drawer-grid,
  .more-sheet-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  body.employee-portal .employee-bottom-nav button span {
    font-size: 8px !important;
  }
}

/* ── from v108-final-bugfix.css ─────────────────────────────────── */
:root {
  --v108-mobile-max: 480px;
  --v108-nav-h: 76px;
  --v108-panel: rgba(8, 20, 40, .96);
  --v108-border: rgba(0, 194, 255, .22)
}

html,
body {
  max-width: 100%;
  overflow-x: hidden !important
}

body.employee-portal {
  min-height: 100svh;
  background: #050b1b !important
}

body.employee-portal .employee-shell {
  width: 100%;
  max-width: 100vw;
  overflow-x: hidden !important
}

body.employee-portal .employee-main {
  width: min(100%, var(--v108-mobile-max)) !important;
  margin-inline: auto !important;
  padding-inline: 12px !important;
  padding-bottom: calc(var(--v108-nav-h) + 28px + env(safe-area-inset-bottom)) !important;
  box-sizing: border-box !important
}

body.employee-portal .employee-topbar,
body.employee-portal .employee-page-head {
  width: min(100%, var(--v108-mobile-max)) !important;
  margin-inline: auto !important;
  box-sizing: border-box !important;
  overflow: hidden !important
}

body.employee-portal .employee-card,
body.employee-portal .employee-grid,
body.employee-portal .employee-form-grid,
body.employee-portal form,
body.employee-portal .employee-list,
body.employee-portal .employee-list-item {
  min-width: 0 !important;
  max-width: 100% !important;
  box-sizing: border-box !important
}

body.employee-portal .employee-actions-row,
body.employee-portal .employee-actions-stack,
body.employee-portal .form-actions {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 9px !important;
  align-items: stretch !important
}

body.employee-portal .employee-actions-row>.button,
body.employee-portal .employee-actions-row>button,
body.employee-portal .employee-actions-stack>.button,
body.employee-portal .employee-actions-stack>button {
  flex: 1 1 150px !important;
  min-width: 0 !important;
  max-width: 100% !important;
  white-space: normal !important;
  min-height: 44px !important
}

body.employee-portal .button.full,
body.employee-portal button.full {
  width: 100% !important;
  max-width: 100% !important
}

/* Bottom nav stable size */
body.employee-portal .employee-bottom-nav {
  position: fixed !important;
  left: 50% !important;
  right: auto !important;
  bottom: 0 !important;
  transform: translateX(-50%) !important;
  width: min(calc(100vw - 18px), var(--v108-mobile-max)) !important;
  height: calc(var(--v108-nav-h) + env(safe-area-inset-bottom)) !important;
  display: grid !important;
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  gap: 6px !important;
  padding: 8px 8px calc(8px + env(safe-area-inset-bottom)) !important;
  border-radius: 22px 22px 0 0 !important;
  overflow: hidden !important;
  z-index: 850 !important
}

body.employee-portal .employee-bottom-nav button {
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  padding: 7px 3px !important;
  border-radius: 15px !important;
  overflow: hidden !important;
  white-space: nowrap !important
}

body.employee-portal .employee-bottom-nav button strong {
  font-size: 16px !important;
  line-height: 1 !important;
  display: block !important
}

body.employee-portal .employee-bottom-nav button span {
  display: block !important;
  font-size: 9px !important;
  line-height: 1.1 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important
}

/* More drawer must always be reachable */
.more-drawer,
.employee-more-sheet {
  position: fixed !important;
  left: 50% !important;
  right: auto !important;
  bottom: calc(var(--v108-nav-h) + 2px + env(safe-area-inset-bottom)) !important;
  transform: translateX(-50%) translateY(110%) !important;
  width: min(calc(100vw - 16px), 440px) !important;
  max-height: min(68svh, 560px) !important;
  overflow: hidden !important;
  border-radius: 24px !important;
  z-index: 900 !important;
  box-sizing: border-box !important
}

.more-drawer.is-open,
.employee-more-sheet:not(.hidden) {
  transform: translateX(-50%) translateY(0) !important
}

.more-drawer-body,
.more-sheet-grid {
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch !important;
  overscroll-behavior: contain !important;
  padding-bottom: 16px !important
}

.more-drawer-body {
  max-height: calc(min(68svh, 560px) - 54px) !important
}

.employee-more-sheet {
  padding: 8px 10px 14px !important
}

.employee-more-sheet .more-sheet-grid {
  max-height: calc(min(68svh, 560px) - 72px) !important;
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 7px !important
}

.more-drawer-grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 7px !important
}

.more-drawer-item,
.more-sheet-grid button {
  min-height: 54px !important;
  padding: 7px 5px !important;
  border-radius: 14px !important;
  gap: 3px !important;
  overflow: hidden !important
}

.more-drawer-item .di-icon,
.more-sheet-grid button strong {
  font-size: 19px !important;
  line-height: 1 !important
}

.more-drawer-item .di-label,
.more-sheet-grid button span {
  font-size: 9.5px !important;
  line-height: 1.2 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important
}

/* Password toggles */
.login-password-field,
.password-field,
.v108-password-wrap {
  position: relative !important;
  display: block !important;
  width: 100% !important
}

.login-password-field input,
.password-field input,
.v108-password-wrap input[type="password"],
.v108-password-wrap input[type="text"] {
  padding-inline-end: 86px !important;
  width: 100% !important;
  box-sizing: border-box !important
}

.password-toggle,
[data-toggle-password],
.v108-password-toggle {
  position: absolute !important;
  inset-inline-end: 8px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 68px !important;
  min-width: 68px !important;
  max-width: 68px !important;
  height: 34px !important;
  min-height: 34px !important;
  padding: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 999px !important;
  z-index: 5 !important;
  font-size: 12px !important;
  line-height: 1 !important;
  white-space: nowrap !important;
  overflow: hidden !important
}

/* Toasts / messages never stretch */
.hr-toast,
.hr-qc-toast,
.online-restored-banner,
.offline-banner,
.sw-update-banner,
.message.compact {
  position: fixed !important;
  left: 50% !important;
  right: auto !important;
  bottom: calc(var(--v108-nav-h) + 16px + env(safe-area-inset-bottom)) !important;
  top: auto !important;
  transform: translateX(-50%) translateY(16px) !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: min(calc(100vw - 28px), 380px) !important;
  max-height: 20svh !important;
  overflow: auto !important;
  padding: 10px 14px !important;
  border-radius: 15px !important;
  text-align: center !important;
  z-index: 1200 !important;
  line-height: 1.55 !important;
  font-size: 12.5px !important;
  box-sizing: border-box !important;
  word-break: break-word !important;
  white-space: normal !important
}

.hr-toast.is-visible,
.hr-qc-toast.is-visible {
  transform: translateX(-50%) translateY(0) !important;
  opacity: 1 !important
}

body.employee-portal .message:not(.compact) {
  max-width: 100% !important;
  min-height: 0 !important;
  padding: 11px 13px !important;
  border-radius: 15px !important;
  line-height: 1.55 !important;
  white-space: normal !important;
  word-break: break-word !important
}

/* Modal and push explanation */
.modal-backdrop {
  padding: 14px !important;
  align-items: center !important;
  justify-content: center !important;
  z-index: 1400 !important
}

.confirm-modal,
.push-explain-modal,
.hr-qc-confirm-modal {
  width: min(calc(100vw - 28px), 420px) !important;
  max-width: 420px !important;
  max-height: min(78svh, 560px) !important;
  overflow: auto !important;
  border-radius: 22px !important;
  box-sizing: border-box !important;
  padding: 18px !important
}

.push-explain-list {
  display: grid !important;
  gap: 7px !important;
  padding: 0 !important;
  margin: 8px 0 !important
}

.push-explain-list li:nth-child(n+3) {
  display: none !important
}

.push-explain-modal .form-actions {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 8px !important
}

.push-explain-modal .button {
  width: 100% !important;
  min-width: 0 !important
}

/* Floating reminder */
.attendance-floating-reminder {
  width: min(calc(100vw - 24px), 390px) !important;
  max-height: 25svh !important;
  overflow: auto !important;
  left: 50% !important;
  right: auto !important;
  bottom: calc(var(--v108-nav-h) + 16px + env(safe-area-inset-bottom)) !important;
  transform: translateX(-50%) translateY(18px) !important;
  padding: 12px !important;
  border-radius: 20px !important;
  z-index: 1180 !important;
  box-sizing: border-box !important
}

.attendance-floating-reminder.is-visible {
  transform: translateX(-50%) translateY(0) !important
}

.attendance-floating-close {
  position: absolute !important;
  inset-inline-end: 8px !important;
  top: 8px !important;
  width: 28px !important;
  height: 28px !important;
  min-width: 28px !important;
  border-radius: 999px !important;
  padding: 0 !important
}

.attendance-floating-copy {
  padding-inline-end: 26px !important
}

.attendance-floating-actions {
  display: grid !important;
  grid-template-columns: 1fr !important
}

.attendance-floating-actions .button {
  width: 100% !important
}

.attendance-floating-actions .button:nth-child(n+2) {
  display: none !important
}

/* Buttons and ripple containment */
.button,
button {
  box-sizing: border-box !important;
  max-width: 100%;
  overflow: hidden
}

.ripple-effect,
.v10-ripple {
  position: absolute !important;
  pointer-events: none !important;
  display: block !important;
  contain: layout paint !important;
  max-width: none !important;
  max-height: none !important;
  min-width: 0 !important;
  min-height: 0 !important
}

.button:active,
button:active {
  transform: translateY(1px) !important
}

/* Calm attendance cards */
.hr-punch-row,
.location-history-item,
.polished-history-list .employee-list-item {
  background: linear-gradient(135deg, rgba(8, 24, 44, .96), rgba(5, 15, 31, .98)) !important;
  border-color: rgba(0, 194, 255, .18) !important;
  color: #eaf6ff !important
}

.hr-punch-row *,
.location-history-item * {
  color: inherit
}

.badge.status-out_of_range,
.badge.status-خارج,
.badge.status-rejected {
  background: rgba(255, 176, 32, .14) !important;
  border-color: rgba(255, 176, 32, .35) !important;
  color: #ffd08a !important
}

/* KPI */
.v108-kpi-page .kpi-summary-row {
  display: grid !important;
  grid-template-columns: 1fr !important
}

.v108-kpi-page .kpi-slider-field {
  padding: 12px !important;
  border-radius: 16px !important
}

.v108-kpi-page input[type="range"] {
  width: 100% !important
}

.v108-kpi-actions {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important
}

.kpi-total-chip b {
  font-size: 1.05rem;
  color: #5fffc2
}

.v108-hr-estimate-note {
  border-color: rgba(255, 176, 32, .25) !important;
  background: rgba(255, 176, 32, .08) !important
}

/* Location list: readable without coordinates being dominant */
.location-history-item small {
  white-space: normal !important;
  line-height: 1.55 !important
}

.location-history-item small::before {
  content: 'آخر موقع محفوظ: ';
  color: #7fdcff
}

.location-history-item small {
  font-size: 0 !important
}

.location-history-item small::before,
.location-history-item small::after {
  font-size: 12px !important
}

.location-history-item small::after {
  content: 'اضغط خريطة لفتح الموقع';
  color: #d7e8ff
}

/* Keep scroll top away from devtools edge */
.v10-scroll-top,
.hr-scroll-top,
.scroll-top {
  left: 12px !important;
  right: auto !important;
  bottom: calc(var(--v108-nav-h) + 14px) !important;
  width: 42px !important;
  height: 42px !important;
  min-width: 42px !important
}

@media(max-width:380px) {

  .more-drawer-grid,
  .employee-more-sheet .more-sheet-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important
  }

  .v108-kpi-actions {
    grid-template-columns: 1fr !important
  }

  body.employee-portal .employee-bottom-nav button span {
    font-size: 8px !important
  }

  .confirm-modal,
  .push-explain-modal {
    padding: 15px !important
  }
}

/* ── from v109-final-system-fixes.css ─────────────────────────────────── */
:root {
  --hr-v109-bottom-safe: calc(86px + env(safe-area-inset-bottom, 0px));
}

.employee-main {
  padding-bottom: var(--hr-v109-bottom-safe) !important;
}

.employee-bottom-nav {
  left: 50% !important;
  right: auto !important;
  transform: translateX(-50%) !important;
  width: min(360px, calc(100vw - 18px)) !important;
  max-width: 360px !important;
  bottom: 8px !important;
  border-radius: 22px !important;
  padding: 7px !important;
  gap: 5px !important;
  overflow: hidden !important;
  z-index: 950 !important;
}

.employee-bottom-nav button {
  min-width: 0 !important;
  max-width: 68px !important;
  height: 58px !important;
  padding: 6px 4px !important;
  overflow: hidden !important;
  white-space: normal !important;
}

.employee-bottom-nav button strong {
  font-size: 18px !important;
  line-height: 1 !important;
  display: block !important;
}

.employee-bottom-nav button span {
  font-size: 9px !important;
  line-height: 1.1 !important;
  max-width: 100% !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.employee-more-backdrop {
  z-index: 960 !important;
}

.employee-more-sheet {
  z-index: 970 !important;
  left: 50% !important;
  right: auto !important;
  transform: translateX(-50%) !important;
  width: min(340px, calc(100vw - 18px)) !important;
  max-height: min(72vh, 560px) !important;
  display: flex !important;
  flex-direction: column !important;
  border-radius: 22px !important;
  overflow: hidden !important;
}

.employee-more-sheet.hidden {
  display: none !important;
}

.more-sheet-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 8px !important;
  overflow-y: auto !important;
  max-height: calc(72vh - 72px) !important;
  padding: 10px !important;
  overscroll-behavior: contain !important;
}

.more-sheet-grid button {
  min-height: 58px !important;
  padding: 7px 5px !important;
  border-radius: 12px !important;
  overflow: hidden !important;
}

.more-sheet-grid button strong {
  font-size: 18px !important;
  display: block !important;
  line-height: 1 !important;
}

.more-sheet-grid button span {
  font-size: 10px !important;
  line-height: 1.1 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.hr-toast,
.hr-qc-toast,
.message,
.risk-box,
.success-box,
.danger-box {
  max-width: min(340px, calc(100vw - 28px)) !important;
  max-height: 36vh !important;
  overflow: auto !important;
  border-radius: 16px !important;
  word-break: break-word !important;
  white-space: normal !important;
  line-height: 1.6 !important;
}

.modal-backdrop .confirm-modal,
.push-explain-overlay .confirm-modal,
.live-location-alert-modal {
  width: min(340px, calc(100vw - 28px)) !important;
  max-height: min(72vh, 560px) !important;
  overflow: auto !important;
  border-radius: 20px !important;
  padding: 18px !important;
}

.live-location-alert-actions,
.employee-actions-row,
.employee-actions-stack {
  gap: 8px !important;
}

.live-location-alert-actions .button,
.employee-actions-row>.button,
.employee-actions-row>button {
  min-width: 0 !important;
  max-width: 100% !important;
  white-space: normal !important;
  line-height: 1.35 !important;
}

.attendance-floating-reminder {
  width: min(330px, calc(100vw - 24px)) !important;
  left: 50% !important;
  right: auto !important;
  transform: translateX(-50%) !important;
  bottom: calc(var(--hr-v109-bottom-safe) + 8px) !important;
  border-radius: 18px !important;
  overflow: hidden !important;
}

.attendance-floating-reminder .button,
.attendance-floating-reminder button {
  max-width: 100% !important;
  white-space: normal !important;
}

.readable-location {
  display: grid !important;
  gap: 8px !important;
  background: rgba(5, 17, 35, .74) !important;
  border: 1px solid rgba(65, 185, 255, .18) !important;
  border-radius: 16px !important;
  padding: 10px !important;
  min-width: 0 !important;
}

.readable-location.compact {
  padding: 8px !important;
  background: transparent !important;
  border-color: rgba(65, 185, 255, .12) !important;
}

.readable-location strong {
  font-size: 13px !important;
  line-height: 1.55 !important;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
  color: #eaf7ff !important;
}

.readable-location small {
  font-size: 11px !important;
  color: #9fb7d6 !important;
}

.location-meta-row {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 6px !important;
  align-items: center !important;
}

.location-meta-row span,
.location-meta-row a {
  font-size: 11px !important;
  border-radius: 999px !important;
  padding: 5px 8px !important;
  background: rgba(17, 42, 74, .72) !important;
  border: 1px solid rgba(94, 185, 255, .16) !important;
  text-decoration: none !important;
}

.location-history-item {
  align-items: stretch !important;
  gap: 10px !important;
}

.location-history-main {
  min-width: 0 !important;
  display: grid !important;
  gap: 5px !important;
}

.location-history-item .list-item-side {
  align-self: center !important;
}

.kpi-advanced .form-hint {
  border: 1px solid rgba(255, 193, 7, .28) !important;
  background: rgba(255, 193, 7, .08) !important;
  border-radius: 14px !important;
  padding: 10px !important;
  color: #ffd88b !important;
}

.kpi-advanced button[disabled] {
  opacity: .62 !important;
  filter: saturate(.65) !important;
  cursor: not-allowed !important;
}

.v109-kpi-closed-note {
  border: 1px dashed rgba(255, 193, 7, .35) !important;
  background: rgba(255, 193, 7, .08) !important;
  border-radius: 16px !important;
  padding: 12px !important;
  color: #ffe3a3 !important;
}

.team-overview-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 10px !important;
}

.team-summary-card {
  min-height: auto !important;
  padding: 12px 10px !important;
  text-align: center !important;
  overflow: hidden !important;
}

.team-summary-card strong {
  font-size: 15px !important;
  line-height: 1.35 !important;
  white-space: normal !important;
  overflow-wrap: break-word !important;
}

.employee-org-tree {
  overflow-x: auto !important;
  padding: 8px 4px 14px !important;
}

.employee-org-focus-card {
  display: grid !important;
  gap: 14px !important;
}

.employee-org-focus-grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 10px !important;
}

.employee-org-focus-person {
  display: grid !important;
  gap: 8px !important;
  min-width: 0 !important;
  padding: 12px !important;
  border: 1px solid rgba(65, 185, 255, .18) !important;
  border-radius: 16px !important;
  background: rgba(5, 16, 34, .72) !important;
}

.employee-org-focus-person>span,
.employee-org-coworkers>strong {
  color: rgba(186, 230, 255, .82) !important;
  font-size: 12px !important;
  font-weight: 900 !important;
}

.employee-org-focus-person.is-me {
  border-color: rgba(0, 196, 255, .45) !important;
  background: linear-gradient(180deg, rgba(8, 47, 73, .72), rgba(5, 16, 34, .82)) !important;
}

.employee-org-focus-person.is-manager {
  border-color: rgba(185, 102, 255, .42) !important;
}

.employee-org-coworkers {
  display: grid !important;
  gap: 10px !important;
}

.employee-org-toolbar {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  justify-content: flex-end !important;
  margin: 10px 0 !important;
}

.employee-org-viewport {
  width: 100% !important;
  overflow: auto !important;
  padding: 12px !important;
  border: 1px solid rgba(65, 185, 255, .18) !important;
  border-radius: 18px !important;
  background: rgba(2, 8, 23, .45) !important;
}

.employee-org-viewport .employee-org-tree {
  min-width: 920px !important;
  overflow: visible !important;
  transform: scale(var(--org-zoom, .9)) !important;
  transform-origin: top center !important;
}

.employee-org-tree-item {
  min-width: 0 !important;
}

.employee-org-node {
  border-radius: 18px !important;
  padding: 12px !important;
  background: linear-gradient(180deg, rgba(8, 29, 56, .95), rgba(5, 17, 35, .98)) !important;
  box-shadow: 0 12px 28px rgba(0, 0, 0, .24) !important;
}

.employee-org-node.is-me {
  outline: 2px solid rgba(0, 196, 255, .75) !important;
  box-shadow: 0 0 0 5px rgba(0, 196, 255, .12), 0 12px 28px rgba(0, 0, 0, .24) !important;
}

.employee-org-node.is-my-manager {
  border-color: rgba(185, 102, 255, .62) !important;
}

.employee-org-node.is-direct-report {
  border-color: rgba(36, 220, 150, .62) !important;
}

.org-node-head {
  gap: 10px !important;
  align-items: center !important;
}

.org-node-copy {
  min-width: 0 !important;
}

.org-node-copy strong,
.org-node-copy span {
  white-space: normal !important;
  overflow-wrap: break-word !important;
}

.employee-org-children {
  margin-inline-start: 16px !important;
  padding-inline-start: 12px !important;
  border-inline-start: 1px solid rgba(65, 185, 255, .18) !important;
}

@media(max-width:480px) {
  .team-overview-grid {
    grid-template-columns: 1fr !important;
  }

  .employee-org-focus-grid {
    grid-template-columns: 1fr !important;
  }

  .employee-org-toolbar {
    justify-content: stretch !important;
  }

  .employee-org-toolbar .button {
    flex: 1 1 88px !important;
  }

  .employee-org-viewport {
    padding: 8px !important;
  }

  .employee-org-viewport .employee-org-tree {
    min-width: 760px !important;
  }

  .employee-org-children {
    margin-inline-start: 8px !important;
    padding-inline-start: 8px !important;
  }

  .employee-org-node {
    padding: 10px !important;
  }

  .employee-bottom-nav {
    width: min(340px, calc(100vw - 14px)) !important;
  }
}

/* ═══════════════════════════════════════════════════════════
   v110 FINAL PATCHES — Missing vars, stability fixes
   ═══════════════════════════════════════════════════════════ */

/* Global font-size fix for iOS zoom prevention */
@media (max-width: 768px) {

  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
  select,
  textarea {
    font-size: 16px !important;
  }
}

/* Touch target enforcement */
.button,
button,
[role="button"],
a.nav-link,
.nav-link,
.quick-action-btn,
.more-drawer-item,
.employee-bottom-nav button {
  min-height: 44px;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

.button.small {
  min-height: 36px;
}

/* Fix: bottom nav must show one active tab only. Punch has no permanent highlight. */
body.employee-portal .employee-bottom-nav button:not(.is-active) {
  background: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
  transform: none !important;
  color: #8fa1bd !important;
}

body.employee-portal .employee-bottom-nav button[data-route="punch"]:not(.is-active) {
  background: transparent !important;
  border: 0 !important;
  color: #8fa1bd !important;
  box-shadow: none !important;
}

body.employee-portal .employee-bottom-nav button[data-route="punch"]:not(.is-active) strong,
body.employee-portal .employee-bottom-nav button[data-route="punch"]:not(.is-active) span {
  color: inherit !important;
  -webkit-text-fill-color: currentColor !important;
}

body.employee-portal .employee-bottom-nav button.is-active {
  background: linear-gradient(135deg, rgba(0, 194, 255, .18), rgba(26, 110, 255, .22)) !important;
  border: 1px solid rgba(0, 194, 255, .26) !important;
  color: #00c2ff !important;
  box-shadow: 0 8px 24px rgba(0, 194, 255, .22) !important;
}

/* Fix: team page focus cards are rendered inside a narrow mobile shell even on desktop viewports. */
body.employee-portal .team-manager-page .employee-org-focus-grid {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 170px), 1fr)) !important;
  align-items: stretch !important;
}

body.employee-portal .team-manager-page .employee-org-focus-person {
  min-width: 0 !important;
  overflow: hidden !important;
}

body.employee-portal .team-manager-page .employee-org-focus-person .employee-header-card,
body.employee-portal .team-manager-page .employee-org-focus-person .person-cell {
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

body.employee-portal .team-manager-page .employee-org-focus-person .employee-header-card {
  display: grid !important;
  grid-template-columns: auto minmax(0, 1fr) !important;
  align-items: center !important;
  padding: 10px !important;
  border-radius: 14px !important;
}

body.employee-portal .team-manager-page .employee-org-focus-person .employee-header-card span,
body.employee-portal .team-manager-page .employee-org-focus-person .employee-header-card strong,
body.employee-portal .team-manager-page .employee-org-focus-person .employee-header-card small {
  min-width: 0 !important;
  max-width: 100% !important;
}

body.employee-portal .team-manager-page .employee-org-focus-person .employee-header-card strong,
body.employee-portal .team-manager-page .employee-org-focus-person .employee-header-card small {
  white-space: normal !important;
  overflow-wrap: anywhere !important;
}

/* Fix: operations-gate page — mobile card width */
@media (max-width: 540px) {
  .gate {
    padding: 18px 14px !important;
    border-radius: 18px !important;
  }

  .target-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
  }
}

/* Fix: admin sidebar overflow on mobile */
@media (max-width: 768px) {

  .sidebar-wrap,
  aside.sidebar,
  nav.sidebar {
    display: none !important;
  }

  .content-area,
  .main-content,
  .admin-main {
    margin-inline-start: 0 !important;
    width: 100% !important;
    padding: 12px 12px 90px !important;
  }
}

/* Fix: employee content bottom padding for nav */
body.employee-portal .employee-content-area,
body.employee-portal #app>section,
body.employee-portal .employee-card-wrap {
  padding-bottom: calc(80px + env(safe-area-inset-bottom, 0px)) !important;
}

/* Notification modal backdrop */
.modal-backdrop,
.push-explain-overlay {
  position: fixed;
  inset: 0;
  z-index: 999;
  background: rgba(2, 6, 18, 0.82);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  display: grid;
  place-items: center;
  padding: 16px;
  animation: backdropIn 0.2s ease;
}

@keyframes backdropIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

.confirm-modal,
.push-explain-modal {
  width: 100%;
  max-width: 440px;
  background: linear-gradient(180deg, rgba(10, 20, 42, 0.98), rgba(6, 14, 28, 1));
  border: 1px solid rgba(56, 199, 244, 0.22);
  border-radius: 28px;
  padding: 28px 24px 24px;
  box-shadow: 0 32px 80px rgba(0, 0, 0, 0.6);
  animation: modalIn 0.28s cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes modalIn {
  from {
    opacity: 0;
    transform: scale(0.92) translateY(16px);
  }

  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

/* Toast positioning fix on mobile */
.toast-container,
.hr-toast-container {
  position: fixed;
  top: calc(env(safe-area-inset-top, 0px) + 12px);
  inset-inline-end: 12px;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-width: calc(100vw - 24px);
}

.toast,
.hr-toast {
  padding: 12px 16px;
  border-radius: 14px;
  background: rgba(10, 22, 46, 0.97);
  border: 1px solid rgba(56, 199, 244, 0.25);
  color: #e8f0ff;
  font-size: 13px;
  font-weight: 700;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
  animation: toastIn 0.3s cubic-bezier(0.22, 1, 0.36, 1);
  max-width: 320px;
  word-break: break-word;
  line-height: 1.45;
}

@keyframes toastIn {
  from {
    opacity: 0;
    transform: translateX(20px);
  }

  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.toast.success,
.hr-toast.success {
  border-color: rgba(73, 211, 154, 0.35);
  background: rgba(10, 36, 22, 0.97);
}

.toast.error,
.hr-toast.error {
  border-color: rgba(255, 107, 122, 0.35);
  background: rgba(36, 8, 12, 0.97);
}

/* Loading spinner centered */
.loading-center {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 40vh;
  gap: 16px;
  color: var(--muted);
  font-size: 14px;
}

/* Offline banner */
.offline-banner {
  position: fixed;
  top: 0;
  inset-inline: 0;
  z-index: 9998;
  padding: 10px 16px;
  background: rgba(247, 163, 40, 0.97);
  color: #1a0800;
  font-size: 13px;
  font-weight: 800;
  text-align: center;
  display: none;
}

body.is-offline .offline-banner {
  display: block;
}

/* v111 mobile bottom-nav fix: keep the More drawer fully hidden when closed. */
body.employee-portal .more-drawer:not(.is-open),
body.employee-portal .employee-more-sheet.hidden,
body.employee-portal .employee-more-sheet:not(.is-open) {
  visibility: hidden !important;
  pointer-events: none !important;
  transform: translateX(-50%) translateY(calc(100% + 140px)) !important;
}

/* v118: never show the offline banner while the browser reports an active connection. */
.offline-banner {
  display: none !important;
}

body.is-offline .offline-banner {
  display: block !important;
}

body.employee-portal .more-drawer.is-open {
  visibility: visible !important;
  pointer-events: auto !important;
  transform: translateX(-50%) translateY(0) !important;
}

body.employee-portal .more-drawer-overlay:not(.is-open),
body.employee-portal .employee-more-backdrop.hidden {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* Pull-to-refresh indicator */
.ptr-indicator {
  position: fixed;
  top: env(safe-area-inset-top, 0px);
  inset-inline: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--brand, #1a6eff), var(--brand-2, #00c2ff));
  z-index: 9000;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s ease;
}

.ptr-indicator.active {
  transform: scaleX(1);
}

/* Fix: form buttons full-width on mobile */
@media (max-width: 480px) {
  .form-actions {
    flex-direction: column-reverse;
    gap: 8px;
  }

  .form-actions .button {
    width: 100%;
    justify-content: center;
  }
}

/* v111 mobile polish: login, header, drawer, and duplicate float controls. */
body.employee-portal .employee-topbar {
  display: grid !important;
  grid-template-columns: minmax(128px, 1fr) minmax(0, auto) !important;
  align-items: center !important;
  gap: 8px !important;
  min-height: 58px !important;
}

body.employee-portal .employee-brand {
  min-width: 0 !important;
  overflow: hidden !important;
}

body.employee-portal .employee-brand img {
  width: 44px !important;
  height: 44px !important;
  flex: 0 0 44px !important;
}

body.employee-portal .employee-brand strong {
  font-size: 14px !important;
  line-height: 1.2 !important;
}

body.employee-portal .employee-brand span {
  font-size: 10px !important;
  line-height: 1.2 !important;
}

body.employee-portal .employee-user {
  width: min(46vw, 180px) !important;
  max-width: min(46vw, 180px) !important;
  gap: 6px !important;
  padding: 5px 7px !important;
  border-radius: 16px !important;
  overflow: hidden !important;
}

body.employee-portal .employee-user .avatar {
  width: 34px !important;
  height: 34px !important;
  min-width: 34px !important;
  flex: 0 0 34px !important;
}

body.employee-portal .employee-user strong {
  font-size: 11.5px !important;
  line-height: 1.25 !important;
}

body.employee-portal .employee-user small {
  font-size: 9px !important;
  line-height: 1.25 !important;
}

@media (max-width: 380px) {
  body.employee-portal .employee-topbar {
    grid-template-columns: minmax(116px, 1fr) minmax(0, auto) !important;
  }

  body.employee-portal .employee-user {
    width: min(42vw, 152px) !important;
    max-width: min(42vw, 152px) !important;
  }

  body.employee-portal .employee-user small {
    display: none !important;
  }
}

body.employee-portal .employee-login-screen {
  min-height: 100svh !important;
  height: 100svh !important;
  display: grid !important;
  place-items: center !important;
  padding: calc(env(safe-area-inset-top, 0px) + 10px) 14px calc(env(safe-area-inset-bottom, 0px) + 10px) !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
}

body.employee-portal:has(.employee-login-screen) {
  height: 100svh !important;
  min-height: 100svh !important;
  overflow: hidden !important;
  padding-bottom: 0 !important;
}

body.employee-portal:has(.employee-login-screen) #app {
  height: 100svh !important;
  overflow: hidden !important;
}

body.employee-portal:has(.employee-login-screen) .v10-scroll-top {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

body.employee-portal .employee-login-card {
  width: min(100%, 430px) !important;
  height: min(100%, calc(100svh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px) - 20px)) !important;
  max-height: none !important;
  display: grid !important;
  align-content: center !important;
  gap: clamp(12px, 2.4svh, 22px) !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
}

body.employee-portal .login-brand-row {
  width: 100% !important;
  display: grid !important;
  justify-items: center !important;
  text-align: center !important;
}

body.employee-portal .login-brand-row img {
  margin-inline: auto !important;
}

@media (max-height: 720px) {
  body.employee-portal .employee-login-card {
    padding: 18px !important;
    gap: 10px !important;
  }

  body.employee-portal .login-brand-row img {
    width: 72px !important;
    height: 72px !important;
  }

  body.employee-portal .employee-login-card input {
    min-height: 48px !important;
  }

  body.employee-portal .employee-login-card .button {
    min-height: 48px !important;
  }
}

body.employee-portal .v101-scroll-top,
body.employee-portal .v105-scroll-top,
body.employee-portal .hr-scroll-top,
body.employee-portal .scroll-top:not(.v10-scroll-top) {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* v111 login gateway final polish: compact centered card with stronger brand. */
body.employee-portal .employee-login-screen {
  min-height: 100svh !important;
  height: auto !important;
  align-items: center !important;
  justify-items: center !important;
  padding: calc(env(safe-area-inset-top, 0px) + 20px) 16px calc(env(safe-area-inset-bottom, 0px) + 20px) !important;
  overflow: auto !important;
}

body.employee-portal:has(.employee-login-screen),
body.employee-portal:has(.employee-login-screen) #app {
  height: auto !important;
  min-height: 100svh !important;
  overflow: auto !important;
}

body.employee-portal .employee-login-card.refined-login-card,
body.employee-portal .employee-login-card {
  width: min(100%, 360px) !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  align-content: start !important;
  gap: 14px !important;
  padding: 24px 18px 20px !important;
  border-radius: 18px !important;
  border: 1px solid rgba(56, 199, 244, .28) !important;
  background:
    linear-gradient(180deg, rgba(15, 31, 55, .95), rgba(9, 20, 38, .96)) !important;
  box-shadow: 0 22px 58px rgba(0, 0, 0, .34), 0 0 34px rgba(26, 110, 255, .10) !important;
  overflow: visible !important;
}

body.employee-portal .employee-login-card.refined-login-card::before {
  opacity: .34 !important;
}

body.employee-portal .login-brand-row {
  display: grid !important;
  justify-items: center !important;
  gap: 8px !important;
  margin: 0 0 6px !important;
  text-align: center !important;
}

body.employee-portal .login-brand-row img {
  width: 84px !important;
  height: 84px !important;
  border-radius: 24px !important;
  object-fit: contain !important;
  filter: drop-shadow(0 0 18px rgba(56, 199, 244, .34)) !important;
}

body.employee-portal .login-brand-row div {
  display: grid !important;
  gap: 2px !important;
  justify-items: center !important;
}

body.employee-portal .login-brand-row strong {
  color: #f8fbff !important;
  font-size: 27px !important;
  font-weight: 1000 !important;
  line-height: 1.08 !important;
  letter-spacing: 0 !important;
  text-shadow: 0 0 18px rgba(56, 199, 244, .26) !important;
}

body.employee-portal .login-brand-row span {
  color: rgba(186, 230, 255, .78) !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  line-height: 1.25 !important;
}

body.employee-portal .employee-login-card label {
  display: grid !important;
  gap: 7px !important;
  color: rgba(203, 213, 225, .86) !important;
  font-size: 12px !important;
  font-weight: 900 !important;
  line-height: 1.3 !important;
}

body.employee-portal .employee-login-card input {
  min-height: 48px !important;
  border-radius: 12px !important;
  padding: 10px 13px !important;
  border: 1px solid rgba(56, 199, 244, .18) !important;
  background: rgba(2, 8, 23, .64) !important;
  color: #eef7ff !important;
  font-size: 14px !important;
  font-weight: 800 !important;
  box-shadow: inset 0 0 0 1px rgba(2, 8, 23, .42) !important;
}

body.employee-portal .employee-login-card input::placeholder {
  color: rgba(148, 163, 184, .78) !important;
}

body.employee-portal .employee-login-card .login-password-field input {
  padding-inline-end: 78px !important;
}

body.employee-portal .employee-login-card .password-toggle {
  inset-inline-end: 8px !important;
  top: 50% !important;
  min-width: 58px !important;
  height: 34px !important;
  transform: translateY(-50%) !important;
  border-radius: 999px !important;
  border-color: rgba(56, 199, 244, .34) !important;
  background: rgba(3, 16, 34, .86) !important;
  color: #bae6fd !important;
  font-size: 11px !important;
  font-weight: 900 !important;
}

body.employee-portal .employee-login-card .button.primary.full {
  min-height: 50px !important;
  border-radius: 12px !important;
  font-size: 14px !important;
  font-weight: 1000 !important;
  box-shadow: 0 14px 30px rgba(26, 110, 255, .28) !important;
}

/* v111 home location card: prevent horizontal squeezing on mobile. */
body.employee-portal .location-status-card {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 12px !important;
  align-items: stretch !important;
  padding: 14px !important;
}

body.employee-portal .location-status-card .panel-head {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: 10px !important;
  margin-bottom: 0 !important;
  width: 100% !important;
}

body.employee-portal .location-status-card .panel-kicker {
  max-width: 100% !important;
  white-space: normal !important;
  line-height: 1.35 !important;
}

body.employee-portal .location-status-card .pill {
  justify-self: end !important;
  width: auto !important;
  max-width: 112px !important;
  min-height: 28px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 5px 9px !important;
  text-align: center !important;
  white-space: normal !important;
  line-height: 1.25 !important;
}

body.employee-portal .location-status-card .readable-location {
  width: 100% !important;
  display: grid !important;
  gap: 8px !important;
  padding: 12px !important;
}

body.employee-portal .location-status-card .readable-location>div:first-child {
  display: grid !important;
  grid-template-columns: auto minmax(0, 1fr) !important;
  column-gap: 8px !important;
  row-gap: 3px !important;
  align-items: center !important;
}

body.employee-portal .location-status-card .readable-location>div:first-child .pill {
  grid-row: 1 / span 2 !important;
  justify-self: start !important;
  max-width: 92px !important;
}

body.employee-portal .location-status-card .readable-location strong,
body.employee-portal .location-status-card .readable-location small {
  min-width: 0 !important;
  overflow-wrap: anywhere !important;
}

body.employee-portal .location-status-card .employee-actions-row {
  width: 100% !important;
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 8px !important;
  margin-top: 0 !important;
}

body.employee-portal .location-status-card .employee-actions-row .button {
  width: 100% !important;
  min-height: 48px !important;
  max-height: none !important;
  padding: 10px 8px !important;
  border-radius: 12px !important;
  font-size: 12px !important;
  font-weight: 900 !important;
  line-height: 1.25 !important;
  text-align: center !important;
}

/* v111 disputes page: simplified complaint form. */
body.employee-portal .disputes-polished-page {
  gap: 12px !important;
}

body.employee-portal .disputes-polished-page .disputes-hero-card {
  display: grid !important;
  gap: 7px !important;
  padding: 16px !important;
  min-height: 0 !important;
  background:
    linear-gradient(180deg, rgba(14, 32, 60, .88), rgba(7, 16, 31, .92)) !important;
}

body.employee-portal .disputes-polished-page .disputes-hero-card h2 {
  margin: 0 !important;
  font-size: 20px !important;
  line-height: 1.25 !important;
}

body.employee-portal .dispute-form-card {
  padding: 14px !important;
}

body.employee-portal .dispute-form-card .employee-form-grid {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 12px !important;
}

body.employee-portal .dispute-form-card label {
  display: grid !important;
  gap: 7px !important;
  font-size: 12px !important;
  font-weight: 900 !important;
  line-height: 1.35 !important;
}

body.employee-portal .dispute-form-card input:not([type="checkbox"]),
body.employee-portal .dispute-form-card select,
body.employee-portal .dispute-form-card textarea {
  width: 100% !important;
  min-height: 48px !important;
  border-radius: 14px !important;
  background: rgba(2, 8, 23, .62) !important;
}

body.employee-portal .dispute-form-card textarea {
  min-height: 142px !important;
  resize: vertical !important;
  line-height: 1.7 !important;
}

body.employee-portal .related-employee-card {
  display: grid !important;
  gap: 10px !important;
  padding: 12px !important;
  border: 1px solid rgba(56, 199, 244, .20) !important;
  border-radius: 16px !important;
  background: rgba(5, 17, 35, .68) !important;
}

body.employee-portal .related-employee-toggle {
  display: grid !important;
  grid-template-columns: auto minmax(0, 1fr) !important;
  gap: 11px !important;
  align-items: center !important;
  cursor: pointer !important;
  user-select: none !important;
}

body.employee-portal .related-employee-toggle input {
  position: absolute !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

body.employee-portal .related-toggle-ui {
  width: 50px !important;
  height: 30px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(148, 163, 184, .24) !important;
  background: rgba(15, 23, 42, .84) !important;
  position: relative !important;
  box-shadow: inset 0 0 0 1px rgba(2, 8, 23, .42) !important;
  transition: background .18s ease, border-color .18s ease !important;
}

body.employee-portal .related-toggle-ui::after {
  content: "" !important;
  position: absolute !important;
  top: 4px !important;
  inset-inline-start: 4px !important;
  width: 20px !important;
  height: 20px !important;
  border-radius: 999px !important;
  background: rgba(203, 213, 225, .92) !important;
  transition: transform .18s ease, background .18s ease !important;
}

body.employee-portal .related-employee-toggle input:checked+.related-toggle-ui {
  border-color: rgba(56, 199, 244, .52) !important;
  background: linear-gradient(135deg, rgba(8, 145, 178, .9), rgba(26, 110, 255, .86)) !important;
}

body.employee-portal .related-employee-toggle input:checked+.related-toggle-ui::after {
  transform: translateX(-20px) !important;
  background: #f8fbff !important;
}

body.employee-portal .related-employee-toggle strong {
  display: block !important;
  color: #f8fbff !important;
  font-size: 13px !important;
  line-height: 1.35 !important;
}

body.employee-portal .related-employee-toggle small {
  display: block !important;
  margin-top: 2px !important;
  color: rgba(186, 230, 255, .66) !important;
  font-size: 10.5px !important;
  line-height: 1.45 !important;
}

body.employee-portal .related-employee-field {
  display: grid !important;
  gap: 8px !important;
  padding-top: 2px !important;
  min-width: 0 !important;
  line-height: 1.35 !important;
}

body.employee-portal .related-employee-field select {
  appearance: auto !important;
  min-height: 50px !important;
  height: auto !important;
  margin-top: 0 !important;
  padding: 12px 14px !important;
  border-radius: 14px !important;
  background: rgba(2, 8, 23, .72) !important;
  color: #f8fbff !important;
  font-size: 13px !important;
  font-weight: 900 !important;
  line-height: 1.45 !important;
  white-space: normal !important;
}

body.employee-portal .related-employee-field small {
  display: block !important;
  margin-top: 0 !important;
  color: rgba(186, 230, 255, .66) !important;
  font-size: 10.5px !important;
  line-height: 1.45 !important;
  overflow-wrap: anywhere !important;
}

body.employee-portal .related-employee-field.hidden {
  display: none !important;
}

@media (max-width: 360px) {
  body.employee-portal .location-status-card .employee-actions-row {
    grid-template-columns: 1fr !important;
  }

  body.employee-portal .location-status-card .panel-head {
    grid-template-columns: 1fr !important;
  }

  body.employee-portal .location-status-card .panel-head .pill {
    justify-self: start !important;
    max-width: 100% !important;
  }
}

@media (max-width: 380px) {
  body.employee-portal .employee-login-card.refined-login-card,
  body.employee-portal .employee-login-card {
    width: min(100%, 340px) !important;
    padding: 22px 14px 18px !important;
  }

  body.employee-portal .login-brand-row img {
    width: 76px !important;
    height: 76px !important;
  }

  body.employee-portal .login-brand-row strong {
    font-size: 24px !important;
  }
}

body.employee-portal .v10-scroll-top {
  left: 12px !important;
  right: auto !important;
  bottom: calc(var(--v108-nav-h) + 14px + env(safe-area-inset-bottom, 0px)) !important;
  z-index: 940 !important;
}

body.employee-portal .more-drawer {
  bottom: calc(var(--v108-nav-h) + 8px + env(safe-area-inset-bottom, 0px)) !important;
  max-height: calc(100svh - var(--v108-nav-h) - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px) - 18px) !important;
  border-radius: 22px !important;
}

body.employee-portal .more-drawer-body {
  overflow: hidden !important;
  max-height: none !important;
  padding: 2px 10px 10px !important;
}

body.employee-portal .more-drawer-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 6px !important;
  margin-bottom: 4px !important;
}

body.employee-portal .more-drawer-item {
  min-height: clamp(42px, 7.4svh, 50px) !important;
  padding: 5px 4px !important;
  border-radius: 12px !important;
  gap: 2px !important;
}

body.employee-portal .more-drawer-item .di-icon {
  font-size: 17px !important;
}

body.employee-portal .more-drawer-item .di-label {
  font-size: 8.8px !important;
  line-height: 1.15 !important;
}

body.employee-portal .more-drawer-section-label {
  font-size: 8px !important;
  padding: 4px 2px 2px !important;
  line-height: 1.1 !important;
}

body.employee-portal .more-drawer-header {
  padding: 7px 12px 4px !important;
}

body.employee-portal .more-drawer-handle {
  margin-top: 6px !important;
  margin-bottom: 2px !important;
}

/* Fix: data tables - prevent overflow on small screens */
.data-table-wrap,
.employee-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: 16px;
  max-width: 100%;
}

table {
  min-width: max-content;
}

@media (max-width: 640px) {
  table {
    font-size: 12px;
  }

  table th,
  table td {
    padding: 8px 10px;
  }
}

/* Fix: metric cards 2-col on small mobile */
@media (max-width: 440px) {

  .neon-metric-cards-grid,
  .stats-grid,
  .kpi-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
  }

  .neon-metric-value,
  .metric-value {
    font-size: 24px !important;
  }
}

/* ── Image fallback for broken avatars ── */
img.avatar,
img.user-avatar,
img[data-fallback] {
  object-fit: cover;
  background: var(--surface-raised, rgba(255, 255, 255, 0.08));
}

img.avatar[src=""],
img.avatar:not([src]),
img.user-avatar[src=""],
img.user-avatar:not([src]) {
  background: linear-gradient(135deg, rgba(56, 199, 244, .12), rgba(26, 110, 255, .08));
}

/* ── GPS accuracy color coding ── */
.gps-accuracy-good {
  color: var(--success, #49d39a);
}

.gps-accuracy-medium {
  color: var(--warning, #f7c76b);
}

.gps-accuracy-poor {
  color: var(--danger, #ff6b7a);
}

/* ── Smooth all transitions ── */
*,
*::before,
*::after {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* v112 live location mobile polish */
.live-location-section .employee-list {
  display: grid !important;
  gap: 12px !important
}

.live-location-request-card {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 12px !important;
  align-items: stretch !important;
  padding: 14px !important;
  border-radius: 18px !important;
  background: linear-gradient(145deg, rgba(7, 22, 43, .96), rgba(5, 14, 30, .98)) !important;
  border: 1px solid rgba(0, 194, 255, .22) !important
}

.live-location-request-card strong {
  display: block !important;
  font-size: 15px !important;
  line-height: 1.45 !important
}

.live-location-request-card span,
.live-location-request-card small {
  display: block !important;
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
  line-height: 1.55 !important
}

.live-location-request-card .list-item-side {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 8px !important;
  width: 100% !important
}

.live-location-request-card .button,
.live-location-request-card button {
  width: 100% !important;
  min-height: 42px !important;
  border-radius: 13px !important
}

.location-fast-note {
  display: grid !important;
  gap: 5px !important;
  margin-top: 12px !important;
  padding: 12px 14px !important;
  border-radius: 16px !important;
  border: 1px solid rgba(34, 211, 238, .22) !important;
  background: rgba(8, 47, 73, .34) !important;
  color: #dff7ff !important
}

.location-fast-note span {
  color: rgba(223, 247, 255, .78) !important;
  line-height: 1.6 !important
}

.executive-location-card {
  display: grid !important;
  gap: 12px !important;
  margin-top: 14px !important;
  padding: 16px !important;
  border-radius: 18px !important;
  border: 1px solid rgba(34, 211, 238, .25) !important;
  background: linear-gradient(145deg, rgba(8, 47, 73, .42), rgba(15, 23, 42, .82)) !important
}

.executive-location-card>div:first-child {
  display: grid !important;
  gap: 4px !important
}

.executive-location-card span,
.executive-location-card small {
  color: rgba(226, 242, 255, .74) !important
}

.executive-location-card strong {
  color: #f8fbff !important;
  font-size: clamp(17px, 4vw, 22px) !important;
  line-height: 1.35 !important
}

.executive-location-meta {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 8px !important
}

.executive-location-meta span {
  padding: 9px 10px !important;
  border-radius: 12px !important;
  background: rgba(15, 23, 42, .72) !important;
  border: 1px solid rgba(148, 163, 184, .16) !important;
  word-break: break-word !important
}

@media (max-width:640px) {
  .executive-location-meta {
    grid-template-columns: 1fr !important
  }
}

/* v114 profile, executive cards, and live location polish */
.password-change-card {
  border-color: rgba(0, 194, 255, .28) !important;
  background: linear-gradient(160deg, rgba(11, 28, 58, .94), rgba(7, 15, 35, .98)) !important;
  box-shadow: 0 18px 52px rgba(0, 0, 0, .24) !important
}

.password-change-card .employee-form-grid {
  gap: 12px !important
}

.password-change-card label {
  display: grid !important;
  gap: 8px !important;
  padding: 12px !important;
  border: 1px solid rgba(148, 163, 184, .18) !important;
  border-radius: 16px !important;
  background: rgba(2, 6, 23, .34) !important
}

.password-change-card input {
  min-height: 48px !important;
  font-size: 16px !important
}

.password-change-card .button.full {
  min-height: 50px !important
}

.employee-card-grid {
  grid-template-columns: repeat(auto-fill, minmax(248px, 1fr)) !important;
  gap: 16px !important
}

.executive-employee-card {
  min-height: 286px !important;
  display: grid !important;
  grid-template-columns: 1fr !important;
  align-content: start !important;
  justify-items: center !important;
  gap: 12px !important;
  padding: 18px !important;
  text-align: center !important;
  overflow: hidden !important
}

.executive-employee-card .avatar-button,
.executive-employee-card .card-avatar-box {
  width: 74px !important;
  height: 74px !important;
  display: grid !important;
  place-items: center !important
}

.executive-employee-card .avatar.large,
.executive-employee-card .person-avatar.large {
  width: 68px !important;
  height: 68px !important;
  border-radius: 18px !important
}

.executive-employee-card .employee-card-main,
.executive-employee-card .card-info-box {
  width: 100% !important;
  min-width: 0 !important;
  display: grid !important;
  gap: 6px !important
}

.executive-employee-card strong,
.executive-employee-card .emp-name {
  font-size: 16px !important;
  line-height: 1.35 !important;
  white-space: normal !important;
  overflow-wrap: anywhere !important
}

.executive-employee-card small,
.executive-employee-card .risk-line,
.executive-employee-card .emp-job-title {
  line-height: 1.5 !important;
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
  color: rgba(211, 226, 246, .82) !important
}

.executive-employee-card .mini-card-actions,
.executive-employee-card .card-actions-row {
  width: 100% !important;
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 8px !important
}

.executive-employee-card .button {
  width: 100% !important;
  min-height: 40px !important;
  justify-content: center !important
}

.live-location-alert-backdrop {
  background: rgba(3, 7, 18, .74) !important;
  backdrop-filter: blur(10px) !important
}

.live-location-alert-modal {
  width: min(370px, calc(100vw - 32px)) !important;
  max-height: min(78vh, 620px) !important;
  display: grid !important;
  justify-items: center !important;
  gap: 14px !important;
  padding: 24px !important;
  text-align: center !important;
  border: 1px solid rgba(0, 194, 255, .34) !important;
  background: linear-gradient(160deg, rgba(10, 25, 52, .97), rgba(6, 14, 32, .99)) !important;
  box-shadow: 0 24px 80px rgba(0, 0, 0, .42), 0 0 0 1px rgba(0, 194, 255, .08) !important
}

.live-location-alert-icon {
  width: 56px !important;
  height: 56px !important;
  display: grid !important;
  place-items: center !important;
  border-radius: 18px !important;
  background: rgba(0, 194, 255, .14) !important;
  border: 1px solid rgba(0, 194, 255, .38) !important;
  font-size: 28px !important
}

.live-location-alert-copy {
  display: grid !important;
  gap: 8px !important
}

.live-location-alert-copy h2 {
  margin: 0 !important;
  font-size: clamp(24px, 7vw, 34px) !important;
  line-height: 1.25 !important
}

.live-location-alert-copy p {
  margin: 0 !important;
  color: #c9d8ee !important;
  line-height: 1.75 !important
}

.live-location-alert-actions {
  width: 100% !important;
  display: grid !important
}

.live-location-alert-actions .button {
  width: 100% !important;
  min-height: 50px !important
}

@media (max-width:640px) {
  .employee-card-grid {
    grid-template-columns: 1fr !important
  }

  .executive-employee-card {
    min-height: 0 !important;
    padding: 16px !important
  }
}

/* v115 cross-portal UX tightening */
.main {
  padding-top: clamp(12px, 1.6vw, 18px) !important
}

.topbar {
  min-height: 0 !important;
  padding: 10px 14px !important;
  margin-bottom: 12px !important;
  align-items: center !important
}

.topbar .page-title h1,
.page-title h1 {
  font-size: clamp(26px, 3.2vw, 42px) !important;
  line-height: 1.08 !important;
  margin: 0 !important
}

.topbar .page-title p,
.page-title p {
  margin-top: 6px !important;
  line-height: 1.35 !important
}

.main>.message,
.executive-main>.message {
  width: min(100%, 760px) !important;
  padding: 10px 14px !important;
  min-height: 0 !important;
  margin: 0 0 10px !important;
  border-radius: 14px !important;
  line-height: 1.55 !important
}

.main>.grid,
.main>.stack {
  margin-top: 8px !important
}

.executive-topbar {
  min-height: 0 !important;
  padding: 10px 16px !important;
  align-items: center !important
}

.executive-brand img {
  width: 46px !important;
  height: 46px !important
}

.executive-tabs {
  gap: 8px !important
}

.executive-tabs button {
  min-height: 38px !important;
  padding: 8px 14px !important
}

.executive-user .button,
.executive-user .user-chip {
  min-height: 36px !important
}

.executive-main {
  padding-block: 16px !important
}

.executive-page-head {
  margin-bottom: 14px !important;
  padding-bottom: 12px !important;
  align-items: center !important
}

.executive-page-head h1 {
  font-size: clamp(24px, 3.3vw, 34px) !important;
  margin-top: 6px !important
}

.executive-hero.panel {
  min-height: 0 !important;
  padding: clamp(18px, 2.4vw, 26px) !important;
  margin-bottom: 16px !important
}

.executive-metric-grid,
.metric-grid {
  margin-top: 12px !important;
  margin-bottom: 16px !important
}

.live-location-card-list {
  gap: 10px !important
}

.live-location-request-card {
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: center !important;
  padding: 14px !important
}

.live-location-request-card strong {
  font-size: clamp(16px, 4vw, 19px) !important
}

.live-location-request-card .button {
  min-width: 132px !important;
  min-height: 42px !important
}

@media (max-width:760px) {
  .topbar {
    padding: 10px !important
  }

  .executive-topbar {
    gap: 10px !important;
    padding: 10px !important
  }

  .executive-tabs {
    width: 100% !important;
    overflow-x: auto !important;
    padding-bottom: 4px !important
  }

  .executive-page-head {
    display: grid !important;
    gap: 10px !important;
    text-align: center !important;
    justify-items: center !important
  }

  .live-location-request-card {
    grid-template-columns: 1fr !important;
    text-align: center !important
  }

  .live-location-request-card .list-item-side,
  .live-location-request-card .button {
    width: 100% !important
  }
}

/* v116: force the employee More sheet to use screen width with several icons per row */
body.employee-portal .employee-more-sheet {
  width: min(calc(100vw - 16px), 520px) !important;
  max-width: none !important
}

body.employee-portal .employee-more-sheet .more-sheet-grid,
body.employee-portal .more-sheet-grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 8px !important
}

body.employee-portal .more-sheet-grid button {
  width: 100% !important;
  min-width: 0 !important;
  min-height: 62px !important;
  padding: 8px 5px !important
}

@media (min-width:430px) {

  body.employee-portal .employee-more-sheet .more-sheet-grid,
  body.employee-portal .more-sheet-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important
  }
}

@media (max-width:330px) {

  body.employee-portal .employee-more-sheet .more-sheet-grid,
  body.employee-portal .more-sheet-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important
  }
}

/* v118 executive mobile responsiveness hardening */
.executive-portal-app {
  min-width: 0 !important;
  width: 100% !important;
  overflow-x: clip !important;
}

.executive-shell {
  width: min(100%, 1240px) !important;
  margin-inline: auto !important;
  padding-inline: clamp(8px, 2.6vw, 18px) !important;
}

.executive-topbar {
  position: sticky !important;
  top: max(8px, env(safe-area-inset-top, 0px)) !important;
  z-index: 50 !important;
  width: 100% !important;
  max-width: 100% !important;
  display: grid !important;
  grid-template-columns: minmax(180px, 1fr) minmax(0, auto) !important;
  gap: 10px !important;
  align-items: center !important;
  margin: 8px auto 0 !important;
}

.executive-brand {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  min-width: 0 !important;
}

.executive-brand>div {
  min-width: 0 !important;
}

.executive-brand strong,
.executive-brand span,
.executive-user .user-chip span {
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.executive-tabs {
  grid-column: 1 / -1 !important;
  display: grid !important;
  grid-auto-flow: column !important;
  grid-auto-columns: max-content !important;
  max-width: 100% !important;
  overflow-x: auto !important;
  overscroll-behavior-inline: contain !important;
  scrollbar-width: none !important;
}

.executive-tabs::-webkit-scrollbar {
  display: none !important;
}

.executive-tabs button {
  min-width: 0 !important;
  white-space: nowrap !important;
  touch-action: manipulation !important;
}

.executive-user {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 6px !important;
  min-width: 0 !important;
}

.executive-user .button,
.executive-tabs button,
.executive-main .button {
  min-height: 42px !important;
}

.executive-main {
  width: 100% !important;
  max-width: 100% !important;
  padding: clamp(12px, 2.4vw, 24px) 0 calc(20px + env(safe-area-inset-bottom, 0px)) !important;
}

.executive-page-head {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  gap: 12px !important;
  min-width: 0 !important;
}

.executive-page-head>div {
  min-width: 0 !important;
}

.executive-page-head p {
  max-width: 72ch !important;
}

.executive-hero {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: 14px !important;
}

.executive-focus-grid,
.executive-detail-grid {
  display: grid !important;
  grid-template-columns: repeat(12, minmax(0, 1fr)) !important;
  gap: 14px !important;
}

.executive-focus-grid>*,
.executive-detail-grid>*,
.executive-main .panel {
  min-width: 0 !important;
}

.executive-main .panel-head,
.employee-detail-hero .panel-head {
  display: flex !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  gap: 12px !important;
  flex-wrap: wrap !important;
}

.executive-filters {
  display: grid !important;
  grid-template-columns: minmax(180px, 1fr) minmax(140px, .45fr) auto !important;
  gap: 10px !important;
  align-items: end !important;
}

.executive-filters input,
.executive-filters select,
.executive-filters button {
  width: 100% !important;
  min-width: 0 !important;
}

.live-map-board {
  min-height: clamp(320px, 54svh, 560px) !important;
  overflow: hidden !important;
}

.map-pin {
  max-width: min(210px, 46vw) !important;
  overflow-wrap: anywhere !important;
}

.executive-main .table-wrap {
  max-width: 100% !important;
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch !important;
}

.executive-main .table-wrap table {
  width: 100% !important;
}

.executive-main .person-cell {
  min-width: 0 !important;
}

.executive-main .person-cell span,
.executive-main td,
.executive-main th {
  overflow-wrap: anywhere !important;
}

@media (max-width: 900px) {
  .executive-shell {
    padding-inline: 10px !important;
  }

  .executive-topbar {
    grid-template-columns: 1fr !important;
    border-radius: 18px !important;
  }

  .executive-user {
    width: 100% !important;
    justify-content: stretch !important;
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }

  .executive-user .user-chip {
    grid-column: 1 / -1 !important;
    width: 100% !important;
    justify-content: center !important;
  }

  .executive-user .button {
    width: 100% !important;
    padding-inline: 8px !important;
    font-size: 12px !important;
  }

  .executive-tabs {
    margin-inline: -2px !important;
    padding: 5px !important;
  }

  .executive-tabs button {
    padding: 8px 12px !important;
    font-size: 12px !important;
  }

  .executive-page-head,
  .executive-hero {
    grid-template-columns: 1fr !important;
    text-align: center !important;
    justify-items: center !important;
  }

  .executive-page-head h1 {
    font-size: clamp(22px, 7vw, 30px) !important;
    line-height: 1.25 !important;
  }

  .executive-focus-grid,
  .executive-detail-grid {
    grid-template-columns: 1fr !important;
  }

  .executive-focus-grid>*,
  .executive-detail-grid>*,
  .span-4,
  .span-5,
  .span-6,
  .span-7,
  .span-12 {
    grid-column: 1 / -1 !important;
  }

  .executive-filters {
    grid-template-columns: 1fr !important;
  }

  .employee-detail-hero .toolbar {
    width: 100% !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }
}

@media (max-width: 640px) {
  .executive-shell {
    padding-inline: 8px !important;
  }

  .executive-topbar {
    top: max(6px, env(safe-area-inset-top, 0px)) !important;
    padding: 9px !important;
    gap: 8px !important;
  }

  .executive-brand img {
    width: 40px !important;
    height: 40px !important;
    border-radius: 12px !important;
  }

  .executive-brand strong {
    font-size: 14px !important;
  }

  .executive-brand span {
    font-size: 10px !important;
  }

  .executive-user {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .executive-user .user-chip {
    display: none !important;
  }

  .executive-user .button {
    min-height: 40px !important;
    border-radius: 12px !important;
  }

  .executive-tabs {
    position: relative !important;
    border-radius: 14px !important;
  }

  .executive-tabs button {
    min-height: 40px !important;
    padding: 7px 11px !important;
    font-size: 11.5px !important;
    border-radius: 11px !important;
  }

  .executive-main {
    padding-top: 12px !important;
  }

  .executive-main .panel,
  .executive-hero.panel,
  .mini-card {
    border-radius: 16px !important;
    padding: 14px !important;
  }

  .executive-main .panel-head {
    display: grid !important;
    grid-template-columns: 1fr !important;
  }

  .executive-main .panel-head .button,
  .executive-main .panel-head button {
    width: 100% !important;
  }

  .executive-main .metric-grid,
  .executive-metric-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }

  .executive-main .metric {
    min-height: 102px !important;
    padding: 12px 10px !important;
  }

  .employee-card-grid {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }

  .executive-employee-card {
    min-height: 0 !important;
    grid-template-columns: 56px minmax(0, 1fr) !important;
    justify-items: stretch !important;
    text-align: start !important;
    align-items: center !important;
    padding: 13px !important;
  }

  .executive-employee-card .avatar-button,
  .executive-employee-card .card-avatar-box {
    width: 56px !important;
    height: 56px !important;
  }

  .executive-employee-card .avatar.large,
  .executive-employee-card .person-avatar.large {
    width: 52px !important;
    height: 52px !important;
    border-radius: 15px !important;
  }

  .executive-employee-card .mini-card-actions,
  .executive-employee-card .card-actions-row {
    grid-column: 1 / -1 !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .executive-employee-card .mini-card-actions .status,
  .executive-employee-card .card-actions-row .status {
    grid-column: 1 / -1 !important;
    justify-self: stretch !important;
  }

  .executive-employee-card .button {
    min-height: 42px !important;
    padding-inline: 8px !important;
  }

  .score-ring {
    width: min(170px, 52vw) !important;
    height: min(170px, 52vw) !important;
  }

  .live-map-board {
    min-height: 360px !important;
  }

  .map-pin {
    position: static !important;
    display: grid !important;
    width: 100% !important;
    max-width: 100% !important;
    margin-bottom: 8px !important;
    transform: none !important;
  }

  .executive-main .table-wrap {
    overflow: visible !important;
    border: 0 !important;
    background: transparent !important;
  }

  .executive-main .table-wrap table,
  .executive-main .table-wrap thead,
  .executive-main .table-wrap tbody,
  .executive-main .table-wrap tr,
  .executive-main .table-wrap th,
  .executive-main .table-wrap td {
    display: block !important;
    width: 100% !important;
  }

  .executive-main .table-wrap thead {
    display: none !important;
  }

  .executive-main .table-wrap tbody {
    display: grid !important;
    gap: 10px !important;
  }

  .executive-main .table-wrap tr {
    padding: 12px !important;
    border: 1px solid rgba(56, 199, 244, .18) !important;
    border-radius: 15px !important;
    background: rgba(8, 18, 38, .82) !important;
  }

  .executive-main .table-wrap td {
    display: grid !important;
    grid-template-columns: minmax(84px, .35fr) minmax(0, 1fr) !important;
    gap: 10px !important;
    align-items: start !important;
    padding: 8px 0 !important;
    border: 0 !important;
    text-align: start !important;
  }

  .executive-main .table-wrap td+td {
    border-top: 1px solid rgba(148, 163, 184, .13) !important;
  }

  .executive-main .table-wrap td::before {
    content: attr(data-label) !important;
    color: rgba(186, 230, 255, .72) !important;
    font-size: 11px !important;
    font-weight: 900 !important;
    line-height: 1.5 !important;
  }

  .executive-main .table-wrap td.empty {
    grid-template-columns: 1fr !important;
    text-align: center !important;
  }

  .executive-main .table-wrap td.empty::before {
    content: none !important;
  }
}

@media (max-width: 380px) {

  .executive-main .metric-grid,
  .executive-metric-grid {
    grid-template-columns: 1fr !important;
  }

  .executive-employee-card {
    grid-template-columns: 1fr !important;
    justify-items: center !important;
    text-align: center !important;
  }

  .executive-employee-card .mini-card-actions,
  .executive-employee-card .card-actions-row {
    grid-template-columns: 1fr !important;
  }

  .executive-main .table-wrap td {
    grid-template-columns: 1fr !important;
    gap: 4px !important;
  }
}

/* Final employee more drawer layout override */
body.employee-portal .more-drawer {
  width: min(calc(100vw - 28px), 360px) !important;
}

body.employee-portal .more-drawer-body {
  display: grid !important;
  gap: 10px !important;
  overflow-y: auto !important;
  max-height: calc(100svh - var(--v108-nav-h) - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px) - 86px) !important;
  padding: 8px 12px 14px !important;
}

body.employee-portal .more-drawer-grid {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 8px !important;
  margin: 0 !important;
}

body.employee-portal .more-drawer-item {
  width: 100% !important;
  min-height: 48px !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 10px !important;
  padding: 10px 12px !important;
  border-radius: 13px !important;
  text-align: start !important;
}

body.employee-portal .more-drawer-item .di-icon {
  width: 30px !important;
  min-width: 30px !important;
  height: 30px !important;
  display: grid !important;
  place-items: center !important;
  font-size: 18px !important;
  line-height: 1 !important;
}

body.employee-portal .more-drawer-item .di-label {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  font-size: 12px !important;
  line-height: 1.35 !important;
  font-weight: 800 !important;
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
}

body.employee-portal .more-drawer-section-label {
  padding: 4px 2px 0 !important;
  font-size: 10px !important;
  line-height: 1.4 !important;
  text-align: start !important;
  color: rgba(186, 230, 255, .72) !important;
}