/*
  أحلى شباب HR — Neon Command Center Theme
  Applies a unified premium dark dashboard look across Employee, Admin, Executive and Operations Gate portals.
  Version: neon-command-center-20260504
*/
:root {
  color-scheme: dark;
  --neon-bg: #030814;
  --neon-bg-2: #071120;
  --neon-panel: rgba(8, 17, 34, .82);
  --neon-panel-strong: rgba(12, 25, 48, .92);
  --neon-card: rgba(12, 26, 52, .76);
  --neon-card-hover: rgba(16, 36, 70, .88);
  --neon-line: rgba(80, 153, 255, .24);
  --neon-line-strong: rgba(90, 210, 255, .52);
  --neon-cyan: #39d8ff;
  --neon-blue: #2f7bff;
  --neon-purple: #8b5cf6;
  --neon-pink: #ff2f86;
  --neon-green: #24f0a2;
  --neon-yellow: #ffd166;
  --neon-red: #ff4b7b;
  --neon-text: #f4f9ff;
  --neon-muted: #9fb3cc;
  --neon-shadow: 0 26px 70px rgba(0, 0, 0, .42);
  --neon-glow-blue: 0 0 0 1px rgba(57,216,255,.25), 0 0 24px rgba(57,216,255,.12);
  --neon-glow-purple: 0 0 0 1px rgba(139,92,246,.22), 0 0 26px rgba(139,92,246,.16);
  --neon-radius-xl: 28px;
  --neon-radius-lg: 22px;
  --neon-radius-md: 16px;
}

html, body {
  background:
    radial-gradient(circle at 10% 4%, rgba(57, 216, 255, .16), transparent 24rem),
    radial-gradient(circle at 86% 8%, rgba(139, 92, 246, .16), transparent 22rem),
    radial-gradient(circle at 55% 88%, rgba(47, 123, 255, .10), transparent 24rem),
    linear-gradient(180deg, var(--neon-bg) 0%, var(--neon-bg-2) 54%, #030712 100%) !important;
  color: var(--neon-text);
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -1;
  background-image:
    linear-gradient(rgba(57,216,255,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(57,216,255,.035) 1px, transparent 1px);
  background-size: 44px 44px;
  mask-image: radial-gradient(circle at 50% 12%, rgba(0,0,0,.9), transparent 72%);
}

/* Global dashboard shells */
.app-shell,
.admin-shell,
.employee-shell,
.executive-shell,
.portal-shell,
.main-shell,
.dashboard,
.dashboard-shell,
main,
#app {
  color: var(--neon-text);
}

/* Premium glass cards */
.card,
.stat-card,
.metric-card,
.dashboard-card,
.panel,
.section-card,
.info-card,
.employee-card,
.admin-card,
.executive-card,
.review-card,
.risk-card,
.kpi-card,
.quick-action,
.action-card,
.table-card,
.widget,
.widget-card,
[class*="card"],
[class*="panel"],
[class*="widget"] {
  border-color: var(--neon-line) !important;
  background:
    linear-gradient(180deg, rgba(15, 30, 58, .86), rgba(5, 13, 28, .72)) !important;
  box-shadow: var(--neon-shadow), inset 0 1px 0 rgba(255,255,255,.04) !important;
  backdrop-filter: blur(18px);
}

.card:hover,
.stat-card:hover,
.metric-card:hover,
.dashboard-card:hover,
.quick-action:hover,
.action-card:hover,
[class*="card"]:hover {
  border-color: var(--neon-line-strong) !important;
  background:
    linear-gradient(180deg, rgba(18, 40, 76, .92), rgba(7, 17, 35, .82)) !important;
  box-shadow: var(--neon-shadow), var(--neon-glow-blue) !important;
}

/* Titles and headers */
h1, h2, h3,
.page-title,
.section-title,
.dashboard-title,
.card-title,
.widget-title {
  color: var(--neon-text) !important;
  letter-spacing: -.015em;
  text-shadow: 0 0 22px rgba(57,216,255,.16);
}

.kicker,
.eyebrow,
.subtitle,
.section-subtitle,
.card-subtitle,
.muted,
.help-text,
.description,
small {
  color: var(--neon-muted) !important;
}

/* Buttons */
button,
.button,
.btn,
.primary,
.action-button,
.submit,
[type="submit"] {
  border-radius: 16px !important;
  border: 1px solid rgba(57,216,255,.32) !important;
  background:
    linear-gradient(135deg, rgba(57,216,255,.92), rgba(47,123,255,.9)) !important;
  color: #04101f !important;
  font-weight: 900 !important;
  box-shadow: 0 12px 30px rgba(47,123,255,.28), inset 0 1px 0 rgba(255,255,255,.45) !important;
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease, filter .16s ease !important;
  touch-action: manipulation;
}

button:hover,
.button:hover,
.btn:hover,
.action-button:hover,
.submit:hover {
  transform: translateY(-1px);
  filter: brightness(1.07);
  box-shadow: 0 18px 40px rgba(57,216,255,.28), 0 0 20px rgba(57,216,255,.22) !important;
}

button.secondary,
.button.secondary,
.btn.secondary,
.ghost,
.outline,
button[data-variant="secondary"] {
  background: rgba(12, 26, 52, .72) !important;
  color: var(--neon-text) !important;
  border-color: rgba(90,210,255,.36) !important;
  box-shadow: var(--neon-glow-blue) !important;
}

button.danger,
.button.danger,
.btn.danger,
.destructive,
[data-risk="high"] button {
  background: linear-gradient(135deg, var(--neon-pink), var(--neon-red)) !important;
  color: #fff !important;
  border-color: rgba(255, 75, 123, .48) !important;
  box-shadow: 0 12px 34px rgba(255,47,134,.22) !important;
}

/* Forms */
input,
select,
textarea,
.input,
.form-control {
  color: var(--neon-text) !important;
  background: rgba(3, 10, 24, .72) !important;
  border: 1px solid rgba(90,210,255,.28) !important;
  border-radius: 16px !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.03) !important;
}

