:root {
    --cor-fundo: #0c0d10;
    --cor-superficie: #17181b;
    --cor-superficie-alta: #212227;
    --cor-texto: #e9e9ed;
    --cor-acento: #2c90e8;
    --cor-acento-escuro: #0d7dd4;
    --cor-acento-400: #6da9e7;
    --cor-acento-300: #a2c8f0;
    --neutro-100: #f1f2f4;
    --neutro-200: #dddee0;
    --neutro-300: #c3c4c7;
    --neutro-400: #a7a7aa;
    --neutro-500: #88898c;
    --neutro-600: #68696b;
    --neutro-700: #4a4a4d;
    --neutro-800: #2d2e30;
    --neutro-900: #18181a;
    --prioridade-alta: #d33b36;
    --prioridade-alta-texto: #fff6f5;
    --prioridade-media: #e9ac00;
    --prioridade-media-texto: #181003;
    --prioridade-baixa: #008ab5;
    --prioridade-baixa-texto: #f4fbfe;
    --cor-sucesso: #40a35c;
    --altura-nav-inferior: 64px;
}

[data-bs-theme="dark"] {
    --bs-body-bg: var(--cor-fundo);
    --bs-body-color: var(--cor-texto);
    --bs-body-font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --bs-emphasis-color: var(--neutro-100);
    --bs-emphasis-color-rgb: 241, 242, 244;
    --bs-secondary-color: var(--neutro-400);
    --bs-secondary-color-rgb: 167, 167, 170;
    --bs-tertiary-color: var(--neutro-500);
    --bs-secondary-bg: var(--cor-superficie);
    --bs-tertiary-bg: var(--cor-superficie-alta);
    --bs-border-color: var(--neutro-800);
    --bs-border-color-translucent: rgba(233, 233, 237, 0.16);
    --bs-heading-color: var(--neutro-100);
    --bs-primary: var(--cor-acento);
    --bs-primary-rgb: 44, 144, 232;
    --bs-danger: var(--prioridade-alta);
    --bs-danger-rgb: 211, 59, 54;
    --bs-warning: var(--prioridade-media);
    --bs-warning-rgb: 233, 172, 0;
    --bs-info: var(--prioridade-baixa);
    --bs-info-rgb: 0, 138, 181;
    --bs-success: var(--cor-sucesso);
    --bs-success-rgb: 64, 163, 92;
    --bs-link-color: var(--cor-acento);
    --bs-link-color-rgb: 44, 144, 232;
    --bs-link-hover-color: var(--cor-acento-400);
    --bs-link-hover-color-rgb: 109, 169, 231;
    --bs-focus-ring-color: rgba(44, 144, 232, 0.25);
    --bs-border-radius-sm: 0.25rem;
    --bs-border-radius: 0.5rem;
    --bs-border-radius-lg: 0.875rem;
}

html {
    font-size: 14px;
}

@media (min-width: 768px) {
    html {
        font-size: 16px;
    }
}

h1, h2, h3, h4, h5, h6 {
    font-weight: 500;
}

.btn:focus-visible,
.form-control:focus,
.form-select:focus,
.form-check-input:focus {
    border-color: rgba(44, 144, 232, 0.6);
    box-shadow: 0 0 0 0.25rem rgba(44, 144, 232, 0.25);
}

.btn-primary {
    --bs-btn-color: #ffffff;
    --bs-btn-bg: var(--cor-acento);
    --bs-btn-border-color: var(--cor-acento);
    --bs-btn-hover-color: #ffffff;
    --bs-btn-hover-bg: var(--cor-acento-escuro);
    --bs-btn-hover-border-color: var(--cor-acento-escuro);
    --bs-btn-active-color: #ffffff;
    --bs-btn-active-bg: var(--cor-acento-escuro);
    --bs-btn-active-border-color: var(--cor-acento-escuro);
    --bs-btn-disabled-color: #ffffff;
    --bs-btn-disabled-bg: var(--neutro-700);
    --bs-btn-disabled-border-color: var(--neutro-700);
}

.btn-outline-secondary {
    --bs-btn-color: var(--neutro-200);
    --bs-btn-border-color: var(--neutro-700);
    --bs-btn-hover-color: var(--neutro-100);
    --bs-btn-hover-bg: var(--cor-superficie-alta);
    --bs-btn-hover-border-color: var(--neutro-600);
    --bs-btn-active-color: var(--neutro-100);
    --bs-btn-active-bg: var(--neutro-800);
    --bs-btn-active-border-color: var(--neutro-600);
    --bs-btn-disabled-color: var(--neutro-600);
    --bs-btn-disabled-border-color: var(--neutro-800);
}

