/* ── Reset & base ─────────────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:'Inconsolata',monospace;background:var(--bg);color:var(--text);min-height:100vh;overflow-x:hidden}

/* ── CSS variables ───────────────────────────────────────────────────── */
:root{
  --bg:#0e0e0e;--surface:#161616;--surface2:#1f1f1f;--surface3:#252525;
  --border:rgba(255,255,255,0.07);--border-hi:rgba(255,255,255,0.15);
  --text:#e8e4de;--muted:#5a5650;--muted2:#7a7470;
  --accent:#e8a246;--accent2:#4a9e7a;--danger:#c45050;
  --accent-dim:rgba(232,162,70,0.12);
  --green:#4a9e7a;--green-dim:rgba(74,158,122,0.12);
  --danger-dim:rgba(196,80,80,0.1);
  --blue:#4a7ae8;--blue-dim:rgba(74,122,232,0.1);
  --c-complete:#4a9e7a;--c-inprog:#e8a246;--c-pending:#5a5650;
  --ev-hire:#5b8fd4;--ev-depart:#c47a5a;--ev-reorg:#9b6fc4;
  --ev-tech:#4ab8c4;--ev-risk:#c45050;--ev-note:#8a8680;
}

/* ── Buttons ─────────────────────────────────────────────────────────── */
.btn{font-family:'Inconsolata',monospace;font-size:.82rem;font-weight:500;padding:.45rem .9rem;border-radius:2px;border:1px solid var(--border-hi);background:transparent;color:var(--text);cursor:pointer;transition:all .15s}
.btn:hover{background:var(--surface2);border-color:var(--accent);color:var(--accent)}
.btn-p{background:var(--accent);border-color:var(--accent);color:#0e0e0e;font-weight:600}
.btn-p:hover{background:#d4923c;border-color:#d4923c;color:#0e0e0e}
.btn-sm{padding:.3rem .6rem;font-size:.72rem}
.btn-danger{border-color:var(--danger);color:var(--danger)}
.btn-danger:hover{background:rgba(196,80,80,.15);border-color:var(--danger)}

/* ── Forms ───────────────────────────────────────────────────────────── */
label{display:block;font-size:.65rem;text-transform:uppercase;letter-spacing:.1em;color:var(--muted);margin-bottom:.35rem}
input[type=text],input[type=password],input[type=email],input[type=url],input[type=date],input[type=number],select,textarea{
  width:100%;background:var(--bg);border:1px solid var(--border-hi);border-radius:2px;
  padding:.65rem .8rem;font-family:'Inconsolata',monospace;font-size:.9rem;color:var(--text);
  outline:none;transition:border-color .15s}
input:focus,select:focus,textarea:focus{border-color:var(--accent)}
input.err{border-color:var(--danger)}
.err-msg{font-size:.72rem;color:var(--danger);margin-top:.3rem}
.fg{margin-bottom:1.1rem}

/* ── Modals ──────────────────────────────────────────────────────────── */
.ov{position:fixed;inset:0;z-index:100;background:rgba(0,0,0,.72);backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none;transition:opacity .2s}
.ov.open{opacity:1;pointer-events:all}
.modal{background:var(--surface);border:1px solid var(--border-hi);border-radius:4px;padding:1.75rem;width:100%;max-width:480px;transform:translateY(10px);transition:transform .2s}
.ov.open .modal{transform:translateY(0)}
.modal-hdr{display:flex;align-items:center;justify-content:space-between;margin-bottom:1.35rem}
.modal-ttl{font-family:'Syne',sans-serif;font-size:.95rem;font-weight:700}
.modal-x{background:none;border:none;color:var(--muted);cursor:pointer;font-size:1rem;transition:color .15s}
.modal-x:hover{color:var(--text)}
.modal-ft{display:flex;justify-content:flex-end;gap:.65rem;margin-top:1.5rem;padding-top:1.1rem;border-top:1px solid var(--border)}

/* ── Toast ───────────────────────────────────────────────────────────── */
.toast{position:fixed;bottom:1.5rem;left:50%;transform:translateX(-50%) translateY(20px);background:var(--surface2);border:1px solid var(--border-hi);color:var(--text);padding:.55rem 1.2rem;font-size:.8rem;border-radius:3px;opacity:0;pointer-events:none;transition:all .25s;z-index:200;display:flex;align-items:center;gap:.5rem}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0);pointer-events:all}

/* ── Icon buttons ────────────────────────────────────────────────────── */
.ib{width:24px;height:24px;border-radius:2px;border:1px solid var(--border);background:var(--bg);color:var(--muted);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;font-size:.72rem;transition:all .15s}
.ib:hover{border-color:var(--accent);color:var(--accent)}
.ib.del:hover{border-color:var(--danger);color:var(--danger)}

/* ── Light theme ─────────────────────────────────────────────────────── */
html[data-theme="light"]{
  --bg:#f5f1ec;--surface:#ffffff;--surface2:#ece8e3;--surface3:#e2ddd8;
  --border:rgba(0,0,0,0.07);--border-hi:rgba(0,0,0,0.13);
  --text:#1a1714;--muted:#a8a09a;--muted2:#6e6660;
  --accent:#c47e20;--accent2:#2d7a56;--danger:#a83030;
  --accent-dim:rgba(196,126,32,0.12);
  --green:#2d7a56;--green-dim:rgba(45,122,86,0.1);
  --danger-dim:rgba(168,48,48,0.08);
  --blue:#3a62c8;--blue-dim:rgba(58,98,200,0.08);
  --c-complete:#2d7a56;--c-inprog:#c47e20;--c-pending:#a8a09a;
  --ev-hire:#3a62c8;--ev-depart:#b05a30;--ev-reorg:#7a4ab8;
  --ev-tech:#2a8890;--ev-risk:#a83030;--ev-note:#6e6660;
}
/* Modal scrim is dark regardless of theme — keeps the overlay readable */
html[data-theme="light"] .ov{background:rgba(0,0,0,0.55)}
/* User-menu hover border needs a dark tint in light mode */
html[data-theme="light"] .um-btn:hover{border-color:rgba(0,0,0,0.2)}
html[data-theme="light"] .um-dropdown{box-shadow:0 6px 20px rgba(0,0,0,0.18)}