/* General styles common to all pages, and header/navbar styles
  Claude used to apply new color scheme with theme support
*/

/* ============================================
   DARK THEME (DEFAULT)
   ============================================ */
:root {
    /* Backgrounds */
    --bg-primary: #0a0509;
    --bg-secondary: #1a1225;
    --bg-tertiary: #2a1f38;

    /* Primary burgundy accents */
    --accent-burgundy: #8b3a62;
    --accent-burgundy-light: #a8527a;
    --accent-burgundy-dark: #5c2642;

    /* Purple accents */
    --accent-purple: #b8a5cc;
    --accent-purple-light: #d4c7e3;
    --accent-purple-dark: #7a6a8e;

    /* Text colors - WCAG AA compliant */
    --text-primary: #e8f1f4;
    --text-secondary: #c5b8d4;
    --text-tertiary: #9d8fad;
    --text-muted: #776888;

    /* Semantic colors */
    --color-success: #68c9a8;
    --color-warning: #f4b860;
    --color-error: #eb6b7a;
    --color-info: #7eb3d4;

    /* Focus indicators */
    --focus-ring: #d4c7e3;
    --focus-ring-offset: #0a0509;

    /* Legacy button variables (for backwards compatibility) */
    --button-bg-color: #8b3a62;
    --button-hover-bg-color: #a8527a;
}

/* ============================================
   LIGHT THEME
   ============================================ */
body.light-theme {
    /* Backgrounds - light and airy */
    --bg-primary: #f8f6fa;
    --bg-secondary: #ede8f2;
    --bg-tertiary: #e0d8eb;

    /* Primary burgundy accents - darker for contrast */
    --accent-burgundy: #6b2447;
    --accent-burgundy-light: #8b3a62;
    --accent-burgundy-dark: #4a1830;

    /* Purple accents - darker for readability */
    --accent-purple: #5a4573;
    --accent-purple-light: #7a6a8e;
    --accent-purple-dark: #3d2952;

    /* Text colors - WCAG AA compliant on light backgrounds */
    --text-primary: #1a0f24;
    --text-secondary: #3d2952;
    --text-tertiary: #5a4573;
    --text-muted: #7a6a8e;

    /* Semantic colors - adjusted for light backgrounds */
    --color-success: #2d8a6b;
    --color-warning: #d9940f;
    --color-error: #c9364a;
    --color-info: #3b7ba3;

    /* Focus indicators */
    --focus-ring: #6b2447;
    --focus-ring-offset: #f8f6fa;

    /* Legacy button variables */
    --button-bg-color: #6b2447;
    --button-hover-bg-color: #8b3a62;
}

/* ============================================
   LIGHT THEME SPECIFIC OVERRIDES
   ============================================ */
body.light-theme .task-count {
    background: rgba(0, 0, 0, 0.1);
}

body.light-theme .task-actions {
    background: rgba(0, 0, 0, 0.05);
    border-left: 1px solid rgba(0, 0, 0, 0.1);
}

body.light-theme .priority-label.priority-0 {
    background-color: rgba(90, 69, 115, 0.15);
}

body.light-theme .priority-label.priority-1 {
    background-color: rgba(122, 106, 142, 0.15);
}

body.light-theme .priority-label.priority-2 {
    background-color: rgba(107, 36, 71, 0.15);
}

body.light-theme .priority-label.priority-3 {
    background-color: rgba(107, 36, 71, 0.2);
}

body.light-theme .delete-task-title {
    background: rgba(90, 69, 115, 0.1);
}

body.light-theme .btn-edit-task:hover {
    background-color: rgba(90, 69, 115, 0.15);
}

body.light-theme .btn-delete-task:hover {
    background-color: rgba(107, 36, 71, 0.15);
}

body.light-theme .column-content.drag-over {
    background-color: rgba(90, 69, 115, 0.1);
}

/* Force light text on dark purple/burgundy backgrounds in light mode */
body.light-theme .column-header,
body.light-theme .column-header h2,
body.light-theme .column-header .task-count {
    color: #e8f1f4 !important; /* Light text for dark backgrounds */
}

body.light-theme .btn-primary,
body.light-theme .btn-secondary,
body.light-theme .btn-primary:hover,
body.light-theme .btn-secondary:hover,
body.light-theme .btn-primary:active,
body.light-theme .btn-secondary:active,
body.light-theme .btn-primary:focus,
body.light-theme .btn-secondary:focus {
    color: #e8f1f4 !important; /* Light text for dark button backgrounds in all states */
}

/* System admin table buttons and general buttons with burgundy/purple backgrounds */
body.light-theme #users-table button,
body.light-theme #users-table button:hover,
body.light-theme #users-table button:focus,
body.light-theme #users-table button:active,
body.light-theme button[style*="background"],
body.light-theme .btn[style*="background"] {
    color: #e8f1f4 !important; /* Light text for dark button backgrounds */
}

