/* static/css/style.css */

/* --- Base and Variables --- */
:root {
    /* Light Mode "Periwinkle" Theme */
    --bg-color-light: #EBF0F8;
    --element-color-light: #F0F4FA;
    --text-color-light: #5E6983;
    --shadow-light-light: #FFFFFF;
    --shadow-dark-light: #D1D9E6;
    --accent-color-light: #8A9BFF;
    --accent-hover-light: #7485E1;
    --dropdown-bg-light: #eef2f9;
    --dropdown-hover-bg-light: #e1e7f3;
    --icon-fill-light: #5E6983;

    /* Aurora Background Colors (Light Mode) */
    --aurora-color-1: rgba(138, 155, 255, 0.3);
    --aurora-color-2: rgba(200, 210, 240, 0.3);
    --aurora-color-3: rgba(230, 220, 255, 0.3);

    /* Assign light mode vars by default */
    --bg-color: var(--bg-color-light);
    --element-color: var(--element-color-light);
    --text-color: var(--text-color-light);
    --shadow-light: var(--shadow-light-light);
    --shadow-dark: var(--shadow-dark-light);
    --accent-color: var(--accent-color-light);
    --accent-hover-color: var(--accent-hover-light);
    --dropdown-bg: var(--dropdown-bg-light);
    --dropdown-hover-bg: var(--dropdown-hover-bg-light);
    --icon-fill: var(--icon-fill-light);
}

body.dark-mode {
    /* Dark Mode "Midnight" Theme */
    --bg-color-dark: #22283A;
    --element-color-dark: #272E42;
    --text-color-dark: #D3D8E8;
    --shadow-light-dark: #323A53;
    --shadow-dark-dark: #161A28;
    --accent-color-dark: #8A9BFF;
    --accent-hover-dark: #A8B3FF;
    --dropdown-bg-dark: #293044;
    --dropdown-hover-bg-dark: #353f58;
    --icon-fill-dark: #D3D8E8;

    /* Aurora Background Colors (Dark Mode) */
    --aurora-color-1: rgba(138, 155, 255, 0.15);
    --aurora-color-2: rgba(80, 60, 180, 0.15);
    --aurora-color-3: rgba(60, 100, 180, 0.15);

    /* Assign dark mode vars */
    --bg-color: var(--bg-color-dark);
    --element-color: var(--element-color-dark);
    --text-color: var(--text-color-dark);
    --shadow-light: var(--shadow-light-dark);
    --shadow-dark: var(--shadow-dark-dark);
    --accent-color: var(--accent-color-dark);
    --accent-hover-color: var(--accent-hover-dark);
    --dropdown-bg: var(--dropdown-bg-dark);
    --dropdown-hover-bg: var(--dropdown-hover-bg-dark);
    --icon-fill: var(--icon-fill-dark);
}

/* --- Animated Aurora Background --- */
@keyframes moveAurora {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

#animated-bg {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: -1;
    background: var(--bg-color) linear-gradient(
        45deg,
        var(--aurora-color-1) 0%,
        var(--aurora-color-2) 50%,
        var(--aurora-color-3) 100%
    );
    background-size: 400% 400%;
    animation: moveAurora 40s ease-in-out infinite;
    transition: background 0.3s ease;
}

/* --- General Body & Text Styles --- */
body {
    background-color: transparent; 
    color: var(--text-color);
    transition: color 0.3s ease;
    min-height: 100vh;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    padding-top: 80px;
}

h1, h2, h3, h4, h5, h6 { color: var(--text-color); }
p { color: var(--text-color); line-height: 1.6; }
.lead { color: var(--text-color); opacity: 0.9; }
a { color: var(--accent-color); text-decoration: none; transition: color 0.2s ease; }
a:hover { color: var(--accent-hover-color); text-decoration: underline; }
.neumorphic-link { color: var(--text-color); font-weight: 500; text-decoration: none; transition: color 0.2s ease; }
.neumorphic-link:hover { color: var(--accent-color); text-decoration: none; }
.neumorphic-hr { border: none; height: 2px; background: none; box-shadow: inset 1px 1px 2px var(--shadow-dark), inset -1px -1px 2px var(--shadow-light); margin-top: 1.5rem; margin-bottom: 1.5rem; }

