/* Design tokens copied from the main ALF Attorneys site (styles.css) so this
   dashboard reads as the same product, even though it deploys as its own
   separate Netlify site on its own subdomain. */
:root{
  --bg:#eef0f2;
  --bg-soft:#e6e8ec;
  --panel:#ffffff;
  --accent:#3d6d96;
  --accent-dark:#305374;
  --ink:#242c35;
  --ink-soft:rgba(36,44,53,0.72);
  --ink-faint:rgba(36,44,53,0.5);
  --line:rgba(36,44,53,0.12);
  --accent-yellow:#fdc500;
  --accent-yellow-dark:#e0af00;
  --accent-yellow-ink:#171717;
  --max:1100px;
}

*,*::before,*::after{box-sizing:border-box;}
body{
  margin:0;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  color:var(--ink);
  background-color:var(--bg);
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3{text-transform:uppercase;letter-spacing:0.01em;margin:0;}
.hidden{display:none !important;}
.wrap{max-width:var(--max);margin:0 auto;padding:0 20px;}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-size:14.5px;font-weight:700;letter-spacing:0.01em;padding:13px 26px;border-radius:10px;border:1px solid transparent;white-space:nowrap;cursor:pointer;}
.btn-primary{background:var(--accent-yellow);color:var(--accent-yellow-ink);box-shadow:0 14px 30px -14px rgba(253,197,0,0.45);}
.btn-primary:hover{background:var(--accent-yellow-dark);}
.btn-primary:disabled{opacity:0.6;cursor:default;}
.btn-outline{background:transparent;border-color:var(--accent);color:var(--accent);}
.btn-outline:hover{background:rgba(61,109,150,0.08);}

.card{background:var(--panel);border:1px solid var(--line);border-radius:16px;box-shadow:0 20px 44px -28px rgba(36,44,53,0.25);}

