/* --- Basic Reset & Font --- */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    /* --- THEME VARIABLES (DEFAULT = DARK) --- */
    --font-family: 'Montserrat', sans-serif;
    --bg-image: url('../img/loginbackground2.png');
    --bg-primary: #12191e;
    --bg-secondary: #2c3e50;
    
    --text-primary: #ecf0f1;
    --text-secondary: #b2bec3;
    --text-highlight: #3498db;
    --text-on-highlight-bg: #12191e;

    --border-primary: rgba(255, 255, 255, 0.1);
    --border-secondary: #2c3e50;
    --border-highlight: #3498db;
    
    --button-bg-primary: #ffffff;
    --button-text-primary: #12191e;
    --button-bg-hover: #dddddd;

    --logo-bg-color: var(--bg-primary);
    --logo-bg-alpha: 0.85;

    /* --- END OF VARIABLES --- */

    font-family: var(--font-family);
    background-image: var(--bg-image);
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    min-height: 100vh;
    color: var(--text-primary);
    transition: background-image 0.4s;
}

/* --- LIGHT THEME OVERRIDES --- */
body.theme-light {
    /* Make sure you have a light background image */
    --bg-image: url('../img/loginbackground_light.png');
    --bg-primary: #ffffff;
    --bg-secondary: #f4f7f6;
    --bg-primary-transparent: rgba(255, 255, 255, 0.8);

    --text-primary: #12191e;
    --text-secondary: #5d6d7e;
    --text-highlight: #2980b9; /* Darker blue for light bg */
    --text-on-highlight-bg: #ffffff;
    
    --border-primary: rgba(0, 0, 0, 0.1);
    --border-secondary: #e0e0e0;
    --border-highlight: #2980b9;
    
    --button-bg-primary: #12191e;
    --button-text-primary: #ffffff;
    --button-bg-hover: #34495e;
}

/* --- Theme Toggle Button (This is the button you wanted back) --- */
#theme-toggle-button {
    position: fixed;
    top: 20px;
    right: 20px;
    padding: 10px 15px;
    background: var(--bg-primary-transparent);
    backdrop-filter: blur(5px);
    border: 1px solid var(--border-primary);
    border-radius: 20px;
    color: var(--text-secondary);
    font-size: 0.9rem;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    cursor: pointer;
    user-select: none;
    z-index: 100;
    transition: background 0.3s ease, border-color 0.3s ease, color 0.3s;
}
#theme-toggle-button:hover {
    background: var(--bg-primary);
    color: var(--text-primary);
}

/* --- Radial Nav Menu --- */
.radial-nav-container {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1000;
}

#nav-toggle-button {
    width: 100px;
    height: 100px;
    backdrop-filter: blur(10px);
    cursor: pointer;
    position: relative;
    z-index: 1002;

    /* YOUR ORIGINAL QUARTER-CIRCLE STYLES */
    border-bottom-right-radius: 100px;
    border-right: 1px solid var(--border-primary);
    border-bottom: 1px solid var(--border-primary);

    /* SVG STYLES (CENTERING & COLOR) */
    background-color: var(--logo-bg-color);
    opacity: var(--logo-bg-alpha);
    padding: 0; /* Reset button default */
    border-top: none; /* Reset button default */
    border-left: none; /* Reset button default */
    
    /* COMBINED TRANSITIONS */
    transition: background-color 0.3s, opacity 0.3s, border-color 0.3s;
}

/* NEW rule for the SVG inside */
#nav-toggle-button svg {
    /* CHANGED from 60% to a fixed size */
    width: 60px;
    height: 60px;

    /* ADDED to position it */
    position: absolute;
    bottom: 28px;
    right: 28px;
}

/* NEW rules for the SVG parts */
#nav-toggle-button .logo-ring {
    stroke: var(--logo-color-ring);
    transition: stroke 0.3s;
}

