/* ===========================
   Google Console–inspired UI
   Single-file, no libraries
   REWIRED: Revenue Channel Control Panel
   =========================== */

:root{
  --bg:#f8f9fa;
  --surface:#ffffff;
  --surface2:#f1f3f4;
  --ink:#202124;
  --muted:#5f6368;
  --line:#e0e0e0;

  --blue:#1a73e8;
  --blue2:#185abc;

  --good:#1e8e3e;
  --warn:#f9ab00;
  --bad:#d93025;

  --shadow:0 1px 2px rgba(60,64,67,.15), 0 2px 10px rgba(60,64,67,.10);

  --r:12px;
  --topH:56px;
  --navW:280px;

  --font: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
          Roboto, "Helvetica Neue", Arial, "Apple Color Emoji", "Segoe UI Emoji";
}

*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  font-family:var(--font);
  color:var(--ink);
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
a{ color:inherit; text-decoration:none; }
button,input,select,textarea{ font-family:inherit; }

/* ===== Layout ===== */
.app{
  display:grid;
  grid-template-columns: var(--navW) 1fr;
  grid-template-rows: var(--topH) 1fr;
  min-height:100vh;
}

/* ===== Top App Bar ===== */
.topbar{
  grid-column: 1 / -1;
  position:sticky; top:0; z-index:50;
  height:var(--topH);
  background:var(--surface);
  border-bottom:1px solid var(--line);
  padding-top: env(safe-area-inset-top);
}
.topbarIn{
  height:calc(var(--topH));
  display:flex;
  align-items:center;
  gap:12px;
  padding:0 16px;
  min-width:0;
}

.iconBtn{
  width:40px; height:40px;
  display:inline-grid; place-items:center;
  border-radius:999px;
  border:1px solid transparent;
  background:transparent;
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
  transition:background .15s ease, border-color .15s ease;
  flex:0 0 auto;
}
.iconBtn:hover{ background:rgba(32,33,36,.06); }
.iconBtn:active{ background:rgba(32,33,36,.10); }

.hamb{ display:none; }

.brand{
  display:flex; align-items:center; gap:10px;
  min-width:0;
}
.logo{
  width:28px; height:28px; border-radius:8px;
  background:linear-gradient(135deg, rgba(26,115,232,.18), rgba(26,115,232,.06));
  border:1px solid rgba(26,115,232,.18);
  display:grid; place-items:center;
  color:var(--blue2);
  font-weight:800;
  letter-spacing:-.02em;
  flex:0 0 auto;
}
.titleWrap{ min-width:0; }
.title{
  font-size:14px;
  font-weight:800;
  letter-spacing:.1px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  max-width: 42vw;
}
.subtitle{
  font-size:12px;
  color:var(--muted);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  max-width: 56vw;
}

.search{
  flex:1;
  display:flex;
  align-items:center;
  gap:10px;
  max-width: 760px;
  margin-left: 8px;
  padding:10px 12px;
  border-radius:999px;
  background:var(--surface2);
  border:1px solid transparent;
  transition:border-color .15s ease, background .15s ease;
  min-width:0;
}
.search:focus-within{
  background:#fff;
  border-color:rgba(26,115,232,.35);
  box-shadow:0 1px 2px rgba(26,115,232,.08);
}
.search svg{ opacity:.74; flex:0 0 auto; }
.search input{
  width:100%;
  border:none;
  outline:none;
  background:transparent;
  font-size:13px;
  color:var(--ink);
  min-width:0;
}

.topActions{
  display:flex;
  align-items:center;
  gap:6px;
  margin-left:auto;
  flex:0 0 auto;
}
.avatar{
  width:32px; height:32px;
  border-radius:999px;
  background:rgba(26,115,232,.12);
  border:1px solid rgba(26,115,232,.20);
  display:grid; place-items:center;
  font-weight:800;
  color:var(--blue2);
  font-size:12px;
  margin-left:6px;
}

/* ===== Left Nav ===== */
.sidenav{
  grid-row: 2 / -1;
  position:sticky;
  top:calc(var(--topH) + env(safe-area-inset-top));
  align-self:start;
  height:calc(100vh - var(--topH) - env(safe-area-inset-top));
  background:var(--surface);
  border-right:1px solid var(--line);
  overflow:auto;
  padding:12px 8px 16px;
}

