/*
 * IronMatch CRE — Custom Admin Branding
 * Palette:  Charcoal var(--im-primary) | Bronze var(--im-accent) | Dark var(--im-primary-dark) | Light BG #F5F5F5
 */

/* ============================================================
   RESET & BOX MODEL
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }

html { overflow-y: scroll; overflow-x: hidden; }

body { overflow: visible !important; }

/* ============================================================
   HEADER & BRANDING
   ============================================================ */
#header {
    background: var(--im-gradient-header);
    color: #fff;
    border-bottom: 3px solid var(--im-accent);
    padding: 15px 20px;
    box-sizing: border-box;
    overflow: visible !important;
    max-width: 100%;
    position: relative; /* anchor for centered search bar */
}

#branding {
    display: flex;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
    min-width: 0;
}

#branding img { max-width: 240px; }
#branding-logo { height: 70px; width: auto; }

#site-name {
    font-size: 28px;
    font-weight: 700;
    color: #fff !important;
    margin: 0;
    letter-spacing: 0.5px;
}

#site-name a:link,
#site-name a:visited { color: #fff; text-decoration: none; }
#site-name a:hover   { color: var(--im-accent); }

#user-tools         { background: transparent; padding: 0; font-size: 13px; }
#user-tools a       { color: var(--im-accent); font-weight: 500; }
#user-tools a:hover { color: #fff; }
#logout-form button { background: none; border: none; padding: 0; color: var(--im-accent); font: inherit; font-weight: 500; cursor: pointer; }
#logout-form button:hover { color: #fff; }

/* ============================================================
   BREADCRUMBS
   ============================================================ */
.breadcrumbs {
    background: var(--im-primary-dark) !important;
    border-bottom: 1px solid var(--im-accent);
    padding: 12px 20px;
    color: #e0e0e0 !important;
}
.breadcrumbs a       { color: var(--im-accent); font-weight: 500; }
.breadcrumbs a:hover { color: #fff; }

/* ============================================================
   GLOBAL LINKS
   ============================================================ */
a:link, a:visited { color: var(--im-accent); text-decoration: none; }
a:hover           { color: var(--im-accent-dark); text-decoration: underline; }
a:focus, a:active { color: var(--im-primary); }

/* ============================================================
   UNIFIED BUTTON SYSTEM — .im-btn
   Single source of truth for all IronMatch button styling.
   Colors come from variables in ironmatch_variables.css.
   Never hardcode hex values in button rules here.

   Semantic variants: primary, secondary, danger, success,
     navy, teal, purple, slate, orange, ghost, muted
   Size modifiers:    im-btn-sm, im-btn-lg
   Layout helpers:    im-btn-group, --right, --spread
   ============================================================ */

/* ── Base class ── */
.im-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 9px 18px;
    border: none;
    border-radius: var(--im-radius-md);
    font-weight: 600;
    font-size: 13px;
    line-height: 1.2;
    color: #fff;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    vertical-align: middle;
    height: auto;
    overflow: visible;
    transition: opacity 0.18s ease, transform 0.15s ease, box-shadow 0.15s ease, background 0.18s ease;
}
.im-btn:hover,
.im-btn:focus {
    opacity: 0.9;
    transform: translateY(-1px);
    box-shadow: var(--im-shadow-md);
    text-decoration: none;
}
.im-btn:active { transform: translateY(0); box-shadow: none; }

