/* =====================================================================
   JK Diagnostic - Responsive UI Pack 1.0
   Mobile / Tablet / Laptop hardening. Loaded AFTER all module styles.
   No functional/diagnostic logic is changed here.
   ===================================================================== */

:root{
  --jkd-mobile-bar-h:64px;
  --jkd-mobile-drawer-w:min(88vw,340px);
}

html{
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
}

body.jkd-clean-active{
  min-width:0!important;
}

/* Always allow children of the application shell to shrink. */
body.jkd-clean-active .app-shell,
body.jkd-clean-active .jkd-shell,
body.jkd-clean-active .backup-shell,
body.jkd-clean-active .license-shell,
body.jkd-clean-active .main,
body.jkd-clean-active .jkd-main,
body.jkd-clean-active .backup-main,
body.jkd-clean-active .license-main,
body.jkd-clean-active .content,
body.jkd-clean-active section,
body.jkd-clean-active article{
  min-width:0!important;
  max-width:100%;
}

body.jkd-clean-active img,
body.jkd-clean-active svg,
body.jkd-clean-active video,
body.jkd-clean-active canvas{
  max-width:100%!important;
}

body.jkd-clean-active img,
body.jkd-clean-active video{
  height:auto;
}

body.jkd-clean-active input,
body.jkd-clean-active select,
body.jkd-clean-active textarea,
body.jkd-clean-active button{
  max-width:100%!important;
}

body.jkd-clean-active textarea{
  resize:vertical;
}

/* Prevent long ECU IDs, paths, stages and JSON from widening the page. */
body.jkd-clean-active :is(pre,code,.stage,.path,.file-path,.mono,.terminal,.decoded-block,.json-card,.jkd-json-entry){
  max-width:100%!important;
  overflow-wrap:anywhere!important;
  word-break:break-word!important;
}
body.jkd-clean-active pre{
  overflow:auto!important;
  white-space:pre-wrap!important;
}

/* Responsive mobile header is injected by jkd-responsive.js. */
.jkd-mobile-bar,
.jkd-mobile-scrim{
  display:none;
}

/* Desktop/tablet shell: do not rely on calc() widths from legacy module CSS. */
@media (min-width:981px){
  body.jkd-clean-active .app-shell,
  body.jkd-clean-active .jkd-shell,
  body.jkd-clean-active .backup-shell{
    grid-template-columns:minmax(220px,250px) minmax(0,1fr)!important;
  }
  body.jkd-clean-active .sidebar,
  body.jkd-clean-active .jkd-sidebar,
  body.jkd-clean-active .backup-sidebar{
    width:250px!important;
    min-width:220px!important;
    max-width:250px!important;
  }
  body.jkd-clean-active .main,
  body.jkd-clean-active .jkd-main,
  body.jkd-clean-active .backup-main,
  body.jkd-clean-active .license-main,
  body.jkd-clean-active .studio-main,
  body.jkd-clean-active .scan-main,
  body.jkd-clean-active .test-main,
  body.jkd-clean-active .coverage-main,
  body.jkd-clean-active .service-main,
  body.jkd-clean-active .stage1-main{
    width:auto!important;
    min-width:0!important;
  }
}

/* Medium workshop laptops / landscape tablets. */
@media (max-width:1280px) and (min-width:981px){
  body.jkd-clean-active .app-shell,
  body.jkd-clean-active .jkd-shell,
  body.jkd-clean-active .backup-shell{
    grid-template-columns:220px minmax(0,1fr)!important;
  }
  body.jkd-clean-active .sidebar,
  body.jkd-clean-active .jkd-sidebar,
  body.jkd-clean-active .backup-sidebar{
    width:220px!important;
    min-width:220px!important;
    max-width:220px!important;
    padding:18px 14px!important;
  }
  body.jkd-clean-active .jkd-brand-mark,
  body.jkd-clean-active .brand-mark,
  body.jkd-clean-active .logo-mark{
    width:48px!important;
    height:48px!important;
    min-width:48px!important;
    min-height:48px!important;
    border-radius:16px!important;
  }
  body.jkd-clean-active .jkd-brand-mark img,
  body.jkd-clean-active .brand-mark img,
  body.jkd-clean-active .logo-mark img{
    width:44px!important;
    height:44px!important;
  }
  body.jkd-clean-active .jkd-brand-text strong,
  body.jkd-clean-active .brand strong,
  body.jkd-clean-active .brand-title{
    font-size:16px!important;
  }
  body.jkd-clean-active .jkd-brand-text small,
  body.jkd-clean-active .brand small,
  body.jkd-clean-active .brand-subtitle{
    font-size:11px!important;
    white-space:normal!important;
  }
  body.jkd-clean-active .main,
  body.jkd-clean-active .jkd-main,
  body.jkd-clean-active .studio-main,
  body.jkd-clean-active .scan-main,
  body.jkd-clean-active .test-main,
  body.jkd-clean-active .coverage-main,
  body.jkd-clean-active .service-main,
  body.jkd-clean-active .stage1-main{
    padding-left:18px!important;
    padding-right:18px!important;
  }
  body.jkd-clean-active :is(.summary-grid,.metric-grid,.module-grid,.profile-grid,.signal-grid,.recording-stats-grid,.slot-grid){
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }
}

