/* =========================================================
   ENTITY LIST VIEW + _TableHeader PARTIAL
   Scoped to this Razor only
   ========================================================= */

.container.entity-page-container {
    padding: 20px;
    max-width: 1200px;
    margin: 0 auto;
    background-color: #fff;
    border: 1px solid #d6dee8;
    border-radius: 12px;
    box-shadow: none;
    display: flex;
    flex-direction: column;
    height: calc(100vh - 180px);
    overflow: hidden;
    gap: 0;
}

.entity-page-container .btn:focus,
.entity-page-container .btn:active:focus,
.entity-page-container .btn-link.nav-link:focus,
.entity-page-container .form-check-input:focus {
    box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

.entity-page-container .table-hover tbody tr:hover {
    background-color: #f5f5f5;
}

.entity-page-container .table th,
.entity-page-container .table td {
    vertical-align: middle;
}

.entity-page-container .sortable {
    cursor: pointer;
}

 

.entity-page-container .form-control::placeholder {
    font-size: 0.8em;
    color: grey;
    font-style: italic;
}

.entity-page-container button:disabled img {
    opacity: 0.4;
    filter: grayscale(100%);
    cursor: default;
}

.entity-page-container .edit-panel {
    overflow: hidden;
    transition: max-height 0.4s ease;
    max-height: 0;
}

    .entity-page-container .edit-panel.open {
        max-height: 1000px;
    }

.entity-page-container table {
    width: 100%;
    table-layout: fixed;
}

.entity-page-container th,
.entity-page-container td {
    box-sizing: border-box;
}

    .entity-page-container th input[type="text"],
    .entity-page-container td input[type="text"] {
        width: 50px;
        max-width: 100%;
    }

.entity-page-container th {
    white-space: nowrap;
}

.entity-page-container {
    --entity-border-color: #d6dee8;
}

    .entity-page-container table.table-bordered th,
    .entity-page-container table.table-bordered td {
        border-right: 1px solid var(--entity-border-color);
    }

        .entity-page-container table.table-bordered th:last-child,
        .entity-page-container table.table-bordered td:last-child {
            border-right: none;
        }

    .entity-page-container .table-page-header {
        flex: 0 0 auto;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding-right: 10px;
        padding-bottom: 10px;
        color: #004085;
        background: #fff;
    }

    .entity-page-container .table-columns-header {
        flex: 0 0 auto;
        background: #fff;
        padding-right: var(--scrollbar-width, 0px);
        border-bottom: 1px solid var(--entity-border-color);
    }

    .entity-page-container .table-data-scroll {
        flex: 1 1 auto;
        min-height: 0;
        overflow-y: auto;
        overflow-x: hidden;
        background: #fff;
    }

    .entity-page-container .fixed-header-table,
    .entity-page-container .fixed-body-table {
        width: 100%;
        margin-bottom: 0;
        table-layout: fixed;
        border-collapse: collapse;
        --bs-table-border-color: var(--entity-border-color);
        border-color: var(--entity-border-color) !important;
    }

        .entity-page-container .fixed-header-table th,
        .entity-page-container .fixed-body-table td {
            box-sizing: border-box;
            padding: 0.5rem;
        }

            .entity-page-container .fixed-header-table th:first-child,
            .entity-page-container .fixed-body-table td:first-child {
                width: 80px !important;
                min-width: 80px !important;
                max-width: 80px !important;
            }

        .entity-page-container .fixed-header-table th {
            background: #fff;
            color: #004085;
            white-space: nowrap;
        }

        /* Force all Bootstrap table-bordered borders to the same light color */
        .entity-page-container .fixed-header-table.table-bordered,
        .entity-page-container .fixed-body-table.table-bordered,
        .entity-page-container .fixed-header-table.table-bordered > :not(caption) > *,
        .entity-page-container .fixed-body-table.table-bordered > :not(caption) > *,
        .entity-page-container .fixed-header-table.table-bordered > :not(caption) > * > *,
        .entity-page-container .fixed-body-table.table-bordered > :not(caption) > * > * {
            border-color: var(--entity-border-color) !important;
        }

    /* Remove the double/dark line between header table and body table */
    .entity-page-container .fixed-header-table {
        border-bottom: 0 !important;
    }

        .entity-page-container .fixed-header-table thead,
        .entity-page-container .fixed-header-table thead tr,
        .entity-page-container .fixed-header-table thead th {
            border-bottom: 0 !important;
        }

    .entity-page-container .fixed-body-table {
        border-top: 0 !important;
    }

        .entity-page-container .fixed-body-table tbody tr:first-child,
        .entity-page-container .fixed-body-table tbody tr:first-child td {
            border-top: 0 !important;
        }

        /* Optional utility columns if used */
        .entity-page-container .fixed-header-table .col-id,
        .entity-page-container .fixed-body-table .col-id {
            width: 80px;
            min-width: 80px;
            max-width: 80px;
        }

        .entity-page-container .fixed-header-table .col-main,
        .entity-page-container .fixed-body-table .col-main {
            width: auto;
        }


/* =========================================================
   TEAM PAGE - fixed header + horizontal scroll
   ========================================================= */

.team-page-container .table-columns-header {
    overflow-x: hidden;
    overflow-y: hidden;
}

.team-page-container .table-data-scroll {
    overflow-y: auto;
    overflow-x: auto;
}

.team-page-container .fixed-header-table,
.team-page-container .fixed-body-table {
    width: 1730px;
    min-width: 1730px;
    table-layout: fixed;
    margin-bottom: 0;
}

    .team-page-container .fixed-header-table th,
    .team-page-container .fixed-body-table td {
        white-space: nowrap;
        box-sizing: border-box;
        padding: 0.5rem;
    }






/* ========================================================= */


/* =========================================================
   EMPLOYEE CSS
   Related to:
   - Employee tabs page
   - _EmployeeTable partial
   Extracted only from the CSS block you provided
   ========================================================= */




.nav-item {
    display: inline-block;
    margin: 0 15px;
}


.text-wrap {
    word-wrap: break-word;
    overflow-wrap: break-word;
    white-space: normal;
    color: #004085;
}


.employee-page-container .table-page-header {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

    .employee-page-container .table-page-header h2 {
        margin: 0;
        white-space: nowrap;
    }

    .employee-page-container .table-page-header > div {
        display: flex;
        align-items: center;
        gap: 8px;
        margin-left: auto;
        flex-shrink: 0;
    }

.employee-page-container .employee-tabs {
    flex: 0 0 auto;
    margin-bottom: 10px;
}

.employee-page-container .employee-tab-content {
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
}

.employee-page-container .employee-tab-pane {
    height: 100%;
}

    .employee-page-container .employee-tab-pane.show.active {
        display: flex;
        flex-direction: column;
        min-height: 0;
        height: 100%;
    }

.employee-page-container .employee-table-layout {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    --scrollbar-width: 0px;
}

.employee-page-container .employee-table-columns-header {
    flex: 0 0 auto;
    background: #fff;
    overflow: hidden;
    padding-right: var(--scrollbar-width, 0px);
    border-bottom: 1px solid var(--entity-border-color);
}

.employee-page-container .employee-table-data-scroll {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    background: #fff;
}

.employee-page-container .employee-fixed-header-table,
.employee-page-container .employee-fixed-body-table {
    width: 100%;
    margin-bottom: 0;
    table-layout: fixed;
    border-collapse: collapse;
}

    .employee-page-container .employee-fixed-header-table th,
    .employee-page-container .employee-fixed-body-table td {
        box-sizing: border-box;
        padding: 0.5rem;
    }

    .employee-page-container .employee-fixed-header-table th {
        background: #fff;
        color: #004085;
        white-space: nowrap;
    }

        .employee-page-container .employee-fixed-body-table td:nth-child(1),
        .employee-page-container .employee-fixed-header-table th:nth-child(1) {
            width: 80px !important;
            min-width: 80px !important;
            max-width: 80px !important;
        }

        .employee-page-container .employee-fixed-body-table td:nth-child(3),
        .employee-page-container .employee-fixed-header-table th:nth-child(3),
        .employee-page-container .employee-fixed-body-table td:nth-child(4),
        .employee-page-container .employee-fixed-header-table th:nth-child(4) {
            width: 160px !important;
            min-width: 160px !important;
            max-width: 160px !important;
        }

    .employee-page-container .employee-fixed-body-table .text-wrap {
        white-space: normal;
        word-wrap: break-word;
        overflow-wrap: break-word;
    }

    .employee-page-container .employee-fixed-body-table .edit-row td {
        white-space: normal;
    }
.employee-fixed-header-table,
.employee-fixed-body-table {
    width: 100%;
    table-layout: fixed;
}

    .employee-fixed-body-table td,
    .employee-fixed-header-table th {
        box-sizing: border-box;
    }

.edit-panel {
    width: 100%;
    box-sizing: border-box;
}


/*========================================================= */
/* =========================================================
   PLAYER RAZOR CSS
   ========================================================= */

.player-page-container .table-columns-header {
    overflow-x: hidden;
    overflow-y: hidden;
}

.player-page-container .table-data-scroll {
    overflow-y: auto;
    overflow-x: auto;
}
.player-page-container .player-fixed-header-table,
.player-page-container .player-fixed-body-table {
    width: max-content;
    min-width: 100%;
    table-layout: auto;
    margin-bottom: 0;
}

    .player-page-container .player-fixed-header-table th,
    .player-page-container .player-fixed-body-table td {
        white-space: nowrap;
        vertical-align: middle;
    }

.player-page-container .player-fixed-body-table td > span {
    display: block;
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.player-page-container .editable-cell {
    overflow: hidden;
}

.player-page-container .player-fixed-body-table .edit-row td,
.player-page-container .player-fixed-body-table .edit-row td > div,
.player-page-container .player-fixed-body-table .edit-row td span {
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
}
/* =========================================================*/
/* =========================================================
   TEAM PAGE - dynamic column widths + horizontal scroll
   ========================================================= */

.team-page-container .table-columns-header {
    overflow-x: hidden;
    overflow-y: hidden;
}

.team-page-container .table-data-scroll {
    overflow-y: auto;
    overflow-x: auto;
}

.team-page-container .team-fixed-header-table,
.team-page-container .team-fixed-body-table {
    width: max-content !important;
    min-width: 100% !important;
    table-layout: auto !important;
    margin-bottom: 0;
}

    .team-page-container .team-fixed-header-table th,
    .team-page-container .team-fixed-body-table td {
        white-space: nowrap;
        vertical-align: middle;
        box-sizing: border-box;
        padding: 0.5rem;
    }

        .team-page-container .team-fixed-body-table td > span {
            display: inline-block;
            white-space: nowrap;
        }

    .team-page-container .team-fixed-body-table tr[id^="rowEdit_"] td,
    .team-page-container .team-fixed-body-table tr[id^="rowEdit_"] td * {
        white-space: normal;
    }
/* =========================================================
   MATCH REPORT CSS
   Related to:
   1) Match report grouped list Razor
   2) Match report form/edit Razor
   ========================================================= */


/* =========================================================
   MATCH REPORT LIST PAGE
   Used by:
   - grouped match rows
   - collapsible match-day sections
   - custom panel wrapper
   ========================================================= */

.custom-panel {
    max-width: 100%;
    overflow-x: auto;
    border: 1px solid #ccc;
    padding: 10px;
    border-radius: 5px;
    background-color: white;
    box-sizing: border-box;
    margin-bottom: 10px;
    cursor: grab;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    transition: box-shadow 0.3s ease;
}

    .custom-panel:hover {
        box-shadow: 0 8px 16px rgba(0,0,0,0.15);
    }

.group-header {
    cursor: pointer;
}

 

td.date-cell {
    white-space: nowrap;
}

.collapse-content {
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: max-height 0.4s ease, opacity 0.4s ease;
}

    .collapse-content.show {
        max-height: 9999px; /* large enough to fit content */
        opacity: 1;
    }

    .collapse-content table {
        width: 100%;
        border-collapse: collapse;
    }

.inner-table th {
    background-color: #f8f9fa;
    white-space: nowrap;
}

.inner-table td {
    padding: 0.25rem;
}


/* =========================================================
   MATCH REPORT FORM - COLLAPSIBLE FIELDSET HEADERS
   Used by:
   - fieldset legends such as General Info / Results / Players
   ========================================================= */

.fieldset-tab {
    color: #004085;
    background-color: #ffffff;
    padding: 12px 16px;
    border: 1px solid #e3eaf2;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    user-select: none;
    cursor: pointer;
    font-weight: 600;
    font-size: 1rem;
    margin-bottom: 12px;
    box-shadow: 0 4px 14px rgba(15, 23, 42, 0.06);
    transition: all 0.25s ease;
}

    .fieldset-tab:hover {
        transform: translateY(-1px);
        box-shadow: 0 8px 20px rgba(15, 23, 42, 0.10);
        border-color: #c9def5;
    }

    .fieldset-tab:active {
        transform: translateY(0);
        box-shadow: 0 4px 10px rgba(15, 23, 42, 0.08);
    }

    .fieldset-tab:focus {
        outline: none;
        box-shadow: 0 0 0 3px #80bdff;
    }

.toggle-icon {
    transition: transform 0.3s ease;
    font-size: 1.2em;
    line-height: 1;
}

.fieldset-tab[aria-expanded="true"] .toggle-icon {
    transform: rotate(180deg); /* arrow points up when expanded */
}

/* =========================================================
   MATCH REPORT FORM - GENERAL INFO LAYOUT
   Used by:
   - #genMatchReportContent
   - gm-col
   - gm-row
   - referee review panel
   ========================================================= */

.match-report-form #genMatchReportContent {
    --label-width: 150px;
    --row-gap: 8px;
    --icon-slot: 16px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 20px;
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
    align-items: start;
}

    .match-report-form #genMatchReportContent > .gm-col {
        display: flex;
        flex-direction: column;
        gap: 10px;
        min-width: 0;
    }

.match-report-form .gm-row {
    display: grid;
    grid-template-columns: var(--label-width) minmax(0, 1fr);
    column-gap: var(--row-gap);
    align-items: center;
    min-width: 0;
}

    .match-report-form .gm-row.gm-row-right {
        grid-template-columns: var(--label-width) minmax(0, 1fr) var(--icon-slot);
    }

    .match-report-form .gm-row > label,
    .match-report-form .gm-notes-row > label {
        margin: 0;
        color: #004085;
        font-weight: 600;
        font-size: 0.95rem;
        letter-spacing: 0.2px;
        line-height: 1.4;
    }

    .match-report-form .gm-row > select,
    .match-report-form .gm-row > input,
    .match-report-form .gm-row > div,
    .match-report-form .gm-notes-row > textarea {
        width: 100%;
        min-width: 0;
        box-sizing: border-box;
    }

.match-report-form .gm-notes-row {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: var(--label-width) minmax(0, 1fr) var(--icon-slot);
    column-gap: var(--row-gap);
    align-items: start;
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
}

    .match-report-form .gm-notes-row textarea {
        min-height: 50px;
        resize: vertical;
    }

    .match-report-form .gm-notes-row .notes-end-space {
        width: var(--icon-slot);
        min-width: var(--icon-slot);
        height: 1px;
    }

.match-report-form .collapsible-fieldset {
    background-color: #ffffff;
    box-sizing: border-box;
}




















:root {
    --mr-primary: #0f3d75;
    --mr-primary-hover: #174a8b;
    --mr-secondary-bg: #eaf3ff;
    --mr-secondary-text: #0f3d75;
    --mr-border: #d9e3ee;
    --mr-row-hover: #f8fbff;
    --mr-text: #243447;
    --mr-muted: #5b6b7f;
    --mr-radius-lg: 12px;
    --mr-radius-md: 8px;
}

/* panel */
.custom-panel {
    max-width: 100%;
    overflow-x: auto;
    border: 1px solid var(--mr-border);
    padding: 12px;
    border-radius: var(--mr-radius-lg);
    background-color: #ffffff;
    box-sizing: border-box;
    margin-bottom: 10px;
    box-shadow: 0 4px 14px rgba(15, 23, 42, 0.06);
    transition: box-shadow 0.25s ease, transform 0.25s ease;
}

    .custom-panel:hover {
        box-shadow: 0 8px 20px rgba(15, 23, 42, 0.10);
    }

    /* top-level section */
    .custom-panel .category-header-row td {
        background: linear-gradient(180deg, #174a8b 0%, #0f3d75 100%) !important;
        color: #ffffff !important;
        font-weight: 600 !important;
        padding: 12px 16px !important;
        border: none !important;
        border-radius: 10px;
    }

    /* second-level section */
    .custom-panel .game-header-row td {
        background-color: var(--mr-secondary-bg) !important;
        color: var(--mr-secondary-text) !important;
        font-weight: 600 !important;
        padding: 10px 16px !important;
        border: 1px solid #d7e6fb !important;
        border-radius: 8px;
    }

    /* ensure all inner text inherits correctly */
    .custom-panel .category-header-row *,
    .custom-panel .category-header-row td * {
        color: #ffffff !important;
    }

    .custom-panel .game-header-row *,
    .custom-panel .game-header-row td * {
        color: var(--mr-secondary-text) !important;
    }

    /* common section cell styling */
    .custom-panel .section-header-cell {
        letter-spacing: 0.2px;
        line-height: 1.2;
    }

    /* indentation for nested group */
    .custom-panel .matchday-header-cell {
        padding-left: 28px !important;
    }

    /* spacing between groups */
    .custom-panel .category-header-row td,
    .custom-panel .game-header-row td {
        box-shadow: inset 0 0 0 1px rgba(255,255,255,0.04);
    }

    /* inner table */
    .custom-panel .inner-table {
        border: 1px solid var(--mr-border);
        border-radius: 10px;
        overflow: hidden;
        background: #fff;
    }

        .custom-panel .inner-table th {
            background-color: #f7faff;
            color: var(--mr-primary);
            font-weight: 600;
            white-space: nowrap;
            border-bottom: 1px solid var(--mr-border);
        }

        .custom-panel .inner-table td {
            color: var(--mr-text);
            padding: 0.5rem;
            border-top: 1px solid #eef2f7;
            font-size: 0.85rem;
        }

        .custom-panel .inner-table tbody tr:hover {
            background-color: var(--mr-row-hover);
        }

    /* expand/collapse content */
    .custom-panel .group-panel {
        max-height: 0;
        overflow: hidden;
        opacity: 0;
        transform: translateY(-6px);
        transition: max-height 0.25s ease, opacity 0.2s ease, transform 0.25s ease;
    }

        .custom-panel .group-panel.open {
            max-height: 1200px;
            opacity: 1;
            transform: translateY(0);
        }
/* =========================================================
   MATCH REPORT FORM - REFEREE REVIEW PANEL
   Used by:
   - .referees-panel-wrap
   - .referees-panel
   - .referees-top-row
   - .referees-inline-field
   ========================================================= */

.match-report-form #genMatchReportContent > .referees-panel-wrap {
    grid-column: 1 / -1;
    width: 100%;
    min-width: 0;
    margin-top: 15px;
}

.match-report-form .referees-panel {
    position: relative;
    width: 100%;
    min-width: 0;
    margin: 0;
    padding: 22px 18px 18px;
    box-sizing: border-box;
    border: 1px solid #ccc;
    border-radius: 6px;
    background-color: #ffffff;
}

.match-report-form .referees-panel-title {
    position: absolute;
    top: 0;
    left: 14px;
    transform: translateY(-50%);
    padding: 0 10px;
    background-color: #ffffff;
    color: #004085;
    font-weight: 500;
    font-size: 0.9rem;
    letter-spacing: 0.1px;
    line-height: 1.4;
    z-index: 3;
    box-shadow: 0 0 0 4px #ffffff;
}

/* Top row: report field on left, checks on right */
.match-report-form .referees-top-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
    width: 100%;
    margin-bottom: 12px;
}

