/* ---------- Aplikacija (MudBlazor) ---------- */

.engam-appbar {
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.engam-brand {
    white-space: nowrap;
    font-weight: 700;
    letter-spacing: 0.06em;
}

.engam-brand span {
    font-weight: 400;
    opacity: 0.7;
}

.engam-user-chip {
    color: inherit !important;
}

.engam-drawer {
    border-right: 1px solid var(--mud-palette-lines-default);
}

.engam-nav-header {
    font-size: 0.7rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin-top: 0.75rem;
}

.engam-logout-button {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    width: 100%;
    padding: 6px 16px;
    border: 0;
    background: none;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.engam-logout-button:hover {
    background-color: var(--mud-palette-action-default-hover);
}

.engam-stat-value {
    font-variant-numeric: tabular-nums;
}

h1:focus {
    outline: none;
}

/* ---------- Identity stranice (Bootstrap) ---------- */

.account-page {
    min-height: 100vh;
    background: #F4F6F9;
    font-family: Inter, "Segoe UI", Arial, sans-serif;
}

.account-header {
    background: #14243A;
    padding: 0.9rem 1.5rem;
}

.account-brand {
    color: #fff;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-decoration: none;
}

.account-brand span {
    font-weight: 400;
    opacity: 0.7;
}

.account-brand:hover {
    color: #fff;
}

.account-main {
    max-width: 960px;
    margin: 0 auto;
    padding: 3rem 1rem;
}

.account-card {
    max-width: 420px;
    margin: 0 auto;
    background: #fff;
    border: 1px solid #E2E6EC;
    border-radius: 8px;
    padding: 2rem;
}

.account-page .btn-primary {
    background-color: #1F5FA8;
    border-color: #1F5FA8;
}

/* ---------- Greška u Blazor krugu ---------- */

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

#blazor-error-ui .dismiss {
    cursor: pointer;
    position: absolute;
    right: 0.75rem;
    top: 0.5rem;
}

.blazor-error-boundary {
    background: #b32121;
    padding: 1rem;
    color: white;
}

.blazor-error-boundary::after {
    content: "Došlo je do greške.";
}

.validation-message {
    color: #b32121;
}

.engam-muted {
    color: var(--mud-palette-text-secondary);
}

/* ---------- Terminal u pogonu: radno mjesto (tamno, krupno, za ekran na dodir) ---------- */

.terminal {
    --ck-bg: #05080d;
    --ck-panel: linear-gradient(180deg, rgba(22, 30, 46, 0.85), rgba(12, 17, 26, 0.85));
    --ck-line: rgba(140, 170, 210, 0.16);
    --ck-text: #e8eef6;
    --ck-dim: #8f9cb0;
    --ck-faint: #465264;
    --ck-cyan: #38c8ff;
    --ck-green: #34d399;
    --ck-amber: #fbbf24;
    --ck-red: #f87171;
    --ck-blue: #60a5fa;
    min-height: 100vh;
    background: radial-gradient(ellipse 70% 45% at 50% 0%, rgba(56, 200, 255, 0.07), transparent 70%), var(--ck-bg);
    color: var(--ck-text);
    font-family: Inter, "Segoe UI", Arial, sans-serif;
}

/* Tastatura za PIN */

.pinpad-display {
    display: flex;
    justify-content: center;
    gap: 0.9rem;
    margin-bottom: 1.25rem;
}

.pinpad-dot {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 2px solid var(--ck-dim);
}

.pinpad-dot.filled {
    background: var(--ck-cyan);
    border-color: var(--ck-cyan);
    box-shadow: 0 0 10px rgba(56, 200, 255, 0.6);
}

.pinpad-keys {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.75rem;
}

.pinpad-key {
    height: 76px;
    border: 1px solid var(--ck-line);
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.04);
    color: var(--ck-text);
    font: inherit;
    font-size: 1.9rem;
    font-weight: 500;
    cursor: pointer;
    touch-action: manipulation;
}

.pinpad-key:active {
    background: rgba(56, 200, 255, 0.18);
}

.pinpad-key-muted {
    color: var(--ck-dim);
}

.terminal-big-button {
    min-height: 56px;
    font-size: 1.05rem !important;
}

/* Brojač količina */

.terminal-counter-label {
    margin-bottom: 0.4rem;
    color: var(--ck-dim);
}

.terminal-counter-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.terminal-counter-button {
    width: 64px;
    height: 64px;
    border: 1px solid var(--ck-line);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.04);
    color: var(--ck-text);
    font-size: 2rem;
    cursor: pointer;
    touch-action: manipulation;
}

.terminal-counter-input {
    width: 110px;
    height: 64px;
    border: 1px solid var(--ck-line);
    border-radius: 14px;
    background: rgba(0, 0, 0, 0.3);
    color: var(--ck-text);
    font-size: 1.8rem;
    font-weight: 700;
    text-align: center;
}

/* ---------- Print radnog naloga (A4) ---------- */

