/* ===== CUSTOM CRM STYLES ===== */

/* ----- Sidebar — Lighter blue with better contrast ----- */
.fi-sidebar,
.fi-sidebar-nav,
.fi-sidebar-header {
  background: #1e40af !important;
}
.fi-sidebar-header {
  border-bottom: 1px solid rgba(255,255,255,0.1) !important;
}

.dark .fi-sidebar,
.dark .fi-sidebar-nav,
.dark .fi-sidebar-header {
  background: #1e40af !important;
}

/* Group labels — readable opacity */
.fi-sidebar-group-label {
  color: rgba(255,255,255,0.65) !important;
  font-size: 0.7rem !important;
  letter-spacing: 0.05em !important;
}

/* Nav items — high contrast text */
.fi-sidebar-item a,
.fi-sidebar-item-button,
.fi-sidebar-item-label {
  color: rgba(255,255,255,0.9) !important;
}
.fi-sidebar-item a:hover,
.fi-sidebar-item-button:hover {
  background: rgba(255,255,255,0.12) !important;
  color: #ffffff !important;
}

/* Dark mode overrides */
.dark .fi-sidebar-item-label,
.dark .fi-sidebar-item a {
  color: rgba(255,255,255,0.9) !important;
}

/* Active nav item — prominent */
.fi-sidebar-item.fi-active > a,
.fi-sidebar-item.fi-active > .fi-sidebar-item-button {
  background: linear-gradient(135deg, rgba(255,255,255,0.22), rgba(255,255,255,0.12)) !important;
  border-left: 4px solid #93c5fd !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.08) !important;
  border-radius: 0 0.5rem 0.5rem 0 !important;
  margin-left: 0 !important;
}
.fi-sidebar-item.fi-active .fi-sidebar-item-label {
  color: #ffffff !important;
  font-weight: 700 !important;
  letter-spacing: 0.01em !important;
}
.fi-sidebar-item.fi-active .fi-sidebar-item-icon,
.fi-sidebar-item.fi-active .fi-sidebar-item-icon svg {
  color: #93c5fd !important;
}
/* Chevron for active parent groups */
.fi-sidebar-item.fi-active .fi-sidebar-item-chevron {
  color: rgba(255,255,255,0.8) !important;
}

/* Hide all chevrons/arrows in sidebar */
.fi-sidebar-group .fi-icon-btn,
.fi-sidebar-item-chevron,
.fi-sidebar-group-chevron,
button.fi-sidebar-group-button svg:last-child,
button.fi-sidebar-item-button svg:last-child {
  display: none !important;
}

/* Icons — white */
.fi-sidebar-item-icon,
.fi-sidebar-item-icon svg {
  color: rgba(255,255,255,0.85) !important;
}

/* ----- Typography ----- */
body {
  font-size: 14px !important;
  line-height: 1.6 !important;
}

/* ----- Typography ----- */
body {
  font-size: 14px !important;
  line-height: 1.6 !important;
}

/* ----- Section spacing ----- */
.fi-section {
  border-radius: 0.75rem !important;
  margin-bottom: 1.5rem !important;
}

.fi-section .fi-section-content {
  padding: 1.5rem !important;
}

/* Headings */
h1, h2, h3, .fi-section-heading {
  font-weight: 600 !important;
  line-height: 1.3 !important;
}

/* Form labels */
.fi-field-label label,
.fi-form-label {
  font-weight: 500 !important;
  font-size: 0.8125rem !important;
}

/* ----- Buttons — 44px min height for touch ----- */
.fi-btn,
.fi-dropdown-item {
  min-height: 44px !important;
  border-radius: 0.5rem !important;
  font-weight: 500 !important;
  transition: all 0.15s ease !important;
}

.fi-btn:hover {
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 12px rgba(0,0,0,0.12) !important;
}

.fi-btn:active {
  transform: translateY(0) !important;
}

/* ----- Form Inputs — better visual weight ----- */
.fi-input,
.fi-select,
.fi-textarea,
input[type="text"],
input[type="email"],
input[type="number"],
select,
textarea {
  border-width: 2px !important;
  border-radius: 0.5rem !important;
  transition: border-color 0.15s ease, box-shadow 0.15s ease !important;
}

.fi-input:focus,
.fi-select:focus,
.fi-textarea:focus,
input:focus,
select:focus,
textarea:focus {
  border-color: #3b82f6 !important;
  box-shadow: 0 0 0 3px rgba(59,130,246,0.15) !important;
}

/* Disabled inputs */
.fi-input:disabled,
input:disabled,
select:disabled,
textarea:disabled {
  opacity: 0.5 !important;
  cursor: not-allowed !important;
  background-color: #f3f4f6 !important;
}

/* ----- Status Badges — better ----- */
.fi-badge {
  font-weight: 500 !important;
  padding: 0.2rem 0.65rem !important;
  border-radius: 0.375rem !important;
  font-size: 0.75rem !important;
}

/* ----- Stats ----- */
.fi-stats-overview-stat {
  border-radius: 0.75rem !important;
  padding: 1.25rem !important;
  transition: box-shadow 0.15s ease !important;
}
.fi-stats-overview-stat:hover {
  box-shadow: 0 4px 16px rgba(0,0,0,0.08) !important;
}

