@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500&display=swap');

:root {
    --bg-1: #f6f5ef;
    --bg-2: #e7dfd1;
    --ink: #1f2a2e;
    --muted: #5f6b70;
    --line: #d6cebf;
    --brand: #005f73;
    --brand-2: #ca6702;
    --ok: #2a9d8f;
    --warn: #b57c00;
    --err: #bc4749;
    --panel: rgba(255, 255, 255, 0.88);
    --shadow: 0 16px 40px rgba(31, 42, 46, 0.08);
}

* {
    box-sizing: border-box;
}

html,
body {
    margin: 0;
    padding: 0;
}

body {
    font-family: 'Space Grotesk', sans-serif;
    color: var(--ink);
    min-height: 100vh;
    background: linear-gradient(120deg, var(--bg-1), var(--bg-2));
}

.page-bg {
    position: fixed;
    inset: 0;
    pointer-events: none;
    background:
        radial-gradient(circle at 10% 15%, rgba(202, 103, 2, 0.15), transparent 35%),
        radial-gradient(circle at 85% 18%, rgba(0, 95, 115, 0.16), transparent 28%),
        radial-gradient(circle at 65% 75%, rgba(42, 157, 143, 0.14), transparent 30%);
    z-index: 0;
}

.topbar,
.footer {
    position: relative;
    z-index: 1;
}

.shell {
    position: relative;
}

.topbar {
    z-index: 20;
}

.topbar {
    padding: 20px 24px 56px;
}

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

.brand-mark {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    overflow: hidden;
    background: #fff;
    border: 1px solid rgba(214, 206, 191, 0.9);
    box-shadow: var(--shadow);
}

.brand-logo {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

.brand h1 {
    margin: 0;
    font-size: 1.1rem;
}

.brand p {
    margin: 2px 0 0;
    color: var(--muted);
    font-size: 0.86rem;
}

.main-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}

.nav-link {
    text-decoration: none;
    color: var(--ink);
    border: 1px solid var(--line);
    padding: 8px 12px;
    border-radius: 999px;
    font-size: 0.88rem;
    background: rgba(255, 255, 255, 0.7);
    transition: 150ms ease;
}

.nav-link:hover {
    border-color: var(--brand);
    color: var(--brand);
}

.nav-link.active {
    background: var(--brand);
    border-color: var(--brand);
    color: #fff;
}

.nav-link--attention {
    border-color: #f59e0b;
    background: linear-gradient(180deg, #fff9e8 0%, #ffefc2 100%);
    color: #8a4b00;
    font-weight: 700;
    box-shadow: 0 0 0 1px rgba(245, 158, 11, 0.18);
}

.nav-link--attention:hover {
    border-color: #d97706;
    color: #7a3900;
    background: linear-gradient(180deg, #fff4da 0%, #ffe4a2 100%);
}

.nav-link--attention.active {
    background: #f59e0b;
    border-color: #f59e0b;
    color: #fff;
}

.nav-group {
    position: relative;
    display: inline-flex;
    align-items: center;
    /* Removed padding-bottom to align with .nav-link */
}

.nav-link--group {
    cursor: default;
}

.nav-group.active .nav-link--group,
.nav-group:hover .nav-link--group,
.nav-group:focus-within .nav-link--group {
    background: var(--brand);
    border-color: var(--brand);
    color: #fff;
}

.nav-submenu {
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 160px;
    display: none;
    flex-direction: column;
    gap: 6px;
    padding: 8px;
    border-radius: 12px;
    border: 1px solid var(--line);
    background: rgba(255, 255, 255, 0.98);
    box-shadow: var(--shadow);
    z-index: 30;
}

.nav-group:hover .nav-submenu,
.nav-group:focus-within .nav-submenu {
    display: flex;
}

.nav-submenu .nav-link {
    width: 100%;
}

/* Mobile hamburger button — hidden on desktop */
.nav-toggle {
    display: none;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    padding: 0;
    background: rgba(255, 255, 255, 0.7);
    border: 1px solid var(--line);
    border-radius: 8px;
    font-size: 1.3rem;
    font-weight: normal;
    line-height: 1;
    color: var(--ink);
    cursor: pointer;
    flex-shrink: 0;
}

.shell {
    padding: 8px 24px 36px;
    max-width: none;
    margin: 0 auto;
}

.page-title {
    margin: 8px 0 14px;
    font-size: clamp(1.25rem, 2.4vw, 2rem);
    letter-spacing: 0.02em;
}

.panel {
    background: var(--panel);
    border: 1px solid rgba(214, 206, 191, 0.85);
    border-radius: 18px;
    padding: 16px;
    box-shadow: var(--shadow);
    margin-bottom: 16px;
    overflow: hidden;
}

.panel h3 {
    margin: 0 0 10px;
}

.grid-form {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
    align-items: end;
}

.grid-form.compact {
    grid-template-columns: repeat(5, minmax(0, 1fr));
}

.page-admin_locations .locations-form-layout {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.page-admin_locations .location-form-row {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
    align-items: end;
}

.page-admin_locations .location-form-row--single {
    grid-template-columns: minmax(260px, 360px);
}

.page-admin_locations .location-form-row--triple {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.page-admin_locations .location-form-row--actions {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.page-admin_locations .location-form-divider {
    border-top: 1px dashed var(--line);
    opacity: 0.8;
}

.page-admin_locations .checkbox-inline {
    justify-content: center;
}

.page-admin_locations .checkbox-inline label {
    margin-bottom: 10px;
}

.page-edit_batch .edit-batch-form {
    grid-template-columns: repeat(5, minmax(0, 1fr));
}

.page-edit_batch .edit-batch-form .location-start {
    grid-column: 1;
}

.page-edit_batch .edit-batch-form .location-inline {
    grid-column: span 1;
}

.page-edit_batch .edit-batch-form .edit-supplier {
    grid-column: 4 / 6;
}

#receive-form .receive-price-buy {
    grid-column: 1 / 3;
}

#receive-form .receive-price-sell {
    grid-column: 3 / 5;
}

#receive-form .receive-location-storage {
    grid-column: 1 / 2;
}

#receive-form .receive-location-unit {
    grid-column: 2 / 3;
}

#receive-form .receive-location-row {
    grid-column: 3 / 4;
}

