/* ═══════════════════════════════════════════════════════════
   Webtrionix Staff Attendance — Frontend Admin Portal CSS
   ═══════════════════════════════════════════════════════════ */

/* ── Variables ── */
:root {
  --ap-bg:       #07080F;
  --ap-bg2:      #0F111A;
  --ap-bg3:      #161824;
  --ap-border:   rgba(255,255,255,.08);
  --ap-text:     #F0F2FF;
  --ap-muted:    #6B7280;
  --ap-accent:   #FF4D00;
  --ap-green:    #22D68A;
  --ap-blue:     #6366f1;
  --ap-yellow:   #F5A623;
  --ap-red:      #EF4444;
  --ap-teal:     #14b8a6;
  --ap-sidebar-w: 240px;
  --ap-header-h:  56px;
}

/* ── Reset within portal root ── */
.wsa-ap-root * { box-sizing: border-box; }
.wsa-ap-root { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; }

/* ── Loading screen ── */
.wsa-ap-loading {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  min-height: 340px; color: var(--ap-muted); gap: 16px;
}
.wsa-ap-spinner {
  width: 36px; height: 36px; border: 3px solid var(--ap-border);
  border-top-color: var(--ap-accent); border-radius: 50%;
  animation: ap-spin .7s linear infinite;
}
@keyframes ap-spin { to { transform: rotate(360deg); } }

/* ═══════════════════════════════════════
   LOGIN SCREEN
═══════════════════════════════════════ */
.wsa-ap-login-wrap {
  min-height: 100vh; display: flex; align-items: center; justify-content: center;
  background: var(--ap-bg); padding: 24px;
}
.wsa-ap-login-card {
  background: var(--ap-bg2); border: 1px solid var(--ap-border); border-radius: 16px;
  padding: 40px 36px; width: 100%; max-width: 420px;
  box-shadow: 0 20px 60px rgba(0,0,0,.6);
}
.wsa-ap-login-logo {
  text-align: center; margin-bottom: 28px;
}
.wsa-ap-login-logo .logo-icon {
  width: 52px; height: 52px; background: var(--ap-accent);
  border-radius: 14px; display: inline-flex; align-items: center; justify-content: center;
  font-size: 26px; margin-bottom: 12px;
}
.wsa-ap-login-logo h1 {
  font-size: 20px; font-weight: 800; color: var(--ap-text); margin: 0 0 4px;
}
.wsa-ap-login-logo p { font-size: 13px; color: var(--ap-muted); margin: 0; }

.ap-field { margin-bottom: 16px; }
.ap-field label { display: block; font-size: 11px; font-weight: 700; color: var(--ap-muted); text-transform: uppercase; letter-spacing: .5px; margin-bottom: 6px; }
.ap-field input, .ap-field select, .ap-field textarea {
  width: 100%; padding: 10px 14px; background: var(--ap-bg3);
  border: 1.5px solid var(--ap-border); border-radius: 8px;
  color: var(--ap-text); font-size: 14px; outline: none; transition: border-color .2s;
}
.ap-field input:focus, .ap-field select:focus, .ap-field textarea:focus {
  border-color: var(--ap-blue); box-shadow: 0 0 0 3px rgba(99,102,241,.15);
}
.ap-field select option { background: var(--ap-bg3); }
.ap-field textarea { resize: vertical; min-height: 80px; }

.ap-field input[type="date"] { color-scheme: dark; }

