:root {
  --brand: #17436c;
  --line: #d6dde8;
  --button: #c7d8f7;
  --button-border: #8ba9df;
  --button-hover: #b5caf0;
  --text: #121820;
  --muted: #5f6f82;
  --page: #f6f8fb;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
  background: var(--page);
  color: var(--text);
}

.topbar {
  min-height: 70px;
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 10px 24px;
  background: #eef2f7;
  border-top: 2px solid #b0182a;
  border-bottom: 1px solid var(--line);
}

.brand-text {
  color: var(--brand);
  font-size: 18px;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: 0;
  text-transform: uppercase;
}

.brand-mark {
  width: 74px;
  height: 38px;
  display: grid;
  place-items: center;
  color: var(--brand);
  font-weight: 800;
  font-size: 28px;
  border-left: 2px solid #bfc9d6;
  padding-left: 16px;
}

main {
  min-height: calc(100vh - 70px);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 58px 18px;
  background: #ffffff;
}

body:not(.logged-in) main {
  display: none;
}

body.logged-in .login-screen {
  display: none;
}

.login-screen {
  min-height: calc(100vh - 70px);
  display: grid;
  place-items: center;
  padding: 28px 18px;
  background: #ffffff;
}

.login-panel {
  width: min(100%, 430px);
  display: grid;
  gap: 14px;
  padding: 28px 34px;
  border: 1px solid #d6e5ea;
  border-radius: 16px;
  background: #f8fcfd;
  box-shadow: 0 18px 50px rgba(23, 67, 108, 0.12);
}

.login-title {
  margin: 0 0 16px;
  color: #0068bf;
  font-size: 15px;
  text-align: center;
}

.login-row {
  display: grid;
  grid-template-columns: 100px 1fr;
  gap: 8px;
  align-items: center;
}

.login-row input {
  height: 34px;
  border-radius: 6px;
  border-color: #bdd5df;
}

.login-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  padding: 8px 24px 0;
}

.login-error {
  min-height: 18px;
  color: #d31313;
  font-size: 13px;
  text-align: center;
  font-weight: 700;
}

.login-version {
  color: #0068bf;
  font-size: 12px;
  text-align: right;
}

.dashboard {
  width: min(100%, 360px);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px 28px;
  align-items: start;
}

.section-title {
  margin: 0 0 16px;
  font-size: 16px;
  font-weight: 700;
  text-align: center;
}

.actions {
  display: grid;
  gap: 10px;
}

.action-button {
  min-height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px 12px;
  border: 1px solid var(--button-border);
  border-radius: 4px;
  background: linear-gradient(#d8e5fb, var(--button));
  color: #1a3154;
  font-size: 13px;
  text-decoration: none;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7);
  cursor: pointer;
}

.action-button:hover,
.action-button:focus {
  background: linear-gradient(#cbdcf7, var(--button-hover));
  outline: 2px solid rgba(23, 67, 108, 0.2);
  outline-offset: 2px;
}

.note {
  grid-column: 1 / -1;
  margin: 10px 0 0;
  color: var(--muted);
  font-size: 12px;
  text-align: center;
}

.screen {
  width: min(100%, 1060px);
  display: none;
}

.screen:target {
  display: block;
}

.item-master-screen:target {
  display: block;
}

body:has(.screen:target) .dashboard,
body:has(.item-master-screen:target) .dashboard {
  display: none;
}

.screen-header {
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: start;
  padding: 8px 0 16px;
  border-bottom: 1px solid #bcc5d2;
}

.screen-title {
  margin: 0 0 22px;
  color: #061f9e;
  font-family: "Courier New", monospace;
  font-size: 20px;
  text-align: center;
}

.screen-title.left {
  text-align: left;
}

.search-fields {
  display: grid;
  grid-template-columns: auto minmax(240px, 420px) auto;
  gap: 8px;
  align-items: center;
  justify-content: center;
}

.search-fields.left {
  justify-content: start;
}

label {
  font-size: 14px;
}

input,
select {
  height: 25px;
  border: 1px solid #8792a0;
  border-radius: 0;
  padding: 2px 6px;
  font: inherit;
  background: #fff;
}

input:disabled,
select:disabled,
textarea:disabled {
  background: #eef3f8;
  color: #435268;
  cursor: not-allowed;
}

.utility-actions {
  display: grid;
  grid-template-columns: repeat(1, 112px);
  gap: 8px;
  justify-content: end;
  align-self: end;
  position: relative;
}

.utility-actions.customer-actions {
  grid-template-columns: repeat(2, 66px);
  align-self: center;
}

.small-button {
  min-height: 36px;
  border: 1px solid var(--button-border);
  border-radius: 4px;
  background: linear-gradient(#d8e5fb, var(--button));
  color: #1a3154;
  font-size: 13px;
  cursor: pointer;
}

.small-button.wide {
  grid-column: span 1;
}

.inline-edit-button {
  width: 30px;
  height: 28px;
  display: inline-grid;
  place-items: center;
  border: 1px solid #b9d8e1;
  border-radius: 7px;
  background: #eaf8fa;
  color: var(--brand);
  font-weight: 700;
  font-size: 17px;
  cursor: pointer;
  line-height: 1;
}

.inline-edit-button:hover,
.inline-edit-button:focus {
  background: #d9f0f4;
  outline: 1px solid #bdd5df;
}

.inline-edit-button.delete {
  color: #a51d2d;
  background: #fff0f2;
  border-color: #f0c7ce;
}

.icon-only {
  position: relative;
  font-size: 0;
}

.icon-only::before,
.icon-only::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  display: block;
}

.icon-edit::before {
  width: 13px;
  height: 5px;
  border-radius: 2px;
  background: var(--brand);
  transform: translate(-50%, -50%) rotate(-35deg);
}

.icon-edit::after {
  width: 0;
  height: 0;
  border-left: 5px solid var(--brand);
  border-top: 3px solid transparent;
  border-bottom: 3px solid transparent;
  transform: translate(4px, -7px) rotate(-35deg);
}

.icon-delete::before,
.icon-delete::after {
  width: 15px;
  height: 2px;
  border-radius: 2px;
  background: #a51d2d;
}

.icon-delete::before {
  transform: translate(-50%, -50%) rotate(45deg);
}

.icon-delete::after {
  transform: translate(-50%, -50%) rotate(-45deg);
}

.master-edit-input {
  width: 100%;
  height: 24px;
  border: 1px solid transparent;
  background: transparent;
  padding: 1px 4px;
}

.master-edit-input:focus {
  border-color: #9ac8d5;
  background: #fff;
  outline: none;
}

.sort-header {
  width: 100%;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  font-weight: 700;
  text-align: left;
  cursor: pointer;
}

.sort-header::after {
  content: "  v";
  color: #5f6f82;
  font-size: 10px;
}

.update-menu {
  display: none;
  position: absolute;
  right: 120px;
  top: 44px;
  width: 210px;
  border: 1px solid #8ba9df;
  background: #ffffff;
  box-shadow: 0 8px 18px rgba(23, 32, 51, 0.18);
  z-index: 2;
}

.update-menu.open {
  display: block;
}

.menu-choice {
  width: 100%;
  min-height: 34px;
  border: 0;
  border-bottom: 1px solid #d8d8d8;
  background: #ffffff;
  color: #1a3154;
  text-align: left;
  padding: 8px 12px;
  cursor: pointer;
}

.menu-choice:hover,
.menu-choice:focus {
  background: #eef4ff;
}

.grid-wrap {
  margin-top: 8px;
  border-top: 6px solid #c7c7cc;
  overflow: auto;
  max-height: 58vh;
  background: #fff;
}

table {
  width: 100%;
  min-width: 980px;
  border-collapse: collapse;
  font-size: 12px;
}

th,
td {
  border: 1px solid #d8d8d8;
  padding: 3px 6px;
  white-space: nowrap;
  text-align: left;
}

th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: #eef2f7;
  color: #213247;
  font-weight: 400;
}