#receive-form .receive-location-box {
    grid-column: 4 / 5;
}

#receive-form .receive-location-selected {
    grid-column: 1 / -1;
}

#receive-form .receive-supplier {
    grid-column: 4 / 5;
}

.supplier-picker {
    position: relative;
}

.supplier-picker__trigger {
    width: 100%;
    text-align: left;
    background: #fff;
    border: 1px solid var(--line);
    color: var(--ink);
    font-weight: 500;
    padding: 9px 10px;
}

.supplier-picker__trigger--ok {
    background: #f4fbf9;
    border-color: #8bc7bf;
}

.supplier-picker__trigger--due-soon {
    background: #fff4cc;
    border-color: #d8b03f;
    color: #7f6000;
}

.supplier-picker__trigger--expired {
    background: #ffe0e0;
    border-color: #d27a7a;
    color: #7d1f1f;
}

.supplier-picker__menu {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    z-index: 35;
    max-height: 280px;
    overflow: auto;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: #fff;
    box-shadow: var(--shadow);
    padding: 6px;
}

.supplier-picker__search-wrap {
    position: sticky;
    top: 0;
    background: #fff;
    padding-bottom: 6px;
    margin-bottom: 6px;
    border-bottom: 1px dashed var(--line);
}

.supplier-picker__search {
    width: 100%;
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 7px 8px;
    font-size: 0.9rem;
}

.supplier-picker__item {
    width: 100%;
    text-align: left;
    border: 1px solid transparent;
    background: #fff;
    color: var(--ink);
    padding: 8px 9px;
    border-radius: 8px;
    font-weight: 500;
    margin-bottom: 4px;
}

.supplier-picker__item:last-child {
    margin-bottom: 0;
}

.supplier-picker__item--ok {
    background: #f4fbf9;
}

.supplier-picker__item--due-soon {
    background: #fff4cc;
    color: #7f6000;
}

.supplier-picker__item--expired {
    background: #ffe0e0;
    color: #7d1f1f;
}

.supplier-picker__item.is-selected {
    border-color: var(--brand);
}

.supplier-picker__empty {
    border: 1px dashed var(--line);
    border-radius: 8px;
    color: var(--muted);
    font-size: 0.85rem;
    padding: 8px;
    text-align: center;
}

.field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.field label {
    color: var(--muted);
    font-size: 0.78rem;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

input,
select,
textarea,
button {
    font: inherit;
}

input,
select,
textarea {
    border: 1px solid var(--line);
    border-radius: 10px;
    padding: 9px 10px;
    background: #fff;
    color: var(--ink);
}

/* Hide native number spinners for cleaner quantity inputs across the app. */
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;
}

.page-index #search-form input,
.page-index #search-form select {
    height: 40px;
    min-height: 40px;
    line-height: 1.2;
}

.page-index .stock-actions-stack {
    display: flex;
    flex-direction: column;
    gap: 6px;
    align-items: stretch;
    width: 96px;
}

.page-index .stock-actions-stack .ghost {
    width: 100%;
    margin: 0;
    text-align: center;
    padding: 8px 10px;
}

input.scanner-updated,
select.scanner-updated,
textarea.scanner-updated {
    background: #fff4c8;
    border-color: #d4a22f;
    box-shadow: 0 0 0 2px rgba(212, 162, 47, 0.15);
}

input[type="color"] {
    appearance: none;
    -webkit-appearance: none;
    width: 52px;
    min-width: 52px;
    height: 32px;
    min-height: 32px;
    padding: 2px;
    border-radius: 10px;
    background: #fff;
    cursor: pointer;
}

input[type="color"]::-webkit-color-swatch-wrapper {
    padding: 0;
}

input[type="color"]::-webkit-color-swatch {
    border: 0;
    border-radius: 7px;
}

input[type="color"]:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

textarea {
    min-height: 74px;
    resize: vertical;
}

button {
    border: 0;
    border-radius: 10px;
    padding: 10px 14px;
    cursor: pointer;
    background: var(--brand);
    color: #fff;
    font-weight: 600;
}

button.alt {
    background: var(--brand-2);
}

button.ghost {
    background: #fff;
    color: var(--ink);
    border: 1px solid var(--line);
}

.batch-delete-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border-color: #d84b5c;
    color: #b42318;
}

.batch-delete-btn:hover {
    border-color: #b42318;
    color: #8f1d14;
}

.batch-delete-btn__icon {
    display: inline-flex;
    width: 16px;
    height: 16px;
}

.batch-delete-btn__icon svg {
    width: 16px;
    height: 16px;
    fill: currentColor;
}

a.ghost {
    display: inline-block;
    text-decoration: none;
    background: #fff;
    color: var(--ink);
    border: 1px solid var(--line);
    border-radius: 10px;
    padding: 8px 12px;
    font-weight: 600;
}

a.ghost:hover {
    border-color: var(--brand);
    color: var(--brand);
}

