/* Go-Parts Ship Theme - ShipStation Inspired with Go-Parts Colors */

:root {
  /* Primary Colors (Go-Parts) */
  --gp-blue: #1e3a8a;
  --gp-blue-light: #2563eb;
  --gp-blue-dark: #1e3a8a;
  --gp-yellow: #fbbf24;
  --gp-yellow-dark: #f59e0b;
  --gp-orange: #f59e0b;

  /* Semantic Colors */
  --gp-success: #10b981;
  --gp-danger: #dc2626;
  --gp-warning: #f59e0b;
  --gp-info: #3b82f6;

  /* Neutral Colors */
  --gp-white: #ffffff;
  --gp-gray-50: #f8fafc;
  --gp-gray-100: #f1f5f9;
  --gp-gray-200: #e2e8f0;
  --gp-gray-300: #cbd5e1;
  --gp-gray-400: #94a3b8;
  --gp-gray-500: #64748b;
  --gp-gray-600: #475569;
  --gp-gray-700: #334155;
  --gp-gray-800: #1e293b;
  --gp-gray-900: #0f172a;

  /* Typography */
  --gp-font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --gp-font-mono: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
}

/* ============================================
   PHASE 1: HEADER / TOP BAR
   ============================================ */

/* Main Header/Topbar - Multiple selectors for specificity */
.fi-topbar,
header.fi-topbar,
.fi-layout > .fi-topbar,
[class*="fi-topbar"] {
  background: #1e3a8a !important;
  background-color: #1e3a8a !important;
  border-bottom: none !important;
  min-height: 48px !important;
}

.fi-topbar nav,
.fi-topbar > nav {
  height: 48px !important;
  background: #1e3a8a !important;
}

/* Logo in header - make it white (but NOT the user avatar) */
.fi-topbar .fi-logo img,
.fi-topbar img.fi-logo,
.fi-sidebar-header .fi-logo img {
  filter: brightness(0) invert(1) !important;
  height: 28px !important;
}

/* User avatar should NOT be inverted */
.fi-topbar .fi-user-avatar,
.fi-topbar .fi-user-menu img,
.fi-topbar img.fi-avatar {
  filter: none !important;
}

/* Topbar text and icons - be very specific */
.fi-topbar,
.fi-topbar *,
.fi-topbar span,
.fi-topbar svg,
.fi-topbar button,
.fi-topbar a {
  color: rgba(255, 255, 255, 0.9) !important;
}

.fi-topbar svg {
  stroke: rgba(255, 255, 255, 0.9) !important;
}

.fi-topbar a:hover,
.fi-topbar button:hover {
  color: #ffffff !important;
}

/* User menu button in topbar */
.fi-topbar .fi-dropdown-trigger,
.fi-topbar [class*="dropdown"] {
  color: rgba(255, 255, 255, 0.9) !important;
}

.fi-topbar .fi-dropdown-trigger:hover {
  color: #ffffff !important;
  background: rgba(255, 255, 255, 0.1) !important;
  border-radius: 4px;
}

/* User menu in topbar */
.fi-topbar .fi-user-menu {
  display: flex !important;
  align-items: center !important;
}

/* User menu trigger button */
.fi-topbar .fi-user-menu-trigger {
  display: flex !important;
  align-items: center !important;
  padding: 4px !important;
  border-radius: 50% !important;
  background: transparent !important;
  transition: background 0.2s !important;
}

.fi-topbar .fi-user-menu-trigger:hover {
  background: rgba(255, 255, 255, 0.15) !important;
}

/* Avatar in topbar - make visible with white background */
.fi-topbar .fi-user-avatar,
.fi-topbar .fi-avatar,
.fi-topbar img.fi-avatar {
  width: 32px !important;
  height: 32px !important;
  border-radius: 50% !important;
  border: 2px solid rgba(255, 255, 255, 0.6) !important;
  background-color: #ffffff !important;
  object-fit: cover !important;
}

/* If avatar is default/placeholder, show initials background */
.fi-topbar .fi-avatar[src*="ui-avatars"],
.fi-topbar .fi-avatar:not([src]),
.fi-topbar .fi-avatar[src=""] {
  background-color: #fbbf24 !important;
}

/* Dropdown trigger button in header */
.fi-topbar .fi-dropdown > button,
.fi-topbar button.fi-user-menu-trigger {
  color: #ffffff !important;
  background: transparent !important;
  border: none !important;
  cursor: pointer !important;
}

.fi-topbar .fi-dropdown > button:hover {
  background: rgba(255, 255, 255, 0.1) !important;
  border-radius: 6px !important;
}

/* Breadcrumbs in header */
.fi-topbar .fi-breadcrumbs,
.fi-topbar [class*="breadcrumb"] {
  color: rgba(255, 255, 255, 0.9) !important;
}

.fi-topbar .fi-breadcrumbs a {
  color: rgba(255, 255, 255, 0.7) !important;
}

.fi-topbar .fi-breadcrumbs a:hover {
  color: #ffffff !important;
}

/* Global search in header */
.fi-topbar .fi-global-search-input,
.fi-topbar input[type="search"] {
  background: rgba(255, 255, 255, 0.1) !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  color: #ffffff !important;
}

.fi-topbar .fi-global-search-input::placeholder {
  color: rgba(255, 255, 255, 0.6) !important;
}

.fi-topbar .fi-global-search-input:focus {
  background: rgba(255, 255, 255, 0.15) !important;
  border-color: rgba(255, 255, 255, 0.4) !important;
}

/* Ensure topbar container has blue bg */
.fi-layout .fi-topbar,
.fi-main-ctn .fi-topbar,
body .fi-topbar {
  background: #1e3a8a !important;
}

/* ============================================
   PHASE 2: SIDEBAR
   ============================================ */

/* Sidebar Container - compact width */
.fi-sidebar {
  background: var(--gp-gray-50) !important;
  border-right: 1px solid var(--gp-gray-200) !important;
  width: 200px !important;
  min-width: 200px !important;
  max-width: 200px !important;
}

/* Sidebar Nav - no side padding, items go edge to edge */
.fi-sidebar-nav {
  background: var(--gp-gray-50) !important;
  width: 200px !important;
  padding: 8px 0 !important;
}

/* Reset Filament's margins and ensure full width on all sidebar elements */
.fi-sidebar-nav ul,
.fi-sidebar-nav > ul,
.fi-sidebar-nav li,
.fi-sidebar-nav > ul > li {
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  width: 200px !important;
  max-width: 200px !important;
}

/* Sidebar Header - hide since logo is in topbar */
.fi-sidebar-header {
  display: none !important;
}

/* Sidebar item container - full width */
.fi-sidebar-item {
  width: 200px !important;
  max-width: 200px !important;
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Sidebar Item Buttons - full width, minimal padding */
.fi-sidebar-item-btn {
  color: var(--gp-gray-700) !important;
  font-size: 13px !important;
  font-weight: 400 !important;
  padding: 9px 8px 9px 12px !important;
  border-radius: 0 !important;
  margin: 0 !important;
  width: 200px !important;
  max-width: 200px !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  border-left: 3px solid transparent !important;
  box-sizing: border-box !important;
}

.fi-sidebar-item-label {
  color: var(--gp-gray-700) !important;
  font-size: 13px !important;
}

.fi-sidebar-item-btn .fi-icon {
  color: var(--gp-gray-500) !important;
  width: 18px !important;
  height: 18px !important;
  flex-shrink: 0 !important;
}

/* Sidebar Hover State */
.fi-sidebar-item-btn:hover {
  background: var(--gp-gray-200) !important;
}

.fi-sidebar-item-btn:hover .fi-sidebar-item-label,
.fi-sidebar-item-btn:hover .fi-icon {
  color: var(--gp-gray-800) !important;
}

/* Sidebar Active State - full width with left accent */
.fi-sidebar-item.fi-active > .fi-sidebar-item-btn {
  background: var(--gp-blue) !important;
  border-left: 3px solid var(--gp-yellow) !important;
  border-radius: 0 !important;
}

.fi-sidebar-item.fi-active .fi-sidebar-item-label,
.fi-sidebar-item.fi-active .fi-icon {
  color: var(--gp-white) !important;
}

/* Sidebar Group Labels */
.fi-sidebar-group-label {
  color: var(--gp-gray-500) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  padding: 12px 16px 6px !important;
}

/* Sidebar Group Collapse Button */
.fi-sidebar-group-btn {
  color: var(--gp-gray-500) !important;
}

/* ============================================
   PHASE 3: BUTTONS - Colorful & Vibrant
   ============================================ */

/* Primary Button - Blue */
.fi-btn-primary,
.fi-btn[wire\:click*="create"],
.fi-btn.fi-color-primary,
button[type="submit"].fi-btn {
  background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%) !important;
  border: none !important;
  color: #ffffff !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  padding: 6px 14px !important;
  border-radius: 6px !important;
  height: 34px !important;
  box-shadow: 0 2px 4px rgba(37, 99, 235, 0.3) !important;
  transition: all 0.2s ease !important;
}

.fi-btn-primary span,
.fi-btn[wire\:click*="create"] span,
.fi-btn.fi-color-primary span,
button[type="submit"].fi-btn span {
  color: #ffffff !important;
}

.fi-btn-primary svg,
.fi-btn[wire\:click*="create"] svg,
.fi-btn.fi-color-primary svg,
button[type="submit"].fi-btn svg {
  color: #ffffff !important;
  stroke: #ffffff !important;
}

