/* Shared responsive layout and typography for all on-screen application modules. */
@media screen {
  :root {
    --app-max-width: 1800px;
    --content-max-width: 1680px;
    --ui-text: 14px;
    --ui-small: 12px;
    --ui-label: 13px;
  }

  .app-shell,
  .production-shell,
  .report-shell,
  .admin-shell,
  .correction-shell,
  .backup-shell,
  .scan-shell {
    width: min(100%, var(--app-max-width)) !important;
    max-width: none !important;
  }

  .app-shell > main,
  .entry-main,
  .report-main,
  .admin-main,
  .correction-shell > main,
  .backup-shell > main,
  .scan-shell > main {
    width: min(calc(100% - 48px), var(--content-max-width)) !important;
    max-width: none !important;
    margin-inline: auto !important;
  }

  .entry-page,
  .admin-page,
  .report-page,
  .correction-page,
  .backup-page,
  .scan-page,
  .app-shell {
    font-size: 16px;
  }

  .entry-page label,
  .admin-page label,
  .report-page label,
  .correction-page label,
  .backup-page label,
  .scan-page label {
    font-size: var(--ui-label) !important;
    line-height: 1.35;
  }

  .entry-page input,
  .entry-page select,
  .entry-page textarea,
  .entry-page button,
  .admin-page input,
  .admin-page select,
  .admin-page textarea,
  .admin-page button,
  .correction-page input,
  .correction-page select,
  .correction-page textarea,
  .correction-page button,
  .backup-page input,
  .backup-page select,
  .backup-page textarea,
  .backup-page button,
  .scan-page input,
  .scan-page select,
  .scan-page textarea,
  .scan-page button {
    font-size: var(--ui-text) !important;
  }

  .entry-page small,
  .admin-page small,
  .report-page small,
  .correction-page small,
  .backup-page small,
  .scan-page small,
  .app-shell small {
    font-size: var(--ui-small) !important;
    line-height: 1.35;
  }

  .entry-page table,
  .admin-page table,
  .report-page table,
  .correction-page table,
  .backup-page table {
    font-size: 13px !important;
  }

  .entry-page th,
  .admin-page th,
  .report-page th,
  .correction-page th,
  .backup-page th {
    font-size: 12px !important;
  }

  .entry-intro > p:not(.eyebrow),
  .admin-card p,
  .report-card-head p,
  .section-heading p {
    font-size: 13px !important;
    line-height: 1.5;
  }

  .entry-topbar strong,
  .admin-topbar strong,
  .report-topbar strong {
    font-size: 16px !important;
  }

  .section-label strong { font-size: 15px !important; }
  .section-label em { font-size: 12px !important; }

  /* Compact worksheet visual language used across operational modules. */
  .entry-page,
  .admin-page,
  .report-page,
  .correction-page,
  .backup-page,
  .scan-page {
    background: #f6f8f7 !important;
  }

  .entry-main,
  .admin-main,
  .report-main {
    padding-top: 18px !important;
    padding-bottom: 24px !important;
  }

  .entry-intro,
  .admin-hero {
    margin-bottom: 16px !important;
  }

  .entry-intro h1,
  .admin-hero h1 {
    font-size: clamp(25px, 2.25vw, 36px) !important;
    line-height: 1.08 !important;
  }

  .form-card,
  .admin-card,
  .report-card,
  .billing-filter,
  .other-supplier-manager,
  .supplier-manager,
  .readiness-card,
  .receipt-ledger-link,
  .store-submodule-links > a {
    border: 1px solid #bdcec7 !important;
    border-radius: 4px !important;
    box-shadow: none !important;
  }

  .form-card,
  .admin-card,
  .report-card {
    padding: 14px !important;
  }

  input,
  select,
  textarea,
  button,
  .button,
  .billing-filter a {
    border-radius: 3px !important;
  }

  .entry-page input,
  .entry-page select,
  .admin-page input,
  .admin-page select,
  .correction-page input,
  .correction-page select,
  .backup-page input,
  .backup-page select,
  .scan-page input,
  .scan-page select {
    min-height: 38px !important;
    padding: 7px 10px !important;
  }

  .entry-page textarea,
  .admin-page textarea,
  .correction-page textarea,
  .backup-page textarea {
    padding: 8px 10px !important;
  }

  .entry-page button,
  .admin-page button,
  .correction-page button,
  .backup-page button,
  .billing-filter a {
    min-height: 38px !important;
    padding: 7px 13px !important;
  }

  table {
    border-collapse: collapse !important;
    border-spacing: 0 !important;
  }

  .entry-page table th,
  .entry-page table td,
  .admin-page table th,
  .admin-page table td,
  .report-page table th,
  .report-page table td,
  .correction-page table th,
  .correction-page table td,
  .backup-page table th,
  .backup-page table td {
    border: 1px solid #cfdbd6 !important;
    padding: 8px 9px !important;
    vertical-align: middle !important;
  }

  .entry-page table thead th,
  .admin-page table thead th,
  .report-page table thead th,
  .correction-page table thead th,
  .backup-page table thead th,
  .material-table-head {
    background: #e8f0ec !important;
    color: #284d41 !important;
    font-weight: 800 !important;
  }

  .entry-page table tbody tr:nth-child(even),
  .admin-page table tbody tr:nth-child(even),
  .correction-page table tbody tr:nth-child(even),
  .backup-page table tbody tr:nth-child(even) {
    background: #fbfcfb;
  }

  .materials-table,
  .reconciliation-wrap,
  .receipt-table-wrap,
  .billing-table,
  .inventory-table-wrap,
  .dispatch-table-wrap,
  .audit-table-wrap,
  .pmc-table-wrap {
    border: 1px solid #bdcec7 !important;
    border-radius: 3px !important;
    box-shadow: none !important;
  }

  .material-section,
  .rows-card,
  .stock-card {
    margin-top: 12px !important;
    margin-bottom: 12px !important;
  }

  .card-heading-row {
    margin-bottom: 10px !important;
    padding-bottom: 8px !important;
    border-bottom: 1px solid #bdcec7;
  }

  .material-number {
    width: 24px !important;
    height: 24px !important;
    border-radius: 3px !important;
    font-size: 12px !important;
  }

  .report-date-context {
    display: grid;
    grid-template-columns: minmax(150px, auto) minmax(150px, auto) 1fr;
    align-items: center;
    gap: 0;
    margin: 0 0 12px;
    border: 1px solid #bdcec7;
    border-radius: 3px;
    background: #fff;
  }

  .report-date-context > div {
    display: grid;
    gap: 2px;
    padding: 8px 12px;
    border-right: 1px solid #cfdbd6;
  }

  .report-date-context span {
    color: #64766f;
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
  }

  .report-date-context strong { font-size: 14px; }
  .report-date-context small { justify-self: end; padding: 8px 12px; color: #53675f; font-weight: 700; }

  .admin-global-nav {
    position: fixed;
    left: 50%;
    transform: translateX(-50%);
    bottom: 0;
    z-index: 50;
    display: grid;
    grid-template-columns: repeat(5, minmax(70px, 1fr));
    width: min(100%, 1180px);
    margin: 0 auto;
    border-top: 1px solid #b9cbc3;
    background: rgba(255,255,255,.97);
    box-shadow: 0 -5px 18px rgba(24,55,44,.13);
    backdrop-filter: blur(18px);
  }

  body.has-admin-global-nav { padding-bottom: 76px !important; }

  .admin-global-nav a {
    display: grid;
    place-items: center;
    align-items: center;
    justify-content: center;
    gap: 3px;
    min-height: 70px;
    border-right: 1px solid #d5dfdb;
    color: #254b3e;
    font-size: 11px;
    text-decoration: none;
  }

  .admin-global-nav a:last-child { border-right: 0; }
  .admin-global-nav a:hover { background: #edf5f1; color: #07664b; }
  .admin-global-nav a.active { color: var(--green-800, #0b6b50); background: #f5faf7; }
  .admin-global-nav span { font-size: 21px; line-height: 1; }
  .admin-global-nav b { font-weight: 800; }

  .other-supplier-manager .receipt-card-head h2,
  .other-supplier-manager > div:first-child > strong,
  .supplier-master-card > div:first-child > strong,
  .transporter-manager > div:first-child > strong {
    font-size: 15px !important;
    line-height: 1.25 !important;
  }

  .other-supplier-chips,
  .supplier-master-list,
  .transporter-list {
    gap: 6px !important;
  }

  .other-supplier-chips > span,
  .supplier-master-list > span,
  .transporter-list > span {
    gap: 0 !important;
    min-height: 30px !important;
    padding: 0 0 0 10px !important;
    border-radius: 3px !important;
    font-size: 13px !important;
    line-height: 1.2 !important;
    font-weight: 700 !important;
    width: auto !important;
    max-width: none !important;
    overflow: visible !important;
    white-space: nowrap !important;
  }

  .other-supplier-chips form,
  .transporter-list form {
    align-self: stretch;
    margin-left: 9px;
  }

  .supplier-master-list button {
    margin-left: 9px !important;
  }

  .other-supplier-chips button,
  .supplier-master-list button,
  .transporter-list button,
  .remove-receipt-item,
  .remove-material-row,
  .remove-material,
  .remove-row,
  .dispatch-remove {
    display: inline-grid !important;
    place-items: center !important;
    width: 30px !important;
    min-width: 30px !important;
    height: 28px !important;
    min-height: 28px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 1px solid #dda9a3 !important;
    border-radius: 2px !important;
    background: #fff1ef !important;
    color: #a9342c !important;
    font-size: 17px !important;
    font-weight: 800 !important;
    line-height: 1 !important;
    box-shadow: none !important;
  }

  .other-supplier-chips button:hover,
  .supplier-master-list button:hover,
  .transporter-list button:hover,
  .remove-receipt-item:hover,
  .remove-material-row:hover,
  .remove-material:hover,
  .remove-row:hover,
  .dispatch-remove:hover {
    border-color: #b94036 !important;
    background: #f9deda !important;
  }
}

@media screen and (min-width: 761px) {
  .entry-topbar,
  .admin-topbar,
  .report-topbar {
    min-height: 54px !important;
    padding-block: 7px !important;
  }

  .form-grid,
  .input-grid,
  .weight-grid {
    gap: 10px !important;
  }

  .materials-row,
  .fuel-row,
  .waste-row {
    min-height: 44px !important;
  }

  .billing-filter {
    gap: 8px !important;
    padding: 10px !important;
  }
}

@media screen and (max-width: 900px) {
  .app-shell > main,
  .entry-main,
  .report-main,
  .admin-main,
  .correction-shell > main,
  .backup-shell > main,
  .scan-shell > main {
    width: calc(100% - 28px) !important;
  }
}

@media screen and (max-width: 520px) {
  :root { --ui-text: 14px; --ui-small: 11px; --ui-label: 12px; }

  .app-shell > main,
  .entry-main,
  .report-main,
  .admin-main,
  .correction-shell > main,
  .backup-shell > main,
  .scan-shell > main {
    width: calc(100% - 20px) !important;
  }

  .entry-topbar,
  .admin-topbar,
  .report-topbar { padding-inline: 10px !important; }

  h1 { font-size: clamp(24px, 8vw, 32px); }

  .report-date-context { grid-template-columns: 1fr 1fr; }
  .report-date-context > div:nth-child(2) { border-right: 0; }
  .report-date-context small { grid-column: 1 / -1; justify-self: stretch; border-top: 1px solid #cfdbd6; }
  .admin-global-nav a { min-height: 70px; gap: 2px; font-size: 10px; }
}

@media print { .admin-global-nav { display: none !important; } }

@media screen and (max-width: 760px) {
  .receipt-table-wrap,.reconciliation-wrap,.inventory-table-wrap,.audit-table-wrap,.billing-table,.dispatch-table-wrap,.pmc-table-wrap{max-width:100%;overflow-x:auto!important;-webkit-overflow-scrolling:touch;overscroll-behavior-inline:contain}
  .receipt-table-wrap table,.reconciliation-wrap table,.inventory-table-wrap table,.dispatch-table-wrap table,.pmc-table-wrap table{font-size:12px!important}
  .receipt-table-wrap th:first-child,.receipt-table-wrap td:first-child,.reconciliation-wrap th:first-child,.reconciliation-wrap td:first-child{position:sticky;left:0;z-index:2;background:#fff}
  .receipt-table-wrap thead th:first-child,.reconciliation-wrap thead th:first-child{background:#eaf2ee}
}