/* 📄 FILE: app/static/css/app/style.css */

/* ==========================================================================
   Will Kit Stylesheet - style.css
   --------------------------------------------------------------------------
   Purpose: Custom styles for the Will Kit application. Organized for clarity
   and long-term maintainability. No global overrides that could leak broadly.
   ========================================================================== */

/* ──────────────────────────────────────────────────────────────────────────
   TABLE OF CONTENTS
   0. Micro Tweaks & One-offs
   1. Bootstrap Overrides
   2. Typography & Branding
   3. Form Styling
   4. Autocomplete Dropdown Styling
      4.1 Estate Page Overrides (width tweaks)
      4.2 Estate Mobile (% input width + icon padding)
   5. Layout & Utility Tweaks
      5.1 Header: Brand baseline & breathing
      5.2 Header: Under-gap
      5.3 Step Nav: Breathing
      5.4 Step Nav: Under-gap
      5.5 Header/Title gap harmonisation
   6. Page-Specific Components (modals, icons, etc.)
   7. Trust (8b) Menus — Scoped (kept at top to preserve cascade)
   8. Trust Conditions UX Harmonisation — Scoped (kept at bottom to override)
   ───────────────────────────────────────────────────────────────────────── */


/* ──────────────────────────────────────────────
   Benchmark table cell padding (horizontal space)
   ────────────────────────────────────────────── */
#benchmark table th,
#benchmark table td {
  padding-left: 1rem;   /* adjust as needed */
  padding-right: 1rem;  /* adjust as needed */
}

/* ──────────────────────────────────────────────
   Partial: Reusable "Start My Will Now" CTA link
   ────────────────────────────────────────────── */
  /* Local tweak: vertically align the CTA icon */
  .btn-start-will .bi-arrow-right-circle {
    position: relative;
    top: 1px;
  }

/* ──────────────────────────────────────────────────────────────
   7. Trust (8b) Menus — Scoped
   NOTE: Kept at the very top intentionally to preserve cascade.
   ────────────────────────────────────────────────────────────── */

/* Trust 8b menus: consistent width/height/row style */
#trust_tiles .dropdown-menu.autocomplete-dropdown { min-width: 100%; }
#trust_tiles .dropdown-menu { max-height: 260px; overflow: auto; }
#trust_tiles .dropdown-item.rich { display: flex; gap: .5rem; align-items: flex-start; }


/* Match help modal title size/weight */
#wgDraftPreviewModal .modal-title {
  font-size: 2rem;        /* same as .help-modal-title-lg */
  font-weight: 500;
  letter-spacing: 0.01em;
  line-height: 1.2;
}

.wg-error-highlight {
  outline: 3px solid var(--bs-danger);
  outline-offset: 2px;
  transition: outline-offset .2s ease-in-out;
}

/* ──────────────────────────────────────────────────────────────
   🔵 Draft Will: Blue Fill Pulse
   - Targets .btn-pulse-primary
   - Uses Bootstrap --bs-primary-rgb (blue)
   ────────────────────────────────────────────────────────────── */

@keyframes btn-fill-pulse-primary {
  0%   { box-shadow: inset 0 0 0 0 rgba(var(--bs-primary-rgb), 0); }
  45%  { box-shadow: inset 0 0 0 9999px rgba(var(--bs-primary-rgb), .18); }
  100% { box-shadow: inset 0 0 0 0 rgba(var(--bs-primary-rgb), 0); }
}

.btn-pulse-primary {
  animation: btn-fill-pulse-primary 1.8s ease-in-out infinite;
  position: relative;
  z-index: 1;
}

.btn-outline-primary.btn-pulse-primary {
  border-color: rgba(var(--bs-primary-rgb), .9);
}

/* ──────────────────────────────────────────────────────────────
   🔴 Page Help: Red Fill Pulse
   - Targets .btn-pulse-danger
   - Uses Bootstrap --bs-danger-rgb (red)
   ────────────────────────────────────────────────────────────── */

