/* =========================================================
   I-Block: this app's page layout, on Würth UI (wurth-ui/).
   Components come from the design system; everything here is
   arrangement, written with its tokens so light and dark both work.
   ========================================================= */

/* ── Frame: header, steps, the page, the action bar at the bottom ── */

.ib-app {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    min-height: 100dvh;
    background: var(--surface);
}

.ib-page {
    flex: 1 0 auto;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-content: start;
    gap: var(--space);
    min-width: 0;
    padding: var(--space);
}

/* The page heading takes focus after navigation, for screen readers; no ring for it */
h1:focus {
    outline: none;
}

.ib-title {
    min-width: 0;
    margin: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* A title and its status pill, 8 px apart */
.ib-title-row {
    display: flex;
    align-items: center;
    gap: var(--space-tight);
    min-width: 0;
}

.ib-title-row > .wh-pill {
    flex: none;
}

/* A title with its tools at the right */
.ib-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space);
    min-width: 0;
}

/* A card title that ends at its text, so its pill follows 8 px after it */
.wh-card-title.ib-title-fit {
    flex: 0 1 auto;
}

.ib-option-line {
    display: flex;
    align-items: baseline;
    gap: var(--space-tight);
    min-width: 0;
    margin: var(--space-tight) 0 0;
    color: var(--muted);
}

/* A labelled group on the page: History, What if, Cannot be made */
.ib-group {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-tight);
    min-width: 0;
}

.ib-group-head {
    margin: 0;
}

/* A red line with the button that fixes it */
.ib-alert {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-tight) var(--space);
}

.ib-muted {
    color: var(--muted);
}

.ib-red {
    color: var(--red-text);
}

.ib-strong {
    font-weight: 600;
}

.ib-flat {
    margin: 0;
}

.ib-note {
    margin: var(--space-tight) 0 0;
}

.ib-line {
    display: block;
}

.ib-cut {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ib-pad {
    padding: var(--space);
}


/* ── Sheets and columns ───────────────────────────────────────── */

/* The request's details and pieces beside its history */
.ib-sheet {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
    gap: var(--space);
}

@media (min-width: 992px) {
    .ib-sheet {
        grid-template-columns: minmax(0, 1fr) 320px;
    }
}

/* Form fields in a grid; wide fields take the row */
.ib-fields {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr));
    gap: var(--space);
}

.ib-fields-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.ib-span-2 {
    grid-column: span 2;
}

.ib-wide {
    grid-column: 1 / -1;
}

@media (max-width: 767.98px) {
    .ib-fields-3 {
        grid-template-columns: minmax(0, 1fr);
    }

    .ib-span-2 {
        grid-column: auto;
    }
}

/* Checkboxes on the line of the fields beside them */
.ib-checks {
    align-items: center;
    min-height: var(--control-40);
}

.ib-field-narrow {
    width: min(100%, 200px);
}

/* Cards in a grid: users to sign in as, requests in a stage */
.ib-card-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
    gap: var(--space);
}

/* Room for the section heads, which reach 8 px past the content edge */
.ib-sections {
    min-width: 0;
    margin: 0 calc(-1 * var(--space-tight));
    padding: 0 var(--space-tight);
}

/* Settings: sections in two columns on wide screens */
.ib-settings {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
    margin: 0 calc(-1 * var(--space-tight));
}

.ib-settings-column {
    min-width: 0;
    padding: 0 var(--space-tight);
}

