/* Accent colour: Bootstrap's primary is re-mapped to an orange. */
:root, [data-bs-theme="light"] {
  --bs-primary: #ea580c;
  --bs-primary-rgb: 234, 88, 12;
  --bs-primary-text-emphasis: #7c2d12;
  --bs-primary-bg-subtle: #ffedd5;
  --bs-primary-border-subtle: #fdba74;
  --bs-link-color: #c2410c;
  --bs-link-color-rgb: 194, 65, 12;
  --bs-link-hover-color: #9a3412;
  --bs-link-hover-color-rgb: 154, 52, 18;
  --bs-focus-ring-color: rgba(234, 88, 12, .25);
  --bs-body-bg: #f6f7f9;
  --bs-tertiary-bg: #eef0f4;
  --h0: #e9ecf1; --h1: #fed7aa; --h2: #fdba74; --h3: #f97316; --h4: #c2410c;
}
[data-bs-theme="dark"] {
  --bs-primary: #fb923c;
  --bs-primary-rgb: 251, 146, 60;
  --bs-primary-text-emphasis: #fdba74;
  --bs-primary-bg-subtle: #3a2210;
  --bs-primary-border-subtle: #7c3a10;
  --bs-link-color: #fb923c;
  --bs-link-color-rgb: 251, 146, 60;
  --bs-link-hover-color: #fdba74;
  --bs-link-hover-color-rgb: 253, 186, 116;
  --bs-focus-ring-color: rgba(251, 146, 60, .3);
  --bs-body-bg: #14171c;
  --bs-tertiary-bg: #1b1f26;
  --bs-secondary-bg: #20252d;
  --h0: #262b34; --h1: #5b3a1d; --h2: #8a4f1c; --h3: #d9701a; --h4: #fb923c;
}
.btn-primary {
  --bs-btn-color: #fff; --bs-btn-bg: var(--bs-primary); --bs-btn-border-color: var(--bs-primary);
  --bs-btn-hover-color: #fff; --bs-btn-hover-bg: #c2410c; --bs-btn-hover-border-color: #c2410c;
  --bs-btn-active-color: #fff; --bs-btn-active-bg: #9a3412; --bs-btn-active-border-color: #9a3412;
  --bs-btn-focus-shadow-rgb: var(--bs-primary-rgb);
  --bs-btn-disabled-bg: var(--bs-primary); --bs-btn-disabled-border-color: var(--bs-primary);
}
[data-bs-theme="dark"] .btn-primary {
  --bs-btn-color: #1a1206; --bs-btn-hover-color: #1a1206; --bs-btn-active-color: #1a1206;
  --bs-btn-hover-bg: #fdba74; --bs-btn-hover-border-color: #fdba74;
  --bs-btn-active-bg: #fed7aa; --bs-btn-active-border-color: #fed7aa;
}
.btn-outline-primary {
  --bs-btn-color: var(--bs-primary); --bs-btn-border-color: var(--bs-primary);
  --bs-btn-hover-color: #fff; --bs-btn-hover-bg: var(--bs-primary); --bs-btn-hover-border-color: var(--bs-primary);
  --bs-btn-active-color: #fff; --bs-btn-active-bg: var(--bs-primary); --bs-btn-active-border-color: var(--bs-primary);
  --bs-btn-focus-shadow-rgb: var(--bs-primary-rgb);
}
[data-bs-theme="dark"] .btn-outline-primary { --bs-btn-hover-color: #1a1206; --bs-btn-active-color: #1a1206; }
.form-control:focus, .form-select:focus { border-color: rgba(var(--bs-primary-rgb), .7); box-shadow: 0 0 0 .25rem var(--bs-focus-ring-color); }
.form-check-input:checked { background-color: var(--bs-primary); border-color: var(--bs-primary); }
.form-check-input:focus { border-color: var(--bs-primary); box-shadow: 0 0 0 .25rem var(--bs-focus-ring-color); }

body { padding-bottom: env(safe-area-inset-bottom); }
.card { --bs-card-border-color: var(--bs-border-color-translucent); --bs-card-bg: var(--bs-body-bg); }
[data-bs-theme="light"] .card { --bs-card-bg: #fff; box-shadow: 0 1px 2px rgba(16, 24, 40, .05); }
[data-bs-theme="dark"] .card { --bs-card-bg: #1c2027; }
[data-bs-theme="light"] .app-header { background: #fff !important; }
[data-bs-theme="dark"] .app-header { background: #1c2027 !important; }
.card-header { background: transparent; font-weight: 600; }
.table { --bs-table-bg: transparent; }
.table > :not(caption) > * > * { padding: .45rem .6rem; }
.table th { font-size: .78rem; font-weight: 600; color: var(--bs-secondary-color); white-space: nowrap; }
.table td.num, .table th.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.table td.mid, .table th.mid { text-align: center; }
.table tfoot td { font-weight: 700; border-bottom-width: 0; }
tr.clickable { cursor: pointer; }
.num-strong { font-variant-numeric: tabular-nums; }

/* ---- navigation: pills on desktop, bottom tab bar on phones ---- */
.app-nav { display: flex; gap: .25rem; }
.app-nav a { display: flex; align-items: center; gap: .45rem; padding: .4rem .8rem; border-radius: .5rem; color: var(--bs-secondary-color); text-decoration: none; font-weight: 500; white-space: nowrap; }
.app-nav a:hover { background: var(--bs-tertiary-bg); color: var(--bs-body-color); }
.app-nav a.active { background: var(--bs-primary-bg-subtle); color: var(--bs-primary-text-emphasis); }
@media (max-width: 991.98px) {
  .app-nav { position: fixed; left: 0; right: 0; bottom: 0; z-index: 1030; justify-content: space-around; gap: 0;
    background: var(--bs-body-bg); border-top: 1px solid var(--bs-border-color); padding: .25rem .25rem calc(.25rem + env(safe-area-inset-bottom)); }
  [data-bs-theme="light"] .app-nav { background: #fff; }
  [data-bs-theme="dark"] .app-nav { background: #1c2027; }
  .app-nav a { flex: 1 1 0; min-width: 0; flex-direction: column; gap: .1rem; padding: .35rem .1rem; font-size: .68rem; border-radius: .5rem; }
  .app-nav a i { font-size: 1.25rem; line-height: 1; }
  .app-nav a span { overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
  main { padding-bottom: 5.5rem !important; }
  .toast-container { bottom: 4.5rem; width: 100%; }
}

/* ---- widgets ---- */
.kpi .kpi-label { color: var(--bs-secondary-color); font-size: .78rem; }
.kpi .kpi-value { font-size: 1.55rem; font-weight: 700; line-height: 1.15; font-variant-numeric: tabular-nums; }
.kpi .kpi-sub { color: var(--bs-secondary-color); font-size: .78rem; }
@media (max-width: 575.98px) { .kpi .kpi-value { font-size: 1.25rem; } }
.chart-box { position: relative; height: 260px; }
.chart-box.tall { height: 340px; }
@media (max-width: 575.98px) { .chart-box { height: 230px; } .chart-box.tall { height: 300px; } }
.progress { --bs-progress-height: .5rem; }
.toast.toast-app { background: var(--bs-emphasis-color); color: var(--bs-body-bg); }
.toast.toast-app .btn-close { filter: none; }
[data-bs-theme="light"] .toast.toast-app .btn-close { filter: invert(1); }
.chip-row { display: flex; flex-wrap: wrap; gap: .5rem; }
.quick .btn { text-align: left; }
.brand-tag { background: var(--bs-primary-bg-subtle); color: var(--bs-primary-text-emphasis); font-weight: 500; }
.star-btn { color: var(--bs-secondary-color); }
.star-btn.on { color: var(--bs-primary); }
.warn-list { max-height: 220px; overflow: auto; font-size: .85rem; color: var(--bs-secondary-color); }

/* ---- calendar heatmap ---- */
.heat-wrap { overflow-x: auto; padding-bottom: .4rem; }
.heat-months { display: grid; grid-auto-flow: column; grid-auto-columns: 16px; font-size: .72rem; color: var(--bs-secondary-color); height: 16px; }
.heat-months span { overflow: visible; white-space: nowrap; }
.heat { display: grid; grid-auto-flow: column; grid-template-rows: repeat(7, 13px); grid-auto-columns: 13px; gap: 3px; width: max-content; }
.heat i { border-radius: 3px; background: var(--h0); }
.heat i.l1 { background: var(--h1); } .heat i.l2 { background: var(--h2); } .heat i.l3 { background: var(--h3); } .heat i.l4 { background: var(--h4); }
.heat i.off { background: transparent; }
.legend { display: flex; gap: 4px; align-items: center; font-size: .75rem; color: var(--bs-secondary-color); margin-top: .5rem; }
.legend i { width: 13px; height: 13px; border-radius: 3px; display: inline-block; }