/**
 * TPP theme layer — look-and-feel options over Vuexy (preview).
 *
 * Inert unless <html data-tpp-theme="…"> is set (see the preview script in
 * templates/layout/master.html: ?tpp-theme=shopfront|backroom|studio, ?tpp-theme=off).
 * Each option only sets tokens; the shared rules below consume them, so the three
 * options differ in colour, type and chrome — never in layout.
 */

@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap");

@font-face {
  font-family: "Montserrat";
  src: url("../fonts/quote-review/montserrat-latin-variable.woff2") format("woff2");
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
}

/* ---------------------------------------------------------------- tokens */

/* A — Shopfront: the storefront's cream, ink and aqua; orange primary actions. */
html[data-tpp-theme="shopfront"] {
  --tpp-font: "Montserrat", "Helvetica Neue", Arial, sans-serif;
  --tpp-font-head: "Montserrat", "Helvetica Neue", Arial, sans-serif;
  --tpp-body-weight: 400;
  --tpp-canvas: #faf8f3;
  --tpp-surface: #ffffff;
  --tpp-surface-2: #fdfcf9;
  --tpp-ink: #2b2b2b;
  --tpp-text: #3d3d3d;
  --tpp-muted: #6b6b6b;
  --tpp-line: rgba(43, 43, 43, 0.10);
  --tpp-line-strong: rgba(43, 43, 43, 0.18);
  --tpp-accent: #c93c15;           /* storefront #f04f23 deepened to pass AA with white text */
  --tpp-accent-hover: #a9310f;
  --tpp-accent-rgb: 201, 60, 21;
  --tpp-accent-ink: #ffffff;
  --tpp-accent-soft: rgba(240, 79, 35, 0.10);
  --tpp-accent-text: #b4361a;
  --tpp-link: #286c69;
  --tpp-focus: rgba(40, 108, 105, 0.25);
  --tpp-menu-bg: #2b2b2b;
  --tpp-menu-text: rgba(250, 248, 243, 0.72);
  --tpp-menu-strong: #faf8f3;
  --tpp-menu-muted: rgba(250, 248, 243, 0.42);
  --tpp-menu-hover: rgba(250, 248, 243, 0.07);
  --tpp-menu-active-bg: #a3dad7;
  --tpp-menu-active-text: #2b2b2b;
  --tpp-menu-indicator: #a3dad7;
  --tpp-logo-filter: none;
  --tpp-navbar-bg: rgba(255, 255, 255, 0.96);
  --tpp-radius: 10px;
  --tpp-radius-sm: 8px;
  --tpp-card-shadow: 0 1px 2px rgba(43, 43, 43, 0.04);
  --tpp-thead-bg: #f4f1ea;
  --tpp-thead-text: #4a4a4a;
  --tpp-row-hover: rgba(163, 218, 215, 0.14);
  --tpp-hero-bg: linear-gradient(120deg, #e8f6f5 0%, #faf8f3 70%);
  --tpp-hero-border: rgba(40, 108, 105, 0.16);
  --tpp-chip-bg: #e8f6f5;
  --tpp-chip-text: #1d5552;
  --tpp-success-bg: rgba(40, 108, 105, 0.12);  --tpp-success: #1f5f5b;
  --tpp-warning-bg: rgba(230, 160, 20, 0.16);  --tpp-warning: #8a5a00;
  --tpp-danger-bg: rgba(201, 60, 21, 0.11);    --tpp-danger: #a9310f;
  --tpp-info-bg: rgba(163, 218, 215, 0.35);    --tpp-info: #1d5552;
  --tpp-secondary-bg: rgba(43, 43, 43, 0.07);  --tpp-secondary: #4a4a4a;
}

/* B — Back Room: deep teal chrome, cool working surfaces, Inter for dense data.
   Same family as the store, clearly the warehouse side of the counter. */
html[data-tpp-theme="backroom"] {
  --tpp-font: "Inter", -apple-system, "Segoe UI", Arial, sans-serif;
  --tpp-font-head: "Montserrat", "Helvetica Neue", Arial, sans-serif;
  --tpp-body-weight: 400;
  --tpp-canvas: #f2f5f4;
  --tpp-surface: #ffffff;
  --tpp-surface-2: #f8faf9;
  --tpp-ink: #12302e;
  --tpp-text: #34413f;
  --tpp-muted: #66736f;
  --tpp-line: rgba(18, 59, 56, 0.09);
  --tpp-line-strong: rgba(18, 59, 56, 0.18);
  --tpp-accent: #1f5f5b;
  --tpp-accent-hover: #164a47;
  --tpp-accent-rgb: 31, 95, 91;
  --tpp-accent-ink: #ffffff;
  --tpp-accent-soft: rgba(31, 95, 91, 0.09);
  --tpp-accent-text: #1f5f5b;
  --tpp-link: #1f5f5b;
  --tpp-focus: rgba(31, 95, 91, 0.22);
  --tpp-menu-bg: #123b38;
  --tpp-menu-text: rgba(225, 240, 238, 0.74);
  --tpp-menu-strong: #ffffff;
  --tpp-menu-muted: rgba(163, 218, 215, 0.55);
  --tpp-menu-hover: rgba(163, 218, 215, 0.08);
  --tpp-menu-active-bg: rgba(163, 218, 215, 0.16);
  --tpp-menu-active-text: #a3dad7;
  --tpp-menu-indicator: #f04f23;
  --tpp-logo-filter: none;
  --tpp-navbar-bg: rgba(255, 255, 255, 0.97);
  --tpp-radius: 8px;
  --tpp-radius-sm: 6px;
  --tpp-card-shadow: 0 1px 2px rgba(18, 59, 56, 0.05);
  --tpp-thead-bg: #eef3f2;
  --tpp-thead-text: #3e5451;
  --tpp-row-hover: rgba(163, 218, 215, 0.16);
  --tpp-hero-bg: linear-gradient(120deg, rgba(163, 218, 215, 0.28) 0%, rgba(255, 255, 255, 0.9) 65%);
  --tpp-hero-border: rgba(18, 59, 56, 0.12);
  --tpp-chip-bg: #e3f2f1;
  --tpp-chip-text: #1f5f5b;
  --tpp-success-bg: rgba(31, 135, 100, 0.12);  --tpp-success: #19704f;
  --tpp-warning-bg: rgba(230, 160, 20, 0.16);  --tpp-warning: #85570a;
  --tpp-danger-bg: rgba(240, 79, 35, 0.12);    --tpp-danger: #b4361a;
  --tpp-info-bg: rgba(163, 218, 215, 0.35);    --tpp-info: #1f5f5b;
  --tpp-secondary-bg: rgba(18, 59, 56, 0.07);  --tpp-secondary: #4b5a57;
}

/* C — Studio: light paper sidebar, ink buttons, orange as a spot colour only. */
html[data-tpp-theme="studio"] {
  --tpp-font: "Montserrat", "Helvetica Neue", Arial, sans-serif;
  --tpp-font-head: "Montserrat", "Helvetica Neue", Arial, sans-serif;
  --tpp-body-weight: 400;
  --tpp-canvas: #f7f5f1;
  --tpp-surface: #ffffff;
  --tpp-surface-2: #fbfaf7;
  --tpp-ink: #1f1f1f;
  --tpp-text: #3a3a3a;
  --tpp-muted: #6e6a63;
  --tpp-line: rgba(31, 31, 31, 0.09);
  --tpp-line-strong: rgba(31, 31, 31, 0.2);
  --tpp-accent: #2b2b2b;
  --tpp-accent-hover: #000000;
  --tpp-accent-rgb: 43, 43, 43;
  --tpp-accent-ink: #faf8f3;
  --tpp-accent-soft: rgba(43, 43, 43, 0.06);
  --tpp-accent-text: #2b2b2b;
  --tpp-link: #286c69;
  --tpp-focus: rgba(240, 79, 35, 0.25);
  --tpp-menu-bg: #fbfaf7;
  --tpp-menu-text: #55524c;
  --tpp-menu-strong: #1f1f1f;
  --tpp-menu-muted: #9a958c;
  --tpp-menu-hover: rgba(43, 43, 43, 0.05);
  --tpp-menu-active-bg: #2b2b2b;
  --tpp-menu-active-text: #faf8f3;
  --tpp-menu-indicator: #f04f23;
  --tpp-logo-filter: brightness(0);
  --tpp-navbar-bg: rgba(255, 255, 255, 0.97);
  --tpp-radius: 12px;
  --tpp-radius-sm: 999px;
  --tpp-card-shadow: none;
  --tpp-thead-bg: transparent;
  --tpp-thead-text: #6e6a63;
  --tpp-row-hover: rgba(240, 79, 35, 0.04);
  --tpp-hero-bg: #ffffff;
  --tpp-hero-border: rgba(31, 31, 31, 0.09);
  --tpp-chip-bg: #f3efe7;
  --tpp-chip-text: #3a3a3a;
  --tpp-success-bg: rgba(40, 108, 105, 0.11);  --tpp-success: #1f5f5b;
  --tpp-warning-bg: rgba(230, 160, 20, 0.16);  --tpp-warning: #85570a;
  --tpp-danger-bg: rgba(240, 79, 35, 0.12);    --tpp-danger: #b4361a;
  --tpp-info-bg: rgba(163, 218, 215, 0.4);     --tpp-info: #1d5552;
  --tpp-secondary-bg: rgba(31, 31, 31, 0.06);  --tpp-secondary: #4a4a4a;
}

/* ---------------------------------------------------------- foundations */

html[data-tpp-theme] {
  --bs-primary: var(--tpp-accent);
  --bs-primary-rgb: var(--tpp-accent-rgb);
  --bs-link-color: var(--tpp-link);
  --bs-body-font-family: var(--tpp-font);
  --bs-body-bg: var(--tpp-canvas);
  --bs-body-color: var(--tpp-text);
  --bs-heading-color: var(--tpp-ink);
  --bs-border-color: var(--tpp-line);
  --bs-card-bg: var(--tpp-surface);
  --bs-text-muted: var(--tpp-muted);
}
html[data-tpp-theme] body {
  font-family: var(--tpp-font);
  font-weight: var(--tpp-body-weight);
  color: var(--tpp-text);
  background-color: var(--tpp-canvas);
  -webkit-font-smoothing: antialiased;
}
html[data-tpp-theme] :is(h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6) {
  font-family: var(--tpp-font-head);
  color: var(--tpp-ink);
  font-weight: 600;
  letter-spacing: -0.01em;
}
html[data-tpp-theme] :is(.text-muted, .text-body-secondary) { color: var(--tpp-muted) !important; }
:where(html[data-tpp-theme]) a { color: var(--tpp-link); }
:where(html[data-tpp-theme]) a:hover { color: var(--tpp-ink); }
html[data-tpp-theme] .text-heading { color: var(--tpp-ink) !important; }

/* ---------------------------------------------------------------- menu */

html[data-tpp-theme] .bg-menu-theme { background-color: var(--tpp-menu-bg) !important; color: var(--tpp-menu-text); }
html[data-tpp-theme="studio"] .bg-menu-theme { box-shadow: inset -1px 0 0 var(--tpp-line); }
html[data-tpp-theme] .bg-menu-theme .menu-link { color: var(--tpp-menu-text); }
html[data-tpp-theme] .bg-menu-theme .menu-link:hover,
html[data-tpp-theme] .bg-menu-theme .menu-item.open:not(.menu-item-closing) > .menu-toggle,
html[data-tpp-theme] .bg-menu-theme .menu-item.active > .menu-link { color: var(--tpp-menu-strong); }
html[data-tpp-theme] .bg-menu-theme.menu-vertical .menu-item.active > .menu-link:not(.menu-toggle) {
  background: var(--tpp-menu-active-bg);
  box-shadow: none;
  color: var(--tpp-menu-active-text) !important;
  font-weight: 600;
}
html[data-tpp-theme] .bg-menu-theme .menu-inner .menu-item.open > .menu-link.menu-toggle,
html[data-tpp-theme] .bg-menu-theme .menu-inner .menu-item.active > .menu-link.menu-toggle,
html[data-tpp-theme]:not(.layout-menu-collapsed) .bg-menu-theme .menu-inner .menu-item:not(.active) > .menu-link:hover {
  background: var(--tpp-menu-hover);
}
html[data-tpp-theme] .layout-wrapper:not(.layout-horizontal) .bg-menu-theme .menu-inner > .menu-item.active:before {
  background: var(--tpp-menu-indicator);
}
html[data-tpp-theme] .bg-menu-theme .menu-inner-shadow {
  background: linear-gradient(var(--tpp-menu-bg) 41%, transparent 95%);
}
html[data-tpp-theme] .bg-menu-theme .menu-header,
html[data-tpp-theme] .bg-menu-theme .menu-header-text {
  color: var(--tpp-menu-muted);
  letter-spacing: 0.08em;
  font-size: 0.7rem;
  font-weight: 600;
}
html[data-tpp-theme] .bg-menu-theme .menu-inner .menu-sub .menu-item:not(.active) > .menu-link::before { color: var(--tpp-menu-muted) !important; }
html[data-tpp-theme] .bg-menu-theme .menu-icon { opacity: 0.9; }
html[data-tpp-theme] .bg-menu-theme .app-brand-link img + img { filter: var(--tpp-logo-filter); }
html[data-tpp-theme] .bg-menu-theme .layout-menu-toggle { color: var(--tpp-menu-text) !important; }
html[data-tpp-theme] .bg-menu-theme .ps__thumb-y { background: var(--tpp-menu-muted) !important; }

/* -------------------------------------------------------------- navbar */

html[data-tpp-theme] .layout-navbar.bg-navbar-theme,
html[data-tpp-theme] .bg-navbar-theme {
  background-color: var(--tpp-navbar-bg) !important;
  border: 1px solid var(--tpp-line);
  box-shadow: none !important;
  border-radius: var(--tpp-radius);
}
html[data-tpp-theme="shopfront"] .layout-navbar.bg-navbar-theme { box-shadow: inset 0 3px 0 #a3dad7 !important; }
html[data-tpp-theme] .template-customizer-open-btn { background: var(--tpp-accent) !important; }

/* --------------------------------------------------------------- cards */

html[data-tpp-theme] .card {
  background-color: var(--tpp-surface);
  border: 1px solid var(--tpp-line);
  border-radius: var(--tpp-radius);
  box-shadow: var(--tpp-card-shadow);
}
html[data-tpp-theme] .card-header { background: transparent; }
html[data-tpp-theme] .section-card { border-color: var(--tpp-line); }
html[data-tpp-theme] .section-card .card-header { border-bottom-color: var(--tpp-line); }
html[data-tpp-theme] .quote-hero {
  background: var(--tpp-hero-bg);
  border: 1px solid var(--tpp-hero-border);
}
html[data-tpp-theme] .quote-stat {
  background: var(--tpp-surface);
  border-color: var(--tpp-line);
  border-radius: calc(var(--tpp-radius) - 2px);
}
html[data-tpp-theme] .quote-stat__label { color: var(--tpp-muted); letter-spacing: 0.07em; font-weight: 600; }
html[data-tpp-theme] .quote-stat__value { color: var(--tpp-ink); font-variant-numeric: tabular-nums; }
html[data-tpp-theme] .summary-callout { background: var(--tpp-chip-bg); border-left-color: var(--tpp-link); }
html[data-tpp-theme] .gd-card-empty { background: var(--tpp-surface-2); border-color: var(--tpp-line-strong); }
html[data-tpp-theme] a.c360-tile:hover { border-color: var(--tpp-link); }
html[data-tpp-theme] .c360-tile--dark { background: var(--tpp-menu-bg); border-color: var(--tpp-menu-bg); }

/* ------------------------------------------------------------- buttons */

/* Set Bootstrap's radius variable, not border-radius, so .btn-group still squares only the
   inner joins and keeps the group's outer corners round. */
html[data-tpp-theme] .btn { font-weight: 600; letter-spacing: 0.01em; --bs-btn-border-radius: var(--tpp-radius-sm); }
html[data-tpp-theme] .btn-primary {
  color: var(--tpp-accent-ink);
  background-color: var(--tpp-accent);
  border-color: var(--tpp-accent);
  box-shadow: none !important;
}
html[data-tpp-theme] .btn-primary:is(:hover, :focus, .focus, :active, .active, .show) {
  color: var(--tpp-accent-ink) !important;
  background-color: var(--tpp-accent-hover) !important;
  border-color: var(--tpp-accent-hover) !important;
}
html[data-tpp-theme] .btn-outline-primary { color: var(--tpp-accent-text); border-color: var(--tpp-accent); }
html[data-tpp-theme] .btn-outline-primary:is(:hover, :focus, :active, .active) {
  color: var(--tpp-accent-ink) !important;
  background-color: var(--tpp-accent) !important;
  border-color: var(--tpp-accent) !important;
}
html[data-tpp-theme] .btn-label-primary { color: var(--tpp-chip-text) !important; background-color: var(--tpp-chip-bg) !important; border-color: transparent !important; }
html[data-tpp-theme] .btn-label-primary:hover { color: var(--tpp-accent-ink) !important; background-color: var(--tpp-accent) !important; }
html[data-tpp-theme] .btn-text-primary { color: var(--tpp-accent-text) !important; }
html[data-tpp-theme] .btn-outline-secondary { color: var(--tpp-text); border-color: var(--tpp-line-strong); }
html[data-tpp-theme] .btn-outline-secondary:hover { color: var(--tpp-ink) !important; background: var(--tpp-secondary-bg) !important; border-color: var(--tpp-line-strong) !important; }

/* ----------------------------------------------- primary-coloured utilities */

/* text-primary marks links and IDs in this app, so it takes the link colour, not the CTA colour. */
html[data-tpp-theme] .text-primary { color: var(--tpp-link) !important; }
html[data-tpp-theme] .bg-primary { background-color: var(--tpp-accent) !important; color: var(--tpp-accent-ink); }
html[data-tpp-theme] .border-primary { border-color: var(--tpp-accent) !important; }
html[data-tpp-theme] .bg-label-primary { background-color: var(--tpp-chip-bg) !important; color: var(--tpp-chip-text) !important; }
html[data-tpp-theme] .bg-label-success { background-color: var(--tpp-success-bg) !important; color: var(--tpp-success) !important; }
html[data-tpp-theme] .bg-label-warning { background-color: var(--tpp-warning-bg) !important; color: var(--tpp-warning) !important; }
html[data-tpp-theme] .bg-label-danger  { background-color: var(--tpp-danger-bg) !important;  color: var(--tpp-danger) !important; }
html[data-tpp-theme] .bg-label-info    { background-color: var(--tpp-info-bg) !important;    color: var(--tpp-info) !important; }
html[data-tpp-theme] .bg-label-secondary { background-color: var(--tpp-secondary-bg) !important; color: var(--tpp-secondary) !important; }
html[data-tpp-theme] .badge { font-weight: 600; letter-spacing: 0.02em; border-radius: 999px; }
html[data-tpp-theme] .progress-bar { background-color: var(--tpp-link); }

/* --------------------------------------------------------------- forms */

html[data-tpp-theme] :is(.form-control, .form-select) { border-color: var(--tpp-line-strong); color: var(--tpp-ink); }
/* Fields inside an .input-group keep Bootstrap's corners, which square the joins. */
html[data-tpp-theme] :is(.form-control, .form-select):not(.input-group > *) { border-radius: calc(var(--tpp-radius) - 4px); }
html[data-tpp-theme] :is(.form-control, .form-select):focus {
  border-color: var(--tpp-link) !important;
  box-shadow: 0 0 0 3px var(--tpp-focus) !important;
}
html[data-tpp-theme] .form-label { color: var(--tpp-text); font-weight: 500; }
html[data-tpp-theme] .form-check-input:checked { background-color: var(--tpp-link); border-color: var(--tpp-link); box-shadow: none; }
html[data-tpp-theme] .form-check-input:focus { border-color: var(--tpp-link); box-shadow: 0 0 0 3px var(--tpp-focus); }
html[data-tpp-theme] .select2-container--default .select2-results__option--highlighted[aria-selected] { background-color: var(--tpp-link) !important; }
html[data-tpp-theme] .select2-container--default.select2-container--focus .select2-selection { border-color: var(--tpp-link) !important; }

/* ---------------------------------------------- navigation & pagination */

html[data-tpp-theme] .nav-pills .nav-link.active,
html[data-tpp-theme] .nav-pills .nav-link.active:hover { background-color: var(--tpp-accent); color: var(--tpp-accent-ink); box-shadow: none; }
html[data-tpp-theme] .nav-tabs .nav-link.active { color: var(--tpp-ink); box-shadow: 0 -2px 0 var(--tpp-link) inset; }
html[data-tpp-theme] .page-item.active .page-link,
html[data-tpp-theme] .page-item.active .page-link:hover { background-color: var(--tpp-accent); border-color: var(--tpp-accent); color: var(--tpp-accent-ink); box-shadow: none; }
html[data-tpp-theme] .dropdown-menu { border: 1px solid var(--tpp-line); border-radius: var(--tpp-radius); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08); }
html[data-tpp-theme] .dropdown-item:is(.active, :active) { background-color: var(--tpp-accent-soft); color: var(--tpp-ink); }

/* -------------------------------------------------------------- tables */

html[data-tpp-theme] .table { --bs-table-hover-bg: var(--tpp-row-hover); border-color: var(--tpp-line); }
html[data-tpp-theme] .table > :not(caption) > * > * { border-bottom-color: var(--tpp-line); }
html[data-tpp-theme] .table > thead > tr > th,
html[data-tpp-theme] .table-light > tr > th,
html[data-tpp-theme] .table thead.table-light th {
  background-color: var(--tpp-thead-bg) !important;
  color: var(--tpp-thead-text) !important;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.07em;
  border-bottom: 1px solid var(--tpp-line-strong);
}
html[data-tpp-theme] .table > tbody > tr:hover > * { background-color: var(--tpp-row-hover); }
html[data-tpp-theme] .table td { font-variant-numeric: tabular-nums; }
html[data-tpp-theme] .sortable-th:hover,
html[data-tpp-theme] .sortable-th__icon--active { color: var(--tpp-link); }

/* -------------------------------------------------------------- footer */

html[data-tpp-theme] .content-footer { color: var(--tpp-muted); }