/* ==========================================================================
   7minti ERP & Operations Platform - Professional Admin Design System
   Color Palette: Pure White (#FFFFFF), Deep Black (#000000 / #111827), Vibrant Orange (#ED5526)
   Philosophy: Ultra-clean, razor-sharp contrast, 100% professional & readable.
   ========================================================================== */

/* --- Core Tokens & Palette Variables --- */
:root {
  --admin-white: #ffffff;
  --admin-black: #000000;
  --admin-ink: #111827;
  --admin-ink-muted: #1f2937;
  --admin-orange: #ed5526;
  --admin-orange-hover: #d44317;
  --admin-orange-light: rgba(237, 85, 38, 0.1);
  --admin-orange-border: rgba(237, 85, 38, 0.35);
  --admin-line: #e5e7eb;
  --admin-line-subtle: #f3f4f6;

  /* Filament Compatibility Variables */
  --fi-page-bg: #ffffff;
  --fi-surface: #ffffff;
  --fi-surface-muted: #ffffff;
  --fi-line: #e5e7eb;
  --fi-ink: #000000;
  --fi-muted: #1f2937;

  /* Operations Cockpit Variables */
  --ops-ink: #000000;
  --ops-muted: #1f2937;
  --ops-line: #e5e7eb;
  --ops-paper: #ffffff;
  --ops-card: #ffffff;
  --ops-copper: #ed5526;
  --ops-copper-soft: rgba(237, 85, 38, 0.08);
}

/* ==========================================================================
   1. GLOBAL CANVAS & FOUNDATION (Pure White Background & Deep Black Text)
   ========================================================================== */
html,
body,
.fi-body,
.fi-main-ctn,
.fi-main,
.fi-page,
body.fi-body.fi-panel-admin {
  background-color: #ffffff !important;
  background-image: none !important;
  color: #111827 !important;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Inter", sans-serif !important;
  -webkit-font-smoothing: antialiased !important;
  text-rendering: optimizeLegibility !important;
}

/* Ensure headings are solid, crisp black */
h1, h2, h3, h4, h5, h6,
.fi-header-heading,
.fi-section-header-heading,
.fi-simple-header-heading,
.ops-card__title,
.reseller-card-title {
  color: #000000 !important;
  font-weight: 800 !important;
  letter-spacing: -0.025em !important;
}

/* Breadcrumbs */
.fi-breadcrumbs,
.fi-breadcrumbs-item-label {
  color: #111827 !important;
  font-weight: 600 !important;
}

/* Custom Scrollbar in Clean Style */
* {
  scrollbar-width: thin !important;
  scrollbar-color: #d1d5db transparent !important;
}
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 9999px;
}
::-webkit-scrollbar-thumb:hover {
  background: #ed5526;
}

/* ==========================================================================
   2. SIDEBAR NAVIGATION (Pure White + Crisp Black Labels + Orange Active)
   ========================================================================== */
.fi-sidebar,
html:not(.dark) .fi-sidebar,
html.dark .fi-sidebar {
  background: #ffffff !important;
  border-right: 1px solid #e5e7eb !important;
  box-shadow: 1px 0 3px rgba(0, 0, 0, 0.02) !important;
}

.fi-sidebar-header,
html:not(.dark) .fi-sidebar-header,
html.dark .fi-sidebar-header {
  background: #ffffff !important;
  border-bottom: 1px solid #e5e7eb !important;
  padding-top: 1rem !important;
  padding-bottom: 1rem !important;
}

.fi-sidebar-header .fi-icon-btn,
.fi-sidebar-header button {
  color: #111827 !important;
}

.fi-sidebar-header .fi-icon-btn:hover,
.fi-sidebar-header button:hover {
  color: #ed5526 !important;
  background: rgba(237, 85, 38, 0.08) !important;
}

/* Sidebar Group Headers */
.fi-sidebar-group-label,
.fi-sidebar-group-btn span,
html:not(.dark) .fi-sidebar-group-label,
html.dark .fi-sidebar-group-label {
  color: #000000 !important;
  font-size: 0.72rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  margin-top: 0.75rem !important;
  margin-bottom: 0.35rem !important;
}

/* Inactive Sidebar Navigation Items */
.fi-sidebar-item:not(.fi-active) > .fi-sidebar-item-btn,
.fi-sidebar-item:not(.fi-active) > a,
html:not(.dark) .fi-sidebar-item:not(.fi-active) > .fi-sidebar-item-btn,
html:not(.dark) .fi-sidebar-item:not(.fi-active) > a,
html.dark .fi-sidebar-item:not(.fi-active) > .fi-sidebar-item-btn,
html.dark .fi-sidebar-item:not(.fi-active) > a {
  background: transparent !important;
  color: #111827 !important;
  border-radius: 8px !important;
  transition: all 0.15s ease !important;
}

.fi-sidebar-item:not(.fi-active) > .fi-sidebar-item-btn .fi-sidebar-item-label,
.fi-sidebar-item:not(.fi-active) > a .fi-sidebar-item-label,
html:not(.dark) .fi-sidebar-item:not(.fi-active) .fi-sidebar-item-label,
html.dark .fi-sidebar-item:not(.fi-active) .fi-sidebar-item-label {
  color: #111827 !important;
  font-weight: 600 !important;
  font-size: 0.875rem !important;
}