.cert-actions {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.cert-actions .ghost {
    padding: 6px 10px;
    font-size: 0.8rem;
}

.color-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.color-chip__dot {
    width: 14px;
    height: 14px;
    border-radius: 999px;
    border: 1px solid rgba(0, 0, 0, 0.2);
}

.pdf-preview {
    position: fixed;
    inset: 0;
    z-index: 80;
    display: grid;
    place-items: center;
}

.pdf-preview__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(20, 28, 33, 0.64);
}

.pdf-preview__dialog {
    position: relative;
    width: min(94vw, 1250px);
    height: min(92vh, 950px);
    display: flex;
    flex-direction: column;
    border-radius: 14px;
    border: 1px solid var(--line);
    overflow: hidden;
    background: #fff;
    box-shadow: var(--shadow);
}

.pdf-preview__bar {
    display: flex;
    align-items: center;
    gap: 8px;
    border-bottom: 1px solid var(--line);
    padding: 10px 12px;
    background: #faf8f4;
}

.pdf-preview__title {
    margin-right: auto;
    font-size: 0.92rem;
}

.pdf-preview__open-link {
    text-decoration: none;
    border: 1px solid var(--line);
    border-radius: 10px;
    padding: 6px 10px;
    color: var(--ink);
    font-weight: 600;
    font-size: 0.82rem;
    background: #fff;
}

.pdf-preview__open-link:hover {
    color: var(--brand);
    border-color: var(--brand);
}

.pdf-preview__frame {
    flex: 1;
    width: 100%;
    border: 0;
    background: #f4f4f4;
}

body.has-pdf-preview {
    overflow: hidden;
}

.message {
    margin-top: 10px;
    border-radius: 10px;
    padding: 10px 12px;
    border: 1px solid transparent;
    font-size: 0.92rem;
}

.message.info {
    color: #12334d;
    background: #e6f2ff;
    border-color: #c4e0ff;
}

.message.success {
    color: #0d4a39;
    background: #dff7f1;
    border-color: #b8ebdf;
}

.message.warn {
    color: #644d00;
    background: #fff2cc;
    border-color: #f2dd92;
}

.message.error {
    color: #6c1c1d;
    background: #fbdede;
    border-color: #efb7b8;
}

.hidden {
    display: none;
}

.batch-select-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    margin-top: 10px;
    background: rgba(0, 95, 115, 0.08);
    border: 1px solid rgba(0, 95, 115, 0.3);
    border-radius: 8px;
    font-size: 0.9em;
}

.batch-select-bar #batch-select-count {
    flex: 1;
    font-weight: 600;
    color: var(--brand);
}

.select-cell {
    width: 36px;
    padding-left: 6px !important;
    padding-right: 6px !important;
    text-align: center;
}

.table-wrap {
    overflow-x: auto;
    margin-top: 12px;
    border: 1px solid var(--line);
    border-radius: 12px;
}

.table-wrap table {
    width: 100%;
    border-collapse: collapse;
    min-width: 900px;
    background: #fff;
}

.table-wrap th,
.table-wrap td {
    padding: 9px 10px;
    border-bottom: 1px solid #ece6dd;
    vertical-align: top;
    text-align: left;
    font-size: 0.9rem;
}

.table-wrap th {
    font-size: 0.76rem;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: var(--muted);
    background: #faf8f4;
}

.table-wrap th .sort-btn {
    background: transparent;
    border: 0;
    padding: 0;
    color: inherit;
    font: inherit;
    letter-spacing: inherit;
    text-transform: inherit;
    cursor: pointer;
}

.table-wrap th .sort-btn[data-active='1'] {
    color: var(--brand);
}

.table-wrap th .sort-btn:hover {
    color: var(--brand);
}

.table-wrap td code {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 0.84rem;
    color: #003d4d;
}

body.page-admin_suppliers .table-wrap tbody tr.supplier-row-expired td {
    background: #ffe0e0;
}

body.page-admin_suppliers .table-wrap tbody tr.supplier-row-expiring td {
    background: #fff4cc;
}

body.page-admin_suppliers .suppliers-col-supplier,
body.page-admin_suppliers .suppliers-cell-supplier {
    width: 220px;
    max-width: 220px;
}

body.page-admin_suppliers .suppliers-col-quality,
body.page-admin_suppliers .suppliers-cell-quality {
    width: 180px;
    max-width: 180px;
}

body.page-admin_suppliers .suppliers-text-wrap {
    display: inline-block;
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
}

body.page-admin_suppliers .suppliers-link-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 54px;
    padding: 4px 8px;
    font-size: 0.75rem;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

body.page-admin_suppliers .suppliers-scope-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
    gap: 6px 10px;
    margin-bottom: 6px;
}

body.page-admin_suppliers .suppliers-scope-grid label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

body.page-admin_suppliers #scope_of_supply_other {
    margin-top: 2px;
}

body.page-admin_suppliers .suppliers-list-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 10px;
}

body.page-admin_suppliers .suppliers-list-head h3 {
    margin: 0;
}

body.page-admin_suppliers .suppliers-modal {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    isolation: isolate;
}

body.page-admin_suppliers .suppliers-modal.hidden {
    display: none;
}

body.page-admin_suppliers .suppliers-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(31, 42, 46, 0.45);
    z-index: 0;
}

body.page-admin_suppliers .suppliers-modal__dialog {
    position: relative;
    z-index: 1;
    width: min(1100px, calc(100vw - 48px));
    max-height: calc(100vh - 48px);
    overflow: auto;
    background: var(--panel);
    border: 1px solid rgba(214, 206, 191, 0.85);
    border-radius: 18px;
    padding: 16px;
    box-shadow: var(--shadow);
}

