/**
 * Mobile Responsive Overrides
 * ----------------------------
 * Loaded LAST in AppAsset to override all other CSS.
 * Every rule is scoped inside @media queries — zero desktop impact.
 *
 * Breakpoints (Bootstrap 5 standard):
 *   991.98px  — Tablet landscape & below (sidebar overlay)
 *   767.98px  — Phone landscape & below (single-column, stacking)
 *   575.98px  — Phone portrait (ultra-compact)
 *
 * @version 1.0.0
 * @since 2026-03-09
 */

/* ==========================================================================
   TABLET & BELOW (max-width: 991.98px)
   Sidebar overlay, content full-width, header adjustments
   ========================================================================== */

@media (max-width: 991.98px) {

    /* ── Sidebar: force overlay mode ─────────────────────────────────── */

    /* Override premium-sidebar fixed width so it can be hidden off-screen */
    .app-sidebar.premium-sidebar,
    .app-sidebar.premium-sidebar[data-bs-theme="dark"] {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        bottom: 0 !important;
        z-index: 1045 !important;
        width: 280px !important;
        min-width: 0 !important;
        transform: translateX(-100%);
        transition: transform 300ms ease-in-out;
    }

    /* When sidebar-open class is on body, slide sidebar in.
       MUST override sidebar-collapse (AdminLTE adds both classes on mobile) */
    body.sidebar-open .app-sidebar.premium-sidebar,
    body.sidebar-open .app-sidebar.premium-sidebar[data-bs-theme="dark"],
    body.sidebar-open.sidebar-collapse .app-sidebar.premium-sidebar,
    body.sidebar-open.sidebar-collapse .app-sidebar.premium-sidebar[data-bs-theme="dark"] {
        transform: translateX(0);
        width: 280px !important;
        overflow: visible;
    }

    /* sidebar-collapse WITHOUT sidebar-open: fully hidden on mobile */
    body.sidebar-collapse:not(.sidebar-open) .app-sidebar.premium-sidebar {
        width: 0 !important;
        overflow: hidden;
        transform: translateX(-100%);
    }

    /* When sidebar is open on mobile, show nav-link text labels.
       AdminLTE's sidebar-collapse hides <p> inside .nav-link with display:none.
       Override so the full menu is readable, not just icons. */
    body.sidebar-open.sidebar-collapse .app-sidebar .nav-link p,
    body.sidebar-open .app-sidebar .nav-link p {
        display: inline !important;
        margin-left: 0.5rem;
    }

    /* Also show submenu expand arrows */
    body.sidebar-open.sidebar-collapse .app-sidebar .nav-arrow,
    body.sidebar-open .app-sidebar .nav-arrow {
        display: inline-block !important;
    }

    /* ── Backdrop when sidebar is open ───────────────────────────────── */
    body.sidebar-open::after {
        content: '';
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0, 0, 0, 0.6);
        z-index: 1040;
        opacity: 1;
        transition: opacity 300ms ease-in-out;
        pointer-events: auto;
    }

    /* ── Header: ensure it stays above sidebar when sidebar is closed ─ */
    .app-header {
        position: relative;
        z-index: 1050 !important;
    }

    /* ── Content: full width when sidebar is hidden ──────────────────── */
    .app-main {
        margin-left: 0 !important;
    }

    /* Footer: full width */
    .app-footer {
        margin-left: 0 !important;
    }

    /* Header: full width */
    .app-header {
        margin-left: 0 !important;
    }

    /* ── Sidebar wrapper height fix ──────────────────────────────────── */
    .app-sidebar.premium-sidebar .sidebar-wrapper {
        height: calc(100vh - 60px);
        overflow-y: auto;
    }

    /* ── Content container: remove excess padding ────────────────────── */
    .app-content .container-fluid {
        padding-left: 0.75rem;
        padding-right: 0.75rem;
    }
}


/* ==========================================================================
   PHONE LANDSCAPE & BELOW (max-width: 767.98px)
   Single-column layouts, stacked forms, compact tables
   ========================================================================== */

