/* =========================================================
   CLIENT COMMAND CENTER
   PROJECT / SUB-WORKSPACE NAVIGATION
========================================================= */


/* =========================================================
   PROJECT BAR
========================================================= */

.project-tabs {
  display: flex;

  align-items: center;

  gap: 8px;

  padding:
    10px 28px;

  background:
    #f8fafc;

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

  overflow-x:
    auto;
}


/* =========================================================
   PROJECT TAB
========================================================= */

.project-tab {
  min-width:
    130px;

  padding:
    9px 15px;

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

  border-radius:
    999px;

  background:
    white;

  color:
    var(--muted);

  font-size:
    12px;

  font-weight:
    800;

  cursor:
    pointer;

  transition:
    background 0.15s ease,
    border-color 0.15s ease,
    color 0.15s ease,
    box-shadow 0.15s ease;
}


.project-tab:hover {
  background:
    var(--accent-soft);

  border-color:
    #b8c5ef;

  color:
    var(--accent);
}


.project-tab.active {
  background:
    var(--accent);

  border-color:
    var(--accent);

  color:
    white;

  box-shadow:
    0 4px 12px
    rgba(
      49,
      88,
      211,
      0.20
    );
}


/* =========================================================
   PROJECT WORKSPACE
========================================================= */

.project-workspace {
  width:
    100%;
}


/* =========================================================
   SUFYL SALES HEADER
========================================================= */

.sufyl-sales-record-header {
  background:
    linear-gradient(
      135deg,
      #f2f8ee,
      #fafdf8
    );
}


/* =========================================================
   SUFYL SALES TABLE
========================================================= */

#sufylSalesTableContainer {
  overflow:
    auto;

  margin:
    0 28px 28px;

  max-height:
    calc(
      100vh - 260px
    );

  background:
    white;

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

  border-radius:
    12px;

  box-shadow:
    var(--shadow);
}


/* =========================================================
   SUFYL SALES STATUS
========================================================= */

#sufylSalesRecordStatus {
  min-height:
    42px;

  padding:
    12px 28px;

  color:
    var(--muted);

  font-size:
    13px;

  font-weight:
    600;
}


/* =========================================================
   SUFYL SALES FIELD AREA
========================================================= */

#sufylSalesRecordFields {
  padding:
    0 28px 35px;
}


/* =========================================================
   RESPONSIVE
========================================================= */

@media
(max-width: 700px) {

  .project-tabs {
    padding:
      9px 15px;
  }


  .project-tab {
    min-width:
      120px;
  }


  #sufylSalesTableContainer {
    margin:
      0 15px 20px;
  }


  #sufylSalesRecordFields {
    padding:
      0 15px 25px;
  }

}