/* Custom styles for Date247.com */

/* Custom Properties */
:root {
    --primary-color: #64748b;
    --primary-hover: #475569;
    --secondary-color: #1e293b;
    --text-color: #1f2937;
    --light-bg: #f3f4f6;
    --transition: all 0.3s ease;
    --background-color: #f3f4f6;
    --card-background: #ffffff;
    --clock-border: 2px;
    --max-content-width: 100%;
}

/* Dark mode variables */
:root.dark {
    --primary-color: #94a3b8;
    --primary-hover: #cbd5e1;
    --secondary-color: #f1f5f9;
    --text-color: #f3f4f6;
    --light-bg: #1e293b;
    --background-color: #0f172a;
    --card-background: #1e293b;
    --clock-border: 2px;
    --dark-bg-primary: #111827;      /* Darker blue */
    --dark-bg-secondary: #1e293b;    /* Medium blue */
    --dark-bg-tertiary: #2d3748;     /* Lighter blue */
    --dark-text-primary: #f9fafb;    /* Brightest white */
    --dark-text-secondary: #e5e7eb;  /* Light gray */
    --dark-text-tertiary: #9ca3af;   /* Medium gray */
    --dark-accent: #3b82f6;          /* Blue accent */
}

/* Modern Font Import */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Space+Grotesk:wght@400;500;600;700&display=swap');

/* Global Styles */
body {
    scroll-behavior: smooth;
    font-family: 'Inter', sans-serif;
    background-color: var(--background-color);
    color: var(--text-color);
    transition: background-color 0.3s ease, color 0.3s ease;
    width: 100%;
    margin: 0;
    padding: 0;
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Space Grotesk', sans-serif;
    letter-spacing: -0.02em;
}

.max-w-7xl {
    max-width: var(--max-content-width) !important;
    padding-left: 1rem !important;
    padding-right: 1rem !important;
}

@media (min-width: 640px) {
    .max-w-7xl {
        padding-left: 1.5rem !important;
        padding-right: 1.5rem !important;
    }
}

@media (min-width: 1024px) {
    .max-w-7xl {
        padding-left: 2rem !important;
        padding-right: 2rem !important;
    }
}

/* Header Navigation Styles */
header {
    height: 70px;
}

.header-nav-link {
    position: relative;
    padding: 0.5rem 1rem;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.9);
    transition: all 0.2s ease;
    border-radius: 0.375rem;
    display: flex;
    align-items: center;
}

.header-nav-link:hover {
    background-color: rgba(255, 255, 255, 0.1);
    color: white;
}

.header-nav-link i {
    opacity: 0.8;
    transition: opacity 0.2s ease;
}

.header-nav-link:hover i {
    opacity: 1;
}

/* Center navigation container */
header nav {
    display: flex;
    justify-content: center;
    flex: 1;
    padding-bottom: 0.2rem !important;
}

/* Mobile navigation adjustments */
@media (max-width: 768px) {
    .header-nav-link {
        display: none;
    }
    
    header .flex-1 {
        justify-content: space-between;
    }
    
    /* Show hamburger on right for mobile */
    .md\:hidden {
        display: block;
        margin-left: auto;
    }
    
    /* Hide desktop hamburger */
    .hidden.md\:flex {
        display: none;
    }
}

/* Logo styling */
.logo-text {
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: -0.02em;
}

/* Sidebar improvements */
#sidebar {
    height: 100vh !important;
    width: 320px !important;
    background: linear-gradient(135deg, #1f2937, #0f172a) !important;
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
    box-shadow: 2px 0 12px rgba(0,0,0,0.3);
    transition: all 0.3s ease-out !important;
    position: fixed;
    left: 0;
    top: 0;
    z-index: 50;
    overflow-y: auto;
    overflow-x: hidden;
}

#sidebar .hamburger-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    cursor: pointer;
    position: absolute;
    top: 1.5rem;
    left: 1.5rem;
    color: white;
    width: 40px;
    height: 40px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.1);
    transition: background-color 0.2s ease;
}

#sidebar .hamburger-icon:hover {
    background: rgba(255, 255, 255, 0.2);
}

#sidebar nav a {
    display: flex;
    align-items: center;
    padding: 0.75rem 1rem;
    margin: 0.25rem 0;
    border-radius: 0.5rem;
    transition: all 0.2s ease;
}

#sidebar nav a:hover {
    background-color: rgba(255, 255, 255, 0.1);
    transform: translateX(5px);
}

