:root {
  --mtg-red: #c0111f;
  --mtg-red-dark: #96010e;
  --mtg-grey: #f4f4f5;
  --mtg-text: #2b2b2e;
}

html { font-size: 14px; position: relative; min-height: 100%; }
@media (min-width: 768px) { html { font-size: 15px; } }
body { margin-bottom: 60px; background: var(--mtg-grey); color: var(--mtg-text); }

/* Header */
.mtg-header .navbar { background: linear-gradient(90deg, var(--mtg-red-dark), var(--mtg-red)); }
.navbar-brand { display: inline-flex; align-items: center; }
.navbar-brand .brand-logo { height: 40px; width: auto; margin-right: .7rem; }
/* The whole title is one string in one weight and size. Tracking is a shade tighter than the old
   .04em because the full-size second half made the header wrap a breakpoint earlier (measured:
   clean to 1366 before, only to 1440 after) - this buys that breakpoint back. */
.navbar-brand .brand-main { font-weight: 800; letter-spacing: .01em; font-size: .94em; }
/* brand-sub is gone: the title is now a single string in one span (Stuart, 3 Aug 2026), so there is
   no second style to keep in step. */
.navbar-brand .brand-portal {
  margin-left: .8rem; padding: .15rem .55rem; border: 1px solid rgba(255,255,255,.6);
  border-radius: .25rem; font-size: .7em; text-transform: uppercase; letter-spacing: .1em; vertical-align: middle;
}
.mtg-header .nav-link { color: rgba(255,255,255,.85) !important; }
.mtg-header .nav-link:hover { color: #fff !important; }
.mtg-header .nav-link.disabled { color: rgba(255,255,255,.6) !important; }

/* Filter bar */
.filter-bar { background: #fff; border: 1px solid #e3e3e6; border-radius: .5rem; padding: .8rem 1rem; }
.filter-bar label { font-size: .78rem; text-transform: uppercase; letter-spacing: .05em; color: #6b6b70; margin-bottom: .15rem; }

/* KPI tiles */
.kpi-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: .8rem; }
.kpi-tile {
  background: #fff; border: 1px solid #e3e3e6; border-radius: .5rem;
  padding: 1rem 1.1rem; border-top: 3px solid var(--mtg-red);
}
.kpi-tile .kpi-value { font-size: 1.7rem; font-weight: 700; color: var(--mtg-red); line-height: 1.15; }
.kpi-tile .kpi-label { font-size: .8rem; color: #6b6b70; text-transform: uppercase; letter-spacing: .05em; margin-top: .2rem; }
.kpi-tile.kpi-good .kpi-value { color: #1e7d34; }
.kpi-tile.kpi-bad .kpi-value { color: var(--mtg-red-dark); }

/* Cards */
.panel { background: #fff; border: 1px solid #e3e3e6; border-radius: .5rem; padding: 1rem 1.1rem; }
.panel h2 { font-size: 1rem; color: var(--mtg-red); font-weight: 700; margin-bottom: .8rem; }

/* Tables */
.table-report thead th {
  background: var(--mtg-red); color: #fff; font-size: .8rem; white-space: nowrap;
  position: sticky; top: 0; z-index: 2;
}
/* two-row headers (e.g. the weekday pivot): pin the first row at 0 and the second just below it */
.table-report thead tr:first-child th { top: 0; height: 32px; }
.table-report thead tr:nth-child(2) th { top: 32px; }
.table-report { font-size: .85rem; }
.table-report tfoot td { font-weight: 700; background: var(--mtg-red); color: #fff; }
.badge-otif-late { background: var(--mtg-red-dark); }
.badge-otif-ontime { background: #1e7d34; }
.badge-otif-pending { background: #8a8a90; }
/* Marks an OTIF verdict that is assumed rather than measured (booked-in third-party delivery) */
.otif-assumed { color: var(--mtg-red-dark); font-weight: 700; cursor: help; margin-left: .15rem; }

/* Deliveries by Customer: click a row to highlight that customer's map dot and list its orders.
   The tint matches the yellow used on the map, and beats table-striped's own cell background. */
#customersTable tbody tr.js-cust-row { cursor: pointer; }
#customersTable tbody tr.js-cust-row:hover > td { background-color: #fff6da !important; }
#customersTable tbody tr.row-selected > td { background-color: #ffe7a0 !important; font-weight: 600; }

/* Comparison deltas */
.delta-chip { display: inline-block; padding: .1rem .5rem; border-radius: 1rem; font-size: .78rem; font-weight: 600; }
.delta-good { background: #e2f2e5; color: #1e7d34; }
.delta-bad { background: #fbe4e6; color: #96010e; }
.delta-neutral { background: #ececee; color: #6b6b70; }
.kpi-prev { font-size: .78rem; color: #8a8a90; margin-top: .2rem; }
/* whole header cell is the click target, not just the label */
th.rank-th { padding: 0 !important; }
.rank-link { color: #fff; text-decoration: none; display: block; padding: .25rem .5rem; cursor: pointer; }
.rank-link:hover { color: #fff; background: var(--mtg-red-dark); }
.rank-link.rank-active { text-decoration: underline; text-underline-offset: 3px; }
td.rank-active-col { background: rgba(192, 17, 31, .07); font-weight: 600; }
/* fixed layout so column widths don't shift when the ranking (and bolding) changes */
.compare-table { table-layout: fixed; width: 100%; }
.compare-table th, .compare-table td { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Delivery map: always show a pointer over clickable markers, whatever leaflet.css did */
#deliveryMap path.leaflet-interactive { cursor: pointer !important; }
#deliveryMap { cursor: grab; }
#deliveryMap:active { cursor: grabbing; }

/* Login */
.login-wrap { min-height: 80vh; display: flex; align-items: center; justify-content: center; }
.login-card { width: 100%; max-width: 400px; background: #fff; border-radius: .6rem; border-top: 4px solid var(--mtg-red);
  box-shadow: 0 8px 30px rgba(0,0,0,.12); padding: 2rem; }
.login-card h1 { font-size: 1.2rem; font-weight: 700; color: var(--mtg-red); }

.btn-mtg { background: var(--mtg-red); border-color: var(--mtg-red); color: #fff; }
.btn-mtg:hover { background: var(--mtg-red-dark); border-color: var(--mtg-red-dark); color: #fff; }

.footer { position: absolute; bottom: 0; width: 100%; white-space: nowrap; line-height: 60px; }

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem rgba(192, 17, 31, .45);
}