@keyframes btn-fill-pulse-danger {
  0%   { box-shadow: inset 0 0 0 0 rgba(var(--bs-danger-rgb), 0); }
  45%  { box-shadow: inset 0 0 0 9999px rgba(var(--bs-danger-rgb), .18); }
  100% { box-shadow: inset 0 0 0 0 rgba(var(--bs-danger-rgb), 0); }
}

.btn-pulse-danger {
  animation: btn-fill-pulse-danger 1.8s ease-in-out infinite;
  position: relative;
  z-index: 1;
}

.btn-outline-danger.btn-pulse-danger {
  border-color: rgba(var(--bs-danger-rgb), .9);
}

/* ──────────────────────────────────────────────────────────────
   ♿ Respect reduced motion
   ────────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .btn-pulse-primary,
  .btn-pulse-danger {
    animation: none !important;
  }
}

/* ========================================================================
   Micro Tweaks
   ======================================================================== */
.tooltip {
  transition: opacity .2s ease-out;
}


/* ==========================================================================
   1. Bootstrap Overrides
   --------------------------------------------------------------------------
   Target default Bootstrap components to adjust their default behaviors
   or appearance.
   ========================================================================== */

/* Prevent Authority Type flicker: hide authority by default */
#authority-wrapper.d-none {
  display: none !important;
}

/* Remove Bootstrap's box-shadow and soften input borders */
.form-control,
.form-select {
  border-color: #999 !important;
  box-shadow: none !important;
}


/* ==========================================================================
   2. Typography & Branding
   --------------------------------------------------------------------------
   Base type styles and brand visuals.
   ========================================================================== */

/* Adjust global body font size and line height for readability */
body {
  font-size: 1.075rem;
  line-height: 1.6;
}

/* Ensure the page can scroll a little (used in some UI/overlay cases) */
body::after {
  content: '';
  display: block;
  height: 80px; /* Enough to trigger scroll */
}

/* Enlarge the Will Kit brand logo text in the navbar */
.navbar-brand {
  font-size: 2rem;
  line-height: 1;
}

/* Brand stack tuning (keeps navbar alignment intact) */
.wg-brand-name { font-weight: 600; letter-spacing: .2px; }
.wg-brand-tagline { font-size: .8rem; margin-top: .1rem; line-height: 1.1; }

/* Keep brand edges flush with container and align tagline */
.navbar .wg-brand { padding-left: 0; padding-right: 0; }

.wg-brand-name { font-weight: 600; letter-spacing: .2px; }

/* Tagline slightly larger + tight rhythm; scales up on lg */
.wg-brand-tagline { font-size: 1rem; line-height: 1.25; margin-top: .15rem; }
@media (min-width: 992px) { .wg-brand-tagline { font-size: 1rem; } }

/* (Optional) one-line tagline */
/* .wg-brand-tagline { white-space: nowrap; } */

/* ==========================================================================
   3. Form Styling
   --------------------------------------------------------------------------
   Appearance and behavior of form elements.
   ========================================================================== */

/* Resize and recolor custom checkbox inputs */
.form-check-input {
  width: 1.2em;
  height: 1.2em;
  border-color: #666;
}

/* Style checked state of checkboxes */
.form-check-input:checked {
  background-color: #0d6efd;
  border-color: #0d6efd;
}

/* Match checkbox error spacing to input error spacing */
.form-check .form-text {
  margin-top: 0 !important;
  line-height: 1.3; /* tighter vertical rhythm like inputs */
}


/* ==========================================================================
   4. Autocomplete Dropdown Styling
   --------------------------------------------------------------------------
   Custom styling for dropdowns used by people_autocomplete.js
   (helpers, executors, guardians) and AddressFinder (AF).
   ========================================================================= */

.autocomplete-dropdown {
  position: absolute;
  z-index: 1000;
  max-height: 200px;
  overflow-y: auto;
  border: 1px solid #ccc;
  border-radius: 0.375rem;
  background-color: #fff;
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
  padding: 0rem;
  font-size: 1.05rem;
}

.autocomplete-dropdown .dropdown-item:hover,
.autocomplete-dropdown .dropdown-item.active {
  background-color: #0d6efd;
  color: #fff;
}

