/* AdEngine base stylesheet */
:root {
  --navy: #0e2a47;
  --navy2: #16406b;
  --amber: #f59e0b;
  --amber-dark: #d97706;
  --ink: #1c2733;
  --muted: #5c6b7a;
  --bg: #f5f7fa;
  --card: #ffffff;
  --line: #e3e9ef;
  --ok: #2e9e5b;
  --bad: #c0392b;
  --info: #2563a8;
  --radius: 10px;
  --shadow: 0 1px 3px rgba(14, 42, 71, .08), 0 4px 14px rgba(14, 42, 71, .06);
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  color: var(--ink);
  background: var(--bg);
  line-height: 1.55;
  font-size: 16px;
}
a { color: var(--info); text-decoration: none; }
a:hover { text-decoration: underline; }
img { max-width: 100%; }
h1, h2, h3, h4 { line-height: 1.2; color: var(--navy); margin: 0 0 .5em; }
p { margin: 0 0 1em; }

.wrap { max-width: 1080px; margin: 0 auto; padding: 0 20px; }
.wrap-narrow { max-width: 560px; margin: 0 auto; padding: 0 20px; }

/* Header / nav */
.topbar { background: var(--navy); color: #fff; }
.topbar .wrap { display: flex; align-items: center; justify-content: space-between; min-height: 60px; gap: 16px; flex-wrap: wrap; }
.brand { font-weight: 800; font-size: 1.25rem; color: #fff !important; letter-spacing: .3px; text-decoration: none !important; }
.brand .dot { color: var(--amber); }
.nav { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.nav a { color: #d7e2ee; font-weight: 500; }
.nav a:hover { color: #fff; text-decoration: none; }
.nav a.active { color: var(--amber); }

/* Buttons */
.btn {
  display: inline-block; background: var(--amber); color: #14263c !important; font-weight: 700;
  border: 0; border-radius: 8px; padding: 10px 20px; cursor: pointer; font-size: 1rem;
  text-decoration: none !important; transition: background .15s;
}
.btn:hover { background: var(--amber-dark); }
.btn-lg { padding: 14px 28px; font-size: 1.1rem; }
.btn-sm { padding: 6px 12px; font-size: .87rem; }
.btn-outline { background: transparent; color: var(--navy) !important; border: 2px solid var(--navy); }
.btn-outline:hover { background: var(--navy); color: #fff !important; }
.btn-ghost { background: transparent; color: var(--info) !important; border: 1px solid var(--line); }
.btn-ghost:hover { background: #eef3f8; }
.btn-danger { background: var(--bad); color: #fff !important; }
.btn-danger:hover { background: #992d22; }
.btn[disabled] { opacity: .5; cursor: not-allowed; }

/* Cards */
.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 22px; }
.card + .card { margin-top: 18px; }
/* ...but NOT inside a grid. Every card after the first is an adjacent sibling, so
   in a .grid they each picked up that 18px while the first did not — which staggered
   the stat tiles down the row instead of lining them up. This was the visible
   "card alignment" problem; the grid itself was fine all along. */
.grid > .card + .card { margin-top: 0; }
.card h3 { margin-top: 0; }
.grid { display: grid; gap: 18px; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 860px) { .grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; } }

/* Stat tiles.
   The grid already stretches these to equal height, but the content used to sit
   hard against the top, so as soon as one label wrapped to two lines ("Impressions
   delivered" wraps long before "Clicks", and grid-4 drops to 2 columns at 860px)
   the numbers and labels across the row stopped lining up. Centring the content
   vertically and letting the label sit on its own row fixes the ragged look at
   every breakpoint. */
.stat { text-align: center; padding: 18px 10px; display: flex; flex-direction: column; justify-content: center; }
.stat > * { width: 100%; }
.stat .num { font-size: 1.9rem; font-weight: 800; color: var(--navy); line-height: 1.15; }
.stat .lbl { color: var(--muted); font-size: .9rem; margin-top: 4px; }

/* Forms */
label { display: block; font-weight: 600; margin: 14px 0 4px; color: var(--navy); }
input[type=text], input[type=email], input[type=password], input[type=url], input[type=number],
input[type=tel], select, textarea {
  width: 100%; padding: 10px 12px; border: 1px solid var(--line); border-radius: 8px;
  font-size: 1rem; font-family: inherit; background: #fff; color: var(--ink);
}
input:focus, select:focus, textarea:focus { outline: 2px solid var(--amber); outline-offset: 0; border-color: var(--amber); }
.hint { color: var(--muted); font-size: .85rem; margin-top: 3px; }
.field-err { color: var(--bad); font-size: .85rem; margin-top: 3px; }

/* Flash */
.flash { border-radius: 8px; padding: 12px 16px; margin: 16px 0; font-weight: 500; }
.flash-ok { background: #e8f6ee; border: 1px solid #bfe5cf; color: #1e6b3e; }
.flash-err { background: #fbeaea; border: 1px solid #efc4c0; color: #8c2b21; }
.flash-info { background: #e9f1fa; border: 1px solid #c4d9ef; color: #1d4e83; }

/* Badges */
.badge { display: inline-block; border-radius: 999px; padding: 3px 12px; font-size: .8rem; font-weight: 700; white-space: nowrap; }
.badge-ok { background: #e8f6ee; color: #1e6b3e; }
.badge-warn { background: #fdf3e0; color: #92600a; }
.badge-info { background: #e9f1fa; color: #1d4e83; }
.badge-bad { background: #fbeaea; color: #8c2b21; }
.badge-muted { background: #eef1f4; color: #5c6b7a; }
.badge-navy { background: var(--navy); color: #fff; }

/* Tables */
table.tbl { width: 100%; border-collapse: collapse; background: #fff; }
.tbl th { text-align: left; font-size: .82rem; text-transform: uppercase; letter-spacing: .4px; color: var(--muted); padding: 10px 12px; border-bottom: 2px solid var(--line); }
.tbl td { padding: 12px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.tbl tr:hover td { background: #f8fafc; }
.tbl-scroll { overflow-x: auto; }

/* Progress bar */
.prog { background: #e8edf2; border-radius: 999px; height: 10px; overflow: hidden; }
.prog > span { display: block; height: 100%; background: linear-gradient(90deg, var(--amber), var(--amber-dark)); border-radius: 999px; }

/* Wizard */
.steps { display: flex; gap: 8px; margin: 20px 0; flex-wrap: wrap; }
.steps .step { flex: 1; min-width: 120px; text-align: center; padding: 10px 8px; background: #fff; border: 1px solid var(--line); border-radius: 8px; color: var(--muted); font-weight: 600; font-size: .9rem; }
.steps .step.on { border-color: var(--amber); color: var(--navy); box-shadow: var(--shadow); }
.steps .step.done { border-color: var(--ok); color: var(--ok); }
.step-pane { display: none; }
.step-pane.on { display: block; }

/* Selectable cards (sites, packages, ad sets) */
.pick { position: relative; border: 2px solid var(--line); border-radius: var(--radius); padding: 16px; cursor: pointer; background: #fff; transition: border-color .15s; display: block; }
.pick:hover { border-color: #c4d2df; }
.pick input { position: absolute; opacity: 0; }
.pick.on, .pick:has(input:checked) { border-color: var(--amber); box-shadow: var(--shadow); }
.pick .pk-price { font-size: 1.5rem; font-weight: 800; color: var(--navy); }
.pick .pk-meta { color: var(--muted); font-size: .9rem; }
.pick .pk-badge { position: absolute; top: -11px; right: 12px; }

/* Chips (geo areas) */
.chips { display: flex; gap: 10px; flex-wrap: wrap; }
.chip { border: 2px solid var(--line); border-radius: 999px; padding: 8px 18px; cursor: pointer; background: #fff; font-weight: 600; color: var(--ink); }
.chip input { position: absolute; opacity: 0; }
.chip:has(input:checked), .chip.on { border-color: var(--amber); background: #fdf3e0; color: var(--navy); }

/* Tabs */
.tabs { display: flex; gap: 6px; border-bottom: 2px solid var(--line); margin-bottom: 18px; flex-wrap: wrap; }
.tabs button { background: none; border: 0; padding: 10px 16px; font-size: 1rem; font-weight: 600; color: var(--muted); cursor: pointer; border-bottom: 3px solid transparent; margin-bottom: -2px; }
.tabs button.on { color: var(--navy); border-bottom-color: var(--amber); }

/* Ad previews */
.ad-prev { background: repeating-conic-gradient(#f0f2f5 0% 25%, #fff 0% 50%) 0 0/20px 20px; border: 1px solid var(--line); border-radius: 8px; padding: 12px; display: flex; align-items: center; justify-content: center; overflow: auto; }
.ad-prev img { display: block; max-width: 100%; height: auto; }

/* Footer */
.footer { background: var(--navy); color: #b9c7d6; margin-top: 60px; padding: 34px 0; font-size: .92rem; }
.footer a { color: #d7e2ee; }
.footer .wrap { display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; }

/* Utility */
.mt0 { margin-top: 0; } .mt1 { margin-top: 8px; } .mt2 { margin-top: 16px; } .mt3 { margin-top: 28px; } .mt4 { margin-top: 44px; }
.mb2 { margin-bottom: 16px; } .mb3 { margin-bottom: 28px; }
.muted { color: var(--muted); }
.small { font-size: .87rem; }
.center { text-align: center; }
.right { text-align: right; }
.flex { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.flex-between { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
/* ⚠️ The `hidden` ATTRIBUTE only sets display:none via the UA stylesheet, so ANY class here with an
   explicit `display` silently beats it. `.spin` did exactly that: both upload/AI spinners animated
   permanently on /portal/ads and in the campaign wizard, on page load, with the user having done
   nothing (reported by an advertiser 2026-08-11). Keep this rule above anything that sets display. */
[hidden] { display: none !important; }

/* Pending-approval count in the admin nav. A pending ad set is otherwise invisible — it silently
   does not serve — so this needs to stay loud. See TASKS P0-11. */
.nav-count { display: inline-block; min-width: 18px; padding: 1px 6px; margin-left: 5px; border-radius: 999px;
  background: var(--bad); color: #fff; font-size: .72rem; font-weight: 700; line-height: 1.5; text-align: center; vertical-align: middle; }

.spin { display: inline-block; width: 18px; height: 18px; border: 3px solid #e3e9ef; border-top-color: var(--amber); border-radius: 50%; animation: aespin .7s linear infinite; vertical-align: middle; }
@keyframes aespin { to { transform: rotate(360deg); } }

/* Page shell for portal/admin */
.page { padding: 28px 0 60px; }
.page-head { display: flex; justify-content: space-between; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 22px; }
.page-head h1 { margin: 0; font-size: 1.6rem; }

/* Clickable stat cards + dashboard chart */
a.stat-link { display: block; text-decoration: none !important; color: inherit; transition: transform .12s, box-shadow .12s, border-color .12s; }
a.stat-link:hover { border-color: var(--amber); transform: translateY(-2px); box-shadow: 0 5px 16px rgba(14, 42, 71, .14); }
.ae-chart { position: relative; }
.ae-tip { position: absolute; background: var(--navy); color: #fff; font-size: .78rem; padding: 4px 10px; border-radius: 6px; pointer-events: none; white-space: nowrap; transform: translate(-50%, -140%); display: none; z-index: 5; }

/* Admin sidebar layout */
.admin-shell { display: grid; grid-template-columns: 210px 1fr; gap: 24px; padding: 28px 0 60px; }
.admin-nav { display: flex; flex-direction: column; gap: 4px; }
.admin-nav a { padding: 9px 14px; border-radius: 8px; color: var(--ink); font-weight: 500; }
.admin-nav a:hover { background: #eaeff5; text-decoration: none; }
.admin-nav a.active { background: var(--navy); color: #fff; }
@media (max-width: 800px) { .admin-shell { grid-template-columns: 1fr; } .admin-nav { flex-direction: row; flex-wrap: wrap; } }