.print-page {
    min-height: 100vh;
    padding: 1.5rem 0;
    background: #e9ecef;
    color: #000;
    font-family: Inter, "Segoe UI", Arial, sans-serif;
    font-size: 11pt;
}

.print-toolbar {
    display: flex;
    gap: 1rem;
    align-items: center;
    max-width: 210mm;
    margin: 0 auto 1rem;
}

.print-toolbar button {
    padding: 0.5rem 1.4rem;
    border: 0;
    border-radius: 4px;
    background: #1F5FA8;
    color: #fff;
    font: inherit;
    font-weight: 600;
    cursor: pointer;
}

.print-toolbar button.secondary {
    background: #fff;
    color: #1F5FA8;
    border: 1.5px solid #1F5FA8;
}

.print-toolbar a {
    color: #1F5FA8;
}

.print-sheet {
    box-sizing: border-box;
    width: 210mm;
    min-height: 297mm;
    margin: 0 auto;
    padding: 14mm 14mm 12mm;
    background: #fff;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
    display: flex;
    flex-direction: column;
}

.print-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding-bottom: 4mm;
    border-bottom: 2px solid #000;
    margin-bottom: 5mm;
}

.print-company {
    font-size: 12pt;
    font-weight: 700;
    letter-spacing: 0.15em;
}

.print-title {
    font-size: 18pt;
    font-weight: 700;
    margin-top: 2mm;
}

.print-number {
    font-size: 26pt;
    font-weight: 700;
    white-space: nowrap;
}

.print-flag {
    display: inline-block;
    margin-top: 2mm;
    padding: 1mm 3mm;
    border: 1px solid #000;
    font-weight: 700;
}

.print-qr svg {
    width: 32mm;
    height: 32mm;
}

.print-facts,
.print-steps {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 5mm;
}

.print-facts th,
.print-facts td,
.print-steps th,
.print-steps td {
    border: 1px solid #000;
    padding: 1.6mm 2mm;
    text-align: left;
    vertical-align: top;
}

.print-facts th {
    width: 17%;
    background: #f1f1f1;
    font-weight: 600;
    font-size: 9pt;
}

.print-steps th {
    background: #f1f1f1;
    font-size: 9pt;
}

.print-steps td {
    height: 12mm;
}

.print-strong {
    font-weight: 700;
    font-size: 12pt;
}

.print-label {
    font-size: 9pt;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 1.5mm;
}

.print-notes {
    margin-bottom: 5mm;
    padding: 2mm 3mm;
    border: 1px solid #000;
}

.print-pre {
    white-space: pre-wrap;
}

.print-footer {
    margin-top: auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 4mm;
    padding-top: 8mm;
}

.print-meta {
    width: 100%;
    font-size: 8pt;
    color: #555;
}

@page {
    size: A4;
    margin: 0;
}

@media print {
    .print-page {
        padding: 0;
        background: none;
    }

    .print-toolbar {
        display: none;
    }

    .print-sheet {
        box-shadow: none;
        margin: 0;
    }
}

/* ---------- Tabla praćenja proizvodnje ---------- */

.board {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    padding-bottom: 12px;
    align-items: flex-start;
}

.board-column {
    flex: 0 0 280px;
    display: flex;
    flex-direction: column;
    max-height: calc(100vh - 190px);
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 8px;
    background: var(--mud-palette-background-gray);
}

.board-column-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 12px;
    font-weight: 600;
    border-bottom: 1px solid var(--mud-palette-lines-default);
}

.board-column.is-open .board-column-head {
    color: var(--mud-palette-text-secondary);
}

.board-column.is-finished .board-column-head {
    color: var(--mud-palette-success);
}

.board-cards {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 8px;
    overflow-y: auto;
}

.board-card {
    padding: 10px 12px;
    border: 1px solid var(--mud-palette-lines-default);
    border-left: 4px solid var(--mud-palette-lines-default);
    border-radius: 6px;
    background: var(--mud-palette-surface);
    cursor: pointer;
}

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

.board-card.is-working {
    border-left-color: var(--mud-palette-primary);
}

.board-card.is-late {
    border-left-color: var(--mud-palette-error);
}

.board-card.is-late .board-card-due {
    color: var(--mud-palette-error);
    font-weight: 700;
}

.board-card-number {
    font-weight: 700;
}

.board-card-due {
    font-size: 0.85rem;
    font-variant-numeric: tabular-nums;
}

.board-card-item {
    font-weight: 500;
}

.board-card-meta {
    font-size: 0.8rem;
    color: var(--mud-palette-text-secondary);
}

.board-card-worker {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-top: 6px;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--mud-palette-primary);
}

/* ---------- Materijal ---------- */

.color-swatch {
    display: inline-block;
    width: 18px;
    height: 18px;
    margin-right: 4px;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 3px;
    vertical-align: middle;
}

.engam-mono input {
    font-family: Consolas, "Cascadia Mono", monospace;
}

.receipt-lines td {
    vertical-align: top;
}

/* ---------- Print ponude i otpremnice ---------- */

.print-address {
    min-width: 70mm;
    font-size: 10pt;
}

