/* ═══════════════════════════════════════════════════════════════
   AMC · HABARI — Responsive Overrides
   Page-specific and component breakpoint adjustments.
   The main layout breakpoints (sidebar, bottom-nav, grid)
   are handled in layout.css.
   ═══════════════════════════════════════════════════════════════ */

/* ── Login page ── */
@media (max-width: 900px) {
    .login-left {
        max-width: 100%;
    }

    .login-right {
        display: none;
    }
}

/* ── Dashboard ── */
@media (min-width: 768px) and (max-width: 1100px) {
    .dash-metrics {
        grid-template-columns: repeat(2, 1fr);
    }

    .dash-panels {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 767px) {
    .dash-metrics {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: var(--sp-4);
    }

    .dash-panels {
        grid-template-columns: 1fr;
    }
}

/* ── Patients ── */
@media (max-width: 767px) {
    .patients-register-btn {
        display: none;
    }
}

/* ── Verification ── */
@media (max-width: 600px) {
    .verify-inputs {
        flex-direction: column;
    }

    .verify-input-wrap {
        max-width: 100% !important;
    }

    .verify-info-grid {
        grid-template-columns: 1fr;
    }

    .verify-result-stamp-hero {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* ── Form pages ── */
@media (max-width: 640px) {
    .form-row {
        grid-template-columns: 1fr;
    }
}

/* ── Topbar ── */
@media (max-width: 767px) {
    .topbar-title {
        font-size: .88rem;
    }
}

/* ── Profile page ── */
@media (max-width: 767px) {
    .profile-hero-card {
        padding: var(--sp-3) !important;
    }

    .profile-hero-row {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--sp-3) !important;
    }

    .profile-hero-main {
        gap: var(--sp-3) !important;
    }

    .profile-hero-avatar>svg {
        width: 44px !important;
        height: 44px !important;
    }

    .profile-hero-name {
        font-size: 1.25rem !important;
    }

    .profile-hero-meta {
        gap: var(--sp-2) !important;
        flex-direction: column;
    }

    .profile-hero-actions {
        align-items: flex-start !important;
        width: 100%;
        gap: var(--sp-2) !important;
        flex-direction: column !important;
        justify-content: flex-start;
    }

    .profile-hero-action-buttons {
        width: 100%;
        flex-wrap: wrap;
        justify-content: flex-start;
    }

    .profile-completion-badges {
        justify-content: flex-start !important;
        width: 100%;
    }

    .profile-completion-badge {
        max-width: 100%;
    }

    .profile-grid-2 {
        grid-template-columns: 1fr !important;
    }

    .timeline-item {
        gap: var(--sp-2);
    }

    .timeline-item:not(:last-child)::before {
        left: 15px;
    }

    .timeline-dot {
        width: 32px;
        height: 32px;
    }

    .timeline-content {
        min-width: 0;
        width: 100%;
    }

    .timeline-content>div:first-child {
        flex-direction: column;
        align-items: flex-start !important;
    }

    .timeline-content>div:first-child>div:last-child {
        width: 100%;
        justify-content: flex-start;
        flex-wrap: wrap;
    }

    .timeline-content>div[style*="grid-template-columns:repeat(auto-fill, minmax(200px, 1fr))"] {
        grid-template-columns: 1fr !important;
    }

    /* Mobile Accordion Toggle Logic */
    .mobile-accordion-header {
        cursor: pointer;
        border-bottom: none !important;
        padding-bottom: 0 !important;
        margin-bottom: 0 !important;
    }

    .accordion-icon {
        display: block !important;
        transition: transform 0.2s ease;
    }

    .mobile-accordion-content {
        display: none !important;
        padding-top: var(--sp-4);
        border-top: 1px solid var(--c-border);
        margin-top: var(--sp-4);
    }

    .mobile-accordion.expanded .mobile-accordion-content {
        display: block !important;
    }

    .mobile-accordion.expanded .accordion-icon {
        transform: rotate(180deg);
    }
}

/* ── Vaccination record page ── */
@media (max-width: 767px) {
    .vaccination-record-page {
        max-width: 100% !important;
    }

    .vaccination-record-hero {
        padding: var(--sp-4) !important;
        gap: var(--sp-4) !important;
    }

    .vaccination-record-hero-main,
    .vaccination-record-hero-side {
        width: 100%;
        min-width: 0 !important;
    }

    .vaccination-record-hero-side {
        text-align: left !important;
    }

    .vaccination-record-grid {
        grid-template-columns: 1fr !important;
    }

    .vaccination-record-hero [style*="display:flex; align-items:center; gap:var(--sp-3); margin-bottom:var(--sp-2);"] {
        flex-wrap: wrap;
    }

    .modal-backdrop {
        align-items: flex-end;
        padding: var(--sp-3);
    }

    .modal {
        max-width: 100%;
        max-height: calc(100dvh - (var(--sp-3) * 2));
    }

    .modal-header,
    .modal-body,
    .modal-footer {
        padding-left: var(--sp-4);
        padding-right: var(--sp-4);
    }

    .modal-footer {
        position: sticky;
        bottom: 0;
        background: var(--c-surface-2);
        z-index: 1;
    }
}

@media (min-width: 768px) and (max-width: 1023px) {
    .vaccination-record-page {
        max-width: 100% !important;
    }

    .vaccination-record-grid {
        grid-template-columns: 1fr !important;
    }

    .modal-backdrop {
        padding: var(--sp-4);
    }

    .modal {
        max-height: calc(100dvh - (var(--sp-4) * 2));
    }
}

@media (max-width: 1023px) and (orientation: landscape) {
    .modal-backdrop {
        align-items: flex-start;
    }
}

/* ── Table horizontal scroll on mobile ── */
@media (max-width: 767px) {
    .table-wrap {
        border-radius: var(--r-md);
    }
}

/* ── Grid overrides on mid-size screens ── */
@media (min-width: 768px) and (max-width: 1023px) {
    .grid-3 {
        grid-template-columns: repeat(2, 1fr);
    }

    .profile-grid-2 {
        grid-template-columns: 1fr !important;
    }

    .profile-hero-row {
        align-items: flex-start !important;
    }

    .profile-hero-actions {
        width: 100%;
        align-items: flex-start !important;
    }
}

/* ── Bottom sheet ── */
.bottom-sheet.open {
    transform: translateY(0);
}

/* ── Utility: safe-area for devices with notches ── */
@supports (padding-bottom: env(safe-area-inset-bottom)) {
    .bottom-nav {
        padding-bottom: env(safe-area-inset-bottom);
        height: calc(var(--bottom-nav-h) + env(safe-area-inset-bottom));
    }
}