/* Integrity Training Center — LMS SPA skin
   Prefer CSS variables (see get_brand_style_tag) so frappe-ui buttons
   pick up brand colors. These rules only restyle chrome: sidebar,
   dialogs, and a few structural shells. */

/* Brand tokens: injected via get_brand_style_tag() (#itc-brand-vars) */

#app img.w-8.h-8.rounded.flex-shrink-0 {
  object-fit: cover;
  object-position: center;
  background: transparent;
}

#app .bg-surface-sidebar img.w-8.h-8 {
  background: transparent !important;
}

/* ── Page header: Create / primary solid actions ─────────────── */

#app button.bg-surface-gray-10 {
  background-color: var(--itc-accent) !important;
  color: #ffffff !important;
  border-color: var(--itc-accent) !important;
  border-radius: 8px;
}

#app button.bg-surface-gray-10:hover {
  background-color: color-mix(in srgb, var(--itc-accent) 88%, black) !important;
  color: #ffffff !important;
}

#app .header-frame {
  border-bottom: 1px solid
    color-mix(in srgb, var(--itc-primary) 8%, transparent);
  padding-inline: 4px;
}

html[data-theme="light"] #app .header-frame .text-lg-medium,
html[data-theme="light"] #app .header-frame .text-2xl-semibold {
  color: var(--itc-primary);
  letter-spacing: -0.02em;
}

/* ── Filter pills (Published / Unpublished) ──────────────────── */

#app [data-slot="tab-button"] span[data-state="active"] {
  background-color: color-mix(
    in srgb,
    var(--itc-accent) 22%,
    transparent
  ) !important;
  color: var(--itc-accent) !important;
  font-weight: 600;
  box-shadow: none;
}

html[data-theme="light"] #app [data-testid="page-header-block"] h1 {
  color: var(--itc-primary);
  letter-spacing: -0.02em;
}

#app input[aria-label="Search"] {
  border-radius: 999px;
}

/* ── Buttons (frappe-ui data-variant) ────────────────────────── */

#app button[data-variant="solid"] {
  border-radius: 8px;
}

#app .bg-blue-500,
#app .bg-surface-blue-3,
#app .bg-surface-blue-6,
#app .hover\:bg-surface-blue-3:hover,
#app .hover\:bg-blue-500:hover,
#app .hover\:bg-surface-blue-7:hover {
  background-color: var(--itc-accent) !important;
}

#app .text-blue-600,
#app .text-blue-500,
#app .text-ink-blue-3,
#app .text-ink-blue-6,
#app .text-ink-blue-link {
  color: var(--itc-accent) !important;
}

#app .border-blue-600,
#app .border-blue-500,
#app .border-outline-blue-1,
#app .border-outline-blue-4 {
  border-color: var(--itc-accent) !important;
}

#app .bg-blue-100,
#app .bg-surface-blue-2 {
  background-color: color-mix(in srgb, var(--itc-accent) 16%, white) !important;
}

#app :focus-visible {
  outline-color: var(--itc-accent) !important;
}

#app .focus-visible\:ring-2:focus-visible,
#app .focus\:ring-2:focus {
  --tw-ring-color: var(--itc-accent);
}

/* ── Sidebar ─────────────────────────────────────────────────── */

#app .bg-surface-sidebar {
  background-color: var(--itc-primary) !important;
  border-inline-end: none;
  overflow-x: hidden;
  /* LMS 2.60.1 .text-ink-gray-* uses var(--ink-gray-*) in color-mix */
  --ink-gray-9: oklch(0.99 0 0) !important;
  --ink-gray-8: oklch(0.92 0 0) !important;
  --ink-gray-7: oklch(0.85 0 0) !important;
  --ink-gray-5: oklch(0.72 0 0) !important;
}

#app .bg-surface-sidebar button {
  border-radius: 8px;
}

#app .bg-surface-sidebar nav button {
  min-height: 2.35rem;
  height: auto !important;
}