#sidebar nav a i {
    width: 1.5rem;
    text-align: center;
    margin-right: 0.75rem;
    font-size: 1.125rem;
    opacity: 0.8;
}

#sidebar nav a:hover i {
    opacity: 1;
}

/* Card Hover Effects */
.tool-card {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    background-color: var(--card-background);
}

.tool-card:hover {
    transform: translateY(-5px);
}

/* World Clock Cards */
.world-clock-card {
    position: relative;
    overflow: hidden;
    transition: all 0.3s ease;
    background-color: var(--card-background);
}

.world-clock-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--primary-color));
    animation: clockBorder 2s linear infinite;
}

@keyframes clockBorder {
    0% { left: -100%; }
    50% { left: 100%; }
    100% { left: 100%; }
}

.world-clock-card:hover {
    transform: scale(1.02);
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
}

/* Custom Button Styles */
.custom-button {
    @apply bg-indigo-600 text-white px-6 py-2 rounded-lg font-semibold hover:bg-indigo-700 transition-colors;
}

/* History Timeline */
.history-item {
    position: relative;
    padding-left: 2rem;
    margin-bottom: 1.5rem;
    @apply border-l-4 border-indigo-500 pl-4 py-2;
}

.history-item::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 2px;
    height: 100%;
    background-color: var(--primary-color);
}

.history-item::after {
    content: '';
    position: absolute;
    left: -4px;
    top: 0;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: var(--primary-color);
}

/* Responsive Improvements */
@media (max-width: 768px) {
    .world-clock-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 640px) {
    .world-clock-grid {
        grid-template-columns: 1fr;
    }
}

/* Loading Animations */
.loading-spinner {
    width: 20px;
    height: 20px;
    border: 2px solid #f3f3f3;
    border-top: 2px solid var(--primary-color);
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

/* Feature Cards */
.feature-card {
    transition: transform 0.3s ease;
    background-color: var(--card-background);
}

.feature-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
}

/* Footer Enhancements */
.footer-link {
    @apply text-gray-400 hover:text-white transition-colors;
}

/* Accessibility Improvements */
.skip-link {
    position: absolute;
    top: -40px;
    left: 0;
    background: var(--primary-color);
    color: white;
    padding: 8px;
    z-index: 100;
    transition: var(--transition);
    @apply sr-only focus:not-sr-only focus:absolute focus:top-0 focus:left-0 focus:z-50 focus:bg-white focus:text-indigo-600 focus:px-4 focus:py-2;
}

.skip-link:focus {
    top: 0;
}

/* Analog Clock Styles */
#analog-clock {
    position: relative;
    border: var(--clock-border) solid var(--primary-color);
    backdrop-filter: blur(10px);
}

/* Fix for the main layout container */
body, html {
    width: 100%;
    margin: 0;
    padding: 0;
    overflow-x: hidden;
}

/* Fix the flex-wrap and layout issues */
.flex-wrap {
    width: 100%;
    margin: 0;
    padding: 0;
}

/* Main content width fixes */
main#main-content {
    width: 100%;
    max-width: 100%;
    flex-basis: 100%;
    overflow-x: hidden;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* Content width fixes for lg screens */
@media (min-width: 1024px) {
    main#main-content {
        width: 100%;
        flex: 0 0 100%;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    
    /* Sidebar and main content column widths */
    .lg\:w-4\/5 {
        width: 80% !important;
    }
    .lg\:w-1\/5 {
        width: 20% !important;
    }
}

/* Header and footer full width fixes */
header, footer {
    width: 100% !important;
    max-width: 100% !important;
}

footer > div {
    width: 100% !important;
    max-width: 100% !important;
}

/* Section width fixes */
section {
    width: 100% !important;
    max-width: 100% !important;
}

/* Make sure all content divs are full width */
section > div {
    width: 100% !important;
    box-sizing: border-box;
}

/* Make sure the overall flex container doesn't overflow */
.pt-20 {
    width: 100%;
    overflow-x: hidden;
}

/* Dark Mode Styles */
.dark #analog-clock {
    background: rgba(30, 41, 59, 0.95) !important;
    border-color: #4b5563 !important;
    box-shadow: 
        0 0 0 var(--clock-border) rgba(200, 216, 239, 0.1),
        0 4px 20px rgba(0, 0, 0, 0.3),
        inset 0 0 20px rgba(255, 255, 255, 0.02);
}

.dark #analog-clock::before {
    background: radial-gradient(circle at center, #1e293b 85%, #0f172a 100%) !important;
    box-shadow: inset 0 0 20px rgba(255, 255, 255, 0.05);
}