.fi-btn-primary:hover,
.fi-btn[wire\:click*="create"]:hover,
.fi-btn.fi-color-primary:hover,
button[type="submit"].fi-btn:hover {
  background: linear-gradient(135deg, #1d4ed8 0%, #1e40af 100%) !important;
  box-shadow: 0 4px 8px rgba(37, 99, 235, 0.4) !important;
  transform: translateY(-1px) !important;
}

/* Info Button - Cyan */
.fi-btn-info,
.fi-btn.fi-color-info,
[class*="fi-ac-btn-action"][class*="info"] {
  background: linear-gradient(135deg, #06b6d4 0%, #0891b2 100%) !important;
  border: none !important;
  color: var(--gp-white) !important;
  box-shadow: 0 2px 4px rgba(6, 182, 212, 0.3) !important;
}

.fi-btn-info:hover,
.fi-btn.fi-color-info:hover {
  background: linear-gradient(135deg, #0891b2 0%, #0e7490 100%) !important;
  box-shadow: 0 4px 8px rgba(6, 182, 212, 0.4) !important;
}

/* Success Button - Green */
.fi-btn-success,
.fi-btn.fi-color-success,
[class*="fi-ac-btn-action"][class*="success"] {
  background: linear-gradient(135deg, #10b981 0%, #059669 100%) !important;
  border: none !important;
  color: var(--gp-white) !important;
  box-shadow: 0 2px 4px rgba(16, 185, 129, 0.3) !important;
}

.fi-btn-success:hover,
.fi-btn.fi-color-success:hover {
  background: linear-gradient(135deg, #059669 0%, #047857 100%) !important;
  box-shadow: 0 4px 8px rgba(16, 185, 129, 0.4) !important;
}

/* Warning Button - Amber */
.fi-btn-warning,
.fi-btn.fi-color-warning {
  background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%) !important;
  border: none !important;
  color: var(--gp-white) !important;
  box-shadow: 0 2px 4px rgba(245, 158, 11, 0.3) !important;
}

.fi-btn-warning:hover,
.fi-btn.fi-color-warning:hover {
  background: linear-gradient(135deg, #d97706 0%, #b45309 100%) !important;
  box-shadow: 0 4px 8px rgba(245, 158, 11, 0.4) !important;
}

/* Danger Button - Red */
.fi-btn-danger,
.fi-btn.fi-color-danger,
.fi-btn[wire\:click*="delete"] {
  background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%) !important;
  border: none !important;
  color: var(--gp-white) !important;
  box-shadow: 0 2px 4px rgba(239, 68, 68, 0.3) !important;
}

.fi-btn-danger:hover,
.fi-btn.fi-color-danger:hover,
.fi-btn[wire\:click*="delete"]:hover {
  background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%) !important;
  box-shadow: 0 4px 8px rgba(239, 68, 68, 0.4) !important;
}

/* Secondary/Gray Button */
.fi-btn-secondary,
.fi-btn.fi-color-gray {
  background: var(--gp-white) !important;
  border: 1px solid var(--gp-gray-300) !important;
  color: var(--gp-gray-700) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  padding: 6px 14px !important;
  border-radius: 6px !important;
  height: 34px !important;
  transition: all 0.2s ease !important;
}

.fi-btn-secondary:hover,
.fi-btn.fi-color-gray:hover {
  background: var(--gp-gray-50) !important;
  border-color: var(--gp-blue-light) !important;
  color: var(--gp-blue) !important;
}

/* Action buttons in header */
.fi-header-actions .fi-btn {
  font-size: 13px !important;
  font-weight: 500 !important;
  padding: 6px 14px !important;
  border-radius: 6px !important;
  height: 34px !important;
}

/* Edit button - make it blue outlined */
.fi-header-actions .fi-btn[href*="edit"],
.fi-ac-action[wire\:click*="mountAction('edit')"] .fi-btn {
  background: var(--gp-white) !important;
  border: 1px solid #2563eb !important;
  color: #2563eb !important;
}

.fi-header-actions .fi-btn[href*="edit"]:hover {
  background: #eff6ff !important;
  border-color: #1d4ed8 !important;
}

/* Button with icon */
.fi-btn .fi-icon,
.fi-btn svg {
  width: 16px !important;
  height: 16px !important;
}

/* Action Group Buttons */
.fi-ac-group-btn {
  background: var(--gp-white) !important;
  border: 1px solid var(--gp-gray-300) !important;
  border-radius: 6px !important;
  padding: 6px 12px !important;
  font-size: 13px !important;
  transition: all 0.2s ease !important;
}

.fi-ac-group-btn:hover {
  background: var(--gp-gray-50) !important;
  border-color: var(--gp-blue-light) !important;
}

/* ============================================
   PHASE 4: FORM ELEMENTS
   ============================================ */

/* Text Inputs */
.fi-input,
.fi-input-wrp input,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="search"] {
  height: 32px !important;
  padding: 6px 10px !important;
  font-size: 13px !important;
  border: 1px solid var(--gp-gray-300) !important;
  border-radius: 4px !important;
  background: var(--gp-white) !important;
  color: var(--gp-gray-800) !important;
}

.fi-input:focus,
.fi-input-wrp input:focus,
input:focus {
  border-color: var(--gp-blue-light) !important;
  box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.2) !important;
  outline: none !important;
}

.fi-input::placeholder,
input::placeholder {
  color: var(--gp-gray-400) !important;
}

/* Select Dropdowns */
.fi-select,
select {
  height: 32px !important;
  padding: 6px 28px 6px 10px !important;
  font-size: 13px !important;
  border: 1px solid var(--gp-gray-300) !important;
  border-radius: 4px !important;
  background: var(--gp-white) !important;
}

.fi-select:focus,
select:focus {
  border-color: var(--gp-blue-light) !important;
  box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.2) !important;
}

/* Textarea */
.fi-textarea,
textarea {
  padding: 8px 10px !important;
  font-size: 13px !important;
  border: 1px solid var(--gp-gray-300) !important;
  border-radius: 4px !important;
}

.fi-textarea:focus,
textarea:focus {
  border-color: var(--gp-blue-light) !important;
  box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.2) !important;
}

/* Checkboxes */
.fi-checkbox-input,
input[type="checkbox"] {
  width: 16px !important;
  height: 16px !important;
  border: 1px solid var(--gp-gray-300) !important;
  border-radius: 3px !important;
}

.fi-checkbox-input:checked,
input[type="checkbox"]:checked {
  background-color: var(--gp-blue) !important;
  border-color: var(--gp-blue) !important;
}

/* Labels */
.fi-fo-field-wrp-label,
label {
  font-size: 12px !important;
  font-weight: 500 !important;
  color: var(--gp-gray-600) !important;
  margin-bottom: 4px !important;
}

/* Helper Text */
.fi-fo-field-wrp-helper-text {
  font-size: 11px !important;
  color: var(--gp-gray-500) !important;
}

/* ============================================
   PHASE 5: DATA TABLES - Clean with Padding
   ============================================ */

/* Table Page Container - Add padding */
.fi-page-content > div {
  padding: 16px !important;
}

/* Table Main Container - with border and padding */
.fi-ta {
  background: var(--gp-white) !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 8px !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05) !important;
  overflow: hidden !important;
}

/* Table Content Container */
.fi-ta-ctn {
  background: var(--gp-white) !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

/* Table Content Area with Horizontal Scroll */
.fi-ta-content-ctn {
  overflow-x: auto !important;
  border: none !important;
  border-radius: 0 !important;
}

/* Table Element */
.fi-ta-table {
  width: 100% !important;
  border-collapse: collapse !important;
  border: none !important;
}

/* Table Header Row */
.fi-ta-table > thead > tr {
  background: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%) !important;
  border-bottom: 1px solid #e2e8f0 !important;
}

/* Table Header Cells - Clean Style with More Padding */
.fi-ta-header-cell {
  background: transparent !important;
  border: none !important;
  border-bottom: 1px solid #e2e8f0 !important;
  padding: 12px 16px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  color: #475569 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  white-space: nowrap !important;
  vertical-align: middle !important;
  border-radius: 0 !important;
}

/* Header cell with sort - dropdown arrow indicator */
.fi-ta-header-cell-sort-btn {
  color: #475569 !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  gap: 4px !important;
}

.fi-ta-header-cell-sort-btn .fi-icon {
  width: 12px !important;
  height: 12px !important;
  color: #64748b !important;
}

/* Table Body */
.fi-ta-table > tbody {
  background: var(--gp-white) !important;
}

/* Table Rows - More Padding */
.fi-ta-row {
  border-bottom: 1px solid #f1f5f9 !important;
  background: var(--gp-white) !important;
  transition: background-color 0.15s ease !important;
}

.fi-ta-row:hover {
  background: #f8fafc !important;
}

/* Alternate row colors for better readability */
.fi-ta-row:nth-child(even) {
  background: #fafbfc !important;
}

.fi-ta-row:nth-child(even):hover {
  background: #f1f5f9 !important;
}

/* Selected Row - Blue highlight */
.fi-ta-row.fi-selected {
  background: #eff6ff !important;
  border-left: 3px solid #2563eb !important;
}

.fi-ta-row.fi-selected:hover {
  background: #dbeafe !important;
}

.fi-ta-row.fi-selected > *:first-child::before {
  background: var(--gp-blue) !important;
}

/* Table Cells - More Padding */
.fi-ta-cell {
  padding: 0 !important;
  font-size: 13px !important;
  color: #334155 !important;
  vertical-align: middle !important;
  border-bottom: none !important;
}

/* Column wrapper inside cell - More Padding */
.fi-ta-cell > .fi-ta-col {
  padding: 12px 16px !important;
  font-size: 13px !important;
  line-height: 1.5 !important;
}

/* Text columns */
.fi-ta-text {
  font-size: 13px !important;
  color: #334155 !important;
}

.fi-ta-text-item {
  font-size: 13px !important;
}

/* Links in table - Blue color */
.fi-ta-cell a,
.fi-ta-text a,
.fi-ta-text-item a {
  color: #2563eb !important;
  text-decoration: none !important;
  font-weight: 500 !important;
}

.fi-ta-cell a:hover,
.fi-ta-text a:hover,
.fi-ta-text-item a:hover {
  color: #1d4ed8 !important;
  text-decoration: underline !important;
}

.fi-ta-cell a:hover,
.fi-ta-text a:hover,
.fi-ta-text-item a:hover {
  color: #004499 !important;
  text-decoration: underline !important;
}

/* Checkbox Column */
.fi-ta-cell:has(.fi-ta-record-checkbox),
.fi-ta-selection-cell {
  width: 32px !important;
  padding: 8px 8px 8px 12px !important;
}

.fi-ta-record-checkbox {
  margin: 0 !important;
}

/* Actions Column */
.fi-ta-cell:has(.fi-ta-actions) {
  padding: 4px 8px !important;
}

/* Icon Columns */
.fi-ta-icon-item {
  width: 16px !important;
  height: 16px !important;
}

.fi-ta-icon-item-icon {
  width: 16px !important;
  height: 16px !important;
}

/* Boolean Icons */
.fi-ta-cell .fi-icon {
  width: 16px !important;
  height: 16px !important;
}

/* Table Footer */
.fi-ta-table > tfoot {
  background: #f5f5f5 !important;
}

/* ============================================
   TABLE PAGINATION - ShipStation Style
   ============================================ */

/* Pagination Container */
.fi-ta-pagination {
  background: var(--gp-white) !important;
  border-top: 1px solid var(--gp-gray-200) !important;
  padding: 8px 12px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  font-size: 12px !important;
  color: #666666 !important;
}

/* Pagination Info - "Viewing 1 - 12 of 12" */
.fi-ta-pagination-records-count,
.fi-ta-pagination .fi-ta-pagination-records-count {
  font-size: 12px !important;
  color: #666666 !important;
}

/* Per Page Select */
.fi-ta-pagination-records-per-page-select {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}

.fi-ta-pagination-records-per-page-select select {
  height: 28px !important;
  padding: 4px 24px 4px 8px !important;
  font-size: 12px !important;
  border: 1px solid #d0d0d0 !important;
  border-radius: 0 !important;
  background: var(--gp-white) !important;
}

/* Pagination Buttons */
.fi-ta-pagination-btn {
  height: 28px !important;
  min-width: 28px !important;
  padding: 0 8px !important;
  font-size: 12px !important;
  border: 1px solid #d0d0d0 !important;
  border-radius: 0 !important;
  background: var(--gp-white) !important;
  color: #333333 !important;
}

.fi-ta-pagination-btn:hover:not(:disabled) {
  background: #f5f5f5 !important;
  border-color: var(--gp-gray-400) !important;
}

.fi-ta-pagination-btn:disabled {
  opacity: 0.5 !important;
  cursor: not-allowed !important;
}

/* Empty State */
.fi-ta-empty-state {
  padding: 48px 24px !important;
  text-align: center !important;
}

.fi-ta-empty-state-heading {
  font-size: 16px !important;
  font-weight: 600 !important;
  color: var(--gp-gray-700) !important;
}

.fi-ta-empty-state-description {
  font-size: 13px !important;
  color: var(--gp-gray-500) !important;
}

/* ============================================
   TABLE CONTAINER STYLING - Clean with Padding
   ============================================ */

/* Table container with subtle border and rounded corners */
.fi-ta-ctn,
div.fi-ta-ctn,
[class*="fi-ta-ctn"] {
  border: 1px solid #e2e8f0 !important;
  border-radius: 8px !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05) !important;
  overflow: hidden !important;
  --tw-ring-shadow: 0 0 #0000 !important;
  --tw-ring-offset-shadow: 0 0 #0000 !important;
}

/* Override Tailwind utilities */
.fi-ta-ctn.rounded-xl {
  border-radius: 8px !important;
}

.fi-ta-ctn.shadow-sm {
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05) !important;
}

.fi-ta-ctn.ring-1 {
  --tw-ring-shadow: 0 0 #0000 !important;
}