/* 4.x AddressFinder normalization (keeps visuals unified with people/authority) */
.dropdown-menu.autocomplete-dropdown { font-size: 1.05rem; }  /* higher specificity */

/* Force hover/active colors for all unified dropdowns (people/authority/AF) */
.dropdown-menu.autocomplete-dropdown .dropdown-item:hover,
.dropdown-menu.autocomplete-dropdown .dropdown-item.active,
.dropdown-menu.autocomplete-dropdown [aria-selected="true"],
.dropdown-menu.autocomplete-dropdown .af_selected {
  background-color: #0d6efd !important;
  color: #fff !important;
}

/* Truncate long AddressFinder suggestions and hide horizontal scroll */
.autocomplete-dropdown .dropdown-item {
  white-space: nowrap !important;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Allow multi-line rich rows (used by substitution rule dropdown only) */
.autocomplete-dropdown .dropdown-item.rich {
  white-space: normal !important;
  overflow: visible;
  text-overflow: clip;
  line-height: 1.2;
  padding-top: .35rem;
  padding-bottom: .35rem;
}

/* Default muted explanation line */
.autocomplete-dropdown .dropdown-item.rich small { color: #6c757d; }

/* Hover/active state: make <small> text white to match main label */
.autocomplete-dropdown .dropdown-item.rich:hover small,
.autocomplete-dropdown .dropdown-item.rich.active small,
.autocomplete-dropdown .dropdown-item.rich[aria-selected="true"] small {
  color: #fff !important;
}

/* ── Disabled options in generic dropdowns (opt-in via option.disabled) ── */
.dropdown-menu.autocomplete-dropdown .dropdown-item.disabled,
.dropdown-menu.autocomplete-dropdown .dropdown-item[aria-disabled="true"] {
  opacity: .55;
  cursor: not-allowed;
}
.dropdown-menu.autocomplete-dropdown .dropdown-item.disabled:hover,
.dropdown-menu.autocomplete-dropdown .dropdown-item[aria-disabled="true"]:hover {
  background-color: inherit !important;
  color: var(--bs-secondary-color) !important;
}

/* ──────────────────────────────────────────────────────────
   4.1 Estate Page Overrides (width tweaks)
   Desktop/tablet only. Mobile falls back to natural widths.
   Update the two px values below as you like.
   ───────────────────────────────────────────────────────── */
@media (min-width: 768px) {
  /* 🔧 WIDTH KNOBS — DESKTOP (edit these two values only) */
  body[data-page="estate"] {
    --estate-desktop-condition-col: 220px;             /* ① Condition column/pill width */
    --estate-desktop-condition-dropdown-width: 320px;  /* ② Condition dropdown width */
  }

  /* Estate only — column 2 width (beats inline width on <th>) */
  body[data-page="estate"] table.table thead th:nth-child(2),
  body[data-page="estate"] table.table tbody td:nth-child(2) {
    width: var(--estate-desktop-condition-col) !important;
    max-width: var(--estate-desktop-condition-col) !important;
  }

  /* Estate only — visible readonly fuse-style input width */
  body[data-page="estate"] table.table tbody td:nth-child(2) input.estate-sub-input {
    width: var(--estate-desktop-condition-col);
    max-width: 100%;
  }

  /* Estate only — dropdown menu width (portaled to <body>, fixed) */
  body[data-page="estate"] .dropdown-menu.autocomplete-dropdown {
    position: fixed !important; /* override global absolute for portaled menu */
    min-width: var(--estate-desktop-condition-dropdown-width) !important;
    width: var(--estate-desktop-condition-dropdown-width) !important;
  }
}

  /* Keep the small-line color tweak (safe for all sizes) */
  body[data-page="estate"] .dropdown-menu.autocomplete-dropdown .dropdown-item.active small,
  body[data-page="estate"] .dropdown-menu.autocomplete-dropdown .dropdown-item:hover small {
    color: #fff !important;
}

/* 📱 Keep relationship labels (in brackets) on one line */
  body[data-page="estate"] td .text-muted {
    white-space: nowrap;
  }


/* ─────────────────────────────────────────────────────────-
   4.2 Estate Mobile — compact % input + condition pill,
   right-aligned stack, wider name column, no clipping.
   (Scoped + mobile-only; safe to drop in)
   ───────────────────────────────────────────────────────── */
@media (max-width: 767.98px) {
  /* 🔧 WIDTH KNOBS — MOBILE (edit these values as needed) */
  body[data-page="estate"] {
    --estate-mobile-field-width: 5.8rem;           /* % input width (incl. icon space) */
    --estate-mobile-condition-width: 5.8rem;       /* Condition pill width */
    --estate-pill-gap: .5rem;                      /* vertical gap between % and Condition */
  }

  /* Keep layout predictable and give the name column more space */
  body[data-page="estate"] .table { table-layout: fixed; width: 100%; }
  body[data-page="estate"] thead th:first-child { width: 68%; }
  body[data-page="estate"] thead th:last-child  { width: 32%; }

  /* Footer: hide the placeholder Condition cell so the “100%” stays in view */
  body[data-page="estate"] tfoot .wk-total-row > td:nth-child(2) { display: none; }

  /* Right-align the stacked controls in the % column */
  body[data-page="estate"] td[data-role="percent"].wk-stacked-right { text-align: right; }
  body[data-page="estate"] td[data-role="percent"].wk-stacked-right > .position-relative,
  body[data-page="estate"] td[data-role="percent"].wk-stacked-right .wk-subs-wrap {
    display: inline-block;
    margin-left: auto;
    max-width: 100%;
  }

  /* % input width + reserve space for the status icon */
  body[data-page="estate"] td[data-role="percent"] .position-relative { display: inline-block; }
  body[data-page="estate"] td[data-role="percent"] input.form-control {
    width: var(--estate-mobile-field-width) !important;
    min-width: var(--estate-mobile-field-width) !important;
    padding-inline-end: 2.25rem !important;    /* space for the ✓/⚠ icon */
    font-variant-numeric: tabular-nums;
  }
  body[data-page="estate"] td[data-role="percent"] .position-absolute.end-0.me-2 {
    right: .35rem !important;
    margin-right: 0 !important;
  }
  body[data-page="estate"] td[data-role="percent"] .row-status { pointer-events: none; }

  /* Condition pill when stacked into the % column */
  body[data-page="estate"] td[data-role="percent"] .wk-subs-wrap {
    display: inline-block;
    margin-top: var(--estate-pill-gap);
    max-width: 100%;
    white-space: normal;          /* allow wrapping */
    overflow-wrap: break-word;    /* break long labels */
  }
  body[data-page="estate"] td[data-role="percent"] .wk-subs-wrap input.estate-sub-input,
  body[data-page="estate"] td[data-role="subs"] input.estate-sub-input {
    width: var(--estate-mobile-condition-width);
    min-width: var(--estate-mobile-condition-width);
    text-align: left;
    padding-left: .5rem;
    padding-right: .5rem;
    /* When the pill sits in the % column, don’t reserve extra icon space on the right */
    padding-inline-end: .6rem !important;
  }

  /* 🎛️ Your requested per-side padding + compact font (applies to both controls) */
  body[data-page="estate"] td[data-role="percent"] .form-control,
  body[data-page="estate"] td[data-role="subs"] .form-control {
    padding-left: .4rem;    /* tweak independently */
    padding-right: .4rem;   /* tweak independently */
    font-size: .9rem;       /* optional compact text */
  }

  /* Dropdown (portaled) should never exceed viewport */
  body[data-page="estate"] .dropdown-menu.autocomplete-dropdown {
    width: min(92vw, 340px) !important;
    min-width: min(92vw, 340px) !important;
  }
}


/* ==========================================================================
   5. Layout & Utility Tweaks
   --------------------------------------------------------------------------
   Global spacing/positioning that doesn’t belong to a single component.
   ========================================================================== */

/* Boxed container locked to 1000px regardless of breakpoint */
.wg-fixed-1000{
  box-sizing: border-box;
  width: 100%;
  max-width: 1000px;
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--bs-gutter-x, .75rem);
  padding-right: var(--bs-gutter-x, .75rem);
}

/* Make custom navbar wrapper behave like .navbar > .container */
.navbar > .wg-fixed-1000 {
  display: flex;
  flex-wrap: inherit;
  align-items: flex-end;  /* ⬅️ bottom-align brand + nav */
  justify-content: space-between;
}


/* Slightly reduce top padding for the main content container */
.container.py-5 {
  padding-top: 0.1rem !important;
}

/* ─────────────────────────────────────────────────────────-
   5.1 Header: Brand baseline & breathing (xs / md / lg)
   - Baseline lock: padding-bottom matches .nav-link (~.5rem)
   - Breathing room is only padding-top (per breakpoint)
   ───────────────────────────────────────────────────────── */
.navbar .wg-fixed-1000 > a.navbar-brand.wg-brand {
  display: flex;
  align-items: center;
  padding-bottom: .5rem !important;   /* baseline lock with nav links */
}

/* xs / mobile */
@media (max-width: 767.98px) {
  .navbar .wg-fixed-1000 > a.navbar-brand.wg-brand { padding-top: 1rem !important; }
}

/* md / tablet */
@media (min-width: 768px) and (max-width: 991.98px) {
  .navbar .wg-fixed-1000 > a.navbar-brand.wg-brand { padding-top: 1.8rem !important; }
}

/* lg / desktop */
@media (min-width: 992px) {
  .navbar .wg-fixed-1000 > a.navbar-brand.wg-brand { padding-top: 2rem !important; }
}


/* ─────────────────────────────────────────────────────────-
   5.2 Header: Under-gap (xs / md / lg)
   - Controls space below the row so brand+nav move together
   - Uses margin-bottom on the wrapper to avoid global navbar changes
   ───────────────────────────────────────────────────────── */
.navbar > .wg-fixed-1000 { margin-bottom: .25rem; }  /* xs / mobile */

@media (min-width: 768px) {                           /* md / tablet */
  .navbar > .wg-fixed-1000 { margin-bottom: .4rem; }
}

@media (min-width: 992px) {                           /* lg / desktop */
  .navbar > .wg-fixed-1000 { margin-bottom: .6rem; }
}


/* Debug (optional): uncomment to confirm rule application */
/* 
.navbar .wg-fixed-1000 > a.navbar-brand.wg-brand { outline: 2px dashed magenta; }
*/


/* ─────────────────────────────────────────────────────────-
   5.3 Step Nav: Breathing (xs / md / lg)
   - Controls vertical padding inside the step row
   - Overrides .py-2 from markup safely (scoped + !important)
   ───────────────────────────────────────────────────────── */
#wg-steps > .wg-fixed-1000 {
  padding-top: .2rem !important;   /* xs / mobile */
  padding-bottom: .6rem !important;
}