.dark #hour-hand,
.dark #minute-hand {
    background-color: #cbd5e1 !important;
}

.dark #second-hand {
    background-color: #60a5fa !important;
}

.dark .clock-center {
    background-color: #60a5fa !important;
}

/* Dark theme specific styles */
html.dark,
html.dark body {
    color-scheme: dark;
}

/* Improved Dark Mode backgrounds for eye comfort */
.dark body {
    background-color: var(--dark-bg-primary) !important;
    color: var(--dark-text-primary) !important;
}

.dark .bg-gray-800 {
    background-color: var(--dark-bg-primary) !important;
}

.dark .bg-gray-900 {
    background-color: var(--dark-bg-secondary) !important;
}

.dark .bg-gray-700 {
    background-color: var(--dark-bg-tertiary) !important;
}

.dark .py-12.bg-gradient-to-br {
    background: linear-gradient(to bottom right, var(--dark-bg-secondary), var(--dark-bg-primary)) !important;
}

/* Moon and sun icons for theme toggler */
#theme-toggle i {
    transform: rotate(0deg);
    transition: transform 0.5s ease;
}

#theme-toggle:hover i {
    transform: rotate(45deg);
}

.dark #theme-toggle i {
    content: '\f185'; /* sun icon */
}

/* Countdown display */
.countdown-display {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 1rem;
}

.countdown-section {
    background-color: var(--card-background);
    padding: 0.75rem 1rem;
    border-radius: 0.5rem;
    min-width: 80px;
    text-align: center;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease;
}

.countdown-section:hover {
    transform: translateY(-2px);
}

.countdown-amount {
    font-size: 1.75rem;
    font-weight: bold;
    color: #4f46e5;
}

.dark .countdown-amount {
    color: #818cf8;
}

.countdown-label {
    font-size: 0.875rem;
    opacity: 0.8;
}

.countdown-event {
    text-align: center;
    margin-top: 1rem;
    font-weight: 500;
}

/* Tooltip styles */
.tooltip {
    position: absolute;
    background: var(--primary-color);
    color: white;
    padding: 0.5rem;
    border-radius: 0.25rem;
    font-size: 0.75rem;
    z-index: 100;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

.tooltip.visible {
    opacity: 1;
}

/* Full width content styles - IMPORTANT FIXES */
html, html {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
}

/* Reset any grid layouts that might be causing issues */
.grid {
    width: 100%;
}

/* Ensure flexbox layouts expand properly */
.flex {
    display: flex;
    width: 100%;
}

.flex-wrap {
    width: 100%;
    margin: 0;
    padding: 0;
}

/* Remove the automatic sidebar margin */
.md\:ml-64 {
    margin-left: 0 !important;
}

/* Apply specific fix for sections */
section {
    padding: 3rem 0;
    width: 100%;
    max-width: 100%;
    margin: 0;
}

/* Force content area to take full width */
.min-h-screen {
    width: 100% !important;
    max-width: 100% !important;
}

/* Fix background colors */
.py-12.bg-white, .dark .py-12.dark\:bg-gray-900 {
    background-color: white;
}

.dark .py-12.dark\:bg-gray-900 {
    background-color: var(--dark-bg-primary) !important;
}

/* Main tools grid background fix */
.bg-gray-900 {
    background-color: #f3f4f6;
}

.dark .bg-gray-900 {
    background-color: var(--dark-bg-primary) !important;
}

/* Horoscope section background fix */
.py-12.bg-white {
    background-color: #fff;
}

/* Improved event cards */
.event-card {
    transition: all 0.2s;
}

.event-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}

/* Ensure tool blocks are always 2 per row on medium screens */
.interactive-tools-grid {
    display: grid;
    grid-template-columns: 1fr;
}