/* =====================================================================
   PHONE / PORTRAIT TABLET - real off-canvas navigation
   ===================================================================== */
@media (max-width:980px){
  html,body,body.jkd-clean-active{
    width:100%!important;
    min-width:0!important;
    height:auto!important;
    min-height:100%!important;
    overflow-x:hidden!important;
    overflow-y:auto!important;
  }

  body.jkd-clean-active{
    padding-top:var(--jkd-mobile-bar-h)!important;
    font-size:14px!important;
  }

  body.jkd-clean-active .app-shell,
  body.jkd-clean-active .jkd-shell,
  body.jkd-clean-active .backup-shell,
  body.jkd-clean-active .license-shell{
    display:block!important;
    width:100%!important;
    height:auto!important;
    min-height:calc(100dvh - var(--jkd-mobile-bar-h))!important;
    overflow:visible!important;
  }

  .jkd-mobile-bar{
    position:fixed;
    inset:0 0 auto 0;
    z-index:1200;
    height:var(--jkd-mobile-bar-h);
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    padding:10px 14px;
    background:rgba(255,255,255,.97);
    border-bottom:1px solid #dfe2e6;
    box-shadow:0 5px 20px rgba(35,40,45,.08);
    backdrop-filter:blur(14px);
    -webkit-backdrop-filter:blur(14px);
  }
  .jkd-mobile-title{
    min-width:0;
    display:flex;
    align-items:center;
    gap:10px;
    color:#24282d;
    font-weight:900;
    font-size:16px;
    line-height:1.15;
  }
  .jkd-mobile-title img{
    width:38px!important;
    height:38px!important;
    min-width:38px;
    object-fit:contain;
    border-radius:12px;
  }
  .jkd-mobile-title span{
    display:block;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
  }
  .jkd-mobile-menu-toggle{
    appearance:none;
    width:44px!important;
    min-width:44px!important;
    height:44px!important;
    min-height:44px!important;
    padding:0!important;
    display:grid!important;
    place-items:center;
    border:1px solid #d5d9de!important;
    border-radius:12px!important;
    background:#fff!important;
    color:#24282d!important;
    box-shadow:none!important;
    cursor:pointer;
    font-size:0!important;
  }
  .jkd-mobile-menu-toggle::before{
    content:'☰';
    font-size:24px;
    line-height:1;
    font-weight:700;
  }
  body.jkd-mobile-nav-open .jkd-mobile-menu-toggle::before{content:'×';font-size:30px;}

  .jkd-mobile-scrim{
    position:fixed;
    inset:var(--jkd-mobile-bar-h) 0 0 0;
    z-index:1090;
    display:block;
    pointer-events:none;
    opacity:0;
    background:rgba(18,22,26,.38);
    transition:opacity .2s ease;
  }
  body.jkd-mobile-nav-open .jkd-mobile-scrim{
    pointer-events:auto;
    opacity:1;
  }

  body.jkd-clean-active .sidebar,
  body.jkd-clean-active .jkd-sidebar,
  body.jkd-clean-active .backup-sidebar{
    position:fixed!important;
    z-index:1100!important;
    top:var(--jkd-mobile-bar-h)!important;
    left:0!important;
    bottom:0!important;
    width:var(--jkd-mobile-drawer-w)!important;
    min-width:0!important;
    max-width:var(--jkd-mobile-drawer-w)!important;
    height:calc(100dvh - var(--jkd-mobile-bar-h))!important;
    padding:16px!important;
    overflow-y:auto!important;
    overflow-x:hidden!important;
    border:0!important;
    border-right:1px solid #dfe2e6!important;
    background:#fff!important;
    box-shadow:18px 0 42px rgba(35,40,45,.18)!important;
    transform:translateX(-105%);
    transition:transform .22s ease;
    overscroll-behavior:contain;
  }
  body.jkd-mobile-nav-open .sidebar,
  body.jkd-mobile-nav-open .jkd-sidebar,
  body.jkd-mobile-nav-open .backup-sidebar{
    transform:translateX(0);
  }
  body.jkd-mobile-nav-open{
    overflow:hidden!important;
  }

  /* Brand already exists in drawer; compact it. */
  body.jkd-clean-active .sidebar :is(.brand,.jkd-brand,.backup-brand),
  body.jkd-clean-active .jkd-sidebar :is(.brand,.jkd-brand,.backup-brand){
    margin-bottom:16px!important;
  }
  body.jkd-clean-active .jkd-brand-text small,
  body.jkd-clean-active .brand small,
  body.jkd-clean-active .brand-subtitle{
    white-space:normal!important;
  }

  body.jkd-clean-active .main,
  body.jkd-clean-active .jkd-main,
  body.jkd-clean-active .backup-main,
  body.jkd-clean-active .license-main,
  body.jkd-clean-active .studio-main,
  body.jkd-clean-active .scan-main,
  body.jkd-clean-active .test-main,
  body.jkd-clean-active .coverage-main,
  body.jkd-clean-active .service-main,
  body.jkd-clean-active .stage1-main{
    width:100%!important;
    min-width:0!important;
    max-width:100%!important;
    height:auto!important;
    min-height:calc(100dvh - var(--jkd-mobile-bar-h))!important;
    overflow:visible!important;
    padding-left:16px!important;
    padding-right:16px!important;
    padding-bottom:36px!important;
  }

  body.jkd-clean-active :is(.topbar,.jkd-topbar,.backup-hero,.license-hero,.jkd-hero,.studio-hero,.test-hero){
    position:relative!important;
    top:auto!important;
    z-index:1!important;
    width:100%!important;
    max-width:100%!important;
  }

  body.jkd-clean-active :is(.topbar,.jkd-topbar,.service-topbar,.panel-head,.panel-header,.section-head,.live-header,.recording-header,.hero-actions,.button-row,.actions,.toolbar,.studio-toolbar,.filter-actions){
    flex-wrap:wrap!important;
    gap:10px!important;
  }

  body.jkd-clean-active :is(.summary-grid,.metric-grid,.module-grid,.profile-grid,.profile-result-grid,.signal-grid,.recording-stats-grid,.source-grid,.lower-grid,.content-grid,.workshop-grid,.test-layout,.studio-grid,.slot-grid,.live-prep-grid,.recording-grid,.filter-grid,.settings-grid,.plan-detail-grid,.lexicon-meta-grid){
    grid-template-columns:1fr!important;
    width:100%!important;
  }

  body.jkd-clean-active :is(.hero-grid,.service-grid,.result-grid,.analysis-grid,.bottom-grid,.cockpit-grid,.coverage-grid,.edition-grid,.detail-grid-two,.featured-codes,.library-layout,.live-form-grid,.map-grid,.prepare-grid,.search-grid,.stage1-status-grid,.stage1-layout,.stat-grid,.tire-grid,.gear-grid,.workshop-control,.scan-controls,.target-numbers,.form-grid,.jkd-stats){
    grid-template-columns:1fr!important;
    width:100%!important;
  }

  body.jkd-clean-active :is(.control-strip,.control-row,.form-row,.filter-row,.settings-row){
    display:flex!important;
    flex-wrap:wrap!important;
    width:100%!important;
    gap:10px!important;
  }
  body.jkd-clean-active :is(.control-group,.control-group.wide,.control-group.compact){
    flex:1 1 220px!important;
    width:auto!important;
    min-width:0!important;
    max-width:100%!important;
  }

  body.jkd-clean-active table{
    display:block!important;
    width:100%!important;
    max-width:100%!important;
    overflow-x:auto!important;
    -webkit-overflow-scrolling:touch;
  }
  body.jkd-clean-active :is(.table-wrap,.table-shell,.table-container,.coverage-table-wrap,.history-table-wrap,.responsive-table){
    width:100%!important;
    max-width:100%!important;
    overflow-x:auto!important;
    -webkit-overflow-scrolling:touch;
  }
  body.jkd-clean-active :is(.coverage-table,.history-table,.fault-table,.data-table){
    min-width:680px!important;
  }

  body.jkd-clean-active .jkd-json-console{
    left:10px!important;
    right:10px!important;
    bottom:10px!important;
    width:auto!important;
    max-width:none!important;
    max-height:70dvh!important;
  }

  body.jkd-clean-active .jkd-json-toggle{
    right:10px!important;
    bottom:10px!important;
  }

  body.jkd-clean-active .jkd-clean-scroll-note{display:none!important;}
}

