/* =====================================================================
   TechAI UI v2 — design system do layout novo
   ---------------------------------------------------------------------
   Identidade do site techai.com.br: navy #06101C -> teal #023C4A,
   menta #01FFCD como unico destaque. Tudo e token: os dois temas saem
   do mesmo conjunto, componentes nunca usam cor fixa.

   Escopo: so vale com <html class="tx">. O layout classico (menu antigo)
   nao recebe a classe e fica intocado — e o caminho de volta enquanto o
   layout novo esta em teste.

   Organizacao:
     1. Tokens (claro / escuro / sistema)
     2. Base
     3. Barra global (.tx-top)
     4. Workspace do agente (.tx-ws-*)
     5. Componentes (.tx-btn, .tx-badge, .tx-chip ...)
     6. Camada de compatibilidade: reveste Bootstrap 4/5 + SB Admin das
        telas existentes com os tokens, sem mexer no HTML delas.
   ===================================================================== */

/* ---------- 1. Tokens ---------- */
:root {
  --tx-bg:#F1F5F6; --tx-surface:#FFFFFF; --tx-surface-2:#F6F9F9; --tx-surface-3:#EAF0F1;
  --tx-line:#DCE5E7; --tx-line-strong:#C6D4D7;
  --tx-fg:#06101C; --tx-fg-2:#2A3D48; --tx-muted:#5B6F79; --tx-faint:#8C9CA4;
  --tx-accent:#00866F; --tx-accent-soft:rgba(0,150,124,.10); --tx-accent-line:rgba(0,134,111,.38);
  --tx-primary:#023C4A; --tx-on-primary:#FFFFFF; --tx-primary-hover:#04566A;
  --tx-ok:#0E8F64; --tx-ok-soft:rgba(14,143,100,.12);
  --tx-warn:#A86A0A; --tx-warn-soft:rgba(214,150,30,.15);
  --tx-bad:#C93838; --tx-bad-soft:rgba(201,56,56,.10);
  --tx-info:#1F6FD1; --tx-info-soft:rgba(31,111,209,.10);
  --tx-head-grad:linear-gradient(115deg,#FFFFFF 0%,#F2F9F8 55%,#DDEFEE 100%);
  --tx-glow:0 0 0 1px var(--tx-accent-line);
  --tx-shadow-pop:0 12px 40px rgba(6,16,28,.16),0 2px 6px rgba(6,16,28,.08);
  --tx-input-bg:#FFFFFF;
  --tx-font:'Barlow','Segoe UI',system-ui,-apple-system,sans-serif;
  --tx-mono:'JetBrains Mono',ui-monospace,'SF Mono',Menlo,monospace;
  --tx-r-sm:6px; --tx-r:10px; --tx-r-lg:14px;
  --tx-top-h:64px;
}
html[data-theme="dark"] {
  --tx-bg:#050C15; --tx-surface:#0A1520; --tx-surface-2:#0D1B28; --tx-surface-3:#112333;
  --tx-line:#162A3A; --tx-line-strong:#21394C;
  --tx-fg:#E6EEF0; --tx-fg-2:#C1D0D5; --tx-muted:#8398A3; --tx-faint:#5A6F7D;
  --tx-accent:#01FFCD; --tx-accent-soft:rgba(1,255,205,.08); --tx-accent-line:rgba(1,255,205,.36);
  --tx-primary:#01FFCD; --tx-on-primary:#03202A; --tx-primary-hover:#63FFE1;
  --tx-ok:#36D69B; --tx-ok-soft:rgba(54,214,155,.12);
  --tx-warn:#F2B84B; --tx-warn-soft:rgba(242,184,75,.13);
  --tx-bad:#FF7070; --tx-bad-soft:rgba(255,112,112,.12);
  --tx-info:#5FA8FF; --tx-info-soft:rgba(95,168,255,.12);
  --tx-head-grad:linear-gradient(115deg,#0A1520 0%,#081F2A 55%,#033845 120%);
  --tx-glow:0 0 0 1px rgba(1,255,205,.42),0 0 22px rgba(1,255,205,.14);
  --tx-shadow-pop:0 18px 50px rgba(0,0,0,.55),0 0 0 1px #1E3547;
  --tx-input-bg:#0D1B28;
  color-scheme:dark;
}

/* ---------- 2. Base ---------- */
html.tx, html.tx body { background:var(--tx-bg) !important; color:var(--tx-fg) !important; }
html.tx body { font-family:var(--tx-font) !important; font-size:14.5px; -webkit-font-smoothing:antialiased; }
html.tx :focus-visible { outline:2px solid var(--tx-accent); outline-offset:2px; }
html.tx #wrapper, html.tx #wrapper #content-wrapper, html.tx #content { background:var(--tx-bg) !important; }
html.tx .tx-ic { width:16px; height:16px; flex:none; stroke-width:1.8; }
html.tx .tx-ic-sm { width:14px; height:14px; }
html.tx .tx-ic-lg { width:20px; height:20px; }
/* Elementos da tela antiga que o layout novo substitui mas que o JS da tela
   ainda usa (ex.: ul#myTab). Classe e nao [hidden]: .d-sm-flex do Bootstrap
   tem !important e venceria o atributo. */
.tx-oculto { display:none !important; }
.tx-sr { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); }

/* ---------- 3. Barra global ---------- */
.tx-top { position:sticky; top:0; z-index:1030; display:flex; align-items:center; gap:18px; height:var(--tx-top-h); padding:0 24px;
  background:color-mix(in srgb,var(--tx-bg) 88%,transparent); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--tx-line); font-family:var(--tx-font); }
