:root {
  --brand-blue: #2f5cab;
  --brand-blue-dark: #234a91;
  --brand-blue-soft: #eaf0fb;
  --brand-red: #e20e17;
  --brand-red-dark: #b9060e;
  --ink: #202020;
  --text: #45484d;
  --muted: #737981;
  --line: #dfe3e8;
  --canvas: #f5f6f8;
  --surface: #ffffff;
  --success: #16805a;
  --warning: #a96800;
  --danger: #b52d34;
  --shadow: 0 18px 45px rgba(28, 50, 88, 0.10);
  --shadow-soft: 0 10px 30px rgba(28, 50, 88, 0.08);
  --radius: 10px;
  --radius-small: 6px;
  font-family: Arial, Helvetica, sans-serif;
  color: var(--ink);
  background: var(--canvas);
  font-synthesis: none;
}

* { box-sizing: border-box; }
html { min-height: 100%; background: var(--canvas); }
body {
  margin: 0;
  min-height: 100vh;
  background: linear-gradient(180deg, #edf2f9 0, var(--canvas) 300px, var(--canvas) 100%);
}
button, input, select, textarea { font: inherit; }
button { cursor: pointer; }
.hidden { display: none !important; }
.visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.app-shell { min-height: 100vh; }
.topbar {
  position: sticky;
  z-index: 100;
  top: 0;
  min-height: 88px;
  padding: 10px clamp(22px, 4vw, 62px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #fff;
  border-bottom: 3px solid var(--brand-blue);
  color: var(--ink);
  box-shadow: 0 6px 20px rgba(26, 52, 91, 0.07);
}
.brand { display: flex; align-items: center; gap: 22px; min-width: 0; }
.brand-logo { width: clamp(180px, 16vw, 232px); height: auto; display: block; }
.brand-divider { width: 1px; height: 42px; background: var(--line); }
.app-name small, .app-name strong { display: block; }
.app-name small { color: var(--brand-red); font-size: 10px; font-weight: 800; letter-spacing: .14em; }
.app-name strong { margin-top: 6px; color: var(--ink); font-size: 18px; font-weight: 800; }
.topbar-actions { display: flex; align-items: center; gap: 12px; }
.connection-pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 11px;
  border: 1px solid var(--line);
  color: #5f6670;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
}
.connection-pill span { width: 7px; height: 7px; border-radius: 50%; background: #1aa36e; }
.connection-pill.offline span { background: var(--brand-red); }
.icon-button {
  border: 1px solid var(--brand-red);
  background: #fff;
  color: var(--brand-red);
  padding: 9px 14px;
  font-weight: 800;
  font-size: 12px;
  text-transform: uppercase;
}
.account-button {
  border: 1px solid var(--brand-blue);
  background: #fff;
  color: var(--brand-blue);
  padding: 9px 14px;
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
}
.account-button:hover { background: var(--brand-blue-soft); }

.login-view {
  min-height: calc(100vh - 106px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 48px 22px;
  background: var(--canvas);
}
.login-panel {
  width: min(430px, 100%);
  padding: 38px 36px 30px;
  border-top: 4px solid var(--brand-blue);
  background: #fff;
  box-shadow: var(--shadow);
}
.eyebrow {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--brand-blue);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.eyebrow span { color: var(--brand-red); }
.login-panel h1 {
  margin: 24px 0 24px;
  color: var(--ink);
  font-size: clamp(46px, 6vw, 74px);
  line-height: .98;
  font-weight: 800;
  letter-spacing: -3.6px;
}
.login-panel h1 span { color: var(--brand-blue); }
.login-panel > p {
  max-width: 560px;
  margin-bottom: 0;
  padding-left: 22px;
  border-left: 2px solid #d5deea;
  color: #555a60;
  font-size: 18px;
  line-height: 1.65;
}
.stack { display: grid; gap: 7px; width: 100%; margin: 0; }
.remember-option { display: flex; align-items: center; gap: 9px; margin: 8px 0 6px; color: var(--text); font-size: 12px; font-weight: 600; letter-spacing: 0; text-transform: none; cursor: pointer; }
.remember-option input { width: 17px; min-height: 17px; margin: 0; accent-color: var(--brand-blue); }
label {
  margin-top: 10px;
  color: #444a51;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
}
input, select, textarea {
  width: 100%;
  border: 1px solid #c9ced5;
  border-radius: var(--radius-small);
  background: #fff;
  padding: 14px 15px;
  color: var(--ink);
  outline: none;
}
input:focus, select:focus, textarea:focus {
  border-color: var(--brand-blue);
  box-shadow: inset 4px 0 0 var(--brand-blue);
}
select:disabled {
  border-color: #d9dde3;
  background: #f4f6f8;
  color: #929aa5;
  cursor: not-allowed;
}
.password-input { position: relative; }
.password-input input { padding-right: 84px; }
.password-input button {
  position: absolute;
  top: 1px;
  right: 1px;
  bottom: 1px;
  min-width: 72px;
  border: 0;
  border-left: 1px solid var(--line);
  background: #fff;
  color: var(--brand-blue);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.password-input button:hover { background: var(--brand-blue-soft); }
.password-input button:focus-visible {
  outline: 2px solid var(--brand-blue);
  outline-offset: -3px;
}
.password-strength {
  overflow: hidden;
  height: 6px;
  margin-top: 7px;
  background: #e6e9ed;
}
.password-strength span {
  display: block;
  width: 0;
  height: 100%;
  transition: width .2s ease, background-color .2s ease;
}
.password-strength span.weak { background: var(--brand-red); }
.password-strength span.medium { background: var(--warning); }
.password-strength span.strong { background: var(--success); }
.password-strength-text {
  min-height: 18px;
  margin: 6px 0 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.4;
}
.password-generator-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; }
.password-generator-row .secondary-button { min-width: 116px; }
.temporary-password-help { margin: 7px 0 0; padding: 9px 11px; border-left: 3px solid var(--warning); background: #fff8e8; color: var(--text); font-size: 11px; line-height: 1.45; }
.temporary-password-section { margin-top: 4px; }
.recovery-code-result {
  margin-top: 18px;
  padding: 16px;
  border: 1px solid #d6c17a;
  border-left: 5px solid var(--warning);
  background: #fffaf0;
}
.recovery-code-result > span {
  display: block;
  margin-bottom: 8px;
  color: var(--ink);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .07em;
  text-transform: uppercase;
}
.recovery-code-value {
  font-family: Consolas, "Courier New", monospace;
  font-weight: 800;
  letter-spacing: .045em;
  text-transform: uppercase;
}
.recovery-code-result .recovery-code-value {
  border-color: #d6c17a;
  background: #fff;
  color: var(--ink);
  font-size: 16px;
  text-align: center;
}
.recovery-code-result .recovery-link-value {
  min-height: 78px;
  resize: none;
  font-size: 12px;
  line-height: 1.45;
  letter-spacing: 0;
  text-align: left;
  text-transform: none;
  overflow-wrap: anywhere;
}
.recovery-code-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 9px; }
.recovery-code-result p { margin: 10px 0 0; color: var(--text); font-size: 12px; line-height: 1.45; }
.recovery-dialog form { max-height: calc(100vh - 28px); overflow-y: auto; }
.primary-button, .secondary-button {
  min-height: 48px;
  border-radius: var(--radius-small);
  padding: 13px 20px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .055em;
  text-transform: uppercase;
}
.primary-button {
  border: 1px solid var(--brand-blue);
  background: var(--brand-blue);
  color: #fff;
}
.primary-button:hover { border-color: var(--brand-blue-dark); background: var(--brand-blue-dark); }
.primary-button:disabled, .secondary-button:disabled, .danger-button:disabled { opacity: .58; cursor: wait; }
.secondary-button {
  border: 1px solid var(--brand-red);
  background: #fff;
  color: var(--brand-red);
}
.secondary-button:hover { background: #fff6f6; color: var(--brand-red-dark); }
.stack .primary-button { margin-top: 16px; }
.form-error { min-height: 22px; margin: 7px 0 0; color: var(--danger); font-size: 13px; }

.recovery-page {
  background: linear-gradient(145deg, #eef2f8 0%, var(--canvas) 48%, #edf1f7 100%);
}
.recovery-page-main {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 28px 18px;
}
.recovery-page-panel { width: min(500px, 100%); padding-top: 28px; }
.recovery-page-logo { display: block; width: min(230px, 72%); height: auto; margin: 0 auto 28px; }
.recovery-page-panel h1 {
  margin: 10px 0 12px;
  font-size: clamp(29px, 7vw, 42px);
  line-height: 1.05;
  letter-spacing: -1.6px;
}
.recovery-page-help,
.recovery-state p {
  margin: 0 0 18px;
  color: var(--text);
  font-size: 14px;
  line-height: 1.55;
}
.recovery-state { text-align: center; }
.recovery-state .eyebrow { justify-content: center; }
.recovery-state p { margin-top: 18px; }
.recovery-success-icon {
  display: grid;
  width: 52px;
  height: 52px;
  margin: 0 auto 18px;
  place-items: center;
  border-radius: 50%;
  background: var(--success);
  color: #fff;
  font-size: 28px;
  font-weight: 800;
}
.recovery-login-link {
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}

.login-aside {
  position: relative;
  overflow: hidden;
  min-height: 620px;
  clip-path: polygon(18% 0, 100% 0, 100% 100%, 0 100%);
  background: var(--brand-blue);
}
.login-photo {
  position: absolute;
  inset: 0;
  background: url("assets/realizacja-1.jpeg") 57% center / cover no-repeat;
  filter: saturate(.78) contrast(1.04);
}
.photo-overlay {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(22, 53, 107, .12), rgba(14, 38, 82, .72)),
    linear-gradient(125deg, rgba(47, 92, 171, .28), transparent 55%);
}
.photo-caption {
  position: absolute;
  z-index: 2;
  left: 19%;
  right: 9%;
  bottom: 92px;
  color: #fff;
}
.photo-caption span {
  display: block;
  margin-bottom: 10px;
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .14em;
}
.photo-caption strong {
  display: block;
  max-width: 480px;
  font-size: clamp(26px, 3vw, 42px);
  line-height: 1.05;
}
.photo-index {
  position: absolute;
  z-index: 2;
  right: 8%;
  bottom: 28px;
  display: flex;
  align-items: baseline;
  gap: 8px;
  color: #fff;
}
.photo-index strong { font-size: 25px; }
.photo-index span { font-size: 11px; font-weight: 800; letter-spacing: .1em; }

.dashboard {
  width: min(1450px, calc(100% - 48px));
  margin: 0 auto;
  padding: 34px 0 76px;
}
.dashboard-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 22px;
  padding: 25px 28px;
  border: 1px solid #dbe3ef;
  border-left: 5px solid var(--brand-blue);
  border-radius: var(--radius);
  background: linear-gradient(115deg, #fff 0%, #f6f9ff 72%, #edf3fc 100%);
  box-shadow: var(--shadow-soft);
}
.dashboard-kicker { color: var(--brand-blue); font-size: 10px; font-weight: 800; letter-spacing: .13em; }
.dashboard-heading h1 {
  margin: 8px 0 6px;
  color: var(--ink);
  font-size: clamp(30px, 4vw, 44px);
  line-height: 1;
  font-weight: 800;
  letter-spacing: -2px;
}
.dashboard-heading p, .section-heading p { color: var(--muted); margin: 0; }
.heading-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px; }
.compact { min-height: 46px; white-space: nowrap; }
.dashboard-tabs {
  display: flex;
  gap: 5px;
  margin-bottom: 28px;
  padding: 5px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, .9);
  box-shadow: var(--shadow-soft);
}
.dashboard-tab {
  min-width: 138px;
  border: 0;
  border-bottom: 0;
  border-radius: var(--radius-small);
  background: transparent;
  padding: 13px 20px 11px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .055em;
  text-transform: uppercase;
}
.dashboard-tab:hover { color: var(--brand-blue); }
.dashboard-tab.active {
  background: var(--brand-blue);
  color: #fff;
  box-shadow: 0 6px 16px rgba(35, 74, 145, .2);
}
.tab-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 19px;
  height: 19px;
  margin-left: 5px;
  padding: 0 5px;
  border-radius: 10px;
  background: var(--brand-red);
  color: #fff;
  font-size: 10px;
  line-height: 1;
}
.dashboard-tab:focus-visible {
  outline: 2px solid var(--brand-blue);
  outline-offset: -2px;
}
.dashboard-panel { min-height: 260px; }
.settings-heading { align-items: flex-start; }
.settings-heading p { margin-top: 8px; }
.settings-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}
.settings-card {
  display: flex;
  min-height: 220px;
  flex-direction: column;
  padding: 24px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fff;
  box-shadow: var(--shadow-soft);
}
.settings-label {
  color: var(--brand-blue);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .12em;
}
.settings-card h3 {
  margin: 13px 0 7px;
  color: var(--ink);
  font-size: 20px;
}
.settings-card p {
  margin: 0 0 22px;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.55;
}
.settings-card .secondary-button { width: 100%; margin-top: auto; }
.settings-card-wide { grid-column: 1 / -1; min-height: 190px; }
.settings-card-system { min-height: 205px; border-left: 5px solid var(--brand-blue); background: linear-gradient(120deg, #fff 0%, #f5f8ff 100%); }
.excel-integration-dialog { width: min(720px, calc(100vw - 32px)); }
.excel-integration-dialog .excel-integration-scroll { max-height: calc(100dvh - 32px); }
.excel-integration-dialog form.excel-setup-section { padding: 18px; }
.excel-integration-status {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: 14px;
  margin-bottom: 20px;
  padding: 16px;
  border-left: 5px solid var(--brand-blue);
  background: var(--brand-blue-soft);
}
.excel-integration-status strong { display: block; color: var(--ink); font-size: 15px; }
.excel-integration-status p { margin: 5px 0 0; color: var(--muted); font-size: 13px; line-height: 1.45; }
.excel-status-badge { min-width: 76px; padding: 6px 8px; background: #dce5f7; color: var(--brand-blue); font-size: 9px; font-weight: 900; letter-spacing: .08em; text-align: center; }
.excel-status-badge.connected { background: #e8f5e2; color: #397126; }
.excel-status-badge.warning { background: #fff1d8; color: #8a5800; }
.excel-status-badge.error { background: #ffe5e7; color: var(--brand-red); }
.excel-setup-section { margin-top: 14px; padding: 18px; border: 1px solid var(--line); background: #fff; }
.excel-setup-section .dictionary-heading h3 { margin-bottom: 0; }
.excel-setup-section > p { margin: 10px 0 15px; color: var(--muted); font-size: 13px; line-height: 1.5; }
.excel-setup-section > .secondary-button, .excel-setup-section > .primary-button { width: 100%; }
.excel-setup-section > label { display: block; margin: 14px 0 7px; }
.excel-setup-section > label:first-of-type { margin-top: 12px; }
.copy-field-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; }
.copy-field-row input { min-width: 0; font-family: Consolas, monospace; font-size: 12px; }
.copy-field-row .secondary-button { min-width: 92px; }
.excel-token-note { margin: 10px 0 0 !important; padding: 10px 12px; border-left: 3px solid #d89a20; background: #fff8e8; color: #76510b !important; }
.system-status-card-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.system-status-card-heading h3 { margin-bottom: 0; }
.system-status-card-badge { padding: 6px 8px; background: var(--brand-blue-soft); color: var(--brand-blue); font-size: 9px; font-weight: 900; letter-spacing: .1em; }
.advanced-settings {
  margin-top: 18px;
  border: 1px solid var(--line);
  background: #fff;
}
.advanced-settings summary {
  cursor: pointer;
  padding: 18px 22px;
  color: var(--ink);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.advanced-settings summary:hover { color: var(--brand-blue); }
.advanced-settings summary:focus-visible { outline: 2px solid var(--brand-blue); outline-offset: -4px; }
.advanced-settings-body {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 22px;
  border-top: 1px solid var(--line);
  background: #fff8f8;
}
.advanced-settings-body h3 { margin: 0 0 5px; color: var(--brand-red); font-size: 17px; }
.advanced-settings-body p { margin: 0; color: var(--text); font-size: 13px; line-height: 1.5; }
.advanced-settings .danger-button { width: auto; min-width: 180px; }
.section-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 16px;
  margin: 0 0 18px;
}
.section-heading h2 { margin: 4px 0 0; color: var(--ink); font-size: 27px; letter-spacing: -.7px; }
.stock-heading-actions { display: flex; align-items: center; gap: 18px; }
.section-kicker {
  display: block;
  color: var(--brand-blue);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .12em;
}
.text-button {
  border: 0;
  border-bottom: 2px solid var(--brand-red);
  background: transparent;
  color: var(--brand-red);
  padding: 6px 0;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .06em;
}

.list-search { width: 100%; max-width: 640px; margin: 0 0 24px; }
.list-search > label { display: block; margin: 0 0 8px; color: var(--muted); font-size: 12px; font-weight: 600; text-transform: none; letter-spacing: 0; }
.list-search-field { display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 10px 0 15px; border: 1px solid #dce2ea; border-radius: 12px; background: #fff; box-shadow: 0 2px 5px rgba(31, 52, 85, .035); }
.list-search-field:focus-within { border-color: #8fa9d0; box-shadow: 0 0 0 3px rgba(47, 92, 171, .08); }
.list-search-icon { flex: none; width: 19px; height: 19px; color: #8996a8; }
.list-search-field:focus-within .list-search-icon { color: var(--brand-blue); }
.list-search-field input { flex: 1; min-width: 0; width: 100%; margin: 0; padding: 12px 0; border: 0; border-radius: 0; outline: 0; box-shadow: none; background: transparent; font-size: 16px; line-height: 1.4; }
.list-search-field input::placeholder { color: #8a929e; opacity: 1; }
.list-search-field input:focus { border: 0; outline: 0; box-shadow: none; }
.list-search-field input::-webkit-search-cancel-button { -webkit-appearance: none; }
.list-search-field button { display: grid; place-items: center; flex: none; width: 32px; min-height: 32px; padding: 0; border: 0; border-radius: 8px; background: #f2f4f7; color: #738093; font-size: 22px; font-weight: 400; line-height: 1; letter-spacing: 0; text-decoration: none; }
.list-search-field button:hover { background: #eaf0f8; color: var(--brand-blue); }
.list-search-field button:focus-visible { outline: 2px solid var(--brand-blue); outline-offset: 2px; }
.list-search > small { display: block; margin-top: 7px; color: var(--muted); font-size: 12px; }
.list-search > small:empty { display: none; }
.inventory-filters {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 4px;
  margin: 0 0 16px;
  padding: 4px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f4f6f9;
  box-shadow: 0 5px 16px rgba(28, 50, 88, .05);
}
.inventory-filter {
  min-width: 116px;
  padding: 9px 16px;
  border: 0;
  border-radius: 5px;
  background: transparent;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .055em;
}
.inventory-filter:hover { color: var(--brand-blue); }
.inventory-filter.active {
  background: var(--brand-blue);
  color: #fff;
  box-shadow: 0 5px 14px rgba(28, 72, 143, .18);
}
.inventory-filter:focus-visible { outline: 2px solid var(--brand-red); outline-offset: 2px; }
.inventory-request-tools {
  display: flex;
  justify-content: flex-end;
  min-height: 36px;
  margin: -5px 0 10px;
}
.inventory-multi-request-button { align-self: center; color: #6f7986; }
.multi-request-selection-bar {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 9px 11px 9px 15px;
  border-left: 3px solid var(--brand-blue);
  background: var(--brand-blue-soft);
  color: var(--brand-blue-dark);
  font-size: 12px;
  font-weight: 700;
}
.multi-request-selection-bar > div { display: flex; align-items: center; gap: 10px; }
.multi-request-selection-bar .text-button { min-height: 30px; }

.inventory-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 14px;
}
.inventory-sort-hint {
  margin: -2px 0 12px;
  color: var(--muted);
  font-size: 11px;
  text-align: right;
}
.inventory-sort-hint span { color: #7d8793; font-size: 15px; vertical-align: -1px; }
.inventory-grid.is-sorting,
.inventory-grid.is-sorting * { cursor: grabbing !important; user-select: none; }
.inventory-empty-drums {
  display: grid;
  justify-items: center;
  gap: 14px;
  padding: 46px 20px;
  border: 1px dashed #b8c6da;
  background: rgba(255, 255, 255, .55);
}
.inventory-empty-drums p { margin: 0; }
.inventory-empty-drums .primary-button { width: auto; min-width: 210px; }
.inventory-empty-drums small { max-width: 440px; color: var(--muted); font-size: 11px; line-height: 1.45; text-align: center; }
.inventory-empty-drums .primary-button:disabled { background: #aeb8c7; color: #fff; cursor: not-allowed; }
body.inventory-drag-active {
  cursor: grabbing;
  user-select: none;
  overscroll-behavior: contain;
}
.stock-card {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-height: 210px;
  padding: 23px 20px 20px;
  border: 1px solid var(--line);
  border-top: 4px solid var(--brand-blue);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow-soft);
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.stock-card:hover { transform: translateY(-2px); box-shadow: 0 16px 34px rgba(31, 52, 85, .12); }
.stock-card.sortable h3 { margin-right: 34px; }
.stock-card-sort-handle {
  position: absolute;
  z-index: 2;
  top: 8px;
  right: 10px;
  display: grid;
  place-items: center;
  width: 30px;
  min-height: 30px;
  padding: 0;
  border: 0;
  background: transparent;
  color: #98a2ae;
  font-size: 18px;
  line-height: 1;
  cursor: grab;
  touch-action: none;
}
.stock-card-sort-handle:hover,
.stock-card-sort-handle:focus-visible { color: var(--brand-blue); background: var(--brand-blue-soft); outline: 0; }
.stock-card-sort-handle:active { cursor: grabbing; }
.stock-card.dragging {
  position: fixed;
  z-index: 1000;
  margin: 0;
  pointer-events: none;
  opacity: .94;
  border-color: var(--brand-blue);
  box-shadow: 0 22px 48px rgba(31, 52, 85, .26);
  transform: rotate(.7deg) scale(1.015);
  will-change: left, top, transform;
}
.stock-card-drop-placeholder {
  min-width: 0;
  border: 2px dashed rgba(46, 91, 174, .44);
  background: rgba(46, 91, 174, .055);
  box-shadow: inset 0 0 0 4px rgba(46, 91, 174, .025);
}
.stock-card.low { border-top-color: var(--brand-red); background: var(--surface); }
.stock-card.empty-stock { border-top-color: #9aa5b1; background: #f7f8fa; }
.stock-card.low.empty-stock { border-top-color: var(--brand-red); background: #fff8f8; }
.stock-card.request-selectable { cursor: pointer; transition: border-color .15s ease, box-shadow .15s ease, background .15s ease; }
.stock-card.request-selectable:hover { border-color: #98afd5; box-shadow: 0 9px 25px rgba(31, 74, 145, .11); }
.stock-card.request-selected {
  border-color: var(--brand-blue);
  background: #f6f9ff;
  box-shadow: inset 0 0 0 2px var(--brand-blue), 0 10px 26px rgba(31, 74, 145, .12);
}
.stock-card.request-selectable .stock-card-quick-receipt,
.stock-card.request-selectable .stock-card-actions { visibility: hidden; pointer-events: none; }
.stock-card-request-select {
  position: absolute;
  z-index: 3;
  top: 12px;
  right: 13px;
  display: grid;
  width: 25px;
  min-height: 25px;
  padding: 0;
  place-items: center;
  border: 2px solid #aeb9c8;
  border-radius: 3px;
  background: #fff;
  color: #fff;
  font-size: 14px;
  font-weight: 900;
  line-height: 1;
}
.stock-card-request-select:hover,
.stock-card-request-select:focus-visible { border-color: var(--brand-blue); outline: 3px solid rgba(47, 92, 171, .14); }
.stock-card-request-select[aria-pressed="true"] { border-color: var(--brand-blue); background: var(--brand-blue); }
.stock-card.live-updated { animation: live-card-update 1.55s ease-out; }
.stock-card.inventory-focus { animation: inventory-focus 2.1s ease-out; }
@keyframes live-card-update {
  0% { box-shadow: 0 0 0 0 rgba(46, 91, 174, .32), 0 8px 24px rgba(31, 52, 85, .05); }
  38% { box-shadow: 0 0 0 5px rgba(46, 91, 174, .13), 0 12px 28px rgba(31, 52, 85, .10); }
  100% { box-shadow: 0 0 0 0 rgba(46, 91, 174, 0), 0 8px 24px rgba(31, 52, 85, .05); }
}
@keyframes inventory-focus {
  0%, 32% { border-color: var(--brand-blue); box-shadow: 0 0 0 6px rgba(46, 91, 174, .18), 0 14px 34px rgba(31, 52, 85, .16); }
  100% { box-shadow: 0 8px 24px rgba(31, 52, 85, .05); }
}
@media (prefers-reduced-motion: reduce) {
  .stock-card.live-updated,
  .stock-card.inventory-focus { animation: none; }
}
.stock-card-quick-receipt {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  align-self: flex-start;
  min-height: 20px;
  padding: 0;
  border: 0;
  background: transparent;
  color: #6e7886;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
}
.stock-card-quick-receipt::before { content: '+'; color: var(--brand-blue); font-size: 14px; font-weight: 800; line-height: 1; }
.stock-card-quick-receipt:hover,
.stock-card-quick-receipt:focus-visible { background: transparent; color: var(--brand-blue); outline: 2px solid rgba(47, 92, 171, .24); outline-offset: 3px; }
.stock-card-quick-receipt:disabled { background: transparent; color: #a1a8b1; cursor: not-allowed; }
.stock-card-quick-receipt:disabled::before { color: #a1a8b1; }
.stock-card h3 {
  min-height: 42px;
  margin: 10px 0 25px;
  color: var(--ink);
  font-size: 17px;
  line-height: 1.25;
}
.stock-card-inventory-number {
  width: fit-content;
  max-width: 100%;
  margin: -17px 0 18px;
  padding: 4px 7px;
  overflow: hidden;
  border-radius: 4px;
  background: #eef3fa;
  color: #36577f;
  font-size: 10px;
  font-weight: 750;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.stock-card-inventory-number.empty { background: #f3f4f6; color: #929aa5; font-weight: 600; }
.stock-card-title-with-photo {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 110px;
  align-items: center;
  gap: 16px;
  min-height: 110px;
  margin: 10px 0 20px;
}
.stock-card .stock-card-title-with-photo h3 { grid-column: 1; grid-row: 1; min-width: 0; min-height: 0; margin: 0; line-height: 1.4; overflow-wrap: anywhere; }
.stock-card-title-with-photo.photo-missing { display: block; min-height: 0; }
.stock-card-drum-link {
  display: grid;
  gap: 10px;
  margin: 0 0 20px;
  padding: 16px;
  border: 1px solid #dfe7f3;
  border-radius: 10px;
  background: #f4f7fc;
  color: var(--muted);
}
.stock-card-drum-link strong { color: #244e93; font-size: 22px; line-height: 1.3; overflow-wrap: anywhere; }
.drum-length { font-size: 34px; font-weight: 800; color: var(--ink); line-height: 1.1; letter-spacing: -1px; }
.drum-status { font-size: 12px; font-weight: 600; }
.drum-status.ready { color: #22674c; }
.inventory-grid.drum-grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 290px), 1fr)); }
.stock-card.drum-card { padding-top: 22px; min-width: 0; }
.stock-card.drum-card h3 { font-size: 23px; line-height: 1.25; margin: 12px 22px 18px 0; min-height: 0; overflow-wrap: anywhere; }
.drum-card.empty-stock { opacity: 1; }
.drum-card .stock-card-footer { justify-content: flex-end; }
.drum-card .stock-card-actions { gap: 14px; }
.drum-card .stock-card-action { font-size: 12px; }
.drum-select { display: flex; align-items: center; gap: 8px; width: fit-content; font-size: 12px; color: #405776; margin: 0; cursor: pointer; }
.drum-select input { width: 18px; height: 18px; margin: 0; accent-color: var(--brand-blue); }
.stock-card.drum-selected { border-color: var(--brand-blue); box-shadow: 0 0 0 2px #315ca324; }
.drum-toolbar { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; margin: 8px 0 22px; }
.drum-tabs { display: inline-flex; gap: 4px; padding: 4px; background: #e9edf4; border-radius: 10px; }
.drum-tabs button { border: 0; background: transparent; padding: 10px 16px; border-radius: 7px; color: #506078; font-size: 13px; font-weight: 700; }
.drum-tabs button[aria-pressed="true"] { background: white; color: #244e93; box-shadow: 0 1px 4px #1933521a; }
.drum-selection-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; font-size: 12px; color: var(--muted); }
.drum-selection-tools .text-button { text-transform: none; letter-spacing: 0; }
.drum-return-card { display: flex; flex-direction: column; align-items: flex-start; padding: 22px; border: 1px solid #dce3ed; border-radius: 12px; background: white; gap: 10px; min-width: 0; }
.drum-return-card h3 { margin: 0; font-size: 22px; }
.drum-return-card p { margin: 0; font-size: 13px; }
.drum-return-card button { margin-top: auto; }
.drum-report-date { font-size: 12px; color: var(--muted); }
.drum-return-numbers { padding: 12px; background: #f4f7fc; border-radius: 7px; width: 100%; overflow-wrap: anywhere; max-height: 160px; overflow-y: auto; line-height: 1.8; }
.drum-reports-pagination { grid-column: 1 / -1; display: flex; gap: 12px; align-items: center; font-size: 13px; flex-wrap: wrap; }
.drum-return-items { list-style: none; padding: 0; max-height: 230px; overflow-y: auto; border: 1px solid #dfe7f3; border-radius: 8px; }
.drum-return-items li { padding: 12px 14px; display: flex; gap: 10px; justify-content: space-between; border-bottom: 1px solid #e7ecf4; overflow-wrap: anywhere; }
.drum-return-items li span { font-size: 12px; color: var(--muted); }
.dialog.drum-report-dialog { width: min(800px, calc(100vw - 24px)); }
.drum-report-content { font-size: 13px; }
.drum-report-content header { border-bottom: 2px solid #315ca3; padding-bottom: 10px; }
.drum-report-content h1 { font-size: 23px; margin: 8px 0; }
.drum-report-content header p { color: var(--muted); }
.drum-report-content dl { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 8px; margin: 20px 0; }
.drum-report-content dd { margin: 0; overflow-wrap: anywhere; }
.drum-report-content dt { color: var(--muted); }
.drum-report-content table { width: 100%; border-collapse: collapse; table-layout: fixed; }
.drum-report-content th, .drum-report-content td { padding: 12px 8px; border-bottom: 1px solid #dce3ed; text-align: left; overflow-wrap: anywhere; }
.drum-report-content th { background: #f4f7fc; }
.drum-report-content th:first-child { width: 45px; }
.report-note { white-space: pre-wrap; overflow-wrap: anywhere; }
.report-signatures { display: flex; gap: 25px; justify-content: space-between; margin: 65px 0 16px; }
.report-signatures span { width: 45%; border-top: 1px solid #a7b2c3; padding-top: 8px; color: var(--muted); }
@media (max-width: 600px) {
  .drum-toolbar { align-items: stretch; }
  .drum-tabs { width: 100%; }
  .drum-tabs button { flex: 1; padding: 10px 8px; }
  .drum-selection-tools { width: 100%; }
  #drumSelectionCount { width: 100%; }
  .drum-return-items li { flex-direction: column; gap: 4px; }
}
.stock-card-photo {
  grid-column: 2;
  grid-row: 1;
  width: 110px;
  height: 110px;
  padding: 0;
  overflow: hidden;
  border: 1px solid rgba(31, 52, 85, .09);
  border-radius: 12px;
  background: #f4f6f9;
  box-shadow: 0 2px 6px rgba(31, 52, 85, .06);
}
.stock-card-photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.stock-card-photo:hover,
.stock-card-photo:focus-visible { border-color: var(--brand-blue); outline: 3px solid rgba(47, 92, 171, .14); }
.stock-value { display: flex; align-items: baseline; gap: 6px; }
.stock-value strong { color: var(--ink); font-size: 34px; line-height: 1; letter-spacing: -1.5px; }
.stock-value span { color: var(--muted); font-weight: 700; }
.stock-state {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0;
  background: transparent;
  color: var(--muted);
  font-size: 10px;
  font-weight: 650;
}
.stock-state::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.stock-card.low .stock-state { background: transparent; color: #b84149; }
.stock-card.empty-stock .stock-state { background: transparent; color: #727d89; }
.stock-card.low.empty-stock .stock-state { color: #b84149; }
.stock-card-activity {
  display: grid;
  grid-template-columns: 14px minmax(0, 1fr);
  grid-template-rows: auto auto;
  column-gap: 5px;
  row-gap: 2px;
  min-width: 0;
  margin-top: 16px;
  color: var(--muted);
  overflow: hidden;
}
.stock-card-activity::before { content: '◷'; grid-column: 1; grid-row: 1 / span 2; align-self: start; color: #9aa5b1; font-size: 12px; }
.stock-card-activity strong,
.stock-card-activity span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.stock-card-activity strong { grid-column: 2; grid-row: 1; color: #66717e; font-size: 10px; font-weight: 650; }
.stock-card-activity span { grid-column: 2; grid-row: 2; color: #87919d; font-size: 10px; }
.stock-card-activity.activity-receipt::before,
.stock-card-activity.activity-receipt span { color: #2f63ad; }
.stock-card-activity.activity-issue::before,
.stock-card-activity.activity-issue span { color: #b84149; }
.stock-card-activity.activity-correction::before,
.stock-card-activity.activity-correction span { color: #9a6414; }
.stock-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: auto;
  padding-top: 14px;
}
.stock-card-footer.actions-only { justify-content: flex-end; }
.stock-card-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 9px; }
.stock-card-action {
  padding: 6px 0;
  border: 0;
  border-bottom: 2px solid var(--brand-blue);
  background: transparent;
  color: var(--brand-blue);
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
}
.stock-card-action:hover { color: var(--brand-red); border-bottom-color: var(--brand-red); }
.stock-card-action.issue-action {
  padding: 7px 11px;
  border: 0;
  border-radius: 5px;
  background: var(--brand-blue);
  color: #fff;
}
.stock-card-action.issue-action:hover { background: var(--brand-red); color: #fff; }
.stock-card-action.issue-action:disabled { background: #aeb8c7; color: #fff; cursor: not-allowed; }
.stock-card-action.request-action { color: #6b7380; border-bottom-color: #aeb6c1; }
.stock-card-action.request-action:hover { color: var(--brand-blue); border-bottom-color: var(--brand-blue); }
.stock-card-action.drums-action { color: #73520d; border-bottom-color: #d0a33d; }
.stock-card-action.drums-action:hover { color: #9b5b00; border-bottom-color: #9b5b00; }

.requests-heading { align-items: flex-start; }
.requests-heading p { max-width: 720px; margin-top: 8px; }
.requests-list { display: grid; gap: 10px; }
.request-row {
  display: grid;
  grid-template-columns: minmax(210px, 1.7fr) minmax(120px, .7fr) minmax(180px, 1fr) auto;
  align-items: center;
  gap: 18px;
  padding: 17px 18px;
  border: 1px solid var(--line);
  border-left: 4px solid var(--brand-blue);
  border-radius: 6px;
  background: #fff;
  box-shadow: 0 7px 18px rgba(31, 52, 85, .04);
}
.request-row.request-origin-system {
  border-left-color: #d97706;
  background: linear-gradient(105deg, #fffaf0 0%, #fff 58%);
}
.request-row.request-origin-user { border-left-color: var(--brand-blue); }
.request-item { min-width: 0; }
.request-item span,
.request-quantity span,
.request-meta span { display: block; color: var(--muted); font-size: 9px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.request-item strong { display: block; margin-top: 4px; overflow: hidden; color: var(--ink); font-size: 16px; text-overflow: ellipsis; white-space: nowrap; }
.request-item-link {
  display: block;
  width: fit-content;
  max-width: 100%;
  min-height: 0;
  margin-top: 4px;
  padding: 0;
  overflow: hidden;
  border: 0;
  border-bottom: 1px solid transparent;
  background: transparent;
  color: var(--ink);
  font-size: 16px;
  font-weight: 800;
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.request-item-link:hover,
.request-item-link:focus-visible { border-bottom-color: var(--brand-blue); color: var(--brand-blue); outline: 0; }
.request-item small { display: block; margin-top: 4px; color: var(--muted); }
.request-origin-badge {
  display: inline-flex !important;
  align-items: center;
  width: fit-content;
  margin: 0 0 5px;
  padding: 3px 7px;
  border: 1px solid transparent;
  border-radius: 999px;
  font-size: 9px !important;
  font-weight: 850 !important;
  letter-spacing: .07em !important;
  line-height: 1;
  text-transform: uppercase;
}
.request-origin-badge.user { border-color: #bfd0ec; background: #edf4ff; color: #28589e !important; }
.request-origin-badge.system { border-color: #f0c36f; background: #fff0cf; color: #925000 !important; }
.request-row.request-origin-system .request-quantity strong { color: #a85d00; }
.request-order-progress {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
  color: #7a8491;
  font-size: 10px;
  font-weight: 750;
}
.request-order-progress::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: #aeb8c6; }
.request-order-progress.complete { color: #2e7d4e; }
.request-order-progress.complete::before { background: #36a365; }
.request-order-grouped { border-left-width: 6px; }
.request-comment {
  display: -webkit-box;
  margin: 9px 0 0;
  overflow: hidden;
  color: #4d5c70;
  font-size: 12px;
  line-height: 1.4;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
.request-comment::before { content: '„'; color: var(--brand-blue); font-weight: 800; }
.request-comment::after { content: '”'; color: var(--brand-blue); font-weight: 800; }
.request-quantity strong { display: inline-block; margin-top: 3px; color: var(--brand-blue); font-size: 25px; line-height: 1; }
.request-quantity b { margin-left: 4px; color: var(--muted); font-size: 12px; }
.request-meta strong { display: block; margin-top: 4px; color: var(--text); font-size: 12px; }
.request-meta small { display: block; margin-top: 3px; color: var(--muted); font-size: 11px; }
.request-complete-button { white-space: nowrap; }
.request-row-actions { display: grid; justify-items: stretch; gap: 7px; }
.order-row { border-left-color: #3a8a62; }
.order-meta { display: grid; gap: 4px; min-width: 0; }
.order-meta strong { overflow: hidden; color: var(--ink); font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.order-meta span { color: var(--muted); font-size: 10px; font-weight: 650; text-transform: none; }
.order-row-actions { grid-template-columns: 1fr; }
.request-details-button {
  min-height: 0;
  padding: 4px 0;
  border: 0;
  border-bottom: 1px solid transparent;
  background: transparent;
  color: #778290;
  font-size: 10px;
  font-weight: 700;
}
.request-details-button:hover,
.request-details-button:focus-visible { border-bottom-color: var(--brand-blue); color: var(--brand-blue); outline: 0; }
.requests-empty {
  padding: 28px 20px;
  border: 1px dashed #b9c7dc;
  background: var(--brand-blue-soft);
  color: var(--brand-blue-dark);
  text-align: center;
  font-weight: 700;
}
.requests-history { margin-top: 26px; border-top: 3px solid var(--brand-blue); }
.requests-history > summary {
  padding: 18px 2px;
  color: var(--brand-blue-dark);
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  cursor: pointer;
}
.requests-history > summary span { color: var(--brand-red); }
.requests-history-list { display: grid; gap: 10px; }
.request-history-row {
  position: relative;
  display: grid;
  grid-template-columns: minmax(190px, 1.25fr) minmax(105px, .55fr) minmax(260px, 1.5fr);
  align-items: center;
  gap: 18px;
  padding: 38px 17px 16px;
  border: 1px solid #ced9ec;
  border-left: 4px solid var(--brand-blue);
  background: linear-gradient(115deg, #fff 0%, #fff 72%, #f2f6fd 100%);
  box-shadow: 0 7px 18px rgba(35, 74, 145, .055);
}
.request-history-row.request-origin-system {
  border-left-color: #d97706;
  background: linear-gradient(115deg, #fffaf0 0%, #fff 72%, #fff2d9 100%);
}
.request-history-row.request-origin-system .request-history-quantity strong { color: #a85d00; }
.request-history-heading { min-width: 0; }
.request-history-heading span,
.request-history-quantity span,
.request-history-flow span {
  display: block;
  color: var(--brand-blue);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .07em;
  text-transform: uppercase;
}
.request-history-heading strong {
  display: block;
  margin-top: 4px;
  overflow: hidden;
  color: var(--ink);
  font-size: 14px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.request-history-quantity strong { display: inline-block; margin-top: 3px; color: var(--brand-red); font-size: 20px; line-height: 1; }
.request-history-quantity b { margin-left: 4px; color: var(--muted); font-size: 11px; }
.request-history-flow { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.request-history-flow strong { display: block; margin-top: 3px; color: var(--text); font-size: 11px; }
.request-history-flow small { display: block; margin-top: 2px; color: var(--muted); font-size: 10px; }
.request-history-flow > div:last-child { padding-left: 12px; border-left: 2px solid rgba(226, 14, 23, .7); }
.request-history-actions {
  position: absolute;
  top: 11px;
  right: 14px;
  display: flex;
  align-items: center;
  gap: 15px;
}
.request-reopen-button {
  min-height: 0;
  padding: 3px 0;
  border: 0;
  border-bottom: 1px solid transparent;
  background: transparent;
  color: #8a939f;
  font-size: 10px;
  font-weight: 600;
}
.request-reopen-button:hover { border-bottom-color: var(--brand-red); color: var(--brand-red); }
.request-reopen-button:disabled { opacity: .45; cursor: default; }
.request-reopen-resolution {
  color: #7b8592;
  font-size: 10px;
  font-weight: 650;
}
.request-history-comment {
  grid-column: 1 / -1;
  margin: 0;
  padding-top: 10px;
  border-top: 1px solid #d8e2f3;
  color: #59677a;
  font-size: 12px;
  line-height: 1.4;
}
.request-history-comment::before { content: 'Komentarz: '; color: var(--brand-blue); font-size: 10px; font-weight: 800; text-transform: uppercase; }
.requests-history-pagination {
  display: flex;
  align-items: center;
  gap: 13px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
  color: var(--muted);
}
.requests-history-page-buttons,
.requests-history-page-numbers { display: flex; align-items: center; gap: 4px; }
.requests-history-page-buttons button {
  display: grid;
  width: 29px;
  min-height: 29px;
  padding: 0;
  place-items: center;
  border: 1px solid transparent;
  background: transparent;
  color: #7d8794;
  font-size: 12px;
  font-weight: 700;
}
.requests-history-page-buttons button:hover:not(:disabled) { border-color: #c7d0dc; color: var(--brand-blue); }
.requests-history-page-buttons button.active { border-color: var(--brand-blue); background: var(--brand-blue); color: #fff; }
.requests-history-page-buttons button:disabled { opacity: .3; cursor: default; }
.requests-history-page-size { display: flex; align-items: center; gap: 6px; margin: 0; color: var(--muted); font-size: 10px; font-weight: 600; }
.requests-history-page-size select { width: 54px; min-height: 29px; padding: 4px 7px; border-color: #d7dde5; font-size: 11px; }
.requests-history-page-summary { margin-left: auto; font-size: 10px; font-weight: 700; }
.request-form-help { margin: 10px 0 0; color: var(--muted); font-size: 12px; line-height: 1.45; }
.dialog.multi-request-dialog { width: min(700px, calc(100vw - 28px)); max-width: none; }
.multi-request-dialog form { max-height: calc(100vh - 28px); overflow-y: auto; }
.multi-request-intro { margin: -4px 0 14px; color: var(--muted); font-size: 12px; }
.multi-request-items { display: grid; gap: 8px; max-height: 330px; overflow-y: auto; padding-right: 3px; }
.multi-request-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 155px;
  align-items: center;
  gap: 16px;
  padding: 13px 14px;
  border: 1px solid var(--line);
  border-left: 3px solid var(--brand-blue);
  background: #fff;
}
.multi-request-item > div:first-child { min-width: 0; }
.multi-request-item > div:first-child span,
.multi-request-quantity > span { display: block; color: var(--muted); font-size: 9px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; }
.multi-request-item > div:first-child strong { display: block; margin-top: 3px; overflow: hidden; color: var(--ink); font-size: 14px; text-overflow: ellipsis; white-space: nowrap; }
.multi-request-item > div:first-child small { display: block; margin-top: 3px; color: var(--muted); font-size: 10px; }
.dialog .multi-request-quantity { margin: 0; }
.dialog .multi-request-quantity .quantity-input { margin-top: 5px; }
.multi-request-quantity input { min-height: 41px; }
.dialog.request-details-dialog { width: min(620px, calc(100vw - 28px)); max-width: none; }
.request-details-dialog .dialog-body {
  max-height: calc(100vh - 28px);
  max-height: calc(100dvh - 28px);
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}
.request-details-main { padding: 15px 17px; border-left: 4px solid var(--brand-blue); background: var(--brand-blue-soft); }
.request-details-main span { display: block; color: var(--brand-blue); font-size: 9px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.request-details-main strong { display: block; margin-top: 4px; color: var(--ink); font-size: 19px; overflow-wrap: anywhere; }
.request-details-items { display: grid; gap: 7px; margin-top: 12px; }
.request-details-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 15px;
  padding: 12px 13px;
  border: 1px solid var(--line);
  border-left: 3px solid #aeb8c6;
  background: #fff;
}
.request-details-item.ordered { border-left-color: #36a365; background: #f7fcf8; }
.request-details-item > div:first-child { min-width: 0; }
.request-details-item > div:first-child span { display: block; color: var(--muted); font-size: 9px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; }
.request-details-item > div:first-child strong { display: block; margin-top: 3px; overflow: hidden; color: var(--ink); font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.request-details-item > div:first-child .request-item-link { font-size: 13px; }
.request-details-item-values { min-width: 92px; text-align: right; }
.request-details-item-values strong,
.request-details-item-values small { display: block; }
.request-details-item-values strong { color: var(--brand-blue); font-size: 14px; }
.request-details-item-values small { margin-top: 2px; color: var(--muted); font-size: 9px; }
.dialog .request-line-check {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin: 0;
  color: #727d8a;
  font-size: 10px;
  font-weight: 750;
  text-transform: none;
}
.request-line-check input { width: 18px; min-height: 18px; margin: 0; accent-color: #36a365; }
.request-line-check.ordered { color: #2e7d4e; }
.purchase-order-dates { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.purchase-order-dates > div { min-width: 0; }
.request-details-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; margin: 14px 0 0; border: 1px solid var(--line); background: var(--line); }
.request-details-grid > div { min-width: 0; padding: 13px 15px; background: #fff; }
.request-details-grid dt { color: var(--muted); font-size: 9px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; }
.request-details-grid dd { margin: 4px 0 0; color: var(--ink); font-size: 13px; font-weight: 700; overflow-wrap: anywhere; }
.request-details-comment-section { margin-top: 14px; padding: 15px 17px; border: 1px solid #d7e1f1; background: #f8faff; }
.request-details-comment-section h3 { margin: 0 0 8px; color: var(--brand-blue); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; }
.request-details-comment-section p { margin: 0; color: var(--text); font-size: 14px; line-height: 1.55; overflow-wrap: anywhere; white-space: pre-wrap; }
.request-details-comment-section p.empty { color: var(--muted); font-style: italic; }
.dialog.request-reopen-conflict-dialog { width: min(700px, calc(100vw - 28px)); max-width: none; }
.request-reopen-conflict-dialog .dialog-body { max-height: calc(100vh - 28px); overflow-y: auto; }
.request-reopen-intro { margin: -3px 0 15px; color: #536174; font-size: 13px; line-height: 1.5; }
.request-reopen-conflict-list { display: grid; gap: 8px; }
.request-reopen-conflict-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) repeat(3, minmax(82px, auto));
  align-items: center;
  gap: 13px;
  padding: 13px 14px;
  border: 1px solid #d5dfef;
  border-left: 3px solid var(--brand-blue);
  background: #fff;
}
.request-reopen-conflict-name { min-width: 0; }
.request-reopen-conflict-name span,
.request-reopen-conflict-value span { display: block; color: #7b8592; font-size: 9px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.request-reopen-conflict-name strong { display: block; margin-top: 3px; overflow: hidden; color: var(--ink); font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.request-reopen-conflict-value { text-align: right; }
.request-reopen-conflict-value strong { display: block; margin-top: 3px; color: var(--text); font-size: 13px; white-space: nowrap; }
.request-reopen-conflict-value.result strong { color: var(--brand-blue); }
.request-reopen-other-items { margin: 10px 0 0; padding: 10px 12px; border-left: 3px solid #91a6c6; background: #f5f8fc; color: #586779; font-size: 11px; line-height: 1.45; }
.request-reopen-choice-note { display: grid; grid-template-columns: 140px 1fr; gap: 12px; margin-top: 13px; padding: 11px 13px; background: var(--brand-blue-soft); color: #516174; font-size: 11px; line-height: 1.45; }
.request-reopen-choice-note strong { color: var(--brand-blue-dark); }
.request-reopen-choice-note.secondary { margin-top: 5px; background: #f4f5f7; }
.request-reopen-choice-note.secondary strong { color: #596370; }
.dialog-actions.request-reopen-actions { grid-template-columns: auto 1fr 1fr; }

.history-list {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 0;
  background: #fff;
  box-shadow: 0 8px 24px rgba(31, 52, 85, .05);
}
.history-page-size { display: flex; align-items: center; gap: 9px; }
.history-page-size label { margin: 0; white-space: nowrap; }
.history-page-size select { width: 76px; padding: 9px 10px; }
.history-pagination {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-top: 16px;
}
.history-pagination button {
  min-height: 38px;
  border: 1px solid var(--line);
  background: #fff;
  color: var(--ink);
  padding: 8px 12px;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
}
.history-pagination button:hover:not(:disabled) { border-color: var(--brand-blue); color: var(--brand-blue); }
.history-pagination button:disabled { opacity: .45; cursor: default; }
.history-page-buttons { display: flex; gap: 5px; }
.history-page-buttons button { min-width: 38px; padding-inline: 8px; }
.history-page-buttons button.active {
  border-color: var(--brand-blue);
  background: var(--brand-blue);
  color: #fff;
}
.history-page-summary { margin-left: auto; color: var(--muted); font-size: 12px; font-weight: 700; }
.history-row {
  position: relative;
  display: grid;
  grid-template-columns: minmax(180px, 1.45fr) minmax(90px, .55fr) minmax(180px, 1fr) minmax(120px, .65fr);
  align-items: center;
  gap: 16px;
  width: 100%;
  padding: 16px 38px 16px 20px;
  border: 0;
  border-bottom: 1px solid #e8ebef;
  background: #fff;
  color: var(--ink);
  font: inherit;
  text-align: left;
}
.history-row:last-child { border-bottom: 0; }
.history-row:hover { background: #f8faff; }
.history-row::after {
  content: '›';
  position: absolute;
  right: 15px;
  top: 50%;
  transform: translateY(-53%);
  color: var(--brand-blue);
  font-size: 26px;
  font-weight: 700;
}
.history-row:focus-visible {
  outline: 2px solid var(--brand-blue);
  outline-offset: -2px;
}
.history-main strong, .history-main small { display: block; }
.history-main strong { color: var(--ink); }
.history-main small, .history-meta { margin-top: 4px; color: var(--muted); font-size: 12px; }
.movement-value { font-size: 19px; font-weight: 800; text-align: right; }
.movement-value.positive { color: var(--brand-blue); }
.movement-value.negative { color: var(--brand-red); }
.movement-value.grouped { color: var(--brand-blue); font-size: 12px; letter-spacing: .04em; text-transform: uppercase; }
.history-material-preview { display: flex; flex-wrap: wrap; gap: 5px 9px; margin-top: 8px; }
.history-material-preview > span { color: #455265; font-size: 11px; font-weight: 700; }
.history-material-preview > span + span::before { content: '•'; margin-right: 9px; color: #a2a9b2; }
.source-badge {
  justify-self: start;
  padding: 5px 8px;
  background: var(--brand-blue-soft);
  color: var(--brand-blue);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .07em;
}
.empty-state, .loading-state { padding: 38px 20px; text-align: center; color: var(--muted); }

.stocktake-heading { align-items: flex-start; }
.stocktake-heading p { max-width: 720px; margin-top: 8px; }
.stocktake-requests-panel { margin-bottom: 18px; border: 1px solid #dce4f1; border-left: 4px solid var(--brand-blue); background: #f8faff; }
.stocktake-requests-heading { display: flex; align-items: center; gap: 8px; padding: 14px 16px 8px; }
.stocktake-requests-heading h3 { margin: 0; font-size: 17px; }
.stocktake-requests-heading span { display: inline-flex; align-items: center; justify-content: center; min-width: 21px; height: 21px; padding: 0 6px; border-radius: 11px; background: var(--brand-red); color: #fff; font-size: 10px; font-weight: 800; }
.stocktake-request-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 18px; margin: 0 16px 14px; padding: 15px 16px; border: 1px solid #e0e5ed; background: #fff; }
.stocktake-request-row strong, .stocktake-request-row small { display: block; }
.stocktake-request-row small { margin-top: 4px; color: var(--muted); font-size: 11px; }
.stocktake-request-row p { max-width: 680px; margin: 9px 0 0; color: var(--text); font-size: 12px; line-height: 1.45; }
.stocktake-request-actions { display: flex; align-items: center; gap: 13px; }
.stocktake-request-actions .compact { min-height: 39px; padding: 9px 14px; }
.muted-action { border-bottom-color: transparent; color: var(--muted); }
.stocktake-request-status, .stocktake-assigned-notice { display: grid; gap: 5px; margin-bottom: 16px; padding: 14px 16px; border-left: 4px solid var(--brand-blue); background: #f2f6fc; }
.stocktake-request-status strong, .stocktake-assigned-notice strong { font-size: 13px; }
.stocktake-request-status span, .stocktake-assigned-notice span { color: var(--muted); font-size: 12px; line-height: 1.4; }
.stocktake-request-status.rejected { border-left-color: #9aa5b1; background: #f5f6f8; }
.stocktake-empty {
  padding: 28px;
  border: 1px solid var(--line);
  border-left: 5px solid var(--success);
  background: #fff;
}
.stocktake-empty h3 { margin: 0 0 7px; font-size: 20px; }
.stocktake-empty p { margin: 0; color: var(--muted); line-height: 1.55; }
.stocktake-overview {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: end;
  gap: 20px;
  padding: 24px;
  border: 1px solid #bfd0ec;
  background: #fff;
  box-shadow: 0 8px 24px rgba(31, 52, 85, .05);
}
.stocktake-live-label { color: var(--brand-red); font-size: 10px; font-weight: 800; letter-spacing: .12em; }
.stocktake-overview h3 { margin: 9px 0 5px; font-size: 24px; }
.stocktake-overview p { margin: 0; color: var(--muted); font-size: 13px; }
.stocktake-progress { text-align: right; }
.stocktake-progress strong, .stocktake-progress span { display: block; }
.stocktake-progress strong { color: var(--brand-blue); font-size: 30px; line-height: 1; }
.stocktake-progress span { margin-top: 5px; color: var(--muted); font-size: 11px; font-weight: 700; text-transform: uppercase; }
.stocktake-progress-bar { grid-column: 1 / -1; height: 7px; background: #e6eaf0; }
.stocktake-progress-bar span { display: block; height: 100%; background: var(--brand-blue); transition: width .2s ease; }
.stocktake-lock-notice {
  margin: 12px 0;
  padding: 13px 16px;
  border-left: 4px solid var(--warning);
  background: #fff7e7;
  color: #6f4c10;
  font-size: 13px;
  font-weight: 700;
}
.stocktake-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin: 18px 0 10px;
}
.stocktake-toolbar > span { color: var(--text); font-size: 13px; font-weight: 700; }
.stocktake-toolbar-actions { display: flex; align-items: center; gap: 10px; }
.stocktake-toolbar label { display: flex; align-items: center; gap: 8px; margin: 0; }
.stocktake-toolbar select { width: auto; min-width: 155px; padding: 9px 11px; }
.stocktake-add-item-button { min-height: 39px; padding: 9px 13px; white-space: nowrap; }
.stocktake-list { overflow: hidden; border: 1px solid var(--line); background: #fff; }
.stocktake-row {
  display: grid;
  grid-template-columns: minmax(190px, 1.35fr) minmax(110px, .6fr) minmax(150px, .75fr) minmax(130px, .75fr) minmax(110px, .5fr);
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  border-bottom: 1px solid #e8ebef;
}
.stocktake-row:last-child { border-bottom: 0; }
.stocktake-row.counted { background: #fbfcfe; }
.stocktake-row.new-item { box-shadow: inset 4px 0 0 var(--brand-blue); background: #f8faff; }
.stocktake-row.has-draft { box-shadow: inset 4px 0 0 var(--warning); }
.stocktake-item strong, .stocktake-item small, .stocktake-expected span, .stocktake-expected strong, .stocktake-result strong, .stocktake-result small { display: block; }
.stocktake-item small, .stocktake-expected span, .stocktake-result small { margin-top: 4px; color: var(--muted); font-size: 11px; }
.stocktake-new-item-badge { display: inline-flex; margin-top: 7px; padding: 3px 6px; background: #e8effb; color: var(--brand-blue); font-size: 9px; font-weight: 800; letter-spacing: .06em; }
.stocktake-expected strong { margin-top: 4px; font-size: 16px; }
.stocktake-actual { margin: 0; }
.stocktake-actual .quantity-input { margin-top: 5px; }
.stocktake-actual input { min-width: 0; padding: 10px 40px 10px 11px; }
.stocktake-actual .quantity-input span { right: 11px; }
.stocktake-result strong { color: var(--muted); font-size: 13px; }
.stocktake-result.match strong { color: var(--success); }
.stocktake-result.difference strong { color: var(--brand-red); }
.stocktake-row-actions { display: grid; gap: 5px; }
.stocktake-row-actions .secondary-button { width: 100%; min-height: 40px; padding: 9px 11px; }
.stocktake-remove-item-button { justify-self: center; padding: 2px 0; border: 0; border-bottom: 1px solid #b9c0c9; background: transparent; color: #7b8490; font-size: 9px; font-weight: 700; }
.stocktake-remove-item-button:hover, .stocktake-remove-item-button:focus-visible { color: var(--brand-red); border-bottom-color: var(--brand-red); }
.stocktake-line-error { min-height: 13px; color: var(--brand-red); font-size: 10px; line-height: 1.25; }
.stocktake-admin-actions { display: grid; grid-template-columns: 1fr 1.4fr; gap: 10px; margin-top: 16px; }
.stocktake-admin-actions.worker-cancel-only { display: flex; justify-content: flex-end; }
.stocktake-admin-actions.worker-cancel-only .secondary-button { width: auto; min-width: 220px; }
.stocktake-history-heading { margin: 32px 0 12px; font-size: 18px; }
.stocktake-history-empty { padding: 18px; border: 1px solid var(--line); background: #fff; color: var(--muted); font-size: 13px; }
.stocktake-history-list { display: grid; gap: 8px; }
.stocktake-history-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 16px; border: 1px solid var(--line); border-left: 4px solid var(--brand-blue); background: #fff; }
.stocktake-history-row.cancelled { border-left-color: var(--muted); }
.stocktake-history-row strong, .stocktake-history-row small { display: block; }
.stocktake-history-row small { margin-top: 4px; color: var(--muted); font-size: 11px; }
.stocktake-history-summary { display: grid; justify-items: end; text-align: right; }
.stocktake-status { color: var(--brand-blue); font-size: 10px; font-weight: 800; text-transform: uppercase; }
.stocktake-history-row.cancelled .stocktake-status { color: var(--muted); }
.stocktake-report-button { margin-top: 8px; padding: 2px 0; }

.dialog.stocktake-report-dialog {
  width: min(1280px, calc(100vw - 48px));
  max-width: none;
  height: min(860px, calc(100vh - 48px));
  max-height: none;
}
.stocktake-report-dialog .dialog-body {
  box-sizing: border-box;
  height: 100%;
  overflow-y: auto;
  padding: 32px 36px;
}
.stocktake-report-notice {
  margin: 0 0 18px;
  padding: 12px 14px;
  border-left: 4px solid var(--brand-blue);
  background: var(--brand-blue-soft);
  color: var(--text);
  font-size: 13px;
}
.stocktake-report-notice.cancelled { border-left-color: var(--muted); background: #f3f4f6; }
.stocktake-report-summary { display: grid; grid-template-columns: repeat(5, 1fr); gap: 7px; margin-bottom: 22px; }
.stocktake-report-summary > div { padding: 13px 12px; border: 1px solid var(--line); background: #fff; }
.stocktake-report-summary strong, .stocktake-report-summary span { display: block; }
.stocktake-report-summary strong { color: var(--brand-blue); font-size: 23px; line-height: 1; }
.stocktake-report-summary span { margin-top: 6px; color: var(--muted); font-size: 10px; font-weight: 800; text-transform: uppercase; }
.stocktake-report-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 10px; }
.stocktake-report-toolbar > strong { font-size: 14px; }
.stocktake-report-toolbar label { display: flex; align-items: center; gap: 8px; margin: 0; }
.stocktake-report-toolbar select { width: auto; min-width: 165px; padding: 9px 11px; }
.stocktake-report-list { overflow: hidden; border: 1px solid var(--line); background: #fff; }
.stocktake-report-row { display: grid; grid-template-columns: minmax(250px, 1.6fr) minmax(125px, .6fr) minmax(125px, .6fr) minmax(210px, 1fr); align-items: center; gap: 22px; padding: 17px 20px; border-bottom: 1px solid #e8ebef; }
.stocktake-report-row:last-child { border-bottom: 0; }
.stocktake-report-item strong, .stocktake-report-item small, .stocktake-report-value span, .stocktake-report-value strong, .stocktake-report-change strong, .stocktake-report-change small { display: block; }
.stocktake-report-item small, .stocktake-report-value span, .stocktake-report-change small { margin-top: 4px; color: var(--muted); font-size: 11px; }
.stocktake-report-value span { margin-top: 0; font-size: 9px; font-weight: 800; text-transform: uppercase; }
.stocktake-report-value strong { margin-top: 4px; font-size: 15px; }
.stocktake-report-change strong { color: var(--muted); font-size: 13px; }
.stocktake-report-change.surplus strong { color: var(--success); }
.stocktake-report-change.shortage strong { color: var(--brand-red); }
.stocktake-report-change.match strong { color: var(--brand-blue); }
.stocktake-report-empty { padding: 22px 18px; color: var(--muted); font-size: 13px; text-align: center; }

.dialog {
  width: min(530px, calc(100% - 28px));
  max-height: calc(100dvh - 28px);
  border: 0;
  border-top: 5px solid var(--brand-blue);
  overflow: hidden;
  border-radius: var(--radius);
  padding: 0;
  box-shadow: 0 30px 100px rgba(17, 33, 60, .45);
}
.dialog::backdrop { background: rgba(16, 27, 47, .72); backdrop-filter: blur(2px); }
.dialog > form,
.dialog > .dialog-body {
  max-height: calc(100dvh - 28px);
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}
.dialog form { padding: 27px; }
.dialog-body { padding: 27px; }
.dialog-heading { display: flex; justify-content: space-between; gap: 20px; margin-bottom: 16px; }
.dialog-heading h2 { margin: 8px 0 0; color: var(--ink); }
.dialog-subtitle { margin: 5px 0 0; color: var(--muted); font-size: 13px; }
.dialog-close {
  width: 38px;
  height: 38px;
  border: 1px solid var(--line);
  border-radius: var(--radius-small);
  background: #fff;
  color: var(--brand-red);
  font-size: 25px;
  line-height: 1;
}
.dialog label { display: block; margin: 16px 0 6px; }
.dialog label small { color: var(--muted); font-weight: 500; text-transform: none; }
.receipt-choice,
.add-item-choice { margin-top: 15px; }
.dialog .receipt-choice label,
.dialog .receipt-progressive label,
.dialog .add-item-choice label,
.dialog .add-item-progressive label { margin: 0 0 6px; }
.receipt-progressive,
.add-item-progressive {
  display: grid;
  grid-template-rows: 0fr;
  margin-top: 0;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-7px);
  transition:
    grid-template-rows .24s cubic-bezier(.2,.75,.25,1),
    margin-top .24s ease,
    opacity .18s ease,
    transform .24s cubic-bezier(.2,.75,.25,1),
    visibility 0s linear .24s;
}
.receipt-progressive.visible,
.add-item-progressive.visible {
  grid-template-rows: 1fr;
  margin-top: 16px;
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition-delay: 0s;
}
.receipt-progressive-inner,
.add-item-progressive-inner {
  min-height: 0;
  overflow: hidden;
}
.receipt-details-progressive.visible { margin-top: 14px; }
.add-item-details-progressive.visible { margin-top: 14px; }
.excel-alias-details {
  margin-top: 16px;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 11px;
}
.excel-alias-details summary {
  width: max-content;
  max-width: 100%;
  padding-top: 10px;
  cursor: pointer;
  color: #6f7987;
  font-weight: 700;
  letter-spacing: .01em;
}
.excel-alias-details summary::marker { color: #a7b0bb; }
.excel-alias-details summary small { margin-left: 4px; color: #9aa3ad; font-size: 9px; font-weight: 500; }
.excel-alias-details[open] summary { color: var(--brand-blue); }
.excel-alias-details-body { padding-top: 9px; }
.dialog .excel-alias-details-body label { margin: 0 0 5px; color: var(--muted); font-size: 10px; }
.excel-alias-details textarea { min-height: 78px; font-size: 13px; }
.quantity-input { position: relative; }
.quantity-input input { padding-right: 50px; font-size: 20px; font-weight: 800; }
.quantity-input span { position: absolute; right: 15px; top: 50%; transform: translateY(-50%); color: var(--muted); font-weight: 700; }
.current-balance {
  margin-top: 12px;
  padding: 11px 13px;
  border-left: 4px solid var(--brand-blue);
  background: var(--brand-blue-soft);
  color: var(--text);
  font-size: 13px;
}
.current-balance strong { color: var(--brand-blue); }
.issue-item-summary {
  display: grid;
  gap: 4px;
  padding: 13px 15px;
  border-left: 4px solid var(--brand-blue);
  background: var(--brand-blue-soft);
}
.issue-item-summary span { color: var(--muted); font-size: 9px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.issue-item-summary strong { color: var(--ink); font-size: 16px; }
.issue-item-summary small { color: var(--text); }
.issue-item-summary b { color: var(--brand-blue); }
.issue-dialog form { max-height: calc(100vh - 28px); overflow-y: auto; }
.issue-balance-preview { margin-top: 9px; padding: 9px 12px; background: #eef7f3; color: var(--text); font-size: 12px; }
.issue-balance-preview strong { color: var(--success); }
.issue-balance-preview.insufficient { background: #fff0f0; color: var(--brand-red); }
.issue-balance-preview.insufficient strong { color: var(--brand-red); }
.history-dialog {
  width: min(720px, calc(100% - 28px));
  max-height: calc(100vh - 28px);
  max-height: calc(100dvh - 28px);
}
.history-dialog .dialog-body {
  max-height: calc(100vh - 28px);
  max-height: calc(100dvh - 28px);
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}
.dialog.system-status-dialog { width: min(980px, calc(100vw - 36px)); max-width: none; }
.system-status-dialog .dialog-body { max-height: calc(100vh - 36px); overflow-y: auto; }
.system-status-hero {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 4px 0 18px;
  padding: 18px 20px;
  border-left: 5px solid var(--muted);
  background: #f3f4f6;
}
.system-status-hero.ok { border-left-color: var(--success); background: #eef8f1; }
.system-status-hero.warning { border-left-color: var(--warning); background: #fff8e8; }
.system-status-hero.error { border-left-color: var(--brand-red); background: #fff0f0; }
.system-status-hero-icon {
  display: grid;
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  place-items: center;
  background: var(--muted);
  color: #fff;
  font-size: 24px;
  font-weight: 900;
}
.system-status-hero.ok .system-status-hero-icon { background: var(--success); }
.system-status-hero.warning .system-status-hero-icon { background: var(--warning); color: var(--ink); }
.system-status-hero.error .system-status-hero-icon { background: var(--brand-red); }
.system-status-hero strong, .system-status-hero p { display: block; }
.system-status-hero strong { color: var(--ink); font-size: 18px; }
.system-status-hero p { margin: 4px 0 0; color: var(--text); font-size: 13px; }
.system-status-checks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
.system-status-checks > .loading-state { grid-column: 1 / -1; }
.system-status-check {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  min-width: 0;
  padding: 15px;
  border: 1px solid var(--line);
  background: #fff;
}
.system-status-check-icon {
  display: grid;
  width: 28px;
  height: 28px;
  flex: 0 0 28px;
  place-items: center;
  background: var(--muted);
  color: #fff;
  font-weight: 900;
}
.system-status-check.ok .system-status-check-icon { background: var(--success); }
.system-status-check.warning .system-status-check-icon { background: var(--warning); color: var(--ink); }
.system-status-check.error .system-status-check-icon { background: var(--brand-red); }
.system-status-check div { min-width: 0; }
.system-status-check span, .system-status-check strong, .system-status-check small { display: block; }
.system-status-check div > span { color: var(--muted); font-size: 9px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; }
.system-status-check strong { margin-top: 3px; color: var(--ink); font-size: 14px; }
.system-status-check small { overflow: hidden; margin-top: 4px; color: var(--muted); font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.system-status-section { margin-top: 24px; }
.system-status-section-heading { margin-bottom: 10px; }
.system-status-section-heading h3 { margin: 5px 0 0; font-size: 16px; }
.system-status-stats { display: grid; grid-template-columns: repeat(5, 1fr); gap: 7px; }
.system-status-stats > div { padding: 14px; border: 1px solid var(--line); background: #fff; }
.system-status-stats strong, .system-status-stats span { display: block; }
.system-status-stats strong { color: var(--brand-blue); font-size: 23px; }
.system-status-stats span { margin-top: 5px; color: var(--muted); font-size: 9px; font-weight: 800; text-transform: uppercase; }
.system-status-warnings { display: grid; gap: 7px; }
.system-status-warning { display: flex; align-items: flex-start; gap: 11px; padding: 13px 15px; border-left: 4px solid var(--warning); background: #fff8e8; }
.system-status-warning.error { border-left-color: var(--brand-red); background: #fff0f0; }
.system-status-warning.ok { border-left-color: var(--success); background: #eef8f1; }
.system-status-warning > span { font-size: 18px; font-weight: 900; }
.system-status-warning p { margin: 0; }
.system-status-warning strong, .system-status-warning small { display: block; }
.system-status-warning strong { color: var(--ink); font-size: 13px; }
.system-status-warning small { margin-top: 3px; color: var(--text); font-size: 12px; line-height: 1.4; }
.history-details {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  margin: 22px 0 0;
  background: var(--line);
  border: 1px solid var(--line);
}
.history-details > div {
  min-width: 0;
  padding: 15px 17px;
  background: #fff;
}
.history-details .detail-important { border-left: 4px solid var(--brand-blue); }
.history-details .detail-wide { grid-column: 1 / -1; }
.history-details dt {
  margin-bottom: 6px;
  color: var(--muted);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.history-details dd {
  margin: 0;
  overflow-wrap: anywhere;
  color: var(--ink);
  font-size: 15px;
  font-weight: 700;
  line-height: 1.35;
}
.history-details dd.positive { color: var(--brand-blue); }
.history-details dd.negative { color: var(--brand-red); }
.history-detail-items { display: grid; gap: 0; }
.history-detail-item { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 9px 0; border-bottom: 1px solid var(--line); }
.history-detail-item:first-child { padding-top: 0; }
.history-detail-item:last-child { padding-bottom: 0; border-bottom: 0; }
.history-detail-item strong { min-width: 0; font-size: 14px; overflow-wrap: anywhere; }
.history-detail-item b { flex: 0 0 auto; white-space: nowrap; }
.history-detail-item b.positive { color: var(--brand-blue); }
.history-detail-item b.negative { color: var(--brand-red); }
.history-edit-action {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-top: 12px;
  padding: 15px 17px;
  border: 1px solid #cbd8ed;
  border-left: 4px solid var(--brand-blue);
  background: var(--brand-blue-soft);
}
.history-edit-action h3 { margin: 0; color: var(--ink); font-size: 14px; }
.history-edit-action p { margin: 4px 0 0; color: var(--text); font-size: 11px; line-height: 1.4; }
.history-edit-action button { flex: 0 0 auto; }
.admin-danger {
  margin-top: 20px;
  padding: 17px;
  border: 1px solid #efc9cb;
  border-left: 5px solid var(--brand-red);
  background: #fffafa;
}
.admin-danger h3 { margin: 0 0 3px; color: var(--brand-red); font-size: 17px; }
.admin-danger p { margin: 6px 0 13px; color: var(--text); font-size: 13px; line-height: 1.45; }
.admin-danger label { margin-top: 12px; }
.edit-item-tools {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-top: 20px;
  padding: 16px;
  border: 1px solid var(--line);
  background: var(--surface);
}
.edit-item-tools h3 { margin: 0 0 5px; color: var(--ink); font-size: 16px; }
.edit-item-tools p { margin: 0; color: var(--muted); font-size: 13px; }
.item-activity-section {
  margin-top: 16px;
  padding: 16px;
  border: 1px solid var(--line);
  background: #fff;
}
.item-activity-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.item-activity-heading h3 { margin: 2px 0 0; color: var(--ink); font-size: 17px; }
.item-activity-heading > span { color: var(--muted); font-size: 10px; text-transform: uppercase; }
.item-activity-list { display: grid; border-top: 1px solid var(--line); }
.item-activity-row {
  display: grid;
  grid-template-columns: 9px minmax(0, 1fr);
  gap: 10px;
  padding: 11px 0;
  border-bottom: 1px solid var(--line);
}
.item-activity-marker { width: 8px; height: 8px; margin-top: 4px; border-radius: 50%; background: var(--brand-blue); }
.item-activity-marker.issue,
.item-activity-marker.cancellation { background: var(--brand-red); }
.item-activity-marker.stocktake_count { background: var(--success); }
.item-activity-row strong,
.item-activity-row small { display: block; }
.item-activity-row strong { color: var(--ink); font-size: 12px; }
.item-activity-row small { margin-top: 2px; color: var(--muted); font-size: 11px; }
.item-activity-row p { margin: 5px 0 0; color: var(--text); font-size: 11px; line-height: 1.4; overflow-wrap: anywhere; }
.item-activity-empty { padding: 18px 4px; border-bottom: 1px solid var(--line); color: var(--muted); font-size: 12px; text-align: center; }
.item-activity-empty.error { color: var(--brand-red); }
.item-activity-pagination {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 9px;
  margin-top: 11px;
}
.item-activity-pagination button {
  min-height: 36px;
  border: 1px solid var(--line);
  background: #fff;
  color: var(--brand-blue);
  font-size: 9px;
  font-weight: 800;
  text-transform: uppercase;
}
.item-activity-pagination button:hover:not(:disabled) { border-color: var(--brand-blue); background: var(--brand-blue-soft); }
.item-activity-pagination button:disabled { opacity: .4; cursor: default; }
.item-activity-pagination span { color: var(--muted); font-size: 11px; white-space: nowrap; text-align: center; }
#addItemDialog form,
#editItemDialog form { max-height: calc(100vh - 28px); overflow-y: auto; }
#addDrumDialog { width: min(560px, calc(100vw - 28px)); }
#addDrumDialog form { max-height: calc(100vh - 28px); overflow-y: auto; }
.add-drum-intro {
  margin: 0 0 18px;
  padding: 11px 13px;
  border-left: 3px solid var(--brand-blue);
  background: var(--brand-blue-soft);
  color: #536276;
  font-size: 12px;
  line-height: 1.5;
}
#addDrumDialog label { margin-top: 13px; }
#addDrumDialog .dialog-heading + .add-drum-intro { margin-top: 2px; }
#editItemDialog { width: min(650px, calc(100vw - 28px)); }
.edit-item-primary-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.edit-item-field-wide { grid-column: 1 / -1; }
#editItemDialog .edit-item-field label { margin: 0 0 6px; }
#editItemDialog .edit-item-field .field-help { margin: 6px 0 0; }
.edit-item-stock-section[open] > summary { background: #f4f8ff; }
.edit-item-current-value {
  color: var(--muted) !important;
  font-weight: 800 !important;
  white-space: nowrap;
}
.edit-item-stock-help { margin: 0; color: var(--muted); font-size: 11px; line-height: 1.45; }
.edit-item-correction-fields {
  display: grid;
  grid-template-columns: minmax(150px, .75fr) minmax(220px, 1.25fr);
  gap: 11px 13px;
  margin-top: 14px;
}
.edit-item-correction-fields label { margin: 0 0 6px !important; }
.edit-item-correction-fields input { background: rgba(255, 255, 255, .96); }
.edit-item-correction-fields .primary-button { grid-column: 1 / -1; min-height: 43px; }
.edit-item-correction-fields .form-error { grid-column: 1 / -1; margin: -3px 0 0; }
.edit-item-correction-locked {
  margin: 14px 0 0;
  padding: 10px 12px;
  border-left: 3px solid var(--warning);
  background: #fff8e8;
  color: #76510b;
  font-size: 11px;
  line-height: 1.45;
}
.edit-item-section {
  margin-top: 10px;
  border: 1px solid var(--line);
  background: #fff;
  interpolate-size: allow-keywords;
}
.edit-item-section::details-content {
  block-size: 0;
  overflow: hidden;
  opacity: 0;
  transition:
    block-size .28s cubic-bezier(.2, .75, .25, 1),
    opacity .18s ease,
    content-visibility .28s allow-discrete;
}
.edit-item-section[open]::details-content {
  block-size: auto;
  opacity: 1;
}
.edit-item-section > summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 220px) auto;
  align-items: center;
  gap: 12px;
  min-height: 50px;
  padding: 0 15px;
  color: var(--ink);
  cursor: pointer;
  list-style: none;
}
.edit-item-section > summary::-webkit-details-marker { display: none; }
.edit-item-section > summary::after {
  content: "+";
  color: var(--brand-blue);
  font-size: 22px;
  font-weight: 600;
  line-height: 1;
}
.edit-item-section[open] > summary::after { content: "−"; }
.edit-item-section > summary:hover { background: #f7f9fc; }
.edit-item-section > summary > span { font-size: 13px; font-weight: 800; }
.edit-item-section > summary strong,
.edit-item-section > summary small { display: block; }
.edit-item-section > summary strong { font-size: 13px; }
.edit-item-section > summary small { color: var(--muted); font-size: 10px; font-weight: 500; text-align: right; }
.edit-item-section-body { padding: 16px; border-top: 1px solid var(--line); }
.edit-item-section > .edit-item-section-body {
  transform: translateY(-5px);
  transition: transform .28s cubic-bezier(.2, .75, .25, 1);
}
.edit-item-section[open] > .edit-item-section-body { transform: translateY(0); }
@media (prefers-reduced-motion: reduce) {
  .edit-item-section::details-content,
  .edit-item-section > .edit-item-section-body { transition: none; }
}
#editItemDialog .item-photo-editor,
#editItemDialog .edit-item-tools,
#editItemDialog .item-activity-section { margin-top: 0; border: 0; background: transparent; }
#editItemDialog .item-photo-editor { padding-top: 0; }
#editItemDialog .edit-item-tools { padding: 0 0 15px; }
#editItemDialog .item-activity-section { margin-top: 12px; padding: 15px 0 0; border-top: 1px solid var(--line); }
#editItemDialog .excel-alias-details {
  border: 0;
  color: inherit;
  font-size: inherit;
}
#editItemDialog .excel-alias-details summary {
  width: auto;
  max-width: none;
  margin: 0;
  padding-top: 0;
}
.edit-item-danger > summary { color: var(--brand-red); }
.edit-item-danger > summary::after { color: var(--brand-red); }
.edit-item-danger p { margin: 0 0 13px; color: var(--text); font-size: 12px; line-height: 1.45; }
.movement-edit-dialog { width: min(680px, calc(100vw - 28px)); }
.movement-edit-items {
  display: grid;
  gap: 8px;
  max-height: min(44vh, 440px);
  overflow-y: auto;
  margin: 16px 0;
  padding-right: 3px;
}
.movement-edit-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 130px 55px;
  align-items: center;
  gap: 16px;
  margin: 0 !important;
  padding: 13px 14px;
  border: 1px solid var(--line);
  background: #f8fafc;
}
.movement-edit-row strong,
.movement-edit-row small { display: block; }
.movement-edit-row strong { color: var(--ink); font-size: 13px; overflow-wrap: anywhere; }
.movement-edit-row small { margin-top: 4px; color: var(--muted); font-size: 10px; }
.movement-edit-quantity label { margin: 0 0 5px; font-size: 9px; }
.movement-edit-quantity input { margin: 0; text-align: right; }
.movement-edit-help { margin: 0; color: var(--muted); font-size: 11px; line-height: 1.45; }
.movement-add-material { margin: 16px 0; padding: 14px; border: 1px solid var(--line); background: #f8fafc; }
.movement-add-controls { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 12px; }
.movement-add-controls .quantity-input { margin-bottom: 0; }
.movement-edit-removed { background: #fff3f3; }
.movement-edit-removed strong { text-decoration: line-through; }
.movement-edit-remove { justify-self: end; font-size: 11px; }
.drum-supplier { color: var(--muted); font-size: 11px; overflow-wrap: anywhere; }
@media (max-width: 540px) {
  .movement-add-controls { grid-template-columns: 1fr; }
  .movement-edit-remove { justify-self: start; }
}
.item-photo-editor { margin-top: 16px; padding-top: 15px; border-top: 1px solid var(--line); }
.item-photo-editor-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 9px; }
.item-photo-editor-heading label,
.item-photo-editor-heading > span { margin: 0; color: var(--ink); font-size: 11px; font-weight: 800; text-transform: uppercase; }
.item-photo-editor-heading small { color: var(--muted); font-size: 10px; font-weight: 500; }
.item-photo-picker { display: flex; align-items: center; gap: 16px; min-height: 76px; padding: 14px; border: 1px solid var(--line); border-radius: 12px; background: #fafbfc; }
.item-photo-preview { flex: none; width: 110px; height: 110px; padding: 0; overflow: hidden; border: 1px solid rgba(31, 52, 85, .09); border-radius: 10px; background: #fff; box-shadow: 0 2px 6px rgba(31, 52, 85, .06); }
.item-photo-preview img { display: block; width: 100%; height: 100%; object-fit: cover; }
.item-photo-preview:hover,
.item-photo-preview:focus-visible { border-color: var(--brand-blue); outline: 3px solid rgba(47, 92, 171, .14); }
.item-photo-empty { display: grid; flex: none; place-items: center; width: 76px; height: 76px; border: 1px dashed #cbd3de; color: #87919d; font-size: 10px; text-align: center; }
.item-photo-actions { display: flex; min-width: 0; align-items: flex-start; flex-direction: column; gap: 12px; }
.item-photo-choose { display: inline-flex; align-items: center; justify-content: center; width: auto; margin: 0; cursor: pointer; }
.dialog.item-photo-dialog { width: min(760px, calc(100vw - 28px)); }
.item-photo-dialog .dialog-body { padding: 18px; }
.item-photo-dialog img { display: block; width: 100%; max-height: calc(100vh - 150px); object-fit: contain; background: #f2f4f7; }
.danger-button {
  width: 100%;
  min-height: 46px;
  border: 1px solid var(--brand-red);
  background: var(--brand-red);
  color: #fff;
  padding: 12px 17px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .055em;
  text-transform: uppercase;
}
.danger-button:hover { background: var(--brand-red-dark); }
.dialog-actions { display: grid; grid-template-columns: 1fr 1.4fr; gap: 10px; margin-top: 12px; }
.history-dialog .dialog-actions { grid-template-columns: 1fr; }
.users-dialog { max-height: min(820px, calc(100vh - 28px)); }
.users-dialog form { max-height: min(820px, calc(100vh - 28px)); overflow-y: auto; }
.my-account-dialog form { max-height: calc(100vh - 28px); overflow-y: auto; }
.users-dialog h3 { margin: 0 0 6px; color: var(--ink); }
.users-list { display: grid; gap: 8px; }
.users-pagination-bar {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 12px;
}
.users-pagination-bar label { margin: 0; color: var(--muted); font-size: 12px; }
.users-pagination-bar select { width: auto; min-width: 72px; min-height: 38px; }
.users-pagination {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 9px;
  margin-top: 9px;
}
.users-pagination > button,
.users-pagination .history-page-buttons button {
  min-height: 40px;
  border: 1px solid var(--line);
  background: #fff;
  color: var(--brand-blue);
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
}
.users-pagination button:hover:not(:disabled) { border-color: var(--brand-blue); background: var(--brand-blue-soft); }
.users-pagination button:disabled { opacity: .4; cursor: default; }
.users-pagination > span { grid-column: 1 / -1; color: var(--muted); font-size: 12px; text-align: center; }
.user-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid var(--line);
}
.user-row strong, .user-row small { display: block; }
.user-row small { margin-top: 2px; color: var(--muted); }
.user-row small.temporary-password-pending { color: var(--warning); font-weight: 700; }
.user-actions { display: flex; align-items: center; gap: 9px; }
.role-badge {
  padding: 5px 8px;
  background: var(--brand-blue-soft);
  color: var(--brand-blue);
  font-size: 9px;
  font-weight: 800;
  text-transform: uppercase;
}
.role-badge.inactive { background: #f0f1f3; color: var(--muted); }
.text-action {
  border: 0;
  border-bottom: 2px solid var(--brand-blue);
  background: transparent;
  color: var(--brand-blue);
  padding: 5px 0;
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
}
.text-action:disabled { opacity: .38; cursor: not-allowed; }
.text-action.danger-text { color: var(--brand-red); border-bottom-color: var(--brand-red); }
.permissions-panel {
  margin: 16px 0 5px;
  padding: 14px;
  border: 1px solid var(--line);
  background: var(--surface);
}
.permissions-panel legend { padding: 0 6px; color: var(--ink); font-size: 12px; font-weight: 800; text-transform: uppercase; }
.permissions-help, .admin-permissions-note { margin: 0 0 12px; color: var(--muted); font-size: 12px; line-height: 1.45; }
.admin-permissions-note { margin: 10px 0 0; color: var(--brand-blue); font-weight: 700; }
.permissions-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 14px; }
.permissions-grid label { display: flex; align-items: flex-start; gap: 8px; margin: 0; color: var(--text); font-size: 12px; font-weight: 600; line-height: 1.35; }
.permissions-grid input { width: 16px; min-height: 16px; margin: 0; accent-color: var(--brand-blue); }
.permissions-grid input:disabled { opacity: .6; }
.management-dialog { width: min(760px, calc(100% - 28px)); max-height: min(860px, calc(100vh - 28px)); }
.management-dialog .dialog-body { max-height: min(860px, calc(100vh - 28px)); overflow-y: auto; }
.dialog-help { margin: -3px 0 18px; color: var(--muted); font-size: 13px; line-height: 1.5; }
.field-help { margin: 6px 0 0; color: var(--muted); font-size: 12px; line-height: 1.45; }
.management-list, .audit-list { display: grid; gap: 8px; }
.management-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 12px;
  border: 1px solid var(--line);
  background: #fff;
}
.management-main { min-width: 0; flex: 1; }
.management-main strong, .management-main small { display: block; }
.management-main small { margin-top: 4px; color: var(--muted); }
.management-main input { width: 100%; min-height: 42px; }
.dictionary-section + .dictionary-section { margin-top: 28px; padding-top: 24px; border-top: 1px solid var(--line); }
.dictionary-heading { margin-bottom: 13px; }
.dictionary-heading h3 { margin: 5px 0 0; color: var(--ink); font-size: 18px; }
.dictionary-main { display: grid; gap: 6px; }
.dictionary-main select { min-height: 38px; font-size: 12px; }
.dictionary-reason-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 210px auto;
  grid-template-areas:
    "name-label context-label empty"
    "name-input context-select submit"
    "error error error";
  align-items: end;
  gap: 9px;
}
.dictionary-reason-form > label { margin: 0; }
.dictionary-reason-form > label:first-child { grid-area: name-label; }
.dictionary-reason-form > label:nth-of-type(2) { grid-area: context-label; }
.dictionary-reason-form > input { grid-area: name-input; }
.dictionary-reason-form > select { grid-area: context-select; }
.dictionary-reason-form > button { grid-area: submit; }
.dictionary-reason-form > .form-error { grid-area: error; }
.dictionary-pagination {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 10px;
  margin-top: 12px;
}
.dictionary-pagination button {
  min-height: 38px;
  border: 1px solid var(--line);
  background: #fff;
  color: var(--brand-blue);
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
}
.dictionary-pagination button:hover:not(:disabled) { border-color: var(--brand-blue); background: var(--brand-blue-soft); }
.dictionary-pagination button:disabled { opacity: .4; cursor: default; }
.dictionary-pagination span { min-width: 110px; color: var(--muted); font-size: 12px; text-align: center; }
.compact-empty { padding: 18px; }
.category-row input[readonly] { background: #f1f4f8; color: var(--muted); cursor: not-allowed; }
.management-actions { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 9px; }
.inline-create-form { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--line); }
.inline-create-form > div { display: grid; grid-template-columns: 1fr auto; gap: 9px; }
.inline-create-form .form-error { margin-bottom: 0; }
.dialog-actions.single-action { grid-template-columns: 1fr; }
.audit-toolbar { display: flex; align-items: center; justify-content: flex-end; gap: 9px; margin-bottom: 14px; }
.audit-toolbar label { margin: 0; }
.audit-toolbar select { width: auto; min-width: 84px; }
.audit-row { padding: 13px 14px; border-left: 4px solid var(--brand-blue); background: var(--surface); }
.audit-row strong, .audit-row small { display: block; }
.audit-row strong { color: var(--ink); font-size: 14px; line-height: 1.4; }
.audit-row small { margin-top: 5px; color: var(--muted); }
.backup-section {
  margin-top: 12px;
  padding: 19px;
  border: 1px solid var(--line);
  background: var(--surface);
}
.backup-section-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}
.backup-section h3 { margin: 6px 0 5px; color: var(--ink); font-size: 18px; }
.backup-section p { margin: 4px 0 0; color: var(--muted); font-size: 13px; line-height: 1.5; }
.backup-export-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin-top: 15px; }
.cron-backup-setup { margin-top: 15px; padding: 15px; border-left: 4px solid var(--brand-blue); background: #eef3fb; }
.cron-backup-setup > div:first-child { margin-bottom: 11px; }
.cron-backup-setup strong { color: var(--ink); font-size: 14px; }
.cron-backup-setup > .secondary-button { width: 100%; }
.cron-path-result { margin-top: 12px; }
.cron-path-result input { font-family: Consolas, "Courier New", monospace; font-size: 12px; }
.cron-path-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 8px; }
.cron-run-status { display: grid; gap: 4px; margin-top: 12px; padding: 12px 14px; border: 1px solid var(--line); border-left: 4px solid #a1a8b3; background: #f7f8fa; }
.cron-run-status strong { color: var(--ink); font-size: 13px; }
.cron-run-status span, .cron-run-status small { color: var(--muted); font-size: 12px; line-height: 1.45; }
.cron-run-status.success { border-left-color: #55a536; background: #f3faef; }
.cron-run-status.error { border-left-color: var(--brand-red); background: #fff5f5; }
.cron-run-status.error strong { color: var(--brand-red); }
.server-backup-toolbar { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 14px; margin-top: 15px; padding: 10px 12px; border: 1px solid var(--line); background: #f7f8fa; }
.server-backup-select-all { display: flex; align-items: center; gap: 8px; margin: 0; color: var(--ink); font-size: 12px; font-weight: 700; }
.server-backup-select-all input, .server-backup-checkbox { width: 17px; min-height: 17px; margin: 0; accent-color: var(--brand-blue); }
.server-backup-toolbar > span { color: var(--muted); font-size: 12px; }
.server-backup-toolbar .danger-button { min-height: 38px; padding: 8px 13px; }
.server-backup-list { display: grid; gap: 8px; margin-top: 15px; }
.server-backup-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  padding: 11px 12px;
  border: 1px solid var(--line);
  background: #fff;
}
.server-backup-row.selected { border-color: #aebfe3; background: #f5f8ff; }
.server-backup-main { min-width: 0; }
.server-backup-main strong, .server-backup-main small { display: block; }
.server-backup-main strong { overflow: hidden; color: var(--ink); font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.server-backup-main small { margin-top: 5px; color: var(--muted); }
.server-backup-type { display: inline-block; margin-right: 6px; padding: 2px 5px; background: #eef2fb; color: var(--brand-blue); font-size: 8px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
.server-backup-type.monthly { background: #e9f6e3; color: #397126; }
.server-backup-type.manual { background: #f1f1f1; color: #5f6369; }
.server-backup-actions { display: flex; flex: none; align-items: center; gap: 14px; }
.server-backup-actions .text-action { flex: none; }
.server-backup-pagination {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 10px;
  margin-top: 12px;
}
.server-backup-pagination button {
  min-height: 40px;
  border: 1px solid var(--line);
  background: #fff;
  color: var(--brand-blue);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.server-backup-pagination button:hover:not(:disabled) { border-color: var(--brand-blue); background: var(--brand-blue-soft); }
.server-backup-pagination button:disabled { opacity: .4; cursor: default; }
.server-backup-pagination span { min-width: 90px; color: var(--muted); font-size: 12px; text-align: center; }
.backup-restore { border-left: 5px solid var(--brand-red); background: #fff8f8; }
.backup-restore label { display: block; }
.backup-restore .danger-button { width: 100%; margin-top: 14px; }
.backup-restore .file-info { min-height: 18px; margin: 6px 0 2px; color: var(--brand-blue); }
.reset-warning { margin-bottom: 18px; padding: 14px 15px; border-left: 5px solid var(--brand-red); background: #fff3f3; }
.reset-warning strong { color: var(--brand-red); }
.reset-warning p { margin: 6px 0 0; color: var(--text); font-size: 13px; line-height: 1.5; }
.reset-option { display: flex; align-items: flex-start; gap: 10px; margin: 16px 0 20px; font-size: 13px; line-height: 1.45; }
.reset-option input { width: auto; min-height: 0; margin: 3px 0 0; accent-color: var(--brand-red); }
.form-divider { height: 1px; margin: 23px 0; background: var(--line); }
.toast {
  position: fixed;
  z-index: 20;
  left: 50%;
  bottom: 24px;
  transform: translate(-50%, 130%);
  opacity: 0;
  min-width: min(440px, calc(100% - 32px));
  padding: 14px 17px;
  border-left: 5px solid var(--brand-red);
  background: var(--brand-blue);
  color: #fff;
  text-align: center;
  box-shadow: var(--shadow);
  transition: .25s ease;
}
.toast.show { transform: translate(-50%, 0); opacity: 1; }
.toast.error { background: #8d252b; }

@media (max-width: 980px) {
  .brand-divider, .app-name { display: none; }
}

@media (max-width: 820px) {
  .request-row { grid-template-columns: 1fr 1fr; }
  .request-row .request-item { grid-column: 1 / -1; }
  .request-row-actions { justify-self: end; }
  .order-row-actions { grid-template-columns: repeat(3, auto); }
  .request-history-row { grid-template-columns: 1fr 1fr; }
  .request-history-flow { grid-column: 1 / -1; }
  .history-row { grid-template-columns: 1fr auto; }
  .history-row .source-badge, .history-row .history-meta { display: none; }
  .stocktake-row { grid-template-columns: 1fr 1fr; }
  .stocktake-item { grid-column: 1 / -1; }
  .stocktake-report-row { grid-template-columns: 1fr 1fr; }
  .stocktake-report-item { grid-column: 1 / -1; }
  .dialog.stocktake-report-dialog { width: calc(100vw - 20px); height: calc(100vh - 20px); }
  .stocktake-report-dialog .dialog-body { padding: 24px; }
}

@media (max-width: 560px) {
  /*
   * Mobile dialogs use one scroll surface. Nested scrolling (dialog -> form/body
   * -> list) is unreliable on touch devices and can hand the gesture to the
   * page behind the modal, especially after the on-screen keyboard opens.
   */
  html:has(.dialog[open]),
  body:has(.dialog[open]) {
    overflow: hidden;
    overscroll-behavior: none;
  }
  .dialog {
    width: calc(100vw - 16px);
    max-width: calc(100vw - 16px);
    max-height: calc(100vh - 16px);
    max-height: calc(100dvh - 16px);
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-y;
  }
  .dialog > form,
  .dialog > .dialog-body,
  .recovery-dialog form,
  .multi-request-dialog form,
  .request-details-dialog .dialog-body,
  .request-reopen-conflict-dialog .dialog-body,
  .issue-dialog form,
  .history-dialog .dialog-body,
  .system-status-dialog .dialog-body,
  #addItemDialog form,
  #editItemDialog form,
  #addDrumDialog form,
  .users-dialog form,
  .my-account-dialog form,
  .management-dialog .dialog-body,
  .stocktake-report-dialog .dialog-body {
    height: auto;
    max-height: none;
    overflow: visible;
    overscroll-behavior: auto;
    -webkit-overflow-scrolling: auto;
  }
  .dialog.stocktake-report-dialog {
    height: auto;
    max-height: calc(100vh - 16px);
    max-height: calc(100dvh - 16px);
  }
  .multi-request-items,
  .movement-edit-items,
  .drum-return-items,
  .drum-return-numbers {
    max-height: none;
    overflow: visible;
  }
  .topbar { min-height: 76px; padding: 8px 14px; border-bottom-width: 3px; }
  .brand-logo { width: 165px; }
  .brand-divider, .app-name { display: none; }
  .connection-pill { display: none; }
  .topbar-actions { gap: 7px; }
  .account-button, .icon-button { padding: 8px 10px; font-size: 10px; }
  .login-view { min-height: calc(100vh - 76px); padding: 30px 15px; }
  .login-panel { padding: 29px 22px 21px; }
  .dashboard { width: calc(100% - 24px); padding: 30px 0 52px; }
  .dashboard-heading { align-items: stretch; flex-direction: column; margin-bottom: 20px; padding: 20px; }
  .heading-actions { display: grid; grid-template-columns: 1fr 1fr; }
  .dashboard-tabs {
    overflow-x: auto;
    margin-bottom: 26px;
    overscroll-behavior-inline: contain;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-x;
  }
  .dashboard-tab { flex: 1 0 auto; min-width: 120px; padding-inline: 10px; }
  .settings-grid { grid-template-columns: 1fr; }
  .settings-card-wide { grid-column: auto; }
  .settings-card { min-height: 0; padding: 20px; }
  .excel-integration-status { grid-template-columns: 1fr; }
  .excel-status-badge { justify-self: start; }
  .copy-field-row { grid-template-columns: 1fr; }
  .copy-field-row .secondary-button { width: 100%; }
  .dialog.system-status-dialog { width: calc(100vw - 20px); }
  .system-status-checks { grid-template-columns: 1fr; }
  .system-status-stats { grid-template-columns: repeat(2, 1fr); }
  .system-status-check small { white-space: normal; }
  .advanced-settings-body { align-items: stretch; flex-direction: column; }
  .advanced-settings .danger-button { width: 100%; }
  .backup-section-heading { align-items: stretch; flex-direction: column; }
  .backup-export-actions { grid-template-columns: 1fr; }
  .cron-path-actions { grid-template-columns: 1fr; }
  .server-backup-toolbar { grid-template-columns: 1fr auto; }
  .server-backup-toolbar > span { grid-column: 1 / -1; grid-row: 2; }
  .server-backup-row { align-items: flex-start; }
  .inventory-filters { display: grid; grid-template-columns: 1fr 1fr; width: 100%; box-sizing: border-box; }
  .stock-heading-actions { gap: 13px; }
  .inventory-filter { min-width: 0; padding-inline: 8px; }
  .inventory-request-tools { min-height: 34px; }
  .multi-request-selection-bar { align-items: stretch; flex-direction: column; }
  .multi-request-selection-bar > div { display: grid; grid-template-columns: .75fr 1.25fr; }
  .multi-request-selection-bar button { width: 100%; }
  .inventory-grid { grid-template-columns: 1fr; gap: 10px; }
  .stock-card { min-height: 176px; padding: 17px 18px 14px; }
  .stock-card-quick-receipt { min-height: 20px; font-size: 10px; }
  .stock-card-quick-receipt::before { font-size: 14px; }
  .stock-card h3 { min-height: 0; margin: 8px 42px 15px 0; font-size: 16px; }
  .stock-card-drum-link { margin: -5px 0 14px; }
  .stock-card-title-with-photo { gap: 12px; margin: 12px 0 16px; }
  .stock-value strong { font-size: 31px; }
  .stock-card-activity { margin-top: 11px; }
  .stock-card-footer { align-items: center; flex-direction: row; gap: 10px; padding-top: 11px; }
  .stock-card-actions { justify-content: flex-end; }
  .request-row { grid-template-columns: 1fr; gap: 12px; padding: 15px; }
  .request-row .request-item { grid-column: auto; }
  .request-row-actions { width: 100%; justify-self: stretch; }
  .order-row-actions { grid-template-columns: 1fr; }
  .request-complete-button { width: 100%; justify-self: stretch; }
  .request-history-row { grid-template-columns: 1fr; gap: 13px; padding-top: 40px; }
  .request-history-flow { grid-column: auto; }
  .request-history-actions { gap: 12px; }
  .multi-request-item { grid-template-columns: 1fr; gap: 11px; }
  .request-details-item { grid-template-columns: minmax(0, 1fr) auto; gap: 10px; }
  .request-details-item .request-line-check { grid-column: 1 / -1; justify-self: start; }
  .request-details-grid { grid-template-columns: 1fr; }
  .purchase-order-dates { grid-template-columns: 1fr; }
  .request-reopen-conflict-item { grid-template-columns: 1fr 1fr 1fr; gap: 10px; }
  .request-reopen-conflict-name { grid-column: 1 / -1; }
  .request-reopen-conflict-value { text-align: left; }
  .request-reopen-choice-note { grid-template-columns: 1fr; gap: 4px; }
  .dialog-actions.request-reopen-actions { grid-template-columns: 1fr; }
  .requests-history-pagination { flex-wrap: wrap; gap: 8px; }
  .requests-history-page-summary { margin-left: 0; }
  .stocktake-heading { align-items: stretch; flex-direction: column; }
  .stocktake-heading .heading-actions, .stocktake-heading .heading-actions button { width: 100%; }
  .stocktake-request-row { grid-template-columns: 1fr; gap: 13px; }
  .stocktake-request-actions { justify-content: space-between; }
  .stocktake-request-actions .primary-button { flex: 1; }
  .stocktake-overview { grid-template-columns: 1fr; align-items: start; padding: 19px; }
  .stocktake-progress { text-align: left; }
  .stocktake-progress-bar { grid-column: auto; }
  .stocktake-toolbar { align-items: stretch; flex-direction: column; }
  .stocktake-toolbar-actions { align-items: stretch; flex-direction: column; }
  .stocktake-toolbar label { justify-content: space-between; }
  .stocktake-toolbar select { flex: 1; }
  .stocktake-add-item-button { width: 100%; }
  .stocktake-row { grid-template-columns: 1fr; gap: 11px; }
  .stocktake-item { grid-column: auto; }
  .stocktake-result { padding: 9px 0; border-top: 1px solid var(--line); }
  .stocktake-admin-actions { grid-template-columns: 1fr; }
  .stocktake-admin-actions.worker-cancel-only, .stocktake-admin-actions.worker-cancel-only .secondary-button { width: 100%; }
  .stocktake-history-row { align-items: flex-start; flex-direction: column; }
  .stocktake-history-summary { justify-items: start; text-align: left; }
  .stocktake-report-summary { grid-template-columns: repeat(2, 1fr); }
  .stocktake-report-toolbar { align-items: stretch; flex-direction: column; }
  .stocktake-report-toolbar label { justify-content: space-between; }
  .stocktake-report-toolbar select { flex: 1; }
  .stocktake-report-row { grid-template-columns: 1fr; gap: 10px; }
  .stocktake-report-item { grid-column: auto; }
  .stocktake-report-change { padding-top: 9px; border-top: 1px solid var(--line); }
  .stocktake-report-dialog .dialog-body { padding: 20px; }
  .item-photo-editor-heading { align-items: flex-start; flex-direction: column; gap: 3px; }
  .item-photo-picker { gap: 12px; padding: 12px; }
  .history-row { padding: 14px; }
  .history-row { padding-right: 34px; }
  .history-pagination { flex-wrap: wrap; justify-content: center; }
  .history-pagination > button { flex: 1; }
  .history-page-buttons { order: 3; width: 100%; justify-content: center; }
  .history-page-summary { order: 4; width: 100%; margin-left: 0; text-align: center; }
  .history-details { grid-template-columns: 1fr; }
  .history-details .detail-wide { grid-column: auto; }
  .history-detail-item { align-items: flex-start; flex-direction: column; gap: 4px; }
  .history-edit-action { align-items: stretch; flex-direction: column; }
  .history-edit-action button { width: 100%; }
  .user-row { align-items: flex-start; }
  .user-actions { align-items: flex-end; flex-direction: column; }
  .permissions-grid { grid-template-columns: 1fr; }
  .password-generator-row { grid-template-columns: 1fr; }
  .users-pagination { grid-template-columns: 1fr 1fr; }
  .users-pagination .history-page-buttons { grid-column: 1 / -1; grid-row: 2; }
  .users-pagination > span { grid-row: 3; }
  .management-row { align-items: stretch; flex-direction: column; }
  .management-actions { justify-content: flex-start; }
  .edit-item-tools { align-items: stretch; flex-direction: column; }
  .edit-item-primary-grid { grid-template-columns: 1fr; }
  .edit-item-field-wide { grid-column: auto; }
  .edit-item-correction-fields { grid-template-columns: 1fr; }
  .edit-item-correction-fields .primary-button,
  .edit-item-correction-fields .form-error { grid-column: auto; }
  .edit-item-section > summary { grid-template-columns: minmax(0, 1fr) auto; padding-block: 10px; }
  .edit-item-section > summary small { grid-column: 1 / -1; grid-row: 2; text-align: left; }
  .edit-item-section > summary::after { grid-column: 2; grid-row: 1; }
  .movement-edit-row { grid-template-columns: 1fr; gap: 10px; }
  .item-activity-section { padding: 14px; }
  .inline-create-form > div { grid-template-columns: 1fr; }
  .dictionary-reason-form {
    grid-template-columns: 1fr;
    grid-template-areas: "name-label" "name-input" "context-label" "context-select" "submit" "error";
  }
  .dialog-body { padding: 21px; }
  .dialog form { padding: 21px; }
}

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