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

  FILE:
  dashboards/master/master.css

  SYSTEM:
  MASTER DASHBOARD

  PURPOSE:
  - Styles the ACROV Master Dashboard
  - Provides portfolio-wide command visibility
  - Provides Director environment access
  - Provides ecosystem status surfaces
  - Provides Master-only control surfaces
  - Preserves shared Dashboard Host geometry

  ARCHITECTURE:

  DASHBOARD HOST
       ↓
  MASTER DASHBOARD
       ↓
  MASTER OVERVIEW
       ↓
  DIRECTOR ENVIRONMENTS
       ↓
  ECOSYSTEM / COMMERCE / CONTENT / SOFTWARE

  MASTER AUTHORITY:

  MASTER
       ↓
  BUSINESS DIRECTOR
  COMMERCE DIRECTOR
  CIP DIRECTOR
  ORIGINALS DIRECTOR
  MUSIC DIRECTOR
  ECDYSIS DIRECTOR
  SOFTWARE DIRECTOR
  CORPORATE PARTNER

  COMMERCE DISTRIBUTION:

  CENTRAL INVENTORY
       ↓
  PERXAR SHOP
  KENEIE
  NUSUON

  IMPORTANT:
  - This file controls Master Dashboard appearance only
  - Master logic remains inside master.js
  - Authority remains outside this file
  - Dashboard Host owns the rendering workspace
  =========================================================
*/


/* =========================================================
   MASTER DASHBOARD
========================================================= */

.acrov-master-dashboard {

  width:
    100%;

  min-width:
    0;

}


/* =========================================================
   MASTER HEADER
========================================================= */

.acrov-master-header {

  width:
    100%;

  min-width:
    0;

  display:
    flex;

  align-items:
    flex-start;

  justify-content:
    space-between;

  gap:
    24px;

}


/* =========================================================
   MASTER HEADER COPY
========================================================= */

.acrov-master-header-copy {

  min-width:
    0;

  display:
    flex;

  flex-direction:
    column;

  gap:
    5px;

}


/* =========================================================
   MASTER EYEBROW
========================================================= */

.acrov-master-eyebrow {

  margin:
    0;

  color:
    var(--acrov-blue);

  font-size:
    8px;

  font-weight:
    850;

  line-height:
    1;

  letter-spacing:
    1.4px;

  text-transform:
    uppercase;

}


/* =========================================================
   MASTER TITLE
========================================================= */

.acrov-master-title {

  margin:
    0;

  color:
    var(--acrov-text);

  font-size:
    30px;

  font-weight:
    800;

  line-height:
    1.1;

  letter-spacing:
    -0.8px;

}


/* =========================================================
   MASTER DESCRIPTION
========================================================= */

.acrov-master-description {

  max-width:
    760px;

  margin:
    0;

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

  font-size:
    12px;

  font-weight:
    400;

  line-height:
    1.55;

}


/* =========================================================
   MASTER BADGE
========================================================= */

.acrov-master-badge {

  height:
    30px;

  flex:
    0 0 auto;

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  padding:
    0 11px;

  border:
    1px solid
    #fde68a;

  border-radius:
    6px;

  background:
    #fffbeb;

  color:
    #92400e;

  font-size:
    8px;

  font-weight:
    850;

  line-height:
    1;

  letter-spacing:
    0.6px;

  white-space:
    nowrap;

  text-transform:
    uppercase;

}


/* =========================================================
   MASTER SUMMARY GRID
========================================================= */

.acrov-master-summary-grid {

  width:
    100%;

  min-width:
    0;

  display:
    grid;

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

  gap:
    14px;

}


/* =========================================================
   SUMMARY CARD
========================================================= */

.acrov-master-summary-card {

  min-width:
    0;

  padding:
    16px;

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

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

  background:
    var(--acrov-white);

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

}


/* =========================================================
   SUMMARY LABEL
========================================================= */

.acrov-master-summary-label {

  margin:
    0;

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

  font-size:
    8px;

  font-weight:
    800;

  line-height:
    1;

  letter-spacing:
    0.8px;

  text-transform:
    uppercase;

}


/* =========================================================
   SUMMARY VALUE
========================================================= */

