.plus-commission-page {
  width: min(100%, 1494px);
  margin: 0 auto;
  color: #172033;
}

.plus-commission-page .commission-date-card {
  display: grid;
  grid-template-columns: auto minmax(190px, 1fr) auto;
  align-items: center;
  gap: 14px;
  min-height: 68px;
  padding: 14px 18px;
  border: 1px solid #d6e4e9;
  border-radius: 14px;
  background: rgba(255, 255, 255, .96);
  box-shadow: 0 10px 26px rgba(19, 82, 103, .07);
}

.plus-commission-page .commission-date-card > strong {
  font-size: 14px;
  white-space: nowrap;
}

.plus-commission-page .commission-date-card > span {
  justify-self: start;
  min-width: 190px;
  padding: 10px 16px;
  border: 1px solid #b9dce5;
  border-radius: 999px;
  background: #effbfe;
  color: #07566b;
  font-weight: 700;
  text-align: center;
}

.plus-commission-page .commission-date-card > button:last-child {
  min-height: 42px;
  padding: 0 20px;
  border: 0;
  border-radius: 10px;
  background: #ff725d;
  color: #fff;
  font-weight: 800;
  box-shadow: 0 10px 22px rgba(255, 114, 93, .2);
  cursor: pointer;
}

.plus-commission-page .commission-filter-card {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-template-areas:
    "name barcode model stock"
    "category brand columns columns"
    "clear apply . .";
  gap: 10px;
  margin-top: 16px;
  padding: 16px;
  border: 1px solid #d7e7eb;
  border-radius: 14px;
  background: rgba(255, 255, 255, .96);
}

.plus-commission-page .commission-filter-card > input:nth-child(1) { grid-area: name; }
.plus-commission-page .commission-filter-card > input:nth-child(2) { grid-area: barcode; }
.plus-commission-page .commission-filter-card > input:nth-child(3) { grid-area: model; }
.plus-commission-page .commission-filter-card > .stock-range { grid-area: stock; }
.plus-commission-page .commission-filter-card > select:nth-child(5) { grid-area: category; }
.plus-commission-page .commission-filter-card > select:nth-child(6) { grid-area: brand; }
.plus-commission-page .commission-filter-card > select:nth-child(7) { grid-area: columns; }
.plus-commission-page .commission-filter-card > .clear { grid-area: clear; }
.plus-commission-page .commission-filter-card > .apply { grid-area: apply; }

.plus-commission-page .commission-filter-card :is(input, select, button) {
  min-width: 0;
  min-height: 43px;
  border-radius: 9px;
  font-size: 13px;
}

