/* Page and component styles. Sizes were in rem on Bootstrap 3's 10px root;
   they are in px since Bootstrap 5 (16px root), FE-002. */

.alert-debug {
  color: black;
  background-color: white;
  border-color: #d6e9c6;
}

.alert-error {
  color: #b94a48;
  background-color: #f2dede;
  border-color: #eed3d7;
}

.reference-group,
.table > :not(caption) > * > .reference-group {
  color: var(--series-benchmark);
}

.ytd-group,
.table > :not(caption) > * > .ytd-group {
  color: rgb(4, 143, 4)
}

/* Shop and reference data use stable, recognizable colours throughout charts. */
.label-success, .label-info { color: #fff; font-size: 10.5px; padding: 8px 18px; }
.label-success { background-color: var(--series-shop); }
.label-info { background-color: var(--series-benchmark); }

/* New application shell ---------------------------------------------------- */
.app-shell {
  --sidebar-bg: #f4f5f6;
  --sidebar-text: #0e0e0f;
  --sidebar-hover: rgba(24, 23, 23, .12);
  --section-selected: #7ac29a;
  --section-default: #6c7783;
  --section-hover-text: #1f2933;
  --action-bg: #115e59;
  --action-text: #ffffff;
  --light-pill-bg: rgba(var(--fmd-surface-rgb), .9);
  --series-shop: #F2A900;
  --series-benchmark: #1572A1;
  background: var(--fmd-shell-bg);
  color: var(--fmd-ink);
  min-width: 720px;
}

.app-sidebar {
  background: var(--sidebar-bg);
  bottom: 0;
  color: var(--sidebar-text);
  left: 0;
  overflow-y: auto;
  padding: 28px 10px;
  position: fixed;
  top: 0;
  width: 260px;
  z-index: 20;
}

.app-brand {
  align-items: center;
  color: var(--sidebar-text);
  display: flex;
  font-size: 17px;
  font-weight: 700;
  gap: 10px;
  line-height: 1.1;
  margin: 0 12px 24px;
  text-decoration: none;
}

.app-brand:hover,
.app-brand:focus { color: var(--sidebar-text); text-decoration: none; }

.app-brand-logo {
  background: #e8bd10;
  border-radius: 40px;
  display: block;
  height: 120px;
  max-width: none;
  object-fit: cover;
  width: 120px;
}
.app-brand-mark {
  align-items: center;
  background: var(--sidebar-text);
  border-radius: 8px;
  color: var(--sidebar-bg);
  display: inline-flex;
  font-size: 12px;
  font-weight: 800;
  height: 34px;
  justify-content: center;
  letter-spacing: .04em;
  width: 42px;
}
.app-brand-name { letter-spacing: .06em; max-width: 135px; text-transform: uppercase; }

.app-account {
  border-bottom: 1px solid color-mix(in srgb, var(--sidebar-text) 18%, transparent);
  border-top: 1px solid color-mix(in srgb, var(--sidebar-text) 18%, transparent);
  font-weight: 600;
  margin: 0 12px 18px;
  padding: 0;
  position: relative;
}
.app-account-toggle { align-items: center; color: var(--sidebar-text); display: flex; gap: 10px; padding: 14px 8px; text-decoration: none; width: 100%; }
.app-account-toggle:hover, .app-account-toggle:focus { background: var(--sidebar-hover); color: var(--sidebar-text); text-decoration: none; }
.app-account-avatar { border-radius: 50%; height: 28px; width: 28px; }
.app-account-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.app-account-menu { border: 0; border-radius: 12px; box-shadow: 0 12px 24px rgba(0, 0, 0, .16); left: 8px; margin-top: 2px; min-width: calc(100% - 16px); padding: 6px; }
.app-account-menu > li > a { border-radius: 8px; color: var(--fmd-ink); font-weight: 600; padding: 8px 10px; }
.app-account-menu > li > a:hover, .app-account-menu > li > a:focus { background: rgba(108, 119, 131, .15); color: var(--fmd-ink); }

.app-page-navigation { display: flex; flex-direction: column; gap: 6px; }
/* Phones: the menu folds behind a button; from 761px it is always open. */
.app-menu-toggle { display: none; }
@media (min-width: 761px) { .app-sidebar-menu.collapse:not(.show) { display: block; } }
.app-page-navigation a {
  color: var(--sidebar-text);
  display: block;
  font-size: 15px;
  line-height: 1.35;
  border-radius: 16px;
  margin: 0 2px;
  padding: 13px 14px;
  position: relative;
  text-decoration: none;
  transition: background .18s ease, transform .18s ease;
}
.app-page-navigation a:hover,
.app-page-navigation a:focus { background: var(--sidebar-hover); color: var(--sidebar-text); text-decoration: none; transform: translateX(2px); }
.app-page-navigation a.active { background: rgba(255, 255, 255, .28); color: var(--sidebar-text); font-weight: 800; }
.app-main-panel { margin-left: 260px; min-height: 100vh; }
.app-topbar { color: var(--fmd-ink-soft); }
.app-topbar-account-row {
  align-items: center;
  display: flex;
  font-family: "Segoe UI", sans-serif;
  gap: 10px;
  justify-content: flex-end;
  min-height: 54px;
  padding: 0 34px;
}
.app-topbar-signin,
.app-topbar-signout,
.app-language-toggle,
.app-theme-toggle {
  align-items: center;
  background: rgba(var(--fmd-surface-rgb), .72);
  border: 1px solid rgba(var(--fmd-line-rgb), .16);
  border-radius: 999px;
  color: var(--fmd-ink-soft);
  display: inline-flex;
  font-size: 14px;
  font-weight: 700;
  gap: 8px;
  line-height: 1.2;
  padding: 9px 14px;
  transition: background .18s ease, border-color .18s ease, box-shadow .18s ease, color .18s ease, transform .18s ease;
}
.app-topbar-signin:hover,
.app-topbar-signin:focus {
  background: var(--fmd-surface);
  border-color: rgba(17, 94, 89, .34);
  color: var(--fmd-accent-ink);
  text-decoration: none;
  transform: translateY(-1px);
}
.app-topbar-signout:hover,
.app-topbar-signout:focus {
  background: #fff5f3;
  border-color: rgba(180, 35, 24, .32);
  color: #a32118;
  text-decoration: none;
  transform: translateY(-1px);
}
.app-language-toggle:hover,
.app-language-toggle:focus,
.app-theme-toggle:hover,
.app-theme-toggle:focus {
  background: var(--fmd-surface);
  border-color: rgba(17, 94, 89, .34);
  color: var(--fmd-accent-ink);
  outline: 0;
  transform: translateY(-1px);
}
.app-topbar-signin:focus-visible,
.app-topbar-signout:focus-visible,
.app-language-toggle:focus-visible,
.app-language-option:focus-visible,
.app-theme-toggle:focus-visible,
.app-theme-option:focus-visible { box-shadow: 0 0 0 3px rgba(122, 194, 154, .45); }
.app-language-menu { margin: 0; }
.app-language-toggle .caret { margin: 0 0 0 2px; }
.app-language-options,
.app-theme-options {
  background: rgba(var(--fmd-surface-rgb), .98);
  border: 1px solid rgba(var(--fmd-line-rgb), .10);
  border-radius: 14px;
  box-shadow: 0 14px 30px rgba(35, 43, 52, .14);
  left: auto;
  margin-top: 8px;
  min-width: 172px;
  padding: 6px;
  right: 0;
}
.app-language-option,
.app-theme-option {
  align-items: center;
  background: transparent;
  border: 0;
  border-radius: 9px;
  color: var(--fmd-ink);
  display: flex;
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  justify-content: space-between;
  padding: 9px 10px;
  text-align: left;
  width: 100%;
}
.app-language-option:hover,
.app-language-option:focus,
.app-theme-option:hover,
.app-theme-option:focus { background: rgba(17, 94, 89, .10); color: var(--fmd-accent-ink); outline: 0; }
.app-language-option.is-active,
.app-theme-option.is-active { color: var(--fmd-accent-ink); font-weight: 800; }
/* Theme menu (FE-009): an icon-only toggle; the check marks the current choice. */
.app-theme-toggle { padding-left: 12px; padding-right: 12px; }
.app-theme-option span { align-items: center; display: inline-flex; gap: 8px; }
.app-theme-option .bi-check-lg { visibility: hidden; }
.app-theme-option.is-active .bi-check-lg { visibility: visible; }
.app-content { padding: 36px 24px 48px; }
.app-content-shell { background: var(--fmd-shell-panel); border: 1px solid var(--fmd-shell-panel-line); border-radius: 32px; box-shadow: 0 20px 60px rgba(0, 0, 0, .08); margin: 0 auto; max-width: 1600px; padding: 28px; }

/* Collapsible data sections ---------------------------------------------- */
.app-content-shell .panel.panel-border.panel-default {
  background: rgba(var(--fmd-surface-rgb), .94);
  border: 1px solid rgba(var(--fmd-line-rgb), .06);
  border-radius: 22px;
  box-shadow: 0 8px 24px rgba(35, 43, 52, .05);
  margin-bottom: 18px;
  overflow: hidden;
}
.app-content-shell .panel.panel-border.panel-default > a { color: var(--fmd-ink); display: block; text-decoration: none; }
.app-content-shell .panel.panel-border.panel-default > a > .panel-heading {
  background: rgba(var(--fmd-surface-rgb), .94);
  border: 0;
  border-radius: 22px;
  padding: 18px 22px;
  transition: background .18s ease, color .18s ease;
}
.app-content-shell .panel.panel-border.panel-default > a:hover > .panel-heading,
.app-content-shell .panel.panel-border.panel-default > a:focus > .panel-heading { background: var(--fmd-tint); }
.app-content-shell .panel.panel-border.panel-default > a:focus { outline: 0; }
.app-content-shell .panel.panel-border.panel-default > a:focus-visible > .panel-heading { box-shadow: inset 0 0 0 3px rgba(122, 194, 154, .55); }
.app-content-shell .panel.panel-border.panel-default .panel-title { color: var(--fmd-ink); font-family: "Segoe UI", sans-serif; font-size: 16px; font-weight: 800; line-height: 1.25; }
.app-content-shell .panel.panel-border.panel-default .panel-title > i { color: var(--fmd-accent-ink); transition: transform .18s ease; }
.app-content-shell .panel.panel-border.panel-default .panel-collapse > .panel-body { background: var(--fmd-surface); border-top: 1px solid rgba(var(--fmd-line-rgb), .07); padding: 20px 22px; }

/* Shop list --------------------------------------------------------------- */
.shop-list-content { min-width: 0; overflow-x: auto; }
#shops_list_table { margin-bottom: 0 !important; width: 100% !important; }
#shops_list_table thead th {
  color: var(--fmd-ink);
  font-family: "Segoe UI", sans-serif;
  font-size: 13px;
  font-weight: 800;
  vertical-align: top;
  white-space: normal;
}
#shops_list_table tfoot { display: none; }
.shop-list-column-filter {
  background: rgba(var(--fmd-surface-rgb), .82);
  border: 1px solid rgba(var(--fmd-line-rgb), .18);
  border-radius: 8px;
  color: var(--fmd-ink-soft);
  display: block;
  font: inherit;
  font-size: 13px;
  font-weight: 800;
  height: 36px;
  max-width: 100%;
  padding: 4px 24px 4px 8px;
  width: 100%;
}
/* Keep DataTables' sort arrow next to the filter instead of on a new line. */
#shops_list_table thead th:has(.shop-list-column-filter) { white-space: nowrap; }
#shops_list_table thead th .shop-list-column-filter { display: inline-block; vertical-align: middle; }
.shop-list-column-filter:focus { border-color: var(--fmd-accent-ink); box-shadow: 0 0 0 3px rgba(122, 194, 154, .35); outline: 0; }