.ap-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 10px 18px; border-radius: 8px; font-size: 13px; font-weight: 700;
  cursor: pointer; border: 1.5px solid transparent; transition: all .15s;
  text-decoration: none; white-space: nowrap; line-height: 1.4;
}
.ap-btn--primary { background: var(--ap-accent); color: #fff; border-color: var(--ap-accent); width: 100%; padding: 12px; font-size: 15px; }
.ap-btn--primary:hover { background: #d94200; }
.ap-btn--sm { padding: 5px 12px; font-size: 12px; }
.ap-btn--xs { padding: 3px 8px; font-size: 11px; }
.ap-btn--outline { background: transparent; border-color: var(--ap-border); color: var(--ap-text); }
.ap-btn--outline:hover { border-color: var(--ap-muted); }
.ap-btn--ghost { background: rgba(255,255,255,.06); border-color: transparent; color: var(--ap-text); }
.ap-btn--ghost:hover { background: rgba(255,255,255,.1); }
.ap-btn--print,
#wsa-ap-root #ssPrint {
  background: #111827 !important;
  color: #fff !important;
  border-color: #111827 !important;
  width: auto !important;
}
.ap-btn--print:hover,
#wsa-ap-root #ssPrint:hover {
  background: #000 !important;
  color: #fff !important;
  border-color: #000 !important;
}
.ap-btn--danger { background: rgba(239,68,68,.15); border-color: rgba(239,68,68,.3); color: #f87171; }
.ap-btn--danger:hover { background: var(--ap-red); color: #fff; border-color: var(--ap-red); }
.ap-btn--success { background: rgba(34,214,138,.15); border-color: rgba(34,214,138,.3); color: var(--ap-green); }
.ap-btn--success:hover { background: var(--ap-green); color: #000; border-color: var(--ap-green); }
.ap-btn:disabled { opacity: .45; cursor: not-allowed; }

.ap-error {
  background: rgba(239,68,68,.12); border: 1px solid rgba(239,68,68,.25);
  color: #f87171; border-radius: 8px; padding: 10px 14px; font-size: 13px;
  margin-bottom: 16px; display: none;
}
.ap-error.visible { display: block; }
.ap-success {
  background: rgba(34,214,138,.12); border: 1px solid rgba(34,214,138,.25);
  color: var(--ap-green); border-radius: 8px; padding: 10px 14px; font-size: 13px;
  margin-bottom: 16px; display: none;
}
.ap-success.visible { display: block; }

/* ═══════════════════════════════════════
   MAIN LAYOUT
═══════════════════════════════════════ */
.wsa-ap-layout {
  display: flex; min-height: 100vh; background: var(--ap-bg);
  color: var(--ap-text);
}

/* ── Sidebar ── */
.wsa-ap-sidebar {
  width: var(--ap-sidebar-w); background: var(--ap-bg2);
  border-right: 1px solid var(--ap-border); display: flex; flex-direction: column;
  position: fixed; top: 0; left: 0; height: 100vh; z-index: 200;
  transition: transform .25s ease;
  overflow-y: auto;
}
.wsa-ap-sidebar.hidden { transform: translateX(-100%); }

.ap-sidebar-head {
  padding: 18px 16px; border-bottom: 1px solid var(--ap-border);
  display: flex; align-items: center; gap: 10px;
}
.ap-sidebar-head .logo { font-size: 20px; }
.ap-sidebar-head h2 { font-size: 14px; font-weight: 800; color: var(--ap-text); margin: 0; line-height: 1.2; }
.ap-sidebar-head p  { font-size: 10px; color: var(--ap-muted); margin: 0; }

.ap-nav { flex: 1; padding: 10px 8px; }
.ap-nav-section { font-size: 9px; font-weight: 800; color: var(--ap-muted); text-transform: uppercase; letter-spacing: .8px; padding: 12px 8px 4px; }
.ap-nav-item {
  display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 8px;
  font-size: 13px; font-weight: 600; color: var(--ap-muted); cursor: pointer;
  transition: all .15s; margin-bottom: 1px; user-select: none; text-decoration: none;
}
.ap-nav-item:hover { background: rgba(255,255,255,.05); color: var(--ap-text); }
.ap-nav-item.active { background: rgba(255,77,0,.15); color: var(--ap-accent); }
.ap-nav-item .icon { font-size: 16px; width: 22px; text-align: center; flex-shrink: 0; }
.ap-nav-item .badge { margin-left: auto; background: var(--ap-accent); color: #fff; font-size: 9px; font-weight: 800; padding: 1px 6px; border-radius: 20px; }

.ap-sidebar-foot {
  padding: 12px 8px; border-top: 1px solid var(--ap-border);
}
.ap-user-row {
  display: flex; align-items: center; gap: 10px; padding: 8px 10px;
  border-radius: 8px; background: rgba(255,255,255,.04);
}
.ap-user-av {
  width: 32px; height: 32px; border-radius: 50%; background: var(--ap-accent);
  display: flex; align-items: center; justify-content: center; font-size: 13px;
  font-weight: 800; color: #fff; flex-shrink: 0;
}
.ap-user-info { flex: 1; min-width: 0; }
.ap-user-info strong { display: block; font-size: 12px; color: var(--ap-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ap-user-info span  { font-size: 10px; color: var(--ap-muted); }
.ap-logout-btn { font-size: 16px; cursor: pointer; padding: 4px; border-radius: 6px; transition: background .15s; }
.ap-logout-btn:hover { background: rgba(239,68,68,.2); }

/* ── Main content ── */
.wsa-ap-main {
  flex: 1; margin-left: var(--ap-sidebar-w);
  display: flex; flex-direction: column; min-height: 100vh; overflow: hidden;
}

/* ── Top bar ── */
.wsa-ap-topbar {
  height: var(--ap-header-h); background: var(--ap-bg2);
  border-bottom: 1px solid var(--ap-border); display: flex; align-items: center;
  padding: 0 20px; gap: 12px; position: sticky; top: 0; z-index: 100;
}
.ap-menu-toggle {
  display: none; background: none; border: none; color: var(--ap-text);
  font-size: 20px; cursor: pointer; padding: 4px; border-radius: 6px;
}
.wsa-ap-topbar h1 { font-size: 16px; font-weight: 800; color: var(--ap-text); margin: 0; }
.ap-topbar-right { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.ap-topbar-clock { font-size: 12px; color: var(--ap-muted); font-feature-settings: 'tnum'; }

/* ── Content area ── */
.wsa-ap-content { flex: 1; padding: 20px; overflow-x: hidden; }

/* ── Sidebar overlay ── */
.wsa-ap-overlay {
  display: none; position: fixed; inset: 0; background: rgba(0,0,0,.6);
  z-index: 150; backdrop-filter: blur(2px);
}
.wsa-ap-overlay.visible { display: block; }

/* ═══════════════════════════════════════
   COMMON COMPONENTS
═══════════════════════════════════════ */

/* Stats grid */
.ap-stats { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 12px; margin-bottom: 20px; }
.ap-stat {
  background: var(--ap-bg2); border: 1px solid var(--ap-border); border-radius: 12px;
  padding: 16px; text-align: center;
}
.ap-stat__icon { font-size: 24px; margin-bottom: 6px; }
.ap-stat__val  { font-size: 28px; font-weight: 800; color: var(--ap-text); line-height: 1; margin-bottom: 4px; }
.ap-stat__label{ font-size: 10px; color: var(--ap-muted); text-transform: uppercase; letter-spacing: .5px; font-weight: 600; }
.ap-stat--blue   { border-top: 3px solid #3b82f6; }
.ap-stat--green  { border-top: 3px solid var(--ap-green); }
.ap-stat--orange { border-top: 3px solid #f97316; }
.ap-stat--purple { border-top: 3px solid #8b5cf6; }
.ap-stat--yellow { border-top: 3px solid var(--ap-yellow); }
.ap-stat--red    { border-top: 3px solid var(--ap-red); }
.ap-stat--teal   { border-top: 3px solid var(--ap-teal); }
.ap-stat--grey   { border-top: 3px solid var(--ap-muted); }

/* Cards */
.ap-card {
  background: var(--ap-bg2); border: 1px solid var(--ap-border); border-radius: 12px;
  margin-bottom: 16px; overflow: hidden;
}
.ap-card-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 18px; border-bottom: 1px solid var(--ap-border);
}
.ap-card-head h2 { font-size: 14px; font-weight: 700; margin: 0; display: flex; align-items: center; gap: 8px; }
.ap-card-body { padding: 16px 18px; }
.ap-card-title { font-size: 14px; font-weight: 700; padding: 14px 18px; border-bottom: 1px solid var(--ap-border); margin: 0; }

/* Grid */
.ap-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.ap-grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 16px; }

/* Table */
.ap-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.ap-table { width: 100%; border-collapse: collapse; font-size: 13px; min-width: 600px; }
.ap-table thead th {
  background: var(--ap-bg3); padding: 10px 14px; text-align: left;
  font-size: 10px; font-weight: 700; color: var(--ap-muted);
  text-transform: uppercase; letter-spacing: .4px; border-bottom: 1px solid var(--ap-border);
  white-space: nowrap;
}
.ap-table tbody td {
  padding: 11px 14px; border-bottom: 1px solid rgba(255,255,255,.04);
  vertical-align: middle; color: var(--ap-text);
}
.ap-table tbody tr:last-child td { border-bottom: none; }
.ap-table tbody tr:hover td { background: rgba(255,255,255,.025); }
.ap-table .ap-actions { display: flex; gap: 5px; align-items: center; }

/* Badges */
.ap-badge {
  display: inline-flex; align-items: center; padding: 2px 8px; border-radius: 20px;
  font-size: 10px; font-weight: 700; white-space: nowrap;
}
.ap-badge--IN     { background: rgba(34,214,138,.15); color: var(--ap-green); border: 1px solid rgba(34,214,138,.3); }
.ap-badge--OUT    { background: rgba(99,102,241,.15); color: #a5b4fc; border: 1px solid rgba(99,102,241,.3); }
.ap-badge--BREAK  { background: rgba(245,166,35,.15); color: var(--ap-yellow); border: 1px solid rgba(245,166,35,.3); }
.ap-badge--ABSENT { background: rgba(107,114,128,.12); color: var(--ap-muted); border: 1px solid rgba(107,114,128,.2); }
.ap-badge--active { background: rgba(34,214,138,.15); color: var(--ap-green); border: 1px solid rgba(34,214,138,.3); }
.ap-badge--inactive { background: rgba(239,68,68,.12); color: #f87171; border: 1px solid rgba(239,68,68,.25); }
.ap-badge--pending  { background: rgba(245,166,35,.12); color: var(--ap-yellow); border: 1px solid rgba(245,166,35,.3); }
.ap-badge--MANUAL { background: rgba(139,92,246,.15); color: #c4b5fd; border: 1px solid rgba(139,92,246,.3); }
.ap-badge--QR     { background: rgba(99,102,241,.15); color: #a5b4fc; border: 1px solid rgba(99,102,241,.3); }
.ap-badge--approved { background: rgba(34,214,138,.15); color: var(--ap-green); border: 1px solid rgba(34,214,138,.3); }
.ap-badge--rejected { background: rgba(239,68,68,.12); color: #f87171; border: 1px solid rgba(239,68,68,.25); }
.ap-badge--late   { background: rgba(245,166,35,.15); color: var(--ap-yellow); border: 1px solid rgba(245,166,35,.3); }

/* Live dot */
.ap-live-dot {
  display: inline-block; width: 7px; height: 7px; border-radius: 50%;
  background: var(--ap-green); margin-right: 5px;
  animation: ap-pulse 1.8s ease-in-out infinite;
}
@keyframes ap-pulse { 0%,100%{opacity:1} 50%{opacity:.3} }

/* Filter bar */
.ap-filter-bar {
  background: var(--ap-bg2); border: 1px solid var(--ap-border); border-radius: 10px;
  padding: 14px 16px; margin-bottom: 16px;
}
.ap-filter-row { display: flex; gap: 10px; flex-wrap: wrap; align-items: flex-end; }
.ap-filter-row .ap-field { flex: 1; min-width: 140px; margin: 0; }
.ap-filter-row .ap-btn  { flex-shrink: 0; }

/* Empty state */
.ap-empty {
  text-align: center; padding: 40px 20px; color: var(--ap-muted); font-size: 14px;
}
.ap-empty .icon { font-size: 36px; margin-bottom: 10px; }

/* Muted text */
.ap-muted { color: var(--ap-muted); font-size: 11px; display: block; margin-top: 1px; }

/* Code */
.ap-code {
  font-family: 'SF Mono', Consolas, monospace; font-size: 11px;
  background: rgba(255,255,255,.06); border-radius: 4px; padding: 2px 6px;
  color: #a5b4fc;
}

/* Modal */
.ap-modal-backdrop {
  position: fixed; inset: 0; background: rgba(0,0,0,.7);
  z-index: 1002000; backdrop-filter: blur(4px);
  display: none;
}
.ap-modal-backdrop.open { display: flex; align-items: center; justify-content: center; padding: 20px; }
.ap-modal {
  background: var(--ap-bg2); border: 1px solid var(--ap-border); border-radius: 14px;
  width: 100%; max-width: 500px; max-height: 90vh; overflow-y: auto;
  box-shadow: 0 24px 80px rgba(0,0,0,.8);
}
.ap-modal--lg { max-width: 700px; }
.ap-modal-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; padding: 16px 20px; border-bottom: 1px solid var(--ap-border);
}
.ap-modal-head h3 { font-size: 15px; font-weight: 800; margin: 0; min-width: 0; }
.ap-modal-actions { display: inline-flex; align-items: center; gap: 8px; flex: 0 0 auto; }
.ap-modal-close {
  background: none; border: none; color: var(--ap-muted); font-size: 18px;
  cursor: pointer; padding: 4px; border-radius: 6px; line-height: 1;
}
.ap-modal-close:hover { background: rgba(255,255,255,.08); color: var(--ap-text); }
.ap-modal-body { padding: 20px; }
.ap-modal-foot {
  padding: 14px 20px; border-top: 1px solid var(--ap-border);
  display: flex; gap: 8px; justify-content: flex-end;
}

/* Toast */
.ap-toast-wrap {
  position: fixed; bottom: 20px; right: 20px; z-index: 9999;
  display: flex; flex-direction: column; gap: 8px; pointer-events: none;
}
.ap-toast {
  background: var(--ap-bg2); border: 1px solid var(--ap-border); border-radius: 10px;
  padding: 12px 16px; font-size: 13px; font-weight: 600; color: var(--ap-text);
  box-shadow: 0 8px 24px rgba(0,0,0,.5); pointer-events: auto;
  animation: ap-toast-in .25s ease;
  max-width: 320px;
}
.ap-toast--ok  { border-left: 3px solid var(--ap-green); }
.ap-toast--err { border-left: 3px solid var(--ap-red); }
.ap-toast--info{ border-left: 3px solid var(--ap-blue); }
@keyframes ap-toast-in { from { opacity:0; transform: translateX(20px); } }

/* Form grid */
.ap-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.ap-form-row--3 { grid-template-columns: 1fr 1fr 1fr; }

/* Section header row */
.ap-page-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 16px; gap: 12px; flex-wrap: wrap;
}
.ap-page-head h1 { font-size: 20px; font-weight: 800; margin: 0; color: var(--ap-text); }
.ap-page-head p  { font-size: 12px; color: var(--ap-muted); margin: 2px 0 0; }
.ap-page-head-right { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }

/* Inside avatars */
.ap-av {
  width: 34px; height: 34px; border-radius: 50%; background: var(--ap-accent);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 14px; font-weight: 800; color: #fff; flex-shrink: 0;
}

/* Quick-mark card */
.ap-qm-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px,1fr)); gap: 12px; }
.ap-qm-card {
  background: var(--ap-bg3); border: 1px solid var(--ap-border); border-radius: 10px;
  padding: 14px; display: flex; flex-direction: column; gap: 10px;
  transition: border-color .2s;
}
.ap-qm-card:hover { border-color: rgba(255,255,255,.15); }
.ap-qm-top { display: flex; align-items: center; gap: 10px; }
.ap-qm-info { flex: 1; min-width: 0; }
.ap-qm-info strong { display: block; font-size: 13px; color: var(--ap-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ap-qm-info span   { font-size: 11px; color: var(--ap-muted); }
.ap-qm-btns { display: flex; gap: 5px; flex-wrap: wrap; }
.ap-qm-btns .ap-btn { flex: 1; justify-content: center; }

/* Salary table */
.ap-salary-row td:first-child { font-weight: 700; }
.ap-money { font-feature-settings: 'tnum'; font-weight: 700; color: var(--ap-green); }

/* Settings row */
.ap-settings-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }

/* ═══════════════════════════════════════
   RESPONSIVE
═══════════════════════════════════════ */
@media (max-width: 900px) {
  .wsa-ap-sidebar { transform: translateX(-100%); }
  .wsa-ap-sidebar.open { transform: translateX(0); }
  .wsa-ap-main { margin-left: 0; }
  .ap-menu-toggle { display: block; }
  .ap-grid-2, .ap-form-row { grid-template-columns: 1fr; }
  .ap-grid-3, .ap-form-row--3 { grid-template-columns: 1fr; }
  .ap-settings-row { grid-template-columns: 1fr; }
  .ap-stats { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 520px) {
  .wsa-ap-content { padding: 12px; }
  .ap-stats { grid-template-columns: repeat(2, 1fr); }
  .ap-modal { border-radius: 0; }
  .ap-modal-backdrop.open { padding: 0; align-items: flex-end; }
  .ap-modal { max-height: 95vh; border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
  .ap-table { font-size: 12px; }
  .ap-qm-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 380px) {
  .ap-qm-grid { grid-template-columns: 1fr; }
}

/* ── Utility ── */
.ap-mt-8  { margin-top: 8px; }
.ap-mt-16 { margin-top: 16px; }
.ap-text-center { text-align: center; }
.ap-flex { display: flex; align-items: center; gap: 8px; }
.ap-flex-1 { flex: 1; }
.ap-w-full { width: 100%; }
.ap-hr { border: none; border-top: 1px solid var(--ap-border); margin: 20px 0; }
.ap-spin-mini {
  display: inline-block; width: 14px; height: 14px;
  border: 2px solid rgba(255,255,255,.3); border-top-color: #fff;
  border-radius: 50%; animation: ap-spin .6s linear infinite; vertical-align: middle;
}

/* ── Toast container ── */
#ap-toasts { position: fixed; bottom: 24px; right: 20px; z-index: 9999; display: flex; flex-direction: column; gap: 8px; pointer-events: none; }

/* ═══════════════════════════════════════
   QR SCANNER PAGE
═══════════════════════════════════════ */
.ap-qr-display-card { overflow: visible; }

.ap-qr-display-inner {
  display: grid;
  grid-template-columns: 1fr 280px;
  gap: 0;
  min-height: 500px;
}

/* ── QR panel (left) ── */
.ap-qr-panel {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 32px 24px; gap: 16px;
  border-right: 1px solid var(--ap-border);
}
.ap-qr-headline {
  font-size: 18px; font-weight: 800; color: var(--ap-text); text-align: center;
  letter-spacing: .3px;
}
.ap-qr-gate-label {
  font-size: 13px; color: var(--ap-muted); text-align: center;
}

/* QR frame */
.ap-qr-frame {
  position: relative; width: 280px; height: 280px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,.03); border-radius: 16px;
  border: 1px solid var(--ap-border);
}
.ap-qr-spinner-wrap {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  color: var(--ap-muted); font-size: 13px;
}
.ap-qr-scanned-overlay {
  position: absolute; inset: 0; border-radius: 16px;
  background: rgba(34,214,138,.12); border: 2px solid var(--ap-green);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  color: var(--ap-green); animation: ap-qr-pulse .6s ease;
}
@keyframes ap-qr-pulse {
  0% { transform: scale(.92); opacity: 0; }
  60% { transform: scale(1.03); }
  100% { transform: scale(1); opacity: 1; }
}

/* Timer */
.ap-qr-timer-wrap { width: 100%; max-width: 280px; }
.ap-qr-bar-bg {
  height: 8px; background: rgba(255,255,255,.07); border-radius: 99px; overflow: hidden;
  margin-bottom: 8px;
}
.ap-qr-bar {
  height: 100%; border-radius: 99px; transition: width .25s linear, background .3s;
  background: linear-gradient(90deg, var(--ap-green), #00b4d8);
}
.ap-qr-timer-row {
  display: flex; align-items: center; justify-content: center; gap: 6px;
}

/* Status badge */
.ap-qr-status-badge {
  font-size: 12px; padding: 5px 12px; border-radius: 20px; font-weight: 700;
  display: flex; align-items: center; gap: 6px;
}

/* ── QR sidebar (right) ── */
.ap-qr-sidebar {
  display: flex; flex-direction: column; gap: 0;
  padding: 0;
}

.ap-qr-inside-box, .ap-qr-time-box, .ap-qr-instructions, .ap-qr-security {
  padding: 20px 20px; border-bottom: 1px solid var(--ap-border);
}
.ap-qr-security { border-bottom: none; }

.ap-qr-step {
  display: flex; align-items: center; gap: 10px;
  font-size: 13px; color: var(--ap-muted); padding: 4px 0;
}
.ap-qr-step span:first-child { font-size: 16px; flex-shrink: 0; }

.ap-qr-sec-row {
  display: flex; gap: 8px; font-size: 12px; color: var(--ap-muted); padding: 3px 0;
}

/* ── Responsive ── */
@media (max-width: 900px) {
  .ap-qr-display-inner {
    grid-template-columns: 1fr;
  }
  .ap-qr-panel {
    border-right: none;
    border-bottom: 1px solid var(--ap-border);
  }
  .ap-qr-frame {
    width: 240px; height: 240px;
  }
  .ap-qr-sidebar {
    display: grid; grid-template-columns: 1fr 1fr;
  }
  .ap-qr-inside-box, .ap-qr-time-box { border-bottom: none; border-right: 1px solid var(--ap-border); }
  .ap-qr-instructions, .ap-qr-security { grid-column: span 1; }
}

@media (max-width: 520px) {
  .ap-qr-frame { width: 200px; height: 200px; }
  .ap-qr-sidebar { grid-template-columns: 1fr; }
  .ap-qr-inside-box, .ap-qr-time-box { border-right: none; border-bottom: 1px solid var(--ap-border); }
}

/* ── Super Admin badges ── */
.ap-role-super {
  display: inline-flex; align-items: center; gap: 4px;
  background: rgba(251,146,60,.12); color: #fb923c;
  border: 1px solid rgba(251,146,60,.25);
  padding: 2px 8px; border-radius: 20px;
  font-size: 10px; font-weight: 800;
}
.ap-role-admin {
  display: inline-flex; align-items: center; gap: 4px;
  background: rgba(99,102,241,.12); color: #a5b4fc;
  border: 1px solid rgba(99,102,241,.25);
  padding: 2px 8px; border-radius: 20px;
  font-size: 10px; font-weight: 800;
}

/* Super admin indicator in sidebar foot */
.ap-user-info span[data-role="super_admin"] { color: #fb923c; }

/* Salary dashboard parity with WP admin */
.ap-form-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:14px;align-items:end}.ap-field small{display:block;margin-top:5px;color:var(--ap-muted);font-size:12px}.ap-actions-inline{display:flex;gap:8px;flex-wrap:wrap}.ap-badge{display:inline-flex;align-items:center;justify-content:center;border-radius:999px;padding:4px 10px;font-size:12px;font-weight:800}.ap-badge--ok{background:rgba(34,214,138,.13);color:#22d68a}.ap-badge--bad{background:rgba(239,68,68,.13);color:#ef4444}.ap-badge--warn{background:rgba(245,158,11,.13);color:#f59e0b}.ap-badge--info{background:rgba(59,130,246,.13);color:#60a5fa}.ap-ot{color:#f59e0b;font-weight:900}.ap-money{font-weight:900}.ap-inner-card{box-shadow:none!important;border:1px solid var(--ap-border)}.ap-grid-2{display:grid;grid-template-columns:1fr 1fr;gap:16px}.ap-cal-grid{display:grid;grid-template-columns:repeat(7,minmax(42px,1fr));gap:8px}.ap-cal-day{min-height:62px;border-radius:12px;padding:8px;text-align:center;background:rgba(148,163,184,.09);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px}.ap-cal-day b{font-size:13px}.ap-cal-day small{font-size:10px}.ap-cal-day--ok{background:rgba(34,214,138,.12);color:#22d68a}.ap-cal-day--bad{background:rgba(239,68,68,.12);color:#ef4444}.ap-cal-day--warn{background:rgba(245,158,11,.12);color:#f59e0b}.ap-cal-day--muted{opacity:.55}.ap-salary-table td:first-child{min-width:180px}.ap-save-field .ap-btn{width:100%}
@media(max-width:900px){.ap-grid-2{grid-template-columns:1fr}.ap-stats{grid-template-columns:repeat(2,minmax(0,1fr))}.ap-salary-table{min-width:980px!important}.ap-salary-config-card .ap-card-head{align-items:flex-start;gap:10px}.ap-actions-inline{flex-direction:column}.ap-actions-inline .ap-btn{width:100%;justify-content:center}.ap-modal-body.ap-salary-detail{padding:12px}.ap-cal-grid{grid-template-columns:repeat(4,minmax(48px,1fr))}}
@media(max-width:520px){.ap-form-grid{grid-template-columns:1fr}.ap-stats{grid-template-columns:1fr}.ap-cal-grid{grid-template-columns:repeat(3,minmax(48px,1fr))}.ap-page-head{gap:12px}.ap-page-head-right{width:100%;display:grid;grid-template-columns:1fr 1fr;gap:8px}.ap-page-head-right .ap-btn{width:100%}}

.ap-modal .ap-salary-detail .ap-grid-2 > .ap-card,
.ap-modal .ap-salary-detail .ap-inner-card {
  min-width: 0;
}
.ap-modal .ap-salary-detail .ap-salary-breakup-wrap {
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}
.ap-modal .ap-salary-detail .ap-salary-breakup-table {
  min-width: 620px;
  table-layout: auto;
}
.ap-modal .ap-salary-detail .ap-salary-breakup-table td:first-child {
  min-width: 240px;
  white-space: nowrap;
}

/* Salary Slip frontend admin */
.ap-salary-slip{background:var(--ap-card,#fff);border:1px solid var(--ap-border,#e5e7eb);border-radius:22px;padding:24px;margin:18px 0;box-shadow:0 14px 38px rgba(0,0,0,.08);page-break-after:always}.ap-slip-head{display:flex;justify-content:space-between;gap:20px;border-bottom:1px solid var(--ap-border,#e5e7eb);padding-bottom:16px}.ap-slip-brand{display:flex;align-items:center;gap:14px}.ap-slip-brand img{width:62px;height:62px;object-fit:contain;border-radius:14px;border:1px solid var(--ap-border,#e5e7eb);background:#fff}.ap-slip-head h2{margin:0}.ap-slip-net{text-align:right}.ap-slip-net span{display:block;opacity:.7}.ap-slip-net strong{font-size:28px;color:var(--ap-green,#22c55e)}.ap-slip-info{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-top:16px}.ap-slip-info>div{background:rgba(148,163,184,.10);border:1px solid var(--ap-border,#e5e7eb);border-radius:14px;padding:13px}@media(max-width:800px){.ap-slip-head{display:block}.ap-slip-net{text-align:left;margin-top:12px}.ap-slip-info{grid-template-columns:1fr}.ap-slip-output .ap-grid-2{grid-template-columns:1fr!important}}@media print{.ap-sidebar,.ap-topbar,.ap-page-head,.ap-actions,.ap-card:not(.ap-inner-card){display:none!important}.ap-main{margin:0!important}.ap-content{padding:0!important}.ap-salary-slip{box-shadow:none;border:1px solid #ddd;margin:0 0 20px;color:#111;background:#fff}.ap-salary-slip *{color:#111!important}}

/* ─────────────────────────────────────────────
   Production frontend dashboard layout fix
───────────────────────────────────────────── */
.wsa-ap-root{
  width:100% !important;
  max-width:100% !important;
  overflow:hidden !important;
  background:var(--ap-bg);
}
.wsa-ap-layout{
  width:100% !important;
  max-width:100% !important;
  min-height:calc(100vh - 0px);
}
.wsa-ap-main{
  min-width:0 !important;
  width:calc(100% - var(--ap-sidebar-w)) !important;
}
.wsa-ap-content{
  min-width:0 !important;
  width:100% !important;
  max-width:100% !important;
  overflow-x:hidden !important;
}
body.admin-bar .wsa-ap-sidebar{ top:32px; height:calc(100vh - 32px); }
body.admin-bar .wsa-ap-topbar{ top:32px; }
.ap-page-head{ display:flex; justify-content:space-between; align-items:flex-start; gap:16px; flex-wrap:wrap; }
.ap-page-head-right{ display:flex; gap:10px; flex-wrap:wrap; }
.ap-flex-1{ flex:1 1 0; }
.ap-w-full{ width:100%; }

/* ─────────────────────────────────────────────
   Face Attendance frontend dashboard
───────────────────────────────────────────── */
.ap-face-page{ width:100%; max-width:100%; }
.ap-face-layout{ align-items:start; }
.ap-face-card{ min-width:0; overflow:hidden; }
.ap-face-stats .ap-stat-card{ min-width:0; }
.ap-card-title-row{ display:flex; align-items:flex-start; justify-content:space-between; gap:14px; margin-bottom:14px; }
.ap-face-pill{
  display:inline-flex; align-items:center; justify-content:center;
  min-height:32px; padding:0 12px; border-radius:8px;
  background:rgba(99,102,241,.15); border:1px solid rgba(99,102,241,.35);
  color:var(--ap-text); font-size:12px; font-weight:800;
}
.ap-face-camera{
  position:relative; width:100%; aspect-ratio:16/10; min-height:260px;
  border-radius:12px; overflow:hidden; background:#020617; border:1px solid var(--ap-border);
}
.ap-face-camera video,
.ap-face-camera canvas{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.ap-face-frame{
  position:absolute; inset:9%; border:2px solid rgba(99,102,241,.9); border-radius:14px;
  box-shadow:0 0 0 999px rgba(0,0,0,.12),0 0 28px rgba(99,102,241,.55);
  pointer-events:none;
}
.ap-face-actions .ap-btn{ border-radius:8px !important; min-height:42px; }
.ap-face-user{
  display:flex; align-items:center; gap:14px; padding:16px;
  border-radius:12px; background:rgba(99,102,241,.10); border:1px solid var(--ap-border); margin-top:14px;
}
.ap-face-user strong{ display:block; color:var(--ap-text); font-size:15px; }
.ap-face-user span{ display:block; color:var(--ap-muted); font-size:12px; margin-top:3px; }
.ap-face-staff-preview{display:grid;gap:3px;margin:10px 0 12px;padding:10px 12px;border:1px solid var(--ap-border);border-radius:10px;background:rgba(34,214,138,.10);min-width:0}
.ap-face-staff-preview strong{color:var(--ap-text);font-size:14px}
.ap-face-staff-preview span{color:var(--ap-muted);font-size:12px;word-break:break-word}
.ap-face-avatar{
  width:54px; height:54px; border-radius:10px; display:grid; place-items:center;
  background:linear-gradient(135deg,var(--ap-blue),var(--ap-accent)); color:#fff; font-weight:900;
  flex:0 0 auto;
}
.ap-face-alert{
  margin-top:16px; padding:13px 14px; border-radius:10px;
  background:rgba(99,102,241,.08); border:1px solid var(--ap-border); color:var(--ap-muted); font-size:12px;
}
.ap-face-steps{
  display:grid; grid-template-columns:repeat(5,1fr); gap:8px; margin-top:14px;
}
.ap-face-steps span{
  padding:10px 8px; border:1px solid var(--ap-border); border-radius:8px;
  text-align:center; color:var(--ap-muted); font-size:12px; font-weight:800;
}
.ap-face-steps span.done{
  color:var(--ap-green); background:rgba(34,214,138,.12); border-color:rgba(34,214,138,.35);
}

/* Quick Mark button restore: always show clean two-button rows */
.ap-qm-btns{ display:flex !important; gap:8px !important; flex-wrap:wrap !important; }
.ap-qm-btns .ap-btn{ min-height:36px; border-radius:8px !important; }

@media(max-width:900px){
  .wsa-ap-main{ width:100% !important; margin-left:0 !important; }
  body.admin-bar .wsa-ap-sidebar{ top:46px; height:calc(100vh - 46px); }
  body.admin-bar .wsa-ap-topbar{ top:46px; }
  .ap-face-layout{ grid-template-columns:1fr !important; }
  .ap-face-steps{ grid-template-columns:repeat(2,1fr); }
}


/* Frontend Salary Slip — same design as WP Admin Salary Slip */
.wsa-front-slip-head p{margin:4px 0 0;color:var(--ap-muted,#64748b)}
.wsa-front-slip-form{background:var(--ap-card,#fff);border:1px solid var(--ap-border,#e5e7eb);border-radius:16px;padding:18px;margin:18px auto;display:flex;gap:12px;align-items:end;flex-wrap:wrap;box-shadow:0 8px 24px rgba(15,23,42,.06)}
.wsa-front-slip-field{display:flex;flex-direction:column;gap:6px;min-width:120px}
.wsa-front-slip-field label{font-weight:700;color:var(--ap-text,#111827)}
.wsa-front-slip-field input,.wsa-front-slip-field select{min-height:42px;border:1px solid var(--ap-border,#e5e7eb);border-radius:10px;background:var(--ap-bg3,#fff);color:var(--ap-text,#111827);padding:8px 12px}
.wsa-front-slip-staff{min-width:280px;flex:1}
.wsa-front-slip-empty{background:var(--ap-card,#fff);border:1px solid var(--ap-border,#e5e7eb);border-radius:16px;padding:24px;margin:18px auto;color:var(--ap-text,#111827)}
.wsa-slip-list{width:100%;max-width:1180px;margin:0 auto}
.wsa-slip{background:#fff!important;border:1px solid #e5e7eb!important;border-radius:18px!important;padding:24px!important;margin:18px 0!important;box-shadow:0 8px 24px rgba(15,23,42,.08)!important;page-break-after:always;color:#111827!important}
.wsa-slip *{color:#111827!important}
.wsa-slip p,.wsa-slip span{color:#64748b!important}
.wsa-slip-head{display:flex;justify-content:space-between;gap:20px;border-bottom:2px solid #e5e7eb;padding-bottom:14px}
.wsa-slip-brand{display:flex;align-items:center;gap:14px}
.wsa-slip-brand img{width:62px;height:62px;object-fit:contain;border-radius:12px;border:1px solid #e5e7eb;background:#fff}
.wsa-slip-head h2{margin:0;color:#111827!important}
.wsa-slip-net{text-align:right}
.wsa-slip-net span{display:block;color:#64748b!important}
.wsa-slip-net strong{font-size:26px;color:#16a34a!important}
.wsa-slip-info{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin:18px 0}
.wsa-slip-info div,.wsa-slip-box{background:#f8fafc!important;border:1px solid #e5e7eb!important;border-radius:14px;padding:14px;color:#111827!important}
.wsa-slip-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.wsa-slip-box h3{color:#111827!important;margin-top:0}
.wsa-slip-box table{width:100%;border-collapse:collapse;background:transparent!important;border:0!important}
.wsa-slip-box td{padding:9px;border-bottom:1px solid #e5e7eb;color:#111827!important}
.wsa-slip-box td:last-child{text-align:right;font-weight:700}
.wsa-slip-box .total td{font-size:18px;color:#16a34a!important;font-weight:800}
.wsa-slip-note{margin-top:16px;padding:12px;border-radius:12px;background:#fff7ed!important;color:#9a3412!important}
@media(max-width:800px){.wsa-front-slip-form{display:block}.wsa-front-slip-field{margin-bottom:12px}.wsa-front-slip-staff{min-width:0}.wsa-slip-info,.wsa-slip-grid{grid-template-columns:1fr}.wsa-slip-head{display:block}.wsa-slip-net{text-align:left;margin-top:12px}}
@media print{#wpadminbar,.wsa-ap-sidebar,.wsa-ap-topbar,.ap-page-head,.wsa-front-slip-form,#wsa-zb-theme-switcher,#wsa-final-theme-switcher,#wsa-exact-theme-switcher{display:none!important}.wsa-ap-main{margin:0!important}.wsa-ap-content{padding:0!important}.wsa-slip{box-shadow:none!important;border:1px solid #ddd!important;margin:0 0 20px!important}.wsa-slip-list{margin:0!important;max-width:none!important}}


/* Final Salary Slip Dark Mode + Role Access UI */
#wsa-ap-root .wsa-slip {
  background: #ffffff !important;
  color: #111827 !important;
}

#wsa-ap-root .wsa-slip * {
  color: #111827 !important;
}

#wsa-ap-root .wsa-slip p,
#wsa-ap-root .wsa-slip span,
#wsa-ap-root .wsa-slip td:first-child,
#wsa-ap-root .wsa-slip-note {
  color: #475569 !important;
}

#wsa-ap-root .wsa-slip h2,
#wsa-ap-root .wsa-slip h3,
#wsa-ap-root .wsa-slip strong,
#wsa-ap-root .wsa-slip b,
#wsa-ap-root .wsa-slip .total td,
#wsa-ap-root .wsa-slip-net strong {
  color: #111827 !important;
}

#wsa-ap-root .wsa-slip-net strong,
#wsa-ap-root .wsa-slip-box .total td {
  color: #16a34a !important;
}

#wsa-ap-root .wsa-slip-box,
#wsa-ap-root .wsa-slip-info div {
  background: #f8fafc !important;
  color: #111827 !important;
  border-color: #e5e7eb !important;
}

#wsa-ap-root .wsa-slip-box table,
#wsa-ap-root .wsa-slip-box tbody,
#wsa-ap-root .wsa-slip-box tr,
#wsa-ap-root .wsa-slip-box td {
  background: transparent !important;
  border-color: #e5e7eb !important;
}

#wsa-ap-root .wsa-front-slip-form,
#wsa-ap-root .wsa-front-slip-empty {
  color: var(--ap-text) !important;
}

#wsa-ap-root .wsa-front-slip-form label,
#wsa-ap-root .wsa-front-slip-form strong {
  color: var(--ap-text) !important;
}

#wsa-ap-root .wsa-front-slip-form input,
#wsa-ap-root .wsa-front-slip-form select {
  color: var(--ap-text) !important;
  background: var(--ap-bg3) !important;
  border-color: var(--ap-border) !important;
}

/* Role Access page */
.ap-access-note {
  margin-bottom: 16px;
  padding: 14px 16px;
  border-left: 3px solid var(--ap-blue);
}

.ap-access-grid {
  display: grid;
  gap: 14px;
}

.ap-access-section {
  border: 1px solid var(--ap-border);
  border-radius: 14px;
  padding: 14px;
  background: rgba(255,255,255,.02);
}

.ap-access-section h3 {
  margin: 0 0 10px;
  font-size: 14px;
  color: var(--ap-text);
}

.ap-access-item {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 38px;
  padding: 8px 10px;
  border-radius: 10px;
  cursor: pointer;
  color: var(--ap-text);
}

.ap-access-item:hover {
  background: rgba(99,102,241,.10);
}

.ap-access-item input {
  width: 18px;
  height: 18px;
  accent-color: var(--ap-blue);
}

.ap-access-item span {
  color: var(--ap-text) !important;
  font-weight: 700;
}

.ap-access-item em {
  font-style: normal;
  margin-left: 8px;
  font-size: 11px;
  color: var(--ap-muted);
}

.ap-access-item.is-super-only {
  opacity: .7;
}

@media print {
  .wsa-front-slip-form,
  .ap-page-head,
  .wsa-ap-sidebar,
  .wsa-ap-topbar,
  #wsa-zb-theme-switcher,
  #wsa-final-theme-switcher {
    display: none !important;
  }
  #wsa-ap-root .wsa-slip {
    box-shadow: none !important;
    border: 1px solid #ddd !important;
    margin: 0 0 20px !important;
  }
}

/* WSA 5.6.3 Mobile Frontend Dashboard Final Patch */
.wsa-ap-root,
.wsa-ap-root * { box-sizing: border-box; }

.wsa-ap-root .ap-qm-grid {
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)) !important;
  align-items: stretch !important;
}
.wsa-ap-root .ap-qm-card { min-width: 0 !important; overflow: hidden !important; }
.wsa-ap-root .ap-qm-top { align-items: flex-start !important; min-width: 0 !important; }
.wsa-ap-root .ap-qm-info { min-width: 0 !important; }
.wsa-ap-root .ap-qm-top .ap-badge { margin-left: auto !important; flex: 0 0 auto !important; }
.wsa-ap-root .ap-qm-btns {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 8px !important;
  width: 100% !important;
}
.wsa-ap-root .ap-qm-btns .ap-btn {
  width: 100% !important;
  min-width: 0 !important;
  min-height: 42px !important;
  padding: 10px 8px !important;
  white-space: normal !important;
  text-align: center !important;
}
.wsa-ap-root .ap-qm-btns .ap-w-full,
.wsa-ap-root .ap-qm-btns .ap-btn:only-child { grid-column: 1 / -1 !important; }
.wsa-ap-root .ap-flex { flex-wrap: wrap !important; line-height: 1.45 !important; }
.wsa-ap-root .ap-filter-row {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)) !important;
  align-items: end !important;
}

@media (max-width: 900px) {
  .wsa-ap-root .wsa-ap-layout {
    display: flex !important;
    width: 100% !important;
    min-height: 100vh !important;
    overflow: hidden !important;
  }
  .wsa-ap-root .wsa-ap-sidebar {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    bottom: 0 !important;
    width: min(86vw, 312px) !important;
    min-width: 0 !important;
    max-width: min(86vw, 312px) !important;
    height: 100vh !important;
    max-height: 100vh !important;
    transform: translateX(-105%) !important;
    transition: transform .28s cubic-bezier(.2,.8,.2,1) !important;
    z-index: 10001 !important;
    box-shadow: 20px 0 70px rgba(0,0,0,.45) !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
  }
  .wsa-ap-root .wsa-ap-sidebar.open { transform: translateX(0) !important; }
  .wsa-ap-root .wsa-ap-overlay {
    position: fixed !important;
    inset: 0 !important;
    background: rgba(2,6,23,.64) !important;
    backdrop-filter: blur(5px) !important;
    -webkit-backdrop-filter: blur(5px) !important;
    z-index: 10000 !important;
    display: none !important;
  }
  .wsa-ap-root .wsa-ap-overlay.visible { display: block !important; }
  .wsa-ap-root .wsa-ap-main {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    min-width: 0 !important;
  }
  .wsa-ap-root .ap-menu-toggle {
    display: inline-flex !important;
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    align-items: center !important;
    justify-content: center !important;
    border: 1px solid var(--ap-border) !important;
    background: rgba(255,255,255,.06) !important;
    border-radius: 12px !important;
  }
  .wsa-ap-root .wsa-ap-content { padding: 14px !important; overflow-x: hidden !important; }
  .wsa-ap-root .ap-page-head, .wsa-ap-root .ap-page-head-right { width: 100% !important; }
  .wsa-ap-root .ap-page-head-right .ap-btn, .wsa-ap-root #qmRefresh { width: 100% !important; }
  .wsa-ap-root .ap-grid-2,
  .wsa-ap-root .ap-grid-3,
  .wsa-ap-root .ap-settings-row,
  .wsa-ap-root .ap-form-row,
  .wsa-ap-root .ap-form-row--3 { grid-template-columns: 1fr !important; }
  .wsa-ap-root .ap-stats { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 10px !important; }
  body.admin-bar .wsa-ap-root .wsa-ap-sidebar { top: 46px !important; height: calc(100vh - 46px) !important; max-height: calc(100vh - 46px) !important; }
  body.admin-bar .wsa-ap-root .wsa-ap-overlay { top: 46px !important; height: calc(100vh - 46px) !important; }
}

@media (max-width: 680px) {
  .wsa-ap-root .ap-qm-grid,
  .wsa-ap-root .ap-filter-row { grid-template-columns: 1fr !important; }
  .wsa-ap-root .ap-card-head,
  .wsa-ap-root .ap-card-body,
  .wsa-ap-root .ap-card-title { padding-left: 14px !important; padding-right: 14px !important; }
}

@media (max-width: 420px) {
  .wsa-ap-root .wsa-ap-content { padding: 10px !important; }
  .wsa-ap-root .ap-stats { grid-template-columns: 1fr !important; }
  .wsa-ap-root .ap-qm-btns { grid-template-columns: 1fr !important; }
}

/* WSA 5.6.4 Final Mobile Visibility Patch — admin portal fallback */
@media (max-width: 900px) {
  .wsa-ap-root .wsa-ap-sidebar,
  .wsa-ap-root .wsa-ap-sidebar.hidden {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    bottom: 0 !important;
    width: min(86vw, 320px) !important;
    min-width: 0 !important;
    max-width: min(86vw, 320px) !important;
    height: 100vh !important;
    max-height: 100vh !important;
    transform: translate3d(-110%, 0, 0) !important;
    z-index: 100040 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
  }
  .wsa-ap-root .wsa-ap-sidebar.open { transform: translate3d(0,0,0) !important; }
  .wsa-ap-root .wsa-ap-overlay { z-index: 100030 !important; }
  .wsa-ap-root .ap-menu-toggle { display: inline-flex !important; }
  .wsa-ap-root .wsa-ap-main { width: 100% !important; max-width: 100% !important; margin-left: 0 !important; }
  .wsa-ap-root .wsa-ap-content { overflow-x: hidden !important; }
  .wsa-ap-root .ap-qm-grid { grid-template-columns: 1fr !important; gap: 12px !important; }
  .wsa-ap-root .ap-qm-card { width: 100% !important; min-width: 0 !important; }
  .wsa-ap-root .ap-qm-btns { display: grid !important; grid-template-columns: 1fr !important; gap: 8px !important; width: 100% !important; }
  .wsa-ap-root .ap-qm-btns .ap-btn { width: 100% !important; min-height: 42px !important; white-space: normal !important; }
  .wsa-ap-root .ap-face-layout { grid-template-columns: 1fr !important; }
  .wsa-ap-root .ap-face-stats { grid-template-columns: repeat(2, minmax(0,1fr)) !important; }
  .wsa-ap-root .ap-face-card { width: 100% !important; min-width: 0 !important; overflow: hidden !important; padding: 14px !important; }
  .wsa-ap-root .ap-face-camera { width: 100% !important; min-height: clamp(230px, 58vw, 360px) !important; aspect-ratio: 4/3 !important; }
  .wsa-ap-root .ap-face-actions { display: grid !important; grid-template-columns: 1fr !important; gap: 8px !important; }
  .wsa-ap-root .ap-face-actions .ap-btn { width: 100% !important; }
  .wsa-ap-root .ap-face-card .ap-table { min-width: 0 !important; table-layout: fixed !important; }
  .wsa-ap-root .ap-face-card .ap-table td { word-break: break-word !important; white-space: normal !important; }
  .wsa-ap-root .ap-face-steps { grid-template-columns: repeat(2, minmax(0,1fr)) !important; }
  body.admin-bar .wsa-ap-root .wsa-ap-sidebar { top: 46px !important; height: calc(100vh - 46px) !important; max-height: calc(100vh - 46px) !important; }
}
@media (max-width: 520px) {
  .wsa-ap-root .ap-face-stats { grid-template-columns: 1fr !important; }
  .wsa-ap-root .ap-face-camera { min-height: 250px !important; aspect-ratio: 1/1 !important; }
  .wsa-ap-root .ap-face-steps { grid-template-columns: 1fr !important; }
}


/* WSA 5.6.5 Mobile Sidebar Toggle Final Fix
   One source of truth: #apSidebar.open + #apOverlay.visible. */
@media (max-width: 900px) {
  body .wsa-ap-root .wsa-ap-layout {
    display: flex !important;
    width: 100vw !important;
    max-width: 100vw !important;
    min-height: 100dvh !important;
    overflow: hidden !important;
  }
  body .wsa-ap-root .wsa-ap-main {
    width: 100vw !important;
    max-width: 100vw !important;
    min-width: 0 !important;
    margin-left: 0 !important;
    overflow: hidden !important;
  }
  body .wsa-ap-root .wsa-ap-content {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch !important;
  }
  body .wsa-ap-root #apSidebar.wsa-ap-sidebar,
  body .wsa-ap-root .wsa-ap-sidebar {
    display: flex !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    bottom: 0 !important;
    width: min(86vw, 320px) !important;
    min-width: 0 !important;
    max-width: min(86vw, 320px) !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    transform: translate3d(-112%, 0, 0) !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transition: transform .28s cubic-bezier(.22,.75,.26,1), visibility 0s linear .28s !important;
    z-index: 100040 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    background: var(--ap-bg2, var(--zb-bg2, #0f111a)) !important;
    box-shadow: 24px 0 80px rgba(0,0,0,.50) !important;
  }
  body .wsa-ap-root #apSidebar.wsa-ap-sidebar.open,
  body .wsa-ap-root .wsa-ap-sidebar.open {
    transform: translate3d(0, 0, 0) !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transition: transform .28s cubic-bezier(.22,.75,.26,1), visibility 0s linear 0s !important;
  }
  body .wsa-ap-root #apOverlay.wsa-ap-overlay,
  body .wsa-ap-root .wsa-ap-overlay {
    position: fixed !important;
    inset: 0 !important;
    width: 100vw !important;
    height: 100dvh !important;
    z-index: 100030 !important;
    display: block !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    background: rgba(2,6,23,.66) !important;
    backdrop-filter: blur(5px) !important;
    -webkit-backdrop-filter: blur(5px) !important;
    transition: opacity .2s ease, visibility 0s linear .2s !important;
  }
  body .wsa-ap-root #apOverlay.wsa-ap-overlay.visible,
  body .wsa-ap-root .wsa-ap-overlay.visible {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transition: opacity .2s ease, visibility 0s linear 0s !important;
  }
  body .wsa-ap-root #apMenuToggle.ap-menu-toggle,
  body .wsa-ap-root .ap-menu-toggle {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 42px !important;
    height: 42px !important;
    min-width: 42px !important;
    flex: 0 0 42px !important;
    cursor: pointer !important;
    position: relative !important;
    z-index: 100 !important;
  }
  body.admin-bar .wsa-ap-root #apSidebar.wsa-ap-sidebar,
  body.admin-bar .wsa-ap-root .wsa-ap-sidebar {
    top: 46px !important;
    height: calc(100dvh - 46px) !important;
    max-height: calc(100dvh - 46px) !important;
  }
  body.admin-bar .wsa-ap-root #apOverlay.wsa-ap-overlay,
  body.admin-bar .wsa-ap-root .wsa-ap-overlay {
    top: 46px !important;
    height: calc(100dvh - 46px) !important;
  }
}
@media (min-width: 901px) {
  body .wsa-ap-root #apSidebar.wsa-ap-sidebar,
  body .wsa-ap-root .wsa-ap-sidebar {
    visibility: visible !important;
    pointer-events: auto !important;
  }
  body .wsa-ap-root #apOverlay.wsa-ap-overlay,
  body .wsa-ap-root .wsa-ap-overlay {
    display: none !important;
  }
}


/* WSA 5.6.7: reliable frontend attendance action buttons */
.ap-table .ap-actions .att-edit,
.ap-table .ap-actions .att-del {
  min-width: 34px;
  min-height: 30px;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  cursor: pointer !important;
  pointer-events: auto !important;
  position: relative;
  z-index: 2;
}
.ap-table .ap-actions .att-del.is-loading,
.ap-table .ap-actions .att-edit.is-loading { opacity: .7; }
@media (max-width: 767px) {
  .ap-table .ap-actions {
    gap: 8px !important;
    justify-content: flex-start;
  }
  .ap-table .ap-actions .att-edit,
  .ap-table .ap-actions .att-del {
    min-width: 40px;
    min-height: 36px;
  }
}

/* WSA 5.6.8: visible and reliable frontend attendance action buttons */
.ap-table .ap-actions {
  min-width: 150px;
  gap: 8px !important;
  align-items: center !important;
  justify-content: flex-start !important;
  flex-wrap: nowrap !important;
}
.ap-table .ap-actions .att-edit,
.ap-table .ap-actions .att-del {
  min-width: 62px !important;
  min-height: 34px !important;
  padding: 7px 10px !important;
  border-radius: 10px !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  line-height: 1.1 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 5px !important;
  cursor: pointer !important;
  pointer-events: auto !important;
  position: relative !important;
  z-index: 10 !important;
  white-space: nowrap !important;
}
.ap-table .ap-actions .att-del.is-loading,
.ap-table .ap-actions .att-edit.is-loading { opacity: .75; }
@media (max-width: 767px) {
  .ap-table .ap-actions { min-width: 170px; }
  .ap-table .ap-actions .att-edit,
  .ap-table .ap-actions .att-del {
    min-width: 76px !important;
    min-height: 40px !important;
    font-size: 12px !important;
  }
}

/* WSA 5.7.2: native frontend attendance edit/delete forms — works like WP admin, even if REST/AJAX is blocked */
.ap-table .ap-actions.ap-actions--native {
  min-width: 230px !important;
  align-items: flex-start !important;
  gap: 8px !important;
  flex-wrap: wrap !important;
  position: relative !important;
  overflow: visible !important;
}
.wsa-att-native-edit,
.wsa-att-native-delete {
  margin: 0 !important;
  display: inline-block !important;
}
.wsa-att-native-edit summary {
  list-style: none !important;
  user-select: none !important;
}
.wsa-att-native-edit summary::-webkit-details-marker { display: none !important; }
.wsa-att-native-edit[open] {
  width: 100% !important;
}
.wsa-att-native-form {
  margin-top: 8px !important;
  padding: 10px !important;
  border: 1px solid var(--ap-border, rgba(148,163,184,.22)) !important;
  border-radius: 14px !important;
  background: var(--ap-card, #111827) !important;
  box-shadow: 0 10px 30px rgba(0,0,0,.25) !important;
  min-width: 260px !important;
  max-width: 360px !important;
}
.wsa-att-native-grid {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 8px !important;
}
.wsa-att-native-grid label {
  color: var(--ap-muted, #94a3b8) !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  letter-spacing: .04em !important;
}
.wsa-att-native-grid input {
  width: 100% !important;
  margin-top: 4px !important;
  padding: 8px 9px !important;
  min-height: 36px !important;
  border-radius: 10px !important;
  border: 1px solid var(--ap-border, rgba(148,163,184,.25)) !important;
  background: var(--ap-input, rgba(15,23,42,.72)) !important;
  color: var(--ap-text, #f8fafc) !important;
  box-sizing: border-box !important;
}
.wsa-att-native-notes {
  grid-column: 1 / -1 !important;
}
.wsa-att-native-row {
  margin-top: 8px !important;
  display: flex !important;
  justify-content: flex-end !important;
}
.ap-table .ap-actions--native .att-native-edit,
.ap-table .ap-actions--native .att-native-del {
  min-width: 78px !important;
  min-height: 36px !important;
  padding: 7px 10px !important;
  border-radius: 10px !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  cursor: pointer !important;
  pointer-events: auto !important;
  position: relative !important;
  z-index: 12 !important;
  white-space: nowrap !important;
}
@media (max-width: 767px) {
  .ap-table .ap-actions.ap-actions--native { min-width: 260px !important; }
  .wsa-att-native-form { min-width: 240px !important; max-width: 100% !important; }
  .wsa-att-native-grid { grid-template-columns: 1fr !important; }
}