/* ============================================================================
   assets/css/attendance-polish.css — Attendance visual polish (2026-09-11)
   ----------------------------------------------------------------------------
   Additive layer over attendance.html's own styles and the shared tokens.
   It restyles existing classes only (no new markup contracts beyond .atn-qa),
   works in light and dark through the --au-* tokens, and never changes what a
   screen does — only how it reads: clearer tabs, a calmer punch hero, KPI
   tiles with a tone bar, legible status chips, quieter tables, softer empty
   states, and honest focus rings.
   ========================================================================== */

/* ---- page header ------------------------------------------------------- */
.atn-top{ gap:12px; padding-bottom:12px; }
.atn-title{ font-size:19px; letter-spacing:-.3px; }
.atn-back{ border-radius:12px; box-shadow:var(--au-shadow-1); }
.atn-back:hover{ border-color:var(--au-line-2); color:var(--au-ink); }
.atn-acct{ font-size:11px; }
@media (min-width:900px){ .atn-acct{ padding:5px 10px; border-radius:var(--au-r-pill); background:var(--au-paper-2); border:1px solid var(--au-line); max-width:240px; } }

/* ---- tabs: one quiet row, icons instead of emoji, obvious active state -- */
.atn-tabs{ gap:6px; padding:2px 2px 16px; position:relative; }
.atn-tab{
  padding:9px 13px; gap:7px; border-radius:var(--au-r-pill);
  border:1px solid var(--au-line); background:var(--au-paper-2); color:var(--au-ink-2);
  font:700 12.5px/1.15 var(--au-font); box-shadow:var(--au-shadow-1);
  transition:background-color var(--au-t-fast), border-color var(--au-t-fast), color var(--au-t-fast), transform var(--au-t-fast), box-shadow var(--au-t-fast);
}
.atn-tab > span{ display:inline-flex; align-items:center; gap:7px; }
.atn-tab .au-inline, .atn-tab svg{ width:15px; height:15px; flex:0 0 auto; opacity:.85; }
.atn-tab:hover{ border-color:var(--au-line-2); color:var(--au-ink); transform:translateY(-1px); }
.atn-tab.on{
  background:linear-gradient(135deg,var(--au-olive),var(--au-olive-deep)); border-color:transparent; color:#fff;
  box-shadow:0 6px 16px -6px rgba(116,128,64,.55);
}
.atn-tab.on .au-inline, .atn-tab.on svg{ opacity:1; }
.atn-tab.on span span{ color:rgba(255,255,255,.78) !important; }
/* a wide row scrolls on phones — fade the edge so the overflow reads as such */
@media (max-width:899px){
  .atn-tabs{ -webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 28px),transparent); mask-image:linear-gradient(90deg,#000 calc(100% - 28px),transparent); padding-right:28px; }
}

/* ---- punch hero -------------------------------------------------------- */
.atn-punchcard{
  position:relative; overflow:hidden; padding:26px 22px 24px; border-radius:var(--au-r-xl);
  background:
    radial-gradient(120% 80% at 50% -10%, var(--au-olive-soft), transparent 60%),
    linear-gradient(180deg,var(--au-paper-2),var(--au-paper-3));
  border:1px solid var(--au-line); box-shadow:var(--au-shadow-2);
}
.atn-punchdate{
  display:inline-flex; align-items:center; gap:6px; padding:5px 11px; border-radius:var(--au-r-pill);
  background:var(--au-paper); border:1px solid var(--au-line); color:var(--au-ink-2); letter-spacing:.08em;
}
.atn-clocknow{ font-size:44px; letter-spacing:-.02em; }
.atn-clocklbl{ font-size:11px; }
.atn-punchstate{ font-size:14.5px; }
.atn-punchbtn{
  max-width:320px; padding:17px 22px; border-radius:var(--au-r-pill); font-size:16.5px; letter-spacing:.01em;
  box-shadow:0 12px 28px -8px rgba(116,128,64,.55), inset 0 1px 0 rgba(255,255,255,.18);
}
.atn-punchbtn .ic{ display:inline-flex; }
.atn-punchbtn .ic svg{ width:20px; height:20px; }
.atn-punchbtn.out{ box-shadow:0 12px 28px -8px rgba(57,66,75,.55), inset 0 1px 0 rgba(255,255,255,.14); }
.atn-donebadge{ padding:10px 18px; box-shadow:var(--au-shadow-1); }