/* Override all possible Tailwind ring utilities on table */
.fi-ta[class*="ring"],
.fi-ta-ctn[class*="ring"],
[class*="fi-ta"][class*="ring"],
.ring-1.fi-ta-ctn,
.ring-gray-950\/5.fi-ta-ctn {
  --tw-ring-shadow: 0 0 #0000 !important;
  --tw-ring-offset-shadow: 0 0 #0000 !important;
}

/* Override all possible Tailwind rounded utilities on table */
.fi-ta[class*="rounded"],
.fi-ta-ctn[class*="rounded"],
[class*="fi-ta"][class*="rounded"],
.rounded-xl.fi-ta-ctn {
  border-radius: 8px !important;
}

/* Override all shadow utilities */
.fi-ta[class*="shadow"],
.fi-ta-ctn[class*="shadow"],
.shadow-sm.fi-ta-ctn {
  box-shadow: none !important;
  --tw-shadow: 0 0 #0000 !important;
}

/* ============================================
   PHASE 6: ACTION & FILTER BARS - ShipStation Style
   ============================================ */

/* Table Header Container (above the table) */
.fi-ta-header {
  background: var(--gp-white) !important;
  padding: 0 !important;
  border-bottom: none !important;
}

/* Header Toolbar - Contains search, actions, filters */
.fi-ta-header-toolbar {
  display: flex !important;
  flex-direction: column !important;
  gap: 0 !important;
  padding: 0 !important;
  background: var(--gp-white) !important;
  border-bottom: 1px solid var(--gp-gray-200) !important;
}

/* Actions Row (Print, Void Label, etc.) */
.fi-ta-header-toolbar-actions {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 10px 12px !important;
  border-bottom: 1px solid var(--gp-gray-200) !important;
  background: var(--gp-white) !important;
}

/* Action Buttons Style */
.fi-ta-header-toolbar .fi-btn,
.fi-ta-header-toolbar button {
  height: 30px !important;
  padding: 0 12px !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  border: 1px solid #d0d0d0 !important;
  border-radius: 3px !important;
  background: var(--gp-white) !important;
  color: #333333 !important;
  white-space: nowrap !important;
}

.fi-ta-header-toolbar .fi-btn:hover,
.fi-ta-header-toolbar button:hover {
  background: #f5f5f5 !important;
  border-color: #b0b0b0 !important;
}

/* Primary action buttons (like Export) */
.fi-ta-header-toolbar .fi-btn-primary,
.fi-ta-header-toolbar .fi-btn.fi-btn-primary {
  background: var(--gp-white) !important;
  color: #333333 !important;
  border: 1px solid #d0d0d0 !important;
}

/* Search and Filter Row */
.fi-ta-header-toolbar-search-and-filters {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 8px 12px !important;
  background: var(--gp-white) !important;
  flex-wrap: wrap !important;
}

/* "Filter By:" Label - Add via CSS or component */
.fi-ta-filters-container::before {
  content: "Filter By:" !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  color: #666666 !important;
  margin-right: 8px !important;
}

/* Search Input in Table */
.fi-ta-search-field {
  order: -1 !important;
  flex: 0 0 200px !important;
}

.fi-ta-search-input,
.fi-ta-search-field input {
  height: 28px !important;
  padding: 4px 10px 4px 32px !important;
  font-size: 12px !important;
  border: 1px solid #d0d0d0 !important;
  border-radius: 3px !important;
  background: var(--gp-white) !important;
}

.fi-ta-search-input:focus,
.fi-ta-search-field input:focus {
  border-color: var(--gp-blue-light) !important;
  box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.15) !important;
}

/* Filter Buttons - ShipStation dropdown style */
.fi-ta-filters-btn,
.fi-ta-toggle-column-trigger-btn,
.fi-ta-header-toolbar [class*="filter"] button {
  height: 28px !important;
  padding: 0 10px !important;
  font-size: 12px !important;
  font-weight: 400 !important;
  border: 1px solid #d0d0d0 !important;
  border-radius: 3px !important;
  background: var(--gp-white) !important;
  color: #333333 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
}

.fi-ta-filters-btn:hover,
.fi-ta-toggle-column-trigger-btn:hover {
  background: #f5f5f5 !important;
  border-color: #b0b0b0 !important;
}

/* Active Filter Button (when filter is applied) */
.fi-ta-filters-btn[data-active="true"],
.fi-ta-filters-btn.fi-active,
.fi-ta-header-toolbar button[aria-expanded="true"] {
  background: #e8f0fe !important;
  border-color: #4a90d9 !important;
  color: #1a5dad !important;
}

/* Filter Dropdown Indicator */
.fi-ta-filters-btn::after,
.fi-ta-toggle-column-trigger-btn .fi-icon {
  content: "" !important;
  width: 0 !important;
  height: 0 !important;
  border-left: 4px solid transparent !important;
  border-right: 4px solid transparent !important;
  border-top: 4px solid #666666 !important;
  margin-left: 4px !important;
}

/* Filter Dropdown Panel */
.fi-ta-filters {
  background: var(--gp-white) !important;
  border: 1px solid var(--gp-gray-200) !important;
  border-radius: 4px !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
  padding: 12px !important;
  min-width: 200px !important;
}

/* Filter Form in Panel */
.fi-ta-filters .fi-fo-field-wrp {
  margin-bottom: 8px !important;
}

.fi-ta-filters .fi-fo-field-wrp:last-child {
  margin-bottom: 0 !important;
}

/* Clear Filters Link - ShipStation Red X style */
.fi-ta-clear-filters-btn {
  color: #cc0000 !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  margin-left: 8px !important;
  text-decoration: none !important;
}

.fi-ta-clear-filters-btn::before {
  content: "✕" !important;
  font-size: 10px !important;
  font-weight: bold !important;
}

.fi-ta-clear-filters-btn:hover {
  color: #990000 !important;
  text-decoration: underline !important;
}

/* Column Toggle Button */
.fi-ta-toggle-column-trigger-btn {
  order: 100 !important;
}

/* Bulk Actions Dropdown */
.fi-ta-bulk-actions {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
}

.fi-ta-bulk-actions-btn {
  height: 28px !important;
  padding: 0 10px !important;
  font-size: 12px !important;
  border: 1px solid #d0d0d0 !important;
  border-radius: 3px !important;
  background: var(--gp-white) !important;
}

/* ============================================
   PHASE 6B: TABS & PAGE LAYOUT - ShipStation Style
   ============================================ */

/* Page Title Area */
.fi-header {
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}

