/*
 * FMD theme on Bootstrap 5 (FE-002).
 *
 * Reproduces the look the pages had on Bootstrap 3 + Paper Dashboard 1.2.1
 * (typography, buttons, labels, panels, cards, tabs, tables, form fields), so
 * the rebuild changes the framework and not the appearance. Page and
 * component styles stay in project.css; this file only sets the base.
 */

:root {
  --fmd-text: #66615b;
  --fmd-text-strong: #252422;
  --fmd-muted: #a49e93;
  --fmd-link: #68b3c8;
  --fmd-link-hover: #429cb6;
  --fmd-line: #ccc5b9;
  --fmd-line-light: #f1eae0;
  --fmd-panel: #f9f7f3;
  --fmd-primary: #7a9e9f;
  --fmd-info: #68b3c8;
  --fmd-success: #7ac29a;
  --fmd-warning: #f3bb45;
  --fmd-danger: #eb5e28;
  --fmd-default: #66615b;
  --bs-body-font-family: "Muli", "Helvetica", Arial, sans-serif;
  --bs-body-font-size: 14px;
  --bs-body-line-height: 1.42857143;
  --bs-body-color: var(--fmd-text);
  --bs-link-color: var(--fmd-link);
  --bs-link-color-rgb: 104, 179, 200;
  --bs-link-hover-color: var(--fmd-link-hover);
  --bs-link-hover-color-rgb: 66, 156, 182;
  --bs-link-decoration: none;
  --bs-border-color: var(--fmd-line);
  /* Page surfaces, text and lines (FE-009), dark values below. Translucent
     surfaces and hairlines take an RGB triplet: rgba(var(--fmd-line-rgb), .08). */
  color-scheme: light;
  --fmd-ink: #1f2933;
  --fmd-ink-soft: #43515e;
  --fmd-ink-muted: #5b6670;
  --fmd-ink-strong: #000;
  --fmd-surface: #fff;
  --fmd-surface-rgb: 255, 255, 255;
  --fmd-surface-sunken: #f8fafc;
  --fmd-line-rgb: 31, 41, 51;
  --fmd-hr: #eee;
  --fmd-card-shadow: rgba(204, 197, 185, .5);
  --fmd-tint: #edf8f7;
  --fmd-tint-line: #c8e4e1;
  --fmd-tint-ink: #3d827d;
  --fmd-note-ink: #00689B;
  --fmd-accent-ink: #115e59;
  --fmd-positive-ink: #15803d;
  --fmd-success-ink: #39834b;
  --fmd-negative-ink: #b42318;
  --fmd-text-danger: #c84513;
  --fmd-field: #f3f2ee;
  --fmd-field-line: #e8e7e3;
  --fmd-field-disabled: #e3e3e3;
  --fmd-placeholder: #cfcfca;
  --fmd-select-chevron: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
  --fmd-shell-bg:
    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);
  --fmd-shell-panel: rgba(255, 252, 247, .62);
  --fmd-shell-panel-line: rgba(255, 255, 255, .65);
  /* Chart axes and grid lines (fmd-charts.js); the series colours are the
     profile's and the same in both themes. */
  --fmd-chart-axis: rgba(0, 0, 0, .4);
  --fmd-chart-axis-trend: #7b8794;
  --fmd-chart-grid: rgba(0, 0, 0, .2);
}

/* Dark theme (FE-009): data-bs-theme="dark" on <html> (theme.js) follows the
   phone or computer setting; printing switches back to light. Only surfaces,
   text and lines change: series colours, shop and benchmark labels, buttons
   and status colours used as fills stay as in light. */
