/* Harveron console: our own pages (agent tabs, review queue, call, answer book, connectors, discovery) in the
   theme's look. Loaded only with the theme. Colors follow the theme's light and dark modes. */
:root {
  --hv-bg: #ffffff; --hv-fg: #111827; --hv-quiet: #6b7280; --hv-line: #e5e7eb; --hv-soft: #f9fafb; --hv-softer: #f3f4f6;
  --hv-primary: #7c3aed; --hv-primary-fg: #ffffff; --hv-ring: rgba(124, 58, 237, .25);
  --hv-good-bg: #ecfdf3; --hv-good: #067647; --hv-warn-bg: #fffaeb; --hv-warn: #b54708; --hv-bad-bg: #fef3f2; --hv-bad: #b42318;
  /* the classic admin's names, which our templates use */
  --hairline-color: var(--hv-line); --body-quiet-color: var(--hv-quiet); --darkened-bg: var(--hv-softer);
  --body-bg: var(--hv-bg); --body-fg: var(--hv-fg); --primary: var(--hv-primary); --link-fg: var(--hv-primary);
}
html.dark {
  --hv-bg: #111827; --hv-fg: #f3f4f6; --hv-quiet: #9ca3af; --hv-line: #374151; --hv-soft: #1f2937; --hv-softer: #1f2937;
  --hv-primary: #a78bfa; --hv-primary-fg: #111827; --hv-ring: rgba(167, 139, 250, .3);
  --hv-good-bg: #052e1a; --hv-good: #6ce9a6; --hv-warn-bg: #3b2506; --hv-warn: #fdb022; --hv-bad-bg: #3a0d0a; --hv-bad: #fda29b;
}

/* Our pages' building blocks */
:is(.kb, .ag, .dc, .ct) { color: var(--hv-fg); font-size: 14px; line-height: 1.55; }
:is(.kb, .ag, .dc, .ct) :is(h2, h3) { font-weight: 600; margin: 0 0 8px; }
:is(.kb, .ag, .dc, .ct) h2 { font-size: 18px; } :is(.kb, .ag, .dc, .ct) h3 { font-size: 15px; }
:is(.kb, .ag, .dc, .ct) p { margin: 0 0 8px; }
:is(.kb, .ag, .dc, .ct) a { color: var(--hv-primary); }
:is(.kb, .ag, .dc, .ct) .box { background: var(--hv-bg); border: 1px solid var(--hv-line); border-radius: 12px; padding: 16px;
  box-shadow: 0 1px 2px rgba(16, 24, 40, .05); margin-bottom: 16px; }
:is(.kb, .ag, .dc, .ct) details > summary { cursor: pointer; }
:is(.kb, .ag, .dc, .ct) ul, :is(.kb, .ag, .dc, .ct) ol { padding-left: 20px; }
:is(.kb, .ag, .dc, .ct) ul { list-style: disc; } :is(.kb, .ag, .dc, .ct) ol { list-style: decimal; }

/* Form controls the theme did not style (our own pages and our hand-made fields): zero specificity, so the
   theme's own classes always win where it styles a control itself */
:where(input[type=text], input[type=search], input[type=date], input[type=password], input[type=number], select, textarea) {
  background: var(--hv-bg); color: var(--hv-fg); border: 1px solid var(--hv-line); border-radius: 8px;
  padding: 7px 10px; font: inherit; max-width: 100%;
}
:where(input[type=text], input[type=search], input[type=date], input[type=password], select, textarea):focus {
  outline: none; border-color: var(--hv-primary); box-shadow: 0 0 0 3px var(--hv-ring);
}
:where(input[type=checkbox], input[type=radio]) { accent-color: var(--hv-primary); width: 16px; height: 16px; vertical-align: -3px; }