tbody tr:nth-child(even) {
  background: #f1f1f1;
}

.open-cell {
  width: 46px;
  padding: 0;
  text-align: center;
  background: transparent;
  color: var(--brand);
  font-weight: 700;
}

.open-cell a {
  min-width: 38px;
  width: auto;
  padding: 0 8px;
  height: 28px;
  display: inline-grid;
  place-items: center;
  border: 1px solid #04719a;
  border-radius: 8px;
  background: #057da8;
  color: #fff;
  text-decoration: none;
  font-size: 12px;
  font-weight: 800;
  line-height: 1;
  box-shadow: 0 2px 5px rgba(0, 63, 87, 0.18);
}

.back-link {
  display: inline-block;
  margin-top: 14px;
  color: var(--brand);
  font-size: 13px;
  text-decoration: none;
}

.pagination-bar {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  padding: 10px 0 0;
  font-size: 13px;
  color: #1a3154;
}

.pagination-bar .small-button {
  min-height: 30px;
  padding: 4px 12px;
}

.pagination-bar input {
  width: 70px;
  height: 30px;
  border-radius: 8px;
  border-color: #bdd5df;
}

.profile-screen {
  width: min(100%, 1180px);
  display: none;
  background: #f6f6f6;
  border: 1px solid #aeb7c4;
}

.profile-screen:target,
.customer-info-screen:target,
.po-info-screen:target,
.po-delivery-screen:target,
.beneficiary-upload-screen:target,
.item-order-screen:target,
.workshop-detail-screen:target,
.order-item-screen:target,
.measurement-print-screen:target,
.receiving-print-screen:target {
  display: block;
}

.standard-size-screen:target {
  display: grid;
}

body:has(.profile-screen:target) .dashboard,
body:has(.profile-screen:target) .screen,
body:has(.customer-info-screen:target) .dashboard,
body:has(.customer-info-screen:target) .screen,
body:has(.po-info-screen:target) .dashboard,
body:has(.po-info-screen:target) .screen,
body:has(.po-info-screen:target) .customer-info-screen,
body:has(.po-delivery-screen:target) .dashboard,
body:has(.po-delivery-screen:target) .screen,
body:has(.po-delivery-screen:target) .customer-info-screen,
body:has(.beneficiary-upload-screen:target) .dashboard,
body:has(.beneficiary-upload-screen:target) .screen,
body:has(.beneficiary-upload-screen:target) .customer-info-screen,
body:has(.beneficiary-upload-screen:target) .po-delivery-screen,
body:has(.item-order-screen:target) .dashboard,
body:has(.item-order-screen:target) .screen,
body:has(.item-order-screen:target) .profile-screen,
body:has(.workshop-detail-screen:target) .dashboard,
body:has(.workshop-detail-screen:target) .screen,
body:has(.workshop-detail-screen:target) .profile-screen,
body:has(.order-item-screen:target) .dashboard,
body:has(.order-item-screen:target) .screen,
body:has(.order-item-screen:target) .item-order-screen,
body:has(.standard-size-screen:target) .dashboard,
body:has(.standard-size-screen:target) .screen,
body:has(.measurement-print-screen:target) .dashboard,
body:has(.measurement-print-screen:target) .screen,
body:has(.measurement-print-screen:target) .profile-screen,
body:has(.receiving-print-screen:target) .dashboard,
body:has(.receiving-print-screen:target) .screen,
body:has(.receiving-print-screen:target) .item-order-screen {
  display: none;
}

body:has(.standard-size-screen:target) .profile-screen {
  display: block;
}

.profile-top {
  display: grid;
  grid-template-columns: 72px 1fr auto;
  gap: 12px;
  align-items: start;
  padding: 6px 10px;
  background: #eeeeee;
  border-top: 2px solid #c80020;
  border-bottom: 1px solid #c8c8c8;
}

.profile-id {
  color: #ff1730;
  font-size: 14px;
  padding-top: 8px;
}

.profile-title {
  margin: 0 0 4px;
  font-size: 22px;
  font-weight: 400;
}

.profile-meta {
  display: grid;
  grid-template-columns: auto 130px 188px auto 188px;
  gap: 4px;
  align-items: center;
  font-size: 13px;
}

.profile-meta input {
  width: 100%;
}

.profile-actions {
  display: grid;
  grid-template-columns: repeat(2, 70px);
  gap: 4px;
}

.profile-body {
  padding: 10px;
}

.profile-form {
  display: grid;
  grid-template-columns: minmax(260px, 0.9fr) minmax(680px, 2fr);
  gap: 14px;
  align-items: start;
}

.field-grid {
  display: grid;
  grid-template-columns: 78px 1fr;
  gap: 5px;
  align-items: center;
}

.field-grid.compact {
  grid-template-columns: 104px minmax(220px, 1fr);
}

.field-grid input,
.field-grid select,
.field-grid.compact input,
.field-grid.compact select {
  width: 100%;
  min-width: 0;
}

.field-grid label {
  color: #7b8795;
}

