/* Stop mobile browsers from auto-inflating text on pages that have wide
   content (tables, long rows). Without this, the same navbar looked
   slightly different from one page to the next on phones. */
html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}


/* =========================================================
   MITTIMMO - MODERN PROPERTY MANAGEMENT UI
   Global stylesheet
   Bootstrap 5 compatible
   ========================================================= */


/* =========================================================
   1. DESIGN SYSTEM
   ========================================================= */

:root {
    /* Brand -- identite Vert Horizon */
    --primary-color: #087F5B;      /* Vert Horizon (signature) */
    --primary-dark: #07543F;       /* Vert Foret */
    --primary-soft: rgba(8, 127, 91, 0.08);
    --primary-soft-strong: #E8F0EB; /* Sauge tres clair */
    --accent-color: #D9B77A;       /* Sable -- accent chaud */
    --accent-soft: rgba(217, 183, 122, 0.16);

    /* Bootstrap / semantic colors */
    --secondary-color: #5B6B64;
    --success-color: #087F5B;
    --danger-color: #C83E4D;
    --danger-soft: rgba(200, 62, 77, 0.1);
    --warning-color: #D9B77A;
    --info-color: #07543F;

    /* Surfaces */
    --light-color: #F7F8F4;
    --body-bg: #F7F8F4;            /* Ivoire */
    --surface-color: #ffffff;
    --surface-alt: #E8F0EB;        /* Sauge tres clair */
    --dark-color: #17211E;         /* Anthracite */

    /* Text */
    --text-color: #17211E;         /* Anthracite */
    --text-muted: #5B6B64;
    --text-light: #94A39C;

    /* Borders */
    --border-color: #DCE3DE;
    --border-light: #E8F0EB;

    /* Typography */
    --font-heading: "Manrope", "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    --font-body: "Inter", "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;

    /* Radius */
    --radius-xs: 6px;
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-xl: 20px;
    --radius-pill: 999px;

    /* Shadows */
    --shadow-xs: 0 1px 3px rgba(23, 33, 30, 0.05);
    --shadow-sm: 0 2px 8px rgba(23, 33, 30, 0.06);
    --shadow-md: 0 6px 18px rgba(23, 33, 30, 0.09);
    --shadow-lg: 0 12px 30px rgba(23, 33, 30, 0.13);

    /* Animation */
    --transition-fast: 0.15s ease;
    --transition: 0.2s ease;
    --transition-slow: 0.3s ease;

    /* Layout */
    --content-max-width: 1400px;
}


/* =========================================================
   1bis. BOOTSTRAP BRAND OVERRIDE
   Remappe les variables natives de Bootstrap 5.3 sur la
   charte Vert Horizon pour que TOUTES les classes utilitaires
   (bg-primary, text-primary, badge bg-success, etc.) et les
   pages non encore retravaillees restent coherentes avec la
   marque, sans devoir reecrire chaque template.
   ========================================================= */

:root {
    --bs-font-sans-serif: "Inter", "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    --bs-body-font-family: var(--bs-font-sans-serif);
    --bs-body-color: #17211E;
    --bs-body-bg: #F7F8F4;
    --bs-border-color: #DCE3DE;
    --bs-border-color-translucent: rgba(23, 33, 30, 0.1);

    --bs-primary: #087F5B;
    --bs-primary-rgb: 8, 127, 91;
    --bs-primary-text-emphasis: #07543F;
    --bs-primary-bg-subtle: #E8F0EB;
    --bs-primary-border-subtle: #bfe0d3;

    --bs-secondary: #5B6B64;
    --bs-secondary-rgb: 91, 107, 100;

    --bs-success: #087F5B;
    --bs-success-rgb: 8, 127, 91;
    --bs-success-text-emphasis: #07543F;
    --bs-success-bg-subtle: #E8F0EB;
    --bs-success-border-subtle: #bfe0d3;

    --bs-danger: #C83E4D;
    --bs-danger-rgb: 200, 62, 77;
    --bs-danger-text-emphasis: #8f2530;
    --bs-danger-bg-subtle: #f8dee1;
    --bs-danger-border-subtle: #f0b7bd;

    --bs-warning: #D9B77A;
    --bs-warning-rgb: 217, 183, 122;
    --bs-warning-text-emphasis: #6d5527;
    --bs-warning-bg-subtle: #f6ecda;
    --bs-warning-border-subtle: #ecd8ae;

    --bs-info: #07543F;
    --bs-info-rgb: 7, 84, 63;

    --bs-light: #F7F8F4;
    --bs-light-rgb: 247, 248, 244;
    --bs-dark: #17211E;
    --bs-dark-rgb: 23, 33, 30;

    --bs-link-color: #087F5B;
    --bs-link-color-rgb: 8, 127, 91;
    --bs-link-hover-color: #07543F;
    --bs-link-hover-color-rgb: 7, 84, 63;
}

.btn-primary {
    --bs-btn-color: #fff;
    --bs-btn-bg: #087F5B;
    --bs-btn-border-color: #087F5B;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #07543F;
    --bs-btn-hover-border-color: #07543F;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #07543F;
    --bs-btn-active-border-color: #07543F;
    --bs-btn-disabled-bg: #087F5B;
    --bs-btn-disabled-border-color: #087F5B;
    --bs-btn-focus-shadow-rgb: 8, 127, 91;
}

.btn-outline-primary {
    --bs-btn-color: #087F5B;
    --bs-btn-border-color: #087F5B;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #087F5B;
    --bs-btn-hover-border-color: #087F5B;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #087F5B;
    --bs-btn-active-border-color: #087F5B;
    --bs-btn-disabled-color: #087F5B;
    --bs-btn-disabled-border-color: #087F5B;
    --bs-gradient: none;
    --bs-btn-focus-shadow-rgb: 8, 127, 91;
}

.btn-success {
    --bs-btn-bg: #087F5B;
    --bs-btn-border-color: #087F5B;
    --bs-btn-hover-bg: #07543F;
    --bs-btn-hover-border-color: #07543F;
    --bs-btn-active-bg: #07543F;
    --bs-btn-active-border-color: #07543F;
}

/* .btn-outline-primary above already carries the brand green for
   outline buttons; .btn-outline-danger/.btn-outline-success were
   previously left on Bootstrap's stock red/green (not overridden like
   every other .btn-* variant here), so any "Deactivate"/"Activate" (or
   similar) outline button rendered a slightly-off color that didn't
   match the rest of the design system. Same --bs-btn-* pattern as
   .btn-outline-primary, just pointed at the danger/success brand
   colors instead. */
.btn-outline-danger {
    --bs-btn-color: #C83E4D;
    --bs-btn-border-color: #C83E4D;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #C83E4D;
    --bs-btn-hover-border-color: #C83E4D;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #C83E4D;
    --bs-btn-active-border-color: #C83E4D;
    --bs-btn-disabled-color: #C83E4D;
    --bs-btn-disabled-border-color: #C83E4D;
    --bs-gradient: none;
    --bs-btn-focus-shadow-rgb: 200, 62, 77;
}

.btn-outline-success {
    --bs-btn-color: #087F5B;
    --bs-btn-border-color: #087F5B;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #087F5B;
    --bs-btn-hover-border-color: #087F5B;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #087F5B;
    --bs-btn-active-border-color: #087F5B;
    --bs-btn-disabled-color: #087F5B;
    --bs-btn-disabled-border-color: #087F5B;
    --bs-gradient: none;
    --bs-btn-focus-shadow-rgb: 8, 127, 91;
}

.btn-danger {
    --bs-btn-bg: #C83E4D;
    --bs-btn-border-color: #C83E4D;
    --bs-btn-hover-bg: #a5303d;
    --bs-btn-hover-border-color: #a5303d;
    --bs-btn-active-bg: #a5303d;
    --bs-btn-active-border-color: #a5303d;
}

.btn-warning {
    --bs-btn-color: #17211E;
    --bs-btn-bg: #D9B77A;
    --bs-btn-border-color: #D9B77A;
    --bs-btn-hover-color: #17211E;
    --bs-btn-hover-bg: #cba360;
    --bs-btn-hover-border-color: #cba360;
    --bs-btn-active-color: #17211E;
}

/* Un bouton "neutre" -- 3e niveau du systeme de boutons de la charte */
.btn-neutral {
    --bs-btn-color: #17211E;
    --bs-btn-bg: #F7F8F4;
    --bs-btn-border-color: #DCE3DE;
    --bs-btn-hover-color: #17211E;
    --bs-btn-hover-bg: #E8F0EB;
    --bs-btn-hover-border-color: #DCE3DE;
    --bs-btn-active-bg: #E8F0EB;
}

.form-check-input:checked {
    background-color: #087F5B;
    border-color: #087F5B;
}

.form-check-input:focus {
    border-color: #087F5B;
    box-shadow: 0 0 0 0.2rem rgba(8, 127, 91, 0.15);
}

.dropdown-item.active,
.dropdown-item:active {
    background-color: var(--primary-soft-strong);
    color: var(--primary-dark);
}

.page-link {
    color: var(--primary-color);
}

.page-item.active .page-link {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
}

::selection {
    background: var(--primary-soft-strong);
    color: var(--primary-dark);
}


/* =========================================================
   2. GLOBAL
   ========================================================= */

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    padding: 0;
    min-height: 100vh;

    font-family: var(--font-body);
    font-size: 0.9rem;
    line-height: 1.6;

    color: var(--text-color);
    background-color: var(--body-bg);

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

main {
    min-height: 60vh;
}

img {
    max-width: 100%;
}

a {
    transition:
        color var(--transition),
        opacity var(--transition);
}

button,
input,
select,
textarea {
    font-family: inherit;
}


/* =========================================================
   3. TYPOGRAPHY
   ========================================================= */

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--font-heading);
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.01em;
    color: var(--text-color);
}

h1 {
    font-size: 2rem;
}

h2 {
    font-size: 1.75rem;
}

h3 {
    font-size: 1.5rem;
}

h4 {
    font-size: 1.25rem;
}

h5 {
    font-size: 0.9rem;
}

h6 {
    font-size: 0.85rem;
}

/*
 * Do not use h7, h8, h9, etc.
 * HTML supports only h1 through h6.
 *
 * Use these classes instead when smaller text is needed.
 */

.text-label {
    font-size: 0.8rem;
    font-weight: 500;
    line-height: 1.2;
}

.text-xs {
    font-size: 0.7rem !important;
}

.text-sm {
    font-size: 0.8rem !important;
}

.text-md {
    font-size: 0.9rem !important;
}

.text-title {
    font-size: 1.1rem;
    font-weight: 600;
}

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

.text-justify-custom {
    text-align: justify;
}

.paragraph-spacing {
    margin-bottom: 1.5rem;
    line-height: 1.6;
}


/* =========================================================
   4. TOP CONTACT BAR
   ========================================================= */

.topbar {
    font-size: 0.8rem;
    background-color: #F7F8F4;
    border-bottom: 1px solid var(--border-color);
}

.topbar a {
    color: #495057 !important;
    text-decoration: none;
}

.topbar a:hover {
    color: var(--primary-color) !important;
}

.topbar i {
    font-size: 1rem;
}


/* =========================================================
   5. NAVBAR
   ========================================================= */

.navbar {
    background: rgba(255, 255, 255, 0.97) !important;

    box-shadow: var(--shadow-sm);

    padding: 0.7rem 1rem;

    z-index: 1030;

    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.navbar-brand {
    color: var(--primary-color) !important;
    font-weight: 700;
    font-size: 1.35rem;
    letter-spacing: -0.02em;
}

.navbar-brand i {
    margin-right: 0.25rem;
}

.navbar .nav-link {
    color: #495057;
    font-size: 0.88rem;
    font-weight: 500;

    padding: 0.5rem 0.75rem;

    border-radius: var(--radius-sm);

    transition:
        color var(--transition),
        background-color var(--transition);
}

.navbar .nav-link:hover {
    color: var(--primary-color);
    background-color: var(--primary-soft);
}

.navbar .nav-link.active {
    color: var(--primary-color);
    background-color: var(--primary-soft);
}

.navbar-toggler {
    border: 0;
    padding: 0.4rem 0.5rem;
}

.navbar-toggler:focus {
    box-shadow: 0 0 0 0.15rem rgba(13, 110, 253, 0.15);
}


/* Language switcher */

.nav-pills .nav-link {
    color: #6c757d;
    font-size: 0.75rem;
    padding: 0.35rem 0.65rem;
}

.nav-pills .nav-link.active {
    background-color: var(--primary-color);
    color: #fff;
}


/* Navbar dropdown */

.navbar .dropdown-menu {
    margin-top: 0.5rem;

    border: 0;
    border-radius: var(--radius-md);

    padding: 0.45rem;

    box-shadow: var(--shadow-lg);
}

.navbar .dropdown-item {
    border-radius: var(--radius-sm);

    padding: 0.55rem 0.75rem;

    font-size: 0.85rem;
    font-weight: 500;

    transition:
        background-color var(--transition),
        color var(--transition);
}

.navbar .dropdown-item:hover,
.navbar .dropdown-item:focus {
    background-color: #f1f5f9;
    color: var(--primary-color);
}

.navbar .dropdown-item i {
    width: 1.25rem;
}


/* Logout button inside dropdown */

.navbar .dropdown-item form {
    margin: 0;
}

.navbar .dropdown-item .btn-link {
    color: inherit;
    font-size: inherit;
    font-weight: inherit;
}

.navbar .dropdown-item .btn-link:hover {
    color: var(--danger-color);
}


/* =========================================================
   6. HERO SECTION
   ========================================================= */

.hero-section {
    position: relative;
    min-height: 400px;
    overflow: hidden;

    background:
        linear-gradient(
            135deg,
            #087F5B 0%,
            #07543F 100%
        );

    color: #fff;
}

/* Motif de marque "le lien" -- deux formes qui se rejoignent,
   utilise en filigrane, tres discret (moins mais mieux). */
.hero-section::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: 0.14;
    background-repeat: no-repeat;
    background-position: right -40px bottom -60px;
    background-size: min(60%, 520px);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 200' fill='none'%3E%3Cpath d='M10 150 C 90 40, 160 40, 200 100 C 240 160, 310 160, 390 60' stroke='%23F7F8F4' stroke-width='14' stroke-linecap='round'/%3E%3Ccircle cx='30' cy='150' r='26' fill='%23F7F8F4'/%3E%3Ccircle cx='370' cy='60' r='18' fill='%23D9B77A'/%3E%3C/svg%3E");
}

.hero-section > .container {
    position: relative;
    z-index: 1;
}

.hero-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.3rem 0.8rem;
    margin-bottom: 1rem;

    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: #fff;

    background: rgba(255, 255, 255, 0.14);
    border-radius: var(--radius-pill);
}


/* =========================================================
   6bis. AUTH SHELL (login / mot de passe oublie)
   Panneau de marque + panneau formulaire, cote a cote sur
   desktop ; le panneau de marque se masque sur mobile.
   ========================================================= */

.auth-shell {
    display: flex;
    min-height: 78vh;
    align-items: stretch;
    background: var(--body-bg);
}

.auth-shell__panel {
    display: none;
}

.auth-shell__panel .auth-shell__panel-inner {
    position: relative;
    z-index: 1;
    max-width: 380px;
}

@media (min-width: 992px) {
    .auth-shell__panel {
        display: flex;
        flex-direction: column;
        justify-content: center;
        width: 44%;
        padding: 4rem 3.5rem;
        min-height: 400px;
    }
}

.auth-shell__form {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 3rem 1.25rem;
}

/* "or" between the password login and the passkey button */
.auth-or {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.9rem;
    color: var(--text-muted);
    font-size: 0.8rem;
}
.auth-or::before,
.auth-or::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--border-color);
}


/* =========================================================
   7. SECTION HEADINGS
   ========================================================= */

.section-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.5rem;

    margin-bottom: 1rem;
}

.section-heading > a {
    /* .btn-sm elsewhere in the app is a fixed 32x32 icon-only square --
       this "View all listings" / "View all listings" link needs to size
       to its own text instead. */
    width: auto;
    height: auto;
    padding: 0.35rem 0.5rem;
    white-space: nowrap;
    flex-shrink: 0;
}

.section-heading .btn-group > .btn-sm {
    /* Same fix as above, for the All / Featured toggle on /annonces. */
    width: auto;
    height: auto;
    padding: 0.3rem 0.85rem;
    white-space: nowrap;
}

.section-title {
    margin: 0;

    font-family: var(--font-heading);
    font-size: 1.15rem;
    font-weight: 700;

    color: var(--text-color);
}

.section-subtitle {
    margin-top: 0.25rem;

    font-size: 0.8rem;
    color: var(--text-muted);
}


/* =========================================================
   8. CARDS
   ========================================================= */

.card {
    border: 0;
    border-radius: var(--radius-md);

    background-color: var(--surface-color);

    box-shadow: var(--shadow-sm);

    transition:
        transform var(--transition-slow),
        box-shadow var(--transition-slow);
}

.card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-md);
}

.card-body {
    padding: 1.25rem;
}

.card-footer {
    background: transparent;
    border-top: 1px solid var(--border-light);
    padding: 1rem 1.25rem;
}


/* Category cards */

.category-card {
    height: 100%;
    cursor: pointer;
}

.category-card:hover {
    background-color: #fff;
    box-shadow: var(--shadow-md);
}

.category-card .card-body {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    min-height: 220px;
}


/* Category icon */

.category-icon {
    width: 64px;
    height: 64px;

    margin: 0 auto 1rem;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: var(--radius-lg);

    background: var(--primary-soft);
    color: var(--primary-color);

    font-size: 1.75rem;

    transition:
        transform var(--transition),
        background-color var(--transition);
}

.category-card:hover .category-icon {
    transform: translateY(-3px) scale(1.04);
}


/* =========================================================
   9. LISTING CARDS
   ========================================================= */

.listing-card {
    height: 100%;
    overflow: hidden;
    position: relative;
}

/* Job cards fill their grid cell like every other category, so all the
   cards of a row share the height of the tallest one (the shell and the
   link stretch with the card). */
.listing-card--job {
    height: 100%;
}
.listing-card--job .job-card-shell,
.listing-card--job .job-card {
    height: 100%;
}

.listing-card img,
.listing-card .card-img-top,
.card-img-top {
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;

    object-fit: cover;

    border-top-left-radius: var(--radius-md);
    border-top-right-radius: var(--radius-md);
}

.listing-card .card-body {
    padding: 1.25rem;
}

.listing-price {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--primary-color);
}

.listing-desc {
    font-size: 0.875rem;
    line-height: 1.5;
    color: var(--text-muted);
}

.listing-card .card-body small {
    color: var(--text-muted);
    font-weight: 500;
}

.listing-card .d-flex.gap-3 small i {
    color: var(--primary-color);
}


/* Listing badge */

.listing-badge {
    position: absolute;

    top: 10px;
    right: 10px;

    z-index: 5;
}


/* Placeholder image */

.card-img-top.bg-light i {
    color: var(--text-light);
    font-size: 3rem;
}


/* =========================================================
   10. BUTTONS
   ========================================================= */

.btn {
    border-radius: var(--radius-sm);

    padding: 0.5rem 1.1rem;

    font-weight: 500;
    line-height: 1.4;

    transition:
        transform var(--transition),
        box-shadow var(--transition),
        background-color var(--transition);
}

.btn:hover {
    transform: translateY(-1px);
    box-shadow: var(--shadow-sm);
}

.btn:focus {
    box-shadow: 0 0 0 0.2rem rgba(8, 127, 91, 0.15);
}

.btn-sm {
    width: 32px;
    height: 32px;

    padding: 0;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    border-radius: var(--radius-sm);
}

/* .btn-sm above is a fixed 32x32 icon-only circle -- correct for an
   icon-only action (e.g. the invoice row "view" / "pay" buttons), but it
   crushes any button that also carries text. Add .btn-text-sm to a
   text-bearing small button to size it to its content instead.

   .btn-sm stays display: inline-flex (inherited above), so a plain
   space character typed between an <i> icon and its label in the
   template is NOT enough on its own -- flexbox collapses whitespace-only
   text nodes between flex items to zero width, unlike normal inline
   flow. Without an explicit gap, every icon+text small button
   (site-wide -- .btn-text-sm is used well beyond the payments pages)
   renders with the icon touching the label, most visible on narrow
   mobile widths. `gap` restores a consistent, guaranteed space between
   the icon and the label regardless of how the template's markup
   happens to be spaced. */
.btn-sm.btn-text-sm {
    width: auto;
    height: auto;
    padding: 0.35rem 0.9rem;
    white-space: nowrap;
    gap: 0.4em;
}

/* .btn-field: a button that sits on the same row as a form field (search /
   clear / add toolbars). Same height as .form-control -- 0.65rem padding
   x2 + 1.5 line-height at 0.875rem + 2px border -- so the input and its
   buttons line up exactly, whatever the button content (icon or text).
   Use it INSTEAD of .btn-sm: .btn-sm is a 32px icon circle and sat visibly
   shorter than the field next to it. */
.btn-field {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4em;
    box-sizing: border-box;
    height: calc(0.875rem * 1.5 + 1.3rem + 2px);
    min-width: 3.2rem;          /* icon-only Search / Clear / Add are one width */
    padding: 0 1.1rem;
    font-size: 0.875rem;
    line-height: 1.5;
    white-space: nowrap;
}

.card-footer .btn-outline-primary {
    color: var(--primary-color);
}

.card-footer .btn-outline-warning {
    color: #8a6a2f;
}

.card-footer .btn-outline-danger {
    color: var(--danger-color);
}

.card-footer .btn:hover {
    opacity: 0.9;
}


/* =========================================================
   11. FORMS
   ========================================================= */

.form-label,
.form-check-label {
    font-size: 0.85rem;
    font-weight: 600;
    line-height: 1.3;
    color: var(--text-color);
}

.form-control,
.form-select {
    min-height: 42px;

    border-radius: var(--radius-sm);
    border: 1px solid var(--border-color);

    padding: 0.65rem 0.9rem;

    background-color: #fff;

    font-size: 0.875rem;
    font-weight: 400;

    transition:
        border-color var(--transition),
        box-shadow var(--transition),
        background-color var(--transition);
}

.form-control::placeholder {
    color: #adb5bd;
}

.form-control:hover,
.form-select:hover {
    border-color: #b7c4bc;
}

.form-control:focus,
.form-select:focus {
    border-color: var(--primary-color);

    box-shadow:
        0 0 0 0.2rem rgba(8, 127, 91, 0.12);

    outline: none;
}

textarea.form-control {
    min-height: 110px;
    resize: vertical;
}

.form-check-input {
    cursor: pointer;
}

.form-check-input:focus {
    box-shadow: 0 0 0 0.2rem rgba(8, 127, 91, 0.12);
}


/* Form section */

.form-section {
    background: #fff;

    border: 1px solid var(--border-light);
    border-radius: var(--radius-md);

    padding: 1.25rem;

    box-shadow: var(--shadow-xs);
}

.form-section-title {
    margin-bottom: 1rem;

    font-family: var(--font-heading);
    font-size: 1rem;
    font-weight: 700;

    color: var(--text-color);
}


/* =========================================================
   12. SEARCH BAR
   ========================================================= */

.search-bar-section {
    margin-top: -2.75rem;
    margin-bottom: 2.5rem;
    position: relative;
    z-index: 2;
}

@media (max-width: 767.98px) {
    .search-bar-section {
        margin-top: -1.5rem;
    }
}

.search-bar {
    background: #fff;

    border-radius: var(--radius-lg);

    padding: 1.5rem;

    box-shadow: var(--shadow-md);
}

.search-bar .form-control,
.search-bar .form-select {
    background-color: #fff;
}


/* =========================================================
   13. BADGES
   ========================================================= */

.badge {
    padding: 0.45em 0.75em;

    font-size: 0.75rem;
    font-weight: 600;

    border-radius: var(--radius-pill);
}

.badge.bg-dark {
    font-weight: 600;
    padding: 0.4em 0.65em;
    border-radius: var(--radius-sm);
}

.badge.bg-info {
    font-size: 0.75rem;
    padding: 0.3em 0.55em;
    border-radius: var(--radius-sm);
}


/* Badge de statut : icone + texte + couleur (jamais la couleur
   seule -- recommandation WCAG sur la perception des couleurs). */
.status-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;

    padding: 0.35em 0.75em;

    font-size: 0.75rem;
    font-weight: 600;

    border-radius: var(--radius-pill);
}

.status-badge i,
.status-badge .status-dot {
    font-size: 0.7rem;
}

.status-badge .status-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: currentColor;
    display: inline-block;
}

.status-badge--success {
    color: var(--primary-dark);
    background: var(--primary-soft-strong);
}

.status-badge--danger {
    color: #8f2530;
    background: var(--danger-soft);
}

.status-badge--warning {
    color: #6d5527;
    background: var(--accent-soft);
}

.status-badge--neutral {
    color: var(--text-muted);
    background: var(--border-light);
}


/* =========================================================
   14. IMAGE COUNT BADGE
   ========================================================= */

.image-count-badge {
    font-size: 0.7rem;
    font-weight: 600;

    padding: 4px 6px;

    line-height: 1;
    position: absolute;
    bottom: 10px;
    right: 10px;
    z-index: 10;
}


/* =========================================================
   15. FAVORITE BUTTON
   ========================================================= */

.favorite-btn {
    position: absolute;

    top: 10px;
    right: 10px;

    z-index: 10;

    width: 42px;
    height: 42px;

    padding: 0;

    display: flex;
    align-items: center;
    justify-content: center;

    background: rgba(255, 255, 255, 0.9);

    border: 0;
    border-radius: 50%;

    box-shadow: var(--shadow-sm);

    cursor: pointer;

    transition:
        transform var(--transition),
        background-color var(--transition),
        box-shadow var(--transition);
}

.favorite-btn:hover {
    background: #fff;

    transform: scale(1.08);

    box-shadow: var(--shadow-md);
}

.favorite-btn i {
    font-size: 1.2rem;

    color: var(--text-muted);

    transition:
        color var(--transition),
        transform var(--transition);
}

.favorite-btn.favorited i {
    color: var(--danger-color);
    transform: scale(1.15);
}

.favorite-btn.favorited {
    animation: favoritePop 0.2s ease;
}

@keyframes favoritePop {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.15);
    }

    100% {
        transform: scale(1);
    }
}


/* =========================================================
   16. TABLES
   ========================================================= */

.card .table-responsive {
    margin-top: 1rem;
}

.card .table {
    width: 100%;
    margin-bottom: 0;

    border-collapse: collapse;
}

.card .table th,
.card .table td {
    vertical-align: middle;

    padding: 0.7rem;

    font-size: 0.875rem;
    line-height: 1.3;
}

.card .table thead th {
    background-color: var(--light-color);

    color: #495057;

    font-weight: 600;

    border-bottom: 2px solid var(--border-color);
}

.card .table tbody tr {
    transition: background-color var(--transition-fast);
}

.card .table tbody tr:hover {
    background-color: rgba(13, 110, 253, 0.04);
}

.card .table .badge {
    font-size: 0.7rem;
    font-weight: 600;

    padding: 0.35em 0.6em;

    text-transform: uppercase;
}

.card .table .btn {
    padding: 0.35rem 0.6rem;

    font-size: 0.8rem;
    line-height: 1.2;
}


/* DataTables — kept visually identical to the plain .card .table style
   (e.g. super_admin/visitor_sessions.html) so DataTables-powered tables
   (admin/users.html, super_admin/users.html) don't look bigger/heavier
   than the rest of the app's tables. */

.dataTables_wrapper {
    font-size: 0.875rem;
}

.dataTables_wrapper .dataTables_filter input,
.dataTables_wrapper .dataTables_length select {
    font-size: 0.875rem;
}

.dataTables_wrapper .dataTables_info,
.dataTables_wrapper .dataTables_paginate {
    font-size: 0.8rem;
}

.dataTables_wrapper .dataTables_paginate .paginate_button {
    border-radius: var(--radius-sm) !important;
    margin: 0 2px;

    font-size: 0.8rem;
}

table.dataTable tbody tr:hover {
    background-color: #F7F8F4;
}


/* =========================================================
   16b. TABLE PEOPLE (avatar + name), shared by every table that lists
   users/members — same convention as super_admin/visitor_sessions.html,
   reused so all "people list" tables (admin/users, super-admin/users,
   team lists...) look identical.
   ========================================================= */

.vh-avatar-sm {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}

.vh-avatar-sm-placeholder {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--primary-color);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 0.9rem;
    flex-shrink: 0;
}

/* Listing-detail "Listing Information" card: a right-hand column with a
   picture of the person (or, lacking a profile picture, the business)
   who posted the listing, sitting level with "Posted by" at the top of
   the stats list, plus how long they've been a member underneath it.
   See claude/listing-poster-avatar-2026-10-05.md. */
.listing-poster-box {
    width: 84px;
}

.listing-poster-avatar {
    width: 84px;
    height: 84px;
    border-radius: 10px;
    object-fit: cover;
    border: 2px solid #fff;
    box-shadow: 0 1px 4px rgba(23, 33, 30, 0.15);
    display: block;
}

.listing-poster-avatar--logo {
    object-fit: contain;
    background: #fff;
    padding: 6px;
}

.listing-poster-member-since {
    margin-top: 0.4rem;
    font-size: 0.72rem;
    line-height: 1.2;
    color: #6c757d;
}

@media (max-width: 420px) {
    .listing-poster-box {
        width: 64px;
    }

    .listing-poster-avatar {
        width: 64px;
        height: 64px;
    }
}

/* =========================================================
   17. DASHBOARD
   ========================================================= */

.dashboard-card {
    border-left: 4px solid var(--primary-color);
}

.dashboard-card .card-body {
    padding: 1.5rem;
}

