/* Shared workspace presentation. No API, permission or billing changes. */
:root {
  --workspace-ink: #172b43;
  --workspace-muted: #52647a;
  --workspace-line: #dce5ee;
  --workspace-accent: #176d79;
}
#app main { max-width: 1600px; width: 100%; margin-inline: auto; padding: 28px clamp(16px, 3vw, 44px) 48px; }
#app .workspace-header { margin-bottom: 24px; padding-bottom: 18px; border-bottom: 1px solid var(--workspace-line); }
#app .workspace-header h1 { margin: 0 0 6px; color: var(--workspace-ink); font-size: clamp(24px, 3vw, 32px); letter-spacing: -.7px; }
#app .workspace-subtitle { color: var(--workspace-muted); line-height: 1.6; }
#app main .panel { background: #fff; border: 1px solid var(--workspace-line); border-radius: 16px; padding: clamp(18px, 2.4vw, 28px); box-shadow: 0 4px 16px #172b4305; margin-bottom: 22px; }
#app main .panel > h3 { color: var(--workspace-ink); font-size: 18px; margin: 0 0 20px; line-height: 1.5; }
#app main .panel > p { color: var(--workspace-muted); line-height: 1.7; }
#app .h420-summary-cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-bottom: 24px; }
#app .h420-summary-cards > .card { margin: 0; min-width: 0; padding: 22px; background: #fff; color: var(--workspace-muted); border: 1px solid var(--workspace-line); border-top: 3px solid var(--workspace-accent); border-radius: 14px; box-shadow: 0 4px 16px #172b4305; font-size: 13px; font-weight: 600; }
#app .h420-summary-cards > .card b { display: block; margin-top: 12px; color: var(--workspace-ink); font-size: clamp(26px, 3vw, 36px); font-weight: 750; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
#app .h420-status-panel .h420-status-cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
#app .h420-status-panel .h420-status-cards > .card { margin: 0; min-width: 0; border: 1px solid var(--workspace-line); border-left: 3px solid #8194a9; border-radius: 10px; padding: 16px; background: #f8fafc; color: var(--workspace-muted); box-shadow: none; font-size: 13px; }
#app .h420-status-panel .h420-status-cards > .card b { color: var(--workspace-ink); font-size: 25px; margin-top: 9px; font-variant-numeric: tabular-nums; }
#app .h420-status-panel .h420-status-cards > .card:nth-child(1),
#app .h420-status-panel .h420-status-cards > .card:nth-child(3) { border-left-color: #16856b; }
#app .h420-status-panel .h420-status-cards > .card:nth-child(5),
#app .h420-status-panel .h420-status-cards > .card:nth-child(7),
#app .h420-status-panel .h420-status-cards > .card:nth-child(8) { border-left-color: #b37a13; }
#app .h420-status-panel .h420-status-cards > .card:nth-child(6) { border-left-color: #bd4757; }
#app main form .grid { gap: 18px 22px; }
#app main form .field { min-width: 0; margin-bottom: 18px; }
#app main form .field > label { display: block; color: var(--workspace-ink); font-size: 13px; font-weight: 650; margin-bottom: 8px; line-height: 1.5; }
#app main form h4 { color: var(--workspace-ink); padding: 14px 0 12px; margin: 12px 0 20px; border-bottom: 1px solid var(--workspace-line); font-size: 15px; }
#app main input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="range"]):not([type="color"]),
#app main select, #app main textarea { min-height: 44px; border: 1px solid #bccbda; border-radius: 9px; background: #fff; padding: 10px 12px; color: var(--workspace-ink); font: inherit; max-width: 100%; }
#app main .field input:not([type="checkbox"]):not([type="radio"]),
#app main .field select, #app main .field textarea { width: 100%; }
#app main input::placeholder, #app main textarea::placeholder { color: #64758a; opacity: 1; }
#app main input:disabled, #app main select:disabled, #app main textarea:disabled { background: #edf2f7; color: #617287; cursor: not-allowed; }
#app main input:focus-visible, #app main select:focus-visible, #app main textarea:focus-visible,
#app main button:focus-visible, #app main a:focus-visible { outline: 3px solid #176d79; outline-offset: 3px; box-shadow: 0 0 0 5px #176d7912; }
#app main button { min-height: 40px; line-height: 1.4; }
#app main .primary { background: var(--workspace-accent); border: 1px solid var(--workspace-accent); color: #fff; }
#app main .secondary { background: #eef3f7; border: 1px solid #cbd6e1; color: #29425b; }
#app main .table { border: 1px solid var(--workspace-line); border-radius: 10px; overflow-x: auto; }
#app main table { width: 100%; color: var(--workspace-ink); font-variant-numeric: tabular-nums; }
#app main table th { background: #eef3f7; color: #40556d; font-size: 12px; font-weight: 700; line-height: 1.5; white-space: nowrap; }
#app main table th, #app main table td { padding: 13px 16px; border-bottom: 1px solid #e6edf3; vertical-align: middle; }
#app main table tbody tr:nth-child(even) { background: #f8fafc; }
#app main table tbody tr:hover { background: #eef7f7; }
#app main table tbody tr:last-child td { border-bottom: 0; }
#app main .workspace-report table th:last-child,
#app main .workspace-report table td:last-child { text-align: right !important; }
#app .workspace-empty { padding: 28px 16px; text-align: center; color: var(--workspace-muted); }
#app .workspace-form-note { color: var(--workspace-muted); font-size: 13px; line-height: 1.6; margin: -8px 0 20px; }
#app .workspace-required-marker { color: #a82e46; font-weight: 800; }
#app .workspace-report caption { text-align: left; padding: 0 0 12px; color: var(--workspace-muted); font-size: 13px; }
#app .workspace-report .workspace-empty { padding: 28px 16px !important; text-align: center !important; }
#app .h420-footer-panel { color: var(--workspace-muted); background: #f8fafc; box-shadow: none; }
@media (max-width: 1000px) {
  #app .h420-summary-cards, #app .h420-status-panel .h420-status-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
  #app main { padding: 18px 12px 32px; }
  #app main .panel { padding: 18px 14px; border-radius: 12px; }
  #app main form .grid { grid-template-columns: minmax(0, 1fr); gap: 0; }
  #app .h420-summary-cards { gap: 10px; }
  #app .h420-summary-cards > .card { padding: 15px 12px; }
  #app .h420-status-panel .h420-status-cards { gap: 8px; }
  #app .h420-status-panel .h420-status-cards > .card { padding: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  #app main *, #app main *::before, #app main *::after { transition: none !important; animation: none !important; }
}
/* Stronger card palette and lightly tinted form surfaces. These scoped
   overrides replace earlier !important colors in the legacy theme. */
