/**
 * Amazon Admin Panel Theme for Smokevana ERP
 * Inspired by Amazon Seller Central / Vendor Central design
 * 
 * Color Palette:
 * - Primary Navy: #232F3E (main sidebar, headers)
 * - Secondary Navy: #37475A (hover states, secondary elements)
 * - Tertiary Navy: #485769 (lighter elements)
 * - Amazon Orange: #FF9900 (accent, CTAs, active states)
 * - Light Orange: #FFAC33 (hover states)
 * - Background Gray: #EAEDED (main content background)
 * - Light Gray: #F5F5F5 (cards, panels)
 * - Border Gray: #D5D9D9 (borders)
 * - Text Dark: #0F1111 (primary text)
 * - Text Medium: #565959 (secondary text)
 * - White: #FFFFFF
 */

/* ============================================
   CSS VARIABLES - Amazon Theme Colors
   ============================================ */
   :root {
    --amazon-navy-primary: #232F3E;
    --amazon-navy-secondary: #37475A;
    --amazon-navy-tertiary: #485769;
    --amazon-orange: #FF9900;
    --amazon-orange-hover: #FFAC33;
    --amazon-orange-light: #FFF4E5;
    --amazon-bg-gray: #EAEDED;
    --amazon-light-gray: #F5F5F5;
    --amazon-border: #D5D9D9;
    --amazon-text-dark: #0F1111;
    --amazon-text-medium: #565959;
    --amazon-text-light: #FFFFFF;
    --amazon-success: #067D62;
    --amazon-error: #B12704;
    --amazon-warning: #C45500;
    --amazon-info: #007185;
    --amazon-info-hover: #006073;
    /* Banner shell tokens */
    --sv-banner-bg: #232f3e;
    --sv-banner-bg-2: #1f2a37;
    --sv-banner-accent: #ff9900;
    --sv-banner-radius: 10px;
    /* Banner sizing tuned to the reference header */
    --sv-banner-padding: 18px 24px;
    --sv-banner-gap: 8px;
    --sv-banner-min-height: 86px;
}

/* ===== Global table borders (match Manage Orders across all modules) ===== */
.table.table-bordered {
    border-collapse: collapse;
}
.table.table-bordered > thead > tr > th,
.table.table-bordered > thead > tr > td,
.table.table-bordered > tbody > tr > th,
.table.table-bordered > tbody > tr > td,
.table.table-bordered > tfoot > tr > th,
.table.table-bordered > tfoot > tr > td {
    border: 1px solid #e5e7eb !important;
}

/* Amazon data tables (Sales Order, Sales Invoice, etc.) – match Manage Order grid */
.amazon-table {
    border-collapse: collapse;
}
.amazon-table thead th,
.amazon-table tbody td,
.amazon-table tfoot td {
    border: 1px solid #e5e7eb !important;
}

/* ============================================
   SIDEBAR STYLES - Amazon Admin Panel
   ============================================ */

/* Sidebar container */
aside.side-bar {
    background: var(--amazon-navy-primary) !important;
    border-right: none !important;
}

/* Sidebar menu wrapper */
#side-bar {
    background: var(--amazon-navy-primary) !important;
    border-right: none !important;
}

/* Logo area at top of sidebar */
body>div.tw-flex>aside>a,
aside.side-bar>a {
    background: var(--amazon-navy-primary) !important;
    border-bottom: 1px solid var(--amazon-navy-secondary) !important;
    height: auto !important;
    padding: 12px !important;
}

/* Sidebar menu items - normal state */
.side-bar-normal {
    color: var(--amazon-text-light) !important;
    font-weight: 400 !important;
}

/* Sidebar menu items hover - Amazon yellow/orange highlight */
.side-bar-normal:hover {
    color: var(--amazon-orange) !important;
    background: rgba(255, 153, 0, 0.15) !important;
    border-radius: 5px;
    transition: background 0.2s ease, color 0.2s ease;
}

/* Sidebar active menu item - Parent level */
#side-bar>div.side-bar-active,
#side-bar>a.side-bar-active {
    color: var(--amazon-orange) !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
}

/* Parent dropdown toggle when active */
#side-bar .drop_down.side-bar-active,
#side-bar div.side-bar-active>.drop_down {
    color: var(--amazon-orange) !important;
    background: transparent !important;
    border: none !important;
}

/* Non-dropdown menu items when active */
#side-bar>a.side-bar-active:not(.drop_down) {
    color: var(--amazon-orange) !important;
    background: rgba(255, 153, 0, 0.15) !important;
}

/* AGGRESSIVE: Remove ALL border-left from entire sidebar */
#side-bar *,
#side-bar *::before,
#side-bar *::after,
aside.side-bar *,
aside.side-bar *::before,
aside.side-bar *::after {
    border-left-color: transparent !important;
    border-left-width: 0 !important;
    border-left-style: none !important;
}

/* Remove any pseudo-element borders from active states */
#side-bar .side-bar-active::before,
#side-bar .side-bar-active::after,
.side-bar-active::before,
.side-bar-active::after,
#side-bar .drop_down::before,
#side-bar .drop_down::after,
#side-bar a::before,
#side-bar a::after {
    display: none !important;
    content: none !important;
    border: none !important;
    background: none !important;
}

/* Dropdown arrow icons in sidebar */
#side-bar svg.svg.tw-ml-auto.tw-text-gray-500.tw-size-4.tw-shrink-0,
#side-bar .tw-ml-auto {
    color: rgba(255, 255, 255, 0.6) !important;
}

/* Dropdown wrapper - ensure no background variation */
#side-bar>div {
    background: transparent !important;
}

#side-bar>div.side-bar-active,
#side-bar>div.tw-pb-1,
#side-bar>div.tw-rounded-md {
    background: transparent !important;
    border-radius: 0 !important;
    padding-bottom: 0 !important;
}

/* Remove tw-bg-gray-200 from active states completely */
#side-bar .tw-bg-gray-200,
#side-bar [class*="tw-bg-gray"] {
    background: transparent !important;
}

/* Child menu items container - UNIFORM background with parent sidebar */
#side-bar .chiled {
    background: transparent !important;
    border-radius: 0 !important;
    margin: 0 !important;
    margin-left: 0 !important;
    margin-bottom: 0 !important;
    padding: 4px 0 4px 0 !important;
    padding-left: 2.5rem !important;
}

/* Child menu vertical line - HIDE it completely */
#side-bar .chiled .tw-bg-gray-200,
#side-bar .chiled .tw-w-px,
#side-bar .chiled>.tw-absolute,
#side-bar .chiled [class*="tw-absolute"],
#side-bar .chiled div[class*="tw-w-px"],
#side-bar .chiled .tw-h-full,
#side-bar .chiled .tw-inset-y-0,
#side-bar .tw-border-l,
#side-bar [class*="tw-border-l"],
.chiled [class*="tw-bg-gray"],
.chiled [class*="tw-border"],
#side-bar .tw-border-l-2,
#side-bar .tw-border-l-4,
#side-bar [class*="border-primary"],
#side-bar [class*="border-orange"],
#side-bar [class*="border-yellow"],
#side-bar [style*="border-left"],
#side-bar [style*="border-color"] {
    display: none !important;
    visibility: hidden !important;
    width: 0 !important;
    height: 0 !important;
    opacity: 0 !important;
    border: none !important;
    background: transparent !important;
}

/* Hide any left border indicators on menu items */
#side-bar a,
#side-bar .drop_down,
#side-bar .chiled a,
#side-bar>div,
#side-bar>nav,
#side-bar nav>ul>li,
#side-bar nav>ul>li>*,
.drop_down,
.drop_down>* {
    border-left: 0 !important;
    border-right: 0 !important;
    border-left-width: 0 !important;
    border-left-color: transparent !important;
}

/* Remove ALL Tailwind border-left classes */
#side-bar .tw-border-l,
#side-bar .tw-border-l-2,
#side-bar .tw-border-l-4,
#side-bar .tw-border-l-8,
#side-bar [class*="tw-border-l-primary"],
#side-bar [class*="tw-border-primary"] {
    border-left: 0 !important;
    border-color: transparent !important;
}

/* Child menu items */
#side-bar .chiled a {
    color: rgba(255, 255, 255, 0.85) !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 6px 12px !important;
    margin: 0 !important;
    border-radius: 4px !important;
    transition: all 0.15s ease !important;
    background: transparent !important;
    font-size: 13px !important;
}

/* Style the SVG icons in submenu items */
#side-bar .chiled a svg {
    flex-shrink: 0 !important;
    opacity: 0.7 !important;
    width: 16px !important;
    height: 16px !important;
}

/* Hover state - subtle highlight */
#side-bar .chiled a:hover {
    color: var(--amazon-orange) !important;
    background: rgba(255, 153, 0, 0.1) !important;
}

/* Active state - clear distinction */
#side-bar .chiled a.side-bar-active,
#side-bar .chiled .side-bar-active {
    color: var(--amazon-orange) !important;
    background: rgba(255, 153, 0, 0.15) !important;
    font-weight: 500 !important;
}

#side-bar .chiled a.side-bar-active svg,
#side-bar .chiled .side-bar-active svg {
    opacity: 1 !important;
}

/* Sidebar heading/title */
.side-bar-heading {
    color: var(--amazon-text-light) !important;
}

/* Sidebar scrollbar */
#side-bar::-webkit-scrollbar {
    width: 6px;
}

#side-bar::-webkit-scrollbar-track {
    background: var(--amazon-navy-primary);
}

#side-bar::-webkit-scrollbar-thumb {
    background: var(--amazon-navy-secondary);
    border-radius: 3px;
}

#side-bar::-webkit-scrollbar-thumb:hover {
    background: var(--amazon-navy-tertiary);
}

/* ============================================
   HEADER STYLES - Amazon Admin Panel
   ============================================ */

/* Main header container */
#header_main_app {
    background: var(--amazon-navy-primary) !important;
    border-bottom: 1px solid var(--amazon-navy-secondary) !important;
}

/* Header text color */
#header_main_app,
#header_main_app * {
    color: var(--amazon-text-light);
}

/* Header navigation buttons */
#header_main_app button,
#header_main_app .tw-dw-btn,
#header_main_app details>summary {
    background: var(--amazon-navy-secondary) !important;
    border: none !important;
    color: var(--amazon-text-light) !important;
}

#header_main_app button:hover,
#header_main_app .tw-dw-btn:hover,
#header_main_app details>summary:hover {
    background: var(--amazon-navy-tertiary) !important;
    color: var(--amazon-orange) !important;
}

/* Calculator button */
#btnCalculator {
    background: var(--amazon-navy-secondary) !important;
}

#btnCalculator:hover {
    background: var(--amazon-navy-tertiary) !important;
}

/* Today's profit button */
#view_todays_profit {
    background: var(--amazon-navy-secondary) !important;
}

#view_todays_profit:hover {
    background: var(--amazon-navy-tertiary) !important;
}

/* Notifications button */
#show_unread_notifications {
    background: var(--amazon-navy-secondary) !important;
}

#show_unread_notifications:hover {
    background: var(--amazon-navy-tertiary) !important;
}

/* Date display button */
#header_main_app .tw-font-mono {
    background: var(--amazon-navy-secondary) !important;
    color: var(--amazon-text-light) !important;
}

/* Profile dropdown */
#header_main_app details.tw-dw-dropdown>summary {
    background: var(--amazon-navy-secondary) !important;
}

/* Dropdown menus */
#header_main_app ul.tw-dw-menu,
#header_main_app .tw-dw-dropdown-content {
    background: var(--amazon-text-light) !important;
    border: 1px solid var(--amazon-border) !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15) !important;
}

#header_main_app ul.tw-dw-menu a,
#header_main_app .tw-dw-dropdown-content a {
    color: var(--amazon-text-dark) !important;
}

#header_main_app ul.tw-dw-menu a:hover,
#header_main_app .tw-dw-dropdown-content a:hover {
    background: var(--amazon-orange-light) !important;
    color: var(--amazon-text-dark) !important;
}

/* Location switch button */
#toggle-location-btn {
    background: var(--amazon-orange) !important;
    color: var(--amazon-navy-primary) !important;
    font-weight: 600 !important;
}

#toggle-location-btn:hover {
    background: var(--amazon-orange-hover) !important;
}

/* Primary action buttons in header */
.tw-dw-btn-primary {
    background: var(--amazon-orange) !important;
    border-color: var(--amazon-orange) !important;
    color: var(--amazon-navy-primary) !important;
}

.tw-dw-btn-primary:hover {
    background: var(--amazon-orange-hover) !important;
    border-color: var(--amazon-orange-hover) !important;
}

/* ============================================
   MAIN CONTENT AREA / DASHBOARD
   ============================================ */

/* Main background */
body,
#main_background,
main.tw-flex {
    background: var(--amazon-bg-gray) !important;
}

/* Scrollable content container */
#scrollable-container {
    background: var(--amazon-bg-gray) !important;
}

#scrollable-container>div.tw-pb-6 {
    background: var(--amazon-navy-primary) !important;
}

#scrollable-container>div.tw-pb-6>div.tw-relative>div.tw-px-5.tw-isolate::before {
    background: var(--amazon-navy-primary) !important;
}

/* Section backgrounds */
section {
    background: var(--amazon-bg-gray) !important;
}

/* Customer View page - white dominant (override above) */
#scrollable-container section.customer-view-page,
section.customer-view-page {
    background: #ffffff !important;
}

#scrollable-container:has(section.customer-view-page) {
    background: #ffffff !important;
}

.customer-view-page .customer-view-info-box {
    background: #ffffff !important;
}

/* Customer View banner - Amazon #37475a */
.customer-view-page .customer-view-header {
    background: #37475a !important;
    border-color: #4a5d6e !important;
}

.customer-view-page .customer-view-title {
    color: #ffffff !important;
}

.customer-view-page .customer-view-subtitle {
    color: #b8c4ce !important;
}

/* Contact info card: Amazon #37475a (set in contact_basic_info.blade.php) */
.customer-view-page .contact-header-card {
    background: #37475a !important;
    border-color: #4a5d6e !important;
}

/* Content area padding */
#scrollable-container>div.tw-px-5.tw-py-6 {
    background: var(--amazon-bg-gray) !important;
}

/* ============================================
   DASHBOARD CARDS / STAT BOXES
   ============================================ */

/* Dashboard welcome text */
.tw-text-primary-800 {
    color: var(--amazon-text-light) !important;
}

/* Stat cards */
.tw-bg-white.tw-shadow-sm.tw-rounded-xl,
.tw-bg-white.tw-shadow-sm.hover\:tw-shadow-md.tw-rounded-xl {
    background: var(--amazon-text-light) !important;
    border: 1px solid var(--amazon-border) !important;
    border-radius: 8px !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08) !important;
}

.tw-bg-white.tw-shadow-sm.tw-rounded-xl:hover,
.tw-bg-white.tw-shadow-sm.hover\:tw-shadow-md.tw-rounded-xl:hover {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12) !important;
    transform: none !important;
}

/* Icon backgrounds in stat cards */
.tw-bg-sky-100 {
    background: var(--amazon-orange-light) !important;
}

.tw-text-sky-500 {
    color: var(--amazon-orange) !important;
}

.tw-bg-green-100 {
    background: #E3F2E7 !important;
}

.tw-text-green-500 {
    color: var(--amazon-success) !important;
}

.tw-bg-yellow-100 {
    background: #FFF8E5 !important;
}

.tw-text-yellow-500 {
    color: var(--amazon-warning) !important;
}

.tw-bg-red-100 {
    background: #FFEBE5 !important;
}

.tw-text-red-500 {
    color: var(--amazon-error) !important;
}

/* Card titles and values */
.tw-text-gray-500 {
    color: var(--amazon-text-medium) !important;
}

.tw-text-gray-900 {
    color: var(--amazon-text-dark) !important;
}

/* ============================================
   DATA TABLES - Amazon Style
   ============================================ */
table.dataTable th,
table.dataTable td {
    box-sizing: border-box !important;
}
/* Hide DataTables header scrollbar completely */
.dataTables_scrollHead {
    overflow: hidden !important;
    scrollbar-width: none !important; /* Firefox */
    -ms-overflow-style: none !important; /* IE and Edge */
}

.dataTables_scrollHead::-webkit-scrollbar {
    display: none !important; /* Chrome, Safari, Opera */
}

/* Ensure only body has scrollbar */
.dataTables_scrollBody {
    overflow: auto !important;
    scrollbar-width: auto !important;
}

/* Fix white space - remove extra padding/margins */
.dataTables_wrapper {
    padding: 0 !important;
    margin: 0 !important;
}

.dataTables_scroll {
    margin: 0 !important;
    padding: 0 !important;
}

/* Fix DataTables dropdown visibility while letting Bootstrap handle positioning */
.dataTables_wrapper .dropdown-menu {
    z-index: 99999 !important; /* keep above DataTables header/body */
}

/* Make table cells allow dropdown overflow */
.dataTables_wrapper td {
    overflow: visible !important;
    position: relative !important;
}

/* Make table rows allow dropdown overflow */
.dataTables_wrapper tr {
    overflow: visible !important;
    position: relative !important;
}

/* Scroll containers: keep overflow auto for proper scrolling;
   dropdowns are repositioned via JS (scroll-safe-dropdown) */
.dataTables_scrollBody {
    overflow: auto !important;
    position: relative !important;
}

/* Hide scrollbars but allow overflow */
.dataTables_scrollBody::-webkit-scrollbar {
    -webkit-appearance: none !important;
    width: 12px !important;
    height: 12px !important;
}

.dataTables_scrollBody::-webkit-scrollbar-thumb {
    background: #ccc !important;
    border-radius: 6px !important;
}

/* Ensure dropdown container is positioned correctly */
.dataTables_wrapper .btn-group.dropdown.open {
    position: relative !important;
    z-index: 99998 !important;
}

/* Fix white space completely */
.dataTables_wrapper {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: auto !important;
    position: relative !important;
}

.dataTables_scroll {
    width: 100% !important;
    position: relative !important;
}

/* Ensure table fills container without extra space */
.dataTables_scrollHead table,
.dataTables_scrollBody table {
    width: 100% !important;
    min-width: 100% !important;
    table-layout: fixed !important;
    margin: 0 !important;
    border-spacing: 0 !important;
}

div.dataTables_scrollHead table,
div.dataTables_scrollBody table {
    border-collapse: collapse !important; 
  
}

/* Table header - white everywhere */
.gradiantDiv,
thead {
    background: #ffffff !important;
    color: var(--amazon-text-dark) !important;
}

thead th {
    background: #ffffff !important;
    color: var(--amazon-text-dark) !important;
    font-weight: 600 !important;
    font-size: 13px !important;
    padding: 12px 16px !important;
    border-bottom: 2px solid var(--amazon-border) !important;
}