#app .bg-surface-sidebar nav button span.min-w-0.truncate {
  font-size: 0.9375rem;
  line-height: 1.3;
  font-weight: 550;
  letter-spacing: -0.01em;
  color: rgba(255, 255, 255, 0.9) !important;
}

#app .bg-surface-sidebar nav button .h-4.w-4,
#app .bg-surface-sidebar nav button .size-4,
#app .bg-surface-sidebar nav button .text-ink-gray-8 {
  color: rgba(255, 255, 255, 0.78) !important;
}

#app .bg-surface-sidebar nav button:hover {
  background-color: rgba(255, 255, 255, 0.08) !important;
}

#app .bg-surface-sidebar button.bg-surface-elevation-3 {
  box-shadow: inset 3px 0 0 var(--itc-accent);
  background-color: color-mix(
    in srgb,
    var(--itc-accent) 28%,
    transparent
  ) !important;
}

#app
  .bg-surface-sidebar
  nav
  button.bg-surface-elevation-3
  span.min-w-0.truncate {
  font-weight: 650;
  color: #ffffff !important;
}

#app .bg-surface-sidebar nav button.bg-surface-elevation-3 .h-4.w-4,
#app .bg-surface-sidebar nav button.bg-surface-elevation-3 .stroke-1\.5 {
  color: var(--itc-accent) !important;
}

#app .bg-surface-sidebar nav button .h-4.w-4,
#app .bg-surface-sidebar nav button .size-4 {
  width: 1.125rem;
  height: 1.125rem;
}

/* Brand row */
#app .bg-surface-sidebar button.h-12 {
  height: auto !important;
  min-height: 3rem;
  align-items: flex-start;
  padding-block: 8px;
}

#app .bg-surface-sidebar button.h-12:hover,
#app .bg-surface-sidebar button.h-12.bg-surface-base {
  background-color: rgba(255, 255, 255, 0.1) !important;
  box-shadow: none !important;
}

/* UserDropdown (LMS 2.60.1): text-base-medium + text-sm, not text-p-* */
#app .bg-surface-sidebar button.h-12 .text-base-medium,
#app .bg-surface-sidebar button.h-12 .text-p-base-medium {
  color: #ffffff !important;
  font-weight: 650;
  letter-spacing: -0.02em;
  white-space: normal;
  line-height: 1.2;
  font-size: 0.8125rem;
}

#app .bg-surface-sidebar button.h-12 .text-sm,
#app .bg-surface-sidebar button.h-12 .text-p-sm {
  color: rgba(255, 255, 255, 0.72) !important;
  display: block !important;
}

#app .bg-surface-sidebar button.h-12 .lucide-chevron-down {
  color: rgba(255, 255, 255, 0.72) !important;
}

#app .bg-surface-sidebar .text-base-medium.text-ink-gray-5 {
  color: rgba(255, 255, 255, 0.55) !important;
}

#app .bg-surface-sidebar kbd,
#app .bg-surface-sidebar [class*="shortcut"] {
  background: rgba(255, 255, 255, 0.12) !important;
  color: rgba(255, 255, 255, 0.92) !important;
  border-color: transparent !important;
}

#app .bg-surface-sidebar nav button .text-p-xs,
#app .bg-surface-sidebar nav button .text-xs {
  color: rgba(255, 255, 255, 0.72) !important;
}

.itc-support-nav {
  max-width: 100%;
  overflow: hidden;
  margin-top: 4px;
  padding-top: 8px;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
}

.itc-support-nav nav,
.itc-support-nav button {
  max-width: 100%;
}

.itc-support-nav .text-base-medium,
.itc-support-nav .text-p-base-medium,
.itc-support-nav span.min-w-0.truncate {
  color: rgba(255, 255, 255, 0.86) !important;
}

.itc-support-nav > .text-base-medium,
.itc-support-nav > .text-p-base-medium {
  color: rgba(255, 255, 255, 0.55) !important;
}

