/* ═══════════════════════════════════════════════════════════
   attendance-banner.css — shared top attendance bar
   Injected server-side (see server.js), same mechanism as
   sidebar-nav.css/js. Renders as a fixed overlay pinned to the
   very top of the viewport, above the sidebar drawer.
   Uses only CSS vars every page already defines:
   --panel --card --border --ink --mid --ink-soft --success
   --danger --accent2 --shadow-md
   ═══════════════════════════════════════════════════════════ */

#atbRoot {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 38px;
  z-index: 6000;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  padding: 0 .9rem;
  background: var(--panel);
  border-bottom: 1px solid var(--border);
  box-shadow: var(--shadow-md);
  box-sizing: border-box;
  font-family: 'Plus Jakarta Sans', sans-serif;
  overflow: hidden;
  transition: height .16s ease, background-color .16s ease;
}

#atbRoot.atb-out { background: var(--danger); border-bottom-color: var(--danger); }
#atbRoot.atb-out .atb-text, #atbRoot.atb-out .atb-brand, #atbRoot.atb-out .atb-sep { color: #fff; }
#atbRoot.atb-out .atb-firm, #atbRoot.atb-out .atb-user { color: rgba(255,255,255,.85); }

#atbRoot.atb-stale { background: var(--accent2); border-bottom-color: var(--accent2); }
#atbRoot.atb-stale .atb-text, #atbRoot.atb-stale .atb-brand, #atbRoot.atb-stale .atb-sep { color: #fff; }
#atbRoot.atb-stale .atb-firm, #atbRoot.atb-stale .atb-user { color: rgba(255,255,255,.85); }

#atbRoot .atb-left, #atbRoot .atb-right {
  display: flex;
  align-items: center;
  gap: .55rem;
  min-width: 0;
  white-space: nowrap;
}

#atbRoot .atb-brand { font-size: .74rem; font-weight: 700; letter-spacing: .04em; color: var(--ink); flex-shrink: 0; }
#atbRoot .atb-sep { color: var(--mid); font-size: .7rem; flex-shrink: 0; }
#atbRoot .atb-firm { font-size: .68rem; color: var(--ink-soft); overflow: hidden; text-overflow: ellipsis; }
#atbRoot .atb-user { font-size: .68rem; color: var(--ink-soft); overflow: hidden; text-overflow: ellipsis; }

#atbRoot .atb-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; background: var(--mid); }
#atbRoot.atb-in .atb-dot { background: var(--success); }
#atbRoot.atb-out .atb-dot, #atbRoot.atb-stale .atb-dot { background: #fff; }

#atbRoot .atb-text { font-size: .72rem; font-weight: 600; color: var(--ink); }

#atbRoot .atb-btn {
  border: 1px solid var(--border);
  background: var(--card);
  color: var(--ink);
  font-size: .68rem;
  font-weight: 600;
  padding: .28rem .7rem;
  border-radius: var(--radius-sm, 4px);
  cursor: pointer;
  font-family: 'Plus Jakarta Sans', sans-serif;
  flex-shrink: 0;
  transition: opacity .12s;
}
#atbRoot .atb-btn:hover { opacity: .8; }
#atbRoot .atb-btn:disabled { opacity: .5; cursor: default; }
#atbRoot.atb-out .atb-btn, #atbRoot.atb-stale .atb-btn { background: #fff; color: var(--ink); border-color: #fff; }

/* Collapsed: thin hover strip. Only ever applied when checked-in same day
   (see attendance-banner.js) — never while checked-out or stale. */
#atbRoot.atb-collapsed { height: 7px; padding: 0; }
#atbRoot.atb-collapsed .atb-left, #atbRoot.atb-collapsed .atb-right { opacity: 0; pointer-events: none; }
#atbRoot.atb-collapsed:hover { height: 38px; padding: 0 .9rem; }
#atbRoot.atb-collapsed:hover .atb-left, #atbRoot.atb-collapsed:hover .atb-right { opacity: 1; pointer-events: auto; }

/* Late-entry confirmation popover, anchored under the Check In/Out button */
#atbPrompt {
  position: fixed;
  z-index: 6100;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm, 4px);
  box-shadow: var(--shadow-md);
  padding: .6rem;
  font-family: 'Plus Jakarta Sans', sans-serif;
  min-width: 200px;
}
#atbPrompt .atb-prompt-title { font-size: .68rem; font-weight: 600; color: var(--ink); margin-bottom: .5rem; }
#atbPrompt .atb-prompt-row { display: flex; gap: .4rem; }
#atbPrompt .atb-btn { flex: 1; white-space: nowrap; }
#atbPrompt .atb-prompt-dt {
  width: 100%;
  box-sizing: border-box;
  font-size: .68rem;
  font-family: 'Plus Jakarta Sans', sans-serif;
  color: var(--ink);
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm, 4px);
  padding: .35rem .5rem;
  margin-bottom: .5rem;
}

@media print {
  #atbRoot, #atbPrompt { display: none !important; }
  body { padding-top: 0 !important; }
}