/* Custom Excel Styling targeted for Buefy Table Wrappers */

/* 1. Target the Buefy specific container structure */
div.b-table.is-excel .table-wrapper {
    overflow-x: auto;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    border: 1px solid #d1d1d1;
    background-color: #ffffff;
}

/* 2. Style the internal table element within the Buefy wrapper */
div.b-table.is-excel .table-wrapper > table {
    width: 100%;
    margin-bottom: 0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    font-size: 13px; /* Standard spreadsheet font size */
    color: #333333;
    border-collapse: collapse !important; /* Forces continuous grid lines across cells */
}

/* 3. Strict gridlines for cells and headers */
div.b-table.is-excel .table-wrapper > table th,
div.b-table.is-excel .table-wrapper > table td {
    border: 1px solid #d1d1d1 !important; /* Excel grey grid lines */
    padding: 4px 8px !important;           /* Compact, data-dense padding */
    vertical-align: middle;
    height: 24px;                         /* Uniform row height */
}

/* 4. Excel-like Header (Muted gray background with bold text) */
div.b-table.is-excel .table-wrapper > table thead th {
    background-color: #f3f3f3 !important; /* Traditional Excel header gray */
    color: #444444 !important;
    font-weight: 600;
    text-align: left;
    position: relative;
    box-shadow: inset 0 -1px 0 #b1b1b1;  /* Emphasized bottom header border */
}

/* Optional: If you want the modern Excel "Green" accent for the top header */
div.b-table.is-excel .table-wrapper > table.is-excel-green thead th {
    background-color: #107c41 !important; /* Excel Green */
    color: #ffffff !important;
    border: 1px solid #0e6c38 !important;
}

/* 5. Alternating Row Colors (Zebra Striping) */
div.b-table.is-excel .table-wrapper > table tbody tr:nth-child(even) {
    background-color: #f9fbf9 !important; /* Subtle tint for readability */
}
div.b-table.is-excel .table-wrapper > table tbody tr:nth-child(odd) {
    background-color: #ffffff !important;
}

/* 6. High-contrast Active/Hover Row State */
div.b-table.is-excel .table-wrapper > table tbody tr:hover {
    background-color: #edd8fc !important; /* Distinct highlighted row color */
    cursor: cell;                          /* Excel spreadsheet crosshair cursor */
}

/* 7. Text alignments to match financial spreadsheet conventions */
div.b-table.is-excel .table-wrapper > table .has-text-right {
    text-align: right !important; /* Numbers, decimals, currency */
}

div.b-table.is-excel .table-wrapper > table .has-text-centered {
    text-align: center !important; /* Statuses, checkmarks, codes */
}

/* 8. Inline input/edit styling for spreadsheet look within Buefy cells */
div.b-table.is-excel .table-wrapper > table td input.input {
    border: none;
    border-radius: 0;
    box-shadow: none;
    padding: 0 4px;
    height: 100%;
    background: transparent;
}

div.b-table.is-excel .table-wrapper > table td input.input:focus {
    outline: 2px solid #107c41; /* Green border when active/editing cell */
    background-color: #ffffff;
}