/* Basic CSS Reset for consistent spacing */
* {
    box-sizing: border-box;
}

body,
html {
    margin: 0;
    padding: 0;
}

/* Apply custom font family globally */
body {
    font-family: var(--immo-font-family);
    color: var(--immo-text-primary);
}

/* Heading styles */
h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--immo-font-family);
    font-weight: var(--immo-font-weight-bold);
    color: var(--immo-heading);
}

/* Glassmorphism Control Utility */
.glass-control {
    background: linear-gradient(135deg, rgba(var(--immo-white-rgb), 0.6), rgba(var(--immo-white-rgb), 0.1)) !important;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(var(--immo-white-rgb), 0.3) !important;
    box-shadow: 0 4px 16px 0 rgba(var(--immo-black-rgb), 0.05) !important;
}

/* Glassmorphism Badges */
.badge {
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    box-shadow: var(--immo-shadow-sm);
    border: 1px solid transparent;
    font-weight: 500;
    padding: 0.5em 0.8em;
}

.badge.bg-success {
    background: var(--immo-glass-green) !important;
    border-color: var(--immo-glass-green-border);
    color: rgb(var(--immo-green-rgb)) !important;
}

/* Ensure text contrast for "success" if needed, but solid green on light glass usually works. 
   If not, use a darker mix or a specific text var. */

.badge.bg-warning {
    background: var(--immo-glass-yellow) !important;
    border-color: var(--immo-glass-yellow-border);
    color: rgb(var(--immo-yellow-rgb)) !important;
    color: var(--immo-color-amber-dark) !important;
    /* dark contrast text on yellow glass background */
}

.badge.bg-info {
    background: var(--immo-glass-turquoise) !important;
    border-color: var(--immo-glass-turquoise-border);
    color: rgb(var(--immo-turquoise-rgb)) !important;
}

.badge.bg-danger {
    background: var(--immo-glass-red) !important;
    border-color: var(--immo-glass-red-border);
    color: rgb(var(--immo-red-rgb)) !important;
}

.badge.bg-secondary {
    background: var(--immo-glass-grey) !important;
    border-color: var(--immo-glass-grey-border);
    color: rgb(var(--immo-grey-rgb)) !important;
}

.badge.bg-primary {
    background: rgba(var(--brand-primary-rgb), 0.15) !important;
    border-color: rgba(var(--brand-primary-rgb), 0.3);
    color: var(--brand-primary) !important;
}

.badge.bg-light {
    background: rgba(var(--immo-white-rgb), 0.6) !important;
    border-color: var(--immo-border-light);
    color: var(--immo-text-secondary) !important;
}

/* Glassmorphism Buttons (immo-btn) */

/* 
   Button Styles are now centralized in components/button/button.css
   immo-btn class is defined there with full glassmorphism support.
*/


/* Mobile-optimized heading sizes */
@media (max-width: 768px) {
    h1 {
        font-size: 1.75rem;
    }

    h2 {
        font-size: 1.5rem;
    }

    h3 {
        font-size: 1.25rem;
    }
}

/* === HEADING SCALE (UI alignment round 6) ====================
   Page title:    <h1 class="h2">          (one per page)
   Section title: .section-title           (any h-level fits the outline;
                                            the class owns the look)
   Card title:    .card-title              (components/card/card.css)
   Modal title:   .modal-title             (components/modal/modal.css)
   Was previously copy-pasted into five detail templates. */
.section-title {
    font-size: 0.875rem;
    font-weight: var(--immo-font-weight-semibold);
    color: var(--immo-heading);
    margin-bottom: var(--immo-space-sm);
    padding-bottom: var(--immo-space-sm);
    border-bottom: 2px solid var(--immo-border-light);
    display: flex;
    align-items: center;
    gap: var(--immo-space-sm);
}

/* Detail key/value rows (detail pages) -- was copy-pasted into the five
   detail templates; phones stack label over value (see mobile.css) */
.detail-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--immo-space-xs) 0;
    font-size: 0.9rem;
}

.detail-label {
    color: var(--immo-text-secondary);
    font-weight: var(--immo-font-weight-normal);
}

.detail-value {
    color: var(--immo-text-primary);
    font-weight: var(--immo-font-weight-medium);
    text-align: right;
}