.edit-button {
  height: 29px;
  border: 1px solid var(--button-border);
  border-radius: 4px;
  background: linear-gradient(#d8e5fb, var(--button));
  color: #1a3154;
  cursor: pointer;
}

.two-col-fields {
  display: grid;
  grid-template-columns: minmax(330px, 1fr) minmax(330px, 1fr);
  gap: 8px 18px;
}

.wide-field {
  grid-column: 1 / -1;
}


.name-badge-row {
  display: grid;
  grid-template-columns: minmax(330px, 1fr) minmax(330px, 1fr);
  gap: 8px 18px;
  align-items: center;
  margin-top: 6px;
  font-size: 14px;
}

.badge-name-row {
  display: grid;
  grid-template-columns: 98px 1fr;
  gap: 8px 14px;
  align-items: center;
}

.badge-name-row.wide {
  grid-column: 1 / -1;
}

.badge-name-row input {
  width: 100%;
  min-width: 0;
}

.tabs {
  display: flex;
  align-items: end;
  gap: 1px;
  margin-top: 10px;
}

.tab {
  border: 1px solid #9ca9ba;
  border-bottom: 0;
  background: #e8edf4;
  padding: 5px 9px;
  color: #24364d;
  font-size: 13px;
}

.tab.active {
  background: #ffffff;
  color: #001c72;
}

.tab-panel {
  min-height: 460px;
  border: 1px solid #9ca9ba;
  background: #ffffff;
  padding: 10px;
}

.tab-view {
  display: none;
}

.tab-view.active {
  display: block;
}

.delivery-title {
  margin-bottom: 16px;
  font-weight: 700;
  text-align: center;
}

.delivery-title span {
  display: inline-block;
}

.delivery-form {
  display: none;
}

.delivery-table {
  width: 100%;
  border: 1px solid rgba(31, 111, 139, 0.14);
  border-radius: 12px;
  overflow: hidden;
  background: #fff;
}

.delivery-table table {
  min-width: 820px;
}

.delivery-form label {
  color: #7b8795;
  text-align: center;
}

.delivery-form input,
.delivery-form select {
  width: 100%;
}

.delivery-open-button {
  min-width: 44px;
  width: auto;
  height: 28px;
  padding: 0 8px;
  display: inline-grid;
  place-items: center;
  border: 1px solid #b9d8e1;
  border-radius: 9px;
  background: #eaf8fa;
  color: var(--brand);
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
}

.delivery-open-button::before,
.workshop-open-button::before {
  content: none;
}

.delivery-open-button:hover,
.delivery-open-button:focus {
  background: #d9f0f4;
  outline: 1px solid #bdd5df;
}

.delivery-form .delivery-open-button ~ .delivery-open-button {
  display: none;
}

.measurement-layout {
  display: grid;
  grid-template-columns: 480px 1fr;
  gap: 10px;
  min-height: 430px;
}

.standard-size-panel,
.detail-size-panel {
  border-right: 1px solid #9ca9ba;
  padding: 4px 8px;
}

.detail-size-panel {
  border-right: 0;
}

.measurement-heading {
  display: grid;
  grid-template-columns: 1fr auto auto auto;
  gap: 6px;
  align-items: center;
  margin-bottom: 6px;
  font-size: 14px;
  font-weight: 700;
}

.standard-size-title {
  font-size: 14px;
  font-weight: 700;
}

.std-size-table table {
  min-width: 455px;
}

.std-size-table th,
.std-size-table td {
  padding: 2px 4px;
}

.measurement-detail-grid {
  display: grid;
  grid-template-columns: 270px 1fr;
  gap: 12px;
  align-items: start;
}

.measure-table {
  border: 1px solid #9ca9ba;
  padding: 6px 10px;
}

.measure-table table {
  min-width: 240px;
  font-size: 14px;
}

.measure-table th,
.measure-table td {
  height: 32px;
  font-size: 14px;
}

.measure-table input {
  width: 100%;
  min-height: 28px;
  border: 0;
  background: transparent;
  padding: 2px 6px;
}

.remarks-panel {
  display: grid;
  gap: 4px;
}

.remarks-panel textarea {
  height: 110px;
  border: 1px solid #9ca9ba;
  resize: vertical;
  font: inherit;
}

.workshop-panel {
  min-height: 430px;
  padding: 6px;
  border: 1px solid #c8d4e1;
  background: #fff;
}

.workshop-title {
  margin: 0 0 16px 24px;
  color: #001c9f;
  font-weight: 700;
}

.workshop-title-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin: 0 24px 12px;
}

.workshop-title-row .workshop-title {
  margin: 0;
}

.workshop-table table {
  min-width: 940px;
}

.workshop-open-button {
  width: auto;
  min-width: 44px;
  height: 28px;
  padding: 0;
  display: inline-grid;
  place-items: center;
  font-size: 12px;
  font-weight: 800;
  line-height: 1;
}

.workshop-detail-screen {
  width: min(100%, 1180px);
  display: none;
  background: #f7fbfc;
  border: 1px solid #c8d4e1;
  border-top: 2px solid #c80020;
  border-radius: 10px;
  box-shadow: 0 18px 45px rgba(0, 40, 55, 0.12);
  padding: 18px;
}

.workshop-detail-header {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 16px;
  align-items: start;
  margin-bottom: 18px;
}

.workshop-detail-title {
  margin: 0 0 12px;
  color: var(--brand);
  font-size: 22px;
  letter-spacing: 0;
}

.workshop-detail-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(160px, 1fr));
  gap: 10px 14px;
  margin-bottom: 14px;
}

.workshop-meta-row {
  display: grid;
  grid-template-columns: 120px minmax(160px, 210px) minmax(190px, 250px) minmax(180px, 260px);
  gap: 14px;
  align-items: end;
  margin: 0 0 16px;
  justify-content: start;
}

.workshop-job-no {
  display: grid;
  gap: 4px;
  color: #c80020;
}

.workshop-job-no span {
  color: #687790;
  font-size: 13px;
}

.workshop-job-no strong {
  color: #c80020;
  font-size: 17px;
}

.workshop-detail-field {
  display: grid;
  gap: 4px;
  font-size: 13px;
}

.workshop-detail-field span {
  color: #687790;
}

.workshop-detail-field strong {
  min-height: 24px;
  padding: 2px 0;
  border: 0;
  background: transparent;
  font-size: 14px;
  font-weight: 700;
}

.workshop-detail-field input,
.workshop-detail-field select,
.workshop-prep-control,
.workshop-action-row select,
.workshop-action-row strong {
  min-height: 34px;
  padding: 8px 10px;
  border: 1px solid #c6dce5;
  border-radius: 8px;
  background: #fff;
  font-size: 14px;
  font-weight: 600;
}

.workshop-prep-control:disabled {
  color: #627386;
  background: transparent;
  border-color: transparent;
  opacity: 1;
  padding-left: 0;
}

.workshop-action-row {
  display: grid;
  grid-template-columns: auto minmax(160px, 220px) auto auto minmax(150px, 220px) 1fr auto;
  gap: 8px;
  align-items: center;
  margin: 4px 0 14px;
  font-size: 13px;
}

.workshop-action-row label {
  color: #687790;
}

#workshopSubmitButton,
#workshopClaimButton {
  width: 88px;
  min-width: 88px;
  justify-self: start;
  padding-inline: 10px;
}

.workshop-detail-wide {
  grid-column: span 2;
}

.workshop-qty-field {
  max-width: 92px;
}

.workshop-item-used-field[hidden] {
  display: none;
}

.workshop-worker-qty {
  width: 46px;
  min-height: 30px;
  padding: 4px 6px;
  text-align: center;
}

.workshop-row-action {
  width: 34px;
  min-width: 34px;
  height: 32px;
  padding: 0;
  border-radius: 7px;
  font-size: 16px;
  line-height: 1;
}

.workshop-panel-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}

.workshop-panel-heading h2 {
  margin: 0;
}

.workshop-bottom-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  width: 320px;
  margin: 8px 0 0 auto;
}

.workshop-detail-status {
  color: #000;
  font-size: 20px;
  font-weight: 800;
  text-align: left;
  align-self: end;
  padding-bottom: 2px;
}

.workshop-detail-panels {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 12px;
  align-items: start;
}

.workshop-detail-panel {
  min-width: 0;
  border: 1px solid #c8d4e1;
  background: #fff;
  padding: 10px;
  overflow: hidden;
}

.workshop-timing-panel {
  min-height: 0;
  display: grid;
  grid-template-rows: auto auto auto;
  align-content: start;
  gap: 8px;
}