.navSection{ padding:8px 8px 4px; }
.navLabel{
  font-size:11px;
  font-weight:800;
  color:var(--muted);
  letter-spacing:.08em;
  text-transform:uppercase;
  padding:10px 10px 6px;
}
.navItem{
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 10px;
  border-radius:10px;
  color:var(--ink);
  font-size:13px;
  font-weight:700;
  transition:background .15s ease;
  cursor:pointer;
  user-select:none;
}
.navItem:hover{ background:rgba(32,33,36,.06); }
.navItem.active{
  background:rgba(26,115,232,.12);
  color:var(--blue2);
}
.navDot{
  width:8px; height:8px;
  border-radius:999px;
  background:rgba(95,99,104,.45);
}
.navItem.active .navDot{ background:var(--blue); }
.navMeta{
  margin-left:auto;
  font-size:11px;
  color:var(--muted);
  font-weight:800;
  background:rgba(95,99,104,.12);
  padding:3px 8px;
  border-radius:999px;
  white-space:nowrap;
}
.navItem.active .navMeta{
  background:rgba(26,115,232,.12);
  color:var(--blue2);
}

/* ===== Main ===== */
.main{
  grid-column: 2 / -1;
  grid-row: 2 / -1;
  padding:16px 18px 28px;
  min-width:0;
}

.crumbs{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  align-items:center;
  color:var(--muted);
  font-size:12px;
  margin:2px 0 12px;
}
.crumbs b{ color:var(--ink); font-weight:800; }
.sep{ opacity:.55; }

.pageHead{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:14px;
  margin-bottom:14px;
}
.pageHead h1{
  margin:0;
  font-size:20px;
  letter-spacing:-.01em;
}
.pageHead p{
  margin:6px 0 0;
  color:var(--muted);
  font-size:13px;
  max-width: 900px;
  line-height:1.45;
}

.btn{
  border:none;
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
  border-radius:999px;
  padding:9px 14px;
  font-size:13px;
  font-weight:800;
  background:var(--surface);
  color:var(--ink);
  border:1px solid var(--line);
  transition:transform .15s ease, box-shadow .15s ease, background .15s ease, border-color .15s ease;
  white-space:nowrap;
}
.btn:hover{ box-shadow:var(--shadow); transform:translateY(-1px); }
.btn:active{ transform:translateY(0); }
.btnPrimary{
  background:var(--blue);
  color:#fff;
  border-color:rgba(26,115,232,.40);
}
.btnPrimary:hover{ background:var(--blue2); }

.row{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.spacer{ height:10px; }

/* ===== Cards / grid ===== */
.card{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--r);
  overflow:hidden;
}
.cardHead{
  padding:14px 14px 10px;
  border-bottom:1px solid var(--line);
  display:flex;
  gap:10px;
  align-items:flex-start;
  justify-content:space-between;
}
.cardHead h2{
  margin:0;
  font-size:14px;
  letter-spacing:.1px;
  font-weight:800;
}
.cardHead .hint{
  margin:4px 0 0;
  color:var(--muted);
  font-size:12px;
  line-height:1.35;
}
.cardBody{ padding:14px; height:100%; }

/* Balanced dashboard grid */
.dash{
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap:14px;
  align-items:stretch;
}
@media (max-width:1100px){
  .dash{ grid-template-columns: 1fr; }
}

/* ===== Chips ===== */
.chips{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin:8px 0 0;
}
.chip{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid var(--line);
  background:rgba(95,99,104,.06);
  font-size:12px;
  font-weight:800;
  color:var(--ink);
}
.chipDot{ width:8px; height:8px; border-radius:999px; background:rgba(95,99,104,.55); }
.chip.good{ background:rgba(30,142,62,.08); border-color:rgba(30,142,62,.18); }
.chip.good .chipDot{ background:var(--good); }
.chip.warn{ background:rgba(249,171,0,.10); border-color:rgba(249,171,0,.22); }
.chip.warn .chipDot{ background:var(--warn); }
.chip.bad{ background:rgba(217,48,37,.08); border-color:rgba(217,48,37,.18); }
.chip.bad .chipDot{ background:var(--bad); }

/* ===== Revenue lifecycle header ===== */
.pipeline{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  padding:12px 14px;
  background:linear-gradient(180deg, rgba(26,115,232,.05), rgba(26,115,232,0));
  border-bottom:1px solid var(--line);
}
.stage{
  display:flex;
  align-items:center;
  gap:8px;
  border:1px solid var(--line);
  background:#fff;
  padding:8px 10px;
  border-radius:999px;
  font-size:12px;
  font-weight:800;
  color:var(--ink);
  white-space:nowrap;
}
.stage small{
  font-size:11px;
  font-weight:900;
  color:var(--muted);
  background:rgba(95,99,104,.10);
  padding:3px 8px;
  border-radius:999px;
}
.arrow{
  display:inline-block;
  width:18px;
  text-align:center;
  color:rgba(95,99,104,.55);
  font-weight:900;
}