/* Buttons on our pages */
:is(.kb, .ag, .dc, .ct, #callbox) :is(button, .button, a.button) {
  display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--hv-line); background: var(--hv-bg);
  color: var(--hv-fg); border-radius: 8px; padding: 7px 14px; font-weight: 500; font-size: 14px; cursor: pointer;
  text-decoration: none; transition: background .15s, border-color .15s;
}
:is(.kb, .ag, .dc, .ct, #callbox) :is(button, .button):hover { background: var(--hv-soft); }
:is(.kb, .ag, .dc, .ct, #callbox) :is(button.default, .default) {
  background: var(--hv-primary); border-color: var(--hv-primary); color: var(--hv-primary-fg);
}
:is(.kb, .ag, .dc, .ct, #callbox) :is(button.default, .default):hover { filter: brightness(1.08); background: var(--hv-primary); }
:is(.kb, .ag) .link { border: 0; background: none; padding: 4px 0; color: var(--hv-primary); }
:is(.kb, .ag) .link.danger { color: var(--hv-bad); }

/* Tables */
:is(.kb, .ag, .dc, .ct) table, table.hv-table { width: 100%; border-collapse: separate; border-spacing: 0;
  border: 1px solid var(--hv-line); border-radius: 12px; overflow: hidden; background: var(--hv-bg); }
:is(.kb, .ag, .dc, .ct) th, table.hv-table th { text-align: left; font-size: 12px; font-weight: 600; text-transform: uppercase;
  letter-spacing: .03em; color: var(--hv-quiet); background: var(--hv-soft); padding: 10px 12px; border-bottom: 1px solid var(--hv-line); }
:is(.kb, .ag, .dc, .ct) td, table.hv-table td { padding: 10px 12px; border-bottom: 1px solid var(--hv-line); vertical-align: middle; }
:is(.kb, .ag, .dc, .ct) tr:last-child td, table.hv-table tr:last-child td { border-bottom: 0; }
.ag tr[data-call]:hover td { background: var(--hv-soft); }

/* Badges and notes */
:is(.kb, .ag, .dc) .badge { display: inline-flex; align-items: center; font-size: 12px; font-weight: 500; padding: 2px 10px;
  border-radius: 999px; background: var(--hv-softer); color: var(--hv-fg); white-space: nowrap; }
:is(.kb, .ag, .dc) .badge.good { background: var(--hv-good-bg); color: var(--hv-good); }
:is(.kb, .ag, .dc) .badge.flag { background: var(--hv-warn-bg); color: var(--hv-warn); }
:is(.kb, .ag, .dc) .badge.bad { background: var(--hv-bad-bg); color: var(--hv-bad); }
:is(.kb, .ag, .dc, .ct) .muted { color: var(--hv-quiet); }
.errornote { background: var(--hv-bad-bg); color: var(--hv-bad); border-radius: 8px; padding: 10px 14px; }

/* The agent's tabs */
.ag-tabs { gap: 4px !important; border-bottom: 1px solid var(--hv-line) !important; margin-bottom: 20px !important; }
.ag-tabs a { padding: 10px 14px !important; border-radius: 0 !important; color: var(--hv-quiet) !important; font-weight: 500;
  border-bottom: 2px solid transparent; margin-bottom: -1px; text-decoration: none; }
.ag-tabs a:hover { color: var(--hv-fg) !important; }
.ag-tabs a.on { background: none !important; color: var(--hv-primary) !important; border-bottom-color: var(--hv-primary); }
.ag-tabs .n { background: var(--hv-primary) !important; color: var(--hv-primary-fg) !important; border-radius: 999px !important; }

/* The call: numbers on top, tabs, questions */
.ag .kpi { background: var(--hv-bg); border-radius: 12px !important; padding: 12px 16px !important; box-shadow: 0 1px 2px rgba(16, 24, 40, .05); }
.ag .kpi .n { font-size: 24px !important; letter-spacing: -.01em; }
.ag .ctabs > label { border-radius: 8px 8px 0 0 !important; background: var(--hv-soft); }
.ag .ctabs > .panel { border-radius: 0 12px 12px 12px !important; background: var(--hv-bg); }
.ag .qrow { border-radius: 10px !important; background: var(--hv-bg); }
.ag .tx div { border-bottom-color: var(--hv-line) !important; }

/* The call pop-up */
#callbox { border-radius: 16px !important; box-shadow: 0 24px 48px -12px rgba(16, 24, 40, .25); border-color: var(--hv-line) !important; }
#callbox .head { background: var(--hv-soft) !important; }

/* The answer book's folds */
.kb details.entry, .kb details.section { border-radius: 10px !important; }
.kb details.section { background: var(--hv-soft) !important; }

/* Buttons that stand out on the console's own sections (Add an agent, Invite someone, Close this business) */
a.hv-btn, button.hv-btn { display: inline-flex; align-items: center; gap: 6px; padding: 8px 16px; border-radius: 8px;
  background: var(--hv-primary); color: var(--hv-primary-fg) !important; border: 1px solid var(--hv-primary);
  font-weight: 600; font-size: 14px; text-decoration: none; cursor: pointer; margin: 0 8px 4px 0; }
a.hv-btn:hover, button.hv-btn:hover { filter: brightness(1.08); }
a.hv-btn.secondary, button.hv-btn.secondary { background: var(--hv-bg); color: var(--hv-primary) !important; }
button.hv-btn.danger { background: var(--hv-bg); color: var(--hv-bad) !important; border-color: var(--hv-bad); }

/* Edit before change: the bar above a saved record's form (edit-guard.js) */
.hv-edit-bar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 10px 14px; margin: 0 0 16px;
  border: 1px solid var(--hv-line); border-radius: 12px; background: var(--hv-soft); color: var(--hv-quiet); }
.hv-edit-bar span { flex: 1; min-width: 200px; }
.hv-edit-bar.on { border-color: var(--hv-primary); background: var(--hv-bg); color: var(--hv-fg); }
.hv-edit-bar .hv-btn { margin: 0; }
form[id$="_form"] :disabled:not([type=checkbox]):not([type=radio]) { opacity: .85; cursor: default; }

/* How your agents are doing: a card per agent on the business page */
.hv-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; }
.hv-card { border: 1px solid var(--hv-line); border-radius: 14px; padding: 16px; background: var(--hv-bg); display: flex; flex-direction: column; gap: 10px; }
.hv-card-head { display: flex; align-items: center; gap: 10px; }
.hv-card-head span, .hv-quiet { color: var(--hv-quiet); font-size: 13px; }
.hv-card dl { margin: 0; display: grid; grid-template-columns: 1fr auto; gap: 6px 12px; font-size: 14px; }
.hv-card dt { color: var(--hv-quiet); } .hv-card dd { margin: 0; font-weight: 600; text-align: right; }
.hv-card > a { color: var(--hv-primary); font-weight: 600; margin-top: auto; }

/* The connector shop for a business (Catalog) */
.shop-grid { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.hv-card.shop p { color: var(--hv-quiet); margin: 6px 0 0; font-size: 14px; }
.hv-card.shop ul { margin: 6px 0 0; padding-left: 18px; font-size: 14px; }
.hv-card .shop-act { margin-top: auto; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.hv-card .pill { display: inline-block; font-size: 12px; font-weight: 700; padding: 3px 10px; border-radius: 999px;
  background: var(--hv-soft); color: var(--hv-quiet); }
.hv-card .pill.live { background: var(--hv-good-bg); color: var(--hv-good); }