/* Loaded as a blocking head stylesheet, before the asynchronous app styles. */
:root {
  --panel-appearance-page: #f8fafc;
  --panel-appearance-ink: #0f172a;
}

:root[data-backoffice-theme='dark'] {
  --panel-appearance-page: #0f172a;
  --panel-appearance-ink: #e8edf5;
  --motomg-color-brand: #b7a5ff;
  --motomg-color-brand-hover: #c8baff;
  --motomg-color-brand-strong: #d6cbff;
  --motomg-color-brand-muted: #b7a5ff;
  --motomg-color-brand-soft: #2c2449;
  --motomg-color-brand-soft-strong: #4c3d72;
  --motomg-color-ink: var(--panel-appearance-ink);
  --motomg-color-ink-soft: #cbd5e1;
  --motomg-color-muted: #b5c0d1;
  --motomg-color-subtle: #a3b1c6;
  --motomg-color-surface: #182235;
  --motomg-color-page: var(--panel-appearance-page);
  --motomg-color-soft: #222f44;
  --motomg-color-border: #334155;
  --motomg-color-border-strong: #64748b;
  --motomg-color-success: #6ee7b7;
  --motomg-color-success-soft: #10382e;
  --motomg-color-danger: #fda4af;
  --motomg-color-danger-strong: #fecdd3;
  --motomg-color-danger-soft: #461e30;
  --motomg-color-warning: #fcd34d;
  --motomg-color-warning-soft: #3d301a;
  --motomg-color-info: #7dd3fc;
  --motomg-color-info-soft: #16364a;
  --motomg-focus-color: #b7a5ff;
  --motomg-shadow-overlay: 0 12px 36px rgb(0 0 0 / 35%);
  --motomg-chart-primary: var(--motomg-color-brand);
  --motomg-chart-secondary: #6ee7b7;
  --motomg-chart-tertiary: #c4b5fd;
  --motomg-chart-neutral: #94a3b8;
  --motomg-chart-grid: #334155;
  --motomg-chart-axis: #b5c0d1;
  --panel-kit-accent-hover: var(--motomg-color-brand-hover);
  --panel-kit-accent-selected: var(--motomg-color-brand-strong);
  --panel-kit-soft: var(--motomg-color-brand-soft);
  --panel-kit-soft-hover: #3c315e;
  --panel-kit-outline: #65538a;
  --panel-kit-disabled-bg: #293548;
  --panel-kit-disabled-text: #a3b1c6;
  --panel-kit-danger: var(--motomg-color-danger);
  --panel-kit-danger-soft: var(--motomg-color-danger-soft);
  --panel-kit-success: var(--motomg-color-success);
  --panel-kit-success-soft: var(--motomg-color-success-soft);
  --panel-kit-warning: var(--motomg-color-warning);
  --panel-kit-warning-soft: var(--motomg-color-warning-soft);
  --panel-kit-info: var(--motomg-color-info);
  --panel-kit-info-soft: var(--motomg-color-info-soft);
  --panel-kit-on-accent: var(--primary-foreground);
  --workspace-expert-color: #93c5fd;
  --workspace-expert-hover: #bfdbfe;
  --workspace-expert-strong: #dbeafe;
  --workspace-expert-soft: #192e4e;
  --workspace-expert-tint: #294b79;
  --workspace-senior-color: #c4b5fd;
  --workspace-senior-hover: #ddd6fe;
  --workspace-senior-strong: #ede9fe;
  --workspace-senior-soft: #30234e;
  --workspace-senior-tint: #55407e;
  --workspace-director-color: #fcd34d;
  --workspace-director-hover: #fde68a;
  --workspace-director-strong: #fef3c7;
  --workspace-director-soft: #3d301a;
  --workspace-director-tint: #685326;
  --background: var(--motomg-color-page);
  --foreground: var(--motomg-color-ink);
  --card: var(--motomg-color-surface);
  --card-foreground: var(--foreground);
  --popover: var(--card);
  --popover-foreground: var(--foreground);
  --primary: var(--motomg-color-brand);
  --primary-foreground: #161d30;
  --secondary: var(--motomg-color-soft);
  --secondary-foreground: var(--foreground);
  --muted: var(--motomg-color-soft);
  --muted-foreground: var(--motomg-color-muted);
  --accent: var(--motomg-color-brand-soft);
  --accent-foreground: var(--motomg-color-brand);
  --destructive: var(--motomg-color-danger);
  --border: var(--motomg-color-border);
  --input: var(--motomg-color-border);
  --ring: var(--motomg-focus-color);
  --success: var(--motomg-color-success);
  --success-subtle: var(--motomg-color-success-soft);
  --slate: var(--motomg-color-muted);
  --text-muted: var(--motomg-color-subtle);
  --panel-border: var(--motomg-color-border);
  --panel-ink: var(--motomg-color-ink);
  --panel-muted: var(--motomg-color-muted);
  --toastify-color-light: var(--motomg-color-surface);
  --toastify-text-color-light: var(--motomg-color-ink);
}

