/* ==========================================================================
   Buyur Design System — component styles for EscolaTEPM.DesignSystem.
   Every value below is a var() reference into tokens.css — no hardcoded
   hex/px/font per the source adherence rules (see /DESIGN.md and
   wwwroot/design-system/reference/_adherence.oxlintrc.json).
   Classes are prefixed `ds-` and never touch an unprefixed element selector,
   so this file is safe to load globally alongside the existing MudBlazor UI.
   ========================================================================== */

/* ---- scoped base reset (source tokens/base.css, confined to .ds-scope so it
   never leaks onto existing MudBlazor pages) ------------------------------ */
.ds-scope {
  font-family: var(--font-sans);
  font-size: var(--fs-p4);
  font-weight: var(--fw-p4);
  line-height: var(--lh-p4);
  color: var(--text-body);
  background: var(--surface-app);
  -webkit-font-smoothing: antialiased;
}
.ds-scope h1, .ds-scope h2, .ds-scope h3, .ds-scope h4, .ds-scope h5, .ds-scope h6 { margin: 0; font-family: var(--font-sans); }
.ds-scope h1 { font-size: var(--fs-h1); font-weight: var(--fw-h1); line-height: var(--lh-h1); }
.ds-scope h2 { font-size: var(--fs-h2); font-weight: var(--fw-h2); line-height: var(--lh-h2); }
.ds-scope h3 { font-size: var(--fs-h3); font-weight: var(--fw-h3); line-height: var(--lh-h3); }
.ds-scope h4 { font-size: var(--fs-h4); font-weight: var(--fw-h4); line-height: var(--lh-h4); }
.ds-scope h5 { font-size: var(--fs-h5); font-weight: var(--fw-h5); line-height: var(--lh-h5); }
.ds-scope h6 { font-size: var(--fs-h6); font-weight: var(--fw-h6); line-height: var(--lh-h6); }
.ds-scope p { margin: 0; }
.ds-scope a { color: var(--text-brand); text-decoration: none; }
.ds-scope a:hover { color: var(--black); text-decoration: underline; }
.ds-scope button { font-family: inherit; }
.ds-scope *, .ds-scope *::before, .ds-scope *::after { box-sizing: border-box; }

/* ---- Icon ---------------------------------------------------------------- */
.ds-icon { display: inline-flex; flex: 0 0 auto; }

/* ---- Button --------------------------------------------------------------
   variant: primary | secondary | accent | ghost | link | danger
   size: sm | md | lg */
