/* Propertia Admin Theme - Force Overrides */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Plus+Jakarta+Sans:wght@400;500;600;700&display=swap');

:root {
    /* Sidebar */
    --sidebar-bg-start: #0B5D3B;
    --sidebar-bg-mid: #0B5D3B;
    --sidebar-bg-end: #08482F;
    --sidebar-item-active-bg: #C9A84C;
    --sidebar-item-active-text: #FFFFFF;
    --sidebar-item-inactive-text: #E6D08A;
    --sidebar-item-hover-bg: rgba(201, 168, 76, 0.14);
    --sidebar-item-hover-text: #F5E6A3;
    --sidebar-border: rgba(201, 168, 76, 0.35);

    /* Brand Colors */
    --primary-green-main: #0B5D3B;
    --primary-green-light: #0F6B46;

    /* Card Accent Colors */
    --accent-purple: #8B5CF6;
    --accent-blue: #2563EB;
    --accent-orange: #F59E0B;

    /* Backgrounds */
    --bg-app: #fffdfa;
    --bg-card: #ffffff;
    --bg-muted: #fffdfa;

    /* Text */
    --text-primary: #111827;
    --text-secondary: #6B7280;
    --text-muted: #9CA3AF;

    /* Borders */
    --border-divider: #f6efe3;

    /* Badge Colors */
    --badge-success-bg: #DCFCE7;
    --badge-success-text: #15803D;
    --badge-warning-bg: #FEF3C7;
    --badge-warning-text: #D97706;
    --badge-danger-bg: #FEE2E2;
    --badge-danger-text: #DC2626;
    --badge-info-bg: #EFF6FF;
    --badge-info-text: #2563EB;
    --badge-success-sidebar: #24713f;
}

body {
    font-family: 'Inter', 'Plus Jakarta Sans', 'SF Pro Display', sans-serif !important;
    background-color: var(--bg-app) !important;
    color: var(--text-primary) !important;
    font-weight: 400 !important;
}

html,
body .fi-layout,
body .fi-main,
body .fi-main-ctn,
body .fi-page,
body .fi-page-content {
    background-color: var(--bg-app) !important;
}

/* ==========================================================
   Typography System
   Heading: 700 | Section title: 600 | Body: 400-500 | Sidebar: 500-600
   ========================================================== */

/* Page Headings - weight 700 */
body h1,
body .fi-header-heading {
    font-weight: 700 !important;
    color: var(--text-primary) !important;
    letter-spacing: -0.02em !important;
    text-transform: uppercase !important;
}

/* Section / Card Titles - weight 600 */
body h2,
body h3,
body .fi-section-header-heading,
body .fi-wi-stats-overview-stat-label,
body .fi-card-header-heading {
    font-weight: 600 !important;
    color: var(--text-primary) !important;
}

/* Sub-headings - weight 600 */
body h4,
body h5,
body h6 {
    font-weight: 600 !important;
    color: var(--text-primary) !important;
}

/* Body text - weight 400-500 */
body p,
body td,
body .fi-ta-text,
body .fi-fo-field-wrp {
    font-weight: 400 !important;
    color: var(--text-primary) !important;
    line-height: 1.6 !important;
}

body label,
body .fi-fo-field-label,
body .fi-breadcrumb-item {
    font-weight: 500 !important;
    color: var(--text-secondary) !important;
}

/* Seller-style primary actions */
body .fi-btn.fi-color-primary,
body .fi-btn.fi-color-success,
body .fi-ac-btn-action.fi-color-primary,
body .fi-ac-btn-action.fi-color-success,
body .fi-modal-footer .fi-btn.fi-color-primary,
body .fi-modal-footer .fi-btn.fi-color-success {
    min-height: 2.5rem !important;
    border: 0 !important;
    border-radius: 0.5rem !important;
    background: #047857 !important;
    color: #ffffff !important;
    padding: 0.5rem 1rem !important;
    font-size: 0.875rem !important;
    font-weight: 600 !important;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08) !important;
}

body .fi-btn.fi-color-primary:hover,
body .fi-btn.fi-color-success:hover,
body .fi-ac-btn-action.fi-color-primary:hover,
body .fi-ac-btn-action.fi-color-success:hover,
body .fi-modal-footer .fi-btn.fi-color-primary:hover,
body .fi-modal-footer .fi-btn.fi-color-success:hover {
    background: #065f46 !important;
}

body .fi-btn.fi-color-primary *,
body .fi-btn.fi-color-success *,
body .fi-ac-btn-action.fi-color-primary *,
body .fi-ac-btn-action.fi-color-success *,
body .fi-modal-footer .fi-btn.fi-color-primary *,
body .fi-modal-footer .fi-btn.fi-color-success * {
    color: #ffffff !important;
}

/* Sidebar Menu - weight 500-600 */
body .fi-sidebar-item-label {
    font-weight: 500 !important;
    letter-spacing: 0.01em !important;
}

body .fi-sidebar-item-active .fi-sidebar-item-label {
    font-weight: 600 !important;
}

