/* =============================================================================
   Tema do sistema — Design System "tesla"
   Fonte única de verdade: /design-system/tesla/DESIGN.md (+ preview.html)

   Carregado POR ÚLTIMO (depois de volt.css, beholder.css e responsive.css):
   sobrescreve os componentes Bootstrap/Volt usados em todas as telas, sem
   alterar markup de lógica.

   Regras do design system aplicadas aqui:
   - Um único azul (Electric Blue #3E6AE1), só no botão de ação principal.
   - Superfícies: branco (#FFFFFF) sobre Light Ash (#F4F4F4); Carbon Dark
     (#171A20) só em contexto escuro (gráfico, botão flutuante).
   - Texto: Carbon Dark (títulos) / Graphite (corpo) / Pewter (terciário).
   - Tipografia: pesos 400 e 500 apenas, letter-spacing normal, sem caixa alta
     (exceto o wordmark, como o "TESLA" espaçado).
   - Raio 4px em tudo que é interativo; sem sombra, sem gradiente, sem borda
     em cards (separação por superfície e espaço).
   - Transições 0.33s só de cor/fundo/borda — nada de scale/translate.
   - Exceção consciente: cores semânticas (lucro/prejuízo/status) — o site da
     Tesla não precisa delas, um sistema de trade precisa. Usadas só como tinta.
   - Tema claro/escuro: as regras usam só tokens semânticos (--ts-surface,
     --ts-text…); o tema escuro apenas redefine esses tokens.
   ============================================================================= */

/* ── Tokens ──────────────────────────────────────────────────────────────── */
/* Paleta Tesla (constantes — nunca mudam com o tema) */
:root {
    --ts-blue: #3E6AE1;

    --ts-carbon: #171A20;
    --ts-graphite: #393C41;
    --ts-pewter: #5C5E62;
    --ts-silver-fog: #8E8E8E;
    --ts-cloud: #EEEEEE;
    --ts-pale-silver: #D0D1D2;
    --ts-white: #FFFFFF;
    --ts-ash: #F4F4F4;

    --ts-r: 4px;
    --ts-r-lg: 12px;

    --ts-ease: cubic-bezier(0.5, 0, 0, 0.75);
    --ts-t: 0.33s;

    --ts-font: 'Universal Sans Text', 'Inter', -apple-system, Arial, sans-serif;
    --ts-font-display: 'Universal Sans Display', 'Inter', -apple-system, Arial, sans-serif;
}

/* Tokens semânticos — tema CLARO (padrão). O resto do arquivo só usa estes. */
:root {
    color-scheme: light;

    --ts-bg: #F4F4F4;                  /* fundo da página (Light Ash) */
    --ts-surface: #FFFFFF;             /* cards, menu, campos, tabelas */
    --ts-surface-alt: #F4F4F4;         /* hover de linha, botões utilitários, ícones */
    --ts-surface-hover: #EEEEEE;       /* hover dos botões utilitários */

    --ts-text-strong: #171A20;         /* títulos, rótulos (Carbon Dark) */
    --ts-text: #393C41;                /* corpo (Graphite) */
    --ts-text-muted: #5C5E62;          /* terciário, links (Pewter) */
    --ts-text-subtle: #8E8E8E;         /* placeholder (Silver Fog) */
    --ts-text-disabled: #D0D1D2;

    --ts-divider: #EEEEEE;             /* linhas divisórias (Cloud Gray) */
    --ts-border: #D0D1D2;              /* borda de campos (Pale Silver) */

    --ts-inverse: #171A20;             /* superfície de contraste (botão escuro, página ativa) */
    --ts-inverse-hover: #393C41;
    --ts-on-inverse: #FFFFFF;
    --ts-on-accent: #FFFFFF;           /* texto sobre o azul */

    --ts-float: #171A20;               /* botão flutuante do chat */
    --ts-float-hover: #393C41;

    --ts-blue-hover: #3560CC;
    --ts-blue-tint: rgba(62, 106, 225, 0.08);

    --ts-frost: rgba(255, 255, 255, 0.75);
    --ts-overlay: rgba(128, 128, 128, 0.65);

    /* semântica de dados — só como texto/tinta */
    --ts-success: #1E7F4F;
    --ts-danger: #C8102E;
    --ts-warning: #A15C00;
    --ts-success-tint: rgba(30, 127, 79, 0.1);
    --ts-danger-tint: rgba(200, 16, 46, 0.07);
    --ts-warning-tint: rgba(161, 92, 0, 0.09);
    --ts-danger-wash: rgba(200, 16, 46, 0.03);
    --ts-danger-line: rgba(200, 16, 46, 0.25);
    --ts-scroll-shadow: rgba(23, 26, 32, 0.12);

    /* variáveis do Bootstrap usadas por componentes e estilos inline */
    --bs-body-font-family: var(--ts-font);
    --bs-body-color: var(--ts-text);
    --bs-body-bg: var(--ts-bg);
    --bs-primary: #3E6AE1;
    --bs-primary-rgb: 62, 106, 225;
    --bs-link-color: var(--ts-text-muted);
    --bs-border-color: var(--ts-divider);
    --bs-gray-100: var(--ts-surface-alt);
    --bs-gray-200: var(--ts-divider);
    --bs-gray-300: var(--ts-border);
    --bs-gray-500: var(--ts-text-subtle);
    --bs-gray-600: var(--ts-text-muted);
    --bs-gray-700: var(--ts-text);
    --bs-gray-800: var(--ts-text-strong);
}

/* Tokens semânticos — tema ESCURO (html[data-theme="dark"], definido pelo
   script no <head> do index.html a partir da escolha salva ou do sistema).
   Carbon Dark vira a superfície, como nos contextos escuros da Tesla. */
