@import "variables.css";

/* ============================================================
   DELIVERABLE DASHBOARD
   All colors/fonts/sizes use CSS variables so a site-wide
   rebrand only requires editing :root.
   ============================================================ */

.hidden {
    display: none !important;
}

.deliverableLayout {
    display: flex !important;
    gap: 15px !important;
    align-items: flex-start !important;
    width: 100% !important;
    max-width: 100% !important;
    float: none !important;
    box-sizing: border-box !important;
    margin-top: 30px;
}

.deliverableGridArea {
    flex: 0 0 768px !important;
    width: 768px !important;
    max-width: 768px !important;
    min-width: 0 !important;
    float: none !important;
    box-sizing: border-box !important;
    text-align: left !important;
}

.deliverableRail {
    flex: 0 0 220px !important;
    width: 220px !important;
    max-width: 220px !important;
    float: none !important;
    box-sizing: border-box !important;
}

.deliverableSfyRow {
    width: auto;
    float: none;
    text-align: right;
    margin-bottom: 10px;
}

    .deliverableSfyRow .standardLabel {
        margin-right: 10px;
    }

.deliverableImportGroup {
    width: 100% !important;
    max-width: 220px !important;
    margin-bottom: 20px;
    padding: 10px;
    border: 1px solid var(--marine);
    border-radius: 6px;
    background: var(--soft-white);
    box-sizing: border-box;
}

.deliverableImportLabel {
    display: block;
    text-align: center;
    font-weight: bold;
    color: var(--ink);
    margin-bottom: 8px;
    line-height: 1.3;
}

.deliverableImportButton {
    width: 100%;
    margin-top: 0 !important;
    box-sizing: border-box;
    white-space: normal;
    word-wrap: break-word;
    line-height: 1.3;
    height: auto;
    min-height: 40px;
}