.print-lines td {
    height: auto;
}

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

.print-lines tfoot td {
    border-top: 2px solid #000;
}

/* ---------- Dokumenti ---------- */

.doc-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 0;
    border-bottom: 1px solid var(--mud-palette-lines-default);
}

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

.doc-main {
    flex: 1;
    min-width: 0;
}

.doc-name {
    word-break: break-word;
}

.doc-row.selectable {
    cursor: pointer;
    border-radius: 4px;
    padding-left: 6px;
    padding-right: 2px;
}

.doc-row.selectable:hover {
    background-color: var(--mud-palette-action-default-hover);
}

.doc-row.selected {
    background-color: var(--mud-palette-primary-hover);
    box-shadow: inset 3px 0 0 var(--mud-palette-primary);
}

/* ---------- Pregled dokumenta (Engam.Viewer) ---------- */

/* Na širokom ekranu pregled prati skrolanje stranice. */
.doc-preview-sticky {
    position: sticky;
    top: 64px;
}

@media (max-width: 1279.98px) {
    .doc-preview-sticky {
        position: static;
    }
}

.print-sheet .text-nowrap {
    white-space: nowrap;
}

/* ---------- Katalog alata ---------- */

.tool-card {
    display: flex;
    gap: 20px;
    align-items: flex-start;
}

.tool-image {
    flex: 0 0 150px;
    height: 110px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    background: #fff;
    border: 1px solid var(--mud-palette-lines-default);
    overflow: hidden;
}

.tool-image img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.tool-image img.is-type {
    opacity: .55;
}

.tool-body {
    flex: 1;
    min-width: 0;
}

.tool-sizes {
    overflow-x: auto;
}

.tool-sizes th,
.tool-sizes td {
    white-space: nowrap;
}

.iso-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    border-radius: 12px;
    font-size: .78rem;
    font-weight: 600;
    color: #fff;
    background: var(--iso, #777);
    white-space: nowrap;
    text-shadow: 0 0 2px rgba(0, 0, 0, .45);
}

/* "dobro" uokvireno, "vrlo dobro" popunjeno bojom ISO grupe. */
.iso-badge.is-good {
    background: transparent;
    color: var(--mud-palette-text-primary);
    border: 1.5px solid var(--iso, #777);
    text-shadow: none;
    padding: 1px 7px;
}

.iso-dot {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    margin-right: 6px;
    vertical-align: middle;
}

.tool-column {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 0 2px 0 6px;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 16px;
    font-weight: 600;
    background: var(--mud-palette-background-gray);
}

.tool-grid-wrap {
    overflow-x: auto;
}

.tool-grid {
    border-collapse: collapse;
    width: 100%;
}

.tool-grid th {
    text-align: left;
    font-size: .8rem;
    font-weight: 600;
    color: var(--mud-palette-text-secondary);
    padding: 4px 4px 6px;
    white-space: nowrap;
}

.tool-grid td {
    padding: 2px 4px;
    min-width: 90px;
}

.tool-grid td.col-code {
    min-width: 160px;
}

.tool-grid td.col-price {
    min-width: 110px;
}

.tool-grid td:last-child {
    min-width: 0;
}

.tool-grid .mud-input-control {
    margin: 0;
}

.tool-paste-input textarea {
    font-family: Consolas, monospace;
    font-size: .85rem;
}

.tool-iso {
    width: 100%;
    border-collapse: collapse;
}

.tool-iso td {
    padding: 2px 4px;
    border-bottom: 1px solid var(--mud-palette-lines-default);
}

.tool-iso tr.is-off .iso-name,
.tool-iso tr.is-off .iso-badge {
    opacity: .5;
}

.tool-iso .iso-name {
    font-size: .88rem;
}

.tool-iso .iso-rating {
    width: 170px;
}

.tool-iso .iso-vc {
    width: 100px;
}

.tool-iso .mud-input-control {
    margin: 0;
}

.tool-images {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
    gap: 16px;
}

.tool-image-slot {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.slot-preview {
    height: 130px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px dashed var(--mud-palette-lines-default);
    border-radius: 8px;
    background: #fff;
    overflow: hidden;
}

.slot-preview img {
    max-width: 100%;
    max-height: 128px;
    object-fit: contain;
}

.lookup-table td {
    vertical-align: middle;
}

.lookup-edit .mud-input-control {
    margin: 0;
}

@media (max-width: 700px) {
    .tool-card {
        flex-direction: column;
        align-items: stretch;
    }

    .tool-image {
        flex-basis: auto;
        width: 100%;
    }
}

/* ---------- Demo podaci ---------- */

.demo-list {
    margin: 0;
    padding-left: 20px;
}

.demo-list li {
    margin-bottom: 6px;
}

/* ---------- Kokpit i mapa pogona: taman ekran, ambijentalno svjetlo prema stanju pogona ---------- */

.cockpit {
    --ck-bg: #04060a;
    --ck-panel: linear-gradient(180deg, rgba(22, 30, 46, 0.78), rgba(10, 14, 22, 0.78));
    --ck-line: rgba(140, 170, 210, 0.14);
    --ck-text: #e8eef6;
    --ck-dim: #8391a5;
    --ck-faint: #3a4454;
    --ck-cyan: #38c8ff;
    --ck-green: #34d399;
    --ck-amber: #fbbf24;
    --ck-red: #f87171;
    --ck-blue: #60a5fa;
    --ambient: var(--ck-cyan);
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 18px;
    min-height: 100vh;
    padding: 0 28px 24px;
    color: var(--ck-text);
    background:
        radial-gradient(ellipse 55% 40% at 50% 36%, color-mix(in srgb, var(--ambient) 10%, transparent), transparent 72%),
        radial-gradient(ellipse 90% 50% at 50% 105%, rgba(56, 200, 255, 0.06), transparent 70%),
        var(--ck-bg);
    font-family: Inter, "Segoe UI", Arial, sans-serif;
    overflow-x: hidden;
    transition: background 1s;
}

.cockpit.status-good { --ambient: var(--ck-green); }
.cockpit.status-warn { --ambient: var(--ck-amber); }
.cockpit.status-bad { --ambient: var(--ck-red); }

/* Traka ambijentalnog svjetla na vrhu ekrana. */
.cockpit::before {
    content: "";
    position: absolute;
    top: 0;
    left: 8%;
    right: 8%;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--ambient), transparent);
    box-shadow: 0 0 22px 3px var(--ambient);
    opacity: 0.85;
}