.ds-btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--space-2); font-family: var(--font-sans); font-weight: var(--fw-semibold);
  border-radius: var(--radius-md); border: none; cursor: pointer;
  transition: background var(--duration-base) var(--ease-standard), color var(--duration-base) var(--ease-standard);
  white-space: nowrap;
}
.ds-btn:disabled { cursor: not-allowed; background: var(--action-disabled-bg) !important; color: var(--action-disabled-text) !important; }
.ds-btn--sm { height: 34px; padding: 0 14px; font-size: 13px; }
.ds-btn--md { height: 42px; padding: 0 18px; font-size: 14px; }
.ds-btn--lg { height: 48px; padding: 0 24px; font-size: 16px; }
.ds-btn--full-width { width: 100%; }
.ds-btn--primary { background: var(--action-primary-bg); color: var(--action-primary-text); }
.ds-btn--primary:hover:not(:disabled) { background: var(--action-primary-bg-hover); }
.ds-btn--secondary { background: var(--action-secondary-bg); color: var(--action-secondary-text); }
.ds-btn--secondary:hover:not(:disabled) { background: var(--action-secondary-bg-hover); }
.ds-btn--accent { background: var(--action-accent-bg); color: var(--action-accent-text); }
.ds-btn--accent:hover:not(:disabled) { background: #BDF158; }
.ds-btn--ghost { background: transparent; color: var(--text-body); }
.ds-btn--ghost:hover:not(:disabled) { background: var(--surface-muted); }
.ds-btn--link { background: transparent; color: var(--text-body); text-decoration: underline; padding: 0; height: auto; }
.ds-btn--danger { background: var(--state-error); color: var(--white); }
.ds-btn--danger:hover:not(:disabled) { background: #DE2F1E; }

/* ---- IconButton ------------------------------------------------------------
   size in px via inline style (--ds-size); variant: ghost | solid | danger | outline */
.ds-icon-btn {
  width: var(--ds-size, 38px); height: var(--ds-size, 38px); display: grid; place-items: center; flex: 0 0 auto;
  border: none; border-radius: var(--radius-md); cursor: pointer;
  transition: background var(--duration-base) var(--ease-standard);
}
.ds-icon-btn--ghost { background: transparent; color: var(--text-body); }
.ds-icon-btn--ghost:hover { background: var(--surface-muted); }
.ds-icon-btn--solid { background: var(--action-primary-bg); color: var(--white); border-radius: var(--radius-sm); }
.ds-icon-btn--solid:hover { background: var(--action-primary-bg-hover); }
.ds-icon-btn--danger { background: var(--state-error); color: var(--white); border-radius: var(--radius-sm); }
.ds-icon-btn--danger:hover { background: #DE2F1E; }
.ds-icon-btn--outline { background: var(--surface-card); color: var(--text-body); box-shadow: inset 0 0 0 1px var(--border-subtle); }
.ds-icon-btn--outline:hover { background: var(--surface-muted); }

/* ---- Badge ---------------------------------------------------------------- */
.ds-badge { width: var(--ds-size, 10px); height: var(--ds-size, 10px); border-radius: 50%; flex: 0 0 auto; display: inline-block; }

/* ---- Avatar / UserChip ----------------------------------------------------- */
.ds-avatar {
  width: var(--ds-size, 38px); height: var(--ds-size, 38px); border-radius: 50%; overflow: hidden; flex: 0 0 auto;
  background: var(--gray-200); display: grid; place-items: center; color: var(--text-muted); font-weight: var(--fw-bold);
}
.ds-avatar img { width: 100%; height: 100%; object-fit: cover; }
.ds-user-chip { display: inline-flex; align-items: center; gap: var(--space-3); }
.ds-user-chip__text { display: grid; line-height: 1.25; }
.ds-user-chip__name { font-size: 14px; font-weight: var(--fw-semibold); color: var(--text-heading); }
.ds-user-chip__role { font-size: 12px; font-weight: var(--fw-medium); color: var(--text-muted); }

/* ---- Card / CardHeader ------------------------------------------------------ */
.ds-card { background: var(--surface-card); border-radius: var(--radius-xl); box-shadow: var(--shadow-sm); padding: var(--space-6); min-width: 0; }
.ds-card-header { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); margin-bottom: var(--space-5); }
.ds-card-header__title { font-size: 20px; font-weight: var(--fw-bold); color: var(--text-heading); margin: 0; }

/* ---- SectionTitle ------------------------------------------------------------ */
.ds-section-title { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); }
.ds-section-title__left { display: flex; align-items: center; gap: var(--space-4); min-width: 0; }
.ds-section-title__back { display: inline-flex; align-items: center; gap: 6px; background: none; border: none; cursor: pointer; padding: 0; font-size: 14px; font-weight: var(--fw-semibold); color: var(--text-body); }
.ds-section-title__heading { font-size: 18px; font-weight: var(--fw-semibold); color: var(--text-heading); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin: 0; }

/* ---- StatusChip ---------------------------------------------------------------
   tone: neutral | lime | limeSoft | success | successBright | error | warning | orange | blue | turquoise | pink | purple | dark */
.ds-status-chip { display: inline-flex; align-items: center; justify-content: center; border-radius: var(--radius-pill); font-weight: var(--fw-semibold); font-family: var(--font-sans); }
.ds-status-chip--sm { height: 24px; padding: 0 10px; font-size: 11px; }
.ds-status-chip--md { height: 30px; padding: 0 14px; font-size: 13px; }
.ds-status-chip--neutral { background: var(--surface-muted); color: var(--text-muted); }
.ds-status-chip--lime { background: var(--lime-300); color: var(--black); }
.ds-status-chip--limeSoft { background: var(--lime-100); color: var(--black); }
.ds-status-chip--success { background: var(--data-green); color: var(--white); }
.ds-status-chip--successBright { background: var(--success); color: var(--black); }
.ds-status-chip--error { background: var(--state-error); color: var(--white); }
.ds-status-chip--warning { background: var(--data-yellow); color: var(--black); }
.ds-status-chip--orange { background: var(--data-orange); color: var(--white); }
.ds-status-chip--blue { background: var(--data-blue); color: var(--white); }
.ds-status-chip--turquoise { background: var(--data-turquoise); color: var(--black); }
.ds-status-chip--pink { background: var(--data-punch-pink); color: var(--white); }
.ds-status-chip--purple { background: var(--data-purple); color: var(--white); }
.ds-status-chip--dark { background: var(--black); color: var(--white); }

/* ---- Calendar (compact month picker) ------------------------------------------ */
.ds-calendar { min-width: 0; }
.ds-calendar__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--space-4); }
.ds-calendar__title { font-size: 17px; font-weight: var(--fw-bold); color: var(--text-heading); }
.ds-calendar__nav { display: flex; gap: 6px; }
.ds-calendar__nav-btn { width: 28px; height: 28px; border-radius: 50%; border: none; box-shadow: inset 0 0 0 1px var(--border-subtle); background: var(--surface-card); cursor: pointer; display: grid; place-items: center; color: var(--text-body); }
.ds-calendar__grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: var(--space-2); }
.ds-calendar__dow { text-align: center; font-size: 12px; font-weight: var(--fw-semibold); color: var(--text-muted); padding-bottom: 2px; }
.ds-calendar__day { aspect-ratio: 1 / 1; border: none; border-radius: 50%; cursor: pointer; background: transparent; color: var(--text-body); font-family: var(--font-sans); font-size: 14px; font-weight: var(--fw-semibold); display: grid; place-items: center; transition: background var(--duration-fast) var(--ease-standard); }
.ds-calendar__day--available { background: var(--data-green); color: var(--white); }
.ds-calendar__day--blocked { background: var(--state-error); color: var(--white); }
.ds-calendar__day--selected { background: var(--black); color: var(--white); }

