/*
  =========================================================
  ACROV CONTROL

  FILE:
  dashboard/dashboard-host.css

  SYSTEM:
  SHARED DASHBOARD HOST

  PURPOSE:
  - Creates the shared ACROV dashboard workspace
  - Fills the Dashboard Region provided by Shell
  - Provides one controlled dashboard mount
  - Keeps dashboard scrolling inside the workspace
  - Prevents dashboard content from changing Shell geometry
  - Provides shared dashboard page primitives

  ARCHITECTURE:

  ACROV SHELL
       ↓
  DASHBOARD REGION
       ↓
  DASHBOARD HOST
       ↓
  DASHBOARD PAGE
       ↓
  ACTIVE DASHBOARD

  ACTIVE DASHBOARDS:

  MASTER
  BUSINESS
  COMMERCE
  CIP
  ORIGINALS
  MUSIC
  ECDYSIS
  SOFTWARE
  CORPORATE PARTNER

  DOES NOT CONTROL:
  - Header
  - Navigation
  - Routing
  - Authentication
  - Authority
  - Permissions
  - Dashboard-specific content
  =========================================================
*/


/* =========================================================
   DASHBOARD REGION
========================================================= */

.acrov-control-dashboard-region {

  width:
    100%;

  height:
    100%;

  min-width:
    0;

  min-height:
    0;

  position:
    relative;

  display:
    flex;

  flex-direction:
    column;

  overflow:
    hidden;

  background:
    var(--acrov-background);

}


/* =========================================================
   DASHBOARD HOST
========================================================= */

.acrov-control-dashboard-host {

  width:
    100%;

  height:
    100%;

  min-width:
    0;

  min-height:
    0;

  position:
    relative;

  display:
    flex;

  flex:
    1 1 auto;

  flex-direction:
    column;

  overflow:
    hidden;

  background:
    var(--acrov-background);

}


/* =========================================================
   DASHBOARD PAGE

   THIS IS THE ACTUAL MOUNT TARGET USED BY
   DASHBOARD-HOST.JS.

   DASHBOARD CONTROLLERS RENDER INSIDE HERE.
========================================================= */

.acrov-control-dashboard-page {

  width:
    100%;

  height:
    100%;

  min-width:
    0;

  min-height:
    0;

  position:
    relative;

  display:
    block;

  flex:
    1 1 auto;

  overflow-x:
    hidden;

  overflow-y:
    auto;

  padding:
    24px;

  background:
    var(--acrov-background);

  overscroll-behavior:
    contain;

  scrollbar-gutter:
    stable;

  -webkit-overflow-scrolling:
    touch;

}


/* =========================================================
   DASHBOARD PAGE CONTENT WIDTH

   DASHBOARDS CAN USE THIS WRAPPER WHEN THEY
   WANT A CONTROLLED ENTERPRISE PAGE WIDTH.
========================================================= */

.acrov-dashboard-container {

  width:
    100%;

  max-width:
    1600px;

  min-width:
    0;

  margin:
    0 auto;

}


/* =========================================================
   DASHBOARD STACK

   STANDARD VERTICAL PAGE LAYOUT.
========================================================= */

.acrov-dashboard-stack {

  width:
    100%;

  min-width:
    0;

  display:
    flex;

  flex-direction:
    column;

  gap:
    20px;

}


/* =========================================================
   DASHBOARD HEADER
========================================================= */

.acrov-dashboard-heading {

  width:
    100%;

  min-width:
    0;

  display:
    flex;

  align-items:
    flex-start;

  justify-content:
    space-between;

  gap:
    20px;

}


/* =========================================================
   DASHBOARD HEADING COPY
========================================================= */

.acrov-dashboard-heading-copy {

  min-width:
    0;

  display:
    flex;

  flex-direction:
    column;

  gap:
    5px;

}


/* =========================================================
   DASHBOARD TITLE
========================================================= */

.acrov-dashboard-title {

  margin:
    0;

  color:
    var(--acrov-text);

  font-size:
    28px;

  font-weight:
    750;

  line-height:
    1.15;

  letter-spacing:
    -0.7px;

}


/* =========================================================
   DASHBOARD DESCRIPTION
========================================================= */

.acrov-dashboard-description {

  max-width:
    780px;

  margin:
    0;

  color:
    var(--acrov-text-muted);

  font-size:
    13px;

  font-weight:
    400;

  line-height:
    1.55;

}


/* =========================================================
   DASHBOARD ACTIONS
========================================================= */

.acrov-dashboard-actions {

  flex:
    0 0 auto;

  display:
    flex;

  align-items:
    center;

  justify-content:
    flex-end;

  flex-wrap:
    wrap;

  gap:
    8px;

}


/* =========================================================
   DASHBOARD GRID
========================================================= */

.acrov-dashboard-grid {

  width:
    100%;

  min-width:
    0;

  display:
    grid;

  grid-template-columns:
    repeat(
      12,
      minmax(
        0,
        1fr
      )
    );

  gap:
    16px;

}


/* =========================================================
   STANDARD GRID WIDTHS
========================================================= */

.acrov-dashboard-span-12 {

  grid-column:
    span 12;

}


