@import '_content/BlazorSortableList/BlazorSortableList.nyb42hwjlt.bundle.scp.css';

/* /Components/Layout/MainLayout.razor.rz.scp.css */
.page[b-9uh3qg6c2m] {
    position: relative;
    display: flex;
    flex-direction: column;
}

main[b-9uh3qg6c2m] {
    flex: 1;
}

.sidebar[b-9uh3qg6c2m] {
    background-image: linear-gradient(180deg, rgb(5, 39, 103) 0%, #3a0647 70%);
}

.top-row[b-9uh3qg6c2m] {
    background-color: #f7f7f7;
    border-bottom: 1px solid #d6d5d5;
    justify-content: flex-end;
    height: 3.5rem;
    display: flex;
    align-items: center;
}

    .top-row[b-9uh3qg6c2m]  a, .top-row[b-9uh3qg6c2m]  .btn-link {
        white-space: nowrap;
        margin-left: 1.5rem;
        text-decoration: none;
    }

    .top-row[b-9uh3qg6c2m]  a:hover, .top-row[b-9uh3qg6c2m]  .btn-link:hover {
        text-decoration: underline;
    }

    .top-row[b-9uh3qg6c2m]  a:first-child {
        overflow: hidden;
        text-overflow: ellipsis;
    }

@media (max-width: 640.98px) {
    .top-row[b-9uh3qg6c2m] {
        justify-content: space-between;
    }

    .top-row[b-9uh3qg6c2m]  a, .top-row[b-9uh3qg6c2m]  .btn-link {
        margin-left: 0;
    }
}

@media (min-width: 641px) {
    .page[b-9uh3qg6c2m] {
        flex-direction: row;
    }

    .sidebar[b-9uh3qg6c2m] {
        width: 250px;
        height: 100vh;
        position: sticky;
        top: 0;
    }

    .top-row[b-9uh3qg6c2m] {
        position: sticky;
        top: 0;
        z-index: 1;
    }

    .top-row.auth[b-9uh3qg6c2m]  a:first-child {
        flex: 1;
        text-align: right;
        width: 0;
    }

    .top-row[b-9uh3qg6c2m], article[b-9uh3qg6c2m] {
        padding-left: 2rem !important;
        padding-right: 1.5rem !important;
    }
}

#blazor-error-ui[b-9uh3qg6c2m] {
    color-scheme: light only;
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    box-sizing: border-box;
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

    #blazor-error-ui .dismiss[b-9uh3qg6c2m] {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }
/* /Components/Layout/ReconnectModal.razor.rz.scp.css */
/* All styles moved to app.css — scoped CSS doesn't work with #id selectors on dialog elements */
/* /Components/Pages/Admin/Training/CertificateConfigDialog.razor.rz.scp.css */
/* The two sides of a printed document, marked the way a printer marks a plate: a short letter-spaced label and a
   hairline rule running out to the edge of the sheet. It reads as a section of the artefact rather than as a
   heading floating above a picture — which is what a plain bold word looked like. */
.sheet-label[b-ow9vohagj3] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.5rem;
}

.sheet-label > span[b-ow9vohagj3] {
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.11em;
    color: var(--mud-palette-text-secondary);
    white-space: nowrap;
}

/* The rule is the detail: it ties the label to the sheet below it and stops the word from hanging in space. */
.sheet-label[b-ow9vohagj3]::after {
    content: "";
    flex: 1 1 auto;
    height: 1px;
    background-color: var(--mud-palette-lines-default);
}

.sheet-label-next[b-ow9vohagj3] {
    margin-top: 1.5rem;
}
/* /Components/Pages/Public/TakeSurvey.razor.rz.scp.css */
.survey-title[b-xydl5lcbbo] {
    font-size: 1.5rem;
    font-weight: 600;
    line-height: 1.3;
}

.submit-bar[b-xydl5lcbbo] {
    gap: 12px;
}

.submit-button[b-xydl5lcbbo] {
    min-width: 240px;
}
/* /Components/Pages/Surveys/SurveyBuilder.razor.rz.scp.css */
/* /Components/Pages/Surveys/SurveyPlanUninvitedPanel.razor.rz.scp.css */
.action-col[b-i2atbmxalj] {
    text-align: right;
    white-space: nowrap;
}
/* /Components/Pages/Surveys/SurveyStructure.razor.rz.scp.css */
/* Panel styling for equal heights */
.structure-panel[b-3z7k12pekh] {
    min-height: 500px;
    display: flex;
    flex-direction: column;
}