/* ---- CalendarBoard (full month grid) ------------------------------------------- */
.ds-calendar-board { min-width: 0; }
.ds-calendar-board__head { display: flex; align-items: center; justify-content: center; gap: var(--space-5); margin-bottom: var(--space-4); }
.ds-calendar-board__nav-btn { width: 30px; height: 30px; border-radius: 50%; border: none; box-shadow: inset 0 0 0 1px var(--border-subtle); background: var(--surface-card); cursor: pointer; display: grid; place-items: center; }
.ds-calendar-board__title { font-size: 18px; font-weight: var(--fw-bold); color: var(--text-heading); }
.ds-calendar-board__grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); border-top: 1px solid var(--divider); border-left: 1px solid var(--divider); }
.ds-calendar-board__dow { padding: 10px 12px; font-size: 13px; font-weight: var(--fw-semibold); color: var(--text-muted); border-right: 1px solid var(--divider); border-bottom: 1px solid var(--divider); text-align: center; }
.ds-calendar-board__cell { min-height: 92px; padding: 8px; border-right: 1px solid var(--divider); border-bottom: 1px solid var(--divider); display: grid; gap: 6px; align-content: start; min-width: 0; }
.ds-calendar-board__daynum { justify-self: start; min-width: 24px; height: 24px; padding: 0 6px; border-radius: 50%; display: grid; place-items: center; font-size: 13px; font-weight: var(--fw-semibold); color: var(--text-muted); }
.ds-calendar-board__daynum--today { background: var(--black); color: var(--white); }
.ds-calendar-board__daynum--empty { color: var(--gray-200); }
.ds-calendar-board__event { color: var(--white); border-radius: var(--radius-pill); padding: 6px 10px; display: flex; align-items: center; gap: 6px; min-width: 0; }
.ds-calendar-board__event-text { flex: 1; min-width: 0; font-size: 11px; font-weight: var(--fw-semibold); line-height: 1.3; overflow: hidden; }

/* ---- ChartFrame / charts --------------------------------------------------------- */
.ds-chart-frame { display: grid; gap: var(--space-4); min-width: 0; }
.ds-chart-frame__legend { display: flex; gap: var(--space-5); flex-wrap: wrap; }
.ds-chart-frame__legend-item { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; font-weight: var(--fw-medium); color: var(--text-body); }
.ds-chart-frame__legend-dot { width: 10px; height: 10px; border-radius: 50%; }
.ds-chart-svg { width: 100%; height: auto; display: block; overflow: visible; }
.ds-period-pill { display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 var(--space-4); border-radius: var(--radius-pill); box-shadow: inset 0 0 0 1px var(--border-subtle); background: var(--surface-card); font-size: 13px; font-weight: var(--fw-semibold); color: var(--text-body); cursor: pointer; white-space: nowrap; border: none; }

/* ---- DataTable ----------------------------------------------------------------- */
.ds-table-wrap { background: var(--surface-card); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); overflow: hidden; }
.ds-table-scroll { overflow-x: auto; }
.ds-table { width: 100%; border-collapse: collapse; font-family: var(--font-sans); }
.ds-table thead tr { background: var(--surface-inverse); }
.ds-table th { font-size: 13px; font-weight: var(--fw-semibold); color: var(--white); white-space: nowrap; padding: 14px 16px; }
.ds-table--dense th { padding: 10px 14px; }
.ds-table td { font-size: 14px; font-weight: var(--fw-medium); color: var(--text-body); vertical-align: middle; padding: 14px 16px; border-bottom: 1px solid var(--divider); }
.ds-table--dense td { padding: 10px 14px; }
.ds-table tbody tr:last-child td { border-bottom: none; }
.ds-table tbody tr:hover { background: var(--surface-app); }
.ds-table tbody tr.ds-table__row--clickable { cursor: pointer; }
.ds-table tbody tr { transition: background var(--duration-fast) var(--ease-standard); }

