@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 - Moved to top for priority */
.bottom-nav {
    display: flex;
    position: fixed;
    /* Reverted to fixed as requested */
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    background: white;
    border-top: 1px solid var(--border-subtle);
    padding: 12px 16px;
    justify-content: space-around;
    align-items: center;
    z-index: 2100;
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.05);
    padding-bottom: env(safe-area-inset-bottom, 20px);
}

.bottom-nav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    color: var(--text-muted);
    text-decoration: none;
    font-size: 0.75rem;
    font-weight: 500;
    transition: color 0.2s;
    background: none;
    border: none;
    cursor: pointer;
}

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

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

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





:root {
    /* Color Palette - Jirani Theme */
    --bg-body: #ffffff;
    /* Pure white background as requested */
    --bg-sidebar: #ffffff;
    --bg-card: #ffffff;

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

    /* Text Colors */
    --text-main: #1a1a1a;
    /* Darker, sharper text */
    --text-muted: #888888;
    /* Lighter gray for secondary */
    --text-light: #a0a0a0;

    /* Borders & Dividers */
    --border-subtle: #f0f0f0;
    /* Very subtle borders */

    /* Status Colors */
    --success: #10b981;
    --warning: #f59e0b;
    --danger: #FF5A5F;
    /* Use primary for danger/action where appropriate */
    --info: #3b82f6;

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

    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.04);
    --shadow-md: 0 8px 16px rgba(0, 0, 0, 0.04);
    --shadow-lg: 0 12px 24px rgba(0, 0, 0, 0.06);
    --shadow-card: 0 4px 24px rgba(0, 0, 0, 0.05);
    /* Soft, spread shadow */
}

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

body {
    font-family: 'Outfit', sans-serif;
    background-color: var(--bg-body);
    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 */
}

/* 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-color: var(--bg-body);
    position: relative;
    /* Changed from fixed */
    z-index: 30000;
    border-bottom: 1px solid var(--border-subtle);
    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);
    padding: 6px 16px 6px 6px;
    border-radius: var(--radius-pill);
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--border-subtle);
    cursor: pointer;
    transition: transform 0.2s;
}

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

.user-avatar {
    width: 36px;
    height: 36px;
    background-color: var(--text-main);
    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: white;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    border: 1px solid var(--border-subtle);
    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-body);
    color: var(--primary);
}

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

.dropdown-item.danger:hover {
    background-color: rgba(255, 90, 95, 0.05);
}

/* 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);
    border-radius: var(--radius-lg);
    padding: 16px;
    /* Reduced for mobile */
    box-shadow: var(--shadow-card);
    border: 1px solid var(--border-subtle);
    transition: transform 0.2s, box-shadow 0.2s;
    margin-bottom: 24px;
    overflow: hidden;
    /* Prevent content overflow */
}

/* 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.2s;
    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 6px 20px rgba(255, 90, 95, 0.5);
}

/* Inputs */
.auth-input {
    width: 100%;
    padding: 12px 16px;
    background-color: var(--bg-body);
    border: 1px solid var(--border-subtle);
    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:focus {
    outline: none;
    border-color: var(--primary);
    background-color: white;
    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='currentColor' 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;
}

.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-body);
    /* Slightly different bg for rows */
    padding: 16px;
    color: var(--text-main);
    font-size: 0.95rem;
    border-top: 1px solid var(--border-subtle);
    border-bottom: 1px solid var(--border-subtle);
}

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

.table td:last-child {
    border-right: 1px solid var(--border-subtle);
    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;
    border-radius: var(--radius-md);
    border: 1px solid var(--border-subtle);
}

.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.1);
    color: var(--success);
}

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

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

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

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

.pill-muted {
    background-color: #f1f5f9;
    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: white;
    border: 1px solid var(--border-subtle);
    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(--shadow-sm);
}

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

.lang-toggle-btn {
    position: absolute;
    top: 20px;
    right: 20px;
    background: none;
    border: 1px solid #ddd;
    padding: 8px 16px;
    border-radius: 20px;
    font-size: 0.9rem;
    cursor: pointer;
    z-index: 10;
    display: flex;
    align-items: center;
    gap: 8px;
    background-color: white;
    /* Ensure bg is white for visibility */
}

.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-subtle);
    border-radius: var(--radius-md);
    margin-bottom: 12px;
    background: white;
    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: white;
    border: 1px solid var(--border-subtle);
    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: #f8fafc;
    border-color: var(--text-muted);
}

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

