:root {
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: #172033;
  background: #f5f7fb;
  font-synthesis: none;
  --navy: #030c4d;
  --navy-2: #0d1b67;
  --orange: #f59e0b;
  --indigo: #4f46e5;
  --ink: #172033;
  --muted: #667085;
  --line: #e4e7ec;
  --panel: #ffffff;
  --soft: #f8fafc;
  --success: #067647;
  --success-bg: #ecfdf3;
  --danger: #b42318;
  --danger-bg: #fef3f2;
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body { min-height: 100vh; background: #f5f7fb; }
button, input { font: inherit; }
button { cursor: pointer; }
button:disabled { cursor: not-allowed; opacity: .6; }
a { color: var(--indigo); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.noscript-notice { padding: 40px; text-align: center; font-family: sans-serif; }

.eyebrow { margin: 0 0 8px; color: var(--indigo); font-size: 12px; font-weight: 800; letter-spacing: .12em; }
.muted { color: var(--muted); }
.alert { padding: 12px 14px; border: 1px solid #fecdca; border-radius: 12px; background: var(--danger-bg); color: var(--danger); font-size: 14px; }
.alert p { margin: 8px 0; }
.alert p:first-child { margin-top: 0; }
.alert p:last-child { margin-bottom: 0; }
.alert-action { margin-top: 14px; }
.empty { color: var(--muted); text-align: center; padding: 28px; }

.signin-shell { min-height: 100vh; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(380px, .9fr); }
.brand-panel { display: flex; flex-direction: column; justify-content: space-between; padding: clamp(36px, 7vw, 96px); color: white; background: radial-gradient(circle at 85% 20%, #1f2f8f 0, transparent 32%), linear-gradient(145deg, #02083c, var(--navy) 52%, #101d67); }
.brand-panel img { width: min(300px, 62%); }
.brand-panel .eyebrow { color: #fbbf24; }
.brand-panel h1 { max-width: 620px; margin: 0 0 18px; font-size: clamp(38px, 5vw, 72px); line-height: 1.02; letter-spacing: -.045em; }
.brand-panel p:not(.eyebrow) { max-width: 580px; margin: 0; color: #d7dcf9; font-size: 18px; line-height: 1.6; }
.signin-card { align-self: center; width: min(480px, calc(100% - 48px)); margin: auto; padding: 44px; border: 1px solid var(--line); border-radius: 24px; background: white; box-shadow: 0 24px 70px rgba(16, 24, 40, .1); }
.signin-card h2 { margin: 0; font-size: 28px; letter-spacing: -.025em; }
.signin-card form { display: grid; gap: 18px; margin-top: 28px; }
.signin-card label { display: grid; gap: 8px; font-size: 14px; font-weight: 700; }
.signin-card input { width: 100%; min-height: 48px; padding: 0 14px; border: 1px solid #d0d5dd; border-radius: 12px; outline: none; color: var(--ink); background: #fff; }
.signin-card input:focus { border-color: var(--indigo); box-shadow: 0 0 0 4px rgba(79, 70, 229, .1); }
.primary, .secondary { min-height: 48px; border-radius: 12px; border: 0; font-weight: 800; }
.primary { color: white; background: var(--navy); }
.primary:hover { background: var(--navy-2); }
.secondary { border: 1px solid var(--line); color: var(--ink); background: white; }
.privacy { margin: 24px 0 0; text-align: center; font-size: 13px; }

.center-shell { min-height: 100vh; display: grid; place-items: center; padding: 24px; }
.loading-card, .tenant-card { width: min(640px, 100%); padding: 36px; border: 1px solid var(--line); border-radius: 24px; background: white; box-shadow: 0 22px 60px rgba(16, 24, 40, .08); }
.loading-card { text-align: center; }
.loading-card img { width: 56px; }
.loading-card h1 { margin-bottom: 6px; }
.spinner { display: inline-block; width: 28px; height: 28px; margin-top: 12px; border: 3px solid #e4e7ec; border-top-color: var(--indigo); border-radius: 50%; animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.tenant-head { display: flex; gap: 18px; align-items: center; margin-bottom: 24px; }
.tenant-head img { width: 52px; }
.tenant-head h1 { margin: 0; font-size: 28px; }
.tenant-head p:last-child { margin-bottom: 0; }
.tenant-list { display: grid; gap: 10px; margin: 18px 0; }
.unavailable-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.unavailable-actions button { padding: 0 22px; }
.tenant-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; width: 100%; padding: 16px; text-align: left; border: 1px solid var(--line); border-radius: 14px; color: var(--ink); background: white; }
.tenant-row:not(:disabled):hover { border-color: #a5b4fc; background: #fafaff; }
.tenant-row span:first-child { display: grid; gap: 4px; }
.tenant-row small { color: var(--muted); }
.pill, .access-badge { display: inline-flex; align-items: center; border-radius: 999px; padding: 6px 10px; font-size: 12px; font-weight: 800; }
.ok { color: var(--success); background: var(--success-bg); }
.off { color: #475467; background: #f2f4f7; }

.workspace { min-height: 100vh; display: grid; grid-template-columns: 260px minmax(0, 1fr); }
.sidebar { position: sticky; top: 0; height: 100vh; overflow-y: auto; display: flex; flex-direction: column; padding: 28px 20px; color: white; background: var(--navy); }
.wordmark { width: 168px; margin: 0 8px 30px; }
.tenant-chip { display: grid; gap: 3px; padding: 14px; margin-bottom: 24px; border: 1px solid rgba(255,255,255,.12); border-radius: 14px; background: rgba(255,255,255,.06); }
.tenant-chip span, .tenant-chip small { color: #b9c0ee; font-size: 12px; }
.tenant-chip strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sidebar nav { display: flex; flex-direction: column; gap: 4px; }
.nav-btn, .text-btn { border: 0; text-align: left; color: #dce0fb; background: transparent; }
.nav-btn { padding: 12px 14px; border-radius: 10px; font-weight: 700; }
.nav-btn:hover, .nav-btn.active { color: white; background: rgba(255,255,255,.1); }
/* Sell is the till's front door: a filled accent button, set apart at the top. */
.nav-primary { margin-bottom: 8px; color: white; background: var(--indigo, #4f46e5); font-size: 15px; }
.nav-primary:hover, .nav-primary.active { background: #4338ca; color: white; }
.nav-group { display: grid; gap: 3px; margin-top: 12px; }
.nav-group-title { margin: 0 6px 4px; color: #8f97d6; font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.sidebar-foot { display: grid; gap: 6px; margin-top: auto; padding-top: 24px; border-top: 1px solid rgba(255,255,255,.12); }
.text-btn { padding: 9px 12px; font-size: 13px; }
.text-btn:hover { color: white; }
.content { min-width: 0; padding: 34px clamp(24px, 4vw, 56px) 56px; }
.topbar { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; margin-bottom: 30px; }
.topbar h1 { margin: 0; font-size: 32px; letter-spacing: -.03em; }
.metric-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.metric, .panel { border: 1px solid var(--line); background: white; box-shadow: 0 1px 2px rgba(16, 24, 40, .03); }
.metric { display: grid; gap: 8px; padding: 20px; border-radius: 16px; }
.metric span, .metric small { color: var(--muted); font-size: 13px; }
.metric strong { font-size: 30px; letter-spacing: -.03em; }
.metric strong.small-value { overflow-wrap: anywhere; font-size: 17px; }
.panel { margin-top: 18px; border-radius: 18px; overflow: hidden; }
.panel-head { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 22px 24px; border-bottom: 1px solid var(--line); }
.panel-head h2 { margin: 0 0 6px; font-size: 18px; }
.panel-head p { margin: 0; color: var(--muted); font-size: 13px; }
.count { color: var(--muted); font-size: 13px; }
.details { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 0; margin: 0; }
.details div { padding: 20px 24px; border-bottom: 1px solid var(--line); }
.details div:nth-child(odd) { border-right: 1px solid var(--line); }
.details dt { color: var(--muted); font-size: 12px; }
.details dd { margin: 7px 0 0; font-weight: 700; }
.table-wrap { overflow-x: auto; position: relative; }
table { width: 100%; border-collapse: collapse; }
th, td { padding: 14px 18px; border-bottom: 1px solid var(--line); text-align: left; white-space: nowrap; font-size: 13px; }
th { color: var(--muted); background: #fcfcfd; font-size: 12px; text-transform: uppercase; letter-spacing: .04em; }
td.ok { color: var(--success); font-weight: 700; }
td.warn { color: var(--danger); font-weight: 700; }
.card-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 14px; padding: 20px; }
.product-card { display: flex; justify-content: space-between; gap: 14px; min-height: 132px; padding: 18px; border: 1px solid var(--line); border-radius: 14px; background: var(--soft); }
.product-card h3 { margin: 8px 0 5px; font-size: 15px; }
.product-card p { margin: 0; color: var(--muted); font-size: 12px; }
.product-card > strong { align-self: flex-end; white-space: nowrap; }
.sku { color: var(--indigo); font-size: 11px; font-weight: 800; letter-spacing: .05em; }

@media (max-width: 1050px) {
  .metric-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .card-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 760px) {
  .signin-shell { grid-template-columns: 1fr; }
  .brand-panel { min-height: 34vh; padding: 32px 24px; }
  .brand-panel img { width: 190px; }
  .brand-panel h1 { font-size: 38px; }
  .brand-panel p:not(.eyebrow) { font-size: 15px; }
  .signin-card { margin: -22px auto 28px; padding: 28px 22px; z-index: 1; }
  .workspace { grid-template-columns: 1fr; }
  .sidebar { position: static; height: auto; padding: 18px; }
  .wordmark { width: 145px; margin-bottom: 16px; }
  .tenant-chip { margin-bottom: 12px; }
  .nav-group { grid-template-columns: repeat(3, 1fr); }
  .nav-group-title { grid-column: 1 / -1; margin-top: 4px; }
  .nav-btn { text-align: center; }
  .nav-primary { text-align: center; }
  .sidebar-foot { grid-template-columns: 1fr 1fr; padding-top: 12px; }
  .content { padding: 24px 16px 40px; }
  .metric-grid, .card-grid { grid-template-columns: 1fr; }
  .details { grid-template-columns: 1fr; }
  .details div:nth-child(odd) { border-right: 0; }
  .topbar { align-items: center; }
  .topbar h1 { font-size: 26px; }
}

.report-controls { display: grid; grid-template-columns: minmax(190px, 1.4fr) repeat(2, minmax(150px, .8fr)) auto; gap: 12px; align-items: end; padding: 18px 24px; border-bottom: 1px solid var(--line); }
.report-controls label { display: grid; gap: 7px; color: var(--muted); font-size: 12px; font-weight: 700; }
.report-controls input, .report-controls select { width: 100%; min-height: 42px; padding: 0 11px; border: 1px solid #d0d5dd; border-radius: 10px; color: var(--ink); background: white; }
.report-controls input:focus, .report-controls select:focus { outline: none; border-color: var(--indigo); box-shadow: 0 0 0 3px rgba(79, 70, 229, .1); }
@media (max-width: 900px) { .report-controls { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .report-controls { grid-template-columns: 1fr; } .nav-group { grid-template-columns: repeat(2, 1fr); } }
.location-shortcuts { display: flex; flex-wrap: wrap; gap: 8px; padding: 16px 24px 0; }
@media (max-width: 560px) { .location-shortcuts { padding: 14px 16px 0; } .location-shortcuts button { flex: 1 1 auto; } }

.filter-bar { display: flex; gap: 8px; padding: 16px 20px; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.filter-btn { padding: 8px 14px; border: 1px solid var(--line); border-radius: 10px; background: white; color: var(--ink); font-size: 13px; font-weight: 700; transition: all .15s; }
.filter-btn:hover { border-color: var(--indigo); background: #fafaff; }
.filter-btn.active { border-color: var(--indigo); background: var(--indigo); color: white; }
.info { color: #026aa2; background: #f0f9ff; }

.attention-list { display: grid; gap: 12px; padding: 18px 20px; }
.attention-card { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; padding: 16px; border: 1px solid var(--line); border-radius: 14px; background: var(--soft); }
.attention-card h3 { margin: 10px 0 6px; font-size: 15px; }
.attention-card p { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.5; }
.attention-card small { color: var(--muted); white-space: nowrap; }
.warn { color: #b54708; background: #fffaeb; }
@media (max-width: 620px) { .attention-card { display: grid; } .attention-card small { white-space: normal; } }

.member-code { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.member-code code, .team-who code { padding: 6px 10px; border: 1px solid var(--line); border-radius: 8px; color: var(--ink); background: var(--soft); font-size: 14px; overflow-wrap: anywhere; }
.small-btn { min-height: 34px; padding: 0 12px; font-size: 13px; }
.danger-btn { color: var(--danger); border-color: #fecdca; }
.code-small { color: var(--muted); font-size: 11px; }
.row-actions { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; }
.notice { margin: 0; padding: 12px 24px; border-bottom: 1px solid var(--line); color: var(--success); background: var(--success-bg); font-size: 14px; }
.team-form { display: grid; gap: 14px; padding: 20px 24px 24px; max-width: 560px; }
.team-form label { display: grid; gap: 7px; color: var(--muted); font-size: 12px; font-weight: 700; }
.team-form input:not([type="checkbox"]), .team-form select { width: 100%; min-height: 42px; padding: 0 11px; border: 1px solid #d0d5dd; border-radius: 10px; color: var(--ink); background: white; }
.team-form input:focus, .team-form select:focus { outline: none; border-color: var(--indigo); box-shadow: 0 0 0 3px rgba(79, 70, 229, .1); }
.team-locations { display: grid; gap: 8px; margin: 0; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; }
.team-locations legend { padding: 0 6px; color: var(--muted); font-size: 12px; font-weight: 700; }
.team-form label.check { display: flex; align-items: center; gap: 10px; color: var(--ink); font-size: 14px; font-weight: 600; }
.team-who { display: grid; gap: 6px; margin: 0; font-size: 12px; }
.hint { margin: -6px 0 0; color: var(--muted); font-size: 12px; }
.form-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.form-actions button { padding: 0 18px; }
[hidden] { display: none !important; }
@media (max-width: 560px) { .row-actions { flex-direction: column; } }

.group-row td { background: var(--soft); white-space: normal; }
.row-actions.inline { display: inline-flex; flex-wrap: wrap; gap: 6px; margin-left: 10px; vertical-align: middle; }
.form-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px; align-items: end; }
.line-row { grid-template-columns: minmax(0, 3fr) minmax(70px, 1fr) auto; }
.text-link { padding: 0; border: 0; background: none; color: var(--indigo); font-weight: 700; text-decoration: underline; }
.filter-controls { grid-template-columns: repeat(4, minmax(130px, 1fr)) auto; }
.notice.standalone { margin-top: 18px; border: 1px solid var(--line); border-radius: 12px; }
.receipt-toolbar { justify-content: flex-start; padding: 16px 20px; }
.receipt-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 9px; }
.receipt-delivery-status { margin: 0; padding: 10px 20px; color: var(--muted); background: var(--soft); border-bottom: 1px solid var(--line); font-size: 12px; }
.invoice-body { padding: 24px; }
.invoice-head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 18px; margin-bottom: 18px; }
.invoice-head h2 { margin: 0 0 6px; font-size: 24px; }
.invoice-head p { margin: 0; }
.invoice-meta, .invoice-totals { display: grid; gap: 6px; margin: 0; font-size: 13px; }
.invoice-meta div, .invoice-totals div { display: flex; justify-content: space-between; gap: 24px; }
.invoice-meta dt, .invoice-totals dt { color: var(--muted); }
.invoice-meta dd, .invoice-totals dd { margin: 0; font-weight: 700; }
.invoice-totals { max-width: 320px; margin: 18px 0 0 auto; }
.invoice-totals .grand { padding-top: 8px; border-top: 1px solid var(--line); font-size: 16px; }
.invoice-totals .grand dt { color: var(--ink); font-weight: 800; }
.invoice-note { margin: 16px 0 0; }
.invoice-payments h3 { display: flex; align-items: center; gap: 10px; margin: 20px 0 8px; font-size: 15px; }
.invoice-payments p { margin: 4px 0; font-size: 13px; }
@media (max-width: 900px) { .filter-controls { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .filter-controls, .line-row { grid-template-columns: 1fr; } }
@media print {
  .sidebar, .topbar, .no-print, .alert, .pending-sale { display: none !important; }
  .workspace { display: block; }
  .content { padding: 0; }
  .panel { border: 0; box-shadow: none; }
  th, td { white-space: normal; }
}

.fit-table th, .fit-table td { white-space: normal; overflow-wrap: anywhere; }
@media (max-width: 560px) { .fit-table th, .fit-table td { padding: 10px 8px; } .row-actions { justify-content: flex-start; } }

/* Till: Sell, My sales, My shift */
.pos-head { flex-wrap: wrap; }
.pos-location-pick { display: grid; gap: 6px; color: var(--muted); font-size: 12px; font-weight: 700; }
.pos-location-pick select, .pos-search input, .pos-pay input, .pos-qty-input { min-height: 42px; padding: 0 11px; border: 1px solid #d0d5dd; border-radius: 10px; color: var(--ink); background: white; font: inherit; }
.pos-grid { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: 18px; align-items: start; }
.pos-grid > .panel { margin-top: 18px; }
.pos-search { padding: 14px 20px; border-bottom: 1px solid var(--line); }
.pos-search input { width: 100%; }
.pos-list, .pos-lines { list-style: none; margin: 0; padding: 0; }
.pos-item, .pos-line { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 20px; border-bottom: 1px solid var(--line); }
.pos-item > div:first-child, .pos-line > div:first-child { display: grid; gap: 3px; min-width: 0; }
.pos-item.none { opacity: .6; }
.pos-item-side { display: flex; align-items: center; gap: 10px; white-space: nowrap; }
.pos-stock { color: var(--muted); font-size: 12px; }
.pos-qty { display: flex; align-items: center; gap: 6px; }
.pos-qty-input { width: 64px; text-align: center; min-height: 34px; }
.pos-line-total { min-width: 90px; text-align: right; font-weight: 700; }
.pos-pay { display: grid; gap: 12px; padding: 18px 20px 22px; }
.pos-pay label { display: grid; gap: 7px; color: var(--muted); font-size: 12px; font-weight: 700; }
.pos-totals { max-width: none; margin: 0; }
.pos-change { margin: 0; font-size: 15px; }
.pos-alert { margin: 12px 20px 0; }
.warn-notice { color: #b54708; background: #fffaeb; }
.info-notice { color: #026aa2; background: #f0f9ff; }
.pending-sale { border-color: #fedf89; background: #fffcf5; }
.my-filter { grid-template-columns: repeat(2, minmax(140px, 1fr)) auto; }
@media (max-width: 1199px) { .pos-grid { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 560px) {
  .pos-item, .pos-line { flex-wrap: wrap; padding: 12px 14px; }
  .pos-qty { flex-wrap: wrap; }
  .pos-line-total { min-width: 0; }
  .my-filter { grid-template-columns: 1fr; }
}

/* ---- Sell (Retail/FMCG V1): find | basket, totals and payment ---- */
.pos-strip .panel-head { padding: 16px 22px; }
.pos-head-controls { display: flex; align-items: flex-end; flex-wrap: wrap; justify-content: flex-end; gap: 12px; }
.pos-head-links { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.pos-stock-guidance { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; padding: 13px 20px; border-bottom: 1px solid var(--line); color: var(--ink); background: #fff9ed; }
.pos-stock-guidance strong { font-size: 14px; }
.pos-stock-guidance p { margin: 4px 0 0; font-size: 12px; color: var(--muted); }
.pos-stock-guidance .hint { font-size: 12px; }
@media (max-width: 760px) {
  .pos-head { align-items: flex-start; flex-wrap: wrap; }
  .pos-head-controls { width: 100%; justify-content: flex-start; }
}
.server-update { color: var(--danger); background: var(--danger-bg); }
.pos-side { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; min-width: 0; container-type: inline-size; }
.pos-side > .panel { margin-top: 18px; }
.pos-item { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "main price" "stock side"; align-items: center; gap: 6px 12px; }
.pos-item-main { grid-area: main; display: grid; gap: 3px; min-width: 0; }
.pos-item-side { grid-area: side; justify-self: end; }
.pos-item-main strong { overflow-wrap: anywhere; }
.pos-item-price { grid-area: price; display: grid; gap: 2px; text-align: right; white-space: nowrap; font-weight: 700; }
.pos-item-price small { color: var(--muted); font-weight: 600; font-size: 11px; }
.pos-mrp { color: var(--muted); font-size: 11px; font-weight: 600; }
.pos-item-stock { grid-area: stock; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; }
.stock-badge { padding: 3px 8px; border-radius: 999px; font-size: 11px; font-weight: 700; white-space: nowrap; }
.stock-badge.ok { color: var(--success); background: var(--success-bg); }
.stock-badge.none { color: #475467; background: #f2f4f7; }
.pos-held { color: var(--indigo); font-size: 11px; font-weight: 700; }
.basket-wrap { border-bottom: 1px solid var(--line); }
.basket-table th, .basket-table td { padding: 10px 6px; vertical-align: top; }
.basket-table td:first-child, .basket-table th:first-child { padding-left: 16px; }
.basket-table td:last-child, .basket-table th:last-child { padding-right: 12px; }
.basket-table .pos-line-item { white-space: normal; min-width: 120px; }
.basket-table .pos-qty { gap: 4px; }
.basket-table .pos-qty .small-btn { min-width: 32px; padding: 0 8px; }
.basket-table .pos-qty-input { width: 46px; }
.basket-table .remove-btn { min-width: 32px; padding: 0 9px; }
.basket-table .pos-line-item strong { display: block; }
.basket-table small, .basket-table .split { display: block; color: var(--muted); font-size: 11px; font-weight: 500; white-space: normal; }
.basket-table.is-pricing td.num { color: var(--muted); }
.num { text-align: right; }
th.num { text-align: right; }
.neg { color: var(--success); font-weight: 700; }
.pricing { color: var(--muted); }
.pricing-label { color: var(--indigo); font-weight: 700; }
.small-link { display: block; margin-top: 4px; font-size: 12px; }
.pos-line-total { font-weight: 800; }
.pos-empty { padding: 22px; }
.discount-row td { background: var(--soft); white-space: normal; }
.discount-editor { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; align-items: end; }
.discount-editor label { display: grid; gap: 6px; color: var(--muted); font-size: 12px; font-weight: 700; }
.discount-editor input, .discount-editor select, .pos-pay select, .pos-customer input { width: 100%; min-height: 40px; padding: 0 10px; border: 1px solid #d0d5dd; border-radius: 10px; color: var(--ink); background: white; font: inherit; }
.discount-editor .hint, .discount-editor .form-actions { grid-column: 1 / -1; margin: 0; }
.pos-totals { padding: 14px 20px 18px; gap: 7px; }
.pos-totals.is-pending { opacity: .75; }
.pos-totals .tax-component dt, .invoice-totals .tax-component dt { padding-left: 12px; }
.pos-totals .grand dd { font-size: 22px; }
.pos-totals .grand dt { font-weight: 800; color: var(--ink); }
.pos-customer { display: grid; gap: 10px; margin: 0; padding: 0; border: 0; }
.pos-customer.open { padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; }
.pos-customer legend { padding: 0 6px; color: var(--muted); font-size: 12px; font-weight: 700; }
.pos-customer label { display: grid; gap: 6px; color: var(--muted); font-size: 12px; font-weight: 700; }
.pos-customer .text-link { justify-self: start; text-align: left; overflow-wrap: anywhere; }
.pos-place { display: grid; gap: 6px; }
.pos-methods { display: flex; flex-wrap: wrap; gap: 18px; margin: 0; padding: 10px 14px; border: 1px solid var(--line); border-radius: 12px; }
.pos-methods legend { padding: 0 6px; color: var(--muted); font-size: 12px; font-weight: 700; }
.pos-pay label.check, .settings-form label.check, .features-form label.check { display: flex; align-items: center; gap: 8px; color: var(--ink); font-size: 14px; font-weight: 600; }
.pos-method-only { margin: 0; font-size: 14px; }
.pos-card-note { margin: 0; }
.pos-complete-reason { margin: -4px 0 0; }
.price-changed { border: 1px solid #fedf89; border-radius: 10px; }
.pos-sticky { display: none; }
@media (max-width: 1199px) {
  .pos-sticky { position: sticky; bottom: 0; z-index: 5; display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 18px; padding: 12px 16px; border: 1px solid var(--line); border-radius: 14px; background: white; box-shadow: 0 -6px 24px rgba(16, 24, 40, .08); }
  .pos-sticky strong { font-size: 17px; }
}
/* The basket reads as cards whenever its own column is narrow (phone, tablet portrait). */
@container (max-width: 620px) {
  .basket-table thead { display: none; }
  .basket-table, .basket-table tbody, .basket-table tr, .basket-table td { display: block; width: 100%; }
  .basket-table tr.basket-line { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 12px; padding: 12px 14px; border-bottom: 1px solid var(--line); }
  .basket-table td { padding: 2px 0 !important; border: 0; white-space: normal; }
  .basket-table td.pos-line-item, .basket-table td.pos-line-remove { grid-column: 1 / -1; }
  .basket-table td[data-label]::before { content: attr(data-label); display: block; color: var(--muted); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
  .basket-table td.pos-line-item::before { display: none; }
  .basket-table td.num { text-align: left; }
  .discount-editor { grid-template-columns: 1fr; }
}

/* ---- Invoice register and the invoice document ---- */
.register-controls { grid-template-columns: repeat(4, minmax(130px, 1fr)); }
.register-controls button { align-self: end; }
.register-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 20px; }
@media (max-width: 900px) { .register-controls { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .register-controls { grid-template-columns: 1fr; } }
.doc-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(220px, auto); gap: 24px; padding-bottom: 18px; border-bottom: 2px solid var(--ink); }
.doc-party p { margin: 2px 0; font-size: 13px; overflow-wrap: anywhere; }
.doc-party .doc-party-name { font-size: 16px; }
.doc-title { display: grid; gap: 8px; justify-items: end; }
.doc-title-text { margin: 0; font-size: 22px; letter-spacing: .08em; }
.doc-title .invoice-meta { min-width: 220px; }
.doc-parties { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; padding: 16px 0; }
.doc-note { margin: 14px 0 0; border: 1px solid #fedf89; border-radius: 10px; }
.doc-lines th, .doc-lines td { padding: 9px 10px; font-size: 12px; }
.doc-lines td:nth-child(2) { white-space: normal; min-width: 160px; }
.doc-bottom { display: grid; grid-template-columns: minmax(0, 1fr) minmax(260px, 340px); gap: 24px; align-items: start; margin-top: 16px; }
.doc-bottom .doc-totals { margin: 0; max-width: none; grid-column: 2; }
.doc-tax-summary { grid-column: 1; grid-row: 1; }
.doc-tax-summary h3 { margin: 0 0 8px; font-size: 14px; }
.doc-tax-summary th, .doc-tax-summary td { padding: 7px 10px; font-size: 12px; }
.invoice-payments ul { margin: 6px 0; padding-left: 18px; font-size: 13px; }
.doc-foot { margin-top: 18px; padding-top: 12px; border-top: 1px solid var(--line); font-size: 12px; }
.doc-foot p { margin: 3px 0; }
.thermal-doc { display: none; }
@media (max-width: 760px) {
  .doc-head, .doc-parties, .doc-bottom { grid-template-columns: 1fr; }
  .doc-title { justify-items: start; }
  .doc-bottom .doc-totals { grid-column: 1; }
  .doc-tax-summary { grid-row: auto; }
}

/* ---- Settings, tax, reports, dashboard ---- */
.settings-form { display: grid; gap: 18px; padding: 20px 24px 24px; }
.settings-form fieldset { display: grid; gap: 12px; margin: 0; padding: 14px 16px; border: 1px solid var(--line); border-radius: 14px; min-width: 0; }
.receipt-preview-editor { display: grid; gap: 14px; padding: 18px; border: 1px solid var(--line); border-radius: 14px; background: var(--soft); }
.receipt-preview-heading { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 14px; }
.receipt-preview-heading h3 { margin: 0 0 5px; font-size: 16px; }
.receipt-preview-heading label { min-width: 145px; max-width: 230px; }
.receipt-preview-sheet { width: min(100%, 312px); display: grid; align-content: start; gap: 13px; padding: 18px; background: #fff; color: var(--ink); border: 1px solid #ced4df; box-shadow: 0 5px 17px rgba(16, 24, 40, .06); overflow-wrap: anywhere; font-size: 12px; }
.receipt-preview-sheet.receipt-preview-a4 { width: min(100%, 600px); padding: 26px; }
.receipt-preview-stamp { margin: 0; font-size: 10px; letter-spacing: .07em; font-weight: 800; color: #6b7280; }
.receipt-preview-brand { display: flex; gap: 13px; align-items: center; }
.receipt-preview-brand strong { font-size: 16px; }
.receipt-preview-brand p { margin: 5px 0 0; font-size: 12px; }
.receipt-preview-logo { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 56px; height: 48px; border: 1px dashed #a8b0c1; border-radius: 4px; color: #667085; font-size: 10px; }
.receipt-preview-placeholder { padding: 20px 0; border-block: 1px dashed #cbd1de; color: #667085; line-height: 1.5; }
.receipt-preview-footer-label { margin: 0; color: #667085; font-size: 11px; font-weight: 800; text-transform: uppercase; }
.receipt-preview-footer { margin: 0; font-size: 13px; white-space: pre-wrap; overflow-wrap: anywhere; }
@media (max-width: 560px) { .receipt-preview-editor { padding: 12px; } .receipt-preview-sheet, .receipt-preview-sheet.receipt-preview-a4 { width: 100%; padding: 15px; } }
.settings-form legend { padding: 0 6px; font-weight: 800; }
.settings-form label { display: grid; gap: 7px; color: var(--muted); font-size: 12px; font-weight: 700; }
.settings-form input:not([type="checkbox"]), .settings-form select { width: 100%; min-height: 42px; padding: 0 11px; border: 1px solid #d0d5dd; border-radius: 10px; color: var(--ink); background: white; font: inherit; }
.settings-form .hint { margin: 0; }
.settings-rev { align-self: center; }
.check-row { display: flex; flex-wrap: wrap; gap: 18px; }
.confirm-basis { padding: 10px 12px; border: 1px solid #fedf89; border-radius: 10px; background: #fffcf5; }
.settings-conflict { margin-top: 18px; }
.settings-conflict .secondary { margin-top: 6px; }
.features-form { max-width: none; }
.feature-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 10px 18px; }
.template-form { max-width: none; border-top: 1px solid var(--line); }
.template-form label, .template-form .hint { max-width: 560px; }
.rate-versions { margin: 6px 0 0; padding-left: 16px; font-size: 12px; color: var(--muted); }
.rate-versions li { margin: 3px 0; }
.wide-form { max-width: 820px; }
.component-row { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 640px) { .component-row { grid-template-columns: 1fr 1fr; } }
.report-picker { display: grid; gap: 12px; padding: 16px 20px; border-bottom: 1px solid var(--line); }
.report-group h3 { margin: 0 0 8px; color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: .06em; }
.report-buttons { display: flex; flex-wrap: wrap; gap: 8px; }
.breport-controls { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.report-meta { margin: 12px 20px; }
.report-table tfoot td { font-weight: 800; background: var(--soft); }
.report-notes { margin: 12px 20px 18px; padding-left: 18px; color: var(--muted); font-size: 12px; }
.dashboard { margin-bottom: 18px; }
.dash-head h2 { margin: 0 0 12px; font-size: 18px; }
.dash-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(128px, 1fr)); gap: 12px; }
.dash-tile { display: grid; gap: 6px; padding: 16px; border: 1px solid var(--line); border-radius: 14px; background: white; }
.dash-tile span, .dash-tile small { color: var(--muted); font-size: 12px; }
.dash-tile strong { font-size: 22px; letter-spacing: -.02em; overflow-wrap: anywhere; }
.product-facts { display: inline-block; margin-left: 10px; color: var(--muted); font-size: 12px; }

/* ---- Print: A4 invoice, 80 mm receipt ---- */
@page thermal { size: 80mm auto; margin: 3mm; }
@media print {
  @page { size: A4; margin: 12mm; }
  .doc-lines thead { display: table-header-group; }
  .doc-lines tr { break-inside: avoid; }
  .table-wrap { overflow: visible; }
  body.print-thermal .a4-body { display: none; }
  body.print-thermal .thermal-doc { display: block; page: thermal; width: 72mm; font-size: 10px; color: #000; }
  .thermal-doc p { margin: 1px 0; }
  .thermal-doc .t-center { text-align: center; }
  .thermal-doc .t-line { padding: 3px 0; border-bottom: 1px dashed #000; }
  .thermal-doc .t-amount, .thermal-doc .t-total { text-align: right; font-weight: 700; }
  body.print-thermal .receipt { page: thermal; width: 72mm; font-size: 10px; }
  body.print-thermal .receipt .invoice-head { display: block; }
  body.print-thermal .receipt th, body.print-thermal .receipt td { padding: 2px 3px; font-size: 9px; }
  body.print-thermal .receipt .invoice-totals { max-width: none; }
}

/* Imports, draft bills and the archive (0034). */
.bad { color: var(--danger); background: var(--danger-bg); }
.row-actions.start { justify-content: flex-start; }
.import-start { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 24px; padding: 18px 24px; }
.import-kinds { display: grid; gap: 10px; margin: 0; padding: 0; border: 0; }
.import-kinds legend { margin-bottom: 8px; font-weight: 800; font-size: 14px; }
.choice { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; }
.import-kind { padding: 12px; border: 1px solid var(--line); border-radius: 12px; }
.import-kind span { display: grid; gap: 4px; }
.import-kind small { color: var(--muted); font-size: 12px; }
.import-actions { display: grid; gap: 14px; align-content: start; }
.import-upload { display: grid; gap: 10px; }
.import-upload label { display: grid; gap: 7px; color: var(--muted); font-size: 12px; font-weight: 700; }
.import-mapping, .import-sample, .import-validation { padding: 18px 24px; border-top: 1px solid var(--line); }
.import-mapping h3, .import-sample h3, .import-validation h3 { margin: 0 0 8px; font-size: 15px; }
.import-validation h4 { margin: 18px 0 8px; font-size: 14px; }
/* A row heading here is a field name and its explanation: wrapped, not shouted. */
.mapping-table th[scope="row"] { width: 58%; white-space: normal; text-transform: none; letter-spacing: 0; color: var(--ink); background: white; font-size: 13px; vertical-align: top; }
.mapping-table th[scope="row"] .field-name { display: block; font-weight: 700; }
.mapping-table th[scope="row"] small { display: block; margin-top: 4px; color: var(--muted); font-weight: 400; font-size: 12px; }
.mapping-table td { vertical-align: top; white-space: normal; }
.import-rows td.import-problems { white-space: normal; min-width: 280px; }
.map-pick { display: flex; flex-wrap: wrap; gap: 8px; }
.req { color: var(--danger); }
.import-stats { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; margin: 12px 0; }
.import-stats div { padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; }
.import-stats dt { color: var(--muted); font-size: 12px; }
.import-stats dd { margin: 4px 0 0; font-size: 20px; font-weight: 800; }
.import-problems p { margin: 0 0 4px; font-size: 13px; }
.import-commit { display: grid; gap: 12px; margin-top: 18px; padding: 14px; border: 1px solid var(--line); border-radius: 12px; }
.import-batch-errors p { margin: 0 0 4px; }
.import-created { margin: 0; padding: 14px 40px; font-size: 14px; }
.import-noun { padding: 0 24px 18px; }
.draft-filters { padding: 14px 24px; }
.draft-meta { padding: 14px 24px; }
.draft-discard { display: flex; flex-wrap: wrap; gap: 10px; align-items: end; padding: 18px 24px; border-top: 1px solid var(--line); }
.draft-differences { margin: 6px 0; padding-left: 20px; }
#pos-draft-link p, #draft-link-differs p { margin: 0; }
#draft-link-differs { margin: 0 24px 12px; }
.draft-discard label { display: grid; gap: 7px; color: var(--muted); font-size: 12px; font-weight: 700; min-width: 280px; }
.draft-banner { border: 1px solid var(--line); border-radius: 12px; margin-top: 18px; }
@media (max-width: 860px) { .import-start { grid-template-columns: 1fr; } .import-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---- Laundry module (optional; shown only when the server entitles the business) ---- */
@media (min-width: 1101px) {
  .stack-table th, .stack-table td { white-space: normal; overflow-wrap: normal; word-break: normal; }
  .stack-table td.col-order, .stack-table td.col-total { white-space: nowrap; }
}
.stack-table .pill { white-space: nowrap; }
.danger-btn { color: var(--danger); border-color: #fecdca; }
.fit-table th, .fit-table td { white-space: normal; overflow-wrap: normal; word-break: normal; }
@media (max-width: 560px) {
  .fit-table th, .fit-table td { padding: 10px 8px; }
}
@media (max-width: 1024px) {
  .fit-table.stacks-sm, .stacks-sm tbody, .stacks-sm tr, .stacks-sm td { display: block; width: 100%; }
  .stacks-sm thead { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
  .stacks-sm tr { padding: 16px; border-bottom: 1px solid var(--line); }
  .stacks-sm td { padding: 6px 0; border: 0; }
  .stacks-sm td::before { content: attr(data-label); display: block; margin-bottom: 3px; color: var(--muted); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
  .stacks-sm td.svc-price { font-weight: 800; }
  .stacks-sm td.svc-actions::before { content: none; }
  .stacks-sm td.svc-actions { margin-top: 6px; }
  .stacks-sm .row-actions { flex-direction: column; align-items: stretch; gap: 10px; }
  .stacks-sm .row-actions input, .stacks-sm .row-actions select, .stacks-sm .row-actions button { width: 100%; min-height: 44px; }
  .stacks-sm td.empty::before { content: none; }
  .stacks-sm td.empty { text-align: center; }
  .table-wrap:has(> .stacks-sm) { overflow-x: visible; }
}
.tag-sheet { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px; }
.tag-label { display: flex; flex-direction: column; gap: 2px; border: 1px dashed currentColor; border-radius: 6px; padding: 10px; break-inside: avoid; }
.tag-label strong { font-size: 1.2rem; letter-spacing: 0.04em; }
.tag-sheet.garment-sheet { grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)); }
.garment-tag .tag-display { font-size: 1.8rem; line-height: 1.1; }
.tag-barcode { display: block; max-width: 100%; height: auto; background: #fff; }
.tag-payload { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.85rem; letter-spacing: 0.08em; }
.receipt-barcode { display: flex; flex-direction: column; align-items: center; gap: 4px; margin: 2px 0 16px; }
.receipt-barcode svg { max-width: 100%; height: auto; background: #fff; }
.history { padding-left: 1.2rem; display: grid; gap: 4px; }
@media print {
  .tag-sheet { grid-template-columns: repeat(3, 1fr); }
  .tag-label { border-style: solid; }
  .tag-sheet.garment-sheet { grid-template-columns: repeat(3, 1fr); }
  .tag-barcode { width: 41.25mm; height: 12mm; max-width: none; }
}
.cta-panel { border-color: #c7d2fe; background: linear-gradient(135deg, #eef2ff, #ffffff 60%); }
.cta-panel .panel-head { border-bottom: 0; }
.cta-panel h2 { font-size: 20px; }
.cta-panel .primary { padding: 0 20px; white-space: nowrap; }
.quick-actions { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px; padding: 18px 24px 22px; }
.quick-actions .small-btn { min-height: 48px; font-size: 14px; }
@media (max-width: 620px) {
  .cta-panel .primary { width: 100%; }
}
.panel > .detail-hint { margin: 0; padding: 12px 24px; border-bottom: 1px solid var(--line); line-height: 1.5; }
.panel > .detail-list, .panel > .history { margin: 0; padding: 4px 24px 18px 44px; display: grid; gap: 6px; font-size: 14px; }
.details div.wide { grid-column: 1 / -1; border-right: 0; }
.details div.wide dd { font-weight: 500; white-space: pre-wrap; }
.handover-controls { grid-template-columns: minmax(0, 1fr) auto; }
@media (max-width: 560px) {
  .handover-controls { grid-template-columns: 1fr; }
}
.danger-btn { min-height: 48px; padding: 0 18px; border: 1px solid #fecdca; border-radius: 12px; background: white; font-weight: 800; }
.danger-btn.small-btn { min-height: 34px; padding: 0 12px; }
.danger-btn:hover { background: var(--danger-bg); }
.line-row select { width: 100%; min-width: 0; text-overflow: ellipsis; }
@media (max-width: 1100px) {
  .stack-table, .stack-table tbody, .stack-table tr, .stack-table td { display: block; width: 100%; }
  .stack-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; }
  .stack-table tr { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px 12px; padding: 14px 16px; border-bottom: 1px solid var(--line); }
  .stack-table td { padding: 0; border: 0; white-space: normal; overflow-wrap: break-word; min-width: 0; }
  .stack-table td::before { content: attr(data-label); display: block; margin-bottom: 3px; color: var(--muted); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
  .stack-table td.col-order::before, .stack-table td.col-customer::before, .stack-table td.col-action::before, .stack-table td.empty::before { content: none; }
  .stack-table td.col-order { font-size: 15px; }
  .stack-table td.col-customer { text-align: right; font-weight: 700; }
  .stack-table td.col-total { font-weight: 800; }
  .stack-table td.col-action { grid-column: 1 / -1; margin-top: 4px; }
  .stack-table td.col-action .small-btn { width: 100%; }
  .stack-table td.empty { grid-column: 1 / -1; text-align: center; }
  .stack-table .pill { margin: 0 4px 4px 0; }
  .table-wrap:has(> .stack-table) { overflow-x: visible; }
}
#ldy-biz-form { max-width: 760px; }
#ldy-biz-form fieldset { border: 1px solid #e4e7ec; border-radius: 12px; padding: 14px 16px 18px; margin: 0; display: grid; gap: 14px; }
#ldy-biz-form legend { padding: 0 6px; font-size: 13px; font-weight: 800; color: var(--ink); }
.setup-facts, .setup-readonly { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; font-size: 13px; color: var(--ink); }
.setup-readonly dt { color: var(--muted); font-size: 12px; font-weight: 700; }
.setup-readonly dd { margin: 0 0 8px; font-weight: 600; }
.setup-preview { display: flex; justify-content: center; padding: 6px 0; }
.setup-readiness { margin: 0 0 14px; padding: 0; list-style: none; display: grid; gap: 10px; }
.setup-readiness li { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.setup-row-label { font-weight: 700; font-size: 13px; color: var(--ink); min-width: 180px; }
.setup-readiness .hint { flex-basis: 100%; margin: 0; }
.setup-overall { display: flex; flex-wrap: wrap; gap: 8px; margin: 6px 0 10px; }
.hint-list { margin: 0 0 8px; padding-left: 18px; color: var(--muted); font-size: 12px; display: grid; gap: 4px; }
.msg-panel .panel-head .pill { flex: none; white-space: nowrap; }
.msg-body { display: grid; gap: 16px; padding: 20px 24px 24px; background: var(--soft); }
.msg-notice { margin: 0; padding: 12px 14px 12px 16px; border: 1px solid #b9e6fe; border-left: 4px solid #026aa2; border-radius: 12px; background: #f0f9ff; color: #026aa2; font-size: 13px; font-weight: 600; line-height: 1.5; }
.msg-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.msg-card { display: grid; align-content: start; gap: 14px; min-width: 0; padding: 18px 20px 20px; border: 1px solid var(--line); border-radius: 14px; background: #fff; }
.msg-card-head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 10px 16px; }
.msg-card-head h3 { margin: 0; font-size: 15px; line-height: 1.3; }
.msg-card-head p { margin: 4px 0 0; color: var(--muted); font-size: 13px; line-height: 1.5; }
.msg-facts { display: grid; margin: 0; border-top: 1px solid var(--line); }
.msg-facts > div { display: grid; grid-template-columns: minmax(130px, 170px) minmax(0, 1fr); gap: 4px 16px; align-items: center; min-height: 44px; padding: 8px 0; border-bottom: 1px solid var(--line); }
.msg-facts dt { color: var(--muted); font-size: 12px; font-weight: 700; }
.msg-facts dd { margin: 0; font-size: 14px; font-weight: 600; color: var(--ink); overflow-wrap: anywhere; }
.msg-help { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.5; }
.msg-alert { margin: 0; padding: 12px 14px; border: 1px solid #fecdca; border-radius: 10px; background: var(--danger-bg); color: var(--danger); font-size: 13px; line-height: 1.5; }
.msg-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.msg-actions .secondary { padding: 0 18px; }
.msg-next { display: grid; gap: 4px; margin: 0; padding: 12px 14px; border-radius: 10px; background: var(--soft); }
.msg-next strong { color: var(--muted); font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.msg-next p { margin: 0; color: var(--ink); font-size: 13px; line-height: 1.55; }
.msg-empty { display: grid; gap: 4px; padding: 16px; border: 1px dashed #d0d5dd; border-radius: 10px; background: var(--soft); text-align: center; }
.msg-empty strong { font-size: 14px; }
.msg-empty p { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.5; }
.msg-preview { display: grid; gap: 12px; padding: 14px 16px 16px; border: 1px dashed #c7d2fe; border-radius: 12px; background: #fafaff; }
.msg-preview .eyebrow { margin: 0; }
.msg-preview-title { margin: 0; font-size: 14px; font-weight: 700; }
.msg-preview ol { display: grid; gap: 8px; margin: 0; padding-left: 20px; font-size: 13px; line-height: 1.5; }
.msg-choice { display: grid; gap: 10px; }
.msg-choice .secondary { display: grid; gap: 3px; width: 100%; min-height: 56px; padding: 10px 16px; text-align: left; line-height: 1.3; }
.msg-choice .secondary span { color: var(--muted); font-size: 12px; font-weight: 600; }
.msg-choice .secondary:hover { border-color: #a5b4fc; background: #fafaff; }
.msg-templates { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.msg-template { display: grid; gap: 8px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--soft); }
.msg-template-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 10px; }
.msg-template-head strong { font-size: 14px; }
.msg-template-text { margin: 0; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: #fff; color: var(--ink); font-size: 13px; line-height: 1.6; overflow-wrap: anywhere; }
.msg-lang { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; color: var(--muted); font-size: 12px; font-weight: 700; }
.msg-lang select { min-width: 150px; min-height: 42px; padding: 0 11px; border: 1px solid #d0d5dd; border-radius: 10px; color: var(--ink); background: #fff; font: inherit; font-size: 14px; font-weight: 600; }
.msg-lang select:focus { outline: none; border-color: var(--indigo); box-shadow: 0 0 0 3px rgba(79, 70, 229, .1); }
.msg-legend { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.msg-legend li { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; color: var(--muted); font-size: 12px; line-height: 1.5; }
.msg-legend .pill { flex: none; }
.msg-history { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.msg-history li { display: grid; gap: 4px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--soft); }
.msg-history-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 10px; font-size: 14px; }
.msg-history-meta { margin: 0; color: var(--muted); font-size: 12px; }
.msg-panel button:focus-visible, .msg-panel select:focus-visible { outline: 3px solid rgba(79, 70, 229, .45); outline-offset: 2px; }
@media (max-width: 1100px) {
  .msg-grid { grid-template-columns: 1fr; }
}
@media (max-width: 620px) {
  .msg-body { padding: 16px; gap: 14px; }
  .msg-card { padding: 16px; }
  .msg-facts > div { grid-template-columns: 1fr; gap: 2px; align-items: start; }
  .msg-actions .secondary, .msg-lang, .msg-lang select { width: 100%; }
  .msg-preview .msg-actions .small-btn { flex: 1; }
}
@media (max-width: 760px) {
  .msg-lang select { min-height: 44px; }
}
.document-sample { box-sizing: border-box; max-width: 100%; margin: 16px auto; padding: 12px; background: #fff; color: #111; border: 1px dashed #999; overflow-wrap: anywhere; line-height: 1.35; }
.document-sample.mm58 { width: 58mm; font-size: 10px; }
.document-sample.mm80 { width: 80mm; font-size: 12px; }
.document-sample.no-printer { width: 80mm; opacity: .8; }
.document-sample h2 { margin: 8px 0; font-size: 1.3em; line-height: 1.2; text-align: center; }
.document-sample p { margin: 7px 0; }
.document-sample-warning { text-align: center; font-size: 9px; font-weight: 900; letter-spacing: .03em; }
.document-sample-contact, .document-sample-label { font-size: .9em; text-align: center; }
.document-sample-rule { height: 1px; margin: 9px 0; border-top: 1px dashed #111; }
.document-sample.preset-clean-minimal { letter-spacing: 0; }
.document-sample.preset-thermal-compact { line-height: 1.2; }
.document-sample.preset-thermal-compact p { margin: 4px 0; }
.document-sample.preset-thermal-compact .document-sample-rule { margin: 5px 0; }
@media print {
  .document-sample { margin: 0; padding: 2mm; border: 0; max-width: none; break-inside: avoid; }
  .document-sample.mm58 { width: 58mm; }
  .document-sample.mm80 { width: 80mm; }
}


/* The shared Product Manager contains live edit controls inside a wide
 * product/pack table. Unlike read-only report data, its action buttons must
 * not be placed in a horizontally scrolled offscreen area at tablet/mobile
 * widths. Stack only this table, preserving other Business/Invoice grids. */
@media screen and (max-width: 1024px) {
  .product-manager-table,
  .product-manager-table tbody,
  .product-manager-table tr,
  .product-manager-table td {
    display: block;
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    max-width: 100%;
  }
  .product-manager-table { border-spacing: 0; }
  .product-manager-table thead {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }
  .product-manager-table tr {
    padding: 12px 16px;
    border-bottom: 1px solid var(--line);
  }
  .product-manager-table tr.group-row {
    padding: 14px 16px;
    background: var(--soft);
  }
  .product-manager-table td {
    padding: 5px 0;
    border: 0;
    white-space: normal;
    overflow-wrap: anywhere;
  }
  .product-manager-table .row-actions.inline {
    display: flex;
    width: 100%;
    margin: 10px 0 0;
    flex-wrap: wrap;
    justify-content: flex-start;
  }
  .product-manager-table .row-actions:not(.inline) {
    justify-content: flex-start;
    flex-wrap: wrap;
  }
  .product-manager-table .row-actions button {
    max-width: 100%;
    white-space: normal;
  }
  /* Keep the table wrapper scroll contract (overflow-x:auto), even though
   * this stacked table now fits inside it, to satisfy the shared layout gate. */
}
@media screen and (max-width: 560px) {
  .product-manager-table .row-actions button {
    box-sizing: border-box;
    width: 100%;
    min-height: 42px;
  }
}

/* The shared app launcher: one entry point for every entitled business. */
.app-launcher {
  min-height: 100vh;
  color: #111b3d;
  background: radial-gradient(ellipse at 75% -14%, #e8eafb 0, transparent 45%),
    radial-gradient(ellipse at 0 100%, #f5f1ff 0, transparent 44%), #f8f9fe;
}
.app-launcher-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 25px clamp(24px, 5vw, 80px);
  border-bottom: 1px solid #e7e9f3;
  background: #fff;
}
.app-launcher-brand { display: inline-flex; align-items: center; gap: 10px; min-width: 0; }
.app-launcher-brand img { display: block; width: 38px; height: 38px; object-fit: contain; }
.app-launcher-brand strong { color: #050d49; font-size: 24px; letter-spacing: -.055em; }
.app-launcher-brand > span { margin-left: 3px; padding-left: 13px; border-left: 1px solid #cfd3e7; color: #5b6382; font-size: 11px; font-weight: 800; letter-spacing: .14em; }
.app-launcher-actions { display: flex; align-items: center; gap: 11px; }
.app-launcher-business { max-width: 230px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; color: #3b4262; font-size: 13px; font-weight: 700; }
.app-launcher-actions button, .app-launcher-back { min-height: 38px; padding: 0 13px; border: 1px solid #dfe2ed; border-radius: 9px; background: #fff; color: #1f2b4c; font-size: 13px; font-weight: 700; }
.app-launcher-actions button:hover, .app-launcher-back:hover { border-color: #aab2d9; background: #f3f5fc; }
.app-launcher-main { width: min(1180px, calc(100% - 48px)); margin: 0 auto; padding: clamp(56px, 8vh, 100px) 0 84px; }
.app-launcher-kicker { margin: 0 0 12px; color: #5149bf; font-size: 11px; font-weight: 900; letter-spacing: .17em; }
.app-launcher-main h1 { margin: 0; color: #060e3b; font-size: clamp(36px, 4.6vw, 58px); line-height: 1.08; letter-spacing: -.065em; }
.app-launcher-period { color: #f5a623; }
.app-launcher-intro { margin: 12px 0 38px; color: #69718d; font-size: 15px; }
.app-launcher-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 18px; align-items: stretch; }
.app-tile {
  display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start;
  min-width: 0; min-height: 166px; padding: 22px; text-align: left;
  border: 1px solid #e7e9f2; border-radius: 19px;
  color: #17203d; background: #fff;
  box-shadow: 0 2px 6px rgba(21,30,66,.025);
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.app-tile:hover { transform: translateY(-3px); border-color: #c8c9ec; box-shadow: 0 12px 27px rgba(30,42,89,.09); }
.app-tile:focus-visible, .app-launcher-actions button:focus-visible, .app-launcher-back:focus-visible {
  outline: 3px solid #7067ea; outline-offset: 3px;
}
.app-tile-icon { display: grid; place-items: center; width: 48px; height: 48px; margin-bottom: 19px; border-radius: 13px; }
.app-tile-icon svg { display: block; width: 25px; height: 25px; }
.app-tile strong { font-size: 15px; letter-spacing: -.015em; }
.app-tile-caption { margin-top: 4px; color: #7a829b; font-size: 12px; line-height: 1.4; }
.tone-indigo { background: #eeedff; color: #504bd1; }
.tone-amber { background: #fff2dc; color: #c57a13; }
.tone-blue { background: #eaf2ff; color: #346fda; }
.tone-rose { background: #ffedf0; color: #ce536e; }
.tone-teal { background: #e6f9f5; color: #178d7c; }
.tone-violet { background: #f3ebff; color: #8654cb; }
.tone-green { background: #ebf9ed; color: #3b9c56; }
.tone-cyan { background: #e7f8ff; color: #2589ad; }
.tone-purple { background: #f4ecff; color: #815ac9; }
.tone-slate { background: #ecf0f8; color: #536888; }
.tone-orange { background: #fff0e6; color: #cc7636; }
.tone-gray { background: #eef0f4; color: #637189; }
.tone-pink { background: #ffedf7; color: #bd5898; }
.app-launcher-empty { grid-column: 1 / -1; padding: 24px; color: #64708f; }
.app-launcher-back { margin-left: 16px; }
@media (max-width: 1150px) { .app-launcher-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 840px) {
  .app-launcher-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .app-launcher-business { max-width: 160px; }
}
@media (max-width: 620px) {
  .app-launcher-header { flex-wrap: wrap; padding: 18px 20px; }
  .app-launcher-brand strong { font-size: 22px; }
  .app-launcher-brand > span { font-size: 10px; }
  .app-launcher-actions { width: 100%; justify-content: space-between; gap: 6px; }
  .app-launcher-business { max-width: 110px; }
  .app-launcher-actions button { padding: 0 8px; font-size: 12px; }
  .app-launcher-main { width: calc(100% - 32px); padding-top: 48px; }
  .app-launcher-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .app-tile { min-height: 145px; padding: 17px; border-radius: 15px; }
  .app-tile-icon { width: 44px; height: 44px; margin-bottom: 14px; }
  .app-tile-caption { font-size: 11px; }
  .app-launcher-back { margin: 0; }
}
@media (prefers-reduced-motion: reduce) { .app-tile { transition: none; } .app-tile:hover { transform: none; } }

/* App-level navigation: scoped sidebar and a matching grid of submenus. */
.app-subgrid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.app-subtile { min-height: 152px; }
.app-subtile strong { font-size: 15px; line-height: 1.35; }
.sidebar-app-home {
  width: 100%; min-height: 44px; margin-bottom: 16px; padding: 10px 14px;
  border: 1px solid rgba(255,255,255,.24); border-radius: 11px;
  background: rgba(255,255,255,.09); color: #fff; font-weight: 750; text-align: left;
}
.sidebar-app-home:hover { background: rgba(255,255,255,.17); }
.sidebar-app-home:focus-visible { outline: 3px solid #f9b13c; outline-offset: 2px; }
.topbar-app-actions { display: inline-flex; justify-content: flex-end; align-items: center; flex-wrap: wrap; gap: 8px; }
.topbar-app-actions .app-launcher-back { margin-left: 0; }
@media (max-width: 1100px) { .app-subgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 760px) { .app-subgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) {
  .app-subtile { min-height: 130px; }
  .topbar-app-actions { justify-content: flex-start; width: 100%; }
}


/* App navigation: nine-dot switcher lives at the top-left. */
.sidebar-brand { display: flex; gap: 10px; align-items: center; margin: 0 6px 28px; }
.sidebar-brand .wordmark { width: 146px; max-width: calc(100% - 52px); margin: 0; }
.app-switcher-icon {
  display: grid; place-items: center; flex: 0 0 42px;
  width: 42px; height: 42px; padding: 8px;
  border: 1px solid rgba(255,255,255,.2); border-radius: 10px;
  color: #fff; background: rgba(255,255,255,.08);
}
.app-switcher-icon svg { width: 23px; height: 23px; }
.app-switcher-icon:hover { background: rgba(255,255,255,.18); }
.app-switcher-icon:focus-visible { outline: 3px solid #b8afff; outline-offset: 2px; }
.module-home-app-switcher {
  display: grid; place-items: center; flex: 0 0 40px;
  width: 40px; min-height: 40px; padding: 8px;
  border: 1px solid #dfe2ed; border-radius: 9px;
  color: #1f2b4c; background: #fff;
}
.module-home-app-switcher svg { width: 22px; height: 22px; }
.module-home-app-switcher:hover { border-color: #aab2d9; background: #f3f5fc; }
.module-home-app-switcher:focus-visible { outline: 3px solid #7067ea; outline-offset: 2px; }
@media (max-width: 760px) { .sidebar-brand { margin-bottom: 16px; } }


/* Single-level app home. Only the colored icon and centered label
   are visible: no cards, descriptions, app subgrids or marketing headings. */
.app-launcher { background: #f4f6fb; }
.app-launcher-header { padding-block: 20px; }
.app-launcher-main {
  width: min(1060px, calc(100% - 40px));
  min-height: calc(100vh - 88px);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
  padding: 42px 0 88px;
}
.app-launcher-grid {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  align-items: start;
  justify-items: center;
  gap: 34px 22px;
}
.app-launcher-grid .app-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  width: 100%;
  min-height: 122px;
  padding: 8px 3px;
  border: 0;
  border-radius: 14px;
  text-align: center;
  background: transparent;
  box-shadow: none;
  color: #232e46;
  transform: none;
  transition: none;
}
.app-launcher-grid .app-tile:hover {
  border: 0;
  background: transparent;
  box-shadow: none;
  transform: none;
}
.app-launcher-grid .app-tile:focus-visible {
  outline: 3px solid #6b65d9;
  outline-offset: 1px;
}
.app-launcher-grid .app-tile-icon {
  width: 76px;
  height: 76px;
  flex: none;
  display: grid;
  place-items: center;
  margin: 0 0 12px;
  border-radius: 18px;
  color: #fff;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.25), 0 6px 13px rgba(19,31,66,.13);
  transition: transform .16s ease, box-shadow .16s ease;
}
.app-launcher-grid .app-tile-icon svg {
  display: block;
  width: 39px;
  height: 39px;
  stroke-width: 1.65;
}
.app-launcher-grid .app-tile:hover .app-tile-icon {
  transform: translateY(-3px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.28), 0 11px 18px rgba(19,31,66,.18);
}
.app-launcher-grid .app-tile strong {
  display: block;
  max-width: 122px;
  color: #24314b;
  font-size: 13.5px;
  font-weight: 650;
  line-height: 1.35;
  letter-spacing: 0;
}
.app-launcher-grid .tone-slate { background: linear-gradient(145deg,#8497b9,#506789); }
.app-launcher-grid .tone-amber { background: linear-gradient(145deg,#ffbc63,#df7b35); }
.app-launcher-grid .tone-indigo { background: linear-gradient(145deg,#8d86f6,#5c54c9); }
.app-launcher-grid .tone-blue { background: linear-gradient(145deg,#76b7fb,#3875d4); }
.app-launcher-grid .tone-rose { background: linear-gradient(145deg,#fa91a7,#ca557d); }
.app-launcher-grid .tone-teal { background: linear-gradient(145deg,#64d2c0,#21958b); }
.app-launcher-grid .tone-violet { background: linear-gradient(145deg,#c09cf4,#8358c5); }
.app-launcher-grid .tone-green { background: linear-gradient(145deg,#80dba4,#2eaa75); }
.app-launcher-grid .tone-cyan { background: linear-gradient(145deg,#85d8f5,#299ac2); }
.app-launcher-grid .tone-purple { background: linear-gradient(145deg,#bc96f3,#8d60cc); }
.app-launcher-grid .tone-orange { background: linear-gradient(145deg,#ffba80,#e57d43); }
.app-launcher-grid .tone-gray { background: linear-gradient(145deg,#afb9c8,#717f95); }
.app-launcher-grid .tone-pink { background: linear-gradient(145deg,#f4a8d0,#c368a1); }
.sidebar-current-app {
  margin: 0 9px 8px;
  padding: 10px 5px;
  font-size: 16px;
  font-weight: 750;
  color: #fff;
}
@media (max-width: 1100px) {
  .app-launcher-grid { grid-template-columns: repeat(6, minmax(0,1fr)); }
}
@media (max-width: 870px) {
  .app-launcher-grid { grid-template-columns: repeat(5, minmax(0,1fr)); gap: 27px 16px; }
}
@media (max-width: 620px) {
  .app-launcher-main { min-height: calc(100vh - 132px); width: calc(100% - 24px); padding: 28px 0 60px; }
  .app-launcher-grid { grid-template-columns: repeat(4, minmax(0,1fr)); gap: 20px 8px; }
  .app-launcher-grid .app-tile { min-height: 112px; padding: 5px 0; }
  .app-launcher-grid .app-tile-icon { width: 61px; height: 61px; border-radius: 15px; margin-bottom: 9px; }
  .app-launcher-grid .app-tile-icon svg { width: 32px; height: 32px; }
  .app-launcher-grid .app-tile strong { font-size: 12px; }
}
@media (max-width: 410px) {
  .app-launcher-grid { grid-template-columns: repeat(3, minmax(0,1fr)); }
}
@media (prefers-reduced-motion: reduce) {
  .app-launcher-grid .app-tile-icon { transition: none; }
  .app-launcher-grid .app-tile:hover .app-tile-icon { transform: none; }
}


/* Compact root launcher: four centered shortcuts per row, with no extra app
   roots for Orders, Invoices, Payments, Control, Locations or Imports. */
.app-launcher-grid {
  width: min(720px, 100%);
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: 0 auto;
  gap: 32px 24px;
}
.app-launcher-brand > span {
  font-size: 13px;
  letter-spacing: .01em;
  text-transform: none;
  color: #445271;
}
.app-launcher-actions { margin-left: auto; }
.topbar-account { display: inline-flex; align-items: center; justify-content: flex-end; gap: 12px; flex-shrink: 0; }
.account-menu { position: relative; flex-shrink: 0; z-index: 50; }
.account-trigger {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 5px 9px 5px 5px;
  border: 1px solid transparent;
  border-radius: 25px;
  cursor: pointer;
  color: #1c2843;
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
  list-style: none;
  user-select: none;
}
.account-trigger::-webkit-details-marker { display: none; }
.account-trigger::marker { content: ''; }
.account-trigger:hover, .account-menu[open] .account-trigger {
  background: #f3f5fc;
  border-color: #e1e5f2;
}
.account-trigger:focus-visible { outline: 3px solid #655ddb; outline-offset: 2px; }
.account-avatar {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  flex-shrink: 0;
  border-radius: 50%;
  background: linear-gradient(140deg, #7265dc, #293a8d);
  color: #fff;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .02em;
}
.account-name { max-width: 170px; overflow: hidden; text-overflow: ellipsis; }
.account-chevron { display: inline-block; margin-left: 1px; color: #71809a; font-size: 19px; line-height: 1; }
.account-menu[open] .account-chevron { transform: rotate(180deg); }
.account-dropdown {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  min-width: 224px;
  max-width: min(88vw, 290px);
  padding: 6px;
  border: 1px solid #e2e6f0;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 16px 42px rgba(22,34,66,.16);
  z-index: 70;
}
.account-dropdown-head {
  display: grid;
  gap: 4px;
  padding: 11px 12px 12px;
  margin-bottom: 5px;
  border-bottom: 1px solid #e7e9f2;
}
.account-dropdown-head strong { font-size: 13px; color: #1a2544; word-break: break-word; }
.account-dropdown-head small { font-size: 11px; color: #64708b; overflow-wrap: anywhere; }
.account-dropdown button {
  display: block;
  width: 100%;
  min-height: 42px;
  padding: 9px 12px;
  border: 0;
  border-radius: 8px;
  text-align: left;
  background: transparent;
  color: #243251;
  font-size: 13px;
  font-weight: 650;
}
.account-dropdown button:hover, .account-dropdown button:focus-visible {
  background: #f0f2fa;
}
.account-dropdown button:last-child { color: #a13d44; }
@media (max-width: 620px) {
  .app-launcher-grid {
    width: 100%;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px 8px;
  }
  .app-launcher-actions { width: auto; margin-left: auto; }
  .account-name { max-width: 115px; }
  .account-trigger { padding: 4px; gap: 7px; }
  .account-avatar { width: 34px; height: 34px; }
  .topbar-account { flex-wrap: wrap; gap: 6px; }
}
@media (max-width: 410px) {
  .app-launcher-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .account-name { max-width: 86px; }
}


/* WorkProof visual system, adapted from calcobase-workproof-platform/develop
   web/src/app/globals.css and web/src/components/app-shell. Presentation only:
   preserve Sales and Laundry routes, RBAC, invoice print layouts and handlers. */
.workproof-theme {
  --navy: #4f46e5;
  --navy-2: #4338ca;
  --orange: #f59e0b;
  --indigo: #4f46e5;
  --ink: #0f172a;
  --muted: #7b8496;
  --line: #e9ebf0;
  --panel: #fff;
  --soft: #f7f8fa;
  --success: #047857;
  --success-bg: #ecfdf5;
  --danger: #be123c;
  --danger-bg: #fef2f2;
  --wp-shell: #fff;
  --wp-surface: #eef0f4;
  --wp-brand-soft: #eef0ff;
  --wp-shadow: 0 1px 2px rgba(16, 24, 40, .05);
  min-height: 100dvh;
  grid-template-columns: 248px minmax(0, 1fr);
  color: var(--ink);
  background: var(--wp-surface);
  font-size: 13.5px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
.workproof-theme .sidebar {
  height: 100dvh;
  position: sticky;
  top: 0;
  overflow-y: auto;
  min-width: 0;
  padding: 0 10px 18px;
  color: #344054;
  background: var(--wp-shell);
  border-right: 1px solid var(--line);
  scrollbar-width: thin;
}
.workproof-theme .sidebar-brand {
  height: 58px;
  min-height: 58px;
  margin: 0 -10px 12px;
  padding: 0 10px;
  gap: 8px;
  border-bottom: 1px solid #f1f2f6;
}
.workproof-theme .app-switcher-icon {
  flex: 0 0 35px;
  width: 35px;
  height: 35px;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 9px;
  color: var(--indigo);
  background: #fff;
}
.workproof-theme .app-switcher-icon svg { width: 19px; height: 19px; }
.workproof-theme .app-switcher-icon:hover { background: var(--wp-brand-soft); border-color: #c7c8fc; }
.workproof-theme .app-switcher-icon:focus-visible,
.workproof-theme .sidebar-collapse:focus-visible,
.workproof-theme .mobile-nav-toggle:focus-visible { outline: 3px solid #a5b4fc; outline-offset: 2px; }
.workproof-theme .brand-lockup { display: flex; align-items: center; min-width: 0; gap: 8px; flex: 1; }
.workproof-theme .brand-symbol { display: block; flex: 0 0 25px; width: 25px; height: 25px; object-fit: contain; }
.workproof-theme .brand-copy { display: grid; min-width: 0; gap: 0; }
.workproof-theme .brand-copy strong {
  color: #0f172a; font-size: 13.5px; font-weight: 700;
  letter-spacing: -.02em; line-height: 1.25;
}
.workproof-theme .brand-copy small {
  color: #98a2b3; font-size: 11px; line-height: 1.2;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.workproof-theme .sidebar-collapse {
  display: grid; place-items: center; flex: 0 0 26px; width: 26px; height: 26px;
  border: 0; border-radius: 7px; color: #98a2b3; background: transparent;
}
.workproof-theme .sidebar-collapse svg { width: 16px; height: 16px; }
.workproof-theme .sidebar-collapse:hover { color: #4f46e5; background: #f7f8fa; }
.workproof-theme .tenant-chip {
  margin: 0 4px 12px;
  padding: 10px 12px;
  gap: 2px;
  color: #344054;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #f7f8fa;
}
.workproof-theme .tenant-chip span {
  color: #98a2b3; font-size: 10px; font-weight: 650; letter-spacing: .075em;
}
.workproof-theme .tenant-chip strong { color: #0f172a; font-size: 12.5px; font-weight: 680; }
.workproof-theme .tenant-chip small { color: #7b8496; font-size: 10.5px; }
.workproof-theme .sidebar-current-app {
  margin: 0 6px 3px; padding: 10px 6px 3px;
  color: #7b8496; font-size: 10px; letter-spacing: .085em;
  font-weight: 700; text-transform: uppercase;
}
.workproof-theme .sidebar nav { gap: 0; }
.workproof-theme .nav-group { margin: 3px 0 0; gap: 1px; }
.workproof-theme .nav-group-title {
  margin: 0; padding: 12px 10px 5px;
  color: #98a2b3; font-size: 10px; font-weight: 650;
  letter-spacing: .085em; line-height: 1.4;
}
.workproof-theme .nav-btn {
  display: flex; align-items: center; width: 100%; min-height: 36px;
  gap: 10px; margin: 1px 0; padding: 8px 10px;
  border: 0; border-radius: 9px;
  color: #344054; background: transparent;
  font-size: 12.7px; font-weight: 500; line-height: 1.35;
  transition: color .12s, background-color .12s;
}
.workproof-theme .nav-btn .nav-icon { display: inline-grid; place-items: center; flex: 0 0 17px; width: 17px; height: 17px; color: #98a2b3; }
.workproof-theme .nav-btn .nav-icon svg { display: block; width: 17px; height: 17px; stroke-width: 1.8; }
.workproof-theme .nav-btn .nav-label { min-width: 0; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; }
.workproof-theme .nav-btn:hover { color: #0f172a; background: #f7f8fa; }
.workproof-theme .nav-btn.active,
.workproof-theme .nav-btn.nav-primary.active {
  color: #4f46e5; background: #eef0ff; font-weight: 650;
}
.workproof-theme .nav-btn.active .nav-icon { color: #4f46e5; }
.workproof-theme .nav-btn.nav-primary { margin-bottom: 1px; color: #344054; background: transparent; font-size: 12.7px; }
.workproof-theme .nav-btn.nav-primary:hover:not(.active) { color: #0f172a; background: #f7f8fa; }
.workproof-theme.sidebar-collapsed { grid-template-columns: 72px minmax(0, 1fr); }
.workproof-theme.sidebar-collapsed .sidebar-brand { justify-content: center; padding-inline: 8px; }
.workproof-theme.sidebar-collapsed .brand-lockup,
.workproof-theme.sidebar-collapsed .tenant-chip,
.workproof-theme.sidebar-collapsed .sidebar-current-app,
.workproof-theme.sidebar-collapsed .nav-group-title,
.workproof-theme.sidebar-collapsed .nav-label,
.workproof-theme.sidebar-collapsed .sidebar-collapse { display: none; }
.workproof-theme.sidebar-collapsed .sidebar nav { margin-top: 8px; }
.workproof-theme.sidebar-collapsed .nav-group { gap: 6px; }
.workproof-theme.sidebar-collapsed .nav-btn { justify-content: center; padding: 10px; }
.workproof-theme.sidebar-collapsed .nav-btn .nav-icon { width: 20px; height: 20px; flex-basis: 20px; }
.workproof-theme.sidebar-collapsed .nav-btn .nav-icon svg { width: 20px; height: 20px; }
.workproof-theme.sidebar-collapsed .app-switcher-icon { flex-basis: 40px; width: 40px; }
.workproof-theme .content { min-width: 0; padding: 0 0 36px; background: var(--wp-surface); }
.workproof-theme .topbar {
  position: relative; display: flex; align-items: center; justify-content: space-between;
  min-height: 58px; gap: 12px;
  margin: 0; padding: 0 22px;
  background: #fff; border-bottom: 1px solid var(--line);
}
.workproof-theme .topbar-leading { display: flex; align-items: center; min-width: 0; }
.workproof-theme .topbar-breadcrumb {
  display: flex; align-items: center; gap: 8px;
  min-width: 0; color: #7b8496; font-size: 12.5px;
}
.workproof-theme .topbar-breadcrumb span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.workproof-theme .topbar-breadcrumb span:last-child { color: #344054; font-weight: 650; }
.workproof-theme .breadcrumb-separator { color: #98a2b3; }
.workproof-theme .topbar-account { gap: 10px; }
.workproof-theme .account-trigger { font-size: 12.7px; }
.workproof-theme .account-avatar { width: 32px; height: 32px; font-size: 11px; background: #eef0ff; color: #4f46e5; }
.workproof-theme .access-badge { font-size: 10.5px; padding: 4px 8px; font-weight: 650; }
.workproof-theme .page-head { padding: 21px 22px 0; }
.workproof-theme .page-head h1 {
  margin: 0; color: #0f172a; font-size: 22px; font-weight: 680;
  letter-spacing: -.5px; line-height: 1.3;
}
.workproof-theme .page-head p { margin: 3px 0 0; color: #7b8496; font-size: 12.7px; }
.workproof-theme #section-content { padding: 18px 22px 0; }
.workproof-theme .alert { margin: 16px 22px 0; }
.workproof-theme .metric-grid { gap: 14px; }
.workproof-theme .metric, .workproof-theme .panel,
.workproof-theme .dash-tile {
  border: 1px solid var(--line);
  background: #fff;
  box-shadow: var(--wp-shadow);
}
.workproof-theme .metric {
  position: relative; align-content: start; gap: 9px; min-height: 137px;
  padding: 16px 17px; border-radius: 16px;
}
.workproof-theme .metric span:first-child {
  padding-right: 26px; color: #7b8496; text-transform: uppercase;
  letter-spacing: .075em; font-size: 10.5px; font-weight: 650;
}
.workproof-theme .metric strong { color: #0f172a; font-size: 27px; font-weight: 680; letter-spacing: -1px; line-height: 1.15; }
.workproof-theme .metric small { color: #7b8496; font-size: 11.5px; line-height: 1.45; }
.workproof-theme .metric:nth-child(4n + 1) { border-top: 2px solid #818cf8; }
.workproof-theme .metric:nth-child(4n + 2) { border-top: 2px solid #f59e0b; }
.workproof-theme .metric:nth-child(4n + 3) { border-top: 2px solid #10b981; }
.workproof-theme .metric:nth-child(4n + 4) { border-top: 2px solid #93c5fd; }
.workproof-theme .panel { margin-top: 16px; border-radius: 16px; }
.workproof-theme .panel-head { padding: 15px 18px; gap: 12px; border-bottom-color: #f1f2f6; }
.workproof-theme .panel-head h2 { margin: 0 0 3px; color: #0f172a; font-size: 14px; letter-spacing: -.2px; font-weight: 650; }
.workproof-theme .panel-head p { font-size: 11.5px; color: #7b8496; }
.workproof-theme .dash-tile { padding: 16px 17px; border-radius: 16px; gap: 9px; }
.workproof-theme .dash-tile span { color: #98a2b3; font-size: 10.5px; font-weight: 650; text-transform: uppercase; letter-spacing: .075em; }
.workproof-theme .dash-tile strong { color: #0f172a; font-size: 27px; font-weight: 680; }
.workproof-theme .dash-tile small { font-size: 11.5px; }
.workproof-theme th {
  padding: 11px 15px; color: #98a2b3;
  background: #f7f8fa; border-color: #e9ebf0;
  font-size: 10.5px; font-weight: 650; letter-spacing: .075em;
}
.workproof-theme td { padding: 12px 15px; border-color: #f1f2f6; font-size: 12.7px; color: #344054; }
.workproof-theme tbody tr:hover { background: #f7f8fa; }
.workproof-theme .primary,
.workproof-theme .secondary,
.workproof-theme .small-btn,
.workproof-theme .filter-btn {
  border-radius: 9px; font-size: 12.7px; font-weight: 650;
}
.workproof-theme .primary { color: white; background: #4f46e5; }
.workproof-theme .primary:hover { background: #4338ca; }
.workproof-theme .secondary { color: #344054; background: #fff; border: 1px solid #e9ebf0; }
.workproof-theme .secondary:hover { background: #f7f8fa; border-color: #c8cdd9; }
.workproof-theme input:not([type=checkbox]):not([type=radio]),
.workproof-theme select,
.workproof-theme textarea {
  border-color: #dfe3eb; border-radius: 9px;
  color: #0f172a; background-color: #fff;
  font-size: 12.7px;
}
.workproof-theme input:focus-visible,
.workproof-theme select:focus-visible,
.workproof-theme textarea:focus-visible { outline: 2px solid #c7d2fe; outline-offset: 1px; border-color: #6366f1; }
.workproof-theme .quick-actions { gap: 10px; padding: 16px 18px; }
.workproof-theme .quick-actions .small-btn { min-height: 38px; }
.workproof-theme .filter-bar { padding: 12px 16px; }
.workproof-theme .filter-btn { padding: 7px 11px; }
.workproof-theme .pos-search, .workproof-theme .pos-item,
.workproof-theme .pos-line { border-color: #f1f2f6; }
.workproof-theme .pos-grid { gap: 14px; }
.workproof-theme .card-grid { gap: 12px; padding: 16px; }
.workproof-theme .product-card { border-radius: 12px; background: #fff; }
.workproof-theme .sidebar .account-menu { margin-top: auto; }
.workproof-theme .mobile-nav-scrim, .workproof-theme .mobile-nav-toggle { display: none; }

/* Maintain readable navigation at smaller widths. At tablet width use the
   WorkProof icon rail; on mobile show a real off-canvas drawer. */
@media screen and (min-width: 761px) and (max-width: 1030px) {
  .workproof-theme:not(.sidebar-collapsed) { grid-template-columns: 72px minmax(0, 1fr); }
  .workproof-theme:not(.sidebar-collapsed) .sidebar-brand { justify-content: center; padding-inline: 8px; }
  .workproof-theme:not(.sidebar-collapsed) .brand-lockup,
  .workproof-theme:not(.sidebar-collapsed) .tenant-chip,
  .workproof-theme:not(.sidebar-collapsed) .sidebar-current-app,
  .workproof-theme:not(.sidebar-collapsed) .nav-group-title,
  .workproof-theme:not(.sidebar-collapsed) .nav-label,
  .workproof-theme:not(.sidebar-collapsed) .sidebar-collapse { display: none; }
  .workproof-theme:not(.sidebar-collapsed) .nav-btn { justify-content: center; padding: 10px; }
  .workproof-theme:not(.sidebar-collapsed) .nav-btn .nav-icon { flex-basis: 20px; }
}
@media screen and (max-width: 760px) {
  .workproof-theme, .workproof-theme.sidebar-collapsed { display: block; }
  .workproof-theme .sidebar {
    position: fixed; z-index: 101; inset: 0 auto 0 0;
    width: min(272px, calc(100vw - 48px)); height: 100dvh;
    padding: 0 10px 18px;
    transform: translateX(-105%); transition: transform .18s ease;
    box-shadow: 0 12px 35px rgba(15,23,42,.1);
  }
  .workproof-theme.mobile-nav-open .sidebar { transform: translateX(0); }
  .workproof-theme .mobile-nav-scrim {
    display: block; position: fixed; z-index: 100; inset: 0;
    background: rgba(15,23,42,.42); opacity: 0; pointer-events: none;
    transition: opacity .18s ease;
  }
  .workproof-theme.mobile-nav-open .mobile-nav-scrim { opacity: 1; pointer-events: auto; }
  .workproof-theme .sidebar .nav-group { display: grid; grid-template-columns: 1fr; }
  .workproof-theme .sidebar .nav-group-title { display: block; }
  .workproof-theme .sidebar .nav-label,
  .workproof-theme .sidebar .tenant-chip,
  .workproof-theme .sidebar .brand-lockup,
  .workproof-theme .sidebar .sidebar-current-app { display: initial; }
  .workproof-theme .sidebar .brand-lockup { display: flex; }
  .workproof-theme .sidebar .tenant-chip { display: grid; }
  .workproof-theme .sidebar .nav-btn { justify-content: flex-start; }
  .workproof-theme .sidebar .sidebar-collapse { display: none; }
  .workproof-theme .mobile-nav-toggle {
    display: grid; place-items: center; flex: none; width: 34px; height: 34px;
    margin-right: 9px; border: 0; border-radius: 9px;
    color: #344054; background: transparent;
  }
  .workproof-theme .mobile-nav-toggle svg { width: 19px; height: 19px; }
  .workproof-theme .mobile-nav-toggle:hover { background: #f7f8fa; }
  .workproof-theme .topbar { padding: 0 14px; }
  .workproof-theme .topbar-breadcrumb { font-size: 11.5px; gap: 5px; }
  .workproof-theme .page-head { padding: 18px 16px 0; }
  .workproof-theme #section-content { padding: 14px 16px 0; }
  .workproof-theme .metric-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .workproof-theme .panel-head { padding: 14px; }
  .workproof-theme .access-badge { display: none; }
  .workproof-theme .account-name { max-width: 90px; }
}
@media screen and (max-width: 410px) {
  .workproof-theme .metric-grid { grid-template-columns: 1fr 1fr; gap: 9px; }
  .workproof-theme .metric { padding: 12px; min-height: 125px; }
  .workproof-theme .metric strong { font-size: 23px; }
  .workproof-theme .topbar-breadcrumb span:first-child,
  .workproof-theme .breadcrumb-separator { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .workproof-theme .nav-btn,
  .workproof-theme .sidebar,
  .workproof-theme .mobile-nav-scrim { transition: none; }
}
@media print {
  .workproof-theme { display: block; min-height: 0; background: white; }
  .workproof-theme .sidebar, .workproof-theme .topbar, .workproof-theme .page-head,
  .workproof-theme .mobile-nav-scrim { display: none !important; }
  .workproof-theme .content, .workproof-theme #section-content { padding: 0; background: white; }
  .workproof-theme .panel { border: 0; box-shadow: none; }
}

/* The manually collapsed rail must always have an obvious way to expand
   again; keep All Apps as a separate launcher control. */
@media screen and (min-width: 1031px) {
  .workproof-theme.sidebar-collapsed .sidebar-brand { position: relative; }
  .workproof-theme.sidebar-collapsed .sidebar-collapse {
    display: grid; position: absolute; left: 22px; top: 67px;
    width: 28px; height: 28px; border: 1px solid var(--line);
    background: #fff; color: #4f46e5;
  }
  .workproof-theme.sidebar-collapsed .sidebar nav { margin-top: 42px; }
}


/* WorkProof company switcher and sidebar identity.
   Keep the company in the header and the signed-in operator at the bottom
   of the sidebar. Navigation alone scrolls, so the operator remains visible. */
.workproof-theme .sidebar {
  overflow: hidden;
  padding-bottom: 0;
  z-index: 5;
}
.workproof-theme .sidebar-brand { flex: 0 0 auto; }
.workproof-theme .sidebar-navigation {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-height: 0;
  overflow-y: auto;
  padding-bottom: 12px;
  scrollbar-width: thin;
}
.workproof-theme .sidebar-navigation nav { flex: 0 0 auto; }
.workproof-theme .sidebar-user-footer {
  flex: 0 0 auto;
  min-width: 0;
  margin: 0 -10px;
  padding: 10px 12px;
  border-top: 1px solid var(--line);
  background: #fff;
}
.workproof-theme .sidebar-user-footer .account-menu { width: 100%; }
.workproof-theme .sidebar-user-footer .account-trigger {
  width: 100%;
  min-width: 0;
  min-height: 44px;
  padding: 5px 7px;
  gap: 10px;
  border-radius: 9px;
  text-align: left;
}
.workproof-theme .sidebar-user-footer .account-avatar {
  width: 34px;
  height: 34px;
  background: #7252df;
  color: #fff;
  font-size: 11px;
}
.workproof-theme .sidebar-user-footer .account-user-meta {
  display: grid;
  flex: 1 1 auto;
  min-width: 0;
  gap: 2px;
}
.workproof-theme .sidebar-user-footer .account-name {
  display: block;
  max-width: 100%;
  font-size: 12.7px;
  line-height: 1.2;
  overflow: hidden;
  text-overflow: ellipsis;
}
.workproof-theme .sidebar-user-footer .account-role {
  display: block;
  color: #7b8496;
  font-size: 10.8px;
  font-weight: 500;
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.workproof-theme .sidebar-user-footer .account-chevron { margin-left: auto; }
.workproof-theme .sidebar-user-footer .account-dropdown {
  top: auto;
  bottom: calc(100% + 8px);
  right: auto;
  left: 0;
}
.workproof-theme .topbar-company-switch {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  max-width: 240px;
  min-height: 34px;
  padding: 6px 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
  color: #344054;
  font-size: 12.5px;
  font-weight: 650;
  cursor: pointer;
}
.workproof-theme .topbar-company-switch:hover { background: #f7f8fa; border-color: #c7cdd8; }
.workproof-theme .topbar-company-switch:focus-visible { outline: 3px solid #a5b4fc; outline-offset: 2px; }
.workproof-theme .topbar-company-switch svg {
  flex: 0 0 16px;
  width: 16px;
  height: 16px;
  color: #7b8496;
}
.workproof-theme .topbar-company-name {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.workproof-theme.sidebar-collapsed .sidebar-user-footer { padding: 10px 8px; }
.workproof-theme.sidebar-collapsed .sidebar-user-footer .account-trigger { justify-content: center; }
.workproof-theme.sidebar-collapsed .sidebar-user-footer .account-user-meta,
.workproof-theme.sidebar-collapsed .sidebar-user-footer .account-chevron { display: none; }
.workproof-theme.sidebar-collapsed .sidebar-user-footer .account-dropdown {
  position: fixed;
  left: 76px;
  bottom: 10px;
}
@media screen and (min-width: 761px) and (max-width: 1030px) {
  .workproof-theme:not(.sidebar-collapsed) .sidebar-user-footer { padding: 10px 8px; }
  .workproof-theme:not(.sidebar-collapsed) .sidebar-user-footer .account-trigger { justify-content: center; }
  .workproof-theme:not(.sidebar-collapsed) .sidebar-user-footer .account-user-meta,
  .workproof-theme:not(.sidebar-collapsed) .sidebar-user-footer .account-chevron { display: none; }
  .workproof-theme:not(.sidebar-collapsed) .sidebar-user-footer .account-dropdown {
    position: fixed;
    left: 76px;
    bottom: 10px;
  }
}
@media screen and (max-width: 760px) {
  .workproof-theme .sidebar { z-index: 101; }
  .workproof-theme .topbar-company-switch { max-width: min(46vw, 210px); }
  .workproof-theme .sidebar-user-footer .account-dropdown { max-width: calc(100vw - 56px); }
}


/* WorkProof brand as home-menu trigger: replaces the standalone app grid. */
.workproof-theme .sidebar-brand { position: relative; z-index: 12; }
.workproof-theme .brand-home-trigger {
  position: relative;
  display: flex;
  align-items: center;
  flex: 1 1 auto;
  min-width: 0;
  min-height: 42px;
  gap: 8px;
  margin: 0;
  padding: 4px 7px;
  border: 0;
  border-radius: 9px;
  text-align: left;
  background: transparent;
  cursor: pointer;
}
.workproof-theme .brand-home-trigger:hover,
.workproof-theme .brand-home-trigger:focus-visible {
  background: #eef0ff;
}
.workproof-theme .brand-home-trigger:focus-visible {
  outline: 2px solid #a5b4fc;
  outline-offset: 1px;
}
.workproof-theme .home-menu-tooltip {
  position: absolute;
  left: 8px;
  top: calc(100% + 6px);
  display: block;
  width: max-content;
  padding: 4px 8px;
  border: 1px solid #dde0e8;
  border-radius: 5px;
  background: #fff;
  box-shadow: 0 3px 10px rgba(15,23,42,.14);
  color: #344054;
  font-size: 11px;
  font-weight: 500;
  line-height: 1.4;
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  z-index: 20;
}
.workproof-theme .brand-home-trigger:hover .home-menu-tooltip,
.workproof-theme .brand-home-trigger:focus-visible .home-menu-tooltip {
  opacity: 1;
  visibility: visible;
}
/* In the icon rail the logo remains the Home menu, rather than vanishing. */
.workproof-theme.sidebar-collapsed .brand-home-trigger {
  display: flex;
  flex: 0 0 44px;
  justify-content: center;
  width: 44px;
  padding: 4px;
}
.workproof-theme.sidebar-collapsed .brand-home-trigger .brand-copy { display: none; }
.workproof-theme.sidebar-collapsed .home-menu-tooltip {
  position: fixed;
  left: 72px;
  top: 68px;
}
@media screen and (min-width: 761px) and (max-width: 1030px) {
  .workproof-theme:not(.sidebar-collapsed) .brand-home-trigger {
    display: flex;
    flex: 0 0 44px;
    justify-content: center;
    width: 44px;
    padding: 4px;
  }
  .workproof-theme:not(.sidebar-collapsed) .brand-home-trigger .brand-copy { display: none; }
  .workproof-theme:not(.sidebar-collapsed) .home-menu-tooltip {
    position: fixed;
    left: 72px;
    top: 68px;
  }
}
@media screen and (max-width: 760px) {
  .workproof-theme.sidebar-collapsed .brand-home-trigger {
    flex: 1 1 auto;
    justify-content: flex-start;
    width: auto;
    padding: 4px 7px;
  }
  .workproof-theme.sidebar-collapsed .brand-home-trigger .brand-copy { display: grid; }
  .workproof-theme.sidebar-collapsed .home-menu-tooltip {
    position: absolute;
    left: 8px;
    top: calc(100% + 6px);
  }
}


.workproof-theme .record-view { display: grid; gap: 16px; min-width: 0; }
.workproof-theme .wp-record-table { width: 100%; }
.workproof-theme .wp-record-table th, .workproof-theme .wp-record-table td { vertical-align: middle; }
.workproof-theme .wp-record-table .code-small { display: block; margin-top: 3px; }
.workproof-theme .wp-row-open {
  border: none; padding: 0; background: transparent;
  color: #344054; cursor: pointer; text-align: left;
}
.workproof-theme .wp-row-open:hover { color: #4f46e5; text-decoration: underline; }

/* App-dock launcher (template calcobase_launcher_08_app_dock): dark gradient
   home, a clock and date line, a four-column icon grid and a floating dock.
   Visual only: tiles, entitlements and routes are unchanged. Fonts stay
   local because the site CSP allows no external stylesheets. */
.app-launcher {
  position: relative;
  overflow-x: hidden;
  color: #fff;
  background: linear-gradient(160deg, #1b2a6b 0%, #3c2a7a 45%, #7a2d5c 100%);
}
.app-launcher::before {
  content: "";
  position: fixed;
  inset: 0;
  background:
    radial-gradient(circle at 25% 20%, rgba(255,255,255,.18), transparent 35%),
    radial-gradient(circle at 80% 70%, rgba(232,173,86,.25), transparent 40%);
  pointer-events: none;
}
.app-launcher-header {
  position: relative;
  padding: 18px clamp(20px, 4vw, 36px);
  border-bottom: 0;
  background: transparent;
}
.app-launcher-brand { gap: 8px; }
.app-launcher-brand img { width: 30px; height: 30px; }
.app-launcher-brand strong { color: #fff; font-size: 19px; font-weight: 700; letter-spacing: -.02em; }
.app-launcher-brand > span {
  margin-left: 4px;
  padding-left: 12px;
  border-left-color: rgba(255,255,255,.35);
  color: rgba(255,255,255,.85);
  font-size: 13px;
  font-weight: 600;
}
.app-launcher .account-trigger { color: #fff; font-size: 14px; font-weight: 600; }
.app-launcher .account-trigger:hover, .app-launcher .account-menu[open] .account-trigger {
  background: rgba(255,255,255,.14);
  border-color: rgba(255,255,255,.22);
}
.app-launcher .account-trigger:focus-visible { outline-color: #fff; }
.app-launcher .account-avatar {
  width: 28px;
  height: 28px;
  background: #e8ad56;
  color: #1a1206;
  font-size: 10px;
}
.app-launcher .account-chevron { color: rgba(255,255,255,.7); }
.app-launcher-main {
  position: relative;
  display: block;
  width: min(760px, calc(100% - 48px));
  min-height: 0;
  margin: 30px auto 0;
  padding: 0 0 160px;
}
.app-launcher-clock { margin: 12px 0 44px; text-align: center; }
.app-launcher-clock b {
  display: block;
  font-size: 64px;
  font-weight: 300;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.03em;
  line-height: 1;
}
.app-launcher-clock span { display: block; margin-top: 8px; color: rgba(255,255,255,.75); font-size: 15px; }
.app-launcher-grid {
  width: 100%;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  justify-items: center;
  align-items: start;
  margin: 0;
  gap: 30px 18px;
}
.app-launcher-grid .app-tile {
  gap: 10px;
  min-height: 0;
  padding: 0;
  color: #fff;
  text-shadow: 0 1px 4px rgba(0,0,0,.3);
  transition: transform .2s;
}
.app-launcher-grid .app-tile:hover { transform: scale(1.06); }
.app-launcher-grid .app-tile:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
.app-launcher-grid .app-tile strong {
  max-width: none;
  color: #fff;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.3;
}
.app-launcher-grid .app-tile-icon, .app-dock .app-tile-icon {
  width: 76px;
  height: 76px;
  margin: 0;
  border-radius: 22px;
  color: #fff;
  background: var(--c);
  background: linear-gradient(160deg, color-mix(in srgb, var(--c), #fff 22%), color-mix(in srgb, var(--c), #000 18%));
  box-shadow: 0 14px 28px -12px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.4);
  transition: none;
}
.app-launcher-grid .app-tile:hover .app-tile-icon {
  transform: none;
  box-shadow: 0 14px 28px -12px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.4);
}
.app-launcher-grid .app-tile-icon svg, .app-dock .app-tile-icon svg { width: 32px; height: 32px; stroke-width: 1.9; }
.app-launcher .tone-slate { --c: #5b6b8c; }
.app-launcher .tone-amber { --c: #f08a3e; }
.app-launcher .tone-indigo { --c: #6c5ce7; }
.app-launcher .tone-blue { --c: #3d8fe0; }
.app-launcher .tone-rose { --c: #ec5f80; }
.app-launcher .tone-cyan { --c: #22a9c7; }
.app-launcher .tone-purple { --c: #9b5de5; }
.app-launcher .tone-gray { --c: #7d8595; }
.app-launcher .tone-teal { --c: #2bb5a0; }
.app-launcher .tone-violet { --c: #8f6ad8; }
.app-launcher .tone-green { --c: #3fb06f; }
.app-launcher .tone-orange { --c: #f0953e; }
.app-launcher .tone-pink { --c: #d96bb0; }
.app-launcher-empty { grid-column: 1 / -1; color: rgba(255,255,255,.82); text-align: center; }
.app-dock {
  position: fixed;
  left: 50%;
  bottom: 22px;
  z-index: 40;
  display: flex;
  gap: 18px;
  padding: 14px 18px;
  border: 1px solid rgba(255,255,255,.25);
  border-radius: 30px;
  background: rgba(255,255,255,.18);
  -webkit-backdrop-filter: blur(22px);
  backdrop-filter: blur(22px);
  transform: translateX(-50%);
}
.app-dock-item {
  display: block;
  padding: 0;
  border: 0;
  border-radius: 18px;
  background: transparent;
  transition: transform .2s;
}
.app-dock-item:hover { transform: scale(1.06); }
.app-dock-item:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
.app-dock .app-tile-icon { width: 62px; height: 62px; border-radius: 18px; }
.app-dock .app-tile-icon svg { width: 26px; height: 26px; }
@media (max-width: 620px) {
  .app-launcher-header { flex-wrap: nowrap; padding: 14px 20px; }
  .app-launcher-brand strong { font-size: 18px; }
  .app-launcher-brand > span { font-size: 12px; white-space: nowrap; }
  .app-launcher .account-avatar { width: 28px; height: 28px; }
  /* Phones: the avatar alone opens the account menu (its label and the
     dropdown still name the person), so the header stays on one line. */
  .app-launcher .account-trigger .account-name { display: none; }
  .app-launcher-main { width: calc(100% - 40px); min-height: 0; margin-top: 16px; padding: 0 0 140px; }
  .app-launcher-clock { margin-bottom: 32px; }
  .app-launcher-clock b { font-size: 52px; }
  .app-launcher-clock span { font-size: 14px; }
  .app-launcher-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px 10px; }
  .app-launcher-grid .app-tile { min-height: 0; padding: 0; }
  .app-launcher-grid .app-tile strong { font-size: 12px; }
  .app-launcher-grid .app-tile-icon { width: 64px; height: 64px; margin: 0; border-radius: 19px; }
  .app-launcher-grid .app-tile-icon svg { width: 28px; height: 28px; }
  .app-dock { bottom: 16px; gap: 12px; padding: 10px 14px; border-radius: 24px; }
  .app-dock .app-tile-icon { width: 54px; height: 54px; border-radius: 16px; }
  .app-dock .app-tile-icon svg { width: 24px; height: 24px; }
}
@media (max-width: 410px) {
  .app-launcher-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px 6px; }
  .app-launcher-grid .app-tile-icon { width: 58px; height: 58px; }
}
@media (prefers-reduced-motion: reduce) {
  .app-launcher-grid .app-tile, .app-dock-item { transition: none; }
  .app-launcher-grid .app-tile:hover, .app-dock-item:hover { transform: none; }
}


/* ==========================================================================
   Sign-in — "Stronger Together" (approved Calcobase visual master, shared with
   the Qaisbee Core sign-in). External CSS/JS only: this site's CSP forbids
   inline style and script. Fonts are self-hosted (OFL) — no third-party
   requests. The authentication flow underneath is this app's own operator
   session (POST /v1/session) and is unchanged.
   ========================================================================== */
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 100 900; font-display: swap; src: url('./assets/fonts/InterVariable.693b77d4f32ee9b8.woff2') format('woff2'); }
@font-face { font-family: 'Fraunces'; font-style: normal; font-weight: 500; font-display: swap; src: url('./assets/fonts/Fraunces-500.7975c1ef7caf89d0.woff2') format('woff2'); }
@font-face { font-family: 'Fraunces'; font-style: normal; font-weight: 600; font-display: swap; src: url('./assets/fonts/Fraunces-600.3a1de7711d147bad.woff2') format('woff2'); }

.signin-shell { --deep:#05061a; --gold:#e8ad56; --accent:#f8ca84; display:grid; grid-template-columns:minmax(0,65fr) minmax(360px,35fr); min-height:100vh; position:relative; isolation:isolate; overflow:hidden; color:#fff; font-family:'Inter',ui-sans-serif,system-ui,sans-serif; -webkit-font-smoothing:antialiased;
  background:radial-gradient(ellipse at 30% 40%,#0c1c4a 0%,#070b2a 45%,#05061a 80%); }
.signin-shell .glow { position:absolute; inset:0; z-index:-3; pointer-events:none; overflow:hidden; }
.signin-shell .glow i { position:absolute; border-radius:50%; filter:blur(70px); opacity:.75; animation:signin-drift 26s ease-in-out infinite alternate; will-change:transform; }
.signin-shell .glow .b1 { left:18%; top:30%; width:46vw; height:46vw; background:radial-gradient(circle,rgba(40,100,230,.55),rgba(40,100,230,0) 65%); }
.signin-shell .glow .b2 { left:46%; top:5%; width:38vw; height:38vw; background:radial-gradient(circle,rgba(130,60,230,.6),rgba(120,60,220,0) 65%); animation-delay:-9s; }
.signin-shell .glow .b3 { left:62%; top:45%; width:40vw; height:40vw; background:radial-gradient(circle,rgba(230,60,170,.58),rgba(220,60,160,0) 65%); animation-delay:-17s; }
.signin-shell .glow .b4 { left:-10%; top:60%; width:34vw; height:34vw; background:radial-gradient(circle,rgba(60,40,140,.45),rgba(60,40,140,0) 65%); animation-delay:-4s; }
@keyframes signin-drift { to { transform:translate(4vw,-3vw) scale(1.08); } }
.signin-shell canvas.plexus { position:absolute; inset:0; z-index:-2; width:100%; height:100%; display:block; pointer-events:none; }
.signin-shell .plexus-static { position:absolute; inset:0; z-index:-2; display:none; pointer-events:none; background-repeat:no-repeat; background-size:cover; background-position:60% 40%; opacity:.9;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 800' preserveAspectRatio='xMidYMid slice'%3E%3Cg stroke-width='1' fill='none'%3E%3Cpath d='M520 120L640 210L560 330L700 300L820 380L640 210M560 330L420 430L560 520L700 300M700 300L860 190L820 380M420 430L300 360L220 470L420 430M560 520L700 640L820 560L820 380M700 640L560 740M300 360L380 240L520 120M860 190L980 250L940 420L820 380M940 420L1060 520' stroke='%238a5cff' stroke-opacity='.35'/%3E%3Cpath d='M380 240L640 210L560 330Z' fill='%238a5cff' fill-opacity='.05'/%3E%3Cpath d='M700 300L820 380L560 330Z' fill='%234f8dff' fill-opacity='.05'/%3E%3Cpath d='M820 380L940 420L820 560Z' fill='%23ff6fd3' fill-opacity='.05'/%3E%3C/g%3E%3Cg fill='%23ffffff'%3E%3Ccircle cx='640' cy='210' r='3.2'/%3E%3Ccircle cx='820' cy='380' r='3.4'/%3E%3Ccircle cx='560' cy='520' r='2.8'/%3E%3Ccircle cx='300' cy='360' r='2.6'/%3E%3C/g%3E%3Cg fill='%23c9d4ff' fill-opacity='.85'%3E%3Ccircle cx='520' cy='120' r='1.6'/%3E%3Ccircle cx='560' cy='330' r='1.8'/%3E%3Ccircle cx='700' cy='300' r='2'/%3E%3Ccircle cx='420' cy='430' r='1.7'/%3E%3Ccircle cx='860' cy='190' r='1.6'/%3E%3Ccircle cx='220' cy='470' r='1.5'/%3E%3Ccircle cx='700' cy='640' r='1.8'/%3E%3Ccircle cx='820' cy='560' r='1.6'/%3E%3Ccircle cx='380' cy='240' r='1.5'/%3E%3Ccircle cx='980' cy='250' r='1.5'/%3E%3Ccircle cx='940' cy='420' r='1.7'/%3E%3C/g%3E%3Cg fill='%238a5cff' fill-opacity='.25'%3E%3Ccircle cx='640' cy='210' r='14'/%3E%3Ccircle cx='820' cy='380' r='16'/%3E%3Ccircle cx='300' cy='360' r='12'/%3E%3C/g%3E%3C/svg%3E"); }
.signin-shell.plexus-unavailable canvas.plexus { display:none; }
.signin-shell.plexus-unavailable .plexus-static { display:block; }
.signin-shell::before { content:""; position:absolute; inset:0; z-index:-1; pointer-events:none; background:linear-gradient(90deg,rgba(5,6,26,.6),transparent 40%),linear-gradient(0deg,rgba(5,6,26,.55),transparent 35%); }
.signin-shell::after { content:""; position:absolute; inset:0; z-index:-1; pointer-events:none; background:radial-gradient(130% 120% at 42% 44%,transparent 60%,rgba(3,4,16,.5) 100%); }

.signin-shell .brand-panel { position:relative; min-height:800px; padding:clamp(35px,4vw,62px); display:flex; flex-direction:column; justify-content:space-between; background:none; }
.signin-shell .brand-panel img { height:auto; width:clamp(225px,19vw,310px); position:relative; z-index:5; object-fit:contain; object-position:left center; }
.signin-shell .hero-copy { max-width:470px; position:relative; z-index:5; margin-top:18vh; margin-bottom:auto; padding-top:70px; }
.signin-shell .kicker { margin:0; font-size:.77rem; letter-spacing:.18em; text-transform:uppercase; white-space:nowrap; font-weight:700; display:flex; align-items:center; gap:10px; color:#f5d5a3; }
.signin-shell .kicker::before { content:""; height:1px; width:28px; background:var(--gold); }
.signin-shell .kicker strong { color:var(--gold); font-weight:700; letter-spacing:.08em; }
.signin-shell .brand-panel h1 { font-family:Fraunces,Georgia,serif; max-width:none; font-size:clamp(50px,5.5vw,87px); line-height:1.01; letter-spacing:-.032em; margin:22px 0 20px; font-weight:600; text-wrap:balance; text-shadow:0 2px 40px rgba(5,8,30,.45); }
.signin-shell .brand-panel h1 span { color:#f0be77; }
.signin-shell .brand-panel p.sub { font-size:clamp(15px,1.3vw,18px); line-height:1.72; max-width:360px; color:rgba(241,245,255,.73); margin:0; }
.signin-shell .story-bottom { position:relative; z-index:5; color:rgba(242,245,255,.55); font-size:.78rem; letter-spacing:.08em; display:flex; align-items:center; gap:15px; margin-top:55px; }
.signin-shell .story-bottom::before { content:""; width:26px; height:1px; background:var(--gold); }

.signin-shell .auth-side { position:relative; display:grid; place-items:center; padding:clamp(25px,4.5vw,72px); background:linear-gradient(180deg,rgba(6,8,30,.5),rgba(6,8,30,.62)); backdrop-filter:blur(7px) saturate(1.2); -webkit-backdrop-filter:blur(7px) saturate(1.2); border-left:1px solid rgba(255,255,255,.08); box-shadow:inset 1px 0 0 rgba(255,255,255,.04); }
.signin-shell .signin-card { width:min(100%,380px); position:relative; z-index:1; margin:0; padding:0; border:0; border-radius:0; background:none; box-shadow:none; align-self:auto; }
.signin-shell .card-label { text-transform:uppercase; font-size:11px; font-weight:700; letter-spacing:.2em; color:var(--gold); margin:0 0 13px; }
.signin-shell .signin-card h2 { font-family:'Inter',ui-sans-serif,system-ui,sans-serif; font-size:clamp(30px,2.1vw,36px); line-height:1.16; letter-spacing:-.035em; font-weight:600; margin:0; }
.signin-shell .signin-card .hint { margin:10px 0 33px; color:rgba(241,245,255,.68); font-size:14px; line-height:1.5; }
.signin-shell .signin-card form { display:block; margin-top:0; }
.signin-shell .field { margin-bottom:18px; }
.signin-shell .signin-card label { display:block; font-size:12px; font-weight:700; margin-bottom:8px; color:rgba(241,245,255,.9); }
.signin-shell .signin-card input { width:100%; height:47px; min-height:47px; margin-top:8px; border:1px solid rgba(255,255,255,.14); border-radius:10px; background:rgba(255,255,255,.08); font:inherit; font-weight:400; padding:0 15px; color:#fff; outline:none; transition:border-color .2s,background .2s,box-shadow .2s; }
.signin-shell .signin-card input::placeholder { color:rgba(241,245,255,.45); }
.signin-shell .signin-card input:focus { background:rgba(255,255,255,.12); border-color:rgba(248,202,132,.7); box-shadow:0 0 0 3px rgba(232,173,86,.18); }
.signin-shell .signin-card input:disabled { opacity:.6; }
.signin-shell .signin-card input:-webkit-autofill { -webkit-text-fill-color:#fff; -webkit-box-shadow:0 0 0 1000px #141a3e inset; caret-color:#fff; }
.signin-shell .password-wrap { position:relative; }
.signin-shell .password-wrap input { padding-right:68px; }
.signin-shell .show { position:absolute; right:8px; bottom:0; height:47px; border:0; background:transparent; color:rgba(241,245,255,.7); font-size:11px; font-weight:700; cursor:pointer; padding:0 10px; letter-spacing:.06em; border-radius:6px; transition:color .18s; font-family:inherit; min-height:0; }
.signin-shell .show:hover { color:#fff; }
.signin-shell .show:focus-visible { outline:none; color:#fff; box-shadow:0 0 0 3px rgba(232,173,86,.3); }
.signin-shell .signin-card .alert { margin:0 0 16px; padding:10px 12px; border:1px solid rgba(255,179,199,.35); border-radius:10px; background:rgba(255,120,150,.1); color:#ffb3c7; font-size:13px; line-height:1.5; }
.signin-shell .submit { height:48px; min-height:48px; border:0; border-radius:10px; width:100%; margin-top:7px; background:linear-gradient(180deg,#f3c27a,#d9953f); color:#1a1206; font:inherit; font-weight:700; font-size:14px; cursor:pointer; box-shadow:0 14px 26px -12px rgba(232,173,86,.6); transition:filter .18s,transform .12s,box-shadow .18s; letter-spacing:.01em; }
.signin-shell .submit:hover { filter:brightness(1.06); background:linear-gradient(180deg,#f3c27a,#d9953f); box-shadow:0 18px 30px -12px rgba(232,173,86,.7); }
.signin-shell .submit:active { transform:translateY(1px); }
.signin-shell .submit:focus-visible { outline:none; box-shadow:0 0 0 3px rgba(5,6,26,.6),0 0 0 6px rgba(248,202,132,.7); }
.signin-shell .submit:disabled { opacity:.6; cursor:not-allowed; filter:none; transform:none; }
.signin-shell .privacy { margin:24px 0 0; text-align:center; font-size:12px; color:rgba(241,245,255,.6); }
.signin-shell .privacy a { color:#f5d5a3; font-weight:700; text-decoration:none; }
.signin-shell .privacy a:hover { color:var(--accent); text-decoration:underline; text-underline-offset:3px; }
.signin-shell .privacy a:focus-visible { outline:3px solid rgba(248,202,132,.7); outline-offset:2px; border-radius:4px; }
.signin-shell /* "Keep me signed in on this browser": a trusted-browser choice on the sign-in card. */
.signin-card .remember-row { display: flex; align-items: center; gap: 10px; margin: 2px 0 14px; color: var(--muted); font-size: 13px; font-weight: 500; cursor: pointer; }
.signin-card .remember-row input { width: 16px; height: 16px; margin: 0; accent-color: var(--indigo); cursor: pointer; }
.signin-card .remember-row input:disabled { cursor: not-allowed; }
.forgot-row { margin:16px 0 0; text-align:center; }
.signin-shell .forgot { min-height:44px; padding:0 12px; border:0; border-radius:8px; background:transparent; color:#f5d5a3; font:inherit; font-size:13px; font-weight:700; cursor:pointer; transition:color .18s; }
.signin-shell .forgot:hover { color:var(--accent); text-decoration:underline; text-underline-offset:3px; }
.signin-shell .forgot:focus-visible { outline:3px solid rgba(248,202,132,.7); outline-offset:2px; }
.signin-shell .forgot:disabled { opacity:.6; cursor:progress; text-decoration:none; }
.signin-shell .recovery { margin:12px 0 0; padding:14px 16px; border:1px solid rgba(248,202,132,.28); border-radius:10px; background:rgba(255,255,255,.06); color:rgba(241,245,255,.82); font-size:13px; line-height:1.55; overflow-wrap:anywhere; }
.signin-shell .recovery p { margin:0 0 8px; }
.signin-shell .recovery p:last-child { margin-bottom:0; }
.signin-shell .recovery-title { color:#fff; font-weight:700; font-size:14px; }
.signin-shell .recovery-title:focus { outline:none; }
.signin-shell .recovery-note { color:rgba(241,245,255,.62); font-size:12px; }
.signin-shell .recovery-link { display:inline-flex; align-items:center; min-height:44px; color:#f5d5a3; font-weight:700; text-decoration:underline; text-underline-offset:3px; }
.signin-shell .recovery-link:hover { color:var(--accent); }
.signin-shell .recovery-link:focus-visible { outline:3px solid rgba(248,202,132,.7); outline-offset:2px; border-radius:4px; }

@media (max-width:1200px) { .signin-shell .hero-copy { max-width:410px; } .signin-shell .kicker { letter-spacing:.11em; } }
/* Phones and narrow tablets: one column. The brand panel keeps the approved
   logo, kicker, headline, lead and tagline, set compactly so the sign-in card
   starts within the first screen (card top ≈ 380px at 390×844) instead of
   below it. Desktop (> 900px) keeps the approved layout untouched. */
@media (max-width:900px) {
  .signin-shell { grid-template-columns:1fr; grid-template-rows:auto 1fr; }
  .signin-shell .brand-panel { min-height:auto; padding:26px 24px 22px; justify-content:flex-start; }
  .signin-shell .brand-panel img { width:180px; }
  .signin-shell .hero-copy { margin-top:26px; margin-bottom:0; padding:0; max-width:385px; }
  .signin-shell .brand-panel h1 { font-size:clamp(36px,9.5vw,48px); margin:14px 0 12px; }
  .signin-shell .brand-panel p.sub { font-size:14px; line-height:1.55; max-width:330px; }
  .signin-shell .kicker { white-space:normal; flex-wrap:wrap; }
  .signin-shell .story-bottom { margin-top:20px; }
  .signin-shell .auth-side { padding:24px 20px 44px; align-items:start; border-left:0; border-top:1px solid rgba(255,255,255,.08); }
  .signin-shell .signin-card { max-width:420px; }
  .signin-shell .signin-card .hint { margin-bottom:22px; }
  .signin-shell .glow .b1 { width:90vw; height:90vw; } .signin-shell .glow .b2, .signin-shell .glow .b3, .signin-shell .glow .b4 { width:70vw; height:70vw; }
}
@media (max-width:570px) { .signin-shell .brand-panel { padding:22px 20px 20px; } .signin-shell .brand-panel img { width:164px; } .signin-shell .hero-copy { margin-top:22px; } .signin-shell .brand-panel h1 { font-size:clamp(34px,9.5vw,44px); } .signin-shell .kicker { font-size:10px; letter-spacing:.08em; } .signin-shell .brand-panel p.sub { max-width:300px; } .signin-shell .story-bottom { font-size:10px; margin-top:18px; } .signin-shell .auth-side { padding:22px 18px 40px; } }
/* Short landscape phones: keep the card reachable without a tall brand panel. */
@media (max-width:900px) and (max-height:500px) { .signin-shell .brand-panel { padding:18px 20px 16px; } .signin-shell .hero-copy { margin-top:14px; } .signin-shell .brand-panel h1 { font-size:30px; margin:10px 0 8px; } .signin-shell .brand-panel p.sub, .signin-shell .story-bottom { display:none; } .signin-shell .auth-side { padding:18px 20px 32px; } }
@media (prefers-reduced-motion:reduce) { .signin-shell .glow i { animation:none; } .signin-shell .submit, .signin-shell .signin-card input { transition:none; } }

/* Header quick search (Workproof pattern): shown only on pages that filter on it. */
.topbar-search {
  display: none; align-items: center; gap: 8px;
  height: 34px; width: 246px; padding: 0 12px 0 10px;
  border: 1px solid var(--line); border-radius: 6px;
  background: var(--soft); color: var(--muted);
  transition: width .15s ease, background-color .15s ease, border-color .15s ease, box-shadow .15s ease;
}
@media (min-width: 640px) { .topbar-search { display: flex; } }
.topbar-search svg { flex: none; width: 15px; height: 15px; color: #98a2b3; }
.topbar-search:focus-within {
  width: 288px; background: var(--panel); border-color: #6366f1;
  box-shadow: 0 0 0 3px rgba(99, 102, 241, .13);
}
#topbar-search-input {
  width: 100%; min-width: 0; height: 100%; margin: 0; padding: 0;
  border: 0; border-radius: 0; outline: none; box-shadow: none;
  background: transparent; color: var(--ink); font-size: 12.7px;
  -webkit-appearance: none; appearance: none;
}
#topbar-search-input::placeholder { color: var(--muted); }
#topbar-search-input::-webkit-search-cancel-button { cursor: pointer; }

/* Page not found */
.not-found-card { text-align: center; }
.not-found-card img { width: 44px; height: 44px; margin: 0 auto 12px; }
.not-found-card .eyebrow { margin: 0; color: var(--muted); font-weight: 700; letter-spacing: .12em; }
.not-found-card h1 { margin: 6px 0 10px; }
.not-found-card p { color: var(--muted); overflow-wrap: anywhere; }
.not-found-home { display: inline-block; margin-top: 12px; padding: 10px 18px; border-radius: 10px; color: #fff; background: #4f46e5; text-decoration: none; font-weight: 650; }
.not-found-home:hover { background: #4338ca; }
.not-found-home:focus-visible { outline: 3px solid #a5b4fc; outline-offset: 2px; }

/* ==========================================================================
   Workproof parity: controls and the record form view.
   Sizes and colours copied from the Workproof web app (components/ui and
   globals.css): controls 34px buttons / 38px fields, radius 9px, sunken field
   background, indigo focus ring, uppercase field labels, 16px cards.
   ========================================================================== */
.workproof-theme {
  --wp-sunken: #f7f8fa;
  --wp-border: #e9ebf0;
  --wp-line-soft: #f1f2f6;
  --wp-ink-2: #344054;
  --wp-muted-2: #98a2b3;
  --wp-brand: #4f46e5;
  --wp-brand-2: #6366f1;
  --wp-ring: 0 0 0 3px rgba(99, 102, 241, .13);
}

/* Buttons: Workproof's 34px, 12.5px semibold. The till's Complete sale stays large for touch. */
.workproof-theme .primary,
.workproof-theme .secondary,
.workproof-theme .danger-btn {
  min-height: 34px; padding: 0 13px; border-radius: 9px;
  font-size: 12.5px; font-weight: 600; white-space: nowrap;
  transition: background-color .15s, border-color .15s, box-shadow .15s, transform .05s;
}
.workproof-theme .small-btn { min-height: 29px; padding: 0 10px; font-size: 11.5px; }
.workproof-theme .primary { border: 1px solid var(--wp-brand); background: var(--wp-brand); box-shadow: 0 3px 9px rgba(79, 70, 229, .26); }
.workproof-theme .primary:hover { border-color: var(--wp-brand-2); background: var(--wp-brand-2); }
.workproof-theme .secondary { border: 1px solid var(--wp-border); color: var(--wp-ink-2); background: #fff; }
.workproof-theme .secondary:hover { background: var(--wp-sunken); border-color: var(--wp-border); }
.workproof-theme .primary:active:not(:disabled), .workproof-theme .secondary:active:not(:disabled) { transform: translateY(1px); }
.workproof-theme .primary:focus-visible, .workproof-theme .secondary:focus-visible,
.workproof-theme .danger-btn:focus-visible { outline: none; border-color: var(--wp-brand-2); box-shadow: 0 0 0 3px rgba(99, 102, 241, .35); }
.workproof-theme .danger-btn { border: 1px solid #fecdca; color: var(--danger); background: #fff; }
.workproof-theme #pos-complete { min-height: 48px; font-size: 14px; }
.workproof-theme .quick-actions .small-btn { min-height: 38px; font-size: 12.5px; }

/* Fields: 38px, sunken until focused, then white with the indigo ring. */
.workproof-theme input:not([type=checkbox]):not([type=radio]):not([type=file]),
.workproof-theme select,
.workproof-theme textarea {
  min-height: 38px; padding: 0 11px;
  border: 1px solid var(--wp-border); border-radius: 9px;
  color: #0f172a; background-color: var(--wp-sunken);
  font-size: 13.5px; font-weight: 400; letter-spacing: normal; text-transform: none;
  box-shadow: none; transition: background-color .15s, border-color .15s, box-shadow .15s;
}
.workproof-theme textarea { padding: 9px 11px; }
.workproof-theme input::placeholder, .workproof-theme textarea::placeholder { color: #7b8496; }
.workproof-theme input:not([type=checkbox]):not([type=radio]):focus,
.workproof-theme select:focus,
.workproof-theme textarea:focus {
  outline: none; border-color: var(--wp-brand-2); background-color: #fff; box-shadow: var(--wp-ring);
}
.workproof-theme input:disabled, .workproof-theme select:disabled, .workproof-theme textarea:disabled { opacity: .55; cursor: not-allowed; }
.workproof-theme #topbar-search-input { min-height: 0; padding: 0; border: 0; background: transparent; box-shadow: none; }

/* Field labels: Workproof's small uppercase caption above the control. */
.workproof-theme .team-form label:not(.check),
.workproof-theme .report-controls label,
.workproof-theme .settings-form label:not(.check),
.workproof-theme .pos-pay label,
.workproof-theme .discount-editor label,
.workproof-theme .pos-customer label,
.workproof-theme .pos-location-pick {
  gap: 6px; color: var(--wp-muted-2);
  font-size: 10.5px; font-weight: 650; letter-spacing: .07em; text-transform: uppercase;
}
.workproof-theme .team-form { gap: 16px; padding: 16px 18px 18px; }
.workproof-theme .panel-head h2 { font-weight: 640; }

/* ---- Record form view ---------------------------------------------------- */
.workproof-theme .wp-form { display: grid; gap: 16px; min-width: 0; }
.workproof-theme .wp-form-head { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.workproof-theme .wp-crumbs { display: flex; align-items: center; gap: 7px; min-width: 0; font-size: 12.5px; }
.workproof-theme .wp-crumb { padding: 0; border: 0; background: none; color: #7b8496; font: inherit; font-weight: 500; cursor: pointer; }
.workproof-theme .wp-crumb:hover { color: #0f172a; }
.workproof-theme .wp-crumb:focus-visible { outline: 3px solid #a5b4fc; outline-offset: 2px; border-radius: 4px; }
.workproof-theme .wp-crumb-sep { color: #7b8496; }
.workproof-theme .wp-crumb-current { overflow: hidden; color: #0f172a; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.workproof-theme .wp-form-spacer { flex: 1; }
.workproof-theme .wp-pager { display: flex; align-items: center; gap: 2px; color: #7b8496; font-size: 13px; font-variant-numeric: tabular-nums; }
.workproof-theme .wp-pager span { margin-right: 4px; }
.workproof-theme .wp-icon-btn {
  display: grid; place-items: center; width: 28px; height: 28px; padding: 0;
  border: 0; border-radius: 8px; color: #344054; background: transparent; font-size: 17px; line-height: 1; cursor: pointer;
}
.workproof-theme .wp-icon-btn:hover:not(:disabled) { background: var(--wp-sunken); }
.workproof-theme .wp-icon-btn:disabled { opacity: .4; cursor: default; }

.workproof-theme .wp-stage-flow { display: flex; justify-content: flex-end; overflow-x: auto; padding-bottom: 1px; }
.workproof-theme .wp-stage {
  display: flex; align-items: center; justify-content: center; height: 34px; padding: 0 20px;
  border: 0; color: #7b8496; background: var(--wp-sunken); font: inherit; font-size: 12.5px; font-weight: 600; white-space: nowrap; cursor: pointer;
  transition: background-color .15s, color .15s;
}
.workproof-theme .wp-stage.first { border-radius: 9px 0 0 9px; clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 50%, calc(100% - 12px) 100%, 0 100%); }
.workproof-theme .wp-stage.last { margin-left: -6px; border-radius: 0 9px 9px 0; clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 12px 50%); }
.workproof-theme .wp-stage:hover:not(:disabled):not(.current) { color: #0f172a; background: #eceef3; }
.workproof-theme .wp-stage.current { color: #fff; background: var(--wp-brand); }
.workproof-theme .wp-stage:disabled { cursor: default; }
.workproof-theme .wp-stage:focus-visible { outline: 3px solid #a5b4fc; outline-offset: 1px; }
.workproof-theme .wp-stage-hint { margin: -8px 0 0; text-align: right; }

.workproof-theme .wp-form-grid { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 16px; align-items: start; }
.workproof-theme .wp-form-main, .workproof-theme .wp-form-side { display: grid; gap: 16px; min-width: 0; }
@media (max-width: 1100px) { .workproof-theme .wp-form-grid { grid-template-columns: minmax(0, 1fr); } }

.workproof-theme .wp-card { overflow: hidden; border: 1px solid var(--wp-border); border-radius: 16px; background: #fff; box-shadow: var(--wp-shadow); }
.workproof-theme .wp-card-head { display: flex; align-items: center; gap: 10px; padding: 15px 18px; border-bottom: 1px solid var(--wp-line-soft); }
.workproof-theme .wp-card-head > div { flex: 1; min-width: 0; }
.workproof-theme .wp-card-head h3 { margin: 0; color: #0f172a; font-size: 14px; font-weight: 640; letter-spacing: -.2px; line-height: 1.35; }
.workproof-theme .wp-card-head p { margin: 2px 0 0; color: var(--wp-muted-2); font-size: 11.5px; }
.workproof-theme .wp-card-body { display: grid; gap: 16px; padding: 16px 18px; }
.workproof-theme .wp-card-body > .table-wrap { margin: -16px -18px; border: 0; border-radius: 0; }

.workproof-theme .wp-field, .workproof-theme .wp-prop { display: grid; gap: 6px; min-width: 0; }
.workproof-theme .wp-field label, .workproof-theme .wp-prop label, .workproof-theme .wp-prop-label {
  color: var(--wp-muted-2); font-size: 10.5px; font-weight: 650; letter-spacing: .07em; line-height: 1; text-transform: uppercase;
}
.workproof-theme .wp-field input, .workproof-theme .wp-prop input, .workproof-theme .wp-prop select { width: 100%; }
.workproof-theme .wp-title-input { min-height: 40px !important; font-size: 15px !important; font-weight: 600 !important; }
.workproof-theme .wp-title-text { color: #0f172a; font-size: 15px; font-weight: 600; }
.workproof-theme .wp-prop-value { color: #0f172a; font-size: 13px; }
.workproof-theme .wp-readonly { color: #344054; }
.workproof-theme .wp-hint { margin: 0; color: #7b8496; font-size: 12px; line-height: 1.5; }
.workproof-theme .wp-fields { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 14px 16px; }
.workproof-theme .wp-form-actions { display: flex; justify-content: flex-end; gap: 8px; }


@media (max-width: 760px) {
  .workproof-theme .wp-form-head { gap: 8px; }
  .workproof-theme .wp-form-spacer { flex-basis: 100%; height: 0; }
  .workproof-theme .wp-stage-flow { justify-content: flex-start; }
  .workproof-theme .wp-stage-hint { text-align: left; }
}

/* ---- Page header (Workproof PageHeader) ------------------------------------ */
.workproof-theme .page-head { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 16px; }
.workproof-theme .page-head-text { flex: 1; min-width: 0; }
.workproof-theme .page-head p { font-size: 13px; }
.workproof-theme .page-head-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.workproof-theme .primary svg, .workproof-theme .secondary svg { width: 15px; height: 15px; flex: none; }
.workproof-theme .wp-new-btn, .workproof-theme .wp-card-head .small-btn { display: inline-flex; align-items: center; gap: 6px; }
.workproof-theme .wp-card-head .small-btn svg { width: 13px; height: 13px; }

/* View switcher: segmented, sunken track, active option lifted. */
.workproof-theme .wp-view-switch { display: flex; gap: 2px; padding: 3px; border: 1px solid var(--wp-border); border-radius: 10px; background: var(--wp-sunken); }
.workproof-theme .wp-view-opt {
  display: flex; align-items: center; gap: 6px; padding: 5px 12px; border: 0; border-radius: 7px;
  color: #7b8496; background: transparent; font: inherit; font-size: 12px; font-weight: 600; cursor: pointer; transition: color .15s, background-color .15s;
}
.workproof-theme .wp-view-opt svg { width: 14px; height: 14px; }
.workproof-theme .wp-view-opt:hover { color: #0f172a; }
.workproof-theme .wp-view-opt.active { color: #0f172a; background: #fff; box-shadow: var(--wp-shadow); }
.workproof-theme .wp-view-opt:focus-visible { outline: 3px solid #a5b4fc; outline-offset: 1px; }

/* ---- Status pills (Workproof StatusPill: border, tone, leading dot) ---------- */
.workproof-theme .pill {
  display: inline-flex; align-items: center; gap: 5px; height: 22px; padding: 0 9px;
  border: 1px solid var(--wp-border); border-radius: 999px; color: #7b8496; background: var(--wp-sunken);
  font-size: 11px; font-weight: 600; line-height: 1; white-space: nowrap;
}
.workproof-theme .pill::before { content: ""; width: 6px; height: 6px; flex: none; border-radius: 50%; background: currentColor; }
.workproof-theme .pill.pill-sm { height: 19px; padding: 0 7px; font-size: 10px; }
.workproof-theme .pill.ok { color: #047857; background: #ecfdf5; border-color: #c7f0e0; }
.workproof-theme .pill.warn { color: #b45309; background: #fffbeb; border-color: #f7e4b5; }
.workproof-theme .pill.bad { color: #be123c; background: #fef2f2; border-color: #fbd5d8; }
.workproof-theme .pill.info { color: #1d4ed8; background: #eff6ff; border-color: #cfe0fd; }
.workproof-theme .pill.off { color: #7b8496; background: var(--wp-sunken); border-color: var(--wp-border); }
.workproof-theme .wp-chip {
  display: inline-flex; align-items: center; height: 19px; padding: 0 7px; overflow: hidden;
  border: 1px solid var(--wp-border); border-radius: 999px; color: #7b8496; background: var(--wp-sunken);
  font-size: 10px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; max-width: 150px;
}

/* ---- Tables (Workproof Table) ---------------------------------------------- */
.workproof-theme th { padding: 11px 18px; color: var(--wp-muted-2); background: var(--wp-sunken); border-bottom-color: var(--wp-border); }
.workproof-theme td { padding: 12px 18px; border-bottom-color: var(--wp-line-soft); }
.workproof-theme tbody tr:last-child td { border-bottom: 0; }
.workproof-theme .wp-table-card, .workproof-theme .wp-empty-card { overflow: hidden; border: 1px solid var(--wp-border); border-radius: 16px; background: #fff; box-shadow: var(--wp-shadow); }
.workproof-theme .wp-row-open { border: 0; padding: 0; background: transparent; color: #0f172a; font: inherit; text-align: left; cursor: pointer; }
.workproof-theme .wp-row-open:hover { color: var(--wp-brand); }
.workproof-theme .wp-row-open:focus-visible { outline: 3px solid #a5b4fc; outline-offset: 2px; border-radius: 4px; }
.workproof-theme .panel-head p { color: var(--wp-muted-2); }

/* ---- Kanban cards (Workproof KanbanCard) ------------------------------------ */
.workproof-theme .wp-kanban-card {
  display: block; width: 100%; padding: 12px; border: 1px solid var(--wp-border); border-radius: 12px;
  color: #0f172a; background: #fff; box-shadow: var(--wp-shadow); font: inherit; text-align: left; cursor: pointer;
  transition: transform .15s, box-shadow .15s;
}
.workproof-theme .wp-kanban-card:hover { transform: translateY(-1px); box-shadow: 0 4px 16px rgba(16, 24, 40, .06); }
.workproof-theme .wp-kanban-card:focus-visible { outline: 3px solid #a5b4fc; outline-offset: 2px; }
.workproof-theme .wp-kanban-top { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; }
.workproof-theme .wp-kanban-trail { display: flex; margin-left: auto; }
.workproof-theme .wp-kanban-title { display: block; margin: 8px 0 6px; font-size: 12.8px; font-weight: 600; line-height: 1.35; }
.workproof-theme .wp-kanban-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 10px; padding-top: 9px; border-top: 1px solid var(--wp-line-soft); color: #7b8496; font-size: 11px; }
.workproof-theme .wp-kanban-foot b { color: #344054; font-weight: 650; }

/* ---- Record drawer (Workproof Drawer, 720px from the right) ------------------ */
body.wp-modal-open { overflow: hidden; }
.workproof-theme .wp-drawer-backdrop, .workproof-theme .wp-dialog-backdrop, .modal-overlay {
  position: fixed; inset: 0; z-index: 60; background: rgba(15, 23, 42, .42); backdrop-filter: blur(2px);
}
.workproof-theme .wp-drawer {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 61; display: flex; flex-direction: column;
  width: 720px; max-width: 92vw; overflow: hidden; border-left: 1px solid var(--wp-border);
  background: #fff; box-shadow: 0 18px 44px rgba(16, 24, 40, .14); outline: none;
}
.workproof-theme .wp-drawer-head { display: flex; flex: none; align-items: center; gap: 10px; padding: 16px 14px 16px 18px; border-bottom: 1px solid var(--wp-border); }
.workproof-theme .wp-drawer-titles { flex: 1; min-width: 0; }
.workproof-theme .wp-drawer-titles h2 { margin: 0; overflow: hidden; color: #0f172a; font-size: 15px; font-weight: 660; letter-spacing: -.2px; text-overflow: ellipsis; white-space: nowrap; }
.workproof-theme .wp-drawer-titles p { margin: 2px 0 0; color: var(--wp-muted-2); font-size: 11.5px; }
.workproof-theme .wp-icon-btn svg { width: 16px; height: 16px; }
.workproof-theme .wp-drawer-body { display: grid; flex: 1; align-content: start; gap: 16px; min-height: 0; overflow-y: auto; padding: 18px; }
.workproof-theme .wp-drawer-foot { display: flex; flex: none; flex-wrap: wrap; align-items: center; gap: 8px; padding: 14px 18px; border-top: 1px solid var(--wp-border); background: #fff; }
.workproof-theme .wp-drawer .wp-stage-flow { justify-content: flex-start; }
.workproof-theme .wp-drawer .wp-stage-hint { text-align: left; }
@keyframes wp-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes wp-slide-in { from { transform: translateX(100%); } to { transform: translateX(0); } }
@keyframes wp-zoom-in { from { opacity: 0; transform: translate(-50%, -50%) scale(.95); } to { opacity: 1; transform: translate(-50%, -50%) scale(1); } }
@media (prefers-reduced-motion: reduce) {
  .workproof-theme .wp-drawer, .workproof-theme .wp-drawer-backdrop, .workproof-theme .wp-dialog, .workproof-theme .wp-dialog-backdrop, .modal, .modal-overlay { animation: none; }
}

/* ---- Dialogs (Workproof Dialog / ConfirmDialog, 430px) ----------------------- */
.workproof-theme .wp-dialog-backdrop { z-index: 70; }
.workproof-theme .wp-dialog {
  position: fixed; top: 50%; left: 50%; z-index: 71; width: 430px; max-width: 92vw; overflow: hidden;
  border-radius: 18px; background: #fff; box-shadow: 0 18px 44px rgba(16, 24, 40, .14);
  transform: translate(-50%, -50%); animation: wp-zoom-in .1s ease-out;
}
.workproof-theme .wp-dialog-head { display: flex; align-items: flex-start; gap: 12px; padding: 20px 22px 16px; }
.workproof-theme .wp-dialog-icon { display: grid; flex: none; place-items: center; width: 36px; height: 36px; border-radius: 10px; color: #be123c; background: #fef2f2; font-weight: 700; }
.workproof-theme .wp-dialog-head h2 { margin: 0; color: #0f172a; font-size: 15px; font-weight: 660; letter-spacing: -.2px; line-height: 1.35; }
.workproof-theme .wp-dialog-head p { margin: 4px 0 0; color: #7b8496; font-size: 12.5px; line-height: 1.5; }
.workproof-theme .wp-dialog-foot { display: flex; justify-content: flex-end; gap: 8px; padding: 16px 22px 22px; }
.workproof-theme .danger-btn { border-color: transparent; color: #be123c; background: rgba(190, 18, 60, .1); }
.workproof-theme .danger-btn:hover { background: rgba(190, 18, 60, .2); }
/* Laundry's owner-protected delete dialog, same frame. */
.modal-overlay { display: grid; place-items: center; padding: 16px; }
.modal {
  width: 430px; max-width: 92vw; max-height: calc(100dvh - 32px); overflow-y: auto; padding: 20px 22px 22px;
  border-radius: 18px; color: #0f172a; background: #fff; box-shadow: 0 18px 44px rgba(16, 24, 40, .14);
}
.modal h2 { margin: 0 0 6px; font-size: 15px; font-weight: 660; letter-spacing: -.2px; }
.modal-record { margin: 0 0 6px; color: #344054; font-size: 13px; }
.modal-warning { margin: 0 0 14px; padding: 10px 12px; border: 1px solid #fbd5d8; border-radius: 9px; color: #be123c; background: #fef2f2; font-size: 12.5px; line-height: 1.5; }
.modal form { display: grid; gap: 14px; }
.modal label { display: grid; gap: 6px; color: #98a2b3; font-size: 10.5px; font-weight: 650; letter-spacing: .07em; text-transform: uppercase; }
.modal input { width: 100%; min-height: 38px; padding: 0 11px; border: 1px solid #e9ebf0; border-radius: 9px; background: #f7f8fa; font: inherit; font-size: 13.5px; text-transform: none; letter-spacing: normal; color: #0f172a; }
.modal input:focus { outline: none; border-color: #6366f1; background: #fff; box-shadow: 0 0 0 3px rgba(99, 102, 241, .13); }
.modal-actions { justify-content: flex-end; }

.workproof-theme .wp-empty-card .empty { margin: 0; }
@media (max-width: 760px) {
  .workproof-theme .page-head-actions { width: 100%; }
  .workproof-theme .wp-drawer { width: 100%; max-width: 100%; }
}

/* ---- Filter chips, notices, alerts, empty states (Workproof tones) ---------- */
.workproof-theme .filter-btn {
  display: inline-flex; align-items: center; height: 29px; padding: 0 11px;
  border: 1px solid var(--wp-border); border-radius: 999px; color: #344054; background: #fff;
  font-size: 11.5px; font-weight: 600;
}
.workproof-theme .filter-btn:hover { border-color: #c7d2fe; background: var(--wp-sunken); }
.workproof-theme .filter-btn.active { border-color: #c7d2fe; color: #3730a3; background: #eef0ff; }
.workproof-theme .notice { padding: 10px 14px; border: 1px solid #c7f0e0; border-radius: 12px; color: #047857; background: #ecfdf5; font-size: 12.5px; }
.workproof-theme .notice.info-notice { border-color: #cfe0fd; color: #1d4ed8; background: #eff6ff; }
.workproof-theme .notice.warn-notice { border-color: #f7e4b5; color: #b45309; background: #fffbeb; }
.workproof-theme .panel > .notice { margin: 12px 18px 0; }
.workproof-theme .alert { border-color: #fbd5d8; border-radius: 12px; color: #be123c; background: #fef2f2; font-size: 13px; }
.workproof-theme .empty { color: #7b8496; font-size: 13px; }
.workproof-theme .text-btn:hover { color: var(--wp-brand); }
.workproof-theme .text-link { color: var(--wp-brand); font-weight: 600; }

/* Kanban without grouping: one grid of Workproof cards. */
.workproof-theme .wp-kanban-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; align-items: start; }
.workproof-theme .wp-kanban-grid .wp-kanban-foot > span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* List rows open the record from anywhere on the row. */
.workproof-theme .wp-row-link { cursor: pointer; }

.workproof-theme .wp-row-open strong { font-weight: 600; }
.workproof-theme .wp-row-open .code-small { display: block; margin-top: 3px; }

.workproof-theme .wp-dialog-icon.info { color: #4338ca; background: #eef0ff; }
.workproof-theme .wp-prop .small-btn { justify-self: start; }

/* Drawer and backdrop animate only as the drawer opens, not on every redraw. */
.workproof-theme .wp-drawer.entering { animation: wp-slide-in .25s cubic-bezier(.4, 0, .2, 1); }
.workproof-theme .wp-drawer-backdrop.entering, .workproof-theme .wp-dialog-backdrop, .modal-overlay { animation: wp-fade .2s ease-out; }

/* ---- Pricing and pack sizes (every template) -------------------------------- */
.workproof-theme .wp-price-fields { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.workproof-theme .wp-pack-list { display: grid; gap: 10px; }
.workproof-theme .wp-pack-row { display: grid; gap: 12px; padding: 12px 14px; border: 1px solid var(--wp-border); border-radius: 12px; background: #fff; }
.workproof-theme .wp-pack-row.archived { background: var(--wp-sunken); }
.workproof-theme .wp-pack-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; min-width: 0; }
.workproof-theme .wp-pack-head strong { color: #0f172a; font-size: 13px; font-weight: 600; }
.workproof-theme .wp-pack-unit { color: #7b8496; font-size: 12px; }

/* Form dialog (Workproof FormDialog): a dialog with fields and a footer. */
.workproof-theme .wp-form-dialog { width: 560px; max-height: calc(100dvh - 32px); display: flex; flex-direction: column; }
.workproof-theme .wp-form-dialog .wp-dialog-head { padding-bottom: 6px; }
.workproof-theme .wp-dialog-body { min-height: 0; overflow-y: auto; padding: 8px 22px 4px; }