#app .h420-summary-cards > .card {
  background: #245ad4 !important;
  border: 1px solid #245ad4 !important;
  color: #fff !important;
  box-shadow: 0 7px 18px #245ad422 !important;
}
#app .h420-summary-cards > .card:nth-child(2) {
  background: #087e76 !important; border-color: #087e76 !important;
}
#app .h420-summary-cards > .card:nth-child(3) {
  background: #7043c1 !important; border-color: #7043c1 !important;
}
#app .h420-summary-cards > .card:nth-child(4) {
  background: #a54a10 !important; border-color: #a54a10 !important;
}
#app .h420-summary-cards > .card b { color: #fff !important; }
#app .h420-status-panel .h420-status-cards > .card {
  background: #e7efff !important; border-color: #a8c1f5 !important;
  border-left: 4px solid #3868ce !important; color: #213b69 !important;
}
#app .h420-status-panel .h420-status-cards > .card:nth-child(1),
#app .h420-status-panel .h420-status-cards > .card:nth-child(3),
#app .h420-status-panel .h420-status-cards > .card:nth-child(4) {
  background: #d8f4e8 !important; border-color: #90d2b6 !important;
  border-left-color: #12835b !important; color: #15583e !important;
}
#app .h420-status-panel .h420-status-cards > .card:nth-child(2),
#app .h420-status-panel .h420-status-cards > .card:nth-child(5),
#app .h420-status-panel .h420-status-cards > .card:nth-child(7),
#app .h420-status-panel .h420-status-cards > .card:nth-child(8),
#app .h420-status-panel .h420-status-cards > .card:nth-child(9) {
  background: #fff0cf !important; border-color: #ebc578 !important;
  border-left-color: #b26a12 !important; color: #744414 !important;
}
#app .h420-status-panel .h420-status-cards > .card:nth-child(6),
#app .h420-status-panel .h420-status-cards > .card:nth-child(11),
#app .h420-status-panel .h420-status-cards > .card:nth-child(12) {
  background: #ffe2e9 !important; border-color: #eba4b5 !important;
  border-left-color: #bd3655 !important; color: #84283d !important;
}
#app .h420-status-panel .h420-status-cards > .card b { color: inherit !important; }
#app main .panel:has(form) {
  background: #f0f6ff !important; border-color: #b8cfeb !important;
}
#app main form h4 {
  background: #dcebf9; color: #20466d; border-bottom: 1px solid #b6cde4;
  padding: 13px 15px; border-radius: 9px; margin-bottom: 22px;
}
#app main form .h392-section { background: #f0f6ff; border-color: #b8cfeb; }
#app main form .field input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="range"]):not([type="color"]),
#app main form .field select, #app main form .field textarea {
  background: #f2faf8 !important; border-color: #a7cfc7 !important;
  color: #173f3b !important;
}
#app main form .field input:focus, #app main form .field select:focus,
#app main form .field textarea:focus { background: #fff !important; border-color: #176d79 !important; }
#app main form .field input:disabled, #app main form .field select:disabled,
#app main form .field textarea:disabled { background: #e5eaf0 !important; border-color: #c0cad6 !important; color: #52647a !important; }
/* Report surfaces share the approved blue and teal palette. */
#app main .workspace-report,
#app main .panel:has(.h428-shared-wrapper):not(:has(form)),
#app main .panel:has(> .table):not(:has(form)),
#app main .panel:has(> table):not(:has(form)) {
  background: #eaf2ff !important;
  border-color: #adc7eb !important;
}
#app main .workspace-report > h3,
#app main .panel:has(> .table):not(:has(form)) > h3,
#app main .panel:has(> table):not(:has(form)) > h3 {
  color: #224c82 !important;
}
#app main .table { background: #edf8f7; border-color: #a8cbc9; }
#app main table th {
  background: #176d79 !important;
  color: #fff !important;
  border-bottom-color: #125661 !important;
}
#app main table tbody tr,
#app main table tbody tr td { background: #edf8f7 !important; }
#app main table tbody tr:nth-child(even),
#app main table tbody tr:nth-child(even) td { background: #deedf9 !important; }
#app main table tbody tr:hover,
#app main table tbody tr:hover td { background: #ccece7 !important; }
#app main table tbody td { border-bottom-color: #bfd6df !important; }
/* Filters and prepaid forms also contain controls outside .field wrappers. */
#app main input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="range"]):not([type="color"]):not([type="button"]):not([type="submit"]):not([type="reset"]):not([type="file"]),
#app main select, #app main textarea {
  background-color: #f2faf8 !important;
  border-color: #a7cfc7 !important;
}
#app main input:focus, #app main select:focus, #app main textarea:focus { background-color: #fff !important; }
#app main input:disabled, #app main select:disabled, #app main textarea:disabled {
  background-color: #e5eaf0 !important; border-color: #c0cad6 !important;
}
/* These existing dialogs are mounted outside the main workspace. */
body:has(#app.top-layout) .workspace-dialog > div {
  background: #f0f6ff !important;
  border: 1px solid #b8cfeb;
}
body:has(#app.top-layout) .workspace-dialog input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
body:has(#app.top-layout) .workspace-dialog select,
body:has(#app.top-layout) .workspace-dialog textarea {
  background: #f2faf8 !important; border: 1px solid #a7cfc7;
  border-radius: 9px; min-height: 44px; padding: 10px 12px; color: #173f3b;
}
body:has(#app.top-layout) .workspace-dialog input:focus-visible,
body:has(#app.top-layout) .workspace-dialog select:focus-visible,
body:has(#app.top-layout) .workspace-dialog textarea:focus-visible {
  outline: 3px solid #176d79; outline-offset: 3px; background: #fff !important;
}
/* One button scale across lists, forms, report toolbars and existing dialogs.
   Usage-period controls are information cards, so keep their card layout. */
:is(#app main, #app .top-account-area, body:has(#app.top-layout) .workspace-dialog)
button:not(.adminUsageRange):not(.usagePeriod) {
  display: inline-flex;
  flex: 0 0 auto !important;
  align-items: center;
  justify-content: center;
  gap: 8px;
  box-sizing: border-box;
  height: var(--workspace-button-height, 44px) !important;
  min-height: var(--workspace-button-height, 44px) !important;
  min-width: 120px !important;
  width: var(--workspace-button-width, 144px) !important;
  max-width: 100%;
  padding: 0 16px !important;
  margin: 0 !important;
  border: 1px solid var(--workspace-button-bg, #176d79) !important;
  border-radius: 9px !important;
  background: var(--workspace-button-bg, #176d79) !important;
  color: #fff !important;
  font: 600 13px/1.2 "Segoe UI", Arial, sans-serif !important;
  text-align: center !important;
  text-decoration: none;
  text-transform: none;
  letter-spacing: normal;
  white-space: normal;
  vertical-align: middle;
  box-shadow: none !important;
  transform: none !important;
  cursor: pointer;
}
:is(#app main, #app .top-account-area, body:has(#app.top-layout) .workspace-dialog)
button:is(.secondary, [id*="cancel" i], [id^="back" i], .h428-prev, .h428-next,
  #customerPrevPage, #customerNextPage, #otherPrevPage, #otherNextPage,
  #otherFilterReset, #operatorChangePasswordToggle, #pcdModalClose) {
  --workspace-button-bg: #52647a;
}
:is(#app main, #app .top-account-area, body:has(#app.top-layout) .workspace-dialog)
button:is(.deleteCustomer, .account-delete-btn, .ip-pool-delete-btn,
  .nas-disable-btn, .user-group-delete-btn, .pkg-delete-btn,
  [data-pcd-action="block"], [data-pcd-action="disconnect"],
  #radiusRestartButton, .top-logout-btn) {
  --workspace-button-bg: #a8454f;
}
:is(#app main, #app .top-account-area, body:has(#app.top-layout) .workspace-dialog)
button:not(.adminUsageRange):not(.usagePeriod):not(:disabled):not([aria-disabled="true"]):hover {
  filter: brightness(.92) !important;
}
:is(#app main, #app .top-account-area, body:has(#app.top-layout) .workspace-dialog)
button:not(.adminUsageRange):not(.usagePeriod):is(:disabled, [aria-disabled="true"]) {
  opacity: .52 !important;
  cursor: not-allowed !important;
  filter: none !important;
  box-shadow: none !important;
}
:is(#app main, #app .top-account-area, body:has(#app.top-layout) .workspace-dialog)
button[hidden] { display: none !important; }
:is(#app main, body:has(#app.top-layout) .workspace-dialog)
form > button,
:is(#app main, body:has(#app.top-layout) .workspace-dialog)
form button[type="submit"],
#app main .h392-actions > button { --workspace-button-width: 192px; }
#app .top-account-area button { --workspace-button-width: 120px; }
#app main :is(#viewOtherManager, #viewOtherDealer, #viewOtherSubdealer) {
  --workspace-button-width: 120px;
}
#app main div:has(> :is(#viewOtherManager, #viewOtherDealer, #viewOtherSubdealer)) {
  grid-template-columns: minmax(0, 1fr) 120px !important;
}
#app main #pkgSaveBtn {
  background: var(--workspace-button-bg, #176d79) !important;
}
:is(#app main, body:has(#app.top-layout) .workspace-dialog)
td button:not(.adminUsageRange):not(.usagePeriod) {
  --workspace-button-width: 120px;
  --workspace-button-height: 36px;
}
:is(#app main, body:has(#app.top-layout) .workspace-dialog) #pcdModalClose {
  width: 44px !important;
  min-width: 44px !important;
  padding: 0 !important;
  font-size: 22px !important;
  flex: 0 0 44px;
}
#app main :is(.h428-shared-toolbar, .h428-pagination, .h418-radius-actions,
  .h409-permission-actions, .h392-actions, .pcd-mac-actions, .pcd-package-actions),
#app .top-account-area,
body:has(#app.top-layout) .workspace-dialog .owner-modal-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center !important;
  gap: 8px !important;
}
#app main .field > div:has(> button) {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}
#app main .field > div:has(> button) > :is(input, select) {
  flex: 1 1 160px;
  min-width: 0;
}
:is(#app main, body:has(#app.top-layout) .workspace-dialog)
button:not(.adminUsageRange):not(.usagePeriod) + button {
  margin-inline-start: 8px !important;
}
#app main :is(.h428-shared-toolbar, .h428-pagination, .h418-radius-actions,
  .h409-permission-actions, .h392-actions, .pcd-mac-actions, .pcd-package-actions) > button,
body:has(#app.top-layout) .workspace-dialog .owner-modal-actions > button {
  margin: 0 !important;
}
:is(#app main, body:has(#app.top-layout) .workspace-dialog)
td button:not(.adminUsageRange):not(.usagePeriod) {
  margin: 4px !important;
}
/* Export tools are secondary utilities: a compact, consistent group. */
:is(#app main, body:has(#app.top-layout) .workspace-dialog)
button:is(.h428-csv-btn, .h428-excel-btn, .h428-print-btn, .h428-pdf-btn,
  .h428-all-csv-btn, .h428-all-excel-btn, .h428-all-print-btn, .h428-all-pdf-btn,
  #h428CsvCustomers, #h428ExcelCustomers, #h428PrintCustomers, #h428PdfCustomers,
  #paymentsReportPrint, #exportPrepaidExcel, #printPrepaidCards,
  #otherExportCsv, #otherExportExcel, #otherExportPrint, #otherExportPdf,
  .printExistingReceipt) {
  --workspace-button-height: 28px;
  --workspace-button-width: 60px;
  min-width: 60px !important;
  padding: 0 6px !important;
  font-size: 11px !important;
  line-height: 1.1 !important;
}
:is(#app main, body:has(#app.top-layout) .workspace-dialog)
button:is(.h428-all-csv-btn, .h428-all-excel-btn, .h428-all-print-btn,
  .h428-all-pdf-btn, #exportPrepaidExcel) {
  --workspace-button-width: 104px;
}
#app main select:is(#h428CustomerPageSize, .h428-page-size) {
  height: 30px !important;
  min-height: 30px !important;
  width: 72px !important;
  min-width: 72px !important;
  padding: 2px 8px !important;
  font-size: 12px !important;
  line-height: 1.2 !important;
  vertical-align: middle;
}
#app main button:is(.h428-prev, .h428-next, #customerPrevPage,
  #customerNextPage, #otherPrevPage, #otherNextPage) {
  --workspace-button-height: 32px;
  --workspace-button-width: 84px;
  min-width: 84px !important;
  padding: 0 10px !important;
  font-size: 12px !important;
}
#app main #customerList td:has(:is(.changeCustomerOwner, .deleteCustomer, .restoreCustomer)) {
  vertical-align: bottom !important;
}
#app main #customerList .customer-unassigned {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: 120px !important;
  min-height: 36px !important;
  padding: 0 8px !important;
  margin: 4px !important;
  border-radius: 9px !important;
  font-size: 12px !important;
  line-height: 1.2;
  vertical-align: middle;
}
#app main .pcd-summary-panel { background: #f4f8ff !important; border-color: #b5cce9 !important; }
#app main .pcd-bio-panel { background: #e9f3ff !important; border-color: #a9c8eb !important; }
#app main .pcd-bio-panel .grid > p {
  margin: 0; padding: 14px 16px; border: 1px solid #c6dbef;
  border-radius: 10px; background: #f8fcff; line-height: 1.8;
}
#app main .pcd-bio-panel .grid > p b { color: #24527b; }
#app main .pcd-bio-panel > p { color: #304e6a; line-height: 1.8; }
#app main #primroseCustomerOverview .pcd-card-action {
  --workspace-button-width: 100px;
  --workspace-button-height: 30px;
  min-width: 100px !important;
  padding: 0 8px !important;
  font-size: 11px !important;
}
#app main .pcd-stat-detail {
  display: block; margin-top: 8px; color: #40556b;
  font-size: 12px; line-height: 1.5; overflow-wrap: anywhere;
}
#app main .pcd-stat:has(.pcd-stat-detail) { padding-bottom: 52px; }
#app main .pcd-usage-panel { background: #edf8f4 !important; border-color: #a5cebf !important; }
#app main .pcd-usage-buttons { gap: 8px; }
#app main .pcd-usage-buttons .usagePeriod {
  flex: 1 1 132px; min-width: 120px; width: 148px; min-height: 68px;
  padding: 12px; border: 1px solid #9dccc2; border-radius: 10px;
  color: #164e46; background: #d9f0e9 !important; border-color: #9dccc2 !important; box-shadow: none;
}
#app main .pcd-usage-buttons .usagePeriod[data-range="7"] { background: #dfebff !important; border-color: #a5bee8 !important; color: #264f85; }
#app main .pcd-usage-buttons .usagePeriod[data-range="month"] { background: #eae2fa !important; border-color: #bfabe0 !important; color: #594179; }
#app main .pcd-usage-buttons .usagePeriod[data-range="live"] { background: #fff0d3 !important; border-color: #ddbd7d !important; color: #79521b; }
#app main .pcd-usage-buttons .usagePeriod[aria-pressed="true"] { box-shadow: 0 0 0 2px currentColor; }
#app main #operatorUsageGraph {
  background: #e6effb; border: 1px solid #abc5e5; border-radius: 12px;
  padding: 16px; color: #284666;
}
#app main #operatorUsageGraph svg { background: #f3f7ff; border-radius: 8px; }
#app main .pcd-traffic-panel { background: #fff3df !important; border-color: #dfc18e !important; }
#app main .pcd-traffic-panel > h3 { color: #79521b; }
#app main .pcd-balance-history { background: #f0eafd !important; border-color: #c6b4e6 !important; }
#app main .pcd-balance-history > h3 { color: #5d4286; }
#app main .pcd-balance-history table th { background: #66518a !important; }
#app main .pcd-balance-history table tbody tr td { background: #f5f0ff !important; }
#app main .pcd-balance-history table tbody tr:nth-child(even) td { background: #e9e0f8 !important; }
/* Company branding is the dashboard entry point; the account card and
   navigation controls remain visible at narrow widths. */
#app .top-brand-row {
  background: linear-gradient(105deg, #e5f0ff, #ecf8f5 60%, #f2edff) !important;
  border-bottom: 1px solid #b9cfe3;
  gap: 16px;
}
#app #workspaceHome {
  display: flex !important; align-items: center; gap: 14px;
  min-height: 64px; max-width: 100%; padding: 8px 14px;
  border: 1px solid #b5cfe6; border-radius: 12px;
  background: #f5fbff; text-align: left; cursor: pointer;
  box-shadow: 0 3px 10px #1b52780a;
}
#app #workspaceHome:hover { background: #e3f3fb; border-color: #5a9eaf; }
#app #workspaceHome:focus-visible { outline: 3px solid #176d79; outline-offset: 3px; }
#app #workspaceHome .top-brand-text strong { color: #174e77; font-size: 17px; }
#app #workspaceHome .top-brand-text span { color: #3c6c7b; }
#app #accountInfo {
  display: flex; flex-direction: column; gap: 5px;
  padding: 10px 14px; border: 1px solid #c9bde2; border-radius: 12px;
  background: #f2ecfc; color: #513c73; min-width: 160px;
}
#app #accountInfo b { color: #42356d; font-weight: 750; }
#app #accountInfo > span { color: #245d65; font-size: 12px; font-weight: 600; }
@media (max-width: 900px) {
  #app .top-brand-row { display: grid !important; grid-template-columns: 100px minmax(88px, 1fr) minmax(88px, 1fr); align-items: center; padding: 10px 12px; gap: 8px 6px; }
  #app #workspaceHome { grid-column: 1; grid-row: 1; width: 100px; min-width: 0; min-height: 48px; padding: 4px 7px; }
  #app #workspaceHome .top-logo { width: 84px !important; max-width: 84px !important; max-height: 44px !important; }
  #app #workspaceHome .top-brand-text { display: none; }
  #app .top-account-area { display: contents !important; }
  #app #workspaceBack { grid-column: 2; grid-row: 1; justify-self: center; }
  #app #refresh { grid-column: 3; grid-row: 1; justify-self: end; }
  #app #logout { grid-column: 3; grid-row: 2; justify-self: end; }
  #app #accountInfo { grid-column: 1 / 3; grid-row: 2; min-width: 0; padding: 6px 10px; }
  #app :is(#workspaceBack, #refresh, #logout) {
    --workspace-button-width: 88px;
    --workspace-button-height: 36px;
    min-width: 88px !important;
    padding: 0 10px !important;
    font-size: 12px !important;
  }
}
html:has(#app.top-layout) { scroll-behavior: auto; }
#app.top-layout main {
  padding-top: calc(var(--workspace-header-height, 154px) + 24px) !important;
}
#app.top-layout #content { overflow-anchor: none; }
#app.top-layout #content :is(.panel, form) {
  scroll-margin-top: calc(var(--workspace-header-height, 154px) + 20px);
}
@media print {
  #app .top-shell, #app .workspace-header button { display: none !important; }
  #app.top-layout main { padding-top: 0 !important; }
  #app main { padding: 0; max-width: none; }
  #app main .panel { box-shadow: none; border-color: #aaa; }
  #app main .table { overflow: visible; }
  #app main table { min-width: 0 !important; }
  #app main table thead { display: table-header-group; }
  #app main table tr { break-inside: avoid; }
  #app main table th, #app main table tbody tr,
  #app main table tbody tr td { background: #fff !important; color: #172b43 !important; }
}


/* Messaging gateway cards: aligned edges and distinct, readable surfaces. */
#app main .primrose-gateway-grid > .primrose-gateway-card {
  margin: 0 !important; align-self: stretch;
  background: var(--gateway-light) !important;
  border-color: var(--gateway-border) !important;
}
#app main .primrose-gateway-card > h3 {
  min-height: 68px; box-sizing: border-box;
  display: flex; align-items: center;
  color: #244967 !important; background: #dceaff !important;
}
#app main .primrose-gateway-whatsapp { --gateway-light: #e7f6ef; --gateway-border: #9dceb6; }
#app main .primrose-gateway-whatsapp > h3 { color: #215e49 !important; background: #ccebdc !important; }
#app main .primrose-gateway-sms_local { --gateway-light: #f0ebfa; --gateway-border: #c7b5e2; }
#app main .primrose-gateway-sms_local > h3 { color: #594273 !important; background: #e3d8f3 !important; }
#app main .primrose-gateway-card :is(input:not([type=checkbox]), select) { background: #ffffff !important; }
#app main .primrose-gateway-card p[id$="GatewayStatus"] { background: #fff3d9; color: #71521a; border: 1px solid #e6cf9c; }
#app main .primrose-gateway-card p[id$="GatewayCredentialStatus"] { background: #ffffffa6; color: #365666; }
/* Read-only incoming WhatsApp messages. */
#app main .whatsapp-inbox-panel { background: #edf8f3 !important; border-color: #acd6c2 !important; }
#app main .whatsapp-inbox-toolbar { display: flex; flex-wrap: wrap; align-items: end; gap: 12px; margin: 18px 0; }
#app main .whatsapp-inbox-toolbar label { flex: 1 1 260px; }
#app main .whatsapp-inbox-toolbar input { display: block; width: 100%; box-sizing: border-box; }
#app main #waInboxStatus { padding: 12px; background: #dceee7; border-radius: 9px; color: #245b47; }
#app main .whatsapp-inbox-table { overflow-x: auto; }
#app main .whatsapp-inbox-table td { white-space: pre-wrap; overflow-wrap: anywhere; vertical-align: top; }
#app main .whatsapp-inbox-table th:last-child { min-width: 240px; }
#app main .whatsapp-inbox-pages { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 16px; }
#app :is(#waInboxPrevious, #waInboxNext) { --workspace-button-width: 84px; --workspace-button-height: 32px; min-width: 84px !important; }

