:root {
  --bg: #f3f5f1;
  --surface: #fffefa;
  --surface-strong: #ffffff;
  --ink: #202123;
  --muted: #66706b;
  --line: #d8ded4;
  --green: #2f6f4e;
  --green-dark: #1f4d36;
  --blue: #265b8c;
  --red: #a43f3f;
  --amber: #b7791f;
  --shadow: 0 8px 22px rgba(31, 45, 37, 0.08);
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-height: 100vh;
  color: var(--ink);
  background: var(--bg);
  font-family: Arial, Helvetica, sans-serif;
}

.login-screen {
  display: grid;
  min-height: 100vh;
  place-items: center;
  padding: 24px;
  background: linear-gradient(135deg, #edf5ef 0%, #ffffff 52%, #f5f1e8 100%);
}

.login-screen.hidden {
  display: none;
}

.public-screen {
  display: grid;
  min-height: 100vh;
  place-items: start center;
  padding: 24px;
  background: linear-gradient(135deg, #edf5ef 0%, #ffffff 52%, #f5f1e8 100%);
}

.public-screen.hidden {
  display: none;
}

.login-card {
  display: grid;
  gap: 14px;
  width: min(420px, 100%);
  padding: 28px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #ffffff;
  box-shadow: 0 18px 50px rgba(36, 48, 43, 0.16);
}

.login-card img {
  width: 118px;
  max-height: 76px;
  object-fit: contain;
}

.public-card {
  display: grid;
  gap: 14px;
  width: min(860px, 100%);
  padding: 22px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #ffffff;
  box-shadow: 0 18px 50px rgba(36, 48, 43, 0.16);
}

.public-card-head {
  display: flex;
  gap: 14px;
  align-items: center;
}

.public-card-head img {
  width: 88px;
  max-height: 62px;
  object-fit: contain;
}

.login-card h1,
.login-card p,
.public-card h1,
.public-card p {
  margin: 0;
}

.login-card h1,
.public-card h1 {
  font-size: 30px;
}

.login-card p,
.public-card p,
#loginMessage,
.public-message {
  color: var(--muted);
}

.public-message.error {
  color: #8e3d37;
  font-weight: 700;
}

.login-version {
  display: inline-block;
  width: max-content;
  padding: 6px 9px;
  border-radius: 999px;
  color: #23422d;
  background: #e7f4e7;
  font-size: 12px;
}

#loginMessage {
  min-height: 22px;
  padding: 8px 10px;
  border: 1px solid #dbe7df;
  border-radius: 7px;
  background: #f7faf6;
  font-size: 14px;
  line-height: 1.35;
}

.login-card label {
  display: grid;
  gap: 6px;
  font-weight: 700;
}

.login-card input,
.public-card input,
.public-card select,
.public-card textarea {
  height: 44px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--surface-strong);
}

.public-card textarea {
  min-height: 86px;
  padding: 10px 12px;
}

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

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

.public-availability {
  display: grid;
  gap: 8px;
}

#loginMessage.error {
  color: #b42318;
  border-color: #f3c6c2;
  background: #fff5f4;
}

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

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

.app-shell.app-locked {
  display: none;
}

.sidebar {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 20px;
  background: #26352d;
  color: #f9faf7;
}

.sidebar-pin {
  position: absolute;
  top: 10px;
  right: 8px;
  z-index: 2;
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 7px;
  color: #ffffff;
  background: rgba(255, 255, 255, 0.08);
  cursor: pointer;
}

.sidebar-pin:hover,
.sidebar-pin.is-pinned {
  background: rgba(255, 255, 255, 0.18);
}

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

.brand-mark {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 8px;
  background: #ffffff;
  color: #1d2a22;
  font-weight: 800;
  overflow: hidden;
}

.brand-mark img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.brand-logos {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 8px;
  padding: 8px;
  background: rgba(255, 255, 255, 0.06);
}

.brand-logos img {
  width: 100%;
  max-height: 66px;
  object-fit: contain;
  border-radius: 6px;
  background: #ffffff;
}

.shop-link {
  display: grid;
  place-items: center;
  min-height: 38px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 7px;
  color: #f9faf7;
  text-decoration: none;
  background: rgba(255, 255, 255, 0.08);
  font-size: 14px;
  font-weight: 700;
}

.shop-link:hover {
  background: rgba(255, 255, 255, 0.14);
}

.brand h1,
.brand p,
.topbar h2,
.topbar p,
.panel h3,
.entry-form h3 {
  margin: 0;
}

.brand h1 {
  font-size: 20px;
}

.brand p {
  margin-top: 3px;
  color: #c7d2cc;
  font-size: 13px;
}

.nav {
  display: grid;
  gap: 6px;
}

.nav-item,
.ghost-button,
.danger-button,
.primary-button {
  min-height: 42px;
  border: 0;
  border-radius: 7px;
  cursor: pointer;
}

.nav-item {
  padding: 0 12px;
  text-align: left;
  color: #e8eee9;
  background: transparent;
}

.nav-item:hover,
.nav-item.active {
  background: rgba(255, 255, 255, 0.12);
}

.sidebar-footer {
  display: grid;
  gap: 10px;
  margin-top: auto;
}

.ghost-button {
  padding: 0 14px;
  color: var(--green-dark);
  background: #edf5ef;
  border: 1px solid #cadbce;
}

.file-import-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.file-input-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
  padding: 0;
  margin: -1px;
}

.danger-button {
  padding: 0 14px;
  color: #ffffff;
  background: #8e3d37;
}

.primary-button {
  padding: 0 16px;
  color: #ffffff;
  background: var(--green);
}

.workspace {
  min-width: 0;
  padding: 20px;
}

.topbar {
  position: sticky;
  top: 0;
  z-index: 4;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin: -20px -20px 18px;
  padding: 16px 20px;
  border-bottom: 1px solid var(--line);
  background: rgba(243, 245, 241, 0.94);
  backdrop-filter: blur(8px);
}

.eyebrow {
  color: var(--muted);
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0;
}

.topbar h2 {
  margin-top: 4px;
  font-size: 28px;
}

.auth-box {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  min-width: 220px;
}

.auth-box span {
  color: var(--muted);
  font-size: 13px;
  text-align: right;
}

#appStatusLabel {
  color: #52705d;
  font-size: 12px;
}

.cloud-safety-badge {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 5px 9px;
  border: 1px solid rgba(45, 89, 54, 0.22);
  border-radius: 7px;
  background: #eef7ed;
  color: #1e5d34 !important;
  font-size: 12px !important;
  font-weight: 800;
  white-space: nowrap;
}

.cloud-safety-badge.saving {
  border-color: #d6a13b;
  background: #fff4d9;
  color: #6c4611 !important;
}

.cloud-safety-badge.error,
.cloud-safety-badge.offline {
  border-color: #d9a4a4;
  background: #fff0ef;
  color: #8a2d25 !important;
}

.pending-cloud-button {
  border-color: #d69b32;
  background: #fff4d9;
  color: #6c4611;
  font-weight: 800;
}

.excel-database-tools {
  gap: 14px;
}

.excel-import-mode {
  display: grid;
  grid-template-columns: minmax(120px, auto) minmax(240px, 360px);
  align-items: center;
  gap: 12px;
  max-width: 520px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
}

.excel-import-mode select {
  width: 100%;
  min-height: 40px;
  border: 1px solid var(--line);
  border-radius: 7px;
  padding: 0 10px;
  background: var(--surface-strong);
}

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

.excel-area-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  min-height: 62px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--surface-strong);
}

.excel-area-row:nth-child(even) {
  background: #f1f4ed;
}

.excel-area-row > div:first-child {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.excel-area-row span {
  color: var(--muted);
  font-size: 12px;
}

.excel-area-row .form-actions {
  flex-wrap: nowrap;
}

.excel-area-all {
  grid-column: 1 / -1;
  border-color: #82a97d;
  background: #e9f3e5;
}

.excel-import-preview {
  display: grid;
  gap: 4px;
  padding: 12px;
  border: 1px solid #d69b32;
  border-radius: 7px;
  background: #fff4d9;
  color: #6c4611;
}

.search {
  display: grid;
  gap: 6px;
  color: var(--muted);
  font-size: 12px;
}

.search input {
  width: min(360px, 38vw);
  height: 42px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--surface-strong);
}

.view {
  display: none;
}

.view.active {
  display: block;
}

.metrics-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(160px, 1fr));
  gap: 14px;
  margin-bottom: 18px;
}

.metric,
.panel,
.entry-form {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  box-shadow: var(--shadow);
}

.metric {
  padding: 18px;
}

.metric-button {
  cursor: pointer;
  text-align: left;
  color: inherit;
  font: inherit;
}

.metric-button:hover {
  border-color: var(--green);
}

.metric span {
  display: block;
  color: var(--muted);
  font-size: 13px;
}

.metric strong {
  display: block;
  margin-top: 10px;
  font-size: 26px;
}

.metric small {
  display: block;
  margin-top: 8px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
}

.panel-grid {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 18px;
}

.documents-grid {
  margin-top: 18px;
  grid-template-columns: minmax(280px, 0.85fr) minmax(420px, 1.25fr);
  align-items: start;
}

.panel {
  padding: 18px;
}

.panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}

.panel-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  flex-wrap: wrap;
}

.panel-actions label,
.document-form label {
  display: grid;
  gap: 5px;
  color: var(--muted);
  font-size: 12px;
}

.panel-actions input,
.panel-actions select,
.document-form input {
  min-height: 38px;
  border: 1px solid var(--line);
  border-radius: 7px;
  padding: 7px 10px;
  background: #ffffff;
}

.filter-actions {
  display: grid;
  grid-template-columns: auto 150px 132px 108px 96px 132px auto;
  align-items: end;
  width: min(100%, 860px);
}

.filter-actions input,
.filter-actions select {
  min-height: 34px;
  padding: 5px 8px;
  font-size: 13px;
}

.panel-header h3,
.entry-form h3 {
  font-size: 18px;
}

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

.split-layout {
  display: grid;
  grid-template-columns: minmax(650px, 820px) minmax(300px, 1fr);
  gap: 18px;
  align-items: start;
}

#orders .split-layout {
  grid-template-columns: 1fr;
}

.span-2 {
  grid-column: 1 / -1;
}

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

#orderForm:not(.order-form-modal) {
  position: sticky;
  top: 86px;
  max-height: calc(100vh - 104px);
  overflow: auto;
}

.order-form-modal {
  position: fixed;
  inset: 18px;
  z-index: 80;
  width: min(1180px, calc(100vw - 36px));
  max-height: calc(100vh - 36px);
  margin: auto;
  border: 1px solid rgba(39, 67, 48, 0.18);
  border-radius: 10px;
  overflow: auto;
  background: #ffffff;
  box-shadow: 0 24px 80px rgba(20, 31, 24, 0.28);
}

.modal-form-head {
  position: sticky;
  top: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: -18px -18px 6px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--line);
  background: #ffffff;
}

.entry-form label {
  display: grid;
  gap: 6px;
  color: var(--muted);
  font-size: 13px;
}

.entry-form input,
.entry-form select,
.entry-form textarea {
  width: 100%;
  min-height: 42px;
  border: 1px solid var(--line);
  border-radius: 7px;
  padding: 8px 10px;
  color: var(--ink);
  background: #ffffff;
}

.order-top-grid {
  display: grid;
  grid-template-columns: 96px 220px minmax(220px, 360px);
  gap: 10px;
  align-items: end;
}

#orderForm input[name="number"] {
  text-align: center;
}

#orderForm input[name="receivedDate"],
#orderForm input[name="processDate"] {
  max-width: 220px;
}

#orderForm input[name="customer"] {
  max-width: 360px;
}

.short-field {
  max-width: 180px;
}

.process-date-field {
  max-width: 240px;
}

.compact-fields {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  border: 1px solid #dfe7da;
  border-radius: 8px;
  padding: 10px;
  background: #f8faf6;
}

.entry-form input[readonly] {
  color: var(--green-dark);
  background: #edf5ef;
  font-weight: 700;
}

.package-picker {
  display: grid;
  gap: 8px;
}

.package-picker > span {
  color: var(--muted);
  font-size: 13px;
}

.package-grid {
  display: grid;
  gap: 8px;
}

.package-option {
  display: grid;
  grid-template-columns: 20px minmax(100px, 1fr) 82px 82px 76px minmax(130px, 1fr) 72px;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--line);
  border-radius: 7px;
  padding: 8px;
  background: #ffffff;
}

.package-option-head {
  border: 0;
  padding: 0 8px;
  color: var(--muted);
  background: transparent;
  font-size: 12px;
  font-weight: 700;
}

.package-option input[type="checkbox"] {
  width: 18px;
  min-height: 18px;
}

.package-option input[type="number"] {
  min-height: 36px;
  padding: 5px 8px;
}

.package-option input[readonly] {
  background: #edf5ef;
}

.public-package-option,
.public-package-head {
  grid-template-columns: 20px minmax(120px, 1fr) 92px 82px 76px;
}

.remainder-choice {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  font-size: 12px;
}

.remainder-choice input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.remainder-choice span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 32px;
  min-width: 62px;
  border: 1px solid #cddacb;
  border-radius: 7px;
  color: var(--muted);
  background: #f8faf6;
  font-weight: 800;
}

.remainder-choice input:focus-visible + span {
  outline: 2px solid #3f7c4a;
  outline-offset: 2px;
}

.remainder-choice input:checked + span {
  color: #ffffff;
  border-color: #3f7c4a;
  background: #3f7c4a;
}

.package-liters {
  color: var(--green-dark);
  font-size: 12px;
}

.package-prep {
  color: var(--blue);
  font-size: 12px;
  line-height: 1.25;
}

.mix-additives {
  display: grid;
  gap: 8px;
}

.mix-head,
.mix-row {
  display: grid;
  grid-template-columns: minmax(110px, 1fr) 88px 102px;
  align-items: center;
  gap: 8px;
}

.mix-head {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.mix-row {
  border: 1px solid var(--line);
  border-radius: 7px;
  padding: 8px;
  background: #ffffff;
}

.mix-row span {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 13px;
}

.checkbox-line {
  display: flex !important;
  align-items: center;
  gap: 8px !important;
  border: 1px solid #c6d8c9;
  border-radius: 7px;
  padding: 9px 10px;
  color: var(--green-dark) !important;
  background: #eff8f0;
  font-weight: 700;
}

.checkbox-line input {
  width: 18px !important;
  min-height: 18px !important;
}

.public-consent {
  align-items: flex-start;
  color: var(--muted) !important;
  line-height: 1.35;
}

.form-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.form-actions button,
.panel-actions button,
.document-form button {
  min-width: 120px;
}

.settings-form {
  display: grid;
  gap: 12px;
}

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

#employeeForm .form-actions {
  grid-column: 1 / -1;
}

#employeeForm .wide-form-field {
  grid-column: 1 / -1;
}

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

#sipProfitForm,
#coldStorageForm {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

#sipProfitForm button,
#sipProfitResult,
#coldStorageForm .form-actions {
  grid-column: 1 / -1;
}

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

.calculation-form fieldset {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin: 0;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: #fbfcf7;
}

.calculation-form legend {
  padding: 0 6px;
  font-weight: 800;
  color: #263629;
}

.calculation-form .calculation-box,
.calculation-form .form-actions {
  grid-column: 1 / -1;
}

.calculation-ingredient-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(220px, 1fr));
  gap: 12px;
}

.calculation-ingredient-card {
  display: grid;
  gap: 9px;
  min-width: 0;
  border: 1px solid #d8e1d2;
  border-radius: 8px;
  padding: 12px;
  background: #ffffff;
}

.calculation-ingredient-card > strong {
  color: var(--green-dark);
  font-size: 15px;
}

.calculation-mix-options {
  display: grid;
  gap: 8px;
}

.calculation-mix-row {
  display: grid;
  grid-template-columns: minmax(190px, 1fr) minmax(130px, 0.7fr) minmax(110px, 0.55fr) auto;
  gap: 10px;
  align-items: end;
  border: 1px solid #d8e1d2;
  border-radius: 8px;
  padding: 10px;
  background: #ffffff;
}

.calculation-mix-row > span {
  align-self: center;
  color: var(--green-dark);
  font-weight: 800;
}

.calculation-comparison-table td,
.calculation-comparison-table th {
  font-size: 12px;
}

#workLogForm {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  align-items: end;
}

#workLogForm .work-employee-field,
#workLogForm .work-calc-field,
#workLogForm .work-note-field {
  grid-column: 1 / -1;
}

#workLogForm .work-save-field,
#workLogForm .work-clear-field {
  grid-column: span 2;
}

#workLogForm .work-date-field,
#workLogForm .work-time-field {
  grid-column: span 2;
}

#workLogForm .work-stamp-field,
#workLogForm .work-payment-field,
#workLogForm .work-place-field {
  grid-column: span 1;
}

#workLogForm .work-stamp-field {
  align-self: center;
  min-height: 38px;
}

.work-time-field {
  display: grid;
  grid-template-columns: minmax(110px, 140px) minmax(110px, 140px);
  gap: 10px;
}

.work-time-field label {
  display: grid;
  gap: 6px;
  color: var(--muted);
  font-size: 13px;
}

.date-with-day {
  display: grid;
  grid-template-columns: minmax(140px, 170px) minmax(105px, 120px);
  gap: 10px;
}

.date-with-day label {
  display: grid;
  gap: 6px;
  color: var(--muted);
  font-size: 13px;
}

.settings-form label {
  display: grid;
  gap: 6px;
  color: var(--muted);
  font-size: 13px;
}

.settings-form input,
.settings-form select,
.settings-form textarea {
  min-height: 38px;
  border: 1px solid var(--line);
  border-radius: 7px;
  padding: 8px 10px;
  background: #ffffff;
}

.settings-form textarea {
  min-height: 180px;
  resize: vertical;
}

.sms-help {
  padding: 8px 10px;
  border: 1px solid #dce8d8;
  border-radius: 7px;
  color: var(--muted);
  background: #f7fbf5;
  font-size: 12px;
  line-height: 1.4;
}

.table-input {
  width: 82px;
  min-height: 32px;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 5px 7px;
}

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

.small-input {
  width: 64px;
}

.wide-input {
  width: 150px;
}

.table-note {
  width: 150px;
  min-height: 54px;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 6px 8px;
  resize: vertical;
}

.production-table {
  min-width: 2200px;
}

.document-form {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) minmax(150px, auto) minmax(150px, auto) auto;
  gap: 12px;
  align-items: end;
}

.hidden {
  display: none !important;
}

.save-toast {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 50;
  max-width: min(420px, calc(100vw - 24px));
  padding: 12px 14px;
  border: 1px solid #b8d6bd;
  border-radius: 8px;
  color: #17351f;
  background: #edf8ee;
  box-shadow: 0 12px 32px rgba(28, 40, 31, 0.18);
  opacity: 0;
  transform: translateY(8px);
  pointer-events: none;
  transition: opacity 0.18s ease, transform 0.18s ease;
}

.save-toast.visible {
  opacity: 1;
  transform: translateY(0);
}

.save-toast.error {
  color: #8f1f16;
  border-color: #f0bbb5;
  background: #fff2f0;
}

.calculation-box {
  display: grid;
  gap: 5px;
  border: 1px solid #c9d9cc;
  border-radius: 7px;
  padding: 10px;
  color: #284333;
  background: #f1f8f2;
  font-size: 13px;
}

.calculation-box span {
  display: block;
}

.table-panel {
  min-width: 0;
}

.table-wrap {
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: #ffffff;
}

table {
  width: 100%;
  min-width: 720px;
  border-collapse: collapse;
  background: #ffffff;
}

th,
td {
  padding: 11px 12px;
  border-bottom: 1px solid #ece7dd;
  text-align: left;
  vertical-align: top;
  font-size: 14px;
}

th {
  position: sticky;
  top: 0;
  z-index: 1;
  color: #35443b;
  background: #f1eadf;
}

tbody tr:nth-child(even) {
  background: #fbf8f0;
}

tbody tr:hover {
  background: #fbfcf8;
}

td.numeric,
th.numeric {
  text-align: right;
}

.stock-balance {
  font-weight: 800;
  color: #24342a;
}

.stock-summary-table {
  overflow-x: auto;
  margin: 12px 0;
}

.stock-summary-table table {
  width: 100%;
  min-width: 680px;
  border-collapse: collapse;
}

.stock-summary-table th,
.stock-summary-table td {
  border: 1px solid var(--line);
  padding: 8px;
  text-align: left;
}

.stock-summary-table th {
  color: #284231;
  background: #eef4ea;
}

.stock-summary-table tr:nth-child(even) td {
  background: #fbf8f0;
}

.row-action {
  border: 0;
  border-radius: 6px;
  padding: 7px 10px;
  color: #ffffff;
  background: var(--red);
  cursor: pointer;
}

.bar-list {
  display: grid;
  gap: 12px;
}

.bar-row {
  display: grid;
  grid-template-columns: 130px 1fr 90px;
  align-items: center;
  gap: 12px;
  min-height: 28px;
  font-size: 14px;
}

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

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

.compact-list,
.recipe-list,
.order-grid,
.reservation-list {
  display: grid;
  gap: 10px;
}

.compact-item,
.recipe-item,
.order-card,
.reservation-card {
  border: 2px solid #d6cfbf;
  border-radius: 7px;
  padding: 12px;
  background: #ffffff;
}

.compact-list > .compact-item:nth-child(even),
.recipe-list > .recipe-item:nth-child(even),
.order-grid > .order-card:nth-child(even),
.reservation-list > .reservation-card:nth-child(even),
.production-list > .production-card:nth-child(even):not(.finished-row-head) {
  background: #fbf8f0;
}

.compact-item strong,
.order-card strong {
  display: block;
}

.compact-item span,
.order-card span,
.recipe-item span {
  display: block;
  margin-top: 4px;
  color: var(--muted);
  font-size: 13px;
}