/* Phones. */
@media (max-width:640px){
  :root{--jkd-mobile-bar-h:60px;--jkd-mobile-drawer-w:min(92vw,330px);}

  body.jkd-clean-active .main,
  body.jkd-clean-active .jkd-main,
  body.jkd-clean-active .backup-main,
  body.jkd-clean-active .license-main,
  body.jkd-clean-active .studio-main,
  body.jkd-clean-active .scan-main,
  body.jkd-clean-active .test-main,
  body.jkd-clean-active .coverage-main,
  body.jkd-clean-active .service-main,
  body.jkd-clean-active .stage1-main{
    padding-left:12px!important;
    padding-right:12px!important;
  }

  body.jkd-clean-active h1{font-size:clamp(1.65rem,8vw,2.25rem)!important;}
  body.jkd-clean-active h2{font-size:clamp(1.25rem,6vw,1.75rem)!important;}
  body.jkd-clean-active h3{font-size:clamp(1rem,5vw,1.3rem)!important;}

  body.jkd-clean-active :is(.card,.panel,.metric-card,.module-card,.quick-card,.bundle-card,.control-card,.status-card,.side-card,.profile-card,.live-card,.recording-card,.chart-panel,.source-item,.summary-card,.stage-card,.stage1-card){
    border-radius:14px!important;
    padding:14px!important;
  }

  body.jkd-clean-active :is(.btn,button:not(.jkd-mobile-menu-toggle),input,select,textarea){
    min-height:44px!important;
  }

  body.jkd-clean-active :is(.button-row,.actions,.hero-actions,.filter-actions) > :is(.btn,button,a.btn){
    flex:1 1 100%!important;
    width:100%!important;
    justify-content:center!important;
    text-align:center!important;
  }

  body.jkd-clean-active :is(input:not([type="checkbox"]):not([type="radio"]),select,textarea){
    width:100%!important;
  }

  body.jkd-clean-active .test-item{
    grid-template-columns:32px minmax(0,1fr)!important;
  }
  body.jkd-clean-active .test-item :is(.stage,.ms){grid-column:2!important;}

  body.jkd-clean-active .metrics,
  body.jkd-clean-active .gauge-grid,
  body.jkd-clean-active .live-grid{
    grid-template-columns:1fr!important;
  }

  body.jkd-clean-active pre,
  body.jkd-clean-active .terminal{
    font-size:11.5px!important;
    max-height:48dvh!important;
  }
}