.fi-sidebar-item:not(.fi-active) > .fi-sidebar-item-btn .fi-sidebar-item-icon,
.fi-sidebar-item:not(.fi-active) > .fi-sidebar-item-btn svg,
.fi-sidebar-item:not(.fi-active) > a svg,
html:not(.dark) .fi-sidebar-item:not(.fi-active) .fi-icon,
html.dark .fi-sidebar-item:not(.fi-active) .fi-icon {
  color: #111827 !important;
  transition: color 0.15s ease !important;
}

/* Hover States for Inactive Items (Clean Orange Accent Hover) */
.fi-sidebar-item:not(.fi-active) > .fi-sidebar-item-btn:hover,
.fi-sidebar-item:not(.fi-active) > a:hover {
  background: rgba(237, 85, 38, 0.08) !important;
  color: #ed5526 !important;
}

.fi-sidebar-item:not(.fi-active) > .fi-sidebar-item-btn:hover .fi-sidebar-item-label,
.fi-sidebar-item:not(.fi-active) > a:hover .fi-sidebar-item-label {
  color: #ed5526 !important;
}

.fi-sidebar-item:not(.fi-active) > .fi-sidebar-item-btn:hover .fi-sidebar-item-icon,
.fi-sidebar-item:not(.fi-active) > .fi-sidebar-item-btn:hover svg,
.fi-sidebar-item:not(.fi-active) > a:hover svg {
  color: #ed5526 !important;
}

/* ACTIVE Sidebar Navigation Item (Solid Vibrant Orange with Crisp White Text) */
.fi-sidebar-item.fi-active > .fi-sidebar-item-btn,
.fi-sidebar-item.fi-active > a,
html:not(.dark) .fi-sidebar-item.fi-active > .fi-sidebar-item-btn,
html:not(.dark) .fi-sidebar-item.fi-active > a,
html.dark .fi-sidebar-item.fi-active > .fi-sidebar-item-btn,
html.dark .fi-sidebar-item.fi-active > a {
  background: #ed5526 !important;
  color: #ffffff !important;
  border-radius: 8px !important;
  box-shadow: 0 4px 12px rgba(237, 85, 38, 0.3) !important;
}

.fi-sidebar-item.fi-active > .fi-sidebar-item-btn .fi-sidebar-item-label,
.fi-sidebar-item.fi-active > a .fi-sidebar-item-label,
html:not(.dark) .fi-sidebar-item.fi-active .fi-sidebar-item-label,
html.dark .fi-sidebar-item.fi-active .fi-sidebar-item-label {
  color: #ffffff !important;
  font-weight: 700 !important;
}

.fi-sidebar-item.fi-active > .fi-sidebar-item-btn .fi-sidebar-item-icon,
.fi-sidebar-item.fi-active > .fi-sidebar-item-btn svg,
.fi-sidebar-item.fi-active > a svg,
.fi-sidebar-item.fi-active .fi-icon,
html:not(.dark) .fi-sidebar-item.fi-active .fi-icon,
html.dark .fi-sidebar-item.fi-active .fi-icon {
  color: #ffffff !important;
}

.fi-sidebar-item.fi-active .fi-sidebar-item-grouped-border-part {
  background-color: #ed5526 !important;
}

/* ==========================================================================
   3. TOPBAR HEADER (Pure White + Crisp Black Text/Icons + Orange Focus)
   ========================================================================== */
.fi-topbar,
html:not(.dark) .fi-topbar,
html.dark .fi-topbar {
  background: #ffffff !important;
  border-bottom: 1px solid #e5e7eb !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02) !important;
}

.fi-topbar .fi-icon-btn,
.fi-topbar button,
.fi-topbar a,
.fi-topbar-item {
  color: #111827 !important;
}

.fi-topbar .fi-icon-btn:hover,
.fi-topbar button:hover {
  color: #ed5526 !important;
  background: rgba(237, 85, 38, 0.08) !important;
}

/* User Menu & Badges */
.fi-user-menu-btn,
.fi-user-avatar {
  border-radius: 9999px !important;
}

/* Global Search Input in Topbar */
.fi-global-search-field input {
  background-color: #ffffff !important;
  border: 1px solid #d1d5db !important;
  color: #000000 !important;
  border-radius: 8px !important;
}
.fi-global-search-field input:focus {
  border-color: #ed5526 !important;
  box-shadow: 0 0 0 2px rgba(237, 85, 38, 0.2) !important;
}

/* ==========================================================================
   4. BUTTONS & ACTIONS (Vibrant Orange Buttons Everywhere)
   ========================================================================== */