body.page-admin_suppliers .suppliers-modal__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 10px;
}

body.page-admin_suppliers .suppliers-modal__header h3 {
    margin: 0;
}

body.page-admin_suppliers .suppliers-modal__actions {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: flex-end;
    align-items: center;
    gap: 10px;
    padding-top: 8px;
    border-top: 1px solid rgba(214, 206, 191, 0.85);
}

body.page-admin_suppliers .suppliers-modal__actions button {
    white-space: nowrap;
}

body.page-admin_suppliers.has-suppliers-modal {
    overflow: hidden;
}

.added-cell {
    line-height: 1.2;
}

.added-cell code {
    display: block;
    white-space: nowrap;
}

.lot-serial-cell {
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.lot-serial-cell a {
    overflow-wrap: anywhere;
    word-break: break-word;
}

.stock-part-link {
    display: inline-flex;
    align-items: center;
    padding: 2px 6px;
    margin: -2px -6px;
    border-radius: 6px;
    color: inherit;
    text-decoration: none;
    transition: background-color 140ms ease, color 140ms ease, box-shadow 140ms ease;
}

.stock-part-link:hover,
.stock-part-link:focus-visible {
    background: rgba(0, 95, 115, 0.08);
    color: var(--brand);
    box-shadow: inset 0 0 0 1px rgba(0, 95, 115, 0.18);
    outline: none;
}

.batch-qr-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    padding: 2px;
    border: 1px solid #d3d9e3;
    border-radius: 8px;
    background: #fff;
}

.batch-qr-image {
    display: block;
    width: 50px;
    height: 50px;
    image-rendering: pixelated;
}

#edit-batch-qr {
    flex: 0 0 auto;
}

#edit-batch-qr .batch-qr-link {
    width: 156px;
    height: 156px;
}

#edit-batch-qr .batch-qr-image {
    width: 152px;
    height: 152px;
}

.qr-label {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    max-width: 420px;
    padding: 10px;
    border: 1px solid #d5dbe6;
    border-radius: 10px;
    background: #fff;
}

.qr-label-list {
    display: flex;
    flex-direction: column;
    gap: 14px;
    align-items: flex-start;
}

.qr-label-print-item {
    display: block;
}

.qr-label__content {
    display: grid;
    grid-template-columns: 126px 1fr;
    grid-template-areas: 'qr meta';
    align-items: start;
    gap: 12px;
}

.qr-label__code .batch-qr-link {
    width: 126px;
    height: 126px;
    border-radius: 10px;
}

.qr-label__code .batch-qr-image {
    width: 118px;
    height: 118px;
}

.qr-label__meta {
    grid-area: meta;
    font-size: 0.9rem;
    line-height: 1.3;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.qr-label__meta code {
    font-size: inherit;
    font-family: inherit;
}

.qr-label__code {
    grid-area: qr;
}

@media print {
    /* Note: @page size for batch-label is set inline by batch-label.php based on system settings */
    @page {
        size: 62mm 29mm;
        margin: 1mm;
    }

    .page-bg {
        display: none !important;
    }

    .topbar,
    .footer,
    .page-title,
    #qr-find-form,
    #location-find-form,
    #location-label-form,
    #qr-message,
    #location-message,
    #location-label-message,
    #print-label,
    #qr-details-tbody,
    .main-nav,
    .panel h3 {
        display: none !important;
    }

    body.page-batch-label .panel,
    body.page-qr-code .panel,
    body.page-location-label .panel,
    body.page-location-qr .panel {
        border: 0;
        box-shadow: none;
        padding: 0;
        margin: 0;
        background: transparent;
    }

    body.page-batch-label .shell,
    body.page-qr-code .shell,
    body.page-location-label .shell,
    body.page-location-qr .shell {
        max-width: none;
        width: auto;
        margin: 0;
        padding: 0;
    }

    body.page-batch-label,
    body.page-qr-code,
    body.page-location-label,
    body.page-location-qr {
        min-height: auto;
        background: transparent;
    }


    body.page-batch-label .qr-label,
    body.page-qr-code .qr-label,
    body.page-location-label .qr-label,
    body.page-location-qr .qr-label {
        border: 0;
        margin: 0;
        padding: 0;
        max-width: 60mm;
        width: 60mm;
        min-height: 27mm;
        display: flex;
        flex-direction: column;
        gap: 1mm;
        color: #000;
    }

    body.page-batch-label .qr-label-list {
        display: block !important;
        gap: 0;
        align-items: stretch;
        margin: 0;
        padding: 0;
    }

    body.page-batch-label .qr-label-print-item {
        width: auto;
        min-height: 0;
        page-break-after: always;
        break-after: page;
        display: block;
        margin: 0;
        padding: 0;
    }

    body.page-batch-label .qr-label-print-item:last-child {
        page-break-after: auto;
        break-after: auto;
    }

    body.page-batch-label .qr-label__content,
    body.page-qr-code .qr-label__content,
    body.page-location-label .qr-label__content,
    body.page-location-qr .qr-label__content {
        display: grid;
        grid-template-columns: 16mm 1fr;
        grid-template-areas: 'qr meta';
        gap: 1.2mm;
        align-items: start;
    }

    body.page-batch-label .qr-label__code .batch-qr-link,
    body.page-qr-code .qr-label__code .batch-qr-link,
    body.page-location-label .qr-label__code .batch-qr-link,
    body.page-location-qr .qr-label__code .batch-qr-link {
        width: 16mm;
        height: 16mm;
        padding: 0.4mm;
        border: 0.2mm solid #000;
        border-radius: 0;
    }

    body.page-batch-label .qr-label__code .batch-qr-image,
    body.page-qr-code .qr-label__code .batch-qr-image,
    body.page-location-label .qr-label__code .batch-qr-image,
    body.page-location-qr .qr-label__code .batch-qr-image {
        width: 15mm;
        height: 15mm;
    }

    body.page-batch-label .qr-label__meta,
    body.page-qr-code .qr-label__meta,
    body.page-location-label .qr-label__meta,
    body.page-location-qr .qr-label__meta {
        gap: 0.5mm;
        line-height: 1.12;
        font-size: 2.7mm;
        color: #000;
    }

    body.page-batch-label .qr-label__meta code,
    body.page-qr-code .qr-label__meta code {
        font-size: 2.7mm;
        color: #000;
    }

    body.page-batch-label,
    body.page-batch-label *,
    body.page-qr-code,
    body.page-qr-code * {
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }
}

.expiry-cell {
    line-height: 1.2;
}

.expiry-date {
    display: block;
    white-space: nowrap;
}

.expiry-flag {
    display: block;
    margin-top: 2px;
    font-weight: 700;
    color: #b91c1c;
    white-space: nowrap;
}

.badge {
    display: inline-block;
    padding: 4px 8px;
    border-radius: 999px;
    font-size: 0.75rem;
    border: 1px solid var(--line);
    background: #fff;
}

.badge.quarantined {
    border-color: #e8b449;
    background: #fff3d9;
    color: #7e5a00;
}

.badge.active {
    border-color: #89c5b5;
    background: #e5f7f2;
    color: #1e6d58;
}

.badge.create,
.badge.receive {
    border-color: #89c5b5;
    background: #e5f7f2;
    color: #1e6d58;
}

.badge.update,
.badge.move {
    border-color: #b1c4dc;
    background: #edf4ff;
    color: #294f78;
}

.badge.delete,
.badge.adjust,
.badge.issue {
    border-color: #e8b449;
    background: #fff3d9;
    color: #7e5a00;
}

.badge.consumed,
.badge.removed {
    border-color: #d8bcbc;
    background: #f4eeee;
    color: #6b5252;
}

.quick-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 10px;
}

