@import "variables.css";

/* Begin: New editable grid! */

.datagrid {
    width: 100%;
    background: var(--soft-white);
    color: var(--ink);
    border: none;
    margin-left: auto;
    margin-right: auto;
    line-height: 30px;
    overflow-x: auto;
    table-layout: fixed;
}

.rounded_corners {
    border-radius: 20px;
    overflow: hidden;
}

    .rounded_corners td, .rounded_corners th {
        text-align: center;
    }

    .rounded_corners table table td {
        border-style: hidden;
    }

table {
    border-radius: 20px;
}

.datagrid td, .datagrid th {
    border: 1px solid var(--white);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    padding-left: 8px;
    padding-right: 8px
}

.headerStyle {
    text-align: center;
    background-color: var(--marine);
    color: var(--soft-white);
    border: 1px solid var(--soft-white);
    font-weight: bold;
    white-space: nowrap;
}

    .headerStyle th,
    .datagrid thead th {
        padding-top: 10px;
        padding-bottom: 35px;
        padding-left: 6px;
        padding-right: 12px;
        line-height: .8;
    }

    .headerStyle .grid-filter-overlay .standardTextBox {
        width: 100%;
        min-width: 0
    }

    .headerStyle th:first-child {
        border-top-left-radius: 20px;
    }

    .headerStyle th:last-child {
        border-top-right-radius: 20px;
    }

.rowStyle {
    line-height: 28px;
    white-space: nowrap;
    overflow: hidden;
    background: var(--soft-white);
    color: var(--ink);
    border: 1px solid var(--soft-white);
}

    .rowStyle td {
        padding: 4px 8px;
        border-top: 1px solid var(--white);
    }

.datagrid a,
#gridview a:link {
    color: var(--soft-white);
    text-decoration: underline;
    margin: 10px;
    font-weight: normal;
}

    .datagrid a:hover,
    #gridview a:hover {
        font-weight: bold;
        text-decoration: none;
    }
/* ----- Footer (Add row) ----- */
.footerStyle {
    background: var(--soft-white);
    padding: 10px 12px;
    border: 1px solid var(--marine);
}

    .footerStyle input[type="text"],
    .footerStyle input[type="date"],
    .footerStyle .standardTextBox {
        background: var(--soft-white);
        color: var(--ink) !important;
        border-radius: 12px;
        border: 1px solid var(--marine);
        padding: 6px 8px;
        width: 100%;
        box-sizing: border-box;
        min-width: 0;
        margin: 0;
    }

    .footerStyle a {
        margin: 0 3px;
    }
/* Centered/right columns helpers if you use them in BoundColumns */
.centerBoundColumn {
    text-align: center;
}

.rightBoundColumn {
    text-align: right;
}

.rowStyle:hover td, .footerStyle:hover td {
    background: var(--seastone) !important;
    transition: background 0.2s ease-in-out;
    color: var(--soft-white);
}
/* Make header stick on long lists (optional) */
@supports(position:sticky) {
    .datagrid thead th {
        position: sticky;
        top: 0;
    }
}

.datagrid th, .datagrid td {
    overflow: hidden
}

.resizable th {
    position: relative
}

.resize-handle {
    position: absolute;
    right: 0;
    top: 0;
    width: 8px;
    height: 100%;
    cursor: col-resize;
    user-select: none
}

.draggable-headers th {
    cursor: move
}

.sortable-headers th {
    cursor: pointer;
    position: relative;
    white-space: nowrap
}

.sort-arrows {
    display: inline-flex;
    gap: 4px;
    margin-left: 6px;
    font-size: .8em
}

    .sort-arrows .up, .sort-arrows .down {
        opacity: .35
    }

    .sort-arrows .active {
        opacity: 1
    }

.headerStyle {
    position: relative
}

    .headerStyle th {
        padding-bottom: 34px
    }

.grid-filter-overlay {
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    text-align: center;
    pointer-events: none;
    z-index: 1
}

    .grid-filter-overlay .standardTextBox {
        width: 40%;
        min-width: 080px;
        max-width: 300px;
        height: 20px;
        pointer-events: auto !important;
        font-size: 0.85em
    }

    .grid-filter-overlay .standardTextBox,
    .headerStyle .grid-filter-overlay .standardTextBox {
        border: 2px solid var(--marine) !important;
    }

.grid-pager {
    color: var(--marine);
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 6px;
    margin-top: 6px;
    margin-bottom: 20px;
    font-size: 0.9em;
}

    .grid-pager button {
        background: var(--soft-white);
        border: 1px solid #ccc;
        color: var(--marine);
        border-radius: 50%;
        width: 28px;
        height: 28px;
        cursor: pointer;
        font-weight: bold;
        transition: all 0.2s ease-in-out;
    }

        .grid-pager button.active {
            background: var(--marine);
            border-color: var(--marine);
            color: var(--soft-white);
        }

        .grid-pager button:hover:not(:disabled) {
            background: var(--seastone);
            border-color: var(--seastone);
            color: var(--soft-white);
        }

        .grid-pager button:disabled {
            background: var(--white);
            border: 1px solid #ccc;
            border-radius: 50%;
            width: 28px;
            height: 28px;
            color: #aaa;
            cursor: not-allowed;
            opacity: 0.5;
        }