/* Limit to 4 columns on large screens */
@media (min-width: 1280px) {
  .fi-stats-overview-grid {
    grid-template-columns: repeat(4, 1fr) !important;
  }
}

/* ----- Section spacing ----- */
.fi-section {
  border-radius: 0.75rem !important;
  margin-bottom: 1.5rem !important;
}

.fi-section .fi-section-content {
  padding: 1.5rem !important;
}

/* ----- Action buttons hierarchy ----- */
/* Danger actions get red */
button.danger,
a.danger,
.fi-btn-color-danger {
  background-color: #dc2626 !important;
  color: #ffffff !important;
}
button.danger:hover,
a.danger:hover {
  background-color: #b91c1c !important;
}

/* ----- Compact table ----- */
.fi-table td,
.fi-table th {
  padding: 0.3rem 0.5rem !important;
  font-size: 0.72rem !important;
}
.fi-table .fi-badge {
  font-size: 0.62rem !important;
  padding: 0.05rem 0.35rem !important;
}
.fi-table .fi-icon-btn {
  width: 1.6rem !important;
  height: 1.6rem !important;
}
.fi-table .fi-icon-btn svg {
  width: 0.9rem !important;
  height: 0.9rem !important;
}
.fi-table .fi-checkbox-input {
  width: 0.9rem !important;
  height: 0.9rem !important;
}

/* ----- Hover effects on cards ----- */
.fi-card {
  transition: box-shadow 0.2s ease, transform 0.2s ease !important;
}
.fi-card:hover {
  box-shadow: 0 8px 24px rgba(0,0,0,0.08) !important;
}

/* ----- Topbar stays sticky ----- */
.fi-topbar {
  position: sticky !important;
  top: 0 !important;
  z-index: 999 !important;
}

/* ----- Loading states ----- */
.fi-btn[disabled] {
  opacity: 0.6 !important;
  cursor: wait !important;
}

/* ----- Sidebar ----- */
.fi-sidebar {
  width: 16rem !important;
}
.fi-topbar-open-sidebar-btn {
  display: flex !important;
}

/* ----- Modal backdrop ----- */
.fi-modal-close-overlay {
  backdrop-filter: blur(2px) !important;
}

/* ----- Page content max width ----- */
.fi-page-content {
  max-width: 100% !important;
}

/* ----- Notifications above everything ----- */
.fi-notifications {
  z-index: 9999 !important;
}
.fi-notifications > div {
  z-index: 9999 !important;
}

/* ============================================
   SHIPMENTS PAGE COMPACT LAYOUT
   ============================================ */

/* Reduce table row height & cell padding */
.fi-ta-cell {
  padding: 0.35rem 0.4rem !important;
}

/* Smaller font in table */
.fi-ta-text {
  font-size: 0.78rem !important;
  line-height: 1.2rem !important;
}

/* Compact badges */
.fi-badge {
  padding: 0.08rem 0.45rem !important;
  font-size: 0.7rem !important;
}

/* Smaller icon sizes */
.fi-ta-icon,
.fi-ta-icon svg {
  width: 0.9rem !important;
  height: 0.9rem !important;
}

/* Compact header */
.fi-ta-header {
  padding: 0.6rem 1rem !important;
}

/* Compact search input */
.fi-ta-search-field input {
  padding: 0.3rem 0.6rem !important;
  font-size: 0.8rem !important;
}
.fi-ta-search-field .fi-input-wrp {
  min-height: 30px !important;
}

/* Compact header actions */
.fi-ta-header-actions {
  gap: 0.4rem !important;
}

/* Compact header action buttons */
.fi-header-action-sm {
  min-height: 30px !important;
  font-size: 0.75rem !important;
  padding: 0.15rem 0.6rem !important;
}

/* Compact action group in rows */
.fi-ta-actions .fi-btn {
  min-height: 28px !important;
  font-size: 0.72rem !important;
  padding: 0.15rem 0.4rem !important;
}

/* Compact pagination */
.fi-ta-pagination {
  padding: 0.4rem 1rem !important;
}

/* Compact filter bar */
.fi-ta-filters-above-content-ctn {
  padding: 0.2rem 1rem !important;
}
.fi-ta-filters-above-content-ctn .fi-btn {
  min-height: 28px !important;
  font-size: 0.75rem !important;
}

/* Compact toolbar */
.fi-ta-header-toolbar {
  padding-top: 0.2rem !important;
  padding-bottom: 0.2rem !important;
  gap: 0.35rem !important;
}
.fi-ta-header-toolbar .fi-btn {
  min-height: 28px !important;
  font-size: 0.75rem !important;
  padding: 0.1rem 0.5rem !important;
}

/* Compact dropdown items */
.fi-dropdown-list-item {
  padding: 0.3rem 0.6rem !important;
  font-size: 0.78rem !important;
}

/* Compact bulk action bar */
.fi-ta-bulk-actions {
  padding: 0.35rem 1rem !important;
}

/* Hover effect on rows */
.fi-ta-row:hover {
  background-color: rgb(249 250 251) !important;
  transition: background-color 0.1s ease;
}

/* Sticky header */
.fi-ta-header-ctn {
  position: sticky !important;
  top: 0 !important;
  z-index: 10 !important;
  background: white !important;
}

/* Page heading compact */
.fi-page-header-heading span {
  font-size: 1rem !important;
}