/**
 * Custom styling for Inventory Grid
 * Color scheme: Professional teal/cyan with green accents
 */

/* Grid container styling */
.inventory-grid-colored {
    border: 1px solid #b0d4e3;
}

/* Grid header styling - Light cyan/teal background */
.inventory-grid-colored .x-grid-header-ct {
    background-color: #b0d4e3 !important;
    background-image: none !important;
    border-bottom: 2px solid #4682a9;
}

.inventory-grid-colored .x-column-header {
    background-color: #b0d4e3 !important;
    background-image: none !important;
    color: #1a3a4a !important;
    font-weight: 600;
    border-color: #4682a9;
    overflow: hidden;
    white-space: nowrap;
}

.inventory-grid-colored .x-column-header-inner {
    padding: 4px 6px;
}

/* Alternating row colors - light blue tints */
.inventory-grid-colored .x-grid-row {
    background-color: #f0f8ff;
    border-bottom: 1px solid #d6e8f5;
}

.inventory-grid-colored .x-grid-row:nth-child(odd) {
    background-color: #e6f2ff;
}

.inventory-grid-colored .x-grid-row-over {
    background-color: #cce5ff !important;
}

.inventory-grid-colored .x-grid-row-selected {
    background-color: #7ba7d4 !important;
    color: white !important;
}

/* Cell styling */
.inventory-grid-colored .x-grid-cell {
    border-right-color: #d6e8f5;
    border-bottom-color: #d6e8f5;
    padding: 4px 6px;
}

/* Green accent columns for frequency and route data */
.inventory-grid-colored .x-grid-cell-inner.frequency_abbrev-cell,
.inventory-grid-colored .x-grid-cell-inner.frequency_description-cell,
.inventory-grid-colored .x-grid-cell-inner.route_abbrev-cell,
.inventory-grid-colored .x-grid-cell-inner.route_description-cell {
    background-color: #7fb069 !important;
    color: white !important;
    font-weight: 500;
    padding: 4px 6px;
}

/* ────────────────────────────────────────── */
/* COLUMN-SPECIFIC COLOR STYLING             */
/* Using nth-child selectors for reliability */
/* ────────────────────────────────────────── */

/* Column 1: Partcode - Default */
.inventory-grid-colored .x-grid-view > .x-grid-item-container .x-grid-row .x-grid-cell:nth-child(1) .x-grid-cell-inner {
    background-color: inherit;
}

/* Column 2: Item Description - Light Blue */
.inventory-grid-colored .x-grid-view > .x-grid-item-container .x-grid-row .x-grid-cell:nth-child(2) .x-grid-cell-inner {
    background-color: #a8d8ea !important;
    color: #1a3a4a !important;
}

/* Darken text for Item Description for improved contrast */
.inventory-grid-colored .x-grid-view > .x-grid-item-container .x-grid-row .x-grid-cell:nth-child(2) .x-grid-cell-text,
.inventory-grid-colored .x-grid-view > .x-grid-item-container .x-grid-row .x-grid-cell:nth-child(2) .x-grid-cell-inner {
    color: #072f3f !important;
    font-weight: 600 !important;
}
/* Column 3: Item Full Description - Purple */
.inventory-grid-colored .x-grid-view > .x-grid-item-container .x-grid-row .x-grid-cell:nth-child(3) .x-grid-cell-inner {
    background-color: #c8a2d0 !important;
    color: white !important;
}

/* Column 4: Unit Measure - Light Green */
.inventory-grid-colored .x-grid-view > .x-grid-item-container .x-grid-row .x-grid-cell:nth-child(4) .x-grid-cell-inner {
    background-color: #b8d9a8 !important;
    color: #1a3a4a !important;
    font-weight: 500;
}

/* Column 5: Unit Price - Light Yellow */
.inventory-grid-colored .x-grid-view > .x-grid-item-container .x-grid-row .x-grid-cell:nth-child(5) .x-grid-cell-inner {
    background-color: #f4e4b6 !important;
    color: #1a3a4a !important;
}

/* Column 6: Unit Price 1 - Light Yellow */
.inventory-grid-colored .x-grid-view > .x-grid-item-container .x-grid-row .x-grid-cell:nth-child(6) .x-grid-cell-inner {
    background-color: #f4e4b6 !important;
    color: #1a3a4a !important;
}

/* Column 7: Selling Price - Peach */
.inventory-grid-colored .x-grid-view > .x-grid-item-container .x-grid-row .x-grid-cell:nth-child(7) .x-grid-cell-inner {
    background-color: #ffb366 !important;
    color: white !important;
    font-weight: 500;
}

/* Column 8: Buying Price - Light Orange */
.inventory-grid-colored .x-grid-view > .x-grid-item-container .x-grid-row .x-grid-cell:nth-child(8) .x-grid-cell-inner {
    background-color: #ffc896 !important;
    color: #1a3a4a !important;
}

/* Column 9: Purchasing Class - Teal */
.inventory-grid-colored .x-grid-view > .x-grid-item-container .x-grid-row .x-grid-cell:nth-child(9) .x-grid-cell-inner {
    background-color: #1fa0a0 !important;
    color: white !important;
    font-weight: 600;
}

/* Column 10: Category - Lime Yellow */
.inventory-grid-colored .x-grid-view > .x-grid-item-container .x-grid-row .x-grid-cell:nth-child(10) .x-grid-cell-inner {
    background-color: #c4d946 !important;
    color: #1a3a4a !important;
    font-weight: 600;
}

/* Column 11-25+: Mixed colors for remaining columns */
.inventory-grid-colored .x-grid-view > .x-grid-item-container .x-grid-row .x-grid-cell:nth-child(11) .x-grid-cell-inner {
    background-color: #d4a8a8 !important;
    color: white !important;
}

