/* ============================================================
   ParkSwap — public/css/responsive.css
   Mobile-first responsive overrides.
   Include DUPĂ jqx.material-purple.css în fiecare pagină:
   <link rel="stylesheet" href="../css/responsive.css">
   (sau "css/responsive.css" din index.php)
   ============================================================ */

/* ── Reset & baze ─────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
img  { max-width: 100%; height: auto; display: block; }

/* ── Variabile de breakpoint
   xs  < 480px   (telefon mic)
   sm  < 640px   (telefon mare)
   md  < 768px   (tableta portret)
   lg  < 1024px  (tableta landscape / laptop mic)
   xl  ≥ 1024px  (desktop)
──────────────────────────────────────────────────────────── */

/* ════════════════════════════════════════════════════════════
   NAVBAR (toate paginile)
════════════════════════════════════════════════════════════ */
.navbar {
    padding: 0 16px;
    height: 56px;
    flex-wrap: nowrap;
    gap: 8px;
}
.navbar-brand { font-size: 18px; flex-shrink: 0; }
.navbar-links  { display: flex; gap: 6px; align-items: center; flex-shrink: 0; }
.nav-btn       { padding: 7px 12px; font-size: 13px; }

@media (max-width: 480px) {
    .navbar-links .nav-btn-outline { display: none; } /* Ascunde "Listează" pe telefon mic */
    .nav-btn-solid { padding: 6px 10px; font-size: 12px; }
}

/* ════════════════════════════════════════════════════════════
   INDEX — Homepage (Leaflet + jqxGrid)
════════════════════════════════════════════════════════════ */
.main-layout {
    display: flex;
    flex-direction: column;
    height: auto;           /* override height: calc(100vh - 60px) */
}

/* Pe desktop: grid 2 coloane */
@media (min-width: 1024px) {
    .main-layout {
        display: grid;
        grid-template-columns: 380px 1fr;
        grid-template-rows: auto 1fr;
        height: calc(100vh - 56px);
    }
    .filter-panel { grid-row: 1; grid-column: 1; }
    .grid-panel   { grid-row: 2; grid-column: 1; }
    .map-section  { grid-row: 1 / 3; grid-column: 2; }
    #map { height: 100%; min-height: 400px; }
}

/* Mobil / Tabletă: harta sus, grid jos */
@media (max-width: 1023px) {
    .map-section  { order: 1; width: 100%; }
    #map          { height: 55vw; min-height: 220px; max-height: 400px; }
    .filter-panel { order: 2; flex-wrap: wrap; padding: 10px 12px; gap: 8px; }
    .grid-panel   { order: 3; }
    #spotsGrid    { height: 340px !important; }
    .filter-group { min-width: 120px; }
}

@media (max-width: 640px) {
    .filter-panel { gap: 6px; padding: 8px; }
    #btnSearch    { width: 100%; margin-top: 4px; }
}

/* ════════════════════════════════════════════════════════════
   LOGIN / REGISTER — card centrat
════════════════════════════════════════════════════════════ */
.card {
    width: 100%;
    max-width: 420px;
    padding: 28px 20px;
}

