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

  FILE:
  dashboards/commerce/commerce.css

  SYSTEM:
  COMMERCE DIRECTOR DASHBOARD

  PURPOSE:
  - Styles the Commerce Director Dashboard
  - Provides centralized inventory surfaces
  - Provides product administration surfaces
  - Provides storefront distribution visibility
  - Provides order and commerce status surfaces
  - Supports PERXAR SHOP / KENEIE / NUSUON
  - Preserves shared Dashboard Host geometry

  ARCHITECTURE:

  ACROV MASTER
       ↓
  COMMERCE DIRECTOR
       ↓
  CENTRAL COMMERCE
       ↓
  PRODUCTS
  INVENTORY
  ORDERS
  DISTRIBUTION
       ↓
  PERXAR SHOP
  KENEIE
  NUSUON

  IMPORTANT:
  - Inventory exists once
  - Storefronts are distribution destinations
  - KENEIE does not maintain duplicate inventory
  - NUSUON does not maintain duplicate inventory
  - PERXAR SHOP does not maintain duplicate inventory
  - Authority and permissions remain outside this file
  =========================================================
*/


/* =========================================================
   COMMERCE DASHBOARD
========================================================= */

.acrov-commerce-dashboard {

  width:
    100%;

  min-width:
    0;

}


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

.acrov-commerce-header {

  width:
    100%;

  min-width:
    0;

  display:
    flex;

  align-items:
    flex-start;

  justify-content:
    space-between;

  gap:
    24px;

}


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

.acrov-commerce-header-copy {

  min-width:
    0;

  display:
    flex;

  flex-direction:
    column;

  gap:
    5px;

}


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

.acrov-commerce-eyebrow {

  margin:
    0;

  color:
    var(--acrov-blue);

  font-size:
    8px;

  font-weight:
    850;

  line-height:
    1;

  letter-spacing:
    1.35px;

  text-transform:
    uppercase;

}


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

.acrov-commerce-title {

  margin:
    0;

  color:
    var(--acrov-text);

  font-size:
    30px;

  font-weight:
    800;

  line-height:
    1.1;

  letter-spacing:
    -0.8px;

}


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

.acrov-commerce-description {

  max-width:
    760px;

  margin:
    0;

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

  font-size:
    12px;

  font-weight:
    400;

  line-height:
    1.55;

}


/* =========================================================
   AUTHORITY BADGE
========================================================= */

.acrov-commerce-authority {

  height:
    30px;

  flex:
    0 0 auto;

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  padding:
    0 11px;

  border:
    1px solid
    #bfdbfe;

  border-radius:
    6px;

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

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

  font-size:
    8px;

  font-weight:
    850;

  line-height:
    1;

  letter-spacing:
    0.55px;

  white-space:
    nowrap;

  text-transform:
    uppercase;

}


/* =========================================================
   MASTER OVERRIDE
========================================================= */

.acrov-commerce-master-override {

  min-height:
    30px;

  flex:
    0 0 auto;

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  gap:
    6px;

  padding:
    0 10px;

  border:
    1px solid
    #fde68a;

  border-radius:
    6px;

  background:
    #fffbeb;

  color:
    #92400e;

  font-size:
    7px;

  font-weight:
    850;

  line-height:
    1;

  letter-spacing:
    0.45px;

  text-transform:
    uppercase;

}


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

.acrov-commerce-summary-grid {

  width:
    100%;

  min-width:
    0;

  display:
    grid;

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

  gap:
    14px;

}


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

.acrov-commerce-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-commerce-summary-label {

  margin:
    0;

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

  font-size:
    8px;

  font-weight:
    800;

  line-height:
    1;

  letter-spacing:
    0.75px;

  text-transform:
    uppercase;

}


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

.acrov-commerce-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-commerce-summary-signal {

  margin:
    7px 0 0;

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

  font-size:
    9px;

  line-height:
    1.35;

}


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