/* All Primary Action & Submit Buttons */
button[type="submit"],
.fi-btn-color-primary,
.fi-btn.fi-color-primary:not(.fi-btn-outlined),
.fi-btn-action,
.reseller-btn-primary,
.ops-action,
a.fi-btn.fi-color-primary {
  background-color: #ed5526 !important;
  background: #ed5526 !important;
  color: #ffffff !important;
  font-weight: 700 !important;
  font-size: 0.875rem !important;
  border: 1px solid #ed5526 !important;
  border-radius: 8px !important;
  box-shadow: 0 2px 6px rgba(237, 85, 38, 0.25) !important;
  cursor: pointer !important;
  transition: all 0.15s ease-in-out !important;
  text-decoration: none !important;
}

button[type="submit"]:hover,
.fi-btn-color-primary:hover,
.fi-btn.fi-color-primary:hover,
.fi-btn-action:hover,
.reseller-btn-primary:hover,
.ops-action:hover,
a.fi-btn.fi-color-primary:hover {
  background-color: #d44317 !important;
  background: #d44317 !important;
  border-color: #d44317 !important;
  color: #ffffff !important;
  box-shadow: 0 4px 12px rgba(237, 85, 38, 0.35) !important;
  transform: translateY(-1px) !important;
}

button[type="submit"]:active,
.fi-btn-color-primary:active,
.fi-btn-action:active,
.reseller-btn-primary:active,
.ops-action:active {
  transform: translateY(1px) !important;
  box-shadow: 0 1px 3px rgba(237, 85, 38, 0.2) !important;
}

/* Outline / Secondary Buttons (Clean White with Crisp Orange / Black Border) */
.fi-btn-outlined,
.reseller-btn-secondary {
  background: #ffffff !important;
  border: 1.5px solid #ed5526 !important;
  color: #ed5526 !important;
  font-weight: 700 !important;
  border-radius: 8px !important;
  transition: all 0.15s ease-in-out !important;
}

.fi-btn-outlined:hover,
.reseller-btn-secondary:hover {
  background: #ed5526 !important;
  color: #ffffff !important;
  border-color: #ed5526 !important;
  transform: translateY(-1px) !important;
}

/* Secondary Actions / Grey Action Buttons -> Crisp Black Outline */
.fi-btn-color-gray,
.fi-btn-color-gray:not(.fi-btn-outlined),
.ops-action--quiet {
  background: #ffffff !important;
  color: #000000 !important;
  border: 1px solid #d1d5db !important;
  font-weight: 700 !important;
  border-radius: 8px !important;
}

.fi-btn-color-gray:hover,
.ops-action--quiet:hover {
  background: #f9fafb !important;
  border-color: #ed5526 !important;
  color: #ed5526 !important;
}

/* Table Inline Action Buttons */
.fi-ta-actions button,
.fi-ta-actions a {
  border-radius: 6px !important;
  font-weight: 700 !important;
  transition: all 0.15s ease !important;
}

/* Icon Buttons */
.fi-icon-btn {
  color: #111827 !important;
}
.fi-icon-btn:hover {
  color: #ed5526 !important;
  background: rgba(237, 85, 38, 0.08) !important;
}

/* ==========================================================================
   5. TABLES (Pure White + Crisp Black Text + Clean Borders + Subtle Hover)
   ========================================================================== */
.fi-ta-ctn,
html:not(.dark) .fi-ta-ctn,
html.dark .fi-ta-ctn {
  border: 1px solid #e5e7eb !important;
  border-radius: 12px !important;
  background: #ffffff !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03) !important;
  overflow: hidden !important;
}

/* Table Toolbar & Header Container */
.fi-ta-header-ctn,
.fi-ta-toolbar {
  background: #ffffff !important;
  border-bottom: 1px solid #e5e7eb !important;
  padding: 0.85rem 1.25rem !important;
}

/* Table Header Row & Column Titles */
.fi-ta-header-cell,
html:not(.dark) .fi-ta-header-cell,
html.dark .fi-ta-header-cell {
  background: #f9fafb !important;
  border-bottom: 2px solid #e5e7eb !important;
  padding-top: 0.85rem !important;
  padding-bottom: 0.85rem !important;
}

.fi-ta-header-cell-label,
html:not(.dark) .fi-ta-header-cell-label,
html.dark .fi-ta-header-cell-label {
  font-size: 0.75rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.05em !important;
  text-transform: uppercase !important;
  color: #000000 !important;
}

/* Table Body Rows */
.fi-ta-table,
.fi-ta-content,
.fi-ta-row,
.fi-ta-cell,
html:not(.dark) .fi-ta-row,
html.dark .fi-ta-row {
  background: #ffffff !important;
}

.fi-ta-row,
.fi-ta-record > td {
  border-bottom: 1px solid #f3f4f6 !important;
  transition: background-color 0.12s ease !important;
}

/* Hover Row Effect (Subtle Orange Tint) */
.fi-ta-row:hover,
.fi-ta-record:hover,
html:not(.dark) .fi-ta-row:hover,
html.dark .fi-ta-row:hover {
  background-color: rgba(237, 85, 38, 0.035) !important;
}