@media (max-width: 767.98px) {

    /* ── Header: compact ─────────────────────────────────────────────── */

    /* What's New: icon-only button on mobile */
    #whats-new-btn .d-none.d-md-inline {
        display: none !important;
    }
    #whats-new-btn {
        padding: 6px 10px !important;
        font-size: 0.85em !important;
        min-width: 36px;
        min-height: 36px;
        justify-content: center;
    }
    #whats-new-btn i {
        font-size: 14px !important;
    }

    /* Hide profile name in header, keep icon */
    #profile-dropdown > .nav-link span {
        display: none !important;
    }

    /* Compact notification bell area */
    .notification-dropdown {
        width: 300px;
        right: -60px;
    }

    /* Global search: let it shrink more */
    .global-search-container {
        max-width: 180px;
        flex-shrink: 1;
    }

    /* ── GridView / Tables: horizontal scroll ────────────────────────── */

    /* On mobile, overflow:hidden on parent containers clips table scroll.
       Override parents to visible, make inner wrappers the scroll containers.
       overflow-x:auto is a no-op when content fits — safe to apply broadly. */
    .card,
    .dashboard-section {
        overflow: visible !important;
    }

    .card-body,
    .dashboard-section-body {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* Consolidate scroll to the OUTERMOST container only.
       DOM is: .modern-grid > .table-responsive > .grid-view > TABLE
       Having 3 nested overflow:auto containers breaks touch scrolling —
       the browser can't decide which container to scroll horizontally.
       Solution: make .modern-grid / .grid-view the sole scroll container,
       and remove overflow from intermediate wrappers. */
    .modern-grid,
    .grid-view {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* Remove scroll from intermediate .table-responsive when nested
       inside .modern-grid — let the outer container handle it */
    .modern-grid .table-responsive {
        overflow-x: visible !important;
        overflow-y: visible !important;
    }

    /* Also remove scroll from .grid-view when nested inside .modern-grid
       so only .modern-grid scrolls (avoids nested scroll fight) */
    .modern-grid .grid-view {
        overflow-x: visible !important;
        overflow-y: visible !important;
    }

    /* Ensure tables have enough width to be meaningful when scrolled.
       Covers GridView wrappers AND raw tables in cards/dashboard sections. */
    .modern-grid > .table,
    .modern-grid .table-responsive > .table,
    .modern-grid .grid-view > .table,
    .grid-view > .table,
    .grid-view .table-responsive > .table,
    .card-body > .table,
    .card-body > table,
    .dashboard-section-body > .table,
    .dashboard-section-body > table {
        min-width: 650px;
    }

    /* Visible scroll hint — fade shadow on the right edge to indicate
       more content is available beyond the viewport */
    .modern-grid,
    .grid-view {
        background:
            linear-gradient(to right, white 30%, transparent),
            linear-gradient(to left, white 30%, transparent),
            linear-gradient(to right, rgba(0,0,0,0.15), transparent 70%),
            linear-gradient(to left, rgba(0,0,0,0.15), transparent 70%);
        background-position: left center, right center, left center, right center;
        background-repeat: no-repeat;
        background-size: 20px 100%, 20px 100%, 10px 100%, 10px 100%;
        background-attachment: local, local, scroll, scroll;
    }

    /* Table cells: compact */
    .modern-grid .table td,
    .modern-grid .table th,
    .grid-view .table td,
    .grid-view .table th {
        padding: 0.5rem 0.4rem !important;
        font-size: 0.78rem;
    }

    .modern-grid .table thead th,
    .grid-view .table thead th {
        font-size: 0.68rem;
        padding: 0.5rem 0.4rem !important;
    }

    /* Action column: un-sticky on mobile — normal table flow */
    .modern-grid .action-column,
    .grid-view .action-column {
        position: static !important;
        border-left: none;
        min-width: auto;
        z-index: auto;
        background: transparent;
        box-shadow: none;
        right: auto;
    }

    /* Status tabs: horizontal scroll */
    .status-tabs {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        flex-wrap: nowrap;
        padding: 0.75rem 1rem;
        gap: 0.35rem;
    }

    .status-tabs::-webkit-scrollbar {
        display: none;
    }

    .status-tab {
        white-space: nowrap;
        flex-shrink: 0;
        font-size: 0.75rem;
        padding: 0.4rem 0.75rem;
    }

    /* Filter divider: hide in scroll mode */
    .filter-divider {
        display: none;
    }

    /* ── Page headers: stack title above actions on mobile ────────────── */
    .modern-header,
    .jobs-header,
    .resumes-header,
    .applications-header,
    .stages-header,
    .careers-header,
    .org-header,
    .mgmt-header,
    .history-header,
    .slots-header {
        flex-direction: column;
        align-items: flex-start !important;
        gap: 0.5rem;
        padding: 1rem;
    }

    /* ── All action containers: stack buttons vertically ──────────────── */
    .modern-actions,
    .jobs-actions,
    .resumes-actions,
    .applications-actions,
    .stages-actions,
    .history-actions,
    .org-actions,
    .mgmt-actions,
    .careers-actions,
    .slots-actions {
        width: 100%;
        flex-direction: column;
        align-items: stretch;
        gap: 0.5rem;
    }

    /* Target ALL clickable children — not just .btn (many views use
       custom classes like btn-create-entity, btn-filter-toggle, etc.) */
    .modern-actions > a,
    .modern-actions > button,
    .modern-actions > .btn,
    .jobs-actions > a,
    .jobs-actions > button,
    .jobs-actions > .btn,
    .resumes-actions > a,
    .resumes-actions > button,
    .resumes-actions > .btn,
    .applications-actions > a,
    .applications-actions > button,
    .applications-actions > .btn,
    .stages-actions > a,
    .stages-actions > button,
    .stages-actions > .btn,
    .history-actions > a,
    .history-actions > button,
    .history-actions > .btn,
    .org-actions > a,
    .org-actions > button,
    .org-actions > .btn,
    .mgmt-actions > a,
    .mgmt-actions > button,
    .mgmt-actions > .btn,
    .careers-actions > a,
    .careers-actions > button,
    .careers-actions > .btn,
    .slots-actions > a,
    .slots-actions > button,
    .slots-actions > .btn {
        width: 100%;
        display: flex !important;
        justify-content: center;
        align-items: center;
        min-height: 44px;
        text-align: center;
        font-size: 0.8rem;
        padding: 0.4rem 0.75rem;
        margin-left: 0;
        margin-right: 0;
        box-sizing: border-box;
    }

    /* ── View page action buttons (job/view, resume/view): full-width ─ */
    .action-buttons {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 0.5rem;
    }

    .action-buttons .btn,
    .action-buttons > a,
    .action-buttons > button {
        width: 100%;
        display: flex !important;
        justify-content: center;
        align-items: center;
        min-height: 44px;
        font-size: 0.85rem;
        margin-left: 0 !important;
        margin-right: 0 !important;
        margin-bottom: 0 !important;
        box-sizing: border-box;
    }

    /* ── Standalone buttons in grid columns: full-width on mobile ──────── */
    .row > [class*="col-"] > .btn {
        width: 100%;
        display: flex !important;
        justify-content: center;
        align-items: center;
        min-height: 44px;
        box-sizing: border-box;
    }

    /* ── Bootstrap btn-group: stack vertically on mobile ──────────────── */
    .btn-group {
        flex-direction: column;
        width: 100%;
    }

    .btn-group .btn {
        width: 100%;
        border-radius: 6px !important;
        margin-bottom: 0.25rem;
    }

    /* ── Form actions: full-width stacked buttons on mobile ────────────── */
    .form-actions {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 0.5rem;
    }

    .form-actions .btn,
    .form-actions > a,
    .form-actions > button {
        width: 100%;
        min-height: 44px;
        display: flex !important;
        justify-content: center;
        align-items: center;
        margin-left: 0;
        margin-right: 0;
        box-sizing: border-box;
    }

    /* ── Application view action toolbar: full-width stacked buttons ── */
    .action-toolbar {
        padding: 0.5rem;
    }

    .action-toolbar-primary,
    .action-toolbar-secondary {
        flex-direction: column;
        align-items: stretch;
        gap: 0.5rem;
        margin: 0;
        padding: 0;
        border: none;
    }

    .action-toolbar-primary .btn,
    .action-toolbar-secondary .btn,
    .action-toolbar-primary > a,
    .action-toolbar-secondary > a {
        width: 100%;
        display: flex !important;
        justify-content: center;
        align-items: center;
        min-height: 44px;
        font-size: 0.85rem;
        margin-left: 0;
        margin-right: 0;
        box-sizing: border-box;
    }

    /* ── Dashboard section headers: stack title + button ─────────────── */
    .dashboard-section-header {
        flex-direction: column;
        align-items: stretch;
        gap: 0.5rem;
        padding: 0.75rem 1rem;
    }

    .dashboard-section-header h5 {
        font-size: 0.9rem;
    }

    .dashboard-section-header .btn {
        font-size: 0.78rem;
        padding: 0.35rem 0.75rem;
        width: 100%;
        text-align: center;
        margin-left: 0;
        margin-right: 0;
    }

    /* ── Buttons: uniform sizing on mobile ────────────────────────────── */
    /* Normalize all button sizes so they look consistent across pages.
       Targets Bootstrap btn-sm, btn-outline-*, and custom btn classes
       inside cards, dashboards, and page sections — not form buttons. */
    .dashboard-section .btn,
    .card-header .btn,
    .panel-header .btn,
    .metric-card .btn,
    .btn-create-job,
    .btn-create-resume,
    .btn-create-application {
        font-size: 0.8rem;
        padding: 0.4rem 0.85rem;
        border-radius: 6px;
        white-space: nowrap;
    }

    /* Quick action rows in role dashboards: uniform button sizing */
    .quick-actions-row {
        flex-direction: column;
        align-items: stretch;
        gap: 0.5rem;
        margin-top: 1rem;
    }

    .quick-actions-row .btn {
        font-size: 0.8rem;
        padding: 0.5rem 0.75rem;
        justify-content: center;
        width: 100%;
        min-height: 44px;
        display: flex;
        align-items: center;
        margin-left: 0;
        margin-right: 0;
    }

    /* ── Forms: force single-column ──────────────────────────────────── */

    /* Stack ALL col-md-* and col-lg-* columns inside forms.
       Forms use col-md-2 through col-md-9 — all must stack on mobile */
    .modern-form .row > [class*="col-md-"],
    .modern-form .row > [class*="col-lg-"],
    .modern-job-form .row > [class*="col-md-"],
    .modern-job-form .row > [class*="col-lg-"],
    .interview-form-modern .row > [class*="col-md-"],
    .interview-form-modern .row > [class*="col-lg-"],
    .form-group .row > [class*="col-md-"],
    .form-group .row > [class*="col-lg-"],
    form .row > [class*="col-md-"],
    form .row > [class*="col-lg-"],
    .card-body .row > [class*="col-md-"],
    .card-body .row > [class*="col-lg-"] {
        flex: 0 0 100%;
        max-width: 100%;
    }

    /* Form buttons: full width */
    form .btn-primary,
    form .btn-success,
    form [type="submit"] {
        width: 100%;
        margin-top: 0.5rem;
    }

    /* ── Dashboard: single-column cards ──────────────────────────────── */

    /* Metric card rows */
    .metric-card-row {
        grid-template-columns: 1fr !important;
    }

    /* Dashboard rows: stack */
    .dashboard-index .row,
    .dashboard-analytics .row,
    .ta-dashboard .row,
    .management-dashboard .row,
    .specialist-dashboard .row,
    .interviewer-dashboard .row {
        display: block;
    }

    /* Dashboard row children: full width with spacing */
    .dashboard-index .row > [class*="col-"],
    .dashboard-analytics .row > [class*="col-"],
    .ta-dashboard .row > [class*="col-"],
    .management-dashboard .row > [class*="col-"],
    .specialist-dashboard .row > [class*="col-"],
    .interviewer-dashboard .row > [class*="col-"] {
        width: 100%;
        max-width: 100%;
        margin-bottom: 1rem;
    }

    /* Card header stacking */
    .card-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
    }

    .card-header .card-tools {
        margin-left: 0;
        width: 100%;
    }

    .card-header .card-tools .btn {
        width: 100%;
        text-align: center;
    }

    /* ── Detail/View pages ───────────────────────────────────────────── */

    /* DetailView: make label column narrower */
    .detail-view th {
        width: 35% !important;
        font-size: 0.8rem;
    }

    .detail-view td {
        font-size: 0.85rem;
        word-break: break-word;
    }

    /* ── Modals: near-fullscreen ─────────────────────────────────────── */
    .modal-dialog {
        margin: 0.5rem;
        max-width: calc(100% - 1rem);
    }

    .modal-lg,
    .modal-xl {
        max-width: calc(100% - 1rem);
    }

    /* ── Pending actions: stack sections ──────────────────────────────── */
    .pending-actions-modern .border-end {
        border-right: none !important;
        border-bottom: 1px solid #e5e7eb !important;
        padding-bottom: 1rem;
        margin-bottom: 1rem;
    }

    /* ── Pagination: compact ─────────────────────────────────────────── */
    .modern-pagination {
        flex-direction: column;
        gap: 0.5rem;
        align-items: center;
    }

    .modern-pagination .summary {
        font-size: 0.8rem;
    }

    .modern-pagination .pagination {
        flex-wrap: wrap;
        justify-content: center;
    }

    /* ── Touch-friendly action icons (compact for table cells) ──────── */
    .action-icon {
        width: 36px;
        height: 36px;
        min-width: 36px;
        min-height: 36px;
        font-size: 0.95rem;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border-radius: 6px;
    }

    /* Action icons container: single row, no wrapping */
    .action-icons,
    .action-column .action-icons,
    td .action-icons {
        display: flex;
        flex-wrap: nowrap;
        gap: 2px;
    }

    .nav-link {
        min-height: 44px;
        display: flex;
        align-items: center;
    }

    /* Clickable rows: larger touch area */
    .clickable-row td {
        padding-top: 0.75rem !important;
        padding-bottom: 0.75rem !important;
    }

    /* ── Report tables: scroll ───────────────────────────────────────── */
    .report-ta-performance .table-responsive,
    .report-job-report .table-responsive {
        border: 1px solid #e2e8f0;
        border-radius: 6px;
    }

    /* ── Select2: touch-friendly ─────────────────────────────────────── */
    .select2-container--bootstrap-5 .select2-selection {
        min-height: 44px;
    }

    .select2-container--bootstrap-5 .select2-selection__rendered {
        line-height: 42px;
    }

    /* ── Interview slot calendar: stack ───────────────────────────────── */
    .interview-slot-picker .row > [class*="col-"] {
        flex: 0 0 100%;
        max-width: 100%;
    }
}