/* Sidebar Group Labels */
body .fi-sidebar-group-label {
    font-size: 0.65rem !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.1em !important;
    color: rgba(255, 255, 255, 0.45) !important;
}

/* Sidebar Layout & Colors - FORCED DARK IN ALL MODES */
body .fi-sidebar,
body .fi-sidebar aside,
body .fi-sidebar-header,
body .fi-sidebar-nav {
    background-color: var(--sidebar-bg-mid) !important;
}

body .fi-sidebar {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    height: 100vh !important;
    z-index: 20 !important;
    transition: width 0.3s ease !important;
    background: linear-gradient(180deg, var(--sidebar-bg-start) 0%, var(--sidebar-bg-mid) 50%, var(--sidebar-bg-end) 100%) !important;
    border-right: 1px solid var(--sidebar-border) !important;
}

body .fi-topbar {
    left: var(--sidebar-width) !important;
    width: calc(100% - var(--sidebar-width)) !important;
    position: fixed !important;
    top: 0 !important;
    z-index: 10 !important;
    transition: left 0.3s ease, width 0.3s ease !important;
    display: flex !important;
    align-items: center !important;
    background: var(--bg-card) !important;
    border-bottom: 1px solid var(--border-divider) !important;
    height: 4rem !important;
}

body .fi-main-ctn {
    padding-left: var(--sidebar-width) !important;
    padding-top: 5.5rem !important;
    transition: padding-left 0.3s ease !important;
}

/* ==========================================================
   Modal & Overlay Z-Index Fix
   Ensures modals appear above the fixed sidebar (z-index: 50)
   ========================================================== */
body .fi-modal-window,
body .fi-modal-container,
body .fi-modal,
body div[role="dialog"] {
    z-index: 9999 !important;
}

body .fi-modal-overlay {
    z-index: 9998 !important;
}

/* Reorder Topbar: Move Search to Left */
body .fi-topbar-start-ctn {
    flex: 1 !important;
    display: flex !important;
    align-items: center !important;
    gap: 1rem !important;
}

body .fi-topbar-end-ctn {
    flex: 0 !important;
    display: flex !important;
    align-items: center !important;
    gap: 1.5rem !important;
}

body .fi-global-search {
    margin-left: 1rem !important;
    width: 400px !important;
}

body .fi-global-search-input-ctn {
    background-color: var(--bg-muted) !important;
    border-radius: 0.75rem !important;
    border: 1px solid var(--border-divider) !important;
}

/* Agent page summary help */
body .zv-page-help {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 9;
    display: inline-flex;
    align-items: center;
    margin-left: 0;
    vertical-align: middle;
    flex-shrink: 0;
}

body .zv-page-title-row {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    justify-content: flex-start;
    width: auto;
    max-width: calc(100% - 3rem);
}

body .zv-page-title-row .fi-header-heading,
body .zv-page-title-row h1 {
    margin: 0 !important;
    white-space: nowrap !important;
}

body .zv-page-help__button {
    width: 1.85rem;
    height: 1.85rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    border: 1px solid rgba(11, 93, 59, 0.18);
    background: #ffffff;
    color: var(--primary-green-main);
    box-shadow: 0 8px 18px rgba(15, 23, 42, 0.1);
    transition: transform 0.15s ease, box-shadow 0.15s ease, color 0.15s ease;
}

body .zv-page-help__button:hover,
body .zv-page-help__button:focus-visible {
    color: #0f6b46;
    transform: translateY(-1px);
    box-shadow: 0 12px 26px rgba(15, 23, 42, 0.14);
    outline: none;
}

body .zv-page-help__icon {
    width: 1.15rem;
    height: 1.15rem;
}

body .zv-page-help__tooltip {
    position: absolute;
    top: 2.4rem;
    right: 0;
    width: min(20rem, calc(100vw - 1.5rem));
    padding: 0.9rem 1rem;
    border-radius: 0.75rem;
    border: 1px solid rgba(15, 23, 42, 0.08);
    background: #ffffff;
    box-shadow: 0 20px 45px rgba(15, 23, 42, 0.16);
}

body .zv-page-help__tooltip::before {
    content: "";
    position: absolute;
    top: -0.35rem;
    right: 0.6rem;
    width: 0.7rem;
    height: 0.7rem;
    background: #ffffff;
    border-left: 1px solid rgba(15, 23, 42, 0.08);
    border-top: 1px solid rgba(15, 23, 42, 0.08);
    transform: rotate(45deg);
}

body .zv-page-help__title {
    margin: 0 0 0.35rem !important;
    font-size: 0.75rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.04em !important;
    text-transform: uppercase !important;
    color: var(--primary-green-main) !important;
    line-height: 1.25 !important;
}

body .zv-page-help__summary {
    margin: 0 !important;
    font-size: 0.82rem !important;
    line-height: 1.45 !important;
    color: var(--text-secondary) !important;
}