/* --- UPDATED: Neumorphic Base Styles --- */
.neumorphic-element {
    background-color: var(--element-color);
    border-radius: 15px;
    transition: all 0.3s ease;
    color: var(--text-color);
    border: 1px solid rgba(0, 0, 0, 0.02);
    
    /* --- THE FIX: The outer light shadow is now REMOVED --- */
    box-shadow: 
      /* Outer dark shadow only */
      8px 8px 16px var(--shadow-dark),
      /* Inner shadows (for crisp edge definition) */
      inset 2px 2px 4px rgba(0, 0, 0, 0.05),
      inset -2px -2px 4px rgba(255, 255, 255, 0.8);
}
body.dark-mode .neumorphic-element {
    /* Tweak inner shadows for dark mode */
     box-shadow: 
      /* Outer dark shadow only */
      8px 8px 16px var(--shadow-dark),
      /* Inner shadows for dark mode */
      inset 2px 2px 4px rgba(0, 0, 0, 0.2),
      inset -2px -2px 4px rgba(255, 255, 255, 0.05);
}

.neumorphic-element h1, .neumorphic-element h2, .neumorphic-element h3, .neumorphic-element h4, .neumorphic-element h5, .neumorphic-element p { color: var(--text-color); }
.neumorphic-element-inset { background-color: var(--element-color); border-radius: 15px; box-shadow: inset 6px 6px 12px var(--shadow-dark), inset -6px -6px 12px var(--shadow-light); transition: all 0.3s ease; color: var(--text-color); }
.neumorphic-element-inset h1, .neumorphic-element-inset h2, .neumorphic-element-inset h3, .neumorphic-element-inset h4, .neumorphic-element-inset h5, .neumorphic-element-inset p { color: var(--text-color); }
.neumorphic-button { background-color: var(--element-color); border: none; padding: 0.6rem 1.2rem; border-radius: 10px; color: var(--text-color); font-weight: 500; box-shadow: 4px 4px 8px var(--shadow-dark), -4px -4px 8px var(--shadow-light); transition: all 0.2s ease-in-out; cursor: pointer; text-align: center; display: inline-block; }
.neumorphic-button:hover { color: var(--accent-color); box-shadow: 3px 3px 6px var(--shadow-dark), -3px -3px 6px var(--shadow-light); }
.neumorphic-button:active { color: var(--accent-hover-color); box-shadow: inset 3px 3px 6px var(--shadow-dark), inset -3px -3px 6px var(--shadow-light); }

/* --- Navbar uses the same enhanced effect --- */
.neumorphic-nav { position: fixed; top: 0; left: 0; width: 100%; z-index: 1030; background-color: var(--element-color); padding: 0.8rem 1rem; box-shadow: 8px 8px 16px var(--shadow-dark); }
body.dark-mode .neumorphic-nav { box-shadow: 8px 8px 16px var(--shadow-dark); }

/* All other styles below remain the same */
.neumorphic-brand { padding: 5px 10px; color: var(--text-color); font-weight: bold; border-radius: 8px; transition: all 0.3s ease; box-shadow: 3px 3px 6px var(--shadow-dark), -3px -3px 6px var(--shadow-light); }
.neumorphic-brand:hover { color: var(--accent-color); box-shadow: inset 2px 2px 4px var(--shadow-dark), inset -2px -2px 4px var(--shadow-light); }
.neumorphic-brand img { transition: transform 0.3s ease; }
.neumorphic-brand:hover img { transform: rotate(-5deg); }
.neumorphic-nav .nav-link { color: var(--text-color); padding: 0.5rem 1rem; margin: 0 0.3rem; border-radius: 8px; transition: all 0.3s ease; font-weight: 500; }
.neumorphic-nav .nav-link:hover, .neumorphic-nav .nav-link.active { color: var(--accent-color); }
.neumorphic-dropdown { background-color: var(--dropdown-bg); border: none; border-radius: 10px; padding: 0.5rem 0; box-shadow: 5px 5px 10px var(--shadow-dark), -5px -5px 10px var(--shadow-light); margin-top: 0.5rem; }
.neumorphic-dropdown .dropdown-item { color: var(--text-color); padding: 0.5rem 1rem; transition: background-color 0.2s ease, color 0.2s ease; background-color: transparent; }
.neumorphic-dropdown .dropdown-item:hover, .neumorphic-dropdown .dropdown-item:focus { background-color: var(--dropdown-hover-bg); color: var(--accent-color); }
.neumorphic-dropdown .dropdown-divider { border-top: 1px solid var(--shadow-dark); opacity: 0.5; }
.theme-toggle-button { padding: 0.4rem 0.6rem; line-height: 1; }
.theme-toggle-button svg { width: 1em; height: 1em; vertical-align: -0.125em; fill: var(--icon-fill); transition: fill 0.3s ease; }
body:not(.dark-mode) .theme-icon-dark { display: none; }
body.dark-mode .theme-icon-light { display: none; }
.navbar-nav .neumorphic-button { margin-top: 5px; margin-bottom: 5px; }
@media (min-width: 992px) { .navbar-nav .neumorphic-button { margin-top: 0; margin-bottom: 0; } .navbar-nav .nav-item.ms-lg-2 { margin-left: 0.5rem; } }
.navbar-toggler { border: none; padding: 0.25rem 0.5rem; border-radius: 8px; box-shadow: 3px 3px 6px var(--shadow-dark), -3px -3px 6px var(--shadow-light); transition: all 0.3s ease; }
.navbar-toggler:active { box-shadow: inset 2px 2px 4px var(--shadow-dark), inset -2px -2px 4px var(--shadow-light); }
.navbar-toggler-icon { background-image: none; position: relative; width: 20px; height: 20px; display: inline-block; vertical-align: middle; }
.navbar-toggler-icon::before, .navbar-toggler-icon::after { content: ''; position: absolute; left: 0; width: 100%; height: 2px; background-color: var(--text-color); transition: all 0.3s ease; border-radius: 1px; }
.navbar-toggler-icon::before { top: 4px; }
.navbar-toggler-icon::after { bottom: 4px; }
.navbar-toggler[aria-expanded="true"] .navbar-toggler-icon::before { transform: translateY(5px) rotate(45deg); }
.navbar-toggler[aria-expanded="true"] .navbar-toggler-icon::after { transform: translateY(-5px) rotate(-45deg); }