.order-duration-field {
  display: grid;
  grid-template-columns: auto 92px;
  align-items: center;
  gap: 8px;
  max-width: 220px;
  margin-top: 8px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.order-duration-field input {
  min-height: 34px;
  border: 1px solid var(--line);
  border-radius: 7px;
  padding: 5px 8px;
}

.settings-action button {
  margin-top: 10px;
}

.book-status {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-top: 10px;
}

.book-status div {
  display: grid;
  gap: 3px;
  border: 1px solid #d8e3d4;
  border-radius: 7px;
  padding: 9px 10px;
  background: #f8fbf5;
}

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

.book-status strong {
  color: var(--green-dark);
}

.book-open-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: end;
  margin-top: 10px;
}

.book-open-controls label {
  display: grid;
  gap: 5px;
  max-width: 210px;
  font-size: 12px;
  font-weight: 800;
}

.book-open-controls input {
  min-height: 40px;
}

.book-open-controls button {
  margin-top: 0;
}

.settings-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 14px;
}

.sip-section-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 14px;
}

.settings-tab {
  min-height: 38px;
  border: 1px solid #cfdccf;
  border-radius: 7px;
  padding: 8px 12px;
  color: #244333;
  background: #ffffff;
  cursor: pointer;
  font-weight: 800;
}

.settings-tab.active {
  color: #ffffff;
  border-color: var(--green);
  background: var(--green);
}

.pricebook-column-picker {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin: 0 0 12px;
  border: 1px solid #d8e1d2;
  border-radius: 8px;
  padding: 10px;
  background: #f8fbf5;
}

.pricebook-column-picker strong {
  margin-right: 4px;
  color: var(--green-dark);
}

.pricebook-column-picker label {
  display: inline-flex;
  gap: 5px;
  align-items: center;
  border: 1px solid #dbe6d8;
  border-radius: 999px;
  padding: 5px 8px;
  background: #ffffff;
  color: #334137;
  font-size: 12px;
  font-weight: 800;
}

.pricebook-column-picker input {
  accent-color: var(--green);
}

.pricebook-note-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: end;
  margin: 0 0 12px;
}

.pricebook-note-form label {
  display: grid;
  gap: 5px;
  font-weight: 800;
}

.pricebook-note-form textarea {
  min-height: 70px;
  resize: vertical;
}

@media (max-width: 700px) {
  .pricebook-note-form {
    grid-template-columns: 1fr;
  }
}

.finance-category-item {
  display: grid;
  grid-template-columns: minmax(130px, 1fr) minmax(110px, 0.6fr) minmax(90px, 0.45fr) auto;
  gap: 10px;
  align-items: end;
}

.mix-option-item {
  display: grid;
  grid-template-columns: minmax(150px, 1fr) 130px 90px 120px 130px minmax(180px, 1.2fr) auto;
  gap: 10px;
  align-items: end;
}

.mix-option-item label {
  display: grid;
  gap: 5px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.recent-order-button {
  width: 100%;
  border: 1px solid var(--line);
  text-align: left;
  background: #ffffff;
}

.recent-order-button:hover {
  border-color: var(--green);
  background: #f3f9f2;
}

.danger-zone {
  border-color: #e2b6ad;
  background: #fff8f6;
}

.order-card {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 12px;
}

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

.orders-today-layout {
  display: grid;
  grid-template-columns: minmax(520px, 1fr) minmax(360px, 0.95fr);
  gap: 18px;
  align-items: start;
}

.orders-calendar-panel,
.orders-today-panel,
.orders-older-panel {
  min-width: 0;
}

.orders-today-panel {
  display: grid;
  align-content: start;
  gap: 10px;
}

.today-order-list {
  display: grid;
  gap: 10px;
}

.orders-older-panel {
  display: grid;
  gap: 8px;
  margin-top: 16px;
}

.reservation-list {
  grid-template-columns: 1fr;
}

.reservation-schedule {
  display: grid;
  gap: 10px;
  border: 1px solid #dbe6d8;
  border-radius: 8px;
  padding: 12px;
  background: #f8fbf5;
}

.reservation-calendar-wrap,
.public-calendar,
.operations-calendar {
  display: grid;
  gap: 10px;
  border: 1px solid #dbe6d8;
  border-radius: 8px;
  padding: 12px;
  background: #f8fbf5;
}

.reservation-schedule-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  color: var(--muted);
  font-size: 13px;
}

.reservation-schedule-head strong,
.reservation-schedule-head span {
  display: block;
}

.reservation-schedule-head strong {
  color: var(--ink);
  font-size: 15px;
}

.reservation-slots {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 8px;
}

.reservation-calendar {
  display: grid;
  gap: 10px;
}

.reservation-calendar.is-week {
  grid-template-columns: repeat(7, minmax(150px, 1fr));
  overflow-x: auto;
}

.reservation-day-column {
  min-width: 0;
  display: grid;
  gap: 6px;
}

.reservation-day-title {
  display: grid;
  gap: 2px;
  min-height: 42px;
  border-radius: 7px;
  padding: 7px 8px;
  color: #1d2d22;
  background: #e8f1e3;
  font-weight: 800;
}

.reservation-day-title small {
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
}

.reservation-day-grid {
  position: relative;
  min-height: 720px;
  border: 1px solid #d9e4d5;
  border-radius: 8px;
  background: #ffffff;
  overflow: hidden;
}

.calendar-slot {
  min-height: 40px;
  border-bottom: 1px solid #edf1ea;
  padding: 4px 6px;
  color: #7a857f;
  font-size: 11px;
}

.calendar-slot.drag-over {
  background: #e4f4df;
  outline: 2px solid rgba(47, 111, 78, 0.25);
}

.reservation-day-grid.drag-over {
  outline: 3px solid rgba(47, 111, 78, 0.22);
}

.calendar-break-block {
  position: absolute;
  left: 54px;
  right: 7px;
  z-index: 4;
  display: grid;
  align-content: center;
  gap: 1px;
  border: 1px solid #75a7d4;
  border-radius: 7px;
  padding: 5px 8px;
  color: #17324a;
  background: #cfe5f8;
  box-shadow: 0 6px 14px rgba(31, 45, 37, 0.08);
  pointer-events: none;
}

.calendar-break-block strong,
.calendar-break-block span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.calendar-break-block span {
  font-size: 12px;
}

.calendar-reservation-block {
  position: absolute;
  left: 54px;
  right: 7px;
  z-index: 2;
  display: grid;
  align-content: start;
  gap: 2px;
  border: 1px solid #a7c49f;
  border-radius: 7px;
  padding: 7px 8px;
  color: #163422;
  background: #dff0d9;
  box-shadow: 0 8px 18px rgba(31, 45, 37, 0.12);
  cursor: grab;
  overflow: hidden;
}

.calendar-reservation-block.is-public {
  cursor: default;
  color: #3e493f;
  background: #e4e9df;
  border-color: #cbd6c6;
}

.calendar-reservation-block.is-background {
  left: 54px;
  right: 44px;
  z-index: 1;
  opacity: 0.48;
  cursor: default;
  background: #dfe8d9;
  border-color: #c8d5c1;
}

.calendar-order-block {
  position: absolute;
  left: 84px;
  right: 7px;
  z-index: 3;
  display: grid;
  align-content: start;
  gap: 2px;
  border: 2px solid #568ebc;
  border-radius: 7px;
  padding: 7px 8px;
  color: #17324a;
  background: #dcecf9;
  box-shadow: 0 10px 20px rgba(31, 45, 37, 0.16);
  overflow: hidden;
}

#orders .calendar-order-block {
  left: 62px;
}

#orders .operations-calendar {
  width: 100%;
}

#orders .reservation-day-grid {
  min-height: 980px;
}

#orders .calendar-reservation-block.is-background {
  right: 28px;
}

.calendar-order-block.is-grouped {
  border-color: #4f8d5a;
  background: #dff2e3;
  color: #1e4429;
}

.calendar-order-block strong,
.calendar-order-block span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.calendar-order-block span {
  color: #335572;
  font-size: 12px;
}

.calendar-order-block.is-grouped span {
  color: #335b3d;
  font-weight: 700;
  white-space: normal;
  line-height: 1.25;
}

.calendar-reservation-block strong,
.calendar-reservation-block span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.calendar-reservation-block span {
  color: #395244;
  font-size: 12px;
}

.reservation-slot {
  display: grid;
  gap: 8px;
  min-height: 94px;
  border: 1px solid #cfdec9;
  border-radius: 8px;
  padding: 9px;
  background: #ffffff;
}

.reservation-slot.drag-over {
  outline: 3px solid rgba(47, 111, 78, 0.28);
  background: #edf7ec;
}

.reservation-slot.is-overloaded {
  border-color: #d9907f;
  background: #fff5f2;
}

.reservation-slot-time {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.reservation-slot-time span {
  color: var(--muted);
  font-size: 12px;
}

.reservation-slot-items {
  display: grid;
  gap: 6px;
}

.slot-empty {
  color: var(--muted);
  font-size: 12px;
}

.schedule-reservation {
  display: grid;
  gap: 3px;
  border-radius: 7px;
  padding: 8px;
  color: #163422;
  background: #e4f2df;
  cursor: grab;
}

.schedule-reservation:active {
  cursor: grabbing;
}

.schedule-reservation span {
  color: #395244;
  font-size: 12px;
}

.reservation-card {
  display: grid;
  gap: 10px;
  border-left: 5px solid var(--amber);
}

.reservation-card.status-potvrdeno {
  border-left-color: var(--green);
}

.reservation-card.status-odbijeno {
  border-left-color: var(--red);
}

.reservation-card.status-odradeno {
  border-left-color: var(--blue);
}

.reservation-main {
  display: grid;
  grid-template-columns: minmax(170px, 1.2fr) minmax(150px, 1fr) minmax(120px, 0.8fr) minmax(100px, 0.7fr) minmax(130px, 0.8fr) minmax(110px, 0.7fr);
  gap: 10px;
  align-items: start;
}

.reservation-main span,
.reservation-note {
  color: var(--muted);
  font-size: 13px;
}

.reservation-main strong {
  display: block;
  margin-top: 3px;
}

.reservation-summary {
  display: grid;
  grid-template-columns: 150px minmax(220px, 1fr) 180px;
  gap: 10px;
  padding: 9px 10px;
  border-radius: 7px;
  background: #f7faf6;
  color: var(--muted);
  font-size: 13px;
}

.reservation-summary strong {
  color: var(--ink);
}

.reservation-link {
  display: grid;
  gap: 5px;
  max-width: 360px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
}

.reservation-link input {
  min-height: 38px;
  border: 1px solid var(--line);
  border-radius: 7px;
  padding: 7px 9px;
}

.reservation-time {
  display: grid;
  gap: 5px;
  max-width: 180px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
}

.reservation-time input {
  min-height: 38px;
  border: 1px solid var(--line);
  border-radius: 7px;
  padding: 7px 9px;
}

.reservation-note {
  margin: 0;
  padding: 8px 10px;
  border-radius: 7px;
  background: #f7faf6;
}

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

.reservation-actions button {
  min-height: 36px;
}

.reservation-filters label {
  display: grid;
  gap: 4px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.reservation-filters input,
.reservation-filters select {
  min-height: 36px;
  border: 1px solid var(--line);
  border-radius: 7px;
  padding: 6px 8px;
}

.production-list {
  display: grid;
  gap: 14px;
  overflow-x: auto;
}

.production-card {
  border: 2px solid #d6cfbf;
  border-radius: 8px;
  padding: 11px;
  background: #ffffff;
}

.production-card.is-finished {
  background: #f7faf5;
}

.historical-production-panel {
  margin-top: 18px;
}

.historical-filters {
  display: grid;
  grid-template-columns: auto 90px minmax(150px, 1fr) minmax(120px, 0.7fr) 140px;
  align-items: end;
}

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

.historical-summary > div {
  border: 1px solid #d8e1d2;
  border-radius: 8px;
  padding: 10px;
  background: #f8fbf5;
}

.historical-summary span,
.historical-summary strong {
  display: block;
}

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

.historical-summary strong {
  margin-top: 4px;
  color: var(--green-dark);
}

.historical-production-list {
  display: grid;
  gap: 7px;
}

.historical-production-row {
  overflow: hidden;
  border: 1px solid #d6cfbf;
  border-radius: 8px;
  background: #ffffff;
}

.historical-production-row:nth-child(even) {
  background: #fbf8f0;
}

.historical-production-row summary {
  display: grid;
  grid-template-columns: 90px minmax(180px, 1.2fr) 110px minmax(130px, 0.8fr) 90px 90px 100px;
  gap: 10px;
  align-items: center;
  padding: 10px 12px;
  cursor: pointer;
  list-style: none;
}

.historical-production-row summary::-webkit-details-marker {
  display: none;
}

.historical-production-row summary::before {
  content: "+";
  display: grid;
  width: 22px;
  height: 22px;
  place-items: center;
  border-radius: 6px;
  color: var(--green-dark);
  background: #e7f1e4;
  font-weight: 900;
}

.historical-production-row[open] summary::before {
  content: "-";
}

.historical-production-row summary {
  grid-template-columns: 24px 90px minmax(180px, 1.2fr) 110px minmax(130px, 0.8fr) 90px 90px 100px;
}

.historical-production-row summary > span {
  min-width: 0;
  overflow: hidden;
  color: var(--muted);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.historical-rb {
  color: var(--green-dark) !important;
  font-weight: 900;
}

.historical-detail-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(150px, 1fr));
  gap: 8px;
  padding: 12px;
  border-top: 1px solid #e4e9df;
  background: rgba(255, 255, 255, 0.72);
}

.historical-detail-grid > div {
  min-width: 0;
  border: 1px solid #e2e8de;
  border-radius: 7px;
  padding: 8px;
  background: #ffffff;
}

.historical-detail-grid span,
.historical-detail-grid strong {
  display: block;
  overflow-wrap: anywhere;
}

.historical-detail-grid span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
}

.historical-detail-grid strong {
  margin-top: 4px;
  font-size: 13px;
}

.historical-note {
  grid-column: span 2;
}

.production-list > .production-card.is-finished:nth-child(even):not(.finished-row-head) {
  background: #f0f6ed;
}

.finished-row {
  display: grid;
  grid-template-columns: 96px minmax(160px, 1fr) 132px 132px 110px 64px 86px 86px minmax(240px, 1.4fr) 82px 112px 210px;
  align-items: center;
  gap: 0;
  min-width: 1540px;
  padding: 10px 12px;
  text-align: center;
}

.finished-row-head {
  position: sticky;
  top: 0;
  z-index: 1;
  color: #35443b;
  background: #f1eadf;
  font-size: 12px;
}

.finished-row-head label {
  display: grid;
  gap: 4px;
  font-weight: 800;
}

.production-column-header {
  display: grid;
  align-self: stretch;
  gap: 5px;
  min-width: 0;
  padding: 0 4px;
}

.production-sort-button {
  min-height: 30px;
  border: 0;
  border-bottom: 2px solid transparent;
  padding: 3px 2px;
  color: #35443b;
  background: transparent;
  cursor: pointer;
  font-size: 11px;
  font-weight: 900;
}

.production-sort-button span {
  color: #718078;
  font-size: 10px;
}

.production-sort-button.active {
  border-bottom-color: var(--green);
  color: var(--green-dark);
}

.production-action-header {
  align-content: center;
}

.production-action-header .ghost-button {
  min-height: 34px;
  padding: 5px 7px;
  font-size: 11px;
}

.finished-row-head input,
.finished-row-head select {
  width: 100%;
  min-width: 0;
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 6px 7px;
  font-size: 12px;
}

.production-filter-empty {
  min-width: 1540px;
}

