/* Brand type (from Dragoon's art files; built by tools/build_brand_assets.py).
   Cheap Pine Sans = the condensed caps on every can; Avenir = body copy. */
@font-face { font-family:"Cheap Pine Sans"; src:url("../fonts/cheap-pine-sans.woff2") format("woff2"); font-display:swap; }
@font-face { font-family:"Avenir LT"; src:url("../fonts/avenir-book.woff2") format("woff2"); font-weight:400; font-display:swap; }
@font-face { font-family:"Avenir LT"; src:url("../fonts/avenir-medium.woff2") format("woff2"); font-weight:500; font-display:swap; }
@font-face { font-family:"Avenir LT"; src:url("../fonts/avenir-heavy.woff2") format("woff2"); font-weight:600 700; font-display:swap; }
@font-face { font-family:"Avenir LT"; src:url("../fonts/avenir-black.woff2") format("woff2"); font-weight:800 900; font-display:swap; }

:root {
  /* UI colours stay out of the brand palette: charcoal for "black", violet accent */
  --app-charcoal: #3d4643;        /* Dragoon logo charcoal: header bar, dark buttons, ink */
  --font-display: "Cheap Pine Sans", "Oswald", "Arial Narrow", sans-serif-condensed, Impact, sans-serif;
  --bs-body-font-family: "Avenir LT", "Avenir Next", Avenir, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --app-accent: #5b45b0;          /* buttons, links, active states */
  --app-accent-hover: #4a3794;
  --app-accent-soft: #ebe7f7;
  --app-nav: var(--app-charcoal);
  --viz-ty: #3d4643;              /* total volume line: charcoal, so no brand hue is borrowed */
  --viz-ly: #a3a199;              /* comparison (dashed) */
  --viz-grid: rgba(0,0,0,.08);
  --viz-text: #52514e;
  --st-good: #0ca30c;
  --st-warn: #fab219;
  --st-serious: #ec835a;
  --st-critical: #d03b3b;
  --map-gap: #3d4643;
  --bs-body-color: #2b2f32;
  --bs-body-color-rgb: 43,47,50;
  --bs-emphasis-color: #1f2224;
  --bs-primary: var(--app-accent);
  --bs-primary-rgb: 91,69,176;
  --bs-link-color: #5b45b0;
  --bs-link-color-rgb: 91,69,176;
  --bs-link-hover-color: #4a3794;
  --bs-link-hover-color-rgb: 74,55,148;
}
[data-bs-theme="dark"] {
  --app-accent: #a897ef;
  --app-accent-hover: #c0b3f5;
  --app-accent-soft: #2e2945;
  --app-nav: #2c3331;
  --map-gap: #c9ccca;
  --viz-ty: #dcdedf;
  --viz-ly: #7d7b74;
  --viz-grid: rgba(255,255,255,.1);
  --viz-text: #c3c2b7;
  --bs-body-bg: #1f2224;          /* charcoal, not black */
  --bs-body-color: #e3e5e6;
  --bs-body-color-rgb: 227,229,230;
  --bs-emphasis-color: #f4f5f6;
  --bs-emphasis-color-rgb: 244,245,246;
  --bs-tertiary-bg: #26292c;
  --bs-secondary-bg: #2c3033;
  --bs-primary: var(--app-accent);
  --bs-primary-rgb: 168,151,239;
  --bs-link-color: #b4a6f2;
  --bs-link-color-rgb: 180,166,242;
  --bs-link-hover-color: #cfc5f7;
}
body { background: var(--bs-tertiary-bg); }
.btn-primary { --bs-btn-bg: var(--app-accent); --bs-btn-border-color: var(--app-accent);
  --bs-btn-hover-bg: var(--app-accent-hover); --bs-btn-hover-border-color: var(--app-accent-hover);
  --bs-btn-active-bg: var(--app-accent-hover); --bs-btn-active-border-color: var(--app-accent-hover);
  --bs-btn-disabled-bg: var(--app-accent); --bs-btn-disabled-border-color: var(--app-accent); }