@media (min-width: 768px) {
    .interactive-tools-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Footer always dark and full width */
footer {
    background-color: #111827 !important;
    color: white !important;
    padding: 4rem 0 2rem 0;
}

.footer-container {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 2rem;
    margin-bottom: 3rem;
    align-items: start;
}

.footer-logo-section {
    grid-column: 1;
}

.footer-description {
    margin: 1.5rem 0;
    color: #9CA3AF;
    font-size: 1.1rem;
    line-height: 1.6;
}

.footer-social-icons {
    display: flex;
    gap: 1rem;
    margin-top: 1.5rem;
}

.footer-newsletter {
    grid-column: 3;
    justify-self: end;
    max-width: 400px;
}

.footer-links-container {
    display: flex;
    justify-content: space-between;
    gap: 2rem;
    padding: 2rem 0;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.footer-links-section {
    flex: 1;
}

.footer-links-section h4 {
    color: white;
    font-size: 1.2rem;
    margin-bottom: 1.5rem;
}

.footer-links-section ul {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

/* Top Navigation */
header .nav-items {
    display: flex;
    align-items: center;
    margin-left: auto;
}

#theme-toggle {
    margin-left: auto !important;
}

.header-nav-link {
    white-space: nowrap !important;
    padding: 0.5rem 1rem;
}

/* Sidebar Toggle Animation */
.sidebar-toggle {
    cursor: pointer;
    transition: transform 0.3s ease;
}

.sidebar-toggle.active {
    transform: rotate(180deg);
}

/* Responsive Adjustments */
@media (max-width: 1024px) {
    .footer-container {
        grid-template-columns: 1fr;
        gap: 3rem;
    }
    
    .footer-newsletter {
        grid-column: 1;
        justify-self: start;
        max-width: 100%;
    }
    
    .footer-links-container {
        flex-wrap: wrap;
    }
    
    .footer-links-section {
        flex: 0 0 calc(50% - 1rem);
    }
}

@media (max-width: 768px) {
    .footer-links-section {
        flex: 0 0 100%;
    }
}

/* Quote block styling */
.quote-block {
    background: linear-gradient(135deg, #6366f1, #4f46e5);
    transition: transform 0.3s ease;
}

.quote-block:hover {
    transform: translateY(-4px);
}

/* Fix dark mode */
.dark {
    --text-color: var(--dark-text-primary);
    --bg-color: var(--dark-bg-primary);
    --bg-card: var(--dark-bg-secondary);
    --bg-input: var(--dark-bg-tertiary);
    --border-color: #4b5563;
}

.dark body,
.dark main,
.dark section,
.dark div.bg-white,
.dark .bg-white,
.dark .bg-gray-50,
.dark .bg-gradient-to-br.from-blue-50,
.dark .bg-gray-50 {
    background-color: var(--bg-color) !important;
    color: var(--text-color) !important;
}

.dark .py-12.bg-white, 
.dark .py-12.bg-gray-50,
.dark .py-12.bg-gradient-to-br,
.dark section.bg-white,
.dark section.bg-gray-50 {
    background-color: var(--bg-color) !important;
}

.dark input,
.dark select,
.dark textarea {
    background-color: var(--bg-input) !important;
    color: var(--text-color) !important;
    border-color: var(--border-color) !important;
}

/* Fix all historic event blocks in dark mode */
.dark .bg-gray-50 {
    background-color: var(--bg-card) !important;
}

/* Fix Quick Tools blocks with missing background */
.bg-gradient-to-br.from-teal-500.to-green-600 {
    background-image: linear-gradient(to bottom right, #0d9488, #059669) !important;
}

/* Additional dark mode fixes */
html.dark {
    color-scheme: dark;
}

.dark body {
    background-color: var(--dark-bg-primary) !important;
    color: var(--dark-text-primary) !important;
}

.dark .bg-white, 
.dark .bg-gray-50, 
.dark .bg-gray-100 {
    background-color: var(--dark-bg-secondary) !important;
    color: var(--dark-text-primary) !important;
}

.dark section.py-12,
.dark .py-12.bg-white,
.dark .py-12.bg-gray-50 {
    background-color: var(--dark-bg-primary) !important;
}

html:not(.dark) body {
    background-color: #f8fafc;
    color: #111827;
}

/* Make calendar blocks smaller */
.mini-calendar .day {
    aspect-ratio: 1/0.6 !important;
    padding: 0.1rem !important;
    font-size: 0.75rem !important;
}

.mini-calendar-weekdays .day-name {
    font-size: 0.7rem !important;
    padding: 0.1rem !important;
}

/* Other calendar styles */
.mini-calendar-days {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 1px;
}

.mini-calendar .day {
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

.mini-calendar .day:not(.empty):hover {
    transform: scale(1.1);
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

.event-day {
    position: relative;
}

.event-day::after {
    content: '';
    position: absolute;
    bottom: 2px;
    left: 50%;
    transform: translateX(-50%);
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background-color: rgba(79, 70, 229, 0.8);
}

/* Calendar style fix */
.mini-calendar-days:empty:before {
    content: "Loading...";
    text-align: center;
    grid-column: span 7;
    padding: 1rem;
    color: #6b7280;
}

/* Ensure the right sidebar doesn't overlap */
@media (min-width: 1024px) {
    main#main-content {
        width: 80% !important;
    }
    
    aside.w-full.lg\:w-1\/5 {
        width: 20% !important;
    }
}

/* Additional fixes to ensure consistent section spacing and responsiveness */
section {
    padding: 3rem 0;
    width: 100%;
    max-width: 100%;
    margin: 0;
}

.flex-wrap {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
}

/* Fix the sidebar on mobile */
@media (max-width: 1023px) {
    aside.w-full.lg\:w-1\/5 {
        margin-top: 0;
        padding: 2rem 1rem;
        background-color: var(--light-bg);
    }
}

/* Ensure consistent content spacing */
.py-12 {
    padding-top: 3rem !important;
    padding-bottom: 3rem !important;
}

/* Make sure all cards have consistent styling */
.bg-white, .dark .dark\:bg-gray-700, .dark .dark\:bg-gray-800 {
    transition: background-color 0.3s ease;
}

/* Ensure sidebar content has proper spacing */
aside .bg-white, aside .dark\:bg-gray-700 {
    margin-bottom: 1.5rem;
}

/* Fix for navbar on mobile */
@media (max-width: 768px) {
    header .flex-1 {
        justify-content: center !important;
    }
    
    header .w-1\/4 {
        width: auto;
    }
}

/* Ensure container consistency */
.max-w-7xl {
    width: 100%;
    max-width: var(--max-content-width);
    margin-left: auto;
    margin-right: auto;
}

/* Fix for nested flex layouts */
.flex-wrap .flex-wrap {
    margin-left: 0;
    margin-right: 0;
}

/* Ensure card grids are properly responsive */
.grid {
    display: grid;
    width: 100%;
}

/* Quick Tools positioning */
.quick-tools-section {
    order: 2;
    margin-top: 2rem;
}

.calendar-section {
    order: 1;
}

/* Ensure proper section ordering */
.tools-and-calendar-container {
    display: flex;
    flex-direction: column;
    width: 100%;
}

/* Fix for the main layout container */
body, html {
    width: 100%;
    margin: 0;
    padding: 0;
    overflow-x: hidden;
}

/* Fix the flex-wrap and layout issues */
.flex-wrap {
    width: 100%;
    margin: 0;
    padding: 0;
}

/* Main content width fixes */
main#main-content {
    width: 100%;
    max-width: 100%;
    flex-basis: 100%;
    overflow-x: hidden;
}

/* Content width fixes for lg screens */
@media (min-width: 1024px) {
    main#main-content {
        width: 100%;
        flex: 0 0 100%;
    }
    .lg\:w-4\/5 {
        width: 80% !important;
    }
    .lg\:w-1\/5 {
        width: 20% !important;
    }
}

/* Header and footer full width fixes */
header, footer {
    width: 100% !important;
    max-width: 100% !important;
}

footer > div {
    width: 100% !important;
    max-width: 100% !important;
}

/* Section width fixes */
section {
    width: 100%;
}

/* Make sure the overall flex container doesn't overflow */
.pt-20 {
    width: 100%;
    overflow-x: hidden;
}

/* Ensure the inner content containers take full width */
.w-full {
    width: 100% !important;
}

/* Fix sidebar layout */
aside.w-full.lg\:w-1\/5 {
    max-width: 100%;
}

@media (min-width: 1024px) {
    aside.w-full.lg\:w-1\/5 {
        max-width: 20%;
    }
}

/* Ensure the sidebar stays inside the main container on all screens */
.flex-wrap > aside {
    box-sizing: border-box;
}

/* Fix main content area to take correct width */
.w-full.lg\:w-4\/5 {
    box-sizing: border-box;
}

/* Ensure footer doesn't create extra spaces */
footer .w-full {
    box-sizing: border-box;
    max-width: 100vw;
}

/* Remove any extra padding or margins that might cause overflow */
section > div {
    box-sizing: border-box;
}

/* Force all immediate children of body to be full width */
body > * {
    width: 100%;
    max-width: 100vw;
    box-sizing: border-box;
}

/* Fix margin collapse issues */
body {
    display: flex;
    flex-direction: column;
}

/* Fix Firefox flexbox issue */
@-moz-document url-prefix() {
    .flex-wrap {
        width: 100%;
        max-width: 100%;
    }
}

/* Fix for the flex layout with sidebar next to productivity tools */
.flex.flex-wrap {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    margin: 0;
    padding: 0;
}

/* Fix for the right sidebar */
aside.w-full.lg\:w-1\/5 {
    margin-top: 0; /* Remove top margin to align with section */
    padding-top: 3rem; /* Match py-12 padding of sections */
    box-sizing: border-box;
    background-color: #f9fafb; /* Lighter gray background */
}

.dark aside.w-full.lg\:w-1\/5 {
    background-color: #1f2937; /* Darker background in dark mode */
}

/* Make the content containers take the right width on large screens */
@media (min-width: 1024px) {
    .lg\:w-4\/5 {
        width: 80% !important;
        max-width: 80% !important;
    }
    
    .lg\:w-1\/5 {
        width: 20% !important;
        max-width: 20% !important;
    }
}

/* Fix for main content and sidebar container */
.flex.flex-wrap > div, .flex.flex-wrap > aside {
    box-sizing: border-box;
}

/* Make the sidebar content blocks consistent */
aside .bg-white, aside .dark\:bg-gray-700 {
    margin-bottom: 1rem;
}

/* Fix for the Quote of the Day Block spacing */
aside .mt-6 {
    margin-top: 1rem;
}

/* Ensure the sidebar has proper padding at the bottom */
aside.w-full.lg\:w-1\/5 {
    padding-bottom: 3rem;
}

/* Fixed Header Spacing */
header {
    height: 80px;
}

.header-nav-link {
    font-weight: 500;
    padding: 0.5rem 0.75rem;
    border-radius: 0.375rem;
    transition: background-color 0.2s ease;
    white-space: nowrap !important;
}

.header-nav-link:hover {
    background-color: rgba(255, 255, 255, 0.1);
}

/* Sidebar Menu Styling - Improved */
#sidebar {
    box-shadow: 4px 0 15px rgba(0, 0, 0, 0.3);
    z-index: 50;
    height: 100vh;
    width: 280px;
    top: 0 !important;
    transition: transform 0.2s ease-out !important;
    background: linear-gradient(135deg, #1f2937, #0f172a) !important;
    overflow-y: auto;
    overflow-x: hidden;
}

#sidebar-overlay {
    background-color: rgba(0, 0, 0, 0.25);
    transition: opacity 0.2s ease-out !important;
    z-index: 40;
    pointer-events: auto;
}

/* Replace animations with transitions for smoother sidebar opening */
.translate-x-0 {
    animation: none !important;
    transform: translateX(0) !important;
    transition: transform 0.2s ease-out !important;
}

.-translate-x-full {
    animation: none !important;
    transform: translateX(-100%) !important;
    transition: transform 0.2s ease-out !important;
}

/* Improve spacing after fixed header */
.flex.flex-wrap.pt-28 {
    padding-top: 2rem !important;
}

@media (min-width: 768px) {
    .flex.flex-wrap.pt-28 {
        padding-top: 2rem !important;
    }
}

/* Enhanced sidebar styling */
#sidebar .p-5 {
    padding: 1.5rem;
}

#sidebar h3 {
    font-size: 1.25rem;
    font-weight: 600;
    margin-bottom: 1rem;
    color: #F9FAFB;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    padding-bottom: 0.75rem;
    letter-spacing: -0.02em;
}

