/* Search Ads 360 look: Material blue, Roboto, flat bordered cards, dense tables with a totals row, icon navigation.
   Loaded after app.css so it only overrides tokens and a few components. Remove the link in index.html to get the PoLR look back. */
:root {
  --ground: #f8f9fa; --surface: #ffffff; --sunken: #f1f3f4; --line: #dadce0; --line-strong: #bdc1c6;
  --ink: #202124; --ink-muted: #5f6368;
  --accent: #1a73e8; --on-accent: #ffffff; --accent-soft: #e8f0fe; --accent-text: #1967d2;
  --violet: #1a73e8; --violet-soft: #e8f0fe; --violet-text: #1967d2;
  --amber: #fbbc04; --on-amber: #202124;
  --good: #188038; --good-soft: #e6f4ea; --good-text: #137333; --danger: #d93025; --danger-soft: #fce8e6; --danger-text: #c5221f; --focus: #1a73e8;
  --shadow-card: none; --shadow-lift: 0 1px 3px rgba(60,64,67,.3), 0 4px 8px 3px rgba(60,64,67,.15);
  --font-display: "Roboto", system-ui, sans-serif; --font-sans: "Roboto", system-ui, -apple-system, "Segoe UI", sans-serif; --font-mono: "Roboto Mono", ui-monospace, Menlo, monospace;
  --radius-lg: 8px; --radius-md: 6px;
  --s1: #4285f4; --s2: #ea4335; --s3: #34a853; --s4: #fbbc04; --s5: #ff6d01; --s6: #46bdc6; --s7: #7baaf7; --s8: #9334e6;
  --event: rgba(251,188,4,.14);
  --side-w: 256px; --top-h: 56px;
}
body { background: var(--ground); color: var(--ink); font-family: var(--font-sans); font-size: 14px; }