.detail-value.financial {
    font-family: 'Courier New', monospace;
    color: var(--immo-success);
}

.detail-value.financial.strong {
    font-weight: var(--immo-font-weight-bold);
    font-size: 1rem;
}

/* Main content area styling */
.immo-main {
    margin-left: 0;
    /* Default for mobile */
    min-height: 100vh;
    transition: margin-left 0.3s ease;
    background:
        radial-gradient(ellipse at 0% 0%, rgba(var(--brand-primary-rgb), 0.08) 0%, transparent 50%),
        radial-gradient(ellipse at 100% 100%, rgba(var(--brand-primary-rgb), 0.04) 0%, transparent 50%),
        var(--immo-canvas-light);
    /* Mesh gradient — coral brand tint for depth */
}

/* Desktop: Account for collapsed sidebar */
@media (min-width: 769px) {
    .immo-main {
        margin-left: 70px;
        /* Match collapsed navigation width */
        transition: margin-left 0.3s ease;
        /* Ensure smooth transition */
    }

    /* Content Push when Pinned */
    body.sidebar-pinned .immo-main {
        margin-left: 210px !important;
        /* Match expanded width */
    }
}

.immo-container {
    width: 100%;
    max-width: 1760px;
    /* Raised from 1400px: on wide monitors the old cap left ~40% empty.
       Bounded so tables/text stay readable instead of going edge-to-edge. */
    margin: 0;
    /* Left align to the sidebar */
    padding-left: var(--immo-space-2xl);
    padding-right: var(--immo-space-2xl);
    /* Symmetric spacing (was left-only, so content touched the right edge) */
}

/* Mobile: Add top padding for mobile menu button */
@media (max-width: 768px) {
    .immo-container {
        padding-top: 60px;
        /* Account for mobile menu button */
    }
}

/* Mobile-optimized container-fluid padding */
@media (max-width: 768px) {
    .container-fluid {
        padding-left: var(--immo-space-md) !important;
        padding-right: var(--immo-space-md) !important;
    }
}

/* Mobile-friendly flex layouts */
@media (max-width: 768px) {
    .d-flex.justify-content-between {
        flex-direction: column;
        align-items: flex-start !important;
        gap: var(--immo-space-md);
    }

    .d-flex.justify-content-between>* {
        width: 100%;
    }
}

/* Print styles for reports */
@media print {
    .screen-only {
        display: none !important;
    }

    .print-only {
        display: block !important;
    }

    /* Ensure proper page breaks */
    .immo-card {
        page-break-inside: avoid;
        margin-bottom: var(--immo-space-lg) !important;
    }
}

@media screen {
    .print-only {
        display: none !important;
    }
}

/* Payment comparison card styling */
.payment-comparison-card {
    background-color: var(--immo-primary);
    color: var(--immo-text-white);
}

.payment-comparison-card .card-title,
.payment-comparison-card .card-body p,
.payment-comparison-card .card-body h3,
.payment-comparison-card .card-body h5 {
    color: var(--immo-text-white);
}

.payment-comparison-card hr {
    border-color: rgba(var(--immo-white-rgb), 0.3);
}

/* Mobile-optimized grid layouts */
@media (max-width: 768px) {
    [style*="display: grid"] {
        grid-template-columns: 1fr !important;
        gap: var(--immo-space-sm) !important;
    }

    /* Better card stacking on mobile */
    [style*="grid-template-columns: repeat(auto-fit"] {
        grid-template-columns: 1fr !important;
        gap: var(--immo-space-sm) !important;
    }

    /* Two-column layout for small cards on larger phones */
    @media (min-width: 400px) {
        [style*="grid-template-columns: repeat(auto-fit, minmax(300px"] {
            grid-template-columns: repeat(2, 1fr) !important;
            gap: var(--immo-space-sm) !important;
        }
    }
}

/* Touch-friendly buttons */
@media (max-width: 768px) {

    .immo-btn,
    button,
    a.btn {
        min-height: 44px;
        padding: var(--immo-space-md) var(--immo-space-lg);
        font-size: 1rem;
    }

    .immo-btn-sm {
        min-height: 38px;
        padding: var(--immo-space-sm) var(--immo-space-md);
    }

    /* Compact buttons in tables */
    .table-actions .immo-btn {
        min-height: 36px;
        padding: var(--immo-space-xs) var(--immo-space-sm);
        font-size: 0.8125rem;
    }
}