@media (min-width: 992px) {
    .ib-settings {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .ib-settings-span {
        grid-column: 1 / -1;
    }
}

.ib-limits {
    gap: var(--space-tight) var(--space);
}

.ib-limit {
    display: flex;
    align-items: center;
    gap: var(--space-tight);
}

.ib-limit > .wh-field {
    width: 128px;
}

/* Notes keep the customer's line breaks */
.ib-notes {
    white-space: pre-wrap;
}

/* A multi-line field: the field box grows with its text */
.wh-field.ib-area {
    align-items: stretch;
    height: auto;
    padding-top: var(--space-tight);
    padding-bottom: var(--space-tight);
}

.wh-field.ib-area > textarea {
    flex: 1 1 auto;
    width: 100%;
    min-width: 0;
    min-height: calc(var(--wh-lh) * 3);
    padding: 0;
    border: 0;
    outline: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    resize: vertical;
}


/* ── Tables that run to a card's sides ────────────────────────── */
/* The table's text lines up with the card's content; its last line is the card's border */

.ib-flush {
    padding: var(--space-hair) 0 0;
    margin: calc(var(--space) - var(--space-hair)) calc(-1 * var(--space)) calc(-1 * var(--space));
}

.ib-flush-x {
    padding: var(--space-hair) 0;
    margin: calc(var(--space-tight) - var(--space-hair)) calc(-1 * var(--space)) 0;
}

.ib-flush .wh-table tbody > tr:last-child > td,
.ib-request-lines .wh-table tbody > tr:last-child > td {
    border-bottom: 0;
}

.wh-card-head + .ib-flush,
.wh-card-head + .ib-flush-x {
    margin-top: calc(-1 * var(--space-hair));
}

.ib-card-foot {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-tight) var(--space);
    margin-top: var(--space);
}

/* Stacked tables share their column widths */
.ib-inbox-table {
    table-layout: fixed;
    min-width: 1200px;
}

.ib-col-customer { width: 176px; }
.ib-col-count { width: 80px; }
.ib-col-thickness { width: 128px; }
.ib-col-date { width: 112px; }
.ib-col-time { width: 152px; }
.ib-col-person { width: 160px; }
.ib-col-status { width: 160px; }

.ib-pieces-edit {
    min-width: 760px;
}

.ib-col-reference { min-width: 160px; }
.ib-col-floor { width: 136px; }
.ib-col-thickness-edit { width: 128px; }
.ib-col-size { width: 128px; }
.ib-col-qty { width: 88px; }
.ib-col-price { width: 136px; }
.ib-col-check { width: 64px; }
.ib-col-check-wide { width: 104px; }

.ib-catalogue {
    min-width: 720px;
}

.ib-files td:first-child {
    width: 40%;
}

.ib-files tbody tr:last-child > td {
    border-bottom: 0;
}

/* A text button in the last cell keeps the 16 px edge, like the buttons above it */
.wh-table .wh-table-action.ib-action-text:last-child {
    padding-right: var(--space);
}

.ib-links {
    display: inline-flex;
    gap: var(--space);
}

/* History, newest first */
.ib-history {
    display: grid;
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: 14px;
    line-height: 20px;
}

.ib-history > li {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0 var(--space-tight);
    padding: var(--space-tight) 0;
    border-bottom: 1px solid var(--line);
}

.ib-history > li:first-child {
    padding-top: 0;
}

.ib-history > li:last-child {
    padding-bottom: 0;
    border-bottom: 0;
}

.ib-history-event {
    font-weight: 600;
}

.ib-history-by {
    color: var(--muted);
}

.ib-history-time {
    flex-basis: 100%;
    order: -1;
    color: var(--muted);
    font-size: 12px;
    line-height: 16px;
    font-variant-numeric: tabular-nums;
}

.ib-history-note {
    flex-basis: 100%;
    margin: var(--space-hair) 0 0;
    white-space: pre-wrap;
}


/* ── Calculation ──────────────────────────────────────────────── */

.ib-calculation {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
    gap: var(--space);
}

@media (min-width: 992px) {
    .ib-calculation {
        grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    }
}

.ib-feed {
    display: grid;
    gap: var(--space-tight);
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: 14px;
    line-height: 20px;
    font-variant-numeric: tabular-nums;
}

.ib-feed > li {
    display: flex;
    align-items: flex-start;
    gap: var(--space-tight);
    animation: ib-feed-in var(--duration-open) var(--ease);
}

.ib-feed > li > .wh-icon,
.ib-feed > li > .wh-spinner {
    margin-top: 2px;
    color: var(--muted);
}

.ib-feed > li.is-problem,
.ib-feed > li.is-problem > .wh-icon {
    color: var(--red-text);
}

.ib-feed > li.is-done {
    font-weight: 600;
}

@keyframes ib-feed-in {
    from { opacity: 0; transform: translateY(3px); }
    to { opacity: 1; transform: none; }
}

