@import 'modal.css';
@import 'components.css';
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700&display=swap');

/* Mobile Bottom Navigation - Floating Pill */
.bottom-nav {
    display: flex;
    position: fixed;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%);
    width: 90%;
    max-width: 400px;
    background: var(--bg-card);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border: 1px solid var(--border-color);
    border-radius: 40px;
    padding: 14px 20px;
    justify-content: space-around;
    align-items: center;
    z-index: 2100;
    box-shadow: var(--glass-shadow), var(--glass-glow);
}

.bottom-nav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    color: var(--text-muted);
    text-decoration: none;
    font-size: 0.7rem;
    font-weight: 500;
    transition: all 0.3s;
    background: none;
    border: none;
    cursor: pointer;
    position: relative;
    padding: 8px 12px;
    border-radius: 20px;
}

.bottom-nav-item.active {
    color: var(--primary);
    background: var(--primary-soft);
}

.bottom-nav-icon {
    width: 22px;
    height: 22px;
    stroke: var(--text-muted);
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: stroke 0.3s;
}

.bottom-nav-item.active .bottom-nav-icon {
    stroke: var(--primary);
}





:root {
    /* Color Palette - Jirani Dark Liquid Glass Theme */
    --bg-body: #0c111d;
    /* Deep rich dark background */
    --bg-sidebar: rgba(12, 17, 29, 0.6);
    --bg-card: rgba(17, 24, 39, 0.45);
    /* Translucent dark for glassmorphism */
    --bg-surface: rgba(31, 41, 55, 0.3);

    /* Primary & Accents */
    --primary: #FF5A5F;
    /* Jirani Coral */
    --primary-hover: #ff4449;
    --primary-soft: rgba(255, 90, 95, 0.15);

    /* Text Colors */
    --text-main: #f8fafc;
    /* Sharp clear white */
    --text-muted: #94a3b8;
    /* Cool readable grey */
    --text-light: #cbd5e1;

    /* Borders & Dividers */
    --border-color: rgba(255, 255, 255, 0.08);
    /* Very subtle borders */
    --border-subtle: rgba(255, 255, 255, 0.04);

    /* Liquid Glass Effects */
    --glass-blur: blur(16px);
    --glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
    --glass-glow: inset 0 1px 0 rgba(255, 255, 255, 0.1), inset 0 0 20px rgba(255, 255, 255, 0.02);

    /* Status Colors */
    --success: #10b981;
    --warning: #f59e0b;
    --danger: #ef4444;
    --info: #3b82f6;

    /* Dimensions & Effects */
    --sidebar-width: 260px;
    --header-height: 80px;
    --radius-sm: 12px;
    --radius-md: 16px;
    --radius-lg: 24px;
    --radius-xl: 32px;
    --radius-pill: 999px;

    --shadow-sm: 0 4px 12px rgba(0, 0, 0, 0.1);
    --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.15);
    --shadow-lg: 0 16px 40px rgba(0, 0, 0, 0.2);
    --shadow-card: var(--glass-shadow);

    --property-overlay-start: rgba(12, 17, 29, 0.95);
    --property-overlay-end: rgba(12, 17, 29, 0.7);
    --property-title-color: #ffffff;
    --property-meta-color: rgba(255, 255, 255, 0.8);
    --property-stat-bg: rgba(255, 255, 255, 0.1);
    --property-stat-icon: rgba(255, 255, 255, 0.9);
    --property-stat-label: rgba(255, 255, 255, 0.6);
    --property-divider: rgba(255, 255, 255, 0.1);
    --property-image-border: rgba(255, 255, 255, 0.15);
    --property-image-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
    --property-action-bg: rgba(255, 255, 255, 0.15);
    --property-action-border: rgba(255, 255, 255, 0.2);
    --property-action-color: #ffffff;
    --property-delete-bg: rgba(239, 68, 68, 0.2);
    --property-delete-border: rgba(239, 68, 68, 0.4);
    --property-delete-color: #fca5a5;

    --analytics-hero-bg: #1a1c23;
    --analytics-hero-border: rgba(255, 255, 255, 0.05);
    --analytics-hero-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    --analytics-hero-hover-shadow: 0 12px 40px rgba(255, 90, 95, 0.15);
    --analytics-hero-text: #ffffff;
    --analytics-hero-label: rgba(255, 255, 255, 0.72);

    --task-meta-bg: rgba(0, 0, 0, 0.2);
    --task-meta-text: var(--text-light);
    --task-avatar-bg: #e2e8f0;
    --task-avatar-color: #334155;
}

:root[data-theme='light'] {
    --bg-body: #f3f6fb;
    --bg-sidebar: rgba(255, 255, 255, 0.85);
    --bg-card: rgba(255, 255, 255, 0.86);
    --bg-surface: rgba(255, 255, 255, 0.72);

    --text-main: #0f172a;
    --text-muted: #475569;
    --text-light: #64748b;

    --border-color: rgba(15, 23, 42, 0.12);
    --border-subtle: rgba(15, 23, 42, 0.08);

    --glass-shadow: 0 8px 24px rgba(15, 23, 42, 0.08);
    --glass-glow: inset 0 1px 0 rgba(255, 255, 255, 0.7), inset 0 0 16px rgba(15, 23, 42, 0.02);

    --property-overlay-start: rgba(255, 255, 255, 0.9);
    --property-overlay-end: rgba(241, 245, 249, 0.76);
    --property-title-color: #0f172a;
    --property-meta-color: #475569;
    --property-stat-bg: rgba(15, 23, 42, 0.06);
    --property-stat-icon: #475569;
    --property-stat-label: #64748b;
    --property-divider: rgba(15, 23, 42, 0.08);
    --property-image-border: rgba(255, 255, 255, 0.65);
    --property-image-shadow: 0 8px 18px rgba(15, 23, 42, 0.12);
    --property-action-bg: rgba(255, 255, 255, 0.78);
    --property-action-border: rgba(15, 23, 42, 0.12);
    --property-action-color: #0f172a;
    --property-delete-bg: rgba(239, 68, 68, 0.08);
    --property-delete-border: rgba(239, 68, 68, 0.3);
    --property-delete-color: #dc2626;

    --analytics-hero-bg: linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(248, 250, 252, 0.9));
    --analytics-hero-border: rgba(15, 23, 42, 0.08);
    --analytics-hero-shadow: 0 12px 30px rgba(15, 23, 42, 0.08);
    --analytics-hero-hover-shadow: 0 18px 36px rgba(255, 90, 95, 0.12);
    --analytics-hero-text: #0f172a;
    --analytics-hero-label: #64748b;

    --task-meta-bg: rgba(15, 23, 42, 0.08);
    --task-meta-text: #64748b;
    --task-avatar-bg: rgba(15, 23, 42, 0.08);
    --task-avatar-color: #475569;
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: 'Roboto', sans-serif;
    background-color: var(--bg-body);
    background-image: radial-gradient(ellipse at top center, rgba(255, 90, 95, 0.20) 0%, transparent 80%);
    color: var(--text-main);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    overflow: hidden;
    /* Prevent body scroll */
    width: 100%;
    height: 100%;
    /* Full height */
    overscroll-behavior: none;
    /* Prevent bounce */
}