/* Better mobile spacing for sections */
@media (max-width: 768px) {
    [style*="margin-bottom: var(--immo-space-2xl)"] {
        margin-bottom: var(--immo-space-xl) !important;
    }
}

/* Mobile-optimized text inputs */
@media (max-width: 768px) {

    input[type="text"],
    input[type="email"],
    input[type="password"],
    input[type="number"],
    input[type="tel"],
    input[type="url"],
    textarea,
    select {
        font-size: 16px !important;
        /* Prevents zoom on iOS */
        min-height: 44px;
        padding: var(--immo-space-md);
    }

    /* Force single-column layout for all Bootstrap rows in forms */
    .row.mb-3,
    form .row,
    .container .row,
    .container-fluid .row {
        display: block !important;
    }

    .row.mb-3>*,
    form .row>*,
    .container .row>*,
    .container-fluid .row>* {
        width: 100% !important;
        max-width: 100% !important;
        flex-basis: 100% !important;
        display: block !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    /* Target all Bootstrap column classes */
    .col-1,
    .col-2,
    .col-3,
    .col-4,
    .col-5,
    .col-6,
    .col-7,
    .col-8,
    .col-9,
    .col-10,
    .col-11,
    .col-12,
    .col-sm-1,
    .col-sm-2,
    .col-sm-3,
    .col-sm-4,
    .col-sm-5,
    .col-sm-6,
    .col-sm-7,
    .col-sm-8,
    .col-sm-9,
    .col-sm-10,
    .col-sm-11,
    .col-sm-12,
    .col-md-1,
    .col-md-2,
    .col-md-3,
    .col-md-4,
    .col-md-5,
    .col-md-6,
    .col-md-7,
    .col-md-8,
    .col-md-9,
    .col-md-10,
    .col-md-11,
    .col-md-12,
    .col-lg-1,
    .col-lg-2,
    .col-lg-3,
    .col-lg-4,
    .col-lg-5,
    .col-lg-6,
    .col-lg-7,
    .col-lg-8,
    .col-lg-9,
    .col-lg-10,
    .col-lg-11,
    .col-lg-12 {
        width: 100% !important;
        max-width: 100% !important;
        flex: 0 0 100% !important;
        margin-bottom: var(--immo-space-md) !important;
    }
}

/* Mobile-friendly share link display */
@media (max-width: 768px) {
    [style*="display: flex; align-items: flex-start; justify-content: space-between"] {
        flex-direction: column;
    }

    [style*="flex-shrink: 0; margin-left: var(--immo-space-lg)"] {
        margin-left: 0 !important;
        margin-top: var(--immo-space-md);
        width: 100%;
    }

    [style*="flex-shrink: 0; margin-left: var(--immo-space-lg)"] .immo-btn {
        width: 100%;
    }
}

/* Global Search Component Styles */
.search-component:hover .search-wrapper,
.search-component:focus-within .search-wrapper {
    width: 300px !important;
    padding-right: 15px;
}

.search-component:hover .search-input,
.search-component:focus-within .search-input,
.search-component:hover input,
.search-component:focus-within input {
    width: 100% !important;
    opacity: 1 !important;
    margin-left: 5px;
}

.search-item {
    padding: 10px 15px;
    border-bottom: 1px solid var(--immo-border-light);
    cursor: pointer;
    transition: background-color 0.15s;
    display: flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
    color: inherit;
}

.search-item:last-child {
    border-bottom: none;
}

.search-item:hover,
.search-item.active {
    background-color: var(--immo-bg-gray-50);
    text-decoration: none;
    color: inherit;
}

.search-category-header {
    padding: 8px 15px;
    background-color: var(--immo-bg-gray-50);
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--immo-secondary);
    /* Replacing #6c757d */
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.no-results {
    padding: 20px;
    text-align: center;
    color: var(--immo-secondary);
    /* Replacing #6c757d */
}

.highlight {
    background-color: rgba(var(--immo-yellow-rgb), 0.4);
    color: var(--immo-text-primary);
    font-weight: 600;
    padding: 0 1px;
    border-radius: var(--immo-radius-xs);
}

.kbd-shortcut {
    font-size: 0.7rem;
    color: var(--immo-text-muted);
    border: 1px solid var(--immo-border-medium);
    border-radius: var(--immo-radius-xs);
    padding: 2px 5px;
    margin-left: auto;
}

/* Bootstrap Text Color Overrides - Consistency Enforcement */
.text-primary {
    color: var(--immo-primary) !important;
}

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

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

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

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

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


/* Utility - Hidden */
.hidden {
    display: none !important;
}

/* Chat UI Styles */
.ai-chat-container {
    height: 400px;
    overflow-y: auto;
    padding: 1rem;
    display: flex;
    flex-direction: column;
}

.ai-chat-history {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.chat-message {
    display: flex;
    gap: 0.75rem;
    max-width: 85%;
    animation: fadeIn 0.2s ease-out;
}

.chat-message.user {
    align-self: flex-end;
    flex-direction: row-reverse;
}

.chat-message.ai {
    align-self: flex-start;
}

.chat-message .message-content {
    padding: 0.75rem 1rem;
    border-radius: var(--immo-radius-lg);
    font-size: 0.95rem;
    line-height: 1.5;
}

.chat-message.user .message-content {
    background-color: var(--immo-primary);
    color: var(--immo-text-white);
    border-bottom-right-radius: 0.25rem;
}

.chat-message.ai .message-content {
    background-color: var(--immo-bg-gray-50);
    color: var(--immo-text-primary);
    border-bottom-left-radius: 0.25rem;
}

/* Markdown rendering inside AI chat messages */
.chat-message.ai .message-content p {
    margin: 0 0 0.5em 0;
}

.chat-message.ai .message-content p:last-child {
    margin-bottom: 0;
}

.chat-message.ai .message-content ul,
.chat-message.ai .message-content ol {
    margin: 0.25em 0 0.5em 0;
    padding-left: 1.4em;
}

.chat-message.ai .message-content li {
    margin-bottom: 0.2em;
    line-height: 1.5;
}

.chat-message.ai .message-content li:last-child {
    margin-bottom: 0;
}

.chat-message.ai .message-content strong {
    font-weight: 600;
    color: var(--immo-text-primary);
}

.chat-message.ai .message-content em {
    font-style: italic;
}

.chat-message.ai .message-content code {
    background-color: rgba(var(--immo-black-rgb), 0.06);
    padding: 0.15em 0.35em;
    border-radius: var(--immo-radius-xs);
    font-size: 0.88em;
    font-family: 'SF Mono', 'Cascadia Code', 'Consolas', monospace;
}

.chat-message.ai .message-content pre {
    background-color: rgba(var(--immo-black-rgb), 0.06);
    padding: 0.6em 0.8em;
    border-radius: var(--immo-radius-sm);
    overflow-x: auto;
    margin: 0.4em 0;
    font-size: 0.85em;
}

.chat-message.ai .message-content pre code {
    background: none;
    padding: 0;
    font-size: inherit;
}

.chat-message.ai .message-content h1,
.chat-message.ai .message-content h2,
.chat-message.ai .message-content h3,
.chat-message.ai .message-content h4 {
    margin: 0.6em 0 0.3em 0;
    font-weight: 600;
    line-height: 1.3;
}

.chat-message.ai .message-content h1 {
    font-size: 1.1em;
}

.chat-message.ai .message-content h2 {
    font-size: 1.05em;
}

.chat-message.ai .message-content h3 {
    font-size: 1em;
}

.chat-message.ai .message-content table {
    width: 100%;
    border-collapse: collapse;
    margin: 0.4em 0;
    font-size: 0.9em;
}

.chat-message.ai .message-content th,
.chat-message.ai .message-content td {
    padding: 0.35em 0.6em;
    border: 1px solid rgba(var(--immo-black-rgb), 0.1);
    text-align: left;
}

.chat-message.ai .message-content th {
    background-color: rgba(var(--immo-black-rgb), 0.04);
    font-weight: 600;
}

.chat-message.ai .message-content blockquote {
    border-left: 3px solid var(--immo-primary);
    margin: 0.4em 0;
    padding: 0.2em 0 0.2em 0.8em;
    color: var(--immo-text-secondary);
}

.chat-message.ai .message-content hr {
    border: none;
    border-top: 1px solid rgba(var(--immo-black-rgb), 0.1);
    margin: 0.5em 0;
}

.ai-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--immo-primary), var(--immo-secondary));
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--immo-text-white);
    flex-shrink: 0;
}

