/**
 * MUI-aligned design tokens — synced with:
 * - tvf-sales-hub-frontend src/theme/colors.ts
 * - Figma Saleshub Admin Web (Primary #2499EF, Grey scale)
 * @see https://mui.com/
 */
/* Typography assets are self-hosted so controls and icons never degrade when
   Google Fonts is blocked, slow, or unavailable. */
@font-face {
  font-family: 'Material Icons Outlined';
  font-style: normal;
  font-weight: 400;
  font-display: block;
  src: url('../fonts/material-icons/MaterialIconsOutlined-Regular.otf') format('opentype');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/inter/Inter-Regular.ttf') format('truetype');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/inter/Inter-Medium.ttf') format('truetype');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/inter/Inter-SemiBold.ttf') format('truetype');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/inter/Inter-Bold.ttf') format('truetype');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('../fonts/inter/Inter-ExtraBold.ttf') format('truetype');
}

:root {
  /* MUI palette.primary */
  --mui-primary-main: #2499ef;
  --mui-primary-dark: #1f84eb;
  --mui-primary-light: #e5f3fd;
  --mui-primary-50: #f1f9ff;
  --mui-primary-100: rgba(36, 153, 239, 0.08);
  --mui-primary-200: #b6defc;
  --mui-primary-border: #cadff1;
  --mui-primary-border-light: #88cdff;

  /* MUI palette.grey + Figma */
  --mui-grey-900: #0b0e1e;
  --mui-grey-700: #283252;
  --mui-grey-500: #4d607a;
  --mui-grey-400: #82868c;
  --mui-grey-300: #babfc5;
  --mui-grey-200: #e3e6eb;
  --mui-grey-150: #f0f1f8;
  --mui-divider: #e3e6eb;

  /* MUI palette.background */
  --mui-background-default: #f3f4f9;
  --mui-background-paper: #ffffff;
  /* Nền zebra cho hàng lẻ ở bảng danh sách — rất nhạt để không đè chữ,
     tách bạch với hover (#f1f5f9) vốn đậm hơn một bậc. */
  --crm-row-zebra: #f9fafc;
  --crm-row-hover: #f1f5f9;

  /* MUI palette.text */
  --mui-text-primary: rgba(0, 0, 0, 0.87);
  --mui-text-secondary: #4d607a;
  --mui-text-disabled: #babfc5;
  --mui-text-link: #076fbc;
  /* Primary xài cho CHỮ/ICON/LINK trên nền sáng — đậm hơn --mui-primary-main
     để đạt WCAG AA (≈5.1:1 vs #2499ef chỉ 3.05:1). Mảng/nền/viền giữ nguyên
     --mui-primary-main để không đổi diện mạo fill. */
  --primary-on-light: #0b6fc4;
  --mui-error-main: #d32f2f;

  /* Semantic Design System aliases — page/component CSS should consume these
     instead of introducing another hard-coded slate/grey hierarchy. */
  --ds-text-primary: #172536;
  --ds-text-secondary: #526b84;
  --ds-text-subtle: #6f8295;
  --ds-text-disabled: #9aa8b6;
  --ds-text-link: var(--primary-on-light);
  --ds-text-on-primary: #ffffff;
  --ds-surface-page: var(--mui-background-default);
  --ds-surface-default: var(--mui-background-paper);
  --ds-surface-subtle: #f7f9fb;
  --ds-surface-hover: var(--crm-row-hover);
  --ds-border-default: #dfe6ee;
  --ds-border-strong: #c5d0dc;
  --ds-space-1: 4px;
  --ds-space-2: 8px;
  --ds-space-3: 12px;
  --ds-space-4: 16px;
  --ds-space-5: 20px;
  --ds-space-6: 24px;
  --ds-radius-control: 6px;
  --ds-radius-card: 8px;
  --ds-filter-trigger-gap: 8px;
  --ds-detail-row-pad-y: 10px;
  --ds-detail-row-pad-y-multi: 8px;
  --ds-detail-row-min-h: 40px;

  /* Shared content hierarchy — one semantic color per information tier. */
  --ds-heading-page-color: #172536;
  --ds-heading-section-color: #243b53;
  --ds-label-color: #526b84;
  --ds-meta-color: #526b84;
  --ds-table-head-color: #243b53;
  --ds-table-head-bg: #eaf0f6;
  --ds-header-border: #c7d3df;
  --ds-page-title-size: 22px;
  --ds-section-title-size: 13px;
  --ds-table-head-size: 12px;
  --ds-header-compact-height: 40px;

  /* Brand */
  --brand-title: #0f1c53;

  /* Status (StatusChip.tsx) */
  --status-active: #20a4a9;
  --status-active-bg: rgba(32, 164, 169, 0.12);
  --status-inactive: #82868c;
  --status-inactive-bg: rgba(130, 134, 140, 0.12);
  --status-archived: #7874fe;
  --status-archived-bg: rgba(120, 116, 254, 0.12);

  /* Layout — Figma nav 277px */
  --sidebar-width: 277px;
  --sidebar-padding-x: 20px;
  --sidebar-padding-y: 28px;
  --sidebar-section-gap: 28px;
  --sidebar-header-items-gap: 12px;
  --sidebar-item-gap: 4px;
  --sidebar-section-header-height: 20px;
  --sidebar-item-height: 44px;
  --sidebar-child-height: 40px;
  --sidebar-icon-gap: 16px;
  --sidebar-child-icon-gap: 16px;
  --sidebar-icon-color: #6b7280;
  --sidebar-icon-color-active: var(--mui-primary-main);
  --header-height: 48px;
  --header-area-height: 70px;
  --radius-sm: 4px;
  --radius-md: 8px;
  --shadow-1: 0px 2px 1px -1px rgba(77, 96, 122, 0.03), 0px 1px 1px 0px rgba(77, 96, 122, 0.04), 0px 1px 3px 0px rgba(77, 96, 122, 0.08);
  --shadow-2: 0px 2px 8px rgba(0, 0, 0, 0.1);

  /* Focus ring bàn phím (feedback P2·#11) — token dùng chung để mọi control
     có dấu focus nhất quán. Dùng outline (không layout-shift, theo border-radius,
     không bị overflow:hidden cắt như box-shadow). Màu --primary-on-light đạt AA
     (5.14:1) thay vì --mui-primary-main (#2499ef chỉ 3.05:1). */
  --focus-ring-color: var(--primary-on-light);
  --focus-ring-width: 2px;
  --focus-ring-offset: 2px;

  /* MUI typography */
  --font-family: 'Inter';
  /* Thang chữ 6 bậc — chỉ dùng các giá trị này, cấm cỡ lẻ (feedback P1·#4).
     11 = sàn nhỏ nhất (badge/nhãn), 15 = chữ dữ liệu đề xuất (chưa áp đại trà:
     cần giảm mật độ cột trước — xem P2·#9), 24 = heading lớn. */
  --font-size-caption2: 11px;
  --font-size-caption: 12px;
  --font-size-body2: 13px;
  --font-size-body1: 15px;
  --font-size-h6: 18px;
  --font-size-h5: 24px;
  /* Thang cân nặng — body dùng regular 400 (trước để medium 500 nên Inter trông
     "dày nét"). Chuẩn: body 400 · label/nhấn 500 · heading 600 · số nổi 700. */
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  /* MUI Outlined Input / Select — https://mui.com/material-ui/react-select/ */
  --mui-outlined-border-color: rgba(0, 0, 0, 0.23);
  --mui-outlined-border-hover: rgba(0, 0, 0, 0.87);
  --mui-outlined-border-focus: var(--mui-primary-main);
  --mui-input-label-rest: rgba(0, 0, 0, 0.6);
  --mui-input-label-focus: var(--mui-primary-main);
  --mui-input-icon: rgba(0, 0, 0, 0.65);
  --mui-input-icon-focus: var(--mui-primary-main);
  /* MUI ArrowDropDown — slate grey như reference */
  --mui-select-icon-color: #515965;
  --mui-select-icon-down: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%2352667a' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m8 10 4 4 4-4'/%3E%3C/svg%3E");
  --mui-select-icon-up: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%2352667a' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m8 14 4-4 4 4'/%3E%3C/svg%3E");
  --mui-outlined-padding-x: 14px;
  --mui-outlined-height: 40px;
  --mui-outlined-font-size: 1rem;
  --mui-outlined-label-font-size: 1rem;
  --mui-outlined-label-shrink: 0.75;

  /* Aliases for legacy vars */
  --color-primary: var(--mui-primary-main);
  --color-primary-dark: var(--mui-primary-dark);
  --color-primary-light: var(--mui-primary-light);
  --color-primary-bg: var(--mui-primary-50);
  --color-bg-app: var(--mui-background-default);
  --color-bg-paper: var(--mui-background-paper);
  --color-text-primary: var(--mui-grey-900);
  --color-text-secondary: var(--mui-grey-500);
  --color-text-link: var(--mui-text-link);
  --color-border: var(--mui-divider);
}