.acrov-dashboard-span-8 {

  grid-column:
    span 8;

}


.acrov-dashboard-span-6 {

  grid-column:
    span 6;

}


.acrov-dashboard-span-4 {

  grid-column:
    span 4;

}


.acrov-dashboard-span-3 {

  grid-column:
    span 3;

}


/* =========================================================
   DASHBOARD PANEL
========================================================= */

.acrov-dashboard-panel {

  min-width:
    0;

  padding:
    18px;

  border:
    1px solid
    var(--acrov-border);

  border-radius:
    var(--acrov-radius);

  background:
    var(--acrov-white);

  box-shadow:
    var(--acrov-shadow-small);

}


/* =========================================================
   PANEL HEADER
========================================================= */

.acrov-dashboard-panel-header {

  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    12px;

  margin-bottom:
    14px;

}


/* =========================================================
   PANEL TITLE
========================================================= */

.acrov-dashboard-panel-title {

  margin:
    0;

  color:
    var(--acrov-text);

  font-size:
    13px;

  font-weight:
    750;

  line-height:
    1.2;

}


/* =========================================================
   PANEL DESCRIPTION
========================================================= */

.acrov-dashboard-panel-description {

  margin:
    4px 0 0;

  color:
    var(--acrov-text-muted);

  font-size:
    11px;

  line-height:
    1.45;

}


/* =========================================================
   EMPTY STATE
========================================================= */

.acrov-dashboard-empty {

  width:
    100%;

  min-height:
    180px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  padding:
    24px;

  border:
    1px dashed
    var(--acrov-border-strong);

  border-radius:
    var(--acrov-radius);

  background:
    var(--acrov-surface-soft);

  color:
    var(--acrov-text-muted);

  text-align:
    center;

  font-size:
    12px;

}


/* =========================================================
   HOST READY
========================================================= */

.acrov-control-dashboard-host[
  data-acrov-dashboard-host-ready="true"
] {

  visibility:
    visible;

}


/* =========================================================
   ACTIVE DASHBOARD
========================================================= */

.acrov-control-dashboard-host[
  data-acrov-active-dashboard
] {

  isolation:
    isolate;

}


/* =========================================================
   DASHBOARD PAGE STATE
========================================================= */

.acrov-control-dashboard-page[
  data-acrov-dashboard-page
] {

  isolation:
    isolate;

}


/* =========================================================
   SCROLLBAR
========================================================= */

.acrov-control-dashboard-page {

  scrollbar-width:
    thin;

  scrollbar-color:
    var(--acrov-border-strong)
    transparent;

}


.acrov-control-dashboard-page::-webkit-scrollbar {

  width:
    8px;

}


.acrov-control-dashboard-page::-webkit-scrollbar-track {

  background:
    transparent;

}


.acrov-control-dashboard-page::-webkit-scrollbar-thumb {

  border-radius:
    var(--acrov-radius-pill);

  background:
    var(--acrov-border-strong);

}


.acrov-control-dashboard-page::-webkit-scrollbar-thumb:hover {

  background:
    var(--acrov-text-muted);

}


/* =========================================================
   TABLET
========================================================= */

@media (
  max-width: 900px
) {

  .acrov-control-dashboard-page {

    padding:
      20px;

  }


  .acrov-dashboard-grid {

    gap:
      14px;

  }


  .acrov-dashboard-span-8,
  .acrov-dashboard-span-6,
  .acrov-dashboard-span-4,
  .acrov-dashboard-span-3 {

    grid-column:
      span 12;

  }


  .acrov-dashboard-title {

    font-size:
      25px;

  }

}


/* =========================================================
   MOBILE
========================================================= */

@media (
  max-width: 600px
) {

  .acrov-control-dashboard-page {

    padding:
      14px;

    scrollbar-gutter:
      auto;

  }


  .acrov-dashboard-stack {

    gap:
      14px;

  }


  .acrov-dashboard-heading {

    flex-direction:
      column;

    gap:
      12px;

  }


  .acrov-dashboard-actions {

    width:
      100%;

    justify-content:
      flex-start;

  }


  .acrov-dashboard-title {

    font-size:
      22px;

  }


  .acrov-dashboard-description {

    font-size:
      12px;

  }


  .acrov-dashboard-grid {

    grid-template-columns:
      minmax(
        0,
        1fr
      );

    gap:
      12px;

  }


  .acrov-dashboard-span-12,
  .acrov-dashboard-span-8,
  .acrov-dashboard-span-6,
  .acrov-dashboard-span-4,
  .acrov-dashboard-span-3 {

    grid-column:
      1;

  }


  .acrov-dashboard-panel {

    padding:
      15px;

  }

}


/* =========================================================
   VERY SMALL PHONE
========================================================= */

@media (
  max-width: 380px
) {

  .acrov-control-dashboard-page {

    padding:
      10px;

  }


  .acrov-dashboard-panel {

    padding:
      13px;

  }

}


/* =========================================================
   REDUCED MOTION
========================================================= */

@media (
  prefers-reduced-motion: reduce
) {

  .acrov-control-dashboard-page {

    scroll-behavior:
      auto;

  }

}