/* ============================================================
   أحلى شباب HR — V10 Unified Command Theme
   Version: v32-enhanced-ux-bugfix-100
   Consolidated, deduplicated, and fully enhanced.
   ============================================================ */

/* ── 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;
  -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); } }