/* Outfit font loaded via Google Fonts in layout */
:root {
  /*
   * Primitives (palette) — use mainly in this file; prefer --app-* in components.
   *
   * --hc-ink-* — Foreground / structure (text, chrome, borders). Slightly greenish grays.
   *   Step = darkness: higher number → darker (900 ≈ body text, 300 ≈ light tint for bars/borders).
   *
   * --hc-sage-* — Soft background / canvas (page fill, panels). Muted green-grays.
   *   Step = strength on screen: higher number → a bit more visible (100 lightest wash, 400 stronger).
   *   --hc-sage-mid sits between sage-300 and sage-400 for fine-tuned surfaces.
   */
  --hc-black: #000;
  --hc-ink-900: #1B2217;
  --hc-ink-800: #272E23;
  --hc-ink-700: #323A2E;
  --hc-ink-600: #50594C;
  --hc-ink-500: #83947C;
  --hc-ink-400: #A2B09B;
  --hc-ink-300: #C1CFBA;
  --hc-sage-100: #F0F5ED;
  --hc-sage-200: #EDF2EA;
  --hc-sage-300: #DFE8DB;
  --hc-sage-400: #CDD9C7;
  --hc-sage-mid: #D8DFD4;
  --hc-green-500: #A0D69C;
  --hc-yellow-400: #FBFF41;
  --hc-grey-blue: rgb(163, 182, 205);
  --hc-white: oklch(100% 0 0);
  --hc-neutral-950: oklch(0% 0 0);
  --hc-neutral-600: rgb(82, 82, 82);
  --hc-neutral-500: rgb(115, 115, 115);
  --hc-neutral-300: rgb(212, 212, 212);
  --hc-neutral-200: rgb(222, 226, 230);
  --hc-shadow-xs: rgba(0, 0, 0, 0.05);
  --hc-admin-blue: #2b42c7;
  --hc-admin-nav-bg: color-mix(in oklch, var(--hc-admin-blue) 8%, white);
  --hc-admin-nav-border: color-mix(in oklch, var(--hc-admin-blue) 28%, white);
  --hc-admin-nav-text: color-mix(in oklch, var(--hc-admin-blue) 82%, black);
  --hc-admin-nav-hover: color-mix(in oklch, var(--hc-admin-blue) 14%, white);
  --hc-admin-nav-active: color-mix(in oklch, var(--hc-admin-blue) 20%, white);
  --hc-admin-nav-focus: color-mix(in srgb, var(--hc-admin-nav-text) 28%, transparent);
  --hc-info-1: #A3B6CD;
  --hc-info-2: #31D2F2;
  --hc-info-3: #25CFF2;
  --hc-ok-bg: rgb(240, 253, 244);
  --hc-ok-fg: rgb(25, 135, 84);
  --hc-danger-bg: #FEF2F2;
  --hc-danger: #DC3545;
  --hc-select-bg: #E9EFE5;

  /* --- Semantic — prefer these in app stylesheets --- */
  --app-fg: var(--hc-ink-900);
  --app-fg-muted: var(--hc-ink-600);
  --app-fg-subtle: var(--hc-ink-500);
  --app-fg-faint: var(--hc-ink-400);
  --app-fg-emphasis: var(--hc-black);
  --app-link: var(--app-fg-muted);
  --app-bg: var(--hc-sage-200);
  --app-bg-sheet: var(--hc-sage-300);
  --app-bg-muted: var(--hc-sage-100);
  --app-bg-wash: var(--hc-sage-400);
  --app-bg-tint: var(--hc-sage-mid);
  --app-chrome: var(--hc-ink-600);
  --app-separator: color-mix(in srgb, var(--hc-ink-900) 12%, transparent);
  --app-fg-on-inverse: var(--hc-white);
  --app-page-bg: #d8e0d4;
  --app-surface: #ffffff;
  --app-surface-muted: #f6faf3;
  --app-border-subtle: color-mix(in srgb, var(--app-fg-muted) 12%, transparent);
  --app-header-overlay: color-mix(in srgb, #212529 8%, transparent);
  --app-success: var(--hc-green-500);
  --app-accent-yellow: var(--hc-yellow-400);
  --app-danger: var(--hc-danger);
  --app-danger-bg: var(--hc-danger-bg);
  --app-ok-bg: var(--hc-ok-bg);
  --app-ok-fg: var(--hc-ok-fg);

  /* --- Layout & type scale --- */
  --app-radius-xs: 3px;
  --app-radius-sm: 5px;
  --app-radius-xl: 12px;
  --app-radius-modal: 16px;
  --app-radius-card: 14px;
  --app-text-xl: 1.5rem;
  --app-text-lg: 1.25rem;
  --app-text-base: 1rem;
  --app-text-sm: 0.875rem;
  --app-text-xs: 0.75rem;
  --app-test-semibold: 600;
  --app-text-normal: 400;
  --app-text-light: 300;
  /* Dense fields (filter bars, inline compact inputs) — matches Bootstrap -sm rhythm */
  --app-form-compact-pad-y: 0.25rem;
  --app-form-compact-pad-x: 0.5rem;
  /* Pill shape for native selects / Tom Select (see .form-select below) */
  --app-form-select-radius: 20px;
  --app-header-height: 80px;
  --app-shadow-lg: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);

  /* --- Table defaults (global Bootstrap-compatible baseline) --- */
  --app-table-header-bg: var(--app-bg-wash);
  --app-table-header-fg: var(--app-fg-muted);
  --app-table-cell-bg: var(--hc-sage-200);
  --app-table-cell-fg: var(--app-fg);
  --app-table-row-hover-bg: color-mix(in srgb, var(--app-bg-sheet) 60%, var(--hc-sage-200));
  --app-table-row-striped-bg: color-mix(in srgb, var(--app-bg-muted) 55%, var(--hc-sage-200));
  --app-table-border: color-mix(in srgb, var(--app-fg-muted) 10%, transparent);
  --app-table-cell-padding-y: 0.5rem;
  --app-table-cell-padding-x: 0.6rem;
  --app-table-sm-cell-padding-y: 0.35rem;
  --app-table-sm-cell-padding-x: 0.45rem;

  /* --- BWA chart --- */
  --bwa-tone-revenue-rgb: 46, 125, 50;
  --bwa-tone-cost-rgb: 198, 40, 40;
  --bwa-chart-line: #222;
  --bwa-chart-fy-divider: var(--app-fg-faint);

  /* --- Bootstrap bridge (maps app semantics to BS variables) --- */
  --bs-primary: var(--app-fg);
  --bs-primary-rgb: 27, 34, 23;
  --bs-btn-bg: var(--app-fg);
  --bs-btn-border-color: var(--app-fg);
  --bs-btn-hover-color: #fff;
  --bs-body-color: var(--app-fg);
  --bs-btn-color: var(--app-link);
}