.acrov-commerce-section {

  width:
    100%;

  min-width:
    0;

}


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

.acrov-commerce-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-commerce-section-copy {

  min-width:
    0;

}


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

.acrov-commerce-section-title {

  margin:
    0;

  color:
    var(--acrov-text);

  font-size:
    14px;

  font-weight:
    800;

  line-height:
    1.2;

}


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

.acrov-commerce-section-description {

  margin:
    4px 0 0;

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

  font-size:
    10px;

  line-height:
    1.4;

}


/* =========================================================
   ACTION GRID
========================================================= */

.acrov-commerce-action-grid {

  width:
    100%;

  min-width:
    0;

  display:
    grid;

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

  gap:
    12px;

}


/* =========================================================
   ACTION CARD
========================================================= */

.acrov-commerce-action-card {

  min-width:
    0;

  min-height:
    150px;

  display:
    flex;

  flex-direction:
    column;

  align-items:
    flex-start;

  justify-content:
    space-between;

  gap:
    14px;

  padding:
    16px;

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

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

  background:
    var(--acrov-white);

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

}


/* =========================================================
   ACTION ICON
========================================================= */

.acrov-commerce-action-icon {

  width:
    31px;

  height:
    31px;

  flex:
    0 0 31px;

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  border-radius:
    7px;

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

  color:
    var(--acrov-blue);

  font-size:
    9px;

  font-weight:
    850;

}


/* =========================================================
   ACTION COPY
========================================================= */

.acrov-commerce-action-copy {

  width:
    100%;

  min-width:
    0;

}


/* =========================================================
   ACTION TITLE
========================================================= */

.acrov-commerce-action-title {

  margin:
    0;

  color:
    var(--acrov-text);

  font-size:
    12px;

  font-weight:
    800;

  line-height:
    1.2;

}


/* =========================================================
   ACTION DESCRIPTION
========================================================= */

.acrov-commerce-action-description {

  margin:
    5px 0 0;

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

  font-size:
    9px;

  line-height:
    1.45;

}


/* =========================================================
   ACTION BUTTON
========================================================= */

.acrov-commerce-action-button {

  min-height:
    29px;

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  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;

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

}


/* =========================================================
   ACTION BUTTON HOVER
========================================================= */

.acrov-commerce-action-button:hover {

  border-color:
    #bfdbfe;

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

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

}


/* =========================================================
   ACTION BUTTON FOCUS
========================================================= */

.acrov-commerce-action-button:focus-visible {

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

  outline-offset:
    2px;

}


/* =========================================================
   ACTION BUTTON DISABLED
========================================================= */

.acrov-commerce-action-button:disabled {

  opacity:
    0.45;

  cursor:
    not-allowed;

}


/* =========================================================
   STOREFRONT GRID
========================================================= */

.acrov-commerce-storefront-grid {

  width:
    100%;

  min-width:
    0;

  display:
    grid;

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

  gap:
    12px;

}


/* =========================================================
   STOREFRONT CARD
========================================================= */

.acrov-commerce-storefront-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);

}


/* =========================================================
   STOREFRONT TOP
========================================================= */

.acrov-commerce-storefront-top {

  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    12px;

}


/* =========================================================
   STOREFRONT IDENTITY
========================================================= */

.acrov-commerce-storefront-identity {

  min-width:
    0;

}


/* =========================================================
   STOREFRONT NAME
========================================================= */

.acrov-commerce-storefront-name {

  margin:
    0;

  color:
    var(--acrov-text);

  font-size:
    13px;

  font-weight:
    800;

  line-height:
    1.2;

}


/* =========================================================
   STOREFRONT TYPE
========================================================= */

.acrov-commerce-storefront-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;

}


/* =========================================================
   CONNECTION SIGNAL
========================================================= */

