/* ============================================
   Tom Select — always above blades, modals, and overlays
   ============================================ */
.ts-dropdown { z-index: 9999 !important; }
.ts-dropdown .option:hover,
.ts-dropdown .option.active { background-color: var(--accent-light) !important; color: inherit; }
.ts-email { color: #aaa; }

/* Dark mode */
[data-theme="dark"] .ts-dropdown,
[data-theme="dark"] .ts-wrapper .ts-dropdown {
    background-color: var(--bg-card) !important;
    border-color: var(--border-color) !important;
    color: var(--text-primary) !important;
}
[data-theme="dark"] .ts-dropdown .option {
    color: var(--text-primary) !important;
    background-color: transparent;
}
[data-theme="dark"] .ts-dropdown .option:hover,
[data-theme="dark"] .ts-dropdown .option.active {
    background-color: rgba(255,255,255,0.08) !important;
    color: var(--text-primary) !important;
}
[data-theme="dark"] .ts-wrapper .ts-control,
[data-theme="dark"] .ts-wrapper.single .ts-control {
    background-color: var(--bg-card) !important;
    border-color: var(--border-color) !important;
    color: var(--text-primary) !important;
}
[data-theme="dark"] .ts-email { color: #777; }

/* ============================================
   Dashboard map — dark mode filter
   invert(90%) darkens the map; hue-rotate(180deg) restores natural colours.
   ============================================ */
[data-theme="dark"] .dashboard-map-card iframe {
    filter: invert(90%) hue-rotate(180deg);
}

/* ============================================
   Responsive table column utilities
   Use these instead of Bootstrap d-*-table-cell to avoid specificity conflicts.
   col-hide-xs  : hidden <576px   (phones in portrait)
   col-hide-sm  : hidden <768px   (phones + small tablets)
   col-hide-md  : hidden <992px   (tablets)
   ============================================ */
@media (max-width: 575.98px) { .col-hide-xs  { display: none !important; } }
@media (max-width: 767.98px) { .col-hide-sm  { display: none !important; } }
@media (max-width: 991.98px) { .col-hide-md  { display: none !important; } }
/* Mobile-only transaction amount shown inline in Details cell */
.tx-mobile-amount { display: none; }
@media (max-width: 767.98px) { .tx-mobile-amount { display: inline; } }

html {
  font-size: 14px;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.15rem var(--primary);
}

.form-check-input:focus {
  box-shadow: 0 0 0 0.15rem rgba(var(--bs-primary-rgb), 0.25);
}

.form-switch .form-check-input:hover,
.form-switch .form-check-input:active {
    box-shadow: 0 0 0 2px rgba(var(--bs-primary-rgb), 0.3) !important;
    outline: none !important;
}

.form-switch .form-check-input:focus {
  box-shadow: 0 0 0 2px rgba(var(--bs-primary-rgb), 0.3) !important;
  outline: none !important;
}

/* Modern Toggle Switch Styles */
.form-switch {
    padding-left: 0;
    min-height: 1.5rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.form-switch .form-check-input {
    width: 2.5rem;
    height: 1.25rem;
    background-color: #ccc;
    border: none;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e");
    background-position: left 2px center;
    background-size: auto 70%;
    background-repeat: no-repeat;
    cursor: pointer;
    transition: background-color 0.2s ease-in-out, background-position 0.2s ease-in-out;
    margin: 0;
    flex-shrink: 0;
    border-radius: 2rem;
}

/* Form text (descriptions) alignment with switches */
.form-check.form-switch + .form-text,
.mb-3 > .form-check.form-switch + .form-text {
    margin-left: 4.4rem;
    margin-top: 0rem;
    font-size: 0.875rem;
    color: #6c757d;
}

/* Role item specific styling */
.role-item {
    display: block;
}

.role-item .form-check-label {
    font-size: 1rem;
}

.role-item .role-description {
    margin-left: 0rem;
    margin-top: 0.125rem;
    font-size: 0.8125rem;
    color: #6c757d;
}

/* Button overrides to use accent color */
.btn-primary {
    background-color: var(--primary);
    border-color: var(--primary);
}

.btn-primary:hover, .btn-primary:focus {
    background-color: var(--primary-hover);
    border-color: var(--primary-hover);
}

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

.btn-outline-primary:hover, .btn-outline-primary:focus {
    background-color: var(--primary);
    border-color: var(--primary);
}

html {
  position: relative;
  min-height: 100%;
  overflow-x: hidden;
}

body {
  margin-bottom: 60px;
  overflow-x: hidden;
}

/* Community Content Area */
.community-content {
    padding: 0.5rem 0rem;
    min-height: calc(100vh - 200px);
}

.community-content .card {
    border: 1px solid var(--border-color);
    box-shadow: var(--shadow-sm);
}

/* Content body - consistent padding for all community pages */
.content-body {
    padding: 0;
}

/* Page wrappers for consistent spacing */
.users-page,
.communities-page,
.notifications-page {
    padding: 0;
    max-width: 100%;
    margin: 0 auto;
}

.page-header {
    margin-bottom: 30px;
}

.page-header h1 {
    margin: 0;
    font-size: 28px;
    font-weight: 600;
}

.page-header .text-muted {
    color: #6c757d;
    margin-top: 5px;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .community-content {
        padding: 0.5rem 0;
    }

    .content-body {
        padding: 0 1rem;
    }


    /* Card headers that contain title + action buttons should wrap on mobile */
    .card-header.d-flex {
        flex-wrap: wrap;
        gap: 0.5rem;
    }
    .card-header.d-flex input[type="text"],
    .card-header.d-flex input[type="search"] {
        width: 100% !important;
        min-width: 0;
    }

    /* Community list rows: remove fixed min-width so they fit mobile width */
    .community-row-name {
        min-width: 0;
        flex: 1;
    }
    .community-row-meta {
        display: none;
    }
}

/* ============================================
   Stats Components
   ============================================ */

/* Stats Row - Grid layout for stat boxes */
.stats-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1.25rem;
    margin-bottom: 2rem;
}

/* Stat Box - Individual stat container */
.stat-box {
    background: white;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 1.25rem 1.5rem;
    transition: var(--transition-base);
}

.stat-box:hover {
    box-shadow: var(--shadow-sm);
}

/* Primary stat box variant */
.stat-box-primary {
    background: var(--primary);
    color: white;
    border-color: var(--primary);
}

.stat-box-primary:hover {
    box-shadow: 0 4px 12px rgba(0, 120, 212, 0.2);
}

/* Stat label */
.stat-label {
    font-size: 0.875rem;
    opacity: 0.9;
    margin-bottom: 0.5rem;
    font-weight: 500;
}

.stat-box-primary .stat-label {
    opacity: 0.95;
}

/* Stat value */
.stat-value {
    font-size: 2rem;
    font-weight: 700;
    line-height: 1;
}

/* Responsive stat boxes */
@media (max-width: 768px) {
    .stats-row {
        grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
        gap: 1rem;
    }

    .stat-box {
        padding: 1rem;
    }

    .stat-value {
        font-size: 1.5rem;
    }
}

/* ============================================
   Reusable Blade System
   ============================================ */

/* Blade Overlay - backdrop that dims the page */
.blade-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    display: none;
    backdrop-filter: blur(2px);
    z-index: 1050;
}

.blade-overlay.show {
    display: block;
    animation: fadeIn 0.2s ease-out;
}

/* Blade Panel - the sliding panel */
.blade-panel {
    position: fixed;
    top: 0;
    right: -600px;
    width: 600px;
    height: 100%;
    background: var(--card-bg, #fff);
    z-index: 1051;
    transition: right 0.3s ease-out, box-shadow 0.3s ease-out;
    display: flex;
    flex-direction: column;
}

.blade-panel.show {
    right: 0;
    box-shadow: -2px 0 12px rgba(0, 0, 0, 0.15);
}

/* Blade Header */
.blade-header {
    padding: 1.5rem;
    background: var(--primary, #0078d4);
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-shrink: 0;
}

.blade-header-content {
    flex: 1;
}

.blade-title {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 600;
    color: #ffffff !important;
    line-height: 1.2;
}

.blade-subtitle {
    margin: 0.25rem 0 0 0;
    font-size: 0.875rem;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.85) !important;
    line-height: 1.2;
}

.blade-header h3,
.blade-header h5 {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 600;
    color: #ffffff !important;
}

.blade-header .btn-close {
    filter: brightness(0) invert(1);
    opacity: 0.8;
    color: #ffffff !important;
}

.blade-header .btn-close:hover {
    opacity: 1;
}

/* Close button for inline blades */
.blade-close {
    background: transparent;
    border: none;
    color: #ffffff !important;
    font-size: 1.5rem;
    line-height: 1;
    cursor: pointer;
    padding: 0.25rem 0.5rem;
    opacity: 0.8;
    transition: opacity 0.2s;
}

.blade-close:hover {
    opacity: 1;
}

.blade-close i {
    display: block;
    color: #ffffff !important;
}

/* Blade Body - scrollable content area */
.blade-body {
    flex: 1;
    overflow-y: auto;
    padding: 1.5rem;
}

/* Support for tabbed forms within blade-body */
.blade-body .nav-tabs {
    position: sticky;
    top: 0;
    z-index: 10;
    border-bottom: 1px solid #dee2e6;
    margin-bottom: 0;
    background: #f8f9fa;
    padding: 0;
    margin: -1.5rem -1.5rem 0 -1.5rem;
    width: calc(100% + 3rem);
}

.blade-body .nav-tabs .nav-item {
    margin-bottom: 0;
}

.blade-body .nav-tabs .nav-link {
    border: none;
    border-bottom: 3px solid transparent;
    color: #6c757d;
    font-weight: 500;
    padding: 0.75rem 1.5rem;
    transition: all 0.2s;
    background: transparent;
    border-radius: 0;
    margin-bottom: -1px;
}

.blade-body .nav-tabs .nav-link:hover {
    color: var(--accent-primary, #0078d4);
    border-bottom-color: transparent;
    background: transparent;
}

.blade-body .nav-tabs .nav-link.active {
    color: var(--accent-primary, #0078d4);
    border-bottom-color: var(--accent-primary, #0078d4);
    background-color: transparent;
}

.blade-body .nav-tabs .nav-link i {
    font-size: 0.9rem;
}

.blade-body .tab-content {
    min-height: 300px;
    padding-top: 1.5rem;
}

/* When tabs are used, reduce body padding to accommodate negative margin */
.blade-body:has(.nav-tabs) {
    padding-top: 0;
}

/* Blade Footer */
.blade-footer {
    padding: 1rem 1.5rem;
    border-top: 1px solid var(--border-color, #dee2e6);
    background-color: var(--bg-body);
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
    flex-shrink: 0;
}

/* Blade Loading State */
.blade-loading {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 3rem;
}

.blade-loading .spinner-border {
    width: 3rem;
    height: 3rem;
}

/* Blade Error State */
.blade-error {
    padding: 2rem;
    text-align: center;
}

.blade-error i {
    font-size: 3rem;
    color: var(--danger, #dc3545);
    margin-bottom: 1rem;
}

/* Fade-in animation */
@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

/* ============================================
   Drag and Drop for Property Table
   ============================================ */

.property-row {
    transition: opacity 0.2s ease-in-out, background-color 0.2s ease-in-out;
    vertical-align: middle;
}

    .property-row:hover {
        background-color: var(--accent-light) !important;
    }


.property-row.dragging {
    opacity: 0.4;
}

.drag-handle {
    cursor: move !important;
    user-select: none;
}

.drag-handle:hover {
    background-color: rgba(0, 0, 0, 0.02);
}

.drag-handle i {
    font-size: 1.2rem;
}

/* ============================================
   Resident Table Row Hover
   ============================================ */

.resident-row {
    transition: background-color 0.2s ease-in-out;
    vertical-align: middle;
}

.resident-row:hover {
    background-color: var(--accent-light) !important;
}

/* ============================================
   Contact Table Row Hover
   ============================================ */

.contact-row {
    transition: background-color 0.2s ease-in-out;
    vertical-align: middle;
}

.contact-row:hover {
    background-color: var(--accent-light) !important;
}

/* ============================================
   Zone Table Row Hover (Billing)
   ============================================ */

.zone-row {
    transition: background-color 0.2s ease-in-out;
    vertical-align: middle;
}

.zone-row:hover {
    background-color: var(--accent-light) !important;
}

/* Blade Wrapper - contains the overlay and panel */
.blade {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1100;
    pointer-events: none;
}

.blade .blade-overlay,
.blade .blade-panel {
    pointer-events: auto;
}

/* Prevent scrolling when blade is open */
body.blade-open,
html.blade-open {
    overflow: hidden !important;
}

body.blade-open {
    padding-right: var(--scrollbar-width, 0);
}

/* Blade Close Button */
.blade-close {
    background: none;
    border: none;
    font-size: 1.5rem;
    line-height: 1;
    color: var(--text-secondary, #6c757d);
    cursor: pointer;
    padding: 0;
    width: 2rem;
    height: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 0.25rem;
    transition: all 0.2s ease;
}

.blade-close:hover {
    background-color: var(--hover-bg, #f8f9fa);
    color: var(--text-primary, #212529);
}

/* Mobile responsive - full width on small screens */
@media (max-width: 768px) {
    .blade-panel {
        right: -100%;
        width: 100%;
    }

    .blade-panel.show {
        right: 0;
    }
}

/* ============================================
   Dark Mode Styles
   ============================================ */

/* Stats Components - Dark Mode */
[data-theme="dark"] .stat-box {
    background: var(--bg-card);
    border-color: var(--border-color);
    color: var(--text-primary);
}

[data-theme="dark"] .stat-box:hover {
    box-shadow: var(--shadow-md);
}

[data-theme="dark"] .stat-box-primary {
    background: var(--accent-primary, var(--primary));
    border-color: var(--accent-primary, var(--primary));
    color: white;
}

[data-theme="dark"] .stat-label {
    color: var(--text-secondary);
}

[data-theme="dark"] .stat-box-primary .stat-label {
    color: rgba(255, 255, 255, 0.95);
}

/* Cards - Dark Mode */
[data-theme="dark"] .card {
    background: var(--bg-card);
    border-color: var(--border-color);
    color: var(--text-primary);
}

[data-theme="dark"] .card-header {
    background: var(--bg-card);
    border-color: var(--border-color);
    color: var(--text-primary);
}

[data-theme="dark"] .card-body {
    background: var(--bg-card);
    color: var(--text-primary);
}

[data-theme="dark"] .card-footer {
    background: var(--bg-card);
    border-color: var(--border-color);
    color: var(--text-secondary);
}

/* Tables — accent-light row hover (matches community dropdown), light mode only */
.table {
    --bs-table-hover-bg: var(--accent-light);
}

/* Tables - Dark Mode */
[data-theme="dark"] .table {
    color: var(--text-primary);
    border-color: rgba(255, 255, 255, 0.07) !important;
    /* Override the Bootstrap hover variable so td cells get the dark value */
    --bs-table-hover-bg: rgba(255, 255, 255, 0.05);
}

[data-theme="dark"] .table thead th {
    background: var(--bg-card);
    color: var(--text-primary);
    border-color: rgba(255, 255, 255, 0.07) !important;
}

[data-theme="dark"] .table tbody td {
    background: var(--bg-card);
    color: var(--text-primary);
    border-color: rgba(255, 255, 255, 0.07) !important;
}

[data-theme="dark"] .table-striped tbody tr:nth-of-type(odd) {
    background: rgba(255, 255, 255, 0.02);
}

[data-theme="dark"] .table-light {
    --bs-table-bg: var(--bg-card);
    --bs-table-color: var(--text-primary);
    --bs-table-border-color: var(--border-color);
    --bs-table-striped-bg: var(--bg-body);
    --bs-table-hover-bg: rgba(255, 255, 255, 0.05);
}

/* Dark mode: also override the tr-level backgrounds for named row classes */
[data-theme="dark"] .property-row:hover,
[data-theme="dark"] .resident-row:hover,
[data-theme="dark"] .contact-row:hover,
[data-theme="dark"] .zone-row:hover {
    background-color: rgba(255, 255, 255, 0.05) !important;
}

/* Forms - Dark Mode */
[data-theme="dark"] .form-control,
[data-theme="dark"] .form-select {
    background-color: var(--bg-card);
    border-color: var(--border-hover);
    color: var(--text-primary);
}

/* Persistent chevron for selects — survives focus/selected states */
[data-theme="dark"] .form-select,
[data-theme="dark"] .form-select:focus {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23a19f9d' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    background-size: 16px 12px;
}

[data-theme="dark"] .form-control:focus {
    background-color: var(--bg-card);
    border-color: var(--accent-primary, var(--primary));
    color: var(--text-primary);
    box-shadow: 0 0 0 0.25rem rgba(0, 120, 212, 0.25);
}

[data-theme="dark"] .form-select:focus {
    background-color: var(--bg-card);
    border-color: var(--accent-primary, var(--primary));
    color: var(--text-primary);
    box-shadow: 0 0 0 0.25rem rgba(0, 120, 212, 0.25);
}

[data-theme="dark"] .form-control::placeholder {
    color: var(--text-muted);
}

[data-theme="dark"] input[type="date"],
[data-theme="dark"] input[type="datetime-local"],
[data-theme="dark"] input[type="time"],
[data-theme="dark"] input[type="month"],
[data-theme="dark"] input[type="week"] {
    color-scheme: dark;
}

[data-theme="dark"] input[type="date"]::-webkit-calendar-picker-indicator,
[data-theme="dark"] input[type="datetime-local"]::-webkit-calendar-picker-indicator,
[data-theme="dark"] input[type="time"]::-webkit-calendar-picker-indicator,
[data-theme="dark"] input[type="month"]::-webkit-calendar-picker-indicator,
[data-theme="dark"] input[type="week"]::-webkit-calendar-picker-indicator {
    background-color: transparent;
    cursor: pointer;
}

[data-theme="dark"] .form-label {
    color: var(--text-primary);
}

[data-theme="dark"] .form-text {
    color: var(--text-muted);
}

/* Input Groups - Dark Mode */
[data-theme="dark"] .input-group-text {
    background: var(--bg-card);
    border-color: var(--border-color);
    color: var(--text-primary);
}

/* Dropdowns - Dark Mode */
[data-theme="dark"] .dropdown-menu {
    background: var(--bg-card);
    border-color: var(--border-color);
    /* Override Bootstrap's hardcoded dark link colour */
    --bs-dropdown-link-color: var(--text-primary);
    --bs-dropdown-link-hover-color: var(--text-primary);
    --bs-dropdown-link-hover-bg: rgba(255, 255, 255, 0.06);
    --bs-dropdown-color: var(--text-primary);
    color: var(--text-primary);
}

[data-theme="dark"] .dropdown-item {
    color: var(--text-primary) !important;
}

[data-theme="dark"] .dropdown-item:hover,
[data-theme="dark"] .dropdown-item:focus {
    background: rgba(255, 255, 255, 0.06) !important;
    color: var(--text-primary) !important;
}

[data-theme="dark"] .dropdown-divider {
    border-color: var(--border-color);
}

[data-theme="dark"] .dropdown-section-title,
[data-theme="dark"] .dropdown-header-name,
[data-theme="dark"] .dropdown-header-email {
    color: var(--text-secondary) !important;
}

/* Modals - Dark Mode */
[data-theme="dark"] .modal-content {
    background: var(--bg-card);
    border-color: var(--border-color);
}

[data-theme="dark"] .modal-header {
    background: var(--bg-card);
    border-color: var(--border-color);
    color: var(--text-primary);
}

[data-theme="dark"] .modal-body {
    background: var(--bg-card);
    color: var(--text-primary);
}

[data-theme="dark"] .modal-footer {
    background: var(--bg-card);
    border-color: var(--border-color);
}

[data-theme="dark"] .modal-title {
    color: var(--text-primary);
}

[data-theme="dark"] .btn-close {
    filter: invert(1);
}

/* Blades - Dark Mode */
[data-theme="dark"] .blade-panel {
    background: var(--bg-card);
}

[data-theme="dark"] .blade-panel.show {
    box-shadow: -2px 0 12px rgba(0, 0, 0, 0.6);
}

[data-theme="dark"] .blade-header {
    background: var(--accent-primary);
    border-color: rgba(255, 255, 255, 0.15);
}

[data-theme="dark"] .blade-body {
    background: var(--bg-card);
    color: var(--text-primary);
}

[data-theme="dark"] .blade-body .nav-tabs {
    background: var(--bg-body);
    border-bottom-color: var(--border-color);
}

[data-theme="dark"] .blade-body .nav-tabs .nav-link {
    color: var(--text-secondary);
}

[data-theme="dark"] .blade-body .nav-tabs .nav-link:hover {
    color: var(--accent-primary);
    background: transparent;
}

[data-theme="dark"] .blade-body .nav-tabs .nav-link.active {
    color: var(--accent-primary);
    border-bottom-color: var(--accent-primary);
    background: transparent;
}

[data-theme="dark"] .blade-footer {
    background: var(--bg-body);
    border-color: var(--border-color);
}

/* ============================================
   Domain-grouped Users List (SuperAdmin view)
   ============================================ */
.domain-group-header td {
    background: transparent !important;
    color: var(--text-secondary);
    font-weight: 600;
    font-size: 0.85rem;
    letter-spacing: 0.04em;
    padding: 0.55rem 1rem;
    border: none !important;
    border-top: 1px solid var(--border-color) !important;
    cursor: pointer;
    user-select: none;
}

.domain-group-header td:hover {
    filter: brightness(1.08);
}

.domain-group-header .domain-group-icon {
    opacity: 0.85;
    margin-right: 0.4rem;
}

.domain-group-header .domain-chevron {
    float: right;
    transition: transform 0.2s ease;
    opacity: 0.8;
}

.domain-group-header.collapsed .domain-chevron {
    transform: rotate(-90deg);
}

.domain-group-row {
    transition: opacity 0.15s ease;
}

.domain-group-row.group-hidden {
    display: none;
}


/* Each group is a <tbody data-group="..."> — kill Bootstrap's thick inter-tbody border */
.users-table {
    --bs-table-border-color: var(--border-color, #dedede);
    border-collapse: collapse;
}

.users-table tbody + tbody {
    border-top: 1px solid var(--border-color, #dedede) !important;
}

.users-table tbody tr {
    border-bottom: 1px solid var(--border-color, #dedede);
}

[data-theme="dark"] .users-table tbody tr {
    border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
}

[data-theme="dark"] .users-table {
    --bs-table-border-color: rgba(255, 255, 255, 0.07);
    border-color: rgba(255, 255, 255, 0.07);
}

[data-theme="dark"] .users-table tbody + tbody {
    border-top: 1px solid rgba(255, 255, 255, 0.07) !important;
}

/* ============================================
   Count Badge — global numeric count pill
   Used for community counts, property counts, etc.
   ============================================ */
.count-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.3rem 0.6rem;
    background-color: var(--accent-primary, #0078d4);
    color: #fff;
    font-size: 0.7rem;
    font-weight: 600;
    border-radius: 6px;
    line-height: 1;
}

[data-theme="dark"] .count-badge {
    background-color: var(--accent-primary, var(--primary));
    color: #fff;
}

.count-badge--grey {
    background-color: #adb5bd;
    color: #fff;
}

.count-badge--red {
    background-color: #dc3545;
    color: #fff;
}

.count-badge--green {
    background-color: #198754;
    color: #fff;
}

/* Badges - Dark Mode */
[data-theme="dark"] .badge {
    background: rgba(255, 255, 255, 0.1);
    color: var(--text-primary);
}

[data-theme="dark"] .badge.bg-primary {
    background: var(--accent-primary, var(--primary)) !important;
    color: white;
}

[data-theme="dark"] .badge.bg-success {
    background: var(--success) !important;
    color: white;
}

[data-theme="dark"] .badge.bg-danger {
    background: var(--danger) !important;
    color: white;
}

[data-theme="dark"] .badge.bg-warning {
    background: var(--warning) !important;
    color: #323130;
}

[data-theme="dark"] .badge.bg-info {
    background: var(--info) !important;
    color: white;
}

[data-theme="dark"] .badge.bg-secondary {
    background: var(--secondary) !important;
    color: white;
}

/* Alerts - Dark Mode */
[data-theme="dark"] .alert {
    background: var(--bg-card);
    border-color: var(--border-color);
    color: var(--text-primary);
}

[data-theme="dark"] .alert-primary {
    background: rgba(0, 120, 212, 0.2);
    border-color: var(--accent-primary, var(--primary));
    color: var(--text-primary);
}

[data-theme="dark"] .alert-success {
    background: rgba(16, 124, 16, 0.2);
    border-color: var(--success);
    color: var(--text-primary);
}

[data-theme="dark"] .alert-danger {
    background: rgba(209, 52, 56, 0.2);
    border-color: var(--danger);
    color: var(--text-primary);
}

[data-theme="dark"] .alert-warning {
    background: rgba(255, 185, 0, 0.2);
    border-color: var(--warning);
    color: var(--text-primary);
}

/* List Groups - Dark Mode */
[data-theme="dark"] .list-group-item {
    background: var(--bg-card);
    border-color: var(--border-color);
    color: var(--text-primary);
}

[data-theme="dark"] .list-group-item:hover {
    background: rgba(255, 255, 255, 0.05);
}

[data-theme="dark"] .list-group-item.active {
    background: var(--accent-primary, var(--primary));
    border-color: var(--accent-primary, var(--primary));
    color: white;
}

/* Pagination - Dark Mode */
[data-theme="dark"] .pagination .page-link {
    background: var(--bg-card);
    border-color: var(--border-color);
    color: var(--text-primary);
}

[data-theme="dark"] .pagination .page-link:hover {
    background: rgba(255, 255, 255, 0.05);
    border-color: var(--border-hover);
    color: var(--text-primary);
}

[data-theme="dark"] .pagination .page-item.active .page-link {
    background: var(--accent-primary, var(--primary));
    border-color: var(--accent-primary, var(--primary));
    color: white;
}

[data-theme="dark"] .pagination .page-item.disabled .page-link {
    background: var(--bg-card);
    border-color: var(--border-color);
    color: var(--text-muted);
}

/* Breadcrumbs - Dark Mode */
[data-theme="dark"] .breadcrumb {
    background: var(--bg-card);
}

[data-theme="dark"] .breadcrumb-item {
    color: var(--text-secondary);
}

[data-theme="dark"] .breadcrumb-item.active {
    color: var(--text-primary);
}

/* Tabs - Dark Mode */
[data-theme="dark"] .nav-tabs {
    border-color: var(--border-color);
}

[data-theme="dark"] .nav-tabs .nav-link {
    color: var(--text-secondary);
    border-color: transparent;
}

[data-theme="dark"] .nav-tabs .nav-link:hover {
    border-color: var(--border-color);
    color: var(--text-primary);
}

[data-theme="dark"] .nav-tabs .nav-link.active {
    background: var(--bg-card);
    border-color: var(--border-color) var(--border-color) var(--bg-card);
    color: var(--text-primary);
}

[data-theme="dark"] .blade-body .tab-content,
[data-theme="dark"] .modal .tab-content {
    background: var(--bg-card);
    color: var(--text-primary);
}

/* Progress Bars - Dark Mode */
[data-theme="dark"] .progress {
    background: rgba(255, 255, 255, 0.1);
}

[data-theme="dark"] .progress-bar {
    background: var(--accent-primary, var(--primary));
}

/* Tooltips & Popovers - Dark Mode */
[data-theme="dark"] .tooltip-inner {
    background: #323130;
    color: white;
}

[data-theme="dark"] .popover {
    background: var(--bg-card);
    border-color: var(--border-color);
}

[data-theme="dark"] .popover-header {
    background: var(--bg-card);
    border-color: var(--border-color);
    color: var(--text-primary);
}

[data-theme="dark"] .popover-body {
    color: var(--text-primary);
}

/* Spinners - Dark Mode */
[data-theme="dark"] .spinner-border,
[data-theme="dark"] .spinner-grow {
    color: var(--text-primary);
}

/* Community Content - Dark Mode */
[data-theme="dark"] .community-content {
    background: var(--bg-body);
    color: var(--text-primary);
}

[data-theme="dark"] .content-body {
    background: var(--bg-body);
}

/* Search/Filter Bars - Dark Mode */
[data-theme="dark"] .search-bar,
[data-theme="dark"] .filter-bar {
    background: var(--bg-card);
    border-color: var(--border-color);
}

/* HR - Dark Mode */
[data-theme="dark"] hr {
    border-color: var(--border-color);
    opacity: 1;
}

/* Text Colors - Dark Mode */
[data-theme="dark"] .text-muted {
    color: var(--text-muted) !important;
}

[data-theme="dark"] .text-secondary {
    color: var(--text-secondary) !important;
}

/* Border Colors - Dark Mode */
[data-theme="dark"] .border {
    border-color: var(--border-color) !important;
}

/* Background Colors - Dark Mode */
[data-theme="dark"] .bg-light {
    background: rgba(255, 255, 255, 0.05) !important;
}

[data-theme="dark"] .badge.bg-light {
    color: rgba(255, 255, 255, 0.85) !important;
}

[data-theme="dark"] .bg-white {
    background: var(--bg-card) !important;
}

/* Drag Handle - Dark Mode */
[data-theme="dark"] .drag-handle:hover {
    background-color: rgba(255, 255, 255, 0.05);
}

/* =============================================================
   LOADING MARK — reusable Propia logo + spinner ring, shown anywhere
   the system needs a "working" state (wizard finishing steps, blade
   loads, full-page transitions). Build the markup with
   LoadingMark.html(size) in site.js. Preview at different sizes:
   Settings > Area 51 > UI Components.
   Resize with the size argument, or by setting --loading-mark-size
   directly on a .loading-mark element. Default is 130px.
   ============================================================= */
.loading-mark {
    --loading-mark-size: 130px;
    position: relative;
    width: var(--loading-mark-size);
    height: var(--loading-mark-size);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
}

/* The logo's own fill is a gradient between --accent-primary and --accent-hover, set inline via
   <stop style="stop-color:..."> in LoadingMark.html() (site.js) rather than the stop-color
   attribute, since only the style form participates in the CSS cascade and resolves var(). Both
   theme-safe — see CLAUDE.md's --accent-light caveat, which doesn't apply to these two — so the
   mark follows the user's chosen accent instead of a fixed brand blue. */
.loading-mark__logo {
    width: calc(var(--loading-mark-size) * 0.646);
    height: auto;
    position: relative;
    z-index: 1;
}

/* Ring sits absolutely within the (fixed-size, centered) wrapper so it forms a ring around the
   logo rather than sitting below it — both share the same center point, with the ring's
   diameter equal to the wrapper so there's a visible gap around the logo. A conic-gradient +
   radial-gradient mask (rather than a flat border-top-color trick) so it can sweep through the
   same two accent tones as the logo instead of a single flat colour.
   The transparent→solid fade is compressed into the first 45deg (rather than a full 90deg) and
   the band is 4px rather than 3px — at small --loading-mark-size values the old wider, softer
   fade left most of the ring looking like an antialiased smudge instead of a crisp arc. */
.loading-mark__ring {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: conic-gradient(from 0deg, transparent 0deg, var(--accent-primary, #0078d4) 45deg, var(--accent-hover, #106ebe) 360deg);
    -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #000 calc(100% - 4px));
    mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #000 calc(100% - 4px));
    animation: loading-mark-spin .7s linear infinite;
}

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