/*
 * Data Grid & Table styles
 * Styling for MudDataGrid, tables, chips and status indicators used in grids.
 *
 * NOTE: These classes target MudBlazor-rendered DOM and MUST remain global.
 * Apply class "entral-data-grid" to any MudDataGrid for consistent styling.
 */

/* ==========================================================================
   Base MudDataGrid theme (class="entral-data-grid")
   ========================================================================== */

/* Table container */
.entral-data-grid .mud-table {
    border: 1px solid var(--table-border-color);
    border-radius: var(--table-border-radius);
    box-shadow: none !important;
    overflow: hidden;
}

/* Header row */
.entral-data-grid .mud-table-head .mud-table-row {
    background-color: var(--table-header-bg) !important;
}

.entral-data-grid .mud-table-head th,
.entral-data-grid .mud-table-head .mud-table-cell {
    font-family: var(--font-family-body) !important;
    font-size: var(--body-size-md) !important;
    font-weight: var(--font-weight-semibold) !important;
    line-height: var(--body-lineheight-md, 20px) !important;
    color: var(--text-heading) !important;
    height: 40px;
    min-height: 40px;
    padding: 6px 8px !important;
    border-bottom: 1px solid var(--table-border-color) !important;
    background-color: var(--table-header-bg) !important;
    white-space: nowrap;
}

/* Header sort label text */
.entral-data-grid .mud-table-head .mud-table-sort-label {
    font-family: var(--font-family-body) !important;
    font-size: var(--body-size-md) !important;
    font-weight: var(--font-weight-semibold) !important;
    line-height: var(--body-lineheight-md, 20px) !important;
    color: var(--text-heading) !important;
    display: inline-flex;
    align-items: center;
}

/* Sort icon styling */
.entral-data-grid .mud-table-head .mud-table-sort-label .mud-button-root,
.entral-data-grid .mud-table-head th .column-options button {
    color: var(--text-heading) !important;
    opacity: 0.5;
}

/* Body rows – alternating colors */
.entral-data-grid .mud-table-body .mud-table-row:nth-child(odd) {
    background-color: var(--table-row-odd-bg) !important;
}

.entral-data-grid .mud-table-body .mud-table-row:nth-child(even) {
    background-color: var(--table-row-even-bg) !important;
}

/* Remove MudBlazor's default hover stripe */
.entral-data-grid .mud-table-body .mud-table-row:hover {
    background-color: rgba(18, 152, 149, 0.04) !important;
}

/* ==========================================================================
   Translations editor grid – fixed column widths
   ========================================================================== */

.translations-grid .mud-table-root {
    table-layout: fixed;
    width: 100%;
}

.translations-grid .mud-table-head th,
.translations-grid .mud-table-body td {
    white-space: normal;
    word-break: break-word;
    vertical-align: top;
    height: auto;
    min-height: var(--table-row-height);
}

/* Key column monospace styling */
.translations-grid .translation-key {
    font-size: var(--body-size-sm);
    background: #f0f0f0;
    padding: 2px 6px;
    border-radius: 4px;
    color: #c7254e;
    word-break: break-all;
}

/* Let the translation input grow naturally */
.translations-grid .mud-input-control {
    margin: 0 !important;
}

/* Body cells */
.entral-data-grid .mud-table-body td,
.entral-data-grid .mud-table-body .mud-table-cell {
    font-family: var(--font-family-body) !important;
    font-size: var(--table-body-font-size) !important;
    font-weight: var(--font-weight-regular) !important;
    color: var(--text-body) !important;
    height: var(--table-row-height);
    padding: 6px 8px !important;
    border-bottom: 1px solid var(--table-border-color) !important;
}

/* Clickable row cursor */
.entral-data-grid .mud-table-body .mud-table-row.cursor-pointer {
    cursor: pointer;
}

/* ==========================================================================
   Table chips (document-status style, used in grid cells)
   ========================================================================== */

.entral-table-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: var(--table-chip-bg);
    border: 1px solid var(--table-chip-border);
    border-radius: var(--table-chip-radius);
    height: var(--table-chip-height);
    padding: 0 6px;
    font-family: var(--font-family-body);
    font-size: var(--table-chip-font-size);
    font-weight: var(--table-header-font-weight);
    color: var(--text-body);
    line-height: 1;
    white-space: nowrap;
}

.entral-table-chip--success {
    background-color: #e8f5e9;
    border-color: #a5d6a7;
    color: #2e7d32;
}

.entral-table-chip--warning {
    background-color: #fff3e0;
    border-color: #ffcc80;
    color: #e65100;
}

/* ==========================================================================
   Staff table (shared across ProjectDetails StaffTab & DocumentsTab)
   ========================================================================== */