.match-report-form .referees-inline-field {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}
    .match-report-form .referees-inline-field label,
    .match-report-form .inline-field-label {
        margin: 0;
        color: #004085;
        font-weight: 500;
        font-size: 0.9rem;
        letter-spacing: 0.1px;
        line-height: 1.4;
        white-space: nowrap;
    }

/* Checkbox group aligned on same line */
.match-report-form .referees-checks-field {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 20px;
    flex-wrap: wrap;
    margin-left: auto;
}

.match-report-form .referee-check-label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    white-space: nowrap;
    color: #004085;
    font-weight: 500;
    font-size: 0.9rem;
    letter-spacing: 0.1px;
    line-height: 1.4;
}
/* Standard field blocks below top row */
.match-report-form .referees-field {
    width: 100%;
    min-width: 0;
    margin-bottom: 16px;
}
    .match-report-form .referees-field label {
        display: block;
        margin-bottom: 6px;
        color: #004085;
        font-weight: 500;
        font-size: 0.9rem;
        letter-spacing: 0.1px;
        line-height: 1.4;
    }

/* Compact report dropdown */
.match-report-form .referees-report-field {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 0;
}

    .match-report-form .referees-report-field label {
        margin: 0;
    }

.match-report-form .referee-report-select {
    width: auto !important;
    min-width: 70px;
    max-width: 90px;
    display: inline-block !important;
}

