:root {
    --primary-color: #014F86; /* Darker, professional blue */
    --secondary-color: #0077B6; /* A complementary secondary blue */
    --accent-color: #0096C7; /* A lighter accent blue */
    --dark-color: #012a4a;   /* Existing dark color - kept */
    --light-color: #f8f9fa; /* Existing light color - kept */
    --sidebar-bg: #013A63; /* Existing sidebar - can adjust if needed, e.g., to complement new primary */
    --sidebar-link-color: #e0f2f7;
    --sidebar-link-hover-bg: #012a4a; /* Can be same as dark-color or a slightly lighter shade of sidebar-bg */
    --sidebar-width: 250px;
    --sidebar-width-collapsed: 70px; /* For icon-only view if implemented */
}

body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background-color: var(--light-color);
    color: #333;
    margin: 0; /* Remove default margin */
}

.app-layout {
    display: flex;
    min-height: 100vh;
}

.app-layout.no-sidebar .app-main-content {
    margin-left: 0 !important;
}
.app-layout.no-sidebar .app-sidebar,
.app-layout.no-sidebar .sidebar-toggle-btn {
    display: none !important;
}

.app-sidebar {
    width: var(--sidebar-width);
    background-color: var(--sidebar-bg);
    color: var(--sidebar-link-color);
    padding-top: 1rem;
    position: fixed; /* Fixed Sidebar */
    top: 0;
    left: 0;
    bottom: 0;
    z-index: 1000; /* Ensure it's above other content if needed */
    overflow-y: auto; /* Scroll if content overflows */
    transition: width 0.3s ease; /* For collapse animation if added */
}

.app-sidebar .nav-link {
    color: var(--sidebar-link-color);
    padding: 0.75rem 1rem;
    display: flex;
    align-items: center;
    white-space: nowrap; /* Prevent text wrapping */
}

.app-sidebar .nav-link i.fas {
    margin-right: 0.75rem;
    width: 20px; /* Fixed width for icons */
    text-align: center;
}

.app-sidebar .nav-link .sidebar-text {
    opacity: 1;
    transition: opacity 0.3s ease;
}

.app-sidebar .nav-link:hover,
.app-sidebar .nav-link.active { /* Add .active class for current page */
    background-color: var(--sidebar-link-hover-bg);
    text-decoration: none;
}

.app-sidebar .app-logo-sidebar {
    padding: 1rem;
    text-align: center;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    margin-bottom: 1rem;
}
.app-sidebar .app-logo-sidebar h5 {
    color: white;
    margin: 0;
    font-weight: 600;
    display: flex; 
    align-items: center; 
    justify-content: flex-start; 
    padding-left: 0.6rem;
}
.app-sidebar .app-logo-sidebar h5 img {
    height: 30px; 
    width: 30px; 
    margin-right: 10px;
}
.app-sidebar .app-logo-sidebar i.fas {
     margin-right: 0.5rem;
}


.app-main-content {
    flex-grow: 1;
    padding: 1.5rem;
    margin-left: var(--sidebar-width);
    transition: margin-left 0.3s ease;
    overflow-x: hidden;
}

.sidebar-toggle-btn {
    display: none; /* Hidden by default, shown on small screens */
    position: fixed;
    top: 10px;
    left: 10px;
    z-index: 1030; /* Above sidebar when it's an overlay */
    background-color: var(--primary-color); /* Reverted from transparent */
    color: white;
    border: none;
    width: 40px;
    height: 40px;
    padding: 0;
    border-radius: 50%; /* Make it round */
    align-items: center;
    justify-content: center;
}

/* Collapsed state for wider screens (icon-only) */
.app-sidebar.collapsed {
    width: var(--sidebar-width-collapsed);
}
.app-sidebar.collapsed .sidebar-text,
.app-sidebar.collapsed .app-logo-sidebar h5 .sidebar-text {
    opacity: 0;
    visibility: hidden;
    width: 0;
    display: inline-block; /* Keeps space for transition if needed, but visibility:hidden is better */
}
.app-sidebar.collapsed .nav-link i.fas {
    margin-right: 0; /* Icons centered when text is hidden */
}
.app-main-content.sidebar-collapsed {
    margin-left: var(--sidebar-width-collapsed);
}

/* Styles for mobile: sidebar as an overlay */
@media (max-width: 991.98px) { /* Bootstrap's lg breakpoint */
    .app-sidebar {
        width: var(--sidebar-width); /* Full width when open */
        left: calc(-1 * var(--sidebar-width)); /* Initially hidden off-screen */
        transition: left 0.3s ease;
        box-shadow: 2px 0 5px rgba(0,0,0,0.1);
    }
    .app-sidebar.open {
        left: 0; /* Slide in */
    }
    .app-main-content {
        margin-left: 0; /* Main content takes full width */
        transition: none; /* No margin transition needed for overlay */
    }
    .app-main-content.sidebar-collapsed { /* Not used for mobile overlay */
         margin-left: 0;
    }
    .sidebar-toggle-btn {
        display: flex; /* Show hamburger button AND make it a flex container */
    }
    .app-sidebar.collapsed .sidebar-text, /* Ensure text is visible when open on mobile */
    .app-sidebar.collapsed .app-logo-sidebar h5 .sidebar-text {
        opacity: 1;
        visibility: visible;
        width: auto;
    }
}

/* Global notification area if you have one */
#global-notifications {
    position: fixed;
    top: 1rem;
    right: 1rem;
    z-index: 1050; /* Above sidebar if necessary */
}