.ib-live {
    min-height: 192px;
}

/* The yield: the one big number */
.ib-yield {
    display: flex;
    align-items: baseline;
    gap: var(--space-tight);
    margin-bottom: var(--space-tight);
    white-space: nowrap;
}

.ib-yield > strong {
    font-size: 24px;
    line-height: 30px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.ib-yield > span {
    color: var(--muted);
    font-size: 12px;
    line-height: 16px;
}


/* ── Drawings ─────────────────────────────────────────────────── */

.ib-drawing svg {
    display: block;
    width: 100%;
    height: auto;
    font-family: var(--font-sans);
}

/* In dark the blank, its offcuts and pieces take the dark greys; the cuts stay red */
[data-theme="dark"] .ib-drawing pattern rect[fill="#E6E4DF"] { fill: var(--press); }
[data-theme="dark"] .ib-drawing pattern circle { fill: var(--press-deep); }
[data-theme="dark"] .ib-drawing pattern rect[fill="#ECEAE6"] { fill: var(--band); }
[data-theme="dark"] .ib-drawing pattern line { stroke: var(--edge); }
[data-theme="dark"] .ib-drawing rect[fill="#FFFFFF"] { fill: var(--raised); }
[data-theme="dark"] .ib-drawing [stroke="#1A1A1A"] { stroke: var(--edge-hover); }
[data-theme="dark"] .ib-drawing [stroke="#4A4A4A"] { stroke: var(--muted); }
[data-theme="dark"] .ib-drawing text[fill="#1A1A1A"] { fill: var(--ink); }
[data-theme="dark"] .ib-drawing text[fill="#4A4A4A"] { fill: var(--muted); }
[data-theme="dark"] .ib-drawing [fill="#E3000F"] { fill: var(--red); }
[data-theme="dark"] .ib-drawing circle[stroke="#FFFFFF"] { stroke: var(--raised); }


/* ── Options ──────────────────────────────────────────────────── */

/* The selector stays under the steps while the patterns scroll */
.ib-option-bar {
    position: sticky;
    top: calc(var(--header) + var(--steps-band));
    z-index: 20;
    display: grid;
    gap: var(--space-tight);
    margin: calc(-1 * var(--space)) calc(-1 * var(--space)) 0;
    padding: var(--space);
    border-bottom: 1px solid var(--line);
    background: var(--surface);
}

@media (max-width: 767.98px) {
    .ib-option-bar:not(.is-collapsed) {
        position: static;
    }
}

.ib-option-tools {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-tight);
    min-width: 0;
}

.ib-option-tools > .text-small {
    flex: 1 1 200px;
    min-width: 0;
}

.ib-option-bar .wh-option {
    font-size: 14px;
}

.ib-option-yield {
    flex: none;
    font-variant-numeric: tabular-nums;
}

/* Options shown after a proposal went out cannot be chosen again */
.wh-option[aria-disabled="true"] {
    cursor: default;
}

.wh-option[aria-disabled="true"]:hover,
.wh-option[aria-disabled="true"]:active {
    background: var(--surface);
}

.wh-option[aria-disabled="true"]:not([aria-checked="true"]):hover,
.wh-option[aria-disabled="true"]:not([aria-checked="true"]):active {
    border-color: var(--line);
}

/* What if */
.ib-whatif td {
    max-width: 0;
}

.ib-whatif .ib-whatif-yield {
    width: 176px;
    max-width: none;
    text-align: left;
}

.ib-whatif td:nth-child(3) {
    width: 30%;
}

.ib-whatif .wh-table-action {
    max-width: none;
}

.ib-whatif tr.is-worse td {
    color: var(--muted);
}

/* Comparison: options as columns */
.ib-compare {
    min-width: 720px;
}

.ib-compare tbody th {
    width: 200px;
    color: var(--ink);
    font-size: 14px;
    font-weight: 600;
    text-align: left;
    white-space: nowrap;
}

.ib-compare tbody th.ib-indent {
    padding-left: calc(var(--space) * 2);
    font-weight: 400;
}

.ib-compare thead th.ib-chosen {
    color: var(--ink);
}