/* ==========================================================================
   PHONE PORTRAIT (max-width: 575.98px)
   Ultra-compact, essential content only
   ========================================================================== */

@media (max-width: 575.98px) {

    /* ── Header: minimal ─────────────────────────────────────────────── */

    /* Hide global search on very small screens */
    .global-search-container {
        display: none !important;
    }

    /* Notification dropdown: nearly full width */
    .notification-dropdown {
        position: fixed !important;
        left: 0.5rem !important;
        right: 0.5rem !important;
        width: auto !important;
        max-width: none !important;
        top: 56px !important;
    }

    /* ── Content: tighter padding ────────────────────────────────────── */
    .app-content .container-fluid {
        padding-left: 0.5rem;
        padding-right: 0.5rem;
    }

    .app-content-header {
        padding: 0.5rem 0;
    }

    /* Card body: reduce padding */
    .card-body {
        padding: 0.75rem;
    }

    /* ── Modals: full screen ─────────────────────────────────────────── */
    .modal-dialog {
        margin: 0;
        max-width: 100%;
        min-height: 100vh;
    }

    .modal-content {
        border-radius: 0;
        min-height: 100vh;
        border: none;
    }

    /* ── Tables: ultra-compact ────────────────────────────────────────── */
    .modern-grid .table td,
    .modern-grid .table th,
    .grid-view .table td,
    .grid-view .table th {
        padding: 0.35rem 0.3rem !important;
        font-size: 0.72rem;
    }

    .modern-grid .table thead th,
    .grid-view .table thead th {
        font-size: 0.62rem;
    }

    /* Hide less important columns on very small screens */
    .modern-grid .table .col-hide-xs,
    .grid-view .table .col-hide-xs {
        display: none;
    }

    /* ── Metric cards: ultra-compact ─────────────────────────────────── */
    .metric-card-header {
        padding: 0.75rem;
    }

    .metric-card-icon {
        width: 36px;
        height: 36px;
        font-size: 1rem;
    }

    .metric-card-value {
        font-size: 1.125rem;
    }

    .metric-card-label {
        font-size: 0.7rem;
    }

    /* ── Detail view: stack label/value ───────────────────────────────── */
    .detail-view th,
    .detail-view td {
        display: block;
        width: 100% !important;
        padding: 0.25rem 0.5rem;
    }

    .detail-view th {
        padding-bottom: 0;
        font-weight: 700;
        color: #64748B;
        font-size: 0.7rem;
        text-transform: uppercase;
        letter-spacing: 0.3px;
        border-bottom: none;
    }

    .detail-view td {
        padding-top: 0;
        padding-bottom: 0.75rem;
        border-bottom: 1px solid #f1f5f9;
    }

    /* ── Buttons: full width ─────────────────────────────────────────── */
    .btn-create,
    .btn-export,
    .btn-add-stage {
        width: 100%;
        justify-content: center;
    }

    /* ── Action icons: compact but still touch-friendly ────────────── */
    .action-icons {
        gap: 3px;
    }

    .action-icon {
        width: 40px;
        height: 40px;
        min-width: 40px;
        min-height: 40px;
        font-size: 0.95rem;
    }

    /* ── Status pills / badges: smaller ──────────────────────────────── */
    .status-pill {
        padding: 3px 8px;
        font-size: 0.62rem;
    }

    .stage-pill {
        padding: 3px 6px;
        font-size: 0.62rem;
    }

    .skill-badge {
        padding: 1px 5px;
        font-size: 0.58rem;
    }

    /* ── Back button: compact ────────────────────────────────────────── */
    .app-content-header .btn-outline-secondary {
        font-size: 0.8rem;
        padding: 0.25rem 0.5rem;
    }

    /* ── Footer: stack ───────────────────────────────────────────────── */
    .app-footer {
        text-align: center;
        font-size: 0.75rem;
    }

    .app-footer .float-end {
        float: none !important;
        display: block;
        margin-top: 0.25rem;
    }

    /* ── Pipeline stat cards: tighter ────────────────────────────────── */
    .pipeline-stat-card {
        padding: 0.5rem 0.35rem;
    }

    .pipeline-stat-card .stat-value {
        font-size: 0.95rem;
    }

    /* ── Interview modal form: compact ───────────────────────────────── */
    .modal .nav-tabs .nav-link {
        padding: 0.5rem 0.75rem;
        font-size: 0.8rem;
    }

    /* ── Pending actions card: compact ───────────────────────────────── */
    .pending-actions-card .section-header {
        font-size: 0.75rem;
        padding: 0.4rem 0.5rem;
    }
}