/* Footer Styling */
.footer.neumorphic-element { border-radius: 15px 15px 0 0; color: var(--text-color); }
.footer span { color: var(--text-color); opacity: 0.8; }

/* Modal Styling */
.modal-content.neumorphic-element { border: none; border-radius: 15px; }
.modal-header.neumorphic-modal-header { border-bottom: none; padding: 1rem 1.5rem; }
.modal-header .modal-title { color: var(--text-color); font-weight: 600; }
.modal-header .btn-close { filter: brightness(0) invert(var(--btn-close-invert, 0.5)); transition: filter 0.3s ease; }
body.dark-mode .modal-header .btn-close { --btn-close-invert: 1; filter: brightness(0) invert(var(--btn-close-invert)); }
.modal-header .btn-close:hover { filter: brightness(0) invert(var(--btn-close-invert, 0.5)) opacity(0.75); }
.modal-body { padding: 1.5rem; }
.modal-body p { color: var(--text-color); opacity: 0.9; }
.modal-body .google-login-btn { display: inline-flex; align-items: center; }
.modal-footer.neumorphic-modal-footer { border-top: none; padding: 0.75rem 1.5rem; color: var(--text-color); opacity: 0.7; }

/* Modal Tab Styling */
.modal-content .nav-tabs .nav-link.neumorphic-nav-link { border: none; margin: 0; color: var(--text-color); background-color: transparent; padding: 0.75rem 1.25rem; box-shadow: none; transition: all 0.2s ease-in-out; border-bottom: 2px solid transparent; }
.rounded-top-left-only { border-radius: 15px 0 0 0 !important; }
.rounded-top-right-only { border-radius: 0 15px 0 0 !important; }
.modal-content .nav-tabs .nav-link.neumorphic-nav-link.active { color: var(--accent-color); font-weight: 600; background-color: var(--element-color); box-shadow: 4px 0px 8px var(--shadow-dark); border-bottom: 2px solid var(--accent-color); }
.modal-content .nav-tabs .nav-link.neumorphic-nav-link#signup-tab.active { box-shadow: -4px 0px 8px var(--shadow-dark); }
.modal-content .nav-tabs .nav-link.neumorphic-nav-link:not(.active):hover { background-color: rgba(0,0,0,0.03); }
body.dark-mode .modal-content .nav-tabs .nav-link.neumorphic-nav-link:not(.active):hover { background-color: rgba(255,255,255,0.03); }
.or-divider { line-height: 1em; }
.or-divider::before, .or-divider::after { content: ""; display: block; width: 40%; height: 1px; background: var(--text-color); opacity: 0.3; position: absolute; top: 50%; }
.or-divider::before { left: 0; }
.or-divider::after { right: 0; }