:root[data-theme='light'] body {
    background-image: radial-gradient(ellipse at top center, rgba(255, 90, 95, 0.10) 0%, transparent 75%);
}

/* Layout - Mobile First */
.layout-sidebar {
    display: block;
    height: 100%;
}

.app-shell {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    overflow: hidden;
    position: fixed;
    /* Force viewport constraint */
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

/* Sidebar - Hidden on Mobile */
.sidebar {
    width: var(--sidebar-width);
    background-color: var(--bg-sidebar);
    border-right: none;
    display: none;
    /* Hidden by default */
    flex-direction: column;
    padding: 24px;
    position: fixed;
    height: 100vh;
    z-index: 1000;
    box-shadow: 2px 0 20px rgba(0, 0, 0, 0.02);
    overflow-y: auto;
}

/* Scrollbar Styling for Sidebar */
.sidebar::-webkit-scrollbar {
    width: 6px;
}

.sidebar::-webkit-scrollbar-track {
    background: transparent;
}

.sidebar::-webkit-scrollbar-thumb {
    background-color: var(--border-subtle);
    border-radius: 20px;
}

.sidebar-brand {
    font-size: 1.8rem;
    font-weight: 800;
    color: var(--primary);
    /* Brand color for logo */
    margin-bottom: 40px;
    display: flex;
    align-items: center;
    gap: 8px;
    letter-spacing: -0.03em;
}

.sidebar-brand span {
    color: var(--primary);
}

.sidebar-nav {
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 1;
}

.nav-link {
    display: flex;
    align-items: center;
    padding: 14px 20px;
    color: var(--text-muted);
    text-decoration: none;
    border-radius: var(--radius-pill);
    /* Pill shape nav items */
    font-weight: 600;
    transition: all 0.2s ease;
}

.nav-link:hover {
    background-color: var(--bg-body);
    color: var(--primary);
}

.nav-link.active {
    background-color: var(--primary);
    /* Solid active state */
    color: white;
    font-weight: 600;
    box-shadow: 0 4px 12px rgba(255, 90, 95, 0.3);
}

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

/* Main Content - Full Width on Mobile */
.main {
    flex: 1;
    margin-left: 0;
    display: grid;
    grid-template-columns: 100%;
    grid-template-rows: auto 1fr;
    width: 100%;
    height: 100%;
    overflow: hidden;
    position: relative;
    min-height: 0;
    /* Important for nested flex scrolling */
}

.topbar {
    height: var(--header-height);
    background: transparent;
    position: relative;
    z-index: 30000;
    border-bottom: 1px solid var(--border-color);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 16px;
    flex-shrink: 0;
    width: 100%;
}

.topbar-title {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--text-main);
}

.user-badge {
    display: flex;
    align-items: center;
    gap: 12px;
    background: var(--bg-card);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    padding: 6px 16px 6px 6px;
    border-radius: var(--radius-pill);
    box-shadow: var(--glass-shadow), var(--glass-glow);
    border: 1px solid var(--border-color);
    cursor: pointer;
    transition: transform 0.2s;
}

.user-badge:hover {
    transform: translateY(-1px);
    box-shadow: var(--shadow-lg);
}

.user-avatar {
    width: 36px;
    height: 36px;
    background-color: var(--primary);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 0.9rem;
}

.user-text {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
}

.user-name {
    font-weight: 600;
    font-size: 0.9rem;
}

.user-role {
    color: var(--text-muted);
    font-size: 0.8rem;
}

/* Profile Dropdown */
.user-badge-container {
    position: relative;
}

.dropdown-menu {
    position: fixed;
    top: 75px;
    right: 16px;
    margin-top: 8px;
    background: var(--bg-card);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border-radius: var(--radius-md);
    box-shadow: var(--glass-shadow), var(--glass-glow);
    border: 1px solid var(--border-color);
    min-width: 180px;
    display: none;
    z-index: 10000;
    overflow: hidden;
    animation: fadeIn 0.2s ease;
}

.dropdown-menu.show {
    display: block;
}

.dropdown-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 16px;
    color: var(--text-main);
    text-decoration: none;
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.2s;
}

.dropdown-item:hover {
    background-color: var(--bg-surface);
    color: var(--primary);
}

.dropdown-item.danger {
    color: var(--danger);
}

.dropdown-item.danger:hover {
    background-color: rgba(239, 68, 68, 0.1);
}

/* Content Area */
.content {
    padding: 8px 16px 90px 16px;
    /* Increased bottom padding for fixed nav */
    max-width: 1400px;
    width: 100%;
    margin-top: 0;
    /* Removed margin-top */
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    height: 100%;
    /* Force height to fill flex space */
    min-height: 0;
    /* Allow shrinking for scroll */
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-y: contain;
    /* Better scroll experience */
}

.page-header {
    margin-bottom: 16px;
    margin-top: 8px;
    /* Slight top margin for breathing room but less than before */
}

.section {
    display: none;
    animation: fadeIn 0.3s ease;
    margin-top: 0px;
    margin-bottom: 80px;
}

.section.active {
    display: block;
}

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

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

/* Cards */
.card {
    background-color: var(--bg-card);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border-radius: var(--radius-lg);
    padding: 16px;
    box-shadow: var(--glass-shadow), var(--glass-glow);
    border: 1px solid var(--border-color);
    transition: transform 0.3s, box-shadow 0.3s, border-color 0.3s;
    margin-bottom: 24px;
    overflow: hidden;
}

/* Responsive Images */
img,
video {
    max-width: 100%;
    height: auto;
}

.card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.08);
}

.card h2,
.card h3 {
    margin-bottom: 16px;
    color: var(--text-main);
    font-weight: 700;
}

/* Grid System - Mobile First */
.grid {
    display: grid;
    gap: 16px;
    grid-template-columns: 1fr;
    /* Single column default */
}

.grid-2,
.grid-3,
.grid-4 {
    grid-template-columns: 1fr;
}

