/* Desktop: Reduce padding for collapsed sidebar */
@media (min-width: 1024px) {
    .fi-sidebar:not(.fi-sidebar-open) .fi-sidebar-nav {
        padding-left: 0.25rem !important;
        padding-right: 0.25rem !important;
    }

    .fi-sidebar:not(.fi-sidebar-open) .fi-sidebar-item-button {
        padding-left: 0.25rem !important;
        padding-right: 0.25rem !important;
        justify-content: center !important;
    }

    .fi-sidebar:not(.fi-sidebar-open) .fi-sidebar-item {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    /* Center icons in collapsed state */
    .fi-sidebar:not(.fi-sidebar-open) .fi-sidebar-item-icon {
        margin: 0 auto !important;
    }

    /* Adjust collapsed sidebar width - make it narrower */
    .fi-sidebar:not(.fi-sidebar-open) {
        width: 3rem !important;
    }

    /* Remove extra padding from navigation */
    .fi-sidebar:not(.fi-sidebar-open) .fi-sidebar-nav > ul {
        padding: 0 !important;
    }
    
    /* Add padding to expanded sidebar icons */
    .fi-sidebar.fi-sidebar-open .fi-sidebar-item-icon {
        margin-left: 0.625rem !important;
    }
}

/* Reduce horizontal padding/margins for main content area */
.fi-main {
    padding-left: 0 !important;
    padding-right: 1rem !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    max-width: none !important;
    width: 100% !important;
}

/* Override Tailwind utility classes on fi-main */
.fi-main.mx-auto {
    margin-left: 0 !important;
    margin-right: 0 !important;
}

.fi-main.max-w-7xl {
    max-width: none !important;
}

.fi-main.px-4 {
    padding-left: 0 !important;
    padding-right: 1rem !important;
}

.fi-main.md\:px-6 {
    padding-left: 0 !important;
    padding-right: 1rem !important;
}

.fi-main.lg\:px-8 {
    padding-left: 0 !important;
    padding-right: 1rem !important;
}

/* Remove the margin that creates gap after sidebar */
.fi-sidebar:not(.fi-sidebar-open) ~ .fi-main {
    margin-left: 0 !important;
}

/* Also handle the sticky sidebar case */
.lg\:sticky + .fi-main {
    margin-left: 0 !important;
}

/* Reduce page content padding */
.fi-page {
    padding-left: 0 !important;
    padding-right: 0.5rem !important;
}

/* Reduce section padding */
.fi-section-content {
    padding-left: 0 !important;
    padding-right: 0.5rem !important;
}

/* Reduce table wrapper padding */
.fi-ta-ctn {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* Reduce table container margins */
.fi-ta-content {
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* Ensure table uses full width */
.fi-ta-table {
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* Reduce header padding */
.fi-header {
    padding-left: 0 !important;
    padding-right: 1rem !important;
}

/* Desktop specific adjustments */
@media (min-width: 1024px) {
    .fi-main-ctn {
        max-width: 100% !important;
        padding-left: 0 !important;
        padding-right: 0.5rem !important;
    }
}

/* Remove all left spacing from page header */
.fi-header-heading {
    padding-left: 0 !important;
    margin-left: 0 !important;
}

/* Remove left margin from breadcrumbs */
.fi-breadcrumbs {
    margin-left: 0 !important;
    padding-left: 0 !important;
}

/* Remove any gap from the flex container */
.fi-layout {
    gap: 0 !important;
}

/* Ensure main content starts immediately after sidebar */
.fi-sidebar ~ * {
    margin-left: 0 !important;
}

/* Remove any inline styles that might add margin */
.fi-main[style*="margin-left"] {
    margin-left: 0 !important;
}

/* Reduce expanded sidebar width to 66% (10.5rem instead of 16rem) */
@media (min-width: 1024px) {
    .fi-sidebar.fi-sidebar-open {
        width: 10.5rem !important;
    }
    
    .fi-sidebar:not(.fi-sidebar-open) ~ .fi-main {
        margin-left: 3rem !important; /* Width of collapsed sidebar */
    }
    
    .fi-sidebar.fi-sidebar-open ~ .fi-main {
        margin-left: 10.5rem !important; /* Width of open sidebar - reduced to 66% */
    }
    
    /* Override the CSS variable for sidebar width */
    :root {
        --sidebar-width: 10.5rem !important;
    }
    
    /* Ensure smooth transition */
    .fi-sidebar {
        transition: width 0.3s ease !important;
    }
    
    .fi-main {
        transition: margin-left 0.3s ease !important;
    }
}

/* Remove any padding from layout wrapper */
.fi-layout > * {
    padding-left: 0 !important;
}

/* Force all containers to use full width and remove auto margins */
.fi-main-ctn,
.fi-main,
.fi-page,
.fi-page-wrapper,
.fi-section,
.fi-section-content,
.fi-ta-ctn,
[class*="container"] {
    max-width: 100% !important;
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* Override any responsive container behavior */
@media (min-width: 640px) {
    .fi-main-ctn,
    .fi-main,
    .fi-page,
    [class*="container"] {
        max-width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
}

@media (min-width: 768px) {
    .fi-main-ctn,
    .fi-main,
    .fi-page,
    [class*="container"] {
        max-width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
}

@media (min-width: 1024px) {
    .fi-main-ctn,
    .fi-main,
    .fi-page,
    [class*="container"] {
        max-width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
}

@media (min-width: 1280px) {
    .fi-main-ctn,
    .fi-main,
    .fi-page,
    [class*="container"] {
        max-width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
}

@media (min-width: 1536px) {
    .fi-main-ctn,
    .fi-main,
    .fi-page,
    [class*="container"] {
        max-width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
}

/* Ensure the main wrapper doesn't center itself */
.fi-main-wrapper {
    margin-left: 0 !important;
    margin-right: 0 !important;
    max-width: 100% !important;
}

/* Add padding to form sections on individual record pages */
.fi-resource-view-record-page .fi-section-content,
.fi-resource-edit-record-page .fi-section-content,
.fi-resource-create-record-page .fi-section-content {
    padding-left: 1.5rem !important;
    padding-right: 1.5rem !important;
    padding-top: 1rem !important;
    padding-bottom: 1rem !important;
}

/* Override the general section-content rule for record pages with high specificity */
body.fi-body .fi-page.fi-resource-view-record-page .fi-section .fi-section-content,
body.fi-body .fi-page.fi-resource-edit-record-page .fi-section .fi-section-content,
body.fi-body .fi-page.fi-resource-create-record-page .fi-section .fi-section-content {
    padding-left: 1.5rem !important;
    padding-right: 1.5rem !important;
    padding-top: 1rem !important;
    padding-bottom: 1rem !important;
}

/* Status badge colors to match legacy system */
.label-danger {
    background-color: #dc3545 !important;
    color: white !important;
}

.label-warning {
    background-color: #ffc107 !important;
    color: #000 !important;
}

.label-info {
    background-color: #17a2b8 !important;
    color: white !important;
}

.label-primary {
    background-color: #007bff !important;
    color: white !important;
}

.label-success {
    background-color: #28a745 !important;
    color: white !important;
}

.label-default {
    background-color: #6c757d !important;
    color: white !important;
}

/* Increase height of filter dropdowns */
.fi-fo-select[multiple] .choices__list--dropdown,
.fi-fo-select .choices__list--dropdown {
    max-height: 350px !important; /* Increased by ~50px from default 300px */
}

/* Hide breadcrumbs */
.fi-breadcrumbs {
    display: none !important;
}

/* Hide active filters bar */
.fi-ta-filters-summary,
.fi-ta-filter-indicators {
    display: none !important;
}

/* Hide search, filters, and column toggles in relation manager tables */
.fi-resource-relation-manager .fi-ta-header-toolbar {
    display: none !important;
}

/* Alternative: Hide specific elements in relation manager */
.fi-resource-relation-manager .fi-ta-search,
.fi-resource-relation-manager .fi-ta-filters,
.fi-resource-relation-manager .fi-ta-col-toggle {
    display: none !important;
}

/* Filter layout is managed by filament-filters.css */

.fi-ta-filters-ctn {
    display: block !important;
}

/* Hide the original table search bar completely */
.fi-ta-search {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    overflow: hidden !important;
}

/* Hide the placeholder "All" text in multi-select filters */
.fi-fo-select[multiple] .choices__list--single {
    display: none !important;
}

/* Make Source and Status dropdowns taller */
.choices__list--dropdown {
    max-height: 32rem !important; /* Double the default height */
}

/* Fix the inner list height - override the default 15rem */
.choices__list--dropdown .choices__list,
.choices__list[aria-expanded] .choices__list {
    max-height: 31rem !important; /* Double the default 15rem */
}

/* Specific height for Source and Status filter dropdowns */
select[name*="tableFilters[source]"] + .choices .choices__list--dropdown,
select[name*="tableFilters[status]"] + .choices .choices__list--dropdown,
.choices[data-type*="select-multiple"] .choices__list--dropdown {
    max-height: 32rem !important;
    height: auto !important;
}

/* Alternative selector approach */
.fi-ta-filters .choices__list--dropdown {
    max-height: 32rem !important;
}

/* Ensure the inner list also gets the height */
.fi-ta-filters .choices__list[role="listbox"] {
    max-height: 31rem !important;
}

/* Adjust filter field height for single line */
.fi-fo-select[multiple] .choices__inner {
    min-height: 40px !important;
    padding-bottom: 4px !important;
}

/* Style Filament badges with custom status colors */
.fi-badge:has(span.label-danger) {
    --c-50: 254, 226, 226 !important;
    --c-400: 248, 113, 113 !important;
    --c-600: 220, 53, 69 !important;
    background-color: rgb(254 226 226) !important;
    color: rgb(220 53 69) !important;
    ring-color: rgb(220 53 69 / 0.1) !important;
}

.dark .fi-badge:has(span.label-danger) {
    background-color: rgb(220 53 69 / 0.1) !important;
    color: rgb(248 113 113) !important;
    ring-color: rgb(248 113 113 / 0.3) !important;
}

.fi-badge:has(span.label-warning) {
    --c-50: 255, 251, 235 !important;
    --c-400: 251, 191, 36 !important;
    --c-600: 255, 193, 7 !important;
    background-color: rgb(255 251 235) !important;
    color: #000 !important; /* Black text for warning */
    ring-color: rgb(255 193 7 / 0.1) !important;
}

.dark .fi-badge:has(span.label-warning) {
    background-color: rgb(255 193 7 / 0.1) !important;
    color: rgb(251 191 36) !important;
    ring-color: rgb(251 191 36 / 0.3) !important;
}

.fi-badge:has(span.label-info) {
    --c-50: 224, 242, 254 !important;
    --c-400: 56, 189, 248 !important;
    --c-600: 23, 162, 184 !important;
    background-color: rgb(224 242 254) !important;
    color: rgb(23 162 184) !important;
    ring-color: rgb(23 162 184 / 0.1) !important;
}

.dark .fi-badge:has(span.label-info) {
    background-color: rgb(23 162 184 / 0.1) !important;
    color: rgb(56 189 248) !important;
    ring-color: rgb(56 189 248 / 0.3) !important;
}

.fi-badge:has(span.label-primary) {
    --c-50: 219, 234, 254 !important;
    --c-400: 96, 165, 250 !important;
    --c-600: 0, 123, 255 !important;
    background-color: rgb(219 234 254) !important;
    color: rgb(0 123 255) !important;
    ring-color: rgb(0 123 255 / 0.1) !important;
}

.dark .fi-badge:has(span.label-primary) {
    background-color: rgb(0 123 255 / 0.1) !important;
    color: rgb(96 165 250) !important;
    ring-color: rgb(96 165 250 / 0.3) !important;
}

.fi-badge:has(span.label-success) {
    --c-50: 220, 252, 231 !important;
    --c-400: 52, 211, 153 !important;
    --c-600: 40, 167, 69 !important;
    background-color: rgb(220 252 231) !important;
    color: rgb(40 167 69) !important;
    ring-color: rgb(40 167 69 / 0.1) !important;
}

.dark .fi-badge:has(span.label-success) {
    background-color: rgb(40 167 69 / 0.1) !important;
    color: rgb(52 211 153) !important;
    ring-color: rgb(52 211 153 / 0.3) !important;
}

.fi-badge:has(span.label-default) {
    --c-50: 243, 244, 246 !important;
    --c-400: 156, 163, 175 !important;
    --c-600: 108, 117, 125 !important;
    background-color: rgb(243 244 246) !important;
    color: rgb(108 117 125) !important;
    ring-color: rgb(108 117 125 / 0.1) !important;
}

.dark .fi-badge:has(span.label-default) {
    background-color: rgb(108 117 125 / 0.1) !important;
    color: rgb(156 163 175) !important;
    ring-color: rgb(156 163 175 / 0.3) !important;
}


/* Left-align Shipping Address header (4th column) */
.fi-ta-table thead tr th:nth-child(4) {
    text-align: left !important;
}

.fi-ta-table thead tr th:nth-child(4) .fi-ta-header-cell {
    display: flex !important;
    justify-content: flex-start !important;
}

.fi-ta-table thead tr th:nth-child(4) .fi-ta-header-cell-label {
    text-align: left !important;
    margin: 0 !important;
    margin-left: 2px !important;
    display: inline !important;
}

/* Center the Status column header text (6th column) */
.fi-ta-table thead tr th:nth-child(6) .fi-ta-header-cell-label {
    text-align: center !important;
    display: block !important;
    width: 100% !important;
    margin-left: -7px !important;
}

/* Center Actions header (7th column - now before Date) */
.fi-ta-table thead tr th:nth-child(7) .fi-ta-header-cell-label {
    text-align: center !important;
    display: block !important;
    width: 100% !important;
}

/* Move Date Placed header 5px to the left (8th column - now after Actions) */
.fi-ta-table thead tr th:nth-child(8) .fi-ta-header-cell-label {
    margin-left: -5px !important;
}

/* Center Order # header and move 5px left */
.fi-ta-table thead tr th:nth-child(1) .fi-ta-header-cell-label {
    text-align: center !important;
    display: block !important;
    width: 100% !important;
    margin-left: -5px !important;
}

/* Center Source header and move 4px left */
.fi-ta-table thead tr th:nth-child(2) .fi-ta-header-cell-label {
    text-align: center !important;
    display: block !important;
    width: 100% !important;
    margin-left: -4px !important;
}

/* Move Customer header 3px left */
.fi-ta-table thead tr th:nth-child(3) .fi-ta-header-cell-label {
    margin-left: -3px !important;
}

/* Move Order Total header 6px right */
.fi-ta-table thead tr th:nth-child(5) .fi-ta-header-cell-label {
    margin-left: 6px !important;
}

/* Completely hide the column after Date Placed (9th column - hidden order_id column) */
.fi-ta-table thead tr th:nth-child(9),
.fi-ta-table tbody tr td:nth-child(9) {
    display: none !important;
}

/* Also hide in colgroup if it exists */
.fi-ta-table colgroup col:nth-child(9) {
    display: none !important;
}

/* Hide the empty column before order notes in expanded rows */
.fi-ta-table tbody tr[style*="background"] td:first-child {
    display: none !important;
}

/* Remove margin/padding from note container div */
.fi-ta-table tbody tr td[colspan] .note-container {
    margin: 0 !important;
    padding: 0 !important;
}

/* Also try targeting any div that might be the note container */
.fi-ta-table tbody tr td[colspan] > div {
    margin: 0 !important;
    padding: 0 !important;
}

/* Remove gaps between columns in the order notes table */
.fi-ta-table tbody tr td[colspan] table {
    border-spacing: 0 !important;
    border-collapse: collapse !important;
}

/* Remove padding from cells in the order notes table */
.fi-ta-table tbody tr td[colspan] table td {
    padding: 0 !important;
    padding-top: 4px !important;
    padding-bottom: 4px !important;
}

/* Target only the deeply nested divs that are the order notes rows */
/* Skip the first two levels to avoid the header content */
.fi-ta-table tbody tr td[colspan] > div > div > div > div[style*="margin"] {
    margin-left: 0 !important;
    margin-right: 0 !important;
}

.fi-ta-table tbody tr td[colspan] > div > div > div > div[style*="gap"] {
    gap: 0 !important;
    column-gap: 0 !important;
}

/* Even more specific - target 4 levels deep */
.fi-ta-table tbody tr td[colspan] > div > div > div > div > div[style*="margin"] {
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* Target flex containers that are deeply nested */
.fi-ta-table tbody tr td[colspan] > div > div > div[style*="display: flex"] > div {
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* Additional rule to catch the specific yellow highlighted gaps */
.fi-ta-table tbody tr td[colspan] [style*="margin"]:not(:first-child > *):not(:nth-child(2) > *) {
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* Target elements with gap in deeply nested structure */
.fi-ta-table tbody tr td[colspan] > div > div > div[style*="gap"] {
    gap: 0 !important;
    column-gap: 0 !important;
}



/* Order search section styling - targets the section component within filters */
.fi-ta-filters .fi-section {
    background: #f9fafb !important;
    border: 2px solid #e5e7eb !important;
    border-radius: 0.5rem !important;
    padding: 1rem !important;
}

.dark .fi-ta-filters .fi-section {
    background: rgba(255, 255, 255, 0.05) !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
}

/* Hide all search bars at the top of the page */
.fi-global-search,
.fi-global-search-field,
.fi-global-search-input,
[class*="global-search"],
[class*="globalSearch"] {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    width: 0 !important;
    overflow: hidden !important;
}

/* Hide the search container in the topbar */
.fi-topbar nav > div:has(.fi-global-search),
.fi-topbar nav > div:has([class*="search"]) {
    display: none !important;
}

/* Hide any search input in the header/topbar */
.fi-topbar input[type="search"],
.fi-topbar input[placeholder*="Search"],
.fi-topbar input[placeholder*="search"],
.fi-header input[type="search"],
.fi-header input[placeholder*="Search"],
.fi-header input[placeholder*="search"] {
    display: none !important;
}

/* Hide parent containers of search inputs */
.fi-topbar form:has(input[type="search"]),
.fi-topbar div:has(input[type="search"]),
.fi-header form:has(input[type="search"]),
.fi-header div:has(input[type="search"]) {
    display: none !important;
}

/* Date filter compact spacing - handled by filament-filters.css */

/* Style checkbox filters to display inline */
.fi-ta-filter .fi-cb-wrp {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
}

.fi-ta-filter .fi-cb-lbl {
    flex-grow: 1 !important;
    margin-bottom: 0 !important;
}

.fi-ta-filter .fi-cb input[type="checkbox"] {
    margin-left: 0.5rem !important;
}

/* Ensure the checkbox and label are on the same line */
.fi-ta-filter .fi-fo-field-wrp-label + .fi-fo-field {
    margin-top: 0 !important;
}

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

/* Make the entire filter area clickable */
.fi-ta-filter .fi-cb-wrp label {
    cursor: pointer !important;
    width: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
}

/* Style for order notes column */
.fi-ta-text-item-notes {
    min-width: 300px !important;
}

/* Make notes more prominent */
.fi-ta-text-item-notes .bg-gray-100 {
    background-color: #e0f2fe !important;
    border: 1px solid #7dd3fc !important;
}

.fi-ta-text-item-notes .dark\:bg-gray-800 {
    background-color: #1e293b !important;
    border: 1px solid #475569 !important;
}

/* Increase contrast for note dates/authors */
.fi-ta-text-item-notes .font-semibold {
    font-weight: 700 !important;
}

/* Styles for injected note rows */
.order-notes-row td {
    border: none !important;
    background-color: transparent !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

.order-notes-row {
    border: none !important;
}

/* Remove border from order row when followed by notes */
tr:has(+ .order-notes-row) td {
    border-bottom: none !important;
}

/* Dark mode support for order notes */
.dark .order-notes-row [style*="color: rgb(59 130 246)"] {
    color: rgb(96 165 250) !important;
}

.dark .order-notes-row [style*="color: rgb(107 114 128)"] {
    color: rgb(156 163 175) !important;
}

.dark .order-notes-row [style*="color: rgb(75 85 99)"] {
    color: rgb(209 213 219) !important;
}

/* Support for HTML in notes */
.order-notes-row b,
.order-notes-row strong {
    font-weight: 600;
}

.order-notes-row i,
.order-notes-row em {
    font-style: italic;
}

.order-notes-row u {
    text-decoration: underline;
}

.order-notes-row a {
    color: rgb(59 130 246);
    text-decoration: underline;
}

.dark .order-notes-row a {
    color: rgb(96 165 250);
}

/* Subtle Edit Notes button in dark mode */
.dark .order-notes-row .edit-notes-btn {
    color: rgb(156 163 175) !important;
    border-color: rgb(75 85 99) !important;
}

.dark .order-notes-row .edit-notes-btn:hover {
    color: rgb(209 213 219) !important;
    border-color: rgb(107 114 128) !important;
}

/* Remove sticky behavior from header */
.fi-topbar {
    position: relative !important;
}

.fi-topbar-nav {
    position: relative !important;
}

/* Force actions column to be visible */
.fi-ta-actions-column,
th:has(.fi-ta-actions),
td.fi-ta-actions-cell {
    display: table-cell !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: auto !important;
    min-width: 150px !important;
}

/* Edit Notes Modal Styles */
.edit-notes-modal-content {
    background-color: white;
    border: 1px solid #e5e7eb;
}

.dark .edit-notes-modal-content {
    background-color: #1f2937;
    border: 1px solid #374151;
}

.modal-title {
    color: #1f2937;
}

.dark .modal-title {
    color: #f3f4f6;
}

.modal-close {
    color: #6b7280;
}

.dark .modal-close {
    color: #9ca3af;
}

.modal-close:hover {
    color: #374151;
}

.dark .modal-close:hover {
    color: #d1d5db;
}

.section-title {
    color: #374151;
}

.dark .section-title {
    color: #d1d5db;
}

.note-item {
    background-color: #f9fafb;
    border: 1px solid #e5e7eb;
}

.dark .note-item {
    background-color: #111827;
    border: 1px solid #374151;
}

.note-meta {
    color: #374151;
}

.dark .note-meta {
    color: #e5e7eb;
}

.delete-label {
    color: #dc2626;
}

.dark .delete-label {
    color: #ef4444;
}

.note-textarea, .author-input {
    background-color: white;
    border: 1px solid #d1d5db;
    color: #1f2937;
}

.dark .note-textarea, .dark .author-input {
    background-color: #1f2937;
    border: 1px solid #4b5563;
    color: #f3f4f6;
}

.note-textarea:focus, .author-input:focus {
    outline: none;
    border-color: #3b82f6;
}

.no-notes {
    color: #6b7280;
}

.dark .no-notes {
    color: #9ca3af;
}

.btn-primary {
    background-color: #3b82f6;
    color: white;
}

.btn-primary:hover {
    background-color: #2563eb;
}

.btn-secondary {
    background-color: #6b7280;
    color: white;
}

.btn-secondary:hover {
    background-color: #4b5563;
}

.order-notes-container {
    padding-left: 2rem;
    padding-right: 1rem;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
}

.order-notes-header {
    font-size: 0.75rem;
    font-weight: 600;
    color: #4b5563;
    margin-bottom: 0.5rem;
}

.dark .order-notes-header {
    color: #9ca3af;
}

.order-note-item {
    margin-bottom: 0.75rem;
    font-size: 0.875rem;
}

.order-note-author {
    font-weight: 500;
    color: #374151;
}

.dark .order-note-author {
    color: #e5e7eb;
}

.order-note-date {
    color: #6b7280;
    margin-left: 0.5rem;
}

.dark .order-note-date {
    color: #9ca3af;
}

.order-note-text {
    color: #4b5563;
    margin-top: 0.25rem;
}

.dark .order-note-text {
    color: #d1d5db;
}

/* Hide the order_id column that contains notes data */
.order-id-with-notes {
    width: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    overflow: hidden !important;
}

/* Hide the column header for order_id */
th:has(+ th .fi-ta-header-cell-label:empty) {
    width: 0 !important;
    padding: 0 !important;
    border: 0 !important;
}

/* Ensure action buttons are visible */
.fi-ta-actions {
    display: flex !important;
    gap: 0.5rem !important;
    visibility: visible !important;
    opacity: 1 !important;
}

.fi-ta-actions .fi-btn {
    display: inline-flex !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* Make sure actions column is not hidden */
.fi-ta-actions-column {
    display: table-cell !important;
    visibility: visible !important;
    width: auto !important;
}

/* Ensure action buttons in table rows are visible */
td.fi-ta-actions-cell {
    display: table-cell !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* Smooth transitions for table updates */
.fi-ta-table tbody tr {
    transition: opacity 0.15s ease-in-out;
}

/* Fix text selection in order notes */
.order-notes-row {
    user-select: text !important;
    -webkit-user-select: text !important;
    -moz-user-select: text !important;
    -ms-user-select: text !important;
}

.order-notes-row * {
    user-select: text !important;
    -webkit-user-select: text !important;
    -moz-user-select: text !important;
    -ms-user-select: text !important;
}

/* Prevent parent elements from interfering with selection */
.fi-ta-table {
    user-select: auto !important;
}

.fi-ta-table tbody {
    user-select: auto !important;
}

/* Ensure button doesn't interfere with selection */
.order-notes-row .edit-notes-btn {
    user-select: none !important;
    -webkit-user-select: none !important;
    -moz-user-select: none !important;
    -ms-user-select: none !important;
}

/* Prevent flickering during polling */
.fi-ta-table[wire\:poll] tbody {
    min-height: 200px;
}

/* Keep table stable during updates */
.fi-ta-content {
    min-height: 400px;
    transition: none;
}

/* Prevent layout shift */
.fi-ta-table {
    table-layout: fixed;
}

/* Ensure tooltips appear above all other elements */
[role="tooltip"],
.tooltip,
.fi-tooltip,
[data-tooltip],
[x-tooltip],
div[x-show][x-transition][x-cloak] {
    z-index: 99999 !important;
}

/* Hide the arrow in sidebar tooltips */
.fi-sidebar [role="tooltip"]::before,
.fi-sidebar [role="tooltip"]::after,
.fi-sidebar .tooltip-arrow,
.fi-sidebar [x-tooltip] + div::before,
.fi-sidebar [x-tooltip] + div::after,
.fi-sidebar-item [role="tooltip"]::before,
.fi-sidebar-item [role="tooltip"]::after {
    display: none !important;
}

/* Filament tooltip wrapper */
.fi-tooltip-host + div,
[x-data*="tooltip"] + div {
    z-index: 99999 !important;
}

/* Ensure tooltip containers are above panels */
.tippy-box,
[data-tippy-root],
.tooltip-content {
    z-index: 99999 !important;
}

/* Product name tooltips specifically */
.fi-ta-text-item [role="tooltip"],
.fi-ta-text [role="tooltip"],
td [role="tooltip"] {
    z-index: 99999 !important;
}

/* Fix overflow clipping for order items rows */
.order-items-row,
.order-items-row td,
.order-items-row .order-items-container,
.order-items-container {
    overflow: visible !important;
}

/* Ensure table cells don't clip tooltips */
.fi-ta-table td {
    overflow: visible !important;
    position: relative;
}

/* Make sure the table wrapper doesn't clip */
.fi-ta-content,
.fi-ta-content-ctn {
    overflow: visible !important;
}

/* Allow tooltips to escape their containers */
.fi-ta-text-item {
    position: relative;
    overflow: visible !important;
}

/* Force tooltip positioning to be relative to viewport */
[role="tooltip"],
.tooltip {
    position: fixed !important;
    z-index: 99999 !important;
}

/* Fix Filament/Alpine.js tooltip positioning */
[x-tooltip],
[x-data*="tooltip"] {
    position: relative !important;
}

/* Ensure Filament tooltip panels are visible */
.fi-dropdown-panel,
[x-float],
[x-ref="panel"],
[x-transition\\:enter] {
    z-index: 99999 !important;
    position: fixed !important;
}

/* Fix for table containers that might clip tooltips */
.fi-ta-ctn {
    overflow: visible !important;
    position: static !important;
}

/* Ensure order items section doesn't clip */
[x-show*="showItems"],
.order-items-section,
.b2b-items-section {
    overflow: visible !important;
    position: static !important;
}

/* Fix table wrapper overflow */
.fi-ta-content-ctn {
    overflow-x: auto !important;
    overflow-y: visible !important;
}

/* Tooltip container fixes for Filament */
[x-cloak] {
    z-index: 99999 !important;
}

/* Alpine.js floating UI fixes */
[x-anchor],
[x-float\\.placement],
[x-float\\.offset] {
    z-index: 99999 !important;
}

/* Ensure tooltips can escape their table cells */
td:has([x-tooltip]),
td:has([title]) {
    position: static !important;
    overflow: visible !important;
}

/* Fix narrow Sign In button on login page */
.fi-login .fi-btn,
.fi-login form button[type="submit"],
form.fi-form button[type="submit"].fi-btn-submit {
    min-width: 200px !important;
    width: auto !important;
}

/* Specifically target the login page submit button */
.fi-simple-page .fi-form-actions button[type="submit"] {
    min-width: 200px !important;
}

/* Force Actions column to be visible */
.fi-ta-header-cell-custom-actions,
.fi-ta-cell-custom-actions,
th:has(.fi-ta-header-cell-custom-actions),
td.fi-ta-cell-custom-actions,
[data-column="custom_actions"] {
    display: table-cell !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: auto !important;
    min-width: 100px !important;
    max-width: 120px !important;
}

/* Style Filament's row actions to appear after our custom actions */
.fi-ta-actions-cell {
    vertical-align: middle !important;
}

/* If row actions appear as a dropdown button, style it appropriately */
.fi-ta-actions {
    justify-content: center !important;
}

/* Ensure custom action buttons container doesn't overflow */
.custom-action-buttons {
    width: 100% !important;
    max-width: 100px !important;
}

/* Specific rules for fulfillment page to ensure full width */
.fi-resource-fulfillment,
.fi-page[data-slug="fulfillment"],
[class*="fulfillment"] .fi-page {
    max-width: 100% !important;
    width: 100% !important;
}

/* Remove any max-width constraints on fulfillment page containers */
.fi-resource-fulfillment .fi-main,
.fi-resource-fulfillment .fi-main-ctn,
.fi-resource-fulfillment .fi-page,
.fi-resource-fulfillment .fi-section,
.fi-resource-fulfillment .fi-section-content,
.fi-resource-fulfillment .fi-ta-ctn,
[class*="fulfillment"] .fi-main,
[class*="fulfillment"] .fi-main-ctn,
[class*="fulfillment"] .fi-page,
[class*="fulfillment"] .fi-section,
[class*="fulfillment"] .fi-section-content,
[class*="fulfillment"] .fi-ta-ctn {
    max-width: 100% !important;
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0.5rem !important;
}

/* Ensure fulfillment table uses full width */
.fi-resource-fulfillment .fi-ta-table,
[class*="fulfillment"] .fi-ta-table {
    width: 100% !important;
    max-width: 100% !important;
}

/* Remove any container constraints on the fulfillment table wrapper */
.fi-resource-fulfillment .fi-ta-content,
.fi-resource-fulfillment .fi-ta-content-ctn,
[class*="fulfillment"] .fi-ta-content,
[class*="fulfillment"] .fi-ta-content-ctn {
    max-width: 100% !important;
    width: 100% !important;
}

/* Ensure the x-filament-panels::page component on fulfillment page is full width */
.fi-resource-fulfillment x-filament-panels\\:\\:page,
[class*="fulfillment"] x-filament-panels\\:\\:page {
    max-width: 100% !important;
    width: 100% !important;
}

/* AGGRESSIVE full-width rules for fulfillment page - override EVERYTHING */
body:has(.fi-resource-order-fulfillment-resource) .fi-main,
body:has(.fi-resource-order-fulfillment-resource) .fi-main-ctn,
body:has(.fi-resource-order-fulfillment-resource) .fi-page,
body:has(.fi-resource-order-fulfillment-resource) .fi-section,
body:has(.fi-resource-order-fulfillment-resource) .fi-section-content,
body:has(.fi-resource-order-fulfillment-resource) .fi-ta-ctn,
body:has(.fi-resource-order-fulfillment-resource) .fi-ta-content,
body:has(.fi-resource-order-fulfillment-resource) .fi-ta-content-ctn,
body:has(.fi-resource-order-fulfillment-resource) [class*="max-w-"],
body.fi-resource-order-fulfillment-resource .fi-main,
body.fi-resource-order-fulfillment-resource .fi-main-ctn,
body.fi-resource-order-fulfillment-resource .fi-page,
body.fi-resource-order-fulfillment-resource .fi-section,
body.fi-resource-order-fulfillment-resource .fi-section-content,
body.fi-resource-order-fulfillment-resource .fi-ta-ctn,
body.fi-resource-order-fulfillment-resource .fi-ta-content,
body.fi-resource-order-fulfillment-resource .fi-ta-content-ctn,
body.fi-resource-order-fulfillment-resource [class*="max-w-"] {
    max-width: 100% !important;
    width: 100% !important;
}

/* Remove ALL container constraints on fulfillment page */
.fi-resource-order-fulfillment-resource .container,
.fi-resource-order-fulfillment-resource .mx-auto,
.fi-resource-order-fulfillment-resource [class*="container"] {
    max-width: 100% !important;
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* Fix column width distribution on fulfillment page for wide screens */
.fi-resource-fulfillment .fi-ta-table,
[class*="fulfillment"] .fi-ta-table,
.fi-resource-order-fulfillment-resource .fi-ta-table {
    table-layout: auto !important; /* Allow flexible column sizing */
    width: 100% !important;
    min-width: 100% !important;
}

/* Set minimum column widths for fulfillment table - let them grow as needed */
.fi-resource-fulfillment .fi-ta-table th:nth-child(1),
.fi-resource-fulfillment .fi-ta-table td:nth-child(1),
.fi-resource-order-fulfillment-resource .fi-ta-table th:nth-child(1),
.fi-resource-order-fulfillment-resource .fi-ta-table td:nth-child(1) {
    min-width: 100px !important; /* Order # */
}

.fi-resource-fulfillment .fi-ta-table th:nth-child(2),
.fi-resource-fulfillment .fi-ta-table td:nth-child(2),
.fi-resource-order-fulfillment-resource .fi-ta-table th:nth-child(2),
.fi-resource-order-fulfillment-resource .fi-ta-table td:nth-child(2) {
    min-width: 80px !important; /* Source */
}

.fi-resource-fulfillment .fi-ta-table th:nth-child(3),
.fi-resource-fulfillment .fi-ta-table td:nth-child(3),
.fi-resource-order-fulfillment-resource .fi-ta-table th:nth-child(3),
.fi-resource-order-fulfillment-resource .fi-ta-table td:nth-child(3) {
    min-width: 150px !important; /* Customer */
}

.fi-resource-fulfillment .fi-ta-table th:nth-child(4),
.fi-resource-fulfillment .fi-ta-table td:nth-child(4),
.fi-resource-order-fulfillment-resource .fi-ta-table th:nth-child(4),
.fi-resource-order-fulfillment-resource .fi-ta-table td:nth-child(4) {
    min-width: 200px !important; /* Shipping Address */
    width: auto !important; /* Let it expand to fill space */
}

.fi-resource-fulfillment .fi-ta-table th:nth-child(5),
.fi-resource-fulfillment .fi-ta-table td:nth-child(5),
.fi-resource-order-fulfillment-resource .fi-ta-table th:nth-child(5),
.fi-resource-order-fulfillment-resource .fi-ta-table td:nth-child(5) {
    min-width: 100px !important; /* Order Total */
}

.fi-resource-fulfillment .fi-ta-table th:nth-child(6),
.fi-resource-fulfillment .fi-ta-table td:nth-child(6),
.fi-resource-order-fulfillment-resource .fi-ta-table th:nth-child(6),
.fi-resource-order-fulfillment-resource .fi-ta-table td:nth-child(6) {
    min-width: 120px !important; /* Status */
}

.fi-resource-fulfillment .fi-ta-table th:nth-child(7),
.fi-resource-fulfillment .fi-ta-table td:nth-child(7),
.fi-resource-order-fulfillment-resource .fi-ta-table th:nth-child(7),
.fi-resource-order-fulfillment-resource .fi-ta-table td:nth-child(7) {
    min-width: 120px !important; /* Actions */
}

.fi-resource-fulfillment .fi-ta-table th:nth-child(8),
.fi-resource-fulfillment .fi-ta-table td:nth-child(8),
.fi-resource-order-fulfillment-resource .fi-ta-table th:nth-child(8),
.fi-resource-order-fulfillment-resource .fi-ta-table td:nth-child(8) {
    min-width: 120px !important; /* Date Placed */
}

/* For the AutoFulfill column (last visible column) - let it take remaining space */
.fi-resource-fulfillment .fi-ta-table th:last-child:not(:nth-child(9)),
.fi-resource-fulfillment .fi-ta-table td:last-child:not(:nth-child(9)),
.fi-resource-order-fulfillment-resource .fi-ta-table th:last-child:not(:nth-child(9)),
.fi-resource-order-fulfillment-resource .fi-ta-table td:last-child:not(:nth-child(9)) {
    min-width: 140px !important; /* AutoFulfill */
    width: auto !important;
}

/* On very wide screens (27" and larger), adjust distribution */
@media (min-width: 2560px) {
    .fi-resource-fulfillment .fi-ta-table th:nth-child(3),
    .fi-resource-fulfillment .fi-ta-table td:nth-child(3) {
        width: 18% !important; /* Customer - more space */
    }
    
    .fi-resource-fulfillment .fi-ta-table th:nth-child(4),
    .fi-resource-fulfillment .fi-ta-table td:nth-child(4) {
        width: 25% !important; /* Shipping Address - more space */
    }
    
    .fi-resource-fulfillment .fi-ta-table th:last-child:not(:nth-child(9)),
    .fi-resource-fulfillment .fi-ta-table td:last-child:not(:nth-child(9)) {
        width: auto !important; /* AutoFulfill - take remaining space */
        min-width: 140px !important;
    }
}

/* Ensure the table header row uses full width */
.fi-resource-fulfillment .fi-ta-header,
[class*="fulfillment"] .fi-ta-header {
    width: 100% !important;
}

/* Ensure table body rows use full width */
.fi-resource-fulfillment .fi-ta-table tbody tr,
[class*="fulfillment"] .fi-ta-table tbody tr {
    width: 100% !important;
}

/* Fix any potential wrapper constraints */
.fi-resource-fulfillment .fi-ta-table-wrap,
[class*="fulfillment"] .fi-ta-table-wrap {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: auto !important;
}