#sidebar nav a {
    transition: all 0.2s ease;
    border-radius: 0.5rem;
    display: flex;
    align-items: center;
    padding: 0.75rem 1rem;
    margin-bottom: 0.25rem;
    font-weight: 500;
}

#sidebar nav a:hover {
    background-color: rgba(255, 255, 255, 0.1);
    transform: translateX(5px);
}

#sidebar nav a i {
    margin-right: 0.75rem;
    width: 1.25rem;
    text-align: center;
    font-size: 1.125rem;
    color: rgba(255, 255, 255, 0.7);
}

/* Sidebar banner base styling */
.sidebar-banner {
    background: linear-gradient(45deg, #4338ca, #6366f1);
    border-radius: 0.5rem;
    padding: 1rem;
    margin: 0 0 1.5rem 0; /* Move top banner margin to bottom only */
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.1);
    display: none; /* Hide the top banner */
}

.sidebar-banner::before {
    content: "";
    position: absolute;
    width: 150px;
    height: 150px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    top: -75px;
    right: -75px;
    z-index: 0;
}

.sidebar-banner::after {
    content: "";
    position: absolute;
    width: 100px;
    height: 100px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    bottom: -50px;
    left: -50px;
    z-index: 0;
}

.sidebar-banner * {
    position: relative;
    z-index: 1;
}