@media (max-width: 640px) {
    .cockpit {
        gap: 16px;
        padding: 0 16px 20px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .cockpit *,
    .cockpit *::before {
        animation: none !important;
        transition: none !important;
    }
}

/* ---------- Upiti: red čekanja i prijem ---------- */

.rq-tiles {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 0.75rem;
}

.rq-tile {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.15rem;
    padding: 0.75rem 1rem;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 8px;
    background: var(--mud-palette-surface);
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.rq-tile:hover {
    background: var(--mud-palette-action-default-hover);
}

.rq-tile.active {
    border-color: var(--mud-palette-primary);
    box-shadow: inset 0 0 0 1px var(--mud-palette-primary);
}

.rq-tile-value {
    font-size: 1.6rem;
    font-weight: 700;
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
}

.rq-tile-label {
    font-size: 0.8rem;
    color: var(--mud-palette-text-secondary);
}

.rq-red .rq-tile-value {
    color: var(--mud-palette-error);
}

.rq-amber .rq-tile-value {
    color: var(--mud-palette-warning);
}

.rq-dot {
    flex: none;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--mud-palette-lines-default);
}

.rq-dot-overdue {
    background: var(--mud-palette-error);
    box-shadow: 0 0 0 3px rgba(244, 67, 54, 0.2);
}

.rq-dot-urgent {
    background: var(--mud-palette-warning);
    box-shadow: 0 0 0 3px rgba(255, 152, 0, 0.2);
}

.rq-dot-soon {
    background: #f2c94c;
}

.rq-dot-ok {
    background: var(--mud-palette-success);
}

.engam-drop {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
    border: 2px dashed var(--mud-palette-lines-inputs);
    border-radius: 8px;
    padding: 1.25rem;
    text-align: center;
    cursor: pointer;
    transition: border-color 0.15s, background-color 0.15s;
}

.engam-drop:hover,
.engam-drop.dragging {
    border-color: var(--mud-palette-primary);
    background: var(--mud-palette-primary-hover);
}

.rq-turn {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
    padding: 0.9rem 1rem;
    border-radius: 8px;
    border-left: 4px solid var(--mud-palette-primary);
    background: var(--mud-palette-background-gray);
}

.rq-turn.rq-turn-customer {
    border-left-color: var(--mud-palette-warning);
}

.rq-turn.rq-turn-closed {
    border-left-color: var(--mud-palette-error);
}

/* ---------- Radna mjesta u uredu (prijem upita, tehnolog): tamni izgled (ekran igre) koristi boje terminala (--ck-*), svijetli boje MudBlazor teme ---------- */

.desk {
    --d-panel: rgba(255, 255, 255, 0.03);
    --d-line: var(--ck-line, rgba(140, 170, 210, 0.16));
    --d-text: var(--ck-text, #e8eef6);
    --d-dim: var(--ck-dim, #8f9cb0);
    --d-accent: #7ea6d8;
    --d-gold: #d9a441;
    --d-red: #e07a7a;
    --d-hover: rgba(255, 255, 255, 0.04);
    color: var(--d-text);
}

.desk.is-light {
    --d-panel: var(--mud-palette-surface);
    --d-line: var(--mud-palette-lines-default);
    --d-text: var(--mud-palette-text-primary);
    --d-dim: var(--mud-palette-text-secondary);
    --d-accent: var(--mud-palette-primary);
    --d-gold: var(--mud-palette-warning);
    --d-red: var(--mud-palette-error);
    --d-hover: var(--mud-palette-action-default-hover);
}

.desk.is-dark {
    min-height: 100vh;
    font-size: 1.02rem;
}

/* Zaglavlje ekrana igre (kao terminal) */

.dg-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 24px;
    border-bottom: 1px solid var(--d-line);
    background: rgba(8, 12, 19, 0.85);
}

.dg-brand {
    font-weight: 700;
    letter-spacing: 0.2em;
}

.dg-brand span {
    color: var(--d-dim);
    font-weight: 400;
}

.dg-clock {
    font-size: 1.5rem;
    font-weight: 300;
    font-variant-numeric: tabular-nums;
}

.is-dark .desk-main {
    max-width: 1600px;
    margin: 0 auto;
    padding: 20px 24px 40px;
}

/* Novi upit: pločice kao izbor akcije u igri */

.desk-new {
    display: grid;
    grid-template-columns: minmax(0, 2.2fr) repeat(3, minmax(0, 1fr));
    gap: 12px;
    margin-bottom: 18px;
}

.desk-new-tile {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    border: 1px solid var(--d-line);
    border-radius: 8px;
    background: var(--d-panel);
    color: inherit;
    text-decoration: none;
    transition: border-color 0.12s;
}

.desk-new-tile:hover {
    border-color: var(--d-accent);
}

.desk-new-tile.is-main {
    border-color: var(--d-accent);
}

.desk-new-icon {
    color: var(--d-accent);
}

.desk-new-tile b {
    display: block;
}

.desk-new-tile small {
    color: var(--d-dim);
    font-size: 0.78rem;
}

/* Paneli sa zadacima */

.desk-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(320px, 1fr);
    align-items: start;
    gap: 18px;
}

.desk-col {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.desk-panel {
    padding: 14px 16px;
    border: 1px solid var(--d-line);
    border-radius: 10px;
    background: var(--d-panel);
}

.desk-panel-head {
    display: flex;
    align-items: center;
    gap: 10px;
}

.desk-panel-icon {
    color: var(--d-dim);
}

.desk-panel-title {
    flex: 1;
    font-weight: 600;
}

.desk-panel-count {
    min-width: 28px;
    padding: 2px 8px;
    border-radius: 999px;
    background: var(--d-hover);
    color: var(--d-dim);
    font-size: 0.85rem;
    font-weight: 600;
    text-align: center;
}

.desk-panel-hint {
    margin: 2px 0 8px;
    color: var(--d-dim);
    font-size: 0.8rem;
}

.desk-empty {
    padding: 10px 0 4px;
    color: var(--d-dim);
    font-size: 0.9rem;
}

.desk-quest {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 8px;
    padding: 10px 12px;
    border: 1px solid var(--d-line);
    border-left: 3px solid var(--d-line);
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.12s;
}

.desk-quest:hover {
    background: var(--d-hover);
}

.desk-quest.is-soon {
    border-left-color: var(--d-gold);
}

.desk-quest.is-late {
    border-left-color: var(--d-red);
}

.desk-quest-main {
    flex: 1;
    min-width: 0;
}

.desk-quest-title {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.desk-quest-sub {
    color: var(--d-dim);
    font-size: 0.8rem;
}

.desk-quest-side {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
}

.desk-reward {
    padding: 1px 8px;
    border: 1px solid var(--d-line);
    border-radius: 999px;
    color: var(--d-dim);
    font-size: 0.75rem;
    white-space: nowrap;
}

.desk-due {
    color: var(--d-dim);
    font-size: 0.78rem;
    white-space: nowrap;
}

.is-late .desk-due {
    color: var(--d-red);
    font-weight: 600;
}

.is-soon .desk-due {
    color: var(--d-gold);
    font-weight: 600;
}

.desk-take {
    padding: 5px 12px;
    border: 1px solid var(--d-accent);
    border-radius: 6px;
    background: transparent;
    color: var(--d-accent);
    font: inherit;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
}

@media (max-width: 1100px) {
    .desk-grid,
    .desk-new {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* ---------- Tabla upita: kolone su koraci toka, kartica se prevlači u sljedeći korak ---------- */

.rb {
    display: flex;
    align-items: stretch;
    gap: 12px;
    overflow-x: auto;
    padding-bottom: 8px;
}

.rb-column {
    display: flex;
    flex: 1 1 0;
    min-width: 200px;
    flex-direction: column;
    max-height: calc(100vh - 230px);
    padding: 10px;
    border-radius: 10px;
    background: var(--mud-palette-background-gray);
}

.rb-drop-only {
    flex: 0 0 150px;
    min-width: 150px;
    border: 2px dashed var(--mud-palette-lines-inputs);
    background: transparent;
}

.rb-head {
    display: flex;
    align-items: center;
    gap: 6px;
    font-weight: 600;
}

.rb-head .rb-head-icon {
    color: var(--mud-palette-text-secondary);
}

.rb-count {
    margin-left: auto;
    padding: 0 8px;
    border-radius: 999px;
    background: var(--mud-palette-surface);
    color: var(--mud-palette-text-secondary);
    font-size: 0.8rem;
}

.rb-hint {
    margin: 2px 0 8px;
    color: var(--mud-palette-text-secondary);
    font-size: 0.75rem;
}

.rb-zone {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 8px;
    min-height: 140px;
    padding: 4px;
    overflow-y: auto;
    border: 2px solid transparent;
    border-radius: 8px;
    transition: background-color 0.12s, border-color 0.12s;
}

.rb-zone.rb-can-drop {
    border-color: var(--mud-palette-primary);
    border-style: dashed;
    background: var(--mud-palette-primary-hover);
}

.rb-zone.rb-no-drop {
    opacity: 0.45;
}

.rb-card {
    padding: 8px 10px;
    border: 1px solid var(--mud-palette-lines-default);
    border-left: 3px solid var(--mud-palette-lines-inputs);
    border-radius: 6px;
    background: var(--mud-palette-surface);
    font-size: 0.85rem;
    cursor: grab;
    transition: box-shadow 0.12s;
}

.rb-card:hover {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
}

.rb-card.is-late {
    border-left-color: var(--mud-palette-error);
}

.rb-card.is-soon {
    border-left-color: var(--mud-palette-warning);
}

.rb-card.is-locked {
    cursor: pointer;
    opacity: 0.8;
}

.rb-card-top {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    column-gap: 6px;
}

.rb-card-top b {
    white-space: nowrap;
}

.rb-due {
    color: var(--mud-palette-text-secondary);
    font-size: 0.75rem;
    white-space: nowrap;
}

.is-late .rb-due {
    color: var(--mud-palette-error);
    font-weight: 600;
}

.is-soon .rb-due {
    color: var(--mud-palette-warning);
    font-weight: 600;
}

.rb-customer {
    margin-top: 2px;
    font-weight: 500;
}

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

.rb-card-foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin-top: 6px;
    min-height: 22px;
}

.rb-person {
    display: inline-grid;
    place-items: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--mud-palette-background-gray);
    font-size: 0.65rem;
    font-weight: 600;
}

.rb-holder {
    color: var(--mud-palette-text-secondary);
    font-size: 0.75rem;
}

.rb-badge {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 0 7px;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 999px;
    color: var(--mud-palette-text-secondary);
    font-size: 0.72rem;
}

.rb-badge.is-waiting {
    border-color: var(--mud-palette-warning);
    color: var(--mud-palette-warning);
}

.rb-badge.is-ready {
    border-color: var(--mud-palette-success);
    color: var(--mud-palette-success);
}

.rb-task {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-top: 4px;
    color: var(--mud-palette-text-secondary);
    font-size: 0.75rem;
}

/* ---------- Komercijala: zadaci po pravilima šefa (kartice, traka zadataka upita, raspodjela, pravila) ---------- */

.km-section-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
    font-weight: 600;
}

.km-section-hint {
    color: var(--mud-palette-text-secondary);
    font-size: 0.8rem;
    font-weight: 400;
}

.km-board {
    display: flex;
    align-items: stretch;
    gap: 12px;
    overflow-x: auto;
    padding-bottom: 8px;
}

.km-column {
    display: flex;
    flex: 1 1 0;
    min-width: 230px;
    flex-direction: column;
    max-height: calc(100vh - 260px);
    padding: 10px;
    border-radius: 10px;
    background: var(--mud-palette-background-gray);
}

.km-column-head {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
    font-weight: 600;
}

.km-column-dot {
    flex: none;
    width: 10px;
    height: 10px;
    border-radius: 50%;
}

.km-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 8px;
}

.km-card {
    padding: 8px 10px;
    border: 1px solid var(--mud-palette-lines-default);
    border-left: 4px solid var(--km-color, var(--mud-palette-lines-inputs));
    border-radius: 6px;
    background: var(--mud-palette-surface);
    font-size: 0.85rem;
    cursor: grab;
    transition: box-shadow 0.12s;
}

.km-card:hover {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
}

.km-card.is-system {
    cursor: pointer;
}

.km-card.is-blocked {
    opacity: 0.75;
}

.km-card-top {
    display: flex;
    justify-content: space-between;
    gap: 6px;
}

.km-card-request {
    overflow: hidden;
    color: var(--mud-palette-text-secondary);
    font-size: 0.75rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.km-card-name {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-top: 2px;
    font-weight: 600;
}

.km-system-icon {
    flex: none;
    color: var(--mud-palette-text-secondary);
}

.km-card-foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin-top: 6px;
}

.km-status {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: var(--mud-palette-text-secondary);
    font-size: 0.75rem;
    white-space: nowrap;
}

.km-status::before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--km-color, var(--mud-palette-lines-inputs));
}

