/* Refactoring UI, Palette 7. Shared tokens and application presentation.
 * Keep this after ui.css: that file owns layout primitives and compatibility utilities.
 * Shade names match the supplied palette; semantic tokens describe their UI roles.
 */
:root {
  --cyan-050: #E0FCFF;
  --cyan-100: #BEF8FD;
  --cyan-200: #87EAF2;
  --cyan-300: #54D1DB;
  --cyan-400: #38BEC9;
  --cyan-500: #2CB1BC;
  --cyan-600: #14919B;
  --cyan-700: #0E7C86;
  --cyan-800: #0A6C74;
  --cyan-900: #044E54;
  --warm-grey-050: #FAF9F7;
  --warm-grey-100: #E8E6E1;
  --warm-grey-200: #D3CEC4;
  --warm-grey-300: #B8B2A7;
  --warm-grey-400: #A39E93;
  --warm-grey-500: #857F72;
  --warm-grey-600: #625D52;
  --warm-grey-700: #504A40;
  --warm-grey-800: #423D33;
  --warm-grey-900: #27241D;
  --blue-050: #DCEEFB;
  --blue-100: #B6E0FE;
  --blue-200: #84C5F4;
  --blue-300: #62B0E8;
  --blue-400: #4098D7;
  --blue-500: #2680C2;
  --blue-600: #186FAF;
  --blue-700: #0F609B;
  --blue-800: #0A558C;
  --blue-900: #003E6B;
  --red-050: #FFEEEE;
  --red-100: #FACDCD;
  --red-200: #F29B9B;
  --red-300: #E66A6A;
  --red-400: #D64545;
  --red-500: #BA2525;
  --red-600: #A61B1B;
  --red-700: #911111;
  --red-800: #780A0A;
  --red-900: #610404;
  --yellow-050: #FFFAEB;
  --yellow-100: #FCEFC7;
  --yellow-200: #F8E3A3;
  --yellow-300: #F9DA8B;
  --yellow-400: #F7D070;
  --yellow-500: #E9B949;
  --yellow-600: #C99A2E;
  --yellow-700: #A27C1A;
  --yellow-800: #7C5E10;
  --yellow-900: #513C06;
  --teal-050: #EFFCF6;
  --teal-100: #C6F7E2;
  --teal-200: #8EEDC7;
  --teal-300: #65D6AD;
  --teal-400: #3EBD93;
  --teal-500: #27AB83;
  --teal-600: #199473;
  --teal-700: #147D64;
  --teal-800: #0C6B58;
  --teal-900: #014D40;
  --canvas: var(--warm-grey-050);
  --surface: #fff;
  --ink: var(--warm-grey-900);
  --muted: var(--warm-grey-600);
  --line: var(--warm-grey-100);
  --control-border: var(--warm-grey-500);
  --primary: var(--cyan-800);
  --primary-hover: var(--cyan-900);
  --radius: .75rem;
  --shadow-sm: 0 1px 3px rgb(39 36 29 / 6%), 0 1px 2px rgb(39 36 29 / 4%);
  --shadow-lg: 0 12px 32px rgb(39 36 29 / 8%), 0 3px 8px rgb(39 36 29 / 5%);
  --space-1: .25rem;
  --space-2: .5rem;
  --space-3: .75rem;
  --space-4: 1rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --nav-height: 5rem;
}

