:root {
  --bg: #eef2f7;
  --panel: rgba(255,255,255,0.92);
  --panel-solid: #ffffff;
  --text: #0f172a;
  --muted: #64748b;
  --border: rgba(148,163,184,0.28);
  --border-strong: rgba(100,116,139,0.28);
  --primary: #4f46e5;
  --primary-dark: #3730a3;
  --emerald: #10b981;
  --amber: #f59e0b;
  --rose: #f43f5e;
  --sky: #0284c7;
  --shadow: 0 18px 45px rgba(15, 23, 42, 0.10);
  --radius: 1.25rem;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
}

* { box-sizing: border-box; }
html { min-height: 100%; overflow-x: hidden; }
body {
  margin: 0;
  min-height: 100dvh;
  padding-bottom: var(--safe-bottom);
  overflow-x: hidden;
  color: var(--text);
  background: radial-gradient(circle at top left, #dbeafe, transparent 34rem), radial-gradient(circle at top right, #ede9fe, transparent 32rem), var(--bg);
  font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
button, input, select, textarea { font: inherit; }
button { -webkit-tap-highlight-color: transparent; }
.hidden { display: none !important; }
.visually-hidden { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important; }
.bg-decor { position: fixed; inset: 0; pointer-events: none; overflow: hidden; z-index: -1; }
.bg-blob { position: absolute; width: 22rem; height: 22rem; filter: blur(70px); border-radius: 999px; opacity: 0.26; }
.blob-1 { top: -6rem; left: -6rem; background: #6366f1; }
.blob-2 { top: 8rem; right: -8rem; background: #14b8a6; }
.blob-3 { bottom: -10rem; left: 35%; background: #f59e0b; }

.app-header {
  position: sticky;
  top: 0;
  padding-top: var(--safe-top);
  z-index: 20;
  backdrop-filter: blur(18px);
  background: rgba(248,250,252,0.92);
  border-bottom: 1px solid var(--border);
}
.header-inner {
  width: min(1380px, calc(100% - max(1.5rem, calc(var(--safe-left) + var(--safe-right) + 1rem))));
  margin: 0 auto;
  min-height: 4.9rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-width: 0;
}
.brand { display: flex; align-items: center; gap: .75rem; min-width: 0; }
.brand-icon { width: 2.9rem; height: 2.9rem; flex: 0 0 auto; border-radius: 1rem; display: grid; place-items: center; overflow: hidden; background: linear-gradient(135deg, #0f172a, #4f46e5); box-shadow: 0 14px 30px rgba(79,70,229,.26); }
.brand-icon img { width: 100%; height: 100%; display: block; border-radius: inherit; }
.brand-icon svg { width: 1.45rem; height: 1.45rem; }
.brand h1 { margin: 0; font-size: 1.25rem; letter-spacing: -0.05em; }
.brand p { margin: .1rem 0 0; color: var(--muted); font-size: .79rem; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.header-actions { display: flex; align-items: center; justify-content: flex-end; gap: .7rem; min-width: 0; flex-wrap: wrap; }
.cloud-status { display: inline-flex; align-items: center; gap: .45rem; border-radius: 999px; border: 1px solid var(--border); padding: .45rem .7rem; background: rgba(255,255,255,.78); color: var(--muted); font-size: .75rem; font-weight: 900; }
.cloud-status span { width: .56rem; height: .56rem; border-radius: 999px; background: #94a3b8; display: inline-block; }
.cloud-status.connected span { background: var(--emerald); }
.cloud-status.error span { background: var(--rose); }
.cloud-status.connecting span { background: var(--amber); }
.app-nav { display: inline-flex; gap: .35rem; padding: .25rem; border: 1px solid var(--border); border-radius: 999px; background: rgba(255,255,255,.72); }
.nav-btn { border: none; border-radius: 999px; background: transparent; color: var(--muted); padding: .55rem .8rem; display: inline-flex; align-items: center; gap: .4rem; font-size: .78rem; font-weight: 900; cursor: pointer; }
.nav-btn.active { color: white; background: linear-gradient(135deg, var(--primary), var(--primary-dark)); box-shadow: 0 10px 22px rgba(79,70,229,.2); }
.nav-btn svg { width: 1rem; height: 1rem; }
.user-menu { display: flex; align-items: center; gap: .6rem; max-width: 100%; }
.user-copy { display: grid; line-height: 1.15; min-width: 0; }
.user-copy strong { font-size: .82rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 14rem; }
.user-copy small { color: var(--muted); font-size: .7rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 14rem; }

.main-container { width: min(1380px, calc(100% - max(1.5rem, calc(var(--safe-left) + var(--safe-right) + 1rem)))); margin: 1.25rem auto 2.5rem; display: grid; gap: 1rem; min-width: 0; }
.card { background: var(--panel); border: 1px solid var(--border); box-shadow: var(--shadow); border-radius: var(--radius); padding: 1rem; min-width: 0; overflow: hidden; }
.view { display: grid; gap: 1rem; min-width: 0; width: 100%; }
.view.hidden { display: none !important; }
.visually-hidden { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important; }
.view > * { min-width: 0; }
.hero-card { padding: clamp(1.2rem, 3vw, 2rem); display: grid; gap: .8rem; }
.hero-card h2, .page-title h2 { margin: .15rem 0; font-size: clamp(1.8rem, 3.4vw, 3.6rem); line-height: .98; letter-spacing: -0.08em; }
.hero-card p, .page-title p { margin: 0; color: var(--muted); max-width: 58rem; line-height: 1.55; font-weight: 600; }
.eyebrow { display: inline-flex; width: fit-content; align-items: center; border-radius: 999px; background: #eef2ff; color: #3730a3; border: 1px solid rgba(99,102,241,.18); padding: .35rem .62rem; font-size: .72rem; font-weight: 900; text-transform: uppercase; letter-spacing: .06em; }
.hero-points { display: flex; flex-wrap: wrap; gap: .55rem; }
.hero-points span { display: inline-flex; align-items: center; gap: .38rem; background: rgba(255,255,255,.75); border: 1px solid var(--border); border-radius: 999px; padding: .48rem .7rem; color: #334155; font-size: .78rem; font-weight: 900; }
.hero-points svg { width: 1rem; height: 1rem; }
.auth-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; align-items: start; }
.auth-card { display: grid; gap: .8rem; align-self: stretch; }

/* Centered existing login screen */
#auth-screen.auth-layout {
  min-height: calc(100dvh - 5.4rem - var(--safe-top) - var(--safe-bottom));
  align-content: center;
  justify-items: center;
  width: min(100% - max(1.5rem, calc(var(--safe-left) + var(--safe-right) + 1rem)), 720px);
  margin-top: 0;
  padding-top: clamp(1rem, 4vh, 2.25rem);
  padding-bottom: clamp(1rem, 4vh, 2.25rem);
}
#auth-screen .hero-card,
#auth-screen .auth-message,
#auth-screen .auth-grid {
  width: 100%;
  max-width: 560px;
}
#auth-screen .hero-card {
  text-align: center;
  justify-items: center;
}
#auth-screen .hero-card p {
  max-width: 44rem;
}
#auth-screen .hero-points {
  justify-content: center;
}
#auth-screen .auth-grid {
  grid-template-columns: 1fr;
  justify-items: stretch;
}
#auth-screen .auth-card {
  width: 100%;
}

@media (max-width: 760px) {
  #auth-screen.auth-layout {
    min-height: calc(100dvh - 4.8rem - var(--safe-top) - var(--safe-bottom));
    width: min(100% - max(1rem, calc(var(--safe-left) + var(--safe-right) + .75rem)), 560px);
    margin-top: 0;
    padding-top: 1rem;
    padding-bottom: max(1rem, var(--safe-bottom));
  }
  #auth-screen .hero-card {
    padding: 1rem;
  }
  #auth-screen .hero-card h2 {
    font-size: clamp(1.55rem, 8vw, 2.35rem);
    letter-spacing: -0.06em;
  }
}
.auth-message { border: 1px solid rgba(245,158,11,.22); background: #fffbeb; color: #92400e; border-radius: 1rem; padding: .9rem 1rem; font-weight: 800; }
.section-header { display: flex; justify-content: space-between; align-items: flex-start; gap: .8rem; margin-bottom: .85rem; min-width: 0; }
.section-header h3 { margin: 0; display: flex; align-items: center; gap: .45rem; font-size: 1rem; letter-spacing: -0.035em; }
.section-header h3 svg { width: 1.1rem; height: 1.1rem; }
.section-header p { margin: .18rem 0 0; color: var(--muted); font-size: .82rem; line-height: 1.45; font-weight: 600; }
.page-title { display: flex; justify-content: space-between; align-items: flex-end; gap: 1rem; min-width: 0; }

.form-grid { display: grid; gap: .75rem; min-width: 0; }
.form-grid.one { grid-template-columns: 1fr; }
.form-grid.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.form-grid.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.form-grid.five { grid-template-columns: repeat(5, minmax(0, 1fr)); }
label { display: grid; gap: .3rem; color: #475569; font-size: .72rem; font-weight: 900; text-transform: uppercase; letter-spacing: .04em; min-width: 0; }
input, select, textarea { width: 100%; min-width: 0; border: 1px solid var(--border-strong); background: rgba(248,250,252,.96); color: var(--text); border-radius: .85rem; padding: .72rem .85rem; outline: none; font-weight: 700; transition: border-color .18s, box-shadow .18s; }
textarea { min-height: 6rem; resize: vertical; }
input:focus, select:focus, textarea:focus { border-color: #a5b4fc; box-shadow: 0 0 0 4px rgba(99,102,241,.12); }
.copy-row { display: grid; grid-template-columns: 1fr auto; gap: .6rem; align-items: center; margin: .5rem 0; min-width: 0; }
.button-row { display: flex; flex-wrap: wrap; gap: .55rem; margin-top: .75rem; }
.btn { border: none; border-radius: .85rem; display: inline-flex; align-items: center; justify-content: center; gap: .45rem; font-weight: 900; padding: .72rem .9rem; cursor: pointer; transition: transform .16s, opacity .16s, box-shadow .16s; white-space: nowrap; }
.btn svg { width: 1rem; height: 1rem; }
.btn:hover { transform: translateY(-1px); }
.btn:disabled { opacity: .55; cursor: not-allowed; transform: none; }
.btn.is-busy { opacity: .82; cursor: progress; pointer-events: none; }
.btn-busy-spinner { width: 1rem; height: 1rem; border-radius: 999px; border: 2px solid currentColor; border-right-color: transparent; display: inline-block; animation: gpSpin .72s linear infinite; flex: 0 0 auto; }
@keyframes gpSpin { to { transform: rotate(360deg); } }
.btn.full { width: 100%; }
.btn.primary { color: white; background: linear-gradient(135deg, var(--primary), var(--primary-dark)); box-shadow: 0 12px 25px rgba(79,70,229,.22); }
.btn.secondary { color: #1e293b; background: #e2e8f0; border: 1px solid rgba(100,116,139,.16); }
.btn.ghost { color: #334155; background: rgba(241,245,249,.86); border: 1px solid rgba(100,116,139,.16); }
.btn.danger { color: white; background: linear-gradient(135deg, #f43f5e, #be123c); }
.tiny-help { margin: .65rem 0 0; color: var(--muted); font-size: .78rem; font-weight: 700; line-height: 1.4; }

.stats-grid { display: grid; gap: 1rem; }
.stats-grid.four { grid-template-columns: repeat(4, minmax(0,1fr)); }
.stat-card { background: var(--panel-solid); border: 1px solid var(--border); border-radius: 1rem; padding: 1rem; display: grid; gap: .35rem; min-width: 0; }
.stat-card svg { width: 1.35rem; height: 1.35rem; color: var(--primary); }
.stat-card strong { font-size: 1.7rem; letter-spacing: -0.06em; }
.stat-card span { color: var(--muted); font-size: .78rem; font-weight: 900; text-transform: uppercase; letter-spacing: .04em; }
.two-column, .employee-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; align-items: start; }
.employee-grid { grid-template-columns: minmax(280px, .8fr) minmax(320px, 1.2fr); }

.list-stack { display: grid; gap: .65rem; min-width: 0; }
.list-stack.compact { margin-top: .8rem; gap: .5rem; }
.empty-state { color: var(--muted); border: 1px dashed var(--border-strong); background: rgba(248,250,252,.65); border-radius: 1rem; padding: 1rem; text-align: center; font-weight: 800; }
.item-card { border: 1px solid var(--border); background: rgba(255,255,255,.76); border-radius: 1rem; padding: .85rem; display: grid; gap: .45rem; min-width: 0; }
.item-top { display: flex; justify-content: space-between; gap: .8rem; align-items: flex-start; min-width: 0; }
.item-title { min-width: 0; }
.item-title strong { display: block; overflow-wrap: anywhere; }
.item-title small, .meta-line { color: var(--muted); font-weight: 700; font-size: .78rem; overflow-wrap: anywhere; }
.item-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .45rem; }
.badge { display: inline-flex; align-items: center; width: fit-content; border-radius: 999px; padding: .25rem .55rem; font-size: .68rem; font-weight: 900; text-transform: uppercase; letter-spacing: .05em; background: #e2e8f0; color: #334155; }
.badge.active, .badge.approved, .badge.in { background: #dcfce7; color: #166534; }
.badge.pending, .badge.scheduled { background: #fef3c7; color: #92400e; }
.badge.paused, .badge.denied, .badge.out, .badge.inactive { background: #fee2e2; color: #991b1b; }

.table-wrap { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: 1rem; border: 1px solid var(--border); background: rgba(255,255,255,.72); }
table { width: 100%; border-collapse: collapse; min-width: 760px; }
th, td { padding: .72rem .75rem; border-bottom: 1px solid var(--border); text-align: left; vertical-align: middle; font-size: .82rem; }
th { color: #475569; font-size: .72rem; text-transform: uppercase; letter-spacing: .05em; background: #f8fafc; }
td { font-weight: 700; color: #334155; }
td select, td input { padding: .52rem .62rem; border-radius: .65rem; font-size: .78rem; }
tr:last-child td { border-bottom: none; }

.clock-card { display: grid; gap: .85rem; }
.gps-status { display: flex; align-items: center; gap: .7rem; padding: .85rem; border: 1px solid var(--border); background: #f8fafc; border-radius: 1rem; }
.gps-status small { display: block; color: var(--muted); font-weight: 700; margin-top: .1rem; }
.gps-dot { width: .8rem; height: .8rem; border-radius: 999px; background: #94a3b8; box-shadow: 0 0 0 6px rgba(148,163,184,.18); flex: 0 0 auto; }
.gps-dot.connected { background: var(--emerald); box-shadow: 0 0 0 6px rgba(16,185,129,.18); }
.gps-dot.error { background: var(--rose); box-shadow: 0 0 0 6px rgba(244,63,94,.16); }
.gps-dot.searching { background: var(--amber); box-shadow: 0 0 0 6px rgba(245,158,11,.18); }
.assignment-box, .distance-box { border: 1px solid var(--border); border-radius: 1rem; padding: .9rem; background: rgba(248,250,252,.86); display: grid; gap: .2rem; }
.assignment-box span, .distance-box span { color: var(--muted); font-size: .72rem; font-weight: 900; text-transform: uppercase; letter-spacing: .05em; }
.assignment-box small { color: var(--muted); font-weight: 700; }
.distance-box strong { font-size: 2rem; letter-spacing: -0.08em; }
.clock-btn { width: 100%; border: none; border-radius: 1.1rem; min-height: 4.3rem; display: inline-flex; justify-content: center; align-items: center; gap: .65rem; font-size: 1.15rem; font-weight: 900; cursor: pointer; background: #e2e8f0; color: #64748b; }
.clock-btn.ready-in { color: white; background: linear-gradient(135deg, #10b981, #059669); box-shadow: 0 16px 30px rgba(16,185,129,.24); }
.clock-btn.ready-out { color: white; background: linear-gradient(135deg, #f43f5e, #be123c); box-shadow: 0 16px 30px rgba(244,63,94,.2); }

.trusted-device-panel, .push-notification-panel { display: flex; justify-content: space-between; align-items: center; gap: .75rem; border: 1px solid var(--border); border-radius: 1rem; padding: .85rem; background: rgba(248,250,252,.92); }
.trusted-device-panel strong, .push-notification-panel strong { display: block; font-size: .9rem; color: #0f172a; }
.trusted-device-panel small, .push-notification-panel small { display: block; margin-top: .12rem; color: var(--muted); font-weight: 700; line-height: 1.35; }
.trusted-device-panel.verified { border-color: rgba(16,185,129,.38); background: rgba(220,252,231,.68); }
.trusted-device-panel.pending { border-color: rgba(245,158,11,.42); background: rgba(254,243,199,.68); }
.trusted-device-panel.blocked { border-color: rgba(244,63,94,.36); background: rgba(254,226,226,.72); }
.trusted-device-panel .btn, .push-notification-panel .btn { flex: 0 0 auto; white-space: nowrap; }
.trusted-device-actions { display: flex; flex-wrap: wrap; gap: .45rem; justify-content: flex-end; align-items: center; }
.clock-btn.device-blocked { background: #fee2e2; color: #991b1b; cursor: not-allowed; }
.trusted-device-cell { display: grid; gap: .25rem; align-items: start; }
.trusted-device-cell small { display: block; color: var(--muted); font-weight: 700; line-height: 1.3; max-width: 14rem; }
.table-actions { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; }
.clock-btn svg { width: 1.25rem; height: 1.25rem; }
.geo-map { height: clamp(18rem, 46vh, 32rem); min-height: 18rem; width: 100%; max-width: 100%; border-radius: 1rem; overflow: hidden; border: 1px solid var(--border-strong); background: #e2e8f0; z-index: 1; touch-action: pan-y; overscroll-behavior: contain; }
.map-card { overflow: hidden; }

.toast { position: fixed; left: 50%; bottom: max(1.2rem, env(safe-area-inset-bottom)); transform: translateX(-50%); z-index: 10050; width: min(92vw, 42rem); display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: start; gap: .8rem; padding: .9rem .9rem .9rem 1rem; border-radius: 1rem; background: #0f172a; color: white; box-shadow: 0 18px 55px rgba(15,23,42,.3); font-weight: 800; text-align: left; }
.toast-message { min-width: 0; line-height: 1.45; overflow-wrap: anywhere; }
.toast-close, .banner-close { width: 1.9rem; height: 1.9rem; display: inline-grid; place-items: center; border: 0; border-radius: .62rem; background: rgba(255,255,255,.14); color: inherit; cursor: pointer; flex: 0 0 auto; }
.toast-close:hover, .banner-close:hover { background: rgba(255,255,255,.24); }
.toast-close svg, .banner-close svg { width: .95rem; height: .95rem; }
.toast.success { background: #065f46; }
.toast.error { background: #9f1239; }
.toast.warning { background: #92400e; }
.toast.info { background: #1e3a8a; }
.station-sync-banner { position: fixed; left: max(1rem, env(safe-area-inset-left)); right: max(1rem, env(safe-area-inset-right)); top: calc(env(safe-area-inset-top) + .85rem); z-index: 10040; display: grid; grid-template-columns: minmax(0,42rem) auto; gap: .5rem; align-items: start; justify-content: center; pointer-events: auto; }
.station-sync-banner > div { width: min(42rem, 100%); border-radius: 1rem; padding: .9rem 1rem; background: rgba(15,23,42,.96); color: white; box-shadow: 0 18px 55px rgba(15,23,42,.28); border: 1px solid rgba(255,255,255,.14); }
.station-sync-banner strong { display: block; font-size: .92rem; line-height: 1.15; }
.station-sync-banner span { display: block; margin-top: .18rem; font-size: .82rem; line-height: 1.3; opacity: .92; }
.station-sync-banner.success > div { background: rgba(6,95,70,.97); }
.station-sync-banner.error > div { background: rgba(159,18,57,.97); }
.station-sync-banner.warning > div { background: rgba(146,64,14,.97); }


@media (max-width: 1100px) {
  .auth-grid { grid-template-columns: 1fr; }
  .stats-grid.four { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .form-grid.five, .form-grid.three { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .two-column, .employee-grid { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .header-inner { align-items: flex-start; padding: .65rem 0; flex-direction: column; }
  .header-actions { width: 100%; justify-content: flex-start; }
  .app-nav { width: 100%; overflow-x: auto; border-radius: 1rem; }
  .nav-btn { flex: 1; min-width: fit-content; }
  .user-menu { width: 100%; justify-content: space-between; }
  .user-copy strong, .user-copy small { max-width: 12rem; }
  .main-container { width: min(100% - max(1rem, calc(var(--safe-left) + var(--safe-right) + .75rem)), 1380px); margin-top: .75rem; }
  .card { padding: .85rem; border-radius: 1rem; }
  .form-grid.two, .form-grid.three, .form-grid.five { grid-template-columns: 1fr; }
  .stats-grid.four { grid-template-columns: 1fr 1fr; gap: .65rem; }
  .stat-card { padding: .8rem; }
  .copy-row { grid-template-columns: 1fr; }
  .section-header { flex-direction: column; }
  .item-top { flex-direction: column; }
  .item-actions { justify-content: flex-start; }
  .geo-map { height: 19rem; }
  .trusted-device-panel, .push-notification-panel { align-items: stretch; flex-direction: column; }
  .trusted-device-panel .btn, .push-notification-panel .btn { width: 100%; }
  .trusted-device-actions { width: 100%; flex-direction: column; align-items: stretch; }
  .brand p { max-width: 15rem; }
}
@media (max-width: 430px) {
  .stats-grid.four { grid-template-columns: 1fr; }
  .hero-card h2, .page-title h2 { font-size: 1.75rem; }
  .btn { width: 100%; }
}

/* Employee portal card sizing fixes */
#employee-view { gap: 1rem; }
#employee-view .employee-grid,
#employee-view .two-column {
  width: 100%;
  min-width: 0;
}
#employee-view .employee-grid {
  grid-template-columns: minmax(18rem, 0.82fr) minmax(0, 1.18fr);
  align-items: stretch;
}
#employee-view .two-column {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: stretch;
}
#employee-view .card {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  display: grid;
  align-content: start;
}
#employee-view .clock-card {
  gap: .75rem;
}
#employee-view .map-card {
  display: grid;
  grid-template-rows: auto minmax(18rem, 1fr);
  min-height: 100%;
}
#employee-view .map-card .section-header {
  min-width: 0;
}
#employee-view .geo-map {
  height: clamp(18rem, 42vh, 28rem);
  min-height: 18rem;
}
#employee-view .list-stack {
  width: 100%;
  max-width: 100%;
  min-width: 0;
}
#employee-view .item-card {
  width: 100%;
  max-width: 100%;
  grid-template-columns: minmax(0, 1fr);
}
#employee-view .item-top {
  min-width: 0;
  width: 100%;
}
#employee-view .item-title,
#employee-view .item-title strong,
#employee-view .item-title small,
#employee-view .meta-line,
#employee-view .assignment-box strong,
#employee-view .assignment-box small,
#employee-view .distance-box strong,
#employee-view .gps-status strong,
#employee-view .gps-status small {
  min-width: 0;
  max-width: 100%;
  overflow-wrap: anywhere;
  word-break: normal;
}
#employee-view .badge {
  flex: 0 0 auto;
  max-width: 100%;
  white-space: nowrap;
}
#employee-view .form-grid.two {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
#employee-view .clock-btn {
  min-width: 0;
  max-width: 100%;
  white-space: normal;
  text-align: center;
  line-height: 1.15;
  padding-inline: .9rem;
}
#employee-view .clock-btn span {
  min-width: 0;
  overflow-wrap: anywhere;
}

@media (max-width: 980px) {
  #employee-view .employee-grid,
  #employee-view .two-column {
    grid-template-columns: 1fr;
  }
  #employee-view .map-card {
    min-height: auto;
  }
}

@media (max-width: 760px) {
  #employee-view { gap: .8rem; }
  #employee-view .card { padding: .8rem; }
  #employee-view .section-header { gap: .55rem; margin-bottom: .65rem; }
  #employee-view .section-header .btn { width: auto; }
  #employee-view .form-grid.two { grid-template-columns: 1fr; }
  #employee-view .geo-map { height: 18rem; min-height: 18rem; }
}

@media (max-width: 480px) {
  #employee-view .gps-status { align-items: flex-start; }
  #employee-view .assignment-box,
  #employee-view .distance-box { padding: .75rem; }
  #employee-view .distance-box strong { font-size: 1.55rem; }
  #employee-view .item-top { gap: .45rem; }
  #employee-view .badge { white-space: normal; }
  #employee-view .geo-map { height: 16.5rem; min-height: 16.5rem; border-radius: .85rem; }
}


/* GeoPunch final cleaned modules: onboarding, admin sections, rosters, maps, EmailJS, updates */
.muted-text { color: var(--muted); font-weight: 800; text-transform: none; letter-spacing: 0; font-size: .68rem; }
.input-action { display: grid; grid-template-columns: 1fr auto; gap: .5rem; min-width: 0; }
.compact-btn { padding-inline: .7rem; }
.meta-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .35rem .75rem; color: var(--muted); font-size: .78rem; font-weight: 700; overflow-wrap: anywhere; }
.badge.confirmed { background: #dbeafe; color: #1d4ed8; }
.badge.open { background: #f3e8ff; color: #7e22ce; }
.badge.cancelled { background: #fee2e2; color: #991b1b; }
.status-pill { display: inline-flex; align-items: center; justify-content: center; border-radius: 999px; padding: .25rem .55rem; font-size: .72rem; font-weight: 900; background: #e2e8f0; color: #334155; white-space: nowrap; }
.status-pill.active { background: #d1fae5; color: #047857; }
.status-pill.pending { background: #fef3c7; color: #92400e; }
.status-pill.inactive { background: #fee2e2; color: #be123c; }

.setup-steps { display: grid; gap: .45rem; margin-top: .7rem; }
.setup-steps span { display: flex; align-items: center; gap: .45rem; border: 1px solid var(--border); background: rgba(248,250,252,.84); border-radius: .85rem; padding: .58rem .7rem; color: #334155; font-size: .78rem; font-weight: 900; }
.setup-steps span::before { content: ""; width: .55rem; height: .55rem; flex: 0 0 auto; border-radius: 999px; background: var(--emerald); box-shadow: 0 0 0 4px rgba(16,185,129,.12); }

.admin-section-nav { display: flex; gap: .55rem; overflow-x: auto; padding: .35rem; border: 1px solid var(--border); border-radius: 1.15rem; background: rgba(255,255,255,.72); -webkit-overflow-scrolling: touch; }
.admin-section-btn { border: 0; border-radius: .9rem; background: transparent; color: var(--muted); font-weight: 900; display: inline-flex; align-items: center; justify-content: center; gap: .45rem; padding: .72rem .9rem; white-space: nowrap; cursor: pointer; }
.admin-section-btn svg { width: 1rem; height: 1rem; }
.admin-section-btn.active { color: #fff; background: linear-gradient(135deg, #0f172a, var(--primary)); box-shadow: 0 10px 24px rgba(79,70,229,.22); }
.admin-panel { display: none; min-width: 0; width: 100%; }
.admin-panel.active { display: grid; gap: 1rem; }

.setup-summary-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr)); gap: .75rem; margin-bottom: .85rem; }
.setup-summary-grid > div, .settings-note { border: 1px solid var(--border); background: rgba(248,250,252,.82); border-radius: 1rem; padding: .85rem; display: grid; gap: .15rem; min-width: 0; }
.setup-summary-grid strong { font-size: 1.5rem; letter-spacing: -.05em; }
.setup-summary-grid span, .settings-note span { color: var(--muted); font-size: .74rem; font-weight: 900; text-transform: uppercase; letter-spacing: .05em; }
.setup-status-list { display: grid; gap: .55rem; }
.setup-status-row { border: 1px solid var(--border); border-radius: 1rem; background: rgba(255,255,255,.76); padding: .75rem; display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: .65rem; min-width: 0; }
.setup-status-row strong, .setup-status-row small { display: block; min-width: 0; overflow-wrap: anywhere; }
.setup-status-row small { color: var(--muted); font-weight: 800; margin-top: .1rem; }
.simple-employee-form { align-items: end; }
.advanced-fields { border: 1px dashed var(--border-strong); border-radius: 1rem; background: rgba(248,250,252,.62); padding: .75rem; margin-top: .85rem; }
.advanced-fields summary { cursor: pointer; color: var(--text); font-weight: 900; display: flex; align-items: center; gap: .45rem; list-style: none; }
.advanced-fields summary::-webkit-details-marker { display: none; }
.advanced-fields summary svg { width: 1rem; height: 1rem; color: var(--primary); }
.advanced-fields[open] summary { margin-bottom: .75rem; }

.roster-card { overflow: visible; }
.roster-card > .section-header { margin-bottom: 1rem; }
.roster-toolbar { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 13.5rem), 1fr)); gap: .75rem; align-items: end; width: 100%; min-width: 0; padding: .8rem; border: 1px solid var(--border); border-radius: 1rem; background: rgba(248,250,252,.78); margin-bottom: .85rem; }
.roster-toolbar .btn { width: 100%; min-width: 0; white-space: normal; }
.roster-summary { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 8.5rem), 1fr)); gap: .65rem; margin: .9rem 0; }
.roster-summary > div { border: 1px solid var(--border); border-radius: 1rem; background: rgba(248,250,252,.82); padding: .75rem; display: grid; gap: .15rem; min-height: 4.3rem; align-content: center; min-width: 0; }
.roster-summary strong { font-size: 1.35rem; letter-spacing: -.05em; }
.roster-summary span { color: var(--muted); font-size: .72rem; font-weight: 900; text-transform: uppercase; letter-spacing: .05em; }
.weekly-roster, .calendar-roster { display: grid; grid-template-columns: repeat(7, minmax(10.5rem, 1fr)); gap: .75rem; align-items: stretch; width: 100%; min-width: 0; overflow-x: auto; overflow-y: visible; padding: .15rem .1rem .65rem; scrollbar-gutter: stable; }
.roster-day { border: 1px solid var(--border); border-radius: 1.05rem; background: rgba(255,255,255,.88); min-width: 0; min-height: 13rem; display: flex; flex-direction: column; overflow: hidden; box-shadow: 0 10px 24px rgba(15,23,42,.06); cursor: pointer; transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease; }
.roster-day.today { outline: 2px solid rgba(79,70,229,.25); }
.roster-day:hover, .roster-day:focus-visible { transform: translateY(-1px); box-shadow: 0 14px 30px rgba(15,23,42,.10); border-color: rgba(79,70,229,.35); outline: none; }
.roster-day-head { padding: .72rem; background: rgba(248,250,252,.9); border-bottom: 1px solid var(--border); display: flex; align-items: flex-start; justify-content: space-between; gap: .55rem; min-width: 0; }
.roster-day-head > div { min-width: 0; }
.roster-day-head strong { display: block; font-size: .95rem; overflow-wrap: anywhere; }
.roster-day-head small { display: block; color: var(--muted); font-weight: 800; font-size: .72rem; overflow-wrap: anywhere; }
.roster-day-body { flex: 1 1 auto; display: grid; grid-auto-rows: max-content; gap: .58rem; padding: .65rem; min-width: 0; align-content: start; }
.empty-state.mini { padding: .7rem; font-size: .78rem; }
.mini-add-shift { min-width: 3.85rem; width: auto; height: 2rem; padding: 0 .55rem; border: 1px solid var(--border); border-radius: .72rem; background: #fff; color: var(--primary); display: inline-flex; align-items: center; justify-content: center; gap: .22rem; cursor: pointer; flex: 0 0 auto; font-size: .74rem; font-weight: 900; line-height: 1; }

.shift-builder-panel { border: 1px solid var(--border); border-radius: 1.1rem; background: rgba(248,250,252,.9); padding: .9rem; margin-top: .85rem; box-shadow: 0 12px 28px rgba(15,23,42,.08); }
.compact-header { margin-bottom: .75rem; }
.shift-builder { grid-template-columns: repeat(auto-fit, minmax(min(100%, 11.5rem), 1fr)); align-items: end; padding: .85rem; border: 1px solid var(--border); border-radius: 1rem; background: rgba(255,255,255,.62); }
.shift-builder .wide-field { grid-column: span 2; }
.shift-card { border: 1px solid var(--border); border-radius: .95rem; background: #fff; padding: .65rem; display: grid; grid-template-columns: 1fr; gap: .5rem; align-items: stretch; min-height: auto; min-width: 0; box-shadow: 0 8px 18px rgba(15,23,42,.06); }
.shift-time { width: 100%; min-width: 0; display: flex; align-items: center; justify-content: space-between; gap: .5rem; border-radius: .8rem; background: #eef2ff; color: #3730a3; padding: .45rem .55rem; }
.shift-time strong { font-size: .86rem; }
.shift-time span { font-size: .76rem; font-weight: 900; }
.shift-main { min-width: 0; display: grid; gap: .12rem; }
.shift-main strong { font-size: .9rem; }
.shift-main strong, .shift-main small, .shift-main em { display: block; max-width: 100%; overflow-wrap: anywhere; word-break: normal; }
.shift-main small, .shift-main em { color: var(--muted); font-size: .73rem; font-weight: 700; }
.shift-card .badge { justify-self: start; max-width: 100%; white-space: normal; text-align: left; }
.shift-actions { display: flex; flex-wrap: wrap; gap: .35rem; align-items: center; border-top: 1px solid var(--border); padding-top: .48rem; margin-top: .1rem; }
.roster-action-btn { width: 2.15rem; height: 2.15rem; min-width: 2.15rem; border: 1px solid var(--border); border-radius: .72rem; background: #f8fafc; color: #334155; display: inline-flex; align-items: center; justify-content: center; gap: 0; padding: 0; font-size: .72rem; font-weight: 900; line-height: 1; cursor: pointer; white-space: nowrap; text-align: center; }
.roster-action-btn svg { width: 1rem; height: 1rem; flex: 0 0 auto; }
.roster-action-btn span:not(.visually-hidden) { min-width: 0; overflow-wrap: anywhere; }
.roster-action-btn:hover { background: #eef2ff; border-color: rgba(79,70,229,.28); }
.roster-action-btn.danger { color: #be123c; background: #fff1f2; border-color: rgba(244,63,94,.24); }
.icon-btn { border: 1px solid var(--border); background: #f8fafc; color: #334155; border-radius: .65rem; width: 2.1rem; height: 2.1rem; display: inline-grid; place-items: center; cursor: pointer; }
.icon-btn svg { width: 1rem; height: 1rem; }
.icon-btn.danger { color: #be123c; background: #fff1f2; }
.employee-card { background: linear-gradient(180deg, rgba(255,255,255,.86), rgba(248,250,252,.82)); }

.week-roster-label { border: 1px solid var(--border); border-radius: .85rem; padding: .65rem .75rem; background: rgba(238,242,255,.75); color: #3730a3; font-weight: 900; font-size: .8rem; }
.leave-conflict-note { display: inline-flex; align-items: center; gap: .4rem; width: fit-content; border: 1px solid rgba(245,158,11,.35); background: rgba(245,158,11,.12); color: #92400e; border-radius: .85rem; padding: .45rem .6rem; font-size: .78rem; font-weight: 900; }
.leave-conflict-note svg { width: .95rem; height: .95rem; flex: 0 0 auto; }

.maplibregl-map { width: 100%; height: 100%; font-family: Inter, system-ui, sans-serif; }
.maplibregl-ctrl-bottom-left, .maplibregl-ctrl-bottom-right { max-width: 100%; }
.gp-map-marker { width: 1.15rem; height: 1.15rem; border-radius: 999px; border: 3px solid #fff; box-shadow: 0 8px 24px rgba(15,23,42,.22); }
.gp-map-marker.work-zone { background: #4f46e5; width: 1rem; height: 1rem; }
.gp-map-marker.employee-beacon { position: relative; background: #10b981; width: 1.05rem; height: 1.05rem; }
.gp-map-marker.employee-beacon::before, .gp-map-marker.employee-beacon::after { content: ""; position: absolute; inset: -.65rem; border-radius: 999px; border: 2px solid currentColor; opacity: .45; animation: beacon-pulse 1.8s ease-out infinite; }
.gp-map-marker.employee-beacon::after { animation-delay: .55s; }
.gp-map-marker.employee-beacon.in-range { color: #10b981; background: #10b981; }
.gp-map-marker.employee-beacon.out-range { color: #f43f5e; background: #f43f5e; }
@keyframes beacon-pulse { from { transform: scale(.35); opacity: .7; } to { transform: scale(1.7); opacity: 0; } }
.map-fallback { min-height: 100%; display: grid; place-content: center; text-align: center; gap: .35rem; padding: 1.2rem; color: #0f172a; background: radial-gradient(circle at 50% 35%, rgba(16,185,129,.18), transparent 42%), linear-gradient(135deg, #e0f2fe, #f8fafc); }
.map-fallback strong { font-size: 1rem; }
.map-fallback span, .map-fallback small { color: var(--muted); font-weight: 800; }

.email-settings-card .form-grid label, .email-template-help small { min-width: 0; overflow-wrap: anywhere; }
.template-help-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); gap: .65rem; margin-top: .75rem; }
.template-help-grid > div { border: 1px solid var(--border); border-radius: .85rem; padding: .75rem; background: rgba(248,250,252,.82); display: grid; gap: .35rem; }
.template-help-grid strong { color: var(--text); }
.template-help-grid small { color: var(--muted); font-size: .75rem; line-height: 1.45; }

.update-banner { position: fixed; left: 50%; bottom: 1rem; transform: translateX(-50%); z-index: 70; width: min(92vw, 28rem); display: flex; align-items: center; justify-content: flex-start; gap: .8rem; padding: .8rem .9rem; border-radius: 1rem; background: rgba(15,23,42,.96); color: #fff; box-shadow: 0 18px 60px rgba(15,23,42,.3); border: 1px solid rgba(255,255,255,.12); pointer-events: none; }
.update-banner::before { content: ""; width: .72rem; height: .72rem; flex: 0 0 auto; border-radius: 999px; background: #10b981; box-shadow: 0 0 0 0 rgba(16,185,129,.42); animation: update-pulse 1.35s ease-out infinite; }
.update-banner strong { display: block; font-size: .86rem; }
.update-banner span { display: block; color: rgba(255,255,255,.78); font-size: .78rem; font-weight: 700; line-height: 1.35; }
.update-banner .btn { display: none !important; }
@keyframes update-pulse { from { box-shadow: 0 0 0 0 rgba(16,185,129,.42); } to { box-shadow: 0 0 0 12px rgba(16,185,129,0); } }

@media (max-width: 980px) {
  .setup-status-row { grid-template-columns: minmax(0, 1fr) auto; }
  .setup-status-row .btn { grid-column: 1 / -1; justify-self: start; }
}
@media (max-width: 760px) {
  .input-action { grid-template-columns: 1fr; }
  .meta-grid { grid-template-columns: 1fr; }
  .admin-section-nav { gap: .35rem; padding: .28rem; border-radius: 1rem; }
  .admin-section-btn { padding: .62rem .72rem; font-size: .82rem; }
  .setup-status-row { grid-template-columns: 1fr; align-items: start; }
  .shift-builder-panel, .shift-builder { padding: .75rem; }
  .shift-builder .wide-field { grid-column: auto; }
  .weekly-roster, .calendar-roster { grid-template-columns: repeat(7, minmax(9.75rem, 1fr)); }
  .roster-day { min-height: 10rem; }
  .roster-toolbar { grid-template-columns: 1fr; }
  .shift-actions { display: flex; }
  .roster-action-btn { width: 2.1rem; height: 2.1rem; min-width: 2.1rem; }
  .setup-summary-grid, .roster-summary { grid-template-columns: 1fr 1fr; gap: .5rem; }
}
@media (max-width: 430px) {
  .shift-actions { display: flex; }
  .mini-add-shift { min-width: 3.4rem; }
  .update-banner { bottom: .75rem; }
}

/* GeoPunch payroll review, employee roster tabs, and optional jobs/billing */
.employee-section-nav {
  display: flex;
  gap: .55rem;
  flex-wrap: nowrap;
  overflow-x: auto;
  padding: .35rem;
  border: 1px solid var(--border);
  border-radius: 1.15rem;
  background: rgba(255,255,255,.72);
  -webkit-overflow-scrolling: touch;
}
.employee-section-btn {
  border: 0;
  border-radius: .9rem;
  background: transparent;
  color: var(--muted);
  font-weight: 900;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .45rem;
  padding: .72rem .9rem;
  white-space: nowrap;
  cursor: pointer;
}
.employee-section-btn svg { width: 1rem; height: 1rem; }
.employee-section-btn.active { color: white; background: linear-gradient(135deg, #0f172a, var(--primary)); box-shadow: 0 10px 24px rgba(79,70,229,.22); }
.employee-panel { display: none; min-width: 0; width: 100%; }
.employee-panel.active { display: grid; gap: 1rem; }
.employee-team-roster { display: grid; gap: .75rem; min-width: 0; }
.employee-roster-day { border: 1px solid var(--border); border-radius: 1rem; background: rgba(255,255,255,.78); overflow: hidden; min-width: 0; }
.employee-roster-day-head { display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding: .75rem .85rem; background: rgba(248,250,252,.92); border-bottom: 1px solid var(--border); }
.employee-roster-day-head strong { font-size: .95rem; }
.employee-roster-day-head span { color: var(--muted); font-size: .75rem; font-weight: 900; }
.employee-roster-shifts { display: grid; gap: .5rem; padding: .65rem; }
.employee-roster-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .65rem; align-items: center; border: 1px solid var(--border); border-radius: .85rem; background: #fff; padding: .65rem; min-width: 0; }
.employee-roster-row.mine { border-color: rgba(79,70,229,.35); background: rgba(238,242,255,.76); }
.employee-roster-row strong, .employee-roster-row small { display: block; min-width: 0; overflow-wrap: anywhere; }
.employee-roster-row small { color: var(--muted); font-weight: 800; margin-top: .1rem; }
.employee-shift-card { background: linear-gradient(180deg, rgba(255,255,255,.9), rgba(248,250,252,.82)); }

.entries-toolbar {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
  gap: .75rem;
  align-items: end;
  width: 100%;
  min-width: 0;
  padding: .85rem;
  border: 1px solid var(--border);
  border-radius: 1rem;
  background: rgba(248,250,252,.78);
  margin-bottom: .85rem;
}
.entries-summary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 9rem), 1fr));
  gap: .65rem;
  margin-bottom: .9rem;
}
.entries-summary > div {
  border: 1px solid var(--border);
  border-radius: 1rem;
  background: rgba(255,255,255,.82);
  padding: .8rem;
  display: grid;
  gap: .15rem;
  min-width: 0;
}
.entries-summary strong { font-size: 1.25rem; letter-spacing: -.05em; overflow-wrap: anywhere; }
.entries-summary span { color: var(--muted); font-size: .7rem; font-weight: 900; text-transform: uppercase; letter-spacing: .05em; }
.time-entries-list { display: grid; gap: .85rem; min-width: 0; }
.time-entry-group { border: 1px solid var(--border); border-radius: 1rem; background: rgba(255,255,255,.74); overflow: hidden; min-width: 0; }
.time-entry-group-head { display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding: .8rem .9rem; background: rgba(248,250,252,.92); border-bottom: 1px solid var(--border); }
.time-entry-group-head strong, .time-entry-group-head small { display: block; min-width: 0; overflow-wrap: anywhere; }
.time-entry-group-head small { color: var(--muted); font-weight: 800; margin-top: .1rem; }
.time-session-list { display: grid; gap: .7rem; padding: .75rem; }
.time-session-card { border: 1px solid var(--border); border-radius: .95rem; background: #fff; padding: .75rem; display: grid; gap: .65rem; min-width: 0; }
.time-session-top { display: flex; align-items: flex-start; justify-content: space-between; gap: .75rem; min-width: 0; }
.time-session-top strong, .time-session-top small { display: block; min-width: 0; overflow-wrap: anywhere; }
.time-session-top small { color: var(--muted); font-weight: 800; margin-top: .1rem; }
.time-session-metrics { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 9rem), 1fr)); gap: .55rem; }
.time-session-metrics > div { border: 1px solid var(--border); border-radius: .85rem; background: rgba(248,250,252,.78); padding: .65rem; display: grid; gap: .15rem; min-width: 0; }
.time-session-metrics span { color: var(--muted); font-size: .68rem; font-weight: 900; text-transform: uppercase; letter-spacing: .05em; }
.time-session-metrics strong { font-size: .92rem; overflow-wrap: anywhere; }
.time-adjust-panel { border: 1px dashed var(--border-strong); border-radius: .9rem; background: rgba(248,250,252,.58); padding: .65rem; }
.time-adjust-panel summary { cursor: pointer; font-weight: 900; display: inline-flex; align-items: center; gap: .45rem; color: var(--text); list-style: none; }
.time-adjust-panel summary::-webkit-details-marker { display: none; }
.time-adjust-panel[open] summary { margin-bottom: .65rem; }
.time-adjust-panel summary svg { width: 1rem; height: 1rem; color: var(--primary); }

.jobs-card .wide-field { grid-column: span 2; }
.job-card { background: linear-gradient(180deg, rgba(255,255,255,.88), rgba(248,250,252,.82)); }

@media (max-width: 760px) {
  .employee-section-nav { gap: .35rem; padding: .28rem; border-radius: 1rem; }
  .employee-section-btn { padding: .62rem .72rem; font-size: .82rem; }
  .employee-roster-row, .time-session-top { grid-template-columns: 1fr; display: grid; }
  .employee-roster-row .badge, .time-session-top .badge { justify-self: start; }
  .entries-toolbar, .time-session-list { padding: .65rem; }
  .entries-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .jobs-card .wide-field { grid-column: auto; }
}
@media (max-width: 430px) {
  .entries-summary { grid-template-columns: 1fr; }
}

/* Simplified Time Entries Review */
.compact-toolbar {
  align-items: start;
}
.advanced-filters {
  border: 1px solid var(--border);
  border-radius: .95rem;
  background: rgba(255,255,255,.72);
  padding: .65rem .75rem;
  min-width: min(100%, 18rem);
}
.advanced-filters summary {
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  font-weight: 900;
  color: var(--text);
  list-style: none;
}
.advanced-filters summary::-webkit-details-marker { display: none; }
.advanced-filter-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .7rem;
  margin-top: .75rem;
}
.time-review-helper {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  border: 1px dashed rgba(37,99,235,.28);
  background: rgba(37,99,235,.06);
  border-radius: 1rem;
  padding: .85rem 1rem;
  color: var(--muted);
  font-size: .88rem;
}
.time-review-helper strong {
  color: var(--text);
  white-space: nowrap;
}
.employee-time-group {
  border: 1px solid var(--border);
  border-radius: 1.1rem;
  background: #fff;
  overflow: hidden;
  box-shadow: 0 10px 26px rgba(15,23,42,.05);
}
.employee-time-group + .employee-time-group { margin-top: .85rem; }
.employee-time-group > summary {
  cursor: pointer;
  list-style: none;
  display: grid;
  grid-template-columns: minmax(12rem, 1fr) minmax(0, 3fr);
  gap: 1rem;
  align-items: center;
  padding: 1rem;
  background: linear-gradient(135deg, rgba(15,23,42,.035), rgba(37,99,235,.055));
}
.employee-time-group > summary::-webkit-details-marker { display: none; }
.employee-time-main {
  min-width: 0;
  display: grid;
  gap: .15rem;
}
.employee-time-main strong {
  font-size: 1rem;
  overflow-wrap: anywhere;
}
.employee-time-main small {
  color: var(--muted);
  font-weight: 800;
  overflow-wrap: anywhere;
}
.employee-time-stats {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: .5rem;
}
.employee-time-stats span {
  border: 1px solid var(--border);
  border-radius: .85rem;
  background: rgba(255,255,255,.8);
  padding: .55rem .65rem;
  font-size: .72rem;
  font-weight: 900;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .035em;
  min-width: 0;
}
.employee-time-stats strong {
  display: block;
  color: var(--text);
  font-size: .95rem;
  letter-spacing: -.025em;
  overflow-wrap: anywhere;
}
.danger-text strong { color: #b91c1c !important; }
.ok-text strong { color: #047857 !important; }
.employee-time-table {
  display: grid;
  gap: .55rem;
  padding: .75rem;
  background: rgba(248,250,252,.72);
}
.employee-time-table-head,
.time-session-row-main {
  display: grid;
  grid-template-columns: minmax(6.2rem,.9fr) minmax(8rem,1.05fr) minmax(5rem,.65fr) minmax(10rem,1.45fr) minmax(7rem,.75fr) minmax(5rem,.55fr);
  gap: .6rem;
  align-items: center;
}
.employee-time-table-head {
  color: var(--muted);
  font-size: .68rem;
  font-weight: 950;
  text-transform: uppercase;
  letter-spacing: .06em;
  padding: 0 .6rem .25rem;
}
.time-session-row {
  border: 1px solid var(--border);
  border-radius: .95rem;
  background: #fff;
  padding: .7rem;
  min-width: 0;
  display: grid;
  gap: .55rem;
}
.time-session-row span,
.time-session-row strong,
.time-session-row small { min-width: 0; overflow-wrap: anywhere; }
.time-clock-pair {
  display: grid;
  gap: .1rem;
}
.time-clock-pair small { color: var(--muted); font-weight: 800; }
.time-date,
.time-hours {
  font-weight: 900;
  color: var(--text);
}
.time-session-row .badge {
  justify-self: start;
  gap: .25rem;
}
.compact-adjust {
  position: relative;
  min-width: 0;
}
.compact-adjust summary {
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  border: 1px solid var(--border);
  border-radius: .75rem;
  padding: .45rem .6rem;
  background: rgba(248,250,252,.85);
  font-weight: 900;
  list-style: none;
}
.compact-adjust summary::-webkit-details-marker { display: none; }
.compact-adjust[open] {
  grid-column: 1 / -1;
}
.compact-adjust[open] summary { margin-bottom: .65rem; }
.time-exception-note,
.time-adjusted-note {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  border-radius: .85rem;
  padding: .55rem .7rem;
  font-size: .82rem;
  font-weight: 850;
}
.time-exception-note {
  color: #991b1b;
  background: #fef2f2;
  border: 1px solid #fecaca;
}
.time-adjusted-note {
  color: #854d0e;
  background: #fefce8;
  border: 1px solid #fef08a;
}
.badge.warning { background: #fef9c3; color: #854d0e; }

.time-summary-list { display: grid; gap: .65rem; min-width: 0; }
.time-summary-row {
  border: 1px solid var(--border);
  border-radius: 1rem;
  background: #fff;
  padding: .8rem;
  display: grid;
  grid-template-columns: minmax(10rem, 1.2fr) repeat(3, minmax(5.5rem, .7fr)) minmax(10rem, 1.15fr) auto;
  gap: .7rem;
  align-items: center;
  box-shadow: 0 8px 22px rgba(15,23,42,.045);
  min-width: 0;
}
.time-summary-row strong,
.time-summary-row small,
.time-summary-row span { min-width: 0; overflow-wrap: anywhere; }
.time-summary-person,
.time-summary-metric,
.time-summary-place { display: grid; gap: .12rem; min-width: 0; }
.time-summary-person small,
.time-summary-metric span,
.time-summary-place span,
.time-summary-place small { color: var(--muted); font-size: .72rem; font-weight: 850; }
.time-summary-metric span,
.time-summary-place span { text-transform: uppercase; letter-spacing: .045em; font-weight: 950; }
.time-summary-metric strong { font-size: .95rem; }
.time-summary-row .badge { justify-self: end; white-space: nowrap; }
@media (max-width: 980px) {
  .time-summary-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .time-summary-row .badge { justify-self: start; }
}
@media (max-width: 620px) {
  .time-summary-row { grid-template-columns: 1fr; }
}
@media (max-width: 980px) {
  .advanced-filter-grid { grid-template-columns: 1fr; }
  .employee-time-group > summary { grid-template-columns: 1fr; }
  .employee-time-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .employee-time-table-head { display: none; }
  .time-session-row-main { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
  .compact-adjust { grid-column: 1 / -1; }
}
@media (max-width: 620px) {
  .time-review-helper { display: grid; }
  .employee-time-stats { grid-template-columns: 1fr; }
  .time-session-row-main { grid-template-columns: 1fr; }
  .entries-toolbar { grid-template-columns: 1fr; }
}


/* Final readability updates: roster calendar, location previews, and payroll review */
.location-card { padding: 0; overflow: hidden; }
.location-card-grid { display: grid; grid-template-columns: minmax(14rem, .95fr) minmax(0, 1.35fr); gap: 0; min-width: 0; }
.location-card-content { display: grid; gap: .7rem; padding: .9rem; min-width: 0; align-content: start; }
.location-map-preview { min-height: 12rem; background: #e2e8f0; border-right: 1px solid var(--border); min-width: 0; }
.location-map-preview iframe { width: 100%; height: 100%; min-height: 12rem; border: 0; display: block; }
.location-card .meta-line a { color: var(--primary); font-weight: 900; text-decoration: none; }
.location-card .meta-line a:hover { text-decoration: underline; }
.employee-time-group.alt { background: #f8fafc; }
.employee-time-group.alt > summary { background: linear-gradient(135deg, rgba(2,6,23,.055), rgba(79,70,229,.075)); }
.employee-time-group:not([open]) > summary { border-bottom: 0; }
.inline-actions { width: auto; justify-content: flex-end; }
.inline-actions .btn { white-space: nowrap; }
#export-paypak:disabled { opacity: .6; cursor: not-allowed; }
@media (min-width: 1180px) {
  .weekly-roster, .calendar-roster { grid-template-columns: repeat(7, minmax(0, 1fr)); overflow-x: visible; }
  .shift-card { padding: .58rem; }
  .shift-main strong { font-size: .84rem; }
  .shift-main small, .shift-main em { font-size: .68rem; }
}
@media (max-width: 760px) {
  .location-card-grid { grid-template-columns: 1fr; }
  .location-map-preview { border-right: 0; border-bottom: 1px solid var(--border); }
  .inline-actions { justify-content: flex-start; }
}

/* Leave / equipment request polish */
.equipment-request-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .75rem;
  margin: .85rem 0 1rem;
  padding: .9rem;
  border: 1px solid rgba(14,165,233,.24);
  border-radius: 1rem;
  background: rgba(14,165,233,.08);
}
.equipment-request-fields label { min-width: 0; }
@media (max-width: 720px) {
  .equipment-request-fields { grid-template-columns: 1fr; }
}


/* Employee import/export */
.wrap-actions { flex-wrap: wrap; }
.file-import-btn { cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: .45rem; }
.hidden-file-input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.employee-import-card .settings-note { margin-top: .85rem; }

.danger-zone-card { border-color: rgba(244,63,94,.32) !important; background: linear-gradient(180deg, rgba(255,241,242,.82), rgba(255,255,255,.9)); }
.danger-zone-card .section-header h3 { color: #9f1239; }
.danger-zone-card input:disabled { background: rgba(248,250,252,.9); color: var(--muted); }

/* Mobile/PWA polish: install banner, safe inputs, and remember-me controls */
input, select, textarea, button { font-size: 16px; }
.check-row, .remember-row, .settings-toggle {
  display: flex;
  align-items: flex-start;
  gap: .65rem;
  min-width: 0;
  cursor: pointer;
}
.check-row input, .settings-toggle input { width: 1.05rem; height: 1.05rem; margin-top: .15rem; flex: 0 0 auto; }
.settings-toggle {
  padding: .9rem;
  border: 1px solid rgba(148,163,184,.38);
  border-radius: 1rem;
  background: rgba(248,250,252,.78);
}
.settings-toggle span { display: grid; gap: .18rem; min-width: 0; }
.settings-toggle small { color: var(--muted); line-height: 1.35; }
.install-banner {
  position: fixed;
  left: max(1rem, env(safe-area-inset-left));
  right: max(1rem, env(safe-area-inset-right));
  bottom: max(1rem, env(safe-area-inset-bottom));
  z-index: 80;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 1rem;
  padding: .95rem;
  border-radius: 1.25rem;
  background: rgba(15,23,42,.96);
  color: #fff;
  box-shadow: 0 22px 70px rgba(2,6,23,.32);
  border: 1px solid rgba(255,255,255,.16);
  backdrop-filter: blur(18px);
}
.install-banner.hidden { display: none; }
.install-banner-copy { display: grid; gap: .2rem; min-width: 0; }
.install-banner-copy strong { font-size: .98rem; }
.install-banner-copy span { color: rgba(255,255,255,.78); font-size: .86rem; line-height: 1.35; }
.install-banner-actions { display: flex; gap: .5rem; flex-wrap: wrap; justify-content: flex-end; }
.update-banner.success { background: rgba(22,163,74,.96); }
.update-banner.warning { background: rgba(245,158,11,.96); }
.update-banner.info { background: rgba(15,23,42,.96); }
@media (max-width: 680px) {
  .install-banner { grid-template-columns: 1fr; }
  .install-banner-actions { justify-content: stretch; }
  .install-banner-actions .btn { flex: 1 1 auto; }
}

/* Employee roster view refinements */
.employee-roster-control-card { background: linear-gradient(180deg, rgba(255,255,255,.94), rgba(248,250,252,.88)); }
.employee-roster-toolbar { display: flex; align-items: center; justify-content: space-between; gap: .85rem; flex-wrap: wrap; }
.segmented-control { display: inline-flex; align-items: center; gap: .35rem; padding: .3rem; border: 1px solid var(--border); border-radius: 999px; background: rgba(248,250,252,.92); box-shadow: inset 0 1px 0 rgba(255,255,255,.75); }
.employee-roster-view-btn { border: 0; border-radius: 999px; padding: .55rem .8rem; background: transparent; color: var(--muted); font-size: .82rem; font-weight: 900; display: inline-flex; align-items: center; gap: .35rem; cursor: pointer; white-space: nowrap; }
.employee-roster-view-btn svg { width: 1rem; height: 1rem; }
.employee-roster-view-btn.active { background: var(--primary); color: #fff; box-shadow: 0 10px 22px rgba(79,70,229,.22); }
.employee-roster-date-label { min-width: 12rem; margin: 0; }
.employee-roster-location { padding: .45rem .7rem 0; color: var(--muted); font-size: .72rem; font-weight: 900; overflow-wrap: anywhere; }
.weekly-list-roster-view .employee-roster-day { margin-bottom: .75rem; }
.daily-roster-view .employee-roster-day.open { margin-top: .75rem; }
.employee-roster-row { align-items: start; }
.employee-roster-row .badge { white-space: nowrap; }

@media (max-width: 760px) {
  .employee-roster-toolbar { align-items: stretch; }
  .segmented-control { width: 100%; overflow-x: auto; justify-content: flex-start; }
  .employee-roster-view-btn { flex: 1 0 auto; justify-content: center; }
  .employee-roster-date-label { width: 100%; }
}


/* PWA/mobile date controls and employee roster calendar scaling */
.settings-field.compact-setting {
  display: grid;
  gap: .35rem;
  padding: .9rem;
  border: 1px solid rgba(148,163,184,.38);
  border-radius: 1rem;
  background: rgba(248,250,252,.78);
  min-width: 0;
}
.settings-field.compact-setting > span { font-weight: 900; color: var(--text); }
.settings-field.compact-setting small { color: var(--muted); line-height: 1.35; }
input[type="date"], input[type="time"], input[type="month"], .date-control {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
  -webkit-appearance: none;
  appearance: none;
}
@media all and (display-mode: standalone) {
  .employee-roster-date-label, .form-grid label, .roster-toolbar label, .entries-toolbar label { min-width: 0; }
  input[type="date"], input[type="time"], select { min-height: 2.85rem; }
}
.clock-btn.waiting-window { background: linear-gradient(135deg, #f59e0b, #d97706); box-shadow: 0 18px 50px rgba(217,119,6,.26); }
@media (max-width: 760px) {
  .employee-roster-day-head { padding: .62rem .65rem; }
  .employee-roster-day-head strong { font-size: .82rem; }
  .employee-roster-day-head span { font-size: .68rem; }
  .employee-roster-location { font-size: .66rem; padding: .35rem .55rem 0; }
  .employee-roster-shifts { padding: .5rem; }
}

.entries-history-status {
  margin: 0.65rem 0 0;
  color: var(--muted);
  font-size: 0.85rem;
  line-height: 1.35;
}
@media (max-width: 720px) {
  .time-entries-card .section-header .button-row.inline-actions {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr;
  }
}


/* Stationary tablet mode */
.station-mode-active .app-header { display: none; }
.station-screen { min-height: 100svh; display: grid; place-items: center; padding-top: calc(20px + env(safe-area-inset-top)); padding-bottom: calc(20px + env(safe-area-inset-bottom)); }
.station-screen.hidden { display: none; }
.station-card { width: min(720px, 100%); }
.station-hero { display: flex; gap: 14px; align-items: center; margin-bottom: 18px; }
.station-brand-icon { width: 58px; height: 58px; flex: 0 0 auto; }
.station-status-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 16px 0; }
.station-status-grid div { border: 1px solid rgba(148, 163, 184, .22); border-radius: 18px; padding: 14px; background: rgba(15, 23, 42, .55); }
.station-status-grid strong { display: block; font-size: 1rem; color: var(--text); overflow-wrap: anywhere; }
.station-status-grid span { color: var(--muted); font-size: .78rem; }
.station-punch-panel { display: grid; grid-template-columns: 1fr auto; gap: 10px; align-items: end; margin-top: 16px; }
.station-selected-employee { border: 1px solid rgba(34, 211, 238, .28); background: rgba(8, 47, 73, .35); border-radius: 18px; padding: 14px 16px; margin: 14px 0 8px; display: flex; flex-direction: column; gap: 4px; }
.station-selected-employee strong { font-size: 1.05rem; }
.station-selected-employee span { color: var(--muted); font-size: .85rem; }
.station-punch-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 16px; }
.station-action { min-height: 64px; font-size: 1.05rem; touch-action: manipulation; user-select: none; -webkit-user-select: none; }
.station-action.station-soft-disabled { opacity: .62; filter: grayscale(.2); pointer-events: auto; }
.station-action.station-soft-disabled:active { transform: none; }

.station-footer-actions { display: flex; justify-content: space-between; gap: 12px; align-items: center; margin-top: 16px; flex-wrap: wrap; }
.station-unlock { display: flex; gap: 8px; align-items: center; }
.station-unlock input { max-width: 180px; }
.station-settings-card .settings-note { margin: 12px 0; }
@media (max-width: 640px) {
  .station-screen { padding-left: 12px; padding-right: 12px; place-items: start center; }
  .station-status-grid, .station-punch-panel, .station-punch-actions { grid-template-columns: 1fr; }
  .station-footer-actions, .station-unlock { width: 100%; }
  .station-unlock input, .station-footer-actions .btn, .station-unlock .btn { width: 100%; max-width: none; }
}

.station-search-results { margin: 10px 0 8px; display: grid; gap: 8px; }
.station-search-results.hidden { display: none; }
.station-search-option { border: 1px solid rgba(148, 163, 184, .28); background: rgba(15, 23, 42, .55); color: var(--text); border-radius: 14px; padding: 10px 12px; display: flex; justify-content: space-between; align-items: center; gap: 12px; text-align: left; cursor: pointer; }
.station-search-option:hover { border-color: rgba(34, 211, 238, .55); background: rgba(8, 47, 73, .45); }
.station-search-option strong { display: block; font-size: .95rem; }
.station-search-option span { display: block; color: var(--muted); font-size: .8rem; }
.station-photo-status { color: var(--muted); }
.station-photo-status.review { color: #fbbf24; }
.station-photo-status.ok { color: #86efac; }

/* Station snapshot thumbnails in Time Entries */
.station-photo-strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); gap: .65rem; padding: .65rem .75rem .1rem; }
.station-photo-thumb { display: grid; grid-template-columns: 4.75rem minmax(0,1fr); gap: .65rem; align-items: center; border: 1px solid rgba(148,163,184,.34); border-radius: .9rem; background: rgba(248,250,252,.82); padding: .55rem; margin: 0; min-width: 0; }
.station-photo-thumb.review { border-color: rgba(245,158,11,.55); background: rgba(255,251,235,.78); }
.station-photo-thumb.ok { border-color: rgba(34,197,94,.35); }
.station-photo-thumb.expired { opacity: .88; }
.station-photo-preview { border: 0; padding: 0; border-radius: .7rem; overflow: hidden; background: #0f172a; width: 4.75rem; height: 4.75rem; cursor: zoom-in; box-shadow: inset 0 0 0 1px rgba(255,255,255,.08); }
.station-photo-preview img { width: 100%; height: 100%; object-fit: cover; display: block; }
.station-photo-placeholder { width: 4.75rem; height: 4.75rem; border-radius: .7rem; display: grid; place-items: center; background: rgba(15,23,42,.08); color: var(--muted); }
.station-photo-placeholder svg { width: 1.35rem; height: 1.35rem; }
.station-photo-thumb figcaption { display: grid; gap: .12rem; min-width: 0; }
.station-photo-thumb figcaption strong { font-size: .82rem; color: var(--text); }
.station-photo-thumb figcaption span, .station-photo-thumb figcaption small { color: var(--muted); font-size: .72rem; font-weight: 800; overflow-wrap: anywhere; }
.station-photo-thumb.review figcaption small { color: #92400e; }
.station-photo-modal { position: fixed; inset: 0; z-index: 10000; display: grid; place-items: center; background: rgba(15,23,42,.76); padding: max(1rem, env(safe-area-inset-top)) 1rem max(1rem, env(safe-area-inset-bottom)); }
.station-photo-modal-card { width: min(92vw, 36rem); border-radius: 1.25rem; background: #fff; box-shadow: var(--shadow); overflow: hidden; }
.station-photo-modal-head { display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding: .8rem 1rem; border-bottom: 1px solid var(--border); }
.station-photo-modal-card img { width: 100%; max-height: 72vh; object-fit: contain; background: #020617; display: block; }

/* Reports & analytics */
.reports-card .report-toolbar { margin-top: .75rem; }
.report-table-wrap { width: 100%; overflow-x: auto; border: 1px solid var(--border); border-radius: 1rem; background: #fff; }
.report-table { width: 100%; border-collapse: collapse; min-width: 52rem; font-size: .86rem; }
.report-table th, .report-table td { padding: .75rem .8rem; border-bottom: 1px solid rgba(148,163,184,.28); text-align: left; vertical-align: top; }
.report-table th { background: rgba(248,250,252,.95); color: var(--muted); font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; }
.report-table tr:last-child td { border-bottom: 0; }
.reports-summary { margin-top: .75rem; }


/* Reports print support and employee monthly team roster calendar */
.reports-card .inline-actions { align-items: center; }
.report-table-wrap { print-color-adjust: exact; -webkit-print-color-adjust: exact; }
.employee-team-roster { width: 100%; min-width: 0; max-width: 100%; }
.employee-team-roster .week-roster-label { margin: 0 0 .75rem; overflow-wrap: anywhere; }
.employee-team-roster.calendar-roster-view { display: block; overflow: visible; }
.employee-month-calendar {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  border: 1px solid var(--border);
  border-radius: 1.15rem;
  background: rgba(255,255,255,.92);
  overflow: hidden;
  box-shadow: 0 14px 32px rgba(15,23,42,.08);
}
.employee-calendar-weekdays {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  background: rgba(15,23,42,.04);
  border-bottom: 1px solid var(--border);
}
.employee-calendar-weekdays span {
  min-width: 0;
  padding: .72rem .45rem;
  text-align: center;
  color: var(--muted);
  font-size: .72rem;
  font-weight: 950;
  text-transform: uppercase;
  letter-spacing: .06em;
  border-right: 1px solid rgba(148,163,184,.24);
}
.employee-calendar-weekdays span:last-child { border-right: 0; }
.employee-team-roster.calendar-roster-view .employee-calendar-grid {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 0;
  align-items: stretch;
  overflow: visible;
  padding: 0;
}
.employee-team-roster.calendar-roster-view .employee-roster-day.employee-calendar-day {
  min-width: 0;
  width: 100%;
  max-width: 100%;
  min-height: 11.5rem;
  display: flex;
  flex-direction: column;
  border: 0;
  border-radius: 0;
  background: rgba(255,255,255,.98);
  box-shadow: inset -1px 0 rgba(148,163,184,.24), inset 0 -1px rgba(148,163,184,.24);
  overflow: hidden;
}
.employee-team-roster.calendar-roster-view .employee-roster-day.employee-calendar-day.outside-month {
  background: rgba(248,250,252,.72);
  color: rgba(100,116,139,.86);
}
.employee-team-roster.calendar-roster-view .employee-roster-day.employee-calendar-day.today {
  outline: 2px solid rgba(79,70,229,.38);
  outline-offset: -2px;
  background: rgba(238,242,255,.48);
}
.employee-calendar-day-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: .35rem;
  padding: .5rem .55rem .35rem;
  min-width: 0;
}
.employee-calendar-day-head strong {
  display: grid;
  place-items: center;
  width: 1.8rem;
  height: 1.8rem;
  border-radius: 999px;
  background: rgba(15,23,42,.06);
  color: var(--text);
  font-size: .82rem;
  line-height: 1;
}
.employee-calendar-day.today .employee-calendar-day-head strong { background: var(--primary); color: #fff; }
.employee-calendar-day-head span {
  min-width: 0;
  color: var(--muted);
  font-size: .62rem;
  font-weight: 850;
  text-align: right;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.employee-team-roster.calendar-roster-view .employee-roster-location {
  padding: 0 .55rem .42rem;
  color: var(--muted);
  font-size: .63rem;
  font-weight: 900;
  line-height: 1.2;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.employee-team-roster.calendar-roster-view .employee-roster-shifts {
  flex: 1 1 auto;
  min-width: 0;
  max-width: 100%;
  overflow-y: auto;
  display: grid;
  align-content: start;
  gap: .35rem;
  padding: 0 .48rem .55rem;
}
.employee-team-roster.calendar-roster-view .employee-roster-row {
  width: 100%;
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: .32rem;
  align-items: start;
  border-radius: .68rem;
  padding: .42rem .45rem;
}
.employee-team-roster.calendar-roster-view .employee-roster-row strong,
.employee-team-roster.calendar-roster-view .employee-roster-row small {
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.employee-team-roster.calendar-roster-view .employee-roster-row strong { font-size: .7rem; }
.employee-team-roster.calendar-roster-view .employee-roster-row small { font-size: .61rem; }
.employee-team-roster.calendar-roster-view .employee-roster-row .badge {
  justify-self: start;
  max-width: 100%;
  padding: .2rem .4rem;
  font-size: .55rem;
  overflow: hidden;
  text-overflow: ellipsis;
}
.employee-team-roster.calendar-roster-view .empty-state.mini {
  min-height: 0;
  padding: .45rem;
  border-radius: .7rem;
  font-size: .62rem;
}
@media (max-width: 1020px) {
  .employee-month-calendar { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .employee-calendar-weekdays,
  .employee-team-roster.calendar-roster-view .employee-calendar-grid { min-width: 54rem; }
}
@media (max-width: 680px) {
  .employee-calendar-weekdays,
  .employee-team-roster.calendar-roster-view .employee-calendar-grid { min-width: 47rem; }
  .employee-team-roster.calendar-roster-view .employee-roster-day.employee-calendar-day { min-height: 9.5rem; }
  .employee-calendar-weekdays span { padding: .58rem .35rem; font-size: .66rem; }
  .employee-calendar-day-head { padding: .42rem .45rem .28rem; }
  .employee-calendar-day-head strong { width: 1.55rem; height: 1.55rem; font-size: .74rem; }
  .employee-calendar-day-head span { display: none; }
}
@media print {
  .employee-month-calendar { overflow: visible; box-shadow: none; }
  .employee-calendar-weekdays,
  .employee-team-roster.calendar-roster-view .employee-calendar-grid { min-width: 0 !important; }
  .employee-team-roster.calendar-roster-view .employee-roster-shifts { overflow: visible; }
}

/* Roster confirmation / call-in indicators */
.badge.requested,
.badge.call_in,
.badge.call-in,
.badge.called_in { background: #ffedd5; color: #9a3412; }
.badge.awaiting,
.badge.confirmation { background: #fef3c7; color: #92400e; }
.employee-shift-card .item-actions { margin-top: .55rem; }
.shift-card[data-shift-card] { cursor: pointer; }
.shift-card[data-shift-card]:focus-within { outline: 2px solid rgba(37, 99, 235, .25); outline-offset: 2px; }

.company-switcher { display: inline-flex; align-items: center; gap: .45rem; border: 1px solid var(--border); border-radius: 999px; background: rgba(255,255,255,.78); padding: .28rem .35rem .28rem .65rem; font-size: .72rem; font-weight: 900; color: var(--muted); }
.company-switcher select { width: min(18rem, 48vw); border: none; background: transparent; padding: .35rem .55rem; font-size: .78rem; font-weight: 900; color: #0f172a; outline: none; }
.owner-group-card .stacked-label { display: grid; gap: .45rem; margin-top: .75rem; font-size: .78rem; font-weight: 900; color: #334155; }
.owner-group-card select[multiple] { min-height: 8.5rem; border: 1px solid var(--border); border-radius: 1rem; padding: .55rem; background: rgba(255,255,255,.84); font-weight: 800; }
@media (max-width: 760px) {
  .company-switcher { width: 100%; justify-content: space-between; border-radius: 1rem; }
  .company-switcher select { flex: 1; width: auto; min-width: 0; }
}

/* Production dashboard / roster v2 */
.dashboard-insights-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  gap: .9rem;
}
.dashboard-chart-card,
.dashboard-breakdown-card,
.dashboard-exceptions-card {
  border: 1px solid var(--border);
  border-radius: 1rem;
  background: rgba(255,255,255,.78);
  padding: .9rem;
  display: grid;
  gap: .55rem;
}
.dashboard-chart-card h4,
.dashboard-breakdown-card h4,
.dashboard-exceptions-card h4 {
  margin: 0;
  font-size: .84rem;
}
.mini-bars,
.breakdown-bars {
  display: grid;
  gap: .38rem;
}
.mini-bar-row,
.breakdown-row {
  display: grid;
  grid-template-columns: 3.2rem minmax(0, 1fr) 2.7rem;
  align-items: center;
  gap: .45rem;
  font-size: .72rem;
  font-weight: 800;
  color: #334155;
}
.breakdown-row { grid-template-columns: minmax(5rem, 1fr) minmax(0, 1.2fr) 2.7rem; }
.mini-bar-track,
.breakdown-track {
  height: .55rem;
  border-radius: 999px;
  background: #e2e8f0;
  overflow: hidden;
}
.mini-bar-fill,
.breakdown-fill {
  height: 100%;
  border-radius: inherit;
  background: #2563eb;
}
.dashboard-exception-list {
  display: grid;
  gap: .45rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.dashboard-exception-list li {
  display: flex;
  justify-content: space-between;
  gap: .7rem;
  border-bottom: 1px solid rgba(148,163,184,.25);
  padding-bottom: .4rem;
  font-size: .74rem;
}
.dashboard-exception-list li:last-child { border-bottom: none; padding-bottom: 0; }
.shift-mass-panel {
  grid-column: 1 / -1;
  border: 1px solid var(--border);
  border-radius: 1rem;
  padding: .8rem;
  background: rgba(248,250,252,.88);
  display: grid;
  gap: .65rem;
}
.mass-roster-tools { display: flex; gap: .45rem; flex-wrap: wrap; align-items: center; }
.mass-roster-tools input { flex: 1 1 14rem; }
.shift-mass-employee-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  gap: .5rem;
  max-height: 24rem;
  overflow: auto;
  padding: .2rem;
}
.mass-employee-option {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: .55rem;
  align-items: start;
  border: 1px solid var(--border);
  border-radius: .9rem;
  background: #fff;
  padding: .58rem;
}
.mass-employee-option.unavailable {
  opacity: .56;
  background: #f1f5f9;
}
.mass-employee-option strong,
.mass-employee-option small { display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mass-employee-option small { color: var(--muted); font-weight: 700; }
.company-record-list {
  display: flex;
  flex-wrap: wrap;
  gap: .45rem;
  min-height: 2.4rem;
  align-items: flex-start;
}
.company-record-chip {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: .35rem .5rem .35rem .7rem;
  background: #fff;
  font-size: .74rem;
  font-weight: 900;
}
.company-record-chip button { border: none; background: transparent; cursor: pointer; color: #64748b; font-weight: 900; }
.employee-notification-card {
  display: flex;
  justify-content: space-between;
  gap: .8rem;
  align-items: center;
  border-left: .32rem solid #2563eb;
}
.employee-notification-card strong,
.employee-notification-card span { display: block; }
.employee-notification-card span { color: var(--muted); margin-top: .2rem; font-size: .82rem; }
@media (max-width: 760px) {
  .employee-notification-card { align-items: stretch; flex-direction: column; }
  .mini-bar-row,
  .breakdown-row { grid-template-columns: 2.6rem minmax(0, 1fr) 2.3rem; }
  .breakdown-row { grid-template-columns: minmax(4.2rem, 1fr) minmax(0, 1.2fr) 2.3rem; }
}
.dashboard-insight-card {
  border: 1px solid var(--border);
  border-radius: 1rem;
  background: rgba(255,255,255,.78);
  padding: .9rem;
  display: grid;
  gap: .55rem;
}
.dashboard-insight-card.wide { grid-column: 1 / -1; }
.dashboard-insight-card h4 {
  display: flex;
  align-items: center;
  gap: .4rem;
  margin: 0;
  font-size: .84rem;
}
.mini-bar-list,
.breakdown-list { display: grid; gap: .42rem; }
.mini-bar-track b { display: block; height: 100%; border-radius: inherit; background: #2563eb; }
.dashboard-exception-list {
  display: grid;
  gap: .45rem;
}
.dashboard-exception-list > div {
  display: grid;
  gap: .12rem;
  border-bottom: 1px solid rgba(148,163,184,.25);
  padding-bottom: .4rem;
}
.dashboard-exception-list > div:last-child { border-bottom: none; padding-bottom: 0; }
.dashboard-exception-list span { color: var(--muted); font-size: .76rem; }
.company-record-chip,
.record-chip {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: .35rem .5rem .35rem .7rem;
  background: #fff;
  font-size: .74rem;
  font-weight: 900;
}
.company-record-chip button,
.record-chip button { border: none; background: transparent; cursor: pointer; color: #64748b; font-weight: 900; }
.records-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  gap: .9rem;
  margin-top: .8rem;
}
.records-grid > div {
  display: grid;
  gap: .45rem;
  border: 1px solid var(--border);
  border-radius: 1rem;
  background: rgba(248,250,252,.8);
  padding: .8rem;
}
.compact-toggle { min-height: 0; }
.compact-toggle small { display: block; margin-top: .15rem; color: var(--muted); }
.mass-employee-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: .55rem;
  align-items: start;
  border: 1px solid var(--border);
  border-radius: .9rem;
  background: #fff;
  padding: .58rem;
}
.mass-employee-row.unavailable { opacity: .56; background: #f1f5f9; }
.mass-employee-row strong,
.mass-employee-row small { display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mass-employee-row small { color: var(--muted); font-weight: 700; }

/* GeoPunch production UX refinements */
.settings-accordion-card { transition: box-shadow .2s ease, transform .2s ease; }
.settings-accordion-card > .section-header { cursor: default; gap: 1rem; }
.settings-collapse-btn { margin-left: auto; flex: 0 0 auto; transition: transform .2s ease; }
.settings-accordion-card.collapsed .settings-collapse-btn { transform: rotate(-90deg); }
.settings-accordion-card.collapsed > :not(.section-header) { display: none !important; }
.settings-subsection { border: 1px solid var(--border, rgba(15, 23, 42, .12)); border-radius: 18px; padding: 1rem; margin: .75rem 0; background: rgba(15, 23, 42, .025); }
.settings-subsection h4 { display:flex; align-items:center; gap:.45rem; margin:0 0 .75rem; font-size:.95rem; }
.settings-device-panel { margin-top: 1rem; }
.time-adjustment-requests:not(:empty) { margin-bottom: .75rem; }
.time-adjustment-request { border-left: 4px solid #f59e0b; }
.hidden { display: none !important; }


/* Contextual editing: no global floating save dock. Edit cards open as focused slide-over panels with their own sticky actions. */
.editor-backdrop {
  position: fixed;
  inset: 0;
  z-index: 1240;
  background: rgba(15, 23, 42, .22);
}
.editor-backdrop.hidden { display: none !important; }
body.context-editor-active { overflow: hidden; }
.context-editor-open {
  position: fixed !important;
  top: max(.75rem, env(safe-area-inset-top));
  right: max(.75rem, env(safe-area-inset-right));
  bottom: max(.75rem, env(safe-area-inset-bottom));
  width: min(620px, calc(100vw - 1.5rem));
  max-height: calc(100vh - 1.5rem);
  overflow: auto;
  z-index: 1250;
  margin: 0 !important;
  border-radius: 26px;
  box-shadow: 0 30px 90px rgba(15, 23, 42, .34);
  animation: geopunchSlideEditor .18s ease-out;
}
.context-editor-open > .section-header:first-of-type { padding-top: .4rem; }
.editor-drawer-titlebar {
  position: sticky;
  top: 0;
  z-index: 4;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin: -.15rem -.15rem .85rem;
  padding: .8rem .85rem;
  border-radius: 20px;
  border: 1px solid var(--border, rgba(15, 23, 42, .1));
  background: color-mix(in srgb, var(--card, #fff) 94%, transparent);
  backdrop-filter: blur(12px);
}
.editor-drawer-titlebar strong,
.editor-drawer-titlebar small { display: block; }
.editor-drawer-titlebar small { color: var(--muted); font-weight: 750; margin-top: .12rem; }
.context-editor-open .button-row {
  position: sticky;
  bottom: 0;
  z-index: 4;
  padding: .7rem;
  margin: 1rem -.15rem -.15rem;
  border-radius: 20px;
  background: color-mix(in srgb, var(--card, #fff) 95%, transparent);
  backdrop-filter: blur(14px);
  border: 1px solid var(--border, rgba(15, 23, 42, .1));
  box-shadow: 0 -14px 38px rgba(15, 23, 42, .12);
}
.shift-builder-panel.context-editor-open { display: block; }
@keyframes geopunchSlideEditor { from { transform: translateX(38px); opacity: .65; } to { transform: translateX(0); opacity: 1; } }
@media (max-width: 760px) {
  .context-editor-open {
    inset: max(.35rem, env(safe-area-inset-top)) .35rem max(.35rem, env(safe-area-inset-bottom));
    width: auto;
    max-height: calc(100vh - .7rem);
    border-radius: 20px;
  }
  .context-editor-open .button-row {
    display: grid;
    grid-template-columns: 1fr;
  }
}


/* Interactive circular dashboard snapshot grids */
.dashboard-insight-card.circular { min-height: 17rem; }
.dashboard-circle-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(6.8rem, 1fr));
  gap: .75rem;
  align-items: stretch;
}
.dashboard-circle-cell {
  border: 1px solid var(--border);
  border-radius: 1.15rem;
  background: linear-gradient(180deg, rgba(255,255,255,.96), rgba(248,250,252,.92));
  padding: .8rem .55rem;
  display: grid;
  justify-items: center;
  gap: .35rem;
  min-height: 8.2rem;
  cursor: default;
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
  color: var(--text);
}
.dashboard-circle-cell:hover,
.dashboard-circle-cell:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 14px 30px rgba(15, 23, 42, .12);
  border-color: rgba(37, 99, 235, .32);
  outline: none;
}
.circle-meter {
  width: 4.25rem;
  aspect-ratio: 1;
  border-radius: 999px;
  display: grid;
  place-items: center;
  background:
    radial-gradient(circle at center, #fff 54%, transparent 56%),
    conic-gradient(var(--primary, #2563eb) var(--circle-size, 50%), rgba(226,232,240,.92) 0);
  box-shadow: inset 0 0 0 1px rgba(15,23,42,.08);
}
.circle-meter b { font-size: 1.1rem; color: #0f172a; }
.dashboard-circle-cell strong {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: .82rem;
  text-align: center;
}
.dashboard-circle-cell small { color: var(--muted); font-weight: 800; font-size: .68rem; text-align: center; }


/* Dashboard alignment + employee history summary fixes */
.dashboard-insights-grid { align-items: start; }
.dashboard-insights-grid > * { align-self: start; }
.dashboard-insight-card { align-content: start; }
.dashboard-insight-card.circular { min-height: 0; }
.dashboard-insight-card.wide { align-self: start; }
.employee-history-date-label { display: grid; gap: .35rem; min-width: min(14rem, 100%); font-size: .78rem; font-weight: 900; color: var(--muted); }
.employee-history-summary { display: grid; gap: .85rem; }
.history-week-total { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .7rem; }
.history-week-total > div { border: 1px solid var(--border); border-radius: 1rem; padding: .75rem; background: linear-gradient(180deg, rgba(255,255,255,.96), rgba(248,250,252,.9)); display: grid; gap: .25rem; }
.history-week-total span { color: var(--muted); font-size: .72rem; font-weight: 900; text-transform: uppercase; letter-spacing: .04em; }
.history-week-total strong { color: var(--text); font-size: 1rem; }
.employee-history-table { display: grid; gap: .4rem; }
.employee-history-head, .employee-history-row { display: grid; grid-template-columns: 1.25fr .9fr .9fr .75fr .8fr; align-items: center; gap: .55rem; }
.employee-history-head { color: var(--muted); font-size: .7rem; font-weight: 950; text-transform: uppercase; letter-spacing: .04em; padding: 0 .35rem; }
.employee-history-row { border: 1px solid var(--border); border-radius: 1rem; padding: .65rem .7rem; background: #fff; font-size: .82rem; font-weight: 850; }
.employee-history-row.needs-review { border-color: rgba(245,158,11,.35); background: #fffbeb; }
.employee-history-row span:first-child { display: grid; gap: .08rem; }
.employee-history-row small { color: var(--muted); font-size: .7rem; font-weight: 800; }
@media (max-width: 760px) {
  .history-week-total { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .employee-history-head { display: none; }
  .employee-history-row { grid-template-columns: 1fr 1fr; gap: .45rem; }
  .employee-history-row span { display: grid; gap: .08rem; }
}


/* 20260629-role-clock-approval-records-v1: company records hub + time approval polish */
.records-section-nav { margin-top: .85rem; flex-wrap: wrap; }
.records-subpanel { display: none; }
.records-subpanel.active { display: block; }
.time-session-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .45rem; justify-content: flex-end; }
.time-session-actions .time-adjust-panel { min-width: min(22rem, 100%); }
.manual-edit-note { border-left: 4px solid rgba(245, 158, 11, .85); background: color-mix(in srgb, #fef3c7 62%, var(--card, #fff)); font-weight: 850; }
@media (max-width: 760px) {
  .time-session-actions { justify-content: stretch; width: 100%; }
  .time-session-actions > * { width: 100%; }
}

/* 20260629-shift-confirmation-clock-v2: shift confirmation clock gate setting + roster location snapshot fallback */

/* 20260629-company-records-pill-v3: modern company records tabs and separate record sections */
.records-section-nav {
  display: flex;
  gap: .55rem;
  flex-wrap: nowrap;
  overflow-x: auto;
  padding: .35rem;
  border: 1px solid var(--border);
  border-radius: 1.15rem;
  background: rgba(255,255,255,.72);
  -webkit-overflow-scrolling: touch;
  margin-top: .85rem;
}
.records-section-btn {
  border: 0;
  border-radius: .9rem;
  background: transparent;
  color: var(--muted);
  font-weight: 900;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .45rem;
  padding: .72rem .9rem;
  white-space: nowrap;
  cursor: pointer;
  flex: 0 0 auto;
}
.records-section-btn svg { width: 1rem; height: 1rem; }
.records-section-btn.active {
  color: #fff;
  background: linear-gradient(135deg, #0f172a, var(--primary));
  box-shadow: 0 10px 24px rgba(79,70,229,.22);
}
.records-subpanel { display: none; }
.records-subpanel.active { display: block; }
.record-editor-card { background: linear-gradient(180deg, rgba(255,255,255,.96), rgba(248,250,252,.9)); }
.records-single-form { align-items: end; }
.records-grid.single { grid-template-columns: minmax(0, 1fr); }
.records-grid.single > div { min-height: 7rem; }
.company-record-list { align-content: start; }
@media (max-width: 760px) {
  .records-section-nav { width: 100%; justify-content: flex-start; }
  .records-section-btn { flex: 1 0 auto; }
  .records-single-form { grid-template-columns: 1fr; }
}



.employee-collapsible-card { padding: 0; overflow: hidden; }
.employee-card-summary { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: .65rem; align-items: center; cursor: pointer; padding: .85rem; list-style: none; }
.employee-card-summary::-webkit-details-marker { display: none; }
.employee-card-summary::before { content: "▸"; color: var(--muted); font-weight: 900; }
.employee-collapsible-card[open] .employee-card-summary::before { content: "▾"; }
.employee-card-body { border-top: 1px solid var(--border); padding: .85rem; display: grid; gap: .7rem; }
.position-record-chip em { color: var(--muted); font-style: normal; font-size: .72rem; font-weight: 900; }
.form-action-label { align-self: end; display: flex; align-items: end; }
.employee-anytime-field { grid-column: 1 / -1; }
.position-allocation-panel { margin: .65rem 0; border: 1px solid var(--border); border-radius: .95rem; background: rgba(248,250,252,.72); padding: .55rem .7rem; }
.position-allocation-panel summary { cursor: pointer; font-weight: 900; display: flex; align-items: center; gap: .4rem; }
.position-allocation-list { display: grid; gap: .5rem; margin-top: .7rem; }
.position-allocation-row { display: grid; grid-template-columns: minmax(10rem, 1.4fr) minmax(6rem, .7fr) minmax(6rem, .7fr) auto; gap: .5rem; align-items: end; }
.position-allocation-row label { min-width: 0; }
.position-allocation-footer { display: flex; flex-wrap: wrap; gap: .55rem; align-items: center; justify-content: flex-end; margin-top: .65rem; }
.allocation-summary { font-weight: 900; color: var(--muted); margin-right: auto; }
.allocation-summary.allocation-ok { color: #166534; }
.allocation-summary.allocation-error { color: #991b1b; }
@media (max-width: 760px) {
  .employee-card-summary { grid-template-columns: minmax(0, 1fr); }
  .position-allocation-row { grid-template-columns: 1fr; }
  .position-allocation-footer { align-items: stretch; flex-direction: column; }
}

.position-rate-inline { display: inline-flex; align-items: center; gap: .3rem; font-size: .68rem; color: var(--muted); font-weight: 900; }
.position-rate-inline input { width: 5.4rem; padding: .28rem .4rem; border-radius: .55rem; font-size: .72rem; }


/* 20260702-firestore-ui-v6: employee list card collapse, allocation dropdown calculator, and responsive time edit layout */
.card-subtle-summary { display: block; color: var(--muted); font-weight: 850; margin-top: .2rem; }
.employee-list-card.collapsed #employees-list { display: none; }
.employee-flat-card { display: grid; gap: .7rem; }
.employee-flat-head { align-items: flex-start; }
.employee-card-badges { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .4rem; }
.employee-flat-actions { justify-content: flex-end; }
.position-allocation-row { grid-template-columns: minmax(11rem, 1.35fr) minmax(6rem, .6fr) minmax(6rem, .6fr) minmax(5rem, .55fr) auto; }
.position-allocation-row select, .position-allocation-row input { width: 100%; min-width: 0; }
.allocation-row-total { align-self: center; font-weight: 950; color: var(--text); white-space: nowrap; }
.time-session-actions { min-width: 0; }
.time-session-actions .compact-adjust { width: min(34rem, 100%); max-width: 100%; overflow: visible; }
.time-adjust-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .55rem; min-width: 0; }
.time-adjust-grid label { min-width: 0; }
.time-adjust-grid input { width: 100%; min-width: 0; }
.time-adjust-actions { display: flex; flex-wrap: wrap; gap: .45rem; margin-top: .6rem; }
.disabled-setting { opacity: .62; }
@media (max-width: 900px) {
  .employee-time-table-head { display: none; }
  .time-session-row-main { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
  .time-session-actions { grid-column: 1 / -1; justify-content: stretch; }
  .time-session-actions > .btn, .time-session-actions > details { width: 100%; }
}
@media (max-width: 640px) {
  .employee-flat-head { display: grid; gap: .5rem; }
  .employee-card-badges, .employee-flat-actions { justify-content: stretch; }
  .employee-flat-actions .btn { width: 100%; }
  .time-session-row-main, .time-adjust-grid, .position-allocation-row { grid-template-columns: 1fr; }
  .allocation-row-total { justify-self: start; }
}

/* 20260702-firestore-ui-v6-hotfix1: restored correct CSS/JS asset paths in index.html after build query replacement issue. */


/* 20260702-firestore-ui-v6-hotfix2: fixes company record undefined saves and gives time-entry edit controls a full-width responsive action rail. */
.employee-time-table-head,
.time-session-row-main {
  grid-template-columns: minmax(6.2rem,.95fr) minmax(7.2rem,.9fr) minmax(4.8rem,.55fr) minmax(12rem,1.35fr) minmax(8rem,.85fr);
}
.employee-time-table-head span:last-child { display: none; }
.time-session-actions:empty { display: none; }
.time-session-actions {
  grid-column: 1 / -1;
  justify-content: flex-end;
  align-items: stretch;
  width: 100%;
  padding: .65rem;
  border: 1px solid var(--border);
  border-radius: 1rem;
  background: rgba(248,250,252,.72);
}
.time-session-actions > .btn { flex: 0 0 auto; align-self: flex-start; }
.time-session-actions .compact-adjust {
  flex: 1 1 min(100%, 34rem);
  width: 100%;
  min-width: 0;
  max-width: 100%;
}
.time-session-actions .compact-adjust[open] { flex-basis: min(100%, 38rem); }
.time-adjust-panel[open] { overflow: hidden; }
.time-adjust-grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); }
.time-adjust-grid label { display: grid; gap: .35rem; font-weight: 900; color: var(--muted); }
.time-adjust-grid input[type="datetime-local"] { min-height: 2.7rem; font-size: .9rem; line-height: 1.2; }
.time-adjust-actions { align-items: stretch; }
.time-adjust-actions .btn { flex: 1 1 10rem; justify-content: center; }
@media (max-width: 900px) {
  .employee-time-table-head { display: none; }
  .time-session-row-main { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
  .time-session-actions { justify-content: stretch; }
  .time-session-actions > .btn,
  .time-session-actions > details { width: 100%; }
}
@media (max-width: 640px) {
  .time-session-row-main,
  .time-adjust-grid,
  .position-allocation-row { grid-template-columns: 1fr; }
  .time-session-actions { padding: .55rem; }
  .time-adjust-grid { grid-template-columns: 1fr; }
}


/* 20260707-company-departments-access-v7 */
.page-access-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr)); gap: .45rem; margin-top: .35rem; }
.page-access-grid label { display: inline-flex; align-items: center; gap: .4rem; padding: .42rem .52rem; border: 1px solid var(--border); border-radius: .7rem; background: rgba(248,250,252,.86); font-size: .78rem; font-weight: 850; color: var(--ink); }
.page-access-grid input { width: auto; min-width: auto; }
.company-user-access-panel { min-width: min(30rem, 100%); }
.position-no-set-inline { display: inline-flex; align-items: center; gap: .35rem; white-space: nowrap; color: var(--muted); font-weight: 850; font-size: .78rem; }
.position-no-set-inline input { width: auto; min-width: auto; }
.shift-card.work-mode-remote, .employee-shift-card.work-mode-remote { border-color: rgba(234,179,8,.65); background: linear-gradient(180deg, rgba(254,252,232,.94), rgba(255,251,235,.86)); }
.roster-leave-card { border: 1px solid rgba(239,68,68,.35); border-radius: .95rem; background: linear-gradient(180deg, rgba(254,242,242,.96), rgba(255,247,247,.9)); padding: .62rem; box-shadow: 0 8px 18px rgba(127,29,29,.08); }
.roster-leave-card strong, .roster-leave-card small { display: block; overflow-wrap: anywhere; }
.roster-leave-card small { color: #991b1b; font-weight: 850; font-size: .72rem; }
.work-mode-note-pill { display: inline-flex; align-items: center; gap: .25rem; border-radius: 999px; padding: .18rem .45rem; background: rgba(234,179,8,.16); color: #854d0e; font-weight: 900; font-size: .7rem; max-width: 100%; overflow-wrap: anywhere; }
.shift-builder .required-field input, .required-field input { border-color: rgba(245,158,11,.72); box-shadow: 0 0 0 3px rgba(245,158,11,.11); }
.manual-leave-admin { margin-bottom: .85rem; }
.manual-leave-admin .inline-form-grid { margin-top: .75rem; }
.position-allocation-row { grid-template-columns: minmax(11rem, 1.4fr) minmax(6rem, .7fr) minmax(6rem, .7fr) auto; }
.position-allocation-amount, .position-allocation-rate { display: none !important; }
@media (max-width: 760px) {
  .page-access-grid { grid-template-columns: 1fr; }
  .company-user-access-panel { min-width: 0; }
  .position-allocation-row { grid-template-columns: 1fr; }
}

.muted-field { opacity: .7; }
.work-mode-note { display: inline-flex; align-items: center; gap: .25rem; border-radius: 999px; padding: .18rem .45rem; background: rgba(234,179,8,.16); color: #854d0e; font-weight: 900; font-size: .7rem; max-width: 100%; overflow-wrap: anywhere; }

/* 20260714-roster-publish-request-controls-v8 */
.roster-status-stack { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: .35rem; }
.badge.draft { background: rgba(100,116,139,.14); color: #475569; border: 1px solid rgba(100,116,139,.24); }
.badge.published { background: rgba(34,197,94,.14); color: #166534; border: 1px solid rgba(34,197,94,.26); }
.badge.day-off { background: rgba(234,179,8,.18); color: #854d0e; border: 1px solid rgba(234,179,8,.34); }
.shift-card.work-mode-day-off,
.employee-shift-card.work-mode-day-off,
.employee-roster-row.day-off {
  border-color: rgba(234,179,8,.62);
  background: linear-gradient(180deg, rgba(254,249,195,.86), rgba(255,251,235,.92));
}
.shift-card.draft-roster-item { box-shadow: inset 4px 0 0 rgba(100,116,139,.55), 0 10px 24px rgba(15,23,42,.06); }
.shift-card.published-roster-item { box-shadow: inset 4px 0 0 rgba(34,197,94,.55), 0 10px 24px rgba(15,23,42,.06); }
.shift-builder-panel.day-off-mode { border-color: rgba(234,179,8,.45); background: linear-gradient(180deg, rgba(254,252,232,.94), rgba(255,251,235,.9)); }

.department-record-chip { display: inline-flex; flex-wrap: wrap; align-items: center; gap: .45rem; max-width: 100%; }
.department-record-chip strong { overflow-wrap: anywhere; }
.department-sort-inline { display: inline-flex; align-items: center; gap: .3rem; color: var(--muted); font-size: .7rem; font-weight: 900; }
.department-sort-inline input { width: 4.75rem; min-width: 0; padding: .3rem .42rem; border-radius: .55rem; font-size: .72rem; }

.request-type-manager { display: grid; gap: .75rem; }
.request-type-card { display: flex; justify-content: space-between; align-items: center; gap: .8rem; padding: .75rem .85rem; border: 1px solid var(--border); border-radius: 1rem; background: linear-gradient(180deg, rgba(255,255,255,.96), rgba(248,250,252,.9)); }
.request-type-card > div:first-child { display: grid; gap: .16rem; min-width: 0; }
.request-type-card strong { color: var(--text); overflow-wrap: anywhere; }
.request-type-card small { color: var(--muted); font-size: .72rem; font-weight: 850; }
.request-type-card em { color: #4338ca; font-style: normal; font-size: .7rem; font-weight: 900; }
.request-type-card .item-actions { flex: 0 0 auto; }
.request-limit-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .55rem; }
.request-limit-grid label { min-width: 0; }
.request-limit-grid input { width: 100%; min-width: 0; }

.roster-toolbar .inline-actions { min-width: 0; }
.roster-toolbar select,
.roster-toolbar input { width: 100%; min-width: 0; }

@media (max-width: 760px) {
  .roster-status-stack { justify-content: flex-start; }
  .request-type-card { align-items: stretch; flex-direction: column; }
  .request-type-card .item-actions { width: 100%; }
  .request-type-card .item-actions .btn { flex: 1 1 8rem; }
  .request-limit-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .department-record-chip { width: 100%; }
}
@media (max-width: 460px) {
  .request-limit-grid { grid-template-columns: 1fr; }
  .department-sort-inline { width: 100%; justify-content: space-between; }
  .department-sort-inline input { width: 6rem; }
}


/* 20260714-letter-roster-reports-v10 */
.screen-refresh-btn {
  min-height: 2.15rem;
  padding: .42rem .65rem;
  border-color: rgba(100,116,139,.18);
  background: rgba(248,250,252,.68);
  color: #64748b;
  box-shadow: none;
  font-size: .76rem;
}
.screen-refresh-btn:hover { color: var(--text); border-color: rgba(71,85,105,.28); background: rgba(248,250,252,.96); }
.screen-refresh-btn svg { width: .9rem; height: .9rem; }
.screen-header-actions { margin-left: auto; flex: 0 0 auto; }
.page-title > .screen-header-actions { align-self: flex-start; }
.context-editor-placeholder { display: none !important; }

/* Calm roster state accents: retain meaning without flooding the calendar with saturated color. */
.shift-card.work-mode-remote,
.employee-shift-card.work-mode-remote {
  border-color: rgba(202,138,4,.24);
  background: linear-gradient(180deg, rgba(255,255,255,.98), rgba(254,252,232,.42));
}
.roster-leave-card {
  border-color: rgba(220,38,38,.20);
  background: linear-gradient(180deg, rgba(255,255,255,.98), rgba(254,242,242,.46));
  box-shadow: 0 6px 14px rgba(127,29,29,.035);
}
.roster-leave-card small { color: #7f1d1d; }
.work-mode-note-pill,
.work-mode-note { background: rgba(234,179,8,.09); color: #713f12; }
.badge.draft { background: rgba(100,116,139,.09); border-color: rgba(100,116,139,.16); }
.badge.published { background: rgba(34,197,94,.08); color: #166534; border-color: rgba(34,197,94,.16); }
.badge.day-off { background: rgba(234,179,8,.09); color: #713f12; border-color: rgba(234,179,8,.18); }
.shift-card.work-mode-day-off,
.employee-shift-card.work-mode-day-off,
.employee-roster-row.day-off {
  border-color: rgba(202,138,4,.24);
  background: linear-gradient(180deg, rgba(255,255,255,.98), rgba(254,249,195,.34));
}
.shift-card.draft-roster-item { box-shadow: inset 3px 0 0 rgba(100,116,139,.28), 0 8px 18px rgba(15,23,42,.045); }
.shift-card.published-roster-item { box-shadow: inset 3px 0 0 rgba(34,197,94,.28), 0 8px 18px rgba(15,23,42,.045); }
.shift-builder-panel.day-off-mode { border-color: rgba(202,138,4,.22); background: linear-gradient(180deg, rgba(255,255,255,.98), rgba(254,252,232,.42)); }

@media (max-width: 720px) {
  .screen-header-actions { width: 100%; justify-content: flex-start; }
  .screen-refresh-btn { flex: 0 0 auto; }
}


/* 20260715-roster-time-location-v11 */
/* Dashboard active list */
.stat-card-button {
  appearance: none;
  width: 100%;
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
  transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease, background .16s ease;
}
.stat-card-button:hover,
.stat-card-button:focus-visible {
  transform: translateY(-1px);
  border-color: rgba(79,70,229,.32);
  box-shadow: 0 12px 28px rgba(15,23,42,.09);
  outline: none;
}
.stat-card-button small { color: var(--muted); font-size: .68rem; font-weight: 850; }
.active-shift-summary-modal,
.time-entry-editor-modal {
  position: fixed;
  inset: 0;
  z-index: 160;
  display: grid;
  place-items: center;
  padding: 1rem;
  background: rgba(15,23,42,.48);
  backdrop-filter: blur(4px);
  overflow: auto;
}
.active-shift-summary-card,
.time-entry-editor-card {
  width: min(100%, 48rem);
  max-height: min(88vh, 50rem);
  overflow: auto;
  border: 1px solid rgba(148,163,184,.34);
  border-radius: 1.25rem;
  background: #fff;
  box-shadow: 0 28px 90px rgba(15,23,42,.28);
}
.active-shift-summary-card > header,
.time-entry-editor-head {
  position: sticky;
  top: 0;
  z-index: 2;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 1.05rem;
  border-bottom: 1px solid var(--border);
  background: rgba(255,255,255,.96);
  backdrop-filter: blur(10px);
}
.active-shift-summary-card h3,
.active-shift-summary-card p { margin: 0; }
.active-shift-summary-card h3 { display: flex; align-items: center; gap: .45rem; }
.active-shift-summary-card p { margin-top: .25rem; color: var(--muted); font-size: .8rem; font-weight: 750; }
.active-shift-summary-list { display: grid; gap: .55rem; padding: .85rem 1rem 1rem; }
.active-shift-summary-list article {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: .8rem;
  align-items: center;
  padding: .75rem .8rem;
  border: 1px solid var(--border);
  border-radius: .95rem;
  background: rgba(248,250,252,.75);
}
.active-shift-summary-list strong,
.active-shift-summary-list small { display: block; overflow-wrap: anywhere; }
.active-shift-summary-list small { margin-top: .12rem; color: var(--muted); font-size: .75rem; font-weight: 800; }
.active-shift-time { text-align: right; }
.active-shift-time span { display: block; margin-top: .12rem; color: var(--muted); font-size: .72rem; font-weight: 850; }

/* Employee profile: assigned clock locations */
#roster-additional-locations {
  min-height: 8.6rem;
  padding: .45rem;
  line-height: 1.35;
}
#roster-additional-locations option { padding: .42rem .5rem; border-radius: .45rem; }
#roster-additional-locations option:checked { background: linear-gradient(135deg, #e0e7ff, #eef2ff); color: #312e81; }

/* Request source groups */
.requests-split-card { display: grid; gap: .75rem; }
.request-source-section {
  border: 1px solid var(--border);
  border-radius: 1rem;
  background: rgba(248,250,252,.62);
  overflow: hidden;
}
.request-source-section > summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  padding: .8rem .9rem;
  background: rgba(255,255,255,.82);
  font-weight: 900;
}
.request-source-section > summary::-webkit-details-marker { display: none; }
.request-source-section > summary > span { display: inline-flex; align-items: center; gap: .45rem; min-width: 0; }
.request-source-section > summary small { color: var(--muted); font-size: .72rem; font-weight: 900; white-space: nowrap; }
.request-source-section[open] > summary { border-bottom: 1px solid var(--border); }
.request-source-section > .list-stack,
.manual-request-section-body { padding: .75rem; }
.manual-request-section-body { display: grid; gap: .75rem; }

/* Backend roster compact and matrix layouts. Both reuse the loaded roster week. */
.roster-layout-compact { display: grid; gap: .5rem; }
.compact-roster-row {
  display: grid;
  grid-template-columns: minmax(10rem, 1.1fr) minmax(5.5rem, .55fr) minmax(12rem, 1.5fr) auto;
  gap: .7rem;
  align-items: center;
  min-width: 0;
  padding: .62rem .72rem;
  border: 1px solid var(--border);
  border-radius: .9rem;
  background: #fff;
  box-shadow: 0 6px 16px rgba(15,23,42,.035);
}
.compact-roster-row.request { border-color: rgba(220,38,38,.18); background: rgba(254,242,242,.38); }
.compact-roster-row.day-off { border-color: rgba(202,138,4,.20); background: rgba(254,252,232,.46); }
.compact-roster-row.draft { box-shadow: inset 3px 0 0 rgba(100,116,139,.28), 0 6px 16px rgba(15,23,42,.035); }
.compact-roster-person,
.compact-roster-detail { display: grid; gap: .08rem; min-width: 0; }
.compact-roster-person strong,
.compact-roster-detail strong,
.compact-roster-person small,
.compact-roster-detail small { min-width: 0; overflow-wrap: anywhere; }
.compact-roster-person small,
.compact-roster-detail small { color: var(--muted); font-size: .72rem; font-weight: 800; }
.compact-roster-time { font-weight: 950; color: #334155; white-space: nowrap; }
.roster-layout-matrix { display: block; width: 100%; overflow-x: auto; padding-bottom: .35rem; scrollbar-gutter: stable; }
.screen-roster-matrix { min-width: 70rem; border: 1px solid var(--border); border-radius: 1rem; overflow: hidden; background: #fff; }
.screen-roster-matrix-head,
.screen-roster-matrix-row { display: grid; grid-template-columns: minmax(12.5rem, 1.15fr) repeat(7, minmax(7.25rem, 1fr)); }
.screen-roster-matrix-head { position: sticky; top: 0; z-index: 3; background: #f8fafc; border-bottom: 1px solid var(--border); }
.screen-roster-matrix-head > span,
.screen-roster-matrix-head > button {
  min-height: 3.2rem;
  padding: .55rem .6rem;
  border: 0;
  border-right: 1px solid var(--border);
  background: transparent;
  color: var(--text);
  text-align: left;
  font: inherit;
}
.screen-roster-matrix-head > span { display: flex; align-items: center; font-size: .72rem; font-weight: 950; text-transform: uppercase; letter-spacing: .045em; }
.screen-roster-matrix-head > button { cursor: pointer; display: grid; align-content: center; gap: .08rem; }
.screen-roster-matrix-head > button:hover { background: #eef2ff; }
.screen-roster-matrix-head strong { font-size: .76rem; }
.screen-roster-matrix-head small { color: var(--muted); font-size: .66rem; font-weight: 800; }
.screen-roster-matrix-row { border-bottom: 1px solid var(--border); }
.screen-roster-matrix-row:last-child { border-bottom: 0; }
.matrix-employee,
.matrix-day-cell { min-width: 0; padding: .42rem; border-right: 1px solid var(--border); }
.matrix-employee { display: grid; align-content: center; gap: .08rem; background: rgba(248,250,252,.72); }
.matrix-employee strong,
.matrix-employee small { overflow-wrap: anywhere; }
.matrix-employee small { color: var(--muted); font-size: .68rem; font-weight: 800; }
.matrix-day-cell { display: grid; align-content: start; gap: .28rem; min-height: 4.3rem; background: #fff; }
.matrix-roster-block {
  display: grid;
  gap: .04rem;
  padding: .34rem .4rem;
  border: 1px solid rgba(148,163,184,.2);
  border-left: 3px solid rgba(79,70,229,.38);
  border-radius: .58rem;
  background: rgba(238,242,255,.58);
  color: #27324a;
  text-align: left;
  cursor: pointer;
}
.matrix-roster-block.request { border-left-color: rgba(220,38,38,.38); background: rgba(254,242,242,.48); }
.matrix-roster-block.day-off { border-left-color: rgba(202,138,4,.36); background: rgba(254,252,232,.52); }
.matrix-roster-block strong { font-size: .69rem; overflow-wrap: anywhere; }
.matrix-roster-block span,
.matrix-roster-block small { color: var(--muted); font-size: .61rem; font-weight: 800; overflow-wrap: anywhere; }

/* Time entry navigation: times always visible, icon actions at row end, editor in a responsive modal. */
.employee-time-group.always-open { overflow: hidden; }
.employee-time-group-head {
  display: grid;
  grid-template-columns: minmax(12rem, 1fr) minmax(0, 3fr);
  gap: 1rem;
  align-items: center;
  padding: .9rem 1rem;
  border-bottom: 1px solid var(--border);
  background: linear-gradient(135deg, rgba(15,23,42,.028), rgba(37,99,235,.045));
}
.employee-time-group.alt .employee-time-group-head { background: linear-gradient(135deg, rgba(2,6,23,.04), rgba(79,70,229,.055)); }
.employee-time-table-head,
.time-session-row-main.compact-visible-times {
  grid-template-columns: minmax(6.2rem,.72fr) minmax(5.7rem,.62fr) minmax(5.7rem,.62fr) minmax(4.6rem,.48fr) minmax(12rem,1.6fr) minmax(7.5rem,.82fr) minmax(4.8rem,.42fr);
  gap: .55rem;
  align-items: center;
}
.time-session-row-main.compact-visible-times { display: grid; }
.time-clock-value { display: grid; gap: .08rem; min-width: 0; }
.time-clock-value strong { color: var(--text); font-size: .88rem; white-space: nowrap; }
.time-clock-value small { color: var(--muted); font-size: .62rem; font-weight: 900; text-transform: uppercase; letter-spacing: .035em; }
.time-clock-value.missing strong { color: #b91c1c; }
.time-session-actions.icon-actions {
  grid-column: auto;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: .28rem;
  width: auto;
  min-width: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}
.entry-action-icon { flex: 0 0 auto; width: 2.15rem; height: 2.15rem; }
.entry-action-icon.approve { color: #166534; background: rgba(220,252,231,.75); border-color: rgba(34,197,94,.28); }
.entry-approved-icon { display: inline-grid; place-items: center; width: 2.15rem; height: 2.15rem; color: #15803d; }
.entry-approved-icon svg { width: 1.15rem; height: 1.15rem; }
.time-entry-editor-card { width: min(100%, 47rem); padding-bottom: .9rem; }
.time-entry-editor-head strong,
.time-entry-editor-head small { display: block; overflow-wrap: anywhere; }
.time-entry-editor-head small { margin-top: .15rem; color: var(--muted); font-size: .76rem; font-weight: 800; }
.time-entry-editor-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .75rem;
  padding: 1rem;
}
.time-entry-editor-grid label { display: grid; gap: .35rem; min-width: 0; font-weight: 900; color: #334155; }
.time-entry-editor-grid label small { color: var(--muted); font-size: .7rem; font-weight: 750; }
.time-entry-editor-grid input { width: 100%; min-width: 0; }
.time-entry-editor-grid .wide-field { grid-column: 1 / -1; }
.time-entry-editor-actions { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: .55rem; padding: 0 1rem .65rem; }
.time-entry-editor-card > .tiny-help { margin: 0 1rem; }
.manual-time-entry-panel { margin-bottom: .85rem; }
.manual-time-entry-panel .button-row { margin-top: .7rem; }

@media (max-width: 980px) {
  .employee-time-group-head { grid-template-columns: 1fr; }
  .employee-time-table-head { display: none; }
  .time-session-row-main.compact-visible-times { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
  .time-session-row-main.compact-visible-times > .time-position-cell,
  .time-session-row-main.compact-visible-times > .badge,
  .time-session-row-main.compact-visible-times > .time-session-actions { grid-column: 1 / -1; }
  .time-session-actions.icon-actions { justify-content: flex-start; }
  .compact-roster-row { grid-template-columns: minmax(9rem, 1fr) minmax(5.2rem, auto) minmax(0, 1.4fr) auto; }
}
@media (max-width: 680px) {
  .active-shift-summary-modal,
  .time-entry-editor-modal { padding: .45rem; align-items: end; }
  .active-shift-summary-card,
  .time-entry-editor-card { max-height: 94vh; border-radius: 1rem 1rem .65rem .65rem; }
  .active-shift-summary-list article { grid-template-columns: 1fr; }
  .active-shift-time { text-align: left; }
  .compact-roster-row { grid-template-columns: 1fr auto; }
  .compact-roster-time { grid-column: 2; grid-row: 1; }
  .compact-roster-detail { grid-column: 1 / -1; }
  .compact-roster-row > .roster-action-btn { grid-column: 2; grid-row: 2; }
  .time-entry-editor-grid { grid-template-columns: 1fr; }
  .time-entry-editor-grid .wide-field { grid-column: auto; }
  .time-entry-editor-actions { display: grid; grid-template-columns: 1fr; }
  .time-entry-editor-actions .btn { width: 100%; justify-content: center; }
}
@media (max-width: 560px) {
  .time-session-row-main.compact-visible-times { grid-template-columns: 1fr; }
  .time-session-row-main.compact-visible-times > * { grid-column: auto !important; }
  .time-session-actions.icon-actions { justify-content: flex-start; }
  .request-source-section > summary { align-items: flex-start; }
  .request-source-section > summary small { white-space: normal; text-align: right; }
}


/* 20260715-settings-time-collapse-v11-1 */
#toggle-time-entry-collapse[aria-pressed="true"] {
  color: #3730a3;
  border-color: rgba(79,70,229,.3);
  background: rgba(238,242,255,.86);
}
.employee-time-summary-mode { display: grid; gap: .72rem; }
.employee-time-group.collapsed-summary { box-shadow: 0 5px 16px rgba(15,23,42,.035); }
.employee-time-group.collapsed-summary .employee-time-group-head { padding: .68rem .8rem; gap: .65rem; }
.employee-time-group.collapsed-summary .employee-time-stats span { padding: .42rem .52rem; }
.employee-time-group.collapsed-summary .employee-time-table { gap: .35rem; padding: .45rem; }
.employee-time-group.collapsed-summary .time-session-row.summary-only {
  padding: .48rem .58rem;
  gap: 0;
  border-radius: .72rem;
}
.employee-time-group.collapsed-summary .time-session-row.summary-only.needs-review { border-color: rgba(245,158,11,.38); background: rgba(255,251,235,.62); }
.employee-time-group.collapsed-summary .time-session-row.summary-only .badge { font-size: .68rem; }
.employee-time-group.collapsed-summary .time-session-row.summary-only .entry-action-icon,
.employee-time-group.collapsed-summary .time-session-row.summary-only .entry-approved-icon { width: 1.9rem; height: 1.9rem; }
@media (max-width: 980px) {
  .employee-time-group.collapsed-summary .employee-time-group-head { grid-template-columns: 1fr; }
}


/* GeoPunch v12: compact roster actions, editable records, dashboard summaries, dark mode */
.weekday-availability-field{border:1px solid var(--border,#d8dee9);border-radius:14px;padding:12px;margin:0}.weekday-availability-field legend{font-weight:800;padding:0 6px}.weekday-check-grid{display:grid;grid-template-columns:repeat(7,minmax(44px,1fr));gap:7px}.weekday-check-grid label{display:flex;align-items:center;justify-content:center;gap:5px;padding:8px 5px;border:1px solid var(--border,#d8dee9);border-radius:10px;background:var(--surface-soft,#f8fafc)}
.company-record-edit-row{display:grid;grid-template-columns:minmax(100px,.75fr) minmax(150px,1.2fr) minmax(180px,1.5fr) auto;gap:8px;align-items:end;padding:10px;border:1px solid var(--border,#e2e8f0);border-radius:12px;background:var(--surface-soft,#f8fafc)}.company-record-edit-row.position-record-row{grid-template-columns:minmax(90px,.65fr) minmax(140px,1.1fr) minmax(100px,.7fr) minmax(90px,.6fr) minmax(170px,1.35fr) auto}.company-record-edit-row input,.company-record-edit-row select{width:100%}.record-row-actions{display:flex;gap:5px;align-items:center}
.matrix-shift-wrap{position:relative;min-width:0}.matrix-mini-actions{position:absolute;right:2px;top:2px;display:flex;gap:2px;z-index:2}.matrix-mini-actions .icon-btn{width:22px;height:22px;min-width:22px;padding:0;background:rgba(255,255,255,.88);border:1px solid rgba(15,23,42,.12)}.matrix-shift-wrap .screen-roster-matrix-block{padding-right:48px;width:100%}.compact-roster-actions{display:flex;gap:4px;margin-left:auto}.compact-roster-actions .icon-btn{width:28px;height:28px;min-width:28px}
.dashboard-summary-modal{position:fixed;inset:0;background:rgba(15,23,42,.48);display:grid;place-items:center;padding:18px;z-index:10050}.dashboard-summary-card{width:min(760px,96vw);max-height:88vh;overflow:auto;background:var(--surface,#fff);color:var(--text,#0f172a);border-radius:18px;box-shadow:0 24px 70px rgba(15,23,42,.28);padding:18px}.dashboard-summary-head{display:flex;justify-content:space-between;gap:12px;align-items:flex-start;margin-bottom:14px}.dashboard-summary-list{display:grid;gap:8px}.dashboard-summary-item{display:grid;grid-template-columns:minmax(140px,1fr) minmax(120px,.7fr) auto;gap:10px;align-items:center;padding:9px 10px;border:1px solid var(--border,#e2e8f0);border-radius:11px;background:var(--surface-soft,#f8fafc)}
#report-job-filter-label.hidden{display:none!important}.owner-backup-card .settings-note{margin-bottom:12px}
@media(max-width:800px){.weekday-check-grid{grid-template-columns:repeat(4,1fr)}.company-record-edit-row,.company-record-edit-row.position-record-row{grid-template-columns:1fr 1fr}.record-row-actions{grid-column:1/-1}.dashboard-summary-item{grid-template-columns:1fr}}

/* Employee Excel import preview v14 */
.import-preview-overlay{position:fixed;inset:0;z-index:12000;background:rgba(15,23,42,.62);backdrop-filter:blur(5px);display:grid;place-items:center;padding:20px}.import-preview-dialog{width:min(980px,96vw);max-height:92vh;background:var(--panel,#fff);color:var(--text,#172033);border-radius:22px;box-shadow:0 28px 90px rgba(15,23,42,.32);display:flex;flex-direction:column;overflow:hidden}.import-preview-header,.import-preview-footer{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:20px 24px;border-bottom:1px solid var(--border,#e5e7eb)}.import-preview-header h3{margin:2px 0 4px}.import-preview-header p{margin:0;color:var(--muted,#64748b)}.import-preview-footer{border-top:1px solid var(--border,#e5e7eb);border-bottom:0;justify-content:flex-end}.import-preview-summary{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;padding:14px 24px;background:var(--panel-soft,#f8fafc)}.import-preview-summary>div{padding:12px;border-radius:14px;background:var(--panel,#fff);text-align:center}.import-preview-summary strong{display:block;font-size:1.35rem}.import-preview-summary span{font-size:.78rem;color:var(--muted,#64748b)}.import-preview-summary .has-errors{background:#fff1f2;color:#9f1239}.import-preview-body{overflow:auto;padding:18px 24px}.import-preview-list{display:grid;gap:12px}.import-preview-row{border:1px solid var(--border,#e5e7eb);border-radius:16px;padding:14px}.import-preview-row.update{border-left:4px solid #2563eb}.import-preview-row.create{border-left:4px solid #16a34a}.import-preview-row-head{display:flex;justify-content:space-between;gap:12px}.import-preview-row-head span{font-size:.76rem;font-weight:800;text-transform:uppercase}.import-preview-person{color:var(--muted,#64748b);font-size:.9rem;margin-top:3px}.import-preview-row ul{list-style:none;padding:0;margin:10px 0 0;display:grid;gap:6px}.import-preview-row li{display:grid;grid-template-columns:minmax(120px,.7fr) 1fr 18px 1fr;align-items:center;gap:8px;font-size:.83rem;padding:7px 9px;background:var(--panel-soft,#f8fafc);border-radius:9px}.import-preview-row li svg{width:15px}.import-preview-errors{margin-top:18px;padding:14px;border-radius:14px;background:#fff1f2;color:#881337}.import-preview-errors h4{margin:0 0 9px}.import-preview-errors div{display:grid;grid-template-columns:150px 1fr;gap:8px;padding:6px 0;border-top:1px solid rgba(190,18,60,.12)}@media(max-width:700px){.import-preview-overlay{padding:8px}.import-preview-dialog{max-height:96vh;border-radius:16px}.import-preview-summary{grid-template-columns:repeat(2,1fr);padding:12px}.import-preview-header,.import-preview-footer,.import-preview-body{padding:14px}.import-preview-row li{grid-template-columns:1fr}.import-preview-row li svg{display:none}.import-preview-errors div{grid-template-columns:1fr}}


/* 20260719-employee-onboarding-publish-qol-v16 */
.roster-publish-legend{display:flex;flex-wrap:wrap;gap:.55rem;align-items:center;margin:.25rem 0 .75rem;padding:.5rem .65rem;border:1px solid var(--border);border-radius:.8rem;background:rgba(248,250,252,.72)}
.roster-legend-item{display:inline-flex;align-items:center;gap:.38rem;color:var(--muted);font-size:.72rem;font-weight:850}.roster-legend-item>span{display:grid;gap:.02rem}.roster-legend-item strong{font-size:.72rem;color:currentColor}.roster-legend-item small{font-size:.66rem;color:currentColor}.roster-legend-item i{width:.68rem;height:.68rem;border-radius:999px;border:2px solid currentColor}.roster-legend-item.draft{color:#b91c1c}.roster-legend-item.published{color:#15803d}
.shift-card.draft-roster-item{border-color:rgba(220,38,38,.48)!important;box-shadow:inset 4px 0 0 rgba(220,38,38,.62),0 8px 18px rgba(15,23,42,.045)!important}.shift-card.published-roster-item{border-color:rgba(22,163,74,.42)!important;box-shadow:inset 4px 0 0 rgba(22,163,74,.58),0 8px 18px rgba(15,23,42,.045)!important}
.compact-roster-row.draft{border-color:rgba(220,38,38,.48)!important;box-shadow:inset 4px 0 0 rgba(220,38,38,.62),0 6px 16px rgba(15,23,42,.035)!important}.compact-roster-row.published{border-color:rgba(22,163,74,.38);box-shadow:inset 4px 0 0 rgba(22,163,74,.52),0 6px 16px rgba(15,23,42,.035)}
.browser-recommendation{display:flex;gap:.7rem;align-items:flex-start;margin:.8rem 0;padding:.8rem;border:1px solid rgba(37,99,235,.2);border-radius:1rem;background:rgba(239,246,255,.72)}.browser-recommendation>svg{width:1.35rem;height:1.35rem;flex:0 0 auto;color:#2563eb}.browser-recommendation strong,.browser-recommendation small{display:block}.browser-recommendation small{margin-top:.18rem;color:var(--muted);line-height:1.4}
.device-reset-under-map{display:flex;justify-content:space-between;align-items:center;gap:.8rem;margin-top:.7rem;padding:.72rem .8rem;border:1px dashed rgba(100,116,139,.35);border-radius:.9rem;background:rgba(248,250,252,.65)}.device-reset-under-map>div{display:grid;gap:.12rem}.device-reset-under-map small{color:var(--muted);line-height:1.35}
.request-type-card.system-request-type{border-color:rgba(37,99,235,.22);background:linear-gradient(180deg,rgba(239,246,255,.78),rgba(248,250,252,.92))}
.employee-onboarding-modal{position:fixed;inset:0;z-index:13000;display:grid;place-items:center;padding:max(1rem,env(safe-area-inset-top)) 1rem max(1rem,env(safe-area-inset-bottom));background:rgba(0,0,0,.7);backdrop-filter:blur(7px)}.employee-onboarding-modal.hidden{display:none}.employee-onboarding-card{width:min(46rem,96vw);max-height:92vh;overflow:auto;border:1px solid var(--border);border-radius:1.45rem;background:var(--surface,#fff);color:var(--text,#0f172a);box-shadow:0 30px 90px rgba(0,0,0,.42)}.employee-onboarding-head{display:flex;justify-content:space-between;align-items:flex-start;gap:1rem;padding:1.25rem 1.35rem 1rem}.employee-onboarding-head h2{margin:.2rem 0 0;font-size:clamp(1.35rem,3vw,1.9rem)}.employee-onboarding-progress{height:.34rem;background:var(--surface-soft,#e2e8f0);overflow:hidden}.employee-onboarding-progress span{display:block;height:100%;width:0;background:linear-gradient(90deg,#2563eb,#4f46e5);transition:width .25s ease}.employee-onboarding-body{padding:1.25rem 1.35rem;line-height:1.6}.employee-onboarding-body p{margin:.45rem 0 .85rem}.employee-onboarding-body ol{margin:.55rem 0 .85rem;padding-left:1.35rem}.employee-onboarding-body li{margin:.32rem 0}.employee-onboarding-icon{display:grid;place-items:center;width:3.2rem;height:3.2rem;margin-bottom:.8rem;border-radius:1rem;background:rgba(37,99,235,.12);color:#2563eb}.employee-onboarding-icon svg{width:1.65rem;height:1.65rem}.employee-onboarding-actions{display:flex;justify-content:space-between;align-items:center;gap:.8rem;padding:1rem 1.35rem 1.25rem;border-top:1px solid var(--border)}.onboarding-callout{display:flex;gap:.7rem;align-items:flex-start;padding:.78rem;border-radius:.9rem;border:1px solid rgba(37,99,235,.18);background:rgba(239,246,255,.72)}.onboarding-callout.warning{border-color:rgba(245,158,11,.25);background:rgba(255,251,235,.74)}.onboarding-callout svg{width:1.2rem;height:1.2rem;flex:0 0 auto}.onboarding-callout strong,.onboarding-callout span{display:block}.onboarding-callout span{color:var(--muted);font-size:.84rem;line-height:1.4}.onboarding-checklist{display:grid;gap:.5rem;margin-top:.9rem}.onboarding-checklist span{display:flex;align-items:center;gap:.5rem;font-weight:800}.onboarding-checklist svg{width:1rem;height:1rem;color:#16a34a}
@media(max-width:680px){.device-reset-under-map,.employee-onboarding-actions{align-items:stretch;flex-direction:column}.device-reset-under-map .btn,.employee-onboarding-actions>.btn,.employee-onboarding-actions>.button-row{width:100%}.employee-onboarding-actions>.button-row .btn{flex:1}.employee-onboarding-card{border-radius:1rem}.employee-onboarding-head,.employee-onboarding-body,.employee-onboarding-actions{padding-left:1rem;padding-right:1rem}}

/* True-black, high-contrast dark mode. */
body.dark-mode{color-scheme:dark;--bg:#000;--surface:#080808;--surface-soft:#111;--surface-strong:#181818;--panel:#080808;--panel-soft:#111;--card:#080808;--text:#fff;--ink:#fff;--muted:#c4c9d2;--border:#333;--border-strong:#4a4a4a;--primary:#818cf8;--primary-strong:#a5b4fc;--danger:#fb7185;--success:#4ade80;background:#000!important;color:#fff!important}
body.dark-mode .bg-decor{opacity:.08}body.dark-mode .app-header{background:rgba(0,0,0,.96)!important;border-color:#282828!important}body.dark-mode .brand-text h1,body.dark-mode h1,body.dark-mode h2,body.dark-mode h3,body.dark-mode h4,body.dark-mode strong,body.dark-mode label,body.dark-mode legend{color:#fff}
body.dark-mode .card,body.dark-mode .stat-card,body.dark-mode .context-editor-open,body.dark-mode .time-entry-editor-card,body.dark-mode .dashboard-summary-card,body.dark-mode .employee-onboarding-card,body.dark-mode .import-preview-dialog,body.dark-mode .station-photo-modal-card{background:#080808!important;color:#fff!important;border-color:#333!important;box-shadow:0 18px 48px rgba(0,0,0,.72)}
body.dark-mode input,body.dark-mode select,body.dark-mode textarea{background:#050505!important;color:#fff!important;border-color:#4a4a4a!important}body.dark-mode input::placeholder,body.dark-mode textarea::placeholder{color:#8d94a1}body.dark-mode option{background:#050505;color:#fff}
body.dark-mode .list-item,body.dark-mode .item-card,body.dark-mode .settings-note,body.dark-mode .company-record-edit-row,body.dark-mode .dashboard-summary-item,body.dark-mode .weekday-check-grid label,body.dark-mode .request-type-card,body.dark-mode .request-source-section,body.dark-mode .employee-time-group,body.dark-mode .time-session-row,body.dark-mode .employee-roster-day,body.dark-mode .setup-status-row,body.dark-mode .trusted-device-panel,body.dark-mode .push-notification-panel,body.dark-mode .device-reset-under-map,body.dark-mode .roster-publish-legend{background:#111!important;color:#fff!important;border-color:#343434!important}
body.dark-mode .muted-text,body.dark-mode .tiny-help,body.dark-mode small,body.dark-mode p,body.dark-mode .field-help,body.dark-mode .matrix-roster-block span,body.dark-mode .matrix-roster-block small{color:#c4c9d2!important}
body.dark-mode .btn.secondary,body.dark-mode .btn.ghost,body.dark-mode .icon-btn,body.dark-mode .nav-btn{background:#151515!important;color:#f8fafc!important;border-color:#444!important}body.dark-mode .btn.secondary:hover,body.dark-mode .btn.ghost:hover,body.dark-mode .icon-btn:hover,body.dark-mode .nav-btn:hover{background:#232323!important;border-color:#666!important}body.dark-mode .btn.primary{background:#6366f1!important;color:#fff!important;border-color:#818cf8!important}
body.dark-mode .screen-roster-matrix,body.dark-mode .screen-roster-matrix-head,body.dark-mode .screen-roster-matrix-row,body.dark-mode .matrix-day-cell,body.dark-mode .matrix-employee{background:#080808!important;border-color:#333!important}body.dark-mode .screen-roster-matrix-head>button:hover{background:#191919!important}body.dark-mode .matrix-roster-block{background:#151515;color:#fff;border-color:#3a3a3a}body.dark-mode .matrix-roster-block.request{background:#1a0b0d!important;border-left-color:#fb7185!important}
body.dark-mode .shift-card,body.dark-mode .compact-roster-row{background:#0e0e0e!important;color:#fff;border-color:#343434}body.dark-mode .shift-card.published-roster-item,body.dark-mode .compact-roster-row.published{border-color:#24783b!important}body.dark-mode .shift-card.draft-roster-item,body.dark-mode .compact-roster-row.draft{border-color:#8c2f3c!important}
body.dark-mode .trusted-device-panel.verified{background:#07170c!important;border-color:#24783b!important}body.dark-mode .trusted-device-panel.pending{background:#1b1507!important;border-color:#8a6b1f!important}body.dark-mode .trusted-device-panel.blocked{background:#1b080b!important;border-color:#8c2f3c!important}
body.dark-mode .employee-onboarding-progress,body.dark-mode .import-preview-summary{background:#151515!important}body.dark-mode .onboarding-callout,body.dark-mode .browser-recommendation{background:#0b1424!important;border-color:#284468!important}body.dark-mode .onboarding-callout.warning{background:#1b1507!important;border-color:#72591f!important}body.dark-mode .employee-onboarding-icon{background:#17172a;color:#a5b4fc}
body.dark-mode .badge.published,body.dark-mode .badge.active,body.dark-mode .roster-legend-item.published{color:#86efac!important}body.dark-mode .badge.draft,body.dark-mode .roster-legend-item.draft{color:#fda4af!important}body.dark-mode .badge.day-off{color:#fde68a!important}body.dark-mode a{color:#a5b4fc}
body.dark-mode .geo-map{border-color:#444;background:#111}body.dark-mode .maplibregl-popup-content{background:#090909;color:#fff;border:1px solid #444}body.dark-mode .matrix-mini-actions .icon-btn{background:rgba(8,8,8,.94)!important;color:#fff!important;border-color:#4a4a4a!important}
/* v16.2 — v13 matrix shift blocks with publication status on the day cell. */
.matrix-day-cell.has-draft-shift {
  background: rgba(254, 226, 226, .62);
}
.matrix-day-cell.all-published-shifts {
  background: rgba(220, 252, 231, .58);
}
.matrix-day-cell.has-draft-shift .matrix-roster-block,
.matrix-day-cell.all-published-shifts .matrix-roster-block {
  /* Preserve the original v13 shift-block surface and work-mode styling. */
  border-color: rgba(148,163,184,.2);
  border-left-color: rgba(79,70,229,.38);
  background: rgba(238,242,255,.58);
}
.matrix-day-cell.has-draft-shift .matrix-roster-block.request,
.matrix-day-cell.all-published-shifts .matrix-roster-block.request {
  border-left-color: rgba(220,38,38,.38);
  background: rgba(254,242,242,.48);
}
.matrix-day-cell.has-draft-shift .matrix-roster-block.day-off,
.matrix-day-cell.all-published-shifts .matrix-roster-block.day-off {
  border-left-color: rgba(202,138,4,.36);
  background: rgba(254,252,232,.52);
}
body.dark-mode .matrix-day-cell.has-draft-shift {
  background: #1b0b0d !important;
}
body.dark-mode .matrix-day-cell.all-published-shifts {
  background: #08170d !important;
}
body.dark-mode .matrix-day-cell.has-draft-shift .matrix-roster-block,
body.dark-mode .matrix-day-cell.all-published-shifts .matrix-roster-block {
  background: #151515 !important;
  color: #fff !important;
  border-color: #3a3a3a !important;
  border-left-color: #818cf8 !important;
}
body.dark-mode .matrix-day-cell.has-draft-shift .matrix-roster-block.request,
body.dark-mode .matrix-day-cell.all-published-shifts .matrix-roster-block.request {
  background: #1a0b0d !important;
  border-left-color: #fb7185 !important;
}
body.dark-mode .matrix-day-cell.has-draft-shift .matrix-roster-block.day-off,
body.dark-mode .matrix-day-cell.all-published-shifts .matrix-roster-block.day-off {
  background: #1a1608 !important;
  border-left-color: #facc15 !important;
}



/* v17 — compact roster scaling and safe matrix text truncation. */
.compact-roster-row {
  width: 100%;
  box-sizing: border-box;
  grid-template-columns: minmax(0, 1.15fr) minmax(5.4rem, .52fr) minmax(0, 1.45fr) max-content;
  gap: clamp(.42rem, 1vw, .72rem);
  overflow: hidden;
}
.compact-roster-person,
.compact-roster-detail { overflow: hidden; }
.compact-roster-person strong,
.compact-roster-person small,
.compact-roster-detail strong,
.compact-roster-detail small {
  display: block;
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  overflow-wrap: normal;
}
.compact-roster-time {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: clamp(.72rem, 1.25vw, .86rem);
}
.compact-roster-actions {
  min-width: max-content;
  justify-self: end;
  align-self: center;
}
.compact-roster-row > .roster-action-btn { justify-self: end; }
.matrix-employee strong,
.matrix-employee small,
.matrix-roster-block strong,
.matrix-roster-block span,
.matrix-roster-block small {
  display: block;
  min-width: 0;
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  overflow-wrap: normal;
}
.matrix-roster-block,
.matrix-shift-wrap { max-width: 100%; overflow: hidden; }

@media (max-width: 980px) {
  .compact-roster-row { grid-template-columns: minmax(0, 1fr) minmax(5.2rem, auto) minmax(0, 1.15fr) max-content; }
}
@media (max-width: 760px) {
  .compact-roster-row { grid-template-columns: minmax(0, 1fr) auto; align-items: start; }
  .compact-roster-person { grid-column: 1; grid-row: 1; }
  .compact-roster-time { grid-column: 2; grid-row: 1; max-width: 7rem; text-align: right; }
  .compact-roster-detail { grid-column: 1; grid-row: 2; }
  .compact-roster-actions,
  .compact-roster-row > .roster-action-btn { grid-column: 2; grid-row: 2; align-self: center; }
}
@media (max-width: 480px) {
  .compact-roster-row { padding: .56rem .6rem; }
  .compact-roster-person strong { font-size: .86rem; }
  .compact-roster-detail strong { font-size: .78rem; }
  .compact-roster-actions { gap: 2px; }
  .compact-roster-actions .icon-btn { width: 26px; height: 26px; min-width: 26px; }
}

/* v17.2 — responsive spotlight walkthrough. Uses the visual viewport, a scrollable body,
   and fixed header/actions so the guide remains usable on phones, tablets, and desktops. */
.employee-onboarding-modal {
  --employee-tour-vw: 100vw;
  --employee-tour-vh: 100dvh;
  position: fixed;
  inset: 0;
  z-index: 12990;
  display: block;
  padding: 0;
  background: transparent;
  backdrop-filter: none;
  pointer-events: none;
  overflow: hidden;
}
.employee-onboarding-modal.hidden { display: none !important; }
.employee-tour-shade {
  position: fixed;
  z-index: 13000;
  background: rgba(2, 6, 23, .72);
  backdrop-filter: blur(7px);
  -webkit-backdrop-filter: blur(7px);
  pointer-events: auto;
  transition: top .16s ease, left .16s ease, width .16s ease, height .16s ease;
}
.employee-onboarding-spotlight {
  position: fixed;
  z-index: 13001;
  box-sizing: border-box;
  border: 3px solid #60a5fa;
  border-radius: .85rem;
  box-shadow: 0 0 0 2px rgba(255,255,255,.92), 0 0 28px rgba(37,99,235,.48);
  pointer-events: none;
  transition: top .16s ease, left .16s ease, width .16s ease, height .16s ease;
}
.employee-onboarding-card {
  position: fixed;
  z-index: 13002;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  width: clamp(20rem, 31vw, 29rem);
  max-width: calc(var(--employee-tour-vw, 100vw) - 20px);
  max-height: calc(var(--employee-tour-vh, 100dvh) - 20px);
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  overscroll-behavior: contain;
  pointer-events: auto;
  transition: top .16s ease, left .16s ease;
}
.employee-onboarding-head {
  flex: 0 0 auto;
  min-width: 0;
  padding: 1rem 1.05rem .78rem;
}
.employee-onboarding-head > div { min-width: 0; }
.employee-onboarding-head h2 {
  max-width: 100%;
  overflow-wrap: anywhere;
  text-wrap: balance;
  font-size: clamp(1.15rem, 2.25vw, 1.7rem);
  line-height: 1.18;
}
.employee-onboarding-progress { flex: 0 0 auto; }
.employee-onboarding-body {
  flex: 1 1 auto;
  min-height: 0;
  max-width: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-gutter: stable;
  padding: .9rem 1.05rem;
  line-height: 1.5;
  overflow-wrap: anywhere;
}
.employee-onboarding-body > :first-child { margin-top: 0; }
.employee-onboarding-body > :last-child { margin-bottom: 0; }
.employee-onboarding-icon { flex: 0 0 auto; margin-bottom: .65rem; }
.employee-onboarding-target-hint {
  flex: 0 0 auto;
  min-width: 0;
  margin: 0 1.05rem .4rem;
  padding: .52rem .62rem;
  border: 1px solid rgba(37,99,235,.2);
  border-radius: .72rem;
  background: rgba(239,246,255,.82);
  color: #1e3a8a;
  font-size: .76rem;
  font-weight: 850;
  line-height: 1.35;
  overflow-wrap: anywhere;
}
.employee-onboarding-card .employee-onboarding-actions {
  position: relative !important;
  inset: auto !important;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .65rem;
  width: auto;
  margin: 0;
  padding: .72rem 1.05rem max(.78rem, env(safe-area-inset-bottom));
  border-top: 1px solid var(--border);
  border-radius: 0;
  background: var(--surface, #fff);
  box-shadow: none;
  backdrop-filter: none;
}
.employee-onboarding-card .employee-onboarding-actions > .button-row {
  position: static !important;
  inset: auto !important;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: .45rem;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
}
.employee-onboarding-card .employee-onboarding-actions .btn {
  min-width: 0;
  max-width: 100%;
  white-space: normal;
  line-height: 1.15;
}
.employee-onboarding-modal.no-target .employee-onboarding-card {
  width: min(46rem, calc(var(--employee-tour-vw, 100vw) - 20px));
}
.geopunch-tour-target { scroll-margin-block: 1rem; }
.geopunch-tour-target-pulse { animation: geopunch-tour-pulse .7s ease; }
@keyframes geopunch-tour-pulse { 0%,100%{filter:none} 45%{filter:brightness(1.25);box-shadow:0 0 0 5px rgba(96,165,250,.35)} }
body.dark-mode .employee-tour-shade { background: rgba(0,0,0,.8); }
body.dark-mode .employee-onboarding-spotlight { border-color:#93c5fd; box-shadow:0 0 0 2px #000,0 0 30px rgba(96,165,250,.6); }
body.dark-mode .employee-onboarding-target-hint { background:#071426; color:#dbeafe; border-color:#315b8d; }
body.dark-mode .employee-onboarding-card .employee-onboarding-actions { background:#080808; }

@media (max-width: 760px) {
  .employee-onboarding-card {
    width: calc(var(--employee-tour-vw, 100vw) - 12px);
    max-width: calc(var(--employee-tour-vw, 100vw) - 12px);
    border-radius: 1rem;
  }
  .employee-onboarding-head { padding: .78rem .82rem .62rem; gap: .55rem; }
  .employee-onboarding-head h2 { font-size: clamp(1.02rem, 5vw, 1.35rem); }
  .employee-onboarding-body { padding: .7rem .82rem; font-size: .9rem; line-height: 1.42; }
  .employee-onboarding-body p { margin: .32rem 0 .62rem; }
  .employee-onboarding-body ol { margin: .4rem 0 .65rem; padding-left: 1.15rem; }
  .employee-onboarding-icon { width: 2.65rem; height: 2.65rem; border-radius: .82rem; margin-bottom: .5rem; }
  .employee-onboarding-target-hint { margin: 0 .82rem .34rem; font-size: .7rem; }
  .employee-onboarding-card .employee-onboarding-actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: stretch;
    gap: .45rem;
    padding: .58rem .82rem max(.62rem, env(safe-area-inset-bottom));
  }
  .employee-onboarding-card .employee-onboarding-actions > #employee-onboarding-remind { width: 100%; }
  .employee-onboarding-card .employee-onboarding-actions > .button-row {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    width: 100%;
    gap: .38rem;
  }
  .employee-onboarding-card .employee-onboarding-actions > .button-row .btn {
    width: 100%;
    min-height: 2.55rem;
    padding: .52rem .35rem;
    font-size: .78rem;
  }
  .employee-onboarding-card .employee-onboarding-actions > .button-row .btn.hidden { display: none !important; }
  .employee-onboarding-card .employee-onboarding-actions > .button-row:has(.btn.hidden) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 390px) {
  .employee-onboarding-head .eyebrow { font-size: .64rem; }
  .employee-onboarding-card .employee-onboarding-actions > .button-row .btn { font-size: .72rem; }
  .employee-onboarding-card .employee-onboarding-actions .btn svg { width: .9rem; height: .9rem; }
}
@media (max-height: 560px) {
  .employee-onboarding-head { padding-top: .55rem; padding-bottom: .45rem; }
  .employee-onboarding-head h2 { font-size: 1rem; margin-top: .1rem; }
  .employee-onboarding-body { padding-top: .5rem; padding-bottom: .5rem; font-size: .82rem; }
  .employee-onboarding-icon { width: 2.15rem; height: 2.15rem; margin-bottom: .35rem; }
  .employee-onboarding-card .employee-onboarding-actions { padding-top: .42rem; padding-bottom: max(.46rem, env(safe-area-inset-bottom)); }
}
@media (prefers-reduced-motion: reduce) {
  .employee-tour-shade, .employee-onboarding-spotlight, .employee-onboarding-card { transition: none; }
  .geopunch-tour-target-pulse { animation: none; }
}

/* v17 — static product change log in Settings; no Firestore access. */
.geopunch-changelog-card .section-header { align-items: center; }
.geopunch-changelog-card details { border: 1px solid var(--border); border-radius: .9rem; overflow: hidden; }
.geopunch-changelog-card summary { cursor: pointer; padding: .8rem .9rem; font-weight: 900; background: rgba(248,250,252,.72); }
.geopunch-changelog-text { margin: 0; padding: 1rem; max-height: 34rem; overflow: auto; white-space: pre-wrap; overflow-wrap: anywhere; font: 700 .76rem/1.55 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; background: #fff; color: #334155; }
body.dark-mode .geopunch-changelog-card details { border-color:#343434; }
body.dark-mode .geopunch-changelog-card summary { background:#111; color:#fff; }
body.dark-mode .geopunch-changelog-text { background:#050505; color:#e5e7eb; }

/* v17.2 — employee edit form exists in one place only: the detached side drawer. */
.employee-create-card.employee-edit-drawer-mode.context-editor-open { display: block !important; }
.employee-create-card.employee-edit-drawer-mode.context-editor-detached { isolation: isolate; }
.employee-create-card:not(.context-editor-open) > .editor-drawer-titlebar { display: none !important; }


/* 20260720-trust-gps-requests-roster-v17-4 — readable true-black theme and record-ID validation */
.company-record-id-banner {
  display: flex; align-items: flex-start; gap: .7rem; margin: .65rem 0 .8rem; padding: .78rem .9rem;
  border: 1px solid #f59e0b; border-radius: .85rem; background: #fffbeb; color: #78350f;
}
.company-record-id-banner svg { flex: 0 0 auto; width: 1.1rem; height: 1.1rem; margin-top: .08rem; }
.company-record-id-banner div { display: grid; gap: .12rem; }
.company-record-id-banner strong, .company-record-id-banner span { color: inherit; }
input.record-id-invalid { border-color: #dc2626 !important; box-shadow: 0 0 0 3px rgba(220,38,38,.16) !important; }
.employee-time-off-card, .employee-time-off-row { border-color: rgba(220,38,38,.25); background: rgba(254,242,242,.72); }

body.dark-mode {
  color-scheme: dark;
  --bg: #000000;
  --surface: #060708;
  --surface-soft: #0b0c0e;
  --surface-strong: #121418;
  --panel: #060708;
  --panel-soft: #0b0c0e;
  --card: #070809;
  --text: #f8fafc;
  --ink: #f8fafc;
  --muted: #d4d8df;
  --border: #30343a;
  --border-strong: #4b515b;
  background: #000 !important;
  color: #f8fafc !important;
}
body.dark-mode main,
body.dark-mode .view,
body.dark-mode .admin-panel,
body.dark-mode .employee-panel,
body.dark-mode .owner-panel { background: #000 !important; color: #f8fafc !important; }
body.dark-mode .card,
body.dark-mode .stat-card,
body.dark-mode .page-title,
body.dark-mode .dashboard-toolbar,
body.dark-mode .admin-section-nav,
body.dark-mode .employee-section-nav,
body.dark-mode .records-section-nav,
body.dark-mode .segmented-control,
body.dark-mode .advanced-fields,
body.dark-mode .settings-toggle,
body.dark-mode .settings-field,
body.dark-mode .settings-note,
body.dark-mode .gps-status,
body.dark-mode .distance-card,
body.dark-mode .range-prompt,
body.dark-mode .empty-state,
body.dark-mode .copy-output,
body.dark-mode .list-item,
body.dark-mode .item-card,
body.dark-mode .request-type-card,
body.dark-mode .request-source-section,
body.dark-mode .equipment-request-fields,
body.dark-mode .company-record-edit-row,
body.dark-mode .employee-time-group,
body.dark-mode .time-session-row,
body.dark-mode .employee-roster-day,
body.dark-mode .employee-shift-card,
body.dark-mode .employee-roster-row,
body.dark-mode .setup-status-row,
body.dark-mode .trusted-device-panel,
body.dark-mode .push-notification-panel,
body.dark-mode .device-reset-under-map,
body.dark-mode .roster-publish-legend,
body.dark-mode .dashboard-summary-item,
body.dark-mode .import-preview-row,
body.dark-mode .import-preview-summary > div,
body.dark-mode .weekday-check-grid label,
body.dark-mode .roster-summary > div,
body.dark-mode .setup-steps span,
body.dark-mode details,
body.dark-mode summary {
  background: #08090b !important;
  color: #f8fafc !important;
  border-color: #30343a !important;
}
body.dark-mode .surface-soft,
body.dark-mode .panel-soft,
body.dark-mode .time-session-row-main,
body.dark-mode .employee-time-table,
body.dark-mode .dashboard-summary-list,
body.dark-mode .import-preview-summary,
body.dark-mode .employee-onboarding-progress,
body.dark-mode .employee-onboarding-target-hint {
  background: #0b0c0e !important;
  color: #f8fafc !important;
  border-color: #363a42 !important;
}
body.dark-mode h1, body.dark-mode h2, body.dark-mode h3, body.dark-mode h4,
body.dark-mode h5, body.dark-mode h6, body.dark-mode strong,
body.dark-mode label, body.dark-mode legend, body.dark-mode .item-title,
body.dark-mode .section-header, body.dark-mode .matrix-employee strong,
body.dark-mode .compact-roster-person strong, body.dark-mode .compact-roster-detail strong {
  color: #ffffff !important;
}
body.dark-mode p, body.dark-mode small, body.dark-mode .muted-text,
body.dark-mode .tiny-help, body.dark-mode .field-help, body.dark-mode .meta-line,
body.dark-mode .item-subtitle, body.dark-mode .employee-roster-location,
body.dark-mode .compact-roster-person small, body.dark-mode .compact-roster-detail small,
body.dark-mode .matrix-employee small, body.dark-mode .matrix-roster-block span,
body.dark-mode .matrix-roster-block small, body.dark-mode .dashboard-summary-item small {
  color: #d4d8df !important;
}
body.dark-mode input, body.dark-mode select, body.dark-mode textarea,
body.dark-mode [contenteditable="true"] {
  background: #020304 !important;
  color: #ffffff !important;
  border-color: #4b515b !important;
  caret-color: #ffffff;
}
body.dark-mode input:disabled, body.dark-mode select:disabled,
body.dark-mode textarea:disabled, body.dark-mode input[readonly] {
  background: #101216 !important;
  color: #cbd5e1 !important;
  opacity: 1 !important;
}
body.dark-mode input::placeholder, body.dark-mode textarea::placeholder { color: #9ca3af !important; }
body.dark-mode option { background: #050607 !important; color: #ffffff !important; }
body.dark-mode table, body.dark-mode thead, body.dark-mode tbody,
body.dark-mode tr, body.dark-mode th, body.dark-mode td {
  background: #070809 !important;
  color: #f8fafc !important;
  border-color: #30343a !important;
}
body.dark-mode thead th { background: #111318 !important; color: #ffffff !important; }
body.dark-mode tbody tr:hover td { background: #14171c !important; }
body.dark-mode .btn.secondary, body.dark-mode .btn.ghost,
body.dark-mode .icon-btn, body.dark-mode .nav-btn,
body.dark-mode .admin-section-btn, body.dark-mode .employee-section-btn,
body.dark-mode .records-section-btn, body.dark-mode .employee-roster-view-btn {
  background: #111318 !important;
  color: #f8fafc !important;
  border-color: #464b54 !important;
}
body.dark-mode .btn.secondary:hover, body.dark-mode .btn.ghost:hover,
body.dark-mode .icon-btn:hover, body.dark-mode .nav-btn:hover,
body.dark-mode .admin-section-btn:hover, body.dark-mode .employee-section-btn:hover,
body.dark-mode .records-section-btn:hover, body.dark-mode .employee-roster-view-btn:hover {
  background: #1a1e24 !important; border-color: #6b7280 !important;
}
body.dark-mode [aria-selected="true"],
body.dark-mode .admin-section-btn.active, body.dark-mode .employee-section-btn.active,
body.dark-mode .records-section-btn.active, body.dark-mode .employee-roster-view-btn.active {
  background: #27245d !important; color: #ffffff !important; border-color: #818cf8 !important;
}
body.dark-mode .screen-roster-matrix,
body.dark-mode .screen-roster-matrix-head,
body.dark-mode .screen-roster-matrix-row,
body.dark-mode .matrix-employee,
body.dark-mode .matrix-day-cell {
  background: #060708 !important; color: #f8fafc !important; border-color: #30343a !important;
}
body.dark-mode .matrix-roster-block,
body.dark-mode .screen-roster-matrix-block,
body.dark-mode .shift-card,
body.dark-mode .compact-roster-row {
  background: #101216 !important; color: #f8fafc !important; border-color: #3b4048 !important;
}
/* Preserve v16.2 publication status on the day cell, not on the shift fill. */
body.dark-mode .matrix-day-cell.has-draft-shift { background: #21090d !important; }
body.dark-mode .matrix-day-cell.all-published-shifts { background: #071d10 !important; }
body.dark-mode .matrix-day-cell.has-draft-shift .matrix-roster-block,
body.dark-mode .matrix-day-cell.all-published-shifts .matrix-roster-block { background: #101216 !important; }
body.dark-mode .employee-time-off-card,
body.dark-mode .employee-time-off-row,
body.dark-mode .matrix-roster-block.request { background: #210c10 !important; border-color: #7f3340 !important; color: #fff !important; }
body.dark-mode .badge { background: #1b1f25 !important; color: #f8fafc !important; border-color: #4b515b !important; }
body.dark-mode .badge.active, body.dark-mode .badge.approved, body.dark-mode .badge.published { background: #092414 !important; color: #bbf7d0 !important; border-color: #24783b !important; }
body.dark-mode .badge.pending, body.dark-mode .badge.scheduled, body.dark-mode .badge.day-off { background: #2a2107 !important; color: #fde68a !important; border-color: #8a6b1f !important; }
body.dark-mode .badge.inactive, body.dark-mode .badge.denied, body.dark-mode .badge.draft { background: #2a0a0f !important; color: #fecdd3 !important; border-color: #8c2f3c !important; }
body.dark-mode .editor-backdrop, body.dark-mode .dashboard-summary-modal,
body.dark-mode .import-preview-overlay, body.dark-mode .active-shift-summary-modal,
body.dark-mode .time-entry-editor-modal { background: rgba(0,0,0,.82) !important; }
body.dark-mode .context-editor-open, body.dark-mode .time-entry-editor-card,
body.dark-mode .dashboard-summary-card, body.dark-mode .employee-onboarding-card,
body.dark-mode .import-preview-dialog, body.dark-mode .station-photo-modal-card {
  background: #060708 !important; color: #f8fafc !important; border-color: #3b4048 !important;
}
body.dark-mode .company-record-id-banner { background: #261a04 !important; color: #fde68a !important; border-color: #a16207 !important; }
body.dark-mode input.record-id-invalid { border-color: #fb7185 !important; box-shadow: 0 0 0 3px rgba(251,113,133,.18) !important; }
body.dark-mode .maplibregl-popup-content { background: #050607 !important; color: #fff !important; border-color: #4b515b !important; }


/* v17.4 contrast reinforcement — true black canvas, near-black cards, readable text. */
body.dark-mode,
body.dark-mode #app,
body.dark-mode .main-container,
body.dark-mode .view,
body.dark-mode [data-admin-panel],
body.dark-mode [data-employee-panel] { background:#000 !important; color:#f8fafc !important; }
body.dark-mode :is(
  .card,.auth-card,.hero-card,.stat-card,.item-card,.shift-card,.compact-roster-row,
  .employee-shift-card,.employee-roster-day,.employee-calendar-day,.employee-time-group,
  .time-session-row,.time-entry-session,.time-entry-editor-card,.context-editor-open,
  .dashboard-summary-card,.dashboard-summary-item,.request-source-section,.request-type-card,
  .company-record-edit-row,.settings-note,.trusted-device-panel,.push-notification-panel,
  .device-reset-under-map,.roster-publish-legend,.import-preview-dialog,.employee-onboarding-card,
  .station-photo-modal-card,.assignment-box,.distance-box,.gps-status,.empty-state,
  .table-wrap,.setup-status-row,.browser-recommendation,.onboarding-callout,
  .employee-history-summary,.employee-history-row,.employee-history-head,.employee-flat-card,
  .location-card,.job-card,.manual-entry-card,.report-card,.record-section-card
) { background:#08090b !important; color:#f8fafc !important; border-color:#383c44 !important; }
body.dark-mode :is(h1,h2,h3,h4,h5,h6,strong,b,label,legend,.item-title,.section-header,.time-hours,.time-clock-value) { color:#fff !important; }
body.dark-mode :is(p,small,.muted-text,.tiny-help,.field-help,.meta-line,.item-subtitle,.employee-flat-meta,.dashboard-summary-item small) { color:#dce1e9 !important; }
body.dark-mode :is(input,select,textarea) { background:#020304 !important; color:#fff !important; border-color:#5c626d !important; caret-color:#fff; }
body.dark-mode :is(input,select,textarea):focus { border-color:#a5b4fc !important; box-shadow:0 0 0 4px rgba(129,140,248,.24) !important; }
body.dark-mode :is(input,textarea)::placeholder { color:#b7bdc8 !important; opacity:1; }
body.dark-mode :is(input,select,textarea):disabled,
body.dark-mode :is(input,select,textarea)[readonly] { background:#15171a !important; color:#e2e8f0 !important; opacity:1 !important; }
body.dark-mode table { background:#050607 !important; color:#f8fafc !important; }
body.dark-mode thead th { background:#14161a !important; color:#fff !important; border-color:#41464f !important; }
body.dark-mode tbody td { color:#f8fafc !important; border-color:#33373e !important; }
body.dark-mode tbody tr:nth-child(odd) td { background:#060708 !important; }
body.dark-mode tbody tr:nth-child(even) td { background:#0d0f12 !important; }
body.dark-mode :is(.app-nav,.admin-section-tabs,.records-hub-tabs,.employee-section-tabs,.employee-roster-view-toggle) { background:#08090b !important; border-color:#3c4149 !important; }
body.dark-mode :is(.nav-btn,.admin-section-btn,.records-section-btn,.employee-section-btn,.employee-roster-view-btn,.btn.secondary,.btn.ghost,.icon-btn) { background:#16191d !important; color:#fff !important; border-color:#515762 !important; }
body.dark-mode :is(.nav-btn,.admin-section-btn,.records-section-btn,.employee-section-btn,.employee-roster-view-btn,.btn.secondary,.btn.ghost,.icon-btn):hover { background:#272b31 !important; border-color:#7a828e !important; }
body.dark-mode :is(.nav-btn.active,.admin-section-btn.active,.records-section-btn.active,.employee-section-btn.active,.employee-roster-view-btn.active) { background:#4f46e5 !important; color:#fff !important; border-color:#a5b4fc !important; }
body.dark-mode .screen-roster-matrix,
body.dark-mode .screen-roster-matrix-head,
body.dark-mode .screen-roster-matrix-row,
body.dark-mode .matrix-employee,
body.dark-mode .matrix-day-cell { background:#08090b !important; color:#f8fafc !important; border-color:#383c44 !important; }
body.dark-mode .matrix-day-cell.has-draft-shift { background:#280c12 !important; }
body.dark-mode .matrix-day-cell.all-published-shifts { background:#081f12 !important; }
body.dark-mode .matrix-roster-block { background:#15181c !important; color:#fff !important; border-color:#4a505a !important; }
body.dark-mode .matrix-roster-block.request,
body.dark-mode .employee-time-off-card,
body.dark-mode .employee-time-off-row { background:#250d13 !important; color:#fff !important; border-color:#a04354 !important; }
body.dark-mode .company-record-id-banner { background:#291d05 !important; color:#fde68a !important; border-color:#b77910 !important; }
body.dark-mode .toast { color:#fff !important; }

/* v20: password recovery, Position-only time-entry correction, compact review report, and runtime diagnostics */
.auth-secondary-actions { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 12px; flex-wrap: wrap; }
.auth-secondary-actions small { color: var(--muted); flex: 1 1 220px; }
.auth-link-btn { border: 0; background: transparent; color: var(--primary); padding: 4px 0; font: inherit; font-weight: 700; display: inline-flex; align-items: center; gap: 7px; cursor: pointer; }
.auth-link-btn:hover, .auth-link-btn:focus-visible { text-decoration: underline; }
.auth-link-btn:disabled { opacity: .55; cursor: wait; }

.time-session-row.incomplete { border-inline-start: 4px solid var(--warning, #a15c00); }
.position-allocation-approval-note { margin: 9px 0 0; display: flex; align-items: center; gap: 7px; color: var(--warning-text, #7a4300); font-size: .82rem; font-weight: 700; }

/* Position-only quick correction for historic/renamed Company Records Positions. */
.position-quick-action { position: relative; }
.position-quick-action.needs-position-update { color: #9a3412; border-color: rgba(234,88,12,.42); background: rgba(255,237,213,.86); }
.position-action-dot { position: absolute; inset: .19rem .19rem auto auto; width: .48rem; height: .48rem; border: 2px solid var(--surface, #fff); border-radius: 50%; background: #dc2626; box-shadow: 0 0 0 1px rgba(127,29,29,.16); }
.position-allocation-panel.has-position-issue { border-color: rgba(234,88,12,.45); box-shadow: inset 3px 0 0 rgba(234,88,12,.65); }
.position-allocation-panel summary { flex-wrap: wrap; }
.position-panel-issue { margin-inline-start: auto; border: 1px solid rgba(234,88,12,.34); border-radius: 999px; padding: .15rem .48rem; background: rgba(255,237,213,.82); color: #9a3412; font-size: .68rem; line-height: 1.2; font-weight: 900; }
.position-allocation-legacy-note,
.position-allocation-change-note { display: flex; align-items: flex-start; gap: .45rem; margin: .65rem 0 0; border-radius: .72rem; padding: .58rem .65rem; font-size: .76rem; line-height: 1.4; font-weight: 800; }
.position-allocation-legacy-note { border: 1px solid rgba(220,38,38,.3); background: rgba(254,226,226,.72); color: #991b1b; }
.position-allocation-change-note { border: 1px solid rgba(37,99,235,.25); background: rgba(239,246,255,.78); color: #1e3a8a; }
.position-allocation-legacy-note svg,
.position-allocation-change-note svg { width: 1rem; height: 1rem; margin-top: .06rem; flex: 0 0 auto; }
.position-allocation-row { grid-template-columns: minmax(13rem, 1.65fr) minmax(7.2rem, .55fr) minmax(9rem, .75fr) auto; }
.position-allocation-row label { display: grid; gap: .28rem; color: var(--muted); font-size: .72rem; font-weight: 900; }
.position-allocation-row select,
.position-allocation-row input { min-height: 2.55rem; }
.position-allocation-row.legacy-position-row { border: 1px solid rgba(220,38,38,.28); border-radius: .78rem; padding: .55rem; background: rgba(254,242,242,.72); }
.legacy-position-help { color: #991b1b; font-size: .68rem; line-height: 1.35; font-weight: 800; }
.allocation-row-total { display: grid; align-content: center; gap: .08rem; min-height: 2.55rem; padding: .34rem .5rem; border: 1px solid var(--border); border-radius: .62rem; background: var(--surface-soft, rgba(127,127,127,.05)); white-space: normal; }
.allocation-row-total strong { color: var(--text); font-size: .8rem; }
.allocation-row-total small { color: var(--muted); font-size: .66rem; line-height: 1.25; }

.time-position-editor-modal { position: fixed; inset: 0; z-index: 10100; display: grid; place-items: center; padding: 1rem; overflow: auto; background: rgba(8,17,30,.72); backdrop-filter: blur(5px); }
.time-position-editor-card { width: min(51rem, 100%); max-height: min(92vh, 58rem); overflow: hidden; display: flex; flex-direction: column; border: 1px solid rgba(148,163,184,.38); border-radius: 1.15rem; background: var(--surface, #fff); color: var(--text, #152033); box-shadow: 0 28px 90px rgba(15,23,42,.36); }
.time-position-editor-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; padding: .95rem 1.05rem; border-bottom: 1px solid var(--border); background: var(--surface, #fff); }
.time-position-editor-head h2 { margin: .1rem 0 .16rem; font-size: 1.2rem; }
.time-position-editor-head p { margin: 0; color: var(--muted); font-size: .78rem; font-weight: 750; }
.time-position-editor-body { padding: .9rem 1rem; overflow: auto; }
.time-position-editor-summary { display: flex; flex-wrap: wrap; gap: .42rem; margin-bottom: .7rem; }
.time-position-editor-summary span { display: inline-flex; align-items: baseline; gap: .3rem; border: 1px solid var(--border); border-radius: 999px; padding: .3rem .55rem; background: var(--surface-soft, rgba(127,127,127,.05)); color: var(--muted); font-size: .7rem; font-weight: 800; }
.time-position-editor-summary strong { color: var(--text); font-size: .8rem; }
.time-position-editor-warning { display: flex; gap: .55rem; align-items: flex-start; margin-bottom: .7rem; border: 1px solid rgba(37,99,235,.25); border-radius: .76rem; padding: .62rem .7rem; background: rgba(239,246,255,.82); color: #1e3a8a; }
.time-position-editor-warning.error { border-color: rgba(220,38,38,.3); background: rgba(254,226,226,.76); color: #991b1b; }
.time-position-editor-warning svg { width: 1.05rem; height: 1.05rem; margin-top: .08rem; flex: 0 0 auto; }
.time-position-editor-warning strong,
.time-position-editor-warning span { display: block; }
.time-position-editor-warning span { margin-top: .08rem; font-size: .73rem; line-height: 1.4; font-weight: 700; }
.time-position-editor-list { margin: 0; }
.time-position-editor-tools { display: flex; align-items: center; flex-wrap: wrap; gap: .5rem; margin-top: .7rem; }
.time-position-editor-tools .allocation-summary { margin-inline-start: auto; margin-inline-end: 0; text-align: right; font-size: .76rem; }
.time-position-editor-actions { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: .5rem; padding: .78rem 1rem; border-top: 1px solid var(--border); background: var(--surface-soft, rgba(127,127,127,.035)); }

/* Compact Time & Position Review: employee > day > position rows. */
.time-review-report-modal { position: fixed; inset: 0; z-index: 10080; display: grid; place-items: center; padding: 12px; background: rgba(8,17,30,.72); backdrop-filter: blur(4px); }
.time-review-report-card { width: min(1320px, 100%); max-height: min(96vh, 1040px); overflow: hidden; display: flex; flex-direction: column; border: 1px solid rgba(148,163,184,.36); border-radius: 15px; background: var(--surface, #fff); color: var(--text, #152033); box-shadow: 0 26px 90px rgba(0,0,0,.36); }
.time-review-report-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 14px; padding: 14px 16px; border-bottom: 1px solid var(--border); background: var(--surface, #fff); }
.time-review-report-head h2 { margin: 2px 0 3px; font-size: clamp(1.15rem, 2vw, 1.5rem); }
.time-review-report-head p { margin: 0; color: var(--muted); font-size: .78rem; line-height: 1.35; }
.time-review-report-actions { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.time-review-report-actions .btn { min-height: 2.25rem; padding: .42rem .65rem; }
.time-review-report-body { padding: 10px 12px 16px; overflow: auto; }
.time-review-report-overview { display: flex; flex-wrap: wrap; gap: 5px; margin: 0 0 8px; }
.time-review-report-overview > span { display: inline-flex; align-items: baseline; gap: 4px; border: 1px solid var(--border); border-radius: 999px; padding: 4px 8px; background: var(--surface-soft, rgba(127,127,127,.05)); color: var(--muted); font-size: .7rem; font-weight: 800; }
.time-review-report-overview strong { color: var(--text); font-size: .8rem; }
.time-report-warning { display: flex; align-items: flex-start; gap: 7px; margin: 0 0 6px; border: 1px solid rgba(191,107,0,.34); border-radius: 8px; padding: 6px 8px; background: rgba(255,170,0,.08); color: #7c4600; }
.time-report-warning.error { border-color: rgba(220,38,38,.28); background: rgba(254,226,226,.64); color: #991b1b; }
.time-report-warning.info { border-color: rgba(37,99,235,.22); background: rgba(239,246,255,.7); color: #1e3a8a; }
.time-report-warning > svg { width: .95rem; height: .95rem; margin-top: .06rem; flex: 0 0 auto; }
.time-report-warning strong,
.time-report-warning span { display: block; }
.time-report-warning strong { font-size: .75rem; }
.time-report-warning span { margin-top: 1px; font-size: .68rem; line-height: 1.35; font-weight: 650; }
.time-report-employee { margin-top: 9px; overflow: hidden; border: 1px solid var(--border); border-radius: 10px; background: var(--surface, #fff); }
.time-report-employee-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 7px 9px; background: var(--surface-soft, rgba(127,127,127,.055)); }
.time-report-employee-name strong { font-size: .9rem; }
.time-report-employee-name small { display: inline; margin-inline-start: .35rem; color: var(--muted); font-size: .67rem; }
.time-report-employee-stats { display: flex; gap: 4px; flex-wrap: wrap; justify-content: flex-end; }
.time-report-employee-stats span,
.time-report-day-stats span { display: inline-flex; align-items: baseline; gap: 3px; border-radius: 999px; padding: 2px 6px; background: rgba(127,127,127,.065); color: var(--muted); font-size: .65rem; font-weight: 800; white-space: nowrap; }
.time-report-employee-stats span.issue,
.time-report-day-stats span.issue { background: rgba(254,226,226,.78); color: #991b1b; }
.time-report-employee-stats strong { color: var(--text); }
.time-report-day { border-top: 1px solid var(--border); padding: 7px 8px 9px; }
.time-report-day-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 5px; }
.time-report-day-head > div:first-child { display: flex; align-items: baseline; gap: 5px; }
.time-report-day-head strong { font-size: .8rem; }
.time-report-day-head small { color: var(--muted); font-size: .65rem; }
.time-report-day-stats { display: flex; gap: 4px; flex-wrap: wrap; justify-content: flex-end; }
.time-report-position-strip { display: flex; align-items: center; gap: 4px; overflow-x: auto; padding: 0 0 5px; scrollbar-width: thin; }
.time-report-position-strip .strip-label { flex: 0 0 auto; color: var(--muted); font-size: .61rem; font-weight: 900; text-transform: uppercase; letter-spacing: .04em; }
.time-report-position-strip .position-total { flex: 0 0 auto; display: inline-flex; align-items: baseline; gap: 4px; border: 1px solid var(--border); border-radius: 6px; padding: 3px 5px; background: var(--surface-soft, rgba(127,127,127,.04)); font-size: .64rem; }
.time-report-position-strip .position-total strong { font-size: .68rem; }
.time-report-position-strip .position-total b { font-size: .66rem; }
.time-report-position-strip .position-total small { color: var(--muted); font-size: .61rem; }
.time-report-position-strip .position-total.legacy { border-color: rgba(220,38,38,.35); background: rgba(254,226,226,.7); }
.time-report-position-strip .position-total.changed { border-color: rgba(37,99,235,.26); background: rgba(239,246,255,.72); }
.time-report-table-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: 7px; }
.time-report-grid { width: 100%; min-width: 850px; border-collapse: separate; border-spacing: 0; table-layout: fixed; font-size: .69rem; }
.time-report-grid th,
.time-report-grid td { padding: 4px 5px; border-inline-start: 1px solid var(--border); border-top: 1px solid var(--border); vertical-align: top; text-align: left; line-height: 1.28; overflow-wrap: anywhere; }
.time-report-grid th:first-child,
.time-report-grid td:first-child { border-inline-start: 0; }
.time-report-grid thead th { position: sticky; top: 0; z-index: 1; border-top: 0; background: var(--surface-soft, #f4f6f8); color: var(--muted); font-size: .58rem; text-transform: uppercase; letter-spacing: .045em; font-weight: 900; }
.time-report-grid tbody tr:first-child td { border-top: 0; }
.time-report-grid tbody tr.session-start:not(:first-child) td { border-top-width: 2px; border-top-color: var(--border-strong, #cbd5e1); }
.time-report-grid tbody tr.session-continuation td { background: rgba(127,127,127,.018); }
.time-report-grid tbody tr.has-position-issue td { background: rgba(255,247,237,.72); }
.time-report-grid th:nth-child(1) { width: 12%; }
.time-report-grid th:nth-child(2) { width: 20%; }
.time-report-grid th:nth-child(3) { width: 8%; }
.time-report-grid th:nth-child(4) { width: 9%; }
.time-report-grid th:nth-child(5) { width: 9%; }
.time-report-grid th:nth-child(6) { width: 19%; }
.time-report-grid th:nth-child(7) { width: 23%; }
.time-report-grid strong,
.time-report-grid small { display: block; }
.time-report-grid strong { font-size: .7rem; }
.time-report-grid small { margin-top: 1px; color: var(--muted); font-size: .61rem; line-height: 1.25; }
.time-report-grid .number-cell { text-align: right; font-variant-numeric: tabular-nums; }
.time-report-position-state { display: inline-flex !important; width: max-content; max-width: 100%; margin-top: 3px !important; border-radius: 999px; padding: 2px 5px; font-size: .56rem !important; font-weight: 900; }
.time-report-position-state.legacy { background: rgba(254,226,226,.88); color: #991b1b !important; }
.time-report-position-state.changed { background: rgba(219,234,254,.9); color: #1e40af !important; }
.time-report-status-cell .badge { width: max-content; max-width: 100%; padding: .15rem .4rem; font-size: .58rem; }
.time-report-row-issue { color: #9a3412 !important; font-weight: 850; }
.time-report-position-edit { margin-top: 4px; min-height: 1.85rem; padding: .25rem .42rem; font-size: .62rem; }

body.dark-mode .position-quick-action.needs-position-update { color: #fdba74 !important; border-color: #9a4a16 !important; background: #2a1608 !important; }
body.dark-mode .position-action-dot { border-color: #08090b; background: #fb7185; }
body.dark-mode :is(.time-position-editor-card,.time-review-report-card,.time-report-employee) { background: #08090b !important; color: #f8fafc !important; border-color: #3b4048 !important; }
body.dark-mode :is(.time-position-editor-head,.time-position-editor-actions,.time-review-report-head,.time-report-employee-head,.time-report-grid thead th) { background: #111318 !important; border-color: #3b4048 !important; }
body.dark-mode :is(.position-allocation-panel.has-position-issue,.position-allocation-row.legacy-position-row,.time-report-grid tbody tr.has-position-issue td) { background: #211006 !important; border-color: #8a4a1b !important; }
body.dark-mode :is(.position-allocation-legacy-note,.time-position-editor-warning.error,.time-report-warning.error,.time-report-position-strip .position-total.legacy) { background: #260c11 !important; color: #fecdd3 !important; border-color: #8c2f3c !important; }
body.dark-mode :is(.position-allocation-change-note,.time-position-editor-warning,.time-report-warning.info,.time-report-position-strip .position-total.changed) { background: #08182b !important; color: #bfdbfe !important; border-color: #315786 !important; }
body.dark-mode :is(.position-panel-issue,.time-report-employee-stats span.issue,.time-report-day-stats span.issue) { background: #2a1306 !important; color: #fdba74 !important; border-color: #8a4a1b !important; }
body.dark-mode :is(.allocation-row-total,.time-position-editor-summary span,.time-review-report-overview>span,.time-report-employee-stats span,.time-report-day-stats span,.time-report-position-strip .position-total) { background: #111318 !important; border-color: #3b4048 !important; color: #dce1e9 !important; }
body.dark-mode .time-report-grid tbody tr.session-continuation td { background: #0b0d10 !important; }
body.dark-mode .legacy-position-help,
body.dark-mode .time-report-row-issue { color: #fda4af !important; }

@media (max-width: 820px) {
  .position-allocation-row { grid-template-columns: minmax(12rem, 1fr) minmax(7rem, .5fr) minmax(8rem, .7fr) auto; }
  .time-review-report-modal { padding: 0; place-items: stretch; }
  .time-review-report-card { width: 100%; max-height: 100vh; height: 100vh; border-radius: 0; }
  .time-review-report-head { padding: 11px 12px; }
  .time-review-report-body { padding: 8px; }
  .time-report-employee-head,
  .time-report-day-head { align-items: flex-start; flex-direction: column; }
  .time-report-employee-stats,
  .time-report-day-stats { justify-content: flex-start; }
}

@media (max-width: 640px) {
  .time-position-editor-modal { padding: 0; place-items: stretch; }
  .time-position-editor-card { width: 100%; max-height: 100vh; height: 100vh; border-radius: 0; }
  .time-position-editor-head { padding: .8rem .85rem; }
  .time-position-editor-body { padding: .75rem .8rem; }
  .position-allocation-row { grid-template-columns: 1fr; }
  .position-allocation-row > .icon-btn { justify-self: end; }
  .time-position-editor-tools { align-items: stretch; flex-direction: column; }
  .time-position-editor-tools .allocation-summary { margin: 0; text-align: left; }
  .time-position-editor-actions { display: grid; grid-template-columns: 1fr; padding: .7rem .8rem; }
  .time-position-editor-actions .btn { width: 100%; justify-content: center; }
  .time-review-report-head { flex-direction: column; }
  .time-review-report-actions { width: 100%; justify-content: flex-start; }
  .time-review-report-overview { gap: 4px; }
  .time-report-employee-name small { display: block; margin-inline-start: 0; }
}

.system-diagnostics-output { margin-top: 14px; }
.system-diagnostics-summary { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.system-diagnostics-summary span { border: 1px solid var(--border); border-radius: 999px; padding: 5px 10px; font-size: .78rem; font-weight: 800; }
.system-diagnostics-list { display: grid; gap: 8px; }
.system-diagnostic-item { border: 1px solid var(--border); border-radius: 11px; padding: 10px 12px; display: grid; grid-template-columns: 30px minmax(0,1fr); gap: 9px; align-items: start; }
.system-diagnostic-item .diagnostic-icon { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-weight: 900; }
.system-diagnostic-item strong { display: block; }
.system-diagnostic-item small { color: var(--muted); display: block; margin-top: 2px; line-height: 1.45; }
.system-diagnostic-item.pass .diagnostic-icon { background: rgba(32, 151, 92, .14); color: #147344; }
.system-diagnostic-item.warn .diagnostic-icon { background: rgba(230, 145, 0, .15); color: #8a5200; }
.system-diagnostic-item.error .diagnostic-icon { background: rgba(205, 52, 52, .14); color: #a52222; }
.system-diagnostic-item.info .diagnostic-icon, .system-diagnostic-item.skip .diagnostic-icon { background: rgba(75, 108, 183, .13); color: #35508e; }

@media (max-width: 760px) {
  .time-review-report-modal { padding: 0; place-items: stretch; }
  .time-review-report-card { width: 100%; max-height: 100vh; height: 100vh; border-radius: 0; }
  .time-review-report-head { padding: 11px 12px; flex-direction: column; }
  .time-review-report-actions { justify-content: flex-start; }
  .time-review-report-body { padding: 8px; }
  .time-review-report-overview { gap: 4px; }
  .time-report-employee-head, .time-report-day-head { align-items: flex-start; flex-direction: column; }
  .time-report-employee-stats, .time-report-day-stats { justify-content: flex-start; }
}

/* v21 bare-bones Time & Position Review. Only employee, day, day hours, Position, and Position hours are displayed. */
.time-review-report-card { width: min(960px, 100%); }
.time-position-simple-table-wrap { overflow: auto; border: 1px solid var(--border); border-radius: 9px; background: var(--surface, #fff); }
.time-position-simple-table { width: 100%; min-width: 650px; border-collapse: separate; border-spacing: 0; table-layout: fixed; font-size: .78rem; }
.time-position-simple-table th,
.time-position-simple-table td { padding: .52rem .62rem; border-top: 1px solid var(--border); border-inline-start: 1px solid var(--border); text-align: left; vertical-align: middle; line-height: 1.3; }
.time-position-simple-table th:first-child,
.time-position-simple-table td:first-child { border-inline-start: 0; }
.time-position-simple-table thead th { position: sticky; top: 0; z-index: 1; border-top: 0; background: var(--surface-soft, #f4f6f8); color: var(--muted); font-size: .65rem; font-weight: 900; letter-spacing: .04em; text-transform: uppercase; }
.time-position-simple-table tbody tr:first-child td { border-top: 0; }
.time-position-simple-table tbody tr:nth-child(even) td { background: rgba(127,127,127,.025); }
.time-position-simple-table th:nth-child(1) { width: 26%; }
.time-position-simple-table th:nth-child(2) { width: 17%; }
.time-position-simple-table th:nth-child(3) { width: 18%; }
.time-position-simple-table th:nth-child(4) { width: 24%; }
.time-position-simple-table th:nth-child(5) { width: 15%; }
.time-position-simple-table .number-cell { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.time-position-simple-table tr.has-position-issue td:nth-child(4) { color: #9a3412; font-weight: 850; }
body.dark-mode .time-position-simple-table-wrap { background: #08090b !important; border-color: #3b4048 !important; }
body.dark-mode .time-position-simple-table thead th { background: #111318 !important; border-color: #3b4048 !important; }
body.dark-mode .time-position-simple-table td { border-color: #3b4048 !important; }
body.dark-mode .time-position-simple-table tbody tr:nth-child(even) td { background: #0b0d10 !important; }
body.dark-mode .time-position-simple-table tr.has-position-issue td:nth-child(4) { color: #fda4af !important; }

/* 20260722-roster-privacy-position-view-v22: privacy-safe employee directory and responsive Position summaries in Time Entries. */
.time-position-cell {
  display: grid;
  gap: .28rem;
  min-width: 0;
  align-content: center;
}
.time-position-label {
  display: inline-flex;
  align-items: center;
  gap: .28rem;
  width: max-content;
  max-width: 100%;
  color: var(--muted);
  font-size: .62rem;
  font-weight: 950;
  letter-spacing: .035em;
  text-transform: uppercase;
}
.time-position-label svg { width: .82rem; height: .82rem; flex: 0 0 auto; }
.time-position-cell.single .time-position-label { display: none; }
.time-position-items { display: grid; gap: .25rem; min-width: 0; }
.time-position-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  column-gap: .45rem;
  row-gap: .1rem;
  min-width: 0;
  align-items: center;
  border: 1px solid rgba(148,163,184,.34);
  border-radius: .58rem;
  padding: .32rem .42rem;
  background: rgba(248,250,252,.82);
}
.time-position-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--text);
  font-size: .75rem;
  font-weight: 900;
}
.time-position-hours {
  color: var(--muted);
  font-size: .68rem;
  font-weight: 900;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.time-position-warning {
  grid-column: 1 / -1;
  color: #9a3412;
  font-size: .58rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .035em;
}
.time-position-item.needs-update { border-color: rgba(234,88,12,.4); background: rgba(255,247,237,.88); }
.time-position-cell.expanded.multiple .time-position-items { border-inline-start: 3px solid rgba(37,99,235,.24); padding-inline-start: .42rem; }
.time-position-cell.compact.multiple .time-position-items { display: flex; flex-wrap: wrap; gap: .24rem; }
.time-position-cell.compact .time-position-item {
  display: inline-flex;
  flex: 0 1 auto;
  max-width: 100%;
  gap: .32rem;
  padding: .24rem .38rem;
  border-radius: 999px;
}
.time-position-cell.compact .time-position-name { max-width: 11rem; font-size: .68rem; }
.time-position-cell.compact .time-position-hours { font-size: .62rem; }
.time-position-cell.compact .time-position-warning { font-size: .54rem; }
body.dark-mode .time-position-item { background: #111318 !important; border-color: #3b4048 !important; }
body.dark-mode .time-position-item.needs-update { background: #211006 !important; border-color: #8a4a1b !important; }
body.dark-mode .time-position-warning { color: #fdba74 !important; }

@media (max-width: 980px) {
  .time-session-row-main.compact-visible-times > .time-position-cell { grid-column: 1 / -1; }
  .time-position-cell.compact.multiple .time-position-items { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .time-position-cell.compact .time-position-item { display: grid; grid-template-columns: minmax(0,1fr) auto; border-radius: .58rem; }
}
@media (max-width: 560px) {
  .time-position-cell.compact.multiple .time-position-items { grid-template-columns: 1fr; }
  .time-position-cell.compact .time-position-name { max-width: none; }
}


/* v26 compact live-data verification control */
.consistency-status {
  display: inline-grid;
  grid-template-columns: auto minmax(0,auto) auto;
  align-items: center;
  gap: .42rem;
  min-height: 2.3rem;
  border: 1px solid var(--border);
  border-radius: .78rem;
  padding: .34rem .48rem .34rem .55rem;
  background: rgba(255,255,255,.9);
  color: var(--muted);
  font: inherit;
  text-align: left;
  cursor: pointer;
  box-shadow: 0 5px 16px rgba(15,23,42,.06);
  transition: border-color .18s ease, background .18s ease, transform .18s ease;
}
.consistency-status:hover { transform: translateY(-1px); border-color: var(--border-strong); }
.consistency-status:focus-visible { outline: 3px solid rgba(37,99,235,.2); outline-offset: 2px; }
.consistency-state-dot { width: .52rem; height: .52rem; border-radius: 999px; background: #94a3b8; box-shadow: 0 0 0 .18rem rgba(148,163,184,.13); }
.consistency-status-copy { display: grid; min-width: 0; line-height: 1.05; }
.consistency-status-copy strong { font-size: .68rem; font-weight: 900; white-space: nowrap; }
.consistency-status-copy small { margin-top: .16rem; color: inherit; opacity: .78; font-size: .58rem; font-weight: 800; white-space: nowrap; }
.consistency-status > svg { width: .86rem; height: .86rem; opacity: .7; }
.consistency-status.live { color: #047857; border-color: rgba(16,185,129,.32); background: rgba(236,253,245,.94); }
.consistency-status.live .consistency-state-dot { background: #10b981; box-shadow: 0 0 0 .18rem rgba(16,185,129,.14); }
.consistency-status.synchronizing, .consistency-status.booting { color: #92400e; border-color: rgba(245,158,11,.34); background: rgba(255,251,235,.96); }
.consistency-status.synchronizing .consistency-state-dot, .consistency-status.booting .consistency-state-dot { background: #f59e0b; animation: consistency-status-pulse 1.2s ease-in-out infinite; }
.consistency-status.synchronizing > svg, .consistency-status.booting > svg { animation: consistency-refresh-spin 1s linear infinite; }
.consistency-status.not_verified, .consistency-status.update_required, .consistency-status.offline { color: #b91c1c; border-color: rgba(244,63,94,.34); background: rgba(255,241,242,.96); }
.consistency-status.not_verified .consistency-state-dot, .consistency-status.update_required .consistency-state-dot, .consistency-status.offline .consistency-state-dot { background: #f43f5e; }
@keyframes consistency-status-pulse { 0%,100% { opacity: .45; transform: scale(.88); } 50% { opacity: 1; transform: scale(1.08); } }
@keyframes consistency-refresh-spin { to { transform: rotate(360deg); } }

.consistency-health-output { display: grid; gap: .8rem; }
.consistency-health-current { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: .65rem; }
.consistency-health-current > div { min-width: 0; padding: .75rem; border: 1px solid var(--border); border-radius: .8rem; background: var(--surface-soft, #f8fafc); }
.consistency-health-current strong { display: block; overflow-wrap: anywhere; font-size: .9rem; }
.consistency-health-current span { display: block; margin-top: .18rem; color: var(--muted); font-size: .68rem; font-weight: 800; }
.consistency-health-current.live > div:first-child { border-color: rgba(16,185,129,.38); background: rgba(236,253,245,.72); }
.consistency-health-current.not_verified > div:first-child,
.consistency-health-current.offline > div:first-child,
.consistency-health-current.update_required > div:first-child { border-color: rgba(244,63,94,.38); background: rgba(255,241,242,.78); }
.consistency-health-summary { display: flex; flex-wrap: wrap; gap: .45rem; }
.consistency-health-summary span { padding: .42rem .58rem; border: 1px solid var(--border); border-radius: 999px; background: var(--surface-soft, #f8fafc); font-size: .72rem; font-weight: 800; }
.consistency-health-summary .success { color: #047857; }
.consistency-health-summary .warning { color: #a16207; }
.consistency-health-summary .danger { color: #be123c; }
.consistency-health-table-wrap { max-height: 25rem; overflow: auto; }
.consistency-health-table { min-width: 48rem; width: 100%; border-collapse: collapse; }
.consistency-health-table th, .consistency-health-table td { padding: .55rem .6rem; border-bottom: 1px solid var(--border); text-align: left; vertical-align: top; font-size: .72rem; }
.consistency-health-table td small { display: block; color: var(--muted); margin-top: .12rem; }
.consistency-client-status { display: inline-flex; padding: .25rem .42rem; border-radius: 999px; background: rgba(148,163,184,.15); font-weight: 900; }
.consistency-client-status.live { color: #047857; background: rgba(16,185,129,.12); }
.consistency-client-status.not_verified, .consistency-client-status.offline, .consistency-client-status.update_required { color: #be123c; background: rgba(244,63,94,.12); }
.consistency-client-status.synchronizing { color: #92400e; background: rgba(245,158,11,.12); }
body.dark-mode .consistency-status { background: #111 !important; border-color: #3b4048 !important; color: #d1d5db !important; }
body.dark-mode .consistency-status.live { background: #07170c !important; color: #86efac !important; border-color: #24783b !important; }
body.dark-mode .consistency-status.synchronizing, body.dark-mode .consistency-status.booting { background: #1b1507 !important; color: #fde68a !important; border-color: #8a6b1f !important; }
body.dark-mode .consistency-status.not_verified, body.dark-mode .consistency-status.offline, body.dark-mode .consistency-status.update_required { background: #1b080b !important; color: #fda4af !important; border-color: #8c2f3c !important; }
body.dark-mode .consistency-health-current > div, body.dark-mode .consistency-health-summary span { background: #111; border-color: #343434; }
body.dark-mode .consistency-health-current.live > div:first-child { background: #07170c; border-color: #24783b; }
body.dark-mode .consistency-health-current.not_verified > div:first-child, body.dark-mode .consistency-health-current.offline > div:first-child, body.dark-mode .consistency-health-current.update_required > div:first-child { background: #1b080b; border-color: #8c2f3c; }
@media (max-width: 900px) {
  .consistency-status { padding: .38rem .52rem; }
  .consistency-status strong { display: none; }
  .consistency-health-current { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media (max-width: 560px) {
  .consistency-health-current { grid-template-columns: 1fr; }
}


/* v26 confirmation, deletion audit, and edit-presence controls */
.update-banner { align-items: center; gap: .65rem; pointer-events: auto; }
.update-banner .banner-close, .station-sync-banner .banner-close { align-self: center; }
.station-sync-banner .banner-close { background: rgba(15,23,42,.94); color: #fff; box-shadow: 0 8px 24px rgba(15,23,42,.24); }
.confirmation-modal { position: fixed; inset: 0; z-index: 10020; display: grid; place-items: center; padding: 1rem; background: rgba(15,23,42,.62); backdrop-filter: blur(5px); }
.confirmation-modal.hidden { display: none !important; }
.confirmation-modal-card { width: min(94vw, 34rem); display: grid; gap: 1rem; padding: 1.2rem; border-radius: 1.15rem; border: 1px solid var(--border); background: var(--surface,#fff); box-shadow: 0 28px 80px rgba(15,23,42,.35); }
.confirmation-modal-card header { display: flex; justify-content: space-between; gap: .8rem; align-items: flex-start; }
.confirmation-modal-card h2 { margin: .18rem 0 .3rem; }
.confirmation-modal-card p { margin: 0; color: var(--muted); line-height: 1.45; }
.confirmation-modal-card textarea { width: 100%; resize: vertical; }
.confirmation-modal-actions { display: flex; justify-content: flex-end; gap: .55rem; }
.danger-confirmation-card { border-color: rgba(244,63,94,.32); }
.entry-action-icon.delete { color: #be123c; }
.entry-action-icon.delete:hover { background: rgba(244,63,94,.12); }
.time-entry-lock-note { display: flex; align-items: center; gap: .55rem; margin: 0; padding: .65rem .75rem; border-radius: .75rem; background: rgba(59,130,246,.08); color: #1d4ed8; font-size: .76rem; font-weight: 800; }
.time-entry-lock-note svg { width: 1rem; height: 1rem; }
body.dark-mode .confirmation-modal-card { background: #090909; border-color: #444; }
body.dark-mode .time-entry-lock-note { background: rgba(59,130,246,.16); color: #93c5fd; }
@media (max-width: 900px) {
  .consistency-status { grid-template-columns: auto auto; min-width: 2.35rem; padding: .42rem .5rem; border-radius: .72rem; }
  .consistency-status-copy { display: none; }
  .consistency-status > svg { width: .95rem; height: .95rem; }
}
@media (max-width: 560px) {
  .confirmation-modal-actions { display: grid; grid-template-columns: 1fr; }
  .confirmation-modal-actions .btn { width: 100%; }
  .toast { bottom: max(.65rem, env(safe-area-inset-bottom)); width: calc(100vw - 1rem); }
}

/* v26 Time Entry editor ownership and read-only Position summary */
.time-entry-edit-lock-note {
  display: flex;
  align-items: center;
  gap: .55rem;
  margin: 0;
  padding: .65rem .75rem;
  border: 1px solid rgba(37,99,235,.2);
  border-radius: .75rem;
  background: rgba(59,130,246,.08);
  color: #1d4ed8;
  font-size: .76rem;
  font-weight: 850;
  line-height: 1.35;
}
.time-entry-edit-lock-note svg { width: 1rem; height: 1rem; flex: 0 0 auto; }
.position-readonly-panel { padding-bottom: .7rem; }
.position-readonly-list { display: grid; gap: .42rem; margin-top: .65rem; }
.position-readonly-row {
  display: grid;
  grid-template-columns: minmax(0,1fr) auto;
  align-items: center;
  gap: .75rem;
  padding: .52rem .62rem;
  border: 1px solid var(--border);
  border-radius: .68rem;
  background: var(--surface, #fff);
}
.position-readonly-row strong { min-width: 0; overflow-wrap: anywhere; font-size: .78rem; }
.position-readonly-row small { white-space: nowrap; color: var(--muted); font-size: .7rem; font-weight: 850; }
.position-readonly-row.needs-update { border-color: rgba(234,88,12,.4); background: rgba(255,247,237,.88); }
body.dark-mode .time-entry-edit-lock-note { background: rgba(59,130,246,.16); border-color: rgba(147,197,253,.28); color: #93c5fd; }
body.dark-mode .position-readonly-row { background: #111318; border-color: #3b4048; }
body.dark-mode .position-readonly-row.needs-update { background: #211006; border-color: #8a4a1b; }
@media (max-width: 560px) {
  .time-entry-edit-lock-note { align-items: flex-start; }
  .position-readonly-row { padding: .48rem .55rem; }
}