.btn-success {
    --bs-btn-color: #ffffff;
    --bs-btn-bg: var(--cor-sucesso);
    --bs-btn-border-color: var(--cor-sucesso);
    --bs-btn-hover-color: #ffffff;
    --bs-btn-hover-bg: #358a4d;
    --bs-btn-hover-border-color: #358a4d;
    --bs-btn-active-color: #ffffff;
    --bs-btn-active-bg: #358a4d;
    --bs-btn-active-border-color: #358a4d;
}

.btn-outline-success {
    --bs-btn-color: var(--cor-sucesso);
    --bs-btn-border-color: var(--cor-sucesso);
    --bs-btn-hover-color: #ffffff;
    --bs-btn-hover-bg: var(--cor-sucesso);
    --bs-btn-hover-border-color: var(--cor-sucesso);
    --bs-btn-active-color: #ffffff;
    --bs-btn-active-bg: var(--cor-sucesso);
    --bs-btn-active-border-color: var(--cor-sucesso);
}

.badge-prioridade-alta {
    background-color: var(--prioridade-alta);
    color: var(--prioridade-alta-texto);
}

.badge-prioridade-media {
    background-color: var(--prioridade-media);
    color: var(--prioridade-media-texto);
}

.badge-prioridade-baixa {
    background-color: var(--prioridade-baixa);
    color: var(--prioridade-baixa-texto);
}

.badge-chip {
    background-color: var(--cor-superficie-alta);
    color: var(--neutro-200);
    border: 1px solid var(--neutro-700);
}

.table {
    --bs-table-color: var(--cor-texto);
    --bs-table-bg: transparent;
    --bs-table-border-color: var(--bs-border-color);
    --bs-table-striped-color: var(--cor-texto);
    --bs-table-striped-bg: rgba(233, 233, 237, 0.03);
    --bs-table-hover-color: var(--cor-texto);
    --bs-table-hover-bg: rgba(233, 233, 237, 0.05);
}

.table-danger {
    --bs-table-color: var(--cor-texto);
    --bs-table-bg: rgba(211, 59, 54, 0.14);
    --bs-table-border-color: rgba(211, 59, 54, 0.35);
    --bs-table-striped-color: var(--cor-texto);
    --bs-table-striped-bg: rgba(211, 59, 54, 0.18);
    --bs-table-hover-color: var(--cor-texto);
    --bs-table-hover-bg: rgba(211, 59, 54, 0.22);
    --bs-table-active-color: var(--cor-texto);
    --bs-table-active-bg: rgba(211, 59, 54, 0.22);
}

.table-active {
    --bs-table-color-state: var(--neutro-400);
    --bs-table-bg-state: rgba(233, 233, 237, 0.06);
}

.navbar {
    background-color: var(--cor-superficie);
    border-bottom: 1px solid var(--bs-border-color);
}

    .navbar .navbar-brand {
        font-weight: 500;
        color: var(--neutro-100);
    }

    .navbar .nav-link {
        color: var(--neutro-400);
    }

        .navbar .nav-link:hover {
            color: var(--neutro-100);
        }

        .navbar .nav-link.active {
            color: var(--cor-acento);
            font-weight: 500;
        }

.card {
    --bs-card-bg: var(--cor-superficie);
    --bs-card-border-color: var(--bs-border-color);
    --bs-card-cap-bg: transparent;
    transition: box-shadow 0.15s ease-in-out;
}

    .card:hover {
        box-shadow: 0 6px 18px rgba(0, 0, 0, 0.55);
    }

.list-group {
    --bs-list-group-bg: var(--cor-superficie);
    --bs-list-group-border-color: var(--bs-border-color);
}

.dropdown-menu {
    --bs-dropdown-bg: var(--cor-superficie-alta);
    --bs-dropdown-border-color: var(--neutro-700);
    --bs-dropdown-link-hover-bg: var(--neutro-800);
}

.nav-inferior {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1030;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    background-color: var(--cor-superficie);
    border-top: 1px solid var(--bs-border-color);
    padding: 0.25rem 0 calc(0.25rem + env(safe-area-inset-bottom));
}

    .nav-inferior a {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 2px;
        min-height: 52px;
        font-size: 0.6875rem;
        color: var(--neutro-400);
        text-decoration: none;
    }

        .nav-inferior a .bi {
            font-size: 1.25rem;
            line-height: 1;
        }

        .nav-inferior a.active {
            color: var(--cor-acento);
        }

@media (max-width: 767.98px) {
    body {
        padding-bottom: calc(var(--altura-nav-inferior) + env(safe-area-inset-bottom));
    }
}

.btn-toggle-circulo {
    width: 44px;
    height: 44px;
    min-width: 44px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    padding: 0;
}

.anotacao-conteudo {
    background-color: var(--cor-superficie);
    border: 1px solid var(--bs-border-color);
    border-radius: var(--bs-border-radius);
    padding: 1rem;
}