/* Page Header Container */
.fi-header-heading {
  font-size: 18px !important;
  font-weight: 600 !important;
  color: #333333 !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}

/* Tabs Container (like ShipStation's "All" tab) */
.fi-tabs {
  display: flex !important;
  align-items: center !important;
  gap: 0 !important;
  border-bottom: 1px solid var(--gp-gray-200) !important;
  background: var(--gp-white) !important;
  margin-bottom: 0 !important;
}

.fi-tabs-nav {
  display: flex !important;
  gap: 0 !important;
}

/* Individual Tab */
.fi-tabs-tab {
  padding: 10px 16px !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  color: #666666 !important;
  border-bottom: 2px solid transparent !important;
  background: transparent !important;
  transition: all 0.15s ease !important;
  cursor: pointer !important;
}

.fi-tabs-tab:hover {
  color: #333333 !important;
  background: #f5f5f5 !important;
}

/* Active Tab */
.fi-tabs-tab.fi-active,
.fi-tabs-tab[aria-selected="true"] {
  color: #1a5dad !important;
  border-bottom: 2px solid #1a5dad !important;
  background: transparent !important;
}

/* Columns Button (right side) */
.fi-ta-toggle-column-trigger-btn,
button[data-toggle="columns"] {
  position: relative !important;
  margin-left: auto !important;
  color: #0066cc !important;
  font-size: 12px !important;
  background: transparent !important;
  border: none !important;
  padding: 4px 8px !important;
}

.fi-ta-toggle-column-trigger-btn:hover {
  text-decoration: underline !important;
  background: transparent !important;
  border: none !important;
}

/* Table Container - No outer border anywhere */
.fi-page .fi-ta,
.fi-main .fi-ta,
.fi-ta,
.fi-ta-ctn {
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

/* Horizontal Scrollbar styling */
.fi-ta-content-ctn::-webkit-scrollbar {
  height: 10px !important;
}

.fi-ta-content-ctn::-webkit-scrollbar-track {
  background: #f1f1f1 !important;
}

.fi-ta-content-ctn::-webkit-scrollbar-thumb {
  background: #c1c1c1 !important;
  border-radius: 0 !important;
}

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

/* ============================================
   PHASE 6C: INLINE FILTERS - ShipStation Style
   ============================================ */

/* Inline filters row */
.fi-ta-header-toolbar > div {
  display: flex !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  padding: 8px 12px !important;
}

/* Filter groups inline */
.fi-ta-filters-dropdown {
  display: inline-flex !important;
  align-items: center !important;
}

/* Make select filters look like ShipStation dropdowns */
.fi-ta-header-toolbar select,
.fi-ta .fi-select-input {
  height: 28px !important;
  padding: 4px 28px 4px 10px !important;
  font-size: 12px !important;
  border: 1px solid #d0d0d0 !important;
  border-radius: 0 !important;
  background: var(--gp-white) !important;
  color: #333333 !important;
  appearance: none !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23666666' d='M6 8L2 4h8z'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 8px center !important;
}

.fi-ta-header-toolbar select:hover,
.fi-ta .fi-select-input:hover {
  border-color: #b0b0b0 !important;
}

.fi-ta-header-toolbar select:focus,
.fi-ta .fi-select-input:focus {
  border-color: #4a90d9 !important;
  outline: none !important;
  box-shadow: 0 0 0 2px rgba(74, 144, 217, 0.2) !important;
}

/* ============================================
   PHASE 7: TYPOGRAPHY & SPACING
   ============================================ */

/* Base Typography */
body {
  font-family: var(--gp-font-family) !important;
  font-size: 13px !important;
  color: var(--gp-gray-700) !important;
}

/* Page Title */
.fi-header-heading {
  font-size: 20px !important;
  font-weight: 600 !important;
  color: var(--gp-gray-800) !important;
}

/* Section Titles */
.fi-section-header-heading {
  font-size: 16px !important;
  font-weight: 600 !important;
  color: var(--gp-gray-800) !important;
}

/* Main Content Area - Full width, no right-side gap */
.fi-main {
  background: var(--gp-white) !important;
  padding: 12px 0 12px 0 !important;
  margin: 0 !important;
  max-width: 100% !important;
  width: 100% !important;
}

/* Override Filament's default padding on main content */
.fi-main.px-4,
.fi-main.md\:px-6,
.fi-main.lg\:px-8 {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* Main content container - full width */
.fi-main-ctn {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
}

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

/* Table should span full width */
.fi-ta {
  width: 100% !important;
  max-width: 100% !important;
}

/* Header area - full width with small padding */
.fi-header {
  padding: 12px 16px !important;
  margin: 0 !important;
}

/* Layout wrapper - full width */
.fi-layout {
  width: 100% !important;
  max-width: 100% !important;
}

/* Body - full width */
.fi-body {
  width: 100% !important;
  max-width: 100% !important;
  overflow-x: hidden !important;
}

/* Ensure content stretches edge to edge */
.fi-ta-ctn,
.fi-ta-content-ctn,
.fi-ta-header-toolbar {
  width: 100% !important;
  max-width: 100% !important;
}

/* Cards - Flat design, no rounded corners */
.fi-section,
.fi-card {
  background: var(--gp-white) !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

/* ============================================
   PHASE 8: POLISH & MISC
   ============================================ */

/* Badges */
.fi-badge {
  font-size: 11px !important;
  font-weight: 600 !important;
  padding: 2px 8px !important;
  border-radius: 2px !important;
}

.fi-badge-success {
  background: #d1fae5 !important;
  color: #065f46 !important;
}

.fi-badge-warning {
  background: #fef3c7 !important;
  color: #92400e !important;
}

.fi-badge-danger {
  background: #fee2e2 !important;
  color: #991b1b !important;
}

.fi-badge-info {
  background: #dbeafe !important;
  color: #1e40af !important;
}

/* Dropdowns */
.fi-dropdown-panel {
  border: 1px solid var(--gp-gray-200) !important;
  border-radius: 4px !important;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1) !important;
  background: var(--gp-white) !important;
}

/* Dropdown panel text - reset from topbar white text */
.fi-dropdown-panel,
.fi-dropdown-panel *,
.fi-dropdown-panel span,
.fi-dropdown-panel button,
.fi-dropdown-panel a,
.fi-dropdown-panel svg {
  color: var(--gp-gray-700) !important;
}

.fi-dropdown-panel svg {
  stroke: var(--gp-gray-500) !important;
}

/* Dropdown header */
.fi-dropdown-header {
  padding: 12px 16px !important;
  border-bottom: 1px solid var(--gp-gray-200) !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}

.fi-dropdown-header span {
  font-weight: 500 !important;
  color: var(--gp-gray-800) !important;
}

/* Dropdown list items */
.fi-dropdown-list {
  padding: 4px 0 !important;
}

.fi-dropdown-list-item {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 8px 16px !important;
  width: 100% !important;
  text-align: left !important;
  color: var(--gp-gray-700) !important;
  background: transparent !important;
  border: none !important;
  cursor: pointer !important;
  font-size: 13px !important;
}

.fi-dropdown-list-item:hover {
  background: var(--gp-gray-100) !important;
}

.fi-dropdown-list-item svg {
  width: 16px !important;
  height: 16px !important;
  color: var(--gp-gray-500) !important;
  fill: var(--gp-gray-500) !important;
}

/* Dropdown list item label - specifically target the text span */
.fi-dropdown-list-item-label,
.fi-dropdown-list-item span,
.fi-dropdown-panel .fi-dropdown-list-item-label,
span.fi-dropdown-list-item-label {
  color: var(--gp-gray-700) !important;
}

/* Override any inherited white text from topbar */
body .fi-dropdown-panel .fi-dropdown-list-item,
body .fi-dropdown-panel .fi-dropdown-list-item span,
body .fi-dropdown-panel .fi-dropdown-list-item-label {
  color: #334155 !important;
}

/* Modals - hide by default, Alpine.js x-show will override with inline display */
.fi-modal {
  border-radius: 4px !important;
  display: none !important;
}

/* When modal is explicitly opened by Alpine.js, it adds fi-modal-open class */
.fi-modal.fi-modal-open {
  display: block !important;
}

/* Ensure modal close overlay never shows unless modal is open */
.fi-modal-close-overlay {
  display: none !important;
}

.fi-modal.fi-modal-open > .fi-modal-close-overlay {
  display: block !important;
}

/* Ensure modal window container shows when modal is open */
.fi-modal-window-ctn {
  display: none !important;
}

.fi-modal.fi-modal-open > .fi-modal-window-ctn {
  display: grid !important;
}

.fi-modal-header {
  border-bottom: 1px solid var(--gp-gray-200) !important;
}

.fi-modal-footer {
  border-top: 1px solid var(--gp-gray-200) !important;
}

/* Fix notification badge clipping in topbar */
.fi-topbar-ctn {
  overflow: visible !important;
}

/* Remove white background from notification badge container and shift badge down */
.fi-topbar .fi-icon-btn-badge-ctn {
  background: transparent !important;
  top: 0.6rem !important;
  transform: translateX(-50%) !important;
}

/* Notification Bell Badge - Override topbar white text for visibility */
.fi-topbar .fi-icon-btn-badge-ctn .fi-badge,
.fi-topbar .fi-topbar-database-notifications-btn .fi-badge {
  background: #ef4444 !important;
  color: #ffffff !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  min-width: 18px !important;
  height: 18px !important;
  padding: 0 5px !important;
  border-radius: 9px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 1 !important;
  border: 2px solid #1e3a8a !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3) !important;
}

/* Notifications */
.fi-notification {
  border-radius: 4px !important;
}

/* Links (exclude custom page components that define their own colours) */
a:not([class*="cart-"]):not([class*="qt-"]):not([class*="co-"]) {
  color: var(--gp-blue-light) !important;
}

a:not([class*="cart-"]):not([class*="qt-"]):not([class*="co-"]):hover {
  color: var(--gp-blue) !important;
}

/* Widget styling */
.fi-widget {
  background: var(--gp-white) !important;
  border: 1px solid var(--gp-gray-200) !important;
  border-radius: 4px !important;
}

/* Stats Overview Widget */
.fi-wi-stats-overview-stat {
  border-right: 1px solid var(--gp-gray-200) !important;
}

.fi-wi-stats-overview-stat:last-child {
  border-right: none !important;
}

/* Account Widget */
.fi-wi-account-widget {
  background: var(--gp-white) !important;
}

/* ============================================
   CUSTOM TOP NAVIGATION BAR (ShipStation Style)
   ============================================ */

/* Show Filament logo in topbar - white on dark blue */
.fi-topbar .fi-logo,
.fi-topbar [class*="fi-logo"] {
  display: flex !important;
  align-items: center !important;
}

/* But NOT our custom logo */
.gp-logo {
  display: flex !important;
}

/* Main Navigation Container - integrates into Filament topbar */
.gp-topbar-nav {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  height: 100% !important;
  flex: 1 !important;
  margin-left: 0 !important;
}

.gp-topbar-nav-inner {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: space-between !important;
  height: 100% !important;
  width: 100% !important;
}

/* Custom Logo in our nav */
.gp-logo {
  display: flex !important;
  align-items: center !important;
  height: 100% !important;
  padding: 0 16px !important;
  margin-right: 8px !important;
}

.gp-logo img {
  height: 28px !important;
  width: auto !important;
  filter: brightness(0) invert(1) !important;
}

/* Navigation Items Container */
.gp-nav-items {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 0 !important;
  height: 100% !important;
}

/* Right side - settings button */
.gp-nav-right {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  margin-left: auto !important;
  margin-right: 8px !important;
}

/* Individual Navigation Item */
.gp-nav-item {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 5px !important;
  padding: 0 12px !important;
  height: 100% !important;
  color: rgba(255, 255, 255, 0.9) !important;
  text-decoration: none !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  transition: all 0.15s ease !important;
  border-bottom: 2px solid transparent !important;
  background: transparent !important;
  white-space: nowrap !important;
}

.gp-nav-item:hover {
  color: #ffffff !important;
  background: rgba(255, 255, 255, 0.1) !important;
}

.gp-nav-item.active {
  color: #ffffff !important;
  background: rgba(255, 255, 255, 0.15) !important;
  border-bottom: 2px solid #fbbf24 !important;
}

.gp-nav-icon {
  width: 16px !important;
  height: 16px !important;
  min-width: 16px !important;
  min-height: 16px !important;
  max-width: 16px !important;
  max-height: 16px !important;
  stroke: currentColor !important;
  flex-shrink: 0 !important;
}

.gp-nav-item span {
  font-size: 13px !important;
  line-height: 1 !important;
}

/* Settings Button */
.gp-settings-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 6px;
  background: transparent;
  border: none;
  cursor: pointer;
  color: rgba(255, 255, 255, 0.85);
  transition: all 0.15s ease;
}

.gp-settings-btn:hover {
  background: rgba(255, 255, 255, 0.15);
  color: #ffffff;
}

.gp-settings-btn.active {
  background: rgba(255, 255, 255, 0.2);
  color: #ffffff;
}

.gp-settings-btn svg {
  width: 20px;
  height: 20px;
  stroke: currentColor;
}

/* Ensure sidebar overlay never blocks the page on desktop */
.fi-sidebar-close-overlay {
  display: none !important;
}

/* Settings Overlay */
.gp-settings-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.3);
  z-index: 50;
}

/* Settings Sidebar */
.gp-settings-sidebar {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: 280px;
  background: #ffffff;
  box-shadow: -4px 0 12px rgba(0, 0, 0, 0.15);
  z-index: 51;
  display: flex;
  flex-direction: column;
}

.gp-settings-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid #e2e8f0;
  background: #f8fafc;
}

/* Settings header text - override topbar white */
.gp-settings-sidebar .gp-settings-header h3,
.gp-settings-header h3 {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  color: #1e293b !important;
}

.gp-settings-close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 6px;
  background: transparent;
  border: none;
  cursor: pointer;
  color: #64748b !important;
  transition: all 0.15s ease;
}

.gp-settings-close:hover {
  background: #e2e8f0;
  color: #334155 !important;
}

.gp-settings-sidebar .gp-settings-close svg,
.gp-settings-close svg {
  width: 20px;
  height: 20px;
  stroke: #64748b !important;
}

.gp-settings-close:hover svg {
  stroke: #334155 !important;
}

.gp-settings-content {
  padding: 12px 0;
  flex: 1;
  overflow-y: auto;
}

/* Settings sidebar items - override topbar white color */
.gp-settings-sidebar .gp-settings-item,
.gp-settings-sidebar .gp-settings-item span,
.gp-settings-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 20px;
  color: #334155 !important;
  text-decoration: none !important;
  font-size: 14px;
  font-weight: 500;
  transition: all 0.15s ease;
}

.gp-settings-sidebar .gp-settings-item:hover,
.gp-settings-item:hover {
  background: #f1f5f9;
  color: #0f172a !important;
}

.gp-settings-sidebar .gp-settings-item svg,
.gp-settings-item svg {
  width: 20px;
  height: 20px;
  stroke: #64748b !important;
  flex-shrink: 0;
}

.gp-settings-sidebar .gp-settings-item:hover svg,
.gp-settings-item:hover svg {
  stroke: #334155 !important;
}

/* Transition utilities for Alpine.js */
.translate-x-full {
  transform: translateX(100%);
}

.translate-x-0 {
  transform: translateX(0);
}

/* ============================================
   COLORFUL STATUS BADGES & ACCENTS
   ============================================ */

/* Status Badge Base */
.fi-badge,
.status-badge {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 4px 10px !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  border-radius: 4px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.3px !important;
}

/* Awaiting Payment - Yellow/Amber */
.fi-badge-warning,
.status-awaiting-payment,
[class*="warning"] .fi-badge {
  background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%) !important;
  color: #92400e !important;
  border: 1px solid #fcd34d !important;
}

/* On Hold - Gray */
.status-on-hold {
  background: linear-gradient(135deg, #f1f5f9 0%, #e2e8f0 100%) !important;
  color: #475569 !important;
  border: 1px solid #cbd5e1 !important;
}

/* Awaiting Shipment - Blue */
.fi-badge-info,
.status-awaiting-shipment,
[class*="info"] .fi-badge {
  background: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%) !important;
  color: #1e40af !important;
  border: 1px solid #93c5fd !important;
}