.ai-avatar i {
    width: 16px;
    height: 16px;
}

.command-input-container {
    position: relative;
    display: flex;
    align-items: center;
    padding: 1rem;
    border-bottom: 1px solid var(--immo-border-light);
}

.command-send-btn {
    background: none;
    border: none;
    color: var(--immo-text-muted);
    cursor: pointer;
    padding: 0.5rem;
    border-radius: 50%;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
}

.command-send-btn:hover {
    background-color: var(--immo-bg-gray-50);
    color: var(--immo-primary);
}

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

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

/* Markdown Content Styling within Chat */
.message-content ul,
.message-content ol {
    margin: 0.5rem 0;
    padding-left: 1.5rem;
}

.message-content p {
    margin-bottom: 0.5rem;
}

.message-content p:last-child {
    margin-bottom: 0;
}

/* ============================================
   Bootstrap .card unification (visual audit 2026-06)
   Detail pages use raw Bootstrap .card markup; align it with the
   design tokens so cards look identical app-wide.
   ============================================ */
.card {
    background-color: var(--immo-card);
    border: 1px solid var(--immo-border-light);
    border-radius: var(--immo-radius-lg);
    box-shadow: var(--immo-shadow);
}

.card .card-header {
    background-color: var(--immo-bg-gray-50);
    border-bottom: 1px solid var(--immo-border-light);
    border-top-left-radius: calc(var(--immo-radius-lg) - 1px);
    border-top-right-radius: calc(var(--immo-radius-lg) - 1px);
}