/* Textareas */
.match-report-form .referee-textarea {
    display: block;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    min-height: 80px;
    padding: 10px 12px;
    box-sizing: border-box;
    border: 1px solid #ccc;
    border-radius: 4px;
    resize: vertical;
}

.select-readonly-white:disabled {
    background-color: #fff !important;
    color: #000 !important;
    opacity: 1 !important;
    -webkit-text-fill-color: #000; /* helps in Chrome/Safari */
    border: 1px solid #ccc;

}


/* =========================================================
   MATCH REPORT FORM - EMPLOYEE / DROPDOWN CONTROLS
   Used by:
   - player-select
   - employee-link-btn
   - entered-flag-select
   ========================================================= */
.player-select {
    width: 250px; /* or smaller */
    max-width: 100%;
}

.match-report-form #genMatchReportContent .player-select {
    width: 100% !important;
    max-width: 100% !important;
}

.employee-link-btn {
    width: 28px;
    min-width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    border: 1px solid #d6dee8;
    border-radius: 6px;
    background: #fff;
    color: #4b5563;
    font-size: 14px;
    box-sizing: border-box;
    transition: all 0.2s ease;
}

    .employee-link-btn:hover {
        background: #f8fbff;
        border-color: #b8cbe0;
        color: #0f3d75;
        box-shadow: 0 2px 6px rgba(0,0,0,0.08);
    }

    .employee-link-btn:focus {
        outline: none;
        box-shadow: 0 0 0 3px rgba(13, 110, 253, 0.2);
    }