/* ---- ListingCard ------------------------------------------------------------------ */
.ds-listing-card { background: var(--surface-card); border-radius: var(--radius-xl); box-shadow: var(--shadow-sm); padding: var(--space-3); display: flex; gap: var(--space-3); align-items: stretch; min-width: 0; text-align: left; border: none; width: 100%; }
.ds-listing-card--clickable { cursor: pointer; }
.ds-listing-card__hero { width: 232px; flex: 0 0 auto; border-radius: var(--radius-lg); overflow: hidden; background: var(--gray-200); }
.ds-listing-card__hero img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ds-listing-card__thumbs { display: grid; gap: var(--space-2); width: 74px; flex: 0 0 auto; }
.ds-listing-card__thumb { border-radius: var(--radius-md); overflow: hidden; background: var(--gray-200); min-height: 0; }
.ds-listing-card__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ds-listing-card__body { flex: 1; min-width: 0; padding: var(--space-2) var(--space-3); display: grid; gap: var(--space-4); align-content: start; }
.ds-listing-card__title-row { display: flex; align-items: flex-start; gap: var(--space-3); }
.ds-listing-card__title { flex: 1; min-width: 0; font-size: 18px; font-weight: var(--fw-bold); color: var(--text-heading); margin: 0; }
.ds-listing-card__meta { display: grid; gap: var(--space-4); }
.ds-listing-card__meta-label { font-size: 13px; font-weight: var(--fw-medium); color: var(--text-muted); }
.ds-listing-card__meta-value { font-size: 15px; font-weight: var(--fw-semibold); color: var(--text-body); }
.ds-listing-card__features-label { font-size: 13px; font-weight: var(--fw-medium); color: var(--text-muted); }
.ds-listing-card__features { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--space-2) var(--space-5); }
.ds-listing-card__feature { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: var(--fw-medium); color: var(--text-body); min-width: 0; }
.ds-listing-card__feature-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---- MessageListItem / ChatBubble --------------------------------------------------- */
.ds-message-item { display: flex; align-items: center; gap: var(--space-3); width: 100%; text-align: left; border: none; cursor: pointer; padding: 10px 12px; border-radius: var(--radius-md); background: transparent; transition: background var(--duration-fast) var(--ease-standard); min-width: 0; }
.ds-message-item:hover { background: var(--surface-app); }
.ds-message-item--active { background: var(--lime-050); box-shadow: inset 3px 0 0 var(--lime-300); }
.ds-message-item--active:hover { background: var(--lime-050); }
.ds-message-item__avatar-wrap { position: relative; flex: 0 0 auto; }
.ds-message-item__presence { position: absolute; right: -1px; bottom: -1px; width: 10px; height: 10px; border-radius: 50%; background: var(--data-green); box-shadow: 0 0 0 2px var(--surface-card); }
.ds-message-item__text { flex: 1; min-width: 0; display: grid; gap: 2px; }
.ds-message-item__name { font-size: 14px; font-weight: var(--fw-semibold); color: var(--text-heading); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ds-message-item__preview { font-size: 12px; font-weight: var(--fw-medium); color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ds-message-item__side { display: grid; justify-items: end; gap: 4px; flex: 0 0 auto; }
.ds-message-item__time { font-size: 11px; font-weight: var(--fw-medium); color: var(--text-muted); }
.ds-message-item__unread { min-width: 18px; height: 18px; padding: 0 5px; border-radius: 50%; background: var(--data-green); color: var(--white); font-size: 11px; font-weight: var(--fw-bold); display: grid; place-items: center; }

.ds-chat-bubble { display: flex; gap: var(--space-3); align-items: flex-end; }
.ds-chat-bubble--outgoing { flex-direction: row-reverse; }
.ds-chat-bubble__col { display: grid; gap: 4px; max-width: 68%; }
.ds-chat-bubble--outgoing .ds-chat-bubble__col { justify-items: end; }
.ds-chat-bubble--incoming .ds-chat-bubble__col { justify-items: start; }
.ds-chat-bubble__bubble { border-radius: var(--radius-md); padding: 10px 14px; font-size: 13px; font-weight: var(--fw-medium); line-height: 1.5; }
.ds-chat-bubble--outgoing .ds-chat-bubble__bubble { background: var(--data-green); color: var(--white); }
.ds-chat-bubble--incoming .ds-chat-bubble__bubble { background: var(--surface-muted); color: var(--text-body); }
.ds-chat-bubble__time { font-size: 11px; font-weight: var(--fw-medium); color: var(--text-muted); }

/* ---- NoteCard --------------------------------------------------------------------- */
.ds-note-card { background: var(--surface-inverse); color: var(--white); border-radius: var(--radius-lg); padding: var(--space-4); display: grid; gap: 6px; min-width: 0; }
.ds-note-card__author { font-size: 14px; font-weight: var(--fw-bold); }
.ds-note-card__body { font-size: 12px; font-weight: var(--fw-medium); line-height: 1.55; color: #E6E6E6; }

/* ---- ProductTile ------------------------------------------------------------------- */
.ds-product-tile { background: var(--surface-card); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); padding: var(--space-3); display: grid; gap: var(--space-3); min-width: 0; }
.ds-product-tile__image { aspect-ratio: 1 / 1; border-radius: var(--radius-md); overflow: hidden; background: var(--surface-muted); }
.ds-product-tile__image img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ds-product-tile__row { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-2); min-width: 0; }
.ds-product-tile__name { font-size: 15px; font-weight: var(--fw-semibold); color: var(--text-heading); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ds-product-tile__price { font-size: 15px; font-weight: var(--fw-semibold); color: var(--text-body); flex: 0 0 auto; }

/* ---- StatCard / ServiceStatGroup / PerformanceBanner ------------------------------- */
.ds-stat-card { background: var(--surface-card); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); padding: var(--space-5) var(--space-6); display: grid; gap: 4px; min-width: 0; }
.ds-stat-card--compact { padding: 14px 16px; }
.ds-stat-card--center { justify-items: center; text-align: center; }
.ds-stat-card--left { justify-items: start; text-align: left; }
.ds-stat-card__value { font-size: 30px; font-weight: var(--fw-bold); line-height: 1.1; }
.ds-stat-card--compact .ds-stat-card__value { font-size: 22px; }
.ds-stat-card__label { font-size: 14px; font-weight: var(--fw-medium); color: var(--text-muted); }
.ds-stat-card--compact .ds-stat-card__label { font-size: 12px; }
.ds-kpi-1 { color: var(--kpi-1); } .ds-kpi-2 { color: var(--kpi-2); } .ds-kpi-3 { color: var(--kpi-3); } .ds-kpi-4 { color: var(--kpi-4); }

.ds-service-stat-group { background: var(--surface-card); border-radius: var(--radius-xl); box-shadow: var(--shadow-sm); padding: var(--space-5); display: grid; gap: var(--space-4); min-width: 0; }
.ds-service-stat-group__head { display: flex; align-items: center; gap: var(--space-3); }
.ds-service-stat-group__icon { width: 30px; height: 30px; border-radius: var(--radius-sm); display: grid; place-items: center; }
.ds-service-stat-group__name { font-size: 16px; font-weight: var(--fw-bold); color: var(--text-heading); }
.ds-service-stat-group__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: var(--space-3); }
.ds-service-stat-group__cell { background: var(--surface-muted); border-radius: var(--radius-md); padding: 12px 14px; display: grid; gap: 2px; min-width: 0; }
.ds-service-stat-group__cell-value { font-size: 20px; font-weight: var(--fw-bold); line-height: 1.1; }
.ds-service-stat-group__cell-label { font-size: 12px; font-weight: var(--fw-medium); color: var(--text-muted); }