.ql-toolbar.ql-snow,
.ql-container.ql-snow {
    border-color: var(--bs-border-color);
}

.ql-toolbar.ql-snow {
    background-color: var(--cor-superficie-alta);
}

.ql-container.ql-snow {
    background-color: var(--cor-superficie);
    color: var(--cor-texto);
}

.ql-snow .ql-stroke {
    stroke: var(--neutro-300);
}

.ql-snow .ql-fill {
    fill: var(--neutro-300);
}

.ql-snow .ql-picker {
    color: var(--neutro-300);
}

.ql-snow .ql-picker-options {
    background-color: var(--cor-superficie-alta);
    border-color: var(--neutro-700);
}

.ql-editor.ql-blank::before {
    color: var(--neutro-500);
}

#calendar {
    --fc-border-color: var(--neutro-800);
    --fc-page-bg-color: var(--cor-fundo);
    --fc-neutral-bg-color: var(--cor-superficie);
    --fc-today-bg-color: rgba(44, 144, 232, 0.12);
    --fc-highlight-color: rgba(44, 144, 232, 0.2);
    --fc-list-event-hover-bg-color: var(--cor-superficie-alta);
    --fc-button-bg-color: var(--cor-superficie-alta);
    --fc-button-border-color: var(--neutro-700);
    --fc-button-text-color: var(--neutro-200);
    --fc-button-hover-bg-color: var(--neutro-800);
    --fc-button-hover-border-color: var(--neutro-600);
    --fc-button-active-bg-color: var(--cor-acento);
    --fc-button-active-border-color: var(--cor-acento);
}

.fc a {
    color: inherit;
    text-decoration: none;
}

.fc .fc-list-day-cushion {
    background-color: var(--cor-superficie);
}

.form-floating > .form-control-plaintext::placeholder,
.form-floating > .form-control::placeholder {
    color: var(--bs-secondary-color);
    text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder,
.form-floating > .form-control:focus::placeholder {
    text-align: start;
}

.min-width-0 {
    min-width: 0;
}

.btn-outline-primary {
    --bs-btn-color: var(--cor-acento-400);
    --bs-btn-border-color: var(--cor-acento);
    --bs-btn-hover-color: #ffffff;
    --bs-btn-hover-bg: var(--cor-acento);
    --bs-btn-hover-border-color: var(--cor-acento);
    --bs-btn-active-color: #ffffff;
    --bs-btn-active-bg: var(--cor-acento-escuro);
    --bs-btn-active-border-color: var(--cor-acento-escuro);
}

.btn-outline-danger {
    --bs-btn-color: var(--prioridade-alta);
    --bs-btn-border-color: var(--prioridade-alta);
    --bs-btn-hover-color: var(--prioridade-alta-texto);
    --bs-btn-hover-bg: var(--prioridade-alta);
    --bs-btn-hover-border-color: var(--prioridade-alta);
    --bs-btn-active-color: var(--prioridade-alta-texto);
    --bs-btn-active-bg: var(--prioridade-alta);
    --bs-btn-active-border-color: var(--prioridade-alta);
}

.btn-outline-warning {
    --bs-btn-color: var(--prioridade-media);
    --bs-btn-border-color: var(--prioridade-media);
    --bs-btn-hover-color: var(--prioridade-media-texto);
    --bs-btn-hover-bg: var(--prioridade-media);
    --bs-btn-hover-border-color: var(--prioridade-media);
    --bs-btn-active-color: var(--prioridade-media-texto);
    --bs-btn-active-bg: var(--prioridade-media);
    --bs-btn-active-border-color: var(--prioridade-media);
}

.pagination {
    --bs-pagination-bg: var(--cor-superficie);
    --bs-pagination-border-color: var(--neutro-800);
    --bs-pagination-color: var(--neutro-200);
    --bs-pagination-hover-bg: var(--cor-superficie-alta);
    --bs-pagination-hover-color: var(--neutro-100);
    --bs-pagination-hover-border-color: var(--neutro-700);
    --bs-pagination-focus-bg: var(--cor-superficie-alta);
    --bs-pagination-focus-color: var(--neutro-100);
    --bs-pagination-active-bg: var(--cor-acento);
    --bs-pagination-active-border-color: var(--cor-acento);
    --bs-pagination-disabled-bg: var(--cor-superficie);
    --bs-pagination-disabled-color: var(--neutro-600);
    --bs-pagination-disabled-border-color: var(--neutro-800);
}

.anotacao-previa {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 5;
    line-clamp: 5;
    overflow: hidden;
}

.tarefa-concluida {
    text-decoration: line-through;
}

.arraste-handle {
    cursor: grab;
}

    .arraste-handle:active {
        cursor: grabbing;
    }

.sortable-ghost {
    opacity: 0.4;
}