.sidebar-banner a {
    background: white;
    color: #4f46e5;
    font-weight: 500;
    padding: 0.5rem 1rem;
    border-radius: 9999px;
    display: inline-block;
    transition: all 0.2s;
    text-align: center;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.sidebar-banner a:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

/* Sign up banner specific styling - make this one visible and moved down */
.signup-banner {
    background: linear-gradient(135deg, #3b82f6, #1d4ed8);
    margin-top: 1rem;
    margin-bottom: 1.5rem;
    border-left: 4px solid #60a5fa;
    display: block !important; /* Ensure this one is visible */
    order: 5; /* Move banner below navigation sections */
}

/* Sidebar footer section */
.sidebar-footer {
    margin-top: 2rem;
    padding-top: 1rem;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    font-size: 0.875rem;
}

.sidebar-footer p {
    color: rgba(255, 255, 255, 0.5);
    margin-bottom: 0.5rem;
}

/* Sidebar badges */
.sidebar-badge {
    display: inline-block;
    font-size: 0.65rem;
    padding: 0.25rem 0.5rem;
    border-radius: 9999px;
    background-color: rgba(255, 255, 255, 0.1);
    color: white;
    margin-left: auto;
}

/* Comprehensive dark mode text fixes for better contrast */
.dark .text-gray-400,
.dark .dark\:text-gray-400 {
    color: #E5E7EB !important; /* Lighter gray - more readable */
}

.dark .text-gray-500,
.dark .dark\:text-gray-500,
.dark .text-gray-600,
.dark .dark\:text-gray-600 {
    color: #F3F4F6 !important; /* Very light gray - excellent readability */
}

.dark .text-gray-300,
.dark .dark\:text-gray-300 {
    color: #F9FAFB !important; /* Almost white - maximum contrast */
}

.dark p,
.dark span,
.dark label,
.dark div:not(.bg-indigo-600):not(.bg-gradient-to-r) {
    color: #F3F4F6 !important; /* Default text color in dark mode */
}

/* Ensure headers are always bright white in dark mode */
.dark h1,
.dark h2,
.dark h3,
.dark h4,
.dark h5,
.dark h6,
.dark .font-bold,
.dark .font-semibold {
    color: #FFFFFF !important;
}

/* Exception for specific UI elements that need their original colors */
.dark .bg-indigo-600 *,
.dark .bg-gradient-to-r *,
.dark .text-indigo-400,
.dark .dark\:text-indigo-400,
.dark .text-red-500,
.dark .dark\:text-red-500,
.dark .text-green-500,
.dark .dark\:text-green-500,
.dark .text-blue-500,
.dark .dark\:text-blue-500,
.dark .text-yellow-500,
.dark .dark\:text-yellow-500 {
    color: inherit !important; /* Keep original colors for accent elements */
}

/* Improve card content contrast in dark mode */
.dark .bg-white .text-gray-800,
.dark .dark\:bg-gray-800 .text-gray-800,
.dark .bg-gray-700 .text-gray-800,
.dark .dark\:bg-gray-700 .text-gray-800 {
    color: #FFFFFF !important;
}

.dark .bg-white .text-gray-600,
.dark .dark\:bg-gray-800 .text-gray-600,
.dark .bg-gray-700 .text-gray-600,
.dark .dark\:bg-gray-700 .text-gray-600 {
    color: #F3F4F6 !important;
}

.dark .bg-white .text-gray-500,
.dark .dark\:bg-gray-800 .text-gray-500,
.dark .bg-gray-700 .text-gray-500,
.dark .dark\:bg-gray-700 .text-gray-500 {
    color: #E5E7EB !important;
}

/* Fix specifically for form labels and small text */
.dark label,
.dark .text-sm,
.dark .text-xs {
    color: #E5E7EB !important;
}

/* Ensure proper sidebar animation */
@keyframes sidebar-in {
    from { transform: translateX(-100%); }
    to { transform: translateX(0); }
}

@keyframes sidebar-out {
    from { transform: translateX(0); }
    to { transform: translateX(-100%); }
}

/* Fix the transition for the sidebar opening/closing */
.translate-x-0 {
    animation: sidebar-in 0.3s ease-in-out forwards;
}

.-translate-x-full {
    animation: sidebar-out 0.3s ease-in-out forwards;
}

/* Fix for main content layout when sidebar is open */
body.sidebar-open main {
    margin-left: 16rem;
    transition: margin-left 0.3s ease-in-out;
}

@media (max-width: 768px) {
    body.sidebar-open main {
        margin-left: 0;
    }
}

/* Ensure all card content has proper contrast in dark mode */
.dark .bg-white .text-gray-800,
.dark .dark\:bg-gray-800 .text-gray-800 {
    color: #F9FAFB !important;
}

.dark .bg-white .text-gray-600,
.dark .dark\:bg-gray-800 .text-gray-600 {
    color: #E5E7EB !important;
}

.dark .bg-white .text-gray-500,
.dark .dark\:bg-gray-800 .text-gray-500 {
    color: #D1D5DB !important;
}

/* Enhancement for the dark mode toggle */
#theme-toggle:hover {
    background-color: rgba(255, 255, 255, 0.1);
    transform: rotate(15deg);
}

/* Adjust sidebar padding and spacing */
#sidebar .p-5 {
    padding: 1.5rem;
}

