/* RealtyWire ops — shared stylesheet (UI unification, 2026-09-03).
   Loaded by every control-panel page through ops_ui.php. Holds the design tokens, the top
   bar and primary navigation, the page title, the secondary navigation, and the shared
   cards / tables / buttons / pills / forms. Page-specific rules live in each page's own
   style block and are built on these tokens. Bump OPS_CSS_VERSION in ops_ui.php whenever
   this file changes so browsers fetch the new copy. */

:root{
  --bg:#f4f5f3; --card:#fff; --ink:#1f2933; --soft:#67717a;
  --line:#e0e3df; --line-soft:#eef0ee; --field:#cfd4cf;
  --accent:#0e6e5c; --accent-soft:#e3f0ec;
  --warn:#9a6a14; --warn-soft:#f6edda;
  --bad:#a32d2d; --bad-soft:#fcebeb;
  --info:#185fa5; --info-soft:#e6f1fb;
  --demo:#b3261e; --demo-soft:#fff3f2;
  --radius:12px; --radius-sm:8px; --wrap:1280px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font-family:system-ui,-apple-system,"Segoe UI",sans-serif;font-size:14px;line-height:1.45;-webkit-font-smoothing:antialiased}
a{color:var(--accent)}
button{font:inherit}
code{font-family:ui-monospace,Consolas,monospace;font-size:.92em;background:var(--line-soft);padding:1px 4px;border-radius:4px}

/* ---- top bar and primary navigation ---- */
.ops-top{background:var(--card);border-bottom:1px solid var(--line)}
.ops-topbar{max-width:var(--wrap);margin:0 auto;padding:0 20px;display:flex;align-items:stretch;gap:18px;min-height:54px;flex-wrap:wrap}
.ops-brand{display:flex;align-items:center;gap:9px;text-decoration:none;color:var(--ink);padding:12px 0}
.ops-brand img{height:20px;width:auto;display:block}
.ops-brand span{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--accent);background:var(--accent-soft);padding:2px 7px;border-radius:999px}
.ops-nav{display:flex;align-items:stretch;gap:2px;flex-wrap:wrap;margin-left:auto}
.ops-nav a{display:flex;align-items:center;padding:0 12px;min-height:54px;font-size:13.5px;font-weight:500;color:var(--soft);text-decoration:none;border-bottom:2px solid transparent;white-space:nowrap}
.ops-nav a:hover{color:var(--ink)}
.ops-nav a.on{color:var(--accent);font-weight:600;border-bottom-color:var(--accent)}
.ops-nav a.signout{margin-left:10px;padding-left:16px;border-left:1px solid var(--line)}

/* ---- page frame ---- */
.ops-main{max-width:var(--wrap);margin:0 auto;padding:22px 20px 56px}
.pagehead{margin:0 0 14px}
.pagehead h1{font-size:22px;font-weight:650;margin:0;line-height:1.2}
.pagehead .lede{color:var(--soft);font-size:13px;margin:4px 0 0;max-width:860px;line-height:1.5}
h2{font-size:15px;font-weight:600;margin:24px 0 10px}
h3{font-size:14px;font-weight:600;margin:12px 0 6px;color:var(--soft)}
.note{color:var(--soft);font-size:13px}
.muted{color:var(--soft)}
.hint{color:var(--soft);font-size:13px;margin:0 0 14px;line-height:1.5}

/* ---- secondary navigation (one row per system, directly under the page title) ---- */
.subnav{display:flex;gap:2px;flex-wrap:wrap;border-bottom:1px solid var(--line);margin:0 0 18px}
.subnav a,.subnav button{appearance:none;background:none;border:0;border-bottom:2px solid transparent;margin-bottom:-1px;padding:9px 12px;font:inherit;font-size:14px;font-weight:500;color:var(--soft);text-decoration:none;cursor:pointer;white-space:nowrap}
.subnav a:hover,.subnav button:hover{color:var(--ink)}
.subnav a.on,.subnav button.on{color:var(--accent);font-weight:600;border-bottom-color:var(--accent)}
.subnav .count{font-size:12px;color:var(--soft);font-weight:500;margin-left:4px}

/* ---- in-page tabs (filters and segments) and toolbar rows ---- */
.tabs{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin:0 0 12px}
.tabs a,.tabs button{display:inline-block;padding:7px 13px;border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--card);color:var(--ink);text-decoration:none;font:inherit;font-size:13.5px;cursor:pointer}
.tabs a.on,.tabs button.on{border-color:var(--accent);color:var(--accent);font-weight:600}
.toolbar-row{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin:0 0 12px}
.toolbar-row .right{margin-left:auto;display:flex;gap:8px;align-items:center;flex-wrap:wrap}

/* ---- stat cards ---- */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin:0 0 18px}
.stat{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:12px 14px}
.stat .label{font-size:12px;color:var(--soft)}
.stat .num{font-size:24px;font-weight:600;margin-top:2px;line-height:1.15}
.stat .sub{font-size:12px;color:var(--soft);margin-top:2px}