.km-due {
    color: var(--mud-palette-text-secondary);
    font-size: 0.75rem;
    white-space: nowrap;
}

.is-late .km-due,
.km-seg.is-late .km-seg-due {
    color: var(--mud-palette-error);
    font-weight: 600;
}

.is-soon .km-due,
.km-seg.is-soon .km-seg-due {
    color: var(--mud-palette-warning);
    font-weight: 600;
}

.km-wait {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    color: var(--mud-palette-text-secondary);
    font-size: 0.72rem;
}

/* Uslov gotovosti zadatka: provjere podataka upita (ispunjeno / nedostaje). */
.km-checks {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 14px;
    margin-top: 2px;
}

.km-check {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.85rem;
}

.km-check.is-ok .mud-icon-root {
    color: var(--mud-palette-success);
}

.km-check.is-missing {
    color: var(--mud-palette-text-secondary);
}

.km-rule-text.km-missing {
    color: var(--mud-palette-warning-darken);
}

.km-worker {
    margin-left: auto;
}

.km-note {
    margin-top: 4px;
    color: var(--mud-palette-text-secondary);
    font-size: 0.75rem;
    font-style: italic;
}

.km-action {
    margin-top: 6px;
}

.km-hint {
    color: var(--mud-palette-text-secondary);
    font-size: 0.75rem;
}