.acrov-commerce-storefront-signal {

  min-height:
    23px;

  display:
    inline-flex;

  align-items:
    center;

  gap:
    5px;

  padding:
    0 8px;

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

  background:
    #f0fdf4;

  color:
    #15803d;

  font-size:
    7px;

  font-weight:
    800;

  line-height:
    1;

  text-transform:
    uppercase;

}


/* =========================================================
   CONNECTION DOT
========================================================= */

.acrov-commerce-storefront-signal::before {

  content:
    "";

  width:
    6px;

  height:
    6px;

  flex:
    0 0 6px;

  border-radius:
    50%;

  background:
    var(--acrov-success);

}


/* =========================================================
   STOREFRONT METRICS
========================================================= */

.acrov-commerce-storefront-metrics {

  width:
    100%;

  display:
    grid;

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

  gap:
    8px;

  margin-top:
    14px;

  padding-top:
    13px;

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

}


/* =========================================================
   STOREFRONT METRIC
========================================================= */

.acrov-commerce-storefront-metric {

  min-width:
    0;

}


/* =========================================================
   METRIC LABEL
========================================================= */

.acrov-commerce-storefront-metric-label {

  display:
    block;

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

  font-size:
    7px;

  font-weight:
    700;

  line-height:
    1;

  text-transform:
    uppercase;

}


/* =========================================================
   METRIC VALUE
========================================================= */

.acrov-commerce-storefront-metric-value {

  display:
    block;

  margin-top:
    5px;

  color:
    var(--acrov-text);

  font-size:
    14px;

  font-weight:
    800;

  line-height:
    1;

}


/* =========================================================
   OPERATIONS GRID
========================================================= */

.acrov-commerce-operations-grid {

  width:
    100%;

  min-width:
    0;

  display:
    grid;

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

  gap:
    12px;

}


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

.acrov-commerce-panel {

  min-width:
    0;

  padding:
    17px;

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

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

  background:
    var(--acrov-white);

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

}


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

.acrov-commerce-panel-header {

  width:
    100%;

  min-width:
    0;

  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    12px;

  margin-bottom:
    13px;

}


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

.acrov-commerce-panel-title {

  margin:
    0;

  color:
    var(--acrov-text);

  font-size:
    12px;

  font-weight:
    800;

  line-height:
    1.2;

}


/* =========================================================
   PANEL COUNT
========================================================= */

.acrov-commerce-panel-count {

  min-width:
    24px;

  height:
    22px;

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  padding:
    0 7px;

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

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

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

  font-size:
    8px;

  font-weight:
    800;

}


/* =========================================================
   TABLE WRAPPER
========================================================= */

.acrov-commerce-table-wrap {

  width:
    100%;

  min-width:
    0;

  overflow-x:
    auto;

}


/* =========================================================
   TABLE
========================================================= */

.acrov-commerce-table {

  width:
    100%;

  min-width:
    700px;

  border-collapse:
    collapse;

}


/* =========================================================
   TABLE HEADER
========================================================= */

.acrov-commerce-table th {

  padding:
    9px 8px;

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

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

  font-size:
    7px;

  font-weight:
    800;

  line-height:
    1;

  letter-spacing:
    0.6px;

  text-align:
    left;

  text-transform:
    uppercase;

}


/* =========================================================
   TABLE CELL
========================================================= */

.acrov-commerce-table td {

  padding:
    11px 8px;

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

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

  font-size:
    9px;

  line-height:
    1.35;

  vertical-align:
    middle;

}


/* =========================================================
   LAST TABLE ROW
========================================================= */

.acrov-commerce-table tbody
tr:last-child td {

  border-bottom:
    0;

}


/* =========================================================
   PRODUCT NAME
========================================================= */

.acrov-commerce-product-name {

  color:
    var(--acrov-text);

  font-weight:
    750;

}


/* =========================================================
   PRODUCT SKU
========================================================= */

.acrov-commerce-product-sku {

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

  font-size:
    8px;

  font-weight:
    650;

}


/* =========================================================
   STATUS BADGE
========================================================= */

