/* =========================
   NOBTI GLOBAL STYLE
   ========================= */

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    font-family: Arial, Tahoma, sans-serif;
    background: #f5f7fb;
    color: #0f172a;
}

a {
    color: #1d4ed8;
}

a:hover {
    color: #1e40af;
}

.navbar-brand {
    letter-spacing: 0.5px;
}

/* =========================
   HOME PAGE
   ========================= */

.hero-section {
    min-height: 70vh;
    background: linear-gradient(135deg, #111827, #1d4ed8);
    color: white;
    display: flex;
    align-items: center;
    padding: 60px 0;
}

.search-box {
    max-width: 500px;
}

/* =========================
   SHARED CARDS
   ========================= */

.info-card {
    background: white;
    border-radius: 22px;
    padding: 25px;
    min-height: 180px;
    box-shadow: 0 8px 25px rgba(15, 23, 42, 0.07);
    transition: 0.25s ease;
    border: 1px solid rgba(226, 232, 240, 0.9);
}

.info-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 14px 35px rgba(15, 23, 42, 0.10);
}

.info-card h4 {
    color: #1d4ed8;
    font-weight: bold;
    margin-bottom: 15px;
}

.report-item {
    background: #ffffff;
}

.report-item:hover {
    background: #f8fafc;
}

.badge {
    font-size: 0.85rem;
    padding: 7px 11px;
    border-radius: 999px;
}

.badge.bg-warning {
    color: #111827;
}

/* =========================
   DASHBOARD
   ========================= */

.dashboard-card {
    background: white;
    border-radius: 22px;
    padding: 25px;
    min-height: 150px;
    box-shadow: 0 8px 25px rgba(15, 23, 42, 0.07);
    border: 1px solid rgba(226, 232, 240, 0.9);
}

.dashboard-card h5 {
    color: #64748b;
    font-weight: bold;
    margin-bottom: 15px;
}

.dashboard-number {
    font-size: 42px;
    font-weight: bold;
    color: #1d4ed8;
}

/* =========================
   FILTER BOX
   ========================= */

.filter-box {
    background: white;
    border-radius: 22px;
    padding: 22px;
    box-shadow: 0 8px 25px rgba(15, 23, 42, 0.07);
    border: 1px solid rgba(226, 232, 240, 0.9);
}

.filter-box label {
    font-weight: bold;
    color: #334155;
}

.filter-box .btn {
    border-radius: 14px;
}

.filter-box .form-control,
.filter-box .form-select {
    border-radius: 14px;
}

/* =========================
   PLACES PAGE V2
   ========================= */

.places-hero {
    background: white;
    border-radius: 26px;
    padding: 28px;
    box-shadow: 0 8px 25px rgba(15, 23, 42, 0.07);
    border: 1px solid rgba(226, 232, 240, 0.9);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}

.section-kicker {
    display: inline-block;
    font-size: 0.8rem;
    font-weight: bold;
    color: #1d4ed8;
    background: #eff6ff;
    padding: 6px 12px;
    border-radius: 999px;
    margin-bottom: 10px;
}

.places-hero-actions {
    white-space: nowrap;
}

.places-stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 15px;
}

.mini-stat-card {
    background: white;
    border-radius: 18px;
    padding: 18px;
    border: 1px solid rgba(226, 232, 240, 0.9);
    box-shadow: 0 8px 25px rgba(15, 23, 42, 0.06);
}

.mini-stat-card .mini-stat-label {
    display: block;
    color: #64748b;
    font-weight: bold;
    margin-bottom: 8px;
}

.mini-stat-card strong {
    display: block;
    font-size: 30px;
    color: #1d4ed8;
}

.active-filters-box {
    background: #ffffff;
    border: 1px dashed #cbd5e1;
    border-radius: 18px;
    padding: 15px;
    display: flex;
    gap: 10px;
    align-items: center;
    flex-wrap: wrap;
}

.filter-chip {
    display: inline-block;
    background: #eff6ff;
    color: #1d4ed8;
    padding: 6px 12px;
    border-radius: 999px;
    font-weight: bold;
    font-size: 0.9rem;
}

.place-card {
    position: relative;
    overflow: hidden;
}

.place-card::before {
    content: "";
    position: absolute;
    inset-inline-start: 0;
    top: 0;
    bottom: 0;
    width: 5px;
    background: #cbd5e1;
}

.place-card-live::before {
    background: #198754;
}

.place-card-hot::before {
    background: #dc3545;
}

.place-card-expired::before {
    background: #94a3b8;
}

.place-card-top {
    display: flex;
    gap: 14px;
    align-items: flex-start;
}

