/* ControlPlan compatibility layer for GRC Suite Unified Platform UI.
   Shell geometry and visual tokens belong to grc-suite-v1.css. */

.main-content{min-height:100vh}
.controlplan-app-shell{width:100%;min-height:100vh;min-height:100dvh}

/* Keep legacy Bulma pages inside the same DataPlan content canvas. */
.dashboard-content{width:100%;max-width:var(--grc-content-max);margin:0 auto;padding:26px 30px 42px}
.dashboard-content>.level,
.controlplan-page-header{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;flex-wrap:wrap;margin-bottom:20px}
.dashboard-content>.level>.level-left,
.controlplan-page-header>.level-left{flex:1 1 360px;min-width:0}
.dashboard-content>.level>.level-right,
.controlplan-page-header>.level-right{display:flex;align-items:center;justify-content:flex-end;gap:8px;flex-wrap:wrap;min-width:0}

/* Workspace switcher is a native topbar control, styled like DataPlan fields. */
.controlplan-workspace-switcher{margin:0}
.controlplan-workspace-switcher select{
  min-width:210px;max-width:300px;height:38px;padding:0 34px 0 11px;
  border:1px solid var(--grc-line-strong);border-radius:var(--grc-radius-sm);
  background:#fff;color:var(--grc-ink);font:inherit;font-size:12px
}
.controlplan-beta{background:var(--grc-warning-bg);color:#805012}

/* Bulma boxes/tables/buttons inherit the unified platform appearance. */
.box,.card{background:var(--grc-surface);border:1px solid var(--grc-line);border-radius:var(--grc-radius);box-shadow:var(--grc-shadow)}
.button{border-radius:var(--grc-radius-sm)}
.table-container{max-width:100%;overflow-x:auto}
.table{background:transparent}
.table th{background:#f8f9fc;color:var(--grc-muted);font-size:10px;font-weight:800;letter-spacing:.055em;text-transform:uppercase}
.table td,.table th{border-color:var(--grc-line)}
.notification{border-radius:var(--grc-radius-sm)}

/* Auth secondary link. */
.controlplan-auth-enrollment{margin-top:16px;text-align:center;color:var(--grc-muted);font-size:12px}
.controlplan-auth-enrollment a{font-weight:700;text-decoration:none}

/* Old fixed-sidebar rules are neutralized because app-shell now owns geometry. */
.controlplan-app-shell .sidebar{position:sticky;top:0;height:100vh}
.controlplan-app-shell .main-panel{min-width:0;width:100%}
body.sidebar-collapsed .dashboard-main{width:auto;margin-left:0}

@media (max-width: 1100px){
  .controlplan-topbar .topbar-end{gap:8px}
  .controlplan-workspace-switcher select{min-width:170px;max-width:220px}
}
@media (max-width: 900px){
  .dashboard-content{padding:20px 18px 36px}
  .controlplan-workspace-switcher{display:none}
  .topbar-context .topbar-tenant{max-width:180px}
}
@media (max-width: 600px){
  .dashboard-content{padding:18px 14px 32px}
  .topbar-context .role-badge{display:none}
  .dashboard-content>.level>.level-left,
  .dashboard-content>.level>.level-right,
  .controlplan-page-header>.level-left,
  .controlplan-page-header>.level-right{flex-basis:100%;width:100%}
}

/* v3.24.5 application-shell responsive height and alignment hotfix.
   The sidebar fills the viewport while only the navigation region scrolls.
   This prevents short/zoomed desktop viewports from clipping navigation or
   letting legacy shell rules pull the main content out of alignment. */
.controlplan-app-shell{
  min-height:100vh;
  min-height:100dvh;
  align-items:stretch;
}
.controlplan-app-shell>.sidebar{
  position:sticky!important;
  top:0!important;
  height:100vh!important;
  height:100dvh!important;
  max-height:100vh!important;
  max-height:100dvh!important;
  min-height:0!important;
  overflow:hidden!important;
  display:flex!important;
  flex-direction:column!important;
  align-self:start;
}
.controlplan-app-shell>.sidebar>.nav{
  flex:1 1 auto;
  min-height:0;
  overflow-x:hidden;
  overflow-y:auto;
  overscroll-behavior:contain;
  scrollbar-gutter:stable;
  padding-right:2px;
}
.controlplan-app-shell>.sidebar>.sidebar-footer{
  flex:0 0 auto;
  margin-top:0;
}
.controlplan-app-shell>.main-panel{
  min-width:0;
  width:auto!important;
  margin-left:0!important;
  min-height:100vh;
  min-height:100dvh;
  display:flex;
  flex-direction:column;
  overflow:visible;
}
.controlplan-app-shell>.main-panel>.dashboard-content{flex:1 0 auto;overflow:visible}
.controlplan-app-shell .app-footer{flex:0 0 auto;margin:0}
.controlplan-app-shell .topbar,
.controlplan-app-shell .dashboard-content{
  width:100%;
}
.controlplan-app-shell .dashboard-content{
  margin-left:auto!important;
  margin-right:auto!important;
}

/* Keep desktop shell geometry owned by the grid, including at short heights
   and zoom-equivalent widths just above the mobile drawer breakpoint. */
@media (min-width:901px){
  .controlplan-app-shell{
    display:grid!important;
    grid-template-columns:var(--grc-sidebar-width) minmax(0,1fr)!important;
  }
  .controlplan-app-shell.sidebar-collapsed{
    grid-template-columns:var(--grc-sidebar-collapsed) minmax(0,1fr)!important;
  }
  .controlplan-app-shell>.sidebar{
    position:fixed!important;
    left:0!important;
    bottom:0!important;
    width:var(--grc-sidebar-width)!important;
    height:auto!important;
    transform:none!important;
  }
  .controlplan-app-shell.sidebar-collapsed>.sidebar{
    width:var(--grc-sidebar-collapsed)!important;
  }
  .controlplan-app-shell>.main-panel{
    grid-column:2;
  }
}

@media (max-width:900px){
  .controlplan-app-shell>.sidebar{
    position:fixed!important;
    height:100vh!important;
    height:100dvh!important;
    max-height:100vh!important;
    max-height:100dvh!important;
  }
}

/* Very short viewports keep shell chrome reachable without shrinking nav links. */
@media (max-height:700px) and (min-width:901px){
  .controlplan-app-shell>.sidebar{padding-top:10px;padding-bottom:10px}
  .controlplan-app-shell .brand{min-height:38px;padding-bottom:7px}
  .controlplan-app-shell .sidebar-toggle{min-height:36px}
  .controlplan-app-shell .nav-label{padding-top:11px}
  .controlplan-app-shell .sidebar-footer{padding-top:10px}
}

/* v3.24.5-beta.3 dashboard responsive overflow hotfix.
   Dashboard metric groups contain dense Bulma column rows whose intrinsic
   content width can exceed the available main-panel width on narrow desktop
   and tablet-landscape viewports. Allow those rows to wrap and their children
   to shrink without weakening the shell's horizontal-overflow release gate. */
@media (min-width:769px) and (max-width:1100px){
  .dashboard-content .level{
    flex-wrap:wrap;
    min-width:0;
  }
  .dashboard-content .level>.level-left,
  .dashboard-content .level>.level-right{
    min-width:0;
  }
  .dashboard-content .columns{
    flex-wrap:wrap;
    min-width:0;
  }
  .dashboard-content .columns>.column{
    min-width:0;
  }
  .dashboard-content .columns:not(.is-multiline)>.column{
    flex:1 1 33.3333%;
    width:auto;
  }
  .dashboard-content .columns.is-multiline>.column.is-6{
    flex:1 1 100%;
    width:100%;
  }
}

/* v3.24.5-beta.4 dashboard box-model overflow hotfix.
   The responsive gate proved the remaining overflow was not caused by the
   metric-column wrapping contract. dashboard-content declares width:100%
   while also carrying horizontal padding; under content-box sizing that
   makes the rendered content canvas wider than its main-panel allocation.
   Keep the canvas and its direct layout primitives inside the allocated width
   rather than hiding overflow. */
.controlplan-app-shell .dashboard-content{
  box-sizing:border-box;
  max-width:min(100%,var(--grc-content-max));
  min-width:0;
}
.controlplan-app-shell .dashboard-content>.box,
.controlplan-app-shell .dashboard-content>.level,
.controlplan-app-shell .dashboard-content>.columns,
.controlplan-app-shell .dashboard-content>.notification{
  box-sizing:border-box;
  min-width:0;
  max-width:100%;
}
.controlplan-app-shell .dashboard-content>.columns{
  margin-left:0;
  margin-right:0;
}
.controlplan-app-shell .dashboard-content .level-left,
.controlplan-app-shell .dashboard-content .level-right,
.controlplan-app-shell .dashboard-content .column{
  min-width:0;
}

/* Authenticated content parity.
   ControlPlan still renders several dashboard sections with Bulma's legacy
   .box/.title/.subtitle classes. Keep those classes inside the same visual
   contract used by the DataPlan and ControlOps application shells. */
.controlplan-app-shell .dashboard-content{
  color:var(--grc-ink);
  font-family:var(--grc-font);
}
.controlplan-app-shell .dashboard-content .box,
.controlplan-app-shell .dashboard-content .card,
.controlplan-app-shell .dashboard-content .grc-card{
  padding:16px;
  background:var(--grc-surface);
  border:1px solid var(--grc-line);
  border-radius:var(--grc-radius);
  box-shadow:var(--grc-shadow);
  color:var(--grc-ink);
  opacity:1;
}
.controlplan-app-shell .dashboard-content h1,
.controlplan-app-shell .dashboard-content h2,
.controlplan-app-shell .dashboard-content h3,
.controlplan-app-shell .dashboard-content h4,
.controlplan-app-shell .dashboard-content h5,
.controlplan-app-shell .dashboard-content h6,
.controlplan-app-shell .dashboard-content .title{
  color:var(--grc-ink)!important;
  opacity:1;
}
.controlplan-app-shell .dashboard-content .box>h2.title.is-5{
  margin:0 0 13px;
  font-size:16px!important;
  font-weight:700;
  line-height:1.25;
}
.controlplan-app-shell .dashboard-content .subtitle,
.controlplan-app-shell .dashboard-content .heading{
  color:var(--grc-muted)!important;
  opacity:1;
}