.acrov-commerce-status {

  min-height:
    22px;

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  padding:
    0 8px;

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

  font-size:
    7px;

  font-weight:
    800;

  line-height:
    1;

  text-transform:
    uppercase;

}


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

.acrov-commerce-status[
  data-status="active"
] {

  background:
    #f0fdf4;

  color:
    #15803d;

}


/* =========================================================
   DRAFT
========================================================= */

.acrov-commerce-status[
  data-status="draft"
] {

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

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

}


/* =========================================================
   REVIEW
========================================================= */

.acrov-commerce-status[
  data-status="review"
] {

  background:
    #eff6ff;

  color:
    #1d4ed8;

}


/* =========================================================
   LOW STOCK
========================================================= */

.acrov-commerce-status[
  data-status="low-stock"
] {

  background:
    #fffbeb;

  color:
    #a16207;

}


/* =========================================================
   OUT OF STOCK
========================================================= */

.acrov-commerce-status[
  data-status="out-of-stock"
] {

  background:
    #fef2f2;

  color:
    #b91c1c;

}


/* =========================================================
   DISTRIBUTION TAGS
========================================================= */

.acrov-commerce-distribution {

  display:
    flex;

  flex-wrap:
    wrap;

  gap:
    4px;

}


/* =========================================================
   DISTRIBUTION TAG
========================================================= */

.acrov-commerce-distribution-tag {

  min-height:
    20px;

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  padding:
    0 6px;

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

  border-radius:
    4px;

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

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

  font-size:
    6px;

  font-weight:
    800;

  line-height:
    1;

  letter-spacing:
    0.2px;

  text-transform:
    uppercase;

}


/* =========================================================
   ACTIVITY LIST
========================================================= */

.acrov-commerce-activity-list {

  width:
    100%;

  min-width:
    0;

  display:
    flex;

  flex-direction:
    column;

  margin:
    0;

  padding:
    0;

  list-style:
    none;

}


/* =========================================================
   ACTIVITY ITEM
========================================================= */

.acrov-commerce-activity-item {

  display:
    flex;

  align-items:
    flex-start;

  gap:
    9px;

  padding:
    10px 0;

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

}


/* =========================================================
   LAST ACTIVITY ITEM
========================================================= */

.acrov-commerce-activity-item:last-child {

  border-bottom:
    0;

}


/* =========================================================
   ACTIVITY DOT
========================================================= */

.acrov-commerce-activity-dot {

  width:
    7px;

  height:
    7px;

  flex:
    0 0 7px;

  margin-top:
    3px;

  border-radius:
    50%;

  background:
    var(--acrov-blue);

}


/* =========================================================
   ACTIVITY COPY
========================================================= */

.acrov-commerce-activity-copy {

  min-width:
    0;

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

  font-size:
    9px;

  line-height:
    1.4;

}


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

.acrov-commerce-empty {

  min-height:
    130px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  padding:
    20px;

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

  border-radius:
    7px;

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

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

  font-size:
    9px;

  line-height:
    1.45;

  text-align:
    center;

}


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

@media (
  max-width: 1100px
) {

  .acrov-commerce-summary-grid {

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

  }


  .acrov-commerce-action-grid {

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

  }


  .acrov-commerce-operations-grid {

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

  }

}


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

@media (
  max-width: 800px
) {

  .acrov-commerce-storefront-grid {

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

  }

}


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

@media (
  max-width: 600px
) {

  .acrov-commerce-header {

    flex-direction:
      column;

    gap:
      12px;

  }


  .acrov-commerce-title {

    font-size:
      24px;

  }


  .acrov-commerce-summary-grid,
  .acrov-commerce-action-grid {

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

  }


  .acrov-commerce-action-card {

    min-height:
      130px;

  }


  .acrov-commerce-panel {

    padding:
      14px;

  }

}


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

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

  .acrov-commerce-action-button {

    transition:
      none;

  }

}