/* Collapsed rail: icons only, no overflowing labels */
#app .bg-surface-sidebar.w-14 nav button {
  min-height: 2rem !important;
  height: 2rem !important;
  width: 2rem !important;
  margin-inline: auto;
  padding: 0 !important;
  justify-content: center;
}

#app .bg-surface-sidebar.w-14 nav button span.min-w-0.truncate,
#app .bg-surface-sidebar.w-14 .itc-support-nav .text-base-medium,
#app .bg-surface-sidebar.w-14 .itc-support-nav .text-p-base-medium,
#app .bg-surface-sidebar.w-14 button.h-12 .text-base-medium,
#app .bg-surface-sidebar.w-14 button.h-12 .text-p-base-medium,
#app .bg-surface-sidebar.w-14 button.h-12 .text-sm,
#app .bg-surface-sidebar.w-14 button.h-12 .lucide-chevron-down,
#app .bg-surface-sidebar.w-14 kbd,
#app .bg-surface-sidebar.w-14 [class*="shortcut"],
#app .bg-surface-sidebar.w-14 nav button .text-p-xs,
#app .bg-surface-sidebar.w-14 nav button .text-xs {
  display: none !important;
  width: 0 !important;
  margin: 0 !important;
  opacity: 0 !important;
  overflow: hidden !important;
}

#app .bg-surface-sidebar.w-14 button.h-12 {
  min-height: 2.5rem !important;
  height: 2.5rem !important;
  width: 100%;
  padding: 4px !important;
  justify-content: center;
  align-items: center;
}

#app .bg-surface-sidebar.w-14 .itc-support-nav {
  margin-inline: 0;
  padding-inline: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
}

#app .bg-surface-sidebar.w-14 .itc-support-nav nav button {
  justify-content: center;
}

/* Complete-your-profile card: keep dark text on a light plate */
#app .bg-surface-sidebar .bg-surface-base.shadow-sm.rounded-md {
  background: rgba(255, 255, 255, 0.96) !important;
  color: var(--itc-primary) !important;
}

#app .bg-surface-sidebar .bg-surface-base.shadow-sm.rounded-md .text-ink-gray-7,
#app .bg-surface-sidebar .bg-surface-base.shadow-sm.rounded-md .text-ink-gray-9,
#app .bg-surface-sidebar .bg-surface-base.shadow-sm.rounded-md .font-medium {
  color: var(--itc-primary) !important;
}

#app .bg-surface-sidebar.w-14 svg.size-10,
#app .bg-surface-sidebar.w-14 .bg-surface-base.shadow-sm.rounded-md {
  display: none !important;
}

#app nav[aria-label] button[aria-current="page"] span {
  color: var(--itc-accent) !important;
}

/* Brand dropdown (portaled to body, often outside #app) */
.menu-content {
  background: var(--itc-primary) !important;
  color: #ffffff !important;
  border: 1px solid rgba(255, 255, 255, 0.12);
  z-index: 80;
}

.menu-content .text-ink-gray-4,
.menu-content .text-ink-gray-5,
.menu-content .text-ink-gray-6,
.menu-content .text-ink-gray-7,
.menu-content .text-ink-gray-8,
.menu-content .text-ink-gray-9 {
  color: rgba(255, 255, 255, 0.9) !important;
}

/* ── Dialogs / popups (frappe-ui Dialog) ─────────────────────── */

#app .dialog-overlay {
  backdrop-filter: blur(3px);
}

#app .dialog-content {
  border-radius: 16px !important;
  overflow: hidden;
  box-shadow: 0 24px 56px rgba(var(--itc-primary-rgb, 11, 18, 32), 0.22);
  border-top: 3px solid var(--itc-accent);
}

#app .dialog-content h3 {
  letter-spacing: -0.02em;
}

/* ── Course cards + progress ─────────────────────────────────── */

#app .bg-surface-elevation-1.rounded-md.overflow-auto {
  border-radius: 12px !important;
  overflow: hidden !important;
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease;
}