.finished-row > span {
  color: var(--muted);
  font-size: 13px;
  min-width: 0;
  padding: 0 8px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.finished-row .order-select,
.finished-row .row-actions {
  justify-content: center;
}

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

.finished-row .row-actions .ghost-button {
  min-height: 30px;
  padding: 5px 8px;
  font-size: 12px;
}

.order-section-title {
  margin: 6px 0 2px;
  color: var(--ink);
  font-size: 13px;
  font-weight: 900;
  text-transform: uppercase;
}

.empty-note {
  border: 1px dashed var(--line);
  border-radius: 7px;
  padding: 12px;
  color: var(--muted);
  background: #faf8f2;
}

.order-archive-list {
  display: grid;
  gap: 6px;
}

.order-archive-row {
  display: grid;
  grid-template-areas: "number customer date fruit kg tank status actions";
  grid-template-columns: minmax(82px, 0.55fr) minmax(150px, 1fr) minmax(120px, 0.8fr) minmax(90px, 0.6fr) minmax(72px, 0.45fr) minmax(92px, 0.6fr) minmax(90px, 0.55fr) minmax(150px, auto);
  align-items: center;
  gap: 10px;
  border: 2px solid #d6cfbf;
  border-radius: 7px;
  padding: 9px 10px;
  text-align: center;
  background: #ffffff;
}

.order-archive-row:not(.order-archive-head) {
  cursor: pointer;
}

.order-archive-row.is-expanded {
  border-color: var(--green);
  background: #f3f9f2;
}

.order-archive-expanded {
  margin: -2px 0 8px;
}

.order-archive-expanded .order-card {
  border-width: 2px;
  border-color: #b9cbb3;
  background: #ffffff;
}

.order-col-number { grid-area: number; }
.order-col-customer { grid-area: customer; }
.order-col-date { grid-area: date; }
.order-col-fruit { grid-area: fruit; }
.order-col-kg { grid-area: kg; }
.order-col-tank { grid-area: tank; }
.order-col-status { grid-area: status; }
.order-col-actions { grid-area: actions; }

.order-column-header {
  display: grid;
  align-self: stretch;
  gap: 5px;
  min-width: 0;
}

.order-column-header input,
.order-column-header select {
  width: 100%;
  min-width: 0;
  min-height: 34px;
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 5px 7px;
  font-size: 12px;
}

.order-sort-button {
  min-height: 28px;
  border: 0;
  border-bottom: 2px solid transparent;
  padding: 3px 2px;
  color: #35443b;
  background: transparent;
  cursor: pointer;
  font-size: 11px;
  font-weight: 900;
}

.order-sort-button.active {
  border-bottom-color: var(--green);
  color: var(--green-dark);
}

.order-sort-button span {
  color: #718078;
  font-size: 10px;
}

.order-column-header .ghost-button {
  min-height: 34px;
  padding: 5px 7px;
  font-size: 11px;
}

.work-order-note {
  display: grid;
  gap: 5px;
  margin: 10px 0;
  border: 1px solid #d8e3d4;
  border-left: 4px solid var(--green);
  border-radius: 7px;
  padding: 10px 12px;
  background: #f8fbf5;
}

.work-order-note span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.work-order-note strong {
  white-space: pre-wrap;
}

.order-archive-list > .order-archive-row:nth-child(even):not(.order-archive-head) {
  background: #fbf8f0;
}

.order-archive-head {
  position: sticky;
  top: 0;
  z-index: 1;
  color: #35443b;
  background: #f1eadf;
  font-size: 12px;
}

.order-archive-row > span {
  color: var(--muted);
  font-size: 13px;
}

.order-archive-row .order-select,
.order-archive-row .row-actions {
  justify-content: center;
}

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

.finance-form h3,
.finance-form .wide-form-field,
.finance-form button {
  grid-column: 1 / -1;
}

.finance-form-modal {
  position: fixed;
  inset: 18px;
  z-index: 85;
  width: min(1120px, calc(100vw - 36px));
  max-height: calc(100vh - 36px);
  margin: auto;
  overflow: auto;
}

.finance-detail-box {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  border: 1px solid #dfe7da;
  border-radius: 8px;
  padding: 10px;
  background: #f8faf6;
}

.finance-detail-box legend {
  padding: 0 6px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.finance-line-items-box {
  grid-template-columns: 1fr;
}

.finance-line-items {
  display: grid;
  gap: 5px;
}

.finance-line-item {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) 110px 100px 90px 100px;
  align-items: center;
  gap: 8px;
  border-bottom: 1px solid #e0e6dc;
  padding: 6px 0;
  font-size: 12px;
}

.finance-line-item:last-child {
  border-bottom: 0;
}

.finance-line-item span,
.finance-line-item b {
  text-align: right;
}

.finance-product-map {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 90px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  color: var(--muted);
  font-weight: 800;
}

.finance-product-map select {
  width: 100%;
  min-width: 0;
}

.finance-stock-info {
  display: grid;
  gap: 3px;
  padding: 10px 12px;
  border-left: 4px solid #4b855f;
  background: #f2f7ef;
}

.finance-stock-info span {
  color: var(--muted);
}

.finance-actions input,
.finance-actions select {
  min-width: 150px;
}

.finance-actions .file-input-hidden {
  width: 1px;
  height: 1px;
  min-width: 0;
}

.finance-list {
  display: grid;
  gap: 6px;
  overflow-x: hidden;
}

.finance-row {
  display: grid;
  grid-template-columns: 42px 72px 82px 90px 82px minmax(125px, 1.5fr) minmax(95px, 1fr) 78px 70px 82px 100px 170px;
  align-items: center;
  gap: 5px;
  min-width: 0;
  width: 100%;
  border: 2px solid #d6cfbf;
  border-radius: 7px;
  padding: 7px 8px;
  background: #ffffff;
  font-size: 12px;
}

.finance-row:nth-child(even):not(.finance-head) {
  background: #fbf8f0;
}

.finance-head {
  position: sticky;
  top: 0;
  z-index: 1;
  color: #35443b;
  background: #f1eadf;
  font-size: 12px;
  border-color: #c8bba8;
  box-shadow: 0 1px 0 rgba(72, 58, 38, 0.12);
}

.finance-column-header {
  display: grid;
  min-width: 0;
  gap: 4px;
}

.finance-column-header strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.finance-column-header input,
.finance-column-header select {
  width: 100%;
  min-width: 0;
  height: 28px;
  padding: 3px 5px;
  border: 1px solid #c8bba8;
  border-radius: 4px;
  background: #fff;
  font-size: 11px;
}

.finance-filter-actions .ghost-button {
  min-height: 28px;
  padding: 3px 5px;
  font-size: 11px;
}

.finance-total-row {
  position: sticky;
  bottom: 0;
  z-index: 1;
  border-color: #7fa378;
  background: #eaf3e7;
  font-weight: 700;
}

.finance-total-summary {
  white-space: normal;
}

.finance-row > span,
.finance-row > strong {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.25;
}

.finance-row .numeric {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.finance-row .row-actions {
  justify-content: flex-end;
}

.finance-data-row {
  cursor: pointer;
}

.finance-data-row:hover,
.finance-data-row:focus-visible {
  border-color: #7fa378;
  background: #f5faf2;
  outline: none;
}

.finance-party-info,
.finance-payment-info {
  display: grid;
  gap: 3px;
}

.finance-party-info small {
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.points-wallet-label,
.points-wallet {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 5px 9px;
  border: 1px solid #9eb994;
  border-radius: 6px;
  background: #edf6e9;
  color: #24522d;
  font-weight: 800;
  white-space: nowrap;
}

.points-metrics {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-bottom: 14px;
}

.points-spending-form {
  grid-template-columns: minmax(120px, 0.6fr) minmax(120px, 0.6fr) minmax(220px, 1.8fr);
}

.points-source-row {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) minmax(180px, 1fr) auto;
  align-items: center;
}

.points-source-row b {
  color: #2f6d3a;
  font-size: 16px;
  text-align: right;
}

.sip-product-flavor {
  display: block;
  margin-top: -2px;
  color: #416b48;
  font-size: 13px;
}

@media (max-width: 640px) {
  .points-metrics,
  .points-spending-form,
  .points-source-row {
    grid-template-columns: 1fr;
  }

  .points-source-row b {
    text-align: left;
  }
}

.finance-payment-info .status {
  width: fit-content;
}

.finance-actions-cell {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 4px;
}

.finance-actions-cell button {
  min-width: 0;
  padding: 6px 4px;
  font-size: 11px;
}

.finance-section-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid #d8e1d2;
}

.finance-section-tabs .settings-tab {
  min-height: 40px;
}

.statistics-toolbar {
  margin-bottom: 12px;
}

.statistics-filters label {
  display: grid;
  gap: 4px;
  min-width: 150px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.statistics-filters select {
  min-height: 38px;
}

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

.statistics-kpi {
  display: grid;
  align-content: start;
  gap: 5px;
  min-height: 142px;
  padding: 14px;
  border: 1px solid #cfd9cb;
  border-radius: 7px;
  background: #ffffff;
  box-shadow: 0 2px 8px rgba(31, 45, 37, 0.04);
}

.statistics-kpi > span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
}

.statistics-kpi > strong {
  color: #24332b;
  font-size: 26px;
  line-height: 1.1;
}

.statistics-kpi > small {
  min-height: 32px;
  color: #59675f;
  line-height: 1.35;
}

.statistics-delta {
  width: fit-content;
  margin-top: auto;
  font-size: 11px;
  font-weight: 800;
}

.statistics-delta.positive,
.positive-value {
  color: #257047;
}

.statistics-delta.negative,
.negative-value {
  color: #b53b32;
}

.statistics-delta.neutral {
  color: var(--muted);
}

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

.statistics-chart {
  display: grid;
  gap: 8px;
  min-height: 220px;
  align-content: start;
}

.statistics-legend {
  display: flex;
  gap: 16px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
}

.statistics-legend span::before {
  display: inline-block;
  width: 10px;
  height: 10px;
  margin-right: 5px;
  border-radius: 2px;
  content: "";
}

.statistics-legend .legend-a::before,
.statistics-bar-a {
  background: #43845e;
}

.statistics-legend .legend-b::before,
.statistics-bar-b {
  background: #c28a3b;
}

.statistics-month-bars {
  display: grid;
  grid-template-columns: 34px minmax(90px, 1fr) minmax(105px, auto);
  align-items: center;
  gap: 8px;
  padding: 4px 6px;
  border-left: 3px solid transparent;
}

.statistics-month-bars.selected {
  border-left-color: #2f7450;
  background: #f1f7ee;
}

.statistics-month-bars > strong {
  font-size: 11px;
  text-transform: uppercase;
}

.statistics-month-bars > span {
  display: grid;
  text-align: right;
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}

.statistics-month-bars > span small {
  color: var(--muted);
}

.statistics-bar-pair {
  display: grid;
  gap: 3px;
}

.statistics-track {
  height: 7px;
  overflow: hidden;
  border-radius: 2px;
  background: #edf0ea;
}

.statistics-track i {
  display: block;
  height: 100%;
  min-width: 0;
}

.statistics-breakdown-row {
  grid-template-columns: minmax(100px, 150px) minmax(100px, 1fr) minmax(95px, auto);
}

.statistics-table {
  width: 100%;
  min-width: 900px;
  table-layout: fixed;
}

.statistics-table th,
.statistics-table td {
  padding: 8px 9px;
  font-size: 12px;
  vertical-align: middle;
  white-space: nowrap;
}

.statistics-table tr.selected td {
  background: #edf6e9;
}

.statistics-table .numeric {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.statistics-table th:first-child,
.statistics-table td:first-child {
  width: 118px;
  text-align: left;
}

.statistics-table tbody tr:nth-child(even) td,
.statistics-product-table tbody tr:nth-child(even) td {
  background: #faf8f2;
}

.statistics-table tfoot th,
.statistics-product-table tfoot th {
  border-top: 2px solid #607765;
  background: #eaf2e6;
  color: #294333;
  font-weight: 900;
}

.statistics-product-sales {
  display: grid;
  gap: 7px;
  margin-bottom: 14px;
}

.statistics-product-table-wrap {
  max-width: 100%;
  overflow-x: auto;
}

.statistics-product-table {
  min-width: 1420px;
  table-layout: fixed;
}

.statistics-product-table th,
.statistics-product-table td {
  padding: 7px 6px;
  text-align: right;
  font-size: 11px;
  white-space: nowrap;
}

.statistics-product-table th:first-child,
.statistics-product-table td:first-child {
  position: sticky;
  left: 0;
  z-index: 1;
  width: 220px;
  text-align: left;
  background: #ffffff;
}

.statistics-product-table thead th:first-child,
.statistics-product-table tfoot th:first-child {
  z-index: 2;
  background: #eaf2e6;
}

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

.statistics-detail-grid article {
  display: grid;
  gap: 4px;
  padding: 11px 0;
  border-bottom: 1px solid #e2e8df;
}

.statistics-detail-grid article strong {
  color: #2f4939;
}

.statistics-detail-grid article span {
  color: #536158;
  line-height: 1.35;
}

@media (max-width: 1200px) {
  .statistics-kpi-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.sales-order-form fieldset {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 190px));
  justify-content: start;
  gap: 9px;
  border: 1px solid #d8e1d2;
  border-radius: 7px;
  padding: 12px;
}

.sales-order-form label {
  min-width: 0;
}

.sales-order-form input,
.sales-order-form select {
  width: 100%;
}

.sales-order-form legend {
  padding: 0 6px;
  color: var(--green);
  font-weight: 800;
}

.sales-draft-list {
  display: grid;
  gap: 8px;
}

.sales-item-row {
  border-color: #d8e1d2;
  background: #fbfdf9;
}

.status-checks,
.sales-order-statuses {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.sales-order-statuses label {
  display: inline-flex;
  gap: 5px;
  align-items: center;
  font-size: 12px;
  font-weight: 700;
}

.sales-order-card {
  border-width: 2px;
  border-color: #d5cbb9;
}

.sales-order-card:nth-child(even) {
  background: #fbf8f0;
}

.sales-order-table {
  display: grid;
  gap: 6px;
  margin-bottom: 14px;
}

.sales-order-table-row {
  display: grid;
  grid-template-columns: 58px 86px minmax(115px, 1fr) minmax(180px, 1.8fr) 94px 58px minmax(175px, 1.25fr) 150px;
  gap: 7px;
  align-items: center;
  min-width: 0;
  padding: 8px;
  border: 2px solid #d5cbb9;
  border-radius: 7px;
  background: #fff;
  font-size: 12px;
}

.sales-order-table-row:nth-child(odd):not(.sales-order-table-head) {
  background: #fbf8f0;
}

.sales-order-table-head {
  position: sticky;
  top: 0;
  z-index: 1;
  border-color: #c8bba8;
  background: #f1eadf;
}

.sales-order-table-row > * {
  min-width: 0;
}

.sales-order-table-row span {
  display: grid;
  gap: 3px;
}

.sales-order-table-row small {
  color: var(--muted);
  line-height: 1.25;
}

.sales-order-items-cell {
  overflow-wrap: anywhere;
}

.sales-order-table-row .row-actions {
  justify-content: flex-end;
}

.sales-order-table-row.is-paid {
  padding-top: 5px;
  padding-bottom: 5px;
  border-width: 1px;
  background: #f5f8f2;
}

.sales-order-table-row.is-paid .sales-order-statuses {
  gap: 3px;
}

.sales-order-archive-toggle {
  display: flex;
  justify-content: flex-start;
  margin: 10px 0;
}

.sales-order-archive-title {
  padding: 8px 2px 4px;
  color: #506052;
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
}

.group-stock-form {
  grid-template-columns: 180px minmax(240px, 1fr);
}

.group-stock-rows {
  display: grid;
  gap: 7px;
}

.group-stock-row {
  display: grid;
  grid-template-columns: minmax(220px, 1.5fr) minmax(100px, 0.6fr) minmax(130px, 0.7fr) auto;
  gap: 8px;
  align-items: end;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #f8faf6;
}

.group-stock-row label {
  min-width: 0;
}

.group-stock-row input,
.group-stock-row select {
  width: 100%;
}

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

.sip-product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 12px;
  margin-bottom: 14px;
}

@media (max-width: 760px) {
  .sales-order-table-head {
    display: none;
  }

  .sales-order-table-row {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .sales-order-table-row > [data-label]::before {
    content: attr(data-label);
    display: block;
    margin-bottom: 2px;
    color: var(--muted);
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
  }

  .sales-order-table-row .row-actions {
    justify-content: flex-start;
  }

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

  .group-stock-form,
  .group-stock-row {
    grid-template-columns: 1fr;
  }
}

.sip-product-card {
  overflow: hidden;
  border: 1px solid #d6ddcf;
  border-radius: 8px;
  background: #ffffff;
  box-shadow: 0 6px 16px rgba(31, 45, 37, 0.06);
}

.sip-product-image {
  width: 100%;
  min-height: 150px;
  border: 0;
  background: linear-gradient(145deg, #e8f2e5, #fff7df);
  background-position: center;
  background-size: cover;
  cursor: pointer;
}

.sip-product-image:not(.has-image)::after {
  content: "Sip";
  display: grid;
  min-height: 150px;
  place-items: center;
  color: rgba(31, 77, 54, 0.78);
  font-size: 34px;
  font-weight: 900;
}

.sip-product-body {
  display: grid;
  gap: 8px;
  padding: 12px;
}

.sip-product-body h3,
.sip-product-body p {
  margin: 0;
}

.sip-product-body h3 {
  font-size: 18px;
}

.sip-product-body p {
  min-height: 38px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.35;
}

.sip-product-topline,
.sip-product-prices,
.sip-product-flags,
.sip-product-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}

.sip-product-topline span,
.sip-product-topline b,
.sip-product-flags span,
.sip-product-meta span {
  border-radius: 999px;
  padding: 4px 8px;
  background: #eef4ea;
  color: #284231;
  font-size: 12px;
  font-weight: 800;
}

.sip-product-flags span {
  color: #6b6256;
  background: #f2eee7;
}

.sip-product-flags span.is-on {
  color: #143a25;
  background: #d9efd8;
}

.sip-product-prices strong {
  color: #17324a;
  font-size: 13px;
}

.sip-product-prices span {
  margin-left: auto;
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
}

.sip-product-editor {
  margin-top: 12px;
  border: 2px solid #cbd9c6;
  border-radius: 8px;
  padding: 14px;
  background: #fbfdf9;
}

.editor-head {
  grid-column: 1 / -1;
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: center;
}

.sip-image-tool {
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  border: 1px solid #d8e1d2;
  border-radius: 8px;
  padding: 10px;
  background: #ffffff;
}

.sip-image-preview {
  min-height: 120px;
  border: 1px dashed #b9c8b5;
  border-radius: 7px;
  background: #eef4ea;
  background-position: center;
  background-size: cover;
}

.sip-image-preview:not(.has-image)::after {
  content: "Pregled slike";
  display: grid;
  min-height: 120px;
  place-items: center;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.production-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
}

.production-card-head strong,
.production-card-head span {
  display: block;
}

.production-card-head span {
  margin-top: 4px;
  color: var(--muted);
  font-size: 13px;
}

.production-form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(112px, 200px));
  justify-content: start;
  gap: 7px;
  margin-bottom: 8px;
}

.production-form-grid label,
.production-field,
.production-card > label {
  display: grid;
  gap: 6px;
  color: var(--muted);
  font-size: 13px;
}

.production-field {
  align-content: center;
  min-height: 38px;
  border: 1px solid #edf0ea;
  border-radius: 7px;
  padding: 5px 8px;
  background: #ffffff;
}

.production-field strong {
  color: var(--ink);
}

.waste-input {
  width: 68px;
}

.small-check {
  min-height: 38px;
  align-content: center;
}

.small-check span {
  display: grid;
  gap: 2px;
}

.small-check small {
  color: var(--muted);
  font-size: 11px;
  font-weight: 400;
}

.production-subsection {
  border: 1px solid #e3e9df;
  border-radius: 8px;
  padding: 9px;
  margin-top: 7px;
  background: #fbfcf8;
}

.production-subsection h4 {
  margin: 0 0 7px;
  font-size: 14px;
}

.production-card .package-actual-list {
  grid-template-columns: repeat(auto-fill, minmax(175px, 1fr));
  gap: 6px;
}

.production-card .package-actual {
  grid-template-columns: minmax(95px, 1fr) 70px;
  border: 1px solid #edf0ea;
  border-radius: 7px;
  padding: 6px;
  background: #ffffff;
}

.production-card .package-actual span small {
  display: block;
  margin-top: 3px;
  color: var(--muted);
  font-size: 11px;
}

.production-total {
  display: grid;
  grid-template-columns: repeat(3, auto 1fr);
  gap: 6px 10px;
  align-items: baseline;
  margin-top: 7px;
  color: var(--muted);
  font-size: 13px;
}

.production-total strong {
  color: var(--ink);
}

.billing-lines {
  display: grid;
  gap: 5px;
}

.production-billing-section > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  cursor: pointer;
  color: var(--ink);
  list-style-position: inside;
}

.production-billing-section > summary span {
  color: var(--green);
  font-size: 13px;
  font-weight: 800;
}

.production-billing-section[open] > summary {
  margin-bottom: 8px;
}

.production-packaging-section .production-total {
  grid-template-columns: auto minmax(70px, 1fr) auto minmax(70px, 1fr);
}

.billing-line {
  display: grid;
  grid-template-columns: minmax(120px, 0.8fr) minmax(180px, 1fr) minmax(180px, 1fr);
  gap: 8px;
  border-bottom: 1px solid #edf0ea;
  padding-bottom: 8px;
  font-size: 13px;
}

.billing-line:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.billing-line span {
  color: var(--muted);
}

.auto-note {
  border: 1px solid #e7ddc2;
  border-radius: 7px;
  margin-bottom: 10px;
  padding: 8px 10px;
  color: #58411a;
  background: #fff8e7;
  font-size: 13px;
}

.estimate-warning {
  border: 1px solid #d7b87b;
  border-radius: 7px;
  margin-bottom: 10px;
  padding: 8px 10px;
  color: #573b00;
  background: #fff4d7;
  font-size: 13px;
  font-weight: 800;
}

.production-note {
  width: 100%;
  min-height: 54px;
  margin-top: 6px;
}

.production-payment-line {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 14px;
  align-items: end;
  margin-top: 8px;
}

.production-payment-line > label:first-child {
  display: grid;
  gap: 6px;
  min-width: 150px;
  color: var(--muted);
  font-size: 13px;
}

.production-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(130px, auto)) minmax(120px, auto) minmax(120px, 1fr) minmax(160px, auto);
  gap: 7px;
  align-items: center;
  margin-top: 8px;
}

.customer-item {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 12px;
  align-items: center;
}

.tank-item {
  display: grid;
  grid-template-columns: minmax(160px, 1fr) 110px auto;
  gap: 10px;
  align-items: end;
}

.tank-item label {
  display: grid;
  gap: 5px;
  color: var(--muted);
  font-size: 12px;
}

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

[data-sms-production] {
  color: #174a2b;
  background: #e8f5ea;
  border: 1px solid #b9d8bf;
}

.sms-status {
  color: #52705d;
  font-size: 12px;
  font-weight: 800;
}

.production-actions .sms-status {
  min-height: 16px;
}

.package-actual-list {
  display: grid;
  gap: 6px;
  min-width: 190px;
}

.package-actual {
  display: grid;
  grid-template-columns: minmax(80px, 1fr) 64px;
  align-items: center;
  gap: 6px;
  font-size: 12px;
}

.document-preview {
  max-height: 70vh;
  overflow: auto;
  white-space: pre-wrap;
  border: 1px solid var(--line);
  border-radius: 7px;
  padding: 12px;
  background: #ffffff;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 13px;
  line-height: 1.45;
  text-align: center;
}

.document-editor {
  width: 100%;
  min-height: 520px;
  resize: vertical;
  text-align: center;
}

.eco-record-form {
  display: grid;
  gap: 10px;
  margin-bottom: 12px;
  padding: 10px;
  border: 1px solid #dfe7db;
  border-radius: 7px;
  background: #fbfdf8;
}

.eco-record-form .compact-fields {
  grid-template-columns: minmax(150px, 1fr) minmax(100px, 0.7fr) minmax(118px, 0.75fr) minmax(105px, 0.65fr);
  gap: 8px;
}

.eco-record-form label {
  gap: 4px;
}

.eco-record-form input,
.eco-record-form select {
  min-height: 32px;
  padding: 5px 8px;
}

.eco-record-form .package-actual-list {
  grid-template-columns: 1fr;
  gap: 3px;
  min-width: 0;
}

.eco-package-head,
.eco-package-row {
  display: grid;
  grid-template-columns: minmax(150px, 1fr) 72px 72px;
  align-items: center;
  gap: 6px;
}

.eco-package-head {
  padding: 0 7px 2px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
}

.eco-package-row {
  padding: 5px 7px;
  border: 1px solid #e3eadf;
  border-radius: 6px;
  background: #ffffff;
  font-size: 12px;
}

.eco-package-row:nth-child(odd) {
  background: #f6f9f2;
}

.eco-package-row strong {
  text-align: right;
  font-size: 12px;
}

.eco-record-form h4 {
  margin: 0 0 6px;
  font-size: 13px;
}

.eco-record-form .calculation-box {
  margin-top: 8px;
  padding: 8px 9px;
}

.order-select {
  display: flex;
  align-items: center;
  gap: 8px;
}

.order-select input {
  width: 18px;
  height: 18px;
}

.order-card-actions {
  display: grid;
  gap: 8px;
  justify-items: end;
}

.status {
  align-self: start;
  border-radius: 999px;
  padding: 5px 10px;
  color: #ffffff;
  background: var(--blue);
  font-size: 12px;
  font-weight: 900;
  border: 1px solid transparent;
}

.production-status .status {
  white-space: nowrap;
}

.status.status-received {
  color: #5a3a00;
  background: #ffe2a8;
  border-color: #d59b2f;
}

.status.status-process {
  color: #17324a;
  background: #dcecf9;
  border-color: #8fb9dd;
}

.status.status-stock {
  color: #4d3b00;
  background: #f8e6ad;
  border-color: #d2a53a;
}

.status.status-picked {
  color: #17324a;
  background: #d5e8fb;
  border-color: #75a7d4;
}

.status.status-finished {
  color: #143a25;
  background: #cfe9d4;
  border-color: #75b583;
}

.status.status-done {
  color: #ffffff;
  background: #267347;
  border-color: #1f5e3a;
}

.finance-payment-info .status.finance-status-open {
  border-color: #d89f45;
  background: #fff3d8;
  color: #7a4d0c;
}

.finance-payment-info .status.finance-status-partial {
  border-color: #5c87c8;
  background: #e9f1ff;
  color: #214f91;
}

.finance-payment-info .status.finance-status-paid {
  border-color: #60986b;
  background: #e8f5e9;
  color: #246233;
}

.finance-payment-info .status.finance-status-cancelled {
  border-color: #c86c68;
  background: #fdeaea;
  color: #8a2722;
}

.eco-label {
  display: inline-block;
  border-radius: 5px;
  padding: 2px 6px;
  color: #ffffff;
  background: var(--green);
  font-size: 11px;
}

.recipe-item {
  display: grid;
  grid-template-columns: 1.2fr 2fr;
  gap: 12px;
}

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

.recipe-editor-card {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}

.recipe-editor-head {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) auto;
  gap: 12px;
  align-items: end;
}

.recipe-editor-card label {
  display: grid;
  gap: 5px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.recipe-slider-list {
  display: grid;
  gap: 8px;
}

.recipe-slider-row {
  display: grid;
  grid-template-columns: minmax(150px, 0.8fr) minmax(180px, 1.5fr) 100px auto;
  gap: 10px;
  align-items: center;
  border: 1px solid #dbe6d8;
  border-radius: 8px;
  padding: 9px;
  background: #f8fbf5;
}

.recipe-share-slider {
  width: 100%;
  accent-color: var(--green);
}

.recipe-slider-row label {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
}

.recipe-total-ok,
.recipe-total-warning {
  border-radius: 7px;
  padding: 8px 10px;
  font-size: 13px;
}

.recipe-total-ok {
  color: #1d5031;
  background: #e2f2e2;
}

.recipe-total-warning {
  color: #7b4d12;
  background: #fff0d5;
}

.tag {
  border-radius: 999px;
  padding: 5px 9px;
  background: #eef4f8;
  color: #24445e;
  font-size: 12px;
}

@media (max-width: 980px) {
  .public-form-grid,
  .reservation-main,
  .reservation-summary {
    grid-template-columns: 1fr;
  }

  .reservation-calendar.is-week {
    grid-template-columns: repeat(7, minmax(180px, 1fr));
  }

  .app-shell {
    grid-template-columns: 1fr;
  }

  .sidebar {
    position: static;
    height: auto;
    padding: 14px;
    gap: 12px;
  }

  .nav {
    display: flex;
    overflow-x: auto;
    padding-bottom: 4px;
  }

  .nav-item {
    flex: 0 0 auto;
    min-width: max-content;
    padding: 0 13px;
  }

  .sidebar-footer {
    grid-template-columns: 1fr 1fr;
  }

  .metrics-grid,
  .panel-grid,
  .split-layout {
    grid-template-columns: 1fr;
  }

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

  .billing-line {
    grid-template-columns: 1fr;
  }

  #orderForm {
    position: static;
    max-height: none;
  }

  .topbar {
    align-items: stretch;
    flex-direction: column;
    margin: 0 0 16px;
    border: 1px solid var(--line);
    border-radius: 8px;
  }

  .search input {
    width: 100%;
  }

  .filter-actions,
  .document-form {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
  }
}

