/* ═══════════════════════════════════════════════════════════════════════════
   Groww Up — Responsive Styles (Mobile / Tablet / Desktop)
   Include in every JSP: <link rel="stylesheet" href="/css/responsive.css"/>

   Breakpoints:
     • Mobile     :  ≤ 480px
     • Phablet    :  481px – 640px
     • Tablet     :  641px – 1024px
     • Desktop    :  > 1024px
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Base: improve touch targets & text rendering ────────────────────────── */
html {
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
    scroll-behavior: smooth;
}

button, a, .btn, .chip, .filter-btn, .sidebar-link,
input, select, textarea {
    -webkit-tap-highlight-color: transparent;
}

img { max-width: 100%; height: auto; }

/* ═══════════════════════════════════════════════════════════════════════════
   TABLET  (641px – 1024px)
   ═══════════════════════════════════════════════════════════════════════════ */
@media (min-width: 641px) and (max-width: 1024px) {

    /* ── Sidebar on tablet: auto-collapse ── */
    body:not(.sidebar-collapsed) .sidebar {
        width: 60px;
    }
    body:not(.sidebar-collapsed) .sidebar-brand { display: none; }
    body:not(.sidebar-collapsed) .link-text { display: none; }
    body:not(.sidebar-collapsed) .sidebar-badge { display: none; }
    body:not(.sidebar-collapsed) .sidebar-section-label { display: none; }
    body:not(.sidebar-collapsed) .sidebar-divider { display: none; }
    body:not(.sidebar-collapsed) .sidebar-user { display: none; }
    body:not(.sidebar-collapsed) .sidebar-link { justify-content: center; padding: 10px 6px; }
    body:not(.sidebar-collapsed) .sidebar-ai-btn { justify-content: center; padding: 10px 6px; }
    body:not(.sidebar-collapsed) .sidebar-logout-btn { justify-content: center; padding: 10px 6px; }
    body:not(.sidebar-collapsed) .sidebar-toggle { transform: rotate(180deg); }
    body:not(.sidebar-collapsed) .sidebar-nav { padding: 12px 6px 4px; }
    body:not(.sidebar-collapsed) .sidebar-header { padding: 16px 8px; justify-content: center; gap: 0; }
    body:not(.sidebar-collapsed) .sidebar-footer { padding: 10px 6px; }
    body:not(.sidebar-collapsed) .main { margin-left: 60px; }
    body:not(.sidebar-collapsed) .page-wrap { margin-left: 60px; }

    /* ── Business grid: 2 columns on tablet ── */
    .business-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 16px;
    }

    /* ── Card controls wrap better ── */
    .card-controls {
        gap: 6px;
    }
    .card-controls form {
        flex-shrink: 0;
    }
    .extend-form {
        min-width: 0;
        flex: 1 1 180px;
    }

    /* ── Page header ── */
    .page-header {
        gap: 12px;
    }

    /* ── Search/filter bar: wrap filters below search ── */
    .search-filter-bar {
        gap: 10px;
    }
    .filter-chips {
        width: 100%;
        overflow-x: auto;
        flex-wrap: nowrap;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        padding-bottom: 2px;
    }
    .filter-chips::-webkit-scrollbar { display: none; }
    .filter-ddl {
        min-width: 150px;
    }

    /* ── QR page layout ── */
    .layout {
        grid-template-columns: 1fr 280px !important;
        gap: 16px;
    }

    /* ── Hero on QR page ── */
    .hero {
        padding: 28px 24px;
    }
    .hero-name {
        font-size: 22px !important;
    }
    .hero-emoji {
        font-size: 48px !important;
    }

    /* ── Tables: ensure scrollable ── */
    .table-card {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* ── Main content padding ── */
    .main {
        padding: 28px 20px;
    }

    /* ── Detail grids ── */
    .detail-grid {
        gap: 12px;
    }

    /* ── Review cards on admin review page ── */
    .review-card {
        padding: 18px 20px;
    }

    /* ── Pending cards ── */
    .pending-top {
        flex-direction: column;
    }
    .pending-actions {
        width: 100%;
    }

    /* ── Filter card on audit log ── */
    .filter-row {
        flex-wrap: wrap;
    }
    .filter-group {
        flex: 1;
        min-width: 140px;
    }

    /* ── Portal: review cards ── */
    .reviews-section {
        padding: 0 20px;
    }

    /* ── Modal ── */
    .modal {
        max-width: 420px;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   PHABLET (481px – 640px)
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 640px) {

    /* ── Business grid: single column ── */
    .business-grid {
        grid-template-columns: 1fr !important;
        gap: 14px;
    }

    /* ── Card stats: keep readable ── */
    .card-stats {
        gap: 10px;
        padding: 10px 0;
    }
    .stat-value {
        font-size: 18px;
    }

    /* ── Card controls: stack vertically ── */
    .card-controls {
        flex-direction: column;
        gap: 8px;
    }
    .card-controls form {
        width: 100%;
    }
    .card-controls .btn {
        width: 100%;
        justify-content: center;
    }
    .extend-form {
        width: 100%;
    }
    .extend-select {
        flex: 1;
    }

    /* ── Card actions row: wrap ── */
    .card-actions {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 6px;
    }
    .card-actions .btn {
        justify-content: center;
        text-align: center;
        font-size: 12px;
        padding: 7px 8px;
    }

    /* ── Search/filter: vertical stack ── */
    .search-filter-bar {
        flex-direction: column;
        gap: 10px;
    }
    .search-box {
        min-width: 100%;
    }
    .filter-chips {
        width: 100%;
        overflow-x: auto;
        flex-wrap: nowrap;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        padding-bottom: 4px;
    }
    .filter-chips::-webkit-scrollbar { display: none; }
    .filter-ddl {
        width: 100%;
        min-width: unset;
    }

    /* ── Page header: stack title and button ── */
    .page-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }
    .page-header .btn {
        width: 100%;
        justify-content: center;
    }

    /* ── Main content ── */
    .main {
        padding: 20px 14px;
    }

    /* ── Navbar ── */
    .navbar {
        padding: 0 14px;
    }

    /* ── Tables: ensure horizontal scroll ── */
    .table-card {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        border-radius: 12px;
    }
    table {
        min-width: 560px;
    }
    th, td {
        padding: 10px 12px;
    }

    /* ── QR Page: single column ── */
    .layout {
        grid-template-columns: 1fr !important;
        gap: 20px;
    }

    /* ── Hero on QR page ── */
    .hero {
        padding: 20px 16px;
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }
    .hero-emoji {
        font-size: 40px !important;
    }
    .hero-name {
        font-size: 18px !important;
    }

    /* ── QR display card ── */
    .qr-frame-inner img {
        width: 180px !important;
        height: 180px !important;
    }

    /* ── Business header on detail page ── */
    .biz-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
        padding: 18px;
    }

    /* ── Detail grid: single column ── */
    .detail-grid {
        grid-template-columns: 1fr !important;
        gap: 14px;
    }

    /* ── Page actions: stack ── */
    .page-actions {
        flex-direction: column;
        gap: 8px;
    }
    .page-actions .btn {
        width: 100%;
        justify-content: center;
    }

    /* ── Reviews page header ── */
    .biz-info {
        flex-direction: column;
        gap: 8px;
    }

    /* ── Review card top: stack ── */
    .review-top {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }
    .review-actions {
        width: 100%;
        display: flex;
    }
    .review-actions .btn {
        flex: 1;
        justify-content: center;
    }

    /* ── Form row: single column ── */
    .form-row {
        grid-template-columns: 1fr !important;
        gap: 0;
    }

    /* ── Form card ── */
    .form-card {
        padding: 22px 16px;
    }

    /* ── Form actions: stack ── */
    .form-actions {
        flex-direction: column;
    }
    .form-actions .btn {
        width: 100%;
        justify-content: center;
    }

    /* ── Breadcrumb ── */
    .breadcrumb {
        font-size: 13px;
        flex-wrap: wrap;
    }

    /* ── Pending cards ── */
    .pending-top {
        flex-direction: column;
        gap: 12px;
    }
    .pending-actions {
        width: 100%;
        flex-direction: column;
        gap: 10px;
    }
    .pending-detail {
        grid-template-columns: 1fr !important;
    }
    .reject-input {
        width: 100% !important;
    }
    .reject-row {
        width: 100%;
    }

    /* ── Upload row ── */
    .upload-row {
        flex-direction: column;
        gap: 10px;
    }
    .upload-row .btn {
        width: 100%;
        justify-content: center;
    }

    /* ── Alerts ── */
    .alert {
        font-size: 13px;
        padding: 12px 14px;
    }

    /* ── Pagination ── */
    .pagination {
        gap: 4px;
    }
    .page-btn {
        min-width: 32px;
        height: 32px;
        font-size: 12px;
    }

    /* ── Modal ── */
    .modal {
        margin: 16px;
        max-width: calc(100% - 32px);
        padding: 24px 18px;
    }

    /* ── Portal header ── */
    .portal-header {
        padding: 24px 14px 20px;
    }
    .biz-emoji {
        font-size: 40px;
        margin-bottom: 8px;
    }
    .biz-name {
        font-size: 18px;
    }
    .portal-title {
        font-size: 13px;
    }

    /* ── Filter bar ── */
    .filter-bar {
        padding: 12px 12px 0;
        gap: 6px;
    }
    .filter-btn {
        padding: 6px 12px;
        font-size: 12px;
    }

    /* ── Portal review cards ── */
    .reviews-section {
        padding: 12px 12px 0;
    }
    .review-card {
        flex-direction: column;
        gap: 12px;
        padding: 16px;
    }
    .card-divider {
        display: none;
    }
    .card-actions {
        width: 100%;
    }
    .btn-post-card {
        width: 100%;
    }
    .custom-review-section {
        padding: 0 12px;
    }

    /* ── Filter card on audit log ── */
    .filter-row {
        flex-direction: column;
        gap: 10px;
    }
    .filter-group {
        width: 100%;
    }
    .filter-group input {
        width: 100%;
    }
    .filter-actions {
        width: 100%;
        justify-content: stretch;
    }
    .filter-actions .btn {
        flex: 1;
        justify-content: center;
    }

    /* ── Contact message cards ── */
    .msg-header {
        flex-direction: column;
    }

    /* ── Change password ── */
    .form-actions .btn-primary,
    .form-actions .btn-cancel {
        width: 100%;
        text-align: center;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   MOBILE  (≤ 480px)
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 480px) {

    /* ── Slightly smaller font sizes ── */
    .page-title {
        font-size: 20px !important;
    }
    .page-subtitle {
        font-size: 13px;
    }

    /* ── Business card tweaks ── */
    .business-card {
        padding: 18px 14px;
    }
    .card-emoji {
        font-size: 30px;
    }
    .card-name {
        font-size: 15px;
    }
    .card-meta, .card-contact {
        font-size: 12px;
    }
    .stat-value {
        font-size: 16px;
    }

    /* ── Smaller card action buttons ── */
    .card-actions {
        grid-template-columns: 1fr 1fr;
    }
    .card-actions .btn {
        font-size: 11px;
        padding: 6px 6px;
    }

    /* ── Tighter spacing ── */
    .main {
        padding: 16px 10px;
    }

    /* ── Login card ── */
    .login-card {
        padding: 24px 18px 20px;
    }

    /* ── Portal blocked & redirect ── */
    .wrapper {
        padding: 0 10px;
    }
    .reason-card {
        padding: 16px 12px;
    }

    /* ── Steps card ── */
    .steps-card {
        padding: 20px 16px;
    }
    .celebration-title {
        font-size: 22px;
    }

    /* ── QR Code display ── */
    .qr-display-card {
        padding: 20px 16px;
    }
    .qr-frame-inner img {
        width: 160px !important;
        height: 160px !important;
    }

    /* ── Info cards ── */
    .info-card {
        padding: 16px;
    }
    .url-box {
        font-size: 11px;
    }
    .btn-lg {
        padding: 10px 14px;
        font-size: 13px;
    }

    /* ── Review text ── */
    .review-text {
        font-size: 13px;
        line-height: 1.6;
    }

    /* ── Validity row ── */
    .validity-row {
        font-size: 12px;
    }

    /* ── Badge ── */
    .badge {
        font-size: 11px;
        padding: 2px 8px;
    }

    /* ── Toast ── */
    .toast {
        font-size: 13px;
        padding: 8px 16px;
    }

    /* ── Topbar ── */
    .topbar {
        padding: 0 12px;
        height: 50px;
    }
    .topbar-brand {
        font-size: 15px;
    }

    /* ── Empty states ── */
    .empty-state {
        padding: 40px 16px;
    }
    .empty-icon {
        font-size: 42px;
    }
    .empty-title {
        font-size: 16px;
    }
    .empty-text {
        font-size: 13px;
    }

    /* ── Card header detail page ── */
    .biz-header-name {
        font-size: 18px;
    }
    .biz-emoji-lg {
        font-size: 40px;
    }

    /* ── Detail labels ── */
    .detail-label {
        font-size: 11px;
    }
    .detail-value {
        font-size: 14px;
    }

    /* ── Pending ── */
    .biz-name {
        font-size: 15px;
    }
    .biz-meta {
        font-size: 12px;
    }
    .btn-approve, .btn-reject {
        width: 100%;
        text-align: center;
        justify-content: center;
        padding: 10px;
    }

    /* ── Star picker on mobile ── */
    .star-picker label {
        font-size: 28px !important;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   LARGE DESKTOP (> 1400px) — use extra width wisely
   ═══════════════════════════════════════════════════════════════════════════ */
@media (min-width: 1400px) {
    .business-grid {
        grid-template-columns: repeat(3, 1fr) !important;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   Touch / Hover improvements
   ═══════════════════════════════════════════════════════════════════════════ */
@media (hover: none) and (pointer: coarse) {
    /* Mobile: increase tap targets to 44px min */
    .btn, .btn-sm, .chip, .filter-btn {
        min-height: 44px;
        display: inline-flex;
        align-items: center;
    }

    .sidebar-link {
        min-height: 44px;
    }

    /* Remove hover effects on touch devices — they stick */
    .business-card:hover {
        box-shadow: 0 1px 4px rgba(0,0,0,.06);
        transform: none;
    }
    .review-card:hover {
        box-shadow: none;
        transform: none;
    }

    /* Better focus states for accessibility */
    button:focus-visible,
    a:focus-visible,
    input:focus-visible,
    select:focus-visible,
    textarea:focus-visible {
        outline: 2px solid #1A73E8;
        outline-offset: 2px;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   Landscape phone adjustments
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-height: 500px) and (orientation: landscape) {
    .portal-header {
        padding: 16px 16px 12px;
    }
    .biz-emoji {
        font-size: 32px;
        margin-bottom: 4px;
    }
    .biz-name {
        font-size: 16px;
    }
    .portal-title {
        margin-top: 8px;
        font-size: 12px;
    }
    .filter-bar {
        padding: 8px 12px 0;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   Print — keep clean on all views
   ═══════════════════════════════════════════════════════════════════════════ */
@media print {
    .sidebar, .topbar, .sidebar-overlay { display: none !important; }
    .main, .page-wrap { margin-left: 0 !important; }
    .btn, .card-controls, .card-actions, .page-actions { display: none !important; }
}