/* ============================================================
   AGXNT design system — single source of truth for the look.
   Designers: change tokens here (colours/spacing/shadows) and the
   whole product updates. Components below are shared by every page.
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

:root{
  --bg:#e8ecf1; --bg-alt:#f1f4f8; --surface:#ffffff; --titlebar:#f4f7fa;
  --text:#172430; --text-soft:#5d6b7a;
  --accent:#2b6fd6; --accent-2:#3aa0d8; --accent-soft:#e6eefb;
  --border:#d2dae3; --field:#f3f6f9;
  --green:#0f8a5f; --green-soft:#e3f4ec; --amber:#b9770a; --amber-soft:#fbf0db;
  --red:#d64545; --red-soft:#fbe9e9; --blue:#2b6fd6; --blue-soft:#e6eefb;
  --shadow:0 10px 30px rgba(23,36,48,.08); --shadow-lg:0 24px 64px rgba(23,36,48,.16); --bar-bg:rgba(232,236,241,.82);
  --radius:14px; --font:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
}
html[data-theme="dark"]{
  --bg:#0a0f16; --bg-alt:#0e151e; --surface:#121a24; --titlebar:#0e151e;
  --text:#eaf1f8; --text-soft:#9bb0c4;
  --accent:#4f97ff; --accent-2:#54c6f0; --accent-soft:#14253b;
  --border:#1f2a37; --field:#0e151e;
  --green:#3fe08f; --green-soft:#0f2a20; --amber:#ffc043; --amber-soft:#2b2410;
  --red:#ff6b6b; --red-soft:#2a1414; --blue:#4f97ff; --blue-soft:#14253b;
  --shadow:0 10px 30px rgba(0,0,0,.4); --shadow-lg:0 24px 64px rgba(0,0,0,.5); --bar-bg:rgba(10,15,22,.82);
}

*{box-sizing:border-box;margin:0;padding:0}
body{background:var(--bg);color:var(--text);font-family:var(--font);min-height:100vh;-webkit-font-smoothing:antialiased;transition:background .4s ease,color .4s ease}
a{color:inherit;text-decoration:none}

/* brand wordmark */
.brand{font-weight:700;letter-spacing:.18em;font-size:16px;padding-left:.18em}
.brand b{color:var(--accent)}

/* dark-mode toggle */
.toggle{width:38px;height:38px;border-radius:50%;border:1px solid var(--border);background:var(--surface);color:var(--text);cursor:pointer;display:grid;place-items:center;font-size:15px;transition:transform .25s,background .3s}
.toggle:hover{transform:rotate(18deg)}

/* shared top-bar nav: inline links on desktop, hamburger dropdown on mobile */
.nav-links{display:flex;align-items:center;gap:10px}
.nav-links a,.nav-links button{background:var(--surface);border:1px solid var(--border);color:var(--text-soft);font-family:inherit;font-size:13px;font-weight:500;padding:8px 15px;border-radius:999px;cursor:pointer;text-decoration:none;transition:border-color .2s,color .2s}
.nav-links a:hover,.nav-links button:hover{border-color:var(--text);color:var(--text)}
.nav-links a.active{border-color:var(--accent);color:var(--accent)}
.nav-links .danger:hover{border-color:var(--red);color:var(--red)}
.menu-btn{display:none;width:38px;height:38px;border-radius:50%;border:1px solid var(--border);background:var(--surface);color:var(--text);cursor:pointer;font-size:17px;place-items:center}
@media(max-width:680px){
  .menu-btn{display:grid}
  .nav-links{position:absolute;top:58px;right:14px;flex-direction:column;align-items:stretch;gap:5px;background:var(--surface);border:1px solid var(--border);border-radius:14px;box-shadow:var(--shadow-lg);padding:9px;min-width:188px;display:none;z-index:40}
  .nav-links.open{display:flex}
  .nav-links a,.nav-links button{border:none;background:none;text-align:left;padding:11px 14px;border-radius:9px;font-size:14.5px;color:var(--text)}
  .nav-links a:hover,.nav-links button:hover{background:var(--bg-alt);border:none}
  .nav-links a.active{background:var(--accent-soft);color:var(--accent)}
  .nav-links .danger{color:var(--red)}
}

/* window (the OS-style panel motif) */
.window{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden;margin-bottom:20px;animation:rise .5s both}
.window.auth{max-width:410px;width:100%;margin:0 auto;box-shadow:var(--shadow-lg)}
.titlebar{height:42px;background:var(--titlebar);border-bottom:1px solid var(--border);display:flex;align-items:center;gap:7px;padding:0 16px}
.titlebar i{width:10px;height:10px;border-radius:50%;background:var(--border)}
.titlebar .t{margin-left:8px;font-size:12px;font-weight:600;color:var(--text-soft);letter-spacing:.03em}
.titlebar .t .count{color:var(--amber);margin-left:6px}
.titlebar .t .ok{color:var(--green)} .titlebar .t .bad{color:var(--red)}
.content{padding:18px}
.window.auth .content{padding:34px 32px 30px}
@keyframes rise{from{opacity:0;transform:translateY(13px)}to{opacity:1;transform:none}}

