/* These styles are generated from project.scss. */

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

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

.reference-group {
  color: var(--series-benchmark);
}

.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: 1.05rem; 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(255, 255, 255, .9);
  --series-shop: #F2A900;
  --series-benchmark: #1572A1;
  background:
    radial-gradient(circle at top left, rgba(217, 119, 6, .10), transparent 30%),
    radial-gradient(circle at right 20%, rgba(15, 118, 110, .14), transparent 28%),
    linear-gradient(180deg, #f8f5ef, #efe9de);
  color: #1f2933;
  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 rgba(14, 14, 15, .18);
  border-top: 1px solid rgba(14, 14, 15, .18);
  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: #1f2933; 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: #1f2933; }

.app-page-navigation { display: flex; flex-direction: column; gap: 6px; }
.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: #0e0e0f; font-weight: 800; }
.app-main-panel { margin-left: 260px; min-height: 100vh; }
.app-topbar { color: #43515e; }
.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 {
  align-items: center;
  background: rgba(255, 255, 255, .72);
  border: 1px solid rgba(31, 41, 51, .16);
  border-radius: 999px;
  color: #43515e;
  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: #fff;
  border-color: rgba(17, 94, 89, .34);
  color: #115e59;
  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 {
  background: #fff;
  border-color: rgba(17, 94, 89, .34);
  color: #115e59;
  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 { 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 {
  background: rgba(255, 255, 255, .98);
  border: 1px solid rgba(31, 41, 51, .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 {
  align-items: center;
  background: transparent;
  border: 0;
  border-radius: 9px;
  color: #1f2933;
  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 { background: rgba(17, 94, 89, .10); color: #115e59; outline: 0; }
.app-language-option.is-active { color: #115e59; font-weight: 800; }
.app-content { padding: 36px 24px 48px; }
.app-content-shell { background: rgba(255, 252, 247, .62); border: 1px solid rgba(255, 255, 255, .65); 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(255, 255, 255, .94);
  border: 1px solid rgba(31, 41, 51, .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: #1f2933; display: block; text-decoration: none; }
.app-content-shell .panel.panel-border.panel-default > a > .panel-heading {
  background: rgba(255, 255, 255, .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: #edf8f7; }
.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: #1f2933; 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: #115e59; transition: transform .18s ease; }
.app-content-shell .panel.panel-border.panel-default .panel-collapse > .panel-body { background: #fff; border-top: 1px solid rgba(31, 41, 51, .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: #1f2933;
  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(255, 255, 255, .82);
  border: 1px solid rgba(31, 41, 51, .18);
  border-radius: 8px;
  color: #43515e;
  display: block;
  font: inherit;
  font-size: 13px;
  font-weight: 800;
  height: 36px;
  max-width: 100%;
  padding: 4px 24px 4px 8px;
  width: 100%;
}
.shop-list-column-filter:focus { border-color: #115e59; box-shadow: 0 0 0 3px rgba(122, 194, 154, .35); outline: 0; }

.shop-page-controls { border-bottom: 0; padding: 4px 0 24px; }
.shop-page-controls form { align-items: center; display: grid; gap: 10px; grid-template-columns: minmax(320px, 1fr) repeat(5, max-content); }
.shop-page-title { color: #1f2933; font-family: "Segoe UI", sans-serif; font-size: 32px; font-weight: 800; margin: 0; min-width: 0; overflow-wrap: anywhere; }
.shop-filter-pill {
  align-items: center;
  background: var(--light-pill-bg);
  border: 1px solid rgba(31, 41, 51, .2);
  border-radius: 999px;
  color: #000;
  display: inline-flex;
  font-family: "Segoe UI", sans-serif;
  font-weight: 400;
  gap: 8px;
  padding: 7px 12px;
}
.shop-filter-pill label { align-items: center; display: inline-flex; font-weight: 800; height: 24px; line-height: 24px; margin: 0; }
.shop-filter-pill .bootstrap-select { align-items: center; display: inline-flex !important; height: 24px; margin-bottom: 0 !important; min-width: 100px; }
.shop-filter-pill .bootstrap-select > .dropdown-toggle {
  align-items: center;
  display: flex !important;
  height: 24px;
  line-height: 24px;
  position: relative;
  width: 100%;
}
.shop-filter-pill .bootstrap-select > .dropdown-toggle .filter-option {
  flex: 1 1 auto;
  float: none !important;
  line-height: 24px;
  padding: 0 !important;
  position: static !important;
  width: auto !important;
}
.shop-filter-pill .bootstrap-select > .dropdown-toggle .bs-caret { align-items: center; display: flex; height: 24px; margin-left: 8px; }
.shop-filter-pill .bootstrap-select > .dropdown-toggle .caret { margin: 0 !important; position: static !important; }
.shop-filter-pill .btn { background: transparent; border: 0; color: #000; font-family: inherit; font-weight: 400; padding: 0; }
.shop-filter-pill, .shop-action { white-space: nowrap; }
.shop-action { background: var(--action-bg); border: 0; border-radius: 999px; color: var(--action-text); padding: 8px 15px; }
.shop-action:hover, .shop-action:focus { background: #0b4743; color: #fff; }

.shop-section-navigation { border-bottom: 1px solid rgba(31, 41, 51, .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(255, 255, 255, .94); border: 1px solid rgba(31, 41, 51, .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: #1f2933; font-size: 24px; font-weight: 800; margin: 0; }
.dashboard-summary-year { color: #1f2933; 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: #fff; border: 1px solid rgba(31, 41, 51, .09); border-radius: 22px; box-shadow: 0 2px 8px rgba(35, 43, 52, .02); color: #1f2933; 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: #39834b; }
.dashboard-kpi-card--negative .dashboard-kpi-value { color: #b42318; }
.dashboard-summary-context { background: #fff; border: 1px solid rgba(31, 41, 51, .09); border-radius: 22px; display: flex; flex-direction: column; gap: 18px; padding: 30px; }
.dashboard-summary-context h3 { color: #1f2933; font-size: 13px; font-weight: 800; letter-spacing: .08em; margin: 0; text-transform: uppercase; }
.dashboard-summary-context div { border-bottom: 1px solid rgba(31, 41, 51, .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: #1f2933; font-size: 14px; }
.dashboard-summary-context p { color: #43515e; font-size: 13px; line-height: 1.45; margin: auto 0 0; }
.dashboard-summary-context .dashboard-attention-item { border: 1px solid rgba(31, 41, 51, .08); border-left: 5px solid #b42318; border-radius: 18px; color: #1f2933; display: block; font-size: 15px; font-weight: 700; line-height: 1.3; padding: 14px 16px; }
.dashboard-summary-context .dashboard-attention-item small { color: #43515e; display: block; font-size: 12px; font-weight: 600; margin-top: 5px; }
.dashboard-summary-context .dashboard-attention-item--positive { border-left-color: #39834b; }
.dashboard-summary-context .dashboard-attention-item--negative { border-left-color: #b42318; }
.dashboard-summary-context .dashboard-attention-empty { align-items: center; background: #edf8f7; border: 1px dashed #9bcfca; border-radius: 18px; color: #3d827d; 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: #edf8f7; border: 1px solid #c8e4e1; border-radius: 18px; color: #27323c; 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: #3d827d; 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 #c8e4e1; padding-top: 16px; }
.dashboard-note:last-child { padding-bottom: 0; }
.dashboard-note-label { color: #00689B; font-size: 13px; font-weight: 800; }
.dashboard-note time, .dashboard-note-author { color: #00689B; display: block; font-size: 13px; font-weight: 600; margin-top: 3px; }
.dashboard-note-message { color: #334155; font-size: 16px; line-height: 1.45; }
.dashboard-notes-empty { color: #43515e; font-size: 15px; margin: 0; }
.note-dashboard-toggle { margin-top: 14px; }
.note-dashboard-toggle label { color: #1f2933; 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(255, 255, 255, .94); border: 1px solid rgba(31, 41, 51, .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; }
.dashboard-graph-header { align-items: flex-start; display: grid; gap: 20px; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); min-height: 48px; }
.dashboard-graph-header > div { text-align: center; }
.dashboard-graph-header h2 { color: #1f2933; font-size: 20px; font-weight: 800; margin: 0; 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: 1.25rem; font-weight: 700; justify-self: start; padding: 9px 20px; }
.dashboard-graph-benchmark-value { font-size: 1rem; 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-chart > svg { height: 100% !important; overflow: visible; width: 100%; }
.dashboard-graph--featured .dashboard-graph-chart { height: 400px; }
.dashboard-graph .ct-series-b .ct-line,
.dashboard-graph .ct-series-b .ct-point { stroke: var(--series-benchmark); }
.dashboard-graph .ct-point { cursor: pointer; stroke-width: 12px; }
.dashboard-graph .chartist-tooltip,
[id^="chartSemester"] .chartist-tooltip,
[id^="chartQuarterly"] .chartist-tooltip { background: var(--series-shop); z-index: 10; }
.dashboard-graph .chartist-tooltip:before,
[id^="chartSemester"] .chartist-tooltip:before,
[id^="chartQuarterly"] .chartist-tooltip:before { border-top-color: var(--series-shop); }
.dashboard-graph .chartist-tooltip.dashboard-chartist-tooltip--benchmark,
[id^="chartSemester"] .chartist-tooltip.dashboard-chartist-tooltip--benchmark,
[id^="chartQuarterly"] .chartist-tooltip.dashboard-chartist-tooltip--benchmark { background: var(--series-benchmark); color: #fff; }
.dashboard-graph .chartist-tooltip.dashboard-chartist-tooltip--benchmark:before,
[id^="chartSemester"] .chartist-tooltip.dashboard-chartist-tooltip--benchmark:before,
[id^="chartQuarterly"] .chartist-tooltip.dashboard-chartist-tooltip--benchmark:before { border-top-color: var(--series-benchmark); }
.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: 1.05rem; padding: 8px 18px; }
.shop-section-navigation .nav-tabs > li.active > a,
.shop-section-navigation .nav-tabs > li.active > a:hover,
.shop-section-navigation .nav-tabs > li.active > a: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-template-columns: minmax(250px, 1fr) max-content max-content max-content; }
.retail-dashboard-title { color: #1f2933; font-size: 2.7rem; font-weight: 800; margin: 0; }
.retail-dashboard-year, .retail-dashboard-quarter { align-items: center; background: rgba(255, 255, 255, .9); border: 1px solid rgba(31, 41, 51, .2); border-radius: 999px; color: #000; 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 select, .retail-dashboard-quarter select { appearance: none; background: transparent; border: 0; color: #000; cursor: pointer; font: inherit; font-size: 14px; font-weight: 400; outline: 0; padding: 0 20px 0 0; }
.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(31, 41, 51, .1); display: flex; margin: 0 0 28px; }
.retail-dashboard-navigation a { border-bottom: 3px solid transparent; border-radius: 14px 14px 0 0; color: #6c7783; flex: 1 1 0; font-size: 1.55rem; 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: #1f2933; 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(255, 255, 255, .94); border: 1px solid rgba(31, 41, 51, .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: #6c7783; font-size: 1.25rem; font-weight: 700; letter-spacing: .14em; margin: 0; text-transform: uppercase; }
.retail-executive-summary-header > span { color: #1f2933; font-size: 2.1rem; 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: #fff; border: 1px solid rgba(31, 41, 51, .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: #1f2933; font-size: 1.55rem; font-weight: 700; margin: 0 0 10px; }
.retail-kpi-card strong { color: #1f2933; font-size: 2.55rem; font-weight: 800; line-height: 1.05; }
.retail-kpi-card small { color: #6c7783; font-size: 1rem; 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: #15803d; }
.retail-kpi-card--attention strong { color: #b42318; }
.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: #fff; border-radius: 50%; display: flex; flex-direction: column; height: 100%; justify-content: center; text-align: center; width: 100%; }
.retail-donut-centre strong { color: #0f172a; font-size: 3rem; font-weight: 900; line-height: 1; }
.retail-donut-centre span { color: #64748b; font-size: 1.3rem; margin-top: 5px; }
.retail-store-health-legend { display: grid; gap: 6px; margin-top: 16px; }
.retail-store-health-legend span { font-size: 1.55rem; 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: #15803d; }
.retail-store-health-attention { color: #b42318; }
.retail-donut[data-retail-donut] { cursor: default; }
.retail-donut-tooltip { background: #1f2933; border-radius: 7px; color: #fff; font-size: 1.15rem; 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: #f8fafc; border: 1px dashed rgba(31, 41, 51, .22); border-radius: 18px; color: #6c7783; 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(255, 255, 255, .94); border: 1px solid rgba(31, 41, 51, .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: 1.2rem; font-weight: 700; left: 0; line-height: 1; padding: 8px 18px; position: absolute; top: 0; }
.retail-dashboard-graph header p { color: #6c7783; font-size: 13px; font-weight: 800; letter-spacing: .12em; margin: 0 0 6px; text-transform: uppercase; }
.retail-dashboard-graph h2 { color: #1f2933; font-size: 1.65rem; font-weight: 800; margin: 0; }
.retail-dashboard-graph header .retail-dashboard-graph-subtitle { color: #6c7783; font-size: 1rem; font-weight: 600; letter-spacing: 0; margin: 6px 0 0; text-transform: none; }
.retail-dashboard-graph-chart { height: 360px; margin-top: 20px; }
.retail-dashboard-graph-chart svg { overflow: visible; }
.retail-dashboard-graph .ct-series-a .ct-line { stroke: #1572A1; stroke-linecap: round; stroke-width: 4px; }
.retail-dashboard-graph .ct-series-a .ct-point { cursor: pointer; stroke: #1572A1; stroke-linecap: round; stroke-width: 10px; }
.retail-dashboard-graph .ct-label { color: #7b8794; fill: #7b8794; font-size: 1rem; font-weight: 700; }
.chartist-tooltip.retail-chartist-tooltip { background: #1572A1; color: #fff; }
.chartist-tooltip.retail-chartist-tooltip::before { border-top-color: #1572A1; }

.retail-portfolio-overview > header { margin-bottom: 24px; text-align: center; }
.retail-portfolio-overview > header p { color: #6c7783; font-family: "Segoe UI", sans-serif; font-size: 1.15rem; font-weight: 800; letter-spacing: .12em; margin: 0 0 9px; text-transform: uppercase; }
.retail-portfolio-overview > header h2 { color: #000; font-size: 2rem; 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: #000; font-size: 1.05rem; font-weight: 800; }
.retail-portfolio-filters select, .retail-portfolio-filters input { background: #fff; border: 1px solid rgba(31, 41, 51, .2); border-radius: 9px; color: #1f2933; font: inherit; min-height: 38px; padding: 7px 10px; }
.retail-portfolio-filters select:focus, .retail-portfolio-filters input:focus { border-color: #115e59; 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(31, 41, 51, .15); color: #1f2933; font-family: "Segoe UI", sans-serif; font-size: 1rem; 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: #115e59; }
.retail-portfolio-table th i { font-style: normal; }
.retail-portfolio-table td { border-bottom: 1px solid rgba(31, 41, 51, .08); color: #1f2933; padding: 14px 10px; vertical-align: middle; }
.retail-portfolio-table td a { color: #115e59; font-weight: 700; }
.retail-portfolio-delta.is-positive { color: #15803d; font-weight: 700; }
.retail-portfolio-delta.is-negative { color: #b42318; font-weight: 700; }
.retail-store-status { border-radius: 999px; color: #fff; display: inline-block; font-size: 1rem; 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: #6c7783 !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: #6c7783; font-size: .85rem; 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: #6c7783; 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: #115e59; }

/* Home --------------------------------------------------------------------- */
.home-introduction { margin: 0; padding: 20px 26px 26px; }
.home-introduction-header { border-bottom: 1px solid rgba(31, 41, 51, .08); margin-bottom: 34px; padding-bottom: 28px; }
.home-introduction-header h1 { color: #1f2933; 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: #27323c; 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: #1f2933; font-size: 24px; font-weight: 700; margin-top: 30px; }
.home-introduction-copy p:last-child { color: #1f2933; 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-controls form { grid-template-columns: repeat(5, max-content); }
  .shop-page-title { grid-column: 1 / -1; }
  .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 { grid-template-columns: 1fr max-content; }
  .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: static; width: 100%; }
  .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; }
  .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-controls form { grid-template-columns: repeat(2, max-content); }
  .shop-page-title { grid-column: 1 / -1; font-size: 26px; }
  .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; }
  .dashboard-graph-header { flex-direction: column; }
  .dashboard-graph-values { width: 100%; }
  .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; }
}