/* Mobile navigation & small-screen polish (loaded after the inline navbar styles in base.html) */

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

/* Stacked toast notifications (see showModernFlashToast in base.html) */
.modern-toast-stack { position: fixed; top: 72px; right: 20px; z-index: 10000; display: flex; flex-direction: column; gap: 10px; width: min(420px, calc(100vw - 24px)); pointer-events: none; }
[dir="rtl"] .modern-toast-stack { right: auto; left: 20px; }
.modern-toast-stack .modern-toast { position: relative; top: auto; right: auto; width: 100%; min-width: 0; max-width: none; pointer-events: auto; }
.modern-toast-message { overflow-wrap: anywhere; }

/* Keyboard / screen-reader shortcut past the navigation */
.skip-link { position: absolute; inset-inline-start: 8px; top: -60px; z-index: 10001; padding: .6rem 1rem; border-radius: 10px; background: #6366f1; color: #fff; font-weight: 600; font-size: .9rem; text-decoration: none; box-shadow: 0 6px 18px rgba(0, 0, 0, .3); transition: top .15s; }
.skip-link:focus { top: 8px; color: #fff; outline: 2px solid #fff; outline-offset: 2px; }
#main-content:focus { outline: none; }

@media (max-width: 991.98px) {
    body.nav-locked { overflow: hidden; }

    /* Safe areas (notched phones, viewport-fit=cover) */
    .modern-navbar { padding-top: env(safe-area-inset-top); padding-inline: env(safe-area-inset-left) env(safe-area-inset-right); }
    .modern-navbar .container-fluid { gap: 2px; padding-inline: 0.5rem 0.25rem; }
    .modern-navbar .navbar-brand { min-width: 0; margin-inline-end: auto; overflow: hidden; }
    .modern-navbar .brand-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

    /* Always-visible quick actions with unread counters */
    .mobile-quick { display: flex; align-items: center; }
    .mq-btn { position: relative; display: grid; place-items: center; width: 44px; height: 44px; color: #94a3b8; font-size: 1.2rem; border-radius: 10px; text-decoration: none; -webkit-tap-highlight-color: transparent; }
    .mq-btn:hover, .mq-btn:active { color: #e2e8f0; background: rgba(255, 255, 255, .06); }
    .mq-btn:focus-visible, .navbar-toggler:focus-visible { outline: 2px solid #a5b4fc; outline-offset: -2px; }
    .mq-badge { position: absolute; top: 4px; inset-inline-end: 2px; min-width: 17px; height: 17px; padding: 0 4px; border-radius: 999px; background: #e11d48; color: #fff; font-size: .62rem; font-weight: 700; line-height: 17px; text-align: center; box-shadow: 0 0 0 2px #0f172a; }
    .mq-badge.messages-badge { background: #6366f1; }

    .modern-navbar .navbar-toggler { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; -webkit-tap-highlight-color: transparent; }

    /* Slide-in panel: always rendered, moved off-screen when closed (no display toggling, so it animates both ways) */
    .modern-navbar .navbar-collapse {
        position: fixed; top: 0; bottom: 0; right: 0; left: auto;
        width: min(320px, 88vw); height: 100vh; height: 100dvh;
        display: flex !important; flex-direction: column; flex-wrap: nowrap; align-items: stretch;
        padding: calc(1rem + env(safe-area-inset-top)) 1rem calc(1.25rem + env(safe-area-inset-bottom));
        transform: translateX(105%); visibility: hidden;
        transition: transform .25s ease, visibility 0s linear .25s;
        overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
        box-shadow: -12px 0 40px rgba(0, 0, 0, .45);
        z-index: 9999;
    }
    [dir="rtl"] .modern-navbar .navbar-collapse { right: auto; left: 0; transform: translateX(-105%); box-shadow: 12px 0 40px rgba(0, 0, 0, .45); border-left: 0; border-right: 1px solid rgba(255, 255, 255, .08); }
    .modern-navbar .navbar-collapse.is-open { transform: none; visibility: visible; transition: transform .25s ease, visibility 0s; }
    .modern-navbar .navbar-collapse.show::before { content: none; }
    .modern-navbar .navbar-collapse > .navbar-nav { flex: 0 0 auto; width: 100%; margin: 0 !important; align-items: stretch; flex-direction: column; }
    .modern-navbar .navbar-collapse > .navbar-nav > .nav-item { width: 100%; }
    .modern-navbar .navbar-collapse .modern-nav-link { justify-content: flex-start; text-align: start; }

    .nav-backdrop { display: block; position: fixed; inset: 0; z-index: 9998; background: rgba(2, 6, 23, .6); opacity: 0; visibility: hidden; transition: opacity .25s ease, visibility 0s linear .25s; -webkit-tap-highlight-color: transparent; }
    .nav-backdrop.is-open { opacity: 1; visibility: visible; transition: opacity .25s ease, visibility 0s; }

    .nav-close { display: grid; place-items: center; width: 40px; height: 40px; border: 0; border-radius: 10px; background: rgba(255, 255, 255, .06); color: #94a3b8; }
    .nav-close:hover { color: #f1f5f9; background: rgba(255, 255, 255, .12); }
    .nav-close:focus-visible, .modern-navbar .navbar-collapse a:focus-visible { outline: 2px solid #a5b4fc; outline-offset: 2px; }

    .nav-usercard { display: flex; align-items: center; gap: .75rem; padding: .65rem .75rem; margin-bottom: .75rem; border-radius: 12px; background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .06); color: #e2e8f0; text-decoration: none; }
    .nav-usercard:hover { background: rgba(255, 255, 255, .09); color: #fff; }
    .nav-usercard img { width: 42px; height: 42px; flex: none; border-radius: 50%; object-fit: cover; background: #1e293b; }
    .nav-usercard-text { flex: 1; min-width: 0; line-height: 1.25; }
    .nav-usercard-text strong { display: block; font-size: .9rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .nav-usercard-text small { display: block; font-size: .74rem; color: #94a3b8; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .nav-usercard > .bi { color: #64748b; }
    [dir="rtl"] .nav-usercard > .bi { transform: scaleX(-1); }

    .nav-sep { height: 1px; margin: .5rem .25rem; background: rgba(255, 255, 255, .08); }

    /* Sub-menus expand inline inside the panel. design-system.css forces navbar dropdowns to
       position:absolute !important (which made them float over the following links), so beat it. */
    body .modern-navbar .navbar-collapse .dropdown-menu,
    body .modern-navbar .navbar-collapse .dropdown-menu.show {
        position: static !important; top: auto !important; left: auto !important; right: auto !important;
        width: 100% !important; max-height: none !important; overflow: visible !important;
        margin: 4px 0 8px !important; transform: none !important; float: none;
    }

    /* Comfortable tap targets */
    .modern-navbar .navbar-collapse .modern-nav-link { min-height: 44px; display: flex; align-items: center; gap: .6rem; }
    .modern-navbar .navbar-collapse .dropdown-toggle::after { margin-inline-start: auto; }
    .modern-navbar .navbar-collapse .dropdown-item { min-height: 44px; display: flex; align-items: center; gap: .5rem; }
    .modern-navbar .navbar-collapse .dropdown-header { display: flex; align-items: center; gap: .4rem; }

    .nav-lang { display: flex; align-items: center; gap: .4rem; padding: .35rem .25rem; color: #94a3b8; }
    .nav-lang > .bi { margin-inline: .5rem .25rem; }
    .nav-lang-btn { flex: 1; text-align: center; padding: .55rem .5rem; border: 1px solid rgba(255, 255, 255, .14); border-radius: 9px; color: #cbd5e1; text-decoration: none; font-size: .85rem; font-weight: 600; }
    .nav-lang-btn:hover { background: rgba(255, 255, 255, .06); color: #fff; }
    .nav-lang-btn.active { background: #6366f1; border-color: #6366f1; color: #fff; }
}

/* Small screens: avoid iOS zoom-on-focus, keep toasts and popups inside the viewport */
@media (max-width: 767.98px) {
    input.form-control, select.form-select, textarea.form-control, .form-control, .form-select { font-size: 16px; }

    .modern-toast-stack { top: calc(58px + env(safe-area-inset-top)); left: 12px; right: 12px; width: auto; }
    [dir="rtl"] .modern-toast-stack { left: 12px; right: 12px; }
    body .modern-toast-stack .modern-toast { padding: 12px 14px; animation-name: mnToastIn; }
    body .modern-toast-stack .modern-toast.toast-exit { animation-name: mnToastOut; }
    @keyframes mnToastIn { from { transform: translateY(-14px); opacity: 0; } to { transform: none; opacity: 1; } }
    @keyframes mnToastOut { from { transform: none; opacity: 1; } to { transform: translateY(-14px); opacity: 0; } }

    #loginPopupModal .modal-body { padding: 1.5rem !important; }
    #loginPopupModal .btn-lg { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
    .modern-navbar .navbar-collapse, .nav-backdrop { transition: none !important; }
}