/* ==========================================================================
   DLM Studio — estilos propios sobre MudBlazor.
   Tokens del sistema de diseño (ver Mockups/PortalRedesign):
   petrol #00819B · nav #0D2B33 · fondo #F6F8F8 · tinta #17242C
   ========================================================================== */

/* ---- Logo / marca ---- */
.dlm-logo {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 18px 16px 14px;
}

.dlm-logo-img {
    height: 34px;
    width: auto;
    flex: none;
}

.dlm-login-logo {
    height: 48px;
    width: auto;
    flex: none;
}

.dlm-logo-text {
    color: #fff;
    font-size: 0.95rem;
    font-weight: 700;
    letter-spacing: 0.02em;
}

/* ---- AppBar ---- */
.dlm-appbar {
    border-bottom: 1px solid var(--mud-palette-lines-default);
}

/* El appbar es fijo: el contenido principal arranca debajo de él. */
.dlm-main {
    padding-top: calc(var(--mud-appbar-height, 56px) + 24px);
}

/* ---- Navegación lateral ---- */
.dlm-drawer .mud-nav-link {
    border-left: 3px solid transparent;
    margin: 1px 0;
}

.dlm-drawer .mud-nav-link.active {
    background: rgba(0, 129, 155, 0.28);
    border-left-color: #35b3c9;
    color: #fff !important;
}

.dlm-drawer .mud-nav-link.active .mud-icon-root {
    color: #fff;
}

/* Badge de contador en el menú (p. ej. órdenes en QA pendientes de aprobar). */
.dlm-nav-badge {
    margin-left: auto;
    background: #d03b3b;
    color: #fff;
    font-size: 0.66rem;
    font-weight: 700;
    border-radius: 99px;
    padding: 1px 7px;
    line-height: 1.4;
}

.dlm-logout-form {
    display: flex;
    align-items: center;
    margin-left: 4px;
}

/* ---- Menú de usuario ---- */
/* Avatar + nombre de la barra superior: enlace a Min konto. */
.dlm-usermenu-activator {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    padding: 4px 6px;
    border-radius: 8px;
    text-decoration: none;
    color: inherit;
}

.dlm-usermenu-activator:hover {
    background: var(--mud-palette-action-default-hover);
}

.dlm-usermenu-text {
    display: flex;
    flex-direction: column;
    line-height: 1.15;
    text-align: left;
}

.dlm-usermenu-name {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--mud-palette-text-primary);
}


/* Mensajes de la API con varias líneas (llegan separados por saltos de línea). */
.mud-snackbar-content-message,
.mud-alert-message {
    white-space: pre-line;
}

/* ---- EHF-oversikt ---- */
.dlm-peppol {
    font-family: Cascadia Code, Consolas, monospace;
    font-size: 0.76rem;
}

.dlm-ehf-track {
    display: flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
}