.dashboard-current {
    margin-top: 14px;
    border: 1px solid #d5dce7;
    border-radius: 14px;
    padding: 16px;
    background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
}

.dashboard-current__headline {
    margin-bottom: 10px;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.dashboard-current__headline-main {
    min-width: 0;
    flex: 1 1 auto;
}

.dashboard-current__title {
    font-size: 1.7rem;
    font-weight: 700;
    color: #0b2b3a;
    line-height: 1.15;
}

.dashboard-current__meta {
    margin-top: 4px;
}


#dashboard-part-number {
    font-size: 1.35rem;
    font-weight: 700;
    color: #0f172a;
}
.dashboard-current__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(220px, 1fr));
    gap: 12px;
}

.dashboard-current__field {
    border: 1px solid #e4eaf2;
    border-radius: 10px;
    padding: 10px 12px;
    background: #fff;
}

.dashboard-current__field label {
    display: block;
    font-size: 0.76rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: #597185;
    margin-bottom: 4px;
}

.dashboard-current__field > div {
    font-size: 1.02rem;
    color: #123245;
}

.dashboard-current__field--wide {
    grid-column: 1 / -1;
}

.dashboard-current__actions {
    margin-top: 12px;
}

.dashboard-part-image-inline {
    display: block;
    flex: 0 0 auto;
    border: 1px solid #d9e3ef;
    border-radius: 10px;
    padding: 4px;
    background: #fff;
    width: 232px;
    height: 152px;
}

.dashboard-map-preview-box {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    width: 272px;
    min-height: 184px;
}

.dashboard-map-preview {
    position: relative;
    display: block;
    border: 1px solid #d9e3ef;
    border-radius: 10px;
    background: #fff;
    width: 272px;
    aspect-ratio: 272 / 152;
    overflow: hidden;
}

.dashboard-map-preview.hidden {
    display: block;
    visibility: hidden;
}

#dashboard-map-preview-image,
#dashboard-location-map-preview-image {
    display: block;
    width: 100%;
    height: 100%;
    background: #f8fbff;
}

#dashboard-map-preview-overlay,
#dashboard-location-map-preview-overlay {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

#dashboard-map-preview-zone,
#dashboard-location-map-preview-zone {
    fill: rgba(220, 38, 38, 0.28);
    stroke: #b91c1c;
    stroke-width: 1;
}

.dashboard-map-preview-caption {
    width: 100%;
    min-height: 34px;
    color: #2a3f52;
    font-size: 0.79rem;
    line-height: 1.35;
}

.dashboard-map-preview-caption code {
    color: #0f2333;
    font-size: 0.76rem;
}

.dashboard-part-image-box {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 6px;
    width: 232px;
    min-height: 184px;
}

/* Keep fixed preview slot to prevent page jumping before/without image. */
.dashboard-part-image-inline.hidden {
    display: block;
    visibility: hidden;
}

.part-image-wrong-btn.hidden,
#dashboard-part-image-wrong-btn.hidden {
    display: inline-block;
    visibility: hidden;
}

.part-image-wrong-btn,
#dashboard-part-image-wrong-btn {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    border-color: #d9bcbc;
    color: #7b2c2c;
    padding: 4px 8px;
}