html[data-backoffice-theme],
html[data-backoffice-theme] body {
  background: var(--panel-appearance-page);
  color: var(--panel-appearance-ink);
}

/* Adapt the remaining shared legacy surfaces through the same token contract. */
:root[data-backoffice-theme='dark'] :is(.form-control, .custom-select) {
  color: var(--motomg-color-ink);
}

:root[data-backoffice-theme='dark']
  :is(input, select, textarea, [role='combobox']):focus-visible {
  background-color: var(--motomg-color-brand-soft);
}

:root[data-backoffice-theme='dark'] :is(.navbar-brand, .panel-nav-brand) img {
  filter: brightness(0) invert(1);
}

:root[data-backoffice-theme='dark']
  :is(
    .motomg-template-layout,
    .ui-kit,
    .panel-dialog-layer,
    .panel-popup-content,
    .motomg-calendar-popup
  )
  :is(.bg-white, .bg-slate-50, .bg-gray-50) {
  background-color: var(--motomg-color-surface);
}

:root[data-backoffice-theme='dark']
  :is(
    .motomg-template-layout,
    .ui-kit,
    .panel-dialog-layer,
    .panel-popup-content,
    .motomg-calendar-popup
  )
  :is(.text-slate-900, .text-slate-800, .text-gray-900, .text-gray-800) {
  color: var(--motomg-color-ink);
}

:root[data-backoffice-theme='dark']
  :is(
    .motomg-template-layout,
    .ui-kit,
    .panel-dialog-layer,
    .panel-popup-content,
    .motomg-calendar-popup
  )
  :is(
    .text-slate-500,
    .text-slate-600,
    .text-slate-700,
    .text-gray-500,
    .text-gray-600,
    .text-gray-700
  ) {
  color: var(--motomg-color-muted);
}

:root[data-backoffice-theme='dark'] .motomg-calendar-popup {
  background: var(--motomg-color-surface);
  color: var(--motomg-color-ink);
  border-color: var(--motomg-color-border);
}

:root[data-backoffice-theme='dark']
  :is(
    .motomg-template-layout,
    .ui-kit,
    .panel-dialog-layer,
    .panel-popup-content,
    .motomg-calendar-popup
  )
  :is(
    .border-gray-100,
    .border-gray-200,
    .border-gray-300,
    .border-slate-100,
    .border-slate-200
  ) {
  border-color: var(--motomg-color-border);
}

.panel-appearance-trigger.btn {
  flex: none;
  min-height: 44px;
}

.panel-appearance-menu {
  width: 242px;
  max-width: calc(100vw - 24px);
  max-height: var(--radix-dropdown-menu-content-available-height);
  overflow-y: auto;
  padding: var(--motomg-space-2);
  background: var(--motomg-color-surface);
  color: var(--motomg-color-ink);
  border: 1px solid var(--motomg-color-border);
  border-radius: var(--motomg-radius-control);
  box-shadow: var(--motomg-shadow-overlay);
}

.panel-appearance-heading,
.panel-appearance-status,
.panel-appearance-storage {
  padding: var(--motomg-space-2) var(--motomg-space-3);
  color: var(--motomg-color-muted);
  font-size: var(--panel-text-caption);
}

.panel-appearance-status {
  margin-top: var(--motomg-space-2);
  border-top: 1px solid var(--motomg-color-border);
}

.panel-appearance-storage {
  color: var(--panel-kit-warning);
}