.grid-pager-left {
    justify-content: flex-start !important;
}

.hscroll {
    width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
}

    .hscroll.top {
        height: 16px;
        margin-bottom: 6px;
    }

#scrollSpacer {
    height: 1px;
}

.datagrid.auto-layout {
    table-layout: auto;
    width: max-content;
    white-space: nowrap;
}

    .datagrid.auto-layout th,
    .datagrid.auto-layout td {
        white-space: nowrap;
    }

.datagrid td input[type="text"],
.datagrid td input[type="date"],
.datagrid td select,
.datagrid td textarea {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    min-width: 0;
}

.datagrid .standardTextBox {
    width: 100% !important;
}

.datagrid a.action-edit, .datagrid a.action-delete {
    display: inline-block;
    margin-left: 5px !important;
    margin-right: 5px !important;
}

.datagrid a.action-update {
    display: inline-block;
    margin-left: -3px !important;
    margin-right: -5px !important;
}

.datagrid a.action-cancel {
    display: inline-block;
    margin-left: -10px !important;
    margin-right: -10px !important;
}
/* Make inputs and dropdowns in the grid more compact */
.datagrid input[type="text"],
.datagrid input[type="date"],
.datagrid select,
.datagrid .gridDropDown {
    padding: 4px 6px;
    margin: 0;
    height: auto;
}
/* Force all datagrid rows to same height */
.datagrid tr.rowStyle,
.datagrid tr.footerStyle {
    height: 36px !important;
}

    .datagrid tr.rowStyle td,
    .datagrid tr.footerStyle td {
        padding: 4px 8px !important;
        line-height: 1.4 !important;
        vertical-align: middle !important;
    }
    /* Force consistent font size on ALL datagrid links */
    .datagrid a,
    .datagrid a:link,
    .datagrid a:visited,
    .datagrid tr.rowStyle a,
    .datagrid tr.rowStyle a:link,
    .datagrid tr.footerStyle a,
    .datagrid tr.footerStyle a:link {
        font-size: calc(10pt + var(--font-offset)) !important;
        margin: 0 5px !important;
        display: inline-block !important;
    }
    /* Ensure Add and Cancel have space between them */
    .datagrid tr.footerStyle td a {
        margin: 0 6px !important;
    }
    /* Make inputs same height as text rows */
    .datagrid tr.footerStyle input[type="text"],
    .datagrid tr.footerStyle input[type="date"],
    .datagrid tr.footerStyle select,
    .datagrid tr.rowStyle input[type="text"],
    .datagrid tr.rowStyle input[type="date"],
    .datagrid tr.rowStyle select,
    .datagrid .gridDropDown {
        height: 30px !important;
        padding: 0px 6px !important;
        font-size: calc(12pt + var(--font-offset)) !important;
        box-sizing: border-box !important;
        border-radius: 12px !important;
        background-color: var(--soft-white) !important;
        color: var(--ink) !important;
        border: 1px solid var(--marine) !important;
    }

    .datagrid tr.rowStyle:hover a,
    .datagrid tr.footerStyle:hover a {
        color: var(--soft-white);
    }

.datagrid select option {
    font-size: calc(12pt + var(--font-offset)) !important;
}

.datagrid a.disabled,
.datagrid a.action-update.disabled,
.datagrid a.action-edit.disabled,
.datagrid a.action-delete.disabled,
.datagrid a.action-cancel.disabled {
    color: #bdbbbb !important;
    text-decoration: none !important;
    cursor: not-allowed !important;
}
/* Date inputs in grid: ensure white text when has value or focused */
.datagrid tr.rowStyle input[type="date"].has-value,
.datagrid tr.rowStyle input[type="date"]:focus,
.datagrid tr.footerStyle input[type="date"].has-value,
.datagrid tr.footerStyle input[type="date"]:focus {
    color: var(--white) !important;
}
/* Grid focus ring — nuclear specificity to override ALL grid border rules */
.datagrid tr.footerStyle input[type="text"]:focus,
.datagrid tr.footerStyle input[type="date"]:focus,
.datagrid tr.footerStyle select:focus,
.datagrid tr.footerStyle textarea:focus,
.datagrid tr.rowStyle input[type="text"]:focus,
.datagrid tr.rowStyle input[type="date"]:focus,
.datagrid tr.rowStyle select:focus,
.datagrid tr.rowStyle textarea:focus {
    outline: 2px solid var(--seastone) !important;
    outline-offset: -1px !important;
    border: 1px solid var(--seastone) !important;
    box-shadow: none !important;
}

/* 508: non-text contrast (1.4.11) for grid input boundaries
        Grid inputs need a white border to offset for 3:1 ratio against 
        adjacent colors- BKL 2026.05.20 */
.datagrid tr.footerStyle input[type="text"],
.datagrid tr.footerStyle input[type="date"],
.datagrid tr.footerStyle select,
.datagrid tr.footerStyle textarea,
.datagrid tr.rowStyle input[type="text"],
.datagrid tr.rowStyle input[type="date"],
.datagrid tr.rowStyle select,
.datagrid tr.rowStyle textarea,
.footerStyle input[type="text"],
.footerStyle input[type="date"],
.footerStyle .standardTextBox {
    border: 2px solid var(--marine) !important;
}

/* End: New editable grid! */