@media (max-width: 640px) {
  body {
    background: #eef2ed;
  }

  .public-screen {
    padding: 12px;
  }

  .public-card {
    padding: 14px;
  }

  .public-card-head {
    align-items: flex-start;
  }

  .public-card-head img {
    width: 68px;
    max-height: 54px;
  }

  .public-card h1 {
    font-size: 23px;
  }

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

  .reservation-actions button {
    width: 100%;
    padding: 0 8px;
  }

  .workspace,
  .sidebar {
    padding: 12px;
  }

  .brand-mark {
    width: 40px;
    height: 40px;
  }

  .brand h1 {
    font-size: 18px;
  }

  .sidebar-footer {
    grid-template-columns: 1fr;
  }

  .metrics-grid {
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }

  .metric,
  .panel,
  .entry-form {
    border-radius: 7px;
    box-shadow: none;
  }

  .metric {
    padding: 12px;
  }

  .metric strong {
    font-size: 21px;
  }

  .topbar h2 {
    font-size: 22px;
  }

  .panel,
  .entry-form {
    padding: 12px;
  }

  .panel-header {
    align-items: stretch;
    flex-direction: column;
  }

  .panel-actions,
  .filter-actions,
  .document-form,
  #employeeForm,
  #workLogForm,
  #sipProfitForm,
  #coldStorageForm,
  .calculation-form fieldset,
  .date-with-day,
  .work-time-field,
  .order-top-grid,
  .compact-fields {
    grid-template-columns: 1fr;
    width: 100%;
  }

  #workLogForm .work-date-field,
  #workLogForm .work-time-field,
  #workLogForm .work-place-field,
  #workLogForm .work-stamp-field,
  #workLogForm .work-payment-field {
    grid-column: 1;
  }

  #orderForm input[name="receivedDate"],
  #orderForm input[name="processDate"],
  #orderForm input[name="customer"],
  .short-field,
  .process-date-field {
    max-width: none;
  }

  .panel-actions {
    display: grid;
  }

  .package-option,
  .mix-row {
    grid-template-columns: 24px 1fr;
    align-items: start;
  }

  .mix-row {
    grid-template-columns: 1fr;
  }

  .mix-row span,
  .mix-row input,
  .mix-row select {
    grid-column: 1;
  }

  .package-option-head,
  .mix-head {
    display: none;
  }

  .package-option > span:nth-child(2) {
    font-weight: 700;
  }

  .package-option input[type="number"],
  .package-liters,
  .package-prep,
  .remainder-choice,
  .mix-row input,
  .mix-row select {
    grid-column: 2;
    width: 100%;
  }

  .remainder-choice {
    min-height: 34px;
  }

  .recipe-item,
  .order-card {
    grid-template-columns: 1fr;
  }

  .order-card-actions {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    justify-items: stretch;
  }

  .order-card-actions .status {
    grid-column: 1 / -1;
    width: max-content;
  }

  .order-card-actions button {
    padding: 0 8px;
  }

  .customer-item,
  .tank-item {
    grid-template-columns: 1fr;
  }

  .brand-logos {
    display: none;
  }

  .production-card-head,
  .production-form-grid,
  .production-actions,
  .finished-row,
  .order-archive-row,
  .production-card .package-actual-list,
  .production-total {
    grid-template-columns: 1fr;
  }

  .production-card-head {
    display: grid;
  }

  .production-total {
    gap: 4px;
  }

  .production-card .package-actual {
    grid-template-columns: 1fr;
  }

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

  table,
  .production-table {
    min-width: 0;
  }

  thead {
    display: none;
  }

  table,
  tbody,
  tr,
  td {
    display: block;
    width: 100%;
  }

  tr {
    border: 1px solid var(--line);
    border-radius: 8px;
    margin-bottom: 12px;
    padding: 8px;
    background: #ffffff;
  }

  td {
    display: grid;
    grid-template-columns: minmax(96px, 38%) minmax(0, 1fr);
    align-items: center;
    gap: 10px;
    border-bottom: 1px solid #edf0ea;
    padding: 8px 4px;
    font-size: 13px;
  }

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

  td::before {
    content: attr(data-label);
    color: var(--muted);
    font-size: 12px;
    font-weight: 700;
  }

  td.numeric {
    text-align: left;
  }

  .table-input,
  .small-input,
  .wide-input,
  .table-note {
    width: 100%;
  }

  .package-actual-list {
    min-width: 0;
  }

  .document-preview {
    max-height: 55vh;
    font-size: 12px;
  }
}

.work-weekday-info {
  display: grid;
  gap: 6px;
  align-content: end;
  min-height: 38px;
}

.work-short-date {
  display: grid;
  grid-template-columns: 72px auto 92px auto;
  gap: 5px;
  align-items: center;
  width: max-content;
  max-width: 100%;
}

.work-short-date input {
  width: 100%;
  text-align: center;
}

.work-short-date > span {
  color: var(--ink);
  font-size: 18px;
  font-weight: 800;
}

.work-weekday-info span {
  color: var(--muted);
  font-size: 13px;
}

.work-weekday-info strong {
  min-height: 38px;
  display: flex;
  align-items: center;
  border: 1px solid #e3e9df;
  border-radius: 7px;
  padding: 8px 10px;
  background: #f7faf5;
}

#workLogForm input[type="time"]::-webkit-calendar-picker-indicator {
  display: none;
}

.work-place-item {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) 140px 100px auto;
  gap: 10px;
  align-items: end;
}

.work-place-item label {
  display: grid;
  gap: 6px;
  color: var(--muted);
  font-size: 13px;
}

.finance-window-head {
  grid-column: 1 / -1;
  position: sticky;
  top: 0;
  z-index: 3;
  min-height: 56px;
  margin: -14px -14px 8px;
  padding: 12px 14px;
  border-bottom: 1px solid #d8e1d2;
  background: rgba(248, 250, 246, 0.98);
  backdrop-filter: blur(8px);
}

.finance-window-head h3 {
  min-width: 0;
  margin: 0;
  font-size: 18px;
}

.finance-window-head > div:first-child {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.finance-window-head > div:first-child > span {
  color: var(--muted);
  font-size: 12px;
}

.finance-window-actions {
  display: flex;
  flex: 0 0 auto;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 7px;
}

.finance-form .finance-window-actions button {
  grid-column: auto;
}

.compact-command {
  min-height: 34px;
  padding: 7px 12px;
}

.finance-file-button {
  cursor: pointer;
}

.finance-import-panel {
  position: fixed;
  inset: 18px;
  z-index: 90;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  width: min(1480px, calc(100vw - 36px));
  max-height: calc(100vh - 36px);
  margin: auto;
  border: 1px solid rgba(39, 67, 48, 0.18);
  border-radius: 10px;
  padding: 18px;
  overflow: hidden;
  background: #ffffff;
  box-shadow: 0 24px 80px rgba(20, 31, 24, 0.28);
}

.finance-import-list {
  display: grid;
  align-content: start;
  gap: 8px;
  min-height: 0;
  padding: 2px;
  overflow: auto;
}

.finance-import-row {
  display: grid;
  grid-template-columns: 62px 88px 118px 112px minmax(160px, 1fr) 118px 96px 86px 96px minmax(160px, 1fr);
  gap: 7px;
  align-items: end;
  border: 2px solid #d6dfd2;
  border-radius: 7px;
  padding: 9px;
  background: #ffffff;
}

.finance-import-row:nth-child(even) {
  background: #f8faf6;
}

.finance-import-row.import-duplicate {
  border-color: #dfc48e;
  background: #fff8e9;
}

.finance-import-row.import-error {
  border-color: #d7a5a0;
  background: #fff2f0;
}

.finance-import-row label {
  display: grid;
  gap: 4px;
  min-width: 0;
  color: var(--muted);
  font-size: 11px;
}

.finance-import-row input,
.finance-import-row select {
  min-width: 0;
  width: 100%;
  min-height: 36px;
}

.finance-import-check {
  align-self: center;
  grid-template-columns: auto 1fr;
  align-items: center;
}

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

.finance-import-source {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.finance-import-source strong,
.finance-import-source span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.finance-import-source span {
  color: var(--muted);
  font-size: 11px;
}

.finance-import-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}

.finance-import-progress {
  min-width: 0;
  color: var(--muted);
  font-size: 13px;
}

@media (max-width: 640px) {
  html,
  body {
    max-width: 100%;
    overflow-x: hidden;
  }

  .sidebar {
    position: sticky;
    top: 0;
    z-index: 50;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    max-height: none;
    overflow: hidden;
    padding: 8px 10px;
    gap: 8px;
    border-bottom: 1px solid var(--line);
  }

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

  .sidebar .brand p,
  .sidebar .brand-logos {
    display: none;
  }

  .sidebar .shop-link {
    width: auto;
    min-height: 40px;
    padding: 0 10px;
  }

  .sidebar .nav {
    grid-column: 1 / -1;
    display: flex;
    gap: 6px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scrollbar-width: thin;
    padding-bottom: 4px;
  }

  .sidebar .nav-item {
    flex: 0 0 auto;
    min-width: max-content;
    min-height: 42px;
    padding: 0 12px;
    white-space: nowrap;
  }

  .workspace {
    width: 100%;
    min-width: 0;
    padding: 8px;
  }

  .topbar {
    gap: 8px;
    padding: 10px;
  }

  .auth-box {
    display: grid;
    grid-template-columns: 1fr;
    gap: 6px;
    width: 100%;
  }

  #authUserLabel,
  #appStatusLabel {
    overflow-wrap: anywhere;
    font-size: 11px;
  }

  .cloud-safety-badge {
    justify-content: center;
    width: 100%;
    white-space: normal;
    text-align: center;
  }

  .view,
  .panel,
  .entry-form,
  .compact-item,
  .production-card,
  .order-card {
    min-width: 0;
    max-width: 100%;
  }

  input,
  select,
  textarea,
  button {
    max-width: 100%;
  }

  .production-actions,
  .order-card-actions,
  .row-actions,
  .form-actions {
    grid-template-columns: 1fr !important;
    width: 100%;
  }

  .production-actions > *,
  .order-card-actions > *,
  .row-actions > *,
  .form-actions > * {
    width: 100%;
    min-height: 44px;
  }

  .finished-row-head,
  .order-archive-head {
    grid-template-columns: 1fr !important;
    grid-template-areas: none;
  }

  .production-column-header,
  .order-column-header {
    grid-column: auto !important;
    grid-area: auto !important;
  }

  .work-place-item,
  .date-with-day,
  .work-time-field {
    grid-template-columns: 1fr;
  }

  #workLogForm .work-save-field,
  #workLogForm .work-clear-field,
  #workLogForm .work-employee-field,
  #workLogForm .work-calc-field,
  #workLogForm .work-note-field {
    grid-column: 1;
  }

  .settings-tabs,
  .sip-section-tabs {
    display: flex;
    overflow-x: auto;
    flex-wrap: nowrap;
    padding-bottom: 4px;
  }

  .settings-tab,
  .sip-section-tabs button {
    flex: 0 0 auto;
    min-height: 42px;
    white-space: nowrap;
  }
}

@media (max-width: 640px) {
  button,
  input,
  select,
  textarea {
    font-size: 16px;
  }

  .app-shell {
    display: block;
  }

  .workspace,
  .sidebar {
    padding: 10px;
  }

  .sidebar {
    position: sticky;
    top: 0;
    z-index: 20;
    gap: 8px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  }

  .brand {
    gap: 10px;
  }

  .brand-mark {
    width: 34px;
    height: 34px;
  }

  .brand h1 {
    font-size: 16px;
  }

  .brand p,
  .brand-logos {
    display: none;
  }

  .shop-link {
    min-height: 34px;
    font-size: 13px;
  }

  .nav {
    gap: 6px;
    margin: 0 -10px;
    padding: 0 10px 4px;
    scrollbar-width: thin;
  }

  .nav-item {
    min-height: 36px;
    padding: 0 11px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 999px;
    font-size: 13px;
    white-space: nowrap;
  }

  .topbar {
    position: static;
    gap: 10px;
    padding: 12px;
    margin-bottom: 12px;
  }

  .topbar h2 {
    font-size: 20px;
  }

  .auth-box {
    align-items: stretch;
    flex-direction: column;
    justify-content: stretch;
    min-width: 0;
    width: 100%;
  }

  .auth-box span {
    overflow: hidden;
    text-align: left;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  #orders .split-layout {
    gap: 12px;
  }

  #orderForm {
    gap: 9px;
    padding-bottom: 82px;
  }

  #orderForm h3 {
    font-size: 18px;
  }

  #orderForm .compact-fields {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    padding: 8px;
  }

  #orderForm .compact-fields .checkbox-line,
  #orderForm .compact-fields label:has(select[name="tank"]) {
    grid-column: 1 / -1;
  }

  .entry-form input,
  .entry-form select,
  .entry-form textarea {
    min-height: 46px;
  }

  .form-actions {
    display: grid;
    grid-template-columns: 1fr;
    position: sticky;
    bottom: 0;
    z-index: 10;
    margin: 6px -12px -12px;
    padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
    border-top: 1px solid var(--line);
    background: rgba(255, 255, 255, 0.96);
    backdrop-filter: blur(8px);
  }

  .form-actions button,
  .panel-actions button,
  .document-form button {
    width: 100%;
    min-height: 46px;
  }

  .package-option {
    gap: 7px 9px;
    padding: 10px;
  }

  .order-card,
  .production-card,
  .compact-item {
    box-shadow: none;
  }

  .production-card {
    padding: 12px;
  }

  .production-actions {
    position: static;
    margin: 10px 0 0;
    padding: 0;
    border-top: 0;
    background: transparent;
    backdrop-filter: none;
  }

  .production-save-button {
    position: sticky;
    bottom: calc(8px + env(safe-area-inset-bottom));
    z-index: 9;
    box-shadow: 0 10px 22px rgba(41, 86, 48, 0.22);
  }

  .finished-row-head {
    position: static;
    display: none;
  }

  .save-toast {
    right: 10px;
    bottom: calc(12px + env(safe-area-inset-bottom));
    left: 10px;
    max-width: none;
    text-align: center;
  }
}

@media (max-width: 640px) {
  .view {
    scroll-margin-top: 128px;
  }

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

  .metric small {
    line-height: 1.25;
  }

  .panel-grid,
  .documents-grid,
  .calculations-grid,
  .split-layout {
    display: grid;
    grid-template-columns: 1fr !important;
    gap: 12px;
  }

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

  .panel-header {
    gap: 10px;
  }

  .panel-actions,
  .filter-actions {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .panel-actions label,
  .filter-actions label,
  .document-form label {
    display: grid;
    gap: 5px;
  }

  #production .filter-actions,
  #orders .panel-actions {
    padding: 8px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #ffffff;
  }

  .production-list,
  .order-grid,
  .compact-list {
    gap: 10px;
  }

  .production-card,
  .order-card,
  .compact-item,
  .recipe-item {
    border-radius: 8px;
    padding: 12px;
  }

  .production-field {
    min-height: auto;
  }

  .production-subsection {
    padding: 10px;
  }

  .billing-line,
  .production-total {
    grid-template-columns: 1fr;
  }

  .production-total {
    gap: 3px;
  }

  .row-actions,
  .order-card-actions {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
    width: 100%;
  }

  .finished-row {
    text-align: left;
    display: grid;
    grid-template-columns: 1fr;
    gap: 7px;
    align-items: stretch;
  }

  .order-archive-row {
    text-align: left;
    display: grid;
    grid-template-areas:
      "number"
      "customer"
      "date"
      "fruit"
      "kg"
      "tank"
      "status"
      "actions";
    grid-template-columns: 1fr;
    gap: 7px;
    align-items: stretch;
  }

  .order-archive-head {
    display: none;
  }

  .finished-row > span {
    display: block;
  }

  .order-archive-row > span {
    display: block;
  }

  .finished-row > span::before {
    display: block;
    margin-bottom: 2px;
    color: var(--muted);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
  }

  .order-archive-row > span::before {
    display: block;
    margin-bottom: 2px;
    color: var(--muted);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
  }

  .finished-row > span:nth-of-type(1)::before { content: "Stranka"; }
  .finished-row > span:nth-of-type(2)::before { content: "Datum dovoza"; }
  .finished-row > span:nth-of-type(3)::before { content: "Datum prerade"; }
  .finished-row > span:nth-of-type(4)::before { content: "Voce"; }
  .finished-row > span:nth-of-type(5)::before { content: "EKO"; }
  .finished-row > span:nth-of-type(6)::before { content: "Kilograma"; }
  .finished-row > span:nth-of-type(7)::before { content: "Randman"; }
  .finished-row > span:nth-of-type(8)::before { content: "Napunjeno"; }
  .finished-row > span:nth-of-type(9)::before { content: "SMS"; }
  .finished-row > span:nth-of-type(10)::before { content: "Status"; }

  .order-archive-row > span:nth-of-type(1)::before { content: "Stranka"; }
  .order-archive-row > span:nth-of-type(2)::before { content: "Datum prerade"; }
  .order-archive-row > span:nth-of-type(3)::before { content: "Voce"; }
  .order-archive-row > span:nth-of-type(4)::before { content: "Kilograma"; }
  .order-archive-row > span:nth-of-type(5)::before { content: "Posuda"; }
  .order-archive-row > span:nth-of-type(6)::before { content: "Status"; }

  #stockForm,
  #workLogForm,
  #employeeForm,
  #settingsForm,
  #customerForm,
  #sipProductForm,
  #sipStockForm,
  #sipProfitForm,
  #coldStorageForm,
  .calculation-form {
    grid-template-columns: 1fr !important;
  }

  .settings-form fieldset,
  .calculation-form fieldset {
    min-width: 0;
    padding: 10px;
  }

  .document-form {
    grid-template-columns: 1fr !important;
  }

  .sip-product-grid {
    grid-template-columns: 1fr;
  }

  .sip-image-tool,
  .editor-head {
    grid-template-columns: 1fr;
    display: grid;
  }

  .document-preview,
  .document-editor textarea {
    max-height: none;
    min-height: 260px;
  }

  .calculation-comparison-table,
  .table-wrap {
    width: 100%;
  }

  .table-wrap {
    overflow-x: auto;
  }

  .table-wrap table {
    min-width: 0;
  }

  #priceRows input,
  #stockForm input,
  #stockForm select {
    min-width: 0;
  }

  .save-toast {
    font-size: 14px;
  }
}

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

  .finance-form-modal {
    inset: 8px;
    width: calc(100vw - 16px);
    max-height: calc(100vh - 16px);
    overflow-x: hidden;
  }

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

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

  .finance-line-item strong {
    grid-column: 1 / -1;
  }

  .finance-actions {
    width: 100%;
    justify-content: stretch;
  }

  .finance-actions label,
  .finance-actions input,
  .finance-actions select {
    width: 100%;
  }

  .finance-list {
    overflow: visible;
  }

  .finance-head {
    display: none;
  }

  .finance-row {
    display: grid;
    grid-template-columns: 1fr;
    min-width: 0;
    text-align: left;
  }

  .finance-row > span,
  .finance-row > strong {
    display: block;
    overflow: visible;
    text-overflow: clip;
  }

  .finance-row .numeric {
    text-align: left;
  }

  .finance-row > span::before,
  .finance-row > strong::before {
    display: block;
    margin-bottom: 2px;
    color: var(--muted);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
  }

  .finance-row > strong:nth-of-type(1)::before { content: "RB"; }
  .finance-row > span:nth-of-type(1)::before { content: "Tip"; }
  .finance-row > span:nth-of-type(2)::before { content: "Datum"; }
  .finance-row > span:nth-of-type(3)::before { content: "Vrsta"; }
  .finance-row > strong:nth-of-type(2)::before { content: "Broj"; }
  .finance-row > span:nth-of-type(4)::before { content: "Stranka / opis"; }
  .finance-row > span:nth-of-type(5)::before { content: "Kolicina"; }
  .finance-row > span:nth-of-type(6)::before { content: "Osnovica"; }
  .finance-row > span:nth-of-type(7)::before { content: "PDV"; }
  .finance-row > span:nth-of-type(8)::before { content: "Ukupno"; }
  .finance-row > span:nth-of-type(9)::before { content: "Placeno / status"; }
  .finance-row > span:nth-of-type(10)::before { content: "Akcije"; }

  .finance-total-row {
    position: static;
  }

  .finance-total-row > span:empty {
    display: none;
  }

  .finance-total-row > span::before,
  .finance-total-row > strong::before {
    content: none !important;
  }
}

/* Final UI polish pass - app wide */
html {
  overflow-x: hidden;
}

body {
  overflow-x: hidden;
}

button,
.nav-item,
.settings-tab,
.compact-item,
.order-card,
.production-card,
.reservation-card,
.sales-order-card,
.sip-product-card {
  touch-action: manipulation;
}

button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
.nav-item:focus-visible,
.settings-tab:focus-visible {
  outline: 3px solid rgba(47, 111, 78, 0.28);
  outline-offset: 2px;
}

