@import '_content/TheUIThingLib/TheUIThingLib.bj5u3vliti.bundle.scp.css';

/* /Components/Pages/Config.razor.rz.scp.css */
/* ===== Matrix layout ===== */
.matrix-page-container[b-dcka4ekc26] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    height: 100%;
}

.matrix-toolbar[b-dcka4ekc26] {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-shrink: 0;
}

.matrix-scroll-wrapper[b-dcka4ekc26] {
    overflow: auto;
    flex: 1;
    border: 1px solid #b2d0d2;
    border-radius: 6px;
}

/* ===== Roles matrix table ===== */
.roles-matrix[b-dcka4ekc26] {
    border-collapse: collapse;
    white-space: nowrap;
    font-size: 0.85rem;
    color: #04636A;
}

.roles-matrix th[b-dcka4ekc26],
.roles-matrix td[b-dcka4ekc26] {
    border: 1px solid #b2d0d2;
    padding: 4px 8px;
    vertical-align: top;
}

/* Sticky header rows */
.roles-matrix thead th[b-dcka4ekc26] {
    position: sticky;
    top: 0;
    background: #e6f2f3;
    color: #04636A;
    z-index: 3;
    font-weight: 600;
}

/* Second header row sits below the first */
.roles-matrix thead tr.thead-col-names th[b-dcka4ekc26] {
    top: 42px; /* approx height of first header row */
    background: #eef6f7;
    font-weight: 500;
    border-top: 2px solid #04636A;
}

/* App group header — spans app + reports */
.roles-matrix th.mh-app-group[b-dcka4ekc26] {
    background: #c8e6e8;
    border-left: 2px solid #04636A;
    border-right: 2px solid #04636A;
    text-align: center;
    padding: 6px 8px;
}

.app-group-header[b-dcka4ekc26] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    flex-wrap: nowrap;
}

.app-group-name[b-dcka4ekc26] {
    font-weight: 700;
    font-size: 0.92rem;
    color: #04636A;
    white-space: nowrap;
}

.app-group-actions[b-dcka4ekc26] {
    display: flex;
    gap: 2px;
    flex-shrink: 0;
}

/* Sticky user column (first col) */
.roles-matrix th.mh-user-row[b-dcka4ekc26] {
    position: sticky;
    left: 0;
    z-index: 4;
    background: #e6f2f3;
    color: #04636A;
    min-width: 160px;
    border-right: 2px solid #04636A;
    text-align: center;
    vertical-align: middle;
}

.roles-matrix th.mh-user-row-top[b-dcka4ekc26] {
    border-bottom: 1px solid #b2d0d2;
}

.roles-matrix th.mh-user-row-bottom[b-dcka4ekc26] {
    background: #eef6f7;
}

.roles-matrix td.mc-user[b-dcka4ekc26] {
    position: sticky;
    left: 0;
    background: #eef6f7;
    color: #04636A;
    z-index: 2;
    min-width: 160px;
    max-width: 220px;
    white-space: normal;
    font-weight: 600;
    border-right: 2px solid #04636A;
}

/* App-level column headers (second row) */
.roles-matrix th.mh-app-col[b-dcka4ekc26] {
    min-width: 160px;
    max-width: 220px;
    white-space: normal;
    background: #eef6f7;
    border-left: 2px solid #04636A;
    text-align: center;
}

/* Report column headers (second row) */
.roles-matrix th.mh-report-col[b-dcka4ekc26] {
    min-width: 160px;
    max-width: 220px;
    white-space: normal;
    background: #eef6f7;
}

/* Role cells */
.roles-matrix td.mc-roles[b-dcka4ekc26] {
    min-width: 160px;
    vertical-align: top;
}

/* User rows alternating background */
.roles-matrix tr.user-row:nth-child(even) td[b-dcka4ekc26] {
    background: #f8fdfd;
}

/* ===== App column header cell ===== */
.app-col-header[b-dcka4ekc26],
.report-col-header[b-dcka4ekc26] {
    display: flex;
    flex-direction: column;
    gap: 3px;
    align-items: flex-start;
}

.app-col-name[b-dcka4ekc26] {
    font-weight: 700;
    color: #04636A;
    font-size: 0.88rem;
}

.report-col-name[b-dcka4ekc26] {
    font-weight: 600;
    color: #04636A;
    font-size: 0.85rem;
}

.app-ref-label[b-dcka4ekc26] {
    font-size: 0.72rem;
    color: #6aadaf;
    font-style: italic;
}

.app-level-label[b-dcka4ekc26] {
    font-size: 0.72rem;
    color: #6aadaf;
    font-style: italic;
}

.app-col-actions[b-dcka4ekc26],
.report-col-actions[b-dcka4ekc26] {
    display: flex;
    gap: 2px;
}

/* ===== User row cell ===== */
.user-cell[b-dcka4ekc26] {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-wrap: nowrap;
}

.user-cell-name[b-dcka4ekc26] {
    flex: 1;
    word-break: break-word;
    color: #04636A;
    font-weight: 600;
}

.user-cell-actions[b-dcka4ekc26] {
    display: flex;
    gap: 2px;
    flex-shrink: 0;
}

/* ===== Icon buttons ===== */
.icon-btn[b-dcka4ekc26] {
    border: none;
    background: transparent;
    cursor: pointer;
    padding: 2px 4px;
    border-radius: 3px;
    color: #04636A;
    line-height: 1;
    font-size: 0.8rem;
    transition: background 0.15s, color 0.15s;
}

.icon-btn:hover[b-dcka4ekc26] { background: #cde8ea; color: #016369; }
.icon-btn.danger[b-dcka4ekc26] { color: #dc3545; }
.icon-btn.danger:hover[b-dcka4ekc26] { background: #f8d7da; color: #842029; }
.icon-btn.small[b-dcka4ekc26] { font-size: 0.72rem; padding: 1px 3px; }
.add-role-btn[b-dcka4ekc26] { opacity: 0.6; }
.add-role-btn:hover[b-dcka4ekc26] { opacity: 1; }

/* dialog styles are in the global site.css */