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

   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 de ação (#0066cc) para tudo que é interativo; foco #0071e3.
   - Superfícies: branco / parchment #f5f5f7 / preto na navegação global.
   - Texto em ink #1d1d1f; pesos 300/400/600/700 (500 ausente).
   - Duas gramáticas de botão: pílulas (ações) e retângulos 8px (utilitários).
   - Cards brancos, hairline 1px, raio 18px, SEM sombra.
   - Campos em pílula de 44px; tabelas com hairline e cabeçalho 12px caixa alta.
   - Pressionar = transform: scale(0.95).
   ============================================================================= */

/* ── Tokens ──────────────────────────────────────────────────────────────── */
:root {
    --ap-primary: #0066cc;
    --ap-primary-focus: #0071e3;
    --ap-primary-on-dark: #2997ff;

    --ap-ink: #1d1d1f;
    --ap-ink-80: #333333;
    --ap-ink-48: #7a7a7a;
    --ap-body-on-dark: #ffffff;
    --ap-body-muted: #cccccc;

    --ap-hairline: #e0e0e0;
    --ap-hairline-soft: rgba(0, 0, 0, 0.08);
    --ap-divider-soft: #f0f0f0;

    --ap-canvas: #ffffff;
    --ap-parchment: #f5f5f7;
    --ap-pearl: #fafafc;
    --ap-tile-1: #272729;
    --ap-tile-2: #2a2a2c;
    --ap-tile-3: #252527;
    --ap-black: #000000;
    --ap-chip: rgba(210, 210, 215, 0.64);

    /* semântica de dados (lucro/prejuízo, status) — usada só como texto/tinta */
    --ap-success: #248a3d;
    --ap-danger: #d70015;
    --ap-warning: #b25000;

    --ap-r-xs: 5px;
    --ap-r-sm: 8px;
    --ap-r-md: 11px;
    --ap-r-lg: 18px;
    --ap-r-pill: 9999px;

    --ap-font: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Inter', system-ui, sans-serif;
    --ap-font-display: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Inter', system-ui, sans-serif;

    /* variáveis do Bootstrap usadas por componentes e estilos inline */
    --bs-body-font-family: var(--ap-font);
    --bs-body-color: var(--ap-ink);
    --bs-body-bg: var(--ap-parchment);
    --bs-primary: #0066cc;
    --bs-primary-rgb: 0, 102, 204;
    --bs-link-color: #0066cc;
    --bs-border-color: #e0e0e0;
    --bs-gray-100: #f5f5f7;
    --bs-gray-200: #f0f0f0;
    --bs-gray-300: #e0e0e0;
    --bs-gray-500: #7a7a7a;
    --bs-gray-600: #7a7a7a;
    --bs-gray-700: #333333;
    --bs-gray-800: #1d1d1f;
}

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

body {
    font-size: 17px;               /* body: 17px, não 16px */
    line-height: 1.47;
    letter-spacing: -0.374px;
    font-weight: 400;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    font-family: var(--ap-font-display);
    font-weight: 600;
    color: var(--ap-ink);
    letter-spacing: -0.374px;
}

strong, b, .fw-bold, .fw-bolder { font-weight: 600 !important; }
.fw-semibold { font-weight: 600 !important; }
.fw-normal { font-weight: 400 !important; }

small, .small { font-size: 14px; letter-spacing: -0.224px; }

a { color: var(--ap-primary); text-decoration: none; }
a:hover { color: var(--ap-primary); text-decoration: underline; }

.text-primary { color: var(--ap-primary) !important; }
.text-success { color: var(--ap-success) !important; }
.text-danger { color: var(--ap-danger) !important; }
.text-warning { color: var(--ap-warning) !important; }
.text-muted, .text-gray-400, .text-gray-500, .text-gray-600 { color: var(--ap-ink-48) !important; }
.text-gray-700, .text-gray-800 { color: var(--ap-ink-80) !important; }
.text-gray-900, .text-dark { color: var(--ap-ink) !important; }

/* legendas em inglês ao lado dos rótulos (antes em verde inline) → fine-print */
label span[style*="green"],
.form-group span[style*="green"] {
    color: var(--ap-ink-48) !important;
    font-size: 12px !important;
    font-weight: 400;
    letter-spacing: -0.12px;
}

:focus-visible {
    outline: 2px solid var(--ap-primary-focus);
    outline-offset: 2px;
}

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

/* título da página (ListPage, FormPage, Dashboard, Reports…) — display-md */
.content h1.h4,
.content h2.h4 {
    font-size: 34px;
    font-weight: 600;
    line-height: 1.18;
    letter-spacing: -0.374px;
    margin-bottom: 0;
}

/* título dentro de card de formulário — tagline maior */
.content .card h2.h4 { font-size: 28px; letter-spacing: 0.196px; }

/* títulos de card (fs-5 / h5) — tagline 21px */
.card-header h2,
.card-header .fs-5,
.card h2.fs-5 {
    font-size: 21px !important;
    font-weight: 600;
    letter-spacing: 0.231px;
    line-height: 1.19;
}

/* ── Navegação global (menu lateral + barra mobile) — surface-black ─────── */
.sidebar,
.sidebar.bg-gray-800,
.mobile-topbar,
.mobile-topbar.bg-gray-800 {
    background: var(--ap-black) !important;
    color: var(--ap-body-on-dark);
}

.sidebar .nav-link {
    font-size: 14px;
    font-weight: 400;
    letter-spacing: -0.224px;
    color: var(--ap-body-on-dark);
    border-radius: var(--ap-r-sm);
    padding: 9px 12px;
    transition: background-color 0.15s ease;
}

.sidebar .nav-link .sidebar-icon { color: var(--ap-body-muted); }
.sidebar .nav-link:hover { background-color: rgba(255, 255, 255, 0.08); color: var(--ap-body-on-dark); text-decoration: none; }
.sidebar .nav-link:active { transform: scale(0.98); }

.sidebar .nav-item.active > .nav-link,
.sidebar .nav-item.active > .nav-link:hover {
    background-color: rgba(255, 255, 255, 0.14);
    color: var(--ap-body-on-dark);
}
.sidebar .nav-item.active > .nav-link .sidebar-icon { color: var(--ap-body-on-dark); }

.sidebar .sidebar-text.small,
.sidebar .text-gray-500 { color: var(--ap-body-muted) !important; font-size: 12px; letter-spacing: -0.12px; }

.sidebar .dropdown-divider { border-color: rgba(255, 255, 255, 0.14) !important; }

.sidebar.contracted .nav-item.active > .nav-link { background-color: rgba(255, 255, 255, 0.14); }
.sidebar.contracted .nav-item .nav-link:hover { background-color: rgba(255, 255, 255, 0.08); }

.sidebar-collapse-btn {
    background: transparent !important;
    border: 1px solid rgba(255, 255, 255, 0.24) !important;
    border-radius: var(--ap-r-sm) !important;
    color: var(--ap-body-muted) !important;
}
.sidebar-collapse-btn:hover,
.sidebar-collapse-btn:focus-visible { background: rgba(255, 255, 255, 0.1) !important; color: #fff !important; }

.mobile-topbar .navbar-brand span { font-size: 14px !important; font-weight: 600; letter-spacing: -0.224px; }

/* ── Cards (store-utility-card) ──────────────────────────────────────────── */
.card,
.card.border-0,
.card.shadow,
.card.border-light {
    background: var(--ap-canvas);
    border: 1px solid var(--ap-hairline) !important;
    border-radius: var(--ap-r-lg) !important;
    box-shadow: none !important;
}

/* sem sombra em nenhum card/contêiner */
.shadow, .shadow-sm, .shadow-lg { box-shadow: none !important; }

.card-header {
    background: transparent;
    border-bottom: 1px solid var(--ap-hairline);
    padding: 17px 24px;
    border-radius: var(--ap-r-lg) var(--ap-r-lg) 0 0 !important;
}

.card-body { padding: 24px; }

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

/* card escuro do gráfico — surface-tile-1 */
.cardDark,
.card.cardDark {
    background: var(--ap-tile-1) !important;
    border-color: var(--ap-tile-1) !important;
    overflow: hidden;
}

/* InfoBlock: ícone em parchment com o azul de ação */
.icon-shape,
[class*="icon-shape-"] {
    background: var(--ap-parchment) !important;
    color: var(--ap-primary) !important;
    border-radius: var(--ap-r-md) !important;
}
.card h2.h5 { font-size: 14px; font-weight: 600; color: var(--ap-ink-48); letter-spacing: -0.224px; text-transform: none; }
.card h3.fw-bolder { font-size: 28px; font-weight: 600 !important; letter-spacing: 0.196px; color: var(--ap-ink); }

/* ── Botões ──────────────────────────────────────────────────────────────── */
.btn {
    font-family: var(--ap-font);
    font-weight: 400;
    letter-spacing: -0.224px;
    border-radius: var(--ap-r-pill);
    box-shadow: none !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    line-height: 1.2;
    transition: transform 0.1s ease, background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.btn:active,
.btn.active { transform: scale(0.95); }

.btn:focus,
.btn:focus-visible {
    box-shadow: none !important;
}
.btn:focus-visible {
    outline: 2px solid var(--ap-primary-focus);
    outline-offset: 2px;
}

.btn:disabled,
.btn.disabled { opacity: 0.45; transform: none; }

/* button-primary — pílula Action Blue */
.btn-primary,
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary.active,
.btn-primary:disabled {
    background-color: var(--ap-primary);
    border: 1px solid var(--ap-primary);
    color: #ffffff;
}
.btn-primary:hover { filter: brightness(0.94); }
.btn-primary {
    font-size: 17px;
    letter-spacing: -0.374px;
    padding: 10px 22px;
    min-height: 44px;
}

/* button-secondary-pill — transparente + 1px azul */
.btn-secondary,
.btn-secondary:hover,
.btn-secondary:focus,
.btn-secondary:active,
.btn-secondary.active,
.btn-secondary:disabled,
.btn-light,
.btn-light:hover,
.btn-light:focus,
.btn-light:active,
.btn-light:disabled {
    background-color: transparent;
    border: 1px solid var(--ap-primary);
    color: var(--ap-primary);
}
.btn-secondary:hover,
.btn-light:hover { background-color: rgba(0, 102, 204, 0.06); }
.btn-secondary,
.btn-light {
    font-size: 17px;
    letter-spacing: -0.374px;
    padding: 10px 21px;
    min-height: 44px;
}

/* button-dark-utility — ink, raio 8px, 14px */
.btn-gray-800,
.btn-gray-800:hover,
.btn-gray-800:focus,
.btn-gray-800:active,
.btn-gray-800:disabled,
.btn-dark,
.btn-dark:hover,
.btn-dark:focus,
.btn-dark:active {
    background-color: var(--ap-ink);
    border: 1px solid var(--ap-ink);
    color: #ffffff;
    border-radius: var(--ap-r-sm);
}
.btn-gray-800,
.btn-dark {
    font-size: 14px;
    padding: 8px 15px;
    min-height: 36px;
}

/* button-pearl-capsule — pearl, anel suave 3px, raio 11px */
.btn-outline-secondary,
.btn-outline-secondary:hover,
.btn-outline-secondary:focus,
.btn-outline-secondary:active,
.btn-outline-gray-800,
.btn-outline-gray-800:hover,
.btn-outline-gray-800:focus,
.btn-outline-gray-800:active,
.btn-outline-gray-800:disabled,
.btn-info,
.btn-info:hover,
.btn-info:focus,
.btn-info:active,
.btn-success,
.btn-success:hover,
.btn-success:focus,
.btn-success:active,
.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 {
    background-color: var(--ap-pearl);
    border: 3px solid var(--ap-divider-soft);
    color: var(--ap-ink-80);
    border-radius: var(--ap-r-md);
}
.btn-outline-secondary,
.btn-outline-gray-800,
.btn-info,
.btn-success,
.btn-danger,
.btn-outline-danger {
    font-size: 14px;
    padding: 6px 14px;
    min-height: 36px;
}
.btn-outline-secondary:hover,
.btn-outline-gray-800:hover,
.btn-info:hover,
.btn-success:hover,
.btn-danger:hover,
.btn-outline-danger:hover { background-color: var(--ap-parchment); }

/* ação positiva (iniciar) usa o azul de ação; destrutiva (parar/excluir) o vermelho — só no ícone/texto */
.btn-success,
.btn-success:hover,
.btn-success:focus,
.btn-success:active { color: var(--ap-primary); }
.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(--ap-danger); }

/* tamanhos (depois das variantes para prevalecer) */
.btn-sm {
    font-size: 14px !important;
    letter-spacing: -0.224px !important;
    padding: 7px 16px !important;
    min-height: 34px !important;
}
.btn-secondary.btn-sm,
.btn-light.btn-sm { padding: 6px 15px !important; }

.btn-xs {
    font-size: 12px !important;
    letter-spacing: -0.12px !important;
    padding: 4px 9px !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 junção com o campo */
.input-group > .btn { min-height: 44px; }

.btn-close:focus { box-shadow: none; }

/* text-link */
.btn-link { color: var(--ap-primary); text-decoration: none; padding-left: 0; padding-right: 0; }

/* ── Formulários (search-input: pílula 44px) ─────────────────────────────── */
label,
.form-label {
    font-size: 14px;
    font-weight: 600;
    color: var(--ap-ink);
    letter-spacing: -0.224px;
    margin-bottom: 8px;
}

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

.form-control,
.form-select {
    font-family: var(--ap-font);
    font-size: 17px;
    letter-spacing: -0.374px;
    color: var(--ap-ink);
    background-color: var(--ap-canvas);
    border: 1px solid var(--ap-hairline-soft);
    border-radius: var(--ap-r-pill);
    min-height: 44px;
    padding: 9px 20px;
    box-shadow: none !important;
    transition: border-color 0.15s ease;
}

.form-select {
    padding-right: 44px;
    background-position: right 18px center;
}

.form-control::placeholder { color: var(--ap-ink-48); }

.form-control:focus,
.form-select:focus {
    border-color: var(--ap-primary-focus);
    outline: 2px solid var(--ap-primary-focus);
    outline-offset: 0;
    background-color: var(--ap-canvas);
    color: var(--ap-ink);
}

.form-control:disabled,
.form-control[readonly],
.form-select:disabled {
    background-color: var(--ap-parchment);
    color: var(--ap-ink-48);
    opacity: 1;
}

textarea.form-control {
    border-radius: var(--ap-r-lg);
    min-height: 96px;
    padding: 12px 20px;
}

.form-control-sm {
    font-size: 14px;
    letter-spacing: -0.224px;
    min-height: 36px;
    padding: 6px 14px;
}

.input-group-text {
    font-size: 14px;
    background-color: var(--ap-canvas);
    border: 1px solid var(--ap-hairline-soft);
    color: var(--ap-ink-48);
    border-radius: var(--ap-r-pill);
    padding: 0 12px 0 18px;
}

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

/* checkbox / switch */
.form-check-input {
    border-color: rgba(0, 0, 0, 0.2);
    box-shadow: none !important;
}
.form-check-input:checked {
    background-color: var(--ap-primary);
    border-color: var(--ap-primary);
}
.form-check-input:focus { border-color: var(--ap-primary-focus); }
.form-check-label { font-size: 14px; font-weight: 400; letter-spacing: -0.224px; }

/* react-select (classNamePrefix="rs") — mesma pílula dos campos */
.rs__control {
    min-height: 44px !important;
    border-radius: var(--ap-r-pill) !important;
    border: 1px solid var(--ap-hairline-soft) !important;
    background: var(--ap-canvas) !important;
    box-shadow: none !important;
    padding-left: 10px;
    font-size: 17px;
    letter-spacing: -0.374px;
}
.rs__control--is-focused {
    border-color: var(--ap-primary-focus) !important;
    outline: 2px solid var(--ap-primary-focus);
}
.rs__indicator-separator { background-color: var(--ap-hairline) !important; }
.rs__placeholder { color: var(--ap-ink-48) !important; }
.rs__single-value { color: var(--ap-ink) !important; }
.rs__menu {
    border-radius: var(--ap-r-lg) !important;
    border: 1px solid var(--ap-hairline);
    box-shadow: none !important;
    overflow: hidden;
    z-index: 20 !important;
}
.rs__option { font-size: 14px; letter-spacing: -0.224px; }
.rs__option--is-focused { background: var(--ap-parchment) !important; }
.rs__option--is-selected { background: var(--ap-primary) !important; color: #fff !important; }
.rs__multi-value {
    border-radius: var(--ap-r-pill) !important;
    background: var(--ap-parchment) !important;
}

/* ── Tabelas (responsive-table) ──────────────────────────────────────────── */
.table {
    --bs-table-bg: transparent;
    --bs-table-striped-bg: var(--ap-parchment);
    --bs-table-hover-bg: var(--ap-parchment);
    --bs-table-active-bg: rgba(0, 102, 204, 0.06);
    font-size: 14px;
    letter-spacing: -0.224px;
    color: var(--ap-ink-80);
    border-color: var(--ap-hairline);
    margin-bottom: 0;
}

.table > thead > tr > th,
.table thead th,
.table .thead-light th {
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: -0.12px;
    color: var(--ap-ink);
    background-color: var(--ap-canvas);
    border-top: 0;
    border-bottom: 1px solid var(--ap-hairline) !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(--ap-hairline);
    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:hover > * {
    --bs-table-accent-bg: var(--ap-parchment);
    background-color: var(--ap-parchment);
}

.table-active,
.table-active > *,
.table > tbody > tr.table-active > * {
    --bs-table-accent-bg: rgba(0, 102, 204, 0.06);
    background-color: rgba(0, 102, 204, 0.06) !important;
    color: var(--ap-ink);
}

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

/* contêiner de lista (table-wrapper) com raio de card */
.table-wrapper { border-radius: var(--ap-r-lg) !important; overflow: hidden; }

/* ── Badges (pílula) ─────────────────────────────────────────────────────── */
.badge {
    border-radius: var(--ap-r-pill);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: -0.12px;
    padding: 5px 10px;
}

.badge.bg-success,
.bg-success.badge { background-color: rgba(36, 138, 61, 0.12) !important; color: var(--ap-success) !important; }
.badge.bg-danger,
.bg-danger.badge { background-color: rgba(215, 0, 21, 0.1) !important; color: var(--ap-danger) !important; }
.badge.bg-warning,
.bg-warning.badge { background-color: rgba(178, 80, 0, 0.12) !important; color: var(--ap-warning) !important; }
.badge.bg-primary,
.badge.bg-info,
.bg-primary.badge,
.bg-info.badge { background-color: rgba(0, 102, 204, 0.1) !important; color: var(--ap-primary) !important; }
.badge.bg-secondary,
.badge.bg-gray-800,
.badge.bg-dark,
.badge.bg-light,
.bg-secondary.badge { background-color: var(--ap-parchment) !important; color: var(--ap-ink-80) !important; }

/* ── Alertas ─────────────────────────────────────────────────────────────── */
.alert {
    border-radius: var(--ap-r-lg);
    border: 1px solid var(--ap-hairline);
    padding: 14px 20px;
    font-size: 14px;
    letter-spacing: -0.224px;
    box-shadow: none;
}
.alert-danger { background: rgba(215, 0, 21, 0.06); border-color: rgba(215, 0, 21, 0.2); color: var(--ap-danger); }
.alert-success { background: rgba(36, 138, 61, 0.07); border-color: rgba(36, 138, 61, 0.22); color: var(--ap-success); }
.alert-info,
.alert-primary,
.alert-secondary { background: var(--ap-parchment); border-color: var(--ap-hairline); color: var(--ap-ink-80); }
.alert-warning { background: rgba(178, 80, 0, 0.07); border-color: rgba(178, 80, 0, 0.2); color: var(--ap-warning); }

/* ── Abas → configurator-option-chip ─────────────────────────────────────── */
.nav-tabs {
    border-bottom: 0;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 12px;
}
.nav-tabs .nav-link {
    background: var(--ap-canvas);
    color: var(--ap-ink);
    border: 1px solid var(--ap-hairline-soft);
    border-radius: var(--ap-r-pill);
    padding: 8px 16px;
    font-size: 14px;
    letter-spacing: -0.224px;
    margin-bottom: 0;
}
.nav-tabs .nav-link:hover { border-color: var(--ap-hairline); background: var(--ap-pearl); }
.nav-tabs .nav-link.active,
.nav-tabs .nav-item.show .nav-link {
    background: var(--ap-canvas);
    color: var(--ap-ink);
    border: 2px solid var(--ap-primary-focus);
    padding: 7px 15px;
}

#tabContent {
    background: var(--ap-canvas);
    border: 1px solid var(--ap-hairline) !important;
    border-radius: var(--ap-r-lg) !important;
    padding-top: 12px;
}

/* ── Paginação → chips em pílula ─────────────────────────────────────────── */
.pagination { gap: 6px; flex-wrap: wrap; }
.page-item .page-link {
    min-width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--ap-hairline-soft);
    border-radius: var(--ap-r-pill) !important;
    color: var(--ap-ink);
    background: var(--ap-canvas);
    font-size: 14px;
    letter-spacing: -0.224px;
    box-shadow: none !important;
}
.page-item .page-link:hover { background: var(--ap-pearl); text-decoration: none; }
.page-item.active .page-link {
    background: var(--ap-canvas);
    color: var(--ap-ink);
    border: 2px solid var(--ap-primary-focus);
}

/* ── Dropdowns ───────────────────────────────────────────────────────────── */
.dropdown-menu {
    border: 1px solid var(--ap-hairline);
    border-radius: var(--ap-r-lg);
    box-shadow: none;
    padding: 8px;
}
.dropdown-item {
    border-radius: var(--ap-r-sm);
    font-size: 14px;
    letter-spacing: -0.224px;
    color: var(--ap-ink);
}
.dropdown-item:hover,
.dropdown-item:focus { background: var(--ap-parchment); color: var(--ap-ink); }
.dropdown-divider { border-color: var(--ap-hairline); }

/* ── Rodapé (footer: parchment, fine-print) ──────────────────────────────── */
.content > footer {
    background: transparent !important;
    border: 0 !important;
    border-top: 1px solid var(--ap-hairline) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: 24px 4px !important;
    margin-top: 32px !important;
    font-size: 12px;
    letter-spacing: -0.12px;
    color: var(--ap-ink-80);
}
.content > footer p,
.content > footer a { font-size: 12px; color: var(--ap-ink-80) !important; }
.content > footer a:hover { color: var(--ap-primary) !important; }

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

.fmxw-500.bg-white {
    background: var(--ap-canvas) !important;
    border: 1px solid var(--ap-hairline) !important;
    border-radius: var(--ap-r-lg) !important;
    box-shadow: none !important;
}

.fmxw-500 h2,
.fmxw-500 .h5 { font-size: 28px; font-weight: 600; letter-spacing: 0.196px; }
.fmxw-500 .d-grid > .btn { min-height: 44px; font-size: 17px; letter-spacing: -0.374px; }

/* ── Chat do Beholder ────────────────────────────────────────────────────── */
.float {
    background-color: var(--ap-ink) !important;
    box-shadow: none !important;
    border: 0;
    transition: transform 0.1s ease;
}
.float:active { transform: scale(0.95); }

.offcanvas-custom {
    border-left: 1px solid var(--ap-hairline);
    box-shadow: none;
    border-radius: var(--ap-r-lg) 0 0 var(--ap-r-lg);
    background: var(--ap-canvas);
}

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

/* ── Utilitários do Volt que carregam cor/raio fora do sistema ───────────── */
.rounded { border-radius: var(--ap-r-lg) !important; }
.bg-white { background-color: var(--ap-canvas) !important; }
.border-light { border-color: var(--ap-hairline) !important; }
.bg-light { background-color: var(--ap-parchment) !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 → parchment ── */
.bg-secondary:not(.badge) {
    background-color: var(--ap-parchment) !important;
    color: var(--ap-ink-48) !important;
}
.input-group-text.bg-secondary,
.input-group-text.bg-warning,
.input-group-text.bg-success,
.input-group-text.bg-danger {
    background-color: var(--ap-parchment) !important;
    color: var(--ap-ink-80) !important;
    border-color: var(--ap-hairline-soft) !important;
}
.text-secondary { color: var(--ap-ink-48) !important; }
.border-secondary { border-color: var(--ap-hairline) !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: 16px;
    padding-right: 10px;
}
.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 pílula */
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;
    outline: 0 !important;
    min-height: 42px !important;
    width: 100%;
    background: transparent !important;
    padding-left: 8px;
}

/* 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; }

/* 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: 12px; padding-right: 12px; }

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

/* ── 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) no azul de ação ─────────────────────────── */
.ct-series-a .ct-line,
.ct-series-a .ct-point { stroke: var(--ap-primary) !important; }
.ct-series-a .ct-area { fill: var(--ap-primary) !important; fill-opacity: 0.08; }
.ct-grid { stroke: var(--ap-hairline) !important; stroke-dasharray: none !important; }
.ct-label { color: var(--ap-ink-48) !important; fill: var(--ap-ink-48) !important; font-size: 12px; }

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

@media (max-width: 734px) {
    body { font-size: 16px; }
    .content h1.h4,
    .content h2.h4 { font-size: 24px; letter-spacing: -0.28px; }
    .content .card h2.h4 { font-size: 21px; }
    .card-header { padding: 14px 17px; }
    .card-body { padding: 17px; }
    .card h3.fw-bolder { font-size: 24px; }
    .table > thead > tr > th,
    .table thead th { padding: 10px 8px; }
    .table > tbody > tr > td { padding: 10px 8px; }
    .table { font-size: 12px; }
}

@media (max-width: 419px) {
    .content h1.h4,
    .content h2.h4 { font-size: 22px; }
}

/* 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; }

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