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

  FILE:
  navigation/navigation.css

  SYSTEM:
  DIRECTOR NAVIGATION

  PURPOSE:
  - Styles permanent ACROV Director navigation
  - Provides access points to registered dashboards
  - Supports Master / Director / Delegate environments
  - Keeps navigation independent from dashboard content
  - Collapses cleanly for tablet and mobile

  DIRECTOR ENVIRONMENTS:

  MASTER
  BUSINESS
  COMMERCE
  CIP
  ORIGINALS
  MUSIC
  ECDYSIS
  SOFTWARE
  CORPORATE PARTNER

  IMPORTANT:
  - Navigation only provides controls
  - navigation.js handles routing
  - Authority determines accessible environments
  - Dashboard Host renders selected dashboards
  - Navigation never grants permission
  =========================================================
*/


/* =========================================================
   NAVIGATION
========================================================= */

.acrov-control-navigation {

  width:
    100%;

  height:
    100%;

  min-width:
    0;

  min-height:
    0;

  position:
    relative;

  display:
    flex;

  flex-direction:
    column;

  overflow:
    hidden;

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

  background:
    var(--acrov-white);

}


/* =========================================================
   NAVIGATION INNER
========================================================= */

.acrov-control-navigation-inner {

  width:
    100%;

  min-width:
    0;

  min-height:
    0;

  display:
    flex;

  flex:
    1 1 auto;

  flex-direction:
    column;

  overflow-x:
    hidden;

  overflow-y:
    auto;

  padding:
    14px 10px;

  overscroll-behavior:
    contain;

  scrollbar-width:
    thin;

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

}


/* =========================================================
   NAVIGATION HEADER
========================================================= */

.acrov-control-navigation-header {

  width:
    100%;

  min-width:
    0;

  padding:
    4px 8px 12px;

}


/* =========================================================
   NAVIGATION LABEL
========================================================= */

.acrov-control-navigation-label {

  margin:
    0;

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

  font-size:
    8px;

  font-weight:
    800;

  line-height:
    1;

  letter-spacing:
    1.15px;

  text-transform:
    uppercase;

}


/* =========================================================
   NAVIGATION LIST
========================================================= */

.acrov-control-navigation-list {

  width:
    100%;

  min-width:
    0;

  display:
    flex;

  flex-direction:
    column;

  gap:
    4px;

  margin:
    0;

  padding:
    0;

  list-style:
    none;

}


/* =========================================================
   NAVIGATION ITEM
========================================================= */

.acrov-control-navigation-item {

  width:
    100%;

  min-width:
    0;

  margin:
    0;

  padding:
    0;

}


/* =========================================================
   NAVIGATION BUTTON
========================================================= */

.acrov-control-navigation-button {

  width:
    100%;

  min-width:
    0;

  min-height:
    38px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    flex-start;

  gap:
    10px;

  margin:
    0;

  padding:
    7px 9px;

  border:
    1px solid
    transparent;

  border-radius:
    7px;

  background:
    transparent;

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

  font-family:
    inherit;

  font-size:
    11px;

  font-weight:
    650;

  line-height:
    1.15;

  text-align:
    left;

  cursor:
    pointer;

  appearance:
    none;

  -webkit-appearance:
    none;

  transition:
    background 120ms ease,
    border-color 120ms ease,
    color 120ms ease;

}


/* =========================================================
   BUTTON ICON
========================================================= */

.acrov-control-navigation-icon {

  width:
    24px;

  height:
    24px;

  flex:
    0 0 24px;

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  border-radius:
    6px;

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

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

  font-size:
    10px;

  font-weight:
    800;

  line-height:
    1;

}


/* =========================================================
   BUTTON COPY
========================================================= */

.acrov-control-navigation-copy {

  min-width:
    0;

  display:
    flex;

  flex:
    1 1 auto;

  flex-direction:
    column;

  justify-content:
    center;

  gap:
    2px;

}


/* =========================================================
   BUTTON TITLE
========================================================= */

.acrov-control-navigation-title {

  max-width:
    100%;

  overflow:
    hidden;

  color:
    inherit;

  font-size:
    10px;

  font-weight:
    750;

  line-height:
    1.1;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;

}


/* =========================================================
   BUTTON SIGNAL
========================================================= */

.acrov-control-navigation-signal {

  max-width:
    100%;

  overflow:
    hidden;

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

  font-size:
    7px;

  font-weight:
    600;

  line-height:
    1;

  letter-spacing:
    0.25px;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;

}


/* =========================================================
   HOVER
========================================================= */

.acrov-control-navigation-button:hover {

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

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

  color:
    var(--acrov-text);

}


.acrov-control-navigation-button:hover
.acrov-control-navigation-icon {

  color:
    var(--acrov-blue);

}


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

.acrov-control-navigation-button[
  data-acrov-active="true"
] {

  border-color:
    #bfdbfe;

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

  color:
    var(--acrov-blue-hover);

}


.acrov-control-navigation-button[
  data-acrov-active="true"
]
.acrov-control-navigation-icon {

  background:
    var(--acrov-white);

  color:
    var(--acrov-blue);

}


/* =========================================================
   MASTER NAVIGATION
========================================================= */

.acrov-control-navigation-button[
  data-acrov-dashboard="master"
] {

  margin-bottom:
    6px;

  border-color:
    #fde68a;

  background:
    #fffbeb;

  color:
    #92400e;

}


.acrov-control-navigation-button[
  data-acrov-dashboard="master"
]
.acrov-control-navigation-icon {

  background:
    #fef3c7;

  color:
    #92400e;

}


