.sales-tabbar[hidden] { display: none; }

.sales-tabs-ready {
  display: block;
  --sales-tab-navy: #12334a;
  --sales-tab-teal: #0f819b;
  --sales-tab-line: #dce8ec;
}

.sales-tabbar {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 16px;
  padding: 6px;
  background: #eaf2f5;
  border: 1px solid #dbe8ed;
  border-radius: 18px;
}

.sales-tab[hidden] { display: none; }
.sales-tab {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-width: 0;
  min-height: 62px;
  padding: 10px 14px;
  border: 1px solid transparent;
  border-radius: 13px;
  background: transparent;
  color: #48687a;
  cursor: pointer;
  font: inherit;
  font-size: 15px;
  font-weight: 750;
  transition: background 150ms ease, color 150ms ease, box-shadow 150ms ease;
}
.sales-tab:hover { background: #f8fcfd; color: var(--sales-tab-navy); }
.sales-tab[aria-selected="true"] {
  background: #fff;
  border-color: #cfe0e6;
  color: var(--sales-tab-navy);
  box-shadow: 0 4px 13px rgb(16 43 60 / 9%);
}
.sales-tab:focus-visible { outline: 2px solid var(--sales-tab-teal); outline-offset: -3px; }
.sales-tab-icon {
  display: grid;
  place-items: center;
  flex: 0 0 34px;
  height: 34px;
  border-radius: 9px;
  color: #55778a;
  background: #dce9ee;
}
.sales-tab-icon svg { width: 20px; height: 20px; fill: currentColor; }
.sales-tab[aria-selected="true"] .sales-tab-icon { color: #fff; background: var(--sales-tab-teal); }
.sales-tab-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sales-tab-count {
  flex: 0 0 auto;
  padding: 4px 9px;
  color: #1b677c;
  background: #dff2f5;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
}
.sales-tab-count:empty { display: none; }

.sales-tabs-ready .sales-workspace-panel {
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
.sales-tabs-ready .sales-workspace-panel[hidden] { display: none; }
.sales-tabs-ready .sales-workspace-summary { display: none; }
.sales-tabs-ready .sales-workspace-content {
  border: 1px solid var(--sales-tab-line);
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 12px 34px rgb(16 43 60 / 5%);
}
.sales-tabs-ready .sales-workspace-content.sales-inbox { border: 1px solid var(--sales-tab-line); border-radius: 18px; }
.sales-tabs-ready .sales-workspace-content #sales-request-form { background: transparent; }
.sales-tabs-ready .sales-workspace-toolbar {
  padding-bottom: 16px;
  border-bottom: 1px solid #e8eff2;
}
.sales-tab-list { margin-top: 20px; padding: 18px; border-top: 1px solid #e8eff2; }
.sales-tab-list-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.sales-tab-list-head h3 { margin: 0; color: var(--sales-tab-navy); font-size: 17px; }
.sales-tab-list-head p { margin: 0; color: #698293; font-size: 13px; }
.sales-tabs-ready #sales-queue-inbox { margin-top: 0; border: 1px solid var(--sales-tab-line); }
.sales-tab-list .sales-request-list { display: grid; gap: 10px; }
.sales-tab-list.is-case-open .sales-tab-list-head, .sales-tab-list.is-case-open .sales-request-list { display: none; }

.sales-year-toolbar { display: flex; align-items: center; justify-content: flex-end; gap: 8px; margin: 0 2px 8px; color: #607c8a; font-size: 12px; font-weight: 700; }
.sales-year-toolbar select { width: auto; min-height: 34px; padding: 5px 10px; border: 1px solid #cadde5; border-radius: 8px; background: #fff; color: #194359; font: inherit; cursor: pointer; }
.sales-year-toolbar select:focus-visible { outline: 2px solid #0f819b; outline-offset: 2px; }

.sales-list-sort { margin-inline-start: auto; color: #607c8a; font-size: 12px; font-weight: 600; white-space: nowrap; }
.sales-list-sort label { display: inline-flex; align-items: center; gap: 7px; }
.sales-list-sort select { width: auto; min-width: 112px; min-height: 34px; padding: 5px 8px; border: 1px solid #cadde5; border-radius: 8px; background: #fff; color: #194359; font: inherit; cursor: pointer; }
.sales-list-sort select:focus-visible, .sales-list-pagination button:focus-visible { outline: 2px solid #0f819b; outline-offset: 2px; }
.sales-list-pagination { display: flex; align-items: center; justify-content: center; gap: 12px; margin-top: 16px; color: #607c8a; font-size: 12px; }
.sales-list-pagination[hidden], .sales-tab-list.is-case-open .sales-list-pagination { display: none; }
.sales-list-pagination button { padding: 6px 12px; border: 1px solid #cadde5; border-radius: 8px; background: #fff; color: #176a82; font: inherit; cursor: pointer; }
.sales-list-pagination button:disabled { opacity: .45; cursor: default; }
.sales-inspection-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.sales-inspection-toolbar h3 { margin: 0; color: #12334a; font-size: 17px; }
.sales-inspection-toolbar .sales-list-sort { margin-inline-start: 0; }

@media (max-width: 700px) {
  .sales-tabbar {
    display: flex;
    overflow-x: auto;
    gap: 5px;
    padding: 5px;
    border-radius: 13px;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }
  .sales-tabbar::-webkit-scrollbar { display: none; }
  .sales-tab {
    flex: 0 0 auto;
    min-height: 50px;
    gap: 6px;
    padding: 8px 10px;
    font-size: 12px;
    scroll-snap-align: start;
  }
  .sales-tab-icon { flex-basis: 26px; height: 26px; }
  .sales-tab-icon svg { width: 16px; height: 16px; }
  .sales-tab-count { font-size: 10px; padding: 3px 6px; }
  .sales-tabs-ready .sales-workspace-content { border-radius: 14px; }
  .sales-tab-list-head { display: flex; flex-wrap: wrap; align-items: center; }
  .sales-tab-list-head p { margin-top: 5px; }
  .sales-list-sort { margin-inline-start: 0; }
  .sales-inspection-toolbar { flex-wrap: wrap; }
}