#app .bg-surface-elevation-1.rounded-md.overflow-auto:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 28px rgba(var(--itc-primary-rgb, 11, 18, 32), 0.12);
}

#app .bg-surface-gray-3.rounded-full .bg-surface-gray-10.rounded-full {
  background-color: var(--itc-accent) !important;
}

/* ── Empty state ─────────────────────────────────────────────── */

#app .relative.flex.h-full.min-h-64 span.size-10.text-ink-gray-5 {
  color: var(--itc-accent) !important;
}

html[data-theme="light"] #app .relative.flex.h-full.min-h-64 .text-base-medium,
html[data-theme="light"] #app .relative.flex.h-full.min-h-64 .text-lg-medium {
  color: var(--itc-primary);
}

/* ── Phone bottom tabs ───────────────────────────────────────── */

@media (max-width: 767px) {
  #app .header-frame {
    padding-inline: 12px;
    gap: 8px;
  }

  #app nav[aria-label="Primary"] button[aria-current="page"] span,
  #app nav[aria-label="Primary"] button[aria-current="page"] svg {
    color: var(--itc-accent) !important;
  }
}

/* Hide upstream branding */
[class*="powered-by"],
[class*="frappe-footer"],
footer [class*="frappe"],
footer [class*="erpnext"],
a[href*="frappe.io"],
a[href*="frappecloud.com"],
a[href*="frappeframework.com"] {
  display: none !important;
}

[data-testid="onboarding-help-modal"],
.fixed.z-50.right-0.w-80 {
  display: none !important;
}

[data-testid="onboarding-help-modal"]
  .flex.flex-col.gap-3.shadow-sm.rounded-lg.bg-surface-elevation-2.text-base {
  display: none !important;
}

.flex.items-center.mt-4 > .flex.items-center.flex-1 {
  display: none !important;
}

/* ── Lesson read-aloud ───────────────────────────────────────── */

.itc-speakable {
  cursor: pointer;
  border-radius: 6px;
  transition:
    background-color 0.15s ease,
    box-shadow 0.15s ease;
}

.itc-speakable:hover {
  background: color-mix(in srgb, var(--itc-accent) 10%, transparent);
}

.itc-speakable.is-speaking {
  background: color-mix(in srgb, var(--itc-accent) 16%, transparent);
  box-shadow: inset 3px 0 0 var(--itc-accent);
}

.itc-read-aloud {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 45;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px 8px 8px;
  background: var(--itc-primary);
  color: #ffffff;
  border-radius: 999px;
  box-shadow: 0 10px 28px rgba(var(--itc-primary-rgb, 11, 18, 32), 0.32);
  max-width: calc(100vw - 32px);
}

.itc-read-aloud[hidden] {
  display: none !important;
}

.itc-read-aloud__btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 0;
  border-radius: 999px;
  padding: 8px 12px;
  background: var(--itc-accent);
  color: #ffffff;
  font-size: 0.8125rem;
  font-weight: 650;
  cursor: pointer;
}

.itc-read-aloud__btn[hidden] {
  display: none !important;
}

.itc-read-aloud__btn:hover {
  background: color-mix(in srgb, var(--itc-accent) 88%, black);
}

.itc-read-aloud__btn--ghost {
  background: rgba(255, 255, 255, 0.12);
}

.itc-read-aloud__btn--ghost:hover {
  background: rgba(255, 255, 255, 0.2);
}

.itc-read-aloud__icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.itc-read-aloud__hint {
  padding-inline-end: 6px;
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.72);
  white-space: nowrap;
}

@media (max-width: 640px) {
  .itc-read-aloud {
    left: 12px;
    right: 12px;
    bottom: 12px;
    justify-content: center;
  }

  .itc-read-aloud__hint {
    display: none;
  }
}

/* ── Manual Telegram payment modal ───────────────────────────── */

body.itc-pay-modal-open {
  overflow: hidden;
}

.itc-pay-modal {
  position: fixed;
  inset: 0;
  z-index: 2147483000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}