.part-image-wrong-btn:hover,
#dashboard-part-image-wrong-btn:hover {
    border-color: #bc4749;
    color: #bc4749;
}

#dashboard-part-image,
#dashboard-location-image,
#edit-part-image,
#admin-part-image,
#receive-part-image {
    display: block;
    width: 224px;
    height: 144px;
    object-fit: contain;
    border-radius: 6px;
    background: #f8fbff;
}

.dashboard-inline-link {
    color: inherit;
    text-decoration: underline;
    text-decoration-style: dotted;
    text-underline-offset: 2px;
}

.dashboard-inline-link:hover {
    color: var(--brand);
}

.dashboard-location-tree-wrap {
    margin-top: 14px;
    padding: 12px;
    border: 1px solid #dce4ef;
    border-radius: 10px;
    background: #fff;
}

.dashboard-location-tree-title {
    margin: 0 0 8px;
    font-size: 0.95rem;
    color: #17364b;
}

.dashboard-location-tree {
    margin: 0;
    padding-left: 16px;
    list-style: none;
}

.dashboard-location-tree ul {
    margin: 6px 0 0;
    padding-left: 16px;
    border-left: 1px dashed #c8d4e6;
    list-style: none;
}

.dashboard-location-tree li {
    margin: 6px 0;
}

.dashboard-tree-node {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #f5f8fc;
    border: 1px solid #d9e2ef;
    border-radius: 999px;
    padding: 5px 10px;
}

.dashboard-tree-node--root {
    background: #e8f6ff;
    border-color: #9ccbe6;
}

.dashboard-tree-batch-list {
    margin: 7px 0 0 10px;
    padding-left: 14px;
    list-style: disc;
}

.dashboard-tree-batch-list li {
    margin: 3px 0;
    color: #233142;
    font-size: 0.84rem;
}

.dashboard-tree-batch-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #f5f8fc;
    border: 1px solid #d9e2ef;
    border-radius: 999px;
    padding: 3px 9px;
    color: inherit;
    text-decoration: none;
}

.dashboard-tree-batch-inline-image {
    display: block;
    flex: 0 0 56px;
    width: 56px;
    height: 56px;
    object-fit: contain;
    border: 1px solid #d9e3ef;
    border-radius: 8px;
    background: #fff;
    padding: 1px;
}

.dashboard-tree-batch-inline-image--empty {
    border-color: transparent;
    background: transparent;
}

.dashboard-tree-batch-link {
    color: #11558a;
    text-decoration: none;
    font-weight: 700;
}

.dashboard-tree-batch-link:hover {
    color: #0d446d;
    text-decoration: underline;
}

.storage-map-toolbar {
    display: grid;
    grid-template-columns: 280px 1fr auto;
    gap: 10px;
    align-items: end;
}

.storage-map-search-row {
    display: flex;
    gap: 8px;
}

.storage-map-search-row input {
    flex: 1;
}

.storage-map-toolbar__actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.storage-map-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 380px;
    gap: 14px;
    align-items: start;
}

.storage-map-layout.is-editor {
    grid-template-columns: minmax(0, 1fr);
}

.storage-map-canvas-panel {
    min-height: 620px;
}

.storage-map-stage {
    position: relative;
    border: 1px solid #d4c8b7;
    border-radius: 12px;
    overflow: hidden;
    background: #f4efe6;
    min-height: 560px;
}

.storage-map-settings-form {
    margin-bottom: 8px;
}

.storage-map-editor-hint {
    margin: 6px 0 14px;
    color: #4f6272;
    font-size: 0.82rem;
}

#storage-map-save-settings-btn.is-dirty {
    border-color: #7e5800;
    background: #fff3d9;
    color: #7e5800;
}

.storage-map-background {
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    width: 100%;
    height: 100%;
    max-width: none;
}

.storage-map-overlay {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    cursor: default;
}

.storage-map-selected-location {
    padding: 10px;
    border: 1px solid #d5dce7;
    border-radius: 10px;
    background: #fff;
    font-size: 0.98rem;
}

.storage-map-location-summary {
    margin-top: 10px;
    border: 1px solid #d5dce7;
    border-radius: 10px;
    background: #f7fbff;
    padding: 10px;
    font-size: 0.86rem;
    color: #1b3850;
}

.storage-map-sub-locations {
    margin-top: 10px;
    border: 1px solid #d5dce7;
    border-radius: 10px;
    background: #fff;
    padding: 10px;
}

.storage-map-sub-locations-title {
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #526474;
    margin-bottom: 8px;
}

.storage-map-sub-locations-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.storage-map-sub-locations-list li {
    border: 1px solid #e5ebf3;
    border-radius: 8px;
    padding: 6px 8px;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    font-size: 0.82rem;
}

.storage-map-sub-locations-list li span {
    color: #4a6174;
}

.storage-map-stock-table-wrap {
    margin-top: 10px;
}

.storage-map-zone-table-wrap {
    margin-top: 14px;
}

.storage-map-autosave-status {
    margin-top: 10px;
    padding: 8px 10px;
    border-radius: 10px;
    border: 1px solid #d5dce7;
    background: #f8fbff;
    color: #1b3850;
    font-size: 0.84rem;
    font-weight: 600;
}

.storage-map-autosave-status.is-saving {
    border-color: #cfd9e6;
    background: #f5f8fc;
    color: #34495e;
}

.storage-map-autosave-status.is-success {
    border-color: #bde5de;
    background: #effaf7;
    color: #1f6a60;
}

.storage-map-autosave-status.is-error {
    border-color: #efc1c2;
    background: #fff3f3;
    color: #9e3032;
}

