/* Maniflow License Portal: the ERP login surface (DESIGN.md tokens, Sarabun, white calm surface), self-hosted. */
@font-face { font-family: "Sarabun"; font-weight: 400; font-display: swap; src: url("/assets/sarabun-thai-400-normal.woff2") format("woff2"); unicode-range: U+0E01-0E5B, U+200C-200D, U+25CC; }
@font-face { font-family: "Sarabun"; font-weight: 400; font-display: swap; src: url("/assets/sarabun-latin-400-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Sarabun"; font-weight: 500; font-display: swap; src: url("/assets/sarabun-thai-500-normal.woff2") format("woff2"); unicode-range: U+0E01-0E5B, U+200C-200D, U+25CC; }
@font-face { font-family: "Sarabun"; font-weight: 500; font-display: swap; src: url("/assets/sarabun-latin-500-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Sarabun"; font-weight: 600; font-display: swap; src: url("/assets/sarabun-thai-600-normal.woff2") format("woff2"); unicode-range: U+0E01-0E5B, U+200C-200D, U+25CC; }
@font-face { font-family: "Sarabun"; font-weight: 600; font-display: swap; src: url("/assets/sarabun-latin-600-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Sarabun"; font-weight: 700; font-display: swap; src: url("/assets/sarabun-thai-700-normal.woff2") format("woff2"); unicode-range: U+0E01-0E5B, U+200C-200D, U+25CC; }
@font-face { font-family: "Sarabun"; font-weight: 700; font-display: swap; src: url("/assets/sarabun-latin-700-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Sarabun"; font-weight: 800; font-display: swap; src: url("/assets/sarabun-thai-800-normal.woff2") format("woff2"); unicode-range: U+0E01-0E5B, U+200C-200D, U+25CC; }
@font-face { font-family: "Sarabun"; font-weight: 800; font-display: swap; src: url("/assets/sarabun-latin-800-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
:root {
  --erp-blue: #0058be; --erp-blue-soft: #edf6ff; --erp-canvas-soft: #ffffff; --erp-control-border: #c3ccd8;
  --erp-danger: #ef4444; --erp-field: #f8fafc; --erp-ink: #0f172a; --erp-line: #e7edf5; --erp-muted: #64748b;
  --erp-success: #16a34a; --erp-radius-control: 10px; --erp-font-family: "Sarabun", system-ui, sans-serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--erp-canvas-soft); color: var(--erp-ink); font-family: var(--erp-font-family); font-size: 14px; letter-spacing: 0; }
main { display: grid; min-height: 100vh; place-items: center; padding: 24px; }
section { width: min(500px, 100%); padding: 20px 12px; min-width: 0; }
.brand-logo { display: block; width: min(220px, 100%); height: auto; margin: 0 auto 24px; }
h1 { margin: 0 0 12px; font-size: 22px; line-height: 1.3; font-weight: 600; }
h2 { margin: 0 0 8px; font-size: 16px; font-weight: 600; }
p { margin: 0 0 16px; color: var(--erp-muted); font-size: 13px; line-height: 1.6; }
.stack { display: grid; gap: 16px; }
.detail { display: grid; grid-template-columns: 1fr auto; gap: 8px 16px; padding: 16px 0; border-block: 1px solid var(--erp-line); font-size: 13px; margin: 0; }
.detail dt { color: var(--erp-muted); }
.detail dd { margin: 0; text-align: right; overflow-wrap: anywhere; }
.notice { padding: 10px 12px; border: 1px solid var(--erp-line); border-radius: var(--erp-radius-control); background: var(--erp-field); font-size: 13px; line-height: 1.5; }
.error { color: var(--erp-danger); font-size: 13px; font-weight: 600; line-height: 1.5; overflow-wrap: anywhere; }
.success { color: var(--erp-success); font-weight: 600; }
.small { font-size: 13px; color: var(--erp-muted); overflow-wrap: anywhere; }
form { display: grid; gap: 16px; margin: 0; }
label.check { display: flex; gap: 8px; align-items: flex-start; font-size: 13px; line-height: 1.5; }
label.check input { width: 16px; height: 16px; margin-top: 2px; }
.button { display: inline-flex; align-items: center; justify-content: center; min-height: 42px; padding: 0 16px; border: 1px solid var(--erp-control-border); border-radius: var(--erp-radius-control); background: #fff; color: var(--erp-ink); font: inherit; font-weight: 600; text-decoration: none; cursor: pointer; }
.button.primary { width: 100%; border: 0; background: linear-gradient(100deg, #6d3bff 0%, #19bdf2 100%); color: #fff; }
.button.primary:hover { filter: brightness(.97); }
.button:focus-visible { outline: 2px solid var(--erp-blue); outline-offset: 2px; }
.account { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: space-between; margin-bottom: 16px; font-size: 13px; color: var(--erp-muted); }
.account form { display: inline; }
.account a { color: var(--erp-blue); }
.link-button { border: 0; background: none; padding: 0; color: var(--erp-blue); font: inherit; cursor: pointer; }
.licenses { list-style: none; padding: 0; margin: 0; }
.licenses li { display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; padding: 12px 0; border-bottom: 1px solid var(--erp-line); font-size: 13px; }
.licenses small { grid-column: 1 / -1; color: var(--erp-muted); overflow-wrap: anywhere; }
/* Order pages (customer): a wider column, plan options as radio rows, the PromptPay QR. */
section.wide { width: min(720px, 100%); }
fieldset { display: grid; gap: 10px; min-width: 0; margin: 0; padding: 0; border: 0; }
legend { margin-bottom: 10px; padding: 0; font-size: 15px; font-weight: 700; }
legend small { margin-left: 6px; color: var(--erp-muted); font-size: 12px; font-weight: 500; }
.option { display: flex; gap: 10px; align-items: flex-start; padding: 12px; border: 1px solid var(--erp-line); border-radius: var(--erp-radius-control); cursor: pointer; }
.option:has(input:checked) { border-color: var(--erp-blue); background: var(--erp-blue-soft); }
.option.disabled { background: var(--erp-field); cursor: not-allowed; }
.option input { flex: none; width: 16px; height: 16px; margin-top: 3px; }
.option-body { display: grid; flex: 1; gap: 3px; min-width: 0; }
.option-head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 12px; font-size: 14px; }
.pair { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; }
.pay { display: grid; justify-items: center; gap: 10px; padding: 16px; border: 1px solid var(--erp-line); border-radius: 12px; }
.pay > p { margin: 0; text-align: center; }
.qr { width: min(240px, 70vw); height: auto; }
.detail.compact { width: 100%; padding-bottom: 0; border-bottom: 0; }
.link { color: var(--erp-blue); font-size: 13px; }
.row-action { grid-column: 1 / -1; color: var(--erp-blue); font-size: 13px; font-weight: 600; }
.licenses a { color: var(--erp-ink); }
.order-status { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0; }
details.small summary { cursor: pointer; }
details.small p { margin: 8px 0 0; color: var(--erp-ink); }
@media (max-width: 480px) {
  .pair { grid-template-columns: minmax(0, 1fr); }
  main { padding: 18px; } section { padding: 16px 6px; } .brand-logo { width: min(200px, 100%); margin-bottom: 22px; }
  .button { min-height: 44px; } label.check input { width: 20px; height: 20px; }
}

/* ── Staff console: the Maniflow ERP shell. Values measured from the ERP (topbar 60px, app chips, page header with
   breadcrumb, RecordTable, erp-status, erp-button, detail field grid). Customer pages above keep the login surface. ── */
body.staff { background: #fff; font-size: 13px; }
.icon { width: 16px; height: 16px; flex: none; }
.topbar { position: sticky; top: 0; z-index: 10; display: flex; align-items: center; gap: 9px; height: 60px; padding: 0 14px;
  background: #fff; border-bottom: 1px solid var(--erp-line); }
.topbar .brand { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 38px; flex: none; }
.topbar .brand img { width: 36px; height: auto; }
.app-chips { display: flex; gap: 8px; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.app-chips::-webkit-scrollbar { display: none; }
.app-chip { display: inline-flex; align-items: center; gap: 7px; height: 38px; padding: 0 12px; flex: none; border: 1px solid var(--erp-line);
  border-radius: 10px; background: #fff; color: #334155; font-size: 12px; font-weight: 800; text-decoration: none; white-space: nowrap; }
.app-chip:hover { background: var(--erp-field); }
.app-chip.active { background: var(--erp-blue-soft); color: var(--erp-blue); border-color: rgba(11, 111, 232, .24); }
.app-chip .count { min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: #dc2626; color: #fff; font-size: 11px; line-height: 18px; text-align: center; }
.tabs { display: flex; gap: 6px; margin-bottom: 12px; overflow-x: auto; }
.tab { display: inline-flex; align-items: center; height: 32px; padding: 0 12px; border: 1px solid var(--erp-line); border-radius: 8px; color: #334155;
  font-size: 12px; font-weight: 800; text-decoration: none; white-space: nowrap; }
.tab.active { border-color: rgba(11, 111, 232, .24); background: var(--erp-blue-soft); color: var(--erp-blue); }
.slip { display: block; max-width: 100%; max-height: 420px; margin-top: 12px; border: 1px solid var(--erp-line); border-radius: 10px; }
.party { margin: 0 0 8px; color: var(--erp-ink); font-size: 13px; line-height: 1.6; }
.fields .meta { display: block; color: var(--erp-muted); font-size: 12px; font-weight: 500; }
.fields a { color: var(--erp-blue); font-weight: 700; text-decoration: none; }
.fields a:hover { text-decoration: underline; }
.erp-section > * + .field, .erp-section > .field + .small { margin-top: 12px; }
.topbar-spacer { flex: 1 1 auto; }
.user-menu { position: relative; flex: none; }
.user-menu summary { display: flex; align-items: center; gap: 9px; height: 44px; padding: 0 6px; border-radius: 10px; cursor: pointer; list-style: none; }
.user-menu summary::-webkit-details-marker { display: none; }
.user-menu summary:hover { background: var(--erp-field); }
.user-menu summary:focus-visible { outline: 2px solid var(--erp-blue); outline-offset: 2px; }
.avatar { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 999px; background: #0f172a; color: #fff; font-size: 12px; font-weight: 800; flex: none; }
.user-text { display: grid; line-height: 1.25; min-width: 0; }
.user-text strong { max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; font-weight: 800; }
.user-text span { color: var(--erp-muted); font-size: 11px; font-weight: 600; }
.user-menu .menu { position: absolute; right: 0; top: calc(100% + 6px); display: grid; min-width: 240px; padding: 6px; border: 1px solid var(--erp-line);
  border-radius: 12px; background: #fff; box-shadow: 0 12px 32px rgba(15, 31, 61, .12); }
.user-menu .menu-email { padding: 8px 10px; border-bottom: 1px solid var(--erp-line); margin-bottom: 4px; color: var(--erp-muted); font-size: 12px; overflow-wrap: anywhere; }
.user-menu .menu a, .user-menu .menu button { display: flex; align-items: center; width: 100%; min-height: 36px; padding: 0 10px; border: 0; border-radius: 8px;
  background: none; color: var(--erp-ink); font: inherit; font-size: 13px; font-weight: 700; text-align: left; text-decoration: none; cursor: pointer; }
.user-menu .menu a:hover, .user-menu .menu button:hover { background: var(--erp-field); }
.user-menu .menu form { display: block; }

main.workspace { display: block; place-items: normal; min-height: 0; padding: 20px; min-width: 0; }
.page-header { margin-bottom: 16px; }
.breadcrumb { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin-bottom: 6px; color: var(--erp-muted); font-size: 12px; font-weight: 740; }
.breadcrumb a { color: var(--erp-blue); text-decoration: none; }
.breadcrumb a:hover { text-decoration: underline; }
.title-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; min-width: 0; }
.title-block { display: flex; align-items: center; gap: 12px; min-width: 0; }
.title-block h1 { margin: 0; color: var(--erp-ink); font-size: 23px; line-height: 1.14; font-weight: 800; overflow-wrap: anywhere; }
.page-header .subtitle { margin: 6px 0 0; color: var(--erp-muted); font-size: 13px; font-weight: 500; }
.header-search { display: flex; align-items: center; gap: 8px; flex: 0 1 480px; height: 32px; margin: 0 auto; padding: 0 10px;
  border: 1px solid var(--erp-control-border); border-radius: 8px; background: #fff; color: var(--erp-muted); }
.header-search:focus-within { border-color: var(--erp-blue); outline: 2px solid rgba(0, 88, 190, .18); }
.header-search input { flex: 1; min-width: 0; height: 100%; border: 0; outline: 0; background: none; font: inherit; font-size: 13px; color: var(--erp-ink); }
.header-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-left: auto; }

.erp-button { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 32px; padding: 0 12px; border: 1px solid var(--erp-line);
  border-radius: 8px; background: #fff; color: var(--erp-blue); font: inherit; font-size: 12px; font-weight: 800; text-decoration: none; white-space: nowrap; cursor: pointer; }
.erp-button:hover { background: var(--erp-blue-soft); }
.erp-button.primary { border-color: var(--erp-blue); background: var(--erp-blue); color: #fff; }
.erp-button.primary:hover { background: #004ea9; }
.erp-button.danger { border-color: rgba(239, 68, 68, .3); background: #fff1f2; color: #dc2626; }
.erp-button.danger:hover { background: #ffe4e6; }
.erp-button.icon-only { width: 36px; height: 36px; padding: 0; color: var(--erp-blue); }
.erp-button:focus-visible, .app-chip:focus-visible { outline: 2px solid var(--erp-blue); outline-offset: 2px; }

.erp-status { display: inline-flex; align-items: center; height: 24px; padding: 0 10px; border: 1px solid var(--erp-line); border-radius: 999px;
  background: #e7e8eb; color: #334155; font-size: 12px; font-weight: 720; white-space: nowrap; }
.title-block .erp-status { height: 30px; padding: 0 12px; }
.erp-status.success { border-color: rgba(22, 163, 74, .22); background: rgba(22, 163, 74, .1); color: #15803d; }
.erp-status.danger { border-color: rgba(239, 68, 68, .24); background: rgba(239, 68, 68, .1); color: #b91c1c; }
.erp-status.warning { border-color: rgba(245, 158, 11, .3); background: rgba(245, 158, 11, .12); color: #b45309; }
.erp-status.info { border-color: rgba(11, 111, 232, .24); background: var(--erp-blue-soft); color: var(--erp-blue); }

.record-table { overflow-x: auto; border: 1px solid var(--erp-line); border-radius: 12px; background: #fff; box-shadow: 0 1px 2px rgba(15, 31, 61, .024); }
.record-table table { width: 100%; border-collapse: collapse; }
.record-table th { height: 42px; padding: 5px 12px; border-bottom: 1px solid #eef3f8; background: #f8fafc; color: var(--erp-muted);
  font-size: 12px; font-weight: 760; text-align: left; white-space: nowrap; }
.record-table td { height: 40px; padding: 5px 12px; border-bottom: 1px solid #eef3f8; color: var(--erp-ink); font-size: 13px; font-weight: 620; vertical-align: middle; }
.record-table tbody tr:last-child td { border-bottom: 0; }
.record-table tbody tr:hover td { background: #f8fbff; }
.record-table .num { text-align: right; white-space: nowrap; }
.record-table .nowrap { white-space: nowrap; }
.record-table .row-link { color: var(--erp-ink); font-weight: 800; text-decoration: none; }
.record-table .row-link:hover { color: var(--erp-blue); text-decoration: underline; }
/* A row with a record link opens that record anywhere it is clicked (as in the ERP lists); buttons and forms stay on top. */
.record-table tbody tr:has(.row-link) { position: relative; cursor: pointer; }
.record-table .row-link::after { content: ""; position: absolute; inset: 0; }
.record-table td .erp-button, .record-table td form { position: relative; z-index: 1; }
.record-table td a:not(.row-link):not(.erp-button) { color: var(--erp-blue); font-weight: 800; text-decoration: none; }
.record-table td a:not(.row-link):not(.erp-button):hover { text-decoration: underline; }
.requests.reissue { margin-top: 10px; }
.record-table .meta, .request-title .meta { display: block; color: var(--erp-muted); font-size: 12px; font-weight: 500; overflow-wrap: anywhere; }
.record-table .empty { height: auto; padding: 28px 12px; margin: 0; color: var(--erp-muted); font-weight: 600; text-align: center; }
.table-footer { margin: 10px 0 0; color: var(--erp-muted); font-size: 12px; font-weight: 740; }
.table-footer a { color: var(--erp-blue); }

.metrics { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; margin-bottom: 4px; }
.metric { display: grid; gap: 4px; padding: 14px 16px; border: 1px solid var(--erp-line); border-radius: 12px; background: #fff; color: inherit; text-decoration: none;
  box-shadow: 0 1px 2px rgba(15, 31, 61, .024); }
.metric span { color: var(--erp-muted); font-size: 12px; font-weight: 740; }
.metric strong { font-size: 26px; font-weight: 800; line-height: 1.1; }
.metric:hover { border-color: rgba(11, 111, 232, .35); }

.record-fields { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); padding-bottom: 16px; border-bottom: 1px solid var(--erp-line); }
.record-fields .fields + .fields { padding-left: 20px; border-left: 1px solid var(--erp-line); }
.record-fields .fields:first-child { padding-right: 20px; }
.fields { display: grid; grid-template-columns: 130px minmax(0, 1fr); gap: 10px 16px; margin: 0; font-size: 13px; align-content: start; }
.fields dt { color: #334155; font-weight: 500; }
.fields dd { margin: 0; font-weight: 700; overflow-wrap: anywhere; }
.erp-section { padding-top: 18px; min-width: 0; }
.erp-section.first { padding-top: 0; }
.erp-section h2 { margin: 0 0 12px; color: var(--erp-ink); font-size: 16px; font-weight: 800; }
.erp-section .form-grid + .check { margin-top: 12px; }
.erp-section h2 small { margin-left: 8px; color: var(--erp-muted); font-size: 13px; font-weight: 600; }
.section-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 28px; align-items: start; }
.section-grid.wide-first { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); }

.stack-form { display: grid; gap: 12px; }
.stack-form.narrow { max-width: 520px; }
.form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px 16px; }
.form-grid.limits { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.field { display: grid; gap: 5px; align-content: start; font-size: 12px; }
.field > span { color: #334155; font-weight: 700; }
.field input, .field select, .field textarea { min-width: 0; min-height: 36px; padding: 6px 10px; border: 1px solid var(--erp-control-border); border-radius: 8px;
  background: #fff; color: var(--erp-ink); font: inherit; font-size: 13px; }
.field input[readonly] { background: var(--erp-field); color: var(--erp-muted); }
.field textarea { min-height: 64px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--erp-blue); outline: 2px solid rgba(0, 88, 190, .18); }
.form-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
.form-actions > .erp-button:only-child { margin-left: auto; }
.form-actions.sticky { position: sticky; bottom: 0; margin-top: 8px; padding: 12px 0; border-top: 1px solid var(--erp-line); background: #fff; }
.apps { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 10px 16px; }
.apps small, label.check small { color: var(--erp-muted); }
.notice-bar { margin: 0 0 14px; padding: 10px 12px; border-radius: 10px; font-size: 13px; font-weight: 700; }
.notice-bar.success { border: 1px solid rgba(22, 163, 74, .22); background: rgba(22, 163, 74, .08); color: #15803d; }
.notice-bar.error { border: 1px solid rgba(239, 68, 68, .24); background: rgba(239, 68, 68, .08); color: #b91c1c; }
.requests { display: grid; gap: 10px; }
details.request { border: 1px solid var(--erp-line); border-radius: 12px; background: #fff; box-shadow: 0 1px 2px rgba(15, 31, 61, .024); }
details.request summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px; cursor: pointer; list-style: none; }
details.request summary::-webkit-details-marker { display: none; }
details.request[open] summary { border-bottom: 1px solid var(--erp-line); }
details.request form { padding: 14px; }
.request-title { display: grid; gap: 2px; min-width: 0; }
.request-title strong { font-size: 14px; font-weight: 800; }
.inline-form { display: inline-flex; align-items: center; gap: 10px; }

@media (max-width: 1000px) {
  .user-text { display: none; }
  .section-grid, .section-grid.wide-first { grid-template-columns: minmax(0, 1fr); }
  .header-search { flex-basis: 100%; order: 3; margin: 0; }
}
@media (max-width: 700px) {
  .topbar { position: static; flex-wrap: wrap; height: auto; padding: 8px 12px; row-gap: 8px; }
  .app-chips { order: 3; flex: 1 0 100%; padding-bottom: 2px; }
  main.workspace { padding: 16px; }
  .record-fields { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .record-fields .fields + .fields { padding: 10px 0 0; border-left: 0; border-top: 1px solid var(--erp-line); }
  .record-fields .fields:first-child { padding-right: 0; }
  .fields { grid-template-columns: 110px minmax(0, 1fr); }
  .field input, .field select, .field textarea { min-height: 44px; font-size: 16px; }
  .erp-button, .header-search, .app-chip, .tab { height: 44px; }
  .erp-button.icon-only { width: 44px; height: 44px; }
  .header-search input { font-size: 16px; }
  details.request summary { flex-wrap: wrap; }
  .title-block h1 { font-size: 21px; }
}