/* Sidebar Items Layout & States */
body .fi-sidebar-item-button {
    margin: 0.25rem 0.75rem !important;
    padding: 0.75rem 1.25rem !important;
    border-radius: 0.75rem !important;
    transition: all 0.3s ease !important;
    background-color: transparent !important;
}

body .fi-sidebar-item-button,
body .fi-sidebar-item-button *,
body .fi-sidebar-item-icon,
body .fi-sidebar-group-label,
body .fi-sidebar-header *,
body .fi-sidebar-nav *,
body .fi-sidebar button {
    color: var(--sidebar-item-inactive-text) !important;
}

/* Active State */
body .fi-sidebar-item.fi-active>.fi-sidebar-item-btn,
body .fi-sidebar-item.fi-active>.fi-sidebar-item-button,
body .fi-sidebar-item-active .fi-sidebar-item-button,
body .fi-sidebar-item-button.fi-active {
    background-color: var(--sidebar-item-active-bg) !important;
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.14) !important;
    border-left: none !important;
}

body .fi-sidebar-item.fi-active>.fi-sidebar-item-btn,
body .fi-sidebar-item.fi-active>.fi-sidebar-item-button,
body .fi-sidebar-item-active .fi-sidebar-item-button,
body .fi-sidebar-item-button.fi-active,
body .fi-sidebar-item.fi-active>.fi-sidebar-item-btn *,
body .fi-sidebar-item.fi-active>.fi-sidebar-item-button *,
body .fi-sidebar-item-active .fi-sidebar-item-button *,
body .fi-sidebar-item-button.fi-active * {
    color: var(--sidebar-item-active-text) !important;
}

/* Hover State */
body .fi-sidebar-item.fi-sidebar-item-has-url>.fi-sidebar-item-btn:hover,
body .fi-sidebar-item-button:hover {
    background-color: var(--sidebar-item-hover-bg) !important;
    box-shadow: none !important;
    border-left: none !important;
}

body .fi-sidebar-item.fi-sidebar-item-has-url>.fi-sidebar-item-btn:hover,
body .fi-sidebar-item-button:hover,
body .fi-sidebar-item.fi-sidebar-item-has-url>.fi-sidebar-item-btn:hover *,
body .fi-sidebar-item-button:hover * {
    color: var(--sidebar-item-hover-text) !important;
}

body .fi-sidebar-item.fi-active>.fi-sidebar-item-btn:hover,
body .fi-sidebar-item.fi-active>.fi-sidebar-item-button:hover,
body .fi-sidebar-item-active .fi-sidebar-item-button:hover {
    background-color: var(--sidebar-item-active-bg) !important;
}

body .fi-sidebar-item.fi-active>.fi-sidebar-item-btn:hover,
body .fi-sidebar-item.fi-active>.fi-sidebar-item-button:hover,
body .fi-sidebar-item-active .fi-sidebar-item-button:hover,
body .fi-sidebar-item.fi-active>.fi-sidebar-item-btn:hover *,
body .fi-sidebar-item.fi-active>.fi-sidebar-item-button:hover *,
body .fi-sidebar-item-active .fi-sidebar-item-button:hover * {
    color: var(--sidebar-item-active-text) !important;
}

/* Header & Breadcrumbs Reordering */
body .fi-header,
body .fi-header-heading-group {
    position: relative !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 0.25rem !important;
    width: 100% !important;
    max-width: none !important;
}

body .fi-header .fi-ac,
body .fi-header-actions,
body .fi-header .fi-header-actions {
    align-self: flex-start !important;
    justify-content: flex-start !important;
    margin-left: 0 !important;
    margin-inline-start: 0 !important;
}

body .fi-header h1,
body .fi-header-heading,
body .fi-header-heading-group h1 {
    order: 1 !important;
    color: #0B5D3B !important;
    font-size: 1.875rem !important;
    font-weight: 700 !important;
    letter-spacing: 0 !important;
    line-height: 2.25rem !important;
    text-transform: uppercase !important;
}

body .zv-page-title-row .fi-header-heading,
body .zv-page-title-row h1 {
    color: #0B5D3B !important;
    font-size: 1.875rem !important;
    font-weight: 700 !important;
    letter-spacing: 0 !important;
    line-height: 2.25rem !important;
    text-transform: uppercase !important;
}

body .fi-header nav,
body .fi-header .fi-breadcrumbs,
body .fi-header-heading-group nav {
    order: 2 !important;
}

body .fi-main {
    margin-left: 0 !important;
    background-color: var(--bg-app) !important;
    width: 100% !important;
    max-width: none !important;
}

body .fi-page,
body .fi-page-content {
    width: 100% !important;
    max-width: none !important;
}

/* User Profile Details - TEXT ON RIGHT */
body .fi-user-menu-trigger {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 0.75rem !important;
    padding: 0.5rem !important;
}

.user-details-ctn {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: center !important;
    line-height: 1.1 !important;
}

.user-name-text {
    font-size: 0.85rem !important;
    font-weight: 600 !important;
    color: var(--text-primary) !important;
}

