/* =====================================================================================================================
   Tema Vedas UI sobre o Bootstrap 5.3. Tokens e visual vem do design-kit/vedas-ui.css (fundo cinza-azulado, cards
   brancos arredondados com sombra suave, botoes em pilula, chips coloridos, Nunito Sans) - aqui adaptados as classes
   do Bootstrap que as views ja usam (.btn-primary, .form-control, .card, .modal...), em vez de trocar as classes de
   todas as telas. O tema escuro segue o data-bs-theme="dark" do <html> (o kit original usa html.escuro).
   Carregado DEPOIS do bootstrap.min.css e ANTES do app.css (que mapeia as --cor-* do projeto nestes tokens).
   ===================================================================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Nunito+Sans:opsz,wght@6..12,400;6..12,600;6..12,700;6..12,800;6..12,900&display=swap');

/* ---------- Tokens (iguais ao design-kit) ---------- */
:root {
    --brand-50: #F1F6FC;
    --brand-100: #E0ECF8;
    --brand-200: #BCD6EF;
    --brand-300: #7DB6E3;
    --brand-400: #249ED4;
    --brand-500: #0772BA;
    --brand-600: #2B3A7A;
    --brand-700: #1E285C;
    --brand-800: #161E47;
    --brand-900: #0E1330;

    --ink: #1F2433;
    --ink-soft: #5B6275;
    --ink-mute: #8A90A2;
    --surface: #F5F6FA;
    --line: #E7E9F0;
    --white: #FFFFFF;
    --white-hover: #F5F6FA;

    --primary-bg: var(--brand-700);
    --primary-hover: var(--brand-800);
    --secondary-bg: var(--brand-50);
    --secondary-hover: var(--brand-100);
    --secondary-text: var(--brand-700);
    --danger-bg: #FEF2F2;
    --danger-hover: #FEE2E2;
    --danger-text: #DC2626;
    --success-bg: #059669;
    --success-hover: #047857;
    --focus-ring: var(--brand-100);
    --link: var(--brand-500);

    --chip-orange-bg: #FFEDD5;  --chip-orange-text: #C2410C;
    --chip-blue-bg: #F1F6FC;    --chip-blue-text: #1E285C;
    --chip-sky-bg: #F0F9FF;     --chip-sky-text: #0369A1;
    --chip-purple-bg: #F3E8FF;  --chip-purple-text: #7E22CE;
    --chip-fuchsia-bg: #FAE8FF; --chip-fuchsia-text: #A21CAF;
    --chip-green-bg: #ECFDF5;   --chip-green-text: #047857;
    --chip-red-bg: #FEF2F2;     --chip-red-text: #B91C1C;
    --chip-amber-bg: #FFFBEB;   --chip-amber-text: #B45309;
    --chip-gray-bg: #F4F4F5;    --chip-gray-text: #71717A;

    --radius-xl: 14px;
    --radius-2xl: 18px;
    --radius-3xl: 24px;
    --radius-pill: 999px;
    --shadow-card: 0 1px 2px rgba(15,42,92,.04), 0 4px 16px rgba(15,42,92,.06);
    --shadow-pop: 0 8px 32px rgba(15,42,92,.16);
    --shadow-sm: 0 1px 2px 0 rgba(0,0,0,.05);
    --scrollbar: #d5d9e4;

    --font: "Nunito Sans", system-ui, sans-serif;
    --ease: cubic-bezier(.4, 0, .2, 1);
}

