/* ===== SIGNAUDIO PAYROLL — WordPress Plugin CSS ===== */
@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=DM+Mono:wght@400;500&family=DM+Sans:wght@300;400;500;600&display=swap');

/* ── Root Variables ── */
.sap-wrap{
  --sap-bg:#0a0c10;--sap-surface:#12151c;--sap-s2:#1a1e29;--sap-s3:#1f2435;
  --sap-border:#252a38;--sap-accent:#f0c040;--sap-accent2:#e05a2b;
  --sap-text:#e8eaf0;--sap-muted:#6b7280;--sap-green:#22c55e;
  --sap-red:#ef4444;--sap-blue:#3b82f6;--sap-purple:#a855f7;
  --sap-header-h:60px;--sap-tabs-h:44px;

  all:initial;
  box-sizing:border-box;
  display:block;
  background:var(--sap-bg);
  color:var(--sap-text);
  font-family:'DM Sans',sans-serif;
  font-size:13px;
  min-height:100vh;
  border-radius:12px;
  overflow:hidden;
  position:relative;
}
.sap-wrap *{box-sizing:border-box;}

/* ── Header ── */
.sap-header{
  background:linear-gradient(135deg,#0f1218,#1a1e2e);
  border-bottom:2px solid var(--sap-accent);
  padding:0 16px;
  height:var(--sap-header-h);
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  box-shadow:0 4px 24px rgba(0,0,0,0.5);
}
.sap-logo{display:flex;flex-direction:column;line-height:1;}
.sap-logo-main{font-family:'Bebas Neue',sans-serif;font-size:26px;letter-spacing:3px;color:var(--sap-accent);}
.sap-logo-sub{font-size:8px;letter-spacing:3px;color:var(--sap-muted);text-transform:uppercase;}

.sap-session-bar{display:flex;gap:10px;align-items:center;flex:1;justify-content:center;}
.sap-hf-grp{display:flex;flex-direction:column;gap:2px;}
.sap-hf-lbl{font-size:8px;letter-spacing:2px;color:var(--sap-accent2);text-transform:uppercase;}
.sap-hf-inp{
  background:rgba(255,255,255,0.05);border:1px solid var(--sap-border);border-radius:4px;
  padding:5px 9px;color:var(--sap-text);font-family:'DM Sans',sans-serif;font-size:12px;min-width:140px;
}
.sap-hf-inp:focus{outline:none;border-color:var(--sap-accent);}

.sap-header-right{display:flex;gap:8px;align-items:center;flex-shrink:0;}
.sap-user-pill{
  display:flex;align-items:center;gap:8px;background:var(--sap-s2);
  border:1px solid var(--sap-border);border-radius:20px;padding:5px 14px;
}
.sap-up-role{font-size:8px;letter-spacing:2px;text-transform:uppercase;color:var(--sap-accent2);display:block;}
.sap-up-name{font-size:11px;font-weight:600;}

/* ── Buttons ── */
.sap-hbtn,.sap-btn{
  display:inline-flex;align-items:center;gap:5px;border:none;border-radius:6px;
  cursor:pointer;font-family:'DM Sans',sans-serif;font-weight:600;letter-spacing:.5px;
  text-transform:uppercase;transition:all .18s;white-space:nowrap;
}
.sap-hbtn{padding:7px 13px;font-size:10px;}
.sap-btn{padding:6px 12px;font-size:10px;}
.sap-btn-sm{padding:4px 8px;font-size:9px;}
.sap-hbtn-acc,.sap-btn-acc{background:var(--sap-accent);color:#0a0c10;}
.sap-hbtn-acc:hover,.sap-btn-acc:hover{background:#ffd060;}
.sap-btn-ghost{background:rgba(255,255,255,0.06);color:var(--sap-text);border:1px solid var(--sap-border);}
.sap-btn-ghost:hover{background:rgba(255,255,255,0.12);}
.sap-btn-red{background:rgba(239,68,68,0.12);color:var(--sap-red);border:1px solid rgba(239,68,68,0.25);}
.sap-btn-red:hover{background:rgba(239,68,68,0.25);}
.sap-btn-blue{background:rgba(59,130,246,0.12);color:#60a5fa;border:1px solid rgba(59,130,246,0.25);}
.sap-btn-blue:hover{background:rgba(59,130,246,0.25);}
.sap-btn-green{background:rgba(34,197,94,0.12);color:var(--sap-green);border:1px solid rgba(34,197,94,0.25);}
.sap-btn-green:hover{background:rgba(34,197,94,0.25);}

/* ── Tabs ── */
.sap-tabs{
  background:var(--sap-s2);border-bottom:1px solid var(--sap-border);
  display:flex;align-items:flex-end;padding:0 16px;
  overflow-x:auto;min-height:var(--sap-tabs-h);
}
.sap-tab{
  padding:10px 20px;font-size:10px;font-weight:600;letter-spacing:2px;
  text-transform:uppercase;cursor:pointer;border-bottom:3px solid transparent;
  color:var(--sap-muted);transition:all .18s;white-space:nowrap;
}
.sap-tab:hover{color:var(--sap-text);}
.sap-tab.active{color:var(--sap-accent);border-bottom-color:var(--sap-accent);}

/* ── Main ── */
.sap-main{padding:16px;}

/* ── Panels ── */
.sap-panel{display:none;}
.sap-panel.active{display:block;}

/* ── Stats ── */
.sap-stats-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;margin-bottom:16px;}
.sap-sbox{background:var(--sap-surface);border:1px solid var(--sap-border);border-radius:8px;padding:14px 16px;}
.sap-sbox-lbl{font-size:8px;font-weight:600;letter-spacing:2px;text-transform:uppercase;color:var(--sap-muted);margin-bottom:4px;}
.sap-sbox-val{font-family:'DM Mono',monospace;font-size:20px;font-weight:500;color:var(--sap-accent);}
.sap-sbox-val.gn{color:var(--sap-green);}

/* ── Card ── */
.sap-card{background:var(--sap-surface);border:1px solid var(--sap-border);border-radius:10px;overflow:hidden;margin-bottom:16px;}
.sap-card-hdr{
  display:flex;align-items:center;justify-content:space-between;padding:12px 16px;
  background:var(--sap-s2);border-bottom:1px solid var(--sap-border);flex-wrap:wrap;gap:10px;
}
.sap-card-title{font-family:'Bebas Neue',sans-serif;font-size:16px;letter-spacing:2px;color:var(--sap-accent);}
.sap-card-meta{font-size:11px;color:var(--sap-muted);}

/* ── Search / Filter ── */
.sap-search,.sap-filter-sel{
  background:var(--sap-s2);border:1px solid var(--sap-border);border-radius:6px;
  padding:6px 10px;color:var(--sap-text);font-size:12px;font-family:'DM Sans',sans-serif;
}
.sap-search:focus,.sap-filter-sel:focus{outline:none;border-color:var(--sap-accent);}
.sap-filter-sel{cursor:pointer;}

/* ── Table ── */
.sap-tbl-wrap{overflow-x:auto;}
.sap-tbl-wrap table{border-collapse:collapse;font-size:12px;width:100%;min-width:600px;}
.sap-tbl-wrap th{
  background:var(--sap-s2);padding:8px 12px;text-align:left;
  font-size:8px;font-weight:600;letter-spacing:2px;text-transform:uppercase;
  color:var(--sap-muted);border-bottom:1px solid var(--sap-border);white-space:nowrap;
}
.sap-tbl-wrap td{
  padding:9px 12px;border-bottom:1px solid rgba(37,42,56,0.5);
  vertical-align:middle;white-space:nowrap;
}
.sap-tbl-wrap tr:last-child td{border-bottom:none;}
.sap-tbl-wrap tr:hover td{background:rgba(240,192,64,0.03);}
.sap-td-num{font-family:'DM Mono',monospace;text-align:right;color:var(--sap-accent);}
.sap-td-tot{font-family:'DM Mono',monospace;text-align:right;color:var(--sap-green);font-weight:700;}
.sap-tot-row td{background:var(--sap-s2);font-weight:700;border-top:2px solid var(--sap-border);}

.sap-loading{text-align:center;color:var(--sap-muted);padding:20px;font-style:italic;}
.sap-no-session-msg{padding:24px;text-align:center;color:var(--sap-muted);}

/* Inline inputs */
.sap-ti{
  background:transparent;border:1px solid transparent;border-radius:3px;
  padding:4px 6px;color:var(--sap-text);font-family:'DM Sans',sans-serif;font-size:12px;
  width:100%;min-width:60px;transition:border-color .15s;
}
.sap-ti:focus{outline:none;border-color:var(--sap-accent);background:rgba(240,192,64,0.04);}
.sap-ti.num{min-width:70px;text-align:right;font-family:'DM Mono',monospace;}

/* Badges */
.sap-badge{display:inline-block;padding:2px 8px;border-radius:99px;font-size:9px;font-weight:700;letter-spacing:.5px;}
.sap-b-audio{background:rgba(59,130,246,0.15);color:#60a5fa;}
.sap-b-lights{background:rgba(251,191,36,0.15);color:#fbbf24;}
.sap-b-ledwall{background:rgba(34,197,94,0.15);color:#4ade80;}
.sap-b-media{background:rgba(168,85,247,0.15);color:#c084fc;}
.sap-b-other,.sap-b-backline{background:rgba(107,114,128,0.15);color:#9ca3af;}
.sap-b-superadmin{background:rgba(224,90,43,0.2);color:var(--sap-accent2);}
.sap-b-admin{background:rgba(240,192,64,0.2);color:var(--sap-accent);}
.sap-b-payroll{background:rgba(59,130,246,0.15);color:#60a5fa;}
.sap-b-employee{background:rgba(34,197,94,0.15);color:#4ade80;}
.sap-b-active{background:rgba(34,197,94,0.15);color:var(--sap-green);}
.sap-b-inactive{background:rgba(239,68,68,0.1);color:var(--sap-red);}
.sap-b-locked{background:rgba(239,68,68,0.15);color:var(--sap-red);}
.sap-b-open{background:rgba(34,197,94,0.12);color:var(--sap-green);}

/* ── Modal ── */
.sap-modal-ov{
  position:fixed;inset:0;background:rgba(0,0,0,0.8);z-index:9999;
  display:flex;align-items:center;justify-content:center;backdrop-filter:blur(4px);
}
.sap-modal-ov.hide{display:none;}
.sap-modal{
  background:var(--sap-surface);border:1px solid var(--sap-border);border-radius:14px;
  width:540px;max-width:96vw;max-height:90vh;overflow-y:auto;
  box-shadow:0 40px 80px rgba(0,0,0,0.8);
  font-family:'DM Sans',sans-serif;color:var(--sap-text);font-size:13px;
}
.sap-modal-lg{width:700px;}
.sap-modal-hdr{
  display:flex;align-items:center;justify-content:space-between;
  padding:18px 22px;border-bottom:1px solid var(--sap-border);
}
.sap-modal-title{font-family:'Bebas Neue',sans-serif;font-size:20px;letter-spacing:2px;color:var(--sap-accent);}
.sap-modal-close{background:none;border:none;color:var(--sap-muted);font-size:20px;cursor:pointer;line-height:1;padding:0;}
.sap-modal-close:hover{color:var(--sap-red);}
.sap-modal-body{padding:22px;}
.sap-modal-foot{padding:14px 22px;border-top:1px solid var(--sap-border);display:flex;justify-content:flex-end;gap:8px;}

/* Form grid */
.sap-fg{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
.sap-ff{display:flex;flex-direction:column;gap:5px;}
.sap-full{grid-column:1/-1;}
.sap-flbl{font-size:8px;font-weight:600;letter-spacing:2px;text-transform:uppercase;color:var(--sap-muted);}
.sap-finp,.sap-fsel{
  background:var(--sap-s2);border:1px solid var(--sap-border);border-radius:6px;
  padding:9px 11px;color:var(--sap-text);font-family:'DM Sans',sans-serif;font-size:12px;width:100%;
}
.sap-finp:focus,.sap-fsel:focus{outline:none;border-color:var(--sap-accent);}
.sap-fsel{cursor:pointer;}

/* ── Payslip ── */
.sap-payslip-hdr{text-align:center;padding:20px;border-bottom:1px solid var(--sap-border);}
.sap-payslip-company{font-family:'Bebas Neue',sans-serif;font-size:28px;letter-spacing:4px;color:var(--sap-accent);}
.sap-payslip-event{font-size:12px;color:var(--sap-muted);margin-top:2px;}
.sap-payslip-name{font-size:20px;font-weight:600;margin:8px 0 2px;}
.sap-payslip-dept{font-size:11px;color:var(--sap-accent2);}
.sap-payslip-rows{padding:16px 22px;}
.sap-ps-row{display:flex;justify-content:space-between;padding:8px 0;border-bottom:1px solid rgba(37,42,56,0.4);font-size:12px;}
.sap-ps-row:last-child{border-bottom:none;}
.sap-ps-lbl{color:var(--sap-muted);}
.sap-ps-val{font-family:'DM Mono',monospace;color:var(--sap-accent);}
.sap-ps-total-row{display:flex;justify-content:space-between;padding:12px 0;border-top:2px solid var(--sap-border);margin-top:6px;font-weight:700;font-size:14px;}
.sap-ps-total-val{font-family:'DM Mono',monospace;color:var(--sap-green);font-size:20px;}
.sap-ps-deduct{color:var(--sap-red)!important;}

/* ── Signature ── */
.sap-sig-area{margin:0 22px 4px;border:1px solid var(--sap-border);border-radius:8px;overflow:hidden;}
.sap-sig-tabs{display:flex;border-bottom:1px solid var(--sap-border);}
.sap-sig-tab{flex:1;padding:8px;text-align:center;font-size:10px;font-weight:600;letter-spacing:1px;text-transform:uppercase;cursor:pointer;color:var(--sap-muted);transition:all .18s;}
.sap-sig-tab.active{color:var(--sap-accent);background:rgba(240,192,64,0.06);}
.sap-sig-content{padding:14px;}
#sapSigCanvas{background:#fff;border-radius:4px;cursor:crosshair;width:100%;display:block;}
.sap-sig-type-input{
  width:100%;background:var(--sap-s2);border:1px solid var(--sap-border);border-radius:6px;
  padding:12px;font-family:'Bebas Neue',sans-serif;font-size:28px;letter-spacing:3px;
  color:var(--sap-accent);text-align:center;
}
.sap-sig-type-input:focus{outline:none;border-color:var(--sap-accent);}
.sap-sig-preview{text-align:center;padding:12px;font-family:'Bebas Neue',sans-serif;font-size:26px;letter-spacing:3px;color:var(--sap-accent);}
.sap-recv-check-wrap{display:flex;align-items:center;gap:10px;padding:12px 22px;background:rgba(34,197,94,0.05);border-top:1px solid var(--sap-border);}
.sap-recv-chk{accent-color:var(--sap-green);width:16px;height:16px;cursor:pointer;}
.sap-recv-lbl{font-size:12px;font-weight:600;color:var(--sap-green);}

/* ── Roles legend ── */
.sap-roles-legend{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px;margin-top:8px;}
.sap-role-card{background:var(--sap-s3);border:1px solid var(--sap-border);border-radius:8px;padding:14px;}
.sap-role-card .sap-badge{margin-bottom:8px;}
.sap-role-card p{font-size:11px;color:var(--sap-muted);line-height:1.5;}

/* ── Toast ── */
.sap-toast{
  position:fixed;bottom:24px;right:24px;
  background:var(--sap-s2);border:1px solid var(--sap-border);border-radius:8px;
  padding:12px 18px;font-size:12px;font-weight:600;z-index:99999;
  box-shadow:0 8px 32px rgba(0,0,0,0.4);
  transition:opacity .3s;
}
.sap-toast.success{border-left:3px solid var(--sap-green);color:var(--sap-green);}
.sap-toast.error{border-left:3px solid var(--sap-red);color:var(--sap-red);}
.sap-toast.info{border-left:3px solid var(--sap-accent);color:var(--sap-accent);}
.sap-toast.hidden{opacity:0;pointer-events:none;}

/* ── Misc ── */
.sap-no-access,.sap-login-notice{
  text-align:center;padding:60px 20px;color:var(--sap-muted);font-size:14px;
}
.sap-login-notice a{color:var(--sap-accent);}

/* ── Print ── */
@media print {
  .sap-header,.sap-tabs,.sap-card-hdr .sap-btn,.sap-modal-foot,.sap-sig-area,
  .sap-recv-check-wrap,.sap-session-bar{display:none!important;}
  .sap-modal-ov{position:static;background:none;backdrop-filter:none;}
  .sap-modal{box-shadow:none;border:none;max-height:none;}
}