/* /css/icc.layout.css — ICC Layout (3-panel cockpit invariant)
   LOCKED: Dark cockpit | 5 surfaces | radius family | spacing grid
*/

/* App shell */
.icc-app{
  min-height:100vh;
  display:grid;
  grid-template-rows:auto 1fr;
}

/* Main area (under header) */
.icc-main{
  min-height:0;
}

/* Header bar mount (optional wrapper) */
.icc-topbar{
  background:linear-gradient(180deg, rgba(255,255,255,.04), transparent);
  border-bottom:1px solid var(--icc-border);
  padding:var(--icc-s-16);
}

/* 3-panel cockpit grid */
.icc-cockpit{
  display:grid;
  grid-template-columns: minmax(280px,320px) 1fr minmax(360px,440px);
  gap:var(--icc-s-16);
  padding:var(--icc-s-16);
  align-items:stretch;
  min-height:0;
}

/* ✅ REAL NAV COLLAPSE (left panel shrinks) */
.icc-cockpit.collapsed{
  grid-template-columns: 64px 1fr minmax(360px,440px);
}

/* Panels */
.icc-panel{
  background:var(--icc-panel);
  border:1px solid var(--icc-border);
  border-radius:var(--icc-r-22);
  box-shadow:var(--icc-shadow-1);
  min-height:0;
  overflow:hidden;
  display:flex;
  flex-direction:column;
}

/* Panel sections */
.icc-panel__hd{
  padding:var(--icc-s-16);
  border-bottom:1px solid var(--icc-border);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--icc-s-16);
}

.icc-panel__bd{
  padding:var(--icc-s-16);
  min-height:0;
  flex:1;
}

.icc-panel__ft{
  padding:var(--icc-s-16);
  border-top:1px solid var(--icc-border);
}

/* Cards inside panels */
.icc-card{
  background:var(--icc-card);
  border:1px solid var(--icc-border);
  border-radius:var(--icc-r-18);
  box-shadow:0 10px 28px rgba(0,0,0,.25);
}

.icc-card--p16{padding:var(--icc-s-16);}
.icc-card--p24{padding:var(--icc-s-24);}

/* ✅ Collapsed nav: tighter padding + ensure mini UI sits centered */
.icc-cockpit.collapsed .icc-left .icc-panel__bd{
  padding:10px;
}
.icc-cockpit.collapsed .icc-left{
  overflow:hidden;
}
.icc-cockpit.collapsed .icc-left #navMount{
  overflow:hidden;
}

/* ✅ Collapsed nav: flatten inner card chrome (prevents cramped double-padding look) */
.icc-cockpit.collapsed .icc-left #navMount > .icc-card{
  padding:0 !important;       /* override icc-card--p24 */
  border-color:transparent;
  background:transparent;
  box-shadow:none;
}

/* Collapsed nav mini UI */
.navMini{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:12px;
}
.navMiniStack{
  display:flex;
  flex-direction:column;
  gap:10px;
}
.navMiniBtn{
  width:44px;
  height:44px;
  padding:0;
  border-radius:var(--icc-r-14);
  font-weight:650;
}

/* Floating nav toggle (ONLY shown when nav is collapsed by JS) */
.navToggleFloat{
  position:fixed;
  left: 14px;
  top: 132px;
  z-index: var(--icc-z-toast);

  width: 36px;
  height: 36px;
  border-radius: var(--icc-r-14);

  display:none;
  align-items:center;
  justify-content:center;

  border: 1px solid rgba(255,255,255,.14);
  background:
    radial-gradient(120px 60px at 30% 20%, rgba(187,146,90,.18), transparent 60%),
    rgba(12,28,42,.78);

  color: var(--icc-text);
  cursor:pointer;
  user-select:none;

  box-shadow: 0 14px 44px rgba(0,0,0,.45);
  backdrop-filter: blur(10px);

  transition:
    transform var(--icc-dur) var(--icc-ease),
    background var(--icc-dur) var(--icc-ease),
    border-color var(--icc-dur) var(--icc-ease),
    opacity var(--icc-dur) var(--icc-ease);
}

.navToggleFloat:hover{
  border-color: rgba(187,146,90,.42);
  background:
    radial-gradient(120px 60px at 30% 20%, rgba(187,146,90,.26), transparent 60%),
    rgba(12,28,42,.88);
}

.navToggleFloat:active{
  transform: translateY(1px);
}

/* If header height changes on mobile, keep the float button sane */
@media (max-width: 1000px){
  .navToggleFloat{ top: 116px; }
}

/* Responsive collapse */
@media (max-width: 1200px){
  .icc-cockpit{grid-template-columns: minmax(280px,320px) 1fr;}
  .icc-cockpit.collapsed{grid-template-columns: 64px 1fr;}
  .icc-right{display:none;}
}

@media (max-width: 900px){
  .icc-cockpit{grid-template-columns: 1fr;}
  .icc-left{order:1;}
  .icc-mid{order:2;}
  .icc-right{display:none;}

  .navToggleFloat{ top: 104px; }
}