[data-bs-theme="dark"] {
    --ink: #E7EAF2;
    --ink-soft: #ACB3C5;
    --ink-mute: #80889C;
    --surface: #0F1320;
    --line: #2C3244;
    --white: #1A2030;
    --white-hover: #222A3D;

    --primary-bg: #2A3B85;
    --primary-hover: #33479C;
    --secondary-bg: rgba(36,158,212,.16);
    --secondary-hover: rgba(36,158,212,.24);
    --secondary-text: #8CC8EE;
    --danger-bg: rgba(239,68,68,.15);
    --danger-hover: rgba(239,68,68,.22);
    --danger-text: #FCA5A5;
    --focus-ring: rgba(36,158,212,.24);
    --link: #8CC8EE;

    --chip-orange-bg: rgba(249,115,22,.18);  --chip-orange-text: #FDBA74;
    --chip-blue-bg: rgba(36,158,212,.16);    --chip-blue-text: #8CC8EE;
    --chip-sky-bg: rgba(14,165,233,.16);     --chip-sky-text: #7DD3FC;
    --chip-purple-bg: rgba(147,51,234,.2);   --chip-purple-text: #D8B4FE;
    --chip-fuchsia-bg: rgba(192,38,211,.2);  --chip-fuchsia-text: #F0ABFC;
    --chip-green-bg: rgba(16,185,129,.15);   --chip-green-text: #6EE7B7;
    --chip-red-bg: rgba(239,68,68,.15);      --chip-red-text: #FCA5A5;
    --chip-amber-bg: rgba(245,158,11,.15);   --chip-amber-text: #FCD34D;
    --chip-gray-bg: rgba(255,255,255,.08);   --chip-gray-text: #A1A1AA;

    --shadow-card: 0 1px 2px rgba(0,0,0,.4);
    --shadow-pop: 0 8px 32px rgba(0,0,0,.5);
    --scrollbar: #3a4258;
}

/* ---------- Variaveis do Bootstrap apontando pros tokens ---------- */
:root, [data-bs-theme="light"], [data-bs-theme="dark"] {
    --bs-body-font-family: var(--font);
    --bs-body-bg: var(--surface);
    --bs-body-color: var(--ink);
    --bs-emphasis-color: var(--ink);
    --bs-secondary-color: var(--ink-soft);
    --bs-tertiary-color: var(--ink-mute);
    --bs-secondary-bg: var(--white-hover);
    --bs-tertiary-bg: var(--white-hover);
    --bs-border-color: var(--line);
    --bs-border-color-translucent: var(--line);
    --bs-link-color: var(--link);
    --bs-link-hover-color: var(--link);
    --bs-link-color-rgb: 7, 114, 186;
    --bs-link-hover-color-rgb: 7, 114, 186;
    --bs-primary: #1E285C;
    --bs-primary-rgb: 30, 40, 92;
    --bs-border-radius: var(--radius-xl);
    --bs-border-radius-sm: 10px;
    --bs-border-radius-lg: var(--radius-2xl);
    --bs-border-radius-xl: var(--radius-3xl);
    --bs-box-shadow-sm: var(--shadow-sm);
    --bs-box-shadow: var(--shadow-card);
    --bs-focus-ring-color: var(--focus-ring);
}
[data-bs-theme="dark"] {
    --bs-link-color-rgb: 140, 200, 238;
    --bs-link-hover-color-rgb: 140, 200, 238;
}