.place-icon {
    width: 46px;
    height: 46px;
    border-radius: 16px;
    background: #eff6ff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.45rem;
    flex: 0 0 46px;
}

.place-meta {
    color: #64748b;
    font-size: 0.92rem;
}

.place-address {
    color: #334155;
    min-height: 48px;
}

.place-card hr {
    margin: 15px 0;
}

.current-status {
    background: #f8fafc;
    border-radius: 16px;
    padding: 14px;
    border: 1px solid #e2e8f0;
}

.current-status p {
    font-size: 0.95rem;
}

.status-title {
    font-weight: bold;
    color: #0f172a;
}

.expired-status {
    background: #f8fafc;
    border-radius: 16px;
    padding: 14px;
    border: 1px dashed #cbd5e1;
}

.no-report-status {
    background: #fff7ed;
    border-radius: 16px;
    padding: 14px;
    border: 1px dashed #fed7aa;
}

.current-status .badge {
    white-space: nowrap;
}

.empty-state-card {
    background: white;
    border-radius: 26px;
    padding: 45px 25px;
    box-shadow: 0 8px 25px rgba(15, 23, 42, 0.07);
    border: 1px solid rgba(226, 232, 240, 0.9);
}

.empty-state-icon {
    width: 78px;
    height: 78px;
    border-radius: 28px;
    background: #eff6ff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    margin-bottom: 18px;
}

/* =========================
   REPORT PAGE OPTIONS
   ========================= */

.option-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 15px;
}

.option-grid-time {
    grid-template-columns: repeat(5, 1fr);
}

.option-grid-status {
    grid-template-columns: repeat(3, 1fr);
}

.option-card {
    position: relative;
    display: block;
    background: #ffffff;
    border: 2px solid #e2e8f0;
    border-radius: 18px;
    padding: 18px;
    cursor: pointer;
    min-height: 105px;
    transition: 0.2s ease;
}

.option-card:hover {
    border-color: #1d4ed8;
    transform: translateY(-2px);
}

.option-card input {
    position: absolute;
    opacity: 0;
}

.option-card .option-title {
    display: block;
    font-weight: bold;
    font-size: 1.05rem;
    margin-bottom: 6px;
    color: #0f172a;
}

.option-card small {
    color: #64748b;
}

.option-card:has(input:checked) {
    border-color: #1d4ed8;
    background: #eff6ff;
    box-shadow: 0 8px 25px rgba(29, 78, 216, 0.15);
}

.option-success:has(input:checked) {
    border-color: #198754;
    background: #ecfdf3;
}

.option-warning:has(input:checked) {
    border-color: #ffc107;
    background: #fffbeb;
}

.option-danger:has(input:checked) {
    border-color: #dc3545;
    background: #fff1f2;
}

.option-dark:has(input:checked) {
    border-color: #212529;
    background: #f1f5f9;
}

/* =========================
   RESPONSIVE
   ========================= */

