/* Compact screen workspace. Print templates keep their approved dimensions. */
@media screen {
  :root { --ui-body-size:14px; --ui-control-height:34px; --ui-panel-pad:14px; --ui-gap:10px; }
  html { font-size:14px; }
  body { font-size:var(--ui-body-size); line-height:1.45; }
  body,button,input,select,textarea { text-rendering:optimizeLegibility; }

  .topbar { height:62px; padding-inline:18px; }
  .topbar h1 { margin-top:1px; font-size:19px; }
  .topbar small { font-size:9px; }
  .top-actions { gap:6px; }
  .avatar { width:32px; height:32px; }
  .page-content { max-width:1700px; padding:15px 18px 38px; }
  .section-intro { gap:10px; padding:2px 0 14px; }
  .section-intro h2 { margin:4px 0 2px; font-size:23px; line-height:1.25; }
  .section-intro p { font-size:12px; line-height:1.45; }

  :is(.panel,.job-card,.form-panel) { padding:var(--ui-panel-pad); }
  .panel-head { gap:10px; margin-bottom:11px; }
  .panel-head h3 { font-size:14px; line-height:1.35; }
  .panel-head p { margin-top:2px; font-size:10px; line-height:1.4; }
  .split-grid,.master-cards,.job-grid,.report-grid,.kpi-grid { gap:var(--ui-gap); }
  .kpi { min-height:104px; padding:13px; }
  .kpi>strong { margin:7px 0 2px; font-size:21px; }
  .master-cards article { min-height:118px; padding:15px; }
  .master-cards h3 { margin:8px 0 3px; font-size:14px; }
  .master-cards small { margin-top:12px; }

  :is(.primary,.ghost,.mini-action,button) { min-height:32px; }
  :is(.primary,.ghost) { padding:7px 11px; font-size:12px; }
  .mini-action { padding:5px 8px; font-size:11px; }
  .form-grid { gap:10px 12px; padding:14px 16px; }
  .form-grid label>span { margin-bottom:3px; font-size:10px; }
  .form-grid :is(input,select,textarea),
  :is(input,select):not([type="checkbox"]):not([type="radio"]) {
    min-height:var(--ui-control-height); padding:6px 8px; font-size:13px;
  }
  textarea { padding:7px 8px; font-size:13px; line-height:1.45; }
  .form-actions { gap:6px; margin-top:2px; padding-top:10px; }
  .modal-head { padding:14px 17px; }
  .modal-head h2 { margin:3px 0 1px; font-size:18px; }
  .modal-head p { font-size:10px; }
  .modal-head button { font-size:22px; }

  .table-wrap { margin-top:0; }
  .table-wrap :is(th,td) { padding:7px 8px; font-size:12px; line-height:1.4; }
  .table-wrap th { font-size:10.5px; }
  .job-search-panel { gap:7px; margin-bottom:9px; padding:10px; }
  .job-search-panel label { gap:3px; }
  .job-registry-table>article { padding-block:9px; }

  .entry-tabs:is(.work-entry-tabs,.groundwater-tabs) { gap:4px; padding:2px 1px 5px; }
  .entry-tabs:is(.work-entry-tabs,.groundwater-tabs)>button {
    flex-basis:94px; min-height:52px; padding:5px 3px; gap:3px; font-size:10px; border-radius:6px;
  }
  :is(.work-entry-tabs,.groundwater-tabs)>button::before { width:18px; height:18px; }

  .groundwater-center,.groundwater-entry-layout,.groundwater-interval-center,
  .groundwater-document-prep,.nb4-tracking { gap:10px; }
  .groundwater-case-picker { gap:10px; padding:10px 12px; border-radius:10px; }
  .groundwater-file-form { gap:7px; margin-top:10px; padding-top:10px; }
  .gwf-collapsible-body { padding-top:8px; }
  .gwf-collapsible-section>summary { gap:8px; }

  :is(.nb1-condition-panel,.groundwater-coordinate-panel,.nb1-consent-prep,
      .nb1-consent-details,.nb1-officer-inline-note,.nb1-link-pending,
      .nb1-evidence-linked,.nb1-driller-picker,.nb4-tracking-form) {
    gap:8px; padding:9px 10px; border-radius:8px;
  }
  .nb1-original-header { padding:12px; border-radius:9px; }
  .nb1-officer-box { padding:7px 9px; }
  .nb1-check-line { gap:7px; padding:7px 8px; }
  .nb1-nested-block { gap:7px; margin-left:18px; padding:8px; }
  .nb1-purpose-column { gap:7px; padding:10px; }
  .nb1-evidence-columns { gap:9px; padding:10px; }
  .nb1-evidence-columns>section { gap:7px; padding:10px; }
  .nb1-declaration,.nb1-officer-section { padding:10px; }
  .nb1-section-help { padding:6px 9px; font-size:11px; }
  .groundwater-document-prep-grid { gap:8px; }
  .groundwater-document-prep-grid>article { gap:7px; min-height:132px; padding:10px; border-radius:9px; }
  .nb4-tracking-summary,.nb4-attachment-grid { gap:8px; }
  .nb4-tracking-summary article,.nb4-attachment-grid>section { gap:7px; padding:10px; border-radius:9px; }
  details>summary { line-height:1.35; }
  p { margin-block:6px; }

  @media (max-width:760px) {
    :root { --ui-control-height:42px; --ui-panel-pad:11px; }
    html,body { font-size:14px; }
    .topbar { height:58px; padding-inline:12px; }
    .topbar h1 { font-size:17px; }
    .page-content { padding:10px 9px 82px; }
    .section-intro { padding-bottom:10px; }
    .section-intro h2 { font-size:20px; }
    .form-grid { gap:9px; padding:11px; }
    :is(.primary,.ghost,.mini-action,button) { min-height:42px; }
    .entry-tabs:is(.work-entry-tabs,.groundwater-tabs)>button {
      flex:0 0 112px; min-height:54px; font-size:11px;
    }
    .table-wrap :is(th,td) { padding:7px 6px; }
    .nb1-nested-block { margin-left:0; }
  }
  @media (pointer:coarse) {
    :is(button,a.primary,a.ghost,input,select) { min-height:44px; }
  }
}

/* Final cascade overrides for the two operational workspaces. */
@media screen and (min-width: 641px) {
  .organization-workspace .org-structure-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 5px !important;
  }
  .organization-workspace .org-unit {
    min-height: 0 !important;
    padding: 6px 8px !important;
  }
  .organization-workspace .org-unit > :is(header, p, .org-members),
  .organization-workspace .org-person {
    min-height: 0 !important;
    height: auto !important;
    margin-block: 2px !important;
    padding-block: 0 !important;
  }
  .organization-workspace .org-unit > header {
    display: grid !important;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 4px 6px !important;
  }
  .organization-workspace .org-unit > header :is(span, b, small),
  .organization-workspace .org-unit > p,
  .organization-workspace .org-person :is(b, small) {
    font-size: 13px !important;
    line-height: 1.35 !important;
  }
  .organization-workspace .org-person .avatar {
    width: 25px !important;
    height: 25px !important;
    min-height: 25px !important;
    font-size: 12px !important;
  }
  .organization-workspace .role-guide-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 5px !important;
  }
  .organization-workspace .role-guide-grid > * {
    min-height: 0 !important;
    height: auto !important;
    padding: 6px 8px !important;
  }
  .organization-workspace .role-guide-grid :is(p, small, li) {
    min-height: 0 !important;
    margin-block: 2px !important;
    font-size: 13px !important;
    line-height: 1.35 !important;
  }
  .organization-workspace .company-files,
  .organization-workspace .company-bank-register,
  .organization-workspace .company-document-register {
    margin-block: 5px !important;
  }
  .organization-workspace .structured-address-form,
  .organization-workspace .inline-form {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 5px 7px !important;
  }
  .organization-workspace .structured-address-form > .wide,
  .organization-workspace .inline-form > .wide {
    grid-column: span 2 !important;
  }
  .organization-workspace .structured-address-form > .form-actions,
  .organization-workspace .inline-form > .form-actions {
    grid-column: auto !important;
  }
  .organization-workspace .company-file-registry > *,
  .organization-workspace .bank-registry > * {
    min-height: 0 !important;
    padding: 5px 7px !important;
  }
  .organization-workspace .user-row {
    max-width: 100%;
    overflow: hidden;
  }

  .page-content > .government-entry-grid,
  .page-content > .workflow-workspace,
  .page-content > .groundwater-center {
    margin-top: 0 !important;
  }
  .page-content > :is(.government-entry-grid, .workflow-workspace, .groundwater-center) :is(.top-gap, .form-actions) {
    margin-top: 5px !important;
  }
  .page-content > :is(.government-entry-grid, .workflow-workspace, .groundwater-center) .form-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 5px 7px !important;
  }
  .page-content > :is(.government-entry-grid, .workflow-workspace, .groundwater-center) .form-grid > .wide {
    grid-column: span 2;
  }
  .page-content > :is(.government-entry-grid, .workflow-workspace, .groundwater-center) :is(.summary-grid, .kpi-grid) {
    gap: 5px !important;
  }
  .page-content > :is(.government-entry-grid, .workflow-workspace, .groundwater-center) :is(.summary-grid, .kpi-grid) > * {
    min-height: 0 !important;
    padding: 6px 8px !important;
  }
}

/* Groundwater file workflow: find/select an existing file before create or edit. */
@media screen {
  .groundwater-center > .control-grid > section:nth-of-type(2) {
    order: -1;
  }
}

