/* =====================================================================
   Ads vs Revenue — admin dashboard
   Dark rail on the left, calm working area on the right.
   Every table turns into cards below 820px.
   ===================================================================== */
:root{
  --sidebar:#111c2d;
  --sidebar-2:#0c1523;
  --sidebar-txt:#8ea0b8;
  --sidebar-on:#ffffff;

  --bg:#f4f6f9;
  --panel:#ffffff;
  --rule:#e6e9ee;
  --rule-2:#d5dae2;

  --ink:#1c2733;
  --ink-2:#55617180;
  --muted:#6b7787;

  --brand:#0e9f6e;
  --brand-dark:#0b8259;
  --brand-soft:#e7f6f0;

  --cost:#c0392f;
  --cost-soft:#fdeceb;
  --gain:#0e7c53;
  --gain-soft:#e7f6ef;
  --warn:#8a6300;
  --warn-soft:#fdf4e0;

  --r:10px;
  --r-sm:7px;
  --shadow:0 1px 2px rgba(16,24,40,.05), 0 1px 3px rgba(16,24,40,.06);
  --shadow-lg:0 8px 24px rgba(16,24,40,.12);

  --mono:ui-monospace,"SF Mono",SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace;
  --sans:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--bg);color:var(--ink);
  font-family:var(--sans);font-size:14.5px;line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
a{color:var(--brand-dark)}

/* ---------------------------------------------------------- layout */
.app{display:flex;min-height:100vh}
.main{flex:1 1 auto;min-width:0;display:flex;flex-direction:column}
.content{flex:1 1 auto;padding:22px 26px 40px;width:100%;max-width:1400px}