.dashboard-card-link {
    display: block;
    text-decoration: none;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.dashboard-card-link:hover {
    transform: translateY(-3px);
    box-shadow: 0 0.5rem 1rem rgba(23, 33, 30, 0.15);
    text-decoration: none;
}

.dashboard-card-link:hover .card {
    border-color: transparent;
}

.dashboard-card-breakdown {
    font-size: 0.8rem;
    opacity: 0.92;
}

.dashboard-card-breakdown .dot {
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    margin-right: 4px;
    vertical-align: middle;
}

.stat-number {
    font-size: 2.5rem;

    font-weight: 700;

    color: var(--primary-color);

    line-height: 1.1;
}

/* ---------------------------------------------------------------------
   Icon-circle KPI stat card -- used on the super-admin sessions page,
   and on the tenant dashboard/invoices/invoice-detail pages. A colored
   round icon badge + a bold value + a muted label, in a single flex row.
   Base color is the brand signature green; .vh-stat-icon-danger/
   -warning/-muted recolor the badge for a different KPI meaning without
   changing the card shell. (See claude/tenant-kpi-cards-and-translations
   -*.md for context.)
   --------------------------------------------------------------------- */
.vh-stat-card {
    background: var(--surface-color);
    border-radius: var(--radius-lg);
    padding: 1.1rem 1.3rem;
    box-shadow: var(--shadow-sm);
    display: flex;
    align-items: center;
    gap: 1rem;
    height: 100%;
}
.vh-stat-icon {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: var(--primary-color);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    flex-shrink: 0;
}
.vh-stat-value {
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--text-color);
    line-height: 1.1;
}
.vh-stat-label {
    font-size: 0.8rem;
    color: var(--text-muted, #6c757d);
}
.vh-stat-icon-danger {
    background: var(--danger-color);
}
.vh-stat-icon-warning {
    /* Warning uses the brand's sand accent, which is too light for white
       icon glyphs (WCAG contrast) -- dark anthracite icon instead, same
       fix already applied to the super-admin dashboard's Professionals
       tile (see super-admin-dashboard-recent-admins-actions doc). */
    background: var(--warning-color);
    color: var(--text-color);
}
.vh-stat-icon-muted {
    background: var(--text-muted, #5B6B64);
}


/* =========================================================
   18. BREADCRUMBS
   ========================================================= */

.breadcrumb {
    display: flex;

    flex-wrap: nowrap;
    align-items: center;

    margin-bottom: 1rem;
}

.breadcrumb-item {
    display: flex;
    align-items: center;

    font-size: 0.9rem;
}

.breadcrumb-item + .breadcrumb-item::before {
    content: "›";

    font-weight: 600;
    color: #6c757d;
}

.breadcrumb-item.dropdown {
    margin-right: 0.5rem;
}

/* =========================================================
   19. IMAGE GALLERY
   ========================================================= */

.image-gallery {
    display: grid;

    grid-template-columns:
        repeat(auto-fill, minmax(200px, 1fr));

    gap: 10px;
}

.image-gallery img {
    width: 100%;
    height: 200px;

    object-fit: cover;

    border-radius: var(--radius-sm);

    cursor: pointer;

    transition:
        transform var(--transition),
        box-shadow var(--transition);
}

.image-gallery img:hover {
    transform: scale(1.03);
    box-shadow: var(--shadow-md);
}


/* .fas {
    font-size: 12px;
} */



/* =========================================================
   20. THUMBNAIL SCROLL
   ========================================================= */

.thumb-scroll {
    display: flex;

    gap: 0.5rem;

    width: 100%;

    overflow-x: auto;
    overflow-y: hidden;

    padding-bottom: 4px;

    flex-wrap: nowrap;

    -webkit-overflow-scrolling: touch;

    scrollbar-width: none;
}

.thumb-scroll::-webkit-scrollbar {
    display: none;
}

.thumb-item {
    flex-shrink: 0;
}


/* Desktop */

@media (min-width: 768px) {
    .thumb-item {
        flex: 0 0 80px;
    }
}


/* Mobile: 3 thumbnails across */

@media (max-width: 767px) {
    .thumb-item {
        flex: 0 0 calc((100% - 1rem) / 3);
    }
}


/* =========================================================
   21. MODALS
   ========================================================= */

.modal .modal-dialog {
    max-width: 500px;
}

.modal .modal-content {
    border: 0;
    border-radius: var(--radius-lg);

    box-shadow: var(--shadow-lg);
}

.modal .modal-header {
    border-bottom: 1px solid var(--border-light);
}

.modal .modal-footer {
    border-top: 1px solid var(--border-light);
}

.modal .modal-body {
    padding: 1.5rem;

    max-height: 80vh;

    overflow-y: auto;
}


.modal .btn {
    font-weight: 500;
}

@media (max-width: 576px) {
    .modal .modal-dialog {
        margin: 0.5rem;
    }
}


/* =========================================================
   22. FOOTER
   ========================================================= */

footer {
    margin-top: auto;
    border-top: 3px solid var(--primary-color);
}

/* Headings get the anthracite text colour globally (section 3), which is
   invisible on the dark footer -- the brand lockup ("logo + name") and the
   "Quick Links" / "Contact" titles were dark-on-dark. Headings inherit the
   footer's white instead. */
footer h1,
footer h2,
footer h3,
footer h4,
footer h5,
footer h6 {
    color: #fff;
}

/* Footer brand lockup: same logo + name + tagline as the navbar, recoloured
   for the dark background. */
footer .footer-brand {
    gap: 0.6rem;
    margin-bottom: 0.75rem;
}

footer .footer-brand .brand-lockup-mark {
    height: 40px;
}

footer .footer-brand .brand-lockup-name {
    color: #fff;
}

footer .footer-brand .brand-lockup-tagline {
    color: rgba(255, 255, 255, 0.65);
}

footer a {
    text-decoration: none;

    transition:
        color var(--transition),
        opacity var(--transition);
}

footer a:hover {
    color: var(--primary-color) !important;
}

/* Footer language switcher: both options always visible, the active one
   highlighted and non-clickable (nothing happens if you tap the language
   you're already on), the other dimmed until hovered/focused. */
.footer-lang-switch {
    font-size: 0.85rem;
    margin-top: 0.5rem;
}

.footer-lang-switch a.footer-lang-link {
    color: rgba(255, 255, 255, 0.6);
}

.footer-lang-switch a.footer-lang-link.active {
    color: #fff;
    font-weight: 600;
    pointer-events: none;
}

.footer-lang-switch .footer-lang-sep {
    color: rgba(255, 255, 255, 0.35);
}

.footer-links a:not(:last-child)::after {
    content: "|";

    margin: 0 8px;

    color: rgba(255, 255, 255, 0.35);
}

.social-links a {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    transition:
        transform var(--transition),
        opacity var(--transition);
}

.social-links a:hover {
    transform: translateY(-2px);
    opacity: 0.8;
}


/* =========================================================
   23. MAP
   ========================================================= */

#map {
    height: 350px;

    margin-top: 20px;

    border-radius: var(--radius-md);

    overflow: hidden;

    box-shadow: var(--shadow-sm);
}

/* "View on map" + "Directions" under the listing map: two equal buttons on the
   same row (they wrap onto two lines of text rather than overflow on narrow
   screens). See claude/map-directions-button-2026-10-05.md. */
.map-actions { display: flex; gap: .5rem; }
.map-actions__btn {
    flex: 1 1 0; min-width: 0; width: auto;
    display: inline-flex; align-items: center; justify-content: center;
    white-space: normal; text-align: center;
}

/* Phone number field (intl-tel-input). The library wraps the <input> in a
   <div class="iti"> that is display:inline-block, so it only shrinks to
   its content instead of filling its column like every other form
   control -- which is why the phone field looked narrower than Email /
   Password on the complete-registration and tenant-register pages (the
   main register page only looked right because its wrapper div happened
   to be .row-cols-1, which stretches its children). One rule here makes
   every phone field full width. See
   claude/phone-field-width-and-age-message-2026-10-05.md. */
.iti {
    width: 100%;
}


/* =========================================================
   24. HOUSING / EMPTY STATES
   ========================================================= */

#housing .text-center i {
    color: #adb5bd;
    font-size: 4rem;
}

#housing .text-center h4 {
    margin-bottom: 1rem;

    color: #6c757d;
}


/* =========================================================
   25. LOADING
   ========================================================= */

.loading-spinner {
    position: fixed;

    top: 50%;
    left: 50%;

    transform: translate(-50%, -50%);

    z-index: 9999;
}


/* =========================================================
   26. ANIMATIONS
   ========================================================= */

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.fade-in {
    animation: fadeIn 0.5s ease;
}


/* =========================================================
   27. PRICE RANGE
   ========================================================= */

.price-range {
    margin: 20px 0;
}

.price-values {
    display: flex;

    justify-content: space-between;

    font-weight: 600;

    color: var(--primary-color);
}


/* =========================================================
   28. PRICE DISPLAY
   ========================================================= */

#price_display {
    font-variant-numeric: tabular-nums;
}


/* =========================================================
   29. GENERAL LISTING INFORMATION
   ========================================================= */

.d-flex.gap-3.mb-2,
.listing-desc {
    font-size: 14px;
}


/* =========================================================
   30. ADVERTISEMENT CARD
   ========================================================= */

.advertisement-card {
    padding: 1.5rem;

    background: #fff;

    border: 1px solid var(--border-light);
    border-radius: var(--radius-md);

    box-shadow: var(--shadow-xs);

    text-align: center;
}

.advertisement-card small {
    color: var(--text-muted);
}

.advertisement-card h6 {
    margin-bottom: 0.5rem;

    font-weight: 600;
}


/* =========================================================
   31. UTILITY COMPONENTS
   ========================================================= */

.surface {
    background: var(--surface-color);

    border: 1px solid var(--border-light);
    border-radius: var(--radius-md);

    box-shadow: var(--shadow-sm);
}

.rounded-modern {
    border-radius: var(--radius-md) !important;
}

.shadow-modern {
    box-shadow: var(--shadow-md) !important;
}

.border-light-modern {
    border-color: var(--border-light) !important;
}


/* =========================================================
   32. RESPONSIVE
   ========================================================= */

@media (max-width: 992px) {

    .navbar {
        padding-left: 0.75rem;
        padding-right: 0.75rem;
    }

    .navbar .navbar-collapse {
        padding-top: 0.75rem;
    }

    .navbar .nav-link {
        margin-bottom: 0.15rem;
    }

    .navbar .dropdown-menu {
        box-shadow: none;
        border: 1px solid var(--border-light);
    }
}


@media (max-width: 768px) {

    .hero-section {
        text-align: center;
    }

    .stat-number {
        font-size: 2rem;
    }

    .search-bar {
        padding: 1rem;
    }

    .form-section {
        padding: 1rem;
    }

    .d-flex.gap-3.mb-2,
    .listing-desc {
        font-size: 15px;
    }
}


@media (max-width: 767px) {

    .card-body {
        padding: 1rem;
    }

    .card-footer {
        padding: 0.85rem 1rem;
    }

    .card .table th,
    .card .table td {
        padding: 0.5rem;

        font-size: 0.8rem;
    }

    .card .table .btn {
        padding: 0.25rem 0.4rem;

        font-size: 0.75rem;
    }

    .paragraph-spacing {
        margin-bottom: 1rem;
    }

    /* .breadcrumb {
        overflow-x: auto;
        padding-bottom: 0.25rem;
    }

    .breadcrumb-item {
        white-space: nowrap;
    } */
    .breadcrumb {
        display: flex;
        flex-wrap: nowrap;
        align-items: center;
        margin-bottom: 1rem;

        /* Important for dropdown */
        overflow: visible;
    }

    .breadcrumb-item {
        display: flex;
        align-items: center;
        font-size: 0.9rem;
        white-space: nowrap;
    }

    .breadcrumb-item.dropdown {
        margin-right: 0.5rem;
    }

    .breadcrumb-item + .breadcrumb-item::before {
        content: "›";
        font-weight: 600;
        color: #6c757d;
    }

    /* Mobile */
    @media (max-width: 767.98px) {
        .breadcrumb {
            overflow: visible;
            padding-bottom: 0.25rem;
        }

        .breadcrumb-item {
            white-space: nowrap;
        }

        .breadcrumb-item.dropdown {
            position: relative;
        }

        .breadcrumb-item .dropdown-menu {
            z-index: 1050;
        }
    }
}


@media (max-width: 576px) {

    h1 {
        font-size: 1.7rem;
    }

    h2 {
        font-size: 1.5rem;
    }

    h3 {
        font-size: 1.3rem;
    }

    .section-title {
        font-size: 1rem;
    }

    .listing-price {
        font-size: 1.25rem;
    }

    .favorite-btn {
        width: 40px;
        height: 40px;
    }

    .image-gallery {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

    .image-gallery img {
        height: 160px;
    }
}


/* =========================================================
   33. ACCESSIBILITY / REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}


/* =========================================================
   MITTIMMO NAVBAR
   ========================================================= */

.mittimmo-navbar {
    position: sticky;
    top: 0;
    z-index: 1030;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

/* Brand */
.mittimmo-navbar .navbar-brand {
    white-space: nowrap;
}

/* Normal nav links */
.mittimmo-navbar .nav-link {
    color: #17211E;
    font-weight: 500;
    transition: color 0.2s ease, background-color 0.2s ease;
}

.mittimmo-navbar .nav-link:hover {
    color: #087F5B;
}

/* Bootstrap dropdown */
.mittimmo-navbar .dropdown-menu {
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 10px;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.10);
    padding: 0.45rem;
}

.mittimmo-navbar .dropdown-item {
    border-radius: 7px;
    padding: 0.65rem 0.85rem;
    font-size: 0.95rem;
}

.mittimmo-navbar .dropdown-item:hover,
.mittimmo-navbar .dropdown-item:focus {
    background-color: #f1f5f9;
    color: #087F5B;
}

/* Logout button should behave exactly like dropdown item */
.mittimmo-navbar .logout-button {
    border: 0;
    background: transparent;
    width: 100%;
    text-align: left;
}

/* Language switcher */
.mittimmo-navbar .language-switcher .nav-link {
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
}

/* Give the language switcher room to breathe next to the account menu on desktop
   (applies the same whether the account item is the logged-in dropdown or the
   guest "Account" dropdown -- both follow .language-switcher in the markup) */
@media (min-width: 992px) {
    .mittimmo-navbar .mittimmo-nav-icons .language-switcher {
        margin-right: 1rem;
        padding-right: 1rem;
        border-right: 1px solid var(--border-light);
    }

    .mittimmo-navbar .mittimmo-nav-icons .language-switcher + li.dropdown {
        margin-left: 0.35rem;
    }
}

/* =========================================================
   MOBILE NAVBAR
   ========================================================= */

@media (max-width: 991.98px) {

    .mittimmo-navbar .container {
        position: relative;
    }

    /*
       Keep brand and hamburger on the same row.
    */
    .mittimmo-navbar .navbar-brand {
        margin-right: auto;
    }

    .mittimmo-navbar .navbar-toggler {
        border: 1px solid rgba(0, 0, 0, 0.15);
        padding: 0.45rem 0.65rem;
        border-radius: 8px;
    }

    .mittimmo-navbar .navbar-toggler:focus {
        box-shadow: 0 0 0 0.2rem rgba(13, 110, 253, 0.15);
    }

    /*
       Make sure the collapsed menu has enough room.
    */
    .mittimmo-navbar .navbar-collapse {
        margin-top: 0.75rem;
        padding: 0.75rem 0;
        border-top: 1px solid rgba(0, 0, 0, 0.08);
    }

    /*
       Make mobile nav items full width.
    */
    .mittimmo-navbar .navbar-nav {
        width: 100%;
    }

    .mittimmo-navbar .nav-item {
        width: 100%;
    }

    .mittimmo-navbar .nav-link {
        padding: 0.75rem 0.5rem;
        border-radius: 7px;
    }

    .mittimmo-navbar .nav-link:hover {
        background-color: #f5f5f5;
    }

    /*
       IMPORTANT:
       Bootstrap dropdowns must remain usable on mobile.
    */
    .mittimmo-navbar .dropdown-menu {
        position: static !important;
        float: none;
        width: 100%;
        margin: 0.25rem 0 0.5rem 0;
        border: 0;
        border-radius: 8px;
        box-shadow: none;
        background-color: #F7F8F4;
    }

    .mittimmo-navbar .dropdown-item {
        padding: 0.75rem 1rem;
        white-space: normal;
    }

    /*
       Language switcher becomes a normal mobile row.
    */
    .mittimmo-navbar .language-switcher {
        border-top: 1px solid rgba(0, 0, 0, 0.08);
        margin-top: 0.5rem;
        padding-top: 0.5rem;
    }

    .mittimmo-navbar .language-switcher > div {
        justify-content: flex-start;
    }

    /*
       Account dropdown on mobile.
    */
    .mittimmo-navbar .dropdown-menu-end {
        right: auto;
        left: 0;
    }

    /*
       Prevent dropdown links from being too small for touch.
    */
    .mittimmo-navbar .dropdown-item {
        min-height: 44px;
        display: flex;
        align-items: center;
    }
}


/* =========================================================
   VERY SMALL PHONES
   ========================================================= */

@media (max-width: 575.98px) {

    .mittimmo-navbar {
        padding-top: 0.55rem;
        padding-bottom: 0.55rem;
    }

    .mittimmo-navbar .navbar-brand {
        font-size: 1.05rem;
    }

    .mittimmo-navbar .navbar-toggler {
        padding: 0.4rem 0.55rem;
    }

    .mittimmo-navbar .navbar-collapse {
        max-height: calc(100vh - 70px);
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    .mittimmo-navbar .dropdown-item {
        font-size: 0.95rem;
    }
}


#usersRoleChart,
#listingsCategoryChart,
#userStatusChart,
#listingsCategoryChart,
#usersStatusChart {
    height: 200px !important;
    max-height: 200px !important;
}

#invoiceStatusChart,
#paymentMethodChart {
    height: 160px !important;
    max-height: 160px !important;
}


/* User Actions buttons View */
.user-actions {
    display: flex;
    align-items: center;
    gap: 6px;
}

.user-action-form {
    display: inline;
    margin: 0;
}

.user-action-btn,
.edit-btn,
.delete-btn,
.view-btn,
.toggle-btn {
    width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid transparent;
    border-radius: 6px;
    background: transparent;
    cursor: pointer;
    transition: all 0.2s ease;
}

/* View */
.user-action-view,
.view-btn {
    color: #087F5B;
    border-color: #087F5B;
}

/* Edit */
.user-action-edit,
.edit-btn {
    color: #0dcaf0;
    border-color: #0dcaf0;
}

.user-action-reset-password {
    color: #0dcaf0;
    border-color: #0dcaf0;
}

/* Reset password */
.user-action-reset-password:hover {
    color: #fff;
    background: #0dcaf0;
}

/* Activate */
.user-action-activate,
.toggle-btn-activate {
    color: #087F5B;
    border-color: #087F5B;
}

/* Deactivate */
.user-action-deactivate,
.toggle-btn-deactivate {
    color: #D9B77A;
    border-color: #D9B77A;
}

/* Message */
.user-action-message {
    color: #0d6efd;
    border-color: #0d6efd;
}

.user-action-message:hover {
    color: #fff;
    background: #0d6efd;
}

/* Delete */
.user-action-delete,
.delete-btn{
    color: #C83E4D;
    border-color: #C83E4D;
}

.user-action-delete:hover,
.delete-btn:hover {
    color: #fff;
    background: #C83E4D;
}

/* Hover */
.user-action-view:hover,
.view-btn:hover {
    color: #fff;
    background: #087F5B;
}

.user-action-edit:hover,
.edit-btn:hover{
    color: #fff;
    background: #0dcaf0;
}

.user-action-activate:hover,
.toggle-btn-activate:hover {
    color: #fff;
    background: #087F5B;
}

.user-action-deactivate:hover,
.toggle-btn-deactivate:hover {
    color: #000;
    background: #D9B77A;
}


/* Button view all */
.view-all-link {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    white-space: nowrap;
    color: #087F5B;
    font-size: 0.875rem;
    font-weight: 600;
    text-decoration: none;
    padding: 5px 8px;
    border-radius: 6px;
    transition: all 0.2s ease;
}

.view-all-link:hover {
    color: #087F5B;
    background-color: #f0f6ff;
    text-decoration: none;
}

.view-all-link i {
    font-size: 0.75rem;
    transition: transform 0.2s ease;
}

.view-all-link:hover i {
    transform: translateX(3px);
}


.back-to-users {
    display: inline-flex;
    align-items: center;
    color: #6c757d;
    font-size: 0.9rem;
    font-weight: 600;
    text-decoration: none;
    padding: 6px 10px;
    border-radius: 6px;
    transition: all 0.2s ease;
}

.back-to-users:hover {
    color: #087F5B;
    background-color: #f0f6ff;
    text-decoration: none;
}

.back-to-users i {
    transition: transform 0.2s ease;
}

.back-to-users:hover i {
    transform: translateX(-3px);
}

/* Mobile hide */
@media (max-width: 767.98px) {
    .mobile-hide {
        display: none !important;
    }
}


/* =========================================================
   34. MESSAGING
   ========================================================= */

.messages-shell {
    display: grid;
    grid-template-columns: 320px 1fr;
    grid-template-rows: minmax(0, 1fr);
    min-height: 70vh;
    max-height: 78vh;

    background: var(--surface-color);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
}

@media (max-width: 767.98px) {
    .messages-shell {
        grid-template-columns: 1fr;
        min-height: 75vh;
    }

    .messages-shell.has-active-conversation .conversation-list-pane {
        display: none;
    }

    .messages-shell:not(.has-active-conversation) .chat-thread-pane {
        display: none;
    }
}

.conversation-list-pane {
    border-right: 1px solid var(--border-light);
    background: var(--surface-alt);
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow-y: auto;
}

.conversation-list-pane__toolbar {
    position: sticky;
    top: 0;
    z-index: 2;
    flex-shrink: 0;
    background: var(--surface-alt);
}

.conversation-list-pane__header {
    padding: 1.1rem 1.25rem;
    font-family: var(--font-heading);
    font-weight: 700;
    color: var(--text-color);
    border-bottom: 1px solid var(--border-light);
}

.conversation-filter-tabs {
    display: flex;
    gap: 0.4rem;

    padding: 0.75rem 1.1rem;
    border-bottom: 1px solid var(--border-light);
}

.conversation-filter-tab {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;

    padding: 0.3rem 0.75rem;
    border: 1px solid var(--border-light);
    border-radius: var(--radius-pill);
    background: var(--surface-color);
    color: var(--text-muted);

    font-size: 0.8rem;
    font-weight: 600;

    cursor: pointer;
    transition:
        background-color var(--transition),
        color var(--transition),
        border-color var(--transition);
}

.conversation-filter-tab:hover {
    border-color: var(--primary-color);
    color: var(--primary-color);
}

.conversation-filter-tab.active {
    background: var(--primary-color);
    border-color: var(--primary-color);
    color: #fff;
}

.conversation-filter-tab__count {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-width: 18px;
    height: 18px;
    padding: 0 0.3rem;

    border-radius: var(--radius-pill);
    background: var(--primary-color);
    color: #fff;

    font-size: 0.68rem;
    font-weight: 700;
    line-height: 1;
}

.conversation-filter-tab.active .conversation-filter-tab__count {
    background: #fff;
    color: var(--primary-color);
}

.conversation-search {
    position: relative;
    padding: 0.75rem 1.1rem;
    border-bottom: 1px solid var(--border-light);
}

.conversation-search__icon {
    position: absolute;
    top: 50%;
    left: 1.6rem;
    transform: translateY(-50%);
    color: var(--text-muted, #8a938f);
    font-size: 0.8rem;
    pointer-events: none;
}

.conversation-search__input {
    width: 100%;
    padding: 0.45rem 0.75rem 0.45rem 2rem;
    border: 1px solid var(--border-light);
    border-radius: var(--radius-pill);
    background: var(--surface-color);
    font-size: 0.85rem;
    color: var(--text-color);
}

.conversation-search__input:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(8, 127, 91, 0.15);
}

/* .conversation-item and .conversation-list-pane__empty both set their own
   `display: flex`, which otherwise beats the browser's default [hidden]
   styling -- force them to actually hide when toggled off by the search box. */
.conversation-item[hidden],
.conversation-list-pane__empty[hidden] {
    display: none !important;
}

.conversation-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;

    padding: 0.85rem 1.1rem;
    text-decoration: none;
    color: inherit;

    border-bottom: 1px solid var(--border-light);
    transition: background-color var(--transition);
}

.conversation-item:hover {
    background: var(--primary-soft-strong);
}

.conversation-item.active {
    background: var(--primary-soft-strong);
    border-left: 3px solid var(--primary-color);
}

.conversation-item__avatar {
    width: 44px;
    height: 44px;
    flex: none;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 50%;
    background: var(--primary-color);
    color: #fff;

    font-weight: 700;
    font-size: 0.9rem;

    /* the profile picture (when there is one) is laid over the initials */
    position: relative;
    overflow: hidden;
}

.conversation-item__avatar-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}

.conversation-item__body {
    min-width: 0;
    flex: 1;
}

.conversation-item__top {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.5rem;
}

