/* BeaconWatch — enterprise UI baseline (per Autonomy/DESIGN_STANDARD.md) */
:root{
  --app-bg:#ECEFF3; --workspace:#F4F8FF; --toolbar:#DCE9FF; --header-navy:#1F365C;
  --row:#FFFFFF; --zebra:#E9F1FD; --grid:#D7DFEA; --hover:#B7D4FF; --selected:#9FC5FF;
  --primary:#3B82F6; --primary-d:#2f6fe0; --accent:#EA580C;
  --text:#1e2a3a; --muted:#5b6b80; --border:#D7DFEA;
  --heading:#1F365C; --field-bg:#E8F1FF; --field-border:#b9d0f1; --input-border:#aebfd6;
  --ok:#06b247; --warn:#f7c31f; --fail:#db3a34; --unk:#64748b; --miss:#a855f7; --pending:#9aa7b8;
  --radius:8px;
  --font-body:'Inter','Segoe UI',system-ui,Roboto,sans-serif;
  --font-head:'Poppins','Inter',system-ui,sans-serif;
  --font-title:'Open Sans','Segoe UI',system-ui,sans-serif;
}
/* Dark palette: applied when the OS prefers dark (unless the user forced light),
   or when the user explicitly toggles dark via data-theme. */
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --app-bg:#0B1220; --workspace:#111C30; --toolbar:#182742; --header-navy:#1F365C;
    --row:#16243A; --zebra:#1C3055; --grid:#2B3E5F; --hover:#355D96; --selected:#4472B8;
    --text:#e6edf6; --muted:#9fb0c6; --border:#2B3E5F;
    --heading:#cfe0f7; --field-bg:#15243c; --field-border:#33507c; --input-border:#3a557f;
  }
}
:root[data-theme="dark"]{
  --app-bg:#0B1220; --workspace:#111C30; --toolbar:#182742; --header-navy:#1F365C;
  --row:#16243A; --zebra:#1B2B45; --grid:#2B3E5F; --hover:#355D96; --selected:#4472B8;
  --text:#e6edf6; --muted:#9fb0c6; --border:#2B3E5F;
  --heading:#cfe0f7; --field-bg:#15243c; --field-border:#33507c; --input-border:#3a557f;
}
*{box-sizing:border-box}
html,body{margin:0}
body{font:13.5px/1.5 var(--font-body);background:var(--app-bg);color:var(--text);-webkit-font-smoothing:antialiased}
a{color:var(--primary);text-decoration:none}a:hover{text-decoration:underline}
code{background:var(--zebra);border:1px solid var(--border);padding:1px 5px;border-radius:4px;font-size:.9em}
.muted{color:var(--muted)}
h1{font-family:var(--font-head);font-size:21px;margin:.1em 0 .4em;font-weight:700;color:var(--heading)}
/* Page title band — matches the operations-portal title line (Open Sans, baseline
   row, title left + muted context pushed right, separated from content by a rule).
   Scoped to .wrap so login/auth-card h1 keep their own centered styling. */
.wrap>h1{font-family:var(--font-title);font-size:20px;font-weight:700;letter-spacing:-.01em;
  color:var(--heading);display:flex;align-items:baseline;gap:10px;
  margin:2px 0 16px;padding-bottom:10px;border-bottom:1px solid var(--border)}
.wrap>h1 .muted{margin-left:auto;font-weight:400;font-size:13px;font-family:var(--font-body)}
h2{font-family:var(--font-head);font-size:15px;margin:1.1em 0 .5em;font-weight:600;letter-spacing:.01em;color:var(--heading)}