:root[data-theme="dark"] {
    color-scheme: dark;

    --ts-bg: #0E0F12;
    --ts-surface: #171A20;
    --ts-surface-alt: #22252B;
    --ts-surface-hover: #2C2F36;

    --ts-text-strong: #F4F4F4;
    --ts-text: #D0D1D2;
    --ts-text-muted: #A2A3A6;
    --ts-text-subtle: #7C7E82;
    --ts-text-disabled: #55585D;

    --ts-divider: #2A2D33;
    --ts-border: #3A3D44;

    --ts-inverse: #EEEEEE;
    --ts-inverse-hover: #D0D1D2;
    --ts-on-inverse: #171A20;

    --ts-float: #2C2F36;
    --ts-float-hover: #3A3D44;

    --ts-blue-hover: #5B82EA;
    --ts-blue-tint: rgba(62, 106, 225, 0.2);

    --ts-frost: rgba(23, 26, 32, 0.8);
    --ts-overlay: rgba(0, 0, 0, 0.6);

    --ts-success: #4CC38A;
    --ts-danger: #FF6B7A;
    --ts-warning: #F0A848;
    --ts-success-tint: rgba(76, 195, 138, 0.14);
    --ts-danger-tint: rgba(255, 107, 122, 0.14);
    --ts-warning-tint: rgba(240, 168, 72, 0.14);
    --ts-danger-wash: rgba(255, 107, 122, 0.06);
    --ts-danger-line: rgba(255, 107, 122, 0.3);
    --ts-scroll-shadow: rgba(0, 0, 0, 0.55);
}

/* ── Base / tipografia ───────────────────────────────────────────────────── */
html, body {
    font-family: var(--ts-font);
    background: var(--ts-bg);
    color: var(--ts-text);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body {
    font-size: 14px;
    line-height: 1.43;
    letter-spacing: normal;
    font-weight: 400;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    font-family: var(--ts-font-display);
    font-weight: 500;
    color: var(--ts-text-strong);
    letter-spacing: normal;
}

/* só dois pesos: 500 (títulos/UI) e 400 (corpo) */
strong, b, .fw-bold, .fw-bolder, .fw-semibold, .fw-extrabold { font-weight: 500 !important; }
.fw-normal { font-weight: 400 !important; }
.fw-light, .fw-lighter { font-weight: 400 !important; }
.text-uppercase { text-transform: none !important; }

small, .small { font-size: 12px; letter-spacing: normal; }

/* text-link: Pewter, sublinhado via box-shadow no hover */
a {
    color: var(--ts-text-muted);
    text-decoration: none;
    transition: color var(--ts-t), box-shadow var(--ts-t) var(--ts-ease);
}
a:hover { color: var(--ts-text-strong); text-decoration: none; }
p a:hover, td a:hover, .form-check-label a:hover { box-shadow: 0 1px 0 currentColor; }

.text-primary { color: var(--ts-blue) !important; }
.text-success { color: var(--ts-success) !important; }
.text-danger { color: var(--ts-danger) !important; }
.text-warning { color: var(--ts-warning) !important; }
.text-info { color: var(--ts-text) !important; }
.text-muted, .text-gray-400, .text-gray-500, .text-gray-600 { color: var(--ts-text-muted) !important; }
.text-gray-700 { color: var(--ts-text) !important; }
.text-gray-800, .text-gray-900, .text-dark { color: var(--ts-text-strong) !important; }

/* legendas em inglês ao lado dos rótulos (antes em verde inline) → terciário */
label span[style*="green"],
.form-group span[style*="green"] {
    color: var(--ts-text-subtle) !important;
    font-size: 12px !important;
    font-weight: 400;
}

:focus-visible {
    outline: 2px solid var(--ts-blue);
    outline-offset: 2px;
}

::selection { background: var(--ts-blue-tint); }

/* ── Estrutura da página ─────────────────────────────────────────────────── */
.content { background: var(--ts-bg); }

/* título da página (ListPage, FormPage, Dashboard, Reports…) */
.content h1.h4,
.content h2.h4 {
    font-size: 24px;
    font-weight: 500;
    line-height: 1.2;
    margin-bottom: 0;
}

/* título dentro de card de formulário */
.content .card h2.h4 { font-size: 22px; }

/* títulos de card — "Product Name" 17px/500 */
.card-header h2,
.card-header .fs-5,
.card h2.fs-5 {
    font-size: 17px !important;
    font-weight: 500;
    line-height: 1.18;
}

/* ── Navegação global (menu lateral + barra mobile) — branca, sem borda ──── */
.sidebar,
.sidebar.bg-gray-800,
.sidebar.text-white {
    background: var(--ts-surface) !important;
    color: var(--ts-text-strong) !important;
    border: 0;
    box-shadow: none;
}

.mobile-topbar,
.mobile-topbar.bg-gray-800 {
    background: var(--ts-frost) !important;
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    backdrop-filter: saturate(180%) blur(20px);
    color: var(--ts-text-strong);
    box-shadow: none;
    border: 0;
}
.mobile-topbar .navbar-brand,
.mobile-topbar .navbar-brand span {
    color: var(--ts-text-strong) !important;
}
/* ícone do hambúrguer escuro (o markup usa navbar-dark) */
.mobile-topbar .navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='%23171A20' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") !important;
}
.mobile-topbar .navbar-toggler { border-radius: var(--ts-r); }
.mobile-topbar .navbar-toggler:focus { box-shadow: none; }

/* Nav Button: transparente, 14px/500, raio 4px, fundo sutil no hover/ativo
   (seletor .nav-item .nav-link para vencer o branco do Volt) */
.sidebar .nav-link,
.sidebar .nav-item .nav-link,
.sidebar .nav-link.active {
    font-size: 14px;
    font-weight: 500;
    color: var(--ts-text-strong);
    border-radius: var(--ts-r);
    transition: color var(--ts-t), background-color var(--ts-t);
}
.sidebar .nav-link { padding: 8px 16px; min-height: 32px; }

.sidebar .nav-link .sidebar-icon { color: var(--ts-text-muted); transition: color var(--ts-t); }
.sidebar .nav-link:hover,
.sidebar .nav-item .nav-link:hover { background-color: var(--ts-surface-alt); color: var(--ts-text-strong); text-decoration: none; }

.sidebar .nav-item.active > .nav-link,
.sidebar .nav-item.active > .nav-link:hover {
    background-color: var(--ts-surface-alt);
    color: var(--ts-text-strong);
}
.sidebar .nav-item.active > .nav-link .sidebar-icon,
.sidebar .nav-link:hover .sidebar-icon { color: var(--ts-text-strong); }

.sidebar .sidebar-text.small,
.sidebar .text-gray-500 { color: var(--ts-text-muted) !important; font-size: 12px; }