@media (min-width: 768px) { /* md / tablet */
  #wg-steps > .wg-fixed-1000 {
    padding-top: .3rem !important;
    padding-bottom: .7rem !important;
  }
}

@media (min-width: 992px) { /* lg / desktop */
  #wg-steps > .wg-fixed-1000 {
    padding-top: .1rem !important;
    padding-bottom: .9rem !important;
  }
}

/* ─────────────────────────────────────────────────────────-
   5.4 Step Nav: Under-gap (xs / md / lg)
   - Moves the entire step nav (brand-like "row offset")
   - Overrides .mb-4 utility from markup (Bootstrap utilities use !important)
   ───────────────────────────────────────────────────────── */
#wg-steps {
  margin-bottom: .1rem !important;   /* xs / mobile default ≈ mb-4 */
}

@media (min-width: 768px) { /* md / tablet */
  #wg-steps { margin-bottom: 1.75rem !important; }
}

@media (min-width: 992px) { /* lg / desktop */
  #wg-steps { margin-bottom: 2rem !important; }
}

/* ─────────────────────────────────────────────────────────-
   5.5 Header/Title gap harmonisation (wizard present or not)
   - When the step wizard is ABSENT, give the main container
     the same top margin the wizard would have provided.
   - When the wizard is PRESENT, remove that top margin to
     avoid double-spacing (the wizard supplies the gap).
   - Values mirror 5.4 (#wg-steps margin-bottom) per breakpoint.
   ───────────────────────────────────────────────────────── */

