/* ============================= */
/* 🎨 VARIÁVEIS E CONFIGURAÇÕES */
/* ============================= */
:root {
    --primary-color: #364d63;
    --light-bg: #f7f9fc;
    --dark-bg: #1e1e1e;
    --dark-card-bg: #2b2b2b;
    --dark-text: #e0e0e0;
}

html {
    scroll-behavior: smooth;
}

body {
    background-color: var(--light-bg);
    padding-top: 70px;
    transition: background-color 0.3s, color 0.3s;
    font-family: 'Inter', sans-serif;
    font-size: 18px;
}

/* ====================== */
/* 🧭 NAVEGAÇÃO E FOOTER */
/* ====================== */

.navbar-brand {
    font-weight: bold;
}

footer {
    color: #fff;
    padding-top: 30px;
    text-align: center;
    margin-top: 60px;
}

footer a {
    color: #25D366;
    transition: color 0.2s ease-in-out;
}

footer a:hover {
    color: #1DA851;
}


/* ===================== */
/* 📝 TIPOGRAFIA & LINKS */
/* ===================== */
h1, h2, h3, h4, .h1, .h2, .h3, .h4 {
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
}

a, a:hover {
    text-decoration: none;
    cursor: pointer;
}


/* ======================= */
/* 📦 ACORDEÕES / ACCORDION */
/* ======================= */
.accordion-button {
    font-weight: 500;
    font-size: 1.1rem;
    background-color: #ffffff;
    transition: background-color 0.3s;
}

.accordion-button:not(.collapsed) {
    background-color: #e7f1ff;
    color: var(--primary-color);
}

.accordion-body {
    font-size: 0.96rem;
    line-height: 1.6;
    color: #444;
    background-color: #fff;
    border-radius: 0 0 8px 8px;
    padding: 1rem 1.25rem;
}

.accordion-item {
    border: none;
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.05);
    border-radius: 8px;
    margin-bottom: 1rem;
}

.accordion-body p:last-of-type {
    margin-bottom: 0 !important;
}

.accordion-footer {
    margin-bottom: 0 !important;
}

.acc-btn::after {
    content: "\25B2";
    margin-left: 7px;
    font-size: .7em;
}

.acc-btn.collapsed::after {
    content: "\25BC";
}


/* ===================== */
/* 🧰 FORMULÁRIOS & INPUTS */
/* ===================== */
.form-control,
.form-select,
.form-check-input {
    border: 1px solid #cccdce;
}

.form-search {
    border-radius: 30px;
    padding-left: 2.5rem;
}

.form-search::placeholder {
    font-size: 0.9rem;
}

.search-icon {
    position: absolute;
    top: 50%;
    left: 15px;
    transform: translateY(-50%);
    color: #999;
}


/* ============================= */
/* 💬 TOOLTIP E ELEMENTOS HOVER */
/* ============================= */
[data-bs-toggle="tooltip"] img {
    cursor: help;
}

[data-bs-toggle="tooltip"]:hover img {
    filter: brightness(0) saturate(100%) invert(17%) sepia(84%) saturate(2745%) hue-rotate(207deg) brightness(94%) contrast(103%);
}


/* =========================== */
/* 📄 ÁREA DE TEXTO / EDITOR */
/* =========================== */
#editor {
    height: 150px;
    background-color: white;
}

.ql-toolbar.ql-snow {
    background-color: #f8f9fa !important;
}


/* ===================== */
/* 📋 TABELAS E LISTAS  */
/* ===================== */
.striped tbody tr:nth-child(odd) td,
.striped tbody tr:nth-child(odd) th {
    background-color: rgba(127, 127, 127, 0.05);
}

#itensModelos ul,
#anexoON ul {
    list-style-type: none;
}

/* ====================== */
/* 🔆 MODO ESCURO (Dark) */
/* ====================== */
.dark-mode {
    background-color: var(--dark-bg) !important;
    color: var(--dark-text);
}

/* Accordion */

.dark-mode .accordion {
    --bs-accordion-border-color: transparent;
}

.dark-mode .accordion-button {
    background-color: var(--dark-card-bg);
    color: var(--dark-text);
}

.dark-mode .accordion-button:not(.collapsed) {
    background-color: #333333;
    color: #70b8ff;
}

.dark-mode .accordion-button::after {
    filter: brightness(400%);
}

.dark-mode .accordion-item,
.dark-mode .card {
    overflow: hidden;
}

.dark-mode .accordion-body,
.dark-mode .card-body {
    background-color: var(--dark-card-bg);
    color: var(--dark-text);
}

.dark-mode .accordion-item {
    background-color: var(--dark-card-bg);
    border: 1px solid #333;
}

/* Elementos Gerais */
.dark-mode .bg-light {
    background-color: #1f1f1f !important;
    color: #f8f9fa !important;
}

.dark-mode .card {
    border-color: #444 !important;
}

.dark-mode .card-header {
    background-color: #2c2f33 !important;
    color: #ffffff;
    border-bottom: 1px solid #444;
}

.dark-mode .text-muted,
.dark-mode .form-text {
    color: #adb5bd !important;
}

.dark-mode .btn-close {
    filter: invert(1);
}

/* Tabelas */
.dark-mode .table {
    --bs-table-color: #fff;
    --bs-table-bg: #212529;
    --bs-table-border-color: #4d5154;
    --bs-table-striped-bg: #2c3034;
    --bs-table-striped-color: #fff;
    --bs-table-active-bg: #373b3e;
    --bs-table-active-color: #fff;
    --bs-table-hover-bg: #323539;
    --bs-table-hover-color: #fff;
    color: var(--bs-table-color);
    border-color: var(--bs-table-border-color);
}

.dark-mode .bg-dark {
    background-color: #e2e3e5 !important;
}

.dark-mode #tbMatriz .bg-dark {
    border-color: #b5b6b7 !important;
}

/* Editor */
.dark-mode .ql-container.ql-snow {
    color: #212529 !important;
}

/* Destaques */
.dark-mode .marcador-amarelo {
    background-color: #665f00;
}


/* ===================== */
/* 🎯 COMPONENTES EXTRA */
/* ===================== */
.marcador-amarelo {
    background-color: #fff89a;
}

.number {
    font-family: monospace;
    text-align: right;
}

.text-indent {
    text-indent: 1.5rem;
}

.flag {
    width: auto;
    height: 80px;
}

/* ===================== */
/* 🌗 BOTÕES DARKMODE */
/* ===================== */
.btn-darkmode-light {
    background-color: #f8f9fa;
    color: #212529;
    border: none;
}

.btn-darkmode-light:hover {
    background-color: #e2e6ea;
}

.btn-darkmode-dark {
    background-color: #343a40;
    color: #f8f9fa;
    border: none;
}

.btn-darkmode-dark:hover {
    background-color: #23272b;
}


/* ===================== */
/* 🧾 AJUSTES DE TEXTO */
/* ===================== */
[id^="cap"] p {
    text-indent: 1.5rem;
}