/* Enterprise Monitor NEXT - PATCH 073.3.22
 * Janela lateral com alternancia entre modo lateral e maximizado.
 */

.next-drawer-window-actions{
    display:flex;
    align-items:center;
    justify-content:flex-end;
    gap:8px;
    margin-left:auto;
    flex:0 0 auto;
}

.next-drawer-window-button{
    width:44px;
    height:44px;
    display:inline-grid;
    place-items:center;
    border:0;
    border-radius:14px;
    background:#eef4ff;
    color:#001433;
    cursor:pointer;
    line-height:1;
    transition:transform .16s ease,background .16s ease,box-shadow .16s ease;
}

.next-drawer-window-button:hover{
    background:#dce9ff;
    transform:translateY(-1px);
    box-shadow:0 8px 20px rgba(15,52,96,.12);
}

.next-drawer-window-button:focus-visible{
    outline:3px solid rgba(11,91,231,.28);
    outline-offset:2px;
}

.next-drawer-window-button svg{
    width:20px;
    height:20px;
    pointer-events:none;
}

.next-drawer-capable{
    --next-drawer-max-gap:16px;
}

.next-drawer-capable.next-drawer-maximized{
    top:var(--next-drawer-max-gap)!important;
    right:var(--next-drawer-max-gap)!important;
    bottom:var(--next-drawer-max-gap)!important;
    left:var(--next-drawer-max-gap)!important;
    width:auto!important;
    max-width:none!important;
    min-width:0!important;
    height:auto!important;
    min-height:0!important;
    max-height:none!important;
    border-radius:24px!important;
    transform:translateX(0)!important;
    box-shadow:0 32px 100px rgba(0,20,51,.34)!important;
    z-index:1600!important;
    overflow:hidden!important;
}

.next-drawer-capable.next-drawer-maximized > :is(.drawer-head,.external-drawer-head,.provider-drawer-head,header){
    position:sticky;
    top:0;
    z-index:4;
    background:#fff;
}

.next-drawer-capable.next-drawer-maximized > :is(.drawer-body,.external-drawer-body,.provider-drawer-body,.send-drawer-body){
    flex:1 1 auto;
    min-height:0;
    overflow:auto!important;
}

body.next-drawer-maximized-open{
    overflow:hidden!important;
}

@media (max-width:800px){
    .next-drawer-capable.open,
    .next-drawer-capable[aria-hidden="false"]{
        top:0!important;
        right:0!important;
        bottom:0!important;
        left:0!important;
        width:100vw!important;
        max-width:none!important;
        min-width:0!important;
        height:100dvh!important;
        min-height:100vh!important;
        max-height:none!important;
        border-radius:0!important;
        transform:translateX(0)!important;
        overflow:hidden!important;
    }

    .next-drawer-capable > :is(.drawer-head,.external-drawer-head,.provider-drawer-head,header){
        padding:16px 18px!important;
    }

    .next-drawer-capable > :is(.drawer-body,.external-drawer-body,.provider-drawer-body,.send-drawer-body){
        padding:18px!important;
        flex:1 1 auto;
        min-height:0;
        overflow:auto!important;
    }

    .next-drawer-window-button{
        width:42px;
        height:42px;
    }
}

/* MikroTik Security: drawer realmente utilizavel em celular.
 * Mantem o layout desktop intacto e elimina tabelas horizontais no mobile.
 */
