/* =============================================================
   Affilio Pro — portal.css  (v2, "switchboard" design system)
   Pairs with views: login.php, dashboard.php, calls.php
   ============================================================= */

@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;600&family=IBM+Plex+Sans+Condensed:wght@600;700&family=IBM+Plex+Sans:wght@400;500;600;700&display=swap');

:root{
  --bg:#EDF0F3;
  --card:#FFFFFF;
  --rail:#0E1520;
  --ink:#16202B;
  --muted:#5C6B7A;
  --line:#D9DFE6;
  --accent:#1F5EE8;
  --green:#0B9A6D;
  --amber:#D98A0B;
  --red:#D64545;
  --mono:"IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --sans:"IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --cond:"IBM Plex Sans Condensed", "Arial Narrow", var(--sans);
  --r:10px;
  --shadow:0 1px 2px rgba(16,24,40,.05), 0 4px 16px rgba(16,24,40,.06);
}
*{box-sizing:border-box}
html{font-size:15px}
body{margin:0;font-family:var(--sans);background:var(--bg);color:var(--ink);-webkit-font-smoothing:antialiased}
a{color:var(--accent)}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:4px}

/* ------------------------------------------------ app shell */
.shell{display:grid;grid-template-columns:224px 1fr;min-height:100vh}
.side{background:var(--rail);color:#B9C6D4;padding:22px 14px;display:flex;flex-direction:column;gap:4px}
.side .brand{display:flex;align-items:center;gap:10px;padding:2px 10px 18px;text-decoration:none}
.side .logo{
  width:30px;height:30px;border-radius:8px;flex:0 0 auto;
  background:var(--green)
    url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 24 24"><path d="M4 5c0 8.3 6.7 15 15 15l2-4-4.5-2-2 2A11.6 11.6 0 0 1 8 9.5l2-2L8 3 4 5Z" fill="white"/></svg>')
    center/15px no-repeat;
}
.side .brand b{font-family:var(--cond);font-weight:700;letter-spacing:.06em;font-size:1.02rem;color:#fff;display:block}
.side .brand small{display:block;font-family:var(--mono);font-size:.6rem;color:#7E90A5;letter-spacing:.14em}
.side .sec{font-family:var(--mono);font-size:.6rem;letter-spacing:.16em;color:#5F7188;padding:14px 10px 6px}
.side a.nav{
  display:block;padding:9px 12px;border-radius:8px;color:#AEBDCD;
  font-size:.92rem;font-weight:500;text-decoration:none;transition:.15s;
}
.side a.nav:hover{background:#1A2434;color:#fff}
.side a.nav.on{background:#1E2C40;color:#fff;box-shadow:inset 3px 0 0 var(--green)}
.side .foot{margin-top:auto;padding:14px 10px 4px;border-top:1px solid rgba(42,58,78,.5)}
.side .foot .who{
  display:block;font-family:var(--mono);font-size:.68rem;color:#7E90A5;
  margin-bottom:10px;word-break:break-all;
}
.side .foot form{margin:0}
.side .foot button{
  width:100%;font:inherit;font-size:.82rem;font-weight:600;cursor:pointer;
  color:#AEBDCD;background:none;border:1px solid #2A3A4E;border-radius:8px;
  padding:8px 12px;transition:.15s;
}
.side .foot button:hover{color:#fff;border-color:#3D5270}

.main{padding:0 28px 50px;min-width:0}
.pagehead{
  display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;
  padding:22px 0 16px;border-bottom:1px solid var(--line);margin-bottom:20px;
}
.pagehead h1{font-family:var(--cond);font-weight:700;font-size:1.45rem;letter-spacing:.02em;margin:0}
.pagehead .sub{font-size:.82rem;color:var(--muted)}

@media (max-width:860px){
  .shell{grid-template-columns:1fr}
  .side{flex-direction:row;align-items:center;flex-wrap:wrap;padding:10px 12px}
  .side .brand{padding:0 8px 0 0}
  .side .brand small{display:none}
  .side .sec{display:none}
  .side a.nav{padding:8px 12px}
  .side .foot{margin:0 0 0 auto;padding:0;border:none;display:flex;align-items:center;gap:10px}
  .side .foot .who{margin:0}
  .main{padding:0 14px 40px}
}

/* ------------------------------------------------ messages */
p.hint{color:var(--muted);font-size:.82rem;margin:8px 0 0}
p.empty{
  background:var(--card);border:1px dashed var(--line);border-radius:var(--r);
  padding:34px;text-align:center;color:var(--muted);
}
p.notice{background:#E3F5EE;color:#0A7A57;border:1px solid #BEE7D6;border-radius:8px;padding:11px 16px;font-weight:500;font-size:.9rem}
p.error{background:#FBE7E7;color:#B03535;border:1px solid #F1CACA;border-radius:8px;padding:11px 16px;font-weight:500;font-size:.9rem}
p.warn{background:#FBF0DC;color:#9A6304;border:1px solid #EFD9B0;border-radius:8px;padding:11px 16px;font-size:.86rem}

/* ------------------------------------------------ campaign card */
section.line{
  background:var(--card);border:1px solid var(--line);border-radius:var(--r);
  box-shadow:var(--shadow);padding:20px 24px;margin:0 0 18px;
}
.line-head{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:4px}
.line-head h2{font-family:var(--cond);font-weight:700;font-size:1.25rem;letter-spacing:.02em;margin:0}
.status{
  font-family:var(--mono);font-size:.66rem;font-weight:500;letter-spacing:.05em;
  padding:4px 11px;border-radius:999px;text-transform:uppercase;
  background:#E3F5EE;color:#0A7A57;display:inline-flex;align-items:center;gap:7px;
}
.status::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor}
.status.is-paused{background:#FBF0DC;color:#9A6304}
.status-budget.is-paused{background:#FBE7E7;color:#B03535}
.status-admin.is-paused{background:#EDF0F3;color:#5C6B7A}

.budget{margin:16px 0 4px}
.budget .bar{position:relative;height:9px;border-radius:999px;background:#E4E9EE;margin:6px 0 20px}
.budget .fill{position:absolute;inset:0 auto 0 0;border-radius:999px;background:linear-gradient(90deg,#0B9A6D,#12B37F);min-width:2px}
.budget .stop{position:absolute;top:-4px;bottom:-4px;left:95%;width:2px;background:var(--red);border-radius:1px}
.budget .stop::after{
  content:"stop";position:absolute;top:-15px;left:50%;transform:translateX(-50%);
  font-family:var(--mono);font-size:.56rem;letter-spacing:.12em;text-transform:uppercase;color:var(--red);
}

.budget dl, dl.stats{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:12px;margin:0;
}
.budget dl > div, dl.stats > div{background:#F7F9FB;border:1px solid #E7ECF1;border-radius:8px;padding:11px 14px}
.budget dt, dl.stats dt{font-family:var(--mono);font-size:.58rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin:0}
.budget dd, dl.stats dd{font-family:var(--cond);font-weight:700;font-size:1.35rem;font-variant-numeric:tabular-nums;margin:5px 0 0}
dl.stats{margin-top:16px}

.actions{display:flex;gap:10px;align-items:center;margin-top:18px;flex-wrap:wrap}
.actions form{margin:0}
.actions button{
  font:inherit;font-weight:600;font-size:.88rem;cursor:pointer;
  border:1px solid var(--line);background:var(--card);color:var(--ink);
  border-radius:8px;padding:10px 18px;transition:.15s;
}
.actions button:hover{border-color:#B7C2CE}
.actions button.danger{background:#FBE7E7;border-color:#F1CACA;color:#B03535}
.actions button.danger:hover{background:#F6D7D7}

/* ------------------------------------------------ calls table */
table.calls{
  width:100%;border-collapse:collapse;font-size:.85rem;
  background:var(--card);border:1px solid var(--line);border-radius:var(--r);
  overflow:hidden;box-shadow:var(--shadow);
}
table.calls thead th{
  font-family:var(--mono);font-size:.6rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--muted);text-align:left;padding:12px 16px;
  border-bottom:1px solid var(--line);background:#F7F9FB;white-space:nowrap;
}
table.calls td{
  padding:12px 16px;border-bottom:1px solid #EDF0F3;white-space:nowrap;
  vertical-align:middle;font-variant-numeric:tabular-nums;
}
table.calls tbody tr:last-child td{border-bottom:none}
table.calls tbody tr:hover td{background:#F7F9FB}

.badge{
  font-family:var(--mono);font-size:.64rem;font-weight:500;letter-spacing:.05em;
  padding:4px 10px;border-radius:999px;text-transform:uppercase;white-space:nowrap;
}
.b-green{background:#E3F5EE;color:#0A7A57}
.b-amber{background:#FBF0DC;color:#9A6304}
.b-red{background:#FBE7E7;color:#B03535}
.b-gray{background:#EDF0F3;color:#5C6B7A}

table.calls .play{
  font-family:var(--mono);font-size:.7rem;font-weight:600;cursor:pointer;
  color:var(--accent);background:#E6EDFC;border:1px solid #C8D8F8;
  border-radius:999px;padding:5px 14px;transition:.15s;
}
table.calls .play:hover{background:#D6E3FA}
table.calls audio{height:32px;vertical-align:middle}

@media (max-width:860px){
  .tablewrap{overflow-x:auto;border-radius:var(--r)}
}

/* ------------------------------------------------ login page */
body.auth{margin:0}
.login-wrap{display:grid;grid-template-columns:1.1fr 1fr;min-height:100vh}
@media (max-width:900px){.login-wrap{grid-template-columns:1fr}.login-art{display:none}}
.login-art{
  background:
    radial-gradient(900px 520px at 12% 0%, #14233A 0%, transparent 60%),
    radial-gradient(700px 520px at 100% 100%, #0E2233 0%, transparent 55%),
    linear-gradient(160deg,#0E1520 0%,#101B2C 100%);
  color:#C9D4E0;padding:52px 56px;display:flex;flex-direction:column;
}
.login-art .brand{display:flex;align-items:center;gap:12px}
.login-art .logo{
  width:36px;height:36px;border-radius:9px;flex:0 0 auto;
  background:var(--green)
    url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="17" height="17" viewBox="0 0 24 24"><path d="M4 5c0 8.3 6.7 15 15 15l2-4-4.5-2-2 2A11.6 11.6 0 0 1 8 9.5l2-2L8 3 4 5Z" fill="white"/></svg>')
    center/17px no-repeat;
}
.login-art .brand b{font-family:var(--cond);font-weight:700;font-size:1.25rem;letter-spacing:.06em;color:#fff;display:block}
.login-art .brand small{display:block;font-family:var(--mono);font-size:.6rem;color:#7E90A5;letter-spacing:.14em}
.login-art h2{
  font-family:var(--cond);font-weight:700;font-size:2.5rem;line-height:1.1;
  color:#fff;margin:60px 0 14px;max-width:420px;letter-spacing:.01em;
}
.login-art p{max-width:400px;color:#8FA1B5;font-size:.95rem;line-height:1.55;margin:0}
.sig{display:flex;align-items:flex-end;gap:4px;height:60px;margin:42px 0 0}
.sig i{width:6px;border-radius:2px;background:linear-gradient(180deg,#19C08B,#0B9A6D);animation:eq 1.6s ease-in-out infinite}
.sig i:nth-child(even){background:linear-gradient(180deg,#2F80FF,#1F5EE8)}
@keyframes eq{0%,100%{transform:scaleY(.4)}50%{transform:scaleY(1)}}
@media (prefers-reduced-motion:reduce){.sig i{animation:none}}
.login-art .foot{
  margin-top:auto;padding-top:22px;border-top:1px solid rgba(42,58,78,.5);
  font-family:var(--mono);font-size:.62rem;letter-spacing:.14em;color:#5F7188;
}
.login-panel{display:grid;place-items:center;padding:44px 26px;background:var(--bg)}
.login-card{width:100%;max-width:400px}
.login-card .role{
  font-family:var(--mono);font-size:.64rem;letter-spacing:.22em;color:var(--green);
  margin-bottom:12px;display:flex;align-items:center;gap:8px;
}
.login-card .role::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--green)}
.login-card h1{font-family:var(--cond);font-weight:700;font-size:1.85rem;letter-spacing:.01em;margin:0}
.login-card .sub{color:var(--muted);font-size:.9rem;margin:8px 0 24px}
.login-card label{display:block;font-size:.8rem;font-weight:600;margin:16px 0 6px}
.login-card input{
  width:100%;padding:11px 13px;font:inherit;
  border:1px solid var(--line);border-radius:8px;background:var(--card);
}
.login-card input:focus{outline:2px solid var(--green);outline-offset:0;border-color:transparent}
.login-card button[type="submit"]{
  width:100%;margin-top:24px;padding:12px;font:inherit;font-weight:600;font-size:.95rem;
  cursor:pointer;background:var(--green);color:#fff;border:none;border-radius:8px;transition:.15s;
}
.login-card button[type="submit"]:hover{background:#0A855E}
.login-card p.error{margin:0 0 10px}

/* T-11: .main is a grid child with min-width:0 but no width, so it collapses to
   its content instead of filling the 1fr column. .cx-content then centres
   inside that collapsed box, which is why the table drifted to one side with
   empty space beside it. */
.main{width:100%}
.cx-content{max-width:min(1500px,100%)}

/* T-11: the 1500px cap on .cx-content was leaving a wide empty band beside the
   table on large screens - margin-inline:auto centres inside the cap, so the
   extra space lands on both sides. The cap goes; the table now fills whatever
   width the grid column gives it. */
.cx-content{max-width:100%!important;margin-inline:0!important}
.main{width:100%;min-width:0}

/* ============================================================
   PREMIUM v2 — Campaigns (dashboard.php) only. Additive.
   Does NOT touch :root defaults, login, or calls. Prefix: cx-
   Remove this whole block to fully revert.
   ============================================================ */
:root{
  --r-lg:14px;
  --shadow-lift:0 12px 30px -10px rgba(16,24,40,.16), 0 3px 10px rgba(16,24,40,.06);
  --cx-warm:#F5F7F5;
  --green-grad:linear-gradient(135deg,#12B37F,#0B9A6D);
}

.cx-warm{background:var(--cx-warm)}

.cx-warm .wstrip .wcard{
  border-radius:var(--r-lg);
  box-shadow:var(--shadow);
  transition:box-shadow .18s ease, transform .18s ease;
}
.cx-warm .wstrip .wcard:hover{box-shadow:var(--shadow-lift);transform:translateY(-2px)}

.cx-warm .wstrip .wcard:first-child{
  background:var(--green-grad);border-color:transparent;
}
.cx-warm .wstrip .wcard:first-child .wlab{color:rgba(255,255,255,.85)}
.cx-warm .wstrip .wcard:first-child .wval{color:#fff}

.cx-warm section.line{
  border-radius:var(--r-lg);
  transition:box-shadow .18s ease, transform .18s ease;
}
.cx-warm section.line:hover{box-shadow:var(--shadow-lift)}

@media (prefers-reduced-motion:reduce){
  .cx-warm .wstrip .wcard, .cx-warm section.line{transition:none}
  .cx-warm .wstrip .wcard:hover{transform:none}
}

/* ==== PREMIUM v2 — extension 2: stat cards + actions (Campaigns only) ==== */
.cx-warm dl.stats > div{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  padding:16px 18px;
  box-shadow:var(--shadow);
  transition:box-shadow .18s ease, transform .18s ease;
}
.cx-warm dl.stats > div:hover{box-shadow:var(--shadow-lift);transform:translateY(-2px)}
.cx-warm dl.stats dd{font-size:1.7rem;margin-top:7px}
.cx-warm dl.stats dt{font-size:.62rem}

.cx-warm .actions button:not(.danger){
  background:var(--green);color:#fff;border-color:transparent;
}
.cx-warm .actions button:not(.danger):hover{background:#0A855E;border-color:transparent}

@media (prefers-reduced-motion:reduce){
  .cx-warm dl.stats > div{transition:none}
  .cx-warm dl.stats > div:hover{transform:none}
}