:root {
    --primicia-blue: #09487f;
    --sidebar-width: 280px;
}

body {
    background-color: #f8f9fa; /* Fundo claro por padrão */
}

/* --- Layout da Sidebar --- */
.sidebar {
    position: fixed;
    top: 0;
    left: 0;
    width: var(--sidebar-width);
    height: 100vh;
    padding: 1.5rem;
    background-color: #fff;
    border-right: 1px solid #dee2e6;
    display: flex;
    flex-direction: column;
    transition: all 0.3s ease;
}

.main-content {
    margin-left: var(--sidebar-width);
    padding: 2rem;
    transition: all 0.3s ease;
}

/* --- Estilos da Sidebar --- */
.sidebar-header {
    margin-bottom: 2rem;
    font-size: 1.5rem;
    font-weight: bold;
    color: var(--primicia-blue);
}

.sidebar .nav-link {
    display: flex;
    align-items: center;
    padding: 0.75rem 1rem;
    margin-bottom: 0.5rem;
    font-size: 1.1rem;
    color: #495057;
    border-radius: 0.5rem;
    transition: all 0.2s ease;
}

.sidebar .nav-link i {
    margin-right: 1rem;
    font-size: 1.4rem;
    width: 25px; /* Alinhamento dos ícones */
    text-align: center;
}

.sidebar .nav-link:hover {
    background-color: rgba(9, 72, 127, 0.1);
    color: var(--primicia-blue);
}

.sidebar .nav-link.active {
    background-color: var(--primicia-blue);
    color: #fff;
    font-weight: 500;
}

.sidebar-footer {
    margin-top: auto;
}

/* --- Componentes Visuais --- */
.profile-avatar {
    width: 150px;
    height: 150px;
    object-fit: cover;
    border-radius: 50%;
    border: 4px solid var(--primicia-blue);
}

.note-card {
    background-color: #fff3cd;
    border-left: 5px solid #ffeeba;
    padding: 1rem;
    border-radius: 0.25rem;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    transition: transform 0.2s ease;
}
.note-card:hover {
    transform: translateY(-5px);
}


/* --- Tema Escuro --- */
[data-bs-theme="dark"] body {
    background-color: #212529;
}

[data-bs-theme="dark"] .sidebar {
    background-color: #343a40;
    border-right: 1px solid #495057;
}

[data-bs-theme="dark"] .sidebar .nav-link {
    color: #adb5bd;
}

[data-bs-theme="dark"] .sidebar .nav-link:hover {
    background-color: rgba(255, 255, 255, 0.1);
    color: #fff;
}

[data-bs-theme="dark"] .sidebar .nav-link.active {
    background-color: var(--primicia-blue);
}

[data-bs-theme="dark"] .note-card {
    background-color: #3e3828;
    border-left-color: #5c533a;
}

/* Estilos para as cores das notas */
.note-card.note-yellow {
    background-color: #fef9c3; /* Amarelo claro */
    border-left-color: #facc15; /* Amarelo */
}
.dark .note-card.note-yellow {
    background-color: #4a4220;
    border-left-color: #facc15;
}

.note-card.note-blue {
    background-color: #dbeafe; /* Azul claro */
    border-left-color: #3b82f6; /* Azul */
}
.dark .note-card.note-blue {
    background-color: #1e3a8a;
    border-left-color: #3b82f6;
}

.note-card.note-green {
    background-color: #dcfce7; /* Verde claro */
    border-left-color: #22c55e; /* Verde */
}
.dark .note-card.note-green {
    background-color: #164e32;
    border-left-color: #22c55e;
}

.note-card.note-red {
    background-color: #fee2e2; /* Vermelho claro */
    border-left-color: #ef4444; /* Vermelho */
}
.dark .note-card.note-red {
    background-color: #5f1818;
    border-left-color: #ef4444;
}

/* Efeito de Post-it aprimorado */
.post-it {
    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
    box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.08);
    border-width: 1px;
    display: flex;
    flex-direction: column;
}
.post-it:hover {
    transform: scale(1.03) rotate(0deg) !important;
    box-shadow: 10px 10px 25px rgba(0, 0, 0, 0.12);
    z-index: 10;
}

/* Rotações sutis para dar um ar mais orgânico ao mural */
.post-it:nth-child(4n+1) { transform: rotate(-1.5deg); }
.post-it:nth-child(4n+2) { transform: rotate(1deg); }
.post-it:nth-child(4n+3) { transform: rotate(1.8deg); }
.post-it:nth-child(4n+4) { transform: rotate(-1deg); }

/* Cores das Notas */
.note-yellow { background-color: #fefcbf; border-color: #fde047; color: #713f12; }
.dark .note-yellow { background-color: #423d18; border-color: #fde047; color: #fef3c7; }

.note-blue { background-color: #dbeafe; border-color: #60a5fa; color: #1e3a8a; }
.dark .note-blue { background-color: #1e3a8a; border-color: #60a5fa; color: #dbeafe; }

.note-green { background-color: #dcfce7; border-color: #4ade80; color: #14532d; }
.dark .green-note { background-color: #164e32; border-color: #4ade80; color: #dcfce7; }

.note-red { background-color: #fee2e2; border-color: #f87171; color: #7f1d1d; }
.dark .note-red { background-color: #5f1818; border-color: #f87171; color: #fee2e2; }

/* --- NOVO: Estilo para o Marca-Texto --- */
mark {
    background-color: #fef08a; /* Amarelo marca-texto */
    color: inherit;
    padding: 0.1em 0.2em;
    border-radius: 3px;
}
.dark mark {
    background-color: #a16207; /* Amarelo escuro para o tema dark */
    color: #fef9c3;
}

/* --- NOVO: Estilo para o Marca-Texto --- */
mark {
    background-color: #fff88d; /* Cor amarela suave para o destaque */
    padding: 0 0.2em;
    border-radius: 0.2em;
    color: inherit; /* Garante que o texto dentro do mark mantenha a cor do tema */
}
.dark mark {
    background-color: #796a00; /* Cor mais escura para o tema escuro */
    color: #fff88d;
}

/* Estilo para garantir que o conteúdo do post-it se expanda corretamente */
.post-it .flex-grow {
    padding-bottom: 1rem; /* Adiciona um padding extra para evitar sobreposição com o rodapé */
}