/* ===== Table ===== */
.tableWrap{
  overflow:auto;
  border-radius:12px;
  border:1px solid var(--line);
  background:#fff;
}
table{
  width:100%;
  border-collapse:separate;
  border-spacing:0;
  min-width: 820px;
  font-size:13px;
}
thead th{
  position:sticky;
  top:0;
  background:var(--surface2);
  border-bottom:1px solid var(--line);
  color:var(--muted);
  font-size:11px;
  letter-spacing:.08em;
  text-transform:uppercase;
  text-align:left;
  padding:10px 12px;
  font-weight:900;
  z-index:1;
  white-space:nowrap;
}
tbody td{
  padding:12px;
  border-bottom:1px solid rgba(224,224,224,.75);
  vertical-align:top;
}
tbody tr:hover td{ background:rgba(26,115,232,.04); }
.lead{
  display:flex;
  flex-direction:column;
  gap:4px;
  min-width: 260px;
}
.lead b{ font-size:13px; }
.lead span{ font-size:12px; color:var(--muted); }
.tag{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:4px 8px;
  border-radius:999px;
  font-size:11px;
  font-weight:900;
  border:1px solid var(--line);
  background:rgba(95,99,104,.06);
  color:var(--ink);
  white-space:nowrap;
}
.tag.good{ background:rgba(30,142,62,.08); border-color:rgba(30,142,62,.18); }
.tag.warn{ background:rgba(249,171,0,.10); border-color:rgba(249,171,0,.22); }
.tag.bad{ background:rgba(217,48,37,.08); border-color:rgba(217,48,37,.18); }
.tiny{
  display:block;
  margin-top:6px;
  color:var(--muted);
  font-size:12px;
  line-height:1.35;
}

/* ===== Forms ===== */
.formGrid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:10px;
}
@media (max-width:700px){ .formGrid{ grid-template-columns:1fr; } }

.field{ display:flex; flex-direction:column; gap:6px; }
.field label{
  font-size:12px;
  color:var(--muted);
  font-weight:800;
}
.field input, .field select, .field textarea{
  border:1px solid var(--line);
  border-radius:10px;
  padding:10px 12px;
  font-size:13px;
  outline:none;
  background:#fff;
  transition:border-color .15s ease, box-shadow .15s ease;
}
.field textarea{ min-height:90px; resize:vertical; }
.field input:focus, .field select:focus, .field textarea:focus{
  border-color:rgba(26,115,232,.55);
  box-shadow:0 0 0 4px rgba(26,115,232,.12);
}

.split2{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:10px;
  align-items:start;
}
@media (max-width:900px){ .split2{ grid-template-columns:1fr; } }

/* ===== Dropzone ===== */
.drop{
  border:1px dashed rgba(95,99,104,.45);
  border-radius:12px;
  padding:12px;
  background:rgba(95,99,104,.04);
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:10px;
}
.drop b{ font-size:13px; }
.drop p{
  margin:6px 0 0;
  color:var(--muted);
  font-size:12px;
  line-height:1.35;
}

/* ===== Audit ===== */
.callout{
  border:1px solid rgba(26,115,232,.18);
  background:rgba(26,115,232,.06);
  border-radius:12px;
  padding:12px;
}
.callout h3{
  margin:0 0 6px;
  font-size:13px;
  font-weight:900;
}
.callout p{
  margin:0;
  color:var(--muted);
  font-size:12.5px;
  line-height:1.45;
}
.log{
  border:1px solid var(--line);
  border-radius:12px;
  overflow:hidden;
  background:#fff;
}
.logHead{
  padding:10px 12px;
  background:var(--surface2);
  border-bottom:1px solid var(--line);
  font-size:11px;
  letter-spacing:.08em;
  text-transform:uppercase;
  font-weight:900;
  color:var(--muted);
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
}
.logBody{
  max-height:240px;
  overflow:auto;
  padding:8px 0;
}
.logItem{
  padding:10px 12px;
  border-bottom:1px solid rgba(224,224,224,.7);
  font-size:12.5px;
}
.logItem:last-child{ border-bottom:none; }
.logItem b{ font-weight:900; }
.logItem .t{ color:var(--muted); font-size:12px; display:block; margin-top:3px; }