.panel-appearance-option {
  display: flex;
  align-items: center;
  gap: var(--motomg-space-3);
  min-height: 48px;
  padding: var(--motomg-space-2) var(--motomg-space-3);
  border-radius: var(--motomg-radius-input);
  cursor: pointer;
}

.panel-appearance-option:is([data-state='checked'], [data-highlighted]) {
  background: var(--motomg-color-brand-soft);
  color: var(--motomg-color-brand);
}

.panel-appearance-option[data-highlighted] {
  outline: 2px solid var(--motomg-focus-color);
  outline-offset: -2px;
}

.panel-appearance-check {
  display: inline-flex;
  margin-inline-start: auto;
}

@media (max-width: 575px) {
  .panel-appearance-trigger-label,
  body .motomg-template-layout > .navbar .navbar-brand {
    display: none;
  }
}

@media (max-width: 991.98px) {
  .navbar :is(.navbar-left, .navbar-right) {
    gap: var(--motomg-space-1);
  }

  body .navbar .navbar-right > .btn[data-panel-ui='button'],
  body .navbar .navbar-right .backoffice-user-trigger.btn,
  body .navbar .navbar-left > .menu-button-mobile.btn {
    width: 44px;
    min-width: 44px;
    min-height: 44px;
    padding: 0;
    margin-inline: 0 !important;
    flex: none;
  }

  .navbar .navbar-right > .btn[data-panel-ui='button'] > .motomg-button-label {
    display: none;
  }

  .navbar .backoffice-user-identity {
    display: none;
  }
}

@media (max-width: 359.98px) {
  .navbar .workspace-toolbar-level {
    display: none;
  }
}

@media (pointer: coarse) {
  body .panel-appearance-trigger.btn[data-panel-ui='button'][data-panel-size] {
    min-height: 44px;
    min-width: 44px;
  }
}

:root[data-backoffice-theme='dark']
  :is(
    .motomg-template-layout,
    .ui-kit,
    .panel-dialog-layer,
    .panel-popup-content
  )
  :is(.bg-sky-50, .bg-sky-100, .bg-blue-50, .bg-blue-100):is(
    .text-sky-700,
    .text-sky-800,
    .text-sky-900,
    .text-sky-950,
    .text-blue-700,
    .text-blue-800,
    .text-blue-900,
    .text-blue-950
  ) {
  background-color: var(--panel-kit-info-soft);
  color: var(--panel-kit-info);
}

:root[data-backoffice-theme='dark']
  :is(
    .motomg-template-layout,
    .ui-kit,
    .panel-dialog-layer,
    .panel-popup-content
  )
  :is(.bg-green-50, .bg-green-100, .bg-emerald-50, .bg-emerald-100):is(
    .text-green-700,
    .text-green-800,
    .text-green-900,
    .text-green-950,
    .text-emerald-700,
    .text-emerald-800,
    .text-emerald-900,
    .text-emerald-950
  ) {
  background-color: var(--panel-kit-success-soft);
  color: var(--panel-kit-success);
}

:root[data-backoffice-theme='dark']
  :is(
    .motomg-template-layout,
    .ui-kit,
    .panel-dialog-layer,
    .panel-popup-content
  )
  :is(.bg-red-50, .bg-red-100, .bg-rose-50, .bg-rose-100):is(
    .text-red-700,
    .text-red-800,
    .text-red-900,
    .text-red-950,
    .text-rose-700,
    .text-rose-800,
    .text-rose-900,
    .text-rose-950
  ) {
  background-color: var(--panel-kit-danger-soft);
  color: var(--panel-kit-danger);
}

