:root {
  color-scheme: light;
  --bg: #f6f3ee;
  --surface: #ffffff;
  --surface-2: #ece6dc;
  --ink: #1f2933;
  --muted: #667085;
  --line: #d8d2c8;
  --green: #315c48;
  --green-2: #dfe9e3;
  --clay: #c26b3a;
  --blue: #4f7aa3;
  --gold: #b99b4f;
  --danger: #b42318;
  --danger-bg: #fee4e2;
  --ok-bg: #dcfce7;
  --shadow: 0 14px 30px rgba(31, 41, 51, 0.12);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* {
  box-sizing: border-box;
}

[hidden] {
  display: none !important;
}

html {
  min-height: 100%;
  background: var(--bg);
}

body {
  min-height: 100%;
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  overflow-x: hidden;
}

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

button {
  cursor: pointer;
}

.app-shell {
  min-height: 100vh;
  max-width: 980px;
  margin: 0 auto;
  padding: env(safe-area-inset-top) 14px calc(86px + env(safe-area-inset-bottom));
}

.topbar {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 16px 0 12px;
  background: color-mix(in srgb, var(--bg) 92%, transparent);
  backdrop-filter: blur(16px);
}

.eyebrow {
  margin: 0 0 2px;
  color: var(--green);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0;
  text-transform: uppercase;
}

h1,
h2,
p {
  margin: 0;
}

h1 {
  font-size: 24px;
  line-height: 1.1;
}

h2 {
  font-size: 16px;
  line-height: 1.2;
}

.top-actions,
.actions-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.topbar > div:first-child {
  min-width: 0;
}

.top-actions {
  flex: 0 0 auto;
}

.icon-button {
  display: inline-grid;
  width: 42px;
  height: 42px;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  color: var(--ink);
  box-shadow: 0 2px 8px rgba(31, 41, 51, 0.06);
}

.icon-button span {
  font-size: 20px;
  line-height: 1;
}

.file-button input {
  display: none;
}

main {
  display: block;
}

.screen {
  display: none;
}

.screen.is-active {
  display: block;
}

.kpi-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.kpi {
  appearance: none;
  display: block;
  min-height: 96px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  box-shadow: 0 8px 22px rgba(31, 41, 51, 0.08);
  text-align: left;
  cursor: pointer;
  transition: border-color 0.16s ease, transform 0.16s ease, box-shadow 0.16s ease;
}

.kpi.is-active {
  border-color: var(--green);
  box-shadow: 0 10px 24px rgba(49, 92, 72, 0.18);
  transform: translateY(-1px);
}

.kpi span {
  display: block;
  min-height: 36px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.25;
}

.kpi strong {
  display: block;
  margin-top: 10px;
  color: var(--green);
  font-size: 24px;
  line-height: 1;
}

.dashboard-detail {
  margin-top: 12px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  box-shadow: 0 8px 22px rgba(31, 41, 51, 0.08);
}

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

.dashboard-card-list.two-col {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.dashboard-photo-card {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  overflow: hidden;
}

.dashboard-card-main {
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  width: 100%;
  border: 0;
  padding: 8px;
  background: transparent;
  color: inherit;
  text-align: left;
}

.dashboard-card-main .pill + .pill {
  margin-left: -4px;
}

.dashboard-thumb {
  display: block;
  overflow: hidden;
  width: 58px;
  height: 58px;
  border-radius: 8px;
  background: var(--green-2);
}

.dashboard-thumb img,
.dashboard-thumb .photo-placeholder {
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
  object-fit: cover;
  font-size: 18px;
}

.dashboard-card-text {
  display: grid;
  gap: 3px;
}

.dashboard-card-text strong {
  line-height: 1.15;
}

.dashboard-card-text span {
  color: var(--muted);
  font-size: 12px;
}

.dashboard-card-pills {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 5px;
}

.dashboard-drill {
  padding: 0 8px 8px 76px;
}

.dashboard-subsection {
  display: grid;
  gap: 8px;
}

.order-drill-list {
  display: grid;
  gap: 8px;
}

.order-drill-row {
  display: grid;
  gap: 8px;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
}

.order-qty-editor {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 8px;
}

.order-qty-editor label {
  display: grid;
  grid-template-columns: auto minmax(80px, 1fr) auto;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 800;
  color: var(--muted);
}

.order-qty-editor input {
  width: 100%;
  min-height: 34px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 6px 8px;
  font: inherit;
  font-weight: 800;
  color: var(--ink);
  background: #fff;
}

.secondary-button.compact {
  min-height: 34px;
  padding: 6px 10px;
}

.dashboard-card-list.two-col .order-qty-editor {
  grid-template-columns: 1fr;
}

.dashboard-card-list.two-col .order-qty-editor label {
  grid-template-columns: 1fr;
  align-items: stretch;
}

.production-tile {
  width: 100%;
}

.capacity-card {
  margin-top: 10px;
}

.capacity-bar {
  overflow: hidden;
  height: 10px;
  border-radius: 999px;
  background: var(--surface-2);
}

.capacity-bar span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--green);
}

.section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 22px 0 10px;
}

.section-head span {
  color: var(--muted);
  font-size: 13px;
  white-space: nowrap;
}

.text-button {
  border: 0;
  background: transparent;
  color: var(--green);
  font-weight: 800;
}

.bars {
  display: grid;
  gap: 8px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
}

.bar-row {
  display: grid;
  grid-template-columns: minmax(112px, 160px) 1fr 54px;
  align-items: center;
  gap: 10px;
  min-height: 30px;
  color: var(--muted);
  font-size: 13px;
}

.bar-track {
  overflow: hidden;
  height: 9px;
  border-radius: 999px;
  background: var(--surface-2);
}

.bar-fill {
  width: 0%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--green), var(--blue));
}

.activity-list,
.record-list {
  display: grid;
  gap: 10px;
}

.empty-state {
  padding: 18px;
  border: 1px dashed var(--line);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.55);
  color: var(--muted);
  text-align: center;
}

.entry-form {
  display: grid;
  gap: 12px;
  margin-bottom: 16px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  box-shadow: var(--shadow);
}

.form-grid {
  display: grid;
  gap: 10px;
}

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

label {
  display: grid;
  gap: 6px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

input,
select,
textarea {
  width: 100%;
  min-height: 42px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  color: var(--ink);
  padding: 9px 10px;
  outline: none;
}

input:focus,
select:focus,
textarea:focus {
  border-color: var(--green);
  box-shadow: 0 0 0 3px var(--green-2);
}

textarea {
  resize: vertical;
}

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

.check-line {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 42px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  color: var(--ink);
}

.check-line input {
  width: 18px;
  min-height: 18px;
}

.movement-lines {
  display: grid;
  gap: 10px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(236, 230, 220, 0.45);
}

.movement-items {
  display: grid;
  gap: 8px;
}

.movement-line {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 0.8fr) minmax(88px, 0.7fr) 42px;
  align-items: end;
  gap: 8px;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}

.movement-line .material-line-field {
  grid-column: span 2;
}

.recipe-line {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(90px, 0.7fr) minmax(76px, 0.5fr) 42px;
  align-items: end;
  gap: 8px;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}

.line-remove {
  width: 42px;
  height: 42px;
}

.primary-button,
.secondary-button,
.danger-button {
  min-height: 44px;
  border-radius: 8px;
  padding: 10px 14px;
  font-weight: 800;
}

.primary-button {
  border: 0;
  background: var(--green);
  color: #fff;
}

.secondary-button {
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--green);
}

.secondary-button.compact {
  min-height: 34px;
  padding: 7px 10px;
  font-size: 12px;
}

.danger-button {
  border: 1px solid #fda29b;
  background: var(--danger-bg);
  color: var(--danger);
}

.toolbar {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
  margin: 12px 0;
}

.record {
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
}

.record-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

.record-title {
  display: grid;
  gap: 3px;
}

.record-title strong {
  line-height: 1.2;
}

.record-title span {
  color: var(--muted);
  font-size: 13px;
}

.record-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.pill,
.chip {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  border-radius: 999px;
  padding: 4px 9px;
  background: var(--surface-2);
  color: var(--ink);
  font-size: 12px;
  font-weight: 700;
}

.pill.ok {
  background: var(--ok-bg);
  color: #166534;
}

.pill.warn {
  background: #fef3c7;
  color: #92400e;
}

.delete-button {
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  border: 1px solid #fda29b;
  border-radius: 8px;
  background: var(--danger-bg);
  color: var(--danger);
  font-size: 18px;
}

.segmented {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 4px;
  margin-bottom: 12px;
  padding: 4px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-2);
}

.segmented button {
  min-height: 38px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--muted);
  font-weight: 800;
}

.segmented button.is-active {
  background: var(--surface);
  color: var(--green);
  box-shadow: 0 2px 8px rgba(31, 41, 51, 0.08);
}

.stock-panel {
  display: none;
}

.stock-panel.is-active {
  display: block;
}

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.editable-chip {
  gap: 6px;
}

.editable-chip button {
  min-height: 22px;
  border: 0;
  border-radius: 6px;
  background: rgba(49, 92, 72, 0.12);
  color: var(--green);
  font-size: 11px;
  font-weight: 900;
}

.catalog-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.catalog-card,
.stock-card {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  box-shadow: 0 8px 22px rgba(31, 41, 51, 0.08);
}

.photo-button,
.stock-card {
  width: 100%;
  border: 0;
  padding: 0;
  background: transparent;
  color: inherit;
  text-align: left;
}

.photo-button img,
.photo-placeholder,
.stock-card > img,
.stock-card > .photo-placeholder {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  background: var(--green-2);
}

.photo-placeholder {
  display: grid;
  place-items: center;
  color: var(--green);
  font-size: 30px;
  font-weight: 900;
}

.catalog-body,
.stock-card > div {
  display: grid;
  gap: 7px;
  padding: 10px;
}

.catalog-body strong,
.stock-card strong {
  font-size: 15px;
  line-height: 1.15;
}

.catalog-body span,
.stock-card span,
.catalog-body p {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.3;
}

.size-row {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.size-row span {
  display: inline-grid;
  min-width: 30px;
  min-height: 26px;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--surface-2);
  color: var(--ink);
  font-weight: 800;
}

.stock-card {
  display: grid;
  cursor: pointer;
}

.fab {
  position: fixed;
  right: 18px;
  bottom: calc(92px + env(safe-area-inset-bottom));
  z-index: 19;
  display: grid;
  width: 58px;
  height: 58px;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: var(--green);
  color: #fff;
  font-size: 32px;
  box-shadow: var(--shadow);
}

.slide-panel {
  position: fixed;
  right: 12px;
  bottom: calc(88px + env(safe-area-inset-bottom));
  left: 12px;
  z-index: 29;
  width: min(720px, calc(100vw - 24px));
  max-height: calc(100vh - 128px);
  margin: 0 auto;
  overflow: auto;
  box-shadow: 0 20px 48px rgba(31, 41, 51, 0.22);
}

.section-head.inside {
  margin: 0;
}

.settings-panel {
  display: none;
}

.settings-panel.is-active {
  display: block;
}

.record.mini {
  padding: 10px;
}

.record-list.compact {
  gap: 8px;
}

.actions-row.wrap {
  flex-wrap: wrap;
}