.dlm-xml {
    margin: 0;
    padding: 12px;
    max-height: 55vh;
    overflow: auto;
    background: var(--mud-palette-background-gray, #eef1f2);
    border-radius: 8px;
    font-family: Cascadia Code, Consolas, monospace;
    font-size: 0.74rem;
    line-height: 1.45;
    white-space: pre;
}

/* ---- Selector de laboratorio (barra superior) ---- */
/* Aspecto de "chip" (como tenía el lab en el dashboard): píldora tintada en primary. */
.dlm-labswitch-btn {
    text-transform: none;
    font-weight: 600;
    /* Los nombres largos ("Kongsvinger Centrallaboratorium AS") no caben en un ancho fijo:
       se le deja el sitio que haya en la barra, con un tope para no comerse el resto. */
    max-width: min(32vw, 420px);
    min-width: 0;
    flex-shrink: 1;
    background: color-mix(in srgb, var(--mud-palette-primary) 10%, transparent);
    border-radius: 16px;
    padding: 3px 14px;
}

/* MudButton envuelve su contenido en .mud-button-label, que hereda el flex del botón. Sin
   min-width:0 ese envoltorio no baja de su ancho de contenido y el nombre se corta a hueso
   en vez de terminar en puntos suspensivos. */
.dlm-labswitch-btn .mud-button-label {
    min-width: 0;
}

.dlm-labswitch-btn .mud-button-icon-start {
    flex-shrink: 0;
}

/* El recorte va en el nombre, no en el botón: dentro de un contenedor flex el texto suelto
   se corta sin puntos suspensivos, y el icono debe quedarse entero. */
.dlm-labswitch-name {
    display: block;
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}


/* ---- Diálogo de cambio de laboratorio ---- */
.dlm-lab-list {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

/* Fila del selector: el form-button ocupa el ancho; la estrella (lab default) a la derecha. */
.dlm-lab-row {
    display: flex;
    align-items: center;
    gap: 4px;
}

.dlm-lab-row form {
    flex: 1;
    min-width: 0;
}

/* La estrella del laboratorio por defecto va deshabilitada -ya es el default, no hay nada que
   marcar- y salía en el gris de deshabilitado, que es justo lo contrario de resaltarla.
   MudBlazor pinta ese gris con `!important` (.mud-button-root:disabled), así que no hay
   especificidad que valga: el amarillo tiene que ir también con !important. */
.dlm-lab-star.active,
.dlm-lab-star.active:disabled {
    color: #E2A800 !important;
}

.dlm-lab-item {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 9px 12px;
    border: 1px solid transparent;
    border-radius: 8px;
    background: transparent;
    color: var(--mud-palette-text-primary);
    font: inherit;
    font-size: 0.9rem;
    cursor: pointer;
    text-align: left;
}

.dlm-lab-item:hover:not(:disabled) {
    background: var(--mud-palette-action-default-hover);
    border-color: var(--mud-palette-primary);
}

.dlm-lab-item:disabled {
    cursor: default;
}

.dlm-lab-item.current {
    color: var(--mud-palette-primary);
    font-weight: 600;
}

.dlm-lab-name {
    flex: 1;
}

/* ---- KPI cards ---- */
.dlm-card-title {
    color: var(--mud-palette-text-secondary);
    line-height: 1.4;
}

.dlm-kpi-value {
    font-variant-numeric: tabular-nums;
    margin-top: 2px;
}

/* Tarjetas KPI: misma altura en toda la fila (el MudItem estira por defecto;
   sin esto la tarjeta con menos contenido — p. ej. Omsetning sin delta — queda
   más baja que sus vecinas). */
.dlm-kpi {
    height: 100%;
    display: flex;
    flex-direction: column;
}

/* ---- Arbeidsliste ---- */
.dlm-search-field {
    max-width: 240px;
}

.dlm-cell-sub {
    font-size: 0.72rem;
    color: var(--mud-palette-text-secondary);
}

.dlm-date {
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.dlm-actions-cell {
    white-space: nowrap;
}

/* Dos columnas fijas: Start/Avslutt siempre en la primera, Utfør en la segunda.
   Así los botones quedan alineados verticalmente aunque la fila tenga una sola acción. */
.dlm-actions {
    display: grid;
    grid-template-columns: 104px 104px;
    gap: 8px;
    justify-content: end;
}

.dlm-actions .mud-button-root {
    height: 30px;
    white-space: nowrap;
}

/* El botón secundario "Utfør" en tono neutro para no competir con la acción principal. */
.dlm-btn-execute {
    color: var(--mud-palette-text-secondary) !important;
    border-color: var(--mud-palette-lines-default) !important;
}

.dlm-btn-execute:hover {
    color: var(--mud-palette-primary) !important;
    border-color: var(--mud-palette-primary) !important;
}

/* Franja de estado en el borde izquierdo de cada fila. */
.dlm-work-row td:first-child {
    border-left: 3px solid transparent;
}

.dlm-row-crit td:first-child {
    border-left-color: var(--mud-palette-error);
}

.dlm-row-run td:first-child {
    border-left-color: var(--mud-palette-primary);
}

/* ---- Detalle de orden ---- */

/* Los badges de las pestañas sobresalen del texto: sin esto la pestaña los recorta. */
.mud-tabs .mud-tabs-toolbar,
.mud-tabs .mud-tabs-toolbar-content,
.mud-tabs .mud-tabs-toolbar-wrapper,
.mud-tabs .mud-tab {
    overflow: visible;
}

.mud-tab .mud-badge {
    margin-left: 4px;
}

/* Pestañas compactas (orden y editores de cliente, paciente y producto). MudTabs impone 160px
   por pestaña (MinimumTabWidth, a 0 en cada MudTabs que usa esta clase) y con eso aparecía el
   scroll horizontal que ocultaba pestañas. Más juntas y con letra algo menor; si aún no caben,
   fuera los iconos. */
.dlm-compact-tabs {
    container-type: inline-size;
}

.dlm-compact-tabs .mud-tab {
    padding: 6px 10px;
    font-size: .8125rem;
    letter-spacing: .02em;
}

.dlm-compact-tabs .mud-tab .mud-tab-icon-text {
    font-size: 1.15rem;
    margin-inline-end: 6px !important;
}

/* El contador va en línea tras el texto, no flotando en la esquina: flotando pisaba la pestaña
   siguiente en cuanto tenía dos o tres cifras. */
.dlm-compact-tabs .mud-tab-badge .mud-badge-wrapper {
    position: static;
    display: inline-flex;
}

.dlm-compact-tabs .mud-tab-badge .mud-badge {
    position: static;
    transform: none;
    inset: auto;
    margin: 0 0 0 6px;
}

@container (max-width: 840px) {
    .dlm-compact-tabs .mud-tab {
        padding: 6px 8px;
    }

    .dlm-compact-tabs .mud-tab .mud-tab-icon-text {
        display: none;
    }
}

.dlm-req-desc {
    color: var(--mud-palette-text-secondary);
    font-weight: 400;
}

.dlm-steps {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px;
}

.dlm-step {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--mud-palette-text-disabled);
    white-space: nowrap;
}

.dlm-step i {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 2px solid var(--mud-palette-lines-default);
    background: var(--mud-palette-surface);
    font-style: normal;
    font-size: 0.66rem;
}

.dlm-step.done {
    color: var(--mud-palette-primary-darken);
}

.dlm-step.done i {
    background: var(--mud-palette-primary);
    border-color: var(--mud-palette-primary);
    color: #fff;
}

.dlm-step.cur {
    color: var(--mud-palette-text-primary);
}

.dlm-step.cur i {
    border-color: var(--mud-palette-primary);
    color: var(--mud-palette-primary);
    font-weight: 800;
}

.dlm-step-line {
    width: 30px;
    height: 2px;
    background: var(--mud-palette-lines-default);
    margin: 0 6px;
    flex: none;
}

.dlm-step-line.done {
    background: var(--mud-palette-primary);
}

.dlm-proc-list {
    list-style: none;
    margin: 0;
    padding: 0;
    font-size: 0.85rem;
}

.dlm-proc-list li {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 7px 0;
    border-bottom: 1px dashed var(--mud-palette-lines-default);
    min-height: 40px;
}

.dlm-proc-list li:last-child {
    border-bottom: 0;
}

.dlm-proc-list i {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    flex: none;
    font-style: normal;
    font-size: 0.6rem;
    font-weight: 800;
}

.dlm-proc-list .done i {
    background: var(--mud-palette-primary);
    color: #fff;
}

.dlm-proc-list .run i {
    border: 2px solid var(--mud-palette-primary);
    color: var(--mud-palette-primary);
}

.dlm-proc-list .todo i {
    border: 2px solid var(--mud-palette-lines-default);
}

.dlm-proc-list .todo {
    color: var(--mud-palette-text-secondary);
}

.dlm-proc-name {
    font-weight: 600;
}

.dlm-proc-list .todo .dlm-proc-name {
    font-weight: 400;
}

.dlm-proc-meta {
    margin-left: auto;
    color: var(--mud-palette-text-secondary);
    font-size: 0.72rem;
    white-space: nowrap;
}

.dlm-comment {
    border-left: 3px solid var(--mud-palette-primary);
    padding: 4px 0 4px 12px;
    margin-bottom: 12px;
    font-size: 0.88rem;
}

.dlm-comment-head {
    display: flex;
    gap: 10px;
    align-items: baseline;
}

.dlm-comment-head span {
    color: var(--mud-palette-text-secondary);
    font-size: 0.72rem;
}

.dlm-fact {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    font-size: 0.82rem;
    padding: 3px 0;
    color: var(--mud-palette-text-secondary);
}

.dlm-fact b {
    color: var(--mud-palette-text-primary);
    font-variant-numeric: tabular-nums;
}

/* Línea de producto del resumen: el nombre puede ser largo y no debe empujar al importe,
   que se queda a la derecha con el resto de las cifras. */
.dlm-fact-line > span:first-child {
    min-width: 0;
    color: var(--mud-palette-text-primary);
}

.dlm-fact-line > span:last-child {
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.dlm-fact-qty {
    color: var(--mud-palette-text-secondary);
    margin-left: 6px;
}

.dlm-num {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

/* ---- Ny ordre: wizard ---- */
.dlm-wiz {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.dlm-wiz-step {
    flex: 1 1 180px;
    border-radius: 10px;
    padding: 10px 14px;
    background: var(--mud-palette-background-gray, #eef1f2);
    border: 1px solid transparent;
    color: var(--mud-palette-text-disabled);
    font-size: 0.8rem;
    cursor: default;
}

.dlm-wiz-step b {
    display: block;
    color: inherit;
}

.dlm-wiz-step span {
    font-size: 0.72rem;
}

.dlm-wiz-step.done {
    background: var(--mud-palette-primary-hover, rgba(0, 129, 155, 0.12));
    color: var(--mud-palette-primary-darken);
    cursor: pointer;
}

.dlm-wiz-step.cur {
    background: var(--mud-palette-surface);
    border-color: var(--mud-palette-primary);
    color: var(--mud-palette-text-primary);
}

/* El cuerpo del wizard reserva altura mínima y la botonera queda pegada abajo:
   Forrige/Neste no cambian de posición entre pasos. */
.dlm-wiz-body {
    min-height: calc(100vh - 350px);
}

.dlm-wiz-footer {
    position: sticky;
    bottom: 0;
    z-index: 5;
    background: var(--mud-palette-background);
    border-top: 1px solid var(--mud-palette-lines-default);
    padding: 12px 0;
    margin-top: 16px;
}

/* ---- Ny ordre: odontograma FDI ---- */
.dlm-odo {
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: center;
    overflow-x: auto;
    padding-bottom: 4px;
}

.dlm-odo-row {
    display: flex;
    gap: 4px;
}

.dlm-odo-mid {
    width: 12px;
    flex: none;
}

.dlm-tooth {
    width: 32px;
    height: 40px;
    border: 1.5px solid var(--mud-palette-lines-default);
    border-radius: 7px 7px 11px 11px;
    background: var(--mud-palette-surface);
    font: inherit;
    font-size: 0.66rem;
    font-weight: 700;
    color: var(--mud-palette-text-secondary);
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding-bottom: 4px;
    cursor: pointer;
    transition: background 0.1s, border-color 0.1s;
}

.dlm-odo-row.low .dlm-tooth {
    border-radius: 11px 11px 7px 7px;
    align-items: flex-start;
    padding: 4px 0 0;
}

.dlm-tooth:hover {
    border-color: var(--mud-palette-primary);
}

.dlm-tooth.sel {
    background: var(--mud-palette-primary);
    border-color: var(--mud-palette-primary-darken);
    color: #fff;
    box-shadow: 0 3px 8px -2px rgba(0, 100, 125, 0.5);
}

.dlm-tooth:focus-visible {
    outline: 2px solid var(--mud-palette-primary);
    outline-offset: 2px;
}

.dlm-tooth-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 26px;
    padding: 1px 6px;
    border-radius: 6px;
    background: var(--mud-palette-primary-hover, rgba(0, 129, 155, 0.12));
    color: var(--mud-palette-primary-darken);
    font-size: 0.7rem;
    font-weight: 700;
}

.dlm-line-price {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    min-width: 110px;
}

.dlm-line-price span {
    font-size: 0.68rem;
    color: var(--mud-palette-text-secondary);
}

.dlm-line-price b {
    font-variant-numeric: tabular-nums;
}

/* Precio de partida cuando la línea lleva descuento: tachado y en gris, para que se vea
   de dónde sale el importe final. */
.dlm-line-price-was {
    text-decoration: line-through;
    opacity: 0.7;
    font-variant-numeric: tabular-nums;
}

.dlm-w-110 {
    max-width: 110px;
}

/* Tarjetas de un mismo renglón del wizard con igual altura. */
.dlm-card-fill {
    height: 100%;
}

.dlm-w-160 {
    max-width: 160px;
}

/* Campos de fecha: con el botón de limpiar hay dos iconos a la derecha, así que
   160px recortaban la fecha ("01.01.202"). */
.dlm-date-field {
    max-width: 195px;
    min-width: 175px;
}

.dlm-w-180 {
    max-width: 180px;
}

/* ---- Listas largas: la página no scrollea; scrollea el área de datos ----
   Uso suelto (Arbeidsliste, Godkjenning): límite por offset de viewport. */
.dlm-scroll-area {
    overflow-y: auto;
    max-height: calc(100vh - var(--dlm-scroll-offset, 340px));
}

.dlm-table-scroll .mud-table-container {
    overflow-y: auto;
    max-height: calc(100vh - var(--dlm-scroll-offset, 340px));
}

/* ---- Página a viewport completo (Fakturering) ----
   La página ocupa exactamente el alto disponible bajo el appbar; el título y la
   barra de pestañas quedan fijos y el área de datos de cada pestaña se lleva el
   resto con su propio scroll. Sin offsets mágicos: todo por flex. */
.dlm-page-fill {
    height: calc(100vh - var(--mud-appbar-height, 56px) - 48px);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    min-height: 0;
}

.dlm-page-fill > .mud-tabs {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

/* El panel activo de MudTabs es display:contents (verificado en el DOM): no puede
   contener flex ni scroll. Se hace flex al propio .mud-tabs-panels — con
   display:contents, los hijos del panel pasan a ser sus items directos — y el
   padding del panel (PanelClass, que display:contents ignora) se aplica aquí. */
.dlm-page-fill .mud-tabs-panels {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    padding: 16px;
}

.dlm-page-fill .dlm-scroll-area {
    flex: 1 1 auto;
    min-height: 0;
    max-height: none;
    overflow-y: auto;
}

.dlm-page-fill .dlm-table-scroll {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

.dlm-page-fill .dlm-table-scroll .mud-table-container {
    flex: 1 1 auto;
    min-height: 0;
    max-height: none;
    overflow-y: auto;
}

/* ---- Fakturering: grupos por cliente ---- */
.dlm-invgroup-head {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 6px 12px;
}

.dlm-invgroup-meta {
    margin-left: auto;
    color: var(--mud-palette-text-secondary);
    font-size: 0.82rem;
    font-variant-numeric: tabular-nums;
}

/* table-layout fixed + anchos por columna: todos los grupos comparten
   exactamente las mismas columnas y quedan alineados entre sí. */
.dlm-invgroup-tbl {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.85rem;
    table-layout: fixed;
}

.dlm-invgroup-tbl td {
    padding: 4px 12px;
    border-top: 1px solid var(--mud-palette-lines-default);
    vertical-align: middle;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dlm-invgroup-tbl td:nth-child(1) { width: 44px; }
.dlm-invgroup-tbl td:nth-child(2) { width: 100px; }
/* td 3 (beskrivelse): ancho restante */
.dlm-invgroup-tbl td:nth-child(4) { width: 26%; }
.dlm-invgroup-tbl td:nth-child(5) { width: 110px; text-align: right; }
.dlm-invgroup-tbl td:nth-child(6) { width: 130px; text-align: right; }

.dlm-invgroup-check {
    width: 44px;
}

/* ---- Detalle expandible de factura ---- */
.dlm-row-click {
    cursor: pointer;
}

/* Tablas del detalle: layout propio (sin heredar los anchos de la lista de grupos).
   La descripción se lleva el espacio libre; número/fecha e importes, ancho fijo. */
.dlm-detail-tbl {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.82rem;
    table-layout: fixed;
}

.dlm-detail-tbl td {
    padding: 5px 10px;
    border-top: 1px solid var(--mud-palette-lines-default);
    vertical-align: middle;
}

.dlm-detail-tbl tr:first-child td {
    border-top: 0;
}

.dlm-detail-tbl .col-num {
    width: 92px;
    white-space: nowrap;
}

.dlm-detail-tbl .col-chip {
    width: 150px;
    white-space: nowrap;
}

.dlm-detail-tbl .col-text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dlm-detail-tbl .col-patient {
    width: 24%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dlm-detail-tbl .col-amount {
    width: 112px;
    text-align: right;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.dlm-inv-detail {
    background: var(--mud-palette-background);
    padding: 12px 20px !important;
}

.dlm-inv-detail-grid {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 24px;
    align-items: start;
}

@media (max-width: 900px) {
    .dlm-inv-detail-grid {
        grid-template-columns: 1fr;
    }
}

.dlm-w-140 {
    max-width: 140px;
}

.dlm-w-220 {
    max-width: 220px;
}

.dlm-w-320 {
    max-width: 320px;
}

.dlm-maxw-720 {
    max-width: 720px;
}

/* ---- Konfigurasjon ---- */
.dlm-logo-box {
    display: flex;
    align-items: center;
    gap: 24px;
    padding: 14px 16px;
    border: 1px dashed var(--mud-palette-lines-default);
    border-radius: 6px;
    /* The large drop zone takes the rest of the row (02/10/2026: large zones for inexperienced users). */
    width: 100%;
    max-width: 760px;
    flex-wrap: wrap;
}

.dlm-logo-box .dlm-dropzone-wrap {
    flex: 1 1 260px;
    width: auto;
}

.dlm-logo-box img {
    max-width: 200px;
    max-height: 80px;
    object-fit: contain;
}

.dlm-installer-meta {
    margin-left: auto;
    padding-left: 16px;
    font-size: 11px;
    opacity: 0.85;
    text-transform: none;
}

/* ---- Min lisens ---- */
.dlm-lic-page {
    max-width: 60em;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.dlm-lic-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 2.5em;
    margin-top: 8px;
}

.dlm-lic-stat {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.dlm-lic-stat > span {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    color: var(--mud-palette-text-secondary);
}

.dlm-lic-stat > b {
    font-size: 1.1em;
}

.dlm-lic-modules {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(24em, 1fr));
    gap: 8px;
    margin-top: 8px;
}

.dlm-lic-module {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 6px;
    padding: 8px 12px;
    color: var(--mud-palette-text-secondary);
}

.dlm-lic-module.on {
    border-color: var(--mud-palette-success);
    background-color: color-mix(in srgb, var(--mud-palette-success) 8%, transparent);
    color: var(--mud-palette-text-primary);
}

.dlm-lic-module.pending {
    border-color: var(--mud-palette-info);
    background-color: color-mix(in srgb, var(--mud-palette-info) 8%, transparent);
    color: var(--mud-palette-text-primary);
}

.dlm-lic-module-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
    flex: 1;
}

.dlm-lic-module-name {
    font-weight: 600;
    font-size: 0.95em;
}

.dlm-lic-module-desc {
    font-size: 0.8em;
    opacity: 0.8;
    overflow-wrap: break-word;
    line-height: 1.35;
}

.dlm-lic-support {
    display: flex;
    flex-wrap: wrap;
    gap: 2.5em;
    margin-top: 8px;
}

.dlm-lic-support a {
    display: inline-flex;
    align-items: center;
    font-weight: 600;
}

/* ---- Editor de standardordre: secciones con acento de color ---- */
.dlm-std-section {
    border: 1px solid var(--mud-palette-lines-default);
    border-left: 4px solid var(--mud-palette-primary);
    border-radius: 6px;
    padding: 12px 16px 16px 16px;
    margin-top: 16px;
    background-color: color-mix(in srgb, var(--mud-palette-primary) 4%, transparent);
}

.dlm-std-section.materials {
    border-left-color: var(--mud-palette-info);
    background-color: color-mix(in srgb, var(--mud-palette-info) 4%, transparent);
}

.dlm-std-section.procedures {
    border-left-color: var(--mud-palette-success);
    background-color: color-mix(in srgb, var(--mud-palette-success) 4%, transparent);
}

.dlm-std-section .mud-table {
    background: var(--mud-palette-surface);
}

.dlm-std-products-cell {
    min-width: 220px;
    max-width: 360px;
}

/* ---- Rapporter: columnas numéricas alineadas a la derecha ---- */
.dlm-num-col {
    text-align: right !important;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* ---- MDR 2.7: organisasjonskart ---- */
.dlm-org-palette { width: 260px; flex: 0 0 auto; max-height: calc(100vh - 330px); overflow-y: auto; padding-right: 6px; border-right: 1px solid var(--mud-palette-lines-default); }
.dlm-org-list { display: flex; flex-direction: column; gap: 3px; }
.dlm-org-chip { display: inline-flex; align-items: center; gap: 4px; padding: 3px 8px; font-size: 0.8rem; border-radius: 6px; cursor: grab;
    border: 1px solid var(--mud-palette-lines-default); background: var(--mud-palette-surface); user-select: none; }
.dlm-org-chip.role { background: #fdf3e1; border-color: #e3c58f; }
.dlm-org-chip.dept { background: #e6f2f2; }
.dlm-org-chip.placed { opacity: 0.55; }
.dlm-org-chip.picked, .dlm-org-box.picked { outline: 2px solid var(--mud-palette-primary); outline-offset: 2px; opacity: 1; }
.dlm-org-canvas.placing .dlm-org-box, .dlm-org-canvas.placing .dlm-org-rootzone { cursor: copy; }
.dlm-org-rootzone.placing { border-color: var(--mud-palette-primary); color: var(--mud-palette-primary); }
.dlm-org-canvas { min-width: 0; overflow: auto; max-height: calc(100vh - 330px); }
.dlm-org-rootzone { border: 1.5px dashed var(--mud-palette-lines-default); border-radius: 8px; padding: 8px; text-align: center;
    font-size: 0.8rem; color: var(--mud-palette-text-secondary); margin-bottom: 12px; }
.dlm-org-rootzone.over { border-color: var(--mud-palette-primary); background: var(--mud-palette-primary-hover); }
/* Classic CSS org chart: nested lists, connector lines drawn with borders. */
.dlm-org-tree { display: flex; justify-content: center; padding-bottom: 12px; }
.dlm-org-tree ul { position: relative; display: flex; justify-content: center; padding-top: 18px; margin: 0; padding-left: 0; }
.dlm-org-tree > ul { padding-top: 0; }
.dlm-org-tree li { position: relative; list-style: none; text-align: center; padding: 18px 6px 0 6px; }
.dlm-org-tree li::before, .dlm-org-tree li::after { content: ""; position: absolute; top: 0; right: 50%; width: 50%; height: 18px; border-top: 1.5px solid #9aa9b4; }
.dlm-org-tree li::after { right: auto; left: 50%; border-left: 1.5px solid #9aa9b4; }
.dlm-org-tree li:only-child::before, .dlm-org-tree li:only-child::after { display: none; }
.dlm-org-tree li:only-child { padding-top: 0; }
.dlm-org-tree li:first-child::before, .dlm-org-tree li:last-child::after { border: 0 none; }
.dlm-org-tree li:last-child::before { border-right: 1.5px solid #9aa9b4; border-radius: 0 6px 0 0; }
.dlm-org-tree li:first-child::after { border-radius: 6px 0 0 0; }
.dlm-org-tree ul ul::before { content: ""; position: absolute; top: 0; left: 50%; height: 18px; border-left: 1.5px solid #9aa9b4; }
.dlm-org-tree > ul > li { padding-top: 0; }
.dlm-org-tree > ul > li::before, .dlm-org-tree > ul > li::after { display: none; }
.dlm-org-box { display: inline-block; min-width: 130px; max-width: 200px; padding: 6px 10px 2px; border-radius: 8px; cursor: grab;
    border: 1.5px solid var(--mud-palette-primary); background: var(--mud-palette-surface); }
.dlm-org-box.dept { background: #e6f2f2; }
.dlm-org-box.role { background: #fdf3e1; border-color: #b7791f; }
.dlm-org-box.over { box-shadow: 0 0 0 3px var(--mud-palette-primary-lighten); }
.dlm-org-box.dragging { opacity: 0.5; }
.dlm-org-title { font-weight: 600; font-size: 0.85rem; }
.dlm-org-subtitle { font-size: 0.75rem; color: var(--mud-palette-text-secondary); }
.dlm-org-notes { font-size: 0.72rem; font-style: italic; color: var(--mud-palette-text-secondary); margin-top: 4px; padding-top: 4px; border-top: 1px dotted var(--mud-palette-lines-default); white-space: pre-line; text-align: left; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.dlm-org-tags { display: flex; flex-wrap: wrap; justify-content: center; gap: 3px; margin-top: 3px; }
.dlm-org-tag { display: inline-flex; align-items: center; gap: 3px; padding: 0 7px; font-size: 0.72rem; line-height: 18px;
    border-radius: 9px; background: #fdf3e1; border: 1px solid #e3c58f; color: #7a4f10; }
.dlm-org-tag-x { cursor: pointer; font-weight: 600; opacity: 0.6; }
.dlm-org-tag-x:hover { opacity: 1; }
.dlm-org-kind { color: var(--mud-palette-text-secondary); }
.dlm-org-actions { display: flex; justify-content: center; opacity: 0; transition: opacity .15s; }
.dlm-org-box:hover .dlm-org-actions { opacity: 1; }
.dlm-org-actions .mud-icon-button { padding: 2px; }

/* ---- MDR 4.2: class on each device family ---- */
.dlm-risk-class { font-size: 0.72rem; font-weight: 600; padding: 1px 7px; border-radius: 10px;
    background: var(--mud-palette-primary); color: var(--mud-palette-primary-text); }
.dlm-risk-class.none { background: transparent; color: var(--mud-palette-warning); border: 1px solid var(--mud-palette-warning); font-weight: 500; }
/* MDR 4.2 family editor (24/10/2026): product picker grouped by product group. */
.dlm-fam-picker { border: 1px solid var(--mud-palette-lines-default); border-radius: var(--mud-default-borderradius); max-height: 52vh; overflow-y: auto; }
.dlm-fam-group { display: flex; align-items: center; gap: 2px; padding: 2px 8px 2px 2px; background: var(--mud-palette-background-gray); position: sticky; top: 0; z-index: 1; border-bottom: 1px solid var(--mud-palette-lines-default); }
.dlm-fam-group-name { font-weight: 600; flex: 1 1 auto; cursor: pointer; }
.dlm-fam-group-count { color: var(--mud-palette-text-secondary); font-size: 0.85em; }
.dlm-fam-row { display: flex; align-items: center; gap: 6px; padding: 0 8px 0 34px; min-height: 34px; border-bottom: 1px solid var(--mud-palette-table-lines); }
.dlm-fam-row-moving { background: rgba(var(--mud-palette-warning-rgb), 0.08); }
.dlm-fam-num { color: var(--mud-palette-text-secondary); font-size: 0.85em; min-width: 44px; }
.dlm-fam-name { flex: 1 1 auto; }

/* ---- Dashboard: prosedyrer per medarbeider ---- */
.dlm-stats-table th.dlm-num, .dlm-stats-table td.dlm-num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.dlm-stats-row-group { cursor: pointer; }
.dlm-stats-child td { color: var(--mud-palette-text-secondary); font-size: 0.82rem; }
.dlm-stats-bar { display: inline-block; width: 70px; height: 6px; margin-right: 6px; vertical-align: middle; border-radius: 3px; background: var(--mud-palette-lines-default); overflow: hidden; }
.dlm-stats-bar > span { display: block; height: 100%; background: var(--mud-palette-primary); }

/* ---- MDR ---- */
/* The tree tab fills the viewport (PO 23/10/2026): the page itself does not scroll; the tree
   scrolls on the left and the point panel on the right, and the file table has its own scroll
   with a fixed header, so a point with many documents does not push its buttons off screen. */
.dlm-mdr-layout {
    /* !important: the markup also carries MudBlazor's .align-start, which is !important and would
       keep the tree at its content height (no scroll). */
    align-items: stretch !important;
    /* The layout starts ~256px down (appbar, compact header, the two rows of MDR tabs); flex children
       need min-height: 0 or they keep their content height and nothing scrolls. */
    height: calc(100vh - 290px);
    min-height: 420px;
}

.dlm-mdr-layout > .flex-grow-1 {
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow-y: auto;
    padding-right: 4px;
}

/* In a column flex box every child is stretched to the full width and may be shrunk in height:
   the jump buttons («Åpne organisasjonskartet»...) became thin full-width bars. Children keep
   their natural height; buttons keep their natural width. */
.dlm-mdr-layout > .flex-grow-1 > * {
    flex-shrink: 0;
}

.dlm-mdr-layout > .flex-grow-1 > .mud-button-root {
    align-self: flex-start;
}

.dlm-mdr-files {
    display: flex;
    flex-direction: column;
    flex: 1 0 auto;
    min-height: 260px;
}

.dlm-mdr-files .dlm-mdr-filetable .mud-table-container {
    max-height: calc(100vh - var(--dlm-scroll-offset, 420px));
    min-height: 180px;
}

.dlm-procdocs .mud-icon-button {
    margin-left: 2px;
    vertical-align: middle;
}

/* The point panel may shrink below its content (flex items default to min-width: auto): a long
   file name without spaces used to widen the file table past the page and push the action
   buttons off screen. The name now breaks anywhere instead. */
.dlm-mdr-layout > .flex-grow-1 {
    min-width: 0;
}

/* At laptop widths the file table scrolls sideways; its action buttons stay pinned to the right
   edge so they are always reachable. */
.dlm-mdr-layout td.dlm-actions-cell,
.dlm-mdr-layout table:has(td.dlm-actions-cell) thead th:last-child {
    position: sticky;
    right: 0;
    z-index: 1;
    background: var(--mud-palette-surface);
    box-shadow: -6px 0 8px -6px rgba(0, 0, 0, 0.15);
}

.dlm-mdr-layout td.dlm-mdr-filename,
.dlm-mdr-layout td:has(> .d-flex.flex-wrap > .mud-icon-root:first-child) {
    overflow-wrap: anywhere;
    min-width: 160px;
}

.dlm-mdr-tree {
    width: 460px;
    flex: 0 0 auto;
    border-right: 1px solid var(--mud-palette-lines-default);
    padding-right: 12px;
    min-height: 0;
    overflow-y: auto;
}

.dlm-mdr-chevron {
    display: inline-flex;
    cursor: pointer;
    flex: 0 0 auto;
}

/* Editor enriquecido ligero (contenteditable) */
.dlm-rich-btn {
    border: 1px solid var(--mud-palette-lines-default);
    background: var(--mud-palette-surface);
    border-radius: 4px;
    padding: 2px 6px;
    cursor: pointer;
    line-height: 1;
}

.dlm-rich-btn:hover {
    background: rgba(0, 129, 155, 0.08);
}

.dlm-rich-editor {
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 6px;
    background: var(--mud-palette-surface);
    min-height: 420px;
    max-height: 60vh;
    overflow-y: auto;
    padding: 12px 16px;
    margin-top: 6px;
    font-size: 0.875rem;
}

.dlm-rich-editor:focus {
    outline: none;
    border-color: var(--mud-palette-primary);
}

.dlm-rich-editor img {
    max-width: 100%;
}

/* Lectura de la sjekkliste en Til godkjenning: misma caja que el editor MDR pero
   sin edición y con altura pensada para un diálogo. */
.dlm-rich-readonly {
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 6px;
    background: var(--mud-palette-surface);
    min-height: 80px;
    max-height: 45vh;
    overflow-y: auto;
    padding: 12px 16px;
    margin-top: 6px;
    font-size: 0.875rem;
}

.dlm-rich-readonly img {
    max-width: 100%;
}

.dlm-mdr-node {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 5px 10px;
    border-radius: 6px;
    cursor: pointer;
    user-select: none;
}

.dlm-mdr-node:hover {
    background: rgba(0, 129, 155, 0.08);
}

.dlm-mdr-node.picked {
    background: rgba(0, 129, 155, 0.14);
}

.dlm-mdr-node.branch .dlm-mdr-title {
    font-weight: 600;
}

.dlm-mdr-title {
    flex: 1;
    font-size: 0.875rem;
}

.dlm-mdr-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex: 0 0 auto;
}

.dlm-mdr-dot.green { background: var(--mud-palette-success); }
.dlm-mdr-dot.amber { background: var(--mud-palette-warning); }
.dlm-mdr-dot.red { background: var(--mud-palette-error); }

.dlm-mdr-preview {
    max-height: 320px;
    overflow-y: auto;
}

.dlm-mdr-preview img {
    max-width: 100%;
}

.dlm-task-overdue td {
    background: color-mix(in srgb, var(--mud-palette-error) 6%, transparent);
}

/* Filtros de informes: anchos uniformes para que la fila fluya alineada */
.dlm-filter-date {
    width: 160px;
    flex: 0 0 auto;
}

.dlm-filter-field {
    width: 240px;
    flex: 0 0 auto;
}

/* ---- Dashboard económico ---- */
.dlm-kpi-sub {
    font-size: 0.72rem;
    color: var(--mud-palette-text-secondary);
}

.dlm-delta {
    font-size: 0.74rem;
    font-weight: 700;
}

.dlm-delta span {
    font-weight: 400;
    color: var(--mud-palette-text-secondary);
}

.dlm-delta.up {
    color: var(--mud-palette-success);
}

.dlm-delta.down {
    color: var(--mud-palette-error);
}

.dlm-critical {
    color: var(--mud-palette-error);
}

/* Gráfico de omsetning (SVG inline) */
.dlm-chart {
    width: 100%;
    height: auto;
    display: block;
    margin-top: 6px;
}

.dlm-chart-grid {
    stroke: var(--mud-palette-lines-default);
    stroke-width: 1;
}

.dlm-chart-axis-line {
    stroke: var(--mud-palette-text-disabled);
    stroke-width: 1;
}

.dlm-chart-axis,
.dlm-chart-label {
    fill: var(--mud-palette-text-secondary);
    font-size: 11px;
    font-variant-numeric: tabular-nums;
}

.dlm-chart-label-current,
.dlm-chart-value {
    fill: var(--mud-palette-text-primary);
    font-size: 11px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.dlm-bar {
    fill: #79bcca;
}

.dlm-bar-current {
    fill: var(--mud-palette-primary);
}

/* Aldersfordeling (aging) */
.dlm-aging {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.dlm-aging-row {
    display: flex;
    align-items: center;
    gap: 10px;
}

.dlm-aging-label {
    flex: 0 0 92px;
    font-size: 0.8rem;
}

.dlm-aging-bar {
    flex: 1;
}

.dlm-aging-amount {
    flex: 0 0 92px;
    text-align: right;
    font-size: 0.8rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

/* ---- Flaskehalser (cuellos de botella) ---- */
.dlm-bottleneck-row {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
}

.dlm-bottleneck-name {
    flex: 0 0 130px;
    font-size: 0.85rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dlm-bottleneck-bar {
    flex: 1;
}

.dlm-bottleneck-count {
    flex: none;
    min-width: 26px;
    text-align: right;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    font-size: 0.85rem;
}

/* ---- Login ---- */
.dlm-login-page {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #0d2b33;
    background-image: radial-gradient(ellipse at 20% -10%, rgba(0, 129, 155, 0.35), transparent 55%),
        radial-gradient(ellipse at 110% 110%, rgba(0, 129, 155, 0.2), transparent 50%);
    padding: 24px;
}

.dlm-login-card {
    width: 100%;
    max-width: 400px;
    background: #fff;
    border-radius: 14px;
    padding: 34px 36px 30px;
    box-shadow: 0 24px 60px -24px rgba(4, 26, 32, 0.7);
}

.dlm-login-brand {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 26px;
}

.dlm-login-title {
    font-size: 1.15rem;
    font-weight: 700;
    color: #17242c;
    line-height: 1.2;
}

.dlm-login-subtitle {
    font-size: 0.76rem;
    color: #51626d;
}

.dlm-field-label {
    display: block;
    font-size: 0.78rem;
    font-weight: 600;
    color: #51626d;
    margin: 14px 0 5px;
}

.dlm-input {
    width: 100%;
    box-sizing: border-box;
    border: 1px solid #ccd6d9;
    border-radius: 8px;
    padding: 10px 13px;
    font: inherit;
    font-size: 0.9rem;
    color: #17242c;
    background: #fff;
    transition: border-color 0.15s, box-shadow 0.15s;
}

.dlm-input:focus {
    outline: none;
    border-color: #00819b;
    box-shadow: 0 0 0 3px rgba(0, 129, 155, 0.18);
}

.dlm-input-code {
    font-size: 1.3rem;
    letter-spacing: 0.4em;
    text-align: center;
}

.dlm-btn-primary {
    width: 100%;
    margin-top: 22px;
    background: #00819b;
    color: #fff;
    border: 0;
    border-radius: 8px;
    padding: 11px 0;
    font: inherit;
    font-size: 0.92rem;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.15s;
}

.dlm-btn-primary:hover {
    background: #00647d;
}

.dlm-btn-primary:focus-visible {
    outline: 2px solid #00819b;
    outline-offset: 2px;
}

/* ===== Barra superior: acciones core (Ny ordre + búsqueda de orden) ===== */

/* El botón de nueva orden usa el verde de marca (punto del logo) para destacar
   sobre la barra petrol; es la acción principal de toda la aplicación. */
.dlm-newordre-btn {
    margin-right: 16px;
    background-color: #00E497 !important;
    color: #0D2B33 !important;
    font-weight: 600;
    margin-left: 8px;
    white-space: nowrap;
}

.dlm-newordre-btn:hover {
    background-color: #00c381 !important;
}

/* Búsqueda global por número de orden. El appbar es claro (blanco) en modo claro,
   así que el campo hereda los colores del tema para mantener el contraste. */
.dlm-order-search {
    max-width: 230px;
    margin-left: 32px !important;
}

.dlm-order-search .mud-input,
.dlm-order-search .mud-input input {
    color: var(--mud-palette-text-primary);
}

.dlm-order-search .mud-input-adornment .mud-icon-root {
    color: var(--mud-palette-text-secondary);
}

.dlm-order-search .mud-input input::placeholder {
    color: var(--mud-palette-text-secondary);
    opacity: 0.8;
}

/* ===== Menú lateral por categorías (estructura del portal) ===== */

/* Título de grupo al mismo peso visual que un link raíz. */
.dlm-drawer .mud-nav-group > .mud-nav-link {
    border-left: 3px solid transparent;
}

/* Los subitems se sangran ligeramente para leerse como parte de la categoría. */
.dlm-drawer .mud-nav-group .mud-navgroup-collapse .mud-nav-link {
    padding-left: 36px;
}

/* Ítems aún no migrados: presentes pero claramente inactivos. */
.dlm-drawer .mud-nav-link.mud-nav-link-disabled {
    opacity: 0.38;
}

/* ===== Detalle de orden: alta múltiple de materiales ===== */
.dlm-mat-list {
    max-height: 220px;
    overflow-y: auto;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 4px;
    padding: 4px 8px;
}

.dlm-mat-row {
    line-height: 1.2;
}

.dlm-mat-name {
    min-width: 160px;
    font-weight: 500;
}

/* Paso 2 del wizard: prosedyrer/materialer que cargará cada línea */
.dlm-line-sub {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    margin-top: 4px;
    font-size: 0.8rem;
    color: var(--mud-palette-text-secondary);
}

.dlm-line-sub-label {
    font-weight: 600;
}

/* Diálogo de materiales: lista clicable y filas de selección */
.dlm-mat-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 5px 8px;
    border-radius: 4px;
    cursor: pointer;
    user-select: none;
}

.dlm-mat-row:hover {
    background: rgba(0, 129, 155, 0.08);
}

.dlm-mat-row.picked {
    background: rgba(0, 129, 155, 0.12);
}

.dlm-mat-row-name {
    flex: 1;
}

.dlm-mat-row-extra {
    font-size: 0.75rem;
    color: var(--mud-palette-text-secondary);
    white-space: nowrap;
}

.dlm-pick-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    margin-bottom: 6px;
    flex-wrap: wrap;
    background: var(--mud-palette-background);
}

/* Celdas largas (beskrivelse) recortadas con elipsis */
.dlm-cell-trim {
    max-width: 260px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ===== Dashboard: Ordresammendrag y Nyheter ===== */
.dlm-sum-row {
    display: grid;
    grid-template-columns: 1fr 40px 100px;
    gap: 8px;
    padding: 3px 0;
    font-size: 0.85rem;
    align-items: center;
}

.dlm-sum-row b { text-align: right; }

.dlm-sum-amount { text-align: right; color: var(--mud-palette-text-secondary); }

.dlm-sum-total { font-weight: 600; }

.dlm-sum-total .dlm-sum-amount { color: var(--mud-palette-text-primary); }

.dlm-nyh-list { max-height: 300px; overflow-y: auto; }

.dlm-nyh-item {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    padding: 8px;
    border-radius: 4px;
    cursor: pointer;
}

.dlm-nyh-item:hover { background: rgba(0, 129, 155, 0.08); }

.dlm-nyh-item.highlight { background: rgba(0, 228, 151, 0.10); }

.dlm-nyh-title { font-weight: 600; display: flex; align-items: center; gap: 6px; }

.dlm-nyh-new { height: 18px; font-size: 0.65rem; }

.dlm-nyh-meta { font-size: 0.75rem; color: var(--mud-palette-text-secondary); }

.dlm-nyh-body { white-space: pre-line; }

.dlm-nyh-body ul { margin: 4px 0 4px 20px; }

/* Ordresammendrag anclado: flotante, siempre visible */
.dlm-float-summary {
    position: fixed;
    right: 20px;
    bottom: 20px;
    width: 320px;
    max-height: 60vh;
    overflow-y: auto;
    padding: 12px 16px;
    z-index: 1250;
    border: 1px solid var(--mud-palette-lines-default);
    background: var(--mud-palette-surface);
}

/* Matriz de roller og rettigheter */
.dlm-rights-scroll {
    max-height: 55vh;
    overflow-y: auto;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 4px;
}

.dlm-rights-tbl {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.85rem;
}

.dlm-rights-tbl th {
    position: sticky;
    top: 0;
    background: var(--mud-palette-surface);
    text-align: left;
    padding: 8px 10px;
    border-bottom: 2px solid var(--mud-palette-lines-default);
    z-index: 1;
}

.dlm-rights-tbl th:not(:first-child),
.dlm-rights-tbl td:not(:first-child) {
    text-align: center;
    width: 90px;
}

.dlm-rights-tbl td {
    padding: 0 10px;
    border-bottom: 1px solid var(--mud-palette-lines-default);
}

.dlm-rights-tbl tr:hover td {
    background: rgba(0, 129, 155, 0.05);
}

.dlm-w-280 { width: 280px; }

/* Campos de precio en tablas: sin flechas, ancho fijo, alineados a la derecha
   y con aire respecto a la barra de scroll para que no se corten. */
.dlm-price-field {
    width: 130px;
    margin-left: auto;
}

.dlm-price-field input {
    text-align: right;
}

/* Campo numérico de formulario (días, porcentajes...): la cifra a la derecha, sin tocar el ancho. */
.dlm-num-input input {
    text-align: right;
}

.dlm-rights-tbl td:last-child {
    padding-right: 18px;
}

/* Column header of the rights matrix: label + "select all" checkbox stacked (30/09/2026). */
.dlm-rights-head {
    /* Same centring as the cells (text-align on th/td), so the header checkbox sits exactly
       above the column's checkboxes; a flex box shifted it by the checkbox's own margins. */
    display: block;
    text-align: center;
    line-height: 1.1;
}

.dlm-rights-head span { display: block; }

/* Adjuntos de la orden: tarjetas con miniatura */
.dlm-files-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 12px;
}

.dlm-file-card {
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.dlm-file-preview {
    height: 110px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--mud-palette-background);
    cursor: pointer;
    overflow: hidden;
}

.dlm-file-preview img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* El icono hace de miniatura cuando no hay imagen que enseñar, así que ocupa el hueco en
   lugar de quedarse como un adorno pequeño en medio del recuadro. */
.dlm-file-preview .mud-icon-root {
    font-size: 48px;
    width: 48px;
    height: 48px;
}

.dlm-file-meta {
    padding: 6px 10px 0 10px;
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.dlm-file-name {
    font-weight: 500;
    font-size: 0.85rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dlm-file-actions {
    display: flex;
    justify-content: flex-end;
    padding: 2px 4px 4px 4px;
}

/* Min konto: QR y códigos de respaldo */
.dlm-qr {
    min-width: 168px;
    min-height: 168px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 4px;
    padding: 8px;
}

.dlm-shared-key {
    display: inline-block;
    padding: 4px 8px;
    background: var(--mud-palette-background);
    border-radius: 4px;
    font-size: 0.9rem;
    letter-spacing: 1px;
    word-break: break-all;
}

.dlm-backup-codes {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 6px;
    margin-top: 6px;
}

.dlm-backup-codes code {
    padding: 4px 8px;
    background: var(--mud-palette-background);
    border-radius: 4px;
    text-align: center;
}

/* Versión del build al pie del menú: identifica de un vistazo qué se está
   ejecutando en cada entorno (producción, staging, acceptance). MudBlazor ya
   declara el drawer como columna flex, así que margin-top:auto la manda al fondo. */
.dlm-drawer-version {
    margin-top: auto;
    padding: 10px 16px 14px;
    font-size: 0.72rem;
    letter-spacing: 0.3px;
    color: var(--mud-palette-drawer-text);
    opacity: 0.55;
}

/* Indicador de lote de impresión en la barra superior. */
.dlm-batch-chip {
    font-variant-numeric: tabular-nums;
}

/* Recorrido del producto en la grilla: departamentos por los que pasa y prosedyrer. */
.dlm-route-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 2px;
}

.dlm-route-steps {
    font-size: 0.8rem;
    color: var(--mud-palette-text-secondary);
    white-space: nowrap;
}

/* Usuarios asignados a una avdeling: rejilla compacta de casillas. */
.dlm-dept-users {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 0 12px;
    max-height: 320px;
    overflow-y: auto;
}

/* Diálogos con solapas (journal del paciente, editor de producto...): todas las solapas
   ocupan la misma altura. Sin esto el diálogo crecía y encogía al navegar entre ellas y
   los botones bailaban por la pantalla. El contenido largo hace scroll dentro de la
   solapa, no del diálogo. */
.dlm-editor-tabs .mud-tabs-panels {
    min-height: 60vh;
    max-height: 60vh;
    overflow-y: auto;
}

@media (max-height: 800px) {
    .dlm-editor-tabs .mud-tabs-panels {
        min-height: 55vh;
        max-height: 55vh;
    }
}

/* Faktura Info: columna de canales por los que salió la factura. */
.dlm-sent-icons {
    display: flex;
    gap: 4px;
    align-items: center;
}

/* Columna de selección en las grillas con acciones en lote. */
.dlm-check-cell {
    width: 44px;
    padding-right: 0 !important;
}

/* Comentarios de una orden borrada (histórico). */
.dlm-comment-list {
    max-height: 220px;
    overflow-y: auto;
}

.dlm-comment {
    padding: 6px 0;
    border-bottom: 1px solid var(--mud-palette-lines-default);
    font-size: 0.85rem;
}

.dlm-comment:last-child {
    border-bottom: none;
}

/* Zona para soltar archivos. El <input type="file"> se estira transparente por encima:
   así el navegador entrega el drop al control en lugar de abrir el archivo en una pestaña,
   y el clic sobre la zona abre el selector sin código extra. */
/* La zona ocupa el ancho disponible: soltar un archivo tiene que ser fácil para quien no se
   maneja con el drag & drop, y una tira de texto es un blanco diminuto. La variante compacta
   vuelve al comportamiento de antes. */
.dlm-dropzone-wrap {
    position: relative;
    display: block;
    width: 100%;
}

.dlm-dropzone-wrap:has(.dlm-dropzone-compact) {
    display: inline-block;
    width: auto;
}

.dlm-dropzone-wrap .dlm-dropzone-input {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
    z-index: 2;
}

.dlm-dropzone {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 24px 16px;
    min-height: 112px;
    border: 2px dashed var(--mud-palette-primary);
    border-radius: 8px;
    color: var(--mud-palette-primary);
    background: var(--mud-palette-surface);
    transition: background-color .15s ease;
    text-align: center;
}

/* Variante de una línea, la de antes. */
.dlm-dropzone.dlm-dropzone-compact {
    flex-direction: row;
    gap: 8px;
    padding: 8px 14px;
    min-height: 0;
    border-width: 1px;
    white-space: nowrap;
}

.dlm-dropzone-wrap:hover .dlm-dropzone {
    background: var(--mud-palette-action-default-hover);
}

.dlm-dropzone-label {
    font-weight: 600;
    font-size: .875rem;
}

.dlm-dropzone-hint {
    font-size: .75rem;
    color: var(--mud-palette-text-secondary);
}

.dlm-dropzone-disabled {
    opacity: .5;
    pointer-events: none;
}

/* Journalnotater como conversación: un globo por nota, coloreado por autor. */
.dlm-thread {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.dlm-thread-row {
    display: flex;
    justify-content: flex-start;
}

.dlm-thread-row.mine {
    justify-content: flex-end;
}

.dlm-thread-bubble {
    max-width: 78%;
    padding: 8px 12px;
    border-radius: 12px;
    border: 1px solid transparent;
}

.dlm-thread-head {
    display: flex;
    align-items: baseline;
    gap: 8px;
    font-size: .75rem;
    margin-bottom: 2px;
}

.dlm-thread-head span {
    color: var(--mud-palette-text-secondary);
}

.dlm-thread-text {
    font-size: .875rem;
    white-space: pre-wrap;
}

/* Meldinger (chat con el cliente del Kundeportal): globos como en el portal y altura fija con
   scroll propio, para que un hilo largo no alargue la página. */
.dlm-chat-log {
    height: min(420px, 55vh);
    overflow-y: auto;
    padding: 12px;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 8px;
    background: var(--mud-palette-background);
}

.dlm-chat-log .dlm-thread-bubble {
    max-width: min(78%, 560px);
    border-radius: 14px;
    word-break: break-word;
}

.dlm-chat-client {
    background: var(--mud-palette-surface);
    border-color: var(--mud-palette-lines-default);
    border-bottom-left-radius: 4px !important;
}

.dlm-chat-lab {
    background: rgba(0, 129, 155, 0.1);
    border-color: rgba(0, 129, 155, 0.35);
    border-bottom-right-radius: 4px !important;
}

/* Sin mensajes (o cargando) no hace falta reservar la altura del hilo. */
.dlm-chat-log:has(> .mud-typography),
.dlm-chat-log:has(.mud-skeleton) {
    height: auto;
}

.dlm-chat-lab .dlm-thread-head b,
.dlm-chat-client .dlm-thread-head b {
    color: var(--mud-palette-primary);
}

/* ---- Informes de factura -------------------------------------------------
   El bloque de totales de cabecera reproduce el del informe de escritorio: dos
   columnas de pares etiqueta/valor que fluyen según el ancho disponible. */
.dlm-report-summary .dlm-summary-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
    gap: .35rem 2rem;
}

.dlm-summary-item {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 1rem;
    padding: .15rem 0;
}

.dlm-summary-label {
    color: var(--mud-palette-text-secondary);
    font-size: .875rem;
}

.dlm-summary-value {
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.dlm-summary-strong {
    font-weight: 600;
    color: var(--mud-palette-primary);
}

/* Columnas de PDF / Utskrift / E-post / EHF: solo llevan una marca. */
.dlm-flag-col {
    width: 3.25rem;
    text-align: center;
}

/* Selectores que comparten fila y deben seguir siendo legibles al envolver. */
.dlm-w-min-200 {
    min-width: 12.5rem;
}

/* ============================================================================
   Ayuda en producto: panel contextual (MainLayout) y centro de artículos (/hjelp).
   Los colores salen de las variables del tema de MudBlazor para que la ayuda siga
   al tema petrol/crema sin duplicar la paleta.
   ========================================================================== */

/* --- Panel lateral --- */
/* MudDrawer pinta el fondo con la paleta del cajón de navegación (petrol oscuro). Aquí no
   sirve: este panel es contenido de lectura, no navegación, y sobre el petrol el texto de
   los chips y de los títulos desaparece. Se fuerza la superficie normal, con .mud-drawer
   en el selector para ganarle en especificidad a la regla de MudBlazor. */
.mud-drawer.dlm-help-drawer {
    display: flex;
    flex-direction: column;
    background: var(--mud-palette-surface);
    color: var(--mud-palette-text-primary);
}

.dlm-help-drawer .mud-chip-outlined {
    color: var(--mud-palette-text-primary);
    border-color: var(--mud-palette-lines-default);
}

.dlm-help-head {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .75rem 1rem;
    border-bottom: 1px solid var(--mud-palette-lines-default);
    flex: 0 0 auto;
}

.dlm-help-title {
    font-weight: 600;
}

.dlm-help-ctx {
    margin: 0;
}

.dlm-help-search {
    padding: .75rem 1rem .25rem;
    flex: 0 0 auto;
}

.dlm-help-body {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: .5rem 1rem 1rem;
}

.dlm-help-foot {
    flex: 0 0 auto;
    border-top: 1px solid var(--mud-palette-lines-default);
    padding: .35rem .5rem;
}

/* --- Piezas compartidas por el panel y el centro --- */
.dlm-help-section {
    display: block;
    margin: 1rem 0 .35rem;
    color: var(--mud-palette-text-secondary);
}

.dlm-help-section:first-child {
    margin-top: 0;
}

.dlm-help-card {
    display: flex;
    flex-direction: column;
    gap: .2rem;
    padding: .6rem .75rem;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: var(--mud-default-borderradius);
    background: var(--mud-palette-surface);
    cursor: pointer;
    margin-bottom: .4rem;
}

.dlm-help-card:hover {
    border-color: var(--mud-palette-primary);
}

.dlm-help-card-title {
    font-weight: 600;
    font-size: .9rem;
}

.dlm-help-card-sum {
    font-size: .8rem;
    color: var(--mud-palette-text-secondary);
}

.dlm-help-item {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .35rem .25rem;
    font-size: .875rem;
    cursor: pointer;
    border-radius: var(--mud-default-borderradius);
}

.dlm-help-item:hover {
    background: var(--mud-palette-action-default-hover);
    color: var(--mud-palette-primary);
}

.dlm-help-chips {
    display: flex;
    flex-wrap: wrap;
    gap: .25rem;
}

.dlm-help-meta {
    display: flex;
    flex-wrap: wrap;
    gap: .25rem 1rem;
    margin-top: 1.25rem;
    padding-top: .5rem;
    border-top: 1px solid var(--mud-palette-lines-default);
    font-size: .75rem;
    color: var(--mud-palette-text-secondary);
}

/* --- Cuerpo del artículo (HTML generado desde Markdown) --- */
.dlm-help-article {
    font-size: .9rem;
    line-height: 1.6;
}

.dlm-help-article h1,
.dlm-help-article h2,
.dlm-help-article h3 {
    font-size: 1rem;
    font-weight: 600;
    margin: 1.25rem 0 .4rem;
    line-height: 1.3;
}

.dlm-help-article h1:first-child,
.dlm-help-article h2:first-child,
.dlm-help-article h3:first-child {
    margin-top: 0;
}

.dlm-help-article p {
    margin: 0 0 .75rem;
}

.dlm-help-article ul,
.dlm-help-article ol {
    margin: 0 0 .75rem;
    padding-left: 1.25rem;
}

.dlm-help-article li {
    margin-bottom: .25rem;
}

.dlm-help-article a {
    color: var(--mud-palette-primary);
}

.dlm-help-article code {
    background: var(--mud-palette-background-gray);
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 4px;
    padding: .05rem .25rem;
    font-size: .85em;
}

.dlm-help-article pre {
    background: var(--mud-palette-background-gray);
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: var(--mud-default-borderradius);
    padding: .6rem .75rem;
    overflow-x: auto;
}

.dlm-help-article pre code {
    background: none;
    border: 0;
    padding: 0;
}

.dlm-help-article blockquote {
    margin: 0 0 .75rem;
    padding: .5rem .75rem;
    border-left: 3px solid var(--mud-palette-primary);
    background: var(--mud-palette-background-gray);
}

.dlm-help-article blockquote p:last-child {
    margin-bottom: 0;
}

.dlm-help-article table {
    border-collapse: collapse;
    width: 100%;
    margin: 0 0 .75rem;
    font-size: .85rem;
}

.dlm-help-article th,
.dlm-help-article td {
    border-bottom: 1px solid var(--mud-palette-lines-default);
    padding: .35rem .5rem .35rem 0;
    text-align: left;
    vertical-align: top;
}

.dlm-help-article th {
    color: var(--mud-palette-text-secondary);
    font-weight: 600;
}

/* --- Centro de ayuda (/hjelp) --- */
.dlm-help-cols {
    display: grid;
    grid-template-columns: 15rem 20rem minmax(0, 1fr);
    gap: 1rem;
    align-items: start;
}

.dlm-help-cats {
    padding: .5rem 0;
}

.dlm-help-cat {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .4rem .85rem;
    font-size: .875rem;
    cursor: pointer;
    color: var(--mud-palette-text-secondary);
}

.dlm-help-cat:hover {
    background: var(--mud-palette-action-default-hover);
}

.dlm-help-cat.on {
    background: var(--mud-palette-primary-hover);
    color: var(--mud-palette-primary);
    font-weight: 600;
    box-shadow: inset 2px 0 0 var(--mud-palette-primary);
}

.dlm-help-cat .n {
    margin-left: auto;
    font-size: .75rem;
    font-variant-numeric: tabular-nums;
    color: var(--mud-palette-text-disabled);
}

.dlm-help-list {
    padding: .35rem 0;
    max-height: calc(100vh - 15rem);
    overflow-y: auto;
}

.dlm-help-row {
    display: flex;
    flex-direction: column;
    gap: .1rem;
    padding: .5rem .85rem;
    cursor: pointer;
    border-bottom: 1px solid var(--mud-palette-lines-default);
}

.dlm-help-row:last-child {
    border-bottom: 0;
}

.dlm-help-row:hover {
    background: var(--mud-palette-action-default-hover);
}

.dlm-help-row.on {
    background: var(--mud-palette-primary-hover);
    box-shadow: inset 2px 0 0 var(--mud-palette-primary);
}

.dlm-help-row .t {
    font-size: .875rem;
    font-weight: 600;
}

.dlm-help-row .s {
    font-size: .78rem;
    color: var(--mud-palette-text-secondary);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.dlm-help-read {
    padding: 1.25rem 1.5rem;
    min-height: 20rem;
}

.dlm-help-crumb {
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--mud-palette-text-disabled);
    margin-bottom: .35rem;
}

.dlm-help-crumb .sep {
    margin: 0 .35rem;
}

.dlm-help-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 3rem 1rem;
    color: var(--mud-palette-text-secondary);
}

/* En pantallas estrechas las tres columnas se apilan: el artículo manda. */
@media (max-width: 1100px) {
    .dlm-help-cols {
        grid-template-columns: 1fr;
    }

    .dlm-help-list {
        max-height: 22rem;
    }
}

/* ---- Indicadores de proceso en la ficha del cliente ---------------------- */
.dlm-kpi-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
    gap: .75rem;
}

.dlm-kpi {
    display: flex;
    flex-direction: column;
    gap: .1rem;
    padding: .6rem .9rem;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 6px;
}

.dlm-kpi-label {
    font-size: .75rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--mud-palette-text-secondary);
}

.dlm-kpi-value {
    font-size: 1.5rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    line-height: 1.1;
}

.dlm-kpi-note {
    font-size: .75rem;
    color: var(--mud-palette-text-secondary);
}

.dlm-kpi-good { color: var(--mud-palette-success); }
.dlm-kpi-warn { color: var(--mud-palette-warning); }
.dlm-kpi-bad  { color: var(--mud-palette-error); }

/* Entrega fuera de la fecha prometida. */
.dlm-late { color: var(--mud-palette-error); font-weight: 600; }

/* ---- Selector de idioma (Min konto) ---- */
.dlm-lang-option {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

/* El borde da forma a la bandera blanca por arriba y por abajo (la noruega y la inglesa
   llegan al borde en blanco y sin él se pierden contra el fondo del botón). */
.dlm-lang-flag {
    display: block;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 2px;
}

/* ---- MDR Studio: fixed schema + journal ---- */
/* The laboratory's own points (under "7 Egen dokumentasjon") read slightly different from the fixed schema. */
.dlm-mdr-title.own {
    font-style: italic;
    color: var(--mud-palette-text-secondary);
}

.dlm-mdr-node.picked .dlm-mdr-title.own {
    color: var(--mud-palette-text-primary);
}

.dlm-mdr-log .dlm-date {
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
    color: var(--mud-palette-text-secondary);
}

.dlm-mdr-log-text {
    white-space: pre-wrap;
}

/* Entries imported from the former rich-text description keep their HTML, boxed and capped. */
.dlm-mdr-log-imported {
    max-height: 200px;
    border: 1px dashed var(--mud-palette-lines-default);
    border-radius: 6px;
    padding: 6px 10px;
    margin-top: 2px;
}

/* ---- MDR Studio F1.2: state, guidance and templates ---- */
/* A point without any document yet: hollow grey dot (state "missing"). */
.dlm-mdr-dot.missing {
    background: transparent;
    border: 2px solid var(--mud-palette-text-secondary);
    box-sizing: border-box;
}

.dlm-mdr-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 12px;
    margin: 4px 0 8px;
    font-size: 0.75rem;
    color: var(--mud-palette-text-secondary);
}

.dlm-mdr-legend span {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.dlm-mdr-legend .dlm-mdr-dot {
    display: inline-block;
}

.dlm-mdr-legend .dlm-mdr-cat {
    width: 10px;
    height: 10px;
    border-radius: 2px;
    display: inline-block;
}

.dlm-mdr-cat.c1 { background: var(--mud-palette-error); }
.dlm-mdr-cat.c2 { background: var(--mud-palette-warning); }
.dlm-mdr-cat.c3 { background: var(--mud-palette-text-secondary); }

.dlm-mdr-guidance .mud-expand-panel-text {
    width: 100%;
}

.dlm-mdr-guide {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 12px 24px;
}

.dlm-mdr-guide-block {
    min-width: 0;
}

.dlm-mdr-guide-block.wide {
    grid-column: 1 / -1;
}

.dlm-mdr-guide-head {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--mud-palette-text-secondary);
    margin-bottom: 4px;
}

.dlm-mdr-guide-text {
    font-size: 0.875rem;
    line-height: 1.45;
    white-space: pre-line;
}

.dlm-mdr-guide-important {
    border-left: 3px solid var(--mud-palette-warning);
    background: var(--mud-palette-warning-hover);
    padding: 6px 10px;
    border-radius: 0 6px 6px 0;
}

.dlm-mdr-evidence {
    list-style: none;
    padding: 0;
    margin: 0;
    font-size: 0.875rem;
}

.dlm-mdr-evidence li {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    padding: 2px 0;
}

.dlm-mdr-template {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    padding: 4px 0;
}

.dlm-mdr-template-title {
    font-size: 0.875rem;
}

.dlm-mdr-template-meta {
    font-size: 0.75rem;
    color: var(--mud-palette-text-secondary);
    white-space: nowrap;
}

/* ---- MDR Studio F1.3: not applicable + PRRC tab ---- */
/* A point declared not applicable: grey dot with a diagonal bar. */
.dlm-mdr-dot.na {
    background: linear-gradient(135deg, transparent 42%, var(--mud-palette-text-secondary) 42%, var(--mud-palette-text-secondary) 58%, transparent 58%);
    border: 2px solid var(--mud-palette-text-secondary);
    box-sizing: border-box;
    opacity: 0.7;
}

.dlm-mdr-na {
    font-size: 0.875rem;
}

.dlm-prrc-card {
    border-left: 4px solid var(--mud-palette-primary);
}

.dlm-prrc-facts {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 0 24px;
}

.dlm-prrc-competence {
    font-size: 0.875rem;
    white-space: pre-line;
}

.dlm-prrc-review .dlm-prrc-items {
    width: 100%;
    border-collapse: collapse;
    margin-top: 6px;
    font-size: 0.875rem;
}

.dlm-prrc-items th {
    text-align: left;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--mud-palette-text-secondary);
    padding: 4px 6px;
    border-bottom: 1px solid var(--mud-palette-lines-default);
}

.dlm-prrc-items td {
    padding: 2px 6px;
    border-bottom: 1px solid var(--mud-palette-lines-default);
    vertical-align: middle;
}

.dlm-prrc-items td.hint {
    width: 22px;
}

.dlm-prrc-items td.hint .dlm-mdr-dot {
    display: inline-block;
    cursor: pointer;
}

.dlm-prrc-items td.text {
    min-width: 160px;
}

.dlm-prrc-items td.res,
.dlm-prrc-items th.res {
    white-space: nowrap;
    width: 220px;
}

.dlm-prrc-items td.comment {
    min-width: 200px;
}

.dlm-prrc-items tr.dev td {
    background: var(--mud-palette-error-hover);
}

/* ---- MDR Studio F1.4: risikoregister ---- */
.dlm-risk-layout { align-items: stretch; }

.dlm-risk-families {
    width: 300px;
    flex: 0 0 auto;
    border-right: 1px solid var(--mud-palette-lines-default);
    padding-right: 12px;
}

.dlm-risk-family {
    padding: 6px 8px;
    border-radius: 6px;
    cursor: pointer;
    margin-bottom: 2px;
}

.dlm-risk-family:hover { background: var(--mud-palette-action-default-hover); }
.dlm-risk-family.picked { background: var(--mud-palette-primary-hover); }
.dlm-risk-family-name { font-size: 0.875rem; font-weight: 600; }
.dlm-risk-family-meta { font-size: 0.75rem; color: var(--mud-palette-text-secondary); }
.dlm-risk-family-meta .ok { color: var(--mud-palette-success); }
.dlm-risk-family-meta .warn { color: var(--mud-palette-warning); }

.dlm-risk-main { min-width: 0; }

.dlm-risk-matrix-title { font-size: 0.75rem; font-weight: 600; color: var(--mud-palette-text-secondary); margin-bottom: 4px; }

.dlm-risk-matrix { border-collapse: collapse; }
.dlm-risk-matrix th, .dlm-risk-matrix td {
    width: 30px; height: 26px; text-align: center; font-size: 0.75rem;
    border: 1px solid var(--mud-palette-lines-default);
}
.dlm-risk-matrix th { font-weight: 600; color: var(--mud-palette-text-secondary); }
.dlm-risk-matrix th.axis { font-size: 0.65rem; }
.dlm-risk-matrix td { cursor: pointer; font-weight: 600; }
.dlm-risk-matrix td.low { background: rgba(46, 125, 50, 0.18); }
.dlm-risk-matrix td.mod { background: rgba(239, 143, 0, 0.22); }
.dlm-risk-matrix td.high { background: rgba(198, 40, 40, 0.22); }
.dlm-risk-matrix td.active { outline: 2px solid var(--mud-palette-primary); outline-offset: -2px; }

.dlm-risk-legend { font-size: 0.75rem; color: var(--mud-palette-text-secondary); display: flex; flex-direction: column; gap: 3px; }
.dlm-risk-legend i { display: inline-block; width: 12px; height: 12px; border-radius: 2px; margin-right: 6px; vertical-align: middle; }
.dlm-risk-legend i.low { background: rgba(46, 125, 50, 0.5); }
.dlm-risk-legend i.mod { background: rgba(239, 143, 0, 0.6); }
.dlm-risk-legend i.high { background: rgba(198, 40, 40, 0.6); }

.dlm-risk-table-wrap { overflow-x: auto; }
.dlm-risk-table { width: 100%; min-width: 1240px; border-collapse: collapse; font-size: 0.8125rem; }
.dlm-risk-table th {
    text-align: left; font-size: 0.7rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.03em;
    color: var(--mud-palette-text-secondary); padding: 4px 6px; border-bottom: 1px solid var(--mud-palette-lines-default); white-space: nowrap;
}
.dlm-risk-table td { padding: 2px 6px; border-bottom: 1px solid var(--mud-palette-lines-default); vertical-align: top; }
.dlm-risk-table tr.mod td:first-child { box-shadow: inset 3px 0 0 var(--mud-palette-warning); }
.dlm-risk-table tr.high td:first-child { box-shadow: inset 3px 0 0 var(--mud-palette-error); }
.dlm-risk-table th.hz, .dlm-risk-table td.hz { width: 200px; }
.dlm-risk-table th.cause, .dlm-risk-table td.cause { min-width: 160px; }
.dlm-risk-table th.sk, .dlm-risk-table td.sk { width: 92px; }
.dlm-risk-table th.lvl, .dlm-risk-table td.lvl { width: 56px; text-align: center; }
.dlm-risk-table th.measure, .dlm-risk-table td.measure { min-width: 220px; }
.dlm-risk-table th.resp, .dlm-risk-table td.resp { width: 130px; }
.dlm-risk-table th.ev, .dlm-risk-table td.ev { width: 170px; }
.dlm-risk-table th.date, .dlm-risk-table td.date { width: 120px; }
.dlm-risk-table th.act, .dlm-risk-table td.act { width: 80px; white-space: nowrap; }
.dlm-risk-table .mud-input-control { margin: 0; }
.dlm-risk-table .mud-input-control-input-container { font-size: 0.8125rem; }
.dlm-risk-level .mud-input-slot { font-weight: 600; text-align: center; }
.dlm-risk-type { max-width: 150px; }

.dlm-risk-badge {
    display: inline-block; min-width: 30px; padding: 2px 6px; border-radius: 4px; text-align: center;
    font-weight: 700; color: #fff; background: var(--mud-palette-text-disabled);
}
.dlm-risk-badge.low { background: #2e7d32; }
.dlm-risk-badge.mod { background: #ef8f00; }
.dlm-risk-badge.high { background: #c62828; }

.dlm-risk-sub { font-size: 0.72rem; color: var(--mud-palette-text-secondary); }
.dlm-risk-lvlnum { width: 18px; text-align: center; }
.dlm-risk-catalogue { max-height: 50vh; overflow-y: auto; }
.dlm-risk-hazard.present { opacity: 0.55; }
.dlm-risk-default.added { opacity: 0.55; }

/* ---- MDR Studio F1.5: erklæring card on the order ---- */
.dlm-erk-missing { margin: 4px 0 0 18px; padding: 0; }
.dlm-erk-missing li { font-size: 0.875rem; }
.dlm-erk-sub { font-size: 0.72rem; color: var(--mud-palette-text-secondary); margin-left: 4px; }

/* ---- MDR Studio F1.6: sluttkontroll ---- */
.dlm-sk-item { display: flex; align-items: center; gap: 10px; padding: 3px 0; border-bottom: 1px solid var(--mud-palette-lines-default); }
.dlm-sk-item .dlm-sk-text { flex: 1; font-size: 0.875rem; }
.dlm-sk-item .dlm-sk-comment { width: 220px; flex: 0 0 auto; }
.dlm-sk-item .mud-input-control { margin: 0; }
.dlm-sk-past { padding: 6px 0; border-bottom: 1px solid var(--mud-palette-lines-default); }
.dlm-sk-sub { font-size: 0.78rem; color: var(--mud-palette-text-secondary); margin-left: 6px; }
.dlm-sk-maint { max-height: 50vh; overflow-y: auto; font-size: 0.875rem; }
.dlm-sk-off { color: var(--mud-palette-text-disabled); text-decoration: line-through; }

/* ---- MDR Studio F1.7: vigilance + PMS ---- */
.dlm-vig-sub { font-size: 0.75rem; color: var(--mud-palette-text-secondary); margin-left: 4px; }
.dlm-vig-desc { display: inline-block; max-width: 420px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; vertical-align: bottom; }
.dlm-vig-q { display: flex; flex-direction: column; gap: 2px; padding: 4px 0; border-bottom: 1px solid var(--mud-palette-lines-default); font-size: 0.875rem; }
.dlm-pms-trends { display: flex; gap: 16px; flex-wrap: wrap; }
.dlm-pms-trend { border: 1px solid var(--mud-palette-lines-default); border-radius: 6px; padding: 6px 10px; min-width: 200px; font-size: 0.8125rem; }
.dlm-pms-trend-title { font-size: 0.7rem; font-weight: 600; text-transform: uppercase; color: var(--mud-palette-text-secondary); margin-bottom: 2px; }
.dlm-pms-trend-row { display: flex; justify-content: space-between; gap: 12px; }
.dlm-pms-cause { display: inline-block; max-width: 320px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; vertical-align: bottom; }
.dlm-pms-kpis { display: flex; flex-wrap: wrap; gap: 8px; }
.dlm-pms-kpi { border: 1px solid var(--mud-palette-lines-default); border-radius: 6px; padding: 6px 10px; min-width: 120px; }
.dlm-pms-kpi b { display: block; font-size: 1.2rem; }
.dlm-pms-kpi span { font-size: 0.72rem; color: var(--mud-palette-text-secondary); }

/* ---- MDR Studio F1.8: inspection readiness + traceability ---- */
.dlm-ts-score { border-radius: 10px; padding: 8px 18px; color: #fff; display: flex; flex-direction: column; align-items: center; min-width: 120px; }
.dlm-ts-score b { font-size: 1.6rem; line-height: 1.1; }
.dlm-ts-score span { font-size: 0.72rem; opacity: 0.9; }
.dlm-ts-score.ok { background: #2e7d32; } .dlm-ts-score.warn { background: #ef8f00; } .dlm-ts-score.over { background: #c62828; }
.dlm-ts-legend { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 0.78rem; color: var(--mud-palette-text-secondary); }
.dlm-ts-legend span { display: inline-flex; align-items: center; gap: 5px; }
.dlm-ts-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: var(--mud-palette-text-disabled); flex: 0 0 auto; }
.dlm-ts-dot.ok { background: #2e7d32; } .dlm-ts-dot.warn { background: #ef8f00; } .dlm-ts-dot.over { background: #c62828; }
.dlm-ts-dot.miss { background: transparent; border: 2px solid #c62828; box-sizing: border-box; }
.dlm-ts-dot.na { background: transparent; border: 2px solid var(--mud-palette-text-secondary); box-sizing: border-box; opacity: 0.6; }
.dlm-ts-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; }
.dlm-ts-card { border: 1px solid var(--mud-palette-lines-default); border-left-width: 4px; border-radius: 8px; padding: 8px 12px; cursor: pointer; background: var(--mud-palette-surface); }
.dlm-ts-card:hover { background: var(--mud-palette-action-default-hover); }
.dlm-ts-card.ok { border-left-color: #2e7d32; } .dlm-ts-card.warn { border-left-color: #ef8f00; }
.dlm-ts-card.over, .dlm-ts-card.miss { border-left-color: #c62828; } .dlm-ts-card.na { border-left-color: var(--mud-palette-text-disabled); opacity: 0.75; }
.dlm-ts-card-head { display: flex; align-items: center; gap: 6px; }
.dlm-ts-card-title { font-size: 0.875rem; font-weight: 600; }
.dlm-ts-card-state { font-size: 0.78rem; margin-top: 2px; }
.dlm-ts-card-detail { font-size: 0.75rem; color: var(--mud-palette-text-secondary); min-height: 1em; }
.dlm-ts-index { width: 100%; border-collapse: collapse; font-size: 0.875rem; }
.dlm-ts-index tr { cursor: pointer; }
.dlm-ts-index tr:hover td { background: var(--mud-palette-action-default-hover); }
.dlm-ts-index td { padding: 5px 8px; border-bottom: 1px solid var(--mud-palette-lines-default); }
.dlm-ts-index td.dot { width: 22px; }
.dlm-ts-index td.state { width: 140px; color: var(--mud-palette-text-secondary); }
.dlm-ts-index td.detail { width: 200px; color: var(--mud-palette-text-secondary); font-size: 0.78rem; }
.dlm-ts-index td.link { width: 28px; color: var(--mud-palette-text-secondary); }
.dlm-tr-list { display: inline-block; max-width: 220px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; vertical-align: bottom; font-size: 0.8125rem; }

/* ---- MDR Vokter F2 ---- */
.dlm-vk-card { border-left: 4px solid var(--mud-palette-primary); }
.dlm-vk-contract { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 12px; font-size: 0.875rem; }
.dlm-vk-contract > div { border: 1px solid var(--mud-palette-lines-default); border-radius: 8px; padding: 8px 12px; }
.dlm-vk-contract > div > div { padding: 2px 0; }
.dlm-vk-contract-title { font-weight: 600; display: flex; align-items: center; gap: 6px; margin-bottom: 4px; }
.dlm-vk-contract .yes { border-left: 4px solid #2e7d32; } .dlm-vk-contract .no { border-left: 4px solid #c62828; }
.dlm-vk-meter { display: flex; flex-direction: column; gap: 2px; min-width: 220px; font-size: 0.75rem; color: var(--mud-palette-text-secondary); }
.dlm-vk-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(420px, 1fr)); gap: 16px; }
.dlm-vk-trend { display: flex; flex-direction: column; gap: 2px; min-width: 200px; color: var(--mud-palette-primary); }
.dlm-vk-trend-title { font-size: 0.72rem; color: var(--mud-palette-text-secondary); }
.dlm-vk-spark { width: 200px; height: 50px; }
.dlm-vk-parts { display: flex; flex-direction: column; gap: 4px; }
.dlm-vk-part { display: flex; align-items: center; gap: 10px; font-size: 0.8125rem; cursor: pointer; }
.dlm-vk-part > span { width: 240px; flex: 0 0 auto; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dlm-vk-part > b { width: 44px; text-align: right; }
.dlm-vk-wheel { display: flex; flex-direction: column; gap: 6px; max-height: 420px; overflow-y: auto; }
.dlm-vk-month-title { font-size: 0.72rem; font-weight: 600; text-transform: uppercase; color: var(--mud-palette-text-secondary); margin: 4px 0 2px; }
.dlm-vk-event { display: flex; align-items: center; gap: 8px; font-size: 0.8125rem; padding: 2px 4px; border-radius: 4px; cursor: pointer; }
.dlm-vk-event:hover { background: var(--mud-palette-action-default-hover); }
.dlm-vk-event.overdue .d { color: var(--mud-palette-error); font-weight: 600; }
.dlm-vk-event .d { width: 42px; font-variant-numeric: tabular-nums; color: var(--mud-palette-text-secondary); }
.dlm-vk-event .t { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dlm-vk-sources { display: flex; flex-direction: column; gap: 4px; font-size: 0.8125rem; }
.dlm-vk-source { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.dlm-vk-sub { font-size: 0.75rem; color: var(--mud-palette-text-secondary); }
.dlm-vk-sub.err { color: var(--mud-palette-error); }
.dlm-vk-change { border-left: 4px solid var(--mud-palette-lines-default); }
.dlm-vk-change.pending { border-left-color: var(--mud-palette-warning); background: var(--mud-palette-warning-hover); }
.dlm-vk-summary { font-size: 0.875rem; margin-top: 4px; white-space: pre-line; }
.dlm-vk-quote { font-size: 0.8125rem; font-style: italic; color: var(--mud-palette-text-secondary); border-left: 3px solid var(--mud-palette-lines-default); padding-left: 8px; margin-top: 4px; }
.dlm-vk-curation { border-left: 4px solid var(--mud-palette-secondary); }

/* ---- MDR Vokter F3: the Vokter writes and reviews ---- */
.dlm-vd-busy { display: flex; align-items: center; gap: 10px; padding: 6px 10px; margin-bottom: 8px; border-radius: 6px; background: var(--mud-palette-primary-hover); font-size: 0.875rem; }
.dlm-vd-split { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 16px; }
@media (max-width: 960px) { .dlm-vd-split { grid-template-columns: 1fr; } }
.dlm-vd-grunnlag textarea { font-family: Consolas, "Courier New", monospace; font-size: 0.78rem; line-height: 1.35; }
.dlm-vd-pre { white-space: pre-wrap; font-family: Consolas, "Courier New", monospace; font-size: 0.75rem; line-height: 1.35; max-height: 420px; overflow: auto; margin: 0; }
.dlm-vd-section { border-left: 3px solid var(--mud-palette-primary); }
.dlm-vd-summary { border-left: 3px solid var(--mud-palette-info); }
.dlm-vd-finding { border-left: 4px solid var(--mud-palette-lines-default); }
.dlm-vd-finding.acc { border-left-color: var(--mud-palette-success); }
.dlm-vd-finding.rej { border-left-color: var(--mud-palette-error); opacity: 0.75; }
.dlm-vd-lbl { font-size: 0.7rem; color: var(--mud-palette-text-secondary); margin-top: 4px; }
.dlm-vd-before { background: rgba(198, 40, 40, 0.08); padding: 4px 8px; border-radius: 4px; white-space: pre-wrap; font-size: 0.8125rem; }
.dlm-vd-after { background: rgba(46, 125, 50, 0.10); padding: 4px 8px; border-radius: 4px; white-space: pre-wrap; font-size: 0.8125rem; }
.dlm-vd-actions { padding: 6px 8px; border-radius: 6px; background: var(--mud-palette-primary-hover); }
.dlm-vd-row { display: flex; align-items: center; gap: 10px; padding: 4px 6px; border-radius: 4px; cursor: pointer; font-size: 0.8125rem; }
.dlm-vd-row:hover { background: var(--mud-palette-action-default-hover); }
.dlm-vd-row .t { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dlm-vd-prrc { padding: 4px 8px; border-radius: 6px; background: var(--mud-palette-primary-hover); }
.dlm-vd-fact { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 0.72rem; color: var(--mud-palette-text-secondary); margin-top: 2px; }
.dlm-vd-fact .star { color: var(--mud-palette-primary); }
.dlm-vd-use { padding: 0 6px !important; min-width: 0 !important; font-size: 0.7rem !important; text-transform: none !important; }

/* ---- MDR F4.1: endringskontroll ---- */
.dlm-ek-title { display: inline-block; max-width: 420px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; vertical-align: bottom; }
.dlm-ek-impact { display: grid; grid-template-columns: repeat(auto-fit, minmax(420px, 1fr)); gap: 0 16px; }
.dlm-ek-impact-row { display: flex; align-items: center; gap: 8px; min-height: 36px; }
.dlm-ek-impact-row .mud-checkbox { flex: 0 0 260px; }
.dlm-ek-suggest { border-left: 4px solid var(--mud-palette-primary); background: var(--mud-palette-primary-hover); }
.dlm-ek-row { display: flex; align-items: center; gap: 10px; padding: 3px 4px; font-size: 0.8125rem; flex-wrap: wrap; }
.dlm-ek-row .dlm-vk-sub { flex: 1; min-width: 200px; }
.dlm-ek-item { display: flex; align-items: center; gap: 8px; padding: 4px 6px; border-radius: 4px; border-left: 4px solid var(--mud-palette-warning); margin: 3px 0; font-size: 0.8125rem; flex-wrap: wrap; background: var(--mud-palette-background-gray); }
.dlm-ek-item.ok { border-left-color: var(--mud-palette-success); }
.dlm-ek-item.na { border-left-color: var(--mud-palette-lines-default); opacity: 0.8; }
.dlm-ek-item .k { cursor: pointer; }
.dlm-ek-item .r { flex: 1; min-width: 160px; }

/* ---- MDR F4.2: leverandører og utstyr ---- */
.dlm-lv-eval { border-left: 4px solid var(--mud-palette-primary); background: var(--mud-palette-background-gray); }
.dlm-lv-scores { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 0 16px; }
.dlm-lv-score { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 0.8125rem; min-height: 30px; }

/* ---- MDR F4.3: klinisk evaluering, PMCF, kompetanse ---- */
.dlm-ke-reasons { margin: 4px 0 0 18px; padding: 0; font-size: 0.8125rem; }
.dlm-pc-card { border-left: 4px solid var(--mud-palette-primary); }
.dlm-pc-questions { margin: 4px 0 0 18px; padding: 0; font-size: 0.8125rem; }
.dlm-pc-recipients { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); max-height: 260px; overflow-y: auto; border: 1px solid var(--mud-palette-lines-default); border-radius: 6px; padding: 4px 8px; }
.dlm-pc-summary { border-collapse: collapse; width: 100%; font-size: 0.8125rem; }
.dlm-pc-summary td { border-bottom: 1px solid var(--mud-palette-lines-default); padding: 4px 6px; vertical-align: top; }
.dlm-pc-summary td.n { white-space: nowrap; width: 70px; font-weight: 600; }
.dlm-pc-summary td.c { width: 45%; }
.dlm-pc-summary tr.warn td.n { color: var(--mud-palette-warning); }
.dlm-pq-card { max-width: 640px; }
.dlm-pq-q { padding: 8px 0; border-bottom: 1px solid var(--mud-palette-lines-default); }
.dlm-pq-text { font-size: 0.9rem; margin-bottom: 4px; }
.dlm-km-matrix { border-collapse: collapse; width: 100%; font-size: 0.8125rem; }
.dlm-km-matrix th, .dlm-km-matrix td { border: 1px solid var(--mud-palette-lines-default); padding: 4px 8px; }
.dlm-km-matrix th { background: var(--mud-palette-background-gray); text-align: left; font-weight: 600; }
.dlm-km-matrix td.n { text-align: center; width: 60px; }
.dlm-km-matrix tbody tr { cursor: pointer; }
.dlm-km-matrix tbody tr:hover { background: var(--mud-palette-action-default-hover); }
.dlm-km-matrix tr.over td:first-child { border-left: 4px solid var(--mud-palette-error); }
.dlm-km-matrix tr.warn td:first-child { border-left: 4px solid var(--mud-palette-warning); }

/* ---- MDR F4.4: vigilans-assistent, månedsbrief ---- */
.dlm-vg-card { border-left: 4px solid var(--mud-palette-primary); background: var(--mud-palette-primary-hover); }
.dlm-vg-text { white-space: pre-wrap; font-family: inherit; font-size: 0.8125rem; margin: 6px 0 0 0; }
.dlm-br { border-top: 1px dashed var(--mud-palette-lines-default); padding-top: 8px; }

/* ---- MDR F5: materialpass, etikett ---- */
.dlm-mp-card { max-width: 640px; }
.dlm-mp-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 8px 16px; }
.dlm-mp-fact { display: flex; flex-direction: column; font-size: 0.875rem; }
.dlm-mp-fact span { font-size: 0.72rem; color: var(--mud-palette-text-secondary); text-transform: uppercase; }
.dlm-mp-fact i { font-size: 0.75rem; color: var(--mud-palette-text-secondary); font-style: normal; }
.dlm-mp-table { border-collapse: collapse; width: 100%; font-size: 0.875rem; }
.dlm-mp-table th, .dlm-mp-table td { border-bottom: 1px solid var(--mud-palette-lines-default); padding: 6px 8px; text-align: left; }
.dlm-mp-table th { font-size: 0.72rem; color: var(--mud-palette-text-secondary); text-transform: uppercase; }
.dlm-erk-pass { padding: 8px 12px; border-radius: 6px; border: 1px solid var(--mud-palette-lines-default); border-left: 4px solid var(--mud-palette-primary); }

/* ---- Sluttkontroll: release mode switch ---- */
.dlm-sk-strict { padding: 6px 10px; border-radius: 6px; background: var(--mud-palette-background-gray); }

/* ---- MDR: navegación agrupada en lugar de quince pestañas ---- */
.dlm-mdr-tabs > .mud-tabs-tabbar { display: none; }
/* Cabecera compacta de /mdr: el título sube hacia el appbar y el aviso comparte línea. */
.dlm-mdr-head { margin-top: -10px; }
/* Dashboard (24/10/2026): título pegado a la barra superior y widgets pegados al título. */
.dlm-dash-head-row { margin-top: -14px; }
.dlm-mdr-head-alert { min-width: 280px; }
.dlm-mdr-head-alert .mud-alert-message { padding: 4px 0; }

.dlm-mdr-nav {
    display: flex; flex-wrap: wrap; gap: 8px 26px; padding: 8px 14px;
    border: 1px solid var(--mud-palette-lines-default); border-radius: var(--mud-default-borderradius);
    background: var(--mud-palette-surface);
}
.dlm-mdr-nav-group { display: flex; flex-direction: column; gap: 3px; }
.dlm-mdr-nav-caption {
    font-size: 0.66rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase;
    color: var(--mud-palette-text-secondary); padding-left: 6px;
}
.dlm-mdr-nav-items { display: flex; flex-wrap: wrap; gap: 4px; }
.dlm-mdr-nav-item {
    display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px 5px 9px;
    border: 1px solid transparent; border-radius: 999px; background: transparent;
    color: var(--mud-palette-text-primary); font: inherit; font-size: 0.8125rem; font-weight: 500;
    line-height: 1.2; white-space: nowrap; cursor: pointer;
}
.dlm-mdr-nav-item .mud-icon-root { font-size: 1.1rem; color: var(--mud-palette-text-secondary); }
.dlm-mdr-nav-item:hover { background: var(--mud-palette-action-default-hover); }
.dlm-mdr-nav-item.active { background: var(--mud-palette-primary); color: var(--mud-palette-primary-text); }
.dlm-mdr-nav-item.active .mud-icon-root { color: inherit; }
/* El chip principal («MDR», el árbol) se dibuja más grande para destacar sobre los registros. */
.dlm-mdr-nav-item.main { font-size: 0.95rem; font-weight: 700; padding: 6px 15px 6px 11px; border-color: var(--mud-palette-primary); }
.dlm-mdr-nav-item.main .mud-icon-root { font-size: 1.35rem; color: var(--mud-palette-primary); }
.dlm-mdr-nav-item.main.active .mud-icon-root { color: inherit; }

/* ---- MDR: risikoregister más compacto y desplegables legibles ---- */
.dlm-risk-table { font-size: 0.76rem; }
.dlm-risk-table td { padding: 2px 4px; }
.dlm-risk-table th { padding: 4px; }
.dlm-risk-table .mud-input-control-input-container,
.dlm-risk-table .mud-input-slot,
.dlm-risk-table .mud-input > input,
.dlm-risk-table .mud-input > textarea { font-size: 0.76rem; }
.dlm-risk-table th.sk, .dlm-risk-table td.sk { width: 50px; }
.dlm-risk-table th.hz, .dlm-risk-table td.hz { width: 190px; }
.dlm-risk-table .dlm-risk-sub { font-size: 0.68rem; }
.dlm-risk-level-pop { min-width: 360px; }
.dlm-risk-level-pop .mud-list-item-text, .dlm-risk-level-pop .mud-list-item-text p { white-space: nowrap; font-size: 0.8125rem; }
.dlm-risk-pop { min-width: 260px; max-width: 520px; }
.dlm-risk-pop .mud-list-item-text p { font-size: 0.8125rem; }

/* ---- MDR: legend as tooltip, tips dialog, compact risk inputs ---- */
.dlm-mdr-legend-row { display: flex; justify-content: flex-end; margin: 2px 0 6px; }
.dlm-mdr-legend-btn { display: inline-flex; align-items: center; gap: 4px; font-size: 0.72rem; color: var(--mud-palette-text-secondary); cursor: help; }
.dlm-mdr-legend-tip { display: flex; flex-direction: column; gap: 4px; font-size: 0.78rem; text-align: left; }
.dlm-mdr-legend-tip span { display: inline-flex; align-items: center; gap: 6px; }
.dlm-mdr-legend-tip span.sep { height: 1px; background: rgba(255,255,255,0.35); margin: 3px 0; }
.dlm-mdr-legend-tip .dlm-mdr-dot { display: inline-block; }
.dlm-mdr-legend-tip .dlm-mdr-cat { width: 10px; height: 10px; border-radius: 2px; display: inline-block; }
.dlm-risk-table .mud-input, .dlm-risk-table .mud-input-slot, .dlm-risk-table .mud-select-input,
.dlm-risk-table input.mud-input-root, .dlm-risk-table textarea.mud-input-root, .dlm-risk-table .mud-input-root-text { font-size: 0.76rem !important; }
.dlm-risk-level input { text-align: center; font-weight: 600; padding-left: 0 !important; padding-right: 0 !important; }
/* PO-runde 24/09/2026: S/K más grandes y con flechas siempre visibles; subtabla de gjennomganger en Materialer. */
.dlm-risk-table .dlm-risk-level input.mud-input-root { font-size: 1.05rem !important; font-weight: 700; }
.dlm-risk-level .mud-input-numeric-spin { display: flex; }
.dlm-mt-expand { width: 32px; }
.dlm-mt-notes { max-width: 260px; white-space: pre-line; }
.dlm-mt-actions { white-space: nowrap; width: 90px; }
.dlm-mt-reviews { padding: 8px 12px 12px 44px !important; background: var(--mud-palette-background-gray); }
.dlm-mt-review-table { max-width: 900px; }
/* PO-runde 28/09/2026: precios por lista en productos, underleverandører por línea, sjekkliste INF-01. */
.dlm-price-multi { display: inline-flex; align-items: center; gap: 4px; cursor: help; }
.dlm-price-multi .mud-icon-root { font-size: 1rem; color: var(--mud-palette-text-secondary); }
.dlm-price-tip { display: flex; flex-direction: column; gap: 3px; min-width: 200px; text-align: left; }
.dlm-price-tip div { display: flex; justify-content: space-between; gap: 16px; }
.dlm-line-suppliers { border-top: 1px dashed var(--mud-palette-lines-default); padding-top: 6px; }
.dlm-ifu-check { width: 100%; border-collapse: collapse; }
.dlm-ifu-check td { padding: 2px 6px; border-bottom: 1px solid var(--mud-palette-lines-default); vertical-align: middle; }
.dlm-ifu-check td.c { width: 44px; }
.dlm-ifu-check td.k { width: 34%; }
.dlm-ifu-check td.x { width: 40px; }
.dlm-risk-th-help { display: inline-flex; align-items: center; gap: 2px; cursor: help; }
.dlm-risk-th-help .mud-icon-root { font-size: 0.85rem; color: var(--mud-palette-text-secondary); }
.dlm-risk-scale-tip { display: flex; flex-direction: column; gap: 3px; font-size: 0.78rem; text-align: left; max-width: 360px; }
.dlm-risk-scale-tip i { opacity: 0.8; }
.dlm-risk-prev { color: var(--mud-palette-text-disabled); white-space: nowrap; }

/* ---- Kunderapport ---- */
.dlm-cr-card { min-width: 320px; flex-basis: 420px; }
.dlm-cr-lines { padding: 0 0 6px 40px !important; background: var(--mud-palette-background-gray); }
.dlm-cr-linetable { border-collapse: collapse; width: 100%; max-width: 760px; font-size: 0.8125rem; }
.dlm-cr-linetable td { padding: 2px 10px; border-bottom: 1px dashed var(--mud-palette-lines-default); }
.dlm-cr-linetable .dlm-cr-product { width: 45%; }
.dlm-cr-linetable .dlm-cr-sum { font-weight: 600; }

/* ---- Firefox older than 121 (e.g. ESR 115) does not support :has(). MudBlazor puts the
   label-shrink, outlined-notch and autofill selectors in ONE selector list with :has(:-webkit-autofill),
   so those browsers drop the whole rule: labels never float and overlap the value. The same rules
   are restated here without the :has() part. Harmless where :has() works. ---- */
.mud-input.mud-input-outlined.mud-shrink>.mud-input-outlined-border legend {
    width:auto;
    padding:0 5px
}
.mud-shrink~label.mud-input-label.mud-input-label-inputcontrol {
    color:var(--mud-palette-text-primary)
}
.mud-shrink~label.mud-input-label.mud-input-label-inputcontrol,
.mud-input:focus-within~label.mud-input-label.mud-input-label-inputcontrol {
    transform:translate(0, 1.5px) scale(0.75);
    transform-origin:top left;
    max-width:133.3333333333%
}
.mud-shrink~label.mud-input-label.mud-input-label-inputcontrol.mud-input-label-filled,
.mud-input:focus-within~label.mud-input-label.mud-input-label-inputcontrol.mud-input-label-filled {
    transform:translate(12px, 10px) scale(0.75);
    max-width:calc((100% - 12px)/.75)
}
.mud-shrink~label.mud-input-label.mud-input-label-inputcontrol.mud-input-label-filled.mud-input-label-margin-dense,
.mud-input:focus-within~label.mud-input-label.mud-input-label-inputcontrol.mud-input-label-filled.mud-input-label-margin-dense {
    transform:translate(12px, 7px) scale(0.75)
}
.mud-shrink~label.mud-input-label.mud-input-label-inputcontrol.mud-input-label-outlined,
.mud-input:focus-within~label.mud-input-label.mud-input-label-inputcontrol.mud-input-label-outlined {
    transform:translate(14px, -6px) scale(0.75);
    max-width:calc((100% - 14px)/.75)
}
.mud-application-layout-rtl .mud-shrink~label.mud-input-label.mud-input-label-inputcontrol,
.mud-application-layout-rtl .mud-input:focus-within~label.mud-input-label.mud-input-label-inputcontrol {
    transform-origin:top right
}
.mud-application-layout-rtl .mud-shrink~label.mud-input-label.mud-input-label-inputcontrol.mud-input-label-filled,
.mud-application-layout-rtl .mud-input:focus-within~label.mud-input-label.mud-input-label-inputcontrol.mud-input-label-filled {
    transform:translate(-12px, 10px) scale(0.75)
}
.mud-application-layout-rtl .mud-shrink~label.mud-input-label.mud-input-label-inputcontrol.mud-input-label-filled.mud-input-label-margin-dense,
.mud-application-layout-rtl .mud-input:focus-within~label.mud-input-label.mud-input-label-inputcontrol.mud-input-label-filled.mud-input-label-margin-dense {
    transform:translate(-12px, 7px) scale(0.75)
}
.mud-application-layout-rtl .mud-shrink~label.mud-input-label.mud-input-label-inputcontrol.mud-input-label-outlined,
.mud-application-layout-rtl .mud-input:focus-within~label.mud-input-label.mud-input-label-inputcontrol.mud-input-label-outlined {
    transform:translate(-14px, -6px) scale(0.75)
}

/* ---- MDR: lectura obligatoria (Lesebekreftelser, Dokumenter å lese, Tildel lesing) — 02/10/2026 ---- */
.dlm-rd-nowrap { white-space: nowrap; }
.dlm-rd-muted { color: var(--mud-palette-text-secondary); }
.dlm-rd-doclist { max-height: 320px; overflow-y: auto; border: 1px solid var(--mud-palette-lines-default); border-radius: 6px; padding: 4px 8px; }
.dlm-rd-node { font-weight: 600; margin-top: 4px; }
.dlm-rd-doc { display: flex; align-items: center; gap: 4px; padding-left: 24px; }
.dlm-rd-superseded td { color: var(--mud-palette-text-disabled); }
.dlm-rd-superseded td .mud-icon-root { opacity: 0.55; }
.dlm-rd-table { border-collapse: collapse; width: 100%; font-size: 0.8125rem; }
.dlm-rd-table th, .dlm-rd-table td { border-bottom: 1px solid var(--mud-palette-lines-default); padding: 5px 8px; text-align: left; vertical-align: middle; }
.dlm-rd-table th { background: var(--mud-palette-background-gray); font-weight: 600; }
.dlm-rd-table tr.dlm-rd-head { cursor: pointer; }
.dlm-rd-table tr.dlm-rd-head:hover { background: var(--mud-palette-action-default-hover); }
.dlm-rd-table tr.dlm-rd-detail > td { background: var(--mud-palette-background-gray); padding: 6px 8px 10px 32px; }
.dlm-rd-table td.n { text-align: right; font-variant-numeric: tabular-nums; width: 80px; }
.dlm-rd-readers { display: flex; flex-wrap: wrap; gap: 4px 12px; }
.dlm-rd-reader { display: inline-flex; align-items: center; gap: 4px; }

/* Card that fills its grid cell, so side-by-side cards end at the same line (Min konto). */
.dlm-fill-height { height: 100%; }

/* Min konto → Dokumenter å lese: long file names break and the buttons (Åpne / Lest og forstått)
   stay pinned to the right edge, so they are reachable at laptop widths. */
#lesing td:nth-child(2) { overflow-wrap: anywhere; min-width: 160px; }
#lesing td.dlm-actions-cell,
#lesing thead th:last-child {
    position: sticky;
    right: 0;
    z-index: 1;
    background: var(--mud-palette-surface);
    box-shadow: -6px 0 8px -6px rgba(0, 0, 0, 0.15);
}

/* Regnskapseksport → oppsett: tabla de mapeo de IVA (sats → mva-kode / salgskonto). */
.dlm-vat-map th {
    text-align: left;
    padding: 4px 10px;
    font-weight: 600;
    color: var(--mud-palette-text-secondary);
}

.dlm-vat-map td .mud-input-control {
    margin: 0;
}

.dlm-vat-map .dlm-muted {
    color: var(--mud-palette-text-secondary);
    margin-left: 6px;
}

/* Regnskapseksport → detalle de una corrida: documento, importe, fecha, estado, resultado. */
.dlm-export-detail .col-ref {
    width: 34%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dlm-export-detail .col-amount {
    width: 120px;
    text-align: right;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.dlm-export-detail .col-date {
    width: 100px;
    white-space: nowrap;
}

/* ---- Produkter: publicación en el Kundeportal ------------------------------
   Barra sobre la selección, estado por fila y el diálogo para publicar varios. */
.dlm-selection-bar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    padding: 6px 12px;
    border-radius: 8px;
    background: rgba(0, 129, 155, 0.08);
    border: 1px solid rgba(0, 129, 155, 0.3);
}

.dlm-selection-bar,
.dlm-selection-hint {
    /* Misma altura con y sin selección: si la tabla se desplaza al marcar, el siguiente clic cae en otra fila. */
    min-height: 46px;
    box-sizing: border-box;
}

.dlm-selection-hint {
    display: flex;
    align-items: center;
    padding: 0 12px;
    border: 1px solid transparent;
}

.dlm-portal-sub {
    display: flex;
    flex-wrap: wrap;
    gap: 2px 8px;
    padding-left: 4px;
}

.dlm-portal-warn {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    color: var(--mud-palette-warning-darken);
}

.dlm-portal-warn .mud-icon-root {
    font-size: 14px;
}

/* El botón "Publiser" solo destaca al pasar por la fila: la lista no se llena de llamadas. */
.dlm-portal-publish {
    opacity: .55;
}

tr:hover .dlm-portal-publish,
.dlm-portal-publish:focus-visible {
    opacity: 1;
}

.dlm-w-300 {
    max-width: 300px;
}

.dlm-publish-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
    max-height: min(480px, 55vh);
    overflow-y: auto;
    padding-right: 4px;
}

.dlm-publish-row {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) 190px;
    gap: 12px;
    align-items: start;
    padding: 6px 0;
    border-bottom: 1px solid var(--mud-palette-lines-default);
}

.dlm-publish-product {
    padding-top: 10px;
    font-size: .875rem;
    word-break: break-word;
}

.dlm-publish-row .mud-input-control {
    margin-top: 0 !important;
}

@media (max-width: 700px) {
    .dlm-publish-row {
        grid-template-columns: 1fr 170px;
    }

    .dlm-publish-product {
        grid-column: 1 / -1;
        padding-top: 0;
    }
}

/* ============================================================
   DLM Mobil (/m/*) — área móvil: columna única, nav inferior
   ============================================================ */

.dlm-mobil-shell {
    max-width: 560px;
    margin: 0 auto;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
}

.dlm-mobil-content {
    flex: 1;
    padding: 0 16px calc(76px + env(safe-area-inset-bottom));
}

/* --- navegación inferior (altura de pulgar) --- */
.dlm-mobil-nav {
    position: fixed;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    max-width: 560px;
    display: flex;
    background: var(--mud-palette-surface);
    border-top: 1px solid var(--mud-palette-lines-default);
    padding-bottom: env(safe-area-inset-bottom);
    z-index: 10;
}

.dlm-mobil-nav-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 9px 0 10px;
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--mud-palette-text-secondary);
    text-decoration: none;
    border-top: 2px solid transparent;
    margin-top: -1px;
}

.dlm-mobil-nav-item.active {
    color: var(--mud-palette-primary);
    border-top-color: var(--mud-palette-primary);
}

/* --- cabecera --- */
.dlm-mobil-header {
    background: var(--mud-palette-primary);
    color: var(--mud-palette-primary-text);
    margin: 0 -16px 16px;
    padding: 18px 20px 14px;
}

.dlm-mobil-header-slim { padding-bottom: 12px; }

.dlm-mobil-header-top {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
}

.dlm-mobil-header-app {
    font-size: 0.72rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    opacity: .8;
}

.dlm-mobil-header-name {
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1.3;
}

.dlm-mobil-header-lab,
.dlm-mobil-header-sub {
    font-size: 0.78rem;
    opacity: .85;
}

.dlm-mobil-header-hint {
    font-size: 0.72rem;
    opacity: .75;
    margin-top: 6px;
}

.dlm-mobil-dept-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 10px;
}

.dlm-mobil-dept-chip {
    font-size: 0.72rem;
    font-weight: 600;
    padding: 3px 10px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .16);
    border: 1px solid rgba(255, 255, 255, .32);
}

/* --- KPIs --- */
.dlm-mobil-kpis {
    display: flex;
    gap: 10px;
    margin-bottom: 14px;
}

.dlm-mobil-kpi {
    flex: 1;
    background: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 14px;
    padding: 12px 14px;
    text-decoration: none;
}

.dlm-mobil-kpi-number {
    font-size: 1.7rem;
    font-weight: 800;
    line-height: 1;
}

.dlm-mobil-kpi-ready { color: var(--mud-palette-primary); }
.dlm-mobil-kpi-incoming { color: var(--mud-palette-warning); }

.dlm-mobil-kpi-label {
    font-size: 0.74rem;
    font-weight: 600;
    color: var(--mud-palette-text-secondary);
    margin-top: 4px;
}

/* --- tarjeta de carga semanal --- */
.dlm-mobil-card {
    background: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 14px;
    padding: 13px 14px;
    margin-bottom: 14px;
}

.dlm-mobil-card-title {
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    margin-bottom: 10px;
}

.dlm-mobil-card-foot {
    font-size: 0.7rem;
    color: var(--mud-palette-text-secondary);
    margin-top: 8px;
}

.dlm-mobil-bars {
    display: flex;
    align-items: flex-end;
    gap: 7px;
    min-height: 92px;
}

.dlm-mobil-bar-col {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    gap: 4px;
}

.dlm-mobil-bar-count {
    font-size: 0.68rem;
    color: var(--mud-palette-text-secondary);
}

.dlm-mobil-bar {
    width: 100%;
    border-radius: 5px;
    background: color-mix(in srgb, var(--mud-palette-primary) 40%, transparent);
}

.dlm-mobil-bar-today { background: var(--mud-palette-primary); }

.dlm-mobil-bar-day {
    font-size: 0.64rem;
    color: var(--mud-palette-text-secondary);
    white-space: nowrap;
}

.dlm-mobil-bar-day-today {
    color: var(--mud-palette-primary);
    font-weight: 700;
}

.dlm-mobil-cta { border-radius: 12px; }

/* --- lista "I dag" --- */
.dlm-mobil-section { margin-bottom: 16px; }

.dlm-mobil-section-title {
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    margin-bottom: 6px;
}

.dlm-mobil-section-count {
    font-weight: 500;
    color: var(--mud-palette-text-secondary);
    margin-left: 4px;
}

.dlm-mobil-section-hint {
    font-size: 0.7rem;
    color: var(--mud-palette-text-secondary);
    margin-bottom: 6px;
}

.dlm-mobil-empty {
    font-size: 0.78rem;
    color: var(--mud-palette-text-secondary);
    padding: 6px 2px;
}

.dlm-mobil-row {
    background: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 13px;
    padding: 10px 12px;
    margin-bottom: 8px;
}

.dlm-mobil-row-delayed { border-color: var(--mud-palette-warning); }

.dlm-mobil-row-incoming { border-style: dashed; }

.dlm-mobil-row-top {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 8px;
}

.dlm-mobil-row-number {
    font-family: ui-monospace, Menlo, Consolas, monospace;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--mud-palette-primary);
}

.dlm-mobil-row-target {
    font-size: 0.72rem;
    color: var(--mud-palette-text-secondary);
}

.dlm-mobil-row-product {
    font-size: 0.86rem;
    font-weight: 500;
    margin-top: 2px;
}

.dlm-mobil-row-meta {
    font-size: 0.72rem;
    color: var(--mud-palette-text-secondary);
    margin-top: 2px;
}

.dlm-mobil-chip {
    font-size: 0.64rem;
    font-weight: 700;
    padding: 2px 9px;
    border-radius: 999px;
    white-space: nowrap;
}

.dlm-mobil-chip-ready {
    color: var(--mud-palette-primary);
    background: color-mix(in srgb, var(--mud-palette-primary) 12%, transparent);
}

.dlm-mobil-chip-delayed {
    color: var(--mud-palette-warning);
    background: color-mix(in srgb, var(--mud-palette-warning) 14%, transparent);
}

.dlm-mobil-foot-note {
    text-align: center;
    font-size: 0.7rem;
    color: var(--mud-palette-text-secondary);
    margin: 10px 0 4px;
}

/* --- diálogo de traspaso (escritorio) --- */
.dlm-mobil-dialog {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    text-align: center;
    padding: 4px 4px 8px;
}

.dlm-mobil-dialog-connected { padding: 18px 4px; }

.dlm-mobil-qr {
    padding: 10px;
    background: #fff;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 12px;
    min-width: 176px;
    min-height: 176px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.dlm-mobil-qr img { display: block; }

.dlm-mobil-qr-progress {
    width: 196px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.dlm-mobil-pin {
    font-family: ui-monospace, Menlo, Consolas, monospace;
    font-size: 1.5rem;
    font-weight: 600;
    letter-spacing: .35em;
    padding-left: .35em; /* compensa el tracking del último dígito */
}

/* --- página /m/kode (PIN sin cámara) --- */
.dlm-mobil-kode {
    min-height: 70dvh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    text-align: center;
    padding: 24px 8px;
}

.dlm-mobil-kode-icon {
    font-size: 3rem !important;
    color: var(--mud-palette-primary);
}

.dlm-mobil-kode-title {
    font-size: 1.15rem;
    font-weight: 700;
}

.dlm-mobil-kode-hint {
    font-size: 0.82rem;
    color: var(--mud-palette-text-secondary);
    max-width: 280px;
}

.dlm-mobil-kode-form {
    display: flex;
    gap: 8px;
    margin-top: 8px;
}

.dlm-mobil-kode-input {
    width: 170px;
    padding: 11px 12px;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 11px;
    font-family: ui-monospace, Menlo, Consolas, monospace;
    font-size: 1.15rem;
    text-align: center;
    letter-spacing: .3em;
    background: var(--mud-palette-surface);
}

.dlm-mobil-kode-submit {
    padding: 0 18px;
    border: none;
    border-radius: 11px;
    background: var(--mud-palette-primary);
    color: var(--mud-palette-primary-text);
    font-weight: 700;
    font-size: 0.9rem;
    cursor: pointer;
}

/* --- DLM Mobil F2: filas accionables, oppgave, rail --- */

.dlm-mobil-row-btn {
    display: block;
    width: 100%;
    text-align: left;
    cursor: pointer;
    font-family: inherit;
    font-size: inherit;
}

.dlm-mobil-row-btn:active { filter: brightness(0.97); }

.dlm-mobil-row-running {
    border-color: var(--mud-palette-primary);
    background: color-mix(in srgb, var(--mud-palette-primary) 6%, var(--mud-palette-surface));
}

.dlm-mobil-row-done {
    background: color-mix(in srgb, var(--mud-palette-success) 7%, var(--mud-palette-surface));
    border-color: color-mix(in srgb, var(--mud-palette-success) 35%, transparent);
}

.dlm-mobil-row-cta {
    font-size: 0.74rem;
    font-weight: 700;
    color: var(--mud-palette-primary);
    margin-top: 6px;
}

.dlm-mobil-chip-running {
    color: var(--mud-palette-primary);
    background: color-mix(in srgb, var(--mud-palette-primary) 14%, transparent);
}

.dlm-mobil-back {
    background: rgba(255, 255, 255, .15) !important;
    color: var(--mud-palette-primary-text) !important;
    margin-right: 8px;
}

.dlm-mobil-resp-badge {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-top: 10px;
    padding: 4px 12px;
    border-radius: 999px;
    font-size: 0.74rem;
    font-weight: 700;
    background: rgba(255, 255, 255, .15);
    border: 1px solid rgba(255, 255, 255, .32);
}

.dlm-mobil-resp-dot {
    width: 7px;
    height: 7px;
    border-radius: 4px;
    background: #7BE3C2;
}

/* rail de prosedyrer */
.dlm-mobil-rail { display: flex; flex-direction: column; }

.dlm-mobil-rail-row { display: flex; gap: 10px; align-items: stretch; }

.dlm-mobil-rail-track {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 22px;
    flex-shrink: 0;
}

.dlm-mobil-rail-dot {
    width: 21px;
    height: 21px;
    border-radius: 11px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.66rem;
    font-weight: 800;
    color: #fff;
    flex-shrink: 0;
}

.dlm-mobil-rail-dot-done { background: var(--mud-palette-success); }
.dlm-mobil-rail-dot-current { background: var(--mud-palette-primary); }
.dlm-mobil-rail-dot-future {
    background: var(--mud-palette-background-gray, #E6DECF);
    color: var(--mud-palette-text-secondary);
}

.dlm-mobil-rail-line {
    width: 2px;
    flex: 1;
    min-height: 12px;
    background: var(--mud-palette-lines-default);
}

.dlm-mobil-rail-line-done { background: var(--mud-palette-success); }

.dlm-mobil-rail-body { padding-bottom: 10px; min-width: 0; flex: 1; }

.dlm-mobil-rail-top {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 8px;
}

.dlm-mobil-rail-name { font-size: 0.84rem; font-weight: 600; }
.dlm-mobil-rail-name-future { color: var(--mud-palette-text-secondary); font-weight: 500; }

.dlm-mobil-rail-dept {
    font-size: 0.68rem;
    color: var(--mud-palette-text-secondary);
    white-space: nowrap;
}

.dlm-mobil-rail-meta { font-size: 0.7rem; color: var(--mud-palette-text-secondary); }

/* barra de acción pegada abajo (sobre la nav) */
.dlm-mobil-action-bar {
    position: sticky;
    bottom: calc(60px + env(safe-area-inset-bottom));
    padding: 8px 0 4px;
    background: linear-gradient(transparent, var(--mud-palette-background) 35%);
}

/* --- DLM Mobil F3: escáner de cámara, materiales, selector --- */

.dlm-mobil-scanner {
    position: relative;
    background: #13262B;
    border-radius: 13px;
    overflow: hidden;
    margin-bottom: 8px;
    min-height: 200px;
}

.dlm-mobil-scanner-video {
    display: block;
    width: 100%;
    max-height: 260px;
    object-fit: cover;
}

.dlm-mobil-scanner-fallback { width: 100%; }
.dlm-mobil-scanner-fallback video { width: 100% !important; }

.dlm-mobil-scanner-hint {
    position: absolute;
    bottom: 6px;
    left: 0;
    right: 0;
    text-align: center;
    font-size: 0.7rem;
    font-family: ui-monospace, Menlo, Consolas, monospace;
    color: rgba(255, 255, 255, .75);
    text-shadow: 0 1px 2px rgba(0, 0, 0, .6);
    pointer-events: none;
}

.dlm-mobil-mat-row {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 8px 10px;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 11px;
    margin-bottom: 6px;
    background: var(--mud-palette-surface);
}

.dlm-mobil-mat-dot {
    width: 7px;
    height: 7px;
    border-radius: 4px;
    flex-shrink: 0;
    background: var(--mud-palette-success);
}

.dlm-mobil-mat-dot-warn { background: var(--mud-palette-warning); }
.dlm-mobil-mat-dot-bad { background: var(--mud-palette-error); }

.dlm-mobil-mat-name {
    font-size: 0.82rem;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dlm-mobil-mat-meta {
    font-size: 0.7rem;
    font-family: ui-monospace, Menlo, Consolas, monospace;
    color: var(--mud-palette-text-secondary);
}

.dlm-mobil-picker-list {
    max-height: 46dvh;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.dlm-mobil-picker-item {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1px;
    width: 100%;
    text-align: left;
    padding: 9px 12px;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 11px;
    background: var(--mud-palette-surface);
    font-family: inherit;
    font-size: 0.84rem;
    font-weight: 600;
    cursor: pointer;
}

.dlm-mobil-picker-item:active { filter: brightness(0.96); }

/* --- DLM Mobil: logo y acciones rapidas en la lista --- */

.dlm-mobil-logo-chip {
    width: 42px;
    height: 42px;
    border-radius: 11px;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 2px 6px rgba(0, 0, 0, .18);
}

.dlm-mobil-logo-chip img {
    width: 30px;
    height: auto;
    display: block;
}

.dlm-mobil-kode-logo {
    width: 64px;
    height: auto;
}

.dlm-mobil-row-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-top: 7px;
}

/* --- DLM Mobil: linterna del escáner --- */
.dlm-mobil-torch {
    position: absolute !important;
    top: 6px;
    right: 6px;
    color: #fff !important;
    background: rgba(0, 0, 0, .35) !important;
    z-index: 3;
}

/* ==== Configurable dashboard (25/10/2026) ==========================================
   12-column grid: S = 3 columns, M = 6, L = 12 (up to 1280 px wide: S = 6, M/L = 12). Row
   heights are set by dlmStudio.dashFit (all rows share the screen; compact KPI strips are
   fixed). Card = icon chip, title + subtitle, header actions, edit tools; the body scrolls. */
.dlm-dash { display: block; }
.dlm-dash.editing {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 270px;
    gap: 16px;
    align-items: start;
}
.dlm-dash-grid {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    grid-auto-flow: row dense;
    gap: 12px;
}
.dlm-dash-w { grid-column: span 3; min-width: 0; min-height: 0; }
.dlm-dash-w.size-m { grid-column: span 6; }
.dlm-dash-w.size-l { grid-column: span 12; }
@media (max-width: 1280px) {
    .dlm-dash-w { grid-column: span 6; }
    .dlm-dash-w.size-m, .dlm-dash-w.size-l { grid-column: span 12; }
}
@media (max-width: 700px) {
    .dlm-dash-w { grid-column: span 12; }
    .dlm-dash.editing { grid-template-columns: minmax(0, 1fr); }
}
.dlm-dash-card {
    height: 100%;
    display: flex;
    flex-direction: column;
    background: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 10px;
    overflow: hidden;
}
.dlm-dash-head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px 6px 12px;
    flex-wrap: wrap;
    row-gap: 4px;
    min-height: 48px;
    outline: none;
}
.dlm-dash-head:focus-visible { box-shadow: inset 0 0 0 2px var(--mud-palette-primary); border-radius: 10px 10px 0 0; }
.dlm-dash-icon {
    flex: 0 0 auto;
    width: 30px; height: 30px;
    border-radius: 8px;
    display: inline-flex; align-items: center; justify-content: center;
}
.dlm-dash-icon.tint-petrol { background: color-mix(in srgb, var(--mud-palette-primary) 14%, transparent); color: var(--mud-palette-primary); }
.dlm-dash-icon.tint-green { background: color-mix(in srgb, var(--mud-palette-success) 16%, transparent); color: var(--mud-palette-success); }
.dlm-dash-icon.tint-blue { background: color-mix(in srgb, var(--mud-palette-info) 16%, transparent); color: var(--mud-palette-info); }
.dlm-dash-icon.tint-amber { background: color-mix(in srgb, var(--mud-palette-warning) 18%, transparent); color: var(--mud-palette-warning-darken); }
.dlm-dash-icon.tint-red { background: color-mix(in srgb, var(--mud-palette-error) 14%, transparent); color: var(--mud-palette-error); }
.dlm-dash-titles { flex: 1 1 120px; min-width: 0; }
.dlm-dash-title {
    font-size: .78rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
    color: var(--mud-palette-text-secondary);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.dlm-dash-meta { font-size: .78rem; color: var(--mud-palette-text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dlm-dash-meta:empty { display: none; }
.dlm-dash-actions { flex: 0 0 auto; display: flex; align-items: center; gap: 2px; }
.dlm-dash-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
    padding: 4px 14px 12px 14px;
}
.dlm-dash-w.compact .dlm-dash-head { padding-bottom: 2px; min-height: 40px; }
.dlm-dash-w.compact .dlm-dash-body { padding-top: 0; overflow: visible; flex: 0 0 auto; }

/* KPI strip inside a card. */
.dlm-dash-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.dlm-dash-kpi {
    display: flex; flex-direction: column; justify-content: center; gap: 1px; min-width: 0;
    padding: 2px 10px; border-left: 3px solid var(--mud-palette-lines-default);
}
.dlm-dash-kpi .label {
    display: flex; align-items: center; gap: 6px;
    font-size: .74rem; color: var(--mud-palette-text-secondary);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.dlm-dash-kpi b { font-size: 1.35rem; font-weight: 600; font-variant-numeric: tabular-nums; line-height: 1.2; white-space: nowrap; }
.dlm-dash-kpi .sub { font-size: .74rem; color: var(--mud-palette-text-secondary); }
@media (max-width: 960px) { .dlm-dash-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Chart fills the card body. */
.dlm-dash-body .dlm-nyh-list { max-height: none; }

/* Shared states: skeleton, empty, error. */
.dlm-dash-skeleton { padding-top: 6px; }
.dlm-dash-state {
    height: 100%; min-height: 90px;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
    text-align: center; color: var(--mud-palette-text-secondary); font-size: .85rem;
}
.dlm-dash-empty { min-height: 260px; border: 1px dashed var(--mud-palette-lines-default); border-radius: 10px; }

/* Edit mode: dashed cards, header as handle, bodies dimmed and inert, no text selection. */
.dlm-dash.editing .dlm-dash-grid { user-select: none; }
.dlm-dash.editing .dlm-dash-card,
.dlm-dash-grid.design .dlm-dash-card { border-style: dashed; border-color: color-mix(in srgb, var(--mud-palette-primary) 45%, transparent); }
.dlm-dash.editing .dlm-dash-head,
.dlm-dash-grid.design .dlm-dash-head { cursor: grab; }
.dlm-dash.editing .dlm-dash-body { opacity: .45; pointer-events: none; }
.dlm-dash.editing .dlm-dash-actions { display: none; }
.dlm-dash-tools { display: flex; align-items: center; gap: 4px; flex: 0 0 auto; margin-left: auto; cursor: default; }
.dlm-dash-sizes { display: inline-flex; border: 1px solid var(--mud-palette-lines-default); border-radius: 6px; overflow: hidden; }
.dlm-dash-sizes button, .dlm-dash-hide {
    border: 0; background: transparent; cursor: pointer;
    font: inherit; font-size: .72rem; font-weight: 600; color: var(--mud-palette-text-secondary);
    padding: 2px 7px; min-width: 24px;
}
.dlm-dash-sizes button + button { border-left: 1px solid var(--mud-palette-lines-default); }
.dlm-dash-sizes button.on { background: var(--mud-palette-primary); color: var(--mud-palette-primary-text); }
.dlm-dash-sizes button:disabled { opacity: .35; cursor: not-allowed; }
.dlm-dash-hide { display: inline-flex; align-items: center; padding: 2px; border-radius: 6px; }
.dlm-dash-hide:hover { background: color-mix(in srgb, var(--mud-palette-error) 14%, transparent); color: var(--mud-palette-error); }

/* Catalogue column (edit mode). */
.dlm-dash-catalogue {
    position: sticky; top: 76px;
    max-height: calc(100vh - 100px); overflow: auto;
    background: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 10px;
    padding: 10px;
    display: flex; flex-direction: column; gap: 6px;
}
.dlm-dash-catalogue-title { font-size: .78rem; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--mud-palette-text-secondary); padding: 2px 4px 4px; }
.dlm-dash-cat-item {
    display: flex; align-items: center; gap: 10px;
    padding: 8px; border-radius: 8px; cursor: pointer; outline: none;
}
.dlm-dash-cat-item:hover, .dlm-dash-cat-item:focus-visible { background: color-mix(in srgb, var(--mud-palette-primary) 8%, transparent); }
.dlm-dash-cat-title { font-weight: 600; font-size: .85rem; }
.dlm-dash-cat-desc { font-size: .75rem; color: var(--mud-palette-text-secondary); }

/* Role designer: role list, canvas with fixed rows and placeholder bodies, widget table. */
.dlm-dash-grid.design { grid-auto-rows: 118px; }
.dlm-dash-placeholder { font-size: .8rem; color: var(--mud-palette-text-secondary); }
.dlm-dash-design { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 16px; align-items: start; }
@media (max-width: 960px) { .dlm-dash-design { grid-template-columns: minmax(0, 1fr); } }
.dlm-dash-roles { display: flex; flex-direction: column; gap: 2px; }
.dlm-dash-role {
    display: flex; align-items: center; gap: 8px;
    padding: 8px 10px; border-radius: 8px; cursor: pointer; outline: none;
}
.dlm-dash-role:hover, .dlm-dash-role:focus-visible { background: color-mix(in srgb, var(--mud-palette-primary) 6%, transparent); }
.dlm-dash-role.on { background: color-mix(in srgb, var(--mud-palette-primary) 14%, transparent); font-weight: 600; }
.dlm-dash-role-text { flex: 1 1 auto; min-width: 0; }
.dlm-dash-role-text .name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dlm-dash-role-text .meta { font-size: .72rem; color: var(--mud-palette-text-secondary); font-weight: 400; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dlm-dash-role-sep { border-top: 1px solid var(--mud-palette-lines-default); margin: 6px 0; }
.dlm-dash-gate { font-size: .74rem; color: var(--mud-palette-text-secondary); }
.dlm-dash-gate.off { color: var(--mud-palette-warning-darken); }
/* Pointer drag (dlmStudio.dashDragInit): no page scrolling on touch while dragging a header. */
.dlm-dash-head[data-drag='1'] { touch-action: none; }
body.dlm-dash-dragging, body.dlm-dash-dragging * { cursor: grabbing !important; user-select: none !important; }

/* Drag feedback (25/10/2026): a floating copy follows the pointer, the card stays dimmed in place,
   and the target shows a bar on the side where the card will land. */
.dlm-dash-w { position: relative; }
.dlm-dash-w.dragging .dlm-dash-card { opacity: .35; border-style: dashed; }
.dlm-dash-w.drop .dlm-dash-card { box-shadow: 0 0 0 2px var(--mud-palette-primary); }
.dlm-dash-w.drop-before::before,
.dlm-dash-w.drop-after::after {
    content: ""; position: absolute; top: 6px; bottom: 6px; width: 5px; border-radius: 3px;
    background: var(--mud-palette-primary); z-index: 2;
}
.dlm-dash-w.drop-before::before { left: -9px; }
.dlm-dash-w.drop-after::after { right: -9px; }
.dlm-dash-ghost {
    position: fixed; left: 0; top: 0; z-index: 3000; pointer-events: none;
    opacity: .92; overflow: hidden; border-radius: 10px;
    box-shadow: 0 12px 32px rgba(16, 38, 64, .28);
}
.dlm-dash-ghost .dlm-dash-card { border-style: solid; }

/* Chart: the SVG fills the body exactly (block, no baseline gap), so no scrollbar. */
.dlm-dash-body:has(> .dlm-dash-chart) { overflow: hidden; }
.dlm-dash-chart { height: 100%; min-height: 0; overflow: hidden; }
.dlm-dash-chart .dlm-chart { display: block; width: 100%; height: 100%; }

/* Prosedyrer per medarbeider: filters in the card header, only the table scrolls. */
.dlm-procstats-tools { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; padding-top: 4px; }
.dlm-procstats-tools .mud-input-control { margin-top: 0; }
.dlm-procstats .dlm-stats-table thead th { position: sticky; top: 0; background: var(--mud-palette-surface); z-index: 1; }

/* Role designer: canvas on the left, the role's cards in a column on the right. */
.dlm-dash-design-body { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 16px; align-items: start; }
@media (max-width: 1280px) { .dlm-dash-design-body { grid-template-columns: minmax(0, 1fr); } }
.dlm-dash-design-side { top: 76px; }
.dlm-dash-side-item { display: flex; align-items: flex-start; gap: 10px; padding: 8px; border-radius: 8px; }
.dlm-dash-side-item:hover { background: color-mix(in srgb, var(--mud-palette-primary) 6%, transparent); }
.dlm-dash-side-item.off .dlm-dash-icon,
.dlm-dash-side-item.off .dlm-dash-cat-title { opacity: .5; }
.dlm-dash-side-text { flex: 1 1 auto; min-width: 0; }
.dlm-dash-side-check { margin-left: -10px; }
.dlm-dash-side-check .mud-typography { font-size: .78rem; }

/* «Arbeidsmengde neste 7 dager» (25/10/2026): one clickable column per working day, a leading
   «Forsinket» column, bars stacked by department. The card body is a size container so narrow
   cards (M) drop the legend and the chips' text. */
.dlm-dash-body:has(> .dlm-wl) { overflow: hidden; container-type: inline-size; }
.dlm-wl { height: 100%; display: flex; flex-direction: column; gap: 6px; min-height: 0; }
.dlm-wl-cols { flex: 1 1 auto; min-height: 0; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 8px; }
.dlm-wl-col {
    all: unset; box-sizing: border-box; cursor: pointer; min-width: 0; min-height: 0;
    display: flex; flex-direction: column; align-items: stretch; gap: 3px;
    padding: 6px 8px 8px; border-radius: 8px;
    border: 1px solid var(--mud-palette-lines-default);
    background: color-mix(in srgb, var(--mud-palette-background) 45%, transparent);
}
.dlm-wl-col:hover, .dlm-wl-col:focus-visible { border-color: var(--mud-palette-primary); background: color-mix(in srgb, var(--mud-palette-primary) 6%, transparent); }
.dlm-wl-col.today { border-color: var(--mud-palette-primary); box-shadow: inset 0 3px 0 var(--mud-palette-primary); }
.dlm-wl-col.overdue { border-color: color-mix(in srgb, var(--mud-palette-error) 45%, transparent); background: color-mix(in srgb, var(--mud-palette-error) 7%, transparent); }
.dlm-wl-day { font-size: .74rem; font-weight: 600; text-transform: capitalize; color: var(--mud-palette-text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dlm-wl-col.today .dlm-wl-day { color: var(--mud-palette-primary); }
.dlm-wl-col.overdue .dlm-wl-day { color: var(--mud-palette-error); }
.dlm-wl-finish { display: flex; align-items: baseline; gap: 5px; white-space: nowrap; }
.dlm-wl-finish b { font-size: 1.45rem; font-weight: 600; line-height: 1.1; font-variant-numeric: tabular-nums; }
.dlm-wl-finish small { font-size: .72rem; color: var(--mud-palette-text-secondary); }
.dlm-wl-chips { display: flex; gap: 4px; flex-wrap: wrap; }
.dlm-wl-chip { font-size: .72rem; font-weight: 600; padding: 0 6px; border-radius: 10px; line-height: 18px; white-space: nowrap; }
.dlm-wl-chip.start { color: var(--mud-palette-success-darken); background: color-mix(in srgb, var(--mud-palette-success) 14%, transparent); }
.dlm-wl-chip.risk { color: var(--mud-palette-error); background: color-mix(in srgb, var(--mud-palette-error) 13%, transparent); }
.dlm-wl-chip.zero { color: var(--mud-palette-text-disabled); background: transparent; }
.dlm-wl-barbox { flex: 1 1 auto; min-height: 30px; display: flex; flex-direction: column; justify-content: flex-end; align-items: stretch; margin-top: 2px; }
.dlm-wl-total { font-size: .72rem; font-weight: 600; text-align: center; color: var(--mud-palette-text-secondary); min-height: 14px; }
.dlm-wl-bar { display: flex; flex-direction: column-reverse; min-height: 0; border-radius: 5px 5px 2px 2px; overflow: hidden; margin: 0 12%; }
.dlm-wl-seg { flex-basis: 0; min-height: 2px; }
.dlm-wl-legend { flex: 0 0 auto; display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: .72rem; color: var(--mud-palette-text-secondary); }
.dlm-wl-legend-item { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.dlm-wl-legend-item i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
.dlm-wl-legend-note { margin-left: auto; font-style: italic; }
@container (max-width: 760px) {
    .dlm-wl-legend { display: none; }
    .dlm-wl-finish small { display: none; }
    .dlm-wl-cols { gap: 4px; }
    .dlm-wl-col { padding: 5px 4px 6px; }
}

/* MDR widgets of the dashboard (02/11/2026): MDR-status and Dokumenter å lese */
.dlm-mdrw { display: flex; flex-direction: column; gap: 10px; }
.dlm-mdrw a { color: inherit; text-decoration: none; }
.dlm-mdrw-head { display: flex; align-items: center; gap: 16px; }
.dlm-mdrw-ring { position: relative; width: 76px; height: 76px; flex: 0 0 auto; }
.dlm-mdrw-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.dlm-mdrw-ring circle { fill: none; stroke-width: 3.2; }
.dlm-mdrw-ring .track { stroke: var(--mud-palette-lines-default); }
.dlm-mdrw-ring .value { stroke-linecap: round; }
.dlm-mdrw-ring.ok .value { stroke: #2e7d32; } .dlm-mdrw-ring.warn .value { stroke: #ef8f00; } .dlm-mdrw-ring.over .value { stroke: #c62828; }
.dlm-mdrw-ring b { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 1.35rem; }
.dlm-mdrw-trend { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; color: var(--mud-palette-primary); }
.dlm-mdrw-trend svg { width: 100%; height: 40px; }
.dlm-mdrw-trend span { font-size: .75rem; color: var(--mud-palette-text-secondary); }
.dlm-mdrw-trend span.up { color: #2e7d32; } .dlm-mdrw-trend span.down { color: #c62828; }
.dlm-mdrw-counters { display: grid; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); gap: 6px; }
.dlm-mdrw-counter { display: flex; flex-direction: column; padding: 6px 8px; border-radius: 6px; border: 1px solid var(--mud-palette-lines-default); line-height: 1.2; }
.dlm-mdrw-counter:hover { background: rgba(0, 129, 155, 0.08); }
.dlm-mdrw-counter b { font-size: 1.15rem; }
.dlm-mdrw-counter span { font-size: .72rem; color: var(--mud-palette-text-secondary); }
.dlm-mdrw-counter small { font-size: .7rem; color: #c62828; font-weight: 600; }
.dlm-mdrw-counter.zero b { color: #2e7d32; font-weight: 500; }
.dlm-mdrw-counter.zero { opacity: .75; }
.dlm-mdrw-counter.overdue { border-color: #c62828; }
.dlm-mdrw-title { font-size: .72rem; font-weight: 600; text-transform: uppercase; color: var(--mud-palette-text-secondary); margin-top: 4px; }
.dlm-mdrw-none { font-size: .8125rem; color: #2e7d32; }
.dlm-mdrw-row { display: flex; align-items: center; gap: 8px; padding: 3px 6px; border-radius: 4px; font-size: .8125rem; min-width: 0; }
.dlm-mdrw-row:hover { background: rgba(0, 129, 155, 0.08); }
.dlm-mdrw-date { width: 58px; flex: 0 0 auto; color: var(--mud-palette-text-secondary); white-space: nowrap; }
.dlm-mdrw-date.overdue { color: #c62828; font-weight: 600; }
.dlm-mdrw-text { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dlm-mdrw-text small { display: block; font-size: .72rem; color: var(--mud-palette-text-secondary); overflow: hidden; text-overflow: ellipsis; }
/* Size S: only the ring and the counters. */
.dlm-dash-w:not(.size-m):not(.size-l) .dlm-mdrw-more { display: none; }

/* Kunderabatt: discount brackets in the customer editor (02/11/2026) */
.dlm-discount-tbl { max-width: 560px; }
.dlm-discount-tbl th { font-size: .75rem; color: var(--mud-palette-text-secondary); font-weight: 500; }
.dlm-discount-tbl td { padding: 2px 6px !important; vertical-align: middle; }
.dlm-discount-tbl .mud-input-control { margin: 0; }
.dlm-discount-tbl input { text-align: right; }

/* ---- Enlace al cliente (KundeLink, PO 03/11/2026) ----
   El nombre abre la ficha del cliente encima de la página. Discreto: el color del texto,
   subrayado punteado; el color de acento solo al pasar por encima. */
.dlm-kunde-link {
    color: inherit;
    text-decoration: underline dotted;
    text-decoration-color: color-mix(in srgb, currentColor 45%, transparent);
    text-underline-offset: 3px;
    cursor: pointer;
}

.dlm-kunde-link:hover {
    color: var(--mud-palette-primary);
    text-decoration-style: solid;
    text-decoration-color: currentColor;
}

.dlm-type-impact {
    margin: 0 0 0 18px;
    padding: 0;
}