#sidebar h3 {
    font-size: 1.125rem;
    margin-bottom: 0.75rem;
    color: #F9FAFB;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    padding-bottom: 0.5rem;
}

#sidebar nav a {
    transition: all 0.2s ease;
    border-radius: 0.375rem;
}

#sidebar nav a:hover {
    background-color: rgba(255, 255, 255, 0.1);
    transform: translateX(5px);
}

/* Fix for right sidebar in main content */
@media (min-width: 1024px) {
    .lg\:w-4\/5 {
        width: 80% !important;
    }
    
    .lg\:w-1\/5 {
        width: 20% !important;
    }
}

/* Improve spacing after fixed header */
@media (min-width: 768px) {
    .flex.flex-wrap.pt-28 {
        padding-top: 8rem !important;
    }
}

/* Ensure all form elements are properly styled in dark mode */
.dark select,
.dark input,
.dark textarea {
    background-color: #1F2937 !important;
    color: #F9FAFB !important;
    border-color: #4B5563 !important;
}

/* Dark mode specific background colors */
.dark .bg-gray-700 {
    background-color: #374151 !important; /* Slightly lighter for better contrast */
}

.dark .bg-gray-800 {
    background-color: #1F2937 !important; /* Main dark background */
}

.dark .bg-gray-900 {
    background-color: #111827 !important; /* Darkest background */
}