/* Organization and Work & Documents: dense desktop workspace standard. */
@media screen {
  .organization-workspace {
    display: grid;
    gap: 6px;
    min-width: 0;
    font-size: 11px;
  }
  .organization-workspace > .entry-tabs,
  .work-entry-tabs {
    gap: 4px;
    margin: 0 0 4px;
    padding: 4px;
    overflow-x: auto;
    scrollbar-width: thin;
  }
  .organization-workspace > .entry-tabs button,
  .work-entry-tabs button {
    flex: 1 1 auto;
    min-height: 30px;
    padding: 4px 8px;
    border-radius: 6px;
    font-size: 10px;
    line-height: 1.15;
    white-space: nowrap;
  }
  .organization-workspace :is(.section-intro, .section-head, .panel-head) {
    gap: 5px 8px;
    margin-bottom: 5px;
    padding: 0;
  }
  .organization-workspace .section-intro {
    align-items: center;
  }
  .organization-workspace .section-intro > div:first-child {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 2px 8px;
  }
  .organization-workspace :is(h2, h3) {
    margin-block: 0;
    font-size: 13px;
    line-height: 1.2;
  }
  .organization-workspace :is(p, small, label, dt, dd, li) {
    font-size: 10px;
    line-height: 1.3;
  }
  .organization-workspace p,
  .organization-workspace dl {
    margin-block: 3px;
  }
  .organization-workspace :is(.panel, .form-panel) {
    padding: 8px 10px;
    border-radius: 8px;
  }
  .organization-workspace :is(button, .button, a.primary, a.ghost) {
    min-height: 28px;
    padding: 3px 8px;
    font-size: 10px;
    line-height: 1.2;
  }
  .organization-workspace :is(input, select, textarea) {
    min-height: 30px;
    padding: 4px 7px;
    border-radius: 5px;
    font-size: 11px;
  }
  .organization-workspace textarea { min-height: 54px; }
  .organization-workspace :is(.inline-form, form.form-grid, .system-account-form) {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 5px 7px;
  }
  .organization-workspace :is(.wide, .form-actions, .system-account-note) {
    grid-column: auto;
  }
  .organization-workspace .form-actions {
    align-self: end;
    gap: 4px;
  }
  .organization-workspace .top-gap { margin-top: 6px; }

  .organization-workspace .org-summary-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 5px;
  }
  .organization-workspace .org-summary-grid > * {
    min-height: 0;
    padding: 6px 8px;
  }
  .organization-workspace .org-top-grid,
  .organization-workspace .org-bottom-grid {
    gap: 6px;
    align-items: stretch;
  }
  .organization-workspace .org-profile,
  .organization-workspace .org-readiness,
  .organization-workspace .org-governance {
    min-height: 0;
    height: auto;
  }
  .organization-workspace .org-identity {
    gap: 7px;
  }
  .organization-workspace .org-seal {
    width: 58px;
    height: 58px;
  }
  .organization-workspace .org-readiness > :not(.panel-head) {
    padding-block: 4px;
  }
  .organization-workspace .org-structure-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 5px;
  }
  .organization-workspace .org-unit {
    min-height: 0;
    padding: 6px 8px;
  }
  .organization-workspace .org-members,
  .organization-workspace .org-person {
    gap: 3px;
    margin-top: 3px;
  }
  .organization-workspace .org-matrix :is(th, td) {
    padding: 3px 5px;
    font-size: 13px;
    line-height: 1.2;
  }
  .organization-workspace .org-governance li {
    padding: 4px 6px;
  }

  .organization-workspace .control-grid {
    gap: 6px;
  }
  .organization-workspace .system-account-form {
    margin-top: 4px;
  }
  .organization-workspace .user-list {
    gap: 4px;
  }
  .organization-workspace .user-row {
    grid-template-columns: 34px minmax(130px, 1.4fr) minmax(150px, 1fr) minmax(120px, auto);
    gap: 5px 7px;
    min-width: 0;
    padding: 5px 7px;
  }
  .organization-workspace .user-row > * { min-width: 0; }
  .organization-workspace .user-row small {
    overflow-wrap: anywhere;
  }
  .organization-workspace .account-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 3px;
    min-width: 0;
  }
  .organization-workspace .role-reference { padding: 8px 10px; }
  .organization-workspace .role-guide-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 5px;
  }
  .organization-workspace .role-guide-grid > * {
    min-height: 0;
    padding: 6px 8px;
  }

  .organization-workspace .employee-search { margin: 0 0 5px; }
  .organization-workspace .employee-registry {
    gap: 4px;
  }
  .organization-workspace .employee-registry > * {
    min-height: 0;
    padding: 5px 7px;
  }
  .organization-workspace :is(.company-document-register, .company-files, .company-bank-register) {
    margin-top: 6px;
    padding: 7px 9px;
  }
  .organization-workspace :is(.company-file-registry, .bank-registry) {
    gap: 4px;
  }
  .organization-workspace :is(.company-file-registry, .bank-registry) > * {
    gap: 5px;
    min-height: 0;
    padding: 5px 7px;
  }

  /* All screens under Work & Documents retain controls but use less vertical space. */
  .page-content > .work-entry-tabs + * {
    min-width: 0;
  }
  .page-content :is(.master-layout, .government-entry-grid, .workflow-workspace, .groundwater-center) {
    gap: 6px;
  }
  .page-content :is(.master-layout, .government-entry-grid, .workflow-workspace, .groundwater-center) :is(.panel, .form-panel) {
    padding: 7px 9px;
    border-radius: 8px;
  }
  .page-content :is(.master-layout, .government-entry-grid, .workflow-workspace, .groundwater-center) :is(.panel-head, .section-head) {
    gap: 4px 7px;
    margin-bottom: 4px;
  }
  .page-content :is(.master-layout, .government-entry-grid, .workflow-workspace, .groundwater-center) :is(h2, h3) {
    margin-block: 0;
    font-size: 13px;
    line-height: 1.2;
  }
  .page-content :is(.master-layout, .government-entry-grid, .workflow-workspace, .groundwater-center) :is(p, small, label) {
    font-size: 10px;
    line-height: 1.3;
  }
  .page-content :is(.master-layout, .government-entry-grid, .workflow-workspace, .groundwater-center) :is(input, select, textarea) {
    min-height: 30px;
    padding: 4px 7px;
    border-radius: 5px;
    font-size: 11px;
  }
  .page-content :is(.master-layout, .government-entry-grid, .workflow-workspace, .groundwater-center) textarea {
    min-height: 54px;
  }
  .page-content :is(.master-layout, .government-entry-grid, .workflow-workspace, .groundwater-center) :is(button, .button, a.primary, a.ghost) {
    min-height: 28px;
    padding: 3px 8px;
    font-size: 10px;
    line-height: 1.2;
  }
  .page-content :is(.master-layout, .government-entry-grid, .workflow-workspace, .groundwater-center) :is(.form-grid, .inline-form) {
    gap: 5px 7px;
  }
  .page-content :is(.master-layout, .government-entry-grid, .workflow-workspace, .groundwater-center) table :is(th, td) {
    padding: 3px 5px;
    font-size: 10px;
    line-height: 1.25;
  }
  .job-workspace-shortcuts {
    gap: 4px;
    margin: 0;
  }
  .job-workspace-shortcuts a {
    min-height: 27px;
    padding: 3px 7px;
    font-size: 10px;
  }
  #job-opening,
  #job-register {
    scroll-margin-top: 8px;
  }
  #job-register.top-gap { margin-top: 6px; }

  @media (max-width: 900px) {
    .organization-workspace .org-structure-grid,
    .organization-workspace .role-guide-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .organization-workspace :is(.inline-form, form.form-grid, .system-account-form) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  }
  @media (max-width: 640px) {
    .organization-workspace > .entry-tabs button,
    .work-entry-tabs button,
    .organization-workspace :is(button, .button, a.primary, a.ghost),
    .page-content :is(.master-layout, .government-entry-grid, .workflow-workspace, .groundwater-center) :is(button, .button, a.primary, a.ghost) {
      min-height: 42px;
    }
    .organization-workspace :is(input, select, textarea),
    .page-content :is(.master-layout, .government-entry-grid, .workflow-workspace, .groundwater-center) :is(input, select, textarea) {
      min-height: 42px;
    }
    .organization-workspace .org-summary-grid,
    .organization-workspace .org-structure-grid,
    .organization-workspace .role-guide-grid,
    .organization-workspace :is(.inline-form, form.form-grid, .system-account-form) { grid-template-columns: 1fr; }
    .organization-workspace .user-row { grid-template-columns: 34px minmax(0, 1fr); }
    .organization-workspace .user-row :is(.account-role, .account-actions) { grid-column: 2; }
    .organization-workspace .account-actions { justify-content: flex-start; }
  }
}

/* Customer/vendor register: fit the complete row inside the workspace. */
@media screen and (min-width: 761px) {
  .master-layout:has(.party-registry) {
    grid-template-columns: 148px minmax(0, 1fr);
    gap: 9px;
  }
  .master-layout:has(.party-registry) > aside {
    padding: 7px;
  }
  .master-layout:has(.party-registry) > aside button {
    min-height: 34px;
    padding: 7px 8px;
    font-size: 10px;
  }
  .party-head { gap: 8px; }
  .party-filters.typed {
    grid-template-columns: minmax(180px, 1.7fr) repeat(3, minmax(105px, 1fr));
    gap: 6px;
    padding: 8px;
  }
  .party-filters input,
  .party-filters select {
    min-width: 0;
    padding: 5px 6px;
  }
  .party-registry {
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
  }
  .party-registry article {
    grid-template-columns: 76px minmax(0, 1.45fr) minmax(110px, .9fr) 166px;
    gap: 7px;
    min-width: 0;
    padding: 7px 4px;
  }
  .party-registry article > div,
  .party-main,
  .party-contact,
  .party-actions {
    min-width: 0;
  }
  .party-main :is(b, span, small),
  .party-contact :is(b, span, small) {
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .party-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 4px;
  }
  .party-actions button {
    width: 100%;
    min-width: 0;
    min-height: 27px;
    padding: 3px 4px;
    font-size: 8px;
  }
  .party-actions button:last-child {
    grid-column: 1 / -1;
  }
}

@media screen and (min-width: 761px) and (max-width: 900px) {
  .master-layout:has(.party-registry) {
    grid-template-columns: 116px minmax(0, 1fr);
  }
  .party-registry article {
    grid-template-columns: 70px minmax(0, 1.3fr) minmax(100px, .8fr) 142px;
  }
}

/* Dashboard: keep alerts, KPIs and daily shortcuts visible with minimal scrolling. */
@media screen and (min-width: 821px) {
  .page-content:has(.quote-dashboard-alerts) .invoice-promises-panel {
    margin-bottom: 6px;
    padding: 7px 9px;
  }
  .page-content:has(.quote-dashboard-alerts) .promise-panel-head {
    gap: 5px;
    margin-bottom: 2px;
  }
  .page-content:has(.quote-dashboard-alerts) .promise-panel-head h3 {
    margin: 0;
    font-size: 12px;
    line-height: 1.2;
  }
  .page-content:has(.quote-dashboard-alerts) .promise-panel-head small,
  .page-content:has(.quote-dashboard-alerts) .invoice-promises-panel > small {
    display: none;
  }
  .page-content:has(.quote-dashboard-alerts) .promise-panel-actions {
    gap: 4px;
  }
  .page-content:has(.quote-dashboard-alerts) .promise-panel-actions button {
    min-height: 27px;
    padding: 3px 7px;
    font-size: 9px;
  }
  .page-content:has(.quote-dashboard-alerts) .promise-toggle {
    margin: 2px 0;
    font-size: 9px;
  }
  .page-content:has(.quote-dashboard-alerts) .invoice-promises-panel > .empty {
    margin: 1px 0;
    padding: 1px 0;
    font-size: 10px;
  }
  .page-content:has(.quote-dashboard-alerts) .quote-dashboard-alerts {
    margin: 6px 0;
    padding: 7px 9px;
  }
  .page-content:has(.quote-dashboard-alerts) .quote-alert-heading {
    gap: 6px;
  }
  .page-content:has(.quote-dashboard-alerts) .quote-alert-heading h3 {
    font-size: 11px;
  }
  .page-content:has(.quote-dashboard-alerts) .quote-dashboard-alerts > small {
    display: none;
  }
  .page-content:has(.quote-dashboard-alerts) .quick-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 5px;
  }
  .page-content:has(.quote-dashboard-alerts) .quick-grid button {
    min-height: 54px;
    grid-template-columns: 24px minmax(0, 1fr) 10px;
    gap: 5px;
    padding: 7px 8px;
  }
  .page-content:has(.quote-dashboard-alerts) .quick-grid button > b {
    font-size: 15px;
  }
  .page-content:has(.quote-dashboard-alerts) .quick-grid button span strong {
    font-size: 10px;
    line-height: 1.2;
  }
  .page-content:has(.quote-dashboard-alerts) .quick-grid button span small {
    margin-top: 1px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 8px;
    line-height: 1.15;
  }
  .page-content:has(.quote-dashboard-alerts) .top-gap {
    margin-top: 6px;
  }
}