.tx-logo { display:flex; align-items:center; gap:10px; font-size:22px; font-weight:600; letter-spacing:-.02em; color:var(--tx-fg) !important; text-decoration:none !important; white-space:nowrap; }
.tx-logo b { font-weight:700; color:var(--tx-accent); }
.tx-logo-img { height:25px; width:auto; display:block; }
.tx-logo-escuro { display:none; }
html[data-theme="dark"] .tx-logo-claro { display:none; }
html[data-theme="dark"] .tx-logo-escuro { display:block; }
.tx-nav { display:flex; align-items:stretch; gap:2px; height:100%; margin:0 0 0 10px; padding:0; list-style:none; }
.tx-nav > li { position:relative; display:flex; }
.tx-nav-link { position:relative; display:flex; align-items:center; gap:8px; padding:0 14px; color:var(--tx-fg-2) !important; font-weight:500; font-size:14.5px;
  white-space:nowrap; background:none; border:0; text-decoration:none !important; cursor:pointer; }
.tx-nav-link:hover { color:var(--tx-fg) !important; }
.tx-nav-link[aria-current="page"] { color:var(--tx-accent) !important; }
.tx-nav-link[aria-current="page"]::after { content:""; position:absolute; left:12px; right:12px; bottom:-1px; height:2px; border-radius:2px;
  background:var(--tx-accent); box-shadow:0 0 12px var(--tx-accent-line); }
.tx-nav-caret { display:grid; place-items:center; width:22px; margin-left:-12px; padding:0; background:none; border:0; color:var(--tx-faint); cursor:pointer; border-radius:6px; }
.tx-nav-caret:hover, .tx-nav-caret[aria-expanded="true"] { color:var(--tx-accent); }
.tx-subtitle { display:flex; align-items:center; gap:10px; margin:0 0 14px; font-family:var(--tx-font); color:var(--tx-muted); font-size:13px; }
.tx-subtitle b { color:var(--tx-fg); font-size:20px; font-weight:600; }
.tx-top-r { margin-left:auto; display:flex; align-items:center; gap:10px; }
.tx-search { display:flex; align-items:center; gap:10px; width:280px; height:38px; padding:0 10px 0 12px; border:1px solid var(--tx-line);
  border-radius:var(--tx-r); background:var(--tx-surface); color:var(--tx-muted); font-size:13.5px; cursor:pointer; }
.tx-search:hover { border-color:var(--tx-line-strong); }
.tx-kbd { margin-left:auto; font-family:var(--tx-mono); font-size:11px; padding:2px 6px; border:1px solid var(--tx-line); border-radius:5px; color:var(--tx-muted); }
.tx-theme { display:flex; padding:3px; border:1px solid var(--tx-line); border-radius:var(--tx-r); background:var(--tx-surface); }
.tx-theme button { display:grid; place-items:center; width:30px; height:28px; border-radius:7px; color:var(--tx-faint); background:none; border:0; cursor:pointer; }
.tx-theme button[aria-pressed="true"] { background:var(--tx-accent-soft); color:var(--tx-accent); box-shadow:var(--tx-glow); }
.tx-user { display:flex; align-items:center; gap:10px; padding:4px 6px 4px 4px; border-radius:var(--tx-r); background:none; border:0; color:var(--tx-fg); cursor:pointer; }
.tx-user:hover { background:var(--tx-surface-3); }
.tx-user .who { text-align:left; line-height:1.2; }
.tx-user .who b { display:block; font-weight:600; font-size:14px; }
.tx-user .who span { font-size:12px; color:var(--tx-muted); }
.tx-avatar { display:grid; place-items:center; flex:none; border-radius:50%; font-weight:600; color:var(--tx-fg); font-size:13px; letter-spacing:.02em;
  background:color-mix(in srgb,var(--tx-accent) 18%,var(--tx-surface-3)); }
.tx-env { font-family:var(--tx-mono); font-size:11px; font-weight:600; padding:3px 8px; border-radius:6px; background:var(--tx-warn-soft); color:var(--tx-warn); letter-spacing:.06em; text-transform:uppercase; }

/* menus suspensos */
.tx-pop { position:absolute; z-index:1050; min-width:240px; padding:6px; border-radius:var(--tx-r-lg); background:var(--tx-surface); border:1px solid var(--tx-line);
  box-shadow:var(--tx-shadow-pop); display:none; font-family:var(--tx-font); }
.tx-pop.open { display:block; animation:tx-pop .14s ease-out; }
.tx-pop.r0 { right:0; } .tx-pop.l0 { left:0; }
.tx-pop .mi { display:flex; align-items:center; gap:10px; width:100%; padding:9px 10px; border-radius:8px; text-align:left; color:var(--tx-fg-2) !important;
  background:none; border:0; text-decoration:none !important; font-size:14px; cursor:pointer; }
.tx-pop .mi:hover, .tx-pop .mi.sel { background:var(--tx-surface-3); color:var(--tx-fg) !important; }
.tx-pop .mi small { display:block; color:var(--tx-muted); font-size:12px; }
.tx-pop .sep { height:1px; margin:6px 4px; background:var(--tx-line); }
.tx-pop .ph { padding:8px 10px 6px; font-size:11.5px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--tx-faint); }
@keyframes tx-pop { from { opacity:0; transform:translateY(-4px); } to { opacity:1; transform:none; } }