.bottom-nav {
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 20;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  max-width: 980px;
  margin: 0 auto;
  padding: 7px 8px calc(7px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(18px);
}

.bottom-nav button {
  display: grid;
  place-items: center;
  gap: 2px;
  min-height: 54px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
}

.bottom-nav span {
  font-size: 18px;
  line-height: 1;
}

.bottom-nav button.is-active {
  background: var(--green-2);
  color: var(--green);
}

.toast {
  position: fixed;
  right: 16px;
  bottom: calc(88px + env(safe-area-inset-bottom));
  left: 16px;
  z-index: 30;
  display: none;
  max-width: 520px;
  margin: 0 auto;
  padding: 12px 14px;
  border-radius: 8px;
  background: var(--ink);
  color: #fff;
  box-shadow: var(--shadow);
}

.toast.is-visible {
  display: block;
}

.auth-screen {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgba(246, 243, 238, 0.92);
  backdrop-filter: blur(18px);
}

.auth-card {
  display: grid;
  gap: 12px;
  width: min(420px, 100%);
  padding: 20px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  box-shadow: var(--shadow);
}

.auth-card h2,
.auth-card p {
  margin: 0;
}

.auth-card p {
  color: var(--muted);
  line-height: 1.35;
}

@media (max-width: 520px) {
  .app-shell {
    padding-right: 10px;
    padding-left: 10px;
  }

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

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

  .dashboard-card-list.two-col {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .dashboard-card-main {
    grid-template-columns: 1fr;
    align-items: start;
  }

  .dashboard-thumb {
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
  }

  .dashboard-drill {
    padding-left: 8px;
  }

  .bar-row {
    grid-template-columns: minmax(92px, 120px) 1fr 44px;
  }

  .movement-line {
    grid-template-columns: minmax(0, 1fr) minmax(84px, 0.8fr) 42px;
  }

  .recipe-line {
    grid-template-columns: minmax(0, 1fr) minmax(84px, 0.8fr) 42px;
  }

  .movement-line .product-line-field:first-child,
  .movement-line .size-line-field,
  .movement-line .material-line-field,
  .movement-line .qty-line-field,
  .recipe-line .recipe-material-field {
    grid-column: span 2;
  }

  h1 {
    font-size: 22px;
  }

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

@media (min-width: 760px) {
  .kpi-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .screen[data-screen="dashboard"] {
    max-width: 940px;
  }

  .entry-form {
    padding: 16px;
  }

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

/* Access roles */
body.is-readonly .fab,
body.is-readonly .entry-form,
body.is-readonly [data-edit-product],
body.is-readonly [data-edit-material],
body.is-readonly [data-move-product],
body.is-readonly [data-move-material],
body.is-readonly [data-edit-warehouse],
body.is-readonly [data-delete-warehouse],
body.is-readonly [data-edit-supplier],
body.is-readonly [data-delete-supplier],
body.is-readonly #apiPlanButton,
body.is-readonly #resetButton,
body.is-readonly #restoreInput {
  display: none !important;
}

body.is-limited-write [data-toggle-panel="productPanel"],
body.is-limited-write [data-toggle-panel="materialPanel"],
body.is-limited-write [data-edit-product],
body.is-limited-write [data-edit-material],
body.is-limited-write [data-move-product],
body.is-limited-write [data-move-material],
body.is-limited-write [data-settings-tab="recipes"],
body.is-limited-write [data-settings-tab="tools"],
body.is-limited-write [data-settings-panel="recipes"],
body.is-limited-write [data-settings-panel="tools"],
body.is-limited-write #productPanel,
body.is-limited-write #materialPanel,
body.is-limited-write #recipeForm,
body.is-limited-write #warehouseForm,
body.is-limited-write #supplierForm,
body.is-limited-write #apiPlanButton,
body.is-limited-write #resetButton {
  display: none !important;
}

body.is-limited-write [data-delete-product],
body.is-limited-write [data-delete-material],
body.is-limited-write [data-delete-recipe],
body.is-limited-write [data-delete-recipe-group],
body.is-limited-write [data-delete-finance],
body.is-limited-write [data-refresh-audit],
body.is-limited-write [data-create-backup],
body.is-limited-write [data-refresh-backups],
body.is-limited-write [data-restore-backup],
body.is-limited-write #apiPlanButtonWb,
body.is-limited-write #financePanel,
body.is-limited-write .finance-add-fab {
  display: none !important;
}

body[data-role="production_kurtan"] [data-dashboard-production="Производство Ваагни"],
body[data-role="production_vaagni"] [data-dashboard-production="Производство Куртан"],
body[data-role="production_kurtan"] [data-wb-detail],
body[data-role="production_vaagni"] [data-wb-detail] {
  display: none !important;
}

.compact-record {
  padding: 10px 12px;
}

.audit-list {
  margin-top: 8px;
}

/* Finance + Production hub update */
.production-hub {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 12px;
}

.production-hub button {
  display: grid;
  gap: 4px;
  min-height: 92px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  color: var(--ink);
  text-align: left;
  box-shadow: 0 8px 22px rgba(31, 41, 51, 0.06);
}

.production-hub span {
  color: var(--green);
  font-size: 20px;
  line-height: 1;
}

.production-hub strong {
  font-size: 14px;
  line-height: 1.15;
}

.production-hub small {
  color: var(--muted);
  font-size: 11px;
  line-height: 1.25;
}

.main-bottom-nav {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.finance-hero {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 12px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: linear-gradient(135deg, #ffffff, #efe6dc);
  box-shadow: var(--shadow);
}

.finance-hero h2 {
  margin-bottom: 6px;
  font-size: 22px;
}

.finance-hero p:not(.eyebrow) {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
}

.month-picker {
  min-width: 158px;
}

.finance-kpi-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 12px;
}

.finance-kpi {
  min-height: 82px;
  cursor: default;
}

.finance-kpi.danger strong {
  color: var(--danger);
}

.finance-layout {
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  gap: 12px;
  margin-bottom: 12px;
}

.finance-card {
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  box-shadow: var(--shadow);
}

.finance-week-chart {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  height: 158px;
  padding: 8px 2px 0;
}

.finance-week {
  flex: 1;
  display: grid;
  gap: 6px;
  min-width: 0;
  text-align: center;
}

.finance-week-bars {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 4px;
  height: 132px;
}

.finance-week i {
  display: block;
  width: 15px;
  min-height: 8px;
  border-radius: 8px 8px 3px 3px;
}

.finance-week i.income,
.bar-fill.income {
  background: linear-gradient(180deg, #4f7aa3, #9cc4e2);
}

.finance-week i.expense,
.bar-fill.expense {
  background: linear-gradient(180deg, #c26b3a, #efb088);
}

.finance-week span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
}

.finance-category-bars {
  display: grid;
  gap: 10px;
}

.finance-bar-row {
  display: grid;
  gap: 6px;
}

.finance-bar-head {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  color: var(--muted);
  font-size: 12px;
}

.finance-bar-head strong {
  color: var(--ink);
}

.finance-record .record-title strong {
  font-size: 15px;
}

@media (max-width: 720px) {
  .production-hub {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .finance-hero {
    display: grid;
  }

  .finance-kpi-grid,
  .finance-layout {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 560px) {
  .finance-kpi-grid,
  .finance-layout {
    grid-template-columns: 1fr;
  }
}

/* Mobile premium redesign: Production + Finance + WB */
:root {
  --n-bg: #f7f1ea;
  --n-card: #fffaf5;
  --n-ink: #2b2622;
  --n-muted: #887c72;
  --n-line: #e6d9cc;
  --n-accent: #b98f73;
  --n-dark: #29241f;
  --n-green: #4e7c5b;
  --n-red: #a85d55;
  --n-yellow: #c29144;
  --n-blue: #4f718d;
  --n-soft: #efe3d8;
  --n-shadow: 0 10px 24px rgba(59,43,31,.08);
}

body {
  background: linear-gradient(180deg, #fbf7f2 0%, #f1e6dc 100%);
}

.app-shell {
  max-width: 480px;
  min-height: 100dvh;
  padding: env(safe-area-inset-top) 14px calc(92px + env(safe-area-inset-bottom));
  background: linear-gradient(180deg, #fbf7f2 0%, #f1e6dc 100%);
}

.topbar {
  margin: 0 -14px 8px;
  padding: 14px 16px 12px;
  background: rgba(251,247,242,.94);
  border-bottom: 1px solid rgba(230,217,204,.76);
}

.eyebrow {
  color: var(--n-accent);
  letter-spacing: .08em;
}

h1 {
  color: var(--n-ink);
  font-size: 26px;
  letter-spacing: -.05em;
}

.icon-button {
  border-radius: 15px;
  background: var(--n-card);
  border-color: var(--n-line);
  box-shadow: 0 8px 18px rgba(59,43,31,.055);
}

.mobile-hero {
  position: relative;
  overflow: hidden;
  display: grid;
  gap: 14px;
  margin-bottom: 12px;
  padding: 17px;
  border-radius: 26px;
  color: #fff;
  box-shadow: var(--n-shadow);
}

.mobile-hero::after {
  content: "";
  position: absolute;
  width: 160px;
  height: 160px;
  right: -64px;
  top: -78px;
  border-radius: 50%;
  background: rgba(255,255,255,.09);
}

.mobile-hero > * {
  position: relative;
  z-index: 1;
}

.production-hero-new {
  background: linear-gradient(135deg, #3f6a4d, #8aa275);
}

.wb-hero-new {
  background: linear-gradient(135deg, #35546f, #8aa5bb);
}

.mobile-hero .hero-label {
  margin: 0 0 5px;
  opacity: .78;
  font-size: 12px;
  font-weight: 850;
}

.mobile-hero h2 {
  margin: 0;
  font-size: 28px;
  line-height: 1.02;
  letter-spacing: -.06em;
}

.mobile-hero p:not(.hero-label) {
  margin-top: 8px;
  max-width: 340px;
  opacity: .86;
  font-size: 13px;
  line-height: 1.35;
}

.hero-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.hero-stats span {
  padding: 10px;
  border-radius: 18px;
  background: rgba(255,255,255,.14);
}

.hero-stats strong,
.hero-stats small {
  display: block;
}

.hero-stats strong {
  font-size: 21px;
  line-height: 1;
}

.hero-stats small {
  margin-top: 5px;
  font-size: 11px;
  opacity: .8;
}

.production-hub.modern-hub {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 14px;
}

.production-hub.modern-hub button,
.kpi,
.dashboard-detail,
.finance-card,
.entry-form,
.record,
.dashboard-photo-card {
  border-radius: 22px;
  background: rgba(255,250,245,.88);
  border-color: rgba(230,217,204,.94);
  box-shadow: 0 7px 18px rgba(59,43,31,.045);
}

.production-hub.modern-hub button {
  min-height: 106px;
  padding: 13px;
}

.production-hub.modern-hub span {
  color: var(--n-accent);
  font-size: 22px;
}

.production-hub.modern-hub strong {
  color: var(--n-ink);
  font-size: 14px;
}

.production-hub.modern-hub small {
  color: var(--n-muted);
}

.production-section-title h2,
.section-head h2 {
  font-size: 15px;
  color: var(--n-ink);
}

.production-section-title span,
.section-head span {
  color: var(--n-muted);
}

.kpi-grid.production-kpis,
.kpi-grid.wb-kpis {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-bottom: 12px;
}

.kpi-grid.production-kpis .kpi:last-child,
.kpi-grid.wb-kpis .kpi:last-child {
  grid-column: 1 / -1;
}

.kpi {
  min-height: 104px;
  border-radius: 22px;
}

.kpi.is-active {
  border-color: var(--n-dark);
  box-shadow: 0 12px 24px rgba(44,38,33,.12);
  transform: translateY(-1px);
}

.kpi span {
  color: var(--n-muted);
  font-size: 12px;
}

.kpi strong {
  color: var(--n-dark);
  font-size: 22px;
  letter-spacing: -.04em;
}

.dashboard-detail.modern-detail {
  margin-top: 10px;
  padding: 13px;
}

.dashboard-card-list.two-col {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.dashboard-card-main {
  grid-template-columns: 54px minmax(0, 1fr);
  min-height: 116px;
  align-items: start;
  border-radius: 20px;
}

.dashboard-card-main > .pill,
.dashboard-card-pills {
  grid-column: 1 / -1;
  width: 100%;
  justify-content: flex-start;
}

.dashboard-thumb {
  width: 54px;
  height: 54px;
  border-radius: 16px;
  overflow: hidden;
}

.dashboard-card-text strong {
  font-size: 13px;
}

.dashboard-card-text span {
  color: var(--n-muted);
  font-size: 11px;
}

.finance-hero {
  position: relative;
  overflow: hidden;
  display: grid;
  gap: 14px;
  margin-bottom: 12px;
  padding: 17px;
  border-radius: 26px;
  color: #fff;
  background: linear-gradient(135deg, #695441, #c39455);
  box-shadow: var(--n-shadow);
}

.finance-hero::after {
  content: "";
  position: absolute;
  width: 160px;
  height: 160px;
  right: -64px;
  top: -78px;
  border-radius: 50%;
  background: rgba(255,255,255,.09);
}

.finance-hero > * {
  position: relative;
  z-index: 1;
}

.finance-hero .eyebrow {
  color: rgba(255,255,255,.78);
}

.finance-hero h2 {
  margin: 0;
  font-size: 28px;
  color: #fff;
  letter-spacing: -.06em;
}

.finance-hero p:not(.eyebrow) {
  color: rgba(255,255,255,.84);
}

.month-picker {
  display: grid;
  gap: 6px;
  color: rgba(255,255,255,.82);
  font-size: 12px;
  font-weight: 800;
}

.month-picker input {
  border: 0;
  border-radius: 16px;
  padding: 11px 12px;
  background: rgba(255,255,255,.18);
  color: #fff;
  font-weight: 850;
}

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

.finance-kpi {
  min-height: 98px;
}

.finance-kpi strong {
  color: var(--n-dark);
}

.finance-kpi.danger strong {
  color: var(--n-red);
}

.finance-layout {
  grid-template-columns: 1fr;
}

.finance-card {
  padding: 13px;
}

.finance-week-chart {
  height: 156px;
}

.finance-week i {
  width: 16px;
}

.finance-week i.income,
.bar-fill.income {
  background: linear-gradient(180deg, #4f718d, #9ebbd0);
}

.finance-week i.expense,
.bar-fill.expense {
  background: linear-gradient(180deg, #a85d55, #dfaaa5);
}

.finance-bar-head {
  color: var(--n-muted);
}

.bar-track {
  height: 9px;
  border-radius: 999px;
  background: #eee3d8;
  overflow: hidden;
}

.bar-fill {
  height: 100%;
  border-radius: inherit;
}

.wb-action-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 12px;
}

.wb-action-row .secondary-button {
  min-height: 46px;
  border-radius: 16px;
}

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

.bottom-nav {
  left: 50%;
  transform: translateX(-50%);
  width: min(480px, 100%);
  padding: 8px 10px calc(8px + env(safe-area-inset-bottom));
  height: 78px;
  background: rgba(255,250,245,.94);
  backdrop-filter: blur(16px);
  border-top: 1px solid rgba(230,217,204,.85);
}

.bottom-nav button {
  border-radius: 18px;
  font-size: 10px;
  color: var(--n-muted);
}

.bottom-nav button.is-active {
  background: var(--n-dark);
  color: #fff;
  box-shadow: 0 12px 24px rgba(44,38,33,.16);
}

.bottom-nav span {
  font-size: 18px;
}

@media (max-width: 520px) {
  .app-shell {
    padding-left: 14px;
    padding-right: 14px;
  }
  .dashboard-card-list.two-col,
  .production-hub.modern-hub,
  .finance-kpi-grid,
  .kpi-grid.production-kpis,
  .kpi-grid.wb-kpis {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .finance-layout {
    grid-template-columns: 1fr;
  }
}


/* Finance step: searchable article list + money-now rectangle */
.finance-money-panel {
  background: linear-gradient(135deg, #6b5542, #c09355);
  color: #fffaf4;
  border-radius: 26px;
  padding: 18px;
  box-shadow: var(--shadow, 0 10px 24px rgba(59,43,31,.08));
  margin-bottom: 14px;
  position: relative;
  overflow: hidden;
}
.finance-money-panel::after {
  content: "";
  position: absolute;
  width: 170px;
  height: 170px;
  border-radius: 50%;
  right: -70px;
  top: -82px;
  background: rgba(255,255,255,.10);
}
.money-panel-top {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}
.money-panel-top h2 {
  margin: 3px 0 4px;
  font-size: 28px;
  letter-spacing: -.04em;
}
.money-panel-top p:not(.eyebrow) {
  margin: 0;
  opacity: .82;
  font-size: 13px;
  line-height: 1.35;
}
.money-now-rectangle {
  position: relative;
  z-index: 1;
  margin-top: 16px;
  border-radius: 22px;
  background: rgba(255,250,244,.18);
  border: 1px solid rgba(255,255,255,.24);
  padding: 15px;
  backdrop-filter: blur(10px);
}
.money-now-rectangle span {
  display: block;
  font-size: 12px;
  opacity: .82;
  font-weight: 850;
}
.money-now-rectangle strong {
  display: block;
  font-size: 34px;
  line-height: 1.05;
  letter-spacing: -.06em;
  margin-top: 4px;
}
.money-now-rectangle small {
  display: block;
  margin-top: 7px;
  opacity: .74;
  line-height: 1.3;
}
#financeCustomArticleLabel[hidden] { display: none !important; }
@media (max-width: 720px) {
  .money-panel-top { display: block; }
  .money-panel-top .month-picker { margin-top: 12px; display: inline-grid; }
  .money-now-rectangle strong { font-size: 30px; }
}

.finance-period-controls {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: flex-end;
}

.finance-period-controls .month-picker {
  min-width: 118px;
}

.finance-period-controls .finance-date-range {
  min-width: 136px;
}

.finance-period-controls [hidden] {
  display: none !important;
}

@media (max-width: 720px) {
  .finance-period-controls {
    justify-content: stretch;
    width: 100%;
  }
  .finance-period-controls .month-picker {
    flex: 1 1 46%;
    min-width: 0;
  }
  .finance-period-controls .finance-date-range {
    flex: 1 1 46%;
  }
}
.month-picker select,
.month-picker input[type="date"] {
  border: 0;
  border-radius: 16px;
  padding: 11px 12px;
  background: rgba(255,255,255,.18);
  color: #fff;
  font-weight: 850;
  min-height: 42px;
}
.month-picker select option { color: #2b2622; }

/* Finance UI fix: fixed mobile bottom nav, currency carousel, donut expenses, plus modal */
.app-shell {
  min-height: 100dvh;
  padding-bottom: calc(112px + env(safe-area-inset-bottom)) !important;
}

main {
  padding-bottom: calc(112px + env(safe-area-inset-bottom)) !important;
}

.bottom-nav,
.main-bottom-nav {
  position: fixed !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  z-index: 999 !important;
  width: min(480px, 100%) !important;
  max-width: 480px !important;
  margin: 0 auto !important;
  transform: none !important;
  padding: 8px 10px calc(8px + env(safe-area-inset-bottom)) !important;
  height: calc(78px + env(safe-area-inset-bottom)) !important;
  background: rgba(255,250,245,.96) !important;
  border-top: 1px solid rgba(230,217,204,.9) !important;
  backdrop-filter: blur(18px) !important;
  box-shadow: 0 -14px 34px rgba(44,38,33,.1) !important;
}

.toast {
  bottom: calc(96px + env(safe-area-inset-bottom)) !important;
}

.finance-cash-carousel {
  padding: 0 !important;
  overflow: hidden;
}

.cash-slides {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.cash-slides::-webkit-scrollbar {
  display: none;
}

.cash-slide {
  flex: 0 0 100%;
  min-width: 100%;
  padding: 16px;
  scroll-snap-align: start;
}

.cash-slide span,
.money-now-rectangle span {
  display: block;
  color: rgba(255,255,255,.78);
  font-size: 12px;
  font-weight: 850;
}

.cash-slide strong,
.money-now-rectangle strong {
  display: block;
  margin-top: 5px;
  color: #fff;
  font-size: 28px;
  line-height: 1.1;
  letter-spacing: -.06em;
}

.cash-slide small,
.money-now-rectangle small {
  display: block;
  margin-top: 8px;
  color: rgba(255,255,255,.78);
  font-size: 11px;
  line-height: 1.35;
}

.cash-dots {
  position: absolute;
  right: 14px;
  bottom: 12px;
  display: flex;
  gap: 5px;
}

.cash-dots i {
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: rgba(255,255,255,.45);
}

.finance-add-fab {
  position: fixed;
  right: calc(50% - 220px);
  bottom: calc(94px + env(safe-area-inset-bottom));
  z-index: 998;
  display: grid;
  width: 58px;
  height: 58px;
  place-items: center;
  border: 0;
  border-radius: 22px;
  background: var(--n-dark, #29241f);
  color: #fff;
  font-size: 30px;
  box-shadow: 0 16px 34px rgba(44,38,33,.24);
}

@media (max-width: 480px) {
  .finance-add-fab {
    right: 16px;
  }
}

.finance-slide-panel {
  z-index: 1001 !important;
  bottom: calc(92px + env(safe-area-inset-bottom)) !important;
  border-radius: 24px !important;
  background: rgba(255,250,245,.98) !important;
}

.finance-donut-wrap {
  display: grid;
  grid-template-columns: 158px minmax(0, 1fr);
  gap: 14px;
  align-items: center;
  min-height: 178px;
}

.finance-donut {
  position: relative;
  width: 154px;
  height: 154px;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.55), 0 12px 28px rgba(59,43,31,.12);
}

.finance-donut::after {
  content: "";
  position: absolute;
  inset: 30px;
  border-radius: 50%;
  background: var(--surface, #fffaf5);
}

.finance-donut > div {
  position: absolute;
  inset: 40px;
  z-index: 1;
  display: grid;
  place-items: center;
  align-content: center;
  text-align: center;
}

.finance-donut strong {
  color: var(--n-dark, #29241f);
  font-size: 17px;
  letter-spacing: -.04em;
}

.finance-donut span {
  color: var(--n-muted, #887c72);
  font-size: 10px;
  font-weight: 850;
}

.finance-donut-side span {
  display: block;
  color: var(--n-muted, #887c72);
  font-size: 11px;
  font-weight: 850;
}

.finance-donut-side b {
  display: block;
  margin-top: 6px;
  color: var(--n-dark, #29241f);
  font-size: 16px;
}

.finance-donut-side strong {
  display: block;
  margin-top: 8px;
  color: var(--n-red, #a85d55);
  font-size: 28px;
  letter-spacing: -.06em;
}

.finance-category-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  padding: 11px 0;
  border-bottom: 1px solid rgba(230,217,204,.82);
}

.finance-category-row:last-child {
  border-bottom: 0;
}

.finance-category-row strong {
  display: block;
  color: var(--n-dark, #29241f);
  font-size: 13px;
}

.finance-category-row span {
  display: block;
  margin-top: 3px;
  color: var(--n-muted, #887c72);
  font-size: 11px;
}

.finance-category-row b {
  color: var(--n-red, #a85d55);
  font-size: 13px;
  white-space: nowrap;
}

@media (max-width: 420px) {
  .finance-donut-wrap {
    grid-template-columns: 1fr;
    justify-items: center;
  }
  .finance-donut-side {
    text-align: center;
  }
}


/* Mobile width and finance donut hotfix */
html,
body {
  width: 100% !important;
  max-width: 100% !important;
  overflow-x: hidden !important;
}

.app-shell,
main,
.screen,
.mobile-hero,
.dashboard-detail,
.record-list,
.dashboard-card-list,
.dashboard-photo-card,
.dashboard-card-main,
.dashboard-card-text,
.finance-layout,
.finance-card,
.kpi-grid,
.wb-action-row {
  max-width: 100% !important;
  min-width: 0 !important;
}

.screen,
.dashboard-detail,
.record-list {
  overflow-x: hidden !important;
}

#wbDetail .section-head.inside {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  align-items: start !important;
  gap: 4px !important;
}

#wbDetail .section-head.inside span,
.record-title span,
.dashboard-card-text strong,
.dashboard-card-text span,
.dashboard-card-main .pill,
.kpi span,
.kpi strong {
  white-space: normal !important;
  overflow-wrap: anywhere !important;
  word-break: break-word !important;
  min-width: 0 !important;
}

.dashboard-card-main {
  width: 100% !important;
  overflow: hidden !important;
}

.dashboard-card-main > .pill {
  justify-self: start !important;
  max-width: 100% !important;
}

.finance-week-chart {
  width: 100% !important;
  overflow: hidden !important;
}

.finance-donut-wrap {
  display: grid !important;
  grid-template-columns: minmax(0, 172px) minmax(0, 1fr) !important;
  gap: 14px !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: auto !important;
}

.finance-donut-box {
  position: relative !important;
  width: 168px !important;
  height: 168px !important;
  margin: 0 auto !important;
  flex: 0 0 auto !important;
}

.finance-donut-svg {
  display: block !important;
  width: 168px !important;
  height: 168px !important;
}

.finance-donut-bg {
  stroke: #efe4d9 !important;
  stroke-width: 18 !important;
}

.finance-donut-segment {
  stroke-linecap: butt !important;
}

.finance-donut-center {
  position: absolute !important;
  inset: 44px !important;
  display: grid !important;
  place-items: center !important;
  align-content: center !important;
  text-align: center !important;
  border-radius: 999px !important;
  background: var(--surface, #fffaf5) !important;
  box-shadow: inset 0 0 0 1px rgba(230,217,204,.75) !important;
}

.finance-donut-center strong {
  color: var(--n-dark, #29241f) !important;
  font-size: 16px !important;
  line-height: 1.05 !important;
  letter-spacing: -.04em !important;
}

.finance-donut-center span {
  color: var(--n-muted, #887c72) !important;
  font-size: 10px !important;
  font-weight: 850 !important;
  margin-top: 2px !important;
}

.finance-donut-legend {
  display: grid !important;
  gap: 6px !important;
  margin-top: 10px !important;
}

.finance-donut-legend span {
  display: flex !important;
  align-items: center !important;
  gap: 7px !important;
  color: var(--n-muted, #887c72) !important;
  font-size: 11px !important;
  line-height: 1.25 !important;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
}

.finance-donut-legend i {
  width: 9px !important;
  height: 9px !important;
  border-radius: 999px !important;
  flex: 0 0 auto !important;
}

.finance-donut {
  display: none !important;
}

@media (max-width: 520px) {
  .section-head {
    flex-wrap: wrap !important;
    align-items: flex-start !important;
  }

  .section-head span {
    white-space: normal !important;
    overflow-wrap: anywhere !important;
  }

  .finance-donut-wrap {
    grid-template-columns: 1fr !important;
    justify-items: center !important;
  }

  .finance-donut-side {
    width: 100% !important;
    text-align: center !important;
  }

  .finance-donut-legend span {
    justify-content: center !important;
  }
}


/* Final mobile UI fixes: stable top logout, WB products, fixed pie chart, no horizontal expansion */
.logout-top-button {
  border: 0;
  border-radius: 999px;
  background: #29241f;
  color: #fffaf5;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 38px;
  padding: 0 13px;
  font-size: 12px;
  font-weight: 900;
  box-shadow: 0 10px 22px rgba(41, 36, 31, .14);
}

.logout-top-button span {
  font-size: 16px;
  line-height: 1;
}

.logout-top-button strong {
  font: inherit;
}

.wb-products-hint {
  display: grid;
  gap: 4px;
  margin: 10px 0 14px;
  padding: 12px 14px;
  border: 1px solid rgba(230,217,204,.9);
  border-radius: 18px;
  background: rgba(255,250,245,.82);
  color: var(--n-dark, #29241f);
  max-width: 100%;
  overflow: hidden;
}

.wb-products-hint strong,
.wb-products-hint span {
  min-width: 0;
  max-width: 100%;
  overflow-wrap: anywhere;
  white-space: normal;
}

.wb-products-hint span {
  color: var(--n-muted, #887c72);
  font-size: 12px;
  line-height: 1.35;
}

.finance-pie-wrap {
  display: grid !important;
  grid-template-columns: minmax(0, 172px) minmax(0, 1fr) !important;
  gap: 14px !important;
  align-items: center !important;
  width: 100% !important;
  max-width: 100% !important;
}

.finance-pie-box {
  position: relative !important;
  width: 168px !important;
  height: 168px !important;
  max-width: 168px !important;
  max-height: 168px !important;
  aspect-ratio: 1 / 1 !important;
  margin: 0 auto !important;
  overflow: visible !important;
}

.finance-pie-svg {
  display: block !important;
  width: 168px !important;
  height: 168px !important;
  max-width: 168px !important;
  max-height: 168px !important;
  aspect-ratio: 1 / 1 !important;
  overflow: visible !important;
}

.finance-pie-slice {
  stroke: var(--surface, #fffaf5);
  stroke-width: 1.25;
  vector-effect: non-scaling-stroke;
}

.finance-pie-center {
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  transform: translate(-50%, -50%) !important;
  width: 86px !important;
  height: 86px !important;
  inset: auto !important;
  display: grid !important;
  place-items: center !important;
  align-content: center !important;
  text-align: center !important;
  border-radius: 999px !important;
  background: var(--surface, #fffaf5) !important;
  box-shadow: inset 0 0 0 1px rgba(230,217,204,.75) !important;
}

@media (max-width: 520px) {
  .finance-pie-wrap {
    grid-template-columns: 1fr !important;
    justify-items: center !important;
  }
  .finance-pie-box,
  .finance-pie-svg {
    width: 160px !important;
    height: 160px !important;
  }
  .finance-donut-side {
    width: 100% !important;
    text-align: center !important;
  }
  .finance-donut-legend span {
    justify-content: center !important;
  }
}

/* Readable finance spending block: replaces broken circle with clear rows */
.finance-layout-readable {
  display: block !important;
  margin: 14px 0 14px !important;
}

.finance-spending-card {
  border-radius: 22px !important;
  padding: 14px !important;
  overflow: hidden !important;
}

.finance-spending-summary {
  display: block !important;
  height: auto !important;
  min-height: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
}

.finance-spending-overview {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
  gap: 10px !important;
  margin-bottom: 12px !important;
}

.finance-spending-total,
.finance-spending-top {
  min-width: 0 !important;
  padding: 13px !important;
  border: 1px solid rgba(230,217,204,.9) !important;
  border-radius: 18px !important;
  background: rgba(255,250,245,.88) !important;
}

.finance-spending-total span,
.finance-spending-top span,
.finance-spending-total small,
.finance-spending-top small {
  display: block !important;
  color: var(--muted, #887c72) !important;
  font-size: 11px !important;
  line-height: 1.3 !important;
  overflow-wrap: anywhere !important;
}

.finance-spending-total strong,
.finance-spending-top strong {
  display: block !important;
  margin-top: 5px !important;
  color: var(--ink, #29241f) !important;
  font-size: 19px !important;
  line-height: 1.1 !important;
  letter-spacing: -.04em !important;
  overflow-wrap: anywhere !important;
}

.finance-spending-top strong {
  color: var(--danger, #a85d55) !important;
}

.finance-spending-stack {
  display: flex !important;
  width: 100% !important;
  height: 14px !important;
  gap: 3px !important;
  padding: 0 !important;
  margin: 0 0 12px !important;
  overflow: hidden !important;
  border-radius: 999px !important;
  background: #efe4d9 !important;
}

.finance-spending-stack span {
  display: block !important;
  min-width: 3px !important;
  height: 100% !important;
  border-radius: 999px !important;
}

.finance-spending-list,
.finance-category-bars.finance-spending-list {
  display: grid !important;
  gap: 10px !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
}

.finance-spending-row {
  min-width: 0 !important;
  padding: 12px !important;
  border: 1px solid rgba(230,217,204,.88) !important;
  border-radius: 18px !important;
  background: rgba(255,255,255,.72) !important;
}

.finance-spending-row-top,
.finance-spending-row-bottom {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  gap: 10px !important;
  min-width: 0 !important;
}

.finance-spending-name {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  min-width: 0 !important;
}

.finance-spending-name i {
  width: 10px !important;
  height: 10px !important;
  border-radius: 999px !important;
  flex: 0 0 auto !important;
}

.finance-spending-name strong {
  display: block !important;
  min-width: 0 !important;
  color: var(--ink, #29241f) !important;
  font-size: 13px !important;
  line-height: 1.25 !important;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
}

.finance-spending-row-top b {
  flex: 0 0 auto !important;
  color: var(--danger, #a85d55) !important;
  font-size: 13px !important;
  white-space: nowrap !important;
}

.finance-spending-progress {
  height: 9px !important;
  margin: 9px 0 7px !important;
  border-radius: 999px !important;
  overflow: hidden !important;
  background: #f0e4d9 !important;
}

.finance-spending-progress span {
  display: block !important;
  height: 100% !important;
  border-radius: 999px !important;
}

.finance-spending-row-bottom span {
  color: var(--muted, #887c72) !important;
  font-size: 11px !important;
  line-height: 1.25 !important;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
}

@media (max-width: 520px) {
  .finance-spending-overview {
    grid-template-columns: 1fr !important;
  }

  .finance-spending-total strong,
  .finance-spending-top strong {
    font-size: 21px !important;
  }

  .finance-spending-row-top,
  .finance-spending-row-bottom {
    align-items: flex-start !important;
  }
}


/* WB weekly analytics */
.wb-analytics-shell {
  display: grid;
  gap: 14px;
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
}
.wb-analytics-toolbar {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}
.wb-analytics-toolbar label {
  display: grid;
  gap: 6px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  min-width: 210px;
  flex: 1;
}
.wb-analytics-toolbar select,
.wb-analytics-form input,
.wb-analytics-paste textarea {
  width: 100%;
  max-width: 100%;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #fff;
  color: var(--text);
  padding: 10px 12px;
  font: inherit;
}
.wb-analytics-kpis {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}
.wb-analytics-kpis article,
.wb-analytics-card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 20px;
  box-shadow: var(--shadow-sm);
}
.wb-analytics-kpis article {
  padding: 14px;
}
.wb-analytics-kpis span {
  display: block;
  color: var(--muted);
  font-size: 12px;
  margin-bottom: 6px;
}
.wb-analytics-kpis strong {
  font-size: 18px;
  line-height: 1.15;
  word-break: break-word;
}
.wb-analytics-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.wb-analytics-card {
  padding: 14px;
  overflow: hidden;
}
.wb-analytics-card h3 {
  margin: 0 0 12px;
  font-size: 16px;
}
.wb-analytics-mini-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid var(--line);
}
.wb-analytics-mini-row:last-child { border-bottom: 0; }
.wb-analytics-mini-row b,
.wb-analytics-table-row b {
  display: block;
  overflow-wrap: anywhere;
}
.wb-analytics-mini-row small,
.wb-analytics-table-row small {
  display: block;
  color: var(--muted);
  font-size: 12px;
  margin-top: 4px;
}
.wb-analytics-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.wb-analytics-form label {
  display: grid;
  gap: 6px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}
.wb-analytics-form .primary-button { grid-column: 1 / -1; }
.wb-analytics-paste {
  display: grid;
  gap: 10px;
  margin-top: 12px;
}
.wb-analytics-paste textarea {
  min-height: 120px;
  resize: vertical;
}
.wb-analytics-table {
  display: grid;
  gap: 0;
  width: 100%;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 16px;
}
.wb-analytics-table-head,
.wb-analytics-table-row {
  display: grid;
  grid-template-columns: minmax(130px, 1.5fr) minmax(72px, .65fr) minmax(100px, .9fr) minmax(100px, .9fr);
  gap: 8px;
  align-items: center;
  padding: 10px 12px;
}
.wb-analytics-table-head {
  background: var(--soft);
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
}
.wb-analytics-table-row {
  background: #fff;
  border-top: 1px solid var(--line);
  font-size: 13px;
}
.good { color: var(--success); }
.bad { color: var(--danger); }
@media (max-width: 760px) {
  .wb-analytics-kpis,
  .wb-analytics-grid,
  .wb-analytics-form {
    grid-template-columns: 1fr;
  }
  .wb-analytics-table-head { display: none; }
  .wb-analytics-table-row {
    grid-template-columns: 1fr 1fr;
    gap: 8px 10px;
  }
  .wb-analytics-table-row span:first-child { grid-column: 1 / -1; }
}


/* Sales tab */
.sales-screen-shell { display: grid; gap: 14px; }
.sales-hero-new { background: linear-gradient(135deg, #2b2622, #b98f73); }
.sales-actions-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 12px 0; }
.sales-actions-row .secondary-button, .sales-report-link { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; text-decoration: none; text-align: center; }
.sales-sync-status { margin: -4px 2px 10px; color: var(--n-muted, #83776e); font-size: 12px; overflow-wrap: anywhere; }
.sales-filter-card { background: rgba(255,250,245,.92); border: 1px solid rgba(230,217,204,.9); border-radius: 22px; padding: 12px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; box-shadow: 0 7px 18px rgba(59,43,31,.045); }
.sales-filter-card label { display: grid; gap: 5px; min-width: 0; font-size: 11px; font-weight: 800; color: var(--n-muted, #83776e); }
.sales-filter-card select { width: 100%; min-width: 0; border: 1px solid var(--line); border-radius: 13px; background: #fff; padding: 9px 10px; color: var(--text); font-weight: 800; }
.sales-kpis { margin-top: 0; }
.sales-table { max-height: none; }
.muted-text { color: var(--n-muted, #83776e); font-size: 13px; line-height: 1.45; margin: -4px 0 12px; }
@media (max-width: 520px) {
  .sales-actions-row { grid-template-columns: 1fr; }
  .sales-filter-card { grid-template-columns: 1fr; }
}


/* Stock main tab */
.stock-hero-new { background: linear-gradient(135deg, #5b5147, #b98f73); }
.stock-summary-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin: 12px 0;
}
.stock-summary-card {
  min-width: 0;
  border: 1px solid rgba(230,217,204,.92);
  border-radius: 22px;
  background: rgba(255,250,245,.92);
  padding: 12px;
  display: grid;
  gap: 8px;
  text-align: left;
  color: var(--n-text, #2b2622);
  box-shadow: 0 7px 18px rgba(59,43,31,.045);
}
.stock-summary-card.is-active {
  border-color: rgba(185,143,115,.7);
  background: linear-gradient(135deg, rgba(255,250,245,.98), rgba(239,227,216,.95));
  box-shadow: 0 12px 24px rgba(59,43,31,.08);
}
.stock-summary-icon {
  width: 42px;
  height: 42px;
  border-radius: 16px;
  display: grid;
  place-items: center;
  background: #efe3d8;
  font-size: 22px;
}
.stock-summary-text {
  display: grid;
  gap: 4px;
  min-width: 0;
}
.stock-summary-text strong { font-size: 14px; line-height: 1.15; }
.stock-summary-text small { color: var(--n-muted, #83776e); font-size: 11px; line-height: 1.25; }
.stock-summary-card em {
  font-style: normal;
  font-size: 18px;
  font-weight: 950;
  letter-spacing: -.04em;
  overflow-wrap: anywhere;
}
.stock-overview-detail { margin: 12px 0 16px; }
.stock-overview-card {
  border: 1px solid rgba(230,217,204,.92);
  border-radius: 24px;
  background: rgba(255,250,245,.92);
  padding: 12px;
  box-shadow: 0 7px 18px rgba(59,43,31,.045);
}
.bottom-nav button span { font-size: 20px; }
@media (max-width: 520px) {
  .stock-summary-grid { grid-template-columns: 1fr; }
  .main-bottom-nav { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .bottom-nav button { font-size: 9px; border-radius: 15px; }
  .bottom-nav button span { font-size: 18px; }
}

/* Profit and stock KPI readability */
.sales-hero-new .hero-stats strong {
  font-size: clamp(16px, 4vw, 21px);
  overflow-wrap: anywhere;
}
.stock-hero-stats {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.stock-hero-stats strong {
  font-size: clamp(15px, 4vw, 20px);
  overflow-wrap: anywhere;
}


/* Stability package: login, system, recommendations */
.bottom-nav.main-bottom-nav{overflow-x:auto;grid-template-columns:repeat(7,minmax(72px,1fr));scrollbar-width:none;}
.bottom-nav.main-bottom-nav::-webkit-scrollbar{display:none;}
.system-tabs{display:flex;gap:8px;overflow-x:auto;margin:12px 0 16px;padding-bottom:2px;}
.system-tabs button{border:1px solid var(--line,#e6d9cc);background:#fffaf4;border-radius:999px;padding:9px 12px;font-weight:800;color:#6f5d50;white-space:nowrap;}
.system-tabs button.is-active{background:#2b2622;color:#fff;border-color:#2b2622;}
.system-panel{display:none;}
.system-panel.is-active{display:block;}
.diagnostic-grid,.roles-grid,.backup-grid,.directory-grid,.recommendation-grid{display:grid;gap:12px;}
.diagnostic-card,.role-card,.backup-card,.directory-card,.recommendation-card{background:#fffaf4;border:1px solid #e6d9cc;border-radius:18px;padding:14px;box-shadow:0 6px 14px rgba(55,40,30,.04);}
.diagnostic-card header,.recommendation-card header,.directory-card header{display:flex;justify-content:space-between;gap:10px;align-items:flex-start;margin-bottom:8px;}
.status-pill{display:inline-flex;align-items:center;gap:5px;border-radius:999px;padding:5px 8px;font-size:11px;font-weight:900;background:#efe3d8;color:#725e50;white-space:nowrap;}
.status-pill.ok{background:#e4f2e7;color:#367447}.status-pill.bad{background:#f8e3df;color:#a14238}.status-pill.warn{background:#fbefd9;color:#9a6b17}
.metric-line{display:grid;grid-template-columns:1fr auto;gap:10px;padding:7px 0;border-bottom:1px solid #eee3d7;font-size:13px;}
.metric-line:last-child{border-bottom:0}.metric-line strong{font-weight:900}.muted-box{background:#f6eee6;border:1px dashed #dac8b8;border-radius:14px;padding:10px;color:#76675c;font-size:12px;line-height:1.45;}
.recommendation-card.critical{border-color:#e7b2aa;background:#fff6f4}.recommendation-card.warning{border-color:#ead3a2}.recommendation-card.good{border-color:#bcd8c3}
.recommendation-card .action{margin-top:10px;font-weight:900;color:#2b2622}.directory-card img{width:54px;height:54px;object-fit:cover;border-radius:14px;background:#eee;float:left;margin-right:10px}.role-card ul{margin:8px 0 0 18px;padding:0;color:#74675d;font-size:13px;line-height:1.55}.backup-actions{display:flex;gap:8px;flex-wrap:wrap;margin:10px 0}.auth-card input{width:100%;margin:8px 0 0}.auth-card input+input{margin-top:10px}
@media(max-width:560px){.bottom-nav.main-bottom-nav{justify-content:flex-start}.bottom-nav.main-bottom-nav button{min-width:72px}.diagnostic-grid,.roles-grid,.backup-grid,.directory-grid,.recommendation-grid{grid-template-columns:1fr}}
@media(min-width:760px){.diagnostic-grid,.roles-grid,.backup-grid,.directory-grid,.recommendation-grid{grid-template-columns:repeat(2,minmax(0,1fr));}}


/* UX fix: left drawer navigation instead of bottom menu */
.app-shell {
  padding-bottom: 24px;
}
.topbar {
  gap: 10px;
}
.menu-toggle {
  width: 42px;
  height: 42px;
  border: 1px solid var(--n-line, #e6d9cc);
  border-radius: 15px;
  background: #fffaf4;
  color: #2b2622;
  font-size: 20px;
  font-weight: 900;
  box-shadow: 0 8px 18px rgba(59,43,31,.055);
}
.bottom-nav.main-bottom-nav {
  position: fixed !important;
  top: 0;
  bottom: 0;
  left: 0;
  right: auto;
  z-index: 80;
  width: min(300px, 84vw);
  max-width: none;
  height: 100dvh;
  margin: 0;
  padding: calc(18px + env(safe-area-inset-top)) 14px 18px;
  display: flex;
  flex-direction: column;
  grid-template-columns: none !important;
  gap: 8px;
  border-top: 0;
  border-right: 1px solid #e6d9cc;
  border-radius: 0 26px 26px 0;
  background: rgba(255,250,244,.98);
  backdrop-filter: blur(20px);
  transform: translateX(-104%);
  transition: transform .18s ease;
  box-shadow: 22px 0 44px rgba(43,38,34,.18);
  overflow-y: auto;
  overflow-x: hidden;
}
.app-shell.menu-open .bottom-nav.main-bottom-nav {
  transform: translateX(0);
}
.bottom-nav.main-bottom-nav::before {
  content: "NAZZANI";
  display: block;
  margin: 4px 8px 14px;
  color: #2b2622;
  font-size: 18px;
  font-weight: 950;
  letter-spacing: .08em;
}
.bottom-nav.main-bottom-nav button {
  min-width: 0 !important;
  width: 100%;
  min-height: 50px;
  display: grid;
  grid-template-columns: 32px 1fr;
  place-items: initial;
  align-items: center;
  justify-content: start;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 16px;
  color: #75685e;
  text-align: left;
  font-size: 14px;
  font-weight: 900;
}
.bottom-nav.main-bottom-nav button span {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 12px;
  background: #f1e5da;
  font-size: 18px;
}
.bottom-nav.main-bottom-nav button.is-active {
  background: #2b2622;
  color: #fffaf4;
}
.bottom-nav.main-bottom-nav button.is-active span {
  background: rgba(255,255,255,.14);
}
.side-menu-backdrop {
  position: fixed;
  inset: 0;
  z-index: 70;
  border: 0;
  background: rgba(20,16,12,.28);
  backdrop-filter: blur(2px);
}
.side-menu-backdrop[hidden] { display: none; }
@media (min-width: 980px) {
  .app-shell.menu-pinned main,
  .app-shell.menu-pinned .topbar {
    margin-left: 300px;
  }
}

/* Readable system/recommendations hero blocks */
.recommendations-hero,
.system-hero {
  color: #2b2622 !important;
  background: linear-gradient(135deg, #fffaf4, #e9d7c7) !important;
  border: 1px solid #e2d2c4;
}
.recommendations-hero::after,
.system-hero::after {
  background: rgba(185,143,115,.14) !important;
}
.recommendations-hero .hero-label,
.system-hero .hero-label {
  color: #8a6d58;
  opacity: 1;
}
.recommendations-hero p:not(.hero-label),
.system-hero p:not(.hero-label) {
  color: #6f6258;
  opacity: 1;
}
.recommendations-hero .hero-stats span,
.system-hero .hero-stats span {
  background: rgba(255,255,255,.76);
  border: 1px solid #e2d2c4;
  color: #2b2622;
}

/* Order receiving controls */
.order-receive-toolbar {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
  margin-bottom: 10px;
  padding: 10px;
  border: 1px solid #e6d9cc;
  border-radius: 16px;
  background: #fffaf4;
}
.order-receive-toolbar label,
.order-drill-check {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #6f6258;
  font-size: 12px;
  font-weight: 850;
}
.order-receive-toolbar input,
.order-drill-check input { width: 18px; height: 18px; }
.order-drill-row {
  position: relative;
}
.order-drill-main {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: flex-start;
  margin-bottom: 8px;
}
.receive-button {
  border: 0;
  border-radius: 12px;
  background: #2f6b4f;
  color: #fff;
  padding: 8px 10px;
  font-size: 12px;
  font-weight: 900;
}
.receive-button:disabled { opacity: .45; }

@media(max-width:560px){
  .topbar { align-items: center; }
  .topbar h1 { font-size: 22px; }
  .toast { bottom: 18px; }
}

/* Mobile drawer final fix: static hamburger + reliable left panel */
html,
body {
  overflow-x: hidden !important;
  width: 100%;
  max-width: 100%;
}

.app-shell {
  overflow-x: hidden !important;
}

.menu-toggle {
  position: fixed !important;
  top: calc(10px + env(safe-area-inset-top)) !important;
  left: max(12px, calc((100vw - 980px) / 2 + 14px)) !important;
  z-index: 160 !important;
  display: inline-grid !important;
  place-items: center !important;
  flex: 0 0 auto !important;
  width: 46px !important;
  height: 46px !important;
  border-radius: 16px !important;
  border: 1px solid #e2d4c7 !important;
  background: #fffaf4 !important;
  color: #2b2622 !important;
  font-size: 22px !important;
  line-height: 1 !important;
  font-weight: 950 !important;
  box-shadow: 0 10px 24px rgba(43, 38, 34, .16) !important;
}

.topbar {
  padding-left: 58px !important;
  z-index: 90 !important;
}

.bottom-nav.main-bottom-nav {
  position: fixed !important;
  top: 0 !important;
  bottom: 0 !important;
  left: 0 !important;
  right: auto !important;
  z-index: 140 !important;
  width: min(318px, 86vw) !important;
  height: 100dvh !important;
  max-height: 100dvh !important;
  margin: 0 !important;
  padding: calc(72px + env(safe-area-inset-top)) 14px calc(18px + env(safe-area-inset-bottom)) !important;
  display: flex !important;
  flex-direction: column !important;
  grid-template-columns: none !important;
  gap: 8px !important;
  border: 0 !important;
  border-right: 1px solid #e2d4c7 !important;
  border-radius: 0 26px 26px 0 !important;
  background: rgba(255, 250, 244, .985) !important;
  backdrop-filter: blur(22px) !important;
  transform: translate3d(-106%, 0, 0) !important;
  transition: transform .2s ease, visibility .2s ease !important;
  visibility: hidden !important;
  pointer-events: none !important;
  box-shadow: 22px 0 46px rgba(43, 38, 34, .20) !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  -webkit-overflow-scrolling: touch !important;
}

.app-shell.menu-open .bottom-nav.main-bottom-nav {
  transform: translate3d(0, 0, 0) !important;
  visibility: visible !important;
  pointer-events: auto !important;
}

.bottom-nav.main-bottom-nav::before {
  content: "Разделы" !important;
  display: block !important;
  margin: 0 8px 12px !important;
  color: #2b2622 !important;
  font-size: 18px !important;
  font-weight: 950 !important;
  letter-spacing: -.02em !important;
}

.bottom-nav.main-bottom-nav button {
  width: 100% !important;
  min-width: 0 !important;
  min-height: 54px !important;
  display: grid !important;
  grid-template-columns: 36px 1fr !important;
  align-items: center !important;
  justify-content: start !important;
  gap: 11px !important;
  padding: 10px 12px !important;
  border-radius: 17px !important;
  border: 0 !important;
  background: transparent !important;
  color: #75685e !important;
  text-align: left !important;
  font-size: 14px !important;
  font-weight: 900 !important;
}

.bottom-nav.main-bottom-nav button span {
  width: 36px !important;
  height: 36px !important;
  display: grid !important;
  place-items: center !important;
  border-radius: 13px !important;
  background: #f1e5da !important;
  font-size: 19px !important;
}

.bottom-nav.main-bottom-nav button.is-active {
  background: #2b2622 !important;
  color: #fffaf4 !important;
}

.bottom-nav.main-bottom-nav button.is-active span {
  background: rgba(255, 255, 255, .14) !important;
}

.side-menu-backdrop {
  position: fixed !important;
  inset: 0 !important;
  z-index: 130 !important;
  width: 100vw !important;
  height: 100dvh !important;
  border: 0 !important;
  background: rgba(20, 16, 12, .34) !important;
  backdrop-filter: blur(2px) !important;
  touch-action: none !important;
}

.side-menu-backdrop[hidden] {
  display: none !important;
}

.app-shell.menu-open main,
.app-shell.menu-open .topbar {
  pointer-events: none;
}

.app-shell.menu-open .menu-toggle,
.app-shell.menu-open .bottom-nav.main-bottom-nav,
.app-shell.menu-open .side-menu-backdrop {
  pointer-events: auto;
}

@media (max-width: 560px) {
  .menu-toggle {
    top: calc(8px + env(safe-area-inset-top)) !important;
    left: 12px !important;
  }
  .topbar {
    min-height: 64px !important;
    padding-left: 60px !important;
    padding-right: 8px !important;
  }
  .topbar h1 {
    font-size: 21px !important;
  }
  .logout-top-button strong {
    display: none !important;
  }
}

/* Role hardening: worker roles do not see drawer button or drawer */
body.is-worker-role .menu-toggle,
body.is-worker-role .side-menu-backdrop,
body.is-worker-role .bottom-nav.main-bottom-nav {
  display: none !important;
}
body.is-worker-role .topbar {
  padding-left: 16px !important;
}
body.is-worker-role .app-shell.menu-open .bottom-nav.main-bottom-nav {
  transform: translate3d(-106%,0,0) !important;
  visibility: hidden !important;
}
.movement-photo-field input { width: 100%; }
.movement-record .movement-photo {
  width: 100%;
  max-height: 240px;
  object-fit: cover;
  border-radius: 16px;
  border: 1px solid #e5d8ca;
  margin-bottom: 10px;
  background: #f2e8de;
}
body.is-worker-role .hero-stats span:nth-child(2),
body.is-worker-role [data-dashboard-detail="orders"],
body.is-worker-role [data-go="stock"],
body.is-worker-role [data-go="fabric"],
body.is-worker-role [data-go="settings"] {
  display: none !important;
}

/* Push + transfer confirmation patch */
.brand-home {
  appearance: none;
  border: 0;
  background: transparent;
  padding: 0;
  text-align: left;
  color: inherit;
  display: grid;
  gap: 2px;
  cursor: pointer;
}
.brand-home .eyebrow {
  margin: 0;
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: uppercase;
  opacity: .74;
}
.brand-home strong {
  font-size: 22px;
  line-height: 1.1;
}
.push-top-button {
  border: 1px solid rgba(49,92,72,.18);
  background: #fff8ef;
  border-radius: 999px;
  min-width: 42px;
  height: 42px;
  display: inline-grid;
  place-items: center;
  box-shadow: 0 8px 24px rgba(38,54,42,.08);
}
.journal-worker-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
  color: #315c48;
  font-weight: 700;
}
body:not(.is-worker-role) .journal-worker-head { display: none; }
.transfer-panel {
  display: grid;
  gap: 12px;
  margin-bottom: 16px;
}
.transfer-card {
  border-left: 4px solid #d8d3c5;
}
.transfer-card.needs-action {
  border-left-color: #c77b3a;
  background: #fff8ef;
}
.transfer-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}
.record-comment {
  margin: 8px 0 0;
  color: #6f665f;
}
body.is-worker-role .production-hub [data-go="journal"] {
  display: grid !important;
}
body.is-worker-role .production-hub [data-go="stock"],
body.is-worker-role .production-hub [data-go="fabric"],
body.is-worker-role .production-hub [data-go="settings"] {
  display: none !important;
}

/* Transit section fix */
.transit-hero {
  background: linear-gradient(135deg, #315c48, #6f8f74) !important;
  color: #fff !important;
}
.transit-hero p,
.transit-hero small,
.transit-hero .hero-label {
  color: rgba(255,255,255,.86) !important;
}
.transfer-panel .section-head.inside {
  align-items: flex-start;
  gap: 8px;
}
.transfer-card.needs-action {
  border-color: #d79443 !important;
  box-shadow: 0 10px 28px rgba(215,148,67,.16);
}
.transfer-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}
body.is-worker-role [data-go="transit"] {
  display: grid !important;
}

/* Transfer UX fix: compact photos on mobile and keep action buttons visible */
.transfer-card .movement-photo {
  width: 132px !important;
  height: 132px !important;
  max-width: 132px !important;
  max-height: 132px !important;
  object-fit: cover !important;
  border-radius: 14px !important;
  margin: 0 0 10px 0 !important;
  display: block !important;
}
.transfer-card .record-head {
  align-items: flex-start;
}
@media (max-width: 640px) {
  .transfer-card .movement-photo {
    width: 88px !important;
    height: 88px !important;
    max-width: 88px !important;
    max-height: 88px !important;
    border-radius: 12px !important;
  }
  .transfer-card {
    overflow: hidden !important;
  }
  .transfer-actions {
    position: sticky;
    bottom: 8px;
    background: rgba(255,248,239,.96);
    border: 1px solid #eadccb;
    border-radius: 14px;
    padding: 8px;
    z-index: 2;
  }
  .transfer-actions .primary-button,
  .transfer-actions .secondary-button {
    flex: 1 1 100%;
    min-height: 42px;
  }
}

/* Finance exchange rates, Google Sheets sync and partner investments */
.finance-sync-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 14px 0;
  padding: 12px 14px;
  border: 1px solid rgba(148, 139, 131, .22);
  border-radius: 18px;
  background: rgba(254, 245, 235, .82);
}

.finance-sync-button {
  flex: 0 0 auto;
  white-space: nowrap;
}

.finance-sync-status {
  min-width: 0;
  color: #665f59;
  font-size: 12px;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.finance-rate-box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid rgba(148, 139, 131, .22);
  border-radius: 16px;
  background: linear-gradient(135deg, rgba(254,245,235,.96), rgba(216,211,197,.42));
}

.finance-rate-box strong,
.finance-rate-box small {
  display: block;
}

.finance-rate-box strong {
  color: #302a26;
  font-size: 13px;
  line-height: 1.4;
}

.finance-rate-box small {
  margin-top: 3px;
  color: #756d66;
  font-size: 11px;
  line-height: 1.4;
}

.finance-investments-card {
  margin: 16px 0 20px;
  padding: 16px;
  border: 1px solid rgba(148, 139, 131, .2);
  border-radius: 24px;
  background:
    radial-gradient(circle at top right, rgba(235,179,145,.32), transparent 34%),
    linear-gradient(145deg, #fffaf5, #f2ede6);
  box-shadow: 0 16px 42px rgba(52, 45, 39, .08);
}

.finance-investment-tabbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 14px;
}

.finance-investment-tab {
  border: 0;
  border-radius: 999px;
  padding: 9px 14px;
  background: #2f2925;
  color: #fff;
  font: inherit;
  font-size: 12px;
  font-weight: 850;
}

.finance-investment-tabbar > span {
  color: #756d66;
  font-size: 11px;
  font-weight: 750;
}

.finance-investment-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
}

.finance-investment-head h2 {
  margin: 2px 0 4px;
  color: #302a26;
  font-size: 23px;
}

.finance-investment-head p:not(.eyebrow) {
  max-width: 560px;
  margin: 0;
  color: #756d66;
  font-size: 12px;
  line-height: 1.5;
}

.finance-investment-total {
  min-width: 180px;
  padding: 13px 15px;
  border-radius: 18px;
  background: rgba(47, 41, 37, .96);
  color: #fff;
}

.finance-investment-total span,
.finance-investment-total strong {
  display: block;
}

.finance-investment-total span {
  color: rgba(255,255,255,.7);
  font-size: 11px;
  font-weight: 800;
}

.finance-investment-total strong {
  margin-top: 4px;
  font-size: 22px;
  letter-spacing: -.03em;
}

.finance-investor-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 16px;
}

.finance-investor-card {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  padding: 14px;
  border: 1px solid rgba(148,139,131,.16);
  border-radius: 18px;
  background: rgba(255,255,255,.78);
}

.investor-avatar {
  display: grid;
  flex: 0 0 42px;
  width: 42px;
  height: 42px;
  place-items: center;
  border-radius: 15px;
  background: #d8d3c5;
  color: #342f2b;
  font-weight: 900;
}

.finance-investor-card:nth-child(2) .investor-avatar {
  background: #ebb391;
}

.finance-investor-card span,
.finance-investor-card strong,
.finance-investor-card small {
  display: block;
}

.finance-investor-card span {
  color: #756d66;
  font-size: 11px;
  font-weight: 800;
}

.finance-investor-card strong {
  margin-top: 2px;
  color: #302a26;
  font-size: 19px;
}

.finance-investor-card small {
  margin-top: 3px;
  color: #817970;
  font-size: 10px;
}

.finance-investment-share {
  margin-top: 14px;
  padding: 12px 14px;
  border-radius: 16px;
  background: rgba(255,255,255,.64);
}

.finance-investment-bar {
  display: flex;
  height: 12px;
  overflow: hidden;
  border-radius: 999px;
  background: #e7e1d9;
}

.finance-investment-bar span:first-child { background: #948b83; }
.finance-investment-bar span:last-child { background: #ebb391; }

.finance-investment-legend {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-top: 9px;
  color: #655e58;
  font-size: 11px;
}

.finance-investment-legend span {
  display: flex;
  align-items: center;
  gap: 6px;
}

.finance-investment-legend i {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: #948b83;
}

.finance-investment-legend span:nth-child(2) i { background: #ebb391; }
.finance-investment-list { margin-top: 14px; }
.finance-investment-record { background: rgba(255,255,255,.72); }

@media (max-width: 640px) {
  .finance-sync-row,
  .finance-investment-head,
  .finance-rate-box {
    align-items: stretch;
    flex-direction: column;
  }
  .finance-sync-button,
  .finance-rate-box .text-button {
    width: 100%;
  }
  .finance-investment-total { min-width: 0; }
  .finance-investor-grid { grid-template-columns: 1fr; }
  .finance-investment-legend { flex-direction: column; gap: 5px; }
}

/* Finance partner investments: collapsible panel */
.finance-investment-tab-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  min-width: 0;
}

.finance-investment-toggle {
  border: 1px solid rgba(148, 139, 131, .35);
  border-radius: 999px;
  background: rgba(255, 255, 255, .68);
  color: #4d4540;
  min-height: 34px;
  padding: 7px 13px;
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
}

.finance-investment-toggle:hover {
  background: #fff;
}

.finance-investments-card.is-collapsed {
  padding-bottom: 12px;
}

.finance-investments-card.is-collapsed .finance-investment-tabbar {
  margin-bottom: 0;
}

@media (max-width: 640px) {
  .finance-investment-tabbar {
    align-items: flex-start;
    gap: 8px;
  }

  .finance-investment-tab-actions {
    flex-direction: column;
    align-items: flex-end;
    gap: 6px;
  }

  .finance-investment-toggle {
    min-height: 32px;
    padding: 6px 11px;
  }
}
.finance-investment-tab-actions > span {
  color: #756d66;
  font-size: 11px;
  font-weight: 750;
}


/* Finance funding source and partner withdrawals */
.field-help {
  display: block;
  margin-top: 5px;
  color: #817970;
  font-size: 10px;
  line-height: 1.4;
}

.finance-investment-total-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(150px, 1fr));
  gap: 10px;
  min-width: min(390px, 100%);
}

.finance-investment-total.is-withdrawn {
  background: linear-gradient(145deg, #73594b, #4d3c33);
}

.investor-withdrawal {
  margin-top: 8px !important;
  color: #8f4d43 !important;
  font-weight: 800;
}

.finance-partner-withdrawal-amount {
  color: #a85d55;
}

@media (max-width: 760px) {
  .finance-investment-total-grid {
    grid-template-columns: 1fr;
    min-width: 0;
    width: 100%;
  }
}

/* NAZZANI stable redesign: home, application icons, fulfillment and access management */
.brand-home {
  display: flex !important;
  align-items: baseline;
  gap: 6px !important;
  min-width: 0;
  white-space: nowrap;
}
.brand-home .brand-word {
  color: #17253a;
  font-weight: 950;
  letter-spacing: .02em;
  text-transform: uppercase;
}
.brand-home .brand-separator {
  color: #b9a68d;
  font-weight: 800;
}
.brand-home #screenTitle {
  min-width: 0;
  overflow: hidden;
  color: #2b2622;
  font-size: 17px;
  text-overflow: ellipsis;
}
.topbar {
  position: sticky !important;
  top: 0 !important;
  z-index: 120 !important;
}

.screen[data-screen="home"] {
  --home-navy: #142237;
  --home-navy-soft: #1d304c;
  --home-gold: #c8b89f;
  --home-cream: #f8f3eb;
  padding-bottom: 28px;
}
.nazzani-home-hero {
  overflow: hidden;
  margin-bottom: 14px;
  border: 1px solid rgba(200,184,159,.34);
  border-radius: 24px;
  background: #142237;
  box-shadow: 0 20px 42px rgba(20,34,55,.22);
}
.nazzani-home-logo {
  display: block;
  width: 100%;
  aspect-ratio: 1078 / 498;
  object-fit: cover;
  background: #142237;
}
.nazzani-home-copy {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  padding: 12px 16px 15px;
  border-top: 1px solid rgba(200,184,159,.22);
  color: var(--home-cream);
}
.nazzani-home-copy p {
  font-size: 13px;
  font-weight: 800;
}
.nazzani-home-copy span {
  color: var(--home-gold);
  font-size: 11px;
  text-align: right;
}
.home-metric-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.home-metric {
  appearance: none;
  display: grid;
  min-height: 124px;
  align-content: space-between;
  gap: 8px;
  width: 100%;
  padding: 15px;
  border: 1px solid rgba(200,184,159,.34);
  border-radius: 20px;
  background: linear-gradient(145deg, #172941, #142237);
  color: #f8f3eb;
  text-align: left;
  box-shadow: 0 12px 24px rgba(20,34,55,.14);
}
button.home-metric:active { transform: translateY(1px); }
.home-metric span {
  color: #c8b89f;
  font-size: 12px;
  font-weight: 850;
}
.home-metric strong {
  font-size: 25px;
  line-height: 1.05;
  overflow-wrap: anywhere;
}
.home-metric small {
  color: rgba(248,243,235,.68);
  font-size: 11px;
  line-height: 1.35;
}
.home-section {
  margin-top: 16px;
  padding: 14px;
  border: 1px solid #e6d9cc;
  border-radius: 20px;
  background: #fffaf4;
  box-shadow: 0 10px 24px rgba(59,43,31,.06);
}
.home-quick-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
}
.home-quick-grid button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 50px;
  padding: 11px 13px;
  border: 1px solid #e4d7c9;
  border-radius: 15px;
  background: #f8f0e8;
  color: #2b2622;
  font-weight: 850;
  text-align: left;
}
.home-quick-grid button span { color: #9b8069; font-size: 18px; }
.home-alert-list { display: grid; gap: 9px; }
.home-alert-list article {
  display: grid;
  grid-template-columns: auto minmax(0,1fr);
  gap: 10px;
  align-items: start;
  padding: 11px;
  border-radius: 15px;
  background: #f8f0e8;
}
.home-alert-list article div { display: grid; gap: 4px; }
.home-alert-list strong { font-size: 13px; }
.home-alert-list small { color: #75685e; font-size: 11px; line-height: 1.4; }

.production-location-grid,
.fulfillment-kpis {
  margin-bottom: 12px;
}
.production-location-grid .kpi,
.fulfillment-kpis .kpi {
  min-height: 118px;
}
.production-location-grid .kpi small,
.fulfillment-kpis .kpi small {
  display: block;
  margin-top: 7px;
  color: var(--n-muted, #887c72);
  font-size: 11px;
  line-height: 1.3;
}
.fulfillment-kpis .section-icon {
  min-height: 0;
  margin-bottom: 6px;
  color: var(--n-accent, #b98f73);
  font-size: 20px;
  font-weight: 950;
}
.fulfillment-hero-new {
  background: linear-gradient(145deg, #2b2622, #5f5147) !important;
}
.journal-fab {
  position: fixed;
  right: max(18px, calc((100vw - 480px) / 2 + 18px));
  bottom: calc(20px + env(safe-area-inset-bottom));
  z-index: 75;
}

.access-users-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}
.access-users-head p {
  margin-top: 5px;
  color: #75685e;
  font-size: 12px;
  line-height: 1.45;
}
.access-users-grid { display: grid; gap: 12px; }
.access-user-card {
  display: grid;
  gap: 11px;
  padding: 14px;
  border: 1px solid #e6d9cc;
  border-radius: 18px;
  background: #fffaf4;
  box-shadow: 0 8px 18px rgba(59,43,31,.05);
}
.access-user-card header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}
.access-user-card header div { display: grid; gap: 4px; }
.access-user-card header small { color: #7d7066; font-size: 11px; line-height: 1.35; }
.access-user-card label { display: grid; gap: 6px; color: #6f6258; font-size: 12px; font-weight: 850; }
.access-user-card input[type="text"],
.access-user-card input[type="password"],
.access-user-card input:not([type]) {
  width: 100%;
  min-height: 44px;
  border: 1px solid #dccfc1;
  border-radius: 13px;
  padding: 10px 12px;
  background: #fff;
  color: #2b2622;
}
.access-enabled { grid-template-columns: 20px 1fr !important; align-items: center; }
.access-enabled input { width: 18px; height: 18px; }
.access-user-meta { color: #8a7d72; font-size: 10px; }

.bottom-nav.main-bottom-nav button span {
  color: #142237 !important;
  background: #e9e1d5 !important;
}
.bottom-nav.main-bottom-nav button.is-active {
  background: #142237 !important;
  color: #f8f3eb !important;
}
.bottom-nav.main-bottom-nav button.is-active span {
  color: #c8b89f !important;
  background: rgba(255,255,255,.10) !important;
}

@media (min-width: 760px) {
  .home-metric-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .access-users-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 520px) {
  .brand-home { gap: 4px !important; }
  .brand-home .brand-word,
  .brand-home #screenTitle { font-size: 15px; }
  .nazzani-home-copy { display: grid; }
  .nazzani-home-copy span { text-align: left; }
  .home-metric-grid,
  .home-quick-grid { grid-template-columns: 1fr 1fr; }
  .home-metric { min-height: 116px; }
  .journal-fab { right: 16px; }
}


/* v2: fixed header, reliable NAZZANI image, worker navigation, admin materials */
:root { --nazzani-fixed-header-h: calc(70px + env(safe-area-inset-top)); }

.app-shell {
  padding-top: var(--nazzani-fixed-header-h) !important;
}

.topbar {
  position: fixed !important;
  top: 0 !important;
  left: 50% !important;
  right: auto !important;
  width: min(480px, 100vw) !important;
  min-height: var(--nazzani-fixed-header-h) !important;
  margin: 0 !important;
  padding: calc(10px + env(safe-area-inset-top)) 14px 10px 72px !important;
  transform: translateX(-50%) !important;
  z-index: 190 !important;
  background: rgba(251,247,242,.97) !important;
  border-bottom: 1px solid rgba(226,212,199,.92) !important;
  box-shadow: 0 8px 22px rgba(43,38,34,.08) !important;
  backdrop-filter: blur(20px) !important;
}

.menu-toggle {
  top: calc(10px + env(safe-area-inset-top)) !important;
  left: max(12px, calc((100vw - 480px) / 2 + 14px)) !important;
  z-index: 230 !important;
}

.bottom-nav.main-bottom-nav { z-index: 220 !important; }
.side-menu-backdrop { z-index: 210 !important; }

.nazzani-home-logo {
  min-height: 170px;
  object-fit: contain !important;
  object-position: center;
  padding: 0;
  background: #142237 !important;
}

.home-material-admin .section-head > div {
  display: grid;
  gap: 4px;
}
.home-material-admin .section-head p {
  color: #75685e;
  font-size: 11px;
  line-height: 1.4;
}
.home-material-actions {
  display: grid;
  gap: 9px;
}
.home-material-actions > button {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  align-items: center;
  gap: 11px;
  width: 100%;
  min-height: 68px;
  padding: 11px 12px;
  border: 1px solid #e4d7c9;
  border-radius: 16px;
  background: #f8f0e8;
  color: #2b2622;
  text-align: left;
}
.home-material-actions > button div {
  display: grid;
  gap: 3px;
  min-width: 0;
}
.home-material-actions > button strong { font-size: 13px; }
.home-material-actions > button small {
  color: #75685e;
  font-size: 10px;
  line-height: 1.35;
}
.home-material-actions > button > b {
  color: #9b8069;
  font-size: 18px;
}
.home-action-icon {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 14px;
  background: #142237;
  color: #c8b89f;
  font-size: 20px;
  font-weight: 900;
}

/* Worker accounts have no home page. The drawer only shows their work area and transit. */
body[data-role="production_kurtan"] [data-nav="home"],
body[data-role="production_vaagni"] [data-nav="home"],
body[data-role="fulfillment"] [data-nav="home"] {
  display: none !important;
}

@media (max-width: 380px) {
  .topbar { padding-right: 9px !important; padding-left: 66px !important; }
  .brand-home .brand-word,
  .brand-home #screenTitle { font-size: 13px !important; }
  .logout-top-button { padding-inline: 9px !important; }
}


/* v3: production paired layout + order controls */
.production-paired-sections {
  display: grid;
  gap: 14px;
}
.production-pair-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.production-column-card {
  min-width: 0;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--surface);
  box-shadow: 0 8px 22px rgba(31, 41, 51, 0.06);
}
.production-column-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 9px;
  padding: 2px 2px 8px;
  border-bottom: 1px solid var(--line);
}
.production-column-head span {
  font-size: 13px;
  font-weight: 900;
}
.production-column-head strong {
  max-width: 62%;
  color: var(--green);
  font-size: 12px;
  text-align: right;
  overflow-wrap: anywhere;
}
.production-column-card .dashboard-card-list,
.production-column-card .dashboard-card-list.two-col {
  grid-template-columns: 1fr;
  gap: 7px;
}
.production-column-card .dashboard-photo-card {
  border-radius: 12px;
}
.production-column-card .dashboard-card-main {
  grid-template-columns: 44px minmax(0, 1fr) auto;
  gap: 8px;
  padding: 8px;
}
.production-column-card .dashboard-thumb {
  width: 44px;
  height: 44px;
  aspect-ratio: 1;
}
.production-column-card .dashboard-card-text strong {
  font-size: 12px;
}
.production-column-card .dashboard-card-text span,
.production-column-card .pill {
  font-size: 10px;
}
.production-material-pair-title {
  margin-top: 2px;
}
.order-qty-editor {
  flex-wrap: wrap;
}
.order-qty-editor .text-button.compact {
  flex: 1 1 100%;
  justify-content: center;
}
@media (max-width: 420px) {
  .production-pair-grid { gap: 7px; }
  .production-column-card { padding: 7px; border-radius: 13px; }
  .production-column-card .dashboard-card-main {
    grid-template-columns: 34px minmax(0, 1fr);
  }
  .production-column-card .dashboard-thumb { width: 34px; height: 34px; }
  .production-column-card .dashboard-card-main .pill { grid-column: 1 / -1; justify-self: start; }
}

/* v4: simplified production/fulfillment layouts and embedded activity journals */
.fulfillment-pair-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 14px;
}
.fulfillment-column-card {
  min-width: 0;
}
.single-production-column {
  grid-template-columns: minmax(0, 1fr);
}
.embedded-activity-section {
  margin-top: 16px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--surface);
  box-shadow: 0 8px 24px rgba(31, 41, 51, 0.06);
}
.embedded-activity-section .section-head {
  margin-bottom: 10px;
}
.embedded-activity-section .section-head > div {
  min-width: 0;
}
.embedded-activity-section .section-head h2 {
  margin: 0;
}
.embedded-activity-section .section-head p {
  margin: 3px 0 0;
  color: var(--muted);
  font-size: 12px;
}
.embedded-activity-list {
  display: grid;
  gap: 8px;
}
.embedded-activity-list .record {
  margin: 0;
}
.nav-icon {
  display: inline-flex !important;
  width: 20px;
  height: 20px;
  align-items: center;
  justify-content: center;
  flex: 0 0 20px;
}
.nav-icon svg {
  width: 19px;
  height: 19px;
  fill: currentColor;
  display: block;
}
@media (max-width: 720px) {
  .fulfillment-pair-grid {
    gap: 7px;
  }
  .fulfillment-column-card {
    padding: 7px;
    border-radius: 13px;
  }
  .fulfillment-column-card .dashboard-card-list,
  .fulfillment-column-card .dashboard-card-list.two-col {
    grid-template-columns: 1fr;
    gap: 7px;
  }
  .fulfillment-column-card .dashboard-card-main {
    grid-template-columns: 34px minmax(0, 1fr);
    gap: 7px;
    padding: 8px;
  }
  .fulfillment-column-card .dashboard-thumb {
    width: 34px;
    height: 34px;
  }
  .fulfillment-column-card .dashboard-card-main .pill,
  .fulfillment-column-card .dashboard-card-pills {
    grid-column: 1 / -1;
    justify-self: start;
  }
  .embedded-activity-section {
    padding: 9px;
    border-radius: 15px;
  }
  .embedded-activity-section .section-head {
    align-items: flex-start;
  }
}

/* v5: lighter home dashboard + daily production reporting */
.screen[data-screen="home"] {
  background:
    radial-gradient(circle at 100% 0%, rgba(200,184,159,.18), transparent 38%),
    linear-gradient(180deg, #fbf7f1 0%, #f6efe7 100%);
  border-radius: 24px;
}
.nazzani-home-hero {
  padding: 10px;
  border-color: #e1d4c6;
  background: #fffaf4;
  box-shadow: 0 14px 34px rgba(78,61,45,.09);
}
.nazzani-home-logo {
  border-radius: 17px;
  background: #142237;
}
.nazzani-home-copy {
  margin-top: 8px;
  padding: 10px 7px 5px;
  border-top: 0;
  color: #342e29;
}
.nazzani-home-copy span {
  color: #8d7764;
}
.home-metric {
  border-color: #e2d6c9;
  background: linear-gradient(150deg, #fffdf9, #f8efe6);
  color: #2f2925;
  box-shadow: 0 10px 24px rgba(78,61,45,.07);
}
.home-metric span {
  color: #8e745f;
}
.home-metric small {
  color: #786b60;
}
.home-section {
  background: rgba(255,253,249,.94);
}
.home-action-icon {
  background: #eee3d7;
  color: #6f5947;
}
.production-ready-pair {
  margin-bottom: 16px;
}
.production-ready-card .production-column-head strong {
  color: #3f765e;
}
.production-daily-report-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
  padding: 12px;
  border: 1px solid #dfd3c7;
  border-radius: 16px;
  background: linear-gradient(145deg, #fbf5ee, #fffdf9);
}
.production-daily-report-card > div {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.production-daily-report-card > div > div {
  display: grid;
  gap: 3px;
  min-width: 0;
}
.production-daily-report-card strong {
  color: #342e29;
  font-size: 13px;
}
.production-daily-report-card small {
  color: #786b60;
  font-size: 11px;
  line-height: 1.35;
}
.production-daily-icon {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  flex: 0 0 36px;
  border-radius: 12px;
  background: #e6eee8;
  color: #3f765e;
  font-size: 17px;
  font-weight: 950;
}
.production-daily-panel {
  margin: 0 0 12px;
}
.production-daily-panel .movement-line {
  grid-template-columns: minmax(0, 1.35fr) minmax(80px, .8fr) minmax(72px, .55fr) 38px;
}
@media (max-width: 430px) {
  .production-daily-report-card {
    align-items: stretch;
    flex-direction: column;
  }
  .production-daily-report-card .primary-button {
    width: 100%;
  }
  .production-daily-panel .movement-line {
    grid-template-columns: minmax(0, 1fr) minmax(86px, .72fr) 38px;
  }
  .production-daily-panel .qty-line-field {
    grid-column: 1 / 3;
  }
}
.nazzani-home-logo {
  width: min(100%, 360px);
  margin: 0 auto;
}


/* v6: production worker overview + production actions inside journal */
.production-worker-overview[hidden] { display: none !important; }
.production-worker-mode .production-section-title,
.production-worker-mode #productionReadyPair,
.production-worker-mode .production-material-pair-title,
.production-worker-mode #dashboardDetail {
  display: none !important;
}
.worker-stock-pair {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin: 12px 0 16px;
}
.worker-stock-card {
  min-width: 0;
  border: 1px solid #dfd5ca;
  border-radius: 18px;
  background: #fffdf9;
  box-shadow: 0 9px 24px rgba(58, 46, 36, .07);
  overflow: hidden;
}
.worker-stock-card summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 12px;
  cursor: pointer;
  list-style: none;
  user-select: none;
}
.worker-stock-card summary::-webkit-details-marker { display: none; }
.worker-stock-card summary > span:first-child {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.worker-stock-card summary > span:first-child > span {
  display: grid;
  gap: 2px;
  min-width: 0;
}
.worker-stock-card summary strong {
  color: #2f2a26;
  font-size: 13px;
}
.worker-stock-card summary small {
  color: #8b7b6e;
  font-size: 9px;
  line-height: 1.25;
}
.worker-stock-card summary::after {
  content: "⌃";
  color: #8f7a66;
  font-weight: 900;
  transition: transform .18s ease;
}
.worker-stock-card:not([open]) summary::after { transform: rotate(180deg); }
.worker-stock-icon {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  flex: 0 0 30px;
  border-radius: 10px;
  background: #efe5da;
  color: #6f5947;
  font-size: 15px;
}
.worker-stock-total {
  margin-left: auto;
  color: #30483e;
  font-size: 12px;
  font-weight: 900;
  white-space: nowrap;
}
.worker-stock-detail {
  padding: 0 8px 9px;
  border-top: 1px solid #eee5dc;
}
.worker-stock-detail .dashboard-card-list,
.worker-stock-detail .dashboard-card-list.two-col {
  grid-template-columns: 1fr;
  gap: 7px;
  padding-top: 8px;
}
.worker-stock-detail .dashboard-card-main {
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 7px;
  padding: 8px;
}
.worker-stock-detail .dashboard-thumb {
  width: 34px;
  height: 34px;
}
.worker-stock-detail .dashboard-card-main .pill,
.worker-stock-detail .dashboard-card-pills {
  grid-column: 1 / -1;
  justify-self: start;
}
.production-journal-hint,
.worker-operation-hint {
  padding: 10px 12px;
  border: 1px dashed #d5c5b5;
  border-radius: 14px;
  background: #fbf5ed;
  color: #706257;
  font-size: 11px;
  line-height: 1.45;
}
.production-journal-hint { margin-bottom: 10px; }
.worker-operation-hint {
  display: grid;
  gap: 3px;
  margin: 0 0 10px;
}
.worker-operation-hint[hidden] { display: none !important; }
.worker-operation-hint strong { color: #352f2a; font-size: 13px; }
.worker-operation-hint span { color: #7d7065; font-size: 11px; }
@media (max-width: 430px) {
  .worker-stock-pair { gap: 7px; }
  .worker-stock-card { border-radius: 14px; }
  .worker-stock-card summary { padding: 9px 8px; align-items: flex-start; flex-wrap: wrap; }
  .worker-stock-icon { width: 27px; height: 27px; flex-basis: 27px; }
  .worker-stock-total { width: 100%; margin: 2px 0 0 35px; font-size: 11px; }
  .worker-stock-card summary::after { position: absolute; right: 8px; }
  .worker-stock-card summary { position: relative; }
}


/* v7: strict worker navigation + collapsed journals */
body[data-role="production_kurtan"] .main-bottom-nav [data-nav],
body[data-role="production_vaagni"] .main-bottom-nav [data-nav],
body[data-role="fulfillment"] .main-bottom-nav [data-nav] {
  display: none !important;
}
body[data-role="production_kurtan"] .main-bottom-nav [data-nav="dashboard"],
body[data-role="production_kurtan"] .main-bottom-nav [data-nav="transit"],
body[data-role="production_vaagni"] .main-bottom-nav [data-nav="dashboard"],
body[data-role="production_vaagni"] .main-bottom-nav [data-nav="transit"],
body[data-role="fulfillment"] .main-bottom-nav [data-nav="fulfillment"],
body[data-role="fulfillment"] .main-bottom-nav [data-nav="transit"] {
  display: flex !important;
}

.collapsible-journal {
  padding: 0;
  overflow: hidden;
}
.collapsible-journal-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 15px;
  cursor: pointer;
  list-style: none;
  user-select: none;
  background: linear-gradient(145deg, #fffdf9, #f7f0e8);
}
.collapsible-journal-summary::-webkit-details-marker { display: none; }
.collapsible-journal-summary > span {
  display: grid;
  gap: 3px;
  min-width: 0;
}
.collapsible-journal-summary strong {
  color: #342f2a;
  font-size: 15px;
}
.collapsible-journal-summary small {
  color: #7f7165;
  font-size: 11px;
  line-height: 1.35;
}
.collapsible-journal-summary > b {
  color: #7c6755;
  font-size: 11px;
  white-space: nowrap;
}
.collapsible-journal-summary > b::after {
  content: "⌄";
  display: inline-block;
  margin-left: 6px;
  transition: transform .18s ease;
}
.collapsible-journal[open] .collapsible-journal-summary > b::after {
  transform: rotate(180deg);
}
.collapsible-journal[open] .collapsible-journal-summary > b {
  font-size: 0;
}
.collapsible-journal[open] .collapsible-journal-summary > b::before {
  content: "Свернуть";
  font-size: 11px;
}
.collapsible-journal-body {
  padding: 0 12px 12px;
  border-top: 1px solid #eadfd4;
}
.collapsible-journal-body .production-journal-hint { margin-top: 12px; }
.journal-open-full {
  width: 100%;
  margin-top: 10px;
  justify-content: center;
}


/* v8 — CEO quick journal action on the home screen */
.ceo-home-journal-fab {
  background: linear-gradient(145deg, #bca98f, #8f765c) !important;
  color: #fff !important;
  box-shadow: 0 14px 32px rgba(74, 55, 38, .28) !important;
}
.ceo-home-journal-fab[hidden] {
  display: none !important;
}

/* Material lots / fabric rolls */
.movement-line {
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1.15fr) minmax(96px, .7fr) minmax(110px, .78fr) 42px;
}

.movement-line .material-line-field {
  grid-column: auto;
}

.material-lot-select-field {
  grid-column: span 2;
}

.material-rolls-field,
.material-lot-average {
  min-width: 0;
}

.material-lot-average {
  min-height: 42px;
  padding: 7px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f8f5ef;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
}

.material-lot-average span {
  font-size: 11px;
  color: var(--muted);
}

.material-lot-average strong {
  font-size: 13px;
  color: var(--ink);
}

.material-lots-section {
  margin-top: 14px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: rgba(255,255,255,.82);
  overflow: hidden;
}

.material-lots-section > summary {
  list-style: none;
  cursor: pointer;
  padding: 14px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: #f5f0e7;
}

.material-lots-section > summary::-webkit-details-marker { display: none; }
.material-lots-section > summary span { display: grid; gap: 3px; }
.material-lots-section > summary small { color: var(--muted); font-weight: 500; }
.material-lots-section > summary b { font-size: 12px; color: var(--muted); }
.material-lots-section[open] > summary b { font-size: 0; }
.material-lots-section[open] > summary b::after { content: "Свернуть"; font-size: 12px; }
.material-lots-section:not([open]) > summary b { font-size: 0; }
.material-lots-section:not([open]) > summary b::after { content: "Открыть"; font-size: 12px; }

.material-lots-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  padding: 12px;
}

.material-lot-card {
  padding: 13px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
  display: grid;
  gap: 10px;
}

.material-lot-card.is-unassigned { background: #fbf8f2; }
.material-lot-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.material-lot-card-head > div { display: grid; gap: 3px; }
.material-lot-card-head strong { font-size: 14px; }
.material-lot-card-head span:not(.pill) { color: var(--muted); font-size: 12px; }
.material-lot-kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; }
.material-lot-kpis > span { padding: 8px; border-radius: 9px; background: #f7f3ec; display: grid; gap: 2px; }
.material-lot-kpis small { color: var(--muted); font-size: 10px; }
.material-lot-kpis b { font-size: 13px; }
.material-lot-meta { font-size: 11px; color: var(--muted); line-height: 1.4; }

@media (max-width: 759px) {
  .movement-line {
    grid-template-columns: minmax(0, 1fr) minmax(84px, .8fr) 42px;
  }
  .movement-line .product-line-field:first-child,
  .movement-line .size-line-field,
  .movement-line .material-line-field,
  .movement-line .material-lot-select-field,
  .movement-line .material-rolls-field,
  .movement-line .qty-line-field,
  .movement-line .material-lot-average {
    grid-column: span 2;
  }
  .material-lots-grid { grid-template-columns: 1fr; }
  .material-lot-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* v10: user management and journal filters */
.journal-filter-panel {
  display: grid;
  grid-template-columns: minmax(135px, .75fr) minmax(180px, 1fr) minmax(220px, 1.5fr) auto;
  gap: 10px;
  align-items: end;
  margin: 12px 0;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: rgba(255,255,255,.72);
}
.journal-filter-panel label {
  display: grid;
  gap: 6px;
  min-width: 0;
  color: var(--muted);
  font-size: 11px;
  font-weight: 850;
}
.journal-filter-panel input,
.journal-filter-panel select {
  width: 100%;
  min-width: 0;
  min-height: 42px;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 9px 11px;
  background: var(--surface);
  color: var(--text);
}
.journal-clear-filters { min-height: 42px; }

.access-create-card {
  margin-bottom: 14px;
  border-color: rgba(20,34,55,.22);
  background: linear-gradient(145deg, #fffaf4, #f7efe5);
}
.access-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 10px;
}
.access-user-card select {
  width: 100%;
  min-height: 44px;
  border: 1px solid #dccfc1;
  border-radius: 13px;
  padding: 10px 12px;
  background: #fff;
  color: #2b2622;
}
.access-role-help {
  padding: 10px 12px;
  border-radius: 13px;
  background: rgba(20,34,55,.06);
  color: #675c53;
  font-size: 11px;
  line-height: 1.45;
}
.access-user-actions {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
}

@media (max-width: 760px) {
  .journal-filter-panel { grid-template-columns: 1fr 1fr; }
  .journal-search-label { grid-column: 1 / -1; }
  .journal-clear-filters { grid-column: 1 / -1; }
}
@media (max-width: 520px) {
  .journal-filter-panel,
  .access-form-grid { grid-template-columns: 1fr; }
  .journal-search-label,
  .journal-clear-filters { grid-column: auto; }
}


/* v11: recipe editor / copy dialog */
.recipe-copy-dialog {
  width: min(460px, calc(100vw - 32px));
  border: 0;
  border-radius: 18px;
  padding: 0;
  color: inherit;
  background: #fffdf8;
  box-shadow: 0 22px 72px rgba(20, 34, 55, 0.28);
}
.recipe-copy-dialog::backdrop { background: rgba(20, 34, 55, 0.42); }
.compact-dialog-form { margin: 0; padding: 18px; min-width: 0; }
.copy-source-note { margin: 0 0 12px; color: var(--muted, #667085); font-size: 13px; }
.record-head .row-actions { display: flex; align-items: center; justify-content: flex-end; gap: 6px; flex-wrap: wrap; }
@media (max-width: 640px) {
  .recipe-copy-dialog { width: calc(100vw - 20px); }
  .record-head .row-actions { justify-content: flex-start; width: 100%; margin-top: 8px; }
}


/* v16.3: explicit operation result, visible on every protected operation */
.operation-notice {
  position: fixed;
  z-index: 600;
  top: max(18px, env(safe-area-inset-top));
  left: 50%;
  transform: translateX(-50%);
  width: min(680px, calc(100vw - 28px));
  min-height: 94px;
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr) 36px;
  align-items: center;
  gap: 13px;
  padding: 16px 16px 16px 18px;
  border-radius: 16px;
  color: #fff;
  box-shadow: 0 18px 52px rgba(20, 34, 55, .32);
}
.operation-notice[hidden] { display: none !important; }
.operation-notice.is-success { background: linear-gradient(135deg, #087443, #0d9256); }
.operation-notice.is-error { background: linear-gradient(135deg, #a91e2e, #d43849); }
.operation-notice.is-error .operation-notice-icon { background: rgba(255,255,255,.18); }
.operation-notice.is-error .operation-notice-icon::before { content: "!"; }
.operation-notice.is-error .operation-notice-icon { font-size: 0; }
.operation-notice.is-error .operation-notice-icon::before { font-size: 27px; }
.operation-notice-icon {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: rgba(255,255,255,.2);
  font-size: 24px;
  font-weight: 900;
}
.operation-notice-body { min-width: 0; display: grid; gap: 4px; }
.operation-notice-body strong { font-size: 17px; line-height: 1.2; }
.operation-notice-body p { margin: 0; font-size: 14px; line-height: 1.4; color: rgba(255,255,255,.96); overflow-wrap: anywhere; }
.operation-notice-close {
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 10px;
  background: rgba(255,255,255,.14);
  color: #fff;
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
}
.operation-notice-close:hover { background: rgba(255,255,255,.24); }
.is-auto-document input { background: #f7f3ec; color: var(--muted); cursor: not-allowed; }
.material-lot-thumb {
  width: 46px;
  height: 46px;
  flex: 0 0 46px;
  overflow: hidden;
  border-radius: 10px;
  background: #f4efe7;
}
.material-lot-thumb img,
.material-lot-thumb .image-placeholder { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 520px) {
  .operation-notice { top: 12px; grid-template-columns: 40px minmax(0, 1fr) 32px; gap: 10px; padding: 13px; min-height: 86px; }
  .operation-notice-icon { width: 38px; height: 38px; font-size: 21px; }
  .operation-notice-body strong { font-size: 15px; }
  .operation-notice-body p { font-size: 13px; }
}

/* Core 1.0 draft layer. Uses existing cards/forms so the operational interface stays familiar. */
.core-hero { margin-bottom: 14px; }
.core-grid { display:grid; gap:14px; }
.core-grid.two { grid-template-columns:repeat(2,minmax(0,1fr)); }
.core-card { background:var(--card,#fff); border:1px solid rgba(20,34,55,.10); border-radius:18px; padding:15px; box-shadow:0 8px 25px rgba(15,24,39,.05); }
.core-card h3 { margin:0 0 5px; font-size:17px; }
.core-card p { margin:0 0 12px; color:var(--muted,#64748b); font-size:13px; line-height:1.45; }
.core-kpi { display:flex; gap:10px; flex-wrap:wrap; margin:10px 0 0; }
.core-kpi span { display:inline-flex; flex-direction:column; border-radius:12px; background:rgba(20,34,55,.05); padding:8px 10px; min-width:98px; }
.core-kpi small { color:var(--muted,#64748b); font-size:11px; }
.core-kpi strong { font-size:15px; }
.core-status { display:inline-flex; align-items:center; gap:7px; padding:6px 10px; border-radius:999px; background:rgba(59,130,246,.10); color:#1d4ed8; font-size:12px; font-weight:700; }
.core-location-list { display:grid; gap:8px; margin-top:10px; }
.core-location-row { display:flex; align-items:center; justify-content:space-between; gap:10px; border:1px solid rgba(20,34,55,.09); border-radius:12px; padding:10px; }
.core-location-row strong { display:block; font-size:14px; }
.core-location-row small { display:block; margin-top:2px; color:var(--muted,#64748b); }
.core-location-row.is-complete { border-color:rgba(16,185,129,.35); background:rgba(16,185,129,.06); }
.core-location-row.is-missing { border-color:rgba(245,158,11,.36); background:rgba(245,158,11,.06); }
.core-line { display:flex; align-items:center; gap:10px; padding:9px 0; border-bottom:1px solid rgba(20,34,55,.08); }
.core-line:last-child { border-bottom:0; }
.core-line img { width:38px; height:38px; object-fit:cover; border-radius:10px; background:#f2f2f2; }
.core-line .core-line-main { flex:1; min-width:0; }
.core-line .core-line-main strong, .core-line .core-line-main span { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.core-line .core-line-main span { color:var(--muted,#64748b); font-size:12px; margin-top:2px; }
.core-line .core-line-qty { text-align:right; white-space:nowrap; font-size:13px; }
.core-line .core-line-qty small { display:block; color:var(--muted,#64748b); }
.core-section-head { display:flex; align-items:center; justify-content:space-between; gap:10px; margin:18px 0 10px; }
.core-section-head h3 { margin:0; font-size:18px; }
.core-hint { margin:0; padding:10px 12px; border-left:3px solid #1d4ed8; background:rgba(59,130,246,.07); color:#314057; font-size:13px; line-height:1.45; border-radius:0 12px 12px 0; }
.core-form-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
.core-form-grid .wide { grid-column:1/-1; }
.core-empty { padding:14px; border:1px dashed rgba(20,34,55,.22); border-radius:12px; color:var(--muted,#64748b); font-size:13px; }
@media (max-width:720px) { .core-grid.two,.core-form-grid { grid-template-columns:1fr; } .core-form-grid .wide { grid-column:auto; } }

/* Core operational workspaces are embedded into the existing FF and production
   screens. They intentionally reuse the current visual language rather than
   creating a second application. */
.core-embedded-workspace { margin: 14px 0; }
.core-worker-card { border-color: rgba(29,78,216,.18); }
.core-worker-card > .section-head { align-items: flex-start; }
.core-worker-card > .section-head > div:last-child { display:flex; align-items:center; gap:8px; flex-wrap:wrap; justify-content:flex-end; }
.core-worker-inventory { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; margin-top:13px; }
.core-worker-inventory > div { border:1px solid rgba(20,34,55,.09); border-radius:13px; padding:11px; background:rgba(250,249,247,.75); }
.core-worker-inventory h4,.core-worker-actions h4,.core-worker-receipts h4 { margin:0 0 9px; font-size:14px; }
.core-worker-list { display:grid; gap:7px; }
.core-worker-row { display:grid; grid-template-columns:34px minmax(0,1fr) auto; gap:8px; align-items:center; padding:7px 0; border-bottom:1px solid rgba(20,34,55,.07); }
.core-worker-row:last-child { border-bottom:0; }
.core-worker-thumb { width:34px; height:34px; overflow:hidden; border-radius:9px; background:#f4efe7; display:grid; place-items:center; }
.core-worker-thumb img { display:block; width:100%; height:100%; object-fit:cover; }
.core-worker-row strong,.core-worker-row small { display:block; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
.core-worker-row strong { font-size:12px; }
.core-worker-row small { color:var(--muted,#64748b); font-size:11px; margin-top:2px; }
.core-worker-row b { white-space:nowrap; font-size:12px; }
.core-worker-actions,.core-worker-receipts { margin-top:14px; }
.core-operation-form,.compact-core-form { margin:0; }
.compact-core-form { padding:10px 0; border-bottom:1px solid rgba(20,34,55,.08); }
.compact-core-form:last-child { border-bottom:0; }
.compact-core-form p { margin:0 0 7px; }
.core-worker-journal { margin-top:14px; }
@media (max-width:720px) {
  .core-worker-inventory { grid-template-columns:1fr; }
  .core-worker-card > .section-head { display:grid; grid-template-columns:1fr; }
  .core-worker-card > .section-head > div:last-child { justify-content:flex-start; }
}

.core-valuation-card { margin-bottom: 6px; }
.core-valuation-total { font-size:18px; white-space:nowrap; }
.core-valuation-kpi { display:flex; gap:10px; flex-wrap:wrap; margin:10px 0 13px; }
.core-valuation-kpi span { min-width:145px; padding:9px 11px; border-radius:12px; background:rgba(20,34,55,.05); display:flex; flex-direction:column; }
.core-valuation-kpi small,.core-valuation-subtitle { color:var(--muted,#64748b); font-size:11px; }
.core-valuation-locations { display:grid; gap:10px; }
.core-valuation-location { border:1px solid rgba(20,34,55,.09); border-radius:13px; padding:11px; }
.core-valuation-location .section-head { margin:0 0 8px; }
.core-valuation-location h4 { margin:0; font-size:14px; }
.core-valuation-subtitle { margin:9px 0 4px; font-weight:700; text-transform:uppercase; letter-spacing:.03em; }
.core-valuation-row { display:grid; grid-template-columns:minmax(0,1fr) auto auto; gap:10px; padding:6px 0; border-bottom:1px solid rgba(20,34,55,.07); font-size:12px; }
.core-valuation-row:last-child { border-bottom:0; }
.core-valuation-row span { overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
.core-valuation-row b,.core-valuation-row em { white-space:nowrap; font-style:normal; }
@media (max-width:520px) { .core-valuation-row { grid-template-columns:minmax(0,1fr) auto; } .core-valuation-row em { grid-column:2; } }

/* Core: multi-line production output stays inside the familiar production UI. */
.core-output-lines { display: grid; gap: 10px; }
.core-output-line { display: grid; grid-template-columns: minmax(180px, 1fr) minmax(130px, .55fr) auto; gap: 10px; align-items: end; padding: 10px; border: 1px solid rgba(148,139,131,.24); border-radius: 12px; background: rgba(255,255,255,.48); }
.core-output-line > label { min-width: 0; }
.core-output-line .icon-button { margin-bottom: 1px; }
@media (max-width: 680px) { .core-output-line { grid-template-columns: 1fr; } .core-output-line .icon-button { justify-self: end; } }
.core-transfer-open-roll { align-self: center; padding-bottom: 6px; }
@media (max-width: 680px) { .core-transfer-open-roll { padding-bottom: 0; } }


/* Core CEO document journal: filtering and immutable document detail. */
.core-document-journal-card { margin-top: 2px; }
.core-journal-filters { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:9px; align-items:end; margin:12px 0; }
.core-journal-filters label { display:grid; gap:4px; min-width:0; color:var(--muted,#64748b); font-size:11px; font-weight:700; }
.core-journal-filters input,.core-journal-filters select { min-width:0; }
.core-journal-filters .wide { grid-column:span 2; }
.core-journal-record { overflow:hidden; }
.core-journal-open { display:block; width:100%; padding:0; border:0; background:transparent; color:inherit; text-align:left; cursor:pointer; }
.core-journal-open:hover .record-title strong { text-decoration:underline; }
.core-document-detail { margin-top:10px; padding:11px; border:1px solid rgba(20,34,55,.10); border-radius:14px; background:rgba(248,245,240,.74); }
.core-document-detail-head { display:flex; align-items:flex-start; justify-content:space-between; gap:10px; }
.core-document-detail-head > div { display:grid; gap:3px; min-width:0; }
.core-document-detail-head small,.core-document-row small { color:var(--muted,#64748b); font-size:11px; line-height:1.35; }
.core-document-comment { margin:9px 0; color:var(--muted,#64748b); font-size:12px; white-space:pre-wrap; }
.core-document-section { margin-top:10px; }
.core-document-section h4 { margin:0 0 6px; font-size:12px; color:#342e29; }
.core-document-row { display:grid; grid-template-columns:minmax(0,1fr) auto auto; gap:8px; align-items:center; padding:7px 0; border-top:1px solid rgba(20,34,55,.08); font-size:12px; }
.core-document-row > div { display:grid; gap:2px; min-width:0; }
.core-document-row b { text-align:right; font-size:12px; white-space:nowrap; }
.core-document-row em { color:#5b6d64; font-style:normal; font-size:11px; white-space:nowrap; }
.core-document-json { max-height:220px; overflow:auto; padding:9px; border-radius:10px; background:#172233; color:#e8edf5; font-size:10px; line-height:1.35; white-space:pre-wrap; }
@media (max-width: 660px) { .core-journal-filters { grid-template-columns:repeat(2,minmax(0,1fr)); } .core-journal-filters .wide { grid-column:1 / -1; } .core-document-row { grid-template-columns:minmax(0,1fr) auto; } .core-document-row em { grid-column:2; } }