/* Desktop Media Query */
@media (min-width: 769px) {
    .dropdown-menu {
        position: absolute;
        top: 100%;
        right: 0;
        width: auto;
    }

    .sidebar {
        display: flex;
    }

    .main {
        margin-left: var(--sidebar-width);
    }

    .topbar {
        padding: 0 32px;
        /* Removed left/right/position overrides as they are now relative */
    }

    .content {
        padding: 32px;
        padding-bottom: 32px;
    }

    .card {
        padding: 28px;
        /* Restore desktop padding */
    }

    .bottom-nav {
        display: none !important;
    }

    .grid {
        gap: 24px;
    }

    .grid-2 {
        grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
    }

    .grid-3 {
        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    }

    .grid-4 {
        grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    }
}

/* Typography Helpers */
.small-muted {
    font-size: 0.875rem;
    color: var(--text-muted);
}

.stat-value {
    font-size: 2rem;
    font-weight: 700;
    color: var(--primary);
    /* Coral for stats */
    margin: 8px 0;
}

/* Buttons */
.auth-btn {
    background-color: var(--primary);
    color: white;
    border: none;
    padding: 12px 24px;
    border-radius: var(--radius-pill);
    font-weight: 600;
    font-size: 1rem;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 14px rgba(255, 90, 95, 0.4);
    /* Vibrant shadow */
    width: auto;
    text-align: center;
    position: relative;
    z-index: 2000;
    /* Ensure it's above sidebar/topbar but below modal */
}

.auth-btn:hover {
    background-color: var(--primary-hover);
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(255, 90, 95, 0.6);
}

.magic-outline-btn {
    background:
        linear-gradient(var(--bg-card), var(--bg-card)) padding-box,
        linear-gradient(120deg, rgba(255, 90, 95, 0.95), rgba(255, 128, 102, 0.9), rgba(255, 90, 95, 0.95)) border-box;
    border: 1px solid transparent;
    color: var(--text-main);
    box-shadow: 0 6px 16px rgba(255, 90, 95, 0.18);
}

.magic-outline-btn:hover {
    background:
        linear-gradient(var(--bg-card), var(--bg-card)) padding-box,
        linear-gradient(120deg, rgba(255, 110, 114, 1), rgba(255, 152, 122, 1), rgba(255, 110, 114, 1)) border-box;
    color: #ffffff;
    box-shadow: 0 10px 24px rgba(255, 90, 95, 0.32);
}

.magic-icon {
    width: 18px;
    height: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.magic-icon svg {
    width: 100%;
    height: 100%;
}

/* Inputs */
.auth-input {
    width: 100%;
    padding: 12px 16px;
    background-color: var(--bg-surface);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    color: var(--text-main);
    font-size: 0.95rem;
    transition: all 0.2s;
    font-family: inherit;
    height: 48px;
    line-height: normal;
}

.auth-input::placeholder {
    color: var(--text-muted);
}

.auth-input:focus {
    outline: none;
    border-color: var(--primary);
    background-color: rgba(31, 41, 55, 0.6);
    box-shadow: 0 0 0 3px var(--primary-soft);
}

/* Fix for Select Inputs Alignment */
select.auth-input {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23cbd5e1' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 16px;
    padding-right: 40px;
    cursor: pointer;
}

select.auth-input option {
    background-color: #1e293b;
    color: #f8fafc;
}

.form-group {
    margin-bottom: 20px;
}

.form-label {
    display: block;
    margin-bottom: 8px;
    font-weight: 500;
    color: var(--text-main);
    font-size: 0.9rem;
}

/* Tables */
.table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0 8px;
    /* Spacing between rows */
}

.table th {
    text-align: left;
    padding: 12px 16px;
    color: var(--text-muted);
    font-weight: 600;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.table td {
    background-color: var(--bg-surface);
    /* Slightly different bg for rows */
    padding: 16px;
    color: var(--text-main);
    font-size: 0.95rem;
    border-top: 1px solid var(--border-color);
    border-bottom: 1px solid var(--border-color);
}

.table td:first-child {
    border-left: 1px solid var(--border-color);
    border-top-left-radius: var(--radius-md);
    border-bottom-left-radius: var(--radius-md);
}

.table td:last-child {
    border-right: 1px solid var(--border-color);
    border-top-right-radius: var(--radius-md);
    border-bottom-right-radius: var(--radius-md);
}

.table-responsive {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin-bottom: 16px;
    /* Removed border to merge better with cards */
}

.table-responsive .table {
    margin-bottom: 0;
}

/* Fixed Column Widths for Units Table */
#section-units .table th:nth-child(1) {
    width: 60px;
}

/* Photo */
#section-units .table th:nth-child(2) {
    width: 15%;
}

/* Property */
#section-units .table th:nth-child(3) {
    width: 8%;
}

/* Unit */
#section-units .table th:nth-child(4) {
    width: 10%;
}

/* Stair */
#section-units .table th:nth-child(5) {
    width: 10%;
}

/* Floor */
#section-units .table th:nth-child(6) {
    width: 8%;
}

/* Millesimals */
#section-units .table th:nth-child(7) {
    width: 15%;
}

/* Owner */
#section-units .table th:nth-child(8) {
    width: 10%;
}

/* Code */
#section-units .table th:nth-child(9) {
    width: 10%;
}

/* Status */
#section-units .table th:nth-child(10) {
    width: 80px;
}

/* Floorplan */

/* Pills & Badges */
.pill {
    padding: 4px 12px;
    border-radius: var(--radius-pill);
    font-size: 0.75rem;
    font-weight: 600;
    display: inline-block;
}

.pill-success {
    background-color: rgba(16, 185, 129, 0.2);
    color: var(--success);
}

.pill-warning {
    background-color: rgba(245, 158, 11, 0.2);
    color: var(--warning);
}

.pill-danger {
    background-color: rgba(239, 68, 68, 0.2);
    color: var(--danger);
}

.pill-info {
    background-color: rgba(59, 130, 246, 0.2);
    color: var(--info);
}

.pill-primary {
    background-color: var(--primary-soft);
    color: var(--primary);
}

.pill-muted {
    background-color: var(--bg-surface);
    color: var(--text-muted);
}

/* Service Cards */
.service-card {
    padding: 0;
    overflow: hidden;
    border: none;
}