.plus-commission-page .commission-filter-card .stock-range {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.plus-commission-page .commission-filter-card .clear,
.plus-commission-page .commission-filter-card .apply {
  font-weight: 800;
}

.plus-commission-page .commission-filter-card .clear {
  border-color: #ff725d;
  background: #ff725d;
  color: #fff;
}

.plus-commission-page .commission-filter-card .apply {
  border-color: #401c14;
  background: #401c14;
  color: #fff;
}

.plus-commission-page .commission-filter-card button:disabled,
.plus-commission-page .commission-save button:disabled,
.plus-commission-page .plus-table-actions button:disabled {
  cursor: not-allowed;
  opacity: .48;
  filter: grayscale(.25);
}

.plus-commission-page .plus-table-card {
  margin-top: 16px;
  overflow: hidden;
  border: 1px solid #c8e2e8;
  border-radius: 14px;
  box-shadow: 0 14px 34px rgba(8, 70, 88, .09);
}

.plus-commission-page .plus-table-toolbar {
  min-height: 58px;
}

.plus-commission-page .plus-table-title {
  font-size: 15px;
  font-weight: 800;
}

.plus-commission-page .plus-table-scroll {
  max-height: 570px;
  overflow: auto;
}

.plus-commission-page .plus-table th {
  height: 52px;
  font-size: 12px;
}

.plus-commission-page .plus-table td {
  padding-top: 14px;
  padding-bottom: 14px;
  font-size: 12.5px;
  vertical-align: middle;
}

.plus-commission-page .plus-price-cell-content > strong {
  color: #075e75;
  font-size: 15px;
}

.plus-commission-page .plus-tariff-empty-state {
  display: none;
}

.plus-commission-page.is-plus-tariff-inactive .plus-table-scroll,
.plus-commission-page.is-plus-tariff-inactive .plus-table-footer {
  display: none;
}

.plus-commission-page.is-plus-tariff-inactive .plus-tariff-empty-state {
  display: flex;
  min-height: 260px;
  padding: 42px 20px;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 10px;
  background: linear-gradient(180deg, #fff 0%, #f7fbfc 100%);
  text-align: center;
}

.plus-commission-page .plus-tariff-empty-state strong {
  color: #251814;
  font-size: 21px;
}

.plus-commission-page .plus-tariff-empty-state span {
  max-width: 620px;
  color: #74808d;
  font-size: 13px;
  line-height: 1.6;
}

.plus-commission-page.is-plus-tariff-inactive .commission-save {
  padding-top: 0;
  background: #f7fbfc;
}

.plus-upload-backdrop {
  position: fixed !important;
  inset: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  margin: 0 !important;
  z-index: 10050 !important;
  display: grid !important;
  place-items: center !important;
  padding: 24px !important;
}

.plus-upload-modal {
  position: relative !important;
  inset: auto !important;
  width: min(790px, calc(100vw - 40px));
  max-width: 790px !important;
  max-height: calc(100vh - 40px);
  margin: 0 !important;
  overflow: auto;
  border-radius: 16px;
  box-shadow: 0 28px 80px rgba(13, 38, 49, .28);
}

.plus-upload-modal .plus-upload-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.plus-upload-date-range {
  position: relative;
  display: flex;
  width: min(520px, 100%);
  margin: 4px auto 2px;
  flex-direction: column;
  gap: 8px;
}

.plus-upload-date-range > span {
  color: #31525b;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.25;
  text-align: left;
}

.plus-date-range-trigger {
  display: flex;
  width: 100%;
  min-height: 52px;
  padding: 0 16px 0 18px;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  border: 1px solid #acd1da;
  border-radius: 12px;
  background: linear-gradient(180deg, #fff 0%, #f7fbfc 100%);
  color: #173640;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.25;
  text-align: left;
  box-shadow: 0 8px 22px rgba(10, 89, 106, .08);
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
  cursor: pointer;
}

.plus-date-range-trigger:hover {
  border-color: #16859a;
  box-shadow: 0 10px 26px rgba(10, 89, 106, .13);
  transform: translateY(-1px);
}

.plus-date-range-trigger.is-open {
  border-color: #0d758a;
  box-shadow: 0 0 0 3px rgba(13, 117, 138, .1), 0 10px 26px rgba(10, 89, 106, .12);
  transform: none;
}

.plus-date-range-trigger b {
  display: grid;
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  place-items: center;
  border-radius: 9px;
  background-color: #e4f4f7;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230b7185' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 3v3M17 3v3M4.5 9h15M6 5h12a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V7a2 2 0 0 1 2-2Z'/%3E%3C/svg%3E");
  background-position: center;
  background-repeat: no-repeat;
  background-size: 18px 18px;
  color: #0b7185;
  font-size: 0;
}

.plus-range-calendar {
  padding: 12px;
  border: 1px solid #d2e3e7;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 14px 34px rgba(11, 71, 87, .12);
}

.plus-calendar-toolbar {
  display: grid;
  grid-template-columns: 34px 1fr 34px;
  gap: 10px;
  align-items: center;
  margin-bottom: 10px;
}

.plus-calendar-toolbar > strong {
  color: #075b70;
  font-size: 13px;
  text-align: center;
}

.plus-calendar-toolbar > button,
.plus-calendar-today {
  min-height: 32px;
  border: 0;
  border-radius: 8px;
  background: #dff2f6;
  color: #075b70;
  font-weight: 900;
  cursor: pointer;
}

.plus-calendar-months {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px;
}

.plus-calendar-month > strong {
  display: block;
  margin-bottom: 8px;
  color: #153b46;
  font-size: 13px;
  text-align: center;
  text-transform: capitalize;
}

.plus-calendar-weekdays,
.plus-calendar-days {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 4px;
}

.plus-calendar-weekdays {
  margin-bottom: 4px;
}

.plus-calendar-weekdays span {
  color: #39707d;
  font-size: 10px;
  font-weight: 800;
  text-align: center;
}

.plus-calendar-days > :is(button, span) {
  min-width: 0;
  height: 30px;
}

.plus-calendar-days button {
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: #26373c;
  font-size: 11px;
  cursor: pointer;
}

.plus-calendar-days button:hover,
.plus-calendar-days button.is-today {
  background: #e0f2f6;
  color: #07677c;
}

.plus-calendar-days button.is-range {
  border-radius: 5px;
  background: #d6eef3;
  color: #075a6d;
}

.plus-calendar-days button:is(.is-start, .is-end) {
  background: #086d80;
  color: #fff;
  font-weight: 900;
}

.plus-calendar-today {
  display: block;
  min-width: 92px;
  margin: 10px auto 0;
}

@media (max-width: 1050px) {
  .plus-commission-page .commission-date-card {
    grid-template-columns: 1fr 1fr;
  }
  .plus-commission-page .commission-filter-card {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-areas:
      "name barcode"
      "model stock"
      "category brand"
      "columns columns"
      "clear apply";
  }
}

@media (max-width: 640px) {
  .plus-commission-page .commission-date-card,
  .plus-commission-page .commission-filter-card {
    grid-template-columns: 1fr;
  }
  .plus-commission-page .commission-filter-card {
    grid-template-areas: "name" "barcode" "model" "stock" "category" "brand" "columns" "clear" "apply";
  }
  .plus-commission-page .commission-date-card > span,
  .plus-commission-page .commission-date-card > button {
    width: 100%;
  }
  .plus-calendar-months {
    grid-template-columns: 1fr;
  }
  .plus-calendar-months .plus-calendar-month:last-child {
    display: none;
  }
}