.workspace {
  max-width: 100vw;
}

.topbar {
  box-shadow: 0 6px 18px rgba(31, 45, 37, 0.05);
}

.panel,
.entry-form,
.metric {
  min-width: 0;
}

.panel-header h3,
.entry-form h3,
.metric strong,
.compact-item strong,
.order-card strong,
.production-card strong {
  overflow-wrap: anywhere;
}

.panel-actions > *,
.row-actions > *,
.order-card-actions > *,
.production-actions > *,
.reservation-actions > *,
.processing-actions > * {
  min-width: 0;
}

.ghost-button,
.danger-button,
.primary-button,
.settings-tab,
.nav-item {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1.15;
  text-align: center;
}

.nav-item {
  justify-content: flex-start;
}

.compact-item,
.order-card,
.reservation-card,
.production-card,
.sales-order-card {
  overflow: hidden;
}

.compact-item span,
.order-card span,
.reservation-card span,
.production-card span,
.sales-order-card span {
  line-height: 1.35;
}

.table-wrap,
.stock-summary-table,
.finance-list,
.production-list,
.order-archive-list {
  max-width: 100%;
  scrollbar-width: thin;
}

.stock-summary-table input[type="checkbox"] {
  width: 18px;
  height: 18px;
  accent-color: var(--green);
}

.stock-summary-table td.numeric,
.stock-summary-table th.numeric {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.sip-section-tabs,
.settings-tabs {
  align-items: center;
}

.sip-product-card {
  transition: transform 0.12s ease, border-color 0.12s ease, box-shadow 0.12s ease;
}

.sip-product-card:hover {
  border-color: #b9cbb3;
  box-shadow: 0 10px 22px rgba(31, 45, 37, 0.1);
  transform: translateY(-1px);
}

.sip-product-prices {
  align-items: stretch;
}

.sip-product-prices strong,
.sip-product-prices span {
  border: 1px solid #dbe6d8;
  border-radius: 7px;
  padding: 6px 8px;
  background: #f8fbf5;
}

.sip-product-prices span {
  margin-left: 0;
}

.production-card {
  border-color: #cfc6b5;
}

.production-card:not(.is-finished) {
  border-left: 5px solid var(--green);
}

.production-card.is-finished {
  border-left: 5px solid #7d9f6f;
}

.finished-row {
  border-color: #cfc6b5;
}

.production-compact-row {
  cursor: pointer;
}

.production-compact-row:hover,
.production-compact-row:focus-visible {
  border-color: #83a77c;
  background: #f5faf2;
}

.finished-row > span {
  line-height: 1.25;
}

.finance-row,
.finished-row,
.order-archive-row {
  box-shadow: 0 2px 8px rgba(31, 45, 37, 0.035);
}

.date-with-day,
.work-time-field {
  min-width: 0;
}

.document-preview,
.document-editor textarea {
  overflow-wrap: anywhere;
}

@media (min-width: 981px) {
  .app-shell {
    grid-template-columns: 46px minmax(0, 1fr);
  }

  .sidebar {
    position: fixed;
    z-index: 30;
    width: 280px;
    transform: translateX(-234px);
    transition: transform 0.18s ease, box-shadow 0.18s ease;
    box-shadow: 10px 0 24px rgba(20, 31, 24, 0.08);
  }

  .sidebar:hover,
  .sidebar:focus-within,
  .sidebar.is-pinned {
    transform: translateX(0);
    box-shadow: 14px 0 34px rgba(20, 31, 24, 0.22);
  }

  .sidebar::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 46px;
    height: 100%;
    border-left: 1px solid rgba(255, 255, 255, 0.08);
    pointer-events: none;
  }

  .main-content,
  .workspace {
    grid-column: 2;
    min-width: 0;
  }

  .panel-grid {
    align-items: start;
  }

  .panel-actions input,
  .panel-actions select {
    max-width: 220px;
  }

  #orders .panel-actions input,
  #orders .panel-actions select {
    max-width: 160px;
  }

  .documents-grid {
    grid-template-columns: minmax(300px, 0.8fr) minmax(520px, 1.35fr);
  }
}

@media (max-width: 980px) {
  .sidebar-pin {
    display: none;
  }

  .sidebar {
    max-height: none;
  }

  .brand {
    min-width: 0;
  }

  .brand > div:last-child {
    min-width: 0;
  }

  .nav {
    -webkit-overflow-scrolling: touch;
  }

  .nav-item {
    white-space: nowrap;
  }

  .topbar {
    position: static;
  }

  .panel-actions input,
  .panel-actions select,
  .panel-actions button,
  .filter-actions input,
  .filter-actions select,
  .filter-actions button {
    width: 100%;
  }

  .reservation-calendar.is-week {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x proximity;
  }

  .reservation-day-column {
    flex: 0 0 min(82vw, 320px);
    scroll-snap-align: start;
  }
}

@media (max-width: 640px) {
  .login-screen,
  .public-screen {
    min-height: 100svh;
  }

  .login-card,
  .public-card {
    width: 100%;
    border-radius: 8px;
  }

  .sidebar {
    position: sticky;
    top: 0;
    max-height: 44vh;
    overflow-y: auto;
  }

  .brand {
    align-items: center;
  }

  .shop-link {
    width: 100%;
  }

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

  .nav-item {
    justify-content: center;
    min-width: 0;
    white-space: normal;
  }

  .sidebar-footer {
    gap: 8px;
  }

  .workspace {
    padding: 10px;
  }

  .topbar {
    border-radius: 8px;
  }

  .auth-box .ghost-button {
    width: 100%;
  }

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

  .panel,
  .entry-form,
  .metric {
    padding: 12px;
  }

  .panel-header {
    margin-bottom: 10px;
  }

  .panel-header h3,
  .entry-form h3 {
    font-size: 17px;
  }

  .panel-actions,
  .filter-actions,
  .row-actions,
  .order-card-actions,
  .reservation-actions,
  .finance-actions,
  .processing-actions,
  .product-actions {
    display: grid;
    grid-template-columns: 1fr;
    width: 100%;
  }

  .panel-actions label,
  .filter-actions label {
    width: 100%;
  }

  .entry-form input,
  .entry-form select,
  .entry-form textarea,
  .settings-form input,
  .settings-form select,
  .settings-form textarea,
  .panel-actions input,
  .panel-actions select {
    width: 100%;
  }

  .order-top-grid,
  .compact-fields,
  .production-form-grid,
  .finance-detail-box,
  .sales-order-form fieldset,
  .public-form-grid {
    grid-template-columns: 1fr !important;
  }

  .recipe-editor-head,
  .recipe-slider-row,
  .mix-option-item,
  .calculation-ingredient-grid,
  .calculation-mix-row {
    grid-template-columns: 1fr;
  }

  .historical-filters,
  .historical-summary,
  .historical-detail-grid {
    grid-template-columns: 1fr;
  }

  .historical-production-row summary {
    grid-template-columns: 24px minmax(0, 1fr);
    gap: 6px 10px;
  }

  .historical-production-row summary > *:not(:first-child) {
    grid-column: 2;
  }

  .historical-production-row summary > span {
    white-space: normal;
  }

  .historical-note {
    grid-column: auto;
  }

  .package-option {
    grid-template-columns: 24px minmax(0, 1fr);
  }

  .package-option > * {
    min-width: 0;
  }

  .calendar-slot {
    min-height: 44px;
  }

  .calendar-order-block,
  .calendar-reservation-block,
  .calendar-break-block {
    overflow: hidden;
  }

  .calendar-order-block strong,
  .calendar-reservation-block strong,
  .calendar-order-block span,
  .calendar-reservation-block span {
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .stock-summary-table,
  .calculation-comparison-table {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .stock-summary-table table,
  .calculation-comparison-table {
    display: table;
    min-width: 680px;
  }

  .stock-summary-table thead,
  .calculation-comparison-table thead {
    display: table-header-group;
  }

  .stock-summary-table tbody,
  .calculation-comparison-table tbody {
    display: table-row-group;
  }

  .stock-summary-table tr,
  .calculation-comparison-table tr {
    display: table-row;
    margin: 0;
    padding: 0;
    border: 0;
  }

  .stock-summary-table th,
  .stock-summary-table td,
  .calculation-comparison-table th,
  .calculation-comparison-table td {
    display: table-cell;
    width: auto;
    min-width: 94px;
    padding: 8px;
  }

  .stock-summary-table td::before,
  .calculation-comparison-table td::before {
    content: none;
  }

  .finance-row,
  .finished-row,
  .order-archive-row {
    border-width: 2px;
    box-shadow: none;
  }

  .finance-row > span,
  .finance-row > strong,
  .finished-row > span,
  .order-archive-row > span {
    padding: 7px 0;
    border-bottom: 1px solid #edf0ea;
  }

  .finance-row > span:last-child,
  .finance-row > strong:last-child,
  .finished-row > span:last-child,
  .order-archive-row > span:last-child {
    border-bottom: 0;
  }

  .production-save-button {
    width: 100%;
  }

  .sip-product-card:hover {
    transform: none;
  }

  .sip-product-image,
  .sip-product-image:not(.has-image)::after {
    min-height: 132px;
  }

  .sip-product-prices {
    display: grid;
    grid-template-columns: 1fr;
  }

  .sales-order-statuses,
  .status-checks {
    display: grid;
    grid-template-columns: 1fr;
  }

  .excel-area-grid,
  .excel-import-mode {
    grid-template-columns: 1fr;
  }

  .excel-area-row,
  .excel-area-all {
    grid-column: auto;
    grid-template-columns: 1fr;
  }

  .excel-area-row .form-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  .document-preview,
  .document-editor textarea {
    min-height: 220px;
  }
}

@media (max-width: 420px) {
  .nav {
    grid-template-columns: 1fr;
  }

  .public-card-head {
    display: grid;
    grid-template-columns: 58px minmax(0, 1fr);
  }

  .order-card-actions,
  .row-actions {
    grid-template-columns: 1fr;
  }

  td {
    grid-template-columns: 1fr;
    gap: 4px;
  }
}

.haccp-day-row {
  align-items: stretch;
}

.haccp-cleaning-lines {
  display: grid;
  gap: 6px;
}

.mini-line {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 4px 0;
  border-top: 1px solid rgba(40, 82, 45, 0.12);
}

.mini-button {
  padding: 5px 8px;
  min-height: 30px;
}

.online-database-status {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  width: 100%;
  margin-top: 8px;
}

.online-database-status div {
  display: grid;
  gap: 2px;
  padding: 8px;
  border: 1px solid rgba(45, 89, 54, 0.16);
  background: #f7faf5;
}

.online-database-status .wide {
  grid-column: 1 / -1;
}

.online-database-status span {
  color: #5f705f;
  font-size: 12px;
}

.online-database-status strong {
  color: #1f3024;
  font-size: 13px;
  overflow-wrap: anywhere;
}

@media (max-width: 640px) {
  .mini-line {
    display: grid;
  }

  .online-database-status {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .finished-row-head {
    position: static;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    min-width: 0;
    gap: 8px;
    text-align: left;
  }

  .production-column-header {
    padding: 0;
  }

  .production-sort-button {
    text-align: left;
  }

  .production-action-header {
    grid-column: 1 / -1;
  }

  .production-filter-empty {
    min-width: 0;
  }

  .order-archive-head {
    position: static;
    display: grid;
    grid-template-areas:
      "number customer"
      "date fruit"
      "kg tank"
      "status actions";
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    text-align: left;
  }

  .order-column-header {
    padding: 0;
  }

  .order-sort-button {
    text-align: left;
  }
}

/* Zavrsna mobilna pravila moraju ostati zadnja zbog starijih responsive blokova iznad. */
@media (max-width: 640px) {
  .sidebar {
    position: sticky;
    top: 0;
    z-index: 50;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    max-height: none;
    overflow: hidden;
    padding: 8px 10px;
    gap: 8px;
  }

  .sidebar .nav {
    grid-column: 1 / -1;
    display: flex;
    gap: 6px;
    overflow-x: auto;
    padding-bottom: 4px;
  }

  .sidebar .nav-item {
    flex: 0 0 auto;
    min-width: max-content;
    min-height: 42px;
    white-space: nowrap;
  }

  .finished-row-head,
  .order-archive-head {
    grid-template-columns: 1fr !important;
    grid-template-areas: none !important;
  }

  .production-column-header,
  .order-column-header,
  .production-action-header {
    grid-column: auto !important;
    grid-area: auto !important;
  }

  .finance-window-head {
    align-items: flex-start;
  }

  .finance-window-head h3 {
    padding-top: 8px;
    font-size: 14px;
    white-space: nowrap;
  }

  .finance-window-actions {
    gap: 4px;
  }

  .compact-command {
    min-height: 38px;
    padding: 7px;
    font-size: 11px;
  }

  .finance-import-panel {
    inset: 8px;
    width: calc(100vw - 16px);
    max-height: calc(100vh - 16px);
    padding: 10px;
  }

  .finance-import-panel .modal-form-head {
    margin: -10px -10px 6px;
    padding: 10px;
  }

  .finance-import-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
  }

  .finance-import-check,
  .finance-import-source,
  .import-partner {
    grid-column: 1 / -1;
  }

  .finance-import-footer {
    display: grid;
  }

  .finance-import-footer button {
    width: 100%;
    min-height: 44px;
  }

  .finance-section-tabs {
    display: grid;
    grid-template-columns: 1fr;
  }

  .finance-section-tabs .settings-tab {
    width: 100%;
  }

  .statistics-filters,
  .statistics-filters label {
    width: 100%;
  }

  .statistics-kpi-grid,
  .statistics-grid,
  .statistics-detail-grid {
    grid-template-columns: 1fr;
  }

  .statistics-kpi {
    min-height: 128px;
  }

  .statistics-kpi > strong {
    font-size: 23px;
  }

  .statistics-month-bars {
    grid-template-columns: 30px minmax(70px, 1fr) 88px;
    gap: 5px;
    padding-inline: 2px;
  }

  .statistics-month-bars > span {
    font-size: 10px;
  }

  .statistics-breakdown-row {
    grid-template-columns: minmax(80px, 110px) minmax(70px, 1fr) 90px;
  }

  .statistics-table-wrap {
    overflow-x: auto;
  }

  html,
  body,
  .app-shell,
  .main-content,
  .workspace,
  .view,
  .panel,
  .entry-form,
  .settings-form,
  .table-panel,
  .compact-list,
  .sales-order-table,
  .production-list,
  .order-archive-list,
  .finance-list {
    max-width: 100%;
    min-width: 0;
  }

  body,
  .app-shell,
  .main-content,
  .workspace {
    overflow-x: hidden;
  }

  .view,
  .panel,
  .entry-form,
  .sales-order-table-row,
  .compact-item,
  .production-card,
  .order-card,
  .finance-row,
  .finished-row,
  .order-archive-row {
    width: 100%;
    box-sizing: border-box;
  }

  .topbar,
  .panel-header,
  .panel-actions,
  .form-actions,
  .row-actions,
  .sales-order-archive-toggle {
    max-width: 100%;
    min-width: 0;
  }

  .topbar > *,
  .panel-header > *,
  .panel-actions > *,
  .form-actions > *,
  .row-actions > *,
  .sales-order-archive-toggle > * {
    max-width: 100%;
    min-width: 0;
  }

  input,
  select,
  textarea,
  button {
    max-width: 100%;
  }

  .sales-order-table-row {
    padding: 10px;
  }

  .sales-order-table-row .row-actions,
  .sales-order-archive-toggle {
    display: grid;
    grid-template-columns: 1fr;
  }

  .sales-order-table-row .row-actions button,
  .sales-order-archive-toggle button {
    width: 100%;
  }
}

/* Mobilna citljivost - ostaviti kao zadnji sloj za aplikaciju. */
@media (max-width: 640px) {
  body {
    background: #f7f8f4;
    font-size: 16px;
    line-height: 1.42;
  }

  .app-shell {
    font-size: 16px;
  }

  .workspace {
    padding: 8px;
  }

  .sidebar {
    padding: 9px;
    box-shadow: 0 8px 18px rgba(31, 45, 37, 0.12);
  }

  .brand h1 {
    font-size: 18px;
  }

  .shop-link,
  .sidebar .nav-item,
  .nav-item {
    min-height: 46px;
    padding: 0 14px;
    font-size: 15px;
    font-weight: 800;
  }

  .topbar {
    padding: 14px;
    border-radius: 10px;
  }

  .topbar h2 {
    font-size: 24px;
    line-height: 1.12;
  }

  .eyebrow {
    font-size: 12px;
  }

  #authUserLabel,
  #appStatusLabel {
    font-size: 12px;
    line-height: 1.35;
    white-space: normal;
  }

  .panel,
  .entry-form,
  .metric {
    padding: 14px;
    border-radius: 10px;
  }

  .panel-header {
    display: grid;
    grid-template-columns: 1fr;
    align-items: stretch;
  }

  .panel-header h3,
  .entry-form h3 {
    font-size: 20px;
    line-height: 1.2;
  }

  .panel-actions,
  .filter-actions {
    gap: 10px;
  }

  .panel-actions label,
  .filter-actions label,
  .entry-form label,
  .settings-form label {
    color: #344339;
    font-size: 14px;
    font-weight: 800;
  }

  input,
  select,
  textarea {
    min-height: 50px;
    padding: 11px 12px;
    border-radius: 9px;
    font-size: 17px;
  }

  textarea {
    min-height: 96px;
  }

  button,
  .ghost-button,
  .danger-button,
  .primary-button,
  .settings-tab,
  .compact-command {
    min-height: 48px;
    padding: 10px 14px;
    border-radius: 9px;
    font-size: 15px;
    font-weight: 850;
  }

  .metrics-grid,
  .panel-grid,
  .split-layout,
  .documents-grid,
  .calculations-grid {
    gap: 14px;
  }

  .metric strong {
    font-size: 25px;
  }

  .metric small,
  .compact-item span,
  .order-card span,
  .production-card span,
  .reservation-card span,
  .sales-order-table-row small,
  .finance-row small,
  .finished-row small {
    font-size: 14px;
    line-height: 1.42;
  }

  .compact-item,
  .order-card,
  .production-card,
  .reservation-card,
  .finance-row,
  .finished-row,
  .order-archive-row,
  .sales-order-table-row {
    gap: 10px;
    padding: 14px;
    border-width: 2px;
    border-radius: 10px;
    background: #ffffff;
    box-shadow: 0 5px 14px rgba(31, 45, 37, 0.07);
    font-size: 16px;
  }

  .compact-item strong,
  .order-card strong,
  .production-card strong,
  .reservation-card strong,
  .sales-order-table-row strong,
  .finance-row strong,
  .finished-row strong {
    font-size: 17px;
    line-height: 1.22;
  }

  .production-card-head {
    gap: 8px;
  }

  .production-card-head strong {
    font-size: 18px;
  }

  .production-field,
  .production-total,
  .billing-line,
  .package-option,
  .sales-item-row {
    padding: 12px;
    border-radius: 9px;
  }

  .finished-row > span,
  .order-archive-row > span,
  .finance-row > span,
  .finance-row > strong,
  .sales-order-table-row > span,
  .sales-order-table-row > strong {
    padding: 9px 0;
  }

  .finished-row > span::before,
  .order-archive-row > span::before,
  .finance-row > span::before,
  .finance-row > strong::before,
  .sales-order-table-row > [data-label]::before {
    margin-bottom: 4px;
    font-size: 12px;
    letter-spacing: 0.02em;
  }

  .status,
  .sales-order-statuses label,
  .status-checks label,
  .checkbox-line {
    min-height: 36px;
    padding: 6px 8px;
    border-radius: 8px;
    font-size: 14px;
  }

  .sales-order-statuses,
  .status-checks {
    gap: 8px;
  }

  input[type="checkbox"] {
    width: 22px;
    height: 22px;
  }

  .row-actions,
  .order-card-actions,
  .production-actions,
  .reservation-actions,
  .finance-actions,
  .product-actions {
    gap: 9px;
  }

  .form-actions {
    padding: 12px 14px calc(12px + env(safe-area-inset-bottom));
  }

  .production-save-button {
    min-height: 52px;
    font-size: 16px;
  }

  .calendar-slot {
    min-height: 54px;
  }

  .calendar-order-block,
  .calendar-reservation-block,
  .calendar-break-block {
    font-size: 13px;
    line-height: 1.22;
  }

  .settings-tabs,
  .sip-section-tabs,
  .finance-section-tabs {
    gap: 8px;
  }

  .online-database-status span {
    font-size: 13px;
  }

  .online-database-status strong {
    font-size: 15px;
  }
}

/* Mobilni raspored aplikacije - kartice umjesto stisnutih desktop tablica. */
@media (max-width: 820px) {
  html,
  body {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
    -webkit-text-size-adjust: 100%;
  }

  body {
    background: #eef2eb;
    font-size: 17px;
    line-height: 1.45;
  }

  .app-shell {
    display: block;
    width: 100%;
    max-width: 100%;
  }

  .main-content,
  .workspace,
  .view,
  .panel-grid,
  .panel,
  .entry-form,
  .settings-form,
  .compact-list,
  .production-list,
  .order-grid,
  .reservation-list,
  .finance-list,
  .order-archive-list,
  .sales-order-table {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    overflow-x: visible;
  }

  .workspace {
    padding: 10px;
  }

  .sidebar {
    position: sticky;
    top: 0;
    z-index: 70;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    height: auto;
    max-height: none;
    gap: 9px;
    padding: 10px;
    overflow: hidden;
    border-bottom: 1px solid rgba(255, 255, 255, 0.14);
    box-shadow: 0 10px 24px rgba(22, 35, 27, 0.22);
  }

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

  .sidebar .brand p,
  .sidebar .brand-logos,
  .sidebar-footer {
    display: none;
  }

  .brand-mark {
    width: 38px;
    height: 38px;
  }

  .brand h1 {
    font-size: 19px;
    line-height: 1.1;
  }

  .sidebar .shop-link {
    width: auto;
    min-height: 44px;
    padding: 0 12px;
    border-radius: 10px;
    font-size: 15px;
    font-weight: 900;
  }

  .sidebar .nav {
    grid-column: 1 / -1;
    display: flex;
    gap: 8px;
    width: 100%;
    margin: 0;
    padding: 0 0 4px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
  }

  .sidebar .nav-item {
    flex: 0 0 auto;
    min-width: auto;
    min-height: 46px;
    padding: 0 15px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 999px;
    white-space: nowrap;
    font-size: 15px;
    font-weight: 900;
  }

  .topbar {
    position: static;
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
    margin: 0 0 12px;
    padding: 14px;
    border: 1px solid #dbe2d6;
    border-radius: 12px;
    background: #ffffff;
    box-shadow: 0 6px 16px rgba(31, 45, 37, 0.08);
  }

  .topbar h2 {
    font-size: 25px;
    line-height: 1.12;
  }

  .auth-box {
    display: grid;
    grid-template-columns: 1fr;
    width: 100%;
    min-width: 0;
    gap: 7px;
  }

  .auth-box span,
  #authUserLabel,
  #appStatusLabel {
    max-width: 100%;
    overflow: visible;
    white-space: normal;
    text-align: left;
    font-size: 12px;
    line-height: 1.35;
  }

  .panel-grid,
  .split-layout,
  .documents-grid,
  .calculations-grid,
  .metrics-grid,
  .orders-today-layout {
    display: grid;
    grid-template-columns: 1fr !important;
    gap: 14px;
  }

  .panel,
  .entry-form,
  .metric {
    padding: 15px;
    border: 1px solid #dbe2d6;
    border-radius: 12px;
    background: #ffffff;
    box-shadow: 0 6px 16px rgba(31, 45, 37, 0.07);
  }

  .panel-header {
    display: grid;
    grid-template-columns: 1fr;
    align-items: stretch;
    gap: 10px;
  }

  .panel-header h3,
  .entry-form h3 {
    font-size: 21px;
    line-height: 1.18;
  }

  .panel-actions,
  .filter-actions,
  .form-actions,
  .row-actions,
  .order-card-actions,
  .production-actions,
  .reservation-actions,
  .finance-actions,
  .processing-actions,
  .product-actions {
    display: grid !important;
    grid-template-columns: 1fr !important;
    width: 100%;
    max-width: 100%;
    gap: 9px;
  }

  .panel-actions > *,
  .filter-actions > *,
  .form-actions > *,
  .row-actions > *,
  .order-card-actions > *,
  .production-actions > *,
  .reservation-actions > *,
  .finance-actions > *,
  .processing-actions > *,
  .product-actions > * {
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }

  .panel-actions label,
  .filter-actions label,
  .entry-form label,
  .settings-form label,
  .document-form label {
    display: grid;
    gap: 6px;
    color: #344238;
    font-size: 14px;
    font-weight: 900;
  }

  input,
  select,
  textarea {
    width: 100%;
    max-width: 100%;
    min-height: 52px;
    padding: 12px;
    border-radius: 10px;
    font-size: 17px;
  }

  textarea {
    min-height: 110px;
  }

  button,
  .ghost-button,
  .danger-button,
  .primary-button,
  .settings-tab,
  .compact-command {
    min-height: 50px;
    padding: 11px 14px;
    border-radius: 10px;
    font-size: 16px;
    font-weight: 900;
  }

  .settings-form fieldset,
  .calculation-form fieldset,
  .sales-order-form fieldset,
  .status-checks {
    display: grid;
    grid-template-columns: 1fr !important;
    width: 100%;
    max-width: 100%;
    gap: 11px;
    margin: 0;
    padding: 13px;
    border-radius: 12px;
  }

  .status-checks,
  .sales-order-statuses {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 8px;
    align-items: stretch;
  }

  .checkbox-line,
  .sales-order-statuses label,
  .status-checks label {
    display: flex !important;
    align-items: center;
    gap: 10px;
    min-height: 46px;
    padding: 9px 10px;
    border: 1px solid #dbe5d8;
    border-radius: 10px;
    background: #f8fbf6;
    font-size: 15px;
    font-weight: 900;
  }

  input[type="checkbox"] {
    flex: 0 0 auto;
    width: 24px !important;
    height: 24px !important;
    min-height: 24px !important;
  }

  .compact-item,
  .order-card,
  .production-card,
  .reservation-card,
  .finance-row,
  .finished-row,
  .order-archive-row,
  .sales-order-table-row {
    width: 100%;
    max-width: 100%;
    min-width: 0 !important;
    padding: 15px;
    border: 2px solid #d7d0c0;
    border-radius: 12px;
    background: #ffffff;
    box-shadow: 0 7px 18px rgba(31, 45, 37, 0.08);
    font-size: 16px;
  }

  .compact-item strong,
  .order-card strong,
  .production-card strong,
  .reservation-card strong,
  .finance-row strong,
  .finished-row strong,
  .order-archive-row strong,
  .sales-order-table-row strong {
    font-size: 18px;
    line-height: 1.2;
  }

  .compact-item span,
  .order-card span,
  .production-card span,
  .reservation-card span,
  .finance-row span,
  .finished-row span,
  .order-archive-row span,
  .sales-order-table-row span,
  .sales-order-table-row small {
    font-size: 15px;
    line-height: 1.42;
  }

  .sales-order-table {
    gap: 12px;
  }

  .sales-order-table-head {
    display: none !important;
  }

  .sales-order-table-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "customer"
      "number"
      "date"
      "items"
      "total"
      "points"
      "status"
      "actions";
    gap: 8px;
    align-items: stretch;
  }

  .sales-order-table-row > [data-label="Broj"] { grid-area: number; }
  .sales-order-table-row > [data-label="Datum"] { grid-area: date; }
  .sales-order-table-row > [data-label="Stranka"] { grid-area: customer; }
  .sales-order-table-row > [data-label="Stavke"] { grid-area: items; }
  .sales-order-table-row > [data-label="Ukupno"] { grid-area: total; }
  .sales-order-table-row > [data-label="Bodovi"] { grid-area: points; }
  .sales-order-table-row > [data-label="Status"] { grid-area: status; }
  .sales-order-table-row > [data-label="Akcije"] { grid-area: actions; }

  .sales-order-table-row > span,
  .sales-order-table-row > strong,
  .finance-row > span,
  .finance-row > strong,
  .finished-row > span,
  .order-archive-row > span {
    display: block;
    min-width: 0;
    padding: 9px 0;
    border-bottom: 1px solid #edf0ea;
    overflow-wrap: anywhere;
  }

  .sales-order-table-row > span:last-child,
  .sales-order-table-row > strong:last-child,
  .finance-row > span:last-child,
  .finance-row > strong:last-child,
  .finished-row > span:last-child,
  .order-archive-row > span:last-child {
    border-bottom: 0;
  }

  .sales-order-table-row > [data-label]::before {
    content: attr(data-label);
    display: block;
    margin-bottom: 5px;
    color: #66736a;
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 0.02em;
    text-transform: uppercase;
  }

  .finance-row > span::before,
  .finance-row > strong::before,
  .finished-row > span::before,
  .order-archive-row > span::before {
    display: block;
    margin-bottom: 5px;
    color: #66736a;
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 0.02em;
    text-transform: uppercase;
  }

  .sales-order-table-row > [data-label="Stranka"] b {
    display: block;
    color: #19251d;
    font-size: 20px;
    line-height: 1.18;
  }

  .sales-order-table-row > [data-label="Ukupno"] b {
    display: block;
    color: #1f4d36;
    font-size: 20px;
  }

  .sales-order-items-cell {
    color: #334039;
    font-weight: 800;
  }

  .sales-order-table-row .row-actions {
    grid-template-columns: 1fr 1fr !important;
  }

  .sales-order-table-row .row-actions .danger-button {
    grid-column: 1 / -1;
  }

  .sales-order-archive-toggle,
  .sales-order-archive-toggle button {
    width: 100%;
  }

  .sales-order-archive-title {
    padding: 12px 4px 6px;
    font-size: 14px;
  }

  .sales-draft-list,
  .sales-item-row,
  .calculation-box {
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }

  .sales-item-row {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .sales-order-form {
    gap: 14px;
  }

  .production-card-head,
  .production-card .package-actual-list,
  .production-card .package-actual,
  .billing-line,
  .production-total,
  .package-option,
  .group-stock-row,
  .calculation-mix-row,
  .recipe-slider-row,
  .mix-option-item {
    grid-template-columns: 1fr !important;
  }

  .table-wrap,
  .stock-summary-table,
  .statistics-table-wrap,
  .calculation-comparison-table {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .form-actions {
    position: sticky;
    bottom: 0;
    z-index: 25;
    margin: 8px -15px -15px;
    padding: 12px 15px calc(12px + env(safe-area-inset-bottom));
    border-top: 1px solid #dbe2d6;
    background: rgba(255, 255, 255, 0.97);
    box-shadow: 0 -8px 22px rgba(31, 45, 37, 0.1);
    backdrop-filter: blur(8px);
  }
}

/* Android/PWA prisilni mobilni rezim. Koristi se kad Chrome prijavi presirok viewport. */
html.mobile-app-layout,
html.mobile-app-layout body {
  width: 100% !important;
  max-width: 100% !important;
  overflow-x: hidden !important;
}

html.mobile-app-layout body {
  background: #eef2eb;
  font-size: 17px;
  line-height: 1.45;
}

html.mobile-app-layout .app-shell,
html.mobile-app-layout .main-content,
html.mobile-app-layout .workspace {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  overflow-x: hidden !important;
}

html.mobile-app-layout .view {
  display: none !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  overflow-x: hidden !important;
}

html.mobile-app-layout .view.active {
  display: block !important;
}

html.mobile-app-layout .workspace {
  padding: 10px !important;
}

html.mobile-app-layout .sidebar {
  position: sticky !important;
  top: 0 !important;
  z-index: 70 !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  gap: 9px !important;
  padding: 10px !important;
  overflow: hidden !important;
  box-shadow: 0 10px 24px rgba(22, 35, 27, 0.22);
}

html.mobile-app-layout .brand {
  min-width: 0 !important;
}

html.mobile-app-layout .brand-mark {
  width: 38px !important;
  height: 38px !important;
}

html.mobile-app-layout .brand h1 {
  font-size: 19px !important;
  line-height: 1.1 !important;
}

html.mobile-app-layout .brand p,
html.mobile-app-layout .brand-logos,
html.mobile-app-layout .sidebar-footer {
  display: none !important;
}

html.mobile-app-layout .shop-link {
  width: auto !important;
  min-height: 44px !important;
  padding: 0 12px !important;
  border-radius: 10px !important;
  font-size: 15px !important;
  font-weight: 900 !important;
}

html.mobile-app-layout .nav {
  grid-column: 1 / -1 !important;
  display: flex !important;
  gap: 8px !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 0 4px !important;
  overflow-x: auto !important;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
}

html.mobile-app-layout .nav-item {
  flex: 0 0 auto !important;
  min-width: auto !important;
  min-height: 46px !important;
  padding: 0 15px !important;
  border-radius: 999px !important;
  white-space: nowrap !important;
  font-size: 15px !important;
  font-weight: 900 !important;
}

html.mobile-app-layout .topbar {
  position: static !important;
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 12px !important;
  width: 100% !important;
  margin: 0 0 12px !important;
  padding: 14px !important;
  border: 1px solid #dbe2d6 !important;
  border-radius: 12px !important;
  background: #ffffff !important;
}

html.mobile-app-layout .topbar h2 {
  font-size: 25px !important;
  line-height: 1.12 !important;
}

html.mobile-app-layout .auth-box {
  display: grid !important;
  grid-template-columns: 1fr !important;
  width: 100% !important;
  min-width: 0 !important;
  gap: 7px !important;
}

html.mobile-app-layout .auth-box span,
html.mobile-app-layout #authUserLabel,
html.mobile-app-layout #appStatusLabel {
  overflow: visible !important;
  white-space: normal !important;
  text-align: left !important;
  font-size: 12px !important;
  line-height: 1.35 !important;
}