.acrov-master-summary-value {

  margin:
    8px 0 0;

  color:
    var(--acrov-text);

  font-size:
    24px;

  font-weight:
    800;

  line-height:
    1;

  letter-spacing:
    -0.6px;

}


/* =========================================================
   SUMMARY SIGNAL
========================================================= */

.acrov-master-summary-signal {

  margin:
    7px 0 0;

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

  font-size:
    9px;

  font-weight:
    500;

  line-height:
    1.35;

}


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

.acrov-master-section {

  width:
    100%;

  min-width:
    0;

}


/* =========================================================
   SECTION HEADER
========================================================= */

.acrov-master-section-header {

  width:
    100%;

  min-width:
    0;

  display:
    flex;

  align-items:
    flex-end;

  justify-content:
    space-between;

  gap:
    16px;

  margin-bottom:
    11px;

}


/* =========================================================
   SECTION COPY
========================================================= */

.acrov-master-section-copy {

  min-width:
    0;

}


/* =========================================================
   SECTION TITLE
========================================================= */

.acrov-master-section-title {

  margin:
    0;

  color:
    var(--acrov-text);

  font-size:
    14px;

  font-weight:
    800;

  line-height:
    1.2;

}


/* =========================================================
   SECTION DESCRIPTION
========================================================= */

.acrov-master-section-description {

  margin:
    4px 0 0;

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

  font-size:
    10px;

  line-height:
    1.4;

}


/* =========================================================
   DIRECTOR GRID
========================================================= */

.acrov-master-director-grid {

  width:
    100%;

  min-width:
    0;

  display:
    grid;

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

  gap:
    12px;

}


/* =========================================================
   DIRECTOR CARD
========================================================= */

.acrov-master-director-card {

  width:
    100%;

  min-width:
    0;

  min-height:
    132px;

  position:
    relative;

  display:
    flex;

  flex-direction:
    column;

  align-items:
    flex-start;

  justify-content:
    space-between;

  gap:
    14px;

  margin:
    0;

  padding:
    15px;

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

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

  background:
    var(--acrov-white);

  color:
    var(--acrov-text);

  font-family:
    inherit;

  text-align:
    left;

  cursor:
    pointer;

  appearance:
    none;

  -webkit-appearance:
    none;

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

  transition:
    border-color 120ms ease,
    box-shadow 120ms ease,
    transform 120ms ease;

}


/* =========================================================
   DIRECTOR CARD HOVER
========================================================= */

.acrov-master-director-card:hover {

  border-color:
    #bfdbfe;

  box-shadow:
    0 5px 16px
    rgba(
      15,
      23,
      42,
      0.07
    );

  transform:
    translateY(
      -1px
    );

}


/* =========================================================
   DIRECTOR CARD FOCUS
========================================================= */

.acrov-master-director-card:focus-visible {

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

  outline-offset:
    2px;

}


/* =========================================================
   DIRECTOR TOP
========================================================= */

.acrov-master-director-top {

  width:
    100%;

  min-width:
    0;

  display:
    flex;

  align-items:
    flex-start;

  justify-content:
    space-between;

  gap:
    10px;

}


/* =========================================================
   DIRECTOR ICON
========================================================= */

.acrov-master-director-icon {

  width:
    30px;

  height:
    30px;

  flex:
    0 0 30px;

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  border-radius:
    7px;

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

  color:
    var(--acrov-blue);

  font-size:
    10px;

  font-weight:
    850;

  line-height:
    1;

}


/* =========================================================
   DIRECTOR STATUS
========================================================= */

.acrov-master-director-status {

  display:
    inline-flex;

  align-items:
    center;

  gap:
    5px;

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

  font-size:
    7px;

  font-weight:
    750;

  line-height:
    1;

  letter-spacing:
    0.35px;

  text-transform:
    uppercase;

}


/* =========================================================
   STATUS DOT
========================================================= */

.acrov-master-director-status::before {

  content:
    "";

  width:
    6px;

  height:
    6px;

  flex:
    0 0 6px;

  border-radius:
    50%;

  background:
    var(--acrov-success);

}


/* =========================================================
   DIRECTOR COPY
========================================================= */

.acrov-master-director-copy {

  width:
    100%;

  min-width:
    0;

}


/* =========================================================
   DIRECTOR NAME
========================================================= */