/* Very small phones. */
@media (max-width:390px){
  .jkd-mobile-bar{padding-left:10px;padding-right:10px;}
  .jkd-mobile-title{font-size:14px;gap:8px;}
  .jkd-mobile-title img{width:34px!important;height:34px!important;min-width:34px;}
  body.jkd-clean-active .main,
  body.jkd-clean-active .jkd-main,
  body.jkd-clean-active .studio-main,
  body.jkd-clean-active .scan-main,
  body.jkd-clean-active .test-main,
  body.jkd-clean-active .coverage-main,
  body.jkd-clean-active .service-main,
  body.jkd-clean-active .stage1-main{padding-left:9px!important;padding-right:9px!important;}
}

/* Touch devices: bigger click area without changing desktop density. */
@media (pointer:coarse){
  body.jkd-clean-active .jkd-nav a,
  body.jkd-clean-active .nav a,
  body.jkd-clean-active .backup-nav a{min-height:44px!important;}
}

/* Respect reduced-motion preference. */
@media (prefers-reduced-motion:reduce){
  .jkd-mobile-scrim,
  body.jkd-clean-active .sidebar,
  body.jkd-clean-active .jkd-sidebar,
  body.jkd-clean-active .backup-sidebar{transition:none!important;}
}

/* JKD MOBILE R2 BANNER */
@media(max-width:640px){#jkd-web-demo-ribbon{padding:5px 7px!important;font-size:10px!important;line-height:1.2!important;min-height:0!important}body.jkd-clean-active{padding-bottom:30px!important}}