/* Shipped - Green */
.fi-badge-success,
.status-shipped,
[class*="success"] .fi-badge {
  background: linear-gradient(135deg, #d1fae5 0%, #a7f3d0 100%) !important;
  color: #065f46 !important;
  border: 1px solid #6ee7b7 !important;
}

/* Delivered - Dark Green */
.status-delivered {
  background: linear-gradient(135deg, #059669 0%, #047857 100%) !important;
  color: #ffffff !important;
  border: none !important;
}

/* Cancelled - Red */
.fi-badge-danger,
.status-cancelled,
[class*="danger"] .fi-badge {
  background: linear-gradient(135deg, #fee2e2 0%, #fecaca 100%) !important;
  color: #991b1b !important;
  border: 1px solid #fca5a5 !important;
}

/* Table Action Buttons - Colorful */
.fi-ta-actions .fi-btn,
.fi-ta-row-actions .fi-btn {
  padding: 4px 8px !important;
  font-size: 12px !important;
  border-radius: 4px !important;
}

/* View Button - Blue */
.fi-ta-actions .fi-btn[href*="view"],
.fi-link-action[href*="view"] {
  color: #2563eb !important;
}

.fi-ta-actions .fi-btn[href*="view"]:hover {
  color: #1d4ed8 !important;
  background: #eff6ff !important;
}

/* Edit Button - Amber */
.fi-ta-actions .fi-btn[href*="edit"],
.fi-link-action[href*="edit"] {
  color: #d97706 !important;
}

.fi-ta-actions .fi-btn[href*="edit"]:hover {
  color: #b45309 !important;
  background: #fffbeb !important;
}

/* Delete Button - Red */
.fi-ta-actions .fi-btn[wire\:click*="delete"],
.fi-icon-btn-danger {
  color: #dc2626 !important;
}

.fi-ta-actions .fi-btn[wire\:click*="delete"]:hover {
  color: #b91c1c !important;
  background: #fef2f2 !important;
}

/* Sidebar Navigation - Colorful Icons */
.fi-sidebar-item-icon {
  color: #64748b !important;
  transition: color 0.2s ease !important;
}

.fi-sidebar-item:hover .fi-sidebar-item-icon,
.fi-sidebar-item-active .fi-sidebar-item-icon {
  color: #2563eb !important;
}

/* Active Sidebar Item - Blue accent */
.fi-sidebar-item-active {
  background: linear-gradient(90deg, #eff6ff 0%, #ffffff 100%) !important;
  border-left: 3px solid #2563eb !important;
}

.fi-sidebar-item-active .fi-sidebar-item-label {
  color: #1e40af !important;
  font-weight: 600 !important;
}

/* Header Actions - More Colorful */
.fi-header-actions {
  display: flex !important;
  gap: 8px !important;
}

/* Create/New Button - Always Blue */
.fi-header-actions .fi-btn[href*="create"],
.fi-header-actions .fi-ac-action:first-child .fi-btn {
  background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%) !important;
  color: white !important;
  border: none !important;
}

/* Pagination - Subtle colors */
.fi-ta-pagination-btn {
  border-radius: 4px !important;
}

.fi-ta-pagination-btn:hover:not(:disabled) {
  background: #eff6ff !important;
  border-color: #93c5fd !important;
  color: #2563eb !important;
}

/* Cards and Sections - Subtle shadow */
.fi-section,
.fi-card,
.fi-infolist-section {
  background: var(--gp-white) !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 8px !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05) !important;
}

/* Infolist - Better spacing and colors */
.fi-in-entry-wrp {
  padding: 12px 16px !important;
}

.fi-in-entry-wrp-label {
  color: #64748b !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
}

.fi-in-text {
  color: #1e293b !important;
  font-size: 14px !important;
}

/* Notifications - Colorful */
.fi-notification-success {
  background: linear-gradient(135deg, #d1fae5 0%, #a7f3d0 100%) !important;
  border-left: 4px solid #10b981 !important;
}

.fi-notification-warning {
  background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%) !important;
  border-left: 4px solid #f59e0b !important;
}

.fi-notification-danger {
  background: linear-gradient(135deg, #fee2e2 0%, #fecaca 100%) !important;
  border-left: 4px solid #ef4444 !important;
}

.fi-notification-info {
  background: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%) !important;
  border-left: 4px solid #3b82f6 !important;
}

/* Table Row Checkbox - Blue when checked */
.fi-ta-row input[type="checkbox"]:checked {
  background-color: #2563eb !important;
  border-color: #2563eb !important;
}

/* Empty State - More inviting */
.fi-ta-empty-state {
  padding: 60px 24px !important;
}

.fi-ta-empty-state-icon {
  color: #94a3b8 !important;
  margin-bottom: 16px !important;
}

.fi-ta-empty-state-heading {
  color: #334155 !important;
  font-size: 18px !important;
  font-weight: 600 !important;
  margin-bottom: 8px !important;
}

.fi-ta-empty-state-description {
  color: #64748b !important;
  font-size: 14px !important;
  margin-bottom: 20px !important;
}

.fi-ta-empty-state-actions .fi-btn {
  background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%) !important;
  color: white !important;
}

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

/* Links - Always blue (exclude styled buttons/links that define their own colours) */
a:not(.fi-btn):not(.fi-sidebar-item):not(.fi-dropdown-list-item):not(.locations-sidebar-item):not([class*="cart-"]):not([class*="qt-"]):not([class*="co-"]) {
  color: #2563eb !important;
}

a:not(.fi-btn):not(.fi-sidebar-item):not(.fi-dropdown-list-item):not(.locations-sidebar-item):not([class*="cart-"]):not([class*="qt-"]):not([class*="co-"]):hover {
  color: #1d4ed8 !important;
}

/* ============================================
   CHART WIDGET SPACING FIX
   ============================================ */

/* Chart widget container */
.fi-wi-chart {
  height: auto !important;
}

/* Section content inside chart widget */
.fi-wi-chart .fi-section-content-ctn,
.fi-wi-chart .fi-section-content {
  padding-bottom: 8px !important;
}

/* The chart container div with x-data */
.fi-wi-chart .fi-section-content > div[wire\:poll],
.fi-wi-chart .fi-section-content > div {
  height: auto !important;
  width: 100% !important;
}

/* The actual chart div with x-load - LINE charts (full width) */
.fi-wi-chart[style*="col-span-lg: 1 / -1"] [x-load][data-chart-type="line"] {
  height: 250px !important;
  width: 100% !important;
}

/* Doughnut/pie charts in half-width containers */
.fi-wi-chart:not([style*="col-span-lg: 1 / -1"]) [x-load][data-chart-type="doughnut"],
.fi-wi-chart:not([style*="col-span-lg: 1 / -1"]) [x-load][data-chart-type="pie"] {
  height: 200px !important;
  width: 100% !important;
}

/* Canvas element - ensure full width */
.fi-wi-chart canvas {
  width: 100% !important;
}

/* ============================================
   B2B TOP NAVIGATION - Match Dashboard Design
   ============================================ */

/* Topbar: compact 48px, dark blue, single row */
.fi-topbar,
header.fi-topbar,
.fi-layout > .fi-topbar,
body .fi-topbar {
  height: 48px !important;
  min-height: 48px !important;
  max-height: 48px !important;
}

.fi-topbar nav,
.fi-topbar > nav {
  height: 48px !important;
  display: flex !important;
  align-items: center !important;
  padding: 0 12px !important;
  gap: 0 !important;
}

/* Logo: visible, white, left-aligned with spacing */
.fi-topbar .fi-logo,
.fi-topbar a[href]:has(.fi-logo) {
  display: flex !important;
  align-items: center !important;
  flex-shrink: 0 !important;
  margin-right: 8px !important;
  height: 48px !important;
  padding: 0 12px 0 4px !important;
}

.fi-topbar img.fi-logo,
.fi-topbar .fi-logo img {
  filter: brightness(0) invert(1) !important;
  height: 26px !important;
  width: auto !important;
}

/* Nav groups container: horizontal, left-aligned, single row */
.fi-topbar .fi-topbar-nav-groups,
.fi-topbar ul.fi-topbar-nav-groups {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 0 !important;
  height: 48px !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
  flex-wrap: nowrap !important;
}

/* Each nav item <li>: horizontal layout */
.fi-topbar .fi-topbar-item,
.fi-topbar li.fi-topbar-item {
  display: flex !important;
  align-items: center !important;
  height: 48px !important;
  margin: 0 !important;
  padding: 0 !important;
  flex-direction: row !important;
}

/* Nav item button <a>: icon + text side by side - FORCE ROW LAYOUT */
.fi-topbar .fi-topbar-item-btn,
.fi-topbar a.fi-topbar-item-btn,
a.fi-topbar-item-btn,
.fi-topbar-item > a,
.fi-topbar li > a {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  padding: 0 14px !important;
  height: 48px !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  color: rgba(255, 255, 255, 0.9) !important;
  text-decoration: none !important;
  white-space: nowrap !important;
  transition: background 0.15s ease !important;
  border-radius: 0 !important;
}

/* Nav item icon: inline left of text, fixed size */
.fi-topbar .fi-topbar-item-btn .fi-topbar-item-icon,
.fi-topbar .fi-topbar-item-btn svg.fi-icon,
.fi-topbar .fi-topbar-item-btn svg,
.fi-topbar .fi-topbar-item-icon,
.fi-topbar-item-btn > svg,
svg.fi-topbar-item-icon {
  width: 18px !important;
  height: 18px !important;
  min-width: 18px !important;
  max-width: 18px !important;
  min-height: 18px !important;
  max-height: 18px !important;
  flex-shrink: 0 !important;
  color: rgba(255, 255, 255, 0.9) !important;
  stroke: rgba(255, 255, 255, 0.9) !important;
  display: inline-block !important;
}

/* Nav item label: vertically centered, auto height */
.fi-topbar .fi-topbar-item-label,
.fi-topbar .fi-topbar-item-btn span,
span.fi-topbar-item-label,
.fi-topbar-item-btn > span {
  font-size: 13px !important;
  font-weight: 500 !important;
  line-height: 1 !important;
  color: rgba(255, 255, 255, 0.9) !important;
  display: flex !important;
  align-items: center !important;
  height: auto !important;
}

/* Hover: same style as active - lighter blue bg + gold bottom border */
.fi-topbar .fi-topbar-item:not(.fi-active):hover {
  background: #41589c !important;
  background-color: #41589c !important;
  border-bottom: 4px solid #fbc024 !important;
  box-sizing: border-box !important;
}

.fi-topbar .fi-topbar-item:not(.fi-active):hover .fi-topbar-item-btn {
  background: transparent !important;
  background-color: transparent !important;
  color: #ffffff !important;
  height: 44px !important;
  min-height: 44px !important;
  max-height: 44px !important;
}

.fi-topbar .fi-topbar-item:not(.fi-active):hover span,
.fi-topbar .fi-topbar-item:not(.fi-active):hover svg,
.fi-topbar .fi-topbar-item:not(.fi-active):hover * {
  color: #ffffff !important;
  stroke: #ffffff !important;
  background: transparent !important;
  background-color: transparent !important;
}

/* Active LI: lighter blue background matching design #41589c */
.fi-topbar .fi-topbar-item.fi-active,
.fi-topbar li.fi-topbar-item.fi-active {
  background: #41589c !important;
  background-color: #41589c !important;
  border-bottom: 4px solid #fbc024 !important;
  box-sizing: border-box !important;
}

/* Active button: inherit lighter blue, gold bottom border */
.fi-topbar .fi-topbar-item.fi-active .fi-topbar-item-btn,
.fi-topbar li.fi-topbar-item.fi-active a.fi-topbar-item-btn {
  background: transparent !important;
  background-color: transparent !important;
  color: #ffffff !important;
  border-radius: 0 !important;
  margin: 0 !important;
  height: 44px !important;
  min-height: 44px !important;
  max-height: 44px !important;
  padding: 0 14px !important;
  border-bottom: none !important;
  box-sizing: border-box !important;
}

/* Active item ALL descendants: transparent bg so lighter blue shows through */
.fi-topbar .fi-topbar-item.fi-active .fi-topbar-item-btn span,
.fi-topbar .fi-topbar-item.fi-active .fi-topbar-item-btn svg,
.fi-topbar .fi-topbar-item.fi-active .fi-topbar-item-btn .fi-topbar-item-label,
.fi-topbar .fi-topbar-item.fi-active .fi-topbar-item-btn .fi-topbar-item-icon,
.fi-topbar .fi-topbar-item.fi-active .fi-topbar-item-label,
.fi-topbar .fi-topbar-item.fi-active .fi-topbar-item-icon,
.fi-topbar .fi-topbar-item.fi-active * {
  color: #ffffff !important;
  stroke: #ffffff !important;
  background: transparent !important;
  background-color: transparent !important;
}

/* Active label: auto height to fit within content area */
.fi-topbar .fi-topbar-item.fi-active .fi-topbar-item-btn .fi-topbar-item-label,
.fi-topbar .fi-topbar-item.fi-active .fi-topbar-item-btn span {
  height: auto !important;
  min-height: auto !important;
}

/* Right side: user menu area */
.fi-topbar .fi-topbar-nav-end,
.fi-topbar nav > div:last-child {
  margin-left: auto !important;
  display: flex !important;
  align-items: center !important;
  gap: 4px !important;
}

/* Ensure no stacking/wrapping of icon and text */
.fi-topbar .fi-topbar-item-btn > * {
  display: inline-flex !important;
}

/* Remove any column/stacked layout from Filament's default top nav */
.fi-topbar .fi-topbar-item-btn[class*="flex-col"],
.fi-topbar [class*="flex-col"],
.fi-topbar-item-btn {
  flex-direction: row !important;
}

/* Override Filament's fi-size-md icon sizing in topbar */
.fi-topbar .fi-icon.fi-size-md,
.fi-topbar svg.fi-size-md,
.fi-topbar .fi-topbar-item-btn .fi-icon {
  width: 18px !important;
  height: 18px !important;
  min-width: 18px !important;
  max-width: 18px !important;
}

/* Badge on icons (notification bell etc) */
.fi-topbar .fi-icon-btn-badge-ctn {
  position: absolute !important;
  top: 2px !important;
  right: 2px !important;
}

.fi-topbar .fi-icon-btn-badge-ctn .fi-badge {
  background: #ef4444 !important;
  color: #ffffff !important;
  font-size: 10px !important;
  min-width: 16px !important;
  height: 16px !important;
  padding: 0 4px !important;
  border-radius: 8px !important;
  border: 2px solid #1e3a8a !important;
}

/* ============================================
   CART ICON IN TOPBAR
   ============================================ */

.gp-cart-btn {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  position: relative !important;
  width: 36px !important;
  height: 36px !important;
  border-radius: 8px !important;
  background: transparent !important;
  border: none !important;
  cursor: pointer !important;
  color: rgba(255, 255, 255, 0.85) !important;
  transition: all 0.15s ease !important;
  text-decoration: none !important;
  margin-right: 4px !important;
}

.gp-cart-btn:hover {
  background: rgba(255, 255, 255, 0.15) !important;
  color: #ffffff !important;
  text-decoration: none !important;
}

.gp-cart-btn.active {
  background: rgba(255, 255, 255, 0.25) !important;
  color: #ffffff !important;
  border-radius: 8px !important;
  outline: 2px solid rgba(255, 255, 255, 0.4) !important;
  outline-offset: -2px !important;
}

.gp-cart-btn svg {
  width: 22px !important;
  height: 22px !important;
  stroke: currentColor !important;
  color: inherit !important;
}

.gp-cart-badge {
  position: absolute !important;
  top: 1px !important;
  right: 1px !important;
  min-width: 16px !important;
  height: 16px !important;
  padding: 0 4px !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  line-height: 16px !important;
  text-align: center !important;
  color: #fff !important;
  background: #ef4444 !important;
  border-radius: 8px !important;
  border: 2px solid #1e3a8a !important;
  pointer-events: none !important;
}

/* Cart Wrapper (positions dropdown) */
.gp-cart-wrapper {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
}

/* ---- Cart Dropdown ---- */
.gp-cart-dropdown {
  position: absolute !important;
  top: calc(100% + 8px) !important;
  right: 0 !important;
  width: 360px !important;
  background: #fff !important;
  color: #374151 !important;
  border: 1px solid #e5e7eb !important;
  border-radius: 10px !important;
  box-shadow: 0 10px 40px rgba(0,0,0,0.15), 0 2px 8px rgba(0,0,0,0.08) !important;
  z-index: 9999 !important;
  overflow: hidden !important;
  animation: gp-cart-dd-slide 0.15s ease-out !important;
}

/* Reset all text inside dropdown to dark colors */
.gp-cart-dropdown,
.gp-cart-dropdown *:not(svg):not(path) {
  color: #374151 !important;
}

.gp-cart-dropdown .gp-cart-dd-title {
  color: #111827 !important;
}

.gp-cart-dropdown .gp-cart-dd-count {
  color: #1e40af !important;
}

.gp-cart-dropdown .gp-cart-dd-name {
  color: #111827 !important;
}

.gp-cart-dropdown .gp-cart-dd-meta,
.gp-cart-dropdown .gp-cart-dd-qty,
.gp-cart-dropdown .gp-cart-dd-color {
  color: #6b7280 !important;
}

.gp-cart-dropdown .gp-cart-dd-price {
  color: #111827 !important;
}

.gp-cart-dropdown .gp-cart-dd-subtotal {
  color: #374151 !important;
}

.gp-cart-dropdown .gp-cart-dd-subtotal-val {
  color: #111827 !important;
}

.gp-cart-dropdown .gp-cart-dd-footer a.gp-cart-dd-viewcart,
.gp-cart-dropdown .gp-cart-dd-footer a.gp-cart-dd-viewcart:visited,
.gp-cart-dropdown .gp-cart-dd-footer a.gp-cart-dd-viewcart:active,
.gp-cart-dropdown a.gp-cart-dd-viewcart {
  color: #fff !important;
  background: #2563eb !important;
  text-decoration: none !important;
}

.gp-cart-dropdown .gp-cart-dd-footer a.gp-cart-dd-viewcart:hover,
.gp-cart-dropdown a.gp-cart-dd-viewcart:hover {
  color: #fff !important;
  background: #1d4ed8 !important;
  text-decoration: none !important;
}

.gp-cart-dropdown .gp-cart-dd-remove {
  color: #d1d5db !important;
}

.gp-cart-dropdown .gp-cart-dd-remove:hover {
  color: #ef4444 !important;
}

.gp-cart-dropdown .gp-cart-dd-empty {
  color: #9ca3af !important;
}

@keyframes gp-cart-dd-slide {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Dropdown Header */
.gp-cart-dd-header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 12px 16px !important;
  background: #f9fafb !important;
  border-bottom: 1px solid #e5e7eb !important;
}

.gp-cart-dd-title {
  font-size: 13px !important;
  font-weight: 700 !important;
  color: #111827 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.03em !important;
}

.gp-cart-dd-count {
  font-size: 11px !important;
  font-weight: 600 !important;
  color: #1e40af !important;
  background: #dbeafe !important;
  padding: 2px 8px !important;
  border-radius: 10px !important;
}

/* Dropdown Body (scrollable items) */
.gp-cart-dd-body {
  max-height: 320px !important;
  overflow-y: auto !important;
  scrollbar-width: thin !important;
}

.gp-cart-dd-body::-webkit-scrollbar {
  width: 4px;
}

.gp-cart-dd-body::-webkit-scrollbar-track {
  background: transparent;
}

.gp-cart-dd-body::-webkit-scrollbar-thumb {
  background: #d1d5db;
  border-radius: 2px;
}

/* Cart Dropdown Item */
.gp-cart-dd-item {
  display: flex !important;
  gap: 10px !important;
  align-items: flex-start !important;
  padding: 10px 16px !important;
  border-bottom: 1px solid #f3f4f6 !important;
  transition: background 0.1s !important;
}

.gp-cart-dd-item:last-child {
  border-bottom: none !important;
}

.gp-cart-dd-item:hover {
  background: #fafbfc !important;
}

/* Item Image */
.gp-cart-dd-img {
  width: 48px !important;
  height: 40px !important;
  flex-shrink: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: #f9fafb !important;
  border-radius: 4px !important;
  overflow: hidden !important;
  border: 1px solid #f3f4f6 !important;
}

.gp-cart-dd-img img {
  max-width: 100% !important;
  max-height: 100% !important;
  object-fit: contain !important;
}

/* Item Info */
.gp-cart-dd-info {
  flex: 1 !important;
  min-width: 0 !important;
}

.gp-cart-dd-name {
  font-size: 12px !important;
  font-weight: 600 !important;
  color: #111827 !important;
  line-height: 1.3 !important;
  margin-bottom: 2px !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.gp-cart-dd-meta {
  display: flex !important;
  gap: 8px !important;
  font-size: 11px !important;
  color: #6b7280 !important;
  margin-bottom: 2px !important;
}

.gp-cart-dd-color {
  font-style: italic !important;
}

.gp-cart-dd-price {
  font-size: 13px !important;
  font-weight: 700 !important;
  color: #111827 !important;
}

/* Remove Button */
.gp-cart-dd-remove {
  flex-shrink: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 24px !important;
  height: 24px !important;
  background: none !important;
  border: 1px solid transparent !important;
  border-radius: 4px !important;
  color: #d1d5db !important;
  cursor: pointer !important;
  transition: all 0.12s !important;
  margin-top: 2px !important;
}

.gp-cart-dd-remove:hover {
  color: #ef4444 !important;
  background: #fef2f2 !important;
  border-color: #fecaca !important;
}

/* Empty State */
.gp-cart-dd-empty {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 28px 16px !important;
  font-size: 12px !important;
  color: #9ca3af !important;
}

/* Dropdown Footer */
.gp-cart-dd-footer {
  padding: 12px 16px !important;
  background: #f9fafb !important;
  border-top: 1px solid #e5e7eb !important;
}

.gp-cart-dd-subtotal {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  font-size: 13px !important;
  color: #374151 !important;
  margin-bottom: 10px !important;
}

.gp-cart-dd-subtotal-val {
  font-size: 15px !important;
  font-weight: 700 !important;
  color: #111827 !important;
}

.gp-cart-dd-viewcart {
  display: block !important;
  width: 100% !important;
  padding: 9px 16px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: #fff !important;
  background: #2563eb !important;
  border: none !important;
  border-radius: 6px !important;
  text-align: center !important;
  text-decoration: none !important;
  cursor: pointer !important;
  transition: background 0.15s !important;
}

.gp-cart-dd-viewcart:hover {
  background: #1d4ed8 !important;
  color: #fff !important;
  text-decoration: none !important;
}

/* ============================================
   SETTINGS GEAR ICON IN TOPBAR
   ============================================ */

.gp-settings-btn {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 36px !important;
  height: 36px !important;
  border-radius: 8px !important;
  background: transparent !important;
  border: none !important;
  cursor: pointer !important;
  color: rgba(255, 255, 255, 0.85) !important;
  transition: all 0.15s ease !important;
  text-decoration: none !important;
  margin-right: 4px !important;
}

.gp-settings-btn:hover {
  background: rgba(255, 255, 255, 0.15) !important;
  color: #ffffff !important;
}

.gp-settings-btn.active {
  background: rgba(255, 255, 255, 0.25) !important;
  color: #ffffff !important;
  border-radius: 8px !important;
  outline: 2px solid rgba(255, 255, 255, 0.4) !important;
  outline-offset: -2px !important;
}

.gp-settings-btn svg {
  width: 22px !important;
  height: 22px !important;
  stroke: currentColor !important;
  color: inherit !important;
}

/* ============================================
   LOCATIONS PAGE - SIDEBAR + TABLE LAYOUT
   ============================================ */

/* Main layout: sidebar + content */
.locations-layout {
  display: flex !important;
  min-height: calc(100vh - 48px) !important;
  background: #ffffff !important;
  margin: 0 !important;
  padding: 0 !important;
  gap: 0 !important;
}

/* Left sidebar */
.locations-sidebar {
  width: 210px !important;
  min-width: 210px !important;
  background: #f8fafc !important;
  border-right: 1px solid #e2e8f0 !important;
  padding: 0 !important;
}

.locations-sidebar-nav {
  display: flex !important;
  flex-direction: column !important;
  padding: 8px 0 !important;
}

.locations-sidebar-item {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 11px 16px !important;
  color: #475569 !important;
  text-decoration: none !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  transition: all 0.15s ease !important;
  border-left: 3px solid transparent !important;
}

.locations-sidebar-item svg {
  width: 20px !important;
  height: 20px !important;
  stroke: #64748b !important;
  flex-shrink: 0 !important;
  color: #64748b !important;
}

.locations-sidebar-item:hover {
  background: #e2e8f0 !important;
  color: #1e293b !important;
}

.locations-sidebar-item:hover svg {
  stroke: #334155 !important;
  color: #334155 !important;
}

.locations-sidebar-item.active {
  background: #1e3a8a !important;
  color: #ffffff !important;
  border-left: 3px solid #fbbf24 !important;
}

.locations-sidebar-item.active svg {
  stroke: #ffffff !important;
  color: #ffffff !important;
}

/* Main content area */
.locations-main {
  flex: 1 !important;
  padding: 32px 24px 24px 24px !important;
  min-width: 0 !important;
  background: #ffffff !important;
}

/* Breadcrumb */
.locations-breadcrumb {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  margin-bottom: 16px !important;
  font-size: 13px !important;
}

.locations-breadcrumb a {
  color: #2563eb !important;
  text-decoration: none !important;
  font-weight: 500 !important;
}

.locations-breadcrumb a:hover {
  text-decoration: underline !important;
  color: #1d4ed8 !important;
}

.locations-breadcrumb svg {
  color: #94a3b8 !important;
  stroke: #94a3b8 !important;
}

.locations-breadcrumb span {
  color: #64748b !important;
}

/* Header section */
.locations-header {
  display: flex !important;
  justify-content: space-between !important;
  align-items: flex-start !important;
  margin-bottom: 31px !important;
  gap: 24px !important;
}

.locations-header-left {
  flex: 1 !important;
}

.locations-title {
  font-size: 22px !important;
  font-weight: 700 !important;
  color: #0f172a !important;
  margin: 0 0 8px 0 !important;
  line-height: 1.3 !important;
}

.locations-description {
  font-size: 14px !important;
  color: #64748b !important;
  line-height: 1.6 !important;
  margin: 0 !important;
  max-width: 700px !important;
}

.locations-header-right {
  flex-shrink: 0 !important;
  padding-top: 20px !important;
}

.locations-add-btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 10px 20px !important;
  background: #1e3a8a !important;
  color: #ffffff !important;
  border: 2px solid #1e3a8a !important;
  border-radius: 6px !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
  white-space: nowrap !important;
}

.locations-add-btn:hover {
  background: #1e40af !important;
  border-color: #1e40af !important;
}

/* Table container */
.locations-table-container {
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 8px !important;
  overflow: hidden !important;
}

/* Toolbar / Search */
.locations-table-toolbar {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  padding: 12px 16px !important;
  border-bottom: 1px solid #e2e8f0 !important;
  background: #ffffff !important;
}

.locations-search-wrapper {
  position: relative !important;
  width: 220px !important;
}

.locations-search-icon {
  position: absolute !important;
  left: 10px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 16px !important;
  height: 16px !important;
  color: #94a3b8 !important;
  stroke: #94a3b8 !important;
  pointer-events: none !important;
}

input.locations-search-input[type="text"] {
  width: 100% !important;
  height: 36px !important;
  padding: 6px 12px 6px 36px !important;
  font-size: 13px !important;
  border: 1px solid #d1d5db !important;
  border-radius: 6px !important;
  background: #ffffff !important;
  color: #334155 !important;
  outline: none !important;
}

input.locations-search-input[type="text"]:focus {
  border-color: #2563eb !important;
  box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.15) !important;
}