/* One-screen operating standard for application pages (screen only). */
@media screen and (min-width: 821px) {
  :root {
    --ui-body-size: 12px;
    --ui-control-height: 30px;
    --ui-panel-pad: 10px;
    --ui-gap: 7px;
  }
  html, body { font-size: 12px; }
  .topbar {
    height: 54px;
    padding-inline: 14px;
  }
  .topbar h1 { font-size: 17px; }
  .top-actions :is(button, a) {
    min-height: 29px;
    padding: 4px 8px;
    font-size: 10px;
  }
  .avatar { width: 29px; height: 29px; }
  .page-content {
    padding: 9px 14px 24px;
  }
  .section-intro {
    min-height: 0;
    align-items: center;
    gap: 8px;
    padding: 0 0 7px;
  }
  .section-intro h2 {
    margin: 1px 0;
    font-size: 18px;
    line-height: 1.18;
  }
  .section-intro p {
    margin: 0;
    font-size: 10px;
    line-height: 1.25;
  }
  .section-intro > div > span {
    font-size: 8px;
    line-height: 1.1;
  }
  :is(.panel, .job-card, .form-panel) {
    margin-bottom: 7px;
    padding: 9px 10px;
    border-radius: 7px;
  }
  .panel-head {
    gap: 6px;
    margin-bottom: 6px;
  }
  .panel-head h3 { font-size: 12px; }
  .panel-head p { margin-top: 1px; font-size: 9px; line-height: 1.25; }
  :is(.entry-tabs, .control-tabs, .workflow-tabs) {
    gap: 3px;
    margin-bottom: 6px;
    padding-bottom: 4px;
  }
  :is(.entry-tabs, .control-tabs, .workflow-tabs) > :is(button, a) {
    min-height: 30px;
    padding: 4px 8px;
    font-size: 10px;
  }
  .entry-tabs:is(.work-entry-tabs, .groundwater-tabs) > button {
    min-height: 36px;
    padding: 3px 4px;
    flex-direction: row;
    gap: 4px;
    font-size: 9px;
  }
  :is(.work-entry-tabs, .groundwater-tabs) > button::before {
    width: 14px;
    height: 14px;
  }
  .kpi-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 6px;
  }
  .kpi {
    min-height: 68px;
    padding: 8px 10px;
  }
  .kpi > span, .kpi > small { font-size: 9px; line-height: 1.2; }
  .kpi > strong { margin: 3px 0 1px; font-size: 17px; line-height: 1.15; }
  :is(.split-grid, .master-cards, .job-grid, .report-grid) { gap: 7px; }
  .master-cards { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .master-cards article {
    min-height: 82px;
    padding: 9px 10px;
  }
  .master-cards h3 { margin: 3px 0 1px; font-size: 12px; }
  .master-cards small { margin-top: 5px; font-size: 9px; }
  .form-grid {
    gap: 6px 8px;
    padding: 9px 10px;
  }
  .form-grid label > span { margin-bottom: 1px; font-size: 9px; }
  .form-grid :is(input, select, textarea),
  :is(input, select):not([type="checkbox"]):not([type="radio"]) {
    min-height: 30px;
    padding: 4px 7px;
    font-size: 11px;
  }
  textarea { padding: 5px 7px; font-size: 11px; line-height: 1.3; }
  :is(.primary, .ghost, .mini-action, button) { min-height: 29px; }
  :is(.primary, .ghost) { padding: 4px 8px; font-size: 10px; }
  .mini-action { padding: 3px 6px; font-size: 9px; }
  .form-actions { gap: 5px; padding-top: 6px; }
  .table-wrap :is(th, td) {
    padding: 5px 6px;
    font-size: 10.5px;
    line-height: 1.25;
  }
  .table-wrap th { font-size: 9px; }
  .job-search-panel {
    gap: 5px;
    margin-bottom: 6px;
    padding: 7px 8px;
  }
  .job-registry-table > article { padding-block: 6px; }
  .summary-list > div { padding-block: 5px; }
  details > summary { line-height: 1.25; }
  p { margin-block: 4px; }
}

@media screen and (min-width: 821px) and (max-width: 1100px) {
  .master-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Keep navigation icons complete at every viewport width. */
@media screen {
  .page-content {
    min-width: 0;
    overflow-x: clip;
  }
  .page-content :is(.table-wrap, .register-inline-host, .job-registry-table) {
    min-width: 0;
    max-width: 100%;
  }
  .page-content .table-wrap {
    overflow-x: auto;
  }
  :is(.entry-tabs, .control-tabs, .workflow-tabs) {
    max-width: 100%;
    overflow-x: auto;
    overflow-y: visible;
    scrollbar-width: thin;
  }
  .entry-tabs:is(.work-entry-tabs, .groundwater-tabs) > button {
    min-width: max-content;
    overflow: visible;
  }
  :is(.work-entry-tabs, .groundwater-tabs) > button::before {
    flex: 0 0 auto;
    min-width: 14px;
    min-height: 14px;
    overflow: visible;
  }
  :is(.sidebar, .top-actions, .quick-actions) :is(svg, img, [class*="icon"]) {
    flex: 0 0 auto;
    object-fit: contain;
    overflow: visible;
  }
}

/* Compact document creation workspace. Keep every field, but reduce scanning distance. */
@media screen {
  .page-content:has(#document-workspace-create-panel:not([hidden])) .entry-tabs.work-entry-tabs {
    padding-block: 0 3px;
  }
  .page-content:has(#document-workspace-create-panel:not([hidden])) .entry-tabs.work-entry-tabs > button {
    min-height: 34px;
    padding: 3px 5px;
    flex-direction: row;
    gap: 4px;
    font-size: 9px;
  }
  .page-content:has(#document-workspace-create-panel:not([hidden])) .work-entry-tabs > button::before {
    width: 14px;
    height: 14px;
  }
  #document-workspace-create-panel {
    font-size: 11px;
  }
  #document-workspace-create-panel > .section-intro {
    margin-bottom: 6px;
    padding: 7px 10px;
  }
  #document-workspace-create-panel > .section-intro h2 {
    margin: 0;
    font-size: 14px;
    line-height: 1.25;
  }
  #document-workspace-create-panel > .section-intro p {
    margin: 1px 0 0;
    font-size: 9px;
    line-height: 1.3;
  }
  #document-workspace-create-panel .panel,
  #document-workspace-create-panel .form-panel {
    margin-bottom: 7px;
    padding: 9px 11px;
  }
  #document-workspace-create-panel .panel-head {
    margin-bottom: 5px;
  }
  #document-workspace-create-panel .panel-head h3 {
    margin: 0;
    font-size: 12px;
    line-height: 1.25;
  }
  #document-workspace-create-panel .panel-head p,
  #document-workspace-create-panel small {
    font-size: 9px;
    line-height: 1.3;
  }
  #document-workspace-create-panel :is(.form-grid, .inline-form) {
    gap: 6px 8px;
  }
  #document-workspace-create-panel .form-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    padding: 8px 10px;
  }
  #document-workspace-create-panel .form-grid > :is(.wide, .form-actions) {
    grid-column: span 2;
  }
  #document-workspace-create-panel label {
    gap: 2px;
    font-size: 10px;
    line-height: 1.25;
  }
  #document-workspace-create-panel :is(input:not([type="checkbox"]):not([type="radio"]), select, textarea) {
    min-height: 29px;
    padding: 4px 7px;
    font-size: 11px;
    line-height: 1.3;
  }
  #document-workspace-create-panel textarea {
    min-height: 44px;
  }
  #document-workspace-create-panel :is(button, .button, a.primary, a.ghost) {
    min-height: 28px;
    padding: 4px 8px;
    font-size: 10px;
  }
  #document-workspace-create-panel .line-editor {
    margin-top: 7px;
  }
  #document-workspace-create-panel .line-head {
    min-height: 29px;
    padding: 3px 0;
    font-size: 10px;
  }
  #document-workspace-create-panel .line-row {
    gap: 4px;
    padding-block: 3px;
  }
  #document-workspace-create-panel .line-row.labels {
    font-size: 9px;
    line-height: 1.2;
  }
  #document-workspace-create-panel :is(.totals, .document-totals) {
    gap: 3px;
    margin-top: 6px;
    padding: 6px 8px;
  }
  #document-workspace-create-panel .form-actions {
    gap: 6px;
    margin-top: 7px;
  }
  @media (max-width: 820px) {
    #document-workspace-create-panel .form-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }
  @media (max-width: 620px) {
    #document-workspace-create-panel .form-grid {
      grid-template-columns: 1fr;
    }
    #document-workspace-create-panel .form-grid > :is(.wide, .form-actions) {
      grid-column: auto;
    }
  }
}

/* Compact heading for the Work & Documents workspace. */
.page-content .work-section-intro {
  min-height: 0;
  margin: 0 0 4px;
  padding: 0;
  display: block;
}
.page-content .work-section-intro > div {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 2px 8px;
  min-width: 0;
}
.page-content .work-section-intro span {
  font-size: 8px;
  line-height: 1.15;
  letter-spacing: 1.1px;
}
.page-content .work-section-intro h2 {
  margin: 0;
  font-size: 17px;
  line-height: 1.2;
}
.page-content .work-section-intro p {
  margin: 0;
  font-size: 10px;
  line-height: 1.25;
}
@media (max-width: 640px) {
  .page-content .work-section-intro > div { gap: 1px 6px; }
  .page-content .work-section-intro p { flex-basis: 100%; }
}

