/* Tutor cockpit, only on the frontend dashboard. Same warm shell as the site. */

body.tutor-screen-frontend-dashboard {
  --tutor-brand-100: #f6eee9;
  --tutor-brand-200: #f3e4dc;
  --tutor-brand-300: #e7d3c8;
  --tutor-brand-400: #e8b9a4;
  --tutor-brand-450: #ea5212;
  --tutor-brand-500: #c2410c;
  --tutor-brand-600: #c2410c;
  --tutor-brand-700: #9a3412;
  --tutor-brand-800: #3b2925;
  --tutor-brand-900: #2a1d1a;
  --tutor-brand-950: #201410;
  --tutor-surface-base: #f6eee9;
  --tutor-surface-l1: #fffdfb;
  --tutor-surface-l1-hover: #f6eee9;
  --tutor-surface-l2: #f3e4dc;
  --tutor-surface-l2-hover: #e7d3c8;
  --tutor-surface-l3: #fffdfb;
  --tutor-surface-sidebar-l1: #fffdfb;
  --tutor-surface-brand-primary: #c2410c;
  --tutor-surface-brand-primary-2: #9a3412;
  --tutor-surface-brand-secondary: #f3e4dc;
  --tutor-surface-brand-tertiary: #f6eee9;
  --tutor-surface-brand-quaternary: #f3e4dc;
  --tutor-text-primary: #3b2925;
  --tutor-text-secondary: #5c463f;
  --tutor-text-subdued: #8a6f66;
  --tutor-text-brand: #c2410c;
  --tutor-text-brand-hover: #9a3412;
  --tutor-icon-idle: #5c463f;
  --tutor-icon-brand: #c2410c;
  --tutor-icon-brand-hover: #9a3412;
  --tutor-border-idle: #eadfd8;
  --tutor-border-idle2: #eadfd8;
  --tutor-border-hover: #d7c4ba;
  --tutor-border-brand: #c2410c;
  --tutor-button-primary: #c2410c;
  --tutor-button-primary-hover: #9a3412;
  --tutor-button-primary-focused: #c2410c;
  --tutor-button-primary-disabled: #e8b9a4;
  --tutor-button-primary-soft: #f3e4dc;
  --tutor-button-primary-soft-hover: #e7d3c8;
  --tutor-button-radius: 12px;
  --tutor-tab-sidebar-l2: #fffdfb;
  --tutor-tab-sidebar-l2-hover: #f6eee9;
  --tutor-tab-sidebar-l2-active: #3b2925;
  --tutor-font-family-body: Inter, sans-serif;
  --tutor-font-family-heading: Inter, sans-serif;
  --tutor-actions-exception5: #3b2925;
  --tutor-actions-caution: #c2410c;
  --tutor-actions-critical-primary: #b42318;
  --tutor-actions-gray-quaternary: #d7c3b8;
  --tutor-actions-success-primary: #c2410c;
  --tutor-text-success: #3b2925;
  --tutor-text-exception4: #9a3412;
  --tutor-text-subdued: #5c463f;
  background: #f6eee9;
  color: #3b2925;
  font-family: Inter, sans-serif;
}

body.tutor-screen-frontend-dashboard .tutor-dashboard-layout {
  background: #f6eee9;
}

body.tutor-screen-frontend-dashboard .tutor-dashboard-sidebar {
  background: #fffdfb;
  border-inline-end: 1px solid #eadfd8;
}

body.tutor-screen-frontend-dashboard .tutor-dashboard-sidebar-logo {
  display: flex;
  align-items: center;
  border-bottom: 1px solid #eadfd8;
}

body.tutor-screen-frontend-dashboard .tutor-brand-logo img {
  display: block;
  width: 48px;
  height: 48px;
  border-radius: 50%;
}

body.tutor-screen-frontend-dashboard .tutor-brand-logo .site-title {
  color: #3b2925;
  font-family: Inter, sans-serif;
  font-size: 18px;
  font-weight: 650;
  letter-spacing: -0.03em;
}

body.tutor-screen-frontend-dashboard .tutor-dashboard-sidebar-nav ul li a {
  border-radius: 12px;
  color: #3b2925;
  font-size: 15px;
  font-weight: 500;
}

body.tutor-screen-frontend-dashboard .tutor-dashboard-sidebar-nav ul li a:hover,
body.tutor-screen-frontend-dashboard .tutor-dashboard-sidebar-nav ul li a:focus {
  background: #f6eee9;
  color: #3b2925;
}