.storage-map-zone-table-wrap .ghost {
    padding: 5px 8px;
    font-size: 0.75rem;
}

.storage-map-zone-row-selected {
    background: #eef6ff;
}

.map-zone .map-zone-rect {
    fill: rgba(142, 154, 175, 0.18);
    stroke: #5f6b70;
    stroke-width: 2;
    transition: fill 120ms ease, stroke 120ms ease, stroke-width 120ms ease;
}

.map-zone .map-zone-label {
    fill: #15242d;
    font-size: 18px;
    font-weight: 600;
    paint-order: stroke;
    stroke: rgba(255, 255, 255, 0.75);
    stroke-width: 3px;
    pointer-events: none;
}

.map-zone.map-zone--empty .map-zone-rect {
    fill: rgba(118, 130, 149, 0.18);
    stroke: #5f6b70;
}

.map-zone.map-zone--stocked .map-zone-rect {
    fill: rgba(42, 157, 143, 0.30);
    stroke: #186b60;
}

.map-zone.map-zone--quarantine .map-zone-rect {
    fill: rgba(188, 71, 73, 0.28);
    stroke: #8c292b;
}

.map-zone.map-zone--mixed .map-zone-rect {
    fill: rgba(181, 124, 0, 0.30);
    stroke: #7e5800;
}

.map-zone.map-zone--inactive .map-zone-rect {
    fill: rgba(160, 160, 160, 0.15);
    stroke: #6c6c6c;
    stroke-dasharray: 8 4;
}

.map-zone.map-zone--draft .map-zone-rect {
    fill: rgba(0, 95, 115, 0.16);
    stroke: #005f73;
    stroke-width: 2.5;
    stroke-dasharray: 10 6;
}

.map-zone.map-zone--draft .map-zone-label {
    fill: #005f73;
}

.map-zone.is-selected .map-zone-rect {
    stroke: #004d5f;
    stroke-width: 3;
}

.map-zone.is-highlighted .map-zone-rect {
    stroke: #ca6702;
    stroke-width: 4;
    filter: drop-shadow(0 0 10px rgba(202, 103, 2, 0.45));
}

.map-zone-resize-handle {
    fill: #0d3242;
    stroke: #fff;
    stroke-width: 1;
    cursor: nwse-resize;
}

.storage-map-stage.is-editor .storage-map-overlay {
    cursor: crosshair;
}

@media (max-width: 1200px) {
    .storage-map-layout {
        grid-template-columns: 1fr;
    }

    .storage-map-canvas-panel {
        min-height: 460px;
    }

    .storage-map-toolbar {
        grid-template-columns: 1fr;
    }

    .storage-map-search-row {
        flex-wrap: wrap;
    }
}

@media (max-width: 900px) {
    .dashboard-current__grid {
        grid-template-columns: 1fr;
    }

    .dashboard-current__title {
        font-size: 1.35rem;
    }

    .dashboard-current__headline {
        gap: 10px;
    }

    .dashboard-part-image-box {
        width: 104px;
        min-height: 90px;
    }

    .dashboard-map-preview-box {
        width: 104px;
        min-height: 90px;
    }

    .dashboard-map-preview {
        width: 104px;
        height: 70px;
    }

    .dashboard-map-preview-caption {
        font-size: 0.66rem;
    }

    .dashboard-part-image-inline {
        width: 104px;
        height: 70px;
        padding: 3px;
    }

    #dashboard-part-image,
    #dashboard-location-image,
    #edit-part-image,
    #admin-part-image,
    #receive-part-image {
        width: 96px;
        height: 62px;
    }

    #edit-batch-qr .batch-qr-link {
        width: 76px;
        height: 76px;
    }

    #edit-batch-qr .batch-qr-image {
        width: 70px;
        height: 70px;
    }
}

.footer {
    padding: 14px 24px 24px;
    color: var(--muted);
    font-size: 0.82rem;
    display: flex;
    justify-content: space-between;
    gap: 12px;
}

.footer-db {
    font-weight: 600;
}

.footer-db--beta {
    color: #b42318;
}

/* Topbar row: brand + user badge */
.topbar-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 14px;
}

.topbar-info-strip {
    flex: 1;
    min-width: 260px;
    max-width: 760px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding-top: 2px;
}

.topbar-info-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    text-decoration: none;
    color: var(--ink);
    border: 1px solid var(--line);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.86);
    font-size: 0.79rem;
    line-height: 1.2;
    padding: 6px 10px;
}

.topbar-info-chip strong {
    font-family: 'IBM Plex Mono', monospace;
    font-weight: 600;
}

.topbar-info-chip--err {
    border-color: rgba(188, 71, 73, 0.45);
    background: rgba(188, 71, 73, 0.12);
    color: #7d1d20;
}

.topbar-info-chip--warn {
    border-color: rgba(181, 124, 0, 0.45);
    background: rgba(181, 124, 0, 0.13);
    color: #734f00;
}

.user-badge {
    display: flex;
    align-items: center;
    gap: 8px;
    padding-top: 4px;
}

.scanner-select {
    height: 32px;
    min-width: 116px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.85);
    color: var(--ink);
    padding: 4px 8px;
    font-size: 0.78rem;
}

.work-order-select {
    min-width: 240px;
    max-width: 360px;
}

.user-badge__name {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 0.82rem;
    font-weight: 500;
    background: var(--brand);
    color: #fff;
    padding: 4px 10px;
    border-radius: 999px;
    letter-spacing: 0.06em;
}

.user-badge__logout {
    font-size: 0.82rem;
}