/* dados do usuário (e-mail longo) não vazam do menu */
.sidebar .nav-item.px-2.py-3 { min-width: 0; }
.sidebar .nav-item.px-2.py-3 .sidebar-text {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.sidebar .nav-item.px-2.py-3 .d-flex { min-width: 0; }

.sidebar .dropdown-divider,
.sidebar .border-gray-700 { border-color: var(--ts-divider) !important; }

.sidebar.contracted .nav-item.active > .nav-link { background-color: var(--ts-surface-alt); }
.sidebar.contracted .nav-item .nav-link:hover { background-color: var(--ts-surface-alt); }

.sidebar .nav-item.disabled .nav-link,
.sidebar .nav-item.disabled .nav-link:hover { color: var(--ts-text-subtle); background-color: transparent; }

.sidebar-collapse-btn {
    background: transparent !important;
    border: 1px solid var(--ts-border) !important;
    border-radius: var(--ts-r) !important;
    color: var(--ts-text-muted) !important;
    transition: color var(--ts-t), background-color var(--ts-t);
}
.sidebar-collapse-btn:hover,
.sidebar-collapse-btn:focus-visible { background: var(--ts-surface-alt) !important; color: var(--ts-text-strong) !important; }

/* botões "fechar" brancos (btn-close-white) ficam escuros sobre o branco */
.sidebar .btn-close-white,
.offcanvas-custom .btn-close-white { filter: none !important; }

/* wordmark: a única caixa alta do sistema — letras espaçadas, como "TESLA" */
.sidebar .nav > .nav-item:first-child .sidebar-text,
.mobile-topbar .navbar-brand span {
    font-weight: 500 !important;
    letter-spacing: 2.5px;
    text-transform: uppercase;
}
.mobile-topbar .navbar-brand span { font-size: 12px !important; }

/* fundo atrás do menu no celular — overlay do design system */
.sidebar-backdrop { background: var(--ts-overlay); }

/* ── Cards — planos: branco sobre Light Ash, sem borda e sem sombra ──────── */
.card,
.card.border-0,
.card.shadow,
.card.border-light {
    background: var(--ts-surface);
    border: 0 !important;
    border-radius: var(--ts-r) !important;
    box-shadow: none !important;
}

.shadow, .shadow-sm, .shadow-lg, .shadow-soft, .shadow-inset { box-shadow: none !important; }

.card-header {
    background: transparent;
    border-bottom: 1px solid var(--ts-divider);
    padding: 16px 24px;
    border-radius: var(--ts-r) var(--ts-r) 0 0 !important;
}

.card-body { padding: 24px; }

.card-footer {
    background: transparent;
    border-top: 1px solid var(--ts-divider) !important;
    padding: 12px 24px;
    border-radius: 0 0 var(--ts-r) var(--ts-r) !important;
}

/* card escuro do gráfico — Carbon Dark (o "hero" do sistema) */
.cardDark,
.card.cardDark {
    background: var(--ts-carbon) !important;
    overflow: hidden;
}

/* InfoBlock: ícone em Light Ash, tinta Carbon (o azul é só do CTA) */
.icon-shape,
[class*="icon-shape-"] {
    background: var(--ts-surface-alt) !important;
    color: var(--ts-text-strong) !important;
    border-radius: var(--ts-r) !important;
}
.card h2.h5 { font-size: 14px; font-weight: 400; color: var(--ts-text-muted); text-transform: none; }
.card h3.fw-bolder { font-size: 22px; font-weight: 500 !important; color: var(--ts-text-strong); font-variant-numeric: tabular-nums; }

/* ── Botões — retângulos de raio 4px, borda 3px transparente reservada ───── */
.btn {
    font-family: var(--ts-font);
    font-size: 14px;
    font-weight: 500;
    letter-spacing: normal;
    border: 3px solid transparent;
    border-radius: var(--ts-r);
    box-shadow: inset 0 0 0 2px transparent !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    line-height: 1.2;
    text-transform: none;
    transition: border-color var(--ts-t), background-color var(--ts-t), color var(--ts-t), box-shadow 0.25s;
}

/* Tesla: interação só por cor — sem scale/translate */
.btn:hover,
.btn:active,
.btn.active,
.animate-up-2:hover,
.animate-up-3:hover,
.animate-up-5:hover { transform: none !important; }

.btn:focus { box-shadow: inset 0 0 0 2px transparent !important; }
.btn:focus-visible {
    outline: 0;
    box-shadow: inset 0 0 0 2px var(--ts-surface) !important;
    border-color: var(--ts-blue) !important;
}

.btn:disabled,
.btn.disabled { opacity: 0.4; }

/* Primary CTA — Electric Blue, único uso do azul */
.btn-primary,
.btn-primary:focus,
.btn-primary:disabled {
    background-color: var(--ts-blue);
    border-color: transparent;
    color: var(--ts-on-accent);
}
.btn-primary:hover,
.btn-primary:active,
.btn-primary.active {
    background-color: var(--ts-blue-hover);
    border-color: transparent;
    color: var(--ts-on-accent);
}
.btn-primary {
    padding: 4px 24px;
    min-height: 40px;
}

/* Secondary CTA — branco + Graphite sobre o fundo Light Ash da página;
   dentro de superfícies brancas (card, modal, chat) inverte para Light Ash */
.btn-secondary,
.btn-secondary:focus,
.btn-secondary:disabled,
.btn-light,
.btn-light:focus,
.btn-light:disabled {
    background-color: var(--ts-surface);
    border-color: transparent;
    color: var(--ts-text);
}
:is(.card, .modal-content, .offcanvas-custom, .fmxw-500, .dropdown-menu) :is(.btn-secondary, .btn-light),
:is(.card, .modal-content, .offcanvas-custom, .fmxw-500, .dropdown-menu) :is(.btn-secondary, .btn-light):focus,
:is(.card, .modal-content, .offcanvas-custom, .fmxw-500, .dropdown-menu) :is(.btn-secondary, .btn-light):disabled {
    background-color: var(--ts-surface-alt);
}
:is(.card, .modal-content, .offcanvas-custom, .fmxw-500, .dropdown-menu) :is(.btn-secondary, .btn-light):hover,
:is(.card, .modal-content, .offcanvas-custom, .fmxw-500, .dropdown-menu) :is(.btn-secondary, .btn-light):active {
    background-color: var(--ts-surface-hover);
}
.btn-secondary:hover,
.btn-secondary:active,
.btn-secondary.active,
.btn-light:hover,
.btn-light:active {
    background-color: var(--ts-surface-hover);
    border-color: transparent;
    color: var(--ts-text-strong);
}
.btn-secondary,
.btn-light {
    padding: 4px 24px;
    min-height: 40px;
}

/* botão escuro — Carbon Dark */
.btn-gray-800,
.btn-gray-800:focus,
.btn-gray-800:disabled,
.btn-dark,
.btn-dark:focus {
    background-color: var(--ts-inverse);
    border-color: transparent;
    color: var(--ts-on-inverse);
}
.btn-gray-800:hover,
.btn-gray-800:active,
.btn-dark:hover,
.btn-dark:active {
    background-color: var(--ts-inverse-hover);
    border-color: transparent;
    color: var(--ts-on-inverse);
}
.btn-gray-800,
.btn-dark {
    padding: 4px 16px;
    min-height: 36px;
}

/* botões utilitários (ações de linha: editar, iniciar, parar, excluir…) —
   Nav Button: fundo Light Ash, texto escuro, hover em Cloud Gray */
.btn-outline-secondary,
.btn-outline-secondary:focus,
.btn-outline-gray-800,
.btn-outline-gray-800:focus,
.btn-outline-gray-800:disabled,
.btn-outline-primary,
.btn-outline-primary:focus,
.btn-info,
.btn-info:focus,
.btn-success,
.btn-success:focus,
.btn-warning,
.btn-warning:focus,
.btn-danger,
.btn-danger:focus,
.btn-outline-danger,
.btn-outline-danger:focus {
    background-color: var(--ts-surface-alt);
    border-color: transparent;
    color: var(--ts-text-strong);
}
.btn-outline-secondary,
.btn-outline-gray-800,
.btn-outline-primary,
.btn-info,
.btn-success,
.btn-warning,
.btn-danger,
.btn-outline-danger {
    padding: 4px 16px;
    min-height: 32px;
}
.btn-outline-secondary:hover,
.btn-outline-secondary:active,
.btn-outline-gray-800:hover,
.btn-outline-gray-800:active,
.btn-outline-primary:hover,
.btn-outline-primary:active,
.btn-info:hover,
.btn-info:active,
.btn-success:hover,
.btn-success:active,
.btn-warning:hover,
.btn-warning:active,
.btn-danger:hover,
.btn-danger:active,
.btn-outline-danger:hover,
.btn-outline-danger:active {
    background-color: var(--ts-surface-hover);
    border-color: transparent;
    color: var(--ts-text-strong);
}

/* semântica só na tinta: iniciar (verde), parar/excluir (vermelho) */
.btn-success,
.btn-success:hover,
.btn-success:focus,
.btn-success:active { color: var(--ts-success); }
.btn-warning,
.btn-warning:hover,
.btn-warning:focus,
.btn-warning:active { color: var(--ts-warning); }
.btn-danger,
.btn-danger:hover,
.btn-danger:focus,
.btn-danger:active,
.btn-outline-danger,
.btn-outline-danger:hover,
.btn-outline-danger:focus,
.btn-outline-danger:active { color: var(--ts-danger); }

/* tamanhos (depois das variantes para prevalecer) */
.btn-sm {
    font-size: 14px !important;
    padding: 2px 14px !important;
    min-height: 32px !important;
}

.btn-xs {
    font-size: 12px !important;
    padding: 2px 8px !important;
    min-height: 32px !important;
    min-width: 32px;
    line-height: 1 !important;
}
.btn-xs .icon,
.btn-xs svg { width: 14px; height: 14px; }

/* botões dentro de input-group mantêm a altura do campo */
.input-group > .btn { min-height: 40px; }

.btn-close { transition: opacity var(--ts-t); }
.btn-close:focus { box-shadow: none; }

/* text-link */
.btn-link,
.btn-link:hover,
.btn-link:focus {
    color: var(--ts-text-muted);
    background: transparent;
    text-decoration: none;
    padding-left: 0;
    padding-right: 0;
}
.btn-link:hover { color: var(--ts-text-strong); box-shadow: inset 0 -1px 0 currentColor !important; }

/* ── Formulários — retângulo 4px, borda Pale Silver, foco azul ───────────── */
label,
.form-label {
    font-size: 14px;
    font-weight: 500;
    color: var(--ts-text-strong);
    margin-bottom: 6px;
}

.form-group { margin-bottom: 0; }

.form-control,
.form-select {
    font-family: var(--ts-font);
    font-size: 14px;
    letter-spacing: normal;
    color: var(--ts-text-strong);
    background-color: var(--ts-surface);
    border: 1px solid var(--ts-border);
    border-radius: var(--ts-r);
    min-height: 40px;
    padding: 9px 12px;
    box-shadow: none !important;
    transition: border-color var(--ts-t), box-shadow var(--ts-t);
}

.form-select {
    padding-right: 36px;
    background-position: right 12px center;
}

.form-control::placeholder { color: var(--ts-text-subtle); }

.form-control:focus,
.form-select:focus {
    border-color: var(--ts-blue);
    box-shadow: inset 0 0 0 1px var(--ts-blue) !important;
    outline: 0;
    background-color: var(--ts-surface);
    color: var(--ts-text-strong);
}

.form-control.is-invalid,
.form-select.is-invalid { border-color: var(--ts-danger); }

.form-control:disabled,
.form-control[readonly],
.form-select:disabled {
    background-color: var(--ts-surface-alt);
    border-color: var(--ts-divider);
    color: var(--ts-text-muted);
    opacity: 1;
}

textarea.form-control {
    min-height: 100px;
    padding: 10px 12px;
    resize: vertical;
}

.form-control-sm {
    font-size: 14px;
    min-height: 32px;
    padding: 4px 10px;
}

.input-group-text {
    font-size: 14px;
    background-color: var(--ts-surface-alt);
    border: 1px solid var(--ts-border);
    color: var(--ts-text-muted);
    border-radius: var(--ts-r);
    padding: 0 12px;
}

.input-group > .form-control:focus,
.input-group > .form-select:focus { z-index: 5; }

/* checkbox / switch */
.form-check-input {
    border-color: var(--ts-border);
    box-shadow: none !important;
    transition: background-color var(--ts-t), border-color var(--ts-t);
}
.form-check-input:checked {
    background-color: var(--ts-blue);
    border-color: var(--ts-blue);
}
.form-check-input:focus { border-color: var(--ts-blue); }
.form-check-label { font-size: 14px; font-weight: 400; color: var(--ts-text); }

/* react-select (classNamePrefix="rs") — mesmo retângulo dos campos */
.rs__control {
    min-height: 40px !important;
    border-radius: var(--ts-r) !important;
    border: 1px solid var(--ts-border) !important;
    background: var(--ts-surface) !important;
    box-shadow: none !important;
    font-size: 14px;
    transition: border-color var(--ts-t) !important;
}
.rs__control--is-focused {
    border-color: var(--ts-blue) !important;
    box-shadow: inset 0 0 0 1px var(--ts-blue) !important;
}
.rs__indicator-separator { background-color: var(--ts-surface-hover) !important; }
.rs__placeholder { color: var(--ts-text-subtle) !important; }
.rs__single-value { color: var(--ts-text-strong) !important; }
.rs__menu {
    border-radius: var(--ts-r) !important;
    border: 1px solid var(--ts-divider);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.05) !important;
    overflow: hidden;
    z-index: 20 !important;
}
.rs__option { font-size: 14px; color: var(--ts-text) !important; }
.rs__option--is-focused { background: var(--ts-surface-alt) !important; }
.rs__option--is-selected { background: var(--ts-surface-alt) !important; color: var(--ts-text-strong) !important; font-weight: 500; }
.rs__multi-value {
    border-radius: var(--ts-r) !important;
    background: var(--ts-surface-alt) !important;
}