/* paleta de busca (Ctrl/Cmd+K) */
.tx-scrim { position:fixed; inset:0; z-index:1060; background:rgba(6,16,28,.45); display:none; justify-items:center; align-items:start; padding:12vh 16px 16px; }
.tx-scrim.open { display:grid; }
.tx-palette { width:min(640px,100%); border-radius:16px; background:var(--tx-surface); border:1px solid var(--tx-line); box-shadow:var(--tx-shadow-pop); overflow:hidden; font-family:var(--tx-font); }
.tx-palette .pin { display:flex; align-items:center; gap:10px; padding:0 16px; border-bottom:1px solid var(--tx-line); color:var(--tx-muted); }
.tx-palette .pin input { flex:1; height:54px; border:0; outline:0; background:transparent; font-size:16px; color:var(--tx-fg); }
.tx-palette .res { max-height:52vh; overflow-y:auto; padding:6px; }
.tx-palette .grp { padding:10px 10px 4px; font-size:11.5px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--tx-faint); }
.tx-palette .it { display:flex; align-items:center; gap:12px; width:100%; padding:10px 12px; border-radius:9px; text-align:left; color:var(--tx-fg) !important; text-decoration:none !important; }
.tx-palette .it small { margin-left:auto; color:var(--tx-muted); font-size:12px; max-width:45%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.tx-palette .it[aria-selected="true"] { background:var(--tx-accent-soft); color:var(--tx-accent) !important; box-shadow:var(--tx-glow); }
.tx-palette .foot { display:flex; gap:14px; padding:10px 16px; border-top:1px solid var(--tx-line); font-size:12px; color:var(--tx-muted); }
.tx-palette .empty { padding:28px; text-align:center; color:var(--tx-muted); }

/* ---------- 4. Workspace do agente ---------- */
.tx-crumbs { display:flex; align-items:center; gap:6px; margin:0 0 12px; font-size:13px; color:var(--tx-muted); font-family:var(--tx-font); }
.tx-crumbs a { color:var(--tx-muted) !important; }
.tx-crumbs a:hover { color:var(--tx-accent) !important; text-decoration:none; }
.tx-crumbs b { color:var(--tx-fg); font-weight:500; }
.tx-ws-head { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:24px; padding:20px 22px; border-radius:18px; border:1px solid var(--tx-line);
  background:var(--tx-head-grad); font-family:var(--tx-font); }
.tx-ws-id { display:flex; gap:18px; min-width:0; }
.tx-ag-av { display:grid; place-items:center; flex:none; color:#fff; font-weight:700; letter-spacing:-.02em; position:relative; overflow:hidden; }
.tx-ag-av img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:1; }
.tx-ag-av::after { content:""; position:absolute; inset:0; background:radial-gradient(circle at 30% 20%,rgba(255,255,255,.28),transparent 55%); pointer-events:none; }
.tx-ws-id .tx-ag-av { width:72px; height:72px; font-size:25px; border-radius:21px; box-shadow:var(--tx-glow); }
.tx-ws-name { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.tx-ws-name h1 { margin:0; font-size:25px !important; font-weight:600; letter-spacing:-.01em; color:var(--tx-fg) !important; }
.tx-ws-desc { margin:4px 0 10px; color:var(--tx-fg-2); font-size:15px; }
.tx-ws-meta { display:flex; align-items:center; gap:12px; flex-wrap:wrap; color:var(--tx-fg-2); font-size:14px; }
.tx-ws-meta .vr { width:1px; height:18px; background:var(--tx-line-strong); }
.tx-ws-ctl { display:flex; align-items:center; gap:10px; border-left:1px solid var(--tx-line); padding-left:24px; }
.tx-ws-ctl .tx-mono-id { font-family:var(--tx-mono); font-size:12px; color:var(--tx-muted); }
.tx-switch { display:inline-flex; align-items:center; gap:5px; height:30px; padding:0 9px; border-radius:8px; color:var(--tx-muted); font-size:12.5px;
  border:1px solid var(--tx-line); background:var(--tx-surface); cursor:pointer; }
.tx-switch:hover { color:var(--tx-accent); border-color:var(--tx-accent-line); }
.tx-ws-tabs { position:sticky; top:var(--tx-top-h); z-index:1020; display:flex; align-items:center; gap:6px; margin:14px -24px 18px; padding:0 24px;
  background:color-mix(in srgb,var(--tx-bg) 92%,transparent); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); border-bottom:1px solid var(--tx-line); font-family:var(--tx-font); }
.tx-ws-mini { display:flex; align-items:center; gap:8px; max-width:0; opacity:0; overflow:hidden; white-space:nowrap; transition:max-width .25s,opacity .2s,margin .25s; font-weight:600; color:var(--tx-fg); }
.tx-ws-mini .tx-ag-av { width:26px; height:26px; border-radius:8px; font-size:11px; }
.tx-ws-tabs.stuck .tx-ws-mini { max-width:320px; opacity:1; margin-right:10px; }
.tx-tabs { display:flex; gap:2px; overflow-x:auto; scrollbar-width:none; margin:0; padding:0; list-style:none; border:0 !important; }
.tx-tabs::-webkit-scrollbar { display:none; }
.tx-tabs .tx-tab, html.tx .tx-tabs .nav-link.tx-tab { position:relative; display:flex; align-items:center; gap:9px; height:50px; padding:0 15px; color:var(--tx-fg-2) !important;
  font-weight:500; font-size:15px; white-space:nowrap; background:none !important; border:0 !important; border-radius:0 !important; text-decoration:none !important; cursor:pointer; }
.tx-tabs .tx-tab:hover { color:var(--tx-fg) !important; }
.tx-tabs .tx-tab.active, .tx-tabs .tx-tab[aria-current="page"] { color:var(--tx-accent) !important; }
.tx-tabs .tx-tab.active::after, .tx-tabs .tx-tab[aria-current="page"]::after { content:""; position:absolute; left:12px; right:12px; bottom:-1px; height:2px; border-radius:2px;
  background:var(--tx-accent); box-shadow:0 0 12px var(--tx-accent-line); }
.tx-tabs .tx-tab i.fas, .tx-tabs .tx-tab i.far { display:none; } /* icones fa antigos viram PNG em layout_20250928.css — a aba usa lucide */
.tx-subtabs { display:flex; gap:6px; flex-wrap:wrap; margin:-4px 0 16px; padding:0; list-style:none; border:0 !important; }
.tx-subtabs .nav-link { height:32px; display:inline-flex; align-items:center; gap:7px; padding:0 13px !important; border-radius:999px !important; border:1px solid var(--tx-line) !important;
  background:var(--tx-surface) !important; color:var(--tx-fg-2) !important; font-size:13.5px; font-weight:500; }
.tx-subtabs .nav-link.active { border-color:var(--tx-accent-line) !important; color:var(--tx-accent) !important; background:var(--tx-accent-soft) !important; box-shadow:var(--tx-glow); }
.tx-subtabs .nav-link i.fas, .tx-subtabs .nav-link i.far { display:none; }

/* ---------- 5. Componentes ---------- */
.tx-btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; height:38px; padding:0 14px; border-radius:var(--tx-r); border:1px solid var(--tx-line);
  background:var(--tx-surface); color:var(--tx-fg) !important; font-weight:500; white-space:nowrap; text-decoration:none !important; cursor:pointer; font-family:var(--tx-font); }