/* Hierarchy comes from weight, contrast and space, not oversized headings. */
html { font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; line-height: 1.5; scroll-padding-top: 6rem; }
body { margin: 0; padding: var(--nav-height) 0 0; background: var(--canvas); color: var(--ink); font-family: inherit; line-height: 1.65; }
h1, h2, h3, h4, h5, h6, .h2, .h3, .h4, .h5, .h6 { color: var(--ink); font-weight: 650; line-height: 1.25; letter-spacing: -.025em; margin-bottom: var(--space-4); }
h1 { font-size: clamp(1.875rem, 3.5vw, 2.75rem); }
h2, .h2 { font-size: clamp(1.5rem, 2.5vw, 2rem); }
h3, .h3 { font-size: 1.5rem; }
h4, .h4 { font-size: 1.25rem; }
h5, .h5 { font-size: 1.125rem; }
h6, .h6 { font-size: 1rem; }
a { color: var(--primary); text-underline-offset: .2em; }
a:hover { color: var(--primary-hover); }
:focus-visible { outline: 3px solid var(--cyan-700); outline-offset: 3px; }
::selection { background: var(--cyan-100); color: var(--cyan-900); }
hr { margin: var(--space-8) 0; border-color: var(--line); }
.logo { display: block; background: url("/assets/logo/ingamix-fe5e896c.svg"); }
.container { max-width: 1200px; padding-inline: var(--space-6); }
#body-public { min-height: calc(100vh - var(--nav-height)); }
.header-adjustment { margin-top: 0; padding-block: var(--space-12); }
.section-heading, .page-heading { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-4); margin-bottom: var(--space-8); }
.section-heading h2, .page-heading h1 { margin: 0; }
.eyebrow { margin-bottom: var(--space-2); color: var(--primary); font-size: .75rem; font-weight: 750; letter-spacing: .12em; text-transform: uppercase; }
.page-intro { max-width: 65ch; margin: var(--space-3) 0 0; color: var(--muted); }
.panel { padding: clamp(1.25rem, 3vw, 2rem); border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow-sm); }
.empty-state { padding: var(--space-12) var(--space-6); text-align: center; background: var(--surface); border: 1px dashed var(--warm-grey-300); border-radius: var(--radius); }
.empty-state p { color: var(--muted); }
.quick-ad-page { max-width: 960px; }
.quick-ad-bot-field { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* Quiet navigation leaves the content and primary action in charge. */
.public-nav, .dashboard-nav { min-height: var(--nav-height); padding: var(--space-4) max(1.5rem, calc((100vw - 1200px) / 2 + 1.5rem)); background: var(--surface); border-bottom: 1px solid var(--line); box-shadow: var(--shadow-sm); gap: var(--space-6); }
.brand { display: inline-flex; align-items: center; flex-shrink: 0; }
.brand img { width: 151px; height: 40px; }
.public-nav { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); column-gap: var(--space-4); }
.public-nav > .brand { grid-column: 2; grid-row: 1; justify-self: center; }
.public-nav > .navbar-toggler { grid-column: 3; grid-row: 1; justify-self: end; }
.public-nav > .navbar-collapse { grid-column: 1 / -1; }
.public-nav > .public-nav-quick-ad { display: none; }
.navbar .nav-link { border-radius: .5rem; color: var(--muted); font-size: .9375rem; font-weight: 600; padding: .625rem .75rem; }
.navbar .nav-link:hover, .sidebar .nav-link:hover { background: var(--canvas); color: var(--primary); text-decoration: none; }
.navbar .nav-link[aria-current="page"], .sidebar .nav-link[aria-current="page"] { background: var(--cyan-050); color: var(--cyan-900); }
.navbar-nav { gap: var(--space-1); margin-top: 0; }
.navbar-collapse { gap: var(--space-4); }
.navbar-toggler { min-width: 44px; min-height: 44px; color: var(--ink); border-color: var(--control-border); border-radius: .5rem; }
.dropdown-menu { min-width: 13rem; padding: var(--space-2); border-color: var(--line); border-radius: var(--radius); box-shadow: var(--shadow-lg); }
.dropdown-menu .nav-link { white-space: nowrap; }
.skip-link { position: fixed; top: .5rem; left: .5rem; z-index: 1200; padding: .75rem 1rem; transform: translateY(-150%); border-radius: .5rem; background: var(--surface); box-shadow: var(--shadow-lg); }
.skip-link:focus { transform: translateY(0); }