html,
:root {
  font-family: "Outfit", "Open Sans", sans-serif;
  font-size: 100%;
  /* usually defaults to 16px (also sets the rem) */
  line-height: 1.4;
  color: var(--app-fg);
  /* auto: Safari scrollbar thumb lags when smooth is set on the document root */
  scroll-behavior: auto;
}

body {
  background: var(--app-bg);
}

body.admin {
  margin-top: 0;
}

h1 {
  font-size: 1.953rem;
  line-height: 1.15;
}

h2 {
  font-size: 1.5rem;
  line-height: 1.75rem;
}

h3 {
  font-size: 1.25rem;
  line-height: 1.35;
  font-weight: 600;
  font-style: semibold;
}

h4 {
  font-size: 1.125rem;
  line-height: 1.35;
  font-weight: 600;
  font-style: semibold;
}

a,
.nav-link,
.btn-link {
  color: var(--app-link);
  text-decoration: none;
}

/* Decorative :hover on simplified/BWA mobile chrome must use
   @media (hover: hover) and (pointer: fine) so touch taps do not stick. */
@media (hover: hover) and (pointer: fine) {
  a:not(.btn):hover,
  .nav-link:hover,
  .btn-link:hover {
    color: var(--app-fg);
    text-decoration: underline;
  }
}

/* Inline links inside alerts and hint banners should always be underlined */
.alert a:not(.btn),
.banner a:not(.btn) {
  text-decoration: underline;
}

select.form-control,
.form-select {
  border-radius: var(--app-form-select-radius);
  border-color: grey;
  font-weight: 250;
}

.header,
.simplified-header {
  background-color: #DFE8DB;
}

.logo {
  height: 16px;
}

.h2_description {
  color: var(--app-fg-muted);
}