#app main .wa-reply-composer { margin-top: 20px; padding: 20px; border: 1px solid #a6c9b7; background: #e0f1e8; border-radius: 12px; }
#app main .wa-reply-composer[hidden] { display: none !important; }
#app main .wa-reply-composer textarea { display: block; width: 100%; min-height: 120px; box-sizing: border-box; margin: 8px 0 14px; }
#app main .wa-reply-actions { display: flex; flex-wrap: wrap; gap: 10px; }
#app main #waReplyQuote { padding: 12px; border-left: 3px solid #43916f; background: #f4faf7; white-space: pre-wrap; overflow-wrap: anywhere; }
#app main .wa-reply-history-item { border-top: 1px solid #b3cdbf; padding: 10px 0; }
#app main .wa-reply-history-item p { white-space: pre-wrap; overflow-wrap: anywhere; }
#app main #waReplyResult { font-weight: 600; }
#app main .whatsapp-inbox-table .wa-inbox-reply { --workspace-button-width: 120px; --workspace-button-height: 36px; }

/* Match reply actions despite generic submit-button sizing. */
#app :is(#waReplySend, #waReplyCancel) {
 --workspace-button-width: 160px; --workspace-button-height: 44px;
 width: 160px !important; min-width: 160px !important; height: 44px !important; min-height: 44px !important;
 padding: 0 16px !important; box-sizing: border-box;
}
#app main #whatsappGatewayStatus[data-connection-state="connected"] { background: #d8f1e3; border-color: #95c9aa; color: #205b3a; }
#app main #whatsappGatewayAutomationStatus { background: #edf2f7; color: #4f6171; padding: 10px 12px; border-radius: 8px; }
#app main #whatsappGatewayConnectionDetail { font-size: 12px; color: #476272; }

#app main .wa-inbox-read-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 54px; padding: 5px 9px; border-radius: 16px; font-size: 12px; font-weight: 700; }
#app main .wa-inbox-read-badge.is-new { background: #d6e8ff; color: #1d528c; }
#app main .wa-inbox-read-badge.is-read { background: #e1eee6; color: #41604d; }
#app main .whatsapp-inbox-table .wa-inbox-mark-read { --workspace-button-width: 120px; --workspace-button-height: 36px; margin-top: 6px !important; }