.match-report-form #genMatchReportContent .entered-flag-select {
    flex: 0 0 auto;
    width: 80px !important;
    min-width: 80px;
    max-width: 80px;
}


/* =========================================================
   MATCH REPORT INDEX - CATEGORY / MATCH DAY GROUPING
   ========================================================= */
.custom-panel .category-header-row,
.custom-panel .category-header-row td {
    background-color: #004085 !important;
    color: #ffffff !important;
    font-weight: 400 !important;
}

    .custom-panel .category-header-row *,
    .custom-panel .category-header-row td * {
        color: #ffffff !important;
        font-weight: 400 !important;
    }

.custom-panel .game-header-row,
.custom-panel .game-header-row td {
    background-color: #b8daff !important;
    color: #ffffff !important;
}

    .custom-panel .game-header-row *,
    .custom-panel .game-header-row td * {
        color: #ffffff !important;
        font-weight: 400 !important;
    }

.custom-panel .section-header-cell {
    font-weight: 400 !important;
}
 

.custom-panel .matchday-header-cell {
    padding-left: 25px !important;
}

.custom-panel .group-panel {
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transform: translateY(-8px);
    transition: max-height 0.25s ease, opacity 0.2s ease, transform 0.25s ease;
}

    .custom-panel .group-panel.open {
        max-height: 1200px;
        opacity: 1;
        transform: translateY(0);
    }