body { font-family: var(--font); background: var(--surface); color: var(--ink); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
h1, h2, h3, h4, h5, .modal-title { font-weight: 800; letter-spacing: -0.02em; }
.text-secondary, .text-muted { color: var(--ink-soft) !important; }
.bg-white { background-color: var(--white) !important; color: var(--ink); }
.border, .border-top, .border-bottom, .border-start, .border-end { border-color: var(--line) !important; }
.shadow-sm { box-shadow: var(--shadow-card) !important; }

/* ---------- Botoes em pilula ---------- */
.btn {
    --bs-btn-font-weight: 700;
    --bs-btn-border-radius: var(--radius-pill);
    --bs-btn-padding-x: 1.1rem;
    --bs-btn-focus-box-shadow: 0 0 0 4px var(--focus-ring);
    transition: all .15s var(--ease);
}
.btn-sm { --bs-btn-border-radius: var(--radius-pill); --bs-btn-padding-x: .85rem; --bs-btn-font-size: 13px; }
.btn-lg { --bs-btn-border-radius: var(--radius-pill); }
.btn:active { transform: scale(.98); }
.btn-link { --bs-btn-color: var(--link); --bs-btn-hover-color: var(--link); }
.btn-primary {
    --bs-btn-bg: var(--primary-bg); --bs-btn-border-color: var(--primary-bg); --bs-btn-color: #fff;
    --bs-btn-hover-bg: var(--primary-hover); --bs-btn-hover-border-color: var(--primary-hover); --bs-btn-hover-color: #fff;
    --bs-btn-active-bg: var(--primary-hover); --bs-btn-active-border-color: var(--primary-hover);
    --bs-btn-disabled-bg: var(--primary-bg); --bs-btn-disabled-border-color: var(--primary-bg);
    box-shadow: var(--shadow-sm);
}
.btn-secondary {
    --bs-btn-bg: var(--secondary-bg); --bs-btn-border-color: var(--secondary-bg); --bs-btn-color: var(--secondary-text);
    --bs-btn-hover-bg: var(--secondary-hover); --bs-btn-hover-border-color: var(--secondary-hover); --bs-btn-hover-color: var(--secondary-text);
    --bs-btn-active-bg: var(--secondary-hover); --bs-btn-active-border-color: var(--secondary-hover); --bs-btn-active-color: var(--secondary-text);
    --bs-btn-disabled-bg: var(--secondary-bg); --bs-btn-disabled-border-color: var(--secondary-bg); --bs-btn-disabled-color: var(--secondary-text);
}
.btn-outline-secondary, .btn-light {
    --bs-btn-bg: var(--white); --bs-btn-border-color: var(--line); --bs-btn-color: var(--ink);
    --bs-btn-hover-bg: var(--white-hover); --bs-btn-hover-border-color: var(--line); --bs-btn-hover-color: var(--ink);
    --bs-btn-active-bg: var(--white-hover); --bs-btn-active-border-color: var(--line); --bs-btn-active-color: var(--ink);
    --bs-btn-disabled-bg: var(--white); --bs-btn-disabled-border-color: var(--line); --bs-btn-disabled-color: var(--ink-mute);
}
.btn-outline-primary {
    --bs-btn-bg: var(--white); --bs-btn-border-color: var(--brand-200); --bs-btn-color: var(--secondary-text);
    --bs-btn-hover-bg: var(--secondary-bg); --bs-btn-hover-border-color: var(--brand-200); --bs-btn-hover-color: var(--secondary-text);
    --bs-btn-active-bg: var(--secondary-hover); --bs-btn-active-border-color: var(--brand-200); --bs-btn-active-color: var(--secondary-text);
}
[data-bs-theme="dark"] .btn-outline-primary { --bs-btn-border-color: var(--line); --bs-btn-hover-border-color: var(--line); --bs-btn-active-border-color: var(--line); }
.btn-danger {
    --bs-btn-bg: var(--danger-bg); --bs-btn-border-color: var(--danger-bg); --bs-btn-color: var(--danger-text);
    --bs-btn-hover-bg: var(--danger-hover); --bs-btn-hover-border-color: var(--danger-hover); --bs-btn-hover-color: var(--danger-text);
    --bs-btn-active-bg: var(--danger-hover); --bs-btn-active-border-color: var(--danger-hover); --bs-btn-active-color: var(--danger-text);
    --bs-btn-disabled-bg: var(--danger-bg); --bs-btn-disabled-border-color: var(--danger-bg); --bs-btn-disabled-color: var(--danger-text);
}
.btn-success {
    --bs-btn-bg: var(--success-bg); --bs-btn-border-color: var(--success-bg);
    --bs-btn-hover-bg: var(--success-hover); --bs-btn-hover-border-color: var(--success-hover);
    --bs-btn-active-bg: var(--success-hover); --bs-btn-active-border-color: var(--success-hover);
}
.btn-group > .btn, .input-group > .btn { --bs-btn-border-radius: var(--radius-xl); }
.input-group-sm > .btn { --bs-btn-border-radius: 10px; }

/* ---------- Campos ---------- */
.form-control, .form-select {
    border-color: var(--line);
    border-radius: var(--radius-xl);
    background-color: var(--white);
    color: var(--ink);
    transition: all .15s var(--ease);
}
.form-control-sm, .form-select-sm { border-radius: 10px; }
.form-control::placeholder { color: var(--ink-mute); }
.form-control:focus, .form-select:focus, .form-check-input:focus {
    border-color: var(--brand-500);
    box-shadow: 0 0 0 4px var(--focus-ring);
    background-color: var(--white);
    color: var(--ink);
}
.form-control:disabled, .form-select:disabled { background-color: var(--white-hover); color: var(--ink-mute); }
.form-label { font-size: 13px; font-weight: 700; color: var(--ink-soft); margin-bottom: .375rem; }
.form-check-input { border-color: var(--ink-mute); }
.form-check-input:checked { background-color: var(--brand-500); border-color: var(--brand-500); }
.input-group-text { background: var(--white-hover); border-color: var(--line); color: var(--ink-soft); border-radius: var(--radius-xl); }

/* ---------- Cards, modais, menus, alertas, tabelas ---------- */
.card {
    --bs-card-bg: var(--white);
    --bs-card-border-width: 0;
    --bs-card-border-radius: var(--radius-2xl);
    --bs-card-inner-border-radius: var(--radius-2xl);
    --bs-card-cap-bg: transparent;
    box-shadow: var(--shadow-card);
}
.modal {
    --bs-modal-bg: var(--white);
    --bs-modal-border-width: 0;
    --bs-modal-border-radius: var(--radius-3xl);
    --bs-modal-inner-border-radius: var(--radius-3xl);
    --bs-modal-box-shadow: var(--shadow-pop);
    --bs-modal-header-border-color: var(--line);
    --bs-modal-footer-border-color: var(--line);
}
.modal-content { box-shadow: var(--shadow-pop); }
.modal.fade .modal-dialog { transition: transform .22s ease-out; }
.dropdown-menu {
    --bs-dropdown-bg: var(--white);
    --bs-dropdown-border-color: var(--line);
    --bs-dropdown-border-radius: var(--radius-xl);
    --bs-dropdown-link-hover-bg: var(--white-hover);
    --bs-dropdown-link-active-bg: var(--secondary-bg);
    --bs-dropdown-link-active-color: var(--secondary-text);
    box-shadow: var(--shadow-pop);
    padding: .375rem;
}
.dropdown-item { border-radius: 10px; font-weight: 600; font-size: 14px; }
.alert { --bs-alert-border-radius: var(--radius-xl); border-width: 0; font-weight: 600; }
.alert-success { --bs-alert-bg: var(--chip-green-bg); --bs-alert-color: var(--chip-green-text); }
.alert-danger { --bs-alert-bg: var(--chip-red-bg); --bs-alert-color: var(--chip-red-text); }
.alert-warning { --bs-alert-bg: var(--chip-amber-bg); --bs-alert-color: var(--chip-amber-text); }
.alert-info { --bs-alert-bg: var(--chip-sky-bg); --bs-alert-color: var(--chip-sky-text); }
.alert-secondary, .alert-light { --bs-alert-bg: var(--chip-gray-bg); --bs-alert-color: var(--ink-soft); }
.table {
    --bs-table-bg: var(--white);
    --bs-table-color: var(--ink);
    --bs-table-border-color: var(--line);
    --bs-table-hover-bg: var(--white-hover);
    --bs-table-hover-color: var(--ink);
    --bs-table-striped-bg: var(--white-hover);
}
.table-light, .table > thead.table-light > tr > th {
    --bs-table-bg: var(--white-hover);
    --bs-table-color: var(--ink-soft);
    --bs-table-border-color: var(--line);
}
.table > thead th { font-size: 11.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; }
.table-responsive { border-radius: var(--radius-2xl); }
.table-responsive > .table.shadow-sm { border-radius: var(--radius-2xl); overflow: hidden; }
.nav-tabs { --bs-nav-tabs-border-color: var(--line); --bs-nav-tabs-link-active-bg: var(--white); --bs-nav-tabs-link-active-border-color: var(--line) var(--line) var(--white); }
.nav-pills { --bs-nav-pills-border-radius: var(--radius-pill); --bs-nav-pills-link-active-bg: var(--primary-bg); }
.nav-link { font-weight: 700; }
.progress { --bs-progress-bg: var(--line); --bs-progress-bar-bg: var(--brand-500); border-radius: var(--radius-pill); }
.pagination { --bs-pagination-bg: var(--white); --bs-pagination-border-color: var(--line); --bs-pagination-active-bg: var(--primary-bg); --bs-pagination-active-border-color: var(--primary-bg); --bs-pagination-color: var(--ink); }
.badge.rounded-pill, .badge.text-bg-success, .badge.text-bg-secondary, .badge.text-bg-danger, .badge.text-bg-warning, .badge.text-bg-primary, .badge.text-bg-info { border-radius: var(--radius-pill); font-weight: 700; }

/* ---------- Barra de navegacao ---------- */
.navbar { background: var(--white) !important; border-color: var(--line) !important; box-shadow: var(--shadow-sm); }
.navbar .nav-link {
    border-radius: var(--radius-pill);
    padding: .4rem .7rem !important;
    white-space: nowrap;
    color: var(--ink-soft);
    font-size: 14px;
    transition: all .15s var(--ease);
}
.navbar .nav-link:hover { color: var(--ink); background: var(--white-hover); }
.navbar .nav-link.active { background: var(--primary-bg); color: #fff; }
.navbar-nav { gap: 2px; }
[data-bs-theme="dark"] .navbar-toggler-icon { filter: invert(1); }

/* ---------- Classes do kit que nao existem no Bootstrap ---------- */
.chip {
    display: inline-flex; align-items: center; gap: .375rem;
    padding: .25rem .625rem; border-radius: var(--radius-pill);
    font-size: .75rem; line-height: 1rem; font-weight: 700; white-space: nowrap;
}
.chip-dot { width: .5rem; height: .5rem; border-radius: 50%; background: currentColor; }
.chip-orange  { background: var(--chip-orange-bg);  color: var(--chip-orange-text); }
.chip-blue    { background: var(--chip-blue-bg);    color: var(--chip-blue-text); }
.chip-sky     { background: var(--chip-sky-bg);     color: var(--chip-sky-text); }
.chip-purple  { background: var(--chip-purple-bg);  color: var(--chip-purple-text); }
.chip-fuchsia { background: var(--chip-fuchsia-bg); color: var(--chip-fuchsia-text); }
.chip-green   { background: var(--chip-green-bg);   color: var(--chip-green-text); }
.chip-red     { background: var(--chip-red-bg);     color: var(--chip-red-text); }
.chip-amber   { background: var(--chip-amber-bg);   color: var(--chip-amber-text); }
.chip-gray    { background: var(--chip-gray-bg);    color: var(--chip-gray-text); }

.tab {
    display: inline-flex; align-items: center; height: 2.25rem; padding: 0 1rem;
    border: 0; border-radius: var(--radius-pill); background: transparent; cursor: pointer;
    font-size: .875rem; font-weight: 700; color: var(--ink-soft); text-decoration: none;
    transition: all .15s var(--ease);
}
.tab:hover { color: var(--ink); text-decoration: none; }
.tab-active, .tab-active:hover { background: var(--primary-bg); color: #fff; }

.text-soft { color: var(--ink-soft) !important; }
.text-mute { color: var(--ink-mute) !important; }
.divider { border: 0; border-top: 1px solid var(--line); margin: 0; }

::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-thumb { background: var(--scrollbar); border-radius: 999px; }
::-webkit-scrollbar-track { background: transparent; }

@keyframes slide-up { from { transform: translateY(16px); opacity: 0 } to { transform: none; opacity: 1 } }
.animate-slide-up { animation: slide-up .22s ease-out; }