/* ---- cards, empty states, messages ---- */
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:16px 18px;margin:0 0 14px}
.empty{background:var(--card);border:1px dashed var(--line);border-radius:var(--radius);padding:24px 20px;color:var(--soft);font-size:14px;line-height:1.5;text-align:center}
.empty b{color:var(--ink)}
.err{background:var(--bad-soft);border:1px solid #e9b8b0;border-radius:var(--radius);padding:12px 16px;color:#8a2a1c;font-size:14px;margin:0 0 12px}
.msg{background:var(--accent-soft);border:1px solid #bfd9d0;border-radius:var(--radius);padding:12px 16px;font-size:14px;margin:0 0 12px}
.banner{background:var(--demo-soft);border:2px solid var(--demo);border-radius:var(--radius);padding:10px 14px;color:var(--demo);font-weight:600;margin:0 0 12px}
.strip{display:flex;gap:8px;align-items:center;flex-wrap:wrap;background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:8px 12px;margin:0 0 12px;font-size:13px}
.strip a{margin-left:auto}
.strip a.on{font-weight:600}
dl{display:grid;grid-template-columns:max-content 1fr;gap:6px 18px;margin:0;font-size:14px}
dt{color:var(--soft)}
dd{margin:0;word-break:break-word}

/* ---- status pills ---- */
.pill{display:inline-block;padding:2px 9px;border-radius:999px;font-size:12px;font-weight:500;line-height:1.5;white-space:nowrap;background:var(--line-soft);color:#4b5560}
.pill.ok{background:var(--accent-soft);color:var(--accent)}
.pill.warn,.pill.alt{background:var(--warn-soft);color:var(--warn)}
.pill.bad,.pill.blocked{background:var(--bad-soft);color:var(--bad)}
.pill.info{background:var(--info-soft);color:var(--info)}
.pill.idle,.pill.off,.pill.never{background:var(--line-soft);color:var(--soft)}
.pill.demo{background:var(--demo-soft);color:var(--demo);border:1px solid var(--demo);font-weight:700;letter-spacing:.03em}

/* ---- tables ---- */
.wrap{overflow-x:auto}
table{width:100%;border-collapse:collapse;background:var(--card);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;font-size:13.5px}
th{font-size:12px;color:var(--soft);font-weight:600;text-align:left;padding:9px 10px;border-bottom:1px solid var(--line);background:#fafbf9;white-space:nowrap}
td{padding:9px 10px;border-bottom:1px solid var(--line-soft);text-align:left;vertical-align:top}
tr:last-child td{border-bottom:0}
tbody tr:hover td{background:#f9fbfa}
td.num{font-variant-numeric:tabular-nums}
tr.demo td{background:var(--demo-soft)}
.pager{display:flex;gap:12px;align-items:center;margin:12px 0;font-size:14px}

/* ---- forms ---- */
input[type=text],input[type=search],input[type=password],input[type=time],input[type=number],input[type=email],select,textarea{font:inherit;color:var(--ink);background:var(--card);border:1px solid var(--field);border-radius:var(--radius-sm);padding:8px 10px;font-size:14px}
input:focus,select:focus,textarea:focus{outline:2px solid var(--accent);outline-offset:-1px;border-color:transparent}
form.search{display:inline-flex;gap:6px;align-items:center;margin:0}
form.search input{min-width:240px}

/* ---- buttons: .btn (primary), .btn.secondary, .btn.danger, .btn.warn, .btn.sm; .mini = small secondary ---- */
.btn,.mini{display:inline-flex;align-items:center;justify-content:center;gap:6px;font:inherit;font-weight:600;cursor:pointer;text-decoration:none;border:1px solid transparent;border-radius:var(--radius-sm);transition:filter .15s,border-color .15s,background .15s;white-space:nowrap;line-height:1.3}
.btn{padding:8px 15px;font-size:13.5px;background:var(--accent);color:#fff}
.btn:hover{filter:brightness(1.07)}
.btn.secondary{background:var(--card);color:var(--ink);border-color:var(--line)}
.btn.secondary:hover{border-color:var(--soft);filter:none}
.btn.danger{background:var(--card);color:var(--bad);border-color:#e9b8b0}
.btn.danger:hover{background:var(--bad-soft);filter:none}
.btn.warn{background:var(--card);color:var(--warn);border-color:#e6d2a3}
.btn.warn:hover{background:var(--warn-soft);filter:none}
.btn.sm{padding:4px 10px;font-size:12.5px}
.mini{padding:4px 10px;font-size:12.5px;background:var(--card);color:var(--ink);border-color:var(--line)}
.mini:hover{border-color:var(--soft)}
.mini.primary{background:var(--accent);color:#fff;border-color:transparent}
.mini.primary:hover{filter:brightness(1.07)}
.btn:disabled,.mini:disabled{opacity:.5;cursor:default;filter:none}

/* ---- narrower screens: the top bar wraps, navigation stays tappable ---- */
@media (max-width:720px){
  .ops-topbar{padding:0 12px;gap:8px}
  .ops-brand{padding:9px 0}
  .ops-nav{margin-left:0;width:100%;gap:0}
  .ops-nav a{min-height:40px;padding:0 9px;font-size:13px}
  .ops-nav a.signout{margin-left:auto;padding-left:9px;border-left:0}
  .ops-main{padding:14px 12px 40px}
  .pagehead h1{font-size:19px}
  .subnav a,.subnav button{padding:8px 9px;font-size:13.5px}
  form.search{width:100%}
  form.search input{min-width:0;flex:1}
}

/* ---- queue list actions column (2026-09-11): stacked buttons, pinned to the right edge while the
   wide table scrolls under it. The table itself must not clip (overflow:visible) or sticky has no
   scroller to stick to; the .wrap container (overflow-x:auto) is the scroller. ---- */
table.sticky-actions{overflow:visible}
.sticky-actions td.actions,.sticky-actions th.actions{position:sticky;right:0;z-index:1;background:var(--card);box-shadow:-8px 0 10px -8px rgba(0,0,0,.18);white-space:nowrap}
.sticky-actions th.actions{background:#fafbf9}
.sticky-actions tbody tr:hover td.actions{background:#f9fbfa}
td.actions>div+div{margin-top:6px}