/* ── Tabelas — linhas separadas por Cloud Gray, sem caixa alta ───────────── */
.table {
    --bs-table-bg: transparent;
    --bs-table-striped-bg: var(--ts-surface-alt);
    --bs-table-hover-bg: var(--ts-surface-alt);
    --bs-table-active-bg: var(--ts-surface-alt);
    font-size: 14px;
    color: var(--ts-text);
    border-color: var(--ts-divider);
    margin-bottom: 0;
    font-variant-numeric: tabular-nums;
}

.table > thead > tr > th,
.table thead th,
.table .thead-light th {
    font-size: 12px;
    font-weight: 500;
    text-transform: none;
    letter-spacing: normal;
    color: var(--ts-text-muted);
    background-color: var(--ts-surface);
    border-top: 0;
    border-bottom: 1px solid var(--ts-divider) !important;
    padding: 14px 16px;
    white-space: nowrap;
    vertical-align: middle;
}

.table > tbody > tr > td,
.table > tbody > tr > th,
.table > tfoot > tr > td {
    padding: 12px 16px;
    border-bottom: 1px solid var(--ts-divider);
    vertical-align: middle;
}

.table-sm > thead > tr > th,
.table-sm > tbody > tr > td,
.table-sm > tbody > tr > th,
.table-sm > tfoot > tr > td { padding: 8px 12px; }

