/* Northwind OneCase - app pages (agent desk, impact, check my bill).
   Loaded after the Start Bootstrap Creative theme (static/creative/css/styles.css, unchanged), which brings Bootstrap,
   the white #mainNav bar, the orange buttons and the Merriweather fonts. This file only adds the app's own pieces
   (case timeline, bill check, status pills, charts) in the theme's colours and type. Nothing loads from the network. */
:root {
  --paper: #f8f9fa;        /* theme bg-light */
  --panel: #ffffff;
  --ink: #212529;          /* theme text */
  --ink-2: #495057;
  --muted: #6c757d;        /* theme text-muted */
  --rule: #dee2e6;
  --rule-2: #e9ecef;
  --action: #f4623a;       /* theme primary orange: every clickable primary */
  --action-ink: #ffffff;
  --brown: #5c4d42;        /* theme brown */
  --hivis: #ffc107;
  --flag: #dc3545;  --flag-wash: #f8d7da;
  --pass: #198754;  --pass-wash: #d1e7dd;
  --info: #055160;  --info-wash: #cff4fc;
  --series-actual: #2a78d6;    /* bill on an actual read */
  --series-est: #eb6834;       /* bill on an estimate */
  --grid: #e9ecef;
  --axis: #ced4da;
  --display: "Merriweather Sans", -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --body: "Merriweather", -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: "Cascadia Mono", "Cascadia Code", Consolas, "SF Mono", Menlo, monospace;
  --r: .375rem;
}
body { background: var(--paper); color: var(--ink); font-size: .95rem; line-height: 1.45; }
:focus-visible { outline: 3px solid var(--action); outline-offset: 2px; }
.mono { font-family: var(--mono); font-size: .92em; letter-spacing: -.01em; }
.num { font-family: var(--display); font-variant-numeric: tabular-nums; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
h1, h2, h3 { font-family: var(--display); font-weight: 700; margin: 0; }
svg text { font-family: var(--display); }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }

/* ---------- the theme's navbar, kept in its white "scrolled" state on these pages ---------- */
#mainNav.app { position: relative; z-index: 20; }
#mainNav.app .navbar-brand { font-size: 1.1rem; }

/* page toolbar under the navbar: tagline on the left, page controls on the right */
.toolbar { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; padding: 8px 1.5rem; background: #fff;
  border-top: 1px solid var(--rule-2); border-bottom: 1px solid var(--rule); }
.toolbar .tagline { font-family: var(--display); font-size: .8rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--muted); }
.spacer { flex: 1; }

/* before/after toggle: the theme's outline buttons as a segmented pair */
.seg .btn { font-family: var(--display); font-weight: 700; font-size: .85rem; text-transform: uppercase; letter-spacing: .03em; }
.seg .btn[aria-pressed="true"] { background: var(--action); border-color: var(--action); color: #fff; }
.seg .btn[data-mode="legacy"][aria-pressed="true"] { background: var(--flag); border-color: var(--flag); }
.seg .btn:disabled { opacity: .45; cursor: not-allowed; pointer-events: auto; }

/* ---------- panels ---------- */
.panel { background: var(--panel); border: 0; border-radius: .5rem; box-shadow: 0 .125rem .25rem rgba(0,0,0,.075); }
.pane { padding: 16px 18px; }
.eyebrow { font-family: var(--display); font-size: .75rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
  color: var(--muted); margin: 0 0 8px; }

/* status pill: icon + label, never colour alone */
.status { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; font-size: .8rem; padding: 3px 10px 3px 8px;
  border-radius: 99px; font-family: var(--display); letter-spacing: .02em; }
.status::before { font-size: .95em; }
.status.flag { background: var(--flag-wash); color: var(--flag); } .status.flag::before { content: "\25B2"; }
.status.pass { background: var(--pass-wash); color: var(--pass); } .status.pass::before { content: "\2714"; }
.status.info { background: var(--info-wash); color: var(--info); } .status.info::before { content: "\2139"; }

/* ---------- chart chrome ---------- */
.legend { display: flex; flex-wrap: wrap; gap: 14px; font-size: .78rem; color: var(--ink-2); margin: 6px 0 2px; }
.legend i { display: inline-block; width: 12px; height: 12px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; }
.legend i.line { height: 3px; border-radius: 2px; vertical-align: 3px; width: 16px; }
.tip { position: fixed; pointer-events: none; background: var(--ink); color: #fff; padding: 8px 10px; border-radius: 6px;
  font-size: .8rem; line-height: 1.35; z-index: 50; max-width: 260px; box-shadow: 0 4px 16px rgba(0,0,0,.2); }
.tip b { font-family: var(--display); }
details.show-table summary { cursor: pointer; font-size: .78rem; color: var(--muted); margin-top: 4px; }
details.show-table .table { font-size: .78rem; margin: 6px 0 0; font-variant-numeric: tabular-nums; }
details.show-table .table th, details.show-table .table td { text-align: right; }
details.show-table .table th:first-child, details.show-table .table td:first-child { text-align: left; }

@media (max-width: 600px) { .toolbar { padding: 8px 12px; } .toolbar .tagline { flex: 1 0 100%; } }