input.locations-search-input[type="text"]::placeholder {
  color: #94a3b8 !important;
}

/* Table */
.locations-table {
  width: 100% !important;
  border-collapse: collapse !important;
  table-layout: auto !important;
}

/* Table header */
.locations-th {
  background: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%) !important;
  border-bottom: 1px solid #e2e8f0 !important;
  padding: 12px 16px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  color: #475569 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  text-align: left !important;
  white-space: nowrap !important;
}

.locations-th-checkbox {
  width: 40px !important;
  padding: 12px 8px 12px 16px !important;
}

.locations-th-default {
  width: 80px !important;
  text-align: center !important;
}

.locations-th-actions {
  width: 160px !important;
  text-align: right !important;
  padding-right: 20px !important;
}

/* Table rows */
.locations-tr {
  border-bottom: 1px solid #f1f5f9 !important;
  transition: background 0.15s ease !important;
}

.locations-tr:hover {
  background: #f8fafc !important;
}

.locations-tr:last-child {
  border-bottom: none !important;
}

/* Table cells */
.locations-td {
  padding: 16px !important;
  font-size: 13px !important;
  color: #334155 !important;
  vertical-align: top !important;
}

.locations-td-checkbox {
  width: 40px !important;
  padding: 16px 8px 16px 16px !important;
  vertical-align: middle !important;
}