/* Traka zadataka upita: segment po zadatku, redom; boja je boja statusa */

.km-strip {
    display: grid;
    grid-auto-columns: minmax(0, 1fr);
    grid-auto-flow: column;
    gap: 4px;
}

.km-seg {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 2px;
    padding: 5px 7px;
    border: 1px solid color-mix(in srgb, var(--km-color) 40%, transparent);
    border-top: 4px solid var(--km-color);
    border-radius: 6px;
    background: color-mix(in srgb, var(--km-color) 12%, var(--mud-palette-surface));
    color: inherit;
    font: inherit;
    font-size: 0.72rem;
    text-align: left;
    cursor: pointer;
}

.km-seg:hover {
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
}

.km-seg.is-current {
    box-shadow: 0 0 0 2px var(--mud-palette-primary);
}

.km-seg.is-blocked {
    opacity: 0.55;
}

.km-seg-name {
    overflow: hidden;
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.km-seg-meta {
    display: flex;
    justify-content: space-between;
    gap: 4px;
    overflow: hidden;
    color: var(--mud-palette-text-secondary);
    white-space: nowrap;
}

/* Upit na panelu šefa */

.km-requests {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.km-request {
    padding: 12px 14px;
    border: 1px solid var(--mud-palette-lines-default);
    border-left: 4px solid var(--mud-palette-lines-inputs);
    border-radius: 10px;
    background: var(--mud-palette-surface);
}

.km-request.is-late {
    border-left-color: var(--mud-palette-error);
}

.km-request.is-soon {
    border-left-color: var(--mud-palette-warning);
}

.km-request-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 10px;
    margin-bottom: 8px;
}

.km-request-title {
    font-weight: 700;
}

.km-request-customer {
    font-weight: 500;
}

.km-request-foot {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 8px;
    margin-top: 8px;
    color: var(--mud-palette-text-secondary);
    font-size: 0.8rem;
}

.km-request-empty {
    color: var(--mud-palette-text-secondary);
    font-size: 0.85rem;
}

.km-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 1px 8px;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 999px;
    color: var(--mud-palette-text-secondary);
    font-size: 0.75rem;
    white-space: nowrap;
}