/* Default (xs / mobile): mirror 5.4's .1rem */
main > .container {
  margin-top: .1rem;
}

/* md / tablet: mirror 5.4's 1.75rem */
@media (min-width: 768px) {
  main > .container {
    margin-top: 1.75rem;
  }
}

/* lg / desktop: mirror 5.4's 2rem */
@media (min-width: 992px) {
  main > .container {
    margin-top: 2rem;
  }
}

/* When the wizard exists, zero the top margin (the wizard's
   own margin-bottom creates the gap). Uses :has() for clarity. */
body:has(#wg-steps) main > .container {
  margin-top: 0 !important;
}

/* Main page title (old h2 baseline → now h1) */
main > .container h1 {
  margin-top: 0;
  font-size: 1.5rem;    /* same as old h2 default */
  font-weight: 600;
}

/* Secondary headings (new h2) — slightly smaller than h1 */
main > .container h2 {
  margin-top: 0;         /* no extra gap */
  font-size: 1.22rem;    /* just under h1 for hierarchy */
  font-weight: 600;
}

/* ──────────────────────────────────────────────────────────
   6.x Heading & Button Controls (moved from base.html inline)
   --------------------------------------------------------------------------
   Purpose:
   - Ensure consistent heading row layout & button spacing
   - Control visibility of Draft Will preview button
   - Manage short/full label toggles (mirrors step_nav.html)
   -------------------------------------------------------------------------- */