@media (max-width:800px){
    .mksec-drawer{
        width:100vw!important;
        max-width:100vw!important;
        height:100dvh!important;
        overflow:hidden!important;
    }

    .mksec-drawer-head{
        position:sticky;
        top:0;
        z-index:8;
        padding:14px 16px!important;
        gap:12px;
    }

    .mksec-drawer-head>div{
        min-width:0;
        flex:1 1 auto;
    }

    .mksec-drawer-head h2{
        margin-top:4px!important;
        font-size:clamp(22px,6vw,28px)!important;
        line-height:1.08!important;
        overflow-wrap:anywhere;
    }

    .mksec-drawer-head button{
        width:48px!important;
        height:48px!important;
        flex:0 0 48px;
        border-radius:15px!important;
    }

    .mksec-drawer-body{
        height:calc(100dvh - 78px)!important;
        padding:12px!important;
        overflow-x:hidden!important;
        overflow-y:auto!important;
        overscroll-behavior:contain;
    }

    .mksec-detail{
        gap:12px!important;
        min-width:0;
    }

    .mksec-detail-summary{
        grid-template-columns:1fr 1fr!important;
        gap:8px!important;
    }

    .mksec-detail-summary article{
        min-width:0;
        padding:12px!important;
    }

    .mksec-detail-summary b{
        font-size:22px!important;
        overflow-wrap:anywhere;
    }

    .mksec-card{
        min-width:0;
        padding:14px!important;
        border-radius:16px!important;
    }

    .mksec-card-head{
        align-items:stretch!important;
        flex-direction:column!important;
        gap:10px!important;
        margin-bottom:12px!important;
    }

    .mksec-card-head>div{
        min-width:0;
    }

    .mksec-card-head h3{
        font-size:20px!important;
        line-height:1.15!important;
        overflow-wrap:anywhere;
    }

    .mksec-card-head small{
        display:block;
        margin-top:4px;
        line-height:1.35;
        overflow-wrap:anywhere;
    }

    .mksec-card-head>.mksec-btn,
    .mksec-card-head [data-sync-inside],
    #mksec-list-new{
        width:100%!important;
        min-height:46px;
        white-space:normal!important;
    }

    .mksec-discovered{
        gap:6px!important;
    }

    .mksec-discovered button{
        max-width:100%;
        overflow-wrap:anywhere;
        white-space:normal!important;
    }

    .mksec-list-row{
        grid-template-columns:1fr!important;
        gap:10px!important;
        padding:14px 0!important;
    }

    .mksec-list-row>div:first-child{
        min-width:0;
    }

    .mksec-list-row b,
    .mksec-list-row small{
        overflow-wrap:anywhere;
    }

    .mksec-list-actions{
        display:grid!important;
        grid-template-columns:1fr 1fr!important;
        width:100%;
        gap:8px!important;
    }

    .mksec-list-actions .mksec-btn{
        width:100%;
        min-height:44px;
    }

    .mksec-mini-wrap{
        overflow:visible!important;
        width:100%;
        min-width:0;
    }

    .mksec-mini-table,
    .mksec-mini-table tbody,
    .mksec-mini-table tr,
    .mksec-mini-table td{
        display:block!important;
        width:100%!important;
        box-sizing:border-box;
    }

    .mksec-mini-table{
        border-collapse:separate!important;
        border-spacing:0!important;
        font-size:14px!important;
    }

    .mksec-mini-table thead{
        display:none!important;
    }

    .mksec-mini-table tbody{
        display:grid!important;
        gap:10px!important;
    }

    .mksec-mini-table tr{
        padding:12px!important;
        border:1px solid #dce7f4!important;
        border-radius:14px!important;
        background:#f8fbff!important;
        box-shadow:0 5px 14px rgba(14,42,75,.04);
    }

    .mksec-mini-table td{
        position:relative;
        min-width:0!important;
        padding:7px 0 7px 108px!important;
        border:0!important;
        line-height:1.35!important;
        overflow-wrap:anywhere!important;
        word-break:break-word;
    }

    .mksec-mini-table td+td{
        border-top:1px solid #e8eef6!important;
    }

    .mksec-mini-table td::before{
        position:absolute;
        left:0;
        top:7px;
        width:96px;
        color:#718198;
        font-size:10px;
        font-weight:900;
        line-height:1.3;
        text-transform:uppercase;
    }

    .mksec-mini-table td:nth-child(1)::before{content:"Item"}
    .mksec-mini-table td:nth-child(2)::before{content:"Endereco"}
    .mksec-mini-table td:nth-child(3)::before{content:"Identificacao"}
    .mksec-mini-table td:nth-child(4)::before{content:"Detalhe"}
    .mksec-mini-table td:nth-child(5)::before{content:"Estado"}

    .mksec-mini-table td[colspan]{
        padding:12px!important;
        text-align:center!important;
        color:#718198;
    }

    .mksec-mini-table td[colspan]::before{
        display:none!important;
    }

    .mksec-operation-link{
        white-space:normal!important;
        overflow-wrap:anywhere;
    }

    .mksec-inline-form .mksec-form{
        grid-template-columns:1fr!important;
        gap:11px!important;
    }

    .mksec-inline-form .mksec-btn{
        min-height:46px;
    }
}

