/* 
 * EWROX.CSS 
 * Custom ERP Component Suite for High-Density Data Management
 */

/* --- 1. CORE GRID WRAPPER (Shell) --- */
.grid-wrapper {
    display: flex;
    flex-direction: column;
    height: 100%;
    width: 100%;
    background-color: var(--vs-bg-main);
    border: 1px solid var(--vs-border-main);
    font-family: "Segoe UI Variable", "Segoe UI", Tahoma, sans-serif;
    overflow: hidden; /* Prevents outer scrollbars from appearing */
    box-sizing: border-box;
}

/* Scrollable Container - The heart of the scrolling logic */
.table-scroll {
    flex: 1 1 auto; /* Takes all available space between header and footer */
    overflow: auto; /* Enables both X and Y axis scrolling */
    position: relative;
    background-color: var(--vs-bg-main);
    min-height: 0; /* Critical for flexbox scroll containers */
}

/* --- 2. ERP HIGH-DENSITY TABLE --- */
.erp-table {
    width: 100%;
    min-width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 11.5px;
    /* CRITICAL: This makes the <col width> attributes and percentages work */
    table-layout: fixed !important;
}

    /* Sticky Headers */
    .erp-table thead th {
        position: sticky;
        top: 0;
        z-index: 20; /* Stays above data and background */
        background-color: var(--vs-bg-sidebar);
        color: var(--vs-text-muted);
        font-weight: 700;
        text-transform: uppercase;
        padding: 8px 10px;
        border-bottom: 2px solid var(--vs-border-main);
        border-right: 1px solid var(--vs-border-light);
        white-space: nowrap;
        cursor: pointer;
        user-select: none;
        transition: background-color 0.1s;
    }

        .erp-table thead th:hover {
            background-color: var(--vs-bg-hover);
            color: var(--vs-text-bright);
        }

    /* Universal Cell Truncation: Prevents text from breaking column widths */
    .erp-table thead th,
    .erp-table tbody td {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

/* Sorting Indicators */
.sort-icon {
    margin-left: 5px;
    font-size: 9px;
    opacity: 0.3;
}

    .sort-icon.active {
        opacity: 1;
        color: var(--vs-accent);
    }

/* Table Cells */
.erp-table tbody td {
    padding: 6px 10px;
    border-bottom: 1px solid var(--vs-border-light);
    border-right: 1px solid var(--vs-border-light);
    color: var(--vs-text-default);
}

.cell-content {
    display: block;
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.erp-table tbody tr {
    background-color: var(--vs-bg-main);
}

    .erp-table tbody tr:nth-child(even) {
        background-color: rgba(0, 0, 0, 0.015);
    }

    .erp-table tbody tr:hover {
        background-color: var(--vs-bg-hover) !important;
        cursor: pointer;
    }

    .erp-table tbody tr.selected {
        background-color: var(--vs-bg-selected) !important;
        color: var(--vs-text-bright);
        font-weight: 500;
    }

/* --- 3. PAGE NAVIGATOR (Footer) --- */
.grid-footer {
    flex: 0 0 34px; /* Fixed height at bottom - will not shrink */
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 12px;
    background-color: var(--vs-bg-sidebar);
    border-top: 1px solid var(--vs-border-main);
    font-size: 11px;
    color: var(--vs-text-muted);
    z-index: 30; /* Stays above scrollable data */
}

.pager-controls {
    display: flex;
    align-items: center;
    gap: 4px;
}

.pager-label {
    min-width: 90px;
    text-align: center;
    color: var(--vs-text-default);
}

.page-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 24px;
    border: 1px solid var(--vs-border-main);
    background: var(--vs-bg-input);
    color: var(--vs-text-default);
    cursor: pointer;
    border-radius: 2px;
    padding: 0;
}

    .page-btn:hover:not(:disabled) {
        border-color: var(--vs-accent);
        color: var(--vs-accent);
    }

    .page-btn:disabled {
        opacity: 0.3;
        cursor: not-allowed;
    }

/* --- 4. FILTER TOOLBAR & CONTROLS --- */
.lookup-filter-bar {
    flex: 0 0 auto; /* Toolbar stays at the top */
    min-height: 40px;
    background-color: var(--vs-bg-header);
    border-bottom: 1px solid var(--vs-border-main);
}

    /* Requirement: 3px right margin for all controls */
    .lookup-filter-bar .tsf-quick-filter-select,
    .lookup-filter-bar .form-control,
    .lookup-filter-bar .vs-action-btn,
    .lookup-filter-bar .filter-badge-container > div {
        margin-right: 3px !important;
    }

.tsf-quick-filter-select {
    height: 29px;
    font-size: 12px;
    padding: 0 4px;
    border: 1px solid var(--vs-border-main);
    background-color: var(--vs-bg-input);
    color: var(--vs-text-default);
    border-radius: 4px;
    outline: none;
}

    .tsf-quick-filter-select:focus {
        border-color: var(--vs-accent);
    }

/* Badges for active filters */
.filter-badge-container {
    display: flex;
    align-items: center;
    gap: 4px;
    overflow-x: auto;
}

.filter-badge {
    display: inline-flex;
    align-items: center;
    background: var(--vs-accent);
    color: white;
    padding: 2px 10px;
    border-radius: 12px;
    font-size: 10px;
    white-space: nowrap;
}

    .filter-badge i {
        cursor: pointer;
        margin-left: 8px;
    }

/* --- 5. ADVANCED FILTER (Combobox Style) --- */
.tsf-dropdown-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: transparent;
    z-index: 1000;
}