/* Print-specific override: make table headers black on white when printing */
@media print {

    thead,
    thead th {
        background: #ffffff !important;
        color: #000000 !important;
    }

    /* Ensure DataTables print view (about:blank window) uses full page width */
    body.dt-print-view table.dataTable {
        width: 100% !important;
        table-layout: fixed;
        border-collapse: collapse;
    }

    /* Reset layout height in DataTables print window so content doesn't force an extra blank page */
    body.dt-print-view,
    body.dt-print-view .wrapper,
    body.dt-print-view .content-wrapper {
        height: auto !important;
        min-height: 0 !important;
    }

    body.dt-print-view table.dataTable th,
    body.dt-print-view table.dataTable td {
        font-size: 11px !important;
        padding: 4px 4px !important;
        white-space: normal;
        word-wrap: break-word;
    }

    /* Hide Action column in print (first column) */
    body.dt-print-view table.dataTable th:first-child,
    body.dt-print-view table.dataTable td:first-child,
    #expense_table th:first-child,
    #expense_table td:first-child {
        display: none !important;
    }

    /* Slightly tighter Expenses table in normal print as well */
    #expense_table {
        width: 100% !important;
        table-layout: fixed;
        border-collapse: collapse;
    }

    #expense_table thead th,
    #expense_table tbody td {
        font-size: 11px !important;
        padding: 4px 4px !important;
        white-space: normal;
        word-wrap: break-word;
    }

    /* Stock adjustment details (and similar modals) - all headings/titles black when printing */
    .stock-adjustment-details-print .modal-header,
    .stock-adjustment-details-print .modal-header *,
    .stock-adjustment-details-print .modal-body,
    .stock-adjustment-details-print .modal-body *,
    .stock-adjustment-details-print .modal-title,
    .stock-adjustment-details-print .modal-title b,
    .stock-adjustment-details-print th,
    .stock-adjustment-details-print strong,
    .stock-adjustment-details-print b,
    .stock-adjustment-details-print address,
    .stock-adjustment-details-print address *,
    .stock-adjustment-details-print h1,
    .stock-adjustment-details-print h2,
    .stock-adjustment-details-print h3,
    .stock-adjustment-details-print h4,
    .stock-adjustment-details-print .invoice-col,
    .stock-adjustment-details-print .invoice-col * {
        color: #000000 !important;
        background: #ffffff !important;
    }

    .stock-adjustment-details-print .modal-header {
        background: #ffffff !important;
        border-bottom: 1px solid #ddd !important;
    }

    .stock-adjustment-details-print table,
    .stock-adjustment-details-print table thead,
    .stock-adjustment-details-print table tbody td,
    .stock-adjustment-details-print table th {
        background: #ffffff !important;
        color: #000000 !important;
        border-color: #333 !important;
    }
}

/* ============================================
   FIX: Hide Empty/Duplicate Header Rows
   This fixes DataTables generating extra empty rows
   ============================================ */

/* Hide secondary header rows ONLY for product/stock report tables (to avoid breaking other tables) */
#product_table thead tr:not(:first-child),
#stock_report_table thead tr:not(:first-child),
#product_table_wrapper .dataTables_scrollHead thead tr:not(:first-child),
#stock_report_table_wrapper .dataTables_scrollHead thead tr:not(:first-child),
#product_table_wrapper .dataTables_scrollBody thead tr:not(:first-child),
#stock_report_table_wrapper .dataTables_scrollBody thead tr:not(:first-child) {
    display: none !important;
    height: 0 !important;
    line-height: 0 !important;
    visibility: hidden !important;
    overflow: hidden !important;
}

/* Hide empty rows and filter rows ONLY for product/stock report tables */
#product_table thead tr:empty,
#stock_report_table thead tr:empty,
#product_table thead tr.filter-row,
#stock_report_table thead tr.filter-row,
#product_table_wrapper .dataTables_scrollHead thead tr:not(:first-child),
#stock_report_table_wrapper .dataTables_scrollHead thead tr:not(:first-child),
#product_table_wrapper .dataTables_scrollHead table thead tr+tr,
#stock_report_table_wrapper .dataTables_scrollHead table thead tr+tr {
    display: none !important;
    height: 0 !important;
    visibility: hidden !important;
}

/* Hide any inputs/selects in product table headers (filter elements) */
#product_table thead input,
#product_table thead select,
#product_table tfoot input,
#product_table tfoot select,
#product_table thead tr:not(:first-child) input,
#product_table thead tr:not(:first-child) select,
#stock_report_table thead input,
#stock_report_table thead select,
#stock_report_table tfoot input,
#stock_report_table tfoot select,
#stock_report_table thead tr:not(:first-child) input,
#stock_report_table thead tr:not(:first-child) select {
    display: none !important;
}

/* Ensure first header row is always visible (product/stock report only) */
#product_table thead tr:first-child,
#stock_report_table thead tr:first-child {
    display: table-row !important;
    visibility: visible !important;
}

#product_table thead tr:first-child th,
#stock_report_table thead tr:first-child th {
    display: table-cell !important;
    visibility: visible !important;
}

/* Table body */
tbody tr {
    background: var(--amazon-text-light) !important;
}

tbody tr:nth-child(even) {
    background: var(--amazon-light-gray) !important;
}

tbody tr:hover {
    background: var(--amazon-orange-light) !important;
}

/* Table cells */
tbody td {
    padding: 10px 16px !important;
    border-bottom: 1px solid var(--amazon-border) !important;
    color: var(--amazon-text-dark) !important;
}

/* Contact/Vendor table specific borders */
#contact_table tbody td,
#contact_table_wrapper .dataTables_scrollBody tbody td {
    border-bottom: 1px solid var(--amazon-border) !important;
    border-right: 1px solid var(--amazon-border) !important;
}

#contact_table tbody td:last-child,
#contact_table_wrapper .dataTables_scrollBody tbody td:last-child {
    border-right: none !important;
}

/* Table links */
table a {
    color: var(--amazon-info) !important;
}

table a:hover {
    color: var(--amazon-orange) !important;
    text-decoration: underline !important;
}

/* DataTables specific */
.dataTable tbody tr:hover {
    background: var(--amazon-orange-light) !important;
}

table.dataTable thead .sorting:after,
table.dataTable thead .sorting_asc:after,
table.dataTable thead .sorting_desc:after {
    color: var(--amazon-orange) !important;
    opacity: 1 !important;
}

/* DataTables wrapper */
.dataTables_wrapper {
    background: var(--amazon-text-light) !important;
    padding: 16px !important;
    border-radius: 8px !important;
    border: 1px solid var(--amazon-border) !important;
}

/* ============================================
   BUTTONS - Amazon Style
   ============================================ */

/* Primary buttons */
.btn-primary,
.tw-dw-btn-primary,
.swal-button--confirm {
    background: var(--amazon-orange) !important;
    border-color: var(--amazon-orange) !important;
    color: var(--amazon-text-light) !important;
    font-weight: 600 !important;
    border-radius: 4px !important;
    padding: 8px 16px !important;
    box-shadow: none !important;
}

.btn-primary:hover,
.tw-dw-btn-primary:hover,
.swal-button--confirm:hover {
    background: var(--amazon-orange-hover) !important;
    border-color: var(--amazon-orange-hover) !important;
    color: var(--amazon-text-light) !important;
}

/* Success / confirm buttons */
.btn-success {
    background: var(--amazon-success) !important;
    border-color: var(--amazon-success) !important;
    color: var(--amazon-text-light) !important;
}

.btn-success:hover {
    background: #059669 !important;
    border-color: #059669 !important;
    color: var(--amazon-text-light) !important;
}

/* Info / secondary buttons */
.btn-info {
    background: var(--amazon-info) !important;
    border-color: var(--amazon-info) !important;
    color: var(--amazon-text-light) !important;
}

.btn-info:hover {
    background: var(--amazon-info-hover) !important;
    border-color: var(--amazon-info-hover) !important;
    color: var(--amazon-text-light) !important;
}

/* Credit Line Approval – View document button (Supporting Documents / Digital Signatures) – Amazon style, always visible on hover */
.content button.view-document.btn-info,
.content button.btn-info.view-document {
    background: var(--amazon-navy-secondary) !important;
    border-color: var(--amazon-navy-secondary) !important;
    color: var(--amazon-text-light) !important;
}
.content button.view-document.btn-info:hover,
.content button.btn-info.view-document:hover,
.content button.view-document.btn-info:focus,
.content button.btn-info.view-document:focus {
    background: var(--amazon-navy-tertiary) !important;
    border-color: var(--amazon-orange) !important;
    color: var(--amazon-text-light) !important;
}

/* Outline-style info buttons (e.g. Add payment) */
.tw-dw-btn-outline {
    border-color: var(--amazon-info) !important;
    color: var(--amazon-text-light) !important;
    background: var(--amazon-info) !important;
}

.tw-dw-btn-outline:hover {
    background: var(--amazon-info-hover) !important;
    border-color: var(--amazon-info-hover) !important;
    color: var(--amazon-text-light) !important;
}

/* Stronger styling for primary-outline buttons like "Add payment" */
.tw-dw-btn.tw-dw-btn-outline.tw-dw-btn-primary {
    background: var(--amazon-orange) !important;
    border-color: var(--amazon-orange) !important;
    color: var(--amazon-navy-primary) !important;
}

.tw-dw-btn.tw-dw-btn-outline.tw-dw-btn-primary:hover {
    background: var(--amazon-orange-hover) !important;
    border-color: var(--amazon-orange-hover) !important;
    color: var(--amazon-navy-primary) !important;
}

/* Stronger styling for destructive (delete) outline buttons */
.tw-dw-btn.tw-dw-btn-outline.tw-dw-btn-error {
    background: #ef4444 !important;
    /* solid red */
    border-color: #ef4444 !important;
    color: #ffffff !important;
}

.tw-dw-btn.tw-dw-btn-outline.tw-dw-btn-error:hover {
    background: #b91c1c !important;
    /* darker red on hover */
    border-color: #b91c1c !important;
    color: #ffffff !important;
    opacity: 1 !important;
    /* ensure not transparent */
}

/* DataTables toolbar buttons on homepage (Export CSV, Print, etc.) */
div.dt-buttons .tw-dw-btn.tw-dw-btn-outline {
    background: var(--amazon-navy-secondary) !important;
    border-color: var(--amazon-navy-tertiary) !important;
    color: var(--amazon-text-light) !important;
}

div.dt-buttons .tw-dw-btn.tw-dw-btn-outline:hover {
    background: var(--amazon-navy-tertiary) !important;
    border-color: var(--amazon-navy-tertiary) !important;
    color: var(--amazon-orange) !important;
}

/* Table footer buttons (Add to location, Remove from location, WooCommerce Sync, etc.) */
/* Fix: These buttons were showing white text on white background on hover */
.tw-dw-btn.tw-dw-btn-outline.tw-dw-btn-accent {
    background: var(--amazon-info) !important;
    border-color: var(--amazon-info) !important;
    color: var(--amazon-text-light) !important;
}

.tw-dw-btn.tw-dw-btn-outline.tw-dw-btn-accent:hover {
    background: #005f73 !important;
    /* Darker info color */
    border-color: #005f73 !important;
    color: var(--amazon-text-light) !important;
}

.tw-dw-btn.tw-dw-btn-outline.tw-dw-btn-neutral {
    background: var(--amazon-navy-secondary) !important;
    border-color: var(--amazon-navy-tertiary) !important;
    color: var(--amazon-text-light) !important;
}

.tw-dw-btn.tw-dw-btn-outline.tw-dw-btn-neutral:hover {
    background: var(--amazon-navy-tertiary) !important;
    border-color: var(--amazon-navy-tertiary) !important;
    color: var(--amazon-text-light) !important;
}

.tw-dw-btn.tw-dw-btn-outline.tw-dw-btn-warning {
    background: var(--amazon-warning) !important;
    border-color: var(--amazon-warning) !important;
    color: var(--amazon-text-light) !important;
}

.tw-dw-btn.tw-dw-btn-outline.tw-dw-btn-warning:hover {
    background: #a84600 !important;
    /* Darker warning color */
    border-color: #a84600 !important;
    color: var(--amazon-text-light) !important;
}

.tw-dw-btn.tw-dw-btn-outline.tw-dw-btn-success {
    background: var(--amazon-success) !important;
    border-color: var(--amazon-success) !important;
    color: var(--amazon-text-light) !important;
}

.tw-dw-btn.tw-dw-btn-outline.tw-dw-btn-success:hover {
    background: #056653 !important;
    /* Darker success color */
    border-color: #056653 !important;
    color: var(--amazon-text-light) !important;
}

/* ============================================
   MODALS - Amazon Style
   ============================================ */

/* Modal header */
.modal-header {
    background: #37475A !important;
    border-radius: 8px 8px 0 0 !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.15) !important;
}

/* Force any colored modal headers to Amazon navy */
.modal-header.bg-primary,
.modal-header.bg-info,
.modal-header.bg-success,
.modal-header.bg-warning,
.modal-header.bg-danger {
    background: #37475A !important;
    color: #ffffff !important;
}

.modal-title,
.modal-title small,
#modalTitle {
    color: #ffffff !important;
}

/* Modal close button */
.close,
#close_button {
    color: #ffffff !important;
    opacity: 1 !important;
}

#close_button {
    background: transparent !important;
    border: none !important;
}

/* Modal content */
.modal-content {
    background: var(--amazon-text-light) !important;
    border: 1px solid var(--amazon-border) !important;
    border-radius: 8px !important;
}

/* Stock adjustment details modal - black title on light header */
.stock-adjustment-details-print .modal-header {
    background: #ffffff !important;
    border-bottom: 1px solid #ddd !important;
}
.stock-adjustment-details-print .modal-title,
.stock-adjustment-details-print .modal-title b,
.stock-adjustment-details-print #modalTitle {
    color: #000000 !important;
}
.stock-adjustment-details-print .modal-header .close {
    color: #333 !important;
    opacity: 0.8;
}

/* Modal body/footer: keep body white, footer Amazon navy */
.modal-body,
.modal-footer {
    background: #ffffff !important;
}

.modal-footer {
    background: #37475A !important;
    border-top: 1px solid rgba(255, 255, 255, 0.15) !important;
    color: #ffffff !important;
}

/* Taxonomy modal: restore Amazon navy header/footer */
.taxonomy-modal .modal-header,
.taxonomy-modal .modal-footer {
    background: #37475A !important;
    color: #ffffff !important;
}

.taxonomy-modal .modal-title,
.taxonomy-modal .modal-title small,
.taxonomy-modal #modalTitle,
.taxonomy-modal .close,
.taxonomy-modal #close_button {
    color: #ffffff !important;
}

.taxonomy-modal .modal-body {
    background: #ffffff !important;
}

.taxonomy-modal .modal-footer {
    border-top: 1px solid rgba(255, 255, 255, 0.15) !important;
}

/* ============================================
   FORMS - Amazon Style
   ============================================ */

.form-control {
    border: 1px solid var(--amazon-border) !important;
    border-radius: 4px !important;
    padding: 8px 12px !important;
}

/* Fixed the please select text clipping issue when using add variation in list products(input-sm).
   Our global .form-control padding is larger than Bootstrap's input-sm height. */
.form-control.input-sm {
    padding: 4px 10px !important;
    height: 30px !important;
    line-height: 1.5 !important;
}

/* Selects render slightly differently across browsers; give a bit more height. */
select.form-control.input-sm {
    height: 32px !important;
    padding-top: 4px !important;
    padding-bottom: 4px !important;
}

.form-control:focus {
    border-color: var(--amazon-orange) !important;
    box-shadow: 0 0 0 3px rgba(255, 153, 0, 0.2) !important;
}

.select2-container--default .select2-selection--single {
    border: 1px solid var(--amazon-border) !important;
    border-radius: 4px !important;
}

.select2-container--default.select2-container--focus .select2-selection--single {
    border-color: var(--amazon-orange) !important;
}

/* Input group addon */
.input-group-addon {
    background: var(--amazon-light-gray) !important;
    border: 1px solid var(--amazon-border) !important;
    border-top-left-radius: 4px !important;
    border-bottom-left-radius: 4px !important;
}

/* Make all calendar icons in input groups clearly visible */
.input-group-addon i.fa-calendar,
.input-group-addon .fa-calendar {
    color: #374151 !important; /* dark slate */
    opacity: 1 !important;
    font-size: 14px !important;
}

/* ============================================
   SCROLLBAR - Amazon Style
   ============================================ */

::-webkit-scrollbar-track {
    background-color: var(--amazon-light-gray) !important;
    border-radius: 4px !important;
}

::-webkit-scrollbar {
    background-color: var(--amazon-border) !important;
    width: 8px !important;
    height: 8px !important;
}

::-webkit-scrollbar-thumb {
    background-color: var(--amazon-navy-secondary) !important;
    border-radius: 4px !important;
}

::-webkit-scrollbar-thumb:hover {
    background-color: var(--amazon-navy-tertiary) !important;
}

/* ============================================
   FILTER BUTTONS & DATE PICKER
   ============================================ */

#dashboard_date_filter {
    background: var(--amazon-text-light) !important;
    color: var(--amazon-text-dark) !important;
    border: 1px solid var(--amazon-border) !important;
    border-radius: 4px !important;
}

#dashboard_date_filter:hover {
    background: var(--amazon-orange-light) !important;
    border-color: var(--amazon-orange) !important;
}

/* ============================================
   CHART CONTAINERS
   ============================================ */

.tw-border-gray-200.tw-border-dashed.tw-rounded-xl.tw-bg-gray-50 {
    background: var(--amazon-text-light) !important;
    border: 1px solid var(--amazon-border) !important;
    border-style: solid !important;
}

/* Chart card titles */
.tw-font-bold.tw-text-base.lg\:tw-text-xl {
    color: var(--amazon-text-dark) !important;
}

/* Chart icon circles */
.tw-border-2.tw-flex.tw-items-center.tw-justify-center.tw-rounded-full {
    border-color: var(--amazon-border) !important;
    background: var(--amazon-light-gray) !important;
}

/* ============================================
   ALERTS & NOTIFICATIONS
   ============================================ */

.alert-info {
    background: #E5F3F5 !important;
    border-color: var(--amazon-info) !important;
    color: var(--amazon-info) !important;
}

.alert-warning {
    background: var(--amazon-orange-light) !important;
    border-color: var(--amazon-orange) !important;
    color: var(--amazon-warning) !important;
}

.alert-danger {
    background: #FFEBE5 !important;
    border-color: var(--amazon-error) !important;
    color: var(--amazon-error) !important;
}

.alert-success {
    background: #E3F2E7 !important;
    border-color: var(--amazon-success) !important;
    color: var(--amazon-success) !important;
}

/* ============================================
   BADGES & STATUS INDICATORS
   ============================================ */

.badge-primary,
.label-primary {
    background: var(--amazon-orange) !important;
    color: var(--amazon-navy-primary) !important;
}

.badge-success,
.label-success {
    background: var(--amazon-success) !important;
}

.badge-warning,
.label-warning {
    background: var(--amazon-warning) !important;
}

.badge-danger,
.label-danger {
    background: var(--amazon-error) !important;
}

.badge-info,
.label-info {
    background: var(--amazon-info) !important;
}

/* ============================================
   DROPDOWN MENUS - Amazon theme (dark panel, white text, orange icons)
   ============================================ */

/* Dropdown panel: dark background, white text, orange icons */
.dropdown-menu {
    background: var(--amazon-navy-primary) !important;
    border: 1px solid var(--amazon-navy-tertiary) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35) !important;
    border-radius: 6px !important;
    padding: 4px 0 !important;
}

.dropdown-menu>li>a,
.dropdown-menu li a {
    color: var(--amazon-text-light) !important;
    padding: 8px 16px !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
}

