/**
 * SOQ Edu navy + gold skin for the legacy panel layout (design_1/panel/layouts/panel.blade.php).
 * Loaded after app.min.css, panel.min.css and soq-theme.css. Markup and JS hooks stay untouched;
 * this file only restyles colour, type, borders and component chrome. Geometry (header 70px,
 * sidebar 258px, title bar 52px) must not change: panel.min.css derives scroll heights from it.
 * Dark mode keeps the legacy look, so every rule is scoped to light mode.
 */

body.soq-user-panel:not(.dark-mode) {
  --soq-edu-background: #FEFCF8;
  --soq-edu-foreground: #0F1B2B;
  --soq-edu-navy: #072548;
  --soq-edu-navy-hover: #0C3363;
  --soq-edu-navy-foreground: #FDFBF7;
  --soq-edu-secondary: #F9F3E6;
  --soq-edu-muted: #F7F3EC;
  --soq-edu-muted-foreground: #57616F;
  --soq-edu-accent: #EDC478;
  --soq-edu-gold: #DDAB46;
  --soq-edu-gold-hover: #CF9C36;
  --soq-edu-gold-soft: #FAE5BF;
  --soq-edu-cream: #FEF6E7;
  --soq-edu-border: #E3DDD3;
  --soq-edu-ring: #BC8C30;
  --soq-edu-destructive: #E7000B;
  --soq-edu-success: #15803D;
  --soq-edu-success-soft: #DCFCE7;
  --soq-edu-warning: #92400E;
  --soq-edu-warning-soft: #FEF3C7;
  --soq-edu-sans: "DM Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --soq-edu-serif: "Cormorant Garamond", Georgia, serif;

  /* Legacy theme variables (app.min.css / soq-theme.css) */
  --primary: var(--soq-edu-navy) !important;
  --primary-saturated: var(--soq-edu-navy-hover) !important;
  --primary-hover: var(--soq-edu-navy-hover) !important;
  --primary-border: var(--soq-edu-navy) !important;
  --primary-hover-border: var(--soq-edu-navy-hover) !important;
  --primary-btn-color: var(--soq-edu-navy-foreground) !important;
  --primary-btn-hover-color: var(--soq-edu-navy-foreground) !important;
  --primary-btn-shadow: none !important;
  --primary-btn-hover-shadow: none !important;
  --secondary: var(--soq-edu-navy-hover) !important;
  --secondary-hover: var(--soq-edu-navy) !important;
  --secondary-border: var(--soq-edu-navy-hover) !important;
  --secondary-hover-border: var(--soq-edu-navy) !important;
  --accent: var(--soq-edu-gold) !important;
  --accent-hover: var(--soq-edu-gold-hover) !important;
  --accent-border: var(--soq-edu-gold) !important;
  --accent-hover-border: var(--soq-edu-gold-hover) !important;
  --accent-btn-color: var(--soq-edu-navy) !important;
  --accent-btn-hover-color: var(--soq-edu-navy) !important;
  --success: var(--soq-edu-success) !important;
  --success-btn-color: #FFFFFF !important;
  --success-btn-hover-color: #FFFFFF !important;
  --info: var(--soq-edu-navy-hover) !important;
  --danger: var(--soq-edu-destructive) !important;
  --badge: var(--soq-edu-navy) !important;
  --badge-counter: var(--soq-edu-navy) !important;
  --section-bg: var(--soq-edu-secondary) !important;
  --body-bg: var(--soq-edu-background) !important;
  --dark: var(--soq-edu-foreground) !important;
  --gray-100: var(--soq-edu-muted) !important;
  --gray-200: var(--soq-edu-border) !important;
  --gray-500: var(--soq-edu-muted-foreground) !important;
  --font-family-base: var(--soq-edu-sans) !important;
  --plyr-color-main: var(--soq-edu-navy) !important;

  --soq-blue: var(--soq-edu-navy);
  --soq-blue-dark: var(--soq-edu-navy-hover);
  --soq-navy: var(--soq-edu-navy);
  --soq-yellow: var(--soq-edu-gold);
  --soq-yellow-hover: var(--soq-edu-gold-hover);
  --soq-text: var(--soq-edu-foreground);
  --soq-muted: var(--soq-edu-muted-foreground);
  --soq-border: var(--soq-edu-border);
  --soq-radius: 12px;
  --soq-radius-sm: 8px;
  --soq-shadow: 0 1px 2px rgba(15, 27, 43, 0.06);
  --soq-shadow-lg: 0 6px 18px rgba(15, 27, 43, 0.08);

  font-family: var(--soq-edu-sans) !important;
  color: var(--soq-edu-foreground);
  background-color: var(--soq-edu-background) !important;
}