.workshop-detail-panel h2 {
  margin: 0 0 10px;
  font-size: 15px;
  color: var(--brand);
}

.workshop-detail-table {
  width: 100%;
  min-width: 760px;
  border-collapse: collapse;
  font-size: 13px;
  table-layout: auto;
}

.workshop-detail-table th,
.workshop-detail-table td {
  border: 1px solid #d8e5eb;
  padding: 6px 8px;
  text-align: left;
  white-space: normal;
  overflow: hidden;
  text-overflow: ellipsis;
}

.workshop-detail-table th {
  background: #eaf5f6;
}

.workshop-timing-table th:nth-child(1),
.workshop-timing-table td:nth-child(1) {
  width: 55%;
}

.workshop-timing-table {
  width: 100%;
  min-width: 0;
}

.workshop-timing-table th:nth-child(2),
.workshop-timing-table td:nth-child(2),
.workshop-timing-table th:nth-child(3),
.workshop-timing-table td:nth-child(3) {
  width: 22.5%;
  text-align: center;
}

.workshop-timing-total {
  display: grid;
  grid-template-columns: 1fr 58px 58px;
  gap: 4px;
  align-items: center;
  margin-top: 0;
  font-size: 13px;
}

.workshop-timing-total span {
  text-align: right;
  font-weight: 700;
  padding-right: 8px;
}

.workshop-timing-total strong {
  min-height: 28px;
  display: grid;
  place-items: center;
  border: 1px solid #c8d4e1;
  background: #fff;
  font-weight: 600;
}

.record-nav {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-top: 365px;
  color: #4b5a6b;
  font-size: 12px;
}

.customer-info-screen {
  width: min(100%, 1290px);
  display: none;
  background: #f6f6f6;
  border: 1px solid #aeb7c4;
}

.customer-info-top {
  display: grid;
  grid-template-columns: 74px 1fr auto;
  gap: 12px;
  align-items: start;
  padding: 6px 12px 2px;
  background: #e3e9f1;
  border-top: 2px solid #c80020;
}

.customer-info-title {
  margin: 0;
  font-size: 22px;
  font-weight: 400;
}

.customer-info-actions {
  display: grid;
  grid-template-columns: repeat(2, 84px);
  gap: 4px;
}

.customer-info-body {
  padding: 8px 12px 0;
}

.customer-fields {
  display: grid;
  grid-template-columns: minmax(440px, 1fr) minmax(500px, 1fr);
  gap: 54px;
  align-items: start;
}

.customer-field-grid {
  display: grid;
  grid-template-columns: 92px 1fr;
  gap: 4px;
  align-items: center;
  font-size: 14px;
}

.customer-field-grid label {
  color: #000;
}

.customer-code-row {
  display: grid;
  grid-template-columns: 58px 116px 64px 98px 64px 100px;
  gap: 4px;
  align-items: center;
}

.po-panel {
  margin-top: 12px;
  border: 1px solid #aeb7c4;
  background: #ffffff;
  max-width: 1100px;
  min-height: 520px;
  padding: 8px 16px 0;
}

.po-heading {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  color: #001c9f;
  font-size: 13px;
  font-weight: 700;
  text-align: center;
  margin-bottom: 10px;
}

.customer-save-status {
  grid-column: 1 / -1;
  min-height: 22px;
  color: #1f6f4a;
  font-size: 13px;
  font-weight: 700;
}

.po-create-form {
  display: none;
  grid-template-columns: 160px 140px 1fr 120px 96px;
  gap: 8px;
  align-items: center;
  margin: 0 0 12px;
  padding: 12px;
  border: 1px solid rgba(31, 111, 139, 0.14);
  border-radius: 12px;
  background: #f8fbfb;
}

.po-create-form.open {
  display: grid;
}

.po-create-form input {
  width: 100%;
}

.po-grid {
  overflow: auto;
  max-height: 440px;
}

.po-grid table {
  min-width: 1040px;
}

.po-icon-cell {
  width: 36px;
  text-align: center;
  background: transparent;
}

.po-icon-cell a {
  min-width: 34px;
  width: auto;
  padding: 0 8px;
  height: 28px;
  display: inline-grid;
  place-items: center;
  border: 1px solid #04719a;
  border-radius: 8px;
  background: #057da8;
  color: #fff;
  text-decoration: none;
  font-size: 12px;
  font-weight: 800;
  line-height: 1;
  box-shadow: 0 2px 5px rgba(0, 63, 87, 0.18);
}

.po-icon-cell a:hover,
.po-icon-cell a:focus {
  background: #026487;
  outline: 1px solid #81c7d8;
}

.po-icon-cell.delivery a {
  background: #f4b400;
  border-color: #d99d00;
  color: #1d1600;
  box-shadow: 0 2px 5px rgba(96, 70, 0, 0.2);
}

.po-info-screen {
  width: min(100%, 970px);
  display: none;
  background: #f6f6f6;
  border: 1px solid #aeb7c4;
}

.po-delivery-screen {
  width: min(100%, 1300px);
  display: none;
  background: #f6f6f6;
  border: 1px solid #aeb7c4;
}

.delivery-data-top {
  display: grid;
  grid-template-columns: 120px 1fr auto;
  gap: 12px;
  align-items: start;
  padding: 6px 28px 8px;
  border-top: 2px solid #c80020;
  background: #f4f4f4;
}

.delivery-actions {
  display: grid;
  grid-template-columns: repeat(2, 92px);
  gap: 4px;
  max-width: 600px;
}

.delivery-data-body {
  padding: 6px 28px 24px;
}

.delivery-data-layout {
  display: grid;
  grid-template-columns: minmax(620px, 1fr) minmax(360px, 420px);
  gap: 16px;
  align-items: start;
}

.delivery-data-layout > *,
.delivery-left-top > * {
  min-width: 0;
}

.delivery-left {
  display: grid;
  gap: 8px;
  min-width: 0;
}

.delivery-left-top {
  display: grid;
  grid-template-columns: minmax(330px, 1fr) 210px;
  gap: 10px;
  align-items: start;
}

.delivery-side-actions {
  display: grid;
  gap: 8px;
  width: 70px;
  margin-top: 12px;
}

.beneficiary-list-title {
  margin: 8px 0;
  text-align: center;
  font-size: 18px;
  font-weight: 400;
}

.beneficiary-delivery-grid {
  overflow: auto;
  max-height: 430px;
  background: #fff;
  border: 1px solid rgba(31, 111, 139, 0.14);
  border-radius: 12px;
}

.beneficiary-delivery-grid table {
  min-width: 720px;
}

.yellow-cell {
  width: 34px;
  padding: 0;
  text-align: center;
  background: transparent;
  color: #5a4900;
  font-weight: 700;
}

.yellow-cell a {
  min-width: 34px;
  width: auto;
  padding: 0 8px;
  height: 28px;
  display: inline-grid;
  place-items: center;
  border: 1px solid #d99d00;
  border-radius: 8px;
  background: #f4b400;
  color: #1d1600;
  text-decoration: none;
  font-size: 12px;
  font-weight: 800;
  line-height: 1;
  box-shadow: 0 2px 5px rgba(96, 70, 0, 0.2);
}

.delivery-right {
  display: grid;
  gap: 8px;
  align-items: start;
}

