/* ---------- Palette ----------
   Defined on :root rather than on .app-shell so pages that render without the layout - the sign
   in and change password screens - reach the same colours instead of restating them. */

:root {
  --farro-surface: #f3eee8;
  --farro-surface-border: #d6c7ba;
  --farro-content-bg: #f7f4f0;
  --farro-text: #4b332b;
  --farro-text-body: #3f342f;
  --farro-muted: #8a7569;
  --farro-accent: #7f2f24;
  --farro-accent-strong: #8f372b;
  --farro-accent-deep: #69251d;
  --farro-danger: #b42318;
  --farro-card: #ffffff;
  --farro-accent-soft: #f4e4df;
  --farro-success: #2f6b3a;
  --farro-success-soft: #e7f1e8;

  /* Account notes: a standing customer instruction, warm so it reads as "look here" without
     looking like an error. */
  --farro-note: #9a6a22;
  --farro-note-soft: #f8f0df;
  --farro-note-border: #e6d2a8;

  /* Row palette for the special code 2 groups of the bulk order entry grid, used in turn. Soft
     enough that the white quantity boxes still stand out on every one of them. */
  --bulk-shade-0: #f6efe4;
  --bulk-shade-1: #e9f2e6;
  --bulk-shade-2: #e5eef6;
  --bulk-shade-3: #f7e8ea;
  --bulk-shade-4: #f8f3d9;
  --bulk-shade-5: #eee8f5;
  /* Toplu girişte seçili hücrenin satırına ve sütununa, gruptaki zeminin üstüne binen örtü. */
  --bulk-current-tint: rgba(127, 47, 36, .045);
}

html {
  font-size: 14px;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

html {
  position: relative;
  min-height: 100%;
}

body {
  min-height: 100vh;
  margin: 0;
  color: #3f342f;
  background: #f7f4f0;
}

/* ---------- Home: page shortcuts ---------- */

.home-page {
  display: grid;
  gap: 10px;
  padding: 14px 16px;
}

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

.home-header h1 {
  margin: 0;
  color: var(--farro-text);
  font-size: 17px;
  font-weight: 700;
}

.home-header p {
  margin: 1px 0 0;
  color: var(--farro-muted);
  font-size: 12px;
}

.home-search {
  width: 220px;
  max-width: 100%;
  height: 28px;
  padding: 0 10px;
  border: 1px solid var(--farro-surface-border);
  border-radius: 6px;
  background: var(--farro-card);
  color: var(--farro-text-body);
  font-size: 13px;
  outline: none;
}

.home-search:focus {
  border-color: var(--farro-accent);
  box-shadow: 0 0 0 2px var(--farro-accent-soft);
}

.home-search::-webkit-search-cancel-button {
  display: none;
  -webkit-appearance: none;
}

/* Günün özeti: liste sayfalarına giden sayaç kutuları. */
.home-stats {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 10px;
}

.home-stat {
  display: grid;
  gap: 1px;
  padding: 8px 12px;
  border: 1px solid var(--farro-surface-border);
  border-radius: 8px;
  background: var(--farro-card);
  color: var(--farro-text-body);
  text-decoration: none;
}

.home-stat:hover,
.home-stat:focus-visible {
  border-color: var(--farro-accent);
  color: var(--farro-text-body);
}

.home-stat-label {
  color: var(--farro-muted);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .05em;
  text-transform: uppercase;
}

.home-stat-value {
  color: var(--farro-text);
  font-size: 20px;
  font-weight: 700;
  line-height: 1.25;
}

.home-stat-detail {
  color: var(--farro-muted);
  font-size: 12px;
}

.home-stat.is-alert {
  border-color: var(--farro-note-border);
  background: var(--farro-note-soft);
}

.home-stat.is-alert .home-stat-value {
  color: var(--farro-danger);
}

/* Masonry-like columns so short cards don't leave holes under themselves. */
.home-modules {
  columns: 210px;
  column-gap: 10px;
}

.home-module {
  overflow: hidden;
  break-inside: avoid;
  margin-bottom: 10px;
  padding: 8px 8px 6px;
  border: 1px solid var(--farro-surface-border);
  border-radius: 8px;
  background: var(--farro-card);
}

.home-module[hidden] {
  display: none;
}

.home-module-title {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: -8px -8px 4px;
  padding: 6px 10px;
  border-bottom: 1px solid var(--farro-surface-border);
  border-radius: 8px 8px 0 0;
  background: var(--farro-surface);
  color: var(--farro-accent-deep);
  font-size: 13.5px;
  font-weight: 800;
  letter-spacing: .01em;
}

.home-module-icon {
  display: inline-grid;
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  place-items: center;
  color: var(--farro-accent);
}

.home-module-icon svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.home-section + .home-section {
  margin-top: 5px;
}

.home-section-title {
  display: flex;
  align-items: center;
  gap: 5px;
  margin: 0;
  padding: 3px 4px 1px;
  color: var(--farro-text);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .05em;
  text-transform: uppercase;
}

.home-section-icon {
  display: inline-flex;
  width: 14px;
  height: 14px;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  color: var(--farro-accent);
}

.home-section-icon svg {
  width: 13px;
  height: 13px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Links line up under the section text, not under its icon. */
.home-section-title + .home-links {
  padding-left: 19px;
}

.home-links {
  display: grid;
}

.home-link {
  display: block;
  padding: 2px 4px;
  border-radius: 4px;
  color: var(--farro-text-body);
  font-size: 12.5px;
  line-height: 1.45;
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.home-link:hover,
.home-link:focus-visible {
  background: var(--farro-accent-soft);
  color: var(--farro-accent-deep);
}

.home-link[hidden] {
  display: none;
}

.home-no-results {
  margin: 0;
  color: var(--farro-muted);
  font-size: 13px;
}

/* Modül başlığı bir buton içinde durur; masaüstünde düz başlık gibi görünür ve gövde hep açıktır. */
.home-module-toggle {
  display: flex;
  width: 100%;
  align-items: center;
  gap: 6px;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  text-align: left;
  pointer-events: none;
}

.home-module-name {
  flex: 1 1 auto;
  min-width: 0;
}

.home-module-chevron {
  display: none;
}

@media (max-width: 600px) {
  .home-header {
    flex-wrap: wrap;
  }

  .home-search {
    width: 100%;
  }
}

/* Ana sayfanın telefon görünümü (ViewData["MobileReady"]). _Layout 650px altında kabuğu 720px'e sabitler ve
   ikon şeridi bırakır; bu sayfada şerit gizlenir, kabuk ekran genişliğine iner ve sayfa gövdeyle birlikte kayar
   (yapışık arama bu kaydırmaya bağlıdır). Çıkış şeritle gittiği için ortak üst çubuğun (_MobileTopNav) menüsüne gelir. Modüller katlanır
   başlıklardır: kapalı başlar, dokununca ya da arama eşleşince açılır. Diğer sayfaların telefon davranışı değişmez. */
@media (max-width: 640px) {
  body:has(.home-page) .app-shell {
    display: block;
    min-width: 0;
    height: auto;
  }

  body:has(.home-page) .app-sidebar {
    display: none;
  }

  body:has(.home-page) .app-main,
  body:has(.home-page) .app-content,
  body:has(.home-page) .content-surface {
    height: auto;
    overflow: visible;
  }

  body:has(.home-page) .app-content {
    padding: 0;
  }

  body:has(.home-page) .content-surface {
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }

  .home-page {
    gap: 12px;
    padding: 0 12px calc(20px + env(safe-area-inset-bottom));
  }

  /* Ortak üst çubuk sayfanın yan boşluğunu aşıp kenardan kenara uzanır. */
  .home-page > .mobile-topnav {
    margin: 0 -12px;
  }

  /* Başlık kutusu çözülür ki arama sayfa ızgarasının çocuğu olsun; sticky yalnızca kendi kapsayıcısının
     sınırında yapışır, başlığın içinde kalsaydı başlıkla birlikte kayıp giderdi. */
  .home-header {
    display: contents;
  }

  .home-header h1 {
    font-size: 18px;
  }

  .home-header p {
    font-size: 13px;
  }

  /* Arama başlığın altında, kaydırırken üstte yapışık. Girişler 16px: iOS küçük yazılı kutuya odaklanınca
     sayfayı yakınlaştırır. */
  .home-search {
    position: sticky;
    top: 0;
    z-index: 2;
    width: 100%;
    height: 44px;
    font-size: 16px;
    box-shadow: 0 6px 12px -8px rgba(44, 34, 25, .35);
  }

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

  .home-stat {
    padding: 10px;
  }

  .home-stat-label {
    font-size: 10px;
  }

  .home-stat-value {
    font-size: 19px;
  }

  .home-stat-detail {
    font-size: 11.5px;
    line-height: 1.3;
  }

  .home-modules {
    display: grid;
    gap: 8px;
    columns: auto;
  }

  .home-module {
    margin: 0;
    padding: 0;
  }

  .home-module-title {
    margin: 0;
    padding: 0;
    border-bottom: 0;
    border-radius: 0;
    background: transparent;
    font-size: 15px;
  }

  .home-module-toggle {
    min-height: 48px;
    gap: 10px;
    padding: 0 14px;
    pointer-events: auto;
    cursor: pointer;
  }

  .home-module-icon,
  .home-module-icon svg {
    width: 20px;
    height: 20px;
  }

  .home-module-chevron {
    display: inline-grid;
    width: 18px;
    height: 18px;
    place-items: center;
    color: var(--farro-muted);
    transition: transform .15s ease;
  }

  .home-module-chevron svg {
    width: 16px;
    height: 16px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
  }

  .home-module-body {
    display: none;
    padding: 4px 10px 10px;
    border-top: 1px solid var(--farro-surface-border);
  }

  .home-module.is-open .home-module-body,
  .home-module.is-search-open .home-module-body {
    display: block;
  }

  .home-module.is-open .home-module-title,
  .home-module.is-search-open .home-module-title {
    background: var(--farro-surface);
  }

  .home-module.is-open .home-module-chevron,
  .home-module.is-search-open .home-module-chevron {
    transform: rotate(90deg);
  }

  .home-section + .home-section {
    margin-top: 8px;
  }

  .home-section-title {
    padding: 8px 4px 2px;
    font-size: 11.5px;
  }

  .home-link {
    display: flex;
    min-height: 44px;
    align-items: center;
    padding: 0 8px;
    border-radius: 6px;
    font-size: 15px;
  }

  .home-section-title + .home-links {
    padding-left: 14px;
  }
}

.stock-page {
  display: flex;
  height: calc(100vh - 36px);
  min-height: 0;
  flex-direction: column;
  overflow: hidden;
}

.stock-page-header {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 66px;
  padding: 14px 16px;
  border-bottom: 1px solid #ded7d0;
  background: #fffaf5;
}

.stock-page-header h1 {
  margin: 0;
  color: #3f342f;
  font-size: 18px;
  font-weight: 700;
}

.stock-page-header p {
  margin: 3px 0 0;
  color: #75665e;
  font-size: 12px;
}

/* Header actions sit in a row so a page can offer a secondary action next to its primary one
   without the two collapsing onto each other on a narrow screen. */
.stock-page-actions {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 8px;
}

/* --- Toplu siparis belgesi --------------------------------------------------------------- */

.bulk-order-sheet-filters {
  flex: 0 0 auto;
  display: flex;
  align-items: flex-end;
  gap: 10px;
  padding: 10px 16px;
  border-bottom: 1px solid #ede6df;
  background: #fffdfb;
}

.bulk-order-sheet-filters .erp-field {
  min-width: 150px;
}

.bulk-order-sheet-wrap {
  overflow: auto;
  max-height: none;
  flex: 1 1 auto;
  min-height: 0;
}

/* table-layout stays automatic: the number of branch columns is not known in advance, and the
   company band is only readable when the browser sizes it to its contents. */
.bulk-order-sheet-table {
  border-collapse: separate;
  border-spacing: 0;
  min-width: max-content;
}

.bulk-order-sheet-table thead th {
  position: sticky;
  z-index: 4;
  border-bottom: 1px solid #ded7d0;
  background: #f4f1eb;
  padding: 5px 9px;
  text-align: center;
  white-space: nowrap;
}

/* Each header band is pinned at its own offset, so all three stay visible together while the
   sheet scrolls. The values match the band heights below. */
.bulk-order-sheet-table thead tr:nth-child(1) th {
  top: 0;
  height: 30px;
}

.bulk-order-sheet-table thead tr:nth-child(2) th {
  top: 30px;
  height: 28px;
}

.bulk-order-sheet-table thead tr:nth-child(3) th {
  top: 58px;
  height: 26px;
}

.bulk-order-sheet-table th[rowspan] {
  top: 0;
}

.bulk-sheet-company {
  border-left: 2px solid #c9beb2;
  background: #ece4d8 !important;
  color: #3f342f;
  font-size: 12px;
  font-weight: 800;
}

.bulk-sheet-branch {
  border-left: 1px solid #ded7d0;
  font-size: 11px;
  font-weight: 700;
}

.bulk-sheet-status {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .02em;
}

.bulk-sheet-status.is-approved {
  border-left: 1px solid #ded7d0;
  color: #3f6b40;
}

.bulk-sheet-status.is-pending {
  color: #9a6a20;
}

/* The product columns are frozen: the numbers mean nothing once the row label scrolls away. */
.bulk-order-sheet-table .bulk-sheet-code-col,
.bulk-order-sheet-table .bulk-sheet-name-col {
  position: sticky;
  z-index: 3;
  background: #fff;
  text-align: left;
  white-space: nowrap;
}

.bulk-order-sheet-table thead .bulk-sheet-code-col,
.bulk-order-sheet-table thead .bulk-sheet-name-col {
  z-index: 5;
  background: #f4f1eb;
}

.bulk-order-sheet-table .bulk-sheet-code-col {
  left: 0;
  width: 110px;
  min-width: 110px;
}

.bulk-order-sheet-table .bulk-sheet-name-col {
  left: 110px;
  width: 220px;
  min-width: 220px;
  border-right: 2px solid #c9beb2;
}

.bulk-sheet-amount {
  border-left: 1px solid #f0ebe4;
  font-variant-numeric: tabular-nums;
  padding: 4px 9px;
  text-align: right;
}

.bulk-sheet-amount.is-approved {
  border-left: 1px solid #ded7d0;
  font-weight: 700;
}

.bulk-sheet-amount.is-pending {
  background: #fdf7ec;
  color: #8a5f1c;
}

.bulk-order-sheet-table tbody tr:hover td {
  background: #fcfaf6;
}

.bulk-order-sheet-table tbody tr:hover .bulk-sheet-amount.is-pending {
  background: #f8efdf;
}

@media print {
  .bulk-order-sheet-filters,
  .stock-page-actions,
  .sidebar {
    display: none !important;
  }

  .bulk-order-sheet-wrap {
    overflow: visible;
    max-height: none;
  }
}

/* --- Toplu siparis girisi ---------------------------------------------------------------- */

.bulk-order-entry-table {
  border-collapse: separate;
  border-spacing: 0;
  min-width: max-content;
}

/* .data-table stretches to 100%, which hands the spare width out to the columns: with few
   account columns everything came out wide and then shrank as columns were added. Sized to its
   content, every column sits at its own width from the first render. The double class outranks
   .data-table, which is declared later in this file. */
.data-table.bulk-order-entry-table {
  width: max-content;
}

.bulk-order-entry-table thead th {
  position: sticky;
  top: 0;
  z-index: 4;
  border-bottom: 1px solid var(--farro-surface-border);
  background: var(--farro-surface);
  padding: 6px 8px;
  vertical-align: top;
  white-space: nowrap;
}

/* Code and name stay pinned while the columns scroll sideways, so a typed number is always read
   against its product. */
.bulk-order-entry-table .bulk-entry-category-col,
.bulk-order-entry-table .bulk-entry-subgroup-col,
.bulk-order-entry-table .bulk-entry-code-col,
.bulk-order-entry-table .bulk-entry-name-col {
  position: sticky;
  z-index: 2;
  background: var(--farro-card);
}

/* The category runs down the side of its products, lettered bottom to top like a book spine. */
.bulk-order-entry-table .bulk-entry-category-col {
  left: 0;
  width: 34px;
  min-width: 34px;
  max-width: 34px;
  padding: 6px 0;
  border-right: 1px solid var(--farro-surface-border);
  background: var(--farro-accent-soft);
  color: var(--farro-text);
  text-align: center;
  vertical-align: middle;
}

/* Rows are pinned at 24px below, so the spine can be capped at its rows' height and cut with an
   ellipsis like every other name on the grid; the cell's title carries the full text. */
/* Special code 2 sits beside the category the same way, one tall cell per group, and takes its
   group's row colour. */
.bulk-order-entry-table .bulk-entry-subgroup-col {
  left: 34px;
  width: 34px;
  min-width: 34px;
  max-width: 34px;
  padding: 6px 0;
  border-right: 1px solid var(--farro-surface-border);
  color: var(--farro-text-body);
  text-align: center;
  vertical-align: middle;
}

.bulk-order-entry-table thead .bulk-entry-category-col,
.bulk-order-entry-table thead .bulk-entry-subgroup-col {
  font-size: 10px;
}

.bulk-order-entry-table tbody tr.is-subgroup-start > * {
  border-top: 1px solid var(--farro-surface-border);
}

.bulk-order-entry-table tbody tr.bulk-entry-shade-0 > td,
.bulk-order-entry-table tbody tr.bulk-entry-shade-0 > .bulk-entry-subgroup-col {
  --bulk-row-bg: var(--bulk-shade-0);
  background: var(--bulk-row-bg);
}

.bulk-order-entry-table tbody tr.bulk-entry-shade-1 > td,
.bulk-order-entry-table tbody tr.bulk-entry-shade-1 > .bulk-entry-subgroup-col {
  --bulk-row-bg: var(--bulk-shade-1);
  background: var(--bulk-row-bg);
}

.bulk-order-entry-table tbody tr.bulk-entry-shade-2 > td,
.bulk-order-entry-table tbody tr.bulk-entry-shade-2 > .bulk-entry-subgroup-col {
  --bulk-row-bg: var(--bulk-shade-2);
  background: var(--bulk-row-bg);
}

.bulk-order-entry-table tbody tr.bulk-entry-shade-3 > td,
.bulk-order-entry-table tbody tr.bulk-entry-shade-3 > .bulk-entry-subgroup-col {
  --bulk-row-bg: var(--bulk-shade-3);
  background: var(--bulk-row-bg);
}

.bulk-order-entry-table tbody tr.bulk-entry-shade-4 > td,
.bulk-order-entry-table tbody tr.bulk-entry-shade-4 > .bulk-entry-subgroup-col {
  --bulk-row-bg: var(--bulk-shade-4);
  background: var(--bulk-row-bg);
}

.bulk-order-entry-table tbody tr.bulk-entry-shade-5 > td,
.bulk-order-entry-table tbody tr.bulk-entry-shade-5 > .bulk-entry-subgroup-col {
  --bulk-row-bg: var(--bulk-shade-5);
  background: var(--bulk-row-bg);
}

.bulk-entry-vertical {
  display: inline-block;
  max-height: calc(var(--rows, 1) * 24px - 12px);
  overflow: hidden;
  text-overflow: ellipsis;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  white-space: nowrap;
}

/* Compact rows: .data-table gives every cell 34px and 6px of vertical padding, which is more than
   a three digit quantity needs. The spine's max-height above uses the same 24px. */
.bulk-order-entry-table tbody tr {
  height: 24px;
}

.bulk-order-entry-table tbody td,
.bulk-order-entry-table tbody th {
  height: 24px;
  padding-top: 1px;
  padding-bottom: 1px;
  font-size: 12px;
}

.bulk-order-entry-table tbody tr.is-category-start > * {
  border-top: 2px solid var(--farro-surface-border);
}

/* Codes are at most six characters. Sticky offsets add up the columns to the left: category (34)
   + special code 2 (34) for the code, + code (62) for the name. */
.bulk-order-entry-table .bulk-entry-code-col {
  left: 68px;
  width: 62px;
  min-width: 62px;
  max-width: 62px;
  padding-left: 6px;
  padding-right: 6px;
}

.bulk-order-entry-table thead .bulk-entry-code-col {
  white-space: normal;
}

.bulk-order-entry-table .bulk-entry-name-col {
  left: 130px;
  width: 160px;
  min-width: 160px;
  max-width: 160px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  border-right: 1px solid var(--farro-surface-border);
}

.bulk-order-entry-table thead .bulk-entry-category-col,
.bulk-order-entry-table thead .bulk-entry-subgroup-col,
.bulk-order-entry-table thead .bulk-entry-code-col,
.bulk-order-entry-table thead .bulk-entry-name-col {
  z-index: 5;
  background: var(--farro-surface);
}

/* Two header bands: the account spans its branch columns, the branches sit underneath. Each band
   is pinned at its own offset so both stay visible while the grid scrolls. */
/* 44px fits a small select plus the cell padding; the second band's offset has to match it. */
.bulk-order-entry-table thead tr:nth-child(1) th {
  top: 0;
  height: 44px;
}

.bulk-order-entry-table thead tr:nth-child(2) th {
  top: 44px;
}

/* Sits over the category, special code 2, code and name columns, so its width is their widths
   together (34 + 34 + 62 + 160) and it stays pinned with them while the columns scroll sideways. */
.bulk-order-entry-table thead .bulk-entry-category-picker {
  position: sticky;
  left: 0;
  z-index: 6;
  width: 290px;
  min-width: 290px;
  max-width: 290px;
  padding: 4px 6px;
  background: var(--farro-surface);
  text-align: left;
}

.bulk-entry-category-label {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0;
}

.bulk-entry-category-label > span {
  flex: 0 0 auto;
  color: var(--farro-muted);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.data-table.bulk-order-entry-table .bulk-entry-category-label .erp-combobox {
  flex: 0 1 180px;
  width: auto;
  max-width: 180px;
}

.bulk-entry-category-label .erp-combobox-input {
  font-size: 12px;
  font-weight: 700;
}

/* Toplu giriş: sabit sütunlar daraltıldı (28 + 28 + 54 + ürün adı). Çıkış deposunun bakiyesini gösteren
   "Depo" sütunu sabit alanda değildir; ürün adından sonra gelir ve sipariş sütunları gibi onlarla birlikte
   kayar, sağa kaydırınca önlerinde durmaz. Gün gün aktarım ekranı aynı tabloyu kullanır; kurallar
   .bulk-entry-grid ile yalnızca bu ekrana uygulanır. */
.bulk-order-entry-table.bulk-entry-grid .bulk-entry-category-col {
  width: 28px;
  min-width: 28px;
  max-width: 28px;
}

.bulk-order-entry-table.bulk-entry-grid .bulk-entry-subgroup-col {
  left: 28px;
  width: 28px;
  min-width: 28px;
  max-width: 28px;
}

.bulk-order-entry-table.bulk-entry-grid thead .bulk-entry-category-col,
.bulk-order-entry-table.bulk-entry-grid thead .bulk-entry-subgroup-col {
  overflow: hidden;
  font-size: 9px;
  letter-spacing: 0;
}

.bulk-order-entry-table.bulk-entry-grid .bulk-entry-code-col {
  left: 56px;
  width: 54px;
  min-width: 54px;
  max-width: 54px;
  padding-left: 4px;
  padding-right: 4px;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Ürün adı kesilmez: bulk-order-entry.js en uzun adı ölçüp --bulk-name-width'e yazar, sütun o
   genişlikte tek satır kalır. Kategori seçici bu genişliğe göre uzar; değişken
   yazılmadan önce eski 120px geçerlidir. */
.bulk-order-entry-table.bulk-entry-grid .bulk-entry-name-col {
  left: 110px;
  width: var(--bulk-name-width, 120px);
  min-width: var(--bulk-name-width, 120px);
  max-width: var(--bulk-name-width, 120px);
  padding-left: 6px;
  padding-right: 6px;
}

.bulk-order-entry-table.bulk-entry-grid thead .bulk-entry-category-picker {
  width: calc(110px + var(--bulk-name-width, 120px));
  min-width: calc(110px + var(--bulk-name-width, 120px));
  max-width: calc(110px + var(--bulk-name-width, 120px));
}

/* Sipariş sütunu genişliğinde (64px), sabit değil; sayılar sipariş adetleri gibi sağa yaslı. */
.bulk-order-entry-table.bulk-entry-grid .bulk-entry-stock-col {
  width: 64px;
  min-width: 64px;
  max-width: 64px;
  padding-left: 4px;
  padding-right: 6px;
  overflow: hidden;
  border-right: 1px solid var(--farro-surface-border);
  color: var(--farro-muted);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  text-align: right;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Başlık diğer sütun başlıklarıyla aynı yazıdadır; gövde hücrelerinin soluk, küçük yazısı yalnızca
   bakiyeler içindir. */
.bulk-order-entry-table.bulk-entry-grid thead .bulk-entry-stock-col {
  background: var(--farro-surface);
  color: inherit;
  font-size: inherit;
  text-align: right;
}

.bulk-order-entry-table.bulk-entry-grid tbody .bulk-entry-stock-col.has-stock {
  color: var(--farro-text);
  font-weight: 700;
}

.bulk-order-entry-table.bulk-entry-grid tbody .bulk-entry-stock-col.is-negative {
  color: var(--farro-danger);
  font-weight: 700;
}

/* Kategori ve çıkış deposu iki satır olarak üst üste durur; ilk başlık bandı ikisini taşıyacak kadar
   yüksektir (4 + 24 + 4 + 24 + 4) ve ikinci bandın sabitlendiği yer ona göre kayar. */
.bulk-order-entry-table.bulk-entry-grid thead tr:nth-child(1) th,
.bulk-order-entry-table.transfer-v2-table thead tr:nth-child(1) th {
  height: 60px;
}

.bulk-order-entry-table.bulk-entry-grid thead tr:nth-child(2) th,
.bulk-order-entry-table.transfer-v2-table thead tr:nth-child(2) th {
  top: 60px;
}

.bulk-entry-grid .bulk-entry-category-label + .bulk-entry-category-label,
.transfer-v2-table .bulk-entry-category-label + .bulk-entry-category-label {
  margin-top: 4px;
}

.bulk-entry-grid .bulk-entry-category-label > span,
.transfer-v2-table .bulk-entry-category-label > span {
  width: 84px;
}

.data-table.bulk-order-entry-table.bulk-entry-grid .bulk-entry-category-label .erp-combobox,
.data-table.bulk-order-entry-table.transfer-v2-table .bulk-entry-category-label .erp-combobox {
  flex: 1 1 0;
  max-width: none;
}

.bulk-entry-grid .bulk-entry-category-label.is-missing .erp-combobox-input,
.bulk-entry-grid .bulk-entry-category-label.is-missing > select.form-select {
  box-shadow: inset 0 0 0 2px var(--farro-danger);
}

/* Toplu giriş ve günlük aktarımdaki seçiciler tarayıcının düz açılır listesidir (data-erp-native);
   combobox girişinin ölçüsünü taşırlar: 24px yükseklik, dar ok, uzun ad üç noktayla kesilir. */
.data-table.bulk-order-entry-table select.form-select {
  width: 100%;
  min-width: 0;
  height: 24px;
  min-height: 24px;
  padding: 2px 18px 2px 4px;
  overflow: hidden;
  background-position: right 4px center;
  background-size: 10px 8px;
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.data-table.bulk-order-entry-table .bulk-entry-category-label > select.form-select {
  flex: 1 1 0;
  font-weight: 700;
}

.bulk-entry-account {
  background: var(--farro-accent-soft) !important;
}

/* Quantities never exceed three digits, so a column is only as wide as that; names that do not
   fit are cut with an ellipsis and shown in full on hover. */
.bulk-order-entry-table .bulk-entry-account,
.bulk-order-entry-table .bulk-entry-branch {
  padding: 4px;
}

.bulk-entry-branch,
.bulk-entry-cell,
.bulk-entry-total {
  width: 64px;
  min-width: 64px;
  max-width: 64px;
}

/* Taslaklı sütun üç parçalıdır (onaylı | taslak | ✓), bu yüzden daha geniştir. Taslağı olmayan
   sütunlar 64px kalır, grid'e sığan sütun sayısı düşmez. */
.bulk-entry-branch.has-drafts,
.bulk-entry-cell.has-drafts,
.bulk-entry-total.has-drafts {
  width: 112px;
  min-width: 112px;
  max-width: 112px;
}

/* Onaylı, taslak ve ✓ eşit genişliktedir. */
.bulk-entry-split {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  height: 23px;
}

/* Üçte birlik alanda üç haneli adet sığsın diye iç boşluk daralır. */
.bulk-entry-split .bulk-entry-input {
  padding: 0 4px;
}

.bulk-entry-draft,
.bulk-entry-approve {
  border: 0;
  border-left: 1px solid var(--farro-note-border);
  background: var(--farro-note-soft);
  color: var(--farro-note);
  font-size: 11px;
  font-weight: 700;
}

.bulk-entry-draft {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 0 4px;
  font-variant-numeric: tabular-nums;
}

.bulk-entry-approve {
  padding: 0;
  line-height: 1;
  cursor: pointer;
}

.bulk-entry-approve:hover {
  background: var(--farro-note-border);
}

/* Taslağı olmayan üründe taslak boş, ✓ yerine "-" durur: yalnızca bölme çizgisi kalır, amber
   zemin taslaklı ürünü öne çıkarsın diye kullanılmaz. */
.bulk-entry-draft.is-empty,
.bulk-entry-approve.is-empty,
.bulk-entry-approve.is-empty:hover {
  display: flex;
  align-items: center;
  justify-content: center;
  border-left-color: var(--farro-surface-border);
  background: transparent;
  color: var(--farro-muted);
  cursor: default;
}

/* Klavyeyle gezilen parçalar input'la aynı odak çerçevesini alır. */
.bulk-entry-draft:focus,
.bulk-entry-approve:focus {
  outline: none;
  box-shadow: inset 0 0 0 2px var(--farro-accent);
}

.bulk-entry-cell.is-draft-approved .bulk-entry-draft {
  background: transparent;
  color: var(--farro-muted);
  text-decoration: line-through;
}

.bulk-entry-cell.is-draft-approved .bulk-entry-approve {
  background: var(--farro-success-soft);
  color: var(--farro-success);
}

.bulk-entry-total-draft {
  display: block;
  color: var(--farro-note);
  font-size: 10px;
  font-weight: 700;
}

.bulk-entry-order-number.is-draft {
  color: var(--farro-note);
}

.bulk-entry-sheet-draft-dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-left: 4px;
  border-radius: 999px;
  background: var(--farro-note);
}

.bulk-entry-branch {
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 11px;
  font-weight: 600;
  color: var(--farro-muted);
}

/* The header dropdowns are the app's erp-combobox. `.data-table .erp-combobox` gives it a 260px
   floor meant for form tables; here it has to fit a 64px column and the 290px category cell, so
   the floor goes, the arrow and padding shrink and a long name ends in an ellipsis. The double
   class matters: `.data-table .erp-combobox` has the same weight and comes later in this file, so
   a single class here lost and every header dropdown stayed 260px wide. */
.data-table.bulk-order-entry-table .erp-combobox {
  width: 100%;
  min-width: 0;
}

.bulk-order-entry-table .erp-combobox-input {
  height: 24px;
  min-height: 24px;
  padding: 2px 16px 2px 4px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.bulk-order-entry-table .erp-combobox::after {
  top: 8px;
  right: 6px;
  width: 5px;
  height: 5px;
}

/* A heavier rule where one account's columns end and the next begin. */
.bulk-order-entry-table .is-group-start {
  border-left: 2px solid var(--farro-surface-border);
}

.bulk-entry-account.is-empty-slot,
.bulk-entry-branch.is-empty-slot {
  background: var(--farro-content-bg) !important;
  font-style: italic;
}

.bulk-entry-branch.has-error {
  box-shadow: inset 0 -2px 0 var(--farro-danger);
}

.bulk-entry-column-error {
  display: inline-block;
  width: 16px;
  height: 16px;
  margin-top: 3px;
  border-radius: 999px;
  background: var(--farro-danger);
  color: var(--farro-card);
  font-size: 11px;
  font-style: normal;
  font-weight: 800;
  line-height: 16px;
  text-align: center;
  cursor: help;
}

.bulk-entry-cell.is-locked {
  background: var(--farro-content-bg);
}

.bulk-entry-input:disabled {
  background: transparent;
  cursor: not-allowed;
}

/* Salt okunur geçmiş sekme: adetler okunur metin rengiyle durur, kilitli boş sütun gibi soluk görünmez. */
.bulk-entry-cell.is-readonly .bulk-entry-input:disabled {
  color: var(--farro-text);
  cursor: default;
}

.bulk-entry-readonly-notice {
  padding: 6px 12px;
  border-bottom: 1px solid var(--farro-surface-border);
  background: var(--farro-accent-soft);
  color: var(--farro-text);
  font-size: 12px;
  font-weight: 600;
}

.bulk-entry-readonly-notice[hidden] {
  display: none;
}

.bulk-entry-unit {
  margin-left: 6px;
  color: var(--farro-muted);
  font-size: 11px;
}

/* Hücrenin kendisi girdi alanıdır (Excel gibi): input kenarlıksız ve zeminsiz olarak hücreyi
   tamamen doldurur, satır gölgelendirmesi altından görünür. `tbody td` kuralı dikey padding
   verdiği için seçici o ağırlıkta yazılır. */
.bulk-order-entry-table tbody td.bulk-entry-cell {
  padding: 0;
  border-left: 1px solid var(--farro-surface-border);
}

.bulk-entry-input {
  display: block;
  width: 100%;
  height: 23px;
  margin: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: inherit;
  font-size: 12px;
  padding: 0 6px;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* Geçmiş ipucu: şubenin son siparişindeki adet; yazılan adetten ayırt edilsin diye soluk
   ve italik durur, yazmaya başlayınca kaybolur. */
.bulk-entry-input::placeholder {
  color: var(--farro-muted);
  font-style: italic;
  opacity: .6;
}

/* Başlık aksiyonları kümeler halinde: görünüm, ızgara işlemleri ve Kaydet arasında ince ayraç durur. */
.bulk-entry-actions {
  flex-wrap: wrap;
  justify-content: flex-end;
}

.bulk-entry-action-group {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.bulk-entry-action-divider {
  width: 1px;
  height: 20px;
  background: var(--farro-surface-border);
}

.bulk-entry-action-button {
  gap: 6px;
  white-space: nowrap;
}

.bulk-entry-action-button svg {
  width: 15px;
  height: 15px;
  flex: 0 0 auto;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.bulk-entry-save-button {
  min-width: 96px;
}

.bulk-entry-save-button svg {
  stroke-width: 2.4;
}

/* Geçmiş ipucu anahtarı buton yüksekliğinde bir kutuda durur; açıkken vurgu rengini alır. */
.bulk-entry-history-toggle {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 30px;
  margin: 0;
  padding: 0 10px 0 8px;
  border: 1px solid #cfc4ba;
  border-radius: 2px;
  background: #fffdfb;
  color: var(--farro-muted);
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
}

.bulk-entry-history-toggle:hover {
  border-color: #a99589;
  background: #f1e9e1;
}

.bulk-entry-history-toggle:has(.form-check-input:checked) {
  border-color: var(--farro-accent-soft);
  background: var(--farro-accent-soft);
  color: var(--farro-accent);
}

.bulk-entry-history-toggle.form-switch .form-check-input {
  float: none;
  width: 26px;
  height: 14px;
  margin: 0;
  cursor: pointer;
}

.bulk-entry-history-toggle .form-check-input:checked {
  border-color: var(--farro-accent);
  background-color: var(--farro-accent);
}

.bulk-entry-history-toggle .form-check-input:focus {
  border-color: var(--farro-accent);
  box-shadow: 0 0 0 2px var(--farro-accent-soft);
}

.bulk-entry-input:not(:disabled):hover {
  background: var(--farro-accent-soft);
}

.bulk-entry-input:focus {
  outline: none;
  background: var(--farro-card);
  box-shadow: inset 0 0 0 2px var(--farro-accent);
}

/* Seçili hücre: vurgu fareyi değil odaktaki hücreyi izler (bulk-order-entry.js), böylece
   klavyeyle gezinirken satır ve sütun hücreyle birlikte yer değiştirir. .data-table'ın satır
   hover'ı bu ızgarada kapatılır; yoksa ikinci bir satır bandı fare nerede kaldıysa orada durur.
   Örtü background-image olarak verilir ki alt grubun zemin rengi altından görünmeye devam etsin. */
.data-table.bulk-entry-grid tbody tr:hover > td {
  background-color: var(--bulk-row-bg);
}

.data-table.bulk-entry-grid tbody tr.is-current-row > td,
.data-table.bulk-entry-grid tbody tr > td.is-current-col,
.data-table.bulk-entry-grid tfoot td.is-current-col {
  background-image: linear-gradient(var(--bulk-current-tint), var(--bulk-current-tint));
}

.data-table.bulk-entry-grid tbody tr.is-current-row > td {
  box-shadow: inset 0 1px 0 var(--farro-accent), inset 0 -1px 0 var(--farro-accent);
}

.data-table.bulk-entry-grid tbody tr > td.is-current-col {
  box-shadow: inset 1px 0 0 var(--farro-accent), inset -1px 0 0 var(--farro-accent);
}

.data-table.bulk-entry-grid tbody tr.is-current-row > .bulk-entry-name-col {
  color: var(--farro-accent);
  font-weight: 700;
}

.data-table.bulk-entry-grid thead th.is-current-col {
  box-shadow: inset 0 -2px 0 var(--farro-accent);
}

.bulk-order-entry-table tfoot th,
.bulk-order-entry-table tfoot td {
  position: sticky;
  bottom: 0;
  z-index: 3;
  border-top: 1px solid var(--farro-surface-border);
  background: var(--farro-surface);
  padding: 6px 8px;
  font-size: 12px;
  font-weight: 700;
  text-align: right;
  white-space: nowrap;
}

.bulk-entry-summary-error {
  color: var(--farro-danger);
  font-size: 12px;
  font-weight: 700;
}

/* Favoriler: Kaydet'in solunda, onunla ayni yukseklikte yalnizca ikon tasiyan kare buton. Favori
   varken yildiz dolar. */
.bulk-entry-favorites-button {
  width: 30px;
  padding: 0;
}

.bulk-entry-favorites-button svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linejoin: round;
}

.bulk-entry-favorites-button.has-favorites svg {
  fill: var(--farro-note);
  stroke: var(--farro-note);
}

/* Seçili sipariş için ⋯ menüsü (Siparişi kopyala, Siparişi kaydır): düğme favori düğmesi ölçüsünde, menü
   satırları ikonlu; pasif seçenek soluk görünür, ipucu neden pasif olduğunu söyler. */
.bulk-entry-more-button {
  width: 30px;
  padding: 0;
}

.bulk-entry-more-button svg {
  width: 16px;
  height: 16px;
  fill: currentColor;
  stroke: none;
}

.bulk-entry-order-menu-list {
  min-width: 200px;
  padding: 4px;
  border: 1px solid var(--farro-surface-border);
  border-radius: 8px;
  box-shadow: 0 10px 28px rgba(44, 34, 25, .14);
  font-size: 13px;
}

.bulk-entry-order-menu-list .dropdown-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  border-radius: 6px;
  color: var(--farro-text);
  font-weight: 600;
}

.bulk-entry-order-menu-list .dropdown-item:hover,
.bulk-entry-order-menu-list .dropdown-item:focus-visible {
  background: var(--farro-accent-soft);
  color: var(--farro-text);
}

/* Bootstrap pasif öğeye pointer-events: none verir; ipucu görünsün diye geri açılır, tıklama yine çalışmaz. */
.bulk-entry-order-menu-list .dropdown-item:disabled {
  pointer-events: auto;
  cursor: not-allowed;
  color: var(--farro-muted);
  opacity: .6;
}

.bulk-entry-order-menu-list .dropdown-item svg {
  width: 15px;
  height: 15px;
  flex: 0 0 auto;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Günlük aktarımın çıktı menüsü aynı kare butonu kullanır; yazıcı ikonu dolgulu değil çizgilidir. */
.transfer-v2-print-button svg {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.bulk-favorites-dialog {
  width: min(520px, calc(100vw - 32px));
  max-width: none;
}

.bulk-favorites-hint {
  margin: 0 0 8px;
  color: var(--farro-muted);
  font-size: 12px;
}

.bulk-favorites-search {
  margin-bottom: 8px;
}

.bulk-favorites-search::-webkit-search-cancel-button {
  display: none;
  -webkit-appearance: none;
}

.bulk-favorites-list {
  max-height: 55vh;
  overflow: auto;
  border: 1px solid var(--farro-surface-border);
  border-radius: 2px;
  background: var(--farro-card);
}

.bulk-favorites-group {
  border-bottom: 1px solid var(--farro-surface);
}

.bulk-favorites-group:last-of-type {
  border-bottom: 0;
}

.bulk-favorites-account,
.bulk-favorites-branch {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 5px 10px;
  font-size: 12px;
  cursor: pointer;
}

.bulk-favorites-account {
  position: sticky;
  top: 0;
  background: var(--farro-content-bg);
  color: var(--farro-text);
  font-weight: 800;
}

.bulk-favorites-branch {
  padding-left: 30px;
  color: var(--farro-text-body);
}

.bulk-favorites-branch:hover {
  background: var(--farro-content-bg);
}

.bulk-favorites-account .form-check-input,
.bulk-favorites-branch .form-check-input {
  margin: 0;
  flex: 0 0 auto;
}

.bulk-favorites-list .table-empty {
  margin: 8px;
}

.bulk-favorites-count {
  margin-right: auto;
  color: var(--farro-muted);
  font-size: 12px;
  font-weight: 700;
}

/* Sipariş kopyalama modalı: şubeler ve günler yan yana iki liste; favoriler modalının satır
   stillerini kullanır. Dar ekranda alt alta iner. */
.bulk-copy-dialog {
  width: min(620px, calc(100vw - 32px));
  max-width: none;
}

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

.bulk-copy-section {
  min-width: 0;
}

.bulk-copy-heading {
  margin: 0 0 4px;
  color: var(--farro-muted);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.bulk-copy-columns .bulk-favorites-list {
  max-height: 45vh;
}

.bulk-copy-columns .bulk-favorites-branch {
  padding-left: 10px;
}

.bulk-copy-day-date {
  margin-left: auto;
  color: var(--farro-muted);
  font-variant-numeric: tabular-nums;
}

.bulk-copy-columns .table-empty {
  margin: 8px;
  font-size: 12px;
}

@media (max-width: 560px) {
  .bulk-copy-columns {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* A column loaded from an existing order: its account and branch are fixed names, the order
   number sits under the branch, and emptying every quantity marks it for cancellation.
   `width: 0` + `min-width: 100%`: tablo auto düzende ve içeriğe göre ölçülüyor; ad, sütun
   genişliğine katkı verirse uzun bir cari adı tek şubelik sütunu kendi boyuna şişirir. Böylece ad
   ölçüme girmez, sütunlar 64px'te kalır ve ad hücreyi doldurup üç noktayla kesilir. */
.bulk-entry-locked-name {
  display: block;
  width: 0;
  min-width: 100%;
  overflow: hidden;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Branch names in the header run bottom to top like the category spine. The height cap is what
   cuts a long name; the ellipsis then keeps its first letters readable. */
.bulk-order-entry-table thead .bulk-entry-branch.has-vertical-name {
  vertical-align: bottom;
  text-align: center;
}

.bulk-entry-branch-names {
  display: inline-flex;
  align-items: flex-end;
  gap: 2px;
}

.bulk-entry-branch-name {
  display: inline-block;
  max-height: 120px;
  padding: 0;
  overflow: hidden;
  border: 0;
  background: transparent;
  color: var(--farro-text);
  font: inherit;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
}

.bulk-entry-branch-name.is-editable {
  cursor: pointer;
}

.bulk-entry-branch-name.is-editable:hover,
.bulk-entry-branch-name.is-editable:focus-visible {
  color: var(--farro-accent);
  text-decoration: underline;
}

.bulk-entry-branch-name.bulk-entry-order-number {
  color: var(--farro-muted);
  font-size: 10px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.bulk-entry-branch.is-saved {
  box-shadow: inset 0 2px 0 var(--farro-success);
}

.bulk-entry-branch.will-cancel .bulk-entry-branch-name {
  color: var(--farro-danger);
  text-decoration: line-through;
}

.bulk-entry-branch.will-cancel .bulk-entry-order-number::after {
  content: " · iptal";
}

/* Günlük aktarım: toplu giriş ızgarası, ürün başına salt okunur üç sütunla (depo, sipariş,
   üretilecek). Gün başlığı üçünü birden kapsar. */
.transfer-v2-table .bulk-entry-branch,
.transfer-v2-table .bulk-entry-total {
  width: 92px;
  min-width: 92px;
  max-width: 92px;
}

.transfer-v2-table tbody .transfer-v2-stock {
  color: var(--farro-muted);
  font-weight: 400;
}

.transfer-v2-table tbody .transfer-v2-stock.has-stock {
  color: var(--farro-text);
  font-weight: 700;
}

.transfer-v2-table tbody .transfer-v2-stock.is-negative {
  color: var(--farro-danger);
}

/* Aktarılacak olan bu sütundur; diğer ikisinden ayrışsın. */
.transfer-v2-table .transfer-v2-produce {
  background: var(--farro-success-soft);
  color: var(--farro-success);
}

.transfer-v2-table .bulk-entry-account {
  color: var(--farro-accent);
  font-weight: 800;
  white-space: nowrap;
}

.transfer-v2-cell {
  padding: 2px 10px;
  border-left: 1px solid var(--farro-surface-border);
  color: var(--farro-text);
  font-size: 12px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  text-align: right;
}

/* Hafta sekmesi: gün sütunları ve haftalık toplam görünür, günlük sipariş sütunu gizlenir. Depo ve
   üretilecek iki görünümde ortaktır. */
.transfer-v2-table:not(.is-week) .transfer-v2-week-col,
.transfer-v2-table.is-week .transfer-v2-day-col {
  display: none;
}

.transfer-v2-table .transfer-v2-weekday {
  width: 64px;
  min-width: 64px;
  max-width: 64px;
}

.transfer-v2-table thead .transfer-v2-weekday {
  line-height: 1.15;
}

.transfer-v2-weekday-date {
  display: block;
  color: var(--farro-muted);
  font-size: 10px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}

.transfer-v2-table tbody .transfer-v2-weekday {
  color: var(--farro-muted);
  font-weight: 500;
}

.transfer-v2-table .transfer-v2-week-total {
  background: var(--farro-accent-soft);
}

/* Siparişi olan hücre çift tıklanınca siparişlerini listeler. */
.transfer-v2-table tbody .transfer-v2-cell.has-orders {
  cursor: zoom-in;
}

.transfer-v2-orders-scope,
.transfer-v2-orders-status {
  color: var(--farro-muted);
  font-size: 12px;
}

.transfer-v2-orders-wrap {
  margin-top: 8px;
}

.transfer-v2-orders-table td,
.transfer-v2-orders-table th {
  white-space: nowrap;
}

.transfer-v2-orders-table .is-number {
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.transfer-v2-orders-table tfoot th,
.transfer-v2-orders-table tfoot td {
  font-weight: 800;
}

.transfer-v2-orders-branch {
  display: block;
  color: var(--farro-muted);
  font-size: 11px;
}

/* Toplu giriş kayıt sonucu: toast değil, ekranın ortasında süreli modal. Alttaki çubuk kalan süreyi
   gösterir ve bitince modal kapanır; üzerine gelince süre durur. */
.bulk-entry-result {
  position: fixed;
  inset: 0;
  z-index: calc(var(--z-table-popover, 1200) + 100);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: rgba(44, 34, 25, .28);
}

.bulk-entry-result[hidden] {
  display: none;
}

.bulk-entry-result-dialog {
  position: relative;
  width: 360px;
  max-width: 100%;
  overflow: hidden;
  padding: 22px 22px 18px;
  border: 1px solid var(--farro-surface-border);
  border-radius: 10px;
  background: var(--farro-card);
  box-shadow: 0 18px 45px rgba(44, 34, 25, .22);
  color: var(--farro-text-body);
  text-align: center;
  outline: none;
  animation: bulk-entry-result-in .14s ease-out;
}

.bulk-entry-result-icon {
  width: 40px;
  height: 40px;
  margin: 0 auto 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  font-size: 20px;
  font-weight: 800;
}

.bulk-entry-result.is-success .bulk-entry-result-icon {
  background: var(--farro-success-soft);
  color: var(--farro-success);
}

.bulk-entry-result.is-success .bulk-entry-result-icon::before {
  content: "✓";
}

.bulk-entry-result.is-danger .bulk-entry-result-icon {
  background: color-mix(in srgb, var(--farro-danger) 12%, transparent);
  color: var(--farro-danger);
}

.bulk-entry-result.is-danger .bulk-entry-result-icon::before {
  content: "!";
}

.bulk-entry-result-title {
  margin: 0 0 6px;
  color: var(--farro-text);
  font-size: 15px;
  font-weight: 800;
}

.bulk-entry-result-message {
  margin: 0 0 16px;
  font-size: 13px;
  line-height: 1.45;
}

.bulk-entry-result-timer {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 3px;
  transform-origin: left center;
  background: var(--farro-accent);
}

.bulk-entry-result.is-success .bulk-entry-result-timer {
  background: var(--farro-success);
}

.bulk-entry-result.is-danger .bulk-entry-result-timer {
  background: var(--farro-danger);
}

.bulk-entry-result-timer.is-running {
  animation: bulk-entry-result-timer var(--bulk-result-duration, 3000ms) linear forwards;
}

.bulk-entry-result-dialog:hover .bulk-entry-result-timer {
  animation-play-state: paused;
}

@keyframes bulk-entry-result-timer {
  from { transform: scaleX(1); }
  to { transform: scaleX(0); }
}

@keyframes bulk-entry-result-in {
  from { opacity: 0; transform: translateY(6px) scale(.98); }
  to { opacity: 1; transform: none; }
}

/* Kayıt sürerken ızgara soluklaşır; form inert olduğu için tıklanamaz. */
.bulk-order-entry-page.is-saving .stock-table-panel {
  opacity: .6;
}

/* Öngörülen hücresi toplu giriş hücresi gibi girdi alanıdır: input hücreyi kenardan kenara doldurur. */
.bulk-order-entry-table.transfer-v2-table tbody td.transfer-v2-forecast {
  padding: 0;
}

/* Hafta sekmesinde öngörülen toplamı salt okunur metindir; diğer toplam hücreleriyle aynı hizada durur. */
.transfer-v2-table.is-week tbody td.transfer-v2-forecast {
  padding: 2px 10px;
}

/* .bulk-entry-input display: block verdiği için hidden özniteliği kendiliğinden gizlemez. */
.transfer-v2-table .transfer-v2-forecast .bulk-entry-input[hidden] {
  display: none;
}

/* Salt okunur Hafta sekmesi gün sekmelerinden bir boşlukla ayrılır. */
.bulk-entry-sheet-tab.is-week {
  margin-left: 12px;
}

/* Weekday sheets along the bottom of the grid, the way Excel tabs its worksheets: the sheet on
   screen is lifted onto the grid's surface, the others sit back on the strip. */
.bulk-entry-sheets {
  flex: 0 0 auto;
  display: flex;
  align-items: flex-start;
  gap: 2px;
  padding: 0 10px 6px;
  overflow-x: auto;
  border-top: 1px solid var(--farro-surface-border);
  background: var(--farro-surface);
}

.bulk-entry-sheet-tab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: -1px;
  padding: 5px 12px;
  border: 1px solid var(--farro-surface-border);
  border-top-color: transparent;
  border-radius: 0 0 7px 7px;
  background: var(--farro-content-bg);
  color: var(--farro-muted);
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
}

.bulk-entry-sheet-tab:hover {
  color: var(--farro-text);
}

/* Bugün ve geçmiş günler: italik, düzenlenebilir sekmelerden bir boşlukla ayrılır. */
.bulk-entry-sheet-tab.is-readonly {
  font-style: italic;
}

.bulk-entry-sheet-tab.is-readonly + .bulk-entry-sheet-tab:not(.is-readonly) {
  margin-left: 12px;
}

.bulk-entry-sheet-tab.is-active {
  border-top-color: var(--farro-card);
  background: var(--farro-card);
  color: var(--farro-accent);
  font-weight: 800;
  box-shadow: inset 0 -2px 0 var(--farro-accent);
}

.bulk-entry-sheet-date {
  font-variant-numeric: tabular-nums;
  font-weight: 500;
  opacity: .8;
}

.bulk-entry-sheet-count {
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--farro-accent-soft);
  color: var(--farro-accent);
  font-size: 11px;
  font-weight: 800;
  line-height: 18px;
  text-align: center;
}

.bulk-entry-sheet-count.has-error {
  background: var(--farro-danger);
  color: var(--farro-card);
}

/* Rut dağıtım planlama: bir günün sayfası sekme şeridinin üstündeki alanı doldurur. Solda siparişler,
   sağda planlama alanı yan yana durur; ikisi de kendi içinde kayar. Asıl iş sağda (sürükle-bırak) olduğu için
   sol liste dar tutulur: irsaliye no ve tutar içerik kadar, cari kalan yer kadar geniştir.
   Klasik ERP görünümü: kart, köşe ve gölge yoktur; paneller birbirine bitişiktir, aralarında ince bir ayırıcı
   çubuk (sayfa zemini) görünür. */
.route-distribution-sheet {
  flex: 1 1 auto;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(280px, 26%) minmax(0, 1fr);
  gap: 3px;
  padding: 0;
  overflow: hidden;
  background: var(--farro-surface-border);
}

.route-distribution-sheet[hidden] {
  display: none;
}

.route-order-panel,
.route-driver-panel {
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--farro-card);
}

/* Şoför paneli ikiye bölünür: üst yarı sabah, alt yarı akşam rutu. Yarılar yüksekliği eşit paylaşır. */
.route-shift-halves {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.route-shift-half {
  flex: 1 1 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.route-shift-half + .route-shift-half {
  border-top: 3px solid var(--farro-surface-border);
}

.route-shift-half-header {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 22px;
  padding: 1px 8px;
  border-bottom: 1px solid var(--farro-surface-border);
  background: var(--farro-content-bg);
}

.route-shift-half[data-route-shift="morning"] .route-shift-half-header {
  box-shadow: inset 3px 0 0 var(--farro-note);
}

.route-shift-half[data-route-shift="evening"] .route-shift-half-header {
  box-shadow: inset 3px 0 0 var(--farro-accent);
}

/* Yarının içinde şoförler yan yana sütunlardır; sığmayınca yarı yatay kayar, iki yarı birlikte kayar.
   Her sütun kendi ızgarasında dikey kayar. */
.route-driver-lanes {
  flex: 1 1 auto;
  min-height: 0;
  display: grid;
  grid-auto-columns: minmax(295px, 1fr);
  grid-auto-flow: column;
  grid-template-rows: minmax(0, 1fr);
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior: none;
}

.route-driver-shift {
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition: background-color .12s ease;
}

.route-driver-shift + .route-driver-shift {
  border-left: 1px solid var(--farro-surface-border);
}

.route-driver-lane-header {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 24px;
  padding: 1px 4px 1px 8px;
  border-bottom: 1px solid var(--farro-surface-border);
  background: var(--farro-surface);
}

/* Boş sütunun tamamı bırakma alanıdır; ızgara sütunun altına kadar uzar. */
.route-driver-shift .route-order-grid-wrap {
  flex: 1 1 auto;
}

.route-group-row-summary {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  margin-left: auto;
  color: var(--farro-muted);
  font-size: 11px;
  white-space: nowrap;
}

.route-group-row-total {
  color: var(--farro-text);
  font-variant-numeric: tabular-nums;
  font-weight: 800;
}

/* Şoför adı ve sayısı tek satırdadır; başlık şeridi alçak kalır. */
.route-driver-name {
  min-width: 0;
  display: flex;
  align-items: baseline;
  gap: 6px;
  line-height: 1.25;
}

.route-driver-name strong {
  flex: 0 0 auto;
  max-width: 70%;
  overflow: hidden;
  color: var(--farro-text);
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Yer daralınca önce sayı ve toplam kesilir, şoför adı okunur kalır. */
.route-driver-name > span {
  flex: 0 100 auto;
  min-width: 0;
  overflow: hidden;
  color: var(--farro-muted);
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.route-driver-shift-title {
  padding: 0 6px;
  border-radius: 2px;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .03em;
  text-transform: uppercase;
  white-space: nowrap;
}

.route-driver-shift-title.is-morning {
  background: var(--farro-note-soft);
  color: var(--farro-note);
}

.route-driver-shift-title.is-evening {
  background: var(--farro-accent-soft);
  color: var(--farro-accent);
}

.route-driver-shift-actions {
  flex: 0 0 auto;
  display: inline-flex;
  gap: 4px;
  margin-left: auto;
}

.route-shift-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  padding: 0 6px;
  border: 1px solid var(--farro-surface-border);
  border-radius: 2px;
  background: linear-gradient(var(--farro-card), var(--farro-surface));
  color: var(--farro-text);
  font-size: 10.5px;
  font-weight: 700;
  white-space: nowrap;
}

.route-shift-action:hover:not(:disabled) {
  border-color: var(--farro-accent);
  color: var(--farro-accent);
}

.route-shift-action:disabled {
  opacity: .5;
}

.route-shift-action svg {
  width: 13px;
  height: 13px;
  flex: 0 0 auto;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.route-driver-shift.is-drop-target,
.route-order-panel.is-drop-target {
  background: var(--farro-note-soft);
  box-shadow: inset 0 0 0 2px var(--farro-note-border);
}

/* Rut ızgarasındaki sipariş grubu; sıra numarasını sayaç yazar, böylece taşınan grupla birlikte güncellenir. */
.route-driver-grid {
  counter-reset: route-seq;
}

.route-order-card {
  counter-increment: route-seq;
}

.route-order-card .route-card-seq::before {
  content: counter(route-seq);
}

.route-card-seq {
  width: 22px;
  min-width: 22px;
  color: var(--farro-muted);
  font-size: 11px;
}

/* Yazdırılacak irsaliyeyi seçen kutu; satırı açıp kapatmaz. */
.route-card-select-col {
  width: 24px;
  min-width: 24px;
  padding-right: 0 !important;
  padding-left: 2px !important;
  text-align: center;
}

.route-print-check {
  width: 14px;
  height: 14px;
  margin: 0;
  vertical-align: middle;
  cursor: pointer;
}

.route-print-check:checked,
.route-print-check[type=checkbox]:indeterminate {
  border-color: var(--farro-accent);
  background-color: var(--farro-accent);
}

.route-print-check:focus {
  border-color: var(--farro-accent);
  box-shadow: 0 0 0 2px var(--farro-accent-soft);
}

/* Dar şoför sütununda irsaliye · cari hücresi kalan yer kadar geniştir; tutar içerik kadardır. Numara hiç
   kesilmez ve hücrenin en dar genişliğini belirler. Cari ve şube ise "width: 0; min-width: 100%" ile hücrenin
   genişliğine katılmaz, hücreyi doldurur ve üç noktayla kesilir; adın tamamı satırın title'ındadır. */
.route-card-order-col {
  width: 100%;
}

.route-card-amount-col {
  width: 1%;
}

.route-card-order-col .route-order-account,
.route-card-order-col .route-order-branch {
  display: block;
  width: 0;
  min-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.route-card-order-col .route-order-account {
  color: var(--farro-muted);
  font-size: 11px;
}

/* Numara ve rozetler aynı satırdadır; yer kalmazsa rozetler alt satıra iner. */
.route-card-number-line {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px 6px;
}

.route-card-number-line > strong {
  white-space: nowrap;
}

/* İrsaliye ve teslimat rozetleri. */
.route-card-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
}

.route-card-badges:empty {
  display: none;
}

.route-slip-badge {
  padding: 0 5px;
  border-radius: 2px;
  background: var(--farro-accent-soft);
  color: var(--farro-accent);
  font-size: 10px;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
}

.route-slip-badge.is-reprint {
  background: var(--farro-note-soft);
  color: var(--farro-note);
}

.route-slip-badge.is-dispatched {
  background: var(--farro-success-soft);
  color: var(--farro-success);
}

.route-slip-badge.is-delivered {
  background: var(--farro-success);
  color: var(--farro-card);
}

.route-slip-badge.is-not-delivered {
  background: var(--farro-danger);
  color: var(--farro-card);
}

/* İrsaliyesi kesilmiş sipariş yerinde kalır: sürüklenmez ama kalemleri yine açılır. */
.route-order-card.is-locked .route-order-group-row > td {
  background: var(--farro-content-bg);
  cursor: pointer;
}

.route-order-card.is-locked .route-order-group-row > td:first-child {
  box-shadow: inset 3px 0 0 var(--farro-success);
}

.route-order-card.is-locked.is-expanded .route-order-group-row > td {
  background: var(--farro-accent-soft);
}

.route-order-group-row.is-dragging > td {
  opacity: .4;
}

/* İstek sürerken grup soluk durur; reddedilirse eski yerine döner. */
.route-order-card.is-saving {
  pointer-events: none;
}

.route-order-card.is-saving > tr > td {
  opacity: .6;
}

.route-drop-marker > tr > td {
  height: 0;
  padding: 0 !important;
  border-top: 3px solid var(--farro-accent);
}

.route-driver-lane-empty {
  color: var(--farro-muted);
  font-size: 11.5px;
}

.route-shift-empty-row > tr > td {
  padding: 6px;
  border-bottom: 1px solid var(--farro-surface-border);
  font-style: italic;
  text-align: center;
}

/* Panel başlığı klasik pencere başlık çubuğu gibi: alçak, düz, alt çizgili. */
.route-order-toolbar {
  flex: 0 0 auto;
  min-height: 26px;
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: space-between;
  gap: 4px 10px;
  padding: 1px 4px 1px 8px;
  border-bottom: 1px solid var(--farro-surface-border);
  background: linear-gradient(var(--farro-content-bg), var(--farro-surface));
}

/* Başlık şeridi tek satırdır: dar panelde sayılar kesilir, düğmeler yerinde kalır. */
.route-order-toolbar-title {
  min-width: 0;
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 6px 8px;
  overflow: hidden;
  white-space: nowrap;
}

.route-order-toolbar-actions {
  flex: 0 0 auto;
}

.route-order-toolbar-title h2 {
  margin: 0;
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: .03em;
  text-transform: uppercase;
  color: var(--farro-text);
}

/* Sayılar rozet değil, başlığın yanında düz metindir; aralarını ince çizgi ayırır. */
.route-order-count {
  padding-left: 8px;
  border-left: 1px solid var(--farro-surface-border);
  color: var(--farro-accent);
  font-size: 11px;
  font-weight: 700;
}

.route-order-toolbar-actions {
  display: flex;
  gap: 2px;
}

.route-order-toolbar-actions .erp-secondary-button {
  min-height: 26px;
  padding: 2px 9px;
  font-size: 12px;
}

/* Tümünü aç / kapat: dar sol panelde yer kaplamasın diye yalnızca ikon. */
.route-icon-button {
  width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 1px solid var(--farro-surface-border);
  border-radius: 2px;
  background: linear-gradient(var(--farro-card), var(--farro-surface));
  color: var(--farro-muted);
}

.route-icon-button:hover,
.route-icon-button:focus-visible {
  border-color: var(--farro-accent);
  color: var(--farro-accent);
}

.route-icon-button svg {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Sol liste: tutar içerik kadar, irsaliye · cari hücresi kalan yer kadar. Cari numaranın altındadır; uzun
   ad üç noktayla kesilir (max-width: 0 hücrenin tabloyu genişletmesini engeller, adın tamamı title'dadır). */
.route-order-panel .route-order-amount-col {
  width: 1%;
  white-space: nowrap;
}

.route-order-panel .route-order-number-col {
  width: 100%;
  max-width: 0;
}

.route-order-panel td.route-order-number-col > strong,
.route-order-panel td.route-order-number-col > .route-order-account {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.route-order-panel td.route-order-number-col > .route-order-account {
  color: var(--farro-muted);
  font-size: 11px;
  font-weight: 600;
}

/* Şube kesilmez: dar panelde gerekirse alt satıra kayar. */
.route-order-panel td.route-order-number-col > .route-order-branch {
  white-space: normal;
  overflow-wrap: anywhere;
}

.route-order-grid-wrap {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  overscroll-behavior: none;
}

/* Excel benzeri gruplu ızgara: ince hücre çizgileri, yapışkan başlık ve toplam satırı. */
.route-order-grid {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 12px;
  color: var(--farro-text-body);
}

.route-order-grid > thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  padding: 2px 6px;
  border-bottom: 1px solid var(--farro-surface-border);
  background: var(--farro-surface);
  color: var(--farro-muted);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .04em;
  text-align: left;
  text-transform: uppercase;
  white-space: nowrap;
}

.route-order-grid > tfoot th,
.route-order-grid > tfoot td {
  position: sticky;
  bottom: 0;
  z-index: 2;
  padding: 3px 6px;
  border-top: 1px solid var(--farro-surface-border);
  background: var(--farro-surface);
  font-weight: 800;
  text-align: left;
  white-space: nowrap;
}

.route-order-grid .numeric-col {
  font-variant-numeric: tabular-nums;
  text-align: right;
  white-space: nowrap;
}

/* Excel kılavuz çizgileri: satırın son hücresi dışında her hücre sağından ince çizgiyle ayrılır. Kalem
   tablosunun kendi çizgileri vardır; seçici yalnızca dış ızgarayı tutar. */
.route-order-grid > * > tr > :not(:last-child) {
  border-right: 1px solid var(--farro-surface-border);
}

.route-order-group-row > td {
  padding: 2px 6px;
  border-bottom: 1px solid var(--farro-surface-border);
  vertical-align: middle;
  cursor: grab;
}

.route-order-group-row:hover > td {
  background: var(--farro-content-bg);
}

.route-order-group-row:focus-visible {
  outline: 2px solid var(--farro-accent);
  outline-offset: -2px;
}

.route-order-group.is-expanded .route-order-group-row > td {
  background: var(--farro-accent-soft);
  border-bottom-color: transparent;
}

.route-order-group-row .status-badge {
  margin-left: 6px;
}

/* Siparişin durum noktaları, grup açılınca okun altındaki hücrede alt alta durur; satır boyanmaz, durumlar
   çoğaldıkça renkler karışmasın diye her durum kendi noktasıdır. Hücre kalemler kadar uzun olduğundan noktalar
   kapalı satırın yüksekliğini değiştirmez. Renkler yalnızca burada verilir, başlıktaki açıklama da aynı
   sınıfları kullanır. Durum listesi: Models/RouteDistribution/RouteOrderMarker.cs. */
.route-order-detail-row > td.route-order-markers-cell {
  padding: 6px 0 !important;
  vertical-align: top;
  text-align: center;
}

.route-order-markers-cell .route-marker {
  display: block;
  margin: 0 auto 5px;
}

.route-marker {
  --route-marker-color: var(--farro-muted);
  flex: 0 0 auto;
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: var(--route-marker-color);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--route-marker-color) 22%, transparent);
}

.route-marker.is-missing-warehouse {
  --route-marker-color: var(--farro-danger);
}

/* Klasik ERP kabuğu: sayfa içerik alanının tamamını kullanır; kenar boşluğu, köşe ve gölge yoktur. Başlık,
   pencere başlık şeridi gibi alçaktır: sayfa adı ve yanında "i" düğmesi. */
body:has(.route-distribution-page) .app-content {
  padding: 0;
}

body:has(.route-distribution-page) .content-surface {
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.route-distribution-page.stock-page {
  height: 100vh;
}

.route-distribution-page .stock-page-header {
  min-height: 0;
  padding: 2px 8px;
  background: linear-gradient(var(--farro-card), var(--farro-surface));
}

.route-distribution-page .stock-page-header h1 {
  font-size: 14px;
}

/* Gün sekmeleri köşesiz ve alçak; Excel'in sayfa sekmeleri gibi. */
.route-distribution-page .bulk-entry-sheets {
  padding: 0 4px 3px;
}

.route-distribution-page .bulk-entry-sheet-tab {
  padding: 2px 10px;
  border-radius: 0;
}

.route-page-title {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* "i" kutusu başlığın yanında açılır; "?" gibi sağa değil sola yaslanır. */
.route-info .route-legend-panel {
  right: auto;
  left: 0;
  width: 440px;
}

/* .route-legend-panel ul madde işaretini kaldırır; bu liste madde işaretli kalır. */
.route-info .route-info-list li {
  display: list-item;
}

.route-info .route-info-list {
  display: grid;
  gap: 6px;
  margin: 0;
  padding-left: 16px;
  list-style: disc;
  color: var(--farro-text-body);
  font-size: 12px;
  line-height: 1.45;
}

/* Başlıktaki "?" düğmesi: durum noktalarının anlamını açılır bir kutuda gösterir. */
.route-legend {
  position: relative;
  flex: 0 0 auto;
}

.route-legend > summary {
  width: 20px;
  height: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--farro-surface-border);
  border-radius: 2px;
  background: var(--farro-card);
  color: var(--farro-muted);
  font-size: 12px;
  font-weight: 800;
  list-style: none;
  cursor: pointer;
}

.route-legend > summary::-webkit-details-marker {
  display: none;
}

.route-legend > summary:hover,
.route-legend[open] > summary {
  border-color: var(--farro-accent);
  color: var(--farro-accent);
}

.route-legend-panel {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: var(--z-table-popover, 1200);
  width: 320px;
  max-width: calc(100vw - 32px);
  padding: 10px 12px;
  border: 1px solid var(--farro-surface-border);
  border-radius: 2px;
  background: var(--farro-card);
  box-shadow: 0 6px 16px rgba(44, 34, 25, .14);
}

.route-legend-panel h2 {
  margin: 0 0 6px;
  color: var(--farro-text);
  font-size: 12px;
  font-weight: 800;
}

.route-legend-panel ul {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.route-legend-panel li {
  display: grid;
  grid-template-columns: 12px minmax(0, 1fr);
  align-items: start;
  gap: 8px;
}

.route-legend-panel li .route-marker {
  margin-top: 4px;
}

.route-legend-panel strong {
  display: block;
  color: var(--farro-text);
  font-size: 12px;
}

.route-legend-panel p {
  margin: 1px 0 0;
  color: var(--farro-muted);
  font-size: 11.5px;
  line-height: 1.4;
}

.route-order-toggle-col {
  width: 22px;
  min-width: 22px;
  padding-right: 0 !important;
  padding-left: 3px !important;
}

.route-order-chevron {
  display: inline-flex;
  width: 16px;
  height: 16px;
  color: var(--farro-muted);
  transition: transform .15s ease;
}

.route-order-chevron svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.route-order-group.is-expanded .route-order-chevron {
  color: var(--farro-accent);
  transform: rotate(90deg);
}

.route-order-account {
  font-weight: 600;
}

.route-order-branch {
  display: block;
  color: var(--farro-muted);
  font-size: 11px;
}

/* Açılan grubun kalemleri boşluksuz, ızgaranın devamı gibi durur; soldaki boş hücre Excel'in anahat
   çubuğu gibi grubun rengini taşır. */
.route-order-detail-row > td {
  padding: 0;
  border-bottom: 2px solid var(--farro-surface-border);
  background: var(--farro-card);
}

.route-order-detail-row > td.route-order-toggle-col {
  background: var(--farro-accent-soft);
}

/* Kalemler Excel sayfası gibi: her hücre çizgili, satırlar sıkı, solda satır numarası. */
.route-order-lines {
  width: 100%;
  border: 0;
  border-collapse: collapse;
  background: var(--farro-card);
  font-size: 11.5px;
}

.route-order-lines th,
.route-order-lines td {
  height: 22px;
  padding: 1px 6px;
  border: 1px solid var(--farro-surface-border);
  white-space: nowrap;
}

/* İrsaliye miktarı hücrede düzeltilir; input hücreyi büyütmez. */
.route-line-quantity {
  width: 72px;
  height: 18px;
  padding: 0 4px;
  border: 1px solid var(--farro-surface-border);
  border-radius: 0;
  background: var(--farro-card);
  color: inherit;
  font: inherit;
  text-align: right;
}

.route-line-quantity:focus {
  outline: none;
  border-color: var(--farro-accent);
  box-shadow: 0 0 0 2px var(--farro-accent-soft);
}

.route-order-lines-actions {
  display: flex;
  justify-content: flex-end;
  padding: 3px 6px;
}

/* Taslağın "Yeni kalem" satırı: kapalıyken yalnızca düğme görünür, açılınca alanlar kalem tablosunun kolonlarına
   oturur. Alanlar hücrenin genişliğini kullanır, tabloyu genişletmez. */
.route-line-new > * {
  border-top: 1px solid var(--farro-surface-border);
  border-bottom: 0;
}

.route-line-new:not(.is-open) [data-route-new-field],
.route-line-new.is-open .route-line-new-open {
  display: none;
}

.route-line-new-open,
.route-line-new-cancel,
.route-line-new-add {
  height: 18px;
  padding: 0 6px;
  border: 0;
  background: transparent;
  color: var(--farro-accent);
  font: inherit;
  font-weight: 700;
}

.route-line-new-open:hover,
.route-line-new-add:hover {
  text-decoration: underline;
}

.route-line-new-cancel {
  color: var(--farro-muted);
  font-size: 14px;
  line-height: 1;
}

.route-line-add-stock {
  width: 100%;
  min-width: 0;
  height: 18px;
  padding: 0 4px;
  border: 1px solid var(--farro-surface-border);
  background: var(--farro-card);
  color: inherit;
  font: inherit;
}

.route-line-add-stock:focus {
  outline: none;
  border-color: var(--farro-accent);
  box-shadow: 0 0 0 2px var(--farro-accent-soft);
}

/* Dış ızgaranın çizgisiyle çift çizgi olmasın. */
.route-order-lines tr > :first-child {
  border-left: 0;
}

.route-order-lines tr > :last-child {
  border-right: 0;
}

.route-order-lines thead tr > * {
  border-top: 0;
}

.route-order-lines tbody tr:last-child > * {
  border-bottom: 0;
}

.route-order-lines thead th {
  background: var(--farro-surface);
  color: var(--farro-muted);
  font-size: 10.5px;
  font-weight: 800;
  text-align: left;
  text-transform: uppercase;
}

.route-order-lines tbody tr:hover > td {
  background: var(--farro-content-bg);
}

/* Satır numarası Excel'deki gibi gri başlık hücresidir. */
.route-order-lines .route-line-number-col {
  width: 30px;
  min-width: 30px;
  background: var(--farro-surface);
  color: var(--farro-muted);
  font-size: 10.5px;
  font-weight: 700;
  text-align: center;
}

.route-order-lines .numeric-col {
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.route-order-stock-name {
  max-width: 220px;
  overflow: hidden;
  text-overflow: ellipsis;
}

@media (max-width: 900px) {
  .route-distribution-sheet {
    grid-template-columns: minmax(0, 1fr);
    overflow: auto;
  }
}

/* "Rut seç": sürükle-bırakın dokunmatik karşılığı. Fareli masaüstünde satır sürüklendiği için gizlidir; telefonda
   ve dokunmatik ekranda (tablet) açılan irsaliyenin altında görünür. */
.route-move-button {
  display: none;
  margin-right: auto;
}

@media (max-width: 640px), (pointer: coarse) {
  .route-move-button {
    display: inline-flex;
  }
}

/* Rut seçme penceresi: başlıkta irsaliye ve cari, altında her şoför için sabah ve akşam rutu, en altta
   "Listeye geri al" ve "Vazgeç". Dokunma hedefleri 44px. */
.route-move-dialog {
  width: min(420px, calc(100vw - 16px));
  max-height: calc(100dvh - 32px);
  padding: 0;
  border: 1px solid var(--farro-surface-border);
  border-radius: 10px;
  background: var(--farro-card);
  color: var(--farro-text-body);
  box-shadow: 0 18px 45px rgba(44, 34, 25, .22);
}

.route-move-dialog[open] {
  display: flex;
  flex-direction: column;
}

.route-move-dialog::backdrop {
  background: rgba(44, 34, 25, .38);
}

.route-move-header {
  padding: 12px 14px 10px;
  border-bottom: 1px solid var(--farro-surface-border);
}

.route-move-header h2 {
  margin: 0;
  color: var(--farro-text);
  font-size: 16px;
  font-weight: 800;
}

.route-move-header p {
  margin: 2px 0 0;
  overflow: hidden;
  color: var(--farro-muted);
  font-size: 13px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.route-move-targets {
  min-height: 0;
  overflow-y: auto;
  padding: 4px 14px;
}

.route-move-driver {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
  padding: 8px 0 10px;
}

.route-move-driver + .route-move-driver {
  border-top: 1px solid var(--farro-surface-border);
}

.route-move-driver > strong {
  grid-column: 1 / -1;
  color: var(--farro-text);
  font-size: 14px;
}

.route-move-option {
  min-height: 44px;
  padding: 0 10px;
  border: 1px solid var(--farro-surface-border);
  border-radius: 7px;
  background: var(--farro-card);
  color: var(--farro-text);
  font-size: 14px;
  font-weight: 700;
}

.route-move-option.is-morning {
  box-shadow: inset 4px 0 0 var(--farro-note);
}

.route-move-option.is-evening {
  box-shadow: inset 4px 0 0 var(--farro-accent);
}

.route-move-option:disabled {
  background: var(--farro-content-bg);
  color: var(--farro-muted);
}

.route-move-option.is-unassign {
  border-color: var(--farro-accent);
  color: var(--farro-accent);
}

.route-move-option.is-cancel {
  background: var(--farro-content-bg);
}

.route-move-option[hidden] {
  display: none;
}

.route-move-footer {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  gap: 6px;
  padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--farro-surface-border);
}

/* --- Rut dağıtım planlama: telefon --------------------------------------------------------------
   Masaüstü düzeni değişmez; aşağıdakiler yalnızca 640px altında geçerlidir (ViewData["MobileReady"]):
   - Yan menü gizlenir, üstte ortak çubuk (_MobileTopNav) durur; kabuk ekran genişliğine iner ve sayfa gövdeyle
     birlikte kayar. Paneller kendi içinde kaymaz, her şey alt alta dizilir.
   - Gün sekmeleri Excel'deki gibi altta değil, üstte yapışık durur; gün değiştirmek için aşağı inmek gerekmez.
   - Önce irsaliye taslakları, sonra sabah ve akşam rutları; her yarıda şoförler yan yana değil alt alta.
   - Sürükle-bırak dokunmatik ekranda çalışmaz: satıra dokununca kalemler açılır, altındaki "Rut seç" şoför ve
     rutu sorar. Kalem tablosunda ürün kodu ve birim fiyat gizlenir, ürün adı sarar.
   - Girişler 16px: iOS daha küçük yazılı kutuya odaklanınca sayfayı yakınlaştırır. */
@media (max-width: 640px) {
  body:has(.route-distribution-page) .app-shell {
    display: block;
    min-width: 0;
    height: auto;
  }

  body:has(.route-distribution-page) .app-sidebar {
    display: none;
  }

  body:has(.route-distribution-page) .app-main,
  body:has(.route-distribution-page) .app-content,
  body:has(.route-distribution-page) .content-surface {
    height: auto;
    overflow: visible;
  }

  .route-distribution-page.stock-page,
  .route-distribution-page .stock-table-panel,
  .route-distribution-sheet,
  .route-order-panel,
  .route-driver-panel,
  .route-shift-halves,
  .route-shift-half,
  .route-driver-lanes,
  .route-driver-shift,
  .route-order-grid-wrap {
    height: auto;
    min-height: 0;
    overflow: visible;
  }

  .route-distribution-page.stock-page {
    padding-bottom: env(safe-area-inset-bottom);
  }

  /* Ortak 768px kuralı başlığı dikey diziyor; burada başlık ve "?" tek satırda kalır. Açıklama kutuları başlık
     genişliğinde açılır: "i" başlığın ortasında kaldığı için kendi yanında açılsaydı ekrandan taşardı. */
  .route-distribution-page .stock-page-header {
    position: relative;
    flex-direction: row;
    align-items: center;
    padding: 8px 10px;
  }

  .route-distribution-page .stock-page-header h1 {
    font-size: 16px;
  }

  .route-legend > summary {
    width: 32px;
    height: 32px;
    font-size: 15px;
  }

  .route-legend {
    position: static;
  }

  .route-legend-panel,
  .route-info .route-legend-panel {
    right: 10px;
    left: 10px;
    width: auto;
    max-width: none;
  }

  /* Gün sekmeleri üstte, kaydırırken yapışık; yatayda kayar. */
  .route-distribution-page .bulk-entry-sheets {
    position: sticky;
    top: 0;
    z-index: 5;
    order: -1;
    gap: 4px;
    padding: 6px 8px;
    border-top: 0;
    border-bottom: 1px solid var(--farro-surface-border);
  }

  .route-distribution-page .bulk-entry-sheet-tab {
    min-height: 40px;
    margin-top: 0;
    padding: 0 12px;
    border-top-color: var(--farro-surface-border);
    border-radius: 7px;
    font-size: 13px;
  }

  .route-distribution-sheet {
    display: flex;
    flex-direction: column;
  }

  .route-distribution-sheet[hidden] {
    display: none;
  }

  .route-order-toolbar {
    min-height: 44px;
    padding: 4px 6px 4px 10px;
  }

  .route-order-toolbar-title h2 {
    font-size: 13px;
  }

  .route-order-count {
    font-size: 12px;
  }

  .route-icon-button {
    width: 36px;
    height: 36px;
  }

  .route-icon-button svg {
    width: 18px;
    height: 18px;
  }

  .route-shift-half {
    flex: 0 0 auto;
  }

  .route-shift-half-header {
    min-height: 36px;
    padding: 4px 10px;
  }

  .route-driver-shift-title {
    font-size: 12px;
  }

  .route-group-row-summary {
    font-size: 12px;
  }

  .route-driver-lanes {
    display: block;
  }

  .route-driver-shift + .route-driver-shift {
    border-top: 3px solid var(--farro-content-bg);
    border-left: 0;
  }

  .route-driver-lane-header {
    min-height: 44px;
    padding: 4px 6px 4px 10px;
  }

  .route-driver-name strong {
    font-size: 14px;
  }

  .route-driver-name > span {
    font-size: 12px;
  }

  .route-shift-action {
    min-height: 36px;
    padding: 0 12px;
    border-radius: 6px;
    font-size: 13px;
  }

  .route-shift-action svg {
    width: 16px;
    height: 16px;
  }

  /* Sayfa gövdeyle kaydığı için başlık ve toplam satırı yapışmaz; yapışık gün sekmelerinin altına girerlerdi. */
  .route-order-grid > thead th,
  .route-order-grid > tfoot th,
  .route-order-grid > tfoot td {
    position: static;
  }

  .route-order-grid {
    font-size: 14px;
  }

  .route-order-grid > thead th {
    font-size: 11px;
  }

  .route-order-group-row > td {
    padding: 8px 6px;
    cursor: pointer;
  }

  .route-order-account,
  .route-card-order-col .route-order-account,
  .route-order-panel td.route-order-number-col > .route-order-account,
  .route-order-branch {
    font-size: 12.5px;
  }

  .route-slip-badge {
    padding: 1px 6px;
    font-size: 11.5px;
  }

  .route-card-select-col {
    width: 36px;
    min-width: 36px;
  }

  .route-print-check {
    width: 20px;
    height: 20px;
  }

  .route-order-toggle-col {
    width: 28px;
    min-width: 28px;
  }

  .route-shift-empty-row > tr > td {
    padding: 12px 6px;
    font-size: 13px;
  }

  /* Telefonda sürükleme yoktur; boş rut yalnızca "İrsaliye atanmadı" der. */
  .route-drag-hint {
    display: none;
  }

  /* Kalemler: ürün kodu ve birim fiyat gizlenir; ürün adı kesilmez, alt satıra sarar. */
  .route-order-lines {
    font-size: 13px;
  }

  .route-order-lines tr > :nth-child(2),
  .route-order-lines tr > :nth-child(6) {
    display: none;
  }

  .route-order-lines th,
  .route-order-lines td {
    height: 40px;
  }

  .route-order-lines td.route-order-stock-name {
    max-width: none;
    white-space: normal;
  }

  .route-line-quantity {
    width: 84px;
    height: 34px;
    font-size: 16px;
  }

  .route-order-lines-actions {
    gap: 8px;
    padding: 6px;
    flex-wrap: wrap;
  }

  .route-line-add-stock {
    height: 34px;
    font-size: 16px;
  }

  .route-line-new-open,
  .route-line-new-cancel,
  .route-line-new-add {
    height: 34px;
  }
}

/* A form page is not the full height table screen above. That shell clips at the fold on purpose
   because its table scrolls inside its own container; a form has no inner scroll region, so the
   page itself has to scroll instead. */
.stock-page-scroll {
  height: auto;
  min-height: calc(100vh - 36px);
  overflow: visible;
}

.stock-page-scroll .stock-page-header {
  position: sticky;
  top: 0;
  z-index: 3;
}

.stock-form-page {
  flex: 1 1 auto;
  min-height: 0;
  padding: 12px 16px;
}

/* Outside a modal there is no Bootstrap .modal-footer to supply the flex box, so the page form
   states it itself and keeps the save button reachable without scrolling back down. */
.stock-form-page .warehouse-modal-footer {
  display: flex;
  align-items: center;
  position: sticky;
  bottom: 0;
  margin-top: 12px;
  border-top: 1px solid #ded7d0;
  background: #fffaf5;
}

/* createManagedTable dışındaki tablolara eklenen "Excel indir" çubuğu (window.attachTableCsv). */
.table-csv-bar {
  display: flex;
  justify-content: flex-end;
  margin: 0 0 6px;
}

/* Panel başlığına oturan buton: başlık solda kalır, sayaç ve buton sağda yan yana durur. Otomatik
   kenar boşluğu panelin justify-content değerinden önce uygulanır; o yüzden onu ezmeye gerek yoktur. */
.has-table-csv {
  gap: 10px;
}

/* :first-child özgüllüğü artırır; panel başlıklarının "h2 { margin: 0 }" kuralı dosyada sonra gelir. */
.has-table-csv > h2:first-child,
.has-table-csv > h3:first-child {
  margin-right: auto;
}

.table-action-button.table-csv-inline {
  min-height: 22px;
  padding: 0 8px;
  font-size: 11px;
}

@media print {
  .table-csv-bar,
  .table-csv-inline {
    display: none !important;
  }
}

.erp-primary-button,
.erp-secondary-button,
.table-action-button {
  min-height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 2px;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  text-decoration: none;
}

.erp-primary-button {
  border: 1px solid #7f2f24;
  color: #fff;
  background: #8f372b;
  padding: 0 14px;
}

.erp-primary-button:hover,
.erp-primary-button:focus {
  border-color: #69251d;
  background: #7f2f24;
}

.erp-secondary-button,
.table-action-button {
  border: 1px solid #cfc4ba;
  color: #4c403a;
  background: #fffdfb;
  padding: 0 10px;
}

.erp-secondary-button:hover,
.erp-secondary-button:focus,
.table-action-button:hover,
.table-action-button:focus {
  border-color: #a99589;
  background: #f1e9e1;
}

.erp-secondary-button:disabled,
.table-action-button:disabled,
.erp-secondary-button.is-disabled {
  cursor: not-allowed;
  color: #9b8f87;
  background: #f4f0ec;
  border-color: #ddd5ce;
}

.erp-secondary-button.is-disabled {
  pointer-events: none;
}

/* Birincil düğme de pasifken pasif görünür; aksi halde seçim yokken "Taslak oluştur" tıklanabilir sanılır. */
.erp-primary-button:disabled,
.erp-primary-button:disabled:hover,
.erp-primary-button:disabled:focus {
  cursor: not-allowed;
  color: #9b8f87;
  background: #f4f0ec;
  border-color: #ddd5ce;
}

.inline-action-form {
  margin: 0;
}

.erp-table-action-button {
  min-width: 116px;
  white-space: nowrap;
}

.stock-table-panel {
  flex: 1 1 auto;
  display: flex;
  min-height: 0;
  flex-direction: column;
  overflow: hidden;
}

.table-summary {
  flex: 0 0 auto;
  min-height: 38px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 6px 10px;
  border-bottom: 1px solid #ded7d0;
  color: #554741;
  background: #f7f1ea;
  font-size: 12px;
}

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

.table-selection-toolbar {
  flex: 0 0 auto;
  min-height: 38px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 6px 10px;
  border-bottom: 1px solid #ded7d0;
  color: #554741;
  background: #fffaf5;
  font-size: 12px;
}

.table-selection-toolbar strong {
  color: #3f342f;
}

.table-selection-actions {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
}

.data-table-wrap {
  position: relative;
  overflow: auto;
  overscroll-behavior: none;
}

.managed-table-shell {
  flex: 1 1 auto;
  min-height: 0;
  max-height: none;
}

/* The candidate list can run to a hundred rows; left to grow it pushes the note's own lines off
   the bottom of a page the user is still filling in. It scrolls in its own box instead. Placed
   after .managed-table-shell on purpose: that rule sets max-height: none at the same specificity,
   so source order is what decides this. */
.dispatch-candidates-shell {
  max-height: 320px;
}

/* .data-table carries min-width: max-content so a wide table can scroll inside its wrapper. A
   table rendered without that wrapper pushes the whole page sideways instead, which is what the
   note's line table was doing. */
.dispatch-note-lines-shell,
.sales-agreement-lines-shell,
.stock-card-recipe-lines-shell,
.production-step-fields-shell,
.product-flow-steps-shell {
  max-width: 100%;
}

/* The output quantity and its read-only unit badge sit in one row so the unit reads as a suffix
   of the number, not as a separate field the user might mistake for editable. */
.recipe-output-quantity-group {
  display: flex;
  gap: 6px;
}

.recipe-output-quantity-group .form-control:first-child {
  flex: 1 1 auto;
}

.recipe-unit-badge {
  flex: 0 0 96px;
  width: 96px;
  color: var(--table-muted, #7c8da5);
  background: var(--table-filter-bg, #faf8f4);
}

/* A short explanation next to a checkbox label, for a setting whose effect is not obvious from
   its name alone (see IsScalingExempt on the recipe line). */
.erp-hint {
  display: block;
  margin-top: 2px;
  color: var(--table-muted, #7c8da5);
  font-size: 0.68rem;
  font-weight: 600;
}

.dispatch-error-list {
  margin: 0;
  padding-left: 18px;
  color: #8a2f24;
  font-size: 12px;
  line-height: 1.5;
}

/* A stock name runs to fifty characters and, in a max-content table, that one column decides how
   wide everything is. It truncates; the full name stays in the title attribute. Only the plain
   label is capped: the free line's picker keeps the app wide `.data-table .erp-combobox`
   min-width, which is deliberate and would beat a max-width here anyway. */
.dispatch-note-line-table .dispatch-line-stock {
  display: block;
  max-width: 220px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.data-table {
  width: 100%;
  min-width: max-content;
  border-collapse: separate;
  border-spacing: 0;
  color: #342b27;
  font-size: 12px;
}

.data-table thead {
  position: sticky;
  top: 0;
  z-index: 4;
  background: #eee5dc;
}

.data-table th,
.data-table td {
  height: 34px;
  padding: 6px 8px;
  border-right: 1px solid #e3d9d0;
  border-bottom: 1px solid #e3d9d0;
  white-space: nowrap;
  background: #fffdfb;
}

.data-table th {
  color: #4c403a;
  background: #eee5dc;
  font-size: 11px;
  font-weight: 800;
}

.data-table tbody tr:hover td {
  background: #fbf5ef;
}

.data-table tbody tr[tabindex] {
  cursor: pointer;
}

.data-table tbody tr.is-selected td,
.data-table tbody tr.is-selected:hover td {
  background: #efe4da;
}

.data-table .table-group-row td {
  height: 30px;
  color: #6f3128;
  background: #f4ebe2;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0;
}

.data-table .table-group-row span,
.data-table .table-group-row strong,
.data-table .table-group-row em {
  display: inline-flex;
  align-items: center;
  margin-right: 8px;
}

.data-table .table-group-row span,
.data-table .table-group-row em {
  color: #7a6b62;
  font-style: normal;
  font-weight: 700;
}

.data-table .table-group-row:hover td {
  background: #f4ebe2;
}

.data-table .table-group-row:has(.table-group-toggle) td {
  padding: 0;
}

.data-table .table-group-toggle {
  display: flex;
  width: 100%;
  align-items: center;
  gap: 0;
  padding: 0 8px;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  min-height: 30px;
  text-align: left;
  cursor: pointer;
}

.data-table .table-group-caret {
  flex: 0 0 auto;
  margin-right: 6px;
  color: #7a6b62;
  font-size: 10px;
  font-style: normal;
  font-weight: 900;
}

.data-table .table-group-caret::before {
  content: "▾";
}

.data-table .table-group-row.is-collapsed .table-group-caret::before {
  content: "▸";
}

/* Collapsing hides the row visually without touching row.hidden, which stays the filters' answer. */
.data-table tbody tr.is-group-collapsed {
  display: none;
}

.sales-orders-table tbody tr {
  cursor: pointer;
}

.data-table .primary-sticky-col {
  position: sticky;
  left: 0;
  z-index: 2;
  width: 142px;
  min-width: 142px;
  max-width: 142px;
  background: #fffdfb;
}

.data-table thead .primary-sticky-col {
  z-index: 5;
  background: #eee5dc;
}

.data-table-wrap.has-x-scroll .primary-sticky-col {
  box-shadow: 6px 0 6px -6px rgba(52, 43, 39, 0.32);
}

.data-table .table-sort-button {
  display: inline-flex;
  width: 100%;
  min-width: 0;
  align-items: center;
  justify-content: center;
  gap: 4px;
  border: 0;
  color: inherit;
  background: transparent;
  font: inherit;
  font-weight: 800;
  padding: 0;
}

.data-table .table-header-controls {
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: center;
  gap: 4px;
}

.data-table .table-header-controls .table-sort-button {
  flex: 1 1 auto;
}

.data-table .table-excel-filter-button {
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 3px;
  color: #8b7b71;
  background: transparent;
  cursor: pointer;
}

.data-table .table-excel-filter-button::before {
  content: "";
  display: block;
  width: 15px;
  height: 15px;
  background: currentColor;
  clip-path: polygon(8% 14%, 92% 14%, 60% 50%, 60% 86%, 42% 76%, 42% 50%);
}

.data-table .table-excel-filter-button:hover,
.data-table .table-excel-filter-button:focus {
  color: #7f2f24;
  background: #f1e9e1;
}

.data-table .table-excel-filter-button.is-filtered {
  color: #fff;
  background: #8f372b;
}

.data-table .primary-sticky-col .table-sort-button {
  justify-content: flex-start;
}

.data-table .primary-sticky-col .table-header-controls {
  justify-content: flex-start;
}

.data-table .table-sort-button::after {
  content: "↕";
  color: #8b7b71;
  font-size: 10px;
}

.data-table .table-sort-button.is-sorted-asc::after {
  content: "↑";
  color: #7f2f24;
}

.data-table .table-sort-button.is-sorted-desc::after {
  content: "↓";
  color: #7f2f24;
}

.data-table .table-filter-row th {
  height: 28px;
  padding: 2px 5px;
  background: #f7f1ea;
}

/* Filtre kutusu ince çerçeveyle görünür durur; çerçevesiz halde başlığın altındaki boş şerit gibi
   okunuyor ve kullanıcı filtrelenebildiğini fark etmiyordu. */
.table-column-filter {
  width: 100%;
  min-width: 0;
  height: 22px;
  border: 1px solid #ded8d0;
  border-radius: 5px;
  outline: none;
  color: #5f514a;
  background: #fff;
  font-size: 11px;
  font-weight: 700;
  padding: 0 6px;
  /* Yazılan filtre her kolonda soldan başlar (tasarım dokümanı: Header Filtre Satırı). */
  text-align: left;
}

.table-column-filter:focus {
  border-color: var(--farro-accent);
  box-shadow: 0 0 0 2px var(--farro-accent-soft);
}

.excel-filter-menu {
  position: fixed;
  z-index: 1200;
  display: flex;
  max-width: calc(100vw - 24px);
  flex-direction: column;
  gap: 8px;
  padding: 10px;
  border: 1px solid #cfc4ba;
  border-radius: 2px;
  background: #fffdfb;
  box-shadow: 0 18px 45px rgba(52, 43, 39, 0.18);
}

.excel-filter-search {
  width: 100%;
  height: 26px;
  border: 1px solid #d8cec4;
  border-radius: 2px;
  color: #3f342f;
  background: #fffaf5;
  font-size: 12px;
  font-weight: 700;
  padding: 0 7px;
}

.excel-filter-actions,
.excel-filter-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.excel-filter-actions button {
  border: 0;
  color: #7f2f24;
  background: transparent;
  font-size: 12px;
  font-weight: 800;
  padding: 0;
}

.excel-filter-values {
  max-height: 230px;
  overflow: auto;
  border: 1px solid #ece3da;
  background: #fff;
}

.excel-filter-value,
.excel-filter-empty {
  min-height: 28px;
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 5px 7px;
  color: #4c403a;
  font-size: 12px;
  font-weight: 700;
}

.excel-filter-value:hover {
  background: #f7f1ea;
}

.excel-filter-value span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.excel-filter-empty {
  color: #8a7a70;
}

.table-column-filter::-webkit-search-cancel-button {
  display: none;
  -webkit-appearance: none;
}

.numeric-col {
  text-align: right;
}

.status-badge {
  display: inline-flex;
  min-width: 48px;
  justify-content: center;
  border: 1px solid #d8d0c7;
  border-radius: 2px;
  padding: 2px 6px;
  font-size: 11px;
  font-weight: 700;
}

.status-badge.is-active {
  color: #28513b;
  background: #e8f1ea;
}

.status-badge.is-passive {
  color: #7b3f36;
  background: #f4e8e4;
}

.status-badge.is-draft {
  color: #5f514a;
  background: #f1ece7;
}

.status-badge.is-warning {
  color: #70501c;
  background: #f6eedc;
}

.status-badge.is-complete {
  color: #244d52;
  background: #e4eff0;
}

.sales-orders-table .primary-sticky-col {
  width: 174px;
  min-width: 174px;
  max-width: 174px;
}

.sales-order-detail-screen {
  --doc-bg: #f3f1eb;
  --doc-surface: #fff;
  --doc-surface-soft: #faf9f6;
  --doc-text: #25221f;
  --doc-muted: #827a70;
  --doc-border: #e3ddd4;
  --doc-border-soft: #eee9e2;
  --doc-brand: #5e3f2b;
  --doc-brand-dark: #3f2a1c;
  --doc-brand-soft: #f1e9df;
  --doc-accent: #b18442;
  --doc-accent-soft: #f5ecd9;
  --doc-green: #487052;
  --doc-green-soft: #e7f0e9;
  --doc-orange: #9a6a22;
  --doc-orange-soft: #f6ecd8;
  --doc-red: #a24d3f;
  --doc-red-soft: #f7e7e3;
  --doc-blue: #3f687b;
  --doc-blue-soft: #e5eef2;
  --doc-shadow: 0 2px 8px rgba(44, 34, 25, .045);
  min-height: calc(100vh - 16px);
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr);
  gap: 8px;
  padding: 10px;
  background: var(--doc-bg);
  color: var(--doc-text);
}

/* Fatura ve irsaliye detayı sipariş detayının belge kabuğunu paylaşır. Bölüm sayısı sayfaya göre
   değiştiği için satırlar sabit üç değil, içerik kadardır. */
.document-detail-screen {
  grid-template-rows: none;
  grid-auto-rows: auto;
  align-content: start;
}

.document-detail-body {
  padding: 10px 12px;
}

.document-detail-hint {
  margin: 0;
  padding: 8px 12px;
  border: 1px solid #ecd9b3;
  border-radius: 10px;
  background: var(--doc-orange-soft);
  color: var(--doc-orange);
  font-size: 11px;
  font-weight: 650;
}

.sales-order-detail-topbar {
  min-height: 58px;
  padding: 8px 10px 8px 14px;
  display: flex;
  align-items: center;
  gap: 14px;
  border: 1px solid var(--doc-border);
  border-radius: 10px;
  background: var(--doc-surface);
  box-shadow: var(--doc-shadow);
}

.sales-order-page-context {
  min-width: 0;
  flex: 1;
  display: flex;
  align-items: center;
  gap: 14px;
}

.sales-order-detail-id {
  min-width: 160px;
}

.sales-order-detail-id span {
  display: block;
  margin-bottom: 1px;
  color: var(--doc-accent);
  font-size: 8px;
  font-weight: 800;
  letter-spacing: .09em;
  text-transform: uppercase;
}

.sales-order-detail-id h1 {
  margin: 0;
  color: var(--doc-brand-dark);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 18px;
  line-height: 21px;
  font-weight: 700;
}

.sales-order-detail-separator {
  width: 1px;
  height: 31px;
  flex: 0 0 auto;
  background: var(--doc-border);
}

.sales-order-detail-account {
  min-width: 0;
  flex: 1;
}

.sales-order-detail-account span {
  display: block;
  color: var(--doc-muted);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .03em;
}

.sales-order-detail-account strong {
  max-width: 520px;
  margin-top: 1px;
  display: block;
  min-width: 0;
  overflow: hidden;
  color: var(--doc-text);
  font-size: 12px;
  font-weight: 650;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sales-order-detail-actions {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 6px;
}

.sales-order-detail-actions form {
  margin: 0;
}

.sales-order-detail-screen .status-badge {
  height: 28px;
  min-width: 0;
  padding: 0 10px;
  align-items: center;
  gap: 6px;
  border: 0;
  border-radius: 999px;
  background: var(--doc-blue-soft);
  color: var(--doc-blue);
  font-size: 10px;
  font-weight: 700;
  white-space: nowrap;
}

.sales-order-detail-screen .status-badge::before {
  content: "";
  width: 6px;
  height: 6px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: currentColor;
}

.sales-order-detail-screen .status-badge.is-active {
  background: var(--doc-green-soft);
  color: var(--doc-green);
}

.sales-order-detail-screen .status-badge.is-passive,
.sales-order-detail-screen .status-badge.is-draft {
  background: var(--doc-red-soft);
  color: var(--doc-red);
}

.sales-order-detail-screen .status-badge.is-warning {
  background: var(--doc-orange-soft);
  color: var(--doc-orange);
}

.sales-order-detail-screen .status-badge.is-complete {
  background: var(--doc-blue-soft);
  color: var(--doc-blue);
}

.sales-order-detail-button {
  height: 30px;
  padding: 0 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: 1px solid var(--doc-border);
  border-radius: 7px;
  background: var(--doc-surface);
  color: var(--doc-brand-dark);
  font-size: 10px;
  font-weight: 650;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  transition: .15s ease;
}

.sales-order-detail-button:hover,
.sales-order-detail-button:focus {
  border-color: #cfc4b8;
  background: var(--doc-surface-soft);
  color: var(--doc-brand-dark);
}

.sales-order-detail-button:disabled,
.sales-order-detail-button[aria-disabled="true"] {
  border-color: var(--doc-border);
  background: var(--doc-surface-soft);
  color: #a69b8d;
  cursor: not-allowed;
  opacity: .72;
}

.sales-order-detail-button:disabled:hover,
.sales-order-detail-button:disabled:focus,
.sales-order-detail-button[aria-disabled="true"]:hover,
.sales-order-detail-button[aria-disabled="true"]:focus {
  border-color: var(--doc-border);
  background: var(--doc-surface-soft);
  color: #a69b8d;
}

.sales-order-detail-button svg {
  width: 13px;
  height: 13px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2;
}

/* Affirmative counterpart of .sales-order-danger-button, on the same 30px detail-button base.
   Only ever rendered for an order still waiting to be approved. */
.sales-order-approve-button {
  border-color: #c3d6c8;
  color: var(--doc-green);
}

.sales-order-approve-button:hover,
.sales-order-approve-button:focus {
  border-color: #a8c4af;
  background: var(--doc-green-soft);
  color: var(--doc-green);
}

.sales-order-danger-button {
  border-color: #e6c8c0;
  color: var(--doc-red);
}

.sales-order-danger-button:hover,
.sales-order-danger-button:focus {
  border-color: #dba99d;
  background: var(--doc-red-soft);
  color: var(--doc-red);
}

.sales-order-danger-button:disabled {
  border-color: var(--doc-border);
  background: var(--doc-surface-soft);
  color: #a69b8d;
  cursor: not-allowed;
  opacity: .72;
}

.sales-order-danger-button:disabled:hover,
.sales-order-danger-button:disabled:focus {
  border-color: var(--doc-border);
  background: var(--doc-surface-soft);
  color: #a69b8d;
}

.sales-order-save-button {
  border-color: var(--doc-brand-dark);
  background: var(--doc-brand-dark);
  color: #fff;
}

.sales-order-save-button:hover,
.sales-order-save-button:focus {
  border-color: var(--doc-brand);
  background: var(--doc-brand);
  color: #fff;
}

.sales-order-summary-card,
.sales-order-panel {
  min-height: 0;
  overflow: hidden;
  border: 1px solid var(--doc-border);
  border-radius: 10px;
  background: var(--doc-surface);
  box-shadow: var(--doc-shadow);
}

.sales-order-panel {
  display: flex;
  flex-direction: column;
}

.sales-order-section-title {
  height: 30px;
  padding: 0 12px;
  display: flex;
  align-items: center;
  gap: 8px;
  border-bottom: 1px solid var(--doc-border-soft);
  background: var(--doc-surface-soft);
  color: var(--doc-brand-dark);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 12px;
  font-weight: 700;
}

.sales-order-section-title::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--doc-accent);
}

.sales-order-panel-heading {
  flex: 0 0 auto;
  height: 32px;
  padding: 0 10px 0 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--doc-border-soft);
  background: var(--doc-surface-soft);
}

.sales-order-panel-heading h2 {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--doc-brand-dark);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 12px;
  font-weight: 700;
}

.sales-order-panel-heading h2::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--doc-accent);
}

.sales-order-panel-heading > span {
  padding: 2px 7px;
  border-radius: 999px;
  background: var(--doc-brand-soft);
  color: var(--doc-brand);
  font-size: 8px;
  font-weight: 700;
}

.sales-order-line-add-button {
  height: 24px;
  padding: 0 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  border: 1px solid var(--doc-border);
  border-radius: 7px;
  background: var(--doc-surface);
  color: var(--doc-brand-dark);
  font-size: 9px;
  font-weight: 700;
  cursor: pointer;
  transition: .15s ease;
}

.sales-order-line-add-button:hover,
.sales-order-line-add-button:focus {
  border-color: #cfc4b8;
  background: var(--doc-surface-soft);
}

.sales-order-line-add-button svg,
.sales-order-line-remove-button svg {
  width: 12px;
  height: 12px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2;
}

.sales-order-summary-grid {
  display: grid;
  grid-template-columns: 92px minmax(110px, .85fr) minmax(135px, 1.1fr) 70px 78px minmax(105px, .9fr) 105px 105px minmax(120px, 1fr);
}

/* Sales order create and detail layout: order information, notes and status as tabs of one card
   with the totals beside it, and the line table across the full width underneath. The dispatch
   screens share the panel classes but not these, and keep their side column.
   The summary grid selector carries both classes on purpose: the plain .sales-order-summary-grid
   rules in the media queries further down would otherwise win on source order. */
.sales-order-workspace {
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 310px;
  gap: 8px;
}

.sales-order-tablist {
  flex: 0 0 auto;
  height: 32px;
  padding: 0 8px;
  display: flex;
  align-items: flex-end;
  gap: 2px;
  border-bottom: 1px solid var(--doc-border-soft);
  background: var(--doc-surface-soft);
}

.sales-order-tab {
  height: 32px;
  padding: 0 12px;
  border: 0;
  border-bottom: 2px solid transparent;
  background: transparent;
  color: var(--doc-muted);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}

.sales-order-tab:hover {
  color: var(--doc-brand-dark);
}

.sales-order-tab[aria-selected="true"] {
  border-bottom-color: var(--doc-accent);
  background: var(--doc-surface);
  color: var(--doc-brand-dark);
}

.sales-order-tab:focus-visible {
  outline: 2px solid var(--doc-accent-soft);
  outline-offset: -2px;
}

/* All three panels sit in the same grid cell, so the card takes the height of the tallest one
   and stays put while switching tabs. An inactive panel keeps its box (visibility, not display)
   and is inert, so it is not shown, clickable or read out; its fields are still posted. The
   hidden attribute is deliberately not used: Bootstrap forces [hidden] to display: none. */
.sales-order-tab-panels {
  min-height: 0;
  display: grid;
}

.sales-order-tab-panel {
  grid-area: 1 / 1;
  min-width: 0;
  min-height: 0;
}

.sales-order-tab-panel.is-inactive {
  visibility: hidden;
}

/* Four columns: the customer gets the widest one, shipment spans two, a full item the row. */
.sales-order-summary-grid.sales-order-tab-summary-grid {
  grid-template-columns: 1fr .9fr 1.8fr .75fr;
}

.sales-order-summary-grid.sales-order-tab-summary-grid > .sales-order-summary-item:nth-child(4n) {
  border-right: 0;
}

.sales-order-summary-grid.sales-order-tab-summary-grid > .sales-order-wide-item {
  grid-column: span 2;
}

.sales-order-summary-grid.sales-order-tab-summary-grid > .sales-order-full-item {
  grid-column: 1 / -1;
  border-right: 0;
}

/* Risk limit warning on the create screen: spans both workspace columns. */
.sales-order-risk-warning {
  grid-column: 1 / -1;
  padding: 8px 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border: 1px solid var(--doc-red);
  border-radius: 10px;
  background: var(--doc-red-soft);
  color: var(--doc-red);
}

.sales-order-risk-warning-text {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 10px;
}

.sales-order-risk-warning-text strong {
  font-size: 11px;
}

.sales-order-risk-accept-button {
  flex: 0 0 auto;
}

.account-notes-panel {
  grid-column: 1 / -1;
  padding: 8px 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  border: 1px solid var(--farro-note-border);
  border-radius: 10px;
  background: var(--farro-note-soft);
  color: var(--farro-text-body);
  font-size: 12px;
}

.account-notes-panel[hidden] {
  display: none;
}

.account-notes-title {
  color: var(--farro-note);
  font-size: 11px;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.account-notes-account {
  font-weight: 700;
}

.account-notes-list {
  margin: 0;
  padding-left: 18px;
}

/* pre-line yalnızca not metnine uygulanır; listeye verilirse Razor'un <li>'ler arasına bıraktığı
   satır sonları da boş satır olarak çizilir ve panel gereğinden uzar. */
.account-notes-list li {
  white-space: pre-line;
}

.account-notes-list li[hidden] {
  display: none;
}

.account-notes-group + .account-notes-group {
  margin-top: 4px;
}

.sales-order-risk-line {
  display: block;
  margin-top: 2px;
  color: var(--doc-muted);
  font-size: 9px;
  font-weight: 700;
}

.sales-order-risk-line.is-over {
  color: var(--doc-red);
}

/* History tab: fills the shared cell and scrolls inside it, so it never sets the card's height. */
.sales-order-tab-panel[data-order-tab-panel="history"] {
  position: relative;
  min-height: 140px;
}

.sales-order-recent-orders {
  position: absolute;
  inset: 0;
  overflow: auto;
  padding: 8px 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.sales-order-recent-empty {
  margin: 0;
  color: var(--doc-muted);
  font-size: 10px;
}

.sales-order-recent-order {
  flex: 0 0 auto;
  border: 1px solid var(--doc-border-soft);
  border-radius: 7px;
  background: var(--doc-surface);
}

.sales-order-recent-order-heading {
  padding: 5px 8px;
  display: flex;
  align-items: center;
  gap: 10px;
  border-bottom: 1px solid var(--doc-border-soft);
  background: var(--doc-surface-soft);
  font-size: 10px;
}

.sales-order-recent-order-number {
  color: var(--doc-brand-dark);
  font-weight: 800;
  text-decoration: none;
}

.sales-order-recent-order-number:hover {
  text-decoration: underline;
}

.sales-order-recent-order-meta {
  color: var(--doc-muted);
}

.sales-order-recent-order-status {
  padding: 1px 7px;
  border-radius: 999px;
  background: var(--doc-brand-soft);
  color: var(--doc-brand);
  font-size: 9px;
  font-weight: 700;
}

.sales-order-recent-order-total {
  margin-left: auto;
  color: var(--doc-text);
  font-variant-numeric: tabular-nums;
}

.sales-order-recent-lines {
  width: 100%;
  border-collapse: collapse;
  font-size: 10px;
}

.sales-order-recent-lines td {
  padding: 3px 8px;
  border-bottom: 1px solid var(--doc-border-soft);
  font-variant-numeric: tabular-nums;
}

.sales-order-recent-lines tr:last-child td {
  border-bottom: 0;
}

.sales-order-recent-lines .numeric-col {
  width: 110px;
  text-align: right;
  white-space: nowrap;
}

.sales-order-recent-line-stock {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* A cell that ends its row without being the grid's last item (a full width item follows). */
.sales-order-summary-grid.sales-order-tab-summary-grid > .sales-order-row-end {
  border-right: 0;
}

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

.sales-order-workspace-totals .sales-order-totals-content {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
}

.sales-order-workspace-totals .sales-order-total-line.grand {
  margin-top: auto;
}

.sales-order-summary-item,
.sales-order-summary-bottom > div {
  min-width: 0;
  padding: 6px 8px;
  border-right: 1px solid var(--doc-border-soft);
  border-bottom: 1px solid var(--doc-border-soft);
}

.sales-order-summary-item:last-child {
  border-right: 0;
}

.sales-order-summary-item span,
.sales-order-summary-bottom span,
.sales-order-summary-item label,
.sales-order-summary-bottom label {
  display: block;
  margin-bottom: 2px;
  color: var(--doc-muted);
  font-size: 7.5px;
  font-weight: 800;
  letter-spacing: .05em;
  text-transform: uppercase;
}

.sales-order-summary-item strong,
.sales-order-summary-bottom strong {
  display: block;
  overflow: hidden;
  color: var(--doc-text);
  font-size: 10px;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sales-order-summary-item input,
.sales-order-summary-item select,
.sales-order-summary-bottom input,
.sales-order-summary-bottom select,
.sales-order-create-note,
.sales-order-create-lines-table input,
.sales-order-create-lines-table select {
  width: 100%;
  min-height: 21px;
  border: 0;
  border-radius: 5px;
  background: transparent;
  color: var(--doc-text);
  font: inherit;
  font-size: 10px;
  font-weight: 600;
  outline: 0;
}

.sales-order-summary-item input:focus,
.sales-order-summary-item select:focus,
.sales-order-summary-bottom input:focus,
.sales-order-summary-bottom select:focus,
.sales-order-create-note:focus,
.sales-order-create-lines-table input:focus,
.sales-order-create-lines-table select:focus {
  background: #fff;
  box-shadow: inset 0 0 0 1px var(--doc-accent);
}

/* Sipariş oluşturmada cari, modal listeyi açan bir düğmeyle seçilir. */
.sales-order-account-picker-button {
  width: 100%;
  min-height: 21px;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 2px 5px;
  border: 1px solid var(--doc-border);
  border-radius: 5px;
  background: var(--doc-surface);
  color: var(--doc-text);
  font: inherit;
  font-size: 10px;
  font-weight: 600;
  text-align: left;
}

.sales-order-account-picker-button span {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  margin: 0;
  color: inherit;
  font-size: inherit;
  font-weight: inherit;
  letter-spacing: 0;
  text-overflow: ellipsis;
  text-transform: none;
  white-space: nowrap;
}

.sales-order-account-picker-button.is-empty span {
  color: var(--doc-muted);
}

.sales-order-account-picker-button svg {
  flex: 0 0 auto;
  width: 12px;
  height: 12px;
  fill: none;
  stroke: var(--doc-muted);
  stroke-width: 2;
}

.sales-order-account-picker-button:hover,
.sales-order-account-picker-button:focus-visible {
  border-color: var(--doc-accent);
  outline: 0;
  box-shadow: 0 0 0 2px var(--doc-accent-soft);
}

.account-picker-body {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.erp-modal .account-picker-body {
  overflow: hidden;
}

.account-picker-toolbar {
  display: flex;
  align-items: center;
  gap: 10px;
}

.account-picker-search {
  flex: 1 1 auto;
  min-width: 0;
  height: 30px;
  padding: 0 10px;
  border: 1px solid var(--farro-surface-border);
  border-radius: 6px;
  font-size: 13px;
  outline: 0;
}

.account-picker-search:focus {
  border-color: var(--farro-accent);
  box-shadow: 0 0 0 2px var(--farro-accent-soft);
}

.account-picker-count {
  flex: 0 0 auto;
  color: var(--farro-muted);
  font-size: 12px;
  font-weight: 700;
}

.account-picker-grid {
  max-height: min(60vh, 520px);
  overflow: auto;
  overscroll-behavior: none;
  border: 1px solid var(--farro-surface-border);
  border-radius: 8px;
}

.account-picker-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 12.5px;
}

.account-picker-table thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  padding: 7px 10px;
  border-bottom: 1px solid var(--farro-surface-border);
  background: var(--farro-surface);
  color: var(--farro-muted);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .04em;
  text-align: left;
  text-transform: uppercase;
}

.account-picker-table tbody td {
  padding: 7px 10px;
  border-bottom: 1px solid var(--farro-surface);
  color: var(--farro-text-body);
}

.account-picker-table tbody tr {
  cursor: pointer;
}

.account-picker-table tbody tr:hover td,
.account-picker-table tbody tr:focus td {
  background: var(--farro-content-bg);
}

.account-picker-table tbody tr:focus {
  outline: 0;
}

.account-picker-table tbody tr:focus td:first-child {
  box-shadow: inset 3px 0 0 var(--farro-accent);
}

.account-picker-table tbody tr.is-selected td {
  background: var(--farro-accent-soft);
  font-weight: 700;
}

.account-picker-code {
  width: 110px;
  white-space: nowrap;
}

.account-picker-trade {
  color: var(--farro-muted);
}

.account-picker-empty {
  margin: 0;
  padding: 18px;
  color: var(--farro-muted);
  text-align: center;
}

/* Enhanced selects default to a 180px floor that overflows these narrow cells. */
.sales-order-summary-item .erp-combobox,
.sales-order-summary-bottom .erp-combobox {
  min-width: 0;
}

.sales-order-summary-item .erp-combobox-input,
.sales-order-summary-bottom .erp-combobox-input {
  min-height: 21px;
  height: 21px;
  padding: 2px 16px 2px 5px;
  border-radius: 5px;
  font-size: 10px;
  font-weight: 600;
}

.sales-order-summary-item .erp-combobox::after,
.sales-order-summary-bottom .erp-combobox::after {
  top: 7px;
  right: 6px;
}

.sales-order-summary-item .text-danger,
.sales-order-summary-bottom .text-danger,
.sales-order-side-content .text-danger {
  display: block;
  margin-top: 2px;
  font-size: 8px;
  line-height: 1.2;
}

.sales-order-validation-summary {
  padding: 0 8px;
  color: var(--doc-red);
  font-size: 9px;
  font-weight: 700;
  /* Onay eksikleri tek mesajda satır satır gelir. */
  white-space: pre-line;
}

.sales-order-validation-summary:empty {
  display: none;
}

.sales-order-summary-bottom {
  display: grid;
  grid-template-columns: 1.7fr 1fr;
}

.sales-order-summary-bottom > div:first-child {
  border-right: 1px solid var(--doc-border-soft);
}

.sales-order-summary-bottom > div:last-child {
  border-right: 0;
}

.sales-order-detail-body {
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 1.75fr) minmax(300px, .75fr);
  gap: 8px;
}

.sales-order-lines-panel {
  min-height: 0;
}

.sales-order-lines-wrap {
  flex: 1;
  min-height: 0;
  overflow: auto;
}

.sales-order-lines-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
  font-size: 9.5px;
}

.sales-order-lines-table thead {
  position: sticky;
  top: 0;
  z-index: 4;
}

.sales-order-lines-table th {
  height: 27px;
  padding: 4px 7px;
  border-right: 1px solid var(--doc-border-soft);
  border-bottom: 1px solid var(--doc-border);
  background: #f4f1eb;
  color: var(--doc-muted);
  font-size: 7.5px;
  font-weight: 800;
  letter-spacing: .04em;
  text-align: left;
  text-transform: uppercase;
  white-space: nowrap;
}

.sales-order-lines-table td {
  height: 35px;
  padding: 4px 7px;
  border-right: 1px solid #f3efe9;
  border-bottom: 1px solid var(--doc-border-soft);
  color: #39332e;
  vertical-align: middle;
}

.sales-order-lines-table th:last-child,
.sales-order-lines-table td:last-child {
  border-right: 0;
}

.sales-order-lines-table tbody tr:hover td {
  background: #fcfaf6;
}

.sales-order-lines-table .numeric-col {
  text-align: right !important;
}

.sales-order-lines-table .center-col {
  text-align: center !important;
}

.sales-order-stock-code {
  display: block;
  overflow: hidden;
  color: var(--doc-brand-dark);
  font-size: 9.5px;
  font-weight: 800;
  line-height: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sales-order-stock-name {
  display: block;
  margin-top: 2px;
  overflow: hidden;
  color: var(--doc-muted);
  font-size: 8.5px;
  line-height: 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sales-order-number {
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  font-size: 9px;
  font-variant-numeric: tabular-nums;
}

.sales-order-line-status {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 3px 6px;
  border-radius: 999px;
  font-size: 8px;
  font-weight: 800;
  white-space: nowrap;
}

.sales-order-line-status.success {
  background: var(--doc-green-soft);
  color: var(--doc-green);
}

.sales-order-line-status.partial {
  background: var(--doc-orange-soft);
  color: var(--doc-orange);
}

.sales-order-line-status.waiting {
  background: var(--doc-red-soft);
  color: var(--doc-red);
}

.sales-order-line-status.muted {
  background: var(--doc-border-soft);
  color: var(--doc-muted);
}

.sales-order-muted {
  overflow: hidden;
  color: var(--doc-muted);
  font-size: 8.5px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sales-order-side-column {
  min-height: 0;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: 8px;
}

.sales-order-notes-panel,
.sales-order-flow-panel,
.sales-order-totals-panel {
  min-height: 0;
}

.sales-order-side-content {
  padding: 9px 11px;
}

.sales-order-note {
  margin: 0;
  color: #4f4841;
  font-size: 9.5px;
  line-height: 1.45;
}

/* The two notes sit in one panel, so each needs a label: which one the customer sees is not
   something the reader should have to remember. */
.sales-order-note-label {
  display: block;
  margin-bottom: 3px;
  color: #6f6659;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .03em;
  text-transform: uppercase;
}

.sales-order-note-hint {
  color: #948a7c;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
}

.sales-order-timeline-content {
  min-height: 0;
  overflow: auto;
  padding: 10px 12px 8px;
}

.sales-order-timeline-step {
  position: relative;
  display: grid;
  grid-template-columns: 14px minmax(0, 1fr);
  column-gap: 8px;
}

.sales-order-timeline-marker {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.sales-order-timeline-dot {
  width: 8px;
  height: 8px;
  flex: 0 0 auto;
  border: 2px solid var(--doc-green);
  border-radius: 50%;
  background: var(--doc-green);
}

.sales-order-timeline-line {
  width: 1px;
  min-height: 18px;
  flex: 1;
  margin-top: 2px;
  background: var(--doc-border);
}

.sales-order-timeline-step:last-child .sales-order-timeline-line {
  display: none;
}

.sales-order-timeline-step.current .sales-order-timeline-dot {
  border-color: var(--doc-accent);
  background: var(--doc-accent);
  box-shadow: 0 0 0 3px var(--doc-accent-soft);
}

.sales-order-timeline-step.pending .sales-order-timeline-dot {
  border-color: #cfc7be;
  background: var(--doc-surface);
}

.sales-order-timeline-text {
  padding: 0 0 9px;
}

.sales-order-timeline-title {
  color: var(--doc-text);
  font-size: 9.5px;
  font-weight: 700;
  line-height: 1.25;
}

.sales-order-timeline-meta {
  margin-top: 1px;
  color: var(--doc-muted);
  font-size: 8px;
  line-height: 1.25;
}

.sales-order-timeline-step.pending .sales-order-timeline-title {
  color: var(--doc-muted);
  font-weight: 600;
}

.sales-order-totals-content {
  padding: 8px 11px 10px;
}

.sales-order-total-line {
  min-height: 26px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border-bottom: 1px dashed var(--doc-border);
  color: var(--doc-muted);
  font-size: 9.5px;
}

.sales-order-total-line strong {
  color: var(--doc-text);
  font-family: "SFMono-Regular", Consolas, monospace;
  font-size: 9.5px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.sales-order-total-line.grand {
  min-height: 42px;
  margin-top: 5px;
  padding: 5px 8px;
  border: 0;
  border-radius: 7px;
  background: var(--doc-brand-dark);
}

.sales-order-total-line.grand span {
  color: #d8cbbb;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .05em;
  text-transform: uppercase;
}

.sales-order-total-line.grand strong {
  color: #fff;
  font-size: 13px;
}

.sales-order-lines-table .w-index {
  width: 34px;
}

.sales-order-lines-table .w-stock {
  width: 25%;
}

.sales-order-lines-table .w-qty {
  width: 9%;
}

.sales-order-lines-table .w-delivered {
  width: 8%;
}

.sales-order-lines-table .w-remaining {
  width: 8%;
}

.sales-order-lines-table .w-price {
  width: 11%;
}

.sales-order-lines-table .w-total {
  width: 12%;
}

.sales-order-lines-table .w-status {
  width: 11%;
}

.sales-order-lines-table .w-desc {
  width: 18%;
}

/* Just wide enough for the pencil; the text button it replaced needed 9%. */
.sales-order-lines-table .w-actions {
  width: 4%;
}

/* Sipariş, irsaliye ve fatura detayı: satırın bütün parametreleri (iskonto, KDV, net/brüt, depo,
   teslim tarihleri) yan yana. Kolonlar içerik kadar açılır ve tablo yatay kayar; yüzde genişlikli sabit düzen burada
   kolonları sıkıştırıp metni kesiyordu. # ve Stok kaydırmada solda kalır. */
.sales-order-lines-table.is-wide {
  width: max-content;
  min-width: 100%;
  table-layout: auto;
}

.sales-order-lines-table.is-wide th,
.sales-order-lines-table.is-wide td {
  white-space: nowrap;
}

.sales-order-lines-table.is-wide .is-sticky-index,
.sales-order-lines-table.is-wide .is-sticky-stock {
  position: sticky;
  z-index: 2;
  background: var(--doc-surface);
}

.sales-order-lines-table.is-wide thead .is-sticky-index,
.sales-order-lines-table.is-wide thead .is-sticky-stock {
  z-index: 5;
  background: #f4f1eb;
}

.sales-order-lines-table.is-wide .is-sticky-index {
  left: 0;
  width: 34px;
  min-width: 34px;
  max-width: 34px;
}

.sales-order-lines-table.is-wide .is-sticky-stock {
  left: 34px;
  min-width: 200px;
  max-width: 320px;
  border-right: 1px solid var(--doc-border);
}

/* Ad tek satırda kesilmez; 320px'i aşan ad alt satıra kayar. */
.sales-order-lines-table.is-wide .is-sticky-stock .sales-order-stock-name {
  overflow: visible;
  text-overflow: clip;
  white-space: normal;
}

.sales-order-lines-table.is-wide tbody tr:hover td.is-sticky-index,
.sales-order-lines-table.is-wide tbody tr:hover td.is-sticky-stock {
  background: #fcfaf6;
}

/* Açıklama kesilmez: en fazla 280px genişler, sonra alt satıra kayar. */
.sales-order-lines-table.is-wide .sales-order-line-description {
  min-width: 160px;
  max-width: 280px;
  color: var(--doc-muted);
  font-size: 8.5px;
  white-space: normal;
}

.sales-order-line-actions {
  text-align: right;
}

.sales-order-adjust-stock {
  margin-bottom: 14px;
  color: #6f3128;
  font-size: 0.82rem;
  font-weight: 700;
}

.sales-order-adjust-summary {
  margin-top: 14px;
  padding-top: 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border-top: 1px solid var(--table-border-soft, #eee9e2);
  color: var(--table-muted, #827a70);
  font-size: 0.78rem;
}

.sales-order-adjust-summary strong {
  color: #4c403a;
  white-space: nowrap;
}

.dispatch-order-lines-table .w-stock {
  width: 24%;
}

.dispatch-order-lines-table .w-qty {
  width: 10%;
}

.dispatch-order-lines-table .w-delivered {
  width: 9%;
}

.dispatch-order-lines-table .w-remaining {
  width: 9%;
}

.dispatch-order-lines-table .w-price {
  width: 11%;
}

.dispatch-order-lines-table .w-total {
  width: 12%;
}

.dispatch-order-lines-table .w-warehouse {
  width: 11%;
}

.dispatch-order-lines-table .w-status {
  width: 12%;
}

.dispatch-preview-lines-table .w-stock {
  width: 22%;
}

.dispatch-preview-lines-table .w-qty {
  width: 9%;
}

.dispatch-preview-lines-table .w-delivered {
  width: 9%;
}

.dispatch-preview-lines-table .w-remaining {
  width: 8%;
}

.dispatch-preview-lines-table .w-balance {
  width: 10%;
}

.dispatch-preview-lines-table .w-dispatch {
  width: 10%;
}

.dispatch-preview-lines-table .w-status {
  width: 10%;
}

.dispatch-preview-lines-table .w-desc {
  width: 16%;
}

/* Five chained discount columns share what the single one had plus a little from the rest. */
.sales-order-create-lines-table .w-stock {
  width: 22%;
}

.sales-order-create-lines-table .w-qty {
  width: 8%;
}

.sales-order-create-lines-table .w-unit {
  width: 8%;
}

.sales-order-create-lines-table .w-price {
  width: 9%;
}

.sales-order-create-lines-table .w-discount {
  width: 5%;
}

.sales-order-create-lines-table .w-vat {
  width: 6%;
}

.sales-order-create-lines-table .w-delivery {
  width: 10%;
}

.sales-order-create-lines-table .w-desc {
  width: 8%;
}

.sales-order-create-lines-table .w-action {
  width: 58px;
}

.sales-order-create-lines-table input,
.sales-order-create-lines-table select {
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  font-size: 9px;
  text-align: right;
}

.sales-order-create-lines-table td:first-child input,
.sales-order-create-lines-table td:first-child select,
.sales-order-create-lines-table .sales-order-unit-select,
.sales-order-create-lines-table td:nth-child(7) input,
.sales-order-create-lines-table td:nth-child(7) select,
.sales-order-create-lines-table td:nth-child(8) input,
.sales-order-create-lines-table td:nth-child(8) select {
  font-family: inherit;
  text-align: left;
}

.sales-order-create-lines-table .sales-order-unit-select:disabled {
  color: var(--doc-muted);
  opacity: 1;
}

/* Shows what a non-main unit quantity amounts to, e.g. "= 24 Adet" under "2 Koli". */
.sales-order-unit-hint {
  display: block;
  margin-top: 2px;
  color: var(--doc-muted);
  font-size: 7.5px;
  font-weight: 700;
  text-align: right;
}

.sales-order-price-badge {
  display: inline-flex;
  margin-top: 3px;
  padding: 2px 5px;
  border-radius: 999px;
  background: var(--doc-brand-soft);
  color: var(--doc-brand);
  font-size: 7.5px;
  font-weight: 700;
}

.sales-order-line-remove-button {
  height: 24px;
  padding: 0 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  border: 1px solid #e6c8c0;
  border-radius: 7px;
  background: var(--doc-surface);
  color: var(--doc-red);
  font-size: 8px;
  font-weight: 700;
  cursor: pointer;
}

.sales-order-line-remove-button:hover,
.sales-order-line-remove-button:focus {
  border-color: #dba99d;
  background: var(--doc-red-soft);
}

.sales-order-create-note {
  min-height: 76px;
  padding: 7px 8px;
  border: 1px solid var(--doc-border-soft);
  background: var(--doc-surface-soft);
  font-size: 9.5px;
  line-height: 1.45;
  resize: vertical;
}

@media (max-width: 1180px) {
  .sales-order-summary-grid {
    grid-template-columns: 80px 1fr 1fr 65px 68px 1fr 95px 95px 1fr;
  }

  .sales-order-workspace {
    grid-template-columns: minmax(0, 1fr);
  }

  .sales-order-detail-body {
    grid-template-columns: minmax(0, 1fr) 300px;
  }
}

@media (max-width: 900px) {
  .sales-order-detail-screen {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
  }

  .sales-order-detail-body {
    display: flex;
    flex-direction: column;
  }

  .sales-order-lines-panel {
    height: 420px;
  }

  .sales-order-side-column {
    display: flex;
    flex-direction: column;
  }

  .sales-order-summary-grid,
  .sales-order-summary-bottom {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .sales-order-summary-grid.sales-order-tab-summary-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .sales-order-summary-grid.sales-order-tab-summary-grid > .sales-order-summary-item:nth-child(4n) {
    border-right: 1px solid var(--doc-border-soft);
  }

  .sales-order-summary-grid.sales-order-tab-summary-grid > .sales-order-summary-item:nth-child(2n) {
    border-right: 0;
  }

  .sales-order-tab-notes {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* --- Belge ekranları: telefon ------------------------------------------------------------------
   Belge kabuğunu (sales-order-detail-screen + document-detail-screen) kullanan ve telefona hazır işaretlenen
   sayfalar (ViewData["MobileReady"]; bugün irsaliye detayı, satış iadesi formu ve detayı) 640px altında:
   - Yan menü gizlenir, üstte ortak çubuk (_MobileTopNav) durur; sayfa gövdeyle birlikte kayar.
   - Başlıkta belge no ve cari alt alta; işlem düğmeleri iki sütunlu, 44px dokunma hedefi.
   - Masaüstünün 8-10px yazıları okunur boya çıkar; bilgi ızgarası iki sütun.
   - Kalem tabloları satır başına bir karttır: stok kartın başlığıdır, diğer değerler iki sütunda, her birinin
     üstünde kolon başlığı (site.js hücreye data-label yazar). Boş hücre ve sıra no gizlenir.
   - Girişler 16px: iOS daha küçük yazılı kutuya odaklanınca sayfayı yakınlaştırır.
   Seçiciler body.is-mobile-ready ile sınırlıdır: işaretlenmemiş belge ekranları (sipariş, fatura) telefonda
   "tasarım aşamasında" bilgisini göstermeye devam eder, "masaüstü görünümü" seçilince de eskisi gibi açılır. */
@media (max-width: 640px) {
  body.is-mobile-ready:has(.document-detail-screen) .app-shell {
    display: block;
    min-width: 0;
    height: auto;
  }

  body.is-mobile-ready:has(.document-detail-screen) .app-sidebar {
    display: none;
  }

  body.is-mobile-ready:has(.document-detail-screen) .app-main,
  body.is-mobile-ready:has(.document-detail-screen) .app-content,
  body.is-mobile-ready:has(.document-detail-screen) .content-surface {
    height: auto;
    overflow: visible;
  }

  body.is-mobile-ready:has(.document-detail-screen) .app-content {
    padding: 0;
  }

  body.is-mobile-ready:has(.document-detail-screen) .content-surface {
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }

  .is-mobile-ready .document-detail-screen {
    min-height: 0;
    padding: 8px 8px calc(16px + env(safe-area-inset-bottom));
  }

  /* Başlık: belge no ve cari alt alta, düğmeler altta iki sütun. */
  .is-mobile-ready .document-detail-screen .sales-order-detail-topbar {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    padding: 10px 12px;
  }

  .is-mobile-ready .document-detail-screen .sales-order-page-context {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
  }

  .is-mobile-ready .document-detail-screen .sales-order-detail-separator {
    display: none;
  }

  .is-mobile-ready .document-detail-screen .sales-order-detail-id {
    min-width: 0;
  }

  .is-mobile-ready .document-detail-screen .sales-order-detail-id span {
    font-size: 10.5px;
  }

  .is-mobile-ready .document-detail-screen .sales-order-detail-id h1 {
    font-size: 20px;
    line-height: 1.2;
    overflow-wrap: anywhere;
  }

  .is-mobile-ready .document-detail-screen .sales-order-detail-account {
    width: 100%;
  }

  .is-mobile-ready .document-detail-screen .sales-order-detail-account span {
    font-size: 11px;
  }

  .is-mobile-ready .document-detail-screen .sales-order-detail-account strong {
    max-width: none;
    font-size: 15px;
    white-space: normal;
  }

  .is-mobile-ready .document-detail-screen .sales-order-detail-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
  }

  .is-mobile-ready .document-detail-screen .sales-order-detail-actions > .status-badge {
    grid-column: 1 / -1;
    justify-self: start;
    height: 30px;
    font-size: 12.5px;
  }

  /* Formun asıl düğmesi (Kaydet) tam satırdır. */
  .is-mobile-ready .document-detail-screen .sales-order-detail-actions > .erp-primary-button {
    grid-column: 1 / -1;
  }

  .is-mobile-ready .document-detail-screen .sales-order-detail-actions form,
  .is-mobile-ready .document-detail-screen .sales-order-detail-actions form > button {
    width: 100%;
  }

  .is-mobile-ready .document-detail-screen .sales-order-detail-button,
  .is-mobile-ready .document-detail-screen .sales-order-detail-actions .erp-primary-button {
    width: 100%;
    height: 44px;
    min-height: 44px;
    font-size: 14px;
  }

  .is-mobile-ready .document-detail-screen .sales-order-detail-button svg {
    width: 16px;
    height: 16px;
  }

  /* Paneller ve okunur yazı boyları. */
  .is-mobile-ready .document-detail-screen .sales-order-panel-heading {
    height: auto;
    min-height: 40px;
    flex-wrap: wrap;
    gap: 4px 8px;
    padding: 6px 12px;
  }

  .is-mobile-ready .document-detail-screen .sales-order-panel-heading h2 {
    font-size: 15px;
  }

  .is-mobile-ready .document-detail-screen .sales-order-panel-heading > span {
    font-size: 11.5px;
  }

  .is-mobile-ready .document-detail-screen .sales-order-panel-heading > a {
    font-size: 13px;
  }

  .is-mobile-ready .document-detail-screen .sales-order-tablist {
    height: 44px;
    overflow-x: auto;
  }

  .is-mobile-ready .document-detail-screen .sales-order-tab {
    height: 44px;
    flex: 0 0 auto;
    font-size: 13.5px;
  }

  /* Bilgi ızgarası iki sütun; ortak 768px kuralı tek sütuna indiriyordu. Geniş ve tam satır öğeler tam satırdır. */
  .is-mobile-ready .document-detail-screen .sales-order-summary-grid.sales-order-tab-summary-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .is-mobile-ready .document-detail-screen .sales-order-summary-grid.sales-order-tab-summary-grid > .sales-order-wide-item,
  .is-mobile-ready .document-detail-screen .sales-order-summary-grid.sales-order-tab-summary-grid > .sales-order-full-item {
    grid-column: 1 / -1;
  }

  .is-mobile-ready .document-detail-screen .sales-order-summary-item {
    padding: 8px 10px;
  }

  .is-mobile-ready .document-detail-screen .sales-order-summary-item > span {
    display: block;
    color: var(--doc-muted);
    font-size: 11px;
  }

  .is-mobile-ready .document-detail-screen .sales-order-summary-item > strong {
    font-size: 14px;
    overflow-wrap: anywhere;
  }

  .is-mobile-ready .document-detail-screen .sales-order-note,
  .is-mobile-ready .document-detail-screen .sales-order-note-label {
    font-size: 14px;
  }

  .is-mobile-ready .document-detail-screen .sales-order-total-line {
    min-height: 36px;
    font-size: 14px;
  }

  .is-mobile-ready .document-detail-screen .sales-order-total-line strong {
    font-size: 14px;
    text-align: right;
  }

  .is-mobile-ready .document-detail-screen .sales-order-total-line.grand span {
    font-size: 12px;
  }

  .is-mobile-ready .document-detail-screen .sales-order-total-line.grand strong {
    font-size: 17px;
  }

  .is-mobile-ready .document-detail-screen .account-notes-panel {
    font-size: 14px;
  }

  .is-mobile-ready .document-detail-screen .sales-order-summary-item:has(> .form-control, > .form-select) {
    grid-column: 1 / -1;
    border-right: 0;
  }

  /* Girişler: tam genişlik, 44px, 16px yazı. */
  .is-mobile-ready .document-detail-screen .form-control,
  .is-mobile-ready .document-detail-screen .form-select {
    width: 100%;
    min-height: 44px;
    font-size: 16px;
  }

  /* Aranabilir liste (site.js, erp-combobox) asıl select'in yerine çizilir; o da aynı boyda. Liste gövdeye
     sabit konumlu açıldığı için seçenek seçicisi belge ekranıyla sınırlanmaz. */
  .is-mobile-ready .document-detail-screen .erp-combobox {
    width: 100%;
    min-width: 0;
  }

  .is-mobile-ready .document-detail-screen .erp-combobox-input {
    height: 44px;
    min-height: 44px;
    border-radius: 6px;
    font-size: 16px;
  }

  .is-mobile-ready .document-detail-screen .erp-combobox::after {
    top: 17px;
    right: 12px;
  }

  .is-mobile-ready .erp-combobox-list {
    max-height: 50vh;
  }

  .is-mobile-ready .erp-combobox-option,
  .is-mobile-ready .erp-combobox-empty {
    padding: 12px;
    font-size: 15px;
  }

  /* Kalem tabloları: satır başına bir kart. */
  .is-mobile-ready .document-detail-screen .sales-order-lines-panel {
    height: auto;
  }

  .is-mobile-ready .document-detail-screen .sales-order-lines-wrap {
    overflow: visible;
  }

  .is-mobile-ready .document-detail-screen .sales-order-lines-table,
  .is-mobile-ready .document-detail-screen .sales-order-lines-table.is-wide {
    width: 100%;
    min-width: 0;
    display: block;
  }

  .is-mobile-ready .document-detail-screen .sales-order-lines-table thead {
    display: none;
  }

  .is-mobile-ready .document-detail-screen .sales-order-lines-table tbody {
    display: block;
  }

  .is-mobile-ready .document-detail-screen .sales-order-lines-table tr {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px 12px;
    padding: 10px 12px;
    border-bottom: 1px solid var(--doc-border);
  }

  .is-mobile-ready .document-detail-screen .sales-order-lines-table tbody tr:hover td {
    background: transparent;
  }

  .is-mobile-ready .document-detail-screen .sales-order-lines-table td {
    position: static;
    width: auto;
    min-width: 0;
    max-width: none;
    height: auto;
    padding: 0;
    border: 0;
    background: transparent;
    font-size: 14px;
    text-align: left !important;
    white-space: normal;
  }

  .is-mobile-ready .document-detail-screen .sales-order-lines-table td::before {
    content: attr(data-label);
    display: block;
    margin-bottom: 1px;
    color: var(--doc-muted);
    /* Sayı hücresi eşaralıklı yazıdadır; etiket gövde yazısıyla kalır. */
    font-family: var(--bs-body-font-family);
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .03em;
    text-transform: uppercase;
  }

  .is-mobile-ready .document-detail-screen .sales-order-lines-table td[data-label=""]::before {
    display: none;
  }

  .is-mobile-ready .document-detail-screen .sales-order-lines-table td:empty,
  .is-mobile-ready .document-detail-screen .sales-order-lines-table td.center-col:first-child {
    display: none;
  }

  /* Stok kartın başlığıdır: tam satır, etiketsiz. */
  .is-mobile-ready .document-detail-screen .sales-order-lines-table td:has(> .sales-order-stock-code) {
    grid-column: 1 / -1;
  }

  .is-mobile-ready .document-detail-screen .sales-order-lines-table td:has(> .sales-order-stock-code)::before {
    display: none;
  }

  .is-mobile-ready .document-detail-screen .sales-order-stock-code {
    font-size: 13px;
    line-height: 1.3;
  }

  .is-mobile-ready .document-detail-screen .sales-order-stock-name {
    font-size: 15px;
    line-height: 1.3;
    color: var(--doc-text);
    white-space: normal;
  }

  .is-mobile-ready .document-detail-screen .sales-order-number {
    font-size: 14px;
  }

  .is-mobile-ready .document-detail-screen .sales-order-line-description {
    grid-column: 1 / -1;
    font-size: 13px !important;
  }

  .is-mobile-ready .document-detail-screen .sales-order-line-actions {
    grid-column: 1 / -1;
  }

  /* Formdaki giriş hücreleri (iade miktarı, neden, stoğa al / imha) tam satırdır. */
  .is-mobile-ready .document-detail-screen .sales-order-lines-table td:has(> .form-control, > .form-select) {
    grid-column: 1 / -1;
  }

  .is-mobile-ready .document-detail-screen .purchase-receipt-quantity {
    width: 100%;
  }

  .is-mobile-ready .document-detail-screen .purchase-receipt-hint {
    font-size: 12.5px;
  }

  .is-mobile-ready .document-detail-screen .purchase-receipt-line.is-over {
    background: var(--doc-accent-soft);
  }
}

/* --- Liste ekranları: telefon -------------------------------------------------------------------
   createManagedTable kullanan, telefona hazır işaretlenen liste sayfası (stock-page + mobile-list-page; bugün
   İrsaliyeler) 640px altında:
   - Yan menü gizlenir, üstte ortak çubuk (_MobileTopNav) durur; sayfa gövdeyle birlikte kayar, tablo kendi içinde
     kaymaz.
   - Kolon başlıkları, filtre satırı ve seçim çubuğu gizlenir; yerine tek arama kutusu (.mobile-list-search) gelir.
     Kutu ortak modülün sıradan bir kolon filtresidir (satırın data-search alanı); sayaç ve "Filtreleri temizle"
     onu da sayar.
   - Her satır bir karttır; yerleşimi sayfa kendi hücre sınıflarıyla verir (aşağıda İrsaliyeler). Karta dokunmak
     detayı açar (sayfanın betiği).
   Arama kutusu masaüstünde gizlidir; oturumdan dolu geri gelirse görünür kalır ki gizli bir filtre satırları
   sessizce süzmesin. */
.mobile-list-search {
  display: none;
}

.mobile-list-search:has(.table-column-filter:not(:placeholder-shown)) {
  display: block;
  padding: 6px 8px;
}

@media (max-width: 640px) {
  body.is-mobile-ready:has(.mobile-list-page) .app-shell {
    display: block;
    min-width: 0;
    height: auto;
  }

  body.is-mobile-ready:has(.mobile-list-page) .app-sidebar {
    display: none;
  }

  body.is-mobile-ready:has(.mobile-list-page) .app-main,
  body.is-mobile-ready:has(.mobile-list-page) .app-content,
  body.is-mobile-ready:has(.mobile-list-page) .content-surface {
    height: auto;
    overflow: visible;
  }

  body.is-mobile-ready:has(.mobile-list-page) .app-content {
    padding: 0;
  }

  body.is-mobile-ready:has(.mobile-list-page) .content-surface {
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }

  .is-mobile-ready .mobile-list-page,
  .is-mobile-ready .mobile-list-page .stock-table-panel,
  .is-mobile-ready .mobile-list-page .managed-table-shell {
    height: auto;
    max-height: none;
    min-height: 0;
    overflow: visible;
  }

  .is-mobile-ready .mobile-list-page {
    padding-bottom: env(safe-area-inset-bottom);
  }

  /* Başlık: ad ve açıklama solda, birincil düğme sağda; ortak 768px kuralı dikey dizer. */
  .is-mobile-ready .mobile-list-page .stock-page-header {
    min-height: 0;
    flex-direction: row;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
  }

  .is-mobile-ready .mobile-list-page .stock-page-header h1 {
    font-size: 18px;
  }

  .is-mobile-ready .mobile-list-page .stock-page-header p {
    display: none;
  }

  .is-mobile-ready .mobile-list-page .stock-page-actions .erp-primary-button {
    min-height: 44px;
    padding: 0 14px;
    font-size: 14px;
  }

  /* İrsaliye telefonda kesilmez (rut planlamada onaylanır); "Yeni irsaliye" masaüstünde kalır. */
  .is-mobile-ready .dispatch-notes-page .stock-page-actions {
    display: none;
  }

  .is-mobile-ready .mobile-list-page .table-selection-toolbar {
    display: none;
  }

  .is-mobile-ready .mobile-list-page .table-summary {
    font-size: 13px;
  }

  .is-mobile-ready .mobile-list-page .table-summary .table-action-button {
    min-height: 36px;
    font-size: 13px;
  }

  /* Telefonda kolon genişliği ayarı yok. */
  .is-mobile-ready .mobile-list-page [data-table-reset-widths] {
    display: none;
  }

  /* Arama gün sekmesi gibi üstte yapışıktır; uzun listede aşağıdan da aranır. Giriş 16px: iOS yakınlaştırmasın. */
  .is-mobile-ready .mobile-list-page .mobile-list-search {
    position: sticky;
    top: 0;
    z-index: 3;
    display: block;
    padding: 8px;
    border-bottom: 1px solid var(--farro-surface-border);
    background: var(--farro-content-bg);
  }

  .is-mobile-ready .mobile-list-page .mobile-list-search .table-column-filter {
    width: 100%;
    height: 44px;
    padding: 0 12px;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 500;
  }

  /* Tablo kartlara döner: başlık ve filtre satırı gizli, satır ızgara; modülün yazdığı satır içi genişlikler ezilir. */
  .is-mobile-ready .mobile-list-page .data-table {
    display: block;
    width: auto !important;
    min-width: 0 !important;
    table-layout: auto;
  }

  .is-mobile-ready .mobile-list-page .data-table thead {
    display: none;
  }

  .is-mobile-ready .mobile-list-page .data-table tbody {
    display: block;
  }

  .is-mobile-ready .mobile-list-page .data-table tbody tr {
    display: grid;
    gap: 3px 10px;
    padding: 10px 12px;
    border-bottom: 1px solid var(--farro-surface-border);
    background: var(--farro-card);
    cursor: pointer;
  }

  .is-mobile-ready .mobile-list-page .data-table tbody tr:active {
    background: var(--farro-accent-soft);
  }

  .is-mobile-ready .mobile-list-page .data-table tbody td {
    position: static;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    height: auto;
    padding: 0;
    overflow: visible;
    border: 0;
    background: transparent;
    font-size: 13px;
    text-overflow: clip;
    white-space: normal;
  }

  /* İrsaliyeler: no ve durum; cari ve tutar; tarih, fiili sevk ve satır sayısı; depo ve siparişler. Altı eşit
     sütun: sütunlar içerikten bağımsız olduğu için etiketler her kartta aynı hizadadır. */
  .is-mobile-ready .dispatch-notes-page .data-table tbody tr {
    grid-template-columns: repeat(6, minmax(0, 1fr));
    grid-template-areas:
      "number number number number status status"
      "account account account account total total"
      "date date actual actual lines lines"
      "warehouse warehouse orders orders orders orders";
  }

  .is-mobile-ready .dispatch-notes-page .dispatch-col-number {
    grid-area: number;
    font-size: 15px;
  }

  .is-mobile-ready .dispatch-notes-page .dispatch-col-status {
    grid-area: status;
    justify-self: end;
  }

  .is-mobile-ready .dispatch-notes-page .dispatch-col-account {
    grid-area: account;
    color: var(--farro-text);
    font-size: 15px;
    font-weight: 600;
  }

  .is-mobile-ready .dispatch-notes-page .dispatch-col-date { grid-area: date; }
  .is-mobile-ready .dispatch-notes-page .dispatch-col-actual { grid-area: actual; }
  .is-mobile-ready .dispatch-notes-page .dispatch-col-warehouse { grid-area: warehouse; }
  .is-mobile-ready .dispatch-notes-page .dispatch-col-orders { grid-area: orders; overflow-wrap: anywhere; }
  .is-mobile-ready .dispatch-notes-page .dispatch-col-lines { grid-area: lines; text-align: right; }

  .is-mobile-ready .dispatch-notes-page .dispatch-col-total {
    grid-area: total;
    align-self: start;
    color: var(--farro-text);
    font-size: 15px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    text-align: right;
    white-space: nowrap !important;
  }

  /* Küçük değerlerin üstünde kendi etiketi; kartta kolon başlığı yoktur. */
  .is-mobile-ready .dispatch-notes-page :is(.dispatch-col-date, .dispatch-col-actual, .dispatch-col-warehouse, .dispatch-col-orders, .dispatch-col-lines)::before {
    display: block;
    color: var(--farro-muted);
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .03em;
    text-transform: uppercase;
  }

  .is-mobile-ready .dispatch-notes-page .dispatch-col-date::before { content: "Tarih"; }
  .is-mobile-ready .dispatch-notes-page .dispatch-col-actual::before { content: "Fiili sevk"; }
  .is-mobile-ready .dispatch-notes-page .dispatch-col-warehouse::before { content: "Depo"; }
  .is-mobile-ready .dispatch-notes-page .dispatch-col-orders::before { content: "Sipariş"; }
  .is-mobile-ready .dispatch-notes-page .dispatch-col-lines::before { content: "Satır"; }

  /* Satış siparişleri: no ve durum; cari ve genel toplam; şube, teslim ve satır sayısı. Sipariş tarihi, ara
     toplam, iskonto, KDV, döviz ve depo kartta yoktur (detayda vardır); döviz tutarın yanına yazılır. Toplu giriş
     ve toplu sipariş belgesi masaüstü işidir, telefonda gizlenir; yeni sipariş telefonda başlığın altında tam
     genişlik ana düğmedir (telefon ekranı _SalesOrderCreatePhone). */
  .is-mobile-ready .sales-orders-page .stock-page-header {
    flex-wrap: wrap;
  }

  .is-mobile-ready .sales-orders-page .stock-page-actions {
    flex: 1 1 100%;
  }

  .is-mobile-ready .sales-orders-page .stock-page-actions .erp-secondary-button {
    display: none;
  }

  .is-mobile-ready .sales-orders-page .stock-page-actions .erp-primary-button {
    width: 100%;
    justify-content: center;
    min-height: 48px;
    font-size: 15px;
  }

  .is-mobile-ready .sales-orders-page .data-table tbody tr {
    grid-template-columns: repeat(6, minmax(0, 1fr));
    grid-template-areas:
      "number number number number status status"
      "account account account account total total"
      "branch branch delivery delivery lines lines";
  }

  .is-mobile-ready .sales-orders-page :is(.so-col-date, .so-col-subtotal, .so-col-discount, .so-col-vat, .so-col-currency, .so-col-warehouse) {
    display: none;
  }

  /* Tabela adı masaüstünde ayrı kolondur; telefon kartında cari zaten yazdığı için gizlenir. */
  .is-mobile-ready .sales-orders-page .so-col-trade-name,
  .is-mobile-ready .dispatch-notes-page .dispatch-col-trade-name {
    display: none;
  }

  .is-mobile-ready .sales-orders-page .so-col-number {
    grid-area: number;
    font-size: 15px;
  }

  .is-mobile-ready .sales-orders-page .so-col-status {
    grid-area: status;
    justify-self: end;
  }

  .is-mobile-ready .sales-orders-page .so-col-account {
    grid-area: account;
    color: var(--farro-text);
    font-size: 15px;
    font-weight: 600;
  }

  .is-mobile-ready .sales-orders-page .so-col-total {
    grid-area: total;
    color: var(--farro-text);
    font-size: 15px;
    font-variant-numeric: tabular-nums;
    text-align: right;
    white-space: nowrap !important;
  }

  .is-mobile-ready .sales-orders-page .so-col-total::after {
    content: " " attr(data-currency);
    font-weight: 700;
  }

  .is-mobile-ready .sales-orders-page .so-col-branch { grid-area: branch; }
  .is-mobile-ready .sales-orders-page .so-col-delivery { grid-area: delivery; }
  .is-mobile-ready .sales-orders-page .so-col-lines { grid-area: lines; text-align: right; }

  .is-mobile-ready .sales-orders-page :is(.so-col-branch, .so-col-delivery, .so-col-lines)::before {
    display: block;
    color: var(--farro-muted);
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .03em;
    text-transform: uppercase;
  }

  .is-mobile-ready .sales-orders-page .so-col-branch::before { content: "Şube"; }
  .is-mobile-ready .sales-orders-page .so-col-delivery::before { content: "Teslim"; }
  .is-mobile-ready .sales-orders-page .so-col-lines::before { content: "Satır"; }
}

/* --- Sipariş detayı: telefon (_SalesOrderPhone, sales-order-phone.js) ---------------------------------------------
   Masaüstü bölümü 640px altında gizlenir, yerine bu görünüm çıkar; masaüstünde bu görünüm hiç görünmez.
   - Üstte cari, durum, teslim ve toplam; altında ne yapılabileceğini tek cümlede söyleyen durum kutusu.
   - Ürünler kart listesidir; düzenlenebilen kart dokununca kendi penceresini açar.
   - Altta sabit çubuk: duruma göre tek ana işlem (Onayla ya da Ürün ekle) ve "Diğer".
   - Pencereler (dialog) alttan açılır; Kaydet / Vazgeç pencerenin altında hep görünür.
   - Dokunma hedefleri en az 44px; girişler 16px (iOS yakınlaştırmasın). Renkler :root token'larından.
   Kabuk kuralları yeni sipariş ekranıyla (.so-new, aşağıda "Yeni sipariş: telefon") ortaktır; orada masaüstü formu
   (.sales-order-create-screen, aynı zamanda .sales-order-detail-screen) aynı kuralla gizlenir. */
.so-phone {
  display: none;
}

@media (max-width: 640px) {
  body.is-mobile-ready:has(:is(.so-phone, .so-new)) .app-shell {
    display: block;
    min-width: 0;
    height: auto;
  }

  body.is-mobile-ready:has(:is(.so-phone, .so-new)) .app-sidebar,
  body.is-mobile-ready:has(:is(.so-phone, .so-new)) .sales-order-detail-screen {
    display: none;
  }

  body.is-mobile-ready:has(:is(.so-phone, .so-new)) .app-main,
  body.is-mobile-ready:has(:is(.so-phone, .so-new)) .app-content,
  body.is-mobile-ready:has(:is(.so-phone, .so-new)) .content-surface {
    height: auto;
    overflow: visible;
  }

  body.is-mobile-ready:has(:is(.so-phone, .so-new)) .app-content {
    padding: 0;
  }

  body.is-mobile-ready:has(:is(.so-phone, .so-new)) .content-surface {
    border: 0;
    border-radius: 0;
    background: var(--farro-content-bg);
    box-shadow: none;
  }

  .is-mobile-ready .so-phone {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 10px 10px calc(84px + env(safe-area-inset-bottom));
    color: var(--farro-text-body);
    font-size: 15px;
  }
}

.so-phone-head,
.so-phone-card {
  border: 1px solid var(--farro-surface-border);
  border-radius: 12px;
  background: var(--farro-card);
}

.so-phone-head {
  padding: 14px;
}

.so-phone-head-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.so-phone-kicker {
  color: var(--farro-muted);
  font-size: 12.5px;
  font-weight: 700;
}

.so-phone-account {
  margin: 6px 0 0;
  color: var(--farro-text);
  font-size: 20px;
  font-weight: 800;
  line-height: 1.25;
}

.so-phone-branch {
  margin: 2px 0 0;
  color: var(--farro-muted);
  font-size: 14px;
}

.so-phone-facts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin: 12px 0 0;
}

.so-phone-facts > div {
  padding: 8px 10px;
  border-radius: 8px;
  background: var(--farro-content-bg);
}

.so-phone-facts dt,
.so-phone-fields dt,
.so-phone-totals dt {
  color: var(--farro-muted);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .02em;
  text-transform: uppercase;
}

.so-phone-facts dd {
  margin: 2px 0 0;
  color: var(--farro-text);
  font-size: 14px;
  font-weight: 700;
  overflow-wrap: anywhere;
}

.so-phone-facts .is-total {
  background: var(--farro-accent-soft);
}

.so-phone-facts .is-total dd {
  color: var(--farro-accent-deep);
}

.so-phone-state {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px 12px;
  border: 1px solid var(--farro-surface-border);
  border-radius: 10px;
  background: var(--farro-card);
  font-size: 13.5px;
  line-height: 1.4;
}

.so-phone-state strong {
  color: var(--farro-text);
  font-size: 14px;
}

.so-phone-state.is-warning {
  border-color: var(--farro-note-border);
  background: var(--farro-note-soft);
}

.so-phone-state.is-warning strong {
  color: var(--farro-note);
}

.so-phone-state.is-muted {
  color: var(--farro-muted);
}

.so-phone-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 48px;
  padding: 6px 8px 6px 14px;
  border-bottom: 1px solid var(--farro-surface-border);
}

.so-phone-card-head h2 {
  margin: 0;
  color: var(--farro-text);
  font-size: 16px;
  font-weight: 800;
}

.so-phone-card-head h2 span {
  margin-left: 4px;
  color: var(--farro-muted);
  font-weight: 700;
}

.so-phone-hint {
  color: var(--farro-muted);
  font-size: 12.5px;
}

.so-phone-link {
  min-height: 40px;
  padding: 0 12px;
  border: 1px solid var(--farro-surface-border);
  border-radius: 8px;
  background: var(--farro-card);
  color: var(--farro-accent);
  font-size: 14px;
  font-weight: 700;
}

.so-phone-lines,
.so-phone-links {
  margin: 0;
  padding: 0;
  list-style: none;
}

.so-phone-lines > li + li,
.so-phone-links > li + li {
  border-top: 1px solid var(--farro-surface-border);
}

/* Ürün kartı: ad ve tutar üstte, miktar × fiyat altında, etiketler (iskonto, KDV, sevk) en altta. */
.so-phone-line {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "name total"
    "code total"
    "qty qty"
    "tags tags"
    "note note";
  gap: 2px 10px;
  width: 100%;
  padding: 12px 14px;
  text-align: left;
}

.so-phone-line.is-editable {
  padding-right: 36px;
  cursor: pointer;
}

.so-phone-line.is-editable:active {
  background: var(--farro-accent-soft);
}

.so-phone-line.is-locked {
  opacity: .6;
}

.so-phone-line-name {
  grid-area: name;
  color: var(--farro-text);
  font-size: 15.5px;
  font-weight: 700;
  line-height: 1.3;
}

.so-phone-line-code {
  grid-area: code;
  color: var(--farro-muted);
  font-size: 12.5px;
}

.so-phone-line-qty {
  grid-area: qty;
  margin-top: 4px;
  font-size: 14.5px;
  font-variant-numeric: tabular-nums;
}

.so-phone-line-total {
  grid-area: total;
  align-self: start;
  color: var(--farro-text);
  font-size: 15px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.so-phone-line-tags {
  grid-area: tags;
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 4px;
}

.so-phone-tag {
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--farro-content-bg);
  color: var(--farro-muted);
  font-size: 12px;
  font-weight: 700;
}

.so-phone-tag.is-shipped {
  background: var(--farro-success-soft);
  color: var(--farro-success);
}

.so-phone-tag.is-status {
  background: var(--farro-note-soft);
  color: var(--farro-note);
}

.so-phone-line-note {
  grid-area: note;
  margin-top: 4px;
  color: var(--farro-muted);
  font-size: 13px;
  font-style: italic;
}

.so-phone-line-chevron {
  position: absolute;
  top: 50%;
  right: 10px;
  width: 18px;
  height: 18px;
  color: var(--farro-muted);
  transform: translateY(-50%);
}

.so-phone-line-chevron svg,
.so-phone-add svg {
  width: 100%;
  height: 100%;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2.2;
}

.so-phone-add {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: calc(100% - 20px);
  min-height: 48px;
  margin: 4px 10px 12px;
  border: 1.5px dashed var(--farro-accent);
  border-radius: 10px;
  background: var(--farro-card);
  color: var(--farro-accent);
  font-size: 15px;
  font-weight: 800;
}

.so-phone-add svg {
  width: 18px;
  height: 18px;
}

.so-phone-totals,
.so-phone-fields {
  margin: 0;
  padding: 6px 14px 12px;
}

.so-phone-totals > div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  min-height: 34px;
  border-bottom: 1px dashed var(--farro-surface-border);
}

.so-phone-totals dd {
  margin: 0;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
}

.so-phone-totals .is-grand {
  margin-top: 6px;
  padding: 8px 10px;
  border: 0;
  border-radius: 8px;
  background: var(--farro-accent-deep);
}

.so-phone-totals .is-grand dt,
.so-phone-totals .is-grand dd {
  color: var(--farro-card);
}

.so-phone-totals .is-grand dd {
  font-size: 18px;
}

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

.so-phone-fields .is-wide {
  grid-column: 1 / -1;
}

.so-phone-fields dt small {
  color: var(--farro-muted);
  font-size: 11px;
  font-weight: 600;
  text-transform: none;
}

.so-phone-fields dd {
  margin: 2px 0 0;
  color: var(--farro-text);
  font-size: 14.5px;
  overflow-wrap: anywhere;
  white-space: pre-line;
}

.so-phone-links a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 48px;
  padding: 0 14px;
  color: var(--farro-accent);
  font-weight: 700;
  text-decoration: none;
}

.so-phone-links a span {
  color: var(--farro-muted);
  font-size: 13px;
  font-weight: 600;
}

/* Alt çubuk. */
.so-phone-bar {
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: var(--z-table-thead, 4);
  display: flex;
  gap: 8px;
  padding: 10px 10px calc(10px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--farro-surface-border);
  background: var(--farro-card);
  box-shadow: 0 -6px 16px rgba(44, 34, 25, .08);
}

.so-phone-bar > form {
  flex: 1 1 auto;
  margin: 0;
  display: flex;
}

.so-phone-primary,
.so-phone-secondary {
  min-height: 50px;
  border-radius: 10px;
  font-size: 16px;
  font-weight: 800;
}

.so-phone-primary {
  flex: 1 1 auto;
  width: 100%;
  border: 1px solid var(--farro-accent);
  background: var(--farro-accent);
  color: var(--farro-card);
}

.so-phone-primary.is-approve {
  border-color: var(--farro-success);
  background: var(--farro-success);
}

.so-phone-secondary {
  flex: 0 0 auto;
  min-width: 96px;
  border: 1px solid var(--farro-surface-border);
  background: var(--farro-card);
  color: var(--farro-text);
}

.so-phone-bar > .so-phone-secondary:only-child {
  flex: 1 1 auto;
}

/* Pencereler: alttan açılır, en fazla ekranın %92'si; başlık üstte, düğmeler altta sabit, arası kayar. */
.so-sheet {
  width: 100%;
  max-width: 560px;
  max-height: 92dvh;
  margin: auto auto 0;
  padding: 0;
  border: 0;
  border-radius: 16px 16px 0 0;
  background: var(--farro-card);
  color: var(--farro-text-body);
  box-shadow: 0 -10px 30px rgba(44, 34, 25, .2);
}

.so-sheet.is-tall {
  height: 92dvh;
}

.so-sheet[open] {
  display: flex;
  flex-direction: column;
}

.so-sheet::backdrop {
  background: rgba(44, 34, 25, .4);
}

.so-sheet-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  padding: 14px 10px 10px 16px;
  border-bottom: 1px solid var(--farro-surface-border);
}

.so-sheet-head h2 {
  margin: 0;
  color: var(--farro-text);
  font-size: 18px;
  font-weight: 800;
  line-height: 1.3;
}

.so-sheet-sub {
  color: var(--farro-muted);
  font-size: 13px;
}

.so-sheet-close {
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 10px;
  background: var(--farro-content-bg);
  color: var(--farro-text);
  font-size: 24px;
  line-height: 1;
}

.so-sheet-body {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 14px 16px;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.so-sheet-foot {
  display: flex;
  gap: 8px;
  padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--farro-surface-border);
}

.so-btn {
  flex: 1 1 0;
  min-height: 50px;
  padding: 0 12px;
  border: 1px solid var(--farro-surface-border);
  border-radius: 10px;
  background: var(--farro-card);
  color: var(--farro-text);
  font-size: 15.5px;
  font-weight: 800;
}

.so-btn.is-primary {
  flex-grow: 2;
  border-color: var(--farro-accent);
  background: var(--farro-accent);
  color: var(--farro-card);
}

.so-btn.is-danger {
  border-color: var(--farro-danger);
  color: var(--farro-danger);
}

.so-btn:disabled {
  opacity: .5;
}

.so-sheet-notice {
  margin: 0;
  padding: 10px 12px;
  border-radius: 8px;
  background: var(--farro-note-soft);
  color: var(--farro-note);
  font-size: 13.5px;
  font-weight: 600;
}

.so-sheet-total {
  display: flex;
  justify-content: space-between;
  margin: 0;
  padding: 10px 12px;
  border-radius: 8px;
  background: var(--farro-content-bg);
  color: var(--farro-muted);
  font-weight: 700;
}

.so-sheet-total strong {
  color: var(--farro-text);
  font-size: 16px;
}

.so-sheet-list {
  display: flex;
  flex-direction: column;
  padding: 6px 0 calc(10px + env(safe-area-inset-bottom));
  overflow-y: auto;
}

.so-sheet-list form {
  margin: 0;
}

.so-sheet-item {
  display: flex;
  align-items: center;
  width: 100%;
  min-height: 54px;
  padding: 0 18px;
  border: 0;
  border-bottom: 1px solid var(--farro-surface-border);
  background: transparent;
  color: var(--farro-text);
  font-size: 16px;
  font-weight: 700;
  text-align: left;
  text-decoration: none;
}

.so-sheet-item.is-danger {
  color: var(--farro-danger);
}

.so-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 0;
}

.so-field > span {
  color: var(--farro-text);
  font-size: 13.5px;
  font-weight: 700;
}

.so-field small {
  color: var(--farro-muted);
  font-weight: 600;
}

.so-field input,
.so-field select,
.so-field textarea,
.so-search,
.so-basket-price input {
  width: 100%;
  min-height: 48px;
  padding: 8px 12px;
  border: 1px solid var(--farro-surface-border);
  border-radius: 10px;
  background: var(--farro-card);
  color: var(--farro-text);
  font-size: 16px;
}

.so-field textarea {
  min-height: 72px;
}

.so-field input:focus,
.so-field select:focus,
.so-field textarea:focus,
.so-search:focus,
.so-basket-price input:focus,
.so-stepper input:focus {
  border-color: var(--farro-accent);
  outline: 2px solid var(--farro-accent-soft);
}

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

.so-stepper {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr) 52px;
  gap: 6px;
}

.so-stepper button {
  min-height: 48px;
  border: 1px solid var(--farro-surface-border);
  border-radius: 10px;
  background: var(--farro-content-bg);
  color: var(--farro-text);
  font-size: 22px;
  font-weight: 800;
}

.so-stepper input {
  min-height: 48px;
  padding: 0 8px;
  border: 1px solid var(--farro-surface-border);
  border-radius: 10px;
  color: var(--farro-text);
  font-size: 18px;
  font-weight: 800;
  text-align: center;
}

.so-more {
  border: 1px solid var(--farro-surface-border);
  border-radius: 10px;
}

.so-more > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 48px;
  padding: 0 12px;
  color: var(--farro-text);
  font-weight: 800;
  cursor: pointer;
}

.so-more > summary span {
  color: var(--farro-muted);
  font-size: 13px;
  font-weight: 600;
}

.so-more[open] > summary {
  border-bottom: 1px solid var(--farro-surface-border);
}

.so-more > :not(summary) {
  margin: 12px;
}

.so-search {
  position: sticky;
  top: -14px;
  z-index: 1;
}

.so-results,
.so-basket {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  list-style: none;
}

.so-results-hint {
  padding: 12px 4px;
  color: var(--farro-muted);
  font-size: 14px;
}

.so-result {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  width: 100%;
  min-height: 52px;
  padding: 8px 4px;
  border: 0;
  border-bottom: 1px solid var(--farro-surface-border);
  background: transparent;
  color: var(--farro-text);
  font-size: 15px;
  text-align: left;
}

.so-result-name {
  font-weight: 700;
}

.so-result-code {
  color: var(--farro-muted);
  font-size: 12.5px;
}

.so-result-note {
  color: var(--farro-note);
  font-size: 12.5px;
  font-weight: 700;
}

.so-result-note.is-basket {
  color: var(--farro-success);
}

.so-basket {
  gap: 8px;
  padding: 10px;
  border-radius: 12px;
  background: var(--farro-content-bg);
}

.so-basket[hidden] {
  display: none;
}

.so-basket-title {
  color: var(--farro-muted);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .03em;
  text-transform: uppercase;
}

.so-basket-item {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px;
  border: 1px solid var(--farro-surface-border);
  border-radius: 10px;
  background: var(--farro-card);
}

.so-basket-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
}

.so-basket-remove {
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: 8px;
  background: var(--farro-content-bg);
  color: var(--farro-muted);
  font-size: 22px;
  line-height: 1;
}

.so-basket-price {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  color: var(--farro-muted);
  font-size: 13px;
}

.so-link-button {
  min-height: 36px;
  padding: 0 4px;
  border: 0;
  background: transparent;
  color: var(--farro-accent);
  font-size: 13.5px;
  font-weight: 800;
  text-decoration: underline;
}

.so-picker {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  min-height: 48px;
  padding: 8px 12px;
  border: 1px solid var(--farro-surface-border);
  border-radius: 10px;
  background: var(--farro-card);
  color: var(--farro-text);
  font-size: 15px;
  font-weight: 700;
  text-align: left;
}

.so-picker small {
  flex: 0 0 auto;
  color: var(--farro-accent);
  font-size: 13.5px;
  font-weight: 800;
}

.so-account-search {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.so-account-search[hidden] {
  display: none;
}

/* --- Yeni sipariş: telefon (_SalesOrderCreatePhone, sales-order-create-phone.js) ------------------------------------
   Dört adımlı sihirbaz: Müşteri → Ürünler → Teslim → Kontrol. Üstte yapışık başlık ve ilerleme, her adımın başında
   numaralı yönerge kutusu, altta sabit çubukta Geri ve adımın adını taşıyan ana düğme. Kabuk kuralları, pencereler
   (.so-sheet), alanlar (.so-field), sayaç (.so-stepper) ve alt çubuk (.so-phone-bar) detay ekranıyla ortaktır. */
.so-new {
  display: none;
}

@media (max-width: 640px) {
  .is-mobile-ready .so-new {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 0 10px calc(104px + env(safe-area-inset-bottom));
    color: var(--farro-text-body);
    font-size: 15px;
  }
}

.so-new [hidden] {
  display: none !important;
}

/* Başlık ve ilerleme birlikte yapışıktır: kullanıcı hangi adımda olduğunu kaydırırken de görür. */
.so-new-top {
  position: sticky;
  top: 0;
  z-index: var(--z-table-thead, 4);
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 -10px;
  padding: 10px 12px 6px;
  background: var(--farro-content-bg);
}

.so-new-close {
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border: 1px solid var(--farro-surface-border);
  border-radius: 10px;
  background: var(--farro-card);
  color: var(--farro-text);
}

.so-new-close svg,
.so-new-chosen-check svg,
.so-new-empty svg,
.so-new-stepper .is-remove svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2.2;
}

.so-new-title {
  display: flex;
  min-width: 0;
  flex-direction: column;
}

.so-new-title span {
  color: var(--farro-muted);
  font-size: 12.5px;
  font-weight: 700;
}

.so-new-title strong {
  overflow: hidden;
  color: var(--farro-text);
  font-size: 16.5px;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.so-new-steps {
  position: sticky;
  top: 60px;
  z-index: var(--z-table-thead, 4);
  margin: -12px -10px 0;
  padding: 0 10px 10px;
  border-bottom: 1px solid var(--farro-surface-border);
  background: var(--farro-content-bg);
}

.so-new-steps ol {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Her adım: üstte dolan çizgi, altında numara ve ad. Geçilmiş adım dolu ve tıklanabilir, şimdiki vurgulu, ileridekiler
   soluk ve kapalı. */
.so-new-steps button {
  display: flex;
  width: 100%;
  min-height: 44px;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--farro-muted);
  font-size: 12.5px;
  font-weight: 700;
}

.so-new-steps button::before {
  content: "";
  width: 100%;
  height: 4px;
  border-radius: 999px;
  background: var(--farro-surface-border);
}

.so-new-steps button > span:last-child {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.so-new-step-num {
  display: none;
}

.so-new-steps button.is-done {
  color: var(--farro-success);
}

.so-new-steps button.is-done::before {
  background: var(--farro-success);
}

.so-new-steps button.is-done > span:last-child::before {
  content: "✓";
}

.so-new-steps button.is-current {
  color: var(--farro-accent);
  font-weight: 800;
}

.so-new-steps button.is-current::before {
  background: var(--farro-accent);
}

.so-new-steps button:disabled {
  opacity: .55;
}

.so-new-step {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Yönerge: adım numarası ve ne yapılacağını söyleyen tek cümle. */
.so-new-guide {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid var(--farro-surface-border);
  border-radius: 12px;
  background: var(--farro-accent-soft);
}

.so-new-guide-num {
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--farro-accent);
  color: var(--farro-card);
  font-size: 16px;
  font-weight: 800;
}

.so-new-guide h2 {
  margin: 2px 0 2px;
  color: var(--farro-accent-deep);
  font-size: 18px;
  font-weight: 800;
  line-height: 1.25;
}

.so-new-guide p {
  margin: 0;
  color: var(--farro-text-body);
  font-size: 14px;
  line-height: 1.45;
}

.so-new .so-phone-card-head h3 {
  margin: 0;
  color: var(--farro-text);
  font-size: 16px;
  font-weight: 800;
}

.so-new .so-phone-card-head h3 span {
  margin-left: 4px;
  color: var(--farro-muted);
  font-size: 13px;
  font-weight: 700;
}

.so-new fieldset {
  min-width: 0;
  margin: 0;
  padding: 0;
}

.so-new legend.so-phone-card-head {
  float: left;
  width: 100%;
  margin: 0;
}

.so-new legend + * {
  clear: both;
}

.so-new-help {
  margin: 0;
  color: var(--farro-muted);
  font-size: 13.5px;
  line-height: 1.4;
}

.so-new-card-body {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 12px 14px 14px;
}

.so-new-error,
.so-new-alert {
  margin: 0;
  padding: 12px 14px;
  border: 1px solid var(--farro-danger);
  border-radius: 10px;
  background: var(--farro-card);
  color: var(--farro-danger);
  font-size: 14.5px;
  font-weight: 700;
}

.so-new-alert {
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-weight: 600;
}

.so-new-alert strong {
  font-size: 15.5px;
}

.so-new-alert ul {
  margin: 0;
  padding-left: 18px;
}

/* Müşteri listesi. */
.so-new-account-pick,
.so-new-account-chosen {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* Arama, yapışık başlık ve ilerlemenin hemen altında kalır (60px başlık + 54px ilerleme). */
.so-new .so-search {
  top: 114px;
}

.so-new-count {
  margin: 0;
  color: var(--farro-muted);
  font-size: 13px;
}

.so-new-accounts,
.so-new-lines,
.so-new-review-lines {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  list-style: none;
}

.so-new-accounts {
  overflow: hidden;
  border: 1px solid var(--farro-surface-border);
  border-radius: 12px;
  background: var(--farro-card);
}

.so-new-accounts > li + li {
  border-top: 1px solid var(--farro-surface-border);
}

.so-new-accounts .so-results-hint {
  padding: 14px;
}

.so-new-account {
  display: flex;
  width: 100%;
  min-height: 60px;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 2px;
  padding: 10px 14px;
  border: 0;
  background: transparent;
  color: var(--farro-text);
  text-align: left;
}

.so-new-account strong {
  font-size: 15.5px;
  font-weight: 700;
  line-height: 1.3;
}

.so-new-account span {
  color: var(--farro-muted);
  font-size: 13px;
}

.so-new-account:active,
.so-new-account.is-selected {
  background: var(--farro-accent-soft);
}

.so-new-chosen {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 10px 12px 14px;
  border-color: var(--farro-success);
}

.so-new-chosen-check {
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--farro-success-soft);
  color: var(--farro-success);
}

.so-new-chosen-text {
  display: flex;
  min-width: 0;
  flex: 1 1 auto;
  flex-direction: column;
}

.so-new-chosen-text small {
  color: var(--farro-success);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .02em;
  text-transform: uppercase;
}

.so-new-chosen-text strong {
  color: var(--farro-text);
  font-size: 17px;
  font-weight: 800;
  line-height: 1.25;
}

.so-new-chosen-text span {
  color: var(--farro-muted);
  font-size: 13px;
}

.so-new-risk {
  margin: 0;
  padding: 10px 12px;
  border-radius: 10px;
  background: var(--farro-card);
  border: 1px solid var(--farro-surface-border);
  color: var(--farro-text-body);
  font-size: 13.5px;
  font-weight: 600;
}

.so-new-risk.is-over {
  border-color: var(--farro-danger);
  color: var(--farro-danger);
  font-weight: 800;
}

.so-new-notes {
  padding: 10px 12px;
  border: 1px solid var(--farro-note-border);
  border-radius: 10px;
  background: var(--farro-note-soft);
  color: var(--farro-note);
  font-size: 14px;
}

.so-new-notes ul {
  margin: 4px 0 0;
  padding-left: 18px;
  color: var(--farro-text-body);
}

.so-new-branches .so-new-help {
  padding: 10px 14px 0;
}

/* Seçenek kartları (şube) ve çipler (teslim günü, birim): seçili olan dolu çerçeve ve onay rengiyle belli olur. */
.so-new-options {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px 14px 14px;
}

.so-new-option,
.so-new-chip {
  display: flex;
  min-height: 54px;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 2px;
  padding: 8px 12px;
  border: 1.5px solid var(--farro-surface-border);
  border-radius: 10px;
  background: var(--farro-card);
  color: var(--farro-text);
  text-align: left;
}

.so-new-option strong,
.so-new-chip strong {
  font-size: 15.5px;
  font-weight: 800;
}

.so-new-option span,
.so-new-chip span {
  color: var(--farro-muted);
  font-size: 13px;
}

.so-new-option[aria-pressed="true"],
.so-new-chip[aria-pressed="true"] {
  border-color: var(--farro-accent);
  background: var(--farro-accent-soft);
  box-shadow: inset 0 0 0 1px var(--farro-accent);
}

.so-new-option[aria-pressed="true"] strong,
.so-new-chip[aria-pressed="true"] strong {
  color: var(--farro-accent-deep);
}

/* Ürün arama: sonuç listesi aramanın hemen altında, sayfanın akışında açılır. */
.so-new-search {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.so-new-results {
  overflow: hidden;
  border: 1px solid var(--farro-surface-border);
  border-radius: 12px;
  background: var(--farro-card);
  box-shadow: 0 8px 20px rgba(44, 34, 25, .08);
}

.so-new-results .so-results-hint {
  padding: 14px;
}

.so-new-result {
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 10px 8px 14px;
}

.so-new-result-text {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 2px;
}

.so-new-result-add {
  flex: 0 0 auto;
  min-width: 56px;
  padding: 8px 12px;
  border-radius: 999px;
  background: var(--farro-accent);
  color: var(--farro-card);
  font-size: 14px;
  font-weight: 800;
  text-align: center;
}

.so-new-flash {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 10px;
  background: var(--farro-success-soft);
  color: var(--farro-success);
  font-size: 14px;
  font-weight: 700;
}

.so-new-repeat {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px 14px;
  border-style: dashed;
  border-color: var(--farro-accent);
}

.so-new-repeat > div {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.so-new-repeat strong {
  color: var(--farro-text);
  font-size: 15.5px;
}

.so-new-repeat span {
  color: var(--farro-muted);
  font-size: 13.5px;
}

.so-new-repeat .so-btn {
  border-color: var(--farro-accent);
  color: var(--farro-accent);
}

.so-new-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 22px 16px 24px;
  color: var(--farro-muted);
  font-size: 14px;
  text-align: center;
}

.so-new-empty svg {
  width: 36px;
  height: 36px;
  margin-bottom: 4px;
  stroke-width: 1.6;
}

.so-new-empty strong {
  color: var(--farro-text);
  font-size: 15.5px;
}

/* Siparişteki ürün kartı: ad + çıkar, adet sayacı + birim, fiyat kaynağı + tutar, ayrıntı bağlantısı. */
.so-new-lines > li + li {
  border-top: 1px solid var(--farro-surface-border);
}

.so-new-line {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px 14px;
}

.so-new-line-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
}

.so-new-line-title {
  display: flex;
  min-width: 0;
  flex-direction: column;
}

.so-new-line-title strong {
  color: var(--farro-text);
  font-size: 15.5px;
  font-weight: 800;
  line-height: 1.3;
}

.so-new-line-title span {
  color: var(--farro-muted);
  font-size: 12.5px;
}

.so-new-line-qty {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 10px;
}

.so-new-stepper {
  grid-template-columns: 48px 76px 48px;
}

.so-new-stepper .is-remove {
  display: grid;
  place-items: center;
  color: var(--farro-danger);
}

.so-new-unit-name {
  color: var(--farro-muted);
  font-size: 14px;
  font-weight: 700;
}

.so-new-units {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.so-new-unit {
  min-height: 40px;
  padding: 0 12px;
  border: 1.5px solid var(--farro-surface-border);
  border-radius: 999px;
  background: var(--farro-card);
  color: var(--farro-text);
  font-size: 13.5px;
  font-weight: 700;
}

.so-new-unit[aria-pressed="true"] {
  border-color: var(--farro-accent);
  background: var(--farro-accent-soft);
  color: var(--farro-accent-deep);
}

.so-new-line-foot {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}

.so-new-line-price {
  color: var(--farro-muted);
  font-size: 13px;
  line-height: 1.35;
}

.so-new-line-total {
  flex: 0 0 auto;
  color: var(--farro-text);
  font-size: 15.5px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.so-new-line-edit {
  align-self: flex-start;
  min-height: 40px;
  padding: 0 12px;
  border: 1px solid var(--farro-surface-border);
  border-radius: 8px;
  background: var(--farro-content-bg);
  color: var(--farro-accent);
  font-size: 13.5px;
  font-weight: 700;
  text-align: left;
}

.so-new-totals {
  border-top: 1px solid var(--farro-surface-border);
}

/* Teslim günü çipleri yan yanadır; "Başka gün" seçilince tarih alanı altında açılır. */
.so-new-chips {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  padding: 12px 14px 14px;
}

.so-new-chip {
  min-height: 64px;
  padding: 8px;
}

.so-new-delivery-date {
  padding: 0 14px 14px;
}

.so-new-other {
  background: var(--farro-card);
}

.so-new-other > .so-new-card-body {
  margin: 0;
}

/* Kontrol: özet kartları. */
.so-new-review-lines > li + li {
  border-top: 1px dashed var(--farro-surface-border);
}

.so-new-review-line {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 14px;
}

.so-new-review-line div {
  display: flex;
  min-width: 0;
  flex-direction: column;
}

.so-new-review-line div strong {
  color: var(--farro-text);
  font-size: 15px;
  font-weight: 700;
}

.so-new-review-line div span {
  color: var(--farro-muted);
  font-size: 13.5px;
  font-variant-numeric: tabular-nums;
}

.so-new-totals-note {
  padding: 0 14px 12px;
}

/* Alt çubuk: ana düğme iki satırdır; altta adımın özeti (müşteri, ürün sayısı ve tutar, teslim günü). */
.so-new-bar .so-phone-primary {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  min-height: 56px;
  padding: 4px 12px;
}

.so-new-bar .so-phone-primary small {
  max-width: 100%;
  overflow: hidden;
  font-size: 12.5px;
  font-weight: 600;
  opacity: .9;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.so-new-bar .so-phone-primary:disabled {
  opacity: .7;
}

.so-new-bar .so-phone-secondary {
  min-height: 56px;
  min-width: 88px;
}

.dispatchable-orders-page {
  --dispatch-bg: #f3f1eb;
  --dispatch-surface: #fff;
  --dispatch-surface-soft: #faf9f6;
  --dispatch-text: #25221f;
  --dispatch-muted: #827a70;
  --dispatch-border: #e3ddd4;
  --dispatch-border-soft: #eee9e2;
  --dispatch-brand: #5e3f2b;
  --dispatch-brand-dark: #3f2a1c;
  --dispatch-brand-soft: #f1e9df;
  --dispatch-accent: #b18442;
  --dispatch-accent-soft: #f5ecd9;
  --dispatch-green: #487052;
  --dispatch-green-soft: #e7f0e9;
  --dispatch-orange: #9a6a22;
  --dispatch-orange-soft: #f6ecd8;
  --dispatch-blue: #3f687b;
  --dispatch-blue-soft: #e5eef2;
  --dispatch-shadow: 0 2px 8px rgba(44, 34, 25, .045);
  min-height: calc(100vh - 16px);
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr);
  gap: 8px;
  padding: 10px;
  background: var(--dispatch-bg);
  color: var(--dispatch-text);
}

.dispatchable-topbar {
  min-height: 60px;
  padding: 9px 11px 9px 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  border: 1px solid var(--dispatch-border);
  border-radius: 10px;
  background: var(--dispatch-surface);
  box-shadow: var(--dispatch-shadow);
}

.dispatchable-topbar-left {
  min-width: 0;
  flex: 1;
  display: flex;
  align-items: center;
  gap: 14px;
}

.dispatchable-page-icon {
  width: 36px;
  height: 36px;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 9px;
  background: var(--dispatch-brand-soft);
  color: var(--dispatch-brand);
}

.dispatchable-page-icon svg,
.dispatchable-button svg,
.dispatchable-detail-button svg,
.dispatchable-summary-icon svg {
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.dispatchable-page-icon svg {
  width: 18px;
  height: 18px;
  stroke-width: 1.8;
}

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

.dispatchable-page-heading span {
  display: block;
  margin-bottom: 1px;
  color: var(--dispatch-accent);
  font-size: 8px;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.dispatchable-page-heading h1 {
  margin: 0;
  color: var(--dispatch-brand-dark);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 18px;
  line-height: 21px;
  font-weight: 700;
}

.dispatchable-page-heading p {
  max-width: 760px;
  margin: 2px 0 0;
  overflow: hidden;
  color: var(--dispatch-muted);
  font-size: 9.5px;
  line-height: 1.3;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dispatchable-topbar-actions {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 6px;
}

.dispatchable-button {
  height: 31px;
  padding: 0 11px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: 1px solid var(--dispatch-border);
  border-radius: 7px;
  background: var(--dispatch-surface);
  color: var(--dispatch-brand-dark);
  font-size: 10px;
  font-weight: 650;
  text-decoration: none;
  transition: .15s ease;
}

.dispatchable-button:hover,
.dispatchable-button:focus {
  border-color: #cfc4b8;
  background: var(--dispatch-surface-soft);
  color: var(--dispatch-brand-dark);
}

.dispatchable-button svg {
  width: 13px;
  height: 13px;
  stroke-width: 2;
}

.dispatchable-summary-bar {
  min-height: 58px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  overflow: hidden;
  border: 1px solid var(--dispatch-border);
  border-radius: 10px;
  background: var(--dispatch-surface);
  box-shadow: var(--dispatch-shadow);
}

.dispatchable-summary-card {
  min-width: 0;
  padding: 8px 12px;
  display: flex;
  align-items: center;
  gap: 10px;
  border-right: 1px solid var(--dispatch-border-soft);
}

.dispatchable-summary-card:last-child {
  border-right: 0;
}

.dispatchable-summary-icon {
  width: 30px;
  height: 30px;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--dispatch-border-soft);
  border-radius: 8px;
  background: var(--dispatch-surface-soft);
  color: var(--dispatch-brand);
}

.dispatchable-summary-icon svg {
  width: 15px;
  height: 15px;
  stroke-width: 1.8;
}

.dispatchable-summary-content {
  min-width: 0;
}

.dispatchable-summary-content span {
  display: block;
  color: var(--dispatch-muted);
  font-size: 7.5px;
  font-weight: 800;
  letter-spacing: .05em;
  text-transform: uppercase;
}

.dispatchable-summary-content strong {
  display: block;
  margin-top: 1px;
  color: var(--dispatch-brand-dark);
  font-size: 14px;
  font-variant-numeric: tabular-nums;
  font-weight: 750;
  line-height: 16px;
}

.dispatchable-summary-content small {
  display: block;
  margin-top: 1px;
  overflow: hidden;
  color: var(--dispatch-muted);
  font-size: 8px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dispatchable-table-panel {
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--dispatch-border);
  border-radius: 10px;
  background: var(--dispatch-surface);
  box-shadow: var(--dispatch-shadow);
}

.dispatchable-table-toolbar {
  min-height: 38px;
  padding: 5px 9px 5px 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  border-bottom: 1px solid var(--dispatch-border-soft);
  background: var(--dispatch-surface-soft);
}

.dispatchable-toolbar-left {
  min-width: 0;
  flex: 1;
  display: flex;
  align-items: center;
  gap: 9px;
}

.dispatchable-toolbar-left h2 {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--dispatch-brand-dark);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}

.dispatchable-toolbar-left h2::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--dispatch-accent);
}

.dispatchable-toolbar-left .table-summary,
.dispatchable-toolbar-left > span {
  flex: 0 0 auto;
  padding: 2px 7px;
  border-radius: 999px;
  background: var(--dispatch-brand-soft);
  color: var(--dispatch-brand);
  font-size: 8px;
  font-weight: 800;
  white-space: nowrap;
}

.dispatchable-toolbar-actions {
  flex: 0 0 auto;
  margin-left: auto;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
}

.dispatchable-toolbar-actions:empty {
  display: none;
}

.dispatchable-table-wrap {
  min-height: 0;
  flex: 1;
  overflow: auto;
}

.dispatchable-orders-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
  font-size: 9.5px;
}

.dispatchable-orders-table thead {
  position: sticky;
  top: 0;
  z-index: 5;
}

.dispatchable-orders-table th {
  padding: 0;
  border-right: 1px solid var(--dispatch-border-soft);
  border-bottom: 1px solid var(--dispatch-border);
  background: #f4f1eb;
  color: var(--dispatch-muted);
  text-align: left;
  white-space: nowrap;
}

.dispatchable-orders-table thead tr:first-child th {
  height: 28px;
}

.dispatchable-orders-table .table-sort-button {
  width: 100%;
  height: 28px;
  padding: 0 7px;
  display: flex;
  align-items: center;
  gap: 5px;
  border: 0;
  background: transparent;
  color: inherit;
  font-size: 7.5px;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.dispatchable-orders-table .table-filter-row th {
  height: 30px;
  padding: 3px 5px;
  background: #faf8f4;
}

.dispatchable-orders-table .table-column-filter {
  width: 100%;
  height: 23px;
  padding: 0 6px;
  border: 1px solid #ded8d0;
  border-radius: 5px;
  background: var(--dispatch-surface);
  color: var(--dispatch-text);
  font-size: 8px;
  outline: 0;
}

.dispatchable-orders-table .table-column-filter:focus {
  border-color: var(--dispatch-accent);
}

.dispatchable-orders-table td {
  height: 39px;
  padding: 5px 7px;
  border-right: 1px solid #f3efe9;
  border-bottom: 1px solid var(--dispatch-border-soft);
  color: #3b3530;
  vertical-align: middle;
}

.dispatchable-orders-table th:last-child,
.dispatchable-orders-table td:last-child {
  border-right: 0;
}

.dispatchable-orders-table tbody tr:hover td {
  background: #fcfaf6;
}

.dispatchable-order-link {
  display: inline-block;
  max-width: 100%;
  overflow: hidden;
  color: var(--dispatch-brand);
  font-weight: 800;
  text-decoration: none;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dispatchable-order-link:hover,
.dispatchable-order-link:focus {
  text-decoration: underline;
}

.dispatchable-date {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.dispatchable-account {
  min-width: 0;
}

.dispatchable-account strong {
  display: block;
  overflow: hidden;
  color: var(--dispatch-brand-dark);
  font-size: 9.5px;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dispatchable-account span {
  display: block;
  margin-top: 1px;
  overflow: hidden;
  color: var(--dispatch-muted);
  font-size: 8px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dispatchable-number {
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  font-variant-numeric: tabular-nums;
}

.dispatchable-status-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 7px;
  border-radius: 999px;
  font-size: 8px;
  font-weight: 800;
  white-space: nowrap;
}

.dispatchable-status-badge::before {
  content: "";
  width: 5px;
  height: 5px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: currentColor;
}

.dispatchable-status-badge.status-approved {
  background: var(--dispatch-green-soft);
  color: var(--dispatch-green);
}

.dispatchable-status-badge.status-partial {
  background: var(--dispatch-orange-soft);
  color: var(--dispatch-orange);
}

.dispatchable-status-badge.status-ready {
  background: var(--dispatch-blue-soft);
  color: var(--dispatch-blue);
}

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

.dispatchable-detail-button {
  height: 25px;
  padding: 0 8px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  border: 1px solid var(--dispatch-border);
  border-radius: 6px;
  background: var(--dispatch-surface);
  color: var(--dispatch-brand-dark);
  font-size: 8px;
  font-weight: 700;
  text-decoration: none;
  transition: .15s ease;
}

.dispatchable-detail-button:hover,
.dispatchable-detail-button:focus {
  border-color: #d2c4b5;
  background: var(--dispatch-brand-soft);
  color: var(--dispatch-brand-dark);
}

.dispatchable-detail-button svg {
  width: 11px;
  height: 11px;
  stroke-width: 2;
}

.dispatchable-empty-state {
  padding: 30px;
  color: var(--dispatch-muted);
  font-size: 10px;
  text-align: center;
}

.dispatchable-table-footer {
  min-height: 35px;
  padding: 5px 9px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  border-top: 1px solid var(--dispatch-border-soft);
  background: var(--dispatch-surface-soft);
  color: var(--dispatch-muted);
  font-size: 8.5px;
}

.dispatchable-footer-legend {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.dispatchable-footer-legend span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.dispatchable-footer-legend i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
}

.dispatchable-footer-legend .is-approved {
  background: var(--dispatch-green);
}

.dispatchable-footer-legend .is-ready {
  background: var(--dispatch-blue);
}

.dispatchable-footer-legend .is-partial {
  background: var(--dispatch-orange);
}

.dispatchable-orders-table .w-order {
  width: 13%;
}

.dispatchable-orders-table .w-date {
  width: 10%;
}

.dispatchable-orders-table .w-account {
  width: 25%;
}

.dispatchable-orders-table .w-branch,
.dispatchable-orders-table .w-warehouse {
  width: 13%;
}

.dispatchable-orders-table .w-remaining {
  width: 9%;
}

.dispatchable-orders-table .w-status {
  width: 11%;
}

.dispatchable-orders-table .w-actions {
  width: 86px;
}

/* --- Sayım belgeleri ----------------------------------------------------------------------
   Liste, detay ve form DispatchableOrders dilini kullanır; burada yalnızca sayıma özgü parçalar
   durur: fazla/eksik renkleri, ilerleme çubuğu, başlık alanları ve giriş tablosu. */

.stock-count-page {
  --count-red: #a2463b;
  --count-red-soft: #f7e6e3;
  --count-muted: #8f8880;
  --count-muted-soft: #efece8;
}

.stock-count-page .dispatchable-primary-button {
  border-color: var(--dispatch-brand-dark);
  background: var(--dispatch-brand-dark);
  color: #fff;
}

.stock-count-page .dispatchable-primary-button:hover,
.stock-count-page .dispatchable-primary-button:focus {
  border-color: var(--dispatch-brand);
  background: var(--dispatch-brand);
  color: #fff;
}

.stock-count-page .dispatchable-button:disabled {
  cursor: not-allowed;
  opacity: .5;
}

.stock-count-page .dispatchable-page-heading h1 {
  display: flex;
  align-items: center;
  gap: 8px;
}

.stock-count-page .dispatchable-page-heading p {
  white-space: normal;
}

/* Rozet başlığın serif fontunu almasın. */
.stock-count-page .dispatchable-page-heading h1 .dispatchable-status-badge {
  font-family: var(--bs-body-font-family);
  letter-spacing: 0;
}

.stock-count-page .dispatchable-summary-icon.is-green {
  background: var(--dispatch-green-soft);
  color: var(--dispatch-green);
}

.stock-count-page .dispatchable-summary-icon.is-orange {
  background: var(--dispatch-orange-soft);
  color: var(--dispatch-orange);
}

.stock-count-page .dispatchable-summary-icon.is-red {
  background: var(--count-red-soft);
  color: var(--count-red);
}

.stock-count-page .dispatchable-summary-icon.is-muted {
  background: var(--count-muted-soft);
  color: var(--count-muted);
}

.stock-count-page .dispatchable-status-badge.status-cancelled {
  background: var(--count-muted-soft);
  color: var(--count-muted);
}

.stock-count-page .dispatchable-footer-legend .is-cancelled {
  background: var(--count-muted);
}

.stock-count-page .dispatchable-footer-legend .is-shortage {
  background: var(--count-red);
}

.stock-count-page .dispatchable-table-wrap .dispatchable-empty-state a {
  color: var(--dispatch-brand);
  font-weight: 700;
}

.stock-count-muted-cell {
  overflow: hidden;
  color: var(--dispatch-muted);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.stock-count-unit {
  color: var(--dispatch-muted);
  font-family: inherit;
  font-size: 7.5px;
  font-weight: 700;
}

/* Liste */

.stock-count-list-table {
  min-width: 1040px;
}

.stock-count-list-table .w-number { width: 150px; }
.stock-count-list-table .w-date { width: 92px; }
.stock-count-list-table .w-warehouse { width: 180px; }
.stock-count-list-table .w-status { width: 104px; }
.stock-count-list-table .w-progress { width: 130px; }
.stock-count-list-table .w-difference { width: 88px; }
.stock-count-list-table .w-posted { width: 118px; }
.stock-count-list-table .w-actions { width: 132px; }

.stock-count-list-table .primary-sticky-col {
  width: 150px;
  min-width: 150px;
  max-width: 150px;
}

/* Yazdırma sayfaları listesi (Admin İşlemleri) */
.print-pages-table .w-module { width: 100px; }
.print-pages-table .w-description { width: 320px; }
.print-pages-table .w-parameters { width: 190px; }
.print-pages-table .w-sample { width: 260px; }
.print-pages-table .w-actions { width: 56px; }

.print-pages-table .primary-sticky-col {
  width: 190px;
  min-width: 190px;
  max-width: 190px;
}

.print-page-view-button {
  padding: 0 7px;
}

.print-page-view-button svg {
  width: 14px;
  height: 14px;
}

.print-page-view-button.is-disabled {
  color: var(--dispatch-muted);
  background: var(--dispatch-surface-soft);
  opacity: .6;
  cursor: not-allowed;
}

/* Zayi raporu */

.stock-waste-table {
  min-width: 860px;
}

.stock-waste-table .w-source { width: 150px; }
.stock-waste-table .w-reason { width: 150px; }
.stock-waste-table .w-quantity { width: 100px; }
.stock-waste-table .w-unit { width: 80px; }
.stock-waste-table .w-count { width: 72px; }
.stock-waste-table .w-date { width: 92px; }

.stock-waste-table .primary-sticky-col {
  width: 240px;
  min-width: 240px;
  max-width: 240px;
}

/* Sipariş karşılama raporu */

.order-fulfillment-table {
  min-width: 1460px;
}

.order-fulfillment-table .w-branch { width: 160px; }
.order-fulfillment-table .w-order { width: 130px; }
.order-fulfillment-table .w-date { width: 92px; }
.order-fulfillment-table .w-stock { width: 240px; }
.order-fulfillment-table .w-unit { width: 72px; }
.order-fulfillment-table .w-kind { width: 110px; }
.order-fulfillment-table .w-quantity { width: 92px; }
.order-fulfillment-table .w-rate { width: 96px; }
.order-fulfillment-table .w-money { width: 120px; }

.order-fulfillment-table .primary-sticky-col {
  width: 220px;
  min-width: 220px;
  max-width: 220px;
}

.order-fulfillment-table td.is-short {
  color: var(--count-red);
  font-weight: 700;
}

.order-fulfillment-kind.is-outside {
  display: inline-block;
  padding: 1px 8px;
  border-radius: 999px;
  background: var(--table-accent-soft, #f5ecd9);
  color: var(--table-accent, #b18442);
  font-size: 0.72rem;
  font-weight: 700;
}

/* Toplam satırı kaydırmada altta sabit kalır; tbody dışında olduğu için filtre, sıralama ve Excel'e girmez. */
.order-fulfillment-table tfoot td {
  position: sticky;
  bottom: 0;
  z-index: var(--z-table-thead, 4);
  border-top: 1px solid var(--dispatch-border);
  background: var(--table-filter-bg, #faf8f4);
  font-weight: 800;
}

.order-fulfillment-table tfoot .primary-sticky-col {
  left: 0;
  z-index: var(--z-table-thead-sticky-col, 5);
}

/* Konsinye mutabakatı */

.consignment-reconciliation-table {
  min-width: 960px;
}

.consignment-reconciliation-table .w-warehouse { width: 200px; }
.consignment-reconciliation-table .w-quantity { width: 96px; }
.consignment-reconciliation-table .w-unit { width: 72px; }

.consignment-reconciliation-table .primary-sticky-col {
  width: 240px;
  min-width: 240px;
  max-width: 240px;
}

.consignment-reconciliation-page .dispatchable-topbar-actions .form-select {
  width: auto;
  min-width: 200px;
}

.stock-count-list-table .action-sticky-col {
  position: sticky;
  right: 0;
  z-index: var(--z-table-sticky-col, 2);
  background: var(--dispatch-surface);
}

.stock-count-list-table thead .action-sticky-col {
  z-index: var(--z-table-thead-sticky-col, 5);
  background: #f4f1eb;
}

.stock-count-list-table .table-filter-row .action-sticky-col {
  background: #faf8f4;
}

.stock-count-list-table .dispatchable-row-actions {
  gap: 4px;
}

.stock-count-list-row {
  cursor: default;
}

.stock-count-progress {
  display: flex;
  align-items: center;
  gap: 7px;
}

.stock-count-progress-bar {
  width: 58px;
  height: 5px;
  flex: 0 0 auto;
  overflow: hidden;
  border-radius: 999px;
  background: var(--dispatch-border-soft);
}

.stock-count-progress-bar i {
  height: 100%;
  display: block;
  border-radius: inherit;
  background: var(--dispatch-green);
}

/* Detay */

.stock-count-detail-table {
  min-width: 980px;
}

.stock-count-detail-table .w-line { width: 64px; }
.stock-count-detail-table .w-stock { width: 260px; }
.stock-count-detail-table .w-quantity { width: 118px; }
.stock-count-detail-table .w-state { width: 104px; }

.stock-count-detail-table .primary-sticky-col {
  width: 260px;
  min-width: 260px;
  max-width: 260px;
}

.stock-count-line-number {
  color: var(--dispatch-muted);
}

.stock-count-notice {
  min-height: 34px;
  padding: 6px 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border-bottom: 1px solid var(--dispatch-border-soft);
  background: var(--dispatch-blue-soft);
  color: var(--dispatch-blue);
  font-size: 9.5px;
}

.stock-count-notice.is-warning {
  background: var(--dispatch-orange-soft);
  color: var(--dispatch-orange);
}

.stock-count-notice a:not(.dispatchable-detail-button) {
  color: inherit;
  font-weight: 800;
}

.stock-count-difference {
  display: inline-block;
  min-width: 46px;
  padding: 2px 6px;
  border-radius: 999px;
  font-weight: 800;
  text-align: right;
}

.stock-count-difference.is-surplus {
  background: var(--dispatch-green-soft);
  color: var(--dispatch-green);
}

.stock-count-difference.is-shortage {
  background: var(--count-red-soft);
  color: var(--count-red);
}

.stock-count-difference.is-equal,
.stock-count-difference.is-pending {
  color: var(--dispatch-muted);
}

.stock-count-state {
  display: inline-flex;
  align-items: center;
  padding: 2px 7px;
  border-radius: 999px;
  font-size: 8px;
  font-weight: 800;
  white-space: nowrap;
}

.stock-count-state.is-surplus {
  background: var(--dispatch-green-soft);
  color: var(--dispatch-green);
}

.stock-count-state.is-shortage {
  background: var(--count-red-soft);
  color: var(--count-red);
}

.stock-count-state.is-equal {
  background: var(--dispatch-blue-soft);
  color: var(--dispatch-blue);
}

.stock-count-state.is-pending {
  background: var(--dispatch-orange-soft);
  color: var(--dispatch-orange);
}

.stock-count-modal .modal-body p {
  margin: 0 0 8px;
  font-size: 12px;
}

.stock-count-modal-summary {
  margin: 0 0 10px;
  padding: 0;
  display: grid;
  gap: 5px;
  list-style: none;
  font-size: 12px;
}

.stock-count-modal-summary .stock-count-state {
  min-width: 52px;
  justify-content: center;
  margin-right: 6px;
}

.stock-count-modal .stock-count-modal-note {
  color: var(--farro-muted);
  font-size: 11px;
}

/* Form */

.stock-count-header-bar {
  padding: 8px 12px;
  display: grid;
  grid-template-columns: minmax(150px, 190px) minmax(200px, 280px) minmax(130px, 150px) minmax(220px, 1fr);
  gap: 10px;
  border: 1px solid var(--dispatch-border);
  border-radius: 10px;
  background: var(--dispatch-surface);
  box-shadow: var(--dispatch-shadow);
}

.stock-count-field {
  min-width: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.stock-count-field > span {
  color: var(--dispatch-muted);
  font-size: 7.5px;
  font-weight: 800;
  letter-spacing: .05em;
  text-transform: uppercase;
}

.stock-count-field .form-control,
.stock-count-field .form-select,
.stock-count-field .erp-combobox-input {
  height: 30px;
  border-color: var(--dispatch-border);
  border-radius: 6px;
  font-size: 11px;
}

.stock-count-lines-toolbar {
  flex-wrap: wrap;
}

.stock-count-lines-toolbar .dispatchable-toolbar-left {
  flex: 0 0 auto;
}

.stock-count-lines-toolbar .dispatchable-toolbar-actions {
  margin-left: 0;
}

.stock-count-search {
  position: relative;
  min-width: 260px;
  max-width: 460px;
  flex: 1 1 320px;
  margin-left: auto;
}

.stock-count-search > svg {
  position: absolute;
  top: 50%;
  left: 9px;
  width: 13px;
  height: 13px;
  transform: translateY(-50%);
  fill: none;
  stroke: var(--dispatch-muted);
  stroke-width: 2;
  stroke-linecap: round;
  pointer-events: none;
}

.stock-count-search-input {
  width: 100%;
  height: 30px;
  padding: 0 10px 0 28px;
  border: 1px solid var(--dispatch-border);
  border-radius: 7px;
  background: var(--dispatch-surface);
  color: var(--dispatch-text);
  font-size: 11px;
  outline: 0;
}

.stock-count-search-input:focus {
  border-color: var(--dispatch-accent);
  box-shadow: 0 0 0 2px var(--dispatch-accent-soft);
}

.stock-count-search-input::-webkit-search-cancel-button {
  display: none;
  -webkit-appearance: none;
}

.stock-count-search-results {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  z-index: var(--z-table-popover, 1200);
  max-height: 320px;
  margin: 0;
  padding: 4px;
  overflow: auto;
  list-style: none;
  border: 1px solid var(--dispatch-border);
  border-radius: 8px;
  background: var(--dispatch-surface);
  box-shadow: 0 18px 45px rgba(44, 34, 25, .16);
}

.stock-count-search-item {
  padding: 6px 8px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  border-radius: 6px;
  font-size: 11px;
  cursor: pointer;
}

.stock-count-search-item strong {
  color: var(--dispatch-brand);
  font-weight: 800;
}

.stock-count-search-item span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.stock-count-search-item small {
  color: var(--dispatch-muted);
  font-size: 9.5px;
  white-space: nowrap;
}

.stock-count-search-item small.is-present {
  color: var(--dispatch-green);
  font-weight: 800;
}

.stock-count-search-item.is-active,
.stock-count-search-item:hover {
  background: var(--dispatch-brand-soft);
}

.stock-count-search-empty {
  padding: 8px;
  color: var(--dispatch-muted);
  font-size: 11px;
}

.stock-count-entry-table {
  min-width: 1160px;
}

.stock-count-entry-table .w-line { width: 44px; }
.stock-count-entry-table .w-code { width: 120px; }
.stock-count-entry-table .w-stock { width: 250px; }
.stock-count-entry-table .w-unit { width: 110px; }
.stock-count-entry-table .w-quantity { width: 112px; }
.stock-count-entry-table .w-counted { width: 120px; }
.stock-count-entry-table .w-remove { width: 40px; }

.stock-count-entry-table thead th {
  height: 28px;
  padding: 0 7px;
  font-size: 7.5px;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.stock-count-entry-table td {
  height: 36px;
  padding: 3px 7px;
}

.stock-count-entry-table tr.is-counted td {
  background: #fdfcf9;
}

/* Stok kodu kalın ve tek satır; ad kendi hücresinde, sığmazsa üç noktayla kesilir. */
.stock-count-entry-table td.stock-count-code-cell {
  font-weight: 800;
  white-space: nowrap;
}

.stock-count-entry-table td.stock-count-name-cell {
  max-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.stock-count-entry-table tr.is-missing .stock-count-code-cell {
  color: var(--count-red);
}

.stock-count-entry-table tr.is-flash td {
  animation: stock-count-flash .9s ease-out;
}

@keyframes stock-count-flash {
  from { background: var(--dispatch-accent-soft); }
}

.stock-count-unit-select,
.stock-count-qty,
.stock-count-note {
  width: 100%;
  height: 26px;
  border: 1px solid var(--dispatch-border);
  border-radius: 5px;
  background: var(--dispatch-surface);
  color: var(--dispatch-text);
  font-size: 11px;
  outline: 0;
}

.stock-count-unit-select {
  padding: 0 4px;
}

.stock-count-single-unit {
  color: var(--dispatch-muted);
  font-size: 10px;
  font-weight: 700;
}

.stock-count-qty {
  padding: 0 8px;
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  font-weight: 800;
  text-align: right;
}

.stock-count-qty::placeholder {
  color: var(--dispatch-orange);
  font-family: inherit;
  font-weight: 600;
  opacity: .8;
}

.stock-count-note {
  padding: 0 7px;
}

.stock-count-unit-select:focus,
.stock-count-qty:focus,
.stock-count-note:focus {
  border-color: var(--dispatch-accent);
  box-shadow: 0 0 0 2px var(--dispatch-accent-soft);
}

.stock-count-remove {
  width: 24px;
  height: 24px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid transparent;
  border-radius: 6px;
  background: transparent;
  color: var(--dispatch-muted);
}

.stock-count-remove svg {
  width: 12px;
  height: 12px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
}

.stock-count-remove:hover,
.stock-count-remove:focus {
  border-color: var(--count-red-soft);
  background: var(--count-red-soft);
  color: var(--count-red);
}

.stock-count-empty {
  padding: 36px 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  color: var(--dispatch-muted);
  font-size: 11px;
  text-align: center;
}

.stock-count-empty strong {
  color: var(--dispatch-brand-dark);
  font-size: 12px;
}

.stock-count-shortcuts {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.stock-count-shortcuts kbd {
  padding: 1px 4px;
  border: 1px solid var(--dispatch-border);
  border-radius: 4px;
  background: var(--dispatch-surface);
  color: var(--dispatch-brand-dark);
  font-size: 8px;
  box-shadow: none;
}

@media (max-width: 900px) {
  .stock-count-header-bar {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .stock-count-search {
    min-width: 0;
    max-width: none;
    flex-basis: 100%;
    margin-left: 0;
  }
}

/* --- Sayım formu: Excel satır ızgarası --------------------------------------------------------
   Yeni Sayım ve Düzenle ekranında (Form.cshtml) yalnızca satır tablosu Excel çalışma sayfası gibidir: her hücre
   tek piksel çizgili, başlık ve satır no hücreleri açık kahve, giriş kutusu hücreyi doldurur, odaklı hücre
   kehribar çerçeveyle belirir. Üst alanlar, butonlar ve panel ortak kart dilinde kalır. Kurallar yalnızca bu
   sayfaya bağlıdır; liste ve detay ekranı ortak tablo dilinde kalır. */
/* Renkler sayfanın dispatch paletinden gelir; çerçeve çizgisi kenarlık rengi ile soluk metnin karışımıyla
   belirginleşir. */
.stock-count-form-page {
  --sheet-grid: var(--dispatch-border);
  --sheet-grid-strong: color-mix(in srgb, var(--dispatch-border) 60%, var(--dispatch-muted));
  --sheet-header-bg: var(--dispatch-brand-soft);
  --sheet-header-text: var(--dispatch-brand-dark);
  --sheet-cell-bg: var(--dispatch-surface);
  --sheet-focus: var(--dispatch-accent);
  --sheet-focus-soft: var(--dispatch-accent-soft);
}

/* Satır ızgarası: her hücre çizgili, satır numarası Excel'in satır başlığı gibi başlık zemininde. */
.stock-count-form-page .stock-count-entry-table th,
.stock-count-form-page .stock-count-entry-table td {
  border: 1px solid var(--sheet-grid);
}

.stock-count-form-page .stock-count-entry-table thead th {
  height: 24px;
  border-bottom-color: var(--sheet-grid-strong);
  background: var(--sheet-header-bg);
  color: var(--sheet-header-text);
  text-align: center;
}

.stock-count-form-page .stock-count-entry-table td {
  height: 26px;
  padding: 0 6px;
  background: var(--sheet-cell-bg);
}

.stock-count-form-page .stock-count-entry-table tr.is-counted td,
.stock-count-form-page .stock-count-entry-table tbody tr:hover td {
  background: var(--sheet-cell-bg);
}

.stock-count-form-page .stock-count-entry-table td.stock-count-line-number {
  border-right-color: var(--sheet-grid-strong);
  background: var(--sheet-header-bg);
  color: var(--sheet-header-text);
  text-align: center;
}

/* Giriş kutuları hücreyi doldurur; çerçeve hücrenin kendisidir. */
.stock-count-form-page .stock-count-entry-table td:has(> .stock-count-unit-select),
.stock-count-form-page .stock-count-entry-table td.stock-count-counted-cell,
.stock-count-form-page .stock-count-entry-table td:has(> .stock-count-note) {
  padding: 0;
}

.stock-count-form-page .stock-count-unit-select,
.stock-count-form-page .stock-count-qty,
.stock-count-form-page .stock-count-note {
  height: 25px;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.stock-count-form-page .stock-count-unit-select:focus,
.stock-count-form-page .stock-count-qty:focus,
.stock-count-form-page .stock-count-note:focus {
  outline: 2px solid var(--sheet-focus);
  outline-offset: -2px;
  box-shadow: none;
  background: var(--sheet-cell-bg);
}

/* Odaklı hücrenin satırı Excel'deki gibi satır başlığında belirir. */
.stock-count-form-page .stock-count-entry-table tr:focus-within td.stock-count-line-number {
  background: var(--sheet-focus-soft);
  color: var(--sheet-focus);
  font-weight: 800;
}

/* Fark rozet değil, renkli düz sayı. */
.stock-count-form-page .stock-count-difference {
  min-width: 0;
  padding: 0;
  border-radius: 0;
  background: transparent;
}

.stock-count-form-page .stock-count-remove {
  border-radius: 0;
}

/* --- Sayım formu: telefon -----------------------------------------------------------------------
   Sayım depoda telefonla yapılır; masaüstü ızgarası değişmez, aşağıdakiler yalnızca 640px altında geçerlidir:
   - Kayıt butonları ekranın altına sabitlenir, tek elle ulaşılır.
   - Arama ve satır işlemleri üstte yapışık kalır; uzun listede barkod okutmak için yukarı kaydırmak gerekmez.
   - Her satır yatay kaydırma yerine bir hücre bloğuna dönüşür: stok kodu; stok adı; birim + sayılan (büyük
     kutu); sistem, ana birim ve fark; not. Kart değildir: bloklar keskin çizgiyle ayrılır, satır no solda şerit
     olarak kalır. Hücreler stock-counts.js'teki createRow'un verdiği sınıflarla yerleşir; kolon sırası değişse
     de eşleme bozulmaz.
   - Girişler 16px: iOS daha küçük yazılı kutuya odaklanınca sayfayı yakınlaştırır.
   - _Layout 650px altında kabuğu 720px'e sabitler ve içerik yüzeyi taşanı kırpar; bu sayfa açıkken kabuk
     ekran genişliğine iner ve sayfa kendi içinde dikey kayar (yapışık araç çubuğu da bu kaydırmaya bağlıdır).
     Diğer sayfaların telefon davranışı değişmez. */
@media (max-width: 640px) {
  body:has(.stock-count-form-page) .app-shell {
    min-width: 0;
  }

  body:has(.stock-count-form-page) .app-content {
    padding: 4px;
  }

  .stock-count-form-page {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    gap: 6px;
    padding: 6px 6px calc(68px + env(safe-area-inset-bottom));
  }

  .stock-count-form-page .dispatchable-topbar {
    min-height: 0;
    padding: 8px 10px;
    gap: 0;
  }

  .stock-count-form-page .dispatchable-page-heading p {
    display: none;
  }

  /* Alt çubuk: geri dön, Kaydet, Kaydet ve kapat. */
  .stock-count-form-page .dispatchable-topbar-actions {
    position: fixed;
    right: 0;
    bottom: 0;
    /* Yan menünün ikon şeridi telefonda da durur; çubuk onun sağından başlar. */
    left: var(--sidebar-collapsed-width, 0px);
    z-index: var(--z-table-popover, 1200);
    /* Ortak 820px kuralının width: 100%'ü sabit çubuğu ekran genişliğinde tutup sağdan taşırırdı. */
    width: auto;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) minmax(0, 1fr);
    gap: 6px;
    padding: 8px 8px calc(8px + env(safe-area-inset-bottom));
    border-top: 1px solid var(--sheet-grid-strong);
    background: var(--sheet-header-bg);
  }

  .stock-count-form-page .dispatchable-topbar-actions .dispatchable-button {
    width: auto;
    min-width: 0;
    height: 44px;
    padding: 0 10px;
    font-size: 13px;
    white-space: nowrap;
  }

  /* Dar çubukta kayıt butonları yalnızca yazıyla durur. */
  .stock-count-form-page .dispatchable-topbar-actions > button.dispatchable-button {
    overflow: hidden;
    font-size: 12px;
    text-overflow: ellipsis;
  }

  .stock-count-form-page .dispatchable-topbar-actions > button.dispatchable-button svg {
    display: none;
  }

  /* Geri dönüş yalnızca ok: metin ekran okuyucu için bağlantıda kalır, görünmez. */
  .stock-count-form-page .dispatchable-topbar-actions > a.dispatchable-button {
    width: 44px;
    padding: 0;
    font-size: 0;
  }

  .stock-count-form-page .dispatchable-topbar-actions > a.dispatchable-button svg {
    width: 18px;
    height: 18px;
  }

  /* Üst alanlar tek sütun. */
  .stock-count-form-page .stock-count-header-bar {
    grid-template-columns: 1fr;
  }

  .stock-count-form-page .stock-count-field .form-control,
  .stock-count-form-page .stock-count-field .form-select,
  .stock-count-form-page .stock-count-field .erp-combobox-input {
    height: 42px;
    font-size: 16px;
  }

  /* Sayfa bütün olarak kayar; panel kendi içinde kaymaz ki araç çubuğu yapışık kalabilsin. */
  .stock-count-form-page .dispatchable-topbar,
  .stock-count-form-page .stock-count-header-bar,
  .stock-count-form-page .stock-count-lines-panel {
    flex: 0 0 auto;
  }

  .stock-count-form-page .stock-count-lines-panel {
    height: auto;
    min-height: 0;
    overflow: visible;
  }

  .stock-count-form-page .stock-count-lines-wrap {
    overflow: visible;
  }

  .stock-count-form-page .stock-count-lines-toolbar {
    position: sticky;
    top: 0;
    z-index: var(--z-table-thead, 4);
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "summary"
      "search"
      "actions";
    align-items: center;
    gap: 6px;
    padding: 8px;
  }

  .stock-count-form-page .stock-count-lines-toolbar .dispatchable-toolbar-left {
    grid-area: summary;
    min-width: 0;
  }

  .stock-count-form-page .stock-count-lines-toolbar h2 {
    display: none;
  }

  .stock-count-form-page .stock-count-search {
    grid-area: search;
    min-width: 0;
    max-width: none;
    margin-left: 0;
  }

  .stock-count-form-page .stock-count-search-input {
    height: 44px;
    font-size: 16px;
  }

  .stock-count-form-page .stock-count-lines-toolbar .dispatchable-toolbar-actions {
    grid-area: actions;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
  }

  .stock-count-form-page .stock-count-lines-toolbar .dispatchable-button {
    width: 100%;
    height: 34px;
    padding: 0 8px;
    font-size: 11px;
    white-space: nowrap;
  }

  .stock-count-form-page .stock-count-lines-toolbar .dispatchable-button svg {
    display: none;
  }

  /* Satırlar hücre bloğu olur; sütun başlıkları ekran okuyucu için kalır, görünmez. */
  .stock-count-form-page .stock-count-entry-table,
  .stock-count-form-page .stock-count-entry-table tbody {
    display: block;
    width: 100%;
    min-width: 0;
  }

  .stock-count-form-page .stock-count-entry-table thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }

  .stock-count-form-page .stock-count-entry-table tr {
    display: grid;
    grid-template-columns: 30px repeat(3, minmax(0, 1fr)) 44px;
    grid-template-areas:
      "num code code code remove"
      "num name name name name"
      "num unit counted counted counted"
      "num system base diff diff"
      "num note note note note";
    border-bottom: 1px solid var(--sheet-grid-strong);
  }

  .stock-count-form-page .stock-count-entry-table td {
    min-width: 0;
    height: auto;
    min-height: 36px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 4px 8px;
    border-width: 0 0 1px 1px;
    white-space: normal;
  }

  .stock-count-form-page .stock-count-entry-table td.stock-count-line-number { grid-area: num; }
  .stock-count-form-page .stock-count-entry-table td.stock-count-code-cell { grid-area: code; }
  .stock-count-form-page .stock-count-entry-table td.stock-count-name-cell { grid-area: name; }
  .stock-count-form-page .stock-count-entry-table td.stock-count-unit-cell { grid-area: unit; }
  .stock-count-form-page .stock-count-entry-table td.stock-count-system { grid-area: system; }
  .stock-count-form-page .stock-count-entry-table td.stock-count-counted-cell { grid-area: counted; }
  .stock-count-form-page .stock-count-entry-table td.stock-count-base { grid-area: base; }
  .stock-count-form-page .stock-count-entry-table td.stock-count-difference-cell { grid-area: diff; }
  .stock-count-form-page .stock-count-entry-table td.stock-count-note-cell { grid-area: note; border-bottom: 0; }
  .stock-count-form-page .stock-count-entry-table td.stock-count-remove-cell { grid-area: remove; }

  .stock-count-form-page .stock-count-entry-table td.stock-count-line-number {
    justify-content: flex-start;
    padding: 8px 0 0;
    border-left: 0;
    border-bottom: 0;
  }

  /* Telefonda kod üstte tek satır, ad onun altında kendi satırındadır. */
  .stock-count-form-page .stock-count-entry-table td.stock-count-code-cell {
    font-size: 13px;
    white-space: nowrap;
  }

  /* Telefonda ad kesilmez, alt satıra kayar. */
  .stock-count-form-page .stock-count-entry-table td.stock-count-name-cell {
    max-width: none;
    font-size: 12px;
    white-space: normal;
  }

  /* Başlıksız hücrelerin etiketi. */
  .stock-count-form-page .stock-count-entry-table td.stock-count-unit-cell::before,
  .stock-count-form-page .stock-count-entry-table td.stock-count-system::before,
  .stock-count-form-page .stock-count-entry-table td.stock-count-counted-cell::before,
  .stock-count-form-page .stock-count-entry-table td.stock-count-base::before,
  .stock-count-form-page .stock-count-entry-table td.stock-count-difference-cell::before {
    align-self: stretch;
    color: var(--dispatch-muted);
    font-family: var(--bs-body-font-family);
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .04em;
    text-align: left;
    text-transform: uppercase;
  }

  .stock-count-form-page .stock-count-entry-table td.stock-count-unit-cell::before { content: "Birim"; }
  .stock-count-form-page .stock-count-entry-table td.stock-count-system::before { content: "Sistem"; }
  .stock-count-form-page .stock-count-entry-table td.stock-count-counted-cell::before { content: "Sayılan"; }
  .stock-count-form-page .stock-count-entry-table td.stock-count-base::before { content: "Ana birimde"; }
  .stock-count-form-page .stock-count-entry-table td.stock-count-difference-cell::before { content: "Tahmini fark"; }

  /* Sayı hücreleri değeri sağa yaslar, etiket solda kalır. */
  .stock-count-form-page .stock-count-entry-table td.numeric-col {
    align-items: flex-end;
    font-size: 13px;
  }

  .stock-count-form-page .stock-count-entry-table td.numeric-col.stock-count-line-number {
    align-items: center;
    font-size: 11px;
  }

  /* Giriş hücreleri: etiket üstte küçük, kutu hücreyi doldurur. */
  .stock-count-form-page .stock-count-entry-table td.stock-count-unit-cell,
  .stock-count-form-page .stock-count-entry-table td.stock-count-counted-cell,
  .stock-count-form-page .stock-count-entry-table td.stock-count-note-cell {
    justify-content: flex-start;
    padding: 4px 0 0;
  }

  .stock-count-form-page .stock-count-entry-table td.stock-count-unit-cell::before,
  .stock-count-form-page .stock-count-entry-table td.stock-count-counted-cell::before {
    padding: 0 8px;
  }

  .stock-count-form-page .stock-count-entry-table td.stock-count-unit-cell .stock-count-single-unit {
    padding: 8px;
    font-size: 13px;
  }

  .stock-count-form-page .stock-count-unit-select,
  .stock-count-form-page .stock-count-note {
    height: 40px;
    font-size: 16px;
  }

  .stock-count-form-page .stock-count-qty {
    height: 44px;
    font-size: 18px;
  }

  .stock-count-form-page .stock-count-entry-table td.stock-count-remove-cell {
    align-items: center;
    padding: 0;
  }

  .stock-count-form-page .stock-count-remove {
    width: 40px;
    height: 40px;
  }

  .stock-count-form-page .stock-count-remove svg {
    width: 16px;
    height: 16px;
  }

  /* Klavye kısayolları telefonda anlamsız; kuralın açıklaması kalır. */
  .stock-count-form-page .stock-count-shortcuts {
    display: none;
  }
}

.warehouse-base-stock-page {
  --inventory-surface-2: #faf8f4;
  --inventory-surface-3: #f6f2ec;
  --inventory-text: var(--dispatch-text);
  --inventory-muted: var(--dispatch-muted);
  --inventory-border: var(--dispatch-border);
  --inventory-border-soft: var(--dispatch-border-soft);
  --inventory-walnut: var(--dispatch-brand);
  --inventory-walnut-dark: var(--dispatch-brand-dark);
  --inventory-walnut-soft: var(--dispatch-brand-soft);
  --inventory-accent: var(--dispatch-accent);
  --inventory-accent-soft: rgba(178, 115, 45, 0.14);
  --inventory-green: #4c7052;
  --inventory-green-soft: #e8f0e9;
  gap: 0;
}

.warehouse-base-stock-page .warehouse-base-stock-summary {
  gap: 0;
  padding: 0;
}

.warehouse-base-stock-page .warehouse-base-stock-metric.is-total strong,
.warehouse-base-stock-page .warehouse-base-stock-quantity {
  color: var(--dispatch-brand);
}

.warehouse-base-stock-page .dispatchable-primary-button {
  text-decoration: none;
}

.warehouse-base-stock-warehouse-toolbar {
  border-bottom: 1px solid var(--dispatch-border-soft);
}

.warehouse-base-stock-tabs {
  padding: 5px 8px;
}

.warehouse-base-stock-warehouse-info {
  min-height: 40px;
}

.warehouse-base-stock-table-tools {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
}

.warehouse-base-stock-table-summary {
  flex: 0 0 auto;
  padding: 4px 8px;
  border-radius: 999px;
  background: var(--dispatch-brand-soft);
  color: var(--dispatch-brand);
  font-size: 7px;
  font-weight: 800;
  white-space: nowrap;
}

.warehouse-base-stock-table {
  width: 100%;
  min-width: 900px;
  border-collapse: collapse;
  table-layout: fixed;
  font-size: 9.5px;
}

.warehouse-base-stock-table thead {
  position: sticky;
  top: 0;
  z-index: 5;
}

.warehouse-base-stock-table th {
  padding: 0;
  border-right: 1px solid var(--dispatch-border-soft);
  border-bottom: 1px solid var(--dispatch-border);
  background: #f4f1eb;
  color: var(--dispatch-muted);
  text-align: left;
  white-space: nowrap;
}

.warehouse-base-stock-table thead tr:first-child th {
  height: 28px;
}

.warehouse-base-stock-table .table-sort-button {
  width: 100%;
  height: 28px;
  padding: 0 7px;
  display: flex;
  align-items: center;
  gap: 5px;
  border: 0;
  background: transparent;
  color: inherit;
  font-size: 7.5px;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.warehouse-base-stock-table .table-filter-row th {
  height: 30px;
  padding: 3px 5px;
  background: #faf8f4;
}

.warehouse-base-stock-table .table-column-filter {
  width: 100%;
  height: 23px;
  padding: 0 6px;
  border: 1px solid #ded8d0;
  border-radius: 5px;
  background: var(--dispatch-surface);
  color: var(--dispatch-text);
  font-size: 8px;
  outline: 0;
}

.warehouse-base-stock-table .table-column-filter:focus {
  border-color: var(--dispatch-accent);
}

.warehouse-base-stock-table td {
  height: 39px;
  padding: 5px 7px;
  border-right: 1px solid #f3efe9;
  border-bottom: 1px solid var(--dispatch-border-soft);
  color: #3b3530;
  vertical-align: middle;
}

.warehouse-base-stock-table th:last-child,
.warehouse-base-stock-table td:last-child {
  border-right: 0;
}

.warehouse-base-stock-table tbody tr:hover td {
  background: #fcfaf6;
}

.warehouse-base-stock-table strong {
  display: block;
  overflow: hidden;
  color: var(--dispatch-brand);
  font-size: 9.5px;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.warehouse-base-stock-table .numeric-col {
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.warehouse-base-stock-table .w-period,
.warehouse-base-stock-table .primary-sticky-col {
  width: 150px;
  min-width: 150px;
  max-width: 150px;
}

.warehouse-base-stock-table .w-year,
.warehouse-base-stock-table .w-month {
  width: 78px;
}

.warehouse-base-stock-table .w-stock-code {
  width: 130px;
}

.warehouse-base-stock-table .w-stock-name {
  width: 280px;
}

.warehouse-base-stock-table .w-quantity {
  width: 130px;
}

.warehouse-base-stock-table .w-actions {
  width: 90px;
}

.warehouse-base-stock-header-actions {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}

.warehouse-base-stock-period-field {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  color: #554741;
  font-size: 12px;
  font-weight: 700;
}

.warehouse-base-stock-period-field span {
  white-space: nowrap;
}

.warehouse-base-stock-period-field select {
  min-width: 76px;
  height: 30px;
  border: 1px solid #cfc4ba;
  border-radius: 2px;
  padding: 0 8px;
  color: #3f342f;
  background: #fffdfb;
  font-size: 12px;
  font-weight: 700;
}

.warehouse-base-stock-period-field select:focus {
  border-color: #a99589;
  outline: 0;
  box-shadow: 0 0 0 0.15rem rgba(127, 47, 36, 0.16);
}

.warehouse-base-stock-sheet-panel {
  flex: 1 1 auto;
  display: flex;
  min-height: 0;
  flex-direction: column;
  overflow: hidden;
  background: #fffdfb;
}

.warehouse-base-stock-sheet-toolbar {
  flex: 0 0 auto;
  min-height: 38px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 6px 10px;
  border-bottom: 1px solid #ded7d0;
  color: #554741;
  background: #f7f1ea;
  font-size: 12px;
  font-weight: 700;
}

.warehouse-base-stock-sheet-actions {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}

.warehouse-base-stock-save-status {
  color: #75665e;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}

.warehouse-base-stock-save-status.is-pending {
  color: #7f2f24;
}

.warehouse-base-stock-save-status.is-success {
  color: #3f6f47;
}

.warehouse-base-stock-save-status.is-error {
  color: #a33a2c;
}

.warehouse-base-stock-sheet-wrap {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
}

.warehouse-base-stock-sheet {
  width: 100%;
  min-width: 900px;
  border-collapse: collapse;
  table-layout: fixed;
  background: #fff;
  font-size: 12px;
}

.warehouse-base-stock-sheet thead {
  position: sticky;
  top: 0;
  z-index: 2;
}

.warehouse-base-stock-sheet th,
.warehouse-base-stock-sheet td {
  height: 32px;
  border-right: 1px solid #ded7d0;
  border-bottom: 1px solid #ded7d0;
  padding: 5px 8px;
  vertical-align: middle;
}

.warehouse-base-stock-sheet th {
  color: #3f342f;
  background: #f4ece4;
  font-size: 11px;
  font-weight: 800;
  text-align: left;
  white-space: nowrap;
}

.warehouse-base-stock-sheet th:nth-child(1) {
  width: 260px;
}

.warehouse-base-stock-sheet th:nth-child(2) {
  width: 150px;
}

.warehouse-base-stock-sheet th:nth-child(3) {
  width: 150px;
}

.warehouse-base-stock-sheet th:nth-child(4),
.warehouse-base-stock-sheet th:nth-child(5) {
  width: 90px;
}

.warehouse-base-stock-sheet th:nth-child(6) {
  width: 150px;
}

.warehouse-base-stock-sheet td {
  color: #3f342f;
  outline: 0;
  background: #fff;
}

.warehouse-base-stock-cell-input {
  width: 100%;
  height: 100%;
  min-height: 22px;
  border: 0;
  outline: 0;
  padding: 0;
  color: #3f342f;
  background: transparent;
  font: inherit;
}

.warehouse-base-stock-sheet tbody tr:nth-child(even) td {
  background: #fffaf5;
}

.warehouse-base-stock-sheet td:focus,
.warehouse-base-stock-sheet td:focus-within {
  position: relative;
  z-index: 1;
  box-shadow: inset 0 0 0 2px #8f372b;
}

.warehouse-base-stock-sheet .numeric-cell {
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.warehouse-base-stock-lookup-list .erp-combobox-option strong,
.warehouse-base-stock-lookup-list .erp-combobox-option span {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.warehouse-base-stock-lookup-list .erp-combobox-option strong {
  color: #342b27;
  font-size: 11px;
  font-weight: 800;
}

.warehouse-base-stock-lookup-list .erp-combobox-option span {
  margin-top: 2px;
  color: #8a7b71;
  font-size: 10px;
}

.current-account-list-page .dispatchable-page-icon,
.current-account-list-page .dispatchable-summary-icon {
  color: var(--dispatch-brand);
}

.current-account-list-page {
  grid-template-rows: auto minmax(0, 1fr);
}

.current-account-list-page .dispatchable-primary-button {
  border-color: var(--dispatch-brand-dark);
  background: var(--dispatch-brand-dark);
  color: #fff;
}

.current-account-list-page .dispatchable-primary-button:hover,
.current-account-list-page .dispatchable-primary-button:focus {
  border-color: var(--dispatch-brand);
  background: var(--dispatch-brand);
  color: #fff;
}

/* Cari ekstre tam yükseklikli bir tablo ekranıdır. Ortak .dispatchable-orders-page ızgarası üç
   satır (auto auto 1fr) varsayar; bu sayfada doğrulama özeti ve uyarılar araya girdiği için özet
   şeridi esneyen 1fr satırına düşüyor ve yüksekliği tablo uzunluğuyla değişiyordu. Burada sayfa
   flex kolondur: üstteki her parça kendi yüksekliğinde kalır, kalan alanı tablo paneli alır ve
   tablo kendi içinde kayar. */
.dispatchable-orders-page.current-account-statement-page {
  height: 100%;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.current-account-statement-page > * {
  flex: 0 0 auto;
}

.current-account-statement-page > .validation-summary-valid {
  display: none;
}

.current-account-statement-page > .dispatchable-table-panel {
  flex: 1 1 auto;
  min-height: 0;
}

.current-account-statement-page .dispatchable-table-panel .managed-table-shell {
  max-height: none;
  flex: 1 1 auto;
  min-height: 0;
}

/* Dar ekranda özet kartları alt alta dizilir ve tabloya yer kalmaz; sayfa normal akışa döner. */
@media (max-width: 820px) {
  .dispatchable-orders-page.current-account-statement-page {
    height: auto;
    min-height: 100vh;
    overflow: visible;
  }
}

.current-account-list-page .current-account-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
  font-size: 9.5px;
}

.current-account-list-page .current-account-cards-table {
  min-width: 1480px;
}

.current-account-list-page .current-account-branches-table {
  min-width: 1090px;
}

.current-account-list-page .current-account-table thead {
  position: sticky;
  top: 0;
  z-index: 5;
}

.current-account-list-page .current-account-table th {
  padding: 0;
  border-right: 1px solid var(--dispatch-border-soft);
  border-bottom: 1px solid var(--dispatch-border);
  background: #f4f1eb;
  color: var(--dispatch-muted);
  text-align: left;
  white-space: nowrap;
}

.current-account-list-page .current-account-table thead tr:first-child th {
  height: 28px;
}

.current-account-list-page .current-account-table .table-sort-button {
  width: 100%;
  height: 28px;
  padding: 0 7px;
  display: flex;
  align-items: center;
  gap: 5px;
  border: 0;
  background: transparent;
  color: inherit;
  font-size: 7.5px;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.current-account-list-page .current-account-table .table-filter-row th {
  height: 30px;
  padding: 3px 5px;
  background: #faf8f4;
}

.current-account-list-page .current-account-table .table-column-filter {
  width: 100%;
  height: 23px;
  padding: 0 6px;
  border: 1px solid #ded8d0;
  border-radius: 5px;
  background: var(--dispatch-surface);
  color: var(--dispatch-text);
  font-size: 8px;
  outline: 0;
}

.current-account-list-page .current-account-table .table-column-filter:focus {
  border-color: var(--dispatch-accent);
}

.current-account-list-page .current-account-table td {
  height: 39px;
  padding: 5px 7px;
  border-right: 1px solid #f3efe9;
  border-bottom: 1px solid var(--dispatch-border-soft);
  color: #3b3530;
  vertical-align: middle;
}

.current-account-list-page .current-account-table th:last-child,
.current-account-list-page .current-account-table td:last-child {
  border-right: 0;
}

.current-account-list-page .current-account-table tbody tr:hover td {
  background: #fcfaf6;
}

.current-account-list-page .current-account-table strong,
.current-account-list-page .current-account-table .current-account-code-link {
  display: block;
  overflow: hidden;
  color: var(--dispatch-brand);
  font-size: 9.5px;
  font-weight: 800;
  text-decoration: none;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.current-account-list-page .current-account-table .muted-cell {
  display: block;
  margin-top: 1px;
  overflow: hidden;
  color: var(--dispatch-muted);
  font-size: 8px;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.current-account-list-page .current-account-table .numeric-col {
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.current-account-list-page .current-account-table .status-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 7px;
  border-radius: 999px;
  font-size: 8px;
  font-weight: 800;
  white-space: nowrap;
}

.current-account-list-page .current-account-table .status-badge::before {
  content: "";
  width: 5px;
  height: 5px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: currentColor;
}

.current-account-list-page .current-account-table .status-badge.is-active,
.current-account-list-page .current-account-table .status-badge.status-success {
  background: var(--dispatch-green-soft);
  color: var(--dispatch-green);
}

.current-account-list-page .current-account-table .status-badge.is-draft,
.current-account-list-page .current-account-table .status-badge.status-info {
  background: var(--dispatch-blue-soft);
  color: var(--dispatch-blue);
}

.current-account-list-page .current-account-table .status-badge.is-passive,
.current-account-list-page .current-account-table .status-badge.status-danger {
  background: #f7e7e3;
  color: #a24d3f;
}

.current-account-list-page .current-account-table .status-badge.status-warning {
  background: var(--dispatch-orange-soft);
  color: var(--dispatch-orange);
}

.current-account-list-page .current-account-cards-table .w-code {
  width: 156px;
}

.current-account-list-page .current-account-cards-table .w-title {
  width: 260px;
}

.current-account-list-page .current-account-cards-table .w-trade-name {
  width: 200px;
}

.current-account-list-page .current-account-cards-table .w-type,
.current-account-list-page .current-account-cards-table .w-risk,
.current-account-list-page .current-account-cards-table .w-tax,
.current-account-list-page .current-account-cards-table .w-phone,
.current-account-list-page .current-account-cards-table .w-city,
.current-account-list-page .current-account-cards-table .w-discount {
  width: 120px;
}

.current-account-list-page .current-account-cards-table .w-email {
  width: 180px;
}

.current-account-list-page .current-account-cards-table .w-currency,
.current-account-list-page .current-account-cards-table .w-term,
.current-account-list-page .current-account-cards-table .w-branch-count {
  width: 72px;
}

.current-account-list-page .current-account-cards-table .w-limit,
.current-account-list-page .current-account-cards-table .w-balance {
  width: 112px;
}

.current-account-list-page .current-account-cards-table .w-einvoice,
.current-account-list-page .current-account-cards-table .w-status {
  width: 96px;
}

/* Sabit düzende genişliği olmayan kolon 0'a düşer; ikon butonlu işlem kolonu da genişlik ister. */
.current-account-list-page .current-account-cards-table .w-actions {
  width: 52px;
}

/* Cari kodu ve adı ayrı kolonlardır: kod solda sabit ve dar, ad yanında geniş. */
.current-account-list-page .current-account-branches-table .w-account-code {
  width: 110px;
}

.current-account-list-page .current-account-branches-table .w-account-title {
  width: 220px;
}

.current-account-list-page .current-account-branches-table .w-branch-code {
  width: 120px;
}

.current-account-list-page .current-account-branches-table .w-branch-name {
  width: 220px;
}

.current-account-list-page .current-account-branches-table .w-city {
  width: 150px;
}

.current-account-list-page .current-account-branches-table .w-short-name {
  width: 140px;
}

.current-account-list-page .current-account-branches-table .w-head-office,
.current-account-list-page .current-account-branches-table .w-orders,
.current-account-list-page .current-account-branches-table .w-status {
  width: 110px;
}

.current-account-list-page .current-account-branches-table .w-branch-actions {
  width: 72px;
  text-align: center;
}

.current-account-list-page .current-account-notes-table {
  min-width: 900px;
}

.current-account-list-page .current-account-notes-table .w-account {
  width: 220px;
}

.current-account-list-page .current-account-notes-table .w-note {
  width: 420px;
}

.current-account-list-page .current-account-notes-table .w-target,
.current-account-list-page .current-account-notes-table .w-status {
  width: 100px;
}

.current-account-list-page .current-account-notes-table .w-note-actions {
  width: 72px;
  text-align: center;
}

/* A note is a sentence, not a code: let it wrap instead of being cut to one line. */
.current-account-list-page .current-account-notes-table .current-account-note-text-cell {
  white-space: normal;
}

/* Row-sized variant of .erp-icon-button: the 32px header button would deepen every row. */
.erp-row-eye-button {
  width: 26px;
  height: 26px;
}

.erp-row-eye-button svg {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2;
}

@media (max-width: 1100px) {
  .dispatchable-summary-bar {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .dispatchable-summary-card:nth-child(2) {
    border-right: 0;
  }

  .dispatchable-summary-card:nth-child(-n+2) {
    border-bottom: 1px solid var(--dispatch-border-soft);
  }

  .dispatchable-page-heading p {
    max-width: 500px;
  }
}

@media (max-width: 820px) {
  .dispatchable-orders-page {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
  }

  .dispatchable-topbar {
    align-items: flex-start;
    flex-direction: column;
  }

  .dispatchable-topbar-actions {
    width: 100%;
  }

  .dispatchable-button {
    width: 100%;
  }

  .dispatchable-summary-bar {
    grid-template-columns: 1fr;
  }

  .dispatchable-summary-card {
    border-right: 0;
    border-bottom: 1px solid var(--dispatch-border-soft);
  }

  .dispatchable-summary-card:last-child {
    border-bottom: 0;
  }

  .dispatchable-table-panel {
    min-height: 520px;
  }

  .dispatchable-table-toolbar {
    align-items: stretch;
    flex-direction: column;
  }

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

  .dispatchable-orders-table {
    min-width: 1000px;
  }
}

.production-inclusion-state {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  margin-top: 5px;
}

.production-inclusion-state > span:last-child {
  color: #806f65;
  font-size: 10px;
  font-weight: 800;
}

.production-inclusion-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #d8d0c7;
  border-radius: 2px;
  padding: 2px 6px;
  font-size: 10px;
  font-style: normal;
  font-weight: 900;
  white-space: nowrap;
}

.production-inclusion-pill.is-empty {
  color: #74645b;
  background: #f1ece7;
}

.production-inclusion-pill.is-partial {
  border-color: #d5b06a;
  color: #78521b;
  background: #fff3d7;
}

.production-inclusion-pill.is-complete {
  border-color: #b9ceb9;
  color: #28513b;
  background: #e8f1ea;
}

.production-order-detail-screen {
  --po-bg: #f3f1eb;
  --po-surface: #fff;
  --po-surface2: #faf8f4;
  --po-text: #28221e;
  --po-muted: #81776d;
  --po-border: #e1dbd3;
  --po-border2: #eee9e3;
  --po-walnut: #5d3a25;
  --po-walnut2: #3f281b;
  --po-walnut-soft: #eee5dc;
  --po-accent: #b2732d;
  --po-accent-soft: #f6ead8;
  --po-green: #4c7052;
  --po-green-soft: #e8f0e9;
  --po-orange: #9a6a22;
  --po-orange-soft: #f6ecd8;
  --po-red: #a24d3f;
  --po-red-soft: #f7e7e3;
  --po-shadow: 0 2px 10px rgba(62, 43, 29, 0.045);
  min-height: 0;
  height: 100%;
  padding: 10px;
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr);
  gap: 8px;
  overflow: hidden;
  background: var(--po-bg);
  color: var(--po-text);
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
}

.production-order-detail-card {
  background: var(--po-surface);
  border: 1px solid var(--po-border);
  border-radius: 10px;
  box-shadow: var(--po-shadow);
}

.production-order-detail-header {
  min-height: 64px;
  padding: 9px 10px 9px 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
}

.production-order-detail-header-main {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 12px;
}

.production-order-detail-header-icon {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 9px;
  background: var(--po-walnut-soft);
  color: var(--po-walnut);
  flex: none;
}

.production-order-detail-header-icon svg {
  width: 19px;
  height: 19px;
}

.production-order-detail-heading {
  min-width: 0;
}

.production-order-detail-eyebrow {
  display: block;
  color: var(--po-accent);
  font-size: 7.5px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.production-order-detail-title-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.production-order-detail-title-row h1 {
  margin: 0;
  color: var(--po-walnut2);
  font: 700 18px/21px Georgia, serif;
}

.production-order-detail-meta {
  margin-top: 3px;
  display: flex;
  gap: 10px;
  color: var(--po-muted);
  font-size: 8px;
}

.production-order-detail-meta span + span::before {
  content: "•";
  margin-right: 8px;
  color: #c8beb4;
}

.production-order-detail-actions {
  display: flex;
  gap: 6px;
  align-items: center;
  justify-content: flex-end;
}

.production-order-detail-actions form {
  margin: 0;
}

.production-order-detail-btn {
  height: 31px;
  padding: 0 10px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--po-border);
  border-radius: 7px;
  background: #fff;
  color: var(--po-walnut2);
  text-decoration: none;
  font-size: 8.5px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
}

.production-order-detail-btn:hover,
.production-order-detail-btn:focus {
  background: var(--po-surface2);
  color: var(--po-walnut2);
}

.production-order-detail-btn-primary {
  background: var(--po-walnut2);
  border-color: var(--po-walnut2);
  color: #fff;
}

.production-order-detail-btn-primary:hover,
.production-order-detail-btn-primary:focus {
  background: var(--po-walnut);
  color: #fff;
}

.production-order-detail-btn-danger {
  color: var(--po-red);
  border-color: #e7cbc5;
}

.production-order-detail-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 8px;
  border-radius: 999px;
  font-size: 7.5px;
  font-weight: 800;
  white-space: nowrap;
}

.production-order-detail-badge::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
}

.production-order-detail-badge.production,
.production-order-detail-badge.ready {
  background: var(--po-orange-soft);
  color: var(--po-orange);
}

.production-order-detail-badge.production::before,
.production-order-detail-badge.ready::before {
  background: var(--po-orange);
}

.production-order-detail-badge.complete {
  background: var(--po-green-soft);
  color: var(--po-green);
}

.production-order-detail-badge.complete::before {
  background: var(--po-green);
}

.production-order-detail-badge.danger {
  background: var(--po-red-soft);
  color: var(--po-red);
}

.production-order-detail-badge.danger::before {
  background: var(--po-red);
}

.production-order-detail-badge.draft {
  background: #f0eeeb;
  color: #80776e;
}

.production-order-detail-badge.draft::before {
  background: #a79d94;
}

.production-order-detail-kpis {
  min-height: 35px;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  overflow: hidden;
}

.production-order-detail-kpi {
  min-height: 35px;
  padding: 3px 8px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  border-right: 1px solid var(--po-border2);
}

.production-order-detail-kpi:last-child {
  border-right: 0;
}

.production-order-detail-kpi span {
  color: var(--po-muted);
  font-size: 6.5px;
  font-weight: 800;
  letter-spacing: 0.035em;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.production-order-detail-kpi strong {
  color: var(--po-walnut2);
  font-size: 10.5px;
  line-height: 1;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.production-order-detail-kpi.attention {
  background: #fffaf4;
}

.production-order-detail-kpi.attention strong {
  color: var(--po-orange);
}

.production-order-detail-kpi.next {
  background: #f5e8e5;
}

.production-order-detail-kpi.next strong {
  font-size: 8.5px;
}

.production-order-detail-main {
  min-height: 0;
  display: grid;
  grid-template-columns: 255px 18px minmax(0, 1fr);
}

/* Kapalıyken sütun hidden'dır ve ızgaradan çıkar; yalnızca çizgi ve tablo kalır. */
.production-order-detail-main.is-side-collapsed {
  grid-template-columns: 18px minmax(0, 1fr);
}

/* Sütunun kendi display kuralı hidden'ı ezmesin. */
.production-order-detail-side[hidden] {
  display: none;
}

/* Sütunla tablo arasındaki kalın çizgi; bütünü tıklanır, butonu ortada. */
.production-order-detail-side-rail {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  cursor: pointer;
}

.production-order-detail-side-rail::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 4px;
  transform: translateX(-50%);
  border-radius: 999px;
  background: var(--po-border);
  transition: background 0.15s ease;
}

.production-order-detail-side-rail:hover::before {
  background: var(--po-accent);
}

.production-order-detail-side-toggle {
  position: relative;
  width: 18px;
  height: 30px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--po-border);
  border-radius: 6px;
  background: var(--po-surface);
  color: var(--po-walnut2);
  font-size: 14px;
  font-weight: 800;
  line-height: 1;
  cursor: pointer;
}

.production-order-detail-side-rail:hover .production-order-detail-side-toggle,
.production-order-detail-side-toggle:focus-visible {
  border-color: var(--po-accent);
  color: var(--po-accent);
}

.production-order-detail-rail-notes {
  position: relative;
  min-width: 16px;
  height: 16px;
  padding: 0 3px;
  border-radius: 999px;
  background: var(--farro-note);
  color: var(--farro-card);
  font-size: 8px;
  font-weight: 800;
  line-height: 16px;
  text-align: center;
}

.production-order-detail-side {
  min-height: 0;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 8px;
}

.production-order-detail-panel {
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.production-order-detail-panel-head {
  min-height: 34px;
  padding: 0 10px 0 11px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--po-surface2);
  border-bottom: 1px solid var(--po-border2);
  flex: none;
}

.production-order-detail-panel-head h2 {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 7px;
  color: var(--po-walnut2);
  font: 700 11px Georgia, serif;
}

.production-order-detail-panel-head h2::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--po-accent);
}

.production-order-detail-sub {
  color: var(--po-muted);
  font-size: 7px;
}

.production-order-detail-facts {
  margin: 0;
  padding: 7px 9px;
}

.production-order-detail-fact {
  min-height: 30px;
  display: grid;
  grid-template-columns: 87px minmax(0, 1fr);
  align-items: center;
  gap: 7px;
  border-bottom: 1px dashed var(--po-border);
}

.production-order-detail-fact:last-child {
  border-bottom: 0;
}

.production-order-detail-fact dt {
  color: var(--po-muted);
  font-size: 7px;
  font-weight: 800;
  text-transform: uppercase;
}

.production-order-detail-fact dd {
  margin: 0;
  font-size: 8.3px;
  font-weight: 650;
  overflow: hidden;
  text-overflow: ellipsis;
}

.production-order-detail-notes-body {
  min-height: 0;
  flex: 1;
  overflow: auto;
  padding: 8px;
}

/* Ortak not kutusu 12px'lik ekranlar için; bu ekranın küçük ölçeğine indirilir. */
.production-order-detail-notes-body .account-notes-panel {
  padding: 7px 9px;
  font-size: 8.3px;
}

.production-order-detail-notes-body .account-notes-title {
  font-size: 7px;
}

.production-order-detail-notes-body .account-notes-list {
  padding-left: 13px;
}

.production-order-detail-table-wrap {
  min-height: 0;
  flex: 1;
  overflow: auto;
}

/* The lines panel carries lines, steps and consumption as tabs. The panel head becomes the tab
   strip; the open pane takes the rest of the panel and scrolls on its own, so the screen keeps
   one scrolling region whichever tab is open. */
.production-order-detail-tabs {
  padding: 0 6px;
  justify-content: flex-start;
  align-items: stretch;
  gap: 2px;
}

.production-order-detail-tab {
  margin-bottom: -1px;
  padding: 0 10px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border: 0;
  border-bottom: 2px solid transparent;
  background: transparent;
  color: var(--po-muted);
  font: 700 11px Georgia, serif;
  cursor: pointer;
}

.production-order-detail-tab:hover,
.production-order-detail-tab:focus-visible {
  color: var(--po-walnut2);
}

.production-order-detail-tab.active {
  border-bottom-color: var(--po-accent);
  color: var(--po-walnut2);
}

.production-order-detail-tab-content {
  min-height: 0;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.production-order-detail-tab-content > .tab-pane.active {
  min-height: 0;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.production-order-detail-tab-sub {
  flex: none;
  padding: 5px 11px 4px;
  border-bottom: 1px solid var(--po-border2);
}

.production-order-detail-tab-scroll {
  min-height: 0;
  flex: 1;
  overflow: auto;
}

/* Adımlar sekmesi: solda ürün listesi, sağda seçili ürünün adımları. İkisi ayrı kayar; sekme
   sabit yükseklikli ekranın kalanını doldurur. */
.production-order-steps-layout {
  min-height: 0;
  flex: 1;
  display: grid;
  grid-template-columns: minmax(220px, 280px) minmax(0, 1fr);
  font-size: 8.5px;
}

.production-order-steps-list {
  min-height: 0;
  overflow: auto;
  display: flex;
  flex-direction: column;
  border-right: 1px solid var(--po-border2);
  background: var(--po-surface2);
}

.production-order-steps-item {
  padding: 7px 10px;
  display: flex;
  flex-direction: column;
  gap: 3px;
  border: 0;
  border-bottom: 1px solid var(--po-border2);
  border-left: 3px solid transparent;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.production-order-steps-item:hover {
  background: var(--po-surface);
}

.production-order-steps-item.active {
  border-left-color: var(--po-accent);
  background: var(--po-surface);
}

.production-order-steps-item:focus-visible {
  outline: 2px solid var(--po-accent);
  outline-offset: -2px;
}

.production-order-steps-item-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 6px;
}

.production-order-steps-item-count {
  color: var(--po-muted);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* Ürün listesi de sekmenin genel ölçeğinden 2px büyük: kart içindeki sabit boyutlu kod, ad ve
   soluk metin ayrı ayrı büyütülür, rozet ve sayaç 10.5px'i devralır. */
.production-order-steps-list {
  font-size: 10.5px;
}

.production-order-steps-list .production-order-detail-code {
  font-size: 10.8px;
}

.production-order-steps-list .production-order-detail-name {
  font-size: 9.3px;
}

.production-order-steps-list .production-order-detail-muted {
  font-size: 9px;
}

.production-order-steps-item-bar {
  height: 5px;
}

.production-order-steps-item .production-order-steps-pill {
  align-self: flex-start;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}

.production-order-steps-panels {
  min-height: 0;
  overflow: auto;
  padding: 10px 12px 12px;
}

.production-order-steps-panel-head {
  margin-bottom: 10px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

.production-order-steps-empty {
  padding: 18px 0;
  color: var(--po-muted);
}

@media (max-width: 900px) {
  .production-order-steps-layout {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: minmax(0, 40%) minmax(0, 1fr);
  }

  .production-order-steps-list {
    border-right: 0;
    border-bottom: 1px solid var(--po-border);
  }
}

.production-order-steps-pill {
  display: inline-flex;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--po-walnut-soft);
  color: var(--po-walnut2);
  font-weight: 700;
  white-space: nowrap;
}

.production-order-steps-pill.is-running {
  background: var(--po-accent-soft);
  color: var(--po-accent);
}

/* workshop-live.js adım standart süresini geçince sayaca is-overrun ekler. */
.production-order-steps-pill .is-overrun {
  color: var(--po-red);
}

.production-order-steps-pill.is-done {
  background: var(--po-green-soft);
  color: var(--po-green);
}

.production-order-steps-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--po-surface);
  border: 1px solid var(--po-border2);
  border-radius: 7px;
}

.production-order-steps-table th,
.production-order-steps-table td {
  padding: 4px 7px;
  border-bottom: 1px solid var(--po-border2);
  text-align: left;
  white-space: normal;
}

/* Adım satırındaki göz ikonu adım penceresini açar; sıradaki adımınki işlem sunar ve vurgu
   renginde durur. Kaynak butonuyla aynı görünür ama ayrı sınıftır: kaynak açılır penceresinin
   JS'i kendi sınıfındaki tıklamayı durdurur, bu da modalın açılmasını engellerdi. */
.production-order-steps-action-col {
  width: 40px;
  text-align: center;
}

.production-order-steps-eye {
  width: 24px;
  height: 24px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--po-border);
  border-radius: 6px;
  background: var(--po-surface);
  color: var(--po-walnut2);
  cursor: pointer;
}

.production-order-steps-eye svg {
  width: 14px;
  height: 14px;
}

.production-order-steps-eye:hover,
.production-order-steps-eye:focus-visible {
  border-color: var(--po-accent);
  color: var(--po-accent);
}

.production-order-steps-eye.is-actionable {
  border-color: var(--po-accent);
  background: var(--po-accent);
  color: var(--po-surface);
}

/* Adım tablosu atölyeden okunur; başlık ve satırlar sekmenin 8.5px'lik genel ölçeğinden 3px
   büyük. Satır yüksekliği ve dolgusu aynı kalır. */
.production-order-steps-table th,
.production-order-steps-table td {
  font-size: 11.5px;
}

.production-order-steps-table td .production-order-detail-muted {
  font-size: 10px;
}

.production-order-steps-table th {
  color: var(--po-muted);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .03em;
}

.production-order-detail-table {
  width: 100%;
  min-width: 1060px;
  border-collapse: collapse;
  table-layout: fixed;
  font-size: 8.5px;
}

.production-order-detail-table thead {
  position: sticky;
  top: 0;
  z-index: 4;
}

.production-order-detail-table th {
  height: 28px;
  padding: 0 6px;
  background: #f4f1eb;
  border-right: 1px solid var(--po-border2);
  border-bottom: 1px solid var(--po-border);
  color: var(--po-muted);
  font-size: 6.8px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-align: left;
  text-transform: uppercase;
  white-space: nowrap;
}

/* Asgari yükseklik; yönlendirme notu olan satır içeriği kadar uzar. */
.production-order-detail-table tbody tr {
  height: 36px;
}

.production-order-detail-table td {
  height: 36px;
  padding: 3px 6px;
  border-right: 1px solid #f3efe9;
  border-bottom: 1px solid var(--po-border2);
  vertical-align: middle;
}

.production-order-detail-table tbody tr:hover {
  background: #fcfaf6;
}

.production-order-detail-table .diff-row {
  background: #fffdf9;
}

.production-order-detail-table .num {
  text-align: right;
  font-family: Consolas, monospace;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.production-order-detail-code {
  display: block;
  color: var(--po-walnut2);
  font-size: 8.8px;
  font-weight: 800;
}

.production-order-detail-name {
  display: block;
  margin-top: 1px;
  color: var(--po-muted);
  font-size: 7.3px;
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.production-order-detail-diff {
  display: inline-flex;
  min-width: 62px;
  justify-content: center;
  padding: 3px 6px;
  border-radius: 999px;
  font-size: 6.8px;
  font-weight: 800;
}

.production-order-detail-diff.none {
  background: #f0eeeb;
  color: #80776e;
}

.production-order-detail-diff.warn {
  background: var(--po-orange-soft);
  color: var(--po-orange);
}

/* Farklı üretilmiş ama açıklaması girilmemiş satırın işareti. */
.production-order-detail-missing {
  width: 18px;
  height: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: var(--po-orange-soft);
  color: var(--po-orange);
  font-size: 9px;
  font-weight: 800;
}

.production-order-detail-muted {
  display: block;
  margin-top: 2px;
  color: var(--po-muted);
  font-size: 7px;
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.production-order-detail-source-cell-td {
  overflow: visible;
}

.production-order-detail-source-cell {
  position: relative;
  display: flex;
  justify-content: center;
}

/* Göz ikonu; kaynak sayısı title ve aria-label'da. */
.production-order-detail-source-trigger {
  width: 24px;
  height: 24px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--po-border);
  border-radius: 6px;
  background: #fff;
  color: var(--po-walnut2);
  cursor: pointer;
  transition: 0.15s ease;
}

.production-order-detail-source-trigger svg {
  width: 14px;
  height: 14px;
}

.production-order-detail-source-trigger:hover,
.production-order-detail-source-trigger.is-open {
  border-color: #cdbfb3;
  background: var(--po-surface2);
  color: var(--po-accent);
}

.production-order-source-popover {
  position: fixed;
  z-index: 1200;
  width: 330px;
  max-width: calc(100vw - 24px);
  max-height: 280px;
  padding: 7px;
  display: none;
  overflow: auto;
  border: 1px solid #e1dbd3;
  border-radius: 9px;
  background: #fff;
  box-shadow: 0 12px 32px rgba(45, 31, 22, 0.16);
}

.production-order-source-popover.open {
  display: block;
}

.production-order-detail-source-popover-title {
  height: 27px;
  padding: 0 3px 6px;
  margin-bottom: 6px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid #eee9e3;
  color: #3f281b;
  font-size: 7.5px;
  font-weight: 800;
}

/* Açıklama penceresinin gövdesi; kullanıcının satır sonları korunur. */
.production-order-detail-description-body {
  margin: 0;
  padding: 0 3px 3px;
  color: #3f281b;
  font-size: 7.8px;
  line-height: 1.45;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.production-order-detail-sources {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.production-order-detail-source {
  padding: 6px 7px;
  border: 1px solid #eee9e3;
  border-radius: 6px;
  background: #faf8f4;
}

.production-order-detail-source.surplus {
  background: #f6ecd8;
  border-color: #ead8b8;
}

.production-order-detail-source-top {
  display: flex;
  justify-content: space-between;
  gap: 6px;
}

.production-order-detail-source strong {
  color: #3f281b;
  font-size: 7.5px;
}

.production-order-detail-account {
  display: block;
  margin-top: 2px;
  color: #81776d;
  font-size: 6.8px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.production-order-detail-coverage {
  margin-top: 4px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 5px;
}

.production-order-detail-pill {
  padding: 2px 5px;
  border-radius: 999px;
  font-size: 6.3px;
  font-weight: 800;
}

.production-order-detail-pill.complete {
  background: #e8f0e9;
  color: #4c7052;
}

.production-order-detail-pill.partial {
  background: #f6ecd8;
  color: #9a6a22;
}

.production-order-detail-coverage-text {
  color: #81776d;
  font-size: 6.5px;
}

.production-order-detail-reason {
  margin-top: 4px;
  padding-top: 4px;
  border-top: 1px dashed #e1dbd3;
  color: #81776d;
  font-size: 6.5px;
  line-height: 1.35;
}

.production-order-detail-table tfoot {
  position: sticky;
  bottom: 0;
  z-index: 3;
}

.production-order-detail-table tfoot td {
  height: 31px;
  background: #f4f1eb;
  border-top: 1px solid #e1dbd3;
  color: var(--po-walnut2);
  font-weight: 800;
}

/* Üretim satırları okunaklı olsun diye tablo yazıları ekranın genel ölçeğinden 2px büyük.
   Paylaşılan kod/ad/rozet sınıfları yalnızca bu tabloda büyür; Aşama sütunundaki ilerleme
   metni (production-order-step-progress) zaten 11px olduğu için dokunulmaz. */
.production-order-detail-table {
  font-size: 10.5px;
}

.production-order-detail-table th {
  font-size: 8.8px;
}

.production-order-detail-table .production-order-detail-code {
  font-size: 10.8px;
}

/* Ürün adı kendi sütununda; ikincil satır değil, diğer hücreler gibi okunur. */
.production-order-detail-table .production-order-detail-name {
  margin-top: 0;
  color: var(--po-text);
  font-size: 10.5px;
  font-weight: 600;
}

.production-order-detail-table .production-order-detail-diff {
  font-size: 8.8px;
}

.production-order-detail-table .production-order-detail-muted {
  font-size: 9px;
}

.production-order-detail-table .production-order-step-progress {
  margin-top: 0;
}

@media (max-width: 1050px) {
  .production-order-detail-main {
    grid-template-columns: 220px 18px minmax(0, 1fr);
  }

  .production-order-detail-kpis {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 800px) {
  .production-order-detail-screen {
    height: auto;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    overflow: visible;
  }

  .production-order-detail-header {
    align-items: flex-start;
    flex-direction: column;
  }

  .production-order-detail-actions {
    width: 100%;
    flex-wrap: wrap;
    justify-content: flex-start;
  }

  .production-order-detail-main,
  .production-order-detail-side {
    display: flex;
    flex-direction: column;
  }

  /* Alt alta dizilince çizgi yatay olur; ok da aşağı/yukarı döner. */
  .production-order-detail-side-rail {
    height: 22px;
    flex-direction: row;
  }

  .production-order-detail-side-rail::before {
    top: 50%;
    bottom: auto;
    left: 0;
    right: 0;
    width: auto;
    height: 4px;
    transform: translateY(-50%);
  }

  .production-order-detail-side-toggle {
    transform: rotate(90deg);
  }

  .production-order-detail-lines {
    min-height: 520px;
  }

  .production-order-detail-kpis {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* The reason sits on its own row of the three column source grid. */
.production-partial-reason-field {
  display: grid;
  grid-column: 1 / -1;
  gap: 3px;
  margin-top: 4px;
}

.production-partial-reason-field > span {
  color: #78521b;
  font-size: 10px;
  font-weight: 800;
}

/* The reason is a fourth child of a three column grid: give it its own row. */
.production-source-line > .muted-cell {
  grid-column: 1 / -1;
  color: #78521b;
  font-size: 10px;
  font-weight: 800;
}

.production-source-line {
  display: grid;
  grid-template-columns: minmax(130px, 1fr) auto auto;
  align-items: center;
  gap: 8px;
  padding: 4px 0;
  border-top: 1px solid #eee5dd;
}

.production-source-line:first-of-type {
  border-top: 0;
}

.production-source-line span {
  min-width: 0;
  overflow: hidden;
  color: #5b4d45;
  font-size: 11px;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.production-source-line strong {
  color: #342b27;
  font-size: 11px;
  font-weight: 900;
  white-space: nowrap;
}

.production-transfer-page {
  height: calc(100dvh - 36px);
  min-height: 0;
  background: #f7f4f0;
}

.production-header-actions {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.erp-icon-button {
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #cfc4ba;
  border-radius: 2px;
  color: #4c403a;
  background: #fffdfb;
  cursor: pointer;
}

.erp-icon-button:hover,
.erp-icon-button:focus {
  border-color: #a99589;
  background: #f1e9e1;
}

.erp-icon-button svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-linejoin: round;
  stroke-width: 1.8;
}

.production-active-filters {
  flex: 0 0 auto;
  min-height: 34px;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border-bottom: 1px solid #ded7d0;
  background: #fffdfb;
  overflow: auto;
}

.production-active-filters span {
  flex: 0 0 auto;
  border: 1px solid #e3d9d0;
  border-radius: 999px;
  padding: 3px 8px;
  color: #5f514a;
  background: #f7f1ea;
  font-size: 11px;
  font-weight: 800;
  white-space: nowrap;
}

.production-transfer-steps {
  flex: 0 0 auto;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  border-bottom: 1px solid #ded7d0;
  background: #ded7d0;
}

.production-step {
  min-height: 44px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  color: #766860;
  background: #f8f1ea;
}

.production-step span {
  width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #cfc4ba;
  border-radius: 50%;
  background: #fffdfb;
  font-size: 11px;
  font-weight: 800;
}

.production-step strong {
  overflow: hidden;
  font-size: 12px;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.production-step.is-active {
  color: #3f342f;
  background: #fffaf5;
}

.production-step.is-active span,
.production-step.is-ready span {
  border-color: #8f372b;
  color: #fff;
  background: #8f372b;
}

.production-transfer-summary,
.production-confirm-summary {
  flex: 0 0 auto;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  border-bottom: 1px solid #ded7d0;
  background: #fffdfb;
}

.production-confirm-summary {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-top: 0;
}

.production-transfer-summary div,
.production-confirm-summary div {
  min-width: 0;
  padding: 8px 12px;
  border-right: 1px solid #ece3da;
}

.production-transfer-summary span,
.production-confirm-summary span,
.production-panel-title small,
.production-action-bar span {
  display: block;
  color: #806f65;
  font-size: 10px;
  font-weight: 800;
}

.production-transfer-summary strong,
.production-confirm-summary strong {
  display: block;
  margin-top: 2px;
  color: #342b27;
  font-size: 16px;
  font-weight: 800;
  line-height: 1.1;
}

.production-transfer-body {
  flex: 1 1 auto;
  display: grid;
  min-height: 0;
  grid-template-columns: minmax(0, 1fr);
  gap: 10px;
  padding: 10px;
  overflow: hidden;
}

.production-work-panel,
.production-order-panel {
  border: 1px solid #ded7d0;
  background: #fffdfb;
}

.production-panel-title {
  min-height: 38px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 7px 9px;
  border-bottom: 1px solid #ece3da;
  background: #f7f1ea;
}

.production-panel-title span {
  color: #4c403a;
  font-size: 12px;
  font-weight: 800;
}

.production-toggle {
  min-height: 32px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: #5f514a;
  font-size: 11px;
  font-weight: 800;
}

.production-transfer-workspace {
  display: flex;
  min-height: 0;
  flex-direction: column;
  gap: 10px;
  overflow: hidden;
}

.production-transfer-workspace.is-step-2,
.production-transfer-workspace.is-step-3 {
  min-height: 0;
}

.production-validation:empty {
  display: none;
}

/* Rows the bulk order sheet counts as approved but production cannot accept. A calm notice, not
   an error: nothing went wrong, the user just needs the two totals to add up. */
.production-stranded-notice {
  border: 1px solid var(--farro-surface-border);
  border-left: 3px solid var(--farro-accent);
  border-radius: 6px;
  background: var(--farro-surface);
  color: var(--farro-text-body);
  font-size: 0.78rem;
  line-height: 1.45;
  padding: 7px 10px;
}

.production-stranded-notice strong {
  color: var(--farro-accent);
}

/* The transfer button has to sit in a form because it creates data, but the form must not become
   a flex item of its own - display: contents lets the button line up with its sibling links. */
.bulk-order-sheet-transfer-form {
  display: contents;
}

.production-work-panel {
  display: flex;
  min-height: 0;
  flex-direction: column;
  overflow: hidden;
}

.production-main-panel {
  min-height: 0;
}

.production-order-panel {
  flex: 1 1 auto;
  display: flex;
  min-height: 0;
  flex-direction: column;
  overflow: hidden;
  padding-bottom: 9px;
}

.production-order-panel .erp-form-grid {
  flex: 0 0 auto;
  padding: 9px;
}

.production-table-wrap {
  flex: 1 1 auto;
  min-height: 0;
}

.production-candidate-table,
.production-draft-table {
  min-width: 980px;
}

.production-row-check {
  width: 16px;
  height: 16px;
}

.production-quantity-input {
  width: 104px;
  margin-left: auto;
}

.production-source-cell {
  min-width: 180px;
  display: grid;
  gap: 5px;
}

/* Reads as a link, not a form control: it opens a read only list. */
/* Üretim emirleri listesinde satırın detayını açan göz ikonu. */
.production-orders-detail-link {
  width: 24px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--farro-surface-border);
  border-radius: 6px;
  background: var(--farro-card);
  color: var(--farro-text);
}

.production-orders-detail-link svg {
  width: 14px;
  height: 14px;
}

.production-orders-detail-link:hover,
.production-orders-detail-link:focus-visible {
  border-color: var(--farro-accent);
  color: var(--farro-accent);
}

.production-source-eye {
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border: 0;
  background: transparent;
  color: #7f2f24;
  font: inherit;
  font-size: 11px;
  font-weight: 800;
  padding: 0;
  cursor: pointer;
}

.production-source-eye:hover,
.production-source-eye:focus-visible {
  text-decoration: underline;
}

.production-source-eye svg {
  flex: 0 0 auto;
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2;
}

.production-source-dialog {
  max-width: 560px;
}

/* The modal is rendered outside .production-transfer-screen, so the 7.5px column override that
   squeezes these into the cell does not reach here and they come out readable. Pinned anyway so a
   later override cannot shrink them again. */
.production-source-modal-body .production-source-line {
  color: #5f514a;
  font-size: 11px;
  line-height: 1.45;
  white-space: normal;
}

.production-action-bar {
  min-height: 50px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 7px 10px;
  border: 1px solid #cfc4ba;
  background: #fffaf5;
  box-shadow: 0 -8px 18px rgba(52, 43, 39, 0.08);
}

.production-action-buttons {
  display: flex;
  align-items: center;
  gap: 8px;
}

.production-orphan-list {
  margin: 6px 0 0;
  padding-left: 0;
  list-style: none;
}

.production-orphan-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
}

.production-action-bar strong {
  display: block;
  color: #3f342f;
  font-size: 12px;
  font-weight: 800;
}

.data-table tr.is-muted-row td {
  color: #8a7a70;
  background: #f7f1ea;
}

.production-filter-dialog {
  width: min(760px, calc(100vw - 32px));
  max-width: none;
}

.production-validation-dialog {
  width: min(420px, calc(100vw - 32px));
  max-width: none;
}

.production-validation-modal .modal-header {
  align-items: flex-start;
}

.production-validation-modal-subtitle {
  margin: 3px 0 0;
  color: #74665e;
  font-size: 11px;
  line-height: 1.35;
}

.production-validation-modal-list {
  margin: 0;
  padding-left: 18px;
  color: #3f342f;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.45;
}

.production-transfer-screen {
  --transfer-bg: #f3f1eb;
  --transfer-surface: #fff;
  --transfer-surface-2: #faf8f4;
  --transfer-surface-3: #f6f2ec;
  --transfer-text: #28221e;
  --transfer-muted: #81776d;
  --transfer-border: #e1dbd3;
  --transfer-border-soft: #eee9e3;
  --transfer-brand: #96362f;
  --transfer-brand-dark: #6f2924;
  --transfer-brand-soft: #f5e8e5;
  --transfer-walnut: #5d3a25;
  --transfer-walnut-dark: #3f281b;
  --transfer-walnut-soft: #eee5dc;
  --transfer-accent: #b2732d;
  --transfer-accent-soft: #f6ead8;
  --transfer-green: #4c7052;
  --transfer-green-soft: #e8f0e9;
  --transfer-orange: #9a6a22;
  --transfer-orange-soft: #f6ecd8;
  --transfer-red: #a24d3f;
  --transfer-red-soft: #f7e7e3;
  --transfer-shadow: 0 2px 10px rgba(62, 43, 29, .045);
  width: 100%;
  height: calc(100dvh - 20px);
  min-height: 0;
  padding: 10px;
  display: grid;
  grid-template-rows: auto auto auto auto minmax(0, 1fr);
  gap: 8px;
  overflow: hidden;
  background: var(--transfer-bg);
  color: var(--transfer-text);
}

.production-transfer-header {
  min-height: 60px;
  padding: 9px 11px 9px 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  border: 1px solid var(--transfer-border);
  border-radius: 10px;
  background: var(--transfer-surface);
  box-shadow: var(--transfer-shadow);
}

.production-transfer-header-main {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 12px;
}

.production-transfer-header-icon {
  width: 36px;
  height: 36px;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 9px;
  background: var(--transfer-walnut-soft);
  color: var(--transfer-walnut);
}

.production-transfer-header-icon svg,
.production-transfer-button svg {
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.production-transfer-header-icon svg {
  width: 18px;
  height: 18px;
  stroke-width: 1.8;
}

.production-transfer-heading {
  min-width: 0;
}

.production-transfer-heading span {
  display: block;
  margin-bottom: 1px;
  color: var(--transfer-accent);
  font-size: 8px;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.production-transfer-heading h1 {
  margin: 0;
  color: var(--transfer-walnut-dark);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 18px;
  font-weight: 700;
  line-height: 21px;
}

.production-transfer-heading p {
  max-width: 760px;
  margin: 2px 0 0;
  overflow: hidden;
  color: var(--transfer-muted);
  font-size: 9.5px;
  line-height: 1.3;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.production-transfer-screen .production-header-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
}

.production-transfer-screen .erp-icon-button,
.production-transfer-button {
  height: 31px;
  padding: 0 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: 1px solid var(--transfer-border);
  border-radius: 7px;
  background: var(--transfer-surface);
  color: var(--transfer-walnut-dark);
  font-size: 9px;
  font-weight: 700;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  transition: .15s ease;
}

.production-transfer-screen .erp-icon-button {
  width: 31px;
  padding: 0;
}

.production-transfer-screen .erp-icon-button:hover,
.production-transfer-screen .erp-icon-button:focus,
.production-transfer-button:hover,
.production-transfer-button:focus {
  border-color: #cdbfb3;
  background: var(--transfer-surface-2);
  color: var(--transfer-walnut-dark);
}

.production-transfer-screen .erp-icon-button svg,
.production-transfer-button svg {
  width: 13px;
  height: 13px;
  stroke-width: 2;
}

.production-transfer-primary-button {
  border-color: var(--transfer-walnut-dark);
  background: var(--transfer-walnut-dark);
  color: #fff;
}

.production-transfer-primary-button:hover,
.production-transfer-primary-button:focus {
  border-color: var(--transfer-walnut);
  background: var(--transfer-walnut);
  color: #fff;
}

.production-transfer-screen .production-active-filters {
  min-height: 32px;
  padding: 4px 8px;
  display: flex;
  align-items: center;
  gap: 6px;
  overflow-x: auto;
  overflow-y: hidden;
  border: 1px solid var(--transfer-border);
  border-radius: 9px;
  background: var(--transfer-surface);
  box-shadow: var(--transfer-shadow);
  scrollbar-width: none;
}

.production-transfer-screen .production-active-filters::-webkit-scrollbar {
  display: none;
}

.production-filter-caption {
  flex: 0 0 auto;
  padding: 0 4px;
  color: var(--transfer-muted);
  font-size: 7.5px;
  font-weight: 800;
  letter-spacing: .05em;
  text-transform: uppercase;
}

.production-filter-chip {
  flex: 0 0 auto;
  padding: 4px 7px;
  border: 1px solid var(--transfer-border-soft);
  border-radius: 999px;
  background: var(--transfer-surface-3);
  color: #64594f;
  font-size: 8px;
  font-weight: 650;
  white-space: nowrap;
}

.production-filter-chip strong {
  color: var(--transfer-walnut-dark);
  font-weight: 800;
}

.production-transfer-screen .production-transfer-steps {
  min-height: 50px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  overflow: hidden;
  border: 1px solid var(--transfer-border);
  border-radius: 10px;
  background: var(--transfer-surface);
  box-shadow: var(--transfer-shadow);
}

.production-transfer-screen .production-step {
  position: relative;
  min-width: 0;
  min-height: 50px;
  padding: 7px 14px;
  display: flex;
  align-items: center;
  gap: 9px;
  border-right: 1px solid var(--transfer-border-soft);
  background: var(--transfer-surface);
  color: var(--transfer-text);
  transition: .15s ease;
}

.production-transfer-screen .production-step:last-child {
  border-right: 0;
}

.production-transfer-screen .production-step.is-active {
  background: linear-gradient(90deg, var(--transfer-brand-soft), #fff);
}

.production-transfer-screen .production-step.is-active::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: var(--transfer-brand);
}

.production-transfer-screen .production-step-number {
  width: 25px;
  height: 25px;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--transfer-border);
  border-radius: 50%;
  background: var(--transfer-surface);
  color: var(--transfer-muted);
  font-size: 9px;
  font-weight: 800;
}

.production-transfer-screen .production-step.is-active .production-step-number {
  border-color: var(--transfer-brand);
  background: var(--transfer-brand);
  color: #fff;
}

.production-transfer-screen .production-step.is-ready .production-step-number {
  border-color: var(--transfer-green);
  background: var(--transfer-green-soft);
  color: var(--transfer-green);
}

.production-step-text {
  min-width: 0;
}

.production-transfer-screen .production-step strong {
  display: block;
  overflow: hidden;
  color: var(--transfer-text);
  font-size: 9.5px;
  font-weight: 750;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.production-transfer-screen .production-step small {
  display: block;
  margin-top: 1px;
  overflow: hidden;
  color: var(--transfer-muted);
  font-size: 7.5px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.production-transfer-screen .production-transfer-summary,
.production-transfer-screen .production-confirm-summary {
  min-height: 34px;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  overflow: hidden;
  border: 1px solid var(--transfer-border);
  border-radius: 8px;
  background: var(--transfer-surface);
  box-shadow: var(--transfer-shadow);
}

.production-transfer-screen .production-confirm-summary {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: 10px 10px 0;
}

.production-transfer-screen .production-transfer-summary div,
.production-transfer-screen .production-confirm-summary div {
  min-width: 0;
  min-height: 34px;
  padding: 3px 8px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  border-right: 1px solid var(--transfer-border-soft);
}

.production-transfer-screen .production-transfer-summary div:last-child,
.production-transfer-screen .production-confirm-summary div:last-child {
  border-right: 0;
}

.production-transfer-screen .production-transfer-summary span,
.production-transfer-screen .production-confirm-summary span {
  min-width: 0;
  overflow: hidden;
  color: var(--transfer-muted);
  font-size: 6.5px;
  font-weight: 800;
  letter-spacing: .035em;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.production-transfer-screen .production-transfer-summary strong,
.production-transfer-screen .production-confirm-summary strong {
  color: var(--transfer-walnut-dark);
  font-size: 11px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  white-space: nowrap;
}

.production-transfer-screen .production-transfer-body {
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 8px;
  padding: 0;
  overflow: hidden;
}

.production-transfer-screen .production-transfer-workspace {
  min-height: 0;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  gap: 8px;
  overflow: hidden;
}

.production-transfer-screen .production-work-panel,
.production-transfer-screen .production-order-panel {
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--transfer-border);
  border-radius: 10px;
  background: var(--transfer-surface);
  box-shadow: var(--transfer-shadow);
}

.production-transfer-screen .production-panel-title {
  min-height: 36px;
  padding: 0 10px 0 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  border-bottom: 1px solid var(--transfer-border-soft);
  background: var(--transfer-surface-2);
}

.production-transfer-screen .production-panel-title span {
  display: block;
  color: var(--transfer-walnut-dark);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 11.5px;
  font-weight: 700;
}

.production-transfer-screen .production-panel-title small {
  display: block;
  margin-top: 1px;
  color: var(--transfer-muted);
  font-size: 7.5px;
  font-weight: 700;
}

.production-transfer-screen .production-panel-title .status-badge {
  flex: 0 0 auto;
  padding: 3px 7px;
  border-radius: 999px;
  background: var(--transfer-brand-soft);
  color: var(--transfer-brand-dark);
  font-size: 7.5px;
  font-weight: 800;
}

.production-transfer-screen .table-summary {
  min-height: 0;
  padding: 4px 8px;
  border-bottom: 1px solid var(--transfer-border-soft);
  background: var(--transfer-surface-2);
  color: var(--transfer-muted);
  font-size: 8px;
}

/* Step 1 source tabs. Bootstrap drives the switching; the look is this screen's own, built on
   the --transfer-* tokens rather than the default nav-tabs. */
.production-transfer-screen .production-source-tabs {
  flex: 0 0 auto;
  display: flex;
  align-items: stretch;
  gap: 2px;
  border-bottom: 1px solid var(--transfer-border);
  background: var(--transfer-surface-2);
  padding: 0 6px;
}

.production-transfer-screen .production-source-tab {
  min-height: 30px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 0;
  border-bottom: 2px solid transparent;
  background: transparent;
  color: var(--transfer-muted);
  font: inherit;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .02em;
  padding: 0 10px;
  cursor: pointer;
  text-transform: uppercase;
}

.production-transfer-screen .production-source-tab:hover {
  color: var(--transfer-text);
}

.production-transfer-screen .production-source-tab.active {
  border-bottom-color: var(--transfer-brand);
  color: var(--transfer-brand);
}

/* Candidate count: always there, reads as part of the label. */
.production-transfer-screen .production-tab-count {
  border-radius: 999px;
  background: var(--transfer-surface-3);
  color: var(--transfer-muted);
  font-size: 8px;
  font-weight: 900;
  padding: 1px 5px;
}

.production-transfer-screen .production-source-tab.active .production-tab-count {
  background: var(--transfer-brand-soft);
  color: var(--transfer-brand);
}

/* Selection count: hidden at zero, so the inactive tab only speaks up when it holds a selection
   the user would otherwise not see. */
.production-transfer-screen .production-tab-selected {
  border-radius: 999px;
  background: var(--transfer-accent);
  color: #fff;
  font-size: 8px;
  font-weight: 900;
  padding: 1px 5px;
}

.production-transfer-screen .production-tab-selected[hidden] {
  display: none;
}

.production-transfer-screen .production-source-panes {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
}

/* The active pane owns the whole panel, which is the point of the tabs: stacked, both table
   wraps were flex: 1 and split the height however few rows one of them had. */
.production-transfer-screen .production-source-pane {
  min-height: 0;
  width: 100%;
  flex-direction: column;
}

.production-transfer-screen .production-source-pane.active {
  display: flex;
}

.production-transfer-screen .production-table-wrap {
  min-height: 0;
  height: 100%;
  flex: 1;
  overflow: auto;
}

.production-transfer-screen .production-candidate-table,
.production-transfer-screen .production-draft-table {
  min-width: 980px;
  table-layout: fixed;
  font-size: 9px;
}

.production-transfer-screen .production-candidate-table th,
.production-transfer-screen .production-draft-table th {
  height: 27px;
  padding: 0 6px;
  border-right: 1px solid var(--transfer-border-soft);
  border-bottom: 1px solid var(--transfer-border);
  background: #f4f1eb;
  color: var(--transfer-muted);
  font-size: 7px;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
  white-space: nowrap;
}

.production-transfer-screen .production-candidate-table .table-filter-row th {
  height: 29px;
  padding: 3px 5px;
  background: var(--transfer-surface-2);
}

.production-transfer-screen .production-candidate-table td,
.production-transfer-screen .production-draft-table td {
  height: 40px;
  padding: 4px 6px;
  border-right: 1px solid #f3efe9;
  border-bottom: 1px solid var(--transfer-border-soft);
  color: #3b3530;
  vertical-align: middle;
}

.production-transfer-screen .production-candidate-table tbody tr:hover td,
.production-transfer-screen .production-draft-table tbody tr:hover td {
  background: #fcfaf6;
}

.production-transfer-screen .production-candidate-table strong,
.production-transfer-screen .production-draft-table strong {
  display: block;
  overflow: hidden;
  color: var(--transfer-walnut-dark);
  font-size: 9px;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.production-transfer-screen .data-table .muted-cell {
  display: block;
  margin-top: 1px;
  overflow: hidden;
  color: var(--transfer-muted);
  font-size: 7.7px;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.production-transfer-screen .numeric-col {
  font-family: "SFMono-Regular", Consolas, monospace;
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.production-transfer-screen .production-row-check {
  width: 14px;
  height: 14px;
  accent-color: var(--transfer-brand);
}

.production-transfer-screen .production-quantity-input {
  width: 78px;
  height: 24px;
  min-height: 24px;
  margin-left: auto;
  padding: 0 6px;
  border: 1px solid #d8d0c7;
  border-radius: 5px;
  background: #fff;
  font-size: 8px;
  text-align: right;
}

.production-transfer-screen .production-quantity-input:focus {
  border-color: var(--transfer-accent);
  box-shadow: 0 0 0 2px var(--transfer-accent-soft);
}

.production-transfer-screen .production-quantity-input:disabled {
  background: #f3f1ed;
  color: #aaa198;
}

.production-transfer-screen .production-inclusion-state {
  margin-top: 3px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 4px;
  color: var(--transfer-muted);
  font-size: 6.8px;
}

.production-transfer-screen .production-inclusion-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 2px 5px;
  border-radius: 999px;
  font-size: 6.5px;
  font-style: normal;
  font-weight: 800;
  white-space: nowrap;
}

.production-transfer-screen .production-inclusion-pill.is-empty {
  background: #f0eeeb;
  color: #8c837a;
}

.production-transfer-screen .production-inclusion-pill.is-partial {
  background: var(--transfer-orange-soft);
  color: var(--transfer-orange);
}

.production-transfer-screen .production-inclusion-pill.is-complete {
  background: var(--transfer-green-soft);
  color: var(--transfer-green);
}

.production-transfer-screen .production-draft-table .status-badge.is-complete {
  background: var(--transfer-green-soft);
  color: var(--transfer-green);
}

.production-transfer-screen .production-draft-table .status-badge.is-warning {
  background: var(--transfer-orange-soft);
  color: var(--transfer-orange);
}

.production-transfer-screen .production-source-eye {
  color: var(--transfer-brand);
  font-size: 8px;
  font-weight: 800;
}

.production-transfer-screen .production-source-eye svg {
  width: 11px;
  height: 11px;
}

.production-transfer-screen .production-source-line {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 4px 8px;
}

.production-transfer-screen .production-partial-reason-field {
  grid-column: 1 / -1;
}

.production-transfer-screen .production-partial-reason-field span {
  display: block;
  margin-bottom: 3px;
  color: var(--transfer-muted);
  font-size: 7px;
}

.production-transfer-screen .production-action-bar {
  min-height: 48px;
  padding: 6px 8px 6px 11px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  border: 1px solid var(--transfer-border);
  border-radius: 10px;
  background: var(--transfer-surface);
  box-shadow: var(--transfer-shadow);
}

.production-transfer-screen .production-action-bar strong {
  display: block;
  color: var(--transfer-walnut-dark);
  font-size: 9px;
  font-weight: 800;
}

.production-transfer-screen .production-action-bar span {
  display: block;
  margin-top: 1px;
  color: var(--transfer-muted);
  font-size: 7.5px;
  font-weight: 700;
}

.production-transfer-screen .production-action-buttons {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
}

.production-transfer-screen .production-order-panel .erp-form-grid {
  padding: 10px;
}

.production-transfer-screen .production-order-panel .erp-field label {
  color: var(--transfer-muted);
  font-size: 7px;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.production-transfer-screen .production-order-panel .form-control,
.production-transfer-screen .production-draft-table .form-control {
  border: 1px solid #d8d0c7;
  border-radius: 6px;
  background: #fff;
  font-size: 8px;
}

.production-transfer-screen .production-order-panel .form-control:focus,
.production-transfer-screen .production-draft-table .form-control:focus {
  border-color: var(--transfer-accent);
  box-shadow: 0 0 0 2px var(--transfer-accent-soft);
}

.production-transfer-screen .table-empty {
  padding: 16px;
  border-top: 1px solid var(--transfer-border-soft);
  background: var(--transfer-surface-2);
  color: var(--transfer-muted);
  font-size: 9px;
  text-align: center;
}

.current-account-cards-table .primary-sticky-col {
  width: 156px;
  min-width: 156px;
  max-width: 156px;
}

.current-account-branches-table .primary-sticky-col {
  width: 110px;
  min-width: 110px;
  max-width: 110px;
}

.current-account-notes-table .primary-sticky-col {
  width: 220px;
  min-width: 220px;
  max-width: 220px;
}

.stock-card-recipes-table .primary-sticky-col {
  width: 140px;
  min-width: 140px;
  max-width: 140px;
}

.production-steps-table .primary-sticky-col,
.product-flows-table .primary-sticky-col {
  width: 220px;
  min-width: 220px;
  max-width: 220px;
}

/* The option list is a textarea; without a floor it collapses to the width of "Seçim". */
.production-step-field-table textarea {
  min-width: 220px;
}

.data-table .muted-cell {
  display: block;
  margin-top: 2px;
  color: #8a7a70;
  font-size: 10px;
  font-weight: 700;
}

.table-empty {
  flex: 0 0 auto;
  padding: 16px;
  border-top: 1px solid #ded7d0;
  color: #75665e;
  background: #fffaf5;
  font-size: 13px;
}

.stock-card-dialog {
  width: min(1480px, calc(100vw - 32px));
  max-width: none;
  margin: 16px auto;
}

.stock-unit-dialog {
  width: min(1120px, calc(100vw - 32px));
  max-width: none;
  margin: 16px auto;
}

.sales-order-edit-notice {
  margin-bottom: 8px;
  padding: 7px 10px;
  border: 1px solid var(--table-border);
  border-radius: var(--table-radius-control);
  background: var(--table-accent-soft);
  font-size: 0.78rem;
}

.sales-order-edit-delivered {
  display: block;
  color: var(--table-muted);
  font-size: 0.7rem;
  white-space: nowrap;
}

.sales-order-detail-lines tr.is-locked td,
.sales-order-create-lines-table tr.is-locked td {
  opacity: 0.6;
}

/* Düzenleme sayfasında bildirimler çalışma alanının iki kolonuna yayılır (risk uyarısıyla aynı yer). */
.sales-order-workspace > .sales-order-edit-notice {
  grid-column: 1 / -1;
  margin-bottom: 0;
}

.current-account-dialog {
  width: min(1480px, calc(100vw - 32px));
  max-width: none;
  margin: 16px auto;
}

.current-account-branch-dialog {
  width: min(1280px, calc(100vw - 32px));
  max-width: none;
  margin: 16px auto;
}

.warehouse-dialog {
  width: min(980px, calc(100vw - 32px));
  max-width: none;
  margin: 16px auto;
}

.erp-modal {
  border-radius: 2px;
  border: 1px solid #cfc4ba;
}

.erp-modal .modal-header,
.erp-modal .modal-footer {
  min-height: 42px;
  padding: 8px 12px;
  background: #f7f1ea;
}

.erp-modal .modal-body {
  overflow: visible;
  padding: 10px 12px 8px;
}

.erp-modal .modal-title {
  font-size: 14px;
  font-weight: 800;
}

.form-section {
  margin-bottom: 8px;
  padding-bottom: 8px;
  border-bottom: 1px solid #ece3da;
}

.form-section:last-child {
  margin-bottom: 0;
  border-bottom: 0;
}

.form-section h3 {
  margin: 0 0 6px;
  color: #4c403a;
  font-size: 11px;
  font-weight: 800;
}

.erp-form-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 6px 8px;
}

.erp-field {
  min-width: 0;
}

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

.erp-field-double {
  grid-column: span 2;
}

.erp-field label,
.erp-check {
  color: #5f514a;
  font-size: 10px;
  font-weight: 700;
}

.erp-field label {
  display: block;
  margin-bottom: 2px;
}

.erp-field .form-control,
.erp-field .form-select {
  min-height: 26px;
  height: 26px;
  border-radius: 2px;
  font-size: 11px;
  padding: 2px 6px;
}

.erp-combobox {
  position: relative;
  min-width: 180px;
}

.erp-combobox-source {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

.erp-combobox-input {
  width: 100%;
  min-height: 26px;
  height: 26px;
  border-radius: 2px;
  border: 1px solid #cfc4ba;
  background: #fff;
  color: #342b27;
  font-size: 11px;
  padding: 2px 24px 2px 6px;
}

.erp-combobox::after {
  content: "";
  position: absolute;
  top: 10px;
  right: 8px;
  width: 6px;
  height: 6px;
  border-right: 1px solid #6f625a;
  border-bottom: 1px solid #6f625a;
  transform: rotate(45deg);
  pointer-events: none;
}

.erp-combobox-input:focus {
  border-color: #8f6f5d;
  box-shadow: 0 0 0 2px rgba(143, 111, 93, 0.16);
  outline: 0;
}

.erp-combobox-list {
  position: fixed;
  z-index: 2000;
  max-height: 188px;
  overflow: auto;
  border: 1px solid #c7b9ae;
  border-radius: 2px;
  background: #fff;
  box-shadow: 0 12px 24px rgba(52, 43, 39, 0.14);
}

.erp-combobox-option,
.erp-combobox-empty {
  display: block;
  width: 100%;
  border: 0;
  background: transparent;
  color: #342b27;
  font-size: 11px;
  line-height: 1.25;
  text-align: left;
  padding: 6px 8px;
}

.erp-combobox-option:hover,
.erp-combobox-option.is-active {
  background: #f7f1ea;
}

.erp-combobox-empty {
  color: #8a7b71;
}

.data-table .erp-combobox {
  min-width: 260px;
}

.erp-field textarea.form-control {
  height: 26px;
  min-height: 26px;
  resize: none;
}

/* Satış faturası detayı: form ızgarasındaki düğme etiketli alanlarla aynı hizaya iner. */
.sales-invoice-form-action {
  display: flex;
  align-items: flex-end;
}

.sales-invoice-dispatch-picks {
  display: flex;
  flex-wrap: wrap;
  gap: 0 18px;
}

.sales-invoice-dispatch-picks .erp-check {
  padding-top: 0;
}

.erp-check {
  min-height: 26px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding-top: 12px;
  white-space: nowrap;
}

.erp-check input {
  width: 14px;
  height: 14px;
}

/* Cari kart modalı: ana alanlar üstte sabit, yan alanlar alttaki sekmelerde. */
.current-account-main {
  margin-bottom: 10px;
  padding: 8px 10px 10px;
  border: 1px solid var(--farro-surface-border);
  border-radius: 6px;
  background: var(--farro-content-bg);
}

/* Üst bölümdeki durum işaretleri tek hücrede yan yana. */
.current-account-flags {
  grid-column: span 2;
  display: flex;
  flex-wrap: wrap;
  gap: 0 18px;
}

.current-account-tabs {
  gap: 2px;
  border-bottom-color: var(--farro-surface-border);
}

.current-account-tabs .nav-link {
  padding: 5px 12px;
  border-color: var(--farro-surface-border) var(--farro-surface-border) transparent;
  border-radius: 6px 6px 0 0;
  background: var(--farro-surface);
  color: var(--farro-muted);
  font-size: 11px;
  font-weight: 700;
}

.current-account-tabs .nav-link:hover,
.current-account-tabs .nav-link:focus {
  color: var(--farro-text);
}

.current-account-tabs .nav-link.active {
  border-color: var(--farro-surface-border) var(--farro-surface-border) var(--farro-card);
  background: var(--farro-card);
  color: var(--farro-accent);
}

/* Sabit yükseklik: sekme değişince modal boyu zıplamaz. */
.current-account-tab-content {
  min-height: 132px;
  padding: 8px 10px 10px;
  border: 1px solid var(--farro-surface-border);
  border-top: 0;
  border-radius: 0 0 6px 6px;
  background: var(--farro-card);
}

.erp-field .text-danger {
  display: block;
  margin-top: 2px;
  font-size: 10px;
  line-height: 1.1;
}

.warehouse-modal .modal-header {
  align-items: flex-start;
  padding: 12px 14px;
}

.warehouse-modal .modal-body {
  max-height: min(680px, calc(100dvh - 150px));
  overflow: auto;
  padding: 14px;
}

.warehouse-modal .modal-title {
  color: #342b27;
  font-size: 15px;
  font-weight: 800;
}

.warehouse-modal-subtitle {
  margin-top: 3px;
  color: #74665e;
  font-size: 11px;
  line-height: 1.35;
}

/* ---------- Üretim emri: adım penceresi ----------
   Projedeki diğer form pencereleriyle aynı dil: erp-modal başlığı, form-section, erp-field
   ölçüleri ve erp butonları. Atölye ekranıyla ortak alan formu (_StepValueFields) ve atlama
   formu tablet ölçüsündedir; bu pencerede erp-field ölçüsüne indirilir. Ortak
   .erp-modal .modal-body overflow: visible kuralı gövde kayabilsin diye geri alınır. */
.production-step-dialog {
  width: min(680px, calc(100vw - 32px));
  max-width: none;
}

.erp-modal .production-step-body {
  overflow-y: auto;
}

.production-step-info {
  margin: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px 12px;
}

.production-step-info > div {
  min-width: 0;
}

.production-step-info > .is-wide {
  grid-column: 1 / -1;
}

.production-step-info dt {
  color: #5f514a;
  font-size: 10px;
  font-weight: 700;
}

.production-step-info dd {
  margin: 2px 0 0;
  color: #3f342f;
  font-size: 12px;
}

.production-step-info .is-overrun dd {
  color: var(--farro-danger);
  font-weight: 700;
}

.production-step-description {
  white-space: pre-line;
}

.production-step-text {
  margin: 0;
  color: #3f342f;
  font-size: 12px;
}

.production-step-modal .workshop-fields {
  margin-top: 0;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px 12px;
}

.production-step-modal .workshop-field legend {
  margin-bottom: 2px;
  color: #5f514a;
  font-size: 10px;
}

.production-step-modal .workshop-input {
  min-height: 26px;
  height: 26px;
  padding: 2px 6px;
  border-radius: 2px;
  font-size: 11px;
}

.production-step-modal textarea.workshop-input {
  height: auto;
  min-height: 52px;
  max-width: none;
}

.production-step-modal .workshop-number {
  max-width: none;
  gap: 6px;
}

.production-step-modal .workshop-unit {
  font-size: 11px;
}

/* Seçim ve evet/hayır bu pencerede sade radyo düğmeleri. */
.production-step-modal .workshop-choice-group {
  gap: 4px 14px;
}

.production-step-modal .workshop-choice {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.production-step-modal .workshop-choice input {
  position: static;
  opacity: 1;
  margin: 0;
}

.production-step-modal .workshop-choice span {
  min-width: 0;
  min-height: 0;
  padding: 0;
  border: 0;
  background: none;
  color: #3f342f;
  font-size: 12px;
  font-weight: 600;
}

.production-step-modal .workshop-choice input:checked + span {
  border: 0;
  background: none;
  color: #3f342f;
}

.production-step-modal .workshop-skip {
  margin: 0;
  padding: 0;
  border: 0;
}

.production-step-modal .workshop-skip > summary {
  min-height: 0;
  color: #74665e;
  font-size: 11px;
}

.production-step-modal .workshop-skip-label {
  margin: 8px 0 2px;
  color: #5f514a;
  font-size: 10px;
}

.production-step-modal .workshop-skip .workshop-actions {
  margin-top: 8px;
}

.production-step-modal .workshop-skip .workshop-button {
  min-width: 0;
  min-height: 30px;
  padding: 0 10px;
  border: 1px solid #cfc4ba;
  border-radius: 2px;
  background: #fffdfb;
  color: #4c403a;
  font-size: 12px;
  font-weight: 700;
}

.production-step-modal .workshop-skip .workshop-button:hover,
.production-step-modal .workshop-skip .workshop-button:focus {
  border-color: #a99589;
  background: #f1e9e1;
}

@media (max-width: 640px) {
  .production-step-info,
  .production-step-modal .workshop-fields {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ---------- Üretim emri: tamamlama penceresi ----------
   Gövde kayar, başlık ve alt bar sabit kalır. Form modal-content ile gövde arasında durduğu için
   Bootstrap'in kaydırma düzeni forma taşınır; ortak .erp-modal .modal-body'nin overflow: visible
   kuralı da burada geri alınır. Pencere detay ekranının dışında açıldığı için --po-* değil
   --farro-* renkleri kullanılır. */
.production-complete-dialog {
  width: min(860px, calc(100vw - 32px));
  max-width: none;
}

.production-complete-modal {
  border-radius: 10px;
  overflow: hidden;
}

.production-complete-form {
  min-height: 0;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
}

.erp-modal .production-complete-body {
  min-height: 0;
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  background: var(--farro-content-bg);
}

.production-complete-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.production-complete-stat {
  padding: 8px 10px;
  border: 1px solid var(--farro-surface-border);
  border-radius: 8px;
  background: var(--farro-card);
}

.production-complete-stat span {
  display: block;
  color: var(--farro-muted);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
}

.production-complete-stat strong {
  display: block;
  margin-top: 2px;
  color: var(--farro-text);
  font-size: 16px;
  font-variant-numeric: tabular-nums;
}

.production-complete-stat.is-changed {
  border-color: var(--farro-note-border);
  background: var(--farro-note-soft);
}

.production-complete-stat.is-changed strong {
  color: var(--farro-note);
}

.production-complete-alert {
  padding: 9px 12px;
  display: flex;
  flex-direction: column;
  gap: 3px;
  border: 1px solid var(--farro-note-border);
  border-radius: 8px;
  background: var(--farro-note-soft);
  color: var(--farro-text-body);
  font-size: 12px;
}

.production-complete-alert strong {
  color: var(--farro-note);
  font-size: 12px;
}

.production-complete-alert.is-danger {
  border-color: var(--farro-surface-border);
  background: var(--farro-accent-soft);
}

.production-complete-alert.is-danger strong {
  color: var(--farro-danger);
}

.production-complete-alert ul {
  margin: 3px 0 0;
  padding-left: 18px;
}

.production-complete-section {
  padding: 10px 12px;
  border: 1px solid var(--farro-surface-border);
  border-radius: 8px;
  background: var(--farro-card);
}

.production-complete-section h3 {
  margin: 0 0 8px;
  color: var(--farro-text);
  font-size: 12px;
  font-weight: 800;
}

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

.production-complete-warehouses .erp-field label {
  font-size: 11px;
}

.production-complete-warehouses .erp-field .form-select {
  min-height: 32px;
  height: 32px;
  font-size: 12px;
}

.production-complete-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
  font-size: 12px;
}

/* Gövde kaydığında sütun başlıkları görünür kalır. */
.production-complete-table thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  padding: 6px 8px;
  border-bottom: 1px solid var(--farro-surface-border);
  background: var(--farro-surface);
  color: var(--farro-muted);
  font-size: 10px;
  font-weight: 800;
  text-align: left;
  text-transform: uppercase;
  letter-spacing: .04em;
}

.production-complete-table td {
  padding: 5px 8px;
  border-bottom: 1px solid var(--farro-surface);
  vertical-align: middle;
}

.production-complete-table .num {
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.production-complete-table tr.is-changed td {
  background: var(--farro-note-soft);
}

.production-complete-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.production-complete-input.form-control {
  height: 30px;
  font-size: 12px;
  font-weight: 700;
  text-align: right;
}

.production-complete-diff {
  color: var(--farro-muted);
  font-weight: 700;
}

.production-complete-diff.is-over,
.production-complete-diff.is-under {
  color: var(--farro-note);
}

.production-complete-footer {
  justify-content: space-between;
  gap: 12px;
}

.production-complete-footnote {
  color: var(--farro-muted);
  font-size: 11px;
}

.production-complete-actions {
  display: flex;
  gap: 8px;
}

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

  .production-complete-warehouses {
    grid-template-columns: minmax(0, 1fr);
  }

  .production-complete-footnote {
    display: none;
  }
}

.warehouse-validation:empty {
  display: none;
}

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

.warehouse-form-section {
  margin: 0;
  padding: 0 0 12px;
}

.warehouse-form-section:last-child {
  padding-bottom: 0;
}

.warehouse-section-heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
}

.warehouse-section-heading h3 {
  margin: 0;
  color: #3f342f;
  font-size: 12px;
  font-weight: 800;
}

.warehouse-section-heading p {
  max-width: 520px;
  margin: 0;
  color: #7a6b62;
  font-size: 11px;
  line-height: 1.35;
  text-align: right;
}

.warehouse-main-grid {
  grid-template-columns: 1fr 2fr 1.2fr auto;
  align-items: end;
}

.warehouse-detail-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.warehouse-modal .erp-field .form-control,
.warehouse-modal .erp-field .form-select {
  min-height: 34px;
  height: 34px;
  font-size: 12px;
  padding: 5px 8px;
}

.warehouse-modal .erp-combobox {
  min-width: 0;
}

.warehouse-modal .erp-combobox-input {
  min-height: 34px;
  height: 34px;
  font-size: 12px;
  padding: 5px 28px 5px 8px;
}

.warehouse-modal .erp-combobox::after {
  top: 13px;
  right: 10px;
}

.warehouse-modal .erp-field label,
.warehouse-modal .erp-check {
  font-size: 11px;
}

.warehouse-active-field {
  display: flex;
  align-items: end;
}

.warehouse-active-check {
  width: 100%;
  min-height: 34px;
  margin: 0;
  padding: 6px 10px;
  border: 1px solid #d6cbc1;
  border-radius: 2px;
  background: #fff;
  line-height: 1.2;
}

.warehouse-active-check input {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  margin: 0;
  accent-color: #1f6feb;
}

.warehouse-active-check span {
  display: block;
  min-width: 0;
  color: #5f514a;
  font-size: 12px;
  font-weight: 700;
}

.warehouse-type-panel {
  min-height: 78px;
  border: 1px solid #e2d8cf;
  border-radius: 2px;
  background: #fbf8f4;
  padding: 10px;
}

.warehouse-type-empty {
  display: grid;
  gap: 3px;
  min-height: 58px;
  align-content: center;
  border: 1px dashed #cfc4ba;
  border-radius: 2px;
  background: #fff;
  color: #5b4d45;
  padding: 10px 12px;
}

.warehouse-type-empty strong {
  color: #3f342f;
  font-size: 12px;
}

.warehouse-type-empty span {
  color: #74665e;
  font-size: 11px;
  line-height: 1.35;
}

.warehouse-description {
  min-height: 84px !important;
  height: 84px !important;
  resize: vertical !important;
}

.warehouse-modal-footer {
  justify-content: space-between;
  gap: 12px;
  padding: 10px 14px;
}

.warehouse-footer-hint {
  min-width: 0;
  color: #74665e;
  font-size: 11px;
  line-height: 1.35;
}

.warehouse-footer-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
}

.table-toast-stack {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 1300;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.table-toast {
  min-width: 220px;
  max-width: 360px;
  padding: 10px 12px;
  border: 1px solid #cfc4ba;
  border-radius: 2px;
  color: #3f342f;
  background: #fffdfb;
  box-shadow: 0 10px 24px rgba(52, 43, 39, 0.14);
  font-size: 12px;
  /* Birden çok sorun tek mesajda satır satır gelir (ör. irsaliye onayındaki eksikler). */
  white-space: pre-line;
}

.table-toast.is-success {
  border-color: #a9c7b1;
  background: #eef6f0;
}

.table-toast.is-danger {
  border-color: #d4aaa2;
  background: #f9eeeb;
}

.app-sidebar .sidebar-sublink,
.app-sidebar .sidebar-sublink:link,
.app-sidebar .sidebar-sublink:visited,
.app-sidebar .sidebar-sublink:hover,
.app-sidebar .sidebar-sublink:focus,
.app-sidebar .sidebar-sublink:active {
  color: #5f4b43 !important;
  text-decoration: none !important;
  text-decoration-line: none !important;
}

.app-sidebar .sidebar-sublink:hover,
.app-sidebar .sidebar-sublink:focus {
  color: #7f2f24 !important;
}

@media (max-width: 991.98px) {
  .erp-form-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

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

  .warehouse-active-field {
    align-items: stretch;
  }

  .production-transfer-body {
    overflow: auto;
  }

  .production-transfer-workspace {
    min-height: auto;
  }

  .production-transfer-workspace {
    display: flex;
    overflow: visible;
  }

  .production-transfer-workspace.is-step-2,
  .production-transfer-workspace.is-step-3 {
    min-height: auto;
  }

  .production-work-panel {
    min-height: 320px;
  }
}

@media (max-width: 767.98px) {
  .stock-page-header {
    align-items: stretch;
    flex-direction: column;
  }

  .warehouse-dialog {
    width: calc(100vw - 16px);
    margin: 8px auto;
  }

  .warehouse-modal .modal-body {
    max-height: calc(100dvh - 132px);
    padding: 12px;
  }

  .warehouse-section-heading {
    align-items: flex-start;
    flex-direction: column;
    gap: 3px;
  }

  .warehouse-section-heading p {
    max-width: none;
    text-align: left;
  }

  .warehouse-main-grid,
  .warehouse-detail-grid {
    grid-template-columns: 1fr;
  }

  .warehouse-main-grid .erp-field-double,
  .warehouse-detail-grid .erp-field-double {
    grid-column: 1 / -1;
  }

  .warehouse-modal-footer {
    align-items: stretch;
    flex-direction: column;
  }

  .warehouse-footer-actions {
    justify-content: flex-end;
  }

  .sales-order-detail-screen {
    padding: 10px;
  }

  .sales-order-detail-topbar {
    align-items: flex-start;
    flex-direction: column;
    gap: 10px;
  }

  .sales-order-detail-actions {
    width: 100%;
    flex-wrap: wrap;
    justify-content: flex-start;
  }

  .sales-order-detail-actions .sales-order-detail-button,
  .sales-order-detail-actions form,
  .sales-order-detail-actions button {
    width: 100%;
  }

  .sales-order-page-context {
    width: 100%;
    flex-wrap: wrap;
  }

  .sales-order-detail-separator {
    display: none;
  }

  .sales-order-summary-grid,
  .sales-order-summary-bottom {
    grid-template-columns: 1fr;
  }

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

  .sales-order-summary-grid.sales-order-tab-summary-grid > .sales-order-summary-item,
  .sales-order-summary-grid.sales-order-tab-summary-grid > .sales-order-wide-item {
    grid-column: auto;
    border-right: 0;
  }

  .sales-order-lines-panel {
    min-height: 0;
  }

  .production-source-line {
    grid-template-columns: 1fr;
    justify-items: start;
    gap: 3px;
  }

  .production-inclusion-state {
    align-items: flex-start;
  }

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

  .erp-field-double {
    grid-column: 1 / -1;
  }

  .production-transfer-page {
    height: auto;
    min-height: calc(100vh - 36px);
    overflow: visible;
  }

  .production-transfer-steps,
  .production-transfer-summary,
  .production-confirm-summary {
    grid-template-columns: 1fr;
  }

  .production-step {
    min-height: 38px;
  }

  .production-transfer-body {
    padding: 8px;
  }

  .production-header-actions {
    justify-content: space-between;
  }

  .production-action-bar {
    align-items: stretch;
    flex-direction: column;
  }

  .production-action-buttons {
    width: 100%;
  }

  .production-action-bar .erp-primary-button {
    width: 100%;
  }
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
  color: var(--bs-secondary-color);
  text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
  text-align: start;
}

/* ---------- Sign in ---------- */

.login-page-body {
    min-height: 100dvh;
    margin: 0;
    color: var(--farro-text-body);
    background: var(--farro-content-bg);
}

.login-shell {
    display: flex;
    min-height: 100dvh;
    align-items: center;
    justify-content: center;
    padding: 24px;
}

.login-card {
    width: 100%;
    max-width: 400px;
    padding: 32px 30px;
    border: 1px solid var(--farro-surface-border);
    border-radius: 14px;
    background: var(--farro-surface);
    box-shadow: 0 18px 44px rgba(75, 51, 43, 0.14);
}

.login-brand {
    display: flex;
    justify-content: center;
    margin-bottom: 20px;
}

.login-brand img {
    width: 168px;
    max-width: 100%;
    height: auto;
}

.login-title {
    margin: 0 0 4px;
    color: var(--farro-text);
    font-size: 1.15rem;
    font-weight: 800;
    text-align: center;
}

.login-subtitle {
    margin: 0 0 22px;
    color: var(--farro-muted);
    font-size: 0.82rem;
    text-align: center;
}

.login-alert {
    padding: 10px 12px;
    border-radius: 8px;
    font-size: 0.83rem;
}

.login-alert:empty {
    display: none;
}

.login-field {
    margin-bottom: 15px;
}

.login-field label {
    display: block;
    margin-bottom: 5px;
    color: var(--farro-text);
    font-size: 0.78rem;
    font-weight: 700;
}

.login-card .form-control {
    border: 1px solid var(--farro-surface-border);
    border-radius: 8px;
    background: #fff;
    padding: 9px 11px;
    /* Telefonda kök yazı 14px olduğu için 1rem 16px'in altına iner; iOS Safari böyle bir kutuya odaklanınca
       sayfayı yakınlaştırır ve "Giriş yap"tan sonra ana sayfa yakınlaşmış, boş bir köşesi görünür halde açılır
       (beyaz ekran). Masaüstünde 1rem zaten 16px'tir. Giriş ve parola değiştirme formu bu sınıfı paylaşır. */
    font-size: 16px;
}

.login-card .form-control:focus {
    border-color: var(--farro-accent);
    box-shadow: 0 0 0 3px rgba(127, 47, 36, 0.14);
}

.login-field-error {
    display: block;
    margin-top: 4px;
    color: var(--farro-danger);
    font-size: 0.74rem;
}

.login-field-error:empty {
    display: none;
}

.login-remember {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 20px;
    color: var(--farro-text);
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
}

.login-remember input {
    width: 16px;
    height: 16px;
    accent-color: var(--farro-accent-strong);
    cursor: pointer;
}

.login-remember-hint {
    display: block;
    margin: -14px 0 20px 24px;
    color: var(--farro-muted);
    font-size: 0.72rem;
}

.login-submit {
    width: 100%;
    border: 1px solid var(--farro-accent);
    border-radius: 8px;
    background: var(--farro-accent-strong);
    color: #fff;
    padding: 10px 14px;
    font-weight: 700;
}

.login-submit:hover,
.login-submit:focus {
    border-color: var(--farro-accent-deep);
    background: var(--farro-accent);
    color: #fff;
}

/* ---------- Signed in user in the sidebar ---------- */

.sidebar-logout-form {
    margin: 0;
}

.sidebar-logout {
    width: 100%;
    padding: 6px 8px;
    border: 1px solid var(--farro-surface-border);
    border-radius: 6px;
    background: transparent;
    color: inherit;
    font-size: 0.78rem;
    font-weight: 700;
}

.sidebar-logout:hover {
    background: rgba(127, 47, 36, 0.1);
    color: var(--farro-accent);
}

/* ---------- User management ---------- */

.user-role-grid {
    display: grid;
    gap: 8px;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.user-role-grid code {
    color: var(--table-muted, #7c8da5);
    font-size: 0.72rem;
}

.erp-field-hint {
    display: block;
    margin-top: 4px;
    color: var(--table-muted, #7c8da5);
    font-size: 0.75rem;
}

.stock-inventory-screen {
    --inventory-bg: #f3f1eb;
    --inventory-surface: #ffffff;
    --inventory-surface-2: #faf8f4;
    --inventory-surface-3: #f6f2ec;
    --inventory-text: #28221e;
    --inventory-muted: #81776d;
    --inventory-border: #e1dbd3;
    --inventory-border-soft: #eee9e3;
    --inventory-walnut: #5d3a25;
    --inventory-walnut-dark: #3f281b;
    --inventory-walnut-soft: #eee5dc;
    --inventory-accent: #b2732d;
    --inventory-accent-soft: #f6ead8;
    --inventory-green: #4c7052;
    --inventory-green-soft: #e8f0e9;
    --inventory-orange: #9a6a22;
    --inventory-orange-soft: #f6ecd8;
    --inventory-red: #a24d3f;
    --inventory-red-soft: #f7e7e3;
    --inventory-shadow: 0 2px 10px rgba(62, 43, 29, 0.045);
    width: 100%;
    height: 100%;
    min-height: 0;
    padding: 10px;
    display: grid;
    grid-template-rows: auto auto minmax(0, 1fr);
    gap: 8px;
    overflow: hidden;
    background: var(--inventory-bg);
    color: var(--inventory-text);
    font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
}

.stock-inventory-card {
    background: var(--inventory-surface);
    border: 1px solid var(--inventory-border);
    border-radius: 10px;
    box-shadow: var(--inventory-shadow);
}

.stock-inventory-header {
    min-height: 62px;
    padding: 9px 10px 9px 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.stock-inventory-header-main {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 12px;
}

.stock-inventory-header-icon {
    width: 38px;
    height: 38px;
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 9px;
    background: var(--inventory-walnut-soft);
    color: var(--inventory-walnut);
}

.stock-inventory-header-icon svg {
    width: 19px;
    height: 19px;
}

.stock-inventory-heading {
    min-width: 0;
}

.stock-inventory-eyebrow {
    display: block;
    margin-bottom: 1px;
    color: var(--inventory-accent);
    font-size: 7.5px;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.stock-inventory-heading h1 {
    margin: 0;
    color: var(--inventory-walnut-dark);
    font-family: Georgia, "Times New Roman", serif;
    font-size: 18px;
    line-height: 21px;
}

.stock-inventory-heading p {
    max-width: 760px;
    margin: 2px 0 0;
    overflow: hidden;
    color: var(--inventory-muted);
    font-size: 9px;
    line-height: 1.3;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.stock-inventory-header-actions {
    display: flex;
    align-items: center;
    gap: 6px;
    flex: 0 0 auto;
}

.stock-inventory-btn {
    height: 31px;
    padding: 0 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    border: 1px solid var(--inventory-border);
    border-radius: 7px;
    background: #fff;
    color: var(--inventory-walnut-dark);
    text-decoration: none;
    font-size: 8.5px;
    font-weight: 700;
    cursor: pointer;
    transition: 0.15s ease;
    white-space: nowrap;
}

.stock-inventory-btn:hover,
.stock-inventory-btn:focus {
    background: var(--inventory-surface-2);
    border-color: #cdbfb3;
    color: var(--inventory-walnut-dark);
}

.stock-inventory-btn svg {
    width: 12px;
    height: 12px;
}

.stock-inventory-btn-primary {
    background: var(--inventory-walnut-dark);
    border-color: var(--inventory-walnut-dark);
    color: #fff;
}

.stock-inventory-btn-primary:hover,
.stock-inventory-btn-primary:focus {
    background: var(--inventory-walnut);
    border-color: var(--inventory-walnut);
    color: #fff;
}

.stock-inventory-summary {
    min-height: 36px;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    overflow: hidden;
}

.stock-inventory-summary-item {
    min-width: 0;
    min-height: 36px;
    padding: 3px 8px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    border-right: 1px solid var(--inventory-border-soft);
}

.stock-inventory-summary-item:last-child {
    border-right: 0;
}

.stock-inventory-summary-item span {
    min-width: 0;
    overflow: hidden;
    color: var(--inventory-muted);
    font-size: 6.5px;
    font-weight: 800;
    letter-spacing: 0.035em;
    text-overflow: ellipsis;
    text-transform: uppercase;
    white-space: nowrap;
}

.stock-inventory-summary-item strong {
    flex: 0 0 auto;
    color: var(--inventory-walnut-dark);
    font-size: 10.5px;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.stock-inventory-summary-item.stock {
    background: var(--inventory-green-soft);
}

.stock-inventory-summary-item.stock strong {
    color: var(--inventory-green);
}

.stock-inventory-panel {
    min-height: 0;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    overflow: hidden;
}

.stock-inventory-detail-screen .stock-inventory-panel {
    grid-template-rows: auto minmax(0, 1fr) auto;
}

.stock-inventory-toolbar {
    min-height: 42px;
    padding: 5px 8px 5px 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    background: var(--inventory-surface-2);
    border-bottom: 1px solid var(--inventory-border-soft);
}

.stock-inventory-tabs {
    min-width: 0;
    flex: 1;
    display: flex;
    align-items: center;
    gap: 5px;
    overflow-x: auto;
    scrollbar-width: none;
}

.stock-inventory-tabs::-webkit-scrollbar {
    display: none;
}

.stock-inventory-tab {
    min-width: 150px;
    height: 30px;
    padding: 0 9px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    border: 1px solid var(--inventory-border);
    border-radius: 7px;
    background: #fff;
    color: var(--inventory-muted);
    cursor: pointer;
    transition: 0.15s ease;
    flex: 0 0 auto;
}

.stock-inventory-tab:hover {
    background: var(--inventory-surface-3);
    border-color: #cdbfb3;
}

.stock-inventory-tab.is-active {
    background: var(--inventory-walnut-soft);
    border-color: #d8c9bc;
    color: var(--inventory-walnut-dark);
}

.stock-inventory-tab-main {
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.stock-inventory-tab-code {
    font-size: 7.5px;
    font-weight: 800;
    line-height: 1;
}

.stock-inventory-tab-name {
    max-width: 105px;
    margin-top: 2px;
    overflow: hidden;
    font-size: 6.5px;
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.stock-inventory-tab-count {
    min-width: 22px;
    height: 18px;
    padding: 0 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: var(--inventory-surface-3);
    color: var(--inventory-muted);
    font-size: 6.5px;
    font-weight: 800;
}

.stock-inventory-tab.is-active .stock-inventory-tab-count {
    background: #fff;
    color: var(--inventory-walnut);
}

.stock-inventory-toolbar-right {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 6px;
}

.stock-inventory-search {
    width: 220px;
    height: 29px;
    padding: 0 9px;
    border: 1px solid var(--inventory-border);
    border-radius: 7px;
    outline: none;
    background: #fff;
    color: var(--inventory-text);
    font-size: 8px;
}

.stock-inventory-search:focus {
    border-color: var(--inventory-accent);
    box-shadow: 0 0 0 2px var(--inventory-accent-soft);
}

.stock-inventory-warehouse-view {
    min-height: 0;
    display: none;
}

.stock-inventory-warehouse-view.is-active {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
}

.stock-inventory-warehouse-info {
    min-height: 38px;
    padding: 5px 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    border-bottom: 1px solid var(--inventory-border-soft);
}

.stock-inventory-warehouse-title {
    min-width: 0;
}

.stock-inventory-warehouse-title h2 {
    margin: 0;
    color: var(--inventory-walnut-dark);
    font-family: Georgia, "Times New Roman", serif;
    font-size: 11px;
}

.stock-inventory-warehouse-title p {
    margin: 2px 0 0;
    color: var(--inventory-muted);
    font-size: 7px;
}

.stock-inventory-stock-badge {
    padding: 4px 8px;
    border-radius: 999px;
    background: var(--inventory-green-soft);
    color: var(--inventory-green);
    font-size: 7px;
    font-weight: 800;
    white-space: nowrap;
}

.stock-inventory-table-wrap {
    min-height: 0;
    overflow: auto;
}

.stock-inventory-table {
    width: 100%;
    min-width: 900px;
    border-collapse: collapse;
    table-layout: fixed;
    font-size: 8.5px;
}

.stock-inventory-table thead {
    position: sticky;
    top: 0;
    z-index: 5;
}

.stock-inventory-table th {
    height: 28px;
    padding: 0 7px;
    background: #f4f1eb;
    border-right: 1px solid var(--inventory-border-soft);
    border-bottom: 1px solid var(--inventory-border);
    color: var(--inventory-muted);
    font-size: 6.8px;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-align: left;
    text-transform: uppercase;
    white-space: nowrap;
}

.stock-inventory-table td {
    height: 42px;
    padding: 4px 7px;
    border-right: 1px solid #f3efe9;
    border-bottom: 1px solid var(--inventory-border-soft);
    color: #39332e;
    vertical-align: middle;
}

.stock-inventory-table th:last-child,
.stock-inventory-table td:last-child {
    border-right: 0;
}

.stock-inventory-table tbody tr:hover {
    background: #fcfaf6;
}

.stock-inventory-table .num {
    font-family: "SFMono-Regular", Consolas, monospace;
    font-variant-numeric: tabular-nums;
    text-align: right;
    white-space: nowrap;
}

.stock-inventory-table .entry {
    color: var(--inventory-green);
}

.stock-inventory-table .exit {
    color: var(--inventory-red);
}

.stock-inventory-table .onhand {
    color: var(--inventory-walnut-dark);
    font-weight: 800;
}

.stock-inventory-stock-code {
    display: block;
    overflow: hidden;
    color: var(--inventory-walnut-dark);
    font-size: 8.8px;
    font-weight: 800;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.stock-inventory-stock-name {
    display: block;
    overflow: hidden;
    color: var(--inventory-text);
    font-size: 8.2px;
    font-weight: 650;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.stock-inventory-state {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 6px;
    border-radius: 999px;
    font-size: 6.7px;
    font-weight: 800;
    white-space: nowrap;
}

.stock-inventory-state::before {
    content: "";
    width: 5px;
    height: 5px;
    border-radius: 50%;
}

.stock-inventory-state.ok,
.stock-inventory-state.entry {
    background: var(--inventory-green-soft);
    color: var(--inventory-green);
}

.stock-inventory-state.ok::before,
.stock-inventory-state.entry::before {
    background: var(--inventory-green);
}

.stock-inventory-state.low {
    background: var(--inventory-orange-soft);
    color: var(--inventory-orange);
}

.stock-inventory-state.low::before {
    background: var(--inventory-orange);
}

.stock-inventory-state.empty,
.stock-inventory-state.exit {
    background: var(--inventory-red-soft);
    color: var(--inventory-red);
}

.stock-inventory-state.empty::before,
.stock-inventory-state.exit::before {
    background: var(--inventory-red);
}

.stock-inventory-row-actions {
    display: flex;
    justify-content: flex-end;
}

.stock-inventory-detail-btn {
    height: 25px;
    padding: 0 8px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    border: 1px solid var(--inventory-border);
    border-radius: 6px;
    background: #fff;
    color: var(--inventory-walnut-dark);
    text-decoration: none;
    font-size: 7px;
    font-weight: 800;
}

.stock-inventory-detail-btn:hover,
.stock-inventory-detail-btn:focus {
    background: var(--inventory-walnut-soft);
    color: var(--inventory-walnut-dark);
}

.stock-inventory-detail-btn svg {
    width: 10px;
    height: 10px;
}

.stock-inventory-empty-state {
    padding: 30px;
    color: var(--inventory-muted);
    font-size: 9px;
    text-align: center;
}

.stock-movement-modal .modal-dialog {
    max-width: min(760px, 94vw);
}

.stock-movement-modal-content {
    border: 1px solid #e1dbd3;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 20px 55px rgba(45, 31, 22, 0.18);
    overflow: hidden;
}

.stock-movement-modal-header {
    min-height: 46px;
    padding: 0 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    background: #faf8f4;
    border-bottom: 1px solid #eee9e3;
}

.stock-movement-modal-header h2 {
    margin: 0;
    color: #3f281b;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 12px;
}

.stock-movement-modal-header p {
    margin: 2px 0 0;
    color: #81776d;
    font-size: 7px;
}

.stock-movement-modal-close {
    width: 28px;
    height: 28px;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: #81776d;
    font-size: 16px;
    cursor: pointer;
}

.stock-movement-modal-body {
    padding: 12px;
}

.stock-movement-type {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 7px;
    margin-bottom: 10px;
}

.stock-movement-option {
    min-height: 44px;
    padding: 7px 9px;
    display: flex;
    align-items: center;
    gap: 8px;
    border: 1px solid #e1dbd3;
    border-radius: 8px;
    background: #fff;
    cursor: pointer;
    transition: 0.15s ease;
}

.stock-movement-option:hover {
    background: #faf8f4;
}

.stock-movement-option.is-active {
    border-color: #ccbcae;
    background: #eee5dc;
}

.stock-movement-option input {
    accent-color: #5d3a25;
}

.stock-movement-option strong {
    display: block;
    color: #3f281b;
    font-size: 8px;
}

.stock-movement-option span span {
    display: block;
    margin-top: 1px;
    color: #81776d;
    font-size: 6.8px;
}

.stock-movement-form-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 9px;
}

.stock-movement-field {
    min-width: 0;
}

.stock-movement-field.span2 {
    grid-column: span 2;
}

.stock-movement-field label {
    display: block;
    margin-bottom: 4px;
    color: #81776d;
    font-size: 7px;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.stock-movement-field input,
.stock-movement-field select,
.stock-movement-field textarea {
    width: 100%;
    border: 1px solid #d8d0c7;
    border-radius: 6px;
    outline: none;
    background: #fff;
    color: #28221e;
    font-size: 8px;
}

.stock-movement-field input,
.stock-movement-field select {
    height: 30px;
    padding: 0 8px;
}

.stock-movement-field textarea {
    height: 58px;
    padding: 7px 8px;
    resize: none;
}

.stock-movement-field input:focus,
.stock-movement-field select:focus,
.stock-movement-field textarea:focus {
    border-color: #b2732d;
    box-shadow: 0 0 0 2px #f6ead8;
}

.stock-movement-field .text-danger {
    display: block;
    margin-top: 3px;
    font-size: 7px;
}

.stock-movement-modal-footer {
    min-height: 46px;
    padding: 6px 10px;
    display: flex;
    justify-content: flex-end;
    gap: 6px;
    background: #faf8f4;
    border-top: 1px solid #eee9e3;
}

@media (max-width: 1050px) {
    .stock-inventory-summary {
        grid-template-columns: repeat(5, minmax(100px, 1fr));
    }

    .stock-inventory-search {
        width: 170px;
    }
}

@media (max-width: 820px) {
    .stock-inventory-screen {
        height: auto;
        min-height: 100vh;
        display: flex;
        flex-direction: column;
        overflow: visible;
    }

    .stock-inventory-header {
        flex-direction: column;
        align-items: flex-start;
    }

    .stock-inventory-summary {
        grid-template-columns: repeat(2, 1fr);
    }

    .stock-inventory-panel {
        min-height: 560px;
    }

    .stock-inventory-toolbar {
        flex-direction: column;
        align-items: stretch;
    }

    .stock-inventory-toolbar-right,
    .stock-inventory-search {
        width: 100%;
    }

    .stock-movement-form-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .stock-movement-field.span2 {
        grid-column: span 2;
    }
}

/* Two per-row actions side by side without letting either stretch the row's height. */
.inline-action-group {
  display: flex;
  align-items: center;
  gap: 6px;
}

.inline-action-group .inline-action-form {
  display: contents;
}

/* A note the user has to read before saving, not a decoration. */
.erp-form-hint {
  margin: 10px 0 0;
  border-left: 3px solid var(--farro-accent);
  background: var(--farro-surface);
  color: var(--farro-text-body);
  font-size: 0.76rem;
  line-height: 1.45;
  padding: 7px 10px;
}

/* ---------- Production order: steps ---------- */

.production-order-step-progress {
  display: block;
  margin-top: 2px;
  color: var(--farro-muted);
  font-size: 11px;
  font-weight: 700;
}

/* ---------- Ortak üst çubuk (_MobileTopNav) ----------
   Ana sayfa (telefonda), satış ve şoför düzenleri aynı çubuğu kullanır: solda logo, sağda menü düğmesi;
   menü çubuğun altına açılır ve içeriği aşağı iter. Saha düzenlerinde 641px ve üstünde düğme gizlenir,
   bağlantılar çubuğun içinde yan yana durur. Dokunma hedefleri en az 48px, renkler :root token'larından. */
.mobile-topnav {
  border-bottom: 1px solid var(--farro-surface-border);
  background: var(--farro-card);
}

.mobile-topnav.is-phone-only {
  display: none;
}

.mobile-topnav-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 56px;
  padding: 4px 8px 4px 12px;
}

.mobile-topnav-brand {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
}

.mobile-topnav-logo {
  width: 72px;
  height: auto;
}

.mobile-topnav-user {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  color: var(--farro-muted);
  font-size: 14px;
  font-weight: 600;
  text-align: right;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mobile-topnav-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  flex: 0 0 auto;
  border: 1px solid var(--farro-surface-border);
  border-radius: 8px;
  background: var(--farro-card);
  color: var(--farro-text);
}

.mobile-topnav-toggle svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-width: 2;
}

.mobile-topnav.is-open .mobile-topnav-toggle {
  background: var(--farro-accent-soft);
}

.mobile-topnav-menu {
  display: none;
  flex-direction: column;
  padding: 4px 8px 8px;
  border-top: 1px solid var(--farro-surface-border);
}

.mobile-topnav.is-open .mobile-topnav-menu {
  display: flex;
}

.mobile-topnav-logout {
  margin: 0;
}

.mobile-topnav-link {
  display: flex;
  align-items: center;
  width: 100%;
  min-height: 48px;
  padding: 0 12px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--farro-text);
  font-size: 16px;
  font-weight: 700;
  text-align: left;
  text-decoration: none;
}

.mobile-topnav-link:hover,
.mobile-topnav-link:focus-visible,
.mobile-topnav-link.is-active {
  background: var(--farro-accent-soft);
  color: var(--farro-text);
}

@media (max-width: 640px) {
  .mobile-topnav.is-phone-only {
    display: block;
  }
}

/* Saha düzenleri geniş ekranda: menü düğmesiz, bağlantılar logodan sonra yan yana; kullanıcı adı sağda. */
@media (min-width: 641px) {
  .mobile-topnav:not(.is-phone-only) {
    display: flex;
    align-items: center;
    padding-right: 12px;
  }

  .mobile-topnav:not(.is-phone-only) .mobile-topnav-bar {
    display: contents;
  }

  .mobile-topnav:not(.is-phone-only) .mobile-topnav-brand {
    padding-left: 12px;
  }

  .mobile-topnav:not(.is-phone-only) .mobile-topnav-toggle {
    display: none;
  }

  .mobile-topnav:not(.is-phone-only) .mobile-topnav-menu {
    display: flex;
    order: 1;
    flex-direction: row;
    gap: 4px;
    margin-right: auto;
    padding: 0 0 0 12px;
    border-top: 0;
  }

  .mobile-topnav:not(.is-phone-only) .mobile-topnav-user {
    order: 2;
    flex: 0 1 auto;
  }

  .mobile-topnav:not(.is-phone-only) .mobile-topnav-link {
    width: auto;
    min-height: 40px;
    font-size: 15px;
    white-space: nowrap;
  }
}

/* ---------- Workshop (tablet) ----------
   Its own layout without the sidebar. Every tap target is at least 48px; colours only come from
   the :root tokens. */

.workshop-body {
  background: var(--farro-content-bg);
  color: var(--farro-text-body);
}

.workshop-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 16px;
  border-bottom: 1px solid var(--farro-surface-border);
  background: var(--farro-surface);
}

.workshop-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  color: var(--farro-text);
  font-size: 1.1rem;
  font-weight: 800;
  text-decoration: none;
}

.workshop-logo {
  width: auto;
  height: 36px;
}

.workshop-topbar-right {
  display: flex;
  align-items: center;
  gap: 12px;
}

.workshop-user {
  color: var(--farro-muted);
  font-weight: 600;
}

.workshop-link {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  padding: 0 14px;
  border: 1px solid var(--farro-surface-border);
  border-radius: 8px;
  color: var(--farro-text);
  font-weight: 700;
  text-decoration: none;
}

.workshop-main {
  width: 100%;
  max-width: 1120px;
  margin: 0 auto;
  padding: 16px;
}

.workshop-breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
  color: var(--farro-muted);
  font-weight: 600;
}

.workshop-breadcrumb a {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  color: var(--farro-accent);
  text-decoration: none;
}

.workshop-title {
  margin: 0 0 4px;
  color: var(--farro-text);
  font-size: 1.5rem;
  font-weight: 800;
}

.workshop-subtitle {
  margin: 0 0 16px;
  color: var(--farro-muted);
  font-weight: 600;
}

.workshop-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 12px;
}

.workshop-card {
  display: flex;
  min-height: 48px;
  flex-direction: column;
  gap: 8px;
  padding: 16px;
  border: 1px solid var(--farro-surface-border);
  border-radius: 12px;
  background: var(--farro-card);
  color: var(--farro-text-body);
  text-decoration: none;
}

a.workshop-card:hover,
a.workshop-card:focus-visible {
  border-color: var(--farro-accent);
}

.workshop-card-title {
  color: var(--farro-text);
  font-size: 1.2rem;
  font-weight: 800;
}

.workshop-card-meta {
  color: var(--farro-muted);
  font-weight: 600;
}

.workshop-progress {
  display: block;
  height: 8px;
  overflow: hidden;
  border-radius: 999px;
  background: var(--farro-surface);
}

.workshop-progress-bar {
  display: block;
  height: 100%;
  background: var(--farro-success);
}

.workshop-status {
  display: inline-flex;
  align-self: flex-start;
  align-items: center;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--farro-surface);
  color: var(--farro-text);
  font-size: 0.85rem;
  font-weight: 700;
}

.workshop-status.is-running {
  background: var(--farro-accent-soft);
  color: var(--farro-accent-deep);
}

/* A step past its target: the same badge, in the danger colour, so nothing new has to be
   looked for on the screen. */
.workshop-status.is-overrun {
  background: var(--farro-accent-soft);
  color: var(--farro-danger);
}

.workshop-target {
  margin: 8px 0 0;
  color: var(--farro-muted);
  font-weight: 700;
}

.workshop-target.is-overrun {
  color: var(--farro-danger);
}

.workshop-status.is-skipped {
  background: var(--farro-surface);
  color: var(--farro-muted);
}

.workshop-skip {
  margin-top: 16px;
  padding: 12px 16px;
  border: 1px dashed var(--farro-surface-border);
  border-radius: 10px;
}

.workshop-skip > summary {
  min-height: 48px;
  display: flex;
  align-items: center;
  color: var(--farro-muted);
  cursor: pointer;
  font-weight: 700;
}

.workshop-skip-label {
  display: block;
  margin: 8px 0;
  font-weight: 700;
}

.workshop-skip-reason {
  margin: 8px 0 0;
  color: var(--farro-muted);
  font-weight: 600;
}

.workshop-status.is-done {
  background: var(--farro-success-soft);
  color: var(--farro-success);
}

.workshop-status.is-waiting {
  background: var(--farro-surface);
  color: var(--farro-muted);
}

/* The second block of the overview: orders transferred but not started. */
.workshop-section-title {
  margin: 28px 0 2px;
  color: var(--farro-text);
  font-size: 1.15rem;
  font-weight: 800;
}

.workshop-section-note {
  margin: 0 0 12px;
  color: var(--farro-muted);
  font-weight: 600;
}

/* Not a link, so it must not invite a tap; dimmed rather than hidden. */
.workshop-card.is-planned {
  border-style: dashed;
  background: var(--farro-surface);
}

/* One running step on an order card: what is on the floor, and for how long. */
.workshop-step-line {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}

.workshop-step-name {
  color: var(--farro-text);
  font-weight: 700;
}

.workshop-step-elapsed {
  flex: 0 0 auto;
  color: var(--farro-muted);
  font-variant-numeric: tabular-nums;
  font-weight: 700;
}

/* Set by the browser clock in workshop-live.js once a step runs past its standard duration. */
.workshop-step-elapsed.is-overrun,
.workshop-status .is-overrun {
  color: var(--farro-danger);
}

.workshop-step-card {
  margin-bottom: 16px;
  padding: 20px;
  border: 2px solid var(--farro-accent);
  border-radius: 14px;
  background: var(--farro-card);
}

.workshop-step-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.workshop-step-head h2 {
  margin: 0;
  color: var(--farro-text);
  font-size: 1.35rem;
  font-weight: 800;
}

.workshop-instructions {
  margin: 12px 0 0;
  padding: 12px;
  border-radius: 10px;
  background: var(--farro-surface);
  white-space: pre-line;
}

/* The fields of the running step. One column on a phone, two or more as the screen allows, so a
   desk user does not scroll through a single tall column of half empty inputs. */
.workshop-fields {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 14px 24px;
  margin-top: 12px;
}

.workshop-field {
  margin: 0;
  padding: 0;
  border: 0;
  /* A grid item defaults to min-content width; without this a long field name stretches the column. */
  min-width: 0;
}

/* Free text and long option lists read better across the whole row. */
.workshop-field-wide {
  grid-column: 1 / -1;
}

/* Bootstrap's reboot floats every legend (float: left; width: 100%), which leaves the control
   squeezed into the zero width beside the float - the field ends up a few pixels wide and the
   unit wraps under it. The legend here is a plain block label above its control. */
.workshop-field legend {
  display: block;
  float: none;
  width: 100%;
  margin-bottom: 8px;
  color: var(--farro-text);
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1.3;
}

.workshop-required {
  color: var(--farro-danger);
}

/* Comfortable on a tablet finger and on a desk mouse alike: the tap target never drops below
   48px, the text scales a little with the viewport instead of staying at the tablet size. */
.workshop-input {
  width: 100%;
  min-height: 52px;
  padding: 10px 14px;
  font-size: clamp(1rem, 0.95rem + 0.3vw, 1.25rem);
}

textarea.workshop-input {
  min-height: 92px;
  max-width: 720px;
  resize: vertical;
}

/* Capped so a single number field does not stretch across a wide monitor; below the cap it is
   simply full width. */
.workshop-number {
  display: flex;
  max-width: 360px;
  align-items: center;
  gap: 10px;
}

.workshop-number .workshop-input {
  flex: 1 1 auto;
  min-width: 0;
}

.workshop-unit {
  flex: 0 0 auto;
  color: var(--farro-muted);
  font-size: 1.05rem;
  font-weight: 700;
  white-space: nowrap;
}

.workshop-choice-group {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.workshop-choice {
  position: relative;
}

/* The radio stays in the tab order and the accessibility tree; only its box is hidden, the label
   is the big tap target. */
.workshop-choice input {
  position: absolute;
  opacity: 0;
}

.workshop-choice span {
  display: inline-flex;
  min-width: 112px;
  min-height: 52px;
  font-size: 1.02rem;
  align-items: center;
  justify-content: center;
  padding: 0 18px;
  border: 2px solid var(--farro-surface-border);
  border-radius: 10px;
  background: var(--farro-card);
  font-weight: 700;
  cursor: pointer;
}

.workshop-choice input:checked + span {
  border-color: var(--farro-accent);
  background: var(--farro-accent-soft);
  color: var(--farro-accent-deep);
}

.workshop-choice input:focus-visible + span {
  outline: 3px solid var(--farro-accent);
  outline-offset: 2px;
}

.workshop-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 20px;
}

.workshop-button {
  display: inline-flex;
  min-width: 140px;
  min-height: 56px;
  align-items: center;
  justify-content: center;
  padding: 0 24px;
  border: 2px solid var(--farro-accent);
  border-radius: 12px;
  background: var(--farro-card);
  color: var(--farro-accent);
  font-size: 1.1rem;
  font-weight: 800;
}

.workshop-button-primary {
  background: var(--farro-accent);
  color: var(--farro-card);
}

.workshop-history {
  margin-top: 16px;
}

.workshop-history h3 {
  color: var(--farro-text);
  font-size: 1.05rem;
  font-weight: 800;
}

.workshop-history-item {
  margin-bottom: 8px;
  padding: 12px 16px;
  border: 1px solid var(--farro-surface-border);
  border-radius: 10px;
  background: var(--farro-card);
}

.workshop-history-values {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 4px 12px;
  margin: 8px 0 0;
}

.workshop-history-values dt {
  color: var(--farro-muted);
  font-weight: 600;
}

.workshop-history-values dd {
  margin: 0;
  font-weight: 700;
}

.workshop-empty,
.workshop-notice {
  margin-bottom: 16px;
  padding: 16px;
  border-radius: 10px;
  background: var(--farro-surface);
  font-weight: 600;
}

/* Sevkiyat rotası: tablo hücreleri ve panellerdeki küçük satır içi formlar. */

/* Şoför telefon ekranı: atölye sınıflarının üstüne, daha büyük dokunma alanlarıyla. */
.driver-stop-list {
  display: grid;
  gap: 10px;
}

/* Sabah ve akşam rutu ayrı bölümlerdir; başlıkta işaretlenen / toplam sevk. */
.driver-route-section {
  display: grid;
  gap: 8px;
  margin-bottom: 20px;
}

.driver-route-title {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin: 0;
  color: var(--farro-text);
  font-size: 1.05rem;
  font-weight: 800;
}

.driver-route-title span {
  color: var(--farro-muted);
  font-size: .9rem;
  font-weight: 600;
}

.driver-stop-card.is-next {
  border-color: var(--farro-accent);
  box-shadow: 0 0 0 2px var(--farro-accent-soft);
}

.driver-stop-card.is-done {
  opacity: 0.6;
}

.driver-stop-detail {
  margin-bottom: 12px;
}

/* Gün seçimi: önceki / tarih / sonraki, parmakla basılacak yükseklikte. */
.driver-date-nav {
  display: flex;
  gap: 8px;
  align-items: stretch;
  margin-bottom: 16px;
}

.driver-date-nav .form-control {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 44px;
}

.driver-date-nav .erp-secondary-button {
  min-width: 44px;
  min-height: 44px;
  justify-content: center;
}

.driver-action {
  width: 100%;
  min-height: 48px;
  justify-content: center;
  font-size: 1rem;
}

/* Satış ekranı ana düzende (ofis kullanıcısı): içerik yüzeyi taşanı kırptığı için sayfa kendi içinde kayar.
   Telefonda _Layout 650px altında kabuğu 720px'e sabitler; bu sayfada kabuk ekran genişliğine iner. Sade satış
   düzeninde (_SalesLayout) içerik yüzeyi yoktur, bu kurallar devreye girmez. */
.content-surface > .sales-route-page {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: 16px;
}

.content-surface > .sales-route-page > * {
  max-width: 1120px;
}

@media (max-width: 640px) {
  body:has(.sales-route-page) .app-shell {
    min-width: 0;
  }

  body:has(.sales-route-page) .app-content {
    padding: 4px;
  }

  .content-surface > .sales-route-page {
    padding: 12px 10px;
  }
}

/* Satış pazarlama ekranı: her sipariş bir <details> satırıdır, basınca kalemleri açılır. Telefonda satır iki
   sütuna (solda firma/tabela/şube, sağda tutar/teslim) iner; geniş ekranda Excel gibi beş sütunlu ızgaradır. */
.sales-route-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 16px;
  margin-bottom: 12px;
  color: var(--farro-muted);
  font-weight: 600;
}

.sales-route-summary strong {
  color: var(--farro-text);
}

.sales-route-search {
  min-height: 44px;
  margin-bottom: 12px;
}

.sales-route-grid {
  overflow: hidden;
  border: 1px solid var(--farro-surface-border);
  border-radius: 10px;
  background: var(--farro-card);
}

.sales-route-head {
  display: none;
}

.sales-route-order + .sales-route-order {
  border-top: 1px solid var(--farro-surface-border);
}

.sales-route-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "firm amount"
    "sign delivery"
    "branch delivery";
  gap: 2px 12px;
  padding: 12px 14px;
  cursor: pointer;
  list-style: none;
}

.sales-route-row::-webkit-details-marker {
  display: none;
}

.sales-route-row:hover,
.sales-route-row:focus-visible {
  background: var(--farro-surface);
}

.sales-route-order[open] > .sales-route-row {
  background: var(--farro-accent-soft);
}

/* Ok girintide mutlak durur; alt satıra kayan uzun unvan metnin hizasından devam eder. */
.sales-route-firm {
  position: relative;
  grid-area: firm;
  min-width: 0;
  padding-left: 14px;
  color: var(--farro-text);
  font-weight: 800;
}

/* Açılır satır olduğunu belli eden ok; açıkken aşağı döner. */
.sales-route-firm::before {
  content: "›";
  position: absolute;
  top: 0;
  left: 0;
  width: 10px;
  color: var(--farro-muted);
  text-align: center;
  transition: transform .15s ease;
}

.sales-route-order[open] .sales-route-firm::before {
  transform: rotate(90deg);
}

.sales-route-sign,
.sales-route-branch {
  min-width: 0;
  padding-left: 14px;
  color: var(--farro-text-body);
  font-size: .9rem;
}

.sales-route-sign {
  grid-area: sign;
}

.sales-route-branch {
  grid-area: branch;
  color: var(--farro-muted);
}

.sales-route-amount {
  grid-area: amount;
  color: var(--farro-text);
  font-weight: 800;
  text-align: right;
  white-space: nowrap;
}

.sales-route-delivery {
  grid-area: delivery;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
}

/* Açık satırın zemini rozet zeminine yakın; ince kenar rozeti her iki zeminde de ayırır. */
.sales-route-delivery .workshop-status {
  align-self: flex-end;
  padding: 2px 9px;
  border: 1px solid var(--farro-surface-border);
  font-size: .78rem;
}

.sales-route-meta {
  margin: 0;
  color: var(--farro-muted);
  font-size: .8rem;
  font-weight: 600;
  text-align: right;
}

.sales-route-detail {
  display: grid;
  gap: 8px;
  padding: 4px 14px 14px 28px;
  background: var(--farro-surface);
}

.sales-route-detail .sales-route-meta {
  text-align: left;
}

.sales-route-note {
  margin: 8px 0 0;
  padding: 8px 10px;
  border-left: 3px solid var(--farro-note-border);
  border-radius: 6px;
  background: var(--farro-note-soft);
  color: var(--farro-text);
  font-weight: 600;
}

.sales-route-lines {
  width: 100%;
  border-collapse: collapse;
  font-size: .9rem;
}

.sales-route-lines th {
  padding: 8px 6px 6px;
  border-bottom: 1px solid var(--farro-surface-border);
  color: var(--farro-muted);
  font-size: .75rem;
  font-weight: 800;
  letter-spacing: .03em;
  text-align: left;
  text-transform: uppercase;
}

.sales-route-lines td {
  padding: 6px;
  border-bottom: 1px solid var(--farro-surface-border);
  color: var(--farro-text-body);
}

.sales-route-lines .is-number {
  text-align: right;
  white-space: nowrap;
}

@media (min-width: 768px) {
  .sales-route-head,
  .sales-route-row {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 1.3fr) minmax(0, 1.3fr) 130px 230px;
    grid-template-areas: "firm sign branch amount delivery";
    align-items: center;
    gap: 12px;
  }

  .sales-route-head {
    padding: 8px 14px;
    border-bottom: 1px solid var(--farro-surface-border);
    background: var(--farro-surface);
    color: var(--farro-muted);
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
  }

  .sales-route-head .is-amount {
    text-align: right;
  }

  .sales-route-row {
    padding: 9px 14px;
  }

  .sales-route-firm,
  .sales-route-sign,
  .sales-route-branch {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .sales-route-sign,
  .sales-route-branch {
    padding-left: 0;
  }

  .sales-route-delivery {
    align-items: flex-start;
  }

  .sales-route-delivery .workshop-status {
    align-self: flex-start;
  }

  .sales-route-delivery .sales-route-meta {
    text-align: left;
  }

  .sales-route-detail {
    padding-left: 28px;
  }

  .sales-route-lines {
    max-width: 720px;
  }
}

/* Mal kabul formu: kalanı aşan satır kehribar; fazla gelen kabul edilir, yalnızca görünür kılınır. */
.purchase-receipt-quantity {
  display: inline-block;
  width: 110px;
  text-align: right;
}

.purchase-receipt-hint {
  white-space: nowrap;
  color: var(--doc-muted);
}

.purchase-receipt-line.is-over > td {
  background: var(--doc-accent-soft);
}

.purchase-receipt-line.is-over .purchase-receipt-hint {
  color: var(--doc-accent);
  font-weight: 700;
}

/* Alış faturası: taslakta satır fiyatları ve mal kabul seçimi. */
.purchase-invoice-input {
  width: 96px;
  display: inline-block;
  text-align: right;
}

.purchase-invoice-fieldset {
  border: 0;
  margin: 0;
  padding: 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.purchase-invoice-receipts {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  padding: 10px 12px;
}

.purchase-invoice-receipt {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--doc-muted);
}

.purchase-invoice-create-fields {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 10px 14px;
  padding: 12px;
  align-items: end;
}

.purchase-invoice-create-fields label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 0.78rem;
  font-weight: 700;
}

.purchase-invoice-create-wide {
  grid-column: span 2;
}

.purchase-invoice-create-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
}

@media (max-width: 820px) {
  .purchase-invoice-create-wide {
    grid-column: auto;
  }
}

/* Cari aktarım sonucu: yeni ve güncellenen cariler yan yana iki tablo. Dar ekranda alt alta iner. */
.import-result-summary {
  margin: 0 0 10px;
  font-size: 13px;
  font-weight: 700;
}

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

.import-result-panel {
  min-width: 0;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--table-border, #e3ddd4);
  border-radius: var(--table-radius-panel, 10px);
  background: var(--table-panel-bg, #ffffff);
  overflow: hidden;
}

.import-result-toolbar {
  min-height: 36px;
  padding: 5px 9px 5px 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  border-bottom: 1px solid var(--table-border-soft, #eee9e2);
  background: var(--table-toolbar-bg, #faf9f6);
}

.import-result-toolbar-left {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.import-result-toolbar h3,
.import-result-errors h3 {
  margin: 0;
  font-size: 13px;
  font-weight: 800;
}

/* Kaydırmayı .data-table-wrap verir (overflow: auto); .managed-table-shell ise max-height'ı kaldırır.
   Pencerede tablo kendi içinde kaymalı, bu yüzden yükseklik burada sınırlanır. */
.import-result-panel .managed-table-shell {
  max-height: 50vh;
}

.import-result-errors {
  margin-top: 12px;
  font-size: 13px;
}

.import-result-errors ul {
  margin: 6px 0 0;
  padding-left: 18px;
  color: var(--bs-danger, #9a2f22);
}

@media (max-width: 992px) {
  .import-result-grids {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Kalıcı silme: cari şube düzenleme modalındaki yıkıcı aksiyon ve uyarı modalı. */
.erp-danger-button {
  min-height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #e6c8c0;
  border-radius: 2px;
  color: #a24d3f;
  background: #fffdfb;
  padding: 0 12px;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
}

.erp-danger-button:hover,
.erp-danger-button:focus {
  border-color: #dba99d;
  background: #f7e7e3;
}

.erp-danger-button:disabled {
  cursor: not-allowed;
  color: #9b8f87;
  background: #f4f0ec;
  border-color: #ddd5ce;
}

.branch-delete-warning,
.branch-delete-blocked {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 12px;
  padding: 10px 12px;
  border: 1px solid #e6c8c0;
  border-radius: 6px;
  background: #f7e7e3;
  color: #7a3326;
  font-size: 13px;
}

.branch-delete-blocked {
  margin-bottom: 0;
}

.branch-delete-list {
  max-height: 240px;
  overflow: auto;
}

/* Admin İşlemleri: tek tuşluk bakım işlemleri, kompakt kart ızgarası ve soru işareti açıklaması. */
/* Sipariş kopyalama (Admin İşlemleri): hedef, alan seçimi ve satırlar alçak paneller halinde alt alta. */
.order-copy-page {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.order-copy-panel {
  padding: 10px 12px;
  border: 1px solid var(--table-border, var(--farro-surface-border));
  border-radius: var(--table-radius-panel, 10px);
  background: var(--table-panel-bg, var(--farro-card));
}

.order-copy-heading {
  margin: 0 0 8px;
  color: var(--farro-text);
  font-size: 13px;
  font-weight: 800;
}

.order-copy-hint {
  margin: -4px 0 8px;
  color: var(--farro-muted);
  font-size: 12px;
}

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

.order-copy-fields {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.order-copy-field {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 0;
  padding: 8px 10px;
  border: 1px solid var(--farro-surface-border);
  border-radius: 7px;
  cursor: pointer;
}

.order-copy-field:has(.form-check-input:checked) {
  border-color: var(--farro-accent);
  background: var(--farro-accent-soft);
}

.order-copy-field .form-check-input {
  flex: 0 0 auto;
  margin: 2px 0 0;
}

.order-copy-field span {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 12px;
}

.order-copy-field small {
  color: var(--farro-muted);
  font-size: 11px;
}

.order-copy-lines-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}

.order-copy-count {
  color: var(--farro-muted);
  font-size: 12px;
  font-weight: 700;
}

.order-copy-lines-wrap {
  max-height: 55vh;
}

.order-copy-lines .order-copy-check-col {
  width: 36px;
  text-align: center;
}

.order-copy-lines tr.is-unselected td:not(.order-copy-check-col) {
  opacity: .45;
}

.order-copy-lines tr.is-cancelled td:nth-child(2) {
  text-decoration: line-through;
}

.order-copy-qty {
  width: 80px;
  height: 24px;
  padding: 0 6px;
  border: 1px solid var(--farro-surface-border);
  border-radius: 5px;
  background: var(--farro-card);
  font-size: 12px;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.order-copy-qty:disabled {
  border-color: transparent;
  background: transparent;
  color: var(--farro-muted);
}

.order-copy-row-button {
  min-height: 24px;
  padding: 2px 10px;
  font-size: 12px;
}

@media (max-width: 900px) {
  .order-copy-target-grid,
  .order-copy-fields {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Bütün kartlar aynı boyutta: satırlar en uzun kartın yüksekliğini paylaşır, buton kartın dibine iner. */
.admin-operations-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-auto-rows: 1fr;
  gap: 10px;
  align-items: stretch;
  padding: 12px 16px;
}

.admin-operation-card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
  padding: 10px 12px;
  border: 1px solid var(--farro-surface-border);
  border-radius: 10px;
  background: var(--farro-card);
  box-shadow: 0 2px 8px rgba(44, 34, 25, .045);
}

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

.admin-operation-card h3 {
  margin: 0;
  font-size: 13px;
  font-weight: 700;
  color: var(--farro-text);
}

.admin-operation-card p {
  margin: 0;
  font-size: 12px;
  line-height: 1.35;
  color: var(--farro-muted);
}

.admin-operation-card .admin-operation-run {
  align-self: flex-start;
  margin-top: auto;
}

/* Buton bir form içindeyse dibe inen form olur; içindeki buton normal akışta kalır. */
.admin-operation-card .admin-operation-run-form {
  margin-top: auto;
}

.admin-operation-card .admin-operation-run-form .admin-operation-run {
  margin-top: 0;
}

@media (max-width: 1400px) {
  .admin-operations-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 900px) {
  .admin-operations-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 560px) {
  .admin-operations-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

.admin-help {
  position: relative;
  display: inline-flex;
}

.admin-help-icon {
  width: 18px;
  height: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--farro-surface-border);
  border-radius: 999px;
  background: var(--farro-surface);
  color: var(--farro-muted);
  font-size: 12px;
  font-weight: 800;
  line-height: 1;
  cursor: help;
}

.admin-help-icon:hover,
.admin-help-icon:focus-visible {
  color: var(--farro-accent);
  border-color: var(--farro-accent);
}

.admin-help-tooltip {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: var(--z-table-popover, 1200);
  width: 300px;
  max-width: calc(100vw - 32px);
  padding: 10px 12px;
  border: 1px solid var(--farro-surface-border);
  border-radius: 8px;
  background: var(--farro-card);
  box-shadow: 0 12px 30px rgba(44, 34, 25, .16);
  color: var(--farro-text-body);
  font-size: 12px;
  line-height: 1.45;
  visibility: hidden;
  opacity: 0;
  transition: opacity .12s ease;
}

.admin-help:hover .admin-help-tooltip,
.admin-help-icon:focus-visible + .admin-help-tooltip {
  visibility: visible;
  opacity: 1;
}

/* Sayfa başlığının yanındaki ikon solda durur; tooltip ekrandan taşmasın diye ikonun sol kenarından
   sağa açılır. Uzun açıklama paragraflara bölünür. */
.admin-help-tooltip.is-start {
  right: auto;
  left: 0;
  width: 420px;
}

.admin-help-tooltip.is-start > span {
  display: block;
}

.admin-help-tooltip.is-start > span + span {
  margin-top: 6px;
}

.stock-page-title-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Satış anlaşması formu: sade, Excel benzeri satır gridi. Bilgi alanları tek kompakt blokta, satırlar
   ince çizgili bir tabloda durur; hücre içindeki kontroller çerçevesizdir ve odaklanınca hücre vurgulanır. */
.sales-agreement-page .stock-page-header {
  min-height: 46px;
  padding: 8px 16px;
}

.sales-agreement-form {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.sales-agreement-form .sa-info {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 6px 10px;
}

.sales-agreement-form .sa-span-1 { grid-column: span 1; }
.sales-agreement-form .sa-span-2 { grid-column: span 2; }
.sales-agreement-form .sa-span-4 { grid-column: span 4; }
.sales-agreement-form .sa-span-7 { grid-column: span 7; }

.sales-agreement-form .sa-info .erp-field label {
  color: #75665e;
  font-size: 11px;
  font-weight: 600;
}

.sales-agreement-form .sa-active-field {
  align-self: end;
  padding-bottom: 4px;
}

.sa-grid-wrap {
  max-width: 100%;
  overflow: auto;
  border: 1px solid #d9cfc6;
  background: #fff;
}

.sa-grid {
  width: 100%;
  min-width: 940px;
  border-collapse: collapse;
  color: #342b27;
  font-size: 12px;
  counter-reset: sa-row;
}

.sa-grid th,
.sa-grid td {
  border: 1px solid #e6dfd7;
}

.sa-grid thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  height: 28px;
  padding: 0 8px;
  background: #f3efe9;
  color: #4c403a;
  font-size: 11px;
  font-weight: 700;
  text-align: left;
  white-space: nowrap;
}

.sa-grid td {
  height: 30px;
  padding: 0;
  background: #fff;
}

.sa-grid tbody tr {
  counter-increment: sa-row;
}

.sa-grid tbody tr:hover td {
  background: #fcfaf6;
}

/* Satır numarası CSS sayacından gelir; satır silinince kendiliğinden yeniden numaralanır. */
.sa-grid .sa-rownum {
  background: #f7f4ef;
  color: #8a7b71;
  font-size: 11px;
  text-align: center;
  user-select: none;
}

.sa-grid .sa-rownum::before {
  content: counter(sa-row);
}

.sa-grid .sa-col-index { width: 36px; text-align: center; }
.sa-grid .sa-col-stock { min-width: 260px; }
.sa-grid .sa-col-unit { width: 96px; }
.sa-grid .sa-col-price { width: 110px; text-align: right; }
.sa-grid .sa-col-discount { width: 62px; text-align: right; }
.sa-grid .sa-col-note { min-width: 160px; }
.sa-grid .sa-col-remove { width: 32px; }

.sa-grid td .form-control,
.sa-grid td .form-select,
.sa-grid td .erp-combobox-input {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 29px;
  padding: 0 8px;
  border: 0;
  border-radius: 0;
  background-color: transparent;
  box-shadow: none;
  color: inherit;
  font-size: 12px;
}

.sa-grid td .form-select {
  padding-right: 20px;
  background-position: right 6px center;
  background-size: 10px;
}

.sa-grid td .erp-combobox {
  min-width: 0;
}

.sa-grid td .erp-combobox::after {
  top: 11px;
}

.sa-grid td .form-control:focus,
.sa-grid td .form-select:focus,
.sa-grid td .erp-combobox-input:focus {
  box-shadow: none;
  outline: 0;
}

/* Odak çerçevesini kontrol değil hücre taşır; Excel'de seçili hücre böyle görünür. */
.sa-grid td:focus-within {
  outline: 2px solid #8f6f5d;
  outline-offset: -2px;
}

.sa-grid .sa-num {
  text-align: right;
  -moz-appearance: textfield;
  appearance: textfield;
}

.sa-grid .sa-num::-webkit-outer-spin-button,
.sa-grid .sa-num::-webkit-inner-spin-button {
  margin: 0;
  -webkit-appearance: none;
}

.sa-grid .sa-remove-cell {
  text-align: center;
}

.sa-row-remove {
  width: 100%;
  height: 100%;
  min-height: 29px;
  border: 0;
  background: transparent;
  color: #a39489;
  font-size: 16px;
  line-height: 1;
}

.sa-row-remove:hover,
.sa-row-remove:focus-visible {
  background: #fbeeea;
  color: #b3402a;
  outline: 0;
}

.sa-grid tfoot td {
  height: 30px;
  border-top: 1px solid #d9cfc6;
  background: #faf8f4;
}

.sa-add-row {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 29px;
  padding: 0 10px;
  border: 0;
  background: transparent;
  color: #6f5a4c;
  font-size: 12px;
  font-weight: 600;
  text-align: left;
}

.sa-add-row:hover,
.sa-add-row:focus-visible {
  background: #f3ede5;
  outline: 0;
}

.sales-agreement-form .sa-footer {
  justify-content: flex-end;
}

@media (max-width: 900px) {
  .sales-agreement-form .sa-info {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .sales-agreement-form .sa-info > * {
    grid-column: span 1;
  }

  .sales-agreement-form .sa-info .sa-span-4,
  .sales-agreement-form .sa-info .sa-span-7 {
    grid-column: span 2;
  }
}

/* Depo Hareketleri: solda ürünler, sağda seçili ürünün hareketleri. Tam yükseklikli tablo ekranı;
   iki panel kalan alanı paylaşır, her grid kendi içinde kayar. */
.dispatchable-orders-page.stock-ledger-page {
  --ledger-red: #a2463b;
  --ledger-red-soft: #f7e6e3;
  height: 100%;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.stock-ledger-page > * {
  flex: 0 0 auto;
}

.stock-ledger-tabs {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  padding: 2px 1px 4px;
}

.stock-ledger-tab {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 32px;
  padding: 4px 10px;
  border: 1px solid var(--dispatch-border);
  border-radius: 7px;
  background: var(--dispatch-surface);
  color: var(--dispatch-text);
  font-size: 11px;
  text-decoration: none;
  box-shadow: var(--dispatch-shadow);
}

.stock-ledger-tab:hover {
  border-color: var(--dispatch-accent);
  color: var(--dispatch-brand-dark);
}

.stock-ledger-tab.is-active {
  border-color: var(--dispatch-brand);
  background: var(--dispatch-brand-soft);
  color: var(--dispatch-brand-dark);
}

.stock-ledger-tab-code {
  font-weight: 800;
}

.stock-ledger-tab-name {
  color: var(--dispatch-muted);
}

.stock-ledger-tab-count {
  padding: 1px 6px;
  border-radius: 999px;
  background: var(--dispatch-accent-soft);
  color: var(--dispatch-brand);
  font-size: 9px;
  font-weight: 800;
}

.stock-ledger-page > .stock-ledger-body {
  flex: 1 1 auto;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
  gap: 8px;
}

.stock-ledger-body .dispatchable-table-panel {
  min-height: 0;
}

.stock-ledger-products-host,
.stock-ledger-movements-host {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.stock-ledger-products-host.is-loading,
.stock-ledger-movements-host.is-loading {
  opacity: .6;
}

.stock-ledger-page .managed-table-shell {
  max-height: none;
  flex: 1 1 auto;
  min-height: 0;
}

/* Gridler panele tam sığar, yatay kaydırma yoktur: genişlikleri başlıklar paylaşır, sayı kolonları dar
   tutulur, taşan metin "…" ile kesilir (tam hali hücrenin title'ında). */
.stock-ledger-page .data-table {
  width: 100%;
  min-width: 0;
  table-layout: fixed;
  font-size: 11px;
}

.stock-ledger-page .data-table th,
.stock-ledger-page .data-table td {
  padding: 4px 6px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.stock-ledger-page .data-table td > * {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: middle;
}

.stock-ledger-page .table-filter-row th {
  padding: 3px 4px;
}

.stock-ledger-page .data-table .primary-sticky-col {
  min-width: 0;
  max-width: none;
}

.stock-ledger-products-table .w-code { width: 21%; }
.stock-ledger-products-table .w-name { width: auto; }
.stock-ledger-products-table .w-quantity { width: 12%; }
.stock-ledger-products-table .w-state { width: 11%; }

.stock-ledger-movements-table .w-date { width: 10%; }
.stock-ledger-movements-table .w-type { width: 15%; }
.stock-ledger-movements-table .w-quantity { width: 8%; }
.stock-ledger-movements-table .w-counter { width: 13%; }
.stock-ledger-movements-table .w-source { width: 64px; text-align: center; }
.stock-ledger-movements-table .w-description { width: auto; }

.stock-ledger-page .numeric-col {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.stock-ledger-code {
  font-weight: 700;
  color: var(--dispatch-brand-dark);
}

.stock-ledger-product-title {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--dispatch-text);
  font-size: 11px;
}

.stock-ledger-type {
  font-weight: 700;
}

.stock-ledger-type.is-entry,
.stock-ledger-entry {
  color: var(--dispatch-green);
}

.stock-ledger-type.is-exit,
.stock-ledger-exit {
  color: var(--dispatch-orange);
}

.stock-ledger-balance {
  font-weight: 800;
}

.stock-ledger-page .is-negative {
  color: var(--ledger-red);
}

.stock-ledger-page .data-table .stock-ledger-source-cell {
  text-align: center;
}

.stock-ledger-source-button {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 1px solid var(--dispatch-border);
  border-radius: 5px;
  background: var(--dispatch-surface);
  color: var(--dispatch-brand);
}

.stock-ledger-source-button:hover,
.stock-ledger-source-button:focus-visible {
  border-color: var(--dispatch-accent);
  background: var(--dispatch-accent-soft);
}

.stock-ledger-source-button svg {
  width: 13px;
  height: 13px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
}

.stock-ledger-page .dispatchable-status-badge.status-negative {
  background: var(--ledger-red-soft);
  color: var(--ledger-red);
}

.stock-ledger-page .dispatchable-status-badge.status-empty {
  background: var(--dispatch-surface-soft);
  color: var(--dispatch-muted);
}

.stock-ledger-placeholder {
  margin: auto;
}

/* Dar ekranda paneller alt alta dizilir ve sayfa normal akışa döner. */
@media (max-width: 900px) {
  .dispatchable-orders-page.stock-ledger-page {
    height: auto;
    min-height: 100svh;
    overflow: visible;
  }

  .stock-ledger-page > .stock-ledger-body {
    grid-template-columns: minmax(0, 1fr);
  }

  .stock-ledger-body .dispatchable-table-panel {
    height: 70svh;
  }
}

/* Kaynak belge modal'ı: Depo Hareketleri ekranından açılan salt okunur belge özeti. Modal sayfa
   kapsayıcısının dışında render edildiği için renkler burada yeniden tanımlıdır. */
.stock-source-modal {
  --source-text: #25221f;
  --source-muted: #827a70;
  --source-border: #e3ddd4;
  --source-border-soft: #eee9e2;
  --source-header-bg: #f4f1eb;
  --source-brand: #5e3f2b;
  --source-highlight: #f5ecd9;
}

.stock-source-summary {
  display: grid;
  gap: 12px;
  color: var(--source-text);
  font-size: 12px;
}

.stock-source-summary-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.stock-source-summary-type {
  display: block;
  color: var(--source-muted);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.stock-source-summary-number {
  color: var(--source-brand);
  font-size: 15px;
}

.stock-source-summary-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--source-muted);
}

.stock-source-summary-fields {
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 8px 14px;
}

.stock-source-summary-fields dt {
  color: var(--source-muted);
  font-size: 10px;
  font-weight: 700;
}

.stock-source-summary-fields dd {
  margin: 0;
  font-weight: 600;
}

.stock-source-summary-description {
  margin: 0;
  padding: 8px 10px;
  border-radius: 6px;
  background: var(--source-header-bg);
}

.stock-source-summary-section h3 {
  margin: 0 0 6px;
  color: var(--source-brand);
  font-size: 12px;
  font-weight: 800;
}

.stock-source-summary-section h3 span {
  color: var(--source-muted);
  font-size: 10px;
  font-weight: 600;
}

.stock-source-summary-table {
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
  font-size: 11px;
}

.stock-source-summary-table th,
.stock-source-summary-table td {
  padding: 4px 6px;
  border-bottom: 1px solid var(--source-border-soft);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.stock-source-summary-table th {
  border-bottom-color: var(--source-border);
  background: var(--source-header-bg);
  color: var(--source-muted);
  font-size: 10px;
  text-align: left;
}

.stock-source-summary-table .numeric-col {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.stock-source-summary-table .w-no { width: 32px; }
.stock-source-summary-table .w-code { width: 18%; }
.stock-source-summary-table .w-quantity { width: 12%; }
.stock-source-summary-table .w-unit { width: 9%; }

.stock-source-summary-table tr.is-highlighted td {
  background: var(--source-highlight);
  font-weight: 700;
}

/* Fatura listesi aktarımı: cari ekstre gibi flex kolon; form, uyarı ve özet kendi yüksekliğinde kalır,
   kalan alanı tablo paneli alır. */
.dispatchable-orders-page.invoice-list-import-page {
  height: 100%;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.invoice-list-import-page > * {
  flex: 0 0 auto;
}

.invoice-list-import-page > .validation-summary-valid {
  display: none;
}

.invoice-list-import-page > .dispatchable-table-panel {
  flex: 1 1 auto;
  min-height: 0;
}

.invoice-list-import-page .dispatchable-table-panel .managed-table-shell {
  max-height: none;
  flex: 1 1 auto;
  min-height: 0;
}

.invoice-list-import-form {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 9px;
  border: 1px solid var(--dispatch-border);
  border-radius: 10px;
  background: var(--dispatch-surface);
  box-shadow: var(--dispatch-shadow);
}

.invoice-list-import-form .form-control {
  max-width: 420px;
}

/* Toplu anlaşma aktarımının yöntem seçimi: Bootstrap'in tam genişliği formu yaymasın. */
.invoice-list-import-form .sales-agreement-import-mode {
  width: auto;
  flex: 0 0 auto;
}

@media (max-width: 820px) {
  .dispatchable-orders-page.invoice-list-import-page {
    height: auto;
    min-height: 100vh;
    overflow: visible;
  }

  .invoice-list-import-form {
    flex-wrap: wrap;
  }
}

/* --- Kolon genişliği (createManagedTable, resizableColumns: true) -------------------------
   Boyutlandırma açılınca tablo `fixed` düzene geçer: `auto` düzende hücre içeriğinden dar
   olamaz, ne daraltma ne de üç nokta mümkündür. Doğal genişlikler geçişten önce ölçülüp
   başlıklara yazılır. */
.data-table.is-column-resizable {
  table-layout: fixed;
}

/* Yalnızca sabit olmayan başlıklar tutamak için konumlandırılır. Sticky kolonlar zaten
   konumlandırılmıştır; onlara position: relative vermek dondurmayı bozar. */
.data-table.is-column-resizable thead th:not(.primary-sticky-col):not(.action-sticky-col) {
  position: relative;
}

.data-table.is-column-resizable th,
.data-table.is-column-resizable td {
  overflow: hidden;
  text-overflow: ellipsis;
}

/* display değiştirilmez; aksi halde inline-block rozetler kolon boyunca uzar. */
.data-table.is-column-resizable td > * {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: middle;
}

/* Sıralama butonu ve değer filtresi dar kolonda başlığı taşırmaz; metin kesilir. */
.data-table.is-column-resizable .table-header-controls,
.data-table.is-column-resizable .table-sort-button {
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
}

.table-column-resizer {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 1;
  width: 7px;
  height: 100%;
  cursor: col-resize;
  touch-action: none;
  user-select: none;
}

.table-column-resizer::after {
  content: "";
  position: absolute;
  top: 25%;
  right: 2px;
  width: 2px;
  height: 50%;
  border-radius: 999px;
  background: transparent;
  transition: background .12s ease;
}

.data-table thead th:hover > .table-column-resizer::after,
.table-column-resizer:hover::after,
.data-table.is-column-resizing .table-column-resizer:hover::after {
  background: var(--table-accent, #b18442);
}

/* Sürükleme sırasında metin seçilmez ve imleç tablo boyunca değişmez. */
.data-table.is-column-resizing,
.data-table.is-column-resizing * {
  cursor: col-resize !important;
  user-select: none;
}

/* Sığdırma ölçümü: kırpma ve %100 genişlikler kalkar, içerik doğal boyuna açılır. Yalnızca
   ölçüm anında, aynı karede eklenip kaldırılır. */
/* Başlık sarmalayıcısı blok düzeyde flex'tir ve hücreyi doldurur; ölçümde satır içine alınmazsa
   başlık her zaman kolonun kendi genişliğinde ölçülür ve kolon hiç daralmaz. */
.data-table.is-column-measuring .table-header-controls {
  display: inline-flex !important;
}

.data-table.is-column-measuring .table-sort-button,
.data-table.is-column-measuring .table-header-controls {
  width: auto !important;
  max-width: none !important;
}

.data-table.is-column-measuring td > *,
.data-table.is-column-measuring th > * {
  max-width: none !important;
}

.data-table.is-column-measuring .table-column-resizer {
  display: none;
}

/* Ortak onay modalı (site.js, data-confirm): tarayıcının confirm() penceresinin yerine. */
.erp-confirm-dialog {
  max-width: 420px;
}

.erp-confirm-message {
  margin: 4px 0 6px;
  color: #4c403a;
  font-size: 13px;
  line-height: 1.5;
  white-space: pre-line;
}

/* Numune talebi (satışçı, telefon öncelikli): firma alanları, kategoriye göre açılır ürün listesi ve her ürünün
   yanında miktar kutusu. Girişler 16px: iOS küçük yazılı kutuya odaklanınca sayfayı yakınlaştırır. Kaydet altta
   yapışık durur ki uzun listede yukarı kaydırmak gerekmesin. */
.sample-request-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.sample-request-new {
  min-height: 44px;
}

.sample-request-form {
  display: grid;
  gap: 12px;
  padding-bottom: calc(76px + env(safe-area-inset-bottom));
}

.sample-request-section {
  gap: 10px;
}

.sample-request-section-title {
  margin: 0;
  color: var(--farro-text);
  font-size: 1.05rem;
  font-weight: 800;
}

.sample-request-section-title span {
  color: var(--farro-muted);
  font-size: .9rem;
  font-weight: 600;
}

.sample-request-field {
  display: grid;
  gap: 4px;
  min-width: 0;
  color: var(--farro-muted);
  font-size: .85rem;
  font-weight: 700;
}

.sample-request-field .form-control,
.sample-request-search,
.sample-request-quantity {
  min-height: 44px;
  font-size: 16px;
}

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

.sample-request-group {
  border: 1px solid var(--farro-surface-border);
  border-radius: 10px;
}

.sample-request-group > summary {
  display: flex;
  min-height: 48px;
  align-items: center;
  justify-content: space-between;
  padding: 0 12px;
  color: var(--farro-text);
  cursor: pointer;
  font-weight: 800;
}

.sample-request-group > summary small {
  color: var(--farro-muted);
  font-weight: 600;
}

.sample-request-product {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 96px 44px;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border-top: 1px solid var(--farro-surface-border);
}

.sample-request-product[hidden],
.sample-request-group[hidden] {
  display: none;
}

.sample-request-product-name {
  min-width: 0;
  color: var(--farro-text-body);
  font-weight: 600;
}

.sample-request-product-name small {
  display: block;
  color: var(--farro-muted);
  font-weight: 600;
}

.sample-request-quantity {
  text-align: right;
}

.sample-request-unit {
  color: var(--farro-muted);
  font-size: .85rem;
  font-weight: 700;
}

.sample-request-actions {
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 5;
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 8px;
  padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--farro-surface-border);
  background: var(--farro-card);
}

.sample-request-error {
  white-space: pre-line;
  color: var(--farro-danger);
}

.sample-request-detail-action {
  margin-bottom: 8px;
}

@media (min-width: 768px) {
  .sample-request-actions {
    position: static;
    padding: 0;
    border-top: 0;
    background: transparent;
  }

  .sample-request-form {
    padding-bottom: 0;
  }
}

/* Ofisin numune talebi (SampleRequests/Create): aynı form alanları ana düzende; geniş ekranda solda firma, sağda
   ürünler, butonlar sağ altta. */
.sample-request-office-page {
  display: grid;
  gap: 12px;
}

@media (min-width: 1100px) {
  .sample-request-office-page .sample-request-form {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr);
    align-items: start;
  }

  .sample-request-office-page .sample-request-actions {
    grid-column: 1 / -1;
    display: flex;
    justify-content: flex-end;
  }
}

/* Düzenlenen talepte ürün listesinden düşmüş satırlar: uyarı tonunda, satışçı miktarı silerek bilerek çıkarır. */
.sample-request-unavailable {
  border-color: var(--farro-note-border);
  background: var(--farro-note-soft);
}

.sample-request-unavailable-title {
  margin: 0;
  padding: 10px 12px;
  color: var(--farro-danger);
  font-weight: 700;
}

/* Tabela adı kolonu: cari adının bulunduğu listelerde unvanın yanında durur. Sabit düzenli tablolarda
   genişliği olmayan kolon 0'a düştüğü için genişlik her tabloda buradan gelir. */
.data-table .w-trade-name {
  width: 180px;
}

/* Grid satır aksiyonları: ikon butonlar (erp-icon-button erp-row-eye-button) yan yana durur, satırdaki formlar
   boşluk açmaz. Yıkıcı aksiyon (kalıcı sil, iptal) kırmızıdır. Açıklama site.js'teki data-row-tooltip ile gelir. */
.grid-row-actions {
  display: flex;
  align-items: center;
  gap: 4px;
}

.grid-row-actions form {
  margin: 0;
}

.erp-icon-button.grid-row-action-danger {
  color: var(--farro-danger);
}

.erp-icon-button.grid-row-action-danger:hover,
.erp-icon-button.grid-row-action-danger:focus {
  border-color: var(--farro-danger);
}

.erp-icon-button:disabled {
  opacity: .45;
  cursor: not-allowed;
}

/* Bağlantı olarak çizilen ikon buton (Detay, Ekstre) buton gibi görünür. */
a.erp-icon-button {
  text-decoration: none;
}