/* Step-flow navigation baseline */
nav.step-flow-nav { min-height: 56px; }

/* Heading row and action buttons */
.wg-heading-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
}
.wg-heading-actions {
  display: flex;
  align-items: center;
  gap: .5rem;
  flex-wrap: wrap;
}
.wg-btn-icon {
  display: inline-flex;
  align-items: center;
  gap: .375rem;
}
.wg-btn-icon i {
  font-size: 1rem;
  line-height: 1;
}

/* Responsive main title size (mobile) */
@media (max-width: 576px) {
  .wg-heading-row h1 {
    font-size: 1.25rem; /* same as old h2 mobile size */
  }
}

/* Hide duplicate Draft Will launch button from will_modal macro */
button[data-bs-target="#wgDraftPreviewModal"]:not(.wg-btn-icon) {
  display: none !important;
}

/* Shared short/full label toggles (mirrors step_nav.html) */
.label-short { display: inline; }
.label-full  { display: none; }
@media (min-width: 576px) {
  .label-short { display: none !important; }
  .label-full  { display: inline !important; }
}


/* ==========================================================================
   6. Page-Specific Components & Modal/Icon Styling
   --------------------------------------------------------------------------
   Isolated needs: modal overlays, help icons, etc.
   ========================================================================== */

/* -----------------------------------------------------------------
   6.1 Help Modal Title (Draggable Overlay)
   Used for the header/title of the draggable help modal overlay.
   Add/remove .help-modal-title-lg via JS for page-specific modal title size.
   ----------------------------------------------------------------- */
.help-modal-title-lg {
  font-size: 2rem;      /* Large, prominent modal header */
  font-weight: 500;     /* Bolder for importance */
  letter-spacing: 0.01em;
  /* color: #263357;  Brand/primary color (adjust as needed) */
  line-height: 1.2;
}

/* Center Help Modal on mobile + tablet only (override draggable inline styles) */
@media (max-width: 991.98px) {
  #helpModal .modal-dialog {
    /* kill draggable inline positioning on small/medium */
    transform: none !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;

    /* apply Bootstrap-like centering */
    display: flex !important;
    align-items: center !important;
    min-height: calc(100% - var(--bs-modal-margin) * 2) !important;
    margin: var(--bs-modal-margin) auto !important;
  }
}

/* -----------------------------------------------------------------
   6.2 Help Icons: Used for tooltips and inline info (? i ! ✔ etc.)
   Base Help Icon: Use for all icons. Add modifiers for context/color.
   ----------------------------------------------------------------- */