.user-role-text {
    font-size: 0.7rem !important;
    color: var(--text-secondary) !important;
    font-weight: 500 !important;
}

/* Dashboard Widgets & Cards */
.fi-wi-ctn>.grid,
.fi-wi-ctn>div>.grid {
    align-items: stretch !important;
}

.fi-wi-ctn .grid>div {
    display: flex !important;
    flex-direction: column !important;
}

.fi-wi-ctn .grid>div>* {
    flex: 1 1 auto !important;
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
}

.fi-wi-ctn .fi-section,
.fi-wi-ctn .fi-wi-widget {
    flex: 1 1 auto !important;
    display: flex !important;
    flex-direction: column !important;
    background-color: var(--bg-card) !important;
    border: 1px solid var(--border-divider) !important;
    border-radius: 0.75rem !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05) !important;
}

body .fi-section,
body .fi-ta-ctn,
body .fi-card,
body .fi-modal-window {
    background-color: var(--bg-card) !important;
    border-color: var(--border-divider) !important;
}

.fi-wi-ctn .fi-section-content-ctn {
    flex: 1 1 auto !important;
}

/* ==========================================================
   Badge & Status Colors
   ========================================================== */

body .fi-badge[style*="warning"],
body .fi-badge.fi-color-warning {
    background-color: var(--badge-warning-bg) !important;
    color: var(--badge-warning-text) !important;
    font-weight: 500 !important;
}

body .fi-badge[style*="danger"],
body .fi-badge.fi-color-danger {
    background-color: var(--badge-danger-bg) !important;
    color: var(--badge-danger-text) !important;
    font-weight: 500 !important;
}

body .fi-badge[style*="info"],
body .fi-badge.fi-color-info {
    background-color: var(--badge-info-bg) !important;
    color: var(--badge-info-text) !important;
    font-weight: 500 !important;
}

/* ==========================================================
   Card Accent Utilities (use on stat/widget cards)
   ========================================================== */
.card-accent-blue {
    border-top: 3px solid var(--accent-blue) !important;
}

.card-accent-orange {
    border-top: 3px solid var(--accent-orange) !important;
}

.card-accent-purple {
    border-top: 3px solid var(--accent-purple) !important;
}

.card-accent-green {
    border-top: 3px solid var(--primary-green-light) !important;
}

/* Stat icon backgrounds */
.accent-icon-blue {
    background-color: #EFF6FF !important;
    color: var(--accent-blue) !important;
}

.accent-icon-orange {
    background-color: #FFF7ED !important;
    color: var(--accent-orange) !important;
}

.accent-icon-purple {
    background-color: #F5F3FF !important;
    color: var(--accent-purple) !important;
}

.accent-icon-green {
    background-color: #ECFDF5 !important;
    color: var(--primary-green-light) !important;
}

/* Automatic icon styling based on card accent */
.card-accent-blue .fi-wi-stats-overview-stat-icon-ctn {
    background-color: #EFF6FF !important;
    color: var(--accent-blue) !important;
}

.card-accent-orange .fi-wi-stats-overview-stat-icon-ctn {
    background-color: #FFF7ED !important;
    color: var(--accent-orange) !important;
}

.card-accent-purple .fi-wi-stats-overview-stat-icon-ctn {
    background-color: #F5F3FF !important;
    color: var(--accent-purple) !important;
}

.card-accent-green .fi-wi-stats-overview-stat-icon-ctn {
    background-color: #ECFDF5 !important;
    color: var(--primary-green-light) !important;
}