/* Maximum-density document register. Scoped so document creation and print views stay unchanged. */
@media screen {
  #document-workspace > .workflow-tabs {
    gap: 4px;
    margin-bottom: 6px;
    padding-bottom: 5px;
  }
  #document-workspace > .workflow-tabs button {
    min-height: 30px;
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 11px;
  }
  #document-workspace-register-panel {
    font-size: 12px;
  }
  #document-workspace-register-panel > * {
    margin-block-start: 0;
  }
  #document-workspace-register-panel .invoice-promises-panel {
    margin-bottom: 5px;
    padding: 7px 9px;
    border-radius: 7px;
  }
  #document-workspace-register-panel .promise-panel-head {
    gap: 5px;
    margin-bottom: 3px;
  }
  #document-workspace-register-panel .promise-panel-head h3 {
    margin: 0;
    font-size: 12px;
    line-height: 1.25;
  }
  #document-workspace-register-panel .promise-panel-head h3 span,
  #document-workspace-register-panel .promise-panel-head small,
  #document-workspace-register-panel .invoice-promises-panel > small {
    font-size: 9px;
    line-height: 1.25;
  }
  #document-workspace-register-panel .promise-panel-actions {
    gap: 4px;
  }
  #document-workspace-register-panel .promise-panel-actions button {
    min-height: 27px;
    padding: 3px 7px;
    font-size: 10px;
    line-height: 1.2;
  }
  #document-workspace-register-panel .invoice-promises-panel > .empty {
    margin: 2px 0;
    padding: 2px 0;
    font-size: 10px;
    line-height: 1.25;
  }
  #document-workspace-register-panel .promise-toggle {
    margin: 3px 0;
    font-size: 10px;
    line-height: 1.25;
  }
  #document-workspace-register-panel .promise-list {
    gap: 5px;
    margin: 5px 0;
  }
  #document-workspace-register-panel .promise-item {
    gap: 8px;
    padding: 7px 8px;
    border-radius: 6px;
  }
  #document-workspace-register-panel .promise-item :is(span, small, p) {
    margin-block: 2px;
    font-size: 10px;
    line-height: 1.3;
  }
  #document-workspace-register-panel .register-mode-switch {
    gap: 4px;
    margin-bottom: 5px;
  }
  #document-workspace-register-panel .register-mode-switch button {
    min-height: 28px;
    padding: 3px 8px;
    font-size: 10px;
  }
  #document-workspace-register-panel > .section-intro {
    align-items: center;
    padding: 0 0 5px;
  }
  #document-workspace-register-panel > .section-intro > div {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 1px 7px;
  }
  #document-workspace-register-panel > .section-intro span {
    font-size: 7px;
    letter-spacing: .8px;
  }
  #document-workspace-register-panel > .section-intro h2 {
    margin: 0;
    font-size: 15px;
  }
  #document-workspace-register-panel > .section-intro p {
    margin: 0;
    font-size: 9px;
    line-height: 1.2;
  }
  #document-workspace-register-panel > .section-intro .primary {
    min-height: 28px;
    padding: 3px 8px;
    font-size: 10px;
  }
  #document-workspace-register-panel > .panel {
    padding: 7px 9px;
  }
  #document-workspace-register-panel .document-register-filters {
    grid-template-columns: minmax(210px, 2fr) repeat(5, minmax(105px, 1fr));
    gap: 5px 6px;
    padding: 0;
  }
  #document-workspace-register-panel .document-register-filters .register-query,
  #document-workspace-register-panel .document-register-filters .register-group {
    grid-column: auto;
  }
  #document-workspace-register-panel .document-register-filters label {
    gap: 2px;
    font-size: 9px;
    line-height: 1.2;
  }
  #document-workspace-register-panel .document-register-filters :is(input, select) {
    min-height: 29px;
    padding: 3px 6px;
    border-radius: 5px;
    font-size: 11px;
  }
  #document-workspace-register-panel .register-filter-actions {
    gap: 6px;
    min-height: 29px;
    padding: 5px 0;
    font-size: 10px;
  }
  #document-workspace-register-panel .register-filter-actions button {
    min-height: 27px;
    padding: 3px 7px;
    font-size: 10px;
  }
  #document-workspace-register-panel .panel-head {
    margin-bottom: 4px;
  }
  #document-workspace-register-panel .panel-head h3 {
    font-size: 12px;
  }
  #document-workspace-register-panel .panel-head p {
    font-size: 9px;
  }
  #document-workspace-register-panel .register-compact-hint {
    padding: 4px 7px;
    font-size: 9px;
  }
  #document-workspace-register-panel .register-compact-table > :is(thead, tbody) > tr > :is(th, td) {
    min-height: 29px;
    padding: 3px 5px;
    font-size: 10.5px;
    line-height: 23px;
  }
  #document-workspace-register-panel .register-compact-table > thead > tr > th {
    font-size: 9.5px;
  }
  #document-workspace-register-panel .register-compact-table .register-number {
    font-size: 10px;
    line-height: 23px;
  }
  #document-workspace-register-panel .register-compact-table button {
    min-height: 23px;
    padding: 2px 5px;
    font-size: 10px;
  }
  #document-workspace-register-panel .register-detail-header {
    padding: 5px 7px;
    font-size: 10px;
  }
  #document-workspace-register-panel .register-detail-frame > .register-table > tbody > tr[data-register-selected="true"] {
    padding-bottom: 6px;
  }
  #document-workspace-register-panel .register-detail-frame > .register-table > tbody > tr > td {
    padding: 5px 7px;
    font-size: 11px;
  }
  #document-workspace-register-panel .register-detail-frame > .register-table > tbody > tr > td::before {
    margin-bottom: 2px;
    font-size: 9px;
  }

  @media (max-width: 1180px) {
    #document-workspace-register-panel .document-register-filters {
      grid-template-columns: repeat(4, minmax(0, 1fr));
    }
    #document-workspace-register-panel .document-register-filters .register-query { grid-column: span 2; }
  }
  @media (max-width: 760px) {
    #document-workspace > .workflow-tabs button,
    #document-workspace-register-panel .promise-panel-actions button,
    #document-workspace-register-panel .register-mode-switch button,
    #document-workspace-register-panel > .section-intro .primary,
    #document-workspace-register-panel .register-filter-actions button {
      min-height: 42px;
    }
    #document-workspace-register-panel .document-register-filters {
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 6px;
    }
    #document-workspace-register-panel .document-register-filters .register-query { grid-column: 1 / -1; }
    #document-workspace-register-panel .document-register-filters :is(input, select) { min-height: 42px; }
    #document-workspace-register-panel .promise-panel-actions { width: auto; }
  }
  @media (max-width: 500px) {
    #document-workspace-register-panel .document-register-filters { grid-template-columns: 1fr; }
    #document-workspace-register-panel .document-register-filters .register-query { grid-column: auto; }
    #document-workspace-register-panel .register-mode-switch button { flex: 1 1 150px; }
  }
}

/* Late organization/workspace corrections: kept last so bundle defaults cannot expand them. */
@media screen and (min-width: 641px) {
  .organization-workspace .org-structure-grid { grid-template-columns: repeat(3,minmax(0,1fr)) !important; gap: 5px !important; }
  .organization-workspace .org-unit { min-height: 0 !important; padding: 6px 8px !important; }
  .organization-workspace .org-unit > :is(header,p,.org-members),
  .organization-workspace .org-person { min-height: 0 !important; height: auto !important; margin-block: 2px !important; padding-block: 0 !important; }
  .organization-workspace .org-unit > header { display: grid !important; grid-template-columns: auto minmax(0,1fr) auto; align-items: center; gap: 4px 6px !important; }
  .organization-workspace .org-unit > header :is(span,b,small),
  .organization-workspace .org-unit > p,
  .organization-workspace .org-person :is(b,small) { font-size: 13px !important; line-height: 1.35 !important; }
  .organization-workspace .org-person .avatar { width: 25px !important; height: 25px !important; min-height: 25px !important; font-size: 12px !important; }
  .organization-workspace .role-guide-grid { grid-template-columns: repeat(3,minmax(0,1fr)) !important; gap: 5px !important; }
  .organization-workspace .role-guide-grid > * { min-height: 0 !important; height: auto !important; padding: 6px 8px !important; }
  .organization-workspace .role-guide-grid :is(p,small,li) { min-height: 0 !important; margin-block: 2px !important; font-size: 13px !important; line-height: 1.35 !important; }
  .organization-workspace :is(.company-files,.company-bank-register,.company-document-register) { margin-block: 5px !important; }
  .organization-workspace :is(.structured-address-form,.inline-form) { grid-template-columns: repeat(4,minmax(0,1fr)) !important; gap: 5px 7px !important; }
  .organization-workspace :is(.structured-address-form,.inline-form) > .wide { grid-column: span 2 !important; }
  .organization-workspace :is(.structured-address-form,.inline-form) > .form-actions { grid-column: auto !important; }
  .organization-workspace :is(.company-file-registry,.bank-registry) > * { min-height: 0 !important; padding: 5px 7px !important; }
  .organization-workspace .user-row { max-width: 100%; overflow: hidden; }
  .organization-workspace .user-row {
    grid-template-columns: 30px minmax(0,1.35fr) minmax(120px,.9fr) minmax(72px,auto) !important;
    box-sizing: border-box;
    width: 100%;
  }
  .organization-workspace .account-actions {
    width: auto !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }
  .organization-workspace .account-actions > * {
    max-width: 100%;
    overflow-wrap: anywhere;
  }
  .page-content > :is(.government-entry-grid,.workflow-workspace,.groundwater-center) { margin-top: 0 !important; }
  .page-content > :is(.government-entry-grid,.workflow-workspace,.groundwater-center) :is(.top-gap,.form-actions) { margin-top: 5px !important; }
  .page-content > :is(.government-entry-grid,.workflow-workspace,.groundwater-center) .form-grid { grid-template-columns: repeat(4,minmax(0,1fr)); gap: 5px 7px !important; }
  .page-content > :is(.government-entry-grid,.workflow-workspace,.groundwater-center) .form-grid > .wide { grid-column: span 2; }
  .page-content > :is(.government-entry-grid,.workflow-workspace,.groundwater-center) :is(.summary-grid,.kpi-grid) { gap: 5px !important; }
  .page-content > :is(.government-entry-grid,.workflow-workspace,.groundwater-center) :is(.summary-grid,.kpi-grid) > * { min-height: 0 !important; padding: 6px 8px !important; }
}

/* User registry panels are half-width on medium screens; stack controls below the name. */
@media screen and (min-width: 641px) and (max-width: 1600px) {
  .organization-workspace .user-row {
    grid-template-columns: 34px minmax(0, 1fr) !important;
    align-items: center;
    overflow: visible;
  }
  .organization-workspace .user-row .account-role,
  .organization-workspace .user-row .account-actions {
    grid-column: 2 !important;
    width: auto !important;
    max-width: 100% !important;
    justify-self: start;
  }
  .organization-workspace .user-row .account-actions {
    justify-content: flex-start;
  }
  .organization-workspace .user-row .account-actions > * {
    width: auto;
    max-width: 100%;
    overflow-wrap: normal;
  }
}