/* buttons */
.btn{border:1px solid var(--border);background:var(--surface);color:var(--text);font-family:inherit;font-size:13px;font-weight:600;padding:11px;cursor:pointer;border-radius:10px;transition:all .18s}
.btn.flex{flex:1}
.btn.mini{padding:8px 14px}
.btn.approve{background:var(--accent);color:#fff;border-color:var(--accent)}
.btn.approve:hover{transform:translateY(-1px);box-shadow:0 6px 16px color-mix(in srgb,var(--accent) 35%,transparent)}
.btn.reject:hover{border-color:var(--red);color:var(--red);background:var(--red-soft)}
.btn.block{width:100%;background:var(--accent);color:#fff;border-color:var(--accent);padding:13px;font-size:14.5px;box-shadow:0 6px 18px color-mix(in srgb,var(--accent) 32%,transparent)}
.btn.block:hover{transform:translateY(-1px);box-shadow:0 10px 24px color-mix(in srgb,var(--accent) 42%,transparent)}

/* form fields */
label{display:block;font-size:12px;font-weight:600;color:var(--text-soft);margin-bottom:7px}
.field{position:relative;margin-bottom:18px}
input{width:100%;background:var(--field);border:1px solid var(--border);color:var(--text);font-family:inherit;font-size:14.5px;padding:12px 14px;border-radius:10px;outline:none;transition:border-color .2s,box-shadow .2s,background .3s}
input::placeholder{color:color-mix(in srgb,var(--text-soft) 70%,transparent)}
input:focus{border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 18%,transparent)}
.pw-wrap input{padding-right:46px}
.eye{position:absolute;right:8px;top:50%;transform:translateY(-50%);width:34px;height:34px;border:0;background:transparent;color:var(--text-soft);cursor:pointer;display:grid;place-items:center;border-radius:8px;transition:color .2s,background .2s}
.eye:hover{color:var(--accent);background:var(--accent-soft)}
.eye svg{width:19px;height:19px;display:block}
textarea{width:100%;min-height:200px;max-height:520px;background:var(--field);border:1px solid var(--border);color:var(--text);font-family:inherit;font-size:13px;padding:12px;resize:vertical;margin:6px 0 12px;border-radius:10px;line-height:1.55;outline:none;transition:border-color .2s,box-shadow .2s}
textarea:focus{border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 16%,transparent)}

/* approval / email cards */
.hold-card{border:1px solid var(--border);border-left:3px solid var(--amber);border-radius:12px;padding:15px;margin-bottom:13px;background:var(--bg-alt)}
.hold-card:last-child{margin-bottom:0}
.meta{font-size:12px;color:var(--text-soft);display:flex;justify-content:space-between;margin-bottom:9px}
.meta .act{font-weight:600;color:var(--text)}
.to{color:var(--accent);font-size:13px;margin-bottom:8px;font-weight:500}
.body{font-size:13px;color:var(--text);white-space:pre-wrap;line-height:1.55;background:var(--surface);border:1px solid var(--border);border-radius:9px;padding:12px;min-height:90px;max-height:600px;overflow-y:auto;resize:vertical;margin-bottom:12px}
.actions{display:flex;gap:10px}

/* badges + gate tags */
.badge{font-size:11px;padding:3px 10px;border-radius:999px;font-weight:600}
.b-new{background:var(--blue-soft);color:var(--blue)}
.b-contacted{background:var(--green-soft);color:var(--green)}
.b-outreach_pending{background:var(--amber-soft);color:var(--amber)}
.b-outreach_rejected{background:var(--red-soft);color:var(--red)}
.gate{font-size:11px;font-weight:600;padding:2px 8px;border-radius:999px}
.g-AUTO,.g-APPROVED{background:var(--green-soft);color:var(--green)}
.g-HOLD{background:var(--amber-soft);color:var(--amber)}
.g-REJECTED,.g-KILLED{background:var(--red-soft);color:var(--red)}
.tagx{font-size:11px;font-weight:600;padding:2px 9px;border-radius:999px;margin-left:6px}
.auto,.approved{color:var(--green);background:var(--green-soft)}
.hold-badge{color:var(--amber);background:var(--amber-soft)}
.rejected{color:var(--red);background:var(--red-soft)}

/* tables */
table{width:100%;border-collapse:collapse;font-size:13px}
th{text-align:left;color:var(--text-soft);font-weight:600;padding:8px 10px;border-bottom:1px solid var(--border);font-size:11px;text-transform:uppercase;letter-spacing:.04em}
td{padding:10px;border-bottom:1px solid var(--border);vertical-align:middle}
tr:last-child td{border-bottom:0}
tbody tr.clickable{cursor:pointer;transition:background .15s}
tbody tr.clickable:hover td{background:var(--bg-alt)}
.dim{color:var(--text-soft)}

.empty{color:var(--text-soft);font-size:13.5px;padding:30px;text-align:center;line-height:1.6}
.pulse{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--green);animation:p 2s infinite}
@keyframes p{0%,100%{opacity:1}50%{opacity:.3}}

@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}