/* Modal header and other elements with gradient backgrounds */
body.light-theme .modal-header,
body.light-theme .modal-header h2,
body.light-theme .close-modal {
    color: #e8f1f4 !important;
}

/* Submit buttons with burgundy/purple backgrounds */
body.light-theme .btn-submit,
body.light-theme .btn-submit:hover,
body.light-theme .btn-submit:active,
body.light-theme .btn-submit:focus,
body.light-theme button[type="submit"] {
    color: #e8f1f4 !important;
}

/* Navigation links with burgundy background in active/hover states */
body.light-theme nav a:hover,
body.light-theme nav a.active,
body.light-theme nav a:focus {
    color: #e8f1f4 !important; /* Light text on dark burgundy background */
}

/* User profile buttons with dark backgrounds */
body.light-theme .google-settings-button,
body.light-theme .submit-button,
body.light-theme .google-settings-container a {
    color: #e8f1f4 !important; /* Light text on dark purple background */
}

body.light-theme .box-shadow,
body.light-theme .board-header,
body.light-theme .board-column,
body.light-theme .task-card {
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

body.light-theme .task-card:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

body.light-theme .modal-content {
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
}

body {
    font-family: Arial, sans-serif;
    display: flex;
    justify-content: space-around;
    margin: 0;
    padding: 20px;
    background-color: var(--bg-primary);
    color: var(--text-primary);
    flex-direction: column;
}

/* Navbar styling */

/* Navigation */
nav {
    background: var(--bg-secondary);
    padding: 1rem;
    margin-bottom: 2rem;
    border-radius: 5px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
    display: flex;
    align-items: center;
}

nav a {
    color: var(--text-primary);
    text-decoration: none;
    margin-right: 1rem;
    padding: 0.5rem 1rem;
    border-radius: 3px;
    transition: background-color 0.3s;
}

nav a:hover,
nav a.active {
    background-color: var(--accent-burgundy);
    color: var(--text-primary);
}

nav a:focus {
    outline: 3px solid var(--focus-ring);
    outline-offset: 2px;
    background-color: var(--accent-burgundy);
}

/* Profile Dropdown (css help from gemini refined by me*/
.profile-dropdown {
    position: relative;
    display: inline-block;
    margin-left: auto;
}

.profile-info {
    background-color: transparent;
    border: none !important;
    cursor: pointer;
    display: flex;
    align-items: center;
    color: var(--text-primary);
    font-size: 1rem;
    padding: 0.5rem 1rem; /* This aligns it with the other tabs */
    border-radius: 3px; /* This matches the rounded corners of the other tabs */
    transition: background-color 0.3s; /* This adds a smooth transition on hover */
}

.profile-info:hover {
    background-color: var(--accent-burgundy);
}

.profile-info:focus {
    outline: 3px solid var(--focus-ring);
    outline-offset: 2px;
}

.profile-picture {
    width: 13.5px;
    height: 13.5px;
    border-radius: 50%;
    margin-right: 2px;
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: var(--bg-secondary); /* Changed to match your theme */
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
    z-index: 1;
    right: 0;
}

.dropdown-content a {
    color: var(--text-primary); /* Changed to match your theme */
    padding: 12px 16px;
    text-decoration: none;
    display: block;
}

.dropdown-content a:hover {
    background-color: var(--accent-burgundy-light);
}

.dropdown-content a:focus {
    outline: 3px solid var(--accent-purple-light);
    outline-offset: -3px;
    background-color: var(--accent-burgundy-light);
}

/* ============================================
   MOBILE RESPONSIVENESS
   ============================================ */
@media (max-width: 768px) {
    /* Body padding adjustments */
    body {
        padding: 12px;
    }

    /* Navigation - make mobile friendly */
    nav {
        flex-wrap: wrap;
        padding: 0.75rem;
        margin-bottom: 1rem;
    }

    nav a {
        margin-right: 0.5rem;
        margin-bottom: 0.5rem;
        padding: 0.6rem 0.8rem;
        font-size: 14px;
        min-height: 44px; /* Touch target size */
        display: inline-flex;
        align-items: center;
    }

    /* Profile dropdown adjustments */
    .profile-dropdown {
        margin-left: 0;
        width: 100%;
        margin-top: 0.5rem;
    }

    .profile-info {
        width: 100%;
        justify-content: center;
        padding: 0.6rem 1rem;
        min-height: 44px;
    }

    .dropdown-content {
        right: auto;
        left: 0;
        width: 100%;
    }

    .dropdown-content a {
        padding: 14px 16px;
        min-height: 44px;
    }
}

@media (max-width: 480px) {
    body {
        padding: 8px;
    }

    nav {
        padding: 0.5rem;
    }

    nav a {
        font-size: 13px;
        padding: 0.5rem 0.7rem;
    }
}