.table > tbody > tr:last-child > td { border-bottom: 0; }

.table-hover > tbody > tr > * { transition: background-color var(--ts-t); }
.table-hover > tbody > tr:hover > * {
    --bs-table-accent-bg: var(--ts-surface-alt);
    background-color: var(--ts-surface-alt);
}

.table-active,
.table-active > *,
.table > tbody > tr.table-active > * {
    --bs-table-accent-bg: var(--ts-surface-alt);
    background-color: var(--ts-surface-alt) !important;
    color: var(--ts-text-strong);
}

.table-bordered > :not(caption) > * > * { border-color: var(--ts-divider); }

.table-wrapper { border-radius: var(--ts-r) !important; overflow: hidden; }

/* ── Badges — retângulo 4px, fundo Light Ash, tinta semântica ────────────── */
.badge {
    border-radius: var(--ts-r);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: normal;
    text-transform: none;
    padding: 4px 8px;
}

.badge.bg-success,
.bg-success.badge { background-color: var(--ts-success-tint) !important; color: var(--ts-success) !important; }
.badge.bg-danger,
.bg-danger.badge { background-color: var(--ts-danger-tint) !important; color: var(--ts-danger) !important; }
.badge.bg-warning,
.bg-warning.badge { background-color: var(--ts-warning-tint) !important; color: var(--ts-warning) !important; }
.badge.bg-primary,
.badge.bg-info,
.bg-primary.badge,
.bg-info.badge { background-color: var(--ts-blue-tint) !important; color: var(--ts-blue) !important; }
.badge.bg-secondary,
.badge.bg-gray-800,
.badge.bg-dark,
.badge.bg-light,
.bg-secondary.badge { background-color: var(--ts-surface-alt) !important; color: var(--ts-text) !important; }

/* ── Alertas — planos, sem borda ─────────────────────────────────────────── */
.alert {
    border-radius: var(--ts-r);
    border: 0;
    padding: 12px 16px;
    font-size: 14px;
    box-shadow: none;
}
.alert-danger { background: var(--ts-danger-tint); color: var(--ts-danger); }
.alert-success { background: var(--ts-success-tint); color: var(--ts-success); }
.alert-info,
.alert-primary,
.alert-secondary { background: var(--ts-surface-alt); color: var(--ts-text); }
.alert-warning { background: var(--ts-warning-tint); color: var(--ts-warning); }

/* ── Abas — texto 14px/500, indicador inferior em Carbon ─────────────────── */
.nav-tabs {
    border-bottom: 1px solid var(--ts-divider);
    gap: 4px;
    flex-wrap: wrap;
    margin-bottom: 12px;
}
.nav-tabs .nav-link {
    background: transparent;
    color: var(--ts-text-muted);
    border: 0;
    border-radius: var(--ts-r) var(--ts-r) 0 0;
    padding: 8px 16px;
    font-size: 14px;
    font-weight: 500;
    margin-bottom: -1px;
    box-shadow: inset 0 -2px 0 transparent;
    transition: color var(--ts-t), box-shadow var(--ts-t) var(--ts-ease), background-color var(--ts-t);
}
.nav-tabs .nav-link:hover { color: var(--ts-text-strong); background: transparent; }
.nav-tabs .nav-link.active,
.nav-tabs .nav-item.show .nav-link {
    background: transparent;
    color: var(--ts-text-strong);
    border: 0;
    box-shadow: inset 0 -2px 0 var(--ts-text-strong);
}

#tabContent {
    background: var(--ts-surface);
    border: 0 !important;
    border-radius: var(--ts-r) !important;
    padding-top: 12px;
}

/* ── Paginação — quadrados 4px, ativo em Carbon ──────────────────────────── */
.pagination { gap: 4px; flex-wrap: wrap; }
.page-item .page-link {
    min-width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: var(--ts-r) !important;
    color: var(--ts-text);
    background: transparent;
    font-size: 14px;
    font-weight: 500;
    box-shadow: none !important;
    transition: color var(--ts-t), background-color var(--ts-t);
}
.page-item .page-link:hover { background: var(--ts-surface-alt); color: var(--ts-text-strong); }
.page-item.active .page-link {
    background: var(--ts-inverse);
    color: var(--ts-on-inverse);
}
.page-item.disabled .page-link { background: transparent; color: var(--ts-text-disabled); }