/* operator impersonation banner */
.imp-banner{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;
  background:linear-gradient(90deg,#fde68a,#fca5a5);color:#5c3f07;border-bottom:1px solid #e0a008;
  padding:9px 16px;font-size:13px;font-weight:600}
.imp-banner .muted{color:#7a5a1a;font-weight:400}
.imp-banner .btn{background:#1F365C;color:#fff;border:0;padding:6px 13px;border-radius:6px;font-size:12.5px;font-weight:600;cursor:pointer}
.imp-banner .btn:hover{background:#1a2c47}

/* top navigation */
.topbar{display:flex;align-items:center;gap:4px;background:var(--header-navy);color:#fff;padding:0 16px;height:46px;position:sticky;top:0;z-index:50}
.topbar .brand{display:inline-flex;align-items:center;gap:7px;font-family:var(--font-head);color:#fff;font-weight:700;font-size:15px;margin-right:14px}
.topbar .brand .brand-logo{width:24px;height:24px;display:block}
.topbar nav{display:flex;gap:2px}
.topbar nav a{color:#e6eefb;padding:6px 12px;border-radius:6px;font-size:13px;background:rgba(125,165,225,.20)}
.topbar nav a:hover{background:rgba(125,165,225,.40);text-decoration:none;color:#fff}
.topbar .who{margin-left:auto;color:#aebfd6;font-size:12.5px}
.topbar .who a{color:#fff}
.wrap{max-width:1180px;margin:18px auto;padding:0 16px}

/* toolbar (search + actions) */
.toolbar{display:flex;align-items:center;gap:10px;background:var(--toolbar);border:1px solid var(--border);
         border-radius:var(--radius);padding:10px 12px;margin:10px 0}
.toolbar .search{flex:1;display:flex;align-items:center;gap:8px;background:var(--row);border:1px solid var(--border);
                 border-radius:6px;padding:7px 10px}
.toolbar .search input{border:0;outline:0;background:transparent;width:100%;font:inherit;color:var(--text)}
.btn{display:inline-flex;align-items:center;gap:6px;background:var(--primary);color:#fff;border:0;border-radius:6px;
     padding:8px 14px;font:inherit;font-weight:600;cursor:pointer}
.btn:hover{background:var(--primary-d);text-decoration:none;color:#fff}
.btn.ghost{background:transparent;color:var(--text);border:1px solid var(--border)}
.btn.ghost:hover{background:var(--hover)}
.form-actions{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:8px}
/* icon picker (categories) — choose one emoji from a curated set, no upload */
.iconpick{display:flex;flex-wrap:wrap;gap:6px}
.iconpick .ic{position:relative;cursor:pointer}
.iconpick .ic input{position:absolute;opacity:0;width:0;height:0}
.iconpick .ic span{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;font-size:19px;
  border:1px solid var(--input-border);border-radius:8px;background:var(--row)}
.iconpick .ic .none{width:auto;padding:0 12px;font-size:12px;color:var(--muted)}
.iconpick .ic img{width:22px;height:22px;display:block}
.cat-ico{width:16px;height:16px;vertical-align:-3px}
.iconpick .ic:hover span{border-color:var(--primary)}
.iconpick .ic:has(input:checked) span{border-color:var(--primary);background:var(--hover);box-shadow:inset 0 0 0 2px var(--primary)}

.mon-actions{margin-top:14px;padding-top:14px;border-top:1px solid var(--border)}
.mon-actions-lbl{width:100%;font-size:11px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.05em}
/* Action toolbar above the Monitor title bar (Save + clone/rotate/disable/ack/delete) */
.mon-actions-top{margin:0 0 14px;padding:0 0 14px;border-top:0;border-bottom:1px solid var(--border)}

/* data grid */
.grid-wrap{background:var(--workspace);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden}
table.grid{width:100%;border-collapse:collapse;background:transparent}
table.grid thead th{background:var(--header-navy);color:#fff;text-align:left;
  font-size:11.5px;text-transform:uppercase;letter-spacing:.04em;font-weight:600;padding:12px 12px;white-space:nowrap}
table.grid tbody td{padding:9px 12px;border-bottom:1px solid var(--grid);vertical-align:middle}
table.grid tbody tr{background:var(--row)}
table.grid tbody tr:nth-child(even){background:var(--zebra)}
table.grid tbody tr:hover{background:var(--hover)}
table.grid tbody tr:last-child td{border-bottom:0}
td.subj{max-width:340px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
td.actions{white-space:nowrap;text-align:right}
.rowlink{font-weight:600}
.empty{padding:22px;text-align:center;color:var(--muted)}

/* badges */
.badge{display:inline-block;padding:2px 9px;border-radius:3px;font-size:10.5px;font-weight:700;color:#fff;letter-spacing:.02em}
.badge-success{background:var(--ok)}.badge-warning{background:var(--warn);color:#3a2f00}
.badge-failure{background:var(--fail)}.badge-missing{background:var(--miss)}
.badge-unknown{background:var(--unk)}.badge-pending{background:var(--pending)}
.badge-test{background:var(--accent)}

/* icon-only action button */
.icon-btn{font-size:16px;line-height:1;padding:0 4px}
.icon-btn:hover{text-decoration:none;opacity:.7}

/* confirm modal */
.modal-backdrop{position:fixed;inset:0;background:rgba(15,25,45,.5);display:flex;align-items:center;justify-content:center;z-index:1000;padding:20px}
.modal-backdrop[hidden]{display:none}
.modal{background:var(--row);border:1px solid var(--border);border-radius:12px;max-width:440px;width:100%;padding:22px;box-shadow:0 20px 50px rgba(0,0,0,.35)}
.modal-title{font-family:var(--font-head);font-size:17px;font-weight:700;color:var(--heading);margin:0 0 10px}
.modal-body{font-size:13.5px;color:var(--text);line-height:1.55}
.modal-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:18px}

/* compact status icon (email log) */
.sicon{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;border-radius:3px;
  font-size:11px;font-weight:700;color:#fff;line-height:1}
.sicon-success{background:var(--ok)} .sicon-warning{background:var(--warn);color:#3a2f00}
.sicon-failure{background:var(--fail)} .sicon-unknown{background:var(--unk)}
.sicon-missing{background:var(--miss)} .sicon-pending{background:var(--pending)}

/* stat cards (kept modest, not card-heavy) */
.cards{display:flex;gap:10px;flex-wrap:wrap;margin:10px 0}
.card{flex:1;min-width:120px;background:var(--row);border:1px solid var(--border);border-radius:var(--radius);
      padding:11px 14px;text-align:center}
.card .num{display:block;font-size:23px;font-weight:700;line-height:1.1}
.card.lead{cursor:pointer}.card.lead .num{color:var(--primary)}.card.lead:hover{border-color:var(--primary)}
.card.ok .num{color:var(--ok)}.card.warn .num{color:var(--warn)}.card.fail .num{color:var(--fail)}
.card.miss .num{color:var(--miss)}.card.unk .num{color:var(--unk)}

/* dashboard KPI + status cards */
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:12px;margin:12px 0}
.stats{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px;margin:12px 0}
@media (max-width:1100px){.stats{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:600px){.stats{grid-template-columns:repeat(2,minmax(0,1fr))}}
.stat{display:flex;flex-direction:column;gap:3px;background:var(--row);border:1px solid var(--border);
  border-radius:var(--radius);padding:14px 16px;color:var(--text);
  box-shadow:0 1px 3px rgba(20,40,80,.06);transition:transform .08s ease,box-shadow .08s ease}
a.stat:hover{transform:translateY(-1px);box-shadow:0 5px 14px rgba(20,40,80,.13);text-decoration:none}
.stat-num{font-family:var(--font-head);font-size:30px;font-weight:700;line-height:1.05}
.stat-label{font-size:11.5px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--text)}
.stat-sub{font-size:11px;color:var(--muted)}
/* gradient-tinted status cards — rgba composites over light/dark page bg */
.kpis .stat{background:linear-gradient(135deg,rgba(59,130,246,.10),rgba(59,130,246,.24));border-color:rgba(59,130,246,.32)} .kpis .stat-num{color:var(--primary)}
.stat-success{background:linear-gradient(135deg,rgba(6,178,71,.13),rgba(6,178,71,.30));border-color:rgba(6,178,71,.38)} .stat-success .stat-num{color:var(--ok)}
.stat-warning{background:linear-gradient(135deg,rgba(247,195,31,.16),rgba(247,195,31,.34));border-color:rgba(247,195,31,.42)} .stat-warning .stat-num{color:#b8860b}
.stat-failure{background:linear-gradient(135deg,rgba(219,58,52,.09),rgba(219,58,52,.22));border-color:rgba(219,58,52,.30)} .stat-failure .stat-num{color:var(--fail)}
.stat-missing{background:linear-gradient(135deg,rgba(168,85,247,.10),rgba(168,85,247,.24));border-color:rgba(168,85,247,.30)} .stat-missing .stat-num{color:var(--miss)}
.stat-logs{background:linear-gradient(135deg,rgba(100,116,139,.10),rgba(100,116,139,.20));border-color:rgba(100,116,139,.28)} .stat-logs .stat-num{color:#475569}
.stat-unknown{background:linear-gradient(135deg,rgba(100,116,139,.10),rgba(100,116,139,.22));border-color:rgba(100,116,139,.28)} .stat-unknown .stat-num{color:var(--unk)}
.stat-pending{background:linear-gradient(135deg,rgba(154,167,184,.10),rgba(154,167,184,.20))} .stat-pending .stat-num{color:var(--muted)}

/* filters (log status chips) */
.filters{display:flex;gap:6px;flex-wrap:wrap;margin:8px 0 12px}
.filters a{padding:4px 12px;border:1px solid var(--border);border-radius:999px;font-size:12.5px;color:var(--muted);background:var(--row)}
.filters a.on{background:var(--primary);color:#fff;border-color:var(--primary)}
.filters .acct-filter{display:inline-flex;gap:6px;align-items:center;margin-left:auto}
.filters .acct-filter select{padding:4px 8px;border:1px solid var(--input-border);border-radius:6px;background:var(--row);color:var(--text);font-size:12.5px}
.filters .acct-filter .btn{padding:5px 12px;font-size:12.5px}

/* forms */
.flash{padding:9px 12px;border-radius:var(--radius);margin:10px 0;font-size:13.5px}
.flash.ok{background:#dcfce7;color:#14532d}.flash.err{background:#fee2e2;color:#991b1b}
.flash.addr{background:#e0f2fe;color:#075985}.flash.addr code{background:#fff}
.formcard{background:var(--row);border:1px solid var(--input-border);border-radius:var(--radius);padding:18px;margin:10px 0;box-shadow:0 1px 3px rgba(20,40,80,.07)}
.grid-form{display:grid;grid-template-columns:repeat(2,1fr);gap:12px 18px;align-items:end}
.grid-form label{display:flex;flex-direction:column;font-size:12.5px;font-weight:600;color:var(--text);gap:4px}
.grid-form input,.grid-form select,.grid-form textarea{padding:8px 9px;border:1px solid var(--input-border);border-radius:6px;font:inherit;background:var(--row);color:var(--text)}
.grid-form input:focus,.grid-form select:focus,.grid-form textarea:focus,.rulerow input:focus,.rulerow select:focus{outline:2px solid var(--primary);outline-offset:0;border-color:var(--primary)}
.grid-form button{grid-column:1/-1;justify-self:start;background:var(--primary);color:#fff;border:0;border-radius:6px;padding:9px 18px;font-weight:600;cursor:pointer}
.grid-form button:hover{background:var(--primary-d)}
.grid-form label.check{flex-direction:row;align-items:center;gap:8px}
.grid-form label.check input{width:auto}
.rulerow input,.rulerow select{border:1px solid var(--input-border);background:var(--row)}
.rulerow{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:7px 0;font-size:12.5px}
.rulerow input{flex:1;min-width:200px;padding:6px;border:1px solid var(--border);border-radius:6px;background:var(--row);color:var(--text)}
.rulerow select{padding:6px;border:1px solid var(--border);border-radius:6px;background:var(--row);color:var(--text)}
.grid-form.inline-add{margin-top:8px;background:var(--zebra);padding:12px;border-radius:6px}
@media(max-width:680px){.grid-form{grid-template-columns:1fr}}

/* detail */
.detail-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:8px 24px;background:var(--row);border:1px solid var(--border);border-radius:var(--radius);padding:14px;margin:10px 0}
.detail-grid dt{font-size:11.5px;color:var(--muted);text-transform:uppercase;letter-spacing:.03em}
.detail-grid dd{margin:0 0 6px}
.detail-grid.plain{background:transparent;border:0;padding:8px 12px;margin:0;border-radius:0}
.detail-grid .full{grid-column:1/-1}
/* key/value detail table (event detail, etc.) — scannable label : value rows */
.kv{width:100%;border-collapse:collapse;font-size:13.5px}
.kv th{text-align:left;vertical-align:top;width:150px;color:var(--muted);font-weight:600;
  text-transform:uppercase;letter-spacing:.03em;font-size:11px;padding:10px 16px 10px 0;white-space:nowrap;
  border-bottom:1px solid var(--border)}
.kv td{padding:10px 0;border-bottom:1px solid var(--border);color:var(--text);vertical-align:top;word-break:break-word}
.kv tr:last-child th,.kv tr:last-child td{border-bottom:0}
.kv .kv-strong{font-weight:700;font-size:15px;color:var(--heading);font-family:var(--font-head)}
.kv .kv-mono{font-family:Consolas,Menlo,monospace;font-size:12px}
.kv code{font-size:12.5px}

.bodytext{background:#0f172a;color:#e2e8f0;padding:12px;border-radius:var(--radius);white-space:pre-wrap;max-height:340px;overflow:auto}
.emlframe{width:100%;height:420px;border:1px solid var(--border);border-radius:var(--radius);background:#fff}

/* row action links + inline forms */
form.inline{display:inline;margin:0}
a.link,button.link{background:none;border:0;color:var(--primary);cursor:pointer;padding:0 6px;font-size:12.5px;text-decoration:none}
a.link:hover,button.link:hover{text-decoration:underline}

/* paging */
.paging{display:flex;align-items:center;justify-content:space-between;background:var(--toolbar);border:1px solid var(--border);
        border-top:0;border-radius:0 0 var(--radius) var(--radius);padding:8px 12px;font-size:12.5px;color:var(--muted)}

/* login */
.login-body{display:grid;place-items:center;min-height:100vh;background:var(--header-navy)}
.login-card{background:var(--row);padding:26px;border-radius:12px;width:320px;display:flex;flex-direction:column;gap:12px;box-shadow:0 12px 34px rgba(0,0,0,.3)}
.login-card h1{text-align:center;font-size:19px;margin:0 0 4px}
.login-card label{display:flex;flex-direction:column;font-size:12.5px;color:var(--muted);gap:4px}
.login-card input{padding:9px;border:1px solid var(--border);border-radius:7px;font-size:14px}
.login-card button{padding:10px;background:var(--primary);color:#fff;border:0;border-radius:7px;font-weight:600;cursor:pointer}
.login-card button:hover{background:var(--primary-d)}
.form-error{background:#fee2e2;color:#991b1b;padding:8px 10px;border-radius:7px;margin:0;font-size:13px}

/* clickable data rows (design standard: open the record by clicking the row) */
table.grid tbody tr.clickrow{cursor:pointer}
table.grid tbody tr.clickrow td.actions{cursor:default}

/* schedule day-pickers */
.sched .rulerow{align-items:center;gap:10px}
/* narrow controls must not stretch to the rulerow's flex:1 / min-width:200px */
.sched input[type=number],.sched input[type=time]{flex:0 0 auto;min-width:0}
.sched input[name=expected_by_time]{width:8.5em}
.sched input[name=grace_minutes]{width:5em}
.sched select{margin:0 2px}
/* day-of-week picker: compact toggle pills, one tidy row */
.dow-strip{display:flex;gap:6px;flex-wrap:wrap}
.dowpill{position:relative;display:inline-flex;align-items:center;justify-content:center;min-width:48px;
  padding:7px 12px;border:1px solid var(--input-border);border-radius:8px;background:var(--row);
  color:var(--text);font-size:12.5px;font-weight:600;cursor:pointer;user-select:none;
  transition:background .08s ease,border-color .08s ease}
.dowpill input{position:absolute;opacity:0;width:0;height:0;margin:0}
.dowpill:hover{border-color:var(--primary)}
.dowpill:has(input:checked){background:var(--primary);border-color:var(--primary);color:#fff}

/* triggers (classification rows) — main line + collapsible Routing panel */
.trigrow{display:block;padding:6px 0}
#triggerRows .trigrow{border-bottom:1px solid var(--field-border)}
#triggerRows .trigrow:last-of-type{border-bottom:0}
.trig-main{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.trigrow .trig-when{font-weight:600;color:var(--muted);font-size:12px}
.trigrow .trig-arrow{color:var(--muted);font-size:14px;white-space:nowrap}
.trig-val{width:200px;min-width:120px;flex:0 0 auto}          /* matching value: ~half width, scrolls long input */
.trig-main select{min-width:auto}
.matchrow input[name="match_value[]"]{width:240px;min-width:140px;flex:0 0 auto}  /* narrow the matching field too */

/* monitor form: compact header row + sectioned panels */
.mon-head{display:flex;align-items:flex-end;gap:18px;flex-wrap:wrap}
.mon-name{flex:0 1 460px;min-width:220px;display:flex;flex-direction:column;gap:5px}
.mon-name label{font-size:12px;font-weight:600;color:var(--text)}
.mon-name input{font-family:var(--font-head);font-size:17px;font-weight:600;padding:10px 12px;border:1px solid var(--input-border);border-radius:8px;background:var(--row);color:var(--text);width:100%}
.mon-active{display:flex;flex-direction:column;align-items:center;gap:6px}
.mon-active .ft-label{font-size:12px;font-weight:600;color:var(--text)}
.mon-head{align-items:flex-end}
.mon-stats{display:flex;align-items:stretch;gap:10px;margin-left:auto}      /* both tiles equal height */
.mon-statbox{flex:0 1 auto;flex-direction:row;align-items:center;gap:11px;width:auto;min-width:150px;padding:10px 14px;margin-left:0}
.mon-statbox .stat-num{font-size:26px;flex:0 0 auto}                        /* number to the left of the info */
.mon-statbox .sb-info{display:flex;flex-direction:column;gap:1px;min-width:0;text-align:left}
.mon-statbox .stat-sub{font-size:10.5px}
/* compact inline-label meta rows */
.mon-meta{display:grid;grid-template-columns:1fr 1fr;gap:10px 22px;margin-top:14px}
.mon-meta .full{grid-column:1/-1}
.mon-meta label{display:grid;grid-template-columns:86px 1fr;align-items:center;gap:10px;font-size:12.5px;font-weight:600;color:var(--text)}
.mon-meta label .lbl{line-height:1.2}
.mon-meta label .muted{font-weight:400}
.mon-meta label select,.mon-meta label input{font-weight:400}
.grid-form .fsec{grid-column:1/-1;border:1px solid var(--field-border);border-radius:8px;overflow:hidden;margin:4px 0;background:var(--field-bg)}
.fsec-h{background:var(--header-navy);color:#fff;font-family:var(--font-head);font-weight:600;font-size:12.5px;padding:8px 12px}
.fsec-b{padding:8px 12px}
.fsec-b .rulerow{margin:5px 0}
.trig-status{font-weight:700}
.trig-status.is-success{color:var(--ok)}
.trig-status.is-warning{color:#b8860b}
.trig-status.is-failure{color:var(--fail)}
.trig-right{display:inline-flex;align-items:center;gap:9px;margin-left:auto}
.trig-notify-lbl{font-size:11px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.04em}
.trig-cfg-btn{font-size:12.5px;white-space:nowrap}
.trig-cfg{display:none;align-items:center;gap:16px;flex-wrap:wrap;margin:8px 0 2px 42px;padding:9px 13px;
  background:var(--row);border:1px solid var(--field-border);border-radius:7px;font-size:12.5px}
.trigrow.cfg-open .trig-cfg{display:flex}
.trig-cfg label{display:inline-flex;align-items:center;gap:7px;font-weight:600;color:var(--text)}
.trig-cfg select{min-width:auto;font-weight:400}
.trig-cfg .trig-contact{max-width:250px}
.trig-interval{display:inline-flex;align-items:center;gap:6px;color:var(--muted)}
.trig-cad-val{width:5em;min-width:0}

/* slide toggle (active, test-mode, per-trigger enable) */
.toggle{position:relative;display:inline-block;width:38px;height:20px;flex:0 0 auto}
.toggle input{position:absolute;opacity:0;width:0;height:0}
.toggle .slider{position:absolute;inset:0;background:#cbd5e1;border-radius:999px;transition:.15s;cursor:pointer}
.toggle .slider::before{content:"";position:absolute;height:14px;width:14px;left:3px;top:3px;background:#fff;border-radius:50%;transition:.15s;box-shadow:0 1px 2px rgba(0,0,0,.3)}
.toggle input:checked + .slider{background:var(--ok)}
.toggle input:checked + .slider::before{transform:translateX(18px)}
.toggle-wrap{display:inline-flex;align-items:center;gap:8px;cursor:pointer;font-size:13px;color:var(--text)}
.test-toggle{grid-column:1/-1;align-items:center}

/* sortable column headers */
table.grid thead th.sortable{cursor:pointer;user-select:none}
table.grid thead th.sortable:hover{background:#2c4a78}   /* lighten of --header-navy #1F365C */
table.grid thead th.sortable::after{content:"\2195";opacity:.35;margin-left:6px;font-size:10px}
table.grid thead th.sortable[data-sort=asc]::after{content:"\2191";opacity:1}
table.grid thead th.sortable[data-sort=desc]::after{content:"\2193";opacity:1}

/* selected row */
table.grid tbody tr.selected{background:var(--selected)}

/* topbar preference toggles */
.topbar .prefs{display:flex;gap:4px;margin-left:auto}
.topbar .prefs + .who{margin-left:14px}
.topbar .prefs button{background:rgba(255,255,255,.10);color:#dfe9f7;border:0;border-radius:6px;
  padding:5px 9px;font:inherit;font-size:12px;cursor:pointer}
.topbar .prefs button:hover{background:rgba(255,255,255,.22);color:#fff}

/* compact density */
:root[data-density=compact] table.grid tbody td{padding:4px 10px}
:root[data-density=compact] table.grid thead th{padding:8px 10px}
:root[data-density=compact] .wrap{margin-top:10px}
:root[data-density=compact]{font-size:12.5px}

/* count shown next to live search */
.toolbar .count{color:var(--muted);font-size:12px;white-space:nowrap}

/* ── clean auth pages (login / register / forgot / reset) ── */
.auth-body{margin:0;min-height:100vh;display:grid;place-items:center;background:linear-gradient(180deg,#eef4fe 0%,#e6eefb 100%);
  font:14px/1.5 var(--font-body);color:var(--text);padding:24px}
.auth-wrap{display:flex;flex-direction:column;align-items:center;gap:14px;width:100%;max-width:380px}
.auth-card{width:100%;background:#fff;border:1px solid #e3e9f2;border-radius:14px;padding:30px 30px 26px;
  box-shadow:0 10px 30px rgba(30,50,90,.10);display:flex;flex-direction:column;gap:14px}
.auth-brand{font-family:var(--font-head);text-align:center;font-weight:700;font-size:18px;color:var(--heading)}
.auth-card h1{font-family:var(--font-head);text-align:center;font-size:20px;font-weight:600;color:#1e2a3a;margin:-4px 0 6px}
.auth-card label{display:flex;flex-direction:column;gap:5px;font-size:13px;font-weight:600;color:#3a475a}
.auth-card input{width:100%;padding:10px 12px;border:1px solid #cdd7e5;border-radius:8px;font:inherit;font-size:14px;color:var(--text);background:#fff}
.auth-card input:focus{outline:2px solid var(--primary);outline-offset:0;border-color:var(--primary)}
.auth-aux{text-align:right;margin-top:-6px;font-size:12.5px}
.auth-card button{width:100%;padding:11px;background:var(--primary);color:#fff;border:0;border-radius:8px;font:inherit;font-weight:600;font-size:14px;cursor:pointer;margin-top:2px}
.auth-card button:hover{background:var(--primary-d)}
.auth-alt{text-align:center;font-size:12.5px;color:var(--muted);margin:2px 0 0}
.auth-foot{font-size:11.5px;color:#8a99ac;text-align:center}

/* ── split sign-in: beacon hero on one side, form on the other ── */
.auth-split-body{margin:0;font:14px/1.5 var(--font-body);color:var(--text)}
.auth-split{display:flex;min-height:100vh}
.auth-hero{flex:1.05;display:flex;align-items:center;justify-content:center;padding:36px 32px;
  background:#fff;color:var(--heading);border-right:1px solid #e3ebf6}
.auth-hero-inner{max-width:480px;text-align:center}
.auth-hero-brand{font-family:var(--font-head);font-weight:700;font-size:32px;letter-spacing:-.01em;margin-top:18px;color:var(--heading)}
.auth-hero-tag{color:var(--muted);font-size:15px;line-height:1.6;margin:10px auto 0;max-width:320px}
.auth-panel{flex:1;display:flex;align-items:center;justify-content:center;padding:40px 24px;background:#eef3fb}
.auth-panel .auth-card{max-width:360px;border-color:#e3eaf5;box-shadow:0 12px 36px rgba(31,54,92,.18)}
.auth-card-brand{display:none;align-items:center;justify-content:center;gap:8px;font-family:var(--font-head);
  font-weight:700;font-size:18px;color:var(--heading)}
/* beacon logo (raster master; its own dark core reads on light backgrounds) */
.beacon-disc{display:grid;place-items:center;margin:0 auto}
.beacon-mark{width:400px;max-width:90%;height:auto;display:block}
.beacon-mark-sm{width:30px;height:auto}
/* stack on small screens: hide the hero panel, show a compact brand atop the form */
@media (max-width:760px){
  .auth-hero{display:none}
  .auth-card-brand{display:flex}
}

/* category color swatch */
.swatch{display:inline-block;width:11px;height:11px;border-radius:3px;margin-right:7px;vertical-align:middle;border:1px solid rgba(0,0,0,.2)}

/* ── paging footer (page size / info / prev-next), built by app.js ── */
.paging .pg-size{display:flex;align-items:center;gap:6px}
.paging .pg-size select{padding:3px 6px;border:1px solid var(--input-border);border-radius:5px;background:var(--row);color:var(--text);font:inherit;font-size:12.5px}
.paging .pg-info{font-weight:600;color:var(--text)}
.paging .pg-nav{display:flex;gap:5px}
.paging .pg-btn{min-width:30px;height:28px;border:1px solid var(--input-border);background:var(--row);color:var(--text);
  border-radius:6px;cursor:pointer;font-size:16px;line-height:1;font-weight:600}
.paging .pg-btn:hover:not(:disabled){background:var(--hover);border-color:var(--primary);color:var(--primary)}
.paging .pg-btn:disabled{opacity:.4;cursor:default}

/* ── email-template editor (edit form + live preview side by side) ── */
.tmpl-edit{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:22px;align-items:start}
.tmpl-edit .grid-form{display:flex;flex-direction:column;gap:12px}
.tmpl-edit textarea{font:inherit;padding:8px 10px;border:1px solid var(--input-border);border-radius:8px;background:var(--row);color:var(--text);width:100%;resize:vertical}
.tmpl-edit .inline-check{display:flex;align-items:center;gap:7px;font-weight:600;color:var(--heading)}
.tmpl-edit .form-actions{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:4px}
.tok-help{font-size:12px;color:var(--muted);line-height:2}
.tok-help code{font-size:11.5px}
.tmpl-preview{background:var(--app-bg);border:1px solid var(--border);border-radius:10px;padding:16px;overflow-x:auto}
.eml-preview{min-width:560px}
.btn.danger,.link.danger,button.danger{color:var(--fail)}
.tmpl-badge{display:inline-block;width:22px;height:22px;line-height:22px;text-align:center;border-radius:3px;
  color:#fff;font-weight:700;font-size:11px;margin-right:8px;vertical-align:middle}

/* ── tables scroll horizontally on small screens instead of crushing ── */
.grid-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}

/* ── responsive ── */
@media (max-width:760px){
  body{font-size:13px}
  .topbar{flex-wrap:wrap;height:auto;padding:7px 12px;gap:6px}
  .topbar nav{order:3;width:100%;overflow-x:auto;flex-wrap:nowrap;padding-bottom:2px}
  .topbar .prefs{margin-left:auto}
  .topbar .who{font-size:11.5px}
  .wrap{margin:12px auto;padding:0 12px}
  .toolbar{flex-wrap:wrap}
  .toolbar .search{min-width:150px}
  .detail-grid{grid-template-columns:1fr}
  .kv th{width:96px;white-space:normal}
  .grid-form{grid-template-columns:1fr}
  .tmpl-edit{grid-template-columns:1fr}
  .paging{flex-wrap:wrap;gap:8px;justify-content:center}
  /* form rows: let controls shrink/stack instead of overflowing the viewport */
  .formcard{padding:14px}
  .rulerow{gap:6px}
  .rulerow input,.rulerow select,.trigrow input,.trigrow select,
  .sched input,.sched select{min-width:0;max-width:100%}
  .grid-form input,.grid-form select,.grid-form textarea{max-width:100%}
  .mon-meta{grid-template-columns:1fr}
  .mon-stats{width:100%;margin-left:0;flex-wrap:wrap}
  .mon-statbox{flex:1 1 140px}
}