:root {
  color-scheme: light;
  --orange: #ff751f;
  --orange-dark: light-dark(#d95a08, #e66620);
  --teal: light-dark(#28778d, #539eb5);
  --bg: light-dark(#f6f4f1, #1c2328);
  --ink: light-dark(#13202a, #dceefc);
  --muted: light-dark(#62707c, #a2b1be);
  --line: light-dark(#e5ded6, #32393e);
  --panel: light-dark(#ffffff, #11181d);
  --soft-orange: light-dark(#fff1e8, #1c2328);
  --green: light-dark(#147a53, #4ca77d);
  --red: light-dark(#b42318, #ed5c4b);
  --surface-alt: light-dark(#fbfaf8, #161d22);
  --teal-soft: light-dark(#f2fafc, #181f24);
  --shadow-soft: 0 10px 26px rgba(19, 32, 42, 0.07);
  --shadow-tight: 0 4px 14px rgba(19, 32, 42, 0.05);
}

/* Marketing */
.marketingPanel .panelHeader {
  align-items: flex-start;
}

.marketingHelpTitle,
.marketingHelpLabel,
.marketingValidationHelp {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  max-width: 100%;
}

.marketingHelpTitle,
.marketingHelpLabel {
  vertical-align: middle;
}

.marketingHelpLabel {
  flex-wrap: wrap;
  line-height: 1.25;
}

.marketingHelpLabel > span,
.marketingHelpTitle > span,
.marketingValidationHelp > span {
  flex: 0 0 auto;
}

.marketingPanel .MuiIconButton-root[aria-label^="Ajuda:"] {
  box-shadow: none;
}

.marketingPanel button:disabled:not(.MuiIconButton-root),
.marketingPanel .marketingDay:disabled {
  cursor: not-allowed;
  filter: grayscale(0.18);
  opacity: 0.58;
}

.marketingPanel .marketingDay:disabled:hover,
.marketingPanel .marketingDay:disabled:focus-visible {
  border-color: rgba(15, 23, 42, 0.1);
  box-shadow: none;
  transform: none;
}

.panelActions.marketingMonthControls {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  flex-wrap: nowrap;
  max-width: 100%;
}

.marketingLayout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
  align-items: start;
}

.marketingLayout .span2 {
  grid-column: 1 / -1;
}

.marketingEditorCard textarea {
  resize: vertical;
}

.marketingKpis.financeKpis {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.marketingManagementKpis.financeKpis {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.marketingWorkspace {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(360px, 420px);
  gap: 16px;
  align-items: start;
}

.marketingMainColumn {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 16px;
}

.marketingEditorRail {
  position: sticky;
  top: 18px;
  min-width: 0;
}

.marketingCalendarToolbar {
  margin-bottom: 0;
}

.marketingCalendarCard {
  overflow: hidden;
}

.marketingCampaignCalendarLayout {
  gap: 18px;
}

.marketingCampaignCalendarCard {
  width: 100%;
  padding-top: 16px;
}

.marketingCampaignCalendarLayout .marketingYearCalendar {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-top: 18px;
}

.marketingCampaignEditorCard {
  width: 100%;
}

.marketingCampaignEditorCard .marketingEditorSection {
  width: min(100%, 980px);
  margin: 0 auto;
}

.marketingCampaignEditorCard .subpanelTitleRow {
  align-items: center;
  margin-bottom: 12px;
}

.marketingManagementBudget,
.marketingManagementExpenses {
  display: grid;
  gap: 14px;
}

.marketingManagementBudget .subpanelTitleRow,
.marketingManagementExpenses .subpanelTitleRow {
  align-items: flex-start;
}

.marketingManagementBudgetGrid {
  grid-template-columns: minmax(220px, 360px);
  align-items: start;
}

.marketingManagementBudgetGrid label {
  align-self: stretch;
}

.marketingBudgetField {
  display: grid;
  gap: 8px;
  align-self: stretch;
  min-width: 0;
}

.marketingBudgetField label {
  display: grid;
  gap: 6px;
}

.marketingBudgetActions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.marketingBudgetLockNote {
  margin: 0;
}

.marketingManagementBudgetGrid input,
.marketingManagementBudgetGrid textarea,
.marketingExpenseRow input,
.marketingExpenseRow select,
.marketingExpenseRow textarea {
  width: 100%;
}

.marketingBudgetProgress {
  height: 10px;
  overflow: hidden;
  border: 1px solid light-dark(rgba(40, 119, 141, 0.14), rgba(83, 158, 181, 0.14));
  border-radius: 999px;
  background: light-dark(#eef2f4, #1f262b);
}

.marketingBudgetProgress span {
  display: block;
  height: 100%;
  max-width: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, light-dark(#28778d, #539eb5), #ff751f);
}

.marketingExpenseList {
  display: grid;
  gap: 0;
}

.marketingExpenseRow {
  display: grid;
  grid-template-columns: minmax(118px, 0.7fr) minmax(164px, 0.95fr) minmax(220px, 1.45fr) minmax(124px, 0.75fr) minmax(190px, 1fr) auto;
  gap: 10px;
  align-items: end;
  padding: 12px 0;
  border-top: 1px solid rgba(15, 23, 42, 0.08);
}

.marketingExpenseRow:first-child {
  padding-top: 0;
  border-top: 0;
}

.marketingExpenseRow label {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.marketingExpenseRow label > span {
  color: light-dark(#233642, #cce4f3);
  font-size: 12px;
  font-weight: 850;
}

.marketingExpenseDescription input {
  min-width: 0;
}

.marketingExpenseNotes textarea {
  min-height: 42px;
  resize: vertical;
}

.marketingCampaignObjectiveTextarea {
  min-height: 168px;
  line-height: 1.55;
  resize: vertical;
}

.marketingEditorCard .marketingCampaignFormGrid {
  grid-template-columns: minmax(0, 1.45fr) minmax(220px, 0.55fr);
  gap: 14px;
}

.marketingEditorCard .marketingCampaignFormGrid .span2 {
  grid-column: 1 / -1;
}

.marketingCampaignColorControls {
  display: grid;
  gap: 8px;
}

.marketingCampaignColorControls > span {
  color: light-dark(#233642, #cce4f3);
  font-size: 12px;
  font-weight: 900;
}

.marketingCampaignColorRow {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.marketingCampaignColorSwatch {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: 1px solid rgba(16, 36, 51, 0.12);
  border-radius: 8px;
  background: var(--swatch-color);
  cursor: pointer;
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.38);
}

.marketingCampaignColorSwatch.active {
  border-color: light-dark(rgba(16, 36, 51, 0.42), rgba(212, 237, 255, 0.42));
  box-shadow: 0 0 0 3px rgba(40, 119, 141, 0.12), inset 0 0 0 2px rgba(255, 255, 255, 0.72);
}

.marketingCampaignCustomColor {
  display: inline-grid;
  grid-template-columns: auto 54px;
  align-items: center;
  gap: 8px;
  min-height: 36px;
  padding: 0 8px;
  border: 1px solid light-dark(#d7e2e4, #31393e);
  border-radius: 8px;
  background: light-dark(#fff, #11181d);
  color: light-dark(#526471, #aabecc);
  font-size: 12px;
  font-weight: 850;
}

.marketingCampaignCustomColor input {
  width: 54px;
  min-height: 28px;
  padding: 4px;
  border: 0;
  cursor: pointer;
}

.marketingCampaignDialogList {
  display: grid;
  gap: 10px;
}

.marketingCampaignDialogCard {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: start;
  padding: 14px;
  border: 1px solid rgba(15, 23, 42, 0.1);
  border-radius: 8px;
  background: light-dark(#ffffff, #11181d);
}

.marketingCampaignDialogCardContent {
  display: grid;
  min-width: 0;
  gap: 5px;
}

.marketingCampaignDialogCardButton {
  width: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  text-align: left;
  cursor: pointer;
}

.marketingCampaignDialogCardButton:hover,
.marketingCampaignDialogCardButton:active {
  background: transparent;
  color: inherit;
}

.marketingCampaignDialogCardButton:focus-visible {
  border-radius: 8px;
  outline: 2px solid rgba(15, 23, 42, 0.18);
  outline-offset: 4px;
}

.marketingCampaignDialogCardContent small,
.marketingCampaignDialogCardContent span,
.marketingCampaignDialogCardContent b {
  color: light-dark(#64748b, #9aabc4);
  font-size: 12px;
  line-height: 1.35;
}

.marketingCampaignDialogCardContent strong {
  color: light-dark(#0f172a, #e1eeff);
  font-size: 16px;
  font-weight: 900;
}

.marketingCampaignDialogCardContent p {
  margin: 0;
  color: light-dark(#334155, #c7d8f1);
  font-size: 14px;
  line-height: 1.55;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}

.marketingCampaignDialogValidationList {
  display: grid;
  min-width: 0;
  gap: 6px;
  margin-top: 3px;
}

.marketingCampaignDialogValidationItem {
  display: grid;
  min-width: 0;
  gap: 3px;
  padding: 8px 10px;
  border: 1px solid light-dark(rgba(40, 119, 141, 0.12), rgba(83, 158, 181, 0.12));
  border-radius: 8px;
  background: light-dark(#f8fafc, #171d22);
}

.marketingCampaignDialogCardContent .marketingCampaignDialogValidationLabel {
  color: light-dark(#0f172a, #e1eeff);
  font-size: 12px;
  font-weight: 900;
  line-height: 1.35;
}

.marketingCampaignDialogValidationItem p {
  color: light-dark(#475569, #b8c8df);
  font-size: 13px;
}

.marketingCampaignDialogCardContent .marketingCampaignDialogValidationEmpty {
  color: light-dark(#64748b, #9aabc4);
  font-size: 12px;
  font-weight: 800;
}

.marketingCampaignDialogCardContent b {
  color: var(--teal);
  font-weight: 900;
}

.marketingCampaignLinkedPreview {
  display: flex;
  min-width: 0;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  margin-top: 3px;
}

.marketingCampaignLinkedPreview span,
.marketingCampaignLinkedPreview small {
  max-width: 100%;
  padding: 5px 8px;
  border: 1px solid light-dark(rgba(40, 119, 141, 0.14), rgba(83, 158, 181, 0.14));
  border-radius: 999px;
  background: light-dark(#f8fafc, #171d22);
  color: light-dark(#334155, #c7d8f1);
  font-size: 12px;
  font-weight: 800;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.marketingCampaignLinkedPreview small {
  color: var(--teal);
}

.marketingCampaignDetail {
  display: grid;
  gap: 14px;
}

.marketingCampaignDetailHeader {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 10px;
  align-items: start;
  padding: 12px;
  border: 1px solid light-dark(rgba(40, 119, 141, 0.14), rgba(83, 158, 181, 0.14));
  border-radius: 8px;
  background: light-dark(#f8fafc, #171d22);
}

.marketingCampaignDetailHeader > div {
  display: grid;
  min-width: 0;
  gap: 4px;
}

.marketingCampaignDetailHeader small {
  color: light-dark(#64748b, #9aabc4);
  font-size: 12px;
  font-weight: 800;
}

.marketingCampaignDetailHeader strong {
  color: light-dark(#0f172a, #e1eeff);
  font-size: 17px;
  font-weight: 900;
  line-height: 1.25;
}

.marketingCampaignDetailHeader p {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 8px;
  background: light-dark(#ffffff, #11181d);
  margin: 0;
  color: light-dark(#334155, #c7d8f1);
  font-size: 14px;
  line-height: 1.6;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}

.marketingCampaignDetailSection {
  display: grid;
  gap: 10px;
}

.marketingCampaignDetailSection .subpanelTitleRow h3 {
  margin: 0;
  color: light-dark(#0f172a, #e1eeff);
  font-size: 15px;
  font-weight: 900;
}

.marketingCampaignPostLinkList {
  display: grid;
  gap: 8px;
}

.marketingCampaignPostLinkItem {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 9px;
  align-items: center;
  padding: 9px 10px;
  border: 1px solid rgba(15, 23, 42, 0.1);
  border-radius: 8px;
  background: light-dark(#ffffff, #11181d);
}

.marketingCampaignPostLinkItem input {
  width: 18px;
  height: 18px;
}

.marketingCampaignPostLinkItem span {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.marketingCampaignPostLinkItem strong,
.marketingCampaignPostLinkItem small {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.marketingCampaignPostLinkItem strong {
  color: light-dark(#0f172a, #e1eeff);
  font-size: 13px;
  font-weight: 900;
}

.marketingCampaignPostLinkItem small {
  color: light-dark(#64748b, #9aabc4);
  font-size: 12px;
  font-weight: 750;
}

.marketingPostDialogCard {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: start;
  padding: 14px;
  border: 1px solid rgba(15, 23, 42, 0.1);
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(255, 117, 31, 0.08), light-dark(rgba(255, 255, 255, 0.94), rgba(17, 24, 29, 0.94)) 42%),
    light-dark(#ffffff, #11181d);
}

.marketingPostDialogCardContent {
  display: grid;
  min-width: 0;
  gap: 12px;
}

.marketingPostDialogHeader {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 9px;
  align-items: center;
}

.marketingPostDialogHeader > div {
  display: grid;
  min-width: 0;
  gap: 3px;
}

.marketingPostDialogHeader small,
.marketingPostDialogMeta span {
  color: light-dark(#64748b, #9aabc4);
  font-size: 12px;
  line-height: 1.35;
}

.marketingPostDialogHeader strong {
  color: light-dark(#0f172a, #e1eeff);
  font-size: 17px;
  font-weight: 900;
  line-height: 1.25;
}

.marketingPostDialogMeta {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.marketingPostDialogMeta span,
.marketingPostDialogTextGrid section {
  display: grid;
  min-width: 0;
  gap: 4px;
  padding: 9px 10px;
  border: 1px solid light-dark(rgba(40, 119, 141, 0.12), rgba(83, 158, 181, 0.12));
  border-radius: 8px;
  background: light-dark(rgba(248, 250, 252, 0.72), rgba(23, 29, 34, 0.72));
}

.marketingPostDialogMeta b,
.marketingPostDialogTextGrid b,
.marketingPostDialogMaterials > b {
  color: light-dark(#0f172a, #e1eeff);
  font-size: 12px;
  font-weight: 900;
}

.marketingPostDialogTextGrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.marketingPostDialogMaterials {
  display: grid;
  min-width: 0;
  gap: 8px;
}

.marketingPostDialogMediaGrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 200px));
  gap: 10px;
  align-items: start;
  justify-content: start;
}

.marketingPostDialogMedia {
  display: grid;
  grid-template-rows: auto minmax(0, auto) auto;
  gap: 8px;
  width: 100%;
  max-width: 200px;
  min-width: 0;
  padding: 8px;
  overflow: hidden;
  border: 1px solid light-dark(rgba(40, 119, 141, 0.14), rgba(83, 158, 181, 0.14));
  border-radius: 8px;
  background: light-dark(#020617, #e1efff);
}

.marketingPostDialogMediaPreviewButton {
  display: grid;
  place-items: stretch;
  width: 100%;
  min-width: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
}

.marketingPostDialogMedia:hover,
.marketingPostDialogMedia:focus-within {
  border-color: rgba(255, 117, 31, 0.42);
  outline: none;
  box-shadow: 0 10px 22px rgba(15, 23, 42, 0.14);
}

.marketingPostDialogMediaPreviewButton:focus-visible {
  outline: 2px solid rgba(255, 117, 31, 0.62);
  outline-offset: 2px;
}

.marketingPostDialogMedia .marketingAttachmentPreview {
  position: relative;
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  display: grid;
  place-items: center;
  overflow: hidden;
  border: 0;
  border-radius: 6px;
  background: light-dark(#020617, #e1efff);
}

.marketingPostDialogMedia.is-horizontal,
.marketingPostDialogMedia.is-vertical {
  width: 100%;
  justify-self: start;
}

.marketingPostDialogMedia.is-vertical .marketingAttachmentPreview {
  aspect-ratio: 4 / 5;
}

.marketingPostDialogMedia .marketingAttachmentPreview img,
.marketingPostDialogMedia .marketingAttachmentPreview video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  display: block;
  object-fit: contain;
  object-position: center;
}

.marketingPostDialogMedia .marketingAttachmentPreview > span {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
}

.marketingPostDialogMediaCaption {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.marketingPostDialogMediaCaption span,
.marketingPostDialogMediaCaption small {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.marketingPostDialogMediaCaption span {
  color: light-dark(#f8fafc, #171d22);
  font-size: 12px;
  font-weight: 900;
}

.marketingPostDialogMediaCaption small {
  color: light-dark(#94a3b8, #6d7b8f);
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
}

.marketingPostDialogMediaActions {
  display: flex;
  justify-content: flex-end;
  gap: 6px;
}

.marketingPostDialogTextGrid p {
  margin: 0;
  color: light-dark(#334155, #c7d8f1);
  font-size: 13px;
  line-height: 1.45;
}

.marketingPostDialogActions {
  justify-content: flex-end;
}

.marketingPostConversation {
  display: grid;
  min-width: 0;
  gap: 10px;
  padding: 10px;
  border: 1px solid light-dark(rgba(40, 119, 141, 0.14), rgba(83, 158, 181, 0.14));
  border-radius: 8px;
  background: light-dark(rgba(247, 251, 252, 0.78), rgba(22, 29, 34, 0.78));
}

.marketingPostConversationHeader {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.marketingPostConversationHeader > div {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.marketingPostConversationHeader b {
  color: light-dark(#0f172a, #e1eeff);
  font-size: 13px;
  font-weight: 900;
}

.marketingPostConversationHeader small {
  color: light-dark(#64748b, #9aabc4);
  font-size: 12px;
  line-height: 1.35;
}

.marketingPostCommentList {
  display: grid;
  gap: 8px;
  max-height: 242px;
  min-height: 110px;
  overflow: auto;
  padding-right: 3px;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
}

.marketingPostComment {
  display: grid;
  justify-self: start;
  width: fit-content;
  max-width: min(86%, 560px);
  min-width: 0;
  gap: 5px;
  padding: 9px 10px;
  border: 1px solid rgba(24, 34, 43, 0.08);
  border-radius: 8px;
  background: light-dark(#ffffff, #11181d);
}

.marketingPostComment.isOwn {
  justify-self: end;
  border-color: rgba(255, 117, 31, 0.22);
  background: light-dark(#fff7ed, #181f24);
}

.marketingPostComment.isPending {
  opacity: 0.72;
}

.marketingPostComment span {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  min-width: 0;
}

.marketingPostComment strong {
  min-width: 0;
  overflow: hidden;
  color: light-dark(#0f172a, #e1eeff);
  font-size: 12.5px;
  font-weight: 900;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.marketingPostComment small {
  flex: 0 0 auto;
  color: light-dark(#64748b, #9aabc4);
  font-size: 11px;
}

.marketingPostComment p {
  margin: 0;
  color: light-dark(#334155, #c7d8f1);
  font-size: 13px;
  line-height: 1.45;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}

.marketingPostCommentForm {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 8px;
}

.marketingPostCommentComposer {
  position: relative;
  display: grid;
  min-width: 0;
}

.marketingPostCommentComposer textarea {
  width: 100%;
  min-height: 58px;
  max-height: 160px;
  resize: vertical;
}

.marketingPostCommentForm > button {
  min-height: 46px;
}

.marketingMentionMenu {
  position: absolute;
  right: 0;
  bottom: calc(100% + 6px);
  left: 0;
  z-index: 6;
  display: grid;
  max-height: 190px;
  overflow: auto;
  border: 1px solid light-dark(rgba(40, 119, 141, 0.18), rgba(83, 158, 181, 0.18));
  border-radius: 8px;
  background: light-dark(#ffffff, #11181d);
  box-shadow: 0 14px 30px rgba(15, 23, 42, 0.14);
}

.marketingMentionOption {
  display: grid;
  width: 100%;
  min-width: 0;
  gap: 2px;
  padding: 8px 10px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: light-dark(#0f172a, #e1eeff);
  text-align: left;
  cursor: pointer;
}

.marketingMentionOption + .marketingMentionOption {
  border-top: 1px solid rgba(24, 34, 43, 0.08);
}

.marketingMentionOption:hover,
.marketingMentionOption:focus-visible {
  outline: none;
  background: light-dark(#f7fbfc, #161d22);
}

.marketingMentionOption strong {
  font-size: 12.5px;
  font-weight: 900;
}

.marketingMentionOption small {
  min-width: 0;
  overflow: hidden;
  color: light-dark(#64748b, #9aabc4);
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.marketingPostCalendarLayout {
  gap: 18px;
}

.marketingPostCalendarCard {
  position: relative;
  width: 100%;
  border-color: rgba(15, 23, 42, 0.1);
  background:
    linear-gradient(135deg, rgba(255, 117, 31, 0.06), light-dark(rgba(255, 255, 255, 0.96), rgba(17, 24, 29, 0.96)) 38%),
    light-dark(#ffffff, #11181d);
}

.marketingPostCalendarCard::after {
  content: "";
  position: absolute;
  right: -34px;
  bottom: -48px;
  width: min(34%, 260px);
  height: min(54%, 260px);
  background: url("/simbolo-3d-curitiba.png") center / contain no-repeat;
  opacity: 0.055;
  pointer-events: none;
}

.marketingPostCalendarCardInner {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 14px;
}

.marketingPostCalendarIntro {
  display: grid;
  gap: 12px;
}

.marketingPostCalendarHeader .profileActionCell {
  flex: 0 0 auto;
}

.marketingPostCalendarHeader {
  display: flex;
  min-width: 0;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
}

.marketingPostCalendarHeader h3 {
  margin: 0;
  color: light-dark(#0f172a, #e1eeff);
  font-size: 18px;
  font-weight: 900;
}

.marketingPostCalendarHeader p {
  margin: 4px 0 0;
  color: light-dark(#64748b, #9aabc4);
  font-size: 13px;
  line-height: 1.45;
}

.marketingCalendarModeSwitch {
  display: inline-flex;
  align-items: center;
  min-width: max-content;
  padding: 3px;
  border: 1px solid light-dark(rgba(40, 119, 141, 0.18), rgba(83, 158, 181, 0.18));
  border-radius: 8px;
  background: light-dark(#f7fbfb, #161d22);
  gap: 3px;
}

.marketingCalendarModeSwitch button {
  min-height: 30px;
  padding: 0 10px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: light-dark(#405563, #b4ccdd);
  font-size: 12px;
  font-weight: 900;
  cursor: pointer;
  white-space: nowrap;
}

.marketingCalendarModeSwitch button.active {
  background: light-dark(#ffffff, #11181d);
  color: light-dark(#1f6578, #5b9db1);
  box-shadow: 0 1px 5px rgba(16, 36, 51, 0.12);
}

.marketingPostModeRow {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  width: 100%;
  margin-top: 2px;
}

.marketingPostCalendarCard .marketingCalendar {
  gap: 9px;
}

.marketingPostCalendarCard .marketingWeekDay {
  min-height: 32px;
  border: 1px solid light-dark(rgba(40, 119, 141, 0.12), rgba(83, 158, 181, 0.12));
  background: light-dark(rgba(248, 250, 252, 0.9), rgba(23, 29, 34, 0.9));
  color: light-dark(#475569, #b8c8df);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.72);
}

.marketingPostCalendarCard .marketingDay {
  position: relative;
  min-height: 300px;
  height: 300px;
  padding: 11px;
  border-color: rgba(15, 23, 42, 0.1);
  background: light-dark(#ffffff, #11181d);
  gap: 8px;
  overflow: hidden;
}

.marketingPostCalendarCard .marketingDay::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  background: var(--orange);
  opacity: 0.78;
}

.marketingPostCalendarCard .marketingDay > * {
  position: relative;
  z-index: 1;
}

.marketingPostCalendarCard .marketingDay:hover,
.marketingPostCalendarCard .marketingDay:focus-visible {
  border-color: light-dark(rgba(40, 119, 141, 0.42), rgba(83, 158, 181, 0.42));
  box-shadow: 0 16px 34px rgba(16, 36, 51, 0.1);
  transform: translateY(-1px);
}

.marketingPostCalendarCard .marketingDay.today {
  border-color: light-dark(rgba(37, 99, 235, 0.64), rgba(71, 136, 255, 0.64));
  background:
    linear-gradient(135deg, light-dark(rgba(37, 99, 235, 0.085), rgba(71, 136, 255, 0.085)), light-dark(rgba(255, 255, 255, 0.9), rgba(17, 24, 29, 0.9)) 46%),
    light-dark(#ffffff, #11181d);
  box-shadow: 0 16px 34px rgba(16, 36, 51, 0.1);
}

.marketingPostCalendarCard .marketingDay.today::before {
  background: light-dark(#2563eb, #4788ff);
}

.marketingPostCalendarCard .marketingDay.hasSpotlight:not(.today) {
  border-color: rgba(var(--post-spotlight-rgb, 255, 117, 31), 0.42);
  background: light-dark(#ffffff, #11181d);
  box-shadow: inset 0 3px 0 rgb(var(--post-spotlight-rgb, 255, 117, 31)), 0 16px 34px rgba(16, 36, 51, 0.1);
}

.marketingPostCalendarCard .marketingDay.canDrop.isCopying {
  border-color: light-dark(rgba(40, 119, 141, 0.56), rgba(83, 158, 181, 0.56));
  background:
    linear-gradient(135deg, light-dark(rgba(40, 119, 141, 0.14), rgba(83, 158, 181, 0.14)), light-dark(rgba(255, 255, 255, 0.92), rgba(17, 24, 29, 0.92)) 48%),
    light-dark(#ffffff, #11181d);
  box-shadow: inset 0 3px 0 var(--teal), 0 16px 34px rgba(16, 36, 51, 0.12);
}

.marketingPostCalendarCard .marketingDay.canDrop.isCopying::before {
  background: var(--teal);
}

.marketingPostCalendarCard .marketingDay.empty {
  border-style: dashed;
  background: light-dark(rgba(248, 250, 252, 0.72), rgba(23, 29, 34, 0.72));
}

.marketingPostCalendarCard .marketingDay.empty::before {
  background: light-dark(#cbd5e1, #3d454b);
  opacity: 0.56;
}

.marketingPostCalendarCard .marketingDayNumber {
  border: 1px solid light-dark(rgba(40, 119, 141, 0.12), rgba(83, 158, 181, 0.12));
  background: light-dark(#ffffff, #11181d);
  color: var(--teal);
  box-shadow: 0 4px 12px rgba(40, 119, 141, 0.08);
}

.marketingPostCalendarCard .marketingDay.today .marketingDayNumber {
  background: light-dark(#2563eb, #4788ff);
  color: #ffffff;
}

.marketingDayHeader {
  display: flex;
  align-items: center;
  gap: 8px;
}

.marketingDayCount {
  margin-left: auto;
  color: light-dark(#60717d, #9fb1be);
  font-size: 11px;
  font-weight: 850;
}

.postSpotlightButton {
  flex: 0 0 auto;
  width: 28px;
  height: 24px;
  margin-left: 0;
  font-size: 12px;
}

.marketingTodayTag {
  display: inline-flex;
  align-items: center;
  min-height: 20px;
  margin-left: auto;
  padding: 0 7px;
  border-radius: 999px;
  background: light-dark(rgba(37, 99, 235, 0.1), rgba(71, 136, 255, 0.1));
  color: light-dark(#1d4ed8, #4c87ff);
  font-size: 10px;
  font-weight: 950;
  text-transform: uppercase;
}

.marketingTodayTag + .marketingDayCount {
  margin-left: 0;
}

.marketingPostCalendarCard .marketingPostDot {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  min-height: 46px;
  padding: 7px;
  column-gap: 7px;
  row-gap: 2px;
  align-items: center;
  border: 1px solid rgba(var(--urgency-rgb, 40, 119, 141), 0.2);
  border-left: 4px solid rgb(var(--urgency-rgb, 40, 119, 141));
  background:
    linear-gradient(90deg, rgba(var(--urgency-rgb, 40, 119, 141), 0.1), light-dark(rgba(255, 255, 255, 0.9), rgba(17, 24, 29, 0.9))),
    light-dark(#ffffff, #11181d);
  color: light-dark(#17495a, #b6dceb);
  cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.68);
}

.marketingPostCalendarCard .marketingPostDot:hover,
.marketingPostCalendarCard .marketingPostDot:focus-visible {
  border-color: rgba(255, 117, 31, 0.42);
  box-shadow: 0 8px 18px rgba(255, 117, 31, 0.12);
  outline: none;
}

.marketingPostCalendarCard .marketingPostDot.isMoving {
  opacity: 0.62;
  cursor: progress;
}

.marketingPostCalendarCard .marketingPostDot.isSpotlight {
  border-color: rgba(var(--urgency-rgb, 255, 117, 31), 0.36);
  background:
    linear-gradient(90deg, rgba(255, 117, 31, 0.16), rgba(var(--urgency-rgb, 255, 117, 31), 0.14)),
    light-dark(rgba(255, 247, 237, 0.94), rgba(24, 31, 36, 0.94));
}

.marketingPostCalendarCard .marketingPostDot .campaignColorDot {
  grid-row: 1 / span 2;
}

.marketingPostDotMain {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 6px;
}

.marketingPostCalendarCard .marketingPostDotMain strong {
  min-width: 0;
}

.marketingPostCalendarCard .marketingPostDot > small {
  grid-column: 2;
  grid-row: 2;
}

.marketingPostRemainingDays {
  display: inline-grid;
  width: 26px;
  height: 20px;
  place-items: center;
  border: 1px solid rgba(var(--urgency-rgb, 40, 119, 141), 0.28);
  border-radius: 7px;
  background: light-dark(rgba(255, 255, 255, 0.94), rgba(17, 24, 29, 0.94));
  color: rgb(var(--urgency-rgb, 40, 119, 141));
  font-size: 10px;
  font-weight: 950;
  line-height: 1;
  box-shadow: 0 4px 10px rgba(15, 23, 42, 0.08);
}

.marketingPostStatusShortcut {
  grid-column: 3;
  grid-row: 1 / span 2;
  display: grid;
  gap: 3px;
  align-self: center;
  justify-self: end;
  justify-items: center;
}

.marketingStatusMenuDot {
  width: 10px;
  height: 10px;
  margin-right: 10px;
  border-radius: 50%;
  background: rgb(var(--status-rgb, 40, 119, 141));
  box-shadow: 0 0 0 3px rgba(var(--status-rgb, 40, 119, 141), 0.14);
}

.marketingStatusMenuDot.neutral {
  --status-rgb: 100, 116, 139;
}

.marketingStatusMenuDot.responsible {
  --status-rgb: 40, 119, 141;
}

.marketingStatusMenuHeader {
  padding: 8px 16px 5px;
  color: light-dark(#6b7280, #a4abba);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0;
  line-height: 1.2;
  text-transform: uppercase;
}

.marketingStatusMenuDivider {
  height: 1px;
  margin: 7px 12px;
  background: rgba(15, 23, 42, 0.1);
}

.marketingStatusMenuHint {
  max-width: 220px;
  padding: 0 16px 7px;
  color: light-dark(#9f4f00, #ce7a3d);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.35;
}

.marketingPostCalendarCard .postStatusPill {
  grid-column: 3;
  grid-row: 1 / span 2;
  align-self: center;
  max-width: 86px;
  min-height: 22px;
  padding: 0 7px;
  border-radius: 999px;
  background: rgba(var(--status-rgb, 40, 119, 141), 0.12);
  color: rgb(var(--status-rgb, 40, 119, 141));
  font-size: 10px;
  font-weight: 950;
  line-height: 22px;
  overflow: hidden;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.marketingPostCalendarCard .marketingMoreItems {
  border: 1px solid light-dark(rgba(40, 119, 141, 0.18), rgba(83, 158, 181, 0.18));
  background: light-dark(rgba(40, 119, 141, 0.08), rgba(83, 158, 181, 0.08));
  color: var(--teal-dark);
}

.marketingEmptyAction {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  min-height: 24px;
  margin-top: auto;
  padding: 0 8px;
  border: 1px dashed light-dark(rgba(40, 119, 141, 0.16), rgba(83, 158, 181, 0.16));
  border-radius: 999px;
  background: light-dark(rgba(255, 255, 255, 0.62), rgba(17, 24, 29, 0.62));
  color: light-dark(#60717d, #9fb1be);
  font-size: 11px;
  font-weight: 850;
  opacity: 0.74;
}

.marketingPostCalendarCard .marketingDay:hover .marketingEmptyAction,
.marketingPostCalendarCard .marketingDay:focus-visible .marketingEmptyAction {
  border-color: light-dark(rgba(40, 119, 141, 0.28), rgba(83, 158, 181, 0.28));
  color: var(--teal-dark);
  opacity: 1;
}

.marketingPostEditorCard {
  width: 100%;
}

.marketingPostEditorCard .marketingEditorSection {
  width: min(100%, 980px);
  margin: 0 auto;
}

.marketingPostEditorCard .subpanelTitleRow {
  align-items: center;
  margin-bottom: 12px;
}

.marketingPostSpotlightToggle {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 42px;
  padding: 10px 12px;
  border: 1px solid rgba(255, 117, 31, 0.18);
  border-radius: 8px;
  background: light-dark(rgba(255, 247, 237, 0.72), rgba(24, 31, 36, 0.72));
  color: light-dark(#233642, #cce4f3);
  font-size: 13px;
  font-weight: 850;
}

.marketingPostSpotlightToggle input {
  width: 18px;
  min-height: 18px;
  accent-color: var(--orange);
}

.marketingPostEditorMockup {
  display: grid;
  gap: 12px;
}

.marketingPostPlanningBar {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
  padding: 10px;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 8px;
  background: light-dark(rgba(248, 250, 252, 0.76), rgba(23, 29, 34, 0.76));
}

.marketingPostPhaseGrid {
  display: grid;
  grid-template-columns: repeat(4, minmax(112px, 1fr));
  gap: 8px;
  align-items: stretch;
}

.marketingPostPhaseBox {
  display: grid;
  gap: 6px;
  min-width: 0;
  padding: 10px;
  border: 1px solid light-dark(rgba(40, 119, 141, 0.14), rgba(83, 158, 181, 0.14));
  border-radius: 8px;
  background: light-dark(#ffffff, #11181d);
}

.marketingPostPhaseBox.active {
  border-color: rgba(255, 117, 31, 0.42);
  background: rgba(255, 117, 31, 0.08);
  box-shadow: inset 0 0 0 1px rgba(255, 117, 31, 0.12);
}

.marketingPostPhaseBox span {
  color: var(--navy);
  font-size: 12px;
  font-weight: 800;
  line-height: 1.2;
}

.marketingPostPhaseBox input {
  min-height: 34px;
  padding: 7px 8px;
  font-size: 15px;
  font-weight: 800;
  text-align: center;
}

.marketingPostPhaseBox small {
  color: var(--muted);
  font-size: 10px;
  font-weight: 700;
  line-height: 1.2;
}

.marketingPostPhaseBuffer {
  grid-column: 1 / -1;
  padding: 8px 10px;
  border-radius: 8px;
  background: light-dark(rgba(40, 119, 141, 0.08), rgba(83, 158, 181, 0.08));
  color: var(--teal);
  font-size: 12px;
  font-weight: 800;
}

.marketingPostPhaseBuffer.warning {
  background: light-dark(rgba(180, 35, 24, 0.08), rgba(237, 92, 75, 0.08));
  color: var(--red);
}

.marketingFieldInvalid input,
.marketingFieldInvalid select,
.marketingFieldInvalid textarea {
  border-color: light-dark(rgba(180, 35, 24, 0.76), rgba(237, 92, 75, 0.76)) !important;
  background: light-dark(rgba(254, 242, 242, 0.96), rgba(27, 34, 39, 0.96)) !important;
  box-shadow: 0 0 0 3px rgba(180, 35, 24, 0.12) !important;
}

.marketingPostContentPanel,
.marketingPostSupportPanel {
  display: grid;
  gap: 12px;
  padding: 12px;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 8px;
  background: light-dark(#ffffff, #11181d);
}

.marketingPostPanelTitle,
.marketingPostSupportHeader,
.marketingBriefingTemplateHeader,
.marketingCreativeReviewGroupTitle {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

.marketingPostPanelTitle h3 {
  margin: 0;
  color: var(--navy);
  font-size: 13px;
  line-height: 1.2;
}

.marketingPostPanelTitle small,
.marketingBriefingTemplateHeader small,
.marketingCreativeReviewGroupTitle small {
  max-width: 280px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
  line-height: 1.35;
  text-align: right;
}

.marketingPostInlineGrid,
.marketingReferenceGrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.marketingBriefingBuilder,
.marketingSummaryField,
.marketingBriefingTabs,
.marketingBriefingTemplate,
.marketingLegacyBriefing {
  display: grid;
  gap: 10px;
}

.marketingSummaryField textarea {
  min-height: 74px;
}

.marketingFormatSwitch {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
  padding: 4px;
  border: 1px solid light-dark(rgba(40, 119, 141, 0.12), rgba(83, 158, 181, 0.12));
  border-radius: 8px;
  background: light-dark(rgba(248, 250, 252, 0.9), rgba(23, 29, 34, 0.9));
}

.marketingFormatSwitch button {
  min-height: 34px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  color: light-dark(#475569, #b8c8df);
  font-size: 12px;
  font-weight: 900;
  cursor: pointer;
}

.marketingFormatSwitch button.active {
  border-color: light-dark(rgba(40, 119, 141, 0.18), rgba(83, 158, 181, 0.18));
  background: light-dark(#ffffff, #11181d);
  color: var(--teal-dark);
  box-shadow: 0 8px 18px rgba(16, 36, 51, 0.07);
}

.marketingBriefingTemplate {
  padding: 10px;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 8px;
  background: light-dark(rgba(248, 250, 252, 0.58), rgba(23, 29, 34, 0.58));
}

.marketingBriefingTemplateHeader,
.marketingCreativeReviewGroupTitle {
  color: var(--navy);
  font-size: 12px;
  font-weight: 950;
}

.marketingCarouselSlides {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.marketingSlideCard,
.marketingBriefingBlock,
.marketingFormatCaption,
.marketingReferenceGrid label,
.marketingCreativeReviewItem label {
  display: grid;
  gap: 5px;
  min-width: 0;
}

.marketingSlideCard {
  padding: 10px;
  border: 1px solid light-dark(rgba(40, 119, 141, 0.12), rgba(83, 158, 181, 0.12));
  border-radius: 8px;
  background: light-dark(#ffffff, #11181d);
}

.marketingSlideCard.featuredSlide {
  grid-column: span 2;
}

.marketingSlideCard strong,
.marketingBriefingBlock span,
.marketingFormatCaption span,
.marketingReferenceGrid span,
.marketingCreativeReviewItem span {
  color: light-dark(#334155, #c7d8f1);
  font-size: 12px;
  font-weight: 950;
}

.marketingSlideCard textarea {
  min-height: 142px;
  padding: 9px;
  font-size: 12px;
  line-height: 1.35;
}

.marketingFormatCaption textarea {
  min-height: 128px;
  font-size: 12px;
}

.marketingScriptGrid {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.35fr) minmax(0, 0.9fr);
  gap: 10px;
}

.marketingBriefingBlock textarea {
  min-height: 150px;
  font-size: 12px;
}

.marketingReviewHint {
  margin: 0;
  color: light-dark(#334155, #c7d8f1);
  font-size: 12px;
  line-height: 1.45;
}

.marketingCreativeReviewGroup {
  display: grid;
  gap: 8px;
  padding: 10px;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 8px;
  background: light-dark(rgba(248, 250, 252, 0.62), rgba(23, 29, 34, 0.62));
}

.marketingCreativeReviewGrid {
  display: grid;
  grid-template-columns: minmax(120px, 0.5fr) minmax(140px, 0.55fr) minmax(0, 1.25fr) minmax(0, 1.45fr);
  gap: 10px;
}

.marketingCreativeReviewItem {
  display: grid;
  grid-template-columns: subgrid;
  grid-column: 1 / -1;
  gap: 10px;
  align-items: end;
  padding: 10px;
  border: 1px solid light-dark(rgba(40, 119, 141, 0.12), rgba(83, 158, 181, 0.12));
  border-radius: 8px;
  background: light-dark(#ffffff, #11181d);
}

.marketingCreativeReviewItem textarea {
  min-height: 84px;
  font-size: 12px;
}

.marketingCreativeReviewActions {
  display: flex;
  justify-content: flex-start;
  gap: 8px;
}

.secondaryButton {
  min-height: 34px;
  padding: 7px 11px;
  border: 1px solid light-dark(rgba(40, 119, 141, 0.18), rgba(83, 158, 181, 0.18));
  border-radius: 8px;
  background: light-dark(#ffffff, #11181d);
  color: var(--teal-dark);
  font-size: 12px;
  font-weight: 900;
  cursor: pointer;
}

.marketingSupportStrip {
  display: grid;
  grid-template-columns: minmax(220px, 0.72fr) minmax(0, 1fr) auto;
  gap: 10px;
  align-items: end;
  padding: 10px;
  border: 1px solid rgba(255, 117, 31, 0.14);
  border-radius: 8px;
  background: light-dark(rgba(255, 247, 237, 0.46), rgba(24, 31, 36, 0.46));
}

.marketingLinkInputs {
  display: grid;
  grid-template-columns: minmax(120px, 0.42fr) minmax(0, 1fr);
  gap: 8px;
}

.marketingPostColorControls {
  padding: 10px 12px;
  border: 1px solid light-dark(rgba(40, 119, 141, 0.12), rgba(83, 158, 181, 0.12));
  border-radius: 8px;
  background: light-dark(rgba(248, 250, 252, 0.68), rgba(23, 29, 34, 0.68));
}

.marketingCalendar {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 6px;
}

.marketingYearCalendar {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.marketingYearCalendar.hasFeaturedMonth {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.marketingMonthTile {
  position: relative;
  display: flex;
  min-height: 300px;
  height: 300px;
  width: 100%;
  padding: 12px;
  border: 1px solid rgba(15, 23, 42, 0.1);
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(255, 117, 31, 0.035), light-dark(rgba(255, 255, 255, 0.92), rgba(17, 24, 29, 0.92)) 44%),
    light-dark(#ffffff, #11181d);
  color: inherit;
  text-align: left;
  flex-direction: column;
  gap: 10px;
  cursor: pointer;
  overflow: hidden;
  transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.marketingMonthTile::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  background: var(--orange);
  opacity: 0.86;
}

.marketingMonthTile::after {
  content: "";
  position: absolute;
  right: -22px;
  bottom: -36px;
  width: min(70%, 210px);
  height: min(105%, 210px);
  background: url("/simbolo-3d-curitiba.png") center / contain no-repeat;
  opacity: 0.08;
  pointer-events: none;
}

.marketingMonthTile:hover,
.marketingMonthTile:focus-visible {
  border-color: light-dark(rgba(40, 119, 141, 0.42), rgba(83, 158, 181, 0.42));
  background:
    linear-gradient(135deg, rgba(255, 117, 31, 0.035), light-dark(rgba(255, 255, 255, 0.92), rgba(17, 24, 29, 0.92)) 44%),
    light-dark(#ffffff, #11181d);
  box-shadow: 0 16px 34px rgba(16, 36, 51, 0.1);
  transform: translateY(-1px);
  outline: none;
}

.marketingMonthTile.selected {
  border-color: light-dark(rgba(234, 88, 12, 0.55), rgba(239, 93, 22, 0.55));
  box-shadow: inset 4px 0 0 var(--orange);
}

.marketingMonthTile.hasSpotlight {
  min-height: 300px;
  border-color: rgba(255, 117, 31, 0.48);
  background:
    linear-gradient(135deg, rgba(255, 117, 31, 0.06), light-dark(rgba(255, 255, 255, 0.92), rgba(17, 24, 29, 0.92)) 42%),
    light-dark(#fffaf6, #151c21);
  box-shadow: inset 0 3px 0 var(--orange), 0 18px 34px rgba(255, 117, 31, 0.14);
}

.marketingMonthTile.hasSpotlight::before {
  width: 6px;
  background: var(--orange);
}

.marketingMonthTile.hasSpotlight::after {
  right: -18px;
  bottom: -28px;
  width: min(78%, 240px);
  height: min(112%, 240px);
  opacity: 0.13;
}

.marketingMonthTile:disabled {
  cursor: wait;
  opacity: 0.72;
  transform: none;
}

.marketingMonthTile.isDisabled {
  cursor: wait;
  opacity: 0.72;
  transform: none;
}

.marketingMonthTileHeader {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

.marketingMonthTileHeader > span:first-child {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.marketingMonthTileHeader strong {
  color: light-dark(#0f172a, #e1eeff);
  font-size: 14px;
  font-weight: 900;
  text-transform: capitalize;
}

.marketingMonthTileHeader small,
.marketingMonthEmpty {
  color: light-dark(#64748b, #9aabc4);
  font-size: 12px;
  font-weight: 700;
}

.marketingMonthCampaignList {
  position: relative;
  z-index: 1;
  display: flex;
  min-width: 0;
  flex: 1;
  flex-direction: column;
  gap: 6px;
}

.marketingWeekDay {
  min-height: 28px;
  padding: 6px 8px;
  border-radius: 6px;
  background: light-dark(#f1f5f9, #1c2328);
  color: light-dark(#475569, #b8c8df);
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  text-align: center;
}

.marketingDay {
  display: flex;
  min-height: 132px;
  width: 100%;
  padding: 8px;
  border: 1px solid rgba(15, 23, 42, 0.1);
  border-radius: 8px;
  background: light-dark(#ffffff, #11181d);
  color: inherit;
  text-align: left;
  flex-direction: column;
  gap: 5px;
  cursor: pointer;
  transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.marketingDay:hover,
.marketingDay:focus-visible {
  border-color: light-dark(rgba(37, 99, 235, 0.38), rgba(71, 136, 255, 0.38));
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.08);
  transform: translateY(-1px);
  outline: none;
}

.marketingDay.empty {
  cursor: default;
  background: light-dark(#f8fafc, #171d22);
  box-shadow: none;
  transform: none;
}

.marketingDayNumber {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: light-dark(#e2e8f0, #293036);
  color: light-dark(#0f172a, #e1eeff);
  font-weight: 900;
  font-size: 13px;
}

.marketingCampaignBand,
.marketingPostDot,
.marketingMoreItems {
  display: block;
  width: 100%;
  border-radius: 6px;
  padding: 5px 6px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.marketingCampaignBand {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 7px;
  min-height: 28px;
  border: 1px solid rgba(var(--campaign-rgb, 255, 117, 31), 0.2);
  border-left: 4px solid rgb(var(--campaign-rgb, 255, 117, 31));
  background: rgba(var(--campaign-rgb, 255, 117, 31), 0.12);
  color: light-dark(#2e3135, #d9e3ea);
  font-size: 12px;
  font-weight: 850;
  line-height: 1.28;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.62);
  white-space: nowrap;
}

.marketingCampaignBand.isSpotlight {
  border-color: rgba(255, 117, 31, 0.42);
  background:
    linear-gradient(90deg, rgba(255, 117, 31, 0.15), rgba(var(--campaign-rgb, 255, 117, 31), 0.14)),
    rgba(var(--campaign-rgb, 255, 117, 31), 0.1);
  box-shadow: 0 8px 18px rgba(255, 117, 31, 0.12);
}

.campaignColorDot {
  width: 10px;
  height: 10px;
  border: 1px solid light-dark(rgba(255, 255, 255, 0.7), rgba(17, 24, 29, 0.7));
  border-radius: 50%;
  background: rgb(var(--campaign-rgb, 255, 117, 31));
  box-shadow: 0 0 0 1px rgba(var(--campaign-rgb, 255, 117, 31), 0.22);
}

.campaignName {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.monthSpotlightButton {
  position: relative;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 26px;
  border: 1px solid rgba(255, 117, 31, 0.22);
  border-radius: 999px;
  background: light-dark(rgba(255, 255, 255, 0.82), rgba(17, 24, 29, 0.82));
  color: var(--orange);
  font-size: 13px;
  font-weight: 950;
  line-height: 1;
  cursor: pointer;
}

.monthSpotlightButton:hover,
.monthSpotlightButton:focus-visible {
  border-color: rgba(255, 117, 31, 0.44);
  color: var(--orange-dark);
  outline: none;
}

.monthSpotlightButton.active {
  border-color: rgba(255, 117, 31, 0.52);
  background: var(--orange);
  color: #ffffff;
}

.marketingPostDot {
  background: light-dark(rgba(14, 116, 144, 0.1), rgba(71, 159, 188, 0.1));
  color: light-dark(#164e63, #b3d8e8);
}

.marketingPostDot strong,
.marketingPostDot small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.marketingPostDot strong {
  font-size: 12px;
}

.marketingPostDot small {
  margin-top: 2px;
  color: light-dark(#475569, #b8c8df);
  font-size: 11px;
}

.marketingMoreItems {
  background: light-dark(#f1f5f9, #1c2328);
  color: light-dark(#475569, #b8c8df);
  font-size: 11px;
  font-weight: 800;
  text-align: center;
}

.marketingEditorCard .userFormGrid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.marketingEditorCard.isHidden {
  display: none;
}

.marketingEditorCard.editFocus {
  border-color: light-dark(rgba(40, 119, 141, 0.46), rgba(83, 158, 181, 0.46));
  box-shadow: 0 0 0 3px rgba(40, 119, 141, 0.12), 0 16px 34px rgba(15, 23, 42, 0.1);
}

.marketingStatusFilterRow {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 8px;
  width: 100%;
  margin-top: 12px;
}

.marketingCampaignCalendarCard .marketingStatusFilterRow {
  margin-top: 0;
  margin-bottom: 18px;
}

.marketingStatusFilter {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  min-height: 38px;
  padding: 7px 10px;
  border: 1px solid rgba(var(--status-rgb, 40, 119, 141), 0.18);
  border-radius: 8px;
  background: rgba(var(--status-rgb, 40, 119, 141), 0.06);
  color: light-dark(#233642, #cce4f3);
  gap: 7px;
  font-size: 12px;
  font-weight: 900;
  cursor: pointer;
}

.marketingStatusFilter.active {
  border-color: rgba(var(--status-rgb, 40, 119, 141), 0.42);
  background: rgba(var(--status-rgb, 40, 119, 141), 0.13);
  box-shadow: inset 0 0 0 1px rgba(var(--status-rgb, 40, 119, 141), 0.16);
}

.marketingStatusFilter .statusDot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgb(var(--status-rgb, 40, 119, 141));
  flex: 0 0 auto;
}

.marketingStatusFilter small {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  min-height: 20px;
  padding: 0 5px;
  border-radius: 999px;
  background: light-dark(rgba(255, 255, 255, 0.76), rgba(17, 24, 29, 0.76));
  color: light-dark(#475569, #b8c8df);
  font-size: 10px;
}

.marketingStatusResponsibleFilter {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  min-width: 0;
  min-height: 38px;
  padding: 0 28px 0 12px;
  border: 1px solid light-dark(rgba(40, 119, 141, 0.18), rgba(83, 158, 181, 0.18));
  border-radius: 8px;
  background: light-dark(rgba(255, 255, 255, 0.9), rgba(17, 24, 29, 0.9));
  color: light-dark(#0f172a, #e1eeff);
  cursor: pointer;
}

.marketingStatusResponsibleFilter span {
  min-width: 0;
  overflow: hidden;
  color: light-dark(#0f172a, #e1eeff);
  font-size: 12px;
  font-weight: 900;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.marketingStatusResponsibleFilter select {
  position: absolute;
  inset: 0;
  width: 100%;
  min-height: 100%;
  opacity: 0;
  cursor: pointer;
}

.marketingStatusResponsibleFilter::after {
  content: "";
  position: absolute;
  right: 11px;
  top: 50%;
  width: 7px;
  height: 7px;
  border: 0;
  border-right: 2px solid light-dark(#334155, #c7d8f1);
  border-bottom: 2px solid light-dark(#334155, #c7d8f1);
  pointer-events: none;
  transform: translateY(-65%) rotate(45deg);
}

.marketingStepForm {
  display: grid;
  gap: 14px;
}

.marketingFormStep {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
}

.marketingStepNumber {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 999px;
  border: 1px solid light-dark(rgba(40, 119, 141, 0.18), rgba(83, 158, 181, 0.18));
  background: light-dark(#ffffff, #11181d);
  color: light-dark(#28778d, #539eb5);
  font-size: 13px;
  font-weight: 950;
}

.marketingStepNumber.done {
  border-color: light-dark(rgba(22, 163, 74, 0.45), rgba(41, 174, 84, 0.45));
  background: light-dark(#16a34a, #29ae54);
  color: #ffffff;
}

.marketingStepFields {
  width: 100%;
  padding: 12px;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 8px;
  background: light-dark(rgba(248, 250, 252, 0.62), rgba(23, 29, 34, 0.62));
}

.marketingStatusSelectLine {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) minmax(160px, 220px);
  gap: 10px;
  align-items: center;
}

.marketingCampaignFormGrid.compactDates {
  grid-template-columns: minmax(0, 260px);
  justify-content: end;
}

.marketingDialogTitleLine,
.marketingCreatePreviewCard,
.marketingCompactDialogItem {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  min-width: 0;
}

.marketingDialogTitleLine > div,
.marketingCreatePreviewCard > div,
.marketingCompactDialogItem > span:last-child {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.marketingCreatePreviewCard {
  padding: 14px;
  border: 1px solid light-dark(rgba(40, 119, 141, 0.14), rgba(83, 158, 181, 0.14));
  border-radius: 8px;
  background: light-dark(rgba(248, 250, 252, 0.74), rgba(23, 29, 34, 0.74));
}

.marketingCompactDialogList {
  display: grid;
  gap: 8px;
}

.marketingCompactDialogItem {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid rgba(15, 23, 42, 0.09);
  border-radius: 8px;
  background: light-dark(#ffffff, #11181d);
  color: inherit;
  text-align: left;
  cursor: pointer;
}

.marketingEditorModes {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
  margin-bottom: 14px;
  padding: 4px;
  border: 1px solid rgba(15, 23, 42, 0.09);
  border-radius: 8px;
  background: light-dark(#f8fafc, #171d22);
}

.marketingEditorModeButton {
  min-height: 36px;
  border: 1px solid transparent;
  border-radius: 6px;
  background: transparent;
  color: light-dark(#475569, #b8c8df);
  font-weight: 900;
  cursor: pointer;
}

.marketingEditorModeButton:hover,
.marketingEditorModeButton:focus-visible {
  border-color: light-dark(rgba(40, 119, 141, 0.24), rgba(83, 158, 181, 0.24));
  background: light-dark(#ffffff, #11181d);
  color: var(--teal);
  outline: none;
}

.marketingEditorModeButton.active {
  border-color: rgba(255, 117, 31, 0.36);
  background: light-dark(#ffffff, #11181d);
  color: var(--orange-dark);
  box-shadow: var(--shadow-tight);
}

.marketingEditorSection {
  min-width: 0;
}

.marketingCampaignAsideList {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid rgba(15, 23, 42, 0.09);
}

.marketingCampaignValidationSection {
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid rgba(15, 23, 42, 0.08);
}

.marketingCampaignValidationList {
  gap: 10px;
  margin-top: 10px;
}

.marketingFileInput {
  display: grid;
  gap: 6px;
  color: light-dark(#64748b, #9aabc4);
  font-size: 12px;
  font-weight: 700;
  min-width: 0;
}

.marketingFileActions {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.marketingHiddenFileInput {
  display: none;
}

.marketingFileSummary {
  display: block;
  flex: 1 1 160px;
  min-width: 0;
  color: light-dark(#64748b, #9aabc4);
  font-size: 12px;
  line-height: 1.35;
}

.marketingAttachmentList {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
  gap: 8px;
  margin-top: 12px;
}

.marketingAttachmentChip {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  min-width: 0;
  min-height: 116px;
  padding: 10px;
  border: 1px solid rgba(15, 23, 42, 0.1);
  border-radius: 8px;
  background: light-dark(#f8fafc, #171d22);
}

.marketingAttachmentChip.hasFinalUrl {
  grid-template-columns: 96px minmax(0, 1fr) auto;
}

.marketingAttachmentPreview {
  width: 96px;
  height: 96px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border: 1px solid rgba(15, 23, 42, 0.12);
  border-radius: 8px;
  background: light-dark(#020617, #e1efff);
  color: light-dark(#475569, #b8c8df);
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}

.marketingAttachmentPreview img,
.marketingAttachmentPreview video {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
}

.marketingAttachmentPreview video {
  background: light-dark(#020617, #e1efff);
}

.marketingAttachmentInfo {
  min-width: 0;
  font-weight: 800;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.marketingAttachmentActions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
}

.marketingAttachmentChip small {
  display: block;
  margin-top: 2px;
  color: light-dark(#64748b, #9aabc4);
  font-size: 11px;
  font-weight: 700;
}

.marketingAttachmentChip input {
  grid-column: 1 / -1;
  min-width: 0;
}

.marketingLinkRow {
  display: grid;
  grid-template-columns: minmax(120px, 0.7fr) minmax(180px, 1fr) auto;
  gap: 8px;
  margin-top: 12px;
}

.marketingLinkActions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.marketingLinkHelp {
  grid-column: 1 / -1;
  color: light-dark(#334155, #c7d8f1);
  font-weight: 800;
}

.marketingList {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.marketingListItem {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 12px;
  border: 1px solid rgba(15, 23, 42, 0.1);
  border-radius: 8px;
  background: light-dark(#ffffff, #11181d);
}

.marketingListItem.compact {
  padding: 10px;
}

.marketingListItem.compact p {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.marketingListItem strong,
.marketingListItem small {
  display: block;
}

.marketingListItem small {
  margin-top: 2px;
  color: light-dark(#64748b, #9aabc4);
  font-size: 12px;
  font-weight: 700;
}

.marketingListItem p {
  margin: 8px 0 0;
  color: light-dark(#475569, #b8c8df);
}

.marketingStatus {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  padding: 4px 8px;
  border-radius: 999px;
  background: light-dark(#e2e8f0, #293036);
  color: light-dark(#334155, #c7d8f1);
  font-size: 12px;
  font-weight: 900;
  white-space: nowrap;
}

.marketingStatusAprovado,
.marketingStatusPostado {
  background: light-dark(rgba(22, 163, 74, 0.12), rgba(41, 174, 84, 0.12));
  color: light-dark(#166534, #5ca570);
}

.marketingStatusEmrevisao {
  background: rgba(245, 158, 11, 0.15);
  color: light-dark(#8a4b00, #c48046);
}

.marketingStatusCancelado {
  background: light-dark(rgba(220, 38, 38, 0.12), rgba(250, 73, 65, 0.12));
  color: light-dark(#991b1b, #e4645a);
}

.marketingValidationList {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 12px;
}

.marketingValidationHelp {
  color: light-dark(#334155, #c7d8f1);
  font-weight: 800;
}

.marketingClosingWorkspace {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 380px);
  gap: 16px;
  align-items: start;
}

.marketingClosingEditor,
.marketingClosingSummary {
  min-width: 0;
}

.marketingValidationItem {
  display: grid;
  grid-template-columns: 172px minmax(180px, 0.55fr) minmax(240px, 1fr) auto;
  gap: 12px;
  align-items: end;
  padding: 14px;
  border: 1px solid rgba(15, 23, 42, 0.1);
  border-radius: 8px;
  background: light-dark(#ffffff, #11181d);
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.04);
}

.marketingValidationItem.positive {
  border-left: 4px solid light-dark(#16a34a, #29ae54);
}

.marketingValidationItem.negative {
  border-left: 4px solid light-dark(#dc2626, #fa4941);
}

.marketingOutcomeToggle {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
  min-height: 42px;
  padding: 4px;
  border: 1px solid rgba(15, 23, 42, 0.12);
  border-radius: 8px;
  background: light-dark(#f8fafc, #171d22);
}

.marketingOutcomeButton {
  min-height: 34px;
  padding: 6px 8px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: light-dark(#64748b, #9aabc4);
  font-size: 12px;
  font-weight: 900;
  cursor: pointer;
}

.marketingOutcomeButton.active.positive {
  background: light-dark(rgba(22, 163, 74, 0.14), rgba(41, 174, 84, 0.14));
  color: light-dark(#166534, #5ca570);
}

.marketingOutcomeButton.active.negative {
  background: light-dark(rgba(220, 38, 38, 0.12), rgba(250, 73, 65, 0.12));
  color: light-dark(#991b1b, #e4645a);
}

.marketingOutcomeButton:disabled {
  cursor: not-allowed;
  opacity: 0.72;
}

.marketingValidationField {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 6px;
}

.marketingValidationField span {
  color: light-dark(#64748b, #9aabc4);
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
}

.marketingValidationField input,
.marketingValidationField textarea {
  width: 100%;
}

.marketingHistorySummaryList {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 12px;
}

.marketingHistorySummaryItem {
  display: flex;
  padding: 12px;
  border: 1px solid rgba(15, 23, 42, 0.1);
  border-radius: 8px;
  background: light-dark(#ffffff, #11181d);
  flex-direction: column;
  gap: 6px;
}

.marketingHistorySummaryItem.positive {
  background: linear-gradient(90deg, light-dark(rgba(22, 163, 74, 0.08), rgba(41, 174, 84, 0.08)), light-dark(#ffffff, #11181d) 46%);
}

.marketingHistorySummaryItem.negative {
  background: linear-gradient(90deg, light-dark(rgba(220, 38, 38, 0.07), rgba(250, 73, 65, 0.07)), light-dark(#ffffff, #11181d) 46%);
}

.marketingHistorySummaryItem strong {
  color: light-dark(#0f172a, #e1eeff);
  font-size: 14px;
}

.marketingHistorySummaryItem p {
  margin: 0;
  color: light-dark(#64748b, #9aabc4);
  font-size: 13px;
  line-height: 1.45;
}

.marketingHistoryBadge {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  min-height: 24px;
  padding: 3px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}

.marketingHistoryBadge.positive {
  background: light-dark(rgba(22, 163, 74, 0.14), rgba(41, 174, 84, 0.14));
  color: light-dark(#166534, #5ca570);
}

.marketingHistoryBadge.negative {
  background: light-dark(rgba(220, 38, 38, 0.12), rgba(250, 73, 65, 0.12));
  color: light-dark(#991b1b, #e4645a);
}

.marketingValidationItem textarea {
  min-height: 58px;
  resize: vertical;
}

.marketingEditorCard .marketingCampaignFormGrid {
  grid-template-columns: minmax(0, 1.45fr) minmax(220px, 0.55fr);
}

.marketingValidationItem.marketingCampaignValidationItem {
  grid-template-columns: minmax(0, 1fr);
  align-items: stretch;
  padding: 12px;
  border-color: light-dark(rgba(40, 119, 141, 0.14), rgba(83, 158, 181, 0.14));
  background: linear-gradient(180deg, light-dark(#ffffff, #11181d), light-dark(#fbfaf8, #161d22));
  box-shadow: none;
}

.marketingValidationItem.marketingCampaignValidationItem .marketingValidationField {
  gap: 7px;
}

.marketingValidationItem.marketingCampaignValidationItem textarea {
  min-height: 48px;
}

.marketingValidationItem.marketingCampaignValidationItem > span {
  align-self: end;
  justify-self: end;
}

.marketingPanel table td strong,
.marketingPanel table td small {
  display: block;
}

.marketingPanel table td small {
  margin-top: 3px;
  color: light-dark(#64748b, #9aabc4);
  font-size: 12px;
}

@media (max-width: 1180px) {
  .marketingWorkspace {
    grid-template-columns: 1fr;
  }

  .marketingClosingWorkspace {
    grid-template-columns: 1fr;
  }

  .marketingYearCalendar {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .marketingCampaignCalendarLayout .marketingYearCalendar {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .marketingEditorRail {
    position: static;
  }

  .marketingKpis.financeKpis {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .marketingPanel .panelHeader {
    gap: 14px;
  }

  .marketingPanel .panelActions.marketingMonthControls {
    width: 100%;
    flex-direction: row;
    justify-content: flex-start;
  }

  .marketingPanel .marketingMonthControls > span {
    flex: 0 0 auto;
    width: auto;
  }

  .marketingPanel .marketingMonthControls .MuiIconButton-root {
    flex: 0 0 36px;
    width: 36px;
    min-width: 36px;
    max-width: 36px;
    height: 36px;
    min-height: 36px;
  }

  .marketingCalendar,
  .marketingYearCalendar {
    grid-template-columns: 1fr;
  }

  .marketingCampaignCalendarLayout .marketingYearCalendar {
    grid-template-columns: 1fr;
  }

  .marketingManagementBudgetGrid,
  .marketingExpenseRow {
    grid-template-columns: minmax(0, 1fr);
  }

  .marketingExpenseRow {
    align-items: stretch;
  }

  .marketingPostCalendarHeader {
    align-items: flex-start;
    flex-direction: column;
  }

  .marketingPostCalendarHeader .profileActionCell {
    justify-content: flex-start;
  }

  .marketingPostCalendarCard::after {
    width: 180px;
    height: 180px;
    opacity: 0.04;
  }

  .marketingPostCalendarCardInner {
    gap: 12px;
  }

  .marketingWeekDay,
  .marketingDay.empty {
    display: none;
  }

  .marketingDay {
    min-height: 112px;
  }

  .marketingPostCalendarCard .marketingDay {
    min-height: 220px;
    height: 220px;
    padding: 10px;
  }

  .marketingMonthTile {
    min-height: 220px;
    height: 220px;
  }

  .marketingFormStep,
  .marketingStatusSelectLine,
  .marketingCampaignFormGrid.compactDates {
    grid-template-columns: 1fr;
  }

  .marketingStatusFilterRow {
    grid-template-columns: 1fr 1fr;
  }

  .marketingEditorCard .userFormGrid,
  .marketingPostPlanningBar,
  .marketingPostPhaseGrid,
  .marketingPostModeRow,
  .marketingPostInlineGrid,
  .marketingReferenceGrid,
  .marketingScriptGrid,
  .marketingCarouselSlides,
  .marketingCreativeReviewGrid,
  .marketingCreativeReviewItem,
  .marketingSupportStrip,
  .marketingLinkInputs,
  .marketingCampaignDialogCard,
  .marketingPostDialogCard,
  .marketingPostDialogHeader,
  .marketingPostDialogMeta,
  .marketingPostDialogTextGrid,
  .marketingPostCommentForm,
  .marketingLinkRow,
  .marketingAttachmentChip,
  .marketingAttachmentChip.hasFinalUrl,
  .marketingValidationItem {
    grid-template-columns: 1fr;
  }

  .marketingFileActions {
    align-items: flex-start;
    flex-wrap: wrap;
  }

  .marketingPostModeRow {
    justify-content: stretch;
  }

  .marketingPostModeRow .marketingCalendarModeSwitch {
    width: 100%;
    min-width: 0;
  }

  .marketingPostModeRow .marketingCalendarModeSwitch button {
    flex: 1 1 0;
    min-width: 0;
    padding: 0 8px;
    white-space: normal;
  }

  .marketingFileSummary {
    flex-basis: 100%;
  }

  .marketingAttachmentPreview {
    width: 88px;
    height: 88px;
  }

  .marketingPostDialogMediaGrid {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 170px), 170px));
  }

  .marketingPostDialogMedia {
    max-width: 170px;
  }

  .marketingPostDialogMedia .marketingAttachmentPreview {
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
  }

  .marketingAttachmentActions {
    justify-content: flex-start;
  }

  .marketingPostDialogMediaActions {
    justify-content: flex-start;
  }

  .marketingPostCommentForm > button {
    width: 100%;
  }

  .marketingAttachmentChip.hasFinalUrl input {
    width: 100%;
  }

  .marketingSlideCard.featuredSlide {
    grid-column: auto;
  }

  .marketingPostPanelTitle,
  .marketingPostSupportHeader,
  .marketingBriefingTemplateHeader,
  .marketingCreativeReviewGroupTitle {
    display: grid;
  }

  .marketingPostPanelTitle small,
  .marketingBriefingTemplateHeader small,
  .marketingCreativeReviewGroupTitle small {
    max-width: none;
    text-align: left;
  }

  .marketingLinkActions {
    justify-content: flex-start;
  }

  .marketingOutcomeToggle {
    max-width: 260px;
  }

  .marketingValidationItem {
    align-items: stretch;
  }

  .marketingKpis.financeKpis {
    grid-template-columns: 1fr;
  }

  .marketingListItem {
    flex-direction: column;
  }
}

* {
  box-sizing: border-box;
}

[hidden] {
  display: none;
}

html,
body {
  max-width: 100%;
  overflow-x: hidden;
}

body {
  margin: 0;
  background: linear-gradient(180deg, light-dark(#fff8f3, #171e23) 0, var(--bg) 18rem);
  color: var(--ink);
  font-family: "Segoe UI", Arial, Helvetica, sans-serif;
  font-size: 14px;
  text-rendering: optimizeLegibility;
}

body.sessionLoading .sidebar,
body.sessionLoading .workspace {
  visibility: hidden;
}

body.sessionLoading .topbarUser,
body.sessionLoading .topbarAuthActions {
  display: none;
}

:where(.shell){
  width: min(1680px, calc(100% - 32px));
  margin: 0 auto;
  padding: 18px 0 40px;
}
:where(.appLayout)){
  display: grid;
  grid-template-columns: 250px minmax(0, 1fr);
  gap: 16px;
  align-items: start;
}
:where(.sidebar)){
  position: sticky;
  top: 14px;
  display: grid;
  gap: 12px;
  min-width: 0;
  padding: 12px;
  border: 1px solid rgba(255, 117, 31, 0.24);
  border-radius: 12px;
  background: light-dark(rgba(255, 255, 255, 0.92), rgba(17, 24, 29, 0.92));
  box-shadow: 0 8px 22px rgba(24, 34, 43, 0.06);
}
:where(.sidebarBlock)){
  display: grid;
  gap: 7px;
}
:where(.sidebarTitle)){
  margin: 0 0 2px;
  color: var(--orange-dark);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
}

:where(.navItem){
  width: 100%;
  justify-content: flex-start;
  min-height: 36px;
  padding: 0 10px;
  border-color: transparent;
  background: light-dark(#fff, #11181d);
  color: var(--ink);
  text-align: left;
}

:where(.navItem:hover),
:where(.navItem.active){
  border-color: rgba(255, 117, 31, 0.34);
  background: var(--soft-orange);
  color: var(--orange-dark);
}

:where(.navGroup){
  display: grid;
  gap: 6px;
}
:where(.navChildren)){
  display: none;
  gap: 6px;
  margin: -2px 0 2px 14px;
  padding-left: 10px;
  border-left: 2px solid rgba(255, 117, 31, 0.24);
}

:where(.navGroup:hover .navChildren),
:where(.navGroup:focus-within .navChildren),
:where(.navGroup:has(.navSubItem.active) .navChildren){
  display: grid;
}

:where(.navGroup:has(.navSubItem.active) > .navItem){
  border-color: rgba(255, 117, 31, 0.34);
  background: var(--soft-orange);
  color: var(--orange-dark);
}

:where(.navSubItem){
  min-height: 34px;
  height: auto;
  padding: 7px 10px;
  font-size: 13px;
  line-height: 1.2;
  color: var(--muted);
}

:where(.workspace){
  min-width: 0;
}

.appView {
  display: none;
}

.appView.active {
  display: block;
}
:where(.topbar)){
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 86px;
  padding: 12px 14px;
  margin-bottom: 14px;
  border: 1px solid rgba(255, 117, 31, 0.18);
  border-radius: 12px;
  background: light-dark(rgba(255, 255, 255, 0.94), rgba(17, 24, 29, 0.94));
  box-shadow: 0 8px 22px rgba(24, 34, 43, 0.06);
}

:where(.brand){
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

:where(.brandMark){
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 58px;
  height: 58px;
  overflow: hidden;
  border-radius: 10px;
  border: 1px solid rgba(255, 117, 31, 0.18);
  background: light-dark(#fff, #11181d);
}

:where(.brandMark img){
  width: 46px;
  height: 46px;
  object-fit: contain;
  display: block;
}

:where(.brandText){
  min-width: 0;
}

.brandSignature {
  margin: 4px 0 0;
  color: var(--teal);
  font-family: "Trebuchet MS", "Segoe UI", Arial, sans-serif;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.2;
}

.eyebrow {
  margin: 0 0 3px;
  color: var(--orange-dark);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
}

h1,
h2,
h3 {
  margin: 0;
}

h1 {
  font-size: 26px;
  line-height: 1.1;
}

h2 {
  font-size: 18px;
}

h3 {
  margin-bottom: 10px;
  font-size: 14px;
}

:where(.topbarMeta){
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
  flex: 0 0 auto;
}

:where(.topbarMeta span){
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 0 11px;
  border: 1px solid rgba(255, 117, 31, 0.18);
  border-radius: 999px;
  background: light-dark(#fff8f3, #171e23);
  color: var(--orange-dark);
  font-size: 12px;
  font-weight: 700;
}

:where(.topbarMeta .topbarUser){
  border-color: light-dark(rgba(36, 120, 145, 0.22), rgba(79, 158, 184, 0.22));
  background: light-dark(#f3fbfd, #171e23);
  color: var(--teal);
}

.topbarAuthActions {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.topbarAuthActions button,
.topbarAuthActions a {
  min-height: 30px;
  padding: 0 10px;
  border-radius: 999px;
  border-color: light-dark(rgba(36, 120, 145, 0.18), rgba(79, 158, 184, 0.18));
  background: light-dark(#fff, #11181d);
  color: var(--teal);
  font-size: 12px;
  font-weight: 700;
  text-decoration: none;
}

.topbarAuthActions button:last-child,
.topbarAuthActions a:last-child {
  border-color: rgba(255, 117, 31, 0.22);
  color: var(--orange-dark);
}

:where(.sectionHint){
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 13px;
}

input,
button,
select {
  min-height: 38px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: light-dark(#fff, #11181d);
  color: var(--ink);
  font: inherit;
}

input,
select {
  padding: 0 10px;
}

input {
  width: 100%;
  min-width: 0;
}

label {
  display: grid;
  gap: 6px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

button {
  padding: 0 13px;
  background: var(--teal);
  color: #fff;
  border-color: var(--teal);
  cursor: pointer;
  font-weight: 700;
}

button:hover {
  background: light-dark(#1f6578, #5b9db1);
}
:where(.panel)){
  min-width: 0;
  padding: 16px;
  margin-bottom: 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--panel);
  box-shadow: 0 8px 22px rgba(24, 34, 43, 0.06);
}

.moduleGrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.moduleCard {
  min-height: 110px;
  padding: 13px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: light-dark(#fff, #11181d);
}

.moduleCard.span2,
.moduleGrid > .span2 {
  grid-column: span 2;
}

.moduleCard p {
  margin: 8px 0 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.35;
}

.moduleCard .miniAction {
  margin-top: 12px;
}

.compactAuditKpis.financeKpis {
  grid-template-columns: repeat(auto-fit, minmax(145px, 1fr));
  gap: 8px;
  margin: 12px 0;
}

.compactAuditKpis .kpi {
  min-height: 74px;
  padding: 11px 12px;
}

.compactAuditKpis .kpi strong {
  margin-top: 7px;
  font-size: 18px;
}

.compactTableWrap {
  max-height: 320px;
}

.auditCard {
  min-height: 92px;
}

.auditCard.warning {
  border-color: rgba(255, 117, 31, 0.34);
  background: light-dark(#fff8f3, #171e23);
}

.auditCard.ok {
  border-color: light-dark(rgba(20, 122, 83, 0.24), rgba(76, 167, 125, 0.24));
  background: light-dark(#f7fcfa, #161d22);
}

.auditCard h3 {
  margin: 0;
  color: var(--ink);
}

.auditTable tr.warning td:first-child {
  color: var(--orange-dark);
  font-weight: 800;
}

.auditTable tr.ok td:first-child {
  color: var(--green);
  font-weight: 800;
}

.observationSheet {
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-width: 0;
  max-height: 260px;
  overflow: auto;
  font-size: 12px;
  line-height: 1.25;
}

.observationSheet div {
  display: block;
  padding: 0 0 5px;
  border-bottom: 1px solid light-dark(rgba(226, 222, 216, 0.58), rgba(50, 58, 63, 0.58));
}

.observationSheet div:last-child {
  border-bottom: 0;
}

.observationSheet span {
  display: block;
  color: var(--muted);
  font-weight: 700;
  font-size: 11px;
  line-height: 1.1;
  text-transform: none;
}

.observationSheet strong {
  display: block;
  color: var(--ink);
  font-weight: 500;
  overflow-wrap: anywhere;
}

.traceHover {
  position: relative;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  min-width: 30px;
  min-height: 30px;
  outline: none;
}

.traceMarker {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border: 1px solid light-dark(rgba(36, 120, 143, 0.32), rgba(79, 158, 182, 0.32));
  border-radius: 999px;
  background: light-dark(#f4fbfd, #171e23);
  color: var(--teal);
  font-size: 13px;
  font-weight: 800;
  line-height: 1;
  cursor: default;
}

.tracePopover {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 40;
  display: none;
  width: min(420px, calc(100vw - 48px));
  max-height: 320px;
  padding: 12px;
  border: 1px solid light-dark(rgba(36, 120, 143, 0.22), rgba(79, 158, 182, 0.22));
  border-radius: 8px;
  background: light-dark(#fff, #11181d);
  box-shadow: 0 18px 36px rgba(23, 42, 52, 0.18);
  text-align: left;
}

.traceHover:hover .tracePopover,
.traceHover:focus .tracePopover,
.traceHover:focus-within .tracePopover {
  display: block;
}

.traceHover:hover .traceMarker,
.traceHover:focus .traceMarker,
.traceHover:focus-within .traceMarker {
  border-color: var(--teal);
  background: light-dark(#eaf7fa, #1c2328);
}

.mutedCell {
  color: var(--muted);
  font-size: 12px;
}

.moduleActions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 12px;
}

.moduleActions button {
  min-height: 34px;
}

.syncPanel {
  border-top: 4px solid var(--orange);
}

.drePanel {
  border-top: 4px solid var(--teal);
}

.dreTop {
  display: grid;
  gap: 12px;
  margin-bottom: 14px;
  padding: 14px;
  border: 1px solid light-dark(rgba(40, 119, 141, 0.16), rgba(83, 158, 181, 0.16));
  border-radius: 10px;
  background: linear-gradient(180deg, light-dark(#fff, #11181d), light-dark(#f8fcfd, #151c21));
}

.dreHeader {
  margin-bottom: 0;
}

.dreHeader .eyebrow {
  margin-bottom: 5px;
}

.dreHeader h2 {
  font-size: 24px;
}

.dreHeader .sectionHint {
  max-width: 620px;
}

.dreHeader .panelActions button {
  min-height: 40px;
}

.dreFilterShell {
  margin-bottom: 0;
}

.dreFilterShell .filterSummary {
  padding: 8px 10px;
}

.dreFilterShell .filterSummary > div {
  min-width: 0;
}

.dreMetricGroups {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
  gap: 12px;
  margin-bottom: 14px;
}

.metricGroup {
  min-width: 0;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: light-dark(#fff, #11181d);
}

.metricGroupMain {
  grid-column: 1 / -1;
}

.metricGroup h3 {
  margin-bottom: 10px;
  color: var(--orange-dark);
  font-size: 11px;
  text-transform: uppercase;
}

.dreMetricGroups .olistDreKpis,
.dreMetricGroups .qualityKpis,
.dreMetricGroups .financeKpis {
  margin-bottom: 0;
}

.dreMetricGroups .kpi {
  min-height: 94px;
  padding: 13px 14px;
  border-radius: 8px;
}

.dreMetricGroups .kpi strong {
  font-size: 20px;
}

:where(.panelHeader){
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}

.panelActions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.subpanelTitleRow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 4px;
}

.subpanelTitleRow h3 {
  margin: 0;
}

.olistBox {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) minmax(180px, 1fr);
  gap: 12px;
}

:where(.filterShell){
  position: relative;
  margin-bottom: 14px;
}
:where(.filterSummary)){
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 48px;
  padding: 8px 10px;
  border: 1px solid light-dark(rgba(40, 119, 141, 0.14), rgba(83, 158, 181, 0.14));
  border-radius: 9px;
  background: light-dark(#fff, #11181d);
}
:where(.filterSummary > div)){
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  flex-wrap: wrap;
}
:where(.filterSummary span)),
.filterLabel {
  display: block;
  margin: 0;
  color: var(--muted);
  font-size: 11px;
}
:where(.filterSummary strong)){
  display: block;
  margin-top: 0;
  color: var(--ink);
  font-size: 15px;
  line-height: 1.15;
}
:where(.filterSummary small)){
  display: block;
  margin-top: 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.2;
}
:where(.filterSummary button)){
  min-height: 34px;
  padding: 0 12px;
  border-radius: 8px;
  background: light-dark(#fff, #11181d);
  border-color: light-dark(rgba(40, 119, 141, 0.26), rgba(83, 158, 181, 0.26));
  color: var(--teal);
}
:where(.filterSummary button:hover)){
  background: light-dark(#f7fbfc, #161d22);
}

:where(.tinyFilter){
  position: absolute;
  z-index: 10;
  top: calc(100% + 8px);
  right: 0;
  left: auto;
  width: min(430px, 100%);
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: light-dark(#fff, #11181d);
  box-shadow: 0 18px 38px rgba(24, 34, 43, 0.16);
}

.filterTabs,
:where(.filterChips),
.filterActions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.filterTabs {
  margin-bottom: 14px;
  border-bottom: 1px solid var(--line);
}

.filterTab {
  min-height: 32px;
  padding: 0 6px 8px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--muted);
}

.filterTab.active {
  color: var(--ink);
  border-bottom: 2px solid var(--ink);
}

:where(.filterChips){
  margin: 8px 0 14px;
}

:where(.filterChips button){
  min-height: 32px;
  padding: 0 12px;
  border-radius: 999px;
  background: light-dark(#fff, #11181d);
  border-color: var(--line);
  color: var(--ink);
}

:where(.filterChips button.active){
  border-color: #a8c3ff;
  color: light-dark(#0b55ff, #3581ff);
}

.filterDateNav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 42px;
  padding: 0 8px;
  margin-bottom: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
}

.filterDateNav button {
  width: 32px;
  min-height: 32px;
  padding: 0;
  border-radius: 999px;
  background: light-dark(#fff, #11181d);
  border-color: var(--line);
  color: var(--muted);
  font-size: 22px;
}

.filterMonthPicker {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 6px;
  margin: -2px 0 12px;
}

.filterMonthPicker button {
  min-height: 30px;
  padding: 0;
  border-radius: 999px;
  background: light-dark(#fff, #11181d);
  border-color: var(--line);
  color: var(--ink);
}

.filterMonthPicker button.active {
  border-color: var(--teal);
  background: var(--teal);
  color: #fff;
}

.filterRange {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-bottom: 14px;
}

.filterActions button:first-child {
  min-width: 88px;
  border-radius: 999px;
  background: light-dark(#0b55ff, #3581ff);
  border-color: light-dark(#0b55ff, #3581ff);
}

.ghostButton {
  background: transparent;
  border-color: transparent;
  color: var(--ink);
}

.olistBox label:nth-child(3),
.olistActions,
.statusGrid {
  grid-column: 1 / -1;
}

.olistActions {
  display: flex;
  align-items: end;
  gap: 8px;
  flex-wrap: wrap;
}

.compactSyncLine {
  display: grid;
  grid-template-columns: repeat(2, minmax(130px, 1fr));
  gap: 8px;
  margin-top: 12px;
}

.compactSyncLine button {
  grid-column: 1 / -1;
}

.syncLine label {
  width: 160px;
}

.compactSyncLine label {
  width: auto;
}

.bankStatementGrid {
  margin-bottom: 14px;
}

.bankChecklistCard {
  min-width: min(100%, 320px);
}

.bankChecklist {
  display: grid;
  gap: 10px;
  margin-top: 12px;
}

.bankChecklistSummary {
  align-items: center;
  display: flex;
  gap: 10px;
  justify-content: space-between;
  padding: 8px 10px;
  border: 1px solid light-dark(rgba(40, 119, 141, 0.16), rgba(83, 158, 181, 0.16));
  border-radius: 8px;
  background: light-dark(#f7fbfc, #161d22);
}

.bankChecklistSummary strong {
  color: var(--teal);
  font-size: 13px;
}

.bankChecklistSummary span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.bankChecklistList {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 8px;
}

.bankCheckItem {
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 8px;
  cursor: pointer;
  display: grid;
  gap: 2px 8px;
  grid-template-columns: auto 1fr;
  padding: 9px 10px;
  background: light-dark(#fff, #11181d);
}

.bankCheckItem input {
  grid-row: 1 / span 2;
  height: 16px;
  margin: 0;
  width: 16px;
}

.bankCheckItem span {
  color: var(--ink);
  font-weight: 800;
  line-height: 1.1;
}

.bankCheckItem small {
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
}

.bankCheckItem.checked {
  border-color: light-dark(rgba(0, 128, 89, 0.26), rgba(66, 168, 126, 0.26));
  background: light-dark(#f4fbf8, #171e23);
}

.bankCheckItem.uploaded {
  cursor: default;
}

.bankCheckItem.pending {
  background: light-dark(#fffaf6, #151c21);
}

.bankUploadForm {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 12px;
}

.bankUploadForm .fileInputLabel,
.bankUploadForm button {
  grid-column: 1 / -1;
}

.fileInputLabel input {
  padding: 10px;
  border: 1px dashed light-dark(rgba(40, 119, 141, 0.36), rgba(83, 158, 181, 0.36));
  background: light-dark(#f7fbfc, #161d22);
}

.statusGrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 8px;
}

.statusStack {
  display: grid;
  gap: 8px;
  margin-top: 10px;
}

:where(.note){
  margin: 0;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: light-dark(#fbfaf8, #161d22);
  color: var(--muted);
  font-size: 13px;
}

.suggestionCard {
  border-color: light-dark(rgba(40, 119, 141, 0.18), rgba(83, 158, 181, 0.18));
  background: linear-gradient(180deg, light-dark(#fff, #11181d), light-dark(#f7fbfc, #161d22));
}

.autoStatusCard,
.autoSuggestionBoard {
  grid-column: 1 / -1;
}

.autoSuggestionBoard {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(245px, 1fr));
  gap: 10px;
}

.autoSuggestionCard {
  min-height: 124px;
  padding: 13px;
  border: 1px solid light-dark(rgba(40, 119, 141, 0.18), rgba(83, 158, 181, 0.18));
  border-radius: 8px;
  background: light-dark(#fff, #11181d);
}

.autoSuggestionCard.new {
  border-color: rgba(255, 116, 31, 0.38);
  background: light-dark(#fff8f3, #171e23);
}

.autoSuggestionCard.resolved {
  border-color: light-dark(rgba(0, 126, 76, 0.28), rgba(68, 169, 116, 0.28));
  background: light-dark(#f4fbf7, #171e23);
}

.autoSuggestionCard span {
  display: inline-flex;
  margin-bottom: 8px;
  padding: 4px 8px;
  border-radius: 999px;
  background: light-dark(rgba(40, 119, 141, 0.08), rgba(83, 158, 181, 0.08));
  color: var(--teal);
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
}

.autoSuggestionCard.new span {
  background: rgba(255, 116, 31, 0.12);
  color: var(--orange-dark);
}

.autoSuggestionCard.resolved span {
  background: light-dark(rgba(0, 126, 76, 0.12), rgba(68, 169, 116, 0.12));
  color: var(--green);
}

.autoSuggestionCard strong {
  display: block;
  margin-bottom: 6px;
  color: var(--ink);
  font-size: 14px;
}

.autoSuggestionCard p {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
}

:where(.miniNote){
  margin: -4px 0 10px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
}

:where(.olistDreKpis){
  display: grid;
  grid-template-columns: repeat(5, minmax(165px, 1fr));
  gap: 10px;
  margin-bottom: 14px;
}

:where(.financeKpis){
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(185px, 1fr));
  gap: 10px;
  margin-bottom: 14px;
}

.commissionHeader {
  display: grid;
  grid-template-columns: minmax(230px, 0.7fr) minmax(0, 1.8fr);
  gap: 14px;
  align-items: start;
  margin-bottom: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line);
}

.sellerCommissionSummary {
  margin-bottom: 12px;
}

.sellerCommissionSummary .commissionHeader {
  display: block;
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: 0;
}

.sellerCommissionSummary .commissionHeaderKpis.financeKpis {
  grid-template-columns: repeat(auto-fit, minmax(168px, 1fr));
}

.sellerCommissionSummary .commissionHeaderKpis .kpi strong {
  font-size: clamp(14px, 0.95vw, 18px);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sellerCommissionProgress {
  margin-top: 10px;
  padding: 12px 14px;
  border: 1px solid light-dark(rgba(39, 119, 141, 0.16), rgba(82, 158, 181, 0.16));
  border-radius: 8px;
  background: light-dark(#f8fcfd, #151c21);
}

.commissionProgressHeader,
.commissionNextLevel {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  color: var(--muted);
  font-size: 12px;
}

.commissionProgressHeader strong,
.commissionNextLevel strong {
  color: var(--ink);
  font-size: 13px;
}

.commissionProgressBar {
  height: 9px;
  margin: 10px 0;
  overflow: hidden;
  border-radius: 999px;
  background: light-dark(rgba(39, 119, 141, 0.12), rgba(82, 158, 181, 0.12));
}

.commissionProgressBar span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--teal), var(--orange));
}

.commissionIntro h3 {
  margin-bottom: 4px;
}

.commissionIntro .miniNote {
  margin: 0;
  max-width: 520px;
}

.commissionHeaderKpis.financeKpis {
  grid-template-columns: repeat(auto-fit, minmax(128px, 1fr));
  gap: 8px;
  margin-bottom: 0;
}

.commissionHeaderKpis .kpi {
  min-height: 64px;
  padding: 9px 10px;
  border-radius: 8px;
}

.commissionHeaderKpis .kpi span {
  font-size: 11px;
  line-height: 1.2;
}

.commissionHeaderKpis .kpi strong {
  margin-top: 8px;
  font-size: clamp(16px, 1.15vw, 20px);
  line-height: 1.05;
}

:where(.sellerCommissionPage.active){
  gap: 12px;
}

:where(.sellerCommissionPage .sellerCommissionSummary){
  overflow: hidden;
  border-color: light-dark(rgba(40, 119, 141, 0.32), rgba(83, 158, 181, 0.32));
  background:
    linear-gradient(135deg, light-dark(rgba(10, 36, 48, 0.97), rgba(209, 239, 255, 0.97)), light-dark(rgba(17, 55, 64, 0.96), rgba(192, 233, 244, 0.96))),
    radial-gradient(circle at top right, rgba(255, 117, 31, 0.18), transparent 26rem);
  color: light-dark(#edf8fb, #1b2227);
  box-shadow: 0 18px 34px rgba(24, 34, 43, 0.12);
}

:where(.sellerCommissionPage .sellerCommissionSummary .commissionHeaderKpis.financeKpis){
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.commissionHeroCard {
  display: grid;
  align-content: space-between;
  gap: 9px;
  min-height: 116px;
  padding: 15px;
  border: 1px solid light-dark(rgba(237, 248, 251, 0.16), rgba(27, 34, 39, 0.16));
  border-radius: 10px;
  background: light-dark(rgba(255, 255, 255, 0.07), rgba(17, 24, 29, 0.07));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.commissionHeroCard span,
.commissionHeroCard small {
  color: light-dark(rgba(237, 248, 251, 0.76), rgba(27, 34, 39, 0.76));
  line-height: 1.25;
}

.commissionHeroCard span {
  font-size: 12px;
  font-weight: 700;
}

.commissionHeroCard strong {
  color: #ffffff;
  font-size: clamp(17px, 1.25vw, 23px);
  line-height: 1.08;
  overflow-wrap: anywhere;
}

.commissionHeroCard small {
  min-height: 28px;
  font-size: 11px;
}

.commissionHeroCard.primary,
.commissionHeroCard.positive,
.commissionHeroCard.info {
  border-color: light-dark(rgba(119, 217, 235, 0.28), rgba(0, 53, 63, 0.28));
}

.commissionHeroCard.primary strong,
.commissionHeroCard.positive strong,
.commissionHeroCard.info strong {
  color: light-dark(#8be4f4, #00353e);
}

.commissionHeroCard.negative,
.commissionHeroCard.warning,
.commissionHeroCard.action {
  border-color: rgba(255, 117, 31, 0.42);
  background: rgba(255, 117, 31, 0.10);
}

.commissionHeroCard.negative strong,
.commissionHeroCard.warning strong,
.commissionHeroCard.action strong {
  color: light-dark(#ffb27d, #44250c);
}

.commissionHeroCard.diamond strong {
  color: light-dark(#b9f4ff, #0c353b);
}

.commissionHeroCard.gold strong {
  color: light-dark(#ffd36f, #e9be59);
}

.commissionHeroCard.silver strong {
  color: light-dark(#d7e2ea, #31383d);
}

.commissionHeroCard.bronze strong {
  color: light-dark(#ffb27d, #44250c);
}

.commissionHeroCard.locked strong {
  color: #ff8b75;
}

:where(.sellerCommissionPage .sellerCommissionProgress){
  margin-top: 14px;
  padding: 0;
  border: 0;
  background: transparent;
}

.commissionProgressPanel {
  display: grid;
  gap: 13px;
  padding: 14px;
  border: 1px solid light-dark(rgba(237, 248, 251, 0.14), rgba(27, 34, 39, 0.14));
  border-radius: 10px;
  background: light-dark(rgba(255, 255, 255, 0.06), rgba(17, 24, 29, 0.06));
}

:where(.sellerCommissionPage .commissionProgressHeader){
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 14px;
  color: light-dark(rgba(237, 248, 251, 0.78), rgba(27, 34, 39, 0.78));
}

:where(.sellerCommissionPage .commissionProgressHeader div){
  display: grid;
  gap: 2px;
}

:where(.sellerCommissionPage .commissionProgressHeader span){
  font-size: 12px;
  font-weight: 700;
}

:where(.sellerCommissionPage .commissionProgressHeader strong){
  color: #ffffff;
  font-size: clamp(28px, 2.5vw, 42px);
  line-height: 1;
}

:where(.sellerCommissionPage .commissionProgressHeader p){
  margin: 0;
  max-width: 520px;
  color: light-dark(rgba(237, 248, 251, 0.76), rgba(27, 34, 39, 0.76));
  font-size: 13px;
  line-height: 1.35;
  text-align: right;
}

:where(.sellerCommissionPage .commissionProgressBar){
  height: 13px;
  margin: 0;
  background: light-dark(rgba(237, 248, 251, 0.13), rgba(27, 34, 39, 0.13));
}

:where(.sellerCommissionPage .commissionProgressBar span){
  background: linear-gradient(90deg, #53c8df, #ff751f);
  box-shadow: 0 0 18px rgba(83, 200, 223, 0.28);
}

:where(.sellerCommissionPage .commissionNextLevel){
  display: flex;
  justify-content: space-between;
  gap: 14px;
  padding-top: 2px;
  color: light-dark(rgba(237, 248, 251, 0.74), rgba(27, 34, 39, 0.74));
}

:where(.sellerCommissionPage .commissionNextLevel strong){
  color: #ffffff;
}

:where(.sellerCommissionPage .commissionNextLevel span){
  text-align: right;
}

.commissionChecklist {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
}

.commissionChecklistItem {
  display: grid;
  gap: 5px;
  min-height: 84px;
  padding: 10px;
  border: 1px solid light-dark(rgba(237, 248, 251, 0.13), rgba(27, 34, 39, 0.13));
  border-radius: 9px;
  background: light-dark(rgba(255, 255, 255, 0.06), rgba(17, 24, 29, 0.06));
}

.commissionChecklistItem span {
  color: light-dark(rgba(237, 248, 251, 0.66), rgba(27, 34, 39, 0.66));
  font-size: 11px;
  font-weight: 700;
}

.commissionChecklistItem strong {
  color: #ffffff;
  font-size: 14px;
  line-height: 1.15;
}

.commissionChecklistItem small {
  color: light-dark(rgba(237, 248, 251, 0.7), rgba(27, 34, 39, 0.7));
  font-size: 11px;
  line-height: 1.25;
}

.commissionChecklistItem.ok {
  border-color: light-dark(rgba(20, 122, 83, 0.48), rgba(76, 167, 125, 0.48));
}

.commissionChecklistItem.ok strong {
  color: light-dark(#78e6bd, #023727);
}

.commissionChecklistItem.attention {
  border-color: rgba(255, 117, 31, 0.46);
}

.commissionChecklistItem.attention strong {
  color: light-dark(#ffb27d, #44250c);
}

.commissionChecklistItem.blocked {
  border-color: light-dark(rgba(180, 35, 24, 0.44), rgba(237, 92, 75, 0.44));
}

.commissionChecklistItem.blocked strong {
  color: #ff9a8e;
}

.commissionLevelGuidePanel {
  margin-bottom: 12px;
}

.sectionTitleRow {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 12px;
}

.sectionTitleRow h3 {
  margin: 0 0 4px;
}

.commissionLevelGuide {
  display: grid;
  gap: 10px;
}

:where(.commissionLevelCards){
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.commissionLevelCard {
  display: grid;
  gap: 12px;
  min-height: 148px;
  padding: 14px;
  border: 1px solid light-dark(rgba(39, 119, 141, 0.16), rgba(82, 158, 181, 0.16));
  border-radius: 10px;
  background: light-dark(#f8fcfd, #151c21);
}

.commissionLevelCard.current {
  border-color: rgba(255, 117, 31, 0.58);
  box-shadow: 0 0 0 3px rgba(255, 117, 31, 0.10);
}

.commissionLevelCard.reached {
  border-color: light-dark(rgba(20, 122, 83, 0.26), rgba(76, 167, 125, 0.26));
}

.commissionLevelCardHeader {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}

.commissionLevelCardHeader span {
  color: var(--ink);
  font-size: 15px;
  font-weight: 900;
}

.commissionLevelCardHeader strong {
  color: var(--teal);
  font-size: 20px;
  line-height: 1;
}

.commissionLevelCard.bronze .commissionLevelCardHeader strong {
  color: light-dark(#a85d22, #ca7c44);
}

.commissionLevelCard.silver .commissionLevelCardHeader strong {
  color: light-dark(#6b7a88, #97a7b6);
}

.commissionLevelCard.gold .commissionLevelCardHeader strong {
  color: light-dark(#b78105, #bd8715);
}

.commissionLevelCard.diamond .commissionLevelCardHeader strong {
  color: light-dark(#157a93, #469fb9);
}

.commissionLevelCard dl {
  display: grid;
  gap: 8px;
  margin: 0;
}

.commissionLevelCard dl div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  padding-top: 7px;
  border-top: 1px solid light-dark(rgba(39, 119, 141, 0.10), rgba(82, 158, 181, 0.1));
}

.commissionLevelCard dt {
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
}

.commissionLevelCard dd {
  margin: 0;
  color: var(--ink);
  font-size: 12px;
  font-weight: 800;
  text-align: right;
}

.commissionLevelCard .commissionLevelFilament {
  align-items: center;
}

.commissionLevelFilament dd {
  display: grid;
  justify-items: end;
  gap: 2px;
}

.commissionLevelFilament dd strong {
  color: var(--teal);
  font-size: 17px;
  line-height: 1;
}

.commissionLevelFilament dd span {
  color: var(--muted);
  font-size: 10px;
  font-weight: 700;
}

.commissionLevelCard .commissionLevelPace dd {
  display: grid;
  justify-items: end;
  gap: 2px;
}

.commissionLevelCard .commissionLevelPace dd strong {
  color: var(--orange-dark);
  font-size: 13px;
  font-weight: 900;
  line-height: 1.1;
}

.commissionLevelCard .commissionLevelPace dd span {
  color: var(--muted);
  font-size: 10px;
  font-weight: 800;
  line-height: 1.2;
}

.commissionLevelBase {
  margin: 0;
  padding: 10px 12px;
  border: 1px solid rgba(255, 117, 31, 0.18);
  border-radius: 8px;
  background: rgba(255, 117, 31, 0.06);
  color: var(--muted);
  font-size: 12px;
  line-height: 1.4;
}

.commissionLevelBadge,
.commissionStatusPill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 24px;
  padding: 3px 8px;
  border-radius: 999px;
  font-weight: 800;
  line-height: 1.05;
  white-space: nowrap;
}

.commissionLevelBadge.diamond {
  color: light-dark(#0e6476, #549eb2);
  background: light-dark(#e7fbff, #132225);
}

.commissionLevelBadge.gold {
  color: light-dark(#7b4e00, #b88849);
  background: light-dark(#fff3ce, #2b2206);
}

.commissionLevelBadge.silver {
  color: light-dark(#4d5d66, #b2c4ce);
  background: light-dark(#eef4f7, #1d242a);
}

.commissionLevelBadge.bronze {
  color: light-dark(#8c3f08, #cd7a4c);
  background: light-dark(#fff0e4, #2c2118);
}

.commissionLevelBadge.locked {
  color: light-dark(#9d1d12, #e56452);
  background: light-dark(#fff1ef, #1c2328);
}

.commissionStatusPill.ok {
  color: var(--green);
  background: light-dark(#edf9f3, #1b2227);
}

.commissionStatusPill.attention {
  color: var(--orange-dark);
  background: light-dark(#fff1e8, #1c2328);
}

.commissionStatusPill.blocked {
  color: var(--red);
  background: light-dark(#fff1ef, #1c2328);
}

.commissionMiniBar {
  height: 5px;
  margin-top: 5px;
  overflow: hidden;
  border-radius: 999px;
  background: light-dark(rgba(40, 119, 141, 0.14), rgba(83, 158, 181, 0.14));
}

.commissionMiniBar span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--teal), var(--orange));
}

.commissionRulesBlock {
  margin-bottom: 12px;
}

.commissionRulesBlock h3 {
  margin: 0 0 8px;
}

.commissionRulesTable {
  table-layout: fixed;
  font-size: 11px;
}

.commissionRulesTable th,
.commissionRulesTable td {
  padding: 8px 7px;
  text-align: left;
  line-height: 1.3;
  overflow-wrap: anywhere;
}

.commissionRulesTable th:nth-child(1),
.commissionRulesTable td:nth-child(1) {
  width: 7%;
  text-align: center;
}

.commissionRulesTable th:nth-child(2),
.commissionRulesTable td:nth-child(2) {
  width: 15%;
}

.commissionRulesTable th:nth-child(3),
.commissionRulesTable td:nth-child(3) {
  width: 29%;
}

.commissionRulesTable th:nth-child(4),
.commissionRulesTable td:nth-child(4) {
  width: 12%;
}

.commissionRulesTable th:nth-child(5),
.commissionRulesTable td:nth-child(5),
.commissionRulesTable th:nth-child(6),
.commissionRulesTable td:nth-child(6) {
  width: 19%;
}

.sellerSimpleRulesTable {
  font-size: 13px;
}

.sellerSimpleRulesTable th:nth-child(1),
.sellerSimpleRulesTable td:nth-child(1) {
  width: 22%;
  text-align: left;
}

.sellerSimpleRulesTable th:nth-child(2),
.sellerSimpleRulesTable td:nth-child(2) {
  width: 42%;
}

.sellerSimpleRulesTable th:nth-child(3),
.sellerSimpleRulesTable td:nth-child(3) {
  width: 36%;
}

.commissionAdminRulesTable th:nth-child(1),
.commissionAdminRulesTable td:nth-child(1) {
  width: 24%;
  text-align: left;
}

.commissionAdminRulesTable th:nth-child(2),
.commissionAdminRulesTable td:nth-child(2) {
  width: 34%;
}

.commissionAdminRulesTable th:nth-child(3),
.commissionAdminRulesTable td:nth-child(3) {
  width: 14%;
}

.commissionAdminRulesTable th:nth-child(4),
.commissionAdminRulesTable td:nth-child(4) {
  width: 28%;
}

.commissionAdminRulesTable td:first-child {
  display: flex;
  align-items: center;
  gap: 8px;
}

.commissionRulesSectionRow td {
  padding-top: 14px;
  padding-bottom: 10px;
  background: var(--teal-soft);
  color: var(--teal);
  font-weight: 800;
  text-transform: uppercase;
}

.commissionRuleNumber {
  display: inline-flex;
  width: 28px;
  height: 28px;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--orange-soft);
  border-radius: 999px;
  background: light-dark(#fff7ed, #181f24);
  color: var(--orange-dark);
  font-weight: 800;
}

.sellerAuditControls {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 10px;
  margin: 12px 0;
}

.sellerAuditControls label {
  display: grid;
  gap: 6px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
}

.sellerAuditControls select {
  width: 100%;
  min-height: 40px;
  border: 1px solid light-dark(rgba(40, 119, 141, 0.22), rgba(83, 158, 181, 0.22));
  border-radius: 8px;
  padding: 0 12px;
  background: light-dark(#fff, #11181d);
  color: var(--ink);
  font: inherit;
}

.sellerAuditSelectable {
  cursor: pointer;
}

.sellerAuditSelectable:hover td,
.sellerAuditSelectable.selected td {
  background: light-dark(#eef7f8, #1b2227);
}

.sellerAuditSelectable.selected td:first-child {
  border-left: 4px solid var(--teal);
}

.sellerCommissionAuditCriteria {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px;
  margin: 12px 0;
}

.sellerCommissionAuditCriterion {
  display: grid;
  gap: 5px;
  min-height: 94px;
  padding: 11px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: light-dark(#fff, #11181d);
}

.sellerCommissionAuditCriterion span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 850;
  text-transform: uppercase;
}

.sellerCommissionAuditCriterion strong {
  color: var(--ink);
  font-size: 18px;
  line-height: 1.1;
}

.sellerCommissionAuditCriterion small {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.25;
}

.sellerCommissionAuditCriterion.ok {
  border-color: light-dark(rgba(56, 142, 60, 0.28), rgba(83, 168, 86, 0.28));
  background: light-dark(#f4fbf5, #181e23);
}

.sellerCommissionAuditCriterion.attention {
  border-color: rgba(245, 124, 0, 0.28);
  background: light-dark(#fff8ef, #171e23);
}

.sellerCommissionAuditCriterion.blocked {
  border-color: light-dark(rgba(183, 28, 28, 0.24), rgba(240, 88, 77, 0.24));
  background: light-dark(#fff5f5, #192025);
}

.sellerCommissionAuditOrdersWrap th,
.sellerCommissionAuditOrdersWrap td {
  font-size: 12px;
}

.sellerCommissionAuditOrdersWrap th:nth-child(1),
.sellerCommissionAuditOrdersWrap td:nth-child(1),
.sellerCommissionAuditOrdersWrap th:nth-child(3),
.sellerCommissionAuditOrdersWrap td:nth-child(3),
.sellerCommissionAuditOrdersWrap th:nth-child(5),
.sellerCommissionAuditOrdersWrap td:nth-child(5),
.sellerCommissionAuditOrdersWrap th:nth-child(7),
.sellerCommissionAuditOrdersWrap td:nth-child(7) {
  white-space: nowrap;
}

.highlightRow {
  background: rgba(255, 117, 31, 0.08);
}

:where(.qualityKpis){
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(165px, 1fr));
  gap: 10px;
  margin-bottom: 14px;
}

.validationPanel {
  border-top: 4px solid var(--orange);
}

.auditPanel {
  border-top: 4px solid var(--teal);
}

.auditGrid {
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
}

.validationScore {
  margin-bottom: 12px;
}

.scoreBadge {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 4px 16px;
  align-items: center;
  min-height: 86px;
  padding: 14px;
  border: 1px solid light-dark(rgba(40, 119, 141, 0.22), rgba(83, 158, 181, 0.22));
  border-radius: 10px;
  background: light-dark(#f7fbfc, #161d22);
}

.scoreBadge span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
}

.scoreBadge strong {
  grid-row: 1 / span 2;
  font-size: 34px;
  color: var(--teal);
}

.scoreBadge p {
  margin: 0;
  color: var(--ink);
  font-size: 14px;
}

.scoreBadge.attention {
  border-color: rgba(255, 117, 31, 0.3);
  background: light-dark(#fff8f3, #171e23);
}

.scoreBadge.attention strong {
  color: var(--orange-dark);
}

.scoreBadge.critical {
  border-color: light-dark(rgba(180, 35, 24, 0.24), rgba(237, 92, 75, 0.24));
  background: light-dark(#fff7f5, #171e23);
}

.scoreBadge.critical strong {
  color: var(--red);
}

.validationGrid {
  margin-top: 14px;
}

.severity {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 0 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
}

.severityHigh {
  background: light-dark(#fff1ee, #1c2328);
  color: var(--red);
}

.severityMedium {
  background: var(--soft-orange);
  color: var(--orange-dark);
}

.severityLow {
  background: light-dark(#eef8f4, #1b2227);
  color: var(--green);
}

.alertCards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 10px;
}

.alertCard {
  display: grid;
  gap: 7px;
  min-height: 132px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: light-dark(#fff, #11181d);
}

.alertCard span {
  justify-self: start;
  min-height: 24px;
  padding: 4px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
}

.alertCard.severityHigh {
  border-color: light-dark(rgba(180, 35, 24, 0.22), rgba(237, 92, 75, 0.22));
  background: light-dark(#fff7f5, #171e23);
}

.alertCard.severityMedium {
  border-color: rgba(255, 117, 31, 0.28);
  background: light-dark(#fff8f3, #171e23);
}

.alertCard.severityLow {
  border-color: light-dark(rgba(40, 119, 141, 0.18), rgba(83, 158, 181, 0.18));
  background: light-dark(#f7fbfc, #161d22);
}

.alertCard.severityHigh span {
  background: light-dark(#ffe7e2, #362421);
  color: var(--red);
}

.alertCard.severityMedium span {
  background: light-dark(#fff1e8, #1c2328);
  color: var(--orange-dark);
}

.alertCard.severityLow span {
  background: light-dark(#eaf4f7, #1e252b);
  color: var(--teal);
}

.alertCard strong {
  font-size: 14px;
}

.alertCard p {
  margin: 0;
  color: var(--ink);
  font-size: 12px;
  line-height: 1.35;
}

.alertCard small {
  color: var(--muted);
  font-size: 11px;
}

.subTabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 12px;
}

:where(.subTab){
  min-height: 34px;
  background: var(--soft-orange);
  border-color: rgba(255, 117, 31, 0.34);
  color: var(--orange-dark);
}

:where(.subTab.active){
  background: var(--orange);
  border-color: var(--orange);
  color: #fff;
}

.dreSubTabs {
  margin-top: 4px;
}

.drePanel [data-dre-page] {
  display: none;
}

.drePanel .dreMetricGroups[data-dre-page].active {
  display: grid;
}

.drePanel .dashboardGrid > .subpanel[data-dre-page].active {
  display: block;
}

.localPage {
  display: none;
}

.localPage:not(.active) {
  display: none;
}

.localPage.active {
  display: grid;
  gap: 14px;
}

.localPage.active.moduleGrid,
.localPage.active.dashboardGrid,
.localPage.active.financeKpis,
.localPage.active.qualityKpis {
  display: grid;
}

.soldItemsPage {
  display: none;
}

.soldItemsPage.active {
  display: grid;
  gap: 14px;
}

.stockPage.active {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.stockPage > .stockKpis {
  grid-column: 1 / -1;
}

.stockPage[data-local-page="cmv"].active,
.stockPage[data-local-page="giro"].active {
  grid-template-columns: 1fr;
}

.stockKpis {
  grid-template-columns: repeat(auto-fit, minmax(178px, 1fr));
}

.configModules {
  margin-top: 14px;
}

.configSectionIntro,
.configConnectionStatus {
  display: flex;
  gap: 14px;
  align-items: center;
  justify-content: space-between;
  padding: 4px 2px 2px;
}

.configSectionIntro h3,
.configSectionIntro p,
.configConnectionStatus h3,
.configConnectionStatus p {
  margin: 0;
}

.configSectionIntro h3,
.configConnectionStatus h3 {
  color: var(--ink);
  font-size: 22px;
}

.configSectionIntro p {
  margin-top: 4px;
  color: var(--muted);
  font-size: 13px;
}

.configStatusPill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 28px;
  padding: 0 10px;
  border: 1px solid light-dark(rgba(40, 119, 141, 0.18), rgba(83, 158, 181, 0.18));
  border-radius: 999px;
  background: light-dark(rgba(40, 119, 141, 0.08), rgba(83, 158, 181, 0.08));
  color: var(--teal);
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
}

.configAdvancedDetails {
  margin-top: 0;
}

.configPrimaryAction {
  justify-content: flex-start;
}

.configAdminFlow {
  align-items: start;
}

.configAdminHeader {
  display: flex;
  gap: 16px;
  align-items: center;
  justify-content: space-between;
  padding: 4px 2px 2px;
}

.configAdminToolbar {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  justify-content: stretch;
}

.configAdminTitle {
  grid-column: 1;
  min-width: 0;
  justify-self: start;
}

.configAdminHeader h3,
.configAdminHeader p {
  margin: 0;
}

.configAdminHeader h3 {
  color: var(--ink);
  font-size: 22px;
}

.configAdminHeader p {
  margin-top: 4px;
  color: var(--muted);
  font-size: 13px;
}

.configAdminActions {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.configAdminToolbar .configAdminActions {
  grid-column: 2;
  flex-wrap: nowrap;
  justify-content: center;
  justify-self: center;
  width: min(100%, 640px);
}

.configAdminActions input {
  min-width: min(280px, 52vw);
}

.configAdminToolbar .configAdminSearch {
  flex: 1 1 320px;
  width: auto;
  min-width: min(280px, 100%);
  max-width: 460px;
  height: 42px;
  padding: 0 14px;
  border-color: rgba(24, 34, 43, 0.14);
  border-radius: 8px;
  background: light-dark(#fff, #11181d);
  box-shadow: 0 1px 2px rgba(21, 42, 48, 0.04);
}

.configAdminToolbar .configAdminSearch:focus {
  border-color: light-dark(rgba(40, 119, 141, 0.42), rgba(83, 158, 181, 0.42));
  box-shadow: 0 0 0 3px rgba(40, 119, 141, 0.12);
}

.configAdminToolbar .configAdminNewButton {
  min-height: 42px;
  padding: 0 18px;
  white-space: nowrap;
}

.configEditorCard {
  border-color: light-dark(rgba(40, 119, 141, 0.16), rgba(83, 158, 181, 0.16));
  box-shadow: 0 14px 34px rgba(21, 42, 48, 0.08);
}

.configEditorCard[hidden] {
  display: none;
}

.configEditorCard h3 {
  margin-bottom: 4px;
}

.userFormGrid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  align-items: end;
  margin-top: 12px;
}

.userFormGrid select {
  min-height: 42px;
}

.userFormGrid label small {
  display: block;
  margin-top: 5px;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.35;
}

.userEditorCard {
  display: grid;
  gap: 14px;
  border-color: light-dark(rgba(40, 119, 141, 0.16), rgba(83, 158, 181, 0.16));
}

.userEditorHeader {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  padding-bottom: 2px;
}

.userEditorHeader h3,
.userEditorHeader p,
.userEditorSection h4 {
  margin: 0;
}

.userEditorHeader h3 {
  color: var(--ink);
  font-size: 18px;
}

.userEditorHeader p {
  margin-top: 4px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.4;
}

.userEditorSection {
  display: grid;
  gap: 10px;
  padding-top: 12px;
  border-top: 1px solid rgba(24, 34, 43, 0.08);
}

.userEditorHeader + .userEditorSection {
  border-top: 0;
  padding-top: 0;
}

.userEditorSection h4 {
  color: light-dark(#0f6074, #579eb3);
  font-size: 12px;
  font-weight: 850;
  text-transform: uppercase;
}

.userEditorGrid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  align-items: end;
}

.userEditorGrid.twoColumns {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.userEditorGrid label {
  display: grid;
  gap: 6px;
  min-width: 0;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.userEditorGrid input,
.userEditorGrid select {
  width: 100%;
  min-height: 44px;
  padding: 0 12px;
  border: 1px solid rgba(24, 34, 43, 0.14);
  border-radius: 8px;
  background: light-dark(#fff, #11181d);
  color: var(--ink);
  font-weight: 650;
}

.userEditorGrid input[readonly] {
  background: light-dark(#f5f7f8, #1a2126);
  color: var(--muted);
}

.userPermissionCards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.userPermissionCard {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 9px;
  align-items: flex-start;
  min-height: 78px;
  padding: 11px;
  border: 1px solid light-dark(rgba(40, 119, 141, 0.16), rgba(83, 158, 181, 0.16));
  border-radius: 8px;
  background: linear-gradient(180deg, light-dark(#fff, #11181d), light-dark(#fbfdfe, #141b1f));
  cursor: pointer;
}

.userPermissionCard.active {
  border-color: rgba(255, 117, 31, 0.36);
  background: light-dark(#fff8f3, #171e23);
}

.userPermissionCard input {
  width: 18px;
  height: 18px;
  margin: 1px 0 0;
  accent-color: var(--teal);
}

.userPermissionCard span,
.userPermissionCard strong,
.userPermissionCard small {
  display: block;
}

.userPermissionCard strong {
  color: var(--ink);
  font-size: 13px;
  line-height: 1.2;
}

.userPermissionCard small {
  margin-top: 4px;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.35;
}

.userEditorActions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  flex-wrap: wrap;
  padding-top: 2px;
}

.disabledField {
  opacity: 0.58;
}

.disabledField select {
  cursor: not-allowed;
}

.userFormActions {
  display: flex;
  gap: 8px;
  align-items: center;
  align-self: stretch;
}

.formFooterActions {
  justify-content: flex-end;
  margin-top: 14px;
}

.permissionDetails {
  margin-top: 14px;
  border: 1px solid light-dark(rgba(40, 119, 141, 0.16), rgba(83, 158, 181, 0.16));
  border-radius: 10px;
  background: light-dark(#fbfdfe, #141b1f);
  overflow: hidden;
}

.permissionDetails summary {
  cursor: pointer;
  padding: 13px 14px;
  color: var(--ink);
  font-weight: 800;
  list-style: none;
}

.permissionDetails summary::-webkit-details-marker {
  display: none;
}

.permissionDetails summary::after {
  content: "+";
  float: right;
  color: var(--teal);
  font-size: 18px;
  line-height: 1;
}

.permissionDetails[open] summary::after {
  content: "-";
}

.permissionDetails .permissionToolbar,
.permissionDetails .permissionGrid,
.permissionAdvancedGrid {
  margin-left: 14px;
  margin-right: 14px;
}

.permissionAdvancedGrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 10px;
  margin-top: 0;
  margin-bottom: 14px;
}

.accessProfileFormGrid input {
  min-height: 48px;
}

.accessProfileFormGrid {
  grid-template-columns: minmax(240px, 1.15fr) repeat(2, minmax(180px, 0.9fr));
  align-items: start;
}

.accessProfileIdentityStack {
  display: grid;
  gap: 10px;
  min-width: 0;
}

.accessProfileAreas {
  display: grid;
  gap: 8px;
  margin-top: 16px;
}

.accessProfileAreasToggle {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 48px;
  padding: 10px 12px;
  border-color: light-dark(rgba(40, 119, 141, 0.22), rgba(83, 158, 181, 0.22));
  border-radius: 8px;
  background: light-dark(#fff, #11181d);
  color: var(--ink);
  text-align: left;
  box-shadow: 0 2px 8px rgba(19, 32, 42, 0.04);
}

.accessProfileAreasToggle:hover,
.accessProfileAreasToggle:focus-visible {
  border-color: light-dark(rgba(40, 119, 141, 0.42), rgba(83, 158, 181, 0.42));
  background: light-dark(#fbfdfe, #141b1f);
  box-shadow: 0 3px 12px rgba(19, 32, 42, 0.07);
  outline: none;
}

.accessProfileAreasToggle > span:first-child {
  min-width: 0;
  overflow-wrap: anywhere;
  font-weight: 850;
}

.accessProfileAreasChevron {
  display: inline-grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border: 1px solid light-dark(rgba(40, 119, 141, 0.18), rgba(83, 158, 181, 0.18));
  border-radius: 8px;
  background: var(--teal-soft);
  color: var(--teal);
  font-size: 18px;
  line-height: 1;
}

.accessProfileAreasPanel {
  display: grid;
  gap: 12px;
  padding: 12px;
  border: 1px solid light-dark(rgba(40, 119, 141, 0.16), rgba(83, 158, 181, 0.16));
  border-radius: 8px;
  background: light-dark(#fbfdfe, #141b1f);
}

.accessProfileAreasPanelHeader {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.accessProfileAreasActions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.accessProfileAreasGrid {
  grid-template-columns: repeat(auto-fill, minmax(154px, 1fr));
}

.accessProfilesTable td:first-child small {
  display: block;
  margin-top: 4px;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.35;
}

.collapsibleCardHeader {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.collapsibleCardHeader h4 {
  margin: 0;
  color: var(--ink);
  font-size: 15px;
  font-weight: 800;
}

.collapsibleCardHeader p {
  margin: 3px 0 0;
  color: var(--muted);
  font-size: 12px;
}

.accessProfilesTable th,
.accessProfilesTable td,
.permissionMatrixTable th,
.permissionMatrixTable td {
  text-align: left;
}

.profileFlag {
  min-height: 24px;
  margin: 2px;
  padding: 0 8px;
}

.profileActionCell {
  display: flex;
  gap: 6px;
  justify-content: flex-end;
  flex-wrap: wrap;
}

.accessProfileFlags {
  margin-top: 14px;
}

.permissionMatrixGroups {
  display: grid;
  gap: 10px;
  margin-top: 8px;
}

.permissionMatrixGroup {
  border: 1px solid light-dark(rgba(98, 112, 124, 0.16), rgba(162, 177, 190, 0.16));
  border-radius: 8px;
  background: light-dark(#fff, #11181d);
  overflow: hidden;
}

.permissionMatrixGroup > summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  min-height: 44px;
  padding: 10px 12px;
  color: var(--ink);
  cursor: pointer;
  list-style: none;
}

.permissionMatrixGroup > summary::-webkit-details-marker {
  display: none;
}

.permissionMatrixGroup > summary span {
  min-width: 0;
  font-size: 14px;
  font-weight: 850;
  overflow-wrap: anywhere;
}

.permissionMatrixGroup > summary small {
  color: var(--muted);
  font-size: 12px;
  font-weight: 750;
  white-space: nowrap;
}

.permissionMatrixGroupRows {
  display: grid;
  gap: 0;
  border-top: 1px solid light-dark(rgba(98, 112, 124, 0.12), rgba(162, 177, 190, 0.12));
}

.permissionMatrixMenuGroup {
  display: grid;
  gap: 0;
  border-top: 1px solid light-dark(rgba(98, 112, 124, 0.10), rgba(162, 177, 190, 0.1));
}

.permissionMatrixMenuGroup:first-child {
  border-top: 0;
}

.permissionMatrixMenuHeader {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  min-height: 38px;
  padding: 8px 12px;
  background: light-dark(#f7fafb, #171e23);
}

.permissionMatrixMenuHeader strong {
  min-width: 0;
  color: var(--navy);
  font-size: 12px;
  font-weight: 900;
  overflow-wrap: anywhere;
}

.permissionMatrixMenuHeader small {
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  white-space: nowrap;
}

.permissionMatrixMenuRows {
  display: grid;
  gap: 0;
}

.permissionMatrixModule {
  display: grid;
  gap: 10px;
  padding: 12px;
  border-top: 1px solid light-dark(rgba(98, 112, 124, 0.10), rgba(162, 177, 190, 0.1));
}

.permissionMatrixModule:first-child {
  border-top: 0;
}

.permissionMatrixModuleHeader {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
}

.permissionMatrixModuleHeader strong,
.permissionMatrixModuleHeader span {
  display: block;
  min-width: 0;
  overflow-wrap: anywhere;
}

.permissionMatrixModuleHeader strong {
  color: var(--ink);
  font-size: 13px;
  font-weight: 850;
}

.permissionMatrixModuleHeader div > span {
  margin-top: 2px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 750;
}

.tableWrap.permissionMatrixWrap {
  max-height: none;
  margin-top: 8px;
  overflow-x: auto;
  overflow-y: visible;
}

.permissionMatrixTable {
  min-width: 1040px;
  table-layout: fixed;
}

.permissionMatrixTable th:nth-child(1) {
  width: 17%;
}

.permissionMatrixTable th:nth-child(2) {
  width: 18%;
}

.permissionMatrixTable th:nth-child(3) {
  width: 15%;
}

.permissionMatrixTable th:nth-child(4) {
  width: 50%;
}

.permissionMatrixTable td {
  padding-top: 10px;
  padding-bottom: 10px;
  vertical-align: top;
}

.permissionMatrixTable td:first-child strong,
.permissionMatrixTable td:first-child small {
  display: block;
}

.permissionMatrixTable td:first-child small {
  margin-top: 3px;
  color: var(--muted);
  font-size: 11px;
}

.permissionMatrixToggle,
.permissionMatrixTab {
  display: inline-flex;
  align-items: center;
  max-width: 100%;
  min-height: 32px;
  gap: 8px;
  padding: 6px 10px;
  border: 1px solid light-dark(rgba(98, 112, 124, 0.24), rgba(162, 177, 190, 0.24));
  border-radius: 8px;
  background: light-dark(#fff, #11181d);
  color: var(--ink);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.25;
  cursor: pointer;
  user-select: none;
  transition: border-color 0.16s ease, background 0.16s ease, color 0.16s ease, box-shadow 0.16s ease;
}

.permissionMatrixToggle {
  min-width: 128px;
}

.permissionMatrixTabs {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(142px, 1fr));
  gap: 8px;
  align-items: start;
}

.permissionMatrixModule .permissionMatrixTabs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.permissionMatrixTab {
  width: 100%;
}

.permissionMatrixModule .permissionMatrixTab {
  flex: 0 1 auto;
  width: auto;
  min-width: 96px;
  max-width: 220px;
  min-height: 28px;
  gap: 6px;
  padding: 5px 8px;
}

.accessProfileSummary {
  display: block;
  max-width: 460px;
  color: var(--ink);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.45;
}

.permissionMatrixTab.isCritical {
  border-color: rgba(255, 117, 31, 0.42);
  box-shadow: inset 0 0 0 1px rgba(255, 117, 31, 0.12);
}

.permissionMatrixTab.isCritical.isChecked {
  background: var(--soft-orange);
  color: var(--navy);
}

.permissionMatrixToggle:hover,
.permissionMatrixTab:hover {
  border-color: light-dark(rgba(40, 119, 141, 0.42), rgba(83, 158, 181, 0.42));
  box-shadow: 0 3px 10px rgba(19, 32, 42, 0.06);
}

.permissionMatrixToggle input,
.permissionMatrixTab input {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  margin: 0;
  accent-color: var(--teal);
}

.permissionMatrixModule .permissionMatrixTab input {
  width: 14px;
  height: 14px;
}

.permissionMatrixToggle span,
.permissionMatrixTab span {
  min-width: 0;
  overflow-wrap: anywhere;
}

.permissionMatrixModule .permissionMatrixTab span {
  white-space: normal;
  line-height: 1.2;
}

.permissionMatrixToggle.isChecked,
.permissionMatrixTab.isChecked {
  border-color: light-dark(rgba(40, 119, 141, 0.35), rgba(83, 158, 181, 0.35));
  background: var(--teal-soft);
  color: var(--ink);
}

.permissionMatrixToggle.isBlocked {
  border-color: light-dark(rgba(180, 35, 24, 0.2), rgba(237, 92, 75, 0.2));
  background: light-dark(#fff7f5, #171e23);
  color: var(--red);
}

.permissionMatrixTab.isBlocked {
  background: var(--surface-alt);
  color: var(--muted);
}

.permissionMatrixToggle:focus-within,
.permissionMatrixTab:focus-within {
  outline: 2px solid light-dark(rgba(40, 119, 141, 0.28), rgba(83, 158, 181, 0.28));
  outline-offset: 2px;
}

@media (max-width: 720px) {
  .permissionMatrixMenuHeader {
    grid-template-columns: 1fr;
    gap: 2px;
  }

  .permissionMatrixMenuHeader small {
    white-space: normal;
  }

  .permissionMatrixModuleHeader {
    grid-template-columns: 1fr;
  }

  .permissionMatrixModule .permissionMatrixToggle {
    justify-self: start;
  }

  .permissionMatrixModule .permissionMatrixTab {
    flex: 1 1 128px;
    max-width: 100%;
  }
}

.accessProfilesTable td:last-child {
  min-width: 150px;
}

.usersAccessTable .statusPill + .statusPill {
  margin-left: 5px;
}

.logisticsErrorPage .configAdminToolbar {
  align-items: center;
}

.logisticsErrorKpis {
  margin: 0;
}

.legacyTableTitleActions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
}

.transportSortHeader {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 18px;
  color: inherit;
  font: inherit;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
}

.transportSortHeader.active {
  color: var(--teal);
}

.transportSortHeader input {
  width: 13px;
  height: 13px;
  margin: 0;
  accent-color: var(--teal);
  cursor: pointer;
}

.logisticsErrorForm textarea {
  min-height: 112px;
  resize: vertical;
}

.logisticsFileInput small {
  display: block;
  margin-top: 6px;
  color: var(--muted);
}

.logisticsAttachmentList,
.logisticsAttachmentActions {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  align-items: center;
}

.logisticsSelectedFiles,
.logisticsSavedFiles {
  margin-top: 16px;
}

.logisticsAttachmentSectionTitle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
  color: var(--ink);
  font-size: 12px;
}

.logisticsAttachmentChip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 7px 6px 11px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--soft-orange);
  font-weight: 800;
}

.logisticsAttachmentChip small {
  color: var(--muted);
  font-weight: 700;
}

.logisticsAttachmentTableChip {
  max-width: 260px;
  background: light-dark(#fff, #11181d);
}

.logisticsAttachmentTableChip > span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.compactGhostButton {
  padding: 6px 9px;
  font-size: 12px;
}

.statusPill.ok {
  border-color: light-dark(rgba(30, 135, 89, 0.24), rgba(71, 168, 120, 0.24));
  background: light-dark(#f0fbf5, #191f24);
  color: light-dark(#1e8759, #47a878);
}

.statusPill.muted {
  border-color: light-dark(rgba(110, 124, 129, 0.2), rgba(156, 165, 172, 0.2));
  background: light-dark(#f5f7f8, #1a2126);
  color: light-dark(#687a80, #97aab1);
}

.unsavedChangesOverlay {
  position: fixed;
  inset: 0;
  z-index: 4000;
  display: grid;
  place-items: center;
  padding: 20px;
  background: light-dark(rgba(15, 31, 36, 0.38), rgba(219, 240, 247, 0.38));
}

.unsavedChangesDialog {
  width: min(420px, 100%);
  padding: 20px;
  border-radius: 14px;
  border: 1px solid light-dark(rgba(40, 119, 141, 0.18), rgba(83, 158, 181, 0.18));
  background: light-dark(#fff, #11181d);
  box-shadow: 0 28px 70px rgba(15, 31, 36, 0.22);
}

.unsavedChangesDialog h3 {
  margin: 0;
  color: var(--ink);
}

.unsavedChangesDialog p {
  margin: 8px 0 0;
  color: var(--muted);
}

.unsavedChangesActions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  margin-top: 18px;
  flex-wrap: wrap;
}

.adminCheck {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 8px;
  align-items: center;
  min-height: 42px;
  padding: 8px 10px;
  border: 1px solid rgba(255, 117, 31, 0.28);
  border-radius: 8px;
  background: light-dark(#fff8f3, #171e23);
}

.adminCheck input {
  margin: 0;
}

.adminCheck span,
.adminCheck strong,
.adminCheck small {
  display: block;
}

.adminCheck strong {
  color: var(--ink);
  font-size: 12px;
}

.adminCheck small {
  margin-top: 2px;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.2;
}

.permissionToolbar {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 16px 0 10px;
}

.permissionToolbar strong {
  margin-right: auto;
  color: var(--ink);
}

.permissionGrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 8px;
}

.permissionCheck {
  min-height: 50px;
  padding: 9px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: light-dark(#fff, #11181d);
}

.permissionCheck > label,
.permissionSubCheck {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 8px;
  align-items: start;
}

.permissionCheck input {
  margin-top: 3px;
}

.permissionCheck span,
.permissionCheck strong,
.permissionCheck small {
  display: block;
}

.permissionCheck strong {
  color: var(--ink);
  font-size: 12px;
}

.permissionCheck small {
  margin-top: 2px;
  color: var(--muted);
  font-size: 11px;
}

.permissionSubChecks {
  margin: 9px 0 0 24px;
  padding-top: 8px;
  border-top: 1px solid rgba(15, 23, 42, 0.08);
}

.permissionSubChecks > small {
  margin: 0 0 6px;
  color: var(--orange);
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
}

.permissionSubCheck {
  min-height: 24px;
  margin-top: 5px;
  color: var(--ink);
  font-size: 12px;
}

#dashboardUsersTable {
  table-layout: fixed;
}

#dashboardUsersTable .userColLogin {
  width: 14%;
}

#dashboardUsersTable .userColName {
  width: 24%;
}

#dashboardUsersTable .userColProfile {
  width: 17%;
}

#dashboardUsersTable .userColSeller {
  width: 20%;
}

#dashboardUsersTable .userColStatus {
  width: 12%;
}

#dashboardUsersTable .userColAction {
  width: 13%;
}

#dashboardUsersTable th,
#dashboardUsersTable td {
  overflow: hidden;
  text-overflow: ellipsis;
}

#dashboardUsersTable th:nth-child(3),
#dashboardUsersTable td:nth-child(3),
#dashboardUsersTable th:nth-child(4),
#dashboardUsersTable td:nth-child(4),
#dashboardUsersTable th:nth-child(2),
#dashboardUsersTable td:nth-child(2) {
  text-align: left;
}

#dashboardUsersTable th:nth-child(5),
#dashboardUsersTable td:nth-child(5) {
  text-align: center;
}

#dashboardUsersTable th:nth-child(6),
#dashboardUsersTable td:nth-child(6) {
  text-align: center;
}

#dashboardUsersTable .userStatusCell {
  padding-left: 8px;
  padding-right: 8px;
  vertical-align: middle;
}

#dashboardUsersTable .userStatusBadges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: center;
  align-items: center;
  min-width: 0;
}

#dashboardUsersTable .userStatusBadges .statusPill {
  max-width: 100%;
}

#dashboardUsersTable .userActionCell {
  overflow: visible;
  text-overflow: clip;
  text-align: right;
  white-space: nowrap;
  vertical-align: middle;
}

#dashboardUsersTable .userActionCell .miniAction {
  min-width: 72px;
}

#dashboardUsersTable .userActionCell .miniAction + .miniAction {
  margin-left: 8px;
}

#dashboardUsersTable th:nth-child(5),
#dashboardUsersTable td:nth-child(5),
#dashboardUsersTable .userStatusCell {
  text-align: center;
}

#dashboardUsersTable .userStatusCell .statusPill {
  justify-content: center;
}
:where(.kpi)){
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 12px;
  min-height: 86px;
  padding: 13px;
  border: 1px solid rgba(255, 117, 31, 0.24);
  border-radius: 10px;
  background: linear-gradient(180deg, light-dark(#fff, #11181d), light-dark(#fff8f3, #171e23));
}
:where(.kpi.finance)){
  border-color: light-dark(rgba(40, 119, 141, 0.22), rgba(83, 158, 181, 0.22));
  background: linear-gradient(180deg, light-dark(#fff, #11181d), light-dark(#f7fbfc, #161d22));
}
:where(.kpi.warning)){
  border-color: rgba(255, 117, 31, 0.28);
  background: linear-gradient(180deg, light-dark(#fff, #11181d), light-dark(#fff7f0, #181f24));
}
:where(.kpi.positive strong)){
  color: var(--green);
}
:where(.kpi.negative strong)){
  color: var(--red);
}
:where(.kpi span)){
  display: block;
  min-height: 28px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.25;
}
:where(.kpi strong)){
  display: block;
  margin-top: 0;
  color: var(--teal);
  font-size: 20px;
  line-height: 1.08;
  overflow-wrap: normal;
}
:where(.kpi small)){
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.dashboardGrid {
  display: grid;
  grid-template-columns: minmax(0, 1.18fr) minmax(0, 0.82fr);
  gap: 14px;
}

.dashboardSalesGrid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
}

.dashboardSalesControls {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
}

.dashboardSalesControls .dateFilter {
  flex: 1 1 auto;
  min-width: 0;
  margin-bottom: 0;
}

.dashboardSalesRebuildAction,
.dashboardSalesNewListAction {
  flex: 0 0 auto;
}

.dashboardSalesCustomLists {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin-top: 14px;
}

.dashboardSalesCustomList {
  min-width: 0;
}

.dashboardSalesListActions,
.dashboardSalesListFormActions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.dashboardSalesListFields {
  display: grid;
  grid-template-columns: minmax(180px, 0.7fr) minmax(240px, 1.3fr);
  gap: 12px;
  margin-top: 12px;
}

.dashboardSalesListFields label {
  display: grid;
  gap: 6px;
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 700;
}

.dashboardSalesListFields input,
.dashboardSalesListFields textarea {
  width: 100%;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  color: var(--text);
  font: inherit;
  padding: 10px 12px;
}

.dashboardSalesListFields textarea {
  min-height: 118px;
  resize: vertical;
}

.dashboardSalesListFormActions {
  margin-top: 12px;
}

.ceoPanel {
  border-top: 4px solid var(--teal);
}

.ceoHero {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin-bottom: 14px;
}

.ceoHero > div {
  min-height: 118px;
  padding: 16px;
  border: 1px solid light-dark(rgba(40, 119, 141, 0.18), rgba(83, 158, 181, 0.18));
  border-radius: 10px;
  background: linear-gradient(180deg, light-dark(#fff, #11181d), light-dark(#f7fbfc, #161d22));
}

.ceoHero > div.positive {
  border-color: light-dark(rgba(20, 122, 83, 0.24), rgba(76, 167, 125, 0.24));
  background: light-dark(#f7fcfa, #161d22);
}

.ceoHero > div.warning {
  border-color: rgba(255, 117, 31, 0.28);
  background: light-dark(#fff8f3, #171e23);
}

.ceoHero > div.negative {
  border-color: light-dark(rgba(180, 35, 24, 0.22), rgba(237, 92, 75, 0.22));
  background: light-dark(#fff7f5, #171e23);
}

.ceoHero span {
  display: block;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
}

.ceoHero strong {
  display: block;
  margin-top: 8px;
  color: var(--teal);
  font-size: clamp(21px, 1.65vw, 28px);
  line-height: 1.05;
  overflow-wrap: anywhere;
}

.ceoHero > div.positive strong {
  color: var(--green);
}

.ceoHero > div.warning strong {
  color: var(--orange-dark);
}

.ceoHero > div.negative strong {
  color: var(--red);
}

.ceoHero strong.positive {
  color: var(--green);
}

.ceoHero strong.warning {
  color: var(--orange-dark);
}

.ceoHero strong.negative {
  color: var(--red);
}

.ceoHero p,
.ceoInsights p {
  margin: 8px 0 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.35;
}

.ceoHero small {
  display: block;
  margin-top: 3px;
  color: light-dark(rgba(91, 111, 128, 0.78), rgba(158, 179, 198, 0.78));
  font-size: 12px;
  line-height: 1.3;
}

.ceoKpis {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin-bottom: 14px;
}

.ceoKpis .kpi {
  justify-content: flex-start;
  gap: 0;
  min-height: 118px;
  padding: 16px;
  border: 1px solid light-dark(rgba(40, 119, 141, 0.18), rgba(83, 158, 181, 0.18));
  border-radius: 10px;
  background: linear-gradient(180deg, light-dark(#fff, #11181d), light-dark(#f7fbfc, #161d22));
}

.ceoKpis .kpi span {
  min-height: 0;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.25;
  text-transform: uppercase;
}

.ceoKpis .kpi strong {
  display: block;
  margin-top: 8px;
  color: var(--teal);
  font-size: clamp(21px, 1.65vw, 28px);
  line-height: 1.05;
  letter-spacing: 0;
  white-space: normal;
  overflow-wrap: anywhere;
}

.ceoKpis .kpi small {
  display: block;
  min-height: 0;
  margin-top: 8px;
  color: light-dark(rgba(91, 111, 128, 0.78), rgba(158, 179, 198, 0.78));
  font-size: 13px;
  font-weight: 400;
  line-height: 1.35;
}

.ceoInsights {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.ceoAlertCard {
  min-height: 112px;
  padding: 12px;
  border: 1px solid var(--line);
  border-left: 4px solid var(--teal);
  border-radius: 8px;
  background: light-dark(#fbfaf8, #161d22);
}

.ceoAlertCard strong {
  display: block;
  color: var(--ink);
  font-size: 14px;
  line-height: 1.2;
}

.ceoAlertCard p {
  margin: 7px 0 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.35;
}

.ceoAlertCard small {
  display: block;
  margin-top: 9px;
  color: var(--ink);
  font-size: 12px;
  font-weight: 800;
  line-height: 1.3;
}

.ceoAlertCard.positive {
  border-color: light-dark(rgba(20, 122, 83, 0.18), rgba(76, 167, 125, 0.18));
  border-left-color: var(--green);
  background: light-dark(#f7fcfa, #161d22);
}

.ceoAlertCard.warning {
  border-color: rgba(255, 117, 31, 0.24);
  border-left-color: var(--orange);
  background: light-dark(#fff8f3, #171e23);
}

.ceoAlertCard.negative {
  border-color: light-dark(rgba(180, 35, 24, 0.18), rgba(237, 92, 75, 0.18));
  border-left-color: var(--red);
  background: light-dark(#fff7f5, #171e23);
}

.ceoReliabilityBoard {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.ceoReliabilityCard {
  min-height: 56px;
  padding: 11px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: light-dark(#fbfaf8, #161d22);
}

.ceoReliabilityCard span {
  display: block;
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
}

.ceoReliabilityCard strong {
  display: block;
  margin-top: 6px;
  color: var(--ink);
  font-size: 16px;
  line-height: 1.15;
}

.ceoReliabilityCard p {
  margin: 7px 0 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
}

.ceoReliabilityCard.positive {
  border-color: light-dark(rgba(20, 122, 83, 0.18), rgba(76, 167, 125, 0.18));
  background: light-dark(#f7fcfa, #161d22);
}

.ceoReliabilityCard.warning {
  border-color: rgba(255, 117, 31, 0.24);
  background: light-dark(#fff8f3, #171e23);
}

.ceoReliabilityCard.negative {
  border-color: light-dark(rgba(180, 35, 24, 0.18), rgba(237, 92, 75, 0.18));
  background: light-dark(#fff7f5, #171e23);
}

.netProfitPanel {
  border-top: 4px solid var(--orange);
}

:where(.netProfitHero){
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  min-height: 96px;
  padding: 16px;
  margin-bottom: 14px;
  border: 1px solid light-dark(rgba(40, 119, 141, 0.18), rgba(83, 158, 181, 0.18));
  border-radius: 10px;
  background: linear-gradient(180deg, light-dark(#fff, #11181d), light-dark(#f7fbfc, #161d22));
}

:where(.netProfitHero.negative){
  border-color: light-dark(rgba(180, 35, 24, 0.22), rgba(237, 92, 75, 0.22));
  background: light-dark(#fff7f5, #171e23);
}

:where(.netProfitHero span){
  display: block;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
}

:where(.netProfitHero strong){
  display: block;
  margin-top: 8px;
  font-size: 30px;
}

:where(.netProfitHero p){
  max-width: 520px;
  margin: 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.4;
}

.netProfitWarnings {
  display: grid;
  gap: 8px;
}

.netProfitWarnings p {
  margin: 0;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: light-dark(#fbfaf8, #161d22);
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
}

:where(.subpanel){
  min-width: 0;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: light-dark(#fff, #11181d);
}

:where(.subpanel.span2){
  grid-column: 1 / -1;
}

:where(.tableWrap){
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
}

.cmvCorrectionPending {
  background: light-dark(#fffaf2, #161d22);
}

.cmvCorrectionFailed {
  background: light-dark(#fff1ec, #1c2328);
}

.cmvCorrectionCheck {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 6px;
  align-items: center;
  color: var(--muted);
  font-size: 11px;
}

.cmvCorrectionCheck input {
  width: 16px;
  height: 16px;
  accent-color: var(--teal);
}

.cmvCorrectionFailed .cmvCorrectionCheck input {
  accent-color: light-dark(#dc2626, #fa4941);
}

.cmvCorrectionPending .cmvCorrectionCheck span {
  color: var(--teal);
  font-weight: 700;
}

.discountValidated {
  background: light-dark(#f3fbf7, #181e23);
  color: var(--muted);
}

.discountValidated td:not(:first-child) {
  opacity: 0.76;
}

.discountValidationCheck {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 6px;
  align-items: center;
  color: var(--muted);
  font-size: 11px;
}

.discountValidationCheck input {
  width: 16px;
  height: 16px;
  accent-color: var(--teal);
}

.discountValidated .discountValidationCheck span {
  color: var(--teal);
  font-weight: 800;
}

.cmvCorrectionFailed .cmvCorrectionCheck span {
  color: light-dark(#b42318, #ed5c4b);
  font-weight: 800;
}

.dreTesteTableWrap {
  position: relative;
  overflow: visible;
}

table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
  font-size: 12px;
}

.sellerCommissionTable {
  min-width: 0;
  table-layout: fixed;
  font-size: 10.5px;
}

.sellerCommissionTable th,
.sellerCommissionTable td {
  padding: 7px 4px;
  overflow-wrap: anywhere;
  word-break: normal;
  line-height: 1.2;
}

.sellerCommissionTable th:nth-child(1),
.sellerCommissionTable td:nth-child(1) {
  width: 7%;
}

.sellerCommissionTable th:nth-child(2),
.sellerCommissionTable td:nth-child(2) {
  width: 13%;
}

.sellerCommissionTable th:nth-child(3),
.sellerCommissionTable td:nth-child(3) {
  width: 10%;
}

.sellerCommissionTable th:nth-child(4),
.sellerCommissionTable td:nth-child(4) {
  width: 10%;
}

.sellerCommissionTable th:nth-child(5),
.sellerCommissionTable td:nth-child(5) {
  width: 9%;
}

.sellerCommissionTable th:nth-child(6),
.sellerCommissionTable td:nth-child(6) {
  width: 7%;
}

.sellerCommissionTable th:nth-child(7),
.sellerCommissionTable td:nth-child(7) {
  width: 7%;
}

.sellerCommissionTable th:nth-child(8),
.sellerCommissionTable td:nth-child(8) {
  width: 7%;
}

.sellerCommissionTable th:nth-child(9),
.sellerCommissionTable td:nth-child(9) {
  width: 8%;
}

.sellerCommissionTable th:nth-child(10),
.sellerCommissionTable td:nth-child(10) {
  width: 6%;
}

.sellerCommissionTable th:nth-child(11),
.sellerCommissionTable td:nth-child(11) {
  width: 6%;
}

.sellerCommissionTable th:nth-child(12),
.sellerCommissionTable td:nth-child(12) {
  width: 10%;
}

:where(.sellerCommissionPage .sellerCommissionTable){
  font-size: 11px;
}

:where(.sellerCommissionPage .sellerCommissionTable th),
:where(.sellerCommissionPage .sellerCommissionTable td){
  padding: 8px 6px;
  vertical-align: middle;
}

:where(.sellerCommissionPage .sellerCommissionTable th:nth-child(1)),
:where(.sellerCommissionPage .sellerCommissionTable td:nth-child(1)){
  width: 7%;
}

:where(.sellerCommissionPage .sellerCommissionTable th:nth-child(2)),
:where(.sellerCommissionPage .sellerCommissionTable td:nth-child(2)){
  width: 16%;
}

:where(.sellerCommissionPage .sellerCommissionTable th:nth-child(3)),
:where(.sellerCommissionPage .sellerCommissionTable td:nth-child(3)){
  width: 12%;
}

:where(.sellerCommissionPage .sellerCommissionTable th:nth-child(4)),
:where(.sellerCommissionPage .sellerCommissionTable td:nth-child(4)){
  width: 14%;
}

:where(.sellerCommissionPage .sellerCommissionTable th:nth-child(5)),
:where(.sellerCommissionPage .sellerCommissionTable td:nth-child(5)),
:where(.sellerCommissionPage .sellerCommissionTable th:nth-child(6)),
:where(.sellerCommissionPage .sellerCommissionTable td:nth-child(6)){
  width: 7%;
}

:where(.sellerCommissionPage .sellerCommissionTable th:nth-child(7)),
:where(.sellerCommissionPage .sellerCommissionTable td:nth-child(7)){
  width: 8%;
}

:where(.sellerCommissionPage .sellerCommissionTable th:nth-child(8)),
:where(.sellerCommissionPage .sellerCommissionTable td:nth-child(8)){
  width: 9%;
}

:where(.sellerCommissionPage .sellerCommissionTable th:nth-child(9)),
:where(.sellerCommissionPage .sellerCommissionTable td:nth-child(9)){
  width: 7%;
}

:where(.sellerCommissionPage .sellerCommissionTable th:nth-child(10)),
:where(.sellerCommissionPage .sellerCommissionTable td:nth-child(10)){
  width: 5%;
}

:where(.sellerCommissionPage .sellerCommissionTable th:nth-child(11)),
:where(.sellerCommissionPage .sellerCommissionTable td:nth-child(11)){
  width: 8%;
}

:where(.sellerCommissionPage .sellerCommissionMonthlyTable th:nth-child(1)),
:where(.sellerCommissionPage .sellerCommissionMonthlyTable td:nth-child(1)){
  width: 9%;
}

:where(.sellerCommissionPage .sellerCommissionMonthlyTable th:nth-child(2)),
:where(.sellerCommissionPage .sellerCommissionMonthlyTable td:nth-child(2)){
  width: 10%;
}

:where(.sellerCommissionPage .sellerCommissionMonthlyTable th:nth-child(3)),
:where(.sellerCommissionPage .sellerCommissionMonthlyTable td:nth-child(3)),
:where(.sellerCommissionPage .sellerCommissionMonthlyTable th:nth-child(4)),
:where(.sellerCommissionPage .sellerCommissionMonthlyTable td:nth-child(4)),
:where(.sellerCommissionPage .sellerCommissionMonthlyTable th:nth-child(5)),
:where(.sellerCommissionPage .sellerCommissionMonthlyTable td:nth-child(5)),
:where(.sellerCommissionPage .sellerCommissionMonthlyTable th:nth-child(10)),
:where(.sellerCommissionPage .sellerCommissionMonthlyTable td:nth-child(10)){
  width: 12%;
}

:where(.sellerCommissionPage .sellerCommissionMonthlyTable th:nth-child(6)),
:where(.sellerCommissionPage .sellerCommissionMonthlyTable td:nth-child(6)),
:where(.sellerCommissionPage .sellerCommissionMonthlyTable th:nth-child(7)),
:where(.sellerCommissionPage .sellerCommissionMonthlyTable td:nth-child(7)),
:where(.sellerCommissionPage .sellerCommissionMonthlyTable th:nth-child(8)),
:where(.sellerCommissionPage .sellerCommissionMonthlyTable td:nth-child(8)),
:where(.sellerCommissionPage .sellerCommissionMonthlyTable th:nth-child(9)),
:where(.sellerCommissionPage .sellerCommissionMonthlyTable td:nth-child(9)){
  width: 8%;
}

.sellerCommissionTable .mutedCell {
  display: block;
  margin-top: 3px;
}

.sellerCommissionTable .commissionIndicators {
  text-align: left;
}

.commissionIndicators span {
  display: block;
  line-height: 1.25;
  white-space: nowrap;
}

.commissionStack strong,
.commissionStack span {
  display: block;
  white-space: nowrap;
}

.commissionStack span {
  margin-top: 3px;
  color: var(--muted);
  font-size: 10px;
  line-height: 1.2;
}

.sellerTargetsWrap {
  overflow-x: auto;
}

.sellerTargetsTable {
  min-width: 1180px;
  table-layout: fixed;
}

.sellerTargetsTable th,
.sellerTargetsTable td {
  padding: 8px 7px;
  vertical-align: top;
}

.sellerTargetsTable th:first-child,
.sellerTargetsTable td:first-child {
  width: 15%;
}

.sellerTargetsTable th:nth-child(8),
.sellerTargetsTable td:nth-child(8) {
  width: 8%;
}

.sellerTargetsTable th:nth-child(9),
.sellerTargetsTable td:nth-child(9) {
  width: 9%;
}

.sellerTargetInput {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.sellerTargetInput span {
  color: var(--muted);
  font-size: 10px;
  font-weight: 800;
  line-height: 1;
}

.sellerTargetInput input {
  width: 100%;
  min-width: 0;
  padding: 7px 8px;
  border: 1px solid rgba(24, 34, 43, 0.16);
  border-radius: 7px;
  background: light-dark(#fff, #11181d);
  color: var(--ink);
  font: inherit;
  font-size: 12px;
  text-align: right;
}

.sellerTargetInput input::placeholder {
  color: light-dark(#9aa7b1, #6c7882);
}

.sellerTargetActions {
  display: flex;
  gap: 6px;
  justify-content: flex-end;
  align-items: center;
}

.sellerTargetActions .miniAction {
  min-width: 42px;
  padding: 7px 9px;
}

th,
td {
  padding: 8px 7px;
  border-bottom: 1px solid var(--line);
  text-align: right;
  vertical-align: top;
  overflow-wrap: anywhere;
}

th:first-child,
td:first-child {
  text-align: left;
  width: 23%;
}

th {
  color: var(--teal);
  font-weight: 700;
  background: light-dark(#fbfaf8, #161d22);
}

.financeRow.subtotal td,
.financeRow.total td,
.financeRow.cash td {
  font-weight: 700;
  background: light-dark(#fff8f3, #171e23);
}

.financeRow.section td {
  color: var(--orange-dark);
  background: light-dark(#fff1e8, #1c2328);
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
}

.financeRow.stock td,
.financeRow.adjustment td {
  color: var(--muted);
  background: light-dark(#fbfaf8, #161d22);
}

.financeRow.reference td {
  color: var(--teal);
  background: light-dark(#f3fbfd, #171e23);
  font-style: italic;
}

.financeRow.detail td:first-child {
  padding-left: 22px;
}

.originalValue {
  color: var(--muted);
}

.manualValueControl {
  display: grid;
  grid-template-columns: minmax(96px, 1fr) auto auto;
  gap: 6px;
  align-items: center;
  min-width: 210px;
}

.manualValueControl input {
  width: 100%;
  min-height: 30px;
  padding: 0 8px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: light-dark(#fff, #11181d);
  color: var(--ink);
  font: inherit;
  text-align: right;
}

.dreTesteSourceInput {
  width: min(360px, 100%);
  min-height: 32px;
  padding: 0 8px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: light-dark(#fff, #11181d);
  color: var(--ink);
  font: inherit;
}

.dreTesteValueControl {
  min-width: 0;
}

#dreTesteIssues {
  margin: 10px 0 14px;
}

#dreTesteIssues table {
  min-width: 760px;
}

#dreTesteTable {
  min-width: min(900px, 100%);
  table-layout: fixed;
}

#dreTesteTable th,
#dreTesteTable td {
  padding: 7px 8px;
  vertical-align: middle;
}

#dreTesteTable th {
  line-height: 1.25;
}

#dreTesteTable .headerHint {
  display: block;
  margin-top: 3px;
  color: var(--muted);
  font-size: 10px;
  font-weight: 600;
  text-transform: none;
}

#dreTesteTable th:nth-child(1),
#dreTesteTable td:nth-child(1) {
  width: 28%;
  text-align: left;
}

#dreTesteTable th:nth-child(2),
#dreTesteTable td:nth-child(2),
#dreTesteTable th:nth-child(4),
#dreTesteTable td:nth-child(4),
#dreTesteTable th:nth-child(5),
#dreTesteTable td:nth-child(5) {
  text-align: right;
}

#dreTesteTable th:nth-child(2),
#dreTesteTable td:nth-child(2) {
  width: 13%;
}

#dreTesteTable th:nth-child(3),
#dreTesteTable td:nth-child(3) {
  width: 23%;
}

#dreTesteTable th:nth-child(4),
#dreTesteTable td:nth-child(4) {
  width: 13%;
}

#dreTesteTable th:nth-child(5),
#dreTesteTable td:nth-child(5) {
  width: 9%;
}

#dreTesteTable th:nth-child(6),
#dreTesteTable td:nth-child(6) {
  width: 6%;
  overflow: visible;
  text-align: center;
}

#dreTesteTable .financeRow.section td {
  padding: 0;
  border-top: 10px solid light-dark(#fff, #11181d);
  border-bottom: 1px solid light-dark(rgba(226, 222, 216, 0.86), rgba(50, 58, 63, 0.86));
}

#dreTesteTable .financeRow.section .sectionToggle {
  align-items: center;
  background: light-dark(#f7f7f6, #192025);
  border: 0;
  border-left: 4px solid light-dark(#b9c2c7, #525a60);
  color: var(--ink);
  cursor: pointer;
  display: flex;
  gap: 10px;
  justify-content: flex-start;
  padding: 11px 12px;
  text-align: left;
  width: 100%;
}

#dreTesteTable .financeRow.section.group .sectionToggle {
  color: var(--teal);
  background: light-dark(#f4fafb, #181f24);
  border-left: 4px solid var(--teal);
}

#dreTesteTable .financeRow.section.subgroup .sectionToggle {
  color: var(--orange-dark);
  background: light-dark(#fff4ec, #1a2126);
  border-left: 4px solid var(--orange);
}

#dreTesteTable .financeRow.section.system .sectionToggle {
  color: light-dark(#5f6670, #afb8bf);
  background: light-dark(#f7f7f6, #192025);
  border-left: 4px solid light-dark(#b9c2c7, #525a60);
}

#dreTesteTable .financeRow.section.summary .sectionToggle {
  color: var(--ink);
  background: light-dark(#f3fbfd, #171e23);
  border-left: 4px solid var(--green);
}

#dreTesteTable .sectionToggleIcon {
  align-items: center;
  border: 1px solid light-dark(rgba(39, 119, 141, 0.25), rgba(82, 158, 181, 0.25));
  border-radius: 999px;
  display: inline-flex;
  flex: 0 0 22px;
  font-size: 15px;
  font-weight: 900;
  height: 22px;
  justify-content: center;
  line-height: 1;
}

#dreTesteTable .sectionToggleLabel {
  flex: 1;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0;
  text-transform: none;
}

#dreTesteTable .sectionToggleMeta {
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
}

#dreTesteTable .financeRow.section.collapsed .sectionToggle {
  filter: saturate(0.9);
}

#dreTesteTable .financeRow.reference td {
  color: var(--ink);
  background: light-dark(#f6fbfc, #161d22);
  font-style: normal;
}

#dreTesteTable .financeRow.sectionTotal td {
  background: light-dark(#fbfaf8, #161d22);
  border-top: 1px solid light-dark(rgba(39, 119, 141, 0.28), rgba(82, 158, 181, 0.28));
  color: var(--ink);
  font-weight: 800;
}

#dreTesteTable .financeRow.sectionTotal .dreTesteLineCell {
  color: var(--teal);
  padding-left: 22px;
}

#dreTesteTable .sectionTotalHint {
  color: var(--muted);
  display: block;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.25;
  text-align: left;
}

#dreTesteTable .dreTesteLineCell {
  font-weight: 600;
}

#dreTesteTable .dreTesteMoneyCell,
#dreTesteTable .dreTestePercentCell {
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  font-size: 12px;
}

#dreTesteTable .dreTesteUsedCell {
  font-size: 13px;
}

#dreTesteTable .dreTesteUsedCell strong {
  display: block;
}

#dreTesteTable .dreTesteSourceInput {
  width: 100%;
  min-height: 54px;
  max-height: 74px;
  padding: 6px 8px;
  font-size: 12px;
  line-height: 1.25;
  resize: vertical;
  overflow: auto;
}

#dreTesteTable .manualValueControl {
  grid-template-columns: minmax(118px, 1fr) minmax(42px, auto) auto;
  gap: 5px;
  min-width: 0;
}

#dreTesteTable .manualValueControl input {
  min-height: 34px;
  padding: 0 9px;
  font-size: 12px;
}

#dreTesteTable .miniAction {
  min-width: 42px;
  min-height: 34px;
  padding: 0 9px;
  font-weight: 800;
  white-space: nowrap;
}

.dreTesteRevenueAudit {
  display: grid;
  gap: 10px;
}

.dreTesteRevenueAudit .auditMeta {
  margin: 0;
}

.revenueAuditGroup {
  border: 1px solid var(--line);
  border-radius: 10px;
  background: light-dark(#fff, #11181d);
  overflow: hidden;
}

.revenueAuditGroup summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  min-height: 56px;
  padding: 12px 14px;
  cursor: pointer;
  background: light-dark(#fbfaf8, #161d22);
}

.revenueAuditGroup summary strong,
.revenueAuditGroup summary small {
  display: block;
}

.revenueAuditGroup summary strong {
  color: var(--ink);
  font-size: 14px;
}

.revenueAuditGroup summary small {
  margin-top: 3px;
  color: var(--muted);
  font-size: 12px;
}

.revenueAuditGroup summary em {
  color: var(--teal);
  font-style: normal;
  font-weight: 800;
  white-space: nowrap;
}

.dreTesteAuditTable {
  min-width: 1120px;
}

.dreTesteAuditTable th:nth-child(1),
.dreTesteAuditTable td:nth-child(1) {
  width: 11%;
}

.dreTesteAuditTable th:nth-child(2),
.dreTesteAuditTable td:nth-child(2) {
  width: 10%;
  text-align: left;
}

.dreTesteAuditTable th:nth-child(3),
.dreTesteAuditTable td:nth-child(3) {
  width: 15%;
  text-align: left;
}

.dreTesteAuditTable th:nth-child(4),
.dreTesteAuditTable td:nth-child(4),
.dreTesteAuditTable th:nth-child(5),
.dreTesteAuditTable td:nth-child(5),
.dreTesteAuditTable th:nth-child(6),
.dreTesteAuditTable td:nth-child(6),
.dreTesteAuditTable th:nth-child(7),
.dreTesteAuditTable td:nth-child(7) {
  width: 10%;
  text-align: right;
}

.dreTesteAuditTable th:nth-child(8),
.dreTesteAuditTable td:nth-child(8) {
  width: 24%;
  text-align: left;
}

.dreTesteAuditTable .mutedCell {
  display: block;
  margin-top: 3px;
}

.miniAction {
  min-height: 30px;
  padding: 0 8px;
  border-radius: 6px;
  font-size: 11px;
}

.miniAction.ghost {
  background: light-dark(#fff, #11181d);
  color: var(--teal);
  border: 1px solid var(--line);
}

.adjustmentBadge {
  display: inline-block;
  margin-left: 8px;
  padding: 2px 6px;
  border-radius: 999px;
  background: light-dark(#fff1e8, #1c2328);
  color: var(--orange-dark);
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
}

.mutedCell {
  display: block;
  margin-top: 4px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 400;
}

.smallAction {
  min-height: 30px;
  padding: 0 10px;
  font-size: 12px;
}

td select {
  min-height: 32px;
  width: 100%;
  padding: 0 8px;
  font-size: 12px;
}

.positive {
  color: var(--green);
}

.negative {
  color: var(--red);
}

/* Global polish pass */
:where(.topbar)),
:where(.sidebar)),
:where(.panel)),
:where(.subpanel),
.moduleCard,
.metricGroup,
:where(.kpi)),
.ceoHero > div,
:where(.netProfitHero),
:where(.filterSummary)),
:where(.tinyFilter),
:where(.note){
  border-color: rgba(24, 34, 43, 0.10);
}
:where(.topbar)),
:where(.sidebar)),
:where(.panel)){
  box-shadow: var(--shadow-soft);
}
:where(.panel)){
  padding: 18px;
  border-radius: 10px;
}

:where(.subpanel),
.moduleCard,
.metricGroup,
:where(.kpi)),
.ceoHero > div,
:where(.netProfitHero),
:where(.filterSummary)),
:where(.note){
  border-radius: 8px;
}

:where(.panelHeader){
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(24, 34, 43, 0.07);
}

:where(.panelHeader:has(+ .filterShell)),
:where(.panelHeader:has(+ .subTabs)){
  margin-bottom: 10px;
}

:where(.sectionHint),
:where(.miniNote),
:where(.note){
  max-width: 980px;
  line-height: 1.45;
}
:where(.sidebar)){
  padding: 14px;
  background: light-dark(rgba(255, 255, 255, 0.96), rgba(17, 24, 29, 0.96));
}
:where(.sidebarBlock)){
  gap: 6px;
}
:where(.sidebarTitle)){
  margin: 8px 0 3px;
  color: light-dark(#bf4e08, #e06c33);
  letter-spacing: 0;
}
:where(.sidebarBlock:first-child .sidebarTitle)){
  margin-top: 0;
}

:where(.navItem){
  min-height: 38px;
  border-radius: 8px;
  background: transparent;
  font-size: 14px;
}

:where(.navSubItem){
  min-height: 32px;
  border-radius: 7px;
  font-size: 13px;
}

:where(.navItem:hover),
:where(.navItem.active),
:where(.navGroup:has(.navSubItem.active) > .navItem){
  box-shadow: inset 3px 0 0 var(--orange);
}

button {
  border-radius: 8px;
  transition: background 0.16s ease, border-color 0.16s ease, color 0.16s ease, box-shadow 0.16s ease, transform 0.16s ease;
}

button:hover {
  box-shadow: 0 4px 12px rgba(40, 119, 141, 0.16);
}

button:active {
  transform: translateY(1px);
}

button:focus-visible,
input:focus-visible,
select:focus-visible {
  outline: 2px solid rgba(255, 117, 31, 0.35);
  outline-offset: 2px;
}

.ghostButton,
:where(.filterSummary button)){
  box-shadow: none;
}
:where(.filterSummary)){
  min-height: 46px;
  padding: 8px 12px;
  background: linear-gradient(180deg, light-dark(#ffffff, #11181d), light-dark(#fbfdfe, #141b1f));
}
:where(.filterSummary strong)){
  font-size: 14px;
}

:where(.tinyFilter){
  border-color: light-dark(rgba(40, 119, 141, 0.18), rgba(83, 158, 181, 0.18));
  box-shadow: 0 18px 42px rgba(19, 32, 42, 0.18);
}

.filterTab.active {
  color: var(--teal);
  border-bottom-color: var(--teal);
}

:where(.filterChips button.active),
.filterMonthPicker button.active {
  border-color: var(--teal);
  background: var(--teal);
  color: #fff;
}

.filterActions button:first-child,
:where(.subTab.active){
  background: var(--orange);
  border-color: var(--orange);
}

.subTabs {
  gap: 7px;
}

:where(.subTab){
  min-height: 36px;
  border-radius: 8px;
  font-size: 14px;
}
:where(.kpi)){
  min-height: 88px;
  gap: 10px;
  padding: 14px;
  border-color: light-dark(rgba(40, 119, 141, 0.16), rgba(83, 158, 181, 0.16));
  background: linear-gradient(180deg, light-dark(#ffffff, #11181d), light-dark(#fbfdfe, #141b1f));
  box-shadow: var(--shadow-tight);
}
:where(.kpi.warning)){
  border-color: rgba(255, 117, 31, 0.24);
  background: linear-gradient(180deg, light-dark(#ffffff, #11181d), light-dark(#fff8f3, #171e23));
}
:where(.kpi span)){
  min-height: 0;
  font-size: 12px;
}
:where(.kpi strong)){
  font-size: clamp(17px, 1.35vw, 23px);
  letter-spacing: 0;
  line-height: 1.08;
  overflow-wrap: anywhere;
}

.ceoKpis .kpi strong,
.dreMetricGroups .kpi strong,
.commissionHeaderKpis .kpi strong {
  font-size: clamp(16px, 1.35vw, 22px);
  white-space: normal;
  overflow-wrap: anywhere;
}

:where(.financeKpis),
:where(.qualityKpis),
:where(.olistDreKpis),
.stockKpis {
  gap: 12px;
}

:where(.subpanel){
  padding: 14px;
  background: light-dark(rgba(255, 255, 255, 0.98), rgba(17, 24, 29, 0.98));
  box-shadow: var(--shadow-tight);
}

:where(.tableWrap){
  border: 1px solid rgba(24, 34, 43, 0.08);
  border-radius: 8px;
  background: light-dark(#fff, #11181d);
}

:where(.tableWrap table){
  background: light-dark(#fff, #11181d);
}

th {
  color: light-dark(#0f6074, #579eb3);
  background: light-dark(#f7fbfc, #161d22);
  font-size: 11px;
  line-height: 1.25;
}

td {
  color: light-dark(#18222b, #deecf9);
  line-height: 1.25;
}

th,
td {
  padding: 9px 8px;
  border-bottom-color: rgba(24, 34, 43, 0.10);
  vertical-align: middle;
}

table:not(#dreTesteTable) tbody tr:hover td {
  background: light-dark(rgba(40, 119, 141, 0.035), rgba(83, 158, 181, 0.035));
}

.financeRow.subtotal td,
.financeRow.total td,
.financeRow.cash td {
  background: light-dark(#fff7f0, #181f24);
}

.financeRow.section td {
  background: light-dark(#fff3e9, #1b2227);
}

.financeRow.reference td {
  background: light-dark(#f2fafc, #181f24);
}

#dreTesteTable .financeRow.section .sectionToggle {
  min-height: 44px;
  border-radius: 0;
}

#dreTesteTable .financeRow.section.group .sectionToggle {
  border-left: 4px solid var(--teal);
}

#dreTesteTable .financeRow.section.subgroup .sectionToggle {
  border-left: 4px solid var(--orange);
}

#dreTesteTable .financeRow.sectionTotal td {
  background: light-dark(#f7fbfc, #161d22);
}

#dreTesteTable .manualValueControl input,
td select,
input,
select {
  border-color: rgba(24, 34, 43, 0.16);
}

.traceMarker,
.commissionLevelBadge,
.commissionStatusPill,
.severity {
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.55);
}

:where(.sellerCommissionPage .sellerCommissionSummary){
  border-radius: 10px;
}

:where(.sellerCommissionPage .sellerCommissionSummary .commissionHeaderKpis.financeKpis){
  gap: 12px;
}

.commissionHeroCard {
  border-radius: 8px;
}

.commissionChecklistItem {
  min-height: 86px;
  border-radius: 8px;
}

@media (max-width: 1050px) {
:where(.appLayout)){
    grid-template-columns: 1fr;
  }
:where(.sidebar)){
    position: static;
  }
:where(.sidebarBlock)){
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
:where(.sidebarTitle)){
    grid-column: 1 / -1;
  }
:where(.topbar)),
  :where(.panelHeader){
    align-items: flex-start;
    flex-direction: column;
  }

  :where(.brand){
    align-items: center;
  }

  :where(.topbarMeta){
    justify-content: flex-start;
  }

  .olistBox,
  .statusGrid,
  .dreMetricGroups,
  .ceoHero,
  .ceoInsights,
  .ceoReliabilityBoard,
  :where(.olistDreKpis),
  :where(.financeKpis),
  :where(.qualityKpis),
  .stockPage.active,
  .dashboardGrid,
  .moduleGrid {
    grid-template-columns: 1fr;
  }

  :where(.subpanel.span2){
    grid-column: auto;
  }

  .metricGroupMain {
    grid-column: auto;
  }
}

@media (max-width: 720px) {
  body {
    background: linear-gradient(180deg, light-dark(#fff8f3, #171e23) 0, var(--bg) 18rem);
  }

  :where(.shell){
    width: 100%;
    padding: 8px 8px 24px;
  }
:where(.topbar)){
    min-height: 0;
    gap: 10px;
    padding: 10px;
    margin-bottom: 8px;
    border-radius: 10px;
  }

  :where(.brand){
    width: 100%;
    gap: 9px;
  }

  :where(.brandMark){
    width: 46px;
    height: 46px;
    border-radius: 9px;
  }

  :where(.brandMark img){
    width: 38px;
    height: 38px;
  }

  :where(.brandText h1),
  h1 {
    font-size: 22px;
  }

  .brandSignature {
    margin-top: 2px;
    font-size: 14px;
  }

  .eyebrow {
    font-size: 10px;
  }

  :where(.topbarMeta){
    width: 100%;
    justify-content: flex-start;
    gap: 6px;
  }

  :where(.topbarMeta span){
    min-height: 26px;
    padding: 0 9px;
    font-size: 11px;
  }
:where(.appLayout)){
    gap: 8px;
  }
:where(.sidebar)){
    position: sticky;
    top: 0;
    z-index: 60;
    display: flex;
    gap: 8px;
    width: calc(100vw - 16px);
    max-width: calc(100vw - 16px);
    margin: 0 0 8px;
    padding: 8px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    border-radius: 10px;
    box-shadow: 0 8px 18px rgba(24, 34, 43, 0.08);
    scrollbar-width: thin;
  }
:where(.sidebarBlock)),
  :where(.navGroup){
    display: flex;
    align-items: center;
    gap: 6px;
    flex: 0 0 auto;
  }
:where(.navChildren)){
    display: none;
    align-items: center;
    gap: 6px;
    flex: 0 0 auto;
  }

  :where(.navGroup:hover .navChildren),
  :where(.navGroup:focus-within .navChildren),
  :where(.navGroup:has(.navSubItem.active) .navChildren){
    display: flex;
  }
:where(.sidebarTitle)){
    display: none;
  }
:where(.navChildren)){
    margin: 0;
    padding-left: 0;
    border-left: 0;
  }

  :where(.navItem),
  :where(.navSubItem){
    width: auto;
    min-width: max-content;
    min-height: 34px;
    padding: 0 10px;
    border-color: rgba(255, 117, 31, 0.18);
    border-radius: 999px;
    font-size: 13px;
    line-height: 1;
    white-space: nowrap;
  }

  :where(.navSubItem){
    height: 34px;
    color: var(--muted);
  }
:where(.panel)){
    padding: 10px;
    margin-bottom: 10px;
    border-radius: 10px;
    box-shadow: 0 6px 16px rgba(24, 34, 43, 0.05);
  }

  :where(.panelHeader),
  .dreTop {
    gap: 8px;
    margin-bottom: 10px;
  }

  :where(.panelHeader h2),
  .dreHeader h2 {
    font-size: 21px;
  }

  :where(.sectionHint){
    font-size: 12px;
    line-height: 1.35;
  }

  :where(.filterShell){
    margin-bottom: 10px;
  }
:where(.filterSummary)){
    align-items: stretch;
    min-height: 0;
    padding: 8px;
  }
:where(.filterSummary > div)){
    align-items: flex-start;
    gap: 4px 8px;
  }
:where(.filterSummary strong)){
    font-size: 14px;
    line-height: 1.25;
  }
:where(.filterSummary button)){
    flex: 0 0 auto;
    min-height: 34px;
  }

  :where(.tinyFilter){
    position: fixed;
    top: 86px;
    right: 10px;
    left: 10px;
    z-index: 120;
    width: auto;
    max-height: calc(100vh - 104px);
    overflow: auto;
    padding: 12px;
  }

  .filterTabs,
  :where(.filterChips),
  .filterActions {
    gap: 6px;
  }

  :where(.filterChips button){
    min-height: 34px;
    padding: 0 11px;
    font-size: 13px;
  }

  .filterMonthPicker {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .filterRange {
    grid-template-columns: 1fr;
  }

  .subTabs {
    display: flex;
    flex-wrap: nowrap;
    gap: 6px;
    margin: 0 -10px 10px;
    padding: 0 10px 2px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scrollbar-width: thin;
  }

  :where(.subTab){
    flex: 0 0 auto;
    min-height: 34px;
    padding: 0 11px;
    border-radius: 999px;
    white-space: nowrap;
  }

  .dreMetricGroups,
  .dashboardGrid,
  .ceoHero,
  .ceoInsights,
  .ceoReliabilityBoard,
  :where(.olistDreKpis),
  :where(.financeKpis),
  :where(.qualityKpis),
  .stockKpis,
  .moduleGrid,
  .auditGrid,
  .olistBox,
  .statusGrid,
  .stockPage.active,
  .localPage.active.moduleGrid,
  .localPage.active.dashboardGrid,
  .localPage.active.financeKpis,
  .localPage.active.qualityKpis {
    grid-template-columns: 1fr;
  }

  .moduleCard.span2,
  .moduleGrid > .span2,
  :where(.subpanel.span2),
  .metricGroupMain {
    grid-column: auto;
  }

  .metricGroup,
  :where(.subpanel),
  .moduleCard {
    padding: 10px;
    border-radius: 9px;
  }
:where(.kpi)),
  .dreMetricGroups .kpi,
  .ceoKpis .kpi {
    min-height: 78px;
    padding: 11px;
    gap: 8px;
  }
:where(.kpi span)),
  .ceoKpis .kpi span {
    min-height: 0;
    font-size: 12px;
  }
:where(.kpi strong)),
  .dreMetricGroups .kpi strong,
  .ceoKpis .kpi strong {
    font-size: 21px;
    white-space: normal;
    overflow-wrap: anywhere;
  }

  .commissionHeader {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .commissionHeaderKpis.financeKpis {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  :where(.sellerCommissionPage .sellerCommissionSummary .commissionHeaderKpis.financeKpis),
  .commissionChecklist {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  :where(.sellerCommissionPage .commissionProgressHeader),
  :where(.sellerCommissionPage .commissionNextLevel){
    align-items: flex-start;
    flex-direction: column;
  }

  :where(.sellerCommissionPage .commissionProgressHeader p),
  :where(.sellerCommissionPage .commissionNextLevel span){
    text-align: left;
  }

  .userFormGrid {
    grid-template-columns: 1fr;
  }

  .userEditorHeader {
    align-items: flex-start;
    flex-direction: column;
  }

  .userEditorGrid,
  .userEditorGrid.twoColumns,
  .userPermissionCards {
    grid-template-columns: 1fr;
  }

  .userPermissionCard {
    min-height: 0;
  }

  .userEditorActions,
  .userEditorActions button {
    width: 100%;
  }

  .configAdminHeader {
    align-items: flex-start;
    flex-direction: column;
  }

  .configAdminToolbar {
    display: flex;
  }

  .configAdminTitle {
    width: 100%;
  }

  .configAdminActions,
  .configAdminActions input,
  .configAdminActions button {
    width: 100%;
  }

  .configAdminToolbar .configAdminActions {
    flex-wrap: wrap;
    width: 100%;
  }

  .configAdminToolbar .configAdminSearch,
  .configAdminToolbar .configAdminNewButton {
    width: 100%;
  }

  .configAdminToolbar .configAdminSearch {
    max-width: none;
    min-width: 0;
  }

  .userFormActions,
  .permissionToolbar {
    align-items: stretch;
    flex-wrap: wrap;
  }

  .accessProfileFormGrid {
    grid-template-columns: 1fr;
  }

  .accessProfileAreasPanelHeader {
    align-items: stretch;
    flex-direction: column;
  }

  .accessProfileAreasActions,
  .accessProfileAreasActions button {
    width: 100%;
  }

  .accessProfileAreasGrid {
    grid-template-columns: repeat(auto-fill, minmax(132px, 1fr));
  }

  .permissionGrid {
    grid-template-columns: 1fr;
  }

  .ceoHero > div,
  :where(.netProfitHero){
    min-height: 0;
    padding: 12px;
  }

  .ceoHero strong,
  :where(.netProfitHero strong){
    font-size: 27px;
    overflow-wrap: anywhere;
  }

  :where(.netProfitHero){
    align-items: flex-start;
    flex-direction: column;
  }

  .scoreBadge {
    grid-template-columns: 1fr;
    gap: 6px;
    min-height: 0;
  }

  .scoreBadge strong {
    grid-row: auto;
    font-size: 30px;
  }

  :where(.tableWrap),
  .dreTesteTableWrap {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
  }

  :where(.tableWrap table){
    min-width: 680px;
  }

  #dreTesteTable {
    min-width: 920px;
  }

  .dreTesteAuditTable {
    min-width: 1040px;
  }

  th,
  td {
    padding: 7px 6px;
    font-size: 11px;
  }

  th:first-child,
  td:first-child {
    width: 28%;
  }

  #dreTesteTable th,
  #dreTesteTable td {
    padding: 7px 6px;
  }

  #dreTesteTable .sectionToggleLabel {
    font-size: 12px;
  }

  #dreTesteTable .sectionToggleMeta {
    display: none;
  }

  #dreTesteTable .manualValueControl {
    grid-template-columns: minmax(108px, 1fr) auto;
    min-width: 0;
  }

  #dreTesteTable .manualValueControl .miniAction.ghost,
  #dreTesteTable .manualValueControl button:nth-child(3) {
    grid-column: 1 / -1;
  }

  .manualValueControl {
    min-width: 180px;
  }

  .tracePopover {
    position: fixed;
    top: auto;
    right: 10px;
    bottom: 10px;
    left: 10px;
    width: auto;
    max-height: 52vh;
    overflow: auto;
  }

  .bankChecklistList {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 430px) {
  :where(.shell){
    padding: 6px 6px 20px;
  }
:where(.sidebar)){
    width: calc(100vw - 12px);
    max-width: calc(100vw - 12px);
    padding: 7px;
  }
:where(.panel)){
    padding: 8px;
  }
:where(.topbar)){
    padding: 8px;
  }

  :where(.brandText h1),
  h1 {
    font-size: 20px;
  }
:where(.filterSummary)){
    flex-direction: column;
  }
:where(.filterSummary button)){
    width: 100%;
    justify-content: center;
  }

  :where(.olistDreKpis),
  :where(.financeKpis),
  :where(.qualityKpis),
  .ceoKpis,
  .stockKpis {
    gap: 8px;
  }
:where(.kpi)),
  .dreMetricGroups .kpi,
  .ceoKpis .kpi {
    min-height: 72px;
  }
:where(.kpi strong)),
  .dreMetricGroups .kpi strong,
  .ceoKpis .kpi strong {
    font-size: 19px;
  }

  :where(.sellerCommissionPage .sellerCommissionSummary .commissionHeaderKpis.financeKpis),
  .commissionChecklist {
    grid-template-columns: 1fr;
  }

  .commissionHeroCard,
  .commissionChecklistItem {
    min-height: auto;
  }
}

@media (max-width: 1050px) {
:where(.topbar)),
:where(.panel)){
    box-shadow: var(--shadow-tight);
  }
:where(.sidebar)){
    border-radius: 10px;
  }
}

@media (max-width: 720px) {
  body {
    font-size: 13px;
  }

  :where(.shell){
    padding-top: 8px;
  }

  :where(.topbarMeta span){
    max-width: 100%;
    white-space: normal;
  }

  :where(.panelHeader){
    padding-bottom: 8px;
  }
:where(.filterSummary)){
    gap: 8px;
  }
:where(.kpi)){
    box-shadow: none;
  }

  :where(.sellerCommissionPage .sellerCommissionSummary .commissionHeaderKpis.financeKpis){
    grid-template-columns: 1fr 1fr;
  }

  .commissionHeroCard strong {
    font-size: 19px;
  }

  .commissionChecklistItem small {
    overflow-wrap: anywhere;
  }
}

@media (max-width: 430px) {
  :where(.sellerCommissionPage .sellerCommissionSummary .commissionHeaderKpis.financeKpis){
    grid-template-columns: 1fr;
  }

  .commissionProgressPanel {
    padding: 11px;
  }

  .commissionProgressHeader strong {
    font-size: 30px;
  }
}

/* Collapsible navigation rail */
@media (min-width: 721px) {
:where(.appLayout)){
    grid-template-columns: 252px minmax(0, 1fr);
    transition: grid-template-columns 0.22s ease;
  }
:where(.appLayout.sidebarCollapsed)){
    grid-template-columns: 70px minmax(0, 1fr);
  }
:where(.sidebar)){
    gap: 14px;
    padding: 12px;
    border-color: rgba(255, 117, 31, 0.24);
    background: linear-gradient(180deg, light-dark(#171858, #7e8cd7), light-dark(#101347, #7f8ecd));
    color: #fff;
    box-shadow: 0 18px 34px rgba(16, 19, 71, 0.20);
  }

  :where(.sidebarToggle){
    width: 44px;
    min-height: 44px;
    padding: 0;
    justify-self: start;
    border-color: light-dark(rgba(255, 255, 255, 0.14), rgba(17, 24, 29, 0.14));
    border-radius: 12px;
    background: light-dark(rgba(255, 255, 255, 0.08), rgba(17, 24, 29, 0.08));
    color: #fff;
    font-size: 18px;
  }

  :where(.sidebarToggle:hover){
    background: rgba(255, 117, 31, 0.28);
    border-color: rgba(255, 117, 31, 0.44);
  }
:where(.sidebarTitle)){
    color: light-dark(#ffb27d, #44250c);
  }
:where(.navChildren)){
    border-left-color: rgba(255, 117, 31, 0.34);
  }

  :where(.navItem){
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 40px;
    border-color: transparent;
    background: transparent;
    color: rgba(255, 255, 255, 0.88);
  }

  :where(.navItem::before){
    content: attr(data-icon);
    display: inline-grid;
    place-items: center;
    flex: 0 0 auto;
    width: 26px;
    height: 26px;
    color: #fff;
    font-family: "Segoe UI Symbol", "Segoe UI", Arial, sans-serif;
    font-size: 18px;
    font-weight: 800;
    line-height: 1;
    border: 1px solid light-dark(rgba(255, 255, 255, 0.42), rgba(17, 24, 29, 0.42));
    border-radius: 8px;
  }

  :where(.navSubItem){
    color: rgba(255, 255, 255, 0.72);
  }

  :where(.navItem:hover),
  :where(.navItem.active),
  :where(.navGroup:has(.navSubItem.active) > .navItem){
    border-color: rgba(255, 117, 31, 0.32);
    background: rgba(255, 117, 31, 0.17);
    color: #fff;
    box-shadow: inset 3px 0 0 var(--orange);
  }

  :where(.navItem:hover::before),
  :where(.navItem.active::before),
  :where(.navGroup:has(.navSubItem.active) > .navItem::before){
    border-color: rgba(255, 117, 31, 0.75);
    color: light-dark(#ffb27d, #44250c);
  }
:where(.appLayout.sidebarCollapsed .sidebar)){
    align-content: start;
    padding: 10px 8px;
    width: 70px;
  }
:where(.appLayout.sidebarCollapsed .sidebarToggle)){
    justify-self: center;
  }
:where(.appLayout.sidebarCollapsed .sidebarTitle)),
:where(.appLayout.sidebarCollapsed .navGroup .navChildren)),
:where(.appLayout.sidebarCollapsed .navChildren)){
    display: none;
  }
:where(.appLayout.sidebarCollapsed .sidebarBlock)),
:where(.appLayout.sidebarCollapsed .navGroup)){
    display: grid;
    gap: 8px;
    justify-items: center;
  }
:where(.appLayout.sidebarCollapsed .navItem)){
    justify-content: center;
    width: 44px;
    min-height: 44px;
    padding: 0;
    border-radius: 12px;
    font-size: 0;
    line-height: 0;
    overflow: hidden;
  }
:where(.appLayout.sidebarCollapsed .navItem::before)){
    width: 28px;
    height: 28px;
    margin: 0;
    font-size: 18px;
  }
}

@media (max-width: 720px) {
  :where(.sidebarToggle){
    flex: 0 0 auto;
    width: 38px;
    min-height: 34px;
    padding: 0;
    border-radius: 999px;
  }

  :where(.navItem::before){
    content: attr(data-icon);
    display: inline-grid;
    place-items: center;
    width: 22px;
    height: 22px;
    margin-right: 5px;
    border: 1px solid currentColor;
    border-radius: 7px;
    font-family: "Segoe UI Symbol", "Segoe UI", Arial, sans-serif;
    font-weight: 800;
  }
}

/* Seller progress board */
:where(.sellerCommissionPage .commissionProgressPanel){
  grid-template-columns: minmax(0, 1.18fr) minmax(300px, 0.82fr);
  gap: 14px;
  align-items: stretch;
}

.commissionProgressMain,
.commissionChecklistPanel {
  min-width: 0;
  padding: 12px;
  border: 1px solid light-dark(rgba(237, 248, 251, 0.14), rgba(27, 34, 39, 0.14));
  border-radius: 10px;
  background: light-dark(rgba(255, 255, 255, 0.06), rgba(17, 24, 29, 0.06));
}

.commissionChecklistPanel {
  display: grid;
  align-content: start;
  gap: 10px;
}

.commissionChecklistPanel h3 {
  margin: 0;
  color: #ffffff;
  font-size: 14px;
}

.commissionChecklistPanel .commissionChecklist {
  grid-template-columns: 1fr;
  gap: 7px;
}

.commissionChecklistPanel .commissionChecklistItem {
  grid-template-columns: 28px minmax(0, 1fr);
  align-items: center;
  min-height: 48px;
  padding: 8px 10px;
  border-radius: 8px;
  background: light-dark(rgba(255, 255, 255, 0.07), rgba(17, 24, 29, 0.07));
}

.commissionCheckIcon {
  display: inline-grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 900;
}

.commissionChecklistItem.ok .commissionCheckIcon {
  background: light-dark(rgba(120, 230, 189, 0.16), rgba(2, 55, 39, 0.16));
  color: light-dark(#78e6bd, #023727);
}

.commissionChecklistItem.ok .commissionCheckIcon::before {
  content: "OK";
}

.commissionChecklistItem.attention .commissionCheckIcon {
  background: light-dark(rgba(255, 178, 125, 0.16), rgba(68, 37, 12, 0.16));
  color: light-dark(#ffb27d, #44250c);
}

.commissionChecklistItem.attention .commissionCheckIcon::before {
  content: "!";
}

.commissionChecklistItem.blocked .commissionCheckIcon {
  background: rgba(255, 154, 142, 0.18);
  color: #ff9a8e;
}

.commissionChecklistItem.blocked .commissionCheckIcon::before {
  content: "!";
}

.commissionCheckText {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.commissionChecklistItem .commissionCheckText span {
  color: light-dark(rgba(237, 248, 251, 0.72), rgba(27, 34, 39, 0.72));
  font-size: 11px;
  font-weight: 700;
}

.commissionChecklistItem .commissionCheckText strong {
  font-size: 13px;
}

.commissionChecklistItem .commissionCheckText small {
  font-size: 11px;
}

@media (max-width: 1050px) {
  :where(.sellerCommissionPage .commissionProgressPanel){
    grid-template-columns: 1fr;
  }

  :where(.commissionLevelCards){
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 620px) {
  :where(.commissionLevelCards){
    grid-template-columns: 1fr;
  }

  .commissionLevelCard {
    min-height: 0;
  }
}

/* 3D Curitiba design system refresh */
:root {
  --ds-orange: #ff6f21;
  --ds-orange-soft: light-dark(#fff3ec, #1b2227);
  --ds-teal: light-dark(#1f7589, #4f9fb4);
  --ds-teal-dark: light-dark(#123f4d, #bce3f2);
  --ds-navy: light-dark(#121a3a, #e0ebff);
  --ds-bg: light-dark(#f6f7f8, #192025);
  --ds-surface: light-dark(#ffffff, #11181d);
  --ds-surface-soft: light-dark(#f7fbfc, #161d22);
  --ds-border: light-dark(#d9e5ea, #2e353b);
  --ds-border-soft: light-dark(#ecf1f3, #20272d);
  --ds-text: light-dark(#12202b, #dbeefd);
  --ds-muted: light-dark(#617280, #9eb0bf);
  --ds-positive: light-dark(#007a4f, #46a87a);
  --ds-negative: light-dark(#c91d0b, #f6503c);
  --ds-shadow: 0 14px 34px rgba(18, 32, 43, 0.08);
  --ds-radius: 12px;
}

body {
  background:
    linear-gradient(90deg, rgba(255, 111, 33, 0.06), transparent 18%, transparent 82%, light-dark(rgba(31, 117, 137, 0.05), rgba(79, 159, 180, 0.05))),
    var(--ds-bg);
  color: var(--ds-text);
}

:where(.shell){
  width: min(1760px, calc(100% - 28px));
  padding: 14px 0 34px;
}
:where(.topbar)){
  min-height: 74px;
  padding: 12px 18px;
  border: 1px solid var(--ds-border);
  border-radius: 14px;
  background: light-dark(rgba(255, 255, 255, 0.96), rgba(17, 24, 29, 0.96));
  box-shadow: var(--ds-shadow);
}

:where(.brand){
  gap: 12px;
}

:where(.brandMark){
  width: 52px;
  height: 52px;
  border: 1px solid rgba(255, 111, 33, 0.28);
  border-radius: 13px;
  background: light-dark(#fff, #11181d);
  box-shadow: 0 8px 18px rgba(18, 32, 43, 0.06);
}

:where(.brandMark img){
  width: 38px;
  height: 38px;
  object-fit: contain;
}

:where(.brandText .eyebrow),
:where(.panelHeader .eyebrow){
  margin-bottom: 2px;
  color: light-dark(#e65300, #f05c16);
  font-size: 11px;
  font-weight: 850;
  letter-spacing: 0;
  text-transform: uppercase;
}

:where(.brandText h1){
  color: var(--ds-text);
  font-size: 26px;
  line-height: 1.02;
}

.brandSignature {
  color: var(--ds-teal);
  font-size: 13px;
  font-weight: 850;
}

:where(.topbarMeta){
  gap: 8px;
  margin-left: auto;
}

:where(.topbarMeta span),
.topbarAuthActions button,
.topbarAuthActions a {
  min-height: 30px;
  padding: 6px 12px;
  border: 1px solid rgba(255, 111, 33, 0.22);
  border-radius: 999px;
  background: light-dark(#fffaf7, #151c21);
  color: light-dark(#cf4d00, #e86429);
  font-size: 12px;
  font-weight: 760;
  box-shadow: none;
  text-decoration: none;
}

:where(.topbarMeta .topbarUser){
  border-color: light-dark(rgba(31, 117, 137, 0.25), rgba(79, 159, 180, 0.25));
  background: light-dark(#f5fbfc, #171e23);
  color: var(--ds-teal);
}

.topbarAuthActions {
  gap: 6px;
}

.topbarAuthActions button:last-child,
.topbarAuthActions a:last-child {
  border-color: light-dark(rgba(201, 29, 11, 0.18), rgba(246, 80, 60, 0.18));
  background: light-dark(#fff6f4, #181f24);
  color: var(--ds-negative);
}
:where(.appLayout)){
  grid-template-columns: 76px minmax(0, 1fr);
  gap: 16px;
  align-items: start;
  margin-top: 16px;
  transition: grid-template-columns 160ms ease;
}
:where(.appLayout:not(.sidebarCollapsed))),
:where(.appLayout.sidebarCollapsed:has(.sidebar:hover))){
  grid-template-columns: 260px minmax(0, 1fr);
}
:where(.sidebar)){
  position: sticky;
  top: 14px;
  min-height: calc(100vh - 112px);
  width: 76px;
  padding: 10px 8px;
  border: 1px solid rgba(255, 111, 33, 0.18);
  border-radius: 14px;
  background: linear-gradient(180deg, light-dark(#171958, #7e8cd6), light-dark(#11143f, #838fc4));
  box-shadow: 0 16px 32px rgba(18, 26, 58, 0.18);
  transition: width 160ms ease, padding 160ms ease;
}
:where(.appLayout:not(.sidebarCollapsed) .sidebar)),
:where(.appLayout.sidebarCollapsed:has(.sidebar:hover) .sidebar)){
  width: 260px;
  padding: 12px;
}

:where(.sidebarToggle){
  width: 44px;
  min-height: 44px;
  margin: 0 auto 8px;
  border: 1px solid light-dark(rgba(255, 255, 255, 0.22), rgba(17, 24, 29, 0.22));
  border-radius: 12px;
  background: light-dark(rgba(255, 255, 255, 0.08), rgba(17, 24, 29, 0.08));
  color: #fff;
  font-size: 0;
}

:where(.sidebarToggle::before){
  content: "Menu";
  font-size: 11px;
  font-weight: 850;
  letter-spacing: 0;
}
:where(.appLayout:not(.sidebarCollapsed) .sidebarToggle)),
:where(.appLayout.sidebarCollapsed:has(.sidebar:hover) .sidebarToggle)){
  width: 100%;
  justify-content: flex-start;
  padding-left: 14px;
}
:where(.sidebarBlock)){
  gap: 7px;
  margin: 0 0 12px;
}
:where(.sidebarTitle)){
  display: none;
  margin: 10px 10px 4px;
  color: light-dark(#ffb27d, #44250c);
  font-size: 10px;
  font-weight: 850;
  letter-spacing: 0;
  text-transform: uppercase;
}
:where(.appLayout:not(.sidebarCollapsed) .sidebarTitle)),
:where(.appLayout.sidebarCollapsed:has(.sidebar:hover) .sidebarTitle)){
  display: block;
}

:where(.navItem){
  width: 100%;
  min-height: 44px;
  padding: 0;
  justify-content: center;
  border: 1px solid transparent;
  border-radius: 12px;
  background: transparent;
  color: rgba(255, 255, 255, 0.9);
  font-size: 0;
  line-height: 1.15;
  box-shadow: none;
}
:where(.appLayout:not(.sidebarCollapsed) .navItem)),
:where(.appLayout.sidebarCollapsed:has(.sidebar:hover) .navItem)){
  justify-content: flex-start;
  gap: 10px;
  padding: 0 12px;
  font-size: 14px;
  font-weight: 760;
}

:where(.navItem::before){
  content: "MN";
  display: inline-grid;
  place-items: center;
  width: 32px;
  height: 32px;
  flex: 0 0 32px;
  margin: 0;
  border: 1px solid light-dark(rgba(255, 255, 255, 0.34), rgba(17, 24, 29, 0.34));
  border-radius: 10px;
  color: rgba(255, 255, 255, 0.95);
  font-family: Arial, sans-serif;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0;
}

:where(.navItem[data-view-target="ceoView"]::before){ content: "BI"; }
:where(.navItem[data-view-target="itensVendidosView"]::before){ content: "IT"; }
:where(.navItem[data-view-target="auditoriaView"]::before){ content: "AU"; }
:where(.navItem[data-view-target="dreTesteView"]::before){ content: "DR"; }
:where(.navGroup > .navItem[data-view-target="dreTesteView"]::before){ content: "FN"; }
:where(.navItem[data-view-target="estoqueView"]::before){ content: "CM"; }
:where(.navItem[data-view-target="planoContasView"]::before){ content: "PC"; }
:where(.navItem[data-view-target="lucroLiquidoView"]::before){ content: "RG"; }
:where(.navItem[data-view-target="balanceteView"]::before){ content: "BL"; }
:where(.navItem[data-view-target="vendedoresView"]::before){ content: "COM"; }
:where(.navItem[data-view-target="expedicaoView"]::before){ content: "EX"; }
:where(.navItem[data-view-target="pedidoVendaView"]::before){ content: "PV"; }
:where(.navItem[data-view-target="notasFiscaisView"]::before){ content: "NF"; }
:where(.navItem[data-view-target="notasEntradaView"]::before){ content: "NE"; }
:where(.navItem[data-view-target="contasPagarView"]::before){ content: "CP"; }
:where(.navItem[data-view-target="contasReceberView"]::before){ content: "CR"; }
:where(.navItem[data-view-target="bankStatementsView"]::before){ content: "EB"; }
:where(.navItem[data-view-target="configView"]::before){ content: "CF"; }

:where(.navItem:hover),
:where(.navItem.active),
:where(.navGroup:has(.navSubItem.active) > .navItem){
  border-color: rgba(255, 111, 33, 0.44);
  background: rgba(255, 111, 33, 0.16);
  color: #fff;
  box-shadow: inset 3px 0 0 var(--ds-orange);
}

:where(.navItem:hover::before),
:where(.navItem.active::before),
:where(.navGroup:has(.navSubItem.active) > .navItem::before){
  border-color: rgba(255, 111, 33, 0.72);
  color: #fff;
}
:where(.navChildren)){
  display: none;
  gap: 6px;
  margin: 4px 0 4px 16px;
  padding-left: 10px;
  border-left: 1px solid rgba(255, 111, 33, 0.3);
}
:where(.appLayout:not(.sidebarCollapsed) .navChildren)),
:where(.appLayout.sidebarCollapsed:has(.sidebar:hover) .navChildren)){
  display: grid;
}

:where(.navSubItem){
  min-height: 38px;
  color: rgba(255, 255, 255, 0.78);
  font-size: 13px;
}

:where(.navSubItem::before){
  width: 26px;
  height: 26px;
  flex-basis: 26px;
  border-radius: 8px;
  font-size: 9px;
}

:where(.workspace){
  min-width: 0;
}
:where(.panel)),
:where(.subpanel){
  border: 1px solid var(--ds-border);
  border-radius: 14px;
  background: light-dark(rgba(255, 255, 255, 0.97), rgba(17, 24, 29, 0.97));
  box-shadow: 0 10px 28px rgba(18, 32, 43, 0.06);
}
:where(.panel)){
  padding: 20px;
  border-top: 1px solid var(--ds-border);
}

:where(.panelHeader){
  min-height: auto;
  margin-bottom: 16px;
  padding: 0 0 14px;
  border-bottom: 1px solid var(--ds-border-soft);
}

:where(.panelHeader h2){
  color: var(--ds-text);
  font-size: 30px;
  line-height: 1.05;
}

:where(.sectionHint),
:where(.miniNote),
:where(.note){
  color: var(--ds-muted);
}

:where(.filterShell){
  position: relative;
  margin-bottom: 16px;
  padding: 10px 12px;
  border: 1px solid var(--ds-border);
  border-radius: 12px;
  background: light-dark(#fff, #11181d);
  box-shadow: 0 8px 18px rgba(18, 32, 43, 0.04);
}
:where(.filterSummary)){
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
:where(.filterSummary div)){
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 8px;
}
:where(.filterSummary span)){
  color: var(--ds-muted);
  font-size: 12px;
}
:where(.filterSummary strong)){
  color: var(--ds-text);
  font-size: 15px;
}
:where(.filterSummary button)),
.smartFilter button[data-role="open-filter"] {
  min-height: 36px;
  padding: 0 16px;
  border: 1px solid light-dark(rgba(31, 117, 137, 0.28), rgba(79, 159, 180, 0.28));
  border-radius: 10px;
  background: light-dark(#fff, #11181d);
  color: var(--ds-teal);
  font-size: 14px;
  font-weight: 850;
  box-shadow: none;
}
:where(.filterSummary button:hover)),
.smartFilter button[data-role="open-filter"]:hover {
  background: light-dark(#f3fbfc, #171e23);
  border-color: light-dark(rgba(31, 117, 137, 0.46), rgba(79, 159, 180, 0.46));
}

:where(.tinyFilter){
  position: absolute;
  top: calc(100% + 8px);
  right: 12px;
  z-index: 40;
  width: min(520px, calc(100vw - 48px));
  padding: 16px;
  border: 1px solid var(--ds-border);
  border-radius: 14px;
  background: light-dark(#fff, #11181d);
  box-shadow: 0 22px 50px rgba(18, 32, 43, 0.18);
}

.filterTabs {
  border-bottom: 1px solid var(--ds-border-soft);
}

.filterTab {
  color: var(--ds-muted);
}

.filterTab.active {
  color: var(--ds-text);
  border-bottom-color: var(--ds-orange);
}

:where(.filterChips button),
.filterActions button,
:where(.subTab),
.dreTab {
  min-height: 36px;
  border: 1px solid rgba(255, 111, 33, 0.28);
  border-radius: 10px;
  background: light-dark(#fff8f3, #171e23);
  color: light-dark(#d95300, #ea6220);
  font-weight: 850;
  box-shadow: none;
}

:where(.filterChips button.active),
.filterActions button:first-child,
:where(.subTab.active),
.dreTab.active {
  border-color: var(--ds-orange);
  background: var(--ds-orange);
  color: #fff;
}

.subTabs,
.soldItemsTabs {
  gap: 8px;
  margin-bottom: 14px;
}

:where(.financeKpis){
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 12px;
}
:where(.kpi)){
  min-height: 94px;
  padding: 16px 18px;
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius);
  background: var(--ds-surface-soft);
  box-shadow: none;
}
:where(.kpi span)){
  color: var(--ds-muted);
  font-size: 13px;
}
:where(.kpi strong)){
  display: block;
  max-width: 100%;
  margin-top: 12px;
  color: var(--ds-teal);
  font-size: 24px;
  line-height: 1.15;
  overflow-wrap: anywhere;
}
:where(.kpi.positive strong)),
.positive,
.moneyPositive {
  color: var(--ds-positive);
}
:where(.kpi.negative strong)),
.negative,
.moneyNegative {
  color: var(--ds-negative);
}
:where(.kpi.warning)),
:where(.kpi.attention)){
  border-color: rgba(255, 111, 33, 0.32);
  background: light-dark(#fffaf7, #151c21);
}

:where(.tableWrap){
  border: 1px solid var(--ds-border-soft);
  border-radius: 12px;
  background: light-dark(#fff, #11181d);
  overflow: auto;
}

:where(.tableWrap table){
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 13px;
}

:where(.tableWrap th){
  position: sticky;
  top: 0;
  z-index: 2;
  padding: 11px 12px;
  border-bottom: 1px solid var(--ds-border);
  background: light-dark(#f7fafb, #171e23);
  color: light-dark(#00647b, #4f9eb7);
  font-size: 12px;
  font-weight: 850;
  white-space: nowrap;
}

:where(.tableWrap td){
  padding: 10px 12px;
  border-bottom: 1px solid var(--ds-border-soft);
  color: var(--ds-text);
  vertical-align: middle;
}

:where(.tableWrap tr:hover td){
  background: light-dark(#fbfdfe, #141b1f);
}

:where(.tableWrap td:not(:first-child)),
:where(.tableWrap th:not(:first-child)){
  text-align: right;
}

:where(.tableWrap td:first-child),
:where(.tableWrap th:first-child){
  text-align: left;
}

.mutedCell,
:where(.miniNote){
  color: var(--ds-muted);
}

:where(.sellerCommissionPage .sellerCommissionSummary){
  border: 1px solid var(--ds-border);
  border-radius: 14px;
  background: light-dark(#fff, #11181d);
  color: var(--ds-text);
  box-shadow: 0 10px 28px rgba(18, 32, 43, 0.06);
}

:where(.sellerCommissionPage .sellerCommissionSummary .commissionHeaderKpis.financeKpis){
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 12px;
}

.commissionHeroCard {
  min-height: 132px;
  padding: 18px;
  border: 1px solid var(--ds-border);
  border-radius: 13px;
  background: var(--ds-surface-soft);
  color: var(--ds-text);
}

.commissionHeroCard span,
.commissionHeroCard small {
  color: var(--ds-muted);
}

.commissionHeroCard strong {
  color: var(--ds-teal);
  font-size: 24px;
  line-height: 1.12;
  overflow-wrap: anywhere;
}

.commissionHeroCard.warning,
.commissionHeroCard.action,
.commissionHeroCard.negative {
  border-color: rgba(255, 111, 33, 0.36);
  background: light-dark(#fff9f5, #161d22);
}

.commissionHeroCard.warning strong,
.commissionHeroCard.action strong {
  color: var(--ds-orange);
}

.commissionHeroCard.negative strong,
.commissionHeroCard.locked strong {
  color: var(--ds-negative);
}

:where(.sellerCommissionPage .commissionProgressPanel){
  grid-template-columns: minmax(0, 1.2fr) minmax(320px, 0.8fr);
  gap: 14px;
  padding: 14px;
  border: 1px solid var(--ds-border);
  border-radius: 13px;
  background: light-dark(#f8fbfc, #161d22);
}

.commissionProgressMain,
.commissionChecklistPanel {
  border: 1px solid var(--ds-border-soft);
  border-radius: 12px;
  background: light-dark(#fff, #11181d);
}

:where(.sellerCommissionPage .commissionProgressHeader strong){
  color: var(--ds-text);
}

:where(.sellerCommissionPage .commissionProgressHeader span),
:where(.sellerCommissionPage .commissionProgressHeader p),
:where(.sellerCommissionPage .commissionNextLevel span){
  color: var(--ds-muted);
}

:where(.sellerCommissionPage .commissionProgressBar){
  background: light-dark(#e5eef1, #242b31);
}

:where(.sellerCommissionPage .commissionProgressBar span){
  background: linear-gradient(90deg, var(--ds-teal), var(--ds-orange));
}

.commissionChecklistPanel h3 {
  color: var(--ds-text);
}

.commissionChecklistPanel .commissionChecklistItem {
  border: 1px solid var(--ds-border-soft);
  background: light-dark(#fff, #11181d);
}

.commissionChecklistItem .commissionCheckText span,
.commissionChecklistItem .commissionCheckText small {
  color: var(--ds-muted);
}

.commissionChecklistItem.ok .commissionCheckIcon::before {
  content: "OK";
  font-size: 8px;
}

.commissionChecklistItem.attention .commissionCheckIcon::before,
.commissionChecklistItem.blocked .commissionCheckIcon::before {
  content: "!";
}

.commissionLevelGuidePanel,
.sellerCommissionMonthlyPanel,
.sellerCommissionRankingPanel,
.commissionRulesBlock {
  border: 1px solid var(--ds-border);
  border-radius: 14px;
  background: light-dark(#fff, #11181d);
}

:where(.commissionLevelCards){
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.commissionLevelCard {
  min-height: 156px;
  border: 1px solid var(--ds-border);
  border-radius: 13px;
  background: var(--ds-surface-soft);
}

.commissionLevelCardHeader strong,
.commissionLevelFilament dd strong,
.commissionLevelPace dd strong {
  color: var(--ds-teal);
}

.commissionLevelCard.current,
.commissionLevelCard.reached {
  border-color: rgba(255, 111, 33, 0.36);
  background: light-dark(#fffaf7, #151c21);
}

.commissionLevelBadge,
.commissionStatusPill {
  border-radius: 999px;
  font-weight: 850;
}

.commissionStatusPill.ok {
  background: light-dark(#ecfbf5, #192025);
  color: var(--ds-positive);
}

.commissionStatusPill.attention {
  background: light-dark(#fff4e9, #1a2126);
  color: light-dark(#b95500, #d97230);
}

.commissionStatusPill.blocked,
.commissionLevelBadge.locked {
  background: light-dark(#fff0ee, #1c2329);
  color: var(--ds-negative);
}

.commissionMiniBar {
  height: 7px;
  border-radius: 999px;
  background: light-dark(#e5eef1, #242b31);
}

.commissionMiniBar span {
  border-radius: inherit;
  background: linear-gradient(90deg, var(--ds-teal), var(--ds-orange));
}

.sellerCommissionTable,
.sellerTargetsTable,
.commissionRulesTable {
  width: 100%;
  border: 0;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 13px;
}

.sellerCommissionTable th,
.sellerCommissionTable td,
.sellerTargetsTable th,
.sellerTargetsTable td,
.commissionRulesTable th,
.commissionRulesTable td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--ds-border-soft);
}

.sellerCommissionTable th,
.sellerTargetsTable th,
.commissionRulesTable th {
  background: light-dark(#f7fafb, #171e23);
  color: light-dark(#00647b, #4f9eb7);
  font-size: 12px;
  font-weight: 850;
  white-space: nowrap;
}

.sellerCommissionTable tr:hover td,
.sellerTargetsTable tr:hover td,
.commissionRulesTable tr:hover td {
  background: light-dark(#fbfdfe, #141b1f);
}

.sellerCommissionTable td:not(:first-child),
.sellerCommissionTable th:not(:first-child),
.sellerTargetsTable td:not(:first-child),
.sellerTargetsTable th:not(:first-child),
.commissionRulesTable td:not(:first-child),
.commissionRulesTable th:not(:first-child) {
  text-align: right;
}

.sellerCommissionTable td:first-child,
.sellerCommissionTable th:first-child,
.sellerTargetsTable td:first-child,
.sellerTargetsTable th:first-child,
.commissionRulesTable td:first-child,
.commissionRulesTable th:first-child {
  text-align: left;
}

.sellerCommissionTable .commissionStack {
  display: grid;
  justify-items: end;
  gap: 2px;
}

.sellerCommissionTable .commissionStack span {
  color: var(--ds-muted);
  font-size: 11px;
}

.sellerCommissionTable .commissionSalesCell strong {
  color: var(--teal);
  font-size: 12px;
}

.sellerCommissionTable .commissionTargetCell strong {
  color: var(--ink);
}

.sellerCommissionTable {
  table-layout: fixed;
}

.sellerCommissionTable col.commissionColLevel {
  width: 7%;
}

.sellerCommissionTable col.commissionColSeller {
  width: 14%;
}

.sellerCommissionTable col.commissionColTarget {
  width: 10%;
}

.sellerCommissionTable col.commissionColSales {
  width: 10%;
}

.sellerCommissionTable col.commissionColReleased {
  width: 10%;
}

.sellerCommissionTable col.commissionColPercent {
  width: 7%;
}

.sellerCommissionTable col.commissionColMargin {
  width: 7%;
}

.sellerCommissionTable col.commissionColDiscount {
  width: 7%;
}

.sellerCommissionTable col.commissionColFilament {
  width: 8%;
}

.sellerCommissionTable col.commissionColCourses {
  width: 5%;
}

.sellerCommissionTable col.commissionColPoints {
  width: 5%;
}

.sellerCommissionTable col.commissionColCommission {
  width: 10%;
}

.sellerCommissionTable .commissionCellLevel,
.sellerCommissionTable .commissionCellSeller,
.sellerCommissionTable th:nth-child(1),
.sellerCommissionTable th:nth-child(2) {
  text-align: left;
}

.sellerCommissionTable .commissionCellTarget,
.sellerCommissionTable .commissionTargetCell,
.sellerCommissionTable .commissionSalesCell,
.sellerCommissionTable .commissionReleasedCell,
.sellerCommissionTable .commissionCellPercent,
.sellerCommissionTable .commissionCellMargin,
.sellerCommissionTable .commissionCellDiscount,
.sellerCommissionTable .commissionCellFilament,
.sellerCommissionTable .commissionCellCourses,
.sellerCommissionTable .commissionCellPoints,
.sellerCommissionTable .commissionCellCommission,
.sellerCommissionTable th:nth-child(n+3) {
  text-align: right;
}

.sellerCommissionTable .commissionCellSeller {
  white-space: normal;
}

.sellerCommissionTable .commissionTargetCell,
.sellerCommissionTable .commissionSalesCell,
.sellerCommissionTable .commissionCellPercent,
.sellerCommissionTable .commissionCellMargin,
.sellerCommissionTable .commissionCellDiscount,
.sellerCommissionTable .commissionCellFilament,
.sellerCommissionTable .commissionCellCourses,
.sellerCommissionTable .commissionCellPoints,
.sellerCommissionTable .commissionCellCommission {
  white-space: nowrap;
  overflow-wrap: normal;
}

.sellerCommissionTable .commissionCellFilament .mutedCell,
.sellerCommissionTable .commissionCellCourses .mutedCell {
  white-space: nowrap;
}

.sellerCommissionTable .commissionCellCommission strong,
.sellerCommissionTable .commissionCellPoints strong {
  display: inline-block;
  white-space: nowrap;
}

.sellerCourseKpi {
  display: grid;
  align-content: start;
  gap: 7px;
}

.sellerCourseKpi strong {
  margin-top: 2px;
}

.sellerCourseKpi small {
  color: var(--ds-muted);
  font-size: 12px;
  line-height: 1.25;
}

.sellerCourseKpi small b {
  color: var(--ds-text);
  font-weight: 850;
}

.sellerCourseCatalogGrid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(230px, 300px);
  gap: 14px;
  align-items: start;
}

.sellerCourseCatalogWrap {
  margin: 0;
}

.sellerCourseCatalogWrap th:nth-child(2),
.sellerCourseCatalogWrap td:nth-child(2),
.sellerCourseCatalogWrap th:nth-child(3),
.sellerCourseCatalogWrap td:nth-child(3),
.sellerCourseCatalogWrap th:nth-child(4),
.sellerCourseCatalogWrap td:nth-child(4) {
  width: 120px;
  text-align: right;
  white-space: nowrap;
}

.sellerCourseAddForm {
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: light-dark(#fbfaf8, #161d22);
}

.sellerCourseAddForm label {
  display: grid;
  gap: 5px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
}

.sellerCourseAddForm input,
.sellerCourseAddForm select {
  width: 100%;
  min-width: 0;
  padding: 8px 9px;
  border: 1px solid rgba(24, 34, 43, 0.16);
  border-radius: 7px;
  background: light-dark(#fff, #11181d);
  color: var(--ink);
  font: inherit;
  font-size: 12px;
}

.sellerCourseBreakdown {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 6px;
}

.sellerCourseBreakdown span {
  display: inline-flex;
  gap: 5px;
  align-items: center;
  padding: 3px 6px;
  border-radius: 999px;
  background: light-dark(#f4f7f8, #1a2126);
  color: var(--ds-muted);
  font-size: 11px;
  font-weight: 760;
  white-space: nowrap;
}

.sellerCourseBreakdown strong {
  color: var(--teal);
}

.courseSectionRow td {
  background: light-dark(#fff4ec, #1a2126);
  color: light-dark(#d95300, #ea6220);
  font-weight: 850;
  text-align: left;
}

.courseSectionRow strong {
  margin-right: 10px;
}

.courseSectionRow span {
  color: var(--ds-muted);
  font-size: 12px;
  font-weight: 760;
}

@media (max-width: 980px) {
  .sellerCourseCatalogGrid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 1080px) {
:where(.appLayout)),
:where(.appLayout:not(.sidebarCollapsed))),
:where(.appLayout.sidebarCollapsed:has(.sidebar:hover))){
    grid-template-columns: 1fr;
  }
:where(.sidebar)),
:where(.appLayout.sidebarCollapsed .sidebar)),
:where(.appLayout:not(.sidebarCollapsed) .sidebar)),
:where(.appLayout.sidebarCollapsed:has(.sidebar:hover) .sidebar)){
    position: relative;
    top: 0;
    width: 100%;
    min-height: auto;
    grid-auto-flow: column;
    grid-auto-columns: max-content;
    overflow-x: auto;
  }
:where(.sidebarBlock)){
    display: contents;
  }
:where(.sidebarTitle)),
:where(.navChildren)){
    display: none;
  }

  :where(.navItem),
:where(.appLayout.sidebarCollapsed .navItem)),
:where(.appLayout:not(.sidebarCollapsed) .navItem)){
    width: auto;
    min-width: 48px;
    font-size: 0;
    padding: 0 6px;
  }

  :where(.panelHeader h2){
    font-size: 26px;
  }
}

@media (max-width: 760px) {
  :where(.shell){
    width: min(100% - 16px, 100%);
    padding-top: 8px;
  }
:where(.topbar)){
    align-items: flex-start;
    gap: 12px;
  }

  :where(.topbarMeta){
    justify-content: flex-start;
    width: 100%;
  }
:where(.panel)){
    padding: 14px;
  }
:where(.filterSummary)){
    align-items: stretch;
    flex-direction: column;
  }

  :where(.tinyFilter){
    left: 0;
    right: auto;
    width: min(100%, calc(100vw - 24px));
  }

  :where(.financeKpis),
  :where(.sellerCommissionPage .sellerCommissionSummary .commissionHeaderKpis.financeKpis),
  :where(.commissionLevelCards){
    grid-template-columns: 1fr;
  }

  :where(.sellerCommissionPage .commissionProgressPanel){
    grid-template-columns: 1fr;
  }
}

/* Sidebar v2: visible drawer refresh */
:where(.appLayout)){
  grid-template-columns: 84px minmax(0, 1fr);
  gap: 18px;
}
:where(.appLayout:not(.sidebarCollapsed))),
:where(.appLayout.sidebarCollapsed:has(.sidebar:hover))){
  grid-template-columns: 286px minmax(0, 1fr);
}
:where(.sidebar)),
:where(.appLayout.sidebarCollapsed .sidebar)){
  width: 84px;
  min-height: calc(100vh - 114px);
  padding: 12px 10px;
  border: 1px solid rgba(255, 111, 33, 0.18);
  border-radius: 20px;
  background: linear-gradient(180deg, light-dark(#ffffff, #11181d) 0%, light-dark(#fffaf7, #151c21) 100%);
  box-shadow: 0 18px 38px rgba(18, 32, 43, 0.12);
  overflow: hidden;
}
:where(.appLayout:not(.sidebarCollapsed) .sidebar)),
:where(.appLayout.sidebarCollapsed:has(.sidebar:hover) .sidebar)){
  width: 286px;
  padding: 14px;
}
:where(.sidebar::before)){
  content: "";
  display: block;
  width: 54px;
  height: 54px;
  margin: 0 auto 12px;
  border: 1px solid rgba(255, 111, 33, 0.22);
  border-radius: 16px;
  background: light-dark(#fff, #11181d) url("/simbolo-3d-curitiba.png") center / 38px 38px no-repeat;
  box-shadow: 0 8px 18px rgba(18, 32, 43, 0.07);
}
:where(.appLayout:not(.sidebarCollapsed) .sidebar::before)),
:where(.appLayout.sidebarCollapsed:has(.sidebar:hover) .sidebar::before)){
  width: 100%;
  height: 62px;
  margin-bottom: 14px;
  background-position: 14px center;
  background-size: 42px 42px;
}
:where(.appLayout:not(.sidebarCollapsed) .sidebar::after)),
:where(.appLayout.sidebarCollapsed:has(.sidebar:hover) .sidebar::after)){
  content: "Portal 3D Curitiba";
  position: absolute;
  top: 32px;
  left: 72px;
  color: var(--ds-text);
  font-size: 15px;
  font-weight: 900;
  pointer-events: none;
}

:where(.sidebarToggle),
:where(.appLayout.sidebarCollapsed .sidebarToggle)){
  width: 54px;
  height: 44px;
  min-height: 44px;
  margin: 0 auto 12px;
  padding: 0;
  border: 1px solid light-dark(rgba(31, 117, 137, 0.18), rgba(79, 159, 180, 0.18));
  border-radius: 14px;
  background: light-dark(#f5fbfc, #171e23);
  color: var(--ds-teal);
  box-shadow: none;
}

:where(.sidebarToggle::before){
  content: "|||";
  color: var(--ds-teal);
  font-size: 18px;
  font-weight: 900;
  letter-spacing: -3px;
  transform: rotate(90deg);
}
:where(.appLayout:not(.sidebarCollapsed) .sidebarToggle)),
:where(.appLayout.sidebarCollapsed:has(.sidebar:hover) .sidebarToggle)){
  width: 100%;
  justify-content: flex-start;
  padding-left: 14px;
}
:where(.appLayout:not(.sidebarCollapsed) .sidebarToggle::before)),
:where(.appLayout.sidebarCollapsed:has(.sidebar:hover) .sidebarToggle::before)){
  content: "Recolher menu";
  font-size: 12px;
  letter-spacing: 0;
  transform: none;
}
:where(.sidebarTitle)){
  margin: 12px 8px 7px;
  color: light-dark(#e65300, #f05c16);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0;
}

:where(.navItem),
:where(.appLayout.sidebarCollapsed .navItem)){
  width: 54px;
  min-height: 52px;
  margin: 0 auto;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 16px;
  background: transparent;
  color: var(--ds-text);
  box-shadow: none;
  font-size: 0;
  line-height: 1.15;
}
:where(.appLayout:not(.sidebarCollapsed) .navItem)),
:where(.appLayout.sidebarCollapsed:has(.sidebar:hover) .navItem)){
  width: 100%;
  min-height: 46px;
  justify-content: flex-start;
  gap: 12px;
  margin: 0;
  padding: 0 12px;
  color: var(--ds-text);
  font-size: 14px;
  font-weight: 820;
}

:where(.navItem::before),
:where(.appLayout.sidebarCollapsed .navItem::before)){
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  border: 1px solid light-dark(rgba(31, 117, 137, 0.22), rgba(79, 159, 180, 0.22));
  border-radius: 12px;
  background: light-dark(#f6fbfc, #161d22);
  color: var(--ds-teal);
  font-family: Arial, sans-serif;
  font-size: 10px;
  font-weight: 900;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.58);
}

:where(.navItem:hover),
:where(.navItem.active),
:where(.navGroup:has(.navSubItem.active) > .navItem){
  border-color: rgba(255, 111, 33, 0.34);
  background: light-dark(#fff2ea, #1c2228);
  color: light-dark(#d94d00, #ec5f23);
  box-shadow: none;
}

:where(.navItem:hover::before),
:where(.navItem.active::before),
:where(.navGroup:has(.navSubItem.active) > .navItem::before){
  border-color: rgba(255, 111, 33, 0.72);
  background: var(--ds-orange);
  color: #fff;
}
:where(.navChildren)){
  margin-left: 18px;
  border-left: 1px solid rgba(255, 111, 33, 0.24);
}

:where(.navSubItem::before){
  width: 28px;
  height: 28px;
  flex-basis: 28px;
  border-radius: 10px;
  font-size: 9px;
}

@media (max-width: 1080px) {
:where(.appLayout)),
:where(.appLayout:not(.sidebarCollapsed))),
:where(.appLayout.sidebarCollapsed:has(.sidebar:hover))){
    grid-template-columns: 1fr;
  }
:where(.sidebar)),
:where(.appLayout.sidebarCollapsed .sidebar)),
:where(.appLayout:not(.sidebarCollapsed) .sidebar)),
:where(.appLayout.sidebarCollapsed:has(.sidebar:hover) .sidebar)){
    width: 100%;
    min-height: auto;
    border-radius: 16px;
  }
:where(.sidebar::before)),
:where(.appLayout:not(.sidebarCollapsed) .sidebar::before)),
:where(.appLayout.sidebarCollapsed:has(.sidebar:hover) .sidebar::before)){
    display: none;
  }
:where(.appLayout:not(.sidebarCollapsed) .sidebar::after)),
:where(.appLayout.sidebarCollapsed:has(.sidebar:hover) .sidebar::after)){
    display: none;
  }
}

/* Hotmart-inspired shell: slimmer topbar and hover drawer sidebar */
body {
  background: light-dark(#f7f7f5, #192025);
}

:where(.shell){
  width: 100%;
  padding: 0;
}
:where(.topbar)){
  position: sticky;
  top: 0;
  z-index: 80;
  min-height: 68px;
  height: 68px;
  padding: 0 22px;
  border-width: 0 0 1px;
  border-style: solid;
  border-color: light-dark(#e6e6e0, #2b3238);
  border-radius: 0;
  background: light-dark(rgba(255, 255, 255, 0.98), rgba(17, 24, 29, 0.98));
  box-shadow: none;
}

:where(.brand){
  min-width: 0;
}

:where(.brandMark){
  width: 42px;
  height: 42px;
  border: 0;
  border-radius: 10px;
  box-shadow: none;
}

:where(.brandMark img){
  width: 34px;
  height: 34px;
}

:where(.brandText .eyebrow),
.brandSignature {
  display: none;
}

:where(.brandText h1){
  font-size: 22px;
  font-weight: 900;
}

:where(.topbarMeta){
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0;
  margin-left: auto;
}

:where(.topbarMeta .topbarUser){
  display: inline-flex;
  min-height: 38px;
  padding: 0 14px 0 38px;
  border: 1px solid light-dark(#e2e2dc, #2f363c);
  border-radius: 999px;
  background: light-dark(#fff, #11181d);
  color: var(--ds-text);
  font-size: 13px;
  font-weight: 820;
  box-shadow: none;
  cursor: default;
}

:where(.topbarMeta .topbarUser::before){
  content: "U";
  position: absolute;
  left: 7px;
  top: 50%;
  display: inline-grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 999px;
  background: var(--ds-orange);
  color: #fff;
  font-size: 12px;
  font-weight: 900;
  transform: translateY(-50%);
}

.topbarAuthActions {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  z-index: 120;
  display: grid;
  min-width: 190px;
  gap: 6px;
  padding: 8px;
  border: 1px solid light-dark(#e2e2dc, #2f363c);
  border-radius: 14px;
  background: light-dark(#fff, #11181d);
  box-shadow: 0 18px 40px rgba(18, 32, 43, 0.14);
  opacity: 0;
  pointer-events: none;
  transform: translateY(-4px);
  transition: opacity 140ms ease, transform 140ms ease;
}

:where(.topbarMeta.accountMenuOpen .topbarAuthActions){
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

.topbarAuthActions[hidden] {
  display: none;
}

.topbarAuthActions button,
.topbarAuthActions a {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  width: 100%;
  min-height: 36px;
  padding: 0 12px;
  border: 0;
  border-radius: 10px;
  background: light-dark(#fff, #11181d);
  color: var(--ds-text);
  font-weight: 800;
  text-decoration: none;
}

.topbarAuthActions button:hover,
.topbarAuthActions a:hover {
  background: light-dark(#fff3ec, #1b2227);
  color: light-dark(#d94d00, #ec5f23);
}

.topbarAuthActions button:last-child,
.topbarAuthActions a:last-child {
  color: var(--ds-negative);
}
:where(.appLayout)),
:where(.appLayout:not(.sidebarCollapsed))),
:where(.appLayout.sidebarCollapsed:has(.sidebar:hover))){
  display: grid;
  grid-template-columns: 70px minmax(0, 1fr);
  gap: 0;
  margin-top: 0;
}
:where(.appLayout.sidebarCollapsed:has(.sidebar:hover))),
:where(.appLayout:not(.sidebarCollapsed))){
  grid-template-columns: 280px minmax(0, 1fr);
}
:where(.appLayout.sidebarHover)){
  grid-template-columns: 280px minmax(0, 1fr);
}

:where(.workspace){
  padding: 26px 28px 42px;
}
:where(.sidebar)),
:where(.appLayout.sidebarCollapsed .sidebar)),
:where(.appLayout:not(.sidebarCollapsed) .sidebar)),
:where(.appLayout.sidebarCollapsed:has(.sidebar:hover) .sidebar)){
  position: sticky;
  top: 68px;
  z-index: 50;
  width: 70px;
  min-height: calc(100vh - 68px);
  max-height: calc(100vh - 68px);
  padding: 12px 8px;
  border-width: 0 1px 0 0;
  border-style: solid;
  border-color: light-dark(#e6e6e0, #2b3238);
  border-radius: 0;
  background: light-dark(#ffffff, #11181d);
  box-shadow: none;
  overflow-x: hidden;
  overflow-y: auto;
  transition: width 150ms ease, box-shadow 150ms ease;
}
:where(.appLayout.sidebarCollapsed .sidebar:hover)),
:where(.appLayout:not(.sidebarCollapsed) .sidebar)){
  width: 280px;
  box-shadow: 18px 0 34px rgba(18, 32, 43, 0.08);
}
:where(.appLayout.sidebarHover .sidebar)){
  width: 280px;
  box-shadow: 18px 0 34px rgba(18, 32, 43, 0.08);
}
:where(.sidebar::before)),
:where(.sidebar::after)),
:where(.appLayout:not(.sidebarCollapsed) .sidebar::before)),
:where(.appLayout:not(.sidebarCollapsed) .sidebar::after)),
:where(.appLayout.sidebarCollapsed:has(.sidebar:hover) .sidebar::before)),
:where(.appLayout.sidebarCollapsed:has(.sidebar:hover) .sidebar::after)){
  display: none;
  content: none;
}

:where(.sidebarToggle),
:where(.appLayout.sidebarCollapsed .sidebarToggle)),
:where(.appLayout:not(.sidebarCollapsed) .sidebarToggle)),
:where(.appLayout.sidebarCollapsed:has(.sidebar:hover) .sidebarToggle)){
  width: 48px;
  min-height: 48px;
  height: 48px;
  margin: 0 auto 10px;
  padding: 0;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--ds-text);
}

:where(.sidebarToggle::before),
:where(.appLayout:not(.sidebarCollapsed) .sidebarToggle::before)),
:where(.appLayout.sidebarCollapsed:has(.sidebar:hover) .sidebarToggle::before)){
  content: "";
  width: 22px;
  height: 16px;
  border-top: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  box-shadow: inset 0 6px 0 0 currentColor;
  transform: none;
}

:where(.sidebarToggle:hover){
  background: light-dark(#f1f4ff, #1c2328);
  color: var(--ds-teal);
}
:where(.sidebarBlock)){
  display: grid;
  gap: 5px;
  margin: 0 0 18px;
}
:where(.sidebarTitle)),
:where(.appLayout.sidebarCollapsed .sidebarTitle)){
  display: none;
  margin: 18px 12px 8px;
  color: light-dark(#e65300, #f05c16);
  font-size: 10px;
  font-weight: 900;
  text-transform: uppercase;
}
:where(.appLayout.sidebarCollapsed .sidebar:hover .sidebarTitle)),
:where(.appLayout:not(.sidebarCollapsed) .sidebarTitle)){
  display: block;
}
:where(.appLayout.sidebarHover .sidebarTitle)){
  display: block;
}

:where(.navItem),
:where(.appLayout.sidebarCollapsed .navItem)),
:where(.appLayout:not(.sidebarCollapsed) .navItem)),
:where(.appLayout.sidebarCollapsed:has(.sidebar:hover) .navItem)){
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  min-height: 48px;
  margin: 0 auto;
  padding: 0;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--ds-text);
  font-size: 0;
  font-weight: 820;
  box-shadow: none;
}
:where(.appLayout.sidebarCollapsed .sidebar:hover .navItem)),
:where(.appLayout:not(.sidebarCollapsed) .navItem)){
  width: 100%;
  justify-content: flex-start;
  gap: 12px;
  margin: 0;
  padding: 0 12px;
  font-size: 14px;
}
:where(.appLayout.sidebarHover .navItem)){
  width: 100%;
  justify-content: flex-start;
  gap: 12px;
  margin: 0;
  padding: 0 12px;
  font-size: 14px;
}

:where(.navItem::before),
:where(.appLayout.sidebarCollapsed .navItem::before)),
:where(.appLayout:not(.sidebarCollapsed) .navItem::before)),
:where(.appLayout.sidebarCollapsed:has(.sidebar:hover) .navItem::before)){
  display: inline-grid;
  place-items: center;
  width: 36px;
  height: 36px;
  flex: 0 0 36px;
  border: 1px solid light-dark(#e1e9ec, #293036);
  border-radius: 9px;
  background: light-dark(#fff, #11181d);
  color: var(--ds-teal);
  font-size: 10px;
  font-weight: 900;
  box-shadow: none;
}

:where(.navItem:hover),
:where(.navItem.active),
:where(.navGroup:has(.navSubItem.active) > .navItem){
  background: light-dark(#eef3ff, #1d2429);
  color: var(--ds-text);
}

:where(.navItem:hover::before),
:where(.navItem.active::before),
:where(.navGroup:has(.navSubItem.active) > .navItem::before){
  border-color: light-dark(#c7d7ff, #363f58);
  background: light-dark(#eef3ff, #1d2429);
  color: light-dark(#245be7, #4987ff);
}

:where(.navItem.active::after),
:where(.navGroup:has(.navSubItem.active) > .navItem::after){
  content: "";
  position: absolute;
  left: 0;
  width: 3px;
  height: 28px;
  border-radius: 999px;
  background: var(--ds-orange);
}
:where(.navChildren)),
:where(.appLayout:not(.sidebarCollapsed) .navChildren)),
:where(.appLayout.sidebarCollapsed:has(.sidebar:hover) .navChildren)){
  display: none;
  margin: 4px 0 8px 25px;
  padding-left: 12px;
  border-left: 1px solid light-dark(#ffe0cf, #40291c);
}
:where(.appLayout.sidebarCollapsed .sidebar:hover .navGroup:hover > .navChildren)),
:where(.appLayout:not(.sidebarCollapsed) .navGroup:hover > .navChildren)){
  display: grid;
}
:where(.appLayout.sidebarHover .navGroup:hover > .navChildren)){
  display: grid;
}

:where(.navSubItem),
:where(.appLayout.sidebarCollapsed .sidebar:hover .navSubItem)),
:where(.appLayout:not(.sidebarCollapsed) .navSubItem)){
  min-height: 40px;
  font-size: 13px;
  color: var(--ds-text);
}

:where(.navSubItem::before){
  width: 30px;
  height: 30px;
  flex-basis: 30px;
  border-radius: 8px;
  font-size: 9px;
}
:where(.panel)){
  border-radius: 14px;
  box-shadow: none;
}

@media (max-width: 1080px) {
:where(.topbar)){
    height: auto;
    min-height: 64px;
    padding: 10px 14px;
  }
:where(.appLayout)),
:where(.appLayout:not(.sidebarCollapsed))),
:where(.appLayout.sidebarCollapsed:has(.sidebar:hover))){
    grid-template-columns: 1fr;
  }

  :where(.workspace){
    padding: 14px;
  }
:where(.sidebar)),
:where(.appLayout.sidebarCollapsed .sidebar)),
:where(.appLayout:not(.sidebarCollapsed) .sidebar)),
:where(.appLayout.sidebarCollapsed:has(.sidebar:hover) .sidebar)){
    position: relative;
    top: 0;
    display: flex;
    width: 100%;
    min-height: 64px;
    max-height: none;
    padding: 8px;
    overflow-x: auto;
    overflow-y: hidden;
  }
:where(.sidebarBlock)){
    display: contents;
  }
:where(.navChildren)),
:where(.sidebarTitle)){
    display: none;
  }
}

/* Sidebar drawer stability: keep the rail fixed and let the menu open fully over the page. */
:root {
  --sidebar-rail-width: 72px;
  --sidebar-open-width: 320px;
}
:where(.appLayout.sidebarCollapsed)),
:where(.appLayout.sidebarCollapsed:has(.sidebar:hover))),
:where(.appLayout.sidebarHover)){
  grid-template-columns: var(--sidebar-rail-width) minmax(0, 1fr);
  overflow: visible;
}
:where(.appLayout:not(.sidebarCollapsed))){
  grid-template-columns: var(--sidebar-open-width) minmax(0, 1fr);
  overflow: visible;
}
:where(.sidebar)),
:where(.appLayout.sidebarCollapsed .sidebar)){
  width: var(--sidebar-rail-width);
  min-width: var(--sidebar-rail-width);
  max-width: var(--sidebar-rail-width);
}
:where(.appLayout.sidebarCollapsed .sidebar:hover)),
:where(.appLayout.sidebarHover .sidebar)),
:where(.appLayout:not(.sidebarCollapsed) .sidebar)){
  width: var(--sidebar-open-width);
  min-width: var(--sidebar-open-width);
  max-width: var(--sidebar-open-width);
  z-index: 140;
  box-shadow: 18px 0 34px rgba(18, 32, 43, 0.10);
}
:where(.appLayout.sidebarCollapsed .sidebar:hover .sidebarTitle)),
:where(.appLayout.sidebarHover .sidebarTitle)),
:where(.appLayout:not(.sidebarCollapsed) .sidebarTitle)){
  display: block;
}
:where(.appLayout.sidebarCollapsed .sidebar:hover .navItem)),
:where(.appLayout.sidebarHover .navItem)),
:where(.appLayout:not(.sidebarCollapsed) .navItem)){
  width: 100%;
  justify-content: flex-start;
  gap: 12px;
  margin: 0;
  padding: 0 12px;
  font-size: 14px;
  white-space: normal;
}
:where(.appLayout.sidebarCollapsed .sidebar:hover .navSubItem)),
:where(.appLayout.sidebarHover .navSubItem)),
:where(.appLayout:not(.sidebarCollapsed) .navSubItem)){
  padding-right: 10px;
  line-height: 1.18;
}
:where(.appLayout.sidebarCollapsed .sidebar:hover .navGroup:hover > .navChildren)),
:where(.appLayout.sidebarHover .navGroup:hover > .navChildren)),
:where(.appLayout:not(.sidebarCollapsed) .navGroup:hover > .navChildren)),
:where(.appLayout:not(.sidebarCollapsed) .navGroup:focus-within > .navChildren)){
  display: grid;
}

@media (max-width: 1080px) {
:where(.appLayout.sidebarCollapsed)),
:where(.appLayout.sidebarCollapsed:has(.sidebar:hover))),
:where(.appLayout.sidebarHover)),
:where(.appLayout:not(.sidebarCollapsed))){
    grid-template-columns: 1fr;
  }
:where(.sidebar)),
:where(.appLayout.sidebarCollapsed .sidebar)),
:where(.appLayout.sidebarCollapsed .sidebar:hover)),
:where(.appLayout.sidebarHover .sidebar)),
:where(.appLayout:not(.sidebarCollapsed) .sidebar)){
    width: 100%;
    min-width: 0;
    max-width: none;
  }
}

/* Sidebar hover guard: the collapsed menu must not open from an invisible hit area. */
@media (min-width: 1081px) {
:where(.appLayout.sidebarCollapsed:not(.sidebarHover))){
    grid-template-columns: var(--sidebar-rail-width) minmax(0, 1fr);
  }
:where(.appLayout.sidebarCollapsed:not(.sidebarHover) .sidebar)),
:where(.appLayout.sidebarCollapsed:not(.sidebarHover) .sidebar:hover)){
    box-sizing: border-box;
    width: var(--sidebar-rail-width);
    min-width: var(--sidebar-rail-width);
    max-width: var(--sidebar-rail-width);
    overflow: hidden;
    box-shadow: none;
  }
:where(.appLayout.sidebarCollapsed:not(.sidebarHover) .sidebarTitle)),
:where(.appLayout.sidebarCollapsed:not(.sidebarHover) .sidebar:hover .sidebarTitle)),
:where(.appLayout.sidebarCollapsed:not(.sidebarHover) .navChildren)),
:where(.appLayout.sidebarCollapsed:not(.sidebarHover) .sidebar:hover .navChildren)){
    display: none;
  }
:where(.appLayout.sidebarCollapsed:not(.sidebarHover) .navItem)),
:where(.appLayout.sidebarCollapsed:not(.sidebarHover) .sidebar:hover .navItem)){
    width: 48px;
    min-width: 48px;
    max-width: 48px;
    justify-content: center;
    gap: 0;
    padding: 0;
    margin: 0 auto;
    overflow: hidden;
    white-space: nowrap;
    font-size: 0;
  }
:where(.appLayout.sidebarCollapsed:not(.sidebarHover) .navItem::before)),
:where(.appLayout.sidebarCollapsed:not(.sidebarHover) .sidebar:hover .navItem::before)){
    margin: 0;
    flex: 0 0 34px;
  }
}

.soldItemsCombinedPage {
  gap: 14px;
}

.soldItemsCombinedGrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  align-items: start;
}

/* Permission and account-menu guards. Keep these at the end so they win over visual overrides. */
[hidden],
:where(.navItem[hidden]),
:where(.navGroup[hidden]),
:where(.sidebarBlock[hidden])),
.appView[hidden],
:where(.subTab[hidden]),
.localPage[hidden],
.topbarUser[hidden],
.topbarAuthActions[hidden] {
  display: none;
}

@media (min-width: 1081px) {
:where(.appLayout.sidebarCollapsed:not(.sidebarHover):has(.sidebar:hover))){
    grid-template-columns: var(--sidebar-rail-width) minmax(0, 1fr);
  }
:where(.appLayout.sidebarCollapsed:not(.sidebarHover) .sidebar:hover)){
    width: var(--sidebar-rail-width);
    min-width: var(--sidebar-rail-width);
    max-width: var(--sidebar-rail-width);
    overflow: hidden;
    box-shadow: none;
  }
:where(.appLayout.sidebarCollapsed:not(.sidebarHover) .sidebar:hover .sidebarTitle)),
:where(.appLayout.sidebarCollapsed:not(.sidebarHover) .sidebar:hover .navChildren)){
    display: none;
  }
:where(.appLayout.sidebarCollapsed:not(.sidebarHover) .sidebar:hover .navItem)){
    width: 48px;
    min-width: 48px;
    max-width: 48px;
    justify-content: center;
    gap: 0;
    padding: 0;
    margin: 0 auto;
    overflow: hidden;
    white-space: nowrap;
    font-size: 0;
  }
}

:where(.topbarMeta .topbarUser){
  cursor: pointer;
}

:where(.topbarMeta:not(.accountMenuOpen):hover .topbarAuthActions){
  opacity: 0;
  pointer-events: none;
  transform: translateY(-4px);
}

:where(.topbarMeta.accountMenuOpen .topbarAuthActions){
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

.topbarAuthActions::before {
  content: "";
  position: absolute;
  right: 0;
  top: -12px;
  width: 100%;
  height: 12px;
}

.soldItemsCombinedGrid .subpanel {
  min-width: 0;
}

/* Account menu must be click-driven. These final guards override old hover layers. */
.topbarMeta:not(.accountMenuOpen) #topbarAuthActions {
  opacity: 0;
  pointer-events: none;
  transform: translateY(-4px);
}

.topbarMeta.accountMenuOpen #topbarAuthActions {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

.topbarMeta.accountMenuOpen #topbarAuthActions a,
.topbarMeta.accountMenuOpen #topbarAuthActions button {
  pointer-events: auto;
}

.soldItemsCombinedGrid .qualityKpis {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (max-width: 1200px) {
  .soldItemsCombinedGrid {
    grid-template-columns: 1fr;
  }
}

/* Sidebar behavior: open the drawer by hover, but submenus by click. */
@media (min-width: 1081px) {
:where(.appLayout.sidebarCollapsed:not(.sidebarHover):has(.sidebar:hover))){
    grid-template-columns: var(--sidebar-rail-width) minmax(0, 1fr);
  }
:where(.appLayout.sidebarCollapsed:not(.sidebarHover):has(.sidebar:hover) .sidebar)){
    width: var(--sidebar-rail-width);
    min-width: var(--sidebar-rail-width);
    max-width: var(--sidebar-rail-width);
    overflow: hidden;
    box-shadow: none;
  }
:where(.appLayout.sidebarCollapsed:not(.sidebarHover):has(.sidebar:hover) .sidebarTitle)),
:where(.appLayout.sidebarCollapsed:not(.sidebarHover):has(.sidebar:hover) .navChildren)){
    display: none;
  }
:where(.appLayout.sidebarCollapsed:not(.sidebarHover):has(.sidebar:hover) .navItem)){
    width: 48px;
    min-width: 48px;
    max-width: 48px;
    justify-content: center;
    gap: 0;
    padding: 0;
    margin: 0 auto;
    overflow: hidden;
    white-space: nowrap;
    font-size: 0;
  }
:where(.appLayout:not(.sidebarCollapsed) .navGroup > .navItem)){
    align-items: center;
    justify-content: flex-start;
    text-align: left;
    line-height: 1.15;
  }
:where(.appLayout:not(.sidebarCollapsed) .navGroup:hover > .navChildren)),
:where(.appLayout:not(.sidebarCollapsed) .navGroup:focus-within > .navChildren)),
:where(.appLayout.sidebarHover .navGroup:hover > .navChildren)){
    display: none;
  }
:where(.appLayout:not(.sidebarCollapsed) .navGroup.isOpen > .navChildren)),
:where(.appLayout.sidebarHover .navGroup.isOpen > .navChildren)){
    display: grid;
  }
}

/* Sidebar submenu correction: sidebar opens on hover, but groups such as Financeiro open only by click. */
@media (min-width: 1081px) {
:where(.appLayout.sidebarCollapsed .sidebar:hover .navGroup > .navChildren)),
:where(.appLayout.sidebarHover .navGroup > .navChildren)),
:where(.appLayout:not(.sidebarCollapsed) .navGroup > .navChildren)),
:where(.appLayout.sidebarCollapsed .sidebar:hover .navGroup:hover > .navChildren)),
:where(.appLayout.sidebarHover .navGroup:hover > .navChildren)),
:where(.appLayout:not(.sidebarCollapsed) .navGroup:hover > .navChildren)),
:where(.appLayout:not(.sidebarCollapsed) .navGroup:focus-within > .navChildren)){
    display: none;
  }
:where(.appLayout.sidebarCollapsed .sidebar:hover .navGroup.isOpen > .navChildren)),
:where(.appLayout.sidebarHover .navGroup.isOpen > .navChildren)),
:where(.appLayout:not(.sidebarCollapsed) .navGroup.isOpen > .navChildren)){
    display: grid;
  }

  :where(.navGroup),
:where(.appLayout.sidebarCollapsed .sidebar:hover .navGroup)),
:where(.appLayout.sidebarHover .navGroup)),
:where(.appLayout:not(.sidebarCollapsed) .navGroup)){
    width: 100%;
    display: grid;
    justify-items: stretch;
    align-items: stretch;
    gap: 6px;
  }

  :where(.navGroup > .navItem),
:where(.appLayout.sidebarCollapsed .sidebar:hover .navGroup > .navItem)),
:where(.appLayout.sidebarHover .navGroup > .navItem)),
:where(.appLayout:not(.sidebarCollapsed) .navGroup > .navItem)){
    width: 100%;
    margin: 0;
    justify-content: flex-start;
    align-items: center;
    gap: 12px;
    padding: 0 12px;
    text-align: left;
  }
}

/* Financeiro is the only menu group today: keep it aligned as a normal item and open only by click. */
@media (min-width: 1081px) {
  .financeNavGroup,
:where(.appLayout.sidebarCollapsed .sidebar:hover .financeNavGroup)),
:where(.appLayout.sidebarHover .financeNavGroup)),
:where(.appLayout:not(.sidebarCollapsed) .financeNavGroup)){
    width: 100%;
    min-width: 100%;
    max-width: 100%;
    margin: 0;
    padding: 0;
    justify-self: stretch;
    justify-items: stretch;
    align-self: stretch;
  }

  .financeNavGroup > .financeNavParent,
:where(.appLayout.sidebarCollapsed .sidebar:hover .financeNavGroup > .financeNavParent)),
:where(.appLayout.sidebarHover .financeNavGroup > .financeNavParent)),
:where(.appLayout:not(.sidebarCollapsed) .financeNavGroup > .financeNavParent)){
    width: 100%;
    min-width: 100%;
    max-width: 100%;
    margin: 0;
    padding: 0 12px;
    justify-content: flex-start;
    align-items: center;
    gap: 12px;
    text-align: left;
    transform: none;
  }

  .financeNavGroup > .financeNavParent::before,
:where(.appLayout.sidebarCollapsed .sidebar:hover .financeNavGroup > .financeNavParent::before)),
:where(.appLayout.sidebarHover .financeNavGroup > .financeNavParent::before)),
:where(.appLayout:not(.sidebarCollapsed) .financeNavGroup > .financeNavParent::before)){
    margin: 0;
    flex: 0 0 36px;
  }

  .financeNavGroup:not(.isOpen) > .navChildren,
  .financeNavGroup:hover:not(.isOpen) > .navChildren,
:where(.appLayout.sidebarCollapsed .sidebar:hover .financeNavGroup:hover:not(.isOpen) > .navChildren)),
:where(.appLayout.sidebarHover .financeNavGroup:hover:not(.isOpen) > .navChildren)),
:where(.appLayout:not(.sidebarCollapsed) .financeNavGroup:hover:not(.isOpen) > .navChildren)),
:where(.appLayout:not(.sidebarCollapsed) .financeNavGroup:focus-within:not(.isOpen) > .navChildren)){
    display: none;
  }

  .financeNavGroup.isOpen > .navChildren,
:where(.appLayout.sidebarCollapsed .sidebar:hover .financeNavGroup.isOpen > .navChildren)),
:where(.appLayout.sidebarHover .financeNavGroup.isOpen > .navChildren)),
:where(.appLayout:not(.sidebarCollapsed) .financeNavGroup.isOpen > .navChildren)){
    display: grid;
  }
}

/* Commission table: fixed visual grid so wide values cannot drift into adjacent columns. */
#sellerCommissionTable.sellerCommissionTable {
  display: block;
  width: 100%;
  table-layout: auto;
  border-collapse: separate;
  border-spacing: 0;
}

#sellerCommissionTable colgroup {
  display: none;
}

#sellerCommissionTable thead,
#sellerCommissionTable tbody {
  display: block;
  width: 100%;
}

#sellerCommissionTable thead tr,
#sellerCommissionTable tbody tr {
  display: grid;
  grid-template-columns:
    minmax(112px, 0.85fr)
    minmax(210px, 1.65fr)
    minmax(150px, 1.2fr)
    minmax(190px, 1.5fr)
    minmax(115px, 0.85fr)
    minmax(105px, 0.75fr)
    minmax(115px, 0.8fr)
    minmax(130px, 0.9fr)
    minmax(88px, 0.65fr)
    minmax(82px, 0.55fr)
    minmax(130px, 0.9fr);
  align-items: center;
  width: 100%;
}

#sellerCommissionTable th,
#sellerCommissionTable td {
  display: block;
  min-width: 0;
  width: auto;
  max-width: none;
  padding: 10px 8px;
  overflow: hidden;
  overflow-wrap: normal;
  word-break: normal;
  text-overflow: clip;
  vertical-align: middle;
}

#sellerCommissionTable th:nth-child(1),
#sellerCommissionTable th:nth-child(2),
#sellerCommissionTable .commissionCellLevel,
#sellerCommissionTable .commissionCellSeller {
  text-align: left;
}

#sellerCommissionTable th:nth-child(n+3),
#sellerCommissionTable .commissionTargetCell,
#sellerCommissionTable .commissionSalesCell,
#sellerCommissionTable .commissionCellPercent,
#sellerCommissionTable .commissionCellMargin,
#sellerCommissionTable .commissionCellDiscount,
#sellerCommissionTable .commissionCellFilament,
#sellerCommissionTable .commissionCellCourses,
#sellerCommissionTable .commissionCellPoints,
#sellerCommissionTable .commissionCellCommission {
  text-align: right;
}

#sellerCommissionTable .commissionStack {
  display: grid;
  justify-items: end;
  gap: 4px;
}

#sellerCommissionTable .commissionStack strong,
#sellerCommissionTable .commissionStack span,
#sellerCommissionTable .commissionCellPoints strong,
#sellerCommissionTable .commissionCellCommission strong {
  display: block;
  max-width: 100%;
  white-space: nowrap;
}

#sellerCommissionTable .commissionTargetCell strong,
#sellerCommissionTable .commissionSalesCell strong,
#sellerCommissionTable .commissionCellCommission strong {
  font-size: 12px;
  letter-spacing: 0;
}

#sellerCommissionTable .commissionSalesCell span {
  font-size: 11px;
}

#sellerCommissionTable .commissionCellPercent .commissionMiniBar {
  margin-left: auto;
  width: min(100%, 128px);
}

#sellerCommissionTable .commissionCellLevel .commissionLevelBadge {
  max-width: none;
  white-space: nowrap;
}

@media (max-width: 1500px) {
  #sellerCommissionTable thead tr,
  #sellerCommissionTable tbody tr {
    grid-template-columns:
      112px
      190px
      140px
      170px
      105px
      96px
      105px
      120px
      78px
      74px
      120px;
  }

  #sellerCommissionTable.sellerCommissionTable {
    min-width: 1310px;
  }
}

/* Visual standardization pass: keep this block last so older layers cannot reintroduce drift. */
:root {
  --ui-orange: #ff6f21;
  --ui-orange-strong: light-dark(#e65300, #f05c16);
  --ui-orange-soft: light-dark(#fff5ee, #192025);
  --ui-teal: light-dark(#1f7589, #4f9fb4);
  --ui-teal-dark: light-dark(#12485a, #b7ddec);
  --ui-ink: light-dark(#111827, #e3eeff);
  --ui-muted: light-dark(#5f6f7c, #a1b3c1);
  --ui-border: light-dark(#dbe7ec, #2c3339);
  --ui-border-soft: light-dark(#edf3f5, #1f262b);
  --ui-surface: light-dark(#ffffff, #11181d);
  --ui-surface-soft: light-dark(#f7fbfc, #161d22);
  --ui-shadow: 0 14px 34px rgba(17, 24, 39, 0.07);
  --ui-radius: 14px;
}

body {
  background: light-dark(#f7f7f4, #192025);
  color: var(--ui-ink);
}

.workspace {
  background: transparent;
}

.topbar {
  border-color: light-dark(#e4e8ea, #293036);
  background: light-dark(rgba(255, 255, 255, 0.98), rgba(17, 24, 29, 0.98));
}

.brandMark {
  border: 1px solid rgba(255, 111, 33, 0.22);
  background: light-dark(#fff, #11181d);
}

.brandText h1,
.panelHeader h2 {
  color: var(--ui-ink);
  letter-spacing: 0;
}

.brandText .eyebrow,
.panelHeader .eyebrow,
.sectionKicker {
  color: var(--ui-orange-strong);
  letter-spacing: 0;
}

.panel,
.subpanel,
.filterShell,
.tableWrap,
.sellerCommissionSummary,
.commissionLevelCard,
.commissionProgressPanel,
.commissionChecklistPanel {
  border-color: var(--ui-border);
  border-radius: var(--ui-radius);
  background: var(--ui-surface);
  box-shadow: var(--ui-shadow);
}

.panel {
  border-top-color: var(--ui-border);
}

.panelHeader {
  gap: 12px;
  border-bottom-color: var(--ui-border-soft);
}

.sectionHint,
.miniNote,
.note,
.mutedCell {
  color: var(--ui-muted);
}

.filterShell {
  padding: 10px 12px;
}

.filterSummary {
  min-height: 40px;
}

.filterSummary span,
.filterSummary small {
  color: var(--ui-muted);
  font-size: 12px;
}

.filterSummary strong {
  color: var(--ui-ink);
  font-size: 15px;
  line-height: 1.2;
}

.filterSummary button,
.smartFilter button[data-role="open-filter"],
.subTab,
.dreTab,
.filterChips button,
.filterActions button {
  min-height: 36px;
  border-radius: 10px;
  box-shadow: none;
  letter-spacing: 0;
}

.subTab,
.dreTab,
.filterChips button {
  border-color: rgba(255, 111, 33, 0.30);
  background: light-dark(#fffaf7, #151c21);
  color: var(--ui-orange-strong);
}

.subTab.active,
.dreTab.active,
.filterChips button.active,
.filterActions button:first-child {
  border-color: var(--ui-orange);
  background: var(--ui-orange);
  color: #fff;
}

.financeKpis,
.qualityKpis,
.dashboardGrid {
  gap: 12px;
}

.kpi,
.qualityKpis > *,
.ceoKpis > *,
.metricCard,
.infoCard,
.summaryCard {
  min-width: 0;
  border-color: var(--ui-border);
  border-radius: 12px;
  background: var(--ui-surface-soft);
  box-shadow: none;
}

.kpi strong,
.metricCard strong,
.infoCard strong,
.summaryCard strong {
  max-width: 100%;
  color: var(--ui-teal);
  letter-spacing: 0;
  overflow-wrap: anywhere;
}

.kpi.positive strong,
.positive,
.moneyPositive {
  color: light-dark(#007a4f, #46a87a);
}

.kpi.negative strong,
.negative,
.moneyNegative {
  color: light-dark(#c91d0b, #f6503c);
}

.tableWrap {
  overflow: auto;
}

.tableWrap table,
table:not(#sellerCommissionTable) {
  border-collapse: separate;
  border-spacing: 0;
}

.tableWrap th,
table:not(#sellerCommissionTable) th {
  background: light-dark(#f7fafb, #171e23);
  color: light-dark(#00647b, #4f9eb7);
  font-size: 12px;
  font-weight: 850;
  letter-spacing: 0;
  white-space: nowrap;
}

.tableWrap td,
table:not(#sellerCommissionTable) td {
  border-bottom-color: var(--ui-border-soft);
  color: var(--ui-ink);
}

.tableWrap td:not(:first-child),
.tableWrap th:not(:first-child),
table:not(#sellerCommissionTable) td:not(:first-child),
table:not(#sellerCommissionTable) th:not(:first-child) {
  text-align: right;
}

.tableWrap td:first-child,
.tableWrap th:first-child,
table:not(#sellerCommissionTable) td:first-child,
table:not(#sellerCommissionTable) th:first-child {
  text-align: left;
}

.knowledgePanel textarea {
  width: 100%;
  min-width: 0;
  padding: 10px;
  border: 1px solid rgba(24, 34, 43, 0.16);
  border-radius: 7px;
  background: light-dark(#fff, #11181d);
  color: var(--ui-ink, var(--ink));
  font: inherit;
  resize: vertical;
}

.knowledgeFilters,
.knowledgeRelationBuilder {
  display: grid;
  grid-template-columns: repeat(5, minmax(150px, 1fr)) auto;
  gap: 10px;
  align-items: end;
  margin-bottom: 12px;
}

.knowledgeFilters label,
.knowledgeRelationBuilder label,
.knowledgeFormGrid label {
  display: grid;
  gap: 5px;
  min-width: 0;
  color: var(--ui-muted, var(--muted));
  font-size: 12px;
  font-weight: 700;
}

.knowledgeForm {
  display: grid;
  gap: 12px;
}

.knowledgeFormGrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.knowledgeFormGrid .span2 {
  grid-column: 1 / -1;
}

.knowledgeFormActions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}

.knowledgePanel .tableWrap th,
.knowledgePanel .tableWrap td,
.knowledgePanel table:not(#sellerCommissionTable) th,
.knowledgePanel table:not(#sellerCommissionTable) td,
.knowledgePanel .tableWrap td:not(:first-child),
.knowledgePanel .tableWrap th:not(:first-child) {
  text-align: left;
}

.statusPill {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 3px 8px;
  border: 1px solid light-dark(rgba(40, 119, 141, 0.18), rgba(83, 158, 181, 0.18));
  border-radius: 999px;
  background: light-dark(#f4fbfc, #171e23);
  color: var(--ui-accent, var(--teal));
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
}

.knowledgeDetailGrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.knowledgeArticleDeleteButton {
  border: 1px solid light-dark(rgba(202, 70, 54, 0.24), rgba(232, 97, 79, 0.24));
  background: light-dark(#fff7f5, #171e23);
  color: light-dark(#b83526, #e7624f);
}

.knowledgeArticleDeleteButton:hover {
  border-color: light-dark(rgba(202, 70, 54, 0.42), rgba(232, 97, 79, 0.42));
  background: light-dark(#fff0ec, #1d2429);
  color: light-dark(#9e2d20, #df6958);
}

.knowledgeDetailGrid section {
  min-width: 0;
  padding: 12px;
  border: 1px solid rgba(24, 34, 43, 0.1);
  border-radius: 8px;
  background: light-dark(#fbfdfe, #141b1f);
}

.knowledgeDetailGrid .span2 {
  grid-column: 1 / -1;
}

.knowledgeDetailGrid h4 {
  margin: 0 0 10px;
  color: var(--ui-accent, var(--teal));
  font-size: 13px;
}

.knowledgeDetailGrid dl {
  display: grid;
  grid-template-columns: minmax(120px, 0.32fr) minmax(0, 1fr);
  gap: 7px 10px;
  margin: 0;
}

.knowledgeDetailGrid dt {
  color: var(--ui-muted, var(--muted));
  font-size: 12px;
  font-weight: 800;
}

.knowledgeDetailGrid dd {
  min-width: 0;
  margin: 0;
}

.knowledgeDetailGrid .preline {
  white-space: pre-line;
}

.inlineTable {
  width: 100%;
  border-collapse: collapse;
}

.inlineTable th,
.inlineTable td {
  padding: 8px;
  border-bottom: 1px solid rgba(24, 34, 43, 0.08);
  text-align: left;
}

@media (max-width: 960px) {
  .knowledgeFilters,
  .knowledgeRelationBuilder,
  .knowledgeFormGrid,
  .knowledgeDetailGrid {
    grid-template-columns: 1fr;
  }

  .knowledgeFormGrid .span2,
  .knowledgeDetailGrid .span2 {
    grid-column: auto;
  }
}

/* Commission table final layout. Values keep their columns and level badges remain readable. */
#sellerCommissionTable.sellerCommissionTable {
  display: block;
  width: 100%;
  min-width: 0;
  border-collapse: separate;
  border-spacing: 0;
  table-layout: auto;
}

#sellerCommissionTable colgroup {
  display: none;
}

#sellerCommissionTable thead,
#sellerCommissionTable tbody {
  display: block;
  width: 100%;
}

#sellerCommissionTable thead tr,
#sellerCommissionTable tbody tr {
  display: grid;
  grid-template-columns:
    minmax(128px, 0.9fr)
    minmax(218px, 1.5fr)
    minmax(150px, 1.05fr)
    minmax(190px, 1.35fr)
    minmax(110px, 0.78fr)
    minmax(105px, 0.74fr)
    minmax(112px, 0.78fr)
    minmax(126px, 0.86fr)
    minmax(92px, 0.64fr)
    minmax(86px, 0.58fr)
    minmax(130px, 0.9fr);
  align-items: center;
  width: 100%;
}

#sellerCommissionTable th,
#sellerCommissionTable td {
  display: block;
  min-width: 0;
  padding: 10px 9px;
  overflow: hidden;
  text-overflow: clip;
  vertical-align: middle;
}

#sellerCommissionTable .commissionCellLevel {
  overflow: visible;
}

#sellerCommissionTable .commissionLevelBadge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  max-width: none;
  min-width: 82px;
  padding: 5px 10px;
  white-space: nowrap;
  font-size: 11px;
  line-height: 1.1;
}

#sellerCommissionTable .commissionCellSeller {
  white-space: normal;
}

#sellerCommissionTable .commissionStack {
  display: grid;
  justify-items: end;
  gap: 4px;
}

#sellerCommissionTable .commissionStack strong,
#sellerCommissionTable .commissionStack span,
#sellerCommissionTable .commissionCellPoints strong,
#sellerCommissionTable .commissionCellCommission strong {
  display: block;
  max-width: 100%;
  white-space: nowrap;
}

#sellerCommissionTable .commissionCellPercent .commissionMiniBar {
  width: min(100%, 120px);
  margin-left: auto;
}

#sellerCommissionTable th:nth-child(1),
#sellerCommissionTable th:nth-child(2),
#sellerCommissionTable .commissionCellLevel,
#sellerCommissionTable .commissionCellSeller {
  text-align: left;
}

#sellerCommissionTable th:nth-child(n+3),
#sellerCommissionTable .commissionTargetCell,
#sellerCommissionTable .commissionSalesCell,
#sellerCommissionTable .commissionCellPercent,
#sellerCommissionTable .commissionCellMargin,
#sellerCommissionTable .commissionCellDiscount,
#sellerCommissionTable .commissionCellFilament,
#sellerCommissionTable .commissionCellCourses,
#sellerCommissionTable .commissionCellPoints,
#sellerCommissionTable .commissionCellCommission {
  text-align: right;
}

@media (max-width: 1450px) {
  #sellerCommissionTable.sellerCommissionTable {
    min-width: 1360px;
  }
}

/* Vendas audit hardening. Keep commission data visually tied to the right headers. */
#vendedoresView .localTabs {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

#vendedoresView .subTab {
  white-space: nowrap;
}

#vendedoresView #sellerCommissionTable thead tr,
#vendedoresView #sellerCommissionTable tbody tr {
  grid-template-columns:
    minmax(150px, 0.95fr)
    minmax(230px, 1.45fr)
    minmax(155px, 1fr)
    minmax(205px, 1.3fr)
    minmax(115px, 0.78fr)
    minmax(112px, 0.72fr)
    minmax(118px, 0.78fr)
    minmax(132px, 0.86fr)
    minmax(96px, 0.62fr)
    minmax(94px, 0.58fr)
    minmax(140px, 0.86fr);
}

#vendedoresView #sellerCommissionTable th,
#vendedoresView #sellerCommissionTable td {
  line-height: 1.22;
  min-height: 44px;
}

#vendedoresView #sellerCommissionTable .commissionCellLevel {
  overflow: visible;
  padding-left: 16px;
  padding-right: 14px;
}

#vendedoresView #sellerCommissionTable .commissionLevelBadge {
  box-sizing: border-box;
  max-width: 128px;
  min-width: 98px;
  overflow: visible;
}

#vendedoresView #sellerCommissionTable .commissionCellSeller {
  padding-left: 10px;
}

#vendedoresView #sellerCommissionTable .commissionTargetCell strong,
#vendedoresView #sellerCommissionTable .commissionSalesCell strong,
#vendedoresView #sellerCommissionTable .commissionCellCommission strong {
  overflow-wrap: normal;
  white-space: nowrap;
}

#vendedoresView #sellerCommissionTable .commissionCellPoints strong {
  white-space: nowrap;
}

#vendedoresView #sellerCommissionStatus {
  background: light-dark(#fbfdfe, #141b1f);
  border: 1px solid var(--ui-border-soft);
  border-radius: 10px;
  margin-top: 8px;
  padding: 10px 12px;
}

@media (max-width: 1500px) {
  #vendedoresView #sellerCommissionTable.sellerCommissionTable {
    min-width: 1480px;
  }
}

/* Final shell cleanup: normal cascade, predictable drawer, readable commission levels. */
@media (min-width: 1081px) {
  .appLayout.sidebarCollapsed:not(.sidebarHover),
  .appLayout.sidebarCollapsed:not(.sidebarHover):has(.sidebar:hover) {
    grid-template-columns: var(--sidebar-rail-width) minmax(0, 1fr);
  }

  .appLayout.sidebarCollapsed:not(.sidebarHover) .sidebar,
  .appLayout.sidebarCollapsed:not(.sidebarHover) .sidebar:hover,
  .appLayout.sidebarCollapsed:not(.sidebarHover):has(.sidebar:hover) .sidebar {
    width: var(--sidebar-rail-width);
    min-width: var(--sidebar-rail-width);
    max-width: var(--sidebar-rail-width);
    overflow: hidden;
    box-shadow: none;
  }

  .appLayout.sidebarHover,
  .appLayout:not(.sidebarCollapsed) {
    grid-template-columns: var(--sidebar-open-width) minmax(0, 1fr);
  }

  .appLayout.sidebarHover .sidebar,
  .appLayout:not(.sidebarCollapsed) .sidebar {
    width: var(--sidebar-open-width);
    min-width: var(--sidebar-open-width);
    max-width: var(--sidebar-open-width);
  }

  .appLayout.sidebarCollapsed:not(.sidebarHover) .sidebar:hover .sidebarTitle,
  .appLayout.sidebarCollapsed:not(.sidebarHover) .sidebar:hover .navChildren,
  .appLayout.sidebarCollapsed:not(.sidebarHover):has(.sidebar:hover) .sidebarTitle,
  .appLayout.sidebarCollapsed:not(.sidebarHover):has(.sidebar:hover) .navChildren {
    display: none;
  }

  .navGroup > .navChildren,
  .navGroup:hover > .navChildren,
  .navGroup:focus-within > .navChildren {
    display: none;
  }

  .navGroup.isOpen > .navChildren {
    display: grid;
  }
}

#vendedoresView #sellerCommissionTable thead tr,
#vendedoresView #sellerCommissionTable tbody tr {
  grid-template-columns:
    minmax(166px, 1fr)
    minmax(230px, 1.42fr)
    minmax(155px, 1fr)
    minmax(205px, 1.3fr)
    minmax(115px, 0.78fr)
    minmax(112px, 0.72fr)
    minmax(118px, 0.78fr)
    minmax(132px, 0.86fr)
    minmax(96px, 0.62fr)
    minmax(94px, 0.58fr)
    minmax(140px, 0.86fr);
}

#vendedoresView #sellerCommissionTable .commissionCellLevel {
  min-width: 0;
  overflow: visible;
  padding-left: 18px;
  padding-right: 16px;
}

#vendedoresView #sellerCommissionTable .commissionLevelBadge {
  width: max-content;
  min-width: 108px;
  max-width: none;
  overflow: visible;
  text-overflow: clip;
}

/* APP-COM-001: admin view prioritizes the commission table and keeps supporting rule details collapsed. */
#vendedoresView .sellerCommissionTablePanel {
  order: -3;
}

#vendedoresView .sellerCommissionSummary {
  order: -2;
}

#vendedoresView .commissionLevelGuidePanel {
  order: -1;
}

.commissionCollapseHeader {
  align-items: center;
  margin-bottom: 0;
}

.commissionCollapseHeader .miniNote {
  margin-bottom: 0;
}

.commissionToggle {
  flex: 0 0 auto;
  white-space: nowrap;
}

.commissionCollapsibleBody {
  margin-top: 12px;
}

.commissionCollapsibleBody[hidden] {
  display: none;
}

.sellerCommissionSummary.isCollapsed,
.commissionLevelGuidePanel.isCollapsed {
  box-shadow: none;
}

#vendedoresView .sellerCommissionTableWrap {
  overflow-x: hidden;
}

#vendedoresView #sellerCommissionTable.sellerCommissionTable {
  min-width: 0;
  table-layout: auto;
}

#vendedoresView #sellerCommissionTable thead tr,
#vendedoresView #sellerCommissionTable tbody tr {
  grid-template-columns:
    minmax(0, 0.9fr)
    minmax(0, 1.42fr)
    minmax(0, 0.78fr)
    minmax(0, 0.84fr)
    minmax(0, 0.84fr)
    minmax(0, 0.62fr)
    minmax(0, 0.66fr)
    minmax(0, 0.72fr)
    minmax(0, 0.68fr)
    minmax(0, 0.58fr);
}

#vendedoresView #sellerCommissionTable th,
#vendedoresView #sellerCommissionTable td {
  min-height: 38px;
  padding: 7px 5px;
  font-size: 10.5px;
  line-height: 1.16;
  overflow-wrap: anywhere;
}

#vendedoresView #sellerCommissionTable th:nth-child(1),
#vendedoresView #sellerCommissionTable th:nth-child(2),
#vendedoresView #sellerCommissionTable .commissionCellLevelCommission,
#vendedoresView #sellerCommissionTable .commissionCellSeller {
  text-align: left;
}

#vendedoresView #sellerCommissionTable th:nth-child(n+3),
#vendedoresView #sellerCommissionTable .commissionTargetCell,
#vendedoresView #sellerCommissionTable .commissionSalesCell,
#vendedoresView #sellerCommissionTable .commissionReleasedCell,
#vendedoresView #sellerCommissionTable .commissionCellPercent,
#vendedoresView #sellerCommissionTable .commissionCellMargin,
#vendedoresView #sellerCommissionTable .commissionCellDiscount,
#vendedoresView #sellerCommissionTable .commissionCellFilament,
#vendedoresView #sellerCommissionTable .commissionCellCourses {
  text-align: right;
}

#vendedoresView #sellerCommissionTable .commissionCellLevelCommission {
  display: grid;
  align-content: center;
  justify-items: start;
  gap: 4px;
  min-width: 0;
}

#vendedoresView #sellerCommissionTable .commissionCellLevelCommission strong {
  max-width: 100%;
  font-size: 10.5px;
  line-height: 1.1;
  white-space: normal;
}

#vendedoresView #sellerCommissionTable .commissionLevelBadge {
  width: auto;
  min-width: 0;
  max-width: 100%;
  padding: 4px 7px;
  font-size: 10px;
  line-height: 1;
  white-space: normal;
}

#vendedoresView #sellerCommissionTable .commissionStatusPill {
  min-width: 0;
  padding: 3px 6px;
  font-size: 10px;
  white-space: normal;
}

#vendedoresView #sellerCommissionTable .commissionStack {
  gap: 2px;
}

#vendedoresView #sellerCommissionTable .commissionStack strong,
#vendedoresView #sellerCommissionTable .commissionStack span,
#vendedoresView #sellerCommissionTable .commissionTargetCell strong,
#vendedoresView #sellerCommissionTable .commissionSalesCell strong,
#vendedoresView #sellerCommissionTable .commissionReleasedCell strong {
  white-space: normal;
}

#vendedoresView #sellerCommissionTable .commissionCellSeller .mutedCell {
  display: -webkit-box;
  margin-top: 2px;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

#vendedoresView #sellerCommissionTable .commissionCellPercent .commissionMiniBar {
  width: min(100%, 72px);
}

@media (max-width: 1500px) {
  #vendedoresView #sellerCommissionTable.sellerCommissionTable {
    min-width: 0;
  }
}

/* Maintenance audit dashboard. Compact checklist generated by the nightly routine. */
.maintenanceAuditCard {
  grid-column: 1 / -1;
}

.maintenanceAuditGroups {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 10px;
  margin-top: 12px;
}

.maintenanceAuditGroup {
  min-height: 118px;
  padding: 12px;
  border: 1px solid var(--ui-border);
  border-radius: 12px;
  background: light-dark(#fbfdfe, #141b1f);
}

.maintenanceAuditGroup div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.maintenanceAuditGroup strong {
  color: var(--ui-ink);
  font-size: 14px;
}

.maintenanceAuditGroup span {
  flex: none;
  padding: 4px 8px;
  border-radius: 999px;
  background: light-dark(#eef8fb, #1a2126);
  color: var(--ui-teal);
  font-size: 11px;
  font-weight: 850;
}

.maintenanceAuditGroup p {
  margin: 10px 0 0;
  color: var(--ui-ink);
  font-size: 12px;
  font-weight: 750;
  line-height: 1.3;
}

.maintenanceAuditGroup small {
  display: block;
  margin-top: 6px;
  color: var(--ui-muted);
  font-size: 11px;
  line-height: 1.3;
}

.maintenanceAuditGroup.ok {
  border-color: light-dark(rgba(0, 122, 79, 0.18), rgba(70, 168, 122, 0.18));
  background: light-dark(#f7fcfa, #161d22);
}

.maintenanceAuditGroup.ok span {
  background: light-dark(#e7f8ef, #1a2720);
  color: light-dark(#007a4f, #46a87a);
}

.maintenanceAuditGroup.attention {
  border-color: rgba(255, 117, 31, 0.26);
  background: light-dark(#fff9f4, #161d22);
}

.maintenanceAuditGroup.attention span {
  background: light-dark(#fff0e3, #2c2117);
  color: light-dark(#cf5200, #e66726);
}

.maintenanceAuditGroup.critical {
  border-color: light-dark(rgba(201, 29, 11, 0.28), rgba(246, 80, 60, 0.28));
  background: light-dark(#fff7f5, #171e23);
}

.maintenanceAuditGroup.critical span {
  background: light-dark(#ffe9e5, #332321);
  color: light-dark(#c91d0b, #f6503c);
}

.maintenanceAuditDetails {
  margin-top: 12px;
}

.maintenanceAuditDetails summary {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 0 14px;
  border: 1px solid var(--ui-border);
  border-radius: 999px;
  color: var(--ui-teal);
  background: light-dark(#fff, #11181d);
  font-weight: 850;
  cursor: pointer;
}

.maintenanceAuditDetails[open] summary {
  margin-bottom: 10px;
}

#maintenanceAuditDetailsTable th:nth-child(1),
#maintenanceAuditDetailsTable td:nth-child(1) {
  width: 13%;
}

#maintenanceAuditDetailsTable th:nth-child(2),
#maintenanceAuditDetailsTable td:nth-child(2) {
  width: 11%;
}

#maintenanceAuditDetailsTable th:nth-child(3),
#maintenanceAuditDetailsTable td:nth-child(3) {
  width: 12%;
}

#maintenanceAuditDetailsTable th:nth-child(4),
#maintenanceAuditDetailsTable td:nth-child(4) {
  width: 34%;
}

#maintenanceAuditDetailsTable th:nth-child(5),
#maintenanceAuditDetailsTable td:nth-child(5) {
  width: 30%;
}

/* APP-001: Portal identity, sidebar readability, and Knowledge Center polish. */
:root {
  --sidebar-open-width: 340px;
}

:where(.appLayout:not(.sidebarCollapsed) .sidebar::after),
:where(.appLayout.sidebarCollapsed:has(.sidebar:hover) .sidebar::after),
:where(.appLayout.sidebarHover .sidebar::after) {
  content: "Portal 3D Curitiba";
}

.brandText h1 {
  max-width: 280px;
  white-space: normal;
  line-height: 1.08;
}

.brandSignature {
  letter-spacing: 0;
}

:where(.appLayout.sidebarCollapsed:not(.sidebarHover) .sidebar:hover) {
  overflow: hidden;
}

:where(.appLayout.sidebarHover .navItem),
:where(.appLayout:not(.sidebarCollapsed) .navItem) {
  min-height: 42px;
  padding: 0 12px;
  line-height: 1.22;
  white-space: normal;
  overflow-wrap: anywhere;
}

:where(.appLayout.sidebarHover .sidebarTitle),
:where(.appLayout:not(.sidebarCollapsed) .sidebarTitle) {
  margin-top: 14px;
  margin-bottom: 8px;
  letter-spacing: 0.08em;
}

:where(.appLayout.sidebarHover .sidebarBlock:first-of-type .sidebarTitle),
:where(.appLayout:not(.sidebarCollapsed) .sidebarBlock:first-of-type .sidebarTitle) {
  margin-top: 0;
}

.sidebarMenuGroup,
:where(.appLayout.sidebarHover .sidebarMenuGroup),
:where(.appLayout:not(.sidebarCollapsed) .sidebarMenuGroup) {
  width: 100%;
  display: grid;
  gap: 6px;
}

.sidebarMenuGroup > .navGroupParent[data-view-target="expedicaoView"]::before {
  content: "LG";
}

.sidebarMenuGroup > .navGroupParent[data-view-target="pedidoVendaView"]::before {
  content: "ER";
}

:where(.appLayout.sidebarHover .navChildren),
:where(.appLayout:not(.sidebarCollapsed) .navChildren) {
  gap: 6px;
  padding: 0 0 2px 10px;
}

:where(.appLayout.sidebarHover .navSubItem),
:where(.appLayout:not(.sidebarCollapsed) .navSubItem) {
  min-height: 36px;
  padding-left: 12px;
  font-size: 13px;
}

.knowledgePanel .panelHeader {
  align-items: flex-start;
  padding-bottom: 16px;
}

.knowledgePanel .sectionHint {
  max-width: 720px;
}

.knowledgePanel .localTabs {
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
}

.knowledgePanel .subTab {
  min-height: 38px;
  border: 1px solid var(--ui-border, light-dark(#e5ded6, #32393e));
}

.knowledgePanel .subTab[data-local-tab="cadastro"]:not(.active) {
  background: light-dark(#fff, #11181d);
  color: var(--ui-muted, light-dark(#62707c, #a2b1be));
}

.knowledgePanel .subpanel {
  border-color: rgba(24, 34, 43, 0.10);
  box-shadow: 0 10px 28px rgba(19, 32, 42, 0.05);
}

.knowledgePanel .subpanelTitleRow {
  align-items: flex-start;
  margin-bottom: 12px;
}

.knowledgeFilters {
  grid-template-columns: minmax(220px, 1.35fr) repeat(4, minmax(126px, 1fr)) auto;
  gap: 12px;
  align-items: end;
  padding: 12px;
  border: 1px solid rgba(24, 34, 43, 0.10);
  border-radius: 8px;
  background: light-dark(#fbfdfe, #141b1f);
}

.knowledgeFilters input,
.knowledgeFilters select {
  min-height: 38px;
}

.knowledgePanel .tableWrap {
  border: 1px solid rgba(24, 34, 43, 0.10);
  border-radius: 8px;
  background: light-dark(#fff, #11181d);
  overflow: auto;
}

#knowledgeArticlesTable {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
}

#knowledgeArticlesTable th {
  padding: 12px 14px;
  border-bottom: 1px solid rgba(24, 34, 43, 0.12);
  background: light-dark(#f7fafb, #171e23);
  color: var(--ui-muted, light-dark(#62707c, #a2b1be));
  font-size: 11px;
  font-weight: 850;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

#knowledgeArticlesTable td {
  padding: 13px 14px;
  border-bottom: 1px solid rgba(24, 34, 43, 0.08);
  vertical-align: middle;
}

#knowledgeArticlesTable tbody tr:hover {
  background: light-dark(#fffaf6, #151c21);
}

#knowledgeArticlesTable th:last-child,
#knowledgeArticlesTable td:last-child {
  width: 76px;
  text-align: center;
}

#knowledgeArticlesTable button {
  min-height: 30px;
  padding: 0 12px;
  border: 1px solid rgba(255, 117, 31, 0.24);
  border-radius: 999px;
  background: light-dark(#fff5ee, #192025);
  color: var(--ui-orange, light-dark(#d95a08, #e66620));
  font-size: 12px;
  font-weight: 850;
}

#knowledgeArticlesTable button:hover {
  background: light-dark(#ffecdc, #312317);
}

.knowledgeEmptyState {
  display: grid;
  gap: 6px;
  padding: 18px;
  border: 1px dashed light-dark(rgba(40, 119, 141, 0.28), rgba(83, 158, 181, 0.28));
  border-radius: 8px;
  background: light-dark(#f7fbfc, #161d22);
  color: var(--ui-muted, light-dark(#62707c, #a2b1be));
}

.knowledgeEmptyState strong {
  color: var(--ui-ink, light-dark(#13202a, #dceefc));
  font-size: 15px;
}

@media (max-width: 1180px) {
  .knowledgeFilters {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .knowledgeFilters .ghostButton {
    grid-column: 1 / -1;
    justify-self: start;
  }
}

@media (max-width: 720px) {
  .brandText h1 {
    max-width: 220px;
  }

  .knowledgeFilters {
    grid-template-columns: 1fr;
  }
}

/* APP-001B: stable base layout. Header, account menu, sidebar, and content live in separate regions. */
:root {
  --portal-header-height: 76px;
  --portal-page-gap: 14px;
  --sidebar-rail-width: 72px;
  --sidebar-open-width: 320px;
}

html,
body {
  min-height: 100%;
}

body {
  overflow-x: hidden;
}

.shell {
  width: 100%;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--ui-bg, var(--bg));
}

.topbar {
  position: sticky;
  top: 0;
  z-index: 300;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  width: 100%;
  min-height: var(--portal-header-height);
  padding: 12px 20px;
  border-bottom: 1px solid rgba(24, 34, 43, 0.08);
  background: light-dark(rgba(255, 255, 255, 0.98), rgba(17, 24, 29, 0.98));
  box-shadow: 0 10px 28px rgba(19, 32, 42, 0.06);
}

.brand {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 12px;
}

.brandMark {
  flex: 0 0 44px;
  width: 44px;
  height: 44px;
}

.brandText {
  min-width: 0;
}

.brandText h1 {
  max-width: none;
  margin: 0;
  color: var(--ui-ink, var(--ink));
  font-size: 22px;
  line-height: 1.1;
  white-space: normal;
}

.brandText .eyebrow,
.brandSignature {
  margin: 0;
  line-height: 1.2;
}

.topbarMeta {
  flex: 0 0 auto;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  width: auto;
  min-width: max-content;
  margin-left: auto;
  z-index: 320;
}

.topbarAccount {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.topbarAvatar {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 58px;
  width: 58px;
  height: 58px;
  padding: 0;
  border: 1px solid light-dark(rgba(40, 119, 141, 0.18), rgba(83, 158, 181, 0.18));
  border-radius: 999px;
  background: light-dark(#fff, #11181d);
  color: var(--teal-dark, var(--teal));
  font-size: 12px;
  font-weight: 900;
  line-height: 1;
  overflow: hidden;
  cursor: pointer;
}

.topbarAvatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.topbarAvatar span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.topbarAvatar:hover,
.topbarAvatar:focus-visible {
  border-color: rgba(255, 117, 31, 0.34);
  outline: none;
  box-shadow: 0 0 0 3px rgba(255, 117, 31, 0.12);
}

.topbarAvatar:disabled {
  cursor: progress;
  opacity: 0.72;
}

.topbarAvatar.isUploading::after {
  position: absolute;
  inset: 3px;
  border: 2px solid rgba(255, 117, 31, 0.22);
  border-top-color: var(--orange);
  border-radius: inherit;
  content: "";
  animation: topbarAvatarSpin 0.85s linear infinite;
}

.topbarAvatarInput {
  display: none;
}

.topbarPhotoAction {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  width: 100%;
  min-height: 34px;
  padding: 0 12px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--teal);
  font-weight: 850;
  text-align: left;
  cursor: pointer;
}

.topbarPhotoAction:hover,
.topbarPhotoAction:focus-visible {
  background: var(--teal-soft);
  outline: none;
}

.topbarPhotoAction:disabled {
  cursor: progress;
  opacity: 0.7;
}

.topbarPhotoError {
  max-width: 210px;
  margin: 0;
  padding: 6px 8px;
  border-radius: 8px;
  background: var(--soft-orange);
  color: var(--orange-dark);
  font-size: 11px;
  font-weight: 800;
  line-height: 1.35;
}

@keyframes topbarAvatarSpin {
  to {
    transform: rotate(360deg);
  }
}

.topbarUser:not([hidden]) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 38px;
  max-width: 260px;
  padding: 0 14px;
  border: 1px solid light-dark(rgba(40, 119, 141, 0.18), rgba(83, 158, 181, 0.18));
  border-radius: 999px;
  background: light-dark(#f7fbfc, #161d22);
  appearance: none;
  color: var(--ui-ink, var(--ink));
  font-size: 13px;
  font-weight: 850;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
}

.topbarUser:focus-visible {
  outline: 2px solid light-dark(rgba(40, 119, 141, 0.34), rgba(83, 158, 181, 0.34));
  outline-offset: 2px;
}

.topbarAccountMenu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 440;
  display: grid;
  gap: 6px;
  min-width: 150px;
  padding: 8px;
  border: 1px solid rgba(24, 34, 43, 0.12);
  border-radius: 10px;
  background: light-dark(#fff, #11181d);
  box-shadow: 0 16px 34px rgba(19, 32, 42, 0.16);
  opacity: 0;
  pointer-events: none;
  transform: translateY(-6px);
  transition: opacity 0.16s ease, transform 0.16s ease;
}

.topbarAccountMenu[hidden] {
  display: none;
}

.topbarAccount.isOpen .topbarAccountMenu {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

.topbarAccountMenu .topbarLogout {
  width: 100%;
  min-height: 34px;
  justify-content: flex-start;
  text-align: left;
}

.topbarAuthActions {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  left: auto;
  z-index: 420;
  min-width: 180px;
  padding: 8px;
  border: 1px solid rgba(24, 34, 43, 0.12);
  border-radius: 10px;
  background: light-dark(#fff, #11181d);
  box-shadow: 0 16px 34px rgba(19, 32, 42, 0.16);
}

.topbarMeta:not(.accountMenuOpen) #topbarAuthActions {
  opacity: 0;
  pointer-events: none;
  transform: translateY(-6px);
}

.topbarMeta.accountMenuOpen #topbarAuthActions:not([hidden]) {
  display: grid;
  gap: 6px;
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

.topbarAuthActions a,
.topbarAuthActions button {
  width: 100%;
  min-height: 34px;
  justify-content: flex-start;
  text-align: left;
}

.portalStatusWrap {
  position: relative;
  display: inline-flex;
  align-items: center;
  margin-right: 8px;
}

.portalStatusBadge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 34px;
  padding: 0 12px;
  border: 1px solid rgba(24, 34, 43, 0.1);
  border-radius: 999px;
  background: light-dark(#f7fbfc, #161d22);
  color: var(--ui-ink, var(--ink));
  font-size: 12px;
  font-weight: 900;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  box-shadow: 0 8px 18px rgba(19, 32, 42, 0.06);
}

.portalStatusBadge:focus-visible {
  outline: 2px solid light-dark(rgba(40, 119, 141, 0.34), rgba(83, 158, 181, 0.34));
  outline-offset: 2px;
}

.portalStatusDot {
  flex: 0 0 8px;
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: #f2b84b;
  box-shadow: 0 0 0 4px rgba(242, 184, 75, 0.16);
}

.portalStatusBadge.statusActive .portalStatusDot {
  background: light-dark(#19a974, #1fac77);
  box-shadow: 0 0 0 4px rgba(25, 169, 116, 0.16);
}

.portalStatusBadge.statusUpdating .portalStatusDot {
  background: light-dark(#28778d, #539eb5);
  box-shadow: 0 0 0 4px rgba(40, 119, 141, 0.16);
}

.portalStatusBadge.statusAttention .portalStatusDot {
  background: #f2b84b;
  box-shadow: 0 0 0 4px rgba(242, 184, 75, 0.16);
}

.portalStatusBadge.statusAction .portalStatusDot {
  background: light-dark(#d84a2b, #ed5d3e);
  box-shadow: 0 0 0 4px rgba(216, 74, 43, 0.16);
}

.portalStatusPopover {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 430;
  display: none;
  width: min(320px, calc(100vw - 32px));
  padding: 12px;
  border: 1px solid rgba(24, 34, 43, 0.12);
  border-radius: 12px;
  background: light-dark(#fff, #11181d);
  box-shadow: 0 18px 40px rgba(19, 32, 42, 0.16);
}

.portalStatusWrap:hover .portalStatusPopover,
.portalStatusWrap.isOpen .portalStatusPopover {
  display: grid;
  gap: 8px;
}

.portalStatusPopover strong {
  font-size: 13px;
  color: var(--ui-ink, var(--ink));
}

.portalStatusPopover p {
  margin: 0;
  color: var(--ui-muted, var(--muted));
  font-size: 12px;
  line-height: 1.45;
}

.portalStatusList {
  display: grid;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.portalStatusList li {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: 6px 0;
  border-top: 1px solid rgba(24, 34, 43, 0.07);
  color: var(--ui-ink, var(--ink));
  font-size: 12px;
}

.portalStatusList li:first-child {
  border-top: 0;
}

.portalStatusList span {
  color: var(--ui-muted, var(--muted));
}

.portalStatusAction {
  padding: 8px 10px;
  border-radius: 10px;
  background: light-dark(#fff7e6, #241e11);
  color: light-dark(#7b4b00, #ba864a);
  font-weight: 800;
}

.portalMessagesWrap {
  position: relative;
  display: inline-flex;
  align-items: center;
  margin-left: 0;
}

.portalMessagesButton {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border: 1px solid light-dark(rgba(40, 119, 141, 0.18), rgba(83, 158, 181, 0.18));
  border-radius: 999px;
  background: light-dark(#f7fbfc, #161d22);
  color: light-dark(#28778d, #539eb5);
  font-size: 20px;
  cursor: pointer;
  box-shadow: 0 8px 18px rgba(19, 32, 42, 0.06);
}

.portalMessagesButton.hasUnread {
  border-color: light-dark(rgba(216, 74, 43, 0.24), rgba(237, 93, 62, 0.24));
  color: light-dark(#d84a2b, #ed5d3e);
}

.portalMessagesButton:focus-visible {
  outline: 2px solid light-dark(rgba(40, 119, 141, 0.34), rgba(83, 158, 181, 0.34));
  outline-offset: 2px;
}

.portalMessagesCount {
  position: absolute;
  top: -5px;
  right: -5px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border: 2px solid light-dark(#fff, #11181d);
  border-radius: 999px;
  background: light-dark(#d84a2b, #ed5d3e);
  color: #fff;
  font-size: 10px;
  font-weight: 900;
  line-height: 14px;
  text-align: center;
}

.portalMessagesPopover {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 435;
  display: none;
  width: min(360px, calc(100vw - 32px));
  padding: 10px;
  border: 1px solid rgba(24, 34, 43, 0.12);
  border-radius: 12px;
  background: light-dark(#fff, #11181d);
  box-shadow: 0 18px 40px rgba(19, 32, 42, 0.16);
}

.portalMessagesWrap.isOpen .portalMessagesPopover {
  display: grid;
  gap: 8px;
}

.portalMessagesHeader {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 2px 2px 6px;
}

.portalMessagesHeader strong {
  color: var(--ui-ink, var(--ink));
  font-size: 13px;
}

.portalMessagesHeader button {
  min-height: 28px;
  border: 0;
  background: transparent;
  color: light-dark(#28778d, #539eb5);
  font-size: 12px;
  font-weight: 850;
  cursor: pointer;
}

.portalMessagesHeader button:disabled {
  color: light-dark(rgba(24, 34, 43, 0.36), rgba(222, 236, 249, 0.36));
  cursor: default;
}

.portalMessagesEmpty,
.portalMessagesError {
  margin: 0;
  padding: 8px 4px;
  color: var(--ui-muted, var(--muted));
  font-size: 12px;
  line-height: 1.45;
}

.portalMessagesError {
  color: light-dark(#b42318, #ed5c4b);
}

.portalMessagesList {
  display: grid;
  gap: 6px;
  max-height: min(292px, calc(100vh - 160px));
  margin: 0;
  padding: 0;
  overflow: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
  list-style: none;
}

.portalMessageItem {
  display: grid;
  width: 100%;
  gap: 5px;
  padding: 10px;
  border: 1px solid rgba(24, 34, 43, 0.08);
  border-radius: 10px;
  background: light-dark(#fff, #11181d);
  color: var(--ui-ink, var(--ink));
  text-align: left;
  cursor: pointer;
}

.portalMessageItem.isUnread {
  border-color: light-dark(rgba(40, 119, 141, 0.22), rgba(83, 158, 181, 0.22));
  background: light-dark(#f7fbfc, #161d22);
}

.portalMessageItem span {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}

.portalMessageItem strong {
  font-size: 12.5px;
  font-weight: 900;
}

.portalMessageItem small {
  flex: 0 0 auto;
  color: var(--ui-muted, var(--muted));
  font-size: 11px;
}

.portalMessageItem p {
  margin: 0;
  color: var(--ui-muted, var(--muted));
  font-size: 12px;
  line-height: 1.4;
}

.configSyncChecklist {
  display: grid;
  gap: 8px;
}

.configSyncChecklist span {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 7px 10px;
  border: 1px solid light-dark(rgba(40, 119, 141, 0.13), rgba(83, 158, 181, 0.13));
  border-radius: 10px;
  background: light-dark(#f7fbfc, #161d22);
  color: var(--ui-ink, var(--ink));
  font-size: 12px;
  font-weight: 800;
}

.appLayout {
  flex: 1 1 auto;
  display: grid;
  align-items: start;
  gap: 0;
  width: 100%;
  min-height: calc(100vh - var(--portal-header-height));
  overflow: visible;
}

.appLayout.sidebarCollapsed:not(.sidebarHover) {
  grid-template-columns: var(--sidebar-rail-width) minmax(0, 1fr);
}

.appLayout.sidebarHover,
.appLayout:not(.sidebarCollapsed) {
  grid-template-columns: var(--sidebar-open-width) minmax(0, 1fr);
}

.sidebar {
  position: sticky;
  top: var(--portal-header-height);
  z-index: 120;
  width: 100%;
  min-width: 0;
  max-width: none;
  height: calc(100vh - var(--portal-header-height));
  min-height: calc(100vh - var(--portal-header-height));
  max-height: calc(100vh - var(--portal-header-height));
  padding: 14px 10px;
  border-right: 1px solid rgba(24, 34, 43, 0.08);
  border-radius: 0;
  background: light-dark(#fff, #11181d);
  box-shadow: none;
  overflow-x: hidden;
  overflow-y: auto;
}

.sidebar::before,
.sidebar::after {
  display: none;
  content: none;
}

.workspace {
  grid-column: 2;
  min-width: 0;
  width: 100%;
  padding: 16px 18px 28px;
}

.sidebarBlock:not([hidden]) {
  display: grid;
  gap: 6px;
  width: 100%;
}

.sidebarBlock + .sidebarBlock {
  margin-top: 12px;
}

.appLayout.sidebarCollapsed:not(.sidebarHover) .sidebarTitle,
.appLayout.sidebarCollapsed:not(.sidebarHover) .navChildren {
  display: none;
}

.appLayout.sidebarHover .sidebarTitle,
.appLayout:not(.sidebarCollapsed) .sidebarTitle {
  display: block;
  margin: 8px 8px 6px;
  color: var(--ui-muted, var(--muted));
  font-size: 10px;
  font-weight: 900;
  line-height: 1;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.appLayout.sidebarCollapsed:not(.sidebarHover) .navItem:not([hidden]) {
  width: 48px;
  min-width: 48px;
  max-width: 48px;
  min-height: 42px;
  margin: 0 auto;
  padding: 0;
  justify-content: center;
  gap: 0;
  overflow: hidden;
  white-space: nowrap;
  font-size: 0;
}

.appLayout.sidebarCollapsed:not(.sidebarHover) .navItem::before {
  flex: 0 0 34px;
  margin: 0;
  font-size: 11px;
  letter-spacing: 0;
}

.appLayout.sidebarHover .navItem:not([hidden]),
.appLayout:not(.sidebarCollapsed) .navItem:not([hidden]) {
  width: 100%;
  min-width: 0;
  max-width: none;
  min-height: 40px;
  margin: 0;
  padding: 0 12px;
  justify-content: flex-start;
  gap: 10px;
  overflow: visible;
  color: var(--ui-ink, var(--ink));
  font-size: 13px;
  line-height: 1.22;
  text-align: left;
  white-space: normal;
  overflow-wrap: anywhere;
}

.appLayout.sidebarHover .navItem::before,
.appLayout:not(.sidebarCollapsed) .navItem::before {
  flex: 0 0 34px;
  margin: 0;
}

.appLayout.sidebarHover .navGroup,
.appLayout:not(.sidebarCollapsed) .navGroup {
  width: 100%;
  display: grid;
  gap: 6px;
}

.appLayout.sidebarHover .navGroup > .navChildren,
.appLayout:not(.sidebarCollapsed) .navGroup > .navChildren {
  display: none;
}

.appLayout.sidebarHover .navGroup.isOpen > .navChildren,
.appLayout:not(.sidebarCollapsed) .navGroup.isOpen > .navChildren {
  display: grid;
  gap: 6px;
  padding: 0 0 2px 10px;
}

.appLayout.sidebarHover .navSubItem:not([hidden]),
.appLayout:not(.sidebarCollapsed) .navSubItem:not([hidden]) {
  min-height: 34px;
  padding-left: 10px;
  font-size: 12px;
}

@media (max-width: 900px) {
  .topbar {
    position: relative;
    flex-wrap: wrap;
    min-height: auto;
  }

  .topbarMeta {
    width: 100%;
    justify-content: flex-start;
    margin-left: 0;
  }

  .appLayout,
  .appLayout.sidebarCollapsed:not(.sidebarHover),
  .appLayout.sidebarHover,
  .appLayout:not(.sidebarCollapsed) {
    grid-template-columns: 1fr;
  }

  .sidebar {
    position: relative;
    top: auto;
    height: auto;
    min-height: 0;
    max-height: none;
    border-right: 0;
    border-bottom: 1px solid rgba(24, 34, 43, 0.08);
  }

  .workspace {
    grid-column: 1;
    padding: 14px;
  }
}

/* APP-001C: presentation polish for sidebar and Knowledge Center. */
:root {
  --sidebar-rail-width: 76px;
  --sidebar-open-width: 328px;
}

.sidebar {
  background: linear-gradient(180deg, light-dark(#ffffff, #11181d) 0%, light-dark(#fbfdfe, #141b1f) 100%);
}

.sidebarToggle {
  border-radius: 14px;
  transition: background 160ms ease, border-color 160ms ease, color 160ms ease, box-shadow 160ms ease;
}

.sidebarToggle:hover {
  background: light-dark(#fff5ee, #192025);
  border-color: rgba(255, 117, 31, 0.26);
  color: var(--ui-orange, var(--orange));
}

.appLayout.sidebarCollapsed:not(.sidebarHover) .sidebar {
  padding: 14px 9px;
}

.appLayout.sidebarCollapsed:not(.sidebarHover) .sidebarBlock:not([hidden]) {
  gap: 8px;
}

.appLayout.sidebarCollapsed:not(.sidebarHover) .sidebarBlock + .sidebarBlock {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid rgba(24, 34, 43, 0.08);
}

.appLayout.sidebarCollapsed:not(.sidebarHover) .navItem:not([hidden]) {
  width: 54px;
  min-width: 54px;
  max-width: 54px;
  min-height: 46px;
  border: 1px solid rgba(24, 34, 43, 0.08);
  border-radius: 14px;
  background: light-dark(#fff, #11181d);
  box-shadow: 0 6px 16px rgba(19, 32, 42, 0.04);
  transition: background 160ms ease, border-color 160ms ease, color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.appLayout.sidebarCollapsed:not(.sidebarHover) .navItem:not([hidden])::before {
  content: attr(data-icon);
  display: inline-grid;
  place-items: center;
  width: 42px;
  height: 32px;
  flex: 0 0 42px;
  border-radius: 10px;
  background: transparent;
  color: var(--ui-muted, var(--muted));
  font-size: 10px;
  font-weight: 950;
  line-height: 1;
  letter-spacing: 0.02em;
}

.appLayout.sidebarCollapsed:not(.sidebarHover) .navItem:hover:not([hidden]) {
  transform: translateY(-1px);
  border-color: rgba(255, 117, 31, 0.24);
  background: light-dark(#fff7f0, #181f24);
  box-shadow: 0 10px 22px rgba(255, 117, 31, 0.12);
}

.appLayout.sidebarCollapsed:not(.sidebarHover) .navItem:hover::before {
  color: var(--ui-orange, var(--orange));
}

.appLayout.sidebarCollapsed:not(.sidebarHover) .navItem.active,
.appLayout.sidebarCollapsed:not(.sidebarHover) .navGroup:has(.navSubItem.active) > .navItem {
  border-color: rgba(255, 117, 31, 0.34);
  background: var(--ui-orange-soft, light-dark(#fff1e8, #1c2328));
  box-shadow: inset 0 0 0 1px rgba(255, 117, 31, 0.18), 0 10px 24px rgba(255, 117, 31, 0.13);
}

.appLayout.sidebarCollapsed:not(.sidebarHover) .navItem.active::before,
.appLayout.sidebarCollapsed:not(.sidebarHover) .navGroup:has(.navSubItem.active) > .navItem::before {
  color: var(--ui-orange, var(--orange));
}

.appLayout.sidebarHover .sidebar,
.appLayout:not(.sidebarCollapsed) .sidebar {
  padding: 16px 14px;
}

.appLayout.sidebarHover .sidebarBlock:not([hidden]),
.appLayout:not(.sidebarCollapsed) .sidebarBlock:not([hidden]) {
  gap: 7px;
}

.appLayout.sidebarHover .sidebarBlock + .sidebarBlock,
.appLayout:not(.sidebarCollapsed) .sidebarBlock + .sidebarBlock {
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid rgba(24, 34, 43, 0.08);
}

.appLayout.sidebarHover .sidebarTitle,
.appLayout:not(.sidebarCollapsed) .sidebarTitle {
  margin: 0 8px 7px;
  color: light-dark(#7b8790, #9099a0);
  font-size: 10px;
  font-weight: 950;
}

.appLayout.sidebarHover .navItem:not([hidden]),
.appLayout:not(.sidebarCollapsed) .navItem:not([hidden]) {
  min-height: 40px;
  padding: 0 13px;
  border: 1px solid transparent;
  border-radius: 12px;
  background: transparent;
  color: var(--ui-ink, var(--ink));
  font-weight: 780;
  box-shadow: none;
  transition: background 160ms ease, border-color 160ms ease, color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.appLayout.sidebarHover .navItem:not([hidden])::before,
.appLayout:not(.sidebarCollapsed) .navItem:not([hidden])::before {
  display: none;
  content: none;
}

.appLayout.sidebarHover .navItem:hover:not([hidden]),
.appLayout:not(.sidebarCollapsed) .navItem:hover:not([hidden]) {
  background: light-dark(#fff7f0, #181f24);
  border-color: rgba(255, 117, 31, 0.18);
  color: var(--ui-orange-dark, var(--orange-dark));
}

.appLayout.sidebarHover .navItem.active:not([hidden]),
.appLayout:not(.sidebarCollapsed) .navItem.active:not([hidden]),
.appLayout.sidebarHover .navGroup:has(.navSubItem.active) > .navItem,
.appLayout:not(.sidebarCollapsed) .navGroup:has(.navSubItem.active) > .navItem {
  background: var(--ui-orange-soft, light-dark(#fff1e8, #1c2328));
  border-color: rgba(255, 117, 31, 0.28);
  color: var(--ui-orange-dark, var(--orange-dark));
  box-shadow: inset 3px 0 0 var(--ui-orange, var(--orange));
}

.appLayout.sidebarHover .navGroup.isOpen > .navChildren,
.appLayout:not(.sidebarCollapsed) .navGroup.isOpen > .navChildren {
  margin-top: 2px;
  padding-left: 12px;
}

.appLayout.sidebarHover .navSubItem:not([hidden]),
.appLayout:not(.sidebarCollapsed) .navSubItem:not([hidden]) {
  min-height: 34px;
  padding-left: 14px;
  border-radius: 10px;
  color: var(--ui-muted, var(--muted));
  font-size: 12px;
  font-weight: 760;
}

.knowledgePanel {
  background: linear-gradient(180deg, light-dark(#ffffff, #11181d) 0%, light-dark(#fbfdfe, #141b1f) 100%);
}

.knowledgePanel .panelHeader {
  padding: 20px 22px 18px;
  border: 1px solid rgba(24, 34, 43, 0.08);
  border-radius: 12px;
  background: linear-gradient(135deg, light-dark(#fff8f3, #171e23) 0%, light-dark(#f7fbfc, #161d22) 100%);
}

.knowledgePanel .panelHeader h2 {
  font-size: clamp(24px, 2vw, 32px);
}

.knowledgePanel .panelHeader .eyebrow {
  color: var(--ui-orange-dark, var(--orange-dark));
}

.knowledgePanel .localTabs {
  padding: 4px;
  border: 1px solid rgba(24, 34, 43, 0.10);
  border-radius: 14px;
  background: light-dark(#f8fafb, #171e23);
  width: fit-content;
}

.knowledgePanel .subTab {
  min-height: 40px;
  padding: 0 16px;
  border-radius: 10px;
  border-color: transparent;
  background: transparent;
  color: var(--ui-muted, var(--muted));
  font-weight: 850;
}

.knowledgePanel .subTab.active {
  background: light-dark(#fff, #11181d);
  color: var(--ui-orange-dark, var(--orange-dark));
  border-color: rgba(255, 117, 31, 0.22);
  box-shadow: 0 8px 18px rgba(19, 32, 42, 0.08);
}

.knowledgePanel .subTab[data-local-tab="lista"].active {
  background: var(--ui-orange-soft, light-dark(#fff1e8, #1c2328));
}

.knowledgePanel .subpanel {
  border-radius: 12px;
  background: light-dark(rgba(255, 255, 255, 0.96), rgba(17, 24, 29, 0.96));
  box-shadow: 0 14px 34px rgba(19, 32, 42, 0.06);
}

.knowledgeFilters {
  padding: 14px;
  border-radius: 12px;
  background: light-dark(#f9fbfc, #161c21);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8);
}

.knowledgeFilters label {
  color: light-dark(#596775, #aab9c9);
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}

.knowledgeFilters input,
.knowledgeFilters select {
  border-radius: 10px;
  border-color: rgba(24, 34, 43, 0.12);
  background: light-dark(#fff, #11181d);
}

.knowledgeFilters input:focus,
.knowledgeFilters select:focus {
  border-color: rgba(255, 117, 31, 0.42);
  box-shadow: 0 0 0 3px rgba(255, 117, 31, 0.12);
  outline: none;
}

.knowledgePanel .tableWrap {
  border-radius: 12px;
  border-color: rgba(24, 34, 43, 0.08);
  box-shadow: 0 8px 22px rgba(19, 32, 42, 0.04);
}

#knowledgeArticlesTable th {
  background: light-dark(#fbfdfe, #141b1f);
  color: light-dark(#5b6872, #aab8c4);
}

#knowledgeArticlesTable td {
  border-bottom-color: rgba(24, 34, 43, 0.06);
}

#knowledgeArticlesTable tbody tr {
  transition: background 140ms ease;
}

#knowledgeArticlesTable tbody tr:hover {
  background: light-dark(#fff8f2, #171e23);
}

#knowledgeArticlesTable button {
  min-height: 32px;
  padding: 0 14px;
  border-color: rgba(255, 117, 31, 0.30);
  background: light-dark(#fff7f0, #181f24);
  box-shadow: 0 6px 14px rgba(255, 117, 31, 0.10);
}

#knowledgeArticlesTable button:hover {
  background: var(--ui-orange, var(--orange));
  color: #fff;
}

.knowledgePanel .statusPill {
  min-height: 26px;
  border-color: light-dark(rgba(40, 119, 141, 0.24), rgba(83, 158, 181, 0.24));
  background: light-dark(#eef8fb, #1a2126);
  color: light-dark(#1f6578, #5b9db1);
  font-size: 11px;
}

/* APP-001C quick fix: keep the Knowledge Center "Ver" action on one line. */
#knowledgeArticlesTable button[data-knowledge-view] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 56px;
  white-space: nowrap;
  word-break: keep-all;
}

/* APP-002: make knowledge search the primary action in the Consultar view. */
.knowledgeSearchHero {
  display: grid;
  gap: 8px;
  margin-bottom: 14px;
  padding: 18px;
  border: 1px solid rgba(255, 117, 31, 0.18);
  border-radius: 14px;
  background: linear-gradient(135deg, light-dark(#fff8f3, #171e23) 0%, light-dark(#f7fbfc, #161d22) 100%);
  box-shadow: 0 12px 28px rgba(19, 32, 42, 0.06);
}

.knowledgeSearchHero label {
  color: var(--ui-orange-dark, var(--orange-dark));
  font-size: 11px;
  font-weight: 950;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.knowledgeSearchHero input {
  width: 100%;
  min-height: 54px;
  padding: 0 18px;
  border: 1px solid rgba(24, 34, 43, 0.12);
  border-radius: 14px;
  background: light-dark(#fff, #11181d);
  color: var(--ui-ink, var(--ink));
  font-size: 18px;
  font-weight: 750;
  box-shadow: 0 8px 20px rgba(19, 32, 42, 0.06);
}

.knowledgeSearchHero input::placeholder {
  color: light-dark(#8a98a5, #7a8895);
  font-weight: 700;
}

.knowledgeSearchHero input:focus {
  border-color: rgba(255, 117, 31, 0.48);
  box-shadow: 0 0 0 4px rgba(255, 117, 31, 0.12), 0 10px 24px rgba(19, 32, 42, 0.08);
  outline: none;
}

.knowledgeSearchHero p {
  margin: 0;
  color: var(--ui-muted, var(--muted));
  font-size: 13px;
  line-height: 1.35;
}

.knowledgePanel .knowledgeFilters {
  grid-template-columns: repeat(4, minmax(126px, 1fr)) auto;
  margin-bottom: 14px;
}

@media (max-width: 1180px) {
  .knowledgePanel .knowledgeFilters {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 720px) {
  .knowledgeSearchHero {
    padding: 14px;
  }

  .knowledgeSearchHero input {
    min-height: 48px;
    font-size: 16px;
  }

.knowledgePanel .knowledgeFilters {
  grid-template-columns: 1fr;
  }
}

/* APP-003: clearer no-results state for Knowledge Center searches. */
.knowledgeNoResults {
  display: grid;
  gap: 16px;
  align-items: center;
  margin: 14px 0;
  padding: 22px;
  border: 1px solid rgba(255, 117, 31, 0.22);
  border-radius: 14px;
  background: linear-gradient(135deg, light-dark(#fff8f3, #171e23) 0%, light-dark(#f7fbfc, #161d22) 100%);
  box-shadow: 0 14px 30px rgba(19, 32, 42, 0.06);
}

.knowledgeNoResults[hidden] {
  display: none;
}

.knowledgeNoResults h4 {
  margin: 2px 0 8px;
  color: var(--ui-ink, var(--ink));
  font-size: 22px;
  line-height: 1.15;
}

.knowledgeNoResults p {
  margin: 0;
  color: var(--ui-muted, var(--muted));
  font-size: 14px;
  line-height: 1.45;
}

.knowledgeNoResults .eyebrow {
  color: var(--ui-orange-dark, var(--orange-dark));
}

.knowledgeNoResultsTerm {
  display: inline-flex;
  width: fit-content;
  margin: 10px 0;
  padding: 6px 10px;
  border: 1px solid light-dark(rgba(40, 119, 141, 0.18), rgba(83, 158, 181, 0.18));
  border-radius: 999px;
  background: light-dark(#fff, #11181d);
  color: var(--ui-teal, var(--teal));
  font-weight: 850;
}

.knowledgeNoResults button {
  justify-self: start;
  min-height: 40px;
  padding: 0 16px;
  border: 1px solid rgba(255, 117, 31, 0.30);
  border-radius: 999px;
  background: var(--ui-orange, var(--orange));
  color: #fff;
  font-weight: 850;
  cursor: pointer;
}

.knowledgeNoResults button:hover {
  background: var(--ui-orange-dark, var(--orange-dark));
}

.knowledgeNoResultsHelp {
  max-width: 620px;
  color: light-dark(#7a8793, #8c99a6);
  font-size: 12px;
  line-height: 1.4;
}

.knowledgeNeedFeedback {
  max-width: 620px;
  margin: 0;
  color: light-dark(#1f7a4c, #51a676);
  font-size: 13px;
  font-weight: 800;
}

.knowledgeNeedFeedback[hidden] {
  display: none;
}

.knowledgeNeedsPanel {
  display: grid;
  gap: 16px;
}

.knowledgeManagementSection {
  display: grid;
  gap: 12px;
}

.knowledgeManagementSection + .knowledgeManagementSection {
  padding-top: 4px;
}

.knowledgeManagementSection .subpanelTitleRow h4 {
  margin: 0;
  color: var(--ui-ink, var(--ink));
  font-size: 16px;
  line-height: 1.25;
}

.knowledgeNeedsFilters {
  display: grid;
  grid-template-columns: minmax(160px, 240px) minmax(160px, 240px) auto;
  align-items: end;
  gap: 12px;
}

.knowledgeNeedsFilters label {
  display: grid;
  gap: 6px;
  color: var(--ui-muted, var(--muted));
  font-size: 12px;
  font-weight: 850;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.knowledgeNeedsFilters select {
  min-height: 40px;
  padding: 0 12px;
  border: 1px solid rgba(24, 34, 43, 0.12);
  border-radius: 10px;
  background: light-dark(#fff, #11181d);
  color: var(--ui-ink, var(--ink));
  font: inherit;
  font-size: 14px;
}

.knowledgeNeedsEmpty {
  display: grid;
  gap: 6px;
  padding: 20px;
  border: 1px dashed light-dark(rgba(40, 119, 141, 0.28), rgba(83, 158, 181, 0.28));
  border-radius: 14px;
  background: light-dark(#f7fbfc, #161d22);
  color: var(--ui-muted, var(--muted));
}

.knowledgeNeedsEmpty[hidden] {
  display: none;
}

.knowledgeNeedsEmpty strong {
  color: var(--ui-ink, var(--ink));
  font-size: 16px;
}

#knowledgeNeedsTable .knowledgeNeedActionsCell {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

#knowledgeNeedsTable .knowledgeNeedViewButton,
#knowledgeNeedsTable .knowledgeNeedDeleteButton {
  white-space: nowrap;
}

#knowledgeNeedsTable .knowledgeNeedDeleteButton {
  border: 1px solid light-dark(rgba(202, 70, 54, 0.24), rgba(232, 97, 79, 0.24));
  background: light-dark(#fff7f5, #171e23);
  color: light-dark(#b83526, #e7624f);
}

#knowledgeNeedsTable .knowledgeNeedDeleteButton:hover {
  border-color: light-dark(rgba(202, 70, 54, 0.42), rgba(232, 97, 79, 0.42));
  background: light-dark(#fff0ec, #1d2429);
  color: light-dark(#9e2d20, #df6958);
}

.knowledgeNeedDetailPanel {
  display: grid;
  gap: 16px;
  padding: 18px;
  border: 1px solid rgba(255, 117, 31, 0.20);
  border-radius: 14px;
  background: linear-gradient(135deg, light-dark(#fff8f3, #171e23) 0%, light-dark(#f7fbfc, #161d22) 100%);
}

.knowledgeNeedDetailPanel[hidden] {
  display: none;
}

.knowledgeNeedDetailHeader {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.knowledgeNeedDetailHeader h4 {
  margin: 4px 0 0;
  color: var(--ui-ink, var(--ink));
  font-size: 20px;
  line-height: 1.2;
}

.knowledgeNeedDetailGrid dl {
  display: grid;
  grid-template-columns: minmax(180px, 240px) 1fr;
  gap: 10px 16px;
  margin: 0;
}

.knowledgeNeedDetailGrid dt {
  color: var(--ui-muted, var(--muted));
  font-size: 12px;
  font-weight: 850;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.knowledgeNeedDetailGrid dd {
  margin: 0;
  color: var(--ui-ink, var(--ink));
  line-height: 1.45;
  white-space: pre-wrap;
}

.knowledgeNeedDetailGrid {
  display: grid;
  gap: 12px;
}

.knowledgeNeedDetailGrid label {
  display: grid;
  gap: 6px;
  color: var(--ui-muted, var(--muted));
  font-size: 12px;
  font-weight: 850;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.knowledgeNeedDetailGrid input,
.knowledgeNeedDetailGrid select,
.knowledgeNeedDetailGrid textarea {
  width: 100%;
  box-sizing: border-box;
  padding: 11px 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface);
  color: var(--ui-ink, var(--ink));
  font: inherit;
  font-size: 14px;
  font-weight: 650;
  letter-spacing: 0;
  text-transform: none;
}

.knowledgeNeedDetailGrid textarea {
  min-height: 44px;
  line-height: 1.45;
  overflow: hidden;
  resize: vertical;
  white-space: pre-wrap;
}

.knowledgeNeedDetailGrid textarea[rows="5"] {
  min-height: 120px;
}

.knowledgeNeedStatusEditor {
  display: grid;
  grid-template-columns: auto;
  align-items: end;
  gap: 12px;
}

.knowledgeNeedStatusEditor label {
  display: grid;
  gap: 6px;
  color: var(--ui-muted, var(--muted));
  font-size: 12px;
  font-weight: 850;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.knowledgeNeedStatusEditor select {
  min-height: 40px;
  padding: 0 12px;
  border: 1px solid rgba(24, 34, 43, 0.12);
  border-radius: 10px;
  background: light-dark(#fff, #11181d);
  color: var(--ui-ink, var(--ink));
  font: inherit;
  font-size: 14px;
}

.knowledgePanel .statusPill.urgency-baixa,
.knowledgePanel .statusPill.status-resolvida {
  border-color: light-dark(rgba(31, 122, 76, 0.24), rgba(81, 166, 118, 0.24));
  background: light-dark(#e7f8ef, #1a2720);
  color: light-dark(#1f7a4c, #51a676);
}

.knowledgePanel .statusPill.urgency-media,
.knowledgePanel .statusPill.status-em-analise,
.knowledgePanel .statusPill.status-criar-artigo {
  border-color: rgba(255, 117, 31, 0.26);
  background: light-dark(#fff1e8, #1c2328);
  color: var(--ui-orange-dark, var(--orange-dark));
}

.knowledgePanel .statusPill.urgency-alta {
  border-color: light-dark(rgba(201, 29, 11, 0.24), rgba(246, 80, 60, 0.24));
  background: light-dark(#fff0ed, #1d2429);
  color: light-dark(#c91d0b, #f6503c);
}

.knowledgePanel .statusPill.status-ignorada {
  border-color: light-dark(rgba(95, 111, 125, 0.22), rgba(161, 178, 194, 0.22));
  background: light-dark(#f1f4f6, #1d2429);
  color: light-dark(#5f6f7d, #a1b2c2);
}

@media (max-width: 720px) {
  .knowledgeNeedsFilters,
  .knowledgeNeedStatusEditor,
  .knowledgeNeedDetailGrid dl {
    grid-template-columns: 1fr;
  }

  .knowledgeNeedsFilters .ghostButton,
  .knowledgeNeedStatusEditor button {
    width: 100%;
  }
}

.knowledgeNeedModal {
  position: fixed;
  inset: 0;
  z-index: 130;
  display: grid;
  place-items: center;
  padding: 24px;
  background: light-dark(rgba(19, 32, 42, 0.42), rgba(220, 238, 252, 0.42));
}

.knowledgeNeedModal[hidden] {
  display: none;
}

.knowledgeNeedDialog {
  width: min(680px, 100%);
  max-height: min(760px, calc(100vh - 48px));
  overflow: auto;
  border: 1px solid rgba(24, 34, 43, 0.10);
  border-radius: 16px;
  background: light-dark(#fff, #11181d);
  box-shadow: 0 24px 60px rgba(19, 32, 42, 0.24);
}

.knowledgeNeedDialog form {
  display: grid;
  gap: 18px;
  padding: 22px;
}

.knowledgeNeedHeader {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.knowledgeNeedHeader h3 {
  margin: 4px 0 0;
  color: var(--ui-ink, var(--ink));
  font-size: 22px;
  line-height: 1.15;
}

.knowledgeNeedClose {
  display: grid;
  place-items: center;
  flex: 0 0 34px;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 1px solid rgba(24, 34, 43, 0.10);
  border-radius: 50%;
  background: light-dark(#f8fafb, #171e23);
  color: var(--ui-muted, var(--muted));
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
}

.knowledgeNeedClose:hover {
  color: var(--ui-orange-dark, var(--orange-dark));
  border-color: rgba(255, 117, 31, 0.30);
  background: var(--ui-orange-soft, light-dark(#fff1e8, #1c2328));
}

.knowledgeNeedGrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.knowledgeNeedGrid label {
  display: grid;
  gap: 6px;
  color: var(--ui-muted, var(--muted));
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.knowledgeNeedGrid .span2 {
  grid-column: 1 / -1;
}

.knowledgeNeedGrid input,
.knowledgeNeedGrid select,
.knowledgeNeedGrid textarea {
  width: 100%;
  border: 1px solid rgba(24, 34, 43, 0.12);
  border-radius: 10px;
  background: light-dark(#fff, #11181d);
  color: var(--ui-ink, var(--ink));
  font: inherit;
  font-size: 14px;
  line-height: 1.4;
}

.knowledgeNeedGrid input,
.knowledgeNeedGrid select {
  min-height: 42px;
  padding: 0 12px;
}

.knowledgeNeedGrid textarea {
  resize: vertical;
  min-height: 100px;
  padding: 11px 12px;
}

.knowledgeNeedGrid input[readonly] {
  background: light-dark(#f6f8fa, #191f24);
  color: light-dark(#5f6f7d, #a1b2c2);
}

.knowledgeNeedGrid input:focus,
.knowledgeNeedGrid select:focus,
.knowledgeNeedGrid textarea:focus {
  outline: none;
  border-color: rgba(255, 117, 31, 0.55);
  box-shadow: 0 0 0 3px rgba(255, 117, 31, 0.14);
}

.knowledgeNeedActions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
}

.knowledgeNeedActions button {
  min-height: 40px;
}

@media (max-width: 720px) {
  .knowledgeNeedModal {
    align-items: end;
    padding: 12px;
  }

  .knowledgeNeedDialog {
    max-height: calc(100vh - 24px);
    border-radius: 14px;
  }

  .knowledgeNeedDialog form {
    padding: 18px;
  }

  .knowledgeNeedGrid {
    grid-template-columns: 1fr;
  }

  .knowledgeNeedActions {
    align-items: stretch;
    flex-direction: column;
  }
}

/* APP-002A: clean knowledge search landing with institutional identity. */
.knowledgePanel.knowledgePanelConsultMode {
  display: flex;
  flex-direction: column;
  min-height: calc(100vh - 136px);
}

.knowledgePanel.knowledgePanelConsultMode > .knowledgePanelStack,
.knowledgePanelConsultMode .knowledgeConsultPanel {
  flex: 1 1 auto;
  min-height: 0;
}

.knowledgePanelConsultMode .knowledgeConsultPanel {
  display: flex;
  flex-direction: column;
}

.knowledgePanelConsultMode .knowledgeConsultPanel.isConsultHome .knowledgeConsultHeroCard {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-height: clamp(520px, calc(100vh - 198px), 780px);
}

.knowledgePanelConsultMode .knowledgeConsultPanel.isConsultHome .knowledgeConsultHeroContent {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
}

.knowledgePanelConsultMode .knowledgeConsultPanel.isConsultHome .knowledgeConsultHeroBody {
  flex: 1 1 auto;
  justify-content: space-between;
  min-height: 0;
}

.knowledgePanel .localPage[data-local-page="lista"] .subpanel {
  padding: 22px;
}

.knowledgeIntroArt {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 118px;
  margin-bottom: 22px;
  overflow: hidden;
  border: 1px solid rgba(24, 34, 43, 0.08);
  border-radius: 14px;
  background:
    radial-gradient(circle at 24% 50%, rgba(255, 117, 31, 0.14), transparent 26%),
    linear-gradient(135deg, light-dark(#fffaf6, #151c21) 0%, light-dark(#f7fbfc, #161d22) 48%, light-dark(#eef8fb, #1a2126) 100%);
}

.knowledgeIntroMark {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 74px;
  height: 74px;
  border: 1px solid rgba(255, 117, 31, 0.22);
  border-radius: 18px;
  background: light-dark(rgba(255, 255, 255, 0.82), rgba(17, 24, 29, 0.82));
  box-shadow: 0 14px 34px rgba(19, 32, 42, 0.08);
}

.knowledgeIntroMark img {
  display: block;
  width: 46px;
  height: 46px;
  object-fit: contain;
}

.knowledgeIntroLines {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.knowledgeIntroLines span {
  position: absolute;
  right: -52px;
  width: 260px;
  height: 1px;
  background: linear-gradient(90deg, transparent, light-dark(rgba(40, 119, 141, 0.28), rgba(83, 158, 181, 0.28)), transparent);
  transform: rotate(-18deg);
}

.knowledgeIntroLines span:nth-child(1) {
  top: 28px;
}

.knowledgeIntroLines span:nth-child(2) {
  top: 58px;
  right: -28px;
  background: linear-gradient(90deg, transparent, rgba(255, 117, 31, 0.24), transparent);
}

.knowledgeIntroLines span:nth-child(3) {
  top: 88px;
}

.knowledgeSearchCenter {
  max-width: 800px;
  margin: 0 auto;
  text-align: center;
}

.knowledgeSearchCenter h3 {
  margin: 0;
  color: var(--ui-ink, var(--ink));
  font-size: 30px;
  line-height: 1.12;
}

.knowledgeSearchCenter > p {
  max-width: 560px;
  margin: 8px auto 20px;
  color: var(--ui-muted, var(--muted));
  font-size: 15px;
  line-height: 1.45;
}

.knowledgeSearchCenter .knowledgeSearchHero {
  max-width: 720px;
  margin: 0 auto;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.knowledgeSearchCenter .knowledgeSearchHero label {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.knowledgeSearchCenter .knowledgeSearchHero input {
  min-height: 58px;
  padding: 0 22px;
  border-radius: 999px;
  border-color: rgba(24, 34, 43, 0.14);
  font-size: 18px;
  text-align: left;
  box-shadow: 0 12px 30px rgba(19, 32, 42, 0.08);
}

.knowledgeSearchCenter .knowledgeSearchHero p {
  margin-top: 10px;
  text-align: center;
}

.knowledgeAdvancedActions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin: 20px 0 0;
}

.knowledgeAdvancedActions .ghostButton {
  min-height: 36px;
  border-radius: 999px;
}

.knowledgeAdvancedActions #knowledgeAdvancedToggle[aria-expanded="true"] {
  border-color: rgba(255, 117, 31, 0.34);
  background: var(--ui-orange-soft, light-dark(#fff1e8, #1c2328));
  color: var(--ui-orange-dark, var(--orange-dark));
}

.knowledgePanel .knowledgeFilters[hidden],
.knowledgePanel .tableWrap[hidden] {
  display: none;
}

.knowledgePanel .knowledgeFilters {
  display: block;
  max-width: 900px;
  margin: 16px auto 0;
  padding: 16px;
  border: 1px solid rgba(24, 34, 43, 0.08);
}

.knowledgeFilterGrid {
  display: grid;
  grid-template-columns: repeat(4, minmax(126px, 1fr));
  gap: 12px;
}

.knowledgeFilterActions {
  display: flex;
  justify-content: flex-end;
  margin-top: 12px;
}

.knowledgePanel .tableWrap {
  margin-top: 20px;
}

.knowledgePanel #knowledgeStatus {
  min-height: 20px;
  margin: 12px 0 0;
  text-align: center;
}

.knowledgePanel .knowledgeNoResults {
  max-width: 760px;
  margin: 22px auto 0;
}

@media (max-width: 720px) {
  .knowledgePanel.knowledgePanelConsultMode {
    min-height: 0;
  }

  .knowledgePanelConsultMode .knowledgeConsultPanel.isConsultHome .knowledgeConsultHeroCard {
    min-height: auto;
  }

  .knowledgePanelConsultMode .knowledgeConsultPanel.isConsultHome .knowledgeConsultHeroBody {
    justify-content: flex-start;
  }

  .knowledgePanel .localPage[data-local-page="lista"] .subpanel {
    padding: 16px;
  }

  .knowledgeIntroArt {
    min-height: 96px;
    margin-bottom: 18px;
  }

  .knowledgeIntroMark {
    width: 62px;
    height: 62px;
    border-radius: 15px;
  }

  .knowledgeIntroMark img {
    width: 38px;
    height: 38px;
  }

  .knowledgeSearchCenter h3 {
    font-size: 24px;
  }

  .knowledgeSearchCenter .knowledgeSearchHero input {
    min-height: 52px;
    padding: 0 18px;
    font-size: 16px;
  }

  .knowledgeFilterGrid {
    grid-template-columns: 1fr;
  }

  .knowledgeFilterActions {
    justify-content: stretch;
  }

  .knowledgeFilterActions .ghostButton {
    width: 100%;
  }
}

/* APP-003: knowledge search results are cards by default, table as an advanced view. */
.knowledgeResultsHeader {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  max-width: 1080px;
  margin: 24px auto 12px;
}

.knowledgeResultsHeader[hidden],
.knowledgeResultsGrid[hidden] {
  display: none;
}

.knowledgeResultsCount {
  margin: 0;
  color: var(--ui-ink, var(--ink));
  font-size: 14px;
  font-weight: 850;
  text-align: left;
}

.knowledgeResultsToggle {
  display: inline-flex;
  gap: 4px;
  padding: 4px;
  border: 1px solid rgba(24, 34, 43, 0.10);
  border-radius: 999px;
  background: light-dark(#f8fafb, #171e23);
}

.knowledgeResultsToggle button {
  min-width: 74px;
  min-height: 32px;
  padding: 0 12px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--ui-muted, var(--muted));
  font-size: 12px;
  font-weight: 850;
  cursor: pointer;
}

.knowledgeResultsToggle button.active {
  background: light-dark(#fff, #11181d);
  color: var(--ui-orange-dark, var(--orange-dark));
  box-shadow: 0 6px 14px rgba(19, 32, 42, 0.08);
}

.knowledgeResultsGrid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  max-width: 1080px;
  margin: 0 auto;
}

.knowledgeResultCard {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 244px;
  padding: 16px;
  border: 1px solid rgba(24, 34, 43, 0.10);
  border-radius: 8px;
  background: light-dark(#fff, #11181d);
  box-shadow: 0 10px 24px rgba(19, 32, 42, 0.05);
}

.knowledgeResultCardTop {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 12px;
}

.knowledgeCardCode {
  display: inline-flex;
  min-height: 24px;
  align-items: center;
  padding: 3px 8px;
  border: 1px solid light-dark(rgba(40, 119, 141, 0.16), rgba(83, 158, 181, 0.16));
  border-radius: 999px;
  background: light-dark(#f4fbfc, #171e23);
  color: var(--ui-accent, var(--teal));
  font-size: 12px;
  font-weight: 900;
  white-space: nowrap;
}

.knowledgeResultCard h4 {
  margin: 0 0 8px;
  color: var(--ui-ink, var(--ink));
  font-size: 17px;
  line-height: 1.25;
}

.knowledgeResultCard p {
  margin: 0 0 14px;
  color: var(--ui-muted, var(--muted));
  font-size: 13px;
  line-height: 1.45;
}

.knowledgeCardMeta {
  display: grid;
  gap: 8px;
  margin: auto 0 14px;
}

.knowledgeCardMeta div {
  display: grid;
  gap: 2px;
}

.knowledgeCardMeta dt {
  color: light-dark(#7a8793, #8c99a6);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.knowledgeCardMeta dd {
  margin: 0;
  color: var(--ui-ink, var(--ink));
  font-size: 13px;
  font-weight: 750;
  overflow-wrap: anywhere;
}

.knowledgeOpenArticle {
  align-self: flex-start;
  min-width: 112px;
  min-height: 34px;
  padding: 0 12px;
  white-space: nowrap;
}

.knowledgePanel .statusPill.status-publicado {
  border-color: light-dark(rgba(47, 143, 92, 0.22), rgba(75, 168, 115, 0.22));
  background: light-dark(#ecfbf5, #192025);
  color: light-dark(#267c52, #54a679);
}

.knowledgePanel .statusPill.status-em-revisao {
  border-color: rgba(255, 117, 31, 0.24);
  background: light-dark(#fff4e9, #1a2126);
  color: light-dark(#b95500, #d97230);
}

.knowledgePanel .statusPill.status-arquivado {
  border-color: light-dark(rgba(96, 109, 122, 0.22), rgba(165, 179, 193, 0.22));
  background: light-dark(#f3f5f7, #1c2228);
  color: light-dark(#596775, #aab9c9);
}

.knowledgePanel .statusPill.status-rascunho {
  border-color: light-dark(rgba(40, 119, 141, 0.22), rgba(83, 158, 181, 0.22));
  background: light-dark(#eef8fb, #1a2126);
  color: light-dark(#1f6578, #5b9db1);
}

@media (max-width: 1180px) {
  .knowledgeResultsGrid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 720px) {
  .knowledgeResultsHeader {
    align-items: stretch;
    flex-direction: column;
  }

  .knowledgeResultsToggle {
    justify-content: center;
    width: 100%;
  }

  .knowledgeResultsToggle button {
    flex: 1;
  }

  .knowledgeResultsGrid {
    grid-template-columns: 1fr;
  }
}

/* APP-004: floating Gersinho IA placeholder. */
.gersinhoFab {
  position: fixed;
  right: max(22px, env(safe-area-inset-right));
  bottom: max(22px, env(safe-area-inset-bottom));
  z-index: 120;
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  padding: 0;
  overflow: hidden;
  border: 1px solid rgba(255, 117, 31, 0.28);
  border-radius: 50%;
  background: light-dark(#fff, #11181d);
  box-shadow: 0 14px 30px rgba(19, 32, 42, 0.18);
  cursor: pointer;
  outline: none;
  -webkit-tap-highlight-color: transparent;
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.gersinhoFab:hover {
  transform: translateY(-2px);
  border-color: rgba(255, 117, 31, 0.48);
  box-shadow: 0 18px 36px rgba(19, 32, 42, 0.22);
}

.gersinhoFab:focus {
  outline: none;
}

.gersinhoFab:focus-visible {
  outline: none;
  border-color: rgba(255, 117, 31, 0.58);
  box-shadow: 0 0 0 4px rgba(255, 117, 31, 0.20), 0 18px 36px rgba(19, 32, 42, 0.22);
}

.gersinhoFab img {
  width: 82%;
  height: 82%;
  object-fit: contain;
  object-position: center;
  transform: none;
  border: 0;
  border-radius: 50%;
  outline: none;
  pointer-events: none;
  -webkit-user-drag: none;
}

.gersinhoFab.isOpen {
  border-color: light-dark(rgba(40, 119, 141, 0.42), rgba(83, 158, 181, 0.42));
  box-shadow: 0 0 0 4px rgba(40, 119, 141, 0.14), 0 18px 36px rgba(19, 32, 42, 0.22);
}

.gersinhoPanel {
  position: fixed;
  right: max(22px, env(safe-area-inset-right));
  bottom: calc(max(22px, env(safe-area-inset-bottom)) + 74px);
  z-index: 122;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto auto;
  width: min(390px, calc(100vw - 32px));
  max-height: min(640px, calc(100vh - 116px));
  overflow: hidden;
  border: 1px solid rgba(24, 34, 43, 0.12);
  border-radius: 16px;
  background: light-dark(#fff, #11181d);
  box-shadow: 0 22px 52px rgba(19, 32, 42, 0.22);
}

.gersinhoHeader {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) 36px;
  gap: 10px;
  align-items: center;
  padding: 12px;
  border-bottom: 1px solid rgba(24, 34, 43, 0.08);
  background: linear-gradient(135deg, light-dark(#fff8f3, #171e23) 0%, light-dark(#f2fafc, #181f24) 100%);
}

.gersinhoHeader img {
  width: 48px;
  height: 48px;
  border: 2px solid light-dark(#fff, #11181d);
  border-radius: 50%;
  object-fit: cover;
  box-shadow: 0 6px 16px rgba(19, 32, 42, 0.16);
}

.gersinhoHeader strong,
.gersinhoHeader span {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.gersinhoHeader strong {
  color: var(--ink);
  font-size: 15px;
  font-weight: 900;
}

.gersinhoHeader span {
  margin-top: 2px;
  color: var(--teal);
  font-size: 12px;
  font-weight: 750;
}

.gersinhoIconButton {
  display: grid;
  place-items: center;
  width: 36px;
  min-width: 36px;
  height: 36px;
  min-height: 36px;
  padding: 0;
  border: 1px solid rgba(24, 34, 43, 0.10);
  border-radius: 50%;
  background: light-dark(#fff, #11181d);
  color: var(--muted);
  font-size: 20px;
}

.gersinhoIconButton:hover {
  border-color: rgba(255, 117, 31, 0.30);
  background: var(--soft-orange);
  color: var(--orange-dark);
}

.gersinhoMessages {
  display: grid;
  align-content: start;
  gap: 10px;
  min-height: 220px;
  padding: 12px;
  overflow-y: auto;
  background: light-dark(#fbfaf8, #161d22);
}

.gersinhoMessage {
  display: grid;
  gap: 8px;
  max-width: 92%;
}

.gersinhoMessage p {
  margin: 0;
  padding: 10px 12px;
  border: 1px solid rgba(24, 34, 43, 0.08);
  border-radius: 13px;
  background: light-dark(#fff, #11181d);
  color: var(--ink);
  font-size: 13px;
  line-height: 1.45;
  white-space: pre-line;
  box-shadow: 0 5px 14px rgba(19, 32, 42, 0.06);
}

.gersinhoMessage.user {
  justify-self: end;
}

.gersinhoMessage.user p {
  border-color: light-dark(rgba(40, 119, 141, 0.24), rgba(83, 158, 181, 0.24));
  background: var(--teal);
  color: #fff;
}

.gersinhoMessage.assistant.error p {
  border-color: light-dark(rgba(180, 35, 24, 0.22), rgba(237, 92, 75, 0.22));
  background: light-dark(#fff7f6, #171e23);
  color: var(--red);
}

.gersinhoSources {
  display: grid;
  gap: 6px;
}

.gersinhoSource {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr) 18px;
  gap: 7px;
  align-items: center;
  width: 100%;
  min-height: 34px;
  padding: 7px 9px;
  border: 1px solid light-dark(rgba(40, 119, 141, 0.18), rgba(83, 158, 181, 0.18));
  border-radius: 9px;
  background: light-dark(#fff, #11181d);
  color: var(--teal);
  font-size: 12px;
  font-weight: 800;
  text-align: left;
}

.gersinhoSource span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.gersinhoSource:hover {
  border-color: light-dark(rgba(40, 119, 141, 0.34), rgba(83, 158, 181, 0.34));
  background: light-dark(#f2fafc, #181f24);
  color: var(--teal);
}

.gersinhoComposer {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 42px;
  gap: 8px;
  padding: 10px;
  border-top: 1px solid rgba(24, 34, 43, 0.08);
  background: light-dark(#fff, #11181d);
}

.gersinhoComposer input {
  width: 100%;
  min-width: 0;
  min-height: 42px;
  border: 1px solid rgba(24, 34, 43, 0.12);
  border-radius: 999px;
  background: light-dark(#fff, #11181d);
  color: var(--ink);
  font-size: 13px;
}

.gersinhoComposer input:focus {
  outline: none;
  border-color: light-dark(rgba(40, 119, 141, 0.42), rgba(83, 158, 181, 0.42));
  box-shadow: 0 0 0 3px rgba(40, 119, 141, 0.12);
}

.gersinhoComposer button {
  display: grid;
  place-items: center;
  width: 42px;
  min-width: 42px;
  height: 42px;
  min-height: 42px;
  padding: 0;
  border-radius: 50%;
  background: var(--orange);
  border-color: var(--orange);
  color: #fff;
  font-size: 20px;
}

.gersinhoComposer button:hover {
  background: var(--orange-dark);
  border-color: var(--orange-dark);
}

.gersinhoComposer button:disabled {
  cursor: not-allowed;
  opacity: 0.52;
}

.gersinhoKnowledgeLink {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 38px;
  padding: 0 12px 10px;
  border: 0;
  border-radius: 0;
  background: light-dark(#fff, #11181d);
  color: var(--teal);
  font-size: 12px;
  font-weight: 850;
}

.gersinhoKnowledgeLink:hover {
  background: light-dark(#fff, #11181d);
  color: var(--orange-dark);
}

.gersinhoSoon {
  position: fixed;
  right: max(22px, env(safe-area-inset-right));
  bottom: calc(max(22px, env(safe-area-inset-bottom)) + 72px);
  z-index: 121;
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: min(320px, calc(100vw - 36px));
  padding: 12px 12px 12px 14px;
  border: 1px solid rgba(24, 34, 43, 0.10);
  border-radius: 12px;
  background: light-dark(#fff, #11181d);
  color: var(--ui-ink, var(--ink));
  box-shadow: 0 16px 32px rgba(19, 32, 42, 0.16);
  font-size: 13px;
  font-weight: 800;
}

.gersinhoSoon[hidden] {
  display: none;
}

.gersinhoSoon button {
  display: grid;
  place-items: center;
  flex: 0 0 28px;
  width: 28px;
  height: 28px;
  border: 1px solid rgba(24, 34, 43, 0.10);
  border-radius: 50%;
  background: light-dark(#f8fafb, #171e23);
  color: var(--ui-muted, var(--muted));
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
}

.gersinhoSoon button:hover {
  color: var(--ui-orange-dark, var(--orange-dark));
  border-color: rgba(255, 117, 31, 0.30);
  background: var(--ui-orange-soft, light-dark(#fff1e8, #1c2328));
}

@media (max-width: 720px) {
  .gersinhoFab {
    right: 14px;
    bottom: 14px;
    width: 50px;
    height: 50px;
  }

  .gersinhoFab img {
    width: 82%;
    height: 82%;
  }

  .gersinhoSoon {
    right: 14px;
    bottom: 76px;
    max-width: calc(100vw - 28px);
  }

  .gersinhoPanel {
    right: 10px;
    bottom: 72px;
    width: calc(100vw - 20px);
    max-height: calc(100vh - 92px);
    border-radius: 14px;
  }

  .gersinhoHeader {
    grid-template-columns: 44px minmax(0, 1fr) 34px;
  }

  .gersinhoHeader img {
    width: 44px;
    height: 44px;
  }
}

/* APP-007: limpeza visual global do Portal. */
.workspace {
  background: transparent;
}

.appView.panel {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.appView > .panelHeader {
  align-items: flex-start;
  margin-bottom: 18px;
  padding: 2px 0 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.appView > .panelHeader .eyebrow {
  display: none;
}

.appView > .panelHeader h2 {
  margin: 0;
  color: var(--ui-ink, var(--ink));
  font-size: clamp(24px, 2.1vw, 32px);
  line-height: 1.08;
}

.appView > .panelHeader .sectionHint {
  max-width: 820px;
  margin: 7px 0 0;
  color: var(--ui-muted, var(--muted));
  font-size: 14px;
  line-height: 1.45;
}

.appView > .panelHeader .panelActions {
  margin-top: 2px;
}

.localTabs,
.knowledgePanel .localTabs,
#vendedoresView .localTabs {
  width: 100%;
  margin: 0 0 18px;
  padding: 0;
  gap: 6px;
  border: 0;
  border-bottom: 1px solid rgba(24, 34, 43, 0.10);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.localTabs .subTab,
.knowledgePanel .subTab,
#vendedoresView .subTab {
  min-height: 34px;
  padding: 0 12px;
  border: 0;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  background: transparent;
  color: var(--ui-muted, var(--muted));
  box-shadow: none;
  font-size: 13px;
  font-weight: 780;
}

.localTabs .subTab:hover,
.knowledgePanel .subTab:hover,
#vendedoresView .subTab:hover {
  color: var(--ui-orange-dark, var(--orange-dark));
  background: rgba(255, 117, 31, 0.06);
}

.localTabs .subTab.active,
.knowledgePanel .subTab.active,
.knowledgePanel .subTab[data-local-tab="lista"].active,
#vendedoresView .subTab.active {
  border-bottom-color: var(--ui-orange, var(--orange));
  background: transparent;
  color: var(--ui-orange-dark, var(--orange-dark));
  box-shadow: none;
}

.appView .subpanel,
.appView .filterShell,
.appView .tableWrap,
.moduleCard,
.metricGroup,
.kpi,
.qualityKpis > *,
.ceoKpis > *,
.metricCard,
.infoCard,
.summaryCard {
  border-color: rgba(24, 34, 43, 0.09);
  box-shadow: none;
}

.appView .subpanel {
  border-radius: 10px;
  background: light-dark(rgba(255, 255, 255, 0.92), rgba(17, 24, 29, 0.92));
}

.ceoPanel .ceoKpis .kpi {
  justify-content: flex-start;
  gap: 0;
  min-height: 118px;
  padding: 16px;
  border: 1px solid light-dark(rgba(40, 119, 141, 0.18), rgba(83, 158, 181, 0.18));
  border-radius: 10px;
  background: linear-gradient(180deg, light-dark(#fff, #11181d), light-dark(#f7fbfc, #161d22));
  box-shadow: none;
}

.ceoPanel .ceoKpis .kpi span {
  min-height: 0;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.25;
  text-transform: uppercase;
}

.ceoPanel .ceoKpis .kpi strong {
  display: block;
  margin-top: 8px;
  color: var(--teal);
  font-size: clamp(21px, 1.65vw, 28px);
  line-height: 1.05;
  letter-spacing: 0;
  white-space: normal;
  overflow-wrap: anywhere;
}

.ceoPanel .ceoKpis .kpi small {
  display: block;
  min-height: 0;
  margin-top: 8px;
  color: light-dark(rgba(91, 111, 128, 0.78), rgba(158, 179, 198, 0.78));
  font-size: 13px;
  font-weight: 400;
  line-height: 1.35;
}

.ceoPanel .ceoKpis .kpi .kpiLineStack {
  display: grid;
  gap: 7px;
  margin-top: 8px;
}

.ceoPanel .ceoKpis .kpi .kpiLine {
  display: flex;
  align-items: baseline;
  gap: 8px;
  min-width: 0;
  flex-wrap: wrap;
}

.ceoPanel .ceoKpis .kpi .kpiLine strong {
  display: inline;
  flex: 0 1 auto;
  margin-top: 0;
  font-size: clamp(20px, 1.55vw, 26px);
}

.ceoPanel .ceoKpis .kpi .kpiLine small {
  display: inline;
  margin-top: 0;
  color: light-dark(rgba(91, 111, 128, 0.84), rgba(158, 179, 198, 0.84));
  font-size: 13px;
  line-height: 1.2;
  white-space: nowrap;
}

.ceoPanel .ceoBreakdownCards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin: 0 0 14px;
}

.ceoPanel .ceoBreakdownCard {
  min-width: 0;
  padding: 14px;
  border: 1px solid light-dark(rgba(40, 119, 141, 0.16), rgba(83, 158, 181, 0.16));
  border-radius: 10px;
  background: linear-gradient(180deg, light-dark(#fff, #11181d), light-dark(#f8fbfc, #161d22));
}

.ceoPanel .ceoBreakdownCard > span {
  display: block;
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
  line-height: 1.25;
  text-transform: uppercase;
}

.ceoPanel .ceoBreakdownList {
  display: grid;
  gap: 9px;
  margin-top: 12px;
}

.ceoPanel .ceoBreakdownList p {
  margin: 0;
  color: light-dark(rgba(91, 111, 128, 0.78), rgba(158, 179, 198, 0.78));
  font-size: 13px;
}

.ceoPanel .ceoBreakdownGroup {
  display: grid;
  gap: 5px;
  min-width: 0;
}

.ceoPanel .ceoBreakdownRow {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: baseline;
  gap: 10px;
  min-width: 0;
}

.ceoPanel .ceoBreakdownRow strong {
  min-width: 0;
  color: light-dark(#18222b, #deecf9);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.25;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ceoPanel .ceoBreakdownRow div {
  display: flex;
  align-items: baseline;
  gap: 7px;
  white-space: nowrap;
}

.ceoPanel .ceoBreakdownRow b {
  color: var(--teal);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.1;
}

.ceoPanel .ceoBreakdownRow small {
  color: light-dark(rgba(91, 111, 128, 0.78), rgba(158, 179, 198, 0.78));
  font-size: 12px;
  line-height: 1.1;
}

.ceoPanel .ceoBreakdownChildren {
  display: grid;
  gap: 4px;
  padding-left: 12px;
}

.ceoPanel .ceoBreakdownChildren div {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: baseline;
  gap: 8px;
  min-width: 0;
}

.ceoPanel .ceoBreakdownChildren span {
  min-width: 0;
  color: light-dark(rgba(91, 111, 128, 0.9), rgba(158, 179, 198, 0.9));
  font-size: 12px;
  line-height: 1.2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ceoPanel .ceoBreakdownChildren small {
  color: light-dark(rgba(91, 111, 128, 0.82), rgba(158, 179, 198, 0.82));
  font-size: 11px;
  line-height: 1.2;
  white-space: nowrap;
}

@media (max-width: 1100px) {
  .ceoPanel .ceoBreakdownCards {
    grid-template-columns: 1fr;
  }
}

.appView .subpanelTitleRow {
  margin-bottom: 12px;
}

.appView .subpanelTitleRow h3,
.appView .subpanel h3 {
  color: var(--ui-ink, var(--ink));
  font-size: 15px;
  line-height: 1.25;
}

.appView .filterShell,
.knowledgeFilters,
.knowledgeNeedsFilters {
  border-radius: 10px;
  background: light-dark(rgba(255, 255, 255, 0.82), rgba(17, 24, 29, 0.82));
}

.appView .tableWrap {
  border-radius: 10px;
  background: light-dark(#fff, #11181d);
}

.knowledgePanel {
  background: transparent;
}

.knowledgePanel .panelHeader {
  padding: 2px 0 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.knowledgePanel .localPage[data-local-page="lista"] .subpanel {
  padding: 22px;
  border-color: rgba(24, 34, 43, 0.08);
  background: linear-gradient(180deg, light-dark(rgba(255, 255, 255, 0.96), rgba(17, 24, 29, 0.96)) 0%, light-dark(rgba(248, 251, 252, 0.92), rgba(22, 29, 34, 0.92)) 100%);
}

.knowledgeIntroArt {
  margin-bottom: 8px;
}

.knowledgeSearchCenter h3 {
  font-size: clamp(24px, 2.2vw, 34px);
}

.knowledgeResultsHeader,
.knowledgeNoResults,
.knowledgeNeedDetailPanel {
  box-shadow: none;
}

.peoplePanel {
  background: transparent;
}

.peoplePanel > .panelHeader {
  gap: 10px;
  margin-bottom: 8px;
  padding-top: 0;
}

.peoplePanel > .panelHeader .sectionHint {
  margin-top: 4px;
}

.peoplePanel .configModules {
  margin-top: 4px;
}

.peoplePanel .localPage.active {
  gap: 8px;
}

.peoplePanel .configAdminHeader {
  padding: 0 2px;
}

.peoplePanel .peopleSearchToolbar {
  grid-template-columns: minmax(0, 1fr);
}

.peoplePanel .peopleSearchToolbar .configAdminActions {
  grid-column: 1 / -1;
}

.peoplePanel .moduleCard {
  min-height: 0;
  padding: 10px 12px;
}

.peoplePanel .collapsibleCardHeader {
  margin-bottom: 8px;
}

.peopleToolbar {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 14px;
  margin: 0 0 16px;
}

.peopleHeaderStats {
  flex: 0 1 760px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  min-width: 0;
  padding: 6px;
  border: 1px solid rgba(16, 36, 51, 0.1);
  border-radius: 8px;
  background: light-dark(#fff, #11181d);
  box-shadow: 0 8px 18px rgba(16, 36, 51, 0.045);
}

.peopleHeaderStats .peopleHeaderMetric {
  display: inline-flex;
  align-items: baseline;
  justify-content: center;
  gap: 6px;
  min-width: 0;
  min-height: 28px;
  padding: 5px 8px;
  border: 1px solid light-dark(rgba(11, 92, 113, 0.12), rgba(88, 157, 180, 0.12));
  border-radius: 7px;
  background: light-dark(rgba(245, 250, 251, 0.92), rgba(23, 30, 35, 0.92));
  white-space: nowrap;
}

.peopleHeaderStats strong {
  color: var(--ui-ink, var(--ink));
  font-size: 16px;
  line-height: 1;
}

.peopleHeaderStats small {
  color: var(--teal-dark, var(--teal));
  font-size: 11px;
  font-weight: 820;
  line-height: 1.15;
  text-transform: uppercase;
}

.peopleToolbar .searchField {
  flex: 1 1 420px;
  max-width: 620px;
}

.peopleToolbar .searchField span {
  display: block;
  margin: 0 0 6px;
  color: var(--ui-muted, var(--muted));
  font-size: 12px;
  font-weight: 760;
  text-transform: uppercase;
}

.peopleEditor {
  margin-top: 18px;
  padding: 18px;
  border: 1px solid rgba(24, 34, 43, 0.09);
  border-radius: 10px;
  background: light-dark(rgba(255, 255, 255, 0.94), rgba(17, 24, 29, 0.94));
}

.peopleEditorHeader {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 14px;
}

.peopleEditorHeader h3 {
  margin: 2px 0 0;
  color: var(--ui-ink, var(--ink));
  font-size: 19px;
}

.peopleEditorActions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.peopleFormGrid,
.peopleInlineForm {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.peopleInlineForm {
  align-items: end;
  margin-bottom: 16px;
  padding: 14px;
  border: 1px solid rgba(24, 34, 43, 0.08);
  border-radius: 10px;
  background: light-dark(rgba(247, 250, 251, 0.8), rgba(23, 30, 35, 0.8));
}

.peopleSectionActions,
.peopleInlineActions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.peopleSectionActions {
  justify-content: flex-start;
  margin-bottom: 12px;
}

.peopleInlineActions {
  justify-content: flex-end;
}

.peopleFilePicker {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px;
  border: 1px dashed rgba(24, 34, 43, 0.18);
  border-radius: 8px;
  background: light-dark(rgba(255, 255, 255, 0.72), rgba(17, 24, 29, 0.72));
}

.peopleFilePicker span {
  display: block;
  color: var(--ui-muted, var(--muted));
  font-size: 12px;
  font-weight: 760;
  text-transform: uppercase;
}

.peopleFilePicker p {
  margin: 4px 0 0;
  color: var(--ui-ink, var(--ink));
  font-size: 13px;
  font-weight: 650;
  overflow-wrap: anywhere;
}

.peopleFileButton {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  padding: 0 12px;
  border: 1px solid rgba(255, 117, 31, 0.34);
  border-radius: 8px;
  background: rgba(255, 117, 31, 0.08);
  color: var(--orange-dark);
  cursor: pointer;
  font-size: 12px;
  font-weight: 850;
  text-transform: none;
}

.peopleFileButton:hover {
  background: rgba(255, 117, 31, 0.14);
}

.peopleTableFilePicker {
  display: grid;
  gap: 6px;
  min-width: 220px;
}

.peopleTableFilePicker span {
  color: var(--ui-ink, var(--ink));
  font-size: 12.5px;
  font-weight: 650;
  overflow-wrap: anywhere;
}

.peopleTableFilePicker small {
  color: var(--red, light-dark(#b42318, #ed5c4b));
  font-size: 12px;
  font-weight: 700;
}

.peopleFormGrid label,
.peopleInlineForm label {
  display: grid;
  gap: 6px;
  color: var(--ui-muted, var(--muted));
  font-size: 12px;
  font-weight: 760;
  text-transform: uppercase;
}

.peopleFormGrid .span2,
.peopleInlineForm .span2 {
  grid-column: 1 / -1;
}

.peopleFormGrid input,
.peopleFormGrid select,
.peopleFormGrid textarea,
.peopleInlineForm input,
.peopleInlineForm select,
.peopleInlineForm textarea,
#peopleDocumentsTable input,
#peopleDocumentsTable select,
#peopleDocumentsTable textarea,
#peopleResponsibilitiesTable input,
#peopleResponsibilitiesTable select {
  width: 100%;
  min-width: 0;
  border: 1px solid rgba(24, 34, 43, 0.14);
  border-radius: 8px;
  background: light-dark(#fff, #11181d);
}

#peopleDocumentsTable input,
#peopleDocumentsTable select,
#peopleDocumentsTable textarea,
#peopleResponsibilitiesTable input,
#peopleResponsibilitiesTable select {
  min-width: 120px;
  padding: 7px 8px;
}

#peopleDocumentsTable textarea {
  resize: vertical;
}

.peopleInlineForm button {
  justify-self: start;
}

.warehouseGrid {
  gap: 14px;
}

.warehouseInlineForm {
  grid-template-columns: minmax(0, 1fr) auto;
}

.warehouseListCard {
  display: grid;
  gap: 12px;
}

.warehouseChecklistList {
  display: grid;
  gap: 8px;
}

.warehouseChecklistLibrary {
  display: grid;
  gap: 10px;
}

.warehouseChecklistCard {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid rgba(24, 34, 43, 0.1);
  border-radius: 8px;
  background: light-dark(#fff, #11181d);
  box-shadow: 0 10px 24px rgba(24, 34, 43, 0.05);
}

.warehouseChecklistCard h3 {
  margin: 0;
  color: var(--ui-ink, var(--ink));
  font-size: 15px;
  line-height: 1.25;
}

.warehouseChecklistCard p {
  margin: 5px 0 0;
  color: var(--ui-muted, light-dark(#64748b, #9aabc4));
  font-size: 13px;
  line-height: 1.35;
}

.warehouseChecklistCard small {
  display: block;
  margin-top: 6px;
  color: var(--ui-muted, light-dark(#64748b, #9aabc4));
  font-size: 12px;
  font-weight: 750;
}

.warehouseChecklistMeta {
  display: grid;
  gap: 3px;
}

.warehouseChecklistMeta span {
  display: block;
}

.warehouseChecklistCardActions {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
}

.warehouseChecklistItem {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid rgba(24, 34, 43, 0.1);
  border-radius: 8px;
  background: light-dark(#fff, #11181d);
  cursor: grab;
}

.warehouseChecklistItem:active {
  cursor: grabbing;
}

.warehouseChecklistItem.isDragging {
  opacity: 0.56;
}

.warehouseChecklistItem.isDragOver {
  border-color: light-dark(rgba(0, 100, 123, 0.45), rgba(79, 158, 183, 0.45));
  box-shadow: 0 0 0 2px rgba(0, 100, 123, 0.1);
}

.warehouseChecklistItem label {
  display: grid;
  grid-template-columns: 22px auto minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  align-self: center;
  min-width: 0;
  cursor: pointer;
}

.warehouseChecklistItem input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.warehouseChecklistEditForm {
  min-width: 0;
}

.warehouseChecklistEditForm input {
  position: static;
  width: 100%;
  min-width: 0;
  opacity: 1;
  pointer-events: auto;
}

.warehouseCheckBox {
  width: 20px;
  height: 20px;
  align-self: center;
  border: 2px solid rgba(24, 34, 43, 0.26);
  border-radius: 4px;
  background: light-dark(#fff, #11181d);
  box-shadow: inset 0 0 0 2px #fff;
}

.warehouseChecklistNumber {
  min-width: 22px;
  color: var(--ui-muted, light-dark(#64748b, #9aabc4));
  font-size: 14px;
  font-weight: 850;
  line-height: 1.35;
  text-align: right;
}

.warehouseChecklistItem strong {
  min-width: 0;
  color: var(--ui-ink, var(--ink));
  font-size: 14px;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.warehouseChecklistItem.isChecked {
  border-color: light-dark(rgba(29, 139, 73, 0.34), rgba(68, 170, 102, 0.34));
  background: light-dark(rgba(29, 139, 73, 0.08), rgba(68, 170, 102, 0.08));
}

.warehouseChecklistItem.isChecked .warehouseCheckBox {
  border-color: light-dark(#1d8b49, #44aa66);
  background: light-dark(#1d8b49, #44aa66);
}

.warehouseChecklistItem.isChecked .warehouseCheckBox::after {
  content: "";
  display: block;
  width: 6px;
  height: 10px;
  margin: 2px auto 0;
  border: solid light-dark(#fff, #11181d);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.warehouseChecklistItem.isChecked strong {
  color: light-dark(#17683a, #5aa573);
}

.warehouseChecklistActions {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

@media (max-width: 640px) {
  .warehouseChecklistCard {
    grid-template-columns: 1fr;
  }

  .warehouseChecklistCardActions {
    justify-content: flex-start;
    flex-wrap: wrap;
  }

  .warehouseChecklistItem {
    grid-template-columns: 32px minmax(0, 1fr);
  }

  .warehouseChecklistActions {
    grid-column: 2;
    justify-content: flex-start;
  }
}

.warehouseEmptyState {
  margin: 0;
}

.warehouseSkuSummaryStrip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px;
}

.warehouseSkuSummaryCard,
.warehouseSkuSummaryMeta {
  min-height: 74px;
  padding: 12px 14px;
  border: 1px solid rgba(24, 34, 43, 0.08);
  border-radius: 8px;
  background: light-dark(#fff, #11181d);
}

.warehouseSkuSummaryCard {
  display: grid;
  gap: 4px;
  border-left: 4px solid light-dark(rgba(0, 100, 123, 0.5), rgba(79, 158, 183, 0.5));
}

.warehouseSkuSummaryCard span,
.warehouseSkuSummaryMeta span {
  color: var(--ui-muted, var(--muted));
  font-size: 11px;
  font-weight: 850;
  line-height: 1.2;
  text-transform: uppercase;
}

.warehouseSkuSummaryCard strong,
.warehouseSkuSummaryMeta strong {
  color: var(--ui-ink, var(--ink));
  font-size: 22px;
  line-height: 1;
}

.warehouseSkuSummaryCard small {
  color: light-dark(rgba(24, 34, 43, 0.66), rgba(222, 236, 249, 0.66));
  font-size: 12px;
  font-weight: 650;
}

.warehouseSkuSummaryCard.tone-warning {
  border-left-color: #ff751f;
  background: light-dark(#fff9f5, #161d22);
}

.warehouseSkuSummaryCard.tone-success {
  border-left-color: light-dark(#1d8b49, #44aa66);
  background: light-dark(#f7fcfa, #161d22);
}

.warehouseSkuSummaryMeta {
  display: grid;
  align-content: center;
  gap: 5px;
  background: light-dark(#f7fafb, #171e23);
}

.warehouseSkuSheet {
  display: grid;
  gap: 10px;
  min-height: 0;
  padding: 12px 14px;
}

.warehouseSkuSheetHeader {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.warehouseSkuSheetHeader h3 {
  margin: 0;
  color: var(--ui-ink, var(--ink));
  font-size: 16px;
  line-height: 1.2;
}

.warehouseSkuSheetHeader .miniNote {
  margin-top: 5px;
}

.warehouseSkuSheetHeaderActions {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
}

.warehouseSkuSheetHeader > strong,
.warehouseSkuSheetCount {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 34px;
  height: 28px;
  padding: 0 10px;
  border-radius: 999px;
  background: light-dark(rgba(0, 100, 123, 0.1), rgba(79, 158, 183, 0.1));
  color: light-dark(#00647b, #4f9eb7);
  font-size: 14px;
}

.warehouseSkuSheet.tone-warning .warehouseSkuSheetHeader > strong,
.warehouseSkuSheet.tone-warning .warehouseSkuSheetCount {
  background: rgba(255, 117, 31, 0.14);
  color: light-dark(#a74708, #d77340);
}

.warehouseSkuSheet.tone-success .warehouseSkuSheetHeader > strong,
.warehouseSkuSheet.tone-success .warehouseSkuSheetCount {
  background: light-dark(rgba(29, 139, 73, 0.12), rgba(68, 170, 102, 0.12));
  color: light-dark(#17683a, #5aa573);
}

.warehouseSkuTableWrap {
  border-radius: 8px;
  box-shadow: none;
}

.warehouseSkuTableWrap table {
  min-width: 820px;
  table-layout: auto;
}

.warehouseSkuTableWrap th,
.warehouseSkuTableWrap td {
  padding-top: 9px;
  padding-bottom: 9px;
}

.warehousePanel .warehouseSkuTableWrap th:nth-child(n+2):nth-child(-n+4),
.warehousePanel .warehouseSkuTableWrap td:nth-child(n+2):nth-child(-n+4) {
  text-align: center;
}

.warehousePanel .warehouseSkuTableWrap th:last-child,
.warehousePanel .warehouseSkuTableWrap td:last-child {
  width: 92px;
  text-align: right;
}

.warehouseSkuValidationCell {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-width: 96px;
  min-height: 28px;
  padding: 4px 8px;
  border: 1px solid rgba(24, 34, 43, 0.11);
  border-radius: 999px;
  background: light-dark(#fff, #11181d);
  color: var(--ui-muted, var(--muted));
  font-size: 11px;
  font-weight: 800;
  line-height: 1.2;
  text-transform: none;
  white-space: nowrap;
  cursor: pointer;
}

.warehouseSkuValidationCell input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

.warehouseSkuValidationCell input:disabled {
  cursor: not-allowed;
}

.warehouseSkuCheckMark {
  width: 13px;
  height: 13px;
  border: 1.5px solid rgba(24, 34, 43, 0.32);
  border-radius: 4px;
  background: light-dark(#fff, #11181d);
}

.warehouseSkuValidationCell.isChecked {
  border-color: light-dark(rgba(29, 139, 73, 0.28), rgba(68, 170, 102, 0.28));
  background: light-dark(rgba(29, 139, 73, 0.08), rgba(68, 170, 102, 0.08));
  color: light-dark(#17683a, #5aa573);
}

.warehouseSkuValidationCell.isChecked .warehouseSkuCheckMark {
  border-color: light-dark(#1d8b49, #44aa66);
  background: light-dark(#1d8b49, #44aa66);
}

.warehouseSkuValidationCell.isChecked .warehouseSkuCheckMark::after {
  content: "";
  display: block;
  width: 4px;
  height: 7px;
  margin: 1px auto 0;
  border: solid light-dark(#fff, #11181d);
  border-width: 0 1.5px 1.5px 0;
  transform: rotate(45deg);
}

.warehouseSkuValidationCell:focus-within {
  box-shadow: 0 0 0 3px rgba(0, 100, 123, 0.12);
}

.warehouseSkuNeedsAdjustment td {
  background: rgba(255, 117, 31, 0.06);
}

.warehouseSkuActionCell {
  justify-content: flex-end;
  gap: 7px;
  flex-wrap: nowrap;
}

.warehouseSkuObservationText {
  display: block;
  max-width: 360px;
  text-align: left;
  white-space: normal;
  overflow-wrap: anywhere;
}

.warehouseSkuEmptyCompact {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: 10px 12px;
  border: 1px dashed rgba(24, 34, 43, 0.14);
  border-radius: 8px;
  background: light-dark(#fbfdfe, #141b1f);
  color: light-dark(rgba(24, 34, 43, 0.68), rgba(222, 236, 249, 0.68));
  font-size: 13px;
  font-weight: 650;
}

.warehouseSkuSheet.tone-warning .warehouseSkuEmptyCompact {
  background: light-dark(#fffaf7, #151c21);
}

.warehouseSkuSheet.tone-success .warehouseSkuEmptyCompact {
  background: light-dark(#f8fcfa, #151c21);
}

.warehouseObservationForm {
  display: grid;
  gap: 14px;
  padding-top: 4px;
}

.warehouseFixedAssetExportDialog {
  display: grid;
  gap: 16px;
  padding-top: 4px;
}

.warehouseFixedAssetExportGroups {
  display: grid;
  gap: 9px;
  margin: 0;
  padding: 12px;
  border: 1px solid rgba(24, 34, 43, 0.1);
  border-radius: 8px;
}

.warehouseFixedAssetExportGroups legend {
  padding: 0 6px;
  color: var(--ui-muted, var(--muted));
  font-size: 12px;
  font-weight: 850;
  text-transform: uppercase;
}

.warehouseFixedAssetExportOption {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  min-height: 42px;
  padding: 8px 10px;
  border: 1px solid rgba(24, 34, 43, 0.08);
  border-radius: 8px;
  background: light-dark(#fbfdfe, #141b1f);
  color: var(--ui-ink, var(--ink));
  text-transform: none;
}

.warehouseFixedAssetExportOption input {
  width: 17px;
  height: 17px;
  margin: 0;
  accent-color: light-dark(#00647b, #4f9eb7);
}

.warehouseFixedAssetExportOption span {
  display: grid;
  gap: 3px;
}

.warehouseFixedAssetExportOption strong {
  font-size: 13px;
  line-height: 1.2;
}

.warehouseFixedAssetExportOption small {
  color: light-dark(rgba(24, 34, 43, 0.58), rgba(222, 236, 249, 0.58));
  font-size: 11px;
  font-weight: 700;
}

.warehouseFixedAssetForm {
  display: grid;
  gap: 14px;
  padding: 14px;
}

.warehouseFixedAssetFormGrid textarea {
  min-height: 96px;
  resize: vertical;
}

.warehouseFixedAssetFormGrid .span2 {
  grid-column: span 2;
}

.warehouseFixedAssetCodeInputRow {
  position: relative;
  display: block;
  width: 100%;
}

.warehouseFixedAssetCodeInputRow input {
  width: 100%;
  padding-right: 52px;
}

.warehouseFixedAssetCodeGenerateButton {
  position: absolute;
  top: 50%;
  right: 8px;
  transform: translateY(-50%);
  z-index: 2;
  display: inline-flex;
}

.warehouseFixedAssetAutocompleteField {
  min-width: 0;
}

.warehouseFixedAssetAutocompleteField .MuiFormControl-root {
  width: 100%;
}

.warehouseFixedAssetAutocompleteField .MuiInputBase-root {
  min-height: 42px;
  background: light-dark(#fff, #11181d);
  font-family: inherit;
  font-weight: 650;
}

.warehouseFixedAssetInvoicePicker {
  display: grid;
  gap: 9px;
  align-self: stretch;
  min-height: 78px;
  padding: 10px 12px;
  border: 1px solid rgba(24, 34, 43, 0.1);
  border-radius: 8px;
  background: light-dark(#fbfdfe, #141b1f);
}

.warehouseFixedAssetInvoicePickerHeader {
  display: flex;
  align-items: center;
  justify-content: space-between;
  column-gap: 18px;
  width: 100%;
}

.warehouseFixedAssetInvoicePickerHeader strong {
  flex: 1 1 auto;
  min-width: 96px;
  color: var(--ui-ink, var(--ink));
  font-size: 12px;
  font-weight: 850;
  text-transform: uppercase;
}

.warehouseFixedAssetInvoicePickerHeader > span {
  flex: 0 0 auto;
  margin-left: 8px;
}

.warehouseFixedAssetInvoicePickerFiles {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 7px;
  min-height: 32px;
}

.warehouseFixedAssetInvoicePicker small {
  color: light-dark(rgba(24, 34, 43, 0.58), rgba(222, 236, 249, 0.58));
  font-size: 11px;
  font-weight: 650;
}

.warehouseFixedAssetSheet {
  overflow: hidden;
}

.warehouseFixedAssetTableWrap table {
  min-width: 1380px;
}

.warehousePanel .warehouseFixedAssetTableWrap th:nth-child(n+2):nth-child(-n+3),
.warehousePanel .warehouseFixedAssetTableWrap td:nth-child(n+2):nth-child(-n+3) {
  text-align: left;
}

.warehousePanel .warehouseFixedAssetTableWrap th:nth-child(4),
.warehousePanel .warehouseFixedAssetTableWrap td:nth-child(4) {
  text-align: right;
}

.warehouseFixedAssetTableWrap th:nth-child(5),
.warehouseFixedAssetTableWrap th:nth-child(6),
.warehouseFixedAssetTableWrap th:nth-child(7),
.warehouseFixedAssetTableWrap td:nth-child(5),
.warehouseFixedAssetTableWrap td:nth-child(6),
.warehouseFixedAssetTableWrap td:nth-child(7) {
  text-align: center;
}

.warehousePanel .warehouseFixedAssetTableWrap th:last-child,
.warehousePanel .warehouseFixedAssetTableWrap td:last-child {
  width: 132px;
}

.warehouseFixedAssetSimpleTableWrap table {
  min-width: 980px;
}

.warehousePanel .warehouseFixedAssetSimpleTableWrap th:nth-child(5),
.warehousePanel .warehouseFixedAssetSimpleTableWrap td:nth-child(5),
.warehousePanel .warehouseFixedAssetSimpleTableWrap th:nth-child(6),
.warehousePanel .warehouseFixedAssetSimpleTableWrap td:nth-child(6) {
  text-align: left;
}

.warehouseFixedAssetSubline {
  display: block;
  margin-top: 4px;
  color: light-dark(rgba(24, 34, 43, 0.58), rgba(222, 236, 249, 0.58));
  font-size: 11px;
  font-weight: 650;
  line-height: 1.25;
}

.warehouseFixedAssetInvoiceList {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  min-width: 0;
}

.warehouseFixedAssetInvoiceChip,
.warehouseFixedAssetNoInvoices {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 32px;
  max-width: 96px;
  padding: 3px;
  border: 1px solid rgba(24, 34, 43, 0.1);
  border-radius: 8px;
  background: light-dark(#fff, #11181d);
  color: var(--ui-ink, var(--ink));
  font-size: 11px;
  font-weight: 750;
  line-height: 1.2;
}

.warehouseFixedAssetInvoiceChip.isPending {
  border-color: light-dark(rgba(0, 100, 123, 0.22), rgba(79, 158, 183, 0.22));
  background: light-dark(rgba(0, 100, 123, 0.04), rgba(79, 158, 183, 0.04));
}

.warehouseFixedAssetPdfIcon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border: 1px solid light-dark(rgba(198, 45, 45, 0.22), rgba(240, 87, 80, 0.22));
  border-radius: 7px;
  background: light-dark(rgba(198, 45, 45, 0.07), rgba(240, 87, 80, 0.07));
  color: light-dark(#b93535, #e7605b);
  font-size: 19px;
  cursor: pointer;
}

.warehouseFixedAssetPdfIcon:hover:not(:disabled) {
  border-color: light-dark(rgba(198, 45, 45, 0.42), rgba(240, 87, 80, 0.42));
  background: light-dark(rgba(198, 45, 45, 0.12), rgba(240, 87, 80, 0.12));
}

.warehouseFixedAssetPdfIcon:disabled {
  cursor: not-allowed;
  opacity: 0.55;
}

.warehouseFixedAssetNoInvoices {
  color: light-dark(rgba(24, 34, 43, 0.58), rgba(222, 236, 249, 0.58));
  max-width: none;
  padding: 6px 9px;
}

.successNote {
  color: light-dark(#17683a, #5aa573);
}

@media (max-width: 720px) {
  .appView > .panelHeader {
    gap: 10px;
    margin-bottom: 14px;
  }

  .localTabs,
  .knowledgePanel .localTabs,
  #vendedoresView .localTabs {
    overflow-x: auto;
    flex-wrap: nowrap;
    padding-bottom: 1px;
  }

  .localTabs .subTab,
  .knowledgePanel .subTab,
  #vendedoresView .subTab {
    flex: 0 0 auto;
  }

  .peopleToolbar,
  .peopleEditorHeader {
    align-items: stretch;
    flex-direction: column;
  }

  .peopleHeaderStats {
    flex: 0 1 auto;
    justify-content: flex-start;
    width: 100%;
  }

  .peopleToolbar .searchField {
    max-width: none;
  }

  .peopleEditorActions {
    justify-content: flex-start;
  }

  .peopleFormGrid,
  .peopleInlineForm {
    grid-template-columns: 1fr;
  }

  .peopleFilePicker {
    align-items: stretch;
    flex-direction: column;
  }

  .peopleInlineActions {
    justify-content: flex-start;
  }

  .warehouseSkuSummaryStrip {
    grid-template-columns: 1fr;
  }

  .warehouseSkuSummaryCard,
  .warehouseSkuSummaryMeta {
    min-height: 64px;
  }

  .warehouseFixedAssetFormGrid .span2 {
    grid-column: auto;
  }

  .warehouseSkuSheetHeader {
    align-items: flex-start;
  }
}

/* APP-008: compact global filter trigger */
.appView .filterShell.smartFilter {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  min-height: 0;
  margin: -6px 0 14px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.appView .filterShell.smartFilter .filterSummary {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  width: auto;
  min-height: 0;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.appView .filterShell.smartFilter .filterSummary > div {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.appView .filterShell.smartFilter button[data-role="open-filter"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto;
  min-width: 84px;
  min-height: 32px;
  padding: 0 13px;
  border: 1px solid light-dark(rgba(31, 117, 137, 0.24), rgba(79, 159, 180, 0.24));
  border-radius: 999px;
  background: light-dark(rgba(255, 255, 255, 0.92), rgba(17, 24, 29, 0.92));
  color: var(--ui-teal, var(--teal));
  font-size: 13px;
  font-weight: 820;
  line-height: 1;
  box-shadow: none;
  white-space: nowrap;
}

.appView .filterShell.smartFilter button[data-role="open-filter"]::before {
  content: "";
  width: 6px;
  height: 6px;
  margin-right: 7px;
  border-radius: 999px;
  background: light-dark(rgba(31, 117, 137, 0.45), rgba(79, 159, 180, 0.45));
}

.appView .filterShell.smartFilter.filterShellActive button[data-role="open-filter"] {
  border-color: rgba(255, 111, 33, 0.36);
  background: light-dark(rgba(255, 248, 243, 0.96), rgba(23, 30, 35, 0.96));
  color: var(--ui-orange-dark, var(--orange-dark));
}

.appView .filterShell.smartFilter.filterShellActive button[data-role="open-filter"]::before {
  background: var(--ui-orange, var(--orange));
}

.appView .filterShell.smartFilter button[data-role="open-filter"]:hover,
.appView .filterShell.smartFilter button[data-role="open-filter"]:focus-visible {
  border-color: light-dark(rgba(31, 117, 137, 0.42), rgba(79, 159, 180, 0.42));
  background: light-dark(#fff, #11181d);
  transform: translateY(-1px);
}

.appView .filterShell.smartFilter.filterShellActive button[data-role="open-filter"]:hover,
.appView .filterShell.smartFilter.filterShellActive button[data-role="open-filter"]:focus-visible {
  border-color: rgba(255, 111, 33, 0.52);
}

.note.warningNote {
  color: light-dark(#9f4f00, #ce7a3d);
  font-weight: 700;
}

.marketingResponsibleDirectoryWarning {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.marketingResponsibleDirectoryWarning .ghostButton {
  padding: 4px 8px;
  border: 1px solid light-dark(rgba(159, 79, 0, 0.24), rgba(206, 122, 61, 0.24));
  color: light-dark(#9f4f00, #ce7a3d);
}

@media (max-width: 720px) {
  .appView .filterShell.smartFilter {
    margin-top: -2px;
  }

  .appView .filterShell.smartFilter .filterSummary {
    align-items: flex-end;
    flex-direction: row;
  }

  .appView .filterShell.smartFilter button[data-role="open-filter"] {
    width: auto;
    min-width: 78px;
  }
}

/* Final shell guard: submenus open by click/state, never by plain hover. */
.appLayout .navGroup > .navChildren,
.appLayout .navGroup:hover > .navChildren,
.appLayout .navGroup:focus-within > .navChildren {
  display: none;
}

.appLayout .navGroup.isOpen > .navChildren,
.appLayout .navGroup:has(.navSubItem.active) > .navChildren {
  display: grid;
}

.appLayout.sidebarCollapsed:not(.sidebarHover),
.appLayout.sidebarCollapsed:not(.sidebarHover):has(.sidebar:hover) {
  grid-template-columns: var(--sidebar-rail-width) minmax(0, 1fr);
}

.appLayout.sidebarCollapsed:not(.sidebarHover) .sidebar,
.appLayout.sidebarCollapsed:not(.sidebarHover) .sidebar:hover,
.appLayout.sidebarCollapsed:not(.sidebarHover):has(.sidebar:hover) .sidebar {
  inline-size: var(--sidebar-rail-width);
  width: var(--sidebar-rail-width);
}

.appLayout.sidebarCollapsed:not(.sidebarHover) .sidebar:hover .sidebarTitle,
.appLayout.sidebarCollapsed:not(.sidebarHover) .sidebar:hover .navChildren,
.appLayout.sidebarCollapsed:not(.sidebarHover):has(.sidebar:hover) .sidebarTitle,
.appLayout.sidebarCollapsed:not(.sidebarHover):has(.sidebar:hover) .navChildren {
  display: none;
}

/* MENU-ICONS-001: minimal monochrome sidebar inspired by option B. */
:root {
  --sidebar-rail-width: 74px;
  --sidebar-open-width: 328px;
  --menu-icon-ink: light-dark(#273142, #d5e2f8);
  --menu-icon-muted: light-dark(#637181, #a0afc0);
  --menu-active: light-dark(#247a8b, #4f9fb1);
  --menu-active-bg: light-dark(#eef7f8, #1b2227);
  --menu-active-border: light-dark(#d4e8ec, #26363a);
  --menu-hover-bg: light-dark(#f7fbfc, #161d22);
  --menu-hover-border: light-dark(#dbe9ec, #2b3237);
  --menu-icon-dashboard: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='5' width='16' height='14' rx='3'/%3E%3Cpath d='M8 15v-4M12 15V9M16 15V8'/%3E%3C/svg%3E");
  --menu-icon-finance: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 4h10v16l-2-1-2 1-2-1-2 1-2-1V4z'/%3E%3Cpath d='M10 8h4M10 12h4M10 16h2'/%3E%3C/svg%3E");
  --menu-icon-commerce: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l7-7h6v6l-7 7-6-6z'/%3E%3Ccircle cx='15.5' cy='8.5' r='1.2'/%3E%3C/svg%3E");
  --menu-icon-logistics: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 8.5L12 4l7.5 4.5v7L12 20l-7.5-4.5z'/%3E%3Cpath d='M5 8.5l7 4.1 7-4.1M12 12.6V20'/%3E%3C/svg%3E");
  --menu-icon-knowledge: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 5.5h5.2c1 0 1.8.8 1.8 1.8V19c0-1-.8-1.8-1.8-1.8H5z'/%3E%3Cpath d='M19 5.5h-5.2c-1 0-1.8.8-1.8 1.8V19c0-1 .8-1.8 1.8-1.8H19z'/%3E%3C/svg%3E");
  --menu-icon-people: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='10' r='2.5'/%3E%3Ccircle cx='16' cy='10.5' r='2'/%3E%3Cpath d='M4.8 17c.9-2.1 2.3-3.1 4.2-3.1s3.3 1 4.2 3.1M13.5 16.5c.7-1.2 1.7-1.8 3-1.8s2.3.6 3 1.8'/%3E%3C/svg%3E");
  --menu-icon-settings: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3Cpath d='M12 3.8v2M12 18.2v2M4.9 7l1.7 1M17.4 16l1.7 1M4.9 17l1.7-1M17.4 8l1.7-1M5.8 12h-2M20.2 12h-2'/%3E%3C/svg%3E");
  --menu-icon-erp: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cellipse cx='12' cy='6' rx='6' ry='3'/%3E%3Cpath d='M6 6v6c0 1.7 2.7 3 6 3s6-1.3 6-3V6M6 12v6c0 1.7 2.7 3 6 3s6-1.3 6-3v-6'/%3E%3C/svg%3E");
}

.sidebar {
  scrollbar-width: none;
}

.sidebar::-webkit-scrollbar {
  width: 0;
  height: 0;
}

.sidebarToggle {
  width: 48px;
  min-height: 48px;
  border: 1px solid transparent;
  border-radius: 999px;
  background: var(--teal);
  color: #fff;
  box-shadow: none;
}

.sidebarToggle:hover {
  background: light-dark(#206d7d, #569eaf);
  color: #fff;
  transform: none;
}

.navItem {
  --menu-icon: var(--menu-icon-dashboard);
}

.navItem[data-view-target="ceoView"] {
  --menu-icon: var(--menu-icon-dashboard);
}

.financeNavParent,
.navItem[data-view-target="dreTesteView"],
.navItem[data-view-target="estoqueView"],
.navItem[data-view-target="planoContasView"],
.navItem[data-view-target="lucroLiquidoView"],
.navItem[data-view-target="balanceteView"],
.navItem[data-view-target="bankStatementsView"] {
  --menu-icon: var(--menu-icon-finance);
}

.navItem[data-view-target="vendedoresView"] {
  --menu-icon: var(--menu-icon-commerce);
}

.navGroupParent[data-icon="LOG"],
.navItem[data-view-target="expedicaoView"] {
  --menu-icon: var(--menu-icon-logistics);
}

.navItem[data-view-target="knowledgeView"] {
  --menu-icon: var(--menu-icon-knowledge);
}

.navItem[data-view-target="peopleView"] {
  --menu-icon: var(--menu-icon-people);
}

.navItem[data-view-target="configView"] {
  --menu-icon: var(--menu-icon-settings);
}

.navGroupParent[data-icon="ERP"],
.navItem[data-view-target="pedidoVendaView"],
.navItem[data-view-target="notasFiscaisView"],
.navItem[data-view-target="notasEntradaView"],
.navItem[data-view-target="contasPagarView"],
.navItem[data-view-target="contasReceberView"] {
  --menu-icon: var(--menu-icon-erp);
}

.appLayout.sidebarCollapsed:not(.sidebarHover) .sidebar {
  padding: 10px 8px;
  overflow-y: hidden;
}

.appLayout.sidebarCollapsed:not(.sidebarHover) .sidebarBlock:not([hidden]) {
  gap: 8px;
}

.appLayout.sidebarCollapsed:not(.sidebarHover) .sidebarBlock + .sidebarBlock {
  margin-top: 9px;
  padding-top: 9px;
  border-top: 1px solid rgba(24, 34, 43, 0.07);
}

.appLayout.sidebarCollapsed:not(.sidebarHover) .navItem:not([hidden]) {
  width: 54px;
  min-width: 54px;
  max-width: 54px;
  min-height: 46px;
  border: 1px solid rgba(24, 34, 43, 0.08);
  border-radius: 999px;
  background: light-dark(#fff, #11181d);
  color: var(--menu-icon-muted);
  box-shadow: none;
  transition: background 160ms ease, border-color 160ms ease, color 160ms ease;
}

.appLayout.sidebarCollapsed:not(.sidebarHover) .navItem:not([hidden])::before {
  content: "";
  display: block;
  width: 21px;
  height: 21px;
  flex: 0 0 21px;
  border: 0;
  border-radius: 0;
  background: currentColor;
  box-shadow: none;
  -webkit-mask: var(--menu-icon) center / contain no-repeat;
  mask: var(--menu-icon) center / contain no-repeat;
}

.appLayout.sidebarCollapsed:not(.sidebarHover) .navItem:hover:not([hidden]) {
  border-color: var(--menu-hover-border);
  background: var(--menu-hover-bg);
  color: var(--menu-active);
  box-shadow: none;
  transform: none;
}

.appLayout.sidebarCollapsed:not(.sidebarHover) .navItem.active,
.appLayout.sidebarCollapsed:not(.sidebarHover) .navGroup:has(.navSubItem.active) > .navItem {
  border-color: var(--menu-active-border);
  background: var(--menu-active-bg);
  color: var(--menu-active);
  box-shadow: none;
}

.appLayout.sidebarHover .sidebar,
.appLayout:not(.sidebarCollapsed) .sidebar {
  background: light-dark(#fff, #11181d);
  overflow-y: auto;
}

.appLayout.sidebarHover .navItem:not([hidden]),
.appLayout:not(.sidebarCollapsed) .navItem:not([hidden]) {
  min-height: 42px;
  padding: 0 12px;
  border: 1px solid transparent;
  border-radius: 999px;
  background: transparent;
  color: var(--menu-icon-ink);
  font-weight: 730;
  gap: 12px;
  box-shadow: none;
}

.appLayout.sidebarHover .navItem:not([hidden])::before,
.appLayout:not(.sidebarCollapsed) .navItem:not([hidden])::before {
  content: "";
  display: block;
  width: 20px;
  height: 20px;
  flex: 0 0 20px;
  border: 0;
  border-radius: 0;
  background: currentColor;
  box-shadow: none;
  -webkit-mask: var(--menu-icon) center / contain no-repeat;
  mask: var(--menu-icon) center / contain no-repeat;
}

.appLayout.sidebarHover .navItem:hover:not([hidden]),
.appLayout:not(.sidebarCollapsed) .navItem:hover:not([hidden]) {
  border-color: var(--menu-hover-border);
  background: var(--menu-hover-bg);
  color: var(--menu-active);
}

.appLayout.sidebarHover .navItem.active:not([hidden]),
.appLayout:not(.sidebarCollapsed) .navItem.active:not([hidden]),
.appLayout.sidebarHover .navGroup:has(.navSubItem.active) > .navItem,
.appLayout:not(.sidebarCollapsed) .navGroup:has(.navSubItem.active) > .navItem {
  border-color: var(--menu-active-border);
  background: var(--menu-active-bg);
  color: var(--menu-active);
  box-shadow: none;
}

.appLayout.sidebarHover .navSubItem:not([hidden]),
.appLayout:not(.sidebarCollapsed) .navSubItem:not([hidden]) {
  min-height: 34px;
  padding-left: 16px;
  border-radius: 12px;
  color: var(--menu-icon-muted);
}

.appLayout.sidebarHover .navSubItem:not([hidden])::before,
.appLayout:not(.sidebarCollapsed) .navSubItem:not([hidden])::before {
  width: 6px;
  height: 6px;
  flex: 0 0 6px;
  border-radius: 999px;
  opacity: 0.42;
  -webkit-mask: none;
  mask: none;
}

.appLayout.sidebarHover .sidebarBlock + .sidebarBlock,
.appLayout:not(.sidebarCollapsed) .sidebarBlock + .sidebarBlock {
  border-top-color: rgba(24, 34, 43, 0.07);
}

@media (max-height: 760px) {
  .appLayout.sidebarCollapsed:not(.sidebarHover) .sidebar {
    padding-block: 7px;
  }

  .appLayout.sidebarCollapsed:not(.sidebarHover) .sidebarToggle,
  .appLayout.sidebarCollapsed:not(.sidebarHover) .navItem:not([hidden]) {
    width: 50px;
    min-width: 50px;
    max-width: 50px;
    min-height: 42px;
  }

  .appLayout.sidebarCollapsed:not(.sidebarHover) .sidebarBlock + .sidebarBlock {
    margin-top: 6px;
    padding-top: 6px;
  }
}

/* Keep the drawer controlled by JS state so leaving the sidebar always collapses it. */
.appLayout.sidebarCollapsed:not(.sidebarHover),
.appLayout.sidebarCollapsed:not(.sidebarHover):has(.sidebar:hover) {
  grid-template-columns: var(--sidebar-rail-width) minmax(0, 1fr);
}

.appLayout.sidebarCollapsed:not(.sidebarHover) .sidebar,
.appLayout.sidebarCollapsed:not(.sidebarHover) .sidebar:hover,
.appLayout.sidebarCollapsed:not(.sidebarHover):has(.sidebar:hover) .sidebar {
  inline-size: var(--sidebar-rail-width);
  width: var(--sidebar-rail-width);
}

.appLayout.sidebarCollapsed:not(.sidebarHover) .sidebar:hover .sidebarTitle,
.appLayout.sidebarCollapsed:not(.sidebarHover) .sidebar:hover .navChildren,
.appLayout.sidebarCollapsed:not(.sidebarHover):has(.sidebar:hover) .sidebarTitle,
.appLayout.sidebarCollapsed:not(.sidebarHover):has(.sidebar:hover) .navChildren {
  display: none;
}

@media (max-width: 900px) {
  .appLayout.sidebarCollapsed:not(.sidebarHover),
  .appLayout.sidebarCollapsed:not(.sidebarHover):has(.sidebar:hover) {
    grid-template-columns: 1fr;
  }

  .appLayout.sidebarCollapsed:not(.sidebarHover) .sidebar,
  .appLayout.sidebarCollapsed:not(.sidebarHover) .sidebar:hover,
  .appLayout.sidebarCollapsed:not(.sidebarHover):has(.sidebar:hover) .sidebar {
    inline-size: 100%;
    width: 100%;
  }

  .workspace {
    grid-column: 1;
    width: 100%;
  }
}

/* Collapsed sidebar flyout: parent clicks reveal submenus without opening the full drawer. */
.appLayout.sidebarCollapsed:not(.sidebarHover) .sidebar,
.appLayout.sidebarCollapsed:not(.sidebarHover) .sidebar:hover,
.appLayout.sidebarCollapsed:not(.sidebarHover):has(.sidebar:hover) .sidebar {
  overflow: visible;
  overflow-x: visible;
  overflow-y: visible;
}

.appLayout.sidebarCollapsed:not(.sidebarHover) .navGroup {
  position: relative;
  z-index: 1;
}

.appLayout.sidebarCollapsed:not(.sidebarHover) .navGroup.isOpen {
  z-index: 160;
}

.appLayout.sidebarCollapsed:not(.sidebarHover) .navGroup > .navChildren,
.appLayout.sidebarCollapsed:not(.sidebarHover) .navGroup:hover > .navChildren,
.appLayout.sidebarCollapsed:not(.sidebarHover) .navGroup:focus-within > .navChildren,
.appLayout.sidebarCollapsed:not(.sidebarHover) .navGroup:has(.navSubItem.active) > .navChildren {
  display: none;
}

.appLayout.sidebarCollapsed:not(.sidebarHover) .navGroup.isOpen > .navChildren,
.appLayout.sidebarCollapsed:not(.sidebarHover) .sidebar:hover .navGroup.isOpen > .navChildren,
.appLayout.sidebarCollapsed:not(.sidebarHover):has(.sidebar:hover) .navGroup.isOpen > .navChildren {
  position: absolute;
  top: 0;
  left: calc(100% + 8px);
  z-index: 170;
  display: grid;
  width: min(272px, calc(100vw - var(--sidebar-rail-width) - 28px));
  max-height: min(70vh, 420px);
  gap: 4px;
  margin: 0;
  padding: 8px;
  border: 1px solid rgba(24, 34, 43, 0.1);
  border-radius: 14px;
  background: light-dark(#fff, #11181d);
  box-shadow: 0 18px 42px rgba(18, 32, 43, 0.16);
  overflow-y: auto;
}

.appLayout.sidebarCollapsed:not(.sidebarHover) .navGroup.isOpen > .navItem {
  border-color: var(--menu-active-border);
  background: var(--menu-active-bg);
  color: var(--menu-active);
}

.appLayout.sidebarCollapsed:not(.sidebarHover) .navGroup.isOpen > .navChildren .navSubItem:not([hidden]) {
  display: flex;
  align-items: center;
  width: 100%;
  min-width: 0;
  max-width: none;
  min-height: 36px;
  justify-content: flex-start;
  gap: 10px;
  margin: 0;
  padding: 0 12px;
  border: 1px solid transparent;
  border-radius: 10px;
  background: transparent;
  color: var(--menu-icon-ink);
  font-size: 13px;
  font-weight: 760;
  line-height: 1.2;
  white-space: nowrap;
  box-shadow: none;
}

.appLayout.sidebarCollapsed:not(.sidebarHover) .navGroup.isOpen > .navChildren .navSubItem:hover:not([hidden]),
.appLayout.sidebarCollapsed:not(.sidebarHover) .navGroup.isOpen > .navChildren .navSubItem.active:not([hidden]) {
  border-color: var(--menu-hover-border);
  background: var(--menu-hover-bg);
  color: var(--menu-active);
}

.appLayout.sidebarCollapsed:not(.sidebarHover) .navGroup.isOpen > .navChildren .navSubItem:not([hidden])::before {
  content: "";
  display: block;
  width: 6px;
  height: 6px;
  flex: 0 0 6px;
  border: 0;
  border-radius: 999px;
  background: currentColor;
  opacity: 0.5;
  -webkit-mask: none;
  mask: none;
}

/* MENU-ICONS-002: unified SVG icon rail. */
:root {
  --menu-icon-container-size: 46px;
  --menu-icon-container-radius: 12px;
  --menu-icon-svg-size: 28px;
  --menu-icon-ink: light-dark(#485766, #b6c8d9);
  --menu-icon-muted: light-dark(#748391, #8f9ead);
  --menu-toggle-bg: #ff751f;
}

.sidebarToggle,
.appLayout.sidebarCollapsed:not(.sidebarHover) .sidebarToggle,
.appLayout.sidebarHover .sidebarToggle,
.appLayout:not(.sidebarCollapsed) .sidebarToggle {
  display: inline-grid;
  place-items: center;
  width: 54px;
  min-width: 54px;
  max-width: 54px;
  height: var(--menu-icon-container-size);
  min-height: var(--menu-icon-container-size);
  margin: 0 auto 12px;
  padding: 0;
  border: 1px solid transparent;
  border-radius: var(--menu-icon-container-radius);
  background: var(--menu-toggle-bg);
  color: #fff;
  box-shadow: none;
  font-size: 0;
  line-height: 0;
  transform: none;
}

.sidebarToggle::before,
.appLayout.sidebarHover .sidebarToggle::before,
.appLayout:not(.sidebarCollapsed) .sidebarToggle::before {
  content: none;
  display: none;
}

.sidebarToggleIcon {
  display: block;
  width: var(--menu-icon-svg-size);
  height: var(--menu-icon-svg-size);
  font-size: var(--menu-icon-svg-size);
  color: currentColor;
}

.sidebarToggleIcon span,
.sidebarToggleIcon::before,
.sidebarToggleIcon::after {
  content: none;
  display: none;
}

.sidebarToggle:hover {
  background: light-dark(#e96312, #e96313);
  color: #fff;
}

.navItem::before {
  content: none;
  display: none;
}

.appLayout.sidebarCollapsed:not(.sidebarHover) .navItem:not(.navSubItem):not([hidden])::before,
.appLayout.sidebarCollapsed:not(.sidebarHover) .navGroup > .navItem:not(.navSubItem)::before,
.appLayout.sidebarHover .navItem:not(.navSubItem):not([hidden])::before,
.appLayout:not(.sidebarCollapsed) .navItem:not(.navSubItem):not([hidden])::before,
.appLayout.sidebarCollapsed:not(.sidebarHover):has(.sidebar:hover) .navItem:not(.navSubItem):not([hidden])::before {
  content: none;
  display: none;
  width: 0;
  height: 0;
  flex: 0 0 0;
  margin: 0;
  border: 0;
  background: none;
  box-shadow: none;
  -webkit-mask: none;
  mask: none;
}

.navItem {
  position: relative;
}

.navIcon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--menu-icon-svg-size);
  height: var(--menu-icon-svg-size);
  flex: 0 0 var(--menu-icon-svg-size);
  font-size: var(--menu-icon-svg-size);
  color: currentColor;
  line-height: 0;
}

.navIcon svg {
  display: block;
  width: 1em;
  height: 1em;
  overflow: visible;
}

.navLabel {
  min-width: 0;
}

.appLayout.sidebarCollapsed:not(.sidebarHover) .navItem:not([hidden]) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 54px;
  min-width: 54px;
  max-width: 54px;
  min-height: var(--menu-icon-container-size);
  padding: 0;
  border-radius: var(--menu-icon-container-radius);
}

.appLayout.sidebarCollapsed:not(.sidebarHover) .navItem .navLabel {
  display: none;
}

.appLayout.sidebarCollapsed:not(.sidebarHover) .navItem .navIcon {
  margin: 0;
}

.appLayout.sidebarHover .navItem:not([hidden]),
.appLayout:not(.sidebarCollapsed) .navItem:not([hidden]) {
  display: flex;
  align-items: center;
}

.appLayout.sidebarHover .navItem .navLabel,
.appLayout:not(.sidebarCollapsed) .navItem .navLabel {
  display: inline;
}

.appLayout.sidebarCollapsed:not(.sidebarHover) .navItem.active::after,
.appLayout.sidebarCollapsed:not(.sidebarHover) .navGroup:has(.navSubItem.active) > .navItem::after,
.appLayout.sidebarCollapsed:not(.sidebarHover) .navGroup.isOpen > .navItem::after {
  content: "";
  position: absolute;
  left: -1px;
  width: 3px;
  height: 24px;
  border-radius: 999px;
  background: var(--menu-toggle-bg);
}

.appLayout.sidebarHover .navItem.active::after,
.appLayout:not(.sidebarCollapsed) .navItem.active::after,
.appLayout.sidebarHover .navGroup:has(.navSubItem.active) > .navItem::after,
.appLayout:not(.sidebarCollapsed) .navGroup:has(.navSubItem.active) > .navItem::after {
  content: "";
  position: absolute;
  left: 0;
  width: 3px;
  height: 24px;
  border-radius: 999px;
  background: var(--menu-toggle-bg);
}

.navSubItem::before,
.appLayout.sidebarHover .navSubItem::before,
.appLayout:not(.sidebarCollapsed) .navSubItem::before,
.appLayout.sidebarCollapsed:not(.sidebarHover) .navGroup.isOpen > .navChildren .navSubItem::before {
  content: "";
  display: block;
  width: 6px;
  height: 6px;
  flex: 0 0 6px;
  border: 0;
  border-radius: 999px;
  background: currentColor;
  opacity: 0.5;
  -webkit-mask: none;
  mask: none;
}

.appLayout.sidebarCollapsed:not(.sidebarHover) .navGroup.isOpen > .navChildren .navSubItem .navLabel {
  display: inline;
}

.navSubItem.disabled,
.appLayout.sidebarHover .navSubItem.disabled,
.appLayout:not(.sidebarCollapsed) .navSubItem.disabled,
.appLayout.sidebarCollapsed:not(.sidebarHover) .navGroup.isOpen > .navChildren .navSubItem.disabled {
  color: light-dark(#9aa6af, #70797f);
  cursor: default;
  opacity: 0.68;
}

.navSubItem.disabled:hover,
.appLayout.sidebarHover .navSubItem.disabled:hover,
.appLayout:not(.sidebarCollapsed) .navSubItem.disabled:hover,
.appLayout.sidebarCollapsed:not(.sidebarHover) .navGroup.isOpen > .navChildren .navSubItem.disabled:hover {
  border-color: transparent;
  background: transparent;
  color: light-dark(#9aa6af, #70797f);
}

body .shell .appLayout.sidebarCollapsed:not(.sidebarHover) .sidebar .dashboardNavGroup.isOpen > .navChildren {
  display: grid;
}

/* COMERCIAL-REPLAN-001: tela Comercial alinhada ao padrao executivo validado. */
.commercialPanel .commercialSourceBar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 0 0 14px;
  color: var(--ui-muted, var(--muted));
  font-size: 13px;
}

.commercialPanel .commercialSourceBar > div {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.commercialPanel .commercialSourceBar p {
  margin: 0;
  text-align: right;
}

.commercialPanel .configStatusPill.success {
  border-color: light-dark(rgba(20, 122, 83, 0.22), rgba(76, 167, 125, 0.22));
  background: light-dark(rgba(20, 122, 83, 0.08), rgba(76, 167, 125, 0.08));
  color: light-dark(#147a53, #4ca77d);
}

.commercialPanel .configStatusPill.warning {
  border-color: light-dark(rgba(217, 90, 8, 0.22), rgba(230, 102, 32, 0.22));
  background: rgba(255, 117, 31, 0.09);
  color: light-dark(#d95a08, #e66620);
}

.commercialPanel .commercialKpis {
  margin: 0 0 14px;
}

.commercialPanel .commercialKpis .kpi {
  justify-content: flex-start;
  gap: 0;
  min-height: 118px;
  padding: 16px;
  border: 1px solid light-dark(rgba(40, 119, 141, 0.18), rgba(83, 158, 181, 0.18));
  border-radius: 10px;
  background: linear-gradient(180deg, light-dark(#fff, #11181d), light-dark(#f7fbfc, #161d22));
  box-shadow: none;
}

.commercialPanel .commercialKpis .kpi span {
  min-height: 0;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.25;
  text-transform: uppercase;
}

.commercialPanel .commercialKpis .kpi strong {
  display: block;
  margin-top: 8px;
  color: var(--teal);
  font-size: clamp(21px, 1.65vw, 28px);
  line-height: 1.05;
  letter-spacing: 0;
  white-space: normal;
  overflow-wrap: anywhere;
}

.commercialPanel .commercialKpis .kpi small {
  display: block;
  min-height: 0;
  margin-top: 8px;
  color: light-dark(rgba(91, 111, 128, 0.78), rgba(158, 179, 198, 0.78));
  font-size: 13px;
  font-weight: 400;
  line-height: 1.35;
}

.commercialPanel .commercialBreakdownCards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin: 0 0 14px;
}

.commercialPanel .commercialBreakdownCard {
  min-width: 0;
  padding: 14px;
  border: 1px solid light-dark(rgba(40, 119, 141, 0.16), rgba(83, 158, 181, 0.16));
  border-radius: 10px;
  background: linear-gradient(180deg, light-dark(#fff, #11181d), light-dark(#f8fbfc, #161d22));
}

.commercialPanel .commercialBreakdownCard > span {
  display: block;
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
  line-height: 1.25;
  text-transform: uppercase;
}

.commercialPanel .commercialBreakdownList {
  display: grid;
  gap: 9px;
  margin-top: 12px;
}

.commercialPanel .commercialBreakdownRow {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: baseline;
  gap: 10px;
  min-width: 0;
}

.commercialPanel .commercialBreakdownRow strong {
  min-width: 0;
  color: light-dark(#18222b, #deecf9);
  font-size: 13px;
  font-weight: 650;
  line-height: 1.25;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.commercialPanel .commercialBreakdownRow div {
  display: flex;
  align-items: baseline;
  gap: 7px;
  white-space: nowrap;
}

.commercialPanel .commercialBreakdownRow b {
  color: var(--orange-dark);
  font-size: 14px;
  font-weight: 760;
  line-height: 1.1;
}

.commercialPanel .commercialBreakdownRow small {
  color: light-dark(rgba(91, 111, 128, 0.78), rgba(158, 179, 198, 0.78));
  font-size: 12px;
  line-height: 1.1;
}

.commercialPanel .commercialGrid {
  gap: 14px;
}

.commercialPanel .subpanel {
  min-width: 0;
}

.commercialPanel .commercialHealthPanel,
.commercialPanel .commercialRulePanel,
.commercialPanel .commercialEmptyCommission,
.commercialPanel .commercialSellerFallbackPanel {
  padding: 16px;
  border-color: light-dark(rgba(40, 119, 141, 0.14), rgba(83, 158, 181, 0.14));
  background: linear-gradient(180deg, light-dark(rgba(255, 255, 255, 0.96), rgba(17, 24, 29, 0.96)), light-dark(rgba(248, 251, 252, 0.92), rgba(22, 29, 34, 0.92)));
}

.commercialPanel .commercialHealthGrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.commercialPanel .commercialHealthItem {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: 10px;
  min-width: 0;
  padding: 11px;
  border: 1px solid light-dark(rgba(40, 119, 141, 0.12), rgba(83, 158, 181, 0.12));
  border-radius: 9px;
  background: light-dark(#fff, #11181d);
}

.commercialPanel .commercialHealthItem.warning {
  border-color: light-dark(rgba(217, 90, 8, 0.22), rgba(230, 102, 32, 0.22));
  background: light-dark(#fff8f3, #171e23);
}

.commercialPanel .commercialHealthItem strong,
.commercialPanel .commercialEmptySteps strong {
  display: block;
  color: light-dark(#18222b, #deecf9);
  font-size: 13px;
  font-weight: 820;
  line-height: 1.25;
}

.commercialPanel .commercialHealthItem small,
.commercialPanel .commercialEmptySteps small,
.commercialPanel .tableSubtext {
  display: block;
  margin-top: 3px;
  color: light-dark(rgba(91, 111, 128, 0.84), rgba(158, 179, 198, 0.84));
  font-size: 12px;
  line-height: 1.3;
}

.commercialPanel .commercialStatusBadge {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  min-height: 22px;
  padding: 0 8px;
  border-radius: 999px;
  background: rgba(255, 117, 31, 0.12);
  color: var(--orange-dark);
  font-size: 11px;
  font-weight: 850;
  line-height: 1;
  white-space: nowrap;
}

.commercialPanel .commercialStatusBadge.positive {
  background: light-dark(rgba(20, 122, 83, 0.1), rgba(76, 167, 125, 0.1));
  color: light-dark(#147a53, #4ca77d);
}

.commercialPanel .commercialStatusBadge.warning {
  background: rgba(255, 117, 31, 0.12);
  color: light-dark(#d95a08, #e66620);
}

.commercialPanel .commercialProgressTrack {
  height: 10px;
  margin: 0 0 14px;
  border-radius: 999px;
  background: light-dark(rgba(40, 119, 141, 0.12), rgba(83, 158, 181, 0.12));
  overflow: hidden;
}

.commercialPanel .commercialProgressTrack span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--orange), var(--orange-dark));
}

.commercialPanel .commercialEmptySteps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.commercialPanel .commercialEmptySteps > div {
  min-width: 0;
  padding: 12px;
  border: 1px solid light-dark(rgba(217, 90, 8, 0.16), rgba(230, 102, 32, 0.16));
  border-radius: 9px;
  background: light-dark(#fff, #11181d);
}

.commercialPanel .tableWrap {
  overflow-x: auto;
}

.commercialPanel table {
  min-width: 760px;
}

.commercialPanel th.alignRight,
.commercialPanel td.alignRight {
  text-align: right;
}

.commercialPanel td strong {
  color: light-dark(#18222b, #deecf9);
  font-weight: 850;
}

@media (max-width: 1100px) {
  .commercialPanel .commercialBreakdownCards,
  .commercialPanel .commercialEmptySteps {
    grid-template-columns: 1fr;
  }

  .commercialPanel .commercialHealthGrid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 760px) {
  .commercialPanel .commercialSourceBar {
    align-items: flex-start;
    flex-direction: column;
  }

  .commercialPanel .commercialSourceBar p {
    text-align: left;
  }
}

/* COMERCIAL-REPLAN-002: abas e telas validadas em conversa. */
.commercialPanel > .panelHeader {
  align-items: center;
  margin-bottom: 14px;
}

.commercialPanel > .panelHeader h2 {
  margin: 0;
}

.commercialPanel .compactPeriodFilter {
  width: auto;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  position: relative;
}

.commercialPanel .compactPeriodFilter .filterSummary {
  display: block;
  padding: 0;
  border: 0;
  background: transparent;
}

.commercialPanel .compactPeriodFilter .filterSummary button {
  min-height: 36px;
  padding: 0 18px;
  border: 1px solid rgba(255, 117, 31, 0.28);
  border-radius: 999px;
  background: light-dark(#fff8f3, #171e23);
  color: var(--orange-dark);
  font-weight: 850;
}

.commercialPanel .compactPeriodFilter .tinyFilter {
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  z-index: 20;
  width: min(520px, calc(100vw - 120px));
}

.commercialPanel .commercialTabs {
  margin: 0 0 18px;
  border-bottom: 0;
}

.commercialPanel .commercialTabs .subTab {
  border-bottom: 0;
  border-radius: 8px;
}

.commercialPanel .commercialTabs .subTab.active {
  position: relative;
  color: var(--teal);
}

.commercialPanel .commercialTabs .subTab.active::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 50%;
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: var(--orange);
  transform: translateY(-50%);
}

.commercialPanel .commercialTabs .subTab.active {
  padding-left: 18px;
}

.commercialPanel .commercialSellerKpis,
.commercialPanel .commercialProductKpis {
  grid-template-columns: repeat(6, minmax(0, 1fr));
}

.commercialPanel .commercialSellerKpis .kpi,
.commercialPanel .commercialProductKpis .kpi {
  min-height: 76px;
  padding: 13px 14px;
}

.commercialPanel .commercialSellerKpis .kpi strong,
.commercialPanel .commercialProductKpis .kpi strong {
  font-size: 20px;
}

.commercialPanel .kpi.positive strong {
  color: var(--green);
}

.commercialPanel .kpi.warning strong {
  color: var(--orange-dark);
}

.commercialPanel .kpi.negative strong {
  color: var(--red);
}

.commercialSellerLayout,
.commercialProductLayout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 312px;
  gap: 14px;
  align-items: start;
}

.commercialSellerLayout .full,
.commercialProductLayout .full {
  grid-column: auto;
}

.commercialRankingPanel,
.commercialProductHint {
  padding: 16px;
}

.commercialRankingList {
  display: grid;
  gap: 13px;
  margin-top: 10px;
}

.commercialRankingItem strong {
  display: block;
  color: var(--ink);
  font-size: 12px;
  line-height: 1.25;
}

.commercialRankingItem div {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  margin-top: 7px;
}

.commercialRankingItem span {
  color: var(--ink);
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
}

.commercialMiniProgress {
  height: 8px;
  border-radius: 999px;
  background: light-dark(rgba(40, 119, 141, 0.13), rgba(83, 158, 181, 0.13));
  overflow: hidden;
}

.commercialMiniProgress span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--teal);
}

.commercialMiniProgress.green span {
  background: var(--green);
}

.commercialMiniProgress.orange span {
  background: var(--orange);
}

.commercialMiniProgress.red span {
  background: var(--red);
}

.commercialTierProgress {
  position: relative;
  width: 100%;
  max-width: 112px;
  height: 8px;
  border-radius: 999px;
  overflow: hidden;
  background: light-dark(rgba(130, 139, 148, 0.18), rgba(140, 148, 155, 0.18));
}

.commercialTierProgress::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px rgba(16, 36, 51, 0.12);
  pointer-events: none;
}

.commercialTierProgress span {
  position: relative;
  z-index: 1;
  display: block;
  height: 100%;
  min-width: 2px;
  border-radius: inherit;
  background: var(--red);
}

.commercialTierProgressLabel {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: grid;
  place-items: center;
  padding: 0 6px;
  color: light-dark(#123245, #c8e8fe);
  font-size: 9px;
  font-weight: 900;
  line-height: 1;
  text-align: center;
  white-space: nowrap;
  pointer-events: none;
}

.commercialTierProgress.bronze .commercialTierProgressFill {
  background: light-dark(#b87333, #c68041);
}

.commercialTierProgress.silver .commercialTierProgressFill {
  background: light-dark(#7f8fa3, #8191a5);
}

.commercialTierProgress.gold .commercialTierProgressFill {
  background: #d59a1f;
}

.commercialTierProgress.diamond .commercialTierProgressFill {
  background: #5bc0eb;
}

.commercialGoalsPanel {
  padding: 16px;
}

.commercialEditableTable input {
  width: 100%;
  min-height: 30px;
  padding: 0 10px;
  border: 1px solid rgba(24, 34, 43, 0.12);
  border-radius: 6px;
  background: light-dark(#fff9e8, #211d10);
  color: var(--ink);
  font: inherit;
}

.commercialEditableTable input:disabled {
  background: light-dark(rgba(246, 248, 250, 0.85), rgba(25, 31, 36, 0.85));
  color: light-dark(rgba(24, 34, 43, 0.74), rgba(222, 236, 249, 0.74));
  cursor: not-allowed;
}

.commercialEditableTable input::placeholder {
  color: light-dark(rgba(91, 111, 128, 0.78), rgba(158, 179, 198, 0.78));
}

.targetFieldHeader {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.targetUnitIcon {
  display: inline-grid;
  place-items: center;
  width: 18px;
  height: 18px;
  border-radius: 6px;
  background: light-dark(rgba(40, 119, 141, 0.12), rgba(83, 158, 181, 0.12));
  color: var(--teal);
  font-size: 12px;
  font-weight: 900;
  line-height: 1;
}

.sellerTargetActions {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}

.commercialHintBox {
  margin-top: 14px;
  padding: 14px;
  border-radius: 8px;
  background: var(--teal-soft);
}

.commercialHintBox.positive {
  background: light-dark(rgba(20, 122, 83, 0.10), rgba(76, 167, 125, 0.1));
}

.commercialHintBox.warning {
  background: var(--soft-orange);
}

.commercialHintBox strong,
.commercialHintBox small {
  display: block;
}

.commercialHintBox strong {
  color: var(--ink);
  font-size: 15px;
  font-weight: 850;
}

.commercialHintBox small {
  margin-top: 6px;
  color: var(--muted);
  line-height: 1.35;
}

.commercialMultiplesCalculator {
  display: grid;
  grid-column: 1 / -1;
  gap: 16px;
}

.commercialCalculatorWorkspace {
  display: grid;
  grid-template-columns: minmax(620px, 720px) minmax(430px, 1fr);
  gap: 18px;
  align-items: start;
  min-width: 0;
}

.commercialCalculatorGrid {
  display: grid;
  grid-template-columns: minmax(240px, 312px) minmax(280px, 382px);
  gap: 16px;
  align-items: stretch;
}

.commercialCalculatorFields {
  display: grid;
  gap: 10px;
  min-width: 0;
}

.commercialCalculatorField {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.commercialCalculatorField span {
  color: light-dark(rgba(24, 34, 43, 0.78), rgba(222, 236, 249, 0.78));
  font-size: 12px;
  font-weight: 820;
}

.commercialCalculatorField input,
.commercialCalculatorField select {
  width: 100%;
  min-height: 38px;
  padding: 0 12px;
  border: 1px solid rgba(24, 34, 43, 0.12);
  border-radius: 7px;
  background: light-dark(#fff9e8, #211d10);
  color: var(--ink);
  font: inherit;
}

.commercialCalculatorField input::placeholder {
  color: light-dark(rgba(91, 111, 128, 0.72), rgba(158, 179, 198, 0.72));
}

.commercialCalculatorField input:focus,
.commercialCalculatorField select:focus {
  border-color: rgba(255, 117, 31, 0.46);
  outline: none;
  box-shadow: var(--focus-ring);
}

.commercialCalculatorField small {
  color: var(--muted);
  font-size: 12px;
  font-weight: 780;
}

.commercialCalculatorResult {
  display: grid;
  gap: 8px;
  min-width: 0;
  padding: 14px;
  border: 1px solid light-dark(rgba(40, 119, 141, 0.14), rgba(83, 158, 181, 0.14));
  border-radius: 8px;
  background: var(--teal-soft);
}

.commercialCalculatorResult div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  min-width: 0;
}

.commercialCalculatorResult span {
  min-width: 0;
  color: light-dark(rgba(24, 34, 43, 0.72), rgba(222, 236, 249, 0.72));
  font-size: 12px;
  font-weight: 820;
}

.commercialCalculatorResult strong {
  color: var(--ink);
  font-size: 17px;
  font-weight: 880;
  white-space: nowrap;
}

.commercialCalculatorResult .commercialCalculatorTotal {
  margin-top: 4px;
  padding-top: 12px;
  border-top: 1px solid light-dark(rgba(40, 119, 141, 0.18), rgba(83, 158, 181, 0.18));
}

.commercialCalculatorResult .commercialCalculatorGrandTotal {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

.commercialCalculatorResult .commercialCalculatorCardCharge {
  align-items: center;
  margin-top: 8px;
  padding: 12px;
  border: 1px solid rgba(255, 117, 31, 0.34);
  border-radius: 8px;
  background: light-dark(rgba(255, 249, 232, 0.82), rgba(33, 29, 16, 0.82));
}

.commercialCalculatorResult .commercialCalculatorCardCharge span {
  color: light-dark(rgba(24, 34, 43, 0.82), rgba(222, 236, 249, 0.82));
}

.commercialCalculatorResult .commercialCalculatorTotal strong,
.commercialCalculatorResult .commercialCalculatorInstallment strong {
  color: var(--orange-dark);
  font-size: 22px;
}

.commercialCalculatorResult .commercialCalculatorGrandTotal strong {
  font-size: 24px;
}

.commercialPaymentLinkRates {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 10px;
  min-width: 0;
  padding: 12px;
  border: 1px solid light-dark(rgba(40, 119, 141, 0.14), rgba(83, 158, 181, 0.14));
  border-radius: 8px;
  background: light-dark(#fbfaf8, #161d22);
}

.commercialPaymentRatesTitle {
  grid-column: 1 / -1;
  margin: 0;
  color: var(--ink);
  font-size: 15px;
  font-weight: 880;
  line-height: 1.2;
}

.commercialPaymentLinkRates > div {
  display: grid;
  gap: 10px;
  min-width: 0;
  padding: 10px;
  border: 1px solid light-dark(rgba(40, 119, 141, 0.12), rgba(83, 158, 181, 0.12));
  border-radius: 8px;
  background: light-dark(rgba(255, 255, 255, 0.72), rgba(17, 24, 29, 0.72));
}

.commercialPaymentLinkRates > div.activeRateTable {
  border-color: rgba(255, 117, 31, 0.36);
  background: light-dark(rgba(255, 249, 232, 0.72), rgba(33, 29, 16, 0.72));
}

.commercialRateTableHeading {
  display: grid;
  gap: 3px;
}

.commercialPaymentLinkRates strong,
.commercialPaymentLinkRates small,
.commercialRateTableHeading span {
  display: block;
}

.commercialPaymentLinkRates strong {
  color: var(--ink);
  font-size: 14px;
  font-weight: 860;
}

.commercialRateTableHeading span {
  color: var(--teal-dark);
  font-size: 13px;
  font-weight: 840;
  line-height: 1.25;
}

.commercialPaymentLinkRates small {
  margin-top: 4px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
}

.commercialPaymentLinkRates table {
  width: 100%;
  min-width: 0;
  border-collapse: collapse;
  table-layout: fixed;
  font-size: 13px;
}

.commercialPaymentLinkRates th,
.commercialPaymentLinkRates td {
  padding: 7px 2px;
  border-bottom: 1px solid light-dark(rgba(40, 119, 141, 0.12), rgba(83, 158, 181, 0.12));
  text-align: left;
}

.commercialPaymentLinkRates th {
  padding-top: 0;
  color: light-dark(rgba(24, 34, 43, 0.68), rgba(222, 236, 249, 0.68));
  font-size: 11px;
  font-weight: 860;
  text-transform: uppercase;
}

.commercialPaymentLinkRates tbody tr:last-child td {
  border-bottom: 0;
}

.commercialPaymentLinkRates tbody tr.active td {
  background: rgba(255, 117, 31, 0.08);
  color: var(--ink);
  font-weight: 880;
}

.commercialPaymentLinkRates tbody tr.active td:first-child {
  border-radius: 7px 0 0 7px;
}

.commercialPaymentLinkRates tbody tr.active td:last-child {
  border-radius: 0 7px 7px 0;
}

.commercialPaymentLinkRates td:last-child,
.commercialPaymentLinkRates th:last-child {
  text-align: right;
}

.commercialPaymentLinkRates td:last-child {
  color: var(--orange-dark);
  font-weight: 860;
}

.commercialCalculatorManual {
  display: grid;
  gap: 10px;
  padding-top: 2px;
}

.commercialCalculatorManual strong {
  color: var(--ink);
  font-size: 14px;
  font-weight: 860;
}

.commercialCalculatorManual ol {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
  margin: 0;
  padding: 12px 0 0 18px;
  border-top: 1px solid light-dark(rgba(40, 119, 141, 0.14), rgba(83, 158, 181, 0.14));
  color: light-dark(rgba(24, 34, 43, 0.76), rgba(222, 236, 249, 0.76));
  font-size: 13px;
  line-height: 1.4;
}

.commercialCalculatorManual li {
  min-width: 0;
}

@media (max-width: 1200px) {
  .commercialPanel .commercialSellerKpis,
  .commercialPanel .commercialProductKpis {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .commercialSellerLayout,
  .commercialProductLayout {
    grid-template-columns: 1fr;
  }

  .commercialCalculatorWorkspace {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 760px) {
  .commercialPanel .commercialSellerKpis,
  .commercialPanel .commercialProductKpis {
    grid-template-columns: 1fr;
  }

  .commercialCalculatorWorkspace {
    grid-template-columns: 1fr;
  }

  .commercialCalculatorGrid {
    grid-template-columns: 1fr;
  }

  .commercialPaymentLinkRates {
    grid-template-columns: 1fr;
  }

  .commercialCalculatorResult div {
    display: grid;
    gap: 3px;
  }

  .commercialCalculatorResult strong {
    white-space: normal;
  }

  .commercialPanel .compactPeriodFilter .tinyFilter {
    right: 0;
    width: calc(100vw - 36px);
  }
}

/* VISUAL-UNIFICATION-001: portal-wide executive identity layer. */
:root {
  --orange: #ff751f;
  --orange-dark: light-dark(#d95a08, #e66620);
  --teal: light-dark(#28778d, #539eb5);
  --teal-dark: light-dark(#1f6578, #5b9db1);
  --navy: light-dark(#102433, #d4edff);
  --bg: light-dark(#f6f4f1, #1c2328);
  --ink: light-dark(#14212b, #dcedfb);
  --muted: light-dark(#60717d, #9fb1be);
  --line: light-dark(#dce6e7, #2d343a);
  --line-strong: light-dark(#c7d6d9, #3f464c);
  --panel: light-dark(#ffffff, #11181d);
  --surface-alt: light-dark(#fbfaf8, #161d22);
  --soft-orange: light-dark(#fff2e7, #292018);
  --teal-soft: light-dark(#eef8f9, #1b2227);
  --green: light-dark(#11845b, #43a87d);
  --red: light-dark(#b42318, #ed5c4b);
  --shadow-soft: 0 14px 34px rgba(16, 36, 51, 0.08);
  --shadow-tight: 0 5px 18px rgba(16, 36, 51, 0.06);
  --focus-ring: 0 0 0 3px rgba(255, 117, 31, 0.22);
  --menu-active: light-dark(#d95a08, #e66620);
  --menu-active-bg: light-dark(#fff1e6, #2a2018);
  --menu-active-border: rgba(255, 117, 31, 0.34);
  --menu-hover-bg: light-dark(#fff8f3, #171e23);
  --menu-hover-border: rgba(255, 117, 31, 0.24);
  --menu-icon-ink: light-dark(#5a4638, #e1c9b8);
  --menu-icon-muted: light-dark(#8a7769, #b19d8f);
  --menu-toggle-bg: var(--orange);
}

body {
  background:
    radial-gradient(circle at 0 0, rgba(255, 117, 31, 0.08), transparent 24rem),
    linear-gradient(180deg, light-dark(#fffaf6, #151c21) 0, var(--bg) 18rem),
    var(--bg);
  color: var(--ink);
  letter-spacing: 0;
}

button,
input,
select,
textarea {
  border-radius: 8px;
}

button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[role="button"]:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

.shell {
  width: min(1720px, calc(100% - 28px));
  padding: 16px 0 34px;
}

.appLayout {
  grid-template-columns: var(--sidebar-rail-width, 70px) minmax(0, 1fr);
  gap: 14px;
}

.appLayout.sidebarHover,
.appLayout:not(.sidebarCollapsed) {
  grid-template-columns: minmax(244px, 270px) minmax(0, 1fr);
}

.topbar {
  min-height: 78px;
  margin-bottom: 14px;
  padding: 11px 14px;
  border: 1px solid rgba(16, 36, 51, 0.1);
  border-top: 3px solid var(--orange);
  border-radius: 8px;
  background: light-dark(rgba(255, 255, 255, 0.97), rgba(17, 24, 29, 0.97));
  box-shadow: var(--shadow-tight);
}

.brand {
  gap: 11px;
}

.brandMark {
  width: 54px;
  height: 54px;
  border-color: rgba(255, 117, 31, 0.24);
  border-radius: 8px;
  background: light-dark(#fff, #11181d);
}

.brandMark img {
  width: 42px;
  height: 42px;
}

.brandText h1,
.topbar h1 {
  color: var(--navy);
  font-size: clamp(20px, 1.9vw, 27px);
  font-weight: 880;
  line-height: 1.08;
  letter-spacing: 0;
}

.brandSignature,
.eyebrow {
  letter-spacing: 0;
}

.brandSignature {
  color: var(--teal-dark);
  font-size: 14px;
  font-weight: 800;
}

.eyebrow,
.sidebarTitle,
.filterLabel,
.kpi span,
.configStatusPill,
.commercialBreakdownCard > span,
.ceoBreakdownCard > span {
  letter-spacing: 0;
}

.eyebrow,
.sidebarTitle {
  color: var(--orange-dark);
}

.topbarMeta {
  gap: 8px;
}

.topbarMeta span,
.topbarUser,
.topbarAvatar,
.portalMessagesButton,
.portalStatusBadge,
.topbarAuthActions button,
.topbarAuthActions a {
  border-color: rgba(16, 36, 51, 0.1);
  border-radius: 8px;
  background: light-dark(#fff, #11181d);
  color: var(--teal-dark);
  box-shadow: none;
}

.topbarAvatar {
  border-radius: 999px;
}

.topbarMeta .topbarAvatar span {
  border: 0;
  background: transparent;
  color: inherit;
  box-shadow: none;
}

.portalMessagesButton,
.topbarUser,
.topbarAvatar {
  min-height: 38px;
}

.portalMessagesButton.hasUnread,
.portalStatusBadge.statusAttention,
.topbarAuthActions button:last-child,
.topbarAuthActions a:last-child {
  border-color: rgba(249, 115, 22, 0.24);
  background: var(--soft-orange);
  color: var(--orange-dark);
}

.portalMessagesPopover,
.topbarAccountMenu,
.portalStatusPopover {
  border-color: rgba(255, 117, 31, 0.22);
  border-radius: 8px;
  background: light-dark(#fff, #11181d);
  box-shadow: 0 18px 44px rgba(16, 36, 51, 0.16);
}

.sidebar {
  padding: 10px 8px;
  border: 1px solid rgba(16, 36, 51, 0.1);
  border-radius: 8px;
  background: light-dark(rgba(255, 255, 255, 0.96), rgba(17, 24, 29, 0.96));
  box-shadow: var(--shadow-tight);
}

.sidebarToggle,
.appLayout.sidebarCollapsed:not(.sidebarHover) .sidebarToggle,
.appLayout.sidebarHover .sidebarToggle,
.appLayout:not(.sidebarCollapsed) .sidebarToggle {
  border-radius: 8px;
  background: var(--orange);
}

.sidebarToggle:hover {
  background: var(--orange-dark);
}

.navItem:not([hidden]),
.appLayout.sidebarHover .navItem:not([hidden]),
.appLayout:not(.sidebarCollapsed) .navItem:not([hidden]),
.appLayout.sidebarCollapsed:not(.sidebarHover) .navItem:not([hidden]) {
  border-color: transparent;
  border-radius: 8px;
  background: transparent;
  color: var(--menu-icon-ink);
  font-weight: 780;
  box-shadow: none;
}

.navItem:hover:not([hidden]),
.navGroup.isOpen > .navItem,
.appLayout.sidebarHover .navItem:hover:not([hidden]),
.appLayout:not(.sidebarCollapsed) .navItem:hover:not([hidden]) {
  border-color: var(--menu-hover-border);
  background: var(--menu-hover-bg);
  color: var(--orange-dark);
}

.navItem.active:not([hidden]),
.navGroup:has(.navSubItem.active) > .navItem,
.appLayout.sidebarCollapsed:not(.sidebarHover) .navGroup.isOpen > .navItem,
.appLayout.sidebarHover .navItem.active:not([hidden]),
.appLayout:not(.sidebarCollapsed) .navItem.active:not([hidden]) {
  border-color: var(--menu-active-border);
  background: var(--menu-active-bg);
  color: var(--menu-active);
}

.navIcon {
  color: currentColor;
}

.navLabel {
  overflow: hidden;
  text-overflow: ellipsis;
}

.workspace {
  min-width: 0;
}

.panel,
.subpanel,
.moduleCard,
.metricGroup,
.ceoBreakdownCard,
.commercialBreakdownCard,
.commercialHealthPanel,
.commercialRulePanel,
.commercialEmptyCommission,
.knowledgeResultCard,
.knowledgeNeedDialog,
.emptyState {
  border: 1px solid rgba(255, 117, 31, 0.16);
  border-radius: 8px;
  background: light-dark(rgba(255, 255, 255, 0.97), rgba(17, 24, 29, 0.97));
  box-shadow: var(--shadow-tight);
}

.panel {
  padding: clamp(14px, 1.4vw, 20px);
  margin-bottom: 14px;
}

.panelHeader {
  align-items: flex-start;
  padding-bottom: 12px;
  margin-bottom: 14px;
  border-bottom: 1px solid var(--line);
}

.panelHeader h2,
.subpanel h3,
.subpanelTitleRow h3,
.knowledgeSearchCenter h3 {
  color: var(--navy);
  letter-spacing: 0;
}

.panelHeader h2 {
  font-size: clamp(21px, 1.65vw, 28px);
  line-height: 1.12;
}

.sectionHint,
.miniNote,
.note,
.commercialSourceBar,
.knowledgeSearchCenter > p {
  color: var(--muted);
}

.configStatusPill,
.statusPill,
.commercialStatusBadge,
.knowledgeCardCode,
.knowledgeResultsCount {
  min-height: 26px;
  border: 1px solid rgba(255, 117, 31, 0.24);
  border-radius: 999px;
  background: var(--soft-orange);
  color: var(--orange-dark);
  font-size: 11px;
  font-weight: 850;
}

.configStatusPill.success,
.statusPill.success,
.commercialStatusBadge.positive {
  border-color: light-dark(rgba(17, 132, 91, 0.2), rgba(67, 168, 125, 0.2));
  background: light-dark(rgba(17, 132, 91, 0.09), rgba(67, 168, 125, 0.09));
  color: var(--green);
}

.configStatusPill.warning,
.statusPill.warning,
.warningNote,
.commercialStatusBadge.warning {
  border-color: rgba(249, 115, 22, 0.25);
  background: var(--soft-orange);
  color: var(--orange-dark);
}

.filterSummary,
.dreTop,
.knowledgeSearchHero,
.knowledgeConsultHeroCard {
  border: 1px solid rgba(255, 117, 31, 0.16);
  border-radius: 8px;
  background: linear-gradient(180deg, light-dark(#fff, #11181d), var(--surface-alt));
  box-shadow: none;
}

.filterSummary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  min-height: 54px;
  padding: 9px 10px;
}

.smartFilter .filterSummary,
.filterShell.smartFilter .filterSummary,
.filterShell.filterShellActive.smartFilter .filterSummary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  max-width: none;
  min-width: 0;
  margin: 0;
  transform: none;
}

.filterShell,
.filterShell.smartFilter {
  display: block;
  width: 100%;
  margin-bottom: 14px;
}

.filterSummary > div,
.filterShell.smartFilter .filterSummary > div {
  display: flex;
  align-items: center;
  flex: 1 1 auto;
  flex-wrap: wrap;
  gap: 6px 10px;
  min-width: 0;
  width: auto;
  height: auto;
  position: static;
  clip: auto;
  overflow: visible;
  order: 0;
}

.smartFilter .filterSummary > div,
.filterShell.filterShellActive.smartFilter .filterSummary > div {
  display: flex;
  position: static;
  flex: 1 1 auto;
  width: auto;
  height: auto;
  min-width: 0;
  clip: auto;
  overflow: visible;
}

.filterSummary button,
.filterShell.smartFilter .filterSummary button {
  flex: 0 0 auto;
  order: 1;
}

.filterSummary span,
.filterSummary small,
.filterLabel {
  color: var(--muted);
}

.filterSummary strong {
  color: var(--navy);
}

.filterSummary button,
.filterActions button:first-child,
.panelActions button,
button[type="submit"] {
  border-color: var(--orange);
  background: var(--orange);
  color: #fff;
}

.filterSummary button:hover,
.filterActions button:first-child:hover,
.panelActions button:hover,
button[type="submit"]:hover {
  border-color: var(--orange-dark);
  background: var(--orange-dark);
}

.tinyFilter {
  border-color: light-dark(rgba(17, 106, 123, 0.16), rgba(81, 159, 177, 0.16));
  border-radius: 8px;
  box-shadow: 0 18px 44px rgba(16, 36, 51, 0.16);
}

.filterTab.active {
  color: var(--orange-dark);
  border-bottom-color: var(--orange);
}

.filterChips button,
.filterDateNav button,
.ghostButton,
.filterActions .ghostButton {
  border-color: var(--line);
  background: light-dark(#fff, #11181d);
  color: var(--orange-dark);
}

.filterChips button.active {
  border-color: rgba(255, 117, 31, 0.32);
  background: var(--soft-orange);
  color: var(--orange-dark);
}

.subTabs,
.localTabs,
.commercialTabs,
.knowledgePanel .localTabs {
  gap: 6px;
  padding: 4px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: light-dark(#fff, #11181d);
}

.subTab,
.filterTab,
.knowledgePanel .subTab {
  border-radius: 7px;
  color: var(--muted);
  font-weight: 800;
}

.subTab:hover,
.knowledgePanel .subTab:hover {
  background: var(--surface-alt);
  color: var(--orange-dark);
}

.subTab.active,
.knowledgePanel .subTab.active,
.knowledgePanel .subTab[data-local-tab="lista"].active {
  border-color: rgba(255, 117, 31, 0.26);
  background: var(--soft-orange);
  color: var(--orange-dark);
  box-shadow: none;
}

.financeKpis,
.olistDreKpis,
.qualityKpis,
.ceoBreakdownCards,
.commercialBreakdownCards,
.dashboardGrid,
.commercialGrid {
  gap: 12px;
}

.ceoKpis.financeKpis,
.ceoPanel .ceoKpis,
.commercialPanel .commercialKpis {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.panel .financeKpis:not(.ceoKpis),
#dreTesteView .financeKpis,
#estoqueView .financeKpis,
#planoContasView .financeKpis,
#lucroLiquidoView .financeKpis,
#balanceteView .financeKpis {
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.ceoBreakdownCards,
.commercialPanel .commercialBreakdownCards {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.kpi,
.ceoKpis .kpi,
.dreMetricGroups .kpi,
.commissionHeaderKpis .kpi,
.commercialPanel .commercialKpis .kpi {
  min-width: 0;
  display: grid;
  align-content: start;
  gap: 7px;
  min-height: 96px;
  padding: 14px 16px;
  border: 1px solid rgba(255, 117, 31, 0.16);
  border-radius: 8px;
  background: linear-gradient(180deg, light-dark(#fff, #11181d), var(--surface-alt));
  box-shadow: none;
}

.kpi::before {
  background: var(--orange);
}

.kpi span,
.ceoKpis .kpi span,
.commercialPanel .commercialKpis .kpi span {
  display: block;
  color: var(--muted);
  font-weight: 820;
  line-height: 1.2;
}

.kpi strong,
.ceoPanel .ceoKpis .kpi strong,
.ceoKpis .kpi strong,
.dreMetricGroups .kpi strong,
.commissionHeaderKpis .kpi strong,
.commercialPanel .commercialKpis .kpi strong {
  display: block;
  color: var(--teal-dark);
  letter-spacing: 0;
  line-height: 1.1;
}

.kpi small,
.ceoKpis .kpi small,
.commercialPanel .commercialKpis .kpi small {
  color: light-dark(rgba(96, 113, 125, 0.86), rgba(159, 177, 190, 0.86));
}

.kpi.positive strong,
.positive strong {
  color: var(--green);
}

.kpi.negative strong,
.negative strong {
  color: var(--red);
}

.kpi.warning,
.auditCard.warning,
.commercialPanel .commercialHealthItem.warning {
  border-color: rgba(249, 115, 22, 0.24);
  background: linear-gradient(180deg, light-dark(#fff, #11181d), var(--soft-orange));
}

.tableWrap {
  border: 1px solid rgba(255, 117, 31, 0.14);
  border-radius: 8px;
  background: light-dark(#fff, #11181d);
  box-shadow: none;
}

.tableWrap table,
table {
  border-collapse: separate;
  border-spacing: 0;
}

.tableWrap th,
table th {
  border-bottom: 1px solid var(--line);
  background: var(--surface-alt);
  color: var(--muted);
  font-size: 11px;
  font-weight: 850;
  letter-spacing: 0;
  text-transform: uppercase;
}

.tableWrap td,
table td {
  border-bottom: 1px solid light-dark(rgba(220, 230, 231, 0.78), rgba(45, 52, 58, 0.78));
  color: var(--ink);
}

.tableWrap tr:hover td,
table tbody tr:hover td {
  background: light-dark(#f7fbfb, #161d22);
}

.note,
.emptyState,
.knowledgeEmptyState,
.knowledgeNoResults,
.knowledgeNeedsEmpty {
  border: 1px solid rgba(255, 117, 31, 0.14);
  border-radius: 8px;
  background: light-dark(#fff, #11181d);
}

input,
select,
textarea,
.knowledgeNeedGrid input,
.knowledgeNeedGrid select,
.knowledgeNeedGrid textarea,
.knowledgeFilters input,
.knowledgeFilters select {
  border-color: var(--line);
  background: light-dark(#fff, #11181d);
  color: var(--ink);
}

input:focus,
select:focus,
textarea:focus,
.knowledgeNeedGrid input:focus,
.knowledgeNeedGrid select:focus,
.knowledgeNeedGrid textarea:focus,
.knowledgeFilters input:focus,
.knowledgeFilters select:focus {
  border-color: var(--orange);
  box-shadow: var(--focus-ring);
  outline: none;
}

.knowledgePanel,
.commercialPanel,
.ceoPanel {
  background: light-dark(rgba(255, 255, 255, 0.97), rgba(17, 24, 29, 0.97));
}

.knowledgePanel .knowledgePanelStack > :first-child {
  border: 1px solid rgba(255, 117, 31, 0.16);
  border-radius: 8px;
  background:
    linear-gradient(180deg, light-dark(rgba(255, 255, 255, 0.98), rgba(17, 24, 29, 0.98)), var(--surface-alt));
  box-shadow: var(--shadow-tight);
}

.knowledgePanel .MuiPaper-root,
.knowledgePanel .MuiCard-root {
  border-color: rgba(255, 117, 31, 0.16);
  border-radius: 8px;
  background-color: light-dark(#fff, #11181d);
  background-image: none;
  box-shadow: var(--shadow-tight);
}

.knowledgePanel .MuiCard-root > .MuiBox-root:first-child,
.knowledgePanel .MuiCard-root [class*="MuiCardHeader-root"],
.knowledgePanel .MuiCard-root [class*="MuiCardContent-root"]:first-child {
  background:
    linear-gradient(180deg, light-dark(rgba(255, 255, 255, 0.98), rgba(17, 24, 29, 0.98)), var(--surface-alt));
}

.knowledgeConsultHeroCard {
  overflow: hidden;
}

.knowledgeIntroArt {
  background:
    linear-gradient(135deg, rgba(255, 117, 31, 0.18), light-dark(rgba(40, 119, 141, 0.07), rgba(83, 158, 181, 0.07))),
    light-dark(#fff, #11181d);
}

.knowledgeSearchCenter .knowledgeSearchHero input,
.knowledgeSearchHero input {
  border-radius: 8px;
}

.knowledgeResultCard,
.knowledgeDetailGrid section,
.knowledgeNeedDetailPanel,
.knowledgeManagementSection {
  border-color: rgba(255, 117, 31, 0.16);
  border-radius: 8px;
  background: light-dark(#fff, #11181d);
}

.commercialPanel .commercialProgressTrack span {
  background: linear-gradient(90deg, var(--orange), var(--orange-dark));
}

.portalMetricCard {
  border-radius: 8px;
}

@media (max-width: 1200px) {
  .ceoKpis.financeKpis,
  .ceoPanel .ceoKpis,
  .commercialPanel .commercialKpis {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .ceoBreakdownCards,
  .commercialPanel .commercialBreakdownCards {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 900px) {
  .shell {
    width: min(100% - 20px, 760px);
    padding-top: 10px;
  }

  .topbar {
    align-items: flex-start;
    flex-direction: column;
    min-height: 0;
  }

  .topbarMeta {
    justify-content: flex-start;
    width: 100%;
  }

  .appLayout,
  .appLayout.sidebarHover,
  .appLayout:not(.sidebarCollapsed) {
    grid-template-columns: 1fr;
    width: 100%;
    max-width: 100%;
    overflow: hidden;
  }

  .appLayout > div,
  .workspace {
    min-width: 0;
    width: 100%;
    max-width: 100%;
  }

  .sidebar {
    position: relative;
    top: auto;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    overflow-x: auto;
    overflow-y: hidden;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px;
  }

  .sidebarBlock {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: max-content;
    flex: 0 0 auto;
  }

  .panel,
  .subpanel,
  .filterShell,
  .filterSummary,
  .tableWrap {
    max-width: 100%;
  }

  .sidebarTitle,
  .appLayout.sidebarCollapsed:not(.sidebarHover) .sidebarTitle,
  .appLayout.sidebarHover .sidebarTitle,
  .appLayout:not(.sidebarCollapsed) .sidebarTitle {
    display: none;
  }

  .navChildren,
  .appLayout.sidebarCollapsed:not(.sidebarHover) .navChildren,
  .appLayout.sidebarHover .navChildren,
  .appLayout:not(.sidebarCollapsed) .navChildren {
    display: none;
  }

  .sidebarToggle,
  .appLayout.sidebarCollapsed:not(.sidebarHover) .sidebarToggle,
  .appLayout.sidebarHover .sidebarToggle,
  .appLayout:not(.sidebarCollapsed) .sidebarToggle,
  .appLayout.sidebarCollapsed:not(.sidebarHover) .navItem:not([hidden]),
  .appLayout.sidebarHover .navItem:not([hidden]),
  .appLayout:not(.sidebarCollapsed) .navItem:not([hidden]) {
    width: 48px;
    min-width: 48px;
    max-width: 48px;
    height: 44px;
    min-height: 44px;
    margin: 0;
    padding: 0;
    justify-content: center;
  }

  .appLayout.sidebarHover .navItem .navLabel,
  .appLayout:not(.sidebarCollapsed) .navItem .navLabel {
    display: none;
  }

  .panelHeader,
  .subpanelTitleRow,
  .commercialPanel .commercialSourceBar {
    align-items: flex-start;
    flex-direction: column;
  }

  .financeKpis,
  .olistDreKpis,
  .qualityKpis,
  .ceoBreakdownCards,
  .commercialBreakdownCards,
  .dashboardGrid,
  .commercialGrid {
    grid-template-columns: 1fr;
  }

  .panel,
  .subpanel {
    padding: 13px;
  }
}

@media (max-width: 560px) {
  .ceoKpis.financeKpis,
  .ceoPanel .ceoKpis,
  .commercialPanel .commercialKpis,
  .panel .financeKpis:not(.ceoKpis),
  #dreTesteView .financeKpis,
  #estoqueView .financeKpis,
  #planoContasView .financeKpis,
  #lucroLiquidoView .financeKpis,
  #balanceteView .financeKpis {
    grid-template-columns: 1fr;
  }

  .brandText h1,
  .topbar h1 {
    font-size: 20px;
  }

  .brandSignature {
    font-size: 13px;
  }

  .filterSummary {
    align-items: flex-start;
    flex-direction: column;
  }

  .filterSummary button,
  .panelActions,
  .panelActions button,
  .filterActions,
  .filterActions button {
    width: 100%;
  }

  .filterRange {
    grid-template-columns: 1fr;
  }

  .subTabs,
  .localTabs {
    overflow-x: auto;
    flex-wrap: nowrap;
  }

  .subTab {
    white-space: nowrap;
  }
}

/* VISUAL-UNIFICATION-002: balanced executive brand pass. */
.kpi strong,
.ceoKpis .kpi strong,
.dreMetricGroups .kpi strong,
.commissionHeaderKpis .kpi strong,
.commercialPanel .commercialKpis .kpi strong,
.ceoBreakdownRow b,
.ceoBreakdownRow strong,
.commercialBreakdownRow b,
.tableWrap td strong {
  color: var(--teal-dark);
}

@media (max-width: 720px) {
  body .shell .workspace .filterSummary {
    display: grid;
    grid-template-columns: 1fr;
    grid-auto-rows: auto;
    align-items: start;
    gap: 10px;
    min-height: 0;
    height: auto;
    overflow: visible;
  }

  body .shell .workspace .filterSummary > div,
  body .shell .workspace .filterSummary > p,
  body .shell .workspace .filterSummary > span {
    min-width: 0;
    width: 100%;
  }

  body .shell .workspace .filterSummary button,
  body .shell .workspace .filterSummary .filterActions,
  body .shell .workspace .filterSummary .filterActions button {
    position: static;
    width: 100%;
    max-width: 100%;
    justify-content: center;
  }
}

/* VISUAL-UNIFICATION-004: modern view using the current portal symbol. */
:root {
  --modern-bg: light-dark(#f3f5f4, #1c2328);
  --modern-panel: light-dark(#ffffff, #11181d);
  --modern-panel-alt: light-dark(#f8fbfb, #161d22);
  --modern-line: rgba(16, 36, 51, 0.11);
  --modern-line-strong: light-dark(rgba(40, 119, 141, 0.22), rgba(83, 158, 181, 0.22));
  --modern-shadow: 0 16px 36px rgba(16, 36, 51, 0.08);
  --modern-shadow-tight: 0 8px 22px rgba(16, 36, 51, 0.06);
}

body {
  background:
    radial-gradient(circle at 18px 18px, rgba(255, 117, 31, 0.08), transparent 280px),
    linear-gradient(180deg, light-dark(#fbfaf7, #161d22) 0, var(--modern-bg) 320px),
    var(--modern-bg);
}

.shell {
  width: min(1740px, calc(100% - 24px));
}

.topbar {
  min-height: 76px;
  padding: 12px 16px;
  border: 1px solid var(--modern-line);
  border-top: 3px solid var(--orange);
  background:
    linear-gradient(135deg, light-dark(rgba(255, 255, 255, 0.98), rgba(17, 24, 29, 0.98)), light-dark(rgba(248, 251, 251, 0.96), rgba(22, 29, 34, 0.96)));
  box-shadow: var(--modern-shadow-tight);
}

.brand {
  gap: 12px;
}

.brandMark,
.brandMark:has(img[src*="simbolo-3d-curitiba"]) {
  width: 58px;
  height: 58px;
  flex: 0 0 58px;
  padding: 7px;
  border: 1px solid rgba(255, 117, 31, 0.18);
  border-radius: 16px;
  background:
    linear-gradient(180deg, light-dark(#ffffff, #11181d), light-dark(#fff8f3, #171e23));
  box-shadow: 0 10px 22px rgba(255, 117, 31, 0.10);
}

.brandMark img,
.brandMark:has(img[src*="simbolo-3d-curitiba"]) img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.brandText h1,
.topbar h1 {
  font-size: clamp(21px, 1.7vw, 28px);
}

.brandSignature {
  color: var(--teal-dark);
}

.topbarMeta span,
.topbarUser,
.portalMessagesButton,
.portalStatusBadge,
.topbarAuthActions button,
.topbarAuthActions a {
  min-height: 38px;
  border-color: var(--modern-line);
  border-radius: 10px;
  background: light-dark(rgba(255, 255, 255, 0.9), rgba(17, 24, 29, 0.9));
}

.sidebar {
  border-color: var(--modern-line);
  background:
    linear-gradient(180deg, light-dark(rgba(255, 255, 255, 0.98), rgba(17, 24, 29, 0.98)), light-dark(rgba(248, 251, 251, 0.96), rgba(22, 29, 34, 0.96)));
  box-shadow: var(--modern-shadow-tight);
}

.navItem:not([hidden]),
.navSubItem:not([hidden]) {
  min-height: 42px;
}

.navItem.active:not([hidden]),
.navGroup:has(.navSubItem.active) > .navItem,
.subTab.active,
.knowledgePanel .subTab.active {
  border-color: rgba(255, 117, 31, 0.24);
  background: light-dark(#fff4eb, #1a2126);
  color: var(--orange-dark);
}

.workspace {
  min-width: 0;
}

.panel,
.subpanel,
.moduleCard,
.metricGroup,
.ceoBreakdownCard,
.commercialBreakdownCard,
.knowledgePanel .MuiPaper-root,
.knowledgePanel .MuiCard-root {
  border-color: var(--modern-line);
  background: var(--modern-panel);
  box-shadow: var(--modern-shadow-tight);
}

.panel {
  padding: 18px;
}

.panelHeader {
  align-items: flex-start;
  gap: 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(16, 36, 51, 0.08);
}

.panelHeader h2,
.panelHeader h3,
.ceoPanel h2,
.commercialPanel h2,
.knowledgePanel h2 {
  color: var(--navy);
}

.sectionHint,
.panelHeader p {
  color: light-dark(rgba(96, 113, 125, 0.92), rgba(159, 177, 190, 0.92));
}

.filterSummary,
.filterShell {
  border-color: var(--modern-line);
  background:
    linear-gradient(180deg, light-dark(rgba(255, 255, 255, 0.96), rgba(17, 24, 29, 0.96)), light-dark(rgba(248, 251, 251, 0.92), rgba(22, 29, 34, 0.92)));
  box-shadow: none;
}

.subTabs,
.localTabs {
  gap: 6px;
  padding: 6px;
  border: 1px solid var(--modern-line);
  border-radius: 10px;
  background: light-dark(#fff, #11181d);
}

.subTab,
.localTab {
  min-height: 34px;
  border-radius: 8px;
}

.kpi,
.ceoHero > div,
.financeKpis .kpi,
.qualityKpis .kpi,
.olistDreKpis .kpi,
.stockKpis .kpi {
  position: relative;
  overflow: hidden;
  min-height: 116px;
  padding: 16px;
  border: 1px solid var(--modern-line);
  background:
    linear-gradient(180deg, light-dark(#ffffff, #11181d), light-dark(#f8fbfb, #161d22));
  box-shadow: 0 8px 18px rgba(16, 36, 51, 0.045);
}

.kpi::before,
.ceoHero > div::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  background: linear-gradient(180deg, var(--orange), var(--teal));
  opacity: 0.9;
}

.kpi span,
.commercialBreakdownCard > span,
.ceoBreakdownCard > span {
  color: light-dark(rgba(96, 113, 125, 0.94), rgba(159, 177, 190, 0.94));
  font-size: 11px;
  font-weight: 820;
  text-transform: uppercase;
}

.kpi strong,
.ceoKpis .kpi strong,
.dreMetricGroups .kpi strong,
.commissionHeaderKpis .kpi strong,
.commercialPanel .commercialKpis .kpi strong,
.ceoBreakdownRow b,
.ceoBreakdownRow strong,
.commercialBreakdownRow b,
.commercialBreakdownRow strong,
.tableWrap td strong {
  color: var(--teal-dark);
}

.ceoBreakdownCard,
.commercialBreakdownCard {
  padding: 16px;
  background:
    linear-gradient(180deg, light-dark(#ffffff, #11181d), var(--modern-panel-alt));
}

.ceoBreakdownRow,
.commercialBreakdownRow {
  min-height: 27px;
}

.tableWrap {
  border-color: var(--modern-line);
  background: light-dark(#fff, #11181d);
  box-shadow: var(--modern-shadow-tight);
}

.tableWrap th {
  background: light-dark(#f6f9f9, #181f24);
  color: light-dark(rgba(20, 33, 43, 0.78), rgba(220, 237, 251, 0.78));
  font-weight: 850;
}

.tableWrap tr:hover td {
  background: light-dark(#fbfdfd, #141b20);
}

.knowledgeIntroArt,
.knowledgeConsultHeroCard,
.commercialPanel .commercialHealthPanel,
.commercialPanel .commercialRulePanel,
.commercialPanel .commercialEmptyCommission {
  border-color: var(--modern-line);
  background:
    linear-gradient(135deg, rgba(255, 117, 31, 0.09), light-dark(rgba(40, 119, 141, 0.08), rgba(83, 158, 181, 0.08))),
    light-dark(#fff, #11181d);
}

@media (max-width: 720px) {
  .shell {
    width: min(100% - 18px, 100%);
  }

  .topbar {
    gap: 12px;
    padding: 12px;
  }

  .brandMark,
  .brandMark:has(img[src*="simbolo-3d-curitiba"]) {
    width: 54px;
    height: 54px;
    flex-basis: 54px;
    border-radius: 14px;
  }

  .brandText h1,
  .topbar h1 {
    font-size: 20px;
  }

  .panel {
    padding: 14px;
  }

  .filterSummary,
  .filterShell {
    align-items: stretch;
    grid-template-columns: 1fr;
  }

  .filterSummary {
    display: grid;
    gap: 8px;
  }

  .filterSummary > *,
  .filterSummary p,
  .filterSummary span {
    min-width: 0;
    max-width: 100%;
  }

  .filterSummary button,
  .filterActions,
  .filterActions button {
    width: 100%;
    justify-content: center;
  }
}

.navItem.active:not([hidden]),
.navGroup:has(.navSubItem.active) > .navItem,
.subTab.active,
.knowledgePanel .subTab.active {
  color: var(--orange-dark);
}

/* VISUAL-UNIFICATION-003: restrained orange accent pass. */
:root {
  --menu-active-bg: light-dark(#fff3ea, #1b2227);
  --menu-active-border: rgba(255, 117, 31, 0.22);
  --menu-hover-border: rgba(255, 117, 31, 0.16);
}

.topbar,
.sidebar,
.panel,
.subpanel,
.moduleCard,
.metricGroup,
.ceoBreakdownCard,
.commercialBreakdownCard,
.filterShell,
.filterSummary,
.tableWrap,
.portalMetricCard,
.knowledgePanel .MuiPaper-root,
.knowledgePanel .MuiCard-root,
.knowledgeResultCard,
.knowledgeDetailGrid section,
.knowledgeNeedDetailPanel,
.knowledgeManagementSection {
  border-color: rgba(16, 36, 51, 0.1);
}

.topbar {
  border-top-color: var(--orange);
}

.kpi,
.ceoHero > div,
.netProfitHero,
.qualityKpis .kpi,
.financeKpis .kpi,
.olistDreKpis .kpi,
.stockKpis .kpi {
  border-color: rgba(16, 36, 51, 0.1);
  background: light-dark(#fff, #11181d);
}

.kpi.warning,
.auditCard.warning,
.commercialPanel .commercialHealthItem.warning {
  border-color: rgba(255, 117, 31, 0.18);
  background: linear-gradient(180deg, light-dark(#fff, #11181d), light-dark(#fff8f3, #171e23));
}

.eyebrow,
.sidebarTitle,
.filterLabel,
.kpi span,
.commercialBreakdownCard > span,
.ceoBreakdownCard > span {
  color: var(--teal-dark);
}

.topbarMeta span,
.portalMessagesButton,
.portalStatusBadge,
.topbarAuthActions button,
.topbarAuthActions a {
  border-color: rgba(16, 36, 51, 0.1);
  color: var(--teal-dark);
}

.portalMessagesButton.hasUnread,
.portalStatusBadge.statusAttention,
.topbarAuthActions button:last-child,
.topbarAuthActions a:last-child {
  border-color: rgba(255, 117, 31, 0.2);
  background: light-dark(#fff8f3, #171e23);
  color: var(--orange-dark);
}

.kpi strong,
.ceoKpis .kpi strong,
.dreMetricGroups .kpi strong,
.commissionHeaderKpis .kpi strong,
.commercialPanel .commercialKpis .kpi strong,
.ceoBreakdownRow b,
.ceoBreakdownRow strong,
.commercialBreakdownRow b,
.commercialBreakdownRow strong,
.tableWrap td strong {
  color: var(--teal-dark);
}

/* VISUAL-UNIFICATION-005: final mobile information-preserving layout guard. */
@media (max-width: 720px) {
  body .shell .workspace .filterSummary {
    display: grid;
    grid-template-columns: 1fr;
    grid-auto-rows: auto;
    align-items: start;
    gap: 10px;
    min-height: 0;
    height: auto;
    overflow: visible;
  }

  body .shell .workspace .filterSummary > div,
  body .shell .workspace .filterSummary > p,
  body .shell .workspace .filterSummary > span {
    min-width: 0;
    width: 100%;
  }

  body .shell .workspace .filterSummary button,
  body .shell .workspace .filterSummary .filterActions,
  body .shell .workspace .filterSummary .filterActions button {
    position: static;
    width: 100%;
    max-width: 100%;
    justify-content: center;
  }
}

/* VISUAL-UNIFICATION-006: smart filter mobile wrapping. */
@media (max-width: 720px) {
  .appView .filterShell.smartFilter .filterSummary,
  .filterShell.filterShellActive.smartFilter .filterSummary {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 8px;
    width: 100%;
    height: auto;
    min-height: 0;
    overflow: visible;
  }

  .appView .filterShell.smartFilter .filterSummary > div,
  .filterShell.filterShellActive.smartFilter .filterSummary > div {
    flex: 1 1 100%;
    min-width: 0;
    width: 100%;
  }

  .appView .filterShell.smartFilter .filterSummary button,
  .filterShell.filterShellActive.smartFilter .filterSummary button {
    flex: 1 1 100%;
    width: 100%;
    max-width: 100%;
    justify-content: center;
  }
}

/* COMERCIAL-REPLAN-003: ajustes finais por cima das regras globais. */
#vendedoresView.commercialPanel .commercialTabs {
  border-bottom: 0;
}

#vendedoresView.commercialPanel .commercialTabs .subTab {
  border-bottom: 0;
}

#vendedoresView.commercialPanel .commercialSellerKpis,
#vendedoresView.commercialPanel .commercialProductKpis {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 12px;
}

#vendedoresView.commercialPanel .commercialSellerKpis .kpi,
#vendedoresView.commercialPanel .commercialProductKpis .kpi {
  min-width: 0;
  min-height: 76px;
  padding: 12px 14px;
}

#vendedoresView.commercialPanel .commercialSellerKpis.scopedSellerKpis {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

#vendedoresView.commercialPanel .commercialSellerKpis.scopedSellerKpis .kpi {
  min-height: 116px;
  padding: 14px 16px;
}

#vendedoresView.commercialPanel .commercialSellerKpis .kpi strong,
#vendedoresView.commercialPanel .commercialProductKpis .kpi strong {
  font-size: 20px;
  white-space: nowrap;
}

#vendedoresView.commercialPanel .commercialSellerKpis.scopedSellerKpis .kpi strong {
  min-width: 0;
  white-space: normal;
}

#vendedoresView.commercialPanel .commercialSellerKpis.scopedSellerKpis .kpi .kpiValue {
  display: block;
  width: 100%;
  min-width: 0;
  margin-top: 10px;
}

#vendedoresView.commercialPanel .sellerKpiStack {
  display: grid;
  gap: 8px;
  min-width: 0;
  width: 100%;
  margin: 0;
  color: inherit;
  font-size: inherit;
  font-weight: inherit;
  line-height: 1.2;
  text-transform: none;
}

#vendedoresView.commercialPanel .sellerKpiStack > span {
  display: grid;
  grid-template-columns: minmax(72px, max-content) minmax(0, 1fr);
  align-items: baseline;
  gap: 6px 10px;
  min-width: 0;
  padding: 0 0 8px;
  border-bottom: 1px solid rgba(24, 34, 43, 0.08);
  color: inherit;
  font-size: inherit;
  font-weight: inherit;
  line-height: 1.2;
  text-transform: none;
}

#vendedoresView.commercialPanel .sellerKpiStack > span:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}

#vendedoresView.commercialPanel .sellerKpiStack b {
  display: block;
  min-width: 0;
  overflow-wrap: anywhere;
  color: var(--teal);
  font-size: 17px;
  font-weight: 900;
  line-height: 1.12;
  text-align: left;
  text-transform: none;
}

#vendedoresView.commercialPanel .sellerKpiStack em {
  display: block;
  min-width: 0;
  color: light-dark(rgba(91, 111, 128, 0.84), rgba(158, 179, 198, 0.84));
  font-size: 10px;
  font-style: normal;
  font-weight: 850;
  line-height: 1.1;
  text-align: left;
  text-transform: uppercase;
}

#vendedoresView.commercialPanel .kpi.positive strong {
  color: var(--green);
}

#vendedoresView.commercialPanel .kpi.warning strong {
  color: var(--orange-dark);
}

#vendedoresView.commercialPanel .kpi.negative strong {
  color: var(--red);
}

#vendedoresView.commercialPanel .commercialSellerLayout {
  grid-template-columns: minmax(0, 1fr) 260px;
  gap: 12px;
}

#vendedoresView.commercialPanel .sellerFallbackLayout {
  grid-template-columns: minmax(0, 1fr) 300px;
  margin-bottom: 12px;
}

#vendedoresView.commercialPanel .sellerFallbackKpis .kpi strong {
  overflow-wrap: anywhere;
}

#vendedoresView.commercialPanel .commercialSellerFallbackPanel {
  min-height: 100%;
}

#vendedoresView.commercialPanel .sellerFallbackSteps {
  margin-top: 14px;
}

#vendedoresView.commercialPanel .sellerFallbackSteps > div {
  border-color: light-dark(rgba(40, 119, 141, 0.14), rgba(83, 158, 181, 0.14));
  background: light-dark(rgba(255, 255, 255, 0.92), rgba(17, 24, 29, 0.92));
}

#vendedoresView.commercialPanel .commercialSellerLayout table {
  width: 100%;
}

#vendedoresView.commercialPanel .commercialSellerLayout th,
#vendedoresView.commercialPanel .commercialSellerLayout td,
#vendedoresView.commercialPanel .commercialProductLayout th,
#vendedoresView.commercialPanel .commercialProductLayout td {
  white-space: nowrap;
}

#vendedoresView.commercialPanel .commercialSellerTablePanel,
#vendedoresView.commercialPanel .sellerSummaryPanel {
  padding: 16px;
}

#vendedoresView.commercialPanel .sellerStatusLegend {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
  margin: 8px 0 12px;
  color: light-dark(rgba(24, 34, 43, 0.74), rgba(222, 236, 249, 0.74));
  font-size: 12px;
  font-weight: 800;
}

#vendedoresView.commercialPanel .sellerStatusLegend span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

#vendedoresView.commercialPanel .sellerStatusLegend i {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: var(--teal);
}

#vendedoresView.commercialPanel .sellerStatusLegend i.ok {
  background: var(--green);
}

#vendedoresView.commercialPanel .sellerStatusLegend i.warning {
  background: var(--orange);
}

#vendedoresView.commercialPanel .sellerStatusLegend i.danger {
  background: var(--red);
}

#vendedoresView.commercialPanel .sellerCommissionSheetWrap {
  border: 1px solid rgba(24, 34, 43, 0.08);
  border-radius: 8px;
  background: light-dark(#fff, #11181d);
  overflow-x: auto;
}

#vendedoresView.commercialPanel .sellerCommissionSheet {
  width: 100%;
  min-width: 1080px;
  table-layout: fixed;
}

#vendedoresView.commercialPanel .sellerCommissionSheet th {
  color: light-dark(rgba(24, 34, 43, 0.76), rgba(222, 236, 249, 0.76));
  padding: 10px 9px;
  font-size: 9px;
  line-height: 1.15;
  white-space: nowrap;
  text-transform: uppercase;
}

#vendedoresView.commercialPanel .sellerCommissionSheet td {
  padding: 10px 9px;
  vertical-align: middle;
  font-size: 11px;
  white-space: normal;
}

#vendedoresView.commercialPanel .sellerCommissionSheet th:nth-child(1),
#vendedoresView.commercialPanel .sellerCommissionSheet td:nth-child(1) {
  width: 13%;
  text-align: left;
}

#vendedoresView.commercialPanel .sellerCommissionSheet th:nth-child(2),
#vendedoresView.commercialPanel .sellerCommissionSheet td:nth-child(2) {
  width: 11.5%;
}

#vendedoresView.commercialPanel .sellerCommissionSheet th:nth-child(3),
#vendedoresView.commercialPanel .sellerCommissionSheet td:nth-child(3) {
  width: 15.5%;
}

#vendedoresView.commercialPanel .sellerCommissionSheet th:nth-child(4),
#vendedoresView.commercialPanel .sellerCommissionSheet td:nth-child(4) {
  width: 17%;
}

#vendedoresView.commercialPanel .sellerCommissionSheet th:nth-child(5),
#vendedoresView.commercialPanel .sellerCommissionSheet td:nth-child(5) {
  width: 13%;
}

#vendedoresView.commercialPanel .sellerCommissionSheet th:nth-child(6),
#vendedoresView.commercialPanel .sellerCommissionSheet td:nth-child(6) {
  width: 4.5%;
}

#vendedoresView.commercialPanel .sellerCommissionSheet th:nth-child(7),
#vendedoresView.commercialPanel .sellerCommissionSheet td:nth-child(7) {
  width: 5.5%;
}

#vendedoresView.commercialPanel .sellerCommissionSheet th:nth-child(8),
#vendedoresView.commercialPanel .sellerCommissionSheet td:nth-child(8) {
  width: 8%;
}

#vendedoresView.commercialPanel .sellerCommissionSheet th:nth-child(9),
#vendedoresView.commercialPanel .sellerCommissionSheet td:nth-child(9) {
  width: 7%;
}

#vendedoresView.commercialPanel .sellerCommissionSheet th:nth-child(10),
#vendedoresView.commercialPanel .sellerCommissionSheet td:nth-child(10) {
  width: 5%;
}

#vendedoresView.commercialPanel .sellerCommissionSheet th:nth-child(4),
#vendedoresView.commercialPanel .sellerCommissionSheet td:nth-child(4) {
  padding-right: 18px;
}

#vendedoresView.commercialPanel .sellerCommissionSheet th:nth-child(5),
#vendedoresView.commercialPanel .sellerCommissionSheet td:nth-child(5) {
  padding-left: 22px;
}

#vendedoresView.commercialPanel .sellerCommissionSheet th:nth-child(n+2):nth-child(-n+8),
#vendedoresView.commercialPanel .sellerCommissionSheet td:nth-child(n+2):nth-child(-n+8) {
  text-align: right;
}

#vendedoresView.commercialPanel .sellerCommissionSheet th:nth-child(9),
#vendedoresView.commercialPanel .sellerCommissionSheet td:nth-child(9),
#vendedoresView.commercialPanel .sellerCommissionSheet th:nth-child(10),
#vendedoresView.commercialPanel .sellerCommissionSheet td:nth-child(10) {
  text-align: center;
}

#vendedoresView.commercialPanel .sellerNameCell {
  min-width: 0;
  overflow-wrap: anywhere;
}

#vendedoresView.commercialPanel .sellerNameCell strong {
  line-height: 1.2;
}

#vendedoresView.commercialPanel .sellerMetricCell {
  display: grid;
  justify-items: end;
  gap: 3px;
  min-width: 0;
}

#vendedoresView.commercialPanel .sellerMetricCell strong {
  font-size: 11px;
  line-height: 1.15;
  white-space: nowrap;
}

#vendedoresView.commercialPanel .sellerMetricCell small {
  color: light-dark(rgba(91, 111, 128, 0.84), rgba(158, 179, 198, 0.84));
  font-size: 10px;
  font-weight: 800;
  line-height: 1.1;
  white-space: nowrap;
}

#vendedoresView.commercialPanel .sellerRevenueCell {
  gap: 5px;
}

#vendedoresView.commercialPanel .sellerRevenueCell strong {
  color: var(--teal);
  font-size: 16px;
}

#vendedoresView.commercialPanel .sellerRevenueCell small {
  color: light-dark(rgba(91, 111, 128, 0.72), rgba(158, 179, 198, 0.72));
  font-size: 12px;
  font-weight: 850;
  line-height: 1.12;
}

#vendedoresView.commercialPanel .sellerMetricCell .commercialMiniProgress {
  width: 100%;
  max-width: 112px;
  height: 7px;
}

#vendedoresView.commercialPanel .sellerMetricCell .commercialTierProgress {
  max-width: 150px;
  height: 16px;
}

#vendedoresView.commercialPanel .sellerMetricCell .commercialTierProgressLabel {
  font-size: 9px;
}

#vendedoresView.commercialPanel .sellerCommissionSheet th:nth-child(5) .commercialTierProgress,
#vendedoresView.commercialPanel .sellerCommissionSheet td:nth-child(5) .commercialTierProgress {
  max-width: 140px;
}

#vendedoresView.commercialPanel .sellerCommissionStatus {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  padding: 0 8px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 850;
  line-height: 1;
  white-space: nowrap;
}

#vendedoresView.commercialPanel .sellerCommissionStatus.positive {
  background: light-dark(rgba(20, 122, 83, 0.1), rgba(76, 167, 125, 0.1));
  color: light-dark(#147a53, #4ca77d);
}

#vendedoresView.commercialPanel .sellerCommissionStatus.warning {
  background: rgba(255, 176, 0, 0.14);
  color: light-dark(#a85b00, #cc7c35);
}

#vendedoresView.commercialPanel .sellerCommissionStatus.negative {
  background: light-dark(rgba(214, 48, 49, 0.1), rgba(245, 80, 75, 0.1));
  color: light-dark(#c62828, #f2554d);
}

#vendedoresView.commercialPanel .sellerPendingCell {
  text-align: center;
  white-space: nowrap;
}

#vendedoresView.commercialPanel .sellerPendingCell > span {
  justify-content: center;
}

.sellerPendingDialog {
  display: grid;
  gap: 14px;
}

.sellerPendingDialog > div {
  display: grid;
  gap: 5px;
}

.sellerPendingDialog span {
  color: light-dark(rgba(91, 111, 128, 0.84), rgba(158, 179, 198, 0.84));
  font-size: 11px;
  font-weight: 850;
  line-height: 1.1;
  text-transform: uppercase;
}

.sellerPendingDialog strong {
  color: var(--teal);
  font-size: 16px;
  line-height: 1.2;
}

.sellerPendingDialogStatus {
  justify-self: start;
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 0 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 850;
  line-height: 1;
}

.sellerPendingDialogStatus.positive {
  background: light-dark(rgba(20, 122, 83, 0.1), rgba(76, 167, 125, 0.1));
  color: light-dark(#147a53, #4ca77d);
}

.sellerPendingDialogStatus.warning {
  background: rgba(255, 176, 0, 0.14);
  color: light-dark(#a85b00, #cc7c35);
}

.sellerPendingDialogStatus.negative {
  background: light-dark(rgba(214, 48, 49, 0.1), rgba(245, 80, 75, 0.1));
  color: light-dark(#c62828, #f2554d);
}

.sellerPendingDialogMessage p {
  margin: 0;
  color: light-dark(#18222b, #deecf9);
  font-size: 14px;
  font-weight: 760;
  line-height: 1.45;
}

#vendedoresView.commercialPanel .commercialSellerAside {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}

#vendedoresView.commercialPanel .sellerSummaryPanel h3 {
  margin-bottom: 12px;
}

#vendedoresView.commercialPanel .sellerSummaryList,
#vendedoresView.commercialPanel .sellerPendingList {
  display: grid;
  gap: 10px;
}

#vendedoresView.commercialPanel .sellerSummaryList > div,
#vendedoresView.commercialPanel .sellerPendingList > div {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  min-width: 0;
}

#vendedoresView.commercialPanel .sellerSummaryList strong,
#vendedoresView.commercialPanel .sellerPendingList strong {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 999px;
  background: light-dark(rgba(40, 119, 141, 0.1), rgba(83, 158, 181, 0.1));
  color: var(--teal);
  font-size: 13px;
  font-weight: 900;
}

#vendedoresView.commercialPanel .sellerSummaryList span,
#vendedoresView.commercialPanel .sellerPendingList span {
  color: light-dark(rgba(24, 34, 43, 0.78), rgba(222, 236, 249, 0.78));
  font-size: 13px;
  font-weight: 760;
  line-height: 1.25;
}

#vendedoresView.commercialPanel .sellerImprovementList {
  display: grid;
  gap: 10px;
}

#vendedoresView.commercialPanel .sellerImprovementList > div {
  display: grid;
  gap: 4px;
  min-width: 0;
  padding: 10px;
  border: 1px solid rgba(24, 34, 43, 0.08);
  border-radius: 8px;
  background: light-dark(rgba(245, 250, 251, 0.72), rgba(23, 30, 35, 0.72));
}

#vendedoresView.commercialPanel .sellerImprovementList strong {
  color: var(--teal);
  font-size: 15px;
  font-weight: 900;
  line-height: 1.15;
  overflow-wrap: anywhere;
}

#vendedoresView.commercialPanel .sellerImprovementList span {
  color: light-dark(rgba(24, 34, 43, 0.86), rgba(222, 236, 249, 0.86));
  font-size: 12px;
  font-weight: 850;
  line-height: 1.2;
}

#vendedoresView.commercialPanel .sellerImprovementList small {
  color: light-dark(rgba(91, 111, 128, 0.86), rgba(158, 179, 198, 0.86));
  font-size: 11px;
  font-weight: 720;
  line-height: 1.35;
}

#vendedoresView.commercialPanel .sellerImprovementList .positive strong {
  color: light-dark(#147a53, #4ca77d);
}

#vendedoresView.commercialPanel .sellerImprovementList .warning strong {
  color: light-dark(#a85b00, #cc7c35);
}

#vendedoresView.commercialPanel .sellerImprovementList .negative strong {
  color: light-dark(#c62828, #f2554d);
}

#vendedoresView.commercialPanel .sellerTopSellersList {
  display: grid;
  gap: 10px;
}

#vendedoresView.commercialPanel .sellerTopSellersList > div {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  gap: 2px 10px;
  align-items: center;
  min-height: 36px;
  min-width: 0;
}

#vendedoresView.commercialPanel .sellerTopSellersList strong {
  grid-row: span 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 999px;
  background: light-dark(rgba(40, 119, 141, 0.1), rgba(83, 158, 181, 0.1));
  color: var(--teal);
  font-size: 13px;
  font-weight: 900;
}

#vendedoresView.commercialPanel .sellerTopSellersList .sellerRankingMedal {
  position: relative;
  border: 1px solid rgba(24, 34, 43, 0.08);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.74);
}

#vendedoresView.commercialPanel .sellerTopSellersList .sellerRankingMedal::before {
  content: "";
  position: absolute;
  top: 5px;
  width: 8px;
  height: 3px;
  border-radius: 999px;
  background: light-dark(rgba(255, 255, 255, 0.55), rgba(17, 24, 29, 0.55));
}

#vendedoresView.commercialPanel .sellerTopSellersList .sellerRankingMedal span {
  color: inherit;
  font-size: 12px;
  font-weight: 950;
  line-height: 1;
}

#vendedoresView.commercialPanel .sellerTopSellersList .sellerRankingMedal.gold {
  background: linear-gradient(180deg, light-dark(#ffe08a, #392c01), #d99b16);
  color: light-dark(#5f3b00, #b28a58);
}

#vendedoresView.commercialPanel .sellerTopSellersList .sellerRankingMedal.silver {
  background: linear-gradient(180deg, light-dark(#edf2f7, #1f262b), light-dark(#aab6c4, #5c6773));
  color: light-dark(#344455, #c4d7ec);
}

#vendedoresView.commercialPanel .sellerTopSellersList .sellerRankingMedal.bronze {
  background: linear-gradient(180deg, #f0b17d, light-dark(#b8642b, #cf7942));
  color: light-dark(#4f250f, #b7856d);
}

#vendedoresView.commercialPanel .sellerTopSellersList > div > span {
  min-width: 0;
  overflow: hidden;
  color: light-dark(rgba(24, 34, 43, 0.84), rgba(222, 236, 249, 0.84));
  font-size: 12px;
  font-weight: 850;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#vendedoresView.commercialPanel .sellerTopSellersList small {
  color: var(--teal);
  font-size: 12px;
  font-weight: 900;
  line-height: 1.15;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Top 3 do mes embaixo da planilha (visao da equipe) */
#vendedoresView.commercialPanel .commercialSellerLayout.sellerTeamLayout {
  grid-template-columns: minmax(0, 1fr);
}

#vendedoresView.commercialPanel .sellerPodiumList {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-top: 12px;
}

#vendedoresView.commercialPanel .sellerPodiumCard {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  min-width: 0;
  padding: 14px;
  border: 1px solid rgba(24, 34, 43, 0.08);
  border-radius: 10px;
  background: light-dark(rgba(245, 250, 251, 0.72), rgba(23, 30, 35, 0.72));
}

#vendedoresView.commercialPanel .sellerPodiumCard.gold {
  border-color: rgba(217, 155, 22, 0.45);
  background: light-dark(rgba(255, 224, 138, 0.18), rgba(57, 44, 1, 0.18));
}

#vendedoresView.commercialPanel .sellerPodiumCard .sellerRankingMedal {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 999px;
  border: 1px solid rgba(24, 34, 43, 0.08);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.74);
  font-size: 16px;
  font-weight: 950;
}

#vendedoresView.commercialPanel .sellerPodiumCard .sellerRankingMedal.gold {
  background: linear-gradient(180deg, light-dark(#ffe08a, #392c01), #d99b16);
  color: light-dark(#5f3b00, #b28a58);
}

#vendedoresView.commercialPanel .sellerPodiumCard .sellerRankingMedal.silver {
  background: linear-gradient(180deg, light-dark(#edf2f7, #1f262b), light-dark(#aab6c4, #5c6773));
  color: light-dark(#344455, #c4d7ec);
}

#vendedoresView.commercialPanel .sellerPodiumCard .sellerRankingMedal.bronze {
  background: linear-gradient(180deg, #f0b17d, light-dark(#b8642b, #cf7942));
  color: light-dark(#4f250f, #b7856d);
}

#vendedoresView.commercialPanel .sellerPodiumInfo {
  display: grid;
  gap: 3px;
  min-width: 0;
}

#vendedoresView.commercialPanel .sellerPodiumName {
  overflow: hidden;
  color: light-dark(#18222b, #deecf9);
  font-size: 14px;
  font-weight: 900;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#vendedoresView.commercialPanel .sellerPodiumInfo b {
  color: var(--teal);
  font-size: 18px;
  font-weight: 900;
}

#vendedoresView.commercialPanel .sellerPodiumInfo small {
  color: light-dark(rgba(91, 111, 128, 0.9), rgba(158, 179, 198, 0.9));
  font-size: 11px;
  font-weight: 720;
  line-height: 1.35;
}

@media (max-width: 900px) {
  #vendedoresView.commercialPanel .sellerPodiumList {
    grid-template-columns: 1fr;
  }
}

/* Resumo da equipe em grafico (acima da planilha) */
#vendedoresView.commercialPanel .sellerTeamChart {
  --chart-sold: var(--teal, light-dark(#0f7f86, #42a2a9));
  --chart-target: rgba(24, 34, 43, 0.1);
  --chart-commission: light-dark(#147a53, #4ca77d);
  --chart-discount: light-dark(#c46a00, #d3781f);
  display: grid;
  gap: 16px;
  margin-bottom: 14px;
}

#vendedoresView.commercialPanel .sellerTeamChartHead {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  gap: 18px;
  align-items: stretch;
}

#vendedoresView.commercialPanel .sellerTeamChartMain {
  display: grid;
  gap: 8px;
  align-content: center;
  min-width: 0;
}

#vendedoresView.commercialPanel .sellerTeamChartLabel,
#vendedoresView.commercialPanel .sellerTeamStat span {
  color: light-dark(rgba(91, 111, 128, 0.95), rgba(158, 179, 198, 0.95));
  font-size: 11px;
  font-weight: 850;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

#vendedoresView.commercialPanel .sellerTeamChartValues {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px;
}

#vendedoresView.commercialPanel .sellerTeamChartValues strong {
  color: light-dark(#18222b, #deecf9);
  font-size: 28px;
  font-weight: 950;
  line-height: 1.1;
}

#vendedoresView.commercialPanel .sellerTeamChartValues span {
  color: light-dark(rgba(91, 111, 128, 0.95), rgba(158, 179, 198, 0.95));
  font-size: 14px;
  font-weight: 750;
}

#vendedoresView.commercialPanel .sellerTeamChartValues b {
  padding: 2px 8px;
  border-radius: 999px;
  background: light-dark(rgba(15, 127, 134, 0.12), rgba(66, 162, 169, 0.12));
  color: var(--chart-sold);
  font-size: 13px;
  font-weight: 900;
}

#vendedoresView.commercialPanel .sellerTeamChartValues b.hit {
  background: light-dark(rgba(20, 122, 83, 0.12), rgba(76, 167, 125, 0.12));
  color: var(--chart-commission);
}

#vendedoresView.commercialPanel .sellerTeamChartMain > small {
  color: light-dark(rgba(91, 111, 128, 0.9), rgba(158, 179, 198, 0.9));
  font-size: 11px;
  font-weight: 700;
}

#vendedoresView.commercialPanel .sellerTeamChartBar {
  position: relative;
  height: 14px;
  min-width: 0;
  border-radius: 999px;
  background: rgba(24, 34, 43, 0.04);
  overflow: hidden;
}

#vendedoresView.commercialPanel .sellerTeamChartBar.big {
  height: 18px;
  background: var(--chart-target);
}

#vendedoresView.commercialPanel .sellerTeamChartBar s,
#vendedoresView.commercialPanel .sellerTeamChartBar i {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  border-radius: 999px;
}

#vendedoresView.commercialPanel .sellerTeamChartBar s {
  background: var(--chart-target);
  box-shadow: inset -2px 0 0 rgba(24, 34, 43, 0.35);
}

#vendedoresView.commercialPanel .sellerTeamChartBar i {
  background: linear-gradient(90deg, light-dark(rgba(15, 127, 134, 0.75), rgba(66, 162, 169, 0.75)), var(--chart-sold));
}

#vendedoresView.commercialPanel .sellerTeamChartBar i.hit {
  background: linear-gradient(90deg, light-dark(rgba(20, 122, 83, 0.75), rgba(76, 167, 125, 0.75)), var(--chart-commission));
}

#vendedoresView.commercialPanel .sellerTeamChartBar em {
  position: absolute;
  top: -2px;
  bottom: -2px;
  width: 2px;
  background: light-dark(rgba(255, 255, 255, 0.85), rgba(17, 24, 29, 0.85));
}

#vendedoresView.commercialPanel .sellerTeamChartStats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

#vendedoresView.commercialPanel .sellerTeamStat {
  display: grid;
  align-content: start;
  gap: 4px;
  min-width: 0;
  padding: 12px 14px;
  border: 1px solid rgba(24, 34, 43, 0.08);
  border-left-width: 4px;
  border-radius: 10px;
  background: light-dark(rgba(245, 250, 251, 0.72), rgba(23, 30, 35, 0.72));
}

#vendedoresView.commercialPanel .sellerTeamStat.commission { border-left-color: var(--chart-commission); }
#vendedoresView.commercialPanel .sellerTeamStat.discount { border-left-color: var(--chart-discount); }
#vendedoresView.commercialPanel .sellerTeamStat.sellers { border-left-color: light-dark(#344455, #c4d7ec); }

#vendedoresView.commercialPanel .sellerTeamStat strong {
  overflow: hidden;
  color: light-dark(#18222b, #deecf9);
  font-size: 19px;
  font-weight: 950;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#vendedoresView.commercialPanel .sellerTeamStat.commission strong { color: var(--chart-commission); }
#vendedoresView.commercialPanel .sellerTeamStat.discount strong { color: var(--chart-discount); }

#vendedoresView.commercialPanel .sellerTeamStat small {
  color: light-dark(rgba(91, 111, 128, 0.9), rgba(158, 179, 198, 0.9));
  font-size: 11px;
  font-weight: 700;
}

#vendedoresView.commercialPanel .sellerTeamStatus {
  display: flex;
  gap: 2px;
  height: 6px;
  border-radius: 999px;
  background: rgba(24, 34, 43, 0.06);
  overflow: hidden;
}

#vendedoresView.commercialPanel .sellerTeamStatus i.full { background: var(--chart-commission); }
#vendedoresView.commercialPanel .sellerTeamStatus i.reduced { background: #d99b16; }
#vendedoresView.commercialPanel .sellerTeamStatus i.blocked { background: light-dark(#c0392b, #e9604e); }

#vendedoresView.commercialPanel .sellerTeamChartLegend {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  padding-top: 12px;
  border-top: 1px solid rgba(24, 34, 43, 0.07);
  color: light-dark(rgba(91, 111, 128, 0.95), rgba(158, 179, 198, 0.95));
  font-size: 11px;
  font-weight: 800;
}

#vendedoresView.commercialPanel .sellerTeamChartLegend span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

#vendedoresView.commercialPanel .sellerTeamChartLegend i {
  width: 12px;
  height: 8px;
  border-radius: 999px;
}

#vendedoresView.commercialPanel .sellerTeamChartLegend i.sold { background: var(--chart-sold); }
#vendedoresView.commercialPanel .sellerTeamChartLegend i.target { background: rgba(24, 34, 43, 0.18); box-shadow: inset -2px 0 0 rgba(24, 34, 43, 0.4); }
#vendedoresView.commercialPanel .sellerTeamChartLegend i.commission { background: var(--chart-commission); }
#vendedoresView.commercialPanel .sellerTeamChartLegend i.discount { background: var(--chart-discount); }

#vendedoresView.commercialPanel .sellerTeamChartRows {
  display: grid;
  gap: 10px;
}

#vendedoresView.commercialPanel .sellerTeamChartRow {
  display: grid;
  grid-template-columns: minmax(90px, 160px) minmax(0, 1fr) 150px 110px;
  align-items: center;
  gap: 14px;
}

#vendedoresView.commercialPanel .sellerTeamChartName {
  overflow: hidden;
  color: light-dark(#18222b, #deecf9);
  font-size: 13px;
  font-weight: 850;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#vendedoresView.commercialPanel .sellerTeamChartNumbers,
#vendedoresView.commercialPanel .sellerTeamChartMoney {
  display: grid;
  gap: 1px;
  min-width: 0;
  text-align: right;
}

#vendedoresView.commercialPanel .sellerTeamChartNumbers b {
  color: light-dark(#18222b, #deecf9);
  font-size: 13px;
  font-weight: 900;
}

#vendedoresView.commercialPanel .sellerTeamChartNumbers small,
#vendedoresView.commercialPanel .sellerTeamChartMoney small {
  color: light-dark(rgba(91, 111, 128, 0.9), rgba(158, 179, 198, 0.9));
  font-size: 11px;
  font-weight: 700;
}

#vendedoresView.commercialPanel .sellerTeamChartMoney b.commission {
  color: var(--chart-commission);
  font-size: 13px;
  font-weight: 900;
}

#vendedoresView.commercialPanel .sellerTeamChartMoney small.discount {
  color: var(--chart-discount);
}

@media (max-width: 1100px) {
  #vendedoresView.commercialPanel .sellerTeamChartHead {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 700px) {
  #vendedoresView.commercialPanel .sellerTeamChartStats {
    grid-template-columns: 1fr;
  }

  #vendedoresView.commercialPanel .sellerTeamChartRow {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 4px 10px;
  }

  #vendedoresView.commercialPanel .sellerTeamChartBar:not(.big) {
    grid-column: 1 / -1;
    grid-row: 2;
  }

  #vendedoresView.commercialPanel .sellerTeamChartNumbers {
    grid-row: 3;
    text-align: left;
  }

  #vendedoresView.commercialPanel .sellerTeamChartMoney {
    grid-row: 3;
  }
}

#vendedoresView.commercialPanel .sellerSummaryList .positive strong {
  background: light-dark(rgba(20, 122, 83, 0.1), rgba(76, 167, 125, 0.1));
  color: light-dark(#147a53, #4ca77d);
}

#vendedoresView.commercialPanel .sellerSummaryList .warning strong {
  background: rgba(255, 176, 0, 0.14);
  color: light-dark(#a85b00, #cc7c35);
}

#vendedoresView.commercialPanel .sellerSummaryList .negative strong {
  background: light-dark(rgba(214, 48, 49, 0.1), rgba(245, 80, 75, 0.1));
  color: light-dark(#c62828, #f2554d);
}

@media (max-width: 1200px) {
  #vendedoresView.commercialPanel .commercialSellerKpis,
  #vendedoresView.commercialPanel .commercialProductKpis {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  #vendedoresView.commercialPanel .commercialSellerKpis.scopedSellerKpis {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  #vendedoresView.commercialPanel .commercialSellerLayout {
    grid-template-columns: 1fr;
  }

  #vendedoresView.commercialPanel .commercialSellerAside {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 760px) {
  #vendedoresView.commercialPanel .commercialSellerKpis.scopedSellerKpis {
    grid-template-columns: 1fr;
  }

  #vendedoresView.commercialPanel .sellerKpiStack > span {
    grid-template-columns: minmax(68px, max-content) minmax(0, 1fr);
    gap: 4px 8px;
  }
}

/* VIEWPORT-FILL-001: use the available desktop width and keep the sidebar monochrome. */
:root {
  --sidebar-icon-gray: light-dark(#7b858f, #929ba1);
  --menu-icon-ink: var(--sidebar-icon-gray);
  --menu-icon-muted: var(--sidebar-icon-gray);
  --menu-active: var(--sidebar-icon-gray);
  --menu-active-bg: light-dark(#f2f3f4, #1d2429);
  --menu-active-border: light-dark(rgba(95, 104, 115, 0.16), rgba(172, 182, 195, 0.16));
  --menu-hover-bg: light-dark(#f6f7f8, #192025);
  --menu-hover-border: light-dark(rgba(95, 104, 115, 0.1), rgba(172, 182, 195, 0.1));
  --menu-toggle-bg: light-dark(#f4f6f8, #1b2127);
}

.shell {
  width: calc(100% - 24px);
  max-width: none;
}

.sidebarTitle {
  color: light-dark(#7d8792, #8e98a4);
}

.sidebarToggle,
.appLayout.sidebarCollapsed:not(.sidebarHover) .sidebarToggle,
.appLayout.sidebarHover .sidebarToggle,
.appLayout:not(.sidebarCollapsed) .sidebarToggle {
  background: var(--menu-toggle-bg);
  color: var(--menu-active);
}

.sidebarToggle:hover {
  background: light-dark(#e9edf1, #242b30);
  color: var(--menu-active);
}

.navItem:not([hidden]),
.navSubItem:not([hidden]),
.appLayout.sidebarCollapsed:not(.sidebarHover) .navItem:not([hidden]),
.appLayout.sidebarHover .navItem:not([hidden]),
.appLayout:not(.sidebarCollapsed) .navItem:not([hidden]) {
  color: var(--menu-icon-ink);
}

.appLayout.sidebarCollapsed:not(.sidebarHover) .navItem:not([hidden]) {
  color: var(--menu-icon-muted);
}

.navItem:hover:not([hidden]),
.navGroup.isOpen > .navItem,
.appLayout.sidebarCollapsed:not(.sidebarHover) .navItem:hover:not([hidden]),
.appLayout.sidebarHover .navItem:hover:not([hidden]),
.appLayout:not(.sidebarCollapsed) .navItem:hover:not([hidden]) {
  border-color: var(--menu-hover-border);
  background: var(--menu-hover-bg);
  color: var(--menu-active);
}

.navItem.active:not([hidden]),
.navGroup:has(.navSubItem.active) > .navItem,
.appLayout.sidebarCollapsed:not(.sidebarHover) .navGroup.isOpen > .navItem,
.appLayout.sidebarCollapsed:not(.sidebarHover) .navItem.active,
.appLayout.sidebarCollapsed:not(.sidebarHover) .navGroup:has(.navSubItem.active) > .navItem,
.appLayout.sidebarHover .navItem.active:not([hidden]),
.appLayout:not(.sidebarCollapsed) .navItem.active:not([hidden]) {
  border-color: var(--menu-active-border);
  background: var(--menu-active-bg);
  color: var(--menu-active);
}

@media (max-width: 720px) {
  .shell {
    width: calc(100% - 18px);
  }
}

/* SIDEBAR-REFERENCE-001: stable monochrome MUI icon rail. */
:root {
  --sidebar-reference-ink: var(--sidebar-icon-gray);
  --sidebar-reference-muted: var(--sidebar-icon-gray);
  --sidebar-reference-button: light-dark(#f7f8fa, #181f24);
  --sidebar-reference-button-hover: light-dark(#eef1f4, #20272c);
  --sidebar-reference-active: light-dark(#f7f9fb, #181e23);
  --sidebar-reference-hover: light-dark(#fafbfc, #151c21);
  --sidebar-reference-line: light-dark(#e9eef2, #232a30);
}

.sidebar,
.appLayout.sidebarCollapsed:not(.sidebarHover) .sidebar,
.appLayout.sidebarHover .sidebar,
.appLayout:not(.sidebarCollapsed) .sidebar {
  background: light-dark(#fff, #11181d);
  border: 1px solid rgba(47, 55, 65, 0.07);
  box-shadow: 0 22px 52px rgba(47, 55, 65, 0.1);
}

.sidebarToggle,
.appLayout.sidebarCollapsed:not(.sidebarHover) .sidebarToggle,
.appLayout.sidebarHover .sidebarToggle,
.appLayout:not(.sidebarCollapsed) .sidebarToggle {
  background: var(--sidebar-reference-button);
  border-color: transparent;
  color: var(--sidebar-reference-ink);
  box-shadow: none;
}

.sidebarToggle:hover,
.appLayout.sidebarCollapsed:not(.sidebarHover) .sidebarToggle:hover,
.appLayout.sidebarHover .sidebarToggle:hover,
.appLayout:not(.sidebarCollapsed) .sidebarToggle:hover {
  background: var(--sidebar-reference-button-hover);
  color: var(--sidebar-reference-ink);
}

.sidebarToggleIcon,
.sidebarToggle .sidebarToggleIcon {
  display: block;
  width: 36px;
  height: 36px;
  font-size: 36px;
  color: currentColor;
}

.appLayout.sidebarCollapsed:not(.sidebarHover) .sidebarToggle,
.appLayout.sidebarCollapsed:not(.sidebarHover) .navItem:not(.navSubItem):not([hidden]) {
  width: 64px;
  min-width: 64px;
  max-width: 64px;
  min-height: 64px;
}

.navItem:not([hidden]),
.appLayout.sidebarCollapsed:not(.sidebarHover) .navItem:not([hidden]),
.appLayout.sidebarHover .navItem:not([hidden]),
.appLayout:not(.sidebarCollapsed) .navItem:not([hidden]) {
  color: var(--sidebar-reference-ink);
}

.navItem:not(.navSubItem) .navIcon,
.appLayout.sidebarCollapsed:not(.sidebarHover) .navItem:not(.navSubItem) .navIcon,
.appLayout.sidebarHover .navItem:not(.navSubItem) .navIcon,
.appLayout:not(.sidebarCollapsed) .navItem:not(.navSubItem) .navIcon {
  width: 36px;
  height: 36px;
  flex: 0 0 36px;
  font-size: 36px;
  color: currentColor;
}

.navItem:not(.navSubItem) .navIcon svg,
.appLayout.sidebarCollapsed:not(.sidebarHover) .navItem:not(.navSubItem) .navIcon svg,
.appLayout.sidebarHover .navItem:not(.navSubItem) .navIcon svg,
.appLayout:not(.sidebarCollapsed) .navItem:not(.navSubItem) .navIcon svg,
.sidebarToggleIcon {
  display: block;
  width: 1em;
  height: 1em;
  color: currentColor;
}

.navItem:hover:not([hidden]),
.navGroup.isOpen > .navItem,
.appLayout.sidebarCollapsed:not(.sidebarHover) .navItem:hover:not([hidden]),
.appLayout.sidebarHover .navItem:hover:not([hidden]),
.appLayout:not(.sidebarCollapsed) .navItem:hover:not([hidden]) {
  border-color: rgba(47, 55, 65, 0.08);
  background: var(--sidebar-reference-hover);
  color: var(--sidebar-reference-ink);
  box-shadow: none;
}

.navItem.active:not([hidden]),
.navGroup:has(.navSubItem.active) > .navItem,
.appLayout.sidebarCollapsed:not(.sidebarHover) .navGroup.isOpen > .navItem,
.appLayout.sidebarCollapsed:not(.sidebarHover) .navItem.active,
.appLayout.sidebarCollapsed:not(.sidebarHover) .navGroup:has(.navSubItem.active) > .navItem,
.appLayout.sidebarHover .navItem.active:not([hidden]),
.appLayout:not(.sidebarCollapsed) .navItem.active:not([hidden]) {
  border-color: rgba(47, 55, 65, 0.1);
  background: var(--sidebar-reference-active);
  color: var(--sidebar-reference-ink);
  box-shadow: none;
}

.appLayout.sidebarCollapsed:not(.sidebarHover) .navItem.active:not([hidden])::after,
.appLayout.sidebarCollapsed:not(.sidebarHover) .navGroup:has(.navSubItem.active) > .navItem::after,
.appLayout.sidebarCollapsed:not(.sidebarHover) .navGroup.isOpen > .navItem::after {
  left: -3px;
  width: 2px;
  height: 34px;
  background: var(--sidebar-reference-ink);
}

.appLayout.sidebarCollapsed:not(.sidebarHover) .sidebarBlock > .navItem:not(.navSubItem):not(:last-child),
.appLayout.sidebarCollapsed:not(.sidebarHover) .sidebarBlock > .navGroup:not(:last-child) {
  border-bottom: 0;
  border-radius: 12px;
  padding-bottom: 0;
  margin-bottom: 0;
}

.appLayout.sidebarHover .sidebarBlock > .navItem:not(.navSubItem):not(:last-child),
.appLayout.sidebarHover .sidebarBlock > .navGroup:not(:last-child),
.appLayout:not(.sidebarCollapsed) .sidebarBlock > .navItem:not(.navSubItem):not(:last-child),
.appLayout:not(.sidebarCollapsed) .sidebarBlock > .navGroup:not(:last-child) {
  border-bottom: 1px solid light-dark(rgba(237, 241, 244, 0.95), rgba(32, 39, 44, 0.95));
  padding-bottom: 9px;
  margin-bottom: 9px;
}

.navSubItem .navIcon {
  display: none;
}

.navSubItem::before,
.appLayout.sidebarHover .navSubItem::before,
.appLayout:not(.sidebarCollapsed) .navSubItem::before,
.appLayout.sidebarCollapsed:not(.sidebarHover) .navGroup.isOpen > .navChildren .navSubItem::before {
  background: currentColor;
  color: var(--sidebar-reference-muted);
}

.navSubItem.active::before,
.appLayout.sidebarHover .navSubItem.active::before,
.appLayout:not(.sidebarCollapsed) .navSubItem.active::before,
.appLayout.sidebarCollapsed:not(.sidebarHover) .navGroup.isOpen > .navChildren .navSubItem.active::before {
  background: var(--sidebar-reference-ink);
  color: var(--sidebar-reference-ink);
  opacity: 1;
}

/* SIDEBAR-REFERENCE-002: refined centered rail with lighter icon weight. */
:root {
  --sidebar-reference-control: 56px;
  --sidebar-reference-icon: 28px;
  --sidebar-reference-toggle-icon: 26px;
  --sidebar-reference-active: light-dark(#f3f6f8, #1b2227);
  --sidebar-reference-hover: light-dark(#fbfcfd, #141b20);
  --sidebar-reference-hover-border: rgba(47, 55, 65, 0.06);
  --sidebar-reference-active-border: rgba(47, 55, 65, 0.12);
}

.appLayout.sidebarCollapsed:not(.sidebarHover) .sidebar {
  padding-inline: 8px;
}

.appLayout.sidebarCollapsed:not(.sidebarHover) .sidebarBlock {
  display: grid;
  justify-items: center;
  gap: 8px;
}

.appLayout.sidebarCollapsed:not(.sidebarHover) .navGroup {
  display: grid;
  justify-items: center;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  margin-inline: auto;
}

.appLayout.sidebarCollapsed:not(.sidebarHover) .sidebarToggle,
.appLayout.sidebarCollapsed:not(.sidebarHover) .navItem:not(.navSubItem):not([hidden]) {
  display: grid;
  place-items: center;
  width: var(--sidebar-reference-control);
  min-width: var(--sidebar-reference-control);
  max-width: var(--sidebar-reference-control);
  height: var(--sidebar-reference-control);
  min-height: var(--sidebar-reference-control);
  margin-inline: auto;
  padding: 0;
  border-radius: 12px;
}

.appLayout.sidebarCollapsed:not(.sidebarHover) .sidebarToggleIcon {
  width: var(--sidebar-reference-toggle-icon);
  height: var(--sidebar-reference-toggle-icon);
  font-size: var(--sidebar-reference-toggle-icon);
}

.navItem:not(.navSubItem) .navIcon,
.appLayout.sidebarCollapsed:not(.sidebarHover) .navItem:not(.navSubItem) .navIcon,
.appLayout.sidebarHover .navItem:not(.navSubItem) .navIcon,
.appLayout:not(.sidebarCollapsed) .navItem:not(.navSubItem) .navIcon {
  width: var(--sidebar-reference-icon);
  height: var(--sidebar-reference-icon);
  flex: 0 0 var(--sidebar-reference-icon);
  font-size: var(--sidebar-reference-icon);
}

.navItem:not(.navSubItem) .navIcon svg,
.appLayout.sidebarCollapsed:not(.sidebarHover) .navItem:not(.navSubItem) .navIcon svg,
.appLayout.sidebarHover .navItem:not(.navSubItem) .navIcon svg,
.appLayout:not(.sidebarCollapsed) .navItem:not(.navSubItem) .navIcon svg,
.sidebarToggleIcon {
  stroke-width: 1.55;
}

.appLayout.sidebarCollapsed:not(.sidebarHover) .navItem:hover:not([hidden]),
.appLayout.sidebarCollapsed:not(.sidebarHover) .sidebarToggle:hover {
  border-color: var(--sidebar-reference-hover-border);
  background: var(--sidebar-reference-hover);
  color: var(--sidebar-reference-ink);
}

.appLayout.sidebarCollapsed:not(.sidebarHover) .navGroup:has(.navSubItem.active) > .navItem,
.appLayout.sidebarCollapsed:not(.sidebarHover) .navGroup.isOpen > .navItem {
  border-color: transparent;
  background: transparent;
  color: var(--sidebar-reference-muted);
}

.appLayout.sidebarCollapsed:not(.sidebarHover) .navItem.active:not([hidden]) {
  border-color: transparent;
  background: transparent;
  color: var(--sidebar-reference-muted);
}

.appLayout.sidebarCollapsed:not(.sidebarHover) .navGroup:has(.navSubItem.active) > .navItem::after,
.appLayout.sidebarCollapsed:not(.sidebarHover) .navGroup.isOpen > .navItem::after {
  content: none;
  display: none;
}

.appLayout.sidebarCollapsed:not(.sidebarHover) .navItem.active:not([hidden])::after {
  content: none;
  display: none;
}

.appLayout.sidebarHover .navGroup:has(.navSubItem.active) > .navItem,
.appLayout:not(.sidebarCollapsed) .navGroup:has(.navSubItem.active) > .navItem {
  border-color: var(--sidebar-reference-active-border);
  background: var(--sidebar-reference-active);
  color: var(--sidebar-reference-ink);
}

.navGroup > .navItem:hover:not([hidden]),
.appLayout.sidebarCollapsed:not(.sidebarHover) .navGroup > .navItem:hover:not([hidden]),
.appLayout.sidebarHover .navGroup > .navItem:hover:not([hidden]),
.appLayout:not(.sidebarCollapsed) .navGroup > .navItem:hover:not([hidden]),
.appLayout.sidebarCollapsed:not(.sidebarHover) .navItem:not(.navSubItem):hover:not([hidden]) {
  border-color: var(--sidebar-reference-hover-border);
  background: var(--sidebar-reference-hover);
  color: var(--sidebar-reference-ink);
  border-radius: 12px;
  box-shadow: none;
}

.appLayout.sidebarCollapsed:not(.sidebarHover) .navItem:not(.navSubItem):hover:not([hidden]),
.appLayout.sidebarCollapsed:not(.sidebarHover) .navGroup > .navItem:hover:not([hidden]) {
  display: grid;
  place-items: center;
  width: var(--sidebar-reference-control);
  min-width: var(--sidebar-reference-control);
  max-width: var(--sidebar-reference-control);
  height: var(--sidebar-reference-control);
  min-height: var(--sidebar-reference-control);
  margin-inline: auto;
  padding: 0;
  border-color: var(--sidebar-reference-hover-border);
  background: var(--sidebar-reference-hover);
  color: var(--sidebar-reference-ink);
  border-radius: 12px;
  box-shadow: none;
}

.navItem:not(.navSubItem):not([hidden]),
.navItem:not(.navSubItem):not([hidden]):hover,
.navItem:not(.navSubItem).active:not([hidden]),
.navGroup.isOpen > .navItem:not(.navSubItem),
.navGroup:has(.navSubItem.active) > .navItem:not(.navSubItem),
.appLayout.sidebarCollapsed:not(.sidebarHover) .navItem:not(.navSubItem):not([hidden]),
.appLayout.sidebarCollapsed:not(.sidebarHover) .navItem:not(.navSubItem):hover:not([hidden]),
.appLayout.sidebarCollapsed:not(.sidebarHover) .navItem:not(.navSubItem).active:not([hidden]),
.appLayout.sidebarCollapsed:not(.sidebarHover) .navGroup.isOpen > .navItem:not(.navSubItem),
.appLayout.sidebarCollapsed:not(.sidebarHover) .navGroup:has(.navSubItem.active) > .navItem:not(.navSubItem),
.appLayout.sidebarHover .navItem:not(.navSubItem):not([hidden]),
.appLayout.sidebarHover .navItem:not(.navSubItem):hover:not([hidden]),
.appLayout.sidebarHover .navItem:not(.navSubItem).active:not([hidden]),
.appLayout:not(.sidebarCollapsed) .navItem:not(.navSubItem):not([hidden]),
.appLayout:not(.sidebarCollapsed) .navItem:not(.navSubItem):hover:not([hidden]),
.appLayout:not(.sidebarCollapsed) .navItem:not(.navSubItem).active:not([hidden]) {
  color: var(--sidebar-icon-gray);
}

.navItem:not(.navSubItem) .navIcon,
.navItem:not(.navSubItem) .navIcon svg,
.navItem:not(.navSubItem)::before,
.sidebarToggleIcon,
.sidebarToggle .sidebarToggleIcon {
  color: var(--sidebar-icon-gray);
}

.sidebarToggle,
.appLayout.sidebarCollapsed:not(.sidebarHover) .sidebarToggle,
.appLayout.sidebarHover .sidebarToggle,
.appLayout:not(.sidebarCollapsed) .sidebarToggle {
  background: var(--orange);
  color: #fff;
}

.sidebarToggle:hover,
.appLayout.sidebarCollapsed:not(.sidebarHover) .sidebarToggle:hover,
.appLayout.sidebarHover .sidebarToggle:hover,
.appLayout:not(.sidebarCollapsed) .sidebarToggle:hover {
  background: var(--orange-dark);
  color: #fff;
}

.sidebarToggleIcon,
.sidebarToggle .sidebarToggleIcon {
  color: #fff;
}

@media (max-width: 1080px) {
  .appLayout.sidebarCollapsed:not(.sidebarHover),
  .appLayout.sidebarCollapsed:not(.sidebarHover):has(.sidebar:hover),
  .appLayout.sidebarHover,
  .appLayout:not(.sidebarCollapsed) {
    grid-template-columns: minmax(0, 1fr);
  }

  .sidebar,
  .appLayout.sidebarCollapsed:not(.sidebarHover) .sidebar,
  .appLayout.sidebarCollapsed:not(.sidebarHover) .sidebar:hover,
  .appLayout.sidebarCollapsed:not(.sidebarHover):has(.sidebar:hover) .sidebar,
  .appLayout.sidebarHover .sidebar,
  .appLayout:not(.sidebarCollapsed) .sidebar {
    width: 100%;
    min-width: 0;
    max-width: none;
  }
}

/* PRODUCTION-MOBILE-001: production/dashboard mobile reading layout. */
.executiveTableCards {
  display: none;
}

.executiveTableCard {
  display: grid;
  gap: 10px;
  min-width: 0;
  padding: 12px;
  border: 1px solid rgba(255, 117, 31, 0.16);
  border-radius: 8px;
  background: light-dark(#fff, #11181d);
}

.executiveTableCard > strong {
  min-width: 0;
  color: var(--navy);
  font-size: 13px;
  font-weight: 850;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.executiveTableCard dl {
  display: grid;
  gap: 8px;
  margin: 0;
}

.executiveTableCard dl > div {
  display: grid;
  grid-template-columns: minmax(82px, 0.45fr) minmax(0, 1fr);
  gap: 8px;
  align-items: start;
  min-width: 0;
}

.executiveTableCard dt,
.executiveTableCard dd {
  min-width: 0;
  margin: 0;
  line-height: 1.25;
}

.executiveTableCard dt {
  color: var(--muted);
  font-size: 10px;
  font-weight: 850;
  text-transform: uppercase;
}

.executiveTableCard dd {
  color: var(--teal-dark);
  font-size: 13px;
  font-weight: 850;
  text-align: right;
  overflow-wrap: anywhere;
}

.executiveTableCard.empty dd {
  color: var(--muted);
}

@media (max-width: 900px) {
  html,
  body,
  #root {
    max-width: 100%;
    overflow-x: hidden;
  }

  .shell {
    width: calc(100% - 16px);
    padding-top: 8px;
    padding-bottom: 22px;
  }

  .topbar {
    gap: 10px;
    padding: 10px;
  }

  .brand {
    width: 100%;
    min-width: 0;
  }

  .brandMark {
    width: 46px;
    height: 46px;
    flex: 0 0 46px;
  }

  .brandMark img {
    width: 36px;
    height: 36px;
  }

  .brandText,
  .brandText h1,
  .brandSignature {
    min-width: 0;
    overflow-wrap: anywhere;
  }

  .topbarMeta {
    display: flex;
    flex-wrap: nowrap;
    gap: 8px;
    min-width: 0;
    overflow: visible;
  }

  .portalMessagesWrap {
    flex: 0 0 auto;
  }

  .topbarAccount {
    min-width: 0;
    flex: 1 1 auto;
  }

  .topbarAvatar {
    flex: 0 0 52px;
    width: 52px;
    height: 52px;
  }

  .topbarUser {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    justify-content: center;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .portalMessagesPopover,
  .topbarAccountMenu {
    max-width: calc(100vw - 24px);
  }

  .appLayout,
  .appLayout.sidebarCollapsed:not(.sidebarHover),
  .appLayout.sidebarCollapsed:not(.sidebarHover):has(.sidebar:hover),
  .appLayout.sidebarHover,
  .appLayout:not(.sidebarCollapsed) {
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
    overflow: visible;
  }

  .appLayout > div,
  .workspace {
    width: 100%;
    min-width: 0;
    max-width: 100%;
  }

  .sidebar,
  .appLayout.sidebarCollapsed:not(.sidebarHover) .sidebar,
  .appLayout.sidebarCollapsed:not(.sidebarHover) .sidebar:hover,
  .appLayout.sidebarCollapsed:not(.sidebarHover):has(.sidebar:hover) .sidebar,
  .appLayout.sidebarHover .sidebar,
  .appLayout:not(.sidebarCollapsed) .sidebar {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    padding: 8px;
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-x: contain;
    scrollbar-width: thin;
  }

  .sidebarBlock,
  .appLayout.sidebarCollapsed:not(.sidebarHover) .sidebarBlock,
  .appLayout.sidebarHover .sidebarBlock,
  .appLayout:not(.sidebarCollapsed) .sidebarBlock {
    display: flex;
    align-items: center;
    justify-items: initial;
    gap: 8px;
    flex: 0 0 auto;
    min-width: max-content;
    width: auto;
  }

  .sidebarBlock > .navGroup,
  .appLayout.sidebarCollapsed:not(.sidebarHover) .navGroup,
  .appLayout.sidebarHover .navGroup,
  .appLayout:not(.sidebarCollapsed) .navGroup {
    display: flex;
    flex: 0 0 auto;
    width: auto;
    min-width: 0;
    margin: 0;
  }

  .sidebarTitle,
  .appLayout.sidebarCollapsed:not(.sidebarHover) .sidebarTitle,
  .appLayout.sidebarHover .sidebarTitle,
  .appLayout:not(.sidebarCollapsed) .sidebarTitle,
  .navChildren,
  .appLayout.sidebarCollapsed:not(.sidebarHover) .navChildren,
  .appLayout.sidebarHover .navChildren,
  .appLayout:not(.sidebarCollapsed) .navChildren,
  .navLabel,
  .appLayout.sidebarHover .navItem .navLabel,
  .appLayout:not(.sidebarCollapsed) .navItem .navLabel {
    display: none;
  }

  .navGroup.isOpen,
  .appLayout.sidebarCollapsed:not(.sidebarHover) .navGroup.isOpen,
  .appLayout.sidebarHover .navGroup.isOpen,
  .appLayout:not(.sidebarCollapsed) .navGroup.isOpen {
    align-items: center;
    gap: 6px;
  }

  .navGroup.isOpen > .navChildren,
  .appLayout.sidebarCollapsed:not(.sidebarHover) .navGroup.isOpen > .navChildren,
  .appLayout.sidebarHover .navGroup.isOpen > .navChildren,
  .appLayout:not(.sidebarCollapsed) .navGroup.isOpen > .navChildren {
    display: flex;
    align-items: center;
    gap: 6px;
    flex: 0 0 auto;
    min-width: max-content;
    margin: 0;
    padding: 0;
    border-left: 0;
  }

  .navGroup.isOpen > .navChildren .navSubItem:not([hidden]),
  .appLayout.sidebarCollapsed:not(.sidebarHover) .navGroup.isOpen > .navChildren .navSubItem:not([hidden]),
  .appLayout.sidebarHover .navGroup.isOpen > .navChildren .navSubItem:not([hidden]),
  .appLayout:not(.sidebarCollapsed) .navGroup.isOpen > .navChildren .navSubItem:not([hidden]) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: auto;
    min-width: max-content;
    max-width: none;
    height: 38px;
    min-height: 38px;
    margin: 0;
    padding: 0 10px;
    border-radius: 8px;
    white-space: nowrap;
  }

  .navGroup.isOpen > .navChildren .navSubItem .navLabel,
  .appLayout.sidebarCollapsed:not(.sidebarHover) .navGroup.isOpen > .navChildren .navSubItem .navLabel,
  .appLayout.sidebarHover .navGroup.isOpen > .navChildren .navSubItem .navLabel,
  .appLayout:not(.sidebarCollapsed) .navGroup.isOpen > .navChildren .navSubItem .navLabel {
    display: inline;
    overflow: visible;
    color: inherit;
    font-size: 11px;
    font-weight: 850;
    line-height: 1.1;
  }

  .sidebarToggle,
  .appLayout.sidebarCollapsed:not(.sidebarHover) .sidebarToggle,
  .appLayout.sidebarHover .sidebarToggle,
  .appLayout:not(.sidebarCollapsed) .sidebarToggle,
  .navItem:not(.navSubItem):not([hidden]),
  .appLayout.sidebarCollapsed:not(.sidebarHover) .navItem:not(.navSubItem):not([hidden]),
  .appLayout.sidebarHover .navItem:not(.navSubItem):not([hidden]),
  .appLayout:not(.sidebarCollapsed) .navItem:not(.navSubItem):not([hidden]) {
    display: grid;
    place-items: center;
    width: 50px;
    min-width: 50px;
    max-width: 50px;
    height: 46px;
    min-height: 46px;
    margin: 0;
    padding: 0;
    border-radius: 8px;
  }

  .navItem:not(.navSubItem).active:not([hidden]),
  .navGroup:has(.navSubItem.active) > .navItem:not(.navSubItem),
  .appLayout.sidebarCollapsed:not(.sidebarHover) .navItem:not(.navSubItem).active:not([hidden]),
  .appLayout.sidebarCollapsed:not(.sidebarHover) .navGroup:has(.navSubItem.active) > .navItem:not(.navSubItem),
  .appLayout.sidebarHover .navItem:not(.navSubItem).active:not([hidden]),
  .appLayout:not(.sidebarCollapsed) .navItem:not(.navSubItem).active:not([hidden]) {
    border-color: rgba(255, 117, 31, 0.28);
    background: var(--soft-orange);
    color: var(--orange-dark);
  }

  .navItem:not(.navSubItem).active:not([hidden]) .navIcon,
  .navItem:not(.navSubItem).active:not([hidden]) .navIcon svg,
  .navGroup:has(.navSubItem.active) > .navItem:not(.navSubItem) .navIcon,
  .navGroup:has(.navSubItem.active) > .navItem:not(.navSubItem) .navIcon svg {
    color: var(--orange-dark);
  }

  .ceoPanel {
    overflow: hidden;
  }

  .ceoPanel .panelHeader {
    gap: 8px;
    margin-bottom: 12px;
    padding-bottom: 10px;
  }

  .ceoPanel .panelActions,
  .ceoPanel .panelActions .configStatusPill {
    width: 100%;
  }

  .ceoPanel .panelActions .configStatusPill {
    justify-content: center;
  }

  .ceoPanel .sectionHint,
  .ceoPanel .note {
    line-height: 1.38;
  }

  .ceoPanel .financeKpis.ceoKpis,
  .ceoPanel .ceoKpis,
  .ceoPanel .ceoBreakdownCards,
  .ceoPanel .dashboardGrid {
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
  }

  .ceoPanel .kpi,
  .ceoPanel .ceoKpis .kpi,
  .ceoPanel .subpanel,
  .ceoPanel .ceoBreakdownCard {
    min-width: 0;
    padding: 12px;
  }

  .ceoPanel .kpi,
  .ceoPanel .ceoKpis .kpi {
    min-height: 0;
  }

  .ceoPanel .ceoKpis .kpi strong,
  .ceoPanel .kpi strong {
    font-size: 20px;
    line-height: 1.12;
    overflow-wrap: anywhere;
  }

  .ceoPanel .ceoKpis .kpi small,
  .ceoPanel .kpi small {
    line-height: 1.3;
  }

  .ceoBreakdownRow {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px;
  }

  .ceoBreakdownRow strong,
  .ceoBreakdownChildren span {
    min-width: 0;
    overflow-wrap: anywhere;
  }

  .executiveTableWrap {
    overflow: visible;
    border: 0;
    background: transparent;
  }

  .executiveTableWrap table {
    display: none;
  }

  .executiveTableCards {
    display: grid;
    gap: 8px;
  }
}

@media (max-width: 430px) {
  .shell {
    width: calc(100% - 12px);
  }

  .topbar {
    padding: 9px;
  }

  .brandMark {
    width: 42px;
    height: 42px;
    flex-basis: 42px;
  }

  .brandMark img {
    width: 32px;
    height: 32px;
  }

  .brandText h1,
  .topbar h1 {
    font-size: 19px;
  }

  .portalMessagesButton,
  .topbarUser {
    min-height: 38px;
  }

  .sidebar,
  .appLayout.sidebarCollapsed:not(.sidebarHover) .sidebar,
  .appLayout.sidebarHover .sidebar,
  .appLayout:not(.sidebarCollapsed) .sidebar {
    padding: 7px;
  }

  .sidebarToggle,
  .appLayout.sidebarCollapsed:not(.sidebarHover) .sidebarToggle,
  .appLayout.sidebarHover .sidebarToggle,
  .appLayout:not(.sidebarCollapsed) .sidebarToggle,
  .navItem:not(.navSubItem):not([hidden]),
  .appLayout.sidebarCollapsed:not(.sidebarHover) .navItem:not(.navSubItem):not([hidden]),
  .appLayout.sidebarHover .navItem:not(.navSubItem):not([hidden]),
  .appLayout:not(.sidebarCollapsed) .navItem:not(.navSubItem):not([hidden]) {
    width: 46px;
    min-width: 46px;
    max-width: 46px;
    height: 44px;
    min-height: 44px;
  }

  .ceoPanel {
    padding: 11px;
  }

  .ceoPanel .kpi,
  .ceoPanel .ceoKpis .kpi,
  .ceoPanel .subpanel,
  .ceoPanel .ceoBreakdownCard,
  .executiveTableCard {
    padding: 11px;
  }

  .executiveTableCard dl > div {
    grid-template-columns: minmax(74px, 0.42fr) minmax(0, 1fr);
  }
}

/* SIDEBAR-CONFIG-FIT-001: keep the collapsed rail background behind every visible menu icon. */
.appLayout.sidebarCollapsed:not(.sidebarHover) .sidebar,
.appLayout.sidebarCollapsed:not(.sidebarHover) .sidebar:hover,
.appLayout.sidebarCollapsed:not(.sidebarHover):has(.sidebar:hover) .sidebar {
  height: auto;
  min-height: calc(100vh - var(--portal-header-height, 0px));
  max-height: none;
  overflow: visible;
  overflow-x: visible;
  overflow-y: visible;
}

.appLayout.sidebarCollapsed:not(.sidebarHover) .sidebarBlock:not([hidden]) {
  width: 100%;
}

/* NO-HORIZONTAL-SCROLL-001: portal policy, including legacy/public styles. */
html,
body,
#root {
  max-width: 100%;
  overflow-x: hidden;
}

:where(.tableWrap) {
  max-width: 100%;
  overflow-x: hidden;
}

:where(.tableWrap table) {
  width: 100%;
  min-width: 0;
  table-layout: fixed;
}

:where(th, td) {
  min-width: 0;
  overflow-wrap: anywhere;
}

:where(.portalTabs) {
  flex-wrap: wrap;
  max-width: 100%;
  overflow: visible;
}

@media (max-width: 720px) {
  :where(.sidebar),
  :where(.appLayout.sidebarCollapsed:not(.sidebarHover) .sidebar),
  :where(.appLayout.sidebarCollapsed:not(.sidebarHover) .sidebar:hover),
  :where(.appLayout.sidebarCollapsed:not(.sidebarHover):has(.sidebar:hover) .sidebar),
  :where(.appLayout.sidebarHover .sidebar),
  :where(.appLayout:not(.sidebarCollapsed) .sidebar) {
    flex-wrap: wrap;
    overflow: visible;
    overflow-x: hidden;
  }

  :where(.sidebarBlock),
  :where(.appLayout.sidebarCollapsed:not(.sidebarHover) .sidebarBlock),
  :where(.appLayout.sidebarHover .sidebarBlock),
  :where(.appLayout:not(.sidebarCollapsed) .sidebarBlock) {
    flex: 1 1 148px;
    min-width: 0;
    max-width: 100%;
  }

  :where(.navGroup.isOpen > .navChildren),
  :where(.appLayout.sidebarCollapsed:not(.sidebarHover) .navGroup.isOpen > .navChildren),
  :where(.appLayout.sidebarHover .navGroup.isOpen > .navChildren),
  :where(.appLayout:not(.sidebarCollapsed) .navGroup.isOpen > .navChildren) {
    flex-wrap: wrap;
    min-width: 0;
    max-width: 100%;
  }

  :where(.navGroup.isOpen > .navChildren .navSubItem:not([hidden])),
  :where(.appLayout.sidebarCollapsed:not(.sidebarHover) .navGroup.isOpen > .navChildren .navSubItem:not([hidden])),
  :where(.appLayout.sidebarHover .navGroup.isOpen > .navChildren .navSubItem:not([hidden])),
  :where(.appLayout:not(.sidebarCollapsed) .navGroup.isOpen > .navChildren .navSubItem:not([hidden])) {
    min-width: 0;
    max-width: 100%;
    white-space: normal;
  }
}

/* FILTER-ICON-001: icon-only trigger for scoped React period filters. */
.filterShellIconButton .filterSummary > .filterOpenIconButton {
  display: inline-flex;
  flex: 0 0 auto;
  order: 1;
  width: auto;
  min-width: 0;
}

.filterShellIconButton .filterSummary .filterOpenIconButton button[data-role="open-filter"] {
  flex: 0 0 32px;
  width: 32px;
  min-width: 32px;
  max-width: 32px;
  height: 32px;
  min-height: 32px;
  padding: 0;
  border-radius: 8px;
}

.filterShellIconButton .filterSummary .filterOpenIconButton button[data-role="open-filter"]::before {
  display: none;
  content: none;
  margin: 0;
}

@media (max-width: 720px) {
  body .shell .workspace .filterShellIconButton .filterSummary > .filterOpenIconButton,
  .appView .filterShellIconButton.smartFilter .filterSummary > .filterOpenIconButton,
  .filterShellIconButton.filterShellActive.smartFilter .filterSummary > .filterOpenIconButton {
    flex: 0 0 auto;
    width: auto;
    min-width: 0;
  }

  body .shell .workspace .filterShellIconButton .filterSummary .filterOpenIconButton button[data-role="open-filter"],
  .appView .filterShellIconButton.smartFilter .filterSummary .filterOpenIconButton button[data-role="open-filter"],
  .filterShellIconButton.filterShellActive.smartFilter .filterSummary .filterOpenIconButton button[data-role="open-filter"] {
    flex: 0 0 32px;
    width: 32px;
    min-width: 32px;
    max-width: 32px;
  }
}

/* SIDEBAR-COMPACT-ICONS-002: final cascade guard for the compact icon rail. */
@media (min-width: 901px) {
  :root {
    --compact-sidebar-width: 58px;
    --compact-sidebar-control: 42px;
    --compact-sidebar-icon: 22px;
    --compact-sidebar-gap: 8px;
  }

  .appLayout.sidebarCollapsed,
  .appLayout.sidebarCollapsed:not(.sidebarHover),
  .appLayout.sidebarCollapsed:has(.sidebar:hover),
  .appLayout.sidebarCollapsed:not(.sidebarHover):has(.sidebar:hover),
  .appLayout.sidebarCollapsed.sidebarHover {
    grid-template-columns: var(--compact-sidebar-width) minmax(0, 1fr);
    gap: 12px;
    align-items: start;
    overflow: visible;
  }

  .appLayout.sidebarCollapsed > div:first-child {
    width: var(--compact-sidebar-width);
    min-width: var(--compact-sidebar-width);
    max-width: var(--compact-sidebar-width);
  }

  .appLayout.sidebarCollapsed .sidebar,
  .appLayout.sidebarCollapsed:not(.sidebarHover) .sidebar,
  .appLayout.sidebarCollapsed:has(.sidebar:hover) .sidebar,
  .appLayout.sidebarCollapsed:not(.sidebarHover) .sidebar:hover,
  .appLayout.sidebarCollapsed:not(.sidebarHover):has(.sidebar:hover) .sidebar,
  .appLayout.sidebarCollapsed.sidebarHover .sidebar {
    position: sticky;
    top: 10px;
    display: grid;
    justify-items: center;
    gap: var(--compact-sidebar-gap);
    width: var(--compact-sidebar-width);
    min-width: var(--compact-sidebar-width);
    max-width: var(--compact-sidebar-width);
    padding: 8px 6px;
    overflow: visible;
  }

  .appLayout.sidebarCollapsed .sidebarBlock,
  .appLayout.sidebarCollapsed:not(.sidebarHover) .sidebarBlock,
  .appLayout.sidebarCollapsed:has(.sidebar:hover) .sidebarBlock,
  .appLayout.sidebarCollapsed:not(.sidebarHover):has(.sidebar:hover) .sidebarBlock {
    display: contents;
  }

  .appLayout.sidebarCollapsed.sidebarHover .sidebarBlock {
    display: grid;
    justify-items: center;
    gap: var(--compact-sidebar-gap);
    width: 100%;
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
  }

  .appLayout.sidebarCollapsed .sidebarBlock + .sidebarBlock,
  .appLayout.sidebarCollapsed:not(.sidebarHover) .sidebarBlock + .sidebarBlock,
  .appLayout.sidebarCollapsed:has(.sidebar:hover) .sidebarBlock + .sidebarBlock,
  .appLayout.sidebarCollapsed:not(.sidebarHover) .sidebar:hover .sidebarBlock + .sidebarBlock,
  .appLayout.sidebarCollapsed:not(.sidebarHover):has(.sidebar:hover) .sidebarBlock + .sidebarBlock,
  .appLayout.sidebarCollapsed.sidebarHover .sidebarBlock + .sidebarBlock {
    margin-top: 0;
    padding-top: 0;
    border-top: 0;
  }

  .appLayout.sidebarCollapsed .sidebarTitle,
  .appLayout.sidebarCollapsed:not(.sidebarHover) .sidebarTitle,
  .appLayout.sidebarCollapsed:has(.sidebar:hover) .sidebarTitle,
  .appLayout.sidebarCollapsed.sidebarHover .sidebarTitle,
  .appLayout.sidebarCollapsed .navLabel,
  .appLayout.sidebarCollapsed:not(.sidebarHover) .navLabel,
  .appLayout.sidebarCollapsed:has(.sidebar:hover) .navLabel,
  .appLayout.sidebarCollapsed.sidebarHover .navLabel {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
  }

  .appLayout.sidebarCollapsed .navGroup,
  .appLayout.sidebarCollapsed:not(.sidebarHover) .navGroup,
  .appLayout.sidebarCollapsed:has(.sidebar:hover) .navGroup,
  .appLayout.sidebarCollapsed.sidebarHover .navGroup {
    position: relative;
    display: grid;
    justify-items: center;
    gap: var(--compact-sidebar-gap);
    width: 100%;
    min-width: 0;
    margin: 0;
  }

  .appLayout.sidebarCollapsed .sidebarToggle,
  .appLayout.sidebarCollapsed:not(.sidebarHover) .sidebarToggle,
  .appLayout.sidebarCollapsed:has(.sidebar:hover) .sidebarToggle,
  .appLayout.sidebarCollapsed.sidebarHover .sidebarToggle,
  .appLayout.sidebarCollapsed .navItem:not(.navSubItem):not([hidden]),
  .appLayout.sidebarCollapsed:not(.sidebarHover) .navItem:not(.navSubItem):not([hidden]),
  .appLayout.sidebarCollapsed:has(.sidebar:hover) .navItem:not(.navSubItem):not([hidden]),
  .appLayout.sidebarCollapsed.sidebarHover .navItem:not(.navSubItem):not([hidden]) {
    display: grid;
    place-items: center;
    width: var(--compact-sidebar-control);
    min-width: var(--compact-sidebar-control);
    max-width: var(--compact-sidebar-control);
    height: var(--compact-sidebar-control);
    min-height: var(--compact-sidebar-control);
    margin: 0 auto;
    padding: 0;
    border-radius: 8px;
  }

  .appLayout.sidebarCollapsed .navItem:not(.navSubItem) .navIcon,
  .appLayout.sidebarCollapsed:not(.sidebarHover) .navItem:not(.navSubItem) .navIcon,
  .appLayout.sidebarCollapsed:has(.sidebar:hover) .navItem:not(.navSubItem) .navIcon,
  .appLayout.sidebarCollapsed.sidebarHover .navItem:not(.navSubItem) .navIcon {
    width: var(--compact-sidebar-icon);
    height: var(--compact-sidebar-icon);
    flex: 0 0 var(--compact-sidebar-icon);
    font-size: var(--compact-sidebar-icon);
  }

  .appLayout.sidebarCollapsed .sidebarToggleIcon,
  .appLayout.sidebarCollapsed:not(.sidebarHover) .sidebarToggleIcon,
  .appLayout.sidebarCollapsed:has(.sidebar:hover) .sidebarToggleIcon,
  .appLayout.sidebarCollapsed.sidebarHover .sidebarToggleIcon {
    width: 21px;
    height: 21px;
    font-size: 21px;
  }

  .appLayout.sidebarCollapsed .navChildren,
  .appLayout.sidebarCollapsed .navGroup:hover > .navChildren,
  .appLayout.sidebarCollapsed .navGroup:focus-within > .navChildren,
  .appLayout.sidebarCollapsed .navGroup:has(.navSubItem.active) > .navChildren {
    display: none;
  }

  .appLayout.sidebarCollapsed .navGroup.isOpen > .navChildren {
    position: absolute;
    left: calc(100% + 8px);
    top: 0;
    z-index: 40;
    display: grid;
    gap: 4px;
    min-width: 178px;
    max-width: min(230px, calc(100vw - 96px));
    padding: 6px;
    border: 1px solid rgba(16, 36, 51, 0.1);
    border-radius: 8px;
    background: light-dark(#fff, #11181d);
    box-shadow: 0 12px 26px rgba(16, 36, 51, 0.13);
  }

  .appLayout.sidebarCollapsed .navGroup.isOpen > .navChildren .navSubItem:not([hidden]) {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    min-height: 34px;
    height: auto;
    padding: 7px 9px;
    border-radius: 7px;
    white-space: normal;
  }

  .appLayout.sidebarCollapsed .navGroup.isOpen > .navChildren .navSubItem .navLabel {
    position: static;
    display: inline;
    width: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    clip: auto;
    color: inherit;
    font-size: 11px;
    font-weight: 850;
    line-height: 1.15;
    white-space: normal;
  }

  .appLayout.sidebarCollapsed .navItem.active:not([hidden]),
  .appLayout.sidebarCollapsed .navGroup.isOpen > .navItem,
  .appLayout.sidebarCollapsed .navGroup:has(.navSubItem.active) > .navItem {
    border-color: rgba(255, 117, 31, 0.28);
    background: var(--soft-orange);
    color: var(--orange-dark);
  }

  .appLayout.sidebarCollapsed .navItem.active:not([hidden])::after,
  .appLayout.sidebarCollapsed .navGroup.isOpen > .navItem::after,
  .appLayout.sidebarCollapsed .navGroup:has(.navSubItem.active) > .navItem::after {
    content: "";
    position: absolute;
    left: -5px;
    width: 3px;
    height: 24px;
    border-radius: 999px;
    background: var(--orange);
  }
}


/* Planilha de comissao (regras de 01/10/2026): 6 colunas, sem sobreposicao. */
#vendedoresView.commercialPanel .commissionSheetWrap {
  border: 1px solid rgba(24, 34, 43, 0.08);
  border-radius: 8px;
  background: light-dark(#fff, #11181d);
  overflow-x: auto;
}

#vendedoresView.commercialPanel .commissionSheet {
  width: 100%;
  min-width: 960px;
  table-layout: fixed;
  border-collapse: separate;
  border-spacing: 0;
}

#vendedoresView.commercialPanel .commissionSheet th {
  padding: 10px 12px;
  color: light-dark(rgba(24, 34, 43, 0.76), rgba(222, 236, 249, 0.76));
  font-size: 10px;
  line-height: 1.15;
  text-align: left;
  text-transform: uppercase;
  white-space: nowrap;
  border-bottom: 1px solid rgba(24, 34, 43, 0.08);
}

#vendedoresView.commercialPanel .commissionSheet td {
  padding: 12px;
  vertical-align: top;
  font-size: 12px;
  line-height: 1.3;
  white-space: normal;
  text-align: left;
  border-bottom: 1px solid rgba(24, 34, 43, 0.06);
}

#vendedoresView.commercialPanel .commissionSheet tr.isBlocked td {
  background: light-dark(rgba(239, 68, 68, 0.03), rgba(247, 77, 75, 0.03));
}

#vendedoresView.commercialPanel .commissionSheet th:nth-child(1),
#vendedoresView.commercialPanel .commissionSheet td:nth-child(1) { width: 16%; }
#vendedoresView.commercialPanel .commissionSheet th:nth-child(2),
#vendedoresView.commercialPanel .commissionSheet td:nth-child(2) { width: 20%; }
#vendedoresView.commercialPanel .commissionSheet th:nth-child(3),
#vendedoresView.commercialPanel .commissionSheet td:nth-child(3) { width: 27%; }
#vendedoresView.commercialPanel .commissionSheet th:nth-child(4),
#vendedoresView.commercialPanel .commissionSheet td:nth-child(4) { width: 9%; }
#vendedoresView.commercialPanel .commissionSheet th:nth-child(5),
#vendedoresView.commercialPanel .commissionSheet td:nth-child(5) { width: 23%; }
#vendedoresView.commercialPanel .commissionSheet th:nth-child(6),
#vendedoresView.commercialPanel .commissionSheet td:nth-child(6) { width: 5%; text-align: center; }

#vendedoresView.commercialPanel .commissionSellerCell strong {
  display: block;
  font-size: 13px;
  line-height: 1.2;
  overflow-wrap: anywhere;
  margin-bottom: 6px;
}

#vendedoresView.commercialPanel .commissionSoldCell strong {
  display: block;
  color: var(--teal);
  font-size: 17px;
  line-height: 1.1;
  white-space: nowrap;
}

#vendedoresView.commercialPanel .commissionSoldCell small {
  display: block;
  margin-top: 4px;
  color: light-dark(rgba(91, 111, 128, 0.9), rgba(158, 179, 198, 0.9));
  font-size: 11px;
  font-weight: 700;
}

#vendedoresView.commercialPanel .commissionSoldCell small.muted {
  font-weight: 600;
  color: light-dark(rgba(91, 111, 128, 0.7), rgba(158, 179, 198, 0.7));
}

#vendedoresView.commercialPanel .commissionSoldCell .commercialMiniProgress {
  margin-top: 6px;
  width: 100%;
  max-width: 160px;
  height: 6px;
}

#vendedoresView.commercialPanel .commissionGoals {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

#vendedoresView.commercialPanel .commissionGoal {
  display: inline-grid;
  grid-template-columns: 12px auto;
  grid-template-rows: auto auto;
  column-gap: 6px;
  align-items: center;
  padding: 5px 10px 5px 8px;
  border-radius: 10px;
  font-size: 11px;
  line-height: 1.2;
  background: light-dark(rgba(148, 163, 184, 0.14), rgba(109, 123, 143, 0.14));
  color: light-dark(#475569, #b8c8df);
}

#vendedoresView.commercialPanel .commissionGoal i {
  grid-row: 1 / span 2;
  font-style: normal;
  font-weight: 900;
  font-size: 13px;
}

#vendedoresView.commercialPanel .commissionGoal b {
  font-weight: 800;
}

#vendedoresView.commercialPanel .commissionGoal small {
  font-size: 10.5px;
  font-weight: 600;
  white-space: nowrap;
  opacity: 0.85;
}

#vendedoresView.commercialPanel .commissionGoal.ok {
  background: rgba(34, 197, 94, 0.14);
  color: light-dark(#15803d, #49a964);
}

#vendedoresView.commercialPanel .commissionGoal.miss {
  background: light-dark(rgba(239, 68, 68, 0.12), rgba(247, 77, 75, 0.12));
  color: light-dark(#b91c1c, #f0574c);
}

/* Saldo de desconto do mes (quanto ainda pode dar ate 2%): valor, barra fina e uma linha de apoio */
#vendedoresView.commercialPanel .discountBudget {
  --budget-color: light-dark(#15803d, #49a964);
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: baseline;
  column-gap: 6px;
  row-gap: 5px;
}

#vendedoresView.commercialPanel .discountBudget.over { --budget-color: light-dark(#b91c1c, #f0574c); }

#vendedoresView.commercialPanel .discountBudget strong {
  color: var(--budget-color);
  font-size: 15px;
  font-weight: 900;
  line-height: 1.1;
  white-space: nowrap;
}

#vendedoresView.commercialPanel .discountBudget small {
  color: light-dark(rgba(91, 111, 128, 0.85), rgba(158, 179, 198, 0.85));
  font-size: 11px;
  font-weight: 650;
}

#vendedoresView.commercialPanel .discountBudget > small:last-child {
  grid-column: 1 / -1;
}

#vendedoresView.commercialPanel .discountBudgetTrack {
  grid-column: 1 / -1;
  position: relative;
  height: 4px;
  border-radius: 999px;
  background: rgba(24, 34, 43, 0.08);
  overflow: hidden;
}

#vendedoresView.commercialPanel .discountBudgetTrack s {
  position: absolute;
  inset: 0 auto 0 0;
  border-radius: 999px;
  background: light-dark(#64748b, #9aabc4);
}

#vendedoresView.commercialPanel .discountBudget.over .discountBudgetTrack s {
  background: light-dark(#b91c1c, #f0574c);
}

/* Metas do mes: linha de texto (nome, feito / meta, %) com barra fina embaixo; verde so quando batida */
#vendedoresView.commercialPanel .commissionGoalBars {
  display: grid;
  gap: 7px;
}

#vendedoresView.commercialPanel .commissionGoalBar {
  --goal-color: light-dark(#64748b, #9aabc4);
  display: grid;
  grid-template-columns: minmax(0, auto) minmax(0, 1fr) 38px;
  align-items: baseline;
  column-gap: 8px;
  row-gap: 3px;
  font-size: 11.5px;
  line-height: 1.2;
}

#vendedoresView.commercialPanel .commissionGoalBar.ok { --goal-color: light-dark(#15803d, #49a964); }

#vendedoresView.commercialPanel .commissionGoalBarLabel {
  color: light-dark(#334155, #c7d8f1);
  font-weight: 750;
  white-space: nowrap;
}

#vendedoresView.commercialPanel .commissionGoalBarValue {
  overflow: hidden;
  color: light-dark(rgba(91, 111, 128, 0.9), rgba(158, 179, 198, 0.9));
  font-weight: 600;
  text-align: right;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#vendedoresView.commercialPanel .commissionGoalBarValue b {
  color: light-dark(#18222b, #deecf9);
  font-weight: 800;
}

#vendedoresView.commercialPanel .commissionGoalBar.free .commissionGoalBarValue {
  color: light-dark(rgba(91, 111, 128, 0.6), rgba(158, 179, 198, 0.6));
  font-style: italic;
}

#vendedoresView.commercialPanel .commissionGoalBarPercent {
  color: var(--goal-color);
  font-weight: 850;
  text-align: right;
}

#vendedoresView.commercialPanel .commissionGoalBarTrack {
  grid-column: 1 / -1;
  position: relative;
  height: 4px;
  border-radius: 999px;
  background: rgba(24, 34, 43, 0.07);
  overflow: hidden;
}

#vendedoresView.commercialPanel .commissionGoalBarTrack s {
  position: absolute;
  inset: 0 auto 0 0;
  border-radius: 999px;
  background: var(--goal-color);
  opacity: 0.85;
}

#vendedoresView.commercialPanel .commissionGoalBar.free .commissionGoalBarTrack {
  opacity: 0.5;
}


#vendedoresView.commercialPanel .commissionRateCell strong {
  display: block;
  font-size: 18px;
  line-height: 1.1;
  color: var(--navy);
}

#vendedoresView.commercialPanel .commissionRateCell small {
  display: block;
  margin-top: 4px;
  color: light-dark(rgba(91, 111, 128, 0.9), rgba(158, 179, 198, 0.9));
  font-size: 11px;
  font-weight: 700;
}

#vendedoresView.commercialPanel .commissionMathCell > div {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: 2px 0;
  font-size: 11.5px;
  color: light-dark(rgba(24, 34, 43, 0.8), rgba(222, 236, 249, 0.8));
}

#vendedoresView.commercialPanel .commissionMathCell > div b {
  font-weight: 800;
  white-space: nowrap;
}

#vendedoresView.commercialPanel .commissionMathCell > div.total {
  margin-top: 4px;
  padding-top: 5px;
  border-top: 1px solid rgba(24, 34, 43, 0.1);
  font-size: 12.5px;
  color: var(--navy);
}

#vendedoresView.commercialPanel .commissionMathCell > div.total b {
  font-size: 14px;
}

#vendedoresView.commercialPanel .commissionMathCell > small {
  display: block;
  margin-top: 4px;
  font-size: 11px;
  font-weight: 700;
}

#vendedoresView.commercialPanel .commissionMathCell .negativeText,
#vendedoresView.commercialPanel .negativeText {
  color: light-dark(#b91c1c, #f0574c);
}

#vendedoresView.commercialPanel .commissionDetailCell {
  vertical-align: middle;
}

/* Planilha sem rolagem horizontal (pedido do usuario): 6 colunas que cabem na tela;
   abaixo de 1100px cada vendedor vira um cartao. */
#vendedoresView.commercialPanel .commissionSheetWrap {
  overflow-x: visible;
}

#vendedoresView.commercialPanel .commissionSheet {
  min-width: 0;
}

#vendedoresView.commercialPanel .commissionSheet th:nth-child(1),
#vendedoresView.commercialPanel .commissionSheet td:nth-child(1) { width: 13%; }
#vendedoresView.commercialPanel .commissionSheet th:nth-child(2),
#vendedoresView.commercialPanel .commissionSheet td:nth-child(2) { width: 17%; }
#vendedoresView.commercialPanel .commissionSheet th:nth-child(3),
#vendedoresView.commercialPanel .commissionSheet td:nth-child(3) { width: 30%; }
#vendedoresView.commercialPanel .commissionSheet th:nth-child(4),
#vendedoresView.commercialPanel .commissionSheet td:nth-child(4) { width: 16%; text-align: left; }
#vendedoresView.commercialPanel .commissionSheet th:nth-child(5),
#vendedoresView.commercialPanel .commissionSheet td:nth-child(5) { width: 20%; }
#vendedoresView.commercialPanel .commissionSheet th:nth-child(6),
#vendedoresView.commercialPanel .commissionSheet td:nth-child(6) { width: 4%; text-align: center; }

#vendedoresView.commercialPanel .commissionGoalsCell,
#vendedoresView.commercialPanel .commissionDiscountCell {
  min-width: 0;
}

#vendedoresView.commercialPanel .commissionRateLine {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 8px;
  margin: 0 0 6px;
  padding-bottom: 6px;
  border-bottom: 1px solid rgba(24, 34, 43, 0.06);
}

#vendedoresView.commercialPanel .commissionRateLine strong {
  color: var(--navy);
  font-size: 15px;
  font-weight: 900;
}

#vendedoresView.commercialPanel .commissionRateLine small {
  color: light-dark(rgba(91, 111, 128, 0.9), rgba(158, 179, 198, 0.9));
  font-size: 11px;
  font-weight: 700;
}

#vendedoresView.commercialPanel .discountBudget strong {
  font-size: 15px;
}

@media (max-width: 1100px) {
  #vendedoresView.commercialPanel .commissionSheet,
  #vendedoresView.commercialPanel .commissionSheet tbody {
    display: block;
  }

  #vendedoresView.commercialPanel .commissionSheet thead {
    display: none;
  }

  #vendedoresView.commercialPanel .commissionSheet tbody tr {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
    border-bottom: 1px solid rgba(24, 34, 43, 0.1);
  }

  #vendedoresView.commercialPanel .commissionSheet tbody td {
    display: block;
    width: auto !important;
    border-bottom: 0;
  }

  #vendedoresView.commercialPanel .commissionSheet tbody td:nth-child(1) { grid-column: 1 / 3; grid-row: 1; }
  #vendedoresView.commercialPanel .commissionSheet tbody td:nth-child(6) { grid-column: 3; grid-row: 1; }
  #vendedoresView.commercialPanel .commissionSheet tbody td:nth-child(2) { grid-column: 1; grid-row: 2; }
  #vendedoresView.commercialPanel .commissionSheet tbody td:nth-child(4) { grid-column: 2 / 4; grid-row: 2; }
  #vendedoresView.commercialPanel .commissionSheet tbody td:nth-child(3) { grid-column: 1 / -1; grid-row: 3; }
  #vendedoresView.commercialPanel .commissionSheet tbody td:nth-child(5) { grid-column: 1 / -1; grid-row: 4; }
  #vendedoresView.commercialPanel .commissionSheet tbody td[colspan] { grid-column: 1 / -1; }
}

@media (max-width: 600px) {
  #vendedoresView.commercialPanel .commissionSheet tbody tr {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  #vendedoresView.commercialPanel .commissionSheet tbody td:nth-child(1) { grid-column: 1; }
  #vendedoresView.commercialPanel .commissionSheet tbody td:nth-child(6) { grid-column: 2; }
  #vendedoresView.commercialPanel .commissionSheet tbody td:nth-child(2) { grid-column: 1 / -1; grid-row: 2; }
  #vendedoresView.commercialPanel .commissionSheet tbody td:nth-child(4) { grid-column: 1 / -1; grid-row: 3; }
  #vendedoresView.commercialPanel .commissionSheet tbody td:nth-child(3) { grid-column: 1 / -1; grid-row: 4; }
  #vendedoresView.commercialPanel .commissionSheet tbody td:nth-child(5) { grid-column: 1 / -1; grid-row: 5; }
}

/* Marketing: indicadores da Gestao, calendario e fechamento (melhorias out/2026) */
.marketingExpenseRow {
  grid-template-columns: minmax(118px, 0.7fr) minmax(164px, 0.95fr) minmax(164px, 0.95fr) minmax(200px, 1.3fr) minmax(110px, 0.7fr) minmax(170px, 1fr) auto;
}

.marketingPanel .marketingDay.isFilteredOut {
  opacity: 0.42;
}

.marketingPanel .marketingDay.isLocked {
  cursor: default;
}

.marketingPanel button.marketingEmptyAction {
  font-family: inherit;
  cursor: pointer;
}

.marketingPanel button.marketingEmptyAction:focus-visible {
  opacity: 1;
  outline: 2px solid var(--teal);
  outline-offset: 2px;
}

.marketingOutcomeToggle {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.marketingOutcomeButton {
  white-space: nowrap;
  padding-inline: 6px;
}

@media (min-width: 761px) {
  .marketingValidationItem {
    grid-template-columns: 270px minmax(180px, 0.55fr) minmax(240px, 1fr) auto;
  }
}

.marketingOutcomeButton.active.pending {
  background: light-dark(rgba(100, 116, 139, 0.14), rgba(154, 171, 196, 0.14));
  color: light-dark(#334155, #c7d8f1);
}

.marketingHistoryBadge.pending {
  background: light-dark(rgba(100, 116, 139, 0.12), rgba(154, 171, 196, 0.12));
  color: light-dark(#334155, #c7d8f1);
}

.marketingHistorySummaryItem.pending {
  border-left: 4px solid light-dark(#94a3b8, #6d7b8f);
}

.marketingCampaignDialogValidationLabel .marketingHistoryBadge {
  margin-left: 6px;
}

.marketingCampaignBand.isTemplate {
  border-style: dashed;
  background: transparent;
  color: light-dark(#64748b, #9aabc4);
  font-style: italic;
}

.marketingCreatePreviewCard.isTemplate {
  margin-top: 10px;
  border-style: dashed;
}

.marketingPanel .marketingIndicatorsCard .marketingKpis.financeKpis {
  margin: 0;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
}

.marketingIndicatorList {
  display: grid;
  gap: 8px;
}

.marketingIndicatorList > div {
  display: grid;
  grid-template-columns: minmax(48px, auto) 1fr;
  align-items: baseline;
  gap: 10px;
  padding: 8px 10px;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 8px;
  background: light-dark(#ffffff, #11181d);
}

.marketingIndicatorList > div strong {
  color: var(--teal-dark, light-dark(#1f6578, #5b9db1));
  font-size: 18px;
  font-weight: 900;
}

.marketingIndicatorList > div span {
  color: light-dark(#475569, #b8c8df);
  font-size: 13px;
}

.marketingIndicatorList > div.warning {
  border-color: light-dark(rgba(220, 38, 38, 0.28), rgba(250, 73, 65, 0.28));
  background: light-dark(rgba(220, 38, 38, 0.04), rgba(250, 73, 65, 0.04));
}

.marketingIndicatorList > div.warning strong {
  color: light-dark(#b91c1c, #f0574c);
}

.marketingIndicatorGrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 16px;
  margin-top: 12px;
}

.marketingIndicatorBars {
  display: grid;
  align-content: start;
  gap: 6px;
  min-width: 0;
}

.marketingIndicatorBars > strong {
  color: light-dark(#0f172a, #e1eeff);
  font-size: 13px;
  font-weight: 900;
}

.marketingIndicatorBarRow {
  display: grid;
  grid-template-columns: minmax(90px, 1fr) minmax(60px, 1.2fr) auto;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: light-dark(#475569, #b8c8df);
}

.marketingIndicatorBarLabel {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.marketingIndicatorBarTrack {
  height: 8px;
  border-radius: 999px;
  background: light-dark(rgba(40, 119, 141, 0.1), rgba(83, 158, 181, 0.1));
  overflow: hidden;
}

.marketingIndicatorBarTrack span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--teal);
}

.marketingIndicatorBarValue {
  font-variant-numeric: tabular-nums;
  font-weight: 800;
  white-space: nowrap;
}

.marketingIndicatorTable {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.marketingIndicatorTable th,
.marketingIndicatorTable td {
  padding: 8px 10px;
  border-bottom: 1px solid rgba(15, 23, 42, 0.08);
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.marketingIndicatorTable th:first-child,
.marketingIndicatorTable td:first-child {
  text-align: left;
}

.marketingIndicatorTable th {
  color: light-dark(#64748b, #9aabc4);
  font-size: 12px;
  font-weight: 900;
}

.marketingIndicatorTable td.warning {
  color: light-dark(#b91c1c, #f0574c);
  font-weight: 900;
}

.marketingBudgetAdjustmentList {
  margin: 6px 0 0;
  padding-left: 18px;
  color: light-dark(#64748b, #9aabc4);
  font-size: 12px;
}

.marketingClosingSnapshot {
  display: grid;
  gap: 4px;
  margin-bottom: 12px;
  padding: 10px 12px;
  border: 1px solid light-dark(rgba(40, 119, 141, 0.18), rgba(83, 158, 181, 0.18));
  border-radius: 8px;
  background: var(--teal-soft, light-dark(#f2fafc, #181f24));
}

.marketingClosingSnapshot small {
  color: light-dark(#64748b, #9aabc4);
}

.marketingClosingSnapshot ul {
  margin: 4px 0 0;
  padding-left: 18px;
  color: light-dark(#334155, #c7d8f1);
  font-size: 13px;
}

@media (max-width: 1180px) {
  .marketingExpenseRow {
    grid-template-columns: minmax(0, 1fr);
    align-items: stretch;
  }
}

@media (max-width: 760px) {
  .marketingIndicatorTable th:nth-child(4),
  .marketingIndicatorTable td:nth-child(4) {
    display: none;
  }

  .marketingPostCalendarHeader {
    flex-wrap: wrap;
  }
}

/* Marketing: valores dos indicadores numa linha so, com a fonte acompanhando a largura do cartao. */
.marketingPanel .financeKpis .kpi { container-type: inline-size; min-width: 0; }
.marketingPanel .financeKpis .kpi strong { white-space: nowrap; font-size: clamp(1rem, 11cqi, 1.6rem); }

/* Marketing: linha do tempo da postagem (tempo em cada etapa e com quem). */
.marketingPostTimeline { display: grid; gap: 8px; margin: 12px 0; padding: 12px; border: 1px solid rgba(15, 23, 42, 0.1); border-radius: 10px; background: light-dark(#f8fafc, #171d22); }
.marketingPostTimelineHeader { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 12px; }
.marketingPostTimelineHeader small { color: light-dark(#64748b, #9aabc4); }
.marketingIndicatorTableHint { color: light-dark(#64748b, #9aabc4); font-weight: 600; }
.marketingPanel .marketingTimelineList,
.MuiDialog-root .marketingTimelineList { display: grid; gap: 0; font-size: 12px; line-height: 1.35; }
.MuiDialog-root .marketingPostTimelineHeader b { font-size: 13px; }
.MuiDialog-root .marketingPostTimelineHeader small { font-size: 11px; }
.marketingPanel .marketingTimelineRow,
.MuiDialog-root .marketingTimelineRow {
  display: grid;
  grid-template-columns: 112px minmax(140px, 1.3fr) 92px 84px minmax(120px, 1fr);
  align-items: start;
  gap: 4px 12px;
  padding: 5px 4px;
  border-bottom: 1px solid rgba(15, 23, 42, 0.08);
  color: light-dark(#334155, #c7d8f1);
  font-size: 12px;
  text-align: left;
  text-transform: none;
  font-variant-numeric: tabular-nums;
}
.MuiDialog-root .marketingTimelineRow:last-child { border-bottom: 0; }
.MuiDialog-root .marketingTimelineRow.isHead { padding-top: 0; color: light-dark(#94a3b8, #6d7b8f); font-size: 10.5px; font-weight: 700; letter-spacing: 0.02em; }
.MuiDialog-root .marketingTimelineRow.isCurrent { background: light-dark(rgba(40, 119, 141, 0.07), rgba(83, 158, 181, 0.07)); border-radius: 6px; }
.MuiDialog-root .marketingTimelineRow > span { min-width: 0; }
.MuiDialog-root .marketingTimelineRow small { display: block; color: light-dark(#94a3b8, #6d7b8f); font-size: 10.5px; font-weight: 500; }
.MuiDialog-root .marketingTimelineStage { display: flex; align-items: center; gap: 6px; font-weight: 600; }
.MuiDialog-root .marketingTimelineStage i { flex: 0 0 7px; width: 7px; height: 7px; border-radius: 50%; background: rgb(var(--status-rgb, 37, 99, 235)); }
.MuiDialog-root .marketingTimelinePeriod { white-space: nowrap; }
.MuiDialog-root .marketingTimelinePeriod em { color: light-dark(#28778d, #539eb5); font-style: normal; font-weight: 600; }
.MuiDialog-root .marketingTimelineDuration { font-weight: 600; white-space: nowrap; }
.MuiDialog-root .marketingTimelineRow .isLate { color: light-dark(#b91c1c, #f0574c); font-weight: 600; }
.MuiDialog-root .marketingTimelineWho { overflow-wrap: anywhere; }
@media (max-width: 760px) {
  .MuiDialog-root .marketingTimelineRow { grid-template-columns: 1fr 1fr; }
  .MuiDialog-root .marketingTimelineRow.isHead { display: none; }
  .MuiDialog-root .marketingTimelinePeriod { grid-column: 1 / -1; order: 3; white-space: normal; }
}