input:focus,
select:focus,
textarea:focus,
.input:focus,
.form-control:focus {
  outline: none !important;
  border-color: rgba(57,216,255,.82) !important;
  box-shadow: 0 0 0 4px rgba(57,216,255,.12), 0 0 24px rgba(57,216,255,.16) !important;
}

::placeholder { color: rgba(159,179,204,.64) !important; }

/* Tables */
table,
.table,
.data-table {
  border-color: rgba(90,210,255,.18) !important;
  background: rgba(3, 10, 24, .38) !important;
}

thead,
th {
  background: rgba(57,216,255,.08) !important;
  color: #dff7ff !important;
  border-color: rgba(90,210,255,.2) !important;
}

td {
  border-color: rgba(90,210,255,.12) !important;
}

tr:hover td {
  background: rgba(57,216,255,.055) !important;
}

/* Badges */
.badge,
.status,
.status-badge,
.pill,
.tag,
.label,
[class*="badge"],
[class*="pill"] {
  border: 1px solid rgba(90,210,255,.32) !important;
  background: rgba(57,216,255,.1) !important;
  color: #dff7ff !important;
  box-shadow: 0 0 18px rgba(57,216,255,.08) !important;
}

.badge.success,
.status.success,
.is-ok,
[data-status="approved"],
[data-status="ok"] {
  border-color: rgba(36,240,162,.42) !important;
  background: rgba(36,240,162,.10) !important;
  color: #baf7df !important;
}

.badge.warning,
.status.warning,
.is-warning,
[data-status="pending"] {
  border-color: rgba(255,209,102,.42) !important;
  background: rgba(255,209,102,.11) !important;
  color: #ffe7a8 !important;
}

.badge.danger,
.status.danger,
.is-danger,
[data-status="rejected"],
[data-risk="high"] {
  border-color: rgba(255,75,123,.48) !important;
  background: rgba(255,47,134,.13) !important;
  color: #ffd2df !important;
}

/* Navigation and shell surfaces */
.sidebar,
.side-nav,
.topbar,
.navbar,
.employee-topbar,
.employee-bottom-nav,
.admin-topbar,
.executive-topbar {
  background: rgba(5, 12, 28, .88) !important;
  border-color: rgba(90,210,255,.24) !important;
  box-shadow: 0 18px 48px rgba(0,0,0,.34), inset 0 1px 0 rgba(255,255,255,.035) !important;
  backdrop-filter: blur(20px);
}

.nav-link,
.menu-link,
.tab,
.employee-nav-item,
.sidebar a,
[role="tab"] {
  color: var(--neon-muted) !important;
  border-color: transparent !important;
}