body.tutor-screen-frontend-dashboard .tutor-dashboard-sidebar-nav ul li a.active {
  background: #3b2925;
  color: #fffdfb;
}

body.tutor-screen-frontend-dashboard .tutor-dashboard-sidebar-nav ul li a.active svg {
  color: #fffdfb;
}

body.tutor-screen-frontend-dashboard .tutor-dashboard-sidebar .tutor-see-all-courses {
  border-radius: 12px;
  color: #3b2925;
}

body.tutor-screen-frontend-dashboard .tutor-dashboard-header {
  background: #f6eee9;
  border-bottom-color: transparent;
}

body.tutor-screen-frontend-dashboard .fp-hello {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

body.tutor-screen-frontend-dashboard .fp-hello img {
  width: 48px;
  height: 48px;
  border-radius: 999px;
  object-fit: cover;
  object-position: center center;
  flex: 0 0 48px;
  display: block;
}

body.tutor-screen-frontend-dashboard .fp-hello__text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

body.tutor-screen-frontend-dashboard .fp-hello__text strong {
  color: #2a1d1a;
  font-size: 18px;
  font-weight: 650;
  letter-spacing: -0.03em;
  line-height: 1.2;
}

body.tutor-screen-frontend-dashboard .fp-hello__text span {
  color: #5c463f;
  font-size: 13px;
  font-weight: 550;
  line-height: 1.3;
}

body.tutor-screen-frontend-dashboard .tutor-dashboard-body {
  background: #f6eee9;
}

body.tutor-screen-frontend-dashboard .tutor-surface-l1,
body.tutor-screen-frontend-dashboard .tutor-rounded-2xl,
body.tutor-screen-frontend-dashboard .tutor-rounded-xl {
  border-color: #eadfd8;
  border-radius: 20px;
  box-shadow: 0 8px 24px rgba(59, 41, 37, 0.05);
}

body.tutor-screen-frontend-dashboard .tutor-btn {
  border-radius: 12px;
  font-family: Inter, sans-serif;
}

body.tutor-screen-frontend-dashboard .tutor-dashboard-nav-mobile {
  background: #fffdfb;
  border-top: 1px solid #eadfd8;
}

body.tutor-screen-frontend-dashboard .tutor-dashboard-nav-mobile a.active,
body.tutor-screen-frontend-dashboard .tutor-dashboard-nav-mobile a.active .tutor-dashboard-nav-mobile-text {
  color: #c2410c;
}

body.tutor-screen-frontend-dashboard .tutor-stat-card-exception1 .tutor-stat-card-icon,
body.tutor-screen-frontend-dashboard .tutor-stat-card-exception1 .tutor-stat-card-value {
  color: #3b2925;
}

body.tutor-screen-frontend-dashboard .tutor-stat-card-exception5 .tutor-stat-card-icon,
body.tutor-screen-frontend-dashboard .tutor-stat-card-exception5 .tutor-stat-card-value {
  color: #9a3412;
}

body.tutor-screen-frontend-dashboard .tutor-stat-card-exception4 .tutor-stat-card-icon,
body.tutor-screen-frontend-dashboard .tutor-stat-card-exception4 .tutor-stat-card-value {
  color: #c2410c;
}

body.tutor-screen-frontend-dashboard .tutor-dashboard-header-user-avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border-radius: 999px;
}

body.tutor-screen-frontend-dashboard .tutor-dashboard-header .tutor-avatar {
  width: 36px;
  height: 36px;
  min-width: 36px;
  margin: 0;
  background: #3b2925;
  color: #fffdfb;
}

body.tutor-screen-frontend-dashboard .tutor-avatar-initials {
  color: #fffdfb;
  font-size: 13px;
  font-weight: 650;
  line-height: 1;
  letter-spacing: 0.04em;
}

body.tutor-screen-frontend-dashboard .tutor-nav-item,
body.tutor-screen-frontend-dashboard .tutor-nav-dropdown-item,
body.tutor-screen-frontend-dashboard .tutor-dashboard-sidebar-nav ul li a {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
}

body.tutor-screen-frontend-dashboard .tutor-nav-item svg,
body.tutor-screen-frontend-dashboard .tutor-nav-dropdown-item svg,
body.tutor-screen-frontend-dashboard .tutor-dashboard-sidebar-nav svg,
body.tutor-screen-frontend-dashboard .tutor-stat-card-icon svg {
  display: block;
  width: 18px;
  height: 18px;
  max-width: 18px;
  flex: 0 0 18px;
}

