:root {
  --app-bg: #eef3f6;
  --app-surface: #ffffff;
  --app-surface-soft: #f6fafb;
  --app-ink: #18313e;
  --app-muted: #627783;
  --app-header: #0f3440;
  --app-header-hover: #175263;
  --app-header-accent: #37b6a1;
  --app-primary: #177b73;
  --app-primary-dark: #0f5f58;
  --app-primary-soft: #e4f4f1;
  --app-border: #d6e1e6;
  --app-shadow: rgba(15, 52, 64, .12);
  --app-modal-header: #f1f7f8;
  --app-modal-border: #bfd1d8;
  --app-modal-shadow: 0 22px 70px rgba(8, 38, 48, .28);
}

/* Shared modal system for Orders, Work Orders, and Shipments. */
.modal.app-modal-active {
  z-index: calc(1055 + (var(--app-modal-depth, 0) * 20));
}

.app-modal .modal-dialog,
#orderHistoryModal .modal-dialog,
#orderEditModal .modal-dialog,
#orderCreateModal .modal-dialog,
#productViewModal .modal-dialog,
#workSearchModal .modal-dialog,
#workDetailModal .modal-dialog,
#shipCustomerLockedModal .modal-dialog,
#shipSearchModal .modal-dialog,
#shipDetailModal .modal-dialog {
  z-index: calc(1055 + (var(--app-modal-depth, 0) * 20));
}

.modal-backdrop {
  z-index: calc(1050 + (var(--app-modal-depth, 0) * 20));
  background: #082f3a;
}

.modal.app-modal-underlay {
  filter: saturate(.75) brightness(.83);
  pointer-events: none;
  transform: scale(.994);
  transition: filter .16s ease, transform .16s ease;
}

.app-modal .modal-content,
#orderHistoryModal .modal-content,
#orderEditModal .modal-content,
#orderCreateModal .modal-content,
#productViewModal .modal-content,
#workSearchModal .modal-content,
#workDetailModal .modal-content,
#shipCustomerLockedModal .modal-content,
#shipSearchModal .modal-content,
#shipDetailModal .modal-content {
  overflow: hidden;
  border: 1px solid var(--app-modal-border);
  border-radius: 8px;
  box-shadow: var(--app-modal-shadow);
}

.app-modal .modal-header,
#orderHistoryModal .modal-header,
#orderEditModal .modal-header,
#orderCreateModal .modal-header,
#productViewModal .modal-header,
#workSearchModal .modal-header,
#workDetailModal .modal-header,
#shipCustomerLockedModal .modal-header,
#shipSearchModal .modal-header,
#shipDetailModal .modal-header {
  min-height: 68px;
  padding: 12px 18px;
  border-bottom: 1px solid var(--app-modal-border);
  background: var(--app-modal-header);
  color: var(--app-header);
}

.app-modal .modal-title,
#orderHistoryModal .modal-title,
#orderEditModal .modal-title,
#orderCreateModal .modal-title,
#productViewModal .modal-title,
#workSearchModal .modal-title,
#workDetailModal .modal-title,
#shipCustomerLockedModal .modal-title,
#shipSearchModal .modal-title,
#shipDetailModal .modal-title {
  font-weight: 700;
  letter-spacing: 0;
}

.app-modal-kicker {
  margin: 0 0 2px;
  color: var(--app-primary);
  font-size: .75rem;
  font-weight: 700;
}

.app-modal .modal-body,
#orderHistoryModal .modal-body,
#orderEditModal .modal-body,
#workSearchModal .modal-body,
#workDetailModal .modal-body,
#shipSearchModal .modal-body,
#shipDetailModal .modal-body {
  background: #f7fafb;
}

.app-modal .modal-footer,
.app-modal-actions {
  position: sticky;
  bottom: 0;
  z-index: 5;
  gap: 8px;
  border-top: 1px solid var(--app-modal-border);
  background: #fff;
}

.app-confirm-modal .modal-body { padding: 22px 20px; }
.app-confirm-message { color: #294653; line-height: 1.65; white-space: pre-line; }

.modal .table-responsive { overscroll-behavior: contain; }
.modal .table thead th { top: 0; z-index: 4; }
.modal .table tbody tr:focus-within > * { background: var(--app-primary-soft); }
.modal .alert { border-radius: 6px; }
.modal button:disabled { cursor: wait; }

@media (max-width: 767.98px) {
  #orderHistoryModal .modal-dialog,
  #orderEditModal .modal-dialog,
  #orderCreateModal .modal-dialog,
  #productViewModal .modal-dialog,
  #workSearchModal .modal-dialog,
  #workDetailModal .modal-dialog,
  #shipSearchModal .modal-dialog,
  #shipDetailModal .modal-dialog {
    width: 100%;
    max-width: none;
    height: 100%;
    margin: 0;
  }
  #orderHistoryModal .modal-content,
  #orderEditModal .modal-content,
  #orderCreateModal .modal-content,
  #productViewModal .modal-content,
  #workSearchModal .modal-content,
  #workDetailModal .modal-content,
  #shipSearchModal .modal-content,
  #shipDetailModal .modal-content {
    width: 100%;
    height: 100%;
    max-height: none;
    border: 0;
    border-radius: 0;
  }
}