.tx-btn:hover { border-color:var(--tx-line-strong); background:var(--tx-surface-2); }
.tx-btn-primary { background:var(--tx-primary); border-color:var(--tx-primary); color:var(--tx-on-primary) !important; font-weight:600; }
.tx-btn-primary:hover { background:var(--tx-primary-hover); border-color:var(--tx-primary-hover); }
.tx-btn-sm { height:30px; padding:0 10px; font-size:13px; border-radius:8px; }
.tx-badge { display:inline-flex; align-items:center; gap:6px; height:24px; padding:0 10px; border-radius:999px; font-size:12.5px; font-weight:600; white-space:nowrap; font-family:var(--tx-font); }
.tx-badge .d { width:7px; height:7px; border-radius:50%; background:currentColor; }
.tx-b-ok { background:var(--tx-ok-soft); color:var(--tx-ok); }
.tx-b-muted { background:var(--tx-surface-3); color:var(--tx-muted); }
.tx-b-warn { background:var(--tx-warn-soft); color:var(--tx-warn); }
.tx-b-plan { background:var(--tx-info-soft); color:var(--tx-info); border-radius:7px; }
.tx-b-accent { background:var(--tx-accent-soft); color:var(--tx-accent); }
.tx-chb { display:inline-grid; place-items:center; flex:none; width:26px; height:26px; border-radius:50%; background:color-mix(in srgb,var(--c) 15%,transparent); color:var(--c); }
.tx-chb svg { width:58%; height:58%; }
.tx-banner { display:flex; align-items:center; gap:12px; padding:12px 16px; border-radius:var(--tx-r); margin-bottom:16px; border:1px solid; font-family:var(--tx-font); }
.tx-banner.warn { background:var(--tx-warn-soft); border-color:color-mix(in srgb,var(--tx-warn) 40%,transparent); color:var(--tx-fg); }
.tx-banner.info { background:var(--tx-accent-soft); border-color:var(--tx-accent-line); color:var(--tx-fg); }
#tx-toasts { position:fixed; right:20px; bottom:20px; z-index:1070; display:grid; gap:8px; }
.tx-toast { display:flex; align-items:center; gap:10px; padding:12px 16px; border-radius:12px; background:var(--tx-surface); border:1px solid var(--tx-accent-line);
  box-shadow:var(--tx-shadow-pop),var(--tx-glow); font-weight:500; color:var(--tx-fg); font-family:var(--tx-font); }

/* ---------- 6. Compatibilidade: telas existentes ---------- */
/* Estrutura */
html.tx .container-fluid { padding:20px 24px 40px !important; max-width:1680px; }
/* Conteudo antigo com largura fixa (iframe de 550px, tabelas largas) empurrava a
   pagina para alem da tela no celular e cortava a barra. clip, e nao hidden/auto:
   nao cria container de rolagem, entao as abas grudadas continuam funcionando. */
html.tx #content { overflow-x:clip; }
html.tx iframe { max-width:100%; }
html.tx .table-responsive, html.tx .dataTables_wrapper { overflow-x:auto; }
html.tx .sticky-footer, html.tx footer.sticky-footer { background:transparent !important; color:var(--tx-muted) !important; padding:28px 0 8px !important; }
html.tx h1, html.tx .h1, html.tx h2, html.tx h3, html.tx h4, html.tx h5, html.tx h6, html.tx .h3, html.tx .h4, html.tx .h5 { color:var(--tx-fg) !important; font-family:var(--tx-font); font-weight:600; letter-spacing:-.01em; }
html.tx .text-gray-900, html.tx .text-gray-800, html.tx .text-dark, html.tx .text-body { color:var(--tx-fg) !important; }
html.tx .text-gray-700, html.tx .text-gray-600 { color:var(--tx-fg-2) !important; }
html.tx .text-gray-500, html.tx .text-gray-400, html.tx .text-gray-300, html.tx .text-muted, html.tx .text-secondary { color:var(--tx-muted) !important; }
html.tx .text-primary { color:var(--tx-accent) !important; }
html.tx .text-success { color:var(--tx-ok) !important; }
html.tx .text-danger { color:var(--tx-bad) !important; }
html.tx .text-warning { color:var(--tx-warn) !important; }
html.tx .text-info { color:var(--tx-info) !important; }
html.tx a { color:var(--tx-accent); }
html.tx hr { border-color:var(--tx-line); }
html.tx .bg-white, html.tx .bg-light { background-color:var(--tx-surface) !important; color:var(--tx-fg) !important; }
html.tx .bg-gray-100, html.tx .bg-gray-200 { background-color:var(--tx-surface-2) !important; }
html.tx .border, html.tx .border-top, html.tx .border-bottom, html.tx .border-left, html.tx .border-right { border-color:var(--tx-line) !important; }
html.tx .shadow, html.tx .shadow-sm { box-shadow:none !important; }