/* User Role Styles (moved from index.html) */
.user-role-display { font-size: 0.75rem; }
.user-role-gratis { color: #6c757d; }
.user-role-student { color: navy; font-weight: 500; }
.user-role-pro { 
    color: #e0a203; font-weight: 500;
}
.user-role-tester { 
    color: #6A0DAD; font-weight: 500; /* Deep Purple */
}

/* Dark Mode Styles */
html.dark-mode {
    --primary-color-dm: #008cff; /* A brighter blue for dark mode accents if needed */
    --secondary-color-dm: #0077B6; /* Can remain same or adjust */
    --accent-color-dm: #0096C7; /* Can remain same or adjust */
    
    --dm-bg-primary: #1a1a1a;       /* Main background for dark mode */
    --dm-bg-secondary: #2c2c2c;   /* Slightly lighter bg for cards, elements */
    --dm-bg-tertiary: #3a3a3a;    /* For borders or subtle backgrounds */
    
    --dm-text-primary: #e0e0e0;     /* Primary text color */
    --dm-text-secondary: #b0b0b0;   /* Secondary/muted text */
    --dm-border-color: #444444;
}

html.dark-mode body {
    background-color: var(--dm-bg-primary);
    color: var(--dm-text-primary);
}

html.dark-mode .app-sidebar {
    background-color: #012a4a; /* Slightly darker than original sidebar for contrast */
    border-right: 1px solid var(--dm-border-color);
}
html.dark-mode .app-sidebar .nav-link {
    color: #bac8d3; /* Lighter link color for dark sidebar */
}
html.dark-mode .app-sidebar .nav-link:hover,
html.dark-mode .app-sidebar .nav-link.active {
    background-color: #004a7c; /* Hover/active for dark sidebar */
}
 html.dark-mode .app-sidebar .app-logo-sidebar h5 {
    color: #f0f0f0;
}


html.dark-mode .card {
    background-color: var(--dm-bg-secondary);
    border-color: var(--dm-border-color);
    color: var(--dm-text-primary);
}
html.dark-mode .card h3, html.dark-mode .card h5, html.dark-mode .card p, html.dark-mode .card label {
     color: var(--dm-text-primary);
}
html.dark-mode .card .text-muted {
    color: var(--dm-text-secondary) !important;
}


html.dark-mode .form-control,
html.dark-mode .form-select {
    background-color: var(--dm-bg-tertiary);
    color: var(--dm-text-primary);
    border-color: var(--dm-border-color);
}
html.dark-mode .form-control::placeholder {
    color: var(--dm-text-secondary);
}
html.dark-mode .form-control:focus,
html.dark-mode .form-select:focus {
    background-color: var(--dm-bg-tertiary);
    color: var(--dm-text-primary);
    border-color: var(--primary-color); /* Use light mode primary for focus, or --primary-color-dm */
    box-shadow: 0 0 0 0.2rem rgba(var(--primary-color-rgb, 1, 79, 134), 0.25); /* Adjust focus shadow */
}

html.dark-mode .btn-primary {
    background-color: var(--primary-color); /* Or --primary-color-dm */
    border-color: var(--primary-color);   /* Or --primary-color-dm */
    color: white; /* Ensure text is visible */
}
html.dark-mode .btn-primary:hover {
    background-color: var(--secondary-color); /* Or --secondary-color-dm */
    border-color: var(--secondary-color);   /* Or --secondary-color-dm */
}
html.dark-mode .btn-outline-primary {
    color: var(--primary-color); /* Or --primary-color-dm */
    border-color: var(--primary-color); /* Or --primary-color-dm */
}
html.dark-mode .btn-outline-primary:hover {
    background-color: var(--primary-color); /* Or --primary-color-dm */
    color: white;
}
html.dark-mode .btn-link {
    color: var(--accent-color); /* Or --accent-color-dm */
}

/* Specific overrides for chat interface elements in dark mode (from index.html styles) */
html.dark-mode .nav-tabs .nav-link {
    color: var(--dm-text-secondary);
}
html.dark-mode .nav-tabs .nav-link.active {
    color: var(--dm-text-secondary); /* Changed from var(--primary-color) */
    background-color: var(--dm-bg-secondary);
    border-bottom-color: var(--primary-color); /* Or --primary-color-dm */
}
html.dark-mode .tab-content,
html.dark-mode .messages-container,
html.dark-mode .input-container {
    background-color: var(--dm-bg-secondary);
    border-color: var(--dm-border-color);
}
html.dark-mode .system-message {
    background-color: var(--dm-bg-tertiary);
    border-color: var(--dm-border-color);
}
html.dark-mode .user-message {
    background-color: #005A8C; /* Darker blue for user messages in dark mode */
    color: var(--dm-text-primary);
}
html.dark-mode .markdown-content h1, 
html.dark-mode .markdown-content h2, 
html.dark-mode .markdown-content h3 {
    color: var(--dm-text-primary);
}
html.dark-mode .markdown-content a {
    color: var(--accent-color); /* Or --accent-color-dm */
}
html.dark-mode .markdown-content code {
    background-color: var(--dm-bg-tertiary);
    color: var(--dm-text-secondary);
}
html.dark-mode .markdown-content pre {
    background-color: var(--dm-bg-primary);
}
html.dark-mode .alert-warning {
    background-color: #493101;
    color: #f8d7da;
    border-color: #594210;
}
html.dark-mode .alert-warning strong {
    color: #f0c060;
}