/* ==========================================================================
   UTILITY: Mobile-specific helpers
   These can be applied via class names in views for fine-grained control
   ========================================================================== */

/* Hide element on mobile only */
@media (max-width: 767.98px) {
    .d-mobile-none {
        display: none !important;
    }
}

/* Show element on mobile only */
@media (min-width: 768px) {
    .d-mobile-only {
        display: none !important;
    }
}

/* Full width on mobile */
@media (max-width: 767.98px) {
    .w-mobile-100 {
        width: 100% !important;
    }
}

/* Stack flex children on mobile */
@media (max-width: 767.98px) {
    .flex-mobile-column {
        flex-direction: column !important;
    }
}

/* Mobile text truncation */
@media (max-width: 575.98px) {
    .text-truncate-mobile {
        max-width: 120px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
}

/* ══════════════════════════════════════════════════════════════════════
   LOGIN PAGE — Mobile fixes
   ══════════════════════════════════════════════════════════════════════ */
@media (max-width: 991.98px) {
    /* Allow scrolling when login card + banner exceeds viewport */
    .login-page-modern {
        overflow-y: auto !important;
        overflow-x: hidden !important;
        justify-content: flex-start !important;
        padding-top: 2rem;
        padding-bottom: 2rem;
    }

    /* Contain blobs within viewport so they don't extend scrollable area */
    .login-bg-effects {
        position: fixed;
        pointer-events: none;
    }
}

@media (max-width: 575.98px) {
    .login-page-modern {
        padding-top: 1rem;
        padding-bottom: 1rem;
    }

    /* Compact the card slightly on small phones */
    .login-brand {
        padding: 1.5rem 1.25rem 1rem;
    }
    .login-body {
        padding: 0 1.25rem 1.25rem;
    }
}