/* WhatSell V2 theme layer. Loaded last: brings every V2 page (Overview, Contacts, Broadcasts, Chatbots, Chat flows,
 * Website chat, API access, More features, Account) onto the same design language as the Inbox (css/tokens.css).
 * Presentation only: no markup, ids or behaviour are touched. */

/* ---------- page canvas: transparent over the shell gradient, side menus and cards float as white panels ---------- */
:is(.ct, .ac, .aa, .bc, .cf, .cb, .mf, .ov, .wc, .ap, .tp) { background: transparent; color: var(--wk-text); font-family: var(--wk-font); }
:is(.ct, .ac, .aa, .bc, .cf, .cb, .mf) { gap: 12px; padding: 0 12px 12px; }
.ov-scroll, .wc-scroll { padding-top: 0; }
.ap, .tp { padding-bottom: 12px; }

/* left menus / list columns */
:is(.ct-books, .ac-tabs, .aa-menu, .bc-tabs, .cf-side, .cb-tabs, .mf-tabs) { background: var(--wk-surface); border: 1px solid var(--wk-border); border-radius: var(--wk-r-card); box-shadow: var(--wk-sh-2); }
:is(.ac-tabs, .aa-menu, .bc-tabs, .cb-tabs, .mf-tabs) { padding: 14px 10px; gap: 6px; }
:is(.ac-tab, .aa-item, .bc-tab, .cb-tab, .mf-tab) { border-radius: 14px; transition: background var(--wk-t), color var(--wk-t); }
:is(.ac-tab, .aa-item, .bc-tab, .cb-tab, .mf-tab):hover { background: var(--wk-hover); }
:is(.ac-tab, .aa-item, .bc-tab, .cb-tab, .mf-tab).on { background: var(--wk-selected); color: var(--wk-green-700); }
.bc button.bc-tab:hover { background: var(--wk-hover); } .bc button.bc-tab.on { background: var(--wk-selected); }

/* content cards */
:is(.ct-card, .ov-card, .wc-card, .cf-card, .bc-card, .mf .wg, .cb .wg, .tp .wg, .bc .wg, .aa-keycard, .aa-docs) { background: var(--wk-surface); border-radius: var(--wk-r-card); border: 1px solid var(--wk-border); box-shadow: var(--wk-sh-2); }
.cf-card { border-radius: var(--wk-r-panel); box-shadow: var(--wk-sh-1); }
.bc-card, .bc-full .wg { background: var(--wk-surface-2); }
.ct-toolbar h2 { font-weight: 600; letter-spacing: -.2px; }

/* ---------- controls ---------- */
.wk-cta { border-radius: var(--wk-r-btn); background: var(--wk-green); font-weight: 600; box-shadow: 0 4px 12px rgba(42, 146, 69, .22); transition: background var(--wk-t), box-shadow var(--wk-t); }
.wk-cta:hover:not(:disabled) { background: var(--wk-green-600); }
.wk-cta:disabled { box-shadow: none; }
.wk-ghost, .ct-tool { color: var(--wk-green-700); }
.ct-tool { font-weight: 500; }
.wk-ghost:hover, .ct-tool:hover, .wk-ibtn:hover { background: var(--wk-hover); }
.wk-ibtn { color: var(--wk-text-2); transition: background var(--wk-t); }
.ct-add, .cb-edit, .mf-copy, .ac-mono { color: var(--wk-green-700); }
.ct-del, .cb-del, .mf-del, .ct-delsel { color: var(--wk-error); }
.wk-field, .ac .wk-field, .cf-title, .cf-field, .cf-modal input.wk-field, .tp-dialog input.wk-field, .tp-dialog textarea.wk-field { border-radius: var(--wk-r-input); border: 1px solid var(--wk-border-strong); background: var(--wk-surface-2); transition: border-color var(--wk-t), box-shadow var(--wk-t), background var(--wk-t); }
.ac select.wk-field, .tp-dialog select.wk-field { border-color: var(--wk-border-strong); background: #fff; }
.wk-field:focus, .ac .wk-field:focus, .cf-field:focus { outline: none; border-color: var(--wk-green); background: #fff; box-shadow: 0 0 0 3px rgba(42, 146, 69, .14); }
.wk-hint, .ac .wk-hint { background: var(--wk-selected); color: var(--wk-green-700); border-radius: var(--wk-r-btn); }
.wk-menu, .ct-pop { border-radius: var(--wk-r-panel); box-shadow: var(--wk-sh-pop); border: 1px solid var(--wk-border); }
.wk-menu button:hover, .ct-mi:hover { background: var(--wk-hover); }
.wk-modal { border-radius: 22px; box-shadow: 0 24px 70px rgba(20, 40, 25, .28); }
.wk-modal::backdrop { background: rgba(20, 30, 20, .45); }
.wk-mhead { border-bottom-color: var(--wk-border); font-weight: 600; }
.wk-toast, .toast { border-radius: 12px; box-shadow: var(--wk-sh-pop); }
.ct-chip { border-color: var(--wk-green); color: var(--wk-green); } .ct-chip.on { background: var(--wk-green); color: #fff; }
.wk-empty { color: var(--wk-text-2); }
.ct-loading { color: var(--wk-text-2); }

/* ---------- tables / grids ---------- */
.ct-table th { background: var(--wk-surface); color: var(--wk-text-2); font-weight: 500; font-size: 12.5px; letter-spacing: .01em; border-bottom: 1px solid var(--wk-border); }
.ct-table td { border-bottom-color: var(--wk-border); }
.ct-table tbody tr:hover { background: var(--wk-hover); } .ct-table tbody tr.sel { background: var(--wk-selected); }
.ct-foot { border-top-color: var(--wk-border); color: var(--wk-text-2); }
.ct-table input[type="checkbox"], .ct-check input { accent-color: var(--wk-green); }

/* ---------- Overview ---------- */
.ov-stat { border-radius: 12px; }
.ov-statwrap hr { border-top-color: var(--wk-border); }
.ov-tip { border-radius: 10px; border-color: var(--wk-border); box-shadow: var(--wk-sh-pop); }
.ov-skel i { background: linear-gradient(90deg, #eef2ee 25%, #f7faf7 50%, #eef2ee 75%); background-size: 200% 100%; }
.ov-leg:hover { background: var(--wk-hover); }

/* ---------- Website chat / API access / More features / Chat flows details ---------- */
.aa-tabs { border-bottom-color: var(--wk-border); }
.mf-chat, .mf-bubble { background: var(--wk-surface-2); }
.mf-logo, .tp-vmedia, .tp-ph-media, .bc-prev > .wk-stack { background: var(--wk-surface-2); }
.cf-box, .cf-sec, .cf-secnew, .cf-json, .ac-qrbox, .ac-wmsg, .ac-winst, .ac-keybox { background: var(--wk-surface-2); }
.ct-drop { background: var(--wk-surface-2); } .ct-drop:hover { background: var(--wk-hover); }
.cf-list { border-top-color: var(--wk-border); }

/* ---------- Links / external / 404 pages already use shell.css; module iframes keep their own pages ---------- */

/* ---------- narrow screens: panels go edge to edge ---------- */
@media (max-width: 899px) {
  :is(.ct, .ac, .aa, .bc, .cf, .cb, .mf) { padding: 0; gap: 0; }
  :is(.ct-card, .ov-card, .wc-card, .mf .wg, .cb .wg, .tp .wg, .bc .wg) { border-radius: var(--wk-r-panel); }
  :is(.ct-books, .ac-tabs, .aa-menu, .bc-tabs, .cf-side, .cb-tabs, .mf-tabs) { border-radius: 0; }
}