/* ---------- Password gate ---------- */
#gate-screen{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px;}
.gate-card{background:var(--panel);border:1px solid var(--line);border-radius:18px;box-shadow:0 24px 50px -28px rgba(36,44,53,0.35);padding:40px 36px;max-width:360px;width:100%;text-align:center;}
.gate-logo{height:38px;width:auto;margin:0 auto 16px;}
.gate-card h1{font-size:22px;font-weight:800;margin-bottom:10px;}
.gate-card p{font-size:14.5px;color:var(--ink-soft);margin:0 0 20px;}
.gate-card input{width:100%;font-size:15px;font-family:inherit;color:var(--ink);background:var(--bg-soft);border:1px solid var(--line);border-radius:9px;padding:12px 14px;margin-bottom:14px;}
.gate-card .btn{width:100%;}
.gate-error{margin-top:14px;font-size:13.5px;font-weight:600;color:#c0392b;}

/* ---------- App shell ---------- */
.topbar{background:var(--panel);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:10;}
.topbar-inner{display:flex;align-items:center;justify-content:space-between;padding:18px 0;}
.topbar .brand{display:flex;align-items:center;gap:12px;font-size:14px;font-weight:800;letter-spacing:0.06em;color:var(--ink);}
.topbar .brand img{height:30px;width:auto;}
.topbar .brand span{font-size:11px;font-weight:600;letter-spacing:0.04em;color:var(--ink-faint);text-transform:none;}

main.wrap{padding-top:28px;padding-bottom:60px;display:flex;flex-direction:column;gap:24px;}

/* ---------- Form card ---------- */
.form-card{padding:28px;}
.form-card h2{font-size:18px;font-weight:800;margin-bottom:18px;}
.field-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:16px;margin-bottom:18px;}
.field label{display:block;font-size:12.5px;font-weight:700;letter-spacing:0.02em;color:var(--ink-soft);margin-bottom:6px;text-transform:uppercase;}
.field input{width:100%;font-size:15px;font-family:inherit;color:var(--ink);background:var(--bg-soft);border:1px solid var(--line);border-radius:9px;padding:11px 13px;}
.form-message{font-size:13.5px;font-weight:600;padding:10px 0;}
.form-message.success{color:#1c7a3e;}
.form-message.error{color:#c0392b;}

/* ---------- Status / empty states ---------- */
.status-banner{padding:14px 18px;border-radius:10px;background:var(--bg-soft);font-size:14px;color:var(--ink-soft);}
.status-banner.error{background:rgba(192,57,43,0.1);color:#c0392b;}
.empty-state{padding:40px 0;text-align:center;color:var(--ink-faint);font-size:14.5px;}

/* ---------- Pay period cards ---------- */
#periods{display:flex;flex-direction:column;gap:20px;}
.period-card{padding:0;overflow:hidden;}
.period-head{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px;padding:18px 24px;border-bottom:1px solid var(--line);background:var(--bg-soft);}
.period-label{font-size:11px;font-weight:700;letter-spacing:0.06em;text-transform:uppercase;color:var(--ink);margin-bottom:4px;}
.period-head h3{font-size:15px;font-weight:800;}
.period-summary{font-size:13px;font-weight:600;color:var(--ink-soft);}

.table-wrap{overflow-x:auto;}
table{width:100%;border-collapse:collapse;}
th,td{padding:12px 24px;text-align:left;font-size:14px;border-bottom:1px solid var(--line);white-space:nowrap;}
th{font-size:11.5px;font-weight:700;letter-spacing:0.04em;text-transform:uppercase;color:var(--ink-faint);}
td.num,th.num{text-align:right;}
tbody tr:last-child td{border-bottom:none;}
td.col-delete{text-align:right;white-space:nowrap;}
td.col-delete .btn-edit,
td.col-delete .btn-delete,
td.col-delete .btn-save-edit,
td.col-delete .btn-cancel-edit{font-size:12.5px;font-weight:700;background:transparent;border-radius:7px;padding:6px 12px;cursor:pointer;margin-left:8px;}
td.col-delete button:first-child{margin-left:0;}
.btn-edit,.btn-save-edit{color:var(--accent);border:1px solid rgba(61,109,150,0.35);}
.btn-edit:hover,.btn-save-edit:hover{background:rgba(61,109,150,0.08);}
.btn-delete,.btn-cancel-edit{color:#c0392b;border:1px solid rgba(192,57,43,0.35);}
.btn-delete:hover,.btn-cancel-edit:hover{background:rgba(192,57,43,0.08);}
.btn-delete:disabled,.btn-save-edit:disabled{opacity:0.6;cursor:default;}
.muted{color:var(--ink-faint);}
input.edit-input{width:100%;min-width:110px;font-size:14px;font-family:inherit;color:var(--ink);background:var(--bg-soft);border:1px solid var(--line);border-radius:7px;padding:7px 9px;}

@media (max-width:640px){
  .topbar .brand span{display:none;}
  .period-head{flex-direction:column;align-items:flex-start;}
  th,td{padding:10px 14px;}
}

/* ---------- Tabs ---------- */
.tabbar{display:flex;gap:4px;}
.tab{font-family:inherit;font-size:13px;font-weight:800;letter-spacing:0.06em;text-transform:uppercase;background:none;border:none;border-bottom:3px solid transparent;color:var(--ink-faint);padding:10px 18px 11px;cursor:pointer;}
.tab:hover{color:var(--ink);}
.tab.active{color:var(--accent-dark);border-bottom-color:var(--accent);}
/* The original .topbar-inner rule zeroed the side padding that .wrap provides, which left the logo and Refresh button flush against the screen edge on phones. */
.topbar-inner{padding:18px 20px 8px;}

/* ---------- Payroll ---------- */
.field-hint{display:block;margin-top:6px;font-size:11.5px;line-height:1.4;color:var(--ink-faint);}
.form-hint{font-size:12.5px;line-height:1.5;color:var(--ink-faint);margin:14px 0 0;}
.btn-sm{font-size:13px;padding:9px 16px;border-radius:8px;}
.admin-bar{display:flex;align-items:center;justify-content:flex-end;gap:12px;flex-wrap:wrap;}
.admin-state{margin-right:auto;font-size:13px;font-weight:600;color:var(--ink-soft);}
.admin-bar.on .admin-state{color:#1c7a3e;}
.admin-form{display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
.admin-form input{font-size:14px;font-family:inherit;color:var(--ink);background:var(--panel);border:1px solid var(--line);border-radius:8px;padding:9px 12px;min-width:200px;}
#payroll-periods{display:flex;flex-direction:column;gap:20px;}
.badge-current{display:inline-block;margin-left:8px;padding:2px 9px;border-radius:999px;background:var(--accent-yellow);color:var(--accent-yellow-ink);font-size:10px;font-weight:800;letter-spacing:0.06em;vertical-align:1px;}
.rep-block{border-bottom:1px solid var(--line);padding-bottom:6px;}
.rep-block:last-child{border-bottom:none;}
.rep-head{display:flex;align-items:baseline;justify-content:space-between;flex-wrap:wrap;gap:6px 14px;padding:16px 24px 4px;}
.rep-name{font-size:15px;font-weight:800;}
.rep-total{font-size:13px;font-weight:700;color:var(--accent-dark);}
.edited-tag{display:inline-block;margin-left:6px;padding:1px 6px;border-radius:5px;background:rgba(224,175,0,0.18);color:#7a5d00;font-size:10.5px;font-weight:700;letter-spacing:0.03em;text-transform:uppercase;cursor:help;}
tr.edit-row td{white-space:normal;}
.edit-grid{display:grid;grid-template-columns:2fr 1.4fr 1fr auto;gap:10px;align-items:center;}
.edit-actions{white-space:nowrap;}
.edit-actions button{font-size:12.5px;font-weight:700;background:transparent;border-radius:7px;padding:6px 12px;cursor:pointer;margin-left:8px;}
.edit-actions button:first-child{margin-left:0;}

@media (max-width:640px){
  .col-logged{display:none;}
  .rep-block th,.rep-block td{padding:10px 10px;}
  .rep-block th{font-size:10.5px;letter-spacing:0.02em;}
  .rep-head{padding:14px 14px 4px;}
  /* In admin mode the Edit/Delete column makes the table scroll sideways; pin the edit form to the visible width. */
  .edit-grid{grid-template-columns:1fr 1fr;position:sticky;left:0;width:calc(100vw - 84px);}
  .edit-actions{grid-column:1 / -1;}
  .admin-bar{justify-content:flex-start;}
  .tab{padding:10px 14px 11px;}
}