:root[data-backoffice-theme='dark']
  :is(
    .motomg-template-layout,
    .ui-kit,
    .panel-dialog-layer,
    .panel-popup-content
  )
  :is(.bg-amber-50, .bg-amber-100):is(
    .text-amber-700,
    .text-amber-800,
    .text-amber-900,
    .text-amber-950
  ) {
  background-color: var(--panel-kit-warning-soft);
  color: var(--panel-kit-warning);
}
:root {
  color-scheme: light;

  --motomg-font-fa: "IRANYekanX", "IRANYekanXFaNum", "YekanBakhFaNum", "Vazirmatn", Tahoma, "Segoe UI", sans-serif;
  --motomg-font-latin: "Segoe UI", Tahoma, Arial, sans-serif;

  /* Figma: UI Kit / Colors (29:7336). */
  --motomg-color-brand: #8f4fff;
  --motomg-color-brand-hover: #9747ff;
  --motomg-color-brand-strong: #7d49d7;
  --motomg-color-brand-muted: #9c75e1;
  --motomg-color-brand-soft: #f5f3ff;
  --motomg-color-brand-soft-strong: #d0ceff;
  --motomg-color-accent: #fed46e;
  --motomg-color-accent-strong: #f3a218;
  --motomg-color-ink: #2d2d2d;
  --motomg-color-ink-soft: #484848;
  --motomg-color-muted: #6a6a6a;
  --motomg-color-subtle: #9e9c9c;
  --motomg-color-surface: #fefefe;
  --motomg-color-page: #f8f8f8;
  --motomg-color-soft: #f5f5f5;
  --motomg-color-border: #ebebeb;
  --motomg-color-border-strong: #d0d5dd;
  --motomg-color-success: #04802e;
  --motomg-color-success-soft: #e7f6ec;
  --motomg-color-danger: #d42620;
  --motomg-color-danger-strong: #aa1010;
  --motomg-color-danger-soft: #fbeae9;
  --motomg-color-warning: #f3a218;
  --motomg-color-warning-soft: #fef6e7;
  --motomg-color-info: #0a95d3;
  --motomg-color-info-soft: #eaf7fc;

  /* Figma: Components (29:982) and Layout spacing (115:90234). */
  --motomg-space-1: 4px;
  --motomg-space-2: 8px;
  --motomg-space-3: 12px;
  --motomg-space-4: 16px;
  --motomg-space-5: 20px;
  --motomg-space-6: 24px;
  --motomg-space-7: 28px;
  --motomg-space-8: 32px;
  --motomg-space-10: 40px;
  --motomg-space-12: 48px;
  --motomg-space-16: 64px;
  --motomg-space-20: 80px;
  --motomg-space-24: 96px;
  --motomg-space-32: 128px;
  --motomg-space-40: 160px;
  --motomg-space-48: 192px;

  --motomg-radius-xs: 4px;
  --motomg-radius-control: 6px;
  --motomg-radius-input: 8px;
  --motomg-radius-sm: 8px;
  --motomg-radius-md: 12px;
  --motomg-radius-lg: 16px;
  --motomg-radius-card: 16px;
  --motomg-radius-section: 24px;
  --motomg-radius-pill: 200px;
  --motomg-control-height: 42px;
  --motomg-control-height-compact: 30px;
  --motomg-button-height: 34px;
  --motomg-button-height-compact: 30px;
  --motomg-button-min-width: 64px;
  --motomg-button-padding-inline: 12px;
  --motomg-sidebar-width: 336px;
  --motomg-sidebar-collapsed-width: 104px;
  --motomg-navbar-height: 80px;
  --motomg-content-margin: 24px;
  --motomg-grid-gutter: 24px;
  --motomg-breakpoint-small-max: 599px;
  --motomg-breakpoint-medium-max: 1135px;

  --motomg-shadow-card: 1px 2px 4px rgba(181, 181, 181, 0.3);
  --motomg-shadow-card-hover: 1px 2px 4px rgba(181, 181, 181, 0.4);
  --motomg-shadow-overlay: 1px 2px 8px rgba(45, 45, 45, 0.16);
  --motomg-focus-color: rgba(151, 71, 255, 0.28);
  --motomg-motion-fast: 140ms;
  --motomg-motion-normal: 180ms;

  /* Figma: Charts (29:7343). */
  --motomg-chart-primary: #8f4fff;
  --motomg-chart-secondary: #fed46e;
  --motomg-chart-tertiary: #d0ceff;
  --motomg-chart-neutral: #b5b5b5;
  --motomg-chart-grid: #f4f4f4;
  --motomg-chart-axis: #9e9c9c;
}

button:focus-visible,
a:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[tabindex]:not([tabindex="-1"]):focus-visible {
  outline: 3px solid var(--motomg-focus-color) !important;
  outline-offset: 2px;
}

button:disabled,
[aria-disabled="true"] {
  cursor: not-allowed;
}

::selection {
  color: var(--motomg-color-ink);
  background: var(--motomg-color-brand-soft);
}

.motomg-sr-only {
  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;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}