/* Photo-first search: consistent overlay contrast, with a raised search surface. */
#home-banner .jumbotron { display: flex; align-items: center; min-height: 490px; height: auto; margin: 0 0 var(--space-16); padding: var(--space-16) 0; border-radius: 0; background: linear-gradient(90deg, rgb(39 36 29 / 88%), rgb(39 36 29 / 65%) 45%, rgb(39 36 29 / 15%)), url("/assets/banners/warm-modern-house-sunset-caa1949d.webp") center / cover; background-size: cover; color: #fff; }
#home-banner .jumbotron h1 { max-width: 18ch; margin: 0 0 var(--space-6); color: #fff; font-size: clamp(2.25rem, 5vw, 4rem); text-align: left; text-shadow: none; letter-spacing: -.04em; }
#home-banner .jumbotron .eyebrow { color: var(--cyan-100); text-align: left; text-shadow: none; }
#home-banner .jumbotron .hero-description { max-width: 48ch; margin-bottom: var(--space-8); color: var(--cyan-050); font-size: 1.125rem; text-align: left; text-shadow: none; }
.search-panel { padding: var(--space-6); border-radius: 1rem; background: var(--surface); color: var(--ink); box-shadow: var(--shadow-lg); }
.search-panel-footer { display: flex; justify-content: flex-end; margin-top: var(--space-4); font-size: .875rem; font-weight: 600; }
#search-boxes { margin: 0; padding: 0; }
#search-boxes .input-group { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 2fr); gap: var(--space-4); align-items: end; }
#search-boxes label { display: block; color: var(--muted); font-size: .8125rem; font-weight: 650; }
#search-boxes select, #search-boxes .search-box { appearance: auto; width: 100%; min-width: 0; min-height: 48px; padding: .625rem .75rem; border: 1px solid var(--control-border); border-radius: .5rem; color: var(--ink); background: var(--surface); font-size: 1rem; line-height: 1.5; }
#search-boxes select:focus-visible, #search-boxes .search-box:focus-visible { outline: 3px solid var(--cyan-700); outline-offset: 2px; }
#search-boxes turbo-frame:not(:empty) { display: block; max-height: 20rem; overflow-y: auto; margin-top: var(--space-4); padding: var(--space-4); background: var(--canvas); border-radius: .5rem; }
.search-result { color: var(--ink); font-size: .9375rem; }
.search-result mark { padding: .0625rem .125rem; border-radius: .1875rem; background: var(--cyan-100); color: var(--cyan-900); font-weight: 700; }
#latest-properties { margin-bottom: var(--space-16); }
.advice-section { padding-block: var(--space-12) var(--space-16); }
.advice-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-6); }
.advice-card { display: flex; flex-direction: column; align-items: flex-start; padding: var(--space-8); border-top: 3px solid var(--cyan-600); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow-sm); }
.advice-card p { color: var(--muted); }
.advice-card a { margin-top: auto; font-weight: 650; }

/* Cards: let photographs and price establish hierarchy; no fixed text heights. */
.property.border { display: flex; flex-direction: column; height: 100%; overflow: hidden; border: 1px solid var(--line) !important; border-radius: 1rem; background: var(--surface); box-shadow: var(--shadow-sm); transition: box-shadow .15s ease; }
.property.border:hover { box-shadow: var(--shadow-lg); }
.property-thumb, .property-thumb-static { position: relative; height: 230px; border-radius: 0; background-color: var(--warm-grey-100); }
.property-thumb-static { background-size: contain; }
.property-thumb a, .property-thumb-static a { border-radius: 1rem 1rem 0 0; }
.property-thumb a:focus-visible, .property-thumb-static a:focus-visible { outline-offset: -4px; }
.property-summary { display: flex; flex: 1; flex-direction: column; height: auto; padding: var(--space-6) !important; }
.property-title { margin-bottom: var(--space-2); font-size: 1rem; letter-spacing: 0; }
.property-title a { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.property-price { margin-bottom: var(--space-1); font-size: 1.5rem; font-weight: 750; color: var(--cyan-900); font-variant-numeric: tabular-nums; }
.property-unit-price { font-size: .8125rem; }
.property-address { margin: var(--space-4) 0; color: var(--muted); font-size: .9375rem; }
.property-facts { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: auto; padding-top: var(--space-4); border-top: 1px solid var(--line); font-size: .8125rem; font-weight: 600; }
.property-facts .icon { color: var(--muted); }
.property-main-photo, .profile-cover-photo { margin: 0 0 var(--space-8); height: clamp(260px, 45vw, 580px); background-color: var(--warm-grey-100); }
.carousel .carousel-item { margin: 0; height: 100%; }
.carousel-control-prev-icon, .carousel-control-next-icon { width: 48px; height: 48px; border-radius: 50%; background: rgb(39 36 29 / 70%); font-size: 2.5rem; }
.property-content { padding-block: var(--space-4) var(--space-12); }
.listing-freshness { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3) var(--space-6); margin-bottom: var(--space-8); color: var(--muted); font-size: .8125rem; }
.agent-panel { padding: var(--space-6); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-sm); }
iframe { max-width: 100%; border-radius: var(--radius); }
.trix-content { line-height: 1.75; overflow-wrap: anywhere; }
body#static_pages article.container { max-width: 800px; padding-bottom: var(--space-12); }
body#static_pages article li { margin-bottom: var(--space-3); }
body#static_pages article h4 { text-align: left !important; }
.jumbotron { background: var(--cyan-050); border-radius: var(--radius); }
.display-4 { font-size: clamp(2rem, 4vw, 3rem); font-weight: 650; }

