/* ITSELECT Cockpit V24 - responsive mobile/tablet layer
   Screen-only rules to preserve validated PDF/print behavior. */
@media screen {
  html,
  body{
    width:100%;
    max-width:100%;
    overflow-x:hidden;
  }
  *,*::before,*::after{box-sizing:border-box}
  img,svg,canvas,video,iframe{max-width:100%;height:auto}
  table{max-width:100%}
  body.cockpit-mobile-menu-open{overflow:hidden}

  .cockpit-mobile-bar,
  .cockpit-mobile-backdrop,
  .cockpit-mobile-close{display:none}

  .admin-table-wrap,
  .report-table-wrap,
  .history-table-wrap,
  .d4-table-wrap{
    max-width:100%;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
  }

  .d4-shell,
  .admin-shell,
  .auth-shell,
  .executive-main,
  .language-entry{
    max-width:1240px;
    width:calc(100% - 44px);
    margin-left:auto;
    margin-right:auto;
  }
}

@media screen and (max-width: 980px){
  .d4-grid,
  .d4-grid.cols-3,
  .d4-grid.cols-4,
  .admin-grid,
  .admin-section,
  .admin-form,
  .admin-form-grid,
  .admin-stats,
  .two-cols,
  .executive-grid,
  .executive-kpi-grid,
  .controls-grid,
  .profile-grid,
  .ssl-grid,
  .report-grid{
    grid-template-columns:1fr!important;
  }

  .d4-card[style*="grid-column"],
  .admin-card[style*="grid-column"],
  .executive-card[style*="grid-column"]{
    grid-column:auto!important;
  }

  .admin-card-header,
  .d4-actions,
  .admin-actions,
  .cockpit-actions,
  .report-actions,
  .profile-actions{
    flex-wrap:wrap;
    align-items:stretch;
  }

  .admin-btn,
  .d4-btn,
  .cockpit-btn,
  .report-btn,
  .profile-btn,
  button[type="submit"]{
    min-height:44px;
  }
}