/* Table Cell Typography (Solid, Sharp Black) */
.fi-ta-cell,
.fi-ta-cell .fi-ta-text-item,
.fi-ta-cell .fi-ta-text-item-label,
html:not(.dark) .fi-ta-cell,
html.dark .fi-ta-cell {
  color: #111827 !important;
  font-size: 0.875rem !important;
  font-weight: 500 !important;
}

.fi-ta-cell .fi-ta-text-item-description {
  color: #374151 !important;
  font-size: 0.75rem !important;
  font-weight: 500 !important;
}

/* Sticky Action Column in Clean White */
.fi-ta-cell:last-child,
.fi-ta-header-cell:last-child {
  background-color: #ffffff !important;
}
.fi-ta-row:hover .fi-ta-cell:last-child {
  background-color: #fff9f6 !important;
}

/* Pagination in Clean White & Orange */
.fi-ta-pagination {
  background: #ffffff !important;
  border-top: 1px solid #e5e7eb !important;
}
.fi-pagination-record {
  color: #111827 !important;
  font-weight: 600 !important;
}
.fi-pagination-item.fi-active button,
.fi-pagination-item.fi-active span {
  background: #ed5526 !important;
  color: #ffffff !important;
  border-color: #ed5526 !important;
  font-weight: 700 !important;
}

/* Filter Tabs Styling (Clean Orange Active Pill) */
.fi-tabs {
  margin-bottom: 1rem !important;
  border-bottom: 1px solid #e5e7eb !important;
  gap: 0.5rem !important;
  background: transparent !important;
}

.fi-tabs-item {
  border-radius: 8px !important;
  font-weight: 600 !important;
  color: #111827 !important;
  transition: all 0.15s ease !important;
  padding: 0.5rem 1rem !important;
}

.fi-tabs-item:hover {
  color: #ed5526 !important;
}

.fi-tabs-item-active {
  background-color: rgba(237, 85, 38, 0.1) !important;
  color: #ed5526 !important;
  border: 1px solid #ed5526 !important;
  font-weight: 700 !important;
}

/* ==========================================================================
   6. CARDS, SECTIONS & STATS WIDGETS (Pure White + Crisp Black Values + Orange Hover)
   ========================================================================== */
.fi-section,
.fi-wi-stats-overview-stat,
.ops-card,
.reseller-card {
  background: #ffffff !important;
  border: 1px solid #e5e7eb !important;
  border-radius: 14px !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03) !important;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease !important;
}

.fi-wi-stats-overview-stat:hover,
.ops-card:hover,
.reseller-card:hover {
  border-color: #ed5526 !important;
  box-shadow: 0 4px 16px rgba(237, 85, 38, 0.1) !important;
  transform: translateY(-1px) !important;
}

/* Stat Card Typography */
.fi-wi-stats-overview-stat-label,
.ops-kpi__label {
  font-size: 0.8125rem !important;
  font-weight: 700 !important;
  color: #111827 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.03em !important;
}

.fi-wi-stats-overview-stat-value,
.ops-value,
.ops-kpi__value {
  font-size: 1.875rem !important;
  font-weight: 850 !important;
  letter-spacing: -0.03em !important;
  color: #000000 !important;
  line-height: 1.15 !important;
}

.fi-wi-stats-overview-stat-description,
.ops-card__hint {
  font-size: 0.75rem !important;
  font-weight: 600 !important;
  color: #374151 !important;
  margin-top: 0.35rem !important;
}

/* Section Headers */
.fi-section-header {
  border-bottom: 1px solid #f3f4f6 !important;
  padding-bottom: 0.85rem !important;
}
.fi-section-header-heading {
  color: #000000 !important;
  font-size: 1.125rem !important;
  font-weight: 800 !important;
}
.fi-section-header-description {
  color: #374151 !important;
  font-size: 0.8125rem !important;
}

/* ==========================================================================
   7. FORM INPUTS & CONTROLS (Pure White + Crisp Black Text + Orange Focus Ring)
   ========================================================================== */
.fi-fo-field-wrp-label,
label {
  font-size: 0.8125rem !important;
  font-weight: 700 !important;
  color: #000000 !important;
  letter-spacing: -0.01em !important;
  margin-bottom: 0.375rem !important;
}

.fi-fo-field-wrp-helper-text {
  color: #374151 !important;
  font-size: 0.75rem !important;
  font-weight: 500 !important;
}

/* Input Containers */
.fi-input-wrp,
.fi-select-input,
.fi-fo-textarea textarea,
.fi-fo-rich-editor,
input[type="text"],
input[type="number"],
input[type="email"],
input[type="password"],
input[type="search"],
select,
textarea {
  background-color: #ffffff !important;
  background: #ffffff !important;
  border: 1px solid #d1d5db !important;
  border-radius: 8px !important;
  color: #000000 !important;
  font-size: 0.9375rem !important;
  font-weight: 600 !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.02) !important;
  transition: border-color 0.15s ease, box-shadow 0.15s ease !important;
}

input.fi-input,
.fi-input input {
  color: #000000 !important;
  background: transparent !important;
}

input::placeholder,
textarea::placeholder {
  color: #6b7280 !important;
  font-weight: 400 !important;
}

