/* =============================================================================
 * Attendance & Time Management — Centralized Stylesheet
 * Single source of truth for ALL attendance pages.
 * Loaded once from templates/base.html.
 * ========================================================================== */


/* ─── 1. Design Tokens ───────────────────────────────────────────────────── */
:root {
  --att-brand:        #971110;
  --att-brand-hover:  #830f0e;
  --att-brand-soft:   #181818;
  --att-ink:          #1e293b;
  --att-ink-soft:     #374151;
  --att-muted:        #64748b;
  --att-faint:        #94a3b8;
  --att-line:         #e2e8f0;
  --att-line-soft:    #e9eef5;
  --att-line-faint:   #f1f5f9;
  --att-bg:           #f8fafc;
  --att-bg-soft:      #fafbfd;
  --att-radius:       14px;
  --att-radius-lg:    16px;
  --att-shadow-sm:    0 2px 8px  rgba(33,51,75,.04);
  --att-shadow:       0 2px 12px rgba(33,51,75,.05);
  --att-shadow-md:    0 4px 20px rgba(33,51,75,.07);
  --att-shadow-lg:    0 4px 28px rgba(33,51,75,.10);
}


/* ─── 2. Breadcrumb ─────────────────────────────────────────────────────── */
.att-bc {
  display: flex; align-items: center; gap: .45rem;
  font-size: .82rem; color: var(--att-muted);
  margin-bottom: 1.25rem; flex-wrap: wrap;
}
.att-bc a       { color: var(--att-brand); text-decoration: none; font-weight: 500; }
.att-bc a:hover { text-decoration: underline; }
.att-bc .sep    { color: #cbd5e0; }
.att-bc .current{ color: var(--att-ink); font-weight: 600; }


/* ─── 3. Page header & filter bar ───────────────────────────────────────── */
.att-page-head {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: .75rem; margin-bottom: 1rem;
}
.att-page-head h4 { font-weight: 900; color: var(--att-ink); margin: 0; }
.att-page-head .sub { color: var(--att-muted); font-size: .83rem; margin: 0; }

.filter-bar {
  background: #fff; border: 1px solid var(--att-line); border-radius: var(--att-radius);
  padding: .85rem 1.1rem; margin-bottom: 1.4rem;
  display: flex; gap: .5rem; flex-wrap: wrap; align-items: flex-end;
  box-shadow: var(--att-shadow-sm);
}
.filter-bar select,
.filter-bar input {
  border: 1px solid var(--att-line); border-radius: 8px;
  padding: .35rem .75rem; font-size: .82rem; color: var(--att-ink-soft);
  background: var(--att-bg); outline: none; transition: border .15s;
}
.filter-bar select:focus,
.filter-bar input:focus { border-color: var(--att-brand); background: #fff; }
.filter-bar .fb-label {
  font-size: .72rem; font-weight: 700; color: var(--att-faint);
  display: block; margin-bottom: .2rem; text-transform: uppercase; letter-spacing: .05em;
}

.btn-filter {
  display: inline-flex; align-items: center; gap: .3rem;
  padding: .38rem .85rem; border-radius: 8px;
  font-size: .82rem; font-weight: 600; border: none; cursor: pointer;
  transition: .15s; text-decoration: none;
}
.btn-filter.apply { background: var(--att-brand); color: #fff; }
.btn-filter.apply:hover { background: var(--att-brand-hover); color: #fff; }
.btn-filter.clear { background: var(--att-line-faint); color: var(--att-muted); }
.btn-filter.clear:hover { background: var(--att-line); }


/* ─── 4. Buttons (unified vocabulary) ───────────────────────────────────── */
.btn-att-primary,
.btn-primary-sm {
  display: inline-flex; align-items: center; gap: .35rem;
  background: var(--att-brand); color: #fff;
  border: none; border-radius: 9px;
  padding: .45rem 1.1rem; font-size: .84rem; font-weight: 700;
  text-decoration: none; cursor: pointer; transition: .15s;
}
.btn-att-primary:hover,
.btn-primary-sm:hover {
  background: var(--att-brand-hover); color: #fff;
  transform: translateY(-1px); box-shadow: 0 4px 12px rgba(33,51,75,.25);
}

.btn-att-ghost,
.btn-back-sm,
.btn-export {
  display: inline-flex; align-items: center; gap: .3rem;
  background: #fff; color: var(--att-brand);
  border: 1.5px solid var(--att-line); border-radius: 8px;
  padding: .38rem .85rem; font-size: .82rem; font-weight: 600;
  text-decoration: none; cursor: pointer; transition: .15s;
}
.btn-att-ghost:hover,
.btn-back-sm:hover,
.btn-export:hover {
  background: var(--att-bg); border-color: #c5d2e0; color: var(--att-brand);
}

.btn-att-danger {
  display: inline-flex; align-items: center; gap: .35rem;
  background: #fef2f2; color: #b91c1c;
  border: 1.5px solid #fecaca; border-radius: 9px;
  padding: .38rem .85rem; font-size: .82rem; font-weight: 700;
  text-decoration: none; cursor: pointer; transition: .15s;
}
.btn-att-danger:hover { background: #fee2e2; }

.btn-att-success {
  display: inline-flex; align-items: center; gap: .35rem;
  background: #f0fdf4; color: #15803d;
  border: 1.5px solid #bbf7d0; border-radius: 9px;
  padding: .38rem .85rem; font-size: .82rem; font-weight: 700;
  text-decoration: none; cursor: pointer; transition: .15s;
}
.btn-att-success:hover { background: #dcfce7; }

.btn-att-icon,
.btn-act {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px;
  background: var(--att-bg); border: 1px solid var(--att-line);
  border-radius: 7px; font-size: .85rem; color: var(--att-muted);
  cursor: pointer; transition: .15s; text-decoration: none;
}
.btn-att-icon:hover { background: var(--att-brand); color: #fff; border-color: var(--att-brand); }
.btn-act:hover { transform: translateY(-1px); }
.btn-act.view { background: #eff6ff; color: #1d4ed8; border-color: transparent; }
.btn-act.view:hover { background: #dbeafe; }
.btn-act.edit { background: #f0fdf4; color: #15803d; border-color: transparent; }
.btn-act.edit:hover { background: #dcfce7; }
.btn-act.del  { background: #fff1f2; color: #be123c; border-color: transparent; }
.btn-act.del:hover  { background: #fee2e2; }
.btn-act.approve { background: #dcfce7; color: #15803d; border-color: transparent; }
.btn-act.approve:hover { background: #bbf7d0; }
.btn-act.reject  { background: #fee2e2; color: #b91c1c; border-color: transparent; }
.btn-act.reject:hover  { background: #fecaca; }

.btn-qa {
  display: inline-flex; align-items: center; gap: .25rem;
  padding: .3rem .75rem; border-radius: 7px;
  font-size: .75rem; font-weight: 700; border: none;
  cursor: pointer; text-decoration: none; transition: .15s;
}
.btn-qa:hover { transform: translateY(-1px); }
.btn-approve, .btn-qa.btn-approve { background: #dcfce7; color: #15803d; }
.btn-approve:hover { background: #bbf7d0; }
.btn-reject,  .btn-qa.btn-reject  { background: #fee2e2; color: #b91c1c; }
.btn-reject:hover  { background: #fecaca; }
.btn-view,    .btn-qa.btn-view    { background: #eff6ff; color: #1d4ed8; }
.btn-view:hover    { background: #dbeafe; }
.btn-edit,    .btn-qa.btn-edit    { background: #f0fdf4; color: #15803d; }
.btn-edit:hover    { background: #dcfce7; }
.btn-del,     .btn-qa.btn-del     { background: #fff1f2; color: #be123c; }
.btn-del:hover     { background: #fee2e2; }

.btn-action {
  display: inline-flex; align-items: center; justify-content: center; gap: .35rem;
  padding: .5rem 1.2rem; border-radius: 9px;
  font-size: .85rem; font-weight: 700; border: none;
  cursor: pointer; text-decoration: none; transition: .15s;
}
.btn-action:hover { transform: translateY(-1px); box-shadow: 0 4px 14px rgba(0,0,0,.15); }
.btn-primary-act { background: var(--att-brand); color: #fff; }
.btn-success-act, .btn-action.btn-approve { background: linear-gradient(135deg,#059669,#10b981); color: #fff; }
.btn-warning-act { background: linear-gradient(135deg,#d97706,#f59e0b); color: #fff; }
.btn-danger-act,  .btn-action.btn-reject  { background: linear-gradient(135deg,#dc2626,#ef4444); color: #fff; }


/* ─── 5. Cards, panels, hero, stat strip ────────────────────────────────── */
.panel-card,
.ic,
.shift-card,
.punch-table-wrap, .da-table-wrap, .ot-table-wrap, .wfh-table-wrap, .roster-table-wrap {
  background: #fff;
  border: 1px solid var(--att-line-soft);
  border-radius: var(--att-radius);
  box-shadow: var(--att-shadow);
}
.shift-card { overflow: hidden; transition: transform .15s, box-shadow .15s; height: 100%; }
.shift-card:hover { transform: translateY(-3px); box-shadow: 0 8px 28px rgba(33,51,75,.1); }

.ic { overflow: hidden; }
.ich {
  display: flex; align-items: center; gap: .65rem;
  padding: .85rem 1.25rem; background: var(--att-bg);
  border-bottom: 1px solid #eef2f7;
}
.ich h6 { margin: 0; font-weight: 700; font-size: .9rem; color: var(--att-ink); }
.ichi {
  width: 34px; height: 34px; border-radius: 9px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: .85rem;
  background: linear-gradient(135deg, var(--att-brand), var(--att-brand-soft));
}
.ichi.tint-sky    { background: linear-gradient(135deg,#0ea5e9,#06b6d4); }
.ichi.tint-green  { background: linear-gradient(135deg,#10b981,#059669); }
.ichi.tint-amber  { background: linear-gradient(135deg,#f59e0b,#d97706); }
.ichi.tint-rose   { background: linear-gradient(135deg,#ef4444,#dc2626); }
.ichi.tint-violet { background: linear-gradient(135deg,#8b5cf6,#7c3aed); }
.ichi.tint-slate  { background: linear-gradient(135deg,#64748b,#475569); }

.ir {
  display: flex; gap: .75rem; align-items: flex-start;
  padding: .58rem 1.25rem; border-bottom: 1px solid var(--att-line-faint);
}
.ir:last-child { border-bottom: none; }
.il {
  color: var(--att-faint); font-size: .72rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .05em;
  min-width: 150px; flex-shrink: 0; padding-top: .12rem;
  display: flex; align-items: center; gap: .3rem;
}
.il i { font-size: .78rem; color: var(--att-brand); opacity: .5; }
.iv  { color: var(--att-ink); font-size: .87rem; font-weight: 500; flex: 1; }

/* Detail-page hero card (unified for all detail screens) */
.det-hero, .hero-box, .da-hero, .ot-hero, .wfh-hero {
  border-radius: 18px; overflow: hidden;
  box-shadow: var(--att-shadow-lg); margin-bottom: 1.5rem; background: #fff;
}
.hero-cover, .da-cover, .ot-cover, .wfh-cover {
  height: 110px; position: relative; overflow: hidden;
}
.hero-cover { background: linear-gradient(135deg, #830f0e 0%, var(--att-brand) 60%, var(--att-brand-soft) 100%); }
.hero-body, .da-body, .ot-body, .wfh-body { padding: 0 1.75rem 1.5rem; }

/* In-cover pill */
.hero-pill {
  position: absolute; top: 1rem; left: 1.25rem;
  background: rgba(0,0,0,.22); color: #fff;
  font-size: .75rem; font-weight: 700;
  padding: .25em .9em; border-radius: 999px;
  backdrop-filter: blur(4px);
  display: inline-flex; align-items: center; gap: .35rem;
}
.hero-pill.right { left: auto; right: 1.25rem; }
.hero-pill.lock  { color: #fcd34d; }

.hero-actions { position: absolute; top: 1rem; right: 1.25rem; display: flex; gap: .5rem; }
.btn-hero, .btn-hb {
  display: inline-flex; align-items: center; gap: .35rem;
  background: rgba(255,255,255,.15); color: rgba(255,255,255,.95);
  border: 1.5px solid rgba(255,255,255,.3); border-radius: 8px;
  padding: .4rem .9rem; font-size: .82rem; font-weight: 600;
  text-decoration: none; cursor: pointer; transition: .15s;
}
.btn-hero:hover, .btn-hb:hover { background: rgba(255,255,255,.25); color: #fff; }
.btn-hero.solid, .btn-he {
  display: inline-flex; align-items: center; gap: .35rem;
  background: #fff; color: var(--att-brand);
  border: none; border-radius: 8px;
  padding: .4rem .9rem; font-size: .82rem; font-weight: 600;
  cursor: pointer; transition: .15s; text-decoration: none;
}
.btn-hero.solid:hover, .btn-he:hover { background: #f0f9ff; box-shadow: 0 4px 14px rgba(33,51,75,.15); }

/* Stat strip */
.det-strip, .ss {
  display: flex; gap: .625rem; flex-wrap: wrap;
  padding: .75rem 1.75rem;
  border-top: 1px solid #f0f4f8; background: var(--att-bg-soft);
}
.sc {
  display: flex; align-items: center; gap: .45rem;
  background: #fff; border: 1px solid var(--att-line);
  border-radius: 9px; padding: .42rem .85rem; font-size: .8rem;
}
.sci {
  width: 26px; height: 26px; border-radius: 7px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: .78rem; color: #fff;
  background: linear-gradient(135deg, var(--att-brand), var(--att-brand-soft));
}
.scl { color: var(--att-faint); font-size: .68rem; line-height: 1; }
.scv { color: var(--att-ink); font-weight: 700; font-size: .85rem; line-height: 1.2; }


/* ─── 6. Tables ─────────────────────────────────────────────────────────── */
.att-table,
table.pt, table.da, table.ot, table.wfh, table.roster-tbl {
  width: 100%; border-collapse: collapse;
}
.att-table th,
table.pt thead th, table.da thead th, table.ot thead th, table.wfh thead th, table.roster-tbl thead th {
  background: var(--att-bg); font-size: .72rem; font-weight: 800;
  text-transform: uppercase; letter-spacing: .06em; color: var(--att-faint);
  padding: .65rem 1.1rem; border-bottom: 1px solid #eef2f7; white-space: nowrap; text-align: left;
}
.att-table td,
table.pt tbody td, table.da tbody td, table.ot tbody td, table.wfh tbody td, table.roster-tbl tbody td {
  padding: .62rem 1.1rem; font-size: .83rem; color: var(--att-ink-soft);
  vertical-align: middle; border-bottom: 1px solid var(--att-line-faint);
}
.att-table tbody tr:last-child td,
table.pt tbody tr:last-child td, table.da tbody tr:last-child td,
table.ot tbody tr:last-child td, table.wfh tbody tr:last-child td,
table.roster-tbl tbody tr:last-child td { border-bottom: none; }
.att-table tbody tr:hover,
table.pt tbody tr:hover, table.da tbody tr:hover, table.ot tbody tr:hover,
table.wfh tbody tr:hover, table.roster-tbl tbody tr:hover { background: var(--att-bg-soft); }

.tbl-head, .rt-head {
  background: var(--att-bg); border-bottom: 1px solid #eef2f7;
  padding: .75rem 1.25rem; display: flex; align-items: center; justify-content: space-between;
}
.tbl-head h6, .rt-head h6 { margin: 0; font-weight: 700; font-size: .9rem; color: var(--att-ink); }
.tm { font-family: monospace; font-size: .83rem; font-weight: 600; color: var(--att-ink); }


/* ─── 7. Badges & status pills ─────────────────────────────────────────── */
.att-badge,
.ab,
.st, .st-status,
.ot-badge,
.wfh-status-badge,
.ptype-badge,
.badge-active, .badge-inactive, .badge-night,
.badge-off, .badge-holiday, .badge-shift,
.type-badge {
  display: inline-flex; align-items: center; gap: .25rem;
  font-size: .72rem; font-weight: 700;
  padding: .2em .75em; border-radius: 999px; white-space: nowrap; letter-spacing: .02em;
}
.type-badge { background: var(--att-line-faint); color: #475569; border-radius: 7px; padding: .15em .6em; }

/* Universal status palette */
.badge-present, .st-present, .ot-badge.approved, .wfh-status-badge.approved, .ptype-badge.check_in,
.att-badge.approved, .ab.ap,
.badge-active, .badge-shift              { background: #dcfce7; color: #15803d; }

.badge-absent, .st-absent, .ot-badge.rejected, .wfh-status-badge.rejected, .ptype-badge.check_out,
.att-badge.rejected, .ab.aa,
.badge-inactive                          { background: #fee2e2; color: #b91c1c; }

.badge-half_day, .st-half_day, .ot-badge.pending, .wfh-status-badge.pending, .ptype-badge.break_out,
.att-badge.pending, .ab.ah               { background: #fef9c3; color: #92400e; }

.badge-weekly_off, .st-weekly_off,
.wfh-status-badge.cancelled, .ptype-badge.auto, .ab.aw,
.badge-off                               { background: var(--att-line-faint); color: #475569; }

.badge-holiday, .st-holiday, .ptype-badge.break_in,
.att-badge.info                          { background: #eff6ff; color: #1d4ed8; }

.badge-on_leave, .st-on_leave            { background: #faf5ff; color: #7c3aed; }
.badge-wfh,      .st-wfh                 { background: #f0fdfa; color: #0d9488; }
.badge-night                             { background: #1e3a8a; color: #bfdbfe; }

.st-status { padding: .3em .9em; font-size: .8rem; }
.ot-dur    { font-family: monospace; font-weight: 800; font-size: .92rem; color: var(--att-ink); }

.anomaly-pill {
  display: inline-block; background: #fee2e2; color: #b91c1c;
  font-size: .72rem; font-weight: 700;
  padding: .18em .65em; border-radius: 999px; margin: .1rem;
}
.anom-dot {
  display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px; border-radius: 50%;
  background: #fee2e2; color: #ef4444; font-size: .65rem; cursor: default;
}
.locked-icon { color: #f59e0b; font-size: .78rem; margin-left: .25rem; }


/* ─── 8. Employee avatar & chips ────────────────────────────────────────── */
.emp-av {
  width: 32px; height: 32px; border-radius: 50%; flex-shrink: 0;
  background: linear-gradient(135deg, var(--att-brand));
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: .65rem; font-weight: 700;
}
.emp-av.sm { width: 28px; height: 28px; font-size: .62rem; }
.emp-av.lg { width: 60px; height: 60px; font-size: 1.3rem; border: 3px solid #fff; box-shadow: 0 4px 14px rgba(0,0,0,.15); }
.emp-cell  { display: flex; align-items: center; gap: .55rem; }
.emp-name  { font-weight: 600; color: var(--att-ink); }
.emp-chip  { display: flex; align-items: center; gap: .5rem; }
.ei {
  width: 32px; height: 32px; border-radius: 50%;
  background: linear-gradient(135deg, var(--att-brand), var(--att-brand-soft));
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-weight: 700; font-size: .72rem; flex-shrink: 0;
}


/* ─── 9. Pagination ─────────────────────────────────────────────────────── */
.pg-wrap {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: .5rem; padding: .75rem 1.25rem;
  border-top: 1px solid var(--att-line-faint);
}
.pg-info  { font-size: .8rem; color: var(--att-muted); }
.pg-links { display: flex; gap: .3rem; align-items: center; }
.pg-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; border-radius: 7px;
  font-size: .82rem; font-weight: 600;
  background: #fff; border: 1.5px solid var(--att-line); color: var(--att-ink-soft);
  text-decoration: none; transition: .15s;
}
.pg-btn:hover  { border-color: var(--att-brand); color: var(--att-brand); }
.pg-btn.active { background: var(--att-brand); border-color: var(--att-brand); color: #fff; }


/* ─── 10. Empty state ───────────────────────────────────────────────────── */
.empty-state { text-align: center; padding: 4rem 1rem; color: var(--att-faint); }
.empty-state i { font-size: 3.5rem; display: block; margin-bottom: .75rem; opacity: .5; }
.empty-state h5, .empty-state h6 { font-weight: 700; color: #475569; }


/* ─── 11. KPI Cards (Dashboard) ─────────────────────────────────────────── */
.kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(175px, 1fr));
  gap: .875rem; margin-bottom: 1.5rem;
}
.kpi-card {
  background: #fff; border: 1px solid var(--att-line-soft);
  border-radius: var(--att-radius-lg); padding: 1.1rem 1.15rem .95rem;
  box-shadow: var(--att-shadow-sm);
  position: relative; overflow: hidden;
  transition: transform .18s, box-shadow .18s;
}
.kpi-card:hover { transform: translateY(-2px); box-shadow: var(--att-shadow-md); }
.kpi-card::after {
  content: ''; position: absolute; right: -14px; bottom: -14px;
  width: 70px; height: 70px; border-radius: 50%; opacity: .07;
}
.kpi-green::after  { background: #22c55e; }
.kpi-red::after    { background: #ef4444; }
.kpi-amber::after  { background: #f59e0b; }
.kpi-teal::after   { background: #14b8a6; }
.kpi-indigo::after { background: #6366f1; }
.kpi-rose::after   { background: #f43f5e; }
.kpi-blue::after   { background: #3b82f6; }
.kpi-slate::after  { background: #64748b; }

.kpi-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: .5rem; margin-bottom: .55rem;
}
.kpi-label {
  font-size: .71rem; font-weight: 700; color: var(--att-faint);
  text-transform: uppercase; letter-spacing: .06em; line-height: 1.2; padding-top: .05rem;
}
.kpi-icon-box {
  width: 36px; height: 36px; border-radius: 10px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 1rem; color: #fff;
}
.kpi-green  .kpi-icon-box { background: linear-gradient(135deg,#16a34a,#22c55e); }
.kpi-red    .kpi-icon-box { background: linear-gradient(135deg,#dc2626,#ef4444); }
.kpi-amber  .kpi-icon-box { background: linear-gradient(135deg,#d97706,#f59e0b); }
.kpi-teal   .kpi-icon-box { background: linear-gradient(135deg,#0d9488,#14b8a6); }
.kpi-indigo .kpi-icon-box { background: linear-gradient(135deg,#4f46e5,#6366f1); }
.kpi-rose   .kpi-icon-box { background: linear-gradient(135deg,#e11d48,#f43f5e); }
.kpi-blue   .kpi-icon-box { background: linear-gradient(135deg,#2563eb,#3b82f6); }
.kpi-slate  .kpi-icon-box { background: linear-gradient(135deg,#475569,#64748b); }

.kpi-val   { font-size: 1.85rem; font-weight: 900; color: var(--att-ink); line-height: 1; margin-bottom: .18rem; }
.kpi-value { font-size: 1.7rem;  font-weight: 900; color: var(--att-ink); line-height: 1; } /* legacy */
.kpi-sub   { font-size: .72rem; color: var(--att-faint); }

.sec-hdr {
  display: flex; align-items: center; justify-content: space-between;
  gap: .6rem; margin-bottom: 1rem;
}
.sec-hdr h6 { font-weight: 800; color: var(--att-ink); font-size: .95rem; margin: 0; flex: 1; }
.sec-hdr a  { font-size: .78rem; color: var(--att-brand); font-weight: 600; text-decoration: none; }
.sec-hdr a:hover { text-decoration: underline; }

.panel-card .panel-hdr {
  padding: .85rem 1.25rem; border-bottom: 1px solid #f0f4f8;
  background: var(--att-bg); border-radius: var(--att-radius) var(--att-radius) 0 0;
  display: flex; align-items: center; justify-content: space-between;
}
.panel-card .panel-hdr h6 { margin: 0; font-weight: 700; font-size: .88rem; color: var(--att-ink); display:flex; align-items:center; }


/* ─── 12. Approval boxes & alerts ───────────────────────────────────────── */
.approval-box {
  border: 2px solid var(--att-line); border-radius: var(--att-radius);
  padding: 1.5rem; background: var(--att-bg);
}
.approval-box.pending  { border-color: #fcd34d; background: #fffbeb; }
.approval-box.approved { border-color: #86efac; background: #f0fdf4; }
.approval-box.rejected { border-color: #fca5a5; background: #fef2f2; }

.ab-head { display: flex; align-items: center; gap: .75rem; }
.ab-icon {
  width: 44px; height: 44px; border-radius: 12px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center; font-size: 1.3rem;
}
.ab-icon.pending  { background: #fef3c7; color: #d97706; }
.ab-icon.approved { background: #dcfce7; color: #15803d; }
.ab-icon.rejected { background: #fee2e2; color: #b91c1c; }
.ab-icon.muted    { background: var(--att-line-faint); color: var(--att-muted); }
.ab-title { font-weight: 900; font-size: 1rem; }
.ab-title.pending  { color: #92400e; }
.ab-title.approved { color: #15803d; }
.ab-title.rejected { color: #b91c1c; }
.ab-title.muted    { color: #475569; }
.ab-sub   { font-size: .78rem; }
.ab-note  { font-size: .85rem; border-radius: 9px; padding: .7rem 1rem; margin: .75rem 0 0; }
.ab-note.approved { color: #166534; background: #d1fae5; }
.ab-note.rejected { color: #991b1b; background: #fee2e2; }

.approval-alert {
  display: flex; align-items: center; gap: 1rem;
  padding: 1rem 1.25rem;
  border: 1.5px solid; border-radius: var(--att-radius); margin-bottom: .75rem;
}
.approval-alert .al-icon {
  width: 40px; height: 40px; border-radius: 11px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center; font-size: 1.2rem;
}
.approval-alert.wfh-al  { background: #fffbeb; border-color: #fcd34d; }
.approval-alert.wfh-al .al-icon { background: #fef3c7; color: #d97706; }
.approval-alert.wfh-al .al-title{ color: #92400e; }
.approval-alert.ot-al   { background: #eff6ff; border-color: #93c5fd; }
.approval-alert.ot-al .al-icon  { background: #dbeafe; color: #1d4ed8; }
.approval-alert.ot-al .al-title { color: #1e3a8a; }
.approval-alert .al-title { font-weight: 800; font-size: 1.3rem; line-height: 1; margin-bottom: .2rem; }
.approval-alert .al-sub   { font-size: .78rem; font-weight: 500; opacity: .7; }


/* ─── 13. Punch timeline (DA detail) ───────────────────────────────────── */
.punch-tl { position: relative; padding-left: 1.4rem; }
.punch-tl::before {
  content: ''; position: absolute; left: .45rem; top: 0; bottom: 0;
  width: 2px; background: var(--att-line);
}
.punch-item { position: relative; margin-bottom: 1rem; padding-left: .75rem; }
.punch-item:last-child { margin-bottom: 0; }
.punch-dot {
  position: absolute; left: -1.3rem; top: .4rem;
  width: 12px; height: 12px; border-radius: 50%;
  border: 2px solid #fff; box-shadow: 0 0 0 2px currentColor;
}
.punch-item.ptype-check_in,  .pcheck_in  { color: #22c55e; }
.punch-item.ptype-check_out, .pcheck_out { color: #ef4444; }
.punch-item.ptype-break_out, .pbreak_out { color: #f59e0b; }
.punch-item.ptype-break_in,  .pbreak_in  { color: #3b82f6; }
.punch-item.ptype-auto,      .pauto      { color: #94a3b8; }
.ptype-check_in  .punch-dot  { background: #22c55e; }
.ptype-check_out .punch-dot  { background: #ef4444; }
.ptype-break_out .punch-dot  { background: #f59e0b; }
.ptype-break_in  .punch-dot  { background: #3b82f6; }
.ptype-auto      .punch-dot  { background: #94a3b8; }

.punch-card {
  background: var(--att-bg); border: 1px solid var(--att-line-soft);
  border-radius: 10px; padding: .65rem 1rem;
}
.punch-type-pill {
  display: inline-block; padding: .18em .65em; border-radius: 999px;
  font-size: .72rem; font-weight: 700;
}
.ptype-check_in,  .punch-type-pill.ptype-check_in  { background: #dcfce7; color: #15803d; }
.ptype-check_out, .punch-type-pill.ptype-check_out { background: #fee2e2; color: #b91c1c; }
.ptype-break_out, .punch-type-pill.ptype-break_out { background: #fef9c3; color: #92400e; }
.ptype-break_in,  .punch-type-pill.ptype-break_in  { background: #dbeafe; color: #1d4ed8; }
.ptype-auto,      .punch-type-pill.ptype-auto      { background: var(--att-line-faint); color: #475569; }
.punch-time { font-family: monospace; font-size: .88rem; font-weight: 700; color: var(--att-ink); }
.punch-date { font-size: .72rem; color: var(--att-faint); }
.nav-day-btn {
  display: inline-flex; align-items: center; gap: .3rem;
  background: #fff; border: 1.5px solid var(--att-line);
  border-radius: 8px; padding: .38rem .8rem;
  font-size: .82rem; font-weight: 600; text-decoration: none;
  color: var(--att-brand); transition: .15s;
}
.nav-day-btn:hover { background: var(--att-bg); border-color: #c5d2e0; color: var(--att-brand); }


/* ─── 14. Punch source badges ───────────────────────────────────────────── */
.src-badge {
  display: inline-flex; align-items: center; gap: .25rem;
  font-size: .72rem; font-weight: 600;
  padding: .18em .6em; border-radius: 7px;
  background: var(--att-line-faint); color: #475569;
}
.src-badge.biometric  { background: #f0fdf4; color: #15803d; }
.src-badge.mobile_app { background: #eff6ff; color: #1d4ed8; }
.src-badge.web        { background: #faf5ff; color: #7c3aed; }
.src-badge.manual     { background: #fff7ed; color: #ea580c; }
.src-badge.api        { background: #f0fdfa; color: #0d9488; }


/* ─── 15. Shift list cards ──────────────────────────────────────────────── */
.shift-card-top    { height: 7px; }
.shift-card-body   { padding: 1.1rem 1.25rem; }
.shift-card-actions{
  border-top: 1px solid var(--att-line-faint); padding: .6rem 1.25rem;
  background: var(--att-bg-soft); display: flex; gap: .4rem; justify-content: flex-end; align-items: center;
}
.shift-name      { font-weight: 800; font-size: 1.05rem; color: var(--att-ink); margin: 0; line-height: 1.2; }
.shift-code-tag  {
  display: inline-block; font-size: .72rem; font-weight: 700;
  padding: .18em .65em; border-radius: 6px;
  background: var(--att-line-faint); color: #475569; font-family: monospace; margin-top: .25rem;
}
.shift-time-row  { display: flex; align-items: center; gap: .5rem; margin: .6rem 0;
                   font-size: .83rem; color: var(--att-ink-soft); }
.shift-time-badge{
  font-family: monospace; font-weight: 700; font-size: .85rem; color: var(--att-ink);
  background: var(--att-bg); border: 1px solid var(--att-line);
  border-radius: 6px; padding: .15em .5em;
}
.shift-meta      { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; margin-top: .5rem; }
.smeta-item      { display: flex; align-items: center; gap: .25rem; font-size: .75rem; color: var(--att-muted); }
.smeta-item i    { font-size: .78rem; color: var(--att-brand); opacity: .5; }

/* Shift detail extras */
.shift-badge-wrap { margin-top: -20px; display: inline-flex; align-items: center; gap: .75rem; }
.shift-circle {
  width: 56px; height: 56px; border-radius: 50%;
  border: 4px solid #fff; box-shadow: 0 4px 16px rgba(0,0,0,.2);
  flex-shrink: 0; display: flex; align-items: center; justify-content: center;
  font-size: 1.15rem; color: #fff; font-weight: 800;
}
.etc { border: 1px solid var(--att-line-soft); border-radius: var(--att-radius);
       box-shadow: var(--att-shadow); overflow: hidden; background: #fff; }
.eth { padding: .85rem 1.25rem; background: var(--att-bg);
       border-bottom: 1px solid #eef2f7;
       display: flex; align-items: center; justify-content: space-between; }
.eth h6 { margin: 0; font-weight: 700; font-size: .9rem; color: var(--att-ink); }
.er  { display: flex; align-items: center; gap: .85rem; padding: .6rem 1.25rem;
       border-bottom: 1px solid var(--att-bg); font-size: .82rem; }
.er:last-child { border-bottom: none; }

#sTabs.tabs-shell, ul#sTabs {
  background: #fff; border: 1px solid var(--att-line); border-radius: var(--att-radius);
  padding: .4rem .5rem; margin-bottom: 1.5rem;
  display: flex; gap: .25rem; overflow-x: auto; box-shadow: var(--att-shadow-sm);
}
#sTabs .nav-link {
  display: flex; align-items: center; gap: .4rem;
  color: var(--att-muted); font-size: .83rem; font-weight: 600;
  border: none; border-radius: 9px; padding: .45rem .95rem;
  white-space: nowrap; transition: background .15s, color .15s;
}
#sTabs .nav-link.active {
  background: var(--att-brand) !important; color: #fff !important;
  box-shadow: 0 3px 10px rgba(33,51,75,.25) !important;
}
#sTabs .nav-link:hover:not(.active) {
  background: var(--att-line-faint) !important; color: var(--att-brand) !important;
}


/* ─── 16. WFH request pipeline cards ────────────────────────────────────── */
.wfh-card {
  background: #fff; border: 1px solid var(--att-line-soft);
  border-radius: var(--att-radius); overflow: hidden;
  box-shadow: var(--att-shadow); display: flex; transition: box-shadow .15s;
}
.wfh-card:hover { box-shadow: 0 6px 22px rgba(33,51,75,.09); }
.wfh-card-left  { width: 5px; flex-shrink: 0; }
.wfh-card-left.pending   { background: linear-gradient(180deg,#f59e0b,#fcd34d); }
.wfh-card-left.approved  { background: linear-gradient(180deg,#059669,#34d399); }
.wfh-card-left.rejected  { background: linear-gradient(180deg,#dc2626,#f87171); }
.wfh-card-left.cancelled { background: linear-gradient(180deg,#94a3b8,#cbd5e1); }
.wfh-card-body { padding: .85rem 1.1rem; flex: 1; }
.wfh-card-actions {
  padding: .6rem 1rem; border-top: 1px solid var(--att-line-faint);
  background: var(--att-bg-soft); display: flex; gap: .4rem;
  align-items: center; flex-wrap: wrap;
}
.wfh-dates {
  display: flex; align-items: center; gap: .4rem;
  font-size: .8rem; color: var(--att-ink-soft); flex-wrap: wrap;
}
.wfh-date {
  font-family: monospace; font-weight: 700;
  background: var(--att-bg); border: 1px solid var(--att-line);
  border-radius: 5px; padding: .1em .5em;
}
.wfh-days-badge {
  background: #eff6ff; color: #1d4ed8;
  font-size: .72rem; font-weight: 700;
  padding: .15em .6em; border-radius: 999px;
}
.wfh-reason { font-size: .8rem; color: var(--att-muted); margin-top: .35rem; font-style: italic; line-height: 1.35; }


/* ─── 17. Overtime pipeline stats ───────────────────────────────────────── */
.pipe-stats { display: flex; gap: .75rem; flex-wrap: wrap; margin-bottom: 1.25rem; }
.pipe-stat  {
  flex: 1; min-width: 120px;
  background: #fff; border: 1px solid var(--att-line-soft);
  border-radius: 12px; padding: .85rem 1rem;
  box-shadow: var(--att-shadow-sm);
}
.pipe-stat-val   { font-size: 1.75rem; font-weight: 900; line-height: 1; }
.pipe-stat-label { font-size: .72rem; font-weight: 700; text-transform: uppercase;
                   letter-spacing: .06em; margin-top: .15rem; opacity: .65; }


/* ─── 18. Roster Week Planner ───────────────────────────────────────────── */

/* Week navigation bar */
.week-nav {
  display: flex; align-items: center; gap: .6rem;
  flex-wrap: wrap; margin-bottom: 1rem;
  background: #fff; border: 1px solid var(--att-line-soft);
  border-radius: 14px; padding: .7rem 1rem;
  box-shadow: var(--att-shadow-sm);
}
.wk-btn {
  display: inline-flex; align-items: center; gap: .3rem;
  background: var(--att-bg); border: 1.5px solid var(--att-line);
  border-radius: 9px; padding: .4rem .9rem;
  font-size: .83rem; font-weight: 700; color: var(--att-ink-soft);
  text-decoration: none; transition: .15s; flex-shrink: 0;
}
.wk-btn:hover { border-color: var(--att-brand); color: var(--att-brand); background: #fff; }
.wk-range {
  flex: 1; text-align: center;
}
.wk-label {
  font-weight: 900; font-size: 1.05rem; color: var(--att-ink); display: block;
}
.wk-sublabel {
  font-size: .73rem; color: var(--att-faint); font-weight: 500;
}
.wk-today {
  display: inline-flex; align-items: center; gap: .3rem;
  background: var(--att-brand); color: #fff;
  border: none; border-radius: 9px; padding: .4rem .9rem;
  font-size: .83rem; font-weight: 700; text-decoration: none; transition: .15s; flex-shrink: 0;
}
.wk-today:hover { background: var(--att-brand-hover); color: #fff; box-shadow: 0 4px 12px rgba(33,51,75,.25); }

/* Week summary stat chips */
.week-summary {
  display: flex; gap: .5rem; flex-wrap: wrap; margin-bottom: 1rem;
}
.ws-stat {
  display: flex; align-items: center; gap: .45rem;
  background: #fff; border: 1px solid var(--att-line-soft);
  border-radius: 10px; padding: .45rem .9rem;
  font-size: .8rem; box-shadow: var(--att-shadow-sm);
}
.ws-stat-icon {
  width: 26px; height: 26px; border-radius: 7px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: .82rem; color: #fff;
}
.ws-stat-val  { font-weight: 800; font-size: .9rem; color: var(--att-ink); }
.ws-stat-label{ font-size: .72rem; color: var(--att-faint); font-weight: 500; }

/* Department filter */
.dept-filter {
  display: flex; gap: .4rem; flex-wrap: wrap; align-items: center;
  margin-bottom: 1rem; padding: .6rem .85rem;
  background: #fff; border: 1px solid var(--att-line-soft);
  border-radius: 12px; box-shadow: var(--att-shadow-sm);
}
.df-label {
  font-size: .72rem; font-weight: 700; color: var(--att-faint);
  text-transform: uppercase; letter-spacing: .05em; margin-right: .25rem;
  flex-shrink: 0;
}
.df-btn {
  display: inline-flex; align-items: center; gap: .3rem; padding: .28rem .75rem;
  border-radius: 999px; font-size: .78rem; font-weight: 600;
  text-decoration: none; border: 1.5px solid var(--att-line);
  color: var(--att-ink-soft); background: var(--att-bg); transition: .15s; cursor: pointer;
}
.df-btn:hover { background: var(--att-brand); color: #fff; border-color: var(--att-brand); }
.df-btn.active { background: var(--att-brand); color: #fff; border-color: var(--att-brand);
                 box-shadow: 0 2px 8px rgba(33,51,75,.2); }

/* Shift legend panel */
.shift-legend-panel {
  background: #fff; border: 1px solid var(--att-line-soft);
  border-radius: 12px; padding: .65rem 1rem;
  margin-bottom: 1rem; box-shadow: var(--att-shadow-sm);
  display: flex; align-items: center; gap: .5rem; flex-wrap: wrap;
}
.shift-legend { display: flex; gap: .4rem; flex-wrap: wrap; align-items: center; }
.leg-chip {
  display: inline-flex; align-items: center; gap: .35rem;
  font-size: .75rem; font-weight: 600;
  padding: .28em .8em; border-radius: 8px;
  background: var(--att-bg); border: 1px solid var(--att-line); color: var(--att-ink-soft);
  transition: .12s;
}
.leg-chip:hover { border-color: #c5d2e0; background: #f8fafc; }
.leg-dot   { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }
.leg-square{ width: 9px; height: 9px; border-radius: 2px; display: inline-block; flex-shrink: 0; }
.leg-divider { width: 1px; height: 18px; background: var(--att-line-soft); flex-shrink: 0; }
.leg-label {
  font-size: .72rem; font-weight: 700; color: var(--att-faint);
  text-transform: uppercase; letter-spacing: .05em; flex-shrink: 0;
}

/* Planner grid wrapper */
.planner-wrap {
  background: #fff; border: 1px solid var(--att-line-soft);
  border-radius: var(--att-radius-lg); overflow: hidden;
  box-shadow: var(--att-shadow-md);
}
.planner-scroll { overflow-x: auto; scrollbar-width: thin; scrollbar-color: #cbd5e0 transparent; }
.planner-scroll::-webkit-scrollbar { height: 5px; }
.planner-scroll::-webkit-scrollbar-track { background: transparent; }
.planner-scroll::-webkit-scrollbar-thumb { background: #cbd5e0; border-radius: 3px; }

table.planner {
  width: 100%; border-collapse: separate; border-spacing: 0; min-width: 960px;
}

/* Planner column header */
table.planner thead th {
  background: var(--att-bg); font-size: .71rem; font-weight: 800;
  text-transform: uppercase; letter-spacing: .06em; color: var(--att-faint);
  padding: .9rem .6rem; border-bottom: 2px solid var(--att-line-soft);
  white-space: nowrap; text-align: center;
  position: sticky; top: 0; z-index: 3;
}
table.planner thead th.emp-col {
  text-align: left; min-width: 230px; padding-left: 1.25rem;
  left: 0; z-index: 5; border-right: 1px solid var(--att-line-soft);
}
table.planner thead th.today-col {
  background: #eff6ff; color: #1d4ed8; border-bottom-color: #93c5fd;
}
table.planner thead th.weekend-col {
  background: #fafafa;
}

/* Planner body rows */
table.planner tbody tr { transition: background .1s; }
table.planner tbody td {
  padding: .45rem .4rem; vertical-align: middle; text-align: center;
  border-bottom: 1px solid var(--att-line-faint); background: #fff;
  min-width: 100px;
}
table.planner tbody tr:hover td               { background: #f8fafc; }
table.planner tbody tr:hover td.emp-col     { background: #f8fafc; }
table.planner tbody td.today-col {
  background: #f0f7ff;
  border-left: 1px solid #bfdbfe; border-right: 1px solid #bfdbfe;
}
table.planner tbody td.weekend-col { background: #fafafa; }

/* Department header rows */
.dept-row td {
  background: var(--att-bg) !important; font-size: .72rem; font-weight: 800;
  text-transform: uppercase; letter-spacing: .06em; color: var(--att-faint);
  padding: .5rem 1.25rem !important; border-top: 2px solid var(--att-line-soft);
}
.dept-row .dept-label {
  display: flex; align-items: center; gap: .4rem;
}
.dept-row .dept-count {
  font-size: .68rem; background: var(--att-line-soft); color: var(--att-muted);
  padding: .1em .6em; border-radius: 999px; font-weight: 700; letter-spacing: 0;
  text-transform: none;
}

/* Day header */
.day-hdr { display: flex; flex-direction: column; align-items: center; gap: 1px; }
.day-name { font-size: .68rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; }
.day-num  { font-size: 1.1rem; font-weight: 900; line-height: 1.1; color: var(--att-ink); }
.day-num.today {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border-radius: 50%;
  background: var(--att-brand); color: #fff; font-size: .92rem;
}
.day-month { font-size: .63rem; color: var(--att-faint); font-weight: 500; }

/* Shift assignment cells */
.shift-cell {
  display: flex; flex-direction: column; align-items: center; gap: .09rem;
  padding: .45rem .55rem; border-radius: 9px; cursor: pointer;
  transition: all .15s; width: 100%; text-align: center;
  border: 1.5px solid transparent; position: relative;
}
.shift-cell:hover {
  filter: brightness(.92); transform: translateY(-1px);
  box-shadow: 0 3px 10px rgba(0,0,0,.12);
}
.shift-cell .sc-code {
  font-size: .76rem; font-weight: 900; line-height: 1; letter-spacing: .02em;
}
.shift-cell .sc-time {
  font-size: .63rem; opacity: .8; font-family: monospace; line-height: 1.1; font-weight: 600;
}

/* Off / Holiday cells */
.cell-off, .cell-holiday {
  display: flex; align-items: center; justify-content: center; gap: .25rem;
  border-radius: 9px; padding: .42rem .5rem;
  font-size: .72rem; font-weight: 700; width: 100%; cursor: pointer;
  transition: .15s;
}
.cell-off     { background: #f1f5f9; color: #64748b; border: 1.5px solid #e2e8f0; }
.cell-off:hover { background: #e2e8f0; }
.cell-holiday { background: #eff6ff; color: #1d4ed8; border: 1.5px solid #bfdbfe; }
.cell-holiday:hover { background: #dbeafe; }

/* Empty (unassigned) cells */
.cell-empty {
  display: flex; align-items: center; justify-content: center;
  width: 100%; height: 38px;
  border: 1.5px dashed #d1d5db; border-radius: 9px; cursor: pointer;
  color: #d1d5db; font-size: .9rem; transition: .15s;
}
.cell-empty:hover {
  border-color: var(--att-brand); color: var(--att-brand);
  background: rgba(33,51,75,.04);
}

/* ── Assign drawer (side panel, not floating popover) ── */
.assign-drawer {
  position: fixed; top: 0; right: -420px; width: 400px; height: 100vh;
  background: #fff; z-index: 1060;
  box-shadow: -8px 0 40px rgba(15,23,42,.15);
  transition: right .28s cubic-bezier(.4,0,.2,1);
  display: flex; flex-direction: column; overflow: hidden;
}
.assign-drawer.open { right: 0; }
.assign-drawer-hdr {
  padding: 1.25rem 1.5rem 1rem;
  background: #fff; border-bottom: 1px solid #e9eef5;
  color: #1e293b; flex-shrink: 0;
}
.assign-drawer-hdr .adh-label {
  font-size: .72rem; font-weight: 700; color: var(--att-brand);
  text-transform: uppercase; letter-spacing: .07em; margin-bottom: .25rem;
}
.assign-drawer-hdr h5 { margin: 0; font-weight: 900; font-size: 1.1rem; color: #1e293b; }
.assign-drawer-hdr .adh-date {
  font-size: .82rem; color: #64748b; margin-top: .2rem;
  display: flex; align-items: center; gap: .4rem;
}
.btn-drawer-close {
  position: absolute; top: 1rem; right: 1.25rem;
  background: #f1f5f9; border: none; color: #64748b;
  width: 30px; height: 30px; border-radius: 8px; cursor: pointer;
  display: flex; align-items: center; justify-content: center; font-size: 1rem;
  transition: .15s;
}
.btn-drawer-close:hover { background: #e2e8f0; color: #1e293b; }
.assign-drawer-body {
  flex: 1; overflow-y: auto; padding: 1.5rem;
  scrollbar-width: thin; scrollbar-color: #cbd5e0 transparent;
}
.ad-section-label {
  font-size: .7rem; font-weight: 800; color: var(--att-faint);
  text-transform: uppercase; letter-spacing: .07em; margin-bottom: .6rem;
}
.ad-shift-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; margin-bottom: 1.25rem;
}
.ad-shift-card {
  display: flex; flex-direction: column; align-items: flex-start; gap: .2rem;
  padding: .65rem .8rem; border-radius: 10px; cursor: pointer;
  border: 2px solid var(--att-line); background: var(--att-bg);
  transition: .15s; position: relative;
}
.ad-shift-card:hover { border-color: #94a3b8; background: #f8fafc; }
.ad-shift-card.selected { border-color: var(--att-brand); background: #f0f5ff; }
.ad-shift-card input[type=radio] { position: absolute; opacity: 0; width: 0; height: 0; }
.ad-shift-dot {
  width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0;
  position: absolute; top: .65rem; right: .65rem;
}
.ad-shift-code { font-weight: 900; font-size: .88rem; color: var(--att-ink); }
.ad-shift-name { font-size: .73rem; color: var(--att-muted); line-height: 1.2; }
.ad-shift-time {
  font-family: monospace; font-size: .72rem; font-weight: 700;
  padding: .12em .5em; border-radius: 5px; color: var(--att-ink-soft);
  background: rgba(0,0,0,.05);
}
.ad-day-type-opts {
  display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; margin-bottom: 1.5rem;
}
.ad-dtype-card {
  display: flex; align-items: center; gap: .5rem;
  padding: .6rem .85rem; border-radius: 10px; cursor: pointer;
  border: 2px solid var(--att-line); background: var(--att-bg); transition: .15s;
}
.ad-dtype-card:hover { border-color: #94a3b8; background: #f8fafc; }
.ad-dtype-card.selected-off           { border-color: #94a3b8; background: #f1f5f9; }
.ad-dtype-card.selected-hol           { border-color: #93c5fd; background: #eff6ff; }
.ad-dtype-card input[type=checkbox] { display: none; }
.ad-dtype-icon {
  width: 28px; height: 28px; border-radius: 8px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center; font-size: .88rem;
}
.ad-dtype-icon.off { background: #f1f5f9; color: #64748b; }
.ad-dtype-icon.hol { background: #eff6ff; color: #1d4ed8; }
.ad-dtype-label { font-size: .82rem; font-weight: 700; color: var(--att-ink-soft); }
.assign-drawer-footer {
  padding: 1rem 1.5rem; border-top: 1px solid var(--att-line-faint);
  background: var(--att-bg-soft); flex-shrink: 0;
  display: flex; gap: .5rem;
}

/* Backdrop */
.popover-backdrop {
  display: none; position: fixed; inset: 0; z-index: 1050;
  background: rgba(15,23,42,.25); backdrop-filter: blur(2px);
  transition: opacity .2s;
}

/* Legacy popover (keep for fallback) */
.assign-popover {
  display: none; position: fixed; z-index: 1060;
  background: #fff; border: 1px solid var(--att-line);
  border-radius: var(--att-radius); box-shadow: 0 12px 36px rgba(33,51,75,.18);
  padding: 1.25rem; min-width: 320px;
}
.assign-popover.active { display: block; }
.assign-popover .pop-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 1rem; padding-bottom: .75rem; border-bottom: 1px solid var(--att-line-faint);
}
.assign-popover .pop-close {
  background: none; border: none; color: var(--att-faint);
  font-size: 1.3rem; cursor: pointer; padding: 0; line-height: 1;
}
.assign-popover .pop-close:hover { color: var(--att-ink); }
.assign-popover .pop-label {
  font-size: .7rem; font-weight: 700; color: var(--att-faint);
  display: block; margin-bottom: .3rem; text-transform: uppercase; letter-spacing: .05em;
}
.assign-popover .pop-check {
  display: flex; align-items: center; gap: .4rem;
  font-size: .82rem; font-weight: 600; color: var(--att-ink-soft); cursor: pointer;
}


/* ─── 19. Roster Planner – Enhanced (lock states, modes, bulk, month) ─────── */

/* ── Mode switcher / top bar ── */
.planner-top-bar {
  display: flex; align-items: center; gap: .75rem; flex-wrap: wrap;
  margin-bottom: 1rem; padding: .7rem 1rem;
  background: #fff; border: 1px solid var(--att-line-soft);
  border-radius: 14px; box-shadow: var(--att-shadow-sm);
}
.plan-mode-tabs {
  display: inline-flex; border-radius: 10px; overflow: hidden;
  border: 1.5px solid var(--att-line); flex-shrink: 0;
}
.plan-mode-tabs a {
  display: inline-flex; align-items: center; gap: .3rem;
  padding: .38rem .9rem; font-size: .8rem; font-weight: 700;
  text-decoration: none; color: var(--att-ink-soft);
  background: var(--att-bg); transition: .15s; white-space: nowrap;
}
.plan-mode-tabs a + a { border-left: 1.5px solid var(--att-line); }
.plan-mode-tabs a:hover { background: #f1f5f9; color: var(--att-ink); }
.plan-mode-tabs a.active { background: var(--att-brand); color: #fff; }

/* ── Date navigation ── */
.plan-date-nav {
  display: flex; align-items: center; gap: .45rem; flex: 1; flex-wrap: wrap;
}
.plan-nav-btn {
  display: inline-flex; align-items: center; gap: .3rem;
  background: var(--att-bg); border: 1.5px solid var(--att-line);
  border-radius: 9px; padding: .38rem .85rem;
  font-size: .8rem; font-weight: 700; color: var(--att-ink-soft);
  text-decoration: none; transition: .15s; white-space: nowrap;
}
.plan-nav-btn:hover { border-color: var(--att-brand); color: var(--att-brand); background: #fff; }
.plan-nav-label {
  flex: 1; text-align: center; font-weight: 900; font-size: 1rem;
  color: var(--att-ink); white-space: nowrap; padding: 0 .25rem;
}
.plan-nav-today {
  display: inline-flex; align-items: center; gap: .3rem;
  background: var(--att-brand); color: #fff; border: none;
  border-radius: 9px; padding: .38rem .85rem;
  font-size: .8rem; font-weight: 700; text-decoration: none;
  transition: .15s; white-space: nowrap;
}
.plan-nav-today:hover { background: var(--att-brand-hover); color: #fff; box-shadow: 0 4px 12px rgba(33,51,75,.25); }

/* ── Copy-last-week button ── */
.btn-copy-week {
  display: inline-flex; align-items: center; gap: .35rem;
  background: var(--att-bg); border: 1.5px solid var(--att-line);
  border-radius: 9px; padding: .38rem .9rem;
  font-size: .8rem; font-weight: 700; color: var(--att-ink-soft);
  cursor: pointer; transition: .15s; white-space: nowrap; flex-shrink: 0;
}
.btn-copy-week:hover { border-color: #7c3aed; color: #7c3aed; background: #faf5ff; }

/* ── Three-state lock ── */
.cell-past .shift-cell,
.cell-past .cell-off,
.cell-past .cell-holiday,
.cell-past .cell-empty { opacity: .72; filter: saturate(.55); }

.cell-locked-wrap {
  display: flex; flex-direction: column; align-items: center; gap: .06rem;
  padding: .38rem .4rem; border-radius: 9px;
  background: #f1f5f9; border: 1.5px solid #e2e8f0;
  color: #94a3b8; font-size: .68rem; font-weight: 700;
  cursor: not-allowed; width: 100%;
}
.cell-locked-wrap .lock-icon { font-size: .72rem; opacity: .7; }
.cell-locked-wrap .lock-code { font-size: .72rem; }

/* ── Apply-to section in drawer ── */
.ad-apply-section {
  display: flex; flex-direction: column; gap: .45rem; margin-bottom: 1.25rem;
}
.ad-apply-row {
  display: flex; align-items: center; gap: .65rem;
  padding: .6rem .85rem; border-radius: 10px; cursor: pointer;
  border: 2px solid var(--att-line); background: var(--att-bg); transition: .15s;
}
.ad-apply-row:hover { border-color: #94a3b8; background: #f8fafc; }
.ad-apply-row.active { border-color: var(--att-brand); background: #f0f5ff; }
.ad-apply-row input[type=radio] { display: none; }
.ad-apply-icon {
  width: 28px; height: 28px; border-radius: 8px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: .9rem; background: var(--att-line-faint); color: var(--att-brand);
}
.ad-apply-label { font-size: .83rem; font-weight: 700; color: var(--att-ink); line-height: 1.2; }
.ad-apply-sub   { font-size: .72rem; color: var(--att-faint); font-weight: 500; }

/* Custom day picker */
.custom-day-picker {
  padding: .6rem .85rem; border-radius: 10px;
  background: #f8fafc; border: 1.5px solid #e2e8f0; margin-bottom: .75rem;
}
.cdp-label {
  font-size: .7rem; font-weight: 700; color: var(--att-faint);
  text-transform: uppercase; letter-spacing: .06em; margin-bottom: .5rem;
}
.cdp-days { display: flex; gap: .35rem; flex-wrap: wrap; }
.cdp-day {
  display: flex; flex-direction: column; align-items: center; gap: .12rem;
  padding: .4rem .45rem; border-radius: 8px; cursor: pointer;
  border: 1.5px solid var(--att-line); background: #fff;
  transition: .15s; min-width: 36px; user-select: none;
}
.cdp-day:hover { border-color: var(--att-brand); }
.cdp-day input[type=checkbox] { display: none; }
.cdp-day.checked { background: var(--att-brand); border-color: var(--att-brand); }
.cdp-day.checked .cdp-day-name,
.cdp-day.checked .cdp-day-num { color: #fff; }
.cdp-day-name {
  font-size: .63rem; font-weight: 800; text-transform: uppercase;
  letter-spacing: .04em; color: var(--att-faint);
}
.cdp-day-num { font-size: .85rem; font-weight: 900; color: var(--att-ink); line-height: 1; }

/* ── Monthly planner ── */
.month-planner-wrap {
  background: #fff; border: 1px solid var(--att-line-soft);
  border-radius: var(--att-radius-lg); overflow: hidden;
  box-shadow: var(--att-shadow-md);
}
.month-scroll {
  overflow-x: auto; scrollbar-width: thin; scrollbar-color: #cbd5e0 transparent;
}
.month-scroll::-webkit-scrollbar { height: 5px; }
.month-scroll::-webkit-scrollbar-thumb { background: #cbd5e0; border-radius: 3px; }

table.month-table {
  width: 100%; border-collapse: separate; border-spacing: 0; min-width: 900px;
}
table.month-table thead th {
  background: var(--att-bg); font-size: .62rem; font-weight: 800;
  color: var(--att-faint); padding: .55rem .15rem;
  border-bottom: 2px solid var(--att-line-soft);
  text-align: center; position: sticky; top: 0; z-index: 3; white-space: nowrap;
}
table.month-table thead th.m-emp-col {
  text-align: left; min-width: 200px; padding-left: 1rem;
  left: 0; z-index: 5; border-right: 1px solid var(--att-line-soft);
}
table.month-table thead th.m-today   { background: #eff6ff; color: #1d4ed8; }
table.month-table thead th.m-weekend { background: #fafafa; }
table.month-table tbody td {
  padding: .25rem .1rem; vertical-align: middle; text-align: center;
  border-bottom: 1px solid var(--att-line-faint); background: #fff;
  width: 26px; min-width: 24px;
}
table.month-table tbody td.m-emp-col {
  text-align: left; padding: .4rem 1rem; white-space: nowrap;
  position: sticky; left: 0; z-index: 2;
  border-right: 1px solid var(--att-line-soft); background: #fff; min-width: 200px;
}
table.month-table tbody tr:hover td               { background: #f8fafc; }
table.month-table tbody tr:hover td.m-emp-col     { background: #f8fafc; }
table.month-table tbody td.m-today   { background: #f0f7ff;
  border-left: 1px solid #bfdbfe; border-right: 1px solid #bfdbfe; }
table.month-table tbody td.m-weekend { background: #fafafa; }

/* Mini squares */
.msq {
  display: inline-block; width: 15px; height: 15px; border-radius: 3px;
  cursor: pointer; transition: transform .1s, box-shadow .1s;
}
.msq:hover { transform: scale(1.35); box-shadow: 0 2px 8px rgba(0,0,0,.22); position: relative; z-index: 10; }
.msq-off     { background: #e2e8f0; }
.msq-hol     { background: #bfdbfe; }
.msq-empty   { background: #f1f5f9; border: 1.5px dashed #d1d5db; }
.msq-empty:hover { border-color: var(--att-brand); }
.msq-locked  {
  background: #f1f5f9; border: 1px solid #e2e8f0; cursor: not-allowed;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: .6rem; color: #94a3b8; line-height: 1;
}
.msq-past { opacity: .65; filter: saturate(.45); }

/* ── Daily mode extra columns ── */
.da-punch-time { font-family: monospace; font-size: .7rem; color: var(--att-faint); display: block; }
.da-status-chip {
  display: inline-block; font-size: .65rem; font-weight: 700;
  padding: .12em .55em; border-radius: 999px; white-space: nowrap;
}
.da-chip-present    { background: #dcfce7; color: #15803d; }
.da-chip-absent     { background: #fee2e2; color: #b91c1c; }
.da-chip-late       { background: #fef3c7; color: #92400e; }
.da-chip-wfh        { background: #ede9fe; color: #6d28d9; }
.da-chip-half_day   { background: #dbeafe; color: #1d4ed8; }
.da-chip-weekly_off { background: #f1f5f9; color: #64748b; }
.da-chip-holiday    { background: #eff6ff; color: #1d4ed8; }
.da-chip-on_leave   { background: #fce7f3; color: #be185d; }
.da-chip-none       { background: #f1f5f9; color: #94a3b8; }

/* ── Toast ── */
.planner-toast {
  position: fixed; bottom: 1.5rem; right: 1.5rem; z-index: 9999;
  min-width: 280px; max-width: 380px;
  background: #1e293b; color: #fff; border-radius: 12px;
  padding: .85rem 1.1rem; box-shadow: 0 8px 30px rgba(15,23,42,.35);
  display: flex; align-items: flex-start; gap: .65rem;
  font-size: .85rem; font-weight: 600;
  animation: toastIn .25s ease; pointer-events: none;
}
.planner-toast.toast-success .toast-icon { color: #4ade80; }
.planner-toast.toast-info    .toast-icon { color: #38bdf8; }
.planner-toast.toast-error   .toast-icon { color: #f87171; }
.toast-icon { font-size: 1.1rem; flex-shrink: 0; margin-top: .05rem; }
@keyframes toastIn {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: none; }
}

/* ── Copy-week confirm overlay ── */
.copy-confirm-overlay {
  display: none; position: fixed; inset: 0; z-index: 2000;
  background: rgba(15,23,42,.4); backdrop-filter: blur(3px);
  align-items: center; justify-content: center;
}
.copy-confirm-overlay.show { display: flex; }
.copy-confirm-box {
  background: #fff; border-radius: 18px; padding: 2rem;
  max-width: 440px; width: 90%; box-shadow: 0 20px 60px rgba(15,23,42,.25);
}
.copy-confirm-box h5 { font-weight: 900; margin-bottom: .5rem; }
.copy-confirm-box p  { color: var(--att-ink-soft); font-size: .88rem; margin-bottom: 1.5rem; }


/* ─── 20. Dashboard — punch row, shifts mini-list, anomalies, QL cards ─── */

/* hover lift utility */
.hover-lift { transition: transform .18s, box-shadow .18s; }
.hover-lift:hover { transform: translateY(-3px); box-shadow: 0 8px 28px rgba(33,51,75,.1); }

/* Warning quick-action button */
.btn-qaction {
  display: inline-flex; align-items: center; gap: .35rem;
  padding: .42rem 1rem; border-radius: 9px;
  font-size: .83rem; font-weight: 700; border: none;
  cursor: pointer; text-decoration: none; transition: .15s;
}
.btn-qaction.warning {
  background: #fef3c7; color: #92400e; border: 1.5px solid #fcd34d;
}
.btn-qaction.warning:hover { background: #fde68a; color: #78350f; }

/* Panel header link */
.att-link {
  display: inline-flex; align-items: center; gap: .25rem;
  color: var(--att-brand); font-size: .78rem; font-weight: 600;
  text-decoration: none; transition: .1s;
}
.att-link:hover { color: var(--att-brand-hover); text-decoration: underline; }

/* Recent Punch Activity rows */
.punch-row {
  display: flex; align-items: center; gap: .5rem;
  padding: .52rem 1.25rem; border-bottom: 1px solid var(--att-line-faint);
  transition: background .1s;
}
.punch-row:last-child { border-bottom: none; }
.punch-row:hover { background: var(--att-bg); }

.punch-dot-sm {
  width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0;
}
.punch-dot-sm.check_in  { background: #22c55e; }
.punch-dot-sm.check_out { background: #ef4444; }
.punch-dot-sm.break_out { background: #f59e0b; }
.punch-dot-sm.break_in  { background: #3b82f6; }
.punch-dot-sm.auto      { background: #94a3b8; }

.punch-emp {
  display: flex; align-items: center; flex: 1; min-width: 0;
  font-size: .83rem; font-weight: 600; color: var(--att-ink);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* Punch-type badge (dashboard list variant) */
.punch-type-badge {
  display: inline-flex; align-items: center;
  font-size: .7rem; font-weight: 700;
  padding: .15em .65em; border-radius: 999px; white-space: nowrap; flex-shrink: 0;
}
.punch-type-badge.check_in  { background: #dcfce7; color: #15803d; }
.punch-type-badge.check_out { background: #fee2e2; color: #b91c1c; }
.punch-type-badge.break_out { background: #fef9c3; color: #92400e; }
.punch-type-badge.break_in  { background: #dbeafe; color: #1d4ed8; }
.punch-type-badge.auto      { background: var(--att-line-faint); color: #475569; }

/* Active shift mini-list */
.shift-item {
  display: flex; align-items: center; gap: .55rem;
  padding: .52rem 1.25rem; border-bottom: 1px solid var(--att-line-faint);
  transition: background .1s;
}
.shift-item:last-child { border-bottom: none; }
.shift-item:hover { background: var(--att-bg); }

.shift-color-dot {
  width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0;
}
.shift-item .shift-name {
  flex: 1; font-size: .83rem; font-weight: 600; color: var(--att-ink);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.shift-item .shift-code {
  font-family: monospace; font-size: .72rem; font-weight: 700;
  background: var(--att-line-faint); color: #475569;
  padding: .12em .5em; border-radius: 5px; flex-shrink: 0;
}
.shift-item .shift-time {
  font-family: monospace; font-size: .78rem; font-weight: 600;
  color: var(--att-ink-soft); flex-shrink: 0;
}

/* Anomaly mini-list */
.anomaly-item {
  display: flex; align-items: center; gap: .6rem;
  padding: .52rem 1.25rem; border-bottom: 1px solid var(--att-line-faint);
  transition: background .1s;
}
.anomaly-item:last-child { border-bottom: none; }
.anomaly-item:hover { background: var(--att-bg); }

.anomaly-icon {
  width: 28px; height: 28px; border-radius: 8px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: #fff1f2; color: #e11d48; font-size: .85rem;
}
.anomaly-name {
  font-size: .83rem; font-weight: 600; color: var(--att-ink);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.anomaly-type {
  font-size: .72rem; color: var(--att-faint); margin-top: .06rem;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* Quick-link (QL) cards */
.ql-card {
  display: block; background: #fff;
  border: 1.5px solid var(--att-line); border-radius: 14px;
  padding: 1.1rem 1rem; text-align: center; text-decoration: none;
  transition: transform .18s, box-shadow .18s, border-color .18s;
}
.ql-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(33,51,75,.1);
  border-color: #c5d2e0; text-decoration: none;
}
.ql-icon {
  display: block; font-size: 1.75rem; margin-bottom: .4rem;
}
.ql-title {
  font-weight: 800; font-size: .88rem; color: var(--att-ink); margin-bottom: .15rem;
}
.ql-sub {
  font-size: .75rem; color: var(--att-faint);
}


/* ─── 21. Action Centre ──────────────────────────────────────────────────── */

/* Live pulsing dot */
.live-dot {
  display: inline-block; width: 9px; height: 9px; border-radius: 50%;
  background: #22c55e; flex-shrink: 0; margin-right: .4rem;
  animation: livePulse 1.8s ease-in-out infinite;
}
@keyframes livePulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(34,197,94,.5); }
  50%       { box-shadow: 0 0 0 6px rgba(34,197,94,0); }
}

/* Header buttons */
.btn-hdr {
  display: inline-flex; align-items: center; gap: .3rem;
  padding: .42rem 1rem; border-radius: 9px;
  font-size: .83rem; font-weight: 700;
  text-decoration: none; cursor: pointer; transition: .15s; border: 1.5px solid transparent;
}
.btn-hdr.ghost {
  background: #fff; color: var(--att-brand); border-color: var(--att-line);
}
.btn-hdr.ghost:hover { background: var(--att-bg); border-color: #c5d2e0; color: var(--att-brand); }
.btn-hdr.primary {
  background: var(--att-brand); color: #fff; border-color: var(--att-brand);
}
.btn-hdr.primary:hover {
  background: var(--att-brand-hover); color: #fff;
  transform: translateY(-1px); box-shadow: 0 4px 12px rgba(33,51,75,.25);
}

/* Today's snapshot strip */
.today-stats {
  display: flex; gap: .6rem; flex-wrap: wrap; margin-bottom: 1.5rem;
}
.ts-chip {
  display: flex; flex-direction: column; align-items: center;
  background: #fff; border: 1px solid var(--att-line-soft);
  border-radius: 12px; padding: .7rem 1.1rem; flex: 1; min-width: 80px;
  text-decoration: none; box-shadow: var(--att-shadow-sm);
  transition: transform .15s, box-shadow .15s;
  border-top-width: 3px;
}
.ts-chip:hover { transform: translateY(-2px); box-shadow: var(--att-shadow-md); }
.ts-chip-val {
  font-size: 1.6rem; font-weight: 900; line-height: 1;
}
.ts-chip-label {
  font-size: .72rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .04em; margin-top: .2rem;
}

/* Action Centre panel */
.ac-panel {
  background: #fff; border: 1px solid var(--att-line-soft);
  border-radius: var(--att-radius); box-shadow: var(--att-shadow);
  margin-bottom: 1rem; overflow: hidden;
}
.ac-panel-hdr {
  display: flex; align-items: center; justify-content: space-between;
  padding: .78rem 1.25rem; background: var(--att-bg);
  border-bottom: 1px solid #f0f4f8;
}
.ac-panel-hdr h6 {
  margin: 0; font-weight: 700; font-size: .88rem; color: var(--att-ink);
  display: flex; align-items: center; gap: .45rem;
}

/* Count badges */
.count-badge {
  display: inline-flex; align-items: center; justify-content: center;
  font-size: .68rem; font-weight: 800;
  padding: .15em .65em; border-radius: 999px; flex-shrink: 0;
}
.count-badge.warn { background: #fef3c7; color: #92400e; }
.count-badge.blue { background: #dbeafe; color: #1d4ed8; }
.count-badge.red  { background: #fee2e2; color: #b91c1c; }

/* See-all link */
.see-all {
  display: inline-flex; align-items: center; gap: .25rem;
  font-size: .78rem; font-weight: 600;
  color: var(--att-brand); text-decoration: none; flex-shrink: 0;
}
.see-all:hover { text-decoration: underline; }

/* Approval row */
.aprv-row {
  display: flex; align-items: center; gap: .75rem;
  padding: .75rem 1.25rem; border-bottom: 1px solid var(--att-line-faint);
  transition: background .1s;
}
.aprv-row:last-child { border-bottom: none; }
.aprv-row:hover { background: var(--att-bg); }

.aprv-name {
  font-weight: 700; font-size: .86rem; color: var(--att-ink);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.aprv-meta {
  font-size: .74rem; color: var(--att-faint); margin-top: .1rem;
  display: flex; align-items: center; gap: .25rem; flex-wrap: wrap;
}
.days-badge {
  display: inline-block;
  background: #eff6ff; color: #1d4ed8;
  font-size: .68rem; font-weight: 700;
  padding: .12em .55em; border-radius: 999px;
}
.aprv-actions {
  display: flex; align-items: center; gap: .3rem; flex-shrink: 0; margin-left: auto;
}

/* Small view button */
.btn-view-sm {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; border-radius: 7px;
  background: #eff6ff; color: #1d4ed8; border: none;
  font-size: .85rem; text-decoration: none; transition: .15s; flex-shrink: 0;
}
.btn-view-sm:hover { background: #dbeafe; color: #1d4ed8; }

/* Small approve/reject in aprv row */
.aprv-actions .btn-approve,
.aprv-actions .btn-reject {
  display: inline-flex; align-items: center; gap: .25rem;
  padding: .28rem .7rem; border-radius: 7px;
  font-size: .76rem; font-weight: 700;
  border: none; cursor: pointer; transition: .15s;
}

/* Empty state in action centre panels */
.ac-empty {
  display: flex; flex-direction: column; align-items: center; gap: .45rem;
  padding: 2.5rem 1rem; text-align: center; color: var(--att-faint);
  font-size: .82rem;
}
.ac-empty i { font-size: 2rem; }

/* Exception row (absent, late, anomaly) */
.exc-row {
  display: flex; align-items: center; gap: .65rem;
  padding: .6rem 1.25rem; border-bottom: 1px solid var(--att-line-faint);
  transition: background .1s;
}
.exc-row:last-child { border-bottom: none; }
.exc-row:hover { background: var(--att-bg); }

.exc-icon {
  width: 30px; height: 30px; border-radius: 9px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: .88rem;
}


/* ─── 22. Attendance Register — recon bar & status legend ──────────────── */

.recon-bar {
  display: flex; align-items: center; gap: .75rem; flex-wrap: wrap;
  background: #fffbeb; border: 1.5px solid #fcd34d;
  border-radius: var(--att-radius); padding: .75rem 1.1rem;
  margin-bottom: 1.25rem; font-size: .83rem; color: #92400e;
}
.recon-bar p { margin: 0; flex: 1; }

.status-legend {
  display: flex; gap: .5rem; flex-wrap: wrap; align-items: center;
  padding: .55rem 1.25rem; border-bottom: 1px solid var(--att-line-faint);
  background: var(--att-bg);
}
.leg-item {
  display: flex; align-items: center; gap: .3rem;
  font-size: .73rem; color: var(--att-muted); font-weight: 500;
}