/* Forms use stronger control boundaries than decorative dividers. */
label { margin-bottom: var(--space-2); font-size: .875rem; font-weight: 600; color: var(--warm-grey-700); }
.form-control, .form-select { min-height: 44px; height: auto; padding: .625rem .75rem; border: 1px solid var(--control-border); border-radius: .5rem; background: var(--surface); color: var(--ink); font-size: 1rem; }
.form-control:focus, .form-select:focus { border-color: var(--primary); outline: 2px solid var(--primary); outline-offset: 1px; box-shadow: none; }
.form-control::placeholder { color: var(--muted); opacity: 1; }
.form-control:disabled, .form-control[readonly] { background: var(--warm-grey-100); color: var(--muted); }
input[type="checkbox"], input[type="radio"] { accent-color: var(--primary); width: 1.1em; height: 1.1em; }
input[type="checkbox"].form-control { min-height: 0; padding: 0; margin-top: var(--space-2); }
input[type="file"] { max-width: 100%; font-size: .875rem; }
input[type="file"]::file-selector-button { padding: .625rem .75rem; margin-right: var(--space-3); border: 1px solid var(--control-border); border-radius: .5rem; background: var(--canvas); color: var(--ink); font: inherit; cursor: pointer; }
.form-group { margin-bottom: var(--space-6); }
.search-select select { height: auto; border: 1px solid var(--control-border); }
/* Inset chevrons for native fallbacks too. Never let the picker size the field.
 * Customizable selects retain browser keyboard, validation and form behavior.
 */
select:not([multiple]):not([size]), #search-boxes select {
  appearance: none;
  width: 100%;
  min-width: 0;
  padding-right: 3rem;
  background-image: url("/assets/icons/chevron-down-e841fb1f.svg");
  background-repeat: no-repeat;
  background-position: right .875rem center;
  background-size: 1.25rem;
  cursor: pointer;
}
select option { background: var(--surface); color: var(--ink); }
select option:checked { background: var(--cyan-050); color: var(--cyan-900); }
@supports (appearance: base-select) {
  select:not([multiple]):not([size]), #search-boxes select, ::picker(select) { appearance: base-select; }
  select::picker-icon { display: none; }
  ::picker(select) {
    margin-top: var(--space-2);
    padding: var(--space-2);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--surface);
    color: var(--ink);
    box-shadow: var(--shadow-lg);
    max-height: min(20rem, 60dvh);
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  select option {
    padding: .625rem .75rem;
    border-radius: .375rem;
    font: inherit;
    line-height: 1.5;
    white-space: normal;
    overflow-wrap: anywhere;
  }
  select option:hover, select option:focus-visible { background: var(--cyan-050); color: var(--cyan-900); outline: none; }
  select option:checked { background: var(--cyan-050); color: var(--cyan-900); font-weight: 650; }
  select option::checkmark { color: var(--primary); }
  select:open { border-color: var(--primary); }
}
.editor-panel { padding: clamp(1rem, 3vw, 2rem); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-sm); }
.editor-panel h5 { margin-top: var(--space-8); text-align: left !important; }
.editor-panel .text-success { color: var(--warm-grey-700) !important; }
.editor-panel .menu-highlight { font-size: .875rem; }
.form-auth { width: calc(100% - 2rem); max-width: 440px; margin: var(--space-12) auto; padding: clamp(1.5rem, 4vw, 2.5rem); border: 1px solid var(--line); border-top: 4px solid var(--cyan-600); border-radius: 1rem; background: var(--surface); box-shadow: var(--shadow-lg); }
.form-auth h1 { font-weight: 650 !important; }
.form-auth .form-control, .form-auth input.form-control { padding: .75rem; margin-bottom: var(--space-4); border-radius: .5rem; }
.form-auth .btn-block { margin-bottom: var(--space-6); }
.form-auth .checkbox { text-align: left; }
.form-auth > a { display: inline-block; margin-top: var(--space-2); font-size: .875rem; }
.field_with_errors .form-control { border-color: var(--red-500); }
.validation-errors, #error_explanation { padding: var(--space-4); margin-bottom: var(--space-6); border-left: 4px solid var(--red-500); border-radius: .5rem; background: var(--red-050); color: var(--red-800); }
#error_explanation h2 { font-size: 1.125rem; }