/* Orange icons in dropdown items */
.dropdown-menu>li>a i,
.dropdown-menu>li>a .fa,
.dropdown-menu>li>a .fas,
.dropdown-menu>li>a .far,
.dropdown-menu>li>a .glyphicon,
.dropdown-menu li a i,
.dropdown-menu li a .fa,
.dropdown-menu li a .fas,
.dropdown-menu li a .far,
.dropdown-menu li a .glyphicon {
    color: var(--amazon-orange) !important;
    min-width: 18px;
    text-align: center;
}

/* Ensure all dropdown icons (including Edit) stay orange */
.dropdown-menu a i,
.dropdown-menu a .fa,
.dropdown-menu a .fas,
.dropdown-menu a .far,
.dropdown-menu a .glyphicon,
.dropdown-menu a svg {
    color: var(--amazon-orange) !important;
}

.dropdown-menu>li>a:hover,
.dropdown-menu>li>a:focus,
.dropdown-menu li a:hover,
.dropdown-menu li a:focus {
    background: var(--amazon-orange) !important;
    color: var(--amazon-navy-primary) !important;
}

.dropdown-menu>li>a:hover i,
.dropdown-menu>li>a:hover .fa,
.dropdown-menu>li>a:hover .fas,
.dropdown-menu li a:hover i,
.dropdown-menu li a:hover .fa,
.dropdown-menu li a:hover .fas {
    color: var(--amazon-navy-primary) !important;
}

.dropdown-menu>.active>a {
    background: var(--amazon-navy-secondary) !important;
    color: var(--amazon-text-light) !important;
    border: none !important;
}

/* Actions dropdown button - dark grey/navy, white text, rounded, orange border */
.btn-group .btn.dropdown-toggle,
.btn-group .tw-dw-btn.dropdown-toggle,
.btn-group .tw-dw-btn-outline.tw-dw-btn-info.dropdown-toggle,
.btn-group.dropdown .dropdown-toggle,
.actions-dropdown,
.scroll-safe-dropdown .dropdown-toggle {
    background: var(--amazon-navy-primary) !important;
    border: 1px solid var(--amazon-orange) !important;
    color: var(--amazon-text-light) !important;
    border-radius: 6px !important;
    font-weight: 500 !important;
}

.btn-group .btn.dropdown-toggle .caret,
.btn-group .tw-dw-btn.dropdown-toggle .caret,
.scroll-safe-dropdown .dropdown-toggle .caret {
    color: var(--amazon-text-light) !important;
    border-top-color: var(--amazon-text-light) !important;
}

.btn-group .btn.dropdown-toggle:hover,
.btn-group .tw-dw-btn.dropdown-toggle:hover,
.btn-group.open .btn.dropdown-toggle,
.btn-group.open .tw-dw-btn.dropdown-toggle,
.actions-dropdown:hover,
.actions-dropdown:focus,
.scroll-safe-dropdown .dropdown-toggle:hover,
.scroll-safe-dropdown.open .dropdown-toggle {
    background: var(--amazon-navy-secondary) !important;
    border-color: var(--amazon-orange) !important;
    color: var(--amazon-text-light) !important;
}

/* Product table and all tables: same Actions button theme */
#product_table .btn-group .btn,
#product_table .btn-group .btn.btn-default,
#product_table .actions-dropdown,
#sell_table .btn-group .dropdown-toggle,
#purchase_order_table .btn-group .dropdown-toggle,
#purchase_return_datatable .btn-group .dropdown-toggle,
#expense_table .btn-group .dropdown-toggle,
#stock_adjustment_table .btn-group .dropdown-toggle,
#brands_table .btn-group .dropdown-toggle,
table .btn-group .btn.dropdown-toggle,
table .btn-group .tw-dw-btn.dropdown-toggle {
    background: var(--amazon-navy-primary) !important;
    border: 1px solid var(--amazon-orange) !important;
    color: var(--amazon-text-light) !important;
}

#product_table .btn-group .btn:hover,
#product_table .btn-group.open .btn.dropdown-toggle,
#product_table .btn-group .btn:focus,
#product_table .btn-group .btn:active,
#product_table .actions-dropdown:hover,
#product_table .actions-dropdown:focus,
table .btn-group .btn.dropdown-toggle:hover,
table .btn-group.open .btn.dropdown-toggle,
table .btn-group .tw-dw-btn.dropdown-toggle:hover {
    background: var(--amazon-navy-secondary) !important;
    border-color: var(--amazon-orange) !important;
    color: var(--amazon-text-light) !important;
}

/* Dropdown: Edit/Delete/View links keep white text, orange icons to match theme */
.dropdown-menu a.edit_contact_button,
.dropdown-menu a.delete_contact_button,
.dropdown-menu a.view_contact_button,
.dropdown-menu a.edit-product,
.dropdown-menu a.delete-product,
.dropdown-menu a.view-product,
.dropdown-menu a.barcode-labels-product,
.dropdown-menu a.view-stock-history,
.dropdown-menu a.download-brochure,
.dropdown-menu a.activate-product,
.dropdown-menu a.deactivate-product,
.dropdown-menu a.discontinue-product,
.dropdown-menu a.view-variants {
    color: var(--amazon-text-light) !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 8px 16px !important;
    width: 100% !important;
    text-align: left !important;
}

.dropdown-menu a.edit-product:hover,
.dropdown-menu a.delete-product:hover,
.dropdown-menu a.view-product:hover,
.dropdown-menu a.barcode-labels-product:hover,
.dropdown-menu a.view-stock-history:hover,
.dropdown-menu a.download-brochure:hover,
.dropdown-menu a.activate-product:hover,
.dropdown-menu a.deactivate-product:hover,
.dropdown-menu a.discontinue-product:hover,
.dropdown-menu a.view-variants:hover {
    background: var(--amazon-orange) !important;
    color: var(--amazon-navy-primary) !important;
}

.dropdown-menu a.edit_contact_button i,
.dropdown-menu a.edit_contact_button .glyphicon,
.dropdown-menu a.delete_contact_button i,
.dropdown-menu a.delete_contact_button .glyphicon,
.dropdown-menu a.view_contact_button i,
.dropdown-menu a.view_contact_button .glyphicon,
.dropdown-menu a.view_contact_button .fa,
.dropdown-menu a.view_contact_button .fas,
.dropdown-menu a.edit-product i,
.dropdown-menu a.edit-product .glyphicon,
.dropdown-menu a.delete-product i,
.dropdown-menu a.delete-product .fa,
.dropdown-menu a.delete-product .fas,
.dropdown-menu a.view-product i,
.dropdown-menu a.view-product .fa,
.dropdown-menu a.view-product .fas,
.dropdown-menu a.barcode-labels-product i,
.dropdown-menu a.barcode-labels-product .fa,
.dropdown-menu a.barcode-labels-product .fas,
.dropdown-menu a.view-stock-history i,
.dropdown-menu a.view-stock-history .fa,
.dropdown-menu a.view-stock-history .fas,
.dropdown-menu a.download-brochure i,
.dropdown-menu a.download-brochure .fa,
.dropdown-menu a.download-brochure .fas,
.dropdown-menu a.activate-product i,
.dropdown-menu a.activate-product .fa,
.dropdown-menu a.activate-product .fas,
.dropdown-menu a.deactivate-product i,
.dropdown-menu a.deactivate-product .fa,
.dropdown-menu a.deactivate-product .fas,
.dropdown-menu a.discontinue-product i,
.dropdown-menu a.discontinue-product .fa,
.dropdown-menu a.discontinue-product .fas,
.dropdown-menu a.view-variants i,
.dropdown-menu a.view-variants .fa,
.dropdown-menu a.view-variants .fas {
    color: var(--amazon-orange) !important;
}

/* Icons change to dark navy on hover (against orange background) */
.dropdown-menu a.edit-product:hover i,
.dropdown-menu a.edit-product:hover .glyphicon,
.dropdown-menu a.delete-product:hover i,
.dropdown-menu a.delete-product:hover .fa,
.dropdown-menu a.delete-product:hover .fas,
.dropdown-menu a.view-product:hover i,
.dropdown-menu a.view-product:hover .fa,
.dropdown-menu a.view-product:hover .fas,
.dropdown-menu a.barcode-labels-product:hover i,
.dropdown-menu a.barcode-labels-product:hover .fa,
.dropdown-menu a.barcode-labels-product:hover .fas,
.dropdown-menu a.view-stock-history:hover i,
.dropdown-menu a.view-stock-history:hover .fa,
.dropdown-menu a.view-stock-history:hover .fas,
.dropdown-menu a.download-brochure:hover i,
.dropdown-menu a.download-brochure:hover .fa,
.dropdown-menu a.download-brochure:hover .fas,
.dropdown-menu a.activate-product:hover i,
.dropdown-menu a.activate-product:hover .fa,
.dropdown-menu a.activate-product:hover .fas,
.dropdown-menu a.deactivate-product:hover i,
.dropdown-menu a.deactivate-product:hover .fa,
.dropdown-menu a.deactivate-product:hover .fas,
.dropdown-menu a.discontinue-product:hover i,
.dropdown-menu a.discontinue-product:hover .fa,
.dropdown-menu a.discontinue-product:hover .fas,
.dropdown-menu a.view-variants:hover i,
.dropdown-menu a.view-variants:hover .fa,
.dropdown-menu a.view-variants:hover .fas,
.dropdown-menu a.edit_contact_button:hover i,
.dropdown-menu a.edit_contact_button:hover .glyphicon,
.dropdown-menu a.delete_contact_button:hover i,
.dropdown-menu a.delete_contact_button:hover .glyphicon,
.dropdown-menu a.view_contact_button:hover i,
.dropdown-menu a.view_contact_button:hover .glyphicon,
.dropdown-menu a.view_contact_button:hover .fa,
.dropdown-menu a.view_contact_button:hover .fas {
    color: var(--amazon-navy-primary) !important;
}

.dropdown-menu a.view_contact_button {
    background: transparent !important;
    border: none !important;
}

.dropdown-menu a.view_contact_button:hover {
    background: var(--amazon-navy-secondary) !important;
}

/* ============================================
   EXPORT BUTTONS
   ============================================ */

.dt-button,
.buttons-csv,
.buttons-excel,
.buttons-print,
.buttons-pdf {
    background: var(--amazon-light-gray) !important;
    border: 1px solid var(--amazon-border) !important;
    color: var(--amazon-text-dark) !important;
    border-radius: 4px !important;
    padding: 6px 12px !important;
}

.dt-button:hover,
.buttons-csv:hover,
.buttons-excel:hover,
.buttons-print:hover,
.buttons-pdf:hover {
    background: var(--amazon-orange-light) !important;
    border-color: var(--amazon-orange) !important;
}

/* DataTables Buttons "collection" (Column visibility dropdown)
   NOTE: Buttons can render this as either a <ul> or a <div> depending on integration,
   so we style both. */
ul.dt-button-collection,
div.dt-button-collection {
    background: var(--amazon-text-light) !important;
    border: 1px solid var(--amazon-border) !important;
    padding: 8px 0;
    min-width: 220px;
    max-height: 260px;
    overflow-y: auto;
    border-radius: 8px;
    box-shadow: 0 8px 22px rgba(15, 17, 17, 0.25);
}

/*  Column-visibility dropdown items (<li> = .dt-button, <a> inside)
    Override every Tailwind / theme class that would otherwise set white text
    or a coloured background on these items. */
ul.dt-button-collection .dt-button,
ul.dt-button-collection .dt-button.tw-dw-btn,
ul.dt-button-collection .dt-button.tw-dw-btn-outline,
ul.dt-button-collection .dt-button.tw-dw-btn-xs,
div.dt-button-collection .dt-button,
div.dt-button-collection .dt-button.tw-dw-btn,
div.dt-button-collection .dt-button.tw-dw-btn-outline,
div.dt-button-collection .dt-button.tw-dw-btn-xs {
    background: transparent !important;
    border: none !important;
    color: #111827 !important;
    display: flex !important;
    align-items: center;
    gap: 8px;
    width: 100%;
    text-align: left;
    padding: 6px 12px !important;
    margin: 0 !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    font-size: 13px !important;
    font-weight: 500;
}

/* Style the <a> inside each collection item – override
   .dropdown-menu>li>a  and  .dropdown-menu li a  which set white text */
ul.dt-button-collection .dt-button > a,
div.dt-button-collection .dt-button > a,
ul.dt-button-collection .dt-button.active > a,
div.dt-button-collection .dt-button.active > a,
ul.dt-button-collection.dropdown-menu > li > a,
ul.dt-button-collection.dropdown-menu li a,
div.dt-button-collection.dropdown-menu > li > a,
div.dt-button-collection.dropdown-menu li a {
    color: #111827 !important;
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
    text-decoration: none !important;
    font-size: 13px !important;
    font-weight: 500;
    display: inline !important;
}

/* Hover/focus on <a> inside collection – override .dropdown-menu>li>a:hover */
ul.dt-button-collection .dt-button > a:hover,
ul.dt-button-collection .dt-button > a:focus,
div.dt-button-collection .dt-button > a:hover,
div.dt-button-collection .dt-button > a:focus,
ul.dt-button-collection.dropdown-menu > li > a:hover,
ul.dt-button-collection.dropdown-menu > li > a:focus,
div.dt-button-collection.dropdown-menu > li > a:hover,
div.dt-button-collection.dropdown-menu > li > a:focus {
    color: #111827 !important;
    background: transparent !important;
}

/* Checkbox pseudo-element on the <li> */
ul.dt-button-collection .dt-button::before,
div.dt-button-collection .dt-button::before {
    content: '';
    flex-shrink: 0;
    width: 14px;
    height: 14px;
    border-radius: 3px;
    border: 1px solid #9ca3af;
    background-color: transparent;
    background-position: center;
    background-repeat: no-repeat;
    background-size: 11px 11px;
}

/* Active (column visible) = filled orange checkbox with tick */
ul.dt-button-collection .dt-button.active::before,
div.dt-button-collection .dt-button.active::before {
    background-color: #ff9900;
    border-color: #c7511f;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='white' d='M13.854 3.646a.5.5 0 0 1 0 .708l-7 7a.5.5 0 0 1-.708 0l-3.5-3.5a.5.5 0 1 1 .708-.708L6.5 10.293l6.646-6.647a.5.5 0 0 1 .708 0z'/%3e%3c/svg%3e");
}

/* Hover / active row background */
ul.dt-button-collection .dt-button:hover,
ul.dt-button-collection .dt-button.active,
ul.dt-button-collection .dt-button.active:hover,
ul.dt-button-collection .dt-button.tw-dw-btn:hover,
ul.dt-button-collection .dt-button.tw-dw-btn-outline:hover,
div.dt-button-collection .dt-button:hover,
div.dt-button-collection .dt-button.active,
div.dt-button-collection .dt-button.active:hover,
div.dt-button-collection .dt-button.tw-dw-btn:hover,
div.dt-button-collection .dt-button.tw-dw-btn-outline:hover {
    background: #f7f8f8 !important;
    color: #111827 !important;
    border: none !important;
}

ul.dt-button-collection .dt-button:hover > a,
div.dt-button-collection .dt-button:hover > a {
    color: #111827 !important;
    background: transparent !important;
}

/* ============================================
   FOOTER
   ============================================ */

footer,
.main-footer {
    background: var(--amazon-light-gray) !important;
    border-top: 1px solid var(--amazon-border) !important;
    color: var(--amazon-text-medium) !important;
}

/* ============================================
   BOX COMPONENTS
   ============================================ */

.box {
    background: var(--amazon-text-light) !important;
    border: 1px solid var(--amazon-border) !important;
    border-radius: 8px !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08) !important;
}

.box-header {
    background: var(--amazon-light-gray) !important;
    border-bottom: 1px solid var(--amazon-border) !important;
    border-radius: 8px 8px 0 0 !important;
}

/* Product create/edit: Amazon navy + orange for card section headers */
.amazon-card .box-header {
    position: relative;
    background: linear-gradient(135deg, #232f3e 0%, #37475a 100%) !important;
    border: none !important;
    border-bottom: none !important;
    border-left: 4px solid #FF9900 !important;
    color: #fff !important;
}
.amazon-card .box-header::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, #FF9900, #E47911);
}
.amazon-card .box-header .box-title {
    color: #ffffff !important;
    font-weight: 700 !important;
}
.amazon-card .box-header .box-title i,
.amazon-card .box-header .box-title .fa,
.amazon-card .box-header .box-title .fas {
    color: #FF9900 !important;
}

.box-title {
    color: var(--amazon-text-dark) !important;
    font-weight: 600 !important;
}

/* ============================================
   PAGINATION
   ============================================ */

.pagination>li>a,
.pagination>li>span {
    border: 1px solid var(--amazon-border) !important;
    color: var(--amazon-text-dark) !important;
    background: var(--amazon-text-light) !important;
}

.pagination>li>a:hover {
    background: var(--amazon-orange-light) !important;
    border-color: var(--amazon-orange) !important;
}

.pagination>.active>a,
.pagination>.active>span {
    background: var(--amazon-orange) !important;
    border-color: var(--amazon-orange) !important;
    color: var(--amazon-navy-primary) !important;
}

/* ============================================
   INFO/TOOLTIP ICONS
   ============================================ */

.fa-info-circle.text-info {
    color: var(--amazon-info) !important;
}

/* ============================================
   LOADING SPINNER
   ============================================ */

.loader {
    border-top-color: var(--amazon-orange) !important;
}

.loader::after {
    border-left-color: var(--amazon-navy-secondary) !important;
}

/* ============================================
   CUSTOM OVERRIDES FOR SPECIFIC ELEMENTS
   ============================================ */

/* Override any gradient backgrounds with solid Amazon colors */
.tw-bg-gradient-to-r,
[class*="tw-from-"],
[class*="tw-to-"] {
    background: var(--amazon-navy-primary) !important;
}

/* Ring colors */
.tw-ring-gray-200 {
    --tw-ring-color: var(--amazon-border) !important;
}

.tw-ring-white\/10 {
    --tw-ring-color: rgba(255, 255, 255, 0.1) !important;
}

/* Text white on dark backgrounds */
.text-white,
.tw-text-white {
    color: var(--amazon-text-light) !important;
}

/* Dynamic button (Add buttons) - Amazon Orange, Square Shape */
#dynamic_button,
a#dynamic_button,
button#dynamic_button,
.btn-modal#dynamic_button,
.tw-dw-btn#dynamic_button {
    background: #FF9900 !important;
    color: #FFFFFF !important;
    border: 1px solid #e47911 !important;
    border-radius: 6px !important;
    font-weight: 600 !important;
    box-shadow: 0 2px 4px rgba(255, 153, 0, 0.3) !important;
    transition: all 0.2s ease !important;
}

#dynamic_button:hover,
a#dynamic_button:hover,
button#dynamic_button:hover,
.btn-modal#dynamic_button:hover,
.tw-dw-btn#dynamic_button:hover {
    background: #ffac33 !important;
    border-color: #ff9900 !important;
    color: #FFFFFF !important;
    box-shadow: 0 3px 8px rgba(255, 153, 0, 0.4) !important;
    transform: translateY(-1px) !important;
}

/* Override rounded-full for Add buttons - make them square */
#dynamic_button.tw-rounded-full,
a#dynamic_button.tw-rounded-full,
button#dynamic_button.tw-rounded-full,
.btn-modal#dynamic_button.tw-rounded-full,
.tw-dw-btn#dynamic_button.tw-rounded-full {
    border-radius: 6px !important;
}