/* Input Focus States (Crisp Orange Glow) */
.fi-input-wrp:focus-within,
input:focus,
select:focus,
textarea:focus {
  outline: none !important;
  border-color: #ed5526 !important;
  box-shadow: 0 0 0 3px rgba(237, 85, 38, 0.2) !important;
}

/* Checkbox & Radios (Orange Accent) */
input[type="checkbox"],
input[type="radio"] {
  accent-color: #ed5526 !important;
  border: 1.5px solid #d1d5db !important;
  border-radius: 4px !important;
  width: 1.125rem !important;
  height: 1.125rem !important;
  cursor: pointer !important;
}

/* Input Addons */
.reseller-input-addon {
  background: #f9fafb !important;
  border-right: 1px solid #e5e7eb !important;
  color: #000000 !important;
  font-weight: 800 !important;
}

/* ==========================================================================
   8. MODALS & DIALOGS (Pure White Window + Crisp Black Text + Orange Buttons)
   ========================================================================== */
.fi-modal-window,
html:not(.dark) .fi-modal-window,
html.dark .fi-modal-window {
  background: #ffffff !important;
  border: 1px solid #e5e7eb !important;
  border-radius: 16px !important;
  box-shadow: 0 20px 45px -10px rgba(0, 0, 0, 0.18) !important;
  color: #111827 !important;
}

.fi-modal-header,
html:not(.dark) .fi-modal-header,
html.dark .fi-modal-header {
  background: #ffffff !important;
  border-bottom: 1px solid #e5e7eb !important;
  padding: 1.25rem 1.75rem !important;
}

.fi-modal-header-heading,
.fi-modal-heading {
  color: #000000 !important;
  font-weight: 800 !important;
  font-size: 1.25rem !important;
}

.fi-modal-header-description,
.fi-modal-description {
  color: #374151 !important;
  font-size: 0.875rem !important;
}

.fi-modal-content {
  background: #ffffff !important;
  color: #111827 !important;
}

.fi-modal-footer,
html:not(.dark) .fi-modal-footer,
html.dark .fi-modal-footer {
  background: #f9fafb !important;
  border-top: 1px solid #e5e7eb !important;
  padding: 1rem 1.75rem !important;
}

/* ==========================================================================
   9. BADGES & NOTIFICATIONS (Clean Professional Accents)
   ========================================================================== */
.fi-badge {
  font-weight: 700 !important;
  letter-spacing: 0.02em !important;
  border-radius: 9999px !important;
  padding: 0.25rem 0.65rem !important;
  font-size: 0.75rem !important;
}

/* Primary / Orange Badge */
.fi-badge.fi-color-primary {
  background: rgba(237, 85, 38, 0.12) !important;
  border: 1px solid rgba(237, 85, 38, 0.3) !important;
  color: #ed5526 !important;
}

/* Success / Green Badge */
.fi-badge.fi-color-success {
  background: #ecfdf5 !important;
  border: 1px solid #a7f3d0 !important;
  color: #065f46 !important;
}

/* Warning / Amber Badge */
.fi-badge.fi-color-warning {
  background: #fffbeb !important;
  border: 1px solid #fde68a !important;
  color: #92400e !important;
}

/* Danger / Rose Badge */
.fi-badge.fi-color-danger {
  background: #fff1f2 !important;
  border: 1px solid #fecdd3 !important;
  color: #9f1239 !important;
}

/* Notifications Button Badge */
.fi-topbar-database-notifications-btn .fi-badge,
[data-notifications-indicator] {
  background: #ed5526 !important;
  color: #ffffff !important;
  font-weight: 800 !important;
}

/* ==========================================================================
   10. LOGIN PAGE (Ultra-Clean White & Crisp Black with Vibrant Orange CTA)
   ========================================================================== */
.fi-simple-layout {
  min-height: 100vh !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 1.5rem !important;
  background-color: #ffffff !important;
}

.fi-simple-main-ctn {
  position: relative !important;
  width: 100% !important;
  max-width: 440px !important;
  margin: auto !important;
}

.fi-simple-main-ctn::before {
  display: none !important;
}

.fi-simple-main {
  position: relative !important;
  background: #ffffff !important;
  border: 1px solid #e5e7eb !important;
  box-shadow: 0 10px 30px -5px rgba(0, 0, 0, 0.08) !important;
  border-radius: 1.25rem !important;
  padding: 2.5rem 2rem !important;
}

.fi-simple-header img.fi-logo {
  height: 3.5rem !important;
  width: auto !important;
  max-width: 240px !important;
  object-fit: contain !important;
}

.fi-simple-header-heading,
.fi-simple-header h1 {
  font-size: 1.5rem !important;
  font-weight: 800 !important;
  color: #000000 !important;
  margin-top: 1rem !important;
}

.fi-simple-header-subheading,
.fi-simple-header p {
  font-size: 0.875rem !important;
  color: #111827 !important;
  font-weight: 500 !important;
}

/* ==========================================================================
   11. COMPREHENSIVE UTILITY CLASSES (Grid, Spacing, Typography & Color Overrides)
   Neutralizes all old grey/dark classes to enforce the 3-color palette
   ========================================================================== */