.itc-pay-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(11, 18, 32, 0.55);
}

.itc-pay-modal__dialog {
  position: relative;
  z-index: 1;
  width: min(100%, 420px);
  max-height: min(90vh, 640px);
  overflow: auto;
  padding: 22px 20px 20px;
  border-radius: 14px;
  background: #ffffff;
  box-shadow: 0 24px 48px rgba(11, 18, 32, 0.22);
}

html[data-theme="dark"] .itc-pay-modal__dialog {
  background: #1a1f2e;
}

.itc-pay-modal__close {
  position: absolute;
  top: 10px;
  right: 12px;
  border: 0;
  background: transparent;
  color: rgba(11, 18, 32, 0.55);
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
}

.itc-pay-modal__label {
  margin: 0 0 6px;
  font-size: 0.75rem;
  font-weight: 650;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--itc-accent);
}

.itc-pay-modal__title {
  margin: 0 0 8px;
  padding-right: 24px;
  font-size: 1.125rem;
  font-weight: 700;
  line-height: 1.35;
  color: var(--itc-primary);
}

.itc-pay-modal__price {
  margin: 0 0 12px;
  font-size: 1.375rem;
  font-weight: 700;
  color: var(--itc-primary);
}

.itc-pay-modal__section {
  margin: 0 0 14px;
  padding: 12px 14px;
  border-radius: 10px;
  background: color-mix(in srgb, var(--itc-primary) 4%, white);
  border: 1px solid color-mix(in srgb, var(--itc-primary) 10%, transparent);
}

html[data-theme="dark"] .itc-pay-modal__section {
  background: rgba(255, 255, 255, 0.04);
}

.itc-pay-modal__section--muted p {
  margin: 0;
  font-size: 0.875rem;
  line-height: 1.45;
  color: rgba(11, 18, 32, 0.7);
}

.itc-pay-modal__section-title {
  margin: 0 0 8px;
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--itc-accent);
}

.itc-pay-modal__detail {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin: 0 0 6px;
  font-size: 0.875rem;
  line-height: 1.4;
}

.itc-pay-modal__detail span {
  color: rgba(11, 18, 32, 0.62);
}

.itc-pay-modal__detail strong {
  color: var(--itc-primary);
  text-align: right;
}

.itc-pay-modal__reference {
  margin: 0 0 14px;
  padding: 10px 12px;
  border-radius: 8px;
  background: color-mix(in srgb, var(--itc-accent) 10%, white);
  font-size: 0.8125rem;
  line-height: 1.45;
  color: var(--itc-primary);
}

.itc-pay-modal__instructions {
  margin: 0;
  font-size: 0.875rem;
  line-height: 1.5;
  color: rgba(11, 18, 32, 0.82);
}

html[data-theme="dark"] .itc-pay-modal__instructions {
  color: rgba(255, 255, 255, 0.82);
}

.itc-pay-modal__status {
  margin: 0 0 14px;
  font-size: 0.8125rem;
  line-height: 1.4;
}

.itc-pay-modal__status--waiting {
  color: var(--itc-primary);
}

.itc-pay-modal__status--rejected {
  color: #b45309;
}

.itc-pay-modal__telegram {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  border: 0;
  border-radius: 8px;
  padding: 12px 14px;
  background: var(--itc-accent);
  color: #ffffff;
  font-size: 0.9375rem;
  font-weight: 650;
  cursor: pointer;
}

.itc-pay-modal__telegram:hover {
  background: color-mix(in srgb, var(--itc-accent) 88%, black);
}

.itc-approve-banner {
  margin: 0 0 16px;
  padding: 14px 16px;
  border-radius: 10px;
  border: 1px solid color-mix(in srgb, var(--itc-accent) 35%, transparent);
  background: color-mix(in srgb, var(--itc-accent) 10%, white);
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--itc-primary);
}

.itc-approve-banner p {
  margin: 0 0 8px;
}

.itc-approve-banner p:last-child {
  margin-bottom: 0;
}