/* --------------------------------------------------------- sidebar */
.sidebar{
  flex:0 0 246px;width:246px;background:var(--sidebar);color:var(--sidebar-txt);
  display:flex;flex-direction:column;padding:0 0 14px;
  position:sticky;top:0;height:100vh;overflow-y:auto;
}
.brand{display:flex;align-items:center;gap:11px;padding:18px 18px 16px}
.brand-mark{
  width:36px;height:36px;border-radius:9px;background:var(--brand);
  display:grid;place-items:center;color:#fff;flex:0 0 auto
}
.brand-mark svg{width:19px;height:19px}
.brand-text strong{display:block;color:#fff;font-size:15px;letter-spacing:-.01em;line-height:1.2}
.brand-text small{display:block;color:#71829b;font-size:11.5px}

.nav-group{
  padding:16px 18px 6px;font-size:10.5px;letter-spacing:.11em;
  text-transform:uppercase;color:#5e6f88;font-weight:600
}
.nav-item{
  display:flex;align-items:center;gap:11px;margin:1px 10px;padding:9px 11px;
  border-radius:var(--r-sm);color:var(--sidebar-txt);text-decoration:none;font-size:14px
}
.nav-item .ico{flex:0 0 18px;display:grid;place-items:center}
.nav-item .ico svg{width:18px;height:18px}
.nav-item .txt{flex:1 1 auto}
.nav-item:hover{background:#1b283b;color:#dbe3ee}
.nav-item.on{background:var(--brand);color:#fff;font-weight:600;box-shadow:0 2px 8px rgba(14,159,110,.3)}
.nav-item.quiet{margin-top:auto;color:#68788f}
.pill{
  background:var(--cost);color:#fff;border-radius:20px;padding:1px 8px;
  font-size:11.5px;font-family:var(--mono);font-weight:600
}
.nav-item.on .pill{background:rgba(255,255,255,.25)}

.scrim{position:fixed;inset:0;background:rgba(10,17,28,.5);z-index:40;border:0}

/* ---------------------------------------------------------- topbar */
.topbar{
  position:sticky;top:0;z-index:20;background:var(--panel);
  border-bottom:1px solid var(--rule);
  display:flex;align-items:center;gap:14px;padding:0 26px;min-height:62px
}
.topbar h1{font-size:19px;margin:0;font-weight:650;letter-spacing:-.015em;flex:1 1 auto}
.topbar-right{display:flex;gap:8px;align-items:center}
.chip{
  background:var(--brand-soft);color:var(--brand-dark);border-radius:20px;
  padding:4px 11px;font-size:12px;font-weight:600;white-space:nowrap
}
.chip.muted-chip{background:#f1f3f6;color:var(--muted);font-weight:500;font-family:var(--mono)}
.burger{display:none;background:none;border:0;padding:6px;cursor:pointer;flex:0 0 auto}
.burger span{display:block;width:20px;height:2px;background:var(--ink);border-radius:2px;margin:4px 0}

/* ------------------------------------------------------- typography */
h2{font-size:16px;margin:26px 0 10px;font-weight:650;letter-spacing:-.01em}
h3{font-size:14.5px;margin:18px 0 8px;font-weight:650}
p{margin:7px 0}
.muted{color:var(--muted);font-size:13.5px}
.raw{font-family:var(--mono);font-size:12.5px;color:var(--muted);word-break:break-word}

/* ------------------------------------------------------------ card */
.card{
  background:var(--panel);border:1px solid var(--rule);border-radius:var(--r);
  padding:18px;margin:14px 0;box-shadow:var(--shadow)
}
.grid{display:grid;gap:16px}
.grid.two{grid-template-columns:repeat(auto-fit,minmax(330px,1fr))}
.empty{padding:34px;text-align:center;color:var(--muted)}

/* ------------------------------------------------------ stat tiles */
.figures{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:14px;margin:4px 0 18px}
.fig{
  background:var(--panel);border:1px solid var(--rule);border-radius:var(--r);
  padding:15px 17px;box-shadow:var(--shadow)
}
.fig .k{font-size:11.5px;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);font-weight:600}
.fig .v{
  font-family:var(--mono);font-size:24px;font-variant-numeric:tabular-nums;
  margin-top:5px;line-height:1.2;letter-spacing:-.02em;word-break:break-word
}
.fig .v.cost{color:var(--cost)}
.fig .v.gain{color:var(--gain)}
.fig .v .muted{display:block;font-size:12.5px;font-weight:400}
.fig .s{font-size:12.5px;color:var(--muted);margin-top:3px}

/* ----------------------------------------------------------- table */
.tablewrap{
  background:var(--panel);border:1px solid var(--rule);border-radius:var(--r);
  overflow-x:auto;box-shadow:var(--shadow)
}
table{border-collapse:collapse;width:100%;font-size:13.5px}
th,td{padding:11px 14px;text-align:left;vertical-align:middle}
thead th{
  background:#fafbfc;font-size:10.5px;text-transform:uppercase;letter-spacing:.07em;
  color:var(--muted);font-weight:700;white-space:nowrap;border-bottom:1px solid var(--rule)
}
tbody tr{border-bottom:1px solid var(--rule)}
tbody tr:last-child{border-bottom:0}
tbody tr:hover{background:#fafbfd}
td.num,th.num{text-align:right;font-family:var(--mono);font-variant-numeric:tabular-nums;white-space:nowrap}
td.cost{color:var(--cost)}
td.gain{color:var(--gain)}
td.num .muted{display:block;font-size:11.5px}
tfoot td{background:#fafbfc;font-weight:650;border-top:2px solid var(--rule-2)}
.prod{font-weight:600;color:var(--ink)}
.prod a{color:var(--ink);text-decoration:none}
.prod a:hover{color:var(--brand-dark);text-decoration:underline}

/* the lead table carries the answer, so it reads a size larger */
table.lead{font-size:14.5px}
table.lead td{padding:13px 14px}
table.lead td.num{font-size:15px}

/* paired bars: out above, in below */
.dual{display:flex;align-items:center;gap:7px;margin:3px 0}
.dual .lbl{font-size:9.5px;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);width:20px;flex:0 0 20px}
.dual .track{flex:1 1 auto;height:7px;background:#edeff3;border-radius:4px;overflow:hidden;display:block}
.dual .track i{display:block;height:100%;border-radius:4px}
.bar{display:flex;height:8px;width:110px;background:#edeff3;border-radius:4px;overflow:hidden}
.bar i{display:block;height:100%}
.b-cost{background:var(--cost)}
.b-gain{background:var(--gain)}
.b-loss{background:repeating-linear-gradient(45deg,#c0392f,#c0392f 3px,#e08a83 3px,#e08a83 6px)}

/* ---------------------------------------------------------- badges */
.tag{
  display:inline-block;border-radius:20px;padding:2.5px 10px;font-size:11.5px;
  font-weight:600;white-space:nowrap
}
.tag.ok{background:var(--gain-soft);color:var(--gain)}
.tag.bad{background:var(--cost-soft);color:var(--cost)}
.tag.wait{background:var(--warn-soft);color:var(--warn)}
.tag.info{background:#eef2f7;color:var(--muted)}

/* ------------------------------------------------- folding sections */
details.section{
  background:var(--panel);border:1px solid var(--rule);border-radius:var(--r);
  margin:14px 0;box-shadow:var(--shadow)
}
details.section > summary{
  padding:14px 18px;font-weight:650;cursor:pointer;list-style:none;
  display:flex;align-items:center;gap:10px;user-select:none;font-size:14.5px
}
details.section > summary::-webkit-details-marker{display:none}
details.section > summary::after{
  content:"";width:7px;height:7px;margin-left:auto;
  border-right:1.8px solid var(--muted);border-bottom:1.8px solid var(--muted);
  transform:rotate(45deg);transition:transform .15s
}
details.section[open] > summary::after{transform:rotate(-135deg)}
details.section > summary:hover{background:#fafbfd}
details.section[open] > summary{border-bottom:1px solid var(--rule)}
details.section .inner{padding:16px 18px}
details.section .inner > .tablewrap{border:1px solid var(--rule);box-shadow:none}
details.section .inner .flash:last-child{margin-bottom:0}

/* ----------------------------------------------------------- forms */
label{
  display:block;font-size:11.5px;text-transform:uppercase;letter-spacing:.06em;
  color:var(--muted);margin:13px 0 5px;font-weight:600
}
input[type=text],input[type=password],input[type=date],input[type=number],
input[type=search],select,textarea{
  width:100%;padding:9px 11px;border:1px solid var(--rule-2);border-radius:var(--r-sm);
  background:#fff;font:inherit;font-size:14px;color:var(--ink)
}
input:focus,select:focus,textarea:focus{
  outline:none;border-color:var(--brand);box-shadow:0 0 0 3px rgba(14,159,110,.15)
}
textarea{font-family:var(--mono);font-size:13px;min-height:170px;white-space:pre}
button,.btn{
  display:inline-block;margin-top:14px;padding:9px 16px;border:0;border-radius:var(--r-sm);
  background:var(--brand);color:#fff;font:inherit;font-size:14px;font-weight:600;
  cursor:pointer;text-decoration:none;white-space:nowrap
}
button:hover,.btn:hover{background:var(--brand-dark)}
button:disabled{background:#b8c2cf;cursor:not-allowed}
.btn.ghost{background:#fff;color:var(--ink);border:1px solid var(--rule-2)}
.btn.ghost:hover{background:#f5f7fa;color:var(--ink)}
.btn.small,button.small{padding:6px 11px;font-size:13px;margin-top:0}
.inline{display:flex;flex-wrap:wrap;gap:12px;align-items:flex-end}
.inline > div{flex:1 1 150px}
.inline label{margin-top:0}
.inline button,.inline .btn{margin-top:0}
input[type=file]{font-size:13.5px;background:none;border:0;padding:0;width:100%}
input[type=checkbox]{width:auto;accent-color:var(--brand)}

/* -------------------------------------------------------- messages */
.flash{padding:11px 15px;border-radius:var(--r-sm);margin:0 0 14px;font-size:13.5px;border:1px solid}
.flash.ok{background:var(--gain-soft);border-color:#bfe2d1;color:var(--gain)}
.flash.warn{background:var(--warn-soft);border-color:#eddcb0;color:var(--warn)}
.flash.err{background:var(--cost-soft);border-color:#f0c6c2;color:var(--cost)}
.err{color:var(--cost);font-size:13.5px}

/* ---------------------------------------------------------- footer */
.foot{padding:16px 26px 26px;color:var(--muted);font-size:12.5px}

/* ----------------------------------------------------------- login */
body.centered{display:flex;align-items:center;justify-content:center;min-height:100vh;background:var(--sidebar)}
.login{width:min(370px,92vw);box-shadow:var(--shadow-lg)}
.login h1{margin:0 0 2px;font-size:20px}
.login button{width:100%}

/* ======================================================== responsive
   Below 820px every table becomes a stack of cards. Each cell prints
   its own column name, taken from data-label.
   ==================================================================== */
.hide-sm{display:table-cell}

@media (max-width:1020px){
  .sidebar{flex-basis:214px;width:214px}
  .content{padding:18px 18px 34px}
  .topbar{padding:0 18px}
}

@media (max-width:820px){
  .sidebar{
    position:fixed;left:0;top:0;z-index:50;transform:translateX(-100%);
    transition:transform .22s ease;box-shadow:var(--shadow-lg);width:262px;flex-basis:262px
  }
  .sidebar.open{transform:none}
  .burger{display:block}
  .topbar h1{font-size:17px}
  .topbar-right .muted-chip{display:none}
  .content{padding:16px 14px 34px}
  .foot{padding:14px}
  .hide-sm{display:none}
  .figures{grid-template-columns:repeat(2,1fr);gap:11px}
  .fig{padding:13px 14px}
  .fig .v{font-size:20px}

  .tablewrap{border:0;background:none;box-shadow:none;overflow:visible}
  table{font-size:13.5px}
  table thead{display:none}
  table,table tbody,table tfoot{display:block;width:100%}
  table tr{
    display:block;background:var(--panel);border:1px solid var(--rule);
    border-radius:var(--r);margin:0 0 11px;padding:6px 4px;box-shadow:var(--shadow)
  }
  table tbody tr:hover{background:var(--panel)}
  table td{
    display:flex;align-items:baseline;justify-content:space-between;gap:14px;
    padding:7px 12px;text-align:right;border:0
  }
  table td::before{
    content:attr(data-label);flex:0 0 auto;text-align:left;
    font-size:10.5px;text-transform:uppercase;letter-spacing:.06em;
    color:var(--muted);font-weight:700;white-space:normal
  }
  table td:empty{display:none}
  table td[data-label=""]{justify-content:flex-end}
  /* the first cell reads as the card's heading */
  table tr td:first-child{
    border-bottom:1px solid var(--rule);margin-bottom:4px;padding-bottom:9px;
    font-size:15px;font-weight:650;text-align:left;display:block
  }
  table tr td:first-child::before{display:none}
  table tfoot tr{background:#f7f9fb;border-color:var(--rule-2)}
  table.lead td{padding:8px 12px}
  table.lead td.num{font-size:14.5px}
  .grid.two{grid-template-columns:1fr}
  details.section .inner{padding:12px}
  details.section > summary{padding:13px 14px;font-size:14px}
  .inline > div{flex:1 1 100%}
}

@media (max-width:400px){
  .figures{grid-template-columns:1fr}
}

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