@media (max-width:420px){
    .mksec-drawer-body{
        padding:10px!important;
    }

    .mksec-detail-summary{
        grid-template-columns:1fr 1fr!important;
    }

    .mksec-card{
        padding:12px!important;
    }

    .mksec-mini-table td{
        padding-left:96px!important;
    }

    .mksec-mini-table td::before{
        width:86px;
    }
}

/* Gateways / Firewalls MikroTik: card operacional realmente responsivo.
 * Ajuste exclusivamente visual para celular; nao altera heartbeat, WAN ou Smart Routing.
 */
@media (max-width:800px){
    .gateways-page{
        gap:14px!important;
        min-width:0;
        padding-bottom:96px;
    }

    .gateways-hero{
        align-items:stretch!important;
        flex-direction:column!important;
        gap:16px!important;
        padding:20px!important;
        border-radius:22px!important;
        min-width:0;
    }

    .gateways-hero>div{
        min-width:0;
    }

    .gateways-hero .live-pill{
        display:inline-flex;
        max-width:100%;
        font-size:12px;
        white-space:normal;
    }

    .gateways-hero h2{
        margin:10px 0 8px!important;
        font-size:clamp(28px,9vw,38px)!important;
        line-height:1.03!important;
        letter-spacing:-.8px;
        overflow-wrap:anywhere;
    }

    .gateways-hero p{
        font-size:15px!important;
        line-height:1.42!important;
    }

    .gateways-hero .btn{
        width:100%;
        min-height:48px;
    }

    .gateway-kpis{
        grid-template-columns:repeat(2,minmax(0,1fr))!important;
        gap:10px!important;
    }

    .gateway-kpis article{
        min-width:0;
        min-height:126px;
        padding:14px!important;
        border-radius:18px!important;
    }

    .gateway-kpis span{
        width:42px!important;
        height:42px!important;
        margin-bottom:8px!important;
        border-radius:13px!important;
    }

    .gateway-kpis strong{
        font-size:28px!important;
    }

    .gateway-kpis b{
        display:block;
        font-size:12px;
        line-height:1.25;
        overflow-wrap:anywhere;
    }

    .gateway-intel,
    .gateway-filter,
    .view-mode-toolbar{
        min-width:0;
    }

    .gateway-intel{
        padding:15px!important;
        border-radius:18px!important;
    }

    .gateway-intel h3{
        font-size:17px;
    }

    .gateway-intel p{
        font-size:13px;
    }

    .gateway-filter{
        grid-template-columns:1fr!important;
        gap:9px!important;
        padding:13px!important;
        border-radius:18px!important;
    }

    .gateway-filter input,
    .gateway-filter select,
    .gateway-filter .btn{
        width:100%;
        min-width:0;
    }

    .view-mode-toolbar-tools,
    .next-report-actions{
        width:100%;
    }

    .next-report-actions{
        display:grid!important;
        grid-template-columns:1fr 1fr!important;
        gap:8px!important;
    }

    .next-report-button{
        min-width:0!important;
        white-space:normal!important;
    }

    .gateway-grid.view-cards{
        grid-template-columns:1fr!important;
        gap:12px!important;
        min-width:0;
    }

    .gateway-grid.view-cards .gateway-card{
        width:100%;
        min-width:0;
        overflow:hidden;
        gap:12px!important;
        padding:14px!important;
        border-radius:18px!important;
    }

    .gateway-grid.view-cards .gateway-status-dot{
        display:none;
    }

    .gateway-grid.view-cards .gateway-head{
        grid-template-columns:46px minmax(0,1fr)!important;
        gap:11px!important;
        padding-right:0!important;
        min-width:0;
    }

    .gateway-grid.view-cards .gateway-icon{
        width:46px!important;
        height:46px!important;
        border-radius:14px!important;
    }

    .gateway-grid.view-cards .gateway-head>div{
        min-width:0;
    }

    .gateway-grid.view-cards .gateway-head h3{
        margin:0;
        font-size:20px!important;
        line-height:1.08!important;
        overflow-wrap:anywhere;
        word-break:break-word;
    }

    .gateway-grid.view-cards .gateway-head span{
        font-size:12px!important;
        line-height:1.35;
        overflow-wrap:anywhere;
        word-break:break-word;
    }

    .gateway-grid.view-cards .gateway-head .status-badge{
        grid-column:1/-1;
        justify-self:start;
        width:auto;
        max-width:100%;
        padding:7px 11px!important;
        white-space:normal;
    }

    .gateway-grid.view-cards .gateway-info{
        grid-template-columns:1fr 1fr!important;
        gap:8px!important;
        min-width:0;
    }

    .gateway-grid.view-cards .gateway-info div{
        min-width:0;
        padding:10px!important;
        border-radius:12px!important;
    }

    .gateway-grid.view-cards .gateway-info div:nth-child(3),
    .gateway-grid.view-cards .gateway-info div:nth-child(4){
        grid-column:1/-1;
    }

    .gateway-grid.view-cards .gateway-info small{
        font-size:10px!important;
    }

    .gateway-grid.view-cards .gateway-info strong{
        font-size:14px;
        line-height:1.28;
        overflow-wrap:anywhere;
        word-break:break-word;
    }

    .gateway-grid.view-cards .gateway-primary-wan{
        display:grid!important;
        grid-template-columns:1fr!important;
        align-items:start!important;
        gap:7px!important;
        min-width:0!important;
        padding:11px!important;
        margin:2px 0!important;
    }

    .gateway-grid.view-cards .gateway-primary-wan>span{
        white-space:normal!important;
        font-size:12px;
        line-height:1.3;
    }

    .gateway-grid.view-cards .gateway-primary-wan>div{
        display:grid!important;
        grid-template-columns:1fr!important;
        gap:3px!important;
        min-width:0!important;
        width:100%;
    }

    .gateway-grid.view-cards .gateway-primary-wan>div strong,
    .gateway-grid.view-cards .gateway-primary-wan>div small{
        max-width:100%;
        white-space:normal!important;
        overflow-wrap:anywhere;
        word-break:break-word;
    }

    .gateway-grid.view-cards .gateway-primary-wan>b{
        margin-left:0!important;
        justify-self:start;
        max-width:100%;
        white-space:normal!important;
        overflow-wrap:anywhere;
    }

    .gateway-grid.view-cards .gateway-wan-grid{
        grid-template-columns:1fr!important;
        gap:9px!important;
        min-width:0;
    }

    .gateway-grid.view-cards .gateway-wan-card{
        min-width:0;
        overflow:hidden;
        padding:11px!important;
        border-radius:14px!important;
    }

    .gateway-grid.view-cards .gateway-wan-head{
        align-items:flex-start!important;
        flex-direction:column!important;
        gap:4px!important;
        min-width:0;
    }

    .gateway-grid.view-cards .gateway-wan-head strong,
    .gateway-grid.view-cards .gateway-wan-head b{
        max-width:100%;
        white-space:normal!important;
        overflow-wrap:anywhere;
        word-break:break-word;
    }

    .gateway-grid.view-cards .gateway-wan-head strong{
        font-size:14px!important;
    }

    .gateway-grid.view-cards .gateway-wan-head b{
        font-size:10px!important;
    }

    .gateway-grid.view-cards .gateway-wan-metrics{
        grid-template-columns:repeat(3,minmax(0,1fr))!important;
        gap:5px!important;
        margin-top:8px!important;
    }

    .gateway-grid.view-cards .gateway-wan-metrics div{
        min-width:0;
        padding:7px 5px!important;
    }

    .gateway-grid.view-cards .gateway-wan-metrics small{
        font-size:8px!important;
    }

    .gateway-grid.view-cards .gateway-wan-metrics strong{
        font-size:11px!important;
        overflow-wrap:anywhere;
    }

    .gateway-grid.view-cards .gateway-wan-ip,
    .gateway-grid.view-cards .gateway-wan-provider{
        max-width:100%;
        overflow-wrap:anywhere;
        word-break:break-word;
    }

    .gateway-grid.view-cards .gateway-external-summary,
    .gateway-grid.view-cards .gateway-diagnostic{
        max-width:100%;
        min-width:0;
        font-size:12px!important;
        line-height:1.4;
        overflow-wrap:anywhere;
    }

    .gateway-grid.view-cards .gateway-actions{
        display:grid!important;
        grid-template-columns:1fr 1fr!important;
        gap:8px!important;
        width:100%;
    }

    .gateway-grid.view-cards .gateway-action{
        width:100%;
        min-width:0;
        min-height:44px;
        padding:9px 7px!important;
        display:flex;
        align-items:center;
        justify-content:center;
        text-align:center;
        white-space:normal!important;
        line-height:1.15;
        font-size:11px;
    }

    .gateway-grid.view-cards .gateway-action.danger{
        grid-column:1/-1;
    }
}