.service-img {
    height: 140px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.service-price {
    font-weight: 700;
    color: var(--text-main);
    font-size: 1.1rem;
    margin-top: 4px;
}

.service-body {
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.service-status {
    font-weight: 600;
    font-size: 0.85rem;
}

.service-status.available {
    color: var(--success);
}

.service-status.busy {
    color: var(--danger);
}

/* Auth Pages */
.auth-container {
    display: flex;
    /* justify-content: center; Removed to allow margin: auto to handle vertical centering + overflow */
    /* align-items: center; Removed to prevent top cut-off on overflow */
    height: 100vh;
    padding: 16px;
    background-color: var(--bg-body);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

.auth-card {
    background: var(--bg-card);
    border-radius: var(--radius-lg);
    padding: 40px;
    width: 100%;
    max-width: 440px;
    box-shadow: var(--shadow-card);
    border: 1px solid var(--border-subtle);
    margin: auto;
    /* Centers vertically and horizontally, safe for overflow */
}

@media (max-width: 640px) {
    .auth-container {
        padding-top: 80px;
        /* Space for the language button */
        align-items: flex-start;
        /* Ensure it starts from top */
    }

    .auth-card {
        padding: 24px 20px;
        max-width: 100%;
    }

    .auth-header {
        margin-bottom: 24px;
    }

    .form-group {
        margin-bottom: 16px;
    }

    .auth-input {
        padding: 10px 14px;
        height: 44px;
        /* Slightly smaller inputs */
    }
}


.auth-header {
    text-align: center;
    margin-bottom: 32px;
}

.auth-footer {
    text-align: center;
    margin-top: 24px;
    font-size: 0.9rem;
    color: var(--text-muted);
}

/* Toggle Switch */
.toggle-container {
    display: flex;
    background: var(--bg-body);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-pill);
    padding: 4px;
    margin: 24px auto;
    width: fit-content;
}

.toggle-btn {
    background: transparent;
    border: none;
    color: var(--text-muted);
    padding: 8px 20px;
    border-radius: var(--radius-pill);
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}

.toggle-btn.active {
    background: var(--primary);
    color: white;
    box-shadow: var(--shadow-sm);
}

/* Modal */
.modal {
    display: none;
    position: fixed;
    z-index: 10000;
    /* Increased to be above everything else */
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6);
    /* Slightly darker overlay */
    justify-content: center;
    align-items: center;
    animation: fadeIn 0.2s ease;
    overflow-y: auto;
    /* Allow scrolling if modal is too tall */
    backdrop-filter: blur(4px);
}

.modal-content {
    background: var(--bg-card);
    padding: 32px;
    border-radius: var(--radius-lg);
    width: 90%;
    max-width: 500px;
    position: relative;
    box-shadow: var(--shadow-card);
}

.close-modal {
    position: absolute;
    top: 20px;
    right: 24px;
    font-size: 24px;
    color: var(--text-muted);
    cursor: pointer;
    transition: color 0.2s;
}

.close-modal:hover {
    color: var(--primary);
}

.time-slots {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    margin-top: 12px;
}

.slot-btn {
    background: var(--bg-body);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm);
    padding: 10px;
    color: var(--text-main);
    cursor: pointer;
    transition: all 0.2s;
    font-weight: 500;
}

.slot-btn:hover:not(:disabled) {
    border-color: var(--primary);
    color: var(--primary);
}

.slot-btn.selected {
    background: var(--primary);
    border-color: var(--primary);
    color: white;
}

/* Avatar Composition for Units */
.avatar-wrapper {
    position: relative;
    width: 40px;
    height: 40px;
    display: inline-block;
}

.avatar-main {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    border: 1px solid var(--border-subtle);
}

.avatar-sub {
    position: absolute;
    bottom: -2px;
    right: -2px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 2px solid white;
    object-fit: cover;
    background: #fff;
}

.unit-resident-cell {
    display: flex;
    align-items: center;
    gap: 12px;
}

.unit-resident-info {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
}

.unit-resident-name {
    font-weight: 500;
    font-size: 0.9rem;
}

.unit-resident-role {
    font-size: 0.75rem;
    color: var(--text-muted);
}

.slot-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    background: #f1f5f9;
}

/* Language Toggle */
.lang-toggle {
    background: var(--bg-surface);
    border: 1px solid var(--border-color);
    color: var(--text-main);
    padding: 6px 12px;
    border-radius: var(--radius-pill);
    cursor: pointer;
    font-size: 0.85rem;
    font-weight: 600;
    transition: all 0.2s;
    box-shadow: var(--glass-shadow);
}

.lang-toggle:hover {
    border-color: var(--primary);
    color: var(--primary);
}

.lang-toggle-btn {
    position: absolute;
    top: 20px;
    right: 20px;
    background: none;
    border: 1px solid var(--border-color);
    padding: 8px 16px;
    border-radius: 20px;
    font-size: 0.9rem;
    cursor: pointer;
    z-index: 10;
    display: flex;
    align-items: center;
    gap: 8px;
    background-color: var(--bg-surface);
    color: var(--text-main);
}

.lang-toggle-btn:hover {
    border-color: var(--primary);
    color: var(--primary);
    box-shadow: var(--shadow-sm);
}

/* Task/List Item Style (from screenshot) */
.list-item {
    display: flex;
    align-items: center;
    padding: 16px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    margin-bottom: 12px;
    background: var(--bg-card);
    transition: all 0.2s;
}

.list-item:hover {
    border-color: var(--primary-soft);
    box-shadow: var(--shadow-sm);
}

.list-avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    object-fit: cover;
    margin-right: 16px;
}

.list-content {
    flex: 1;
}

.list-title {
    font-weight: 700;
    color: var(--text-main);
    margin-bottom: 4px;
}

.list-subtitle {
    font-size: 0.85rem;
    color: var(--text-muted);
}

.list-action {
    margin-left: 16px;
}

.btn-sm {
    padding: 8px 16px;
    font-size: 0.85rem;
}

/* Utilities */
.mt-lg {
    margin-top: 32px;
}

.mb-lg {
    margin-bottom: 32px;
}

/* Chat Widget */
.chat-widget {
    position: fixed;
    bottom: 20px;
    right: 20px;
    width: 350px;
    height: 500px;
    background: white;
    border-radius: var(--radius-lg);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
    display: flex;
    flex-direction: column;
    z-index: 2000;
    overflow: hidden;
    border: 1px solid var(--border-subtle);
    animation: slideUp 0.3s ease;
    z-index: 10000;
}