.structure-panel .source-tree-container[b-3z7k12pekh],
.structure-panel .tree-editor[b-3z7k12pekh] {
    flex: 1;
    overflow-y: auto;
}

/* Source tree container */
.source-tree-container[b-3z7k12pekh] {
    border-radius: 4px;
}

/* Source node card - matches TreeEditor node styling */
[b-3z7k12pekh] .source-node-card {
    background-color: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 4px;
    transition: background-color 150ms ease, box-shadow 150ms ease;
}

[b-3z7k12pekh] .source-node-card:hover {
    background-color: var(--mud-palette-background-grey);
    box-shadow: var(--mud-elevation-1);
}

/* Source node children container */
[b-3z7k12pekh] .source-node-children {
    margin-left: 16px;
    padding-left: 8px;
    border-left: 1px dashed var(--mud-palette-lines-default);
}
/* /Components/Pages/Tenant/Directory/EmployeeDetail.razor.rz.scp.css */
/* The certificate history hangs off the course row above it. Indent + tint + a rule on the left say
   "this belongs to that"; without them the expanded block reads as a stray row of its own. */
.trn-cert-history[b-mmtfroizqy] {
    margin: 0 0 0 3rem;
    padding: 0.75rem 1rem;
    border-left: 2px solid var(--mud-palette-lines-default);
    background-color: var(--mud-palette-background-grey);
    border-radius: 0 4px 4px 0;
}

/* Sit on the tint (not over it) and span the full width so the row rules run edge-to-edge. */
.trn-cert-history[b-mmtfroizqy]  .trn-cert-history-table,
.trn-cert-history[b-mmtfroizqy]  .trn-cert-history-table table {
    background-color: transparent;
    width: 100%;
}

/* Column headers: quiet, left-aligned, with a rule beneath. */
.trn-cert-history[b-mmtfroizqy]  .trn-cert-history-table th {
    text-align: left;
    font-weight: 600;
    color: var(--mud-palette-text-secondary);
    padding: 0 0.75rem 0.35rem 0;
    border-bottom: 1px solid var(--mud-palette-lines-default);
}

/* One certificate per row, each separated by a full-width rule. Top-aligned so the date lines up with the
   certificate code above the stacked reason. */
.trn-cert-history[b-mmtfroizqy]  .trn-cert-history-table td {
    padding: 0.5rem 0.75rem 0.5rem 0;
    vertical-align: top;
    border-bottom: 1px solid var(--mud-palette-lines-default);
}

/* The date column: tight to its content, never wrapped. */
.trn-cert-history[b-mmtfroizqy]  .trn-cert-history-table td.trn-cert-history-when,
.trn-cert-history[b-mmtfroizqy]  .trn-cert-history-table th.trn-cert-history-when {
    width: 1%;
    white-space: nowrap;
}

/* The history block's label — a plain div (not MudText) so it carries its own bottom padding, keeping the
   small, uppercased overline look. */
.trn-cert-history-title[b-mmtfroizqy] {
    padding-bottom: 10px;
    text-transform: uppercase;
    font-size: 0.75rem;
    letter-spacing: 0.08em;
    line-height: 1.6;
}

/* The reason sits in the same cell as the code and state, on its own line, under the certificate it explains.
   It wraps only at the cell edge — a short reason stays on one line; a long one wraps naturally. */
.trn-cert-history[b-mmtfroizqy]  .trn-cert-history-reason {
    display: block;
    margin-top: 0.25rem;
}

/* Here the state is a coloured phrase in a table row, not an item in a bulleted list — StateDot's dot would
   read as a stray bullet, so hide the mark. Its colour lives on the text, which stays. */