.shop-page-controls { border-bottom: 0; padding: 4px 0 24px; }
/* Title, then the years and benchmark (they apply at once), then the export and
   report buttons; everything wraps on smaller screens (shop-controls.js). */
.shop-controls { align-items: center; display: flex; flex-wrap: wrap; gap: 10px 12px; }
.shop-page-title { color: var(--fmd-ink); flex: 1 1 320px; font-family: "Segoe UI", sans-serif; font-size: 32px; font-weight: 800; margin: 0; min-width: 0; overflow-wrap: anywhere; }
.shop-filters, .shop-actions { align-items: center; display: flex; flex-wrap: wrap; gap: 10px; }
.shop-filter-pill {
  align-items: center;
  background: var(--light-pill-bg);
  border: 1px solid rgba(var(--fmd-line-rgb), .2);
  border-radius: 999px;
  color: var(--fmd-ink-strong);
  display: inline-flex;
  flex-wrap: wrap;
  font-family: "Segoe UI", sans-serif;
  font-weight: 400;
  gap: 6px 8px;
  margin: 0;
  min-height: 40px;
  padding: 6px 12px;
}
.shop-filter-pill > label, .shop-filter-pill > span:first-child { font-weight: 800; margin: 0; }
.shop-filter-pill--years { border-radius: 20px; }
.shop-filter-select { background: transparent; border: 0; color: var(--fmd-ink-strong); cursor: pointer; font: inherit; font-weight: 600; max-width: 100%; padding: 0 2px; }
.shop-year-chips { display: inline-flex; flex-wrap: wrap; gap: 6px; }
.shop-year-chip { align-items: center; background: var(--fmd-surface); border: 1px solid rgba(var(--fmd-line-rgb), .18); border-radius: 999px; display: inline-flex; font-size: 13px; font-weight: 700; gap: 2px; line-height: 1; padding: 2px 2px 2px 10px; }
.shop-year-chip-remove { align-items: center; background: transparent; border: 0; border-radius: 50%; color: var(--fmd-ink-muted); display: inline-flex; font-size: 17px; height: 24px; justify-content: center; line-height: 1; padding: 0; width: 24px; }
.shop-year-chip-remove:hover, .shop-year-chip-remove:focus-visible { background: rgba(var(--fmd-line-rgb), .1); color: var(--fmd-ink); }
.shop-year-add { background: transparent; border: 0; color: var(--action-bg); cursor: pointer; font: inherit; font-size: 13px; font-weight: 700; padding: 2px 4px; }
.shop-updating { color: var(--fmd-ink-muted); font-size: 13px; }
.shop-action[aria-busy="true"], .btn[aria-busy="true"] { cursor: progress; opacity: .85; }
/* Spinner of the busy buttons (busy.js), as on the UI modernisation. */
.ui-spinner { animation: ui-spin .8s linear infinite; border: 2px solid currentColor; border-radius: 50%; border-right-color: transparent; display: inline-block; height: 14px; vertical-align: -2px; width: 14px; }
@keyframes ui-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .ui-spinner { animation-duration: 2.4s; } }
.shop-action { background: var(--action-bg); border: 0; border-radius: 999px; color: var(--action-text); padding: 8px 15px; white-space: nowrap; }
.shop-action:hover, .shop-action:focus { background: #0b4743; color: #fff; }

.shop-section-navigation { border-bottom: 1px solid rgba(var(--fmd-line-rgb), .10); margin: 0 0 18px; }
.shop-section-navigation .nav-tabs-wrapper { display: block; margin: 0; width: 100%; }
.shop-section-navigation .nav-tabs { border: 0; display: flex; flex-wrap: nowrap; justify-content: space-between; }
.shop-section-navigation .nav-tabs > li { flex: 1 1 0; float: none; margin: 0; text-align: center; }
.shop-section-navigation .nav-tabs > li > a {
  border: 0;
  border-bottom: 3px solid transparent;
  border-radius: 14px 14px 0 0;
  color: var(--section-default);
  margin: 0;
  padding: 12px 14px 10px;
  white-space: nowrap;
}
.shop-section-navigation .nav-tabs > li > a:hover,
.shop-section-navigation .nav-tabs > li > a:focus {
  background: rgba(108, 119, 131, .18);
  border-bottom-color: transparent;
  color: var(--section-hover-text);
  outline: none;
  box-shadow: none;
}
.shop-section-navigation .nav-tabs > li > a:focus-visible {
  outline: 2px solid var(--section-selected);
  outline-offset: 2px;
}

/* Dashboard summary -------------------------------------------------------- */
.dashboard-executive-summary { background: rgba(var(--fmd-surface-rgb), .94); border: 1px solid rgba(var(--fmd-line-rgb), .06); border-radius: 44px; box-shadow: 0 18px 46px rgba(35, 43, 52, .07); margin: 0 0 28px; padding: 38px 42px 42px; position: relative; text-align: left; }
.dashboard-summary-header { align-items: flex-start; display: flex; justify-content: space-between; margin-bottom: 30px; }
.dashboard-summary-eyebrow { color: var(--section-default); font-size: 13px; font-weight: 800; letter-spacing: .14em; margin: 4px 0 0; text-transform: uppercase; }
.dashboard-summary-header h2 { color: var(--fmd-ink); font-size: 24px; font-weight: 800; margin: 0; }
.dashboard-summary-year { color: var(--fmd-ink); font-size: 34px; font-weight: 800; letter-spacing: -.04em; line-height: 1; padding: 0; }
.dashboard-summary-layout { align-items: stretch; display: grid; gap: 32px; grid-template-columns: minmax(0, 4fr) minmax(300px, 1fr); }
.dashboard-kpi-grid { display: grid; gap: 28px; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.dashboard-kpi-card { background: var(--fmd-surface); border: 1px solid rgba(var(--fmd-line-rgb), .09); border-radius: 22px; box-shadow: 0 2px 8px rgba(35, 43, 52, .02); color: var(--fmd-ink); display: flex; flex-direction: column; font-family: "Segoe UI", sans-serif; min-height: 188px; padding: 28px 30px; }
.dashboard-kpi-label { color: var(--section-default); font-size: 13px; font-weight: 700; hyphens: auto; line-height: 1.35; margin: 0 0 12px; overflow-wrap: anywhere; }
.dashboard-kpi-value { font-size: clamp(20px, 1.65vw, 24px); font-weight: 800; letter-spacing: -.02em; line-height: 1.15; margin: 0 0 10px; max-width: 100%; overflow-wrap: anywhere; }
.dashboard-kpi-benchmark { font-size: 13px; font-weight: 700; }
.dashboard-kpi-card--positive .dashboard-kpi-value { color: var(--fmd-success-ink); }
.dashboard-kpi-card--negative .dashboard-kpi-value { color: var(--fmd-negative-ink); }
.dashboard-summary-context { background: var(--fmd-surface); border: 1px solid rgba(var(--fmd-line-rgb), .09); border-radius: 22px; display: flex; flex-direction: column; gap: 18px; padding: 30px; }
.dashboard-summary-context h3 { color: var(--fmd-ink); font-size: 13px; font-weight: 800; letter-spacing: .08em; margin: 0; text-transform: uppercase; }
.dashboard-summary-context div { border-bottom: 1px solid rgba(var(--fmd-line-rgb), .08); display: flex; flex-direction: column; gap: 3px; padding-bottom: 10px; }
.dashboard-summary-context span { color: var(--section-default); font-size: 12px; font-weight: 700; }
.dashboard-summary-context strong { color: var(--fmd-ink); font-size: 14px; }
.dashboard-summary-context p { color: var(--fmd-ink-soft); font-size: 13px; line-height: 1.45; margin: auto 0 0; }
.dashboard-summary-context .dashboard-attention-item { border: 1px solid rgba(var(--fmd-line-rgb), .08); border-left: 5px solid #b42318; border-radius: 18px; color: var(--fmd-ink); display: block; font-size: 15px; font-weight: 700; line-height: 1.3; padding: 14px 16px; }
.dashboard-summary-context .dashboard-attention-item small { color: var(--fmd-ink-soft); display: block; font-size: 12px; font-weight: 600; margin-top: 5px; }
.dashboard-summary-context .dashboard-attention-item--positive { border-left-color: var(--fmd-success-ink); }
.dashboard-summary-context .dashboard-attention-item--negative { border-left-color: var(--fmd-negative-ink); }
.dashboard-summary-context .dashboard-attention-empty { align-items: center; background: var(--fmd-tint); border: 1px dashed var(--fmd-tint-line); border-radius: 18px; color: var(--fmd-tint-ink); display: flex; flex: 1; font-size: 14px; font-weight: 800; justify-content: center; line-height: 1.4; margin: 0; padding: 18px; text-align: center; }

.dashboard-notes { background: var(--fmd-tint); border: 1px solid var(--fmd-tint-line); border-radius: 18px; color: var(--fmd-ink); display: grid; gap: 28px; grid-template-columns: 220px minmax(0, 1fr); margin: 0 0 40px; min-height: 154px; padding: 28px 36px; text-align: left; }
.dashboard-notes h2 { color: var(--fmd-tint-ink); font-size: 18px; font-weight: 800; margin: 0; }
.dashboard-notes-list { min-width: 0; }
.dashboard-note { align-items: start; display: grid; gap: 16px; grid-template-columns: 150px minmax(0, 1fr); padding: 0 0 16px; }
.dashboard-note + .dashboard-note { border-top: 1px solid var(--fmd-tint-line); padding-top: 16px; }
.dashboard-note:last-child { padding-bottom: 0; }
.dashboard-note-label { color: var(--fmd-note-ink); font-size: 13px; font-weight: 800; }
.dashboard-note time, .dashboard-note-author { color: var(--fmd-note-ink); display: block; font-size: 13px; font-weight: 600; margin-top: 3px; }
.dashboard-note-message { color: var(--fmd-ink); font-size: 16px; line-height: 1.45; }
.dashboard-notes-empty { color: var(--fmd-ink-soft); font-size: 15px; margin: 0; }
.note-dashboard-toggle { margin-top: 14px; }
.note-dashboard-toggle label { color: var(--fmd-ink); font-size: 15px; font-weight: 700; }

/* Dashboard charts: the lead metric gets the full width; the selected
   supporting metrics remain an easy-to-scan two-column grid. */
.dashboard-graphs { display: grid; gap: 28px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.dashboard-graph { background: rgba(var(--fmd-surface-rgb), .94); border: 1px solid rgba(var(--fmd-line-rgb), .06); border-radius: 32px; box-shadow: 0 18px 46px rgba(35, 43, 52, .07); min-width: 0; padding: 30px 34px; text-align: left; }
.dashboard-graph--featured { grid-column: 1 / -1; padding: 36px 42px; }
/* The value pills keep their width and the title wraps between them; on a
   narrow card (small window, browser zoom) the title gets its own row above
   the pills, so a pill never covers it (customer, Tech Backlog card 325). */
.dashboard-graph { container-type: inline-size; }
.dashboard-graph-header { align-items: flex-start; display: grid; gap: 20px; grid-template-columns: auto minmax(0, 1fr) auto; min-height: 48px; }
@media screen {
  @container (max-width: 520px) {
    .dashboard-graph-header { gap: 10px; grid-template-areas: "title title" "shop benchmark"; grid-template-columns: 1fr 1fr; }
    .dashboard-graph-header > div { grid-area: title; }
    .dashboard-graph-shop-value { grid-area: shop; }
    .dashboard-graph-benchmark-value { grid-area: benchmark; }
  }
}
.dashboard-graph-header > div { text-align: center; }
.dashboard-graph-header h2 { color: var(--fmd-ink); font-size: 20px; font-weight: 800; margin: 0; overflow-wrap: break-word; text-align: center; }
.dashboard-graph--featured .dashboard-graph-header h2 { font-size: 25px; }
.dashboard-graph-eyebrow { color: var(--section-default); font-size: 13px; font-weight: 800; letter-spacing: .12em; margin: 0 0 6px; text-align: center; text-transform: uppercase; }
.dashboard-graph-shop-value { font-size: 12.5px; font-weight: 700; justify-self: start; padding: 9px 20px; }
.dashboard-graph-benchmark-value { font-size: 10px; font-weight: 500; justify-self: end; padding: 8px 18px; }
.dashboard-graph .label-info { background-color: var(--series-benchmark); }
.dashboard-graph-chart { height: 270px; margin-top: 20px; position: relative; }
.dashboard-graph--featured .dashboard-graph-chart { height: 400px; }
/* Chart hover pill (fmd-charts.js): the series' colour, as on Chartist. */
.fmd-chart-pill { border-radius: 999px; display: inline-block; font-family: "Segoe UI", sans-serif; font-weight: 700; padding: 6px 13px; }
.dashboard-graph .fmd-chart { --fmd-chart-point: 12; }
.dashboard-graph-legend { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 12px; }
.dashboard-graph--featured .dashboard-graph-legend { margin-top: 6px; }
.dashboard-graph-legend .label { border-radius: 999px; font-size: 10.5px; padding: 8px 18px; }
.shop-section-navigation .nav-tabs > li > a.active,
.shop-section-navigation .nav-tabs > li > a.active:hover,
.shop-section-navigation .nav-tabs > li > a.active:focus {
  background: transparent;
  border: 0;
  border-bottom: 3px solid var(--section-selected);
  color: var(--section-selected);
  font-weight: 700;
}

/* Retail Management Dashboard ------------------------------------------- */
.retail-dashboard-controls { font-family: "Segoe UI", sans-serif; padding: 4px 0 24px; }
.retail-dashboard-controls form { align-items: center; display: grid; gap: 10px; grid-auto-flow: column; grid-template-columns: minmax(250px, 1fr); }
.retail-dashboard-title { color: var(--fmd-ink); font-size: 27px; font-weight: 800; margin: 0; }
.retail-dashboard-year, .retail-dashboard-quarter { align-items: center; background: rgba(var(--fmd-surface-rgb), .9); border: 1px solid rgba(var(--fmd-line-rgb), .2); border-radius: 999px; color: var(--fmd-ink-strong); display: inline-flex; gap: 8px; margin: 0; padding: 7px 12px; white-space: nowrap; }
.retail-dashboard-year strong, .retail-dashboard-quarter strong { font-weight: 800; }
.retail-dashboard-year, .retail-dashboard-quarter { cursor: pointer; position: relative; }
/* The select covers the pill's right part and shows a chevron, so it reads
   and works as a dropdown (owner's remark on test, 2026-10-25). */
.retail-dashboard-year select, .retail-dashboard-quarter select {
  appearance: none;
  background: transparent var(--fmd-select-chevron) right 2px center / 11px no-repeat;
  border: 0;
  color: var(--fmd-ink-strong);
  cursor: pointer;
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  margin: -7px -12px -7px 0;
  outline: 0;
  padding: 7px 30px 7px 4px;
}
.retail-dashboard-year select:focus-visible, .retail-dashboard-quarter select:focus-visible { box-shadow: 0 0 0 3px rgba(122, 194, 154, .45); border-radius: 999px; }
.retail-dashboard-report { background: #115e59; border: 0; border-radius: 999px; color: #fff; font: inherit; font-weight: 400; padding: 9px 18px; }
.retail-dashboard-report[disabled] { cursor: not-allowed; opacity: 1; }
.retail-dashboard-navigation { border-bottom: 1px solid rgba(var(--fmd-line-rgb), .1); display: flex; margin: 0 0 28px; }
.retail-dashboard-navigation a { border-bottom: 3px solid transparent; border-radius: 14px 14px 0 0; color: var(--section-default); flex: 1 1 0; font-size: 15.5px; font-weight: 700; padding: 16px 14px 14px; text-align: center; text-decoration: none; transition: background .18s ease, color .18s ease; }
.retail-dashboard-navigation a:hover, .retail-dashboard-navigation a:focus { background: rgba(108, 119, 131, .18); color: var(--fmd-ink); outline: 0; }
.retail-dashboard-navigation a:focus-visible { outline: 2px solid #7ac29a; outline-offset: 2px; }
.retail-dashboard-navigation a.is-active { border-bottom-color: #7ac29a; color: #7ac29a; font-weight: 700; }

.retail-dashboard-navigation, .retail-executive-summary, .retail-dashboard-graph, .retail-portfolio-overview { font-family: "Segoe UI", sans-serif; }
.retail-executive-summary, .retail-portfolio-overview { background: rgba(var(--fmd-surface-rgb), .94); border: 1px solid rgba(var(--fmd-line-rgb), .06); border-radius: 32px; box-shadow: 0 18px 46px rgba(35, 43, 52, .07); margin: 0 0 28px; padding: 32px 36px; }
.retail-executive-summary-header { align-items: flex-start; display: flex; justify-content: space-between; margin-bottom: 24px; }
.retail-executive-summary-header h2 { color: var(--section-default); font-size: 12.5px; font-weight: 700; letter-spacing: .14em; margin: 0; text-transform: uppercase; }
.retail-executive-summary-header > span { color: var(--fmd-ink); font-size: 21px; font-weight: 800; line-height: 1; }
.retail-executive-summary-content { align-items: stretch; display: grid; gap: 38px; grid-template-columns: minmax(0, 1fr) minmax(250px, .7fr); }
.retail-kpi-stack { align-self: center; display: grid; gap: 4px; }
.retail-kpi-card { background: var(--fmd-surface); border: 1px solid rgba(var(--fmd-line-rgb), .1); border-radius: 22px; display: flex; flex-direction: column; justify-content: center; min-height: 150px; padding: 14px 22px; transition: box-shadow .2s ease, transform .2s ease; }
.retail-kpi-card:hover { box-shadow: 0 10px 30px rgba(0, 0, 0, .08); transform: translateY(-2px); }
.retail-kpi-card h3 { color: var(--fmd-ink); font-size: 15.5px; font-weight: 700; margin: 0 0 10px; }
.retail-kpi-card strong { color: var(--fmd-ink); font-size: 25.5px; font-weight: 800; line-height: 1.05; }
.retail-kpi-card small { color: var(--section-default); font-size: 10px; margin-top: 14px; }
.retail-kpi-card--healthy, .retail-kpi-card--positive { background: rgba(21, 128, 61, .06); border-color: rgba(21, 128, 61, .25); }
.retail-kpi-card--attention { background: rgba(180, 35, 24, .06); border-color: rgba(180, 35, 24, .25); }
.retail-kpi-card--healthy strong, .retail-kpi-card--positive strong { color: var(--fmd-positive-ink); }
.retail-kpi-card--attention strong { color: var(--fmd-negative-ink); }
.retail-store-health { align-items: center; display: flex; flex-direction: column; justify-content: center; }
.retail-donut { align-items: center; aspect-ratio: 1; background: conic-gradient(#15803d 0 var(--healthy-percent), #b42318 var(--healthy-percent) 100%); border-radius: 50%; display: flex; justify-content: center; max-width: 220px; padding: 20px; width: 100%; }
.retail-donut--empty { background: #e2e8f0; }
.retail-donut-centre { align-items: center; background: var(--fmd-surface); border-radius: 50%; display: flex; flex-direction: column; height: 100%; justify-content: center; text-align: center; width: 100%; }
.retail-donut-centre strong { color: var(--fmd-ink); font-size: 30px; font-weight: 900; line-height: 1; }
.retail-donut-centre span { color: var(--fmd-ink-muted); font-size: 13px; margin-top: 5px; }
.retail-store-health-legend { display: grid; gap: 6px; margin-top: 16px; }
.retail-store-health-legend span { font-size: 15.5px; font-weight: 700; }
.retail-store-health-legend span::before { content: "●"; font-size: 1.35em; line-height: 0; margin-right: 8px; vertical-align: -.08em; }
.retail-store-health-healthy { color: var(--fmd-positive-ink); }
.retail-store-health-attention { color: var(--fmd-negative-ink); }
.retail-donut[data-retail-donut] { cursor: default; }
.retail-donut-tooltip { background: #1f2933; border-radius: 7px; color: #fff; font-size: 11.5px; font-weight: 700; opacity: 0; padding: 10px 14px; pointer-events: none; position: fixed; transform: translate(-50%, calc(-100% - 14px)); transition: opacity .12s ease; z-index: 1100; }
.retail-donut-tooltip.is-healthy { background: #15803d; opacity: 1; }
.retail-donut-tooltip.is-attention { background: #b42318; opacity: 1; }
.retail-dashboard-empty { align-items: center; background: var(--fmd-surface-sunken); border: 1px dashed rgba(var(--fmd-line-rgb), .22); border-radius: 18px; color: var(--section-default); display: flex; margin: 0; min-height: 115px; padding: 20px; }

.retail-dashboard-graphs { display: grid; gap: 28px; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 0 0 28px; }
.retail-dashboard-graph { background: rgba(var(--fmd-surface-rgb), .94); border: 1px solid rgba(var(--fmd-line-rgb), .06); border-radius: 32px; box-shadow: 0 18px 46px rgba(35, 43, 52, .07); min-width: 0; padding: 30px 34px; }
.retail-dashboard-graph header { position: relative; text-align: center; }
.retail-dashboard-graph-value { background: #1572A1; border-radius: 999px; color: #fff; font-size: 12px; font-weight: 700; left: 0; line-height: 1; padding: 8px 18px; position: absolute; top: 0; }
.retail-dashboard-graph header p { color: var(--section-default); font-size: 13px; font-weight: 800; letter-spacing: .12em; margin: 0 0 6px; text-transform: uppercase; }
.retail-dashboard-graph h2 { color: var(--fmd-ink); font-size: 16.5px; font-weight: 800; margin: 0; }
.retail-dashboard-graph header .retail-dashboard-graph-subtitle { color: var(--section-default); font-size: 10px; font-weight: 600; letter-spacing: 0; margin: 6px 0 0; text-transform: none; }
.retail-dashboard-graph-chart { height: 360px; margin-top: 20px; }
/* One series in the management dashboard's blue. */
.retail-dashboard-graph-chart { --series-shop: #1572A1; }
.retail-dashboard-graph-chart .fmd-chart-axis { color: #7b8794; }

.retail-portfolio-overview > header { margin-bottom: 24px; text-align: center; }
.retail-portfolio-overview > header p { color: var(--section-default); font-family: "Segoe UI", sans-serif; font-size: 11.5px; font-weight: 800; letter-spacing: .12em; margin: 0 0 9px; text-transform: uppercase; }
.retail-portfolio-overview > header h2 { color: var(--fmd-ink-strong); font-size: 20px; font-weight: 800; margin: 0; }
.retail-portfolio-filters { align-items: end; display: grid; gap: 18px; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0 0 20px; }
.retail-portfolio-filters label { display: grid; gap: 4px; margin: 0; }
.retail-portfolio-filters label > span { color: var(--fmd-ink-strong); font-size: 10.5px; font-weight: 800; }
.retail-portfolio-filters select, .retail-portfolio-filters input { background: var(--fmd-surface); border: 1px solid rgba(var(--fmd-line-rgb), .2); border-radius: 9px; color: var(--fmd-ink); font: inherit; min-height: 38px; padding: 7px 10px; }
.retail-portfolio-filters select:focus, .retail-portfolio-filters input:focus { border-color: var(--fmd-accent-ink); box-shadow: 0 0 0 3px rgba(122, 194, 154, .35); outline: 0; }
.retail-portfolio-table-wrap { overflow-x: auto; }
.retail-portfolio-table { margin: 0; min-width: 700px; width: 100%; }
.retail-portfolio-table th { border-bottom: 1px solid rgba(var(--fmd-line-rgb), .15); color: var(--fmd-ink); font-family: "Segoe UI", sans-serif; font-size: 10px; font-weight: 800; padding: 12px 10px; text-transform: uppercase; white-space: nowrap; }
.retail-portfolio-table th a { color: inherit; text-decoration: none; }
.retail-portfolio-table th a:hover, .retail-portfolio-table th a:focus { color: var(--fmd-accent-ink); }
.retail-portfolio-table th i { font-style: normal; }
.retail-portfolio-table td { border-bottom: 1px solid rgba(var(--fmd-line-rgb), .08); color: var(--fmd-ink); padding: 14px 10px; vertical-align: middle; }
.retail-portfolio-table td a { color: var(--fmd-accent-ink); font-weight: 700; }
.retail-portfolio-delta.is-positive { color: var(--fmd-positive-ink); font-weight: 700; }
.retail-portfolio-delta.is-negative { color: var(--fmd-negative-ink); font-weight: 700; }
.retail-store-status { border-radius: 999px; color: #fff; display: inline-block; font-size: 10px; font-weight: 700; line-height: 1; padding: 11px 24px; }
.retail-store-status--healthy { background: #15803d; }
.retail-store-status--attention { background: #b42318; }
.retail-portfolio-empty { color: var(--section-default) !important; padding: 30px !important; text-align: center; }
.retail-portfolio-footer { align-items: center; display: grid; grid-template-columns: 1fr auto 1fr; margin-top: 22px; }
.retail-portfolio-results { color: var(--section-default); font-size: 8.5px; margin: 0; }
.retail-portfolio-pagination { align-items: center; display: flex; flex-wrap: wrap; gap: 6px; grid-column: 2; justify-content: center; margin: 0; }
.retail-portfolio-pagination a { border-radius: 8px; color: var(--section-default); font-weight: 700; padding: 7px 10px; text-decoration: none; }
.retail-portfolio-pagination a:hover, .retail-portfolio-pagination a:focus, .retail-portfolio-pagination a.is-active { background: rgba(122, 194, 154, .22); color: var(--fmd-accent-ink); }

/* Home --------------------------------------------------------------------- */
.home-introduction { margin: 0; padding: 20px 26px 26px; }
.home-introduction-header { border-bottom: 1px solid rgba(var(--fmd-line-rgb), .08); margin-bottom: 34px; padding-bottom: 28px; }
.home-introduction-header h1 { color: var(--fmd-ink); font-size: 38px; font-weight: 800; letter-spacing: -.035em; line-height: 1.1; margin: 0 0 10px; }
.home-introduction-header p { color: var(--section-default); font-size: 20px; margin: 0; }
.home-introduction-copy { color: var(--fmd-ink); font-size: 19px; line-height: 1.55; max-width: 1180px; }
.home-introduction-copy p { margin: 0 0 18px; }
.home-introduction-copy p:nth-child(2) { color: var(--fmd-ink); font-size: 24px; font-weight: 700; margin-top: 30px; }
.home-introduction-copy p:last-child { color: var(--fmd-ink); font-weight: 700; margin-bottom: 0; }

@media (max-width: 900px) {
  .app-sidebar { width: 210px; }
  .app-main-panel { margin-left: 210px; }
  .app-content { padding: 20px; }
  .app-topbar-account-row, .shop-page-controls { padding-left: 20px; padding-right: 20px; }
}

@media (max-width: 1350px) {
  .shop-page-title { flex-basis: 100%; }
  .dashboard-kpi-grid { gap: 16px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 1150px) { .dashboard-summary-layout { grid-template-columns: 1fr; } }
@media (max-width: 900px) {
  .dashboard-graphs { grid-template-columns: 1fr; }
  .dashboard-graph--featured { grid-column: auto; }
  .retail-dashboard-controls form { display: flex; flex-wrap: wrap; }
  .retail-dashboard-title { grid-column: 1 / -1; }
  .retail-executive-summary-content { grid-template-columns: 1fr; }
  .retail-dashboard-graphs { grid-template-columns: 1fr; }
  .retail-dashboard-graph--featured { grid-column: auto; }
}
@media (max-width: 760px) {
  .app-shell { min-width: 0; }
  .app-sidebar { position: relative; padding: 14px 10px; width: 100%; }
  .app-sidebar .app-brand { margin-bottom: 0; }
  .app-brand-logo { border-radius: 16px; height: 56px; width: 56px; }
  .app-menu-toggle {
    align-items: center; background: rgba(255, 255, 255, .35); border: 1px solid color-mix(in srgb, var(--sidebar-text) 18%, transparent);
    border-radius: 12px; color: var(--sidebar-text); display: inline-flex; font-size: 26px; height: 44px;
    justify-content: center; position: absolute; right: 18px; top: 20px; width: 48px;
  }
  .app-sidebar-menu { padding-top: 14px; }
  .app-main-panel { margin-left: 0; }
  .app-content { padding: 16px; }
  .app-content-shell { border-radius: 22px; padding: 18px; }
  .dashboard-executive-summary { border-radius: 28px; padding: 26px 22px; }
  .dashboard-summary-year { font-size: 28px; }
  /* The year goes under the long eyebrow when both do not fit on one line. */
  .dashboard-summary-header { align-items: baseline; flex-wrap: wrap; gap: 6px 12px; margin-bottom: 20px; }
  .dashboard-summary-eyebrow { font-size: 12px; letter-spacing: .08em; }
  .dashboard-kpi-card { min-height: 0; padding: 20px 22px; }
  .dashboard-notes { grid-template-columns: 1fr; padding: 24px; }
  .dashboard-note { grid-template-columns: 1fr; gap: 4px; }
  .home-introduction { padding: 16px 6px; }
  .home-introduction-header h1 { font-size: 30px; }
  .home-introduction-header p, .home-introduction-copy { font-size: 17px; }
  .shop-page-title { font-size: 26px; }
  .shop-filters, .shop-actions, .shop-filter-pill { width: 100%; }
  .shop-filter-select { flex: 1 1 auto; }
  .shop-year-chip { font-size: 14px; padding-left: 12px; }
  .shop-year-chip-remove { height: 30px; width: 30px; }
  .shop-actions .shop-action { flex: 1 1 0; }
  .shop-section-navigation { overflow-x: auto; }
  .shop-section-navigation .nav-tabs { justify-content: flex-start; min-width: max-content; }
  .shop-section-navigation .nav-tabs > li { flex: 0 0 auto; }
  .dashboard-kpi-grid { grid-template-columns: 1fr; }
  .dashboard-graph, .dashboard-graph--featured { border-radius: 24px; padding: 24px; }
  /* The title above the values: the container query on .dashboard-graph. */
  .dashboard-graph-header h2, .dashboard-graph--featured .dashboard-graph-header h2 { font-size: 19px; }
  .dashboard-graph-chart, .dashboard-graph--featured .dashboard-graph-chart { height: 240px; }
  .retail-executive-summary, .retail-portfolio-overview { border-radius: 24px; padding: 24px 20px; }
  .retail-dashboard-navigation { overflow-x: auto; }
  .retail-dashboard-navigation a { flex: 0 0 50%; }
  .retail-dashboard-graph, .retail-dashboard-graph--featured { border-radius: 24px; padding: 24px; }
  .retail-dashboard-graph-chart, .retail-dashboard-graph--featured .retail-dashboard-graph-chart { height: 240px; }
  .retail-portfolio-filters { grid-template-columns: 1fr; }
  .retail-portfolio-footer { grid-template-columns: 1fr; gap: 12px; text-align: center; }
  .retail-portfolio-pagination { grid-column: auto; }
}


@media (max-width: 760px) {

  /* Quarterly and semi-annual charts: full width, labels that wrap. */
  #quarterly_figures .panel-body, #semester_figures .panel-body { padding: 10px 0; }
  #quarterly_figures .table-responsive, #semester_figures .table-responsive { border: 0; margin: 0; overflow: visible; }
  #quarterly_figures .card, #semester_figures .card { border-radius: 18px; margin-bottom: 16px; }
  #quarterly_figures .card-content, #semester_figures .card-content { padding: 14px 10px; }
  #quarterly_figures .label, #semester_figures .label { display: inline-block; line-height: 1.3; margin: 3px 2px; max-width: 100%; white-space: normal; }
}

/* Export forms ------------------------------------------------------------ */
.export-year-range { display: flex; flex-wrap: wrap; gap: 16px; }
.export-year-range > div { flex: 1 1 0; min-width: 100px; max-width: 140px; }
.export-year-range label { white-space: nowrap; }
.export-year-range input { width: 100%; }
.benchmark-export-groups-label { font-weight: 700; margin-bottom: 8px; }

/* Forms rendered by crispy-forms (Bootstrap 5 pack) under Bootstrap 3 CSS ------ */
/* The pack spaces fields with Bootstrap 5's `mb-3`, which Bootstrap 3 lacks. */
.mb-3 { margin-bottom: 10px; }
.account-page form .btn,
.account-page form button[type="submit"] { margin-top: 5px; }
.account-page form + p { margin-top: 12.5px; }
/* allauth pages without an FMD template (two-factor authentication, MFA-001):
   half width like the account pages, QR code at its natural size. */
.app-content-shell.account-shell > :not(.alert) { max-width: 640px; }
/* The QR code stays dark on white in the dark theme too: phone cameras read
   only dark squares on a light background, with a light margin around. */
.account-qr { background: #fff; border-radius: 4px; box-sizing: content-box; display: block; width: 200px; height: 200px; margin: 0 0 15px; padding: 12px; }

/* Table fonts from the UI modernisation (owner, 2026-10-23): Instrument Sans
   for the text, IBM Plex Mono with tabular figures for the numbers, so the
   digits line up in a column. */
@font-face { font-display: swap; font-family: "Instrument Sans"; font-style: normal; font-weight: 400; src: url("../vendor/fonts/instrument-sans-latin-400-normal.c178fc5e2d41.woff2") format("woff2"); }
@font-face { font-display: swap; font-family: "Instrument Sans"; font-style: normal; font-weight: 600; src: url("../vendor/fonts/instrument-sans-latin-600-normal.36a59be54659.woff2") format("woff2"); }
@font-face { font-display: swap; font-family: "Instrument Sans"; font-style: normal; font-weight: 700; src: url("../vendor/fonts/instrument-sans-latin-700-normal.51ec31ea8d92.woff2") format("woff2"); }
@font-face { font-display: swap; font-family: "IBM Plex Mono"; font-style: normal; font-weight: 400; src: url("../vendor/fonts/ibm-plex-mono-latin-400-normal.79936b18df9f.woff2") format("woff2"); }
@font-face { font-display: swap; font-family: "IBM Plex Mono"; font-style: normal; font-weight: 600; src: url("../vendor/fonts/ibm-plex-mono-latin-600-normal.5a2ce7798732.woff2") format("woff2"); }
.table { font-family: "Instrument Sans", "Segoe UI", system-ui, sans-serif; }
.table > tbody > tr > td.text-end { font-family: "IBM Plex Mono", ui-monospace, Menlo, monospace; font-size: .93em; font-variant-numeric: tabular-nums; }

/* Print layout of the shop dashboard and the management dashboard: the
   screen's grids, tighter (see app.css for the page). */
.print-meta { display: none; }
@media print {
  .shop-page-controls { padding: 0 0 6px; }
  .shop-page-title { font-size: 20px; }
  .print-meta { border-bottom: 1px solid #ddd; color: var(--fmd-ink-soft); display: block !important; font-size: 10px; margin: 2px 0 10px; padding-bottom: 6px; }
  .dashboard-executive-summary, .retail-executive-summary, .retail-portfolio-overview { border: 1px solid #e3e3e3; border-radius: 10px; box-shadow: none; margin: 0 0 8px; padding: 10px 12px; }
  .dashboard-summary-header, .retail-executive-summary-header { margin-bottom: 8px; }
  .dashboard-summary-year { font-size: 18px; }
  .dashboard-summary-layout { gap: 10px; grid-template-columns: minmax(0, 3fr) minmax(0, 1fr); }
  .dashboard-kpi-grid { gap: 8px; grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .dashboard-kpi-card { border-radius: 8px; box-shadow: none; min-height: 0; padding: 8px 10px; }
  .dashboard-kpi-label { font-size: 9px; margin-bottom: 4px; }
  .dashboard-kpi-value { font-size: 15px; margin-bottom: 3px; }
  .dashboard-kpi-benchmark { font-size: 9px; }
  .dashboard-summary-context { border-radius: 8px; gap: 6px; padding: 8px 10px; }
  .dashboard-summary-context .dashboard-attention-item { border-radius: 8px; font-size: 10px; padding: 5px 8px; }
  .dashboard-notes { border-radius: 8px; gap: 10px; grid-template-columns: 120px minmax(0, 1fr); margin: 0 0 8px; min-height: 0; padding: 8px 12px; }
  .dashboard-notes:has(.dashboard-notes-empty) { display: none; }
  .dashboard-notes h2 { font-size: 12px; }
  .dashboard-note-message { font-size: 10px; }
  .dashboard-graphs, .retail-dashboard-graphs { gap: 8px; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 0; }
  .dashboard-graph, .dashboard-graph--featured, .retail-dashboard-graph { border: 1px solid #e3e3e3; border-radius: 10px; box-shadow: none; break-inside: avoid; padding: 8px 10px; }
  .dashboard-graph-header { gap: 6px; min-height: 0; }
  .dashboard-graph-header h2, .dashboard-graph--featured .dashboard-graph-header h2, .retail-dashboard-graph h2 { font-size: 12px; }
  .dashboard-graph-eyebrow { font-size: 8px; margin: 0; }
  .dashboard-graph .label, .dashboard-graph-legend .label { font-size: 8px; padding: 2px 8px; }
  .dashboard-graph-chart, .dashboard-graph--featured .dashboard-graph-chart, .retail-dashboard-graph-chart { margin-top: 4px; }
  .dashboard-graph-legend { margin-top: 2px; }
  .retail-dashboard-controls { padding: 0 0 6px; }
  .retail-dashboard-title { font-size: 20px; }
  .retail-dashboard-navigation { display: none; }
  .retail-executive-summary-content { gap: 10px; grid-template-columns: minmax(0, 1fr) 160px; }
  .retail-kpi-card { min-height: 0; padding: 8px 12px; }
  .retail-kpi-card strong { font-size: 18px; }
  .retail-donut { max-width: 120px; padding: 10px; }
  .retail-portfolio-filters, .retail-portfolio-footer, .dataTables_length, .dataTables_filter, .dataTables_paginate { display: none !important; }
}

/* Section switch (app.js, data-sections): pills instead of stacked
   accordions, one section at a time (owner, 2026-10-25). */
.section-switch { background: rgba(var(--fmd-line-rgb), .06); border-radius: 999px; display: inline-flex; flex-wrap: wrap; gap: 4px; margin: 4px 0 16px; padding: 4px; }
.section-switch-item { background: transparent; border: 0; border-radius: 999px; color: var(--fmd-ink-soft); font-size: 14px; font-weight: 700; padding: 8px 16px; transition: background .15s ease, color .15s ease; }
.section-switch-item:hover { color: var(--fmd-ink); }
.section-switch-item.is-active { background: var(--fmd-surface); box-shadow: 0 1px 4px rgba(35, 43, 52, .14); color: var(--fmd-ink); }
.section-switch-item:focus-visible { outline: 2px solid var(--section-selected); outline-offset: 2px; }
.section-panel > a[data-bs-toggle="collapse"],
.app-content-shell .section-panel.panel.panel-border.panel-default > a[data-bs-toggle="collapse"] { display: none; }
.app-content-shell .section-panel.panel.panel-border.panel-default { margin-top: 0; }
.section-panel .panel-collapse > .panel-body { border-top: 0 !important; }
.section-intro-body h5 { margin: 0 0 12px; }
@media (max-width: 760px) {
  .section-switch { border-radius: 16px; display: flex; flex-wrap: nowrap; overflow-x: auto; width: 100%; }
  .section-switch-item { flex: 0 0 auto; font-size: 13px; padding: 7px 12px; }
}

/* Shop facts (Info tab): Info on the left, the closed cards (contract,
   location, detail) stacked on the right; one column on phones. */
.shop-facts { align-items: start; display: grid; gap: 16px; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-bottom: 20px; }
.shop-facts > #info { grid-row: span 3; }
.shop-facts-card--more { grid-column: 2; }
@media (max-width: 760px) {
  .shop-facts { grid-template-columns: 1fr; }
  .shop-facts > #info { grid-row: auto; }
  .shop-facts-card--more { grid-column: auto; }
}
.shop-facts-card { background: var(--fmd-surface); border: 1px solid rgba(var(--fmd-line-rgb), .08); border-radius: 18px; box-shadow: 0 2px 8px rgba(35, 43, 52, .03); padding: 18px 20px; }
.shop-facts-title { color: var(--section-default); font-size: 12px; font-weight: 800; letter-spacing: .1em; margin: 0 0 12px; text-transform: uppercase; }
.shop-facts-list { display: grid; gap: 8px 16px; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); margin: 0; }
.shop-facts-list dt { color: var(--fmd-ink-muted); font-size: 13px; font-weight: 600; }
.shop-facts-list dd { color: var(--fmd-ink); font-size: 14px; font-weight: 600; margin: 0; overflow-wrap: anywhere; }
.shop-facts-card--more .shop-facts-title { margin: 0; }
.shop-facts-card--more .shop-facts-list { margin-top: 12px; }
.shop-facts-toggle { align-items: center; background: none; border: 0; color: inherit; display: flex; font: inherit; justify-content: space-between; letter-spacing: inherit; padding: 0; text-align: left; text-transform: inherit; width: 100%; }
.shop-facts-toggle .bi { transition: transform .2s; }
.shop-facts-toggle:not(.collapsed) .bi { transform: rotate(180deg); }
@media print {
  .section-switch { display: none !important; }
  .section-panel[hidden] { display: block !important; }
  .section-panel > a[data-bs-toggle="collapse"],
  .app-content-shell .section-panel.panel.panel-border.panel-default > a[data-bs-toggle="collapse"] { display: block !important; }
  .panel-title > i, .panel-heading .bi { display: none !important; }
  .shop-facts { gap: 8px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .shop-facts-toggle .bi { display: none; }
  .shop-facts-card { border-radius: 8px; box-shadow: none; padding: 8px 10px; }
  .shop-facts-list dt, .shop-facts-list dd { font-size: 10px; }
  .dashboard-graph--featured { grid-column: 1 / -1; }
}

/* Page header (components/page_header.html, FE-007). */
.page-header-title--compact { margin-top: 10px; }