/* Ensure icon container has enough padding and rounded corners */
.fi-wi-stats-overview-stat-icon-ctn {
    padding: 0.75rem !important;
    border-radius: 0.75rem !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* Super admin dashboard summary: keep all cards in one proper row. */
.fi-wi-stats-overview-stats-ctn:has(.zv-summary-stat) {
    grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
}

.zv-summary-stat.fi-wi-stats-overview-stat {
    min-height: 100% !important;
    padding: 1rem !important;
}

.zv-summary-stat .fi-wi-stats-overview-stat-content {
    gap: 0.35rem !important;
}

.zv-summary-stat .fi-wi-stats-overview-stat-label-ctn {
    gap: 0.5rem !important;
    min-width: 0 !important;
}

.zv-summary-stat .fi-wi-stats-overview-stat-label,
.zv-summary-stat .fi-wi-stats-overview-stat-description span {
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

.zv-summary-stat .fi-wi-stats-overview-stat-label {
    font-size: 0.75rem !important;
}

.zv-summary-stat .fi-wi-stats-overview-stat-value {
    font-size: 1.375rem !important;
    line-height: 1.15 !important;
}

.zv-summary-stat .fi-wi-stats-overview-stat-description {
    min-width: 0 !important;
    font-size: 0.7rem !important;
    line-height: 1.2 !important;
}

.zv-summary-stat .fi-wi-stats-overview-stat-icon-ctn {
    padding: 0.45rem !important;
    border-radius: 0.625rem !important;
}

.zv-summary-stat .fi-wi-stats-overview-stat-icon {
    width: 1.125rem !important;
    height: 1.125rem !important;
}

/* ==========================================================
   UNIVERSAL SIDEBAR OVERRIDE (FORCED DARK IN ALL MODES)
   ========================================================== */
.fi-sidebar,
.fi-sidebar aside,
.fi-sidebar-header,
.fi-sidebar-nav,
.fi-sidebar-content,
.fi-sidebar-footer {
    background: #0B5D3B !important;
}

.fi-sidebar-item-button {
    color: var(--sidebar-item-inactive-text) !important;
}

.fi-sidebar-item.fi-active>.fi-sidebar-item-btn,
.fi-sidebar-item.fi-active>.fi-sidebar-item-button,
.fi-sidebar-item-active .fi-sidebar-item-button,
.fi-sidebar-item-button.fi-active {
    background-color: var(--sidebar-item-active-bg) !important;
    border: none !important;
}

.fi-sidebar-item.fi-sidebar-item-has-url>.fi-sidebar-item-btn:hover,
.fi-sidebar-item-button:hover {
    background-color: var(--sidebar-item-hover-bg) !important;
    border: none !important;
}

.fi-sidebar-item.fi-active>.fi-sidebar-item-btn,
.fi-sidebar-item.fi-active>.fi-sidebar-item-button,
.fi-sidebar-item-active .fi-sidebar-item-button,
.fi-sidebar-item-button.fi-active,
.fi-sidebar-item.fi-active>.fi-sidebar-item-btn *,
.fi-sidebar-item.fi-active>.fi-sidebar-item-button *,
.fi-sidebar-item-active .fi-sidebar-item-button *,
.fi-sidebar-item-button.fi-active * {
    color: var(--sidebar-item-active-text) !important;
}

.fi-sidebar-item.fi-sidebar-item-has-url>.fi-sidebar-item-btn:hover,
.fi-sidebar-item-button:hover,
.fi-sidebar-item.fi-sidebar-item-has-url>.fi-sidebar-item-btn:hover *,
.fi-sidebar-item-button:hover * {
    color: var(--sidebar-item-hover-text) !important;
}

.fi-sidebar-item.fi-active>.fi-sidebar-item-btn:hover,
.fi-sidebar-item.fi-active>.fi-sidebar-item-button:hover,
.fi-sidebar-item-active .fi-sidebar-item-button:hover {
    background-color: var(--sidebar-item-active-bg) !important;
}

.fi-sidebar-item.fi-active>.fi-sidebar-item-btn:hover,
.fi-sidebar-item.fi-active>.fi-sidebar-item-button:hover,
.fi-sidebar-item-active .fi-sidebar-item-button:hover,
.fi-sidebar-item.fi-active>.fi-sidebar-item-btn:hover *,
.fi-sidebar-item.fi-active>.fi-sidebar-item-button:hover *,
.fi-sidebar-item-active .fi-sidebar-item-button:hover * {
    color: var(--sidebar-item-active-text) !important;
}

.fi-sidebar-group-label {
    color: rgba(255, 255, 255, 0.4) !important;
}

.fi-sidebar-item-icon {
    color: inherit !important;
}

body .fi-sidebar-footer {
    margin-top: auto !important;
}

/* Marketing Agent sidebar footer */
body .zv-agent-sidebar-footer {
    display: flex !important;
    flex-direction: column !important;
    margin-top: auto !important;
    padding: 0 1rem 1rem !important;
}

body .zv-agent-logout-form {
    margin: 0 !important;
}

body .zv-agent-logout-button {
    display: flex !important;
    width: 100% !important;
    align-items: center !important;
    gap: 0.75rem !important;
    border-radius: 0.5rem !important;
    padding: 0.625rem 0.75rem !important;
    color: #F87171 !important;
    font-size: 0.875rem !important;
    font-weight: 600 !important;
    text-align: left !important;
    transition: background-color 0.2s ease, color 0.2s ease !important;
}

body .zv-agent-logout-button * {
    color: #F87171 !important;
}

body .zv-agent-logout-button:hover {
    background-color: rgba(248, 113, 113, 0.12) !important;
    color: #FCA5A5 !important;
}

body .zv-agent-logout-button:hover * {
    color: #FCA5A5 !important;
}

body .zv-agent-logout-icon {
    width: 1.25rem !important;
    height: 1.25rem !important;
    flex-shrink: 0 !important;
    color: currentColor !important;
}

body .zv-agent-role-badge,
body .zv-admin-role-badge {
    width: fit-content !important;
    margin-top: 0.15rem !important;
    padding: 0.2rem 0.5rem !important;
    border-radius: 9999px !important;
    border: 1px solid rgba(201, 168, 76, 0.62) !important;
    background: linear-gradient(180deg, rgba(255, 247, 214, 0.98) 0%, rgba(231, 201, 93, 0.94) 100%) !important;
    color: #0B3F2B !important;
    box-shadow: none !important;
    font-size: 0.6rem !important;
    font-weight: 800 !important;
    letter-spacing: 0.1em !important;
    line-height: 1 !important;
    text-transform: uppercase !important;
}

/* Super Admin sidebar footer */
body .zv-admin-sidebar-footer {
    display: flex !important;
    flex-direction: column !important;
    margin-top: auto !important;
    padding: 0 1rem 1rem !important;
}

body .zv-admin-logout-button {
    display: flex !important;
    width: 100% !important;
    align-items: center !important;
    gap: 0.75rem !important;
    border-radius: 0.5rem !important;
    padding: 0.625rem 0.75rem !important;
    color: #F87171 !important;
    font-size: 0.875rem !important;
    font-weight: 600 !important;
    text-align: left !important;
    transition: background-color 0.2s ease, color 0.2s ease !important;
}

body .zv-admin-logout-button * {
    color: #F87171 !important;
}

body .zv-admin-logout-button:hover {
    background-color: rgba(248, 113, 113, 0.12) !important;
    color: #FCA5A5 !important;
}

body .zv-admin-logout-button:hover * {
    color: #FCA5A5 !important;
}

body .zv-admin-logout-icon {
    width: 1.25rem !important;
    height: 1.25rem !important;
    flex-shrink: 0 !important;
    color: currentColor !important;
}

/* Table Header Refinement */
body .fi-ta-header-cell {
    background-color: #F0F4F2 !important;
    border-bottom: 2px solid #D5E3DA !important;
}

body .fi-ta-header-cell-label {
    text-transform: uppercase !important;
    font-size: 0.7rem !important;
    letter-spacing: 0.05em !important;
    color: #0B5D3B !important;
    font-weight: 700 !important;
}

/* Table Row Spacing */
body .fi-ta-cell {
    padding-top: 1rem !important;
    padding-bottom: 1rem !important;
}

/* Action Ellipsis Button */
body .fi-ta-actions .fi-ta-action-group button {
    background: var(--bg-card) !important;
    border: 1px solid var(--border-divider) !important;
    border-radius: 0.5rem !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03) !important;
}

body .fi-input-wrp,
body .fi-select-input,
body .fi-textarea,
body .fi-fo-repeater-item,
body .fi-dropdown-panel,
body .fi-tabs,
body .fi-ta-header,
body .fi-ta-content,
body .fi-section-header {
    background-color: var(--bg-card) !important;
    border-color: var(--border-divider) !important;
}

body .fi-ta-row:hover,
body .fi-dropdown-list-item:hover,
body .fi-tabs-item:hover {
    background-color: var(--bg-muted) !important;
}

/* Status Pill Shape */
body .fi-badge {
    border-radius: 9999px !important;
}

[x-cloak] {
    display: none !important;
}

/* ==========================================================
   Property Details Drawer Custom Styles
   ========================================================== */
.fi-property-details-custom {
    --primary-600: #0B5D3B;
    --primary-500: #0F6B46;
    --text-dark: #111827;
    --text-gray: #6B7280;
    --text-light: #9CA3AF;
    --bg-white: #ffffff;
    --border-light: #f6efe3;
    --border-gray: #f1e7d9;
}

.fi-property-details-custom .text-primary-600 {
    color: var(--primary-600);
}

.fi-property-details-custom .bg-primary-600 {
    background-color: var(--primary-600);
}

.fi-property-details-custom .border-primary-600 {
    border-color: var(--primary-600);
}

.fi-property-details-custom .text-primary-500 {
    color: var(--primary-500);
}

/* Layout Utilities (since Tailwind might not be compiled for these) */
.fi-property-details-custom .d-grid {
    display: grid;
}

.fi-property-details-custom .grid-12 {
    grid-template-columns: repeat(12, minmax(0, 1fr));
}

.fi-property-details-custom .grid-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.fi-property-details-custom .col-8 {
    grid-column: span 8 / span 8;
}

.fi-property-details-custom .col-4 {
    grid-column: span 4 / span 4;
}

.fi-property-details-custom .d-flex {
    display: flex;
}

.fi-property-details-custom .flex-col {
    flex-direction: column;
}

.fi-property-details-custom .flex-wrap {
    flex-wrap: wrap;
}

.fi-property-details-custom .items-center {
    align-items: center;
}

.fi-property-details-custom .items-start {
    align-items: flex-start;
}

.fi-property-details-custom .justify-between {
    justify-content: space-between;
}

.fi-property-details-custom .gap-1 {
    gap: 0.25rem;
}

.fi-property-details-custom .gap-2 {
    gap: 0.5rem;
}

.fi-property-details-custom .gap-4 {
    gap: 1rem;
}

.fi-property-details-custom .gap-6 {
    gap: 1.5rem;
}

.fi-property-details-custom .mb-6 {
    margin-bottom: 1.5rem;
}

.fi-property-details-custom .w-full {
    width: 100%;
}

/* Gallery */
.property-gallery-main {
    height: 420px;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.property-gallery-side {
    height: 202px;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    position: relative;
    width: 100%;
}

.property-gallery-main img,
.property-gallery-side img {
    border-radius: 12px;
}

.property-gallery-overlay {
    position: absolute;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: 700;
    font-size: 1.25rem;
}

/* Header Info */
.property-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-dark);
    line-height: 1.2;
}