[data-bs-theme="dark"] {
  color-scheme: dark;
  --fmd-text: #c9c3ba;
  --fmd-text-strong: #ece9e4;
  --fmd-muted: #8f9aa6;
  --fmd-line: #3a4350;
  --fmd-line-light: #2a313b;
  --fmd-panel: #1f252e;
  --fmd-default: #a8a29a;
  --fmd-ink: #e6edf3;
  --fmd-ink-soft: #b4bfca;
  --fmd-ink-muted: #a3adb8;
  --fmd-ink-strong: #f5f7fa;
  --fmd-surface: #1c222b;
  --fmd-surface-rgb: 28, 34, 43;
  --fmd-surface-sunken: #161b22;
  --fmd-line-rgb: 210, 220, 230;
  --fmd-hr: #2a313b;
  --fmd-card-shadow: rgba(0, 0, 0, .35);
  --fmd-tint: #17302e;
  --fmd-tint-line: #2c5551;
  --fmd-tint-ink: #7cc8c1;
  --fmd-note-ink: #6cb6e0;
  --fmd-accent-ink: #5fd0c3;
  --fmd-positive-ink: #4ade80;
  --fmd-success-ink: #6fcf86;
  --fmd-negative-ink: #f87171;
  --fmd-text-danger: #f0835a;
  --fmd-field: #232a34;
  --fmd-field-line: #364150;
  --fmd-field-disabled: #2a313b;
  --fmd-placeholder: #6b7480;
  --fmd-select-chevron: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23e6edf3' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
  --fmd-shell-bg:
    radial-gradient(circle at top left, rgba(217, 119, 6, .08), transparent 30%),
    radial-gradient(circle at right 20%, rgba(15, 118, 110, .12), transparent 28%),
    linear-gradient(180deg, #14181e, #0f1216);
  --fmd-shell-panel: rgba(22, 27, 34, .72);
  --fmd-shell-panel-line: rgba(255, 255, 255, .06);
  --fmd-chart-axis: rgba(255, 255, 255, .55);
  --fmd-chart-axis-trend: #9aa5b1;
  --fmd-chart-grid: rgba(255, 255, 255, .16);
}

body {
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
}

a { text-decoration: none; }
a:hover, a:focus { text-decoration: none; }

/* Typography (Paper Dashboard sizes, Bootstrap 3 spacing) ------------------ */
h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6 { color: inherit; line-height: 1.1; }
h1, .h1, h2, .h2, h3, .h3, h4, .h4 { font-weight: 400; margin: 30px 0 15px; }
h1, .h1 { font-size: 3.2em; }
h2, .h2 { font-size: 2.6em; }
h3, .h3 { font-size: 1.825em; line-height: 1.4; margin: 20px 0 10px; }
h4, .h4 { font-size: 1.5em; font-weight: 600; line-height: 1.2em; }
h5, .h5 { font-size: 1.25em; font-weight: 400; line-height: 1.4em; margin: 10px 0 15px; }
h6, .h6 { font-size: .9em; font-weight: 600; margin: 10px 0; text-transform: uppercase; }
p { font-size: 16px; line-height: 1.4em; margin: 0 0 10px; }
.form-text { font-size: 14px; }
small, .small { font-size: 85%; }
label { font-weight: 700; margin-bottom: 5px; max-width: 100%; }
b, strong { font-weight: 700; }
hr { opacity: 1; border-top-color: var(--fmd-hr); margin: 20px 0; }

/* Grid: Bootstrap 3's 30px gutter. Templates use Bootstrap 5 breakpoints
   shifted by one (Bootstrap 3 sm/md/lg = Bootstrap 5 md/lg/xl), so columns
   switch at the same widths as before. */
.row, .container, .container-fluid { --bs-gutter-x: 30px; }

/* Buttons ---------------------------------------------------------------- */
.btn {
  --fmd-btn: var(--fmd-default);
  background-color: transparent;
  border: 2px solid var(--fmd-btn);
  border-radius: 20px;
  color: var(--fmd-btn);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.42857143;
  padding: 7px 18px;
  transition: all 150ms linear;
}
.btn:hover, .btn:focus, .btn:active, .btn.active, .btn.show {
  background-color: var(--fmd-btn);
  border-color: var(--fmd-btn);
  color: #fff;
}
.btn-primary { --fmd-btn: var(--fmd-primary); }
.btn-info { --fmd-btn: var(--fmd-info); }
.btn-success { --fmd-btn: var(--fmd-success); }
.btn-warning { --fmd-btn: var(--fmd-warning); }
.btn-danger { --fmd-btn: var(--fmd-danger); }
.btn-fill { background-color: var(--fmd-btn); color: #fff; }
.btn-fill:hover, .btn-fill:focus { filter: brightness(.9); }
.btn-simple { border: 0; padding: 7px 18px; }
.btn-simple:hover, .btn-simple:focus { background-color: transparent; color: var(--fmd-btn); }
.btn-icon { border-radius: 25px; padding: 6px 10px; }
.btn-icon i { margin-right: 0; }
.btn:disabled, .btn.disabled { background-color: transparent; border-color: var(--fmd-btn); color: var(--fmd-btn); opacity: .5; }
.btn-fill:disabled, .btn-fill.disabled { background-color: var(--fmd-btn); color: #fff; }

/* Labels (Bootstrap 3 + Paper) ------------------------------------------- */
.label {
  background-color: var(--fmd-default);
  border-radius: 12px;
  color: #fff;
  display: inline-block;
  font-size: .75em;
  font-weight: 500;
  line-height: 1.5em;
  padding: 3px 8px;
  text-transform: uppercase;
  white-space: nowrap;
}
.label-primary { background-color: var(--fmd-primary); }
.label-info { background-color: var(--fmd-info); }
.label-success { background-color: var(--fmd-success); }
.label-warning { background-color: var(--fmd-warning); }
.label-danger { background-color: var(--fmd-danger); }

/* Cards (Paper) ----------------------------------------------------------- */
.card {
  --bs-card-border-width: 0;
  background-color: var(--fmd-surface);
  border: 0;
  border-radius: 6px;
  box-shadow: 0 2px 2px var(--fmd-card-shadow);
  color: var(--fmd-text-strong);
  margin-bottom: 20px;
  position: relative;
}
.card .card-header { background: transparent; border: 0; border-radius: 3px 3px 0 0; padding: 20px 15px 0; position: relative; }
.card .card-title { color: var(--fmd-text-strong); font-weight: 300; margin: 0; }
.card .card-content { padding: 15px 15px 10px; position: relative; }
.card .card-content .card-title { margin: 10px 0 20px; }
.card .category { color: #9a9a9a; font-size: 14px; font-weight: 400; margin-bottom: 0; }
.card .numbers { font-size: 2em; text-align: right; }
.card .numbers p { margin: 0; }
.card .stats { color: #a49e93; font-weight: 300; }

/* Collapsible panels (Bootstrap 3 + Paper) -------------------------------- */
.panel {
  background-color: var(--fmd-panel);
  border: 0;
  border-radius: 3px;
  font-weight: 300;
  line-height: 1.6em;
  margin-top: 10px;
  padding: 7px 10px;
}
.panel-border { border: 1px solid var(--fmd-field-line); }
.panel-heading { background-color: var(--fmd-panel); border: 0; border-radius: 3px; padding: 10px 15px; }
.panel-title { color: inherit; font-size: 16px; margin: 0; }
.panel-body { padding: 15px; }
.panel-default a { color: var(--fmd-text); }
.panel-default a:hover, .panel-default a:focus { color: var(--fmd-danger); }
.panel-default a .panel-title > i { float: right; transition: transform .18s ease; }
.panel-default a[aria-expanded="true"] .panel-title > i { transform: rotate(180deg); }
.panel-group .panel + .panel { margin-top: 5px; }

/* Tabs (Paper) ------------------------------------------------------------ */
.nav-tabs-navigation { border-bottom: 1px solid var(--fmd-line-light); margin-bottom: 30px; text-align: center; }
.nav-tabs-wrapper { display: inline-block; margin: 0 1.25% -6px; position: relative; width: auto; }
.nav-tabs { border-bottom: 0; font-size: 14px; font-weight: 600; }
.nav-tabs .nav-link { background: transparent; border: 0; color: var(--fmd-muted); }
.nav-tabs .nav-link:hover { color: var(--fmd-text); }
.nav-tabs .nav-link.active { background: transparent; border: 0; color: var(--fmd-text); }


/* Tables (Bootstrap 3 + Paper) -------------------------------------------- */
.table {
  --bs-table-bg: transparent;
  --bs-table-color: inherit;
  --bs-table-striped-color: inherit;
  --bs-table-hover-color: inherit;
  border-collapse: separate;
  border-spacing: 0;
  margin-bottom: 20px;
}
.table > :not(caption) > * > * { border-bottom-width: 0; border-top: 1px solid var(--fmd-line); padding: 12px 11px; vertical-align: middle; }
.table > thead > tr > th { font-size: 1.25em; font-weight: 300; }
.table-responsive { margin-bottom: 15px; }
/* Expand/collapse chevrons as heavy as Font Awesome's were. */
.table .bi-chevron-right, .table .bi-chevron-down { -webkit-text-stroke: 1.4px; }
.table-icons { display: inline-block; min-width: 110px; }
/* As on 5.5.0: headers in the table font (project.css), cells in the body
   font (Paper Dashboard set it on td), numbers in the mono font. */
.table td { font-family: "Muli", "Helvetica", Arial, sans-serif; }

/* Form fields (Paper) ----------------------------------------------------- */
.form-control, .form-select {
  background-color: var(--fmd-field);
  border: 1px solid var(--fmd-field-line);
  border-radius: 4px;
  box-shadow: none;
  color: var(--fmd-text);
  font-size: 14px;
  height: 40px;
  padding: 7px 18px;
}
.form-select { padding-right: 36px; }
.form-control:focus, .form-select:focus { background-color: var(--fmd-surface); border-color: var(--fmd-field-line); color: var(--fmd-text); box-shadow: none; outline: 0; }
.form-control::placeholder { color: var(--fmd-placeholder); }
.form-control:disabled, .form-control[readonly] { background-color: var(--fmd-field-disabled); color: #9a9a9a; cursor: not-allowed; }
textarea.form-control { height: auto; max-width: 100%; padding: 10px 18px; resize: none; }
select[multiple].form-control, select[multiple].form-select { height: auto; }
.form-check-input:checked { background-color: var(--fmd-text); border-color: var(--fmd-text); }

/* Alerts (Paper) ---------------------------------------------------------- */
.alert { border: 0; border-radius: 4px; color: #fff; font-size: 14px; padding: 12px 15px; }
.alert-success { background-color: #7ac29a; }
.alert-info { background-color: #68b3c8; }
.alert-warning { background-color: #f3bb45; }
.alert-danger, .alert-error { background-color: #eb5e28; }
.alert .btn-close { filter: invert(1) grayscale(1) brightness(2); }

/* Text colours (Paper) ---------------------------------------------------- */
.text-success { color: #54b07d !important; }
.text-danger { color: var(--fmd-text-danger) !important; }

/* Paper checkboxes and radios, Tom Select pills (shared by forms and dashboards) */
/* Checkboxes and radios as Paper Dashboard drew them: a grey square with a
   white tick, a grey ring with a dot. */
.checkbox, .radio { margin: 10px 0 12px; min-height: 20px; padding-left: 20px; position: relative; }
.checkbox + .checkbox, .radio + .radio { margin-top: -5px; }
.checkbox label, .radio label { line-height: 20px; min-height: 20px; }
.checkbox label, .radio label { cursor: pointer; display: inline-block; font-weight: 400; margin: 0; padding-left: 10px; position: relative; vertical-align: middle; }
.checkbox input[type="checkbox"], .radio input[type="radio"] { cursor: pointer; height: 19px; left: 0; margin: 0; opacity: 0; position: absolute; top: -2px; width: 19px; z-index: 1; }
.checkbox label::before { background-color: var(--fmd-default); border-radius: 3px; content: ""; height: 19px; left: 0; margin-left: -20px; opacity: .5; position: absolute; top: 0; transition: opacity .2s linear; width: 19px; }
.checkbox label::after { color: #fff; font-family: "bootstrap-icons"; font-size: 16px; height: 19px; left: 0; line-height: 19px; margin-left: -20px; position: absolute; text-align: center; top: 0; width: 19px; }
.checkbox input[type="checkbox"]:checked + label::before { opacity: 1; }
.checkbox input[type="checkbox"]:checked + label::after,
.checkbox input[type="checkbox"]:not(:disabled):hover + label::after { content: "\F633"; }
.checkbox input[type="checkbox"]:focus-visible + label::before { outline: 2px solid #68b3c8; outline-offset: 2px; }
.radio label::before, .radio label::after { border-radius: 50%; content: ""; height: 18px; left: 0; margin-left: -20px; position: absolute; top: 0; width: 18px; }
.radio label::before { border: 2px solid var(--fmd-default); opacity: .5; }
.radio input[type="radio"]:checked + label::after { background: var(--fmd-default); height: 8px; margin-left: -15px; top: 5px; width: 8px; }

/* Searchable selects (Tom Select on select.selectpicker) shaped like the
   bootstrap-select button they replace: a round outlined pill. */
.ts-wrapper.selectpicker.single .ts-control { background: transparent; border: 2px solid var(--fmd-default); border-radius: 20px; box-shadow: none; color: var(--fmd-default); font-size: 14px; font-weight: 600; min-height: 38px; padding: 7px 34px 7px 18px; }
.ts-wrapper.selectpicker.single.focus .ts-control { box-shadow: none; }
.ts-wrapper.selectpicker .ts-dropdown { border-radius: 4px; font-size: 14px; }
.ts-wrapper.selectpicker.single .ts-control::after { border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 4px solid currentColor; content: ""; position: absolute; right: 18px; top: 50%; transform: translateY(-50%); }

/* Dropdowns --------------------------------------------------------------- */
.dropdown-menu { --bs-dropdown-font-size: 14px; }

/* Print: a compact report of the open tab (FE-006, owner 2026-10-25).
   No shell, menus or buttons; the screen's columns kept on A4 (Bootstrap's
   md/lg/xl columns would otherwise stack at paper width); no page margin, so
   browsers print no URL/date lines, the content shell gives the margin on
   every page. */
@media print {
  @page { margin: 0; size: A4; }
  html, body { background: #fff !important; }
  body { -webkit-print-color-adjust: exact; print-color-adjust: exact; font-size: 11px; min-width: 0 !important; }
  .no-print, .app-sidebar, .app-topbar, .nav-tabs-navigation, .shop-section-navigation, .btn, button, .alert { display: none !important; }
  .d-print-block { display: block !important; }
  .app-main-panel { margin-left: 0 !important; }
  .app-content { padding: 0 !important; }
  .app-content-shell {
    -webkit-box-decoration-break: clone; box-decoration-break: clone;
    background: none !important; border: 0 !important; border-radius: 0 !important;
    box-shadow: none !important; max-width: none !important; padding: 11mm 12mm !important;
  }
  .tab-content > .tab-pane:not(.active) { display: none !important; }
  .card, .panel { border: 1px solid #ddd !important; box-shadow: none !important; }
  .fmd-chart, .card, .panel, tr { break-inside: avoid; }
  .col-md-1, .col-lg-1, .col-xl-1 { flex: 0 0 auto; width: 8.3333%; }
  .col-md-2, .col-lg-2, .col-xl-2 { flex: 0 0 auto; width: 16.6667%; }
  .col-md-3, .col-lg-3, .col-xl-3 { flex: 0 0 auto; width: 25.0000%; }
  .col-md-4, .col-lg-4, .col-xl-4 { flex: 0 0 auto; width: 33.3333%; }
  .col-md-5, .col-lg-5, .col-xl-5 { flex: 0 0 auto; width: 41.6667%; }
  .col-md-6, .col-lg-6, .col-xl-6 { flex: 0 0 auto; width: 50.0000%; }
  .col-md-7, .col-lg-7, .col-xl-7 { flex: 0 0 auto; width: 58.3333%; }
  .col-md-8, .col-lg-8, .col-xl-8 { flex: 0 0 auto; width: 66.6667%; }
  .col-md-9, .col-lg-9, .col-xl-9 { flex: 0 0 auto; width: 75.0000%; }
  .col-md-10, .col-lg-10, .col-xl-10 { flex: 0 0 auto; width: 83.3333%; }
  .col-md-11, .col-lg-11, .col-xl-11 { flex: 0 0 auto; width: 91.6667%; }
  .col-md-12, .col-lg-12, .col-xl-12 { flex: 0 0 auto; width: 100.0000%; }
  /* Charts: the SVG (with a viewBox, fmd-charts.js) scales to its column. */
  .fmd-chart { height: auto !important; }
  .fmd-chart > div { height: auto !important; position: static !important; width: 100% !important; }
  .fmd-chart svg { display: block; height: auto !important; position: static !important; width: 100% !important; }
  /* Tables fit the paper width: smaller type, tighter cells, amounts on one line. */
  .table-responsive { overflow: visible !important; }
  .table { font-size: 9.5px; width: 100% !important; }
  .table > :not(caption) > * > * { padding: 3px 5px; }
  .table > thead > tr > th { font-size: 10.5px; }
  .table td.text-end, .table th.text-end { white-space: nowrap; }
}