/* Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700&family=Quicksand:wght@400;500;600;700&display=swap');

:root {
    --font-primary: 'Quicksand', sans-serif;
    /* Per user request/analysis */
    --font-secondary: 'Nunito', sans-serif;
    --color-natais-beige: #EBE7E0;
    /* Login BG approx */
    --color-natais-brown: #8D817B;
    /* Sidebar approx */
    --color-natais-green: #00796B;
    /* Active item approx */
    --color-natais-blue: #2196F3;
    /* Login button approx */
    --color-natais-cyan: #00BCD4;
    /* New cyan for buttons */
    --color-natais-yellow: #FFC107;
    --color-natais-teal: #00907f;
    /* Teal from verification button */
}

body {
    font-family: var(--font-primary);
}

/* Global Button Override */
.btn-primary {
    background-color: var(--color-natais-teal) !important;
    border-color: var(--color-natais-teal) !important;
    color: #fff !important;
}

.btn-primary:hover {
    filter: brightness(0.9);
}

/* Login Page Overrides */
/* Only overriding font and specific elements, keeping BG as is per request */
body.login-body,
.landing-bg {
    /* background-color: var(--color-natais-beige) !important; */
    /* background-image: none !important; */
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
}

.login-container {
    max-width: 500px;
    width: 100%;
    margin: 0 auto;
}

.login-container .panel {
    border: none;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
    background: #fff;
    border-radius: 8px;
    padding: 2rem;
    position: relative;
    /* Needed for popcorn positioning */
}

/* ... existing button styles ... */

.login-container .btn-primary {
    background-color: var(--color-natais-blue) !important;
    border-color: var(--color-natais-blue) !important;
    border-radius: 4px;
    font-weight: 600;
}

.logo-big img {
    max-height: 150px;
    max-width: 80% !important;
    width: auto;
    margin-top: 1%;
    margin-bottom: 0;
}

.subtitle {
    color: #444;
    /* Darker than before to match new style, but readable on bg */
    margin-bottom: 2rem;
    font-size: 0.95rem;
    font-family: var(--font-primary);
    /* Compact spacing */
    margin-top: 0 !important;
    margin-bottom: 1rem !important;
}

/* Compact h3 spacing */
.landing-content h3 {
    margin-bottom: 0.5rem !important;
}

/* Sidebar Overrides */
/* Sidebar Overrides - Flexible width for resizing */
.sidebar:not(.sidebar-main-resized):not(.sidebar-main-unfold),
.navbar-vertical {
    background-color: var(--color-natais-brown) !important;
    /*width: 240px !important;*/
    /* Reduced from default (~300px) */
}

.sidebar {
    background-color: var(--color-natais-brown) !important;
}

/* Sidebar Header Section - Custom Mauve Background per request */
/* Using direct child selector > to prevent coloring nested sections */
.sidebar>.sidebar-section:first-child {
    background-color: #eeddff !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05) !important;
}

.sidebar-logo {
    /* centered by flex in html */
    padding: 5px 0;
    /* Reduced from 10px */
}

/* Reduce default bootstrap padding on the link to save height */
.sidebar-logo a {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

/* Specific fix for the logo icon in sidebar */
.sidebar-logo-icon {
    max-height: none !important;
    /* Override default constraint */
    width: 80% !important;
    /* User request: 80% width of the container */
    height: auto;
    display: block;
    /* Removed background/padding/shadow from image itself as requested */
}

.sidebar .nav-link {
    color: rgba(255, 255, 255, 0.8) !important;
    font-weight: 500;
}

.sidebar .nav-link:hover {
    background-color: rgba(255, 255, 255, 0.1);
    color: #fff !important;
}

.sidebar .nav-link.active {
    background-color: var(--color-natais-green) !important;
    color: #fff !important;
}

.sidebar-user .media-body {
    color: #fff;
}

/* Popcorn decorations - Ensure they are visible if they exist in HTML */
.popcorn1,
.popcorn2 {
    display: block !important;
    position: absolute;
    z-index: 10;
}

/* Re-applying original popcorn styles if they were lost or need tweaking for the new panel */
/* Assuming original CSS handles position, but we can enforce it if needed. 
   Usually they are absolute positioned relative to the panel. */
.popcorn1 {
    top: -40px;
    right: -40px;
    width: 100px;
}

.popcorn2 {
    bottom: -30px;
    left: -30px;
    width: 80px;
}

/* Button variants */
.btn-cyan {
    background-color: var(--color-natais-cyan) !important;
    border-color: var(--color-natais-cyan) !important;
    color: #fff !important;
}

.btn-cyan:hover {
    background-color: var(--color-natais-cyan);
    filter: brightness(0.9);
    color: #fff !important;
}

/* FIX: Missing Sidebar Resizing Logic */
/* Collapsed state */
.sidebar-main-resized {
    /*width: 4.5rem !important;*/
}

/* Hide elements when resized and NOT unfolded (hovered) */
.sidebar-main-resized:not(.sidebar-main-unfold) .sidebar-resize-hide,
.sidebar-main-resized:not(.sidebar-main-unfold) .nav-group-sub,
.sidebar-main-resized:not(.sidebar-main-unfold) .sidebar-user-material-body,
.sidebar-main-resized:not(.sidebar-main-unfold) .sidebar-user .media-body,
.sidebar-main-resized:not(.sidebar-main-unfold) .nav-sidebar .nav-link span,
.sidebar-main-resized:not(.sidebar-main-unfold) .nav-sidebar .nav-link .badge,
.sidebar-main-resized:not(.sidebar-main-unfold) .nav-sidebar .nav-item-header {
    display: none !important;
}

/* Center icons when resized */
.sidebar-main-resized:not(.sidebar-main-unfold) .nav-sidebar .nav-link {
    justify-content: center;
    padding-left: 0;
    padding-right: 0;
}

.sidebar-main-resized:not(.sidebar-main-unfold) .nav-sidebar .nav-link i {
    margin-right: 0 !important;
    margin-left: 0 !important;
}

/* Unfolded state (Hover over collapsed sidebar) */
.sidebar-main-resized.sidebar-main-unfold {
    width: 240px !important;
    z-index: 1040;
    /* Ensure overlay z-index matches bootstrap conventions */
    position: absolute;
    /* Overlay content */
}

/* Ensure text is visible when unfolded */
.sidebar-main-resized.sidebar-main-unfold .sidebar-resize-hide,
.sidebar-main-resized.sidebar-main-unfold .nav-sidebar .nav-link span {
    display: block !important;
    /* Restore display */
}

/* Restore flex/alignment for unfolded items */
.sidebar-main-resized.sidebar-main-unfold .nav-sidebar .nav-link {
    justify-content: flex-start;
    padding-left: 1.25rem !important;
    /* Revert to standard padding if needed */
    padding-right: 1.25rem !important;
}

.sidebar-main-resized.sidebar-main-unfold .nav-sidebar .nav-link i {
    margin-right: 1.25rem !important;
    /* Standard spacing */
}

/* Navbar Positioning fixed by HTML structure update */