/* Amazon Orange Add button class */
.amazon-orange-add,
a.amazon-orange-add,
button.amazon-orange-add,
.btn.amazon-orange-add,
.tw-dw-btn.amazon-orange-add {
    background: #FF9900 !important;
    color: #FFFFFF !important;
    border: 1px solid #e47911 !important;
    border-radius: 6px !important;
    font-weight: 600 !important;
    box-shadow: 0 2px 4px rgba(255, 153, 0, 0.3) !important;
    transition: all 0.2s ease !important;
}

.amazon-orange-add:hover,
a.amazon-orange-add:hover,
button.amazon-orange-add:hover,
.btn.amazon-orange-add:hover,
.tw-dw-btn.amazon-orange-add:hover {
    background: #ffac33 !important;
    border-color: #ff9900 !important;
    color: #FFFFFF !important;
    box-shadow: 0 3px 8px rgba(255, 153, 0, 0.4) !important;
    transform: translateY(-1px) !important;
}

/* Override rounded-full for amazon-orange-add */
.amazon-orange-add.tw-rounded-full,
a.amazon-orange-add.tw-rounded-full,
button.amazon-orange-add.tw-rounded-full,
.btn.amazon-orange-add.tw-rounded-full,
.tw-dw-btn.amazon-orange-add.tw-rounded-full {
    border-radius: 6px !important;
}

/* Global override: All Add buttons should be square (not pill-shaped) */
#dynamic_button.tw-rounded-full,
a#dynamic_button.tw-rounded-full,
button#dynamic_button.tw-rounded-full,
.btn-modal#dynamic_button.tw-rounded-full,
.tw-dw-btn#dynamic_button.tw-rounded-full,
[id*="dynamic_button"].tw-rounded-full,
[class*="add"].tw-rounded-full,
button[class*="add"].tw-rounded-full,
a[class*="add"].tw-rounded-full {
    border-radius: 6px !important;
}

/* Ensure all Add buttons are Amazon Orange */
#dynamic_button,
[id*="dynamic_button"],
button[id*="dynamic_button"],
a[id*="dynamic_button"] {
    background: #FF9900 !important;
    color: #FFFFFF !important;
    border-color: #e47911 !important;
    border-radius: 6px !important;
}

#dynamic_button:hover,
[id*="dynamic_button"]:hover,
button[id*="dynamic_button"]:hover,
a[id*="dynamic_button"]:hover {
    background: #ffac33 !important;
    border-color: #ff9900 !important;
    color: #FFFFFF !important;
}

/* ============================================
   AMAZON DASHBOARD - ENHANCED STYLES
   ============================================ */

/* Amazon Dashboard Container */
.amazon-dashboard {
    background: var(--amazon-bg-gray) !important;
}

/* Dashboard Header */
.dashboard-header {
    background: var(--amazon-navy-primary) !important;
    border-bottom: 3px solid var(--amazon-orange) !important;
}

/* Performance Summary Section */
.performance-summary {
    background: linear-gradient(135deg, var(--amazon-navy-primary) 0%, var(--amazon-navy-secondary) 100%) !important;
}

.perf-metric {
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

.perf-metric-icon {
    background: var(--amazon-orange) !important;
}

.perf-metric-icon svg {
    color: var(--amazon-navy-primary) !important;
}

/* Metric Cards */
.metric-card {
    background: var(--amazon-text-light) !important;
    border: 1px solid var(--amazon-border) !important;
    transition: all 0.2s ease !important;
}

.metric-card:hover {
    border-color: var(--amazon-orange) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1) !important;
}

.metric-label {
    color: var(--amazon-text-medium) !important;
}

.metric-value {
    color: var(--amazon-text-dark) !important;
}

/* Chart Container */
.chart-container {
    background: var(--amazon-text-light) !important;
    border: 1px solid var(--amazon-border) !important;
}

.chart-header {
    border-bottom: 1px solid var(--amazon-border) !important;
}

.chart-title {
    color: var(--amazon-text-dark) !important;
}

/* Action Cards */
.action-card {
    background: var(--amazon-text-light) !important;
    border: 1px solid var(--amazon-border) !important;
}

.action-card-header {
    background: linear-gradient(90deg, var(--amazon-navy-primary) 0%, var(--amazon-navy-secondary) 100%) !important;
    color: var(--amazon-text-light) !important;
}

.action-card-badge {
    background: var(--amazon-orange) !important;
    color: var(--amazon-navy-primary) !important;
}

/* Dashboard Section */
.dashboard-section {
    background: var(--amazon-text-light) !important;
    border: 1px solid var(--amazon-border) !important;
}

.section-header {
    background: var(--amazon-light-gray) !important;
    border-bottom: 1px solid var(--amazon-border) !important;
}

.section-title {
    color: var(--amazon-text-dark) !important;
}

.section-title-icon {
    color: var(--amazon-orange) !important;
}

/* Orders Section */
.orders-section {
    background: var(--amazon-text-light) !important;
    border: 1px solid var(--amazon-border) !important;
}

.orders-header {
    background: var(--amazon-navy-primary) !important;
    color: var(--amazon-text-light) !important;
}

.orders-title svg {
    color: var(--amazon-orange) !important;
}

/* Amazon Table Styling */
.amazon-table thead th {
    background: #ffffff !important;
    color: var(--amazon-text-dark) !important;
    border-bottom: 2px solid var(--amazon-border) !important;
}

/* Customers/Contacts table - align with global white header */
#contact_table thead,
#contact_table thead th {
    background: #ffffff !important;
    color: var(--amazon-text-dark) !important;
    border-bottom: 2px solid var(--amazon-border) !important;
}

.amazon-table tbody td {
    border-bottom: 1px solid var(--amazon-border) !important;
}

.amazon-table tbody tr:hover {
    background: var(--amazon-orange-light) !important;
}

.amazon-table .link {
    color: var(--amazon-info) !important;
}

.amazon-table .link:hover {
    color: var(--amazon-warning) !important;
}

/* Amazon Select */
.amazon-select {
    background: var(--amazon-text-light) !important;
    border: 1px solid var(--amazon-border) !important;
    color: var(--amazon-text-dark) !important;
}

.amazon-select:focus {
    border-color: var(--amazon-orange) !important;
    box-shadow: 0 0 0 3px rgba(255, 153, 0, 0.2) !important;
}

/* Header Control Button */
.header-control-btn {
    background: var(--amazon-navy-secondary) !important;
    color: var(--amazon-text-light) !important;
    border: 1px solid var(--amazon-navy-tertiary) !important;
}

.header-control-btn:hover {
    background: var(--amazon-navy-tertiary) !important;
    color: var(--amazon-orange) !important;
}

/* Status Badge */
.status-badge.pending {
    background: #FEF3CD !important;
    color: #B7791F !important;
}

.status-badge.completed {
    background: #E3F5E1 !important;
    color: var(--amazon-success) !important;
}

.status-badge.shipped {
    background: #E7F4FF !important;
    color: #0066C0 !important;
}

.status-badge.cancelled {
    background: #FFEBE5 !important;
    color: var(--amazon-error) !important;
}

/* Action Button */
.action-btn {
    background: linear-gradient(180deg, #FFD814 0%, var(--amazon-orange) 100%) !important;
    border: 1px solid #FCD200 !important;
    color: var(--amazon-navy-primary) !important;
}

.action-btn:hover {
    background: linear-gradient(180deg, #F7CA00 0%, #F08804 100%) !important;
}

/* ============================================
   AMAZON STYLE EDIT / DELETE BUTTONS
   Edit: Orange background (#FF9900) with white text
   Delete: Dark navy background (#232F3E) with white text
   ============================================ */
/* EDIT BUTTONS - Orange background */
.amazon-edit-btn,
.amazon-action-btn.edit,
.profile-edit-btn,
.profile-field .profile-edit-btn,
.edit_contact_button,
.table-action-btn-edit,
#customer_groups_table .table-action-btn-edit,
button.edit_brand_button,
button.edit_tax_rate_button,
button.edit_unit_button,
button.edit_variation_button,
button.edit_customer_group_button,
button.edit_role_button,
button.edit_shipstationapi_button,
button.edit_table_button,
button.edit_modifier_button,
button.edit_multichannel_button,
a.edit_credit_line_button,
a.edit_role_button,
.dropdown-menu a.edit_contact_button,
button.table-action-btn[class*="edit"],
.btn[class*="edit"][class*="button"],
.tw-dw-btn[class*="edit"],
#roles_table a.edit_role_button,
#roles_table a.tw-dw-btn.edit_role_button,
#customer_groups_table button.edit_customer_group_button,
#customer_groups_table .table-action-btn-edit {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    background: #FF9900 !important;
    color: #FFFFFF !important;
    border: 1px solid #e47911 !important;
    border-radius: 6px !important;
    padding: 6px 14px !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    transition: all 0.2s ease !important;
    text-decoration: none !important;
    box-shadow: 0 2px 4px rgba(255, 153, 0, 0.3) !important;
    outline: none !important;
    filter: none !important;
}

/* DELETE BUTTONS - Dark navy background */
.amazon-delete-btn,
.amazon-action-btn.delete,
.delete_contact_button,
.table-action-btn-delete,
#customer_groups_table .table-action-btn-delete,
button.delete_brand_button,
button.delete_tax_rate_button,
button.delete_unit_button,
button.delete_variation_button,
button.delete_customer_group_button,
button.delete_commsn_agnt_button,
button.delete_role_button,
button.delete_printer_button,
button.delete_option_button,
button.delete_user_button,
button.delete_invoice_button,
button.delete_discount_button,
button.delete_expense_category,
button.delete_type_of_service,
button.delete_tax_group_button,
button.delete_shipstation_button,
button.delete_shipping_station_button,
button.delete_spg_button,
button.delete_table_button,
button.delete_modifier_button,
button.delete_complaint_button,
button.delete_identification_button,
button.delete_barcode_button,
a.delete_expense,
a.delete_purchase_return,
a.delete_option_button,
.dropdown-menu a.delete_contact_button,
button.table-action-btn[class*="delete"],
.btn[class*="delete"][class*="button"],
.tw-dw-btn[class*="delete"],
#roles_table button.delete_role_button,
#roles_table button.tw-dw-btn.delete_role_button,
#customer_groups_table button.delete_customer_group_button,
#customer_groups_table .table-action-btn-delete {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    background: #232F3E !important;
    color: #FFFFFF !important;
    border: 1px solid #37475A !important;
    border-radius: 6px !important;
    padding: 6px 14px !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    transition: all 0.2s ease !important;
    text-decoration: none !important;
    box-shadow: 0 2px 4px rgba(35, 47, 62, 0.3) !important;
    outline: none !important;
    filter: none !important;
}

/* EDIT BUTTON HOVER - Lighter orange */
.amazon-edit-btn:hover,
.amazon-action-btn.edit:hover,
.profile-edit-btn:hover,
.profile-field .profile-edit-btn:hover,
.profile-field .profile-edit-btn:focus,
.edit_contact_button:hover,
.table-action-btn-edit:hover,
#customer_groups_table .table-action-btn-edit:hover,
button[class*="edit_"]:hover,
a.edit_credit_line_button:hover,
a.edit_role_button:hover,
.dropdown-menu a.edit_contact_button:hover,
button.table-action-btn[class*="edit"]:hover,
.btn[class*="edit"][class*="button"]:hover,
.tw-dw-btn[class*="edit"]:hover,
#roles_table a.edit_role_button:hover,
#roles_table a.tw-dw-btn.edit_role_button:hover,
#customer_groups_table button.edit_customer_group_button:hover,
#customer_groups_table .table-action-btn-edit:hover {
    background: #ffac33 !important;
    color: #FFFFFF !important;
    border-color: #ff9900 !important;
    box-shadow: 0 3px 8px rgba(255, 153, 0, 0.4) !important;
    transform: translateY(-1px) !important;
}

/* DELETE BUTTON HOVER - Lighter navy */
.amazon-delete-btn:hover,
.amazon-action-btn.delete:hover,
.delete_contact_button:hover,
.table-action-btn-delete:hover,
#customer_groups_table .table-action-btn-delete:hover,
button[class*="delete_"]:hover,
a[class*="delete_"]:hover,
.dropdown-menu a.delete_contact_button:hover,
button.table-action-btn[class*="delete"]:hover,
.btn[class*="delete"][class*="button"]:hover,
.tw-dw-btn[class*="delete"]:hover,
#roles_table button.delete_role_button:hover,
#roles_table button.tw-dw-btn.delete_role_button:hover,
#customer_groups_table button.delete_customer_group_button:hover,
#customer_groups_table .table-action-btn-delete:hover {
    background: #37475A !important;
    color: #FFFFFF !important;
    border-color: #ff9900 !important;
    box-shadow: 0 3px 8px rgba(35, 47, 62, 0.4) !important;
    transform: translateY(-1px) !important;
}

/* White icons for Edit and Delete buttons */
.amazon-edit-btn i,
.amazon-delete-btn i,
.amazon-edit-btn .glyphicon,
.amazon-delete-btn .glyphicon,
.amazon-action-btn.edit i,
.amazon-action-btn.edit .glyphicon,
.amazon-action-btn.delete i,
.amazon-action-btn.delete .glyphicon,
.profile-edit-btn i,
.profile-edit-btn .glyphicon,
.profile-field .profile-edit-btn i,
.profile-field .profile-edit-btn .glyphicon,
.edit_contact_button i,
.edit_contact_button .glyphicon,
.delete_contact_button i,
.delete_contact_button .glyphicon,
.table-action-btn-edit i,
.table-action-btn-edit .glyphicon,
.table-action-btn-delete i,
.table-action-btn-delete .glyphicon,
#customer_groups_table .table-action-btn-edit i,
#customer_groups_table .table-action-btn-delete i,
button[class*="edit_"] i,
button[class*="edit_"] .glyphicon,
button[class*="edit_"] .fas,
button[class*="edit_"] .fa,
button[class*="delete_"] i,
button[class*="delete_"] .glyphicon,
button[class*="delete_"] .fas,
button[class*="delete_"] .fa,
a.edit_credit_line_button i,
a.edit_credit_line_button .glyphicon,
a.edit_role_button i,
a.edit_role_button .glyphicon,
.dropdown-menu a.edit_contact_button i,
.dropdown-menu a.edit_contact_button .glyphicon,
.dropdown-menu a.delete_contact_button i,
.dropdown-menu a.delete_contact_button .glyphicon,
button.table-action-btn[class*="edit"] i,
button.table-action-btn[class*="edit"] .glyphicon,
button.table-action-btn[class*="delete"] i,
button.table-action-btn[class*="delete"] .glyphicon,
.tw-dw-btn[class*="edit"] i,
.tw-dw-btn[class*="edit"] .glyphicon,
.tw-dw-btn[class*="delete"] i,
.tw-dw-btn[class*="delete"] .glyphicon,
#roles_table a.edit_role_button i,
#roles_table a.edit_role_button .glyphicon,
#roles_table button.delete_role_button i,
#roles_table button.delete_role_button .glyphicon,
#customer_groups_table button.edit_customer_group_button i,
#customer_groups_table button.edit_customer_group_button .glyphicon,
#customer_groups_table button.delete_customer_group_button i,
#customer_groups_table button.delete_customer_group_button .glyphicon,
#customer_groups_table .table-action-btn-edit i,
#customer_groups_table .table-action-btn-edit .glyphicon,
#customer_groups_table .table-action-btn-delete i,
#customer_groups_table .table-action-btn-delete .glyphicon {
    color: #FFFFFF !important;
}

/* White icons only for Edit/Delete (override any green/red) – include ::before for glyphicons */
.table-action-btn-edit i::before,
.table-action-btn-edit .glyphicon::before,
.table-action-btn-delete i::before,
.table-action-btn-delete .glyphicon::before,
button.edit_customer_group_button i::before,
button.edit_customer_group_button .glyphicon::before,
button.delete_customer_group_button i::before,
button.delete_customer_group_button .glyphicon::before {
    color: #FFF !important;
}

/* Icon styling - white icon (no green/red) */
.amazon-edit-btn i,
.amazon-delete-btn i,
.amazon-action-btn.edit i,
.amazon-action-btn.delete i,
.amazon-edit-btn .glyphicon,
.amazon-delete-btn .glyphicon,
.edit_contact_button i,
.delete_contact_button i,
.table-action-btn-edit i,
.table-action-btn-delete i,
#customer_groups_table .table-action-btn-edit i,
#customer_groups_table .table-action-btn-delete i,
button[class*="edit_"] i,
button[class*="edit_"] .glyphicon,
button[class*="edit_"] .fas,
button[class*="edit_"] .fa,
button[class*="delete_"] i,
button[class*="delete_"] .glyphicon,
button[class*="delete_"] .fas,
button[class*="delete_"] .fa,
.dropdown-menu a.edit_contact_button i,
.dropdown-menu a.edit_contact_button .glyphicon,
.dropdown-menu a.delete_contact_button i,
.dropdown-menu a.delete_contact_button .glyphicon,
#roles_table a.edit_role_button i,
#roles_table a.edit_role_button .glyphicon,
#roles_table button.delete_role_button i,
#roles_table button.delete_role_button .glyphicon,
.amazon-action-btn.edit svg,
.amazon-action-btn.delete svg {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
    margin-right: 0 !important;
    padding: 0 !important;
    background: none !important;
    border-radius: 4px !important;
    color: #FFF !important;
    width: 14px !important;
    height: 14px !important;
}

.amazon-action-btn.edit svg path,
.amazon-action-btn.edit svg polyline,
.amazon-action-btn.delete svg path,
.amazon-action-btn.delete svg polyline {
    stroke: #FFF !important;
    fill: none !important;
}

/* View button - bright orange, white text and icon (no icon square) */
.amazon-action-btn.view,
.dropdown-menu a.view_contact_button {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    background: #FF9900 !important;
    color: #FFF !important;
    border: 1px solid #e47911 !important;
    border-radius: 999px !important;
    padding: 6px 12px !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    transition: all 0.15s ease !important;
    text-decoration: none !important;
    box-shadow: none !important;
    outline: none !important;
    filter: none !important;
}

.amazon-action-btn.view:hover,
.amazon-action-btn.view:focus,
.dropdown-menu a.view_contact_button:hover,
.dropdown-menu a.view_contact_button:focus {
    background: #fa8900 !important;
    color: #FFF !important;
    border-color: #c45500 !important;
}

.amazon-action-btn.view i,
.amazon-action-btn.view .glyphicon,
.amazon-action-btn.view svg,
.dropdown-menu a.view_contact_button i,
.dropdown-menu a.view_contact_button .glyphicon,
.dropdown-menu a.view_contact_button .fa,
.dropdown-menu a.view_contact_button .fas {
    color: #FFF !important;
    stroke: #FFF !important;
    background: none !important;
    padding: 0 !important;
}

.amazon-action-btn.view svg {
    width: 14px !important;
    height: 14px !important;
}

/* No glow on action buttons - any state (override vendor .btn:focus, a:focus, etc.) */
.amazon-action-btn,
.amazon-action-btn:hover,
.amazon-action-btn:focus,
.amazon-action-btn:focus-visible,
.amazon-action-btn:active,
a.amazon-action-btn:focus,
button.amazon-action-btn:focus {
    box-shadow: none !important;
    outline: none !important;
    filter: none !important;
    text-shadow: none !important;
}