.ib-best {
    font-weight: 600;
}

/* Cutting patterns */
.ib-pattern-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 400px), 1fr));
    align-items: start;
    gap: var(--space);
}

.ib-pattern-yield {
    display: inline-flex;
    align-items: baseline;
    gap: var(--space-tight);
    font-size: 14px;
    line-height: 20px;
    white-space: nowrap;
}

.ib-pattern-yield > span {
    color: var(--muted);
    font-size: 12px;
    line-height: 16px;
}

.ib-pattern-yield > strong {
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}


/* ── All options ──────────────────────────────────────────────── */

.wh-dialog-head:has(> .ib-dialog-count) > .wh-dialog-title {
    flex: 0 1 auto;
}

.ib-dialog-count {
    flex: 0 1 auto;
    margin-right: auto;
}

.ib-grid {
    table-layout: fixed;
    width: max-content;
    min-width: 100%;
}

.ib-grid th,
.ib-grid td {
    overflow: hidden;
    text-overflow: ellipsis;
}

.ib-grid thead th {
    overflow: visible;
}

.ib-grid col.ib-grid-pick,
.ib-grid .ib-grid-pick {
    width: 48px;
}

.ib-grid-head {
    display: flex;
    align-items: center;
    gap: var(--space-hair);
    min-width: 0;
}

.ib-grid-label {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    cursor: grab;
}

/* Sort, filter and group marks and the menu button never shrink, so they always show */
.ib-grid-marks {
    display: inline-flex;
    flex: none;
    align-items: center;
    gap: var(--space-hair);
    color: var(--ink);
}

.ib-grid .ib-grid-chevron {
    margin-right: calc(-1 * var(--space-tight));
}

.ib-col-resize {
    position: absolute;
    top: 0;
    right: -4px;
    z-index: 3;
    width: 8px;
    height: 100%;
    cursor: col-resize;
    touch-action: none;
}

.ib-col-resize:hover,
th.resizing .ib-col-resize {
    box-shadow: inset -2px 0 0 var(--edge-hover);
}

.ib-grid th.drop-target {
    box-shadow: inset 2px 0 0 var(--edge-hover);
}

.ib-grid tbody tr.is-picked > td {
    background: var(--hover);
}

.ib-grid-yield {
    font-weight: 600;
}

.ib-grid-group > td {
    background: var(--band);
    font-weight: 600;
}

.ib-grid-count {
    margin-left: var(--space-tight);
    color: var(--muted);
    font-weight: 400;
}

.ib-grid-end {
    display: flex;
    justify-content: center;
    padding: var(--space);
}

/* The dialog footer's first button sits at the left */
.ib-foot-start {
    margin-right: auto;
}

/* A column's filter, in a small panel under its header */
.ib-filter {
    gap: var(--space-tight);
    width: 288px;
    padding: var(--space);
}

.ib-filter-title {
    color: var(--ink);
}

.ib-filter-range {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-tight);
}

.ib-filter-actions {
    justify-content: flex-end;
    margin-top: var(--space-tight);
}


/* ── Proposal ─────────────────────────────────────────────────── */

.ib-language {
    align-items: flex-start;
}


/* ── Phones ───────────────────────────────────────────────────── */

/* Phones: buttons in a bar share a row only while their whole labels fit */
@media (max-width: 575.98px) {
    .wh-bar > .wh-btn,
    .wh-actionbar > .wh-btn,
    .wh-actionbar > .wh-actionbar-end > .wh-btn {
        flex: 1 0 auto;
    }

    .wh-actionbar-end {
        display: contents;
    }

    .ib-head > .wh-bar {
        flex: 1 1 100%;
    }

    .ib-option-tools > .wh-bar {
        flex: 1 1 auto;
    }

    .ib-dialog-count {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .ib-feed > li {
        animation: none;
    }
}

/* Sign in: one centred card */
.ib-signin-page {
    align-content: center;
}

.ib-signin {
    width: 100%;
    max-width: 400px;
    justify-self: center;
}

.ib-signin-form {
    display: grid;
    gap: var(--space);
    margin-top: var(--space);
}

/* Testing only: one-click customer and administrator */
.ib-signin-quick {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}