@media (max-width: 480px) {
    body.auth-page { padding: 16px; }
    .card          { padding: 22px 16px; border-radius: 12px; }
    .card-title    { font-size: 20px; }
    .role-selector { gap: 8px; }
    .role-card     { padding: 12px 8px; }
    .role-card .role-icon  { font-size: 22px; }
    .role-card .role-title { font-size: 13px; }
    .role-card .role-desc  { display: none; } /* Ascunde descrierea pe ecrane mici */
    .field-row { flex-direction: column; gap: 0; }
    .type-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ════════════════════════════════════════════════════════════
   SPOT DETALIU — two-col layout
════════════════════════════════════════════════════════════ */
.page-grid {
    display: grid;
    grid-template-columns: 1fr 380px;
    gap: 24px;
    padding: 20px;
    max-width: 1280px;
    margin: 0 auto;
}

@media (max-width: 1023px) {
    .page-grid {
        grid-template-columns: 1fr;
        padding: 12px;
        gap: 16px;
    }
    .col-right { order: -1; }         /* Booking card sus pe tabletă/mobil */
    .booking-card { position: static; } /* Nu mai e sticky */
    #scheduler { height: 300px !important; }
    #miniMap   { height: 180px !important; }
    .gallery-main { height: 240px; }
}

@media (max-width: 640px) {
    .page-grid  { padding: 8px; gap: 12px; }
    .gallery-main { height: 200px; }
    .spot-title   { font-size: 20px; }
    .price-box    { flex-wrap: wrap; gap: 4px; }
    .price-main   { font-size: 24px; }
    .info-card, .desc-card, .scheduler-card,
    .reviews-card, .booking-card { padding: 16px; border-radius: 10px; }
}

/* ════════════════════════════════════════════════════════════
   DASHBOARD DRIVER + HOST — app shell cu sidebar
════════════════════════════════════════════════════════════ */
.app-shell {
    display: flex;
    height: 100vh;
    overflow: hidden;
}

/* Sidebar overlay pe mobil */
.sidebar {
    position: relative;
    width: 220px;
    flex-shrink: 0;
    z-index: 200;
    transition: transform .25s ease;
}

@media (max-width: 1023px) {
    .sidebar {
        position: fixed;
        top: 0; left: 0; bottom: 0;
        transform: translateX(-100%);
        box-shadow: 4px 0 20px rgba(0,0,0,.2);
    }
    .sidebar.open { transform: translateX(0); }
    .main-content { width: 100%; }

    /* Buton hamburger */
    .topbar-hamburger {
        display: flex !important;
        align-items: center; justify-content: center;
        width: 36px; height: 36px;
        background: none; border: none; cursor: pointer;
        font-size: 20px; color: #1e293b; margin-right: 8px;
    }
    /* Overlay backdrop */
    .sidebar-backdrop {
        display: none;
        position: fixed; inset: 0;
        background: rgba(0,0,0,.4); z-index: 199;
    }
    .sidebar-backdrop.visible { display: block; }
}

@media (min-width: 1024px) {
    .topbar-hamburger { display: none !important; }
}

/* KPI row — 4 col pe desktop, 2 col pe tabletă, 2 col pe mobil */
.kpi-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
    margin-bottom: 20px;
}

@media (max-width: 1023px) {
    .kpi-row { grid-template-columns: repeat(2, 1fr); gap: 10px; }
}
@media (max-width: 480px) {
    .kpi-row { grid-template-columns: repeat(2, 1fr); gap: 8px; }
    .kpi-value { font-size: 20px; }
    .kpi-card  { padding: 12px 14px; }
}

/* Grid jqWidgets — scroll orizontal pe mobil */
.grid-card { overflow-x: auto; }
#bookingsGrid, #spotsGrid, #bookingsGridHost { min-width: 560px; }

/* Dashboard host — two-col charts */
.dash-grid {
    display: grid;
    grid-template-columns: 1fr 340px;
    gap: 20px;
    margin-bottom: 20px;
}

@media (max-width: 1023px) {
    .dash-grid { grid-template-columns: 1fr; }
}

/* ════════════════════════════════════════════════════════════
   LIST-SPOT — stepper + two-col
════════════════════════════════════════════════════════════ */
.stepper-bar {
    overflow-x: auto;
    padding: 0 12px;
    -webkit-overflow-scrolling: touch;
}
.step { white-space: nowrap; padding: 14px 12px; font-size: 13px; }

@media (max-width: 768px) {
    .step-label-text { display: none; } /* Doar numărul pe mobil */
    .step { padding: 14px 8px; }
    .step-connector { min-width: 16px; }
}

.two-col {
    display: grid;
    grid-template-columns: 1fr 380px;
    gap: 24px;
    align-items: start;
}

@media (max-width: 1023px) {
    .two-col { grid-template-columns: 1fr; }
    .preview-card { position: static; display: none; } /* Ascunde preview pe mobil */
}

.page-wrap { padding: 20px 16px; }

@media (max-width: 640px) {
    .page-wrap   { padding: 12px 8px; }
    .card        { padding: 18px 14px; border-radius: 10px; }
    .type-grid   { grid-template-columns: repeat(2, 1fr); }
    .field-row   { flex-direction: column; gap: 0; }
    .facilities-grid { grid-template-columns: 1fr; }
    #pickMap     { height: 260px !important; }
    .photos-preview { grid-template-columns: repeat(2, 1fr); }
}