/* Note: Roles and Customer Groups buttons have their own box-shadow defined above */

/* Override Tailwind primary/error colors for Roles & Customer Groups */
/* Edit buttons - Orange, Square Shape */
#roles_table a.tw-dw-btn.edit_role_button,
#roles_table a.edit_role_button,
#customer_groups_table button.tw-dw-btn.edit_customer_group_button,
#customer_groups_table button.tw-dw-btn.table-action-btn-edit {
    background: #FF9900 !important;
    color: #FFFFFF !important;
    border-color: #e47911 !important;
    border-radius: 6px !important;
    font-weight: 600 !important;
    box-shadow: 0 2px 4px rgba(255, 153, 0, 0.3) !important;
}

#roles_table a.tw-dw-btn.edit_role_button:hover,
#roles_table a.edit_role_button:hover,
#customer_groups_table button.tw-dw-btn.edit_customer_group_button:hover,
#customer_groups_table button.tw-dw-btn.table-action-btn-edit:hover {
    background: #ffac33 !important;
    border-color: #ff9900 !important;
    color: #FFFFFF !important;
    box-shadow: 0 3px 8px rgba(255, 153, 0, 0.4) !important;
    transform: translateY(-1px) !important;
}

/* Delete buttons - Dark navy, Square Shape */
#roles_table button.tw-dw-btn.delete_role_button,
#roles_table button.delete_role_button,
#customer_groups_table button.tw-dw-btn.delete_customer_group_button,
#customer_groups_table button.tw-dw-btn.table-action-btn-delete {
    background: #232F3E !important;
    color: #FFFFFF !important;
    border-color: #37475A !important;
    border-radius: 6px !important;
    font-weight: 600 !important;
    box-shadow: 0 2px 4px rgba(35, 47, 62, 0.3) !important;
}

#roles_table button.tw-dw-btn.delete_role_button:hover,
#roles_table button.delete_role_button:hover,
#customer_groups_table button.tw-dw-btn.delete_customer_group_button:hover,
#customer_groups_table button.tw-dw-btn.table-action-btn-delete:hover {
    background: #37475A !important;
    border-color: #FF9900 !important;
    color: #FFFFFF !important;
    box-shadow: 0 3px 8px rgba(35, 47, 62, 0.4) !important;
    transform: translateY(-1px) !important;
}

/* Links in dropdown */
.dropdown-menu a.edit_contact_button,
.dropdown-menu a.delete_contact_button {
    text-decoration: none !important;
}

.dropdown-menu a.edit_contact_button:focus,
.dropdown-menu a.delete_contact_button:focus {
    color: #FFF !important;
}

/* Uniform dropdown items: all actions (View, Edit, Delete, Cancel, etc.) share
   the same base styling. Override any stray specificity that might differentiate them. */
.dropdown-menu li a[href*="edit"],
.dropdown-menu li a[href*="Edit"],
.dropdown-menu li a[href*="delete"],
.dropdown-menu li a[href*="Delete"],
.dropdown-menu li a[href*="destroy"],
.dropdown-menu li a.edit_contact_button,
.dropdown-menu li a.delete_contact_button,
.dropdown-menu li a.delete-purchase-order {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 8px 16px !important;
    margin: 0 !important;
    background: transparent !important;
    color: var(--amazon-text-light) !important;
    border: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    font-weight: normal !important;
}

.dropdown-menu li a[href*="edit"]:hover,
.dropdown-menu li a[href*="Edit"]:hover,
.dropdown-menu li a[href*="delete"]:hover,
.dropdown-menu li a[href*="Delete"]:hover,
.dropdown-menu li a[href*="destroy"]:hover,
.dropdown-menu li a.edit_contact_button:hover,
.dropdown-menu li a.delete_contact_button:hover,
.dropdown-menu li a.delete-purchase-order:hover {
    background: var(--amazon-orange) !important;
    color: var(--amazon-navy-primary) !important;
}

.dropdown-menu li a[href*="edit"]:hover i,
.dropdown-menu li a[href*="Edit"]:hover i,
.dropdown-menu li a[href*="delete"]:hover i,
.dropdown-menu li a[href*="Delete"]:hover i,
.dropdown-menu li a[href*="destroy"]:hover i,
.dropdown-menu li a.edit_contact_button:hover i,
.dropdown-menu li a.delete_contact_button:hover i,
.dropdown-menu li a.delete-purchase-order:hover i {
    color: var(--amazon-navy-primary) !important;
}

/* ============================================
   GLOBAL OVERRIDE: Ensure ALL Edit/Delete buttons are consistent
   Override any page-specific styles or rounded-full classes
   ============================================ */

/* Force square shape for ALL edit/delete buttons (override rounded-full, 999px, etc.) */
.table-action-btn-edit,
.table-action-btn-delete,
button[class*="edit"][class*="button"],
button[class*="delete"][class*="button"],
a[class*="edit"][class*="button"],
a[class*="delete"][class*="button"],
.tw-dw-btn[class*="edit"],
.tw-dw-btn[class*="delete"],
button[class*="edit_"],
button[class*="delete_"],
a[class*="edit_"],
a[class*="delete_"],
[id*="edit"][class*="button"],
[id*="delete"][class*="button"],
[class*="edit"][id*="button"],
[class*="delete"][id*="button"] {
    border-radius: 6px !important;
}

/* Override rounded-full specifically for edit/delete buttons */
.table-action-btn-edit.tw-rounded-full,
.table-action-btn-delete.tw-rounded-full,
button[class*="edit"].tw-rounded-full,
button[class*="delete"].tw-rounded-full,
a[class*="edit"].tw-rounded-full,
a[class*="delete"].tw-rounded-full,
.tw-dw-btn[class*="edit"].tw-rounded-full,
.tw-dw-btn[class*="delete"].tw-rounded-full {
    border-radius: 6px !important;
}

/* Catch-all: Any button with edit/delete in class or id should be square */
button[class*="edit"],
button[class*="delete"],
a[class*="edit"],
a[class*="delete"] {
    border-radius: 6px !important;
}

/* Ensure all table action buttons are square */
table .table-action-btn-edit,
table .table-action-btn-delete,
table button[class*="edit"],
table button[class*="delete"],
table a[class*="edit"],
table a[class*="delete"] {
    border-radius: 6px !important;
}

/* Style buttons with Tailwind classes that contain edit/delete */
/* Edit buttons with Tailwind classes */
.tw-dw-btn-outline[href*="edit"],
.tw-dw-btn-outline[href*="Edit"],
a[href*="edit"].tw-dw-btn-outline,
a[href*="Edit"].tw-dw-btn-outline,
button[data-href*="edit"].tw-dw-btn-outline,
button[data-href*="Edit"].tw-dw-btn-outline,
.tw-dw-btn-outline.tw-dw-btn-primary[href*="edit"],
.tw-dw-btn-outline.tw-dw-btn-primary[href*="Edit"],
a[href*="edit"].tw-dw-btn-outline.tw-dw-btn-primary,
a[href*="Edit"].tw-dw-btn-outline.tw-dw-btn-primary,
button[data-href*="edit"].tw-dw-btn-outline.tw-dw-btn-primary,
button[data-href*="Edit"].tw-dw-btn-outline.tw-dw-btn-primary,
.tw-dw-btn-outline.tw-dw-btn-primary.edit_role_button,
a.edit_role_button.tw-dw-btn-outline.tw-dw-btn-primary {
    background: #FF9900 !important;
    color: #FFFFFF !important;
    border-color: #e47911 !important;
    border-radius: 6px !important;
    font-weight: 600 !important;
    box-shadow: 0 2px 4px rgba(255, 153, 0, 0.3) !important;
}

.tw-dw-btn-outline[href*="edit"]:hover,
.tw-dw-btn-outline[href*="Edit"]:hover,
a[href*="edit"].tw-dw-btn-outline:hover,
a[href*="Edit"].tw-dw-btn-outline:hover,
button[data-href*="edit"].tw-dw-btn-outline:hover,
button[data-href*="Edit"].tw-dw-btn-outline:hover,
.tw-dw-btn-outline.tw-dw-btn-primary[href*="edit"]:hover,
.tw-dw-btn-outline.tw-dw-btn-primary[href*="Edit"]:hover,
a[href*="edit"].tw-dw-btn-outline.tw-dw-btn-primary:hover,
a[href*="Edit"].tw-dw-btn-outline.tw-dw-btn-primary:hover,
button[data-href*="edit"].tw-dw-btn-outline.tw-dw-btn-primary:hover,
button[data-href*="Edit"].tw-dw-btn-outline.tw-dw-btn-primary:hover,
.tw-dw-btn-outline.tw-dw-btn-primary.edit_role_button:hover,
a.edit_role_button.tw-dw-btn-outline.tw-dw-btn-primary:hover {
    background: #ffac33 !important;
    border-color: #ff9900 !important;
    color: #FFFFFF !important;
    box-shadow: 0 3px 8px rgba(255, 153, 0, 0.4) !important;
    transform: translateY(-1px) !important;
}

/* Delete buttons with Tailwind classes */
.tw-dw-btn-outline[href*="delete"],
.tw-dw-btn-outline[href*="Delete"],
.tw-dw-btn-outline[href*="destroy"],
a[href*="delete"].tw-dw-btn-outline,
a[href*="Delete"].tw-dw-btn-outline,
a[href*="destroy"].tw-dw-btn-outline,
button[data-href*="delete"].tw-dw-btn-outline,
button[data-href*="Delete"].tw-dw-btn-outline,
button[data-href*="destroy"].tw-dw-btn-outline,
.delete-sale,
.delete-product,
.delete-user,
[class*="delete"][class*="tw-dw-btn"],
.tw-dw-btn-outline.tw-dw-btn-error[href*="delete"],
.tw-dw-btn-outline.tw-dw-btn-error[href*="Delete"],
.tw-dw-btn-outline.tw-dw-btn-error[href*="destroy"],
a[href*="delete"].tw-dw-btn-outline.tw-dw-btn-error,
a[href*="Delete"].tw-dw-btn-outline.tw-dw-btn-error,
a[href*="destroy"].tw-dw-btn-outline.tw-dw-btn-error,
button[data-href*="delete"].tw-dw-btn-outline.tw-dw-btn-error,
button[data-href*="Delete"].tw-dw-btn-outline.tw-dw-btn-error,
button[data-href*="destroy"].tw-dw-btn-outline.tw-dw-btn-error,
.tw-dw-btn-outline.tw-dw-btn-error.delete_role_button,
button.delete_role_button.tw-dw-btn-outline.tw-dw-btn-error {
    background: #232F3E !important;
    color: #FFFFFF !important;
    border-color: #37475A !important;
    border-radius: 6px !important;
    font-weight: 600 !important;
    box-shadow: 0 2px 4px rgba(35, 47, 62, 0.3) !important;
}

.tw-dw-btn-outline[href*="delete"]:hover,
.tw-dw-btn-outline[href*="Delete"]:hover,
.tw-dw-btn-outline[href*="destroy"]:hover,
a[href*="delete"].tw-dw-btn-outline:hover,
a[href*="Delete"].tw-dw-btn-outline:hover,
a[href*="destroy"].tw-dw-btn-outline:hover,
button[data-href*="delete"].tw-dw-btn-outline:hover,
button[data-href*="Delete"].tw-dw-btn-outline:hover,
button[data-href*="destroy"].tw-dw-btn-outline:hover,
.delete-sale:hover,
.delete-product:hover,
.delete-user:hover,
[class*="delete"][class*="tw-dw-btn"]:hover,
.tw-dw-btn-outline.tw-dw-btn-error[href*="delete"]:hover,
.tw-dw-btn-outline.tw-dw-btn-error[href*="Delete"]:hover,
.tw-dw-btn-outline.tw-dw-btn-error[href*="destroy"]:hover,
a[href*="delete"].tw-dw-btn-outline.tw-dw-btn-error:hover,
a[href*="Delete"].tw-dw-btn-outline.tw-dw-btn-error:hover,
a[href*="destroy"].tw-dw-btn-outline.tw-dw-btn-error:hover,
button[data-href*="delete"].tw-dw-btn-outline.tw-dw-btn-error:hover,
button[data-href*="Delete"].tw-dw-btn-outline.tw-dw-btn-error:hover,
button[data-href*="destroy"].tw-dw-btn-outline.tw-dw-btn-error:hover,
.tw-dw-btn-outline.tw-dw-btn-error.delete_role_button:hover,
button.delete_role_button.tw-dw-btn-outline.tw-dw-btn-error:hover {
    background: #37475A !important;
    border-color: #ff9900 !important;
    color: #FFFFFF !important;
    box-shadow: 0 3px 8px rgba(35, 47, 62, 0.4) !important;
    transform: translateY(-1px) !important;
}

/* Ensure icons in Tailwind edit/delete buttons are white */
.tw-dw-btn-outline[href*="edit"] i,
.tw-dw-btn-outline[href*="edit"] .glyphicon,
.tw-dw-btn-outline[href*="Edit"] i,
.tw-dw-btn-outline[href*="Edit"] .glyphicon,
a[href*="edit"].tw-dw-btn-outline i,
a[href*="edit"].tw-dw-btn-outline .glyphicon,
a[href*="Edit"].tw-dw-btn-outline i,
a[href*="Edit"].tw-dw-btn-outline .glyphicon,
.tw-dw-btn-outline[href*="delete"] i,
.tw-dw-btn-outline[href*="delete"] .glyphicon,
.tw-dw-btn-outline[href*="Delete"] i,
.tw-dw-btn-outline[href*="Delete"] .glyphicon,
a[href*="delete"].tw-dw-btn-outline i,
a[href*="delete"].tw-dw-btn-outline .glyphicon,
a[href*="Delete"].tw-dw-btn-outline i,
a[href*="Delete"].tw-dw-btn-outline .glyphicon,
.delete-sale i,
.delete-sale .glyphicon,
.delete-product i,
.delete-product .glyphicon {
    color: #FFFFFF !important;
}

.amazon-edit-delete-btn {
    background: #232F3E !important;
    color: #FFF !important;
}

.amazon-edit-delete-btn i,
.amazon-edit-delete-btn .glyphicon {
    color: #FF9900 !important;
}

/* Quick Stats Row */
.quick-stats-row {
    background: linear-gradient(135deg, var(--amazon-navy-primary) 0%, var(--amazon-navy-secondary) 100%) !important;
}

.quick-stat-item {
    border-right: 1px solid rgba(255, 255, 255, 0.1) !important;
}

.quick-stat-value {
    color: var(--amazon-text-light) !important;
}

.quick-stat-label {
    color: rgba(255, 255, 255, 0.7) !important;
}

/* Two Column Grid */
@media (max-width: 1200px) {
    .two-column-grid {
        grid-template-columns: 1fr !important;
    }
}

/* Metrics Grid */
@media (max-width: 1200px) {
    .metrics-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

@media (max-width: 768px) {
    .metrics-grid {
        grid-template-columns: 1fr !important;
    }
}

/* Performance Metrics Grid */
@media (max-width: 992px) {
    .performance-metrics {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

/* Action Center Grid */
@media (max-width: 992px) {
    .action-center {
        grid-template-columns: 1fr !important;
    }
}

/* Fix DataTables in new layout */
.section-body .dataTables_wrapper,
.action-card-body .dataTables_wrapper {
    background: transparent !important;
    padding: 0 !important;
    border: none !important;
}

.section-body table,
.action-card-body table {
    margin-bottom: 0 !important;
}

/* Tooltip fixes */
.info-tip {
    color: var(--amazon-info) !important;
    cursor: help;
}

/* Alert indicator */
.alert-indicator {
    background: var(--amazon-orange) !important;
    color: var(--amazon-navy-primary) !important;
}

/* Expense create: attach document & recurring layout tweaks */

.expense-attach-wrapper {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.expense-attach-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.expense-attach-actions .btn {
    padding: 4px 10px;
    font-size: 12px;
}

.recur-checkbox-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding-top: 8px;
}

.recur-checkbox-label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 0;
}

.recur-interval-group {
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: 8px;
}

.recur-interval-input,
.recur-interval-select {
    min-width: 0;
}

/* ------------------------------------------------------------------
   Dashboard charts layout fixes
   ------------------------------------------------------------------
   Ensure the two sales charts (Last 30 Days / Current FY) always
   render in two columns on desktop-sized viewports, even after
   entering and exiting fullscreen mode.
-------------------------------------------------------------------*/

.two-column-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.5rem;
}

@media (max-width: 992px) {
    .two-column-grid {
        grid-template-columns: 1fr;
    }
}

/* Override main content background for dashboard */
#scrollable-container>.amazon-dashboard {
    background: var(--amazon-bg-gray) !important;
}

/* Fix chart backgrounds */
.chart-body canvas {
    background: transparent !important;
}

/* Fix select2 in action cards */
.action-card-header .select2-container--default .select2-selection--single {
    background: var(--amazon-navy-secondary) !important;
    border: 1px solid var(--amazon-navy-tertiary) !important;
    color: var(--amazon-text-light) !important;
}

.action-card-header .select2-container--default .select2-selection--single .select2-selection__rendered {
    color: var(--amazon-text-light) !important;
}

/* Fix header controls flex */
.header-controls {
    display: flex !important;
    gap: 12px !important;
    align-items: center !important;
    flex-wrap: wrap !important;
}

/* DataTables scrollable area fix */
.dataTables_scrollBody {
    border: none !important;
}

/* Fix pagination in new layout */
.dataTables_paginate {
    padding: 10px 16px !important;
}

/* Remove box shadow on hover for stat cards in new dashboard */
.amazon-dashboard .metric-card:hover {
    transform: translateY(-2px) !important;
}

/* ============================================
   DATERANGEPICKER - Amazon Theme Styling
   ============================================ */

/* Main Container */
.daterangepicker {
    background: #ffffff !important;
    border: 1px solid #d5d9d9 !important;
    border-radius: 8px !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15) !important;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
}