.itc-approve-banner a {
  color: var(--itc-accent);
  font-weight: 650;
  text-decoration: underline;
}

.itc-approve-banner__open {
  border: 0;
  padding: 0;
  background: none;
  color: var(--itc-accent);
  font: inherit;
  font-weight: 650;
  text-decoration: underline;
  cursor: pointer;
}

.itc-approve-panel .itc-pay-modal__dialog,
.itc-approve-panel__dialog {
  width: min(100%, calc(100% - 32px));
  max-width: min(100%, calc(100% - 32px));
  max-height: min(92vh, 800px);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-width: 0;
}

@media (min-width: 640px) {
  .itc-approve-panel .itc-pay-modal__dialog,
  .itc-approve-panel__dialog {
    width: min(calc(100% - 48px), 720px);
    max-width: min(calc(100% - 48px), 720px);
  }
}

@media (min-width: 900px) {
  .itc-approve-panel .itc-pay-modal__dialog,
  .itc-approve-panel__dialog {
    width: min(calc(100% - 48px), 768px);
    max-width: min(calc(100% - 48px), 768px);
  }
}

.itc-approve-panel__intro,
.itc-approve-panel__hint {
  margin: 0 0 8px;
  font-size: 0.875rem;
  line-height: 1.45;
  color: var(--itc-primary);
  opacity: 0.85;
}

.itc-approve-panel__subtitle {
  margin: 0 0 10px;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--itc-accent);
}

.itc-approve-panel__tabs {
  display: flex;
  gap: 8px;
  margin-bottom: 12px;
}

.itc-approve-panel__tab {
  flex: 1;
  border: 1px solid color-mix(in srgb, var(--itc-primary) 18%, transparent);
  border-radius: 8px;
  padding: 10px 12px;
  min-height: 44px;
  background: transparent;
  font-size: 0.8125rem;
  font-weight: 650;
  cursor: pointer;
  color: var(--itc-primary);
}

.itc-approve-panel__tab--active {
  background: color-mix(in srgb, var(--itc-accent) 12%, white);
  border-color: color-mix(in srgb, var(--itc-accent) 45%, transparent);
  color: var(--itc-accent);
}

.itc-approve-panel__filters {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 10px;
}

@media (min-width: 640px) {
  .itc-approve-panel__filters {
    flex-direction: row;
    align-items: stretch;
  }

  .itc-approve-panel__search {
    flex: 2;
  }

  .itc-approve-panel__course {
    flex: 1;
    min-width: 0;
  }
}