/* Fix a:link specificity (0,1,1) overriding button text color (0,1,0) */
a.im-btn:link, a.im-btn:visited { color: #fff; }
a.qa-btn:link, a.qa-btn:visited { color: #fff; }
a.main-link:link, a.main-link:visited { color: #fff; }
a.btn-nav:link, a.btn-nav:visited { color: #fff; }
a.complete-btn:link, a.complete-btn:visited { color: #fff !important; }
/* Prevent global a:link gold color overriding any solid-background .btn class */
a.btn:link, a.btn:visited { color: #fff; }

/* ── Size modifiers ── */
.im-btn-sm { padding: 5px 12px; font-size: 12px; gap: 5px; }
.im-btn-lg { padding: 12px 24px; font-size: 14px; font-weight: 700; gap: 8px; }

/* ── Disabled state ── */
.im-btn[disabled],
.im-btn.im-btn-disabled {
    opacity: 0.4;
    cursor: not-allowed;
    pointer-events: none;
    transform: none !important;
    box-shadow: none !important;
}

/* ── Semantic color variants ──
   background uses !important so these always win when paired with Django's
   .addlink / .viewlink / .historylink which also set background !important. */
.im-btn-primary   { background: var(--im-gradient-accent) !important; color: #fff; }
.im-btn-primary:hover { color: #fff; }

.im-btn-secondary { background: var(--im-btn-secondary-bg) !important; color: #fff; border: 1px solid #5a5f64; }
.im-btn-secondary:hover { background: var(--im-btn-secondary-dark) !important; color: #fff; }

.im-btn-danger    { background: var(--im-btn-danger-bg) !important; color: #fff; }
.im-btn-danger:hover { background: var(--im-btn-danger-dark) !important; color: #fff; }

.im-btn-success   { background: var(--im-btn-success-bg) !important; color: #fff; }
.im-btn-success:hover { background: var(--im-btn-success-dark) !important; color: #fff; }

.im-btn-navy      { background: var(--im-btn-navy-bg) !important; color: #fff; }
.im-btn-navy:hover { background: var(--im-btn-navy-dark) !important; color: #fff; }

.im-btn-teal      { background: var(--im-btn-teal-bg) !important; color: #fff; }
.im-btn-teal:hover { background: var(--im-btn-teal-dark) !important; color: #fff; }

.im-btn-purple    { background: var(--im-btn-purple-bg) !important; color: #fff; }
.im-btn-purple:hover { background: var(--im-btn-purple-dark) !important; color: #fff; }

.im-btn-slate     { background: var(--im-btn-slate-bg) !important; color: #fff; }
.im-btn-slate:hover { background: var(--im-btn-slate-dark) !important; color: #fff; }

.im-btn-orange    { background: var(--im-btn-orange-bg) !important; color: #fff; }
.im-btn-orange:hover { background: var(--im-btn-orange-dark) !important; color: #fff; }

/* Ghost — transparent with bronze border */
.im-btn-ghost {
    background: transparent;
    color: var(--im-accent);
    border: 1px solid var(--im-accent);
}
.im-btn-ghost:hover {
    background: var(--im-accent-light);
    color: var(--im-accent-dark);
    opacity: 1;
    transform: none;
}

/* Muted — light gray, dark text (Back, Cancel) */
.im-btn-muted {
    background: #f0f0f0;
    color: var(--im-primary);
    border: 1px solid #d8d8d8;
}
.im-btn-muted:hover { background: #e4e4e4; color: var(--im-primary-dark); opacity: 1; transform: none; }

/* ── Layout helpers ── */
.im-btn-group               { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.im-btn-group--right        { margin-left: auto; }
.im-btn-group--spread       { justify-content: space-between; }

/* ── Django admin standard selectors → bronze primary style ──
   Keeps Django's built-in form buttons styled consistently.
   Also covers Django's addlink/viewlink/historylink/changelink action classes. */
.button,
input[type=submit],
input[type=button],
.submit-row input,
a.button,
.addlink, .viewlink, .historylink, .changelink {
    background: var(--im-gradient-accent, linear-gradient(135deg, #C89968 0%, #b47d54 100%)) !important;
    border: none !important;
    color: #fff !important;
    font-weight: 600;
    padding: 9px 18px;
    border-radius: var(--im-radius-md, 6px) !important;
    box-shadow: none !important;
    font-size: 13px;
    line-height: 1.2;
    cursor: pointer;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
    transition: opacity 0.18s ease, transform 0.15s ease, box-shadow 0.15s ease !important;
}

/* Django base.css sets `a.button { padding: 4px 5px }` (specificity 0,1,1) which
   ties with the grouped rule above. Override by raising specificity to 0,1,2. */
body a.button {
    padding: 9px 18px;
    display: inline-flex;
    align-items: center;
    line-height: 1.2;
    height: auto;
    overflow: visible;
}
/* Same fix for a.im-btn — ensures Django admin link rules don't override button
   padding/height, keeping "No, take me back" and similar links full-height. */
body a.im-btn {
    padding: 9px 18px;
    display: inline-flex;
    align-items: center;
    line-height: 1.2;
    height: auto;
    overflow: visible;
}
.button:hover,
input[type=submit]:hover,
input[type=button]:hover,
.submit-row input:hover,
a.button:hover,
.addlink:hover, .viewlink:hover, .historylink:hover, .changelink:hover {
    opacity: 0.9 !important;
    transform: translateY(-1px);
    box-shadow: var(--im-shadow-md) !important;
    text-decoration: none;
    color: #fff !important;
}
.button:active, input[type=submit]:active { transform: translateY(0); }

.button.default,
input[type=submit].default,
.submit-row input.default        { background: var(--im-gradient-header) !important; }
.button.default:hover,
input[type=submit].default:hover { opacity: 0.9 !important; }

/* Destructive action */
.deletelink, .deletelink-box   { background: var(--im-btn-danger-bg) !important; }
.deletelink:hover              { background: var(--im-btn-danger-dark) !important; }

/* ============================================================
   SUBMIT ROW (form bottom action bar)
   Button order: [Save and Add Another] [Save and Continue] [Save] → [Delete]
   Delete is always far right, always red, always visually separated.
   ============================================================ */
.submit-row {
    background: var(--im-bg-page) !important;
    border-top: 2px solid var(--im-border) !important;
    padding: 16px 20px !important;
    margin-top: 24px !important;
    border-radius: 0 0 var(--im-radius-md) var(--im-radius-md) !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    flex-wrap: wrap !important;
    overflow: visible !important;
    box-shadow: 0 -2px 6px rgba(0,0,0,0.05) !important;
}
.submit-row input[type="submit"],
.submit-row input[type="button"],
.submit-row .button {
    margin: 0 !important;
    flex-shrink: 0 !important;
}

/* Delete always far right — margin pushes it away from save buttons */
.submit-row .deletelink-box {
    margin-left: auto !important;
    background: none !important;
}
.submit-row .deletelink-box a,
a.deletelink {
    background: var(--im-btn-danger-bg) !important;
    color: #fff !important;
    padding: 9px 18px !important;
    border-radius: var(--im-radius-md) !important;
    font-weight: 600 !important;
    font-size: 13px !important;
    text-decoration: none !important;
    display: inline-flex !important;
    align-items: center !important;
    border: none !important;
    white-space: nowrap !important;
    margin-left: auto !important;
    height: auto !important;
    line-height: 1.2 !important;
    transition: background 0.18s ease, transform 0.15s ease, box-shadow 0.15s ease !important;
}
.submit-row .deletelink-box a:hover,
a.deletelink:hover {
    background: var(--im-btn-danger-dark) !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 8px rgba(198, 40, 40, 0.35) !important;
    text-decoration: none !important;
}

/* ============================================================
   OBJECT TOOLS (changelist top-right toolbar)
   Layout only — colors are controlled by the centralized block
   further below and by individual .qa-btn / .im-btn classes.
   ============================================================ */
.object-tools { float: right !important; margin: 0; padding: 0; }

/* ============================================================
   RECORD NAVIGATION BAR
   Appears at top of all change form templates.
   Order: [← Prev] [N / Total] [Next →]  ...  [History] [💾 Save]
   Save is rightmost — the primary action is always easiest to reach.
   ============================================================ */
.im-record-nav {
    display: flex;
    gap: 8px;
    align-items: center;
    margin: 0 0 16px 0;
    padding: 10px 16px;
    background: #fff;
    border: 1px solid var(--im-border);
    border-radius: var(--im-radius-md);
    flex-wrap: wrap;
}

/* Active nav button — charcoal, small */
.im-nav-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 12px;
    background: var(--im-btn-secondary-bg);
    color: #fff;
    border: 1px solid #5a5f64;
    border-radius: var(--im-radius-sm);
    font-weight: 600;
    font-size: 13px;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    line-height: 1.2;
    transition: background 0.18s ease, transform 0.15s ease;
}
.im-nav-btn:hover {
    background: var(--im-btn-secondary-dark);
    color: #fff;
    transform: translateY(-1px);
    text-decoration: none;
}

/* Disabled nav — greyed, non-interactive */
.im-nav-btn-disabled {
    display: inline-flex;
    align-items: center;
    padding: 5px 12px;
    background: rgba(61, 66, 70, 0.15);
    color: var(--im-text-muted);
    border-radius: var(--im-radius-sm);
    font-size: 13px;
    white-space: nowrap;
    cursor: default;
    pointer-events: none;
    line-height: 1.2;
}

/* Record counter — bronze */
.im-nav-counter {
    color: var(--im-accent);
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
    padding: 0 4px;
}

/* Right-side action cluster — pushed to far right */
.im-nav-actions {
    margin-left: auto;
    display: flex;
    gap: 6px;
    align-items: center;
    flex-wrap: wrap;
}

/* ============================================================
   ACTION PANEL
   White header panel with title + action button row.
   Used at top of opportunity, property, lease, PSA forms.
   Button ordering: primary workflow → documents → AI/data → destructive
   ============================================================ */
.im-action-panel {
    background: #fff;
    padding: 16px 20px;
    margin-bottom: 24px;
    border-bottom: 3px solid var(--im-accent);
    border-radius: var(--im-radius-md) var(--im-radius-md) 0 0;
    box-shadow: var(--im-shadow-sm);
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 14px;
}
.im-action-panel__title {
    margin: 0;
    color: var(--im-primary);
    font-size: 20px;
    font-weight: 700;
    line-height: 1.3;
}
.im-action-panel__subtitle {
    margin: 4px 0 0;
    color: var(--im-text-muted);
    font-size: 13px;
}
.im-action-panel__actions {
    display: flex;
    gap: 10px;
    align-items: center;
    flex-wrap: wrap;
}

/* ============================================================
   DASHBOARD TABS (Personal ↔ Company switcher)
   ============================================================ */
.im-dash-tabs {
    display: flex;
    gap: 4px;
    margin-bottom: 24px;
    border-bottom: 2px solid var(--im-border);
}
.im-dash-tab {
    padding: 10px 22px;
    font-weight: 600;
    font-size: 14px;
    color: var(--im-text-muted);
    text-decoration: none;
    border-bottom: 3px solid transparent;
    margin-bottom: -2px;
    white-space: nowrap;
    transition: color 0.18s ease, border-color 0.18s ease;
}
.im-dash-tab:hover { color: var(--im-accent-dark); text-decoration: none; }
.im-dash-tab.active {
    color: var(--im-accent);
    border-bottom-color: var(--im-accent);
}

/* ============================================================
   NOTIFICATION BADGE PILLS (dashboard alerts)
   ============================================================ */
.im-notifications-bar {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    align-items: center;
    margin-bottom: 16px;
    padding: 10px 16px;
    background: var(--im-bg-card);
    border-radius: var(--im-radius-lg);
    box-shadow: var(--im-shadow-sm);
    border-left: 4px solid var(--im-danger);
}
.im-notifications-bar--clear { border-left-color: var(--im-success); }
.im-notifications-bar--alert { border-left-color: var(--im-danger); }

.im-notifications-bar__label {
    font-size: 13px;
    font-weight: 700;
    color: var(--im-primary);
    margin-right: 4px;
    flex-shrink: 0;
}

.im-notif-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 12px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 700;
    text-decoration: none;
    color: #fff;
    white-space: nowrap;
    transition: opacity 0.15s ease, transform 0.15s ease;
}
.im-notif-badge:hover {
    opacity: 0.85;
    transform: translateY(-1px);
    color: #fff;
    text-decoration: none;
}
.im-notif-badge--danger  { background: var(--im-btn-danger-bg); }
.im-notif-badge--primary { background: var(--im-btn-primary-bg); }
.im-notif-badge--warning { background: var(--im-btn-orange-bg); }
.im-notif-badge--success { background: var(--im-btn-success-bg); }

/* ============================================================
   LAYOUT CONTAINERS
   ============================================================ */
#container    { max-width: 100%; box-sizing: border-box; overflow: visible !important; }
#content      { background: var(--im-bg-page) !important; color: #222 !important; max-width: 100%; box-sizing: border-box; overflow: visible !important; padding: 20px !important; }
#content-main { color: #222 !important; max-width: 100%; box-sizing: border-box; overflow: visible !important; }
#main         { max-width: 100%; box-sizing: border-box; overflow: visible !important; }
form          { max-width: 100%; overflow: visible !important; }
fieldset      { max-width: 100%; box-sizing: border-box; background: #fff; border: 1px solid #e0e0e0; border-radius: 6px; margin-bottom: 20px; }

/* ============================================================
   MODULES
   ============================================================ */
.module {
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    background: #fff !important;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

.module h2,
.module caption,
fieldset.module h2,
#content .module h2,
#content-main .module h2,
.inline-group h2 {
    background: var(--im-gradient-header) !important;
    color: #fff !important;
    border-radius: 6px 6px 0 0;
    padding: 12px 15px;
    font-size: 14px;
    font-weight: 600;
}

/* ============================================================
   CONTENT TEXT
   General content uses dark text; specific white-on-dark overrides below.
   ============================================================ */
#content p, #content li, #content div, #content label,
#content-main p, #content-main li, #content-main div, #content-main label {
    color: #222 !important;
}

/* Content headings — dark by default */
#content h1, #content h2, #content h3, #content h4,
#content-main h1, #content-main h2, #content-main h3, #content-main h4 {
    color: var(--im-primary) !important;
}

/* Gradient header boxes — always white text regardless of #content overrides.
   Any element that uses var(--im-gradient-header) or a similar dark gradient as
   its background must be listed here so that the global "#content div/h1/h2 { color:
   #222/#im-primary !important }" rules cannot clobber the text.
   We include #content in the selector chain to win the specificity battle
   against the "#content h1/h2/div { color: ... !important }" rules above. */
#content .hub-header,
#content .hub-header *,
#content-main .hub-header,
#content-main .hub-header *,
#content .matching-header,
#content .matching-header *,
#content-main .matching-header,
#content-main .matching-header *,
#content .import-header,
#content .import-header *,
#content-main .import-header,
#content-main .import-header *,
#content .map-header,
#content .map-header *,
#content-main .map-header,
#content-main .map-header *,
#content .master-map-header,
#content .master-map-header *,
#content-main .master-map-header,
#content-main .master-map-header *,
#content .analytics-gradient-header,
#content .analytics-gradient-header *,
#content-main .analytics-gradient-header,
#content-main .analytics-gradient-header *,
#content .sr-hero,
#content .sr-hero *,
#content-main .sr-hero,
#content-main .sr-hero *,
#content .opp-card-header,
#content .opp-card-header *,
#content-main .opp-card-header,
#content-main .opp-card-header *,
/* Also cover elements rendered outside #content (e.g. sticky navbars) */
.hub-header,
.hub-header *,
.matching-header,
.matching-header *,
.import-header,
.import-header *,
.map-header,
.map-header *,
.master-map-header,
.master-map-header *,
.analytics-gradient-header,
.analytics-gradient-header *,
.sr-hero,
.sr-hero *,
.opp-card-header,
.opp-card-header * {
    color: white !important;
}

/* ── Dark-background table headers — always white text ──────────────────
   Add class="im-table-dark-header" to any <table> that uses a charcoal
   header row. This beats the global "#content div { color:#222 !important }"
   specificity without needing per-table inline style overrides.          */
.im-table-dark-header thead th,
.im-table-dark-header thead td {
    color: #fff !important;
    background: var(--im-gradient-header);
}

/* ============================================================
   SEARCH RESULTS PAGE — hero banner
   Aligns the search results hero to the master color scheme.
   ============================================================ */
.sr-hero {
    background: var(--im-gradient-header) !important;
    border-left-color: var(--im-accent) !important;
}
.sr-hero h1 {
    color: var(--im-accent) !important;
}
/* Search input inside the hero — light bg for readability on dark gradient */
.sr-search-row input {
    background: rgba(255, 255, 255, 0.20) !important;
    color: #fff !important;
    border: 1px solid rgba(255, 255, 255, 0.35) !important;
}
.sr-search-row input::placeholder {
    color: rgba(255, 255, 255, 0.60) !important;
}
.sr-search-row button {
    background: var(--im-accent) !important;
    color: #fff !important;
}
.sr-search-row button:hover {
    background: var(--im-accent-dark) !important;
}
/* Count badge in hero */
.sr-count-badge {
    background: rgba(200, 153, 104, 0.25) !important;
    border-color: rgba(200, 153, 104, 0.55) !important;
    color: var(--im-accent) !important;
}

/* ============================================================
   MATCHING HUB — opportunity card header
   Ensures white text on the dark gradient card headers.
   ============================================================ */
.opp-card-header {
    background: var(--im-gradient-header);
    color: white;
}
/* Score medium badge — improved contrast (#E65100 passes WCAG AA on pale yellow) */
.score-medium {
    background: #FFF3E0 !important;
    color: #E65100 !important;
}
.pill-medium {
    background: #FFF3E0 !important;
    color: #E65100 !important;
    border: 1px solid #FFCC80 !important;
}

/* Excellent / High pills sit inside .opp-card-header which forces color:white!important
   on all descendants.  Switch to solid dark backgrounds so white text is readable
   (≥7:1 contrast ratio, WCAG AAA). */
.pill-excellent {
    background: #2E7D32 !important;   /* dark green — white text contrast ~8.3:1 */
    border-color: #1B5E20 !important;
}
.pill-high {
    background: #1565C0 !important;   /* dark blue — white text contrast ~7.0:1 */
    border-color: #0D47A1 !important;
}

/* ============================================================
   FORMS
   ============================================================ */
.form-row       { border-bottom: 1px solid #f0f0f0; background: #fff; }
.form-row:hover { background: #fffaf5; }

label, .aligned label { color: var(--im-primary-dark); font-weight: 600; font-size: 14px; }
.required label:after { content: " *"; color: #d32f2f; font-weight: bold; }
.help                 { color: var(--im-text-muted) !important; }

/* Text inputs */
input[type="text"],
input[type="password"],
input[type="email"],
input[type="url"],
input[type="number"],
input[type="date"],
textarea,
.vTextField, .vDateField, .vTimeField, .vURLField,
.vIntegerField, .vPositiveIntegerField, .vBigIntegerField {
    background: #fff !important;
    border: 2px solid #ddd !important;
    color: var(--im-primary) !important;
    padding: 8px 12px !important;
    font-size: 14px !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
}

input[type="text"]:focus, input[type="password"]:focus, input[type="email"]:focus,
input[type="url"]:focus, input[type="number"]:focus, textarea:focus {
    border-color: var(--im-accent) !important;
    box-shadow: 0 0 0 3px rgba(200,137,104,0.15) !important;
    outline: none !important;
}

/* Selects */
select {
    background-color: #fff !important;
    border: 2px solid #ddd !important;
    color: var(--im-primary) !important;
    padding: 8px 36px 8px 12px !important;
    min-height: 40px !important;
    min-width: 200px !important;
    line-height: 1.5 !important;
    cursor: pointer !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%233D4246' d='M6 8L0 0h12z'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 12px center !important;
    background-size: 12px !important;
}

select:focus {
    border-color: var(--im-accent) !important;
    box-shadow: 0 0 0 3px rgba(200,137,104,0.15) !important;
    outline: none !important;
}

select option                                             { background-color: #fff !important; color: var(--im-primary) !important; }
select option:hover, select option:focus,
select option:active, select option:checked              { background-color: var(--im-accent) !important; background: var(--im-accent) !important; color: #fff !important; }

/* Disabled / readonly */
input:disabled, input[readonly],
textarea:disabled, textarea[readonly],
select:disabled, select[readonly] {
    background-color: var(--im-bg-page) !important;
    color: var(--im-text-disabled) !important;
    border-color: #ccc !important;
    cursor: not-allowed !important;
}

select:disabled, select[readonly] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%235A6470' d='M6 8L0 0h12z'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 12px center !important;
    background-size: 12px !important;
}

.readonly { background: var(--im-bg-page) !important; padding: 10px !important; border-radius: 4px !important; color: var(--im-primary) !important; }

input[type="file"]  { background: #fff !important; padding: 10px !important; border: 1px solid #ddd !important; border-radius: 4px !important; }
.file-upload        { background: #fff !important; border: 2px dashed var(--im-accent) !important; padding: 20px !important; }
.file-upload:hover  { background: #fffaf5 !important; border-color: var(--im-accent-dark) !important; }

/* ============================================================
   MESSAGES & ALERTS
   ============================================================ */
.messagelist                          { margin: 0; padding: 0; }
.messagelist li,
ul.messagelist li,
#content .messagelist li              { border-left: 4px solid var(--im-accent); background: #fffaf5; padding: 15px 20px; margin-bottom: 10px; border-radius: 4px; color: #222 !important; font-size: 14px; }
.messagelist .success,
ul.messagelist li.success             { border-left-color: #4caf50 !important; background: #e8f5e9 !important; color: #1a3a1a !important; }
.messagelist .warning,
ul.messagelist li.warning             { border-left-color: #ff9800 !important; background: #fff3e0 !important; color: #3a2a00 !important; }
.messagelist .error,
ul.messagelist li.error               { border-left-color: #f44336 !important; background: #ffebee !important; color: #3a0a0a !important; }
/* Ensure nested text inside messages is always readable */
ul.messagelist li *, #content .messagelist li * { color: inherit !important; }

/* Form-level validation error banner ("Please correct the error below.") */
p.errornote,
.errornote {
  background: #fff3cd !important;
  border-left: 4px solid #e65100 !important;
  color: #5a2d00 !important;
  padding: 14px 20px !important;
  margin-bottom: 12px !important;
  border-radius: 4px !important;
  font-size: 14px !important;
  font-weight: 600 !important;
}
p.errornote a, .errornote a { color: #b84c00 !important; text-decoration: underline; }

/* Inline field-level error list */
.errorlist,
ul.errorlist {
  margin: 4px 0 6px 0 !important;
  padding: 0 !important;
  list-style: none !important;
}
.errorlist li,
ul.errorlist li {
  background: #ffebee !important;
  border-left: 4px solid #f44336 !important;
  color: #5a0000 !important;
  padding: 8px 12px !important;
  margin-bottom: 4px !important;
  border-radius: 4px !important;
  font-size: 13px !important;
  font-weight: 500 !important;
}
/* Inline errors inside table rows (Django admin inline formsets) */
tr.errors td,
.errors td {
  background: #ffebee !important;
  color: #5a0000 !important;
}

/* ============================================================
   TABLES — RESULT LIST
   ============================================================ */
#result_list th              { background: var(--im-primary); color: #fff !important; border-bottom: 2px solid var(--im-accent); }
#result_list th a            { color: #fff !important; }
#result_list th a:hover      { color: var(--im-accent) !important; }
thead th.sorted              { background: var(--im-accent); color: #fff !important; }

#result_list tbody tr        { background: #fff !important; }
#result_list tbody tr.row1   { background: #fff !important; }
#result_list tbody tr.row2   { background: #f9f9f9 !important; }
#result_list tbody tr.selected { background: #e8f0fe !important; }

/* ============================================================
   LIST VIEW — ROW HOVER
   ============================================================ */

/* Subtle bronze hover on all changelist table rows */
#result_list tbody tr:hover td,
#result_list tbody tr:hover th {
    background-color: rgba(200, 153, 104, 0.06) !important;
    cursor: pointer;
}

/* Slightly stronger hover for the linked (clickable) cell */
#result_list tbody tr:hover td a {
    color: var(--im-accent-dark) !important;
}

/* Alternate row color — warm, not cold gray */
#result_list tbody tr:nth-child(even) td,
#result_list tbody tr:nth-child(even) th {
    background-color: rgba(247, 245, 242, 0.6);
}

#result_list td,
#result_list tbody td        { color: #222 !important; background: transparent !important; }
#result_list tbody td a,
#result_list tbody td a:link,
#result_list tbody td a:visited,
#result_list tbody th a,
#result_list tbody th a:link,
#result_list tbody th a:visited { color: #222 !important; }
#result_list tbody td a:hover,
#result_list tbody th a:hover   { color: var(--im-accent) !important; }

#result_list th, #result_list td {
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    white-space: normal !important;
    max-width: 200px !important;
}

#result_list th:first-child,
#result_list td:first-child  { width: 60px !important; min-width: 60px !important; }
#result_list td img          { max-width: 100% !important; height: auto !important; }

/* General table defaults */
table { width: 100% !important; max-width: 100% !important; table-layout: auto !important; border-collapse: collapse !important; }
table tbody tr               { background: #fff !important; }
table tbody tr:nth-child(even) { background: #f9f9f9 !important; }
table tbody td, table tbody th { color: #222 !important; background: transparent !important; }
table thead th, table thead td { color: #fff !important; }

/* Light-background custom panel/analytics tables — dark text overrides the broad white rule above.
   These table classes use #f5f5f5/#f8f8f8 headers and need readable dark text. */
.dash-table th,
.analytics-table th,
.data-table th,
table.detail-table th,
.task-table thead th,
.task-table thead td { color: #555 !important; }

/* Links tab table headers — light background with dark text for readability */
.links-tab-section thead th,
.links-tab-section thead td {
    background: #f5f5f5 !important;
    color: #333 !important;
}

/* ============================================================
   DASHBOARD
   ============================================================ */
#content-main h1 {
    color: var(--im-primary);
    font-size: 28px;
    font-weight: 700;
    border-bottom: 3px solid var(--im-accent);
    padding-bottom: 10px;
}

.dashboard #content                              { width: 100%; }
.dashboard .module table th                      { background: var(--im-primary); color: #fff !important; }
.dashboard .module table tbody tr                { background: #fff !important; }
.dashboard .module table tbody tr:nth-child(even){ background: #f9f9f9 !important; }
.dashboard .module table tbody td,
.dashboard .module table tbody th               { color: #222 !important; background: transparent !important; }

/* ============================================================
   ACTIONS BAR
   ============================================================ */
#changelist .actions {
    background: #fff !important;
    border: 1px solid #e0e0e0 !important;
    border-radius: 6px !important;
    padding: 15px !important;
}
.actions label, .actions select, .actions span { color: #222 !important; }
#changelist .actions select option:hover,
#changelist .actions select option:focus        { background-color: var(--im-accent) !important; color: #fff !important; }

/* ============================================================
   FILTER SIDEBAR
   ============================================================ */
#changelist-filter {
    background: var(--im-primary-dark) !important;
    border-left: 3px solid var(--im-accent);
    width: auto !important;
    min-width: 0 !important;
    transition: opacity 0.2s ease, width 0.2s ease;
}

/* Hidden state — injected by toggle JS */
#changelist-filter.filter-collapsed {
    display: none !important;
}

/* "FILTER" main title */
#changelist-filter h2 {
    background: var(--im-primary);
    color: #fff !important;
    padding: 8px 15px;
    margin: 0;
    font-size: 13px;
    letter-spacing: 0.5px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* Extra-actions links (Clear all filters / Hide counts) — visual styling only, not collapsible */
#content #changelist-filter-extra-actions h3,
#content-main #changelist-filter-extra-actions h3,
#changelist-filter-extra-actions h3 {
    background: var(--im-primary) !important;
    color: #ffffff !important;
    font-weight: 600;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    padding: 5px 12px;
    margin: 0;
    border-top: 1px solid rgba(255,255,255,0.08);
}

/* "Show counts" / "Hide counts" links — match the surrounding white h3 text,
   strip the Django .viewlink/.hidelink SVG icon offsets */
#changelist-filter-extra-actions h3 a:link,
#changelist-filter-extra-actions h3 a:visited,
#changelist-filter-extra-actions h3 a:hover,
#changelist-filter-extra-actions h3 a:focus {
    color: #ffffff !important;
    background-image: none !important;
    padding-left: 0 !important;
}

/* Section group headings — Django 5.0 uses <details><summary> for each filter group */
#changelist-filter details {
    border-top: 1px solid rgba(255,255,255,0.08);
}
#content #changelist-filter details summary,
#content-main #changelist-filter details summary,
#changelist-filter details summary {
    background: var(--im-primary) !important;
    color: #ffffff !important;
    font-weight: 600;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    padding: 5px 12px;
    margin: 0;
    cursor: pointer;
    /* display:flex overrides list-item, suppressing the native disclosure triangle in modern browsers */
    display: flex;
    align-items: center;
    justify-content: space-between;
    user-select: none;
}
/* Suppress native disclosure triangle in legacy WebKit (Safari < 15, older Chrome) */
#changelist-filter details summary::-webkit-details-marker {
    display: none;
}
#changelist-filter details summary::after {
    content: '▸';
    font-size: 10px;
    opacity: 0.7;
    transition: transform 0.15s ease;
    flex-shrink: 0;
}
#changelist-filter details[open] summary::after {
    content: '▾';
}
/* Range filter section headings (h3 inside filter detail content areas,
   or as direct children when rendered outside a <details> wrapper) */
#content #changelist-filter details h3,
#content-main #changelist-filter details h3,
#changelist-filter details h3,
#content #changelist-filter > h3,
#content-main #changelist-filter > h3,
#changelist-filter > h3 {
    color: #ffffff !important;
    background: var(--im-primary-dark) !important;
    font-weight: 600;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    padding: 5px 12px;
    margin: 0;
}

#changelist-filter ul            { background: var(--im-primary-dark) !important; margin: 0; padding: 0; }
#changelist-filter li            { color: #ddd !important; border-bottom: 1px solid rgba(255,255,255,0.05) !important; }
#changelist-filter li a          { color: #ddd !important; font-weight: 500; display: block; padding: 4px 12px !important; font-size: 12px; }
#changelist-filter li.selected a { color: var(--im-accent) !important; font-weight: 700; background: rgba(200,153,104,0.15) !important; }

#changelist-filter li a:hover {
    background-color: var(--im-accent) !important;
    color: #fff !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
}

/* Filter counts — always visible */
#changelist-filter li span.count,
#changelist-filter li .count     { display: inline !important; visibility: visible !important; opacity: 1 !important; }

/* "Hide counts" toggle widget — permanently hidden; counts are always shown */
#changelist-filter-toggle-counts-container,
.filter-toggle-counts-container  { display: none !important; }

/* Filter toggle button — shown in the filter h2 bar */
#filter-toggle-btn {
    background: none;
    border: 1px solid rgba(200,153,104,0.5);
    color: var(--im-accent);
    border-radius: 4px;
    padding: 2px 8px;
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    letter-spacing: 0.3px;
    transition: background 0.15s, color 0.15s;
    flex-shrink: 0;
}
#filter-toggle-btn:hover { background: var(--im-accent); color: #fff; }

/* Filters toggle button — inline with changelist search bar */
#toolbar {
    display: flex !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
}
#toolbar form#changelist-search {
    flex: 1 !important;
    min-width: 0 !important;
}
#filter-show-btn {
    background: #f2f2f2;
    color: var(--im-primary);
    border: 1px solid #ccc;
    border-radius: 6px;
    padding: 6px 12px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    letter-spacing: 0.3px;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-left: 12px;
    flex-shrink: 0;
}
#filter-show-btn:hover {
    background: rgba(200,153,104,0.15);
    border-color: var(--im-accent);
    color: var(--im-accent);
}
#filter-show-btn.filter-btn-active {
    background: rgba(200,153,104,0.15);
    border-color: var(--im-accent);
    color: var(--im-accent);
}

/* ============================================================
   FLOATING SAVE & CONTINUE BUTTON (change form pages)
   ============================================================ */
#float-save-continue-btn {
    position: fixed;
    top: 16px;
    right: 20px;
    z-index: 9000;
    display: flex;
    align-items: center;
    gap: 6px;
    background: var(--im-btn-navy-bg);
    color: #fff;
    border: none;
    border-radius: 8px;
    padding: 9px 16px;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
    letter-spacing: 0.2px;
    box-shadow: 0 3px 12px rgba(0,0,0,0.28);
    opacity: 0;
    transform: translateY(-6px);
    pointer-events: none;
    transition: opacity 0.2s ease, transform 0.2s ease, background 0.15s, right 0.3s ease;
}
#float-save-continue-btn.fscb-visible {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}
#float-save-continue-btn:hover {
    background: var(--im-btn-navy-dark);
    box-shadow: 0 4px 16px rgba(0,0,0,0.35);
}
#float-save-continue-btn:active {
    transform: translateY(1px);
    box-shadow: 0 2px 6px rgba(0,0,0,0.2);
}
/* Shift button left when the AI assistant sidebar is open (380px wide + 20px gap) */
body.ai-sidebar-open #float-save-continue-btn {
    right: 400px;
}
@media (max-width: 900px) {
    /* On narrow screens the sidebar overlays content — keep default position */
    body.ai-sidebar-open #float-save-continue-btn {
        right: 20px;
    }
}

/* ============================================================
   PHOTO + MAP SIDE-BY-SIDE GRID (change form pages)
   ============================================================ */
.photo-map-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin: 0 0 24px 0;
}
@media (max-width: 768px) {
    .photo-map-grid {
        grid-template-columns: 1fr;
    }
}

/* ============================================================
   LEFT NAV SIDEBAR — WORKFLOW GROUPS
   ============================================================ */

/* Section headers */
.nav-section {
    margin-bottom: 4px;
}

.nav-section-header {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 8px 14px 4px;
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    color: var(--im-text-muted);
    border-top: 1px solid var(--im-border);
    margin-top: 4px;
    user-select: none;
}

.nav-section:first-child .nav-section-header {
    border-top: none;
    margin-top: 0;
}

.nav-section-icon {
    font-size: 13px;
    flex-shrink: 0;
}

/* Model links */
.nav-section-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.nav-model {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 8px;
}

.nav-model a:first-child {
    flex: 1;
    display: block;
    padding: 6px 8px;
    font-size: 13px;
    font-weight: 500;
    color: var(--im-text) !important;
    text-decoration: none;
    border-radius: var(--im-radius-sm);
    transition: background 0.15s, color 0.15s;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.nav-model a:first-child:hover,
.nav-model a:first-child.selected {
    background: var(--im-accent-light) !important;
    color: var(--im-accent-dark) !important;
}

.nav-model a:first-child.selected {
    font-weight: 700;
    border-left: 3px solid var(--im-accent);
    padding-left: 5px;
}

/* + add link */
.nav-add-link {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    font-size: 15px;
    font-weight: 700;
    color: var(--im-accent) !important;
    text-decoration: none;
    border-radius: 50%;
    transition: background 0.15s;
    line-height: 1;
}

.nav-add-link:hover {
    background: var(--im-accent-light);
    color: var(--im-accent-dark) !important;
}

/* Quick Links section styling */
.nav-section .nav-model a[href*="analytics"],
.nav-section .nav-model a[href*="matching"],
.nav-section .nav-model a[href*="map"],
.nav-section .nav-model a[href*="vault"],
.nav-section .nav-model a[href*="import"] {
    color: var(--im-accent-dark) !important;
    font-style: italic;
}

/* Sidebar toggle button — keep Django's default behavior */
.sidebar-toggle-container {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: 8px 8px 4px;
    border-bottom: 1px solid var(--im-border);
}

#toggle-nav-sidebar {
    background: transparent;
    border: none;
    color: var(--im-text-muted);
    cursor: pointer;
    font-size: 14px;
    padding: 8px;
    border-radius: var(--im-radius-sm);
    transition: background 0.15s;
}
#toggle-nav-sidebar:hover {
    background: var(--im-accent-light);
    color: var(--im-accent);
}

/* Django manages sidebar visibility via nav-sidebar-open on <body>.
   No custom override needed — Django's own nav_sidebar.css handles it. */

/* ============================================================
   NAVIGATION SIDEBAR - PERSISTENT BEHAVIOR (like AI sidebar)
   ============================================================ */

/* Ensure body has border-box sizing so padding doesn't expand beyond viewport */
body {
    box-sizing: border-box;
    transition: padding-left 0.3s ease;
}

/* When nav sidebar is open, push content to the right to prevent overlap */
body.nav-sidebar-open {
    padding-left: 275px;  /* Match Django's default nav sidebar width */
}

/* On narrow screens (≤ 768px), use overlay behavior instead */
@media (max-width: 768px) {
    body.nav-sidebar-open {
        padding-left: 0;
    }
}

/* Update nav sidebar positioning to be persistent like AI sidebar */
#nav-sidebar {
    position: fixed;
    top: 0;
    left: 0;
    margin-left: 0; /* override Django's nav_sidebar.css which sets margin-left: -276px */
    width: 275px;
    height: 100vh;
    overflow-y: auto;
    transition: transform 0.3s ease;
    z-index: 9500;
    background: #fff;
    box-shadow: 4px 0 16px rgba(0, 0, 0, 0.15);
    visibility: visible; /* override Django's .main > #nav-sidebar { visibility: hidden } */
}

/* When closed, slide sidebar off-screen to the left */
body:not(.nav-sidebar-open) #nav-sidebar {
    transform: translateX(-100%);
}

/* Update toggle button to show current state */
#toggle-nav-sidebar {
    transition: transform 0.3s ease;
}

body:not(.nav-sidebar-open) #toggle-nav-sidebar {
    transform: rotate(180deg);
}

/* Home button row at top of nav sidebar */
.nav-sidebar-home-row {
    padding: 10px 12px;
    border-bottom: 1px solid var(--im-border);
}

.nav-sidebar-home-btn {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 12px 16px;
    border-radius: var(--im-radius-sm);
    background: var(--im-accent-light, #fdf6ed);
    color: var(--im-accent, #C89968);
    font-size: 16px;
    font-weight: 700;
    text-decoration: none;
    transition: background 0.15s, color 0.15s;
    letter-spacing: 0.3px;
}

.nav-sidebar-home-btn:hover {
    background: var(--im-accent, #C89968);
    color: #fff;
    text-decoration: none;
}

/* On mobile, the overlay backdrop belongs to #mobile-nav-overlay which is
   shared between the mobile-nav-drawer and the #nav-sidebar overlay mode.
   Match the existing mobile-nav-drawer z-index so the sidebar sits at the
   same stacking level when it replaces the drawer on narrow screens. */
@media (max-width: 768px) {
    #nav-sidebar {
        z-index: 99999; /* matches #mobile-nav-drawer stacking level */
    }
}

/* ============================================================
   NAV SIDEBAR EDGE TAB — persistent left-edge toggle
   Mirrors the AI assistant's right-side edge tab.
   Always visible; slides flush with the sidebar when open.
   ============================================================ */
.nav-sidebar-edge-toggle {
    position: fixed;
    left: 275px; /* flush with open sidebar's right edge */
    top: 50%;
    transform: translateY(-50%);
    padding: 18px 5px;
    background: var(--im-primary, #3D4246);
    border-radius: 0 8px 8px 0;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 3px 0 8px rgba(0, 0, 0, 0.18);
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    user-select: none;
    transition: left 0.3s ease, background 0.2s ease;
    z-index: 9501; /* above #nav-sidebar (9500) */
}

/* When sidebar is closed, pull the tab to the left viewport edge */
body:not(.nav-sidebar-open) .nav-sidebar-edge-toggle {
    left: 0;
}

.nav-sidebar-edge-toggle:hover {
    background: var(--im-accent, #C89968);
}

/* On mobile the hamburger drawer takes over — hide the edge tab */
@media (max-width: 768px) {
    .nav-sidebar-edge-toggle {
        display: none;
    }
}


/* ============================================================
   INLINE FORMSETS
   ============================================================ */
.inline-group {
    background: #fff !important;
    border: 1px solid #e0e0e0 !important;
    border-radius: 6px !important;
    margin-bottom: 20px !important;
    max-width: 100%;
    overflow-x: auto;
    display: block !important;
}
/* Must come AFTER .inline-group above so it wins the !important tie */
.cf-tab-hidden { display: none !important; }
.inline-related { background: #fff !important; }
.collapse       { background: #fff !important; }

/* ============================================================
   TABULAR INLINE TABLES
   ============================================================ */
.inline-group .tabular  { width: 100% !important; overflow-x: auto !important; background: #fff !important; }
.tabular table, table.tabular { width: 100% !important; border-collapse: collapse !important; table-layout: auto !important; background: #fff !important; }

.tabular thead th {
    background: var(--im-primary) !important;
    color: #fff !important;
    padding: 10px 8px !important;
    text-align: left !important;
    font-weight: 600 !important;
    font-size: 12px !important;
    white-space: nowrap !important;
    border-bottom: 2px solid var(--im-accent) !important;
    vertical-align: middle !important;
}

.tabular tbody td, .tabular tbody th { color: #222 !important; padding: 8px !important; vertical-align: top !important; border-bottom: 1px solid #e0e0e0 !important; }
.tabular tr:nth-child(even)          { background: #f9f9f9 !important; }
.tabular tbody tr:hover              { background: #fffaf5 !important; }

.tabular input:not([type="checkbox"]):not([type="radio"]), .tabular textarea {
    background: #fff !important; color: var(--im-primary) !important; border: 1px solid #ddd !important;
    padding: 6px 10px !important; width: 100% !important; box-sizing: border-box !important; font-size: 13px !important;
}
.tabular textarea { min-height: 38px !important; height: 38px !important; resize: none !important; overflow: hidden !important; }

.tabular select {
    background: #fff !important; color: var(--im-primary) !important; border: 1px solid #ddd !important;
    padding: 6px 32px 6px 10px !important; width: 100% !important; box-sizing: border-box !important; font-size: 13px !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%233D4246' d='M6 8L0 0h12z'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important; background-position: right 8px center !important; background-size: 10px !important;
}

.tabular input[type="file"]               { width: 100% !important; font-size: 12px !important; padding: 4px !important; }
.tabular select option:hover, .tabular select option:focus { background-color: var(--im-accent) !important; color: #fff !important; }

/* Column widths */
.tabular td.field-file, .tabular th.field-file                           { min-width: 180px !important; }
.tabular td:has(select), .tabular th:has(select)                         { min-width: 140px !important; }
.tabular td:has(input[type="text"]), .tabular th:has(input[type="text"]) { min-width: 120px !important; }
.tabular td:has(input[type="date"]), .tabular th:has(input[type="date"]) { min-width: 140px !important; }
.tabular td:has(textarea), .tabular th:has(textarea)                     { min-width: 200px !important; max-width: 400px !important; }

/* Task title column — prevent long titles from bleeding into adjacent columns */
.tabular td.field-title, .tabular th.field-title {
    max-width: 260px !important;
    overflow: hidden !important;
}
.tabular td.field-title input[type="text"] {
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}
.tabular th.delete, .tabular td.delete,
.tabular th.original, .tabular td.original                               { width: 40px !important; min-width: 40px !important; text-align: center !important; }

/* Add row */
.add-row, .add-row a, .tabular .add-row td { background: var(--im-bg-page) !important; padding: 10px !important; text-align: center !important; }
.add-row a       { color: var(--im-accent) !important; font-weight: 600 !important; text-decoration: none !important; }
.add-row a:hover { color: var(--im-primary) !important; }

/* ============================================================
   SELECT2 AUTOCOMPLETE
   ============================================================ */
.select2-container--admin-autocomplete .select2-selection                                 { background: #fff !important; border-color: #ddd !important; }
.select2-container--admin-autocomplete .select2-results__option                           { background-color: #fff !important; color: var(--im-primary) !important; }
.select2-container--admin-autocomplete .select2-results__option--highlighted,
.select2-container--admin-autocomplete .select2-results__option:hover,
.select2-container--admin-autocomplete .select2-results__option[aria-selected=true]       { background-color: var(--im-accent) !important; color: #fff !important; }

/* ============================================================
   PAGINATION
   ============================================================ */
.paginator, p.paginator, #changelist .paginator {
    background: var(--im-primary) !important;
    color: #fff !important;
    border-top: 1px solid var(--im-accent) !important;
    padding: 15px 20px !important;
    font-size: 13px !important;
}
.paginator a, .paginator a:link, .paginator a:visited { color: var(--im-accent) !important; font-weight: 500; text-decoration: none !important; }
.paginator a:hover { color: #fff !important; background-color: rgba(200,137,104,0.2) !important; padding: 4px 8px !important; border-radius: 3px !important; }
.paginator span, .paginator p { color: #fff !important; }

/* ============================================================
   CHANGELIST LAYOUT & OVERFLOW
   ============================================================ */
#changelist      { background: var(--im-bg-page) !important; overflow-x: auto; overflow-y: visible; }
#changelist-form { max-width: 100%; overflow-x: auto; overflow-y: visible; width: 100%; }
.results         { background: #fff !important; overflow-x: auto; overflow-y: visible; max-width: 100%; }
.results table   { table-layout: auto; width: 100%; }
.results th, .results td            { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.results tbody td, .results tbody th { color: #222 !important; }
.results td:nth-child(2), .results td:nth-child(4) { white-space: normal; max-width: 200px; }

/* ============================================================
   CALENDAR WIDGET
   ============================================================ */
.calendarbox { background: #fff !important; border: 1px solid var(--im-accent) !important; }

/* ============================================================
   STAT CARDS & STAT BOXES — unified IronMatch gold theme
   Overrides any per-template <style> block via !important
   ============================================================ */
.stat-card, .stat-box {
    background: #fff !important;
    border-radius: 8px !important;
    padding: 20px !important;
    box-shadow: 0 2px 6px rgba(0,0,0,0.08) !important;
    border-left: 4px solid var(--im-accent) !important;
    border-top: none !important;
    min-width: 0 !important;
}
.stat-card:hover, .stat-box:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 14px rgba(200,153,104,0.18) !important;
    border-left-color: var(--im-primary) !important;
}

/* Colour variants — matching daily dashboard kpi-card palette */
.stat-card.blue,   .stat-box.blue   { border-left-color: var(--im-accent) !important; }
.stat-card.green,  .stat-box.green  { border-left-color: #388e3c !important; }
.stat-card.orange, .stat-box.orange { border-left-color: #f57c00 !important; }
.stat-card.teal,   .stat-box.teal   { border-left-color: #00796b !important; }
.stat-card.purple, .stat-box.purple { border-left-color: var(--im-primary) !important; }
.stat-card.red,    .stat-box.red,
.stat-box.alerts                    { border-left-color: #d32f2f !important; }
.stat-card.highlight, .stat-box.highlight { border-left-color: var(--im-accent) !important; }
/* Match-quality tiers */
.stat-card.excellent { border-left-color: #388e3c !important; }
.stat-card.high      { border-left-color: var(--im-accent) !important; }
.stat-card.medium    { border-left-color: #f57c00 !important; }
.stat-card.low       { border-left-color: #78909c !important; }

/* Stat value numbers */
.stat-value, .stat-card .stat-value, .stat-box .stat-value {
    font-size: 28px !important;
    font-weight: 700 !important;
    color: var(--im-primary) !important;
    margin: 8px 0 !important;
    word-break: break-word !important;
}
/* Stat labels */
.stat-label, .stat-card .stat-label, .stat-box .stat-label {
    font-size: 11px !important;
    color: #7a6a58 !important;
    text-transform: uppercase !important;
    font-weight: 600 !important;
    letter-spacing: 0.5px !important;
    margin-bottom: 4px !important;
}
/* Secondary info below stat */
.stat-secondary, .stat-card .stat-secondary, .stat-box .stat-secondary {
    font-size: 12px !important;
    color: var(--im-text-secondary) !important;
    margin-top: 6px !important;
}

/* ============================================================
   CUSTOM COMPONENTS & BADGES
   ============================================================ */
.property-card        { border-left: 3px solid var(--im-accent); }

.score-badge { background: var(--im-gradient-accent); color: #fff; font-weight: 700; padding: 4px 12px; border-radius: 20px; }

.match-tier-excellent { background: linear-gradient(135deg, #4caf50 0%, #388e3c 100%); }
.match-tier-high      { background: var(--im-gradient-accent); }
.match-tier-medium    { background: linear-gradient(135deg, #ff9800 0%, #f57c00 100%); }

.map-header, .analytics-header, .report-header {
    background: var(--im-gradient-header);
    border-bottom: 3px solid var(--im-accent);
}

@keyframes ironmatch-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.7; } }
.highlight-new { animation: ironmatch-pulse 2s ease-in-out infinite; }

/* ============================================================
   BOV CHANGELIST — linked property column always black text
   ============================================================ */
.app-vault.model-brokeropinionofvalue #result_list td.field-linked_property a,
.app-vault.model-brokeropinionofvalue #result_list td.field-linked_property a:link,
.app-vault.model-brokeropinionofvalue #result_list td.field-linked_property a:visited { color: #222 !important; font-weight: 600; }
.app-vault.model-brokeropinionofvalue #result_list td.field-linked_property a:hover   { color: var(--im-accent) !important; }

/* ============================================================
   DELETE CONFIRMATION
   ============================================================ */
.delete-confirmation p, .delete-confirmation ul, .delete-confirmation li,
.deleteconfirmation h2, .deleteconfirmation p, .deleteconfirmation ul li { color: #222 !important; }

.delete-confirmation-actions {
    display: flex;
    gap: 10px;
    align-items: center;
    margin-top: 16px;
}

/* ============================================================
   CHART / VIZ CONTAINERS
   ============================================================ */
[id*="chart"], [id*="graph"], [class*="chart"], [class*="graph"],
.chart-container, .graph-container, #quick-analytics-summary {
    max-width: 100%; overflow-x: visible; width: 100%;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1400px) {
    #changelist-form { margin-right: 260px; }
    .tabular { overflow-x: auto !important; display: block !important; }
    .tabular table { min-width: 800px !important; }
}

@media (max-width: 1200px) {
    #changelist-form { margin-right: 0 !important; }
    #changelist-filter { width: 100% !important; float: none !important; margin-left: 0 !important; margin-top: 20px; }
    .results table { font-size: 13px; }
    .inline-group { width: 100% !important; }
}

@media (max-width: 992px) {
    .object-tools { float: none !important; margin-top: 10px !important; text-align: left; }
    .object-tools li { display: inline-block !important; margin: 5px 5px 5px 0 !important; }
    #header { align-items: flex-start; }
    #branding { flex-direction: row; flex-wrap: nowrap; align-items: center !important; gap: 10px !important; }
    #branding-logo { height: 55px !important; }
    #changelist-filter li a:hover { padding-left: 10px !important; padding-right: 10px !important; }
    .tabular thead th, .tabular tbody td { font-size: 12px !important; padding: 6px 4px !important; }
}

@media (max-width: 768px) {
    #header { align-items: flex-start; padding: 10px 15px; }
    #branding-logo { height: 55px; }
    #site-name { font-size: 20px; }
    #user-tools { font-size: 12px; }
    .object-tools li { display: block !important; margin: 5px 0 !important; }
    .object-tools a { display: block; text-align: center; }
    .results table { min-width: 800px; }
    .inline-group { overflow-x: auto !important; -webkit-overflow-scrolling: touch !important; }
    /* Make search bar take more room on mobile */
    #global-search-wrapper { flex: 1 1 0 !important; min-width: 80px !important; margin: 0 4px !important; }
    /* Shrink AI Agent button label on mobile */
    #ai-header-toggle .ai-btn-text { display: none; }
    /* Improve user-tools link spacing */
    #user-tools { flex-wrap: wrap; }
    /* Allow branding area to shrink so the hamburger button stays on-screen */
    #branding { flex-shrink: 1 !important; min-width: 0 !important; overflow: hidden; }
    /* Hide supplemental user-branding logo on narrow screens to keep the hamburger visible */
    .user-branding-extra { display: none !important; }
    /* Move floating Save & Continue to the bottom of the viewport on mobile
       so it doesn't overlap the hamburger button in the header */
    #float-save-continue-btn {
        top: auto;
        bottom: calc(20px + env(safe-area-inset-bottom, 0px));
        right: 16px;
    }
    /* Hide home button text on mobile if it has any text */
    #header-home-btn span { display: none; }

    /* ── Record page: action panel ── */
    .im-action-panel {
        flex-direction: column;
        align-items: flex-start;
    }
    .im-action-panel__actions {
        width: 100%;
    }

    /* ── Record page: any data table inside a dark panel should scroll ── */
    .im-dark-panel { overflow-x: auto !important; -webkit-overflow-scrolling: touch; }

    /* ── Record page: AI matchmaking engine ── */
    .ai-matchmaking-panel,
    .ai-matchmaking-panel-alt {
        overflow-x: hidden;
    }
    .opp-buyer-card {
        flex-direction: column !important;
        align-items: flex-start !important;
    }
    .opp-buyer-card-actions {
        flex-wrap: wrap !important;
        width: 100%;
    }
    .opp-buyer-card-actions button {
        flex: 1 1 auto;
        white-space: normal !important;
        min-width: 0;
    }
    /* Market context / property overview: allow grid to be single column */
    .im-context-grid {
        grid-template-columns: 1fr 1fr !important;
    }
}

@media (max-width: 480px) {
    #branding-logo { height: 45px !important; }
    /* Hide site-name text on tiny screens – logo alone is sufficient */
    #site-name { display: none !important; }
    .tabular thead th, .tabular tbody td { font-size: 11px !important; padding: 4px 2px !important; }
    /* Shrink AI Agent button to icon-only on tiny screens */
    #ai-header-toggle { padding: 7px 10px !important; }
}

/* Mobile nav drawer overlay */
/* Floating hamburger button — appears when the page is scrolled past the header */
#mobile-nav-btn.is-floating {
    position: fixed;
    top: 12px;
    left: 12px;
    z-index: 9990;
    background: var(--im-primary, #3D4246);
    border: 2px solid rgba(255,255,255,0.7);
    box-shadow: 0 4px 16px rgba(0,0,0,0.55);
    margin: 0;
    opacity: 1;
}

#mobile-nav-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.5);
    z-index: 99998;
}
#mobile-nav-overlay.visible { display: block; }

/* Nav drawer (slide-in panel, used on all screen sizes) */
#mobile-nav-drawer {
    position: fixed;
    top: 0;
    left: 0;
    width: 280px;
    height: 100vh;
    background: #fff;
    color: var(--im-primary); /* reset text color – drawer lives inside #header which inherits #fff */
    z-index: 99999;
    overflow-y: scroll;
    -webkit-overflow-scrolling: touch; /* smooth momentum scrolling on iOS */
    overscroll-behavior: contain; /* prevent scroll from bleeding to the page behind */
    transform: translateX(-100%);
    transition: transform 0.25s ease;
    box-shadow: 4px 0 16px rgba(0,0,0,0.25);
    /* visibility: hidden prevents keyboard focus on the off-screen drawer;
       visibility: visible restores focus when the drawer is opened */
    visibility: hidden;
}
#mobile-nav-drawer.open {
    transform: translateX(0);
    visibility: visible;
}
#mobile-nav-drawer .mnav-header {
    background: var(--im-gradient-header);
    color: #fff;
    padding: 16px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 3px solid var(--im-accent);
}
#mobile-nav-drawer .mnav-header h2 {
    margin: 0;
    font-size: 16px;
    font-weight: 700;
    color: #fff;
}
#mobile-nav-drawer .mnav-close {
    background: none;
    border: none;
    color: #fff;
    font-size: 22px;
    cursor: pointer;
    padding: 0 4px;
    line-height: 1;
}
#mobile-nav-drawer .mnav-section {
    padding: 8px 0 4px;
    border-bottom: 1px solid #f0f0f0;
}
#mobile-nav-drawer .mnav-section-title {
    padding: 8px 16px 4px;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--im-text-muted) !important;
}
#mobile-nav-drawer .mnav-link {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 11px 20px;
    color: var(--im-primary) !important;
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
    transition: background 0.15s;
}
#mobile-nav-drawer .mnav-link:hover {
    background: #f5f0eb;
    color: var(--im-accent) !important;
    text-decoration: none;
}
#mobile-nav-drawer .mnav-link .mnav-icon {
    font-size: 18px;
    flex-shrink: 0;
    width: 24px;
    text-align: center;
}

/* ============================================================
   ANALYTICS PREVIEW BOXES — colour corrections
   The broad '#content div { color: #222 !important }' and
   '#content h3 { color: var(--im-primary) !important }' rules above flatten
   all inline colours in the stat boxes.  These higher-specificity
   rules restore the intended light-scheme appearance.
   ============================================================ */

/* Box headings — restore gold  (specificity 2-0-1 > 1-0-1) */
#content #quick-analytics-summary h3,
#content #quick-buyer-stats h3,
#content #quick-property-stats h3,
#content #comp-quick-analytics h3,
#content #quick-psa-stats h3 {
    color: var(--im-accent) !important;
}

/* Tile label text — muted grey  (specificity 1-1-3 > 1-0-1) */
#quick-analytics-summary > div > div > div:first-child,
#quick-buyer-stats > div > div > div:first-child,
#quick-property-stats > div > div > div:first-child,
#comp-quick-analytics > div > div > div:first-child {
    color: var(--im-text-muted) !important;
}

/* Tile main value text — dark readable */
#quick-analytics-summary > div > div > div:nth-child(2),
#quick-buyer-stats > div > div > div:nth-child(2),
#quick-property-stats > div > div > div:nth-child(2),
#comp-quick-analytics > div > div > div:nth-child(2) {
    color: #2C3E50 !important;
}

/* Tile sub-text footnote */
#quick-analytics-summary > div > div > div:nth-child(3),
#quick-buyer-stats > div > div > div:nth-child(3),
#quick-property-stats > div > div > div:nth-child(3),
#comp-quick-analytics > div > div > div:nth-child(3) {
    color: var(--im-text-secondary) !important;
}

/* PSA box — overdue tile preserves its dynamic red via border-left;
   label/value text intentionally left to the broad #222 rule so the
   Django-template conditional red colour on the overdue value is not
   suppressed by a static CSS override. */

/* ============================================================
   STATUS BADGES — used across Opportunity, Buyer, Comp lists
   ============================================================ */

.im-badge {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    white-space: nowrap;
}

.im-badge-success   { background: #E8F5E9; color: #2E7D32; border: 1px solid #A5D6A7; }
.im-badge-warning   { background: #FFF8E1; color: #F57F17; border: 1px solid #FFE082; }
.im-badge-danger    { background: #FFEBEE; color: #C62828; border: 1px solid #FFCDD2; }
.im-badge-muted     { background: #F5F5F5; color: #616161; border: 1px solid #E0E0E0; }
.im-badge-bronze    { background: var(--im-accent-light); color: var(--im-accent-dark); border: 1px solid var(--im-accent); }
.im-badge-primary   { background: var(--im-primary); color: var(--im-text-on-dark); border: 1px solid var(--im-primary-dark); }

/* ============================================================
   SEARCH BAR — sizing and placeholder color
   ============================================================ */

#toolbar #searchbar {
    min-width: 280px;
    border: 2px solid var(--im-border) !important;
    border-radius: var(--im-radius-sm) !important;
    padding: 10px 12px !important;
    font-size: 13px !important;
    line-height: 1.5 !important;
    transition: border-color 0.2s !important;
    height: 38px !important;
    box-sizing: border-box !important;
    vertical-align: middle !important;
}
#toolbar #searchbar:focus {
    border-color: var(--im-accent) !important;
    outline: none !important;
    box-shadow: 0 0 0 3px var(--im-accent-light) !important;
}
#toolbar #searchbar::placeholder {
    color: var(--im-text-muted) !important;
    font-style: italic;
}


/* ============================================================
   OBJECT-TOOLS BAR — centralized layout
   Replaces per-template <style> blocks. All changelist templates
   rely on these rules; do NOT redefine them per-page.
   ============================================================ */
.object-tools {
    float: none !important;
    display: flex !important;
    gap: 10px !important;
    margin: 0 0 20px !important;
    padding: 15px 0 !important;
    clear: both;
    flex-wrap: wrap;
}
.object-tools li {
    display: inline-block;
    margin: 0 !important;
    list-style: none;
    background: transparent !important; /* let individual button classes control color */
}
/* Override Django's border-radius: 15px (pill shape) and inset top-edge shadow */
.object-tools a,
.object-tools a.addlink,
.object-tools a.viewlink,
.object-tools a.historylink,
.object-tools a.changelink {
    display: inline-flex;
    align-items: center;
    text-decoration: none !important;
    border-radius: var(--im-radius-md) !important;
    box-shadow: none !important;
    padding: 9px 16px !important;
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
    transition: opacity 0.18s ease, transform 0.15s ease, box-shadow 0.15s ease;
}
.object-tools a:hover { transform: translateY(-2px); box-shadow: 0 4px 8px rgba(0,0,0,0.2) !important; }

/* ============================================================
   STAT PANEL SYSTEM — centralized changelist summary panels
   Use .im-stat-panel > .im-stat-grid > .im-stat-item pattern.
   One place to change the look for every page's stat box.
   ============================================================ */

/* Outer container */
.im-stat-panel {
    background: #fdf9f5;
    border: 1px solid #e8d5c0;
    border-left: 4px solid var(--im-accent);
    padding: 20px;
    margin-bottom: 20px;
    border-radius: var(--im-radius-lg);
    box-shadow: var(--im-shadow-sm);
}

/* Optional header row (title + optional link/button) */
.im-stat-panel__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 15px;
}

.im-stat-panel__title {
    margin: 0;
    font-size: 18px;
    color: var(--im-accent) !important;
    font-weight: 600;
}

.im-stat-panel__desc {
    margin: 15px 0 0;
    font-size: 14px;
    color: var(--im-text-muted);
    opacity: 0.85;
}

/* Responsive grid of stat boxes */
.im-stat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 12px;
}

/* Individual stat box */
.im-stat-item {
    background: #fff;
    padding: 15px;
    border-radius: var(--im-radius-md);
    border-left: 4px solid var(--im-accent);
    box-shadow: var(--im-shadow-sm);
}

/* Alert variant — overdue deadlines, flagged records */
.im-stat-item--alert {
    border-left-color: #e74c3c !important;
    background: #fff0f0;
}

.im-stat-item__label {
    font-size: 11px;
    color: var(--im-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 600;
}

.im-stat-item__value {
    font-size: 24px;
    font-weight: 700;
    color: var(--im-text);
    margin-top: 8px;
}

.im-stat-item__value--alert {
    color: #e74c3c !important;
}

.im-stat-item__sub {
    font-size: 10px;
    color: var(--im-text-secondary);
    margin-top: 3px;
}

/* ============================================================
   TASK STAT PILLS — used on task changelist
   ============================================================ */
.task-stats-bar {
    display: flex;
    gap: 16px;
    margin-bottom: 16px;
    flex-wrap: wrap;
}

.task-stat-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 600;
}

.task-stat-pill.overdue { background: #fce8e8; color: #d32f2f; }
.task-stat-pill.today   { background: #fff3e0; color: #f57c00; }
.task-stat-pill.pending { background: #e3f2fd; color: #1565c0; }

.task-stat-pill .stat-num {
    font-size: 20px;
    font-weight: 700;
    line-height: 1;
}

/* ============================================================
   QUICK-ACTION BUTTON SYSTEM — .qa-btn
   Legacy alias for .im-btn, kept for backward compatibility.
   New templates should prefer .im-btn + semantic variant class.

   BUG FIX: .qa-btn.navy previously used var(--im-accent, #417690)
   which resolved to bronze (#C89968) instead of navy. All color
   variants now use their dedicated --im-btn-* variables.
   ============================================================ */

.qa-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 9px 16px;
    border: none;
    border-radius: var(--im-radius-md);
    font-weight: 600;
    font-size: 13px;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    color: #fff;
    line-height: 1.2;
    transition: opacity 0.18s ease, transform 0.15s ease, box-shadow 0.15s ease;
}
.qa-btn:hover,
.qa-btn:focus {
    opacity: 0.88;
    transform: translateY(-1px);
    box-shadow: var(--im-shadow-md);
    text-decoration: none;
}
.qa-btn[disabled],
.qa-btn.disabled {
    opacity: 0.4;
    cursor: not-allowed;
    pointer-events: none;
    transform: none !important;
    box-shadow: none !important;
}

/* Color variants — each uses its own design-token variable */
.qa-btn.gold    { background: var(--im-btn-primary-bg); }
.qa-btn.navy    { background: var(--im-btn-navy-bg); }   /* FIXED: was var(--im-accent) = bronze */
.qa-btn.slate   { background: var(--im-btn-slate-bg); }
.qa-btn.green   { background: var(--im-btn-success-bg); }
.qa-btn.purple  { background: var(--im-btn-purple-bg); }
.qa-btn.teal    { background: var(--im-btn-teal-bg); }
.qa-btn.gray    { background: #78909c; }
.qa-btn.red     { background: var(--im-btn-danger-bg); }
.qa-btn.orange  { background: var(--im-btn-orange-bg); }
.qa-btn.forest  { background: var(--im-btn-success-bg); }

/* Quick-actions row container */
.quick-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 24px;
    align-items: center;
}

/* ============================================================
   WIZARD STEP NAVIGATION — .loi-btn / .psa-btn
   Defined here in master CSS so wizard templates do not need
   page-scoped <style> blocks. Variants match the im-btn system.
   ============================================================ */
.loi-btn, .psa-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 11px 28px;
    border: none;
    border-radius: var(--im-radius-md);
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    text-decoration: none;
    white-space: nowrap;
    line-height: 1.2;
    transition: filter 0.15s ease, transform 0.15s ease, opacity 0.15s ease;
}
.loi-btn:hover, .psa-btn:hover {
    filter: brightness(1.06);
    transform: translateY(-1px);
    text-decoration: none;
}
.loi-btn:disabled, .psa-btn:disabled,
.loi-btn[disabled], .psa-btn[disabled] {
    opacity: 0.5;
    cursor: not-allowed;
    filter: none;
    transform: none;
    pointer-events: none;
}

.loi-btn-primary, .psa-btn-primary {
    background: var(--im-gradient-accent);
    color: #fff;
    box-shadow: 0 2px 6px rgba(0,0,0,0.20);
}
.loi-btn-secondary, .psa-btn-secondary {
    background: #f0f0f0;
    color: var(--im-primary);
}
.loi-btn-secondary:hover, .psa-btn-secondary:hover { background: #e4e4e4; filter: none; }

.loi-btn-export {
    background: var(--im-btn-secondary-bg);
    color: #fff;
}
.loi-btn-export:hover { background: var(--im-btn-secondary-dark); filter: none; }
.loi-btn-export-pdf  { background: var(--im-gradient-accent); color: #fff; }
.loi-btn-export-docx { background: linear-gradient(135deg, #2e5fa3, #1d4080); color: #fff; }

.psa-btn-skip {
    background: transparent;
    color: var(--im-text-muted);
    border: 1px solid var(--im-border);
}
.psa-btn-skip:hover { background: var(--im-bg-hover); filter: none; transform: none; }

/* Wizard step navigation row */
.loi-step-nav, .psa-step-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 24px;
    gap: 10px;
    flex-wrap: wrap;
}

/* Wizard export row */
.loi-export-row, .psa-export-row {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 16px;
    align-items: center;
}

/* ========================================================================
   AI MATCHMAKING ENGINE PANELS
   ======================================================================== */

/* Matchmaking panel container with gradient background */
.ai-matchmaking-panel {
    background: linear-gradient(135deg, #C89968 0%, #b47d54 100%);
    color: white;
    padding: 20px;
    margin: 0 0 20px 0;
    border-radius: 8px;
    border-left: 4px solid #3D4246;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

/* Alternative matchmaking panel using CSS variable gradient (for buyer form) */
.ai-matchmaking-panel-alt {
    background: var(--im-gradient-header);
    color: white;
    padding: 20px;
    margin: 0 0 20px 0;
    border-radius: 8px;
    border-left: 4px solid #3D4246;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

/* Matchmaking panel header text - ensure white color with high contrast */
.ai-matchmaking-panel h3,
.ai-matchmaking-panel-alt h3 {
    color: white;
    margin: 0;
    font-size: 18px;
}

/* Matchmaking info text - white with slight transparency for visual hierarchy */
.ai-matchmaking-info {
    font-size: 13px;
    color: white;
    opacity: 0.95;
}

/* Matchmaking empty state container */
.ai-matchmaking-empty {
    background: rgba(255,255,255,0.15);
    border: 2px dashed rgba(255,255,255,0.4);
    border-radius: 8px;
    padding: 30px;
    text-align: center;
}

/* Empty state heading text */
.ai-matchmaking-empty-heading {
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 10px;
    color: white;
    opacity: 0.95;
}

/* Empty state description text */
.ai-matchmaking-empty-desc {
    font-size: 13px;
    color: white;
    opacity: 0.85;
    margin-bottom: 15px;
}

/* ── AI Matchmaking Panel — mobile responsive tweaks ── */
@media (max-width: 600px) {
    /* Stack the panel header (title + "View All Matches" link) on narrow screens */
    .ai-matchmaking-panel > div:first-child,
    .ai-matchmaking-panel-alt > div:first-child {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 8px;
    }

    /* Buyer card rows: stack action buttons below the buyer info on mobile */
    .ai-matchmaking-panel > div:last-child > div,
    .ai-matchmaking-panel-alt > div:last-child > div {
        flex-direction: column !important;
        align-items: flex-start !important;
    }
}

/* Comps dashboard - Offering Memorandum link column */
a.comp-om-link {
    color: #C89968;
    font-weight: 600;
    text-decoration: none;
}
a.comp-om-link:hover {
    text-decoration: underline;
}

/* ============================================================
   ANALYTICS NAVBAR BUTTON — dark-context variant
   Used in the analytics section's charcoal top bar.
   Semi-transparent white on dark, not the standard im-btn palette.
   ============================================================ */
.im-analytics-nav-btn {
    background: rgba(255,255,255,0.15);
    color: #fff;
    padding: 6px 12px;
    border-radius: var(--im-radius-sm);
    font-size: 12px;
    font-weight: 500;
    border: 1px solid rgba(255,255,255,0.3);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    transition: background 0.2s ease;
    box-shadow: none;
}
a.im-analytics-nav-btn:link,
a.im-analytics-nav-btn:visited { color: #fff; }
.im-analytics-nav-btn:hover,
.im-analytics-nav-btn:focus {
    background: rgba(255,255,255,0.28);
    color: #fff;
    text-decoration: none;
    box-shadow: none;
}
.im-analytics-nav-btn.active {
    background: rgba(255,255,255,0.3);
    font-weight: 700;
}

/* ── Personal Dashboard: table header dark color ── */
.pd-table-th {
    text-align: left;
    padding: 8px;
    font-size: 12px;
    color: #3D4246 !important;
    font-weight: 700 !important;
}

/* ── Personal Dashboard: Notifications/Alerts bar → dark background, white text ── */
.im-notifications-bar {
    background: linear-gradient(135deg, var(--im-primary, #3D4246) 0%, #2a2d30 100%) !important;
    color: white !important;
}
.im-notifications-bar__label {
    color: white !important;
}
.im-notifications-bar span,
.im-notifications-bar > span {
    color: white !important;
}
.im-notifications-bar a,
.im-notifications-bar a:link,
.im-notifications-bar a:visited {
    color: white !important;
}
.im-notif-badge,
.im-notif-badge:link,
.im-notif-badge:visited {
    color: #fff !important;
}

/* ── Quick Actions Widget Button (dashboard panels) ── */
.qa-widget-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 5px 10px;
    background: #f8f9fa;
    border-radius: 5px;
    text-decoration: none;
    color: var(--im-primary, #3D4246);
    font-size: 11px;
    font-weight: 600;
    transition: all 0.2s;
    border: 1px solid #C89968;
}
.qa-widget-btn span:first-child {
    font-size: 13px;
    line-height: 1;
}
.qa-widget-btn:hover {
    background: #f0ece6;
    border-color: #a07040;
    text-decoration: none;
    color: var(--im-primary, #3D4246);
    box-shadow: 0 1px 4px rgba(200, 153, 104, 0.25);
}

/* ============================================================
   RECORD PAGE MOBILE RESPONSIVENESS
   Applies to all change-form pages: property, opportunity,
   buyer, contact, BOV, lease, PSA, comp.
   ============================================================ */

/* ── Make Django form fieldsets not overflow horizontally ── */
@media (max-width: 768px) {
    /* Prevent any direct child of content-main from overflowing */
    #content-main > * { max-width: 100%; }

    /* Form fieldsets full-width */
    .module.aligned,
    fieldset.module {
        overflow-x: visible;
    }

    /* Any table that is NOT a list-view results table should be scrollable */
    #content-main fieldset table,
    #content-main .form-row table {
        overflow-x: auto;
        display: block;
        width: 100%;
        -webkit-overflow-scrolling: touch;
    }

    /* Stat/info panels: allow wrapping */
    .im-stat-panel { padding: 14px 16px; }

    /* Record nav bar: keep it compact */
    .im-record-nav {
        padding: 8px 12px;
        gap: 6px;
    }
    .im-nav-counter { display: none; }

    /* Action panel: stack vertically, buttons wrap */
    .im-action-panel { padding: 14px 16px; gap: 10px; }
    .im-action-panel__title { font-size: 16px; }
    .im-action-panel__actions {
        width: 100%;
        gap: 6px;
    }
    /* Make large action buttons a bit smaller on mobile */
    .im-btn-lg {
        padding: 8px 12px;
        font-size: 12px;
    }

    /* AI matchmaking panel header: stack title + link */
    .opp-matchmaking-header {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 8px;
    }
    /* Buyer cards: stack vertically */
    .opp-buyer-card {
        flex-direction: column !important;
        align-items: flex-start !important;
    }
    .opp-buyer-card-actions {
        flex-wrap: wrap !important;
        width: 100%;
        gap: 6px;
    }
    .opp-buyer-card-actions button,
    .opp-buyer-card-actions a {
        flex: 1 1 auto;
        white-space: normal !important;
        min-width: 0;
        text-align: center;
    }

    /* Links tab sections: allow horizontal scroll on mobile */
    .links-tab-section {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
    }
    .links-tab-section table { min-width: 360px; }

    /* ReportAll tab: stack two-column layout to single column */
    .reportall-two-col {
        grid-template-columns: 1fr !important;
    }
}

@media (max-width: 480px) {
    /* On very small screens, ensure im-btn wraps text */
    .im-btn { white-space: normal; text-align: center; }
    /* Record nav: hide disabled arrows to save space */
    .im-nav-btn-disabled { display: none; }
}