.staff-table {
    border: 1px solid var(--border-color, #e6ebeb);
    border-radius: 4px;
    overflow: hidden;
}

/* Header alignment */
.staff-table .mud-table-head .mud-table-cell {
    text-align: left;
    font-family: var(--font-family-body) !important;
    font-size: var(--body-size-md) !important;
    font-weight: var(--font-weight-semibold) !important;
    line-height: var(--body-lineheight-md, 20px) !important;
    color: var(--text-heading, #28292e) !important;
    height: 40px;
    min-height: 40px;
}

.staff-table .mud-table-head .mud-table-sort-label {
    justify-content: flex-start;
    width: 100%;
    font-family: var(--font-family-body) !important;
    font-size: var(--body-size-md) !important;
    font-weight: var(--font-weight-semibold) !important;
    line-height: var(--body-lineheight-md, 20px) !important;
    color: var(--text-heading, #28292e) !important;
    display: inline-flex;
    align-items: center;
}

.staff-table .mud-table-head .mud-table-sort-label-content {
    font-family: var(--font-family-body) !important;
    font-size: var(--body-size-md) !important;
    font-weight: var(--font-weight-semibold) !important;
    line-height: var(--body-lineheight-md, 20px) !important;
    color: var(--text-heading, #28292e) !important;
}

/* Fixed width for compact icon columns */
.staff-table .staff-checkedin-cell,
.staff-table .doc-signature-cell {
    width: 96px;
    min-width: 96px;
    text-align: center !important;
}

.staff-table .doc-filetype-cell {
    width: 68px;
    min-width: 68px;
}

.staff-table .mud-table-head .staff-checkedin-cell .mud-table-sort-label,
.staff-table .mud-table-head .doc-signature-cell .mud-table-sort-label {
    justify-content: center;
}

/* Actions column – show button only on row hover */
.staff-actions-cell {
    width: 36px;
    min-width: 36px;
    padding: 0 !important;
}

.staff-actions-btn {
    opacity: 0;
    transition: opacity 0.15s ease;
}

.mud-table-row:hover .staff-actions-btn {
    opacity: 1;
}

/* ==========================================================================
   Staff chips (shared across ProjectDetails StaffTab & DocumentsTab)
   Flat MudChip variants for status / document columns.
   ========================================================================== */

/* Base chip style shared by all variants */
.mud-chip.staff-chip-neutral,
.mud-chip.staff-chip-success,
.mud-chip.staff-chip-error,
.mud-chip.staff-chip-info,
.mud-chip.staff-chip-warning,
.mud-chip.staff-chip-filetype,
.mud-chip.staff-chip-purple,
.mud-chip.staff-chip-green,
.mud-chip.staff-chip-blue {
    border-radius: 2px !important;
    height: 20px !important;
    min-height: 20px !important;
    max-height: 20px !important;
    padding: 0 6px !important;
    margin: 0 !important;
    box-shadow: none !important;
    font-family: var(--font-family-body) !important;
    font-size: var(--body-size-sm) !important;
    font-weight: var(--font-weight-semibold) !important;
    line-height: var(--body-lineheight-sm, 12px) !important;
}

.mud-chip.staff-chip-neutral .mud-chip-content,
.mud-chip.staff-chip-success .mud-chip-content,
.mud-chip.staff-chip-error .mud-chip-content,
.mud-chip.staff-chip-info .mud-chip-content,
.mud-chip.staff-chip-warning .mud-chip-content,
.mud-chip.staff-chip-filetype .mud-chip-content,
.mud-chip.staff-chip-purple .mud-chip-content,
.mud-chip.staff-chip-green .mud-chip-content,
.mud-chip.staff-chip-blue .mud-chip-content {
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
}

/* Neutral (default / gray) */
.mud-chip.staff-chip-neutral {
    background-color: #e6ebeb !important;
    border: 1px solid #cecfd0 !important;
    color: #28292e !important;
}

/* Success (enrolled / fully signed) */
.mud-chip.staff-chip-success {
    background-color: rgba(90, 168, 90, 0.15) !important;
    border: 1px solid rgba(90, 168, 90, 0.3) !important;
    color: #549235 !important;
}

/* Error (incomplete docs) */
.mud-chip.staff-chip-error {
    background-color: rgba(211, 47, 47, 0.1) !important;
    border: 1px solid rgba(211, 47, 47, 0.25) !important;
    color: #c62828 !important;
}

/* Info (registered) */
.mud-chip.staff-chip-info {
    background-color: rgba(18, 152, 149, 0.1) !important;
    border: 1px solid rgba(18, 152, 149, 0.25) !important;
    color: #129895 !important;
}

/* Warning (missing translations / pending) */
.mud-chip.staff-chip-warning {
    background-color: rgba(230, 81, 0, 0.1) !important;
    border: 1px solid rgba(230, 81, 0, 0.25) !important;
    color: #e65100 !important;
}

/* File type (solid red – used for PDF/DOC chips in document tables) */
.mud-chip.staff-chip-filetype {
    background-color: #d32f2f !important;
    border: 1px solid #d32f2f !important;
    color: white !important;
}

/* Purple (document type: Utstationeringsbevis) */
.mud-chip.staff-chip-purple {
    background-color: rgba(123, 31, 162, 0.10) !important;
    border: 1px solid rgba(123, 31, 162, 0.30) !important;
    color: #7b1fa2 !important;
}

/* Green (document type: Projektdokumentation) */
.mud-chip.staff-chip-green {
    background-color: rgba(56, 142, 60, 0.10) !important;
    border: 1px solid rgba(56, 142, 60, 0.30) !important;
    color: #2e7d32 !important;
}

/* Blue (document type: default / all other types) */
.mud-chip.staff-chip-blue {
    background-color: rgba(25, 118, 210, 0.10) !important;
    border: 1px solid rgba(25, 118, 210, 0.30) !important;
    color: #1565c0 !important;
}

/* ==========================================================================
   Staff status icons (shared across ProjectDetails tabs)
   ========================================================================== */

.staff-status-icon {
    font-size: 16px !important;
    width: 16px;
    height: 16px;
}

.staff-status-icon--checked-in {
    color: #549235 !important;
}

/* ==========================================================================
   Projects page – custom grouped table (class="entral-projects-grid")
   ========================================================================== */

.entral-projects-grid {
    border: 1px solid var(--table-border-color);
    border-radius: var(--table-border-radius);
    overflow: hidden;
    margin-top: 16px;
}

.entral-projects-grid table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
}

/* Header */
.entral-projects-grid thead th {
    font-family: var(--font-family-body);
    font-size: var(--body-size-md);
    font-weight: var(--font-weight-semibold);
    line-height: var(--body-lineheight-md, 20px);
    color: var(--text-heading);
    background-color: var(--table-header-bg);
    height: 40px;
    padding: 6px 12px;
    border-bottom: 1px solid var(--table-border-color);
    text-align: left;
    white-space: nowrap;
    user-select: none;
}

.entral-projects-grid thead th.sortable {
    cursor: pointer;
}

.entral-projects-grid thead th.sortable:hover {
    background-color: rgba(0, 0, 0, 0.02);
}

.entral-projects-grid thead th .th-label {
    vertical-align: middle;
}

/* Sort icons */
.sort-icon {
    vertical-align: middle;
    margin-left: 2px;
    transition: transform 0.15s ease, opacity 0.15s ease;
}

.sort-icon--inactive {
    opacity: 0.25;
}

.sort-icon--asc {
    opacity: 1;
    transform: rotate(0deg);
}

.sort-icon--desc {
    opacity: 1;
    transform: rotate(180deg);
}

/* Group row (project header) */
.entral-projects-grid .project-group-row {
    background-color: #dfefef;
    height: 36px;
}

.entral-projects-grid .project-group-row td {
    padding: 4px 12px;
    font-family: var(--font-family-body);
    font-size: var(--body-size-md);
    font-weight: var(--font-weight-regular);
    color: var(--text-body);
    border-bottom: 1px solid var(--table-border-color);
    white-space: nowrap;
}

/* Project name chip inside group row */
.project-group-name {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: #15aba8;
    border: 1px solid #129895;
    border-radius: 2px;
    height: 20px;
    padding: 0 8px;
    margin-right: 8px;
    font-family: var(--font-family-body);
    font-size: var(--body-size-sm);
    font-weight: var(--font-weight-semibold);
    color: #ffffff;
    line-height: 1;
    white-space: nowrap;
}

/* Data rows */
.entral-projects-grid .project-data-row {
    background-color: #ffffff;
    cursor: pointer;
    transition: background-color 0.12s ease;
}

.entral-projects-grid .project-data-row:hover {
    background-color: rgba(186, 188, 189, 0.2);
}

.entral-projects-grid .project-data-row td {
    padding: 4px 12px;
    font-family: var(--font-family-body);
    font-size: var(--table-body-font-size);
    font-weight: var(--font-weight-regular);
    color: var(--text-body);
    height: 36px;
    border-bottom: 1px solid var(--table-border-color);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Chevron column */
.entral-projects-grid .chevron-col {
    width: 40px;
    min-width: 40px;
    max-width: 40px;
    text-align: center;
    padding: 4px 0 !important;
}

.entral-projects-grid .project-data-row .chevron-col .mud-icon-root {
    color: var(--text-body);
    opacity: 0.5;
}

.entral-projects-grid .project-data-row:hover .chevron-col .mud-icon-root {
    opacity: 1;
}