/* MUI CssBaseline-like reset */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

html,
body,
button,
input,
select,
textarea {
  font-family: var(--font-family);
}

body {
  font-size: var(--font-size-body2);
  font-weight: var(--font-weight-regular);
  color: var(--mui-text-primary);
  background: var(--mui-background-default);
  line-height: 1.5;
  margin: 0;
  font-feature-settings: 'tnum' 1, 'cv05' 1;
  font-variant-numeric: tabular-nums;
}

a { color: var(--mui-text-link); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ── A11y · Focus ring bàn phím (feedback P2·#11) ────────────────────────────
   Sàn focus-visible dùng :where() → specificity 0, KHÔNG đè bất kỳ style focus
   riêng nào đã khai báo (component nào tự vẽ ring vẫn thắng). Chỉ tô cho control
   tương tác thật, và chỉ khi bàn phím (:focus-visible) — chuột/chạm không hiện.
   Trước đây có 42 `outline:none` vs 37 `:focus-visible` → nhiều control mất dấu. */
:where(a, button, input, select, textarea, summary, [tabindex], [role="button"], [role="tab"], [role="link"], [role="menuitem"], [role="option"], [contenteditable="true"]):focus-visible {
  outline: var(--focus-ring-width) solid var(--focus-ring-color);
  outline-offset: var(--focus-ring-offset);
  border-radius: var(--radius-sm);
}

/* Bỏ focus ring khi bấm chuột/chạm (chỉ giữ cho bàn phím) — an toàn với trình
   duyệt cũ không phân biệt được :focus-visible. */
:where(a, button, input, select, textarea, summary, [tabindex], [role="button"]):focus:not(:focus-visible) {
  outline: none;
}

/* ── A11y · Giảm chuyển động (feedback P2·#11) ───────────────────────────────
   Người bật "Reduce motion" trong OS → tắt transition/animation để tránh chóng
   mặt. Giữ 0.01ms thay vì 0 để sự kiện transitionend/animationend vẫn bắn. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* MuiButton-contained */
.mui-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-family: var(--font-family);
  font-size: var(--font-size-caption);
  font-weight: var(--font-weight-semibold);
  text-transform: none;
  border-radius: var(--radius-sm);
  min-width: 84px;
  padding: 0.6rem 1.5rem;
  border: none;
  cursor: pointer;
  transition: background-color 0.15s, box-shadow 0.15s;
  box-shadow: none;
}

.mui-btn-contained {
  background: var(--mui-primary-main);
  color: #fff;
  min-height: 40px;
  border-radius: var(--radius-sm);
  box-shadow: none;
}
.mui-btn-contained:hover { background: var(--mui-primary-dark); }

.mui-btn-contained .material-icons-outlined {
  font-size: 18px;
}

.mui-btn-outlined {
  background: var(--mui-background-paper);
  border: 1px solid var(--mui-divider);
  color: var(--mui-text-primary);
  min-height: 40px;
}
.mui-btn-outlined:hover {
  border-color: var(--mui-primary-main);
  color: var(--mui-primary-main);
}

.mui-btn-export {
  background: var(--mui-primary-50);
  color: var(--mui-primary-dark);
  border: 1px solid var(--mui-primary-border-light);
  min-height: 40px;
}
.mui-btn-export:hover {
  background: #e5f3fd;
  border-color: var(--mui-primary-border-light);
}

/* Legacy flat fields (toolbar search, etc.) — MUI Outlined colors */
.mui-textfield {
  width: 100%;
  min-width: 0;
}

.mui-textfield-label {
  display: block;
  font-size: var(--font-size-caption);
  font-weight: var(--font-weight-medium);
  color: var(--mui-input-label-rest);
  margin: 0 0 6px;
  line-height: 1.43;
}

.mui-textfield-input,
.mui-textfield-select,
textarea.mui-textfield-input {
  box-sizing: border-box;
  display: block;
  width: 100%;
  min-height: var(--mui-outlined-height);
  margin: 0;
  padding: 8.5px var(--mui-outlined-padding-x);
  font-family: var(--font-family);
  font-size: var(--font-size-body2);
  font-weight: 400;
  line-height: 1.4375em;
  color: var(--mui-text-primary);
  background: var(--mui-background-paper);
  border: 1px solid var(--mui-outlined-border-color);
  border-radius: var(--radius-sm);
  outline: none;
  transition: border-color 200ms cubic-bezier(0.4, 0, 0.2, 1), border-width 200ms cubic-bezier(0.4, 0, 0.2, 1);
  -webkit-appearance: none;
  appearance: none;
}

.mui-textfield-input:not(textarea) {
  height: var(--mui-outlined-height);
}

.mui-textfield-select {
  padding-right: 32px;
  cursor: pointer;
  background-image: var(--mui-select-icon-down);
  background-repeat: no-repeat;
  background-position: right 7px center;
  background-size: 24px;
}

.mui-textfield-input:hover,
.mui-textfield-select:hover,
textarea.mui-textfield-input:hover {
  border-color: var(--mui-outlined-border-hover);
}

.mui-textfield-input:focus,
.mui-textfield-select:focus,
textarea.mui-textfield-input:focus {
  border-color: var(--mui-outlined-border-focus);
  border-width: 2px;
  padding: 7.5px 13px;
}

.mui-textfield-select:focus {
  padding-right: 31px;
  background-image: var(--mui-select-icon-down);
}

textarea.mui-textfield-input {
  height: auto;
  min-height: 96px;
  resize: vertical;
  padding-top: 12px;
  padding-bottom: 12px;
}

textarea.mui-textfield-input:focus {
  padding-top: 11px;
  padding-bottom: 11px;
}

.mui-textfield-input::placeholder,
textarea.mui-textfield-input::placeholder {
  color: var(--mui-input-label-rest);
  opacity: 1;
}

/* MUI FormControl + OutlinedInput + InputLabel + Select */
.mui-form-control {
  display: inline-flex;
  flex-direction: column;
  width: 100%;
  min-width: 0;
  position: relative;
  margin: 0;
}

.mui-outlined-root {
  position: relative;
  display: inline-flex;
  align-items: center;
  width: 100%;
  font-family: var(--font-family);
  color: var(--mui-text-primary);
}

.mui-outlined-input {
  box-sizing: border-box;
  width: 100%;
  margin: 0;
  padding: 8.5px var(--mui-outlined-padding-x);
  font-family: inherit;
  font-size: var(--mui-outlined-font-size);
  font-weight: 400;
  line-height: 1.4375em;
  letter-spacing: 0.00938em;
  color: var(--mui-text-primary);
  background: transparent;
  border: none;
  outline: none;
  position: relative;
  z-index: 1;
  -webkit-appearance: none;
  appearance: none;
}

.mui-outlined-input:not(.mui-outlined-textarea) {
  height: var(--mui-outlined-height);
}

.mui-outlined-select {
  padding-right: 32px;
  cursor: pointer;
  background-image: var(--mui-select-icon-down);
  background-repeat: no-repeat;
  background-position: right 7px center;
  background-size: 24px;
  transition: background-image 200ms cubic-bezier(0.4, 0, 0.2, 1);
}

.mui-form-control.is-open .mui-outlined-select {
  background-image: var(--mui-select-icon-up);
}

.mui-outlined-input[type='date']::-webkit-calendar-picker-indicator {
  cursor: pointer;
  opacity: 0.65;
}

.mui-outlined-textarea {
  min-height: 96px;
  height: auto;
  resize: vertical;
  padding-top: 16px;
  padding-bottom: 16px;
}

.mui-outlined-label {
  position: absolute;
  left: var(--mui-outlined-padding-x);
  top: 50%;
  transform: translate(0, -50%);
  transform-origin: left center;
  font-size: var(--mui-outlined-label-font-size);
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0.00938em;
  color: var(--mui-input-label-rest);
  pointer-events: none;
  z-index: 2;
  max-width: calc(100% - 28px);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  transition: color 200ms cubic-bezier(0, 0, 0.2, 1) 0ms,
    transform 200ms cubic-bezier(0, 0, 0.2, 1) 0ms,
    max-width 200ms cubic-bezier(0, 0, 0.2, 1) 0ms;
}

.mui-outlined-notched {
  position: absolute;
  inset: 0;
  top: -5px;
  margin: 0;
  padding: 0 8px;
  border: 1px solid var(--mui-outlined-border-color);
  border-radius: var(--radius-sm);
  pointer-events: none;
  overflow: hidden;
  min-width: 0;
  transition: border-color 200ms cubic-bezier(0.4, 0, 0.2, 1),
    border-width 200ms cubic-bezier(0.4, 0, 0.2, 1);
}

.mui-outlined-notched legend {
  float: unset;
  display: block;
  width: auto;
  max-width: 0.01px;
  padding: 0;
  height: 11px;
  font-size: 0.75em;
  visibility: hidden;
  white-space: nowrap;
  transition: max-width 100ms cubic-bezier(0, 0, 0.2, 1) 50ms;
}

.mui-outlined-notched legend > span {
  display: inline-block;
  padding-left: 5px;
  padding-right: 5px;
  opacity: 0;
  visibility: visible;
}

.mui-form-control:not(.is-disabled):not(.is-error) .mui-outlined-root:hover .mui-outlined-notched {
  border-color: var(--mui-outlined-border-hover);
}

.mui-form-control.is-focused:not(.is-error) .mui-outlined-notched {
  border-width: 2px;
  border-color: var(--mui-outlined-border-focus);
}

.mui-form-control.is-focused:not(.is-error) .mui-outlined-root:hover .mui-outlined-notched {
  border-color: var(--mui-outlined-border-focus);
}

.mui-form-control.is-disabled .mui-outlined-input {
  color: var(--mui-text-disabled);
  -webkit-text-fill-color: var(--mui-text-disabled);
  cursor: not-allowed;
}

.mui-form-control.is-disabled .mui-outlined-notched {
  border-color: var(--mui-outlined-border-color);
}

.mui-form-control.is-disabled .mui-outlined-label {
  color: var(--mui-text-disabled);
}

.mui-form-control.is-disabled .mui-outlined-root:hover .mui-outlined-notched {
  border-color: var(--mui-outlined-border-color);
}

.mui-form-control.is-error .mui-outlined-notched {
  border-color: var(--mui-error-main);
}

.mui-form-control.is-error.is-focused .mui-outlined-notched {
  border-width: 2px;
  border-color: var(--mui-error-main);
}

.mui-form-control.is-error .mui-outlined-label,
.mui-form-control.is-error.is-focused .mui-outlined-label {
  color: var(--mui-error-main);
}

.mui-form-control.is-error .mui-outlined-root:hover .mui-outlined-notched {
  border-color: var(--mui-error-main);
}

.mui-form-control.is-focused .mui-outlined-label,
.mui-form-control.is-filled .mui-outlined-label,
.mui-form-control.is-date-field .mui-outlined-label {
  top: 0;
  transform: translate(8px, -9px) scale(var(--mui-outlined-label-shrink));
  color: var(--mui-input-label-rest);
  background: var(--mui-background-paper);
  padding: 0 5px;
  max-width: calc(133% - 32px);
}

.mui-form-control.is-focused .mui-outlined-label,
.mui-form-control.is-date-field.is-focused .mui-outlined-label {
  color: var(--mui-input-label-focus);
}

.mui-form-control.is-focused .mui-outlined-notched legend,
.mui-form-control.is-filled .mui-outlined-notched legend,
.mui-form-control.is-date-field .mui-outlined-notched legend {
  max-width: 100%;
  transition: max-width 100ms cubic-bezier(0, 0, 0.2, 1) 50ms;
}

/* legend span chỉ dùng để tính notch — không hiển thị (tránh trùng label) */
.mui-form-control.is-focused .mui-outlined-notched legend > span,
.mui-form-control.is-filled .mui-outlined-notched legend > span,
.mui-form-control.is-date-field .mui-outlined-notched legend > span {
  opacity: 0;
}

.mui-outlined-input::placeholder {
  color: transparent;
  opacity: 0;
}

.mui-outlined-label .mui-required {
  color: var(--mui-error-main, #d32f2f);
}

.mui-form-control.is-focused .mui-outlined-select,
.mui-form-control.is-filled .mui-outlined-select {
  background-image: var(--mui-select-icon-down);
}

.mui-form-control.is-focused.is-open .mui-outlined-select {
  background-image: var(--mui-select-icon-up);
}

/* Custom MUI Select menu — modal forms */
.mui-select-native {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
  opacity: 0 !important;
  pointer-events: none !important;
  z-index: 0;
}

.mui-select-trigger {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  width: 100%;
  cursor: pointer;
  user-select: none;
}

.mui-select-trigger:focus,
.mui-select-trigger:focus-visible {
  outline: none;
}

.mui-select-trigger__value {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mui-select-menu {
  position: fixed;
  z-index: 1500;
  margin: 0;
  padding: 8px 0;
  list-style: none;
  background: var(--mui-background-paper);
  border-radius: 8px;
  box-shadow:
    0 5px 5px -3px rgba(0, 0, 0, 0.2),
    0 8px 10px 1px rgba(0, 0, 0, 0.14),
    0 3px 14px 2px rgba(0, 0, 0, 0.12);
  max-height: min(280px, 40vh);
  overflow-y: auto;
  overscroll-behavior: contain;
}

.mui-select-menu[hidden] {
  display: none !important;
}

.mui-select-option {
  padding: 6px 16px;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0.00938em;
  color: var(--mui-text-primary);
  cursor: pointer;
  transition: background-color 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
}

.mui-select-menu:not(.mui-select-menu--filter) .mui-select-option:hover,
.mui-select-menu:not(.mui-select-menu--filter) .mui-select-option.is-highlighted,
.mui-select-menu:not(.mui-select-menu--filter) .mui-select-option.is-selected {
  background-color: var(--mui-primary-100);
}

.mui-outlined-textarea + .mui-outlined-label {
  top: 18px;
  transform: translate(0, 0);
}

.mui-form-control.is-focused .mui-outlined-textarea + .mui-outlined-label,
.mui-form-control.is-filled .mui-outlined-textarea + .mui-outlined-label {
  top: 0;
  transform: translate(8px, -9px) scale(var(--mui-outlined-label-shrink));
}

/* MuiCard */
.mui-card {
  background: var(--mui-background-paper);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-1);
}

/* StatusChip — tvf-sales-hub StatusChip.tsx / Figma */
.mui-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 20px;
  min-width: 56px;
  padding: 2px 16px;
  border-radius: 99px;
  font-size: 10px;
  font-weight: var(--font-weight-semibold);
  line-height: 12.19px;
  color: #fff;
  text-transform: capitalize;
  white-space: nowrap;
}
.mui-chip-active { background: #20a4a9; }
.mui-chip-inactive { background: #82868c; }
.mui-chip-archived { background: #7874fe; }
.mui-chip-new { background: #ffaf46; }
.mui-chip-in-progress { background: #5cbafe; }
.mui-chip-on-hold { background: #ff9777; }
.mui-chip-closed { background: #82868c; }
.mui-chip-draft { background: #ffaf46; }
.mui-chip-booking { background: #7874fe; }
.mui-chip-pending { background: #ffaf46; }
.mui-chip-sent { background: #1f84eb; }
.mui-chip-overdue { background: #fc105c; }
.mui-chip-paid { background: #20a4a9; }
.mui-chip-write-off,
.mui-chip-void { background: #82868c; }
.mui-chip-accounted { background: #ff9777; }
.mui-chip-receivable { background: #ffaf46; }
.mui-chip-plan { background: #20a4a9; }
.mui-chip-lock { background: #fc105c; }
.mui-chip-confirmed { background: #20a4a9; }

.material-icons-outlined {
  font-family: 'Material Icons Outlined';
  font-weight: normal;
  font-style: normal;
  font-size: 20px;
  line-height: 1;
  letter-spacing: normal;
  vertical-align: middle;
}