/* Minimal portal styling for the first-draft scaffold. */
:root {
    --brand: #14532d;
    --brand-light: #dcfce7;
    --border: #d4d4d8;
    --muted: #71717a;
    --bg: #fafafa;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    color: #18181b;
    background: var(--bg);
}

/* Shell is locked to the viewport height; the content area scrolls, the sidebar stays put. */
.portal-layout { display: flex; height: 100vh; }

.portal-nav {
    width: 220px;
    background: var(--brand);
    color: #fff;
    padding: 1rem;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
}
.portal-brand { font-weight: 700; font-size: 1.1rem; margin-bottom: 1rem; }
.nav-section { text-transform: uppercase; font-size: .7rem; opacity: .7; margin: 1rem 0 .25rem; }
.nav-item { display: block; color: #e4e4e7; text-decoration: none; padding: .35rem .5rem; border-radius: 6px; }
.nav-item:hover, .nav-item.active { background: rgba(255,255,255,.15); color: #fff; }
/* "Draft" / work-in-progress marker on a nav item (amber pill, readable on the dark sidebar). */
.nav-badge {
    display: inline-block; margin-left: .4rem; padding: 0 .35rem; border-radius: 999px;
    font-size: .6rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
    color: #78350f; background: #fbbf24; vertical-align: middle;
}
/* User + sign out pinned to the bottom of the sidebar. */
.nav-footer { margin-top: auto; padding-top: 1rem; border-top: 1px solid rgba(255,255,255,.15); }
.nav-user { color: #e4e4e7; font-size: .85rem; opacity: .9; margin-bottom: .5rem; overflow-wrap: anywhere; }
.nav-signout {
    width: 100%; text-align: left; background: none; color: #fff; cursor: pointer;
    border: 1px solid rgba(255,255,255,.3); border-radius: 6px; padding: .35rem .5rem;
}
.nav-signout:hover { background: rgba(255,255,255,.15); }

.portal-main { flex: 1; display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.portal-header {
    display: flex; justify-content: space-between; align-items: center;
    padding: .75rem 1.5rem; border-bottom: 1px solid var(--border); background: #fff;
}
.portal-title { font-weight: 600; }
.portal-user { color: var(--muted); }
.portal-content { padding: 1.5rem; flex: 1; min-height: 0; overflow-y: auto; }

h1 { font-size: 1.5rem; }
h2 { font-size: 1.0rem; }
/* Inline icon in front of a title. */
.title-icon { width: 1.15em; height: 1.15em; vertical-align: -0.18em; margin-right: .45rem; color: var(--brand); }
.muted { color: var(--muted); }
.right { text-align: right; }
.num, .grid td.num { text-align: right; font-variant-numeric: tabular-nums; }

.card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 1rem; margin-top: 1rem; }
.card { background: #fff; border: 1px solid var(--border); border-radius: 10px; padding: 1rem; }
.card h3 { margin-top: 0; }

.grid { width: 100%; border-collapse: collapse; margin: .5rem 0; background: #fff; }
.grid th, .grid td { border: 1px solid var(--border); padding: .4rem .5rem; text-align: left; }
.grid thead th { background: var(--brand-light); }
/* Inputs/selects inside data-grid cells fill the cell rather than using fixed widths. */
.grid td .input,
.grid td select.input { width: 100%; min-width: 0; max-width: none; }

.form-row { display: flex; flex-wrap: wrap; gap: 1rem; margin: .5rem 0; align-items: flex-end; }
.form-row label { display: flex; flex-direction: column; font-size: .85rem; gap: .25rem; }
.form-row label.grow { flex: 1; }
/* Hide the up/down spinners on number inputs everywhere. */
input[type=number] { -moz-appearance: textfield; appearance: textfield; }
input[type=number]::-webkit-outer-spin-button,
input[type=number]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.input { padding: .4rem; border: 1px solid var(--border); border-radius: 6px; min-width: 8rem; }
.input.num { max-width: 7rem; }
textarea.input { min-height: 3rem; font-family: inherit; }

.actions { display: flex; gap: .5rem; margin: 1rem 0; }
.btn { padding: .45rem .9rem; border: 1px solid var(--border); border-radius: 6px; background: #fff; cursor: pointer; text-decoration: none; color: inherit; }
.btn:hover { background: #f4f4f5; }
.btn-primary { background: var(--brand); border-color: var(--brand); color: #fff; }
.btn-primary:hover { background: #166534; }
.btn-link { border: none; background: none; color: #b91c1c; cursor: pointer; padding: 0; }
.btn-icon {
    border: none;
    background: none;
    color: var(--muted);
    cursor: pointer;
    padding: .15rem;
    display: inline-flex;
    align-items: center;
    border-radius: 6px;
    line-height: 0;
}
.btn-icon:hover { color: #b91c1c; background: #fef2f2; }
.btn-icon-add:hover { color: var(--brand); background: var(--brand-light); }

.badge { display: inline-block; background: var(--brand-light); color: var(--brand); border-radius: 999px; padding: 0 .5rem; font-size: .75rem; margin-right: .35rem; }
/* Secondary poly layer (left) and additional materials (right) sit side by side in the fieldset. */
.secondary-layer-col { flex: 0 0 auto; }
/* Match the top material grid's cell width (the var is otherwise only set on .picto-block). */
.additional-materials { flex: 1 1 16rem; min-width: 0; --picto-cell-w: 3.375rem; }
/* Additional-materials picker: a × button in the corner of a selected pictogram cell. */
.picto-remove {
    position: absolute; top: 2px; right: 2px; width: 16px; height: 16px; border-radius: 50%;
    border: none; background: #b91c1c; color: #fff; cursor: pointer; padding: 0; z-index: 5;
    font-size: .7rem; line-height: 1; display: flex; align-items: center; justify-content: center;
}
/* Search-result option cells highlight on hover to signal they are clickable. */
.additional-materials .picto-grid .picto-cell:hover { border-color: var(--brand); background: var(--brand-light); }
.notice { background: #ecfeff; border: 1px solid #a5f3fc; padding: .5rem .75rem; border-radius: 8px; }
/* Quantity-discrepancy warning shown on an invoice line. */
.warn { color: #92400e; font-size: .72rem; line-height: 1.2; margin-top: .2rem; text-align: right; white-space: normal; }
.warn-icon { color: #f59e0b; }
.placeholder { border: 1px dashed var(--border); border-radius: 8px; padding: 1.5rem; color: var(--muted); }
/* Invoice editor two-column layout + document drop zone */
.invoice-layout { display: flex; gap: 1.5rem; flex-wrap: wrap; align-items: flex-start; }
.invoice-main { flex: 1 1 480px; min-width: 0; }
.invoice-doc { flex: 0 0 380px; max-width: 100%; }

.dropzone {
    position: relative;
    border: 2px dashed var(--border);
    border-radius: 10px;
    padding: 1.5rem;
    text-align: center;
    background: #fff;
    transition: border-color .15s, background .15s;
}
.dropzone:hover { border-color: var(--brand); background: var(--brand-light); }
/* The file input overlays the whole zone so files can be dropped anywhere on it (no JS needed). */
.dropzone input[type=file] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}
.dropzone-hint { display: flex; flex-direction: column; gap: .25rem; pointer-events: none; color: var(--muted); }
.dropzone-hint strong { color: #18181b; }

.grid td.currency-cell { color: var(--muted); white-space: nowrap; border-left: none; }
.doc-meta { display: flex; justify-content: space-between; align-items: center; margin: .75rem 0 .25rem; font-size: .85rem; }
.doc-preview { width: 100%; height: 520px; border: 1px solid var(--border); border-radius: 8px; }
/* Label previews are short/wide, so a reduced height compared to the document preview. */
.label-preview { width: 100%; height: 156px; border: 1px solid var(--border); border-radius: 8px; }
/* Transport label preview is 20% taller than the item preview. */
.label-preview.label-preview-tall { height: 320px; }

/* Multi-column form (e.g. transport label) */
.label-form { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 2rem; align-items: start; max-width: 1140px; }
.label-col { min-width: 0; }
.label-col.label-col-span2 { grid-column: span 2; }
@media (max-width: 1000px) { .label-form { grid-template-columns: 1fr 1fr; } }
@media (max-width: 700px) { .label-form { grid-template-columns: 1fr; } }

/* Compact field: label text on the left, control on the right (saves vertical space). */
.form-row label.inline-field { flex-direction: row; align-items: center; gap: .5rem; }
.form-row label.inline-field.align-top { align-items: flex-start; }
.form-row label.inline-field > .field-label { flex: 0 0 8.5rem; }
.form-row label.inline-field > .input { flex: 1; min-width: 0; }
/* Fixed-width identifier fields (item number, PO, SO). */
.form-row label.inline-field > .input.field-w200 { flex: 0 0 200px; width: 200px; max-width: 200px; }
.form-row label.inline-field > .input.field-w400 { flex: 0 0 400px; width: 400px; max-width: 400px; }
/* Required field left empty. */
.field-missing { background: #fee2e2; }
/* Required pictogram picker (e.g. secondary poly layer) with nothing selected: pad so the red reads. */
.picto-block.field-missing { padding: .4rem; border-radius: 8px; }

/* Small country flags next to the market checkboxes. */
.flag { width: 21px; height: 14px; border: 1px solid rgba(0,0,0,.2); border-radius: 2px; display: inline-block; flex: 0 0 auto; }

/* Pictogram picker (Triman icons, EU material codes): a grid of icons, each with a checkbox. */
.picto-block { margin: .5rem 0 1rem; --picto-cell-w: 3.375rem; }
.picto-group-title { font-size: .8rem; font-weight: 600; margin: 0 0 .3rem; }
/* EU-code groups float left and wrap as whole units (a new line starts only on a new group). */
.picto-groups { display: flex; flex-wrap: wrap; gap: 1rem 1.5rem; align-items: flex-start; }
.picto-group-icons { display: flex; gap: .5rem; }
.picto-group-icons .picto-cell { width: var(--picto-cell-w); }
/* Triman grid uses the same fixed cell width as the EU-code cells. */
.picto-grid { display: grid; grid-template-columns: repeat(auto-fill, var(--picto-cell-w)); gap: .5rem; }
.picto-cell { position: relative; display: flex; flex-direction: column; align-items: center; gap: .15rem; border: 1px solid var(--border); border-radius: 8px; padding: .25rem; background: #fff; cursor: pointer; }
.picto-icon { width: 100%; height: auto; display: block; }
.picto-label { font-size: .7rem; text-align: center; line-height: 1.1; }
/* The real checkbox covers the cell but is invisible; selection is shown as an overlay badge. */
.picto-cell input[type="checkbox"],
.picto-cell input[type="radio"] { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.picto-badge {
    position: absolute; top: 2px; right: 2px; width: 15px; height: 15px; border-radius: 50%;
    background: var(--brand); color: #fff; display: none; align-items: center; justify-content: center;
    font-size: .65rem; line-height: 1; pointer-events: none;
}
.picto-cell.disabled { background: #bbb; }
.picto-cell.selected .picto-badge { display: flex; }
.picto-cell.selected { border-color: var(--brand); box-shadow: inset 0 0 0 2px var(--brand-light); }
/* HTML "when to use this code" note, shown on hover below the pictogram. */
.picto-note {
    display: none; position: absolute; top: 100%; left: 0; z-index: 30; margin-top: 4px;
    width: max-content; max-width: 280px; text-align: left; font-size: .75rem; font-weight: 400;
    line-height: 1.35; color: #18181b; background: #fff; border: 1px solid var(--border);
    border-radius: 8px; padding: .5rem .6rem; box-shadow: 0 6px 18px rgba(0,0,0,.14);
}
.picto-cell:hover .picto-note { display: block; }
/* Caret pointing up from the note to the hovered pictogram, centred under the (3.375rem) cell.
   The note is anchored at the cell's left edge, so the caret's offset from the note-left equals its
   offset from the cell-left: half the cell width minus half the caret's 14px box. */
.picto-note::before, .picto-note::after {
    content: ""; position: absolute; bottom: 100%; left: calc(var(--picto-cell-w) / 2 - 7px);
    border: 7px solid transparent; width: 0; height: 0;
}
.picto-note::before { border-bottom-color: var(--border); }
.picto-note::after { border-bottom-color: #fff; margin-bottom: -1px; }
.picto-note img { max-width: 200px; }

/* Checkbox / radio labels: the control on the left, its text to the right. */
label:has(> input[type="checkbox"]),
label:has(> input[type="radio"]) {
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    gap: .4rem;
}

.timeline { list-style: none; padding-left: 0; }
.timeline li { border-left: 3px solid var(--brand-light); padding: .35rem .75rem; margin-bottom: .25rem; }
.checklist { list-style: none; padding-left: 0; }
.checklist li { padding: .25rem 0; }