.custom-panel .section-row-opening {
    animation: sectionSlideDown 0.2s ease;
}

@keyframes sectionSlideDown {
    from {
        opacity: 0;
        transform: translateY(-6px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}
.section-locked {
    pointer-events: none;
    opacity: 0.55;
}

.readonly-hint {
    margin-bottom: 10px;
    padding: 10px 12px;
    border: 1px solid #ffe69c;
    background-color: #fff3cd;
    color: #856404;
    border-radius: 4px;
    font-size: 0.95rem;
}

/* =========================================================
   MATCH REPORT FORM - AG GRID SECTIONS
   Used by:
   - Hplayer-table
   - Aplayer-table
   - HomeCompanionGrid
   - AwayCompanionGrid
   ========================================================= */

.ag-theme-alpine .ag-cell {
    border: 1px solid #d0d0d0;
}

.ag-theme-alpine .ag-header-cell {
    border: 1px solid #d0d0d0;
}

/*.ag-theme-alpine .ag-root-wrapper {
    border-collapse: collapse;
}*/

.ag-theme-alpine .ag-row:hover .ag-cell {
    background-color: #f5faff;
}


/* =========================================================
   MATCH REPORT AUDIT CSS
   Related to:
   - MatchReportAuditPage
   - _MatchReportAuditTable
   - _MatchReportTeamAuditTable
   - _MatchReportPlayerAuditTable
   - _MatchReportEmployeeAuditTable
   - _MatchReportCompanionAuditTable
   ========================================================= */

/* Audit page layout */
.audit-page {
    max-width: 1280px;
    padding: 0 12px 24px;
}

.audit-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 14px;
}

.audit-title {
    margin: 0;
    color: #0f3d75;
    font-size: 1.15rem;
    font-weight: 700;
    letter-spacing: 0.2px;
}

.audit-subtitle {
    margin-top: 4px;
    color: #6b7280;
    font-size: 0.82rem;
    font-weight: 400;
}

.audit-card {
    background: #ffffff;
    border: 1px solid #e5eaf1;
    border-radius: 12px;
    box-shadow: 0 6px 18px rgba(15, 23, 42, 0.06);
    overflow: hidden;
}

/* Audit tabs */
.audit-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 12px 12px 0 12px;
    margin: 0;
    border-bottom: 1px solid #e8edf3;
    background: #f8fafc;
}

    .audit-tabs .nav-link {
        border: 1px solid transparent;
        border-radius: 8px 8px 0 0;
        padding: 8px 14px;
        font-size: 0.84rem;
        font-weight: 600;
        color: #4b5b70;
        background: transparent;
        transition: all 0.2s ease;
        white-space: nowrap;
    }

        .audit-tabs .nav-link:hover {
            color: #0f3d75;
            background: #eef4fb;
            border-color: #d9e6f5;
        }

        .audit-tabs .nav-link.active {
            color: #0f3d75;
            background: #ffffff;
            border-color: #d9e6f5 #d9e6f5 #ffffff;
            box-shadow: 0 -1px 0 #ffffff inset;
        }

/* Audit tab content */
.audit-tab-content {
    padding: 14px;
    background: #ffffff;
}

/* Audit tables */
.audit-table-wrap {
    overflow-x: auto;
}

.audit-table {
    margin-bottom: 0;
    width: 100%;
    table-layout: auto;
    border-collapse: collapse;
    font-size: 0.82rem;
    color: #1f2937;
    border: 1px solid #d6dee8;
}

    .audit-table thead th {
        background: #eef3f8;
        color: #0f3d75;
        font-size: 0.78rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.35px;
        padding: 10px 12px;
        white-space: nowrap;
        border: 1px solid #d6dee8;
    }

    .audit-table tbody td {
        padding: 9px 12px;
        vertical-align: top;
        color: #334155;
        line-height: 1.35;
        border: 1px solid #e1e7ef;
    }

    .audit-table tbody tr {
        border-bottom: 1px solid #dbe3ec;
    }

        .audit-table tbody tr:hover {
            background-color: #f8fbff;
        }

        .audit-table tbody tr:nth-child(even) {
            background-color: #fcfdff;
        }



