/* Screen-only workspace rhythm. Ledger structure and printed documents stay unchanged. */
@media screen {
  :root, :host {
    --workspace-space: 16px;
    --workspace-field-height: 40px;
    --workspace-action-height: 38px;
  }
  :is(#distributorView, #payableSummaryView, #finishedProductView, #rawMaterialView,
      #financePositionView, #deliveryView, #settingsView, :host) :is(.hidden, [hidden]) {
    display: none !important;
  }

  :is(#distributorForm, #payableSummaryView #payablePaymentForm,
      #finishedProductView #finishedProductForm, #finishedProductView #productForm,
      #rawEntryForm, #rawItemForm, #financeAccountForm, #financeEntryForm,
      #financeLoanOpeningForm, #companyInfoForm, #deliveryRunForm,
      form[data-delivery-directory], :host form) { min-width: 0; gap: 12px; }
  :is(#distributorForm, #payableSummaryView #payablePaymentForm,
      #finishedProductView #finishedProductForm, #finishedProductView #productForm,
      #rawEntryForm, #rawItemForm, #financeAccountForm, #financeEntryForm,
      #financeLoanOpeningForm, #companyInfoForm, #deliveryRunForm,
      form[data-delivery-directory], :host form) label { min-width: 0; gap: 4px; }

  :is(#distributorForm, #payableSummaryView #payablePaymentForm,
      #finishedProductView #finishedProductForm, #finishedProductView #productForm,
      #rawEntryForm, #rawItemForm, #financeAccountForm, #financeEntryForm,
      #financeLoanOpeningForm, #companyInfoForm, #deliveryRunForm,
      form[data-delivery-directory], :host form)
      :is(input:not([type="checkbox"], [type="radio"], [type="hidden"], [type="file"],
                    [type="color"], [type="range"], [type="submit"], [type="button"], [type="reset"]), select) {
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    height: var(--workspace-field-height);
    min-height: var(--workspace-field-height);
  }
  :is(#distributorForm, #payableSummaryView #payablePaymentForm,
      #finishedProductView #finishedProductForm, #finishedProductView #productForm,
      #rawEntryForm, #rawItemForm, #financeAccountForm, #financeEntryForm,
      #financeLoanOpeningForm, #companyInfoForm, #deliveryRunForm,
      form[data-delivery-directory], :host form) textarea {
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    min-height: 64px;
    resize: vertical;
  }

  #distributorView .side-panel, #payableSummaryView .payable-detail-panel,
  #finishedProductEntryPanel, #finishedProductProductsPanel > .panel, #rawEntryForm, #rawItemForm,
  #financePositionView .finance-entry-panel, #deliveryView #deliveryRunForm,
  :host form:not(.plastics-inline-form), :host #purchaseDataView .purchase-data-editor-pane {
    padding: var(--workspace-space);
    min-width: 0;
  }
  #distributorView .side-panel > .panel-head,
  #payableSummaryView .payable-detail-panel > .panel-head,
  #finishedProductEntryPanel > .panel-head, #finishedProductProductsPanel > .panel > .panel-head,
  :is(#rawEntryForm, #rawItemForm, #financeAccountForm, #financeEntryForm) > .panel-head,
  #deliveryView .delivery-run-heading, :host form > .panel-head {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    text-align: left;
    gap: 12px;
    margin: 0 0 var(--workspace-space);
    padding: 0 0 12px;
    border-bottom: 1px solid var(--ui-line);
  }
  :is(#distributorView .side-panel, #payableSummaryView .payable-detail-panel,
      #finishedProductEntryPanel, #finishedProductProductsPanel > .panel, #rawEntryForm,
      #rawItemForm, #financePositionView .finance-entry-panel, :host form) > .panel-head > div {
    text-align: left;
    min-width: 0;
  }
  :is(#distributorView .side-panel, #payableSummaryView .payable-detail-panel,
      #finishedProductEntryPanel, #finishedProductProductsPanel > .panel, #rawEntryForm,
      #rawItemForm, #financePositionView .finance-entry-panel, :host form) > .panel-head h2 { margin: 0; }

  #distributorForm .distributor-contact-fields, #distributorForm #distributorOpeningBalanceFields,
  #rawEntryForm .grid.two, #rawItemForm .grid.two,
  #financePositionView .finance-entry-panel .grid.two, #companyInfoForm .company-fields-grid,
  :host form .grid.two, :host .plastics-form-grid { gap: 12px; }
  :is(#distributorForm, #payableSummaryView #payablePaymentForm,
      #finishedProductView #finishedProductForm, #finishedProductView #productForm,
      #rawEntryForm, #rawItemForm, #financeAccountForm, #financeEntryForm,
      #companyInfoForm, :host form) :is(.actions, .form-actions, .plastics-form-actions, .product-entry-actions) {
    gap: 8px;
    margin-top: 16px;
    padding-top: 12px;
    border-top-color: var(--ui-line);
  }
  :is(#distributorForm, #payableSummaryView #payablePaymentForm,
      #finishedProductView #finishedProductForm, #finishedProductView #productForm,
      #rawEntryForm, #rawItemForm, #financeAccountForm, #financeEntryForm,
      #financeLoanOpeningForm, #companyInfoForm, #deliveryRunForm,
      form[data-delivery-directory], :host form)
      :is(button[type="submit"], .actions > button, .form-actions > button,
          .plastics-form-actions > button, .product-entry-actions > button) {
    min-height: var(--workspace-action-height);
  }

  #deliveryView .delivery-run-fields > label,
  #deliveryView .delivery-run-fields > .delivery-run-date-field {
    grid-template-rows: 20px var(--workspace-field-height);
    gap: 4px;
    margin: 0;
  }
  #deliveryView .delivery-run-date-field :is(.unified-period-control, .unified-period-summary) {
    height: var(--workspace-field-height);
    min-height: var(--workspace-field-height);
  }
  #deliveryView .delivery-run-actions { margin-top: 16px; padding-top: 12px; }
  #financePositionView .finance-entry-panel .form-actions { justify-content: flex-end; }
  #deliveryView #printDeliveryRun {
    width: 36px;
    height: 36px;
    min-height: 36px;
    padding: 0;
    background: transparent;
    border: 0;
    box-shadow: none;
    border-radius: 6px;
  }
  #deliveryView #printDeliveryRun:hover:not(:disabled) { background: var(--ui-hover); }

  /* Flatten inline entries without changing the three-column Plastics book. */
  :host form.plastics-inline-form {
    padding: 16px 0;
    border: 0;
    border-top: 1px solid var(--ui-line);
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }

  :is(#dashboardView, #finishedProductView, #payableSummaryView, #financePositionView) {
    --ui-dashboard-card-height: 96px;
    --dashboard-card-min-height: 96px;
    --ui-dashboard-number-size: 20px;
    --type-metric-size: 20px;
    --dashboard-number-size: 20px;
    --ui-dashboard-card-padding: 8px 12px;
    --dashboard-card-padding: 8px 12px;
  }
  :is(#dashboardView .dashboard-metric, #finishedProductView .finished-product-summary-card,
      #payableSummaryView .finance-metric, #financePositionView .finance-position-total,
      #financePositionView .finance-report-metrics > section, #financePositionView .finance-breakdown-grid > section) {
    min-height: 96px;
    grid-template-rows: auto minmax(28px, 1fr) auto;
  }
  :is(#dashboardView .dashboard-metric, #finishedProductView .finished-product-summary-card,
      #payableSummaryView .finance-metric, #financePositionView .finance-position-total,
      #financePositionView .finance-report-metrics > section, #financePositionView .finance-breakdown-grid > section) > strong { margin-block: 0; }
  :is(#dashboardView, #finishedProductView, #payableSummaryView, #financePositionView) .dashboard-period-label {
    padding: 0;
    min-height: 0;
    white-space: normal;
    text-align: right;
  }

  :is(#distributorView, #payableSummaryView, #finishedProductView, #rawMaterialView,
      #financePositionView, #deliveryView, #settingsView) .table-wrap {
    border: 1px solid var(--ui-line);
    border-radius: 7px;
    max-width: 100%;
  }
  :is(#distributorView, #payableSummaryView, #finishedProductView, #rawMaterialView,
      #financePositionView, #deliveryView, #settingsView, :host) table:not(.invoice-table) :is(th, td) {
    padding: 8px 10px;
    vertical-align: middle;
  }
  :host #bookSpread table :is(th, td) { padding: 8px 6px; }
  :is(#distributorView, #payableSummaryView, #finishedProductView, #rawMaterialView,
      #financePositionView, #deliveryView, #settingsView, :host) :is(button, input, select, textarea):focus-visible {
    outline: 2px solid var(--ui-accent);
    outline-offset: 2px;
  }

  @media (pointer: coarse), (max-width: 767px) {
    :root, :host { --workspace-field-height: 44px; --workspace-action-height: 44px; }
    #deliveryView #printDeliveryRun { width: 44px; height: 44px; min-height: 44px; }
  }
  @media (max-width: 767px) {
    #deliveryView .delivery-tabs { flex-wrap: wrap; min-width: 0; max-width: 100%; }
  }
}