/* ── Cairo (variable font, self-hosted) ── */
@font-face {
  font-family: "Cairo";
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url("/fonts/cairo/cairo-arabic.woff2") format("woff2");
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC;
}
@font-face {
  font-family: "Cairo";
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url("/fonts/cairo/cairo-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Cairo";
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url("/fonts/cairo/cairo-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}


.fi-fo-date-time-picker-panel,
.fi-dropdown-panel,
.fi-fo-select-panel,
.choices__list--dropdown {
  border-radius: 0.85rem !important;
  overflow: hidden;
  box-shadow: 0 12px 28px -12px rgba(15, 23, 42, 0.25) !important;
}
.fi-fo-date-time-picker-panel { padding: 0.75rem !important; }


/* ── Cairo font for Arabic (RTL) UI ──
   Set once on the root so every descendant inherits. Form controls
   (button, input, select, textarea, optgroup) are reset by browsers
   to system-ui by default, so we force them to inherit. This single
   rule covers Filament chrome plus third-party widgets (FilePond
   dropzones, SortableJS handles, Choices.js, etc.) without having
   to enumerate their internals. */
html[dir="rtl"] { font-family: "Cairo", system-ui, -apple-system, sans-serif !important; }
html[dir="rtl"] button,
html[dir="rtl"] input,
html[dir="rtl"] select,
html[dir="rtl"] textarea,
html[dir="rtl"] optgroup { font-family: inherit !important; }

/* ── Page background ── */
.fi-body { background: #f1f5f9 !important; }

/* ── Dark mode surfaces: one cohesive Slate scale with depth ──
   Filament dark mode falls back to its palette (gray → Slate). The
   previous override forced the body to gray-900 (#111827) while every
   surface around it was Slate, so the page read flat and mis-hued.
   We layer a single Slate scale instead: page = slate-950 (deepest),
   chrome + cards = slate-900 (lifted), borders = slate-800. Cards get
   a soft shadow so they float on the page instead of blending in. */
.dark .fi-body { background: #020617 !important; }
.dark .fi-sidebar,
.dark .fi-sidebar-header,
.dark .fi-topbar,
.dark .fi-topbar nav { background: #0f172a !important; }

/* ── Dashboard stats: clean solid border per card ──
   Replace the default Filament ring + shadow (combined in box-shadow) with the
   same 1px solid border used for .fi-section cards, so each stat card
   is framed individually and matches the rest of the panel. */
.fi-wi-stats-overview-stat { box-shadow: none !important; border: 1px solid #e5e7eb; }
.dark .fi-wi-stats-overview-stat { border-color: #1e293b; }

/* ── Dashboard stats: colored icons + values on plain cards ──
   Card background stays default (white / slate-900). Each stat gets
   its accent color on the header icon and the value number only,
   keyed per stat via extraAttributes classes. */
.fi-stat-tint-primary .fi-wi-stats-overview-stat-value,
.fi-stat-tint-primary .fi-wi-stats-overview-stat-label-ctn .fi-icon { color: #2563eb !important; }
.fi-stat-tint-info .fi-wi-stats-overview-stat-value,
.fi-stat-tint-info .fi-wi-stats-overview-stat-label-ctn .fi-icon { color: #0891b2 !important; }
.fi-stat-tint-success .fi-wi-stats-overview-stat-value,
.fi-stat-tint-success .fi-wi-stats-overview-stat-label-ctn .fi-icon { color: #16a34a !important; }
.fi-stat-tint-danger .fi-wi-stats-overview-stat-value,
.fi-stat-tint-danger .fi-wi-stats-overview-stat-label-ctn .fi-icon { color: #dc2626 !important; }
.fi-stat-tint-warning .fi-wi-stats-overview-stat-value,
.fi-stat-tint-warning .fi-wi-stats-overview-stat-label-ctn .fi-icon { color: #d97706 !important; }
.fi-stat-tint-violet .fi-wi-stats-overview-stat-value,
.fi-stat-tint-violet .fi-wi-stats-overview-stat-label-ctn .fi-icon { color: #7c3aed !important; }

.dark .fi-stat-tint-primary .fi-wi-stats-overview-stat-value,
.dark .fi-stat-tint-primary .fi-wi-stats-overview-stat-label-ctn .fi-icon { color: #60a5fa !important; }
.dark .fi-stat-tint-info .fi-wi-stats-overview-stat-value,
.dark .fi-stat-tint-info .fi-wi-stats-overview-stat-label-ctn .fi-icon { color: #22d3ee !important; }
.dark .fi-stat-tint-success .fi-wi-stats-overview-stat-value,
.dark .fi-stat-tint-success .fi-wi-stats-overview-stat-label-ctn .fi-icon { color: #4ade80 !important; }
.dark .fi-stat-tint-danger .fi-wi-stats-overview-stat-value,
.dark .fi-stat-tint-danger .fi-wi-stats-overview-stat-label-ctn .fi-icon { color: #f87171 !important; }
.dark .fi-stat-tint-warning .fi-wi-stats-overview-stat-value,
.dark .fi-stat-tint-warning .fi-wi-stats-overview-stat-label-ctn .fi-icon { color: #fbbf24 !important; }
.dark .fi-stat-tint-violet .fi-wi-stats-overview-stat-value,
.dark .fi-stat-tint-violet .fi-wi-stats-overview-stat-label-ctn .fi-icon { color: #a78bfa !important; }

/* ── Thin scrollbars everywhere ── */
* { scrollbar-width: thin; scrollbar-color: rgba(148, 163, 184, 0.5) transparent; }
*::-webkit-scrollbar { width: 6px; height: 6px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb { background: rgba(148, 163, 184, 0.5); border-radius: 9999px; border: 1px solid transparent; background-clip: padding-box; }
*::-webkit-scrollbar-thumb:hover { background: rgba(100, 116, 139, 0.7); background-clip: padding-box; }
.dark *::-webkit-scrollbar-thumb { background: rgba(71, 85, 105, 0.6); }
.dark *::-webkit-scrollbar-thumb:hover { background: rgba(100, 116, 139, 0.8); }

/* ── CRUD Shell: 3-column grid (24px gap = gap-6) ── */
.fi-crud-shell { display: grid !important; gap: 1.5rem !important; grid-template-columns: 1fr !important; }
.fi-crud-shell > .fi-sc { display: contents !important; }
.fi-crud-shell > .fi-sc > .fi-grid-col { grid-column: auto !important; }
@media (min-width: 1024px) {
  .fi-crud-shell { grid-template-columns: 220px 1fr 240px !important; align-items: start !important; }
}

/* ── Card interiors: 16px padding, 16px field gap (p-4 / gap-4) ── */
.fi-crud-shell .fi-section-content { padding: 1rem !important; gap: 1rem !important; }
.fi-crud-shell .fi-sc-has-gap { gap: 1rem !important; }
.fi-crud-shell .fi-sc-dense { gap: 0.5rem !important; }

/* ── Nav card: tight interior (8px pad, 4px button gap) ── */
.fi-crud-nav .fi-section-content { padding: 0.5rem !important; gap: 0.25rem !important; }
.fi-crud-nav .fi-sc-has-gap { gap: 0.25rem !important; }
.fi-crud-nav .fi-sc-actions { gap: 0 !important; padding: 0 !important; margin: 0 !important; }
.fi-crud-nav .fi-sc-actions-ctn { gap: 0 !important; }
.fi-crud-nav .fi-sc-component { padding: 0 !important; margin: 0 !important; }
.fi-crud-nav .fi-grid-col { padding: 0 !important; }

/* ── Meta card: 12px field gap for compact toggles/timestamps ── */
.fi-crud-shell .fi-sc-section:last-child .fi-sc-has-gap { gap: 0.75rem !important; }

/* ── CRUD tab switch: subtle opacity-only crossfade ──
   Applied by Alpine x-transition on each Group inside the
   SharedFormLayout content card. We intentionally keep this very
   short and drop the scale transform — the earlier "pop" was
   distracting on every click. For users who have Reduce Motion
   enabled system-wide, the transition is disabled entirely. */
.fi-crud-group-enter-active {
  transition: opacity 80ms linear !important;
}
.fi-crud-group-enter-start { opacity: 0 !important; }
.fi-crud-group-enter-end { opacity: 1 !important; }

@media (prefers-reduced-motion: reduce) {
  .fi-crud-group-enter-active { transition: none !important; }
  .fi-crud-group-enter-start,
  .fi-crud-group-enter-end { opacity: 1 !important; }
}

/* ── Global search: Ctrl/Cmd+K shortcut badge ──
   Adds a subtle "⌘K" pill inside the Filament global search
   field. The hint sits on the opposite side from where the
   label enters — auto-flipped for RTL via logical properties. */
.fi-global-search-field { position: relative; }
.fi-global-search-field::after {
  content: "⌘K";
  position: absolute;
  inset-inline-end: 0.625rem;
  top: 50%;
  transform: translateY(-50%);
  font-size: 0.6875rem;
  font-weight: 600;
  color: #6b7280;
  background: #f3f4f6;
  border: 1px solid #e5e7eb;
  border-radius: 0.375rem;
  padding: 0.125rem 0.375rem;
  line-height: 1;
  pointer-events: none;
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
}
.dark .fi-global-search-field::after {
  color: #9ca3af;
  background: rgba(31, 41, 55, 0.8);
  border-color: rgba(75, 85, 99, 0.6);
}
/* Reserve space on the end side so the badge never overlaps typed text. */
.fi-global-search-field input { padding-inline-end: 3.5rem !important; }

/* ── Section nav buttons: flat pill matching reference ── */
.fi-crud-nav .fi-btn {
  border: none !important; box-shadow: none !important;
  background: transparent !important; justify-content: start !important;
  border-radius: 0.625rem !important; padding: 0.5rem 0.75rem !important;
  font-weight: 500 !important; font-size: 0.8125rem !important;
  color: #4b5563 !important; transition: all 150ms ease !important;
  width: 100% !important; white-space: nowrap !important;
  overflow: hidden !important; text-overflow: ellipsis !important;
}
.fi-crud-nav .fi-btn:hover { background: #f3f4f6 !important; color: #111827 !important; }
.fi-crud-nav .fi-btn[class*="\!bg-primary"] { background: #2563eb !important; color: #fff !important; border-radius: 0.625rem !important; }
.fi-crud-nav .fi-btn[class*="\!bg-primary"] * { color: #fff !important; }
/* Section nav icons: size + opacity only. Color comes from each button
   inline style (see crud-nav-button.blade.php), so the per-section
   palette lives in the PHP config not in CSS. Active pill forces white
   via the * rule above. */
.fi-crud-nav .fi-btn .fi-icon { width: 1.125rem !important; height: 1.125rem !important; opacity: 1 !important; flex-shrink: 0 !important; }
.fi-crud-nav .fi-btn[class*="\!bg-primary"] .fi-icon { color: #fff !important; opacity: 1 !important; }

/* ── Cards: clean solid border, no blur ── */
.fi-section { border: 1px solid #e5e7eb !important; box-shadow: none !important; border-radius: 0.75rem !important; }
.dark .fi-section {
  background: #0f172a !important;
  border-color: #1e293b !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 1px 3px rgba(0, 0, 0, 0.3) !important;
}

/* Stats overview widgets wrap their cards in a non-contained schema
   Section, which the global .fi-section card rule above would frame
   with a border around the whole group — undo it there. */
.fi-wi-stats-overview .fi-section {
  border: none !important;
  box-shadow: none !important;
  background: transparent !important;
}

/* ── x-show grid gap fix: collapse wrappers of Alpine-hidden groups ── */
.fi-grid-col:has(> .fi-sc-component > [x-show][style*="display: none"]) { display: none !important; }

/* ── Avatar field (when placed in the meta sidebar): center the
   circular uploader inside its wrapper so it sits in the middle
   of the narrow right column instead of hugging the logical start. */
.fi-crud-shell .fi-fo-file-upload,
.fi-crud-shell .fi-fo-file-upload-dropzone { justify-content: center !important; align-items: center !important; }
.fi-crud-shell .fi-fo-file-upload-avatar { margin-inline: auto !important; }
.fi-crud-shell .fi-fo-field-wrp:has(.fi-fo-file-upload-avatar) .fi-fo-field-wrp-label { text-align: center; }

/* ── Page header heading: cap at 20px for a calmer admin chrome ──
   Filament defaults h1.fi-header-heading to text-2xl/text-3xl which
   reads as oversized next to the compact sidebar and section headers. */
.fi-header-heading { font-size: 1.25rem !important; line-height: 1.75rem !important; font-weight: 600 !important; }

/* ── Sidebar nav items: remove bullets ── */
.fi-sidebar-nav .fi-sidebar-item::before { display: none !important; }

/* ── Sidebar: tighter vertical rhythm ── */
/* Collapse the big default gap between groups and between items. */
.fi-sidebar-nav { gap: 0.125rem !important; padding-block: 0.375rem !important; }
.fi-sidebar-nav > ul { gap: 0.125rem !important; }
.fi-sidebar-nav .fi-sidebar-group { padding-block: 0.25rem !important; margin-block: 0 !important; }
/* Small standard gap (gap-1) between items so the rounded hover/active
   pills never touch each other. */
.fi-sidebar-nav .fi-sidebar-group > ul,
.fi-sidebar-nav .fi-sidebar-group-items { gap: 0.25rem !important; }

/* Group header label ("Users & Permissions", "Countries & Currencies") */
.fi-sidebar-nav .fi-sidebar-group-label,
.fi-sidebar-nav .fi-sidebar-group-button {
  padding-block: 0.375rem !important;
  line-height: 1.25 !important;
  font-size: 0.8125rem !important;
  font-weight: 500 !important;
}

/* Each clickable item (top-level or inside a group) */
.fi-sidebar-nav .fi-sidebar-item > a,
.fi-sidebar-nav .fi-sidebar-item > button {
  padding-block: 0.375rem !important;
  padding-inline: 0.75rem !important;
  min-height: 0 !important;
  font-size: 0.8125rem !important;
  line-height: 1.25 !important;
}

/* ── Sidebar icons: uniform brand primary color (muted default reads
   as disabled). Kept single-color by request — no per-group palette. */
.fi-sidebar-nav .fi-sidebar-item-icon,
.fi-sidebar-nav .fi-sidebar-group-btn > .fi-icon { color: #3b82f6 !important; opacity: 1 !important; }
/* Active item: icon follows the white text inside the highlighted pill. */
.fi-sidebar-nav .fi-sidebar-item.fi-active .fi-sidebar-item-icon,
.fi-sidebar-nav .fi-sidebar-item > a[aria-current="page"] .fi-sidebar-item-icon { color: #fff !important; }

/* ── Sub-items: hide per-item icons (group header owns the icon) ── */
.fi-sidebar-nav .fi-sidebar-group .fi-sidebar-item-icon { display: none !important; }
.fi-sidebar-nav .fi-sidebar-group .fi-sidebar-item > a,
.fi-sidebar-nav .fi-sidebar-group .fi-sidebar-item > button { padding-inline-start: 1.25rem !important; }

/* ── Hint icon + tooltip: softer, smaller, right next to the label ── */
.fi-fo-field-wrp-hint .fi-icon,
.fi-in-entry-wrp-hint .fi-icon { width: 1rem !important; height: 1rem !important; opacity: 0.55 !important; transition: opacity 150ms ease !important; }
.fi-fo-field-wrp-hint .fi-icon:hover,
.fi-in-entry-wrp-hint .fi-icon:hover { opacity: 0.9 !important; }
/* Tippy.js tooltip (Filament uses tippy under the hood) — soft pill */
.tippy-box[data-theme~="tippy-filament"] {
  background: rgba(17, 24, 39, 0.92) !important;
  color: #fff !important;
  font-size: 0.75rem !important;
  font-weight: 400 !important;
  line-height: 1.4 !important;
  padding: 0.1rem 0.25rem !important;
  border-radius: 0.5rem !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12), 0 2px 6px rgba(0, 0, 0, 0.08) !important;
  max-width: 260px !important;
}
.tippy-box[data-theme~="tippy-filament"] .tippy-content { padding: 0.5rem 0.75rem !important; }
.tippy-box[data-theme~="tippy-filament"] .tippy-arrow { color: rgba(17, 24, 39, 0.92) !important; }

/* ── laravel-debugbar visibility on Filament pages ──
   Filament paints its sidebar / topbar at z-index 40+ and the
   SPA container is a transform parent. The debugbar attaches to
   <body>, but its default position:fixed can end up below
   Filament chrome. Force it above everything and give it breathing
   room so it is never clipped by a transformed ancestor. */
#phpdebugbar { z-index: 2147483647 !important; position: fixed !important; }

/* ── Main content: reduce side padding so tables use more horizontal space ── */
.fi-main { padding-inline: 1rem !important; }
@media (min-width: 640px) { .fi-main { padding-inline: 1.25rem !important; } }

/* ── Auth (login) card: more compact ──
   Filament simple pages default to max-w-md (28rem) with generous
   padding and a large logo/heading. Tighten the card width, interior
   padding, logo size, heading and inter-field spacing so the sign-in
   box reads small and focused. */
.fi-simple-main { max-width: 22rem !important; padding: 1.5rem !important; gap: 1.25rem !important; }
.fi-simple-main .fi-logo { height: 2rem !important; }
.fi-simple-page .fi-simple-header { gap: 0.5rem !important; }
.fi-simple-page .fi-simple-header-heading { font-size: 1.25rem !important; line-height: 1.75rem !important; }
.fi-simple-main .fi-sc-form { gap: 1rem !important; }

/* ── Figma-aligned LMS CRUD screens (Universities, Instructors, …) ── */
.fi-resource-universities .fi-figma-primary-action > button,
.fi-resource-universities .fi-figma-primary-action.fi-ac-btn,
.fi-resource-instructors .fi-figma-primary-action > button,
.fi-resource-instructors .fi-figma-primary-action.fi-ac-btn,
.fi-resource-courses .fi-figma-primary-action > button,
.fi-resource-courses .fi-figma-primary-action.fi-ac-btn,
.fi-resource-course-materials .fi-figma-primary-action > button,
.fi-resource-course-materials .fi-figma-primary-action.fi-ac-btn,
.fi-resource-material-packages .fi-figma-primary-action > button,
.fi-resource-material-packages .fi-figma-primary-action.fi-ac-btn,
.fi-resource-coupons .fi-figma-primary-action > button,
.fi-resource-coupons .fi-figma-primary-action.fi-ac-btn,
.fi-resource-banners .fi-figma-primary-action > button,
.fi-resource-banners .fi-figma-primary-action.fi-ac-btn,
.fi-resource-installment-plans .fi-figma-primary-action > button,
.fi-resource-installment-plans .fi-figma-primary-action.fi-ac-btn {
  background-color: #111827 !important;
  color: #fff !important;
  border-color: #111827 !important;
}
.fi-resource-universities .fi-figma-primary-action > button:hover,
.fi-resource-universities .fi-figma-primary-action.fi-ac-btn:hover,
.fi-resource-instructors .fi-figma-primary-action > button:hover,
.fi-resource-instructors .fi-figma-primary-action.fi-ac-btn:hover,
.fi-resource-courses .fi-figma-primary-action > button:hover,
.fi-resource-courses .fi-figma-primary-action.fi-ac-btn:hover,
.fi-resource-course-materials .fi-figma-primary-action > button:hover,
.fi-resource-course-materials .fi-figma-primary-action.fi-ac-btn:hover,
.fi-resource-material-packages .fi-figma-primary-action > button:hover,
.fi-resource-material-packages .fi-figma-primary-action.fi-ac-btn:hover,
.fi-resource-coupons .fi-figma-primary-action > button:hover,
.fi-resource-coupons .fi-figma-primary-action.fi-ac-btn:hover,
.fi-resource-banners .fi-figma-primary-action > button:hover,
.fi-resource-banners .fi-figma-primary-action.fi-ac-btn:hover,
.fi-resource-installment-plans .fi-figma-primary-action > button:hover,
.fi-resource-installment-plans .fi-figma-primary-action.fi-ac-btn:hover {
  background-color: #1f2937 !important;
  border-color: #1f2937 !important;
}
.fi-resource-universities .fi-university-name-cell {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.fi-resource-universities .fi-university-name-cell__logo {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 0.5rem;
  object-fit: cover;
  flex-shrink: 0;
  background: #f3f4f6;
}
.fi-resource-universities .fi-university-name-cell__text {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  min-width: 0;
}
.fi-resource-universities .fi-university-name-cell__name {
  font-weight: 600;
  color: #111827;
  line-height: 1.25;
}
.fi-resource-universities .fi-university-name-cell__code {
  font-size: 0.8125rem;
  color: #6b7280;
  line-height: 1.25;
}
.fi-resource-universities .fi-figma-status-active .fi-badge,
.fi-resource-instructors .fi-figma-status-active .fi-badge,
.fi-resource-courses .fi-figma-status-active .fi-badge,
.fi-resource-course-materials .fi-figma-status-active .fi-badge,
.fi-resource-material-packages .fi-figma-status-active .fi-badge,
.fi-resource-coupons .fi-figma-status-active .fi-badge,
.fi-resource-banners .fi-figma-status-active .fi-badge,
.fi-resource-installment-plans .fi-figma-status-active .fi-badge {
  background-color: #111827 !important;
  color: #fff !important;
}
.fi-resource-universities .fi-figma-status-inactive .fi-badge,
.fi-resource-instructors .fi-figma-status-inactive .fi-badge,
.fi-resource-courses .fi-figma-status-inactive .fi-badge,
.fi-resource-course-materials .fi-figma-status-inactive .fi-badge,
.fi-resource-material-packages .fi-figma-status-inactive .fi-badge,
.fi-resource-coupons .fi-figma-status-inactive .fi-badge,
.fi-resource-banners .fi-figma-status-inactive .fi-badge,
.fi-resource-installment-plans .fi-figma-status-inactive .fi-badge {
  background-color: #f3f4f6 !important;
  color: #6b7280 !important;
}
.fi-resource-coupons .fi-figma-status-expired .fi-badge,
.fi-resource-installment-plans .fi-figma-status-expired .fi-badge {
  background-color: #fef2f2 !important;
  color: #dc2626 !important;
}
.fi-resource-universities .fi-figma-form-card,
.fi-resource-instructors .fi-figma-form-card,
.fi-resource-courses .fi-figma-form-card,
.fi-resource-course-materials .fi-figma-form-card,
.fi-resource-material-packages .fi-figma-form-card,
.fi-resource-coupons .fi-figma-form-card,
.fi-resource-banners .fi-figma-form-card,
.fi-resource-installment-plans .fi-figma-form-card,
.fi-resource-orders .fi-figma-form-card,
.fi-resource-transactions .fi-figma-form-card,
.fi-resource-learners .fi-figma-form-card {
  border-radius: 0.75rem;
}
.fi-resource-universities .fi-sc-form > .fi-sc-section,
.fi-resource-instructors .fi-sc-form > .fi-sc-section,
.fi-resource-courses .fi-sc-form > .fi-sc-section {
  max-width: 56rem;
}
.fi-resource-course-materials .fi-sc-form > .fi-sc-section {
  max-width: none;
}
.fi-resource-course-materials .fi-sc-form {
  width: 100%;
}
.fi-resource-course-materials .fi-sc-section.fi-material-unified-form {
  width: 100%;
  max-width: 100%;
}
.fi-resource-course-materials .fi-sc-section.fi-material-unified-form {
  padding: 1.5rem 1.75rem !important;
  background: #fff !important;
  border: 1px solid #e5e7eb !important;
  border-radius: 0.75rem !important;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04) !important;
}
.fi-resource-course-materials .fi-material-unified-form .fi-material-subsection-heading {
  margin: 0 0 1rem;
  font-size: 1rem;
  font-weight: 600;
  color: #111827;
  line-height: 1.4;
}
.fi-resource-course-materials .fi-material-unified-form .fi-material-subsection-divider {
  height: 1px;
  background: #e5e7eb;
  margin: 1.5rem 0;
}
.fi-resource-course-materials .fi-material-unified-form .fi-material-inline-heading {
  margin: 0 0 0.75rem;
  font-size: 0.9375rem;
  font-weight: 600;
  color: #111827;
}
.fi-resource-course-materials .fi-material-unified-form .fi-material-field-note {
  margin: 0.5rem 0 0;
  font-size: 0.8125rem;
  color: #6b7280;
  line-height: 1.5;
}
.fi-resource-course-materials .fi-material-unified-form .fi-material-section-heading {
  margin: 0 0 1rem;
  font-size: 1rem;
}
.fi-resource-course-materials .fi-material-unified-form .fi-fo-field-wrp-label {
  font-size: 0.875rem;
  font-weight: 500;
  color: #374151;
}
.fi-resource-course-materials .fi-material-unified-form input:not([type="checkbox"]),
.fi-resource-course-materials .fi-material-unified-form textarea,
.fi-resource-course-materials .fi-material-unified-form select,
.fi-resource-course-materials .fi-material-unified-form .fi-select-input {
  border-radius: 0.5rem !important;
  border-color: #e5e7eb !important;
  background: #fff !important;
}
.fi-resource-course-materials .fi-material-unified-form .fi-material-image-upload .fi-fo-file-upload {
  border: 1px dashed #d1d5db !important;
  border-radius: 0.75rem !important;
  background: #fafafa !important;
  padding: 1rem 1.25rem !important;
  min-height: 5.5rem;
}
.fi-resource-course-materials .fi-material-unified-form .fi-material-image-upload .filepond--root {
  border: none !important;
  background: transparent !important;
}
.fi-resource-course-materials .fi-material-unified-form .fi-fo-grid:has(.fi-material-file-row-btn) {
  align-items: end;
  gap: 0.75rem;
}
.fi-resource-course-materials .fi-material-cancel-action > button,
.fi-resource-course-materials .fi-material-cancel-action.fi-ac-btn {
  background: #fff !important;
  color: #111827 !important;
  border: 1px solid #d1d5db !important;
  box-shadow: none !important;
}
.fi-resource-course-materials .fi-material-cancel-action > button:hover,
.fi-resource-course-materials .fi-material-cancel-action.fi-ac-btn:hover {
  background: #f9fafb !important;
}
.fi-resource-universities .fi-sc-form .fi-fo-tabs,
.fi-resource-instructors .fi-sc-form .fi-fo-tabs,
.fi-resource-courses .fi-sc-form .fi-fo-tabs,
.fi-resource-course-materials .fi-sc-form .fi-fo-tabs {
  margin-bottom: 0.5rem;
}
.fi-resource-universities .fi-sc-form-actions,
.fi-resource-instructors .fi-sc-form-actions,
.fi-resource-courses .fi-sc-form-actions,
.fi-resource-course-materials .fi-sc-form-actions {
  justify-content: flex-end !important;
  gap: 0.75rem !important;
  padding-top: 1rem !important;
  border-top: 1px solid #e5e7eb;
  margin-top: 0.5rem !important;
}
.fi-resource-universities .fi-sc-form-actions .fi-ac-btn-action[type="submit"],
.fi-resource-universities .fi-sc-form-actions .fi-ac-btn-action.fi-color-primary,
.fi-resource-instructors .fi-sc-form-actions .fi-ac-btn-action[type="submit"],
.fi-resource-instructors .fi-sc-form-actions .fi-ac-btn-action.fi-color-primary,
.fi-resource-courses .fi-sc-form-actions .fi-ac-btn-action[type="submit"],
.fi-resource-courses .fi-sc-form-actions .fi-ac-btn-action.fi-color-primary,
.fi-resource-course-materials .fi-sc-form-actions .fi-ac-btn-action[type="submit"],
.fi-resource-course-materials .fi-sc-form-actions .fi-ac-btn-action.fi-color-primary {
  background-color: #111827 !important;
  color: #fff !important;
  border-color: #111827 !important;
}
.fi-resource-instructors .fi-instructor-invitation-banner .fi-fo-placeholder {
  background: #eff6ff;
  border: 1px solid #bfdbfe;
  border-radius: 0.5rem;
  padding: 0.75rem 1rem;
  color: #1e40af;
  font-size: 0.875rem;
}
.fi-resource-universities .fi-university-details-header {
  margin-bottom: 0.5rem;
}
.fi-resource-universities .fi-university-details-header > .fi-sc-section {
  padding: 1.5rem !important;
  border-radius: 0.75rem !important;
}
.fi-resource-universities .fi-university-view-header {
  display: flex;
  gap: 2rem;
  align-items: flex-start;
  justify-content: space-between;
}
.fi-resource-universities .fi-university-view-header__body {
  flex: 1;
  min-width: 0;
}
.fi-resource-universities .fi-university-view-header__top {
  display: flex;
  gap: 1rem;
  align-items: center;
}
.fi-resource-universities .fi-university-view-header__logo {
  width: 5rem;
  height: 5rem;
  border-radius: 0.75rem;
  object-fit: cover;
  flex-shrink: 0;
  background: #f3f4f6;
}
.fi-resource-universities .fi-university-view-header__name {
  font-size: 1.375rem;
  font-weight: 700;
  color: #111827;
  line-height: 1.3;
}
.fi-resource-universities .fi-university-view-header__badges {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.375rem;
  flex-wrap: wrap;
}
.fi-resource-universities .fi-university-view-header__badge {
  display: inline-flex;
  align-items: center;
  padding: 0.125rem 0.625rem;
  border-radius: 9999px;
  font-size: 0.75rem;
  font-weight: 500;
}
.fi-resource-universities .fi-university-view-header__badge.fi-figma-status-active {
  background: #111827;
  color: #fff;
}
.fi-resource-universities .fi-university-view-header__badge.fi-figma-status-inactive {
  background: #f3f4f6;
  color: #6b7280;
}
.fi-resource-universities .fi-university-view-header__code {
  font-size: 0.8125rem;
  color: #6b7280;
}
.fi-resource-universities .fi-university-view-header__details {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.5rem;
  margin-top: 1.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid #e5e7eb;
  max-width: 28rem;
}
.fi-resource-universities .fi-university-view-header__detail-label {
  display: block;
  font-size: 0.8125rem;
  color: #6b7280;
  margin-bottom: 0.25rem;
}
.fi-resource-universities .fi-university-view-header__detail-value {
  display: block;
  font-size: 0.9375rem;
  font-weight: 600;
  color: #111827;
}
.fi-resource-universities .fi-university-view-header__video {
  width: 18rem;
  flex-shrink: 0;
}
.fi-resource-universities .fi-university-view-header__video-placeholder {
  aspect-ratio: 16 / 9;
  background: #111827;
  border-radius: 0.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #9ca3af;
}
.fi-resource-universities .fi-university-view-header__video-caption {
  margin-top: 0.5rem;
  font-size: 0.75rem;
  color: #6b7280;
  text-align: center;
  line-height: 1.4;
}
.fi-resource-universities .fi-university-view-edit-action > button,
.fi-resource-universities .fi-university-view-edit-action.fi-ac-btn {
  background: #fff !important;
  color: #111827 !important;
  border: 1px solid #d1d5db !important;
}
.fi-resource-universities .fi-university-view-edit-action > button:hover,
.fi-resource-universities .fi-university-view-edit-action.fi-ac-btn:hover {
  background: #f9fafb !important;
}
.fi-resource-universities .fi-university-add-action .fi-icon,
.fi-resource-universities .fi-university-add-action [class*="fi-icon"] {
  order: -1;
}
.fi-resource-universities .fi-resource-relation-manager .fi-ta-header-ctn {
  margin-bottom: 0.75rem;
  order: -1;
}
.fi-resource-universities .fi-resource-relation-manager .fi-ta-ctn {
  display: flex;
  flex-direction: column;
}
.fi-resource-universities .fi-resource-relation-manager .fi-ta-header-ctn .fi-ta-header-toolbar {
  justify-content: flex-end !important;
}
.fi-resource-universities .fi-university-inline-create {
  margin-bottom: 1.5rem;
  background: #eff6ff !important;
  border: 1px solid #bfdbfe !important;
  border-radius: 0.75rem !important;
}
.fi-resource-universities .fi-university-inline-create > .fi-sc-section {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}
.fi-resource-universities .fi-university-inline-create .fi-sc-section-header {
  padding-bottom: 0.75rem !important;
}
.fi-resource-universities .fi-university-inline-create .fi-sc-section-header-heading {
  font-weight: 600 !important;
  color: #111827 !important;
}
.fi-resource-universities .fi-university-inline-create .fi-sc-section-footer-actions {
  justify-content: flex-end !important;
  gap: 0.75rem !important;
  padding-top: 1rem !important;
  border-top: 1px solid #e5e7eb;
  margin-top: 0.5rem !important;
}
.fi-resource-universities .fi-university-inline-create form .fi-fo-grid,
.fi-resource-universities .fi-university-inline-create .fi-sc-component-ctn > .fi-fo-grid {
  width: 100%;
}
.fi-resource-universities .fi-university-inline-create .fi-fo-grid > .fi-fo-field-wrp {
  min-width: 0;
}
.fi-resource-universities .fi-university-inline-create .fi-figma-primary-action > button,
.fi-resource-universities .fi-university-inline-create .fi-figma-primary-action.fi-ac-btn,
.fi-resource-universities .fi-university-inline-create .fi-university-save-btn,
.fi-resource-universities .fi-university-inline-create .fi-university-save-btn > button,
.fi-resource-universities .fi-university-inline-create .fi-university-save-btn.fi-ac-btn-action {
  background-color: #111827 !important;
  color: #fff !important;
  border-color: #111827 !important;
}
.fi-resource-universities .fi-university-inline-create .fi-university-save-btn:hover,
.fi-resource-universities .fi-university-inline-create .fi-university-save-btn > button:hover,
.fi-resource-universities .fi-university-inline-create .fi-university-save-btn.fi-ac-btn-action:hover {
  background-color: #1f2937 !important;
  border-color: #1f2937 !important;
}
.fi-resource-universities .fi-resource-relation-manager .fi-ta-ctn {
  border-radius: 0.75rem;
}
.fi-resource-courses .fi-course-name-cell {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.fi-resource-courses .fi-course-name-cell__photo {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 0.5rem;
  object-fit: cover;
  flex-shrink: 0;
  background: #f3f4f6;
}
.fi-resource-courses .fi-course-name-cell__name {
  font-weight: 600;
  color: #111827;
  line-height: 1.25;
}
.fi-resource-course-materials .fi-material-title-cell {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.fi-resource-course-materials .fi-material-title-cell__photo {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 0.5rem;
  object-fit: cover;
  flex-shrink: 0;
  background: #f3f4f6;
}
.fi-resource-course-materials .fi-material-title-cell__text {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  min-width: 0;
}
.fi-resource-course-materials .fi-material-title-cell__name {
  font-weight: 600;
  color: #111827;
  line-height: 1.25;
}
.fi-resource-course-materials .fi-material-title-cell__name-ar {
  font-size: 0.8125rem;
  color: #6b7280;
  line-height: 1.25;
}
.fi-resource-course-materials .fi-material-course-cell {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
}
.fi-resource-course-materials .fi-material-course-cell__code {
  font-weight: 600;
  color: #111827;
}
.fi-resource-course-materials .fi-material-course-cell__name {
  font-size: 0.875rem;
  color: #374151;
}
.fi-resource-course-materials .fi-material-course-cell__university {
  font-size: 0.8125rem;
  color: #6b7280;
}
.fi-resource-course-materials .fi-material-details-header {
  margin-bottom: 0.5rem;
}
.fi-resource-course-materials .fi-material-details-header > .fi-sc-section {
  padding: 1.5rem !important;
  border-radius: 0.75rem !important;
}
.fi-resource-course-materials .fi-material-view-header {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}
.fi-resource-course-materials .fi-material-view-header__hero {
  display: flex;
  gap: 1.25rem;
  align-items: flex-start;
}
.fi-resource-course-materials .fi-material-view-header__image {
  width: 12rem;
  height: 7rem;
  border-radius: 0.75rem;
  object-fit: cover;
  flex-shrink: 0;
  background: #f3f4f6;
}
.fi-resource-course-materials .fi-material-view-header__course-code {
  font-size: 0.875rem;
  color: #6b7280;
  margin-bottom: 0.25rem;
}
.fi-resource-course-materials .fi-material-view-header__title {
  font-size: 1.25rem;
  font-weight: 700;
  color: #111827;
}
.fi-resource-course-materials .fi-material-view-header__title-ar {
  font-size: 1rem;
  color: #374151;
  margin-top: 0.25rem;
}
.fi-resource-course-materials .fi-material-view-header__badges {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
}
.fi-resource-course-materials .fi-material-view-header__badge {
  display: inline-flex;
  padding: 0.125rem 0.625rem;
  border-radius: 9999px;
  font-size: 0.75rem;
  font-weight: 500;
}
.fi-resource-course-materials .fi-material-view-header__badge.fi-figma-status-active {
  background: #111827;
  color: #fff;
}
.fi-resource-course-materials .fi-material-view-header__badge.fi-figma-status-inactive {
  background: #f3f4f6;
  color: #6b7280;
}
.fi-resource-course-materials .fi-material-view-header__meta-item {
  font-size: 0.875rem;
  color: #374151;
}
.fi-resource-course-materials .fi-material-view-header__price {
  font-weight: 700;
}
.fi-resource-course-materials .fi-material-view-header__details {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1rem;
  margin-top: 1rem;
}
.fi-resource-course-materials .fi-material-view-header__detail-label {
  display: block;
  font-size: 0.8125rem;
  color: #6b7280;
  margin-bottom: 0.25rem;
}
.fi-resource-course-materials .fi-material-view-header__detail-value {
  font-size: 0.9375rem;
  font-weight: 600;
  color: #111827;
}
.fi-resource-course-materials .fi-material-view-header__descriptions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.5rem;
  margin-top: 1.25rem;
  padding-top: 1.25rem;
  border-top: 1px solid #e5e7eb;
}
.fi-resource-course-materials .fi-material-view-header__description-text {
  margin: 0;
  font-size: 0.875rem;
  color: #374151;
  line-height: 1.5;
}
.fi-resource-course-materials .fi-material-view-header__instructor {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid #e5e7eb;
}
.fi-resource-course-materials .fi-material-view-header__stats {
  padding-top: 1.25rem;
  border-top: 1px solid #e5e7eb;
}
.fi-resource-course-materials .fi-material-view-header__stats-label {
  font-size: 0.875rem;
  font-weight: 600;
  color: #111827;
  margin-bottom: 0.75rem;
}
.fi-resource-course-materials .fi-material-view-header__stats-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
  max-width: 24rem;
}
.fi-resource-course-materials .fi-material-view-header__stat-label {
  display: block;
  font-size: 0.8125rem;
  color: #6b7280;
}
.fi-resource-course-materials .fi-material-view-header__stat-value {
  font-size: 1.75rem;
  font-weight: 700;
}
.fi-resource-course-materials .fi-material-view-header__stat-value--views {
  color: #2563eb;
}
.fi-resource-course-materials .fi-material-view-header__stat-value--orders {
  color: #16a34a;
}
.fi-resource-course-materials .fi-material-view-edit-action > button,
.fi-resource-course-materials .fi-material-view-edit-action.fi-ac-btn {
  background: #fff !important;
  color: #111827 !important;
  border: 1px solid #d1d5db !important;
}
.fi-resource-course-materials .fi-resource-relation-manager .fi-ta-ctn {
  border-radius: 0.75rem;
}
.fi-resource-course-materials .fi-university-inline-create,
.fi-resource-course-materials .fi-university-inline-create > .fi-sc-section {
  margin-bottom: 1.5rem;
  background: #eff6ff !important;
  border: 1px solid #bfdbfe !important;
  border-radius: 0.75rem !important;
}
.fi-resource-course-materials .fi-university-inline-create > .fi-sc-section {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}
.fi-resource-course-materials .fi-university-inline-create .fi-university-save-btn,
.fi-resource-course-materials .fi-university-inline-create .fi-university-save-btn > button,
.fi-resource-course-materials .fi-university-inline-create .fi-university-save-btn.fi-ac-btn-action {
  background-color: #111827 !important;
  color: #fff !important;
  border-color: #111827 !important;
}
.fi-resource-course-materials .fi-material-section-heading {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 600;
  color: #111827;
}
.fi-resource-course-materials .fi-material-section-heading__icon {
  display: inline-flex;
  color: #6b7280;
}
.fi-resource-course-materials .fi-material-image-section .fi-sc-section-description {
  margin-bottom: 0.75rem;
  color: #6b7280;
  font-size: 0.875rem;
}
.fi-resource-course-materials .fi-material-image-section .fi-fo-file-upload {
  border: 1px solid #e5e7eb;
  border-radius: 0.75rem;
  padding: 1rem;
  background: #fafafa;
}
.fi-resource-course-materials .fi-material-dashed-add-btn {
  width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  border: 1px dashed #d1d5db;
  border-radius: 0.75rem;
  padding: 0.875rem 1rem;
  background: #fafafa;
  color: #111827;
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
}
.fi-resource-course-materials .fi-material-dashed-add-btn:hover {
  background: #f3f4f6;
  border-color: #9ca3af;
}
.fi-resource-course-materials .fi-material-video-inline.fi-university-inline-create,
.fi-resource-course-materials .fi-material-video-inline.fi-university-inline-create > .fi-sc-section {
  margin-top: 0.75rem;
  margin-bottom: 0;
  background: #eff6ff !important;
  border: 1px solid #bfdbfe !important;
  border-radius: 0.75rem !important;
}
.fi-resource-course-materials .fi-material-video-inline > .fi-sc-section {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}
.fi-resource-course-materials .fi-material-inline-close > button {
  min-width: auto;
  padding: 0.375rem !important;
}
.fi-resource-course-materials .fi-material-inline-submit,
.fi-resource-course-materials .fi-material-inline-submit > button,
.fi-resource-course-materials .fi-material-inline-submit.fi-ac-btn-action,
.fi-resource-course-materials .fi-material-file-add-btn,
.fi-resource-course-materials .fi-material-file-add-btn > button,
.fi-resource-course-materials .fi-material-file-add-btn.fi-ac-btn-action {
  width: 100%;
  justify-content: center;
  background-color: #111827 !important;
  color: #fff !important;
  border-color: #111827 !important;
}
.fi-resource-course-materials .fi-material-inline-note {
  margin: 0.75rem 0 0;
  font-size: 0.8125rem;
  color: #6b7280;
}
.fi-resource-course-materials .fi-material-file-inline-row > .fi-sc-section {
  border: none !important;
  box-shadow: none !important;
  background: transparent !important;
  padding-top: 0.5rem !important;
}
.fi-resource-course-materials .fi-material-file-inline-row .fi-sc-section-header-heading {
  font-size: 0.9375rem;
  font-weight: 600;
}
.fi-resource-course-materials .fi-material-file-inline-row .fi-fo-grid {
  align-items: end;
}
.fi-resource-course-materials .fi-material-file-row-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  width: 100%;
  min-height: 2.625rem;
  padding: 0.625rem 1rem;
  border: none;
  border-radius: 0.5rem;
  background: #111827;
  color: #fff;
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
}
.fi-resource-course-materials .fi-material-file-row-btn:hover {
  background: #1f2937;
}
.fi-resource-course-materials .fi-material-videos-section .fi-sc-section-header-heading,
.fi-resource-course-materials .fi-material-files-section .fi-sc-section-header-heading {
  font-weight: 600;
}
.fi-resource-course-materials .fi-material-data-table-wrap {
  overflow-x: auto;
  margin-bottom: 1rem;
}
.fi-resource-course-materials .fi-material-data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.875rem;
}
.fi-resource-course-materials .fi-material-data-table th,
.fi-resource-course-materials .fi-material-data-table td {
  padding: 0.75rem 1rem;
  text-align: start;
  border-bottom: 1px solid #e5e7eb;
}
.fi-resource-course-materials .fi-material-data-table th {
  font-weight: 600;
  color: #374151;
  background: #f9fafb;
}
.fi-resource-course-materials .fi-material-table-code {
  font-size: 0.8125rem;
  color: #6b7280;
  word-break: break-all;
}
.fi-resource-course-materials .fi-material-table-badge {
  display: inline-flex;
  padding: 0.125rem 0.625rem;
  border-radius: 9999px;
  font-size: 0.75rem;
  font-weight: 500;
}
.fi-resource-course-materials .fi-material-table-badge.fi-figma-status-active {
  background: #111827;
  color: #fff;
}
.fi-resource-course-materials .fi-material-table-badge.fi-figma-status-inactive {
  background: #f3f4f6;
  color: #6b7280;
}
.fi-resource-course-materials .fi-material-table-delete,
.fi-resource-course-materials .fi-material-table-edit {
  cursor: pointer;
  background: none;
  border: none;
  padding: 0.25rem;
}
.fi-resource-course-materials .fi-material-table-delete {
  color: #dc2626;
}
.fi-resource-course-materials .fi-material-table-edit {
  color: #2563eb;
}
.fi-resource-course-materials .fi-material-table-actions {
  display: flex;
  gap: 0.5rem;
  align-items: center;
}
.fi-resource-course-materials .fi-material-table-title {
  font-weight: 600;
  color: #111827;
}
.fi-resource-course-materials .fi-material-table-meta {
  color: #6b7280;
}
.fi-resource-course-materials .fi-material-file-name {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  font-weight: 500;
}
.fi-resource-course-materials .fi-material-file-name svg {
  color: #dc2626;
  flex-shrink: 0;
}

/* ── Dark mode: Figma academic modules ──
   Custom light-only colors above use !important; override them here
   so cards, inputs, and inline forms match the Slate dark palette. */
.dark .fi-resource-universities .fi-university-name-cell__name,
.dark .fi-resource-universities .fi-university-view-header__name,
.dark .fi-resource-universities .fi-university-view-header__detail-value,
.dark .fi-resource-instructors .fi-instructor-name-cell__name,
.dark .fi-resource-courses .fi-course-name-cell__name,
.dark .fi-resource-course-materials .fi-material-title-cell__name,
.dark .fi-resource-course-materials .fi-material-course-cell__code,
.dark .fi-resource-course-materials .fi-material-view-header__title,
.dark .fi-resource-course-materials .fi-material-view-header__detail-value,
.dark .fi-resource-course-materials .fi-material-view-header__stats-label,
.dark .fi-resource-course-materials .fi-material-section-heading,
.dark .fi-resource-course-materials .fi-material-table-title {
  color: #f1f5f9;
}
.dark .fi-resource-universities .fi-university-name-cell__code,
.dark .fi-resource-universities .fi-university-view-header__code,
.dark .fi-resource-universities .fi-university-view-header__detail-label,
.dark .fi-resource-universities .fi-university-view-header__video-caption,
.dark .fi-resource-instructors .fi-instructor-name-cell__email,
.dark .fi-resource-courses .fi-course-name-cell__code,
.dark .fi-resource-course-materials .fi-material-title-cell__name-ar,
.dark .fi-resource-course-materials .fi-material-course-cell__name,
.dark .fi-resource-course-materials .fi-material-course-cell__university,
.dark .fi-resource-course-materials .fi-material-view-header__course-code,
.dark .fi-resource-course-materials .fi-material-view-header__title-ar,
.dark .fi-resource-course-materials .fi-material-view-header__meta-item,
.dark .fi-resource-course-materials .fi-material-view-header__detail-label,
.dark .fi-resource-course-materials .fi-material-view-header__description-text,
.dark .fi-resource-course-materials .fi-material-view-header__stat-label,
.dark .fi-resource-course-materials .fi-material-section-heading__icon,
.dark .fi-resource-course-materials .fi-material-table-meta,
.dark .fi-resource-course-materials .fi-material-table-code,
.dark .fi-resource-course-materials .fi-material-inline-note,
.dark .fi-resource-course-materials .fi-material-unified-form .fi-material-field-note {
  color: #94a3b8;
}
.dark .fi-resource-universities .fi-university-name-cell__logo,
.dark .fi-resource-universities .fi-university-view-header__logo,
.dark .fi-resource-courses .fi-course-name-cell__photo,
.dark .fi-resource-course-materials .fi-material-title-cell__photo,
.dark .fi-resource-course-materials .fi-material-view-header__image {
  background: #1e293b;
}
.dark .fi-resource-universities .fi-figma-status-inactive .fi-badge,
.dark .fi-resource-instructors .fi-figma-status-inactive .fi-badge,
.dark .fi-resource-courses .fi-figma-status-inactive .fi-badge,
.dark .fi-resource-course-materials .fi-figma-status-inactive .fi-badge,
.dark .fi-resource-universities .fi-university-view-header__badge.fi-figma-status-inactive,
.dark .fi-resource-course-materials .fi-material-view-header__badge.fi-figma-status-inactive,
.dark .fi-resource-course-materials .fi-material-table-badge.fi-figma-status-inactive {
  background: #1e293b !important;
  color: #94a3b8 !important;
}
.dark .fi-resource-universities .fi-figma-status-active .fi-badge,
.dark .fi-resource-instructors .fi-figma-status-active .fi-badge,
.dark .fi-resource-courses .fi-figma-status-active .fi-badge,
.dark .fi-resource-course-materials .fi-figma-status-active .fi-badge,
.dark .fi-resource-universities .fi-university-view-header__badge.fi-figma-status-active,
.dark .fi-resource-course-materials .fi-material-view-header__badge.fi-figma-status-active,
.dark .fi-resource-course-materials .fi-material-table-badge.fi-figma-status-active {
  background: #f1f5f9 !important;
  color: #0f172a !important;
}
.dark .fi-resource-universities .fi-sc-form-actions,
.dark .fi-resource-instructors .fi-sc-form-actions,
.dark .fi-resource-courses .fi-sc-form-actions,
.dark .fi-resource-course-materials .fi-sc-form-actions,
.dark .fi-resource-universities .fi-university-view-header__details,
.dark .fi-resource-universities .fi-university-inline-create .fi-sc-section-footer-actions,
.dark .fi-resource-course-materials .fi-material-view-header__descriptions,
.dark .fi-resource-course-materials .fi-material-view-header__instructor,
.dark .fi-resource-course-materials .fi-material-view-header__stats {
  border-top-color: #1e293b;
}
.dark .fi-resource-universities .fi-figma-primary-action > button,
.dark .fi-resource-universities .fi-figma-primary-action.fi-ac-btn,
.dark .fi-resource-instructors .fi-figma-primary-action > button,
.dark .fi-resource-instructors .fi-figma-primary-action.fi-ac-btn,
.dark .fi-resource-courses .fi-figma-primary-action > button,
.dark .fi-resource-courses .fi-figma-primary-action.fi-ac-btn,
.dark .fi-resource-course-materials .fi-figma-primary-action > button,
.dark .fi-resource-course-materials .fi-figma-primary-action.fi-ac-btn,
.dark .fi-resource-universities .fi-sc-form-actions .fi-ac-btn-action[type="submit"],
.dark .fi-resource-universities .fi-sc-form-actions .fi-ac-btn-action.fi-color-primary,
.dark .fi-resource-instructors .fi-sc-form-actions .fi-ac-btn-action[type="submit"],
.dark .fi-resource-instructors .fi-sc-form-actions .fi-ac-btn-action.fi-color-primary,
.dark .fi-resource-courses .fi-sc-form-actions .fi-ac-btn-action[type="submit"],
.dark .fi-resource-courses .fi-sc-form-actions .fi-ac-btn-action.fi-color-primary,
.dark .fi-resource-course-materials .fi-sc-form-actions .fi-ac-btn-action[type="submit"],
.dark .fi-resource-course-materials .fi-sc-form-actions .fi-ac-btn-action.fi-color-primary,
.dark .fi-resource-universities .fi-university-inline-create .fi-university-save-btn,
.dark .fi-resource-universities .fi-university-inline-create .fi-university-save-btn > button,
.dark .fi-resource-universities .fi-university-inline-create .fi-university-save-btn.fi-ac-btn-action,
.dark .fi-resource-course-materials .fi-university-inline-create .fi-university-save-btn,
.dark .fi-resource-course-materials .fi-university-inline-create .fi-university-save-btn > button,
.dark .fi-resource-course-materials .fi-university-inline-create .fi-university-save-btn.fi-ac-btn-action,
.dark .fi-resource-course-materials .fi-material-inline-submit,
.dark .fi-resource-course-materials .fi-material-inline-submit > button,
.dark .fi-resource-course-materials .fi-material-inline-submit.fi-ac-btn-action,
.dark .fi-resource-course-materials .fi-material-file-row-btn {
  background-color: #f1f5f9 !important;
  color: #0f172a !important;
  border-color: #f1f5f9 !important;
}
.dark .fi-resource-universities .fi-figma-primary-action > button:hover,
.dark .fi-resource-universities .fi-figma-primary-action.fi-ac-btn:hover,
.dark .fi-resource-instructors .fi-figma-primary-action > button:hover,
.dark .fi-resource-instructors .fi-figma-primary-action.fi-ac-btn:hover,
.dark .fi-resource-courses .fi-figma-primary-action > button:hover,
.dark .fi-resource-courses .fi-figma-primary-action.fi-ac-btn:hover,
.dark .fi-resource-course-materials .fi-figma-primary-action > button:hover,
.dark .fi-resource-course-materials .fi-figma-primary-action.fi-ac-btn:hover,
.dark .fi-resource-universities .fi-university-inline-create .fi-university-save-btn:hover,
.dark .fi-resource-universities .fi-university-inline-create .fi-university-save-btn > button:hover,
.dark .fi-resource-course-materials .fi-material-file-row-btn:hover {
  background-color: #e2e8f0 !important;
  border-color: #e2e8f0 !important;
}
.dark .fi-resource-universities .fi-university-view-edit-action > button,
.dark .fi-resource-universities .fi-university-view-edit-action.fi-ac-btn,
.dark .fi-resource-course-materials .fi-material-view-edit-action > button,
.dark .fi-resource-course-materials .fi-material-view-edit-action.fi-ac-btn,
.dark .fi-resource-course-materials .fi-material-cancel-action > button,
.dark .fi-resource-course-materials .fi-material-cancel-action.fi-ac-btn {
  background: #0f172a !important;
  color: #f1f5f9 !important;
  border-color: #334155 !important;
}
.dark .fi-resource-universities .fi-university-view-edit-action > button:hover,
.dark .fi-resource-universities .fi-university-view-edit-action.fi-ac-btn:hover,
.dark .fi-resource-course-materials .fi-material-view-edit-action > button:hover,
.dark .fi-resource-course-materials .fi-material-view-edit-action.fi-ac-btn:hover,
.dark .fi-resource-course-materials .fi-material-cancel-action > button:hover,
.dark .fi-resource-course-materials .fi-material-cancel-action.fi-ac-btn:hover {
  background: #1e293b !important;
}
.dark .fi-resource-universities .fi-university-inline-create,
.dark .fi-resource-course-materials .fi-university-inline-create,
.dark .fi-resource-course-materials .fi-university-inline-create > .fi-sc-section,
.dark .fi-resource-course-materials .fi-material-video-inline.fi-university-inline-create,
.dark .fi-resource-course-materials .fi-material-video-inline.fi-university-inline-create > .fi-sc-section {
  background: rgba(30, 58, 138, 0.22) !important;
  border-color: #1e3a8a !important;
}
.dark .fi-resource-universities .fi-university-inline-create .fi-sc-section-header-heading {
  color: #f1f5f9 !important;
}
.dark .fi-resource-course-materials .fi-sc-section.fi-material-unified-form {
  background: #0f172a !important;
  border-color: #1e293b !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4) !important;
}
.dark .fi-resource-course-materials .fi-material-unified-form .fi-material-subsection-heading,
.dark .fi-resource-course-materials .fi-material-unified-form .fi-material-inline-heading {
  color: #f1f5f9;
}
.dark .fi-resource-course-materials .fi-material-unified-form .fi-material-subsection-divider {
  background: #1e293b;
}
.dark .fi-resource-course-materials .fi-material-unified-form .fi-fo-field-wrp-label {
  color: #cbd5e1;
}
.dark .fi-resource-course-materials .fi-material-unified-form input:not([type="checkbox"]),
.dark .fi-resource-course-materials .fi-material-unified-form textarea,
.dark .fi-resource-course-materials .fi-material-unified-form select,
.dark .fi-resource-course-materials .fi-material-unified-form .fi-select-input {
  background: #020617 !important;
  border-color: #334155 !important;
  color: #f1f5f9;
}
.dark .fi-resource-course-materials .fi-material-unified-form .fi-material-image-upload .fi-fo-file-upload,
.dark .fi-resource-course-materials .fi-material-image-section .fi-fo-file-upload {
  background: #020617 !important;
  border-color: #334155 !important;
}
.dark .fi-resource-course-materials .fi-material-dashed-add-btn {
  background: #020617;
  border-color: #334155;
  color: #f1f5f9;
}
.dark .fi-resource-course-materials .fi-material-dashed-add-btn:hover {
  background: #1e293b;
  border-color: #475569;
}
.dark .fi-resource-course-materials .fi-material-data-table th,
.dark .fi-resource-course-materials .fi-material-data-table td {
  border-bottom-color: #1e293b;
}
.dark .fi-resource-course-materials .fi-material-data-table th {
  background: #020617;
  color: #cbd5e1;
}
.dark .fi-resource-course-materials .fi-material-data-table td {
  color: #e2e8f0;
}

/* ── Packages (Figma) ── */
.fi-resource-material-packages .fi-sc-form > .fi-sc-section {
  max-width: none;
}
.fi-resource-material-packages .fi-sc-form > .fi-sc-section.fi-figma-form-card {
  width: 100%;
}
.fi-resource-material-packages .fi-package-price,
.fi-resource-material-packages .fi-package-view-header__price,
.fi-resource-material-packages .fi-package-view-header__value--price,
.fi-resource-material-packages .fi-package-view-header__value--savings,
.fi-resource-material-packages .fi-package-material-item__price {
  color: #16a34a;
  font-weight: 600;
}
.fi-resource-material-packages .fi-package-table-thumb {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 0.5rem;
  object-fit: cover;
  display: block;
}
.fi-resource-material-packages .fi-package-view-header__top {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  margin-bottom: 1.5rem;
}
.fi-resource-material-packages .fi-package-view-header__image {
  width: 4rem;
  height: 4rem;
  border-radius: 0.75rem;
  object-fit: cover;
  flex-shrink: 0;
  background: #f3f4f6;
}
.fi-resource-material-packages .fi-package-view-header__titles {
  flex: 1;
  min-width: 0;
}
.fi-resource-material-packages .fi-package-view-header__name {
  font-size: 1.25rem;
  font-weight: 700;
  color: #111827;
}
.fi-resource-material-packages .fi-package-view-header__name-ar {
  font-size: 1rem;
  color: #374151;
  margin-top: 0.25rem;
}
.fi-resource-material-packages .fi-package-view-header__badges {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-shrink: 0;
}
.fi-resource-material-packages .fi-package-view-header__badge {
  display: inline-flex;
  padding: 0.125rem 0.625rem;
  border-radius: 9999px;
  font-size: 0.75rem;
  font-weight: 500;
}
.fi-resource-material-packages .fi-package-view-header__badge.fi-figma-status-active {
  background: #111827;
  color: #fff;
}
.fi-resource-material-packages .fi-package-view-header__badge.fi-figma-status-inactive {
  background: #f3f4f6;
  color: #6b7280;
}
.fi-resource-material-packages .fi-package-view-header__price {
  font-size: 1.125rem;
}
.fi-resource-material-packages .fi-package-view-header__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.25rem 2rem;
  padding-top: 1.25rem;
  border-top: 1px solid #e5e7eb;
}
.fi-resource-material-packages .fi-package-view-header__field--ar {
  text-align: end;
}
.fi-resource-material-packages .fi-package-view-header__label {
  display: block;
  font-size: 0.8125rem;
  color: #6b7280;
  margin-bottom: 0.25rem;
}
.fi-resource-material-packages .fi-package-view-header__value {
  font-size: 0.9375rem;
  font-weight: 600;
  color: #111827;
}
.fi-resource-material-packages .fi-package-view-header__yes-badge {
  display: inline-flex;
  padding: 0.125rem 0.625rem;
  border-radius: 9999px;
  background: #f3f4f6;
  font-size: 0.8125rem;
  font-weight: 500;
}
.fi-resource-material-packages .fi-package-view-section {
  margin-top: 1.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid #e5e7eb;
}
.fi-resource-material-packages .fi-package-view-section__heading {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0 0 1rem;
  font-size: 1rem;
  font-weight: 600;
  color: #111827;
}
.fi-resource-material-packages .fi-package-view-section__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.5rem;
}
.fi-resource-material-packages .fi-package-view-section__ar {
  text-align: end;
}
.fi-resource-material-packages .fi-package-view-section__label {
  display: block;
  font-size: 0.8125rem;
  color: #6b7280;
  margin-bottom: 0.375rem;
}
.fi-resource-material-packages .fi-package-view-section__text {
  margin: 0;
  font-size: 0.875rem;
  color: #374151;
  line-height: 1.5;
}
.fi-resource-material-packages .fi-package-material-list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.fi-resource-material-packages .fi-package-material-item {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.875rem 1rem;
  border: 1px solid #e5e7eb;
  border-radius: 0.75rem;
}
.fi-resource-material-packages .fi-package-material-item__photo {
  width: 3rem;
  height: 3rem;
  border-radius: 0.5rem;
  object-fit: cover;
  flex-shrink: 0;
  background: #f3f4f6;
}
.fi-resource-material-packages .fi-package-material-item__body {
  flex: 1;
  min-width: 0;
}
.fi-resource-material-packages .fi-package-material-item__title {
  font-weight: 600;
  color: #111827;
}
.fi-resource-material-packages .fi-package-material-item__meta {
  font-size: 0.8125rem;
  color: #6b7280;
  margin-top: 0.125rem;
}
.fi-resource-material-packages .fi-package-material-item__aside {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.375rem;
  flex-shrink: 0;
}
.fi-resource-material-packages .fi-package-material-item__title-ar {
  font-size: 0.875rem;
  color: #374151;
}
.fi-resource-material-packages .fi-package-material-item__badge {
  display: inline-flex;
  padding: 0.125rem 0.625rem;
  border-radius: 9999px;
  font-size: 0.75rem;
  font-weight: 500;
}
.fi-resource-material-packages .fi-package-material-item__badge.fi-figma-status-active {
  background: #111827;
  color: #fff;
}
.fi-resource-material-packages .fi-package-image-upload .fi-fo-file-upload {
  border: 1px dashed #d1d5db;
  border-radius: 0.75rem;
  background: #fafafa;
  padding: 1.25rem;
  min-height: 6rem;
}
.dark .fi-resource-material-packages .fi-package-view-header__name,
.dark .fi-resource-material-packages .fi-package-view-header__value,
.dark .fi-resource-material-packages .fi-package-view-section__heading,
.dark .fi-resource-material-packages .fi-package-material-item__title {
  color: #f1f5f9;
}
.dark .fi-resource-material-packages .fi-package-view-header__name-ar,
.dark .fi-resource-material-packages .fi-package-view-section__text,
.dark .fi-resource-material-packages .fi-package-material-item__title-ar {
  color: #cbd5e1;
}
.dark .fi-resource-material-packages .fi-package-view-header__label,
.dark .fi-resource-material-packages .fi-package-view-section__label,
.dark .fi-resource-material-packages .fi-package-material-item__meta {
  color: #94a3b8;
}
.dark .fi-resource-material-packages .fi-package-view-header__grid,
.dark .fi-resource-material-packages .fi-package-view-section,
.dark .fi-resource-material-packages .fi-package-material-item {
  border-color: #1e293b;
}
.dark .fi-resource-material-packages .fi-package-material-item__photo {
  background: #1e293b;
}

/* ── Coupons (Figma) ── */
.fi-resource-coupons .fi-sc-form > .fi-sc-section {
  max-width: none;
}
.fi-resource-coupons .fi-coupon-form-layout {
  width: 100%;
  gap: 1.5rem !important;
}
.fi-resource-coupons .fi-coupon-form-layout > .fi-grid-col {
  min-width: 0;
}
.fi-resource-coupons .fi-coupon-main-column,
.fi-resource-coupons .fi-coupon-sidebar {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}
@media (min-width: 1280px) {
  .fi-resource-coupons .fi-coupon-sidebar {
    position: sticky;
    top: 1.5rem;
    align-self: start;
  }
}
.fi-resource-coupons .fi-coupon-form-layout .fi-figma-form-card {
  width: 100%;
  background: #fff;
  border: 1px solid #e5e7eb;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}
.fi-resource-coupons .fi-coupon-applicability-hint {
  margin: 0 0 0.25rem;
  font-size: 0.875rem;
  line-height: 1.5;
  color: #6b7280;
}
.fi-resource-coupons .fi-coupon-help-list {
  margin: 0;
  padding-inline-start: 1.25rem;
  font-size: 0.875rem;
  line-height: 1.5;
  color: #6b7280;
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}
.fi-resource-coupons .fi-coupon-code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-weight: 600;
  color: #2563eb;
  letter-spacing: 0.02em;
}
.fi-resource-coupons .fi-coupon-discount {
  font-weight: 600;
  color: #111827;
}
.fi-resource-coupons .fi-coupon-usage {
  font-variant-numeric: tabular-nums;
  color: #374151;
}
.fi-resource-coupons .fi-coupon-cancel-action > button,
.fi-resource-coupons .fi-coupon-cancel-action.fi-ac-btn {
  border-color: #d1d5db !important;
  color: #374151 !important;
  background: #fff !important;
}
.fi-resource-coupons .fi-coupon-cancel-action > button:hover,
.fi-resource-coupons .fi-coupon-cancel-action.fi-ac-btn:hover {
  background: #f9fafb !important;
}
.fi-resource-coupons .fi-coupon-view-edit-action > button,
.fi-resource-coupons .fi-coupon-view-edit-action.fi-ac-btn {
  border-color: #d1d5db !important;
  color: #374151 !important;
}
.dark .fi-resource-coupons .fi-coupon-form-layout .fi-figma-form-card {
  background: #0f172a;
  border-color: #1e293b;
}
.dark .fi-resource-coupons .fi-coupon-applicability-hint,
.dark .fi-resource-coupons .fi-coupon-help-list {
  color: #94a3b8;
}
.dark .fi-resource-coupons .fi-coupon-code {
  color: #60a5fa;
}
.dark .fi-resource-coupons .fi-coupon-discount {
  color: #f1f5f9;
}
.dark .fi-resource-coupons .fi-coupon-usage {
  color: #cbd5e1;
}
.dark .fi-resource-coupons .fi-figma-status-expired .fi-badge {
  background-color: rgba(127, 29, 29, 0.35) !important;
  color: #fca5a5 !important;
}
.dark .fi-resource-coupons .fi-coupon-cancel-action > button,
.dark .fi-resource-coupons .fi-coupon-cancel-action.fi-ac-btn {
  background: #0f172a !important;
  border-color: #334155 !important;
  color: #e2e8f0 !important;
}

/* ── Banners / Splash Screens (Figma) ── */
.fi-resource-banners .fi-sc-form > .fi-sc-section {
  max-width: none;
}
.fi-resource-banners .fi-banner-form-layout,
.fi-resource-banners .fi-banner-view-layout {
  width: 100%;
  gap: 1.5rem !important;
}
.fi-resource-banners .fi-banner-main-column,
.fi-resource-banners .fi-banner-sidebar {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}
@media (min-width: 1280px) {
  .fi-resource-banners .fi-banner-sidebar,
  .fi-resource-banners .fi-banner-preview-card {
    position: sticky;
    top: 1.5rem;
    align-self: start;
  }
}
.fi-resource-banners .fi-banner-form-layout .fi-figma-form-card,
.fi-resource-banners .fi-banner-view-layout .fi-figma-form-card {
  width: 100%;
  background: #fff;
  border: 1px solid #e5e7eb;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}
.fi-resource-banners .fi-banner-html-hint,
.fi-resource-banners .fi-banner-help-list {
  margin: 0;
  font-size: 0.875rem;
  line-height: 1.5;
  color: #6b7280;
}
.fi-resource-banners .fi-banner-help-list {
  padding-inline-start: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}
.fi-resource-banners .fi-banner-cancel-action > button,
.fi-resource-banners .fi-banner-cancel-action.fi-ac-btn {
  border-color: #d1d5db !important;
  color: #374151 !important;
  background: #fff !important;
}
.fi-resource-banners .fi-banner-cancel-action > button:hover,
.fi-resource-banners .fi-banner-cancel-action.fi-ac-btn:hover {
  background: #f9fafb !important;
}
.fi-resource-banners .fi-banner-view-edit-action > button,
.fi-resource-banners .fi-banner-view-edit-action.fi-ac-btn {
  border-color: #d1d5db !important;
  color: #374151 !important;
}
.dark .fi-resource-banners .fi-banner-form-layout .fi-figma-form-card,
.dark .fi-resource-banners .fi-banner-view-layout .fi-figma-form-card {
  background: #0f172a;
  border-color: #1e293b;
}
.dark .fi-resource-banners .fi-banner-html-hint,
.dark .fi-resource-banners .fi-banner-help-list {
  color: #94a3b8;
}
.dark .fi-resource-banners .fi-banner-cancel-action > button,
.dark .fi-resource-banners .fi-banner-cancel-action.fi-ac-btn {
  background: #0f172a !important;
  border-color: #334155 !important;
  color: #e2e8f0 !important;
}
.fi-resource-banners .fi-banner-rich-editor .fi-fo-rich-editor {
  min-height: 16rem;
}
.fi-resource-installment-plans .fi-sc-form {
  width: 100%;
  max-width: none;
}
.fi-resource-installment-plans .fi-sc-form > .fi-sc-section {
  max-width: none;
}
.fi-resource-installment-plans .fi-installment-form-layout {
  width: 100%;
  gap: 1.5rem !important;
}
.fi-resource-installment-plans .fi-installment-form-layout > .fi-grid-col {
  min-width: 0;
}
.fi-resource-installment-plans .fi-installment-main-column,
.fi-resource-installment-plans .fi-installment-sidebar {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  width: 100%;
  min-width: 0;
}
@media (min-width: 1280px) {
  .fi-resource-installment-plans .fi-installment-sidebar {
    position: sticky;
    top: 1.5rem;
    align-self: start;
  }
}
.fi-resource-installment-plans .fi-installment-form-layout .fi-figma-form-card {
  width: 100%;
  background: #fff;
  border: 1px solid #e5e7eb;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}
.fi-resource-installment-plans .fi-installment-help-list {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}
.fi-resource-installment-plans .fi-installment-payment-structure {
  background: #eff6ff !important;
  border-color: #bfdbfe !important;
}
.fi-resource-installment-plans .fi-installment-structure-hint,
.fi-resource-installment-plans .fi-installment-due-dates-hint {
  margin: 0 0 0.25rem;
  font-size: 0.875rem;
  line-height: 1.5;
  color: #4b5563;
}
.fi-resource-installment-plans .fi-installment-help-list {
  margin: 0;
  padding-inline-start: 1.25rem;
  font-size: 0.875rem;
  line-height: 1.6;
  color: #4b5563;
}
.fi-resource-installment-plans .fi-installment-first {
  font-weight: 600;
  color: #111827;
}
.fi-resource-installment-plans .fi-installment-first__icon {
  color: #2563eb;
  font-weight: 700;
}
.fi-resource-installment-plans .fi-installment-fee-free {
  font-weight: 600;
  color: #16a34a;
}
.fi-resource-installment-plans .fi-installment-fee-percent {
  font-weight: 600;
  color: #ea580c;
}
.fi-resource-installment-plans .fi-installment-validity {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  font-size: 0.875rem;
}
.fi-resource-installment-plans .fi-installment-validity__end {
  color: #6b7280;
}
.fi-resource-installment-plans .fi-installment-cancel-action > button,
.fi-resource-installment-plans .fi-installment-cancel-action.fi-ac-btn {
  border-color: #d1d5db !important;
  color: #374151 !important;
  background: #fff !important;
}
.fi-resource-installment-plans .fi-installment-view-edit-action > button,
.fi-resource-installment-plans .fi-installment-view-edit-action.fi-ac-btn {
  border-color: #d1d5db !important;
  color: #374151 !important;
}
.dark .fi-resource-installment-plans .fi-installment-payment-structure {
  background: rgba(30, 58, 138, 0.25) !important;
  border-color: #1e3a8a !important;
}
.dark .fi-resource-installment-plans .fi-installment-structure-hint,
.dark .fi-resource-installment-plans .fi-installment-due-dates-hint,
.dark .fi-resource-installment-plans .fi-installment-help-list {
  color: #94a3b8;
}
.dark .fi-resource-installment-plans .fi-installment-first {
  color: #f1f5f9;
}
.dark .fi-resource-installment-plans .fi-installment-cancel-action > button,
.dark .fi-resource-installment-plans .fi-installment-cancel-action.fi-ac-btn {
  background: #0f172a !important;
  border-color: #334155 !important;
  color: #e2e8f0 !important;
}
.dark .fi-resource-installment-plans .fi-figma-status-expired .fi-badge {
  background-color: rgba(127, 29, 29, 0.35) !important;
  color: #fca5a5 !important;
}
.fi-resource-installment-plans .fi-installment-view-layout {
  width: 100%;
  gap: 1.5rem !important;
}
.fi-resource-installment-plans .fi-installment-view-layout > .fi-grid-col {
  min-width: 0;
}
@media (min-width: 1280px) {
  .fi-resource-installment-plans .fi-installment-preview-card {
    position: sticky;
    top: 1.5rem;
    align-self: start;
  }
}
.fi-resource-installment-plans .fi-installment-view-layout .fi-figma-form-card,
.fi-resource-installment-plans .fi-installment-preview-card.fi-figma-form-card {
  width: 100%;
  background: #fff;
  border: 1px solid #e5e7eb;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}
.fi-resource-installment-plans .fi-installment-preview-card .fi-sc-section-content {
  padding: 0 !important;
}
.fi-resource-installment-plans .fi-installment-preview {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 1.25rem;
}
.fi-resource-installment-plans .fi-installment-preview__title {
  font-size: 0.875rem;
  font-weight: 600;
  color: #111827;
}
.fi-resource-installment-plans .fi-installment-preview__subtitle {
  font-size: 0.75rem;
  color: #6b7280;
}
.fi-resource-installment-plans .fi-installment-preview__stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 0.75rem;
}
.fi-resource-installment-plans .fi-installment-preview__stat {
  border: 1px solid #e5e7eb;
  border-radius: 0.5rem;
  padding: 0.75rem;
  background: #fff;
}
.fi-resource-installment-plans .fi-installment-preview__stat--highlight {
  border-color: #bfdbfe;
  background: #eff6ff;
}
.fi-resource-installment-plans .fi-installment-preview__stat-label {
  font-size: 0.75rem;
  color: #6b7280;
}
.fi-resource-installment-plans .fi-installment-preview__stat-value {
  font-size: 1rem;
  font-weight: 600;
  color: #111827;
}
.fi-resource-installment-plans .fi-installment-preview__stat-value--fee-free {
  color: #16a34a;
}
.fi-resource-installment-plans .fi-installment-preview__stat-value--fee-percent {
  color: #ea580c;
}
.fi-resource-installment-plans .fi-installment-preview__stat-value--total {
  color: #2563eb;
}
.fi-resource-installment-plans .fi-installment-preview__stat--highlight .fi-installment-preview__stat-label {
  color: #2563eb;
}
.fi-resource-installment-plans .fi-installment-preview__schedule {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.fi-resource-installment-plans .fi-installment-preview__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.625rem 0.75rem;
  border-radius: 0.5rem;
  border: 1px solid #e2e8f0;
  background: #f8fafc;
}
.fi-resource-installment-plans .fi-installment-preview__row--first {
  border-color: #bbf7d0;
  background: #ecfdf5;
}
.fi-resource-installment-plans .fi-installment-preview__row--empty {
  border-style: dashed;
  background: #f9fafb;
}
.fi-resource-installment-plans .fi-installment-preview__row-label {
  font-size: 0.875rem;
  color: #374151;
}
.fi-resource-installment-plans .fi-installment-preview__row--first .fi-installment-preview__row-label {
  font-weight: 500;
  color: #065f46;
}
.fi-resource-installment-plans .fi-installment-preview__row-amount {
  font-size: 0.875rem;
  font-weight: 600;
  color: #111827;
  font-variant-numeric: tabular-nums;
}
.dark .fi-resource-installment-plans .fi-installment-view-layout .fi-figma-form-card,
.dark .fi-resource-installment-plans .fi-installment-preview-card.fi-figma-form-card,
.dark .fi-resource-installment-plans .fi-installment-form-layout .fi-figma-form-card {
  background: #0f172a;
  border-color: #1e293b;
}
.dark .fi-resource-installment-plans .fi-installment-preview__title,
.dark .fi-resource-installment-plans .fi-installment-preview__stat-value,
.dark .fi-resource-installment-plans .fi-installment-preview__row-amount {
  color: #f1f5f9;
}
.dark .fi-resource-installment-plans .fi-installment-preview__subtitle,
.dark .fi-resource-installment-plans .fi-installment-preview__stat-label,
.dark .fi-resource-installment-plans .fi-installment-preview__row-label {
  color: #94a3b8;
}
.dark .fi-resource-installment-plans .fi-installment-preview__stat {
  background: #0f172a;
  border-color: #334155;
}
.dark .fi-resource-installment-plans .fi-installment-preview__stat--highlight {
  background: rgba(30, 58, 138, 0.25);
  border-color: #1e3a8a;
}
.dark .fi-resource-installment-plans .fi-installment-preview__stat--highlight .fi-installment-preview__stat-label {
  color: #93c5fd;
}
.dark .fi-resource-installment-plans .fi-installment-preview__stat-value--total {
  color: #60a5fa;
}
.dark .fi-resource-installment-plans .fi-installment-preview__stat-value--fee-free {
  color: #4ade80;
}
.dark .fi-resource-installment-plans .fi-installment-preview__stat-value--fee-percent {
  color: #fb923c;
}
.dark .fi-resource-installment-plans .fi-installment-preview__row {
  background: #111827;
  border-color: #334155;
}
.dark .fi-resource-installment-plans .fi-installment-preview__row--first {
  background: rgba(6, 78, 59, 0.25);
  border-color: #065f46;
}
.dark .fi-resource-installment-plans .fi-installment-preview__row--first .fi-installment-preview__row-label {
  color: #6ee7b7;
}
.dark .fi-resource-installment-plans .fi-installment-preview__row--empty {
  background: #0f172a;
  border-color: #475569;
}
.dark .fi-resource-installment-plans .fi-installment-view-edit-action > button,
.dark .fi-resource-installment-plans .fi-installment-view-edit-action.fi-ac-btn {
  background: #0f172a !important;
  border-color: #334155 !important;
  color: #e2e8f0 !important;
}
.dark .fi-resource-installment-plans .fi-figma-status-inactive .fi-badge {
  background-color: #1e293b !important;
  color: #94a3b8 !important;
}

/* ── Learner profile photos (view + edit) ── */
.fi-learner-profile-images__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(10rem, 12rem));
  gap: 1.5rem 2rem;
  max-width: 28rem;
}
.fi-learner-profile-images__item {
  margin: 0;
  min-width: 0;
}
.fi-learner-profile-images__label {
  margin: 0 0 0.375rem;
  font-size: 0.8125rem;
  font-weight: 500;
  color: #6b7280;
}
.dark .fi-learner-profile-images__label {
  color: #94a3b8;
}
.fi-learner-profile-images__frame {
  overflow: hidden;
  border-radius: 0.5rem;
  border: 1px solid #e5e7eb;
  background: #f9fafb;
  display: flex;
  align-items: center;
  justify-content: center;
}
.dark .fi-learner-profile-images__frame {
  border-color: #334155;
  background: #0f172a;
}
.fi-learner-profile-images__frame--square {
  aspect-ratio: 1;
  width: 100%;
  max-width: 10rem;
}
.fi-learner-profile-images__frame--id {
  aspect-ratio: 4 / 3;
  width: 100%;
  max-width: 12rem;
}
.fi-learner-profile-images__frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.fi-learner-profile-images__placeholder {
  padding: 0.75rem;
  text-align: center;
  font-size: 0.75rem;
  line-height: 1.35;
  color: #9ca3af;
}
.dark .fi-learner-profile-images__placeholder {
  color: #64748b;
}
.fi-learner-profile-form .fi-fo-file-upload-avatar {
  margin-inline: auto;
}
.fi-resource-learners .fi-figma-form-card {
  border-radius: 0.75rem;
}

/* ── Orders & Transactions (Figma) ── */
.fi-resource-orders .fi-order-details,
.fi-resource-transactions .fi-order-details {
  width: 100%;
}
.fi-resource-orders .fi-order-details__layout,
.fi-resource-transactions .fi-order-details__layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1.5rem;
}
@media (min-width: 1280px) {
  .fi-resource-orders .fi-order-details__layout,
  .fi-resource-transactions .fi-order-details__layout {
    grid-template-columns: minmax(0, 2fr) minmax(18rem, 1fr);
    align-items: start;
  }
  .fi-resource-orders .fi-order-details__sidebar,
  .fi-resource-transactions .fi-order-details__sidebar {
    position: sticky;
    top: 1.5rem;
  }
}
.fi-resource-orders .fi-order-details__main,
.fi-resource-transactions .fi-order-details__main,
.fi-resource-orders .fi-order-details__sidebar,
.fi-resource-transactions .fi-order-details__sidebar {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  min-width: 0;
}
.fi-resource-orders .fi-order-details__card,
.fi-resource-transactions .fi-order-details__card {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 0.75rem;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
  padding: 1.25rem;
}
.fi-resource-orders .fi-order-details__card-header,
.fi-resource-transactions .fi-order-details__card-header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1.25rem;
}
.fi-resource-orders .fi-order-details__card-header--actions,
.fi-resource-transactions .fi-order-details__card-header--actions {
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 1rem;
}
.fi-resource-orders .fi-order-details__card-header-main,
.fi-resource-transactions .fi-order-details__card-header-main {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.fi-resource-orders .fi-order-details__card-title,
.fi-resource-transactions .fi-order-details__card-title {
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
  color: #111827;
}
.fi-resource-orders .fi-order-details__icon,
.fi-resource-transactions .fi-order-details__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 0.625rem;
  flex-shrink: 0;
}
.fi-resource-orders .fi-order-details__icon svg,
.fi-resource-transactions .fi-order-details__icon svg {
  width: 1.125rem;
  height: 1.125rem;
}
.fi-resource-orders .fi-order-details__icon--blue,
.fi-resource-transactions .fi-order-details__icon--blue {
  background: #dbeafe;
  color: #2563eb;
}
.fi-resource-orders .fi-order-details__icon--purple,
.fi-resource-transactions .fi-order-details__icon--purple {
  background: #ede9fe;
  color: #7c3aed;
}
.fi-resource-orders .fi-order-details__icon--orange,
.fi-resource-transactions .fi-order-details__icon--orange {
  background: #ffedd5;
  color: #ea580c;
}
.fi-resource-orders .fi-order-details__icon--teal,
.fi-resource-transactions .fi-order-details__icon--teal {
  background: #ccfbf1;
  color: #0d9488;
}
.fi-resource-orders .fi-order-details__icon--green,
.fi-resource-transactions .fi-order-details__icon--green {
  background: #dcfce7;
  color: #16a34a;
}
.fi-resource-orders .fi-order-details__icon--red,
.fi-resource-transactions .fi-order-details__icon--red {
  background: #fee2e2;
  color: #dc2626;
}
.fi-resource-orders .fi-order-details__fields--grid,
.fi-resource-transactions .fi-order-details__fields--grid {
  display: grid;
  grid-template-columns: repeat(1, minmax(0, 1fr));
  gap: 1rem 1.5rem;
}
@media (min-width: 768px) {
  .fi-resource-orders .fi-order-details__fields--grid,
  .fi-resource-transactions .fi-order-details__fields--grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
.fi-resource-orders .fi-order-details__field,
.fi-resource-transactions .fi-order-details__field {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
.fi-resource-orders .fi-order-details__field--full,
.fi-resource-transactions .fi-order-details__field--full {
  grid-column: 1 / -1;
}
.fi-resource-orders .fi-order-details__field-label,
.fi-resource-transactions .fi-order-details__field-label {
  font-size: 0.8125rem;
  color: #6b7280;
}
.fi-resource-orders .fi-order-details__field-value,
.fi-resource-transactions .fi-order-details__field-value {
  font-size: 0.9375rem;
  font-weight: 600;
  color: #111827;
}
.fi-resource-orders .fi-order-details__status,
.fi-resource-transactions .fi-order-details__status {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  width: fit-content;
  padding: 0.25rem 0.75rem;
  border-radius: 9999px;
  font-size: 0.8125rem;
  font-weight: 600;
}
.fi-resource-orders .fi-order-details__status svg,
.fi-resource-transactions .fi-order-details__status svg {
  width: 1rem;
  height: 1rem;
}
.fi-resource-orders .fi-order-details__status--successful,
.fi-resource-transactions .fi-order-details__status--successful {
  background: #111827;
  color: #4ade80;
}
.fi-resource-orders .fi-order-details__status--unsuccessful,
.fi-resource-transactions .fi-order-details__status--unsuccessful {
  background: #fef2f2;
  color: #dc2626;
}
.fi-resource-orders .fi-order-details__status--pending,
.fi-resource-transactions .fi-order-details__status--pending {
  background: #fffbeb;
  color: #d97706;
}
.fi-resource-orders .fi-order-details__status--cancelled,
.fi-resource-transactions .fi-order-details__status--cancelled {
  background: #f3f4f6;
  color: #6b7280;
}
.fi-resource-orders .fi-order-details__items,
.fi-resource-transactions .fi-order-details__items {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.fi-resource-orders .fi-order-details__item,
.fi-resource-transactions .fi-order-details__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.875rem 1rem;
  border: 1px solid #e5e7eb;
  border-radius: 0.625rem;
  background: #fafafa;
}
.fi-resource-orders .fi-order-details__item-main,
.fi-resource-transactions .fi-order-details__item-main {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-width: 0;
}
.fi-resource-orders .fi-order-details__item-icon,
.fi-resource-transactions .fi-order-details__item-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: 0.5rem;
  background: #ede9fe;
  color: #7c3aed;
  flex-shrink: 0;
}
.fi-resource-orders .fi-order-details__item-icon svg,
.fi-resource-transactions .fi-order-details__item-icon svg {
  width: 1rem;
  height: 1rem;
}
.fi-resource-orders .fi-order-details__item-title,
.fi-resource-transactions .fi-order-details__item-title {
  font-size: 0.9375rem;
  font-weight: 600;
  color: #111827;
}
.fi-resource-orders .fi-order-details__item-type,
.fi-resource-transactions .fi-order-details__item-type {
  font-size: 0.8125rem;
  color: #6b7280;
}
.fi-resource-orders .fi-order-details__item-price,
.fi-resource-transactions .fi-order-details__item-price {
  font-size: 0.9375rem;
  font-weight: 600;
  color: #111827;
  white-space: nowrap;
}
.fi-resource-orders .fi-order-details__actions,
.fi-resource-transactions .fi-order-details__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.fi-resource-orders .fi-order-details__btn,
.fi-resource-transactions .fi-order-details__btn {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.5rem 0.875rem;
  border-radius: 0.5rem;
  font-size: 0.8125rem;
  font-weight: 500;
  line-height: 1;
  cursor: not-allowed;
  opacity: 0.65;
}
.fi-resource-orders .fi-order-details__btn svg,
.fi-resource-transactions .fi-order-details__btn svg {
  width: 1rem;
  height: 1rem;
}
.fi-resource-orders .fi-order-details__btn--primary,
.fi-resource-transactions .fi-order-details__btn--primary {
  border: none;
  background: #111827;
  color: #fff;
}
.fi-resource-orders .fi-order-details__btn--outline,
.fi-resource-transactions .fi-order-details__btn--outline {
  border: 1px solid #d1d5db;
  background: #fff;
  color: #374151;
}
.fi-resource-orders .fi-order-details__ledger-wrap,
.fi-resource-transactions .fi-order-details__ledger-wrap {
  overflow-x: auto;
}
.fi-resource-orders .fi-order-details__ledger,
.fi-resource-transactions .fi-order-details__ledger {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.8125rem;
}
.fi-resource-orders .fi-order-details__ledger th,
.fi-resource-transactions .fi-order-details__ledger th {
  padding: 0.625rem 0.75rem;
  text-align: start;
  font-weight: 500;
  color: #6b7280;
  border-bottom: 1px solid #e5e7eb;
  white-space: nowrap;
}
.fi-resource-orders .fi-order-details__ledger td,
.fi-resource-transactions .fi-order-details__ledger td {
  padding: 0.75rem;
  color: #111827;
  border-bottom: 1px solid #f3f4f6;
  vertical-align: top;
}
.fi-resource-orders .fi-order-details__debit,
.fi-resource-transactions .fi-order-details__debit {
  color: #dc2626 !important;
  font-weight: 500;
}
.fi-resource-orders .fi-order-details__credit,
.fi-resource-transactions .fi-order-details__credit {
  color: #16a34a !important;
  font-weight: 500;
}
.fi-resource-orders .fi-order-details__due-edit,
.fi-resource-transactions .fi-order-details__due-edit {
  display: block;
  margin-top: 0.375rem;
  padding: 0;
  border: 0;
  background: transparent;
  font-size: 0.75rem;
  font-weight: 500;
  color: #0d9488;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.fi-resource-orders .fi-order-details__due-edit:hover,
.fi-resource-transactions .fi-order-details__due-edit:hover {
  color: #0f766e;
}
.fi-resource-orders .fi-order-details__schedule-log,
.fi-resource-transactions .fi-order-details__schedule-log {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid #e5e7eb;
}
.fi-resource-orders .fi-order-details__schedule-log-title,
.fi-resource-transactions .fi-order-details__schedule-log-title {
  margin: 0 0 0.5rem;
  font-size: 0.875rem;
  font-weight: 600;
  color: #374151;
}
.fi-resource-orders .fi-order-details__schedule-log-list,
.fi-resource-transactions .fi-order-details__schedule-log-list {
  margin: 0;
  padding-left: 1.25rem;
  font-size: 0.8125rem;
  color: #4b5563;
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}
.fi-resource-orders .fi-order-details__summary,
.fi-resource-transactions .fi-order-details__summary {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.fi-resource-orders .fi-order-details__summary-row,
.fi-resource-transactions .fi-order-details__summary-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  font-size: 0.875rem;
  color: #374151;
}
.fi-resource-orders .fi-order-details__summary-row--total,
.fi-resource-transactions .fi-order-details__summary-row--total {
  padding-top: 0.75rem;
  border-top: 1px solid #e5e7eb;
  font-size: 1rem;
  font-weight: 700;
  color: #16a34a;
}
.fi-resource-orders .fi-order-details__payment-confirmed,
.fi-resource-transactions .fi-order-details__payment-confirmed {
  display: flex;
  align-items: flex-start;
  gap: 0.625rem;
  margin-top: 0.25rem;
  padding-top: 0.75rem;
  border-top: 1px solid #e5e7eb;
}
.fi-resource-orders .fi-order-details__payment-confirmed svg,
.fi-resource-transactions .fi-order-details__payment-confirmed svg {
  width: 1.25rem;
  height: 1.25rem;
  color: #16a34a;
  flex-shrink: 0;
}
.fi-resource-orders .fi-order-details__payment-confirmed-label,
.fi-resource-transactions .fi-order-details__payment-confirmed-label {
  font-size: 0.875rem;
  font-weight: 600;
  color: #111827;
}
.fi-resource-orders .fi-order-details__payment-confirmed-ref,
.fi-resource-transactions .fi-order-details__payment-confirmed-ref {
  margin-top: 0.125rem;
  font-size: 0.75rem;
  color: #6b7280;
}
.fi-resource-orders .fi-order-details__access,
.fi-resource-transactions .fi-order-details__access {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}
.fi-resource-orders .fi-order-details__access-date,
.fi-resource-transactions .fi-order-details__access-date {
  font-size: 1.125rem;
  font-weight: 700;
  color: #111827;
}
.fi-resource-orders .fi-order-details__access-note,
.fi-resource-transactions .fi-order-details__access-note {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  margin-top: 0.75rem;
  padding: 0.875rem 1rem;
  border-radius: 0.625rem;
  background: #eff6ff;
  border: 1px solid #bfdbfe;
}
.fi-resource-orders .fi-order-details__access-note svg,
.fi-resource-transactions .fi-order-details__access-note svg {
  width: 1rem;
  height: 1rem;
  color: #2563eb;
  flex-shrink: 0;
  margin-top: 0.125rem;
}
.fi-resource-orders .fi-order-details__access-note p,
.fi-resource-transactions .fi-order-details__access-note p {
  margin: 0;
  font-size: 0.8125rem;
  line-height: 1.5;
  color: #1e40af;
}
.fi-resource-orders .fi-order-details__payload,
.fi-resource-transactions .fi-order-details__payload {
  margin: 0;
  padding: 1rem;
  border-radius: 0.625rem;
  background: #f9fafb;
  border: 1px solid #e5e7eb;
  font-size: 0.75rem;
  line-height: 1.6;
  color: #374151;
  overflow-x: auto;
  white-space: pre-wrap;
  word-break: break-word;
}
.fi-resource-orders .fi-order-details__link,
.fi-resource-transactions .fi-order-details__link {
  color: #2563eb;
  font-weight: 600;
  text-decoration: none;
}
.fi-resource-orders .fi-order-details__link:hover,
.fi-resource-transactions .fi-order-details__link:hover {
  text-decoration: underline;
}
.fi-resource-orders .fi-order-details__empty,
.fi-resource-transactions .fi-order-details__empty {
  margin: 0;
  padding: 1rem 0;
  text-align: center;
  color: #6b7280;
  font-size: 0.875rem;
}
.dark .fi-resource-orders .fi-order-details__card,
.dark .fi-resource-transactions .fi-order-details__card {
  background: #0f172a;
  border-color: #1e293b;
}
.dark .fi-resource-orders .fi-order-details__card-title,
.dark .fi-resource-transactions .fi-order-details__card-title,
.dark .fi-resource-orders .fi-order-details__field-value,
.dark .fi-resource-transactions .fi-order-details__field-value,
.dark .fi-resource-orders .fi-order-details__item-title,
.dark .fi-resource-transactions .fi-order-details__item-title,
.dark .fi-resource-orders .fi-order-details__item-price,
.dark .fi-resource-transactions .fi-order-details__item-price,
.dark .fi-resource-orders .fi-order-details__ledger td,
.dark .fi-resource-transactions .fi-order-details__ledger td,
.dark .fi-resource-orders .fi-order-details__access-date,
.dark .fi-resource-transactions .fi-order-details__access-date,
.dark .fi-resource-orders .fi-order-details__payment-confirmed-label,
.dark .fi-resource-transactions .fi-order-details__payment-confirmed-label {
  color: #f1f5f9;
}
.dark .fi-resource-orders .fi-order-details__field-label,
.dark .fi-resource-transactions .fi-order-details__field-label,
.dark .fi-resource-orders .fi-order-details__item-type,
.dark .fi-resource-transactions .fi-order-details__item-type,
.dark .fi-resource-orders .fi-order-details__ledger th,
.dark .fi-resource-transactions .fi-order-details__ledger th,
.dark .fi-resource-orders .fi-order-details__payment-confirmed-ref,
.dark .fi-resource-transactions .fi-order-details__payment-confirmed-ref,
.dark .fi-resource-orders .fi-order-details__empty,
.dark .fi-resource-transactions .fi-order-details__empty {
  color: #94a3b8;
}
.dark .fi-resource-orders .fi-order-details__item,
.dark .fi-resource-transactions .fi-order-details__item {
  background: #1e293b;
  border-color: #334155;
}
.dark .fi-resource-orders .fi-order-details__btn--outline,
.dark .fi-resource-transactions .fi-order-details__btn--outline {
  background: #0f172a;
  border-color: #334155;
  color: #e2e8f0;
}
.dark .fi-resource-orders .fi-order-details__summary-row,
.dark .fi-resource-transactions .fi-order-details__summary-row {
  color: #cbd5e1;
}
.dark .fi-resource-orders .fi-order-details__access-note,
.dark .fi-resource-transactions .fi-order-details__access-note {
  background: rgba(30, 58, 138, 0.25);
  border-color: #1e3a8a;
}
.dark .fi-resource-orders .fi-order-details__access-note p,
.dark .fi-resource-transactions .fi-order-details__access-note p {
  color: #93c5fd;
}
.dark .fi-resource-orders .fi-order-details__payload,
.dark .fi-resource-transactions .fi-order-details__payload {
  background: #1e293b;
  border-color: #334155;
  color: #e2e8f0;
}
.dark .fi-resource-orders .fi-order-details__link,
.dark .fi-resource-transactions .fi-order-details__link {
  color: #60a5fa;
}

/* ── Push Notifications (Figma) ── */
.fi-page-send-push-notification .fi-push-notification-form,
.fi-page-send-push-notification .fi-push-notification-wizard {
  width: 100%;
  max-width: none;
}
.fi-page-send-push-notification .fi-push-notification-wizard .fi-figma-form-card {
  width: 100%;
  background: #fff;
  border: 1px solid #e5e7eb;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}
.fi-push-estimated-recipients {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 0.5rem;
  padding: 1rem 1.25rem;
  border-radius: 0.75rem;
  background: #eff6ff;
  border: 1px solid #bfdbfe;
}
.fi-push-estimated-recipients__label {
  font-size: 0.875rem;
  font-weight: 500;
  color: #1d4ed8;
}
.fi-push-estimated-recipients__count {
  font-size: 1.5rem;
  font-weight: 700;
  color: #2563eb;
  font-variant-numeric: tabular-nums;
}
.fi-push-review {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  padding: 1.25rem;
}
.fi-push-review__section-title {
  font-size: 0.875rem;
  font-weight: 600;
  color: #111827;
  margin-bottom: 0.75rem;
}
.fi-push-review__label {
  font-size: 0.75rem;
  color: #6b7280;
  margin-bottom: 0.375rem;
}
.fi-push-review__audience {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem;
  border-radius: 0.75rem;
  border: 1px solid #e5e7eb;
  background: #f9fafb;
}
.fi-push-review__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.fi-push-review__chip {
  display: inline-flex;
  align-items: center;
  padding: 0.25rem 0.625rem;
  border-radius: 9999px;
  background: #dbeafe;
  color: #1d4ed8;
  font-size: 0.75rem;
  font-weight: 500;
}
.fi-push-review__total-count {
  font-size: 1.75rem;
  font-weight: 700;
  color: #2563eb;
  line-height: 1;
}
.fi-push-review__messages {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1rem;
}
.fi-push-review__message-card {
  padding: 1rem;
  border-radius: 0.75rem;
  border: 1px solid #e5e7eb;
  background: #fff;
  font-size: 0.875rem;
  line-height: 1.6;
  color: #374151;
}
.fi-push-review__message-title {
  font-weight: 600;
  color: #111827;
  margin-bottom: 0.5rem;
}
.fi-push-review__schedule {
  padding: 0.875rem 1rem;
  border-radius: 0.5rem;
  background: #fef9c3;
  border: 1px solid #fde047;
  color: #854d0e;
  font-size: 0.875rem;
}
.dark .fi-page-send-push-notification .fi-push-notification-wizard .fi-figma-form-card,
.dark .fi-page-send-push-notification .fi-push-review__message-card {
  background: #0f172a;
  border-color: #1e293b;
}
.dark .fi-push-estimated-recipients {
  background: rgba(30, 58, 138, 0.25);
  border-color: #1e3a8a;
}
.dark .fi-push-estimated-recipients__label {
  color: #93c5fd;
}
.dark .fi-push-estimated-recipients__count {
  color: #60a5fa;
}
.dark .fi-push-review__section-title,
.dark .fi-push-review__message-title {
  color: #f1f5f9;
}
.dark .fi-push-review__label,
.dark .fi-push-review__message-card {
  color: #cbd5e1;
}
.dark .fi-push-review__audience {
  background: #111827;
  border-color: #334155;
}
.dark .fi-push-review__chip {
  background: rgba(30, 58, 138, 0.35);
  color: #93c5fd;
}
.dark .fi-push-review__total-count {
  color: #60a5fa;
}
.dark .fi-push-review__schedule {
  background: rgba(113, 63, 18, 0.25);
  border-color: #854d0e;
  color: #fde68a;
}

/* Category parent tree select (hierarchy tab) */
.fi-category-parent-tree {
  position: relative;
  width: 100%;
}

.fi-category-parent-tree__trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  min-height: 2.25rem;
  padding: 0.5rem 0.75rem;
  border: 1px solid rgb(229 231 235);
  border-radius: 0.5rem;
  background: #fff;
  font-size: 0.875rem;
  color: #111827;
  cursor: pointer;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
}

.fi-category-parent-tree__trigger:hover {
  border-color: rgb(209 213 219);
}

.fi-category-parent-tree__trigger-label {
  color: inherit;
}

.fi-category-parent-tree__trigger-label--placeholder {
  color: #6b7280;
}

.fi-category-parent-tree__chevron {
  width: 1.25rem;
  height: 1.25rem;
  flex-shrink: 0;
  color: #6b7280;
}

.fi-category-parent-tree__panel {
  position: absolute;
  z-index: 40;
  top: calc(100% + 0.375rem);
  inset-inline: 0;
  max-height: 20rem;
  display: flex;
  flex-direction: column;
  border: 1px solid rgb(229 231 235);
  border-radius: 0.5rem;
  background: #fff;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
  overflow: hidden;
}

.fi-category-parent-tree__search-wrap {
  position: relative;
  padding: 0.5rem;
  border-bottom: 1px solid rgb(243 244 246);
}

.fi-category-parent-tree__search-icon {
  position: absolute;
  top: 50%;
  inset-inline-start: 1rem;
  width: 1rem;
  height: 1rem;
  transform: translateY(-50%);
  color: #9ca3af;
  pointer-events: none;
}

.fi-category-parent-tree__search {
  width: 100%;
  padding: 0.5rem 0.75rem 0.5rem 2.25rem;
  border: 1px solid rgb(229 231 235);
  border-radius: 0.375rem;
  font-size: 0.875rem;
  outline: none;
}

.fi-category-parent-tree__search:focus {
  border-color: rgb(59 130 246);
  box-shadow: 0 0 0 1px rgb(59 130 246);
}

.fi-category-parent-tree__list {
  overflow-y: auto;
  padding: 0.25rem 0;
}

.fi-category-parent-tree__row {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  width: 100%;
  padding: 0.25rem 0.5rem;
  font-size: 0.875rem;
  color: #111827;
}

.fi-category-parent-tree__select {
  display: flex;
  flex: 1;
  align-items: center;
  gap: 0.375rem;
  min-width: 0;
  padding: 0.375rem 0.5rem;
  border: none;
  border-radius: 0.375rem;
  background: transparent;
  font: inherit;
  color: inherit;
  text-align: start;
  cursor: pointer;
}

.fi-category-parent-tree__select:hover {
  background: rgb(249 250 251);
}

.fi-category-parent-tree__select--non-selectable {
  cursor: pointer;
}

.fi-category-parent-tree__select--non-selectable:hover {
  background: rgb(243 244 246);
}

.fi-category-parent-tree__select--non-selectable .fi-category-parent-tree__radio {
  opacity: 0.35;
  border-style: dashed;
}

.fi-category-parent-tree__select--non-selectable .fi-category-parent-tree__row-label {
  color: #6b7280;
  font-weight: 500;
}

.fi-category-parent-tree__expand {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  flex-shrink: 0;
  padding: 0;
  border: none;
  color: #6b7280;
  background: transparent;
  border-radius: 0.25rem;
  cursor: pointer;
}

.fi-category-parent-tree__expand:hover {
  background: rgb(243 244 246);
}

.fi-category-parent-tree__expand svg {
  width: 0.875rem;
  height: 0.875rem;
}

.fi-category-parent-tree__row-spacer {
  width: 1.25rem;
  flex-shrink: 0;
}

.fi-category-parent-tree__radio {
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
  border: 2px solid rgb(209 213 219);
  border-radius: 9999px;
  background: #fff;
}

.fi-category-parent-tree__radio--selected {
  border-color: rgb(37 99 235);
  box-shadow: inset 0 0 0 3px #fff, inset 0 0 0 6px rgb(37 99 235);
}

.fi-category-parent-tree__row-label {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fi-category-parent-tree__empty {
  padding: 0.75rem 1rem;
  font-size: 0.875rem;
  color: #6b7280;
  text-align: center;
}

.dark .fi-category-parent-tree__trigger,
.dark .fi-category-parent-tree__panel {
  background: rgb(17 24 39);
  border-color: rgb(55 65 81);
  color: #f3f4f6;
}

.dark .fi-category-parent-tree__trigger-label {
  color: #f3f4f6;
}

.dark .fi-category-parent-tree__trigger-label--placeholder {
  color: #9ca3af;
}

.dark .fi-category-parent-tree__chevron {
  color: #9ca3af;
}

.dark .fi-category-parent-tree__search {
  background: rgb(31 41 55);
  border-color: rgb(55 65 81);
  color: #f3f4f6;
}

.dark .fi-category-parent-tree__search::placeholder {
  color: #9ca3af;
}

.dark .fi-category-parent-tree__row {
  color: #f3f4f6;
}

.dark .fi-category-parent-tree__select:hover {
  background: rgb(31 41 55);
}

.dark .fi-category-parent-tree__select--non-selectable .fi-category-parent-tree__row-label {
  color: #9ca3af;
}

.dark .fi-category-parent-tree__select--non-selectable:hover {
  background: rgb(31 41 55);
}

.dark .fi-category-parent-tree__expand {
  color: #9ca3af;
}

.dark .fi-category-parent-tree__expand:hover {
  background: rgb(31 41 55);
}

.dark .fi-category-parent-tree__empty {
  color: #9ca3af;
}

.dark .fi-category-parent-tree__radio {
  background: rgb(17 24 39);
  border-color: rgb(75 85 99);
}

.dark .fi-category-parent-tree__radio--selected {
  box-shadow: inset 0 0 0 3px rgb(17 24 39), inset 0 0 0 6px rgb(96 165 250);
  border-color: rgb(96 165 250);
}