/* Calendar Header with Month/Year */
.daterangepicker .drp-calendar .calendar-table .month {
    background: linear-gradient(180deg, #232f3e 0%, #1a252f 100%) !important;
    color: #ffffff !important;
    padding: 10px !important;
    border-radius: 6px 6px 0 0 !important;
}

/* Month and Year Dropdown Selects - CRITICAL FIX */
.daterangepicker select.monthselect,
.daterangepicker select.yearselect {
    background: #ffffff !important;
    color: #0f1111 !important;
    border: 1px solid #d5d9d9 !important;
    border-radius: 4px !important;
    padding: 4px 8px !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    cursor: pointer !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !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='%23232f3e' d='M3 4.5L6 8l3-3.5H3z'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 6px center !important;
    padding-right: 24px !important;
    min-width: 70px !important;
}

.daterangepicker select.monthselect {
    min-width: 90px !important;
}

.daterangepicker select.monthselect:hover,
.daterangepicker select.yearselect:hover {
    border-color: #ff9900 !important;
    box-shadow: 0 0 0 2px rgba(255, 153, 0, 0.1) !important;
}

.daterangepicker select.monthselect:focus,
.daterangepicker select.yearselect:focus {
    border-color: #ff9900 !important;
    box-shadow: 0 0 0 3px rgba(255, 153, 0, 0.2) !important;
    outline: none !important;
}

/* Dropdown Options */
.daterangepicker select.monthselect option,
.daterangepicker select.yearselect option {
    background: #ffffff !important;
    color: #0f1111 !important;
    padding: 8px !important;
    font-size: 13px !important;
}

/* Navigation Arrows */
.daterangepicker .prev,
.daterangepicker .next {
    background: linear-gradient(180deg, #ffffff 0%, #f7f8f8 100%) !important;
    border: 1px solid #d5d9d9 !important;
    border-radius: 4px !important;
    color: #232f3e !important;
    cursor: pointer !important;
    transition: all 0.15s ease !important;
}

.daterangepicker .prev:hover,
.daterangepicker .next:hover {
    background: linear-gradient(180deg, #f7fafa 0%, #e3e6e6 100%) !important;
    border-color: #ff9900 !important;
    color: #ff9900 !important;
}

/* Calendar Table Header (Day Names) */
.daterangepicker th.month {
    background: transparent !important;
    color: #232f3e !important;
    font-weight: 700 !important;
    font-size: 14px !important;
    padding: 8px !important;
}

.daterangepicker th {
    color: #565959 !important;
    font-weight: 600 !important;
    font-size: 12px !important;
    text-transform: uppercase !important;
    padding: 6px 8px !important;
}

/* Calendar Days */
.daterangepicker td.available {
    color: #0f1111 !important;
    font-weight: 400 !important;
    border-radius: 4px !important;
    transition: all 0.15s ease !important;
}

.daterangepicker td.available:hover {
    background: #fff8e7 !important;
    color: #c45500 !important;
}

/* Weekend Days */
.daterangepicker td.weekend {
    color: #c45500 !important;
}

/* Selected Date */
.daterangepicker td.active,
.daterangepicker td.active:hover {
    background: linear-gradient(180deg, #ff9900 0%, #e47911 100%) !important;
    color: #0f1111 !important;
    font-weight: 600 !important;
    border-radius: 4px !important;
}

/* Today */
.daterangepicker td.today {
    background: #fff4e5 !important;
    color: #c45500 !important;
    font-weight: 600 !important;
}

/* Date Range Selection */
.daterangepicker td.in-range {
    background: #fff8e7 !important;
    color: #0f1111 !important;
}

.daterangepicker td.start-date,
.daterangepicker td.end-date {
    background: linear-gradient(180deg, #ff9900 0%, #e47911 100%) !important;
    color: #0f1111 !important;
    font-weight: 600 !important;
    border-radius: 4px !important;
}

/* Off (Previous/Next Month) Days */
.daterangepicker td.off,
.daterangepicker td.off.start-date,
.daterangepicker td.off.end-date {
    color: #6b7280 !important;
    background: transparent !important;
}

/* Disabled Days */
.daterangepicker td.disabled {
    color: #d5d9d9 !important;
    text-decoration: line-through !important;
}

/* Button Row */
.daterangepicker .drp-buttons {
    background: #f7f8f8 !important;
    border-top: 1px solid #e5e7eb !important;
    padding: 10px 12px !important;
}

/* Apply Button */
.daterangepicker .drp-buttons .applyBtn {
    background: linear-gradient(180deg, #0f1111 0%, #0f1111 100%) !important;
    border: 1px solid #005a6b !important;
    color: #ffffff !important;
    font-weight: 600 !important;
    border-radius: 6px !important;
    padding: 6px 16px !important;
    transition: all 0.15s ease !important;
}

.daterangepicker .drp-buttons .applyBtn:hover {
    background: linear-gradient(180deg, #0f1111 0%, #0f1111 100%) !important;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15) !important;
}

/* Cancel Button */
.daterangepicker .drp-buttons .cancelBtn {
    background: linear-gradient(180deg, #ffffff 0%, #f7f8f8 100%) !important;
    border: 1px solid #d5d9d9 !important;
    color: #0f1111 !important;
    font-weight: 500 !important;
    border-radius: 6px !important;
    padding: 6px 16px !important;
    transition: all 0.15s ease !important;
}

.daterangepicker .drp-buttons .cancelBtn:hover {
    background: linear-gradient(180deg, #f7fafa 0%, #e3e6e6 100%) !important;
    border-color: #bbbfbf !important;
}

/* Selected Date Display */
.daterangepicker .drp-selected {
    color: #565959 !important;
    font-size: 12px !important;
    font-weight: 500 !important;
}

/* Predefined Ranges Sidebar - text styling to match reference (do not disturb calendar) */
.daterangepicker.show-ranges .drp-calendar {
    border-left: 1px solid #e5e7eb !important;
}

.daterangepicker .ranges {
    min-width: 155px !important;
    width: auto !important;
}

.daterangepicker .ranges ul {
    min-width: 155px !important;
    width: 100% !important;
    padding: 8px 0 !important;
    list-style: none !important;
    margin: 0 !important;
}

.daterangepicker .ranges li {
    color: #0f1111 !important;
    background: transparent !important;
    padding: 8px 12px !important;
    font-size: 13px !important;
    font-weight: 400 !important;
    line-height: 1.4 !important;
    cursor: pointer !important;
    transition: all 0.15s ease !important;
    border-radius: 4px !important;
    margin: 0 6px !important;
    text-align: left !important;
}

.daterangepicker .ranges li:hover {
    background: #fff8e7 !important;
    color: #c45500 !important;
}

.daterangepicker .ranges li.active {
    background: linear-gradient(180deg, #ff9900 0%, #e47911 100%) !important;
    color: #ffffff !important;
    font-weight: 600 !important;
}

.daterangepicker .ranges,
.daterangepicker .ranges ul {
    background: #ffffff !important;
}

.daterangepicker.show-calendar .ranges {
    margin-top: 0 !important;
}

.daterangepicker .drp-buttons .applyBtn,
.daterangepicker .drp-buttons .btn.applyBtn,
.daterangepicker .drp-buttons button.applyBtn,
.daterangepicker .drp-buttons .btn-primary.applyBtn {
    background: linear-gradient(180deg, #ff9900 0%, #e47911 100%) !important;
    border: 1px solid #c45500 !important;
    color: #0f1111 !important;
    font-weight: 600 !important;
    box-shadow: none !important;
}

.daterangepicker .drp-buttons .applyBtn:hover,
.daterangepicker .drp-buttons .btn.applyBtn:hover,
.daterangepicker .drp-buttons button.applyBtn:hover,
.daterangepicker .drp-buttons .btn-primary.applyBtn:hover,
.daterangepicker .drp-buttons .applyBtn:focus,
.daterangepicker .drp-buttons .btn.applyBtn:focus,
.daterangepicker .drp-buttons button.applyBtn:focus,
.daterangepicker .drp-buttons .btn-primary.applyBtn:focus {
    background: linear-gradient(180deg, #fa8900 0%, #c45500 100%) !important;
    border-color: #c45500 !important;
    color: #0f1111 !important;
}

/* DATERANGEPICKER - Header Fix (match reference UI) */
.daterangepicker .calendar-table thead tr:first-child th {
    background: linear-gradient(180deg, #232f3e 0%, #1a252f 100%) !important;
    color: #ffffff !important;
    border: 0 !important;
    border-radius: 0 !important;
    padding: 8px 6px !important;
}

.daterangepicker .calendar-table thead tr:first-child th.prev,
.daterangepicker .calendar-table thead tr:first-child th.next {
    width: 32px !important;
    padding: 0 6px !important;
    text-align: center !important;
}

.daterangepicker .calendar-table thead tr:first-child th.prev {
    border-top-left-radius: 6px !important;
}

.daterangepicker .calendar-table thead tr:first-child th.next {
    border-top-right-radius: 6px !important;
}

.daterangepicker .calendar-table thead tr:first-child th.month {
    font-weight: 700 !important;
    letter-spacing: 0.2px !important;
}

.daterangepicker .calendar-table thead tr:nth-child(2) th {
    background: #232f3e !important;
    color: #ffffff !important;
    border: 0 !important;
    border-radius: 0 !important;
    font-weight: 600 !important;
}

.daterangepicker .calendar-table .next span,
.daterangepicker .calendar-table .prev span {
    border-color: #ffffff !important;
    border-width: 0 3px 3px 0 !important;
    padding: 5px !important;
    display: inline-block !important;
}

.daterangepicker .prev,
.daterangepicker .next {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

/* DATERANGEPICKER - Calendar Grid + Divider */
.daterangepicker .drp-calendar {
    padding: 8px 6px !important;
    box-sizing: border-box !important;
}

.daterangepicker.show-ranges.ltr .drp-calendar.left {
    border-right: 0 !important;
    padding-right: 0 !important;
}

.daterangepicker.show-ranges.ltr .drp-calendar.right {
    border-left: 0 !important;
    padding-left: 0 !important;
}

.daterangepicker .calendar-table {
    border: 1px solid var(--amazon-border) !important;
    border-radius: 6px !important;
    background: #ffffff !important;
}

/* Separate the two calendars with a clean gap */
.daterangepicker .drp-calendar.left {
    margin-right: 50px !important;
    margin-left: 50px !important;
}

.daterangepicker .drp-calendar.right {
    margin-left: 60px !important;
    margin-right: 60px !important;
}

.daterangepicker .calendar-table table {
    border-collapse: separate !important;
    border-spacing: 0 !important;
}

.daterangepicker .calendar-table th,
.daterangepicker .calendar-table td {
    border: 1px solid var(--amazon-border) !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    height: 24px !important;
    line-height: 22px !important;
    min-width: 28px !important;
    width: 28px !important;
    color: #0f1111 !important;
}

/* Ensure full borders on both calendars */
.daterangepicker .drp-calendar.left .calendar-table,
.daterangepicker .drp-calendar.right .calendar-table {
    border: 1px solid var(--amazon-border) !important;
    border-radius: 6px !important;
}

.daterangepicker .drp-calendar.left .calendar-table th:last-child,
.daterangepicker .drp-calendar.left .calendar-table td:last-child {
    border-right: 1px solid var(--amazon-border) !important;
}

.daterangepicker .drp-calendar.right .calendar-table th:first-child,
.daterangepicker .drp-calendar.right .calendar-table td:first-child {
    border-left: 1px solid var(--amazon-border) !important;
}


/* Keep header rows clean while preserving grid */
.daterangepicker .calendar-table thead tr:first-child th,
.daterangepicker .calendar-table thead tr:nth-child(2) th {
    border-color: #1a252f !important;
}

/* ============================================
   DATATABLE TOOLBAR - Search Left, Buttons Right
   ============================================ */

/* Toolbar Container - Flexbox Layout */
.amazon-table-toolbar {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 16px !important;
    padding: 16px 0 !important;
    margin-bottom: 12px !important;
    border-bottom: 1px solid #e5e7eb !important;
    background: transparent !important;
}

/* Search Section - Left Side */
.amazon-table-toolbar .toolbar-search {
    flex: 0 0 auto !important;
    min-width: 280px !important;
}

.amazon-table-toolbar .toolbar-search .dataTables_filter {
    display: flex !important;
    align-items: center !important;
    margin: 0 !important;
    text-align: left !important;
}

.amazon-table-toolbar .toolbar-search .dataTables_filter label {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    margin: 0 !important;
    font-weight: 500 !important;
    color: #565959 !important;
    font-size: 13px !important;
}

.amazon-table-toolbar .toolbar-search .dataTables_filter input {
    width: 280px !important;
    height: 40px !important;
    padding: 8px 14px 8px 40px !important;
    border: 1px solid #d5d9d9 !important;
    border-radius: 8px !important;
    background: #ffffff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23565959' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'%3E%3C/line%3E%3C/svg%3E") no-repeat 12px center !important;
    background-size: 16px !important;
    font-size: 14px !important;
    color: #0f1111 !important;
    transition: all 0.15s ease !important;
    margin-left: 0 !important;
}

.amazon-table-toolbar .toolbar-search .dataTables_filter input::placeholder {
    color: #9ca3af !important;
}

.amazon-table-toolbar .toolbar-search .dataTables_filter input:hover {
    border-color: #ff9900 !important;
}

.amazon-table-toolbar .toolbar-search .dataTables_filter input:focus {
    border-color: #ff9900 !important;
    box-shadow: 0 0 0 3px rgba(255, 153, 0, 0.15) !important;
    outline: none !important;
}

/* Buttons Section - Right Side */
.amazon-table-toolbar .toolbar-buttons {
    flex: 0 0 auto !important;
}

.amazon-table-toolbar .toolbar-buttons .dt-buttons {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    flex-wrap: wrap !important;
    margin: 0 !important;
}

/* Amazon Export Buttons - Enhanced Styling */
.amazon-export-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    padding: 10px 16px !important;
    background: linear-gradient(180deg, #ffffff 0%, #f7f8f8 100%) !important;
    border: 1px solid #d5d9d9 !important;
    border-radius: 8px !important;
    color: #0f1111 !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    cursor: pointer !important;
    transition: all 0.15s ease !important;
    text-decoration: none !important;
    white-space: nowrap !important;
    height: 40px !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05) !important;
}

.amazon-export-btn:hover {
    /* Darker hover so buttons stay visible over dark headers */
    background: linear-gradient(180deg, #232f3e 0%, #1a252f 100%) !important;
    border-color: #232f3e !important;
    color: #ffffff !important;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25) !important;
    transform: translateY(-1px) !important;
}

.amazon-export-btn:active {
    background: linear-gradient(180deg, #1a252f 0%, #111921 100%) !important;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.3) !important;
    transform: translateY(0) !important;
}

.amazon-export-btn i {
    font-size: 14px !important;
    color: #565959 !important;
}

.amazon-export-btn:hover i {
    color: #ff9900 !important;
}

/* CSV Button */
.amazon-export-btn:has(.fa-file-csv) i,
.amazon-export-btn .fa-file-csv {
    color: #067d62 !important;
}

/* Excel Button */
.amazon-export-btn:has(.fa-file-excel) i,
.amazon-export-btn .fa-file-excel {
    color: #1d6f42 !important;
}

/* Print Button */
.amazon-export-btn:has(.fa-print) i,
.amazon-export-btn .fa-print {
    color: #007185 !important;
}

/* Columns Button - Dark Style */
.amazon-export-btn.column-visibility {
    background: linear-gradient(180deg, #232f3e 0%, #1a252f 100%) !important;
    border-color: #232f3e !important;
    color: #ffffff !important;
}

.amazon-export-btn.column-visibility:hover {
    background: linear-gradient(180deg, #37475a 0%, #2d3d4f 100%) !important;
    border-color: #37475a !important;
    color: #ffffff !important;
}

.amazon-export-btn.column-visibility i {
    color: #ff9900 !important;
}

/* PDF Button - If present */
.amazon-export-btn.pdf-btn,
.amazon-export-btn:has(.fa-file-pdf) {
    background: linear-gradient(180deg, #ffffff 0%, #fef2f2 100%) !important;
    border-color: #fecaca !important;
}

.amazon-export-btn.pdf-btn:hover,
.amazon-export-btn:has(.fa-file-pdf):hover {
    background: linear-gradient(180deg, #fef2f2 0%, #fee2e2 100%) !important;
    border-color: #b12704 !important;
}

.amazon-export-btn .fa-file-pdf {
    color: #b12704 !important;
}

/* Responsive - Smaller Screens */
@media (max-width: 768px) {
    .amazon-table-toolbar {
        flex-direction: column !important;
        align-items: stretch !important;
    }

    .amazon-table-toolbar .toolbar-search {
        width: 100% !important;
        min-width: auto !important;
    }

    .amazon-table-toolbar .toolbar-search .dataTables_filter input {
        width: 100% !important;
    }

    .amazon-table-toolbar .toolbar-buttons {
        width: 100% !important;
    }

    .amazon-table-toolbar .toolbar-buttons .dt-buttons {
        justify-content: flex-start !important;
    }
}

/* Hide the "Search:" label text but keep the input */
.amazon-table-toolbar .toolbar-search .dataTables_filter label {
    font-size: 0 !important;
}

.amazon-table-toolbar .toolbar-search .dataTables_filter input {
    font-size: 14px !important;
}

/* ============================================
   Bootstrap Datepicker - Restore full calendar UI
   Override table header hiding so datepicker shows:
   month/year header, prev/next arrows, weekday row, day grid
   ============================================ */
.datepicker-dropdown table thead tr,
.datepicker-inline table thead tr,
.datepicker table thead tr {
    display: table-row !important;
    height: auto !important;
    line-height: normal !important;
    visibility: visible !important;
    overflow: visible !important;
}

.datepicker-dropdown table thead th,
.datepicker-inline table thead th,
.datepicker table thead th {
    display: table-cell !important;
    visibility: visible !important;
    height: auto !important;
    line-height: normal !important;
    overflow: visible !important;
    padding: 6px 8px !important;
}

/* Prev/next arrows */
.datepicker-dropdown .prev,
.datepicker-dropdown .next,
.datepicker .prev,
.datepicker .next {
    display: table-cell !important;
    visibility: visible !important;
    cursor: pointer !important;
    font-size: 16px !important;
}

/* Month/year title (datepicker-switch) */
.datepicker-dropdown .datepicker-switch,
.datepicker .datepicker-switch {
    display: table-cell !important;
    visibility: visible !important;
}

/* Weekday headers (Su Mo Tu ...) */
.datepicker-dropdown table thead tr:nth-child(2) th.dow,
.datepicker table thead tr:nth-child(2) th.dow {
    display: table-cell !important;
    visibility: visible !important;
}

/* Day cells in tbody */
.datepicker-dropdown table tbody td,
.datepicker table tbody td {
    display: table-cell !important;
    visibility: visible !important;
}

/* ============================================
   FORCED AMAZON DROPDOWN ITEM OVERRIDES
   Ensures Edit/Delete links in product dropdowns
   have grey hover backgrounds and Orange icons.
   ============================================ */

/* Reset backgrounds for product action links in dropdowns */
.dropdown-menu a.amz-edit-link,
.dropdown-menu a.amz-delete-link,
.dropdown-menu a.amz-view-link,
.dropdown-menu a.amz-labels-link,
.dropdown-menu a.amz-history-link,
.dropdown-menu a.amz-brochure-link,
.dropdown-menu a.amz-activate-link,
.dropdown-menu a.amz-deactivate-link,
.dropdown-menu a.amz-discontinue-link,
.dropdown-menu a.amz-variants-link {
    background: transparent !important;
    color: var(--amazon-text-light) !important;
    border: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    display: flex !important;
    align-items: center !important;
    padding: 8px 16px !important;
    width: 100% !important;
    text-align: left !important;
}

/* Hover state: Grey background (#37475A / navy-secondary) */
.dropdown-menu a.amz-edit-link:hover,
.dropdown-menu a.amz-delete-link:hover,
.dropdown-menu a.amz-view-link:hover,
.dropdown-menu a.amz-labels-link:hover,
.dropdown-menu a.amz-history-link:hover,
.dropdown-menu a.amz-brochure-link:hover,
.dropdown-menu a.amz-activate-link:hover,
.dropdown-menu a.amz-deactivate-link:hover,
.dropdown-menu a.amz-discontinue-link:hover,
.dropdown-menu a.amz-variants-link:hover {
    background: var(--amazon-navy-secondary, #37475A) !important;
    color: var(--amazon-text-light, #ffffff) !important;
}

/* Ensure icons are ALWAYS Amazon Orange (#FF9900) even on hover */
.dropdown-menu a.amz-edit-link i,
.dropdown-menu a.amz-edit-link .glyphicon,
.dropdown-menu a.amz-delete-link i,
.dropdown-menu a.amz-delete-link .fa,
.dropdown-menu a.amz-delete-link .fas,
.dropdown-menu a.amz-view-link i,
.dropdown-menu a.amz-view-link .fa,
.dropdown-menu a.amz-view-link .fas,
.dropdown-menu a.amz-labels-link i,
.dropdown-menu a.amz-labels-link .fa,
.dropdown-menu a.amz-labels-link .fas,
.dropdown-menu a.amz-history-link i,
.dropdown-menu a.amz-history-link .fa,
.dropdown-menu a.amz-history-link .fas,
.dropdown-menu a.amz-brochure-link i,
.dropdown-menu a.amz-brochure-link .fa,
.dropdown-menu a.amz-brochure-link .fas,
.dropdown-menu a.amz-activate-link i,
.dropdown-menu a.amz-activate-link .fa,
.dropdown-menu a.amz-activate-link .fas,
.dropdown-menu a.amz-deactivate-link i,
.dropdown-menu a.amz-deactivate-link .fa,
.dropdown-menu a.amz-deactivate-link .fas,
.dropdown-menu a.amz-discontinue-link i,
.dropdown-menu a.amz-discontinue-link .fa,
.dropdown-menu a.amz-discontinue-link .fas,
.dropdown-menu a.amz-variants-link i,
.dropdown-menu a.amz-variants-link .fa,
.dropdown-menu a.amz-variants-link .fas {
    color: var(--amazon-orange, #FF9900) !important;
}

/* Redesigned bootstrap datetimepicker - modern calendar look */
.bootstrap-datetimepicker-widget.dropdown-menu {
    background: #ffffff !important;
    border: 1px solid #D5D9D9 !important;
    box-shadow: 0 8px 24px rgba(0,0,0,0.15), 0 2px 8px rgba(0,0,0,0.08) !important;
    color: #0F1111 !important;
    padding: 0 !important;
    font-size: 13px !important;
    width: auto !important;
    min-width: 280px;
    max-width: 340px;
    z-index: 2050;
    border-radius: 10px !important;
    overflow: hidden;
}

/* Nav row (prev | month/year | next) - dark Amazon theme */
.bootstrap-datetimepicker-widget.dropdown-menu thead tr:first-child {
    background: linear-gradient(135deg, #232F3E 0%, #37475A 100%) !important;
}

.bootstrap-datetimepicker-widget.dropdown-menu thead tr:first-child th {
    color: rgba(255,255,255,0.95) !important;
    padding: 12px 8px !important;
    font-weight: 600 !important;
    font-size: 14px !important;
    border: none !important;
}

.bootstrap-datetimepicker-widget.dropdown-menu thead tr:first-child th.prev,
.bootstrap-datetimepicker-widget.dropdown-menu thead tr:first-child th.next {
    cursor: pointer;
}

.bootstrap-datetimepicker-widget.dropdown-menu thead tr:first-child th.prev:hover,
.bootstrap-datetimepicker-widget.dropdown-menu thead tr:first-child th.next:hover {
    background: rgba(255,255,255,0.12) !important;
    color: #ffffff !important;
}

.bootstrap-datetimepicker-widget.dropdown-menu .picker-switch td,
.bootstrap-datetimepicker-widget.dropdown-menu .picker-switch td span {
    color: #ffffff !important;
    background: transparent !important;
    padding: 4px 12px !important;
    border-radius: 6px !important;
    font-weight: 600 !important;
}

.bootstrap-datetimepicker-widget.dropdown-menu .picker-switch td span:hover {
    background: rgba(255,255,255,0.15) !important;
    color: #ffffff !important;
}

/* Day of week headers (Su Mo Tu ...) */
.bootstrap-datetimepicker-widget.dropdown-menu thead tr:nth-child(2) th {
    padding: 10px 4px !important;
    font-weight: 600 !important;
    font-size: 11px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px;
    color: #6B7280 !important;
    background: #F9FAFB !important;
    border-bottom: 1px solid #E5E7EB !important;
}

.bootstrap-datetimepicker-widget.dropdown-menu thead tr:nth-child(2) th:hover {
    background: #F9FAFB !important;
}

/* Calendar body padding */
.bootstrap-datetimepicker-widget.dropdown-menu tbody {
    padding: 12px 8px !important;
}

.bootstrap-datetimepicker-widget.dropdown-menu table {
    width: 100% !important;
}

.bootstrap-datetimepicker-widget.dropdown-menu table td,
.bootstrap-datetimepicker-widget.dropdown-menu table th {
    color: #0F1111 !important;
    padding: 6px 4px !important;
    border: none !important;
    line-height: 1.3;
}

/* Day cells */
.bootstrap-datetimepicker-widget.dropdown-menu table td.day {
    font-size: 13px !important;
    font-weight: 500 !important;
    border-radius: 8px !important;
}

.bootstrap-datetimepicker-widget.dropdown-menu table td.day:hover {
    background: #FEF3C7 !important;
    color: #92400E !important;
    cursor: pointer;
}

.bootstrap-datetimepicker-widget.dropdown-menu table td.today {
    position: relative;
}

.bootstrap-datetimepicker-widget.dropdown-menu table td.today:before {
    content: '' !important;
    display: inline-block !important;
    border: 2px solid #FF9900 !important;
    border-radius: 8px !important;
    position: absolute !important;
    inset: 2px !important;
    pointer-events: none;
}

.bootstrap-datetimepicker-widget.dropdown-menu table td.today:hover:before {
    border-color: #E47911 !important;
}

.bootstrap-datetimepicker-widget.dropdown-menu table td.active,
.bootstrap-datetimepicker-widget.dropdown-menu table td.active:hover {
    background: linear-gradient(to bottom, #FF9900 0%, #E47911 100%) !important;
    color: #ffffff !important;
    border-radius: 8px !important;
    font-weight: 600 !important;
}

.bootstrap-datetimepicker-widget.dropdown-menu table td.active.today:before {
    border-color: rgba(255,255,255,0.8) !important;
}

.bootstrap-datetimepicker-widget.dropdown-menu table td.old,
.bootstrap-datetimepicker-widget.dropdown-menu table td.new {
    color: #9CA3AF !important;
}

.bootstrap-datetimepicker-widget.dropdown-menu table td.disabled,
.bootstrap-datetimepicker-widget.dropdown-menu table td.disabled:hover {
    color: #D1D5DB !important;
    background: transparent !important;
    cursor: not-allowed;
}

/* Month/year picker spans */
.bootstrap-datetimepicker-widget.dropdown-menu table td span {
    width: 100% !important;
    height: auto !important;
    line-height: 1.8 !important;
    padding: 6px 4px !important;
    border-radius: 6px !important;
    font-weight: 500 !important;
}

.bootstrap-datetimepicker-widget.dropdown-menu table td span:hover {
    background: #FEF3C7 !important;
    color: #92400E !important;
}

.bootstrap-datetimepicker-widget.dropdown-menu table td span.active {
    background: linear-gradient(to bottom, #FF9900 0%, #E47911 100%) !important;
    color: #ffffff !important;
}

/* Timepicker section */
.bootstrap-datetimepicker-widget.dropdown-menu .timepicker-picker table,
.bootstrap-datetimepicker-widget.dropdown-menu .timepicker {
    padding: 12px 16px !important;
    background: #F9FAFB !important;
    border-top: 1px solid #E5E7EB !important;
}

.bootstrap-datetimepicker-widget.dropdown-menu .timepicker-hour,
.bootstrap-datetimepicker-widget.dropdown-menu .timepicker-minute,
.bootstrap-datetimepicker-widget.dropdown-menu .timepicker-second {
    color: #0F1111 !important;
    font-weight: 600 !important;
    font-size: 16px !important;
}

.bootstrap-datetimepicker-widget.dropdown-menu .timepicker-picker .btn,
.bootstrap-datetimepicker-widget.dropdown-menu [data-action] {
    color: #37475A !important;
    border-radius: 6px !important;
}

.bootstrap-datetimepicker-widget.dropdown-menu .timepicker-picker .btn:hover,
.bootstrap-datetimepicker-widget.dropdown-menu [data-action]:hover {
    background: #E5E7EB !important;
    color: #232F3E !important;
}

/* Today/Clear/Select buttons footer */
.bootstrap-datetimepicker-widget.dropdown-menu .datepicker .datepicker-footer,
.bootstrap-datetimepicker-widget.dropdown-menu .collapse {
    padding: 10px 12px !important;
    background: #F9FAFB !important;
    border-top: 1px solid #E5E7EB !important;
}

.bootstrap-datetimepicker-widget.dropdown-menu .btn[data-action="today"] {
    background: linear-gradient(to bottom, #FF9900 0%, #E47911 100%) !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 6px !important;
    font-weight: 600 !important;
    padding: 8px 14px !important;
}

.bootstrap-datetimepicker-widget.dropdown-menu .btn[data-action="today"]:hover {
    opacity: 0.95;
    color: #ffffff !important;
}

.bootstrap-datetimepicker-widget.dropdown-menu .btn[data-action="clear"] {
    color: #6B7280 !important;
    border-radius: 6px !important;
}

.bootstrap-datetimepicker-widget.dropdown-menu .btn[data-action="clear"]:hover {
    background: #FEE2E2 !important;
    color: #B91C1C !important;
}

/* ============================================
   PRIME PRODUCTS - ADD PRIME PRODUCT MODAL
   ============================================ */

.amazon-prime-modal {
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid var(--amazon-border);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
}

.amazon-prime-modal-header {
    background: #37475A;
    border-bottom: 1px solid rgba(255, 255, 255, 0.15);
    padding: 14px 18px;
}

.amazon-prime-modal-title {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
    color: #ffffff;
    display: flex;
    align-items: center;
    gap: 8px;
}

.amazon-prime-modal-title i {
    color: #ffdd55 !important;
}

.amazon-prime-modal-close {
    color: #ffffff;
    opacity: 0.9;
}

.amazon-prime-modal-close:hover {
    opacity: 1;
}

.amazon-prime-modal-body {
    padding: 20px 22px;
    background: #ffffff;
}

.amazon-prime-label {
    font-weight: 600;
    color: var(--amazon-text-dark);
    font-size: 14px;
    margin-bottom: 6px;
}

.amazon-prime-input {
    border-radius: 4px;
    border: 1px solid var(--amazon-border);
    box-shadow: none;
}

.amazon-prime-input:focus {
    border-color: var(--amazon-orange);
    box-shadow: 0 0 0 3px rgba(255, 153, 0, 0.25);
}

.amazon-prime-exclusive-box {
    padding: 10px 14px;
    background: #f8f9fa;
    border-radius: 8px;
    border: 1px solid #e5e7eb;
    margin-top: 4px;
}

.amazon-prime-exclusive-box label {
    font-weight: 500;
    color: #111827;
}

.amazon-prime-modal-footer {
    border-top: 1px solid rgba(255, 255, 255, 0.15);
    padding: 14px 22px;
    background: #37475A;
    color: #ffffff;
}

.amazon-prime-btn-primary {
    background: linear-gradient(to bottom, #FF9900 0%, #E47911 100%) !important;
    border: 1px solid #C7511F !important;
    color: #ffffff !important;
    border-radius: 8px;
    font-weight: 600;
    padding: 8px 20px;
}

.amazon-prime-btn-primary:hover {
    background: linear-gradient(to bottom, #FFAC33 0%, #FF9900 100%) !important;
    border-color: #FF9900 !important;
    color: #ffffff !important;
}

.amazon-prime-btn-secondary {
    background: #ffffff !important;
    border: 1px solid #D5D9D9 !important;
    color: #232f3e !important;
    border-radius: 8px;
    font-weight: 500;
    padding: 8px 18px;
}

.amazon-prime-btn-secondary:hover {
    background: #F7F8F8 !important;
    border-color: #A2A6AC !important;
}

/* ============================================
   BRAND CONFIGURATION PAGE - Amazon Style
   ============================================ */

/* Amazon Banner Header - Match standard banner style */
.amazon-brand-config-banner {
    background: #37475a;
    border-radius: 6px;
    padding: 22px 28px;
    margin-bottom: 16px;
    box-shadow: 0 3px 10px rgba(15, 17, 17, 0.4);
}

.amazon-banner-content {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.amazon-banner-title {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 22px;
    font-weight: 700;
    margin: 0;
    color: #ffffff;
}

.amazon-banner-title i {
    font-size: 22px;
    color: #ffffff !important;
}

.amazon-banner-subtitle {
    font-size: 13px;
    color: rgba(249, 250, 251, 0.88);
    margin: 0;
}

/* Content Area */
.amazon-brand-config-content {
    background: var(--amazon-bg-gray);
    padding: 24px;
    min-height: calc(100vh - 200px);
}

/* Amazon Config Cards */
.amazon-config-card.box {
    background: #FFFFFF;
    border: 1px solid var(--amazon-border);
    border-radius: 8px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
    margin-bottom: 24px;
}

.amazon-config-card .box-header {
    background: linear-gradient(to bottom, #F7F8F8 0%, #E7E9EC 100%);
    border-bottom: 2px solid var(--amazon-orange);
    padding: 16px 20px;
    border-radius: 8px 8px 0 0;
}

.amazon-config-card .box-title {
    color: var(--amazon-text-dark);
    font-size: 18px;
    font-weight: 600;
    text-transform: none;
    letter-spacing: 0.3px;
}

.amazon-config-card .box-body {
    padding: 24px;
    background: #FFFFFF;
}

/* Form Elements - Amazon Style */
.amazon-config-card .form-group {
    margin-bottom: 20px;
}

.amazon-config-card label {
    color: var(--amazon-text-dark);
    font-weight: 500;
    font-size: 14px;
    margin-bottom: 8px;
    display: block;
}

.amazon-config-card .form-control {
    border: 1px solid var(--amazon-border);
    border-radius: 4px;
    padding: 10px 12px;
    font-size: 14px;
    color: var(--amazon-text-dark);
    transition: all 0.15s ease;
    background: #FFFFFF;
}

.amazon-config-card .form-control:focus {
    border-color: var(--amazon-orange);
    box-shadow: 0 0 0 3px rgba(255, 153, 0, 0.1);
    outline: none;
}

.amazon-config-card .help-block {
    color: var(--amazon-text-medium);
    font-size: 12px;
    margin-top: 6px;
    margin-bottom: 0;
}

.amazon-config-card .help-block small {
    color: var(--amazon-text-medium);
}

.amazon-config-card .text-success {
    color: var(--amazon-success);
}

/* Test Email Button */
.amazon-test-email-btn {
    background: linear-gradient(to bottom, var(--amazon-orange) 0%, #E47911 100%);
    border: 1px solid #C7511F;
    color: #FFFFFF;
    padding: 10px 20px;
    font-weight: 500;
    border-radius: 4px;
    transition: all 0.15s ease;
    display: inline-flex;
    align-items: center;
    font-size: 14px;
}

.amazon-test-email-btn:hover {
    background: linear-gradient(to bottom, #FFAC33 0%, var(--amazon-orange) 100%);
    border-color: var(--amazon-orange);
    color: #FFFFFF;
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(255, 153, 0, 0.3);
}

.amazon-help-text {
    display: block;
    color: var(--amazon-text-medium);
    font-size: 13px;
    margin-top: 12px;
    margin-left: 0;
}

.amazon-help-text strong {
    color: var(--amazon-text-dark);
}

/* Amazon Tabs */
.amazon-nav-tabs {
    border-bottom: 2px solid var(--amazon-border);
    background: #F7F8F8;
    padding: 0 20px;
    margin: 0;
}

.amazon-nav-tabs > li {
    margin-bottom: -2px;
}

.amazon-nav-tabs > li > a {
    color: var(--amazon-text-dark);
    padding: 12px 20px;
    border: none;
    border-bottom: 3px solid transparent;
    background: transparent;
    font-weight: 500;
    font-size: 14px;
    transition: all 0.15s ease;
    margin-right: 4px;
}

.amazon-nav-tabs > li > a:hover {
    color: var(--amazon-orange);
    background: rgba(255, 153, 0, 0.05);
    border-bottom-color: rgba(255, 153, 0, 0.3);
}

.amazon-nav-tabs > li.active > a,
.amazon-nav-tabs > li.active > a:hover,
.amazon-nav-tabs > li.active > a:focus {
    color: var(--amazon-orange);
    background: #FFFFFF;
    border-bottom-color: var(--amazon-orange);
    border-top: none;
    border-left: none;
    border-right: none;
}

.amazon-tabs .tab-content {
    background: #FFFFFF;
    padding: 24px;
    border: 1px solid var(--amazon-border);
    border-top: none;
    border-radius: 0 0 8px 8px;
}

/* Form Actions */
.amazon-form-actions {
    margin-top: 32px;
    padding-top: 24px;
    border-top: 1px solid var(--amazon-border);
}

.amazon-btn-primary,
.amazon-btn-save {
    background: linear-gradient(to bottom, var(--amazon-orange) 0%, #E47911 100%);
    border: 1px solid #C7511F;
    color: #FFFFFF;
    padding: 12px 32px;
    font-weight: 500;
    font-size: 15px;
    border-radius: 4px;
    transition: all 0.15s ease;
    display: inline-block;
    margin-right: 12px;
    text-decoration: none;
}

.amazon-btn-primary:hover,
.amazon-btn-save:hover {
    background: linear-gradient(to bottom, #FFAC33 0%, var(--amazon-orange) 100%);
    border-color: var(--amazon-orange);
    color: #FFFFFF;
    transform: translateY(-1px);
    box-shadow: 0 2px 6px rgba(255, 153, 0, 0.3);
    text-decoration: none;
}

.amazon-btn-secondary,
.amazon-btn-back {
    background: linear-gradient(to bottom, #FFFFFF 0%, #F7F8F8 100%);
    border: 1px solid var(--amazon-border);
    color: var(--amazon-text-dark);
    padding: 12px 32px;
    font-weight: 500;
    font-size: 15px;
    border-radius: 4px;
    transition: all 0.15s ease;
    display: inline-block;
    text-decoration: none;
}

.amazon-btn-secondary:hover,
.amazon-btn-back:hover {
    background: linear-gradient(to bottom, #F7F8F8 0%, #EAEDED 100%);
    border-color: var(--amazon-navy-tertiary);
    color: var(--amazon-text-dark);
    text-decoration: none;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

/* Alert Messages */
.amazon-brand-config-content .alert {
    border-radius: 4px;
    border: none;
    padding: 12px 16px;
    margin-bottom: 20px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.amazon-brand-config-content .alert-success {
    background: #E3F2E7;
    color: var(--amazon-success);
    border-left: 4px solid var(--amazon-success);
}

.amazon-brand-config-content .alert-danger {
    background: #FFEBE5;
    color: var(--amazon-error);
    border-left: 4px solid var(--amazon-error);
}

/* Responsive */
@media (max-width: 768px) {
    .amazon-brand-config-banner {
        padding: 18px 20px;
        margin-bottom: 12px;
    }
    
    .amazon-banner-title {
        font-size: 20px;
    }
    
    .amazon-banner-subtitle {
        font-size: 12px;
    }
    
    .amazon-brand-config-content {
        padding: 16px;
    }
    
    .amazon-config-card .box-body {
        padding: 16px;
    }
    
    .amazon-nav-tabs {
        padding: 0 12px;
        overflow-x: auto;
        white-space: nowrap;
    }
    
    .amazon-nav-tabs > li > a {
        padding: 10px 16px;
        font-size: 13px;
    }
}

/* ============================================
   Product Add/Edit - Stepper & Header (match reference image)
   ============================================ */
.amazon-products-container .amazon-product-header-banner {
    background: #232f3e !important;
    border-bottom: 3px solid #FF9900 !important;
}
.amazon-products-container .amazon-product-header-title i {
    color: #FF9900 !important;
}
.amazon-products-container .product-edit-stepper {
    display: flex !important;
    padding: 16px 20px !important;
    background: #F7F8F8 !important;
    border: 1px solid #D5D9D9 !important;
    border-top: none !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}
.amazon-products-container .product-edit-stepper .step {
    padding: 10px 18px !important;
    border-radius: 6px !important;
    font-size: 14px !important;
    background: #E5E7EB !important;
    color: #374151 !important;
    border: 1px solid #D1D5DB !important;
}
.amazon-products-container .product-edit-stepper .step.active {
    background: linear-gradient(to bottom, #FF9900 0%, #E47911 100%) !important;
    color: #ffffff !important;
    border: 1px solid #E47911 !important;
    box-shadow: 0 2px 6px rgba(255, 153, 0, 0.35);
}
.amazon-products-container .product-edit-stepper .step:hover:not(.active) {
    background: #D1D5DB !important;
    border-color: #9CA3AF !important;
    color: #0F1111 !important;
}

/* ============================================
   Unified Banner Shell (Amazon style)
   ============================================ */
body .amazon-theme-banner.amazon-theme-banner,
body [class*="header-banner"][class*="header-banner"],
body .amazon-cf-banner.amazon-cf-banner,
body .amazon-tb-banner.amazon-tb-banner,
body .amazon-bs-banner.amazon-bs-banner,
body .amazon-par-banner.amazon-par-banner,
body .amazon-user-banner.amazon-user-banner,
body .amazon-barcode-banner.amazon-barcode-banner,
body .amazon-invoice-banner.amazon-invoice-banner,
body .amazon-options-banner.amazon-options-banner,
body .amazon-printer-banner.amazon-printer-banner,
body .amazon-banner.amazon-banner,
body .amazon-dropship-banner.amazon-dropship-banner,
body .amazon-kitchen-banner.amazon-kitchen-banner,
body .amazon-orders-banner.amazon-orders-banner,
body .sr-banner.sr-banner,
body .pr-create-banner.pr-create-banner,
body .add-expense-banner.add-expense-banner,
body .edit-selling-price-banner.edit-selling-price-banner,
body .stock-history-banner.stock-history-banner,
body .page-header-card.page-header-card,
body .customer-view-header.customer-view-header,
body .amazon-brand-config-banner.amazon-brand-config-banner,
body .report-amazon-page .content-header.content-header,
body .admin-amazon-page .content-header.content-header,
body .pr-create-banner,
body .stc-header-banner,
body .product-header-banner,
body .purchase-header-banner,
body .po-header-banner,
body .po-create-header-banner,
body .product-order-limit-header,
body .import-products-header-banner,
body .brand-header-banner,
body .taxonomy-header-banner,
body .page-header.page-header {
    position: relative !important;
    background: linear-gradient(135deg, var(--sv-banner-bg) 0%, var(--sv-banner-bg-2) 100%) !important;
    border-radius: var(--sv-banner-radius) !important;
    padding: var(--sv-banner-padding) !important;
    margin: 12px 12px 16px 12px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    flex-wrap: wrap !important;
    gap: var(--sv-banner-gap) !important;
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.25) !important;
    border: 1px solid rgba(255, 255, 255, 0.05) !important;
    min-height: var(--sv-banner-min-height) !important;
    box-sizing: border-box !important;
    border-top: 0 !important;
    overflow: hidden !important;
}

/* Customer View header: allow dropdown to overflow the banner */
body .customer-view-header.customer-view-header {
    overflow: visible !important;
}

/* Purchase Order create header: keep everything anchored to the left edge */
body .po-create-header-banner {
    justify-content: flex-start !important;
    text-align: left !important;
}

/* Single orange accent on bottom */
body .amazon-theme-banner.amazon-theme-banner::after,
body [class*="header-banner"][class*="header-banner"]::after,
body .amazon-cf-banner.amazon-cf-banner::after,
body .amazon-tb-banner.amazon-tb-banner::after,
body .amazon-bs-banner.amazon-bs-banner::after,
body .amazon-par-banner.amazon-par-banner::after,
body .amazon-user-banner.amazon-user-banner::after,
body .amazon-barcode-banner.amazon-barcode-banner::after,
body .amazon-invoice-banner.amazon-invoice-banner::after,
body .amazon-options-banner.amazon-options-banner::after,
body .amazon-printer-banner.amazon-printer-banner::after,
body .amazon-banner.amazon-banner::after,
body .amazon-dropship-banner.amazon-dropship-banner::after,
body .amazon-kitchen-banner.amazon-kitchen-banner::after,
body .amazon-orders-banner.amazon-orders-banner::after,
body .sr-banner.sr-banner::after,
body .pr-create-banner.pr-create-banner::after,
body .add-expense-banner.add-expense-banner::after,
body .edit-selling-price-banner.edit-selling-price-banner::after,
body .stock-history-banner.stock-history-banner::after,
body .page-header-card.page-header-card::after,
body .customer-view-header.customer-view-header::after,
body .amazon-brand-config-banner.amazon-brand-config-banner::after,
body .report-amazon-page .content-header.content-header::after,
body .admin-amazon-page .content-header.content-header::after,
body .pr-create-banner::after,
body .stc-header-banner::after,
body .product-header-banner::after,
body .purchase-header-banner::after,
body .po-header-banner::after,
body .po-create-header-banner::after,
body .product-order-limit-header::after,
body .import-products-header-banner::after,
body .brand-header-banner::after,
body .taxonomy-header-banner::after,
body .page-header.page-header::after {
    content: '';
    position: absolute;
    left: 10px;
    right: 10px;
    bottom: -1px;
    height: 4px;
    background: linear-gradient(90deg, var(--sv-banner-accent) 0%, #ffb347 100%);
    border-radius: 0 0 var(--sv-banner-radius) var(--sv-banner-radius);
    box-shadow: 0 6px 14px rgba(245, 158, 11, 0.30);
}

/* Kill any top stripes to avoid double lines */
body .amazon-theme-banner.amazon-theme-banner::before,
body [class*="header-banner"][class*="header-banner"]::before,
body .amazon-banner.amazon-banner::before,
body .amazon-product-header-banner::before,
body .product-header-banner::before,
body .purchase-header-banner::before,
body .po-header-banner::before,
body .po-create-header-banner::before,
body .pr-create-banner::before,
body .stc-header-banner::before,
body .sr-banner::before,
body .sa-header-banner::before,
body .pr-header-banner::before,
body .sell-header-banner::before {
    content: none !important;
    height: 0 !important;
    border: 0 !important;
    background: none !important;
    box-shadow: none !important;
}

body .amazon-theme-banner.amazon-theme-banner .banner-content,
body [class*="header-banner"][class*="header-banner"] .banner-content,
body [class*="header-banner"][class*="header-banner"] .banner-inner,
body .amazon-theme-banner.amazon-theme-banner .banner-inner,
body .pr-create-banner .banner-content,
body .stc-header-banner .banner-content,
body .product-header-banner .product-header-content,
body .purchase-header-banner .banner-content,
body .po-header-banner .banner-content,
body .product-order-limit-header .banner-content,
body .import-products-header-banner .banner-content,
body .brand-header-banner .banner-content,
body .taxonomy-header-banner .banner-content,
body .page-header.page-header .page-header-left {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1;
}

/* Purchase Order create header: keep title hard-left, buttons hard-right in a single row */
body .po-create-header-banner .banner-content {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    flex: 0 0 100%;
    margin: 0;
}

/* Ensure Add Purchase Order title aligns to left inside banner */
body .po-create-header-banner .banner-title {
    justify-content: flex-start;
}

body .po-create-header-banner .banner-actions {
    margin-left: auto;
    display: inline-flex;
    gap: 8px;
}

body .amazon-theme-banner.amazon-theme-banner h1,
body .amazon-theme-banner.amazon-theme-banner .banner-title,
body [class*="header-banner"][class*="header-banner"] h1,
body [class*="header-banner"][class*="header-banner"] .banner-title,
body .pr-create-banner .banner-title,
body .stc-header-banner .banner-title,
body .product-header-banner h1,
body .purchase-header-banner .banner-title,
body .po-header-banner .banner-title,
body .page-header.page-header h1,
body .amazon-banner-title {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 24px;
    font-weight: 700;
    margin: 0;
    color: #ffffff !important;
}

body .amazon-theme-banner.amazon-theme-banner h1 i,
body .amazon-theme-banner.amazon-theme-banner .banner-title i,
body [class*="header-banner"][class*="header-banner"] h1 i,
body [class*="header-banner"][class*="header-banner"] .banner-title i,
body .amazon-banner-title i {
    color: #ffffff !important;
}

body .amazon-theme-banner.amazon-theme-banner .banner-subtitle,
body [class*="header-banner"][class*="header-banner"] .banner-subtitle,
body .pr-create-banner .banner-subtitle,
body .stc-header-banner .banner-subtitle,
body .product-header-banner .product-header-subtitle,
body .purchase-header-banner .banner-subtitle,
body .po-header-banner .banner-subtitle,
body .product-order-limit-header .banner-subtitle,
body .import-products-header-banner .banner-subtitle,
body .brand-header-banner .banner-subtitle,
body .taxonomy-header-banner .banner-subtitle,
body .page-header.page-header .page-subtitle,
body .amazon-banner-subtitle {
    font-size: 14px;
    color: rgba(249, 250, 251, 0.86) !important;
    margin: 6px 0 0 0;
}

/* Utility: apply banner shell explicitly */
.sv-banner-shell {
    position: relative !important;
    background: linear-gradient(135deg, var(--sv-banner-bg) 0%, var(--sv-banner-bg-2) 100%) !important;
    border-radius: var(--sv-banner-radius) !important;
    padding: var(--sv-banner-padding) !important;
    margin: 8px 10px 12px 10px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    flex-wrap: wrap !important;
    gap: var(--sv-banner-gap) !important;
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.25) !important;
    border: 1px solid rgba(255, 255, 255, 0.05) !important;
    min-height: var(--sv-banner-min-height) !important;
    box-sizing: border-box !important;
}
.sv-banner-shell::after {
    content: '';
    position: absolute;
    left: 10px;
    right: 10px;
    bottom: -1px;
    height: 4px;
    background: linear-gradient(90deg, var(--sv-banner-accent) 0%, #ffb347 100%);
    border-radius: 0 0 var(--sv-banner-radius) var(--sv-banner-radius);
    box-shadow: 0 6px 14px rgba(245, 158, 11, 0.30);
}
.sv-banner-shell::before {
    content: none !important;
    height: 0 !important;
    border: 0 !important;
    background: none !important;
    box-shadow: none !important;
}
.sv-banner-shell .banner-flex,
.sv-banner-shell .page-header-left,
.sv-banner-shell .banner-content {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1;
}
.sv-banner-shell h1,
.sv-banner-shell .banner-title {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 24px;
    font-weight: 700;
    margin: 0;
    color: #ffffff !important;
    line-height: 1.2;
}
.sv-banner-shell h1 i,
.sv-banner-shell .banner-title i {
    color: #ffffff !important;
}
.sv-banner-shell .banner-subtitle,
.sv-banner-shell .page-subtitle {
    font-size: 14px;
    color: rgba(249, 250, 251, 0.86) !important;
    margin: 6px 0 0 0;
    line-height: 1.4;
}

/* Align top banners that are direct children of the scrollable container */
#scrollable-container > .content-header,
#scrollable-container > section.content-header {
    margin-top: 16px !important;
}

/* Inset headers from edges */
.content-header,
section.content-header,
.page-header-wrapper,
.sc-page-header {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    padding: 0 12px !important;
    margin: 0 0 12px 0 !important;
}

/* Add horizontal breathing room so banners don't touch edges */
.content-header,
section.content-header,
.page-header-wrapper,
.sc-page-header {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    padding: 0 12px !important;
    margin: 0 0 12px 0 !important;
}

/* Unify card/table headers with banner color */
.admin-amazon-page .box > .box-header,
.admin-amazon-page .box-primary > .box-header,
.report-amazon-page .box > .box-header,
.report-amazon-page .box-primary > .box-header,
.amazon-card .box-header {
    background: var(--amazon-navy-secondary) !important;
    border-color: var(--amazon-navy-secondary) !important;
    color: #ffffff !important;
    box-shadow: 0 3px 8px rgba(55, 71, 90, 0.35);
}
.admin-amazon-page .box > .box-header .box-title,
.admin-amazon-page .box-primary > .box-header .box-title,
.report-amazon-page .box > .box-header .box-title,
.report-amazon-page .box-primary > .box-header .box-title,
.amazon-card .box-header .box-title {
    color: #ffffff !important;
}

/* Force tables to stay white across the app */
.admin-amazon-page .table,
.admin-amazon-page table,
.report-amazon-page .table,
.report-amazon-page table,
.amazon-card .table,
.amazon-card table {
    background: #ffffff !important;
}
.admin-amazon-page .table thead th,
.admin-amazon-page table thead th,
.report-amazon-page .table thead th,
.report-amazon-page table thead th,
.amazon-card .table thead th,
.amazon-card table thead th {
    background: #ffffff !important;
    color: #0f1111 !important;
    border-color: #d5d9d9 !important;
}
.admin-amazon-page .table tbody tr:nth-child(even) td,
.report-amazon-page .table tbody tr:nth-child(even) td,
.amazon-card .table tbody tr:nth-child(even) td {
    background: #fff !important;
}
.admin-amazon-page .table tbody tr:hover td,
.report-amazon-page .table tbody tr:hover td,
.amazon-card .table tbody tr:hover td {
    background: #f8f8f8 !important;
}

/* ============================================
   Global table header – white background, black text
   ============================================ */
body .dataTables_scrollHeadInner {
    position: relative !important;
    top: 8px !important;
}


body table thead th,
body .table thead th,
body .dataTable thead th,
body .dataTables_scrollHeadInner table thead th {
    background: #ffffff !important;
    color: #0f1111 !important;
    border-color: #d5d9d9 !important;
    font-weight: 600 !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    opacity: 1 !important;
}

/* Force DataTables header text color when DT injects styles */
table.dataTable thead > tr > th,
.dataTables_scrollHeadInner table thead > tr > th {
    color: #0f1111 !important;
    background: #ffffff !important;
}

/* DataTables scrolling/duplicate header rows */
.dataTables_scrollHead,
.dataTables_scrollHeadInner {
    color: #0f1111 !important;
}

/* Ensure sort icons do not override text color */
table.dataTable thead th.sorting,
table.dataTable thead th.sorting_asc,
table.dataTable thead th.sorting_desc {
    color: #0f1111 !important;
}

/* Force header text and inner spans to stay black */
body table.dataTable thead th,
body table.dataTable thead th * ,
body .dataTables_scrollHeadInner table thead th,
body .dataTables_scrollHeadInner table thead th * {
    color: #0f1111 !important;
    opacity: 1 !important;
}

/* Last-resort override for any inline/injected styles */
body table thead,
body .table thead,
body .dataTable thead,
body .dataTables_scrollHeadInner thead {
    color: #0f1111 !important;
}

/* Nuclear option: every element inside table headers */
body table thead *,
body .table thead *,
body table.dataTable thead *,
body .dataTables_scrollHeadInner table thead * {
    color: #0f1111 !important;
    opacity: 1 !important;
}
body table thead tr,
body .table thead tr {
    background: #ffffff !important;
}

/* Force table header column names visible (black text on white) */
body table thead th,
body .table thead th,
body .dataTable thead th,
body .dataTables_scrollHead thead th,
body .dataTables_scrollHeadInner table thead th,
body table.dataTable thead th {
    color: #000000 !important;
}
body table thead tr th,
body .table thead tr th {
    color: #000000 !important;
}

/* ============================================
   Unified Banner Shell (applied by class list)
   ============================================ */

/* Core shell */
.sv-banner-shell {
    position: relative !important;
    background: linear-gradient(135deg, var(--sv-banner-bg) 0%, var(--sv-banner-bg-2) 100%) !important;
    border-radius: var(--sv-banner-radius) !important;
    padding: var(--sv-banner-padding) !important;
    margin: 12px 12px 16px 12px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    flex-wrap: wrap !important;
    gap: var(--sv-banner-gap) !important;
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.25) !important;
    border: 1px solid rgba(255, 255, 255, 0.05) !important;
    min-height: var(--sv-banner-min-height) !important;
    box-sizing: border-box !important;
}

.sv-banner-shell::after {
    content: '';
    position: absolute;
    left: 10px;
    right: 10px;
    bottom: -1px;
    height: 4px;
    background: linear-gradient(90deg, var(--sv-banner-accent) 0%, #ffb347 100%);
    border-radius: 0 0 var(--sv-banner-radius) var(--sv-banner-radius);
    box-shadow: 0 6px 14px rgba(245, 158, 11, 0.30);
}

.sv-banner-shell::before {
    content: none !important;
    height: 0 !important;
    border: 0 !important;
    background: none !important;
    box-shadow: none !important;
}

.sv-banner-shell .banner-content,
.sv-banner-shell .banner-inner,
.sv-banner-shell .product-header-content,
.sv-banner-shell .page-header-left {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1;
}

.sv-banner-shell h1,
.sv-banner-shell .banner-title {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 22px;
    font-weight: 700;
    margin: 0;
    color: #ffffff !important;
}

.sv-banner-shell h1 i,
.sv-banner-shell .banner-title i {
    color: #ffffff !important;
}

.sv-banner-shell .banner-subtitle,
.sv-banner-shell .page-subtitle {
    font-size: 13px;
    color: rgba(249, 250, 251, 0.86) !important;
    margin: 4px 0 0 0;
}

/* Apply shell to all banner classes */
body .amazon-theme-banner.amazon-theme-banner,
body [class*="header-banner"][class*="header-banner"],
body .product-header-banner,
body .purchase-header-banner,
body .po-header-banner,
body .product-order-limit-header,
body .import-products-header-banner,
body .brand-header-banner,
body .taxonomy-header-banner,
body .adv-header-banner,
body .dv-header-banner,
body .pr-create-banner,
body .stc-header-banner,
body .sr-banner.sr-banner,
body .sa-header-banner,
body .sell-header-banner,
body .page-header.page-header {
    position: relative !important;
    background: linear-gradient(135deg, var(--sv-banner-bg) 0%, var(--sv-banner-bg-2) 100%) !important;
    border-radius: var(--sv-banner-radius) !important;
    padding: var(--sv-banner-padding) !important;
    margin: 12px 12px 16px 12px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    flex-wrap: wrap !important;
    gap: var(--sv-banner-gap) !important;
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.25) !important;
    border: 1px solid rgba(255, 255, 255, 0.05) !important;
    min-height: var(--sv-banner-min-height) !important;
    box-sizing: border-box !important;
}