.delivery-right-top {
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr);
  gap: 12px;
  align-items: end;
}

.remarks-box {
  display: grid;
  gap: 4px;
}

.remarks-box textarea {
  min-height: 76px;
  border: 1px solid #8792a0;
  font: inherit;
}

.sap-row {
  display: grid;
  grid-template-columns: 62px 1fr;
  gap: 4px;
  align-items: center;
}

.uniform-tabs {
  display: flex;
  gap: 1px;
  margin-top: 2px;
}

.uniform-panel {
  min-height: 160px;
  border-top: 1px solid #aeb7c4;
  background: #ffffff;
  padding: 8px;
  overflow-x: auto;
}

.uniform-set-grid {
  display: grid;
  grid-template-columns: minmax(124px, 1fr) repeat(5, 40px) 64px minmax(90px, 1fr);
  gap: 4px;
  align-items: end;
  font-size: 13px;
}

.uniform-set-grid label {
  text-align: center;
  color: #000;
}

.beneficiary-upload-screen {
  width: min(100%, 1140px);
  display: none;
  background: #ffffff;
  border: 1px solid #aeb7c4;
}

.upload-top {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
  align-items: start;
  padding: 10px 140px 8px 50px;
  border-top: 2px solid #c80020;
}

.upload-title {
  margin: 0;
  color: #061f9e;
  font-family: "Courier New", monospace;
  font-size: 22px;
  text-align: center;
}

.upload-warning {
  margin: 4px 0 18px;
  color: #ff0000;
  font-size: 13px;
}

.upload-body {
  padding: 0 0 130px;
}

.upload-grid {
  display: grid;
  grid-template-columns: 22px 100px 158px 120px 126px 104px 108px 222px 110px;
  align-items: end;
  gap: 4px;
  font-size: 13px;
}

.upload-grid label {
  color: #6e7885;
  text-align: center;
}

.upload-grid input,
.upload-grid select {
  width: 100%;
}

.item-order-screen {
  width: min(100%, 1008px);
  display: none;
  background: #f6f6f6;
  border: 1px solid #aeb7c4;
}

.item-order-body {
  display: grid;
  grid-template-columns: 1fr 78px;
  gap: 10px;
  padding: 16px 20px 0;
  border-top: 2px solid #c80020;
}

.item-order-header {
  display: grid;
  grid-template-columns: 56px 1fr 1fr;
  gap: 10px;
  align-items: start;
}

.item-order-title {
  margin: 4px 0 12px;
  color: #061f9e;
  font-family: "Courier New", monospace;
  font-size: 22px;
  text-align: center;
}

.item-order-fields {
  display: grid;
  grid-template-columns: 62px 1fr;
  gap: 10px 8px;
  align-items: center;
  font-size: 14px;
}

.item-order-fields strong {
  font-size: 18px;
}

.item-order-fields.right {
  grid-template-columns: 92px 1fr;
  padding-top: 42px;
}

.item-side-actions {
  display: grid;
  align-content: start;
  gap: 8px;
}

.item-side-actions .small-button {
  width: 96px;
  min-height: 32px;
  padding: 4px 8px;
  font-size: 12px;
}

.item-remarks {
  display: grid;
  grid-template-columns: 62px 1fr;
  gap: 4px;
  align-items: center;
  margin-top: 12px;
}

.entitled-panel {
  grid-column: 1 / -1;
  border: 1px solid #aeb7c4;
  background: #ffffff;
  margin-top: 12px;
  min-height: 390px;
}

.entitled-title {
  margin: 0;
  padding: 4px 0;
  font-size: 14px;
  font-weight: 700;
}

.entitled-grid {
  width: 100%;
  overflow: auto;
}

.entitled-grid table {
  min-width: 820px;
}

.edit-cell {
  width: 38px;
  background: transparent;
  text-align: center;
  font-weight: 700;
}

.edit-cell a {
  display: inline-grid;
  place-items: center;
  text-decoration: none;
}

.order-item-screen {
  width: min(100%, 840px);
  display: none;
  background: #f6f6f6;
  border: 1px solid #aeb7c4;
}

.order-item-top {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: start;
  gap: 12px;
  padding: 8px 20px 12px;
  border-top: 2px solid #c80020;
}

.order-item-title {
  margin: 6px 0 24px;
  text-align: center;
  font-size: 18px;
  font-weight: 700;
}

.order-item-actions {
  display: grid;
  grid-template-columns: 50px 50px;
  gap: 6px;
}

.maintenance-grid {
  display: grid;
  grid-template-columns: 76px 92px 64px 160px 136px 220px;
  gap: 4px;
  align-items: end;
  font-size: 13px;
}

.maintenance-grid label {
  text-align: center;
  color: #000;
  font-weight: 700;
}

.maintenance-details {
  display: grid;
  grid-template-columns: 118px 1fr;
  gap: 5px;
  align-items: center;
  margin: 6px 0 14px 56px;
  font-size: 14px;
}

.maintenance-buttons {
  display: flex;
  justify-content: center;
  gap: 10px;
  padding-bottom: 158px;
}

.maintenance-buttons .small-button {
  min-width: 94px;
  min-height: 42px;
}

.standard-size-screen {
  position: fixed;
  inset: 0;
  z-index: 22;
  width: 100%;
  display: none;
  place-items: center;
  background: rgba(0, 23, 38, 0.24);
  border: 0;
  padding: 24px;
}

.standard-size-body {
  width: min(500px, 94vw);
  padding: 24px 32px 28px;
  border: 1px solid #c8e1e8;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.98);
  box-shadow: 0 24px 60px rgba(0, 40, 55, 0.18);
}

.standard-size-form-title {
  margin: 0 0 16px;
  text-align: center;
  font-size: 16px;
  font-weight: 700;
}

.standard-size-grid {
  display: grid;
  grid-template-columns: 64px 140px 140px;
  gap: 6px;
  align-items: end;
  justify-content: center;
  font-size: 13px;
}

.standard-size-grid label {
  text-align: center;
  font-weight: 700;
  color: #000;
}

.barcode-row {
  display: grid;
  grid-template-columns: 92px 1fr 126px;
  gap: 8px;
  align-items: center;
  max-width: none;
  margin: 8px auto 0;
  width: 398px;
  font-size: 14px;
}

.standard-size-buttons {
  display: grid;
  grid-template-columns: repeat(3, 34px);
  gap: 6px;
  justify-content: end;
}

.standard-size-buttons .small-button {
  width: 34px;
  height: 34px;
  min-height: 34px;
  display: inline-grid;
  place-items: center;
  border-radius: 9px;
  font-size: 18px;
  font-weight: 700;
  line-height: 1;
}

.standard-size-buttons .delete {
  color: #a51d2d;
  background: #fff0f2;
  border-color: #f0c7ce;
}

.standard-size-buttons .undo {
  color: #4d5b66;
  background: #f5fafb;
  border-color: #c8e1e8;
}

#deleteStandardSizeButton,
#undoStandardSizeButton,
#finishStandardSizeButton {
  font-size: 12px;
}

#deleteStandardSizeButton::before,
#undoStandardSizeButton::before,
#finishStandardSizeButton::before {
  font-size: 18px;
}

