/*
  Uygulama genelinde okunabilirlik ölçeği.
  Aynı oran; başlık, kart, form, tablo ve modal yerleşimlerine birlikte
  uygulandığı için ekranlar arasında görsel tutarlılık korunur.
*/
#app {
  zoom: 1.045;
}

/* Form ve detay pencereleri uygulama kökünün dışında oluşturulur. */
body > .modal-backdrop > .modal {
  zoom: 1.045;
}

/* Tabletlerde içerik alanı korunurken daha rahat okunur. */
@media (max-width: 1050px) {
  #app {
    zoom: 1.03;
  }

  body > .modal-backdrop > .modal {
    zoom: 1.03;
  }
}

/* Telefonlarda ek ölçeği kapatırız; bu sayede gerçek ekran genişliği korunur. */
@media (max-width: 760px) {
  #app {
    zoom: 1;
  }

  body > .modal-backdrop > .modal {
    zoom: 1;
  }
}

/*
  Telefon kullanım düzeni
  - Kartlar ve özetler dar alanda dengeli iki sütun kullanır.
  - Formlar tek sütuna iner; dokunma hedefleri rahat kalır.
  - Büyük tablolar küçültülmek yerine yatay kaydırılabilir olarak korunur.
*/
@media (max-width: 620px) {
  html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
  }

  body {
    overflow-x: hidden;
  }

  .source-workspace {
    padding: 18px 14px calc(28px + env(safe-area-inset-bottom));
  }

  .source-workspace:has(> .source-module-grid) {
    min-height: calc(100dvh - 70px);
    padding: 34px 14px calc(42px + env(safe-area-inset-bottom));
  }

  .source-workspace:has(> .source-module-grid) > .source-page-header {
    margin-bottom: 20px;
  }

  .source-page-header h2 {
    font-size: 24px;
  }

  .source-page-header p {
    font-size: 13px;
    line-height: 1.5;
  }

  .source-page-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
    gap: 9px;
  }

  .source-page-actions > * {
    min-width: 0;
    min-height: 42px;
  }

  .source-module-grid {
    gap: 12px;
  }

  .source-module-card {
    min-height: 154px;
    padding: 18px;
  }

  .source-module-icon {
    width: 42px;
    height: 42px;
    margin-bottom: 13px;
    font-size: 20px;
  }

  .source-module-card strong {
    font-size: 15px;
  }

  .source-module-card small {
    font-size: 12px;
  }

  .source-summary-grid,
  .fault-summary-grid,
  .packaging-summary-grid,
  .packaging-analysis-stat-grid,
  .stock-summary-grid,
  .production-analysis-stat-grid,
  .portal-summary-grid,
  .carcass-summary-grid {
    gap: 10px;
  }

  .source-summary,
  .fault-summary,
  .packaging-analysis-stat,
  .production-analysis-stat,
  .carcass-summary,
  .stock-summary-grid article {
    min-height: 92px;
    padding: 13px;
  }

  .source-summary b,
  .fault-summary b,
  .production-analysis-stat b,
  .carcass-summary b {
    font-size: 21px;
  }

  .source-form-grid,
  .packaging-form-grid,
  .packaging-form-grid.four,
  .carcass-form-grid,
  .planning-form-grid,
  .dough-usage-form-grid,
  .order-meta-grid,
  .order-line-grid,
  .cold-storage-lot-fields {
    grid-template-columns: minmax(0, 1fr);
  }

  .source-form-grid .full,
  .packaging-form-grid .full,
  .carcass-readout.wide,
  .order-line-product {
    grid-column: auto;
  }

  .source-record-panel-head,
  .stock-panel > header,
  .stock-history-panel > header,
  .order-allocation-panel > header,
  .invoice-control-upload-panel > header {
    align-items: stretch;
    flex-direction: column;
    gap: 10px;
    padding: 15px;
  }

  .source-record-panel-head input,
  .stock-panel > header input,
  .stock-history-panel > header input,
  .order-allocation-panel > header input,
  .invoice-control-upload-panel > header input {
    width: 100%;
  }

  .source-record-row {
    grid-template-columns: 34px minmax(0, 1fr);
    gap: 9px;
  }

  .record-actions,
  .stock-row-actions,
  .smart-card-actions {
    grid-column: 2;
    flex-wrap: wrap;
  }

  .record-action,
  .stock-add-button,
  .stock-use-button {
    min-height: 38px;
  }

  .document-folder-grid,
  .portal-survey-grid,
  .cold-storage-warehouse-grid,
  .iq-hub-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .document-folder-card {
    min-height: 76px;
  }

  .table-wrap {
    margin-inline: -14px;
    padding-inline: 14px;
    -webkit-overflow-scrolling: touch;
  }

  .modal-backdrop {
    align-items: flex-start;
    overflow-y: auto;
    padding: 12px;
  }

  body > .modal-backdrop > .modal {
    width: 100%;
    max-height: calc(100dvh - 24px);
    margin: 0;
    overflow: auto;
    border-radius: 18px;
  }

  .modal-head {
    position: sticky;
    top: 0;
    z-index: 2;
    padding-bottom: 14px;
    background: #fff;
  }

  .modal-head h2 {
    font-size: 19px;
  }

  .modal-actions,
  .packaging-form-actions,
  .planning-form-actions,
  .carcass-form-actions {
    align-items: stretch;
    flex-direction: column-reverse;
  }

  .modal-actions > button,
  .packaging-form-actions > button,
  .planning-form-actions > button,
  .carcass-form-actions > button {
    width: 100%;
    min-height: 46px;
  }
}