/* quick actions: compact secondary tiles in a row, not three amber slabs */
.atn-qa{ display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:8px; max-width:520px; margin:8px auto 0; }
.atn-qa .atn-punchbtn.check{
  max-width:none; width:100%; margin:0; padding:12px 14px; font-size:13.5px;
  background:var(--au-paper-2); color:var(--au-ink); border:1px solid var(--au-line-2); box-shadow:var(--au-shadow-1);
}
.atn-qa .atn-punchbtn.check .ic{ color:var(--au-olive-deep); }
.atn-qa .atn-punchbtn.check:hover{ border-color:var(--au-olive); box-shadow:0 8px 20px -10px rgba(116,128,64,.5); }
.atn-punchbtn.check#btnAtnPush{
  max-width:520px; padding:12px 16px; font-size:13.5px; border-radius:var(--au-r-pill);
  background:var(--au-paper-2); color:var(--au-ink-2); border:1px dashed var(--au-line-2); box-shadow:none;
}
.atn-punchbtn.check#btnAtnPush:hover{ border-style:solid; border-color:var(--au-amber); color:var(--au-ink); }
.atn-note{ font-size:12px; line-height:1.6; }

/* ---- KPI tiles: tone bar + bigger figure ------------------------------- */
.au-kpi{ position:relative; overflow:hidden; padding:16px 16px 14px 18px; box-shadow:var(--au-shadow-1); }
.au-kpi::before{ content:""; position:absolute; left:0; top:0; bottom:0; width:4px; background:var(--au-line-2); }
.au-kpi.tone-ok::before{ background:var(--au-ok); }
.au-kpi.tone-warn::before{ background:var(--au-warn); }
.au-kpi.tone-bad::before{ background:var(--au-bad); }
.au-kpi.tone-accent::before{ background:var(--au-olive); }
.au-kpi small{ color:var(--au-muted); }
.au-kpi b{ font-size:28px; letter-spacing:-.02em; margin-top:6px; font-variant-numeric:tabular-nums; }
@media (hover:hover){ .au-kpi:hover{ transform:translateY(-2px); box-shadow:var(--au-shadow-2); } }

/* ---- section headers --------------------------------------------------- */
.atn-h{ color:var(--au-ink-2); letter-spacing:.08em; margin-top:24px; }
.atn-h .ln{ background:var(--au-line); }

/* ---- status chips: filled, readable at a glance ------------------------ */
.au-chip{ padding:4px 10px; font-weight:800; letter-spacing:.02em; }
.au-chip.ok{ background:color-mix(in srgb,var(--au-ok) 14%,transparent); border-color:color-mix(in srgb,var(--au-ok) 40%,transparent); }
.au-chip.warn{ background:color-mix(in srgb,var(--au-warn) 16%,transparent); border-color:color-mix(in srgb,var(--au-warn) 45%,transparent); }
.au-chip.bad{ background:color-mix(in srgb,var(--au-bad) 12%,transparent); border-color:color-mix(in srgb,var(--au-bad) 40%,transparent); }

/* ---- tables: quieter rows, sticky header, zebra ------------------------ */
.atn-twrap{ box-shadow:var(--au-shadow-1); }
.atn-twrap .au-table th{ position:sticky; top:0; z-index:1; background:var(--au-paper-3); border-bottom:1px solid var(--au-line-2); }
.atn-twrap .au-table tbody tr:nth-child(even) td{ background:color-mix(in srgb,var(--au-ink) 2.5%,transparent); }
.atn-twrap .au-table tr:hover td{ background:var(--au-olive-soft); }
.atn-twrap .au-table td{ padding:11px 12px; }
.atn-av{ box-shadow:0 0 0 2px var(--au-paper-2); }

/* ---- filters & inputs -------------------------------------------------- */
.atn-filters{ gap:8px 10px; }
.au-input{ border-radius:var(--au-r-md); box-shadow:var(--au-shadow-1); }
.au-btn{ box-shadow:var(--au-shadow-1); }

/* ---- empty states: icon in a soft disc, text that says what to do ------ */
.au-empty{ padding:40px 16px; }
.au-empty .au-empty-ic{
  width:64px; height:64px; margin:0 auto 14px; border-radius:50%; display:grid; place-items:center;
  background:var(--au-olive-soft); border:1px solid var(--au-line); font-size:26px; opacity:1;
}
.au-empty b{ font-size:15px; }
.au-empty span{ color:var(--au-muted); }

/* ---- cards (settings / offices / employees) ---------------------------- */
.atn-card{ box-shadow:var(--au-shadow-1); transition:border-color var(--au-t-fast), box-shadow var(--au-t-fast); }
.atn-card:hover{ border-color:var(--au-line-2); box-shadow:var(--au-shadow-2); }

/* ---- focus: keyboard users get the same olive ring everywhere ---------- */
.atn-tab:focus-visible, .atn-back:focus-visible, .atn-punchbtn:focus-visible, .au-btn:focus-visible{
  outline:2px solid var(--au-olive); outline-offset:2px;
}
@media (prefers-reduced-motion:reduce){ .atn-tab, .au-kpi, .atn-card{ transition:none; } }