/*
 * Tawseel's admin panel in the «أزرق الشحن» identity.
 *
 * Colours come from tawseel-tokens.css (generated from
 * resources/design/tokens.json); this file only says where they go. The
 * navy rail and the flat, ruled surfaces are what make the panel read as
 * an operations system rather than a consumer app.
 */

.fi-body { font-family: var(--tw-font-body); color: var(--tw-ink); }
.fi-main, .fi-body { background: var(--tw-canvas) !important; }

/* The navy rail. */
.fi-sidebar, .fi-sidebar-header {
  background: var(--tw-navy) !important;
  border-inline-start: 0 !important;
  box-shadow: none !important;
}
.fi-sidebar-header { border-bottom: 1px solid var(--tw-navy-line) !important; }
.fi-sidebar-group-label { color: var(--tw-on-navy-faint) !important; font-weight: 500 !important; font-size: .75rem !important; }
.fi-sidebar-group-collapse-btn, .fi-sidebar-group-collapse-btn svg { color: var(--tw-on-navy-faint) !important; }
.fi-sidebar-item-btn { border-radius: var(--tw-radius-md) !important; }
.fi-sidebar-item-label { color: var(--tw-on-navy-text) !important; font-weight: 500 !important; }
.fi-sidebar-item-icon { color: var(--tw-on-navy-faint) !important; }
.fi-sidebar-item-btn:hover { background: var(--tw-on-navy-hover) !important; }
.fi-sidebar-item-btn:hover .fi-sidebar-item-label, .fi-sidebar-item-btn:hover .fi-sidebar-item-icon { color: #FFFFFF !important; }
.fi-sidebar-item.fi-active > .fi-sidebar-item-btn { background: #FFFFFF !important; }
.fi-sidebar-item.fi-active .fi-sidebar-item-label { color: var(--tw-navy) !important; font-weight: 600 !important; }
.fi-sidebar-item.fi-active .fi-sidebar-item-icon { color: var(--tw-primary) !important; }
.fi-sidebar-item-grouped-border-part { background: var(--tw-navy-line) !important; }
.fi-sidebar-open-collapse-sidebar-btn, .fi-sidebar-close-collapse-sidebar-btn { color: var(--tw-on-navy-text) !important; }

/* Flat white bar above the page, ruled off like a document header. */
.fi-topbar {
  background: var(--tw-paper) !important;
  border-bottom: 1px solid var(--tw-line) !important;
  box-shadow: none !important;
}

.fi-header-heading {
  font-family: var(--tw-font-display) !important;
  font-weight: 800 !important;
  color: var(--tw-navy) !important;
  letter-spacing: 0 !important;
}

/* Surfaces: ruled, not floating. */
.fi-section, .fi-ta-ctn, .fi-wi-stats-overview-stat, .fi-wi-widget {
  border-radius: var(--tw-radius-md) !important;
  box-shadow: none !important;
}
.fi-section, .fi-ta-ctn, .fi-wi-stats-overview-stat {
  border: 1px solid var(--tw-line) !important;
  --tw-ring-shadow: 0 0 #0000 !important;
}
.fi-wi-stats-overview-stat-value { font-family: var(--tw-font-display) !important; font-weight: 800 !important; color: var(--tw-navy) !important; }
.fi-ta-header-cell { background: var(--tw-canvas-2) !important; }
.fi-btn, .fi-input-wrp, .fi-badge, .fi-dropdown-panel { border-radius: var(--tw-radius-md) !important; }
.fi-badge { border-radius: var(--tw-radius-sm) !important; }

/* Tracking codes and other identifiers read as identifiers. */
.fi-ta-text-item-label.font-mono, code, kbd { font-family: var(--tw-font-mono) !important; }

/* Sign-in: the network schematic on navy, the form on paper. */
.fi-simple-layout { background: var(--tw-navy) !important; }
.fi-simple-main {
  border-radius: var(--tw-radius-lg) !important;
  background: var(--tw-paper) !important;
}
.fi-simple-header-heading { font-family: var(--tw-font-display) !important; font-weight: 800 !important; color: var(--tw-navy) !important; }

.fi-logo span { color: var(--tw-navy) !important; }
.fi-sidebar .fi-logo span { color: #FFFFFF !important; }