body.tutor-screen-frontend-dashboard .tutor-dashboard-courses-tab .tutor-nav-item {
  background: #fffdfb;
  border: 1px solid #d7c3b8;
  border-radius: 12px;
  color: #3b2925;
  font-weight: 600;
}

body.tutor-screen-frontend-dashboard .tutor-nav-dropdown {
  background: #fffdfb;
  border: 1px solid #eadfd8;
  border-radius: 14px;
  box-shadow: 0 12px 32px rgba(59, 41, 37, 0.08);
  padding: 6px;
}

body.tutor-screen-frontend-dashboard .tutor-nav-dropdown-item {
  border-radius: 10px;
  color: #3b2925;
  padding: 8px 12px;
}

body.tutor-screen-frontend-dashboard .tutor-stat-card-title {
  color: #3b2925;
  font-weight: 600;
}

body.tutor-screen-frontend-dashboard .tutor-stat-card-enrolled .tutor-stat-card-icon,
body.tutor-screen-frontend-dashboard .tutor-stat-card-enrolled .tutor-stat-card-value {
  color: #c2410c;
}

body.tutor-screen-frontend-dashboard .tutor-stat-card-active .tutor-stat-card-icon,
body.tutor-screen-frontend-dashboard .tutor-stat-card-active .tutor-stat-card-value {
  color: #9a3412;
}

body.tutor-screen-frontend-dashboard .tutor-stat-card-completed .tutor-stat-card-icon,
body.tutor-screen-frontend-dashboard .tutor-stat-card-completed .tutor-stat-card-value {
  color: #3b2925;
}

body.tutor-screen-frontend-dashboard .tutor-stat-card-time-spent .tutor-stat-card-icon,
body.tutor-screen-frontend-dashboard .tutor-stat-card-time-spent .tutor-stat-card-value {
  color: #9a3412;
}

body.tutor-screen-frontend-dashboard .tutor-progress-card-category {
  color: #5c463f;
  font-size: 13px;
  font-weight: 600;
}

body.tutor-screen-frontend-dashboard .tutor-progress-card-title {
  color: #2a1d1a;
  font-size: 16px;
  font-weight: 650;
  letter-spacing: -0.02em;
}

body.tutor-screen-frontend-dashboard .tutor-progress-card-details {
  color: #3b2925;
  font-size: 13px;
  font-weight: 550;
}

body.tutor-screen-frontend-dashboard .tutor-progress-bar {
  height: 6px;
  background: #e4d3ca;
  box-shadow: none;
}

@media (min-width: 1100px) {
  body.tutor-screen-frontend-dashboard [data-section-id="current_stats"] {
    display: flex;
    flex-wrap: nowrap;
    gap: 16px;
  }

  body.tutor-screen-frontend-dashboard [data-section-id="current_stats"] > .tutor-flex-1 {
    flex: 1 1 0;
    min-width: 0;
  }
}

body.tutor-screen-frontend-dashboard .tutor-account-header-title {
  color: #2a1d1a;
  font-weight: 650;
  letter-spacing: -0.03em;
}

body.tutor-screen-frontend-dashboard .tutor-billing-body {
  background: #fffdfb;
  border: 1px solid #eadfd8;
  border-radius: 20px;
}

body.tutor-screen-frontend-dashboard .tutor-billing-tabs .tutor-nav-item,
body.tutor-screen-frontend-dashboard .tutor-dashboard-page-card-header .tutor-nav-item {
  background: #fffdfb;
  border: 1px solid #d7c3b8;
  border-radius: 999px;
  color: #3b2925;
  font-weight: 650;
}

body.tutor-screen-frontend-dashboard .tutor-billing-tabs .tutor-nav-item.active,
body.tutor-screen-frontend-dashboard .tutor-dashboard-page-card-header .tutor-nav-item.active {
  background: #3b2925;
  border-color: #3b2925;
  color: #fffdfb;
}

body.tutor-screen-frontend-dashboard .tutor-billing-tabs .tutor-nav-item.active svg,
body.tutor-screen-frontend-dashboard .tutor-dashboard-page-card-header .tutor-nav-item.active svg {
  color: #fffdfb;
  fill: currentColor;
}

body.tutor-screen-frontend-dashboard .tutor-billing-tabs-content .tutor-nav-item {
  color: #2a1d1a;
  font-weight: 650;
}