/* Grid System */
.grid { display: grid !important; }
.grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)) !important; }
.grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
.grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
.grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
.grid-cols-6 { grid-template-columns: repeat(6, minmax(0, 1fr)) !important; }
.grid-cols-12 { grid-template-columns: repeat(12, minmax(0, 1fr)) !important; }

@media (min-width: 640px) {
  .sm\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .sm\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
  .sm\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
  .sm\:grid-cols-6 { grid-template-columns: repeat(6, minmax(0, 1fr)) !important; }
  .sm\:flex-row { flex-direction: row !important; }
  .sm\:items-start { align-items: flex-start !important; }
  .sm\:items-center { align-items: center !important; }
  .sm\:text-right { text-align: right !important; }
}

@media (min-width: 768px) {
  .md\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .md\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
  .md\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
  .md\:flex-row { flex-direction: row !important; }
  .md\:items-center { align-items: center !important; }
}

@media (min-width: 1024px) {
  .lg\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .lg\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
  .lg\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
  .lg\:col-span-2 { grid-column: span 2 / span 2 !important; }
  .lg\:col-span-3 { grid-column: span 3 / span 3 !important; }
}

/* Gaps */
.gap-1 { gap: 0.25rem !important; }
.gap-1\.5 { gap: 0.375rem !important; }
.gap-2 { gap: 0.5rem !important; }
.gap-2\.5 { gap: 0.625rem !important; }
.gap-3 { gap: 0.75rem !important; }
.gap-4 { gap: 1rem !important; }
.gap-5 { gap: 1.25rem !important; }
.gap-6 { gap: 1.5rem !important; }
.gap-8 { gap: 2rem !important; }

/* Flexbox */
.flex { display: flex !important; }
.inline-flex { display: inline-flex !important; }
.flex-col { flex-direction: column !important; }
.flex-row { flex-direction: row !important; }
.flex-wrap { flex-wrap: wrap !important; }
.items-center { align-items: center !important; }
.items-start { align-items: flex-start !important; }
.items-end { align-items: flex-end !important; }
.items-baseline { align-items: baseline !important; }
.justify-between { justify-content: space-between !important; }
.justify-center { justify-content: center !important; }
.justify-end { justify-content: flex-end !important; }
.justify-start { justify-content: flex-start !important; }
.shrink-0 { flex-shrink: 0 !important; }
.grow { flex-grow: 1 !important; }

/* Spacing */
.p-1 { padding: 0.25rem !important; }
.p-1\.5 { padding: 0.375rem !important; }
.p-2 { padding: 0.5rem !important; }
.p-2\.5 { padding: 0.625rem !important; }
.p-3 { padding: 0.75rem !important; }
.p-3\.5 { padding: 0.875rem !important; }
.p-4 { padding: 1rem !important; }
.p-5 { padding: 1.25rem !important; }
.p-6 { padding: 1.5rem !important; }
.p-8 { padding: 2rem !important; }

.px-2 { padding-left: 0.5rem !important; padding-right: 0.5rem !important; }
.px-2\.5 { padding-left: 0.625rem !important; padding-right: 0.625rem !important; }
.px-3 { padding-left: 0.75rem !important; padding-right: 0.75rem !important; }
.px-3\.5 { padding-left: 0.875rem !important; padding-right: 0.875rem !important; }
.px-4 { padding-left: 1rem !important; padding-right: 1rem !important; }
.px-5 { padding-left: 1.25rem !important; padding-right: 1.25rem !important; }
.px-6 { padding-left: 1.5rem !important; padding-right: 1.5rem !important; }

.py-0\.5 { padding-top: 0.125rem !important; padding-bottom: 0.125rem !important; }
.py-1 { padding-top: 0.25rem !important; padding-bottom: 0.25rem !important; }
.py-1\.5 { padding-top: 0.375rem !important; padding-bottom: 0.375rem !important; }
.py-2 { padding-top: 0.5rem !important; padding-bottom: 0.5rem !important; }
.py-2\.5 { padding-top: 0.625rem !important; padding-bottom: 0.625rem !important; }
.py-3 { padding-top: 0.75rem !important; padding-bottom: 0.75rem !important; }
.py-3\.5 { padding-top: 0.875rem !important; padding-bottom: 0.875rem !important; }
.py-4 { padding-top: 1rem !important; padding-bottom: 1rem !important; }
.py-6 { padding-top: 1.5rem !important; padding-bottom: 1.5rem !important; }
.py-8 { padding-top: 2rem !important; padding-bottom: 2rem !important; }

.mb-1 { margin-bottom: 0.25rem !important; }
.mb-2 { margin-bottom: 0.5rem !important; }
.mb-2\.5 { margin-bottom: 0.625rem !important; }
.mb-3 { margin-bottom: 0.75rem !important; }
.mb-4 { margin-bottom: 1rem !important; }
.mb-5 { margin-bottom: 1.25rem !important; }
.mb-6 { margin-bottom: 1.5rem !important; }
.mb-8 { margin-bottom: 2rem !important; }