.ds-performance-banner { background: var(--surface-inverse); border-radius: var(--radius-xl); padding: var(--space-5); display: grid; gap: var(--space-4); min-width: 0; }
.ds-performance-banner__head { display: flex; align-items: center; gap: var(--space-3); }
.ds-performance-banner__icon { width: 28px; height: 28px; border-radius: var(--radius-xs); background: var(--lime-300); color: var(--black); display: grid; place-items: center; }
.ds-performance-banner__title { font-size: 16px; font-weight: var(--fw-bold); color: var(--white); }
.ds-performance-banner__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--space-3); }
.ds-performance-banner__cell { background: var(--surface-card); border-radius: var(--radius-md); padding: 14px 16px; display: grid; gap: 2px; min-width: 0; }
.ds-performance-banner__cell-value { font-size: 22px; font-weight: var(--fw-bold); line-height: 1.1; }
.ds-performance-banner__cell-label { font-size: 12px; font-weight: var(--fw-medium); color: var(--text-muted); }

/* ---- UploadZone / MediaSlot --------------------------------------------------------- */
.ds-upload-zone { display: grid; place-items: center; gap: var(--space-3); padding: var(--space-8); border-radius: var(--radius-lg); background: var(--surface-app); outline: 1.5px dashed var(--border-subtle); outline-offset: -2px; text-align: center; transition: background var(--duration-base) var(--ease-standard); }
.ds-upload-zone--over { background: var(--lime-050); outline-color: var(--green-900); }
.ds-upload-zone__primary { font-size: 13px; font-weight: var(--fw-semibold); color: var(--text-body); }
.ds-upload-zone__hint { font-size: 12px; font-weight: var(--fw-medium); color: var(--text-muted); }

