/* =========================================================
   ShipFlow - Pro ERP Sidebar (Filament v3) - No Vite
   - Smaller sidebar width
   - Modern dark gradient + glass look
   - 3D pill buttons + hover + active state
   - Cleaner group titles (Shipping, Master Data)
========================================================= */

/* Sidebar width (force) - compact */
:root{
  --shipflow-sidebar-width: 200px;
  --shipflow-sidebar-collapsed: 56px;
}

/* Force sidebar width */
.fi-sidebar,
aside.fi-sidebar,
.fi-layout > .fi-sidebar {
  width: var(--shipflow-sidebar-width) !important;
  max-width: var(--shipflow-sidebar-width) !important;
  min-width: var(--shipflow-sidebar-width) !important;
}

/* Collapsed sidebar width */
.fi-sidebar.fi-collapsed,
aside.fi-sidebar.fi-collapsed {
  width: var(--shipflow-sidebar-collapsed) !important;
  max-width: var(--shipflow-sidebar-collapsed) !important;
  min-width: var(--shipflow-sidebar-collapsed) !important;
}

/* Sidebar background */
.fi-sidebar,
aside.fi-sidebar {
  background: radial-gradient(1200px 900px at 20% 10%, rgba(59,130,246,0.35), transparent 55%),
              linear-gradient(180deg, #0b1220 0%, #070b14 100%) !important;
  border-right: 1px solid rgba(255,255,255,0.08) !important;
  color: rgba(255,255,255,0.92) !important;
}

/* Transport mode switcher (Sea / Inland) – top of sidebar – 3D buttons */
.transport-mode-switcher .switcher-btn {
  border: 1px solid rgba(255,255,255,0.1) !important;
  box-shadow:
    0 3px 8px rgba(0,0,0,0.3),
    inset 0 1px 0 rgba(255,255,255,0.1),
    inset 0 -1px 0 rgba(0,0,0,0.15) !important;
  text-shadow: 0 1px 2px rgba(0,0,0,0.4) !important;
}
.transport-mode-switcher .switcher-sea {
  background: linear-gradient(180deg, rgba(14,165,233,0.25) 0%, rgba(2,132,199,0.15) 50%, rgba(3,105,161,0.2) 100%) !important;
  color: rgba(255,255,255,0.85) !important;
  border-color: rgba(56,189,248,0.3) !important;
}
.transport-mode-switcher .switcher-sea:hover {
  background: linear-gradient(180deg, rgba(14,165,233,0.4) 0%, rgba(2,132,199,0.25) 100%) !important;
  transform: translateY(-1px) !important;
  box-shadow:
    0 6px 14px rgba(14,165,233,0.35),
    inset 0 1px 0 rgba(255,255,255,0.18),
    inset 0 -1px 0 rgba(0,0,0,0.15) !important;
}
.transport-mode-switcher .switcher-sea.switcher-active {
  background: linear-gradient(180deg, #0ea5e9 0%, #0284c7 50%, #0369a1 100%) !important;
  color: #fff !important;
  border-color: rgba(56,189,248,0.6) !important;
  box-shadow:
    0 5px 14px rgba(14,165,233,0.5),
    inset 0 1px 0 rgba(255,255,255,0.35),
    inset 0 -1px 0 rgba(0,0,0,0.2) !important;
}
.transport-mode-switcher .switcher-inland {
  background: linear-gradient(180deg, rgba(34,197,94,0.25) 0%, rgba(22,163,74,0.15) 50%, rgba(21,128,61,0.2) 100%) !important;
  color: rgba(255,255,255,0.85) !important;
  border-color: rgba(74,222,128,0.3) !important;
}
.transport-mode-switcher .switcher-inland:hover {
  background: linear-gradient(180deg, rgba(34,197,94,0.4) 0%, rgba(22,163,74,0.25) 100%) !important;
  transform: translateY(-1px) !important;
  box-shadow:
    0 6px 14px rgba(34,197,94,0.35),
    inset 0 1px 0 rgba(255,255,255,0.18),
    inset 0 -1px 0 rgba(0,0,0,0.15) !important;
}
.transport-mode-switcher .switcher-inland.switcher-active {
  background: linear-gradient(180deg, #22c55e 0%, #16a34a 50%, #15803d 100%) !important;
  color: #fff !important;
  border-color: rgba(74,222,128,0.6) !important;
  box-shadow:
    0 5px 14px rgba(34,197,94,0.5),
    inset 0 1px 0 rgba(255,255,255,0.35),
    inset 0 -1px 0 rgba(0,0,0,0.2) !important;
}
.transport-mode-switcher .switcher-hint {
  color: rgba(255,255,255,0.6) !important;
}

/* Sidebar brand/header - compact */
.fi-sidebar-header,
.fi-sidebar .fi-sidebar-header {
  padding: 10px 12px 8px !important;
  border-bottom: 1px solid rgba(255,255,255,0.06) !important;
}

/* Brand text size - compact */
.fi-sidebar-header .fi-brand,
.fi-sidebar-header .fi-logo,
.fi-sidebar-header a {
  font-weight: 700 !important;
  font-size: 1rem !important;
  letter-spacing: 0.2px !important;
}

/* Groups – colored 3D button style */
.fi-sidebar-group-button,
.fi-sidebar .fi-sidebar-group-button {
  margin-top: 12px !important;
  margin-bottom: 2px !important;
  margin-left: 4px !important;
  margin-right: 4px !important;
  padding: 8px 12px !important;
  border-radius: 10px !important;

  background: rgba(255,255,255,0.08) !important;
  border: 1px solid rgba(255,255,255,0.12) !important;
  box-shadow:
    0 4px 10px rgba(0,0,0,0.35),
    inset 0 1px 0 rgba(255,255,255,0.2) !important;

  transition: transform 0.15s ease, box-shadow 0.15s ease !important;
}

.fi-sidebar-group-button:hover {
  transform: translateY(-1px) !important;
  box-shadow:
    0 8px 18px rgba(0,0,0,0.45),
    inset 0 1px 0 rgba(255,255,255,0.25) !important;
}

.fi-sidebar-group-label,
.fi-sidebar .fi-sidebar-group-label,
.fi-sidebar-nav .fi-sidebar-group-label {
  font-size: 12px !important;
  font-weight: 800 !important;
  letter-spacing: 0.6px !important;
  text-transform: uppercase !important;
  color: rgba(255,255,255,0.95) !important;
  text-shadow: 0 1px 2px rgba(0,0,0,0.4) !important;
}

/* 3D colored buttons – Sea */
.fi-sidebar-group[data-group-label="Sea"] .fi-sidebar-group-button {
  background: linear-gradient(180deg, #0ea5e9 0%, #0284c7 50%, #0369a1 100%) !important;
  border-color: rgba(56,189,248,0.5) !important;
  box-shadow:
    0 4px 12px rgba(14,165,233,0.4),
    inset 0 1px 0 rgba(255,255,255,0.35),
    inset 0 -1px 0 rgba(0,0,0,0.2) !important;
}
.fi-sidebar-group[data-group-label="Sea"] .fi-sidebar-group-button:hover {
  box-shadow:
    0 6px 16px rgba(14,165,233,0.5),
    inset 0 1px 0 rgba(255,255,255,0.4),
    inset 0 -1px 0 rgba(0,0,0,0.2) !important;
}
.fi-sidebar-group[data-group-label="Sea"] .fi-sidebar-group-label { color: #fff !important; }
.fi-sidebar-group[data-group-label="Sea"] .fi-sidebar-group-icon { color: rgba(255,255,255,0.9) !important; }
.fi-sidebar-group[data-group-label="Sea"] .fi-sidebar-group-collapse-button { color: rgba(255,255,255,0.9) !important; }

/* 3D colored buttons – Inland */
.fi-sidebar-group[data-group-label="Inland"] .fi-sidebar-group-button {
  background: linear-gradient(180deg, #22c55e 0%, #16a34a 50%, #15803d 100%) !important;
  border-color: rgba(74,222,128,0.5) !important;
  box-shadow:
    0 4px 12px rgba(34,197,94,0.4),
    inset 0 1px 0 rgba(255,255,255,0.35),
    inset 0 -1px 0 rgba(0,0,0,0.2) !important;
}
.fi-sidebar-group[data-group-label="Inland"] .fi-sidebar-group-button:hover {
  box-shadow:
    0 6px 16px rgba(34,197,94,0.5),
    inset 0 1px 0 rgba(255,255,255,0.4),
    inset 0 -1px 0 rgba(0,0,0,0.2) !important;
}
.fi-sidebar-group[data-group-label="Inland"] .fi-sidebar-group-label { color: #fff !important; }
.fi-sidebar-group[data-group-label="Inland"] .fi-sidebar-group-icon { color: rgba(255,255,255,0.9) !important; }
.fi-sidebar-group[data-group-label="Inland"] .fi-sidebar-group-collapse-button { color: rgba(255,255,255,0.9) !important; }

/* 3D colored buttons – Sales & Finance */
.fi-sidebar-group[data-group-label="Sales & Finance"] .fi-sidebar-group-button {
  background: linear-gradient(180deg, #f59e0b 0%, #d97706 50%, #b45309 100%) !important;
  border-color: rgba(251,191,36,0.5) !important;
  box-shadow:
    0 4px 12px rgba(245,158,11,0.4),
    inset 0 1px 0 rgba(255,255,255,0.35),
    inset 0 -1px 0 rgba(0,0,0,0.2) !important;
}
.fi-sidebar-group[data-group-label="Sales & Finance"] .fi-sidebar-group-button:hover {
  box-shadow:
    0 6px 16px rgba(245,158,11,0.5),
    inset 0 1px 0 rgba(255,255,255,0.4),
    inset 0 -1px 0 rgba(0,0,0,0.2) !important;
}
.fi-sidebar-group[data-group-label="Sales & Finance"] .fi-sidebar-group-label { color: #fff !important; }
.fi-sidebar-group[data-group-label="Sales & Finance"] .fi-sidebar-group-icon { color: rgba(255,255,255,0.9) !important; }
.fi-sidebar-group[data-group-label="Sales & Finance"] .fi-sidebar-group-collapse-button { color: rgba(255,255,255,0.9) !important; }

/* 3D colored buttons – Data */
.fi-sidebar-group[data-group-label="Data"] .fi-sidebar-group-button {
  background: linear-gradient(180deg, #8b5cf6 0%, #7c3aed 50%, #6d28d9 100%) !important;
  border-color: rgba(167,139,250,0.5) !important;
  box-shadow:
    0 4px 12px rgba(139,92,246,0.4),
    inset 0 1px 0 rgba(255,255,255,0.35),
    inset 0 -1px 0 rgba(0,0,0,0.2) !important;
}
.fi-sidebar-group[data-group-label="Data"] .fi-sidebar-group-button:hover {
  box-shadow:
    0 6px 16px rgba(139,92,246,0.5),
    inset 0 1px 0 rgba(255,255,255,0.4),
    inset 0 -1px 0 rgba(0,0,0,0.2) !important;
}
.fi-sidebar-group[data-group-label="Data"] .fi-sidebar-group-label { color: #fff !important; }
.fi-sidebar-group[data-group-label="Data"] .fi-sidebar-group-icon { color: rgba(255,255,255,0.9) !important; }
.fi-sidebar-group[data-group-label="Data"] .fi-sidebar-group-collapse-button { color: rgba(255,255,255,0.9) !important; }

/* 3D colored buttons – Settings */
.fi-sidebar-group[data-group-label="Settings"] .fi-sidebar-group-button {
  background: linear-gradient(180deg, #64748b 0%, #475569 50%, #334155 100%) !important;
  border-color: rgba(148,163,184,0.5) !important;
  box-shadow:
    0 4px 12px rgba(100,116,139,0.4),
    inset 0 1px 0 rgba(255,255,255,0.35),
    inset 0 -1px 0 rgba(0,0,0,0.2) !important;
}
.fi-sidebar-group[data-group-label="Settings"] .fi-sidebar-group-button:hover {
  box-shadow:
    0 6px 16px rgba(100,116,139,0.5),
    inset 0 1px 0 rgba(255,255,255,0.4),
    inset 0 -1px 0 rgba(0,0,0,0.2) !important;
}
.fi-sidebar-group[data-group-label="Settings"] .fi-sidebar-group-label { color: #fff !important; }
.fi-sidebar-group[data-group-label="Settings"] .fi-sidebar-group-icon { color: rgba(255,255,255,0.9) !important; }
.fi-sidebar-group[data-group-label="Settings"] .fi-sidebar-group-collapse-button { color: rgba(255,255,255,0.9) !important; }

/* Sidebar items wrapper - compact */
.fi-sidebar-nav,
.fi-sidebar .fi-sidebar-nav {
  padding: 6px 8px 12px !important;
}

/* Buttons - compact */
.fi-sidebar-item,
.fi-sidebar .fi-sidebar-item {
  margin: 2px 4px !important;
}

/* Link/button styling - compact */
.fi-sidebar-item a,
.fi-sidebar-item button,
.fi-sidebar .fi-sidebar-item a,
.fi-sidebar .fi-sidebar-item button {
  border-radius: 10px !important;
  padding: 8px 10px !important;

  background: rgba(255,255,255,0.06) !important;
  border: 1px solid rgba(255,255,255,0.08) !important;

  box-shadow:
    0 4px 12px rgba(0,0,0,0.3),
    inset 0 1px 0 rgba(255,255,255,0.08) !important;

  transition: transform 0.1s ease, box-shadow 0.1s ease, background 0.1s ease, border 0.1s ease !important;
}

/* Hover feel */
.fi-sidebar-item a:hover,
.fi-sidebar-item button:hover,
.fi-sidebar .fi-sidebar-item a:hover,
.fi-sidebar .fi-sidebar-item button:hover {
  transform: translateY(-1px) !important;
  background: rgba(255,255,255,0.09) !important;
  border-color: rgba(59,130,246,0.35) !important;

  box-shadow:
    0 12px 26px rgba(0,0,0,0.45),
    0 0 0 3px rgba(59,130,246,0.12),
    inset 0 1px 0 rgba(255,255,255,0.12) !important;
}

/* Active item (current page) */
.fi-sidebar-item a[aria-current="page"],
.fi-sidebar .fi-sidebar-item a[aria-current="page"] {
  background: linear-gradient(135deg, rgba(59,130,246,0.42), rgba(37,99,235,0.22)) !important;
  border-color: rgba(59,130,246,0.55) !important;

  box-shadow:
    0 14px 28px rgba(0,0,0,0.50),
    0 0 0 3px rgba(59,130,246,0.18),
    inset 0 1px 0 rgba(255,255,255,0.14) !important;
}

/* Sea group – nav items blue 3D style */
.fi-sidebar-group[data-group-label="Sea"] .fi-sidebar-item a,
.fi-sidebar-group[data-group-label="Sea"] .fi-sidebar-item button {
  background: linear-gradient(180deg, rgba(14,165,233,0.2) 0%, rgba(2,132,199,0.12) 50%, rgba(3,105,161,0.18) 100%) !important;
  border-color: rgba(56,189,248,0.35) !important;
  box-shadow:
    0 4px 12px rgba(14,165,233,0.25),
    inset 0 1px 0 rgba(255,255,255,0.12),
    inset 0 -1px 0 rgba(0,0,0,0.15) !important;
}
.fi-sidebar-group[data-group-label="Sea"] .fi-sidebar-item a:hover,
.fi-sidebar-group[data-group-label="Sea"] .fi-sidebar-item button:hover {
  background: linear-gradient(180deg, rgba(14,165,233,0.35) 0%, rgba(2,132,199,0.22) 100%) !important;
  border-color: rgba(56,189,248,0.5) !important;
  box-shadow:
    0 8px 20px rgba(14,165,233,0.35),
    0 0 0 2px rgba(14,165,233,0.15),
    inset 0 1px 0 rgba(255,255,255,0.18),
    inset 0 -1px 0 rgba(0,0,0,0.15) !important;
}
.fi-sidebar-group[data-group-label="Sea"] .fi-sidebar-item a[aria-current="page"],
.fi-sidebar-group[data-group-label="Sea"] .fi-sidebar-item button[aria-current="page"] {
  background: linear-gradient(180deg, #0ea5e9 0%, #0284c7 50%, #0369a1 100%) !important;
  border-color: rgba(56,189,248,0.6) !important;
  box-shadow:
    0 6px 16px rgba(14,165,233,0.5),
    inset 0 1px 0 rgba(255,255,255,0.3),
    inset 0 -1px 0 rgba(0,0,0,0.2) !important;
}
.fi-sidebar-group[data-group-label="Sea"] .fi-sidebar-item.fi-active a,
.fi-sidebar-group[data-group-label="Sea"] .fi-sidebar-item.fi-active button {
  background: linear-gradient(180deg, #0ea5e9 0%, #0284c7 50%, #0369a1 100%) !important;
  border-color: rgba(56,189,248,0.6) !important;
  box-shadow:
    0 6px 16px rgba(14,165,233,0.5),
    inset 0 1px 0 rgba(255,255,255,0.3),
    inset 0 -1px 0 rgba(0,0,0,0.2) !important;
}
.fi-sidebar-group[data-group-label="Sea"] .fi-sidebar-item.fi-active .fi-sidebar-item-label,
.fi-sidebar-group[data-group-label="Sea"] .fi-sidebar-item a[aria-current="page"] .fi-sidebar-item-label {
  color: #fff !important;
}
.fi-sidebar-group[data-group-label="Sea"] .fi-sidebar-item.fi-active svg,
.fi-sidebar-group[data-group-label="Sea"] .fi-sidebar-item a[aria-current="page"] svg {
  color: rgba(255,255,255,0.95) !important;
}

/* Inland group – nav items green 3D style */
.fi-sidebar-group[data-group-label="Inland"] .fi-sidebar-item a,
.fi-sidebar-group[data-group-label="Inland"] .fi-sidebar-item button {
  background: linear-gradient(180deg, rgba(34,197,94,0.2) 0%, rgba(22,163,74,0.12) 50%, rgba(21,128,61,0.18) 100%) !important;
  border-color: rgba(74,222,128,0.35) !important;
  box-shadow:
    0 4px 12px rgba(34,197,94,0.25),
    inset 0 1px 0 rgba(255,255,255,0.12),
    inset 0 -1px 0 rgba(0,0,0,0.15) !important;
}
.fi-sidebar-group[data-group-label="Inland"] .fi-sidebar-item a:hover,
.fi-sidebar-group[data-group-label="Inland"] .fi-sidebar-item button:hover {
  background: linear-gradient(180deg, rgba(34,197,94,0.35) 0%, rgba(22,163,74,0.22) 100%) !important;
  border-color: rgba(74,222,128,0.5) !important;
  box-shadow:
    0 8px 20px rgba(34,197,94,0.35),
    0 0 0 2px rgba(34,197,94,0.15),
    inset 0 1px 0 rgba(255,255,255,0.18),
    inset 0 -1px 0 rgba(0,0,0,0.15) !important;
}
.fi-sidebar-group[data-group-label="Inland"] .fi-sidebar-item a[aria-current="page"],
.fi-sidebar-group[data-group-label="Inland"] .fi-sidebar-item button[aria-current="page"] {
  background: linear-gradient(180deg, #22c55e 0%, #16a34a 50%, #15803d 100%) !important;
  border-color: rgba(74,222,128,0.6) !important;
  box-shadow:
    0 6px 16px rgba(34,197,94,0.5),
    inset 0 1px 0 rgba(255,255,255,0.3),
    inset 0 -1px 0 rgba(0,0,0,0.2) !important;
}
.fi-sidebar-group[data-group-label="Inland"] .fi-sidebar-item.fi-active a,
.fi-sidebar-group[data-group-label="Inland"] .fi-sidebar-item.fi-active button {
  background: linear-gradient(180deg, #22c55e 0%, #16a34a 50%, #15803d 100%) !important;
  border-color: rgba(74,222,128,0.6) !important;
  box-shadow:
    0 6px 16px rgba(34,197,94,0.5),
    inset 0 1px 0 rgba(255,255,255,0.3),
    inset 0 -1px 0 rgba(0,0,0,0.2) !important;
}
.fi-sidebar-group[data-group-label="Inland"] .fi-sidebar-item.fi-active .fi-sidebar-item-label,
.fi-sidebar-group[data-group-label="Inland"] .fi-sidebar-item a[aria-current="page"] .fi-sidebar-item-label {
  color: #fff !important;
}
.fi-sidebar-group[data-group-label="Inland"] .fi-sidebar-item.fi-active svg,
.fi-sidebar-group[data-group-label="Inland"] .fi-sidebar-item a[aria-current="page"] svg {
  color: rgba(255,255,255,0.95) !important;
}

/* Icon sizing and color */
.fi-sidebar-item svg,
.fi-sidebar .fi-sidebar-item svg {
  width: 22px !important;
  height: 22px !important;
  opacity: 0.95 !important;
}

/* Labels: more “ERP” look */
.fi-sidebar-item-label,
.fi-sidebar .fi-sidebar-item-label {
  font-size: 14px !important;
  font-weight: 700 !important;
  letter-spacing: 0.2px !important;
  color: rgba(255,255,255,0.92) !important;
}

/* Reduce empty space for collapsed sidebar */
.fi-sidebar.fi-collapsed .fi-sidebar-item-label,
aside.fi-sidebar.fi-collapsed .fi-sidebar-item-label {
  display: none !important;
}

/* Collapse toggle - compact */
.fi-sidebar-collapse-button,
.fi-sidebar .fi-sidebar-collapse-button {
  border-radius: 8px !important;
  padding: 6px !important;
  background: rgba(255,255,255,0.06) !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
}

/* =========================================================
   EXTREME COMPACT tables – smallest fonts + minimal row height
========================================================= */

.fi-ta-ctn {
  font-size: 4px !important;
  font-family: "IBM Plex Sans", ui-sans-serif, system-ui, sans-serif !important;
}

/* Force compact row height – table structure */
.fi-ta-ctn table,
.fi-ta-ctn .fi-ta-table,
.fi-relation-manager .fi-ta-table {
  border-collapse: collapse !important;
}
.fi-ta-ctn thead th,
.fi-ta-ctn .fi-ta-header-cell {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  min-height: 0 !important;
  height: auto !important;
  line-height: 1.15 !important;
}
.fi-ta-ctn tbody td,
.fi-ta-ctn .fi-ta-cell,
.fi-ta-ctn tr.fi-ta-row {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  min-height: 0 !important;
  height: auto !important;
  line-height: 1.2 !important;
  vertical-align: middle !important;
}

/* Header: readable, fixed size and font */
.fi-ta-header-cell,
.fi-ta-header-cell-label {
  padding: 2px 4px !important;
  font-size: 11px !important;
  line-height: 1.2 !important;
  font-weight: 700 !important;
  letter-spacing: 0.04em !important;
  font-family: "IBM Plex Sans", ui-sans-serif, system-ui, sans-serif !important;
}

/* Details (cells) */
.fi-ta-cell {
  padding: 0 2px !important;
  font-size: 4px !important;
  line-height: 1.2 !important;
}

/* Status badges (Shipped, Overdue, Draft…) – ~3× size for visibility */
.fi-ta-ctn .fi-badge,
.fi-badge {
  padding: 5px 10px !important;
  font-size: 12px !important;
  line-height: 1.2 !important;
  font-weight: 700 !important;
}

.fi-ta-actions,
.fi-ta-actions-cell {
  padding: 0 2px !important;
}

.fi-ta-actions .fi-btn,
.fi-ta-actions .fi-link {
  padding: 0 1px !important;
  font-size: 4px !important;
}

.fi-ta-record-checkbox-cell {
  padding: 0 2px !important;
}

/* Tighter table header bar */
.fi-ta-header {
  padding-top: 2px !important;
  padding-bottom: 2px !important;
  min-height: 0 !important;
}

.fi-relation-manager .fi-ta-ctn { font-size: 11px !important; }
.fi-relation-manager .fi-ta-cell { font-size: 11px !important; }
.fi-relation-manager .fi-ta-header-cell,
.fi-relation-manager .fi-ta-header-cell-label {
  font-size: 11px !important;
  font-family: "IBM Plex Sans", ui-sans-serif, system-ui, sans-serif !important;
}
.fi-relation-manager .fi-ta-cell { padding: 2px 4px !important; }
.fi-relation-manager thead th,
.fi-relation-manager .fi-ta-header-cell { padding-top: 0 !important; padding-bottom: 0 !important; }
.fi-relation-manager tbody td,
.fi-relation-manager .fi-ta-cell { padding-top: 0 !important; padding-bottom: 0 !important; }