/* ── Dropdowns ───────────────────────────────────────────────────────────── */
.dropdown-menu {
    border: 1px solid var(--ts-divider);
    border-radius: var(--ts-r);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.05);
    padding: 4px;
}
.dropdown-item {
    border-radius: var(--ts-r);
    font-size: 14px;
    color: var(--ts-text);
    transition: background-color var(--ts-t), color var(--ts-t);
}
.dropdown-item:hover,
.dropdown-item:focus { background: var(--ts-surface-alt); color: var(--ts-text-strong); }
.dropdown-divider { border-color: var(--ts-divider); }

/* ── Modais — overlay cinza translúcido, painel plano ────────────────────── */
.modal-backdrop.show { background: var(--ts-overlay); opacity: 1; }
.modal-content {
    border: 0;
    border-radius: var(--ts-r);
    box-shadow: none;
}
.modal-header { border-bottom: 1px solid var(--ts-divider); }
.modal-footer { border-top: 1px solid var(--ts-divider); }

/* ── Rodapé ──────────────────────────────────────────────────────────────── */
.content > footer {
    background: transparent !important;
    border: 0 !important;
    border-top: 1px solid var(--ts-divider) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: 24px 4px !important;
    margin-top: 32px !important;
    font-size: 12px;
    color: var(--ts-text-muted);
}
.content > footer p,
.content > footer a { font-size: 12px; color: var(--ts-text-muted) !important; }
.content > footer a:hover { color: var(--ts-text-strong) !important; }

/* ── Telas de autenticação (Login / Cadastro / Esqueci a senha) ─────────── */
section.bg-soft { background: var(--ts-bg) !important; min-height: 100vh; }

.fmxw-500.bg-white {
    background: var(--ts-surface) !important;
    border: 0 !important;
    border-radius: var(--ts-r) !important;
    box-shadow: none !important;
}

.fmxw-500 h2,
.fmxw-500 .h5 { font-size: 22px; font-weight: 500; }
.fmxw-500 .d-grid > .btn { min-height: 40px; }

/* Entrar / Cadastrar / Recuperar é a ação principal da tela → Primary CTA azul */
.fmxw-500 .d-grid > .btn-gray-800,
.fmxw-500 .d-grid > .btn-gray-800:focus { background-color: var(--ts-blue); color: var(--ts-on-accent); }
.fmxw-500 .d-grid > .btn-gray-800:hover,
.fmxw-500 .d-grid > .btn-gray-800:active { background-color: var(--ts-blue-hover); color: var(--ts-on-accent); }

/* ── Chat do Beholder ────────────────────────────────────────────────────── */
.float {
    background-color: var(--ts-float) !important;
    box-shadow: none !important;
    border: 0;
    border-radius: 50% !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background-color var(--ts-t);
}
.float:hover { background-color: var(--ts-float-hover) !important; }

.offcanvas-custom {
    border-left: 1px solid var(--ts-divider);
    box-shadow: none;
    border-radius: 0;
    background: var(--ts-surface);
}
/* cabeçalho do chat era azul — o azul é só do CTA → branco + Carbon */
.offcanvas-custom .offcanvas-header,
.offcanvas-custom .offcanvas-header.bg-primary {
    background: var(--ts-surface) !important;
    color: var(--ts-text-strong) !important;
    border-bottom: 1px solid var(--ts-divider);
    border-radius: 0 !important;
}
.offcanvas-custom .offcanvas-title { font-size: 17px; font-weight: 500; color: var(--ts-text-strong); }

/* balões: usuário em Carbon, Beholder em Light Ash — planos, sem borda */
.spanChatRow { border-radius: var(--ts-r) !important; text-align: left; }
.spanChatRow.bg-secondary {
    background-color: var(--ts-inverse) !important;
    color: var(--ts-on-inverse) !important;
}
.spanChatRow.bg-secondary a { color: var(--ts-on-inverse); box-shadow: 0 1px 0 currentColor; }
.spanChatRow.bg-light {
    background-color: var(--ts-surface-alt) !important;
    border: 0 !important;
    color: var(--ts-text);
}

/* ── Toasts (Notyf) ──────────────────────────────────────────────────────── */
.notyf__toast {
    border-radius: var(--ts-r) !important;
    box-shadow: none !important;
    font-family: var(--ts-font);
    font-size: 14px;
}

/* ── Utilitários do Volt que carregam cor/raio fora do sistema ───────────── */
.rounded { border-radius: var(--ts-r) !important; }
.rounded-top { border-radius: var(--ts-r) var(--ts-r) 0 0 !important; }
.bg-white { background-color: var(--ts-surface) !important; }
.border-light { border-color: var(--ts-divider) !important; }
.bg-light, .bg-gray-50, .bg-gray-100 { background-color: var(--ts-surface-alt) !important; }
.bg-primary:not(.btn):not(.badge) { background-color: var(--ts-carbon) !important; }
.bg-dark, .bg-gray-800:not(.sidebar):not(.mobile-topbar) { background-color: var(--ts-carbon) !important; }

/* ── Menu: rolagem permitida (nenhum item cortado), mas SEM barra visível ── */
.sidebar,
.sidebar * {
    scrollbar-width: none !important;          /* Firefox */
    -ms-overflow-style: none !important;       /* Edge legado */
}
.sidebar::-webkit-scrollbar,
.sidebar *::-webkit-scrollbar {                /* Chrome / Safari / Edge */
    display: none !important;
    width: 0 !important;
    height: 0 !important;
    background: transparent !important;
}

/* bloco do logo no topo do menu: plano, sem caixa de destaque */
.sidebar .nav > .nav-item:first-child > .nav-link,
.sidebar .nav > .nav-item:first-child > .nav-link:hover,
.sidebar .nav > .nav-item.active:first-child > .nav-link {
    background-color: transparent !important;
}

/* ── "secondary" do Volt é pêssego (#F8BD7A) — fora da paleta → Light Ash ── */
.bg-secondary:not(.badge) {
    background-color: var(--ts-surface-alt) !important;
    color: var(--ts-text-muted) !important;
}
.input-group-text.bg-secondary,
.input-group-text.bg-warning,
.input-group-text.bg-success,
.input-group-text.bg-danger {
    background-color: var(--ts-surface-alt) !important;
    color: var(--ts-text) !important;
    border-color: var(--ts-border) !important;
}
.text-secondary { color: var(--ts-text-muted) !important; }
.border-secondary { border-color: var(--ts-divider) !important; }