.ds-media-slot { display: grid; gap: 6px; min-width: 0; }
.ds-media-slot__caption { font-size: 13px; font-weight: var(--fw-semibold); color: var(--text-body); }
.ds-media-slot__required { color: var(--state-error); }
.ds-media-slot__frame { position: relative; border-radius: var(--radius-md); overflow: hidden; background: var(--surface-muted); }
.ds-media-slot__frame img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ds-media-slot__remove { position: absolute; top: 8px; right: 8px; width: 24px; height: 24px; border-radius: var(--radius-xs); border: none; background: var(--white); box-shadow: var(--shadow-sm); cursor: pointer; display: grid; place-items: center; }

/* ---- Checkbox / CheckboxGrid --------------------------------------------------------- */
.ds-checkbox-box { width: 20px; height: 20px; border-radius: var(--radius-xs); flex: 0 0 auto; display: grid; place-items: center; background: var(--surface-card); box-shadow: inset 0 0 0 1px var(--border-input); transition: background var(--duration-fast) var(--ease-standard); }
.ds-checkbox-box--checked { background: var(--black); box-shadow: none; }
.ds-checkbox-input { position: absolute; opacity: 0; width: 0; height: 0; }
.ds-checkbox-label { display: flex; align-items: center; gap: var(--space-3); cursor: pointer; justify-content: space-between; position: relative; }
.ds-checkbox-label--disabled { cursor: not-allowed; opacity: .55; }
.ds-checkbox-label__left { display: flex; align-items: center; gap: var(--space-3); min-width: 0; }
.ds-checkbox-label__text { font-size: 14px; font-weight: var(--fw-medium); color: var(--text-body); }
.ds-checkbox-grid { display: grid; column-gap: var(--space-8); row-gap: var(--space-4); }

/* ---- Fields: Field / Input / PasswordInput / NumberInput / Textarea / Select ---------- */
.ds-field { min-width: 0; }
.ds-field__label { display: flex; align-items: center; gap: 5px; font-size: 14px; font-weight: var(--fw-semibold); color: var(--text-heading); margin-bottom: 6px; }
.ds-field__label--disabled { color: var(--text-muted); }
.ds-field__required { color: var(--state-error); }
.ds-field__help { display: flex; align-items: center; gap: 5px; font-size: 12px; font-weight: var(--fw-medium); margin-top: 6px; color: var(--text-muted); }
.ds-field__help--error { color: var(--state-error); }

.ds-field-shell { display: flex; align-items: center; gap: var(--space-2); width: 100%; height: 44px; padding: 0 14px; border-radius: var(--radius-sm); background: var(--surface-card); box-shadow: inset 0 0 0 1px var(--border-input); transition: box-shadow var(--duration-base) var(--ease-standard); cursor: text; }
.ds-field-shell:hover:not(.ds-field-shell--disabled):not(.ds-field-shell--error) { box-shadow: inset 0 0 0 1px var(--border-input-hover); }
.ds-field-shell:focus-within:not(.ds-field-shell--error) { box-shadow: inset 0 0 0 1px var(--green-900); }
.ds-field-shell--error { box-shadow: inset 0 0 0 1px var(--border-input-error); }
.ds-field-shell--disabled { background: var(--surface-muted); cursor: not-allowed; }
.ds-field-shell--textarea { height: auto; align-items: stretch; padding: 12px 14px; }
.ds-field-shell__control { flex: 1; min-width: 0; border: none; outline: none; background: transparent; font-family: var(--font-sans); font-size: 14px; font-weight: var(--fw-medium); color: var(--text-body); }
.ds-field-shell__control:disabled { color: var(--text-muted); }
.ds-field-shell__control--textarea { resize: vertical; line-height: 1.55; }
.ds-field-shell__toggle { border: none; background: none; padding: 0; cursor: pointer; display: grid; place-items: center; }
.ds-field-shell__prefix { font-size: 14px; font-weight: var(--fw-semibold); color: var(--text-muted); padding-right: 10px; border-right: 1px solid var(--border-subtle); flex: 0 0 auto; }
.ds-field__counter { text-align: right; font-size: 12px; font-weight: var(--fw-medium); color: var(--text-muted); margin-top: 4px; }