.nav-link.active,
.nav-link[aria-current="page"],
.menu-link.active,
.tab.active,
.employee-nav-item.is-active,
.employee-nav-item[aria-current="page"],
[role="tab"][aria-selected="true"] {
  color: #ffffff !important;
  background: linear-gradient(135deg, rgba(57,216,255,.16), rgba(139,92,246,.12)) !important;
  border-color: rgba(57,216,255,.34) !important;
  box-shadow: var(--neon-glow-blue) !important;
}

/* Dashboard metrics */
.stat-value,
.metric-value,
.kpi-value,
.counter,
.number,
.value {
  color: #ffffff !important;
  text-shadow: 0 0 20px rgba(57,216,255,.22);
}

.stat-icon,
.metric-icon,
.icon-circle,
.feature-icon {
  background: linear-gradient(135deg, rgba(57,216,255,.2), rgba(139,92,246,.18)) !important;
  color: #dff7ff !important;
  border: 1px solid rgba(90,210,255,.28) !important;
  box-shadow: 0 0 26px rgba(57,216,255,.12) !important;
}

/* Risk center / identity guard emphasis */
.risk-score,
.identity-risk,
.attendance-risk,
.security-alert,
.alert-card {
  border-color: rgba(255,47,134,.36) !important;
  background: linear-gradient(180deg, rgba(66,10,38,.58), rgba(16,12,32,.72)) !important;
  box-shadow: 0 0 30px rgba(255,47,134,.14) !important;
}

/* Charts and visual blocks */
canvas,
.chart,
.chart-card,
.graph,
.map-card,
.heatmap,
.qr-panel {
  border-radius: var(--neon-radius-lg) !important;
  border-color: rgba(90,210,255,.24) !important;
  background:
    radial-gradient(circle at 70% 0%, rgba(57,216,255,.12), transparent 18rem),
    rgba(3, 10, 24, .52) !important;
}

/* Operations gate */
.gate {
  background:
    radial-gradient(circle at 90% 0%, rgba(57,216,255,.16), transparent 18rem),
    linear-gradient(180deg, rgba(15,30,58,.94), rgba(5,12,28,.94)) !important;
  border: 1px solid rgba(90,210,255,.34) !important;
  box-shadow: 0 34px 90px rgba(0,0,0,.52), var(--neon-glow-blue) !important;
}

/* Print: keep content legible */
@media print {
  html, body, #app, main { background: #fff !important; color: #000 !important; }
  .card, .panel, [class*="card"], [class*="panel"] { background: #fff !important; color: #000 !important; box-shadow: none !important; }
}

@media (max-width: 720px) {
  :root { --neon-radius-xl: 22px; --neon-radius-lg: 18px; }
  .card,
  .stat-card,
  .metric-card,
  .dashboard-card,
  [class*="card"] { border-radius: 18px !important; }
  button,
  .button,
  .btn { min-height: 44px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}

/* =========================================================
   Neon Command Center Theme V3 — accessibility and clarity
   ========================================================= */
:root {
  --neon-focus: 0 0 0 3px rgba(57, 216, 255, .35), 0 0 0 6px rgba(47, 123, 255, .16);
  --neon-danger-glow: 0 0 0 1px rgba(255, 75, 123, .35), 0 0 24px rgba(255, 75, 123, .14);
  --neon-warning-glow: 0 0 0 1px rgba(255, 209, 102, .35), 0 0 24px rgba(255, 209, 102, .12);
  --neon-ok-glow: 0 0 0 1px rgba(36, 240, 162, .32), 0 0 24px rgba(36, 240, 162, .12);
}

/* Strong focus visibility for keyboard users */
:where(a, button, input, textarea, select, [role="button"], [tabindex]):focus-visible {
  outline: none !important;
  box-shadow: var(--neon-focus) !important;
  border-color: var(--neon-cyan) !important;
}

/* Minimum touch target size for mobile and tablets */
:where(button, .button, .btn, .nav-link, .tab, [role="button"]) {
  min-height: 44px;
  min-width: 44px;
  touch-action: manipulation;
}

/* Risk and review state accents */
:where(.risk-high, .status-critical, .badge-critical, .review-required, [data-risk="high"]) {
  border-color: rgba(255, 75, 123, .58) !important;
  box-shadow: var(--neon-danger-glow) !important;
}
:where(.risk-medium, .status-warning, .badge-warning, [data-risk="medium"]) {
  border-color: rgba(255, 209, 102, .52) !important;
  box-shadow: var(--neon-warning-glow) !important;
}
:where(.risk-low, .status-ok, .badge-ok, [data-risk="low"]) {
  border-color: rgba(36, 240, 162, .42) !important;
  box-shadow: var(--neon-ok-glow) !important;
}

/* Better mobile table handling */
:where(.table-wrapper, .data-table-wrap, .responsive-table, .admin-table-wrapper) {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
}

/* More readable placeholders and disabled controls */
::placeholder { color: rgba(190, 210, 235, .58) !important; }
:disabled, [aria-disabled="true"] {
  opacity: .55 !important;
  cursor: not-allowed !important;
  filter: saturate(.75);
}

/* Empty states and helper panels */
:where(.empty-state, .helper-panel, .notice-panel, .review-empty) {
  border: 1px dashed rgba(90, 210, 255, .32) !important;
  background: linear-gradient(145deg, rgba(8,17,34,.78), rgba(10,25,50,.46)) !important;
  color: var(--neon-muted) !important;
  border-radius: var(--neon-radius-lg) !important;
  padding: clamp(18px, 3vw, 28px) !important;
}

/* Reduce animation intensity for users who request it */
@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;
  }
  body::before, body::after { display: none !important; }
}