.property-id {
    font-size: 0.875rem;
    color: var(--text-light);
    text-transform: uppercase;
    font-weight: 600;
    letter-spacing: 0.05em;
}

.property-price {
    font-size: 1.875rem;
    font-weight: 900;
    color: var(--text-dark);
}

/* Final page-title override for Admin and Agent portals */
body .fi-header .fi-header-heading,
body .fi-header h1,
body .fi-header-heading-group h1,
body .zv-page-title-row .fi-header-heading,
body .zv-page-title-row h1 {
    color: #0B5D3B !important;
    font-size: 1.875rem !important;
    font-weight: 700 !important;
    letter-spacing: 0 !important;
    line-height: 2.25rem !important;
    text-transform: uppercase !important;
}

/* Specs */
.property-specs-row {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
    padding-bottom: 1.5rem;
    margin-bottom: 1.5rem;
    border-bottom: 1px solid var(--border-light);
}

.property-spec-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.property-spec-icon {
    width: 1.25rem;
    height: 1.25rem;
    color: var(--text-light);
}

.property-spec-text {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--text-dark);
}

/* Tabs */
.property-details-nav {
    display: flex;
    gap: 2rem;
    border-bottom: 1px solid var(--border-gray);
    margin-bottom: 1.5rem;
}

.property-details-nav-link {
    white-space: nowrap;
    padding: 1rem 0;
    border-bottom: 2px solid transparent;
    font-weight: 600;
    font-size: 0.875rem;
    transition: all 0.2s;
    color: var(--text-gray);
    background: none;
    cursor: pointer;
}

