.app-shell-root {
  --left-col-width: 232px;
  --cell-width: 96px;
  --primary-soft: #f7f8fa;
  --bg: #f6f7f9;
  --surface: #ffffff;
  --surface-2: #f3f4f6;
  --surface-3: #eef1f4;
  --border-color: #e5e7eb;
  --grid-line: #e5e7eb;
  --text-strong: #111827;
  --text-muted: #6b7280;
  --text-faint: #94a3b8;
  --highlight-bg: #eef2f7;
  --highlight-border: #cbd5e1;
  --focus-bg: #e8edf4;
  --focus-strong: #dde3ea;
  --status-warning: #b45309;
  --status-danger: #b91c1c;
}

@media (max-width: 599px) {
  .app-shell-root {
    --left-col-width: 160px;
  }
}

.app-shell-html,
.app-shell-body {
  height: 100%;
  overflow: hidden;
  margin: 0;
  padding: 0;
  background-color: var(--bg);
  color: var(--text-strong);
  font-family: "Roboto", "Helvetica Neue", Arial, sans-serif;
  font-variant-numeric: tabular-nums;
}

.app-shell-root .shadow-1,
.app-shell-root .shadow-2,
.app-shell-root .shadow-12 {
  box-shadow: none !important;
}

.app-shell-root .q-card {
  box-shadow: none;
  border: 1px solid var(--border-color);
  border-radius: 6px;
}

.app-shell-root .q-separator {
  background: var(--grid-line);
}

.app-shell-root .q-menu,
.app-shell-root .q-tooltip {
  border-radius: 6px;
}

.app-shell-root .text-indigo-10,
.app-shell-root .text-indigo-9,
.app-shell-root .text-indigo-8,
.app-shell-root .text-indigo-4,
.app-shell-root .text-blue-6 {
  color: var(--text-strong) !important;
}

.app-shell-root .text-grey-6,
.app-shell-root .text-grey-8,
.app-shell-root .text-grey-7,
.app-shell-root .text-grey-5 {
  color: var(--text-muted) !important;
}

.app-shell-root .text-orange-9,
.app-shell-root .text-orange-4 {
  color: var(--status-warning) !important;
}

.app-shell-root .text-amber-9 {
  color: var(--text-strong) !important;
}

.app-shell-root .text-red-5,
.app-shell-root .text-red-6,
.app-shell-root .text-red-7 {
  color: var(--status-danger) !important;
}

.app-shell-root .bg-grey-1 {
  background-color: var(--surface-2) !important;
}

.app-shell-root .bg-white {
  background-color: var(--surface) !important;
}