.card .card-header h5,
.card .card-header h6 {
    font-size: 1rem;
    font-weight: var(--immo-font-weight-semibold);
    margin-bottom: 0;
}

/* === TABULATOR SKIN — match .immo-table ===================================
   Tabulator's CDN stylesheet loads inside page content (after this file),
   so these rules carry an `html` prefix to win on specificity, not order.
   Light-mode colors only; dark-mode.css owns the dark skin. */
html .tabulator {
    font-size: 14px;
    background-color: var(--immo-card);
    border: 1px solid var(--immo-border-light);
    border-radius: var(--immo-radius-lg);
    overflow: hidden;
    box-shadow: none;
}

html:not([data-theme="dark"]) .tabulator .tabulator-header {
    background-color: var(--table-header);
    border-bottom: 1px solid var(--immo-border-light);
    font-weight: 600;
}

html:not([data-theme="dark"]) .tabulator .tabulator-header .tabulator-col {
    background-color: transparent;
}

html .tabulator .tabulator-header .tabulator-col-title {
    color: var(--immo-text-secondary);
    font-size: 0.8125rem;
}

html:not([data-theme="dark"]) .tabulator .tabulator-row {
    background-color: transparent;
    border-bottom: 1px solid var(--immo-border-light);
}

html:not([data-theme="dark"]) .tabulator .tabulator-row.tabulator-row-even {
    background-color: var(--immo-bg-gray-50);
}

html:not([data-theme="dark"]) .tabulator .tabulator-row:hover {
    background-color: rgba(var(--brand-primary-rgb), 0.04) !important;
}

html .tabulator .tabulator-cell {
    padding: 10px 12px !important;
    height: auto !important;
    align-content: center;
}

html .tabulator .tabulator-cell.tabulator-editing {
    border: 2px solid var(--immo-primary) !important;
    padding: 8px 10px !important;
}

html:not([data-theme="dark"]) .tabulator .tabulator-cell.cell-saving {
    background-color: var(--immo-glass-green) !important;
}

html:not([data-theme="dark"]) .tabulator .tabulator-cell.cell-error {
    background-color: var(--immo-glass-red) !important;
}

html:not([data-theme="dark"]) .tabulator .tabulator-cell.cell-missing {
    background-color: var(--immo-glass-amber) !important;
}