.km-chip.is-late {
    border-color: var(--mud-palette-error);
    color: var(--mud-palette-error);
    font-weight: 600;
}

.km-chip.is-soon,
.km-chip.is-waiting {
    border-color: var(--mud-palette-warning);
    color: var(--mud-palette-warning);
}

.km-progress {
    padding: 2px 10px;
    border-radius: 999px;
    background: var(--mud-palette-background-gray);
    color: var(--mud-palette-text-secondary);
    font-size: 0.8rem;
    font-weight: 600;
}

/* Zadaci na detalju upita i rokovi kupca */

.km-task-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 6px;
    padding: 8px 10px;
    border: 1px solid var(--mud-palette-lines-default);
    border-left: 4px solid var(--km-color);
    border-radius: 6px;
    cursor: pointer;
}

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

.km-task-row.is-current {
    box-shadow: inset 0 0 0 1px var(--mud-palette-primary);
}

.km-line {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 0;
    border-bottom: 1px solid var(--mud-palette-lines-default);
    font-size: 0.875rem;
}

/* Pravila rada */

.km-rules-zone {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-height: 60px;
}

.km-rule {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 8px;
    background: var(--mud-palette-surface);
    cursor: grab;
}

.km-rule:hover {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.km-rule.is-inactive {
    opacity: 0.55;
}

.km-rule-handle {
    flex: none;
    color: var(--mud-palette-text-disabled);
}

.km-rule-pos {
    display: grid;
    flex: none;
    place-items: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--mud-palette-background-gray);
    font-size: 0.8rem;
    font-weight: 600;
}

.km-rule-main {
    flex: 1;
    min-width: 0;
}

.km-rule-name {
    display: flex;
    align-items: center;
    gap: 4px;
    font-weight: 600;
}

