/* The working interface uses large type and touch targets. Printed reports keep
   their separate layout; these rules deliberately apply only to the screen. */
@media screen {
  :root {
    --green: #214d35;
    --green-dark: #163b27;
    --ink: #172c20;
    --text: #26382d;
    --muted: #526052;
    --line: #ccd5cb;
    --bg: #f3f5f0;
  }
  body {font-size: 18px; line-height: 1.55;}
  h1, .page-heading h1 {font-size: 34px; letter-spacing: -.5px; line-height: 1.2;}
  h2, .section-heading h2, .panel-heading h2, .form-section h2,
  .journal-card h2, .equipment-card h2, .backup-panel h2,
  .phone-setting-card h2, .network-status h2 {font-size: 24px; letter-spacing: 0; color: var(--ink);}
  h3, .strip-title h3 {font-size: 20px;}
  small, .small-note, .help-text, .auth-card .help-text, .field-error,
  .page-heading p, .section-heading > .muted, .info-note, .info-note strong,
  .message, .note-block, .detail-list > div, .journal-card p, .equipment-card p,
  .equipment-footer, .summary-grid .muted, .payment-row, .payment-row small,
  .stat-top, .stat-value small, .stat-bottom, .stat-bottom > .muted,
  .alert-copy small, .full-alerts .alert-copy small, .daily-row small,
  .supplier-cell small, .cell-small, .document-row small, .report-row p,
  .task-row small, .strip-title p, .strip-equipment > a > span,
  .strip-equipment strong small, .file-name, .scan-help p, .upload-zone p,
  .auth-card > p, .auth-demo-link, .phone-setting-card p, .network-status p,
  .network-steps li p, .network-address small, .phone-setup-grid .small-note,
  .phone-setup-grid .detail-panel > .muted {
    font-size: 16px; color: var(--muted); line-height: 1.55;
  }
  .alert-copy strong, .full-alerts .alert-copy strong, .daily-row strong,
  .cell-title, .document-row strong, .report-row strong, .task-row strong,
  .settings-item, .line-title, .network-steps strong {
    font-size: 18px; color: var(--ink); line-height: 1.5;
  }
  .button, .button.small-button, .filter-bar .button, .page-heading .button,
  .backup-panel .button {
    min-height: 56px; padding: 13px 20px; font-size: 18px;
    font-weight: 700; line-height: 1.4; border-width: 2px; border-radius: 10px;
  }
  .button.primary {background: var(--green); color: #fff;}
  .button.secondary {border-color: #637d67; color: var(--green-dark); background: #fff;}
  .button .icon, .icon-button .icon, .notification-button .icon {width: 24px; height: 24px;}
  .icon-button, .notification-button {min-width: 48px; min-height: 48px; color: var(--green-dark);}
  .notification-button {display: grid; place-items: center; padding: 0; border: 0;}
  .notification-button i {width: 10px; height: 10px; top: 6px; right: 8px; background: #a4481b;}
  .text-link, .back-link, .network-steps .text-link, .phone-downloads .text-link {
    font-size: 18px; min-height: 48px; padding: 10px 0; color: var(--green-dark);
    white-space: normal; text-decoration: underline; text-underline-offset: 4px;
  }
  .back-link {margin-bottom: 12px;}
  .text-link .icon {width: 20px; height: 20px;}
  .danger-link, .text-link.danger-link {color: #942d20;}
  .field label, .form-panel .field label, .line-fields .field label, .auth-card .field label {
    font-size: 18px; color: var(--ink); font-weight: 650;
  }
  input, select, textarea, .field input, .field select, .field textarea,
  .filter-bar input, .filter-bar select, .document-upload input, .auth-card .field input {
    font-size: 18px; min-height: 56px; padding: 12px;
    color: var(--ink); border: 2px solid #839482; line-height: 1.5;
  }
  .field input::placeholder, .search-field input::placeholder, input::placeholder {
    font-size: inherit; color: #626d62; opacity: 1;
  }
  .field input:focus, .field textarea:focus, .field select:focus,
  :focus-visible {outline: 3px solid #215fbd; outline-offset: 3px; box-shadow: none;}
  .field-error, .required {color: #942d20;}
  .checkbox-field label {min-height: 56px;}
  .checkbox-field input[type=checkbox], input[type=checkbox], input[type=radio] {
    width: 26px; height: 26px; min-height: 26px; flex-shrink: 0; accent-color: var(--green);
  }
  .search-field > .icon {top: 17px; color: var(--muted); width: 22px; height: 22px;}
  .filter-bar .search-field input {padding-left: 46px;}
  .sidebar {width: 286px; padding: 24px 16px 0; overflow-y: auto;}
  .brand {margin-bottom: 26px;}
  .brand strong {font-size: 23px;}
  .nav-list a {height: auto; min-height: 54px; font-size: 18px; color: var(--text); padding: 12px;}
  .nav-list a .icon, .settings-link .icon {width: 24px; height: 24px; color: var(--green);}
  .nav-list a.active {background: #deead9; box-shadow: inset 4px 0 var(--green);}
  .nav-list + .nav-list {margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--line);}
  .nav-badge {font-size: 16px; height: auto; min-width: 26px; line-height: 1.5; color: #6b4212;}
  .sidebar-bottom {padding-top: 12px;}
  .settings-link, .sidebar-user strong {font-size: 18px; color: var(--text);}
  .sidebar-user {padding: 12px 0;}
  .sidebar-user > span:nth-child(2) {min-width: 0; overflow-wrap: anywhere;}
  .app-shell {margin-left: 286px;}
  .topbar {padding: 0 28px; gap: 20px;}
  .breadcrumb, .breadcrumb strong, .topbar-right .date-display {font-size: 16px; color: var(--muted);}
  .breadcrumb {overflow-wrap: anywhere;}
  .topbar-left {min-width: 0;}
  .topbar-right {flex-shrink: 0;}
  .topbar-right > .avatar {display: none;}
  .main-content {padding: 32px 28px 40px;}
  .page-heading {margin-bottom: 24px;}
  .page-heading p {max-width: 760px;}
  .panel-heading, .section-heading {flex-wrap: wrap;}
  .panel-heading h2 {flex-wrap: wrap;}
  .overview-grid {grid-template-columns: repeat(2, minmax(0, 1fr));}
  .stat-top, .attention-stat .stat-top {color: var(--text); font-weight: 600;}
  .stat-value {font-size: 36px;}
  .attention-stat .stat-value, .attention-stat .stat-bottom {color: #704e13;}
  .stat-bottom {flex-wrap: wrap;}
  .quick-grid {grid-template-columns: repeat(2, minmax(0, 1fr));}
  .quick-card {flex-direction: row; align-items: center; gap: 16px; padding: 20px; min-height: 94px;}
  .quick-card strong {font-size: 20px; color: var(--ink); margin: 0; padding-right: 22px;}
  .quick-featured strong {color: #fff;}
  .quick-icon {width: 44px; height: 44px; flex-shrink: 0;}
  .quick-icon .icon {width: 27px; height: 27px;}
  .quick-arrow {top: calc(50% - 11px); width: 22px; height: 22px; color: var(--green);}
  .quick-featured .quick-arrow {color: #fff;}
  .daily-row, .alert-row {min-height: 76px;}
  .check-indicator {width: 28px; height: 28px; border-color: #73816b;}
  .check-indicator.checked {color: var(--green-dark); background: #deead9;}
  .check-indicator .icon {width: 20px; height: 20px;}
  .tag, .daily-row > .tag, .daily-row .tag, .journal-card .tag, .delivery-table .tag,
  .count-pill {font-size: 16px; padding: 5px 9px; min-height: 30px; height: auto; white-space: normal;}
  .tag.success {color: #245128; background: #e4efdc;}
  .tag.warning, .count-pill {color: #754a0d; background: #fff0cc;}
  .tag.neutral {color: #47533e; background: #eef1e9;}
  .tag.danger {color: #942d20; background: #fce8e3;}
  .message {color: #245128;}
  .message.error {color: #942d20;}
  .message.warning, .message.info {color: #754a0d;}
  .journal-grid {grid-template-columns: repeat(2, minmax(0, 1fr));}
  .journal-card {padding: 24px;}
  .journal-card h2 {margin: 14px 0 20px;}
  .journal-card .button + .button, .journal-card .button + .text-link {margin-top: 12px;}
  .journal-card .text-link {width: 100%;}
  .journal-card p {margin-bottom: 18px;}
  .detail-panel > p {margin-bottom: 20px;}
  .detail-list dt, .detail-list dd {color: var(--text); overflow-wrap: anywhere;}
  .detail-list > div {gap: 24px;}
  .line-title {gap: 12px;}
  .section-number {min-width: 32px; height: 32px; font-size: 18px; color: var(--green);}
  .sticky-actions {background: #f3f5f0; border-top: 2px solid var(--line);}
  details > summary {font-size: 20px; min-height: 48px; padding: 10px 0; color: var(--ink);}
  .history-data {font-size: 16px;}
  .empty-state h3, .compact-empty strong {font-size: 20px; color: var(--ink);}
  .empty-state p, .compact-empty p {font-size: 16px; color: var(--muted);}
  th, td {font-size: 18px; color: var(--text); padding: 16px 20px;}
  th {font-weight: 650; background: #eff3eb;}
  .cell-amount {font-size: 18px; color: var(--ink);}
  .row-link {width: 48px; height: 48px; color: var(--green);}
  .row-link .icon {width: 24px; height: 24px;}
  .table-wrap {scrollbar-color: #637d67 #edf2e9;}
  .temperature-strip {flex-wrap: wrap;}
  .strip-equipment {flex-wrap: wrap;}
  .strip-equipment > a {min-height: 56px;}
  .strip-equipment strong {font-size: 28px; color: var(--green);}
  .equipment-grid {grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));}
  .temperature-value {font-size: 44px; color: var(--ink);}
  .temperature-value small {font-size: 22px;}
  .document-row, .report-row {gap: 16px;}
  .document-row strong, .document-row small {overflow-wrap: anywhere;}
  .scan-panel {padding: 28px;}
  .upload-zone {padding: 0; border: 0; background: transparent; margin-bottom: 24px;}
  .upload-zone .upload-label {display: flex; width: 100%; margin: 0 0 16px;}
  .upload-zone label:has(+ input:focus-visible) {outline: 3px solid #215fbd; outline-offset: 3px;}
  .file-name {display: block; overflow-wrap: anywhere; margin: 12px 0;}
  .file-preview img {max-height: 320px; object-fit: contain;}
  .scan-divider {margin: 20px 0; color: var(--muted); font-size: 16px;}
  .document-upload {flex-wrap: wrap;}
  .document-upload .form-grid {min-width: 0; flex: 1 1 100%;}
  .demo-banner, .demo-banner a {font-size: 16px; color: #624d20; flex-wrap: wrap;}
  .auth-layout {display: block; max-width: 560px; margin: auto;}
  .auth-intro {padding: 32px 28px 0; background: transparent;}
  .auth-intro .brand {margin: 0;}
  .auth-form-area {padding: 24px 28px 48px;}
  .auth-card {max-width: none;}
  .auth-card h2 {font-size: 32px; color: var(--ink); margin: 0 0 24px;}
  .auth-card .password-wrap input {padding-right: 100px; width: 100%;}
  .show-password {font-size: 16px; color: var(--green); right: 4px; top: 4px; min-height: 48px; padding: 8px;}
}

@media screen and (max-width: 1150px) {
  .dashboard-columns, .detail-grid, .settings-grid, .recognition-grid {grid-template-columns: minmax(0, 1fr);}
  .journal-grid, .quick-grid, .form-grid {grid-template-columns: minmax(0, 1fr);}
  .line-fields {grid-template-columns: repeat(2, minmax(0, 1fr));}
  .line-fields .field:has(input[name$="-name"]),
  .line-fields .field:has(input[name$="-lot"]),
  .line-fields .field:has(input[name$="-expiry"]) {grid-column: 1 / -1;}
  .page-heading {align-items: flex-start; flex-wrap: wrap;}
  .date-display {display: none !important;}
}

@media screen and (max-width: 760px) {
  .sidebar {width: min(320px, calc(100vw - 36px)); padding-bottom: calc(90px + env(safe-area-inset-bottom));}
  .app-shell {margin-left: 0;}
  .topbar {padding: 0 16px; height: 64px;}
  .mobile-brand {font-size: 21px;}
  .main-content {padding: 24px 16px calc(112px + env(safe-area-inset-bottom)); max-width: 660px;}
  .page-heading h1 {font-size: 32px;}
  .page-heading > .button {width: 100%;}
  .page-heading p {max-width: none;}
  .quick-grid {grid-template-columns: minmax(0, 1fr); gap: 12px;}
  .quick-card {padding: 16px; min-height: 80px;}
  .quick-card strong {font-size: 20px;}
  .quick-arrow {right: 14px;}
  .overview-grid, .summary-grid {gap: 12px;}
  .stat-card {padding: 16px;}
  .stat-top {align-items: flex-start;}
  .stat-top > .stat-icon {display: none;}
  .stat-value small {display: block;}
  .stat-value {font-size: 34px;}
  .panel-heading, .detail-panel, .form-section, .form-panel, .journal-card, .scan-panel {padding: 20px 16px;}
  .panel-heading {align-items: flex-start;}
  .alert-list, .daily-list {padding-left: 16px; padding-right: 16px;}
  .daily-row {flex-wrap: wrap;}
  .daily-row > span:nth-child(2) {flex: 1;}
  .daily-row > .tag {margin-left: 39px;}
  .journal-grid, .equipment-grid, .detail-grid {grid-template-columns: minmax(0, 1fr);}
  .form-actions > .button {flex: 1 1 100%; min-width: 0;}
  .sticky-actions {bottom: calc(84px + env(safe-area-inset-bottom)); gap: 8px; padding: 10px 0;}
  .sticky-actions > .button {flex: 1 1 auto; padding: 12px; font-size: 18px;}
  .sticky-actions > .button.primary {flex-grow: 2;}
  .line-form {padding: 16px 12px;}
  .line-fields {grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 12px;}
  .line-fields .field:has(input[name$="-name"]),
  .line-fields .field:has(input[name$="-lot"]),
  .line-fields .field:has(input[name$="-expiry"]) {grid-column: 1 / -1;}
  .info-note {padding: 16px;}
  .info-note > .icon {display: none;}
  .equipment-card {display: block;}
  .equipment-card .temperature-value {margin: 12px 0;}
  .equipment-footer {flex-wrap: wrap;}
  .strip-equipment {display: flex; flex-direction: column; gap: 0;}
  .strip-equipment > a {flex-direction: row; justify-content: space-between; align-items: center; padding: 12px 0; border: 0; border-top: 1px solid var(--line);}
  .strip-equipment > a > span {font-size: 18px;}
  .delivery-table tr {display: flex; flex-direction: column; gap: 12px; padding: 20px 16px;}
  .delivery-table td:first-child {align-self: stretch;}
  .delivery-table td {font-size: 18px;}
  .delivery-table .cell-title {font-size: 20px; max-width: none; overflow-wrap: anywhere;}
  .delivery-table .supplier-cell small {font-size: 16px;}
  .delivery-table .supplier-avatar {display: none;}
  .delivery-table td:nth-child(2), .delivery-table td:nth-child(3) {display: block;}
  .delivery-table td:nth-child(4), .delivery-table td:nth-child(5) {text-align: left; align-self: flex-start; font-size: 18px;}
  .delivery-table td:last-child {display: none;}
  .export-buttons {padding-left: 0; gap: 12px;}
  .document-row > span:nth-child(2) {flex: 1;}
  .filter-bar > input {width: 100%;}
  .bottom-nav {height: calc(84px + env(safe-area-inset-bottom)); padding: 6px 8px calc(6px + env(safe-area-inset-bottom)); background: #fff; gap: 6px; border-top: 2px solid #bbc9b6;}
  .bottom-nav > a, .bottom-nav > button {min-width: 0; min-height: 68px; font-size: 16px; font-weight: 650; color: var(--green-dark); border-radius: 10px; gap: 5px;}
  .bottom-nav .icon {width: 26px; height: 26px;}
  .bottom-nav .active {background: #deead9; box-shadow: inset 0 -3px var(--green);}
  .bottom-nav .bottom-scan {background: var(--green); gap: 5px;}
  .bottom-scan > span {width: auto; height: auto; margin: 0; background: none; box-shadow: none;}
  .bottom-scan small {font-size: 16px; color: #fff; margin: 0;}
}

@media screen and (max-width: 380px) {
  .overview-grid, .summary-grid {grid-template-columns: minmax(0, 1fr);}
  .line-fields {grid-template-columns: minmax(0, 1fr);}
  .bottom-nav {gap: 2px; padding-left: 4px; padding-right: 4px;}
  .bottom-nav > a, .bottom-nav > button, .bottom-scan small {font-size: 15px;}
}