/*
   Responsive enhancement layer. It intentionally overrides layout only;
   page behaviour and desktop presentation remain unchanged.
*/

.mobile-nav-toggle,
.mobile-nav-backdrop {
    display: none;
}

/* Authentication pages: keep Login, Register and password recovery fully
   visible and usable on narrow phones without changing their page markup. */
@media (max-width: 767px) {
    .auth-layout {
        min-height: 100dvh !important;
        align-items: flex-start !important;
        padding: 1.25rem 0.875rem 2rem !important;
        overflow-y: auto;
    }

    .auth-container {
        max-width: 100% !important;
        margin: 0 auto;
    }

    .auth-header {
        margin: 0.25rem 0 1rem !important;
    }

    .auth-logo {
        font-size: 1.3rem !important;
    }

    .auth-logo .brand-logo-auth {
        width: 40px !important;
        height: 40px !important;
        flex-basis: 40px !important;
    }

    .auth-header h2,
    .auth-card h2 {
        font-size: 1.35rem !important;
        line-height: 1.25;
    }

    .auth-card {
        padding: 1.25rem !important;
        border-radius: 10px !important;
    }

    .auth-card .form-control,
    .auth-card .contact-input {
        min-height: 44px;
        font-size: 16px !important;
    }

    .auth-card button[type="submit"] {
        min-height: 44px;
    }
}

/* Small landscape phones can have very limited height; reduce only spacing. */
@media (max-width: 767px) and (max-height: 600px) {
    .auth-layout { padding-top: 0.75rem !important; }
    .auth-header { margin-bottom: 0.65rem !important; }
    .auth-card { padding: 1rem !important; }
    .auth-card .form-group { margin-bottom: 0.85rem; }
}

/* Phone and tablet use normal document scrolling. The desktop shell is a
   fixed-height flex layout; keeping that model on shorter screens cuts long
   forms and admin pages below the viewport. */
@media (max-width: 1399px) {
    html,
    body {
        height: auto !important;
        min-height: 100%;
        overflow-y: auto !important;
        overscroll-behavior-y: auto;
    }

    .app-wrapper {
        display: block;
        min-height: 100dvh;
        height: auto !important;
        overflow: visible !important;
    }

    .main-content {
        height: auto !important;
        min-height: 100dvh !important;
        overflow: visible !important;
    }

    .page-content {
        min-height: calc(100dvh - var(--header-height));
        height: auto !important;
        overflow: visible !important;
        padding-bottom: 5rem !important;
    }
}