body.tutor-screen-frontend-dashboard .tutor-billing-tabs-content .tutor-btn,
body.tutor-screen-frontend-dashboard .tutor-dashboard-page-card-body .tutor-btn {
  background: #fffdfb;
  border: 1px solid #d7c3b8;
  color: #3b2925;
}

body.tutor-screen-frontend-dashboard .tutor-billing-tabs-content .tutor-btn svg,
body.tutor-screen-frontend-dashboard .tutor-dashboard-page-card-body .tutor-btn svg {
  color: #3b2925;
}

body.tutor-screen-frontend-dashboard .tutor-billing-tabs-content .tutor-text-subdued,
body.tutor-screen-frontend-dashboard .tutor-billing-tabs-content .tutor-small,
body.tutor-screen-frontend-dashboard .tutor-dashboard-page-card .tutor-text-subdued,
body.tutor-screen-frontend-dashboard .tutor-dashboard-page-card .tutor-small {
  color: #2a1d1a;
  font-size: 16px;
  font-weight: 650;
}

body.tutor-screen-frontend-dashboard .tutor-billing-card {
  gap: 16px;
  padding: 18px 22px;
}

body.tutor-screen-frontend-dashboard .tutor-billing-card-title,
body.tutor-screen-frontend-dashboard .tutor-billing-card-title li,
body.tutor-screen-frontend-dashboard .tutor-billing-card-title span {
  white-space: normal;
  overflow: visible;
  text-overflow: unset;
}

body.tutor-screen-frontend-dashboard .tutor-billing-card-title span {
  color: #2a1d1a;
  font-weight: 600;
  line-height: 1.4;
}

body.tutor-screen-frontend-dashboard .tutor-billing-card-details,
body.tutor-screen-frontend-dashboard .tutor-billing-card-id,
body.tutor-screen-frontend-dashboard .tutor-billing-card .tutor-tiny {
  color: #5c463f;
}

body.tutor-screen-frontend-dashboard .tutor-billing-card-amount {
  color: #2a1d1a;
  font-weight: 650;
}

body.tutor-screen-frontend-dashboard .tutor-calendar button.tutor-nav-item,
body.tutor-screen-frontend-dashboard .tutor-calendar button.tutor-nav-item:hover,
body.tutor-screen-frontend-dashboard .tutor-calendar button.tutor-nav-item:focus {
  background: #fffdfb;
  color: #3b2925;
  box-shadow: none;
}

body.tutor-screen-frontend-dashboard .tutor-calendar button.tutor-nav-item svg,
body.tutor-screen-frontend-dashboard .tutor-calendar button.tutor-nav-item:hover svg,
body.tutor-screen-frontend-dashboard .tutor-calendar button.tutor-nav-item:focus svg {
  color: #3b2925;
}

body.tutor-screen-frontend-dashboard .tutor-calendar button.tutor-nav-item.active,
body.tutor-screen-frontend-dashboard .tutor-calendar button.tutor-nav-item.active:hover,
body.tutor-screen-frontend-dashboard .tutor-calendar button.tutor-nav-item.active:focus {
  background: #3b2925;
  color: #fffdfb;
}

body.tutor-screen-frontend-dashboard .tutor-calendar button.tutor-nav-item.active svg,
body.tutor-screen-frontend-dashboard .tutor-calendar button.tutor-nav-item.active:hover svg,
body.tutor-screen-frontend-dashboard .tutor-calendar button.tutor-nav-item.active:focus svg {
  color: #fffdfb;
}

body.tutor-screen-frontend-dashboard .tutor-calendar .tutor-btn,
body.tutor-screen-frontend-dashboard .tutor-calendar .tutor-btn:hover,
body.tutor-screen-frontend-dashboard .tutor-calendar .tutor-btn:focus {
  background: #fffdfb;
  border: 1px solid #d7c3b8;
  color: #3b2925;
  box-shadow: none;
}

body.tutor-screen-frontend-dashboard .tutor-calendar .tutor-btn svg {
  color: #3b2925;
}

body.tutor-screen-frontend-dashboard .tutor-calendar .tutor-small.tutor-text-subdued {
  color: #2a1d1a;
  font-size: 16px;
  font-weight: 650;
}

body.tutor-screen-frontend-dashboard .tutor-calendar .tutor-tiny.tutor-text-subdued {
  color: #5c463f;
  font-size: 14px;
  font-weight: 500;
}