html.mobile-app-layout .panel-grid,
html.mobile-app-layout .split-layout,
html.mobile-app-layout .documents-grid,
html.mobile-app-layout .calculations-grid,
html.mobile-app-layout .metrics-grid,
html.mobile-app-layout .orders-today-layout {
  display: grid !important;
  grid-template-columns: 1fr !important;
  width: 100% !important;
  gap: 14px !important;
}

html.mobile-app-layout .panel,
html.mobile-app-layout .entry-form,
html.mobile-app-layout .metric {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  padding: 15px !important;
  border-radius: 12px !important;
  background: #ffffff !important;
}

html.mobile-app-layout .panel-header,
html.mobile-app-layout .panel-actions,
html.mobile-app-layout .filter-actions,
html.mobile-app-layout .form-actions,
html.mobile-app-layout .row-actions,
html.mobile-app-layout .order-card-actions,
html.mobile-app-layout .production-actions,
html.mobile-app-layout .reservation-actions,
html.mobile-app-layout .finance-actions,
html.mobile-app-layout .processing-actions,
html.mobile-app-layout .product-actions {
  display: grid !important;
  grid-template-columns: 1fr !important;
  width: 100% !important;
  max-width: 100% !important;
  gap: 9px !important;
}

html.mobile-app-layout input,
html.mobile-app-layout select,
html.mobile-app-layout textarea,
html.mobile-app-layout button {
  max-width: 100% !important;
  font-size: 17px !important;
}

html.mobile-app-layout input,
html.mobile-app-layout select,
html.mobile-app-layout textarea {
  width: 100% !important;
  min-height: 52px !important;
  padding: 12px !important;
  border-radius: 10px !important;
}

html.mobile-app-layout button,
html.mobile-app-layout .ghost-button,
html.mobile-app-layout .danger-button,
html.mobile-app-layout .primary-button,
html.mobile-app-layout .settings-tab {
  min-height: 50px !important;
  padding: 11px 14px !important;
  border-radius: 10px !important;
  font-weight: 900 !important;
}

html.mobile-app-layout .settings-form fieldset,
html.mobile-app-layout .calculation-form fieldset,
html.mobile-app-layout .sales-order-form fieldset,
html.mobile-app-layout .status-checks {
  display: grid !important;
  grid-template-columns: 1fr !important;
  width: 100% !important;
  max-width: 100% !important;
  gap: 11px !important;
  padding: 13px !important;
  border-radius: 12px !important;
}

html.mobile-app-layout .compact-item,
html.mobile-app-layout .order-card,
html.mobile-app-layout .production-card,
html.mobile-app-layout .reservation-card,
html.mobile-app-layout .finance-row,
html.mobile-app-layout .finished-row,
html.mobile-app-layout .order-archive-row,
html.mobile-app-layout .sales-order-table-row {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  padding: 15px !important;
  border: 2px solid #d7d0c0 !important;
  border-radius: 12px !important;
  background: #ffffff !important;
  box-shadow: 0 7px 18px rgba(31, 45, 37, 0.08) !important;
  font-size: 16px !important;
}

html.mobile-app-layout .sales-order-table {
  display: grid !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  gap: 12px !important;
}

html.mobile-app-layout .sales-order-table-head {
  display: none !important;
}

html.mobile-app-layout .sales-order-table-row {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  grid-template-areas:
    "customer"
    "number"
    "date"
    "items"
    "total"
    "points"
    "status"
    "actions" !important;
  gap: 8px !important;
  align-items: stretch !important;
}

html.mobile-app-layout .sales-order-table-row > [data-label="Broj"] { grid-area: number !important; }
html.mobile-app-layout .sales-order-table-row > [data-label="Datum"] { grid-area: date !important; }
html.mobile-app-layout .sales-order-table-row > [data-label="Stranka"] { grid-area: customer !important; }
html.mobile-app-layout .sales-order-table-row > [data-label="Stavke"] { grid-area: items !important; }
html.mobile-app-layout .sales-order-table-row > [data-label="Ukupno"] { grid-area: total !important; }
html.mobile-app-layout .sales-order-table-row > [data-label="Bodovi"] { grid-area: points !important; }
html.mobile-app-layout .sales-order-table-row > [data-label="Status"] { grid-area: status !important; }
html.mobile-app-layout .sales-order-table-row > [data-label="Akcije"] { grid-area: actions !important; }

html.mobile-app-layout .sales-order-table-row > span,
html.mobile-app-layout .sales-order-table-row > strong {
  display: block !important;
  min-width: 0 !important;
  padding: 9px 0 !important;
  border-bottom: 1px solid #edf0ea !important;
  overflow-wrap: anywhere !important;
  font-size: 15px !important;
  line-height: 1.42 !important;
}

html.mobile-app-layout .sales-order-table-row > [data-label]::before {
  content: attr(data-label) !important;
  display: block !important;
  margin-bottom: 5px !important;
  color: #66736a !important;
  font-size: 12px !important;
  font-weight: 900 !important;
  text-transform: uppercase !important;
}

html.mobile-app-layout .sales-order-table-row > [data-label="Stranka"] b,
html.mobile-app-layout .sales-order-table-row > [data-label="Ukupno"] b {
  display: block !important;
  font-size: 20px !important;
  line-height: 1.18 !important;
}

html.mobile-app-layout .sales-order-statuses,
html.mobile-app-layout .status-checks {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 8px !important;
}

html.mobile-app-layout .sales-order-statuses label,
html.mobile-app-layout .status-checks label,
html.mobile-app-layout .checkbox-line {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  min-height: 46px !important;
  padding: 9px 10px !important;
  border: 1px solid #dbe5d8 !important;
  border-radius: 10px !important;
  background: #f8fbf6 !important;
  font-size: 15px !important;
  font-weight: 900 !important;
}

html.mobile-app-layout input[type="checkbox"] {
  flex: 0 0 auto !important;
  width: 24px !important;
  height: 24px !important;
  min-height: 24px !important;
}

html.mobile-app-layout .sales-order-table-row .row-actions {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
}

html.mobile-app-layout .sales-order-table-row .row-actions .danger-button {
  grid-column: 1 / -1 !important;
}

html.mobile-app-layout .sales-order-archive-toggle,
html.mobile-app-layout .sales-order-archive-toggle button {
  width: 100% !important;
}

html.mobile-app-layout .production-card-head,
html.mobile-app-layout .production-card .package-actual-list,
html.mobile-app-layout .production-card .package-actual,
html.mobile-app-layout .billing-line,
html.mobile-app-layout .production-total,
html.mobile-app-layout .package-option,
html.mobile-app-layout .group-stock-row,
html.mobile-app-layout .calculation-mix-row,
html.mobile-app-layout .recipe-slider-row,
html.mobile-app-layout .mix-option-item {
  grid-template-columns: 1fr !important;
}

html.mobile-app-layout .form-actions {
  position: sticky !important;
  bottom: 0 !important;
  z-index: 25 !important;
  margin: 8px -15px -15px !important;
  padding: 12px 15px calc(12px + env(safe-area-inset-bottom)) !important;
  border-top: 1px solid #dbe2d6 !important;
  background: rgba(255, 255, 255, 0.97) !important;
  box-shadow: 0 -8px 22px rgba(31, 45, 37, 0.1) !important;
}

/* v116: dodatno citanje na mobitelu/PWA. */
html.mobile-app-layout .topbar {
  gap: 8px !important;
  padding: 12px !important;
}

html.mobile-app-layout #appStatusLabel {
  display: none !important;
}

html.mobile-app-layout .cloud-safety-badge,
html.mobile-app-layout .points-wallet,
html.mobile-app-layout #logoutButton {
  min-height: 42px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 14px !important;
}

html.mobile-app-layout .sales-order-table-row.sales-order-table-head {
  display: none !important;
}

html.mobile-app-layout .sales-order-table-row .row-actions {
  grid-template-columns: 1fr !important;
}

html.mobile-app-layout .sales-order-table-row .row-actions .danger-button {
  grid-column: auto !important;
}

html.mobile-app-layout .stock-summary-table,
html.mobile-app-layout .table-wrap,
html.mobile-app-layout .statistics-table-wrap {
  width: 100% !important;
  max-width: 100% !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  -webkit-overflow-scrolling: touch;
}

html.mobile-app-layout .stock-summary-table table {
  min-width: 720px !important;
}

html.mobile-app-layout #pricebook .table-wrap {
  overflow: visible !important;
}

html.mobile-app-layout #pricebook table,
html.mobile-app-layout #pricebook thead,
html.mobile-app-layout #pricebook tbody,
html.mobile-app-layout #pricebook tr,
html.mobile-app-layout #pricebook td {
  display: block !important;
  width: 100% !important;
  min-width: 0 !important;
}

html.mobile-app-layout #pricebook thead {
  display: none !important;
}

html.mobile-app-layout #priceRows {
  display: grid !important;
  gap: 12px !important;
}

html.mobile-app-layout #priceRows tr {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 8px !important;
  padding: 14px !important;
  border: 2px solid #d7d0c0 !important;
  border-radius: 12px !important;
  background: #ffffff !important;
  box-shadow: 0 7px 18px rgba(31, 45, 37, 0.08) !important;
}

html.mobile-app-layout #priceRows td {
  display: grid !important;
  grid-template-columns: 112px minmax(0, 1fr) !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 8px 0 !important;
  border: 0 !important;
  border-bottom: 1px solid #edf0ea !important;
}

html.mobile-app-layout #priceRows td::before {
  content: attr(data-label) !important;
  color: #66736a !important;
  font-size: 12px !important;
  font-weight: 900 !important;
  text-transform: uppercase !important;
}

html.mobile-app-layout #priceRows td[data-label="Akcija"] {
  grid-template-columns: 1fr !important;
  border-bottom: 0 !important;
}

html.mobile-app-layout #priceRows td[data-label="Akcija"]::before {
  margin-bottom: 6px !important;
}

html.mobile-app-layout #priceRows .row-actions {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 8px !important;
}

html.mobile-app-layout #priceRows .table-input,
html.mobile-app-layout #priceRows .small-input,
html.mobile-app-layout #priceRows .wide-input,
html.mobile-app-layout #priceRows select {
  width: 100% !important;
  min-height: 46px !important;
}

html.mobile-app-layout #priceRows .active-input {
  width: 24px !important;
  height: 24px !important;
  min-height: 24px !important;
}