/* Let \n in tooltip text show as real line breaks */
.tooltip-inner { white-space: pre-line; }

  
/* question-circle .input-help-icon-help */
.input-help-icon-help {
  color: #dc3545 !important;                /* Bootstrap Red: Help/Question */
  fill: currentColor !important;
  stroke: currentColor !important;
  font-size: 1.3rem !important;             /* ≈21px */
  font-weight: 200 !important;              /* Regular */
  position: relative;
  margin-left: 5px !important;
  transition: color 0.4s, transform 0.6s !important; /* Hover transition */
}
.input-help-icon-help:hover { color: #a71d2a !important; }

  /* info-circle .input-help-icon-info */
.input-help-icon-info {
  color: #adb5bd !important;                /* Muted info tone */
  font-size: 1.1rem !important;             /* ≈18px */
  font-weight: 200 !important;              /* Regular */
  vertical-align: middle !important;
  position: relative;
  top: -2px;
  margin-left: 2px !important;
  transition: color 0.4s, transform 0.6s !important;
}
.input-help-icon-info:hover { color: #495057 !important; }

/* question-circle .page-help-icon-help */
.page-help-icon-help {
  color: #dc3545 !important;                /* Bootstrap Red: Help/Question */
  fill: currentColor !important;
  stroke: currentColor !important;
  font-size: 1.6rem !important;             /* ≈25px */
  font-weight: 200 !important;              /* Regular */
  position: relative;
  top: -3px;
  margin-left: 4px !important;
  transition: color 0.4s, transform 0.6s !important;
}
.page-help-icon-help:hover { color: #a71d2a !important; }


/* ──────────────────────────────────────────────────────────
   6.x Estate — Total row visual separation (works with tables)
   ----------------------------------------------------------------- */

/* 🔧 Two knobs you can tweak anytime */
body[data-page="estate"] {
  --estate-total-gap: 1.6rem;          /* space ABOVE Total row (already used) */
  --estate-total-gap-below: 0.8rem;   /* NEW: space BELOW Total row */
  --estate-container-pad-btm: 1rem; /* NEW: space to wrapper bottom border */
}

/* Space ABOVE <tfoot> (you already have this) */
body[data-page="estate"] table.table tbody tr:last-child > td {
  padding-bottom: var(--estate-total-gap);
}

/* NEW: Space inside the Total row (adds room BELOW its content) */
body[data-page="estate"] table.table tfoot .wk-total-row > td {
  background-color: #f8f9fa !important;
  border-top: 2px solid #adb5bd !important;
  font-weight: 600;
  padding-top: 0.75rem;
  padding-bottom: var(--estate-total-gap-below); /* was 0.75rem */
}

/* Keep right-align for the last cell */
body[data-page="estate"] table.table tfoot .wk-total-row > td:last-child {
  text-align: right;
}

/* NEW: Extra breathing room between table bottom and bordered container */
body[data-page="estate"] .table-responsive {
  padding-bottom: var(--estate-container-pad-btm);
}

@media (max-width: 767.98px) {
  body[data-page="estate"] table.table tfoot .wk-total-row td:nth-child(2) {
    display: none;
  }
}


/* ──────────────────────────────────────────────────────────────
   8. Trust Conditions UX Harmonisation — Scoped
   NOTE: Kept at the very end intentionally so it overrides the
         earlier brand-blue hover/active for unified behaviour.
   ────────────────────────────────────────────────────────────── */

/* Visible focus ring on readonly faux-selects (incl. Stage/HEMS/...) */
.form-control.fuse-input[readonly]:focus {
  box-shadow: 0 0 0 .25rem rgba(var(--bs-primary-rgb), .25);
  border-color: var(--bs-primary);
}

/* Unify secondary/explainer text colour in rich dropdown rows */
.autocomplete-dropdown .dropdown-item.rich .small,
.autocomplete-dropdown .dropdown-item.rich small {
  color: var(--bs-secondary-color) !important; /* BS 5.3 token */
}

/* Single highlight behaviour: make hover and .active look the same;
   JS also clears .active on mouseenter to avoid two items lit at once */
.autocomplete-dropdown .dropdown-item:hover,
.autocomplete-dropdown .dropdown-item.active {
  background-color: var(--bs-primary-bg-subtle);
  color: inherit;
}