/* ===== Manual overrides ===== */
.overrides{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}
.btnDanger{
  background:rgba(217,48,37,.08);
  border-color:rgba(217,48,37,.24);
  color:#a50e0e;
}
.btnDanger:hover{ box-shadow:0 1px 2px rgba(217,48,37,.12), 0 2px 10px rgba(217,48,37,.10); }
.btnWarn{
  background:rgba(249,171,0,.12);
  border-color:rgba(249,171,0,.26);
  color:#8a5b00;
}
.btnWarn:hover{ box-shadow:0 1px 2px rgba(249,171,0,.14), 0 2px 10px rgba(249,171,0,.10); }
.btnGood{
  background:rgba(30,142,62,.10);
  border-color:rgba(30,142,62,.22);
  color:#0b5d1e;
}
.btnGood:hover{ box-shadow:0 1px 2px rgba(30,142,62,.12), 0 2px 10px rgba(30,142,62,.10); }

/* ===== Agent chips ===== */
.agentChips{ display:flex; flex-wrap:wrap; gap:8px; }
.agentChip{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:7px 10px;
  border-radius:999px;
  border:1px solid var(--line);
  background:rgba(95,99,104,.06);
  font-size:12px;
  font-weight:900;
  cursor:pointer;
  user-select:none;
}
.agentChip input{ display:none; }
.agentChip .dot{
  width:10px; height:10px;
  border-radius:999px;
  background:rgba(95,99,104,.55);
  border:1px solid rgba(0,0,0,.06);
}
.agentChip[data-agent="Helix"] .dot{ background:rgba(30,142,62,.35); }
.agentChip[data-agent="ClarityIQ"] .dot{ background:rgba(26,115,232,.35); }
.agentChip[data-agent="Aura"] .dot{ background:rgba(95,99,104,.35); }
.agentChip[data-agent="Nova"] .dot{ background:rgba(95,99,104,.35); }
.agentChip[data-agent="Scout"] .dot{ background:rgba(95,99,104,.35); }
.agentChip[data-agent="Vaia"] .dot{ background:rgba(95,99,104,.35); }
.agentChip.on{
  background:rgba(26,115,232,.10);
  border-color:rgba(26,115,232,.22);
  color:var(--blue2);
}
.agentChip.on .dot{ background:var(--blue); }

.inlineNote{
  font-size:12px;
  color:var(--muted);
  line-height:1.45;
  margin-top:10px;
}

/* ===== Toast ===== */
.toast{
  position:fixed;
  right:16px;
  bottom:16px;
  z-index:120;
  background:#fff;
  border:1px solid var(--line);
  border-radius:14px;
  box-shadow:var(--shadow);
  padding:10px 12px;
  display:flex;
  align-items:flex-start;
  gap:10px;
  max-width:min(420px, calc(100vw - 32px));
  transform:translateY(8px);
  opacity:0;
  pointer-events:none;
  transition:opacity .18s ease, transform .18s ease;
}
.toast.show{
  opacity:1;
  transform:translateY(0);
  pointer-events:auto;
}
.toast b{ font-size:13px; font-weight:900; }
.toast p{ margin:3px 0 0; color:var(--muted); font-size:12px; line-height:1.35; }
.toast .x{
  margin-left:auto;
  width:32px; height:32px;
  border-radius:999px;
  border:1px solid transparent;
  background:transparent;
  cursor:pointer;
  display:grid; place-items:center;
}
.toast .x:hover{ background:rgba(32,33,36,.06); }

/* ===== Mobile Drawer ===== */
.backdrop{
  display:none;
  position:fixed; inset:0;
  background:rgba(32,33,36,.35);
  z-index:80;
}
.drawer{
  display:none;
  position:fixed;
  top:0; left:0;
  width:min(92vw, var(--navW));
  height:100vh;
  background:var(--surface);
  border-right:1px solid var(--line);
  z-index:90;
  box-shadow: 0 14px 30px rgba(60,64,67,.22);
  padding-top: calc(var(--topH) + env(safe-area-inset-top));
  overflow:auto;
}

@media (max-width:980px){
  .app{ grid-template-columns: 1fr; }
  .sidenav{ display:none; }
  .main{ grid-column: 1 / -1; }
  .hamb{ display:inline-grid; }
  .search{ display:none; }
}
@media (max-width:520px){
  .title{ max-width: 62vw; }
  .subtitle{ display:none; }
}

.muted{ color:var(--muted); }