.advanced-filter-dropdown {
    position: absolute;
    top: 100%; /* Sits exactly under the toolbar */
    right: 0;
    width: 550px;
    background: var(--vs-bg-main);
    border: 1px solid var(--vs-border-main);
    box-shadow: 0 8px 30px rgba(0,0,0,0.2);
    z-index: 1001;
    border-radius: 0 0 4px 4px;
    margin-top: 1px;
}

.filter-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    border-bottom: 1px solid var(--vs-border-light);
}

    .filter-row:last-child {
        border-bottom: none;
    }

.filter-label {
    width: 140px;
    font-size: 11px;
    font-weight: 600;
    color: var(--vs-text-muted);
    text-align: right;
}

/* --- 6. RESPONSIVE LOGIC --- */
@media (max-width: 768px) {
    .desktop-filter {
        display: none !important;
    }

    .mobile-filter {
        display: flex !important;
    }

    .advanced-filter-dropdown {
        width: 100vw;
        right: -2px;
        border-radius: 0;
    }
}

@media (min-width: 769px) {
    .mobile-filter {
        display: none !important;
    }
}

/* --- 7. CODE EDITOR INTEGRATION --- */
.tsf-code-editor-container {
    background-color: var(--vs-bg-input);
    overflow: hidden;
}

    .tsf-code-editor-container .monaco-editor-container {
        height: 100% !important;
        width: 100% !important;
    }

.monaco-editor,
.monaco-editor .margin,
.monaco-editor-background {
    background-color: transparent !important;
}

.win-div-header {
    height: 32px;
    background-color: var(--vs-bg-header);
    border-bottom: 1px solid var(--vs-border-main);
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important; /* Forces the split */
    padding: 0 8px !important;
}

.win-div-header-left {
    display: flex;
    align-items: center;
}

.win-div-header-right {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-left: auto; /* Safety push to right */
}

/* Style buttons to look like NavLinks */
.win-div-link-btn {
    background: none;
    border: none;
    padding: 0;
    margin: 0;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--vs-text-info);
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 4px;
}

    .win-div-link-btn:hover:not(.disabled) {
        color: var(--vs-accent);
        text-decoration: underline;
    }

    .win-div-link-btn.disabled {
        opacity: 0.4;
        cursor: default;
    }