.property-details-nav-link.active {
    border-color: var(--primary-600);
    color: var(--primary-600);
}

.property-details-nav-link:hover:not(.active) {
    color: var(--text-dark);
    border-color: var(--text-light);
}

/* Info Cards */
.property-overview-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(280px, 0.75fr);
    gap: 1.5rem;
    align-items: start;
}

.property-info-card {
    background-color: var(--bg-white);
    padding: 1.5rem;
    border-radius: 1rem;
    border: 1px solid var(--border-gray);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.property-info-card-title {
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--text-dark);
    margin-bottom: 1rem;
}

.property-description-card {
    padding: 1.75rem;
}

.property-description-content {
    max-height: 168px;
    overflow: hidden;
    position: relative;
    color: #374151;
    font-size: 0.925rem;
    line-height: 1.75;
    transition: max-height 0.3s ease;
}

.property-description-content.is-expanded {
    max-height: none;
}

.property-description-content p {
    margin: 0 0 0.875rem;
}

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

.property-description-fade {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 3rem;
    background: linear-gradient(to top, var(--bg-white), rgba(255, 255, 255, 0));
}

.property-description-toggle {
    margin-top: 1rem;
    color: #0b5d3b;
    font-size: 0.8125rem;
    font-weight: 700;
    border: none;
    background: none;
    cursor: pointer;
    padding: 0;
}

/* Tables */
.property-info-table {
    width: 100%;
    font-size: 0.875rem;
}

.property-info-table td {
    padding: 0.75rem 0;
}

.property-info-table tr:not(:last-child) {
    border-bottom: 1px solid var(--border-light);
}

.property-info-label {
    color: var(--text-gray);
}

.property-info-value {
    text-align: right;
    font-weight: 500;
    color: var(--text-dark);
}

/* Actions Buttons */
.btn-action-outline {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    border: 1px solid var(--border-gray);
    border-radius: 0.75rem;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-dark);
    background: var(--bg-white);
    transition: background 0.2s;
    cursor: pointer;
}

.btn-action-outline:hover {
    background-color: var(--border-light);
}

/* Hide default sidebar header to place the logo inside SIDEBAR_NAV_START */
.fi-sidebar-header {
    display: none !important;
}

/* ==========================================================
   Tablet & Mobile Admin/Agent Responsiveness
   ========================================================== */