/* ── Campo de data/hora composto (DateTime): segmentos compactos ─────────── */
.input-group .hourPart {
    flex: 0 0 52px;
    width: 52px;
    padding-left: 6px !important;
    padding-right: 6px !important;
    text-align: center;
    font-size: 14px;
    -moz-appearance: textfield;
}
.input-group .hourPart::-webkit-outer-spin-button,
.input-group .hourPart::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.input-group:has(.hourPart) { flex-wrap: nowrap; }
.input-group:has(.hourPart) > .form-control:not(.hourPart) {
    min-width: 118px;
    font-size: 14px;
    padding-left: 12px;
    padding-right: 8px;
}
.input-group:has(.hourPart) > .input-group-text {
    padding: 0 8px;
    font-size: 13px;
}

/* react-select com className="form-control" no contêiner (VariableInput):
   o contêiner vira o campo; o controle interno não repete a borda */
div.form-control:has(> .rs__control) {
    padding: 0 !important;
    display: flex;
    align-items: center;
    min-width: 140px;
    overflow: visible;
}
div.form-control > .rs__control {
    border: 0 !important;
    box-shadow: none !important;
    min-height: 38px !important;
    width: 100%;
    background: transparent !important;
}

/* cabeçalhos de card com título + ações/dica quebram linha sem espremer */
.card-header.d-flex { flex-wrap: wrap; row-gap: 6px; column-gap: 12px; }

/* Carteira: moedas que não são mais negociadas (ETHW, SOLO…) — fixas no fim,
   separadas por uma divisória e em vermelho */
.table > tbody > tr.wallet-delisted-separator > td {
    padding-top: 16px;
    padding-bottom: 6px;
    font-size: 12px;
    font-weight: 500;
    color: var(--ts-danger);
    background: transparent !important;
    border-top: 1px solid var(--ts-danger-line);
    border-bottom: 0;
}
.table-hover > tbody > tr.wallet-delisted-separator:hover > * { background: transparent !important; }
.table > tbody > tr.wallet-delisted > td {
    color: var(--ts-danger) !important;
    background-color: var(--ts-danger-wash);
}
.table > tbody > tr.wallet-delisted > td img { opacity: 0.6; filter: grayscale(1); }

/* Orders: nome da automação não estica a tabela */
.order-automacao span {
    display: inline-block;
    max-width: 240px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: middle;
}

/* campos em colunas estreitas (col-lg-1/2) — padding menor para o valor caber */
.col-lg-1 .form-control,
.col-lg-2 .form-control { padding-left: 8px; padding-right: 8px; }

/* página auxiliar Telegram Chat */
main.container > pre,
main.container .card pre { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--ts-text); }

/* ── Linha de ações do formulário (Salvar + Cancelar) lado a lado ─────────── */
.row > [class*="col-"]:has(> .btn-primary):has(> .btn-light, > .btn-secondary) {
    flex: 0 0 auto;
    width: auto;
    max-width: 100%;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}
.row > [class*="col-"]:has(> .btn-primary):has(> .btn-light, > .btn-secondary) > .btn { margin: 0 !important; }

/* ── Gráfico de linha (Chartist) — dado em Electric Blue, grade Cloud Gray ─ */
.ct-series-a .ct-line,
.ct-series-a .ct-point { stroke: var(--ts-blue) !important; }
.ct-series-a .ct-area { fill: var(--ts-blue) !important; fill-opacity: 0.06; }
.ct-grid { stroke: var(--ts-divider) !important; stroke-dasharray: none !important; }
.ct-label { color: var(--ts-text-muted) !important; fill: var(--ts-text-muted) !important; font-size: 12px; }

/* ── Responsivo (breakpoints do design system) ───────────────────────────── */
@media (max-width: 1024px) {
    .content h1.h4,
    .content h2.h4 { font-size: 22px; }
    .content .card h2.h4 { font-size: 20px; }
}

@media (max-width: 767.98px) {
    .content h1.h4,
    .content h2.h4 { font-size: 20px; }
    .content .card h2.h4 { font-size: 18px; }
    .card-header { padding: 12px 16px; }
    .card-body { padding: 16px; }
    .card h3.fw-bolder { font-size: 20px; }
    .table > thead > tr > th,
    .table thead th { padding: 10px 8px; }
    .table > tbody > tr > td { padding: 10px 8px; }
    .table { font-size: 12px; }
}

/* toque: alvos mínimos de 44px em telas pequenas */
@media (max-width: 575.98px) {
    .btn-primary,
    .btn-secondary,
    .btn-light,
    .btn-gray-800,
    .form-control,
    .form-select,
    .rs__control { min-height: 44px !important; }
    .btn-xs { min-height: 36px !important; min-width: 36px; }
    .sidebar .nav-link { min-height: 44px; padding: 10px 16px; }

    /* CTAs empilhados ocupam a largura, como no mobile da Tesla */
    .fmxw-500 .d-grid > .btn { min-height: 44px; }

    /* campos agrupados (filtro de datas, condição) com padding menor para caber */
    .input-group > .form-control,
    .input-group > .form-select {
        padding-left: 10px;
        padding-right: 10px;
    }
    .input-group > .form-select { padding-right: 28px; background-position: right 8px center; }
    div.form-control:has(> .rs__control) { min-width: 120px; }
}

/* =============================================================================
   Tema escuro — ajustes que não se resolvem só com tokens
   (ícones SVG embutidos, filtros de imagem e fundos fixos do Volt/Bootstrap)
   ============================================================================= */

/* superfícies que o Volt/Bootstrap pintam de branco fixo */
.dropdown-menu,
.modal-content,
.rs__menu,
.popover,
.list-group-item {
    background-color: var(--ts-surface);
    color: var(--ts-text);
}
.rs__input-container,
.rs__input,
.rs__multi-value__label { color: var(--ts-text-strong) !important; }

/* bordas utilitárias do Bootstrap/Volt (cinza claro fixo) acompanham o tema */
:root[data-theme="dark"] :is(.border, .border-top, .border-bottom, .border-start, .border-end,
    .border-light, .border-gray-100, .border-gray-200, .border-gray-300) { border-color: var(--ts-divider) !important; }
:root[data-theme="dark"] hr { border-color: var(--ts-divider); opacity: 1; }

/* logo: a marca escura vira clara */
:root[data-theme="dark"] img[src*="logo-mark-dark"] { filter: invert(1) brightness(1.05); }

/* ícone do hambúrguer claro */
:root[data-theme="dark"] .mobile-topbar .navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='%23F4F4F4' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") !important;
}