#deleteStandardSizeButton::before {
  content: "\00d7";
}

#undoStandardSizeButton::before {
  content: "\21b6";
}

#finishStandardSizeButton::before {
  content: "\2713";
}

.history-overlay {
  position: fixed;
  inset: 0;
  z-index: 20;
  display: grid;
  place-items: center;
  background: rgba(0, 23, 38, 0.28);
  padding: 24px;
}

.history-overlay[hidden] {
  display: none;
}

.history-panel {
  width: min(920px, 96vw);
  max-height: 82vh;
  overflow: auto;
  background: #fff;
  border: 1px solid #c8e1e8;
  border-radius: 12px;
  box-shadow: 0 20px 50px rgba(0, 40, 55, 0.18);
  padding: 18px;
}

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

.measurement-print-screen,
.receiving-print-screen {
  display: none;
  background: #c7c7c7;
  padding: 28px 0;
}

.a4-page {
  width: 794px;
  min-height: 1123px;
  margin: 0 auto;
  background: #ffffff;
  color: #000;
  padding: 28px 42px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.18);
  font-family: Arial, Helvetica, sans-serif;
}

.print-header {
  display: grid;
  grid-template-columns: 72px 1fr 96px;
  align-items: start;
  gap: 12px;
}

.print-logo {
  color: var(--brand);
  font-weight: 800;
  font-size: 16px;
  line-height: 1.1;
  text-align: center;
}

.print-title-row {
  display: grid;
  grid-template-columns: 1fr 160px;
  margin: 28px 0 18px;
  font-size: 16px;
  text-align: center;
}

.print-info-row {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  margin-bottom: 16px;
  font-size: 16px;
}

.print-box {
  border: 1px solid #000;
  margin-bottom: 4px;
}

.print-line {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-bottom: 1px solid #000;
}

.print-line:last-child {
  border-bottom: 0;
}

.print-cell {
  padding: 6px 8px;
  border-right: 1px solid #000;
  min-height: 30px;
}

.print-cell:last-child {
  border-right: 0;
}

.print-section-title {
  background: #f0f0f0;
  padding: 5px 0;
  font-weight: 700;
}

.print-table {
  width: 100%;
  min-width: 0;
  border-collapse: collapse;
  font-size: 14px;
}

.print-table th,
.print-table td {
  border: 1px solid #b8b8b8;
  padding: 5px;
  height: 28px;
  white-space: normal;
}

.print-table th {
  background: #ffffff;
  color: #000;
  font-weight: 700;
  position: static;
}

.print-measure-layout {
  display: grid;
  grid-template-columns: 270px 270px;
  gap: 102px;
  margin: 8px 4px 0;
  align-items: start;
}

.receiving-page {
  width: 744px;
  min-height: 1052px;
  margin: 0 auto;
  background: #ffffff;
  color: #000;
  padding: 28px 32px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.18);
  font-family: Arial, Helvetica, sans-serif;
}

.receiving-header {
  display: grid;
  grid-template-columns: 90px 1fr 78px;
  gap: 10px;
  align-items: start;
}

.receiving-title {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 16px;
  align-items: center;
  margin: 16px 0 22px;
  font-size: 16px;
}

.receiving-title-main {
  grid-column: 2;
  text-align: center;
}

.receiving-title-po {
  grid-column: 3;
  text-align: right;
  padding-right: 18px;
}

.receiving-info {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  margin-bottom: 14px;
  font-size: 14px;
}

.receiving-info-line {
  margin-bottom: 8px;
}

.receiving-center-line {
  display: grid;
  grid-template-columns: 1fr 1.35fr 1fr;
  column-gap: 22px;
  margin-bottom: 22px;
  font-size: 18px;
  align-items: center;
}

.receiving-company-line {
  text-align: center;
  justify-self: center;
  max-width: 100%;
}

.receiving-prn-line {
  text-align: right;
  justify-self: end;
  white-space: nowrap;
}

.receiving-table {
  width: 100%;
  min-width: 0;
  border-collapse: collapse;
  font-size: 14px;
}

.receiving-table th,
.receiving-table td {
  border: 1px solid #aeb7c4;
  height: 32px;
  padding: 3px;
  white-space: normal;
}

.receiving-table th {
  position: static;
  background: #ffffff;
  color: #000;
  font-weight: 400;
  text-align: center;
}

.receiving-table .release-col {
  width: 54px;
  text-align: center;
}

.receiving-table .qty-col {
  width: 62px;
  text-align: center;
}

.receiving-table .signature-col {
  width: 132px;
  text-align: center;
}

.receiving-table .size-col {
  width: 172px;
}

.receiving-table .remarks-col {
  width: 122px;
}

.receiving-table input,
.receiving-table select {
  width: 100%;
  border: 0;
  background: transparent;
  font: inherit;
  color: inherit;
}

.scan-size-wrap {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 46px;
  gap: 4px;
  align-items: center;
}

.scan-size-button {
  border: 1px solid #b9d8e1;
  background: #e7f6f8;
  color: var(--brand);
  border-radius: 6px;
  min-height: 28px;
  font-weight: 700;
  cursor: pointer;
}

.scanner-modal {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  background: rgba(0, 24, 36, 0.58);
  z-index: 999;
  padding: 18px;
}

.scanner-modal[hidden] {
  display: none !important;
}

.scanner-panel {
  width: min(520px, 96vw);
  background: #ffffff;
  border-radius: 8px;
  border: 1px solid #b9d8e1;
  padding: 14px;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.24);
}

.scanner-panel h2 {
  margin: 0 0 10px;
  font-size: 18px;
  color: var(--brand);
}

.scanner-video {
  width: 100%;
  aspect-ratio: 4 / 3;
  background: #001824;
  border-radius: 6px;
  object-fit: cover;
}

.scanner-status {
  min-height: 22px;
  margin: 8px 0;
  color: var(--brand);
  font-weight: 700;
}

.release-check {
  width: 18px !important;
  height: 18px;
  accent-color: var(--brand);
}

.release-signature-img:not([hidden]) {
  max-width: 118px;
  max-height: 26px;
  display: block;
  margin: 0 auto;
}

.release-signature-img[hidden] {
  display: none !important;
}

.release-controls {
  margin-top: 14px;
  padding: 12px;
  border: 1px solid #aeb7c4;
  background: #f8fcfd;
  font-size: 13px;
}

.release-controls[hidden],
.release-otp-row[hidden] {
  display: none !important;
}

.release-control-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin-top: 8px;
}

.release-signature-canvas {
  width: 100%;
  height: 138px;
  border: 1px solid #aeb7c4;
  background: #ffffff;
  touch-action: none;
  display: block;
  margin-top: 8px;
}

.release-status-text {
  color: var(--brand);
  font-weight: 700;
  min-height: 18px;
}

.nothing-follows {
  margin-top: 338px;
  text-align: center;
  font-family: "Courier New", monospace;
  font-size: 12px;
}

.signature-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 88px;
  margin-top: 48px;
  font-size: 14px;
}

.signature-line {
  display: inline-block;
  width: 200px;
  border-bottom: 1px solid #000;
  margin-left: 8px;
  vertical-align: bottom;
  min-height: 42px;
  position: relative;
}