.mt-1 { margin-top: 0.25rem !important; }
.mt-2 { margin-top: 0.5rem !important; }
.mt-3 { margin-top: 0.75rem !important; }
.mt-4 { margin-top: 1rem !important; }
.mt-5 { margin-top: 1.25rem !important; }
.mt-6 { margin-top: 1.5rem !important; }

.space-y-1 > * + * { margin-top: 0.25rem !important; }
.space-y-2 > * + * { margin-top: 0.5rem !important; }
.space-y-3 > * + * { margin-top: 0.75rem !important; }
.space-y-4 > * + * { margin-top: 1rem !important; }
.space-y-6 > * + * { margin-top: 1.5rem !important; }
.space-y-8 > * + * { margin-top: 2rem !important; }

/* Sizing */
.w-full { width: 100% !important; }
.h-full { height: 100% !important; }
.w-3 { width: 0.75rem !important; }
.h-3 { height: 0.75rem !important; }
.w-4 { width: 1rem !important; }
.h-4 { height: 1rem !important; }
.w-5 { width: 1.25rem !important; }
.h-5 { height: 1.25rem !important; }
.w-6 { width: 1.5rem !important; }
.h-6 { height: 1.5rem !important; }
.w-8 { width: 2rem !important; }
.h-8 { height: 2rem !important; }

/* Rounded */
.rounded { border-radius: 0.25rem !important; }
.rounded-md { border-radius: 0.375rem !important; }
.rounded-lg { border-radius: 0.5rem !important; }
.rounded-xl { border-radius: 0.75rem !important; }
.rounded-2xl { border-radius: 1rem !important; }
.rounded-full { border-radius: 9999px !important; }

