:root {
    color-scheme: light;
    --app-bg: #f4f6f9;
    --surface: #ffffff;
    --surface-soft: #f8fafc;
    --surface-muted: #eef2f6;
    --text: #172033;
    --text-strong: #0f172a;
    --muted: #657186;
    --line: #e1e7ef;
    --line-strong: #cbd5e1;
    --brand: #df1020;
    --brand-dark: #b90d1a;
    --brand-soft: #fff0f2;
    --brand-border: #ffcbd1;
    --sidebar: #131d2d;
    --sidebar-deep: #0d1522;
    --sidebar-text: #f8fafc;
    --sidebar-muted: #aeb9c9;
    --sidebar-hover: rgba(255, 255, 255, .075);
    --sidebar-active: rgba(223, 16, 32, .22);
    --success: #14804a;
    --success-soft: #eaf8f0;
    --warning: #a96300;
    --warning-soft: #fff6df;
    --danger: #c52233;
    --danger-soft: #fff0f2;
    --info: #2169b2;
    --info-soft: #edf5ff;
    --shadow-xs: 0 1px 2px rgba(15, 23, 42, .04);
    --shadow-sm: 0 8px 24px rgba(15, 23, 42, .06);
    --shadow-md: 0 18px 48px rgba(15, 23, 42, .11);
    --radius-sm: 9px;
    --radius: 14px;
    --radius-lg: 20px;
    --sidebar-width: 286px;
    --topbar-height: 72px;
    --transition: 180ms ease;
}

* {
    box-sizing: border-box;
}

html {
    min-height: 100%;
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
}

body {
    min-height: 100%;
    margin: 0;
    background:
        radial-gradient(circle at 86% -10%, rgba(223, 16, 32, .055), transparent 28rem),
        var(--app-bg);
    color: var(--text);
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size: 15px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

body.sidebar-locked {
    overflow: hidden;
}

a {
    color: inherit;
    text-decoration-thickness: .08em;
    text-underline-offset: .16em;
}

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

button,
a,
input,
select,
textarea {
    -webkit-tap-highlight-color: transparent;
}

::selection {
    background: rgba(223, 16, 32, .18);
}

.app-shell {
    min-height: 100vh;
    display: grid;
    grid-template-columns: var(--sidebar-width) minmax(0, 1fr);
}

.sidebar {
    position: fixed;
    inset: 0 auto 0 0;
    z-index: 1000;
    width: var(--sidebar-width);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    color: var(--sidebar-text);
    background:
        radial-gradient(circle at 0 0, rgba(223, 16, 32, .16), transparent 17rem),
        linear-gradient(180deg, var(--sidebar) 0%, var(--sidebar-deep) 100%);
    border-right: 1px solid rgba(255, 255, 255, .06);
    box-shadow: 12px 0 32px rgba(8, 15, 27, .08);
}

.sidebar-head {
    flex: 0 0 auto;
    padding: 20px 18px 16px;
    border-bottom: 1px solid rgba(255, 255, 255, .07);
}

.sidebar-brand {
    display: flex;
    align-items: center;
    gap: 12px;
    color: #fff;
    text-decoration: none;
}

.brand-mark {
    position: relative;
    flex: 0 0 42px;
    width: 42px;
    height: 42px;
    border-radius: 13px;
    background: #fff;
    box-shadow: 0 10px 24px rgba(0, 0, 0, .18);
}

.brand-mark::before,
.brand-mark::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    border-radius: 2px;
    background: var(--brand);
    transform: translate(-50%, -50%);
}

.brand-mark::before {
    width: 24px;
    height: 8px;
}

.brand-mark::after {
    width: 8px;
    height: 24px;
}

.brand-copy {
    min-width: 0;
}

.brand-title {
    display: block;
    overflow: hidden;
    color: #fff;
    font-size: 17px;
    font-weight: 800;
    letter-spacing: -.02em;
    line-height: 1.2;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.brand-subtitle {
    display: block;
    margin-top: 3px;
    color: var(--sidebar-muted);
    font-size: 11px;
    font-weight: 650;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.sidebar-context {
    display: grid;
    gap: 9px;
    padding: 14px 12px 8px;
}

.context-card {
    position: relative;
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr);
    gap: 10px;
    padding: 10px 11px;
    border: 1px solid rgba(255, 255, 255, .075);
    border-radius: 12px;
    background: rgba(255, 255, 255, .045);
}

.context-card.context-target {
    background: rgba(47, 102, 190, .13);
}

.context-card.context-source {
    background: rgba(20, 128, 74, .11);
}

.context-icon {
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border-radius: 10px;
    color: #fff;
    background: rgba(255, 255, 255, .09);
}

.context-icon svg,
.nav-icon svg,
.topbar-icon svg,
.button-icon svg {
    width: 18px;
    height: 18px;
    display: block;
    stroke: currentColor;
}

.context-label {
    color: var(--sidebar-muted);
    font-size: 10px;
    font-weight: 750;
    letter-spacing: .075em;
    text-transform: uppercase;
}

.context-value {
    overflow: hidden;
    margin-top: 1px;
    color: #fff;
    font-size: 13px;
    font-weight: 720;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.context-meta {
    overflow: hidden;
    margin-top: 1px;
    color: var(--sidebar-muted);
    font-size: 11px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.context-link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-top: 5px;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    text-decoration: none;
}

.context-link:hover {
    text-decoration: underline;
}

.sidebar-scroll {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-color: rgba(255, 255, 255, .2) transparent;
    scrollbar-width: thin;
    padding: 8px 10px 18px;
}

.nav-group {
    margin: 4px 0 8px;
}

.nav-group summary {
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    min-height: 32px;
    padding: 5px 10px;
    color: var(--sidebar-muted);
    cursor: pointer;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
    user-select: none;
}

.nav-group summary::-webkit-details-marker {
    display: none;
}

.nav-group summary::after {
    content: "";
    width: 7px;
    height: 7px;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: rotate(45deg) translateY(-2px);
    transition: transform var(--transition);
}

.nav-group:not([open]) summary::after {
    transform: rotate(-45deg);
}

.sidebar-nav {
    display: grid;
    gap: 3px;
}

.sidebar-nav a {
    position: relative;
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr) auto;
    align-items: center;
    min-height: 44px;
    gap: 9px;
    padding: 5px 10px 5px 7px;
    border: 1px solid transparent;
    border-radius: 11px;
    color: #dce4ef;
    font-size: 13px;
    font-weight: 620;
    text-decoration: none;
    transition: background var(--transition), border-color var(--transition), color var(--transition), transform var(--transition);
}

.sidebar-nav a:hover {
    color: #fff;
    background: var(--sidebar-hover);
    transform: translateX(2px);
}

.sidebar-nav a.active {
    color: #fff;
    background: linear-gradient(90deg, rgba(223, 16, 32, .30), rgba(223, 16, 32, .13));
    border-color: rgba(255, 105, 119, .18);
    box-shadow: inset 3px 0 0 var(--brand);
}

.nav-icon {
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border-radius: 9px;
    color: #b9c5d5;
    background: rgba(255, 255, 255, .045);
}

.sidebar-nav a:hover .nav-icon,
.sidebar-nav a.active .nav-icon {
    color: #fff;
    background: rgba(255, 255, 255, .085);
}

.nav-label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sidebar-foot {
    flex: 0 0 auto;
    padding: 12px;
    border-top: 1px solid rgba(255, 255, 255, .07);
    background: rgba(0, 0, 0, .11);
}

.user-card {
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr) 34px;
    align-items: center;
    gap: 9px;
}