/* Cards e containers */
html.tx .card, html.tx .info-container, html.tx .delete-container {
  background:var(--tx-surface) !important; color:var(--tx-fg) !important; border:1px solid var(--tx-line) !important; border-radius:var(--tx-r-lg) !important; box-shadow:none !important; }
html.tx .card-header { background:transparent !important; color:var(--tx-fg) !important; border-bottom:1px solid var(--tx-line) !important; font-weight:600; font-size:15px; padding:14px 18px !important; }
html.tx .card-header .text-primary, html.tx .card-header h6 { color:var(--tx-fg) !important; }
html.tx .card-body { background:transparent !important; color:var(--tx-fg) !important; }
html.tx .card-footer { background:transparent !important; border-top:1px solid var(--tx-line) !important; }
html.tx .info-container h2, html.tx .delete-container h2 { color:var(--tx-fg) !important; font-size:18px; }
html.tx .tab-content { background:transparent !important; border:0 !important; }
html.tx .kpi-box, html.tx .kpi-item { background:transparent !important; }
html.tx .kpi-number { color:var(--tx-fg) !important; font-family:var(--tx-font); font-weight:600 !important; letter-spacing:-.02em; }
html.tx .kpi-label { color:var(--tx-muted) !important; letter-spacing:.08em; font-size:12px; }

/* Abas antigas (Bootstrap) que nao foram migradas */
html.tx .nav-tabs { border-bottom:1px solid var(--tx-line) !important; }
html.tx .nav-tabs .nav-link { color:var(--tx-fg-2) !important; border:0 !important; border-bottom:2px solid transparent !important; background:transparent !important; border-radius:0 !important; font-weight:500; }
html.tx .nav-tabs .nav-link:hover { color:var(--tx-fg) !important; }
html.tx .nav-tabs .nav-link.active { color:var(--tx-accent) !important; border-bottom-color:var(--tx-accent) !important; }
html.tx .nav-pills .nav-link { color:var(--tx-fg-2) !important; border-radius:8px !important; }
html.tx .nav-pills .nav-link.active, html.tx .nav-pills .show > .nav-link { background:var(--tx-accent-soft) !important; color:var(--tx-accent) !important; box-shadow:var(--tx-glow); }

/* Formularios */
html.tx .form-control, html.tx .custom-select, html.tx .form-select, html.tx input[type="text"], html.tx input[type="email"], html.tx input[type="password"],
html.tx input[type="number"], html.tx input[type="date"], html.tx input[type="datetime-local"], html.tx input[type="search"], html.tx input[type="url"], html.tx input[type="tel"], html.tx select, html.tx textarea {
  background-color:var(--tx-input-bg) !important; color:var(--tx-fg) !important; border:1px solid var(--tx-line) !important; border-radius:var(--tx-r) !important; }
html.tx .form-control:focus, html.tx .custom-select:focus, html.tx .form-select:focus, html.tx input:focus, html.tx select:focus, html.tx textarea:focus {
  border-color:var(--tx-accent-line) !important; box-shadow:0 0 0 3px var(--tx-accent-soft) !important; outline:0; }
html.tx .form-control::placeholder, html.tx input::placeholder, html.tx textarea::placeholder { color:var(--tx-faint) !important; }
html.tx .form-control:disabled, html.tx .form-control[readonly] { background-color:var(--tx-surface-2) !important; color:var(--tx-muted) !important; }
html.tx .input-group-text { background:var(--tx-surface-3) !important; color:var(--tx-fg-2) !important; border-color:var(--tx-line) !important; }
html.tx .custom-control-label::before { background-color:var(--tx-input-bg); border-color:var(--tx-line-strong); }
html.tx .custom-control-input:checked ~ .custom-control-label::before, html.tx .form-check-input:checked { background-color:var(--tx-accent) !important; border-color:var(--tx-accent) !important; }
html.tx input[type="range"] { accent-color:var(--tx-accent); background:transparent !important; border:0 !important; }
html.tx input[type="checkbox"], html.tx input[type="radio"] { accent-color:var(--tx-accent); }

/* Botoes */
html.tx .btn { border-radius:var(--tx-r) !important; font-weight:500; font-family:var(--tx-font); }
html.tx .btn-primary, html.tx .btn-dark, html.tx .btn[style*="background-color: black"] {
  background:var(--tx-primary) !important; border-color:var(--tx-primary) !important; color:var(--tx-on-primary) !important; font-weight:600; }
html.tx .btn-primary:hover, html.tx .btn-dark:hover { background:var(--tx-primary-hover) !important; border-color:var(--tx-primary-hover) !important; }
html.tx .btn-secondary, html.tx .btn-light, html.tx .btn-outline-secondary, html.tx .btn-outline-primary, html.tx .btn-outline-dark {
  background:var(--tx-surface) !important; border:1px solid var(--tx-line) !important; color:var(--tx-fg) !important; }