.acrov-control-navigation-button[
  data-acrov-dashboard="master"
][
  data-acrov-active="true"
] {

  border-color:
    #fcd34d;

  background:
    #fef3c7;

  color:
    #78350f;

}


/* =========================================================
   FOCUS
========================================================= */

.acrov-control-navigation-button:focus-visible {

  outline:
    2px solid
    var(--acrov-blue);

  outline-offset:
    2px;

}


/* =========================================================
   DISABLED / INACCESSIBLE
========================================================= */

.acrov-control-navigation-button:disabled,
.acrov-control-navigation-button[
  data-acrov-accessible="false"
] {

  opacity:
    0.42;

  cursor:
    not-allowed;

  pointer-events:
    none;

}


/* =========================================================
   HIDDEN AUTHORITY ITEM
========================================================= */

.acrov-control-navigation-item[
  hidden
] {

  display:
    none !important;

}


/* =========================================================
   NAVIGATION DIVIDER
========================================================= */

.acrov-control-navigation-divider {

  width:
    calc(
      100% - 16px
    );

  height:
    1px;

  flex:
    0 0 1px;

  margin:
    10px 8px;

  background:
    var(--acrov-border);

}


/* =========================================================
   NAVIGATION SECTION
========================================================= */

.acrov-control-navigation-section {

  width:
    100%;

  min-width:
    0;

  margin-top:
    10px;

}


/* =========================================================
   SECTION LABEL
========================================================= */

.acrov-control-navigation-section-label {

  margin:
    0;

  padding:
    0 8px 7px;

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

  font-size:
    7px;

  font-weight:
    800;

  line-height:
    1;

  letter-spacing:
    1px;

  text-transform:
    uppercase;

}


/* =========================================================
   FOOTER
========================================================= */

.acrov-control-navigation-footer {

  width:
    100%;

  min-width:
    0;

  flex:
    0 0 auto;

  padding:
    10px;

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

}


/* =========================================================
   SYSTEM SIGNAL
========================================================= */

.acrov-control-navigation-system {

  width:
    100%;

  min-width:
    0;

  display:
    flex;

  align-items:
    center;

  gap:
    7px;

  padding:
    6px 7px;

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

  font-size:
    7px;

  font-weight:
    700;

  line-height:
    1;

  letter-spacing:
    0.35px;

}


/* =========================================================
   SYSTEM DOT
========================================================= */

.acrov-control-navigation-system-dot {

  width:
    6px;

  height:
    6px;

  flex:
    0 0 6px;

  border-radius:
    50%;

  background:
    var(--acrov-success);

}


/* =========================================================
   READY STATE
========================================================= */

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

  visibility:
    visible;

}


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

.acrov-control-navigation-inner::-webkit-scrollbar {

  width:
    5px;

}


.acrov-control-navigation-inner::-webkit-scrollbar-track {

  background:
    transparent;

}


.acrov-control-navigation-inner::-webkit-scrollbar-thumb {

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

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

}


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

   SHELL REDUCES NAVIGATION TO 76PX.

   KEEP ICONS VISIBLE AND REMOVE COPY.
========================================================= */

@media (
  max-width: 900px
) {

  .acrov-control-navigation-inner {

    padding:
      12px 8px;

  }


  .acrov-control-navigation-header,
  .acrov-control-navigation-copy,
  .acrov-control-navigation-section-label {

    display:
      none;

  }


  .acrov-control-navigation-list {

    align-items:
      center;

  }


  .acrov-control-navigation-button {

    width:
      100%;

    min-height:
      42px;

    justify-content:
      center;

    padding:
      7px;

  }


  .acrov-control-navigation-icon {

    width:
      28px;

    height:
      28px;

    flex-basis:
      28px;

  }


  .acrov-control-navigation-divider {

    width:
      32px;

    margin:
      9px auto;

  }


  .acrov-control-navigation-footer {

    padding:
      8px;

  }


  .acrov-control-navigation-system {

    justify-content:
      center;

    padding:
      6px 0;

    font-size:
      0;

  }

}


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

   SHELL MOVES NAVIGATION TO BOTTOM.

   NAVIGATION BECOMES A HORIZONTAL DIRECTOR RAIL.
========================================================= */

@media (
  max-width: 600px
) {

  .acrov-control-navigation {

    border-right:
      0;

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

  }


  .acrov-control-navigation-inner {

    flex-direction:
      row;

    align-items:
      center;

    overflow-x:
      auto;

    overflow-y:
      hidden;

    padding:
      7px 8px;

    scrollbar-width:
      none;

  }


  .acrov-control-navigation-inner::-webkit-scrollbar {

    display:
      none;

  }


  .acrov-control-navigation-list {

    width:
      auto;

    flex:
      0 0 auto;

    flex-direction:
      row;

    align-items:
      center;

    gap:
      5px;

  }


  .acrov-control-navigation-item {

    width:
      auto;

    flex:
      0 0 auto;

  }


  .acrov-control-navigation-button {

    width:
      42px;

    min-width:
      42px;

    height:
      42px;

    min-height:
      42px;

    padding:
      6px;

    border-radius:
      8px;

  }


  .acrov-control-navigation-button[
    data-acrov-dashboard="master"
  ] {

    margin:
      0 4px 0 0;

  }


  .acrov-control-navigation-icon {

    width:
      28px;

    height:
      28px;

    flex:
      0 0 28px;

  }


  .acrov-control-navigation-divider,
  .acrov-control-navigation-header,
  .acrov-control-navigation-section-label,
  .acrov-control-navigation-footer {

    display:
      none;

  }


  .acrov-control-navigation-section {

    width:
      auto;

    flex:
      0 0 auto;

    margin:
      0;

  }

}


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

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

  .acrov-control-navigation-button {

    transition:
      none;

  }

}