.trn-cert-history[b-mmtfroizqy]  .state-dot-mark {
    display: none;
}
/* /Components/Pages/Tenant/TenantDashboard.razor.rz.scp.css */
/* KPI Cards — these are MudPaper children, need ::deep */
[b-b2a7fyg974] .kpi-card {
    height: 100%;
    width: 100%;
    min-height: 130px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

[b-b2a7fyg974] .kpi-label {
    text-transform: uppercase;
    font-weight: 600;
    letter-spacing: 0.5px;
}

[b-b2a7fyg974] .kpi-value {
    font-weight: 800;
    font-size: 2.25rem !important;
    letter-spacing: -0.04em;
    line-height: 1;
}

[b-b2a7fyg974] .kpi-sub {
    font-size: 12px;
    line-height: 1.4;
}

[b-b2a7fyg974] .kpi-border-primary {
    border-left: 4px solid var(--mud-palette-primary);
}

[b-b2a7fyg974] .kpi-border-info {
    border-left: 4px solid var(--mud-palette-info);
}

[b-b2a7fyg974] .kpi-border-success {
    border-left: 4px solid var(--mud-palette-success);
}

[b-b2a7fyg974] .kpi-border-warning {
    border-left: 4px solid var(--mud-palette-warning);
}

[b-b2a7fyg974] .kpi-border-error {
    border-left: 4px solid var(--mud-palette-error);
}

[b-b2a7fyg974] .kpi-border-default {
    border-left: 4px solid var(--mud-palette-text-secondary);
}

/* Table utilities — inside MudTable components */
[b-b2a7fyg974] .bold-text {
    font-weight: 600;
}

[b-b2a7fyg974] .actions-column {
    text-align: right;
}

[b-b2a7fyg974] .response-bar {
    width: 80px;
}

[b-b2a7fyg974] .response-col {
    min-width: 200px;
}

/* Status chips — inside MudChip components */
[b-b2a7fyg974] .status-active {
    background-color: #fff6e5 !important;
    color: #c27a08 !important;
}

[b-b2a7fyg974] .status-scheduled {
    background-color: #ebf3ff !important;
    color: #2563eb !important;
}

[b-b2a7fyg974] .status-completed {
    background-color: #eef2f7 !important;
    color: #4b5563 !important;
}

/* Responsive KPI grid */
@media (max-width: 1200px) {
    div[style*="grid-template-columns: repeat(5"][b-b2a7fyg974] {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 768px) {
    div[style*="grid-template-columns: repeat(5"][b-b2a7fyg974] {
        grid-template-columns: 1fr !important;
    }
}
/* /Components/Pages/Tenant/Training/TrainingDashboard.razor.rz.scp.css */
/* Six counts of one to three digits were being sized by their HEADINGS, which pushed the grid past its
   container and put a horizontal scrollbar under a table that holds two rows. The headings still wrap (a
   wrapped "Em treinamento" is NARROWER than an unwrapped one — forcing nowrap here would make it worse); the
   numbers hug the right edge so the eye reads a column of figures rather than a column of words. */
[b-blwf5mv2kd] .trn-num-head {
    text-align: right;
}

[b-blwf5mv2kd] .trn-num {
    text-align: right;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
/* /Components/Shared/CertificateStateBadge.razor.rz.scp.css */
.cert-badge[b-x9ehi3yi01] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    line-height: 1.3;
}

/* The document's identity. Tabular figures so codes line up down the column and a changed revision
   (…-000390 → …-000390-R2) is legible at a glance rather than a wall of digits. */
.cert-badge-code[b-x9ehi3yi01] {
    font-size: 0.8125rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.01em;
    color: var(--mud-palette-text-primary);
}
/* /Components/Shared/StateDot.razor.rz.scp.css */
.state-dot[b-6pdnjhgsko] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.75rem;
    line-height: 1.3;
}

.state-dot-mark[b-6pdnjhgsko] {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background-color: currentColor;
    flex: 0 0 auto;
}

.state-dot-success[b-6pdnjhgsko] {
    color: var(--mud-palette-success);
}

.state-dot-warning[b-6pdnjhgsko] {
    color: var(--mud-palette-warning);
}

.state-dot-error[b-6pdnjhgsko] {
    color: var(--mud-palette-error);
}

/* Not an accusation — simply not current. It recedes. */
.state-dot-muted[b-6pdnjhgsko] {
    color: var(--mud-palette-text-secondary);
}
/* /Components/Shared/Survey/SurveyQuestionRenderer.razor.rz.scp.css */
.q-text[b-09rx22bwc7] {
    font-weight: 500;
    line-height: 1.5;
}

.q-number[b-09rx22bwc7] {
    color: var(--mud-palette-primary);
    font-weight: 700;
    margin-right: 6px;
}

.q-options[b-09rx22bwc7] {
    gap: 4px;
}
/* /Components/Shared/TreeEditor/TreeEditor.razor.rz.scp.css */
/* Tree editor container */
.tree-editor[b-pnejel1uxa] {
    min-height: 100px;
}

/* Tree node styling - use ::deep for child component elements */
[b-pnejel1uxa] .tree-node {
    user-select: none;
}

[b-pnejel1uxa] .tree-node.depth-1 {
    margin-left: 0;
}

[b-pnejel1uxa] .tree-node.depth-2 {
    margin-left: 0;
}

[b-pnejel1uxa] .tree-node.depth-3 {
    margin-left: 0;
}

[b-pnejel1uxa] .tree-node.depth-4 {
    margin-left: 0;
}

[b-pnejel1uxa] .tree-node.depth-1 > .tree-node-card {
    margin-left: 24px;
}

[b-pnejel1uxa] .tree-node.depth-2 > .tree-node-card {
    margin-left: 48px;
}

[b-pnejel1uxa] .tree-node.depth-3 > .tree-node-card {
    margin-left: 72px;
}

[b-pnejel1uxa] .tree-node.depth-4 > .tree-node-card {
    margin-left: 96px;
}

/* Node card */
[b-pnejel1uxa] .tree-node-card {
    border-radius: 6px;
    transition: background-color 150ms ease, box-shadow 150ms ease;
}

[b-pnejel1uxa] .tree-node-card:hover {
    box-shadow: var(--mud-elevation-3);
}

[b-pnejel1uxa] .tree-node-card.selected {
    background-color: rgba(var(--mud-palette-success-rgb), 0.12);
    border-left: 3px solid var(--mud-palette-success);
}

/* Inactive items are grayed out */
[b-pnejel1uxa] .tree-node-card.inactive {
    opacity: 0.5;
    background-color: var(--mud-palette-background-grey);
}

[b-pnejel1uxa] .tree-node-card.inactive:hover {
    opacity: 0.65;
}

/* Children container - use ::deep because TreeEditorLevel is a child component */
[b-pnejel1uxa] .tree-children {
    margin-left: 12px;
    padding-left: 12px;
    border-left: 2px solid var(--mud-palette-lines-default);
    min-height: 8px;
}

/* Drag handle */
[b-pnejel1uxa] .drag-handle {
    cursor: grab;
    opacity: 0.45;
    transition: opacity 150ms ease, background-color 150ms ease;
    width: 24px;
    height: 24px;
    border-radius: 4px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

[b-pnejel1uxa] .drag-handle:hover {
    opacity: 0.9;
    background-color: rgba(0,0,0,0.04);
}

/*
  SortableJS drag states
  SortableJS applies classes to the draggable element (.tree-node),
  but the visible row is the MudPaper (.tree-node-card). Style the card via descendants.
*/
[b-pnejel1uxa] .sortable-ghost .tree-node-card {
    opacity: 0.35 !important;
    background-color: rgba(var(--mud-palette-primary-rgb), 0.06) !important;
    border: 2px solid rgba(var(--mud-palette-primary-rgb), 0.35) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

[b-pnejel1uxa] .sortable-chosen .tree-node-card {
    box-shadow: var(--mud-elevation-6) !important;
    transform: scale(1.02);
}

[b-pnejel1uxa] .sortable-drag .tree-node-card {
    opacity: 1 !important;
    box-shadow: var(--mud-elevation-8) !important;
    background-color: var(--mud-palette-surface) !important;
}

/* Drop target highlighting - when list has items being dragged into it */
[b-pnejel1uxa] .sortable-list {
    min-height: 24px;
    padding: 4px;
    border-radius: 0 !important;
    transition: background-color 200ms ease, border-color 200ms ease;
}

    /* Empty list shows as drop zone */
    [b-pnejel1uxa] .sortable-list:empty {
        border: 2px solid rgba(var(--mud-palette-primary-rgb), 0.25) !important;
        background-color: rgba(var(--mud-palette-primary-rgb), 0.03);
        border-radius: 0 !important;
        min-height: 40px;
    }

    /* Highlight container when something is being dragged over it */
    [b-pnejel1uxa] .sortable-list.sortable-chosen-container,
    [b-pnejel1uxa] .sortable-list:has(.sortable-ghost) {
        background-color: rgba(var(--mud-palette-primary-rgb), 0.08) !important;
        border: 2px solid var(--mud-palette-primary) !important;
        border-radius: 6px;
    }

/* Font weight helper */
[b-pnejel1uxa] .font-weight-bold {
    font-weight: 600 !important;
}