/* v117: pravi mobilni app shell. Desktop ostaje nepromijenjen. */
.mobile-bottom-nav,
.mobile-menu-sheet {
  display: none;
}

html.mobile-app-layout body {
  background: #f2f5ef !important;
}

html.mobile-app-layout .app-shell {
  padding-top: 72px !important;
  padding-bottom: calc(84px + env(safe-area-inset-bottom)) !important;
}

html.mobile-app-layout .sidebar {
  position: fixed !important;
  inset: 0 0 auto 0 !important;
  z-index: 90 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  height: 64px !important;
  min-height: 64px !important;
  padding: calc(8px + env(safe-area-inset-top)) 12px 8px !important;
  border-radius: 0 !important;
  background: #1e3729 !important;
  box-shadow: 0 8px 22px rgba(18, 32, 24, 0.22) !important;
}

html.mobile-app-layout .sidebar-pin,
html.mobile-app-layout .sidebar .nav,
html.mobile-app-layout .sidebar .brand-logos {
  display: none !important;
}

html.mobile-app-layout .brand {
  display: flex !important;
  align-items: center !important;
  gap: 9px !important;
}

html.mobile-app-layout .brand-mark {
  width: 38px !important;
  height: 38px !important;
  border-radius: 9px !important;
  background: #ffffff !important;
}

html.mobile-app-layout .brand h1 {
  color: #ffffff !important;
  font-size: 17px !important;
  line-height: 1.05 !important;
}

html.mobile-app-layout .brand p {
  display: block !important;
  margin-top: 2px !important;
  color: rgba(255, 255, 255, 0.75) !important;
  font-size: 11px !important;
  line-height: 1.15 !important;
}

html.mobile-app-layout .shop-link {
  flex: 0 0 auto !important;
  width: auto !important;
  min-height: 38px !important;
  max-width: 132px !important;
  padding: 0 10px !important;
  border-color: rgba(255, 255, 255, 0.18) !important;
  background: rgba(255, 255, 255, 0.08) !important;
  color: #ffffff !important;
  font-size: 12px !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

html.mobile-app-layout .workspace {
  padding: 10px 10px 18px !important;
}

html.mobile-app-layout .topbar {
  margin: 0 0 10px !important;
  padding: 12px !important;
  border: 0 !important;
  border-radius: 16px !important;
  box-shadow: 0 10px 26px rgba(31, 45, 37, 0.08) !important;
}

html.mobile-app-layout .topbar .eyebrow,
html.mobile-app-layout #authUserLabel,
html.mobile-app-layout #appStatusLabel {
  display: none !important;
}

html.mobile-app-layout .topbar h2 {
  margin: 0 !important;
  font-size: 28px !important;
  line-height: 1.04 !important;
}

html.mobile-app-layout .auth-box {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 8px !important;
}

html.mobile-app-layout .cloud-safety-badge,
html.mobile-app-layout .points-wallet-label {
  min-height: 42px !important;
  padding: 8px 10px !important;
  border-radius: 12px !important;
  font-size: 13px !important;
  font-weight: 900 !important;
  text-align: center !important;
}

html.mobile-app-layout #logoutButton,
html.mobile-app-layout #loadPendingCloudChanges {
  grid-column: 1 / -1 !important;
}

html.mobile-app-layout .mobile-bottom-nav {
  position: fixed !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  z-index: 100 !important;
  display: grid !important;
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  gap: 5px !important;
  padding: 8px 8px calc(8px + env(safe-area-inset-bottom)) !important;
  border-top: 1px solid rgba(34, 58, 43, 0.14) !important;
  background: rgba(255, 255, 255, 0.96) !important;
  box-shadow: 0 -10px 26px rgba(20, 33, 25, 0.16) !important;
  backdrop-filter: blur(12px);
}

html.mobile-app-layout .mobile-nav-item {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 0 !important;
  min-height: 54px !important;
  padding: 6px 4px !important;
  border: 1px solid transparent !important;
  border-radius: 15px !important;
  background: transparent !important;
  color: #314438 !important;
  font-size: 12px !important;
  font-weight: 900 !important;
  line-height: 1.1 !important;
  text-align: center !important;
}

html.mobile-app-layout .mobile-nav-item.active,
html.mobile-app-layout .mobile-more-button.active {
  border-color: #b9d8bf !important;
  background: #e6f3e8 !important;
  color: #1f6d3d !important;
}

html.mobile-app-layout .mobile-more-button {
  display: flex !important;
}

html.mobile-app-layout .mobile-menu-sheet {
  position: fixed !important;
  inset: 0 !important;
  z-index: 120 !important;
  display: none !important;
}

html.mobile-app-layout .mobile-menu-sheet.open {
  display: block !important;
}

html.mobile-app-layout .mobile-menu-backdrop {
  position: absolute !important;
  inset: 0 !important;
  min-height: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: rgba(18, 31, 23, 0.46) !important;
}

html.mobile-app-layout .mobile-menu-panel {
  position: absolute !important;
  left: 10px !important;
  right: 10px !important;
  bottom: calc(82px + env(safe-area-inset-bottom)) !important;
  display: grid !important;
  gap: 12px !important;
  max-height: calc(100vh - 112px) !important;
  padding: 14px !important;
  overflow: auto !important;
  border-radius: 20px !important;
  background: #ffffff !important;
  box-shadow: 0 24px 70px rgba(11, 24, 16, 0.34) !important;
}

html.mobile-app-layout .mobile-menu-head {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 10px !important;
}

html.mobile-app-layout .mobile-menu-head strong {
  font-size: 19px !important;
}

html.mobile-app-layout .mobile-menu-grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 9px !important;
}

html.mobile-app-layout .mobile-menu-item,
html.mobile-app-layout .mobile-shop-link {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 54px !important;
  padding: 10px !important;
  border: 1px solid #dbe7d8 !important;
  border-radius: 14px !important;
  background: #f7faf5 !important;
  color: #244431 !important;
  font-size: 15px !important;
  font-weight: 900 !important;
  text-decoration: none !important;
  text-align: center !important;
}

html.mobile-app-layout .mobile-menu-item.active {
  border-color: #8fca9b !important;
  background: #e4f3e7 !important;
  color: #1f6d3d !important;
}

html.mobile-app-layout .mobile-shop-link {
  background: #2d7b4d !important;
  color: #ffffff !important;
}

html.mobile-app-layout #sales-orders .panel {
  padding: 12px !important;
}

html.mobile-app-layout #salesOrderRows {
  display: grid !important;
  gap: 12px !important;
}

html.mobile-app-layout .sales-order-mobile-card {
  display: grid !important;
  gap: 12px !important;
  width: 100% !important;
  padding: 15px !important;
  border: 2px solid #d7d0c0 !important;
  border-radius: 18px !important;
  background: #ffffff !important;
  box-shadow: 0 10px 24px rgba(31, 45, 37, 0.08) !important;
}

html.mobile-app-layout .sales-order-mobile-card.is-paid {
  background: #f8fbf5 !important;
  opacity: 0.92;
}

html.mobile-app-layout .sales-order-mobile-head {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  gap: 10px !important;
  align-items: start !important;
}

html.mobile-app-layout .sales-order-mobile-head span {
  display: block !important;
  color: #6b776d !important;
  font-size: 12px !important;
  font-weight: 900 !important;
  text-transform: uppercase !important;
}

html.mobile-app-layout .sales-order-mobile-head strong {
  display: block !important;
  margin-top: 2px !important;
  color: #17241d !important;
  font-size: 22px !important;
  line-height: 1.08 !important;
}

html.mobile-app-layout .sales-order-mobile-head small {
  display: block !important;
  margin-top: 5px !important;
  color: #5d6d61 !important;
  font-size: 14px !important;
}

html.mobile-app-layout .sales-order-mobile-head b {
  min-width: 86px !important;
  padding: 9px 10px !important;
  border-radius: 14px !important;
  background: #eaf5eb !important;
  color: #1f6d3d !important;
  font-size: 18px !important;
  text-align: center !important;
}

html.mobile-app-layout .sales-order-mobile-facts {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 8px !important;
}

html.mobile-app-layout .sales-order-mobile-facts span {
  min-height: 38px !important;
  padding: 9px !important;
  border-radius: 12px !important;
  background: #f2f6ef !important;
  color: #34493b !important;
  font-size: 14px !important;
  font-weight: 900 !important;
  text-align: center !important;
}

html.mobile-app-layout .sales-order-mobile-items {
  display: -webkit-box !important;
  margin: 0 !important;
  max-height: 72px !important;
  overflow: hidden !important;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  color: #27372d !important;
  font-size: 15px !important;
  line-height: 1.45 !important;
}

html.mobile-app-layout .sales-order-mobile-items small {
  display: block !important;
  margin-top: 5px !important;
  color: #68756b !important;
}

html.mobile-app-layout .panel-header h3,
html.mobile-app-layout .entry-form h3,
html.mobile-app-layout .entry-form h4 {
  font-size: 22px !important;
  line-height: 1.12 !important;
}

html.mobile-app-layout .entry-form label,
html.mobile-app-layout .settings-form label,
html.mobile-app-layout .calculation-form label,
html.mobile-app-layout .sales-order-form label {
  display: grid !important;
  gap: 6px !important;
  color: #5d6d61 !important;
  font-size: 13px !important;
  font-weight: 900 !important;
}

html.mobile-app-layout .entry-form label input,
html.mobile-app-layout .entry-form label select,
html.mobile-app-layout .entry-form label textarea,
html.mobile-app-layout .settings-form label input,
html.mobile-app-layout .settings-form label select,
html.mobile-app-layout .settings-form label textarea,
html.mobile-app-layout .calculation-form label input,
html.mobile-app-layout .calculation-form label select,
html.mobile-app-layout .calculation-form label textarea,
html.mobile-app-layout .sales-order-form label input,
html.mobile-app-layout .sales-order-form label select,
html.mobile-app-layout .sales-order-form label textarea {
  color: #17241d !important;
  font-size: 18px !important;
  font-weight: 800 !important;
}

html.mobile-app-layout .form-grid,
html.mobile-app-layout .compact-form-grid,
html.mobile-app-layout .production-form-grid,
html.mobile-app-layout .employee-form-grid,
html.mobile-app-layout .finance-form-grid,
html.mobile-app-layout .sales-order-form-grid,
html.mobile-app-layout .sip-product-form-grid {
  display: grid !important;
  grid-template-columns: 1fr !important;
  width: 100% !important;
  max-width: 100% !important;
  gap: 12px !important;
}

html.mobile-app-layout .order-card,
html.mobile-app-layout .production-card,
html.mobile-app-layout .reservation-card,
html.mobile-app-layout .finance-row,
html.mobile-app-layout .finished-row,
html.mobile-app-layout .compact-item {
  border-radius: 18px !important;
}

html.mobile-app-layout .order-card strong,
html.mobile-app-layout .production-card strong,
html.mobile-app-layout .reservation-card strong,
html.mobile-app-layout .compact-item strong {
  font-size: 20px !important;
  line-height: 1.15 !important;
}

html.mobile-app-layout .order-card span,
html.mobile-app-layout .production-card span,
html.mobile-app-layout .reservation-card span,
html.mobile-app-layout .compact-item span {
  font-size: 15px !important;
  line-height: 1.42 !important;
}

html.mobile-app-layout .status,
html.mobile-app-layout .badge,
html.mobile-app-layout .pill {
  min-height: 32px !important;
  padding: 7px 10px !important;
  border-radius: 999px !important;
  font-size: 13px !important;
  font-weight: 900 !important;
}

html.mobile-app-layout .table-wrap::after,
html.mobile-app-layout .stock-summary-table::after,
html.mobile-app-layout .statistics-table-wrap::after {
  content: "Povuci lijevo/desno za cijelu tablicu";
  display: block;
  padding: 8px 2px 0;
  color: #718077;
  font-size: 12px;
  font-weight: 800;
}

html.mobile-app-layout #pricebook .table-wrap::after,
html.mobile-app-layout #sales-orders .table-wrap::after {
  display: none !important;
}

/* v118: manje praznog prostora, veci citljivi elementi na mobitelu. */
html.mobile-app-layout body {
  font-size: 19px !important;
  line-height: 1.5 !important;
}

html.mobile-app-layout .app-shell {
  padding-top: calc(54px + env(safe-area-inset-top)) !important;
  padding-bottom: calc(78px + env(safe-area-inset-bottom)) !important;
}

html.mobile-app-layout .sidebar {
  height: calc(50px + env(safe-area-inset-top)) !important;
  min-height: calc(50px + env(safe-area-inset-top)) !important;
  padding: calc(6px + env(safe-area-inset-top)) 74px 6px 10px !important;
}

html.mobile-app-layout .brand-mark {
  width: 34px !important;
  height: 34px !important;
}

html.mobile-app-layout .brand h1 {
  font-size: 16px !important;
}

html.mobile-app-layout .brand p,
html.mobile-app-layout .shop-link {
  display: none !important;
}

html.mobile-app-layout .workspace {
  padding: 6px 7px 14px !important;
}

html.mobile-app-layout .topbar {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 7px !important;
  margin: 0 0 8px !important;
  padding: 9px 10px !important;
  border-radius: 14px !important;
}

html.mobile-app-layout .topbar h2 {
  font-size: 31px !important;
  line-height: 1 !important;
}

html.mobile-app-layout .auth-box {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 6px !important;
}

html.mobile-app-layout .points-wallet-label {
  display: none !important;
}

html.mobile-app-layout .cloud-safety-badge {
  flex: 1 1 auto !important;
  min-height: 34px !important;
  padding: 6px 9px !important;
  border-radius: 10px !important;
  font-size: 13px !important;
  text-align: left !important;
}

html.mobile-app-layout #loadPendingCloudChanges {
  flex: 1 1 100% !important;
  min-height: 38px !important;
  padding: 7px 10px !important;
  font-size: 14px !important;
}

html.mobile-app-layout #logoutButton {
  position: fixed !important;
  top: calc(7px + env(safe-area-inset-top)) !important;
  right: 8px !important;
  z-index: 110 !important;
  width: 60px !important;
  min-height: 36px !important;
  padding: 6px 8px !important;
  border-color: rgba(255, 255, 255, 0.28) !important;
  background: rgba(255, 255, 255, 0.12) !important;
  color: #ffffff !important;
  font-size: 13px !important;
}

html.mobile-app-layout .panel,
html.mobile-app-layout .entry-form,
html.mobile-app-layout .metric {
  padding: 11px !important;
  border-radius: 16px !important;
}

html.mobile-app-layout .panel-grid,
html.mobile-app-layout .split-layout,
html.mobile-app-layout .documents-grid,
html.mobile-app-layout .calculations-grid,
html.mobile-app-layout .metrics-grid,
html.mobile-app-layout .orders-today-layout {
  gap: 9px !important;
}

html.mobile-app-layout .panel-header {
  gap: 7px !important;
  margin-bottom: 8px !important;
}

html.mobile-app-layout .panel-header h3,
html.mobile-app-layout .entry-form h3,
html.mobile-app-layout .entry-form h4 {
  font-size: 24px !important;
}

html.mobile-app-layout label,
html.mobile-app-layout .entry-form label,
html.mobile-app-layout .settings-form label,
html.mobile-app-layout .calculation-form label,
html.mobile-app-layout .sales-order-form label {
  font-size: 15px !important;
}

html.mobile-app-layout input,
html.mobile-app-layout select,
html.mobile-app-layout textarea {
  min-height: 56px !important;
  padding: 13px 12px !important;
  font-size: 20px !important;
  border-radius: 13px !important;
}

html.mobile-app-layout button,
html.mobile-app-layout .ghost-button,
html.mobile-app-layout .danger-button,
html.mobile-app-layout .primary-button,
html.mobile-app-layout .settings-tab {
  min-height: 54px !important;
  font-size: 17px !important;
  border-radius: 13px !important;
}

html.mobile-app-layout .mobile-bottom-nav {
  gap: 4px !important;
  padding: 6px 6px calc(6px + env(safe-area-inset-bottom)) !important;
}

html.mobile-app-layout .mobile-nav-item {
  min-height: 58px !important;
  border-radius: 17px !important;
  font-size: 14px !important;
}

html.mobile-app-layout .mobile-menu-panel {
  left: 7px !important;
  right: 7px !important;
  bottom: calc(76px + env(safe-area-inset-bottom)) !important;
  gap: 10px !important;
  padding: 12px !important;
}

html.mobile-app-layout .mobile-menu-grid {
  gap: 8px !important;
}

html.mobile-app-layout .mobile-menu-item,
html.mobile-app-layout .mobile-shop-link {
  min-height: 58px !important;
  font-size: 16px !important;
}

html.mobile-app-layout .sales-order-mobile-card {
  gap: 10px !important;
  padding: 13px !important;
  border-radius: 18px !important;
}

html.mobile-app-layout .sales-order-mobile-head {
  grid-template-columns: minmax(0, 1fr) !important;
}

html.mobile-app-layout .sales-order-mobile-head span {
  font-size: 13px !important;
}

html.mobile-app-layout .sales-order-mobile-head strong {
  font-size: 25px !important;
}

html.mobile-app-layout .sales-order-mobile-head small {
  font-size: 16px !important;
}

html.mobile-app-layout .sales-order-mobile-head b {
  justify-self: start !important;
  min-width: 0 !important;
  padding: 8px 12px !important;
  font-size: 22px !important;
}

html.mobile-app-layout .sales-order-mobile-facts {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}

html.mobile-app-layout .sales-order-mobile-facts span {
  min-height: 42px !important;
  padding: 9px 8px !important;
  font-size: 16px !important;
}

html.mobile-app-layout .sales-order-mobile-items {
  max-height: 92px !important;
  font-size: 18px !important;
  line-height: 1.38 !important;
}

html.mobile-app-layout .sales-order-statuses label,
html.mobile-app-layout .status-checks label,
html.mobile-app-layout .checkbox-line {
  min-height: 54px !important;
  padding: 10px 11px !important;
  border-radius: 14px !important;
  font-size: 17px !important;
}

html.mobile-app-layout input[type="checkbox"] {
  width: 30px !important;
  height: 30px !important;
  min-height: 30px !important;
}

html.mobile-app-layout .status,
html.mobile-app-layout .badge,
html.mobile-app-layout .pill {
  min-height: 36px !important;
  padding: 8px 12px !important;
  font-size: 15px !important;
}

html.mobile-app-layout .row-actions,
html.mobile-app-layout .order-card-actions,
html.mobile-app-layout .production-actions,
html.mobile-app-layout .reservation-actions,
html.mobile-app-layout .finance-actions,
html.mobile-app-layout .processing-actions,
html.mobile-app-layout .product-actions {
  gap: 8px !important;
}

html.mobile-app-layout .order-card,
html.mobile-app-layout .production-card,
html.mobile-app-layout .reservation-card,
html.mobile-app-layout .finance-row,
html.mobile-app-layout .finished-row,
html.mobile-app-layout .compact-item {
  padding: 13px !important;
}

html.mobile-app-layout .order-card strong,
html.mobile-app-layout .production-card strong,
html.mobile-app-layout .reservation-card strong,
html.mobile-app-layout .finance-row strong,
html.mobile-app-layout .finished-row strong,
html.mobile-app-layout .compact-item strong {
  font-size: 23px !important;
}

html.mobile-app-layout .order-card span,
html.mobile-app-layout .production-card span,
html.mobile-app-layout .reservation-card span,
html.mobile-app-layout .finance-row span,
html.mobile-app-layout .finished-row span,
html.mobile-app-layout .compact-item span,
html.mobile-app-layout .order-card small,
html.mobile-app-layout .production-card small,
html.mobile-app-layout .reservation-card small {
  font-size: 17px !important;
}

html.mobile-app-layout .metric span {
  font-size: 15px !important;
}

html.mobile-app-layout .metric strong {
  font-size: 28px !important;
}

html.mobile-app-layout .pricebook-column-picker,
html.mobile-app-layout .pricebook-note-form {
  gap: 8px !important;
  padding: 10px !important;
}

html.mobile-app-layout .pricebook-column-picker label {
  min-height: 44px !important;
  font-size: 15px !important;
}

html.mobile-app-layout #priceRows tr {
  padding: 12px !important;
}

html.mobile-app-layout #priceRows td {
  grid-template-columns: 96px minmax(0, 1fr) !important;
  gap: 8px !important;
}

html.mobile-app-layout #priceRows td::before {
  font-size: 13px !important;
}

/* v119: proizvodnja i radni nalozi kao prave mobilne kartice. */
html.mobile-app-layout *,
html.mobile-app-layout *::before,
html.mobile-app-layout *::after {
  box-sizing: border-box !important;
}

html.mobile-app-layout .app-shell,
html.mobile-app-layout .workspace,
html.mobile-app-layout .view,
html.mobile-app-layout .panel,
html.mobile-app-layout .production-list,
html.mobile-app-layout .order-archive-list,
html.mobile-app-layout .order-grid,
html.mobile-app-layout .orders-calendar-panel,
html.mobile-app-layout .orders-today-panel,
html.mobile-app-layout .orders-older-panel {
  max-width: 100vw !important;
  overflow-x: hidden !important;
}

html.mobile-app-layout .production-filter-empty {
  min-width: 0 !important;
  width: 100% !important;
}

html.mobile-app-layout .finished-row-head,
html.mobile-app-layout .order-archive-head {
  position: static !important;
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 8px !important;
  min-width: 0 !important;
  width: 100% !important;
  padding: 10px !important;
  text-align: left !important;
}

html.mobile-app-layout .finished-row-head .production-column-header,
html.mobile-app-layout .order-archive-head .order-column-header {
  padding: 0 !important;
}

html.mobile-app-layout .finished-row-head .production-action-header,
html.mobile-app-layout .order-archive-head .order-col-actions {
  grid-column: 1 / -1 !important;
}

html.mobile-app-layout .production-sort-button,
html.mobile-app-layout .order-sort-button {
  min-height: 34px !important;
  font-size: 13px !important;
  text-align: left !important;
}

