/* static/css/responsive.css
   Global mobile safety-net for Evndz. Loaded AFTER theme.css / admin.css / vendor.css.
   Page-specific layouts stay in their own templates; this only fixes the common breakages
   (wide tables, overflowing forms/images, admin sidebar backdrop, notification dropdown). */

img, video { max-width: 100%; }

/* ---------- Tablet & phone (<= 768px) ---------- */
@media (max-width: 768px) {
    body { overflow-x: hidden; }

    /* Wide tables scroll sideways inside the page instead of stretching it */
    main table,
    .admin-content table,
    .vendor-content table {
        display: block;
        max-width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    main table th { white-space: nowrap; }
    main table td { min-width: 90px; }

    /* Forms never wider than the screen */
    input, select, textarea { max-width: 100%; min-width: 0; }

    /* Long words / emails / URLs wrap instead of pushing the page wide */
    .admin-content, .vendor-content, main { overflow-wrap: break-word; }

    /* Page title rows wrap */
    .dash-header, .page-header, .btn-row { flex-wrap: wrap; gap: 10px; }

    /* ----- Admin / Normal-admin sidebar: dark backdrop + narrower drawer ----- */
    .admin-sidebar { width: min(280px, 85vw); overflow-y: auto; }
    .admin-backdrop {
        display: block;
        position: fixed;
        inset: 0;
        background: rgba(26, 26, 46, 0.45);
        z-index: 90;
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.3s ease;
    }
    .admin-body.sidebar-open .admin-backdrop { opacity: 1; pointer-events: auto; }
    .admin-body.sidebar-open { overflow: hidden; }
    .admin-topbar .topbar-date { display: none; }
}

/* ---------- Phone (<= 640px) ---------- */
@media (max-width: 640px) {
    .form-row-2col, .form-row-3col { grid-template-columns: 1fr !important; }
    .btn { min-height: 40px; }

    /* Notification dropdown never wider than the screen */
    .notif-dropdown { max-width: calc(100vw - 24px); }
    .admin-body .notif-dropdown {
        position: fixed !important;
        top: 60px !important;
        left: 12px !important;
        right: 12px !important;
        width: auto !important;
        max-width: none !important;
        max-height: calc(100vh - 80px) !important;
    }
}

/* Backdrop is hidden on desktop */
@media (min-width: 769px) { .admin-backdrop { display: none; } }