/* =========================================================
   MATCH REPORT PRINT CSS
   Related to:
   - MatchReportPrint.cshtml
   - TeamPlayersPrintPartial.cshtml
   Extracted from remaining shared CSS
   ========================================================= */

.section-title {
    border: 1px solid #ccc;
    padding: 10px;
    margin-bottom: 10px;
    border-radius: 5px;
    font-weight: bold;
    font-size: 1.25rem;
    background-color: white; /* or match your site background */
    color: #003366; /* example colour */
}
/* =========================================================
   HOME DASHBOARD
   Related to:
   - Home.cshtml
   - _LeagueTable partial used on home page
   - _UpcomingPunishments partial used inside dashboard cards
   ========================================================= */

.home-dashboard {
    max-width: 1280px;
    margin: 24px auto 32px;
    padding: 0 16px;
    box-sizing: border-box;
}

.home-banner {
    color: #0f3d75;
    background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
    border: 1px solid #d9e3ee;
    border-radius: 12px;
    padding: 16px 20px;
    margin-bottom: 20px;
    font-weight: 600;
    font-size: 1rem;
    box-shadow: 0 4px 14px rgba(15, 23, 42, 0.06);
}

.dashboard-grid {
    display: grid;
    gap: 18px;
    margin-bottom: 18px;
}

.dashboard-grid--top {
    grid-template-columns: 1fr;
}

.dashboard-grid--bottom {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.dashboard-card {
    min-width: 0;
    background: #ffffff;
    border: 1px solid #d9e3ee;
    border-radius: 12px;
    padding: 16px;
    box-shadow: 0 4px 14px rgba(15, 23, 42, 0.06);
    transition: box-shadow 0.25s ease, transform 0.25s ease;
    overflow: hidden;
}

    .dashboard-card:hover {
        box-shadow: 0 8px 20px rgba(15, 23, 42, 0.10);
    }

    /* Attached table header bar inside dashboard cards */
    .dashboard-card .table-page-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        background: #f8fbff;
        padding: 12px 14px;
        margin: -16px -16px 12px -16px;
        border-bottom: 1px solid #e5eaf1;
        border-radius: 12px 12px 0 0;
    }

        .dashboard-card .table-page-header > div {
            display: flex;
            align-items: center;
            gap: 8px;
            margin-left: auto;
            flex-wrap: wrap;
        }

        .dashboard-card .table-page-header h2,
        .dashboard-card .table-page-header h5 {
            margin: 0;
            color: #0f3d75;
            font-size: 1rem;
            font-weight: 700;
            line-height: 1.3;
        }

.dashboard-card--featured {
    border-color: #cfe0f3;
}

.dashboard-card__title {
    margin: 0 0 14px 0;
    color: #0f3d75;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.4;
    user-select: none;
    cursor: grab;
}

    .dashboard-card__title:active {
        cursor: grabbing;
    }

.sortable-ghost {
    opacity: 0.55;
    background: #f5f9ff;
}

.sortable-drag {
    transform: rotate(1deg);
}

/* Shared table styling inside dashboard cards */
.dashboard-card .table {
    margin-bottom: 0;
}

    .dashboard-card .table th,
    .dashboard-card .table td {
        border-color: #d9e3ee !important;
        vertical-align: middle;
    }

    .dashboard-card .table thead th {
        background: #f7faff;
        color: #0f3d75;
        font-size: 0.82rem;
        font-weight: 700;
        letter-spacing: 0.02em;
        white-space: nowrap;
    }

    .dashboard-card .table tbody tr:hover {
        background: #f8fbff;
    }

/* Remove extra spacing from partials rendered inside cards */
.dashboard-card .container {
    max-width: 100%;
    padding: 0;
    margin: 0;
}

.dashboard-card .mt-5 {
    margin-top: 0 !important;
}

/* League table */
.league-table-wrap {
    overflow-x: auto;
}

.league-table {
    width: 100%;
    min-width: 760px;
    table-layout: fixed;
    border-color: #d9e3ee !important;
}

    .league-table th,
    .league-table td {
        padding: 0.7rem 0.5rem;
        text-align: center;
    }

        .league-table th.sortable {
            cursor: pointer;
            transition: background-color 0.2s ease;
        }

            .league-table th.sortable:hover {
                background: #edf4fc;
            }

    .league-table tbody td {
        color: #334155;
    }

    .league-table .league-team-name {
        text-align: left;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-weight: 600;
    }

    .league-table .logo-cell {
        text-align: center;
    }

        .league-table .logo-cell img {
            width: 36px;
            height: 36px;
            object-fit: contain;
            display: inline-block;
        }

.league-logo-placeholder {
    display: inline-block;
    width: 36px;
    text-align: center;
    color: #94a3b8;
    font-weight: 600;
}

.league-table .pts-column {
    background-color: #eef6ff;
    color: #0f3d75;
    font-weight: 700;
}

.league-table__empty {
    text-align: center !important;
    color: #64748b !important;
    padding: 1rem !important;
}