@keyframes slideUp {
    from {
        transform: translateY(100%);
        opacity: 0;
    }

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

.chat-header {
    background: var(--primary);
    padding: 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: white;
}

.close-chat {
    color: white;
    font-size: 24px;
    cursor: pointer;
    line-height: 1;
}

.chat-history {
    flex: 1;
    padding: 16px;
    overflow-y: auto;
    background: #f8fafc;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.chat-input-area {
    padding: 16px;
    background: white;
    border-top: 1px solid var(--border-subtle);
    display: flex;
    gap: 8px;
    align-items: center;
}

.btn-icon-send {
    background: var(--primary);
    color: white;
    border: none;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: transform 0.2s;
}

.btn-icon-send:hover {
    transform: scale(1.1);
}

.message {
    max-width: 80%;
    padding: 10px 14px;
    border-radius: 16px;
    font-size: 0.9rem;
    line-height: 1.4;
}

.message.received {
    background: white;
    border: 1px solid var(--border-subtle);
    align-self: flex-start;
    border-bottom-left-radius: 4px;
}

.message.sent {
    background: var(--primary);
    color: white;
    align-self: flex-end;
    border-bottom-right-radius: 4px;
}

/* Back Button */
.btn-back {
    background: var(--bg-surface);
    border: 1px solid var(--border-color);
    padding: 8px 16px;
    border-radius: var(--radius-md);
    cursor: pointer;
    font-weight: 500;
    color: var(--text-main);
    align-items: center;
    gap: 8px;
    transition: all 0.2s;
    position: relative;
    z-index: 2000;
    /* Ensure it's above sidebar/topbar but below modal */
}

.btn-back:hover {
    background: var(--primary-soft);
    border-color: var(--primary);
    color: var(--primary);
}

/* Payments (Rates section) */
.payments-kpi-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    margin-bottom: 18px;
}

.payments-kpi-card {
    color: var(--text-main);
    border: 1px solid var(--border-color);
    box-shadow: var(--glass-shadow), var(--glass-glow);
    margin-bottom: 0;
    padding: 14px;
    min-height: 116px;
    position: relative;
}

.payments-kpi-card::before {
    content: '';
    position: absolute;
    inset: 0 auto 0 0;
    width: 3px;
    border-radius: 16px 0 0 16px;
    background: currentColor;
    opacity: 0.8;
}

.payments-kpi-paid {
    color: var(--success);
}

.payments-kpi-pending {
    color: var(--warning);
}

.payments-kpi-overdue {
    color: var(--danger);
}

.payments-kpi-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}

.payments-kpi-label {
    font-size: 0.82rem;
    font-weight: 500;
    color: var(--text-muted);
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

.payments-kpi-icon {
    width: 30px;
    height: 30px;
    border-radius: 10px;
    border: 1px solid currentColor;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 6px;
}

.payments-kpi-icon svg {
    width: 100%;
    height: 100%;
}

.payments-kpi-value {
    font-size: 1.7rem;
    line-height: 1;
    font-weight: 650;
    margin-bottom: 6px;
    color: var(--text-main);
}

.payments-kpi-subvalue {
    font-size: 0.8rem;
    color: var(--text-muted);
}

.payments-breakdown-card {
    margin-bottom: 0;
}

.payments-breakdown-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
    flex-wrap: wrap;
}

.payments-property-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.payments-property-item {
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    border-radius: 14px;
    padding: 14px;
}

.payments-property-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 10px;
}

.payments-property-name {
    font-size: 1rem;
    font-weight: 600;
}

.payments-property-amount {
    font-size: 1rem;
    font-weight: 700;
}

.payments-property-meta {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 10px;
}

.payments-pill {
    font-size: 0.78rem;
    font-weight: 600;
    border-radius: 999px;
    padding: 4px 10px;
}

.payments-pill.paid {
    color: #6ee7b7;
    background: rgba(16, 185, 129, 0.18);
}

.payments-pill.pending {
    color: #fde68a;
    background: rgba(245, 158, 11, 0.18);
}

.payments-pill.overdue {
    color: #fca5a5;
    background: rgba(239, 68, 68, 0.18);
}

.payments-collection-bar {
    width: 100%;
    height: 8px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.08);
    overflow: hidden;
}

.payments-collection-fill {
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #34d399, #22c55e);
    transition: width 0.25s ease;
}

.payments-collection-label {
    margin-top: 6px;
    font-size: 0.8rem;
    color: var(--text-muted);
}

.payments-empty-state {
    padding: 22px 8px;
    text-align: center;
    color: var(--text-muted);
}

@media (max-width: 640px) {
    .payments-kpi-grid {
        gap: 8px;
    }

    .payments-kpi-card {
        padding: 12px 10px;
        min-height: 104px;
    }

    .payments-kpi-value {
        font-size: 1.45rem;
    }

    .payments-kpi-label {
        font-size: 0.72rem;
    }

    .payments-kpi-subvalue {
        font-size: 0.72rem;
    }
}

/* Tabs */
.tabs {
    display: flex;
    gap: 8px;
    margin-bottom: 24px;
    padding: 12px 0;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    z-index: 10;
    background: transparent;
    border-bottom: 1px solid var(--border-color);
}

.tab-btn {
    background: var(--bg-surface);
    border: 1px solid var(--border-color);
    padding: 8px 16px;
    border-radius: 20px;
    /* Pill shape */
    font-size: 0.9rem;
    color: var(--text-muted);
    cursor: pointer;
    transition: all 0.2s;
    font-weight: 500;
    white-space: nowrap;
}

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

.tab-btn.active {
    background: var(--primary);
    color: white;
    border-color: var(--primary);
    box-shadow: 0 4px 12px rgba(255, 90, 95, 0.3);
}

