/* =========================================================
   UAE SHIELD // RESPONSIVE UI v30
   ========================================================= */

/* laptop */
@media(max-width:1450px) and (min-width:1101px){
  :root{--sidebar:210px}
  .brand-logo{width:54px!important;height:54px!important}
  #mainSidebar nav a{font-size:10px!important}
  .cyber-actions{grid-template-columns:repeat(3,minmax(0,1fr))!important}
  .cyber-extra-grid,.dashboard-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important}
}

/* tablet */
@media(max-width:1100px){
  body{padding-top:58px!important}

  main{
    width:100%!important;
    max-width:100%!important;
    margin:0!important;
  }

  .desktop-header{display:none!important}

  .mobile-topbar{
    display:flex!important;
    position:fixed!important;
    z-index:1700!important;
    top:0!important;right:0!important;left:0!important;
    height:58px!important;
    padding:0 11px!important;
    align-items:center!important;
    justify-content:space-between!important;
    background:rgba(4,17,28,.98)!important;
    border-bottom:1px solid #16465e!important;
    box-shadow:0 7px 20px rgba(0,0,0,.22)!important;
  }

  .mobile-menu-btn{
    width:38px!important;height:38px!important;
    padding:8px!important;
    display:flex!important;
    flex-direction:column!important;
    justify-content:center!important;
    gap:4px!important;
    border:1px solid #17506b!important;
    border-radius:8px!important;
    background:#081c2b!important;
  }
  .mobile-menu-btn span{display:block!important;width:100%!important;height:2px!important;background:#29e6ff!important}

  .mobile-brand{text-align:center!important}
  .mobile-brand strong{display:block!important;color:#fff!important;font-size:11px!important}
  .mobile-brand small{display:block!important;color:#6d91a5!important;font:7px monospace!important;margin-top:2px!important}

  .mobile-status{display:flex!important;align-items:center!important;gap:5px!important;color:#26efa3!important;font:800 7px monospace!important}
  .mobile-status-dot{width:6px!important;height:6px!important;border-radius:50%!important;background:#26efa3!important;box-shadow:0 0 7px #26efa3!important}

  .sidebar-overlay{
    display:block!important;
    position:fixed!important;
    z-index:1750!important;
    inset:0!important;
    background:rgba(0,0,0,.62)!important;
    opacity:0!important;
    visibility:hidden!important;
    transition:.2s!important;
  }
  .sidebar-overlay.show{opacity:1!important;visibility:visible!important}

  #mainSidebar{
    z-index:1800!important;
    top:0!important;left:0!important;right:auto!important;
    width:280px!important;max-width:86vw!important;height:100dvh!important;
    transform:translateX(-105%)!important;
    transition:transform .22s ease!important;
    box-shadow:12px 0 35px rgba(0,0,0,.45)!important;
  }
  #mainSidebar.open{transform:translateX(0)!important}
  #mainSidebar .brand{display:none!important}

  .sidebar-mobile-head{
    display:flex!important;
    align-items:center!important;
    justify-content:space-between!important;
    padding:14px!important;
    border-bottom:1px solid #15435d!important;
  }
  .sidebar-mobile-head strong{display:block!important;color:#fff!important;font-size:11px!important}
  .sidebar-mobile-head small{display:block!important;color:#29e6ff!important;font:7px monospace!important;margin-top:2px!important}
  .sidebar-close{width:34px!important;height:34px!important;background:#081b29!important;border:1px solid #17475f!important;color:#a9d8ea!important;font-size:19px!important}

  .page-content{padding:10px!important}

  .cyber-actions{grid-template-columns:repeat(3,minmax(0,1fr))!important}
  .cyber-extra-grid,.dashboard-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .dashboard-two,.chart-grid,.chart-grid.equal{grid-template-columns:1fr!important}

  .chart-panel{min-height:250px!important}
  .chart-box,.chart-box.donut{height:200px!important}

  .panel{overflow-x:auto!important;-webkit-overflow-scrolling:touch!important}
  .panel table{min-width:680px!important}
}

/* phone */
@media(max-width:700px){
  body{padding-top:56px!important}
  .mobile-topbar{height:56px!important}
  .page-content{padding:7px!important}

  .cyber-hero{
    padding:11px!important;
    flex-direction:column!important;
    align-items:flex-start!important;
  }

  .cyber-actions,.cyber-extra-grid,.dashboard-grid{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:6px!important;
  }

  .cyber-action{min-height:72px!important;padding:8px!important}
  .cyber-action .ca-num{font-size:18px!important}
  .cyber-action .ca-label{font-size:7px!important}

  .grid{grid-template-columns:1fr!important}
  .grid .full{grid-column:1!important}

  input,select,textarea{min-height:42px!important;font-size:12px!important}
  .btn,button{min-height:40px!important}

  .chart-panel{min-height:230px!important;padding:9px!important}
  .chart-box,.chart-box.donut{height:185px!important}

  #mainSidebar{width:270px!important;max-width:90vw!important}
}

/* small phone */
@media(max-width:430px){
  .mobile-status{font-size:0!important}
  .mobile-brand strong{font-size:10px!important}
  .mobile-brand small{font-size:6px!important}
  .cyber-actions,.cyber-extra-grid,.dashboard-grid{grid-template-columns:1fr 1fr!important}
}

body.sidebar-open{overflow:hidden!important}