.user-avatar {
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    border-radius: 12px;
    color: #fff;
    background: linear-gradient(145deg, var(--brand), #9f0c18);
    font-size: 14px;
    font-weight: 850;
}

.user-name {
    overflow: hidden;
    color: #fff;
    font-size: 12px;
    font-weight: 750;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.user-role {
    overflow: hidden;
    margin-top: 1px;
    color: var(--sidebar-muted);
    font-size: 10px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.logout-button {
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border-radius: 10px;
    color: var(--sidebar-muted);
    text-decoration: none;
    background: rgba(255, 255, 255, .045);
    transition: color var(--transition), background var(--transition);
}

.logout-button:hover {
    color: #fff;
    background: rgba(223, 16, 32, .25);
}

.app-main {
    min-width: 0;
    grid-column: 2;
}

.topbar {
    position: sticky;
    top: 0;
    z-index: 600;
    height: var(--topbar-height);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 0 28px;
    border-bottom: 1px solid rgba(203, 213, 225, .75);
    background: rgba(255, 255, 255, .87);
    box-shadow: var(--shadow-xs);
    backdrop-filter: blur(18px);
}

.topbar-left,
.topbar-right {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.mobile-menu-button {
    display: none;
    width: 42px;
    height: 42px;
    place-items: center;
    border: 1px solid var(--line);
    border-radius: 12px;
    color: var(--text-strong);
    background: var(--surface);
    cursor: pointer;
}

.mobile-menu-button:hover {
    color: var(--brand);
    border-color: var(--brand-border);
    background: var(--brand-soft);
}

.topbar-breadcrumb {
    min-width: 0;
}

.topbar-section {
    color: var(--muted);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .11em;
    text-transform: uppercase;
}

.topbar-page {
    overflow: hidden;
    margin-top: 2px;
    color: var(--text-strong);
    font-size: 15px;
    font-weight: 760;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.topbar-chip {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 36px;
    max-width: 260px;
    padding: 7px 10px;
    border: 1px solid var(--line);
    border-radius: 11px;
    color: var(--muted);
    background: var(--surface);
    font-size: 11px;
    font-weight: 650;
    text-decoration: none;
}

.topbar-chip strong {
    overflow: hidden;
    color: var(--text);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.topbar-chip:hover {
    border-color: var(--brand-border);
    background: var(--brand-soft);
}

.topbar-icon {
    flex: 0 0 auto;
    color: var(--brand);
}

.page-main {
    min-height: calc(100vh - var(--topbar-height));
}

.container {
    width: min(100%, 1640px);
    margin: 0 auto;
    padding: 28px 28px 48px;
}

.page-heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 18px;
    margin: 0 0 22px;
}

.page-heading-copy {
    min-width: 0;
}

.page-kicker {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-bottom: 5px;
    color: var(--brand);
    font-size: 10px;
    font-weight: 850;
    letter-spacing: .13em;
    text-transform: uppercase;
}

.page-kicker::before {
    content: "";
    width: 18px;
    height: 2px;
    border-radius: 999px;
    background: currentColor;
}

.page-title {
    margin: 0;
    color: var(--text-strong);
    font-size: clamp(26px, 2.2vw, 36px);
    font-weight: 820;
    letter-spacing: -.035em;
    line-height: 1.1;
}

.page-subtitle {
    max-width: 720px;
    margin: 7px 0 0;
    color: var(--muted);
    font-size: 14px;
}

.grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr));
    gap: 18px;
}

.panel {
    position: relative;
    min-width: 0;
    margin-bottom: 18px;
    padding: 20px;
    border: 1px solid rgba(203, 213, 225, .72);
    border-radius: var(--radius-lg);
    background: var(--surface);
    box-shadow: var(--shadow-sm);
}

.panel::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 1px;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    background: linear-gradient(90deg, rgba(223, 16, 32, .12), transparent 35%);
    pointer-events: none;
}

.panel > :first-child {
    margin-top: 0;
}

.panel > :last-child {
    margin-bottom: 0;
}

.panel h2,
.panel h3,
.panel h4 {
    color: var(--text-strong);
    letter-spacing: -.02em;
}

.panel h2 {
    margin: 0 0 16px;
    font-size: 20px;
    font-weight: 800;
}

.panel h3 {
    margin: 0 0 12px;
    font-size: 17px;
    font-weight: 780;
}

.panel p {
    margin-top: 0;
}

.muted {
    color: var(--muted) !important;
}

.small {
    font-size: 12px !important;
}

hr {
    height: 1px;
    margin: 20px 0;
    border: 0;
    background: var(--line);
}

label {
    display: block;
    margin: 0 0 6px;
    color: var(--text-strong);
    font-size: 12px;
    font-weight: 760;
}

input[type="text"],
input[type="password"],
input[type="number"],
input[type="date"],
input[type="datetime-local"],
input[type="time"],
input[type="email"],
input[type="tel"],
input[type="url"],
input[type="search"],
input[type="file"],
textarea,
select {
    width: 100%;
    max-width: 100%;
    min-height: 44px;
    margin: 0 0 14px;
    padding: 10px 12px;
    border: 1px solid var(--line-strong);
    border-radius: 11px;
    outline: 0;
    color: var(--text);
    background: var(--surface);
    box-shadow: inset 0 1px 1px rgba(15, 23, 42, .02);
    transition: border-color var(--transition), box-shadow var(--transition), background var(--transition);
}

input[type="file"] {
    padding: 7px 8px;
}

input[type="file"]::file-selector-button {
    margin-right: 10px;
    padding: 7px 10px;
    border: 0;
    border-radius: 8px;
    color: var(--text);
    background: var(--surface-muted);
    cursor: pointer;
}

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

input:hover,
textarea:hover,
select:hover {
    border-color: #aeb9c9;
}

input:focus,
textarea:focus,
select:focus {
    border-color: var(--brand);
    box-shadow: 0 0 0 4px rgba(223, 16, 32, .10);
}

input:disabled,
textarea:disabled,
select:disabled {
    color: #8c98aa;
    background: #f1f4f7;
    cursor: not-allowed;
}

input::placeholder,
textarea::placeholder {
    color: #98a3b3;
}

input[type="checkbox"],
input[type="radio"] {
    width: 17px;
    height: 17px;
    margin: 0 7px 0 0;
    accent-color: var(--brand);
    vertical-align: -3px;
}

label:has(> input[type="checkbox"]),
label:has(> input[type="radio"]) {
    display: flex;
    align-items: flex-start;
    gap: 2px;
    min-height: 34px;
    margin-bottom: 8px;
    padding: 8px 10px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: var(--surface-soft);
    cursor: pointer;
}

button,
.btn {
    appearance: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 42px;
    padding: 9px 14px;
    border: 1px solid transparent;
    border-radius: 11px;
    color: #fff;
    background: linear-gradient(180deg, #ec2232 0%, var(--brand) 100%);
    box-shadow: 0 5px 14px rgba(223, 16, 32, .18);
    cursor: pointer;
    font-size: 13px;
    font-weight: 760;
    line-height: 1.15;
    text-align: center;
    text-decoration: none;
    white-space: nowrap;
    transition: transform var(--transition), box-shadow var(--transition), background var(--transition), border-color var(--transition);
}

button:hover,
.btn:hover {
    color: #fff;
    background: linear-gradient(180deg, #d91625 0%, var(--brand-dark) 100%);
    box-shadow: 0 8px 20px rgba(223, 16, 32, .24);
    transform: translateY(-1px);
}

button:active,
.btn:active {
    transform: translateY(0);
}

button:focus-visible,
.btn:focus-visible,
a:focus-visible {
    outline: 3px solid rgba(223, 16, 32, .22);
    outline-offset: 2px;
}

button:disabled,
.btn:disabled {
    opacity: .55;
    cursor: not-allowed;
    transform: none;
}

.btn-secondary {
    color: #334155;
    border-color: var(--line-strong);
    background: var(--surface);
    box-shadow: var(--shadow-xs);
}

.btn-secondary:hover {
    color: var(--text-strong);
    border-color: #aeb9c9;
    background: var(--surface-muted);
    box-shadow: var(--shadow-xs);
}

.btn-danger {
    color: #fff;
    background: linear-gradient(180deg, #dd3545 0%, var(--danger) 100%);
    box-shadow: 0 5px 14px rgba(197, 34, 51, .17);
}

.btn-danger:hover {
    background: linear-gradient(180deg, #c92536 0%, #a91b2b 100%);
}

.btn-success {
    color: #fff;
    background: linear-gradient(180deg, #1b9c5d 0%, var(--success) 100%);
    box-shadow: 0 5px 14px rgba(20, 128, 74, .17);
}

.actions {
    display: flex;
    align-items: center;
    gap: 9px;
    flex-wrap: wrap;
}

.actions form {
    margin: 0;
}

.actions .btn,
.actions button {
    flex: 0 0 auto;
}

.flash-success,
.flash-error,
.flash-info {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 11px;
    margin: 0 0 18px;
    padding: 13px 15px 13px 46px;
    border: 1px solid;
    border-radius: 13px;
    box-shadow: var(--shadow-xs);
    font-size: 13px;
    font-weight: 620;
}

.flash-success::before,
.flash-error::before,
.flash-info::before {
    position: absolute;
    top: 11px;
    left: 13px;
    width: 23px;
    height: 23px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    color: #fff;
    font-size: 13px;
    font-weight: 900;
}

.flash-success {
    color: #0b6137;
    border-color: #bde7cf;
    background: var(--success-soft);
}

.flash-success::before {
    content: "✓";
    background: var(--success);
}

.flash-error {
    color: #8f1727;
    border-color: #f0bdc4;
    background: var(--danger-soft);
}

.flash-error::before {
    content: "!";
    background: var(--danger);
}

.flash-info {
    color: #16538d;
    border-color: #bdd7f2;
    background: var(--info-soft);
}

.flash-info::before {
    content: "i";
    background: var(--info);
}

.table-wrap {
    width: 100%;
    overflow: auto;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: var(--surface);
    scrollbar-color: #bdc6d2 transparent;
    scrollbar-width: thin;
    -webkit-overflow-scrolling: touch;
}

.table-wrap > table {
    border: 0;
    border-radius: 0;
}

table {
    width: 100%;
    min-width: 720px;
    border-collapse: separate;
    border-spacing: 0;
    color: var(--text);
    background: var(--surface);
}

th,
td {
    padding: 11px 12px;
    border: 0;
    border-bottom: 1px solid var(--line);
    vertical-align: middle;
    text-align: left;
}

th {
    position: sticky;
    top: 0;
    z-index: 4;
    color: #4d596c;
    background: #f7f9fc;
    box-shadow: inset 0 -1px 0 var(--line);
    font-size: 11px;
    font-weight: 820;
    letter-spacing: .025em;
    text-transform: none;
    white-space: nowrap;
}

th a {
    color: inherit;
    text-decoration: none;
}

th a:hover {
    color: var(--brand);
}

tbody tr:last-child td {
    border-bottom: 0;
}

tbody tr {
    transition: background var(--transition);
}

tbody tr:not(.lot-detail-row):hover td {
    background: #fafbfd;
}

td strong {
    color: var(--text-strong);
}

.table-wrap td .actions {
    flex-wrap: nowrap;
}

.table-wrap td .actions .btn,
.table-wrap td .actions button {
    min-height: 36px;
    padding: 7px 10px;
    border-radius: 9px;
    font-size: 11px;
}

.table-wrap input[type="text"],
.table-wrap input[type="number"],
.table-wrap input[type="date"],
.table-wrap select {
    min-width: 92px;
    min-height: 38px;
    margin-bottom: 0;
    padding: 7px 9px;
    border-radius: 8px;
    font-size: 12px;
}

.badge,
.badge-success,
.badge-danger,
.lot-count-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 24px;
    padding: 3px 8px;
    border: 1px solid var(--line);
    border-radius: 999px;
    color: #526074;
    background: var(--surface-muted);
    font-size: 11px;
    font-weight: 760;
    line-height: 1;
    white-space: nowrap;
}

.badge-success {
    color: #0d693c;
    border-color: #bde7cf;
    background: var(--success-soft);
}

.badge-danger {
    color: #981829;
    border-color: #f0bdc4;
    background: var(--danger-soft);
}

.stock-low,
.status-error {
    color: var(--danger) !important;
    font-weight: 800 !important;
}

.stock-ok,
.status-ok {
    color: var(--success) !important;
    font-weight: 800 !important;
}

.status-warn,
.lot-expiring {
    color: var(--warning) !important;
    font-weight: 800 !important;
}

.lot-expired {
    color: var(--danger) !important;
    font-weight: 800 !important;
}

.inline-kpis,
.scan-kpis {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 12px;
}

.mobile-card-list,
.mobile-list {
    display: none;
}

.mobile-card {
    padding: 14px;
    border: 1px solid var(--line);
    border-radius: 13px;
    background: var(--surface);
    box-shadow: var(--shadow-xs);
}

.mobile-card .title {
    margin-bottom: 7px;
    color: var(--text-strong);
    font-weight: 780;
}

.mobile-card .meta {
    margin-top: 4px;
    color: var(--muted);
    font-size: 13px;
}

.sticky-actions-mobile {
    position: sticky;
    bottom: 0;
    z-index: 20;
    margin-top: 10px;
    padding: 10px 0 0;
    background: linear-gradient(180deg, rgba(244, 246, 249, 0), rgba(244, 246, 249, .98) 32%);
    backdrop-filter: blur(8px);
}

/* Dashboard */
.warning-grid,
.dashboard-cards,
.quick-grid {
    display: grid;
    gap: 14px;
    margin-bottom: 18px;
}

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

.dashboard-cards {
    grid-template-columns: repeat(6, minmax(0, 1fr));
}

.quick-grid {
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
}

.warning-card,
.dashboard-card,
.quick-card {
    position: relative;
    overflow: hidden;
    min-width: 0;
    padding: 17px;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: var(--surface);
    box-shadow: var(--shadow-sm);
}

.warning-card::after,
.dashboard-card::after,
.quick-card::after {
    content: "";
    position: absolute;
    inset: auto -22px -26px auto;
    width: 76px;
    height: 76px;
    border-radius: 50%;
    background: rgba(223, 16, 32, .045);
}

.warning-card {
    border-top: 3px solid var(--brand);
}

.warning-card .title,
.dashboard-card .label {
    color: var(--muted);
    font-size: 11px;
    font-weight: 760;
    letter-spacing: .035em;
    text-transform: uppercase;
}

.warning-card .count,
.dashboard-card .value {
    position: relative;
    z-index: 1;
    margin-top: 6px;
    color: var(--text-strong);
    font-size: clamp(24px, 2vw, 32px);
    font-weight: 850;
    letter-spacing: -.045em;
    line-height: 1;
}

.dashboard-card {
    min-height: 102px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.dashboard-card::before {
    content: "";
    width: 30px;
    height: 3px;
    margin-bottom: 12px;
    border-radius: 999px;
    background: var(--brand);
}

.quick-card {
    min-height: 122px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
}

.quick-card .card-title {
    color: var(--text-strong);
    font-size: 14px;
    font-weight: 790;
}

.quick-card .btn {
    position: relative;
    z-index: 1;
}

/* Modals and article details */
.modal-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1200;
    display: none;
    background: rgba(10, 18, 31, .58) !important;
    backdrop-filter: blur(4px);
}

.modal-backdrop.show {
    display: block;
}

.modal-window {
    position: fixed;
    top: 50%;
    left: 50%;
    z-index: 1201;
    display: none;
    width: min(820px, calc(100vw - 28px));
    max-height: 90vh;
    overflow: auto;
    padding: 22px !important;
    border: 1px solid var(--line) !important;
    border-radius: 20px !important;
    color: var(--text);
    background: var(--surface) !important;
    box-shadow: var(--shadow-md) !important;
    transform: translate(-50%, -50%);
}

.modal-window.show {
    display: block;
    animation: modal-in 170ms ease-out;
}

@keyframes modal-in {
    from { opacity: 0; transform: translate(-50%, calc(-50% + 10px)) scale(.985); }
    to { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}

.modal-header {
    position: sticky;
    top: -22px;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: -22px -22px 18px;
    padding: 18px 22px;
    border-bottom: 1px solid var(--line);
    background: rgba(255, 255, 255, .95);
    backdrop-filter: blur(12px);
}

.modal-header h2 {
    margin: 0;
}

.row-editing td {
    background: #fff9e9 !important;
}

.lot-detail-row > td {
    padding: 0 !important;
    background: var(--surface-soft) !important;
}

.lot-detail-panel {
    padding: 18px 20px !important;
    border-left: 4px solid var(--brand) !important;
}

.lot-detail-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

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

.lot-table {
    margin: 0;
}

.lot-toggle[aria-expanded="true"] {
    color: #fff;
    background: linear-gradient(180deg, #334155, #1f2937);
}

/* Scanner / special cards */
.scan-kpi,
.scan-status-box,
.scan-history-item,
.scanner-result {
    border: 1px solid var(--line) !important;
    border-radius: 14px !important;
    background: var(--surface) !important;
    box-shadow: var(--shadow-xs);
}

.scan-status-box.success,
.scan-history-item.success {
    border-left: 4px solid var(--success) !important;
    background: var(--success-soft) !important;
}

.scan-status-box.error,
.scan-history-item.error {
    border-left: 4px solid var(--danger) !important;
    background: var(--danger-soft) !important;
}

.scan-status-box.info,
.scan-history-item.info {
    border-left: 4px solid var(--info) !important;
    background: var(--info-soft) !important;
}

/* Print */
@media print {
    :root {
        --app-bg: #fff;
    }

    .sidebar,
    .topbar,
    .sidebar-backdrop,
    .no-print,
    .sticky-actions-mobile,
    .page-kicker {
        display: none !important;
    }

    .app-shell {
        display: block;
    }

    .app-main {
        display: block;
    }

    body {
        background: #fff !important;
    }

    .container {
        width: 100%;
        max-width: none;
        margin: 0;
        padding: 0;
    }

    .panel {
        break-inside: avoid;
        border: 0;
        box-shadow: none;
        padding: 0;
    }

    .table-wrap {
        overflow: visible;
        border: 0;
    }

    table {
        min-width: 100%;
    }

    th {
        position: static;
    }
}

.sidebar-backdrop {
    display: none;
}

@media (max-width: 1320px) {
    .warning-grid {
        grid-template-columns: repeat(5, minmax(130px, 1fr));
        overflow-x: auto;
        padding-bottom: 4px;
    }

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

@media (max-width: 1080px) {
    :root {
        --sidebar-width: 276px;
    }

    .app-shell {
        display: block;
    }

    .sidebar {
        width: min(88vw, 300px);
        transform: translateX(-104%);
        transition: transform 230ms ease;
        box-shadow: 18px 0 42px rgba(8, 15, 27, .25);
    }

    .sidebar.open {
        transform: translateX(0);
    }

    .sidebar-backdrop {
        position: fixed;
        inset: 0;
        z-index: 900;
        display: block;
        visibility: hidden;
        opacity: 0;
        background: rgba(10, 18, 31, .54);
        backdrop-filter: blur(2px);
        transition: opacity 230ms ease, visibility 230ms ease;
    }

    .sidebar-backdrop.show {
        visibility: visible;
        opacity: 1;
    }

    .app-main {
        grid-column: auto;
    }

    .mobile-menu-button {
        display: grid;
    }

    .topbar {
        padding: 0 18px;
    }

    .topbar-chip.context-chip {
        display: none;
    }

    .container {
        padding: 22px 18px 40px;
    }
}

@media (max-width: 760px) {
    :root {
        --topbar-height: 64px;
    }

    body {
        font-size: 14px;
    }

    .topbar {
        height: var(--topbar-height);
        padding: 0 12px;
    }

    .topbar-user-chip {
        display: none;
    }

    .container {
        padding: 18px 12px 32px;
    }

    .page-heading {
        align-items: flex-start;
        flex-direction: column;
        margin-bottom: 18px;
    }

    .page-title {
        font-size: 27px;
    }

    .panel {
        margin-bottom: 14px;
        padding: 15px;
        border-radius: 16px;
    }

    .panel h2 {
        font-size: 18px;
    }

    .grid {
        gap: 14px;
    }

    input[type="text"],
    input[type="password"],
    input[type="number"],
    input[type="date"],
    input[type="datetime-local"],
    input[type="time"],
    input[type="email"],
    input[type="tel"],
    input[type="url"],
    input[type="search"],
    input[type="file"],
    textarea,
    select {
        min-height: 46px;
        font-size: 16px;
    }

    button,
    .btn {
        min-height: 44px;
    }

    .actions {
        align-items: stretch;
    }

    .actions > .btn,
    .actions > button,
    .actions > form {
        flex: 1 1 100%;
    }

    .actions > form > button,
    .actions > form > .btn {
        width: 100%;
    }

    .warning-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        overflow: visible;
    }

    .warning-grid > :last-child:nth-child(odd) {
        grid-column: 1 / -1;
    }

    .dashboard-cards {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .quick-grid {
        grid-template-columns: 1fr;
    }

    .quick-card {
        min-height: 96px;
    }

    .desktop-table {
        display: none !important;
    }

    .mobile-card-list,
    .mobile-list {
        display: grid;
        gap: 10px;
    }

    .table-wrap:not(.desktop-table) {
        margin-right: -2px;
    }

    table {
        min-width: 650px;
    }

    th,
    td {
        padding: 9px 10px;
        font-size: 12px;
    }

    .modal-window {
        width: calc(100vw - 14px) !important;
        max-height: 94vh !important;
        padding: 16px !important;
        border-radius: 17px !important;
    }

    .modal-header {
        top: -16px;
        margin: -16px -16px 16px;
        padding: 14px 16px;
    }
}

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

    .dashboard-card,
    .warning-card {
        padding: 14px;
    }

    .page-title {
        font-size: 25px;
    }
}

/* Automatic form layout added by assets/app.js */
.form-layout {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr));
    gap: 0 14px;
    align-items: start;
}

.form-layout > input[type="hidden"] {
    display: none;
}

.form-layout > .form-field {
    min-width: 0;
}

.form-layout > .form-field.form-field-wide,
.form-layout > .actions,
.form-layout > p,
.form-layout > h2,
.form-layout > h3,
.form-layout > .muted,
.form-layout > .flash-success,
.form-layout > .flash-error,
.form-layout > .flash-info,
.form-layout > fieldset,
.form-layout > hr {
    grid-column: 1 / -1;
}

.form-layout > label:has(input[type="checkbox"]),
.form-layout > label:has(input[type="radio"]) {
    align-self: end;
    margin-bottom: 14px;
}

.form-layout > .actions {
    margin-top: 3px;
}

.table-wrap table.has-sticky-actions th:last-child,
.table-wrap table.has-sticky-actions td:last-child {
    position: sticky;
    right: 0;
    z-index: 3;
    box-shadow: -8px 0 18px rgba(15, 23, 42, .045);
}

.table-wrap table.has-sticky-actions th:last-child {
    z-index: 6;
    background: #f7f9fc;
}

.table-wrap table.has-sticky-actions td:last-child {
    background: var(--surface);
}

.table-wrap table.has-sticky-actions tbody tr:hover td:last-child {
    background: #fafbfd;
}

@media (max-width: 760px) {
    .form-layout {
        grid-template-columns: 1fr;
    }

    .table-wrap table.has-sticky-actions th:last-child,
    .table-wrap table.has-sticky-actions td:last-child {
        position: static;
        box-shadow: none;
    }
}

button[aria-busy="true"],
.btn[aria-busy="true"] {
    pointer-events: none;
    opacity: .72;
}

button[aria-busy="true"]::after,
.btn[aria-busy="true"]::after {
    content: "";
    width: 13px;
    height: 13px;
    border: 2px solid rgba(255,255,255,.45);
    border-top-color: currentColor;
    border-radius: 50%;
    animation: app-spin .7s linear infinite;
}

@keyframes app-spin {
    to { transform: rotate(360deg); }
}

/* ========================================================================== 
   Design refinement 2 – compact tables, richer controls and dashboard
   ========================================================================== */

:root {
    --table-pad-y: 8px;
    --table-pad-x: 10px;
    --table-font-size: 12.5px;
    --card-border: rgba(203, 213, 225, .74);
}

html[data-density="comfortable"] {
    --table-pad-y: 12px;
    --table-pad-x: 13px;
    --table-font-size: 13.5px;
}

.page-subtitle {
    max-width: 780px;
    margin: 8px 0 0;
    color: var(--muted);
    font-size: 13px;
    line-height: 1.45;
}

.topbar-action-button {
    appearance: none;
    width: 38px;
    height: 38px;
    min-height: 38px;
    padding: 0;
    border: 1px solid var(--line);
    border-radius: 11px;
    color: #536174;
    background: var(--surface);
    box-shadow: var(--shadow-xs);
    text-decoration: none;
}

.topbar-action-button svg {
    width: 18px;
    height: 18px;
    stroke: currentColor;
}

.topbar-action-button:hover,
.topbar-action-button.active {
    color: var(--brand);
    border-color: var(--brand-border);
    background: var(--brand-soft);
    box-shadow: var(--shadow-xs);
    transform: none;
}

.button-icon {
    flex: 0 0 auto;
    display: inline-grid;
    width: 16px;
    height: 16px;
    place-items: center;
}

.button-icon svg {
    width: 16px;
    height: 16px;
    stroke: currentColor;
}

.btn-secondary .button-icon,
button.btn-secondary .button-icon {
    color: var(--brand);
}

.panel-heading-standalone {
    position: relative;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--line);
}

.panel-heading-standalone::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -1px;
    width: 44px;
    height: 2px;
    border-radius: 999px;
    background: var(--brand);
}

.table-wrap {
    box-shadow: 0 1px 0 rgba(255, 255, 255, .6), var(--shadow-xs);
}

th,
td {
    padding: var(--table-pad-y) var(--table-pad-x);
    font-size: var(--table-font-size);
}

th {
    height: 38px;
    font-size: 10.5px;
    letter-spacing: .045em;
    text-transform: uppercase;
}

tbody tr:nth-child(even):not(.lot-detail-row) td {
    background: rgba(248, 250, 252, .64);
}

tbody tr:not(.lot-detail-row):hover td,
tbody tr:nth-child(even):not(.lot-detail-row):hover td {
    background: #f3f6fa;
}

.table-wrap td:first-child,
.table-wrap th:first-child {
    padding-left: calc(var(--table-pad-x) + 2px);
}

.table-wrap td:last-child,
.table-wrap th:last-child {
    padding-right: calc(var(--table-pad-x) + 2px);
}

.table-wrap td .actions {
    gap: 6px;
}

.table-wrap td .actions .btn,
.table-wrap td .actions button {
    min-height: 32px;
    padding: 6px 9px;
    border-radius: 8px;
    font-size: 10.5px;
}

html[data-density="comfortable"] .table-wrap td .actions .btn,
html[data-density="comfortable"] .table-wrap td .actions button {
    min-height: 36px;
    padding: 7px 10px;
    font-size: 11px;
}

.status-pill,
.movement-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 25px;
    padding: 4px 8px;
    border: 1px solid transparent;
    border-radius: 999px;
    font-size: 10.5px;
    font-weight: 800;
    line-height: 1;
    white-space: nowrap;
}

.status-pill::before,
.movement-badge::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
}

.status-pill.danger,
.movement-badge.out {
    color: var(--danger);
    border-color: #f0c0c7;
    background: var(--danger-soft);
}

.status-pill.warning,
.movement-badge.adjust {
    color: var(--warning);
    border-color: #efd69f;
    background: var(--warning-soft);
}

.status-pill.success,
.movement-badge.in {
    color: var(--success);
    border-color: #bde7cf;
    background: var(--success-soft);
}

.status-pill.info,
.movement-badge.transfer {
    color: var(--info);
    border-color: #bed9f5;
    background: var(--info-soft);
}

.empty-state {
    display: grid;
    min-height: 150px;
    padding: 24px;
    place-items: center;
    border: 1px dashed var(--line-strong);
    border-radius: 14px;
    color: var(--muted);
    background: linear-gradient(180deg, #fbfcfd, #f7f9fb);
    text-align: center;
}

.empty-state-icon {
    display: grid;
    width: 44px;
    height: 44px;
    margin: 0 auto 10px;
    place-items: center;
    border-radius: 13px;
    color: var(--success);
    background: var(--success-soft);
}

.empty-state-icon svg {
    width: 22px;
    height: 22px;
    stroke: currentColor;
}

.empty-state strong {
    display: block;
    margin-bottom: 4px;
    color: var(--text-strong);
    font-size: 14px;
}

.panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 14px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--line);
}