/* Mobile Responsive Adjustments */
@media (max-width: 768px) {
    .sidebar {
        display: none;
    }

    .main {
        margin-left: 0;
        margin-bottom: 80px;
        /* Space for bottom nav */
    }

    .bottom-nav {
        display: flex !important;
    }

    html,
    body {
        overflow-x: hidden;
        width: 100%;
        position: relative;
    }

    .topbar {
        padding: 0 20px;
        padding-top: calc(env(safe-area-inset-top, 50px) + 5px);
        /* Reduced from +10px to +5px to lower topbar slightly */
        height: auto;
        min-height: 95px;
        /* Reduced from 100px */
        margin-top: 0;
        align-items: flex-end;
        /* Align items to bottom of topbar */
        padding-bottom: 8px;
        /* Reduced from 10px */
    }

    /* Hide footer overlay that appears in iOS build */
    .footer {
        display: none !important;
    }

    .content {
        padding: 12px 20px 0 20px;
        /* Reduced top padding from 20px to 12px */
        padding-bottom: 0;
        /* Increased space for bottom nav + safe area */
        margin-top: 0px;
        /* Increased to clear the fixed header and show tabs */
    }

    .bottom-nav {
        display: flex !important;
        padding-bottom: calc(12px + env(safe-area-inset-bottom, 20px));
        /* Add extra padding for home indicator */
        height: auto;
        /* Allow height to adjust */
    }

    /* Adjust Grid for Mobile */
    .grid-2,
    .grid-3,
    .grid-4 {
        grid-template-columns: 1fr;
    }

    /* Adjust Card Padding */
    .card {
        padding: 20px;
        max-width: 100%;
        box-sizing: border-box;
    }

    /* Override Fixed Table Widths */
    #section-units .table th:nth-child(n) {
        width: auto !important;
    }

    /* Hide User Badge Text on small screens */
    .user-text {
        display: none;
    }

    .user-badge {
        padding: 6px;
    }

    .user-avatar {
        margin-right: 0;
    }

    /* Mobile Card View for Tables - Premium Design */
    .mobile-card-view {
        display: block;
        width: 100%;
    }

    /* Aggressive Reset for Mobile Card Content */
    .mobile-card-view * {
        max-width: 100%;
        box-sizing: border-box;
    }

    .mobile-card-view tbody {
        display: block;
        width: 100%;
    }

    /* Task Cards Animation */
    .task-card {
        transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow 0.2s, border-color 0.2s;
    }

    .task-card:hover {
        transform: translateY(-2px);
        box-shadow: 0 12px 40px rgba(0, 0, 0, 0.25), 0 0 0 1px rgba(255, 90, 95, 0.15);
        border-color: rgba(255, 255, 255, 0.12);
    }

    .task-card:active {
        transform: scale(0.98);
    }

    .mobile-card-view thead {
        display: none;
    }

    .mobile-card-view tr {
        display: grid;
        grid-template-columns: 1fr auto;
        /* Title area | Status pill */
        grid-template-areas:
            "header header"
            "property property"
            "tenant tenant"
            "details details"
            "attachments attachments"
            "actions actions";
        gap: 12px;
        background: var(--bg-card);
        border: 1px solid var(--border-color);
        border-radius: 16px;
        /* More rounded */
        margin-bottom: 20px;
        padding: 20px;
        box-shadow: var(--glass-shadow);
        position: relative;
        max-width: 100%;
        overflow: hidden;
    }

    .mobile-card-view td {
        display: block;
        padding: 0;
        border: none;
        border: none;
        text-align: left;
        max-width: 100%;
        box-sizing: border-box;
    }

    .mobile-card-view td::before {
        display: none;
        /* Hide default labels for this layout */
    }

    /* Header Area: Title & Status */
    .mobile-card-view td[data-label="Title"],
    .mobile-card-view td[data-label="Subject"] {
        grid-area: header;
        font-family: 'Roboto', sans-serif;
        font-size: 1.1rem;
        font-weight: 700;
        color: var(--text-main);
        margin-bottom: 4px;
        padding-right: 80px;
        /* Space for status pill */
    }

    .mobile-card-view td[data-label="Status"] {
        position: absolute;
        top: 20px;
        right: 20px;
        width: auto;
    }

    /* Property Row */
    .mobile-card-view td[data-label="Property"] {
        grid-area: property;
        display: flex;
        align-items: center;
        gap: 10px;
        font-weight: 500;
        color: var(--text-main);
        background: var(--bg-surface);
        padding: 10px;
        border-radius: 12px;
    }

    .mobile-card-view td[data-label="Property"] img {
        width: 40px;
        height: 40px;
        border-radius: 8px;
        object-fit: cover;
    }

    /* Tenant Row */
    .mobile-card-view td[data-label="Tenant"] {
        grid-area: tenant;
        display: flex;
        align-items: center;
        gap: 10px;
        color: var(--text-muted);
        font-size: 0.95rem;
    }

    .mobile-card-view td[data-label="Tenant"] img {
        width: 32px;
        height: 32px;
        border-radius: 50%;
        object-fit: cover;
    }

    /* Details Grid (Category, Date, Priority, etc.) */
    .mobile-card-view td[data-label="Category"],
    .mobile-card-view td[data-label="Deadline"],
    .mobile-card-view td[data-label="Channel"],
    .mobile-card-view td[data-label="Priority"],
    .mobile-card-view td[data-label="Type"],
    .mobile-card-view td[data-label="Date"] {
        display: inline-block;
        font-size: 0.85rem;
        color: var(--text-muted);
        background: var(--bg-surface);
        padding: 6px 12px;
        border-radius: 20px;
        border: 1px solid var(--border-color);
        margin-right: 8px;
        margin-bottom: 8px;
    }

    /* Wrapper for details to group them if needed, 
       but since they are separate TDs, we let them flow or use a specific container if we change HTML structure.
       For now, we'll let them sit in the 'details' area if we group them, 
       OR we just let them flow naturally if we don't strictly enforce grid areas for every single cell.
       Let's use a generic 'details' class if we wrap them, but for now, let's just style them as chips.
    */

    /* Attachments Section */
    .mobile-card-view td.attachments-cell {
        grid-area: attachments;
        border-top: 1px solid var(--border-subtle);
        padding-top: 12px;
        margin-top: 4px;
    }

    .attachments-preview {
        display: flex;
        gap: 8px;
        overflow-x: auto;
        padding-bottom: 4px;
    }

    .attachment-thumb {
        width: 60px;
        height: 60px;
        border-radius: 8px;
        object-fit: cover;
        border: 1px solid var(--border-subtle);
    }

    /* Maintenance Specific Mobile Card Adjustments */
    .mobile-card-view td[data-label="Cost"] {
        display: inline-block;
        font-weight: 700;
        color: var(--text-main);
        font-size: 1rem;
        margin-top: 8px;
    }

    .mobile-card-view td[data-label="Actions"] {
        grid-area: actions;
        margin-top: 12px;
        border-top: 1px solid var(--border-subtle);
        padding-top: 12px;
        text-align: right;
        max-width: 100%;
    }

    .mobile-card-view button {
        max-width: 100%;
        width: 100% !important;
        display: block;
        white-space: normal;
        /* Allow text wrapping in buttons if needed */
    }

    /* Mobile Tabs Optimization */

    /* Mobile Card List (Generic) */
    .mobile-card-list {
        display: block;
        width: 100%;
    }

    .mobile-card-list thead {
        display: none;
    }

    .mobile-card-list tbody {
        display: block;
        width: 100%;
    }

    .mobile-card-list tr {
        display: flex;
        flex-direction: column;
        background: var(--bg-card);
        border: 1px solid var(--border-color);
        border-radius: 12px;
        margin-bottom: 16px;
        padding: 16px;
        box-shadow: var(--glass-shadow);
    }

    .mobile-card-list td {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 8px 0;
        border: none;
        border-bottom: 1px solid var(--border-color);
        text-align: right;
    }

    .mobile-card-list td:last-child {
        border-bottom: none;
        padding-bottom: 0;
    }

    .mobile-card-list td:first-child {
        padding-top: 0;
    }

    .mobile-card-list td::before {
        content: attr(data-label);
        font-weight: 600;
        color: var(--text-muted);
        text-align: left;
        margin-right: 16px;
        font-size: 0.9rem;
    }

    .tabs {
        display: flex;
        gap: 8px;
        padding: 4px 0 12px 0;
        /* Add bottom padding for scrollbar space if needed, though hidden */
        margin-bottom: 16px;
        overflow-x: auto;
        /* Enable horizontal scroll */
        -webkit-overflow-scrolling: touch;
        /* Smooth scroll on iOS */
        scrollbar-width: none;
        /* Firefox */
        width: 100%;
        white-space: nowrap;
    }

    .tabs::-webkit-scrollbar {
        display: none;
        /* Chrome/Safari */
    }

    .tab-btn {
        padding: 8px 16px;
        font-size: 0.9rem;
        white-space: nowrap;
        flex-shrink: 0;
        /* Prevent shrinking */
    }

    /* Units Table Mobile Card View */
    #prop-units-table thead {
        display: none;
    }

    #prop-units-table tbody tr {
        display: grid;
        grid-template-columns: 1fr auto;
        grid-template-areas:
            "unit status"
            "floor size"
            "resident resident"
            "regcode regcode"
            "actions actions";
        gap: 8px;
        background: var(--bg-card);
        border: 1px solid var(--border-color);
        border-radius: 12px;
        padding: 16px;
        margin-bottom: 12px;
        box-shadow: var(--glass-shadow);
        position: relative;
    }

    #prop-units-table td {
        display: block;
        padding: 0;
        border: none;
        background: transparent;
    }

    #prop-units-table td[data-label="Unit"] {
        grid-area: unit;
        font-size: 1.2rem;
        font-weight: 700;
        color: var(--text-main);
    }

    #prop-units-table td[data-label="Status"] {
        grid-area: status;
        justify-self: end;
        align-self: start;
    }

    #prop-units-table td[data-label="Floor"],
    #prop-units-table td[data-label="Mq"] {
        font-size: 0.9rem;
        color: var(--text-muted);
    }


    /* Group Floor and Mq visually in the 'details' area */
    #prop-units-table td[data-label="Floor"]::before {
        content: "Floor: ";
    }

    #prop-units-table td[data-label="Mq"]::before {
        content: "Size: ";
    }

    #prop-units-table td[data-label="Floor"] {
        grid-area: floor;
        display: inline-block;
    }

    #prop-units-table td[data-label="Mq"] {
        grid-area: size;
        display: inline-block;
        justify-self: end;
    }

    #prop-units-table td[data-label="Resident"] {
        grid-area: resident;
        margin-top: 8px;
        padding-top: 8px;
        border-top: 1px solid var(--border-color);
    }

    #prop-units-table td[data-label="Reg. Code"] {
        grid-area: regcode;
        margin-top: 8px;
        padding-top: 8px;
        border-top: 1px solid var(--border-color);
    }

    #prop-units-table td[data-label="Reg. Code"]>div {
        display: flex;
        align-items: center;
        gap: 8px;
        flex-wrap: nowrap;
    }

    #prop-units-table td[data-label="Reg. Code"] code {
        flex: 1;
        min-width: 0;
    }

    #prop-units-table td[data-label="Reg. Code"] .btn-icon {
        flex-shrink: 0;
        z-index: 10;
        position: relative;
    }

    #prop-units-table td[data-label="Actions"] {
        grid-area: actions;
        justify-self: end;
        align-self: end;
        margin-top: 8px;
    }

    #prop-units-table td[data-label="Actions"] .btn-icon {
        z-index: 10;
        position: relative;
        pointer-events: all;
    }


    /* Ensure Property Details Grids are Single Column on Mobile */
    #prop-tab-overview .grid-3,
    #prop-tab-overview .grid-2,
    .prop-tab-content .grid-3,
    .prop-tab-content .grid-2 {
        grid-template-columns: 1fr !important;
    }

    /* Prevent horizontal overflow in details */
    .prop-tab-content {
        max-width: 100%;
        overflow-x: hidden;

    }

}