@media screen and (max-width: 820px){
  body{padding-top:0}

  .cockpit-mobile-bar{
    position:sticky;
    top:0;
    z-index:2600;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    min-height:64px;
    padding:10px 14px;
    border-bottom:1px solid rgba(148,163,184,.20);
    background:linear-gradient(180deg,rgba(3,7,18,.98),rgba(7,17,31,.94));
    box-shadow:0 16px 38px rgba(0,0,0,.28);
    backdrop-filter:blur(18px);
  }

  .cockpit-mobile-menu-button,
  .cockpit-mobile-close{
    appearance:none;
    border:1px solid rgba(148,163,184,.28);
    background:rgba(15,23,42,.82);
    color:#f8fafc;
    border-radius:14px;
    min-width:44px;
    min-height:44px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    cursor:pointer;
    font-size:20px;
    line-height:1;
  }

  .cockpit-mobile-title{
    display:flex;
    align-items:center;
    gap:10px;
    min-width:0;
    color:#f8fafc;
    text-decoration:none;
  }
  .cockpit-mobile-title img{
    width:34px;
    height:34px;
    flex:0 0 34px;
    object-fit:contain;
    border-radius:10px;
  }
  .cockpit-mobile-title strong,
  .cockpit-mobile-title span{
    display:block;
    min-width:0;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
  }
  .cockpit-mobile-title strong{font-size:14px;letter-spacing:.06em}
  .cockpit-mobile-title span{max-width:42vw;margin-top:2px;color:#a8b3c7;font-size:11px}

  .cockpit-mobile-backdrop{
    position:fixed;
    inset:0;
    z-index:2800;
    display:block;
    pointer-events:none;
    opacity:0;
    background:rgba(2,6,23,.62);
    backdrop-filter:blur(3px);
    transition:opacity .18s ease;
  }
  body.cockpit-mobile-menu-open .cockpit-mobile-backdrop{
    pointer-events:auto;
    opacity:1;
  }

  .cockpit-chrome{
    position:fixed!important;
    top:0!important;
    left:0!important;
    bottom:0!important;
    z-index:3000!important;
    width:min(88vw,380px)!important;
    max-width:380px!important;
    overflow-y:auto!important;
    overflow-x:hidden!important;
    transform:translateX(-105%);
    transition:transform .22s ease;
    border-right:1px solid rgba(148,163,184,.22);
    border-bottom:0!important;
    border-radius:0 24px 24px 0;
    background:linear-gradient(180deg,rgba(3,7,18,.99),rgba(7,17,31,.97))!important;
    box-shadow:34px 0 80px rgba(0,0,0,.42)!important;
  }
  body.cockpit-mobile-menu-open .cockpit-chrome{transform:translateX(0)}

  .cockpit-mobile-close{
    display:flex;
    margin:12px 14px 0 auto;
  }

  .cockpit-topline{
    display:none!important;
  }
  .cockpit-header{
    display:flex!important;
    flex-direction:column!important;
    align-items:stretch!important;
    justify-content:flex-start!important;
    width:100%!important;
    max-width:none!important;
    padding:14px!important;
    gap:14px!important;
    text-align:left!important;
  }
  .cockpit-brand{
    justify-content:flex-start!important;
    min-width:0!important;
    width:100%!important;
    padding:6px 4px 12px;
    border-bottom:1px solid rgba(148,163,184,.16);
  }
  .cockpit-brand img{width:40px;height:40px;flex:0 0 40px}

  .cockpit-main-nav,
  .cockpit-subnav,
  .cockpit-header-actions{
    display:flex!important;
    flex-direction:column!important;
    align-items:stretch!important;
    justify-content:flex-start!important;
    width:100%!important;
    max-width:none!important;
    padding:0!important;
    gap:8px!important;
  }
  .cockpit-subnav{
    padding:0 14px 18px!important;
  }
  .cockpit-main-nav a,
  .cockpit-subnav a,
  .cockpit-header-link,
  .cockpit-logout{
    width:100%!important;
    justify-content:flex-start!important;
    text-align:left!important;
    border-radius:14px!important;
    padding:12px 14px!important;
    white-space:normal!important;
    min-height:44px;
  }

  .cockpit-user-context{
    align-items:flex-start!important;
    width:100%!important;
    max-width:none!important;
    border-radius:16px!important;
    margin:0!important;
  }
  .cockpit-user-context strong,
  .cockpit-user-context span{max-width:100%!important}

  .d4-shell,
  .admin-shell,
  .auth-shell,
  .executive-main,
  .language-entry{
    width:100%!important;
    max-width:100%!important;
    padding:18px 14px 0!important;
    margin:0!important;
  }

  .d4-hero,
  .admin-hero,
  .executive-hero,
  .admin-overview-hero{
    padding:22px 18px!important;
    border-radius:22px!important;
  }
  .d4-hero h1,
  .admin-hero h1,
  .executive-hero h1,
  .admin-overview-hero h1{
    font-size:clamp(28px,8vw,42px)!important;
    line-height:1.08!important;
  }

  .d4-card,
  .admin-card,
  .executive-card,
  .panel,
  .profile-card,
  .ssl-card{
    max-width:100%!important;
    border-radius:20px!important;
    padding:18px!important;
  }

  .d4-roadmap,
  .admin-focus-grid,
  .admin-module-list,
  .admin-overview-hero,
  .admin-form,
  .admin-grid,
  .admin-section{
    grid-template-columns:1fr!important;
  }

  .admin-table-wrap{
    width:100%!important;
    max-width:100%!important;
    overflow-x:auto!important;
    -webkit-overflow-scrolling:touch;
    border-radius:16px!important;
  }
  .admin-table{
    min-width:720px!important;
    table-layout:auto!important;
  }

  .d4-actions,
  .admin-actions,
  .cockpit-actions,
  .report-actions,
  .profile-actions{
    display:flex!important;
    flex-direction:column!important;
    align-items:stretch!important;
    gap:10px!important;
  }
  .d4-actions a,
  .d4-actions button,
  .admin-actions a,
  .admin-actions button,
  .cockpit-actions a,
  .cockpit-actions button,
  .report-actions a,
  .report-actions button,
  .profile-actions a,
  .profile-actions button{
    width:100%!important;
    justify-content:center!important;
  }

  input,select,textarea,button{font-size:16px}

  .cockpit-footer{
    width:100%!important;
    max-width:100%!important;
    margin:28px 0 0!important;
    padding:22px 14px 28px!important;
    grid-template-columns:1fr!important;
    text-align:center!important;
  }
  .cockpit-footer-links{
    justify-content:center!important;
    gap:6px!important;
  }
  .cockpit-footer-meta{text-align:center!important;max-width:none!important}
}

@media screen and (max-width: 520px){
  .cockpit-mobile-title span{max-width:34vw}
  .d4-shell,
  .admin-shell,
  .auth-shell,
  .executive-main,
  .language-entry{padding-left:12px!important;padding-right:12px!important}
  .d4-hero,
  .admin-hero,
  .executive-hero,
  .admin-overview-hero,
  .d4-card,
  .admin-card,
  .executive-card,
  .panel,
  .profile-card,
  .ssl-card{padding:16px!important;border-radius:18px!important}
  .d4-gauge{transform:scale(.92);transform-origin:left center}
  .admin-table{min-width:680px!important}
  .admin-table th,.admin-table td{padding:10px!important;font-size:13px!important}
}

@media print{
  .cockpit-mobile-bar,
  .cockpit-mobile-backdrop,
  .cockpit-mobile-close{display:none!important}
}
@media screen and (max-width:820px){.cockpit-mobile-spacer{display:block;flex:0 0 44px;width:44px;height:44px}}