[data-bs-theme="dark"] .btn-primary { --bs-btn-color:#1c1830; --bs-btn-hover-color:#1c1830; --bs-btn-active-color:#1c1830; }
.btn-dark { --bs-btn-bg: var(--app-charcoal); --bs-btn-border-color: var(--app-charcoal); --bs-btn-hover-bg: #2c3331; --bs-btn-hover-border-color: #2c3331; }
.nav-pills { --bs-nav-pills-link-active-bg: var(--app-accent); }
[data-bs-theme="dark"] .nav-pills { --bs-nav-pills-link-active-color: #1c1830; }
.form-check-input:checked { background-color: var(--app-accent); border-color: var(--app-accent); }
.form-control:focus, .form-select:focus { border-color: var(--app-accent); box-shadow: 0 0 0 .2rem color-mix(in srgb, var(--app-accent) 25%, transparent); }
.btn-outline-primary { --bs-btn-color: var(--bs-primary); --bs-btn-border-color: var(--bs-primary);
  --bs-btn-hover-bg: var(--bs-primary); --bs-btn-hover-border-color: var(--bs-primary);
  --bs-btn-active-bg: var(--bs-primary); --bs-btn-active-border-color: var(--bs-primary); }
[data-bs-theme="dark"] .btn-outline-primary { --bs-btn-hover-color:#1c1830; --bs-btn-active-color:#1c1830; }

.app-nav { background: var(--app-nav); padding-top: max(.5rem, env(safe-area-inset-top)); }
.brand-cog { display:block; flex:none; }
.wordmark { font-family: var(--font-display); color:#fff; font-size:1.45rem; letter-spacing:.06em; line-height:1; text-transform:uppercase; padding-top:2px; }
.wordmark span, .wordmark-lg span { color:#c0b3f5; }
.wordmark-lg { font-family: var(--font-display); font-size:2.2rem; letter-spacing:.06em; text-transform:uppercase; font-weight:400; line-height:1; color: var(--app-charcoal); }
.wordmark-lg span { color: var(--app-accent); }
/* brand logo art in lists and chips (core brands); other brands keep a colour dot */
.brand-mark-img { display:inline-block; vertical-align:-.3em; margin-right:.4rem; object-fit:contain; flex:none; }
/* package shot (core cans) or keg/case icon tinted with the brand colour */
.pkg-thumb { display:inline-grid; place-items:center; width:40px; height:40px; flex:none; border-radius:8px;
  background: var(--bs-secondary-bg); overflow:hidden; }
.pkg-thumb img { max-width:36px; max-height:36px; object-fit:contain; }
.pkg-keg { color: var(--c); background: color-mix(in srgb, var(--c) 14%, transparent); font-size:1.2rem; }
.nav-links a { color: rgba(255,255,255,.7); text-decoration:none; padding:.4rem .75rem; border-radius:6px; font-size:.95rem; }
.nav-links a:hover { color:#fff; }
.nav-links a.active { color:#fff; background: rgba(255,255,255,.1); }
.scope-chip { display:flex; align-items:center; gap:.4rem; max-width: 70vw; border:1px solid rgba(255,255,255,.25);
  background: rgba(255,255,255,.06); color:#fff; border-radius: 999px; padding:.35rem .5rem .35rem .75rem; font-size:.875rem; }
.scope-chip .bi { color: #c0b3f5; }
.unit-pill { background: var(--app-accent); color:#fff; border-radius:999px; padding:0 .45rem; font-weight:700; font-size:.75rem; }
.avatar { width:34px; height:34px; padding:0; }

.bottom-nav { position: fixed; bottom:0; left:0; right:0; z-index: 1030; display:flex; justify-content:space-around;
  background: var(--bs-body-bg); border-top:1px solid var(--bs-border-color);
  padding-bottom: env(safe-area-inset-bottom); }
.bottom-nav a { flex:1; display:flex; flex-direction:column; align-items:center; gap:2px; padding:.45rem 0 .4rem;
  color: var(--bs-secondary-color); text-decoration:none; font-size:.72rem; min-height:54px; }
.bottom-nav a .bi { font-size:1.25rem; }
.bottom-nav a.active { color: var(--bs-primary); font-weight:600; }
.pb-nav { padding-bottom: 84px !important; }
@media (min-width: 768px) { .pb-nav { padding-bottom: 2rem !important; } }

.card { border: 1px solid var(--bs-border-color-translucent); border-radius: 12px; }
.card-header { background: transparent; font-weight: 600; border-bottom-color: var(--bs-border-color-translucent); }
.kpi .label { font-size:.78rem; text-transform:uppercase; letter-spacing:.04em; color: var(--bs-secondary-color); }
.kpi .value { font-family: var(--font-display); font-size: 2.3rem; font-weight: 400; letter-spacing:.02em; line-height:1.05; }
.kpi .sub { font-size: .82rem; color: var(--bs-secondary-color); }
.num { font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.table > :not(caption) > * > * { padding: .5rem .6rem; }
.table thead th { font-size:.75rem; text-transform:uppercase; letter-spacing:.03em; color: var(--bs-secondary-color); font-weight:600; white-space:nowrap; }
.table a { text-decoration: none; }
.page-title { font-family: var(--font-display); font-size: 1.9rem; font-weight: 400; letter-spacing:.04em; text-transform:uppercase; line-height:1.05; margin: 0; }
.page-title-name { font-family: var(--bs-body-font-family); font-weight: 800; font-size: 1.5rem; letter-spacing: 0; text-transform: none; }  /* names have "#": the display font draws it as a numero sign */
.asof { font-size:.8rem; color: var(--bs-secondary-color); }

/* status chips: colour + text, never colour alone */
.st { display:inline-flex; align-items:center; gap:.3rem; font-size:.78rem; font-weight:600; white-space:nowrap; }
.st::before { content:""; width:.6rem; height:.6rem; border-radius:50%; background: currentColor; flex:none; }
.st-Overdue, .st-Gap { color: var(--st-critical); }
.st-Due, .st-Lapsed-item { color: #b07800; }
[data-bs-theme="dark"] .st-Due { color: var(--st-warn); }
.st-Lapsed { color: var(--bs-secondary-color); }
.st-Carries, .st-On-track { color: var(--st-good); }
.st-New { color: var(--bs-secondary-color); }
.st-LapsedPl { color: #c4602f; }
[data-bs-theme="dark"] .st-LapsedPl { color: var(--st-serious); }

/* mobile list cards */
.list-card { display:block; padding:.75rem .9rem; border-bottom:1px solid var(--bs-border-color-translucent); color: inherit; text-decoration:none; }
.list-card:last-child { border-bottom: 0; }
.list-card:active { background: var(--bs-secondary-bg); }
.list-card .title { font-weight:600; }
.list-card .meta { font-size:.8rem; color: var(--bs-secondary-color); }
.list-card .big { font-weight:700; font-variant-numeric: tabular-nums; }

.chart-box { position: relative; height: 260px; }
@media (min-width: 992px) { .chart-box.tall { height: 420px; } }
.bar-row { display:grid; grid-template-columns: minmax(90px, 38%) 1fr auto; align-items:center; gap:.5rem; font-size:.85rem; padding:.2rem 0; }
.bar-track { height: 10px; border-radius: 0 4px 4px 0; background: transparent; }
.bar-fill { height: 100%; background: var(--viz-ty); border-radius: 0 4px 4px 0; min-width: 2px; }

#map { height: 62vh; min-height: 360px; border-radius: 12px; z-index: 0; }
@media (max-width: 767px) { #map { height: 55vh; } }
.legend-dot { display:inline-block; width:.7rem; height:.7rem; border-radius:50%; margin-right:.3rem; vertical-align:-1px; border:2px solid var(--bs-body-bg); box-shadow:0 0 0 1px rgba(0,0,0,.2); }
.seg-scroll { overflow-x:auto; white-space:nowrap; -webkit-overflow-scrolling: touch; }
.form-select, .form-control { min-height: 42px; }
.sort-link { color: inherit; }
.sort-link.active { color: var(--bs-primary); }
.coming-soon { border: 1px dashed var(--bs-border-color); border-radius: 12px; }

/* period bar */
.period-select { width: auto; min-width: 230px; flex: 0 1 auto; }
.period-select .form-select, .custom-dates .form-control { min-height: 34px; }
.filter-chip { border: 1px solid var(--bs-border-color); background: var(--bs-body-bg); color: var(--bs-body-color);
  border-radius: 999px; padding: .25rem .7rem; font-size: .82rem; white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.filter-chip .bi { color: var(--bs-primary); }
@media (max-width: 575px) { .period-select { flex: 1 1 100%; } }
.brand-list .btn { --bs-btn-padding-y: .2rem; --bs-btn-padding-x: .6rem; font-size: .82rem; }
.brand-list .btn-check:checked + .btn { background: var(--bs-primary); border-color: var(--bs-primary); color: #fff; }
[data-bs-theme="dark"] .brand-list .btn-check:checked + .btn { color: #1c1830; }
.badge-new { background: rgba(42,120,214,.12); color: #1c5cab; font-weight: 600; font-size: .7rem; padding: .15em .5em; border-radius: 999px; }
[data-bs-theme="dark"] .badge-new { background: rgba(57,135,229,.2); color: #9ec5f4; }
.line-tag { font-size: .68rem; text-transform: uppercase; letter-spacing: .04em; color: var(--bs-secondary-color); }
.custom-dates[hidden] { display: none !important; }
.btn-group > .btn-check:checked + .btn + .btn-check:checked + .btn { border-left-color: rgba(255,255,255,.45); }

/* brand colour swatch (colour + name, never colour alone) */
.brand-dot { display:inline-block; width:.62rem; height:.62rem; border-radius:50%; margin-right:.4rem; vertical-align: 0; flex:none; box-shadow: 0 0 0 1.5px var(--bs-body-bg); }
.brand-bar { height: 6px; border-radius: 0 3px 3px 0; min-width: 2px; }
.chart-toggle .btn { --bs-btn-padding-y: .1rem; --bs-btn-padding-x: .55rem; font-size: .78rem; }
[data-bs-theme="dark"] .unit-pill, [data-bs-theme="dark"] .brand-mark { color: #1c1830; }
/* neutral (non-brand) bars: mid grey so they don't shout */
.bar-fill { background: #7a7f83; }
[data-bs-theme="dark"] .bar-fill { background: #9aa0a4; }

.acct-table thead th { vertical-align: bottom; }
.acct-table .sort-link { text-decoration: none; color: inherit; }
.acct-table .sort-link:hover, .acct-table .sort-link.active { color: var(--app-accent); }
.col-tip { font-size: .72rem; opacity: .55; cursor: help; }
.col-tip:hover, .col-tip:focus { opacity: 1; outline: none; }
.tooltip { --bs-tooltip-max-width: 260px; font-size: .8rem; text-transform: none; letter-spacing: 0; }

/* home-screen install prompt (phones) */
.install-hint { position: fixed; left: 12px; right: 12px; bottom: calc(66px + env(safe-area-inset-bottom)); z-index: 1031;
  display: flex; align-items: center; gap: .65rem; padding: .6rem .7rem; border-radius: 14px;
  background: var(--bs-body-bg); border: 1px solid var(--bs-border-color); box-shadow: 0 6px 24px rgba(0,0,0,.18); }
.install-hint[hidden] { display: none; }
.install-hint img { border-radius: 9px; }
/* standalone (installed) mode: respect the notch */
@media (display-mode: standalone) { .app-nav { padding-top: max(.5rem, env(safe-area-inset-top)); } }