.btn {
  transition:
    color 0.15s ease-in-out,
    background-color 0.15s ease-in-out,
    border-color 0.15s ease-in-out,
    box-shadow 0.15s ease-in-out;


  &.btn-primary {
    background-color: var(--app-link);
    border-color: var(--app-link);

    &:hover,
    &:active {
      background-color: var(--hc-ink-800);
      border-color: var(--app-fg);
      color: var(--bs-btn-hover-color);
    }

    &.disabled {
      background-color: transparent;
      border-color: var(--app-bg-wash);
      color: var(--app-fg-subtle);
    }
  }
}

.btn-outline-primary {
  --bs-btn-color: var(--app-fg-muted);
  --bs-btn-border-color: var(--app-chrome);
  --bs-btn-hover-color: var(--app-fg);
  --bs-btn-hover-bg: var(--app-bg-wash);
  --bs-btn-hover-border-color: var(--app-chrome);
  --bs-btn-focus-shadow-rgb: 80, 89, 76;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--app-chrome);
  --bs-btn-active-border-color: var(--app-chrome);
  --bs-btn-disabled-color: var(--app-fg-subtle);
  --bs-btn-disabled-bg: transparent;
  --bs-btn-disabled-border-color: var(--app-bg-wash);
}

.btn-outline-secondary {
  --bs-btn-color: var(--app-fg-muted);
  --bs-btn-border-color: var(--app-chrome);
  --bs-btn-hover-color: var(--app-fg);
  --bs-btn-hover-bg: var(--app-bg-wash);
  --bs-btn-hover-border-color: var(--app-chrome);
  --bs-btn-focus-shadow-rgb: 131, 148, 124;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--app-bg-wash);
  --bs-btn-active-border-color: var(--app-bg-wash);
  --bs-btn-disabled-color: var(--app-fg-subtle);
  --bs-btn-disabled-bg: transparent;
  --bs-btn-disabled-border-color: var(--app-bg-wash);
}

.btn-check:checked+.btn-outline-primary .bi,
.btn-check:checked+.btn-outline-secondary .bi,
.btn-outline-primary.active .bi,
.btn-outline-secondary.active .bi {
  color: var(--app-accent-yellow);
}

.btn-check:not(:checked)+.btn-outline-primary:hover,
.btn-check:not(:checked)+.btn-outline-secondary:hover {
  color: var(--bs-btn-hover-color);
  background-color: var(--bs-btn-hover-bg);
  border-color: var(--bs-btn-hover-border-color);
}

.view-toggle {
  display: flex;

  .toggle-button {
    flex: 1 1 0;
    text-align: center;
    font-weight: var(--app-text-normal);
    font-size: var(--app-text-sm);
    cursor: pointer;
    background-color: transparent;
    border: 1px solid var(--app-chrome);
    padding: 0.5rem 0.75rem;
    color: var(--app-link);
    border-radius: 0;

    &.active {
      background-color: var(--app-chrome);
      color: var(--app-accent-yellow);
      border-color: var(--app-chrome);
    }

    &:first-child {
      border-top-left-radius: var(--app-radius-sm);
      border-bottom-left-radius: var(--app-radius-sm);
    }

    &:last-child {
      border-top-right-radius: var(--app-radius-sm);
      border-bottom-right-radius: var(--app-radius-sm);
    }
  }
}

.table {
  --bs-table-color: var(--app-table-cell-fg);
  --bs-table-bg: var(--app-table-cell-bg);
  --bs-table-border-color: var(--app-table-border);
  --bs-table-striped-bg: var(--app-table-row-striped-bg);
  --bs-table-striped-color: var(--app-table-cell-fg);
  --bs-table-hover-bg: var(--app-table-row-hover-bg);
  --bs-table-hover-color: var(--app-table-cell-fg);
  --bs-table-accent-bg: transparent;
  color: var(--bs-table-color);
  background-color: var(--bs-table-bg);
}

.table> :not(caption)>*>* {
  background-color: var(--bs-table-bg);
  border-bottom-color: var(--bs-table-border-color);
  padding: var(--app-table-cell-padding-y) var(--app-table-cell-padding-x);
}

.table>thead>tr>th {
  background-color: var(--app-table-header-bg);
  color: var(--app-table-header-fg);
  border-bottom-color: var(--bs-table-border-color);
  font-weight: 600;
}

.table-sm> :not(caption)>*>* {
  padding: var(--app-table-sm-cell-padding-y) var(--app-table-sm-cell-padding-x);
}

mark {
  /* A...squevel? */
  corner-shape: squircle bevel;
  border-radius: 50% / 1.1rem 0.5rem 0.9rem 0.7rem;

  /* Prevents background-break when wrapping */
  box-decoration-break: clone;
}