/* Compact mobile adjustments */
@media (max-width: 720px) {
  :where(.card, .panel, .dashboard-card, .metric-card, .section-card) {
    border-radius: 18px !important;
  }
  :where(.grid, .dashboard-grid, .cards-grid, .metrics-grid) {
    gap: 12px !important;
  }
  :where(h1, .page-title) { letter-spacing: -.02em; }
}

/* Employee UX notes batch — location readability, header, punch, KPI, team, disputes */
.employee-topbar { gap: 14px; }
.employee-brand.is-larger-logo img,
.employee-brand img { width: 54px; height: 54px; transform: scale(1.12); filter: drop-shadow(0 0 18px rgba(56,199,244,.42)); }
.employee-user { min-width: min(62vw, 360px); justify-content: flex-start; gap: 12px; padding: 10px 14px; }
.employee-user .avatar { width: 46px; height: 46px; }
.employee-user span { display: grid; gap: 3px; text-align: right; line-height: 1.25; }
.employee-user strong { font-size: clamp(13px, 3.4vw, 16px); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 220px; }
.employee-user small { color: var(--muted, #9fb1c7); font-size: 12px; }
.employee-header-card { align-items: center; background: rgba(8,20,38,.72); border: 1px solid rgba(56,199,244,.22); border-radius: 24px; padding: 12px; }
.employee-header-card .avatar { width: 72px; height: 72px; }
.employee-home-flow { display: grid; gap: 18px; }
.home-welcome .person-cell { margin-bottom: 12px; }
.punch-primary-card, .location-status-card, .attendance-reminder-card { border-color: rgba(56,199,244,.34); }
.attendance-reminder-card { background: linear-gradient(135deg, rgba(255,183,77,.16), rgba(15,23,42,.92)); }
.unified-actions { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 12px; }
.context-state-card .success-text { color: #85f7b5; }
.context-state-card .warning-text { color: #ffd27a; }
.readable-location { display: grid; gap: 8px; padding: 14px; border: 1px solid rgba(56,199,244,.25); border-radius: 20px; background: rgba(7,18,34,.78); }
.readable-location > div:first-child { display: grid; gap: 5px; }
.readable-location strong { font-size: clamp(18px, 5vw, 24px); color: #eef7ff; }
.readable-location small { color: var(--muted, #9fb1c7); }
.location-meta-row { display: flex; flex-wrap: wrap; gap: 8px; color: #66ddff; font-size: 12px; }
.branch-readable-card { display: flex; align-items: center; gap: 14px; padding: 16px; border-radius: 24px; border: 1px solid rgba(56,199,244,.32); background: radial-gradient(circle at 20% 20%, rgba(56,199,244,.18), rgba(7,18,34,.92)); margin: 16px 0; }
.branch-readable-card strong { display: block; font-size: 24px; }
.branch-readable-card small { color: var(--muted, #9fb1c7); }
.branch-circle { width: 58px; height: 58px; border-radius: 50%; display: grid; place-items: center; background: rgba(56,199,244,.18); border: 1px solid rgba(56,199,244,.42); box-shadow: 0 0 24px rgba(56,199,244,.16); }
.gps-map-preview { min-height: 132px; border: 1px dashed rgba(137,164,208,.35); border-radius: 24px; display: grid; place-items: center; gap: 8px; padding: 16px; background: linear-gradient(135deg, rgba(4,12,26,.82), rgba(9,22,44,.88)); text-align: center; }
.geo-circle { width: 118px; height: 118px; border-radius: 50%; border: 2px solid rgba(56,199,244,.75); display: grid; place-items: center; position: relative; color: #62dcff; }
.geo-circle i { width: 12px; height: 12px; border-radius: 50%; background: #22c55e; box-shadow: 0 0 16px #22c55e; }
.punch-note-field textarea { min-height: 74px; }
.punch-actions-clear .button.primary { font-size: 20px; min-height: 58px; }
.punch-actions-clear .button.small { min-height: 44px; align-self: center; padding-inline: 18px; }
.kpi-slider-stack { display: grid; gap: 18px; }
.kpi-slider-field { display: grid; gap: 10px; background: rgba(7,18,34,.76); border: 1px solid rgba(56,199,244,.22); border-radius: 18px; padding: 14px; }
.kpi-slider-field input[type="range"] { width: 100%; accent-color: #43d8ff; }
.kpi-slider-field.is-readonly { opacity: .72; }
.kpi-slider-meta { display: flex; justify-content: space-between; gap: 10px; color: #62dcff; }
.kpi-progress { height: 9px; border-radius: 99px; background: rgba(255,255,255,.08); overflow: hidden; }
.kpi-progress i { display: block; height: 100%; background: linear-gradient(90deg,#1ec8ff,#8b5cf6); box-shadow: 0 0 14px rgba(56,199,244,.45); }
.checkbox-line { display: flex !important; align-items: center; gap: 10px; justify-content: flex-start; }
.checkbox-line input { width: 20px; height: 20px; }
.team-manager-page .button.small, .employee-list .button.small { min-height: 36px; padding: 8px 12px; font-size: 12px; }
.hr-toast { z-index: 99999; }
.message:not(.compact):not(.danger-box) { animation: fade-out-message 5s ease forwards; }
@keyframes fade-out-message { 0%,80%{opacity:1; transform:none;} 100%{opacity:0; transform:translateY(-8px); pointer-events:none;} }
@media (max-width: 640px) {
  .employee-topbar { padding-inline: 14px; }
  .employee-brand img { width: 58px; height: 58px; }
  .employee-user { min-width: 0; flex: 1; }
  .employee-user strong { max-width: 42vw; }
  .unified-actions { grid-template-columns: repeat(3, minmax(0,1fr)); }
  .branch-readable-card strong { font-size: 21px; }
}

/* 093: Live binding polish for HR/Executive operational pages */
.live-bound-page .accent-panel {
  background:
    radial-gradient(circle at 10% 12%, rgba(56,199,244,.22), transparent 32%),
    linear-gradient(135deg, rgba(8,22,48,.94), rgba(18,24,58,.88) 48%, rgba(12,18,42,.96));
  border-color: rgba(99, 205, 255, .32) !important;
}
.live-bound-page .metric-grid {
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}
.live-bound-page .metric-card,
.live-bound-page .metric {
  background: linear-gradient(180deg, rgba(15,33,70,.82), rgba(5,12,28,.92));
  border: 1px solid rgba(91, 190, 255, .24);
  box-shadow: 0 18px 40px rgba(0,0,0,.20), inset 0 1px 0 rgba(255,255,255,.06);
}
.live-bound-page .panel-head p { max-width: 780px; }
.health-strip { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.scope-list { display: flex; flex-wrap: wrap; gap: 6px; }
.scope-list span,
.tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border-radius: 999px;
  padding: 5px 10px;
  font-size: 12px;
  color: #dff7ff;
  background: rgba(56,199,244,.12);
  border: 1px solid rgba(56,199,244,.22);
  margin: 2px;
}
.tag.danger { color: #ffd7de; background: rgba(239,68,68,.16); border-color: rgba(239,68,68,.32); }
.tag.warning { color: #fff1c2; background: rgba(245,158,11,.16); border-color: rgba(245,158,11,.32); }
.tag.info { color: #dff7ff; background: rgba(14,165,233,.16); border-color: rgba(14,165,233,.32); }
.employee-location-grid,
.employee-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 14px;
}
.employee-location-card,
.ops-card {
  background: linear-gradient(145deg, rgba(8, 19, 41, .92), rgba(13, 24, 54, .86));
  border: 1px solid rgba(91,190,255,.20);
  border-radius: 22px;
  padding: 14px;
  box-shadow: 0 14px 34px rgba(0,0,0,.22);
}
.location-card-head {
  width: 100%;
  border: 0;
  background: transparent;
  color: inherit;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 12px;
  text-align: right;
  cursor: pointer;
  padding: 0;
}
.location-card-head strong { display:block; font-size: 15px; }
.location-card-head small { color: var(--muted, #9fb1c7); }
.location-card-actions,
.card-actions-row { display:flex; flex-wrap:wrap; gap:8px; margin-top:12px; }
.location-details { margin-top: 14px; display: grid; gap: 12px; }
.location-details.hidden { display: none; }
.meta-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 8px;
}
.meta-grid span,
.map-line span,
.empty-box {
  border-radius: 14px;
  padding: 9px 10px;
  background: rgba(255,255,255,.045);
  border: 1px solid rgba(255,255,255,.08);
  color: #dbeafe;
}
.map-line { display:flex; flex-wrap:wrap; gap:8px; align-items:center; }
.executive-daily-strip {
  border-color: rgba(34,197,94,.25) !important;
  background: linear-gradient(135deg, rgba(5, 28, 33, .92), rgba(14, 28, 66, .92));
}
.notifications-hub-page .table-wrap td small { display:block; color: var(--muted, #9fb1c7); margin-top: 4px; }
.permission-grid { max-height: 55vh; overflow:auto; padding-inline-end: 4px; }
.status.NO_DEVICE, .status.REJECTED, .status.FULL_ACCESS { background: rgba(239,68,68,.16); color:#ffd7de; border-color: rgba(239,68,68,.34); }
.status.PUSH_ACTIVE, .status.APPROVED, .status.DEVICE_TRUSTED { background: rgba(34,197,94,.16); color:#bbf7d0; border-color: rgba(34,197,94,.34); }
.status.PASSKEY_ONLY, .status.PENDING_APPROVAL, .status.SENSITIVE, .status.PENDING { background: rgba(245,158,11,.16); color:#fde68a; border-color: rgba(245,158,11,.34); }
@media (max-width: 720px) {
  .location-card-head { grid-template-columns: auto 1fr; }
  .location-card-head .status { grid-column: 1 / -1; justify-self: start; }
  .location-card-actions .button,
  .card-actions-row .button { flex: 1 1 100%; }
}

/* v31-production-hardening-098: KPI automation/mobile/reporting polish */
.kpi-workflow-timeline{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:.75rem;margin:1rem 0}.kpi-workflow-timeline span{display:flex;align-items:center;gap:.55rem;padding:.8rem;border:1px solid rgba(255,255,255,.12);border-radius:18px;background:linear-gradient(135deg,rgba(37,99,235,.18),rgba(124,58,237,.12));color:#eef6ff}.kpi-workflow-timeline b{display:grid;place-items:center;width:28px;height:28px;border-radius:999px;background:#2563eb;color:#fff}.kpi-stage-pending strong{color:#facc15}.kpi-stage-manager strong{color:#60a5fa}.kpi-stage-hr strong{color:#34d399}.kpi-stage-secretary strong{color:#c084fc}.kpi-stage-executive strong{color:#fb7185}.kpi-stage-done strong{color:#22c55e}.executive-report-summary{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:.75rem;margin-top:1rem}.executive-report-summary div{padding:1rem;border-radius:18px;background:rgba(15,23,42,.48);border:1px solid rgba(255,255,255,.1)}.executive-report-summary span{display:block;color:#a8c7ff;font-size:.85rem}.executive-report-summary strong{font-size:1.8rem}.scrollable-chips{max-height:260px;overflow:auto}.toolbar.stacked{display:grid;gap:.7rem}.no-print{display:flex}@media print{.sidebar,.topbar,.nav-fab,.no-print,.message,.form-actions{display:none!important}.layout,.main-content{display:block!important;width:100%!important}.panel{box-shadow:none!important;border:1px solid #ddd!important;background:#fff!important;color:#111!important}.print-area{page-break-inside:avoid}.table-wrap{overflow:visible!important}body{background:#fff!important;color:#111!important}}

/* ════════════════════════════════════════════════════════════
   v101 ADMIN APP UX IMPROVEMENTS
   ════════════════════════════════════════════════════════════ */

/* ── Admin login screen ── */
.admin-login-wrap {
  min-height: 100svh;
  display: grid;
  place-items: center;
  padding: 24px;
  background:
    radial-gradient(ellipse 90% 50% at 50% -10%, rgba(57,216,255,.10) 0%, transparent 55%),
    radial-gradient(ellipse 60% 40% at 100% 100%, rgba(139,92,246,.08) 0%, transparent 60%),
    var(--neon-bg);
}
.admin-login-card {
  width: 100%;
  max-width: 440px;
  background: var(--neon-panel-strong);
  border: 1px solid rgba(57,216,255,.18);
  border-radius: var(--neon-radius-xl);
  padding: 40px 36px 32px;
  box-shadow: var(--neon-shadow), var(--neon-glow-blue);
  backdrop-filter: blur(24px);
  animation: loginCardIn .4s cubic-bezier(.22,1,.36,1);
}
@keyframes loginCardIn {
  from { opacity: 0; transform: translateY(20px) scale(.97); }
  to   { opacity: 1; transform: translateY(0)  scale(1); }
}
.admin-login-brand {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 28px;
}
.admin-login-icon {
  width: 52px; height: 52px;
  border-radius: 16px;
  background: linear-gradient(135deg, rgba(57,216,255,.22), rgba(47,123,255,.14));
  border: 1px solid rgba(57,216,255,.30);
  display: flex; align-items: center; justify-content: center;
  font-size: 24px;
  flex-shrink: 0;
  box-shadow: var(--neon-glow-blue);
}
.admin-login-brand h1 {
  font-size: 20px;
  font-weight: 900;
  background: linear-gradient(135deg, var(--neon-cyan), var(--neon-blue));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin: 0 0 2px;
}
.admin-login-brand span {
  font-size: 12px;
  color: var(--neon-muted);
  display: block;
}

/* ── Executive login ── */
.executive-login-wrap {
  min-height: 100svh;
  display: grid;
  place-items: center;
  padding: 24px;
  background:
    radial-gradient(ellipse 80% 50% at 30% -5%, rgba(139,92,246,.12) 0%, transparent 55%),
    radial-gradient(ellipse 60% 40% at 80% 110%, rgba(57,216,255,.07) 0%, transparent 60%),
    var(--neon-bg);
}
.executive-login-icon {
  background: linear-gradient(135deg, rgba(139,92,246,.25), rgba(139,92,246,.12));
  border-color: rgba(139,92,246,.35);
  box-shadow: var(--neon-glow-purple);
}
.executive-login-brand h1 {
  background: linear-gradient(135deg, #b985ff, var(--neon-purple));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ── Dashboard metric cards ── */
.neon-metric-card {
  position: relative;
  overflow: hidden;
  cursor: default;
}
.neon-metric-card::before {
  content: attr(data-sparkle);
  position: absolute;
  inset-inline-end: 14px;
  top: 14px;
  font-size: 28px;
  opacity: .18;
  line-height: 1;
  pointer-events: none;
}
.neon-metric-card:hover::before { opacity: .32; }
.neon-metric-value {
  font-size: clamp(28px, 4vw, 40px);
  font-weight: 900;
  letter-spacing: -.02em;
  line-height: 1;
  margin: 4px 0 8px;
  font-variant-numeric: tabular-nums;
  transition: color .3s;
}
.neon-metric-label {
  font-size: 12px;
  color: var(--neon-muted);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .07em;
  margin-bottom: 12px;
}
.neon-metric-delta {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  font-weight: 700;
  padding: 3px 9px;
  border-radius: 12px;
}
.neon-metric-delta.up {
  background: rgba(36,240,162,.12);
  color: var(--neon-green);
}
.neon-metric-delta.down {
  background: rgba(255,75,123,.10);
  color: var(--neon-red);
}
.neon-metric-delta.neutral {
  background: rgba(159,179,204,.10);
  color: var(--neon-muted);
}

/* ── Admin sidebar improvements ── */
.sidebar-header-wrap {
  padding: 20px 16px 8px;
  border-bottom: 1px solid rgba(57,216,255,.10);
  margin-bottom: 8px;
}
.sidebar-brand-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
}
.sidebar-brand-icon {
  width: 38px; height: 38px;
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(57,216,255,.2), rgba(47,123,255,.12));
  border: 1px solid rgba(57,216,255,.25);
  display: flex; align-items: center; justify-content: center;
  font-size: 18px;
  flex-shrink: 0;
}
.sidebar-brand-name {
  font-size: 14px;
  font-weight: 800;
  color: var(--neon-text);
}
.sidebar-brand-version {
  font-size: 10px;
  color: var(--neon-muted);
}
.nav-section-label {
  font-size: 9px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: rgba(159,179,204,.5);
  padding: 14px 18px 4px;
}
.nav-item-icon {
  width: 32px; height: 32px;
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  font-size: 16px;
  flex-shrink: 0;
  background: rgba(255,255,255,.04);
  transition: background .2s;
}
.nav-link:hover .nav-item-icon,
.nav-link.active .nav-item-icon {
  background: rgba(57,216,255,.12);
}

/* ── Admin topbar improvements ── */
.topbar-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-inline-start: auto;
}
.topbar-icon-btn {
  width: 38px; height: 38px;
  border-radius: 11px;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.08);
  color: var(--neon-text);
  display: flex; align-items: center; justify-content: center;
  font-size: 17px;
  cursor: pointer;
  transition: background .2s, border-color .2s;
  position: relative;
}
.topbar-icon-btn:hover {
  background: rgba(57,216,255,.10);
  border-color: rgba(57,216,255,.25);
}
.topbar-notif-dot {
  position: absolute;
  top: 5px; inset-inline-end: 5px;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--neon-red);
  border: 2px solid var(--neon-bg);
}

/* ── Attendance table improvements ── */
.attendance-row-present td:first-child {
  border-inline-start: 3px solid var(--neon-green);
}
.attendance-row-absent td:first-child {
  border-inline-start: 3px solid var(--neon-red);
}
.attendance-row-late td:first-child {
  border-inline-start: 3px solid var(--neon-yellow);
}
.attendance-row-holiday td:first-child {
  border-inline-start: 3px solid var(--neon-purple);
}

/* ── Quick stat row ── */
.quick-stats-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 20px;
}
.quick-stat-chip {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 8px 14px;
  background: var(--neon-card);
  border: 1px solid rgba(57,216,255,.12);
  border-radius: 14px;
  font-size: 13px;
  white-space: nowrap;
}
.quick-stat-chip .chip-val {
  font-weight: 900;
  font-size: 16px;
  color: var(--neon-cyan);
  font-variant-numeric: tabular-nums;
}

/* ── Filter bar ── */
.filter-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  padding: 12px 0;
  margin-bottom: 12px;
}
.filter-bar select,
.filter-bar input[type="text"],
.filter-bar input[type="date"],
.filter-bar input[type="month"] {
  min-width: 140px;
  padding: 8px 12px;
  background: var(--neon-panel);
  border: 1px solid rgba(57,216,255,.18);
  border-radius: 11px;
  color: var(--neon-text);
  font-size: 13px;
  transition: border-color .2s, box-shadow .2s;
}
.filter-bar select:focus,
.filter-bar input:focus {
  border-color: var(--neon-cyan);
  box-shadow: 0 0 0 3px rgba(57,216,255,.14);
  outline: none;
}

/* ── Action row fixed on mobile ── */
@media (max-width: 640px) {
  .page-actions {
    position: sticky;
    bottom: 76px;
    z-index: var(--z-fab);
    background: var(--neon-bg-2);
    padding: 10px 0;
    margin: 0 -4px;
    border-top: 1px solid rgba(57,216,255,.10);
  }
}

/* ── Admin presence map card ── */
.presence-map-card {
  position: relative;
  overflow: hidden;
  border-radius: var(--neon-radius-lg);
  min-height: 280px;
}
.presence-map-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top,
    rgba(3,8,20,.9) 0%,
    rgba(3,8,20,.2) 50%,
    transparent 100%);
  pointer-events: none;
}