html.tx .btn-secondary:hover, html.tx .btn-light:hover, html.tx .btn-outline-secondary:hover, html.tx .btn-outline-primary:hover { background:var(--tx-surface-2) !important; border-color:var(--tx-line-strong) !important; }
html.tx .btn-success { background:var(--tx-ok) !important; border-color:var(--tx-ok) !important; color:#fff !important; }
html.tx .btn-danger { background:var(--tx-bad) !important; border-color:var(--tx-bad) !important; color:#fff !important; }
html.tx .btn-outline-danger { background:transparent !important; border-color:var(--tx-bad) !important; color:var(--tx-bad) !important; }
html.tx .btn-warning { background:var(--tx-warn) !important; border-color:var(--tx-warn) !important; color:#fff !important; }
html.tx .btn-link { color:var(--tx-accent) !important; }
html.tx .btn-back { color:var(--tx-muted) !important; }

/* Tabelas e DataTables */
html.tx .table { color:var(--tx-fg) !important; background:transparent !important; }
html.tx .table th, html.tx .table td { border-color:var(--tx-line) !important; vertical-align:middle; }
html.tx .table thead th, html.tx .thead-dark th, html.tx .thead-light th, html.tx .table-dark th {
  background:var(--tx-surface-2) !important; color:var(--tx-muted) !important; border-color:var(--tx-line) !important; font-size:12px; font-weight:600; letter-spacing:.04em; text-transform:uppercase; }
html.tx .table-striped tbody tr:nth-of-type(odd) { background:color-mix(in srgb,var(--tx-surface-3) 45%,transparent) !important; }
html.tx .table-hover tbody tr:hover { background:var(--tx-accent-soft) !important; color:var(--tx-fg) !important; }
html.tx .table-bordered, html.tx .table-bordered th, html.tx .table-bordered td { border-color:var(--tx-line) !important; }
html.tx table.dataTable tbody tr { background:transparent !important; }
html.tx .dataTables_wrapper, html.tx .dataTables_wrapper label, html.tx .dataTables_info { color:var(--tx-muted) !important; }
html.tx .page-link { background:var(--tx-surface) !important; border-color:var(--tx-line) !important; color:var(--tx-fg-2) !important; }
html.tx .page-item.active .page-link { background:var(--tx-accent-soft) !important; border-color:var(--tx-accent-line) !important; color:var(--tx-accent) !important; }
html.tx .page-item.disabled .page-link { color:var(--tx-faint) !important; }

/* Dropdowns, modais, alertas, badges, listas */
html.tx .dropdown-menu { background:var(--tx-surface) !important; border:1px solid var(--tx-line) !important; border-radius:var(--tx-r-lg) !important; box-shadow:var(--tx-shadow-pop) !important; }
html.tx .dropdown-item { color:var(--tx-fg-2) !important; border-radius:8px; }
html.tx .dropdown-item:hover, html.tx .dropdown-item:focus { background:var(--tx-surface-3) !important; color:var(--tx-fg) !important; }
html.tx .dropdown-divider { border-color:var(--tx-line) !important; }
html.tx .modal-content { background:var(--tx-surface) !important; color:var(--tx-fg) !important; border:1px solid var(--tx-line) !important; border-radius:var(--tx-r-lg) !important; }
html.tx .modal-header, html.tx .modal-footer { border-color:var(--tx-line) !important; }
html.tx .close, html.tx .btn-close { color:var(--tx-fg) !important; opacity:.6; }
html[data-theme="dark"].tx .btn-close { filter:invert(1); }
html.tx .alert { border-radius:var(--tx-r) !important; border:1px solid var(--tx-line) !important; }
html.tx .alert-success { background:var(--tx-ok-soft) !important; color:var(--tx-fg) !important; border-color:color-mix(in srgb,var(--tx-ok) 40%,transparent) !important; }
html.tx .alert-danger { background:var(--tx-bad-soft) !important; color:var(--tx-fg) !important; border-color:color-mix(in srgb,var(--tx-bad) 40%,transparent) !important; }
html.tx .alert-warning { background:var(--tx-warn-soft) !important; color:var(--tx-fg) !important; border-color:color-mix(in srgb,var(--tx-warn) 40%,transparent) !important; }
html.tx .alert-info, html.tx .alert-primary, html.tx .alert-secondary, html.tx .alert-light { background:var(--tx-accent-soft) !important; color:var(--tx-fg) !important; border-color:var(--tx-accent-line) !important; }
html.tx .badge { border-radius:999px; font-weight:600; }
html.tx .badge-success, html.tx .bg-success { background:var(--tx-ok-soft) !important; color:var(--tx-ok) !important; }
html.tx .badge-warning, html.tx .bg-warning { background:var(--tx-warn-soft) !important; color:var(--tx-warn) !important; }
html.tx .badge-danger, html.tx .bg-danger { background:var(--tx-bad-soft) !important; color:var(--tx-bad) !important; }
html.tx .badge-info, html.tx .badge-primary, html.tx .bg-info, html.tx .bg-primary { background:var(--tx-info-soft) !important; color:var(--tx-info) !important; }
html.tx .badge-secondary, html.tx .badge-light, html.tx .badge-dark, html.tx .bg-secondary { background:var(--tx-surface-3) !important; color:var(--tx-muted) !important; }
html.tx .list-group-item { background:var(--tx-surface) !important; color:var(--tx-fg) !important; border-color:var(--tx-line) !important; }
html.tx .list-group-item.active { background:var(--tx-accent-soft) !important; color:var(--tx-accent) !important; border-color:var(--tx-accent-line) !important; }
html.tx .progress { background:var(--tx-surface-3) !important; }
html.tx .progress-bar { background:var(--tx-accent) !important; }
html.tx code, html.tx pre { color:var(--tx-fg-2); background:var(--tx-surface-3); border-radius:6px; }

/* select2 */
html.tx .select2-container--bootstrap4 .select2-selection, html.tx .select2-container--default .select2-selection--single, html.tx .select2-container--default .select2-selection--multiple {
  background:var(--tx-input-bg) !important; border:1px solid var(--tx-line) !important; border-radius:var(--tx-r) !important; color:var(--tx-fg) !important; }
html.tx .select2-container .select2-selection__rendered { color:var(--tx-fg) !important; }
html.tx .select2-dropdown { background:var(--tx-surface) !important; border-color:var(--tx-line) !important; color:var(--tx-fg) !important; }
html.tx .select2-results__option--highlighted, html.tx .select2-container--bootstrap4 .select2-results__option--highlighted { background:var(--tx-accent-soft) !important; color:var(--tx-accent) !important; }
html.tx .select2-search__field { background:var(--tx-input-bg) !important; color:var(--tx-fg) !important; }

/* Campos: o CSS antigo pinta um degrade claro por baixo do fundo */
html.tx .form-control, html.tx .custom-select, html.tx select, html.tx input, html.tx textarea { background-image:none !important; }
html.tx .custom-select, html.tx select.form-control { background-image:none !important; }
html[data-theme="dark"].tx input[type="date"]::-webkit-calendar-picker-indicator { filter:invert(1); opacity:.7; }

/* Telas com CSS proprio (classes com fundo claro fixo no <style> da pagina) */
html.tx .ckp { --ckp-surface:var(--tx-surface); --ckp-sunk:var(--tx-surface-2); --ckp-border:var(--tx-line); --ckp-border-sf:var(--tx-line);
  --ckp-ink:var(--tx-fg); --ckp-ink-2:var(--tx-fg-2); --ckp-ink-3:var(--tx-muted); --ckp-accent:var(--tx-accent); --ckp-q0:var(--tx-surface-3); }
html.tx .ckp-modal, html.tx .modal_cad-content, html.tx .plan-card, html.tx .estatistica, html.tx .insight-meta-bar {
  background:var(--tx-surface) !important; color:var(--tx-fg) !important; border-color:var(--tx-line) !important; }
html.tx .ckp-agente-item:hover { background:var(--tx-surface-3) !important; }
html.tx .auto-width-table th { background:var(--tx-surface-2) !important; color:var(--tx-muted) !important; }
html.tx .licoes-chip { background:var(--tx-surface-3) !important; color:var(--tx-fg-2) !important; border-color:var(--tx-line) !important; }
/* Caixa de entrada */
html.tx .thread-header, html.tx .thread-footer { background:var(--tx-surface) !important; border-color:var(--tx-line) !important; color:var(--tx-fg) !important; }
html.tx .thread-body, html.tx .message-list { background:var(--tx-surface-2) !important; border-color:var(--tx-line) !important; }
html.tx .bubble-cliente { background:var(--tx-surface) !important; border-color:var(--tx-line) !important; color:var(--tx-fg) !important; }
html.tx .bubble-bot { background:var(--tx-accent-soft) !important; border-color:var(--tx-accent-line) !important; color:var(--tx-fg) !important; }
html.tx .bubble-humano { background:var(--tx-info-soft) !important; border-color:color-mix(in srgb,var(--tx-info) 35%,transparent) !important; color:var(--tx-fg) !important; }
html.tx .bubble-meta { color:var(--tx-muted) !important; }

/* Base de conhecimento (aba Source) — regras de techAiGeral.css com branco/preto fixos */
html.tx #arquivos .nav-pills { background:var(--tx-surface) !important; border:1px solid var(--tx-line) !important; border-radius:var(--tx-r-lg) !important; padding:6px !important; }
html.tx #arquivos .nav-pills .nav-link { color:var(--tx-fg-2) !important; background:transparent !important; text-align:left; font-weight:500; }
html.tx #arquivos .nav-pills .nav-link:hover { background:var(--tx-surface-3) !important; color:var(--tx-fg) !important; }
html.tx #arquivos .nav-pills .nav-link.active { background:var(--tx-accent-soft) !important; color:var(--tx-accent) !important; box-shadow:var(--tx-glow); }
html.tx #arquivos .file-section .upload-area { background:var(--tx-surface-2) !important; border:1.5px dashed var(--tx-accent-line) !important; color:var(--tx-fg-2) !important; border-radius:var(--tx-r-lg) !important; }
html.tx #arquivos .file-section .upload-area:hover { background:var(--tx-accent-soft) !important; }
html.tx #arquivos .file-section .upload-area i.upload-icon, html.tx #arquivos .file-section .upload-area p,
html.tx #arquivos .file-section .file-types { color:var(--tx-muted) !important; }
html.tx .file-preview { background:var(--tx-surface-2) !important; border-color:var(--tx-line) !important; color:var(--tx-fg-2) !important; }
html.tx .file-preview p, html.tx .file-preview .file-name { color:var(--tx-fg-2) !important; }
html.tx #arquivos .file-section table, html.tx #arquivos .file-section thead { background:transparent !important; color:var(--tx-fg) !important; }
html.tx .col-2 h5 { color:var(--tx-fg) !important; }
html.tx .col-2 ul, html.tx .col-2 form { background:var(--tx-surface) !important; border:1px solid var(--tx-line) !important; border-radius:var(--tx-r-lg) !important; color:var(--tx-fg) !important; }
html.tx .col-2 ul li { color:var(--tx-fg-2) !important; }
html.tx #link5 { background:var(--tx-surface) !important; color:var(--tx-fg) !important; }
html.tx #arquivos .tab-content textarea, html.tx #arquivos .tab-content input[type="text"] { background:var(--tx-input-bg) !important; color:var(--tx-fg) !important; }

/* Seguranca (aba Canais): os dois campos ficavam lado a lado sem coluna e o
   rotulo do interruptor encostava em "Dominios Permitidos" */
html.tx #security-container { display:flex; flex-direction:column; gap:14px; margin:0; }
html.tx #security-container .form-group { margin:0; max-width:560px; }
html.tx #security-container textarea { min-height:90px; }

/* Botoes pretos e textos pretos inline (com e sem espaco depois dos dois-pontos) */
html.tx .btn[style*="background-color:black"], html.tx button[style*="background-color:black"], html.tx button[style*="background-color: black"] {
  background:var(--tx-primary) !important; border-color:var(--tx-primary) !important; color:var(--tx-on-primary) !important; }
html[data-theme="dark"].tx :is(p, span, label, td, th, h1, h2, h3, h4, h5, h6, div, small, li, textarea, table, strong, b, em, a, i):is(
    [style*="color:black"], [style*="color: black"], [style*="color:#000"], [style*="color: #000"],
    [style*="color:#333"], [style*="color: #333"], [style*="color:#343a40"], [style*="color: #343a40"]):not(.btn):not(button) {
  color:var(--tx-fg) !important; }

/* Botoes de cor no escuro: os tons claros do tema escuro pedem texto escuro */
html[data-theme="dark"].tx :is(.btn-success, .btn-danger, .btn-warning, .btn-info) { color:#06101C !important; }
html[data-theme="dark"].tx :is(.btn-success, .btn-danger, .btn-warning, .btn-info) * { color:inherit !important; }
/* .btn-save cinza (#999) das telas de cliente e usuario */
html.tx .btn-save { background:var(--tx-primary) !important; color:var(--tx-on-primary) !important; border:0 !important; font-weight:600; }
html.tx .btn-save:hover { background:var(--tx-primary-hover) !important; }
/* Paginacao do DataTables (o CSS dele pinta a pagina atual de cinza) */
html.tx .dataTables_wrapper .dataTables_paginate .paginate_button { color:var(--tx-fg-2) !important; background:transparent !important; border:1px solid transparent !important; border-radius:8px; }
html.tx .dataTables_wrapper .dataTables_paginate .paginate_button:hover { background:var(--tx-surface-3) !important; color:var(--tx-fg) !important; border-color:var(--tx-line) !important; }
html.tx .dataTables_wrapper .dataTables_paginate .paginate_button.current,
html.tx .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover { background:var(--tx-accent-soft) !important; color:var(--tx-accent) !important; border-color:var(--tx-accent-line) !important; }
html.tx .dataTables_wrapper .dataTables_paginate .paginate_button.disabled { color:var(--tx-muted) !important; background:transparent !important; }
html.tx .page-item.disabled .page-link { color:var(--tx-muted) !important; }
/* Cockpit: verdes/amarelos proprios trocados pelos do tema (contraste nos dois) */
html.tx .ckp { --ckp-good:var(--tx-ok); --ckp-warn:var(--tx-warn); --ckp-crit:var(--tx-bad); }
html.tx .ckp .ckp-delta.up, html.tx .ckp .ckp-pill.good { background:var(--tx-ok-soft) !important; color:var(--tx-ok) !important; }
html.tx .ckp .ckp-pill.warn { background:var(--tx-warn-soft) !important; color:var(--tx-warn) !important; }
html.tx .ckp .ckp-pager-ctrl button[aria-current="true"] { color:var(--tx-on-primary) !important; }

/* ManyChat: perfil ativo/inativo com preto/cinza fixos (techAiGeral.css) */
html.tx .profile-activated { color:var(--tx-fg) !important; }
html.tx .profile-deactivated { color:var(--tx-muted) !important; }

/* Rodape: faixa "dev" com azul claro fixo */
html.tx .sticky-footer [style*="#cce5ff"] { background:var(--tx-info-soft) !important; color:var(--tx-info) !important; border-radius:8px; }

/* Ilhas com fundo fixo inline nas telas antigas — so no escuro */
html[data-theme="dark"].tx [style*="background-color: white"], html[data-theme="dark"].tx [style*="background-color:white"],
html[data-theme="dark"].tx [style*="background-color: #fff"], html[data-theme="dark"].tx [style*="background-color:#fff"],
html[data-theme="dark"].tx [style*="background-color: #FFF"], html[data-theme="dark"].tx [style*="background: #fff"],
html[data-theme="dark"].tx [style*="background:#fff"], html[data-theme="dark"].tx [style*="background-color: #f8f9fa"],
html[data-theme="dark"].tx [style*="background-color: #f0f0f0"], html[data-theme="dark"].tx [style*="background-color: #D6E0EA"],
html[data-theme="dark"].tx [style*="background-color:#f8f9fa"], html[data-theme="dark"].tx [style*="background: white"] {
  background-color:var(--tx-surface) !important; color:var(--tx-fg) !important; }

html[data-theme="dark"].tx img[src*="logo"]:not(.tx-keep) { filter:none; }

/* ---------- Responsivo ---------- */
@media (max-width:1280px) { .tx-search { width:200px; } }
@media (max-width:1199px) {
  .tx-search .lbl, .tx-search .tx-kbd { display:none; }
  .tx-search { width:38px; padding:0; justify-content:center; border:0; background:transparent; }
  .tx-ws-head { grid-template-columns:minmax(0,1fr); }
  .tx-ws-ctl { border-left:0; padding-left:0; flex-wrap:wrap; }
}
@media (max-width:900px) {
  .tx-top { flex-wrap:wrap; height:auto; padding:10px 16px 0; gap:8px; }
  .tx-nav { order:3; width:100%; margin:0 -16px; padding:0 8px; overflow-x:auto; scrollbar-width:none; height:46px; }
  :root { --tx-top-h:112px; }
  .tx-user .who { display:none; }
  html.tx .container-fluid { padding:16px 16px 40px !important; }
  .tx-ws-tabs { margin:12px -16px 16px; padding:0 16px; }
}
@media (max-width:640px) {
  .tx-theme { display:none; }
  .tx-ws-id .tx-ag-av { width:54px; height:54px; font-size:19px; border-radius:16px; }
  .tx-ws-name h1 { font-size:21px !important; }
  .tx-ws-head { padding:16px; }
  .tx-switch span { display:none; }
}
@media (prefers-reduced-motion:reduce) { .tx-pop.open, .tx-ws-mini { animation:none !important; transition:none !important; } }