/* WA Gateway admin panel */
[hidden] { display: none !important; }

:root {
  color-scheme: light dark;
  --canvas: #f4f7f6;
  --surface: #ffffff;
  --surface-soft: #f8faf9;
  --text: #172522;
  --muted: #63736f;
  --line: #dfe8e4;
  --green: #16864e;
  --green-strong: #116b3d;
  --green-soft: #e7f6ed;
  --red: #b42332;
  --red-soft: #fff0f0;
  --amber: #9a6700;
  --amber-soft: #fff6df;
  --blue: #2864a5;
  --shadow: 0 12px 34px rgba(24, 50, 41, .07);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
}
@media (prefers-color-scheme: dark) {
  :root {
    --canvas: #101715; --surface: #18211e; --surface-soft: #1d2925;
    --text: #e8f0ec; --muted: #a4b3ad; --line: #30413a;
    --green: #52d487; --green-strong: #75e29e; --green-soft: #193b2a;
    --red: #ff8188; --red-soft: #3b2023; --amber: #f2c15c; --amber-soft: #392f1a;
    --blue: #8bbcf2; --shadow: 0 12px 34px rgba(0,0,0,.22);
  }
}
* { box-sizing: border-box; }
html { min-width: 320px; background: var(--canvas); scrollbar-gutter: stable; }
body { margin: 0; min-height: 100vh; color: var(--text); background: var(--canvas); font-size: 14px; line-height: 1.55; }
button, input, select, textarea { font: inherit; }
button { min-height: 40px; padding: 9px 15px; border: 1px solid var(--green); border-radius: 9px; background: var(--green); color: #fff; font-weight: 650; cursor: pointer; transition: background .16s, border-color .16s, transform .16s; }
button:hover { background: var(--green-strong); border-color: var(--green-strong); }
button:active { transform: translateY(1px); }
button:disabled { opacity: .45; cursor: not-allowed; }
button.danger { border-color: #e5b9bd; background: var(--red-soft); color: var(--red); }
button.danger:hover { border-color: var(--red); }
a { color: var(--green); }
input:not([type=checkbox]):not([type=radio]), select, textarea { display: block; width: 100%; min-width: 0; margin-top: 6px; padding: 10px 12px; color: var(--text); background: var(--surface); border: 1px solid var(--line); border-radius: 9px; outline: none; }
input:focus, select:focus, textarea:focus { border-color: var(--green); box-shadow: 0 0 0 3px color-mix(in srgb, var(--green) 16%, transparent); }
input[type=checkbox] { accent-color: var(--green); width: 16px; height: 16px; vertical-align: middle; }
textarea { resize: vertical; }
label { display: block; min-width: 0; color: var(--muted); font-size: 13px; font-weight: 600; }
label input[type=checkbox] { margin: 0 7px 0 0; }
h1, h2, h3 { color: var(--text); line-height: 1.25; }
h1 { margin: 0 0 24px; font-size: 27px; letter-spacing: -.04em; }
h2 { margin: 2px 0 22px; font-size: clamp(23px, 3vw, 30px); letter-spacing: -.04em; }
h3 { margin: 0 0 16px; font-size: 16px; letter-spacing: -.015em; }
p { margin: 0 0 16px; }
small { color: var(--muted); }
code { padding: 3px 7px; border: 1px solid var(--line); border-radius: 6px; background: var(--surface-soft); color: var(--green-strong); font:  .9em ui-monospace, SFMono-Regular, Consolas, monospace; overflow-wrap: anywhere; }

/* Login */
#login-view { min-height: 100vh; display: grid; place-items: center; padding: 24px; background: radial-gradient(ellipse at 50% 0%, color-mix(in srgb, var(--green) 13%, var(--canvas)), var(--canvas) 58%); }
#login-form { width: min(100%, 420px); padding: clamp(26px, 6vw, 42px); border: 1px solid var(--line); border-radius: 18px; background: var(--surface); box-shadow: var(--shadow); }
#login-form h1 { padding-top: 14px; }
#login-form h1::before { content: ""; display: block; width: 42px; height: 4px; margin-bottom: 20px; border-radius: 5px; background: var(--green); }
#login-form label { margin: 0 0 17px; }
#login-form button { width: 100%; margin-top: 6px; }
.error { color: var(--red); }
#login-error { min-height: 1.5em; margin: 14px 0 0; }

/* Application frame */
#app-view { min-height: 100vh; display: grid; grid-template-columns: 246px minmax(0, 1fr); grid-template-rows: 68px minmax(0, 1fr); }
#app-view > header { grid-column: 1 / -1; grid-row: 1; position: sticky; top: 0; z-index: 5; display: flex; align-items: center; gap: 16px; min-width: 0; padding: 0 28px; border-bottom: 1px solid var(--line); background: var(--surface); }
#app-view > header strong { margin-right: auto; font-size: 17px; letter-spacing: -.03em; }
#app-view > header strong::before { content: ""; display: inline-block; width: 10px; height: 10px; margin-right: 10px; border-radius: 50%; background: #25d366; box-shadow: 0 0 0 4px color-mix(in srgb, #25d366 14%, transparent); }
#user-name { color: var(--muted); font-weight: 600; }
#logout-btn { min-height: 36px; padding: 6px 12px; border-color: var(--line); background: transparent; color: var(--text); }
#logout-btn:hover { border-color: var(--green); color: var(--green); }
#nav { grid-column: 1; grid-row: 2; position: sticky; top: 68px; align-self: start; display: flex; flex-direction: column; gap: 5px; height: calc(100vh - 68px); overflow-y: auto; padding: 24px 14px; border-right: 1px solid var(--line); background: var(--surface); }
#nav a { display: flex; align-items: center; min-height: 42px; padding: 9px 12px; border-radius: 8px; color: var(--muted); font-weight: 600; text-decoration: none; transition: .15s ease; }
#nav a:hover { background: var(--surface-soft); color: var(--text); }
#nav a.active { background: var(--green-soft); color: var(--green-strong); }
#page { grid-column: 2; grid-row: 2; width: 100%; max-width: 1500px; min-width: 0; margin: 0 auto; padding: 32px clamp(20px, 3vw, 44px) 56px; }
#page > p { max-width: 850px; color: var(--muted); }
#page > .card, #page > section.card { margin: 0 0 20px; }
#page > h2 + .card { margin-top: 0; }

/* Cards and dashboard */
.card { min-width: 0; padding: 22px; border: 1px solid var(--line); border-radius: 13px; background: var(--surface); box-shadow: var(--shadow); }
.card p:last-child { margin-bottom: 0; }
#wa-card { border-top: 3px solid var(--green); }
#page:has(#wa-card) { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-content: start; gap: 18px; }
#page:has(#wa-card) > h2 { grid-column: 1 / -1; margin-bottom: 2px; }
#page:has(#wa-card) > .card { margin: 0; }
#page:has(#wa-card) > .card:nth-of-type(n+3) { grid-column: 1 / -1; }
.actions { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 18px; }
.actions p { flex-basis: 100%; }
.status, .badge { display: inline-flex; align-items: center; width: fit-content; padding: 4px 9px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface-soft); color: var(--muted); font-size: 12px; font-weight: 700; line-height: 1.35; }
.status::before, .badge::before { content: ""; width: 7px; height: 7px; margin-right: 7px; border-radius: 50%; background: currentColor; }
.status[data-status="connected"], .status[data-status="delivered"], .status[data-status="read"], .status[data-status="sent"], .badge[data-status="connected"] { color: var(--green-strong); background: var(--green-soft); border-color: color-mix(in srgb, var(--green) 22%, var(--line)); }
.status[data-status="qr"], .status[data-status="queued"], .status[data-status="reconnecting"], .status[data-status="connecting"], .badge[data-status="qr"], .badge[data-status="reconnecting"], .badge[data-status="connecting"] { color: var(--amber); background: var(--amber-soft); }
.status[data-status="banned"], .status[data-status="failed"], .status[data-status="expired"], .status[data-status="cancelled"], .status[data-status="logged_out"], .status[data-status="replaced"], .badge[data-status="banned"], .badge[data-status="logged_out"], .badge[data-status="replaced"] { color: var(--red); background: var(--red-soft); }
.status[data-status="sending"] { color: var(--blue); }
.qr { display: grid; justify-items: center; gap: 12px; margin: 18px auto; padding: 18px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface-soft); text-align: center; }
.qr img { display: block; width: min(300px, 100%); height: auto; aspect-ratio: 1; padding: 8px; border-radius: 5px; background: #fff; image-rendering: pixelated; }
.qr p { margin: 0; color: var(--muted); }
.limit { display: grid; grid-template-columns: minmax(110px, .8fr) minmax(90px, 1.5fr) minmax(115px, .8fr); align-items: center; gap: 12px; margin: 15px 0; color: var(--muted); font-size: 12px; }
progress { width: 100%; height: 9px; overflow: hidden; border: 0; border-radius: 99px; background: var(--surface-soft); accent-color: var(--green); }
progress::-webkit-progress-bar { border-radius: 99px; background: var(--surface-soft); }
progress::-webkit-progress-value { border-radius: 99px; background: linear-gradient(90deg, #25d366, var(--green-strong)); }
progress::-moz-progress-bar { border-radius: 99px; background: var(--green); }

/* Forms, tables and lists */
form:not(#login-form) { min-width: 0; }
form:not(.filters):not(#login-form) label { margin: 0 0 15px; }
form:not(.filters):not(#login-form) > button { margin: 3px 8px 0 0; }
.filters { display: flex; flex-wrap: wrap; align-items: end; gap: 10px; margin: 0 0 18px; padding: 15px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); }
.filters input, .filters select { flex: 1 1 170px; width: auto; margin: 0; }
.filters button { flex: 0 0 auto; }
table { border-collapse: collapse; width: 100%; }
table.data, #brand-stats { display: block; max-width: 100%; overflow-x: auto; border: 1px solid var(--line); border-radius: 11px; background: var(--surface); }
table thead { background: var(--surface-soft); }
table th, table td { padding: 12px 14px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
table th { color: var(--muted); font-size: 11px; font-weight: 750; letter-spacing: .055em; text-transform: uppercase; white-space: nowrap; }
table td { font-size: 13px; }
table tbody tr:nth-child(even) { background: color-mix(in srgb, var(--surface-soft) 58%, var(--surface)); }
table tbody tr:last-child td { border-bottom: 0; }
table td button { min-height: 34px; padding: 6px 10px; font-size: 12px; white-space: nowrap; }
table td details { min-width: 180px; max-width: 440px; }
summary { color: var(--text); cursor: pointer; font-weight: 600; }
details pre { white-space: pre-wrap; overflow-wrap: anywhere; }
table pre { max-width: 360px; margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.pager { display: flex; align-items: center; justify-content: center; gap: 14px; padding: 18px 0; color: var(--muted); }
.pager button { min-height: 36px; padding: 6px 12px; }
.events { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.events li { padding: 12px 14px; border: 1px solid var(--line); border-left: 3px solid var(--blue); border-radius: 8px; background: var(--surface-soft); overflow-wrap: anywhere; }
.events li[data-level="warn"] { border-left-color: #e3a72f; }
.events li[data-level="critical"] { border-left-color: var(--red); }
.events time { display: inline-block; margin-right: 8px; color: var(--muted); font-size: 12px; }
.preview { max-width: 520px; margin: 16px 0 0 auto; padding: 14px 16px; border-radius: 14px 14px 3px 14px; background: var(--green-soft); color: var(--text); white-space: pre-wrap; overflow-wrap: anywhere; }
.warning { padding: 13px 16px; border: 1px solid color-mix(in srgb, var(--amber) 28%, var(--line)); border-radius: 10px; background: var(--amber-soft); color: var(--amber) !important; }
.loading { color: var(--muted); }
#new-key { margin-top: 16px; padding: 15px; border: 1px solid var(--green); border-radius: 10px; background: var(--green-soft); overflow-wrap: anywhere; }
#new-key code { display: inline-block; max-width: 100%; margin: 8px 10px 8px 0; }
fieldset { min-width: 0; margin: 0; padding: 20px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); }
legend { padding: 0 8px; color: var(--green-strong); font-size: 14px; font-weight: 750; }
#settings-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
#settings-form > button { justify-self: start; }
fieldset label { margin: 0 0 13px; }
fieldset label:last-child { margin-bottom: 0; }
fieldset small { display: block; margin-top: 5px; font-weight: 400; }
#toast { position: fixed; right: 22px; bottom: 22px; z-index: 20; max-width: min(420px, calc(100vw - 32px)); padding: 13px 17px; border: 1px solid var(--line); border-radius: 11px; background: var(--surface); box-shadow: var(--shadow); font-weight: 650; }
#toast[data-type="ok"] { border-color: color-mix(in srgb, var(--green) 35%, var(--line)); }
#toast[data-type="error"] { border-color: var(--red); color: var(--red); }

/* Auth, refreshed dashboard and responsive content polish */
.auth-form { width: min(100%, 420px); padding: clamp(26px, 6vw, 42px); border: 1px solid var(--line); border-radius: 18px; background: var(--surface); box-shadow: var(--shadow); }
.auth-form h1 { padding-top: 14px; }
.auth-form h1::before { content: ""; display: block; width: 42px; height: 4px; margin-bottom: 20px; border-radius: 5px; background: var(--green); }
.auth-form label { margin: 0 0 17px; }
.auth-form > button { width: 100%; margin-top: 6px; }
.auth-form .auth-links { margin: 18px 0 0; text-align: center; }
.auth-links a { font-weight: 650; text-decoration: none; }
.auth-links a:hover { text-decoration: underline; }
.auth-form #login-step-totp { padding: 14px; margin: 0 0 16px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface-soft); }
.auth-form input[name="code"] { max-width: 260px; margin: 12px auto 0; padding: 14px; text-align: center; font-size: 24px; font-weight: 750; letter-spacing: .38em; font-variant-numeric: tabular-nums; }
#forgot-msg, #reset-msg, #reset-user { min-height: 1.5em; margin: 13px 0 0; color: var(--muted); overflow-wrap: anywhere; }
#user-name { padding: 7px 10px; border-radius: 8px; color: var(--muted); text-decoration: none; transition: background .15s, color .15s; }
#user-name:hover { background: var(--green-soft); color: var(--green-strong); }

#page:has(#wa-card) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
#page:has(#wa-card) > h2,
#page:has(#wa-card) > #stat-cards,
#page:has(#wa-card) > .card:nth-child(n+7) { grid-column: 1 / -1; }
#page:has(#wa-card) > #wa-card { grid-column: 1; min-height: 230px; }
#page:has(#wa-card) > #limits-card { grid-column: 2; min-height: 230px; }
#stat-cards { min-height: 104px; font-variant-numeric: tabular-nums; }
.stats { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; }
a.stat { display: grid; align-content: space-between; gap: 10px; min-width: 0; min-height: 94px; padding: 15px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); box-shadow: var(--shadow); text-decoration: none; transition: transform .16s, border-color .16s; }
a.stat:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--green) 45%, var(--line)); }
.stat-label { color: var(--muted); font-size: 12px; font-weight: 650; }
.stat-value { color: var(--text); font-size: clamp(20px, 2vw, 28px); font-weight: 750; line-height: 1; font-variant-numeric: tabular-nums; }
.stat[data-stat="delivered"] .stat-value, .stat[data-stat="read"] .stat-value { color: var(--green-strong); }
.stat[data-stat="failed"] .stat-value { color: var(--red); }
.stat[data-stat="queued"] .stat-value { color: var(--amber); }
.stat[data-stat="inbound"] .stat-value { color: var(--blue); }
.card-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.card-head h3 { min-width: 0; }
.card-head a { flex: 0 0 auto; font-weight: 650; text-decoration: none; }
.card-head a:hover { text-decoration: underline; }

.table-wrap { max-width: 100%; min-width: 0; overflow-x: auto; border: 1px solid var(--line); border-radius: 11px; background: var(--surface); overscroll-behavior-inline: contain; }
table.data, #brand-stats { display: table; width: 100%; max-width: none; overflow: visible; border: 0; border-radius: 0; }
.cell-text { max-width: 320px; overflow-wrap: anywhere; word-break: break-word; }
tr.empty td { padding: 24px 14px; color: var(--muted); text-align: center; }
.row-actions { display: flex; flex-wrap: wrap; align-items: stretch; gap: 7px; min-width: 150px; }
.row-actions button { flex: 1 1 auto; }
.actions { align-items: stretch; }
.actions button, .filters button, form > button { min-height: 40px; }
.loading { min-height: 48px; padding: 14px 2px; color: var(--muted); }

.doc-toc { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 20px; }
.doc-toc a, .doc-brands > * { display: inline-flex; align-items: center; padding: 7px 11px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface-soft); color: var(--muted); font-size: 12px; font-weight: 650; text-decoration: none; }
.doc-toc a:hover { border-color: var(--green); color: var(--green-strong); }
.card.doc { margin-bottom: 18px; }
.code-block { min-width: 0; margin: 16px 0; overflow: hidden; border: 1px solid #303b37; border-radius: 11px; background: #111816; color: #e6eee9; }
.code-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 12px; border-bottom: 1px solid #303b37; background: #1a2420; color: #aebdb5; font-size: 12px; }
.code-head button { min-height: 30px; padding: 4px 10px; border-color: #496052; border-radius: 7px; background: #293b31; color: #e6eee9; font-size: 12px; }
.code-head button:hover { background: #35513f; }
.code-block pre { max-width: 100%; margin: 0; padding: 16px; overflow-x: auto; color: #e6eee9; font: 13px/1.6 ui-monospace, SFMono-Regular, Consolas, monospace; white-space: pre; }
.code-block pre code { padding: 0; border: 0; border-radius: 0; background: transparent; color: inherit; font: inherit; white-space: inherit; overflow-wrap: normal; }
.doc ol, .doc ul { padding-left: 1.5em; }
.doc li { margin: 7px 0; }
.doc-brands { display: flex; flex-wrap: wrap; gap: 8px; }
.doc-brands > * { color: var(--green-strong); background: var(--green-soft); }

#pf-2fa, #pf-2fa-step, #user-action { min-width: 0; }
#pf-2fa ol, #pf-2fa-step ol { padding-left: 1.5em; }
#pf-2fa li, #pf-2fa-step li { margin: 8px 0; }
#pf-2fa .qr img, #pf-2fa-step .qr img { width: min(220px, 100%); }
#pf-2fa .qr, #pf-2fa-step .qr { background: #fff; }
.inline-form { display: flex; align-items: end; flex-wrap: wrap; gap: 12px; margin-top: 14px; }
.inline-form label { flex: 1 1 220px; margin: 0; }
.inline-form button { flex: 0 0 auto; }
.inline-form small { flex-basis: 100%; }
#smtp-test { padding-top: 14px; border-top: 1px solid var(--line); }

@media (max-width: 820px) {
  .stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  #nav { position: sticky; }
  #nav::after { content: ""; position: sticky; right: -12px; flex: 0 0 18px; margin-left: -18px; pointer-events: none; background: linear-gradient(90deg, transparent, var(--surface)); }
}
@media (max-width: 560px) {
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
  a.stat { min-height: 82px; padding: 12px; }
  #page:has(#wa-card) > #wa-card, #page:has(#wa-card) > #limits-card { grid-column: 1; min-height: 0; }
  #page:has(#wa-card) > .card:nth-child(n+6) { grid-column: 1; }
  .inline-form { align-items: stretch; flex-direction: column; }
  .inline-form button { width: 100%; }
  .row-actions { min-width: 125px; }
  .cell-text { max-width: 220px; }
  .auth-form input[name="code"] { max-width: 100%; }
}

@media (max-width: 820px) {
  #app-view { grid-template-columns: minmax(0, 1fr); grid-template-rows: 62px auto minmax(0, 1fr); }
  #app-view > header { grid-row: 1; padding: 0 16px; }
  #nav { grid-column: 1; grid-row: 2; position: sticky; top: 62px; z-index: 4; flex-direction: row; height: auto; padding: 9px 12px; border-right: 0; border-bottom: 1px solid var(--line); overflow-x: auto; overflow-y: hidden; scrollbar-width: thin; }
  #nav a { flex: 0 0 auto; min-height: 36px; padding: 7px 11px; white-space: nowrap; font-size: 12px; }
  #page { grid-column: 1; grid-row: 3; padding: 24px 18px 42px; }
}
@media (max-width: 560px) {
  body { font-size: 13px; }
  #app-view > header { gap: 9px; }
  #app-view > header strong { font-size: 15px; }
  #user-name { max-width: 90px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; }
  #conn-badge { max-width: 120px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 10px; }
  #logout-btn { min-height: 33px; padding: 5px 9px; font-size: 12px; }
  #page { padding: 21px 13px 34px; }
  #page:has(#wa-card) { grid-template-columns: minmax(0, 1fr); gap: 13px; }
  #page:has(#wa-card) > h2, #page:has(#wa-card) > .card:nth-of-type(n+3) { grid-column: 1; }
  .card { padding: 17px; }
  #settings-form { grid-template-columns: minmax(0, 1fr); }
  .limit { grid-template-columns: minmax(0, 1fr) auto; gap: 6px 12px; }
  .limit progress { grid-column: 1 / -1; grid-row: 2; }
  .limit span:last-child { text-align: right; }
  .actions button { flex: 1 1 auto; }
  .filters { align-items: stretch; }
  .filters input, .filters select, .filters button { flex: 1 1 100%; width: 100%; }
  .pager { flex-wrap: wrap; gap: 8px; font-size: 12px; }
  #toast { right: 12px; bottom: 12px; }
}