:root{
  --brand:#f59e0b; --brand-600:#d97706;
  --bg:#0b0f19; --bg-elev:#121829;
  --ink:#e5e7eb; --muted:#94a3b8;
  --ok:#10b981; --bad:#ef4444;
  --line:#1f2937; --chip:#0f172a;
}

/* Base */
html,body{height:100%}
body{
  margin:0;
  font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Arial;
  color:var(--ink);
  background:var(--bg);
}
.container{max-width:1100px;margin:24px auto;padding:0 16px;}

/* Simple utility text classes */
.muted{color:var(--muted);}
.small{font-size:12px;}

/* Header / Brand */
.header{background:linear-gradient(90deg,#0b0f19,#121829);}
.nav{max-width:1100px;margin:0 auto;padding:12px 16px;display:flex;align-items:center;gap:16px;border-bottom:1px solid var(--line);}
.logo{height:120px;width:auto}
.brand-title{font-weight:800;letter-spacing:.2px}
.spacer{flex:1}
.inactive { opacity: .5; }
.ver{font-size:12px;color:var(--muted);border:1px solid var(--line);padding:2px 8px;border-radius:999px;background:var(--chip)}

/* Auth */
.authbar{display:flex; align-items:center; gap:8px;}
.authbar input{padding:7px 9px; border:1px solid var(--line); border-radius:8px; background:#0b1220; color:var(--ink); min-width:180px;}
.authbar .emailtxt{color:var(--muted); font-size:14px;}

/* Chips / Pills */
.pill{
  font-size:12px;padding:2px 8px;border-radius:999px;
  border:1px solid var(--line);color:var(--muted);background:var(--chip)
}
.pill.ok{border-color:var(--ok);color:var(--ok);background:rgba(16,185,129,.08)}
.pill.bad{border-color:var(--bad);color:var(--bad);background:rgba(239,68,68,.08)}
.pill.good{border-color:var(--ok);color:var(--ok);background:rgba(16,185,129,.08)}
.pill.good.outline{border:1px solid #16a34a;color:#16a34a;background:transparent}
.pill.bad.outline{border:1px solid #dc2626;color:#dc2626;background:transparent}

.hidden{display:none}

/* Cards / Rows */
.card{
  background:var(--bg-elev);
  border:1px solid var(--line);
  border-radius:12px;
  padding:16px
}
.row{margin:10px 0}

/* Form controls */
select{
  padding:9px 10px;
  border:1px solid var(--line);
  border-radius:10px;
  background:#0b1220;
  color:var(--ink);
  min-width:180px;
}
input[type="text"], input[type="time"], input[type="number"]{
  padding:8px 10px;
  border:1px solid var(--line);
  border-radius:10px;
  background:#0b1220;
  color:var(--ink);
}
button{
  cursor:pointer;
  border:1px solid var(--brand);
  color:#0b0f19;
  background:var(--brand);
  padding:9px 14px;
  border-radius:10px;
  font-weight:700;
  transition:.15s;
}
button.ghost{background:#0b1220;color:var(--brand);border-color:var(--brand)}
button:disabled{opacity:.6;cursor:not-allowed;pointer-events:none}
button:hover{background:var(--brand-600);border-color:var(--brand-600)}
button.ghost:hover{color:#0b0f19;background:var(--brand)}

/* Headings */
.job-heading{
  font-size:32px;
  font-weight:900;
  margin:4px 0 14px;
  letter-spacing:.2px;
}

/* Relay grid */
#grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:12px;
}
.relay{
  border:1px solid var(--line);
  border-radius:12px;
  padding:12px;
  background:#0d1427;
  display:flex;
  flex-direction:column;
}
.relay.on{border-color:var(--ok)}
.relay .top{display:flex; align-items:center; justify-content:space-between; gap:8px;}
.relay .name{
  font-weight:800;
  flex:1;
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.relay .state{
  font-size:12px;
  color:var(--muted);
  margin-top:2px;
}
.relay .bottom{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  margin-top:6px;
}
.mode-badge{
  font-size:12px;
  padding:2px 8px;
  border-radius:999px;
  border:1px solid var(--line);
  background:var(--chip);
  color:var(--muted);
  white-space:nowrap
}

/* Pending (blink outline while sending) */
.relay.pending{
  animation: relay-pending 1s linear infinite;
  position: relative;
}
@keyframes relay-pending{
  0%   { box-shadow: 0 0 0 2px rgba(16,185,129,0.0); }
  50%  { box-shadow: 0 0 0 2px rgba(16,185,129,0.9); }
  100% { box-shadow: 0 0 0 2px rgba(16,185,129,0.0); }
}

/* Tabs */
.tabs{display:flex;gap:8px}
.tab{
  border:1px solid var(--line);
  background:#0d1427;
  color:var(--ink);
  transition:.15s
}
.tab:hover{border-color:var(--brand);box-shadow:0 0 0 1px var(--brand) inset}
.tab.active{border-color:var(--brand);color:#0b0f19;background:var(--brand)}

/* Key/Value grids (Status, etc.) */
.kv{
  display:grid;
  grid-template-columns: 220px 1fr;
  gap:8px;
  align-items:center
}
.key{color:var(--muted)}
.val{color:var(--ink); word-break:break-word}
.val .mono{
  font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace
}

/* Status card tweaks */
#statusCard{margin-top:8px}
#statusCard .kv{row-gap:10px}
#statusCard .key{opacity:.85}

/* Info / tables */
pre{
  background:#0b1220;
  border:1px solid var(--line);
  border-radius:12px;
  padding:12px;
  overflow:auto;
  color:#cbd5e1
}
.table-wrap { overflow-x:auto; -webkit-overflow-scrolling:touch }
table{width:100%;border-collapse:collapse;font-size:14px}
th,td{
  border-bottom:1px solid var(--line);
  padding:10px 6px;
  text-align:left
}
th{font-weight:700;color:var(--muted)}
.days{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.inline{display:inline-flex;align-items:center;gap:8px}

/* Empty state + toast */
.empty{color:var(--muted);font-style:italic}
#toast{
  position:fixed;right:16px;bottom:16px;background:#111827;color:#fff;
  padding:10px 12px;border-radius:10px;box-shadow:0 10px 20px rgba(0,0,0,.35);
  opacity:0;transform:translateY(8px);transition:.2s
}
#toast.show{opacity:1;transform:translateY(0)}

/* Auth gating */
.requires-auth{display:none}
.requires-guest{display:block}
body.authed .requires-auth{display:block}
body.authed .requires-guest{display:none}

/* ---------- Next Events grid (compact, responsive) ---------- */
.next-grid{
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap:10px;
}
@media (min-width: 900px){
  .next-grid{ grid-template-columns: repeat(4, minmax(0,1fr)); }
}
.ne-item{
  border:1px solid var(--line);
  background:#0d1427;
  border-radius:10px;
  padding:10px;
  display:grid;
  grid-template-columns: auto 1fr;
  grid-template-areas:
    "head name"
    ". when";
  gap:6px 10px;
}
.ne-head{ grid-area: head; font-weight:800; color:var(--muted); }
.ne-name{
  grid-area: name;
  font-weight:700;
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.ne-when{ grid-area: when; color:var(--ink); opacity:.9; }

/* ---------- Info tab – two-column layout ---------- */
.info-two-col{
  display:flex;
  flex-wrap:wrap;
  gap:16px;
  margin-top:8px;
}
.info-col{
  flex:1 1 320px;
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:12px;
}
.info-grid{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:4px 16px;
  align-items:flex-start;
}
.info-grid > div{
  min-width:0;
}
.info-grid code{
  font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  font-size:12px;
}
@media (max-width:768px){
  .info-two-col{flex-direction:column;}
}

/* ---------- Responsive ---------- */
@media (max-width: 640px){
  .nav{ padding: 10px 12px; gap:10px }
  .logo{ height:64px }
  .brand-title{ display:none }

  .authbar{ gap:6px; flex-wrap:wrap }
  .authbar input{ min-width:140px; width:140px; padding:8px 10px }
  .authbar button{ padding:10px 14px }

  .container{ margin:14px auto; padding:0 12px }
  .card{ padding:12px; border-radius:10px }
  .job-heading{ font-size:22px; margin:2px 0 10px }

  #grid{ grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:10px }
  .relay{ padding:10px }
  .relay .bottom button{ width:58% }
  .mode-badge{ font-size:11px; padding:2px 6px }

  .tabs{ gap:6px; flex-wrap:wrap }
  .tab{ padding:8px 10px; font-size:14px }

  .kv{ grid-template-columns: 1fr }
  .key{ margin-top:6px }

  table{ min-width: 680px }

  .info-two-col{flex-direction:column;}
}

/* Center title visible only when authed */
#centerTitle{
  display:none;
  text-align:center;
  margin:12px 0 18px;
  font-size:32px;
  font-weight:900;
  letter-spacing:.2px;
}
body.authed #centerTitle{ display:block; }

/* Bottom-left version badge */
#versionBadge{
  position:fixed;
  left:16px;
  bottom:16px;
  z-index:40;
  font-size:12px;
  color:var(--muted);
  background:var(--chip);
  border:1px solid var(--line);
  padding:4px 8px;
  border-radius:999px;
}

/* ==========================================================
   LBI WatchDog – Super Admin / Companies tab styles
   ========================================================== */

/* Generic cards and buttons for web-dashboard components */
.wd-card{
  background:var(--bg-elev);
  border:1px solid var(--line);
  border-radius:12px;
  padding:16px;
}

.wd-btn{
  cursor:pointer;
  border-radius:10px;
  font-weight:700;
  padding:8px 12px;
  font-size:13px;
  border:1px solid var(--line);
  background:#0b1220;
  color:var(--ink);
  transition:.15s;
}
.wd-btn-primary{
  border-color:var(--brand);
  background:var(--brand);
  color:#0b0f19;
}
.wd-btn:hover{
  border-color:var(--brand);
}
.wd-btn-primary:hover{
  background:var(--brand-600);
  border-color:var(--brand-600);
}
.wd-input{
  padding:7px 9px;
  border-radius:8px;
  border:1px solid var(--line);
  background:#0b1220;
  color:var(--ink);
  font-size:14px;
}

/* Tab header + subtle per-tab version badge */
.wd-tab-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  margin-bottom:8px;
}
.wd-tab-header h2{
  margin:0;
  font-size:20px;
  font-weight:800;
}
.wd-tab-version{
  font-size:11px;
  color:var(--muted);
}
.wd-tab-version.wd-tab-version--subtle{
  position:absolute;
  left:0.75rem;
  bottom:0.5rem;
  font-size:11px;
  opacity:0.55;
  pointer-events:none;
}

/* Companies main layout */
.wd-companies{
  position:relative;
  min-height:100%;
  display:flex;
  flex-direction:column;
}
.wd-companies-main{
  flex:1;
  display:flex;
  flex-direction:column;
}

.wd-companies-shell{
  display:flex;
  flex-direction:column;
  gap:0.75rem;
  height:100%;
}

/* Toolbar: search + Add Company */
.wd-companies-toolbar{
  display:flex;
  gap:0.5rem;
  align-items:center;
  margin-bottom:0.25rem;
}
.wd-companies-search{
  flex:1;
  padding:0.4rem 0.6rem;
  border-radius:4px;
  border:1px solid rgba(255,255,255,0.08);
  background:rgba(0,0,0,0.15);
  font-size:14px;
}
.wd-companies-search::placeholder{
  opacity:0.6;
  font-size:13px;
}

/* Body: ONE column – list OR detail (full width) */
.wd-companies-body{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:1rem;
  min-height:260px;
}

/* List panel */
.wd-companies-list{
  border-radius:8px;
  border:1px solid rgba(255,255,255,0.06);
  background:rgba(0,0,0,0.18);
  padding:0.5rem 0;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  max-height:420px;
  overflow-y:auto;
}
.wd-companies-loading,
.wd-companies-empty{
  padding:0.75rem 0.9rem;
  font-size:13px;
  opacity:0.8;
}
.wd-companies-loading{
  font-style:italic;
}

/* Each company row */
.wd-company-row{
  padding:0.45rem 0.75rem 0.4rem;
  cursor:pointer;
  border-bottom:1px solid rgba(255,255,255,0.04);
  transition:background 0.12s ease,border-color 0.12s ease;
}
.wd-company-row:last-child{
  border-bottom:none;
}
.wd-company-row:hover{
  background:rgba(255,255,255,0.04);
}
.wd-company-row.active{
  background:rgba(80,150,255,0.12);
  border-left:3px solid rgba(80,150,255,0.95);
  padding-left:0.6rem;
}
.wd-company-row-main{
  display:flex;
  flex-wrap:wrap;
  gap:0.35rem;
  align-items:baseline;
  font-size:14px;
}

/* Single-line variant: Account #, Name, Address */
.wd-company-row-main--single{
  display:flex;
  flex-wrap:wrap;
  gap:0.5rem;
  align-items:baseline;
  font-size:14px;
}

.wd-company-name{
  font-weight:600;
}

/* Account number styled like company name (same color, similar weight) */
.wd-company-account{
  font-weight:600;
  font-size:13px;
  margin-right:0.35rem;
}

.wd-company-row-address{
  font-size:12px;
  opacity:0.85;
}

.wd-company-row-sub{
  font-size:12px;
  opacity:0.8;
  margin-top:0.1rem;
}
.wd-company-no-address{
  font-style:italic;
  opacity:0.6;
}

/* Detail panel */
.wd-companies-detail{
  min-height:220px;
}
.wd-company-detail-card{
  height:100%;
  display:flex;
  flex-direction:column;
  gap:0.75rem;
}
.wd-company-detail-empty{
  align-items:flex-start;
  justify-content:center;
  font-size:14px;
}

/* Detail header */
.wd-company-detail-header{
  display:flex;
  flex-wrap:wrap;
  gap:0.5rem;
  justify-content:space-between;
  align-items:center;
  margin-bottom:0.4rem;
}
.wd-company-detail-header h3{
  margin:0;
  font-size:17px;
}
.wd-company-detail-account{
  font-size:12px;
  opacity:0.8;
  padding:0.15rem 0.4rem;
  border-radius:999px;
  border:1px solid rgba(255,255,255,0.12);
}

/* Form layout */
.wd-company-form{
  display:flex;
  flex-direction:column;
  gap:0.75rem;
}
.wd-company-form .wd-form-grid{
  display:grid;
  grid-template-columns:minmax(0,1.1fr) minmax(0,1.3fr);
  gap:0.75rem 1rem;
}
@media (max-width:900px){
  .wd-company-form .wd-form-grid{
    grid-template-columns:minmax(0,1fr);
  }
}
.wd-company-form label{
  display:flex;
  flex-direction:column;
  gap:0.25rem;
  font-size:12px;
}
.wd-company-form input,
.wd-company-form textarea{
  font-size:13px;
  padding:0.35rem 0.5rem;
  border-radius:4px;
  border:1px solid rgba(255,255,255,0.08);
  background:rgba(0,0,0,0.15);
  color:var(--ink);
}

/* Address sections */
.wd-address-fieldset{
  border:1px solid rgba(255,255,255,0.06);
  border-radius:8px;
  padding:0.55rem 0.6rem 0.5rem;
  display:grid;
  grid-template-columns:minmax(0,1.4fr) minmax(0,1.4fr);
  gap:0.5rem 0.75rem;
}
.wd-address-fieldset legend{
  padding:0 0.25rem;
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:0.03em;
  opacity:0.7;
}
@media (max-width:900px){
  .wd-address-fieldset{
    grid-template-columns:minmax(0,1fr);
  }
}

/* Shipping + Billing side-by-side row */
.wd-company-address-row{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:0.75rem;
  margin-top:0.5rem;
}
@media (max-width:900px){
  .wd-company-address-row{
    grid-template-columns:minmax(0,1fr);
  }
}

/* Billing same-as-shipping */
.wd-billing-same-row{
  display:flex;
  align-items:center;
  gap:0.35rem;
  font-size:12px;
  margin-bottom:0.35rem;
}
.wd-billing-same-row input[type="checkbox"]{
  width:auto;
}

/* Emails block */
.wd-company-emails-block{
  margin-top:0.25rem;
}
.wd-company-emails-block h4{
  margin:0 0 0.25rem;
  font-size:13px;
  font-weight:600;
}
.wd-company-emails-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:0.5rem 0.75rem;
}
@media (max-width:900px){
  .wd-company-emails-grid{
    grid-template-columns:minmax(0,1fr);
  }
}

/* Email name+email pairs */
.wd-email-pair{
  display:flex;
  flex-direction:column;
  gap:0.25rem;
}

/* Address summary (formatted mailing/billing preview) */
.wd-company-address-summary{
  margin-top:0.25rem;
  font-size:12px;
  opacity:0.85;
  display:flex;
  flex-direction:column;
  gap:0.15rem;
}

/* Account row */
.wd-company-account-row{
  margin-top:0.25rem;
}

/* Account number row – small field above company name */
.wd-company-account-row--top input[name="accountNumber"]{
  max-width:12ch;
}

/* Integration dropdown row */
.wd-company-integration-row{
  margin-top:0.4rem;
}
.wd-company-integration-row select{
  width:100%;
  padding:0.35rem 0.5rem;
  border-radius:4px;
  border:1px solid rgba(255,255,255,0.08);
  background:rgba(0,0,0,0.15);
  color:var(--ink);
  font-size:13px;
}

/* Integration dropdown – dark background, visible text, ~20 chars wide */
.wd-company-integration-row select[name="primaryIntegration"]{
  width:20ch;
  max-width:100%;
  background:#0b1220 !important;
  color:var(--ink) !important;
  border-radius:10px;
  padding:8px 10px;
}

/* (Legacy) Integrations fieldset – safe to keep */
.wd-company-integrations{
  border-radius:8px;
  border:1px dashed rgba(255,255,255,0.12);
  padding:0.5rem 0.6rem;
  margin-top:0.25rem;
}
.wd-company-integrations legend{
  padding:0 0.25rem;
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:0.03em;
  opacity:0.7;
}
.wd-company-integrations label{
  display:inline-flex;
  align-items:center;
  gap:0.3rem;
  margin-right:0.75rem;
  margin-top:0.2rem;
  font-size:12px;
}

/* Form status */
.wd-form-status{
  margin-top:0.3rem;
  font-size:12px;
  opacity:0.8;
}