body.soq-user-panel:not(.dark-mode) #panel_app,
body.soq-user-panel:not(.dark-mode) .panel-content,
body.soq-user-panel:not(.dark-mode) .panel-content__scrollable {
  background-color: var(--soq-edu-background) !important;
}

body.soq-user-panel:not(.dark-mode) :is(input, select, textarea, button, .btn, .form-control) {
  font-family: var(--soq-edu-sans) !important;
}

/* ---------- Header ---------- */
/* The header is the shared soq_panel_header partial (64px + 1px border, styled by soq-chrome.css); legacy panel.min.css sizes assume 70px. */
body.soq-user-panel .panel-content__scrollable {
  height: calc(100vh - 117px);
}

body.soq-user-panel .panel-sidebar__contents.without-bottom-image {
  height: calc(100vh - 65px);
}

@media (max-width: 991px) {
  body.soq-user-panel .panel-sidebar__contents {
    height: calc(100vh - 105px);
  }

  body.soq-user-panel .panel-sidebar.show-sidebar {
    top: 65px;
  }
}

/* ---------- Sidebar ---------- */
/* Sidebar content is the shared soq_sidebar component, styled by soq-sidebar.css. */
body.soq-user-panel:not(.dark-mode) .panel-sidebar,
body.soq-user-panel:not(.dark-mode) .panel-sidebar__contents {
  background-color: var(--soq-edu-background) !important;
}

body.soq-user-panel:not(.dark-mode) .panel-sidebar {
  border-right: 1px solid var(--soq-edu-border);
}

body.soq-user-panel:not(.dark-mode).rtl .panel-sidebar {
  border-right: 0;
  border-left: 1px solid var(--soq-edu-border);
}

/* ---------- Title bar & breadcrumb ---------- */
@media (min-width: 992px) {
  body.soq-user-panel .panel-title-and-breadcrumb {
    display: none !important;
  }
}

body.soq-user-panel:not(.dark-mode) .panel-title-and-breadcrumb {
  background-color: var(--soq-edu-background) !important;
  border-bottom: 1px solid var(--soq-edu-border);
}

body.soq-user-panel:not(.dark-mode) .panel-title-and-breadcrumb .soq-panel-page-title {
  font-family: var(--soq-edu-serif) !important;
  font-size: 30px !important;
  font-weight: 600 !important;
  line-height: 1.1 !important;
  color: var(--soq-edu-navy) !important;
}

body.soq-user-panel:not(.dark-mode) .breadcrumb-item {
  font-size: 13px !important;
  color: var(--soq-edu-muted-foreground) !important;
}

body.soq-user-panel:not(.dark-mode) a.breadcrumb-item:hover {
  color: var(--soq-edu-navy) !important;
}