.ds-select { position: relative; }
.ds-select__overlay { position: fixed; inset: 0; z-index: 20; background: transparent; border: none; padding: 0; cursor: default; }
.ds-select__control { display: flex; align-items: center; }
.ds-select__control--bare { display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 14px; border-radius: var(--radius-pill); box-shadow: inset 0 0 0 1px var(--border-subtle); background: var(--surface-card); font-size: 13px; font-weight: var(--fw-semibold); color: var(--text-body); cursor: pointer; white-space: nowrap; }
.ds-select__value { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-body); font-size: 14px; font-weight: var(--fw-medium); }
.ds-select__value--placeholder { color: var(--text-muted); }
.ds-select__value--bare { flex: none; font-size: 13px; font-weight: var(--fw-semibold); }
.ds-select__menu { position: absolute; top: calc(100% + 6px); left: 0; min-width: 100%; z-index: 30; background: var(--surface-card); border-radius: var(--radius-sm); box-shadow: var(--shadow-lg); padding: 6px; display: grid; gap: 2px; }
.ds-select__option { text-align: left; border: none; cursor: pointer; padding: 9px 12px; border-radius: var(--radius-xs); font-family: var(--font-sans); font-size: 13px; font-weight: var(--fw-semibold); background: transparent; color: var(--text-body); white-space: nowrap; }
.ds-select__option--selected { background: var(--lime-100); }

/* ---- Header ------------------------------------------------------------------------- */
.ds-header { display: flex; align-items: center; gap: var(--space-5); min-height: var(--header-height); border-bottom: 1px solid var(--divider); }
.ds-header__title { font-size: 28px; font-weight: var(--fw-bold); color: var(--text-heading); flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin: 0; }
.ds-header__title--search { flex: 0 0 auto; }
.ds-header__search-wrap { flex: 1; min-width: 0; display: flex; justify-content: center; }
.ds-header__search { display: flex; align-items: center; gap: 10px; width: 100%; max-width: 420px; height: 42px; padding: 0 14px; border-radius: var(--radius-sm); background: var(--surface-card); box-shadow: inset 0 0 0 1px var(--border-input); }
.ds-header__search-input { flex: 1; min-width: 0; border: none; outline: none; background: transparent; font-family: var(--font-sans); font-size: 14px; font-weight: var(--fw-medium); color: var(--text-body); }
.ds-header__actions { display: flex; align-items: center; gap: var(--space-2); flex: 0 0 auto; }
.ds-header__divider { width: 1px; height: 34px; background: var(--divider); margin: 0 6px; }

/* ---- LanguageSwitcher ----------------------------------------------------------------- */
.ds-lang-switcher__collapsed-btn { height: 44px; display: grid; place-items: center; background: none; border: none; color: var(--white); cursor: pointer; width: 100%; }
.ds-lang-switcher__list { display: grid; gap: 2px; margin-bottom: 2px; }
.ds-lang-switcher__option { display: flex; align-items: center; gap: var(--space-3); height: 38px; padding: 0 14px; border: none; cursor: pointer; border-radius: var(--radius-md); background: transparent; font-family: var(--font-sans); font-size: 14px; font-weight: var(--fw-medium); color: var(--text-sidebar-muted); text-align: left; }
.ds-lang-switcher__option--active { font-weight: var(--fw-bold); color: var(--lime-300); }
.ds-lang-switcher__flag { font-size: 16px; line-height: 1; }
.ds-lang-switcher__toggle { display: flex; align-items: center; gap: var(--space-3); width: 100%; height: 44px; padding: 0 14px; border: none; cursor: pointer; border-radius: var(--radius-md); background: transparent; font-family: var(--font-sans); font-size: 15px; font-weight: var(--fw-semibold); color: var(--white); text-align: left; }
.ds-lang-switcher__toggle-label { flex: 1; }

