/* HR v106 — Mobile Stability Hotfix
   Fixes phone layout, bottom nav overflow, password toggle alignment,
   location page oversized CTA, executive tabs and local CORS diagnostics. */
: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: 380px) {
  .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;
  }
}