/* AR Beam — Contractor Record modal: light-neumorphism alignment + density.
 * The .emp-modal renders as a fixed React-portal overlay OUTSIDE .portal, so
 * the authenticated light-neu theme (scoped to .portal) never reached it and it
 * stayed dark glass with pale inputs. This restyles it to match the app's light
 * neumorphism and tightens spacing to remove dead white space.
 * Scoped to body.arb-portal-light so login/public + dark contexts are untouched.
 */

/* ---- Backdrop + shell -------------------------------------------------- */
body.arb-portal-light .emp-modal-overlay,
body.arb-portal-light .mini-modal-overlay {
  background: rgba(42,53,66,.42) !important;
  -webkit-backdrop-filter: blur(6px) !important; backdrop-filter: blur(6px) !important;
}
body.arb-portal-light .emp-modal,
body.arb-portal-light .mini-modal {
  color:#172333 !important;
  background:#e9edf2 !important;
  border:0 !important;
  border-radius:20px !important;
  box-shadow:16px 16px 40px rgba(96,107,120,.42), -12px -12px 32px #ffffff !important;
  -webkit-backdrop-filter:none !important; backdrop-filter:none !important;
}

/* Force every label/value to accessible dark ink (modal was built for #fff). */
body.arb-portal-light .emp-modal :where(h1,h2,h3,h4,h5,h6,p,span,div,label,legend,dt,dd,td,th,a,strong,b,small,time,li),
body.arb-portal-light .mini-modal :where(h1,h2,h3,h4,h5,h6,p,span,div,label,legend,dt,dd,td,th,a,strong,b,small,time,li) {
  color:#172333 !important; text-shadow:none !important;
}
body.arb-portal-light .emp-modal .emp-name,
body.arb-portal-light .emp-modal .emp-cardlet-name { color:#0f1b29 !important; }
body.arb-portal-light .emp-modal .emp-sub,
body.arb-portal-light .emp-modal .emp-id,
body.arb-portal-light .emp-modal .field-note,
body.arb-portal-light .emp-modal .emp-cardlet-id { color:#5a6675 !important; }

/* Inner cards / sections -> soft molded neu instead of dark translucent. */
body.arb-portal-light .emp-modal .emp-card,
body.arb-portal-light .emp-modal .emp-report,
body.arb-portal-light .emp-modal .profile-card {
  background:#e9edf2 !important; border:0 !important; border-radius:14px !important;
  box-shadow:6px 6px 14px #c7cdd5, -6px -6px 14px #ffffff !important;
}

/* ---- Buttons: raised light neu; keep colored action buttons intact ----- */
body.arb-portal-light .emp-modal button:not(.access-btn):not(.danger):not(.pill):not(.chip):not(.skill-circle):not([class*="close"]) {
  color:#233247 !important;
  background:#e9edf2 !important; background-image:none !important;
  border:0 !important;
  box-shadow:5px 5px 12px #c7cdd5, -5px -5px 12px #ffffff !important;
}
body.arb-portal-light .emp-modal button:not(.access-btn):not(.danger):not(.pill):not(.chip):not(.skill-circle):not([class*="close"]):hover {
  box-shadow:inset 3px 3px 8px #c7cdd5, inset -3px -3px 8px #ffffff !important;
}
body.arb-portal-light .emp-modal button:not(.access-btn):not(.danger):not(.pill):not(.chip):not(.skill-circle):not([class*="close"]):active {
  box-shadow:inset 4px 4px 9px #c7cdd5, inset -4px -4px 9px #ffffff !important;
}
/* Preserve the colored access + danger buttons exactly as designed. */
body.arb-portal-light .emp-modal .access-btn.enable { color:#052e16 !important; background:#34d399 !important; box-shadow:4px 4px 10px #c7cdd5,-4px -4px 10px #fff !important; }
body.arb-portal-light .emp-modal .access-btn.disable { color:#fff !important; background:#d97706 !important; box-shadow:4px 4px 10px #c7cdd5,-4px -4px 10px #fff !important; }
body.arb-portal-light .emp-modal .access-btn.remove { color:#fff !important; background:#dc2626 !important; box-shadow:4px 4px 10px #c7cdd5,-4px -4px 10px #fff !important; }

/* Management (orange) + danger cards stay meaningful on the light surface. */
body.arb-portal-light .emp-modal .emp-mgmt {
  background:color-mix(in srgb,var(--orange) 12%,#e9edf2) !important;
  border:1px solid color-mix(in srgb,var(--orange) 45%,transparent) !important;
  border-left:5px solid var(--orange) !important;
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--orange) 8%,transparent), 5px 5px 14px #c7cdd5, -5px -5px 14px #ffffff !important;
}
body.arb-portal-light .emp-modal .emp-danger {
  background:#fdecec !important;
  border:1px solid rgba(220,38,38,.4) !important;
  box-shadow:inset 0 0 0 1px rgba(220,38,38,.06), 4px 4px 12px #c7cdd5, -4px -4px 12px #ffffff !important;
}
body.arb-portal-light .emp-modal .emp-danger-title { color:#b91c1c !important; }

/* The bordered Account & Access card -> soft neu w/ a subtle red accent. */
body.arb-portal-light .emp-modal .emp-access-status .pill { filter:none !important; }

/* ---- Density: remove excessive white space ----------------------------- */
body.arb-portal-light .emp-modal-body { padding:12px 16px 14px !important; }
body.arb-portal-light .emp-modal .emp-body { gap:14px !important; padding:4px 14px 14px !important; }
body.arb-portal-light .emp-modal .emp-col { gap:11px !important; }
body.arb-portal-light .emp-modal .emp-details { gap:7px !important; margin-bottom:8px !important; }
body.arb-portal-light .emp-modal .emp-sub { margin-bottom:6px !important; }
body.arb-portal-light .emp-modal .emp-shift { margin-top:8px !important; gap:5px !important; }
body.arb-portal-light .emp-modal .profile-comms { margin-bottom:8px !important; }
body.arb-portal-light .emp-modal .profile-comms-row { gap:6px !important; }
body.arb-portal-light .emp-modal .emp-report { gap:6px !important; margin-bottom:6px !important; }
body.arb-portal-light .emp-modal .emp-mgmt { margin:4px 16px 12px !important; padding:12px 14px 12px !important; }
body.arb-portal-light .emp-modal .emp-mgmt-head { margin-bottom:10px !important; }
body.arb-portal-light .emp-modal .emp-mgmt-grid { gap:9px 14px !important; }
body.arb-portal-light .emp-modal .emp-mgmt-actions { margin-top:9px !important; }
body.arb-portal-light .emp-modal .emp-danger { margin-top:10px !important; padding:11px !important; }
body.arb-portal-light .emp-modal .emp-access-status { margin:3px 0 8px !important; }

/* Photo action buttons: keep them on one tidy row. */
body.arb-portal-light .emp-modal .emp-details > div:first-child { gap:8px !important; }

/* ============================================================
 * COLOR PASS (v2) — the record was too monochrome. Add tasteful
 * accent color while keeping the light-neu surfaces + shadows.
 * ============================================================ */

/* Accent palette */
body.arb-portal-light .emp-modal { --acc-cyan:#0e7fa6; --acc-violet:#7c4dd6; --acc-green:#1c9c62; --acc-amber:#c07a12; --acc-red:#d0455a; --acc-blue:#2563c9; }

/* Section headers: colored + leading pip instead of flat grey caps. */
body.arb-portal-light .emp-modal .emp-sub {
  color:#0e6f92 !important; font-weight:800 !important; display:flex !important;
  align-items:center !important; gap:7px !important;
}
body.arb-portal-light .emp-modal .emp-sub::before {
  content:"" !important; width:14px !important; height:3px !important; border-radius:3px !important;
  background:linear-gradient(90deg,#0e7fa6,#28b6d6) !important; flex:0 0 auto !important;
}

/* Cycle a colored left-accent bar across the section cards/blocks. */
body.arb-portal-light .emp-modal .emp-col > * { border-left:3px solid transparent !important; padding-left:11px !important; border-radius:12px !important; }
body.arb-portal-light .emp-modal .emp-col > *:nth-of-type(4n+1) { border-left-color:var(--acc-cyan) !important; background:linear-gradient(90deg,rgba(14,127,166,.06),transparent 60%) !important; }
body.arb-portal-light .emp-modal .emp-col > *:nth-of-type(4n+2) { border-left-color:var(--acc-violet) !important; background:linear-gradient(90deg,rgba(124,77,214,.06),transparent 60%) !important; }
body.arb-portal-light .emp-modal .emp-col > *:nth-of-type(4n+3) { border-left-color:var(--acc-green) !important; background:linear-gradient(90deg,rgba(28,156,98,.06),transparent 60%) !important; }
body.arb-portal-light .emp-modal .emp-col > *:nth-of-type(4n+4) { border-left-color:var(--acc-amber) !important; background:linear-gradient(90deg,rgba(192,122,18,.06),transparent 60%) !important; }

/* Header / identity strip: colored gradient wash + accent name. */
body.arb-portal-light .emp-modal .emp-head,
body.arb-portal-light .emp-modal .emp-modal-body > :first-child {
  background:linear-gradient(120deg,rgba(14,127,166,.12),rgba(124,77,214,.10) 55%,rgba(28,156,98,.08)) !important;
  border-radius:14px !important;
}
body.arb-portal-light .emp-modal .emp-name { color:#0e5f7e !important; }

/* Profile photo: colored gradient ring. */
body.arb-portal-light .emp-modal .emp-details img,
body.arb-portal-light .emp-modal .profile-card img[alt] {
  border:3px solid transparent !important;
  background:linear-gradient(#e9edf2,#e9edf2) padding-box, linear-gradient(135deg,#0e7fa6,#7c4dd6,#1c9c62) border-box !important;
  border-radius:16px !important;
}

/* Communications buttons: distinct tinted neu per action. */
body.arb-portal-light .emp-modal .profile-comms-row button { border-radius:11px !important; font-weight:700 !important; }
body.arb-portal-light .emp-modal .profile-comms-row button:nth-child(6n+1) { color:#0e5f7e !important; background:linear-gradient(135deg,#dceef5,#e9edf2) !important; }
body.arb-portal-light .emp-modal .profile-comms-row button:nth-child(6n+2) { color:#1c7a4e !important; background:linear-gradient(135deg,#dcf0e6,#e9edf2) !important; }
body.arb-portal-light .emp-modal .profile-comms-row button:nth-child(6n+3) { color:#6a3fc0 !important; background:linear-gradient(135deg,#e7defa,#e9edf2) !important; }
body.arb-portal-light .emp-modal .profile-comms-row button:nth-child(6n+4) { color:#9a5e08 !important; background:linear-gradient(135deg,#f6ecd6,#e9edf2) !important; }
body.arb-portal-light .emp-modal .profile-comms-row button:nth-child(6n+5) { color:#2452a8 !important; background:linear-gradient(135deg,#dde6f7,#e9edf2) !important; }
body.arb-portal-light .emp-modal .profile-comms-row button:nth-child(6n+6) { color:#b23b52 !important; background:linear-gradient(135deg,#f7dee4,#e9edf2) !important; }

/* Report buttons (Timecard / Payroll CSV): green + blue tints. */
body.arb-portal-light .emp-modal .emp-report button:nth-child(odd) { color:#1c7a4e !important; background:linear-gradient(135deg,#dcf0e6,#e9edf2) !important; }
body.arb-portal-light .emp-modal .emp-report button:nth-child(even) { color:#2452a8 !important; background:linear-gradient(135deg,#dde6f7,#e9edf2) !important; }

/* Skill legend words already colored; make skill rows a touch livelier. */
body.arb-portal-light .emp-modal .emp-skills > * { border-radius:9px !important; }
body.arb-portal-light .emp-modal .emp-skills > *:hover { background:rgba(14,127,166,.06) !important; }

/* Classification / management grid values: accent the section header. */
body.arb-portal-light .emp-modal .emp-mgmt-head { color:#b4690f !important; }

/* ============================================================
 * SKILL EVALUATION fix (v3) — the click-to-cycle circles were
 * being flattened to grey neu by the generic button rule above.
 * Excluded .skill-circle from that rule and restore crisp state
 * colors (blank -> red -> yellow -> green) on the light surface.
 * The React onClick cycling already works; this only restores color.
 * ============================================================ */
body.arb-portal-light .emp-modal .skill-circle {
  width:24px !important; height:24px !important; border-radius:50% !important;
  border:0 !important; background:#e5e9ee !important;
  /* Raised molded neumorphic puck (blank state). */
  box-shadow:4px 4px 8px #c5cbd3, -4px -4px 8px #ffffff !important;
  transition:box-shadow .15s, transform .1s !important;
}
/* Colored states stay neumorphic: tinted puck with soft dual shadow that
 * blends the accent's own light/dark tones so it reads molded, not flat. */
body.arb-portal-light .emp-modal .skill-circle.sc-red {
  background:linear-gradient(145deg,#d4576a,#b12f45) !important; border:0 !important;
  box-shadow:4px 4px 8px #b9a1a6, -4px -4px 8px #ffdfe4, inset 1px 1px 2px rgba(255,255,255,.35), inset -1px -1px 2px rgba(0,0,0,.18) !important;
}
body.arb-portal-light .emp-modal .skill-circle.sc-yellow {
  background:linear-gradient(145deg,#ffff66,#ffff00) !important; border:0 !important;
  box-shadow:4px 4px 8px #c9ca9e, -4px -4px 8px #ffffe0, inset 1px 1px 2px rgba(255,255,255,.55), inset -1px -1px 2px rgba(120,120,0,.25) !important;
}
body.arb-portal-light .emp-modal .skill-circle.sc-green {
  background:linear-gradient(145deg,#31a877,#178050) !important; border:0 !important;
  box-shadow:4px 4px 8px #a3bcae, -4px -4px 8px #dff5ea, inset 1px 1px 2px rgba(255,255,255,.35), inset -1px -1px 2px rgba(0,0,0,.18) !important;
}
body.arb-portal-light .emp-modal .skill-circle:hover:not(:disabled) { transform:translateY(-1px) scale(1.08) !important; }
body.arb-portal-light .emp-modal .skill-circle:active:not(:disabled) {
  box-shadow:inset 3px 3px 6px rgba(0,0,0,.22), inset -3px -3px 6px rgba(255,255,255,.28) !important;
  transform:scale(.96) !important;
}
body.arb-portal-light .emp-modal .skill-circle:disabled { opacity:.9 !important; cursor:default !important; }