/* top bar: white, flat, hairline */
.top { height: var(--top-h); border-bottom: 1px solid var(--line); gap: var(--space-3); }
.brand .heading { font: 500 20px/24px var(--font-display); letter-spacing: 0; }
.mark i:nth-child(1) { background: #ea4335; } .mark i:nth-child(2) { background: #4285f4; } .mark i:nth-child(3) { background: #fbbc04; }
.prop { border-left: 1px solid var(--line); padding: 2px 0 2px var(--space-4); }
.prop .label { font: 500 14px/18px var(--font-sans); } .prop .caption { font-size: 11px; }
.search input { height: 40px; background: #f1f3f4; border: 1px solid transparent; border-radius: 8px; font: 400 14px var(--font-sans); }
.search input:focus { background: var(--surface); border-color: var(--accent); box-shadow: 0 1px 3px rgba(60,64,67,.3); outline: 0; }
.polr-btn { font-family: var(--font-sans); font-weight: 500; letter-spacing: .1px; }
.polr-btn--primary { background: var(--accent); color: #fff; border-color: var(--accent); }
.polr-btn--primary:hover { background: #1b66c9; }
.polr-btn--secondary { background: var(--surface); color: var(--accent-text); border: 1px solid var(--line); }
.polr-btn--ghost { color: var(--accent-text); }

/* side navigation: icon + label, rounded right edge, blue when current */
.side { padding: var(--space-2) 0 var(--space-8); background: var(--surface); border-right: 1px solid var(--line); }
.nav-sec { margin: 0; padding: var(--space-2) 0; gap: 0; border-bottom: 1px solid var(--line); }
.nav-sec:last-child { border-bottom: 0; }
.nav-sec > .eyebrow:first-child { display: none; }
.nav-sec .eyebrow.sub { display: block; padding: 12px 24px 4px; font: 500 11px/16px var(--font-sans); letter-spacing: .06em; text-transform: uppercase; }
.nav-i { display: flex; align-items: center; gap: 16px; height: 40px; padding: 0 16px 0 24px; border-radius: 0 20px 20px 0; margin-right: 12px; color: var(--ink); font: 500 14px/20px var(--font-sans); }
.nav-i .ni { flex: none; color: var(--ink-muted); }
.nav-i .nl { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.nav-i:hover { background: var(--sunken); }
.nav-i.on { background: var(--accent-soft); color: var(--accent-text); font-weight: 500; }
.nav-i.on .ni { color: var(--accent-text); }
.nav-i.view::before { content: none; }
.navbadge { background: var(--accent); color: #fff; font: 500 11px/20px var(--font-sans); }

/* toolbar under the top bar */
.fbar { background: var(--surface); border-bottom: 1px solid var(--line); padding: 8px var(--space-6); gap: 8px; }
.fbtn { min-height: 40px; padding: 2px 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); }
.fbtn:hover { background: var(--sunken); }
.fbtn .fl { font: 500 11px/14px var(--font-sans); letter-spacing: 0; text-transform: none; color: var(--ink-muted); }
.fbtn.add { border-style: solid; color: var(--accent-text); }
.fbtn.sel select { font: 500 14px var(--font-sans); }
.fchip { background: var(--accent-soft); color: var(--accent-text); }
.pbar { background: #e8f0fe; color: #174ea6; border-bottom: 1px solid #d2e3fc; font: 500 14px/20px var(--font-sans); }
.pbar .polr-btn { border-color: #174ea6; color: #174ea6; background: transparent; }

/* page title: plain, like a product page heading */
.page { padding: var(--space-4) var(--space-6) var(--space-8); max-width: none; }
.phead { padding-bottom: var(--space-2); }
.phead .eyebrow { display: none; } .phead .eyebrow.crumb { display: block; font: 400 13px/18px var(--font-sans); letter-spacing: 0; text-transform: none; }
.phead h1, .phead .display { font: 400 24px/32px var(--font-display); letter-spacing: 0; }
.phead .body { font-size: 14px; margin-top: 2px; }
.eyebrow { font-family: var(--font-sans); letter-spacing: .06em; }
.grid { gap: var(--space-3); margin-top: var(--space-3); }

/* cards: flat, bordered */
.card { box-shadow: none; border: 1px solid var(--line); border-radius: 8px; padding: var(--space-4); }
.card .title, .card-h .title { font: 500 16px/24px var(--font-display); letter-spacing: 0; }
.caption { font-family: var(--font-sans); }
.tbtn { height: 28px; border-radius: 4px; border: 1px solid var(--line); color: var(--accent-text); font: 500 12px var(--font-sans); background: var(--surface); }
.tbtn:hover { background: var(--accent-soft); color: var(--accent-text); }

/* scorecards */
.kpis { gap: var(--space-3); }
.kpi { border: 1px solid var(--line); border-radius: 8px; box-shadow: none; padding: 12px 16px; background: var(--surface); }
.kpi[aria-current] { border-color: var(--line); box-shadow: inset 0 -3px 0 var(--accent); }
.kpi-l { font: 500 12px/16px var(--font-sans); } .kpi-v { font: 400 26px/32px var(--font-display); letter-spacing: 0; }

/* tables: dense, light header, pinned totals row */
.dt { font: 400 13px/18px var(--font-sans); }
.dt th { font: 500 12px/16px var(--font-sans); color: var(--ink-muted); text-transform: none; letter-spacing: 0; background: var(--surface); border-bottom: 1px solid var(--line); padding: 10px 12px; }
.dt td { padding: 6px 12px; height: 40px; border-bottom: 1px solid #eceff1; }
.dt th a:hover, .dt th a { color: inherit; }
.dt .mv { font: 400 13px var(--font-sans); font-variant-numeric: tabular-nums; margin-right: 6px; }
.dt tr.tot td { font-weight: 500; background: #f8f9fa; border-bottom: 1px solid var(--line); position: sticky; top: 36px; }
.dt tr.tot .mv { font-weight: 500; }
.dt a { color: var(--accent-text); text-decoration: none; } .dt a:hover { text-decoration: underline; }
.dt tbody tr:hover td { background: #f1f3f4; } .dt tr.tot:hover td { background: #f8f9fa; }
.tfoot { display: flex; justify-content: space-between; align-items: center; padding-top: var(--space-2); }
.tsearch input { height: 36px; border-radius: 8px; border: 1px solid var(--line); }

/* status as dot and word, like the campaign status column */
.st { display: inline-flex; align-items: center; gap: 8px; font: 400 13px/18px var(--font-sans); white-space: nowrap; }
.st::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--good); }
.st-off::before { background: transparent; border: 2px solid #80868b; width: 10px; height: 10px; box-sizing: border-box; }
.polr-chip { font-family: var(--font-sans); }

/* segmented controls and inputs */
.segctl { border-radius: 8px; background: var(--surface); border: 1px solid var(--line); padding: 2px; }
.segctl a[aria-current] { background: var(--accent-soft); color: var(--accent-text); box-shadow: none; }
.ctl select { border-radius: 8px; border: 1px solid var(--line); height: 36px; }
form.inline input, .guard input { border-radius: 4px; border-color: var(--line-strong); }

/* agent surfaces */
.agent-panel { background: #3c4043; color: #fff; border-radius: 8px; }
.proposal { border-color: var(--accent); }
.zero h1 { font-family: var(--font-display); font-weight: 400; }
.starter { border-radius: 8px; box-shadow: none; border: 1px solid var(--line); }
.starter:hover { border-color: var(--accent); }
.toast { background: #323232; color: #fff; border-radius: 4px; }
.evlabel { font-family: var(--font-sans); }
@media (max-width: 900px) { .nav-i { height: 44px; } }

/* keep names on one line and let the table scroll, instead of squeezing columns */
.dt td.l:first-child { white-space: nowrap; min-width: 200px; }
.dt td, .dt th { white-space: nowrap; }
.dt td { padding: 6px 10px; } .dt th { padding: 10px 10px; }
.kpis { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.kpi-v { font-size: 24px; }
.nav-sec .eyebrow.sub::before { content: none; }