@media (max-width:420px){
    .gateways-hero{
        padding:17px!important;
    }

    .gateway-kpis article{
        min-height:116px;
        padding:12px!important;
    }

    .gateway-grid.view-cards .gateway-card{
        padding:12px!important;
    }

    .gateway-grid.view-cards .gateway-info{
        grid-template-columns:1fr!important;
    }

    .gateway-grid.view-cards .gateway-info div:nth-child(3),
    .gateway-grid.view-cards .gateway-info div:nth-child(4){
        grid-column:auto;
    }

    .gateway-grid.view-cards .gateway-wan-metrics{
        grid-template-columns:repeat(3,minmax(0,1fr))!important;
    }
}

/* Equipamentos: cards operacionais responsivos no celular.
 * Ajuste somente visual; monitoramento, diagnostico e acoes permanecem inalterados.
 */
@media (max-width:800px){
    .equipamentos-page{
        gap:14px!important;
        min-width:0;
        overflow-x:hidden;
        padding-bottom:104px;
    }

    .equip-hero{
        align-items:stretch!important;
        flex-direction:column!important;
        gap:14px!important;
        padding:20px!important;
        border-radius:22px!important;
        min-width:0;
    }

    .equip-hero>div{min-width:0}
    .equip-hero .live-pill{display:inline-flex;max-width:100%;font-size:12px;white-space:normal}
    .equip-hero h2{margin:10px 0 7px!important;font-size:clamp(27px,8vw,36px)!important;line-height:1.05!important;overflow-wrap:anywhere}
    .equip-hero p{font-size:14px!important;line-height:1.4!important}
    .equip-hero .btn{width:100%;min-height:48px}

    .equip-kpis{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:9px!important}
    .equip-kpis article{min-width:0;padding:13px!important;border-radius:18px!important}
    .equip-kpis span{width:40px!important;height:40px!important;margin-bottom:7px!important;border-radius:13px!important}
    .equip-kpis strong{font-size:27px!important}
    .equip-kpis b{display:block;font-size:11px;line-height:1.25;overflow-wrap:anywhere}

    .equip-filter{grid-template-columns:1fr!important;gap:9px!important;padding:13px!important;border-radius:18px!important;min-width:0}
    .equip-filter>*{min-width:0}
    .equip-filter input,.equip-filter select,.equip-filter .btn,.equip-filter .custom-select-btn{width:100%!important;min-width:0}
    .custom-select-menu{max-width:100%;overflow-x:hidden}
    .custom-select-menu button{white-space:normal;overflow-wrap:anywhere}

    .equipment-grid.view-cards{grid-template-columns:1fr!important;gap:12px!important;min-width:0;width:100%}
    .equipment-grid.view-cards .equipment-card{width:100%;max-width:100%;min-width:0;overflow:hidden;gap:12px!important;padding:14px!important;border-radius:18px!important}
    .equipment-grid.view-cards .equipment-status-dot{display:none}

    .equipment-grid.view-cards .equipment-head{grid-template-columns:46px minmax(0,1fr)!important;gap:11px!important;padding-right:0!important;min-width:0}
    .equipment-grid.view-cards .equipment-icon{width:46px!important;height:46px!important;border-radius:14px!important}
    .equipment-grid.view-cards .equipment-head>div{min-width:0}
    .equipment-grid.view-cards .equipment-head h3{font-size:20px!important;line-height:1.08!important;overflow-wrap:anywhere;word-break:break-word}
    .equipment-grid.view-cards .equipment-head span{font-size:12px!important;line-height:1.35;overflow-wrap:anywhere;word-break:break-word}
    .equipment-grid.view-cards .equipment-head .status-badge{grid-column:1/-1;justify-self:start;width:auto;max-width:100%;padding:7px 11px!important;white-space:normal!important;overflow-wrap:anywhere}

    .equipment-grid.view-cards .type-line{width:auto!important;max-width:100%;white-space:normal!important;overflow-wrap:anywhere;word-break:break-word}

    .equipment-grid.view-cards .equipment-info{grid-template-columns:1fr 1fr!important;gap:8px!important;min-width:0}
    .equipment-grid.view-cards .equipment-info div{min-width:0;padding:10px!important;border-radius:12px!important}
    .equipment-grid.view-cards .equipment-info small{font-size:10px!important}
    .equipment-grid.view-cards .equipment-info strong{font-size:14px;line-height:1.3;overflow-wrap:anywhere;word-break:break-word}

    .equipment-grid.view-cards .equipment-diagnostic{min-width:0;max-width:100%;padding:10px!important;border-radius:14px!important;overflow:hidden}
    .equipment-grid.view-cards .equipment-diagnostic-head{align-items:flex-start!important;flex-wrap:wrap;gap:5px!important;min-width:0}
    .equipment-grid.view-cards .equipment-diagnostic-head>*{max-width:100%;white-space:normal!important;overflow-wrap:anywhere}
    .equipment-grid.view-cards .equipment-diagnostic-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:5px!important;margin-top:8px!important;min-width:0}
    .equipment-grid.view-cards .equipment-diagnostic-grid div{min-width:0;padding:7px 5px!important}
    .equipment-grid.view-cards .equipment-diagnostic-grid small{font-size:8px!important;overflow-wrap:anywhere}
    .equipment-grid.view-cards .equipment-diagnostic-grid b{font-size:12px!important;overflow-wrap:anywhere}

    .equipment-grid.view-cards .equipment-card>p{max-width:100%;font-size:12px;line-height:1.4;overflow-wrap:anywhere;word-break:break-word}
    .equipment-grid.view-cards .equipment-communication,.equipment-grid.view-cards .equipment-external-summary,.equipment-grid.view-cards .equipment-interfaces-summary{min-width:0;max-width:100%;font-size:12px!important;line-height:1.4;overflow-wrap:anywhere;word-break:break-word}

    .equipment-grid.view-cards .equipment-actions{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:7px!important;width:100%;min-width:0}
    .equipment-grid.view-cards .eq-action{width:100%;min-width:0;min-height:44px;padding:9px 5px!important;display:flex;align-items:center;justify-content:center;text-align:center;white-space:normal!important;line-height:1.15;font-size:11px;overflow-wrap:anywhere}

    .equipment-pagination{min-width:0;max-width:100%}
    .equipment-pagination-actions{flex-wrap:wrap}
}

@media (max-width:420px){
    .equip-hero{padding:17px!important}
    .equip-kpis article{padding:11px!important}
    .equipment-grid.view-cards .equipment-card{padding:12px!important}
    .equipment-grid.view-cards .equipment-info{grid-template-columns:1fr!important}
    .equipment-grid.view-cards .equipment-actions{grid-template-columns:1fr 1fr!important}
    .equipment-grid.view-cards .eq-action.danger{grid-column:1/-1}
}