@media (max-width: 1024px) {
    html,
    body {
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: hidden !important;
    }

    body .fi-layout,
    body .fi-main,
    body .fi-main-ctn,
    body .fi-page,
    body .fi-page-content {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
    }

    body .fi-sidebar {
        position: fixed !important;
        inset-block-start: 0 !important;
        inset-inline-start: 0 !important;
        width: min(20rem, 86vw) !important;
        max-width: 86vw !important;
        height: 100dvh !important;
        z-index: 60 !important;
        overflow-y: auto !important;
        overscroll-behavior: contain !important;
    }

    body .fi-sidebar-nav {
        padding-bottom: 5.5rem !important;
    }

    body .fi-sidebar-item-button {
        margin-inline: 0.75rem !important;
        padding: 0.7rem 0.875rem !important;
    }

    body .fi-sidebar-item-label {
        min-width: 0 !important;
        white-space: normal !important;
        overflow-wrap: anywhere !important;
    }

    body .fi-topbar {
        left: 0 !important;
        inset-inline-start: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        min-height: 4rem !important;
        padding-inline: 0.75rem !important;
    }

    body .fi-topbar-start-ctn,
    body .fi-topbar-end-ctn {
        min-width: 0 !important;
        gap: 0.5rem !important;
    }

    body .fi-global-search {
        width: clamp(10rem, 45vw, 24rem) !important;
        max-width: 100% !important;
        margin-left: 0 !important;
    }

    body .fi-main-ctn {
        padding-left: 0 !important;
        padding-inline: 0 !important;
        padding-top: 4.75rem !important;
    }

    body .fi-main,
    body .fi-page {
        overflow-x: hidden !important;
    }

    body .fi-page {
        padding-inline: clamp(0.75rem, 2vw, 1.25rem) !important;
    }

    body .fi-header,
    body .fi-header-heading-group {
        min-width: 0 !important;
    }

    body .zv-page-title-row {
        width: 100% !important;
        max-width: 100% !important;
        align-items: flex-start !important;
        justify-content: space-between !important;
    }

    body .zv-page-title-row .fi-header-heading,
    body .zv-page-title-row h1,
    body .fi-header h1,
    body .fi-header-heading,
    body .fi-header-heading-group h1 {
        min-width: 0 !important;
        white-space: normal !important;
        overflow-wrap: anywhere !important;
        font-size: clamp(1.35rem, 3vw, 1.75rem) !important;
        line-height: 1.2 !important;
    }

    body .fi-header .fi-ac,
    body .fi-header-actions,
    body .fi-header .fi-header-actions {
        width: 100% !important;
        max-width: 100% !important;
        flex-wrap: wrap !important;
        gap: 0.5rem !important;
    }

    body .fi-section,
    body .fi-ta-ctn,
    body .fi-card {
        max-width: 100% !important;
        border-radius: 0.75rem !important;
    }

    body .fi-ta-ctn,
    body .fi-ta-content,
    body .fi-ta-table,
    body .fi-ta-table-ctn {
        max-width: 100% !important;
    }

    body .fi-ta-content,
    body .fi-ta-table-ctn,
    body .fi-ta-selection-cell,
    body .fi-ta-summary-row {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }

    body .fi-ta-header,
    body .fi-ta-filters,
    body .fi-ta-toolbar {
        min-width: 0 !important;
        flex-wrap: wrap !important;
        gap: 0.75rem !important;
    }

    body .fi-ta-header-toolbar,
    body .fi-ta-actions,
    body .fi-ta-filters .grid,
    body .fi-fo-component-ctn,
    body .fi-section-content .grid,
    body .fi-wi-stats-overview-stats-ctn {
        min-width: 0 !important;
    }

    body .fi-wi-stats-overview-stats-ctn:has(.zv-summary-stat),
    body .fi-wi-stats-overview-stats-ctn:has(.summary-item) {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    body .zv-page-help {
        position: relative !important;
        top: auto !important;
        right: auto !important;
        flex-shrink: 0 !important;
    }

    body .zv-page-help__tooltip {
        right: 0 !important;
        width: min(20rem, calc(100vw - 2rem)) !important;
    }
}

@media (max-width: 640px) {
    body .fi-topbar {
        padding-inline: 0.5rem !important;
    }

    body .fi-global-search,
    body .user-details-ctn {
        display: none !important;
    }

    body .fi-main-ctn {
        padding-top: 4.25rem !important;
    }

    body .fi-page {
        padding-inline: 0.625rem !important;
    }

    body .fi-header {
        gap: 0.5rem !important;
    }

    body .fi-header h1,
    body .fi-header-heading,
    body .fi-header-heading-group h1,
    body .zv-page-title-row .fi-header-heading,
    body .zv-page-title-row h1 {
        font-size: 1.25rem !important;
        line-height: 1.25 !important;
    }

    body .fi-header .fi-ac,
    body .fi-header-actions,
    body .fi-header .fi-header-actions,
    body .fi-ta-actions {
        align-items: stretch !important;
    }

    body .fi-header .fi-ac .fi-btn,
    body .fi-header-actions .fi-btn {
        flex: 1 1 auto !important;
        justify-content: center !important;
        min-width: 0 !important;
    }

    body .fi-wi-stats-overview-stats-ctn:has(.zv-summary-stat),
    body .fi-wi-stats-overview-stats-ctn:has(.summary-item) {
        grid-template-columns: 1fr !important;
    }

    body .fi-section,
    body .fi-ta-ctn,
    body .fi-card,
    body .fi-modal-window {
        border-radius: 0.625rem !important;
    }

    body .fi-modal-window {
        width: calc(100vw - 1rem) !important;
        max-width: calc(100vw - 1rem) !important;
        margin-inline: 0.5rem !important;
    }

    body .fi-ta-cell {
        padding-top: 0.75rem !important;
        padding-bottom: 0.75rem !important;
    }
}