/* =========================================================
   Orion Admin - Mobile overrides (< 768px)
   Debe cargarse DESPUES de bootstrap.min.css y custom.css
   (ver src/index.html)
   Breakpoints alineados a Bootstrap 5
   ========================================================= */

html,
body {
    -webkit-tap-highlight-color: transparent;
}

/* Evita overflow horizontal global en movil */
@media (max-width: 767.98px) {
    html,
    body {
        overflow-x: hidden;
    }

    #wrapper {
        display: block;
    }

    #content-wrapper {
        width: 100% !important;
        /* overflow-x:hidden del tema crea un scroll-container que rompe
           position:sticky; el html/body lo cubre con overflow-x:hidden */
        overflow-x: visible !important;
    }

    .container-fluid {
        padding-left: 0.75rem !important;
        padding-right: 0.75rem !important;
    }
}

/* =====================================================
   Login: cielo galáctico ligero en móvil (rendimiento)
   ===================================================== */
@media (max-width: 991.98px) {
    .login-nebula--3,
    .login-stars--2 {
        display: none;
    }
}

/* =====================================================
   Login: logo de marca más compacto en pantallas pequeñas
   ===================================================== */
@media (max-width: 767.98px) {
    .login-form {
        padding: 2.5rem 1.5rem !important;
    }

    .login-brand-logo {
        width: 150px;
        margin-bottom: 1rem;
    }

    .login-constellation--mobile {
        width: 72px;
        margin-bottom: 1rem;
    }

    .login-footer {
        margin-top: 1rem;
    }

    /* =====================================================
       Sidebar como drawer off-canvas
       (el estado se controla con .sidebar-toggled en #page-top
        y .toggled en #navlist, logica existente de la app)
       ===================================================== */
    .sidebar {
        position: fixed !important;
        top: 0;
        left: 0;
        bottom: 0;
        width: 15rem !important;
        max-width: 85vw;
        z-index: 1045;
        transform: translateX(-100%);
        transition: transform 0.25s ease;
        overflow: hidden;
        overflow-y: auto;
        box-shadow: 0 0 1.75rem 0 rgba(58, 59, 69, 0.15);
    }

    .sidebar.toggled {
        width: 15rem !important;
        max-width: 85vw;
        transform: translateX(0);
        overflow: visible;
        overflow-y: auto;
    }

    /* Links expandidos mientras el drawer esta abierto
       (replica las reglas de desktop >= 768px) */
    .sidebar.toggled .sidebar-brand .sidebar-brand-icon i {
        font-size: 2rem;
    }

    .sidebar.toggled .sidebar-brand .sidebar-brand-text {
        display: inline;
    }

    .sidebar.toggled .sidebar-heading {
        text-align: left;
    }

    .sidebar.toggled .nav-item .nav-link {
        display: block;
        width: 100%;
        text-align: left;
        padding: 1rem;
        font-size: 0.85rem;
    }

    .sidebar.toggled .nav-item .nav-link i {
        font-size: 0.85rem;
        margin-right: 0.25rem;
    }

    .sidebar.toggled .nav-item .nav-link span {
        display: inline;
    }

    .sidebar.toggled .nav-item .collapse,
    .sidebar.toggled .nav-item .collapsing {
        position: relative;
        left: 0;
        top: 0;
        z-index: 1;
        animation: none;
        transition: height 0.15s ease;
        margin: 0 1rem;
    }

    .sidebar.toggled .nav-item .collapse .collapse-inner {
        border-radius: 0;
        box-shadow: none;
    }

    /* Backdrop: solo visible con el drawer abierto */
    .sidebar-backdrop {
        display: none;
    }

    #page-top.sidebar-toggled .sidebar-backdrop {
        display: block;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0, 0, 0, 0.5);
        z-index: 1044;
    }

    /* Topbar pegada al inicio para que la hamburguesa siempre sea accesible */
    .topbar {
        position: sticky !important;
        top: 0;
        z-index: 1020;
    }

    /* =====================================================
       Tablas: scroll horizontal como red de seguridad
       (la vista por defecto en movil son las cards de "Lista")
       ===================================================== */
    .table-responsive {
        overflow-x: auto !important;
    }

    /* Tap targets >= 44px para acciones de tablas/cards */
    .card-footer .badge,
    .table td:last-child .badge {
        min-width: 2.25rem;
        min-height: 2.25rem;
        padding: 0.35rem 0.5rem;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        margin: 2px;
    }

    /* Botones del header de tabla no se desbordan */
    .card-header .dropdown.float-end {
        margin-left: 0.5rem;
    }

    /* ng-select: panel de opciones dentro del viewport */
    .ng-dropdown-panel {
        max-width: 92vw;
    }

    /* Charts: ng2-charts usa maintainAspectRatio:false, el contenedor
       del canvas necesita altura minima para renderizar */
    .chart-area {
        min-height: 260px;
    }
}

/* =========================================================
   SweetAlert2: modales legibles y apilados en pantallas pequenas
   ===================================================== */
@media (max-width: 575.98px) {
    /* Login: evitar zoom automatico de iOS en inputs (< 16px).
       Specificidad (0,1,2) igual a form.user .form-control-user de bootstrap */
    form.user .form-control-user {
        font-size: 1rem;
    }

    .swal2-popup {
        width: 90% !important;
        padding: 1.25rem 1rem;
    }

    .swal2-title {
        font-size: 1.35rem !important;
        text-align: center;
    }

    .swal2-html-container {
        text-align: center;
    }

    .swal2-actions {
        margin-top: 1rem;
    }

    .swal2-actions .swal2-styled {
        min-width: 100%;
        margin: 0.25rem 0;
        padding: 0.65rem 1rem;
        font-size: 1rem;
    }
}