#nav-toggle-button .logo-mountain {
    fill: var(--logo-color-mountain);
    transition: fill 0.3s;
}

#nav-toggle-button:hover {
    background-color: var(--bg-primary);
}

.nav-menu {
    position: absolute;
    top: 0;
    left: 0;
    width: 310px;
    height: 310px;
    background-color: rgba(from var(--logo-bg-color) r g b / var(--logo-bg-alpha));
    backdrop-filter: blur(10px);
    border-bottom-right-radius: 350px;
    transform-origin: top left;
    clip-path: circle(0% at 0 0);
    transition: clip-path 0.4s ease-out, background-color 0.3s;
    pointer-events: none;
    z-index: 1001; /* Ensure it's above outer ring but below button */
}
.nav-menu.is-open {
    clip-path: circle(500px at 0 0);
    pointer-events: auto;
}

.nav-menu-outer {
    position: absolute;
    top: 0;
    left: 0;
    width: 450px; /* Fallback */
    height: 450px; /* Fallback */
    background-color: rgba(from var(--logo-bg-color) r g b / var(--logo-bg-alpha));
    backdrop-filter: blur(10px);
    border-bottom-right-radius: 500px;
    transform-origin: top left;
    clip-path: circle(0% at 0 0);
    transition: clip-path 0.4s ease-out, background-color 0.3s;
    pointer-events: none;
    z-index: 1000; /* Behind inner ring */
}

.nav-menu-outer.is-open {
    clip-path: circle(800px at 0 0);
    /* pointer-events remains none as it has no links itself */
}

.nav-menu a {
    position: absolute;
    top: 0;
    left: 0;
    transform-origin: top left;
    opacity: 0;
    transform: rotate(0deg);
    transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.3s;
    transition-delay: var(--d-out);
    padding-left: 45px;
}
.nav-menu.is-open a {
    opacity: 1;
    transform: rotate(var(--r));
    transition-delay: var(--d-in);
}

.nav-menu a span {
    display: inline-block;
    color: var(--text-primary);
    text-decoration: none;
    font-size: 1rem;
    transform: rotate(calc(var(--r) * -1));
    transform-origin: left center;
    padding: 5px 5px;
    border-radius: 6px;
    transition: background-color 0.2s, color 0.2s, transform 0.2s ease;
    white-space: nowrap; /* Prevent wrapping */
}

/* Position Links */
.nav-link-inner span { margin-left: 80px; }
.nav-link-outer span { margin-left: 180px; }

.nav-menu a:hover span {
    background-color: var(--button-bg-primary);
    color: var(--button-text-primary);
    transform: rotate(calc(var(--r) * -1)) scale(0.98);
    padding: 3px 3px;
    border-radius: 3px;
}

.nav-ring-separator {
    position: absolute;
    top: 0;
    left: 0;
    width: 200px;
    height: 200px;
    border-bottom-right-radius: 200px;
    border-right: 2px solid var(--border-primary);
    border-bottom: 2px solid var(--border-primary);
    pointer-events: none;
    transition: border-color 0.3s;
}

/* Compact Navigation Menu (Inner Ring Only) */
.nav-menu.nav-menu-compact {
    width: 220px;
    height: 220px;
    border-bottom-right-radius: 250px; /* Slightly tighter radius */
}

/* --- Main Content Area --- */
.content-wrapper {
    max-width: 1600px;
    margin: 0 auto;
    padding: 30px 30px 30px 130px;
}

.page-header {
    margin-bottom: 30px;
}

.page-header h1 {
    font-size: 2.2rem;
    color: var(--text-primary);
    font-weight: 700;
    transition: color 0.3s;
}

.page-subtitle {
    font-size: 1.1rem;
    color: var(--text-secondary);
    margin-top: 5px;
    border-bottom: 1px solid var(--border-primary);
    padding-bottom: 20px;
    transition: color 0.3s, border-color 0.3s;
}

