/* ===== GLOBAL RESPONSIVE OVERRIDES ===== */

/* Ensure everything uses border-box */
* {
    box-sizing: border-box;
}

/* Base font sizes – smaller on mobile */
html {
    font-size: 14px;
}
@media (min-width: 768px) {
    html {
        font-size: 16px;
    }
}

/* Responsive container padding */
.container {
    padding-left: 15px;
    padding-right: 15px;
}
@media (max-width: 576px) {
    .container {
        padding-left: 10px;
        padding-right: 10px;
    }
}

/* Tables – make scrollable on small screens */
.table-responsive {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* Modals – ensure they fit small screens */
.modal-dialog {
    margin: 1rem auto;
}
@media (max-width: 576px) {
    .modal-dialog {
        margin: 0.5rem;
    }
    .modal-content {
        border-radius: 8px;
    }
}

/* Cards – consistent spacing */
.card {
    margin-bottom: 1rem;
}
.card-img-top {
    width: 100%;
    height: 180px;
    object-fit: cover;
}
@media (max-width: 768px) {
    .card-img-top {
        height: 160px;
    }
}

/* Property cards grid – ensure even columns */
.row-cols-1 > .col,
.row-cols-md-2 > .col,
.row-cols-lg-3 > .col {
    margin-bottom: 1rem;
}

/* Buttons – touch-friendly size */
.btn {
    padding: 0.5rem 1rem;
    font-size: 0.9rem;
}
.btn-sm {
    padding: 0.25rem 0.5rem;
    font-size: 0.8rem;
}
@media (max-width: 576px) {
    .btn {
        padding: 0.4rem 0.8rem;
        font-size: 0.85rem;
    }
}

/* Navbar – better spacing on mobile */
.navbar-brand {
    font-size: 1.2rem;
}
.navbar-toggler {
    padding: 0.25rem 0.5rem;
}
.navbar-nav .nav-link {
    padding: 0.5rem 1rem;
}
@media (max-width: 768px) {
    .navbar-nav .nav-link {
        padding: 0.4rem 1rem;
    }
}

/* Forms – full width on mobile */
.form-control, .form-select {
    font-size: 0.9rem;
    padding: 0.5rem 0.75rem;
}

/* Tab panes – ensure content fits */
.tab-content {
    overflow-x: auto;
}
.nav-tabs .nav-link {
    padding: 0.5rem 1rem;
    font-size: 0.9rem;
}
@media (max-width: 576px) {
    .nav-tabs .nav-link {
        padding: 0.4rem 0.6rem;
        font-size: 0.8rem;
    }
}

/* Dashboard stats cards – responsive layout */
.stat-card {
    border-left-width: 4px;
}
.stat-card h2 {
    font-size: 1.8rem;
}
@media (max-width: 576px) {
    .stat-card h2 {
        font-size: 1.4rem;
    }
    .stat-card h6 {
        font-size: 0.8rem;
    }
}

/* Admin dashboard – stats cards for mobile */
@media (max-width: 768px) {
    .admin-stats .col-md-2 {
        width: 50%;
    }
}
/* Quick actions – stack vertically on mobile */
.quick-actions .btn {
    margin: 0 0.25rem 0.5rem 0;
}
@media (max-width: 768px) {
    .quick-actions {
        text-align: center !important;
    }
    .quick-actions .btn {
        display: inline-block;
        margin: 0 0.25rem 0.5rem;
    }
}

/* Property meta details – adjust line height */
.property-meta {
    font-size: 0.85rem;
    line-height: 1.4;
}
.property-meta i {
    width: 20px;
}

/* Gallery thumbnails – flexible */
.gallery-thumb {
    cursor: pointer;
    transition: transform 0.2s;
}
.gallery-thumb:hover {
    transform: scale(1.02);
}
.gallery-thumb img {
    width: 100%;
    height: 150px;
    object-fit: cover;
}
@media (max-width: 768px) {
    .gallery-thumb img {
        height: 120px;
    }
}

/* Flex gallery container */
.d-flex.flex-wrap.gap-3 {
    gap: 1rem;
}
@media (max-width: 576px) {
    .d-flex.flex-wrap.gap-3 {
        gap: 0.75rem;
    }
    .gallery-item {
        width: calc(50% - 0.75rem) !important;
    }
}
@media (min-width: 577px) and (max-width: 768px) {
    .gallery-item {
        width: calc(33.33% - 1rem) !important;
    }
}

/* Ensure no horizontal overflow */
body {
    overflow-x: hidden;
}

/* Print styles */
@media print {
    .no-print, .navbar, .share-buttons, .qr-section, .modal, .btn {
        display: none !important;
    }
    body {
        background: white;
    }
    .container {
        width: 100%;
        padding: 0;
        margin: 0;
    }
}

/* Custom user CSS */
/* Custom CSS will be stored here */