/* Progress Status Bar */
.progress-status {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex-direction: column;
    gap: 4px;
    min-width: 120px;
}

@media (max-width: 768px) {
    .progress-status {
        min-width: 0 !important;
        width: 100%;
    }
}

.progress-bar {
    width: 100%;
    height: 6px;
    background: var(--border-subtle);
    border-radius: 4px;
    overflow: hidden;
}

.progress-fill {
    height: 100%;
    background: var(--success);
    border-radius: 4px;
    transition: width 0.3s ease;
}

.status-text {
    font-size: 0.75rem;
    color: var(--text-muted);
    font-weight: 500;
}

/* Editable Inputs */
.edit-input {
    background: transparent;
    border: 1px solid transparent;
    border-radius: 4px;
    padding: 4px 8px;
    font-family: inherit;
    font-size: inherit;
    color: inherit;
    width: 100%;
    transition: all 0.2s;
}

.edit-input.active {
    background: white;
    color: #111827;
    /* Dark text for visibility on white background */
    border-color: var(--primary);
    box-shadow: 0 0 0 2px var(--primary-soft);
}

.btn-icon {
    background: transparent;
    border: 1px solid var(--border-subtle);
    /* Outline style as requested */
    cursor: pointer;
    padding: 8px;
    border-radius: 50%;
    transition: all 0.2s;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
    width: 36px;
    height: 36px;
}

.btn-edit-action {
    position: relative;
    z-index: 15;
    cursor: pointer;
}

.btn-icon:hover {
    background: var(--bg-body);
    color: var(--primary);
    border-color: var(--primary);
}

.btn-icon svg {
    pointer-events: none;
    width: 18px;
    height: 18px;
    stroke: currentColor;
}

/* Inline Booking UI */
.booking-inline {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--border-subtle);
}

.booking-calendar {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding-bottom: 8px;
    margin-bottom: 12px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    /* Firefox */
}

.booking-calendar::-webkit-scrollbar {
    display: none;
    /* Chrome/Safari */
}

.calendar-day {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-width: 50px;
    height: 60px;
    border: 1px solid var(--border-subtle);
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.2s;
    background: var(--bg-surface);
    color: var(--text-main);
}

.calendar-day.active {
    background: var(--primary);
    color: white;
    border-color: var(--primary);
    box-shadow: 0 4px 12px rgba(255, 90, 95, 0.3);
}

.day-name {
    font-size: 0.75rem;
    font-weight: 500;
    text-transform: uppercase;
}

.day-number {
    font-size: 1.1rem;
    font-weight: 700;
}

.booking-slots {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
    margin-bottom: 12px;
}