.tab-btn {
    background: white;
    border: 1px solid var(--border-subtle);
    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: 30px;
        /* 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%;
    }

    .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: white;
        border: 1px solid var(--border-subtle);
        border-radius: 16px;
        /* More rounded */
        margin-bottom: 20px;
        padding: 20px;
        box-shadow: var(--shadow-sm);
        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: 'Outfit', 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-subtle);
        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-main);
        padding: 6px 12px;
        border-radius: 20px;
        border: 1px solid var(--border-subtle);
        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: white;
        border: 1px solid var(--border-subtle);
        border-radius: 12px;
        margin-bottom: 16px;
        padding: 16px;
        box-shadow: var(--shadow-sm);
    }

    .mobile-card-list td {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 8px 0;
        border: none;
        border-bottom: 1px solid var(--border-subtle);
        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"
            "info info"
            "resident resident"
            "regcode regcode"
            "actions actions";
        gap: 8px;
        background: white;
        border: 1px solid var(--border-subtle);
        border-radius: 12px;
        padding: 16px;
        margin-bottom: 12px;
        box-shadow: var(--shadow-sm);
        position: relative;
    }

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

    #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"] {
        display: inline-block;
        font-size: 0.9rem;
        color: var(--text-muted);
        margin-right: 12px;
    }

    /* 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: info;
        display: inline-block;
        margin-right: 16px;
    }

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

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

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

    #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;
    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: white;
}

.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: white;
    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.2rem;
    }
}

/* 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;
}

/* ===== TICKET CARDS - MOBILE FRIENDLY UI ===== */

/* Hide table headers on mobile for cleaner look */
#section-requests .table thead {
    display: none;
}

.ticket-card {
    background: white;
    border-radius: var(--radius-lg);
    padding: 16px;
    margin: 0 0 12px 0;
    border: 1px solid var(--border-subtle);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
    transition: all 0.2s ease;
    cursor: pointer;
}

.ticket-card:hover {
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
    transform: translateY(-2px);
    border-color: var(--primary);
}

.ticket-card:active {
    transform: translateY(0px);
}

/* Header Section */
.ticket-card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 16px;
    gap: 12px;
}

.ticket-title-section {
    flex: 1;
    min-width: 0;
}

.ticket-title {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--text-main);
    margin: 0 0 4px 0;
    line-height: 1.3;
    word-wrap: break-word;
}

.ticket-date {
    font-size: 0.8rem;
    color: var(--text-muted);
    font-weight: 500;
}

.ticket-badges {
    display: flex;
    flex-direction: column;
    gap: 4px;
    align-items: flex-end;
}

/* Body Section */
.ticket-card-body {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 16px;
}

.ticket-info-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.info-icon {
    width: 40px;
    height: 40px;
    background: var(--bg-body);
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
    flex-shrink: 0;
}

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

.info-content {
    flex: 1;
    min-width: 0;
}

.info-label {
    font-size: 0.75rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 600;
    margin-bottom: 2px;
}

.info-value {
    font-size: 0.95rem;
    color: var(--text-main);
    font-weight: 600;
    line-height: 1.3;
}

.info-sublabel {
    font-size: 0.8rem;
    color: var(--text-muted);
    margin-top: 2px;
}

/* Footer Section */
.ticket-card-footer {
    border-top: 1px solid var(--border-subtle);
    padding-top: 12px;
    display: flex;
    justify-content: flex-end;
}

.ticket-chat-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--primary);
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: var(--radius-pill);
    font-weight: 600;
    font-size: 0.9rem;
    cursor: pointer;
    transition: all 0.2s;
    box-shadow: 0 2px 8px rgba(255, 90, 95, 0.3);
    position: relative;
}

.ticket-chat-btn:hover {
    background: var(--primary-hover);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(255, 90, 95, 0.4);
}

.ticket-chat-btn:active {
    transform: translateY(0);
}

.chat-icon {
    font-size: 1.1rem;
}

.unread-badge {
    position: absolute;
    top: -6px;
    right: -6px;
    background: #ef4444;
    color: white;
    border-radius: 50%;
    width: 20px;
    height: 20px;
    font-size: 0.7rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid white;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

/* Responsive improvements */
@media (max-width: 768px) {
    .ticket-card {
        margin: 0 0 10px 0;
    }

    .ticket-title {
        font-size: 1rem;
    }

    .info-icon,
    .info-avatar {
        width: 36px;
        height: 36px;
    }
}

@media (min-width: 769px) {

    /* Show table headers on desktop */
    #section-requests .table thead {
        display: table-header-group;
    }

    /* But keep card layout for better UX */
    .ticket-card {
        padding: 20px;
    }

    .ticket-card-body {
        flex-direction: row;
        gap: 24px;
    }

    .ticket-info-item {
        flex: 1;
    }
}

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

.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;
}

@media (max-width: 768px) {
    .meeting-dash-body {
        flex-direction: column;
        height: auto;
        max-height: 85vh;
    }

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

    .meeting-dash-main {
        padding: 16px;
    }
}

/* 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 */
    }
}