.itc-approve-panel__search,
.itc-approve-panel__course {
  width: 100%;
  border: 1px solid color-mix(in srgb, var(--itc-primary) 18%, transparent);
  border-radius: 8px;
  padding: 8px 10px;
  font-size: 0.8125rem;
  color: var(--itc-primary);
  background: var(--itc-surface, #fff);
}

.itc-approve-panel__pager {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 12px;
  padding-top: 8px;
  border-top: 1px solid color-mix(in srgb, var(--itc-primary) 10%, transparent);
}

.itc-approve-panel__range {
  font-size: 0.75rem;
  color: var(--itc-primary);
  opacity: 0.85;
  text-align: center;
  flex: 1;
}

.itc-approve-panel__page-btn {
  border: 1px solid color-mix(in srgb, var(--itc-primary) 20%, transparent);
  border-radius: 8px;
  padding: 8px 12px;
  background: var(--itc-surface, #fff);
  font-size: 0.8125rem;
  font-weight: 600;
  cursor: pointer;
  color: var(--itc-primary);
}

.itc-approve-panel__page-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.itc-approve-panel__badge {
  font-size: 0.6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 2px 8px;
  border-radius: 999px;
}

.itc-approve-panel__badge--approved {
  background: color-mix(in srgb, #16a34a 18%, white);
  color: #15803d;
}

.itc-approve-panel__badge--rejected {
  background: color-mix(in srgb, #dc2626 15%, white);
  color: #b91c1c;
}

.itc-approve-panel__reason-block {
  margin-top: 8px;
}

.itc-approve-panel__detail-label {
  margin: 0 0 4px;
  font-size: 0.6875rem;
  font-weight: 650;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--itc-primary);
  opacity: 0.65;
}

.itc-approve-panel__reject-reason {
  margin: 0;
  font-size: 0.8125rem;
  line-height: 1.45;
  font-style: italic;
  opacity: 0.9;
}

.itc-approve-panel__toolbar {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 10px;
}

.itc-approve-panel__refresh,
.itc-approve-panel__page-btn {
  border: 1px solid color-mix(in srgb, var(--itc-primary) 20%, transparent);
  border-radius: 8px;
  padding: 8px 12px;
  background: var(--itc-surface, #fff);
  font-size: 0.8125rem;
  font-weight: 600;
  cursor: pointer;
  color: var(--itc-primary);
}

.itc-approve-panel__status {
  margin: 0 0 12px;
  font-size: 0.875rem;
  color: var(--itc-primary);
}

.itc-approve-panel__list {
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-height: 120px;
}

.itc-approve-panel__card {
  padding: 12px 14px;
  border-radius: 10px;
  border: 1px solid color-mix(in srgb, var(--itc-primary) 12%, transparent);
  background: color-mix(in srgb, var(--itc-primary) 4%, white);
}

html[data-theme="dark"] .itc-approve-panel__card {
  background: color-mix(in srgb, var(--itc-primary) 8%, #1a1a1a);
}

.itc-approve-panel__card-head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px 12px;
  align-items: center;
  margin-bottom: 8px;
}

.itc-approve-panel__head-end {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 8px 10px;
  margin-left: auto;
}

.itc-approve-panel__ref {
  margin: 0;
  font-size: 0.8125rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.04em;
  color: var(--itc-accent);
  word-break: break-all;
}

.itc-approve-panel__price {
  margin: 0;
  font-size: 0.875rem;
  font-weight: 650;
  white-space: nowrap;
}

.itc-approve-panel__course {
  margin: 0 0 10px;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.35;
}

.itc-approve-panel__details {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 6px 14px;
  margin: 0 0 10px;
  padding: 10px 12px;
  border-radius: 8px;
  background: color-mix(in srgb, var(--itc-primary) 5%, transparent);
}

html[data-theme="dark"] .itc-approve-panel__details {
  background: color-mix(in srgb, var(--itc-primary) 12%, transparent);
}

.itc-approve-panel__details dt {
  margin: 0;
  font-size: 0.6875rem;
  font-weight: 650;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--itc-primary);
  opacity: 0.65;
}

.itc-approve-panel__details dd {
  margin: 0;
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.35;
  word-break: break-word;
}

.itc-approve-panel__phone-link {
  color: var(--itc-accent);
  text-decoration: none;
  font-variant-numeric: tabular-nums;
}

.itc-approve-panel__phone-link:hover {
  text-decoration: underline;
}

.itc-approve-panel__meta {
  margin: 0 0 4px;
  font-size: 0.75rem;
  line-height: 1.4;
  opacity: 0.85;
  color: var(--itc-primary);
}

.itc-approve-panel__meta time {
  font-weight: 500;
}

.itc-approve-panel__actions {
  display: flex;
  gap: 8px;
  margin-top: 10px;
}

.itc-approve-panel__btn {
  flex: 1;
  border: 0;
  border-radius: 8px;
  padding: 12px 14px;
  min-height: 44px;
  font-size: 0.8125rem;
  font-weight: 650;
  cursor: pointer;
}

.itc-approve-panel__btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.itc-approve-panel__btn--approve {
  background: var(--itc-accent);
  color: #fff;
}

.itc-approve-panel__btn--reject {
  background: color-mix(in srgb, var(--itc-primary) 10%, white);
  color: var(--itc-primary);
  border: 1px solid color-mix(in srgb, var(--itc-primary) 18%, transparent);
}