.deliverableGridArea .datagrid {
    table-layout: fixed !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    box-sizing: border-box !important;
}

    .deliverableGridArea .datagrid th,
    .deliverableGridArea .datagrid th .standardLabel,
    .deliverableGridArea .datagrid td,
    .deliverableGridArea .datagrid td .standardLabel {
        font-size: 12px !important;
    }

    .deliverableGridArea .datagrid th {
        padding: 4px 6px !important;
    }
        /* Column 1: Item Description — fluid, wraps long text */
        .deliverableGridArea .datagrid th:nth-child(1),
        .deliverableGridArea .datagrid td:nth-child(1) {
            width: auto !important;
            white-space: normal !important;
            word-wrap: break-word !important;
            overflow: visible !important;
            text-overflow: clip !important;
        }

            .deliverableGridArea .datagrid td:nth-child(1) .standardLabel {
                white-space: normal !important;
                word-wrap: break-word !important;
                display: block;
                font-size: calc(var(--site-font-size) - 1px) !important;
            }
        /* Column 2: Completed */
        .deliverableGridArea .datagrid th:nth-child(2),
        .deliverableGridArea .datagrid td:nth-child(2) {
            width: 75px !important;
            max-width: 75px !important;
            text-align: center !important;
        }
        /* Column 3: Upload Now */
        .deliverableGridArea .datagrid th:nth-child(3),
        .deliverableGridArea .datagrid td:nth-child(3) {
            width: 80px !important;
            max-width: 80px !important;
            text-align: center !important;
        }
        /* Column 4: Download Now */
        .deliverableGridArea .datagrid th:nth-child(4),
        .deliverableGridArea .datagrid td:nth-child(4) {
            width: 90px !important;
            max-width: 90px !important;
            text-align: center !important;
        }
        /* Column 5: Actions — wide enough for Save + Cancel buttons side-by-side */
        .deliverableGridArea .datagrid th:nth-child(5),
        .deliverableGridArea .datagrid td:nth-child(5) {
            width: 100px !important;
            min-width: 100px !important;
            max-width: 100px !important;
            text-align: center !important;
            white-space: nowrap !important;
        }

    .deliverableGridArea .datagrid .rowStyle td,
    .deliverableGridArea .datagrid .rowStyle td .standardLabel {
        color: var(--ink) !important;
        overflow: visible !important;
        text-overflow: clip !important;
        padding: 6px 8px !important;
        vertical-align: middle !important;
    }

    .deliverableGridArea .datagrid .rowStyle:hover,
    .deliverableGridArea .datagrid .rowStyle:hover .standardLabel {
        color: var(--soft-white) !important;
    }

    .deliverableGridArea .datagrid .rowStyle {
        height: auto !important;
        line-height: 1.4 !important;
    }
    /* Separator row: gray band, optional centered italic title */
    .deliverableGridArea .datagrid tr.rowStyle.deliverableSeparatorRow td,
    .deliverableGridArea .datagrid tr.rowStyle.deliverableSeparatorRow td .standardLabel {
        background: var(--soft-white) !important;
        color: var(--ink) !important;
        text-align: center !important;
        font-style: italic !important;
        font-weight: bold !important;
        border-top: 1px solid #bbb !important;
        border-bottom: 1px solid #bbb !important;
        height: 28px;
    }
    /* Add Row light dashed-border prompt */
    .deliverableGridArea .datagrid tr.rowStyle.deliverableAddRow td,
    .deliverableGridArea .datagrid tr.rowStyle.deliverableAddRow td .standardLabel {
        background: var(--soft-white) !important;
        color: var(--marine) !important;
        border-top: 1px dashed var(--seastone) !important;
        border-bottom: 1px dashed var(--seastone) !important;
        text-align: center !important;
        font-style: italic !important;
        cursor: pointer !important;
        height: 28px;
    }

    .deliverableGridArea .datagrid tr.rowStyle.deliverableAddRow:hover td {
        background: #eaf3f6 !important;
    }

    .deliverableGridArea .datagrid tr.rowStyle.deliverableEditRow td {
        background: var(--soft-white) !important;
        color: var(--ink) !important;
    }

        .deliverableGridArea .datagrid tr.rowStyle.deliverableEditRow td:nth-child(1) {
            text-align: left !important;
            padding: 4px 8px !important;
        }

    .deliverableGridArea .datagrid tr.rowStyle.deliverableEditRow .deliverableEditField,
    .deliverableGridArea .datagrid tr.rowStyle.deliverableEditRow input[type="text"] {
        width: 100% !important;
        box-sizing: border-box !important;
        text-align: left !important;
        padding: 4px 6px !important;
        margin: 0 !important;
    }
/* Action column links (delete/save/cancel) */
.deliverableActionCol .deliverableActionLink {
    margin: 0 4px;
    color: var(--ink);
    text-decoration: underline;
    cursor: pointer;
}

    .deliverableActionCol .deliverableActionLink:hover {
        color: var(--ink);
    }
/* Disabled download link (no file uploaded yet) */
.deliverableLinkDisabled {
    opacity: 0.5;
    cursor: not-allowed;
    text-decoration: none !important;
    pointer-events: none;
}
/* Disabled completed checkbox keeps shape but signals read-only */
.deliverableCompletedCheck input[disabled] {
    opacity: 0.9;
    cursor: not-allowed;
}
/* Save/Cancel buttons inside edit row*/
.deliverableGridArea .datagrid tr.deliverableEditRow a.button,
.deliverableGridArea .datagrid tr.deliverableEditRow a:link.button,
.deliverableGridArea .datagrid tr.deliverableEditRow a:visited.button {
    text-decoration: none !important;
    text-align: center !important;
    margin: 0px 5px 0px -5px !important;
    padding-left: 5px !important;
    padding-right: 5px !important;
}

    .deliverableGridArea .datagrid tr.deliverableEditRow a.button:focus,
    .deliverableGridArea .datagrid tr.deliverableEditRow a.button:active {
        outline: none !important;
    }

.deliverableGridArea div {
    width: auto !important;
    max-width: 100% !important;
    float: none !important;
}