/* Borders (Crisp Clean Dividers) */
.border { border: 1px solid #e5e7eb !important; }
.border-0 { border-width: 0 !important; }
.border-t { border-top: 1px solid #e5e7eb !important; }
.border-b { border-bottom: 1px solid #e5e7eb !important; }
.border-y { border-top: 1px solid #e5e7eb !important; border-bottom: 1px solid #e5e7eb !important; }
.border-gray-100, .border-gray-200, .border-gray-300, .border-gray-700, .border-gray-800, .border-gray-900 {
  border-color: #e5e7eb !important;
}
.border-primary-600, .border-primary-700 {
  border-color: #ed5526 !important;
}

/* Background Color Enforcements (Always Clean White Surface) */
.bg-white,
.bg-gray-50,
.bg-gray-100,
.bg-gray-800,
.bg-gray-900,
.dark .bg-white,
html.dark .bg-white,
.dark .dark\:bg-gray-800,
html.dark .dark\:bg-gray-800,
.dark .dark\:bg-gray-900,
html.dark .dark\:bg-gray-900,
.dark .dark\:bg-gray-950,
html.dark .dark\:bg-gray-950 {
  background-color: #ffffff !important;
}

/* Primary Orange Backgrounds */
.bg-primary-50, .bg-primary-100, .bg-primary-50\/20 {
  background-color: rgba(237, 85, 38, 0.1) !important;
}
.bg-primary-600, .bg-primary-700 {
  background-color: #ed5526 !important;
}

/* Typography Sizing */
.text-xs { font-size: 0.75rem !important; line-height: 1rem !important; }
.text-sm { font-size: 0.875rem !important; line-height: 1.25rem !important; }
.text-base { font-size: 1rem !important; line-height: 1.5rem !important; }
.text-lg { font-size: 1.125rem !important; line-height: 1.75rem !important; }
.text-xl { font-size: 1.25rem !important; line-height: 1.75rem !important; }
.text-2xl { font-size: 1.5rem !important; line-height: 2rem !important; }
.text-3xl { font-size: 1.875rem !important; line-height: 2.25rem !important; }

.font-normal { font-weight: 400 !important; }
.font-medium { font-weight: 500 !important; }
.font-semibold { font-weight: 600 !important; }
.font-bold { font-weight: 700 !important; }
.font-black, .font-extrabold { font-weight: 800 !important; }
.font-mono { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace !important; }

.uppercase { text-transform: uppercase !important; }
.text-left { text-align: left !important; }
.text-center { text-align: center !important; }
.text-right { text-align: right !important; }

/* Text Color Enforcements (Everything Written in Deep, Sharp Black!) */
.text-gray-400,
.text-gray-500,
.text-gray-600,
.text-gray-700,
.text-gray-800,
.text-gray-900,
.dark .dark\:text-gray-200,
.dark .dark\:text-gray-300,
.dark .dark\:text-gray-400,
html.dark .dark\:text-gray-200,
html.dark .dark\:text-gray-300,
html.dark .dark\:text-gray-400 {
  color: #111827 !important;
}

/* Pure Black for Key Text Elements */
.text-black,
.dark .dark\:text-white,
html.dark .dark\:text-white {
  color: #000000 !important;
}

/* Orange Text Accents */
.text-primary-600,
.text-primary-700,
.text-primary-800,
.text-\[\#F97316\],
.dark .dark\:text-primary-400 {
  color: #ed5526 !important;
}

/* White text specifically inside solid orange buttons or active badges */
button[type="submit"] *,
.fi-btn-color-primary *,
.fi-sidebar-item.fi-active *,
.fi-sidebar-item.fi-active svg,
.reseller-btn-primary *,
.ops-action * {
  color: #ffffff !important;
}

/* Tables & Dividers */
.divide-y > * + * {
  border-top: 1px solid #f3f4f6 !important;
}

/* Hover Utilities */
.hover\:bg-gray-50:hover,
.hover\:bg-gray-100:hover {
  background-color: rgba(237, 85, 38, 0.04) !important;
}

.hover\:border-gray-300:hover {
  border-color: #ed5526 !important;
}

/* Ops Card Dark Variant -> Converted to Clean White Card */
.ops-card--dark {
  background: #ffffff !important;
  color: #000000 !important;
  border: 1px solid #e5e7eb !important;
}
.ops-card--dark * {
  color: #111827 !important;
}
.ops-card--dark .ops-card__title,
.ops-card--dark .ops-value,
.ops-card--dark .ops-kpi__value {
  color: #000000 !important;
}
.ops-card--dark .ops-eyebrow {
  color: #ed5526 !important;
}
.ops-card--dark .ops-kpi {
  border-top: 1px solid #e5e7eb !important;
}

/* Neutralize all colored/dark modal and panel backgrounds */
.dark\:bg-emerald-950, .dark\:bg-emerald-950\/20, .dark\:bg-emerald-950\/30, .dark\:bg-emerald-950\/60,
.dark\:bg-amber-950, .dark\:bg-amber-950\/20, .dark\:bg-amber-950\/40,
.dark\:bg-rose-950, .dark\:bg-rose-950\/20, .dark\:bg-rose-950\/40,
.dark\:bg-primary-950, .dark\:bg-primary-950\/60,
.dark\:border-gray-700, .dark\:border-gray-800, .dark\:border-gray-900 {
  background-color: #ffffff !important;
  border-color: #e5e7eb !important;
}

/* Eliminate All Dark-Mode Override Artifacts */
.dark, html.dark {
  background-color: #ffffff !important;
  color: #111827 !important;
}

/* ==========================================================================
   12. RESPONSIVE TABLE OPTIMIZATION (No Unnecessary Horizontal Scrolling)
   ========================================================================== */
.fi-ta-ctn {
  overflow-x: auto !important;
}

/* ==========================================================================
   Table Responsive Layout & Smooth Left-Right Scrolling
   ========================================================================== */
.fi-ta-ctn {
  border-radius: 0.75rem !important;
  border: 1px solid #e5e7eb !important;
  background-color: #ffffff !important;
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.05), 0 1px 2px -1px rgba(0, 0, 0, 0.05) !important;
}

.fi-ta-content {
  width: 100% !important;
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch !important;
  scrollbar-width: thin !important;
  scrollbar-color: #9ca3af #f3f4f6 !important;
}

.fi-ta-content::-webkit-scrollbar {
  height: 8px !important;
  background-color: #f3f4f6 !important;
}

.fi-ta-content::-webkit-scrollbar-thumb {
  background-color: #9ca3af !important;
  border-radius: 9999px !important;
}

.fi-ta-content::-webkit-scrollbar-thumb:hover {
  background-color: #ed5526 !important;
}

.fi-ta-table {
  width: 100% !important;
  min-width: 100% !important;
  table-layout: auto !important;
}

.fi-ta-header-cell {
  white-space: nowrap !important;
  padding: 0.6rem 0.75rem !important;
  font-size: 0.8125rem !important;
  font-weight: 700 !important;
  color: #374151 !important;
  background-color: #f9fafb !important;
  border-bottom: 1px solid #e5e7eb !important;
}

.fi-ta-cell {
  padding: 0.6rem 0.75rem !important;
  font-size: 0.875rem !important;
  vertical-align: middle !important;
}

/* Sticky Action Column so actions are ALWAYS visible without scrolling */
.fi-ta-table th:last-child,
.fi-ta-table td:last-child {
  position: sticky !important;
  right: 0 !important;
  background-color: #ffffff !important;
  z-index: 5 !important;
  box-shadow: -3px 0 4px -2px rgba(0, 0, 0, 0.05) !important;
}

.fi-ta-header-cell:last-child {
  background-color: #f9fafb !important;
}

.fi-ta-cell .fi-ta-text-item {
  word-break: normal !important;
}

/* Prevent unwanted wrapping on crucial columns */
.fi-ta-cell:has(.fi-badge),
.fi-badge,
.fi-ta-actions {
  white-space: nowrap !important;
}

/* Compact Action Buttons in Table */
.fi-ta-actions {
  gap: 0.35rem !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
}

.fi-ta-actions .fi-icon-btn {
  width: 2rem !important;
  height: 2rem !important;
  padding: 0.25rem !important;
  border-radius: 6px !important;
  transition: all 0.15s ease !important;
}

.fi-ta-actions .fi-icon-btn:hover {
  transform: scale(1.08) !important;
}