.acrov-master-director-name {

  margin:
    0;

  color:
    var(--acrov-text);

  font-size:
    12px;

  font-weight:
    800;

  line-height:
    1.2;

}


/* =========================================================
   DIRECTOR DESCRIPTION
========================================================= */

.acrov-master-director-description {

  margin:
    5px 0 0;

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

  font-size:
    9px;

  font-weight:
    400;

  line-height:
    1.4;

}


/* =========================================================
   DIRECTOR ENTER
========================================================= */

.acrov-master-director-enter {

  color:
    var(--acrov-blue);

  font-size:
    8px;

  font-weight:
    800;

  line-height:
    1;

  letter-spacing:
    0.3px;

  text-transform:
    uppercase;

}


/* =========================================================
   ECOSYSTEM GRID
========================================================= */

.acrov-master-ecosystem-grid {

  width:
    100%;

  min-width:
    0;

  display:
    grid;

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

  gap:
    12px;

}


/* =========================================================
   ECOSYSTEM CARD
========================================================= */

.acrov-master-ecosystem-card {

  min-width:
    0;

  padding:
    16px;

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

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

  background:
    var(--acrov-white);

}


/* =========================================================
   ECOSYSTEM NAME
========================================================= */

.acrov-master-ecosystem-name {

  margin:
    0;

  color:
    var(--acrov-text);

  font-size:
    12px;

  font-weight:
    800;

  line-height:
    1.2;

}


/* =========================================================
   ECOSYSTEM TYPE
========================================================= */

.acrov-master-ecosystem-type {

  margin:
    4px 0 0;

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

  font-size:
    8px;

  font-weight:
    700;

  line-height:
    1;

  letter-spacing:
    0.4px;

  text-transform:
    uppercase;

}


/* =========================================================
   ECOSYSTEM STATUS
========================================================= */

.acrov-master-ecosystem-status {

  margin-top:
    13px;

  padding-top:
    11px;

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

  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    10px;

}


/* =========================================================
   ECOSYSTEM STATUS LABEL
========================================================= */

.acrov-master-ecosystem-status-label {

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

  font-size:
    8px;

  font-weight:
    650;

}


/* =========================================================
   ECOSYSTEM STATUS VALUE
========================================================= */

.acrov-master-ecosystem-status-value {

  color:
    var(--acrov-success);

  font-size:
    8px;

  font-weight:
    800;

  text-transform:
    uppercase;

}


/* =========================================================
   COMMAND GRID
========================================================= */

.acrov-master-command-grid {

  width:
    100%;

  min-width:
    0;

  display:
    grid;

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

  gap:
    12px;

}


/* =========================================================
   COMMAND PANEL
========================================================= */

.acrov-master-command-panel {

  min-width:
    0;

  padding:
    17px;

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

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

  background:
    var(--acrov-white);

}


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

.acrov-master-command-title {

  margin:
    0;

  color:
    var(--acrov-text);

  font-size:
    12px;

  font-weight:
    800;

}


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

.acrov-master-command-description {

  margin:
    5px 0 0;

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

  font-size:
    9px;

  line-height:
    1.45;

}


/* =========================================================
   COMMAND ACTION
========================================================= */

.acrov-master-command-action {

  min-height:
    30px;

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  margin-top:
    13px;

  padding:
    0 10px;

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

  border-radius:
    5px;

  background:
    var(--acrov-white);

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

  font-family:
    inherit;

  font-size:
    8px;

  font-weight:
    750;

  cursor:
    pointer;

}


/* =========================================================
   COMMAND ACTION HOVER
========================================================= */

.acrov-master-command-action:hover {

  border-color:
    #bfdbfe;

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

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

}


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

@media (
  max-width: 1100px
) {

  .acrov-master-summary-grid {

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

  }


  .acrov-master-director-grid {

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

  }

}


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

@media (
  max-width: 600px
) {

  .acrov-master-header {

    flex-direction:
      column;

    gap:
      12px;

  }


  .acrov-master-title {

    font-size:
      24px;

  }


  .acrov-master-summary-grid,
  .acrov-master-director-grid,
  .acrov-master-ecosystem-grid,
  .acrov-master-command-grid {

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

  }


  .acrov-master-director-card {

    min-height:
      120px;

  }

}


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

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

  .acrov-master-director-card {

    transition:
      none;

  }

}