.time-slot {
    padding: 6px 0;
    text-align: center;
    border: 1px solid var(--border-subtle);
    border-radius: 8px;
    font-size: 0.85rem;
    background: var(--bg-surface);
    color: var(--text-main);
    cursor: pointer;
    transition: all 0.2s;
}

.time-slot:hover:not(.busy):not(.selected) {
    border-color: var(--primary);
    color: var(--primary);
}

.time-slot.selected {
    background: var(--primary);
    color: white;
    border-color: var(--primary);
}

.time-slot.busy {
    background: #f1f5f9;
    color: var(--text-muted);
    cursor: not-allowed;
    text-decoration: line-through;
    opacity: 0.6;
}

div#section-property-details {
    padding: 0 20px 0 20px;
    margin-top: 0px;
}

/* Dashboard Stats Row */
.dashboard-stats-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}

@media (max-width: 768px) {
    .dashboard-stats-row {
        gap: 8px;
    }

    .dashboard-stats-row .stat-card {
        padding: 12px;
        min-height: 80px;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    .dashboard-stats-row .stat-label {
        font-size: 0.75rem;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .dashboard-stats-row .stat-value {
        font-size: 1.7rem;
        text-shadow: 0 0 15px rgba(255, 90, 95, 0.4);
    }
}

/* Property List Styles */
.property-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-top: 16px;
}

.property-item {
    display: flex;
    align-items: center;
    gap: 16px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--border-subtle);
}

.property-item:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.property-img {
    width: 60px;
    height: 60px;
    border-radius: 12px;
    object-fit: cover;
    flex-shrink: 0;
    background: #f1f5f9;
}

.property-details {
    flex: 1;
    min-width: 0;
    /* Prevent flex overflow */
}

.property-details h3 {
    margin: 0 0 4px 0;
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-main);
}

.property-details p {
    margin: 0;
    font-size: 0.85rem;
    color: var(--text-muted);
    line-height: 1.4;
}

#section-analytics {
    margin: 0px 20px;
}

div#section-accounting {
    margin: 0px 20px;
}

/* Fix for Accounting Filters Z-Index */
#section-accounting .card {
    position: relative;
}



/* Meeting Dashboard Responsive Layout */
.meeting-dash-body {
    display: flex;
    height: 600px;
    max-height: 75vh;
    overflow: hidden;
}

.meeting-dash-sidebar {
    width: 250px;
    border-right: 1px solid var(--border-subtle);
    padding: 20px;
    background: var(--bg-subtle);
    overflow-y: auto;
    flex-shrink: 0;
}

.meeting-dash-main {
    flex: 1;
    padding: 24px;
    overflow-y: auto;
}

#meeting-video-container,
#tenant-meeting-video-container,
#meeting-video-fixed-container,
#tenant-meeting-video-fixed-container {
    position: static;
    top: auto;
    z-index: auto;
    border: 1px solid var(--border-color);
    background: var(--bg-surface);
    border-radius: 12px;
    margin: 0;
}

.meeting-video-embed {
    width: 100%;
    height: min(52vh, 430px);
    border: 0;
    display: block;
}

@media (max-width: 768px) {
    #meeting-dashboard-modal .modal-content {
        max-height: 92vh;
        display: flex;
        flex-direction: column;
        overflow: hidden;
    }

    .meeting-dash-body {
        flex-direction: column;
        flex: 1;
        min-height: 0;
        max-height: none;
        overflow-y: auto;
    }

    .meeting-dash-sidebar {
        order: 2;
        width: 100%;
        border-right: none;
        border-bottom: 1px solid var(--border-subtle);
        max-height: none;
        padding: 16px;
    }

    .meeting-dash-main {
        order: 1;
        padding: 16px;
        max-height: none;
        overflow: visible;
    }

    .meeting-video-embed {
        height: 30vh;
    }

    #meeting-video-fixed-container,
    #tenant-meeting-video-fixed-container {
        padding: 10px 12px !important;
    }

    .meeting-video-title {
        margin-bottom: 6px !important;
        font-size: 1.05rem;
    }

    .meeting-video-desc {
        margin-bottom: 8px !important;
        font-size: 0.95rem;
        line-height: 1.35;
    }

    .meeting-video-help {
        display: none;
    }
}

@media (max-width: 420px) {
    .meeting-video-embed {
        height: 27vh;
    }
}

/* Segmented Controls (Choice Chips) */
.segmented-control {
    display: flex;
    background: var(--bg-subtle);
    padding: 4px;
    border-radius: 12px;
    gap: 4px;
    margin-top: 8px;
}

.segment-btn {
    flex: 1;
    border: none;
    background: transparent;
    padding: 8px 12px;
    border-radius: 8px;
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--text-muted);
    cursor: pointer;
    transition: all 0.2s ease;
    text-align: center;
}

.segment-btn.active {
    background: var(--danger);
    color: white;
    box-shadow: 0 2px 8px rgba(234, 67, 53, 0.3);
}

.segment-btn:hover:not(.active) {
    background: rgba(0, 0, 0, 0.05);
}

/* Maintenance Section Responsive Layout */
/* Desktop: Show table, hide cards */
@media (min-width: 769px) {
    #prop-tab-maintenance .data-table {
        display: table !important;
    }

    #prop-tab-maintenance .mobile-maintenance-cards {
        display: none !important;
    }
}

/* Mobile: Hide table, show cards */
@media (max-width: 768px) {
    #prop-tab-maintenance .data-table {
        display: none !important;
    }

    #prop-tab-maintenance .mobile-maintenance-cards {
        display: block !important;
    }
}

div#section-invite {
    margin: 0px 20px;
}

div#section-costs {
    margin: 0px 20px;
}

#wizard-back-btn {
    border-radius: 16px;
    align-content: center;
    justify-content: center;
    align-items: center;
}

/* Responsive Utilities */
.mobile-only {
    display: block;
}

.desktop-only {
    display: none;
}

@media (min-width: 769px) {
    .mobile-only {
        display: none;
    }

    .desktop-only {
        display: block;
    }
}

/* Force horizontal grid on mobile for stats */
.grid-stats-mobile {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
}

@media (max-width: 768px) {
    .grid-stats-mobile .card {
        padding: 12px 8px;
        /* Compact padding */
        margin-bottom: 0;
    }

    .grid-stats-mobile .card h2 {
        font-size: 1rem;
        /* Smaller title */
        margin-bottom: 4px;
    }

    .grid-stats-mobile .stat-value,
    .grid-stats-mobile div[style*="font-size: 2rem"] {
        font-size: 1.5rem !important;
        /* Smaller numbers */
    }

    .grid-stats-mobile div[style*="font-size: 3rem"] {
        font-size: 1.5rem !important;
        /* Smaller icons */
    }
}