/*
=========================
Flash Message Pop-ups
=========================
*/
.flash-messages-container {
    position: fixed; /* Floats on top of the content */
    top: 20px;
    left: 50%;
    transform: translateX(-50%); /* Center the container */
    width: 90%;
    max-width: 600px;
    z-index: 9999; /* Show above all other content */
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.flash-message {
    padding: 15px 20px;
    border-radius: 8px;
    font-size: 0.95rem;
    font-weight: 600;
    color: #ffffff;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

/* We'll use the 'category' we set in decorators.py */
.flash-message.error {
    background-color: #e74c3c; /* Red */
}

.flash-message.success {
    background-color: #2ecc71; /* Green */
}

.flash-message.info {
    background-color: #3498db; /* Blue */
}

/*
=========================
Global Back Link
=========================
*/
.back-link-container {
    margin-bottom: 20px;
}

.back-link {
    color: var(--text-secondary);
    text-decoration: none;
    font-weight: 600;
    font-size: 0.9rem;
    transition: color 0.3s;
}

.back-link:hover {
    color: var(--text-highlight);
}

/*
=========================
Custom Confirm Modal
=========================
*/
.modal-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(5px);
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    
    /* Start hidden */
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
}

.modal-backdrop.is-open {
    /* Show */
    opacity: 1;
    pointer-events: auto;
}

.modal-box {
    display: flex;
    gap: 20px;
    align-items: flex-start; /* Aligns logo to the top of the text column */
    background: var(--bg-primary);
    border: 1px solid var(--border-secondary);
    border-radius: 70px 10px 10px 70px; /* Your custom border radius */
    padding: 15px;
    width: 90%;
    max-width: 600px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.4);
    
    /* Simple fade-in animation */
    transform: scale(0.95);
    opacity: 0;
    transition: all 0.2s ease;
}

.modal-backdrop.is-open .modal-box {
    transform: scale(1);
    opacity: 1;
}

.modal-logo-area {
    flex-shrink: 0;
    width: 95px;
    padding-top: 5px;
    margin-left: 5px;
}

.modal-logo-area svg {
    width: 100%;
    height: 100%;
}
/* These will be themed by main.css's global vars */
.modal-logo-area .logo-ring {
    stroke: var(--logo-color-ring);
    transition: stroke 0.3s;
}
.modal-logo-area .logo-mountain {
    fill: var(--logo-color-mountain);
    transition: fill 0.3s;
}


.modal-content-area {
    flex-grow: 1;
    /* This is the key: it stacks the text and buttons vertically */
    display: flex;
    flex-direction: column;
    min-height: 100px; /* Ensures buttons have space */
}


.modal-box h3 {
    font-size: 1.4rem;
    color: var(--text-primary);
    margin-top: 0;
    margin-bottom: 10px;
}

.modal-box p {
    font-size: 1rem;
    color: var(--text-secondary);
    flex-grow: 1; /* This is the *other* key: it pushes the buttons to the bottom */
}

.modal-buttons {
    display: flex;
    justify-content: flex-end; /* Aligns buttons to the right */
    gap: 15px;
}

/* Styles for the rectangular buttons */
.widget-button-secondary {
    padding: 10px 18px;
    font-size: 0.95rem;
    font-weight: 700;
    border-radius: 6px;
    border: none;
    cursor: pointer;
    background-color: var(--button-bg-primary);
    color: var(--button-text-primary);
    transition: all 0.3s;
}

.widget-button-secondary:hover {
    opacity: 0.85;
}

/* Global style for a danger button */
.widget-button-danger {
    padding: 10px 18px;
    font-size: 0.95rem;
    font-weight: 700;
    border-radius: 6px;
    border: none;
    cursor: pointer;
    background-color: #e74c3c; /* Red */
    color: #ffffff;
    transition: all 0.3s;
}

.widget-button-danger:hover {
    opacity: 0.85;
}