/* ════════════════════════════════════════════════════════════
   ADMIN PANEL
════════════════════════════════════════════════════════════ */
@media (max-width: 1023px) {
    .kpi-row.admin-kpi { grid-template-columns: repeat(3, 1fr); }
    .charts-row        { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
    .kpi-row.admin-kpi { grid-template-columns: repeat(2, 1fr); }
    .content-scroll    { padding: 12px; }
    .topbar            { padding: 0 12px; }
    .global-search     { width: 140px; }
}

/* ════════════════════════════════════════════════════════════
   CHECKOUT
════════════════════════════════════════════════════════════ */
.checkout-grid {
    display: grid;
    grid-template-columns: 1fr 380px;
    gap: 24px;
}

@media (max-width: 1023px) {
    .checkout-grid { grid-template-columns: 1fr; }
    .summary-card  { order: -1; } /* Sumar rezervare sus pe mobil */
}

@media (max-width: 640px) {
    .checkout-wrap { padding: 0 8px; }
    .payment-card, .summary-card { padding: 18px 14px; border-radius: 12px; }
}

/* ════════════════════════════════════════════════════════════
   NOTIFICĂRI (Faza 4)
════════════════════════════════════════════════════════════ */
.notifications-page { max-width: 680px; margin: 0 auto; padding: 20px 16px; }

@media (max-width: 640px) {
    .notifications-page { padding: 12px 8px; }
}

/* ════════════════════════════════════════════════════════════
   REVIEW MODAL / PAGE
════════════════════════════════════════════════════════════ */
.review-form-card {
    background: #fff; border-radius: 16px;
    padding: 28px; max-width: 540px; margin: 0 auto;
    box-shadow: 0 4px 20px rgba(0,0,0,.1);
}

@media (max-width: 640px) {
    .review-form-card { padding: 18px 14px; border-radius: 10px; }
}

/* ════════════════════════════════════════════════════════════
   UTILITIES RESPONSIVE
════════════════════════════════════════════════════════════ */

/* Scroll orizontal pentru tabele jqWidgets pe ecrane mici */
.jqx-grid-scroll-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* Touch targets — minim 44px */
button, .nav-item, .role-card, .type-card, .facility-item, a.btn-reserve {
    min-height: 44px;
}
.nav-btn { min-height: 36px; } /* excepție navbar */

/* Spațiere conținut sub navbar sticky */
.content-below-navbar { padding-top: 56px; }

/* Text overflow pe ecrane mici */
.truncate-mobile {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Ascunde pe mobil */
@media (max-width: 640px) {
    .hide-mobile { display: none !important; }
}
/* Ascunde pe desktop */
@media (min-width: 1024px) {
    .hide-desktop { display: none !important; }
}

/* ════════════════════════════════════════════════════════════
   jqWidgets overrides pentru mobil
   (dimensiuni fixe din jqWidgets trebuie suprascrise)
════════════════════════════════════════════════════════════ */
@media (max-width: 640px) {
    .jqx-widget-header { font-size: 12px !important; }
    .jqx-grid-cell     { font-size: 12px !important; }
    .jqx-grid-cell-pinned { display: none; }

    /* Scheduler compact pe mobil */
    .jqx-scheduler-time-column { width: 40px !important; }
    .jqx-scheduler-cell        { font-size: 11px !important; }

    /* Dropdown listbox mai mare pentru touch */
    .jqx-listitem-element { min-height: 40px !important; line-height: 40px !important; }

    /* Notification — full width pe mobil */
    .jqx-notification { width: calc(100vw - 24px) !important; left: 12px !important; right: 12px !important; }
}

/* ════════════════════════════════════════════════════════════
   SAFE AREA iPhone (notch / home bar)
════════════════════════════════════════════════════════════ */
@supports (padding: max(0px)) {
    .navbar { padding-left: max(16px, env(safe-area-inset-left)); padding-right: max(16px, env(safe-area-inset-right)); }
    .sidebar { padding-bottom: env(safe-area-inset-bottom); }
    body { padding-bottom: env(safe-area-inset-bottom); }
}