/* ---- Sidebar / SidebarItem -------------------------------------------------------------- */
.ds-sidebar { width: var(--sidebar-width); flex: 0 0 auto; background: var(--surface-sidebar); border-radius: var(--radius-2xl); padding: var(--space-5) var(--space-3); display: flex; flex-direction: column; transition: width var(--duration-slow) var(--ease-standard); overflow: hidden; }
.ds-sidebar--collapsed { width: var(--sidebar-width-collapsed); }
.ds-sidebar__head { display: flex; align-items: center; justify-content: space-between; padding: 0 8px; margin-bottom: var(--space-6); min-height: 34px; }
.ds-sidebar--collapsed .ds-sidebar__head { justify-content: center; }
.ds-sidebar__logo-text { color: var(--lime-300); font-weight: var(--fw-extrabold); font-size: 20px; }
.ds-sidebar__logo-img { height: 30px; width: auto; }
.ds-sidebar__toggle { background: none; border: none; cursor: pointer; color: var(--white); display: grid; place-items: center; padding: 0; }
.ds-sidebar__nav { display: grid; gap: 4px; align-content: start; }
.ds-sidebar__children { display: grid; gap: 2px; padding-left: 34px; }
.ds-sidebar__child { text-align: left; border: none; background: transparent; color: var(--text-sidebar-muted); cursor: pointer; padding: 8px 12px; border-radius: var(--radius-sm); font-family: var(--font-sans); font-size: 14px; font-weight: var(--fw-medium); }
.ds-sidebar__child--active { background: var(--nav-item-hover-bg); color: var(--lime-300); }
.ds-sidebar__footer { margin-top: auto; display: grid; gap: 4px; }

.ds-sidebar-item { display: flex; align-items: center; gap: var(--space-3); width: 100%; height: 44px; padding: 0 14px; justify-content: flex-start; border: none; cursor: pointer; border-radius: var(--radius-md); font-family: var(--font-sans); font-size: 15px; font-weight: var(--fw-medium); text-align: left; background: transparent; color: var(--nav-item-text); transition: background var(--duration-base) var(--ease-standard); }
.ds-sidebar-item:hover:not(.ds-sidebar-item--active) { background: var(--nav-item-hover-bg); }
.ds-sidebar-item--active { font-weight: var(--fw-semibold); background: var(--nav-item-active-bg); color: var(--nav-item-active-text); box-shadow: var(--shadow-glow-lime); }
.ds-sidebar-item--collapsed { padding: 0; justify-content: center; }
.ds-sidebar-item__label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---- Stepper / StepperHeading -------------------------------------------------------------- */
.ds-stepper { display: flex; align-items: center; width: 100%; }
.ds-stepper__connector { flex: 1; height: 2px; background: var(--border-subtle); transition: background var(--duration-base) var(--ease-standard); }
.ds-stepper__connector--filled { background: var(--black); }
.ds-stepper__step { display: grid; justify-items: center; gap: 6px; flex: 0 0 auto; }
.ds-stepper__dot { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: transparent; box-shadow: inset 0 0 0 1.5px var(--border-strong); color: var(--text-muted); font-size: 13px; font-weight: var(--fw-bold); }
.ds-stepper__dot--filled { background: var(--black); box-shadow: none; color: var(--white); }
.ds-stepper__label { font-size: 12px; font-weight: var(--fw-semibold); color: var(--text-muted); white-space: nowrap; }
.ds-stepper__label--active { color: var(--text-heading); }
.ds-stepper-heading { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-4); font-size: 13px; font-weight: var(--fw-semibold); color: var(--text-muted); }

/* ---- Tabs / FilterTabs ----------------------------------------------------------------------- */
.ds-tabs { display: inline-flex; gap: 4px; padding: 4px; border-radius: var(--radius-md); }
.ds-tabs--dark { background: var(--black); }
.ds-tabs--light { background: var(--surface-muted); }
.ds-tabs__tab { border: none; cursor: pointer; height: 36px; padding: 0 22px; border-radius: var(--radius-sm); font-family: var(--font-sans); font-size: 14px; font-weight: var(--fw-semibold); background: transparent; transition: background var(--duration-base) var(--ease-standard); }
.ds-tabs--dark .ds-tabs__tab { color: var(--white); }
.ds-tabs--light .ds-tabs__tab { color: var(--text-muted); }
.ds-tabs__tab--active { background: var(--lime-300); color: var(--black) !important; }

.ds-filter-tabs { display: flex; gap: var(--space-2); flex-wrap: wrap; }
.ds-filter-tabs__tab { display: inline-flex; align-items: center; gap: 6px; border: none; cursor: pointer; height: 30px; padding: 0 12px; border-radius: var(--radius-pill); font-family: var(--font-sans); font-size: 13px; font-weight: var(--fw-semibold); background: transparent; color: var(--text-body); }
.ds-filter-tabs__tab--active { background: var(--lime-100); }
.ds-filter-tabs__count { min-width: 18px; height: 18px; padding: 0 5px; border-radius: var(--radius-pill); background: var(--surface-muted); color: var(--black); font-size: 11px; font-weight: var(--fw-bold); display: grid; place-items: center; }
.ds-filter-tabs__count--active { background: var(--lime-300); }