/* seta do select clara */
:root[data-theme="dark"] .form-select {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23D0D1D2' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
}

/* botões "fechar": X claro em qualquer variante */
:root[data-theme="dark"] .btn-close,
:root[data-theme="dark"] .sidebar .btn-close-white,
:root[data-theme="dark"] .offcanvas-custom .btn-close-white {
    filter: invert(1) grayscale(100%) brightness(200%) !important;
}

/* checkbox/switch desligado visível sobre o escuro */
:root[data-theme="dark"] .form-check-input:not(:checked) {
    background-color: var(--ts-surface-alt);
    border-color: var(--ts-border);
}
:root[data-theme="dark"] .form-switch .form-check-input:not(:checked) {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='rgba(255,255,255,0.45)'/%3e%3c/svg%3e");
}

/* sombras sutis de menus flutuantes: um pouco mais fortes no escuro */
:root[data-theme="dark"] :is(.dropdown-menu, .rs__menu) { box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4) !important; }

/* ── Alternador de tema (item do menu lateral) ───────────────────────────── */
.sidebar .theme-toggle { cursor: pointer; margin-bottom: 0; user-select: none; }
.sidebar .theme-toggle .theme-toggle-switch {
    -webkit-appearance: none;
    appearance: none;
    margin: 0 0 0 auto;
    flex: 0 0 auto;
    width: 2.25em;
    height: 1.25em;
    border-radius: 2em;
    border: 1px solid var(--ts-border);
    background-color: var(--ts-surface-alt);
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%238E8E8E'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: left center;
    background-size: contain;
    cursor: pointer;
    transition: background-position 0.15s ease-in-out, background-color var(--ts-t), border-color var(--ts-t);
}
.sidebar .theme-toggle .theme-toggle-switch:checked {
    background-color: var(--ts-blue);
    border-color: var(--ts-blue);
    background-position: right center;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e");
}
.sidebar .theme-toggle .theme-toggle-switch:focus-visible { outline: 2px solid var(--ts-blue); outline-offset: 2px; }
.sidebar.contracted .theme-toggle .theme-toggle-switch { display: none; }


/* =============================================================================
   Refinamento mobile (< 992px) — só ajustes de layout; o desktop não muda
   ============================================================================= */
@media (max-width: 991.98px) {
    /* tabelas largas: sombra na borda indica que há mais colunas para rolar
       (técnica "scroll shadows": as máscaras acompanham o conteúdo e cobrem a
       sombra quando se chega ao início/fim) */
    .table-responsive {
        background:
            linear-gradient(to right, var(--ts-surface) 30%, transparent) left center / 32px 100% no-repeat local,
            linear-gradient(to left, var(--ts-surface) 30%, transparent) right center / 32px 100% no-repeat local,
            linear-gradient(to right, var(--ts-scroll-shadow), transparent) left center / 14px 100% no-repeat scroll,
            linear-gradient(to left, var(--ts-scroll-shadow), transparent) right center / 14px 100% no-repeat scroll;
        background-color: var(--ts-surface);
    }

    /* cabeçalho da página: título e ações não ficam colados quando quebram linha */
    .content > .d-flex.justify-content-between.flex-wrap { row-gap: 12px; }

    /* badges de condições/índices quebram linha em vez de sumir à direita */
    .divScrollBadges { overflow: visible; }
    .divScrollBadges > .d-inline-flex {
        display: flex !important;
        flex-wrap: wrap;
        row-gap: 8px;
    }
    .divScrollBadges .input-group { width: auto; }
}

@media (max-width: 575.98px) {
    /* espaço no fim da página para o botão flutuante do chat não cobrir o rodapé */
    .content { padding-bottom: 88px; }

    /* selects (react-select) ocupam a largura toda — no desktop o símbolo tem 220px */
    .rs__control { max-width: none !important; }

    /* condição da automação: "is + operador" numa linha, "variável + ⊕" na outra */
    .input-group:has(> #operation) { flex-wrap: wrap; row-gap: 8px; }
    .input-group:has(> #operation) > .input-group-text { border-radius: var(--ts-r) 0 0 var(--ts-r) !important; }
    .input-group:has(> #operation) > #operation {
        flex: 1 1 auto;
        width: 1%;
        border-radius: 0 var(--ts-r) var(--ts-r) 0 !important;
    }
    .input-group:has(> #operation) > div.form-control {
        flex: 1 0 calc(100% - 52px);
        margin-left: 0 !important;
        border-radius: var(--ts-r) 0 0 var(--ts-r) !important;
    }
    .input-group:has(> #operation) > .btn {
        flex: 0 0 52px;
        min-width: 0;
        padding-left: 0;
        padding-right: 0;
        border-radius: 0 var(--ts-r) var(--ts-r) 0 !important;
    }

    /* preço/quantidade do template "por expressão": o modo ocupa a 1ª linha,
       expressão + X + multiplicador a 2ª */
    .input-group:has(> .form-select:first-child + .form-select) { flex-wrap: wrap; row-gap: 8px; }
    .input-group:has(> .form-select:first-child + .form-select) > .form-select:first-child {
        flex: 1 0 100%;
        border-radius: var(--ts-r) !important;
    }
    .input-group:has(> .form-select:first-child + .form-select) > .form-select:nth-child(2) {
        margin-left: 0 !important;
        border-radius: var(--ts-r) 0 0 var(--ts-r) !important;
    }
    .input-group:has(> .form-select:first-child + .form-select) > .form-control:last-child { flex: 0 0 88px; }

    /* data + hora (DateTime): segmentos compactos para caber sem cortar */
    .input-group:has(.hourPart) > .form-control:not(.hourPart) {
        min-width: 0;
        flex: 1 1 96px;
        padding-left: 8px;
        padding-right: 4px;
        font-size: 13px;
    }
    .input-group .hourPart {
        flex: 0 0 38px;
        width: 38px;
        padding-left: 2px !important;
        padding-right: 2px !important;
        font-size: 13px;
    }
    .input-group:has(.hourPart) > .input-group-text { padding: 0 4px; font-size: 12px; }

    /* saldos da moeda base/cotada (WalletSummary): um por linha, número inteiro */
    .row > .col-6:has(> .form-group > .alert.py-1) { flex: 0 0 100%; max-width: 100%; }
    .row > .col-6 > .form-group > .alert.py-1 {
        white-space: nowrap;
        font-variant-numeric: tabular-nums;
        margin-bottom: 8px;
    }
}