/* Primary is cyan; success remains a semantic status, not the default CTA. */
.btn { padding: .625rem 1rem; border-radius: .5rem; font-size: .9375rem; font-weight: 650; line-height: 1.5; transition: background-color .15s ease, box-shadow .15s ease; }
.btn:hover { filter: none; }
.btn-sm { padding: .375rem .75rem; font-size: .8125rem; }
.btn-lg { padding: .75rem 1.25rem; font-size: 1rem; }
.btn-primary, .btn-dark { color: #fff; background: var(--primary); border-color: var(--primary); box-shadow: var(--shadow-sm); }
.btn-primary:hover, .btn-dark:hover { color: #fff; background: var(--primary-hover); border-color: var(--primary-hover); }
.btn-secondary, .btn-outline-secondary { color: var(--warm-grey-700); background: var(--surface); border-color: var(--control-border); }
.btn-secondary:hover, .btn-outline-secondary:hover { color: var(--ink); background: var(--warm-grey-100); }
.btn-success { color: #fff; background: var(--teal-800); border-color: var(--teal-800); }
.btn-success:hover { color: #fff; background: var(--teal-900); }
.btn-warning { color: var(--yellow-900); background: var(--yellow-200); border-color: var(--yellow-600); }
.btn-warning:hover { color: var(--yellow-900); background: var(--yellow-300); }
.btn-outline-info { color: var(--primary); border-color: var(--primary); background: var(--surface); }
.btn-outline-info:hover { color: var(--cyan-900); background: var(--cyan-050); }

/* Dashboard: fixed-width sidebar and a flexible, bounded workspace. */
.admin-nav { margin: 0; }
.dashboard-nav { padding-inline: var(--space-6); }
.dashboard-nav .workspace-label { padding-left: var(--space-6); border-left: 1px solid var(--line); color: var(--muted); font-size: .875rem; }
.dashboard-shell { display: flex; }
.show-sidebar .sidebar { position: fixed; top: var(--nav-height); bottom: 0; width: 248px; padding: var(--space-6) var(--space-4); background: var(--surface); border-right: 1px solid var(--line); box-shadow: none; }
.show-sidebar .sidebar-sticky { position: static; height: 100%; padding: 0; overflow-y: auto; }
.show-sidebar .sidebar .nav { gap: var(--space-2); }
.show-sidebar .sidebar .nav-link { display: flex; align-items: center; gap: var(--space-3); padding: .625rem .75rem; border-radius: .5rem; color: var(--muted); font-size: .875rem; font-weight: 600; }
.show-sidebar .sidebar .nav-link[aria-current="page"] { color: var(--cyan-900); }
.sidebar .btn { display: block; margin: var(--space-2) 0 var(--space-4); }
.show-sidebar .sidebar-heading { margin: var(--space-8) var(--space-3) var(--space-3); color: var(--muted); font-size: .6875rem; font-weight: 750; letter-spacing: .1em; text-transform: uppercase; }
.sidebar-account { padding: var(--space-2) var(--space-3) var(--space-4); overflow-wrap: anywhere; }
.sidebar-account strong { display: block; font-size: .9375rem; }
.sidebar-account small { color: var(--muted); }
.dashboard-main { width: calc(100% - 248px); max-width: 1500px; min-width: 0; margin-left: 248px; padding: var(--space-8) clamp(1rem, 3vw, 3rem) var(--space-16); }
.dashboard-main > h1, .dashboard-main > h2, .dashboard-main > h3 { margin-bottom: var(--space-6); }
.stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: var(--space-6); margin-bottom: var(--space-8); }
.stat-card { padding: var(--space-6); border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow-sm); }
.stat-card p { margin-bottom: var(--space-2); color: var(--muted); font-size: .875rem; }
.stat-value { display: block; color: var(--cyan-900); font-size: 2.25rem; font-weight: 700; line-height: 1.2; font-variant-numeric: tabular-nums; }
.table-scroll { overflow-x: auto; margin-bottom: var(--space-6); border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow-sm); }
.table-scroll .table { margin-bottom: 0; }
.table { background: var(--surface); color: var(--ink); font-size: .875rem; }
.table th, .table td { padding: var(--space-4) var(--space-6); border-color: var(--line); vertical-align: middle; }
.table th { background: var(--canvas); color: var(--muted); font-size: .75rem; font-weight: 650; text-align: left; }
.table thead th { border-bottom: 1px solid var(--line); }
.table-striped tbody tr:nth-of-type(odd) { background: var(--surface); }
.table-striped tbody tr:nth-of-type(even) { background: var(--canvas); }
.table td small { color: var(--muted); }
.table-actions { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; }
.status { display: inline-flex; padding: .125rem .625rem; border-radius: 2rem; font-size: .75rem; font-weight: 650; white-space: nowrap; }
.status--success { color: var(--teal-900); background: var(--teal-100); }
.status--warning { color: var(--yellow-900); background: var(--yellow-100); }
.status--error { color: var(--red-800); background: var(--red-050); }
.status--neutral { color: var(--warm-grey-700); background: var(--warm-grey-100); }
.account-list .row { margin: 0; padding-block: var(--space-6); row-gap: var(--space-4); overflow-wrap: anywhere; }
.pagination { gap: var(--space-2); }
.pagination a, .pagination span, .pagination em { border-color: var(--line); border-radius: .5rem; background: var(--surface); color: var(--primary); }
.pagination .current { background: var(--primary); color: #fff; border-color: var(--primary); }
.pagination .disabled { color: var(--muted); }

/* Semantic feedback uses tinted surfaces and readable dark text. */
.notification { background: var(--blue-050); color: var(--blue-900); border: 1px solid var(--blue-100); border-left: 4px solid var(--blue-700); border-radius: var(--radius); box-shadow: var(--shadow-lg); }
.notification--success { background: var(--teal-050); color: var(--teal-900); border-color: var(--teal-100); border-left-color: var(--teal-700); }
.notification--error { background: var(--red-050); color: var(--red-900); border-color: var(--red-100); border-left-color: var(--red-500); }
.notification--warning { background: var(--yellow-050); color: var(--yellow-900); border-color: var(--yellow-200); border-left-color: var(--yellow-700); }
.contact-dialog { border-radius: 1rem; color: var(--ink); box-shadow: var(--shadow-lg); }
.contact-dialog::backdrop { background: rgb(39 36 29 / 60%); }
.modal-header, .modal-footer { padding: var(--space-6); border-color: var(--line); }
.modal-body { padding: var(--space-6); }
.site-footer { margin-top: var(--space-12); padding: var(--space-12) 0; border-top: 1px solid var(--line); background: var(--warm-grey-900); color: var(--warm-grey-100); }
.footer-layout { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-8); }
.footer-brand { font-size: 1.5rem; font-weight: 750; color: #fff; }
.footer-copy { max-width: 30ch; margin-top: var(--space-2); color: var(--warm-grey-200); font-size: .875rem; }
.footer-links { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3) var(--space-8); align-content: start; }
.site-footer a { color: var(--warm-grey-100); font-size: .875rem; }
.site-footer .social { margin-top: var(--space-4); }
.cookies-bar { position: sticky; bottom: 0; z-index: 1010; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--space-3); width: 100%; padding: var(--space-4) var(--space-6); border-top: 1px solid var(--line); background: var(--surface); color: var(--muted); box-shadow: 0 -4px 16px rgb(39 36 29 / 6%); font-size: .875rem; }
.cookies-bar p { margin: 0 var(--space-4) 0 0; }
.cookies-bar .accept { color: #fff; background: var(--primary); border-color: var(--primary); }
.cookies-bar .accept:hover { color: #fff; background: var(--primary-hover); }
.cookies-bar .reject { color: var(--muted); border-color: var(--control-border); }
.cookies-bar .reject:hover { color: var(--ink); background: var(--canvas); }
.debug_dump { width: auto; max-width: 100%; margin: var(--space-8) var(--space-4); padding: var(--space-4); overflow: auto; font-size: .75rem; color: var(--muted); }

/* Compatibility names share the same palette as the new components. */
.text-muted { color: var(--muted) !important; }
.text-dark { color: var(--ink) !important; }
.text-success { color: var(--teal-800) !important; }
.text-danger { color: var(--red-600) !important; }
.text-primary, .text-orange { color: var(--primary) !important; }
.link-orange:link, .link-orange:visited { color: var(--primary); }
.link-orange:hover, .link-orange:active { color: var(--primary-hover); }
.bg-light { background: var(--canvas) !important; }
.bg-dark { background: var(--warm-grey-900) !important; }
.border, .border-top, .border-bottom { border-color: var(--line) !important; }
.shadow { box-shadow: var(--shadow-lg) !important; }

@media (min-width: 768px) {
  .navbar-expand-md .navbar-nav { align-items: center; }
  .public-nav > .navbar-collapse { display: contents !important; }
  .public-nav .navbar-collapse > .navbar-nav { flex-wrap: nowrap; }
  .public-nav .navbar-collapse > .navbar-nav:first-child { grid-column: 1; grid-row: 1; justify-self: start; }
  .public-nav .navbar-collapse > .navbar-nav:last-child { grid-column: 3; grid-row: 1; justify-self: end; }
}
@media (max-width: 1000px) and (min-width: 768px) {
  .public-nav { gap: var(--space-3); padding-inline: var(--space-4); }
  .public-nav .brand img { width: 120px; height: auto; }
  .public-nav .nav-link { padding-inline: .375rem; font-size: .8125rem; }
  .public-nav .btn { font-size: .8125rem; padding-inline: .5rem; }
}
@media (max-width: 767.98px) {
  :root { --nav-height: 4.5rem; }
  .container { padding-inline: var(--space-4); }
  .public-nav, .dashboard-nav { padding: var(--space-4); gap: 0; max-height: 100dvh; overflow-y: auto; }
  .navbar-collapse { padding-top: var(--space-4); }
  .navbar-nav { gap: var(--space-2); }
  .navbar .nav-link { padding: .75rem; }
  .navbar .btn { margin-block: var(--space-2); }
  .public-nav > .public-nav-quick-ad { display: inline-flex; grid-column: 1; grid-row: 1; justify-self: start; align-items: center; min-height: 44px; margin: 0; padding-inline: .5rem; font-size: .75rem; white-space: nowrap; }
  .public-nav .public-nav-quick-ad-desktop { display: none; }
  .public-nav .brand img { width: 120px; height: auto; }
  .navbar .dropdown-menu { box-shadow: none; }
  #home-banner .jumbotron { padding: var(--space-12) 0; min-height: 0; margin-bottom: var(--space-12); }
  .search-panel { padding: var(--space-4); }
  #search-boxes .input-group { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); }
  #search-boxes .search-location { grid-column: 1 / -1; }
  .advice-grid { grid-template-columns: 1fr; }
  .advice-card { padding: var(--space-6); }
  .show-sidebar .sidebar { display: none; }
  .dashboard-main { width: 100%; margin: 0; padding: var(--space-6) var(--space-4) var(--space-12); }
  .dashboard-nav .workspace-label { display: none; }
  .page-heading, .section-heading { margin-bottom: var(--space-6); }
  .property-thumb, .property-thumb-static { height: 220px; }
  .footer-links { gap: var(--space-3) var(--space-6); }
  .cookies-bar { justify-content: flex-start; padding: var(--space-3) var(--space-4); }
  .cookies-bar p { flex-basis: 100%; font-size: .8125rem; }
}
@media (max-width: 359.98px) {
  .public-nav { padding-inline: .5rem; }
  .public-nav .brand img { width: 90px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; animation: none !important; }
}