/* ---------- Navbar Breadcrumb (parity with /admin) ---------- */
.soq-panel-nav-breadcrumb {
  display: flex !important;
  align-items: center !important;
  flex-wrap: nowrap !important;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.soq-panel-nav-breadcrumb__parents {
  flex-shrink: 0;
}

.soq-panel-nav-breadcrumb__item {
  display: inline-flex !important;
  align-items: center !important;
}

.soq-panel-nav-breadcrumb__link {
  font-family: var(--font-sans, "DM Sans", sans-serif) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  color: var(--text-secondary, #64748B) !important;
  text-decoration: none !important;
  transition: color 0.15s ease !important;
}

.soq-panel-nav-breadcrumb__link:hover {
  color: var(--brand-navy, #0F1E36) !important;
  text-decoration: underline !important;
}

.soq-panel-nav-breadcrumb__separator {
  color: #CBD5E1 !important;
  font-size: 13px !important;
  font-weight: 400 !important;
  margin: 0 8px !important;
  user-select: none;
}

.soq-panel-nav-breadcrumb__current {
  font-family: var(--font-sans, "DM Sans", sans-serif) !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  color: var(--brand-navy, #0F1E36) !important;
  line-height: 1.2 !important;
  letter-spacing: -0.01em !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  max-width: 380px;
}

/* ---------- Content typography ---------- */
body.soq-user-panel:not(.dark-mode) .panel-content :is(h1, h2, h3) {
  font-family: var(--soq-edu-serif) !important;
  font-weight: 600 !important;
  color: var(--soq-edu-navy);
  letter-spacing: 0;
}

body.soq-user-panel:not(.dark-mode) .panel-content :is(h4, h5, h6) {
  font-family: var(--soq-edu-sans) !important;
}

body.soq-user-panel:not(.dark-mode) .panel-content .text-dark {
  color: var(--soq-edu-foreground) !important;
}

body.soq-user-panel:not(.dark-mode) .panel-content :is(.text-gray-500, .text-gray-400) {
  color: var(--soq-edu-muted-foreground) !important;
}

body.soq-user-panel:not(.dark-mode) .panel-content :is(.text-primary, a.text-primary) {
  color: var(--soq-edu-navy) !important;
}

body.soq-user-panel:not(.dark-mode) .panel-content .text-success {
  color: var(--soq-edu-success) !important;
}

body.soq-user-panel:not(.dark-mode) .panel-content .text-warning {
  color: var(--soq-edu-warning) !important;
}

body.soq-user-panel:not(.dark-mode) .panel-content .text-danger {
  color: var(--soq-edu-destructive) !important;
}

/* ---------- Cards & surfaces ---------- */
body.soq-user-panel:not(.dark-mode) .panel-content :is(.bg-white.rounded-16, .bg-white.rounded-24, .bg-white.rounded-12, .card) {
  border: 1px solid var(--soq-edu-border) !important;
  border-radius: 14px !important;
  box-shadow: 0 1px 3px rgba(15, 27, 43, 0.04) !important;
}

/* ---------- SOQ Stat Cards (Elevated & Compact) ---------- */
body.soq-user-panel:not(.dark-mode) .soq-stat-card {
  background: #FFFFFF !important;
  border: 1px solid var(--soq-edu-border) !important;
  border-radius: 14px !important;
  padding: 14px 18px !important;
  box-shadow: 0 1px 3px rgba(15, 27, 43, 0.04) !important;
  transition: transform 0.15s ease, box-shadow 0.15s ease !important;
}

body.soq-user-panel:not(.dark-mode) .soq-stat-card:hover {
  box-shadow: 0 4px 12px rgba(15, 27, 43, 0.08) !important;
}

body.soq-user-panel:not(.dark-mode) .soq-stat-card__value {
  font-family: var(--soq-edu-serif) !important;
  font-size: 26px !important;
  font-weight: 700 !important;
  line-height: 1.1 !important;
  color: var(--soq-edu-navy) !important;
  margin-top: 8px !important;
}

body.soq-user-panel:not(.dark-mode) .soq-stat-card__label {
  font-family: var(--soq-edu-sans) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  color: var(--soq-edu-muted-foreground) !important;
}

body.soq-user-panel:not(.dark-mode) .soq-stat-card__icon {
  width: 40px !important;
  height: 40px !important;
  min-width: 40px !important;
  border-radius: 10px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* ---------- Upcoming Live Sessions ---------- */
body.soq-user-panel:not(.dark-mode) .upcoming-live-sessions-card {
  border: 1px solid var(--soq-edu-border) !important;
  border-radius: 14px !important;
  background: #FFFFFF !important;
  padding: 14px 16px !important;
  box-shadow: 0 1px 3px rgba(15, 27, 43, 0.04) !important;
  transition: all 0.2s ease !important;
}

body.soq-user-panel:not(.dark-mode) .upcoming-live-sessions-card:hover {
  border-color: var(--soq-edu-accent) !important;
  box-shadow: 0 4px 12px rgba(15, 27, 43, 0.08) !important;
}

body.soq-user-panel:not(.dark-mode) .upcoming-live-sessions-card .size-64 {
  width: 44px !important;
  height: 44px !important;
  min-width: 44px !important;
  border-radius: 10px !important;
}

body.soq-user-panel:not(.dark-mode) .upcoming-live-sessions-card .size-64 svg {
  width: 22px !important;
  height: 22px !important;
}

/* ---------- My Purchases Course Card (.panel-course-card-1) ---------- */
body.soq-user-panel:not(.dark-mode) .panel-course-card-1 > div {
  border: 1px solid var(--soq-edu-border) !important;
  border-radius: 14px !important;
  background: #FFFFFF !important;
  box-shadow: 0 1px 3px rgba(15, 27, 43, 0.04) !important;
  transition: all 0.2s ease !important;
  padding: 14px !important;
}

body.soq-user-panel:not(.dark-mode) .panel-course-card-1:hover > div {
  border-color: var(--soq-edu-accent) !important;
  box-shadow: 0 4px 16px rgba(15, 27, 43, 0.08) !important;
}

body.soq-user-panel:not(.dark-mode) .panel-course-card-1 .panel-course-card-1__image {
  border-radius: 10px !important;
  overflow: hidden !important;
  max-width: 220px !important;
}

body.soq-user-panel:not(.dark-mode) .panel-course-card-1 .panel-course-card-1__image img {
  border-radius: 10px !important;
}

body.soq-user-panel:not(.dark-mode) .panel-course-card-1 .panel-course-card-1__image .is-live-course-icon {
  width: 36px !important;
  height: 36px !important;
  min-width: 36px !important;
  min-height: 36px !important;
  background: rgba(7, 37, 72, 0.8) !important;
  backdrop-filter: blur(4px) !important;
}

body.soq-user-panel:not(.dark-mode) .panel-course-card-1 .panel-course-card-1__image .is-live-course-icon svg {
  width: 18px !important;
  height: 18px !important;
}

body.soq-user-panel:not(.dark-mode) .panel-course-card-1 .bg-gray-100 {
  background: var(--soq-edu-muted) !important;
  border-radius: 10px !important;
  padding: 12px 14px !important;
  border: 1px solid rgba(227, 221, 211, 0.5) !important;
}

body.soq-user-panel:not(.dark-mode) .panel-course-card-1 h3 a {
  font-family: var(--soq-edu-sans) !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  color: var(--soq-edu-navy) !important;
  transition: color 0.15s ease !important;
}

body.soq-user-panel:not(.dark-mode) .panel-course-card-1 h3 a:hover {
  color: var(--soq-edu-navy-hover) !important;
  text-decoration: underline !important;
}

body.soq-user-panel:not(.dark-mode) .panel-course-card-1 .continue-learning-link {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: var(--soq-edu-navy) !important;
  color: #FFFFFF !important;
  border-radius: 9999px !important;
  padding: 7px 14px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  transition: all 0.2s ease !important;
  white-space: nowrap !important;
}

body.soq-user-panel:not(.dark-mode) .panel-course-card-1 .continue-learning-link:hover {
  background: var(--soq-edu-navy-hover) !important;
  color: #FFFFFF !important;
}

body.soq-user-panel:not(.dark-mode) .panel-course-card-1 .continue-learning-link span,
body.soq-user-panel:not(.dark-mode) .panel-course-card-1 .continue-learning-link svg {
  color: #FFFFFF !important;
}

/* ---------- Course grid card (.panel-course-grid-card: organization classes, favorites, my courses, upcoming) ---------- */
/* soq-theme.css pads every .bg-white.rounded-16 and enlarges every .size-32 avatar; the card has a fixed-height content box, so undo both here. */
body.soq-user-panel:not(.dark-mode) .panel-content .panel-course-grid-card .panel-course-grid-card__content {
  height: auto !important;
  min-height: 192px;
  padding: 12px !important;
}

body.soq-user-panel:not(.dark-mode) .panel-content .panel-course-grid-card h3.panel-course-grid-card__title {
  flex-shrink: 0;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  min-height: 42px;
  font-family: var(--soq-edu-sans) !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  line-height: 21px;
  color: var(--soq-edu-navy);
}

body.soq-user-panel:not(.dark-mode) .panel-course-grid-card .size-32.rounded-circle {
  width: 32px !important;
  height: 32px !important;
  min-width: 32px !important;
  min-height: 32px !important;
  flex-shrink: 0;
  overflow: hidden;
  font-size: 0;
}

body.soq-user-panel:not(.dark-mode) .panel-course-grid-card__content .my-16 > .ml-8 {
  min-width: 0;
}

body.soq-user-panel:not(.dark-mode) .panel-course-grid-card__content .my-16 > .ml-8 > h6 {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

body.soq-user-panel:not(.dark-mode) .panel-course-grid-card__content .my-16 > .ml-8 > p {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
}

/* List pages hard-code col-lg-3 col-xl-2 (also in the AJAX html from the controllers): too narrow next to the 258px sidebar. */
@media (min-width: 992px) {
  body.soq-user-panel .panel-content .row > .col-lg-3.col-xl-2:has(.panel-course-grid-card) {
    flex: 0 0 33.3333%;
    max-width: 33.3333%;
  }
}

@media (min-width: 1400px) {
  body.soq-user-panel .panel-content .row > .col-lg-3.col-xl-2:has(.panel-course-grid-card) {
    flex: 0 0 25%;
    max-width: 25%;
  }
}

@media (min-width: 1800px) {
  body.soq-user-panel .panel-content .row > .col-lg-3.col-xl-2:has(.panel-course-grid-card) {
    flex: 0 0 20%;
    max-width: 20%;
  }
}

body.soq-user-panel:not(.dark-mode) .panel-content :is(.bg-gray, .bg-gray-100, .bg-gray-50) {
  background-color: var(--soq-edu-muted) !important;
}

body.soq-user-panel:not(.dark-mode) .panel-content :is(.bg-primary-20, .bg-primary-10, .bg-info-20, .bg-accent-20, .bg-success-20, .bg-warning-20, .bg-danger-20) {
  background-color: var(--soq-edu-gold-soft) !important;
}

body.soq-user-panel:not(.dark-mode) .panel-content .bg-primary:not(.btn) {
  background-color: var(--soq-edu-navy) !important;
}

body.soq-user-panel:not(.dark-mode) .panel-content .bg-accent:not(.btn) {
  background-color: var(--soq-edu-gold) !important;
  color: var(--soq-edu-navy) !important;
}

body.soq-user-panel:not(.dark-mode) .panel-content :is(.border-gray-200, .border-gray-100, .border-bottom-gray-200, .border-top-gray-200) {
  border-color: var(--soq-edu-border) !important;
}

/* ---------- Buttons ---------- */
body.soq-user-panel:not(.dark-mode) .btn {
  border-radius: 999px !important;
  font-weight: 600 !important;
  box-shadow: none !important;
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

body.soq-user-panel:not(.dark-mode) :is(.btn-primary, a.btn-primary, .bg-primary.btn) {
  background-color: var(--soq-edu-navy) !important;
  border-color: var(--soq-edu-navy) !important;
  color: var(--soq-edu-navy-foreground) !important;
}

body.soq-user-panel:not(.dark-mode) :is(.btn-primary, a.btn-primary, .bg-primary.btn):hover {
  background-color: var(--soq-edu-navy-hover) !important;
  border-color: var(--soq-edu-navy-hover) !important;
}

body.soq-user-panel:not(.dark-mode) :is(.btn-accent, .btn-warning) {
  background-color: var(--soq-edu-gold) !important;
  border-color: var(--soq-edu-gold) !important;
  color: var(--soq-edu-navy) !important;
}

body.soq-user-panel:not(.dark-mode) :is(.btn-accent, .btn-warning):hover {
  background-color: var(--soq-edu-gold-hover) !important;
  border-color: var(--soq-edu-gold-hover) !important;
}

body.soq-user-panel:not(.dark-mode) :is(.btn-outline-primary, .btn-outline-secondary, .btn-gray, .btn-light) {
  background-color: transparent !important;
  border: 1px solid var(--soq-edu-border) !important;
  color: var(--soq-edu-navy) !important;
}

body.soq-user-panel:not(.dark-mode) :is(.btn-outline-primary, .btn-outline-secondary, .btn-gray, .btn-light):hover {
  background-color: var(--soq-edu-secondary) !important;
}

body.soq-user-panel:not(.dark-mode) .btn-secondary {
  background-color: var(--soq-edu-secondary) !important;
  border-color: var(--soq-edu-secondary) !important;
  color: var(--soq-edu-navy) !important;
}

body.soq-user-panel:not(.dark-mode) .btn-success {
  background-color: var(--soq-edu-success) !important;
  border-color: var(--soq-edu-success) !important;
  color: #FFFFFF !important;
}

body.soq-user-panel:not(.dark-mode) .btn-danger {
  background-color: var(--soq-edu-destructive) !important;
  border-color: var(--soq-edu-destructive) !important;
  color: #FFFFFF !important;
}

/* ---------- Badges, progress, tabs ---------- */
body.soq-user-panel:not(.dark-mode) .badge {
  border-radius: 6px;
  font-weight: 600;
}

body.soq-user-panel:not(.dark-mode) :is(.badge-primary, .bg-primary.badge) {
  background-color: var(--soq-edu-gold-soft) !important;
  color: var(--soq-edu-navy) !important;
}

body.soq-user-panel:not(.dark-mode) :is(.badge-success, .bg-success.badge) {
  background-color: var(--soq-edu-success-soft) !important;
  color: var(--soq-edu-success) !important;
}

body.soq-user-panel:not(.dark-mode) :is(.badge-warning, .bg-warning.badge) {
  background-color: var(--soq-edu-warning-soft) !important;
  color: var(--soq-edu-warning) !important;
}

body.soq-user-panel:not(.dark-mode) :is(.badge-danger, .bg-danger.badge) {
  background-color: rgba(231, 0, 11, 0.1) !important;
  color: var(--soq-edu-destructive) !important;
}

body.soq-user-panel:not(.dark-mode) .progress {
  background-color: var(--soq-edu-muted) !important;
}

body.soq-user-panel:not(.dark-mode) .progress-bar,
body.soq-user-panel:not(.dark-mode) .panel-content .progress-bar {
  background-color: var(--soq-edu-gold) !important;
}

body.soq-user-panel:not(.dark-mode) .nav-tabs .nav-link,
body.soq-user-panel:not(.dark-mode) .custom-tabs .navbar-item {
  color: var(--soq-edu-muted-foreground) !important;
}

body.soq-user-panel:not(.dark-mode) .nav-tabs .nav-link.active,
body.soq-user-panel:not(.dark-mode) .custom-tabs .navbar-item.active {
  color: var(--soq-edu-navy) !important;
  font-weight: 600;
  border-color: var(--soq-edu-accent) !important;
}

/* ---------- Forms ---------- */
body.soq-user-panel:not(.dark-mode) :is(.form-control, .custom-select, .select2-container--default .select2-selection) {
  border-color: var(--soq-edu-border) !important;
  border-radius: 8px !important;
  background-color: #FFFFFF;
  color: var(--soq-edu-foreground);
}

body.soq-user-panel:not(.dark-mode) :is(.form-control, .custom-select):focus,
body.soq-user-panel:not(.dark-mode) :is(input, textarea):focus {
  border-color: var(--soq-edu-ring) !important;
  box-shadow: 0 0 0 3px rgba(188, 140, 48, 0.2) !important;
}

body.soq-user-panel:not(.dark-mode) .custom-control-input:checked ~ .custom-control-label::before {
  background-color: var(--soq-edu-navy) !important;
  border-color: var(--soq-edu-navy) !important;
}

/* ---------- Tables ---------- */
body.soq-user-panel:not(.dark-mode) .panel-content .table thead th {
  background-color: var(--soq-edu-secondary) !important;
  color: var(--soq-edu-muted-foreground) !important;
  border-color: var(--soq-edu-border) !important;
  text-transform: none;
}

body.soq-user-panel:not(.dark-mode) .panel-content .table td {
  border-color: var(--soq-edu-border) !important;
  color: var(--soq-edu-foreground);
}

/* ---------- Pagination ---------- */
body.soq-user-panel:not(.dark-mode) .pagination .page-link {
  color: var(--soq-edu-navy) !important;
  border-color: var(--soq-edu-border) !important;
  background-color: #FFFFFF;
}

body.soq-user-panel:not(.dark-mode) .pagination .page-item.active .page-link {
  background-color: var(--soq-edu-navy) !important;
  border-color: var(--soq-edu-navy) !important;
  color: var(--soq-edu-navy-foreground) !important;
}

/* ---------- Alerts ---------- */
body.soq-user-panel:not(.dark-mode) .alert.alert-success {
  background-color: var(--soq-edu-success-soft) !important;
  border-color: rgba(21, 128, 61, 0.3) !important;
  color: var(--soq-edu-success) !important;
}

body.soq-user-panel:not(.dark-mode) .alert.alert-info {
  background-color: var(--soq-edu-secondary) !important;
  border-color: var(--soq-edu-border) !important;
  color: var(--soq-edu-navy) !important;
}

body.soq-user-panel:not(.dark-mode) .alert :is(a) {
  color: var(--soq-edu-navy) !important;
}

/* ---------- Support widget (shared component, panel variant only) ---------- */
body.soq-user-panel:not(.dark-mode) .soq-sw {
  --soq-sw-blue: var(--soq-edu-navy);
  --soq-sw-blue-mid: var(--soq-edu-navy-hover);
  --soq-sw-blue-dark: var(--soq-edu-navy);
  --soq-sw-lime: var(--soq-edu-gold);
  --soq-sw-lime-hover: var(--soq-edu-gold-hover);
  --soq-sw-navy: var(--soq-edu-foreground);
  --soq-sw-muted: var(--soq-edu-muted-foreground);
  --soq-sw-border: var(--soq-edu-border);
  --soq-sw-panel-bg: var(--soq-edu-secondary);
  --soq-sw-bubble-out: var(--soq-edu-navy);
  --soq-sw-surface: var(--soq-edu-muted);
  font-family: var(--soq-edu-sans);
}

body.soq-user-panel:not(.dark-mode) .soq-sw__fab-fx {
  display: none;
}

body.soq-user-panel:not(.dark-mode) .soq-sw.is-open .soq-sw__fab {
  background: var(--soq-edu-navy);
  border-color: var(--soq-edu-gold);
  box-shadow: 0 6px 18px rgba(15, 27, 43, 0.18);
}

body.soq-user-panel:not(.dark-mode) .soq-sw__panel {
  border-color: var(--soq-edu-border);
  border-radius: 16px;
}

body.soq-user-panel:not(.dark-mode) .soq-sw__header {
  background: var(--soq-edu-navy);
}