.locations-td-name {
  font-weight: 500 !important;
  color: #0f172a !important;
  min-width: 200px !important;
}

.locations-td-owner {
  vertical-align: middle !important;
}

.locations-owner-badge {
  display: inline-block !important;
  padding: 4px 10px !important;
  background: #2563eb !important;
  color: #ffffff !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  border-radius: 4px !important;
  letter-spacing: 0.3px !important;
  white-space: nowrap !important;
}

.locations-td-default {
  text-align: center !important;
  vertical-align: middle !important;
}

/* Toggle switch */
.locations-toggle {
  position: relative !important;
  display: inline-block !important;
  width: 44px !important;
  height: 24px !important;
  cursor: pointer !important;
}

.locations-toggle input {
  opacity: 0 !important;
  width: 0 !important;
  height: 0 !important;
  position: absolute !important;
}

.locations-toggle-slider {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  background-color: #d1d5db !important;
  border-radius: 24px !important;
  transition: 0.2s !important;
}

.locations-toggle-slider::before {
  content: "" !important;
  position: absolute !important;
  height: 18px !important;
  width: 18px !important;
  left: 3px !important;
  bottom: 3px !important;
  background-color: #ffffff !important;
  border-radius: 50% !important;
  transition: 0.2s !important;
}

.locations-toggle input:checked + .locations-toggle-slider {
  background-color: #2563eb !important;
}

.locations-toggle input:checked + .locations-toggle-slider::before {
  transform: translateX(20px) !important;
}

/* Address cells */
.locations-td-address {
  min-width: 180px !important;
}

.locations-address {
  line-height: 1.6 !important;
  font-size: 13px !important;
  color: #334155 !important;
}

/* Action buttons */
.locations-td-actions {
  text-align: right !important;
  vertical-align: middle !important;
  white-space: nowrap !important;
  padding-right: 20px !important;
}

.locations-action-btns {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 8px !important;
}

.locations-edit-btn,
.locations-delete-btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  padding: 6px 12px !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  border: none !important;
  border-radius: 4px !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
  background: transparent !important;
}

.locations-edit-btn svg,
.locations-delete-btn svg {
  width: 16px !important;
  height: 16px !important;
}

.locations-edit-btn {
  color: #2563eb !important;
}

.locations-edit-btn svg {
  stroke: #2563eb !important;
}

.locations-edit-btn:hover {
  background: #eff6ff !important;
  color: #1d4ed8 !important;
}

.locations-edit-btn:hover svg {
  stroke: #1d4ed8 !important;
}

.locations-delete-btn {
  color: #dc2626 !important;
}

.locations-delete-btn svg {
  stroke: #dc2626 !important;
}

.locations-delete-btn:hover {
  background: #fef2f2 !important;
  color: #b91c1c !important;
}

.locations-delete-btn:hover svg {
  stroke: #b91c1c !important;
}

/* Checkbox styling override for locations page */
.locations-table input[type="checkbox"] {
  width: 16px !important;
  height: 16px !important;
  border: 1px solid #d1d5db !important;
  border-radius: 3px !important;
  cursor: pointer !important;
  accent-color: #2563eb !important;
}

/* Override Filament page header for locations page (hide default) */
.fi-page:has(.locations-layout) .fi-header {
  display: none !important;
}

/* ---- Zero out EVERY wrapper from topbar to locations content ---- */
body:has(.locations-layout) .fi-layout {
  padding: 0 !important;
  margin: 0 !important;
  gap: 0 !important;
}

body:has(.locations-layout) .fi-main-ctn {
  padding: 0 !important;
  margin: 0 !important;
  gap: 0 !important;
}

body:has(.locations-layout) .fi-main {
  padding: 0 !important;
  margin: 0 !important;
  gap: 0 !important;
  max-width: 100% !important;
}

body:has(.locations-layout) .fi-page {
  padding: 0 !important;
  margin: 0 !important;
  gap: 0 !important;
}

body:has(.locations-layout) .fi-page-header-main-ctn {
  padding: 0 !important;
  margin: 0 !important;
  gap: 0 !important;
}

body:has(.locations-layout) .fi-page-main {
  padding: 0 !important;
  margin: 0 !important;
  gap: 0 !important;
}

body:has(.locations-layout) .fi-page-content {
  padding: 0 !important;
  margin: 0 !important;
  gap: 0 !important;
}

body:has(.locations-layout) .fi-page-content > div {
  padding: 0 !important;
  margin: 0 !important;
}

/* ---- Add New Shipping Address Modal ---- */
.locations-modal-overlay {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  background: rgba(0, 0, 0, 0.5) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  z-index: 9999 !important;
  padding: 20px !important;
}

.locations-modal {
  background: #ffffff !important;
  border-radius: 10px !important;
  width: 100% !important;
  max-width: 560px !important;
  max-height: 90vh !important;
  display: flex !important;
  flex-direction: column !important;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15) !important;
}

.locations-modal-header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 20px 24px !important;
  border-bottom: 1px solid #e2e8f0 !important;
}

.locations-modal-title {
  font-size: 18px !important;
  font-weight: 700 !important;
  color: #0f172a !important;
  margin: 0 !important;
}

.locations-modal-close {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 32px !important;
  height: 32px !important;
  border: none !important;
  background: transparent !important;
  color: #64748b !important;
  cursor: pointer !important;
  border-radius: 6px !important;
  transition: all 0.15s ease !important;
}

.locations-modal-close:hover {
  background: #f1f5f9 !important;
  color: #0f172a !important;
}

.locations-modal > form {
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
  flex: 1 !important;
  min-height: 0 !important;
}

.locations-modal-body {
  padding: 24px !important;
  overflow-y: auto !important;
  flex: 1 !important;
  min-height: 0 !important;
}

/* Form groups */
.locations-form-group {
  margin-bottom: 16px !important;
}

.locations-form-row {
  display: flex !important;
  gap: 16px !important;
}

.locations-form-group-flex {
  flex: 1 !important;
}

.locations-form-label {
  display: block !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: #334155 !important;
  margin-bottom: 6px !important;
}

.locations-form-required {
  color: #dc2626 !important;
}

.locations-form-input {
  width: 100% !important;
  height: 40px !important;
  padding: 8px 12px !important;
  font-size: 14px !important;
  border: 1px solid #d1d5db !important;
  border-radius: 6px !important;
  background: #ffffff !important;
  color: #334155 !important;
  outline: none !important;
  transition: border-color 0.15s ease, box-shadow 0.15s ease !important;
  box-sizing: border-box !important;
}