.log-details {
    margin: 0;
    white-space: pre-wrap;
    font-family: 'IBM Plex Mono', monospace;
    font-size: 0.75rem;
    color: var(--muted);
}

/* Login page */
.login-page {
    min-height: 100vh;
    display: grid;
    place-items: center;
    padding: 24px;
}

.login-card {
    width: 100%;
    max-width: 400px;
    background: var(--panel);
    border: 1px solid rgba(214, 206, 191, 0.85);
    border-radius: 18px;
    padding: 32px;
    box-shadow: var(--shadow);
}

.login-card__brand {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 28px;
}

.login-card__brand .brand-mark {
    width: 54px;
    height: 54px;
    border-radius: 12px;
}

.login-card h2 {
    margin: 0 0 20px;
    font-size: 1.1rem;
    color: var(--muted);
    font-weight: 500;
}

.login-error {
    background: #fde8e8;
    border: 1px solid #f4b8b8;
    color: var(--err);
    border-radius: 10px;
    padding: 10px 12px;
    font-size: 0.88rem;
    margin-bottom: 14px;
}

@media (max-width: 1000px) {
    .grid-form,
    .grid-form.compact {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .page-admin_locations .location-form-row,
    .page-admin_locations .location-form-row--actions {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .page-admin_locations .location-form-row--single,
    .page-admin_locations .location-form-row--triple {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    #receive-form .receive-price-buy,
    #receive-form .receive-price-sell,
    #receive-form .receive-location-storage,
    #receive-form .receive-location-unit,
    #receive-form .receive-location-row,
    #receive-form .receive-location-box {
        grid-column: span 1;
    }

    #receive-form .receive-location-selected {
        grid-column: 1 / -1;
    }
}

@media (max-width: 680px) {
    .page-dashboard .dashboard-current {
        padding: 12px;
        border-radius: 12px;
    }

    .page-dashboard .dashboard-current__headline {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
    }

    .page-dashboard .dashboard-current__headline-main {
        order: 1;
    }

    .page-dashboard .dashboard-map-preview-box,
    .page-dashboard .dashboard-part-image-box {
        width: 100%;
        min-height: 0;
        align-items: stretch;
    }

    .page-dashboard .dashboard-map-preview,
    .page-dashboard .dashboard-part-image-inline {
        width: 100%;
        height: auto;
        aspect-ratio: 16 / 9;
        max-width: none;
    }

    .page-dashboard #dashboard-part-image,
    .page-dashboard #dashboard-location-image {
        width: 100%;
        height: 100%;
    }

    .page-dashboard .dashboard-map-preview-caption {
        font-size: 0.74rem;
        min-height: 0;
    }

    .page-dashboard .dashboard-current__grid {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .page-dashboard .dashboard-current__field {
        padding: 8px 10px;
    }

    .page-dashboard .dashboard-current__actions {
        display: grid;
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .page-dashboard .dashboard-current__actions .ghost {
        width: 100%;
        text-align: center;
    }

    .topbar,
    .shell,
    .footer {
        padding-left: 14px;
        padding-right: 14px;
    }

    .grid-form,
    .grid-form.compact {
        grid-template-columns: 1fr;
    }

    .page-admin_locations .location-form-row,
    .page-admin_locations .location-form-row--actions {
        grid-template-columns: 1fr;
    }

    .page-admin_locations .location-form-row--single,
    .page-admin_locations .location-form-row--triple {
        grid-template-columns: 1fr;
    }

    .footer {
        flex-direction: column;
    }

    .scanner-select {
        min-width: 96px;
    }

    .topbar-row {
        flex-direction: column;
        align-items: stretch;
    }

    .topbar-info-strip {
        order: 2;
        max-width: none;
        justify-content: flex-start;
    }

    .user-badge {
        order: 3;
        padding-top: 0;
    }

    /* Mobile hamburger nav: structured panel menu */
    .nav-toggle {
        display: flex;
        width: 40px;
        height: 40px;
        border-radius: 10px;
    }

    .main-nav {
        display: none;
        margin-top: 10px;
        width: 100%;
        flex-direction: column;
        gap: 10px;
        padding: 12px;
        border: 1px solid var(--line);
        border-radius: 14px;
        background: rgba(255, 255, 255, 0.96);
        box-shadow: 0 14px 26px rgba(15, 23, 42, 0.14);
        max-height: min(72vh, 560px);
        overflow-y: auto;
    }

    .topbar {
        padding-bottom: 16px;
    }

    .topbar.nav-open .main-nav {
        display: flex;
    }

    .topbar.nav-open {
        padding-bottom: 20px;
    }

    .main-nav > .nav-link {
        width: 100%;
        border-radius: 10px;
        padding: 10px 12px;
        font-size: 0.92rem;
    }

    .nav-group {
        width: 100%;
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
        padding: 8px;
        border: 1px solid #e7ecf3;
        border-radius: 10px;
        background: #f8fbff;
    }

    .nav-group .nav-link--group {
        display: block;
        width: 100%;
        border: none;
        border-radius: 0;
        padding: 0;
        background: transparent;
        color: #0f172a;
        font-size: 0.78rem;
        font-weight: 700;
        letter-spacing: 0.03em;
        text-transform: uppercase;
    }

    .nav-submenu {
        position: static;
        display: grid !important;
        grid-template-columns: 1fr;
        gap: 6px;
        box-shadow: none;
        background: transparent;
        border: none;
        padding: 0;
        min-width: 0;
    }

    .nav-submenu .nav-link {
        width: 100%;
        border-radius: 10px;
        padding: 9px 11px;
        font-size: 0.9rem;
    }
}