/* Unified typography: match the compact scale used by Master Registry. */
@media screen and (min-width: 821px) {
  .page-content { font-size: 11px; line-height: 1.35; }
  .page-content :is(h1, .page-title) { font-size: 17px !important; line-height: 1.2 !important; }
  .page-content h2 { font-size: 15px !important; line-height: 1.22 !important; }
  .page-content h3 { font-size: 12px !important; line-height: 1.25 !important; }
  .page-content h4 { font-size: 11px !important; line-height: 1.25 !important; }
  .page-content :is(p, li, dt, dd, label) { font-size: 10px; line-height: 1.3; }
  .page-content small { font-size: 9px; line-height: 1.25; }
  .page-content :is(input, select, textarea) { font-size: 11px; line-height: 1.3; }
  .page-content :is(button, .button, .primary, .ghost) { font-size: 10px; line-height: 1.2; }
  .page-content :is(.panel, .form-panel, .job-card) { padding: 7px 9px; }
  .page-content :is(.panel-head, .section-head) { margin-bottom: 4px; gap: 4px 6px; }
  .page-content :is(.form-grid, .inline-form) { gap: 5px 7px; }
  .page-content :is(.table-wrap, .register-table) :is(th, td) { padding: 3px 5px; font-size: 10.5px; line-height: 1.25; }
  .page-content :is(.table-wrap, .register-table) th { font-size: 9.5px; }
  .page-content :is(.top-gap, .panel + .panel) { margin-top: 6px; }
}

/* User access: keep account fields readable inside the half-width panel. */
@media screen and (min-width: 641px) {
  .organization-workspace .system-account-form {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    align-items: end;
  }
  .organization-workspace .system-account-form > .wide,
  .organization-workspace .system-account-form > .system-account-note,
  .organization-workspace .system-account-form > .form-actions {
    grid-column: 1 / -1 !important;
  }
  .organization-workspace .system-account-form :is(input, select) {
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
  }
  .organization-workspace .system-account-form .system-account-note {
    min-height: 15px;
    margin: 0;
  }
  .organization-workspace .system-account-form .form-actions {
    justify-content: flex-end;
    margin: 0;
    padding-top: 0;
  }
  .organization-workspace .user-list,
  .organization-workspace .user-row {
    width: 100%;
    min-width: 0;
  }
  .organization-workspace .user-row .account-role {
    box-sizing: border-box;
    width: 100%;
  }
}

/* Cost and inventory need slightly wider data typography than dense registries. */
@media screen {
  .page-content:has(> .cost-tabs) { font-size: 12px; }
  .page-content:has(> .cost-tabs) > .section-intro h2 { font-size: 17px !important; }
  .page-content:has(> .cost-tabs) > .section-intro p { font-size: 10px; }
  .page-content:has(> .cost-tabs) .cost-kpis { gap: 8px; }
  .page-content:has(> .cost-tabs) .cost-kpis > * { min-height: 78px; padding: 9px 11px; }
  .page-content:has(> .cost-tabs) .cost-kpis :is(span, small) { font-size: 9.5px; line-height: 1.25; }
  .page-content:has(> .cost-tabs) .cost-kpis :is(strong, b) { font-size: 18px; line-height: 1.2; }
  .page-content:has(> .cost-tabs) > .cost-tabs { gap: 5px; }
  .page-content:has(> .cost-tabs) > .cost-tabs > button { min-height: 32px; padding: 5px 9px; font-size: 10.5px; }
  .page-content:has(> .cost-tabs) > .panel { padding: 9px 11px; }
  .page-content:has(> .cost-tabs) > .panel :is(h2, h3) { font-size: 13px !important; }
  .page-content:has(> .cost-tabs) > .panel p { font-size: 10px; }
  .page-content:has(> .cost-tabs) .table-wrap table { min-width: 820px; table-layout: auto; }
  .page-content:has(> .cost-tabs) .table-wrap :is(th, td) { padding: 5px 7px; font-size: 10.5px; line-height: 1.3; }
  .page-content:has(> .cost-tabs) .table-wrap th { font-size: 9.5px; white-space: nowrap; }
  .page-content:has(> .cost-tabs) .table-wrap td:nth-child(1) { white-space: nowrap; }
  .page-content:has(> .cost-tabs) .table-wrap td:nth-child(2) { min-width: 250px; white-space: normal; overflow-wrap: anywhere; }
  .page-content:has(> .cost-tabs) :is(input, select, textarea) { font-size: 11px; }
  .page-content:has(> .cost-tabs) :is(button, .button, .primary, .ghost) { font-size: 10.5px; }
}
.system-account-form .contract-expiry[hidden]{display:none!important}
/* Local readability adjustment: increase the site's base text size by 6px. */
@media screen {
  :root, body, button, input, select, textarea {
    --font-thai: "Sarabun", "Noto Sans Thai", Tahoma, Arial, sans-serif;
    font-family: "Sarabun", "Noto Sans Thai", Tahoma, Arial, sans-serif;
  }
  html { font-size: 22px !important; }
  body { font-size: calc(var(--ui-body-size, 14px) + 6px) !important; }
}
@media screen and (min-width: 821px) {
  :root { --ui-body-size: 20px; }
  html, body { font-size: 20px !important; }
}
@media screen and (max-width: 760px) {
  html, body { font-size: 22px !important; }
}