.inventory-grid-colored .x-grid-view > .x-grid-item-container .x-grid-row .x-grid-cell:nth-child(15) .x-grid-cell-inner,
.inventory-grid-colored .x-grid-view > .x-grid-item-container .x-grid-row .x-grid-cell:nth-child(16) .x-grid-cell-inner {
    background-color: #b8b8b8 !important;
    color: white !important;
}

/* Frequency/Route columns - Green shades */
.inventory-grid-colored .x-grid-view > .x-grid-item-container .x-grid-row .x-grid-cell:nth-child(27) .x-grid-cell-inner {
    background-color: #6ab14f !important;
    color: white !important;
    font-weight: 600;
}

.inventory-grid-colored .x-grid-view > .x-grid-item-container .x-grid-row .x-grid-cell:nth-child(28) .x-grid-cell-inner {
    background-color: #6ab14f !important;
    color: white !important;
    font-weight: 500;
}

.inventory-grid-colored .x-grid-view > .x-grid-item-container .x-grid-row .x-grid-cell:nth-child(29) .x-grid-cell-inner {
    background-color: #4a7c3c !important;
    color: white !important;
    font-weight: 600;
}

.inventory-grid-colored .x-grid-view > .x-grid-item-container .x-grid-row .x-grid-cell:nth-child(30) .x-grid-cell-inner {
    background-color: #4a7c3c !important;
    color: white !important;
    font-weight: 500;
}

/* Min Dosage column - Peach */
.inventory-grid-colored .x-grid-view > .x-grid-item-container .x-grid-row .x-grid-cell:nth-child(31) .x-grid-cell-inner {
    background-color: #ffb366 !important;
    color: white !important;
    font-weight: 500;
}



/* Data cell content */
.inventory-grid-colored .x-grid-cell-text {
    color: #1a3a4a;
    font-size: 11px;
}

/* Selected row text */
.inventory-grid-colored .x-grid-row-selected .x-grid-cell-text {
    color: white;
}

/* Footer/status bar styling */
.inventory-grid-colored .x-grid-footer {
    background-color: #e6f2ff;
    border-top: 1px solid #b0d4e3;
}

/* Paging toolbar styling */
.inventory-grid-colored .x-paging-toolbar {
    background-color: #e6f2ff;
    border-top: 1px solid #b0d4e3;
}

/* Column separator lines */
.inventory-grid-colored .x-grid-column-lines .x-grid-cell {
    border-right-color: #a8cce5;
}

/* Locked/frozen columns support */
.inventory-grid-colored .x-grid-locked {
    border-right: 2px solid #4682a9;
}

/* Group header styling (if grouping is used) */
.inventory-grid-colored .x-grid-group-hd {
    background: linear-gradient(to right, #8aacc8 0%, #b0d4e3 100%);
    color: white;
    font-weight: bold;
}

/* ══════════════════════════════════════════════════════════════════════════
   BANK TRANSACTIONS — Light tab bar override
   The dark theme overrides inline styles; these CSS rules take precedence.
   ══════════════════════════════════════════════════════════════════════════ */

/* Tab bar container background */
#bankTransactions .x-tab-bar,
#bankTransactions .x-tab-bar-body {
    background-color: #f0f4f8 !important;
    background-image: none !important;
    border-bottom: 2px solid #1976d2 !important;
}

/* Every tab — inactive state */
#bankTransactions .x-tab {
    background-color: #dce8f5 !important;
    background-image: none !important;
    border-radius: 4px 4px 0 0 !important;
    border: 1px solid #90b4d8 !important;
    border-bottom-color: #1976d2 !important;
    margin: 4px 2px 0 !important;
    opacity: 1 !important;
}

/* Tab text — inactive */
#bankTransactions .x-tab .x-tab-inner,
#bankTransactions .x-tab .x-tab-button,
#bankTransactions .x-tab .x-btn-inner {
    color: #1a3a6a !important;
    font-weight: 600 !important;
    font-size: 12px !important;
}

/* Tab icon — inactive */
#bankTransactions .x-tab .x-tab-icon-el,
#bankTransactions .x-tab .x-btn-icon-el {
    color: #1a3a6a !important;
}

/* Active / selected tab */
#bankTransactions .x-tab.x-tab-active,
#bankTransactions .x-tab-active {
    background-color: #1976d2 !important;
    background-image: none !important;
    border-color: #1565c0 !important;
    border-bottom-color: #1976d2 !important;
}

/* Active tab text */
#bankTransactions .x-tab.x-tab-active .x-tab-inner,
#bankTransactions .x-tab-active .x-tab-inner,
#bankTransactions .x-tab.x-tab-active .x-tab-button,
#bankTransactions .x-tab-active .x-btn-inner {
    color: #ffffff !important;
    font-weight: bold !important;
}

/* Active tab icon */
#bankTransactions .x-tab.x-tab-active .x-tab-icon-el,
#bankTransactions .x-tab-active .x-btn-icon-el {
    color: #ffffff !important;
}

/* Hover state on inactive tabs */
#bankTransactions .x-tab:hover:not(.x-tab-active) {
    background-color: #bbcfe8 !important;
    background-image: none !important;
}

/* Print-friendly styling */
@media print {
    .inventory-grid-colored .x-grid-header-ct {
        background-color: #b0d4e3;
    }
    .inventory-grid-colored .x-grid-row:nth-child(odd) {
        background-color: #e6f2ff;
    }
    .inventory-grid-colored .x-grid-row:nth-child(even) {
        background-color: #f0f8ff;
    }
}