/* ============================================================
   mailtronx.css — MailtronX adapter over the appliance
   theme (appliance.css v0.59.24).

   Loaded AFTER appliance.css + font-awesome. Two jobs:
     1. Alias MailtronX's original CSS tokens (--ok/--accent/…) onto
        the appliance token set, so every existing inline style and
        page rule adopts the navy palette unchanged.
     2. Re-skin MailtronX's existing page markup (main/h1/table/.card/
        .grid/.badge/button/.addbar/.err/pre.maillog/.login-wrap) to
        the appliance component look, using the appliance tokens.

   The chrome (header / top-nav / sub-tabs / status bar) uses the
   native .appliance-* classes directly in the "nav" template.
   ============================================================ */

/* 1 — legacy MailtronX tokens -> appliance tokens ------------------ */
:root{
  --bg:var(--bg-page);
  --panel:var(--bg-panel);
  --line:var(--border-panel);
  --fg:var(--text-primary);
  --hi:var(--text-brand);
  --accent:var(--brand-primary-lt);
  --muted:var(--text-secondary);
  --ok:var(--status-up);
  --bad:var(--status-down);
  --warn:var(--status-warn-text);
  /* banner fade: logo near-black (left, at the logo) -> deep navy blue (right). */
  --bg-header:linear-gradient(to right, #000 0, #000 400px, #0a1240 820px, var(--brand-primary) 100%);
  /* inactive left-nav items: appliance default #3F6EB0 is only ~3.5:1 on the
     dark rail (below WCAG AA). Brighter light-blue reads clearly but stays
     secondary to the white active item. */
  --text-link-nav:#8fb6ea;
  /* flatten panels/tiles to a solid dark navy (drop the --bg-tile gradient). */
  --bg-tile:#000;
  --bg-page:#141624;
  --bg-nav:#141624;
}

/* banner tall enough for the wider logo (logo aspect ~1.69:1 is locked, so a
   ~2.5x-wider logo is ~2.5x taller). */
.appliance-header{height:105px}
.appliance-header-right{align-self:flex-start;padding-top:10px}

/* 2a — content wrapper (bare <main>) -> .appliance-main look ------- */
main{
  flex:1;min-width:0;                 /* right-hand flex sibling of the left nav */
  padding:12px 16px 28px;
  background:var(--bg-page);
  min-height:calc(100vh - 105px - 28px);
  max-width:none;width:auto;margin:0;
}

/* ---- left-nav rail helpers (Dashboard top item + group-header links) ---- */
.appliance-nav-item.mtx-navtop{padding:6px 14px;font-weight:700}
.appliance-nav-section .mtx-navsec-link{color:inherit;text-decoration:none;flex:1}
.appliance-nav-section .mtx-navsec-link:hover{text-decoration:none}
.appliance-nav-section .appliance-nav-caret{pointer-events:none}
/* ---- top-level rail entries: colored glyphs + the nav glow ----
   Glyphs are emoji in .appliance-topnav-emoji rendered in
   color by the browser's emoji font. appliance.css pulses .appliance-nav-item on hover/active (sub-items and
   Dashboard) but has no hover rule for the group headers (.appliance-nav-section), so the top-level rows never
   lit up: same keyframe, same border brightening, on hover and while the group is the open one. */
.appliance-nav-section{position:relative;transition:background .12s,color .12s}
.appliance-nav-section:hover{background:rgba(255,255,255,0.06)}
.appliance-nav-section:hover,
.appliance-nav-section:not(.collapsed){animation:blue-glow-pulse 1.5s ease-in-out infinite;border-color:var(--brand-primary-lt);z-index:1}
.appliance-nav-section:not(.collapsed) .mtx-navsec-link{color:var(--text-brand)}
.appliance-nav .appliance-topnav-emoji{margin-right:2px}
/* ---- the rail sizes to its widest entry (fonts differ per client); no entry ever wraps. The theme's
   fixed 200px rail wrapped "Configure Server" on wider fonts: width follows the content, the page body
   (main, flex:1) gives up the difference. ---- */
/* 240px minimum; still grows past it for a wider font. */
.appliance-nav{width:auto;min-width:240px;flex:0 0 auto}
.appliance-nav-section,.appliance-nav-section .mtx-navsec-link,.appliance-nav-item{white-space:nowrap}

/* page title = first h1; later <h1> are section sub-heads (no rule) */
main h1{color:var(--text-brand);font-weight:400;margin:1rem 0 .7rem}
main > h1:first-of-type{
  font-size:18px;font-weight:400;color:var(--text-brand);
  border-bottom:2px solid var(--text-brand);
  padding-bottom:6px;margin:0 0 12px;text-align:center;
}

/* 2b — KPI cards / grid -> appliance tiles ------------------------ */
.grid{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 14px}
.card{
  background:var(--bg-tile);
  border:1px solid var(--border-panel);
  border-radius:7px;
  box-shadow:0 1px 2px rgba(0,0,0,.28),0 6px 16px rgba(0,0,0,.16);
  padding:10px 12px;
  flex:1 1 200px;min-width:180px;
}
.card .k{color:var(--text-tile-lbl);font-size:11px;text-transform:uppercase;letter-spacing:.3px;font-weight:700}
.card .v{color:var(--text-tile-val);font-size:18px;font-weight:700;margin-top:4px}

/* 2c — tables -> .appliance-table look (golden standard:
   centered; per-page inline text-align:right on Action cells wins) - */
table{
  width:100%;border-collapse:collapse;font-size:13px;
  background:transparent;border:0;border-radius:0;overflow:visible;
  margin-bottom:12px;
}
th{
  background:var(--bg-table-th);color:var(--text-th);
  text-align:center;padding:4px 6px;font-weight:700;
  border:1px solid var(--border-table-th);font-size:12px;
}
td{
  text-align:center;padding:4px 6px;
  border:1px solid var(--border-table-td);
  background:var(--bg-panel);color:var(--text-primary);
  vertical-align:middle;
}
tr:last-child td{border-bottom:1px solid var(--border-table-td)}

/* 2d — badges -> appliance tags ---------------------------------- */
.badge{
  display:inline-block;padding:1px 8px;border-radius:10px;
  font-size:11px;font-weight:700;border:1px solid transparent;
}
.badge.ok  {background:var(--tag-up-bg);  color:var(--tag-up-fg);  border-color:var(--tag-up-bd)}
.badge.bad {background:var(--tag-down-bg);color:var(--tag-down-fg);border-color:var(--tag-down-bd)}
.badge.warn{background:var(--tag-warn-bg);color:var(--tag-warn-fg);border-color:var(--tag-warn-bd)}

/* 2e — buttons -> appliance buttons ------------------------------ */
button,.btn{
  background:var(--bg-tile);border:1px solid var(--border-btn);
  color:var(--text-primary);padding:3px 12px;font-size:13px;
  font-family:inherit;cursor:pointer;border-radius:2px;
  min-height:22px;line-height:1.2;font-weight:400;
  text-decoration:none;display:inline-block;
}
button:hover,.btn:hover{background:var(--bg-panel-hover);border-color:var(--brand-primary-lt);text-decoration:none}
button:focus-visible,button:active,.btn:focus-visible,.btn:active{
  outline:none;border-color:var(--brand-primary-lt);
  animation:blue-glow-pulse 1.5s ease-in-out infinite;
}
button.ghost,.btn.ghost{background:var(--bg-tile);color:var(--text-primary)}
button.danger,.btn.danger{color:var(--status-down);background:var(--bg-tile);border-color:var(--border-btn)}
button.danger:hover,.btn.danger:hover{background:var(--status-down);color:#fff;border-color:var(--status-down);animation:none}
/* primary affordance: the main submit on add-bars + login = brand gradient */
.addbar button[type=submit],.login-wrap button[type=submit]{
  background:linear-gradient(180deg,var(--brand-primary-lt) 0%,var(--brand-primary) 100%);
  color:#fff;border-color:var(--brand-primary-dk);
}
.addbar button[type=submit]:hover,.login-wrap button[type=submit]:hover{
  background:linear-gradient(180deg,#2f7ac4 0%,var(--brand-primary-top) 100%);
}

/* 2f — inputs -> appliance inputs -------------------------------- */
input[type=text],input[type=password],input[type=number],input[type=email],select,textarea{
  border:1px solid var(--border-input);
  background:var(--bg-input);color:var(--text-primary);
  padding:.35rem .5rem;font-family:inherit;font-size:13px;
  border-radius:3px;box-shadow:inset 1px 1px 1px rgba(0,0,0,.07);
}
input[type=text],input[type=password]{width:100%}
input:focus,select:focus,textarea:focus{
  outline:none;border-color:var(--border-input-focus);background:var(--bg-input-focus);
}

/* 2g — misc page primitives -------------------------------------- */
.muted{color:var(--text-secondary)}
form.inline,.inline{display:inline}
.addbar{display:flex;gap:.6rem;margin:1rem 0;flex-wrap:wrap;align-items:center}
.addbar input[type=text]{flex:1;min-width:160px}
.err{
  background:var(--tag-down-bg);border:1px solid var(--status-down);
  color:#ffb3ae;padding:.6rem .8rem;border-radius:6px;margin-bottom:1rem;
}
.live{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--status-up);margin-right:.4rem;vertical-align:middle}
code{font-family:Consolas,"Courier New",monospace}

/* mail log / <pre> viewers */
pre.maillog{
  background:var(--bg-codeblock);border:1px solid var(--border-panel);
  border-radius:8px;padding:.7rem .8rem;max-height:72vh;overflow:auto;
  font-size:.8rem;line-height:1.4;white-space:pre-wrap;word-break:break-word;margin:0;
  color:var(--text-primary);
}
pre.maillog .lg-err{color:#ff7b72}
pre.maillog .lg-warn{color:#d29922}
pre.maillog .lg-ok{color:#3fb950}
pre.maillog .lg-def{color:#9aa5b1}

/* login card -> appliance panel */
.login-wrap{
  max-width:22rem;margin:8vh auto;
  background:var(--bg-tile);border:1px solid var(--border-panel);
  border-radius:10px;padding:1.6rem;
  box-shadow:0 1px 2px rgba(0,0,0,.28),0 10px 30px rgba(0,0,0,.35);
}
.login-wrap h1{text-align:center;color:var(--text-brand);border:0}
.login-wrap label{display:block;margin:.8rem 0 .3rem;color:var(--text-secondary);font-size:.85rem}

/* ============================================================
   Chrome tweaks specific to MailtronX's server-rendered nav
   (no appliance.js — CSS-only user dropdown; empty header center).
   ============================================================ */
/* CSS-only user dropdown (appliance.js normally toggles [hidden]) */
.appliance-user-dropdown{display:none}
.appliance-user-menu:hover .appliance-user-dropdown,
.appliance-user-menu:focus-within .appliance-user-dropdown{display:block}

/* brand logo in the header-left box: swap the appliance blue-gradient
   logo slot for the logo's own near-black field so the image blends. */
/* FIXED logo frame: the box has defined dimensions and never grows/shrinks
   with the image; the logo scales to FIT INSIDE it (object-fit:contain).
   Change the logo file freely — the layout stays put. */
.appliance-header-logo{background:transparent;border-right:0;padding:0 8px;letter-spacing:0;justify-content:flex-start;align-items:center;flex-shrink:0;position:relative}
/* height fixed to the banner; width follows the logo's own aspect so it FILLS
   its area with no letterbox gap and starts near the left border. */
.appliance-header-logo img{height:92px;width:auto;display:block;flex-shrink:0}
/* version pinned directly under the envelope/mail icon (absolute over the logo). */
.mtx-ver{position:absolute;left:72px;bottom:9px;font-size:11px;color:rgba(255,255,255,.8);font-family:Consolas,"Courier New",monospace;white-space:nowrap;letter-spacing:.5px}

/* login card brand logo */
.login-logo{text-align:center;margin:.2rem 0 1.1rem}
.login-logo img{width:80%;height:auto;display:inline-block}

/* small DEV pill in the header product slot */
.mtx-devtag{
  font-size:11px;font-weight:700;letter-spacing:.6px;
  color:#fff;background:rgba(255,255,255,.14);
  border:1px solid rgba(255,255,255,.28);border-radius:3px;padding:2px 7px;
}

/* status-bar identity dot (neutral brand accent — not a health claim) */
.appliance-statusbar .appliance-st-dot{background:var(--brand-primary-lt)}

/* ---- Home page: metric tiles + sparklines + system-info bars ---- */
.mtx-tiles{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 16px}
.mtx-tiles .appliance-tile{flex:1 1 150px;min-width:140px;padding:8px 12px}
.mtx-spark{width:100%;height:24px;display:block;margin-top:5px}
.mtx-spark polyline{fill:none;stroke:var(--brand-primary-lt);stroke-width:1.5px;vector-effect:non-scaling-stroke}
.mtx-bar{display:inline-block;width:120px;height:8px;background:var(--bg-panel-alt);border:1px solid var(--border-panel);border-radius:4px;overflow:hidden;vertical-align:middle;margin:0 7px}
.mtx-bar>span{display:block;height:100%;background:var(--status-up);transition:width .4s}
/* System Information: 3-column form (label | mono value | hint/bar+%) */
table.mtx-sysinfo{background:transparent;border:0;margin:0 auto;width:max-content}
table.mtx-sysinfo td{border:0;background:transparent;padding:3px 12px;vertical-align:middle}
table.mtx-sysinfo td.sk{text-align:right;color:var(--text-secondary);font-weight:700;white-space:nowrap}
table.mtx-sysinfo td.sv{text-align:left;font-family:Consolas,"Courier New",monospace;color:var(--text-primary);white-space:nowrap}
table.mtx-sysinfo td.sh{text-align:left;white-space:nowrap;width:1px}
table.mtx-sysinfo td.sh .sp{color:var(--status-up);font-weight:700;margin-left:6px}
table.mtx-sysinfo td.sh .mtx-bar{margin:0;width:150px;vertical-align:middle}
table.mtx-sysinfo td.se{text-align:left;color:var(--text-muted);font-style:italic;font-size:12px;white-space:nowrap;padding-left:20px}

/* Services table (Control Services page): fills its panel, dark rows. */
table.mtx-services{width:100%;margin:0}
table.mtx-services th,table.mtx-services td{white-space:nowrap}
table.mtx-services td{background:#0e0f1a}

/* center box header text (panel titles like System Information, Services) */
.appliance-panel-title{justify-content:center}

/* Services box: restart action icon-button */
table.mtx-services td.svc-act{text-align:center;white-space:nowrap}
table.mtx-services .svc-icon{background:transparent;border:0;color:var(--text-secondary);cursor:pointer;padding:2px 8px;font-size:13px;line-height:1;border-radius:4px}
table.mtx-services .svc-icon:hover{color:#fff;background:var(--brand-primary)}

/* Dashboard: flex/grid DIV sections. Top = Live Metrics (left) + System Information (centred);
   Mail Flow + Dispositions + Outcomes sit under System Information. */
.mtx-home{display:flex;flex-direction:column;gap:16px;margin-top:6px}
/* Home top row. The Live Metrics column and System Information size to their CONTENT (no width caps: fonts differ per
   client, and every added row must be able to widen its panel). Middle column = content width, centred by the equal 1fr
   sides; the right column is empty and only balances the left one. */
.mtx-sec-top{display:grid;grid-template-columns:minmax(240px,1fr) auto minmax(0,1fr);align-items:start;gap:16px}
.mtx-sec-top > .mtx-center-col{grid-column:2;display:flex;flex-direction:column;gap:16px;align-items:stretch}
/* stat boxes live under System Information: same 16px gap as between the panels, spanning its width */
.mtx-center-col .mtx-sec-stats{justify-content:space-between;flex-wrap:nowrap;align-items:flex-start;margin:0}
.mtx-center-col > .mtx-sysinfo-panel{margin:0}
.mtx-center-col .mtx-stat-col{flex:1 1 0;min-width:0}
.mtx-center-col .mtx-stat-col .mtx-statbox{width:auto}
.mtx-center-col > .mtx-sec-stats > .mtx-statbox{flex:1 1 0;width:auto;min-width:0}
.mtx-sysinfo-panel{width:max-content;max-width:none}
.mtx-sec-stats{display:flex;justify-content:center;align-items:flex-start;gap:16px;flex-wrap:wrap}
.mtx-stat-col{display:flex;flex-direction:column;gap:16px} /* Mail Flow above Dispositions; Outcomes beside the column */
.mtx-statbox{width:312px;padding:0;overflow:hidden}
.mtx-statbox .appliance-panel-body{padding:0}
table.mtx-stat{width:100%;margin:0;border-collapse:collapse}
table.mtx-stat th{background:var(--bg-table-th);color:var(--text-th);padding:3px 6px;font-size:11px;font-weight:700;text-align:center}
table.mtx-stat td{padding:3px 8px;text-align:center;font-family:Consolas,"Courier New",monospace;font-size:12px;color:var(--text-primary);background:transparent}
table.mtx-stat td.sk{text-align:left;font-family:inherit;color:var(--text-secondary);font-weight:700}

/* Stat-box row color coding by category meaning */
table.mtx-stat td.sk.oc-good{color:var(--status-up)}
table.mtx-stat td.sk.oc-bad{color:var(--status-down)}
table.mtx-stat td.sk.oc-warn{color:var(--status-warn-text)}
table.mtx-stat td.sk.oc-info{color:#8fb6ea}

/* ---- Stats page: outcomes-over-time chart (server-rendered SVG, CSP-safe) ---- */
.mtx-chart-ctl{display:flex;gap:14px;align-items:center;margin:0 0 10px;font-size:12px;color:var(--text-secondary)}
.mtx-chart-card{padding:10px;width:100%;box-sizing:border-box}
.mtx-chart{display:block;width:100%;height:auto;background:var(--bg-tile);border-radius:6px}
.mtx-chart line.g{stroke:var(--border-panel);stroke-width:1;opacity:.6}
.mtx-chart text{fill:var(--text-secondary);font-size:10px;font-family:Consolas,"Courier New",monospace}
.mtx-chart text.yl{text-anchor:end;dominant-baseline:middle}
.mtx-chart text.xl{text-anchor:middle}
.mtx-chart text.empty{text-anchor:middle;font-size:13px}
.mtx-legend{display:flex;flex-wrap:wrap;gap:6px 16px;margin-top:8px;font-size:12px;color:var(--text-secondary)}
.mtx-legend i{display:inline-block;width:10px;height:10px;border-radius:2px;margin-right:5px;vertical-align:middle}
.mtx-legend b{color:var(--text-primary);font-family:Consolas,"Courier New",monospace}
.mtx-chart rect.s0,.mtx-legend i.s0{fill:#5ac88a;background:#5ac88a}
.mtx-chart rect.s1,.mtx-legend i.s1{fill:#f0b84f;background:#f0b84f}
.mtx-chart rect.s2,.mtx-legend i.s2{fill:#8fb6ea;background:#8fb6ea}
.mtx-chart rect.s3,.mtx-legend i.s3{fill:#e05a5a;background:#e05a5a}
.mtx-chart rect.s4,.mtx-legend i.s4{fill:#4f9cf0;background:#4f9cf0}
.mtx-chart rect.s5,.mtx-legend i.s5{fill:#b57ff0;background:#b57ff0}
.mtx-chart rect.s6,.mtx-legend i.s6{fill:#f08a4f;background:#f08a4f}
.mtx-chart rect.s7,.mtx-legend i.s7{fill:#4fd0d0;background:#4fd0d0}
.mtx-chart rect.s8,.mtx-legend i.s8{fill:#d05ab0;background:#d05ab0}
.mtx-chart rect.s9,.mtx-legend i.s9{fill:#a03030;background:#a03030}
.mtx-chart rect.s10,.mtx-legend i.s10{fill:#8891a8;background:#8891a8}
table.mtx-totals td.oc-good{color:var(--status-up);font-weight:700}
table.mtx-totals td.oc-bad{color:var(--status-down);font-weight:700}
table.mtx-totals td.oc-warn{color:var(--status-warn-text);font-weight:700}
table.mtx-totals td.oc-info{color:#8fb6ea;font-weight:700}


/* ---- Home: "O/S Live Metrics" panel (copy of the banner tiles; the MAIL panel is on Stats > Mail Metrics) in .mtx-left-col, grid column 1 of .mtx-sec-top. Six-column grid: CPU/Mem, then one tile per discovered disk (span 6/3/2 by count, class from diskSpanClass), then Load/Swap and Rx/Tx (span 3 each). Same rules as the header tiles ---- */
.mtx-sec-top > .mtx-left-col{grid-column:1;justify-self:stretch;align-self:start;display:flex;flex-direction:column;gap:16px}
.mtx-left-col .appliance-panel.mtx-metrics-panel{padding:0;overflow:hidden}
.mtx-metrics-panel .appliance-panel-body{padding:5px}
.mtx-home-tiles{display:grid;grid-template-columns:repeat(6,1fr);gap:5px}
.mtx-home-tiles .ap-s2{grid-column:span 2}
.mtx-home-tiles .ap-s3{grid-column:span 3}
.mtx-home-tiles .ap-s6{grid-column:span 6}
.mtx-home-tiles .ap-bmtile{min-width:0;height:44px;box-sizing:border-box;padding:3px 7px;display:flex;flex-direction:column;justify-content:center;background:var(--bg-tile);border:1px solid var(--border-panel);border-radius:5px}
.mtx-home-tiles .ap-bmtile-top{display:flex;align-items:baseline;justify-content:space-between;gap:5px}
.mtx-home-tiles .ap-bmtile-lbl{min-width:0;font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:.2px;color:#60a5fa;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mtx-home-tiles .ap-bmtile-val{font-size:13px;font-weight:600;line-height:1.1;white-space:nowrap;color:#f0f6fc}
.mtx-home-tiles .ap-bmtile svg{width:100%;height:13px;display:block;margin-top:2px}


/* ---- Services: restart in progress (home.js adds .svc-busy + fa-spin on a confirmed restart until the page reloads) ---- */
.svc-icon.svc-busy,.svc-icon.svc-busy:hover{color:var(--status-warn-text);background:transparent;cursor:progress}

/* ---- in-app confirm dialog (theme .appliance-modal; opened by confirm.js for every .mtx-confirm form) ---- */
.mtx-confirm-box{max-width:420px;border:1px solid var(--border-panel)}
.mtx-confirm-box h3{margin:0;font-size:15px;font-weight:700;color:var(--text-primary)}
.mtx-confirm-box h3 i{color:var(--brand-primary-lt);margin-right:4px}
.mtx-confirm-msg{font-size:13px;color:var(--text-secondary);padding:2px 0 4px}
.mtx-confirm-box .appliance-modal-actions button{min-width:88px}

/* ---- Documentation page ---- */
.appliance-header-right{display:flex;align-items:center;gap:10px}
.mtxdoc-head{display:flex;align-items:center;justify-content:space-between;gap:12px}
.mtxdoc-head h1{margin:0}
.mtxdoc-wrap{display:flex;gap:24px;align-items:flex-start}
.mtxdoc-toc{position:sticky;top:16px;flex:0 0 230px;max-height:calc(100vh - 32px);overflow-y:auto;border:1px solid var(--border-panel);border-radius:8px;padding:10px 12px;background:var(--bg-panel);font-size:13px}
.mtxdoc-toc a{display:block;padding:3px 6px;border-radius:4px;color:var(--text-primary);text-decoration:none}
.mtxdoc-toc a:hover{background:var(--bg-panel-hover);color:var(--text-primary)}
.mtxdoc-search{width:100%;box-sizing:border-box;margin:0 0 8px;padding:6px 8px;font-family:inherit;font-size:13px}
.mtxdoc-noresults{color:var(--text-secondary);font-size:12px;padding:4px 6px}
.mtxdoc-body{flex:1 1 auto;min-width:0;max-width:900px}
.mtxdoc-body h2{margin-top:34px;padding-top:10px;border-top:1px solid var(--border-panel);color:var(--text-primary);display:flex;align-items:center;gap:9px;font-size:1.3rem}
.mtxdoc-body h2:first-of-type{border-top:none;margin-top:8px}
.mtxdoc-body h2 i{color:var(--brand-primary-lt);font-size:0.85em}
.mtxdoc-body h3{margin-top:20px;color:var(--text-primary);font-size:1.05rem}
.mtxdoc-body h3 i{color:var(--brand-primary-lt);margin-right:6px;font-size:0.9em}
.mtxdoc-body p,.mtxdoc-body li{color:var(--text-primary);line-height:1.65}
.mtxdoc-body code{background:var(--bg-panel-alt);padding:1px 5px;border-radius:3px;font-family:Consolas,monospace;font-size:0.9em}
.mtxdoc-body pre{background:var(--bg-panel-alt);border:1px solid var(--border-panel);border-radius:6px;padding:12px;overflow-x:auto}
.mtxdoc-body pre code{background:none;padding:0}
.mtxdoc-body table{border-collapse:collapse;margin:12px 0;width:100%}
.mtxdoc-body th,.mtxdoc-body td{border:1px solid var(--border-panel);padding:6px 10px;text-align:left;font-size:13px;vertical-align:top}
.mtxdoc-body th{background:var(--bg-panel-alt)}
.mtxdoc-verbadge{display:inline-block;background:var(--bg-panel-alt);border:1px solid var(--brand-primary-lt);border-radius:4px;padding:2px 10px;font-size:13px}
.mtxdoc-note{border-left:3px solid var(--brand-primary-lt);background:var(--bg-panel-alt);padding:8px 12px;border-radius:0 6px 6px 0;margin:12px 0}
.mtxdoc-tip{border-left:3px solid #2d8a4a;background:var(--bg-panel-alt);padding:8px 12px;border-radius:0 6px 6px 0;margin:12px 0}
.mtxdoc-warn{border-left:3px solid #b8860b;background:var(--bg-panel-alt);padding:8px 12px;border-radius:0 6px 6px 0;margin:12px 0}
.mtxdoc-m{display:inline-block;min-width:54px;text-align:center;padding:2px 8px;border-radius:4px;font-size:11px;font-weight:700;letter-spacing:.04em;color:#fff}
.mtxdoc-m-get{background:#2d8a4a}.mtxdoc-m-post{background:#2f7ac4}.mtxdoc-m-put{background:#b8860b}.mtxdoc-m-patch{background:#7d4fb0}.mtxdoc-m-delete{background:#c0392b}
.mtxdoc-ep{border:1px solid var(--border-panel);border-radius:6px;margin:5px 0;background:var(--bg-panel)}
.mtxdoc-ep summary{cursor:pointer;padding:7px 12px;display:flex;align-items:center;gap:10px;list-style:none}
.mtxdoc-ep summary::-webkit-details-marker{display:none}
.mtxdoc-ep summary::before{content:"\25B8";color:var(--text-secondary);transition:transform .12s}
.mtxdoc-ep[open] summary::before{transform:rotate(90deg)}
.mtxdoc-epm{margin-left:auto}
.mtxdoc-epd{padding:6px 12px 10px 30px;color:var(--text-primary);font-size:13px;line-height:1.6;border-top:1px solid var(--border-panel)}

/* ---- Network page: appliance markup/classes (appliance-form-table, appliance-table, appliance-tag ...);
   only the wrapper and the pending banner are MailtronX's own ---- */
.mtx-net-wrap{max-width:60%;margin:0 auto;display:flex;flex-direction:column;gap:12px}
.mtx-net-banner{display:flex;align-items:center;gap:12px;padding:8px 12px;border-color:var(--status-warn-text);color:var(--text-primary)}
.mtx-net-banner-actions{margin-left:auto;display:flex;gap:8px}

/* theme: every page selects the appliance stylesheet's navy named theme via <html data-theme="dark" data-theme-name="navy"> (templates.go head); never hard-code dark fills, use the tokens */

/* ---- no row striping anywhere in MailtronX: overrides the theme's .appliance-table odd/even fills ---- */
.appliance-table tbody tr:nth-child(odd) td,.appliance-table tbody tr:nth-child(even) td{background:transparent}

/* Date & Time / NTP state table: value cells read left-aligned as on the original page (the global td rule centres every table) */
#tn-state td:not(.appliance-label){text-align:left}
#tn-state td.appliance-label{text-align:right}
/* Date & Time / NTP panel titles: title left, timezone tag centred, ENCRYPTED right; state panel: title left, sync pill right */
.appliance-panel-title.tn-title3{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;text-align:left}
.appliance-panel-title.tn-title3>:first-child{justify-self:start}
.appliance-panel-title.tn-title3>:nth-child(2){justify-self:center}
.appliance-panel-title.tn-title3>:last-child{justify-self:end}
.appliance-panel-title.tn-title2{display:flex;align-items:center;justify-content:space-between;text-align:left}
/* Date & Time / NTP: both panels 10% wider than their content-driven size (450 / 558 px measured) */
.tn-grid>.appliance-panel:first-child{min-width:495px}
.tn-grid>.appliance-panel:last-child{min-width:614px}
/* list pages: one-paragraph description under the title */
.mtx-page-desc{max-width:70rem;margin:0 auto 12px;text-align:left;line-height:1.5}
/* Control Services page: same table as the Home Services panel, panel sized to it */
/* Control Services: the Services box is twice its content width: 620px on the reference render, table fills it */
.mtx-svc-page{width:620px;max-width:100%;margin:0 auto}
.mtx-svc-page table.mtx-services{width:100%}
.mtx-svc-page table.mtx-services th,.mtx-svc-page table.mtx-services td{padding-left:16px;padding-right:16px}

/* ---- Stats > Mail Metrics: the MAIL Live Metrics panel (moved from Home) above the Mail Flow / Dispositions /
   Outcomes boxes; the live panel takes the block's width (two 312px boxes + the 16px gap). ---- */
.mtx-mailmetrics{align-items:center}
.mtx-mailmetrics .mtx-mm-live{width:640px;max-width:100%}
.mtx-mm-live .appliance-panel.mtx-metrics-panel{padding:0;overflow:hidden}

/* Quota Groups: the "Edit group" card replaces the add-bar directly above the Groups table
   (centered and separated from the table below). .card has no width or
   margin rules of its own (used elsewhere as a flex tile), so this card -- constrained to 48rem by
   its own inline style -- sat flush left with zero gap to the table. Centered + a clear gap below. */
.mtx-edit-card{margin:0 auto 24px}

/* Mail Groups: Add-group bar shrunk to half the page and centered. Scoped to
   this one form -- .addbar is shared by every other add-bar on the site and must stay untouched. */
.mtx-groups-addbar{width:50%;margin:1rem auto;justify-content:center}
/* User/Domain/Name all the same width: measured live at 207/109/207px;
   145px = User shrunk 30% (207*0.7), which also widens Domain and equalizes all three. */
.mtx-groups-addbar input[name=user],.mtx-groups-addbar select[name=domain],.mtx-groups-addbar input[name=name]{flex:0 0 181px;width:181px;min-width:0}

/* Action columns site-wide (shrink to fit, buttons line up). Every table with 2+ Action buttons
   now gives each button its OWN real <td> (colspan="N" on the "Action" <th>), instead of cramming
   several buttons into one cell -- so the browser's native table-layout:auto sizes and aligns every
   button column by itself, across every row, to that column's own real content. No fixed pixel value
   anywhere; a table with short labels never carries a wider column than it needs, and a row that
   hides one button (Admins' own row has no Delete; Quota Groups' Default has no Delete) still has
   the right number of real <td> cells -- an empty one costs nothing and needs no placeholder.
   A single-button table (Group Members, Lists) keeps one <td>, marked .mtx-th-action, width:1% (the
   standard table-layout:auto shrink-to-content trick: other columns without a width hint absorb the
   rest of the row). Control Services is separate: one icon-only button per row, its own
   .svc-act/table.mtx-services rule, nothing to misalign or resize. Checked table by table: a couple
   of "Action" headers elsewhere in the app are plain data labels, not button columns, and were left
   alone throughout. */
.mtx-th-action{width:1%}
/* Real per-button Action columns (2026-09-28 restructure): each carries width:1% so it shrinks to
   just barely fit its own button -- table{width:100%} means leftover row width has to go somewhere,
   and only genuinely flexible columns (Description, Comment...) should absorb it, never these. Every
   td already has a full border (base .td rule); adjacent action cells drop the border between them
   so the group reads as one bordered box, the way a single shared cell looked before the restructure
   -- not a new grid of lines around each button, which was never asked for. */
.mtx-act{width:1%}
.mtx-act + .mtx-act{border-left:none}
table.mtx-services th:last-child{width:1%}

/* Quota Groups: the Add-group row is a real row of the same table, directly under the header, so
   its fields sit in exactly the columns they add to below -- no separate element with guessed
   widths to keep in sync. Inputs/selects fill their cell; a faint tint marks
   the row as input, not data. */
.mtx-add-row td{background:var(--bg-tile)}
.mtx-add-row input,.mtx-add-row select{width:100%;box-sizing:border-box}

/* Quota Groups: more breathing room between the page description and the table below it -- the shared .mtx-page-desc bottom margin (12px) is fine elsewhere, but this table's
   first row is now the Add-group inputs, not a header, so 12px read as cramped. */
.mtx-qg-table{margin-top:26px}  /* adjacent margins collapse to the larger value, not additive: 26px here (not 14) is what actually widens the 12px gap from .mtx-page-desc */

/* Quota Groups: enforcement status line (state read live from the appliance) + apply button */
.mtx-qg-enforce{display:flex;align-items:center;flex-wrap:wrap;gap:.8rem;margin:0 0 14px}
.mtx-qg-enforce-k{color:var(--text-tile-lbl);font-size:11px;text-transform:uppercase;letter-spacing:.3px;font-weight:700}

/* Submission (SMTP AUTH): status panel sized to its content, centred; action row */
.mtx-sub-panel{max-width:62rem;margin:0 auto}
.mtx-sub-actions{display:flex;gap:.6rem;padding:10px 12px}

/* Country / Geo list pages: enforcement, scores and match counts above the list */
.mtx-geo-panel{display:flex;flex-direction:column;gap:.5rem;margin:0 0 14px;padding:.6rem .9rem;border:1px solid var(--border-panel);background:var(--bg-tile);border-radius:6px}
.mtx-geo-row{display:flex;align-items:center;flex-wrap:wrap;gap:.7rem;margin:0}
.mtx-geo-k{color:var(--text-tile-lbl);font-size:11px;text-transform:uppercase;letter-spacing:.3px;font-weight:700;min-width:6.5rem}

/* Logging Options page */
.mtx-lg-grid{margin:0 auto;grid-template-columns:auto auto;justify-content:center;align-items:stretch}
.mtx-lg-inline{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap;margin:0 0 10px}
.mtx-lg-details{margin:0 0 10px;max-width:420px}
.mtx-lg-details summary{cursor:pointer}
.mtx-lg-details textarea{width:396px;max-width:396px;margin-top:6px}
.mtx-tag-ok{color:#4ade80;background:rgba(74,222,128,0.10);border-color:rgba(74,222,128,0.45);font-weight:600}

/* Backups page */
.mtx-bk-tiles{display:flex;gap:12px;flex-wrap:wrap;margin:0 0 14px}
.mtx-bk-tiles .card{min-width:14rem}
.mtx-bk-panel{margin:0 0 14px}
.mtx-bk-panel .appliance-panel-title{display:flex;align-items:center;gap:.8rem;flex-wrap:wrap}
.mtx-bk-panel .appliance-panel-title form.inline{margin-left:auto;display:flex;gap:.4rem;align-items:center}
.mtx-bk-desc{margin:0 0 10px;font-size:12.5px;line-height:1.45}
.mtx-bk-form{display:flex;align-items:center;flex-wrap:wrap;gap:.8rem;margin:0 0 10px}
.mtx-bk-grid{display:grid;grid-template-columns:1fr;gap:0}
.mtx-bk-panel table{width:100%}
.mtx-bk-panel td.mtx-act{white-space:nowrap}
.mtx-bk-panel td.mtx-act form.inline{display:inline-flex;gap:.3rem;align-items:center}
.mtx-bk-sub{font-size:.95rem;margin:12px 0 6px}
.mtx-bk-dest{display:flex;flex-direction:column;gap:.5rem;margin:0 0 6px}
.mtx-bk-row{display:flex;align-items:center;flex-wrap:wrap;gap:.8rem}
.mtx-bk-row label.muted{display:inline-flex;align-items:center;gap:.4rem}

/* Patches page */
.mtx-pt-log{font-size:11px;white-space:pre-wrap;max-height:14rem;overflow:auto;background:var(--bg-tile);border:1px solid var(--border-panel);padding:6px;margin:4px 0 0}
#pt-events details{display:block;margin-top:4px}

/* Administrator roles */
.mtx-role{display:inline-block;margin-left:.35rem;padding:1px 7px;border-radius:999px;font-size:10px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;background:var(--bg-panel-alt);border:1px solid var(--brand-primary-border);color:var(--text-secondary)}
.badge.muted{background:var(--bg-panel-alt);color:var(--text-secondary);border-color:var(--border-panel)}
.mtx-admin-modify select,.mtx-admin-modify input{margin:0}
/* A read-only account sees every page; its change controls are disabled in the browser as a courtesy.
   The server refuses the change regardless. The change-password form stays usable. */
html[data-role="readonly"] main form[method="post"]:not([action="/change-password"]) button,
html[data-role="readonly"] main form[method="post"]:not([action="/change-password"]) input[type="submit"]{opacity:.45;pointer-events:none}

/* API Tokens: the one-time display of a new secret */
.mtx-newtoken{max-width:60rem;margin:0 0 1rem}
.mtx-newtoken code{display:block;margin-top:.4rem;padding:.5rem .7rem;font-size:1.05rem;word-break:break-all;background:var(--bg-tile);border:1px solid var(--brand-primary-border);border-radius:4px;user-select:all}

/* Users page: two-column lower half (LDAP + mappings | API tokens), stacks on narrow screens */
.mtx-users-card{margin-bottom:1rem}
.mtx-users-grid{display:grid;grid-template-columns:1fr 1fr;gap:1rem;align-items:start}
@media (max-width:1200px){.mtx-users-grid{grid-template-columns:1fr}}
.mtx-form3{display:grid;grid-template-columns:9rem minmax(14rem,1fr) minmax(10rem,1fr);gap:.45rem .8rem;align-items:center;margin:.4rem 0 .6rem}
.mtx-form3>label:first-child,.mtx-form3>label:nth-child(3n+1){color:var(--text-secondary);font-weight:600;font-size:.85rem}
.mtx-form3 input[type=text],.mtx-form3 input[type=password]{width:100%;box-sizing:border-box}
.mtx-form3 .muted{font-size:.8rem}
#map-table input,#map-table select{margin:0}