/* Bring compact secondary text up to a readable size without enlarging headings again. */
@media screen {
  body :where(small, .small, label > span, .panel-head p, .section-intro p,
    .form-grid label > span, .table-wrap th, .table-wrap td, button,
    input, select, textarea, .mini-action) {
    font-size: calc(1em + 2px) !important;
  }

  /* Keep every main and nested heading visually distinct across the system. */
  body :where(h1, h2, h3, h4, h5, h6, legend, [role="heading"],
    .section-title, .section-head, .section-intro h1, .section-intro h2,
    .section-intro h3, .panel-head h1, .panel-head h2, .panel-head h3,
    .card-head h1, .card-head h2, .card-head h3, .table-wrap th) {
    font-weight: 700 !important;
  }

  /* Prevent compact page-specific rules from making everyday text unreadably small. */
  body :where(p, li, td, th, label, button, input, select, textarea, a,
    .card-title, .section-title, .section-head, .panel-head) {
    font-size: max(16px, 1em) !important;
  }

  /* Keep the primary sidebar compact while leaving page content unchanged. */
  body :where(.sidebar button, .sidebar a, .sidebar nav, .sidebar .menu-item) {
    font-size: max(15px, calc(1em - 1px)) !important;
  }

  /* Trial: make customer/vendor names easier to scan in the register. */
  body :where(.party-main b, .party-contact b) {
    font-size: 15px !important;
  }

  /* Keep the compact register action buttons from becoming oversized. */
  body :where(.party-actions button) {
    font-size: 13px !important;
  }

  /* Trial: enlarge the person's displayed name in employee listings. */
  body :where(.employee-person b) {
    font-size: 16px !important;
  }

  body :where(.employee-person span) {
    font-size: 10px !important;
  }

  body :where(.employee-code span) {
    font-size: 9px !important;
  }

  body :where(.employee-code i) {
    font-size: 12px !important;
  }

  /* Trial: enlarge account names in the user registry. */
  body :where(.org-person strong) {
    font-size: 13px !important;
  }

  /* User registry rows use .user-list for the displayed account name. */
  body :where(.user-list b) {
    font-size: 13px !important;
  }

  /* Trial: improve readability of the role-permission guide cards. */
  body :where(.role-guide-grid header small) { font-size: 11px !important; }
  body :where(.role-guide-grid article > p) { font-size: 12px !important; }
  body :where(.role-guide-grid dt) { font-size: 10px !important; }
  body :where(.role-guide-grid dd) { font-size: 11px !important; }

  /* Trial: enlarge employee document catalog text for easier scanning. */
  body :where(.employee-document-catalog b) { font-size: 14px !important; }
  body :where(.employee-document-catalog span) { font-size: 13px !important; }
  body :where(.employee-document-catalog small) { font-size: 12px !important; }

  /* Company document catalog shown in the system/company settings panel. */
  body :where(.company-document-catalog b) { font-size: 14px !important; }
  body :where(.company-document-catalog span) { font-size: 13px !important; }
  body :where(.company-document-catalog small) { font-size: 12px !important; }

  /* Actual company-document rows use company-file-identity. */
  body :where(.company-file-identity b) { font-size: 15px !important; }
  body :where(.company-file-identity span) { font-size: 13px !important; }
  body :where(.company-file-identity strong) { font-size: 13px !important; }
  body :where(.company-file-status span) { font-size: 12px !important; }
  body :where(.company-file-status b) { font-size: 13px !important; }

  /* Make bank account details and attachment actions readable in the company panel. */
  body :where(.bank-identity b) { font-size: 14px !important; }
  body :where(.bank-identity span) { font-size: 11px !important; }
  body :where(.bank-identity strong) { font-size: 13px !important; }
  body :where(.bank-file-status span, .bank-file-status small) { font-size: 10px !important; }
  body :where(.bank-file-status b) { font-size: 11px !important; }
  body :where(.bank-file-actions a, .bank-file-actions button) { font-size: 11px !important; }

  /* Government project form: raise the visible form text by one pixel while
     keeping the adjustment scoped to the create-project panel. */
  body .government-entry-grid .form-panel :where(h1, h2, h3, h4, h5, h6) {
    font-size: 13px !important;
  }
  body .government-entry-grid .form-panel :where(p, small, .workflow-steps, .helper-text) {
    font-size: 17px !important;
  }
  body .government-entry-grid .form-panel .inline-form label,
  body .government-entry-grid .form-panel .inline-form label > span {
    font-size: 13px !important;
  }
  body .government-entry-grid .form-panel .inline-form :where(input, select, textarea, button) {
    font-size: 14px !important;
  }
  /* Outrank the compact government-form defaults so the +1px change applies
     to both captions and controls in the actual form grid. */
  .page-content .government-entry-grid section.form-panel form.inline-form > label,
  .page-content .government-entry-grid section.form-panel form.inline-form > label > span {
    font-size: 13px !important;
  }
  .page-content .government-entry-grid section.form-panel form.inline-form :where(input, select, textarea, button) {
    font-size: 14px !important;
  }

  /* JOB register: enlarge only the project/job name, leaving the reference
     number and supporting metadata at their existing compact sizes. */
  body :where(.job-register-row .job-name-cell > b) {
    font-size: 14px !important;
  }
  body :where(.job-register-row .job-name-cell > span) {
    font-size: 13px !important;
    font-weight: 700 !important;
  }
  body :where(.job-register-row .job-money-cell > b) {
    font-size: 14px !important;
  }
  body :where(.job-register-row .job-money-cell > span) {
    font-size: 11px !important;
  }

  /* The project/JOB relationship register is now shown under the government
     project section; keep the former JOB-opening copy hidden to avoid dupes. */
  #job-opening > .panel.form-panel > .job-project-relations {
    display: none !important;
  }

  /* Relationship register: increase every visible text level by 5px. */
  body .government-entry-grid .job-project-relations .job-project-relations-head b,
  body .government-entry-grid .job-project-relations article > div > b {
    font-size: 18px !important;
  }
  body .government-entry-grid .job-project-relations .job-project-relations-head span,
  body .government-entry-grid .job-project-relations .job-project-relations-head strong {
    font-size: 16px !important;
  }
  body .government-entry-grid .job-project-relations article > div > span,
  body .government-entry-grid .job-project-relations article > i {
    font-size: 15px !important;
  }
  body .government-entry-grid .job-project-relations article > div > small {
    font-size: 19px !important;
  }

  /* Document creation form: enlarge the visible labels and controls by 2px. */
  body #document-workspace-create-panel :where(h1, h2, h3, h4, h5, h6) {
    font-size: 14px !important;
  }
  body #document-workspace-create-panel :where(label, label > span, b) {
    font-size: 13px !important;
  }
  body #document-workspace-create-panel :where(input, select, textarea, button) {
    font-size: 14px !important;
  }
  body #document-workspace-create-panel :where(small) {
    font-size: 15px !important;
  }
  #document-workspace-create-panel form label,
  #document-workspace-create-panel form label > span {
    font-size: 13px !important;
  }
  #document-workspace-create-panel form input,
  #document-workspace-create-panel form select,
  #document-workspace-create-panel form textarea,
  #document-workspace-create-panel form button {
    font-size: 14px !important;
  }
  .page-content #document-workspace-create-panel:not([hidden]) label,
  .page-content #document-workspace-create-panel:not([hidden]) label > span {
    font-size: 13px !important;
  }
  .page-content #document-workspace-create-panel:not([hidden]) :is(input:not([type="checkbox"]):not([type="radio"]), select, textarea) {
    font-size: 14px !important;
  }
  .page-content #document-workspace-create-panel:not([hidden]) :is(button, .button, a.primary, a.ghost) {
    font-size: 13px !important;
  }
  .page-content #document-workspace-create-panel:not([hidden]) :where(h1, h2, h3, h4, h5, h6) {
    font-size: 16px !important;
  }
  .page-content #document-workspace-create-panel:not([hidden]) label,
  .page-content #document-workspace-create-panel:not([hidden]) label > span,
  .page-content #document-workspace-create-panel:not([hidden]) b {
    font-size: 15px !important;
  }
  .page-content #document-workspace-create-panel:not([hidden]) :is(input:not([type="checkbox"]):not([type="radio"]), select, textarea) {
    font-size: 16px !important;
  }
  .page-content #document-workspace-create-panel:not([hidden]) :is(button, .button, a.primary, a.ghost) {
    font-size: 15px !important;
  }
  .page-content #document-workspace-create-panel:not([hidden]) small {
    font-size: 17px !important;
  }

  /* NB.1 preparation page: increase the visible file heading, section rows,
     labels, and controls by 2px for the larger form shown on screen. */
  body .nb1-preparation-form .nb1-prep-intro > b {
    font-size: 22px !important;
  }
  body .nb1-preparation-form details > summary {
    font-size: 13px !important;
  }
  body .nb1-preparation-form details > summary b {
    font-size: 16px !important;
  }
  body .nb1-preparation-form :where(label, label > span) {
    font-size: 18px !important;
  }
  body .nb1-preparation-form :where(input, select, textarea, button) {
    font-size: 14px !important;
  }
  body .nb1-preparation-form :where(small) {
    font-size: 20px !important;
  }
  .page-content .nb1-preparation-form .nb1-prep-intro b {
    font-size: 22px !important;
  }
  .page-content .nb1-preparation-form details > summary b {
    font-size: 16px !important;
  }
  .page-content .nb1-preparation-form :is(input, select, textarea, button) {
    font-size: 14px !important;
  }
  .page-content .nb1-preparation-form:not([hidden]) :is(input, select, textarea, button) {
    font-size: 14px !important;
  }
  .page-content .nb1-preparation-form:not([hidden]) details > summary b {
    font-size: 16px !important;
  }
  html body #root .nb1-preparation-form.nb1-source-form .inline-form :is(input:not([type="checkbox"]):not([type="radio"]), select, textarea, button) {
    font-size: 14px !important;
  }
  html body #root .nb1-preparation-form > form > details.nb1-group-primary > summary > b {
    font-size: 16px !important;
  }
  html body #root .nb1-preparation-form .nb1-prep-intro b {
    font-size: 24px !important;
  }
  html body #root .nb1-preparation-form > form > details > summary {
    font-size: 15px !important;
  }
  html body #root .nb1-preparation-form > form > details > summary > b {
    font-size: 18px !important;
  }
  html body #root .nb1-preparation-form > form > details > summary > span {
    font-size: 15px !important;
  }
  html body #root .nb1-preparation-form > form > details.nb1-group-primary > summary > b,
  html body #root .nb1-preparation-form > form > details > summary > b {
    font-size: 18px !important;
  }
  html body #root .nb1-preparation-form > form > details:nth-of-type(2) label,
  html body #root .nb1-preparation-form > form > details:nth-of-type(2) label > span {
    font-size: 20px !important;
  }
  html body #root .nb1-preparation-form > form > details:nth-of-type(3) label,
  html body #root .nb1-preparation-form > form > details:nth-of-type(3) label > span {
    font-size: 17px !important;
  }
  /* NB.1 section 2 address layout: place postal code on the second row. */
  html body #root .nb1-preparation-form > form > details:nth-of-type(3) .inline-form:has(> label > [name="applicantPostcode"]) > label:has(> [name="applicantPostcode"]) {
    grid-column: 1 / span 2 !important;
    grid-row: 2 !important;
  }
  html body #root .nb1-preparation-form .nb1-static-address-group .inline-form > label:has(> [name="applicantPostcode"]) {
    grid-column: 1 / span 2 !important;
    grid-row: 2 !important;
    position: relative !important;
    top: 8px !important;
  }
  html body #root .nb1-preparation-form [name="landDocumentType"] {
    width: 420px !important;
    min-width: 420px !important;
    max-width: 420px !important;
    white-space: nowrap !important;
  }
  html body #root .nb1-preparation-form label:has(> [name="landDocumentType"]) {
    min-width: 420px !important;
  }
  /* NB.1 draft summary/checklist: increase its headings and details by 3px. */
  html body #root .nb1-additional-checklist .groundwater-document-prep-grid :is(b, strong, span, p, small, a, label, select, button) {
    font-size: 14px !important;
  }
  html body #root .nb1-additional-checklist .groundwater-document-prep-grid > article > p,
  html body #root .nb1-additional-checklist .groundwater-document-prep-grid > article a {
    font-size: 14px !important;
  }
  html body #root .nb1-additional-checklist .groundwater-document-prep-grid :is(b, strong, span, p, small, a, label, select, button) {
    font-size: 16px !important;
  }
  html body #root .nb1-additional-checklist .groundwater-document-prep-grid > article > p,
  html body #root .nb1-additional-checklist .groundwater-document-prep-grid > article a {
    font-size: 16px !important;
  }
  html body #root .nb1-preparation-form .permit-tracking-nb1 .nb1-tracking-details > summary,
  html body #root .nb1-preparation-form .permit-tracking-nb1 .nb1-tracking-details > summary > b,
  html body #root .nb1-preparation-form .permit-tracking-nb1 .nb1-tracking-details > summary > span {
    font-size: 15px !important;
  }
  html body #root .nb1-preparation-form .permit-tracking-nb1 .nb1-tracking-details > summary {
    font-size: 15px !important;
  }
  html body #root .nb1-preparation-form .permit-tracking-nb1 .nb1-tracking-details > summary > b {
    font-size: 18px !important;
  }
  html body #root .nb1-preparation-form label > span {
    font-size: 17px !important;
  }
  /* NB.1 applicant options: fit each select to its longest option text. */
  html body #root .nb1-preparation-form label.pst-auto-fit-field:has(select option[value="SAME"]) select {
    width: 300px !important;
    min-width: 300px !important;
    max-width: 300px !important;
  }
  html body #root .nb1-preparation-form label.pst-auto-fit-field:has(select option[value="REPRESENTATIVE"]) select {
    width: 260px !important;
    min-width: 260px !important;
    max-width: 260px !important;
  }
  html body #root .nb1-preparation-form label.pst-auto-fit-field:has(select option[value="REPRESENTATIVE"]) {
    position: static !important;
    left: auto !important;
    flex: 0 0 260px !important;
    width: 260px !important;
  }
  html body #root .nb1-preparation-form label.pst-auto-fit-field:has(select option[value="SAME"]) {
    flex: 0 0 300px !important;
    width: 300px !important;
  }
  html body #root .nb1-preparation-form .inline-form > label.pst-auto-fit-field:has(select option[value="SAME"]) {
    flex: 0 0 300px !important;
    min-width: 300px !important;
    width: 300px !important;
  }
  html body #root .nb1-preparation-form .inline-form > label.pst-auto-fit-field:has(select option[value="REPRESENTATIVE"]) {
    flex: 0 0 260px !important;
    min-width: 260px !important;
    width: 260px !important;
  }
  html body #root .nb1-preparation-form label,
  html body #root .nb1-preparation-form label > span {
    font-size: 17px !important;
  }
  html body #root .nb1-preparation-form.nb1-source-form .inline-form :is(input:not([type="checkbox"]):not([type="radio"]), select, textarea, button) {
    font-size: 16px !important;
  }
  /* Keep every NB.1 field heading at the requested reduced size, including
     the applicant and address groups whose section-specific rules are more specific. */
  html body #root .nb1-preparation-form > form > details label,
  html body #root .nb1-preparation-form > form > details label > span {
    font-size: 17px !important;
  }
  html body #root section.nb1-preparation-form label,
  html body #root section.nb1-preparation-form label > span {
    font-size: 17px !important;
  }
  html body #root section.nb1-preparation-form details .inline-form > label,
  html body #root section.nb1-preparation-form details .inline-form > label > span {
    font-size: 17px !important;
  }
  /* Keep every subsection heading in the daily field workspace consistent. */
  html body #root .groundwater-center .interval-panel > summary h3,
  html body #root .groundwater-center .interval-panel h4,
  html body #root .groundwater-center .gwf-daily-work-picker > summary {
    font-size: 16px !important;
    line-height: 1.25 !important;
    font-weight: 700 !important;
  }
  html body #root .groundwater-center .interval-panel label,
  html body #root .groundwater-center .interval-panel label > span {
    font-size: 16px !important;
    line-height: 1.2 !important;
  }
  /* Use the worker-count heading as the shared size for the other groundwater tabs. */
  html body #root .groundwater-center .nb1-preparation-form label,
  html body #root .groundwater-center .nb1-preparation-form label > span,
  html body #root .groundwater-center .permit-tracking label,
  html body #root .groundwater-center .permit-tracking label > span,
  html body #root .groundwater-center .groundwater-file-form label,
  html body #root .groundwater-center .groundwater-file-form label > span {
    font-size: 16px !important;
    line-height: 1.2 !important;
  }
  html body #root .permit-tracking .permit-form > label > span,
  html body #root .permit-tracking .permit-form > label,
  html body #root section.nb1-preparation-form label > span,
  html body #root section.nb1-preparation-form label {
    font-size: 16px !important;
    line-height: 1.2 !important;
  }
  html body #root .nb4-tracking-form > label,
  html body #root .nb4-tracking-form > label > span {
    font-size: 16px !important;
    line-height: 1.2 !important;
  }
  /* Match the worker-count sample's normal (thin) weight for subsection fields. */
  html body #root .groundwater-case-picker > label,
  html body #root .groundwater-case-picker > label > span,
  html body #root section.nb1-preparation-form label,
  html body #root section.nb1-preparation-form label > span,
  html body #root .permit-tracking .permit-form > label,
  html body #root .permit-tracking .permit-form > label > span,
  html body #root .nb4-tracking-form > label,
  html body #root .nb4-tracking-form > label > span {
    font-weight: 400 !important;
  }
  html body #root section.nb1-preparation-form details .inline-form > label,
  html body #root section.nb1-preparation-form details .inline-form > label > span {
    font-size: 16px !important;
    font-weight: 400 !important;
  }
  /* Match the compact, aligned field layout used by NB.1 for the NB.4 form. */
  @media (min-width: 761px) {
    html body #root .permit-tracking-nb4 .permit-form {
      grid-template-columns: repeat(24, minmax(0, 1fr)) !important;
      gap: 3px 5px !important;
      padding: 4px 6px !important;
    }
    html body #root .permit-tracking-nb4 .permit-form > label {
      grid-column: span 4 !important;
      gap: 3px !important;
      min-width: 0 !important;
    }
    html body #root .permit-tracking-nb4 .permit-form > label:nth-child(1),
    html body #root .permit-tracking-nb4 .permit-form > label:nth-child(4),
    html body #root .permit-tracking-nb4 .permit-form > label:nth-child(5) {
      grid-column: span 4 !important;
    }
    html body #root .permit-tracking-nb4 .permit-form > label:nth-child(1) .pst-thai-date-button,
    html body #root .permit-tracking-nb4 .permit-form > label:nth-child(4) .pst-thai-date-button,
    html body #root .permit-tracking-nb4 .permit-form > label:nth-child(5) .pst-thai-date-button {
      width: 145px !important;
      min-width: 145px !important;
      max-width: 100% !important;
      white-space: nowrap !important;
    }
    html body #root .permit-tracking-nb4 .permit-form > label:nth-child(2),
    html body #root .permit-tracking-nb4 .permit-form > label:nth-child(3) {
      grid-column: span 4 !important;
    }
    html body #root .permit-tracking-nb4 .permit-form > .permit-actions {
      grid-column: span 4 !important;
      gap: 7px !important;
      padding-top: 0 !important;
    }
    html body #root .permit-tracking-nb4 .permit-form > label > span {
      min-height: 18px !important;
      margin-bottom: 0 !important;
      font-size: 17px !important;
      line-height: 1.15 !important;
    }
    html body #root .permit-tracking-nb4 .permit-form :is(input, select, .pst-thai-date-button) {
      min-height: 30px !important;
      padding: 4px 7px !important;
      font-size: 16px !important;
    }
  }
}
/* Keep long legal company names readable in the company settings form. */
@media (min-width: 821px) {
  .organization-workspace .structured-address-form > label:has(> input[name="legalNameTh"]),
  .organization-workspace .structured-address-form > label:has(> input[name="legalNameEn"]) {
    grid-column: span 2 !important;
    width: 420px !important;
    max-width: 100% !important;
    min-width: 0 !important;
    justify-self: stretch !important;
  }
  .organization-workspace .structured-address-form > label:has(> input[name="legalNameTh"]) > input,
  .organization-workspace .structured-address-form > label:has(> input[name="legalNameEn"]) > input {
    width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }
}