.locations-form-input:focus {
  border-color: #2563eb !important;
  box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.15) !important;
}

.locations-form-input::placeholder {
  color: #94a3b8 !important;
}

.locations-form-input-error {
  border-color: #dc2626 !important;
}

.locations-form-input-error:focus {
  border-color: #dc2626 !important;
  box-shadow: 0 0 0 2px rgba(220, 38, 38, 0.15) !important;
}

.locations-form-select {
  appearance: none !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='2' stroke='%2394a3b8'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='m19.5 8.25-7.5 7.5-7.5-7.5'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 10px center !important;
  background-size: 16px !important;
  padding-right: 36px !important;
  cursor: pointer !important;
}

.locations-form-error {
  display: block !important;
  font-size: 12px !important;
  color: #dc2626 !important;
  margin-top: 4px !important;
}

/* Toggle group */
.locations-form-toggle-group {
  margin-top: 8px !important;
  margin-bottom: 0 !important;
}

.locations-form-toggle-label {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  cursor: pointer !important;
}

/* Modal footer */
.locations-modal-footer {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 12px !important;
  padding: 16px 24px !important;
  border-top: 1px solid #e2e8f0 !important;
  background: #f8fafc !important;
  border-radius: 0 0 10px 10px !important;
}

.locations-modal-cancel-btn {
  padding: 10px 20px !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  color: #475569 !important;
  background: #ffffff !important;
  border: 1px solid #d1d5db !important;
  border-radius: 6px !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
}

.locations-modal-cancel-btn:hover {
  background: #f1f5f9 !important;
  border-color: #94a3b8 !important;
}

.locations-modal-submit-btn {
  padding: 10px 24px !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  color: #ffffff !important;
  background: #1e3a8a !important;
  border: none !important;
  border-radius: 6px !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
}

.locations-modal-submit-btn:hover {
  background: #1e40af !important;
}

.locations-modal-submit-btn:disabled {
  opacity: 0.6 !important;
  cursor: not-allowed !important;
}

/* Delete Confirmation Modal */
.locations-modal-sm {
  max-width: 440px !important;
}

.locations-delete-message {
  font-size: 14px !important;
  color: #475569 !important;
  line-height: 1.6 !important;
}

.locations-modal-delete-btn {
  padding: 10px 24px !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  color: #ffffff !important;
  background: #dc2626 !important;
  border: none !important;
  border-radius: 6px !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
}

.locations-modal-delete-btn:hover {
  background: #b91c1c !important;
}

.locations-modal-delete-btn:disabled {
  opacity: 0.6 !important;
  cursor: not-allowed !important;
}

/* ---- Account Page Styles ---- */

/* Account section card */
.account-section {
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 8px !important;
  margin-bottom: 20px !important;
  overflow: hidden !important;
}

.account-section-header {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 18px 24px !important;
  border-bottom: 1px solid #e2e8f0 !important;
  background: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%) !important;
}

.account-section-icon {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 32px !important;
  height: 32px !important;
  background: #1e3a8a !important;
  border-radius: 6px !important;
  flex-shrink: 0 !important;
}

.account-section-icon svg {
  width: 18px !important;
  height: 18px !important;
  stroke: #ffffff !important;
  color: #ffffff !important;
}

.account-section-title {
  font-size: 16px !important;
  font-weight: 700 !important;
  color: #0f172a !important;
  margin: 0 !important;
}

/* Account form grid */
.account-form-grid {
  padding: 24px !important;
  display: grid !important;
  grid-template-columns: 1fr 1fr 1fr !important;
  gap: 20px !important;
}

.account-form-grid .locations-form-group {
  margin-bottom: 0 !important;
}

/* Account section footer */
.account-section-footer {
  display: flex !important;
  justify-content: flex-end !important;
  padding: 16px 24px !important;
  border-top: 1px solid #e2e8f0 !important;
  background: #f8fafc !important;
}

.account-submit-btn {
  padding: 10px 24px !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  color: #ffffff !important;
  background: #1e3a8a !important;
  border: none !important;
  border-radius: 6px !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
}

.account-submit-btn:hover {
  background: #1e40af !important;
}

.account-submit-btn:disabled {
  opacity: 0.6 !important;
  cursor: not-allowed !important;
}

/* Toggle rows */
.account-toggle-row {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 16px 24px !important;
  border-bottom: 1px solid #f1f5f9 !important;
}

.account-toggle-row:last-of-type {
  border-bottom: none !important;
}

.account-toggle-label {
  font-size: 14px !important;
  font-weight: 500 !important;
  color: #334155 !important;
}

/* Toggle switch */
.account-toggle {
  position: relative !important;
  display: inline-block !important;
  width: 44px !important;
  height: 24px !important;
  cursor: pointer !important;
  flex-shrink: 0 !important;
}

.account-toggle input {
  opacity: 0 !important;
  width: 0 !important;
  height: 0 !important;
  position: absolute !important;
}

.account-toggle-slider {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  background-color: #d1d5db !important;
  border-radius: 24px !important;
  transition: 0.2s !important;
}

.account-toggle-slider::before {
  content: "" !important;
  position: absolute !important;
  height: 18px !important;
  width: 18px !important;
  left: 3px !important;
  bottom: 3px !important;
  background-color: #ffffff !important;
  border-radius: 50% !important;
  transition: 0.2s !important;
}

.account-toggle input:checked + .account-toggle-slider {
  background-color: #2563eb !important;
}

.account-toggle input:checked + .account-toggle-slider::before {
  transform: translateX(20px) !important;
}

/* Success message */
.account-success-message {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 12px 24px !important;
  background: #f0fdf4 !important;
  border-bottom: 1px solid #bbf7d0 !important;
  color: #166534 !important;
  font-size: 14px !important;
  font-weight: 500 !important;
}

.account-success-message svg {
  width: 20px !important;
  height: 20px !important;
  stroke: #16a34a !important;
  color: #16a34a !important;
  flex-shrink: 0 !important;
}

/* Responsive: stack form fields on smaller screens */
@media (max-width: 900px) {
  .account-form-grid {
    grid-template-columns: 1fr !important;
  }
}

/* ---- Tracking Page Sidebar (wider for longer labels) ---- */
.tracking-sidebar {
  width: 250px !important;
  min-width: 250px !important;
}

/* Tracking content placeholder */
.tracking-content-placeholder {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 80px 24px !important;
  color: #94a3b8 !important;
  text-align: center !important;
}

.tracking-content-placeholder svg {
  width: 64px !important;
  height: 64px !important;
  stroke: #cbd5e1 !important;
  color: #cbd5e1 !important;
  margin-bottom: 16px !important;
}

.tracking-content-placeholder p {
  font-size: 15px !important;
  color: #94a3b8 !important;
  margin: 0 !important;
}

/* Pagination footer */
.pagination-footer {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 16px 20px !important;
  margin-top: 0 !important;
  border-top: 1px solid #e2e8f0 !important;
  background: #ffffff !important;
  font-size: 14px !important;
  color: #475569 !important;
}

.pagination-footer-info {
  font-size: 14px !important;
  color: #475569 !important;
  white-space: nowrap !important;
}

.pagination-footer-perpage {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}

.pagination-footer-perpage-label {
  font-size: 14px !important;
  color: #475569 !important;
  white-space: nowrap !important;
}

.pagination-footer-perpage-select {
  height: 36px !important;
  padding: 4px 28px 4px 10px !important;
  font-size: 14px !important;
  border: 1px solid #d1d5db !important;
  border-radius: 6px !important;
  background: #ffffff !important;
  color: #334155 !important;
  outline: none !important;
  cursor: pointer !important;
  appearance: none !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='2' stroke='%2394a3b8'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='m19.5 8.25-7.5 7.5-7.5-7.5'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 6px center !important;
  background-size: 14px !important;
}

.pagination-footer-perpage-select:focus {
  border-color: #2563eb !important;
  box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.15) !important;
}

.pagination-footer-pages {
  display: flex !important;
  align-items: center !important;
  gap: 0 !important;
}

.pagination-footer-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 38px !important;
  height: 38px !important;
  padding: 0 !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  color: #475569 !important;
  background: #ffffff !important;
  border: 1px solid #d1d5db !important;
  margin-left: -1px !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
  text-decoration: none !important;
}

.pagination-footer-btn:first-child {
  border-top-left-radius: 6px !important;
  border-bottom-left-radius: 6px !important;
  margin-left: 0 !important;
}

.pagination-footer-btn:last-child {
  border-top-right-radius: 6px !important;
  border-bottom-right-radius: 6px !important;
}

.pagination-footer-btn:hover:not(.pagination-footer-btn-active):not(.pagination-footer-btn-disabled) {
  background: #f1f5f9 !important;
  z-index: 1 !important;
}

.pagination-footer-btn-active {
  background: #ffffff !important;
  color: #2563eb !important;
  border-color: #2563eb !important;
  z-index: 2 !important;
  font-weight: 600 !important;
  cursor: default !important;
}

.pagination-footer-btn-disabled {
  color: #cbd5e1 !important;
  cursor: not-allowed !important;
  background: #f9fafb !important;
}

.pagination-footer-ellipsis {
  cursor: default !important;
  border-color: transparent !important;
  background: transparent !important;
  color: #94a3b8 !important;
  min-width: 30px !important;
  font-weight: 600 !important;
  letter-spacing: 1px !important;
}

/* Coupon toggle switch */
.coupon-toggle {
  position: relative !important;
  width: 44px !important;
  height: 24px !important;
  background: #d1d5db !important;
  border: none !important;
  border-radius: 12px !important;
  cursor: pointer !important;
  transition: background-color 0.2s ease !important;
  padding: 0 !important;
  flex-shrink: 0 !important;
}

.coupon-toggle-on {
  background: #2563eb !important;
}

.coupon-toggle-knob {
  position: absolute !important;
  top: 2px !important;
  left: 2px !important;
  width: 20px !important;
  height: 20px !important;
  background: #ffffff !important;
  border-radius: 50% !important;
  transition: transform 0.2s ease !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15) !important;
}

.coupon-toggle-on .coupon-toggle-knob {
  transform: translateX(20px) !important;
}

/* Coupon status badges */
.coupon-status-badge {
  display: inline-block !important;
  padding: 2px 10px !important;
  border-radius: 9999px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  line-height: 20px !important;
}

.coupon-status-active {
  background: #dcfce7 !important;
  color: #166534 !important;
}

.coupon-status-inactive {
  background: #fee2e2 !important;
  color: #991b1b !important;
}

/* Coupon textarea */
.coupon-textarea {
  height: auto !important;
  min-height: 70px !important;
  resize: vertical !important;
}

/* Coupon tooltip */
.coupon-tooltip {
  cursor: help !important;
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
}

.coupon-tooltip::after {
  content: attr(data-tooltip) !important;
  position: absolute !important;
  bottom: calc(100% + 6px) !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  background: #1e293b !important;
  color: #ffffff !important;
  font-size: 12px !important;
  font-weight: 400 !important;
  padding: 6px 10px !important;
  border-radius: 6px !important;
  white-space: nowrap !important;
  pointer-events: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  transition: opacity 0.15s ease, visibility 0.15s ease !important;
  z-index: 10000 !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15) !important;
}

.coupon-tooltip::before {
  content: '' !important;
  position: absolute !important;
  bottom: calc(100% + 1px) !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  border: 5px solid transparent !important;
  border-top-color: #1e293b !important;
  pointer-events: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  transition: opacity 0.15s ease, visibility 0.15s ease !important;
  z-index: 10000 !important;
}

.coupon-tooltip:hover::after,
.coupon-tooltip:hover::before {
  opacity: 1 !important;
  visibility: visible !important;
}