/* Setup checklist: file input — yellow file selector (Chrome / Edge / Safari) */
.setup-step-file-input::file-selector-button {
  margin-right: 0.75rem;
  padding: 0.35rem 0.75rem;
  border-radius: 10px;
  border: 1px solid color-mix(in srgb, var(--app-fg) 18%, transparent);
  background-color: var(--app-accent-yellow);
  color: var(--app-fg);
  font-weight: 600;
  font-size: 0.8125rem;
}

.setup-step-file-input::file-selector-button:hover {
  background-color: color-mix(in srgb, white 10%, var(--app-accent-yellow));
}

body:has(#dismissSetupChecklistModal.show) .modal-backdrop {
  background-color: rgba(27, 34, 23, 0.42);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.hocos-footer {
  background-color: var(--hc-ink-300) !important;
  border-top: 1px solid var(--hc-neutral-200) !important;

  .legal-links {
    .legal-link {
      color: var(--hc-ink-700);
      text-decoration: none;

      @media (hover: hover) and (pointer: fine) {
        &:hover {
          color: var(--hc-ink-900);
        }
      }
    }
  }

  .feedback-trigger {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    border: 1px solid var(--app-chrome);
    border-radius: 999px;
    background-color: var(--app-chrome);
    color: #fff;
    padding: 0.25rem 0.75rem;
    font: inherit;
    line-height: 1.2;
    cursor: pointer;
    font-size: var(--app-text-xs);

    .bi {
      font-size: 0.85em;
      color: var(--app-accent-yellow);
    }

    @media (hover: hover) and (pointer: fine) {
      &:hover {
        background-color: var(--hc-ink-800);
        border-color: var(--hc-ink-800);
        color: #fff;
      }
    }
  }
}

.text-primary {
  color: var(--app-fg-muted) !important;
}

.bg-primary {
  background-color: var(--app-fg-muted) !important;
}

.bg-success {
  background-color: var(--app-success) !important;
}

.bg-light {
  background-color: var(--hc-ink-300) !important;
}

.bg-info-1 {
  background-color: var(--hc-info-1) !important;
}

.bg-info-2 {
  background-color: var(--hc-info-2) !important;
}

.alert-grey {
  background-color: var(--hc-grey-blue) !important;
  color: var(--app-fg-muted);
  border-color: color-mix(in srgb, var(--app-fg-muted) 25%, transparent);
  border-radius: 4px;
}

.alert.yellow {
  background-color: var(--app-accent-yellow) !important;
  color: var(--app-fg-muted);
  border-color: color-mix(in srgb, var(--app-fg-muted) 25%, transparent);
  border-radius: 4px;
}

.list-group-item-hocos-current {
  background-color: var(--app-accent-yellow) !important;
  color: var(--app-fg-muted);
  border-color: color-mix(in srgb, var(--app-fg-muted) 25%, transparent);
}

.badge-hocos-current {
  background-color: var(--app-accent-yellow) !important;
  color: var(--app-fg-muted);
}

.alert-success {
  background-color: var(--app-success) !important;
  color: var(--app-fg-muted);
  border-color: color-mix(in srgb, var(--app-fg-muted) 20%, transparent);
  border-radius: 4px;
}

.alert-success-muted {
  background-color: color-mix(in srgb, var(--app-success) 30%, transparent) !important;
  color: color-mix(in srgb, var(--app-fg-muted) 80%, var(--app-success));
  border-color: color-mix(in srgb, var(--app-fg-muted) 20%, transparent);
  border-radius: 4px;
}

.admin-area {
  background-color: var(--hc-admin-blue);
  border-radius: 4px;
  box-shadow: 0 2px 8px rgba(1, 41, 112, 0.25);

  .btn {
    color: var(--hc-sage-100);
    border-color: var(--hc-sage-100);
  }

  a {
    color: var(--hc-sage-100);

    &:hover {
      color: var(--hc-sage-300);
    }
  }

  .btn:hover {
    background-color: var(--hc-sage-100);
    color: var(--hc-admin-blue);
    text-decoration: none;
  }
}

.admin-area-btn {
  background-color: var(--hc-admin-blue);
  color: var(--hc-sage-100);
  border: 1px solid var(--hc-admin-blue);

  &:hover,
  &:focus {
    background-color: var(--hc-sage-100);
    color: var(--hc-admin-blue);
    border-color: var(--hc-sage-100);
  }
}

.dashboard-stat-link:hover .card {
  box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
}