/* Keep the address section compact by hiding its explanatory helper text. */
.organization-workspace .structured-address-head > span {
  display: none !important;
}

.organization-workspace .structured-address-head > b {
  display: none !important;
}

.organization-workspace .employee-subtabs {
  display: flex;
  gap: 4px;
  margin: 0 0 6px;
  padding: 0;
}
.organization-workspace .employee-subtabs button {
  min-height: 28px;
  padding: 4px 10px;
  border: 1px solid #cbd8d4;
  border-radius: 6px;
  background: #f5f8f7;
  color: #24584c;
  font-size: 10px;
}
.organization-workspace .employee-subtabs button.active {
  background: #185b4c;
  border-color: #185b4c;
  color: #fff;
}
.organization-workspace .employee-workspace .party-mode {
  display: none !important;
}

@media (min-width: 821px) {
  .organization-workspace .structured-address-form > label:has(> input[name="addressNo"]),
  .organization-workspace .structured-address-form > label:has(> input[name="addressMoo"]) {
    width: 100px !important;
    max-width: 100% !important;
  }
  .organization-workspace .structured-address-form > label:has(> input[name="addressNo"]) > input,
  .organization-workspace .structured-address-form > label:has(> input[name="addressMoo"]) > input {
    width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }
  .organization-workspace .structured-address-form > label:has(> input[name="addressBuilding"]) {
    width: 420px !important;
    max-width: 100% !important;
  }
  .organization-workspace .structured-address-form > label:has(> input[name="addressBuilding"]) > input {
    width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }
  .organization-workspace .structured-address-form > label:has(> select[name="addressSubdistrict"]) {
    grid-column: 1 !important;
  }
  .organization-workspace .structured-address-form > label:has(> input[name="addressPostcode"]) {
    grid-column: 2 !important;
    width: 100px !important;
    max-width: 100% !important;
  }
  .organization-workspace .structured-address-form > label:has(> input[name="addressPostcode"]) > input {
    width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }

  .organization-workspace .structured-address-form > .form-actions {
    grid-column: 1 / -1 !important;
    width: 100% !important;
    justify-self: stretch !important;
    justify-content: flex-end !important;
  }
}
.system-settings-tab{display:block}.nested-settings-tabs{margin-bottom:12px;display:flex;gap:6px;overflow-x:auto;white-space:nowrap;padding-bottom:3px}.nested-settings-tabs button{flex:0 0 auto}.system-settings-workspace{display:block}.system-settings-notice{margin:10px 0;padding:10px 14px;border-left:4px solid #d39a2a;background:#fff7e8;color:#5f4a26;border-radius:6px}.system-settings-group{margin-top:14px;padding:14px}.system-settings-group>h3{margin:0 0 10px;color:#062033}.system-settings-list{display:grid;gap:8px}.system-setting-row{display:grid;grid-template-columns:minmax(240px,1fr) minmax(420px,2fr);gap:14px;align-items:center;padding:10px 0;border-bottom:1px solid #e4e9ed}.system-setting-row:last-child{border-bottom:0}.system-setting-copy{display:grid;gap:3px}.system-setting-copy b{font-size:calc(1.05rem - 3px)}.system-setting-copy b.compact{font-size:calc(1.05rem - 3px)}.system-setting-copy small{color:#64748b}.system-setting-editor{display:grid;grid-template-columns:minmax(150px,220px) minmax(180px,1fr) auto;gap:8px;align-items:center}.system-setting-editor>input,.system-setting-editor>select{min-height:38px}.system-setting-reason{min-width:0}.system-setting-toggle{display:flex;align-items:center;gap:8px;min-height:38px}.system-setting-toggle input{width:18px;height:18px}.system-settings-group button{white-space:nowrap}@media(max-width:900px){.system-setting-row{grid-template-columns:1fr}.system-setting-editor{grid-template-columns:1fr}.system-settings-group{padding:10px}}
.system-audit-list{display:grid;gap:0}.system-audit-list article{display:grid;grid-template-columns:170px 100px minmax(220px,1fr) minmax(180px,auto);gap:10px;align-items:center;padding:10px 0;border-bottom:1px solid #e4e9ed}.system-audit-list article:last-child{border-bottom:0}.system-audit-list time,.system-audit-list span{color:#64748b;font-size:.9rem}@media(max-width:900px){.system-audit-list article{grid-template-columns:1fr 1fr}.system-audit-list strong,.system-audit-list span{grid-column:1/-1}}

.sidebar nav button.sidebar-logout{margin-top:8px;border-top:1px solid #ffffff16;border-radius:0;color:#d6a5a0}.sidebar nav button.sidebar-logout:hover{color:#fff;background:#ffffff12}.sidebar nav button.sidebar-logout i{color:#d6a5a0}

/* Match item/service/material registry typography to the customer/vendor registry. */
body :where(.local-item-font-match .item-filters label span) { font-size: 18px !important; }
body :where(.local-item-font-match .item-filters input, .local-item-font-match .item-filters select) { font-size: 16px !important; }
body :where(.local-item-font-match .item-name b, .local-item-font-match .item-unit b, .local-item-font-match .item-use b) { font-size: 15px !important; }
body :where(.local-item-font-match .item-name span, .local-item-font-match .item-unit span, .local-item-font-match .item-use span) { font-size: 9px !important; }
body :where(.local-item-font-match .purpose-value span) { font-size: 9px !important; }
body :where(.local-item-font-match .purpose-value b) { font-size: 15px !important; }
body :where(.local-item-font-match .purpose-value small) { font-size: 14px !important; }
body :where(.local-item-font-match .party-actions button) { font-size: 13px !important; }

/* Keep the government quotation/project registries inside the page width.
   The project register contains wide detail rows and cannot fit reliably in
   the narrow right-hand grid column used by the original desktop layout. */
@media screen and (min-width: 821px) {
  .page-content > .government-entry-grid {
    grid-template-columns: minmax(0, 1fr) !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }
  .page-content > .government-entry-grid > * {
    grid-column: 1 !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }
  .page-content > .government-entry-grid .government-project-register,
  .page-content > .government-entry-grid .government-project-list,
  .page-content > .government-entry-grid .government-project-summary,
  .page-content > .government-entry-grid .government-project-details,
  .page-content > .government-entry-grid .job-project-relations {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }
  .page-content > .government-entry-grid .table-wrap {
    max-width: 100% !important;
    overflow-x: auto !important;
  }
}

/* Match the project cards to the readable scale used by the customer/vendor
   registry while keeping compact status badges unchanged. */
@media screen {
  body :where(.government-project-register .government-project-head b) {
    font-size: 11px !important;
  }
  body :where(.government-project-register .government-project-head small) {
    font-size: 9px !important;
  }
  body :where(.government-project-register .government-project-title) {
    font-size: 15px !important;
    line-height: 1.35 !important;
  }
  body :where(.government-project-register .government-project-brief b) {
    font-size: 12px !important;
    line-height: 1.3 !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
  }
  body :where(.government-project-register .government-expand-label) {
    font-size: 13px !important;
    line-height: 1.2 !important;
  }
  body :where(.government-project-register .government-project-list p) {
    font-size: 9px !important;
    line-height: 1.4 !important;
  }
  body :where(.government-project-register .government-project-meta span) {
    font-size: 9px !important;
    line-height: 1.35 !important;
  }
  body :where(.government-project-register .government-project-meta b) {
    font-size: 14px !important;
    line-height: 1.25 !important;
  }
  body :where(.government-project-register .government-edit-section b) {
    font-size: 15px !important;
  }
  body :where(.government-project-register .government-edit-section span) {
    font-size: 9px !important;
  }
  body :where(.government-project-register .government-bid-prices label span,
    .government-project-register .government-contract-dates label span,
    .government-project-register .government-contract-summary span) {
    font-size: 9px !important;
  }
  body :where(.government-project-register .government-contract-summary b,
    .government-project-register .government-contract-dates b) {
    font-size: 14px !important;
  }
  body :where(.government-project-register .government-project-files-head b) {
    font-size: 15px !important;
  }
  body :where(.government-project-register .government-project-files-head span,
    .government-project-register .government-project-upload-message,
    .government-project-register .government-project-file-list a,
    .government-project-register .government-project-file-list span,
    .government-project-register .open-job-rule) {
    font-size: 9px !important;
  }
}

/* Display a visual sequence number for each project card without changing
   the real project reference or government project number. */
body :where(.government-project-register .government-project-summary) {
  position: relative;
  padding-left: 42px !important;
}
body :where(.government-project-register .government-project-sequence) {
  position: absolute;
  left: 0;
  top: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border: 1px solid #c8d8d3;
  border-radius: 7px;
  background: #edf5f2;
  color: #185b4c;
  font-size: 13px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
}

/* Shared sequence badges for the main registries. The badge is visual only;
   the existing customer, asset, JOB, document, payment, and groundwater
   identifiers remain unchanged. */
body :where(.registry-sequence-row) {
  position: relative;
}
body :where(.registry-sequence-anchor) {
  position: relative;
  padding-left: 42px !important;
}
body :where(.registry-sequence) {
  position: absolute;
  left: 0;
  top: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  box-sizing: border-box;
  border: 1px solid #c8d8d3;
  border-radius: 7px;
  background: #edf5f2;
  color: #185b4c;
  font-size: 13px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  pointer-events: none;
}
body :where(.registry-sequence-anchor) > .registry-sequence {
  top: 7px;
}
body :where(.register-category-item > .registry-sequence-anchor) {
  padding-left: 42px !important;
}
body :where(.register-category-item > .registry-sequence-anchor > .registry-sequence) {
  top: 5px;
}

/* Make the government project reference, official project number, and bid
   result easy to scan together in each project card. */
body :where(.government-project-register .government-project-head b) {
  font-size: 13px !important;
}
body :where(.government-project-register .government-project-head small) {
  font-size: 11px !important;
}
body :where(.government-project-register .government-status-stack strong) {
  font-size: 13px !important;
  line-height: 1.25 !important;
}

/* Bring the remaining very small project-card labels up to the same readable
   scale without changing the larger project title and value text. */
body :where(.government-project-register .government-project-list p,
  .government-project-register .government-project-meta span,
  .government-project-register .government-edit-section span,
  .government-project-register .government-bid-prices label span,
  .government-project-register .government-contract-dates label span,
  .government-project-register .government-contract-summary span,
  .government-project-register .government-project-files-head span,
  .government-project-register .government-project-upload-message,
  .government-project-register .government-project-file-list a,
  .government-project-register .government-project-file-list span,
  .government-project-register .open-job-rule) {
  font-size: 12px !important;
  line-height: 1.4 !important;
}

/* Keep the captions above government-project form controls regular weight;
   section headings and entered values retain their existing emphasis. */
body :where(.page-content .government-entry-grid section.form-panel form.inline-form > label,
  .page-content .government-entry-grid section.form-panel form.inline-form > label > span) {
  font-weight: 400 !important;
}
body .page-content .government-entry-grid section.form-panel form.inline-form > label,
body .page-content .government-entry-grid section.form-panel form.inline-form > label > span {
  font-weight: 400 !important;
}

/* The expanded project card has its own edit form (separate from the create
   form above). Match its field captions to the regular-weight copy used next
   to the “ผลการประเมินและสัญญา” section heading. */
body .government-project-register form label,
body .government-project-register form label > span {
  font-weight: 400 !important;
}

/* Align the expanded government-project edit fields as a compact four-column
   form: reference/contract, full-width project name, then agency details and
   procurement method on one row. */
@media screen and (min-width: 821px) {
  body .government-project-register .government-project-details form
    > .government-project-edit-grid:has(> label > input[name="governmentProjectNo"]) {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 5px 7px !important;
  }
  body .government-project-register .government-project-details form
    > .government-project-edit-grid:has(> label > input[name="governmentProjectNo"])
    > label:has(> input[name="governmentProjectNo"]) {
    grid-column: 1 !important;
  }
  body .government-project-register .government-project-details form
    > .government-project-edit-grid:has(> label > input[name="governmentProjectNo"])
    > label:has(> input[name="governmentContractNo"]) {
    grid-column: 2 !important;
  }
  body .government-project-register .government-project-details form
    > .government-project-edit-grid:has(> label > input[name="governmentProjectNo"])
    > label:has(> input[name="name"]) {
    grid-column: 1 / -1 !important;
    width: 100% !important;
  }
  body .government-project-register .government-project-details form
    > .government-project-edit-grid:has(> label > input[name="governmentProjectNo"])
    > label:has(> select[name="customerId"]) {
    grid-column: 1 !important;
  }
  body .government-project-register .government-project-details form
    > .government-project-edit-grid:has(> label > input[name="governmentProjectNo"])
    > label:has(> input[name="agency"]) {
    grid-column: 2 !important;
  }
  body .government-project-register .government-project-details form
    > .government-project-edit-grid:has(> label > input[name="governmentProjectNo"])
    > label:has(> input[name="agencyHeadPosition"]) {
    grid-column: 3 !important;
  }
  body .government-project-register .government-project-details form
    > .government-project-edit-grid:has(> label > input[name="governmentProjectNo"])
    > label:has(> select[name="procurementMethod"]) {
    grid-column: 4 !important;
  }
  body .government-project-register .government-project-details form
    > .government-project-edit-grid:has(> label > input[name="governmentProjectNo"])
    > label:has(> input[name="name"]) > input {
    width: 100% !important;
  }
  body .government-project-register .government-project-details form
    > .government-project-edit-grid:has(> label > input[name="governmentProjectNo"])
    > label:has(> input[name="agencyAddress"]) {
    grid-column: 1 / -1 !important;
    width: 100% !important;
  }
  body .government-project-register .government-project-details form
    > .government-project-edit-grid:has(> label > input[name="governmentProjectNo"])
    > label:has(> input[name="agencyAddress"]) > input {
    width: 100% !important;
  }
  body .government-project-register .government-project-details form
    > .government-project-edit-grid:has(> label > input[name="governmentProjectNo"]) {
    grid-template-columns: minmax(0, 1fr) 350px 350px minmax(0, 1fr) !important;
  }
  body .government-project-register .government-project-details form
    > .government-project-edit-grid:has(> label > input[name="governmentProjectNo"])
    > label:has(> input[name="agency"]),
  body .government-project-register .government-project-details form
    > .government-project-edit-grid:has(> label > input[name="governmentProjectNo"])
    > label:has(> input[name="agencyHeadPosition"]) {
    width: 350px !important;
    max-width: 350px !important;
  }
}

/* Readable type scale for the organization overview shown on the dashboard. */
@media screen {
  .organization-workspace .section-intro h2,
  .organization-workspace .panel-head h3 {
    font-size: var(--ph-font-heading, 16px) !important;
    line-height: 1.3 !important;
  }
  .organization-workspace .panel-head p {
    font-size: var(--ph-font-body, 14px) !important;
    line-height: 1.4 !important;
  }
  .organization-workspace .org-identity h3 {
    font-size: var(--ph-font-heading, 16px) !important;
    line-height: 1.3 !important;
  }
  .organization-workspace .org-identity :is(p, span),
  .organization-workspace .org-profile dt {
    font-size: var(--ph-font-label, 13px) !important;
    line-height: 1.4 !important;
  }
  .organization-workspace .org-profile dd {
    font-size: var(--ph-font-body, 14px) !important;
    line-height: 1.35 !important;
  }
  .organization-workspace .org-readiness b {
    font-size: var(--ph-font-small, 12px) !important;
    line-height: 1.3 !important;
  }
  .organization-workspace .org-readiness span strong {
    font-size: var(--ph-font-body, 14px) !important;
    line-height: 1.3 !important;
  }
  .organization-workspace .org-readiness span small {
    font-size: var(--ph-font-label, 13px) !important;
    line-height: 1.4 !important;
  }
  .organization-workspace .org-unit > header > span {
    font-size: var(--ph-font-heading, 16px) !important;
    line-height: 1.2 !important;
  }
  .organization-workspace .org-unit > header b {
    font-size: var(--ph-font-body, 14px) !important;
    line-height: 1.3 !important;
  }
  .organization-workspace .org-unit > header small {
    font-size: var(--ph-font-small, 12px) !important;
    line-height: 1.3 !important;
  }
  .organization-workspace .org-unit > p,
  .organization-workspace .org-empty {
    font-size: var(--ph-font-label, 13px) !important;
    line-height: 1.4 !important;
  }
  .organization-workspace .org-person strong {
    font-size: var(--ph-font-body, 14px) !important;
    line-height: 1.3 !important;
  }
  .organization-workspace .org-person small {
    font-size: var(--ph-font-label, 13px) !important;
    line-height: 1.3 !important;
  }
  .organization-workspace .org-person i {
    font-size: var(--ph-font-small, 12px) !important;
  }
  .organization-workspace .org-summary-grid :is(span, small),
  .organization-workspace .role-guide-grid :is(p, small, li),
  .organization-workspace .org-governance li > span {
    font-size: var(--ph-font-label, 13px) !important;
    line-height: 1.4 !important;
  }
  .organization-workspace .role-guide-grid header small {
    font-size: var(--ph-font-small, 12px) !important;
  }
  .organization-workspace .org-matrix :is(th, td) {
    font-size: var(--ph-font-label, 13px) !important;
    line-height: 1.35 !important;
  }
  .organization-workspace .org-governance li > b {
    font-size: var(--ph-font-body, 14px) !important;
    line-height: 1.35 !important;
  }
}

/* Screen typography tokens are managed under System Settings. Government
   print layouts remain isolated from these screen-only defaults. */
@media screen {
  :root {
    --ph-font-family: "Sarabun", "TH Sarabun New", "Noto Sans Thai", "Leelawadee UI", Tahoma, Arial, sans-serif;
    --ph-font-body: 14px;
    --ph-font-small: 12px;
    --ph-font-label: 13px;
    --ph-font-heading: 16px;
  }
  body,
  button,
  input,
  select,
  textarea {
    font-family: var(--ph-font-family) !important;
  }
  body {
    font-size: var(--ph-font-body) !important;
  }
  :is(button, input, select, textarea) {
    font-size: var(--ph-font-body) !important;
  }
  :is(small, .section-intro p, .panel-head p, .system-setting-copy small) {
    font-size: var(--ph-font-small) !important;
  }
  :is(label, .form-grid label > span, .system-setting-label, .org-profile dt) {
    font-size: var(--ph-font-label) !important;
  }
  :is(.section-intro h2, .panel-head h3, .system-settings-group > h3,
      .organization-workspace .org-identity h3) {
    font-size: var(--ph-font-heading) !important;
  }
}