.work-heading { margin-bottom: 1rem; }
.work-toolbar { display:flex; align-items:center; justify-content:space-between; gap:1rem; padding: .75rem; border:1px solid #c9d7df; background:#fff; margin-bottom:.75rem; }
.work-table-wrap { max-height: calc(100vh - 245px); border:1px solid #b9c8d0; background:#fff; }
.work-table { min-width: 940px; }
.work-table thead th, .work-search-results thead th { position:sticky; top:0; z-index:2; background:#eaf2f5; white-space:nowrap; }
.work-table td, .work-table th { padding:.48rem .55rem; }
.work-search-filters { display:grid; grid-template-columns:minmax(240px,1fr) 190px 190px auto; gap:.75rem; padding:.85rem; background:#edf4f6; border:1px solid #cfdee4; margin-bottom:.75rem; }
.work-search-results { height:62vh; border:1px solid #c7d5dc; }
.work-search-results table { min-width:900px; }
.work-search-row { cursor:pointer; }
.work-search-row:focus { outline:2px solid #168a80; outline-offset:-2px; }
#workDetailBody input { min-width:110px; }
@media (max-width: 850px) {
  .work-toolbar { align-items:stretch; flex-direction:column; }
  .work-search-filters { grid-template-columns:1fr; }
}
.shipment-toolbar{display:flex;justify-content:space-between;align-items:end;gap:1rem;padding:.75rem;background:#fff;border:1px solid #c9d7df;margin-bottom:.75rem}.shipment-toolbar .form-label{margin-bottom:.2rem}.shipment-customer-locked{min-width:180px;background-color:#e9ecef;color:#495057;cursor:pointer}.shipment-customer-locked:focus{border-color:#86b7fe;box-shadow:0 0 0 .25rem rgba(13,110,253,.25)}.shipment-table-wrap{height:55vh;border:1px solid #b9c8d0;background:#fff}.shipment-table{min-width:980px}.shipment-table thead th,.ship-history thead th,.ship-detail-table thead th{position:sticky;top:0;background:#eaf2f5;z-index:2;white-space:nowrap}.shipment-table input{min-width:85px}.manual-ship{display:grid;grid-template-columns:minmax(170px,2fr) 80px auto 80px auto 80px 100px 100px minmax(180px,2fr) auto;align-items:end;gap:.5rem;padding:1rem;background:#fff;border:1px solid #c9d7df;margin-top:.75rem}.manual-ship label{display:block;color:#c52d2d;font-weight:600;margin-bottom:.3rem}.manual-ship .manual-memo label{color:#174e9a}.dimension-x{padding-bottom:.65rem}.ship-search-grid{display:grid;grid-template-columns:repeat(5,minmax(140px,1fr));align-items:end;gap:.6rem;padding:.75rem;background:#edf4f6;margin-bottom:.75rem}.ship-search-grid label{display:block;margin-bottom:.2rem;font-size:.85rem;font-weight:600;color:#294452}.ship-search-name{grid-column:span 2}.ship-history{height:60vh}.ship-history table{min-width:1200px}.ship-detail-toolbar{display:flex;align-items:end;gap:.7rem;padding:.8rem 1rem;background:#fff;border-bottom:1px solid #c9d7df}.ship-detail-toolbar>div{min-width:130px}.ship-detail-toolbar span,.ship-detail-toolbar label{display:block;color:#527080;font-size:.8rem;margin-bottom:.15rem}.ship-detail-toolbar strong{display:block;color:#153947}.ship-detail-toolbar #detailDate{width:155px}.ship-detail-table{height:45vh;background:#c6dcef}.ship-detail-table table{min-width:1050px;background:#fff}.ship-detail-table input{min-width:90px}.history-add{display:grid;grid-template-columns:minmax(160px,2fr) repeat(5,80px) minmax(160px,2fr) auto;align-items:end;gap:.55rem;padding:1rem;border-top:1px solid #9eb8c7;background:#f8fafb}.history-add label{display:block;color:#c52d2d;font-weight:600;margin-bottom:.25rem}.history-add-memo label{color:#174e9a}@media(max-width:1000px){.shipment-toolbar{align-items:stretch;flex-direction:column}.manual-ship,.ship-search-grid,.history-add{grid-template-columns:1fr 1fr}.ship-detail-toolbar{align-items:stretch;flex-wrap:wrap}.ship-search-name{grid-column:span 1}.dimension-x{display:none}}

* {
  box-sizing: border-box;
}

html {
  min-width: 320px;
}

body {
  margin: 0;
  background: var(--app-bg);
  color: var(--app-ink);
  font-family: "Microsoft JhengHei", "Segoe UI", sans-serif;
}

a {
  color: var(--app-primary);
}

.app-navbar {
  background-color: var(--app-header) !important;
  background-image: linear-gradient(90deg, #0f3440 0%, #124958 100%);
  border-bottom: 3px solid var(--app-header-accent);
  box-shadow: 0 2px 14px rgba(15, 52, 64, .24);
}

.app-navbar .navbar-brand,
.app-navbar .nav-link,
.app-navbar .navbar-text {
  color: #fff !important;
  opacity: 1;
}

.app-navbar .navbar-brand {
  letter-spacing: .03rem;
}

.app-navbar .nav-link {
  border-radius: 6px;
  color: rgba(255, 255, 255, .9) !important;
}

.app-navbar .navbar-nav .nav-link.active,
.app-navbar .navbar-nav .nav-link.show {
  color: #fff !important;
}

.app-navbar .navbar-nav .nav-link.disabled {
  color: rgba(255, 255, 255, .45) !important;
}

.app-navbar .nav-link:hover,
.app-navbar .nav-link:focus,
.app-navbar .navbar-brand:hover {
  color: #fff !important;
}

.app-navbar .nav-link:hover,
.app-navbar .nav-link:focus,
.app-navbar .nav-link.show {
  background-color: var(--app-header-hover);
}

.app-navbar .navbar-toggler {
  border-color: rgba(255, 255, 255, .45);
  color: #fff;
}

.app-navbar .navbar-toggler-icon {
  filter: none;
}

.app-navbar .navbar-toggler:focus {
  box-shadow: 0 0 0 .2rem rgba(55, 182, 161, .35);
}

.app-navbar .dropdown-menu {
  background: #fff;
  border: 1px solid var(--app-border);
  box-shadow: 0 12px 28px var(--app-shadow);
}

.app-navbar .dropdown-item {
  color: var(--app-ink);
}

.app-navbar .dropdown-item:hover,
.app-navbar .dropdown-item:focus {
  background: var(--app-primary-soft);
  color: var(--app-primary-dark);
}

.app-main {
  width: min(100%, 1680px);
  margin: 0 auto;
  padding: 28px 28px 48px;
}

.page-heading {
  margin-bottom: 22px;
}

.page-heading .eyebrow {
  margin-bottom: 6px;
  color: var(--app-primary);
  font-size: .78rem;
  letter-spacing: .12rem;
}

.page-heading h1 {
  margin: 0;
  color: var(--app-header);
  font-size: clamp(1.6rem, 2vw, 2.1rem);
  font-weight: 700;
}

.page-heading p {
  max-width: 760px;
  margin: 12px 0 0;
  color: var(--app-muted);
}

.app-card {
  border: 1px solid var(--app-border);
  border-radius: 8px;
  box-shadow: 0 8px 24px var(--app-shadow);
}

.module-card {
  min-height: 118px;
  text-decoration: none;
  transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease;
}

.module-card:hover,
.module-card:focus {
  border-color: var(--app-primary);
  box-shadow: 0 10px 28px rgba(15, 95, 88, .16);
  transform: translateY(-1px);
}

.toolbar-card {
  background: var(--app-surface);
  border: 1px solid var(--app-border);
  border-radius: 8px;
  padding: 16px;
}

.table-card {
  overflow: hidden;
  background: var(--app-surface);
  border: 1px solid var(--app-border);
  border-radius: 8px;
  box-shadow: 0 8px 24px var(--app-shadow);
}

.table-responsive {
  max-height: 66vh;
}

.table thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: #dfeaed;
  color: var(--app-header);
  white-space: nowrap;
}

.table-hover > tbody > tr:hover > * {
  background-color: var(--app-primary-soft);
}

.table td {
  white-space: nowrap;
}

.order-table th,
.order-table td {
  vertical-align: middle;
}

.order-table .btn-sm {
  min-width: 56px;
}

.order-table .order-memo {
  max-width: 320px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.empty {
  padding: 48px !important;
  color: #768891 !important;
  text-align: center;
}

.btn-primary {
  --bs-btn-bg: var(--app-primary);
  --bs-btn-border-color: var(--app-primary);
  --bs-btn-hover-bg: var(--app-primary-dark);
  --bs-btn-hover-border-color: var(--app-primary-dark);
  --bs-btn-active-bg: var(--app-primary-dark);
  --bs-btn-active-border-color: var(--app-primary-dark);
  --bs-btn-disabled-bg: #6a9993;
  --bs-btn-disabled-border-color: #6a9993;
  --bs-btn-disabled-color: #fff;
}

.btn-outline-primary {
  --bs-btn-color: var(--app-primary);
  --bs-btn-border-color: var(--app-primary);
  --bs-btn-hover-bg: var(--app-primary);
  --bs-btn-hover-border-color: var(--app-primary);
  --bs-btn-active-bg: var(--app-primary-dark);
  --bs-btn-active-border-color: var(--app-primary-dark);
}

.record-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

.field label {
  display: block;
  margin-bottom: 6px;
  color: #3a4f5d;
  font-size: .92rem;
  font-weight: 600;
}

.field input,
.field select,
.field textarea {
  display: block;
  width: 100%;
  min-height: 38px;
  padding: .375rem .75rem;
  border: 1px solid #ced4da;
  border-radius: .375rem;
  background: #fff;
  color: #212529;
  font: inherit;
}

.field input:focus,
.field select:focus,
.field textarea:focus {
  border-color: var(--app-header-accent);
  outline: 0;
  box-shadow: 0 0 0 .25rem rgba(23, 123, 115, .18);
}

.read-value {
  min-height: 38px;
  padding: .45rem .75rem;
  border: 1px solid var(--app-border);
  border-radius: .375rem;
  background: #f8fafb;
  color: #4e6371;
}

.modal-dialog-record {
  width: min(1360px, 98vw);
  max-width: 1360px;
}

.modal-dialog-record .modal-content {
  height: min(900px, 94vh);
  overflow: hidden;
  border: 0;
  border-radius: 8px;
}

.modal-dialog-record iframe {
  width: 100%;
  height: 100%;
  border: 0;
}

.modal-floating-close {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 3;
}

.order-create-dialog {
  width: min(1540px, 98vw);
  max-width: 1540px;
}

.order-create-modal {
  height: min(1040px, 96vh);
  overflow: hidden;
  border: 0;
  border-radius: 8px;
}

.order-create-modal .modal-body {
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
  padding: 0;
  background: #b9d2e8;
}

.product-view-dialog {
  width: min(1460px, 98vw);
  max-width: 1460px;
}

.product-view-modal {
  height: min(930px, 96vh);
  overflow: hidden;
  border: 0;
  border-radius: 8px;
}

.product-view-modal .modal-body {
  min-height: 0;
  overflow: auto;
  padding: 0;
  background: #efefef;
}

#productViewForm {
  min-height: 100%;
}

#productViewForm .alert {
  margin: 12px 16px 0;
}

.product-edit-shell {
  display: grid;
  grid-template-columns: minmax(455px, .62fr) minmax(430px, 1fr) minmax(390px, .7fr);
  grid-template-rows: auto auto auto auto minmax(300px, 1fr);
  grid-template-areas:
    "left title right"
    "left . right"
    "bar bar bar"
    "tools tools tools"
    "image notes print";
  gap: 0 30px;
  min-height: 820px;
  padding: 14px 18px 20px;
  color: #222;
  font-family: "DFKai-SB", "標楷體", "Microsoft JhengHei", serif;
}

.product-edit-title {
  grid-area: title;
  align-self: start;
  justify-self: center;
  width: 100%;
  color: #d76868;
  font-size: 2.35rem;
  font-weight: 400;
  letter-spacing: .22rem;
  line-height: 1.1;
  text-align: center;
  white-space: nowrap;
}

.product-edit-left {
  grid-area: left;
  display: grid;
  gap: 14px;
  align-content: start;
  padding-top: 6px;
}

.product-edit-row,
.product-edit-inline label {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
}

.product-edit-row > span,
.product-edit-inline span {
  flex: 0 0 auto;
  min-width: 96px;
  color: #121212;
  font-size: 1.24rem;
  font-weight: 700;
  white-space: nowrap;
}

.product-edit-row:first-child > span,
.product-edit-size-row > span,
.product-edit-wide:nth-of-type(3) > span {
  color: #e02020;
}

.product-edit-wide input {
  max-width: 420px;
}

.product-edit-size-row {
  align-items: center;
}

.product-edit-size-row input {
  width: 72px;
  flex: 0 0 72px;
}

.product-edit-size-row b {
  font-size: 1.1rem;
  font-weight: 700;
}

.product-edit-size-row em {
  color: #d94a4a;
  font-style: normal;
  font-weight: 700;
}

.product-edit-inline {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
}

.product-edit-inline input {
  width: 96px;
}

.product-edit-right {
  grid-area: right;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 9px;
  align-content: start;
}

.product-process-row {
  display: grid;
  grid-template-columns: 68px minmax(150px, 1fr) minmax(90px, .62fr);
  gap: 12px;
  align-items: center;
}

.product-process-row span {
  color: #111;
  font-size: 1.22rem;
  font-weight: 700;
  text-align: right;
  white-space: nowrap;
}

.product-process-row i {
  min-height: 31px;
}

.product-function-bar {
  grid-area: bar;
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 14px;
  padding: 9px 14px;
  background: #dddddd;
}

.product-function-bar strong {
  margin-right: 8px;
  color: #ff2020;
  font-size: 1.15rem;
}

.product-image-tools {
  grid-area: tools;
  display: grid;
  grid-template-columns: auto 260px auto 1fr;
  gap: 10px;
  align-items: center;
  padding: 8px 0;
}

.product-image-panel {
  grid-area: image;
  align-self: start;
}

.product-image-panel img {
  display: block;
  width: min(455px, 100%);
  height: 335px;
  object-fit: contain;
  border: 1px solid #777;
  background: #fff;
}

.product-note-panel {
  grid-area: notes;
}

.product-print-panel {
  grid-area: print;
}

.product-note-panel,
.product-print-panel {
  min-width: 0;
}

.product-note-panel textarea,
.product-print-panel textarea {
  display: block;
  width: 100%;
  height: 335px;
  min-height: 335px;
  resize: vertical;
  overflow: auto;
}

.product-note-panel label,
.product-print-panel label {
  display: block;
  margin-bottom: 6px;
  color: #111;
  font-size: 1.1rem;
  font-weight: 700;
}

.product-note-panel textarea,
.product-print-panel textarea {
  height: 335px;
  resize: none;
}

.product-print-panel {
  min-width: 0;
}

.embedded-product-page { margin: 0; min-width: 0; background: #f4f7f9; }
.embedded-product-content { padding: 24px 30px 32px; }
.embedded-product-content .page-heading { margin-bottom: 18px; padding-bottom: 14px; border-bottom: 1px solid #d8e2e7; }
.embedded-product-content .page-heading .eyebrow { display: none; }
.embedded-product-content .page-heading h1 { margin: 0; color: #b84f55; font-family: Georgia, "Times New Roman", serif; font-size: clamp(2rem, 4vw, 3.2rem); font-weight: 500; letter-spacing: .16em; text-align: center; }
.embedded-product-content #record-form { border: 1px solid #d6e0e5; border-radius: 8px; box-shadow: 0 8px 24px rgba(38, 63, 80, .08); }
.embedded-product-content .record-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px 22px; }
.embedded-product-content .field label { color: #365364; font-weight: 700; }
.embedded-product-content .record-actions { border-top: 1px solid #e0e8ec; padding-top: 18px; }

#orderCreateForm {
  display: grid;
  grid-template-rows: auto minmax(220px, 1fr) auto;
  flex: 1 1 0;
  min-height: 0;
}

.order-create-modal .modal-body > .alert {
  margin: 12px 16px 0;
  flex: 0 0 auto;
}

.order-create-top {
  display: grid;
  grid-template-columns: minmax(620px, 1fr) minmax(520px, .9fr);
  gap: 18px;
  padding: 14px 16px;
  border-bottom: 1px solid rgba(15, 52, 64, .18);
}

.order-create-fields {
  display: grid;
  grid-template-columns: 2fr repeat(3, minmax(96px, 1fr));
  gap: 10px 14px;
}

.order-create-field,
.order-create-search,
.order-create-order-no,
.order-create-ship-day {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.order-create-field span,
.order-create-search span,
.order-create-order-no span,
.order-create-ship-day span {
  flex: 0 0 auto;
  color: #d71920;
  font-weight: 700;
  white-space: nowrap;
}

.order-create-field input,
.order-create-field select,
.order-create-field textarea,
.order-create-search input,
.order-create-order-no input,
.order-create-ship-day input {
  min-width: 0;
}

.order-create-memo {
  grid-column: span 2;
  align-items: flex-start;
}

.order-create-memo span,
.order-create-image span {
  padding-top: 6px;
}

.order-create-image {
  grid-column: span 2;
}

.order-create-pairs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 18px;
  align-content: start;
}

.order-create-pair {
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr) minmax(0, .72fr);
  gap: 8px;
  align-items: center;
}

.order-create-pair span {
  color: #18313e;
  font-weight: 700;
  text-align: right;
  white-space: nowrap;
}

.order-create-products,
.order-create-bottom {
  min-height: 0;
  background: #fff;
}

.order-create-strip,
.order-create-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  border-bottom: 1px solid var(--app-border);
  background: #eef3f6;
}

.order-create-search input {
  width: 190px;
}

.order-create-product-table,
.order-create-line-table {
  max-height: 100%;
  overflow: auto;
}

.order-create-product-table {
  height: calc(100% - 55px);
}

.order-create-line-table {
  max-height: 230px;
}

.order-create-product-table th,
.order-create-line-table th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: #dfeaed;
}

.order-create-product-row {
  cursor: pointer;
}

.order-create-order-no input {
  width: 220px;
}

.order-create-ship-day input {
  width: 160px;
}

.customer-add-body {
  background: var(--app-bg);
}

.customer-add-screen {
  min-height: 100vh;
  padding: 28px;
  background: var(--app-bg);
  color: var(--app-ink);
}

.customer-validation {
  width: min(100%, 1240px);
  margin: 0 auto 16px;
  border-color: #e7b6b6;
}

.customer-validation ul {
  margin: 6px 0 0;
}

.customer-shell {
  width: min(100%, 1240px);
  margin: 0 auto;
  background: var(--app-surface);
  border: 1px solid var(--app-border);
  border-radius: 8px;
  box-shadow: 0 10px 28px var(--app-shadow);
}

.customer-title {
  margin: 0;
  color: var(--app-header);
  font-family: "DFKai-SB", "標楷體", "Microsoft JhengHei", serif;
  font-size: clamp(1.9rem, 3vw, 2.7rem);
  font-weight: 400;
  letter-spacing: .55rem;
  text-align: center;
}

.customer-tabs {
  border-bottom: 1px solid var(--app-border);
}

.customer-tabs .nav-link {
  border: 0;
  color: #405767;
  font-weight: 600;
}

.customer-tabs .nav-link.active {
  border-top: 3px solid var(--app-header-accent);
  color: var(--app-primary-dark);
  font-weight: 700;
}

.customer-tabs .nav-link:not(.active):hover,
.customer-tabs .nav-link:not(.active):focus {
  background: var(--app-primary-soft);
  color: var(--app-primary-dark);
}

.customer-form-area {
  padding: 24px;
}

.customer-form-area .form-label {
  color: #263f50;
  font-weight: 700;
}

.required-label::after {
  content: " *";
  color: #c73737;
}

.customer-helper {
  color: #7a8d99;
  font-size: .84rem;
}

.settings-intro {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 22px;
  padding: 14px 16px;
  border: 1px solid #cde5e1;
  border-left: 4px solid var(--app-header-accent);
  border-radius: 6px;
  background: var(--app-primary-soft);
  color: var(--app-header);
}

.settings-intro-icon {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--app-primary);
  color: #fff;
  font-size: .95rem;
}

.settings-intro strong,
.settings-intro small {
  display: block;
}

.settings-intro small {
  margin-top: 3px;
  color: var(--app-muted);
}

.customer-form-area .form-select,
.customer-form-area .input-group-text {
  min-height: 38px;
}

.customer-form-area .form-control:focus,
.customer-form-area .form-select:focus {
  border-color: var(--app-header-accent);
  box-shadow: 0 0 0 .25rem rgba(23, 123, 115, .18);
}

.customer-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 86px;
  padding: 18px 24px;
  border-top: 1px solid var(--app-border);
  background: #dfe8eb;
}

.customer-actions .function-label {
  margin-right: auto;
  color: var(--app-primary-dark);
  font-size: .9rem;
  font-weight: 700;
}

@media (max-width: 1199.98px) {
  .record-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .order-create-top {
    grid-template-columns: 1fr;
  }

  .order-create-fields {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 767.98px) {
  .app-main {
    padding: 18px 12px 32px;
  }

  .record-grid {
    grid-template-columns: 1fr;
  }

  .table-responsive {
    max-height: none;
  }

  .customer-add-screen {
    padding: 12px;
  }

  .customer-title {
    letter-spacing: .18rem;
  }

  .order-create-modal {
    height: 96vh;
  }

  .product-view-modal {
    height: 96vh;
  }

  #productViewFrame {
    min-height: 0;
  }

  .embedded-product-content { padding: 18px 14px 24px; }
  .embedded-product-content .record-grid { grid-template-columns: 1fr; }

  #orderCreateForm {
    grid-template-rows: auto minmax(180px, 1fr) auto;
  }

  .order-create-top,
  .order-create-fields,
  .order-create-pairs {
    display: block;
  }

  .order-create-field,
  .order-create-pair,
  .order-create-search,
  .order-create-order-no,
  .order-create-ship-day {
    margin-bottom: 10px;
  }

  .order-create-pair {
    display: grid;
    grid-template-columns: 58px 1fr 1fr;
  }
}

@media print {
  .app-navbar,
  .toolbar-card,
  .record-actions,
  .pagination {
    display: none !important;
  }

  .app-main {
    max-width: none;
    padding: 0;
  }

  .table-responsive {
    max-height: none;
    overflow: visible;
  }
}
.order-data-row { cursor: default; }
.order-data-row:hover { background: #eef7f5; }
.order-edit-modal { max-height: min(82vh, 760px); }
.order-edit-modal .modal-body { overflow: auto; }
.order-edit-toolbar { display: grid; grid-template-columns: minmax(160px,1fr) minmax(190px,280px) auto auto auto; gap: 12px; align-items: end; margin-bottom: 16px; }
.order-edit-table-wrap { max-height: 52vh; border: 1px solid #d9e2e5; }
.order-edit-table-wrap thead { position: sticky; top: 0; z-index: 2; background: #edf4f5; }
.order-edit-table-wrap th, .order-edit-table-wrap td { white-space: nowrap; vertical-align: middle; }
.order-edit-table-wrap .edit-qty { width: 88px; }
.order-edit-table-wrap .edit-day { width: 145px; }
.order-edit-table-wrap .edit-memo { min-width: 220px; }
@media (max-width: 991.98px) { .order-edit-toolbar { grid-template-columns: 1fr 1fr; } }
.history-order-dialog { width: min(96vw, 1480px); max-width: none; }
.history-order-modal { height: min(88vh, 900px); }
.history-order-modal .modal-body { display: flex; flex-direction: column; min-height: 0; overflow: hidden; }
.history-order-filters { display: grid; grid-template-columns: repeat(7, minmax(130px, 1fr)) auto; gap: 10px; align-items: end; padding: 12px; background: #eef3f4; border: 1px solid #d7e0e2; }
.history-order-filters label span { display: block; margin-bottom: 4px; font-size: .8rem; color: #52666c; }
.history-order-table-wrap { flex: 1; min-height: 0; overflow: auto; border: 1px solid #d9e2e5; }
.history-order-table-wrap thead { position: sticky; top: 0; z-index: 2; background: #eaf2f3; }
.history-order-table-wrap th, .history-order-table-wrap td { white-space: nowrap; }
.history-order-table-wrap .history-memo { max-width: 280px; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 1200px) { .history-order-filters { grid-template-columns: repeat(4, minmax(150px, 1fr)); } }

.label-page-heading { display: flex; align-items: end; justify-content: space-between; gap: 20px; }
.label-batch-count { display: flex; align-items: baseline; gap: 8px; color: var(--app-muted); }
.label-batch-count strong { color: var(--app-primary-dark); font-size: 1.75rem; line-height: 1; }
.label-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-bottom: 14px; }
.label-print-actions { display: flex; gap: 10px; }
.label-print { min-width: 150px; }
.label-format-notice { color: #b3261e; font-weight: 700; }
.label-table-shell { border: 1px solid var(--app-border); background: var(--app-surface); box-shadow: 0 8px 24px var(--app-shadow); }
.label-table-wrap { max-height: calc(100vh - 285px); min-height: 300px; }
.label-table { min-width: 1120px; table-layout: fixed; }
.label-table thead { position: sticky; top: 0; z-index: 3; background: #dce9ec; }
.label-table th { color: var(--app-header); font-weight: 700; }
.label-table th:nth-child(1) { width: 150px; }
.label-table th:nth-child(2) { width: 165px; }
.label-table th:nth-child(3) { width: 220px; }
.label-table th:nth-child(4) { width: 190px; }
.label-table th:nth-child(5) { width: 145px; }
.label-table th:nth-child(6) { width: 110px; }
.label-table th:nth-child(7) { width: 150px; }
.label-table th:nth-child(8) { width: 92px; }
.label-table td { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.label-table tbody tr:hover { background: #eef7f5; }
.label-table .form-control { min-width: 0; border-color: #c8d5da; background: #fff; }
.label-table .form-control:focus { border-color: var(--app-header-accent); box-shadow: 0 0 0 .2rem rgba(23,123,115,.16); }
.label-action-column { position: sticky; right: 0; z-index: 2; background: #fff; text-align: center; }
.label-table thead .label-action-column { z-index: 4; background: #dce9ec; }
.empty-state { height: 280px; text-align: center; color: var(--app-muted); }
.empty-state strong, .empty-state span { display: block; }
.empty-state strong { margin-bottom: 6px; color: var(--app-header); font-size: 1.1rem; }
@media (max-width: 767.98px) {
  .label-page-heading, .label-toolbar { align-items: stretch; flex-direction: column; }
  .label-toolbar { gap: 12px; }
  .label-print-actions { display: grid; grid-template-columns: 1fr 1fr; }
  .label-print { min-width: 0; }
  .label-table-wrap { max-height: calc(100vh - 380px); }
}
/* Monthly reporting workspace */
.report-heading{margin-bottom:1rem}
.report-workspace{display:grid;grid-template-columns:260px minmax(0,1fr);border:1px solid #c8d7dc;background:#fff;min-height:470px}
.report-chooser{border:0;border-right:1px solid #d4e0e4;margin:0;padding:1.25rem}
.report-chooser legend{font-size:1rem;font-weight:700;color:#31535d;margin-bottom:1rem}
.report-chooser label{display:flex;align-items:center;gap:.65rem;font-size:1.1rem;padding:.7rem .5rem;cursor:pointer}
.report-chooser input,.criteria-radio input{width:1.05rem;height:1.05rem;accent-color:#0b746f}
.report-criteria{padding:1.5rem;max-width:900px}
.criteria-row{display:grid;grid-template-columns:140px minmax(180px,250px) auto minmax(180px,250px);align-items:center;gap:.75rem;margin-bottom:1rem}
.criteria-row>label{font-weight:700;color:#31535d}
.criteria-radio{display:flex;align-items:center;gap:.55rem}
.criteria-row .form-control,.criteria-row .form-select{min-height:42px}
.report-period{max-width:150px}
.report-hint{color:#c52a2a;font-weight:700;white-space:nowrap}
.memo-row{grid-template-columns:140px minmax(300px,560px) auto}
.memo-row textarea{resize:vertical;min-height:116px}
.report-actions{display:flex;gap:1rem;margin:1.5rem 0 0 140px}
.report-actions .btn{min-width:150px;min-height:46px}
.report-workspace :disabled{background:#eef2f3;color:#859397;cursor:not-allowed}
@media(max-width:768px){
 .report-workspace{grid-template-columns:1fr}
 .report-chooser{border-right:0;border-bottom:1px solid #d4e0e4}
 .report-chooser label{display:inline-flex;margin-right:.75rem}
 .report-criteria{padding:1rem}
 .criteria-row,.memo-row{grid-template-columns:1fr}
 .report-actions{margin-left:0;flex-direction:column}
 .report-actions .btn{width:100%}
}
/* Supplier master data */
.supplier-heading{display:flex;align-items:end;justify-content:space-between;gap:1rem}
.supplier-count{display:flex;align-items:baseline;gap:.4rem;color:#45616b}.supplier-count strong{font-size:1.5rem;color:#0d6f73}
.supplier-toolbar{display:flex;gap:.65rem;margin-bottom:.75rem}.supplier-table-shell{background:#fff;border:1px solid #bfd0d6;min-height:24rem}
.supplier-table-wrap{max-height:calc(100vh - 18rem)}.supplier-table{min-width:1050px;table-layout:fixed}.supplier-table thead th{position:sticky;top:0;z-index:2;background:#dce9ed;color:#123d49;white-space:nowrap}
.supplier-table th:nth-child(1){width:15%}.supplier-table th:nth-child(2),.supplier-table th:nth-child(3){width:11%}.supplier-table th:nth-child(4){width:10%}.supplier-table th:nth-child(5){width:25%}.supplier-table th:nth-child(6),.supplier-table th:nth-child(7){width:7%}
.supplier-table td{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.supplier-action{width:76px;text-align:center;position:sticky;right:76px;background:#fff}.supplier-action:last-child{right:0}.supplier-table thead .supplier-action{background:#dce9ed}
.supplier-identity{display:grid;grid-template-columns:minmax(12rem,.7fr) minmax(20rem,1.8fr);gap:1rem;padding:1rem;background:#eaf3f5;border:1px solid #c9dde2}
.supplier-fields{border:0;margin:1rem 0 0;padding:0}.supplier-fields legend{font-size:.9rem;font-weight:700;color:#0d6f73;border-bottom:1px solid #cad9dd;padding-bottom:.45rem}
.supplier-form-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.9rem 1rem}.supplier-form-grid .span-2{grid-column:span 2}.supplier-form-grid .span-3{grid-column:1/-1}
.supplier-modal .modal-dialog{max-width:1120px}.supplier-modal textarea{resize:vertical}.form-label.required::after{content:" *";color:#c73535}
@media(max-width:767.98px){.supplier-identity,.supplier-form-grid{grid-template-columns:1fr}.supplier-form-grid .span-2,.supplier-form-grid .span-3{grid-column:auto}.supplier-modal .modal-dialog{max-width:none;margin:0;min-height:100%}.supplier-modal .modal-content{min-height:100vh;border-radius:0}}
.company-table{min-width:1050px}.company-table thead th{position:sticky;top:0;background:#dce9ed;color:#123d49}.company-table th:last-child,.company-table td:last-child{width:80px;text-align:center;position:sticky;right:0;background:#fff}.company-table thead th:last-child{background:#dce9ed}.company-table td{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.company-table th:nth-child(7){width:28%}
.driver-table{min-width:800px}.driver-table thead th{position:sticky;top:0;background:#dce9ed;color:#123d49}.driver-table th:first-child{width:80px}.driver-table th:nth-child(3){width:38%}.driver-table th:nth-last-child(-n+2),.driver-table td:nth-last-child(-n+2){width:78px;text-align:center}.driver-table td{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.driver-form-grid{display:grid;grid-template-columns:1fr 1fr;gap:1rem}.driver-form-grid .span{grid-column:1/-1}@media(max-width:767.98px){.driver-form-grid{grid-template-columns:1fr}.driver-form-grid .span{grid-column:auto}}
.product-toolbar{display:grid;grid-template-columns:max-content minmax(250px,320px) max-content minmax(220px,1fr) max-content;align-items:end;gap:.75rem;margin-bottom:.75rem;overflow-x:auto}.product-toolbar label{display:flex;align-items:center;gap:.35rem;white-space:nowrap}.product-toolbar .form-select{min-width:210px}.product-toolbar .btn,.product-nowrap{white-space:nowrap;min-height:42px}.product-search-mode{display:flex;align-items:center;gap:.65rem;min-height:42px}.product-master-table{min-width:900px}.product-master-table thead th{position:sticky;top:0;background:#dce9ed;color:#123d49}.product-master-table th:first-child{width:28%}.product-master-table th:nth-child(2){width:18%}.product-master-table th:nth-child(4),.product-master-table th:nth-child(5){width:78px}.product-master-table td{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* Compact, responsive order entry; keep every section reachable when zoomed. */
#orderCreateModal .order-create-dialog { width: calc(100% - 16px); max-width: 1540px; margin: 8px auto; min-height: calc(100% - 16px); }
#orderCreateModal .order-create-modal { height: calc(100dvh - 16px); max-height: calc(100dvh - 16px); font-size: .875rem; }
#orderCreateModal .modal-header { padding: 8px 12px; flex-shrink: 0; }
#orderCreateModal .app-modal-kicker { margin-bottom: 2px; font-size: .7rem; }
#orderCreateModal #orderCreateTitle { font-size: 1.05rem !important; }
#orderCreateModal .modal-body { overflow-y: auto; overflow-x: hidden; }
#orderCreateModal #orderCreateForm { display: flex; flex-direction: column; flex: 0 0 auto; min-height: 0; }
#orderCreateModal .modal-body > .alert { margin: 6px 10px; padding: 6px 10px; }
#orderCreateModal .order-create-top { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); padding: 8px 10px; gap: 10px; }
#orderCreateModal .order-create-fields { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 6px 8px; align-content: start; }
#orderCreateModal .order-entry-customer { grid-area: 1 / 1 / 2 / 7; }
#orderCreateModal .order-entry-item { grid-area: 2 / 1 / 3 / 7; }
#orderCreateModal .order-entry-dimensions { grid-area: 3 / 1 / 4 / 7; }
#orderCreateModal .order-entry-dimensions input { flex: 1; width: 0; }
#orderCreateModal .order-entry-dimensions i { font-style: normal; }
#orderCreateModal .order-entry-price { grid-area: 4 / 1 / 5 / 4; }
#orderCreateModal .order-entry-quantity { grid-area: 4 / 4 / 5 / 7; }
#orderCreateModal .order-entry-width { grid-area: 5 / 1 / 6 / 4; }
#orderCreateModal .order-entry-length { grid-area: 5 / 4 / 6 / 7; }
#orderCreateModal .order-entry-molds { grid-area: 1 / 7 / 2 / 9; }
#orderCreateModal .order-entry-face { grid-area: 1 / 9 / 2 / 11; }
#orderCreateModal .order-entry-bottom { grid-area: 1 / 11 / 2 / 13; }
#orderCreateModal .order-create-store { grid-area: 2 / 7 / 3 / 10; }
#orderCreateModal .order-create-memo { grid-area: 3 / 7 / 5 / 13; }
#orderCreateModal .order-create-image { grid-area: 5 / 7 / 6 / 13; }
#orderCreateModal .order-entry-style { grid-area: 6 / 7 / 7 / 10; }
#orderCreateModal .order-create-field { gap: 4px; }
#orderCreateModal .form-control, #orderCreateModal .form-select, #orderCreateModal .btn { font-size: .8125rem; min-height: 28px; padding-top: 3px; padding-bottom: 3px; }
#orderCreateModal .order-create-memo textarea { height: 54px; min-height: 54px; }
#orderCreateModal .order-create-pairs { gap: 6px 8px; }
@media (min-width: 1200px) {
  #orderCreateModal .order-create-pairs { grid-auto-flow: column; grid-template-rows: repeat(5, auto); }
}
#orderCreateModal .order-create-pair { grid-template-columns: 42px minmax(0, 1fr) minmax(0, .72fr); gap: 4px; }
#orderCreateModal .order-create-strip, #orderCreateModal .order-create-actions { padding: 6px 10px; gap: 6px 10px; }
#orderCreateModal .order-create-search { gap: 4px; max-width: 100%; }
#orderCreateModal .order-create-search input { width: 150px; }
#orderCreateModal .order-create-order-no input { width: 160px; }
#orderCreateModal .order-create-ship-day input { width: 140px; }
#orderCreateModal .order-create-product-table { height: clamp(110px, 22dvh, 230px); max-height: none; overflow: auto; }
#orderCreateModal .order-create-line-table { max-height: clamp(90px, 19dvh, 190px); overflow: auto; }
#orderCreateModal .table { font-size: .8125rem; }
#orderCreateModal .table > :not(caption) > * > * { padding: 4px 6px; }
#orderCreateModal .order-create-products, #orderCreateModal .order-create-bottom { flex-shrink: 0; }
@media (max-width: 1199.98px) {
  #orderCreateModal .order-create-top { grid-template-columns: minmax(0, 1fr); }
  #orderCreateModal .order-create-pairs { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 767.98px) {
  #orderCreateModal .order-create-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #orderCreateModal .order-create-fields > * { grid-area: auto; }
  #orderCreateModal .order-entry-customer, #orderCreateModal .order-entry-item, #orderCreateModal .order-entry-dimensions { grid-column: 1 / -1; }
  #orderCreateModal .order-create-pairs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #orderCreateModal .order-create-field, #orderCreateModal .order-create-pair, #orderCreateModal .order-create-search, #orderCreateModal .order-create-order-no, #orderCreateModal .order-create-ship-day { margin-bottom: 0; }
}
@media (max-width: 479.98px) {
  #orderCreateModal .order-create-fields, #orderCreateModal .order-create-pairs { grid-template-columns: minmax(0, 1fr); }
  #orderCreateModal .order-create-memo, #orderCreateModal .order-create-image { grid-column: auto; }
}
#shipSearchModal .ship-search-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
#shipSearchModal .ship-history { height: auto; max-height: none; overscroll-behavior: auto; }
#shipSearchModal .ship-history table { min-width: 850px; }
@media(max-width:575.98px) { #shipSearchModal .ship-search-grid { grid-template-columns: 1fr; } }

#customerModal .modal-dialog { width: calc(100% - 24px); max-width: 1380px; }
#customerModal .modal-content { min-height: min(850px, 94dvh); background: #f4f4f4; }
#customerModal .modal-header { background: transparent; justify-content: center; }
#customerModal .modal-header > div { flex: 1; text-align: center; }
#customerModal .app-modal-kicker { display: none; }
#customerModal .modal-title { color: #b34b46; font-size: clamp(1.4rem, 3vw, 2.4rem); letter-spacing: .3em; }
#customerModal .customer-name-row { display: grid; grid-template-columns: minmax(220px, .7fr) minmax(0, 1.3fr); gap: 24px; padding: 12px 4px 22px; }
#customerModal .customer-name-row label { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 6px; align-items: center; color: #c52d2d; }
#customerModal .customer-name-row small { grid-column: 2; color: #777; font-size: .8rem; }
#customerModal .form-control[readonly] { background: #e9ecef; color: #6c757d; }
#customerModal .tab-content { border: 1px solid #dee2e6; border-top: 0; background: #fafafa; min-height: min(440px, 52dvh); padding: 16px; }
#customerModal .customer-data-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 14px 10px; }
#customerModal .customer-data-grid label { display: flex; gap: 8px; align-items: center; min-width: 0; }
#customerModal .customer-data-grid label span { flex: 0 0 72px; }
#customerModal .customer-data-grid input { min-width: 0; }
#customerModal label:has([data-f="ResponsiblePerson"]) { grid-column: 1; grid-row: 1; }
#customerModal label:has([data-f="Contact"]) { grid-column: 1; grid-row: 2; }
#customerModal label:has([data-f="CompanyCode"]) { grid-column: 2; grid-row: 2; color: #c52d2d; }
#customerModal label:has([data-f="Website"]) { grid-column: 4; grid-row: 2; }
#customerModal label:has([data-f="Tel"]) { grid-column: 1; grid-row: 3; }
#customerModal label:has([data-f="Tel2"]) { grid-column: 2; grid-row: 3; }
#customerModal label:has([data-f="Tel3"]) { grid-column: 3; grid-row: 3; }
#customerModal label:has([data-f="Email"]) { grid-column: 4; grid-row: 3; }
#customerModal label:has([data-f="Fax"]) { grid-column: 1; grid-row: 4; }
#customerModal label:has([data-f="Fax2"]) { grid-column: 2; grid-row: 4; }
#customerModal label:has([data-f="Address"]) { grid-column: 1 / 4; grid-row: 5; }
#customerModal label:has([data-f="ShippingAddress"]) { grid-column: 1 / 4; grid-row: 6; }
#customerModal .modal-footer { justify-content: flex-start; }
@media(max-width:1100px){ #customerModal .customer-data-grid { grid-template-columns: repeat(2,minmax(0,1fr)); } #customerModal .customer-data-grid label { grid-column: auto; grid-row: auto; } #customerModal .customer-data-grid .span-2 { grid-column: 1 / -1; } }
@media(max-width:600px){ #customerModal .customer-name-row, #customerModal .customer-data-grid { grid-template-columns: minmax(0,1fr); } #customerModal .customer-data-grid .span-2 { grid-column: auto; } }

.customer-table .customer-number { width: 64px; min-width: 64px; text-align: center; white-space: nowrap; }

/* Shared table sorting, including modal and asynchronously populated tables. */
.table-sort-header { cursor: pointer; user-select: none; }
.table-sort-header::after { content: ' ↕'; font-size: .75em; opacity: .45; }
.table-sort-header[aria-sort=ascending]::after { content: ' ▲'; opacity: 1; }
.table-sort-header[aria-sort=descending]::after { content: ' ▼'; opacity: 1; }
.table-sort-header:focus-visible { outline: 2px solid #0d6efd; outline-offset: -2px; }
@media print { .table-sort-header::after { content: none; } }