@media (max-width: 992px) {
    .places-hero {
        flex-direction: column;
        align-items: stretch;
    }

    .places-hero-actions {
        white-space: normal;
    }

    .places-stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .option-grid,
    .option-grid-time,
    .option-grid-status {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 576px) {
    .places-stats-grid {
        grid-template-columns: 1fr;
    }

    .option-grid,
    .option-grid-time,
    .option-grid-status {
        grid-template-columns: 1fr;
    }

    .info-card,
    .filter-box,
    .places-hero {
        border-radius: 18px;
        padding: 18px;
    }

    .dashboard-number {
        font-size: 34px;
    }
}
/* =========================================================
   NOBTI MOBILE DISPLAY FIX PACK
   Fix horizontal overflow on real phones / Chrome mobile
   ========================================================= */

@media (hover: none) and (pointer: coarse), (max-device-width: 900px) {

    html,
    body {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        overflow-x: hidden !important;
        margin: 0 !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    *,
    *::before,
    *::after {
        box-sizing: border-box !important;
    }

    body {
        position: relative !important;
        background: #f5f7fb !important;
    }

    /* Force app content to phone width */
    .container,
    .container-fluid,
    .report-container,
    .places-container,
    .nearby-container,
    .dashboard-container,
    .map-page-container,
    .add-place-container,
    .page-container {
        width: min(100%, 430px) !important;
        max-width: min(100%, 430px) !important;
        min-width: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding-left: 12px !important;
        padding-right: 12px !important;
    }

    /* Bootstrap rows/columns must stack on phone */
    .row {
        width: 100% !important;
        max-width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        display: flex !important;
        flex-direction: column !important;
    }

    .row > [class^="col-"],
    .row > [class*=" col-"],
    [class^="col-"],
    [class*=" col-"] {
        width: 100% !important;
        max-width: 100% !important;
        flex: 0 0 100% !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    /* Navbar full phone width */
    .nobti-navbar,
    .nobti-admin-navbar {
        width: min(100%, 430px) !important;
        max-width: min(100%, 430px) !important;
        min-width: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        left: 0 !important;
        right: auto !important;
        padding-left: 10px !important;
        padding-right: 10px !important;
    }

    .nobti-navbar-inner,
    .nobti-admin-navbar-inner {
        width: 100% !important;
        max-width: 100% !important;
    }

    .nobti-navbar-left {
        width: 100% !important;
        max-width: 100% !important;
    }

    .nobti-navbar-links,
    .nobti-admin-links {
        width: 100% !important;
        max-width: 100% !important;
    }

    /* Cards / panels */
    .card,
    .report-card,
    .sticky-report-card,
    .selected-place-card,
    .no-place-selected,
    .place-search-wrapper,
    .add-place-card,
    .admin-card,
    .health-panel,
    .integrity-panel,
    .sus-panel,
    .dup-card,
    .how-card,
    .how-hero-box,
    .how-trust-box,
    .how-final-cta,
    .nobti-launch-box {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    /* Forms */
    form,
    input,
    select,
    textarea,
    button {
        max-width: 100% !important;
    }

    .form-control,
    .form-select,
    .btn {
        max-width: 100% !important;
    }

    /* Report page options */
    .report-option-grid,
    .crowd-grid,
    .time-grid,
    .status-grid {
        display: grid !important;
        grid-template-columns: 1fr !important;
        width: 100% !important;
        max-width: 100% !important;
        gap: 10px !important;
    }

    .report-option-card {
        width: 100% !important;
        max-width: 100% !important;
        min-height: auto !important;
        padding: 14px !important;
    }

    .report-submit-box {
        width: 100% !important;
        max-width: 100% !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 12px !important;
    }

    .report-submit-box .btn {
        width: 100% !important;
    }

    /* Add place map/search section */
    #map,
    .leaflet-container,
    .place-map,
    .add-place-map,
    .map-picker-box,
    .map-picker-panel,
    .location-picker,
    .location-selected-box {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
    }

    .leaflet-container {
        min-height: 260px !important;
    }

    /* Search results/dropdowns */
    .place-search-results,
    .search-results,
    .dropdown-menu {
        width: 100% !important;
        max-width: 100% !important;
        left: 0 !important;
        right: 0 !important;
    }

    /* Home / launch / onboarding */
    .nobti-launch-section,
    .nobti-home-nearby-section {
        width: min(100%, 430px) !important;
        max-width: min(100%, 430px) !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding-left: 12px !important;
        padding-right: 12px !important;
    }

    .nobti-launch-grid,
    .how-grid,
    .how-trust-grid,
    .nobti-onboarding-steps,
    .nobti-mobile-quick-grid {
        grid-template-columns: 1fr !important;
    }

    /* Footer */
    .nobti-auto-footer,
    .home-footer {
        width: min(100%, 430px) !important;
        max-width: min(100%, 430px) !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        left: 0 !important;
        right: auto !important;
    }

    .nobti-auto-footer-inner {
        width: 100% !important;
        max-width: 100% !important;
        padding-left: 12px !important;
        padding-right: 12px !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        flex-direction: column !important;
        align-items: flex-start !important;
    }

    /* Mobile bottom nav */
    .nobti-mobile-bottom-nav {
        width: min(calc(100% - 20px), 410px) !important;
        max-width: min(calc(100% - 20px), 410px) !important;
        left: 10px !important;
        right: auto !important;
        grid-template-columns: repeat(5, 1fr) !important;
    }

    .nobti-mobile-nav-item {
        min-width: 0 !important;
        width: 100% !important;
    }

    .nobti-mobile-nav-label {
        font-size: 0.66rem !important;
        white-space: nowrap !important;
    }

    .nobti-mobile-quick-panel {
        width: min(calc(100% - 20px), 410px) !important;
        max-width: min(calc(100% - 20px), 410px) !important;
        left: 10px !important;
        right: auto !important;
    }

    /* Command search */
    .nobti-command-overlay {
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: hidden !important;
    }

    .nobti-command-box {
        width: min(100%, 410px) !important;
        max-width: min(100%, 410px) !important;
    }

    /* Prevent large tables/images from breaking screen */
    table,
    img,
    canvas,
    iframe,
    svg {
        max-width: 100% !important;
    }

    .table-responsive,
    .api-admin-table-wrap,
    .integrity-table-wrap,
    .sus-table-wrap,
    .dup-table-wrap {
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: auto !important;
    }
}