/* Responsive */
@media (max-width: 1100px) {
    .dashboard-grid--bottom {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .home-dashboard {
        padding: 0 12px;
    }

    .home-banner {
        padding: 14px 16px;
        font-size: 0.95rem;
    }

    .dashboard-card {
        padding: 14px;
    }

        .dashboard-card .table-page-header {
            margin: -14px -14px 12px -14px;
            padding: 12px;
        }
}

/* =========================================================
   OTHER EXISTING CSS SNIPPETS
   Kept below because they may be used by other Razor views
   ========================================================= */

html {
    font-size: 14px;
    position: relative;
    min-height: 100%;
}

@media (min-width: 768px) {
    html {
        font-size: 16px;
    }
}

 

 

.form-floating > .form-control-plaintext::placeholder,
.form-floating > .form-control::placeholder {
    color: var(--bs-secondary-color);
    text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder,
.form-floating > .form-control:focus::placeholder {
    text-align: start;
}



    .nav-linkM:hover {
        color: #007bff; /* Change text color on hover */
        background-color: #B3E5FC; /* Change background color on hover */
        border-radius: 5px; /* Add rounded corners */
        text-decoration: none; /* Ensure no underline on hover */
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Add a subtle shadow */
        transform: scale(1.05); /* Slightly scale up the element */
    }

.icon-button {
    background: none;
    border: none;
    color: #007bff;
    cursor: pointer;
    font-size: 1.5rem;
}

    .icon-button:focus {
        outline: none;
    }

.table-container {
    display: flex;
    align-items: center;
}

/*td {
    white-space: nowrap;
}*/

body {
    margin-bottom: 60px;
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    background-color: #f4f4f4;
}

header {
    background-color: white;
    color: #004080;
    padding: 10px 20px;
    border-bottom: 2px solid #004080;
}

.header-content {
    display: flex;
    align-items: center;
}

    .header-content img {
        height: 60px;
        margin-right: 20px;
    }

    .header-content h1 {
        margin: 0;
        font-size: 1.5em;
    }

.navbar {
    background-color: white;
    border-bottom: 2px solid #004080;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    padding: 10px 20px;
}

.navbar-nav {
    display: flex;
    flex-direction: row;
    gap: 15px;
}

.nav-item.dropdown:hover .dropdown-menu {
    display: block;
}


.nav-linkM {
    color: #004085; /* Default text color */
    text-decoration: none; /* Remove underline */
    transition: color 0.3s ease, background-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease; /* Smooth transition for color, background, shadow, and transform */
    margin-right: 5px; /* Add spacing between nav items */
    font-weight: bold;
}

/* Styling the Navbar */
.navbar-nav .nav-linkM {
    color: #1e3a8a; /* Set the text color to white */
}

.welcome-message {
    background-color: #00509E; /* Slightly lighter blue */
    color: #FFFFFF; /* White text */
    font-family: 'Arial', sans-serif;
    font-size: 2em;
    padding: 20px 40px;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    text-align: center;
    animation: flash 1s ease-in-out infinite;
}

@keyframes flash {
    0%, 100% {
        opacity: 0.5;
    }

    50% {
        opacity: 1;
    }
}

.section {
    margin-bottom: 40px;
}

    .section h2 {
        color: #004080;
        margin-bottom: 20px;
        border-bottom: 2px solid #004080;
        padding-bottom: 10px;
    }

    .section p {
        line-height: 1.6;
        color: #333;
    }

footer {
    background-color: #004085; /* light blue */
    color: #cce5ff; /* dark blue text */
    text-align: center;
    padding: 10px 0; /* Reduce padding to make the footer thinner */
    position: fixed;
    width: 100%;
    bottom: 0;
    font-size: 12px; /* Adjust font size as needed */
}

    footer a:hover {
        text-decoration: underline;
    }



/* Dropdown items styling */
.nav-item.dropdown .dropdown-menu {
    background-color: #004080; /* Lighter blue */
    border-radius: 5px;
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
    position: absolute;
    top: 100%; /* Ensures it appears right below the nav link */
    left: 0;
    z-index: 1050; /* Ensures it appears above other content */
    display: none; /* Initially hidden */
}

    .nav-item.dropdown .dropdown-menu .dropdown-item {
        color: #ffffff; /* White text for dropdown items */
    }

        /* Dropdown items on hover */
        .nav-item.dropdown .dropdown-menu .dropdown-item:hover {
            background-color: #1e3a8a; /* Darker blue when hovering */
        }



.nav-linkM.dropdown-toggle::after {
    content: "\f107"; /* Unicode for the downward arrow */
    font-family: "FontAwesome"; /* Using FontAwesome for the arrow */
    padding-left: 10px; /* Adjust this value to move the arrow */
    color: #ffffff; /* White color for the arrow */
}

/* Make sticky but with transparent background */
th.sticky-actions,
td.sticky-actions {
    position: sticky;
    right: 0;
    background-color: transparent; /* Transparent */
    z-index: 9;
    white-space: nowrap;
}

/* Hide header title for the Actions column */
th.sticky-actions {
    font-size: 0; /* Hides text but keeps the column */
    background-color: transparent !important;
    border: none !important;
}

    /* Optional: if you want to hide it from screen readers too */
    th.sticky-actions::before {
        content: none;
    }

.custom-header {
    color: #004085 !important;
}

 

/* Hide buttons by default */
.button-group {
    display: none;
}

/* Show buttons only on hover */
.clickable-row:hover .button-group {
    display: inline-block;
}

/* Optional: make the row indicate interactivity */
.clickable-row {
    cursor: pointer;
}

.card-no-cell,
.player-no-cell {
    width: 80px;
    font-weight: 600;
}

.player-name-cell {
    width: 250px;
}

.card-no-text,
.player-no-text {
    font-weight: normal;
}

.collapsible-content {
    transition: max-height 0.3s ease;
    overflow: hidden;
}

.expired-row {
    background-color: #ffe6e6 !important; /* light red */
    color: #a00; /* optional: darker red text */
}
 
 
 

/* Logout Button */
.btn-outline-koxsys {
    color: #004085;
    border-color: #004085;
}

    .btn-outline-koxsys:hover,
    .btn-outline-koxsys:focus,
    .btn-outline-koxsys:active,
    .btn-outline-koxsys.active,
    .show > .btn-outline-koxsys.dropdown-toggle {
        color: #fff;
        background-color: #004085;
        border-color: #004085;
    }

/* Match Report Audit CSS removed from this block */

.row-menu-link {
    width: 28px;
    min-width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    border: 1px solid #d6dee8;
    border-radius: 6px;
    background: #fff;
    color: #4b5563;
    font-size: 18px;
    line-height: 1;
    transition: all 0.2s ease;
    box-sizing: border-box;
}

    .row-menu-link:hover {
        background: #f8fbff;
        border-color: #b8cbe0;
        color: #0f3d75;
        box-shadow: 0 2px 6px rgba(0,0,0,0.08);
    }

    .row-menu-link:focus {
        outline: none;
        box-shadow: 0 0 0 3px rgba(13, 110, 253, 0.2);
    }

 

.match-report-form .field-action-btn {
    width: var(--icon-slot);
    min-width: var(--icon-slot);
    height: 22px;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

    .match-report-form .field-action-btn img {
        width: 16px;
        height: 16px;
        display: block;
    }

.table-scroll-area table {
    margin-bottom: 0;
    width: 100%;
}

.fixed-header-table .col-id,
.fixed-body-table .col-id {
    width: 80px;
    min-width: 80px;
    max-width: 80px;
}

.fixed-header-table .col-main,
.fixed-body-table .col-main {
    width: auto;
}


/* =========================================================
   GLOBAL TRANSPARENT ICON BUTTONS
   Used by Match Report, Team, Entity pages, etc.
   ========================================================= */
button.transparent-button,
a.transparent-button,
input.transparent-button {
    -webkit-appearance: none !important;
    appearance: none !important;
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
    margin: 0 5px !important;
    min-width: 0 !important;
    width: auto !important;
    height: auto !important;
    line-height: 1 !important;
    vertical-align: middle !important;
    cursor: pointer;
}

    button.transparent-button:hover,
    button.transparent-button:focus,
    button.transparent-button:focus-visible,
    button.transparent-button:active,
    button.transparent-button:disabled,
    a.transparent-button:hover,
    a.transparent-button:focus,
    a.transparent-button:active,
    input.transparent-button:hover,
    input.transparent-button:focus,
    input.transparent-button:active {
        background: transparent !important;
        background-color: transparent !important;
        background-image: none !important;
        border: none !important;
        outline: none !important;
        box-shadow: none !important;
    }

    button.transparent-button::-moz-focus-inner {
        border: 0 !important;
        padding: 0 !important;
    }

    button.transparent-button img,
    a.transparent-button img,
    input.transparent-button img {
        display: block;
        width: 16px;
        height: 16px;
        background: transparent !important;
        background-color: transparent !important;
        border: none !important;
        box-shadow: none !important;
    }

    button.transparent-button:disabled img {
        opacity: 0.4;
        filter: grayscale(100%);
        cursor: default;
    }


.table-page-header button.transparent-button,
.edit-panel button.transparent-button,
.match-report-form button.transparent-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}



/* =========================================================
   USER PAGE - fixed header + scrollable body
   ========================================================= */

.user-page-container .table-columns-header {
    overflow-x: hidden;
    overflow-y: hidden;
}

.user-page-container .table-data-scroll {
    overflow-y: auto;
    overflow-x: auto;
}

.user-page-container .user-fixed-header-table,
.user-page-container .user-fixed-body-table {
    width: 100%;
    min-width: 900px;
    table-layout: fixed;
    margin-bottom: 0;
}

    .user-page-container .user-fixed-header-table th,
    .user-page-container .user-fixed-body-table td {
        box-sizing: border-box;
        padding: 0.5rem;
    }

        .user-page-container .user-fixed-header-table th:nth-child(1),
        .user-page-container .user-fixed-body-table td:nth-child(1) {
            width: 220px !important;
            min-width: 220px !important;
            max-width: 220px !important;
        }

        .user-page-container .user-fixed-header-table th:nth-child(2),
        .user-page-container .user-fixed-body-table td:nth-child(2) {
            width: 160px !important;
            min-width: 160px !important;
            max-width: 160px !important;
        }

        .user-page-container .user-fixed-header-table th:nth-child(4),
        .user-page-container .user-fixed-body-table td:nth-child(4) {
            width: 220px !important;
            min-width: 220px !important;
            max-width: 220px !important;
        }

        .user-page-container .user-fixed-body-table td:nth-child(1),
        .user-page-container .user-fixed-body-table td:nth-child(3),
        .user-page-container .user-fixed-body-table td:nth-child(4) {
            white-space: normal;
            word-break: break-word;
            overflow-wrap: break-word;
        }

    .user-page-container .user-fixed-body-table .edit-row td {
        white-space: normal;
    }

.user-page-container .user-edit-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    width: 428px;
    margin-top: 10px;
}


/* LEAGUE TABLE SIMPLE FIX */

.league-table-page .table-page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: nowrap;
    width: 100%;
}

    .league-table-page .table-page-header > div {
        display: flex;
        align-items: center;
        gap: 8px;
        margin-left: auto;
        flex-shrink: 0;
    }

.league-table-page .league-table-wrap {
    width: 100%;
}

.league-table-page #LeagueTableEntry-Table {
    width: 100% !important;
    max-width: 100% !important;
    table-layout: fixed !important;
    display: table !important;
    margin-bottom: 0;
}

    .league-table-page #LeagueTableEntry-Table th,
    .league-table-page #LeagueTableEntry-Table td {
        vertical-align: middle;
        box-sizing: border-box;
        white-space: nowrap;
    }

.league-table-page .league-team-name {
    text-align: left;
    overflow: hidden;
    text-overflow: ellipsis;
}

.league-table-page #LeagueTableEntry-Table td,
.league-table-page #LeagueTableEntry-Table th {
    text-align: center;
}

    .league-table-page #LeagueTableEntry-Table td:nth-child(3),
    .league-table-page #LeagueTableEntry-Table th:nth-child(3) {
        text-align: left;
    }