/* === ICON HELPERS — FontAwesome -> Lucide migration ========================
   .icon-inline makes a Lucide SVG behave like the font icon it replaced:
   it tracks font-size and sits on the text baseline the way FA glyphs did. */
svg.icon-inline {
    width: 1em;
    height: 1em;
    vertical-align: -0.125em;
}

.icon-3x {
    font-size: 3em;
}

svg.icon-spin {
    animation: icon-spin 1s linear infinite;
}

@keyframes icon-spin {
    to {
        transform: rotate(360deg);
    }
}

/* === LAYOUT & TEXT UTILITIES (UI alignment round 7) =======================
   Replace per-element style="..." with these. Bootstrap utilities cover the
   exact-rem steps (mb-2=space-sm, mb-3=space-lg, mb-4=space-xl, p-3/p-4,
   me-2=8px, gap-2); the classes below fill the token steps Bootstrap lacks
   plus the recurring app patterns. */
.mb-space-md { margin-bottom: var(--immo-space-md); }   /* 12px */
.mb-space-2xl { margin-bottom: var(--immo-space-2xl); } /* 32px */
.mt-space-md { margin-top: var(--immo-space-md); }
.mt-space-2xl { margin-top: var(--immo-space-2xl); }
.p-space-2xl { padding: var(--immo-space-2xl); }

.text-heading { color: var(--immo-heading); }
.text-sm { font-size: 0.875rem; }

/* Metric/stat card internals — compact label over a prominent value,
   centred. Centralises the repeated inline-styled metric cards on detail
   pages (R6 "metric card" role: .card surface + this compact body). */
.card-body.stat-card { padding: var(--immo-space-md); text-align: center; }
.stat-label { display: block; color: var(--immo-text-secondary); font-size: 0.8rem; }
.stat-value { display: block; font-size: 1.15rem; font-weight: 600; color: var(--immo-heading); }
.stat-value-muted   { color: var(--immo-text-primary); }
.stat-value-success { color: var(--immo-success); }
.stat-hint  { display: block; color: var(--immo-text-secondary); font-size: 0.75rem; margin-top: 2px; }

/* Preview/summary panels — the rent- and operating-cost-adjustment wizards
   share an identical sticky "before → after" panel. Centralised so both
   stay in sync (off-scale sizes defined once here). */
.preview-sticky { position: sticky; top: var(--immo-space-xl); }
.preview-section-label { font-size: 0.8rem; color: var(--immo-text-muted); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: var(--immo-space-sm); }
.preview-box { text-align: center; padding: var(--immo-space-sm); background: var(--immo-bg-gray-50); border-radius: var(--immo-radius); }
.preview-box-label { font-size: 0.75rem; color: var(--immo-text-muted); }
.preview-box-value { font-size: 1.4rem; font-weight: 700; }

/* Fixed-size icons: pin the px sizes used in chips, table cells and
   headers. Defined after svg.icon-inline (1em) so the size wins; lucide
   copies the classes onto the rendered <svg>. */
svg.icon-12, i.icon-12 { width: 12px; height: 12px; }
svg.icon-14, i.icon-14 { width: 14px; height: 14px; }
svg.icon-16, i.icon-16 { width: 16px; height: 16px; }
svg.icon-20, i.icon-20 { width: 20px; height: 20px; }
svg.icon-24, i.icon-24 { width: 24px; height: 24px; }

/* Recurring layout patterns */
.immo-grid-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--immo-space-md);
}

.immo-grid-stack {
    display: grid;
    gap: var(--immo-space-md);
}

.immo-form-actions {
    margin-top: var(--immo-space-lg);
    display: flex;
    gap: var(--immo-space-sm);
    justify-content: flex-end;
}

/* Mobile behaviour for the utility patterns. Grids collapse below 992px --
   the breakpoint the retired immo_base form hack enforced -- so form
   layouts stack consistently with Bootstrap .row (see mobile.css). */
@media (max-width: 992px) {
    .immo-grid-2 {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .immo-grid-stack {
        gap: var(--immo-space-sm);
    }

    .mb-space-2xl {
        margin-bottom: var(--immo-space-xl);
    }
}

@media (max-width: 576px) {
    .immo-form-actions {
        flex-direction: column;
    }

    .immo-form-actions .immo-btn {
        width: 100%;
    }
}