/* Sign up banner specific styling */
.signup-banner {
    background: linear-gradient(135deg, #3b82f6, #1d4ed8);
    margin-top: 0;
    border-left: 4px solid #60a5fa;
}

.signup-banner i {
    color: #93c5fd;
}

.signup-banner a {
    background: rgba(255, 255, 255, 0.9);
    font-weight: 600;
    letter-spacing: 0.02em;
}

.signup-banner::before {
    background: rgba(255, 255, 255, 0.15);
}

.signup-banner::after {
    width: 120px;
    height: 120px;
    background: rgba(255, 255, 255, 0.1);
}

/* ===================================================================
   CONSOLIDATED CUSTOM OVERRIDES (Footer, Nav, Sidebar) - Start
=================================================================== */

/* Footer Modern Layout */
footer .footer-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
}
footer .footer-newsletter {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    order: 3;
}
footer .footer-newsletter h3,
footer .footer-newsletter p,
footer .footer-newsletter form {
    margin: 0.2rem 0;
}
footer .footer-links {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    order: 2;
}
footer .footer-logo,
footer .footer-social {
    order: 1;
}
footer {
    background-color: #111827 !important;
    color: white !important;
}

/* Top Navigation Overrides */
header nav {
    padding-bottom: 0.2rem !important;
}
.header-nav-link {
    white-space: nowrap !important;
}
header .nav-items {
    display: flex;
    align-items: center;
}
#theme-toggle {
    margin-left: auto !important;
}

/* Sidebar Enhancements */
#sidebar {
    height: 100vh !important;
    width: 320px !important;
    background: linear-gradient(135deg, #1f2937, #0f172a) !important;
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
    box-shadow: 2px 0 12px rgba(0,0,0,0.3);
    transition: width 0.3s ease;
}
#sidebar .hamburger-icon {
    display: block;
    font-size: 1.5rem;
    cursor: pointer;
    position: absolute;
    top: 1rem;
    left: 1rem;
    color: white;
}

/* ===================================================================
   CONSOLIDATED CUSTOM OVERRIDES (Footer, Nav, Sidebar) - End
=================================================================== */