.panel-header h2,
.panel-header h3 {
    margin: 0;
}

.panel-title {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.panel-title-icon {
    display: grid;
    flex: 0 0 auto;
    width: 34px;
    height: 34px;
    place-items: center;
    border-radius: 10px;
    color: var(--brand);
    background: var(--brand-soft);
}

.panel-title-icon svg {
    width: 18px;
    height: 18px;
    stroke: currentColor;
}

.panel-link {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: var(--brand);
    font-size: 11px;
    font-weight: 780;
    text-decoration: none;
    white-space: nowrap;
}

.panel-link:hover {
    color: var(--brand-dark);
    text-decoration: underline;
}

/* Dashboard refinement */
.dashboard-hero {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 22px;
    align-items: center;
    overflow: hidden;
    margin-bottom: 18px;
    padding: 22px 24px;
    border: 1px solid #d8dee7;
    border-radius: 20px;
    color: #fff;
    background:
        radial-gradient(circle at 85% 20%, rgba(255,255,255,.16), transparent 13rem),
        linear-gradient(120deg, #172337 0%, #111a29 66%, #3a1018 130%);
    box-shadow: var(--shadow-md);
}

.dashboard-hero::after {
    content: "";
    position: absolute;
    right: -70px;
    bottom: -110px;
    width: 260px;
    height: 260px;
    border: 38px solid rgba(223, 16, 32, .24);
    border-radius: 50%;
}

.dashboard-hero-copy,
.dashboard-hero-status {
    position: relative;
    z-index: 1;
}

.dashboard-hero-kicker {
    margin-bottom: 5px;
    color: #ff9ca5;
    font-size: 10px;
    font-weight: 850;
    letter-spacing: .13em;
    text-transform: uppercase;
}

.dashboard-hero h2 {
    margin: 0;
    color: #fff;
    font-size: clamp(20px, 2vw, 29px);
    letter-spacing: -.035em;
}

.dashboard-hero p {
    max-width: 680px;
    margin: 7px 0 0;
    color: #c6d0de;
    font-size: 13px;
}

.dashboard-hero-status {
    display: flex;
    gap: 9px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.hero-status-chip {
    display: grid;
    min-width: 94px;
    padding: 11px 13px;
    border: 1px solid rgba(255,255,255,.13);
    border-radius: 13px;
    background: rgba(255,255,255,.075);
    backdrop-filter: blur(8px);
}

.hero-status-chip span {
    color: #b9c5d5;
    font-size: 9.5px;
    font-weight: 760;
    letter-spacing: .05em;
    text-transform: uppercase;
}

.hero-status-chip strong {
    margin-top: 2px;
    color: #fff;
    font-size: 13px;
}

.dashboard-section {
    margin-bottom: 18px;
}

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

.dashboard-section-head h2 {
    margin: 0;
    color: var(--text-strong);
    font-size: 17px;
    letter-spacing: -.02em;
}

.dashboard-section-head p {
    margin: 2px 0 0;
    color: var(--muted);
    font-size: 11.5px;
}

.alert-card-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 11px;
}

.alert-card {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
    padding: 14px;
    border: 1px solid var(--card-border);
    border-radius: 15px;
    color: inherit;
    background: var(--surface);
    box-shadow: var(--shadow-xs);
    text-decoration: none;
    transition: transform var(--transition), border-color var(--transition), box-shadow var(--transition);
}

.alert-card:hover {
    border-color: var(--brand-border);
    box-shadow: var(--shadow-sm);
    transform: translateY(-2px);
}

.alert-card-icon {
    display: grid;
    flex: 0 0 auto;
    width: 39px;
    height: 39px;
    place-items: center;
    border-radius: 12px;
    color: var(--danger);
    background: var(--danger-soft);
}

.alert-card.ok .alert-card-icon {
    color: var(--success);
    background: var(--success-soft);
}

.alert-card.warning .alert-card-icon {
    color: var(--warning);
    background: var(--warning-soft);
}

.alert-card.info .alert-card-icon {
    color: var(--info);
    background: var(--info-soft);
}

.alert-card-icon svg {
    width: 19px;
    height: 19px;
    stroke: currentColor;
}

.alert-card-content {
    min-width: 0;
}

.alert-card-label {
    overflow: hidden;
    color: var(--muted);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .045em;
    text-overflow: ellipsis;
    text-transform: uppercase;
    white-space: nowrap;
}

.alert-card-value {
    margin-top: 2px;
    color: var(--text-strong);
    font-size: 23px;
    font-weight: 870;
    letter-spacing: -.04em;
    line-height: 1;
}

.alert-card-caption {
    margin-top: 3px;
    overflow: hidden;
    color: var(--muted);
    font-size: 10px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.metric-card-grid {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 11px;
}

.metric-card {
    position: relative;
    overflow: hidden;
    min-width: 0;
    min-height: 105px;
    padding: 14px;
    border: 1px solid var(--card-border);
    border-radius: 15px;
    background: var(--surface);
    box-shadow: var(--shadow-xs);
}

.metric-card::after {
    content: "";
    position: absolute;
    top: -35px;
    right: -35px;
    width: 84px;
    height: 84px;
    border-radius: 50%;
    background: rgba(223, 16, 32, .045);
}

.metric-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.metric-card-icon {
    display: grid;
    width: 31px;
    height: 31px;
    place-items: center;
    border-radius: 9px;
    color: var(--brand);
    background: var(--brand-soft);
}

.metric-card-icon svg {
    width: 16px;
    height: 16px;
    stroke: currentColor;
}

.metric-card-label {
    color: var(--muted);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .045em;
    text-transform: uppercase;
}

.metric-card-value {
    position: relative;
    z-index: 1;
    margin-top: 12px;
    color: var(--text-strong);
    font-size: 26px;
    font-weight: 870;
    letter-spacing: -.045em;
    line-height: 1;
}

.quick-action-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 11px;
}

.quick-action-card {
    position: relative;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 12px;
    align-items: center;
    min-height: 82px;
    padding: 14px;
    border: 1px solid var(--card-border);
    border-radius: 15px;
    color: inherit;
    background: var(--surface);
    box-shadow: var(--shadow-xs);
    text-decoration: none;
    transition: transform var(--transition), border-color var(--transition), box-shadow var(--transition);
}

.quick-action-card:hover {
    color: inherit;
    border-color: var(--brand-border);
    box-shadow: var(--shadow-sm);
    transform: translateY(-2px);
}

.quick-action-icon {
    display: grid;
    width: 42px;
    height: 42px;
    place-items: center;
    border-radius: 13px;
    color: #fff;
    background: linear-gradient(145deg, #ec2232, var(--brand-dark));
    box-shadow: 0 7px 16px rgba(223,16,32,.2);
}

.quick-action-icon svg {
    width: 20px;
    height: 20px;
    stroke: currentColor;
}

.quick-action-copy {
    min-width: 0;
}

.quick-action-title {
    color: var(--text-strong);
    font-size: 13px;
    font-weight: 820;
}

.quick-action-description {
    margin-top: 2px;
    color: var(--muted);
    font-size: 10.5px;
    line-height: 1.35;
}

.quick-action-arrow {
    color: #96a1b1;
    font-size: 20px;
    transition: color var(--transition), transform var(--transition);
}

.quick-action-card:hover .quick-action-arrow {
    color: var(--brand);
    transform: translateX(2px);
}

.dashboard-content-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 18px;
}

.dashboard-content-grid .panel {
    margin-bottom: 0;
}

.scroll-top {
    position: fixed;
    right: 22px;
    bottom: 22px;
    z-index: 850;
    width: 42px;
    height: 42px;
    min-height: 42px;
    padding: 0;
    visibility: hidden;
    opacity: 0;
    border-radius: 13px;
    transform: translateY(8px);
    transition: opacity var(--transition), visibility var(--transition), transform var(--transition);
}

.scroll-top.show {
    visibility: visible;
    opacity: 1;
    transform: translateY(0);
}

.scroll-top svg {
    width: 18px;
    height: 18px;
    stroke: currentColor;
}

@media (max-width: 1320px) {
    .alert-card-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

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

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

    .dashboard-hero-status {
        justify-content: flex-start;
    }

    .dashboard-content-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 760px) {
    .topbar-action-button {
        width: 36px;
        height: 36px;
        min-height: 36px;
    }

    .page-subtitle {
        font-size: 12px;
    }

    .dashboard-hero {
        padding: 18px;
        border-radius: 17px;
    }

    .dashboard-hero-status {
        display: grid;
        grid-template-columns: 1fr 1fr;
        width: 100%;
    }

    .alert-card-grid,
    .metric-card-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .alert-card {
        align-items: flex-start;
        padding: 12px;
    }

    .alert-card-icon {
        width: 34px;
        height: 34px;
    }

    .metric-card {
        min-height: 96px;
        padding: 12px;
    }

    .quick-action-grid {
        grid-template-columns: 1fr;
    }

    .panel-header {
        align-items: flex-start;
    }

    .panel-link {
        padding-top: 6px;
    }

    .scroll-top {
        right: 13px;
        bottom: 13px;
    }
}

@media (max-width: 430px) {
    .alert-card-grid {
        grid-template-columns: 1fr 1fr;
    }

    .alert-card:last-child:nth-child(odd) {
        grid-column: 1 / -1;
    }

    .metric-card-grid {
        grid-template-columns: 1fr 1fr;
    }

    .dashboard-hero-status {
        grid-template-columns: 1fr;
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
}

/* Chargenentsorgung */
details > summary.btn {
    list-style: none;
}
details > summary.btn::-webkit-details-marker {
    display: none;
}
details[open] > summary.btn {
    margin-bottom: .65rem;
}

/* V4 system modules */
.notification-button{position:relative}.notification-badge{position:absolute;top:-5px;right:-5px;min-width:18px;height:18px;padding:0 4px;border-radius:999px;background:#c8102e;color:#fff;font-size:10px;font-weight:800;display:grid;place-items:center;border:2px solid var(--surface,#fff)}
.row-emphasis td{background:rgba(200,16,46,.055)!important}.info-box{padding:16px;border-radius:14px;background:linear-gradient(135deg,rgba(19,29,45,.055),rgba(200,16,46,.045));border:1px solid rgba(19,29,45,.1)}.info-box p{margin:.35rem 0 1rem}.code-block{white-space:pre-wrap;word-break:break-word;background:#121a28;color:#edf2f7;padding:14px;border-radius:12px;overflow:auto;font:12px/1.55 ui-monospace,SFMono-Regular,Consolas,monospace}.form-span{grid-column:1/-1}.align-end{align-self:end}.empty-state.compact{min-height:100px}.status-pill.info{background:rgba(44,116,179,.12);color:#205d91}.status-pill.warning{background:rgba(217,139,0,.14);color:#8f5b00}.status-pill.danger{background:rgba(200,16,46,.12);color:#a40d27}.status-pill.success{background:rgba(26,127,74,.13);color:#146b3b}.panel hr{border:0;border-top:1px solid rgba(19,29,45,.1);margin:22px 0}.form-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:14px;align-items:start}.form-grid>div{min-width:0}.form-grid .actions{margin-top:0}
@media(max-width:720px){.form-grid{grid-template-columns:1fr}.notification-badge{top:-3px;right:-3px}}

/* V5 usability expansion */
.select-column{width:42px;min-width:42px;text-align:center}.select-column input{width:18px;height:18px;margin:0}
.stock-state-cell{min-width:130px;border-left:4px solid transparent}.stock-state-cell strong{display:block;font-size:1rem}.stock-state-label{display:inline-flex;margin-top:4px;padding:3px 8px;border-radius:999px;font-size:.72rem;font-weight:800;white-space:nowrap}
.stock-state-empty{border-left-color:#7a8492;background:rgba(122,132,146,.07)!important}.stock-state-empty .stock-state-label{background:rgba(122,132,146,.15);color:#525b67}
.stock-state-critical{border-left-color:#c8102e;background:rgba(200,16,46,.06)!important}.stock-state-critical .stock-state-label{background:rgba(200,16,46,.13);color:#a40d27}
.stock-state-warning{border-left-color:#d98b00;background:rgba(217,139,0,.06)!important}.stock-state-warning .stock-state-label{background:rgba(217,139,0,.14);color:#8f5b00}
.stock-state-target{border-left-color:#2879bf;background:rgba(40,121,191,.06)!important}.stock-state-target .stock-state-label{background:rgba(40,121,191,.13);color:#205d91}
.stock-state-ok{border-left-color:#1a7f4a;background:rgba(26,127,74,.05)!important}.stock-state-ok .stock-state-label{background:rgba(26,127,74,.13);color:#146b3b}

.mass-edit-panel{border:1px solid rgba(19,29,45,.12);border-radius:14px;background:rgba(19,29,45,.025);overflow:hidden}.mass-edit-panel>summary{cursor:pointer;padding:13px 16px;font-weight:800;list-style:none}.mass-edit-panel>summary::-webkit-details-marker{display:none}.mass-edit-panel[open]>summary{border-bottom:1px solid rgba(19,29,45,.09)}.mass-edit-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:14px;padding:16px;align-items:end}.mass-fields[hidden]{display:none!important}.mass-limit-fields,.mass-flag-fields{grid-column:1/-1;display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:12px}.mass-edit-submit{grid-column:1/-1;display:flex;align-items:center;gap:12px;flex-wrap:wrap}.duplicate-warning-panel{border-color:rgba(217,139,0,.35);background:linear-gradient(135deg,rgba(217,139,0,.07),rgba(255,255,255,.96))}.duplicate-confirm{margin-top:12px;padding:12px;border-radius:12px;background:rgba(217,139,0,.1);font-weight:700}.movement-detail-row td,.lot-detail-row td{background:rgba(19,29,45,.025)!important}.movement-detail-row .table-wrap{margin-top:12px}

.detail-hero{display:flex;justify-content:space-between;align-items:flex-start;gap:20px}.detail-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}.detail-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 18px;margin:16px 0}.detail-list>div{padding:10px 0;border-bottom:1px solid rgba(19,29,45,.08)}.detail-list dt{font-size:.75rem;text-transform:uppercase;letter-spacing:.06em;color:var(--muted,#697386);font-weight:800}.detail-list dd{margin:4px 0 0;font-weight:650;word-break:break-word}.feature-chip-grid{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0}.feature-chip{display:inline-flex;align-items:center;padding:7px 10px;border-radius:999px;background:rgba(122,132,146,.1);color:#697386;font-weight:700;font-size:.82rem}.feature-chip.active{background:rgba(26,127,74,.12);color:#146b3b}.duplicate-candidate{display:flex;justify-content:space-between;gap:14px;align-items:flex-start;padding:10px 0;border-bottom:1px solid rgba(19,29,45,.08)}.warning-panel{border-color:rgba(217,139,0,.3);background:rgba(217,139,0,.055)}.warning-panel ul{margin:.8rem 0 0;padding-left:1.25rem}.filter-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:12px;align-items:end;margin:14px 0}.filter-actions{display:flex;gap:8px;align-items:end;flex-wrap:wrap}

.inline-action-details{position:relative}.inline-action-details>summary{list-style:none;cursor:pointer}.inline-action-details>summary::-webkit-details-marker{display:none}.inline-confirm-form{margin-top:10px;padding:12px;min-width:280px;max-width:420px;border:1px solid rgba(200,16,46,.2);border-radius:12px;background:#fff;box-shadow:0 12px 28px rgba(19,29,45,.14);display:grid;gap:10px}.inline-confirm-form label{margin:0}.inline-confirm-form input{width:100%}

.chargen-filter-grid{display:grid;grid-template-columns:2fr repeat(4,minmax(135px,1fr)) auto;gap:12px;align-items:end;margin:16px 0}.chargen-row-actions{align-items:center}.chargen-row-actions .btn{white-space:nowrap}.chargen-actions-cell{min-width:390px}.chargen-overview-table .col-actions{width:430px}

.status-pill.target{background:rgba(40,121,191,.13);color:#205d91}.status-pill.empty{background:rgba(122,132,146,.15);color:#525b67}.status-pill.critical{background:rgba(200,16,46,.13);color:#a40d27}

@media(max-width:1100px){.chargen-filter-grid{grid-template-columns:repeat(3,minmax(160px,1fr))}.chargen-actions-cell{min-width:330px}.detail-grid{grid-template-columns:1fr}}
@media(max-width:720px){.detail-hero{flex-direction:column}.detail-list{grid-template-columns:1fr}.chargen-filter-grid{grid-template-columns:1fr}.mass-edit-grid{grid-template-columns:1fr}.mass-limit-fields,.mass-flag-fields{grid-template-columns:1fr}.inline-confirm-form{min-width:0;width:min(88vw,380px)}.select-column{position:sticky;left:0;z-index:2;background:var(--surface,#fff)}}

/* ========================================================================== 
   V6 – Stabilität, persönliche Ansichten, Schnellsuche und Mobilkarten
   ========================================================================== */
.environment-banner {
    position: sticky;
    top: 0;
    z-index: 2000;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: .8rem;
    min-height: 34px;
    padding: .35rem 1rem;
    background: repeating-linear-gradient(135deg, #f59e0b 0, #f59e0b 14px, #fbbf24 14px, #fbbf24 28px);
    color: #2b1a00;
    border-bottom: 1px solid rgba(0,0,0,.18);
    font-size: .82rem;
    letter-spacing: .02em;
}
.environment-banner strong { font-weight: 900; }

.quick-search { position: relative; width: min(360px, 32vw); }
.quick-search-form {
    position: relative;
    display: flex;
    align-items: center;
    gap: .5rem;
    background: var(--surface, #fff);
    border: 1px solid var(--border, #d7dde7);
    border-radius: 12px;
    padding: 0 .65rem;
    min-height: 42px;
    box-shadow: 0 4px 12px rgba(15,23,42,.05);
}
.quick-search-form input {
    width: 100%;
    min-width: 0;
    border: 0 !important;
    outline: 0;
    background: transparent !important;
    padding: .55rem .15rem !important;
    box-shadow: none !important;
}
.quick-search-form kbd {
    white-space: nowrap;
    padding: .15rem .38rem;
    border: 1px solid var(--border, #d7dde7);
    border-radius: 6px;
    background: #f8fafc;
    color: #64748b;
    font-size: .68rem;
}
.quick-search-icon { display: inline-flex; width: 18px; color: #64748b; }
.quick-search-icon svg { width: 18px; height: 18px; stroke: currentColor; }
.quick-search-results {
    position: absolute;
    right: 0;
    top: calc(100% + 8px);
    width: min(580px, 92vw);
    max-height: 70vh;
    overflow: auto;
    background: #fff;
    border: 1px solid var(--border, #d7dde7);
    border-radius: 16px;
    box-shadow: 0 22px 55px rgba(15,23,42,.22);
    padding: .45rem;
    z-index: 1800;
}
.quick-search-item { padding: .6rem; border-radius: 12px; }
.quick-search-item + .quick-search-item { border-top: 1px solid #eef2f7; }
.quick-search-item:hover { background: #f8fafc; }
.quick-search-main { display: grid; gap: .18rem; text-decoration: none; color: inherit; }
.quick-search-main span { font-size: .78rem; color: #64748b; }
.quick-search-actions { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .45rem; }
.quick-search-actions a, .quick-search-all {
    font-size: .75rem;
    text-decoration: none;
    color: var(--primary, #c8102e);
    font-weight: 700;
}
.quick-search-all { display:block; padding:.75rem; text-align:center; border-top:1px solid #e5e7eb; }
.quick-search-empty { padding: 1rem; color: #64748b; text-align:center; }

.table-view-toolbar {
    display: flex;
    justify-content: flex-end;
    position: relative;
    margin: 0 0 .45rem;
}
.btn-small { min-height: 34px !important; padding: .35rem .65rem !important; font-size: .78rem !important; }
.table-view-panel {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    width: min(380px, 92vw);
    max-height: 70vh;
    overflow: auto;
    background: #fff;
    border: 1px solid var(--border, #d7dde7);
    border-radius: 14px;
    box-shadow: 0 18px 45px rgba(15,23,42,.18);
    padding: .8rem;
    z-index: 1200;
}
.table-view-panel-head { display:flex; justify-content:space-between; align-items:center; gap:.8rem; }
.icon-close { border:0; background:transparent; font-size:1.4rem; cursor:pointer; color:#64748b; }
.table-column-list { display:grid; gap:.25rem; margin:.65rem 0; }
.table-column-option { display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:.55rem; padding:.42rem .35rem; border-radius:8px; }
.table-column-option:hover { background:#f8fafc; }
.table-column-controls { display:flex; gap:.2rem; }
.table-column-controls button { width:28px; height:28px; padding:0; border:1px solid #d7dde7; background:#fff; border-radius:7px; cursor:pointer; }
.user-hidden-column { display:none !important; }

.selftest-list { display:grid; gap:.55rem; }
.selftest-result { display:flex; justify-content:space-between; gap:1rem; align-items:center; padding:.75rem .85rem; border:1px solid #e5e7eb; border-left-width:4px; border-radius:12px; background:#fff; }
.selftest-result.success { border-left-color:#16a34a; }
.selftest-result.warning { border-left-color:#f59e0b; }
.selftest-result.error { border-left-color:#dc2626; }
.restore-details summary { list-style:none; cursor:pointer; display:inline-flex; }
.restore-details summary::-webkit-details-marker { display:none; }
.danger-zone { margin-top:.65rem; padding:.8rem; border:1px solid #fecaca; border-radius:12px; background:#fff7f7; min-width:min(420px,80vw); }
.process-list { display:grid; gap:.45rem; padding-left:1.25rem; }

.stock-term-help {
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
    gap:.65rem;
}
.stock-term-help article { padding:.75rem; border:1px solid #e5e7eb; border-radius:12px; background:#f8fafc; }

@media (max-width: 980px) {
    .quick-search { width: min(300px, 42vw); }
    .quick-search-form kbd { display:none; }
}

@media (max-width: 760px) {
    .quick-search { width: 46px; }
    .quick-search-form { width:46px; padding:0; justify-content:center; box-shadow:none; background:transparent; border:0; }
    .quick-search-form input { position:absolute; opacity:0; pointer-events:none; width:1px; }
    .quick-search:focus-within { position:fixed; inset:8px 8px auto 8px; width:auto; z-index:2100; }
    .quick-search:focus-within .quick-search-form { width:100%; padding:0 .65rem; background:#fff; border:1px solid #d7dde7; box-shadow:0 8px 24px rgba(15,23,42,.2); }
    .quick-search:focus-within .quick-search-form input { position:static; opacity:1; pointer-events:auto; width:100%; }
    .quick-search-results { position:fixed; left:8px; right:8px; top:58px; width:auto; max-height:calc(100vh - 75px); }
    .environment-banner { flex-wrap:wrap; gap:.25rem .6rem; font-size:.72rem; }

    .table-wrap:has(> table.mobile-card-table) { overflow:visible; border:0; background:transparent; }
    table.mobile-card-table { display:block; width:100%; min-width:0 !important; border-collapse:separate; }
    table.mobile-card-table > thead { display:none; }
    table.mobile-card-table > tbody { display:grid; gap:.75rem; }
    table.mobile-card-table > tbody > tr:not(.lot-detail-row) {
        display:block;
        background:#fff;
        border:1px solid #e2e8f0;
        border-radius:14px;
        padding:.35rem .75rem;
        box-shadow:0 5px 16px rgba(15,23,42,.05);
    }
    table.mobile-card-table > tbody > tr:not(.lot-detail-row) > td {
        display:grid;
        grid-template-columns:minmax(105px, 38%) 1fr;
        gap:.6rem;
        align-items:start;
        width:auto !important;
        min-width:0 !important;
        padding:.52rem 0 !important;
        border:0 !important;
        border-bottom:1px solid #eef2f7 !important;
        position:static !important;
        background:transparent !important;
        box-shadow:none !important;
        text-align:left !important;
        white-space:normal !important;
    }
    table.mobile-card-table > tbody > tr:not(.lot-detail-row) > td:last-child { border-bottom:0 !important; }
    table.mobile-card-table > tbody > tr:not(.lot-detail-row) > td::before {
        content:attr(data-label);
        font-size:.72rem;
        text-transform:uppercase;
        letter-spacing:.04em;
        color:#64748b;
        font-weight:800;
    }
    table.mobile-card-table > tbody > tr.lot-detail-row { display:block; }
    table.mobile-card-table > tbody > tr.lot-detail-row > td { display:block; width:100%; }
    table.mobile-card-table .actions { justify-content:flex-start; }
    .table-view-panel { position:fixed; left:8px; right:8px; top:70px; width:auto; max-height:calc(100vh - 90px); }
    .selftest-result { align-items:flex-start; }
}

.notification-group-grid {
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
    gap:.75rem;
}
.notification-group-card {
    display:grid;
    grid-template-columns:auto 1fr;
    gap:.2rem .75rem;
    align-items:center;
    padding:.85rem;
    border:1px solid #e2e8f0;
    border-left-width:4px;
    border-radius:14px;
    background:#fff;
    color:inherit;
    text-decoration:none;
}
.notification-group-card.danger { border-left-color:#dc2626; }
.notification-group-card.warning { border-left-color:#f59e0b; }
.notification-group-card.info { border-left-color:#2563eb; }
.notification-group-count {
    grid-row:1 / span 2;
    display:grid;
    place-items:center;
    min-width:44px;
    height:44px;
    border-radius:12px;
    background:#f1f5f9;
    font-size:1.1rem;
    font-weight:900;
}
.notification-group-card span:last-child { font-size:.76rem; color:#64748b; }
.import-summary-grid {
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(130px,1fr));
    gap:.6rem;
    margin-bottom:1rem;
}
.import-summary-grid article {
    display:flex;
    flex-direction:column;
    gap:.15rem;
    padding:.75rem;
    border:1px solid #e2e8f0;
    border-radius:12px;
    background:#fff;
}
.import-summary-grid article strong { font-size:1.35rem; }
.import-summary-grid article span { font-size:.75rem; color:#64748b; }
.import-summary-grid article.success { border-left:4px solid #16a34a; }
.import-summary-grid article.info { border-left:4px solid #2563eb; }
.import-summary-grid article.warning { border-left:4px solid #f59e0b; }
.import-summary-grid article.danger { border-left:4px solid #dc2626; }
.import-row-error td { background:#fff5f5 !important; }
.import-row-warning td { background:#fffbeb !important; }
.validation-message { margin:.2rem 0; padding:.35rem .45rem; border-radius:7px; font-size:.76rem; }
.validation-message.error { background:#fee2e2; color:#991b1b; }
.validation-message.warning { background:#fef3c7; color:#92400e; }
.compact-list { margin:0; padding-left:1rem; display:grid; gap:.15rem; }
.stock-term-explainer { margin:.4rem 0 .9rem; }
.stock-term-explainer summary { cursor:pointer; color:#475569; font-weight:700; }