.print-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  width: 794px;
  margin: 0 auto 8px;
}

@page {
  size: A4 portrait;
  margin: 8mm;
}

@media print {
  body {
    background: #ffffff;
  }

  .topbar,
  .dashboard,
  .screen,
  .profile-screen,
  .customer-info-screen,
  .po-info-screen,
  .po-delivery-screen,
  .beneficiary-upload-screen,
  .item-order-screen,
  .order-item-screen,
  .release-actions,
  .release-controls,
  .print-actions {
    display: none !important;
  }

  main {
    padding: 0;
  }

  .measurement-print-screen,
  .receiving-print-screen {
    display: none !important;
    padding: 0;
    background: #ffffff;
  }

  body:has(#measurement-print:target) #measurement-print,
  body:has(#receiving-print:target) #receiving-print {
    display: block !important;
  }

  .a4-page,
  .receiving-page {
    width: 194mm;
    min-height: auto;
    margin: 0;
    box-shadow: none;
    padding: 0;
    transform: none;
  }
}

.po-info-top {
  display: grid;
  grid-template-columns: 120px 1fr auto;
  gap: 12px;
  align-items: start;
  padding: 6px 28px 8px;
  border-top: 2px solid #c80020;
  background: #f4f4f4;
}

.po-title {
  margin: 8px 0 4px;
  font-size: 22px;
  font-weight: 400;
  text-align: center;
}

.po-actions {
  display: grid;
  grid-template-columns: 44px;
  gap: 4px;
}

.po-body {
  padding: 0 28px 24px;
}

.po-layout {
  display: grid;
  grid-template-columns: 1fr 490px 206px;
  gap: 14px;
  align-items: start;
}

.po-fields {
  display: grid;
  grid-template-columns: 74px 1fr;
  gap: 4px;
  align-items: center;
  font-size: 13px;
}

.po-fields input {
  width: 100%;
  min-width: 0;
  min-height: 30px;
  height: 30px;
  padding: 2px 8px;
  box-sizing: border-box;
}

.po-fields textarea {
  min-height: 75px;
  resize: vertical;
  border: 1px solid #8792a0;
  font: inherit;
  padding: 4px 6px;
}

.po-fields .date-alert {
  background: #ffc7cc;
}

.amount-row {
  display: grid;
  grid-template-columns: 86px 120px 34px 70px 78px 1fr;
  gap: 4px;
  align-items: center;
  margin-top: 6px;
}

.status-box {
  background: #edf8fb;
  padding: 6px;
}

.status-grid {
  display: grid;
  grid-template-columns: 1fr 54px;
  gap: 4px;
  align-items: center;
  font-size: 13px;
}

.status-grid strong {
  text-align: center;
}

.status-grid input {
  text-align: center;
  font-weight: 700;
}

.delivery-percent {
  margin-top: 0;
  text-align: right;
  font-size: 14px;
  font-weight: 700;
}

.delivery-percent input {
  height: 30px;
  min-height: 30px;
  padding: 2px 4px;
}

.item-qty-panel {
  margin-top: 8px;
  border: 1px solid #aeb7c4;
  background: #ffffff;
  min-height: 340px;
  padding: 0 8px;
}

.item-qty-title {
  margin: 0 0 14px;
  padding-top: 2px;
  text-align: center;
  font-size: 18px;
  font-weight: 400;
}

.item-qty-grid {
  display: grid;
  grid-template-columns: 42px 112px 1fr 72px 82px 1fr 92px;
  gap: 4px;
  align-items: end;
  font-size: 13px;
}

.item-qty-grid label {
  text-align: center;
  color: #000;
}

.customer-header {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 18px;
  align-items: start;
  padding: 8px 0 16px;
  border-bottom: 1px solid #bcc5d2;
}

.item-master-screen {
  width: min(100%, 1180px);
  display: none;
  background: #ffffff;
}

.item-master-layout {
  display: grid;
  grid-template-columns: minmax(300px, 0.8fr) minmax(520px, 1.4fr);
  gap: 16px;
  padding: 18px;
}

.item-master-panel {
  border: 1px solid rgba(31, 111, 139, 0.14);
  border-radius: 14px;
  background: #ffffff;
  overflow: hidden;
}

.item-master-panel h2 {
  margin: 0;
  padding: 12px 14px;
  background: #ecf5f5;
  color: #103f52;
  font-size: 16px;
}

.item-master-panel .grid-wrap {
  border: 0;
  border-radius: 0;
  max-height: 560px;
}

@media (max-width: 430px) {
  .topbar {
    padding: 10px 16px;
  }

  .brand-text {
    font-size: 15px;
  }

  .brand-mark {
    width: 56px;
    font-size: 22px;
    padding-left: 10px;
  }

  .dashboard {
    max-width: 230px;
    grid-template-columns: 1fr;
  }

  .screen-header,
  .search-fields {
    display: block;
  }

  .search-fields label,
  .search-fields input {
    width: 100%;
    display: block;
    margin-bottom: 8px;
  }

  .utility-actions {
    grid-template-columns: 1fr 1fr;
    margin-top: 12px;
  }

  .profile-top,
  .profile-form,
  .two-col-fields,
  .name-badge-row,
  .delivery-form {
    display: block;
  }

  .profile-actions {
    grid-template-columns: 1fr 1fr;
  }

  .customer-info-top,
  .customer-fields,
  .customer-code-row,
  .po-info-top,
  .po-layout,
  .amount-row,
  .item-qty-grid,
  .delivery-data-top,
  .delivery-data-layout,
  .delivery-right-top,
  .sap-row,
  .uniform-set-grid,
  .upload-top,
  .upload-grid,
  .item-order-body,
  .item-order-header,
  .item-order-fields,
  .item-remarks,
  .order-item-top,
  .maintenance-grid,
  .maintenance-details,
  .maintenance-buttons,
  .standard-size-grid,
  .barcode-row,
  .standard-size-buttons,
  .measurement-layout,
  .measurement-detail-grid,
  .measurement-heading {
    display: block;
  }
}

/* Modern responsive layer */
body {
  background:
    radial-gradient(circle at top left, rgba(31, 111, 139, 0.18), transparent 34rem),
    linear-gradient(135deg, #f7faf8 0%, #eef6f7 46%, #f4f0e8 100%);
  color: #16222a;
}

.topbar {
  min-height: 76px;
  background: rgba(255, 255, 255, 0.82);
  backdrop-filter: blur(18px);
  border-top: 0;
  border-bottom: 1px solid rgba(31, 111, 139, 0.16);
  box-shadow: 0 12px 36px rgba(22, 34, 42, 0.08);
  position: sticky;
  top: 0;
  z-index: 10;
}

.brand-text {
  color: #103f52;
  font-size: 17px;
  letter-spacing: 0.02em;
}

.brand-mark {
  width: 54px;
  height: 54px;
  border: 0;
  border-radius: 16px;
  padding: 0;
  background: #103f52;
  color: #ffffff;
  box-shadow: 0 10px 24px rgba(16, 63, 82, 0.22);
  font-size: 22px;
}

main {
  align-items: flex-start;
  background: transparent;
  padding: 28px clamp(12px, 3vw, 32px);
}

.dashboard,
.screen,
.profile-screen,
.customer-info-screen,
.po-info-screen,
.po-delivery-screen,
.beneficiary-upload-screen,
.item-order-screen,
.order-item-screen {
  border: 1px solid rgba(31, 111, 139, 0.14);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 24px 70px rgba(22, 34, 42, 0.12);
  overflow: hidden;
}

.item-master-screen {
  border: 1px solid rgba(31, 111, 139, 0.14);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 24px 70px rgba(22, 34, 42, 0.12);
  overflow: hidden;
}

.dashboard {
  width: min(100%, 760px);
  padding: 30px;
  gap: 22px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.section-title,
.screen-title,
.profile-title,
.customer-info-title,
.po-title,
.item-order-title,
.order-item-title,
.standard-size-form-title,
.upload-title {
  color: #103f52;
  font-family: Arial, Helvetica, sans-serif;
  letter-spacing: 0;
}

.section-title {
  text-align: left;
  font-size: 18px;
  margin-bottom: 14px;
}

.action-button,
.small-button,
.edit-button {
  min-height: 40px;
  border-radius: 10px;
  border: 1px solid rgba(31, 111, 139, 0.18);
  background: #e8f3f4;
  color: #103f52;
  font-weight: 700;
  transition: transform 0.12s ease, box-shadow 0.12s ease, background 0.12s ease;
}

.action-button {
  min-height: 52px;
  justify-content: flex-start;
  padding-inline: 18px;
  background: #ffffff;
  border-color: rgba(31, 111, 139, 0.16);
  box-shadow: 0 8px 20px rgba(22, 34, 42, 0.06);
  font-size: 14px;
}

.action-button:hover,
.small-button:hover,
.edit-button:hover {
  transform: translateY(-1px);
  box-shadow: 0 12px 24px rgba(16, 63, 82, 0.16);
  background: #d7ecee;
}

input,
select,
textarea {
  min-height: 34px;
  border: 1px solid rgba(31, 111, 139, 0.2);
  border-radius: 9px;
  background: #ffffff;
  color: #17242d;
}

input:focus,
select:focus,
textarea:focus {
  border-color: #1f6f8b;
  outline: 3px solid rgba(31, 111, 139, 0.16);
}

.screen,
.customer-info-screen,
.po-info-screen,
.po-delivery-screen,
.profile-screen,
.item-order-screen {
  width: min(100%, 1180px);
}

.screen-header,
.customer-header,
.profile-top,
.customer-info-top,
.po-info-top,
.delivery-data-top,
.upload-top,
.order-item-top {
  background: linear-gradient(135deg, #ffffff 0%, #eef7f7 100%);
  border-top: 0;
  border-bottom: 1px solid rgba(31, 111, 139, 0.12);
  padding: 18px;
}

.grid-wrap,
.beneficiary-delivery-grid,
.po-grid,
.entitled-grid {
  border: 1px solid rgba(31, 111, 139, 0.14);
  border-radius: 12px;
  border-top: 1px solid rgba(31, 111, 139, 0.14);
  background: #ffffff;
}

table {
  font-size: 13px;
  border-collapse: separate;
  border-spacing: 0;
}

th {
  background: #ecf5f5;
  color: #25424e;
  font-weight: 700;
  border-color: #d8e7e8;
}

td {
  color: #16283f;
  border-color: #e5ecee;
}

tbody tr:nth-child(even) {
  background: #f8fbfb;
}

tbody tr:hover {
  background: #edf8f8;
}

.open-cell,
.po-icon-cell,
.yellow-cell,
.edit-cell {
  border-radius: 3px;
}

.profile-body,
.customer-info-body,
.po-body,
.delivery-data-body,
.upload-body {
  padding: 20px;
}

.tab-panel,
.po-panel,
.item-qty-panel,
.uniform-panel,
.entitled-panel {
  border-color: rgba(31, 111, 139, 0.14);
  border-radius: 14px;
  background: #ffffff;
  box-shadow: 0 10px 26px rgba(22, 34, 42, 0.05);
}

.tab {
  border-color: rgba(31, 111, 139, 0.14);
  border-radius: 999px;
  background: #edf4f4;
  font-weight: 700;
  margin-right: 6px;
}

.tab.active {
  background: #103f52;
  color: #ffffff;
}

.status-box {
  border: 1px solid rgba(31, 111, 139, 0.14);
  border-radius: 14px;
  background: #f2faf9;
}

.screen-title,
.profile-title,
.customer-info-title,
.po-title,
.item-order-title,
.upload-title {
  font-size: clamp(20px, 2.3vw, 28px);
  font-weight: 800;
}

.profile-id {
  color: #b42318;
  font-weight: 800;
}

.open-cell {
  background: #1f6f8b;
  color: #ffffff;
}

.open-cell a {
  color: #ffffff;
}

.po-icon-cell,
.edit-cell {
  background: #e0f0f1;
  color: #103f52;
}

.yellow-cell {
  background: transparent;
}

.measurement-print-screen,
.receiving-print-screen {
  border: 0;
  border-radius: 0;
  box-shadow: none;
  overflow: visible;
}

@media (max-width: 1000px) {
  main {
    padding: 18px 10px;
  }

  .customer-info-top,
  .po-info-top,
  .delivery-data-top,
  .profile-top,
  .item-order-body,
  .order-item-top {
    grid-template-columns: 1fr;
  }

  .customer-fields,
  .po-layout,
  .delivery-data-layout,
  .delivery-left-top,
  .profile-form,
  .measurement-layout,
  .item-master-layout,
  .item-order-header,
  .measurement-detail-grid,
  .delivery-right-top {
    grid-template-columns: 1fr;
  }

  .profile-meta,
  .customer-code-row,
  .amount-row,
  .sap-row,
  .name-badge-row {
    grid-template-columns: 1fr 1fr;
  }

  .delivery-actions,
  .profile-actions,
  .po-actions,
  .customer-info-actions,
  .item-side-actions,
  .order-item-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
  }

  .grid-wrap,
  .po-grid,
  .beneficiary-delivery-grid,
  .entitled-grid {
    max-width: 100%;
    overflow-x: auto;
  }
}

@media (max-width: 640px) {
  .topbar {
    min-height: 62px;
  }

  .brand-text {
    font-size: 14px;
  }

  .dashboard {
    grid-template-columns: 1fr;
    padding: 18px;
  }

  .screen-header,
  .customer-header,
  .search-fields,
  .search-fields.left,
  .field-grid,
  .field-grid.compact,
  .two-col-fields,
  .badge-name-row,
  .profile-meta,
  .customer-field-grid,
  .po-fields,
  .delivery-form,
  .upload-grid,
  .item-qty-grid,
  .uniform-set-grid,
  .maintenance-grid,
  .maintenance-details,
  .standard-size-grid,
  .barcode-row {
    display: grid;
    grid-template-columns: 1fr;
  }

  .screen-title,
  .screen-title.left,
  .profile-title,
  .customer-info-title,
  .po-title {
    text-align: left;
  }

  .action-button,
  .small-button {
    width: 100%;
  }

  .tabs,
  .uniform-tabs {
    overflow-x: auto;
    align-items: stretch;
  }

  .tab {
    white-space: nowrap;
  }
}