.conversation-item__name {
    font-weight: 600;
    color: var(--text-color);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.conversation-item__time {
    font-size: 0.7rem;
    color: var(--text-light);
    flex: none;
}

.conversation-item__preview {
    font-size: 0.82rem;
    color: var(--text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.conversation-item__meta {
    margin: 0.1rem 0 0.15rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.conversation-item__meta i {
    font-size: 0.7rem;
    margin-right: 0.15rem;
}

.conversation-item.unread .conversation-item__preview,
.conversation-item.unread .conversation-item__name {
    color: var(--text-color);
    font-weight: 700;
}

.conversation-item__unread-badge {
    min-width: 18px;
    height: 18px;
    padding: 0 0.35rem;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    border-radius: var(--radius-pill);
    background: var(--primary-color);
    color: #fff;

    font-size: 0.68rem;
    font-weight: 700;
    line-height: 1;
    flex: none;
}

.chat-thread-pane {
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.chat-thread__header {
    display: flex;
    align-items: center;
    gap: 0.75rem;

    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--border-light);
}

/* The listing a conversation is about: a clickable card under the thread header (same card as the mobile chat). */
.chat-thread__listing {
    display: flex;
    align-items: center;
    gap: 0.85rem;

    margin: 0.75rem 1.25rem 0;
    padding: 0.6rem 0.8rem;

    border: 1px solid var(--border-light);
    border-radius: var(--radius-lg);
    background: var(--surface-color, #fff);
    color: var(--text-color);
    text-decoration: none;
}

.chat-thread__listing:hover,
.chat-thread__listing:focus-visible {
    border-color: var(--primary-color);
    color: var(--text-color);
}

.chat-thread__listing-photo {
    flex: none;
    width: 64px;
    height: 52px;
    border-radius: var(--radius-md, 8px);
    overflow: hidden;
    background: var(--surface-alt);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted, #6b7a74);
}

.chat-thread__listing-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.chat-thread__listing-body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    font-size: 0.8rem;
}

.chat-thread__listing-caption {
    font-size: 0.68rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--text-muted, #6b7a74);
}

.chat-thread__listing-title {
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.chat-thread__listing-price {
    color: var(--primary-color);
    font-weight: 600;
}

.chat-thread__listing-price small {
    font-weight: 400;
    color: var(--text-muted, #6b7a74);
}

.chat-thread__listing-place {
    color: var(--text-muted, #6b7a74);
}

.chat-thread__listing-status {
    flex: none;
    padding: 0.15rem 0.5rem;
    border-radius: var(--radius-pill);
    background: var(--surface-alt);
    font-size: 0.7rem;
    font-weight: 600;
}

.chat-thread__listing-go {
    flex: none;
    color: var(--text-muted, #6b7a74);
    font-size: 0.8rem;
}

.chat-thread__messages {
    flex: 1;
    overflow-y: auto;
    padding: 1.25rem;

    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.msg-bubble {
    max-width: 70%;
    padding: 0.6rem 0.9rem;
    border-radius: var(--radius-lg);
    font-size: 0.875rem;
    line-height: 1.45;
    word-wrap: break-word;
}

.msg-bubble__time {
    display: block;
    margin-top: 0.2rem;
    font-size: 0.68rem;
    opacity: 0.7;
}

.msg-bubble--out {
    align-self: flex-end;
    background: var(--primary-color);
    color: #fff;
    border-bottom-right-radius: 4px;
}

.msg-bubble--in {
    align-self: flex-start;
    background: var(--surface-alt);
    color: var(--text-color);
    border-bottom-left-radius: 4px;
}

.chat-thread__composer {
    display: flex;
    gap: 0.6rem;
    align-items: flex-end;

    padding: 0.9rem 1.1rem;
    border-top: 1px solid var(--border-light);
    background: var(--surface-color);
}

.chat-thread__composer textarea {
    resize: none;
    min-height: 44px;
    max-height: 120px;
}

.chat-thread__empty,
.conversation-list-pane__empty {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 0.5rem;
    padding: 2rem;
    color: var(--text-muted);
}

.chat-thread__empty i,
.conversation-list-pane__empty i {
    font-size: 2rem;
    color: var(--text-light);
}


/* =========================================================
   20. HOMEPAGE REFRESH -- photographic hero, quick-nav counts,
   listing ribbon, sector tiles, nav icon cluster
   (added to match the "annonces+" style reference)
   ========================================================= */

/* ---- Navbar: flat category links + icon cluster ---- */

.mittimmo-nav-categories .nav-link {
    font-weight: 600;
    font-size: 0.92rem;
}

/* :not(.account-toggle) -- the account menu shares this cluster but needs its
   own auto-sized pill (icon + name/"Account" text), not a fixed 38px circle. */
.mittimmo-nav-icons .nav-link:not(.account-toggle) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    font-size: 1.05rem;
    padding: 0;
}

.mittimmo-nav-icons .nav-link:not(.account-toggle):hover {
    background-color: var(--primary-soft);
}

.account-toggle {
    display: inline-flex !important;
    align-items: center;
    justify-content: flex-start !important;
    gap: 0.4rem;
    width: auto !important;
    height: auto !important;
    padding: 0.35rem 0.85rem !important;
    border-radius: var(--radius-pill);
    white-space: nowrap;
}

.account-toggle:hover {
    background-color: var(--primary-soft);
}

.account-toggle::after {
    margin-left: 0.35rem;
}

/* ---- Photographic hero (mockup-style) ---- */

.hero-section--photo {
    background: transparent;
    min-height: 0;
    color: inherit;
}

.hero-section--photo::after {
    display: none;
}

.hero-photo-card {
    position: relative;
    overflow: hidden;
    border-radius: var(--radius-lg);
    min-height: 440px;
    display: flex;
    align-items: center;
    background-size: cover;
    background-position: center;
    box-shadow: var(--shadow-md);
}

.hero-photo-card::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        100deg,
        rgba(7, 84, 63, 0.88) 0%,
        rgba(7, 84, 63, 0.72) 38%,
        rgba(23, 33, 30, 0.22) 70%,
        rgba(23, 33, 30, 0.05) 100%
    );
}

.hero-photo-content {
    position: relative;
    z-index: 1;
    padding: 3rem 2.75rem;
    max-width: 620px;
    color: #fff;
}

.hero-photo-content .lead {
    color: rgba(255, 255, 255, 0.92);
    text-shadow: 0 1px 10px rgba(7, 40, 30, 0.45);
}

/* The global h1 colour (anthracite) would otherwise win over the white set on
   the content block, leaving the headline dark on the dark photo. */
.hero-photo-content h1 {
    color: #fff;
    text-shadow: 0 2px 14px rgba(7, 40, 30, 0.45);
}

@media (max-width: 767.98px) {
    .hero-photo-card {
        min-height: 400px;
    }

    .hero-photo-content {
        padding: 2rem 1.25rem;
    }
}

/* ---- Category quick-nav (compact, with counts) ---- */

.category-card--quick .card-body {
    min-height: 150px;
    padding: 1.25rem 0.75rem;
}

.category-icon--sm {
    width: 48px;
    height: 48px;
    font-size: 1.3rem;
    margin-bottom: 0.65rem;
}

.category-count {
    font-size: 0.75rem;
    color: var(--text-muted);
}

/* ---- Listing card: category ribbon + price line ---- */

.listing-ribbon {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 10;

    padding: 0.3rem 0.75rem;
    border-radius: var(--radius-pill);

    background: var(--primary-color);
    color: #fff;

    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}



.listing-card-title {
    font-family: var(--font-heading);
    font-size: 1rem;
    font-weight: 700;
    color: var(--text-color);
}

.listing-card-subtitle {
    font-size: 0.78rem;
    color: var(--text-muted);
    letter-spacing: 0.01em;
}

.listing-card-footer {
    border-top: 1px solid var(--border-light);
    margin-top: 0.85rem;
    padding-top: 0.85rem;
}

/* ---- Sector highlight tiles ("Declinaisons par secteur") ---- */

.sector-tile {
    position: relative;
    border-radius: var(--radius-lg);
    overflow: hidden;
    min-height: 220px;
    display: flex;
    align-items: flex-end;
    color: #fff;
    box-shadow: var(--shadow-sm);
}

.sector-tile__content {
    position: relative;
    z-index: 1;
    padding: 1.5rem;
}

.sector-tile__icon {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.18);
    margin-bottom: 0.6rem;
    font-size: 1.1rem;
}

/* Sector tiles have their own white heading -- override the global
   h1-h6 { color: var(--text-color) } rule, which is unreadable (dark
   anthracite text) against these dark green/sand gradients. */
.sector-tile__content h5 {
    color: #fff;
}

.sector-tile__cta {
    /* .btn-sm elsewhere in the app is a fixed 32x32 icon-only square --
       this CTA needs to size to its "View listings" text instead. */
    width: auto;
    height: auto;
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
    padding: 0.4rem 0.9rem;
    background: #fff;
    color: var(--primary-color);
    font-weight: 600;
    border-radius: var(--radius-pill);
}

.sector-tile__cta:hover {
    background: var(--body-bg);
    color: var(--primary-color);
}

.sector-tile--dark {
    background: linear-gradient(150deg, #07543F 0%, #17211E 100%);
}

.sector-tile--light {
    background: linear-gradient(150deg, #087F5B 0%, #07543F 100%);
}

.sector-tile--sand {
    background: linear-gradient(150deg, #17211E 0%, #07543F 60%, #D9B77A 140%);
}

/* ---- Job card: ribbon + salary (compact horizontal layout) ---- */

.job-card {
    position: relative;
}

.listing-ribbon--inline {
    position: static;
    display: inline-flex;
    margin-right: 0.5rem;
}

.job-salary {
    font-weight: 700;
    color: var(--primary-color);
    margin-left: 4px;
}

@media (max-width: 768px) {
    .job-salary {
        display: block;
        margin-left: 0;
    }
}

/* ---- Job card: full layout (moved here from a per-card inline
   <style> that used to ship once per listing on every grid page --
   jobs/list.html renders this partial 8-20+ times per page, so this
   used to be duplicated that many times instead of loaded once,
   cached, like the rest of this stylesheet.) ---- */

.job-card-shell {
    position: relative;
}

.job-card-shell .favorite-btn {
    position: absolute;
    top: calc(50% - 14px);   /* centred on the card, same 28px size as the photo cards */
    right: 12px;
    width: 28px;
    height: 28px;
    z-index: 10;
}

.job-card-shell .favorite-btn i { font-size: .75rem; }
.lp-results .job-card-shell .featured-star,
.job-card-shell .featured-star.featured-star { top: calc(50% - 14px); right: 46px; }
.job-card-shell--featured .job-info { padding-right: 5.25rem; }

.job-card {
    display: flex;
    align-items: center;
    gap: .85rem;
    padding: .7rem 1rem;
    background: #fff;
    border: 1px solid var(--border-color, #e5e7eb);
    border-radius: var(--radius-md);
    text-decoration: none;
    color: inherit;
    transition: box-shadow 0.15s ease, border-color 0.15s ease;
}

.job-card:hover {
    box-shadow: var(--shadow-sm, 0 2px 8px rgba(0, 0, 0, 0.08));
    border-color: var(--primary-color);
    color: inherit;
    text-decoration: none;
}

.job-logo {
    flex: 0 0 auto;
}

.job-logo img {
    width: 46px;
    height: 46px;
    object-fit: contain;
    border-radius: var(--radius-sm, 8px);
    background: var(--bg-ivory, #F7F8F4);
}

/* Platform mark (no business logo): the mark is wider than tall and a
   single colour, so it gets breathing room inside a sage tile. */
.job-logo--mark img {
    padding: 10px;
    background: var(--secondary-bg, #E8F0EB);
}

.job-info {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    padding-right: 2.75rem;
}

.job-info__row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.job-title {
    font-weight: 700;
    font-family: var(--font-heading, inherit);
    color: var(--text-color, #17211E);
    margin: 0;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
}

.job-featured-badge {
    flex: 0 0 auto;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--accent-color, #D9B77A);
    color: #fff;
    font-size: 0.7rem;
}

.job-remote-badge {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    padding: 0.15rem 0.55rem;
    border-radius: 999px;
    background: var(--secondary-bg, #E8F0EB);
    color: var(--primary-color);
    font-size: 0.72rem;
    font-weight: 600;
}

.job-extra {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    color: var(--text-muted, #6b7280);
    font-size: 0.82rem;
}

.job-extra i {
    font-size: 0.78rem;
}

@media (max-width: 480px) {
    .job-card {
        padding: 0.75rem 0.9rem;
        gap: 0.65rem;
    }

    .job-logo img {
        width: 44px;
        height: 44px;
    }

    .job-info {
        padding-right: 1.75rem;
    }

    /* Hide only the least-essential detail on very narrow phones,
       rather than the original's blanket "hide all .job-extra info"
       -- jobs/list.html is always full-width (col-12), even on
       mobile, so there's room for the rest to simply wrap. */
    .job-extra--date {
        display: none;
    }
}

/* ---- Listing spec rows (housing/land/cars/projects cards) ---- */

.listing-specs {
    row-gap: 0.35rem;
}

.listing-specs small {
    white-space: nowrap;
}

/* Keep card titles / company names to a consistent number of lines so
   grid rows line up even when the underlying text length varies. */
.job-title,
.listing-card .card-body h5.text-primary {
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
}

/* ---- Category filter tabs (all_listings.html: /annonces) ---- */

.category-filter-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    border-bottom: 1px solid var(--border-light);
    padding-bottom: 1rem;
}

.category-filter-tab {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.45rem 0.9rem;
    border-radius: var(--radius-pill);
    background: var(--body-bg, #fff);
    border: 1px solid var(--border-light);
    color: var(--text-color);
    font-size: 0.85rem;
    font-weight: 600;
    text-decoration: none;
    transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.category-filter-tab:hover {
    background: var(--primary-soft);
    color: var(--primary-color);
    text-decoration: none;
}

.category-filter-tab.active {
    background: var(--primary-color);
    border-color: var(--primary-color);
    color: #fff;
}

.category-filter-count {
    font-size: 0.72rem;
    font-weight: 700;
    opacity: 0.75;
}

.category-filter-tab.active .category-filter-count {
    opacity: 0.9;
}

@media (max-width: 575.98px) {
    .category-filter-tabs {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 0.75rem;
    }

    .category-filter-tab {
        flex: 0 0 auto;
    }
}


/* ---- Listing cards: narrowest phones (below iPhone SE width) ----
   Placed after the earlier @media (max-width: 576px) blocks so it
   correctly overrides them here, per normal CSS cascade order for
   overlapping media queries of equal specificity. */
@media (max-width: 400px) {
    .listing-card .card-body {
        padding: 0.9rem;
    }

    .listing-card-title {
        font-size: 0.92rem;
    }

    .listing-price {
        font-size: 1.05rem;
    }

    .favorite-btn {
        width: 36px;
        height: 36px;
    }

    .favorite-btn i {
        font-size: 0.85rem;
    }

    .listing-ribbon {
        font-size: 0.62rem;
        padding: 0.25rem 0.6rem;
    }
}

/* =========================================================
   PRICE-PER-M2 ANALYTICS PAGE (Vert Horizon)
   ========================================================= */

.price-analytics-page .pa-filters-card {
    border: 1px solid var(--border-light);
    border-radius: var(--radius-lg);
}

.pa-geo-path {
    font-family: var(--font-heading);
    font-weight: 600;
    color: var(--primary-dark);
    font-size: 0.95rem;
}

.pa-stat-card {
    border: 1px solid var(--border-light);
    border-radius: var(--radius-lg);
    background: var(--surface-color);
}

.pa-stat-card-title {
    font-family: var(--font-heading);
    color: var(--text-color);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.pa-badge {
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--primary-color);
    background: var(--primary-soft);
    border-radius: var(--radius-pill);
    padding: 0.2rem 0.6rem;
    white-space: nowrap;
}

.pa-stat-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.85rem;
    margin-top: 0.75rem;
}

.pa-stat-grid > div {
    display: flex;
    flex-direction: column;
}

.pa-stat-value {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 1.15rem;
    color: var(--primary-dark);
}

.pa-stat-label {
    font-size: 0.72rem;
    color: var(--text-muted);
}

.pa-chart-title {
    font-family: var(--font-heading);
    color: var(--text-color);
    margin-bottom: 0.75rem;
}

.pa-ranking-table thead {
    background: var(--surface-alt);
}

.pa-ranking-table thead th {
    color: var(--text-color);
    font-weight: 600;
    border-bottom: none;
}

@media (max-width: 767.98px) {
    .pa-stat-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Price-per-m2 analytics -- branding pass (2026-09-18) */

.pa-hero {
    display: flex;
    align-items: center;
    gap: 0.9rem;
}

.pa-hero-icon {
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    border-radius: var(--radius-md);
    background: var(--primary-soft);
    display: flex;
    align-items: center;
    justify-content: center;
}

.pa-filter-label {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    color: var(--text-muted);
    font-weight: 600;
}

.pa-filter-label i {
    color: var(--primary-color);
}

.pa-stat-card--housing {
    border-top: 3px solid var(--primary-color);
}

.pa-stat-card--land {
    border-top: 3px solid var(--accent-color);
}


/* =========================================================
   Listing search (lp-*) -- shared by every category list page
   (templates/components/listing_search.html)
   ========================================================= */

.lp-page { padding-bottom: 3rem; }

.lp-crumbs {
    display: flex; align-items: center; gap: .5rem;
    padding: 1.25rem 0 .75rem;
    font-size: .875rem; color: var(--text-muted);
}
.lp-crumbs a { color: var(--primary-color); font-weight: 500; text-decoration: none; }
.lp-crumbs a:hover { text-decoration: underline; }
.lp-crumbs__sep { font-size: .6rem; }
.lp-crumbs__current { color: var(--text-color) !important; }
.lp-crumbs .dropdown-menu, .lp-menu .dropdown-menu { font-size: .875rem; font-family: inherit; padding: .4rem; min-width: 11rem; }
.lp-crumbs .dropdown-header, .lp-menu .dropdown-header { font-family: inherit; font-size: .75rem; font-weight: 600; letter-spacing: .02em; padding: .35rem .6rem; }
.lp-crumbs .dropdown-item, .lp-menu .dropdown-item { font-size: .875rem; font-weight: 500; line-height: 1.6; padding: .45rem .6rem; border-radius: 8px; color: var(--primary-color); }
.lp-crumbs .dropdown-item i, .lp-menu .dropdown-item i { width: 1.1em; text-align: center; font-size: .9em; }
.lp-crumbs .dropdown-item:hover, .lp-menu .dropdown-item:hover, .lp-crumbs .dropdown-item:focus, .lp-menu .dropdown-item:focus { background: var(--primary-soft); color: var(--primary-dark); }
.lp-crumbs .dropdown-item.active, .lp-menu .dropdown-item.active { background: var(--primary-soft-strong); color: var(--primary-dark); }

.lp-hero {
    display: flex; align-items: flex-end; justify-content: space-between;
    gap: 1rem; flex-wrap: wrap; margin-bottom: 1.25rem;
}
.lp-hero h1 { font-size: 1.25rem; font-weight: 700; letter-spacing: -.01em; margin: 0; }   /* same as page headings (h4) */
.lp-hero p { margin: 0; font-size: .875em; color: var(--text-muted); max-width: 40rem; }
.lp-count {
    display: inline-flex; align-items: center; gap: .5rem;
    background: var(--primary-soft-strong); color: var(--primary-dark);
    border-radius: var(--radius-pill); padding: .35rem .8rem;
    font-size: .8125rem; font-weight: 600;
}

/* panel */
.lp-panel {
    background: var(--surface-color);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    box-shadow: 0 1px 2px rgba(23, 33, 30, .05), 0 8px 24px rgba(23, 33, 30, .05);
    padding: .875rem;
}
.lp-searchbar { display: flex; gap: .625rem; flex-wrap: wrap; align-items: stretch; }
.lp-search { position: relative; flex: 1 1 260px; margin: 0; }
.lp-search i { position: absolute; left: 1rem; top: 50%; transform: translateY(-50%); color: var(--text-muted); pointer-events: none; }
.lp-search input {
    width: 100%; height: 50px; padding: 0 1rem 0 2.75rem;
    border: 1px solid var(--border-color); border-radius: var(--radius-md);
    background: var(--body-bg); font-size: .9375rem; color: var(--text-color);
    transition: border-color .15s, box-shadow .15s, background .15s;
}
.lp-search input:focus { outline: none; background: #fff; border-color: var(--primary-color); box-shadow: 0 0 0 4px rgba(8, 127, 91, .12); }

.lp-control {
    width: 100%; height: 44px; padding: 0 .75rem;
    border: 1px solid var(--border-color); border-radius: 10px;
    background-color: #fff; color: var(--text-color); font-size: .875rem;
    transition: border-color .15s, box-shadow .15s;
}
select.lp-control {
    appearance: none; -webkit-appearance: none; padding-right: 2.25rem;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none' stroke='%235b6a65' stroke-width='2'%3E%3Cpath d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right .875rem center;
}
.lp-control:focus { outline: none; border-color: var(--primary-color); box-shadow: 0 0 0 4px rgba(8, 127, 91, .12); }
.lp-searchbar > select.lp-control { width: auto; min-width: 170px; height: 50px; border-radius: var(--radius-md); flex: 0 1 190px; }

.lp-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
    height: 50px; padding: 0 1.25rem; border-radius: var(--radius-md);
    border: 1px solid transparent; font-weight: 600; font-size: .875rem;
    cursor: pointer; text-decoration: none; transition: background .15s, border-color .15s, color .15s;
}
.lp-btn--primary { background: var(--primary-color); color: #fff; }
.lp-btn--primary:hover { background: var(--primary-dark); color: #fff; }
.lp-btn--ghost { background: #fff; border-color: var(--border-color); color: var(--text-color); }
.lp-btn--ghost:hover { border-color: var(--primary-color); color: var(--primary-color); }
.lp-btn:focus-visible, .lp-link:focus-visible, .lp-tag:focus-visible { outline: 3px solid rgba(8, 127, 91, .35); outline-offset: 2px; }
.lp-toggle[aria-expanded="true"] { background: var(--primary-soft-strong); border-color: var(--primary-color); color: var(--primary-color); }
.lp-toggle__chev { font-size: .7rem; transition: transform .2s; }
.lp-toggle[aria-expanded="true"] .lp-toggle__chev { transform: rotate(180deg); }
.lp-badge {
    display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 .4rem;
    border-radius: var(--radius-pill); background: var(--primary-color); color: #fff; font-size: .6875rem;
}

/* quick-filter chips (radio groups; the checked state is pure CSS) */
.lp-chip-rows { display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; padding: .875rem .125rem .25rem; }
.lp-chips { display: flex; gap: .5rem; overflow-x: auto; scrollbar-width: none; max-width: 100%; }
.lp-chips::-webkit-scrollbar { display: none; }
.lp-chip { position: relative; flex: none; margin: 0; cursor: pointer; }
.lp-chip input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.lp-chip span {
    display: inline-flex; align-items: center; gap: .5rem;
    padding: .5rem .875rem; border-radius: var(--radius-pill);
    border: 1px solid var(--border-color); background: #fff;
    font-size: .84375rem; font-weight: 500; color: var(--text-color);
    transition: border-color .15s, background .15s, color .15s;
}
.lp-chip span i { font-size: .8rem; opacity: .85; }
.lp-chip:hover span { border-color: var(--primary-color); }
.lp-chip input:checked + span { background: var(--primary-color); border-color: var(--primary-color); color: #fff; }
.lp-chip input:focus-visible + span { outline: 3px solid rgba(8, 127, 91, .35); outline-offset: 2px; }

/* advanced filters */
.lp-advanced { border-top: 1px dashed var(--border-color); margin-top: .875rem; padding-top: 1rem; }
.lp-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: .875rem; }
.lp-label { display: block; margin-bottom: .375rem; font-size: .75rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--text-muted); }
.lp-pair .lp-control { min-width: 0; }
.lp-pair { display: flex; align-items: center; gap: .5rem; color: var(--text-muted); }
.lp-switch { display: flex; align-items: center; gap: .625rem; height: 44px; margin: 0; cursor: pointer; font-weight: 500; }
.lp-switch input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.lp-switch__track { position: relative; flex: none; width: 42px; height: 24px; border-radius: var(--radius-pill); background: #cfd8d3; transition: background .2s; }
.lp-switch__track::after { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .2); transition: left .2s; }
.lp-switch input:checked + .lp-switch__track { background: var(--primary-color); }
.lp-switch input:checked + .lp-switch__track::after { left: 21px; }
.lp-switch input:focus-visible + .lp-switch__track { outline: 3px solid rgba(8, 127, 91, .35); outline-offset: 2px; }
.lp-field-group:has(.lp-switches) { grid-column: 1 / -1; }
.lp-switches { display: flex; flex-wrap: wrap; gap: .25rem 1.75rem; }
.lp-advanced__actions { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; margin-top: 1.125rem; }
.lp-advanced__actions .lp-btn { height: 44px; }
.lp-link { display: inline-flex; align-items: center; gap: .5rem; background: none; border: 0; padding: 0; color: var(--text-muted); font-weight: 500; font-size: .875rem; text-decoration: none; cursor: pointer; }
.lp-link:hover { color: var(--primary-color); }

/* active filters */
.lp-tags { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin-top: 1rem; }
.lp-tag {
    position: relative;   /* keeps the .visually-hidden label inside the scrolling tag row */
    display: inline-flex; align-items: center; gap: .5rem; padding: .3rem .65rem;
    border-radius: var(--radius-sm); background: var(--primary-soft-strong); color: var(--primary-dark);
    font-size: .8125rem; font-weight: 500; text-decoration: none;
}
.lp-tag i { font-size: .7rem; opacity: .7; }
.lp-tag:hover { background: #d6e6dd; color: var(--primary-dark); }

/* results */
.lp-toolbar { display: flex; justify-content: space-between; align-items: center; gap: .75rem; flex-wrap: wrap; margin: 1.375rem 0 1rem; }
.lp-results-count { margin: 0; color: var(--text-muted); font-size: .9375rem; }
.lp-results-count strong { color: var(--text-color); }
.lp-results-count__place { margin-left: .25rem; }
.lp-sort { display: flex; align-items: center; gap: .625rem; margin: 0; color: var(--text-muted); font-size: .875rem; }
.lp-sort .lp-control { height: 38px; width: auto; min-width: 170px; }

.lp-results .listing-card {
    border: 1px solid var(--border-color); border-radius: var(--radius-lg);
    box-shadow: none; transition: transform .2s, box-shadow .2s, border-color .2s;
}
.lp-results .listing-card:hover { transform: translateY(-3px); box-shadow: 0 10px 28px rgba(23, 33, 30, .09); border-color: #cdd8d2; }
.lp-results .listing-card .card-img-top { border-radius: 0; }
@media (prefers-reduced-motion: reduce) {
    .lp-results .listing-card, .lp-chip span, .lp-toggle__chev { transition: none; }
    .lp-results .listing-card:hover { transform: none; }
}

.lp-empty { text-align: center; background: #fff; border: 1px dashed var(--border-color); border-radius: var(--radius-lg); padding: 3rem 1rem; margin: 1rem 0 2rem; }
.lp-empty i { font-size: 1.75rem; color: var(--primary-color); margin-bottom: .75rem; }
.lp-empty h2 { font-size: 1.25rem; font-weight: 700; margin-bottom: .25rem; }
.lp-empty p { color: var(--text-muted); margin-bottom: 1.25rem; }

.lp-pager { display: flex; justify-content: center; flex-wrap: wrap; gap: .375rem; margin: 1rem 0 2rem; }
.lp-pager a, .lp-pager__gap {
    min-width: 40px; height: 40px; display: grid; place-items: center; padding: 0 .5rem;
    border: 1px solid var(--border-color); border-radius: 10px; background: #fff;
    color: var(--text-color); font-weight: 600; text-decoration: none;
}
.lp-pager__gap { border-color: transparent; background: none; }
.lp-pager a:hover { border-color: var(--primary-color); color: var(--primary-color); }
.lp-pager a.is-current { background: var(--primary-color); border-color: var(--primary-color); color: #fff; }

@media (max-width: 767.98px) {
    .lp-searchbar > select.lp-control { flex: 1 1 100%; width: 100%; }
    .lp-btn { flex: 1 1 auto; }
    .lp-advanced__actions .lp-btn { flex: 1; }
    .lp-sort { width: 100%; }
    .lp-sort .lp-control { flex: 1; }
}


/* sheet pieces are phone-only */
.lp-sheet-head, .lp-sheet-backdrop { display: none; }
.featured-star { display: none; }  /* only shown inside .lp-results (result cards) */

/* ==========================================================================
   Result cards (all widths): price first, then title, location, specs; the
   "featured" star sits on the photo next to the heart instead of in the title row.
   ========================================================================== */
.lp-results .listing-card:not(.listing-card--job) { height: 100%; }   /* equal-height cards per row ... */
.lp-results .listing-card:not(.listing-card--job) .card-body { display: flex; flex-direction: column; flex: 1 1 auto; }
.lp-results .listing-card:not(.listing-card--job) .listing-card-footer { margin-top: auto; }   /* ... with the button aligned at the bottom */
.lp-results .listing-card:not(.listing-card--job) .listing-specs { margin-bottom: .85rem !important; }
.lp-results .listing-card:not(.listing-card--job) .listing-price { order: -1; margin-bottom: .7rem !important; }
.lp-results .listing-card:not(.listing-card--job) .listing-card-title { margin-bottom: .45rem !important; }
.lp-results .listing-card:not(.listing-card--job) .listing-card-title > small.ms-2 { display: none; }
.lp-results .listing-card:not(.listing-card--job) .featured-star,
#carouselImages .featured-star,
.job-card-shell .featured-star {
    display: grid; place-items: center; position: absolute; top: 8px; right: 42px; z-index: 3;
    width: 28px; height: 28px; border-radius: 50%; background: var(--sand, #D9B77A); color: var(--text-color);
    box-shadow: 0 1px 4px rgba(0, 0, 0, .2); font-size: .72rem; pointer-events: none;
}
.lp-results .listing-card:not(.listing-card--job) .favorite-btn,
#carouselImages .favorite-btn { width: 28px; height: 28px; top: 8px; right: 8px; }
.lp-results .listing-card:not(.listing-card--job) .favorite-btn i,
#carouselImages .favorite-btn i { font-size: .75rem; }
.lp-results .listing-card:not(.listing-card--job) .carousel { z-index: 2; }
.lp-results .listing-card:not(.listing-card--job) .favorite-btn,
.lp-results .listing-card:not(.listing-card--job) .carousel-control-prev,
.lp-results .listing-card:not(.listing-card--job) .carousel-control-next,
.lp-results .listing-card:not(.listing-card--job) .carousel-indicators { z-index: 3; }
.lp-results .listing-card:not(.listing-card--job) .favorite-btn { z-index: 10; }
/* The prev / next arrows start below the top-right buttons (star + heart): they used to
   cover the heart on photos with several images, so tapping it just slid to the next photo. */
.lp-results .listing-card:not(.listing-card--job) .carousel-control-prev,
.lp-results .listing-card:not(.listing-card--job) .carousel-control-next,
#carouselImages .carousel-control-prev,
#carouselImages .carousel-control-next { top: 44px; }

/* ==========================================================================
   Phones (<= 575.98px): compact, search-first layout ("Option A")
   Search row + horizontally scrolling type chips + segmented transaction bar,
   advanced filters in a bottom sheet, active filters on one scrolling row,
   compact vertical cards where the whole card is the link. Tablet and
   desktop styles above are untouched.
   ========================================================================== */
@media (max-width: 575.98px) {
    .lp-page { padding-bottom: 2rem; }
    .lp-crumbs { padding: .6rem 0 .15rem; font-size: .8125rem; }

    /* heading: title only, the count already sits in the results toolbar */
    .lp-hero { flex-wrap: nowrap; margin-bottom: .6rem; }
    .lp-hero h1 { font-size: 1.25rem; }
    .lp-hero p, .lp-count { display: none; }

    /* the panel disappears: controls sit directly on the page */
    .lp-panel { background: transparent; border: 0; box-shadow: none; padding: 0; border-radius: 0; }

    /* search row: [ search ........ ] [filters] [go] */
    .lp-searchbar { flex-wrap: wrap; gap: .5rem; }
    .lp-search { order: 1; flex: 1 1 calc(100% - 100px); min-width: 0; }  /* leaves room for the two 42px buttons so extra selects wrap below */
    .lp-search input { height: 42px; border-radius: 12px; font-size: .9rem; padding-left: 2.4rem; }
    .lp-search i { left: .85rem; }
    .lp-searchbar > .lp-toggle { order: 2; }
    .lp-searchbar > .lp-submit { order: 3; }
    .lp-searchbar > select.lp-control {   /* cars: make / model wrap under the row */
        order: 4; flex: 1 1 calc(50% - .25rem); width: auto; min-width: 0; height: 42px; border-radius: 12px;
    }
    .lp-searchbar > .lp-btn { flex: 0 0 42px; width: 42px; height: 42px; padding: 0; border-radius: 12px; position: relative; }
    .lp-searchbar > .lp-btn .lp-btn__label,
    .lp-searchbar > .lp-btn .lp-toggle__chev { display: none; }
    .lp-searchbar > .lp-btn i { font-size: .95rem; }
    .lp-toggle .lp-badge { position: absolute; top: -6px; right: -6px; min-width: 18px; height: 18px; font-size: .625rem; padding: 0 .3rem; box-shadow: 0 0 0 2px var(--body-bg); }

    /* quick filters */
    .lp-chip-rows { flex-direction: column; flex-wrap: nowrap; gap: .4rem; padding: .6rem 0 0; }
    .lp-chips { margin: 0 -12px; padding: 0 12px 2px; gap: .4rem; }
    .lp-chip span { padding: .3rem .7rem; font-size: .8rem; gap: .4rem; }
    .lp-chip span i { font-size: .72rem; }

    /* transaction type: segmented control */
    .lp-chips--transaction_type {
        display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 0; margin: 0; padding: 3px;
        overflow: visible; background: #fff; border: 1px solid var(--border-color); border-radius: 12px;
    }
    .lp-chips--transaction_type .lp-chip span {
        width: 100%; justify-content: center; border: 0; border-radius: 9px; padding: .4rem .25rem; background: transparent;
    }
    .lp-chips--transaction_type .lp-chip span i { display: none; }
    .lp-chips--transaction_type .lp-chip input:checked + span { background: var(--primary-color); color: #fff; }

    /* active filters: one scrolling row */
    .lp-tags { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: .6rem -12px 0; padding: 0 12px; gap: .4rem; }
    .lp-tags::-webkit-scrollbar { display: none; }
    .lp-tag, .lp-tags .lp-link { flex: none; white-space: nowrap; }
    .lp-tags .lp-link { padding: .3rem .25rem; }

    /* toolbar: count + compact sort on one line */
    .lp-toolbar { flex-wrap: nowrap; margin: .7rem 0 .6rem; gap: .5rem; }
    .lp-results-count { font-size: .8125rem; min-width: 0; }
    .lp-results-count__place { display: none; }
    .lp-sort { width: auto; flex: none; }
    .lp-sort > span { display: none; }
    .lp-sort .lp-control { height: 34px; min-width: 0; width: auto; font-size: .8125rem; border-radius: 10px; }

    /* ---- advanced filters: bottom sheet ---- */
    body.lp-sheet-lock { overflow: hidden; }
    .lp-sheet-backdrop { position: fixed; inset: 0; z-index: 1999; background: rgba(23, 33, 30, .45); }
    .lp-sheet-backdrop:not([hidden]) { display: block; }
    #moreFilters.collapse:not(.lp-sheet-open),
    #moreFilters.collapsing { display: none !important; }
    #moreFilters.lp-sheet-open {
        display: block !important; height: auto !important;
        position: fixed; left: 0; right: 0; bottom: 0; z-index: 2000;
        max-height: 84vh; max-height: 84dvh; overflow-y: auto; overscroll-behavior: contain;
        background: #fff; border-radius: 20px 20px 0 0;
        box-shadow: 0 -10px 40px rgba(23, 33, 30, .25);
        animation: lp-sheet-in .22s ease-out;
    }
    #moreFilters .lp-advanced { border-top: 0; margin: 0; padding: 0 1rem 0; }
    .lp-sheet-head {
        display: flex; align-items: center; justify-content: space-between;
        position: sticky; top: 0; z-index: 1; background: #fff;
        padding: .9rem 0 .7rem; margin-bottom: .25rem;
    }
    .lp-sheet-head::before {   /* grab handle */
        content: ""; position: absolute; top: .4rem; left: 50%; width: 40px; height: 4px;
        margin-left: -20px; border-radius: 4px; background: #d3dbd7;
    }
    .lp-sheet-head strong { font-size: 1.05rem; font-weight: 700; }
    .lp-sheet-close { width: 36px; height: 36px; display: grid; place-items: center; border: 0; border-radius: 50%; background: var(--body-bg); color: var(--text-color); }
    #moreFilters .lp-grid { grid-template-columns: 1fr 1fr; gap: .75rem; }
    #moreFilters .lp-grid > .lp-field-group { min-width: 0; }
    /* country / city / neighborhood, budget, selection use the full width */
    #moreFilters .lp-grid > .lp-field-group:nth-child(-n+3),
    #moreFilters .lp-grid > .lp-field-group:nth-child(4),
    #moreFilters .lp-grid > .lp-field-group:has(.lp-switches) { grid-column: 1 / -1; }
    #moreFilters .lp-control { height: 42px; }
    #moreFilters .lp-switch { height: 40px; }
    #moreFilters .lp-advanced__actions {
        position: sticky; bottom: 0; background: #fff; flex-wrap: nowrap; gap: .75rem;
        margin: .75rem -1rem 0; padding: .75rem 1rem calc(.75rem + env(safe-area-inset-bottom));
        border-top: 1px solid var(--border-light);
    }
    #moreFilters .lp-advanced__actions .lp-btn { flex: 1; height: 44px; }

    /* ---- compact vertical cards (only inside result lists) ---- */
    .lp-results .row { --bs-gutter-y: 0; }
    .lp-results .row > [class*="col-"] { margin-bottom: .75rem !important; }
    .lp-results .listing-card:not(.listing-card--job) { border-radius: 14px; }
    .lp-results .listing-card:not(.listing-card--job):hover { transform: none; box-shadow: none; }
    .lp-results .listing-card:not(.listing-card--job) .card-img-top { aspect-ratio: 2 / 1; }
    .lp-results .listing-card:not(.listing-card--job) .card-body { padding: .65rem .8rem .75rem; }
    .lp-results .listing-card:not(.listing-card--job) .listing-price { font-size: 1.05rem; margin-bottom: .1rem !important; }
    .lp-results .listing-card:not(.listing-card--job) .listing-card-title { font-size: .95rem; }
    .lp-results .listing-card:not(.listing-card--job) .card-body > p { margin-bottom: .35rem !important; }
    .lp-results .listing-card:not(.listing-card--job) .listing-specs { margin-bottom: 0 !important; justify-content: flex-start !important; gap: .25rem 1rem !important; }
    .lp-results .listing-card:not(.listing-card--job) .listing-ribbon { font-size: .62rem; padding: .2rem .55rem; }
    /* "View Details" stays in the DOM (keyboard + screen readers) but the whole card is the tap target */
    .lp-results .listing-card:not(.listing-card--job) .listing-card-footer { margin: 0; padding: 0; border: 0; }
    .lp-results .listing-card:not(.listing-card--job) .listing-card-footer .btn {
        display: block; width: 0 !important; height: 0; padding: 0; border: 0; overflow: hidden;
        font-size: 0; line-height: 0; background: none; box-shadow: none;
    }
    .lp-results .listing-card:not(.listing-card--job) .listing-card-footer .btn::after {
        content: ""; position: absolute; inset: 0; z-index: 1; border-radius: inherit;
    }
    /* The photo block sits above the stretched link. Safari gives .carousel-item its own
       stacking context (backface-visibility), which used to leave the heart UNDER the
       link so tapping it opened the listing instead of saving it. */
    .lp-results .listing-card:not(.listing-card--job) .carousel { z-index: 2; }
    .lp-results .listing-card:not(.listing-card--job) .carousel-control-prev,
    .lp-results .listing-card:not(.listing-card--job) .carousel-control-next { width: 14%; }

    .lp-pager { margin: .5rem 0 1.5rem; }
}
@keyframes lp-sheet-in { from { transform: translateY(24px); opacity: .6; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { #moreFilters.lp-sheet-open { animation: none; } }


/* ==========================================================================
   Navbar brand lockup: house mark + "Mittimmo" + tagline.
   Pure CSS (no JS): the tagline is sized and letter-spaced in em relative to
   the name, so it is always exactly as wide as "Mittimmo" at every size and
   nothing re-measures or moves while scrolling on mobile. Only the font-size
   on .brand-lockup-text needs to change per breakpoint.
   (0.36em / 0.0635em were measured with Manrope 800 + Inter 500.)
   ========================================================================== */
.mittimmo-navbar .brand-lockup {
    gap: 0.6rem;
    padding-top: 0;
    padding-bottom: 0;
}

.brand-lockup-mark {
    height: 44px;
    width: auto;
    display: block;
}

.brand-lockup-text {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
    line-height: 1;
    font-size: 1.4rem;
}

.brand-lockup-name {
    font-family: "Manrope", "Inter", system-ui, sans-serif;
    font-weight: 800;
    font-size: 1em;
    letter-spacing: -0.01em;
    color: #07543F;
}

.brand-lockup-tagline {
    font-family: "Inter", system-ui, sans-serif;
    font-weight: 500;
    font-size: 0.36em;
    letter-spacing: 0.0635em;
    margin-right: -0.0635em;   /* cancel the trailing letter-space */
    text-transform: uppercase;
    white-space: nowrap;
    color: #087F5B;
    margin-top: 0.6em;
}

@media (max-width: 575.98px) {
    .brand-lockup-mark { height: 38px; }
    .brand-lockup-text { font-size: 1.25rem; }
}


/* ==========================================================================
   Bootstrap pagination (professional/properties.html tabs) restyled to match
   the public listing pager (.lp-pager): rounded square buttons, green current
   page, chevron-only previous/next that disappear when there is no such page.
   Opt-in via the .lp-bs-pager class on the <nav>.
   ========================================================================== */
.lp-bs-pager .pagination {
    --bs-pagination-border-width: 0;
    gap: .375rem;
    flex-wrap: wrap;
    margin: 1rem 0 2rem;
}
.lp-bs-pager .page-item .page-link,
.lp-bs-pager .page-item:not(:first-child) .page-link {
    min-width: 40px; height: 40px; margin: 0; padding: 0 .5rem;
    display: grid; place-items: center;
    border: 1px solid var(--border-color); border-radius: 10px;
    background: #fff; color: var(--text-color);
    font-weight: 600; text-decoration: none; box-shadow: none;
}
.lp-bs-pager .page-item .page-link:hover { border-color: var(--primary-color); color: var(--primary-color); background: #fff; }
.lp-bs-pager .page-item .page-link:focus-visible { outline: 3px solid rgba(8, 127, 91, .35); outline-offset: 1px; }
.lp-bs-pager .page-item.active .page-link { background: var(--primary-color); border-color: var(--primary-color); color: #fff; }
/* "..." gap */
.lp-bs-pager .page-item.disabled .page-link { border-color: transparent; background: none; color: var(--text-color); }
/* No previous / next button when there is no previous / next page */
.lp-bs-pager .page-item.disabled:first-child,
.lp-bs-pager .page-item.disabled:last-child { display: none; }

/* Clickable person name (admin users, team, tenants, investors, sessions):
   brand green, never underlined; only a slightly darker green on hover. */
.user-name-link { color: var(--primary-color, #087F5B); text-decoration: none; }
.user-name-link:hover, .user-name-link:focus-visible { color: #07543F; text-decoration: none; }

/* ── Tenants tab: one row per tenant, units shown as chips ───────────────── */
.tenant-unit-group { line-height: 1.9; }
.tenant-unit-chip {
    display: inline-block;
    margin: 0 .25rem .2rem 0;
    padding: .1rem .55rem;
    border-radius: 8px;
    background: #E8F0EB;
    color: #07543F;
    font-size: .85rem;
    font-weight: 600;
}
.tenant-unit-chip.is-archived { opacity: .55; text-decoration: line-through; }
.tenant-add-units {
    max-height: 9rem;
    overflow-y: auto;
    padding: .5rem .75rem;
    border: 1px solid #dee2e6;
    border-radius: 8px;
    background: #F7F8F4;
}

/* =========================================================
   Featured listings strip on listing detail (desktop slider, phone swipe row)
   (templates/components/featured_strip.html, js/featured-strip.js)
   ========================================================= */
.fs { margin: 1.75rem 0 1.5rem; }
.fs__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: .75rem; }
.fs__title { font-size: 1rem; margin: 0; display: flex; align-items: center; gap: .5rem; }
.fs__title i { color: #b8913f; }
.fs__ctrl { display: flex; gap: .4rem; }
.fs__btn { width: 28px; height: 28px; padding: 0; border-radius: 50%; border: 1px solid var(--border-color, #dde2db); background: #fff; color: var(--primary-dark); font-size: .7rem; line-height: 1; cursor: pointer; }
.fs__btn:hover { background: var(--primary-soft); }
.fs__track { display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding: 2px; }
.fs__track::-webkit-scrollbar { display: none; }
.fs__item { position: relative; flex: 0 0 calc((100% - 28px) / 3); min-width: 0; scroll-snap-align: start; background: #fff; border: 1px solid var(--border-color, #e3e7e1); border-radius: 12px; overflow: hidden; color: inherit; text-decoration: none; transition: box-shadow .15s; }
.fs__item:hover { box-shadow: 0 6px 18px rgba(0,0,0,.08); color: inherit; }
.fs__link, .fs__link:hover { display: block; color: inherit; text-decoration: none; }
.fs__img { position: relative; aspect-ratio: 3 / 2; background: var(--primary-soft); }
.fs__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Star and heart match the result cards (.lp-results): 28px circles in the photo's top-right corner, star
   (sand, dark star) to the left of the heart. The heart is the page-wide .favorite-btn, so saving works the same. */
.fs__star { position: absolute; top: 8px; right: 42px; z-index: 3; width: 28px; height: 28px; border-radius: 50%; background: var(--sand, #D9B77A); color: var(--text-color); box-shadow: 0 1px 4px rgba(0, 0, 0, .2); display: grid; place-items: center; font-size: .72rem; pointer-events: none; }
.fs__tx, .fs__ty { position: absolute; left: 8px; z-index: 3; display: inline-flex; align-items: center; gap: .4rem; max-width: calc(100% - 100px); background: rgba(255,255,255,.94); color: var(--primary-dark); font-size: .72rem; font-weight: 600; line-height: 1.3; padding: .28rem .65rem; border-radius: 999px; box-shadow: 0 1px 4px rgba(0, 0, 0, .15); pointer-events: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fs__tx { top: 8px; height: 28px; }
.fs__ty { bottom: 8px; max-width: calc(100% - 16px); }
.fs__item .favorite-btn { width: 28px; height: 28px; top: 8px; right: 8px; z-index: 4; }
.fs__item .favorite-btn i { font-size: .75rem; }
.fs__body { padding: .7rem .8rem .8rem; }
.fs__price { font-family: Manrope, sans-serif; font-weight: 700; font-size: 1rem; color: var(--primary-dark); margin-bottom: .4rem; }
.fs__name { font-size: .8rem; font-weight: 500; margin-bottom: .3rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fs__loc { font-size: .72rem; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fs__dots { display: flex; justify-content: center; gap: 6px; margin-top: .6rem; }
.fs__dots i { width: 6px; height: 6px; border-radius: 50%; background: #cfd6cc; transition: width .2s, background .2s; }
.fs__dots i.on { width: 16px; border-radius: 99px; background: var(--primary-color); }

/* =========================================================
   Job detail page (templates/components/job_detail.html)
   Header + body on the left, sticky apply card on the right;
   one column on phones with the apply card right under the header.
   ========================================================= */
.jd { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); column-gap: 24px; align-items: start; }
.jd__head { grid-column: 1; grid-row: 1; margin-bottom: 1.25rem; padding: 1.4rem 1.5rem; }
.jd__body { grid-column: 1; grid-row: 2; min-width: 0; }
.jd__side { grid-column: 2; grid-row: 1 / span 2; min-width: 0; }
.jd__sticky { position: sticky; top: 1rem; }
.jd .card { border-radius: 14px; }
.jd__body > .card { padding: 1.4rem 1.5rem; margin-bottom: 1.25rem; }

.jd__top { display: flex; gap: 1rem; align-items: flex-start; }
.jd__logo { flex: none; width: 64px; height: 64px; border-radius: 14px; border: 1px solid var(--border-color); background: #fff; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.jd__logo img { width: 100%; height: 100%; object-fit: contain; }
.jd__logo--mark { background: var(--primary-soft); }
.jd__logo--mark img { width: 62%; height: 62%; }
.jd__titles { min-width: 0; }
.jd__title { font-size: 1.55rem; line-height: 1.2; margin: 0 0 .25rem; }
.jd__company { color: var(--primary-color); font-weight: 600; }
.jd__meta { display: flex; flex-wrap: wrap; gap: .25rem 1rem; margin-top: .5rem; font-size: .8125rem; color: var(--text-muted); }
.jd__meta i { margin-right: .35rem; opacity: .7; }
.jd__chips { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1rem; }
.jd__chip { display: inline-flex; align-items: center; gap: .4rem; padding: .3rem .75rem; border-radius: 99px; font-size: .78rem; font-weight: 500; background: #fff; border: 1px solid var(--border-color); color: var(--text-color); }
.jd__chip--solid { background: var(--primary-soft); border-color: transparent; color: var(--primary-dark); }
.jd__chip--warn { background: #FBEDEF; border-color: transparent; color: #8f2a36; }

.jd__h { font-size: 1rem; margin: 0 0 .85rem; display: flex; align-items: center; gap: .5rem; }
.jd__h i { color: var(--primary-color); font-size: .9rem; }
.jd__h--gap { margin-top: 1.4rem; }
.jd__facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: .75rem; }
.jd__fact { border: 1px solid var(--border-color); border-radius: 10px; padding: .75rem .9rem; }
.jd__fact small { display: flex; align-items: center; gap: .4rem; color: var(--text-muted); font-size: .7rem; text-transform: uppercase; letter-spacing: .03em; margin-bottom: .25rem; }
.jd__fact b { font-weight: 600; font-size: .9rem; }
.jd__muted { display: block; color: var(--text-muted); font-size: .75rem; margin-top: .1rem; }
.jd__desc { white-space: pre-line; line-height: 1.7; font-size: .9rem; }
.jd__tags { display: flex; flex-wrap: wrap; gap: .5rem; }
.jd__tag { padding: .3rem .75rem; border-radius: 8px; background: #F1F4EF; border: 1px solid var(--border-color); font-size: .8rem; font-weight: 500; }
.jd__benefits { list-style: none; margin: 0; padding: 0; display: grid; gap: .4rem; font-size: .9rem; }
.jd__benefits i { color: var(--primary-color); margin-right: .4rem; }

.jd__apply { padding: 1.25rem 1.3rem; margin-bottom: 1.25rem; }
.jd__salary { font-family: Manrope, sans-serif; font-weight: 800; font-size: 1.2rem; line-height: 1.25; color: var(--primary-dark); }
.jd__salary--none { font-size: 1rem; font-weight: 700; color: var(--text-muted); }
.jd__per { font-size: .8125rem; color: var(--text-muted); margin-top: .15rem; }
.jd__actions { display: grid; gap: .6rem; margin-top: 1rem; }
.jd__pair { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; }
.jd__pair--sec { grid-template-columns: 1fr 1fr auto; } /* + the security badge */
.jd__btn--icon { width: auto; padding-left: .85rem; padding-right: .85rem; }
.jd__btn { display: flex; align-items: center; justify-content: center; gap: .5rem; width: 100%; height: auto; padding: .6rem .75rem; border-radius: 10px; font-weight: 600; font-size: .875rem; }
/* the shared heart button is a floating 42px circle elsewhere; here it is a normal button */
.jd__btn.favorite-btn { width: 100%; height: auto; border-radius: 10px; box-shadow: none; position: static; transform: none; animation: none; background: #fff; border: 1px solid var(--primary-color); }
.jd__btn.favorite-btn i { font-size: 1em; color: inherit; transform: none; }
.jd__btn.favorite-btn:hover { background: var(--primary-soft); transform: none; }
.jd__btn.favorite-btn.favorited i { color: #C83E4D; }
.jd__deadline { margin-top: 1rem; padding: .7rem .85rem; border-radius: 10px; background: var(--primary-soft); display: flex; gap: .7rem; align-items: center; font-size: .8125rem; color: var(--text-color); }
.jd__deadline b { display: block; font-size: .85rem; }
.jd__deadline i { font-size: 1.1rem; color: var(--primary-color); }
.jd__deadline--soon { background: #FBF5E8; } .jd__deadline--soon i { color: #9a7a2f; }
.jd__deadline--closed { background: #FBEDEF; } .jd__deadline--closed i { color: #C83E4D; }

.jd__employer { padding: 1rem 1.3rem; margin-bottom: 1.25rem; }
.jd__poster { display: flex; gap: .85rem; align-items: center; }
.jd__avatar { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; border: 1px solid var(--border-color); background: #fff; }
.jd__poster small { display: block; color: var(--text-muted); font-size: .78rem; }
/* name on the left, the poster's rating group on the right; it drops under the name when the name is long */
.hd__poster > div:last-child, .jd__poster > div:last-child { flex: 1; min-width: 0; }
.hd__poster .hd__agency, .jd__poster .hd__agency { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: .1rem .75rem; }
.hd__who { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: .1rem .75rem; }

/* job variant of the featured / latest strip: logo instead of a photo */
.fs__img--logo { display: flex; align-items: center; justify-content: center; background: var(--primary-soft); }
.fs__img--logo img { width: 38%; height: auto; max-height: 70%; object-fit: contain; }

@media (max-width: 991.98px) {
    /* phones/tablets: header, apply card, details, then employer + map */
    .jd { display: flex; flex-direction: column; align-items: stretch; }
    .jd__side, .jd__sticky { display: contents; }
    .jd__head { order: 1; }
    .jd__apply { order: 2; }
    .jd__body { order: 3; }
    .jd__employer { order: 4; }
    .jd__map { order: 5; }
    .jd__title { font-size: 1.3rem; }
}
@media (max-width: 575.98px) {
    .jd__head, .jd__body > .card { padding: 1.1rem 1.1rem; }
    .jd__logo { width: 52px; height: 52px; }
    .jd__facts { grid-template-columns: repeat(2, 1fr); }
}
.fs__img--logo + .fs__body .fs__price { font-size: .85rem; line-height: 1.3; }

/* phones / tablets: a swipe row (about 1.6 cards visible), no arrows, dots or auto-slide */
@media (max-width: 991.98px) {
    .fs { margin: 1.25rem 0 1rem; }
    .fs__ctrl, .fs__dots { display: none; }
    .fs__track { gap: 12px; margin: 0 -1rem; padding: 2px 1rem 6px; scroll-padding-left: 1rem; -webkit-overflow-scrolling: touch; }
    .fs__item { flex: 0 0 min(62%, 250px); }
}
@media (min-width: 576px) and (max-width: 991.98px) {
    .fs__track { margin: 0; padding-left: 2px; padding-right: 2px; }
    .fs__item { flex-basis: calc((100% - 24px) / 3); }
}

/* Homepage: "About us" strip at the bottom (templates/public/index.html) */
.home-about { display: flex; align-items: center; gap: 1.1rem; padding: 1.1rem 1.4rem; border: 1px solid var(--border-color); border-radius: 16px; background: var(--primary-soft); color: var(--text-color); text-decoration: none; transition: box-shadow .15s, border-color .15s; }
.home-about:hover { border-color: var(--primary-color); box-shadow: 0 6px 18px rgba(23,33,30,.08); color: var(--text-color); }
.home-about__mark { flex: none; width: 48px; height: 48px; border-radius: 14px; background: #fff; color: var(--primary-color); display: flex; align-items: center; justify-content: center; }
.home-about__text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .1rem; }
.home-about__text strong { font-family: var(--font-heading); font-size: 1rem; }
.home-about__text span { color: var(--text-muted); font-size: .85rem; }
.home-about__cta { flex: none; display: inline-flex; align-items: center; gap: .5rem; padding: .55rem 1rem; border-radius: 10px; border: 1.5px solid var(--primary-color); background: #fff; color: var(--primary-color); font-weight: 600; font-size: .875rem; white-space: nowrap; }
.home-about:hover .home-about__cta { background: var(--primary-color); color: #fff; }
@media (max-width: 575.98px) {
    .home-about { flex-wrap: wrap; padding: 1rem; }
    .home-about__text { flex: 1 1 calc(100% - 80px); }
    .home-about__cta { width: 100%; justify-content: center; }
}

/* =========================================================
   Housing detail page (templates/components/housing_detail.html)
   Gallery, header, stats, description, info + location and amenity cards on the
   left; sticky price card on the right. Phones: gallery -> price -> details.
   ========================================================= */
.hd { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); column-gap: 24px; align-items: start; }
.hd__gallery { grid-column: 1; grid-row: 1; min-width: 0; }
.hd__body { grid-column: 1; grid-row: 2; min-width: 0; }
.hd__side { grid-column: 2; grid-row: 1 / span 2; min-width: 0; align-self: stretch; }
.hd__sticky { position: sticky; top: 1rem; }
.hd .card { border-radius: 14px; }
.hd__card { padding: 1.3rem 1.5rem; margin-bottom: 1.25rem; }

.hd__h { font-size: 1rem; margin: 0 0 .85rem; display: flex; align-items: center; gap: .5rem; }
.hd__h i { color: var(--primary-color); font-size: .9rem; }

.hd__head { display: flex; justify-content: space-between; gap: 1.25rem; align-items: flex-start; }
.hd__titles { min-width: 0; }
.hd__title { font-size: 1.55rem; line-height: 1.2; margin: 0; }
.hd__meta { display: flex; flex-wrap: wrap; gap: .25rem 1rem; margin-top: .55rem; font-size: .8125rem; color: var(--text-muted); }
.hd__meta i { margin-right: .35rem; opacity: .7; }
.hd__headprice { text-align: right; white-space: nowrap; }
.hd__headprice b { display: block; font-family: Manrope, sans-serif; font-weight: 800; font-size: 1.4rem; color: var(--primary-dark); }
.hd__headprice small { color: var(--text-muted); }
.hd__chips { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1rem; }
.hd__chip { display: inline-flex; align-items: center; gap: .4rem; padding: .3rem .75rem; border-radius: 99px; font-size: .78rem; font-weight: 500; background: #fff; border: 1px solid var(--border-color); color: var(--text-color); }
.hd__chip--solid { background: var(--primary-soft); border-color: transparent; color: var(--primary-dark); }
.hd__chip--warn { background: #FBEDEF; border-color: transparent; color: #8f2a36; }

.hd__stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 1rem 0; padding: 1.1rem .5rem; }
.hd__stat { text-align: center; padding: .25rem .3rem; border-right: 1px solid var(--border-color); }
.hd__stat:last-child { border-right: 0; }
.hd__stat i { display: block; color: var(--primary-color); font-size: 1.1rem; margin-bottom: .4rem; }
.hd__stat b { display: block; overflow-wrap: break-word; font-family: Manrope, sans-serif; font-weight: 700; font-size: .95rem; }
.hd__stat span { display: block; line-height: 1.3; font-size: .72rem; color: var(--text-muted); }

.hd__desc { white-space: pre-line; line-height: 1.75; font-size: .9rem; }
.hd__desc.is-clamped { display: -webkit-box; -webkit-line-clamp: 6; line-clamp: 6; -webkit-box-orient: vertical; overflow: hidden; }
.hd__more { display: inline-block; width: auto; text-align: left; background: none; border: 0; padding: 0; margin-top: .5rem; color: var(--primary-color); font-weight: 600; font-size: .85rem; }
.hd__more[hidden] { display: none; }

.hd__duo { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; margin-bottom: 1.25rem; align-items: stretch; }
.hd__duo > .card { margin-bottom: 0; display: flex; flex-direction: column; min-width: 0; }
.hd__poster { display: flex; gap: .85rem; align-items: center; margin-bottom: 1rem; }
.hd__poster small { display: block; color: var(--text-muted); font-size: .78rem; line-height: 1.5; }
.hd__avatar { flex: none; width: 56px; height: 56px; border-radius: 14px; object-fit: cover; border: 1px solid var(--border-color); background: #fff; }
.hd__avatar--text { display: flex; align-items: center; justify-content: center; background: var(--primary-soft); color: var(--primary-dark); font-weight: 700; font-size: 1.05rem; }
.hd__tiles { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; margin-bottom: 1rem; }
.hd__tile { border: 1px solid var(--border-color); border-radius: 10px; padding: .6rem .75rem; }
.hd__tile small { display: flex; gap: .35rem; align-items: center; color: var(--text-muted); font-size: .68rem; text-transform: uppercase; letter-spacing: .03em; margin-bottom: .15rem; }
.hd__tile b { font-weight: 600; font-size: .85rem; }
.hd__ok { color: var(--primary-color); } .hd__ko { color: #C83E4D; }
.hd__actions { margin-top: auto; }

.hd__addr { display: flex; gap: .6rem; align-items: flex-start; margin-bottom: .85rem; font-size: .85rem; line-height: 1.5; }
.hd__addr > i { color: var(--primary-color); margin-top: .2rem; }
.hd__addr b { display: block; font-weight: 600; }
.hd__addr span { color: var(--text-muted); }
.hd__map { flex: 1; display: flex; flex-direction: column; }
.hd__map .map-actions { order: 2; margin: .75rem 0 0 !important; }
.hd__map #map { order: 1; flex: 1; min-height: 190px; height: auto !important; padding: 0; border-radius: 10px; border: 1px solid var(--border-color); }

.hd__amenities { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1.25rem; align-items: start; }
.hd__tags { display: flex; flex-wrap: wrap; gap: .5rem; }
.hd__tag { display: inline-flex; align-items: center; gap: .45rem; padding: .35rem .75rem; border-radius: 8px; background: #F1F4EF; border: 1px solid var(--border-color); font-size: .8rem; font-weight: 500; }
.hd__tag i { color: var(--primary-color); font-size: .8rem; }
.hd__card--incl { background: linear-gradient(0deg, #f7fbf8, #fff); }
.hd__checks { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: .5rem .9rem; font-size: .85rem; }
.hd__checks i { color: var(--primary-color); font-size: .8rem; margin-right: .45rem; }

/* sticky price card */
.hd__price { padding: 1.25rem 1.3rem; margin-bottom: 1.25rem; }
.hd__amount { font-family: Manrope, sans-serif; font-weight: 800; font-size: 1.6rem; line-height: 1.2; color: var(--primary-dark); }
.hd__per { font-size: .85rem; color: var(--text-muted); }
.hd__year { font-size: .8125rem; color: var(--text-muted); margin-top: .35rem; }
.hd__avail { display: flex; gap: .6rem; align-items: center; margin: 1rem 0; padding: .65rem .8rem; border-radius: 10px; background: var(--primary-soft); font-size: .85rem; }
.hd__avail i { color: var(--primary-color); }
.hd__mini { display: grid; grid-template-columns: 1fr 44px 44px; gap: .5rem; margin-top: 1rem; }
.hd__mini--sec { grid-template-columns: 1fr 44px 44px 44px; } /* + the security badge */
.hd__avail + .hd__mini { margin-top: 0; }
.hd__btn { display: flex; align-items: center; justify-content: center; gap: .5rem; height: auto; padding: .6rem .75rem; border-radius: 10px; font-weight: 600; font-size: .875rem; width: 100%; } /* height follows the Listing Information buttons (.jd__btn) */
.hd__btn--icon { padding-top: .6rem; padding-bottom: .6rem; padding-left: 0; padding-right: 0; }
.hd__btn.favorite-btn { position: static; transform: none; animation: none; box-shadow: none; width: 100%; height: auto; border-radius: 10px; background: #fff; border: 1px solid var(--primary-color); }
.hd__btn.favorite-btn i { font-size: 1em; color: inherit; transform: none; }
.hd__btn.favorite-btn:hover { background: var(--primary-soft); transform: none; }
.hd__btn.favorite-btn.favorited i { color: #C83E4D; }
.hd__essentials { padding: 1.25rem 1.3rem; }
.hd__fact { display: flex; justify-content: space-between; gap: 1rem; padding: .55rem 0; border-bottom: 1px dashed var(--border-color); font-size: .85rem; }
.hd__fact:last-child { border-bottom: 0; padding-bottom: 0; }
.hd__fact span { color: var(--text-muted); } .hd__fact b { font-weight: 600; text-align: right; }

@media (max-width: 991.98px) {
    .hd { display: flex; flex-direction: column; align-items: stretch; }
    .hd__gallery { order: 1; }
    .hd__side { order: 2; }
    .hd__sticky { position: static; }
    .hd__body { order: 3; }
    .hd__headprice { display: none; }
    .hd__title { font-size: 1.3rem; }
}
@media (max-width: 767.98px) {
    .hd__stats { grid-template-columns: repeat(3, 1fr); }
    .hd__stat:nth-child(3n) { border-right: 0; }
    .hd__duo, .hd__amenities { grid-template-columns: 1fr; }
    .hd__duo { gap: 1.25rem; }
    .hd__map #map { min-height: 240px; }
}
@media (max-width: 575.98px) {
    .hd__card { padding: 1.1rem; }
    .hd__stats { grid-template-columns: repeat(3, 1fr); }
    .hd__stat { border-right: 0; }
    .hd__checks { grid-template-columns: 1fr; }
}

/* =========================================================
   About page: "How it works" (templates/components/how_it_works.html)
   ========================================================= */
.hiw { padding: 4.5rem 0; background: #fff; }
.hiw-head { text-align: center; max-width: 640px; margin: 0 auto 2.2rem; }
.hiw-eyebrow { display: inline-flex; align-items: center; gap: .5rem; font-size: .75rem; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--primary-color); }
.hiw-head h2 { font-family: var(--font-heading); font-size: 1.4rem; font-weight: 800; line-height: 1.2; margin: .6rem 0 .8rem; }
.hiw-head p { color: var(--text-muted); line-height: 1.7; margin: 0; }
.hiw-tabs { display: flex; gap: .4rem; justify-content: center; flex-wrap: wrap; margin-bottom: 2rem; }
.hiw-tab { display: inline-flex; align-items: center; gap: .5rem; border: 1px solid var(--border-color); background: #fff; color: var(--text-color); border-radius: 99px; padding: .6rem 1.2rem; font-weight: 600; font-size: .9rem; cursor: pointer; height: auto; width: auto; }
.hiw-tab.is-on { background: var(--primary-color); border-color: var(--primary-color); color: #fff; }
.hiw-panel { display: none; } .hiw-panel.is-on { display: block; }
.hiw-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.1rem; position: relative; }
.hiw-steps::before { content: ""; position: absolute; left: 12%; right: 12%; top: 27px; border-top: 2px dashed var(--border-color); }
.hiw-step { text-align: center; position: relative; padding: 0 .4rem; }
.hiw-step__n { width: 54px; height: 54px; border-radius: 50%; background: #fff; border: 2px solid var(--primary-color); color: var(--primary-color); font-size: 1.15rem; display: flex; align-items: center; justify-content: center; margin: 0 auto .9rem; position: relative; z-index: 1; }
.hiw-step h4 { font-family: var(--font-heading); font-size: 1rem; margin: 0 0 .35rem; }
.hiw-step p { margin: 0; color: var(--text-muted); font-size: .85rem; line-height: 1.6; }
.hiw-step__tag { display: inline-block; margin-top: .5rem; font-size: .7rem; font-weight: 600; padding: .15rem .6rem; border-radius: 99px; background: var(--primary-soft); color: var(--primary-dark); }
.hiw-cta { text-align: center; margin-top: 2rem; }

.hiw-acc { padding: 4.5rem 0; background: var(--background, #F7F8F4); }
.hiw-plans { padding: 4.5rem 0; background: #fff; }
.hiw-faq { padding: 3.5rem 0 4.5rem; background: var(--background, #F7F8F4); }
.hiw-t { text-align: center; font-family: var(--font-heading); font-size: 1.4rem; font-weight: 800; margin: 0 0 .4rem; }   /* same size as the section's main title (.hiw-head h2) */
.hiw-sub { text-align: center; color: var(--text-muted); margin: 0 0 2rem; }
.hiw-faq .hiw-t { margin-bottom: 1.4rem; }
.hiw-flows { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; }
.hiw-flow { background: #fff; border: 1px solid var(--border-color); border-radius: 18px; padding: 1.4rem; display: flex; flex-direction: column; }
.hiw-flow__hd { display: flex; gap: .7rem; align-items: center; margin-bottom: .9rem; }
.hiw-flow__ic { width: 40px; height: 40px; border-radius: 11px; background: var(--primary-soft); color: var(--primary-color); display: flex; align-items: center; justify-content: center; }
.hiw-flow h4 { font-family: var(--font-heading); font-size: 1.02rem; margin: 0; }
.hiw-flow__hd small { display: block; color: var(--text-muted); font-size: .75rem; }
.hiw-mock { border: 1px solid var(--border-color); background: var(--background, #F7F8F4); border-radius: 12px; padding: .9rem; margin-bottom: .9rem; font-size: .78rem; }
.hiw-fld { background: #fff; border: 1px solid var(--border-color); border-radius: 8px; padding: .45rem .65rem; color: #8a968f; margin-bottom: .45rem; display: flex; justify-content: space-between; gap: .5rem; }
.hiw-fld b { color: var(--text-color); font-weight: 500; }
.hiw-mbtn { background: var(--primary-color); color: #fff; text-align: center; border-radius: 8px; padding: .5rem; font-weight: 600; margin-top: .25rem; }
.hiw-mbtn--out { background: #fff; color: var(--primary-color); border: 1px solid var(--primary-color); }
.hiw-chk { display: flex; gap: .5rem; align-items: center; color: var(--text-muted); margin: .1rem 0 .5rem; } .hiw-chk i { color: var(--primary-color); }
.hiw-mail { display: flex; gap: .6rem; align-items: center; background: #fff; border: 1px solid var(--border-color); border-left: 3px solid var(--primary-color); border-radius: 8px; padding: .55rem .7rem; margin-top: .5rem; }
.hiw-mail i { color: var(--primary-color); } .hiw-mail b { display: block; font-size: .76rem; } .hiw-mail span { color: var(--text-muted); font-size: .7rem; }
.hiw-timer { display: flex; gap: .5rem; align-items: center; margin-top: .5rem; color: var(--text-muted); font-size: .72rem; } .hiw-timer i { color: var(--accent-color); }
.hiw-list { list-style: none; margin: 0 0 .25rem; padding: 0; display: grid; gap: .6rem; font-size: .84rem; line-height: 1.5; }
.hiw-list li { display: flex; gap: .6rem; }
.hiw-list li > i { flex: none; width: 20px; height: 20px; border-radius: 50%; background: var(--primary-soft); color: var(--primary-color); font-size: .6rem; display: flex; align-items: center; justify-content: center; margin-top: .12rem; }
.hiw-go { margin-top: auto; padding-top: .9rem; }
.hiw-link { color: var(--primary-color); font-weight: 600; text-decoration: none; font-size: .85rem; }
.hiw-link:hover { text-decoration: underline; }

.hiw-pgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; align-items: stretch; }
.hiw-plan { border: 1px solid var(--border-color); border-radius: 18px; padding: 1.5rem; background: #fff; display: flex; flex-direction: column; position: relative; }
.hiw-plan.is-hl { border: 2px solid var(--primary-color); box-shadow: 0 14px 34px rgba(8,127,91,.12); }
.hiw-plan__badge { position: absolute; top: -12px; left: 1.5rem; background: var(--primary-color); color: #fff; font-size: .7rem; font-weight: 600; padding: .2rem .7rem; border-radius: 99px; }
.hiw-plan h4 { font-family: var(--font-heading); font-size: 1.05rem; margin: 0; }
.hiw-plan__for { color: var(--text-muted); font-size: .8rem; margin: .2rem 0 .9rem; }
.hiw-price { font-family: var(--font-heading); font-weight: 800; font-size: 2.1rem; color: var(--primary-dark); }
.hiw-price small { font-family: Inter, sans-serif; font-weight: 500; font-size: .85rem; color: var(--text-muted); }
.hiw-plan ul { list-style: none; margin: 1rem 0 1.2rem; padding: 0; display: grid; gap: .55rem; font-size: .86rem; }
.hiw-plan li { display: flex; gap: .6rem; } .hiw-plan li i { color: var(--primary-color); margin-top: .22rem; font-size: .75rem; }
.hiw-plan li.is-off { color: #9aa6a0; } .hiw-plan li.is-off i { color: #b7c0bb; }
.hiw-plan__btn { margin-top: auto; text-align: center; border: 1.5px solid var(--primary-color); color: var(--primary-color); border-radius: 10px; padding: .65rem; font-weight: 600; text-decoration: none; background: #fff; }
.hiw-plan__btn:hover { background: var(--primary-soft); color: var(--primary-dark); }
.hiw-plan.is-hl .hiw-plan__btn { background: var(--primary-color); color: #fff; }
.hiw-plan.is-hl .hiw-plan__btn:hover { background: var(--primary-dark); }
.hiw-pnote { display: flex; gap: .6rem 1.4rem; flex-wrap: wrap; justify-content: center; margin-top: 1.6rem; color: var(--text-muted); font-size: .82rem; }
.hiw-pnote span { display: inline-flex; gap: .45rem; align-items: center; } .hiw-pnote i { color: var(--primary-color); }

.hiw-qa { max-width: 760px; margin: 0 auto; display: grid; gap: .65rem; }
.hiw-qa details { background: #fff; border: 1px solid var(--border-color); border-radius: 12px; padding: .9rem 1.1rem; }
.hiw-qa summary { cursor: pointer; font-weight: 600; display: flex; justify-content: space-between; gap: 1rem; list-style: none; }
.hiw-qa summary::-webkit-details-marker { display: none; }
.hiw-qa summary::after { content: "+"; color: var(--primary-color); font-size: 1.2rem; line-height: 1; }
.hiw-qa details[open] summary::after { content: "\2013"; }
.hiw-qa details p { margin: .7rem 0 0; color: var(--text-muted); line-height: 1.65; font-size: .9rem; }

@media (max-width: 991.98px) {
    .hiw-steps { grid-template-columns: 1fr 1fr; row-gap: 1.8rem; } .hiw-steps::before { display: none; }
    .hiw-flows, .hiw-pgrid { grid-template-columns: 1fr; }
}
@media (max-width: 575.98px) {
    .hiw, .hiw-acc, .hiw-plans { padding: 3rem 0; }
    .hiw-steps { grid-template-columns: 1fr; }
}


/* =========================================================
   Owner listing view (ov-*) -- professional view_*.html pages
   (templates/components/owner_listing_view.html)
   ========================================================= */
.ov { max-width: 1140px; }
.ov__card { background: #fff; border: 1px solid var(--border-color); border-radius: 18px; padding: 1.35rem 1.4rem; }
.ov__grid { display: grid; grid-template-columns: minmax(0, 1fr) 330px; gap: 20px; margin-top: 18px; align-items: start; }
.ov__main { display: grid; gap: 18px; min-width: 0; }
.ov__side { display: grid; gap: 18px; position: sticky; top: 16px; }
.ov__crumb { color: var(--text-color); font-weight: 500; display: inline-flex; gap: .4rem; align-items: center; }

.ov__eyebrow { font-family: inherit; font-size: .72rem; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--text-muted); display: flex; gap: .5rem; align-items: center; margin: 0 0 .9rem; }
.ov__eyebrow i { color: var(--primary-color); }
.ov__eyebrow--gap { margin-top: 1.4rem; }
.ov__muted { color: var(--text-muted); margin: 0; font-size: .9rem; }

/* header */
.ov__head-top { display: flex; gap: 20px; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; }
.ov__head-main { min-width: 0; flex: 1 1 320px; }
.ov__title { font-family: var(--font-heading); font-size: 1.65rem; font-weight: 800; line-height: 1.2; margin: 0; overflow-wrap: anywhere; }
.ov__subtitle { color: var(--text-muted); font-size: .88rem; margin: .35rem 0 0; display: flex; gap: .45rem; align-items: center; }
.ov__company { color: var(--primary-dark); font-weight: 600; margin: .45rem 0 0; display: flex; gap: .5rem; align-items: center; }
.ov__loc { color: var(--text-muted); font-size: .92rem; margin: .4rem 0 0; display: flex; gap: .5rem; align-items: center; }
.ov__loc i { color: var(--primary-color); }
.ov__chips { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 14px; }
.ov__chip { display: inline-flex; align-items: center; gap: .4rem; font-size: .78rem; font-weight: 600; padding: .28rem .75rem; border-radius: 99px; background: var(--primary-soft-strong, #E8F0EB); color: var(--primary-dark); }
.ov__chip.is-on { background: #d9f3e7; color: #0a5b3f; }
.ov__chip.is-off { background: #fde9ec; color: #9b2a38; }
.ov__chip.is-star { background: #fbf1dc; color: #7a5d1f; }
.ov__dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.ov__price { text-align: right; }
.ov__price b { display: block; font-family: var(--font-heading); font-size: 1.9rem; font-weight: 800; color: var(--primary-dark); line-height: 1.1; }
.ov__price small { color: var(--text-muted); }
.ov__bar { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--border-color); }
.ov__form { margin: 0; display: contents; }
.ov__bar .ov__btn--del { margin-left: auto; }

/* buttons */
.ov__btn { box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; gap: .5rem; border-radius: 10px; padding: .6rem 1.05rem; font-weight: 600; font-size: .88rem; line-height: 1.4; border: 1.5px solid var(--primary-color); color: var(--primary-color); background: #fff; cursor: pointer; text-decoration: none; transition: background .15s, color .15s; }
.ov__btn:hover { background: var(--primary-soft); color: var(--primary-dark); }
.ov__btn--pri { background: var(--primary-color); color: #fff; }
.ov__btn--pri:hover { background: var(--primary-dark); color: #fff; }
.ov__btn--soft { border-color: var(--border-color); color: var(--text-color); }
.ov__btn--del { border-color: #f0c3c9; color: #c83e4d; }
.ov__btn--del:hover { background: #fde9ec; color: #a42f3d; }

/* gallery */
.ov__gallery { padding: .8rem; }
.ov__hero { position: relative; height: 420px; border-radius: 14px; overflow: hidden; background: var(--primary-soft); }
.ov__slide { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .25s; }
.ov__slide.is-on { opacity: 1; }
.ov__nav { position: absolute; top: 50%; transform: translateY(-50%); width: 38px; height: 38px; border-radius: 50%; border: 0; background: rgba(255,255,255,.9); color: var(--text-color); box-shadow: 0 2px 8px rgba(0,0,0,.18); cursor: pointer; display: flex; align-items: center; justify-content: center; }
.ov__nav:hover { background: #fff; color: var(--primary-color); }
.ov__nav--prev { left: 12px; } .ov__nav--next { right: 12px; }
.ov__count { position: absolute; right: 12px; bottom: 12px; background: rgba(23,33,30,.78); color: #fff; font-size: .75rem; font-weight: 600; padding: .3rem .65rem; border-radius: 99px; }
.ov__thumbs { display: flex; gap: 8px; margin-top: 10px; overflow-x: auto; padding-bottom: 2px; }
.ov__thumb { flex: 0 0 96px; height: 68px; padding: 0; border: 2px solid transparent; border-radius: 10px; overflow: hidden; background: none; cursor: pointer; opacity: .75; }
.ov__thumb.is-on { border-color: var(--primary-color); opacity: 1; }
.ov__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ov__noimg { text-align: center; padding: 3.5rem 1rem; color: var(--text-muted); }
.ov__noimg i { font-size: 3rem; margin-bottom: .6rem; display: block; }
.ov__noimg p { margin: 0; }

/* key facts */
.ov__stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 10px; }
.ov__stat { background: var(--bg-color, #F7F8F4); border: 1px solid var(--border-color); border-radius: 12px; padding: .75rem .9rem; min-width: 0; }
.ov__stat i { color: var(--primary-color); font-size: .95rem; }
.ov__stat b { display: block; font-family: var(--font-heading); font-size: 1rem; margin-top: .4rem; overflow-wrap: anywhere; }
.ov__stat span { color: var(--text-muted); font-size: .78rem; }

/* description */
.ov__lang { display: inline-flex; background: var(--bg-color, #F7F8F4); border: 1px solid var(--border-color); border-radius: 99px; padding: 3px; margin-bottom: .9rem; }
.ov__lang button { border: 0; background: none; padding: .3rem .9rem; border-radius: 99px; font-size: .8rem; font-weight: 600; color: var(--text-muted); cursor: pointer; }
.ov__lang button.is-on { background: var(--primary-color); color: #fff; }
.ov__desc { line-height: 1.75; margin: 0; white-space: pre-line; overflow-wrap: anywhere; }
.ov__desc[hidden] { display: none; }

/* tags */
.ov__tags { display: flex; flex-wrap: wrap; gap: 8px; }
.ov__tag { display: inline-flex; gap: .45rem; align-items: center; border: 1px solid var(--border-color); background: #fff; border-radius: 10px; padding: .4rem .75rem; font-size: .84rem; }
.ov__tag > i:first-child { color: var(--primary-color); width: 1.1em; text-align: center; }
.ov__tag.is-no { color: #8a968f; background: var(--bg-color, #F7F8F4); }
.ov__tag.is-no > i:first-child { color: #b3bdb7; }
.ov__ok { color: var(--primary-color); font-size: .72rem; }
.ov__ko { color: #b3bdb7; font-size: .72rem; }
.ov__more { margin-top: .9rem; }
.ov__more summary { cursor: pointer; color: var(--primary-color); font-weight: 600; font-size: .85rem; margin-bottom: .7rem; }

/* location */
.ov__addr { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; font-size: .92rem; }
.ov__addr li { display: flex; gap: .6rem; align-items: center; }
.ov__addr i { color: var(--primary-color); width: 1.1em; text-align: center; }
.ov__map { margin-top: .9rem; }
.ov__map .container { padding: 0; max-width: none; border-radius: 14px; overflow: hidden; }

/* side */
.ov__views { display: flex; align-items: baseline; gap: .5rem; margin-bottom: .4rem; }
.ov__views b { font-family: var(--font-heading); font-size: 2.2rem; font-weight: 800; color: var(--primary-dark); }
.ov__views span { color: var(--text-muted); font-size: .85rem; }
.ov__kv { margin: 0; }
.ov__kv > div { display: flex; justify-content: space-between; gap: 12px; padding: .6rem 0; border-bottom: 1px solid var(--border-color); font-size: .88rem; }
.ov__kv > div:last-child { border-bottom: 0; }
.ov__kv dt { color: var(--text-muted); font-weight: 400; display: flex; gap: .5rem; align-items: center; }
.ov__kv dt i { color: var(--primary-color); width: 1.1em; text-align: center; }
.ov__kv dd { margin: 0; font-weight: 600; text-align: right; }
.ov__kv dd.is-ok { color: #0a5b3f; } .ov__kv dd.is-muted { color: #9b2a38; }
.ov__actions { display: grid; gap: 10px; }
.ov__actions form { margin: 0; }
.ov__actions .ov__btn { width: 100%; }

@media (max-width: 900px) {
    .ov__grid { grid-template-columns: 1fr; }
    .ov__side { position: static; }
    .ov__price { text-align: left; }
    .ov__hero { height: 270px; }
    .ov__bar .ov__btn--del { margin-left: 0; }
    .ov__bar .ov__btn { flex: 1 1 calc(50% - 10px); }
    .ov__title { font-size: 1.4rem; }
}


/* =========================================================
   Owner listing cards (oc-*) -- professional "My listings"
   (templates/components/owner_listing_card.html)
   ========================================================= */
.oc { display: flex; flex-direction: column; height: 100%; background: #fff; border: 1px solid var(--border-color); border-radius: 18px; overflow: hidden; transition: box-shadow .2s, transform .2s, border-color .2s; }
.oc:hover { box-shadow: 0 10px 28px rgba(23,33,30,.10); transform: translateY(-2px); border-color: #c9d6cd; }
.oc.is-inactive .oc__media img, .oc.is-inactive .oc__ph { filter: grayscale(.85); opacity: .75; }

.oc__media { position: relative; display: block; aspect-ratio: 4 / 3; background: var(--primary-soft); overflow: hidden; }
.oc__media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .35s; }
.oc:hover .oc__media img { transform: scale(1.03); }
.oc__ph { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: var(--primary-color); font-size: 2.6rem; background: linear-gradient(135deg, #e4ece6, #cfdcd3); }
.oc__chip { position: absolute; top: 10px; display: inline-flex; align-items: center; gap: .4rem; font-size: .72rem; font-weight: 600; padding: .28rem .65rem; border-radius: 99px; line-height: 1.3; }
.oc__chip--cat { left: 10px; background: rgba(255,255,255,.94); color: var(--primary-dark); }
.oc__chip--status { right: 10px; }
.oc__chip--status.is-on { background: #d9f3e7; color: #0a5b3f; }
.oc__chip--status.is-off { background: #fde9ec; color: #9b2a38; }
.oc__dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.oc__star { position: absolute; left: 10px; bottom: 10px; width: 28px; height: 28px; border-radius: 50%; background: #fbf1dc; color: #b8862b; display: flex; align-items: center; justify-content: center; font-size: .8rem; }

.oc__body { padding: 1rem 1.1rem .4rem; display: flex; flex-direction: column; gap: .35rem; flex: 1; min-width: 0; }
.oc__type { margin: 0; font-size: .7rem; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--primary-color); }
.oc__title { font-family: var(--font-heading); font-size: 1.02rem; font-weight: 700; line-height: 1.3; margin: 0; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.oc__title a { color: var(--text-color); text-decoration: none; }
.oc__title a:hover { color: var(--primary-color); }
.oc__company { margin: 0; font-size: .85rem; font-weight: 600; color: var(--primary-dark); display: flex; gap: .45rem; align-items: center; }
.oc__loc { margin: 0; font-size: .84rem; color: var(--text-muted); display: flex; gap: .45rem; align-items: center; min-width: 0; }
.oc__loc i { color: var(--primary-color); font-size: .8rem; }
.oc__facts { list-style: none; margin: .3rem 0 0; padding: .6rem 0 0; border-top: 1px solid var(--border-color); display: flex; flex-wrap: wrap; gap: .35rem .9rem; font-size: .8rem; color: var(--text-color); }
.oc__facts li { display: inline-flex; align-items: center; gap: .35rem; white-space: nowrap; }
.oc__facts i { color: var(--primary-color); font-size: .8rem; }
.oc__price { margin-top: auto; padding-top: .6rem; display: flex; align-items: baseline; gap: .4rem; flex-wrap: wrap; }
.oc__price b { font-family: var(--font-heading); font-size: 1.15rem; font-weight: 800; color: var(--primary-dark); }
.oc__price small { color: var(--text-muted); font-size: .78rem; }
.oc__meta { margin: 0; display: flex; gap: .9rem; flex-wrap: wrap; font-size: .75rem; color: var(--text-muted); }
.oc__meta i { margin-right: .25rem; }

.oc__foot { display: flex; gap: 8px; padding: .8rem 1.1rem 1rem; align-items: stretch; }
.oc__form { margin: 0; display: contents; }
.oc__btn { box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; gap: .45rem; border-radius: 10px; padding: .5rem .8rem; font-weight: 600; font-size: .84rem; line-height: 1.4; border: 1.5px solid var(--border-color); color: var(--text-color); background: #fff; cursor: pointer; text-decoration: none; transition: background .15s, color .15s, border-color .15s; }
.oc__btn:hover { background: var(--primary-soft); color: var(--primary-dark); border-color: var(--primary-color); }
.oc__btn--pri { flex: 1; background: var(--primary-color); border-color: var(--primary-color); color: #fff; }
.oc__btn--pri:hover { background: var(--primary-dark); border-color: var(--primary-dark); color: #fff; }
.oc__btn--icon { width: 40px; padding: .5rem 0; }
.oc__btn--del { color: #c83e4d; }
.oc__btn--del:hover { background: #fde9ec; border-color: #f0c3c9; color: #a42f3d; }

@media (max-width: 575px) { .oc__media { aspect-ratio: 16 / 10; } }

/* Public housing card: the transaction tag replaces the "Housing" ribbon and shares the look of
   the professional "My listings" tag (components/card_listing.html). */
.listing-ribbon.listing-ribbon--tag { display: inline-flex; align-items: center; gap: .4rem; background: rgba(255,255,255,.94); color: var(--primary-dark); font-size: .72rem; font-weight: 600; letter-spacing: 0; text-transform: none; line-height: 1.3; padding: .28rem .65rem; }
.oc__ok { color: var(--primary-dark); font-weight: 500; }
.listing-card .oc__body { padding: 1rem 1.1rem .4rem; }
.listing-card .oc__foot { margin-top: 0; }

/* =========================================================
   Job card (oc--job) -- business logo band instead of a photo
   (templates/components/job_card.html: public job list + professional jobs tab)
   ========================================================= */
.oc--job { position: relative; }
.oc__band { position: relative; display: flex; align-items: center; gap: .9rem; height: 96px; padding: 0 1.1rem; background: linear-gradient(135deg, #e9f1ec, #dbe8e0); }
.oc__logo { position: relative; flex: none; width: 64px; height: 64px; border-radius: 16px; background: #fff; border: 1px solid var(--border-color); box-shadow: 0 2px 8px rgba(23,33,30,.08); display: flex; align-items: center; justify-content: center; overflow: hidden; }
.oc__logo b { font-family: var(--font-heading); font-weight: 800; font-size: 1.5rem; color: var(--primary-color); }
.oc__logo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: #fff; padding: 6px; }
.oc__bandrow { min-width: 0; }
.oc__co { font-weight: 600; font-size: .9rem; color: var(--primary-dark); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.oc__bandrow small { color: var(--text-muted); font-size: .75rem; }
.oc--job .oc__chip--status { top: 10px; right: 10px; }
.oc--job .oc__price b { font-size: 1rem; letter-spacing: -.01em; }
.oc__company-inline { display: none; margin: 0; font-size: .82rem; font-weight: 600; color: var(--primary-dark); }

/* application deadline: green while it is still ahead, red once it has passed */
.oc__deadline { font-weight: 600; }
.oc__deadline.is-open { color: var(--primary-color); }
.oc__deadline.is-closed { color: #c83e4d; }

/* public: heart + featured star in the same spots as the photo cards, whole card clickable */
.oc--public .favorite-btn { position: absolute; top: 8px; right: 8px; width: 28px; height: 28px; z-index: 10; }
.oc--public .favorite-btn i { font-size: .75rem; }
.oc--public .featured-star { display: grid; place-items: center; position: absolute; top: 8px; right: 42px; z-index: 3; width: 28px; height: 28px; border-radius: 50%; background: var(--sand, #D9B77A); color: var(--text-color); box-shadow: 0 1px 4px rgba(0,0,0,.2); font-size: .72rem; pointer-events: none; }
.oc--public .oc__title a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.oc--public .oc__foot { position: relative; z-index: 2; }

/* the old wide card is gone: jobs now sit in the same grid as the other categories */
.listing-card.listing-card--job { border: 0; box-shadow: none; background: transparent; overflow: visible; }

/* phones (public): horizontal compact card -- logo on the left, no button / meta line */
@media (max-width: 575.98px) {
    .oc--public { flex-direction: row; align-items: stretch; }
    .oc--public:hover { transform: none; box-shadow: none; }
    .oc--public .oc__band { position: static; flex: none; width: 82px; height: auto; padding: 0; justify-content: center; }
    .oc--public .oc__logo { width: 54px; height: 54px; border-radius: 14px; }
    .oc--public .oc__logo b { font-size: 1.3rem; }
    .oc--public .oc__bandrow { display: none; }
    .oc--public .oc__body { padding: .8rem 2.6rem .8rem .9rem; gap: .25rem; }
    .oc--public .oc__company-inline { display: flex; gap: .4rem; align-items: center; }
    .oc--public .oc__title { font-size: .98rem; }
    .oc--public .oc__facts { border-top: 0; margin: .1rem 0 0; padding: 0; gap: .2rem .8rem; }
    .oc--public .oc__price { padding-top: .35rem; }
    .oc--public .oc__price b { font-size: 1rem; }
    .oc--public .oc__meta, .oc--public .oc__foot { display: none; }
    .oc--public .favorite-btn { top: 8px; right: 8px; }
    .oc--public .featured-star { top: 40px; right: 8px; }
}


/* =========================================================
   Form shell (fs-*) -- professional create / edit listing pages
   components/form_shell.html + static/js/form_shell.js
   Section cards, progress panel (desktop) / progress bar + chips (phones), sticky action bar.
   The native Bootstrap fields stay in the DOM; tiles / segmented / steppers / chips are layered on top.
   ========================================================= */
.fs-container { max-width: 1160px; padding-bottom: 40px; }
body:has(.fs-bar) { padding-bottom: 76px; }
.fs-container .breadcrumb { margin-bottom: 0; }
.fs-head { margin: 1.1rem 0 1.4rem; }
.fs-head h1 { font-family: var(--font-heading); font-size: 1.25rem; font-weight: 700; letter-spacing: -.01em; margin: 0; color: var(--text-color); }   /* same as the listing pages' heading */
.fs-head p { margin: .35rem 0 0; font-size: .875em; color: var(--text-muted); }

form.fs-layout.fs-ready { display: grid; grid-template-columns: 256px minmax(0, 1fr); gap: 0 28px; align-items: start; }
.fs-main { min-width: 0; }
.fs-ready > .fs-main { grid-column: 2; }
.fs-side { grid-column: 1; grid-row: 1; position: sticky; top: calc(var(--fs-off, 0px) + 16px); background: #fff; border: 1px solid var(--border-color); border-radius: 18px; padding: 18px; }
.fs-meter { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }
.fs-ring { --v: 0; width: 54px; height: 54px; flex: none; border-radius: 50%; background: conic-gradient(var(--primary-color) calc(var(--v) * 1%), var(--primary-soft) 0); display: grid; place-items: center; }
.fs-ring b { width: 42px; height: 42px; border-radius: 50%; background: #fff; display: grid; place-items: center; font-family: var(--font-heading); font-size: .85rem; font-weight: 800; color: var(--primary-dark); }
.fs-meter strong { display: block; font-family: var(--font-heading); font-size: .95rem; }
.fs-meter small { color: var(--text-muted); font-size: .78rem; }
.fs-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.fs-steps a { display: flex; align-items: center; gap: .7rem; padding: .55rem .65rem; border-radius: 10px; color: var(--text-color); text-decoration: none; font-size: .9rem; font-weight: 500; }
.fs-steps a:hover { background: var(--bg-ivory, #F7F8F4); }
.fs-steps a.on { background: var(--primary-soft); color: var(--primary-dark); font-weight: 600; }
.fs-dot { width: 22px; height: 22px; flex: none; border-radius: 50%; border: 1.5px solid var(--border-color); background: #fff; display: grid; place-items: center; font-size: .6rem; color: transparent; }
.fs-steps a.done .fs-dot { background: var(--primary-color); border-color: var(--primary-color); color: #fff; }
.fs-steps a.on:not(.done) .fs-dot { border-color: var(--primary-color); }
.fs-opt { margin-left: auto; font-size: .68rem; color: var(--text-muted); font-weight: 500; }

.fs-topbar { display: none; }

/* cards */
.fs-card { background: #fff; border: 1px solid var(--border-color); border-radius: 18px; padding: 22px; margin-bottom: 18px; scroll-margin-top: calc(var(--fs-off, 0px) + 20px); }
.fs-card.has-error { border-color: #c83e4d; box-shadow: 0 0 0 3px rgba(200,62,77,.12); }
.fs-card__head { display: flex; align-items: center; gap: .8rem; margin-bottom: 18px; }
.fs-card__ic { width: 38px; height: 38px; flex: none; border-radius: 11px; background: var(--primary-soft); color: var(--primary-color); display: grid; place-items: center; }
.fs-card__head h2 { font-family: var(--font-heading); font-size: 1.12rem; font-weight: 800; margin: 0; color: var(--text-color); }
.fs-card .row { --bs-gutter-x: 1rem; }
.fs-card .mt-4 { margin-top: 0 !important; }

/* re-skin the native controls inside the cards */
.fs-card .form-label { font-weight: 600; font-size: .85rem; margin-bottom: .4rem; color: var(--text-color); }
.fs-card .form-control, .fs-card .form-select { border: 1.5px solid var(--border-color); border-radius: 11px; min-height: 44px; padding: .62rem .8rem; font-size: .95rem; background-color: #fff; transition: border-color .15s, box-shadow .15s; }
.fs-card textarea.form-control { min-height: 130px; }
.fs-card .form-control:focus, .fs-card .form-select:focus { border-color: var(--primary-color); box-shadow: 0 0 0 3px rgba(8,127,91,.15); }
.fs-card .form-control[readonly], .fs-card .form-control:disabled, .fs-card .form-select:disabled { background-color: var(--bg-ivory, #F7F8F4); color: var(--text-muted); }
.fs-card small.text-muted, .fs-card .form-text { font-size: .78rem; }
.fs-card .btn-outline-primary, .fs-card .btn-outline-secondary { display: inline-flex; align-items: center; justify-content: center; gap: .4rem; }
.fs-card input[type=file].form-control { border: 2px dashed #b9c7be; border-radius: 16px; padding: 1.5rem 1rem; background: var(--bg-ivory, #F7F8F4); cursor: pointer; }
.fs-card input[type=file].form-control:hover { border-color: var(--primary-color); background: var(--primary-soft); }
.fs-card input[type=file]::file-selector-button { border: 0; border-radius: 9px; background: var(--primary-color); color: #fff; font-weight: 600; padding: .5rem .9rem; margin-right: .9rem; }
.fs-card .img-thumbnail { border-radius: 12px; }
.fs-rel { position: relative; }
.fs-vh { position: absolute !important; left: 0; bottom: 0; width: 1px !important; height: 1px !important; min-height: 0 !important; padding: 0 !important; border: 0 !important; opacity: 0; pointer-events: none; overflow: hidden; }

/* tiles (radio cards from a <select>) */
.fs-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(112px, 1fr)); gap: 10px; }
.fs-tiles[data-n="3"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.fs-tile { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .35rem; text-align: center; border: 1.5px solid var(--border-color); border-radius: 13px; padding: .8rem .4rem; background: #fff; font-weight: 600; font-size: .88rem; min-height: 72px; color: var(--text-color); cursor: pointer; transition: all .15s; }
.fs-tile i { font-size: 1.15rem; color: var(--text-muted); }
.fs-tile:hover { border-color: var(--primary-color); }
.fs-tile.on { border-color: var(--primary-color); background: var(--primary-soft); color: var(--primary-dark); box-shadow: 0 0 0 3px rgba(8,127,91,.12); }
.fs-tile.on i { color: var(--primary-color); }
.fs-tiles.is-invalid .fs-tile, .fs-seg.is-invalid { border-color: #c83e4d; }
.fs-tiles.is-disabled, .fs-seg.is-disabled { opacity: .55; pointer-events: none; }

/* segmented */
.fs-seg { display: flex; flex-wrap: wrap; background: var(--bg-ivory, #F7F8F4); border: 1.5px solid var(--border-color); border-radius: 12px; padding: 3px; gap: 3px; }
.fs-seg-b { flex: 1 1 auto; border: 0; background: transparent; border-radius: 9px; padding: .5rem .7rem; font-weight: 600; font-size: .86rem; color: var(--text-muted); cursor: pointer; line-height: 1.2; min-height: 38px; }
.fs-seg-b.on { background: #fff; color: var(--primary-dark); box-shadow: 0 1px 4px rgba(23,33,30,.12); }

/* stepper */
.fs-stp { display: flex; align-items: center; justify-content: space-between; border: 1.5px solid var(--border-color); border-radius: 12px; background: #fff; padding: 5px; }
.fs-stp button { width: 36px; height: 36px; flex: none; border-radius: 9px; border: 0; background: var(--bg-ivory, #F7F8F4); color: var(--text-color); cursor: pointer; display: grid; place-items: center; font-size: .85rem; }
.fs-stp button:hover { background: var(--primary-soft); color: var(--primary-dark); }
.fs-card .form-control.fs-stp-in { border: 0; box-shadow: none; background: transparent; text-align: center; font-weight: 700; font-size: 1rem; min-height: 0; padding: 0; width: 100%; min-width: 0; -moz-appearance: textfield; appearance: textfield; }
.fs-stp-in::-webkit-outer-spin-button, .fs-stp-in::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.fs-stp:focus-within { border-color: var(--primary-color); box-shadow: 0 0 0 3px rgba(8,127,91,.15); }

/* checkbox rows -> chips */
.fs-card .fs-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 .85rem; --bs-gutter-x: 0; --bs-gutter-y: 0; }
.fs-card .fs-chips:last-child { margin-bottom: 0; }
.fs-card .fs-chips > * { flex: 0 0 auto; width: auto; max-width: none; padding: 0; margin: 0 !important; }
.fs-chips .form-check { position: relative; padding: 0; margin: 0; min-height: 0; }
.fs-chips .form-check-input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; float: none; }
.fs-chips .form-check-label { display: inline-flex; align-items: center; gap: .45rem; border: 1.5px solid var(--border-color); border-radius: 99px; padding: .42rem .85rem; font-size: .86rem; font-weight: 500; background: #fff; min-height: 38px; transition: all .15s; cursor: pointer; }
.fs-chips .form-check-label i { color: var(--text-muted); font-size: .8rem; width: 14px; text-align: center; }
.fs-chips .form-check-input:checked + .form-check-label { border-color: var(--primary-color); background: var(--primary-soft); color: var(--primary-dark); font-weight: 600; }
.fs-chips .form-check-input:checked + .form-check-label i { color: var(--primary-color); }
.fs-chips .form-check-input:focus-visible + .form-check-label { outline: 2px solid var(--primary-color); outline-offset: 2px; }

/* sticky action bar */
.fs-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; background: rgba(255,255,255,.96); backdrop-filter: blur(8px); border-top: 1px solid var(--border-color); padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); }
.fs-bar .in { max-width: 1160px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.fs-bar .st { font-size: .85rem; color: var(--text-muted); font-weight: 500; }
.fs-bar .st.is-ready { color: var(--primary-dark); font-weight: 600; }
.fs-bar .acts { display: flex; gap: 10px; }
.fs-btn { display: inline-flex; align-items: center; justify-content: center; gap: .4em; border-radius: var(--radius-sm); padding: .35rem .9rem; font-weight: 500; font-size: .875rem; line-height: 1.4; border: 1px solid var(--border-color); background: #fff; color: var(--text-color); cursor: pointer; text-decoration: none; transition: all .15s; }
.fs-btn:hover { background: var(--primary-soft); border-color: var(--primary-color); color: var(--primary-dark); }
.fs-btn--pri { background: var(--primary-color); border-color: var(--primary-color); color: #fff; }
.fs-btn--pri:hover { background: var(--primary-dark); border-color: var(--primary-dark); color: #fff; }

@media (max-width: 900px) {
    form.fs-layout.fs-ready { display: block; }
    .fs-side { display: none; }
    .fs-topbar { display: block; position: sticky; top: var(--fs-off, 0px); z-index: 15; margin: 0 -12px 16px; background: rgba(247,248,244,.96); backdrop-filter: blur(8px); border-bottom: 1px solid var(--border-color); padding: 10px 12px 8px; }
    .fs-prog { display: flex; align-items: center; gap: 10px; font-size: .78rem; color: var(--text-muted); margin-bottom: 8px; }
    .fs-track { flex: 1; height: 6px; border-radius: 99px; background: var(--primary-soft); overflow: hidden; }
    .fs-track i { display: block; height: 100%; width: 0; background: var(--primary-color); border-radius: 99px; transition: width .3s; }
    .fs-prog b { color: var(--primary-dark); }
    .fs-chipnav { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; margin: 0 -12px; padding: 0 12px; }
    .fs-chipnav::-webkit-scrollbar { display: none; }
    .fs-chipnav a { flex: none; display: inline-flex; align-items: center; gap: .4rem; padding: .38rem .8rem; border-radius: 99px; border: 1.5px solid var(--border-color); background: #fff; color: var(--text-color); text-decoration: none; font-size: .82rem; font-weight: 600; }
    .fs-chipnav a.on { background: var(--primary-soft); border-color: var(--primary-color); color: var(--primary-dark); }
    .fs-chipnav a.done::before { content: "\f00c"; font-family: "Font Awesome 6 Free"; font-weight: 900; font-size: .6rem; color: var(--primary-color); }
    .fs-card { scroll-margin-top: calc(var(--fs-off, 0px) + 112px); }
}
@media (max-width: 767.98px) {
    .fs-card { padding: 16px; border-radius: 16px; }
    .fs-card .row > .col-md-2, .fs-card .row > .col-md-3 { flex: 0 0 50%; max-width: 50%; }
    .fs-tiles { grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); }
    .fs-bar .st { display: none; }
    .fs-bar .acts { width: 100%; }
    .fs-bar .acts .fs-btn { flex: 1; }
    .fs-bar .acts .fs-btn--pri { flex: 2; }
}

/* ---- Our partners (home): sliding strip ---- */
.partner-slider { position: relative; }
.partner-track { display: flex; gap: 1rem; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none; padding: 4px 2px 10px; justify-content: safe center; outline-offset: 4px; }
.partner-track::-webkit-scrollbar { display: none; }
.partner-slide { flex: 0 0 calc((100% - 1rem) / 2); scroll-snap-align: start; }
@media (min-width: 768px) { .partner-slide { flex-basis: calc((100% - 2rem) / 3); } }
@media (min-width: 992px) { .partner-slide { flex-basis: calc((100% - 3rem) / 4); } }
.partner-slider.is-scrollable .partner-track { justify-content: flex-start; }
.partner-slider__btn { position: absolute; top: 50%; transform: translateY(-60%); z-index: 2; width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--border-color); background: #fff; color: var(--primary-dark); display: inline-flex; align-items: center; justify-content: center; box-shadow: 0 4px 12px rgba(7, 84, 63, .12); cursor: pointer; transition: background .15s, color .15s, opacity .15s; }
.partner-slider__btn[hidden] { display: none; }
.partner-slider__btn:hover:not(:disabled) { background: var(--primary-color); color: #fff; border-color: var(--primary-color); }
.partner-slider__btn:disabled { opacity: .35; cursor: default; }
.partner-slider__btn:focus-visible { outline: 3px solid var(--primary-color); outline-offset: 2px; }
.partner-slider__btn--prev { left: -8px; }
.partner-slider__btn--next { right: -8px; }
@media (min-width: 1280px) { .partner-slider__btn--prev { left: -20px; } .partner-slider__btn--next { right: -20px; } }
.partner-tile { display: flex; flex-direction: column; align-items: center; text-align: center; gap: .35rem; height: 100%; padding: 1.1rem .9rem; background: #fff; border: 1px solid var(--border-color); border-radius: 14px; color: var(--text-color); text-decoration: none; transition: border-color .15s, box-shadow .15s; }
a.partner-tile:hover { border-color: var(--primary-color); box-shadow: 0 6px 18px rgba(7, 84, 63, .08); color: var(--text-color); }
a.partner-tile:focus-visible { outline: 3px solid var(--primary-color); outline-offset: 2px; }
.partner-tile__logo { display: flex; align-items: center; justify-content: center; width: 100%; height: 64px; }
.partner-tile__logo img { max-width: 100%; max-height: 100%; object-fit: contain; filter: grayscale(1); opacity: .8; transition: filter .15s, opacity .15s; }
.partner-tile:hover .partner-tile__logo img { filter: none; opacity: 1; }
.partner-tile__initial { display: inline-flex; align-items: center; justify-content: center; width: 52px; height: 52px; border-radius: 50%; background: var(--primary-soft); color: var(--primary-dark); font-weight: 800; font-size: 1.3rem; }
.partner-tile__name { font-weight: 700; font-size: .95rem; line-height: 1.25; }
.partner-tile__desc { font-size: .8rem; color: var(--text-muted); line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
@media (prefers-reduced-motion: reduce) { .partner-track { scroll-behavior: auto; } .partner-tile, .partner-tile__logo img, .partner-slider__btn { transition: none; } }
@media (max-width: 575.98px) { .partner-slider__btn { display: none !important; } }

/* ---------- Character counter on listing Title / Description (static/js/char_counter.js) ---------- */
.form-label.cc-label { display: flex; align-items: baseline; gap: .25rem; padding-top: 4px; }
.cc-label .cc__count { margin-left: auto; }
.cc__count { flex: none; font-size: .78rem; font-weight: 600; color: var(--text-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.cc__count.is-near { color: #8a5f0a; }
.cc__count.is-full { color: var(--danger-color); }
.cc__count .cc__note { font-weight: 700; margin-right: 6px; }
.form-control.cc-near:focus { border-color: #D9B77A; box-shadow: 0 0 0 .2rem rgba(217, 183, 122, .28); }
.form-control.cc-full, .form-control.cc-full:focus { border-color: var(--danger-color); box-shadow: 0 0 0 .2rem rgba(200, 62, 77, .15); }


/* ---------- Newsletter (footer form + confirm / unsubscribe pages) ---------- */
.nl-footer { border-bottom: 1px solid rgba(255, 255, 255, .15); }
.nl-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.nl-form__row { display: flex; gap: .5rem; max-width: 520px; }
.nl-form__row .form-control { flex: 1 1 auto; min-width: 0; }
/* Field and button are the height of the "Save Changes" buttons (.btn-sm.btn-text-sm): the global
   .form-control minimum of 42px would otherwise make the field, and the stretched button, taller. */
.nl-form__row .form-control { min-height: 0; padding: .35rem .75rem; font-size: .875rem; line-height: 1.4; }
.nl-form__btn { flex: none; white-space: nowrap; }
.nl-form__msg { min-height: 1.25rem; color: rgba(255, 255, 255, .75); }
.nl-form__msg.is-ok { color: #8fe0bd; }
.nl-form__msg.is-bad { color: #ffb3bb; }
.nl-page { max-width: 520px; padding: 2rem 1.5rem; text-align: center; }
.nl-page__icon { font-size: 2.25rem; color: var(--primary-color); margin-bottom: .5rem; }
.nl-page__icon.is-bad { color: var(--danger-color); }
.nl-page__title { font-size: 1.25rem; font-weight: 700; margin-bottom: .75rem; }
.nl-page__text { color: var(--text-muted); }
.nl-page__actions { display: flex; flex-wrap: wrap; gap: .5rem; justify-content: center; margin-top: 1rem; }
.nl-page__form { text-align: left; margin-top: 1rem; }
.nl-page__input { min-height: 0; padding: .35rem .75rem; font-size: .875rem; line-height: 1.4; }
@media (max-width: 575.98px) { .nl-form__row { flex-direction: column; } }

/* ==========================================================================
   Trust badges, community status, verification (components/trust.html)
   Quiet by design: Vert Horizon tints, small type, no gradients. A badge is
   earned by a document check; community status is an icon and a name.
   ========================================================================== */
.tb-row { display: inline-flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.tb {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 3px 10px 3px 8px; border-radius: 999px;
    background: var(--primary-soft); color: var(--primary-dark);
    border: 1px solid #bfe0d3;
    font-size: .76rem; font-weight: 600; line-height: 1.3; white-space: nowrap;
}
.tb i { font-size: .72rem; color: var(--primary-color); }
.tb--tenure { background: var(--accent-soft); border-color: rgba(217, 183, 122, .55); color: #6d5527; }
.tb--tenure i { color: #8a6a2c; }
.tb--more { padding: 3px 8px; color: var(--text-muted); background: transparent; border-color: var(--border-color); }
.tb--compact { padding: 2px 8px 2px 7px; font-size: .72rem; }
@media (max-width: 575.98px) { .tb { white-space: normal; } }

/* On a listing card: one quiet line under the facts, only when the poster has a verification */
.oc__trust { margin-top: 8px; }

/* Community status: icon + name, no fill */
.cs { display: inline-flex; align-items: center; gap: 6px; font-size: .8rem; font-weight: 600; color: var(--text-muted); }
.cs i { font-size: .78rem; color: var(--text-light); }
.cs--ambassador i, .cs--elite i { color: #8a6a2c; }
.cs--trusted i { color: var(--primary-color); }

/* Verification status */
.vs { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px; font-size: .76rem; font-weight: 700; line-height: 1.3; white-space: nowrap; background: #eceeea; color: #4b5752; }
.vs--pending { background: var(--accent-soft); color: #6d5527; }
.vs--under_review { background: #e4eef6; color: #214a69; }
.vs--approved { background: var(--primary-soft-strong); color: var(--primary-dark); }
.vs--rejected { background: var(--danger-soft); color: #8f2530; }
.vs--resubmission_required { background: #FBF3E4; color: #6b4e12; }
.vs--expired { background: #eceeea; color: #4b5752; }

/* Profile: verification progress */
.vf-card { background: var(--surface-color); border: 1px solid var(--border-color); border-radius: var(--radius-md); padding: 16px 18px; }
.vf-card + .vf-card { margin-top: 12px; }
.vf-head { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; justify-content: space-between; }
.vf-head h4 { font-size: 1rem; font-weight: 700; margin: 0; }
.vf-why { color: var(--text-muted); font-size: .85rem; margin: 4px 0 12px; }
.vf-reason { background: var(--danger-soft); border: 1px solid rgba(200, 62, 77, .3); color: #7d2330; border-radius: var(--radius-sm); padding: 10px 12px; font-size: .86rem; margin: 10px 0; }
.vf-reason--ask { background: #FBF3E4; border-color: #EBD6A8; color: #6b4e12; }
.vf-doc { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; justify-content: space-between; padding: 8px 0; border-top: 1px solid var(--border-light); font-size: .88rem; }
.vf-doc:first-of-type { border-top: 0; }
.vf-doc__name { font-weight: 600; }
.vf-doc__actions { display: inline-flex; gap: 10px; align-items: center; }
.vf-doc__actions a, .vf-doc__actions button { font-size: .82rem; }
.vf-meter { height: 6px; background: var(--primary-soft-strong); border-radius: 99px; overflow: hidden; }
.vf-meter > i { display: block; height: 100%; background: var(--primary-color); }
.vf-steps { list-style: none; padding: 0; margin: 8px 0 0; font-size: .86rem; }
.vf-steps li { display: flex; gap: 8px; align-items: flex-start; padding: 3px 0; color: var(--text-muted); }
.vf-steps li.is-done { color: var(--text-color); }
.vf-steps i { margin-top: 3px; font-size: .8rem; color: var(--text-light); }
.vf-steps li.is-done i { color: var(--primary-color); }
.vf-legend { font-size: .82rem; color: var(--text-muted); }
.vf-legend li { margin-bottom: 4px; }
.vf-poster { display: flex !important; flex-wrap: wrap; gap: 6px 10px; align-items: center; margin-top: 4px; }


/* =========================================================
   ONE BUTTON SIZE EVERYWHERE
   The compact button of the building analytics page ("View Expenses" / "Add Expense" / "Back":
   .btn.btn-sm.btn-text-sm with its label in <small>) is the size of every standard button:
   14px text, .35rem x .9rem padding, 1.4 line height (~33px high), icon and label spaced by a gap.
   :where() keeps this at the specificity of a plain .btn, so component rules that size their own
   buttons on purpose (table row buttons, the listing-card links, .btn-field next to inputs, the icon
   circles .btn-sm, .btn-lg) still win. The form bars (.fs-btn) use the same numbers above.
   ========================================================= */
.btn:where(:not(.btn-sm, .btn-lg, .btn-field, .btn-link, .btn-close, .input-group > .btn)) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4em;
    padding: 0.35rem 0.9rem;
    font-size: 0.875rem;
    line-height: 1.4;
}

/* a label already wrapped in <small> (older markup) must not shrink a second time */
.btn:where(:not(.btn-sm, .btn-lg, .btn-field, .btn-link, .btn-close, .input-group > .btn)) small {
    font-size: inherit;
}

/* ==========================================================
   Super-admin dashboard (sad-*): calm cards, one signature green
   ========================================================== */
.sad-top { display: flex; justify-content: space-between; align-items: flex-end; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.5rem; }
/* Page titles in the admin areas: the same size as the listing pages' headings (.lp-hero h1 / p) */
.sad-title { font-family: var(--font-heading); font-weight: 700; font-size: 1.25rem; letter-spacing: -.01em; margin: 0; }
.sad-sub { color: var(--text-muted); margin: .25rem 0 0; font-size: .875em; }
.sad-top-actions { display: flex; gap: .6rem; flex-wrap: wrap; }

.sad-sec { font-family: var(--font-body); font-size: .75rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted); margin: 1.75rem 0 .65rem; }
.sad-sec-row { display: flex; justify-content: space-between; align-items: flex-end; margin-top: 1.75rem; }
.sad-sec-row .sad-sec { margin: 0 0 .65rem; }
.sad-sec-row .dropdown { margin-bottom: .5rem; }

.sad-card { background: var(--surface-color); border: 1px solid var(--border-color); border-radius: var(--radius-lg); padding: 1rem 1.15rem; }
.sad-ico { width: 38px; height: 38px; border-radius: 11px; background: var(--primary-soft-strong); color: var(--primary-color); display: inline-flex; align-items: center; justify-content: center; flex: none; }

.sad-kpis { display: grid; grid-template-columns: repeat(6, 1fr); gap: .9rem; }
.sad-kpi .sad-ico { width: 34px; height: 34px; margin-bottom: .75rem; }
.sad-kpi-label { font-size: .8rem; font-weight: 500; color: var(--text-muted); }
.sad-kpi-num { font-family: var(--font-heading); font-weight: 800; font-size: 1.75rem; letter-spacing: -.02em; line-height: 1.15; margin: .1rem 0 .6rem; }
.sad-bar { height: 6px; border-radius: 3px; background: #e9ecea; overflow: hidden; }
.sad-bar b { display: block; height: 100%; background: var(--primary-color); border-radius: 3px; }
.sad-kpi-meta { display: flex; justify-content: space-between; font-size: .72rem; color: var(--text-muted); margin-top: .45rem; gap: .5rem; }
.sad-kpi-meta span:first-child { color: var(--primary-dark); font-weight: 600; }
.sad-kpi--main { background: var(--primary-dark); border-color: var(--primary-dark); color: #fff; }
.sad-kpi--main .sad-ico { background: rgba(255, 255, 255, .14); color: #fff; }
.sad-kpi--main .sad-kpi-label, .sad-kpi--main .sad-kpi-meta { color: rgba(255, 255, 255, .8); }
.sad-kpi--main .sad-kpi-meta span:first-child { color: var(--accent-color); }
.sad-kpi--main .sad-bar { background: rgba(255, 255, 255, .22); }
.sad-kpi--main .sad-bar b { background: var(--accent-color); }

.sad-grid { display: grid; gap: .9rem; }
.sad-grid--4 { grid-template-columns: repeat(4, 1fr); }
.sad-grid--5 { grid-template-columns: repeat(3, 1fr); }
.sad-qa { display: flex; align-items: center; gap: .8rem; text-decoration: none; color: var(--text-color); transition: border-color .15s, box-shadow .15s; }
.sad-qa b { font-size: .92rem; font-weight: 600; }
.sad-qa:hover { border-color: var(--primary-color); box-shadow: 0 2px 10px rgba(8, 127, 91, .08); color: var(--text-color); }

.sad-main { display: grid; grid-template-columns: 2fr 1fr; gap: .9rem; margin-top: 1.5rem; align-items: start; }
.sad-main > * { min-width: 0; }
.sad-card-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: .6rem; }
.sad-card-head h3 { font-family: var(--font-heading); font-weight: 700; font-size: 1rem; margin: 0; }
.sad-link { font-size: .85rem; font-weight: 600; color: var(--primary-color); text-decoration: none; }
.sad-link:hover { color: var(--primary-dark); text-decoration: underline; }
.sad-link--btn { background: none; border: 0; padding: 0; text-align: left; }
.sad-tool-links { display: flex; flex-direction: column; align-items: flex-start; gap: .3rem; }
.btn.sad-more { width: auto; height: 32px; padding: 0 .85rem; white-space: nowrap; gap: .4em; }
.sad-recent .badge i { font-size: .4rem; vertical-align: middle; }
.sad-tool > div { min-width: 0; }
.sad-recent .card-body { padding: 0; }
.sad-recent .table { margin-bottom: 0; }
.sad-recent .table thead th { font-size: .7rem; text-transform: uppercase; letter-spacing: .06em; color: var(--text-muted); font-weight: 600; border-bottom-color: var(--border-color); }

.sad-split { display: flex; gap: 2px; height: 12px; border-radius: 6px; overflow: hidden; margin: .4rem 0 1rem; background: #e9ecea; }
.sad-split b { display: block; height: 100%; }
.sad-legend { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: .6rem; font-size: .88rem; }
.sad-legend li { display: flex; align-items: center; gap: .55rem; }
.sad-legend i { width: 10px; height: 10px; border-radius: 3px; display: block; flex: none; }
.sad-legend span { margin-left: auto; font-weight: 600; }

.sad-tool { display: flex; gap: .8rem; align-items: flex-start; }
.sad-tool b { font-size: .92rem; font-weight: 700; }
.sad-tool p { margin: .2rem 0 .6rem; font-size: .8rem; color: var(--text-muted); line-height: 1.4; }

@media (max-width: 1199.98px) {
    .sad-kpis { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 991.98px) {
    .sad-main { grid-template-columns: 1fr; }
    .sad-grid--4 { grid-template-columns: repeat(2, 1fr); }
    .sad-grid--5 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 575.98px) {
    .sad-kpis { grid-template-columns: repeat(2, 1fr); }
    .sad-grid--4, .sad-grid--5 { grid-template-columns: 1fr; }
    .sad-top-actions .btn { flex: 1; }
}

/* Admin dashboard additions (shares the sad-* look of the super-admin dashboard) */
.sad-kpis--4 { grid-template-columns: repeat(4, 1fr); }
.sad-kpi-sub { font-size: .8rem; color: var(--text-muted); }
.sad-kpi--main .sad-kpi-sub { color: rgba(255, 255, 255, .8); }
.sad-ico--danger { background: var(--danger-soft); color: #9d2f3d; }
.sad-seg { display: inline-flex; background: var(--primary-soft-strong); border-radius: 10px; padding: 3px; }
.sad-seg button { border: 0; background: transparent; padding: .3rem .8rem; font-size: .8rem; font-weight: 600; color: var(--text-muted); border-radius: 8px; cursor: pointer; }
.sad-seg button.active { background: #fff; color: var(--primary-dark); box-shadow: 0 1px 2px rgba(0, 0, 0, .08); }
.sad-chart { position: relative; }
.sad-charts { display: grid; grid-template-columns: 1fr 1fr; gap: .9rem; margin-top: .9rem; }
.sad-charts--wide { grid-template-columns: 1.4fr 1fr; }
.sad-charts > * { min-width: 0; }
.sad-statusbar { display: flex; gap: 2px; height: 26px; border-radius: 8px; overflow: hidden; background: var(--primary-soft-strong); margin-top: .25rem; }
.sad-statusbar span { display: block; height: 100%; min-width: 4px; }
.sad-status-summary { display: flex; gap: 1.4rem; flex-wrap: wrap; margin-top: 1rem; font-size: .85rem; }
.sad-status-summary div { display: flex; align-items: center; gap: .45rem; }
.sad-status-summary i { width: 10px; height: 10px; border-radius: 3px; display: block; }
.sad-status-summary span { color: var(--text-muted); }
@media (max-width: 991.98px) {
    .sad-kpis--4 { grid-template-columns: repeat(2, 1fr); }
    .sad-charts, .sad-charts--wide { grid-template-columns: 1fr; }
}

/* Role / status pills in the dashboards' recent-user tables */
.sad-recent .badge.bg-secondary { background-color: var(--primary-soft-strong) !important; color: var(--primary-dark); font-weight: 600; }
.sad-recent .badge.bg-success { background-color: #e1f3ea !important; color: var(--primary-dark); font-weight: 600; }
.sad-recent .badge.bg-danger { background-color: #f8e3e6 !important; color: #9d2f3d; font-weight: 600; }

/* Admin users list (shares the sad-* look) */
.sad-tabs { list-style: none; display: flex; gap: .35rem; padding: 0; margin: 0 0 1rem; flex-wrap: wrap; }
.sad-tab { display: inline-flex; align-items: center; gap: .5rem; padding: .45rem .9rem; border-radius: 999px; font-size: .88rem; font-weight: 600; color: var(--text-muted); background: transparent; border: 1px solid transparent; text-decoration: none; }
.sad-tab:hover { background: var(--primary-soft-strong); color: var(--primary-dark); }
.sad-tab.active { background: var(--primary-color); color: #fff; }
.sad-tab-n { font-size: .75rem; font-weight: 700; padding: .05rem .5rem; border-radius: 999px; background: var(--primary-soft-strong); color: var(--primary-dark); }
.sad-tab.active .sad-tab-n { background: rgba(255, 255, 255, .22); color: #fff; }
.sad-toolbar { display: flex; justify-content: space-between; align-items: center; gap: .8rem 1.2rem; flex-wrap: wrap; padding-bottom: .9rem; }
.sad-search { position: relative; display: flex; align-items: center; gap: .5rem; flex: 1 1 320px; max-width: 520px; }
.sad-search > .fa-search { position: absolute; left: .85rem; color: var(--text-muted); font-size: .85rem; pointer-events: none; }
.sad-search .form-control { padding-left: 2.2rem; padding-right: 2rem; border-radius: 10px; background: var(--bg-color, #F7F8F4); }
.sad-search-clear { position: absolute; right: 5.6rem; color: var(--text-muted); font-size: .8rem; text-decoration: none; }
.sad-users .pagination-info { font-size: .85rem; color: var(--text-muted); }
.sad-users .table thead th a { text-decoration: none; }
@media (max-width: 575.98px) {
    .sad-tabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
    .sad-tab { white-space: nowrap; }
}

/* Cars admin: the make filter sits next to the search field */
.sad-search--filter { max-width: 640px; }
.sad-search-field { position: relative; display: flex; align-items: center; flex: 1 1 auto; min-width: 0; }
.sad-search-field > .fa-search { position: absolute; left: .85rem; color: var(--text-muted); font-size: .85rem; pointer-events: none; }
.sad-search-field .form-control { padding-left: 2.2rem; padding-right: 2rem; border-radius: 10px; background: var(--bg-color, #F7F8F4); }
.sad-search-field .sad-search-clear { right: .8rem; }
.sad-select { width: auto; max-width: 240px; min-width: 200px; flex: none; padding-right: 2.25rem; border-radius: 10px; background-color: var(--bg-color, #F7F8F4); }
@media (max-width: 575.98px) { .sad-search--filter { flex-wrap: wrap; } .sad-select { max-width: none; flex: 1 1 100%; } .sad-search-field { flex: 1 1 0; } }

/* Locations admin: soft "N cities" links */
.sad-recent .badge.bg-info { background-color: #e6eef8 !important; color: #2a5598; font-weight: 600; text-decoration: none; }
.sad-recent a.badge.bg-info:hover { background-color: #d5e3f5 !important; }
.sad-search--filter .sad-select + .sad-select { margin-left: 0; }
.sad-search--filter { max-width: 780px; flex-wrap: wrap; }
.sad-search--filter .sad-search-field { flex: 1 1 200px; min-width: 200px; }

/* Row action buttons always sit on one line, forms included */
.sad-recent td:last-child { white-space: nowrap; }
.sad-recent td:last-child form { display: inline-block; margin: 0; vertical-align: top; }
.sad-recent td:last-child .user-action-btn,
.sad-recent td:last-child .edit-btn,
.sad-recent td:last-child .delete-btn { vertical-align: top; }

/* Agencies admin */
.sad-agency-logo { width: 34px; height: 34px; border-radius: 9px; object-fit: cover; flex: none; }
.sad-agency-logo--empty { display: inline-flex; align-items: center; justify-content: center; background: var(--primary-soft-strong); color: var(--primary-dark); font-size: .85rem; }
.sad-tab-n--alert, .sad-tab.active .sad-tab-n--alert { background: #c83e4d; color: #fff; }
.sad-recent .badge.bg-warning { background-color: #f9eed7 !important; color: #8a5a12 !important; font-weight: 600; }

/* Newsletter admin: status cards double as filters */
a.sad-kpi--link { text-decoration: none; color: inherit; transition: border-color .15s, box-shadow .15s; }
a.sad-kpi--link:hover { border-color: var(--primary-color); box-shadow: 0 2px 10px rgba(8, 127, 91, .08); color: inherit; }
.sad-kpi.is-active { border-color: var(--primary-color); box-shadow: 0 0 0 1px var(--primary-color); }
.sad-ico--warn { background: #f9eed7; color: #8a5a12; }
.sad-ico--muted { background: #eceeed; color: #5d6b66; }
.sad-bar--warn b { background: #B7791F; }
.sad-bar--muted b { background: #8b9690; }
.sad-kpis--4 .sad-kpi-num { margin-bottom: .5rem; }
@media (max-width: 991.98px) { .sad-kpis--4 { grid-template-columns: repeat(2, 1fr); } }
.sad-recent .badge i.fa-circle-check, .sad-recent .badge i.fa-hourglass-half, .sad-recent .badge i.fa-user-slash { font-size: .72rem; vertical-align: baseline; }

/* Partners admin */
.sad-partner-logo { width: 64px; height: 40px; border: 1px solid var(--border-color); border-radius: 9px; background: #fff; display: inline-flex; align-items: center; justify-content: center; flex: none; overflow: hidden; padding: 4px; }
.sad-partner-logo img { max-width: 100%; max-height: 100%; object-fit: contain; }
.sad-partner-logo--empty { background: var(--primary-soft-strong); color: var(--primary-dark); border-color: transparent; }
.sad-icon-btn { width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--border-color); border-radius: 6px; background: transparent; color: var(--text-muted); cursor: pointer; transition: all .2s ease; vertical-align: top; }
.sad-icon-btn:hover:not(:disabled) { color: var(--primary-dark); border-color: var(--primary-color); background: var(--primary-soft-strong); }
.sad-icon-btn:disabled { opacity: .4; cursor: not-allowed; }
.sad-recent td:last-child .sad-icon-btn { vertical-align: top; }
.sad-top > div:first-child { flex: 1 1 320px; min-width: 0; }
.sad-top .sad-sub { max-width: 62ch; }
.sad-recent .badge i.fa-house { font-size: .68rem; vertical-align: baseline; }

/* Exchange rates admin */
.sad-cur { display: inline-block; min-width: 3.1rem; text-align: center; padding: .22rem .6rem; border-radius: 8px; background: #eceeed; color: var(--text-color); font-weight: 700; font-size: .78rem; letter-spacing: .04em; }
.sad-cur--from { background: var(--primary-soft-strong); color: var(--primary-dark); }
.sad-num { font-variant-numeric: tabular-nums; }
.sad-rates td { vertical-align: middle; }
.sad-row-off > td { opacity: .55; }
.sad-row-off > td:last-child { opacity: 1; }
.sad-howto ul { padding-left: 1.1rem; display: grid; gap: .35rem; }
.sad-howto h3 i { color: var(--primary-color); }
.sad-howto code { background: var(--primary-soft-strong); color: var(--primary-dark); padding: .05rem .35rem; border-radius: 5px; }


/* Super-admin payouts */
.sad-chips { display: flex; flex-wrap: wrap; gap: .45rem; margin-top: .6rem; }
.sad-chip { display: inline-flex; align-items: center; gap: .45rem; padding: .28rem .75rem; border-radius: 999px; background: var(--primary-soft-strong); color: var(--text-muted); font-size: .8rem; }
.sad-chip b { color: var(--text-color); font-weight: 600; }
.sad-chip i { font-size: .75rem; }
.sad-chip--ok i { color: var(--primary-color); }
.sad-chip--warn { background: #f9eed7; }
.sad-chip--warn i { color: #8a5a12; }
.sad-rev { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: .9rem; }
.sad-rev > * { min-width: 0; }
.sad-rev-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: .8rem; }
.sad-rev-num { font-family: var(--font-heading); font-weight: 800; font-size: 1.9rem; letter-spacing: -.02em; line-height: 1.1; color: var(--primary-dark); }
.sad-rev-gross { font-size: .82rem; color: var(--text-muted); margin-bottom: 1rem; }
.sad-lifecycle { display: flex; gap: 2px; height: 12px; border-radius: 6px; overflow: hidden; background: #e9ecea; margin-bottom: .8rem; }
.sad-lc { display: block; height: 100%; min-width: 4px; }
.sad-lc--pending { background: #cfe6dc; }
.sad-lc--eligible { background: #8cc5ae; }
.sad-lc--payout { background: #3e9c7e; }
.sad-lc--paid { background: #087f5b; }
.sad-lc-legend { list-style: none; padding: 0; margin: 0; display: grid; gap: .35rem; font-size: .84rem; }
.sad-lc-legend li { display: flex; align-items: center; gap: .55rem; }
.sad-lc-legend i { width: 10px; height: 10px; border-radius: 3px; flex: none; }
.sad-lc-legend b { margin-left: auto; font-weight: 600; font-variant-numeric: tabular-nums; }
.sad-money td small, .sad-money .sad-num, .sad-money td:last-child { white-space: nowrap; }
.sad-money td:first-child, .sad-money td:nth-child(2), .sad-money td:nth-child(3) { white-space: nowrap; }
.sad-money th { white-space: nowrap; }
.sad-money td { font-size: .9rem; }
.sad-recent .badge.bg-info { background-color: #e6eef8 !important; color: #2a5598; }
@media (max-width: 575.98px) { .sad-rev { grid-template-columns: 1fr; } }
.sad-money td, .sad-money th { padding-left: .45rem; padding-right: .45rem; }
.sad-money td { font-size: .86rem; }
.sad-money td, .sad-money th { padding-left: .35rem; padding-right: .35rem; }
.sad-money td { font-size: .82rem; }
.sad-money th { font-size: .72rem; }
.sad-money .badge { font-size: .72rem; padding: .25rem .5rem; }

/* Super-admin payment distribution settings */
.sad-notice { display: flex; align-items: flex-start; gap: .7rem; padding: .8rem 1rem; margin-bottom: 1.1rem; border-radius: var(--radius-lg); background: #f9eed7; color: #6e4710; font-size: .92rem; }
.sad-notice i { margin-top: .2rem; color: #8a5a12; }
.sad-pd { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 1.1rem; align-items: start; }
.sad-pd-main { display: grid; gap: 1.1rem; min-width: 0; }
.sad-pd-card { padding: 1.15rem 1.25rem 1.25rem; }
.sad-pd-card .sad-card-head { margin-bottom: 1rem; }
.sad-pd-card .sad-card-head .sad-ico { width: 32px; height: 32px; border-radius: 9px; font-size: .85rem; }
.sad-pd-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem 1.1rem; }
.sad-pd-wide { grid-column: 1 / -1; }
.sad-pd-field .form-label { font-size: .82rem; font-weight: 600; color: var(--text-color); margin-bottom: .35rem; }
.sad-pd-field .form-text { font-size: .78rem; color: var(--text-muted); }
.sad-pd-field .input-group-text { background: var(--primary-soft-strong); color: var(--text-muted); border-color: var(--border-color); font-size: .85rem; }
.sad-field-err { color: #c83e4d; font-size: .8rem; margin-top: .3rem; }
.sad-pd-save { display: flex; justify-content: space-between; align-items: center; gap: .8rem; flex-wrap: wrap; }
.sad-pd-aside { position: sticky; top: 90px; }
.sad-split { display: flex; gap: 2px; height: 14px; border-radius: 7px; overflow: hidden; background: #087f5b; }
.sad-split-fee { display: block; height: 100%; background: #d9b77a; min-width: 0; transition: width .2s ease; }
.sad-split-pro { display: block; height: 100%; flex: 1; background: #087f5b; }
.sad-split-dot-fee { background: #d9b77a; }
.sad-split-dot-pro { background: #087f5b; }
.sad-split-note { margin: 1rem 0 0; padding-top: .8rem; border-top: 1px solid var(--border-color); font-size: .82rem; color: var(--text-muted); }
@media (max-width: 991.98px) { .sad-pd { grid-template-columns: 1fr; } .sad-pd-aside { position: static; order: -1; } }
@media (max-width: 575.98px) { .sad-pd-grid { grid-template-columns: 1fr; } .sad-pd-save .btn { width: 100%; } }

/* Super-admin system settings */
.sad-sys-save { margin-top: 1.1rem; display: flex; justify-content: flex-end; }
.sad-sys-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 1rem; }
.sad-sys-tile { display: flex; gap: .95rem; align-items: flex-start; padding: 1.15rem 1.25rem; text-decoration: none; color: var(--text-color); transition: border-color .15s ease, box-shadow .15s ease; }
.sad-sys-tile:hover { border-color: var(--primary-color); box-shadow: 0 2px 10px rgba(8,127,91,.08); color: var(--text-color); }
.sad-sys-tile .sad-ico { margin-top: .1rem; }
.sad-sys-tile-body { display: grid; gap: .35rem; min-width: 0; }
.sad-sys-tile-body strong { font-family: var(--font-heading); font-size: 1rem; }
.sad-sys-tile-body small { color: var(--text-muted); font-size: .84rem; line-height: 1.45; }
.sad-sys-tile-body .sad-link { margin-top: .2rem; }
.sad-sys-tile:hover .sad-link { text-decoration: underline; }
@media (max-width: 575.98px) { .sad-sys-tiles { grid-template-columns: 1fr; } .sad-sys-save .btn { width: 100%; } }

/* Super-admin VAT settings */
button.sad-tab { font-family: inherit; cursor: pointer; }
.sad-recent .badge.bg-light { background-color: #eef1ef !important; color: #4b5a55; }
.sad-empty { text-align: center; color: var(--text-muted); padding: 1.5rem 0 .75rem; margin: 0; }
.sad-vat-modal .modal-content { border-radius: var(--radius-lg); border: 1px solid var(--border-color); }
.sad-vat-modal .modal-header { border-bottom: 0; padding-bottom: .25rem; }
.sad-vat-modal .modal-title { font-family: var(--font-heading); font-weight: 700; font-size: 1.1rem; }
.sad-vat-modal .modal-footer { border-top: 0; }
.sad-vat-modal .form-label { font-size: .82rem; font-weight: 600; margin-bottom: .35rem; }
.sad-vat-modal .input-group-text { background: var(--primary-soft-strong); color: var(--text-muted); border-color: var(--border-color); }

/* Admin verification audit log */
.sad-log td { padding-top: .7rem; padding-bottom: .7rem; font-size: .88rem; }
.sad-log-member { white-space: nowrap; font-weight: 600; color: var(--primary-dark); text-decoration: none; }
.sad-log-member:hover { text-decoration: underline; }
.sad-log-arrow { font-size: .65rem; color: var(--text-muted); margin: 0 .25rem; }
.sad-tag { display: inline-block; padding: .12rem .55rem; border-radius: 999px; background: #eef1ef; color: #4b5a55; font-size: .76rem; font-weight: 600; text-transform: capitalize; }
.sad-tag--to { background: var(--primary-soft-strong); color: var(--primary-dark); }
.sad-log-reason { max-width: 320px; color: var(--text-muted); }
.sad-recent .badge .fas { font-size: .72rem !important; }
.sad-tag--bad { background: #fbeaec; color: #a63340; }
.sad-tag--warn { background: #f9eed7; color: #8a5a12; }
.sad-log td.sad-log-reason, .sad-users .sad-log td:last-child { white-space: normal; min-width: 180px; }

/* Admin verifications queue */
.sad-kpis--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.sad-kpis--5 .sad-kpi-num { margin-bottom: .1rem; }
@media (max-width: 991.98px) { .sad-kpis--5 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Admin verification detail */
.sad-title-pill { display: inline-block; vertical-align: middle; margin-left: .6rem; font-family: var(--font-body); font-size: .9rem; font-weight: 400; letter-spacing: 0; }
.sad-vd-member { display: flex; align-items: center; gap: .9rem; padding-bottom: 1rem; margin-bottom: 1rem; border-bottom: 1px solid var(--border-color); }
.sad-vd-avatar { width: 46px; height: 46px; border-radius: 50%; background: var(--primary-color); color: #fff; font-family: var(--font-heading); font-weight: 800; font-size: 1.2rem; display: flex; align-items: center; justify-content: center; flex: none; }
.sad-vd-member-info { flex: 1; min-width: 0; }
.sad-vd-name { font-weight: 700; color: var(--primary-dark); text-decoration: none; font-size: 1.05rem; }
.sad-vd-name:hover { text-decoration: underline; }
.sad-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .9rem 1.2rem; margin: 0; }
.sad-facts > div { min-width: 0; }
.sad-facts dt { font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text-muted); margin-bottom: .2rem; }
.sad-facts dd { margin: 0; font-size: .92rem; }
.sad-facts-wide { grid-column: 1 / -1; }
.sad-doc { display: flex; align-items: center; gap: .85rem; padding: .8rem 0; border-top: 1px solid var(--border-color); flex-wrap: wrap; }
.sad-doc:first-of-type { border-top: 0; padding-top: 0; }
.sad-doc-ico { width: 38px; height: 38px; border-radius: 10px; background: var(--primary-soft-strong); color: var(--primary-color); display: flex; align-items: center; justify-content: center; flex: none; }
.sad-doc-main { flex: 1 1 180px; min-width: 0; }
.sad-doc-side { display: flex; align-items: center; gap: .8rem; flex-wrap: wrap; }
.sad-doc-note { margin: .9rem 0 0; padding-top: .8rem; border-top: 1px solid var(--border-color); font-size: .8rem; color: var(--text-muted); }
.sad-tl { list-style: none; margin: 0; padding: 0; position: relative; }
.sad-tl li { display: flex; gap: .8rem; padding-bottom: 1rem; position: relative; }
.sad-tl li:not(:last-child)::before { content: ''; position: absolute; left: 14px; top: 30px; bottom: 0; width: 2px; background: var(--border-color); }
.sad-tl li:last-child { padding-bottom: 0; }
.sad-tl-dot { width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex: none; font-size: .72rem; background: #eef1ef; color: #4b5a55; }
.sad-tl-dot--ok { background: var(--primary-soft-strong); color: var(--primary-dark); }
.sad-tl-dot--bad { background: #fbeaec; color: #a63340; }
.sad-tl-dot--warn { background: #f9eed7; color: #8a5a12; }
.sad-tl-dot--info { background: #e6eef8; color: #2a5598; }
.sad-tl-body { flex: 1; min-width: 0; font-size: .88rem; }
.sad-tl-head { display: flex; justify-content: space-between; gap: .5rem; }
.sad-tl-reason { margin-top: .3rem; padding: .4rem .65rem; border-radius: 8px; background: var(--bg-color, #F7F8F4); }
@media (max-width: 575.98px) { .sad-facts { grid-template-columns: 1fr; } .sad-title-pill { display: block; margin: .4rem 0 0; } }

/* Super admin promotions */
.sad-note { display: flex; align-items: flex-start; gap: .7rem; padding: .8rem 1rem; margin: 0 0 1.1rem; border-radius: var(--radius-lg); background: var(--primary-soft-strong); color: var(--primary-dark); font-size: .9rem; }
.sad-note i { margin-top: .22rem; color: var(--primary-color); }
.sad-prices { display: flex; flex-wrap: wrap; gap: .4rem; }
.sad-price { display: inline-flex; align-items: baseline; gap: .45rem; padding: .28rem .7rem; border-radius: 999px; background: #f1f4f1; font-size: .82rem; white-space: nowrap; }
.sad-price-plan { color: var(--text-muted); font-weight: 600; }
.sad-price b { color: var(--primary-dark); font-weight: 700; }
.sad-price s { color: var(--text-muted); font-size: .76rem; }
.sad-when { font-size: .82rem; color: var(--text-muted); white-space: nowrap; }
.sad-when i { width: 1.1rem; font-size: .6rem; color: var(--primary-color); }
.sad-recent #promoTable td { vertical-align: middle; }
.sad-recent #promoTable td:first-child { min-width: 10rem; }
.sad-recent #promoTable td:last-child { white-space: normal; min-width: 17rem; }
@media (max-width: 767.98px) {
    .sad-recent #promoTable thead { display: none; }
    .sad-recent #promoTable, .sad-recent #promoTable tbody { display: block; }
    .sad-recent #promoTable tr { display: block; padding: .9rem 0; border-bottom: 1px solid var(--border-color); }
    .sad-recent #promoTable tr[hidden] { display: none; }
    .sad-recent #promoTable td { display: block; padding: .25rem 0; border: 0; min-width: 0 !important; text-align: left !important; }
    .sad-recent #promoTable td:first-child { font-size: 1.02rem; }
    .sad-recent #promoTable .sad-when div { display: inline-block; margin-right: .9rem; }
    .sad-recent #promoTable td:last-child { padding-top: .6rem; }
    .sad-recent #promoTable td:last-child > div { justify-content: flex-start !important; }
}

/* Super admin promotion form */
.sad-plans { display: grid; gap: .6rem; }
.sad-plan { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .7rem .9rem; border: 1px solid var(--border-color); border-radius: var(--radius-md, 12px); background: var(--surface-color); }
.sad-plan:has(.form-check-input:checked) { border-color: var(--primary-color); background: var(--primary-soft-strong); }
.sad-plan.is-off { opacity: .65; }
.sad-plan .form-check { margin: 0; display: flex; align-items: center; gap: .65rem; padding: 0; min-width: 0; }
.sad-plan .form-check-input { float: none; margin: 0; flex: none; width: 1.15rem; height: 1.15rem; }
.sad-plan .form-check-label { display: flex; flex-direction: column; line-height: 1.25; }
.sad-plan-name { font-weight: 700; }
.sad-plan-sub { color: var(--text-muted); font-size: .78rem; }
.sad-plan-price { width: 150px; flex: none; }
.sad-plan-actions { display: grid; gap: .5rem; margin-top: 1.1rem; }
.sad-notify { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem 1.4rem; }
.sad-notify .form-text { margin-top: .3rem; padding-left: 2.5em; }
.sad-aud { display: flex; flex-wrap: wrap; gap: .5rem 1.4rem; margin-top: 1.1rem; padding-top: 1rem; border-top: 1px solid var(--border-color); }
.sad-notify-count { margin-top: .9rem; font-size: .86rem; color: var(--primary-dark); }
.sad-notify-count i { color: var(--primary-color); }
@media (max-width: 767.98px) {
    .sad-notify { grid-template-columns: 1fr; }
    .sad-plan { flex-wrap: wrap; }
    .sad-plan-price { width: 100%; }
}
.sad-notify-count > div:has(> span[style*="display:none"]), .sad-notify-count > div:has(> span[style*="display: none"]) { display: none; }
@media (max-width: 991.98px) { .sad-pd-aside.sad-pd-aside--end { order: 2; } }

/* Tenant dashboard */
.sad-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.sad-units { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .9rem; }
.sad-unit { display: flex; flex-direction: column; padding: 1rem 1.1rem; border: 1px solid var(--border-color); border-radius: var(--radius-md, 12px); background: var(--bg-color, #F7F8F4); }
.sad-unit-name { font-family: var(--font-heading); font-weight: 700; font-size: 1.02rem; margin-bottom: .7rem; }
.sad-unit-facts { margin: 0 0 1rem; display: grid; gap: .5rem; }
.sad-unit-facts > div { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; font-size: .88rem; }
.sad-unit-facts dt { font-weight: 500; color: var(--text-muted); white-space: nowrap; }
.sad-unit-facts dt i { width: 1.2rem; color: var(--primary-color); font-size: .8rem; }
.sad-unit-facts dd { margin: 0; text-align: right; min-width: 0; overflow-wrap: anywhere; }
.sad-unit-actions { margin-top: auto; display: flex; flex-wrap: wrap; gap: .5rem; }
.sad-td-overview { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem; margin-top: 1.3rem; padding-top: 1.2rem; border-top: 1px solid var(--border-color); }
.sad-td-h { font-family: var(--font-heading); font-size: .95rem; font-weight: 700; margin: 0 0 .8rem; }
.sad-td-list { list-style: none; margin: 0 0 .8rem; padding: 0; display: grid; gap: .55rem; font-size: .88rem; }
.sad-td-list li { display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
.sad-td-list li > span:first-child { color: var(--text-muted); }
.sad-td-list i { width: 1.2rem; color: var(--primary-color); font-size: .8rem; }
.sad-td-prog-head { display: flex; justify-content: space-between; font-size: .85rem; color: var(--text-muted); margin-bottom: .4rem; }
.sad-td-prog-head b { color: var(--text-color); }
.sad-td-counts { display: flex; justify-content: space-between; gap: .5rem; margin-top: .9rem; font-size: .82rem; color: var(--text-muted); flex-wrap: wrap; }
.sad-td-counts b { color: var(--text-color); }
.sad-td-counts .is-ok { color: var(--primary-color); }
.sad-td-counts .is-warn { color: #8a5a12; }
.sad-seg { display: inline-flex; padding: 3px; border-radius: 999px; background: #eef1ef; }
.sad-seg button { border: 0; background: transparent; padding: .22rem .8rem; border-radius: 999px; font-size: .8rem; font-weight: 600; color: var(--text-muted); }
.sad-seg button.active { background: var(--primary-color); color: #fff; }
.sad-status-badges { display: flex; flex-wrap: wrap; justify-content: center; gap: .6rem; margin-top: 1rem; font-size: .8rem; }
.sad-status-badges .badge { font-weight: 600; }
.sad-td-link { display: flex; gap: .95rem; align-items: flex-start; padding: 1.15rem 1.25rem; }
.sad-td-link-body { display: grid; gap: .3rem; min-width: 0; }
.sad-td-link-body strong { font-family: var(--font-heading); font-size: 1rem; }
.sad-td-link-body small { color: var(--text-muted); }
.sad-td-link-actions { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .55rem; }
.sad-recent .sad-card-head { padding: 0 0 .2rem; }
@media (max-width: 991.98px) { .sad-grid--3 { grid-template-columns: 1fr; } .sad-kpis--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 767.98px) { .sad-units, .sad-td-overview { grid-template-columns: 1fr; } .sad-charts, .sad-charts--wide { grid-template-columns: 1fr; } }
.sad-td-units, .sad-td-recent { margin-top: .9rem; }
.sad-td-units, .sad-kpis + .sad-note { margin-top: 1.1rem; }
.sad-td-recent .table th, .sad-td-recent .table td { white-space: nowrap; }

/* Tenant invoices */
.sad-ti .sortable-header { cursor: pointer; white-space: nowrap; color: inherit; }
.sad-ti .sortable-header:hover { color: var(--primary-color); }
.sad-ti .sortable-header i { font-size: .7em; }
.sad-ti .table th, .sad-ti .table td { white-space: nowrap; }
.sad-ti tr.is-overdue > td { background: #fbf1f2; }
@media (max-width: 575.98px) {
    .sad-kpis--4 .sad-kpi-num { font-size: 1.3rem; overflow-wrap: anywhere; }
    /* Numeric KPI values (dashboard etc.): scale with the screen and stay on ONE line, even for 10-digit amounts */
    .sad-kpis--4 .sad-kpi-num.sad-num { font-size: clamp(.85rem, 4vw, 1.3rem); white-space: nowrap; overflow-wrap: normal; letter-spacing: -.03em; }
}

/* ── All KPI / stat cards, mobile: values scale with the screen so long amounts stay on one line ── */
@media (max-width: 575.98px) {
    .sad-kpi-num:not(.sad-kpi-num--date) { font-size: clamp(.85rem, 4vw, 1.3rem); white-space: nowrap; overflow-wrap: normal; letter-spacing: -.03em; }
    .sad-kpis--3 .sad-kpi-num:not(.sad-kpi-num--date) { font-size: clamp(1rem, 6vw, 1.5rem); }
    .ba-tile .ba-tile__num { font-size: clamp(.9rem, 4.4vw, 1.25rem); letter-spacing: -.03em; overflow-wrap: normal; white-space: nowrap; }
    .stat-number { font-size: clamp(.95rem, 4.6vw, 1.6rem); letter-spacing: -.02em; }
    .vh-stat-value { font-size: clamp(.85rem, 4vw, 1.3rem); white-space: nowrap; letter-spacing: -.03em; }
    .pa-stat-value { font-size: clamp(.9rem, 4.4vw, 1.1rem); }
}

/* Tenant unit detail */
.sad-kpis--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.sad-facts--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.1rem 1.4rem; }
.sad-ud .sad-facts dd { font-size: .95rem; }
.sad-more { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: .6rem; margin-top: .9rem; padding-top: .9rem; border-top: 1px solid var(--border-color); }
@media (max-width: 991.98px) { .sad-facts--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 575.98px) { .sad-kpis--3 { grid-template-columns: 1fr; } .sad-facts--3 { grid-template-columns: 1fr; } }

/* Tenant invoice detail */
.sad-kpi-num--date { font-size: 1.3rem; }
.sad-kpi-sub--bad { color: #c83e4d; font-weight: 600; }
.sad-td-prog-head .is-ok { color: var(--primary-color); }
.sad-td-prog-head .is-warn { color: #8a5a12; }
.sad-td-prog-head .is-bad { color: #c83e4d; }
.sad-bar--lg { height: 10px; border-radius: 5px; }
.sad-bar--lg b { border-radius: 5px; }
.sad-bar--danger b { background: #c83e4d; }
.sad-pay { position: sticky; top: 90px; }
.sad-sum { display: grid; gap: .5rem; margin-bottom: 1.1rem; font-size: .9rem; }
.sad-sum > div { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; }
.sad-sum > div > span { color: var(--text-muted); }
.sad-sum-total { margin-top: .2rem; padding-top: .7rem; border-top: 1px solid var(--border-color); font-size: 1rem; }
.sad-sum-total > span { color: var(--text-color) !important; font-weight: 600; }
.sad-sum-total b { font-family: var(--font-heading); font-size: 1.25rem; }
.sad-rates { margin-bottom: 1.1rem; padding: .85rem 1rem; border-radius: var(--radius-lg); background: var(--primary-soft); display: grid; gap: .6rem; }
.sad-rates-title { font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--primary-dark); }
.sad-rate { display: grid; gap: .1rem; }
.sad-rate-line { display: flex; justify-content: space-between; gap: 1rem; font-size: .9rem; flex-wrap: wrap; }
.sad-rate small { color: var(--text-muted); font-size: .76rem; }
.sad-pay-tabs { gap: .4rem; padding: 4px; margin-bottom: 1rem; border-radius: 999px; background: #eef1ef; }
.sad-pay-tabs .nav-link { border-radius: 999px; padding: .4rem .8rem; font-size: .85rem; font-weight: 600; color: var(--text-muted); }
.sad-pay-tabs .nav-link.active { background: var(--primary-color); color: #fff; }
.sad-pay-quick { display: flex; gap: .4rem; margin-top: .5rem; }
.sad-pay-secure { margin: .9rem 0 0; text-align: center; font-size: .78rem; color: var(--text-muted); }
.sad-paid-tile { text-align: center; padding: 2rem 1.5rem; }
.sad-paid-tile .sad-ico { width: 3rem; height: 3rem; font-size: 1.3rem; margin: 0 auto .8rem; }
.sad-paid-tile h3 { font-family: var(--font-heading); font-size: 1.15rem; font-weight: 700; margin: 0 0 .3rem; }
.sad-paid-tile p { color: var(--text-muted); font-size: .9rem; margin: 0 0 1.1rem; }
.sad-paid-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem; }
@media (max-width: 991.98px) { .sad-pay { position: static; } }
.sad-crumb { margin-bottom: 1rem; }
.sad-crumb .breadcrumb { margin: 0; font-size: .85rem; }
.sad-crumb .breadcrumb a { color: var(--primary-color); text-decoration: none; }
.sad-crumb .breadcrumb a:hover { text-decoration: underline; }
.sad-recent .badge.sad-charged { background: var(--primary-soft-strong) !important; color: var(--primary-dark) !important; font-weight: 600; }
@media (max-width: 575.98px) { .sad-title-pill.badge { width: fit-content; } }

/* Professional dashboard */
.sad-role-pill { display: inline-flex; align-items: center; align-self: center; padding: .35rem .85rem; border-radius: 999px; background: var(--primary-soft-strong); color: var(--primary-dark); font-size: .8rem; font-weight: 600; }
.sad-role-pill--owner { background: #f9eed7; color: #8a5a12; }
.sad-card-head-actions { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.sad-pro-filters { margin-bottom: 1rem; padding: .9rem 1.1rem; }
.sad-pro-filters-row { display: flex; flex-wrap: wrap; align-items: flex-end; gap: .8rem 1.1rem; }
.sad-pro-filters-row--stack { margin-bottom: 1.1rem; }
.sad-pro-filter { display: grid; gap: .25rem; }
.sad-pro-filter label { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--text-muted); margin: 0; }
.sad-pro-filter .form-select, .sad-pro-filter .form-control { min-width: 150px; border-radius: 10px; }
.sad-pro-filter-pair { display: flex; gap: .8rem; flex-wrap: wrap; }
.sad-pro-pills { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .8rem; }
.sad-pro-pills .badge { background: var(--primary-soft-strong) !important; color: var(--primary-dark) !important; font-weight: 600; padding: .35rem .7rem; }
.sad-kpi-sub .badge { font-weight: 600; }
.sad-kpi-sub .text-success { color: var(--primary-color) !important; }
.sad-pro-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem 1.2rem; }
.sad-pro-stats > div { display: grid; gap: .2rem; min-width: 0; }
.sad-pro-stats span { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--text-muted); }
.sad-pro-stats b { font-family: var(--font-heading); font-size: 1.15rem; font-weight: 700; overflow-wrap: anywhere; }
.sad-pro-stats .is-ok { color: var(--primary-color); }
.sad-pro-cap { margin: 0 0 .7rem; font-size: .85rem; color: var(--text-muted); display: flex; align-items: center; gap: .5rem; }
#investorMore .sad-pro-cap { margin-top: 1.3rem; }
.sad-lo { padding: .8rem 0; border-top: 1px solid var(--border-color); }
.sad-lo:first-child { border-top: 0; padding-top: 0; }
.sad-lo--all { padding-bottom: 1rem; }
.sad-lo-head { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-bottom: .45rem; }
.sad-lo-name { display: inline-flex; align-items: center; gap: .55rem; font-size: .92rem; }
.sad-lo-name i { font-size: 1rem; }
.sad-lo-head small { color: var(--text-muted); }
.sad-lo-foot { display: flex; justify-content: space-between; gap: 1rem; margin-top: .4rem; font-size: .78rem; color: var(--text-muted); }
.sad-lo-foot .is-ok { color: var(--primary-color); }
.sad-lo-foot .is-bad { color: #c83e4d; }
.sad-status-summary { justify-content: center; align-items: flex-start; }
.sad-legend-item { display: flex; align-items: flex-start; gap: .5rem; font-size: .85rem; }
.sad-legend-item i { margin-top: .35rem; flex-shrink: 0; }
.sad-status-summary .sad-legend-item > div { display: block; }
.sad-legend-item small { display: block; color: var(--text-muted); font-size: .75rem; }
.sad-rank { display: inline-flex; align-items: center; justify-content: center; width: 1.7rem; height: 1.7rem; border-radius: 50%; background: var(--primary-soft-strong); color: var(--text-muted); font-size: .8rem; font-weight: 700; }
.sad-rank--1 { background: #f9eed7; color: #8a5a12; }
.sad-rank--2 { background: #e6ebee; color: #4a5a63; }
.sad-rank--3 { background: #f3e4d6; color: #8a4a1f; }
.sad-recent tr.is-self > td { background: var(--primary-soft); }
.sad-recent tr.is-viewing > td { background: #fbf4e4; }
.sad-recent .badge.bg-primary { background-color: var(--primary-soft-strong) !important; color: var(--primary-dark); font-weight: 600; }
.sad-recent .badge.bg-info { background-color: var(--primary-soft-strong) !important; color: var(--primary-dark); font-weight: 600; }
.sad-perf-ico { flex-shrink: 0; }
.sad-recent .dashboard-thumb { width: 38px; height: 38px; }
@media (max-width: 767.98px) {
    .sad-pro-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .sad-pro-filter { flex: 1 1 130px; }
    .sad-pro-filter .form-select, .sad-pro-filter .form-control { min-width: 0; width: 100%; }
    .sad-pro-filters-row .sad-seg { margin-left: 0 !important; width: 100%; justify-content: stretch; }
    .sad-pro-filters-row .sad-seg button { flex: 1; }
}
#listingsOverviewBody { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 2rem; }
#listingsOverviewBody > .sad-lo--all, #listingsOverviewBody > .sad-empty { grid-column: 1 / -1; }
#listingsOverviewBody > .sad-lo:nth-child(2), #listingsOverviewBody > .sad-lo:nth-child(3) { border-top: 0; padding-top: .3rem; }
@media (max-width: 767.98px) {
    #listingsOverviewBody { grid-template-columns: 1fr; }
    #listingsOverviewBody > .sad-lo:nth-child(3) { border-top: 1px solid var(--border-color); padding-top: .8rem; }
}
#investorOverviewBody > .dash-more-btn { margin-top: 1rem; }
@media (max-width: 575.98px) { .sad-pro-stats b { font-size: 1rem; } .sad-recent .table > :not(caption) > * > * { padding-left: .5rem; padding-right: .5rem; } }
.sad-ins-kpis { margin-top: .9rem; }
.sad-ins-kpis .sad-bar { margin: .1rem 0 .5rem; }

/* ─── Professional earnings ─────────────────────────────────────────────── */
.sad-earn { padding: 1.2rem 1.3rem 1.3rem; margin-bottom: 1.1rem; }
.sad-earn-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem; }
.sad-earn-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 1.6rem 2.4rem; align-items: start; }
.sad-earn-num { font-family: var(--font-heading); font-weight: 800; font-size: 2.1rem; letter-spacing: -.02em; line-height: 1.1; color: var(--primary-dark); margin: .1rem 0 .35rem; overflow-wrap: anywhere; }
.sad-earn-note { font-size: .85rem; color: var(--text-muted); margin: 0 0 1rem; max-width: 42ch; }
.sad-earn-mini { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; }
.sad-earn-mini > div { background: var(--primary-soft-strong); border-radius: var(--radius-md, 12px); padding: .7rem .85rem; min-width: 0; }
.sad-earn-mini span { display: block; font-size: .72rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--text-muted); margin-bottom: .15rem; }
.sad-earn-mini b { font-family: var(--font-heading); font-size: 1.1rem; font-weight: 800; overflow-wrap: anywhere; }
.sad-earn-flow .sad-kpi-label { margin-bottom: .6rem; }
.sad-earn-legend li { align-items: flex-start; }
.sad-earn-legend li > i { margin-top: .32rem; }
.sad-earn-legend li > span { display: flex; flex-direction: column; min-width: 0; }
.sad-earn-legend li > span small { color: var(--text-muted); font-size: .76rem; }
.sad-earn-legend li > b { font-size: .9rem; }
.sad-earn-excl { margin: .7rem 0 0; font-size: .82rem; color: var(--text-muted); }
.sad-earn-facts { margin-top: 1.3rem; padding-top: 1.1rem; border-top: 1px solid var(--border-color); }
.sad-facts--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.1rem 1.4rem; }
.sad-earn-facts dd { font-weight: 600; font-size: 1rem; overflow-wrap: anywhere; }
.sad-earn-who { font-weight: 600; }
.sad-earn-table .table-responsive { border-radius: inherit; }
.sad-earn-empty { text-align: center; padding: 2.4rem 1.2rem; }
.sad-earn-empty .sad-ico { width: 48px; height: 48px; border-radius: 14px; font-size: 1.2rem; margin-bottom: .9rem; }
.sad-earn-empty h2 { font-family: var(--font-heading); font-size: 1.15rem; font-weight: 800; margin: 0 0 .3rem; }
.sad-earn-empty p { color: var(--text-muted); margin: 0; font-size: .92rem; }
@media (max-width: 991.98px) { .sad-earn-grid { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 575.98px) {
  .sad-earn { padding: 1rem; }
  .sad-earn-num { font-size: 1.7rem; }
  .sad-facts--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sad-earn-table .sad-money td, .sad-earn-table .sad-money th { padding-left: .5rem; padding-right: .5rem; }
}

/* ─── Professional payment accounts ─────────────────────────────────────── */
.sad-pa { padding: 1.2rem 1.3rem 1.3rem; margin-bottom: 1.1rem; }
.sad-pa-head { display: flex; align-items: center; gap: .9rem; }
.sad-pa-head .sad-ico { width: 44px; height: 44px; border-radius: 13px; font-size: 1.25rem; }
.sad-pa-title { flex: 1; min-width: 0; }
.sad-pa-title h2 { font-family: var(--font-heading); font-size: 1.1rem; font-weight: 800; margin: 0; }
.sad-pa-title p { margin: .15rem 0 0; font-size: .88rem; color: var(--text-muted); }
.sad-pa-head .badge { white-space: nowrap; align-self: flex-start; }
.sad-pa-steps { list-style: none; margin: 1.3rem 0 0; padding: 1.1rem 0 0; border-top: 1px solid var(--border-color); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.sad-pa-steps li { display: flex; align-items: center; gap: .7rem; min-width: 0; }
.sad-pa-dot { width: 30px; height: 30px; border-radius: 50%; flex: none; display: inline-flex; align-items: center; justify-content: center; font-size: .75rem; background: #eceeed; color: #5d6b66; }
.sad-pa-steps li.is-done .sad-pa-dot { background: var(--primary-color); color: #fff; }
.sad-pa-step-text { display: flex; flex-direction: column; min-width: 0; }
.sad-pa-step-text b { font-size: .9rem; font-weight: 600; }
.sad-pa-step-text small { font-size: .78rem; color: var(--text-muted); }
.sad-pa-actions { display: flex; align-items: center; gap: 1.1rem; flex-wrap: wrap; margin-top: 1.3rem; }
.sad-pa--soon { background: transparent; border-style: dashed; }
.sad-pa--soon .sad-pa-title h2 { color: var(--text-muted); }
@media (max-width: 767.98px) {
  .sad-pa-steps { grid-template-columns: minmax(0, 1fr); gap: .75rem; }
}
@media (max-width: 575.98px) {
  .sad-pa { padding: 1rem; }
  .sad-pa-head { flex-wrap: wrap; }
  .sad-pa-title { flex: 1 1 calc(100% - 70px); }
  .sad-pa-head .badge { margin-left: calc(44px + .9rem); }
  .sad-pa-actions .btn { width: 100%; }
  .sad-pa-actions form { display: block !important; width: 100%; }
}

/* =========================================================
   My listings (professional/my_listings.html): calm toolbar, pill tabs, 4-up card grid
   ========================================================= */
.ml-toolbar { padding-bottom: 1rem; }
.ml-toolbar .sad-search--filter { flex: 1 1 100%; max-width: 760px; }
.ml-go { flex: none; }
.ml-tabs { margin-bottom: 1.4rem; }
.ml-empty { text-align: center; padding: 3.5rem 1rem; background: #fff; border: 1px dashed var(--border-color); border-radius: var(--radius-lg); }
.ml-empty__icon { display: inline-grid; place-items: center; width: 64px; height: 64px; margin-bottom: 1rem; border-radius: 50%; background: var(--primary-soft); color: var(--primary-color); font-size: 1.5rem; }
.ml-empty h5 { margin-bottom: 1rem; color: var(--text-color); }
@media (max-width: 575.98px) {
    .ml-go small { display: none; }
    .ml-toolbar .sad-search-field { order: 1; }
    .ml-go { order: 2; }
    .ml-toolbar .sad-select { order: 3; }
    .ml-empty { padding: 2.5rem 1rem; }
}

/* =========================================================
   Manage Buildings (professional/properties.html): one calm skin for all ten tabs
   Scoped to .pp-page so other pages that share .card / .edit-btn keep their look.
   ========================================================= */
.pp-tabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; gap: .15rem; margin: 0 0 1.25rem; padding-bottom: .15rem; }
.pp-tabs::-webkit-scrollbar { display: none; }
.pp-tabs .sad-tab { padding: .42rem .72rem; font-size: .85rem; white-space: nowrap; flex: none; }
.pp-tabs .sad-tab i { font-size: .8rem; }
.sad-tab-n--warn { background: #f9eed7; color: #6e4710; }
.sad-tab.active .sad-tab-n--warn { background: rgba(255,255,255,.22); color: #fff; }

/* search / filter strip: no grey box */
.pp-page .filter-section { background: transparent; padding: 0; margin-bottom: 1.1rem; }
.pp-page .filter-section .form-control,
.pp-page .filter-section .form-select,
.pp-page .filter-section .input-group-text { background-color: var(--bg-color, #F7F8F4); }
.pp-page .filter-section .form-control,
.pp-page .filter-section .form-select { border-radius: 10px; }
.pp-page .filter-section .input-group > .form-control { border-radius: 0 10px 10px 0; }
.pp-page .filter-section .input-group > .input-group-text { border-radius: 10px 0 0 10px; color: var(--text-muted); }
.pp-page .filter-section .btn-field { border-radius: 10px; }
.pp-page .filter-section .form-check-label { font-size: .85rem; color: var(--text-muted); }

/* cards: flat, hairline border, no lift on hover */
.pp-page .card { border: 1px solid var(--border-color); border-radius: 16px; box-shadow: none; margin-bottom: 1rem; }
.pp-page .card:hover { transform: none; box-shadow: none; }
.pp-page .card-header { background: #fff; border-bottom: 1px solid var(--border-color); padding: 1rem 1.25rem; border-radius: 16px 16px 0 0; }
.pp-page .card-header h5, .pp-page .card-header .h5 { font-size: 1rem; font-weight: 700; color: var(--text-color); }
.pp-page .card-header .pagination-info { padding: 0; font-size: .85rem; color: var(--text-muted); }
.pp-page .card-body:has(> .table-responsive) { padding: 0; }
.pp-page .card-body > .alert:only-child, .pp-page .table-responsive > .alert { margin: 1.25rem; }
.pp-page .alert-info { background: var(--primary-soft); border-color: transparent; color: var(--primary-dark); border-radius: 12px; }

/* tables */
.pp-page .card .table-responsive { margin-top: 0; border-radius: 0 0 16px 16px; }
.pp-page .table { margin-bottom: 0; --bs-table-bg: #fff; background: #fff; }
.pp-page .table thead th { background: #f4f7f3; font-size: .7rem; text-transform: uppercase; letter-spacing: .06em; font-weight: 600; color: var(--text-muted); border-bottom: 1px solid var(--border-color); padding: .75rem 1rem; white-space: nowrap; }
.pp-page .table thead th .sortable-header { color: inherit; }
.pp-page .table > tbody > tr > td { padding: .8rem 1rem; vertical-align: middle; border-color: #edf1ec; }
.pp-page .table > tbody > tr:last-child > td { border-bottom: 0; }
.pp-page .table-hover > tbody > tr:hover > * { background-color: var(--primary-soft); --bs-table-bg-state: var(--primary-soft); }
.pp-page .lp-bs-pager { padding-bottom: 1rem; margin-top: 1rem !important; }

/* row actions: neutral outlined icon buttons, colour only on hover (delete keeps a red icon) */
.pp-page td .edit-btn, .pp-page td .delete-btn, .pp-page td .view-btn, .pp-page td .toggle-btn,
.pp-page td .btn-sm { width: 32px; height: 32px; padding: 0; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--border-color); border-radius: 10px; background: #fff; color: var(--text-muted); font-size: .82rem; margin-right: .15rem; }
.pp-page td .edit-btn:hover, .pp-page td .view-btn:hover, .pp-page td .toggle-btn:hover, .pp-page td .btn-sm:hover { background: var(--primary-soft); border-color: var(--primary-color); color: var(--primary-dark); }
.pp-page td .delete-btn { color: #c83e4d; }
.pp-page td .delete-btn:hover { background: #fde9ec; border-color: #f0c3c9; color: #a42f3d; }
/* Users (admin): the same neutral outlined icons for view / edit / activate / reset password / message, red for delete */
.pp-page td .user-action-btn { width: 32px; height: 32px; padding: 0; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--border-color); border-radius: 10px; background: #fff; color: var(--text-muted); font-size: .82rem; margin-right: .15rem; text-decoration: none; vertical-align: top; }
.pp-page td .sad-icon-btn { width: 32px; height: 32px; padding: 0; border-radius: 10px; background: #fff; font-size: .82rem; margin-right: .15rem; }
.pp-page td .sad-icon-btn:hover:not(:disabled) { background: var(--primary-soft); border-color: var(--primary-color); color: var(--primary-dark); }
.pp-page td .user-action-btn:hover { background: var(--primary-soft); border-color: var(--primary-color); color: var(--primary-dark); }
.pp-page td .user-action-btn.user-action-delete { color: #c83e4d; }
.pp-page td .user-action-btn.user-action-delete:hover { background: #fde9ec; border-color: #f0c3c9; color: #a42f3d; }

/* search + filter fields of the compact admin search (Locations, Users): same height as the Search button next to them
   (the global .form-control minimum of 42px would make the field, and the dropdowns, taller than the button) */
.pp-page .sad-search .form-control,
.pp-page .sad-search .form-select { min-height: 0; padding-top: .35rem; padding-bottom: .35rem; font-size: .875rem; line-height: 1.4; }

/* status pills */
.pp-page td .badge { font-weight: 600; letter-spacing: .03em; padding: .35em .7em; border-radius: 999px; }
.pp-page td .badge.bg-success { background-color: #e1f3ea !important; color: var(--primary-dark); }
.pp-page td .badge.bg-danger { background-color: #f8e3e6 !important; color: #9d2f3d; }
.pp-page td .badge.bg-warning { background-color: #f9eed7 !important; color: #6e4710 !important; }
.pp-page td .badge.bg-secondary, .pp-page td .badge.bg-info { background-color: var(--primary-soft-strong) !important; color: var(--primary-dark) !important; }

@media (max-width: 575.98px) {
    .pp-page .card-header { padding: .85rem 1rem; }
    .pp-page .table thead th, .pp-page .table > tbody > tr > td { padding-left: .75rem; padding-right: .75rem; }
}

/* danger outline icons in rows keep a red icon; the "set up" tick stays visible on the active pill */
.pp-page td .btn-outline-danger { color: #c83e4d; }
.pp-page td .btn-outline-danger:hover { background: #fde9ec; border-color: #f0c3c9; color: #a42f3d; }
.pp-page .sad-tab.active .text-success { color: #fff !important; }

/* =========================================================
   Building analytics (professional/building_analytics.html): calm sad-* sections,
   Revenue - Expenses = Net Income and the investor-capital sum read as equations.
   ========================================================= */
.ba-sec { padding: 1.15rem 1.25rem 1.25rem; margin-bottom: 1.1rem; }
.ba-sec .card-body { padding: 0; }
.ba-filter .d-flex, .ba-filter { gap: .9rem 1rem; }
.ba-filter .form-select, .ba-filter .form-control { border-radius: 10px; background-color: var(--bg-color, #F7F8F4); }
.ba-filter .form-label { font-size: .72rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--text-muted); }
.ba-head { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: .5rem 1rem; margin: 0 0 .9rem; padding: 0; border: 0; font-family: var(--font-heading); font-weight: 700; font-size: 1rem; color: var(--text-color); }
.ba-head > span > i { margin-right: .55rem; color: var(--primary-color); }
.ba-sub { margin: 0 0 .8rem; font-size: .85rem; color: var(--text-muted); display: flex; flex-wrap: wrap; align-items: center; gap: .35rem .6rem; }
.ba-sub strong { color: var(--text-color); }
.ba-rule { border: 0; border-top: 1px solid var(--border-color); margin: 1.3rem 0 1.1rem; opacity: 1; }

.ba-eq { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto minmax(0, 1fr); gap: .6rem; align-items: stretch; }
.ba-eq--4 { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto minmax(0, 1fr) auto minmax(0, 1fr); }
.ba-op { align-self: center; font-size: 1.3rem; font-weight: 600; color: var(--text-muted); text-align: center; }
.ba-tile { min-width: 0; padding: .85rem 1rem; border-radius: 14px; background: #f4f7f3; }
.ba-tile--hero { background: var(--primary-soft-strong); box-shadow: inset 0 0 0 1px #cfe3d8; }
.ba-tile__label { display: block; margin-bottom: .25rem; font-size: .7rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--text-muted); }
.ba-tile__label i { margin-right: .4rem; color: var(--primary-color); }
.ba-tile__num { display: block; font-family: var(--font-heading); font-size: 1.45rem; font-weight: 800; line-height: 1.2; letter-spacing: -.01em; color: var(--text-color); overflow-wrap: anywhere; }
.ba-tile--hero .ba-tile__num, .ba-pos { color: var(--primary-dark); }
.ba-tile--hero.is-neg { background: #f8e3e6; box-shadow: inset 0 0 0 1px #f0c3c9; }
.ba-tile--hero.is-neg .ba-tile__num { color: #9d2f3d; }
.ba-tile .ri-usd { margin-top: .2rem; }
.ba-tile .ri-pot { margin-top: .45rem; border-top-color: #d9e3dc; }
.ba-total { display: flex; flex-wrap: wrap; align-items: baseline; gap: .3rem .9rem; margin-top: .9rem; padding: .7rem 1rem; border-radius: 12px; border: 1px dashed var(--border-color); font-size: .9rem; }
.ba-total span { color: var(--text-muted); font-weight: 600; }
.ba-total span i { margin-right: .45rem; color: var(--primary-color); }
.ba-total b { font-family: var(--font-heading); font-weight: 800; font-size: 1.05rem; }
.ba-total .ri-usd { margin: 0; }

.ba-occ { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 1.4rem; align-items: center; }
.ba-mini { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .7rem; }
.ba-grid3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .8rem; }
.ba-share { margin-top: .8rem; padding: .85rem 1rem; border-radius: 14px; background: #f4f7f3; }
.ba-share__top { display: flex; justify-content: space-between; align-items: baseline; }
.ba-share__top .ba-tile__label { margin: 0; }
.ba-share__pct { font-family: var(--font-heading); font-weight: 800; font-size: 1.3rem; color: var(--primary-dark); }
.ba-share progress.ri-bar { width: 100%; margin: .5rem 0 .3rem; }

/* charts + investors table */
.ba-sec.chart-card canvas { max-height: 280px; }
.ba-sec .inv-tbl { margin-bottom: 0; }
.ba-sec .inv-tbl th { font-size: .68rem; text-transform: uppercase; letter-spacing: .05em; color: var(--text-muted); font-weight: 700; background: #f4f7f3; border-bottom: 1px solid var(--border-color); padding: .6rem .5rem; }
.ba-sec .inv-tbl td { padding: .65rem .5rem; border-color: #edf1ec; }
.ba-sec .inv-tbl tfoot td { background: #f4f7f3; border-top: 1px solid var(--border-color); }
.ba-sec .inv-tbl .btn-sm { width: 32px; height: 32px; padding: 0; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--border-color); border-radius: 10px; background: #fff; color: var(--text-muted); }
.ba-sec .inv-tbl .btn-sm:hover { background: var(--primary-soft); border-color: var(--primary-color); color: var(--primary-dark); }
.ba-sec .table-responsive { margin-top: 0; }

@media (max-width: 767.98px) {
    .ba-eq, .ba-eq--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .ba-op { display: none; }
    .ba-eq:not(.ba-eq--4) > .ba-tile--hero { grid-column: 1 / -1; }
    .ba-occ { grid-template-columns: 1fr; }
    .ba-grid3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .ba-grid3 > .ba-tile--hero { grid-column: 1 / -1; }
    .ba-tile__num { font-size: 1.25rem; }
    .ba-sec { padding: 1rem; }
}
.ba-filter .form-select { min-width: 110px; }

/* =========================================================
   Investor detail (professional/investor_detail.html): same calm sections as building analytics (.ba-*)
   ========================================================= */
.ba-sec .inv-tbl .dropdown-toggle::after { display: none; }
.ba-sec .inv-tbl tfoot tr.table-light > td { background: #f4f7f3; border-top: 1px solid var(--border-color); }
.ba-assoc { padding: .9rem; margin: 0; border-radius: 14px; background: #f4f7f3; --bs-gutter-x: .75rem; }
.ba-assoc .form-label { font-size: .68rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--text-muted); }
.ba-assoc .form-control, .ba-assoc .form-select { border-radius: 10px; background-color: #fff; }
.ba-assoc .btn-primary { border-radius: 10px; }
/* history tables (withdrawals, reports) have no numeric columns to right-align */
.ba-sec .iv-plain th:nth-child(n+2), .ba-sec .iv-plain td:nth-child(n+2) { text-align: left; }
.ba-sec .iv-plain td:nth-child(n+2) { white-space: normal; }
.ba-sec .iv-plain .btn-outline-danger { color: #c83e4d; }
.ba-sec .iv-plain .btn-outline-danger:hover { background: #fde9ec; border-color: #f0c3c9; color: #a42f3d; }
.ba-sec .badge.bg-success, .ba-sec .badge.bg-danger { font-weight: 600; letter-spacing: .03em; padding: .35em .7em; border-radius: 999px; }
.ba-sec .badge.bg-success { background-color: #e1f3ea !important; color: var(--primary-dark); }
.ba-sec .badge.bg-danger { background-color: #f8e3e6 !important; color: #9d2f3d; }
/* wide Properties table: a little tighter so every column (incl. Perf.) fits beside the pinned actions button */
#invTblLocal .inv-tbl th, #invTblUsd .inv-tbl th { padding-left: .35rem; padding-right: .35rem; }
#invTblLocal .inv-tbl td, #invTblUsd .inv-tbl td { padding-left: .35rem; padding-right: .35rem; font-size: .84rem; }
#invTblLocal .inv-tbl td:first-child, #invTblUsd .inv-tbl td:first-child { white-space: nowrap; }
#invTblLocal .table-responsive, #invTblUsd .table-responsive { margin-left: -.75rem; margin-right: -.75rem; }

/* ── Team page (/professional/team): same calm skin as the Manage Buildings "Team" tab ──
   Built on .pp-page (cards, filter bar, table, neutral row buttons, soft badges). */
.tm-page .tm-plan .fs-5 { font-size: 1.05rem !important; }
.tm-page .tm-plan .border-end { border-color: var(--border-color) !important; }
.tm-page .progress { background: var(--primary-soft-strong); border-radius: 999px; }
.tm-page td a.btn-success { width: auto; padding: 0 .7rem; gap: .3rem; background: var(--primary-soft); border-color: transparent; color: var(--primary-dark); font-weight: 600; }
.tm-page td a.btn-success:hover { background: var(--primary-soft-strong); color: var(--primary-dark); }
.tm-page td form { display: inline-block; margin: 0; }
.tm-page td .user-name-link { color: var(--text-color); text-decoration: none; }
.tm-page td .user-name-link:hover { color: var(--primary-color); }
.tm-page td .badge.bg-success-subtle { background-color: var(--primary-soft) !important; border-radius: 999px; font-weight: 600; }
.tm-page .tm-empty { padding: 2.5rem 1rem; }
@media (max-width: 767.98px) {
    .tm-page .tm-plan .border-end { border-right: 0 !important; }
    .tm-page .tm-plan .row { --bs-gutter-y: 1rem; }
}

/* Compact search group: the field and its icon are as tall as the .btn-sm buttons beside them */
.input-group-compact > .form-control,
.input-group-compact > .input-group-text {
    min-height: 0;
    padding-top: .35rem;
    padding-bottom: .35rem;
    font-size: .875rem;
    line-height: 1.4;
}

/* ── Category chips, phone view only: show that the row scrolls (fade on the hidden side + thin progress line) ── */
.lp-chips-wrap { min-width: 0; max-width: 100%; }
.lp-chips-prog { display: none; }
@media (max-width: 575.98px) {
    .lp-chips-wrap { position: relative; }
    .lp-chips-wrap::before, .lp-chips-wrap::after {
        content: ""; position: absolute; top: 0; bottom: 2px; width: 44px; pointer-events: none; opacity: 0; transition: opacity .15s; z-index: 1;
    }
    .lp-chips-wrap::before { left: -12px; background: linear-gradient(to right, var(--body-bg) 20%, rgba(247, 248, 244, 0)); }
    .lp-chips-wrap::after { right: -12px; background: linear-gradient(to left, var(--body-bg) 20%, rgba(247, 248, 244, 0)); }
    .lp-chips-wrap.more-right::after, .lp-chips-wrap.more-left::before { opacity: 1; }
    .lp-chips-wrap.is-scrollable .lp-chips-prog {
        display: block; position: relative; height: 3px; margin: 5px 0 0; background: var(--primary-soft-strong, #E8F0EB); border-radius: 3px; overflow: hidden;
    }
    .lp-chips-prog b { position: absolute; top: 0; bottom: 0; left: 0; width: 40%; background: var(--primary-color); border-radius: 3px; }
}
@media (prefers-reduced-motion: reduce) {
    .lp-chips-wrap::before, .lp-chips-wrap::after { transition: none; }
}


/* =========================================================
   MOBILE MENU (phones and tablets, below lg)
   Animated hamburger -> X, dimmed page behind the panel, grouped links with
   icons, current page marked, labelled language switch, account block.
   Desktop navbar is untouched: everything here is inside the media query,
   or hidden from lg up with .d-lg-none.
   ========================================================= */

@media (max-width: 991.98px) {

    /* The sticky bar is the positioning context for the panel and the backdrop */
    .mittimmo-navbar .container { position: static; }

    /* --- Hamburger that turns into an X --- */
    .mittimmo-navbar .navbar-toggler {
        width: 44px; height: 44px; padding: 0; position: relative;
        border: 1px solid var(--border-light, #e1e6df); border-radius: 12px; background: #fff;
        transition: background-color .2s ease, border-color .2s ease;
    }
    .mittimmo-navbar .navbar-toggler:focus-visible {
        outline: 2px solid #087F5B; outline-offset: 2px; box-shadow: none;
    }
    .nav-burger { position: absolute; inset: 0; display: block; }
    .nav-burger i {
        position: absolute; left: 12px; right: 12px; height: 2px; border-radius: 2px; background: #17211E;
        transition: transform .25s ease, opacity .15s ease, top .25s ease, background-color .2s ease;
    }
    .nav-burger i:nth-child(1) { top: 15px; }
    .nav-burger i:nth-child(2) { top: 21px; }
    .nav-burger i:nth-child(3) { top: 27px; }
    .mittimmo-navbar .navbar-toggler[aria-expanded="true"] { background: #E8F0EB; border-color: #E8F0EB; }
    .navbar-toggler[aria-expanded="true"] .nav-burger i { background: #07543F; }
    .navbar-toggler[aria-expanded="true"] .nav-burger i:nth-child(1) { top: 21px; transform: rotate(45deg); }
    .navbar-toggler[aria-expanded="true"] .nav-burger i:nth-child(2) { opacity: 0; }
    .navbar-toggler[aria-expanded="true"] .nav-burger i:nth-child(3) { top: 21px; transform: rotate(-45deg); }

    /* --- Dimmed page behind the open menu --- */
    .nav-scrim {
        position: absolute; top: 100%; left: 0; right: 0; height: 100vh;
        background: rgba(23, 33, 30, .38); opacity: 0; pointer-events: none;
        transition: opacity .25s ease; z-index: -1;
    }
    body.nav-open .nav-scrim { opacity: 1; pointer-events: auto; }

    /* The page behind the open menu does not scroll (only the menu itself can), so no second scrollbar and
       the bar stays put. The gutter is kept so the page does not jump sideways when its scrollbar goes. */
    /* Only <html> gets overflow:hidden. Putting it on <body> as well turns <body> into its own scroll container,
       and the sticky bar then stays at its place in the page instead of the top of the screen: after scrolling
       down, the open menu ended up above the visible area. */
    html.nav-open { overflow: hidden; overscroll-behavior: none; scrollbar-gutter: stable; }
    body.nav-open { overscroll-behavior: none; }

    /* --- The panel --- */
    .mittimmo-navbar .navbar-collapse {
        position: absolute; top: 100%; left: 0; right: 0; margin: 0; padding: .5rem 1rem 1rem;
        background: #fff; border-top: 1px solid rgba(0, 0, 0, .06);
        border-radius: 0 0 22px 22px; box-shadow: 0 18px 30px rgba(0, 0, 0, .14);
        max-height: calc(100vh - 76px); max-height: calc(100dvh - 76px);
        overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
    }
    /* Slide down / slide up: the panel is revealed from the top edge (clip-path), no fading, so it never
       flashes. Bootstrap only needs a duration to wait for, which .collapsing declares; the panel keeps its
       full height meanwhile (Bootstrap's inline height is ignored) so nothing jumps at the end. */
    .mittimmo-navbar .navbar-collapse.collapsing {
        height: auto !important; overflow: hidden; transition: visibility .28s linear;
    }
    .mittimmo-navbar .navbar-collapse.collapsing.nav-opening { animation: nav-slide-down .28s cubic-bezier(.2, .8, .2, 1) both; }
    .mittimmo-navbar .navbar-collapse.collapsing.nav-closing { animation: nav-slide-up .24s cubic-bezier(.4, 0, 1, 1) both; }
    @keyframes nav-slide-down {
        from { clip-path: inset(0 -40px 100% -40px); }
        to   { clip-path: inset(0 -40px -40px -40px); }
    }
    @keyframes nav-slide-up {
        from { clip-path: inset(0 -40px -40px -40px); }
        to   { clip-path: inset(0 -40px 100% -40px); }
    }

    /* --- Section titles --- */
    .mittimmo-navbar .nav-section {
        list-style: none; margin: .75rem .5rem .25rem; font-size: .68rem; font-weight: 600;
        letter-spacing: .1em; text-transform: uppercase; color: #5b6b64;
    }
    .mittimmo-navbar .nav-section:first-child { margin-top: .25rem; }

    /* --- Links: icon tile, label, chevron --- */
    .mittimmo-navbar .mittimmo-nav-categories .nav-link {
        display: flex; align-items: center; gap: .75rem; padding: .55rem .5rem;
        border-radius: 14px; font-size: .97rem; font-weight: 600; color: #17211E; min-height: 48px;
    }
    .mittimmo-navbar .mittimmo-nav-categories .nav-ic {
        flex: none; width: 38px; height: 38px; border-radius: 11px; background: #E8F0EB; color: #087F5B;
        display: inline-flex; align-items: center; justify-content: center; font-size: .95rem;
    }
    .mittimmo-navbar .mittimmo-nav-categories .nav-go { margin-left: auto; font-size: .7rem; color: #a7b3ac; }
    .mittimmo-navbar .mittimmo-nav-categories .nav-link:hover,
    .mittimmo-navbar .mittimmo-nav-categories .nav-link:active { background: #F7F8F4; color: #17211E; }
    .mittimmo-navbar .mittimmo-nav-categories .nav-link.is-current { background: #E8F0EB; color: #07543F; }
    .mittimmo-navbar .mittimmo-nav-categories .is-current .nav-ic { background: #087F5B; color: #fff; }
    .mittimmo-navbar .mittimmo-nav-categories .is-current .nav-go { color: #087F5B; }
    /* "Discover" links are secondary: lighter and without the filled tile */
    .mittimmo-navbar .nav-section ~ .nav-section ~ .nav-item .nav-link { font-weight: 500; font-size: .92rem; min-height: 42px; }
    .mittimmo-navbar .nav-section ~ .nav-section ~ .nav-item .nav-ic { background: transparent; color: #5b6b64; }
    .mittimmo-navbar .nav-section ~ .nav-section ~ .nav-item .nav-link.is-current .nav-ic { background: #087F5B; color: #fff; }
    .mittimmo-navbar .nav-section ~ .nav-section ~ .nav-item .nav-go { display: none !important; }

    /* --- Language switch, labelled --- */
    .mittimmo-navbar .mittimmo-nav-icons { margin-top: .5rem; border-top: 1px solid #e1e6df; padding-top: .75rem; }
    .mittimmo-navbar .language-switcher { border-top: 0; margin: 0 0 .75rem; padding: 0; }
    .nav-lang { display: flex; background: #E8F0EB; border-radius: 12px; padding: 3px; }
    .nav-lang a {
        flex: 1; text-align: center; padding: .5rem 0; border-radius: 9px; font-size: .85rem; font-weight: 600;
        color: #5b6b64; text-decoration: none;
    }
    .nav-lang a.on { background: #fff; color: #07543F; box-shadow: 0 1px 3px rgba(0, 0, 0, .1); }

    /* --- Logged out: two real buttons --- */
    .mittimmo-navbar .nav-auth { display: flex; flex-direction: column; gap: .5rem; list-style: none; }
    .mittimmo-navbar .nav-auth .btn { padding: .8rem; border-radius: 12px; font-weight: 700; font-size: .95rem; }

    /* --- Logged in: the account block is always open, no nested dropdown --- */
    .mittimmo-navbar .account-toggle {
        display: flex !important; align-items: center; gap: .75rem; padding: .25rem .5rem !important;
        font-weight: 700; pointer-events: none; color: #17211E;
    }
    .mittimmo-navbar .account-toggle::after { display: none; }
    .nav-avatar {
        width: 40px; height: 40px; border-radius: 50%; background: #087F5B; color: #fff;
        display: inline-flex; align-items: center; justify-content: center; font-weight: 700; flex: none;
    }
    .mittimmo-navbar .nav-item.dropdown > .dropdown-menu {
        display: block !important; background: transparent; padding: 0; margin: .25rem 0 0;
    }
    .mittimmo-navbar .nav-item.dropdown .dropdown-item {
        gap: .75rem; padding: .5rem; border-radius: 14px; font-weight: 600; min-height: 48px; color: #17211E;
    }
    .mittimmo-navbar .nav-item.dropdown .dropdown-item > i {
        flex: none; width: 38px; height: 38px; border-radius: 11px; background: #E8F0EB; color: #087F5B;
        display: inline-flex; align-items: center; justify-content: center; margin: 0 !important;
    }
    .mittimmo-navbar .nav-item.dropdown .dropdown-item .badge { margin-left: auto; }
    .mittimmo-navbar .nav-item.dropdown .dropdown-item:hover { background: #F7F8F4; }
    .mittimmo-navbar .nav-item.dropdown .dropdown-divider { margin: .5rem 0; }
    .mittimmo-navbar .nav-item.dropdown .logout-button { color: #C83E4D; justify-content: flex-start; }
    .mittimmo-navbar .nav-item.dropdown .logout-button > i { background: #fbeaec; color: #C83E4D; }
}

@media (prefers-reduced-motion: reduce) {
    .nav-burger i, .nav-scrim, .mittimmo-navbar .navbar-toggler { transition: none; }
    .mittimmo-navbar .navbar-collapse.collapsing { animation: none !important; transition-duration: 0s; }
}


/* =========================================================
   GOOGLE ANALYTICS 4 -- Super Admin page and consent banner
   ========================================================= */

.ga4-source { display: flex; gap: .75rem; align-items: flex-start; background: var(--primary-soft, #E8F0EB); border-color: transparent; font-size: .85rem; }
.ga4-source > i { color: var(--primary-color, #087F5B); margin-top: .2rem; }
.ga4-custom { display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; }
.ga4-custom .form-control { width: auto; }
.ga4-delta.is-up { color: #07543F; }
.ga4-delta.is-down { color: #C83E4D; }
.ga4-empty { display: flex; gap: .9rem; align-items: flex-start; }
.ga4-empty > i { font-size: 1.4rem; color: var(--primary-color, #087F5B); margin-top: .15rem; }
.ga4-empty p { color: var(--text-muted); font-size: .88rem; }
.ga4-setup ol, .ga4-setup ul { padding-left: 1.2rem; }
.ga4-setup li { margin-bottom: .35rem; }
.ga4-table th { font-size: .74rem; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--text-muted); border-bottom-width: 1px; }
.ga4-table td { font-size: .88rem; vertical-align: middle; }
.ga4-cell-main { max-width: 18rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ga4-legend { list-style: none; margin: .75rem 0 0; padding: 0; font-size: .82rem; }
.ga4-legend li { display: flex; align-items: center; gap: .5rem; padding: .15rem 0; }
.ga4-legend-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ga4-dot { width: .7rem; height: .7rem; border-radius: 50%; flex: none; }

/* Consent banner: bottom of the screen, above the page, never over the mobile menu panel */
.ga4-consent {
    position: fixed; left: 1rem; right: 1rem; bottom: 1rem; z-index: 1040; max-width: 560px; margin: 0 auto;
    display: flex; gap: 1rem; align-items: center; justify-content: space-between; flex-wrap: wrap;
    background: #fff; color: #17211E; border: 1px solid #e1e6df; border-radius: 16px; padding: .9rem 1rem;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .16); font-size: .85rem;
}
.ga4-consent[hidden] { display: none; }
.ga4-consent-text { flex: 1 1 260px; min-width: 0; }
.ga4-consent-text a { color: #087F5B; font-weight: 600; }
.ga4-consent-actions { display: flex; gap: .5rem; margin-left: auto; }
@media (max-width: 575.98px) {
    .ga4-consent-actions { width: 100%; }
    .ga4-consent-actions .btn { flex: 1; padding: .55rem 0; }
}
@media (max-width: 575.98px) {
    .ga4-table th, .ga4-table td { padding-left: .3rem; padding-right: .3rem; }
    .ga4-table th { letter-spacing: 0; font-size: .68rem; }
    .ga4-cell-main { max-width: 11rem; }
}


/* ==========================================================================
   MANUAL SUBSCRIPTION PAYMENTS (Orange Money / Revolut) — Super Admin and person pages
   Uses the Vert Horizon tokens only; no gradients, no animation.
   ========================================================================== */
.mp-page .mp-tabs { display: flex; gap: .25rem; flex-wrap: wrap; margin: 0 0 1rem; border-bottom: 1px solid var(--border-color); }
.mp-tabs a { padding: .6rem 1rem; font-weight: 600; font-size: .9rem; color: var(--text-muted); text-decoration: none; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.mp-tabs a.active { color: var(--primary-dark); border-bottom-color: var(--primary-color); }
.mp-h { font-size: 1.05rem; font-weight: 700; margin: 0 0 .5rem; display: flex; align-items: center; }
.mp-h2 { font-size: 1.1rem; font-weight: 700; margin: 0 0 1rem; }
.mp-sub { font-size: .9rem; font-weight: 700; margin: 1.1rem 0 .5rem; }
.mp-muted { color: var(--text-muted); font-size: .86rem; }
.mp-ok { color: var(--primary-dark); font-size: .86rem; font-weight: 600; }
.mp-warn { color: #8a5a00; font-size: .86rem; font-weight: 600; }
.mp-info { display: flex; gap: .75rem; align-items: flex-start; }
.mp-info i { color: var(--primary-color); margin-top: .2rem; }
.mp-method-head { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; margin-bottom: .5rem; }
.mp-back { display: inline-block; margin-bottom: 1rem; color: var(--primary-dark); font-weight: 600; font-size: .88rem; text-decoration: none; }

.mp-modes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .75rem; }
.mp-mode { display: flex; gap: .75rem; align-items: flex-start; padding: .9rem; border: 1px solid var(--border-color); border-radius: var(--radius-md, 12px); cursor: pointer; background: var(--surface-color); }
.mp-mode input { position: absolute; opacity: 0; pointer-events: none; }
.mp-mode b { display: block; font-size: .95rem; }
.mp-mode small { display: block; color: var(--text-muted); font-size: .8rem; margin-top: .25rem; line-height: 1.4; }
.mp-mode.is-on { border-color: var(--primary-color); background: var(--primary-soft, #E8F0EB); box-shadow: 0 0 0 1px var(--primary-color); }
.mp-mode:focus-within { outline: 2px solid var(--primary-color); outline-offset: 2px; }
.mp-mode-ico { width: 36px; height: 36px; flex: none; display: grid; place-items: center; border-radius: 10px; background: var(--primary-soft-strong, #E8F0EB); color: var(--primary-dark); }

.mp-switch { display: inline-flex; align-items: center; gap: .5rem; font-weight: 600; font-size: .88rem; cursor: pointer; }
.mp-switch input { position: absolute; opacity: 0; }
.mp-switch span { width: 38px; height: 22px; border-radius: 999px; background: #c9d3ce; position: relative; transition: background .15s; }
.mp-switch span::after { content: ""; position: absolute; left: 3px; top: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: transform .15s; }
.mp-switch input:checked + span { background: var(--primary-color); }
.mp-switch input:checked + span::after { transform: translateX(16px); }
.mp-switch input:focus-visible + span { outline: 2px solid var(--primary-color); outline-offset: 2px; }

.mp-countries { display: grid; gap: .5rem; }
.mp-country-row { display: grid; grid-template-columns: 70px 90px 1fr 1fr 40px; gap: .5rem; }
.mp-check { display: inline-flex; gap: .5rem; align-items: center; font-size: .86rem; }
.mp-qr-current { display: flex; align-items: center; gap: .75rem; margin-top: .5rem; }
.mp-qr-current img { border: 1px solid var(--border-color); border-radius: 8px; background: #fff; }
.mp-savebar { position: sticky; bottom: 0; padding: .75rem 0; background: var(--bg-color, #F7F8F4); }

.mp-inline-form { display: flex; gap: .75rem; align-items: flex-end; flex-wrap: wrap; }
.mp-table th { font-size: .75rem; text-transform: uppercase; letter-spacing: .04em; color: var(--text-muted); white-space: nowrap; }
.mp-table td { font-size: .88rem; }
.mp-pill { display: inline-flex; align-items: center; gap: .35rem; padding: .2rem .6rem; border-radius: 999px; font-size: .78rem; font-weight: 700; background: #eef1ef; color: var(--text-color); }
.mp-pill--ok, .mp-pill--approved { background: var(--primary-soft-strong, #E8F0EB); color: var(--primary-dark); }
.mp-pill--warn, .mp-pill--pending { background: #fbf1dc; color: #7a5200; }
.mp-pill--rejected { background: #fbe7ea; color: #9b2c3a; }
.mp-diff { color: #9b2c3a; font-weight: 700; }
.mp-filters { display: flex; gap: .5rem; flex-wrap: wrap; margin-bottom: 1rem; }
.mp-filters a { padding: .35rem .85rem; border-radius: 999px; border: 1px solid var(--border-color); font-size: .85rem; font-weight: 600; color: var(--text-color); text-decoration: none; background: var(--surface-color); }
.mp-filters a span { color: var(--text-muted); margin-left: .25rem; }
.mp-filters a.active { background: var(--primary-color); border-color: var(--primary-color); color: #fff; }
.mp-filters a.active span { color: rgba(255, 255, 255, .8); }
.mp-pager { display: flex; justify-content: center; align-items: center; gap: 1rem; margin-top: 1rem; }
.mp-pager a { font-size: 1.4rem; text-decoration: none; color: var(--primary-dark); }

.mp-alert { display: flex; gap: .75rem; padding: .85rem 1rem; border-radius: 12px; background: #fbf1dc; color: #5f4200; margin: 1rem 0; font-size: .9rem; }
.mp-alert i { margin-top: .2rem; }
.mp-dl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem 1.5rem; margin: 1rem 0 0; }
.mp-dl > div { min-width: 0; }
.mp-dl dt { font-size: .74rem; text-transform: uppercase; letter-spacing: .04em; color: var(--text-muted); font-weight: 600; }
.mp-dl dd { margin: 0; font-size: .95rem; overflow-wrap: anywhere; }
.mp-dl--tight { gap: .4rem 1.5rem; }
.mp-receipt { max-width: min(100%, 420px); border: 1px solid var(--border-color); border-radius: 12px; display: block; }

/* person-facing pages */
.mp-user .mp-title { font-family: var(--font-heading); font-size: clamp(1.6rem, 4vw, 2.1rem); font-weight: 800; letter-spacing: -.03em; color: var(--text-color); margin-bottom: .25rem; }
.mp-lead { color: var(--text-muted); margin-bottom: 1.5rem; }
.mp-card { background: var(--surface-color); border: 1px solid var(--border-color); border-radius: var(--radius-lg); padding: 1.25rem; margin-bottom: 1rem; }
.mp-picker { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 1rem; }
.mp-quote { display: grid; grid-template-columns: minmax(200px, 1fr) 1.4fr; gap: 1.25rem; align-items: center; }
.mp-quote-main small, .mp-expected small, .mp-recipient small { display: block; font-size: .75rem; text-transform: uppercase; letter-spacing: .04em; color: var(--text-muted); font-weight: 600; }
.mp-quote-main strong { display: block; font-family: var(--font-heading); font-size: 2rem; line-height: 1.15; color: var(--primary-dark); }
.mp-quote-main span { color: var(--text-muted); font-size: .88rem; }
.mp-pay-grid { display: grid; grid-template-columns: 1fr auto; gap: 1.5rem; align-items: start; }
.mp-steps { padding-left: 1.2rem; margin-bottom: 1rem; }
.mp-steps li { margin-bottom: .4rem; }
.mp-recipient { background: var(--sage-light, #E8F0EB); border-radius: 12px; padding: .75rem 1rem; margin-bottom: .75rem; }
.mp-recipient strong { display: block; font-size: 1.15rem; color: var(--primary-dark); overflow-wrap: anywhere; }
.mp-pre { white-space: pre-line; }
.mp-note { color: var(--text-muted); font-size: .86rem; margin: .75rem 0; }
.mp-qr { text-align: center; }
.mp-qr img { border: 1px solid var(--border-color); border-radius: 12px; background: #fff; padding: 6px; max-width: 100%; height: auto; }
.mp-qr small { display: block; color: var(--text-muted); margin-top: .25rem; }
.mp-cta { width: 100%; padding: .75rem 1rem; font-weight: 700; border-radius: 12px; }
.mp-footer-link { text-align: center; margin-top: 1rem; }
.mp-footer-link a { color: var(--primary-dark); font-weight: 600; }
.mp-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; margin-bottom: 1rem; }
.mp-expected { background: var(--sage-light, #E8F0EB); border-radius: 12px; padding: .85rem 1rem; margin-bottom: 1rem; }
.mp-expected strong { display: block; font-size: 1.4rem; color: var(--primary-dark); }
.mp-expected span { font-size: .82rem; color: var(--text-muted); }
.mp-req--rejected { border-left: 4px solid #c83e4d; }
.mp-req--approved { border-left: 4px solid var(--primary-color); }
.mp-req--pending { border-left: 4px solid var(--sand, #D9B77A); }

/* pricing page: "Other ways to subscribe" */
.mp-section { margin-top: 3rem; max-width: 900px; }
.mp-section-title { font-size: 1.5rem; font-weight: 800; letter-spacing: -.03em; text-align: center; margin-bottom: .5rem; }
.mp-section-intro, .mp-section-note { text-align: center; color: var(--text-muted); max-width: 640px; margin: 0 auto 1.25rem; }
.mp-section-note { font-size: .85rem; margin: 1rem auto 0; }
.mp-section-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1rem; }
.mp-method-card { display: flex; gap: 1rem; align-items: flex-start; background: var(--surface-color); border: 1px solid var(--border-color); border-radius: var(--radius-lg); padding: 1.15rem; }
.mp-method-card h3 { font-size: 1.05rem; font-weight: 700; margin: 0 0 .25rem; }
.mp-method-card p { color: var(--text-muted); font-size: .88rem; margin-bottom: .75rem; }
.mp-method-ico { width: 42px; height: 42px; flex: none; display: grid; place-items: center; border-radius: 12px; background: var(--primary-soft-strong, #E8F0EB); color: var(--primary-dark); font-size: 1.1rem; }
.mp-unavailable { display: block; text-align: center; padding: .75rem; border-radius: 12px; background: #eef1ef; color: var(--text-muted); font-size: .88rem; font-weight: 600; }

@media (max-width: 767.98px) {
    .mp-modes { grid-template-columns: 1fr; }
    .mp-country-row { grid-template-columns: 60px 1fr 40px; }
    .mp-country-row input:nth-of-type(n+3) { grid-column: 1 / -1; }
    .mp-country-row .mp-del { grid-column: 3; grid-row: 1; }
    .mp-quote, .mp-pay-grid, .mp-form-grid, .mp-dl { grid-template-columns: 1fr; }
}
.mp-method-card > div:last-child { flex: 1; min-width: 0; }
.mp-method-card .btn, .mp-page .btn, .mp-user .btn { width: auto; min-width: max-content; white-space: nowrap; }
.mp-user .btn.mp-cta { width: 100%; white-space: normal; }
.mp-method-card .btn { padding: .55rem 1.1rem; font-weight: 600; border-radius: 10px; line-height: 1.2; }
.mp-page .btn, .mp-user .btn:not(.mp-cta) { padding: .5rem 1rem; border-radius: 10px; }
.mp-page .mp-del { padding: .5rem .7rem; }
/* Person-facing manual payment pages: same title and subtitle size as the Super Admin pages */
.mp-user .mp-title { font-family: var(--font-heading); font-weight: 700; font-size: 1.25rem; letter-spacing: -.01em; margin: 0 0 .25rem; }
.mp-user .mp-lead { font-size: .875em; margin-bottom: 1.5rem; }