html.mobile-app-layout .finished-row-head input,
html.mobile-app-layout .finished-row-head select,
html.mobile-app-layout .order-archive-head input,
html.mobile-app-layout .order-archive-head select {
  min-height: 46px !important;
  padding: 9px !important;
  font-size: 16px !important;
}

html.mobile-app-layout .finished-row,
html.mobile-app-layout .order-archive-row {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
  gap: 9px !important;
  min-width: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  min-height: 0 !important;
  padding: 13px !important;
  text-align: left !important;
}

html.mobile-app-layout .finished-row:not(.finished-row-head),
html.mobile-app-layout .order-archive-row:not(.order-archive-head) {
  align-items: stretch !important;
}

html.mobile-app-layout .finished-row > span,
html.mobile-app-layout .order-archive-row > span,
html.mobile-app-layout .finished-row > label,
html.mobile-app-layout .order-archive-row > label {
  display: grid !important;
  align-content: start !important;
  gap: 4px !important;
  min-width: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
  color: #26382e !important;
  font-size: 17px !important;
  line-height: 1.3 !important;
  text-overflow: clip !important;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
}

html.mobile-app-layout .finished-row > span::before,
html.mobile-app-layout .order-archive-row > span::before {
  content: attr(data-label);
  color: #6d796f !important;
  font-size: 12px !important;
  font-weight: 900 !important;
  text-transform: uppercase !important;
}

html.mobile-app-layout .finished-row .order-select,
html.mobile-app-layout .order-archive-row .order-select {
  grid-column: 1 / -1 !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  min-height: 48px !important;
}

html.mobile-app-layout .finished-row .order-select strong,
html.mobile-app-layout .order-archive-row .order-select strong {
  font-size: 25px !important;
  line-height: 1.1 !important;
}

html.mobile-app-layout .finished-row .production-customer,
html.mobile-app-layout .order-archive-row .order-col-customer {
  grid-column: 1 / -1 !important;
  color: #17241d !important;
  font-size: 23px !important;
  font-weight: 900 !important;
}

html.mobile-app-layout .finished-row .production-filled,
html.mobile-app-layout .order-archive-row .order-col-tank {
  grid-column: 1 / -1 !important;
}

html.mobile-app-layout .finished-row .production-status,
html.mobile-app-layout .order-archive-row .order-col-status {
  grid-column: 1 / -1 !important;
}

html.mobile-app-layout .finished-row .row-actions,
html.mobile-app-layout .order-archive-row .row-actions {
  grid-column: 1 / -1 !important;
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 8px !important;
  width: 100% !important;
  justify-content: stretch !important;
}

html.mobile-app-layout .finished-row .row-actions button,
html.mobile-app-layout .order-archive-row .row-actions button {
  width: 100% !important;
  min-height: 48px !important;
  padding: 8px !important;
  font-size: 15px !important;
}

html.mobile-app-layout .finished-row .row-actions .danger-button,
html.mobile-app-layout .order-archive-row .row-actions .danger-button {
  grid-column: 1 / -1 !important;
}

html.mobile-app-layout .finished-row .sms-status {
  grid-column: 1 / -1 !important;
  font-size: 13px !important;
}

html.mobile-app-layout .orders-calendar-panel {
  max-height: 520px !important;
  overflow-y: auto !important;
}

html.mobile-app-layout #orders .operations-calendar,
html.mobile-app-layout #orders .reservation-day-grid {
  min-height: 360px !important;
}

html.mobile-app-layout .finished-row .production-customer::before { content: "Stranka" !important; }
html.mobile-app-layout .finished-row .production-received-date::before { content: "Dovoz" !important; }
html.mobile-app-layout .finished-row .production-process-date::before { content: "Prerada" !important; }
html.mobile-app-layout .finished-row .production-fruit::before { content: "Voce" !important; }
html.mobile-app-layout .finished-row .production-eco::before { content: "EKO" !important; }
html.mobile-app-layout .finished-row .production-kg::before { content: "Kg" !important; }
html.mobile-app-layout .finished-row .production-yield::before { content: "Randman" !important; }
html.mobile-app-layout .finished-row .production-filled::before { content: "Napunjeno" !important; }
html.mobile-app-layout .finished-row .production-sms::before { content: "SMS" !important; }
html.mobile-app-layout .finished-row .production-status::before { content: "Status" !important; }

html.mobile-app-layout .order-archive-row .order-col-customer::before { content: "Stranka" !important; }
html.mobile-app-layout .order-archive-row .order-col-date::before { content: "Datum prerade" !important; }
html.mobile-app-layout .order-archive-row .order-col-fruit::before { content: "Voce" !important; }
html.mobile-app-layout .order-archive-row .order-col-kg::before { content: "Kg" !important; }
html.mobile-app-layout .order-archive-row .order-col-tank::before { content: "Posuda" !important; }
html.mobile-app-layout .order-archive-row .order-col-status::before { content: "Status" !important; }

/* v120: zaustavi horizontalni bijeg i stisni sekundarne kontrole. */
html.mobile-app-layout,
html.mobile-app-layout body {
  position: relative !important;
  width: 100% !important;
  max-width: 100vw !important;
  overflow-x: clip !important;
}

html.mobile-app-layout .workspace,
html.mobile-app-layout .topbar,
html.mobile-app-layout .panel,
html.mobile-app-layout .entry-form,
html.mobile-app-layout .production-card,
html.mobile-app-layout .order-card,
html.mobile-app-layout .sales-order-mobile-card,
html.mobile-app-layout .compact-item {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  overflow-x: hidden !important;
}

html.mobile-app-layout #productionPrintColumns.pricebook-column-picker {
  display: flex !important;
  align-items: center !important;
  gap: 7px !important;
  width: 100% !important;
  max-width: 100% !important;
  padding: 8px !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  flex-wrap: nowrap !important;
  -webkit-overflow-scrolling: touch;
}

html.mobile-app-layout #productionPrintColumns.pricebook-column-picker strong,
html.mobile-app-layout #productionPrintColumns.pricebook-column-picker label {
  flex: 0 0 auto !important;
  white-space: nowrap !important;
}

html.mobile-app-layout #productionPrintColumns.pricebook-column-picker strong {
  font-size: 14px !important;
}

html.mobile-app-layout #productionPrintColumns.pricebook-column-picker label {
  min-height: 38px !important;
  padding: 6px 9px !important;
  font-size: 13px !important;
}

html.mobile-app-layout #productionPrintColumns.pricebook-column-picker input[type="checkbox"] {
  width: 24px !important;
  height: 24px !important;
  min-height: 24px !important;
}

html.mobile-app-layout .finished-row-head,
html.mobile-app-layout .order-archive-head {
  max-height: 300px !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  -webkit-overflow-scrolling: touch;
}

html.mobile-app-layout .finished-row .row-actions,
html.mobile-app-layout .order-archive-row .row-actions {
  grid-template-columns: 1fr !important;
}

html.mobile-app-layout .finished-row .row-actions button,
html.mobile-app-layout .order-archive-row .row-actions button,
html.mobile-app-layout .sales-order-mobile-card .row-actions button {
  max-width: 100% !important;
  min-width: 0 !important;
}

html.mobile-app-layout .sales-order-mobile-card .row-actions {
  grid-template-columns: 1fr !important;
}

html.mobile-app-layout .sales-order-mobile-card,
html.mobile-app-layout .sales-order-mobile-head,
html.mobile-app-layout .sales-order-mobile-facts,
html.mobile-app-layout .sales-order-mobile-items,
html.mobile-app-layout .sales-order-statuses,
html.mobile-app-layout .sales-order-statuses label {
  min-width: 0 !important;
  max-width: 100% !important;
  overflow-wrap: anywhere !important;
  word-break: break-word !important;
}

html.mobile-app-layout .sales-order-mobile-facts {
  grid-template-columns: 1fr !important;
}

html.mobile-app-layout .sales-order-mobile-items {
  display: block !important;
  max-height: none !important;
  overflow: visible !important;
  white-space: normal !important;
}

html.mobile-app-layout .finished-row .production-filled,
html.mobile-app-layout .order-archive-row .order-col-tank {
  overflow-wrap: anywhere !important;
  word-break: break-word !important;
}

/* v121: mobile workflow - nalozi, proizvodnja, rezervacije i narudzbenice. */
html.mobile-app-layout .mobile-bottom-nav {
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
}

html.mobile-app-layout .mobile-nav-item {
  font-size: 13px !important;
}

html.mobile-app-layout #orders .panel-actions {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 8px !important;
}

html.mobile-app-layout #orders .panel-actions #orderCount,
html.mobile-app-layout #orders .panel-actions #newOrderButton,
html.mobile-app-layout #orders .panel-actions label,
html.mobile-app-layout #orders .panel-actions #printDayOrders,
html.mobile-app-layout #orders .panel-actions #printSelectedOrders,
html.mobile-app-layout #orders .panel-actions #printAllOrders {
  grid-column: 1 / -1 !important;
}

html.mobile-app-layout #orderPrevDay,
html.mobile-app-layout #orderToday,
html.mobile-app-layout #orderNextDay {
  min-height: 48px !important;
  padding: 8px !important;
  font-size: 15px !important;
}

html.mobile-app-layout #newOrderButton {
  min-height: 58px !important;
  font-size: 19px !important;
}

html.mobile-app-layout #orderForm.order-form-modal:not(.hidden),
html.mobile-app-layout #salesOrderForm:not(.hidden),
html.mobile-app-layout #adminReservationForm:not(.hidden) {
  position: fixed !important;
  inset: 0 !important;
  z-index: 150 !important;
  display: block !important;
  width: 100vw !important;
  max-width: 100vw !important;
  height: 100dvh !important;
  max-height: 100dvh !important;
  margin: 0 !important;
  padding: calc(12px + env(safe-area-inset-top)) 12px calc(92px + env(safe-area-inset-bottom)) !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: #f5f7f1 !important;
  box-shadow: none !important;
}

html.mobile-app-layout #orderForm .modal-form-head,
html.mobile-app-layout #salesOrderForm::before,
html.mobile-app-layout #adminReservationForm::before {
  position: sticky !important;
  top: calc(-12px - env(safe-area-inset-top)) !important;
  z-index: 2 !important;
  margin: calc(-12px - env(safe-area-inset-top)) -12px 12px !important;
  padding: calc(12px + env(safe-area-inset-top)) 12px 10px !important;
  border-bottom: 1px solid #d8e3d5 !important;
  background: #ffffff !important;
  box-shadow: 0 8px 18px rgba(31, 45, 37, 0.08) !important;
}

html.mobile-app-layout #salesOrderForm::before {
  content: "Nova narudzba";
  display: block !important;
  color: #17241d !important;
  font-size: 25px !important;
  font-weight: 950 !important;
}

html.mobile-app-layout #adminReservationForm::before {
  content: "Rezervacija";
  display: block !important;
  color: #17241d !important;
  font-size: 25px !important;
  font-weight: 950 !important;
}

html.mobile-app-layout #orderForm .modal-form-head h3 {
  font-size: 25px !important;
}

html.mobile-app-layout #orderForm .order-top-grid,
html.mobile-app-layout #orderForm .compact-fields,
html.mobile-app-layout #orderForm .package-grid,
html.mobile-app-layout #salesOrderForm fieldset,
html.mobile-app-layout #adminReservationForm {
  grid-template-columns: 1fr !important;
}

html.mobile-app-layout #orderForm .form-actions,
html.mobile-app-layout #salesOrderForm .form-actions,
html.mobile-app-layout #adminReservationForm .form-actions {
  position: sticky !important;
  bottom: 0 !important;
  margin: 12px -12px calc(-92px - env(safe-area-inset-bottom)) !important;
  padding: 12px 12px calc(14px + env(safe-area-inset-bottom)) !important;
  background: rgba(255, 255, 255, 0.98) !important;
}

html.mobile-app-layout .order-archive-row:not(.order-archive-head) {
  grid-template-columns: 1fr !important;
  gap: 10px !important;
}

html.mobile-app-layout .order-archive-row .order-col-customer {
  font-size: 26px !important;
}

html.mobile-app-layout .order-archive-row > span,
html.mobile-app-layout .order-archive-row > label {
  font-size: 18px !important;
}

html.mobile-app-layout .order-archive-row .row-actions {
  grid-template-columns: 1fr !important;
  margin-top: 4px !important;
}

html.mobile-app-layout .order-archive-row .row-actions button {
  min-height: 50px !important;
  font-size: 16px !important;
}

html.mobile-app-layout .mobile-return-button {
  width: 100% !important;
  min-height: 54px !important;
  margin-bottom: 10px !important;
  font-size: 18px !important;
}

html.mobile-app-layout .production-card:not(.production-compact-row) {
  padding: 12px !important;
}

html.mobile-app-layout .production-card:not(.production-compact-row) .production-card-head {
  grid-template-columns: 1fr !important;
  gap: 8px !important;
}

html.mobile-app-layout .production-card:not(.production-compact-row) .production-card-head strong {
  font-size: 27px !important;
}

html.mobile-app-layout .production-card:not(.production-compact-row) .production-card-head span {
  font-size: 18px !important;
}

html.mobile-app-layout .production-card:not(.production-compact-row) .production-form-grid,
html.mobile-app-layout .production-card:not(.production-compact-row) .production-payment-line,
html.mobile-app-layout .production-card:not(.production-compact-row) .production-total,
html.mobile-app-layout .production-card:not(.production-compact-row) .package-actual-list {
  grid-template-columns: 1fr !important;
  gap: 10px !important;
}

html.mobile-app-layout .production-field {
  padding: 10px !important;
  border-radius: 12px !important;
  background: #f5f8f2 !important;
}

html.mobile-app-layout .production-field span {
  font-size: 13px !important;
}

html.mobile-app-layout .production-field strong {
  font-size: 20px !important;
}

html.mobile-app-layout .production-card:not(.production-compact-row) .production-actions {
  grid-template-columns: 1fr !important;
}

html.mobile-app-layout .sales-order-mobile-items {
  display: grid !important;
  gap: 7px !important;
}

html.mobile-app-layout .sales-order-mobile-item {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 4px !important;
  padding: 10px !important;
  border: 1px solid #dce7d9 !important;
  border-radius: 12px !important;
  background: #f7faf5 !important;
}

html.mobile-app-layout .sales-order-mobile-item strong {
  font-size: 18px !important;
  line-height: 1.2 !important;
}

html.mobile-app-layout .sales-order-mobile-item span {
  color: #657168 !important;
  font-size: 14px !important;
}

html.mobile-app-layout .sales-order-mobile-item b {
  color: #1f6d3d !important;
  font-size: 17px !important;
}

html.mobile-app-layout .sales-order-mobile-note {
  margin: 0 !important;
  padding: 9px 10px !important;
  border-radius: 12px !important;
  background: #fff8df !important;
  color: #5f4c18 !important;
  font-size: 15px !important;
  font-weight: 800 !important;
}

html.mobile-app-layout .sales-order-statuses label {
  justify-content: flex-start !important;
  text-align: left !important;
}

/* v122: vece mobilno mjerilo, SMS clipboard i posebne kartice za sve radne naloge. */
html.mobile-app-layout body {
  font-size: 20px !important;
  line-height: 1.38 !important;
}

html.mobile-app-layout .workspace {
  padding: 10px 10px calc(88px + env(safe-area-inset-bottom)) !important;
}

html.mobile-app-layout .panel,
html.mobile-app-layout .entry-form,
html.mobile-app-layout .metric {
  border-radius: 14px !important;
}

html.mobile-app-layout .panel-header h3,
html.mobile-app-layout .order-section-title,
html.mobile-app-layout .entry-form h3,
html.mobile-app-layout .entry-form h4 {
  font-size: 24px !important;
  line-height: 1.18 !important;
}

html.mobile-app-layout input,
html.mobile-app-layout select,
html.mobile-app-layout textarea {
  min-height: 50px !important;
  font-size: 21px !important;
}

html.mobile-app-layout button,
html.mobile-app-layout .ghost-button,
html.mobile-app-layout .danger-button,
html.mobile-app-layout .primary-button {
  min-height: 50px !important;
  font-size: 17px !important;
}

html.mobile-app-layout .mobile-bottom-nav {
  min-height: 74px !important;
}

html.mobile-app-layout .mobile-nav-item {
  font-size: 14px !important;
  font-weight: 900 !important;
}

html.mobile-app-layout .order-archive-list {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 12px !important;
  overflow: visible !important;
}

html.mobile-app-layout .order-archive-head {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 8px !important;
  max-height: none !important;
  overflow: visible !important;
  padding: 12px !important;
}

html.mobile-app-layout .order-archive-head .order-column-header {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 6px !important;
  min-width: 0 !important;
}

html.mobile-app-layout .order-archive-head .order-column-header strong {
  display: none !important;
}

html.mobile-app-layout .order-mobile-card {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 12px !important;
  width: 100% !important;
  min-width: 0 !important;
  padding: 14px !important;
  border: 2px solid #d7caa9 !important;
  border-left: 6px solid #2f7d4b !important;
  border-radius: 16px !important;
  background: #fffdf7 !important;
  box-shadow: 0 10px 24px rgba(34, 44, 35, 0.08) !important;
  overflow: visible !important;
}

html.mobile-app-layout .order-mobile-card:nth-child(even) {
  background: #f7f3ea !important;
}

html.mobile-app-layout .order-mobile-head {
  display: grid !important;
  grid-template-columns: 1fr auto !important;
  align-items: center !important;
  gap: 10px !important;
}

html.mobile-app-layout .order-mobile-head label {
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  min-width: 0 !important;
  margin: 0 !important;
  font-size: 22px !important;
}

html.mobile-app-layout .order-mobile-head strong,
html.mobile-app-layout .order-mobile-customer {
  color: #18241d !important;
  font-size: 28px !important;
  line-height: 1.1 !important;
  overflow-wrap: anywhere !important;
}

html.mobile-app-layout .order-mobile-head .status {
  justify-self: end !important;
  min-width: 0 !important;
  padding: 7px 12px !important;
  font-size: 15px !important;
  white-space: nowrap !important;
}

html.mobile-app-layout .order-mobile-facts {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 7px !important;
}

html.mobile-app-layout .order-mobile-facts span {
  display: grid !important;
  grid-template-columns: 108px minmax(0, 1fr) !important;
  gap: 9px !important;
  align-items: baseline !important;
  color: #344238 !important;
  font-size: 19px !important;
  overflow-wrap: anywhere !important;
}

html.mobile-app-layout .order-mobile-facts b {
  color: #667268 !important;
  font-size: 14px !important;
  text-transform: uppercase !important;
}

html.mobile-app-layout .order-mobile-actions {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 8px !important;
  margin-top: 2px !important;
}

html.mobile-app-layout .order-mobile-actions .danger-button {
  grid-column: 1 / -1 !important;
}

html.mobile-app-layout .order-mobile-actions button {
  min-height: 52px !important;
  padding: 9px 10px !important;
  font-size: 17px !important;
}

html.mobile-app-layout #productionRows.mobile-production-focus {
  position: fixed !important;
  inset: 0 !important;
  z-index: 145 !important;
  width: 100vw !important;
  height: 100dvh !important;
  padding: calc(12px + env(safe-area-inset-top)) 12px calc(92px + env(safe-area-inset-bottom)) !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  background: #f5f7f1 !important;
}

html.mobile-app-layout #productionRows.mobile-production-focus .mobile-return-button {
  position: sticky !important;
  top: calc(-12px - env(safe-area-inset-top)) !important;
  z-index: 2 !important;
  margin: calc(-12px - env(safe-area-inset-top)) -12px 12px !important;
  border-radius: 0 !important;
  min-height: 58px !important;
  background: #ffffff !important;
  box-shadow: 0 8px 18px rgba(31, 45, 37, 0.08) !important;
}

html.mobile-app-layout #productionRows.mobile-production-focus .production-card:not(.production-compact-row) {
  margin-bottom: 20px !important;
  border-radius: 16px !important;
}

/* v123: dodatno povecanje mobilnog fonta za terenski rad. */
html.mobile-app-layout body,
html.mobile-app-layout .public-card {
  font-size: 24px !important;
  line-height: 1.4 !important;
}

html.mobile-app-layout input,
html.mobile-app-layout select,
html.mobile-app-layout textarea {
  min-height: 58px !important;
  font-size: 25px !important;
}

html.mobile-app-layout button,
html.mobile-app-layout .ghost-button,
html.mobile-app-layout .danger-button,
html.mobile-app-layout .primary-button {
  min-height: 58px !important;
  font-size: 20px !important;
}

html.mobile-app-layout .mobile-nav-item {
  font-size: 17px !important;
}

html.mobile-app-layout .topbar h2,
html.mobile-app-layout .public-card h1 {
  font-size: 34px !important;
}

html.mobile-app-layout .panel-header h3,
html.mobile-app-layout .order-section-title,
html.mobile-app-layout .entry-form h3,
html.mobile-app-layout .entry-form h4,
html.mobile-app-layout .reservation-schedule-head strong {
  font-size: 29px !important;
}

html.mobile-app-layout .order-mobile-head strong,
html.mobile-app-layout .order-mobile-customer,
html.mobile-app-layout .reservation-card strong,
html.mobile-app-layout .production-card strong,
html.mobile-app-layout .sales-order-mobile-head strong {
  font-size: 34px !important;
}

html.mobile-app-layout .order-mobile-facts span,
html.mobile-app-layout .reservation-card span,
html.mobile-app-layout .production-card span,
html.mobile-app-layout .sales-order-mobile-facts span,
html.mobile-app-layout .sales-order-mobile-items {
  font-size: 23px !important;
}

html.mobile-app-layout .order-mobile-facts b,
html.mobile-app-layout .status,
html.mobile-app-layout .badge,
html.mobile-app-layout .pill,
html.mobile-app-layout small {
  font-size: 18px !important;
}

html.mobile-app-layout .calendar-slot,
html.mobile-app-layout .calendar-reservation-block,
html.mobile-app-layout .calendar-break-block {
  font-size: 17px !important;
}

html.mobile-app-layout .calendar-reservation-block strong {
  font-size: 20px !important;
}