/* Tablet: retain navigation in a compact rail and preserve page workspace. */
@media (min-width: 768px) and (max-width: 1199px) {
    :root { --sidebar-width: 72px; }

    .sidebar-header {
        padding: 0;
        justify-content: center;
        font-size: 0;
    }

    .sidebar-header .brand-logo-sidebar { margin: 0; }

    .sidebar-search {
        padding: 0.75rem !important;
        min-height: auto;
    }

    .sidebar-search input { display: none !important; }
    .sidebar-search i { position: static !important; display: block; text-align: center; font-size: 1.1rem; }

    .sidebar-nav { padding: 0 0.5rem; }
    .sidebar-footer { padding: 1rem 0.5rem; }

    .sidebar .nav-item,
    .sidebar-footer a {
        justify-content: center;
        padding: 0.7rem;
        font-size: 0;
    }

    .sidebar .nav-item i,
    .sidebar-footer a i {
        margin: 0 !important;
        font-size: 1.05rem;
    }

    .main-content { margin-left: var(--sidebar-width); }
    .page-content { padding: 1.25rem; }
    .topbar { padding: 0.5rem 1.25rem; }

    /* Forms and card grids remain readable instead of overflowing sideways. */
    .page-content [style*="grid-template-columns"] { grid-template-columns: 1fr !important; }
    .page-content [style*="minmax(280px"] { grid-template-columns: 1fr !important; }
    .page-content [style*="justify-content: space-between"] { gap: 0.75rem; }
    .page-content [style*="padding: 1.5rem 1.75rem"],
    .page-content [style*="padding: 1.25rem 1.75rem"] { padding-left: 1.25rem !important; padding-right: 1.25rem !important; }

    .data-table { overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .data-table table { min-width: 720px; }
}

/* Phone: an off-canvas navigation drawer keeps all user and admin links usable. */
@media (max-width: 767px) {
    body { overflow-x: hidden; }

    .main-content {
        margin-left: 0 !important;
        height: auto;
        min-height: 100dvh;
        overflow: visible;
    }

    .sidebar {
        width: min(82vw, 300px) !important;
        transform: translateX(-105%);
        transition: transform 0.22s ease;
        box-shadow: 12px 0 28px rgba(0, 0, 0, 0.2);
        z-index: 1200;
    }

    body.mobile-nav-open .sidebar { transform: translateX(0); }

    .mobile-nav-backdrop {
        position: fixed;
        inset: 0;
        z-index: 1100;
        background: rgba(15, 23, 42, 0.52);
    }

    body.mobile-nav-open .mobile-nav-backdrop { display: block; }

    .mobile-nav-toggle {
        display: inline-flex !important;
        position: relative;
        z-index: 1001;
        width: 38px;
        height: 38px;
        align-items: center;
        justify-content: center;
        border: 1px solid #2563eb;
        border-radius: 8px;
        background: #2563eb;
        color: #fff;
        box-shadow: 0 3px 8px rgba(37, 99, 235, 0.25);
        font-size: 1.4rem;
    }

    .topbar {
        min-height: 58px;
        padding: 0.5rem 1rem;
        gap: 0.5rem;
    }

    .topbar > div:last-child { gap: 0.45rem !important; }
    #topbar-sync-btn { display: none !important; }
    #profileBtn > div:last-child { display: none !important; }
    #notifMenu { position: fixed !important; top: 62px !important; right: 0.75rem !important; width: min(280px, calc(100vw - 1.5rem)) !important; }
    #profileMenu { position: fixed !important; top: 62px !important; right: 0.75rem !important; width: min(260px, calc(100vw - 1.5rem)) !important; }

    .page-content {
        padding: 1rem;
        overflow: visible;
    }

    .page-content[style] { margin-bottom: 4.5rem !important; }

    h1 { font-size: clamp(1.4rem, 7vw, 1.85rem) !important; line-height: 1.2; }
    .stat-grid { grid-template-columns: 1fr; gap: 1rem; }
    .stat-card { padding: 1rem; }

    .page-top,
    .filters-row,
    .filters-left,
    .filters-right {
        align-items: stretch !important;
    }

    .page-top > div,
    .filters-left,
    .filters-right { width: 100%; }

    .page-top .btn-bulk,
    .filters-right .btn-action { justify-content: center; }

    .filters-left { flex-wrap: wrap; }
    .search-wrap,
    .search-wrap input,
    .filter-select { width: 100% !important; max-width: none !important; }
    .filter-divider { display: none; }
    .filter-select { flex: 1 1 100%; }

    .data-table,
    .inbox-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .data-table table { min-width: 680px; }

    /* Admin filters and action bars use inline layouts; stack them safely. */
    .page-content input[placeholder*="Search"],
    .page-content select.form-control { width: 100% !important; }
    .page-content [style*="grid-template-columns"] { grid-template-columns: 1fr !important; }
    .page-content [style*="justify-content: space-between"] { gap: 0.75rem; }
    .page-content [style*="padding: 1.5rem 1.75rem"],
    .page-content [style*="padding: 1.25rem 1.75rem"] { padding-left: 1rem !important; padding-right: 1rem !important; }
    .page-content [style*="display: flex"][style*="gap: 10px"] { flex-wrap: wrap; }

    /* Gmail connection controls and profile headings can contain long text. */
    #connect-gmail-btn,
    #disconnect-btn { width: 100%; justify-content: center; }
    #connection-status-badge { max-width: 100%; white-space: normal; }

    .support-channel { padding: 1rem; }
    #support-success-modal > div { padding: 1.5rem !important; }

    body.dark-mode .mobile-nav-toggle {   color: #fff !important; }
}

/* Wide desktop: no layout changes; this block simply preserves a clear content rhythm. */
@media (min-width: 1024px) {
    .data-table { overflow-x: auto; }
}