.km-rule-text {
    color: var(--mud-palette-text-secondary);
    font-size: 0.8rem;
}

.km-rule-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 4px;
}

.km-swatches {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 6px;
}

.km-swatch {
    width: 22px;
    height: 22px;
    border: 2px solid transparent;
    border-radius: 50%;
    cursor: pointer;
}

.km-swatch.is-selected {
    border-color: var(--mud-palette-text-primary);
}

.km-color-field .mud-input-adornment-end .mud-icon-root {
    color: var(--km-color);
}

@media (max-width: 900px) {
    .km-strip {
        grid-auto-flow: row;
        grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    }
}

/* Ploča radnika komercijale: koliko je ostalo; cilj je čista ploča */

.km-board-status {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
    padding: 10px 14px;
    border: 1px solid var(--mud-palette-lines-default);
    border-left: 4px solid var(--mud-palette-primary);
    border-radius: 8px;
    background: var(--mud-palette-surface);
}

.km-board-status.is-soon {
    border-left-color: var(--mud-palette-warning);
}

.km-board-status.is-late {
    border-left-color: var(--mud-palette-error);
}

.km-board-status.is-clean {
    border-left-color: var(--mud-palette-success);
    color: var(--mud-palette-success);
}

.km-board-goal {
    margin-left: auto;
    color: var(--mud-palette-text-secondary);
    font-size: 0.8rem;
}

/* Pošta komercijale (quote@) i zamjena šefice */

.km-mails {
    max-height: calc(100vh - 330px);
    overflow-y: auto;
    padding-right: 4px;
}

.km-mail {
    padding: 10px 12px;
    border: 1px solid var(--mud-palette-lines-default);
    border-left: 4px solid var(--mud-palette-lines-inputs);
    border-radius: 8px;
    background: var(--mud-palette-surface);
    font-size: 0.85rem;
    cursor: pointer;
}

.km-mail:hover {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.km-mail.is-new {
    border-left-color: var(--mud-palette-warning);
}

.km-mail.is-selected {
    box-shadow: 0 0 0 2px var(--mud-palette-primary);
}

.km-mail-from {
    overflow: hidden;
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.km-mail-preview {
    display: -webkit-box;
    overflow: hidden;
    margin-top: 2px;
    color: var(--mud-palette-text-secondary);
    font-size: 0.78rem;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.km-mail-text {
    padding: 12px 14px;
    border-radius: 8px;
    background: var(--mud-palette-background-gray);
    font-size: 0.9rem;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.km-deputy {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    border: 1px solid var(--mud-palette-lines-default);
    border-left: 4px solid var(--mud-palette-info);
    border-radius: 8px;
    background: var(--mud-palette-surface);
}

/* Traka zadataka: inicijali u punom kružiću = zadatak je sada na ploči tog radnika */

.km-seg-who {
    padding: 0 5px;
    border-radius: 999px;
}

.km-seg-who.is-onboard {
    background: var(--mud-palette-primary);
    color: var(--mud-palette-primary-text);
    font-weight: 600;
}

.km-reported {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 8px;
    margin-top: 8px;
}

/* Historija maila za ponude: od maila i odgovora do upita, ponude i narudžbe. */
.km-history {
    display: flex;
    flex-direction: column;
}

.km-history-item {
    display: flex;
    gap: 10px;
    padding: 8px 0;
    border-top: 1px solid var(--mud-palette-lines-default);
}

.km-history-item:first-child {
    border-top: none;
}

.km-history-icon {
    color: var(--mud-palette-text-secondary);
    margin-top: 2px;
}

.km-history-item.is-reply .km-history-icon {
    color: var(--mud-palette-primary);
}

.km-history-main {
    flex: 1;
    min-width: 0;
}

.km-history-title {
    font-size: 0.875rem;
}

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

.km-history-quote {
    margin-top: 6px;
    padding: 8px 12px;
    border-left: 3px solid var(--mud-palette-primary);
    background: var(--mud-palette-background-gray);
    font-size: 0.85rem;
    white-space: pre-line;
}

/* Kompaktna, mekša polja obrasca (upit): manji font, zaobljeni uglovi, tanak neutralan okvir. */
.engam-form .mud-input,
.engam-form .mud-input-slot { font-size: .875rem; }
.engam-form .mud-input-label { font-size: .875rem; }
.engam-form .mud-input.mud-input-outlined .mud-input-outlined-border {
    border-radius: 10px;
    border-width: 1px;
    border-color: var(--mud-palette-lines-inputs);
    transition: border-color .15s, box-shadow .15s;
}
.engam-form .mud-input.mud-input-outlined:hover:not(.mud-disabled) .mud-input-outlined-border {
    border-color: var(--mud-palette-text-secondary);
}
.engam-form .mud-input.mud-input-outlined.mud-focused .mud-input-outlined-border {
    border-width: 1px;
    border-color: var(--mud-palette-primary);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--mud-palette-primary) 18%, transparent);
}
.engam-form .mud-input-control { margin-top: 0; }
.engam-form .mud-icon-button { padding: 6px; }