/* css imports */
@import url("/terms.css");
@import url("/privacy.css");

/* ========================================= */
/* z-index tier scheme                       
   
    - Tier 1 (10 - 90)          Local Overlays   ex: sticky headers, captions
    - Tier 2 (100 - 199)        Navigation       ex: hamburger button
    - Tier 3 (500 - 599)        Sticky App UI    ex: song player
    - Tier 4 (1000 - 1010)      App Modals       ex: backdrops dialogs
    - Tier 5 (2000+)            System Overlays  ex: Splash screen, critical alerts, tooltips for modals
*/
/* ========================================= */

/* ========================================= */
/* 1.1 FONT DEFINITION                       */
/* ========================================= */
@font-face {
    font-family: 'ShareTechMono';
    src: url('/fonts/ShareTechMono-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Inter';
    src: url('/fonts/Inter.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

/* ========================================= */
/* 1.2.1 DESIGN TOKENS (Variables)           */
/* ========================================= */
:root {
    /* Preset Colors for swatch making */
    /* lower values in names correspond to lighter */
    /* 
        ***================== CUSTOMIZATION NOTE ==========================***
        The concept of this CSS is that you can copy and paste the color-based
        variables immediately below into a GPT and ask it to modify the colors 
        (i.e. "make them more pastel", or "make them more vibrant", etc) and 
        then paste the results over the existing values to easily change the 
        color scheme of the entire site.

        I haven't tested this idea, but you could probably copy and paste both 
        preset colors and site swatch into a GPT and ask it to completely change
        the color scheme and update the names in the preset colors to make it
        make sense with the new scheme.
    */
    --Blue-50: #EFF6FF;
    --Blue-100: #DBEAFE;
    --Blue-200: #BFDBFE;
    --Blue-300: #93C5FD;
    --Blue-400: #60A5FA;
    --Blue-500: #3B82F6;
    --Blue-600: #2563EB;
    --Blue-700: #1D4ED8;
    --Blue-800: #1E40AF;
    --Blue-900: #1E3A8A;
    --Blue-Glow-Light: #93C5FD04; /* semi-transparent */
    --Purple-50: #F5F3FF;
    --Purple-100: #EDE9FE;
    --Purple-200: #DDD6FE;
    --Purple-300: #C4B5FD;
    --Purple-400: #A78BFA;
    --Purple-500: #8B5CF6;
    --Purple-600: #7C3AED;
    --Purple-700: #6D28D9;
    --Purple-800: #5B21B6;
    --Purple-900: #4C1D95;
    --Purple-Glow-Light: #C4B5FD04; /* semi-transparent */
    --Green-50: #F0FDF4;
    --Green-100: #DCFCE7;
    --Green-200: #BBF7D0;
    --Green-300: #86EFAC;
    --Green-400: #4ADE80;
    --Green-500: #22C55E;
    --Green-600: #16A34A;
    --Green-700: #15803D;
    --Green-800: #166534;
    --Green-900: #14532D;
    --Green-Glow-Light: #86EFAC04; /* semi-transparent */
    /*These start at light yellow and end almost brown */
    --Yellow-Orange-50: #FFFBEB;
    --Yellow-Orange-100: #FEF3C7;
    --Yellow-Orange-200: #FDE68A;
    --Yellow-Orange-300: #FCD34D;
    --Yellow-Orange-400: #FBBF24;
    --Yellow-Orange-500: #F59E0B;
    --Yellow-Orange-600: #D97706;
    --Yellow-Orange-700: #B45309;
    --Yellow-Orange-800: #92400E;
    --Yellow-Orange-900: #78350F;
    --Yellow-Orange-Glow-Light: #FCD34D04; /* semi-transparent */
    --Red-50: #FEF2F2;
    --Red-100: #FEE2E2;
    --Red-200: #FECACA;
    --Red-300: #FCA5A5;
    --Red-400: #F87171;
    --Red-500: #EF4444;
    --Red-600: #DC2626;
    --Red-700: #B91C1C;
    --Red-800: #991B1B;
    --Red-900: #7F1D1D;
    --Red-Glow-Light: #FCA5A504; /* semi-transparent */
    /* These start almost white and end nearly black */
    --White-Dark-50: #FAFAFA;
    --White-Dark-100: #F5F5F5;
    --White-Dark-200: #E5E5E5;
    --White-Dark-300: #D4D4D4;
    --White-Dark-400: #A3A3A3;
    --White-Dark-500: #737373;
    --White-Dark-600: #525252;
    --White-Dark-700: #404040;
    --White-Dark-800: #262626;
    --White-Dark-900: #171717;
    /* ========================================= */
    /* 1.2.2 Site Swatch Variables               */
    /* ========================================= */
    /* -- Recommend leaving these alone and changing the colors above -- */
    --primary-lightest: var(--White-Dark-50);
    --primary-light: var(--White-Dark-100);
    --primary-med: var(--White-Dark-300);
    --primary-dark: var(--White-Dark-600);
    --primary-darkest: var(--White-Dark-800);
    --primary-glow: var(--White-Dark-Glow-Light);
    --secondary-lightest: var(--Blue-100);
    --secondary-light: var(--Blue-300);
    --secondary-med: var(--Blue-500);
    --secondary-dark: var(--Blue-700);
    --secondary-darkest: var(--Blue-900);
    --secondary-glow: var(--Purple-Glow-Light);
    --success-lightest: var(--Green-100);
    --success-light: var(--Green-300);
    --success-med: var(--Green-500);
    --success-dark: var(--Green-700);
    --success-darkest: var(--Green-900);
    --success-glow: var(--Green-Glow-Light);
    --caution-lightest: var(--Yellow-Orange-100);
    --caution-light: var(--Yellow-Orange-300);
    --caution-med: var(--Yellow-Orange-500);
    --caution-dark: var(--Yellow-Orange-700);
    --caution-darkest: var(--Yellow-Orange-900);
    --caution-glow: var(--Yellow-Orange-Glow-Light);
    --failure-lightest: var(--Red-100);
    --failure-light: var(--Red-300);
    --failure-med: var(--Red-500);
    --failure-dark: var(--Red-700);
    --failure-darkest: var(--Red-900);
    --failure-glow: var(--Red-Glow-Light);
    --background: var(--White-Dark-900);
    --background-light: var(--White-Dark-800);
    --text-neutral: var(--White-Dark-100);
    --border-neutral: var(--White-Dark-500);
    --dark-border: var(--White-Dark-700);
    --disabled-background: var(--White-Dark-700);
    --disabled-foreground: var(--White-Dark-600);
    --google-button-background: var(--White-Dark-50);
    --google-button-text: var(--White-Dark-500);
    --google-button-border-color: var(--White-Dark-700);
    --google-icon-color: var(--Blue-400);
    /* ========================================= */
    /* 1.2.3 Site Font & Baseline Sizes          */
    /* ========================================= */
    --font-main: 'ShareTechMono', monospace;
    --base-font-size: clamp(1rem, 1.2vw + 8px, 1.5rem);
    --form-max-width: 420px;
    --spacing: 1rem;
    --grid-smallest-gap: 0.1rem;
    --grid-smaller-gap: 0.2rem;
    --grid-small-gap: 0.3rem;
    --grid-med-gap: 0.5rem;
    --grid-large-gap: 0.75rem;
    --grid-larger-gap: 1rem;
    --grid-largest-gap: 1.5rem;
    /* 
        Changes the headers and buttons text - put "none" if you don't want 
        the ALL CAPS default that the template uses
    */
    /* options: none, lowercase, uppercase, capitalize */
    --header-text-transform: uppercase;
    --social-login-display: none; /* change to initial to show external login providers */
}

/* ========================================= */
/* 1.3 GLOBAL RESET & ENGINE                 */
/* ========================================= */
/* FIX: Global Box Sizing - This fixes the height mismatch root cause */
*, *::before, *::after {
    box-sizing: border-box;
}

html {
    font-family: var(--font-main);
    font-size: var(--base-font-size);
    /* 1. SAFETY: Keep HTML dark to prevent white flashes */
    background-color: var(--background);
    -webkit-text-size-adjust: 100%;
    -webkit-font-smoothing: antialiased;
}

body {
    /* 2. WINDOW: Make body transparent to reveal the fixed background behind it */
    background-color: transparent;
    color: var(--text-neutral);
    margin: 0;
    display: grid;
    justify-content: center;
    align-content: start;
    min-height: 100dvh;
    /* 3. STACKING: Ensure body content sits ABOVE the background */
    position: relative;
    z-index: 1;
}

/* Global animations */

@keyframes smoothFadeIn {
    0% {
        opacity: 0;
        filter: blur(10px); /* Start blurry */
        transform: scale(0.99); /* Start 1% smaller (safe, won't cause scrollbar) */
    }

    100% {
        opacity: 1;
        filter: blur(0); /* End sharp */
        transform: scale(1);
    }
}

/* Update the class to optimize for the blur filter */
.animate-entry {
    animation: smoothFadeIn 1s ease-out forwards;
    display: block;
    width: 100%;
    /* Important: Tells the browser to prep the GPU for blurring */
    will-change: opacity, filter, transform;
}

.disabled {
    background-color: var(--disabled-background) !important;
    color: var(--disabled-foreground) !important;
    pointer-events: none !important; /* Prevents clicks entirely */
    cursor: default !important;
}

.layout-wrapper {
    display: grid;
    justify-content: center;
    align-content: start;
    min-height: 100dvh;
    width: 100%;
    position: relative; /* Context for children */
}

.hidden{
    display: none;
}

.social-login {
    display: var(--social-login-display);
}

.main-layout-container {
    display: grid;
    grid-template-rows: auto 1fr auto;
    row-gap: 0;
    min-height: 100dvh;
    width: 100vw;
    justify-items: center;
    /* Z-Index Fix for buttons */
    position: relative;
    z-index: 1;
}

.main-layout-header {
    padding: var(--grid-smaller-gap) var(--grid-small-gap);
    display: grid;
    column-gap: var(--grid-med-gap);
    grid-template-columns: auto 1fr auto;
    -ms-grid-row: 1;
    grid-row: 1;
    background-color: var(--primary-darkest);
    width: 100%;
    text-align: left;
    align-content: center;
    height: 3rem;
    overflow-y: visible;
    border-bottom: 1px solid black;
}

.main-layout-header > a{
    padding: 0rem 1rem;
}

.main-layout-header-logo{
    margin-top: .1rem;
    height: 2.5rem;
}

.main-layout-header-title {
    display: grid;
    -ms-align-content: center;
    -webkit-align-content: center;
    align-content: center;
}

.main-layout-body {
    -ms-grid-row: 2;
    grid-row: 2;
    height: calc(100dvh - 4.5rem);
    overflow-y: auto;
    width: 100vw;
    /* FIX: Ensure scrolling content is clickable */
    position: relative;
    z-index: auto;
}

    .main-layout-body main {
        min-height: 100%;
        position: relative; /* Good practice for internal layering */
    }

.main-layout-footer {
    display: flex;
    flex-direction: row;
    column-gap: 1rem;
    padding: var(--grid-smallest-gap);
    -ms-grid-row: 3;
    grid-row: 3;
    width: 100%;
    background-color: var(--primary-darkest);
    text-align: center;
    align-content: center;
    height: 1.5rem;
    padding: 0.25rem 0.5rem;
    font-size: 0.8rem;
    border-top: 1px solid black;
}

.main-layout-footer a,
.main-layout-header a{
    color: var(--secondary-light);
    text-decoration: none;
}

/* css class for the outermost div in page-level components */
.page-container{
    max-width: 900px;
    min-height: calc(100dvh - 4.5rem);
}

.identity-page-container {
    display: flex;
    min-height: calc(100dvh - 4.5rem);
    background-color: var(--primary-darkest);
    -webkit-justify-content: center;
    justify-content: center;
    padding-top: 1rem;
    margin-left: auto;
    margin-right: auto;
    gap: 2rem;
    width: 100vw;
    max-width: 1100px;
}

/* ========================================= */
/* 1.4 FORM & INPUT DEFAULTS                 */
/* ========================================= */
form {
    display: grid;
    grid-template-columns: 1fr;
    row-gap: var(--spacing);
    width: 100%;
}

@media screen and (min-width: 768px) {
    form {
        width: 100%;
        max-width: var(--form-max-width);
    }
}

/* Note: !important here is sometimes necessary if overwriting user-agent styles */
input, button, select, textarea, .form-control {
    font-family: var(--font-main);
    font-size: 1rem;
    padding: 0.75rem;
    width: 100%;
    background: transparent;
    color: inherit;
    border: 1px solid var(--border-neutral);
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

    input:focus {
        outline: none;
        border-color: var(--primary-dark);
        box-shadow: 0 0 8px var(--primary-glow);
    }

::placeholder {
    font-family: var(--font-main);
    opacity: 0.5;
    font-size: 0.85rem;
}

label {
    display: block;
    font-size: 0.8rem;
    text-transform: var(--header-text-transform);
    letter-spacing: 1px;
    margin-bottom: 0.2rem;
    opacity: 0.8;
}

/* ========================================= */
/* 1.5 BUTTON VARIANTS (CLEAN)               */
/* ========================================= */

/* 1. SHARED ENGINE: Applies to ALL buttons (Action, Link, Small, Large) */
.btn-primary, 
.btn-disabled,
.btn-delete, 
.btn-google, 
.btn-link-action {
    font-family: var(--font-main);
    font-weight: bold;
    text-transform: var(--header-text-transform);
    letter-spacing: 1.5px;
    cursor: pointer;
    text-decoration: none;
    /* Layout: Flex ensures vertical centering consistently */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* Box Model: Border ensures sizing includes the border width */
    border: 1px solid transparent;
    border-radius: 2px;
    transition: all 0.2s ease-in-out;
    font-size: 0.9rem;
    padding: 0.75rem 0px;
    width: 100%;
}

/* 2. COLORS */
.btn-primary {
    background-color: var(--primary-dark);
    color: var(--primary-lightest);
}

    .btn-primary:hover {
        filter: brightness(1.3);
    }



.btn-delete {
    background-color: var(--caution-dark);
    color: var(--caution-lightest);
}

    .btn-delete:hover {
        filter: brightness(1.3);
    }

.btn-delete-confirm {
    background-color: var(--failure-dark);
    color: var(--failure-lightest);
}

    .btn-delete-confirm:hover {
        filter: brightness(1.3);
    }

.btn-google {
    background-color: var(--google-button-background);
    color: var(--google-button-text);
    border-color: var(--google-button-border-color);
    column-gap: var(--grid-small-gap);
}

    .btn-google:hover {
        filter: brightness(0.8);
    }

/* used for the "sign in with passkey" button on Login page for contrast to other buttons */
.btn-link-action {
    background: var(--background);
    color: var(--primary-lightest);
    border-color: var(--primary-dark);
}

    .btn-link-action:hover {
        filter: brightness(1.3);
    }

/* Google Icon specific */
.google-icon {
    font-weight: bold;
    color: var(--google-icon-color);
    font-size: 1.1em;
}

/* ========================================= */
/* 1.6 ALERTS & VALIDATION                   */
/* ========================================= */
.alert-box {
    display: flex;
    -ms-flex-direction: column;
    -webkit-flex-direction: column;
    flex-direction: column;
    row-gap: 0.75rem;
    padding: 1rem;
    border: 1px solid transparent;
    font-size: 0.9rem;
    border-radius: 4px;
    border-top: none;
    border-right: none;
    border-bottom: none;
    width: 100%;
    max-width: 480px;
}

.alert-box-heading {
    font-weight: bold;
    margin-bottom: 0.5rem;
}

.alert-danger {
    color: var(--caution-lightest);
    background-color: var(--caution-dark);
    border-color: var(--caution-darkest);
    border-left: 4px solid var(--caution-darkest);
}

.alert-success {
    color: var(--success-lightest);
    background-color: var(--success-dark);
    border-color: var(--success-darkest);
    border-left: 4px solid var(--success-darkest);
}

.alert-info {
    color: var(--secondary-lightest);
    background-color: var(--secondary-dark);
    border-color: var(--secondary-darkest);
    border-left: 4px solid var(--secondary-darkest);
}

.text-danger, .text-error {
    color: var(--failure-lightest);
}

.text-info {
    color: var(--primary-light);
}

.alert-link {
    font-weight: bold;
    text-decoration: underline;
    color: inherit;
}

.delete-account-warning {
    color: var(--caution-lightest);
    font-weight: bold;
}

/* ========================================= */
/* 1.7 ACCOUNT MANAGEMENT LAYOUT             */
/* ========================================= */

.manage-container {
    min-height: calc(100dvh - 4.5rem);
    background-color: var(--primary-darkest);
    -ms-align-content: start;
    -webkit-align-content: start;
    align-content: start;
    padding-top: 1rem;
    margin-left: auto;
    margin-right: auto;
    display: grid;
    grid-template-columns: 240px 1fr;
    gap: 2rem;
    width: 100vw;
    max-width: 1100px;
    align-items: start;
    -webkit-justify-content: start;
    justify-content: start;
}

.manage-sidebar {
    padding-right: 1rem;
}

.manage-header {
    font-size: 1.2rem;
}


/* Sidebar links */
.manage-nav-link {
    display: block;
    padding: 0.75rem 1rem;
    text-decoration: none;
    color: var(--primary-lightest);
    border-left: 4px solid transparent;
    transition: all 0.2s;
    text-transform: var(--header-text-transform);
    background-color: var(--background);
}

    .manage-nav-link:hover {
        -moz-filter: brightness(1.3);
        -webkit-filter: brightness(1.3);
        filter: brightness(1.3);
    }

    .manage-nav-link.active {
        border-left-color: var(--primary-light);
        color: var(--primary-color);
        font-weight: 700;
        -moz-filter: brightness(1.5);
        -webkit-filter: brightness(1.5);
        filter: brightness(1.5);
    }


.manage-sectioned-container {
    display: flex;
    -ms-flex-direction: column;
    -webkit-flex-direction: column;
    flex-direction: column;
    row-gap: var(--grid-largest-gap);
}

.manage-content-area {
    padding: 0rem 1rem 0rem 0rem;
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: var(--spacing);    
}

@media screen and (max-width: 787px) {
    .manage-content-area {
        padding: 0rem 1rem;
        -webkit-align-items: center;
        align-items: center;
    }
}

.manage-content-area > .form-group,
.manage-content-area > div{
    width: 100%;
}

.register-confirmation-message-container{
    display: flex;
    flex-direction: column;
    row-gap: 1rem;
    padding: 0.25rem;
}

/* ========================================= */
/* 1.8 UTILITIES                             */
/* ========================================= */
@media (max-width: 768px) {
    .manage-container {
        /* 1. Use Flexbox for a robust vertical stack */
        display: flex;
        flex-direction: column;
        /* 2. Fix the width to fill the screen (No 95vw gaps) */
        width: 100%;
        /* 3. VITAL FIX: Force the container to acknowledge content height */
        height: auto;
        min-height: calc(100dvh - 4.5rem);
        /* 4. DO NOT add padding here. This keeps the sidebar full-width. */
        padding-left: 0;
        padding-right: 0;
    }

    .manage-sidebar {
        /* Force the sidebar to be full width */
        width: 100%;
        /* Reset borders for the stack layout */
        border-right: none;
        border-bottom: 1px solid #333;
        /* Remove the desktop right-padding so it's centered */
        padding-right: 0;
        /* Add space below the menu so it doesn't touch the content */
        margin-bottom: 1.5rem;
    }
    /* Ensure the content area has breathing room on the sides */
    .manage-content-area {
        width: 100%;
        /* Add padding ONLY to the content, not the sidebar */
        padding-left: 1rem;
        padding-right: 1rem;
    }
}

.section-separator {
    border: 0;
    border-top: 1px solid #333;
    margin: 2rem 0;
    width: 100%;
}

.spacer-y {
    margin-top: 1rem;
}

/* ========================================= */
/* 1.9 SPECIALIZED LISTS (Passkeys/Logins)   */
/* ========================================= */
.passkey-list {
    width: 100%;
    display: grid;
    row-gap: var(--grid-med-gap);
    padding: var(--grid-small-gap);
}

.passkey-item {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr auto;
    border-bottom: 1px solid var(--dark-border);
    background: var(--background);
    gap: 1rem;
}

    .passkey-item button {
        padding: var(--grid-smallest-gap);
    }

.passkey-name {
    font-weight: 500;
    padding: 0.5rem 0.5rem;
}

/* ========================================= */
/* 1.10 RECOVERY CODES GRID                  */
/* ========================================= */
.recovery-code-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    justify-items: center;
    background: rgba(255, 255, 255, 0.05);
    border: 1px dashed #444;
    font-family: var(--font-main);
    row-gap: .75rem;
    padding: .75rem 0rem;
    max-width: 450px;
}

.recovery-code {
    font-size: 1.1rem;
    color: var(--primary-lightest);
}

/* ========================================= */
/* 1.11 CONFIRMATION ELEMENTS                */
/* ========================================= */
.email-confirmed-group {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

/* ========================================= */
/* 1.12 LOGIN LINK ROWS & PROMPTS            */
/* ========================================= */
.login-links-row {
    display: flex;
    gap: 1rem;
    align-items: center;
    justify-content: center;
    margin-top: 1rem;
    font-size: 0.9rem;
}

.login-text-row {
    text-align: center;
    font-size: 0.9rem;
    color: var(--primary-lightest);
    white-space: nowrap;
}

    .login-links-row a,
    .login-text-row a {
        color: var(--primary-light);
        text-decoration: none;
        text-transform: var(--header-text-transform);
        font-weight: bold;
        transition: color 0.2s;
    }

    .login-text-row a {
        margin-left: 0.4rem;
    }

        .login-links-row a:hover,
        .login-text-row a:hover {
            color: var(--primary-light);
            text-decoration: underline;
        }

/* ===========================================*/
/* 1.13 CHECKBOXES - override default styles  */
/* ===========================================*/
.form-check {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0.5rem 0;
}

    .form-check input[type="checkbox"],
    .form-check input[type="radio"] {
        width: auto !important;
        padding: 0 !important;
        margin: 0;
        cursor: pointer;
    }

    .form-check label {
        margin-bottom: 0;
        cursor: pointer;
        text-transform: none;
    }

/* ========================================= */
/* 1.14 MISC IDENTITY                        */
/* ========================================= */
kbd {
    background-color: var(--background-light);
    padding: 0.2rem 0.4rem;
    border-radius: 0;
    font-family: var(--font-main);
    color: var(--secondary-light);
    border: 1px solid var(--border-neutral);
    display: inline-block;
    font-size: 0.85rem;
}

/* ========================================= */
/* 1.15 2FA STYLES                           */
/* ========================================= */


.step-header {
    margin-top: 0;
    margin-bottom: 0.75rem;
    font-size: 1.1rem;
    font-weight: bold;
    text-transform: var(--header-text-transform);
    letter-spacing: 1.5px;
    color: var(--primary-light);
    border-bottom: 1px solid var(--dark-border);
    padding-bottom: 0.5rem;
}

.step-instruction {
    margin-bottom: 0.5rem;
    color: var(--text-neutral);
}

.qr-box {
    background-color: white;
    padding: 20px;
    width: 190px;
    height: 190px;
    margin-top: 0.5rem;
    display: flex;
    justify-content: center;
    align-items: center;
}

.two-factor-auth-button-group {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: var(--grid-med-gap);
}

/* ========================================= */
/* 2. Dynamic Backgrounds (Single Layer Fix) */
/* ========================================= */

/* 2. DYNAMIC BACKGROUNDS */
.global-background {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100dvh;
    /* 4. DEPTH: Force background behind everything */
    z-index: -1;
    pointer-events: none;
    overflow: hidden;
    /* 5. DEFAULT BASE: Dark Grey (Safe for Admin/General) */
    background-color: var(--background);
    transition: background-color 0.5s ease;
}
    .global-background::before{
        background-color: red;
    }

    /* Ensure blobs render on top of the background-color */
    .global-background::before,
    .global-background::after {
        z-index: 0;
    }


/* =========================================
   CONFIGURATION: "Bright One" Palette 
   ========================================= */

:root {
    /* 1. Static Anchors */
    --bg-anchor-1: var(--Purple-100);
    --bg-anchor-2: var(--Yellow-Orange-100);
    /* 2. The "Hot" Cluster */
    --blob-hot-main: var(--Blue-100);
    --blob-hot-shadow-1: var(--Purple-200);
    --blob-hot-shadow-2: var(--Yellow-Orange-300);
    /* 3. The "Cool" Cluster */
    --blob-cool-main: var(--Green-300);
    --blob-cool-shadow-1: var(--Purple-200);
    --blob-cool-shadow-2: var(--Purple-100);
}

/*------------------ Rock Background -----------------*/

.dynamic-background-bright-one {
    /* 6. THE FIX: Restore the Deep Rust Base specifically for this theme */
    /* This interacts with 'hard-light' to create the warm orange glow */
    background-color: #851600;
    background-blend-mode: hard-light;
    filter: blur(60px) contrast(150%);
    background-image: radial-gradient(circle at 20% 20%, var(--bg-anchor-1), transparent 50%), radial-gradient(circle at 80% 80%, var(--bg-anchor-2), transparent 50%);
    background-size: 100% 100%;
}

    .dynamic-background-bright-one::before {
        content: '';
        position: absolute;
        top: 50%;
        left: 50%;
        width: 30vw;
        height: 30vw;
        background: var(--blob-hot-main);
        border-radius: 40% 60% 70% 30% / 40% 50% 60% 50%;
        box-shadow: -40vw -20vh 0 -5vw var(--blob-hot-shadow-1), 40vw 20vh 0 -2vw var(--blob-hot-shadow-2);
        animation: chaotic-spin-1 12s linear infinite;
        opacity: 0.8;
        mix-blend-mode: screen;
        z-index: -1; /* Ensure blobs stay within the background layer */
    }

    .dynamic-background-bright-one::after {
        content: '';
        position: absolute;
        top: 50%;
        left: 50%;
        width: 35vw;
        height: 35vw;
        background: var(--blob-cool-main);
        border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
        box-shadow: 30vw -30vh 0 -5vw var(--blob-cool-shadow-1), -30vw 30vh 0 -5vw var(--blob-cool-shadow-2);
        animation: chaotic-spin-2 9s linear infinite reverse;
        opacity: 0.8;
        mix-blend-mode: screen;
        z-index: -1;
    }

/* --- KEYFRAMES --- */

@keyframes chaotic-spin-1 {
    0% {
        transform: translate(-50%, -50%) rotate(0deg) scale(1);
    }

    25% {
        transform: translate(-40%, -40%) rotate(90deg) scale(1.2);
    }

    50% {
        transform: translate(-60%, -60%) rotate(180deg) scale(0.8);
    }

    75% {
        transform: translate(-40%, -60%) rotate(270deg) scale(1.1);
    }

    100% {
        transform: translate(-50%, -50%) rotate(360deg) scale(1);
    }
}

@keyframes chaotic-spin-2 {
    0% {
        transform: translate(-50%, -50%) rotate(0deg) scale(1);
    }

    33% {
        transform: translate(-30%, -70%) rotate(120deg) scale(1.3);
    }

    66% {
        transform: translate(-70%, -30%) rotate(240deg) scale(0.8);
    }

    100% {
        transform: translate(-50%, -50%) rotate(360deg) scale(1);
    }
}

/* =========================================
   CONFIGURATION: "Dark One" Palette (Admin)
   ========================================= */

:root {
    --bg-anchor-dark-1: var(--Blue-900);
    --bg-anchor-dark-2: var(--White-Dark-900);
    --blob-dark-1-main: var(--Blue-800);
    --blob-dark-1-shadow-1: var(--Purple-900);
    --blob-dark-1-shadow-2: var(--Blue-700);
    --blob-dark-2-main: var(--White-Dark-700);
    --blob-dark-2-shadow-1: var(--Blue-900);
    --blob-dark-2-shadow-2: var(--White-Dark-600);
}

/*------------------ Admin Dark Background -----------------*/

.dynamic-background-dark-one {
    background-blend-mode: overlay;
    filter: blur(60px) contrast(120%);
    background-image: radial-gradient(circle at 20% 20%, var(--bg-anchor-dark-1), transparent 50%), radial-gradient(circle at 80% 80%, var(--bg-anchor-dark-2), transparent 50%);
    background-size: 100% 100%;
    background-color: var(--primary-darkest);
}

    .dynamic-background-dark-one::before {
        content: '';
        position: absolute;
        top: 50%;
        left: 50%;
        width: 30vw;
        height: 30vw;
        background: var(--blob-dark-1-main);
        border-radius: 40% 60% 70% 30% / 40% 50% 60% 50%;
        box-shadow: -40vw -20vh 0 -5vw var(--blob-dark-1-shadow-1), 40vw 20vh 0 -2vw var(--blob-dark-1-shadow-2);
        animation: chaotic-spin-1 15s linear infinite;
        opacity: 0.6;
        mix-blend-mode: screen;
    }

    .dynamic-background-dark-one::after {
        content: '';
        position: absolute;
        top: 50%;
        left: 50%;
        width: 35vw;
        height: 35vw;
        background: var(--blob-dark-2-main);
        border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
        box-shadow: 30vw -30vh 0 -5vw var(--blob-dark-2-shadow-1), -30vw 30vh 0 -5vw var(--blob-dark-2-shadow-2);
        animation: chaotic-spin-2 12s linear infinite reverse;
        opacity: 0.5;
        mix-blend-mode: overlay;
    }

/* =========================================
   CONFIGURATION: "Grayscale" Palette
   ========================================= */

:root {
    --bg-anchor-gray-1: var(--White-Dark-300);
    --bg-anchor-gray-2: var(--White-Dark-800);
    --blob-gray-1-main: var(--White-Dark-400);
    --blob-gray-1-shadow-1: var(--White-Dark-200);
    --blob-gray-1-shadow-2: var(--White-Dark-500);
    --blob-gray-2-main: var(--White-Dark-600);
    --blob-gray-2-shadow-1: var(--White-Dark-900);
    --blob-gray-2-shadow-2: var(--White-Dark-700);
}

/*------------------ Grayscale Background -----------------*/

.dynamic-background-grayscale-one {
    background-blend-mode: hard-light;
    filter: blur(60px) contrast(110%) grayscale(100%);
    background-image: radial-gradient(circle at 20% 20%, var(--bg-anchor-gray-1), transparent 50%), radial-gradient(circle at 80% 80%, var(--bg-anchor-gray-2), transparent 50%);
    background-size: 100% 100%;
}

    .dynamic-background-grayscale-one::before {
        content: '';
        position: absolute;
        top: 50%;
        left: 50%;
        width: 30vw;
        height: 30vw;
        background: var(--blob-gray-1-main);
        border-radius: 40% 60% 70% 30% / 40% 50% 60% 50%;
        box-shadow: -40vw -20vh 0 -5vw var(--blob-gray-1-shadow-1), 40vw 20vh 0 -2vw var(--blob-gray-1-shadow-2);
        animation: chaotic-spin-1 12s linear infinite;
        opacity: 0.7;
        mix-blend-mode: screen;
    }

    .dynamic-background-grayscale-one::after {
        content: '';
        position: absolute;
        top: 50%;
        left: 50%;
        width: 35vw;
        height: 35vw;
        background: var(--blob-gray-2-main);
        border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
        box-shadow: 30vw -30vh 0 -5vw var(--blob-gray-2-shadow-1), -30vw 30vh 0 -5vw var(--blob-gray-2-shadow-2);
        animation: chaotic-spin-2 10s linear infinite reverse;
        opacity: 0.6;
        mix-blend-mode: overlay;
    }

/* ========================================= */
/* 3 GoupPhotoComposite                      */
/* ========================================= */


:root
{
    --centered-image-scale: 1.05;   
}


/* =========================================
   3.1 SHARED CONTAINER & LAYER STYLES
   ========================================= */
.scene-container {
    position: relative;
    /* Adjust this height calculation as needed for your layout */
    min-height: calc(100dvh - 4.5rem);
    width: 100%;
    overflow: hidden;
    display: flex;
    justify-content: center;
    /* Ensures the person-layers are anchored to the bottom of the scene */
    align-items: flex-end;
}

.person-layer {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* Flexbox centers the image horizontally, even if it's wider than the screen */
    display: flex;
    justify-content: center;
    align-items: flex-end;
    /* VITAL: This ensures the Zoom animation grows from the floor up */
    transform-origin: bottom center;
    opacity: 0;
    pointer-events: none;
    will-change: transform, opacity;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}

    .person-layer img {
        /* 1. FORCE HEIGHT: Always fill the vertical space */
        height: 100%;
        /* 2. UNCONSTRAIN WIDTH: Allow image to be wider than the screen 
       so it doesn't shrink in narrow layouts */
        width: auto;
        max-width: none;
        /* 3. ANCHOR: Ensure the image pixels align to the bottom center */
        object-fit: cover;
        object-position: bottom center;
        display: block;
    }

/* =========================================
   3.2 GLOBAL DELAYS
   Values are fixed: Index * 3 seconds
   ========================================= */
.person-layer-0 {
    animation-delay: 0s;
}

.person-layer-1 {
    animation-delay: 3s;
}

.person-layer-2 {
    animation-delay: 6s;
}

.person-layer-3 {
    animation-delay: 9s;
}

.person-layer-4 {
    animation-delay: 12s;
}

.person-layer-5 {
    animation-delay: 15s;
}

.person-layer-6 {
    animation-delay: 18s;
}

.person-layer-7 {
    animation-delay: 21s;
}

.person-layer-8 {
    animation-delay: 24s;
}

.person-layer-9 {
    animation-delay: 27s;
}

/* =========================================
   3.3 COUNT-SPECIFIC LOGIC (3 - 10 ITEMS)
   
   Easing Logic:
   - Entry: cubic-bezier(0.25, 0.8, 0.25, 1) -> Smooth Ease Out
   - Exit:  cubic-bezier(0.6, 0, 0.7, 0.1)   -> Aggressive Ease In (Accel)
   ========================================= */

/* --- COUNT 3 (Total: 9s) --- */
.count-3 .person-layer {
    animation-name: carousel-3;
    animation-duration: 9s;
}

@keyframes carousel-3 {
    0% {
        opacity: 0;
        transform: translateX(40%) scale(0.1);
        animation-timing-function: cubic-bezier(0.25, 0.8, 0.25, 1);
    }

    8.33% {
        opacity: 1;
        transform: translateX(0) scale(var(--centered-image-scale));
    }

    25% {
        opacity: 1;
        transform: translateX(0) scale(var(--centered-image-scale));
        animation-timing-function: cubic-bezier(0.6, 0, 0.7, 0.1);
    }

    33.33% {
        opacity: 0;
        transform: translateX(-50%) scale(4);
    }

    100% {
        opacity: 0;
        transform: translateX(-50%) scale(4);
    }
}

/* --- COUNT 4 (Total: 12s) --- */
.count-4 .person-layer {
    animation-name: carousel-4;
    animation-duration: 12s;
}

@keyframes carousel-4 {
    0% {
        opacity: 0;
        transform: translateX(40%) scale(0.1);
        animation-timing-function: cubic-bezier(0.25, 0.8, 0.25, 1);
    }

    6.25% {
        opacity: 1;
        transform: translateX(0) scale(var(--centered-image-scale));
    }

    18.75% {
        opacity: 1;
        transform: translateX(0) scale(var(--centered-image-scale));
        animation-timing-function: cubic-bezier(0.6, 0, 0.7, 0.1);
    }

    25% {
        opacity: 0;
        transform: translateX(-50%) scale(4);
    }

    100% {
        opacity: 0;
        transform: translateX(-50%) scale(4);
    }
}

/* --- COUNT 5 (Total: 15s) --- */
.count-5 .person-layer {
    animation-name: carousel-5;
    animation-duration: 15s;
}

@keyframes carousel-5 {
    0% {
        opacity: 0;
        transform: translateX(40%) scale(0.1);
        animation-timing-function: cubic-bezier(0.25, 0.8, 0.25, 1);
    }

    5% {
        opacity: 1;
        transform: translateX(0) scale(var(--centered-image-scale));
    }

    15% {
        opacity: 1;
        transform: translateX(0) scale(var(--centered-image-scale));
        animation-timing-function: cubic-bezier(0.6, 0, 0.7, 0.1);
    }

    20% {
        opacity: 0;
        transform: translateX(-50%) scale(4);
    }

    100% {
        opacity: 0;
        transform: translateX(-50%) scale(4);
    }
}

/* --- COUNT 6 (Total: 18s) --- */
.count-6 .person-layer {
    animation-name: carousel-6;
    animation-duration: 18s;
}

@keyframes carousel-6 {
    0% {
        opacity: 0;
        transform: translateX(40%) scale(0.1);
        animation-timing-function: cubic-bezier(0.25, 0.8, 0.25, 1);
    }

    4.17% {
        opacity: 1;
        transform: translateX(0) scale(var(--centered-image-scale));
    }

    12.5% {
        opacity: 1;
        transform: translateX(0) scale(var(--centered-image-scale));
        animation-timing-function: cubic-bezier(0.6, 0, 0.7, 0.1);
    }

    16.67% {
        opacity: 0;
        transform: translateX(-50%) scale(4);
    }

    100% {
        opacity: 0;
        transform: translateX(-50%) scale(4);
    }
}

/* --- COUNT 7 (Total: 21s) --- */
.count-7 .person-layer {
    animation-name: carousel-7;
    animation-duration: 21s;
}

@keyframes carousel-7 {
    0% {
        opacity: 0;
        transform: translateX(40%) scale(0.1);
        animation-timing-function: cubic-bezier(0.25, 0.8, 0.25, 1);
    }

    3.57% {
        opacity: 1;
        transform: translateX(0) scale(var(--centered-image-scale));
    }

    10.71% {
        opacity: 1;
        transform: translateX(0) scale(var(--centered-image-scale));
        animation-timing-function: cubic-bezier(0.6, 0, 0.7, 0.1);
    }

    14.29% {
        opacity: 0;
        transform: translateX(-50%) scale(4);
    }

    100% {
        opacity: 0;
        transform: translateX(-50%) scale(4);
    }
}

/* --- COUNT 8 (Total: 24s) --- */
.count-8 .person-layer {
    animation-name: carousel-8;
    animation-duration: 24s;
}

@keyframes carousel-8 {
    0% {
        opacity: 0;
        transform: translateX(40%) scale(0.1);
        animation-timing-function: cubic-bezier(0.25, 0.8, 0.25, 1);
    }

    3.13% {
        opacity: 1;
        transform: translateX(0) scale(var(--centered-image-scale));
    }

    9.38% {
        opacity: 1;
        transform: translateX(0) scale(var(--centered-image-scale));
        animation-timing-function: cubic-bezier(0.6, 0, 0.7, 0.1);
    }

    12.5% {
        opacity: 0;
        transform: translateX(-50%) scale(4);
    }

    100% {
        opacity: 0;
        transform: translateX(-50%) scale(4);
    }
}

/* --- COUNT 9 (Total: 27s) --- */
.count-9 .person-layer {
    animation-name: carousel-9;
    animation-duration: 27s;
}

@keyframes carousel-9 {
    0% {
        opacity: 0;
        transform: translateX(40%) scale(0.1);
        animation-timing-function: cubic-bezier(0.25, 0.8, 0.25, 1);
    }

    2.78% {
        opacity: 1;
        transform: translateX(0) scale(var(--centered-image-scale));
    }

    8.33% {
        opacity: 1;
        transform: translateX(0) scale(var(--centered-image-scale));
        animation-timing-function: cubic-bezier(0.6, 0, 0.7, 0.1);
    }

    11.11% {
        opacity: 0;
        transform: translateX(-50%) scale(4);
    }

    100% {
        opacity: 0;
        transform: translateX(-50%) scale(4);
    }
}

/* --- COUNT 10 (Total: 30s) --- */
.count-10 .person-layer {
    animation-name: carousel-10;
    animation-duration: 30s;
}

@keyframes carousel-10 {
    0% {
        opacity: 0;
        transform: translateX(40%) scale(0.1);
        animation-timing-function: cubic-bezier(0.25, 0.8, 0.25, 1);
    }

    2.5% {
        opacity: 1;
        transform: translateX(0) scale(var(--centered-image-scale));
    }

    7.5% {
        opacity: 1;
        transform: translateX(0) scale(var(--centered-image-scale));
        animation-timing-function: cubic-bezier(0.6, 0, 0.7, 0.1);
    }

    10% {
        opacity: 0;
        transform: translateX(-50%) scale(4);
    }

    100% {
        opacity: 0;
        transform: translateX(-50%) scale(4);
    }
}

/* --- Caption Styles --- */
.person-name-caption {
    /* Absolute position removes this from the flex flow 
       so it doesn't push the image around. */
    position: absolute;
    /* Position it near the bottom of the layer.
       Since the layer scales from the bottom, this stays grounded. */
    bottom: 2%;
    left: 50%;
    /* Center it horizontally relative to the layer */
    transform: translateX(-50%);
    /* Ensure it sits on top of the image */
    z-index: 10;
    /* Sizing constraints for the SVG container */
    width: 80%; /* Adjust width as needed */
    max-width: 700px;
    height: auto;
    /* Optional: Slight drop shadow to make white text pop against photos */
    filter: drop-shadow(0px 2px 4px rgba(0,0,0,0.8));
}

.name-svg {
    width: 100%;
    height: auto;
    display: block;
}

/* used to prevent animation reload on client render */
.scene-container:not(.scene-loaded) .person-layer {
    animation: none !important;
    opacity: 0 !important;
}


/* Loading Splash */

/* Loading Splash Overlay */

/* Loading Splash Overlay */
.splash-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100dvh;
    background-color: #ffffff;
    z-index: 20000;
    display: flex;
    align-items: center;
    justify-content: center;
    /* ANIMATION LOGIC: 
       1. Run the 'fadeOut' animation
       2. Take 1 second to complete the fade
       3. Wait 2.5 seconds before starting (the loading delay)
       4. 'forwards' means stay invisible after it finishes
    */
    animation: fadeOut 1s ease-out 2.5s forwards;
    /* Ensure it is visible initially */
    opacity: 1;
    visibility: visible;
    pointer-events: auto; /* Blocks clicks initially */
}

.splash-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2rem;
}

.splash-logo {
    width: 50vw;
    height: auto;
    /* Optional: Keep the logo pulsing while waiting */
    animation: pulse 2s infinite ease-in-out;
}

.splash-spinner {
    width: 40px;
    height: 40px;
    border: 4px solid #f3f3f3;
    border-top: 4px solid #5500ff;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

/* --- KEYFRAMES --- */

/* The fade out animation */
@keyframes fadeOut {
    0% {
        opacity: 1;
        visibility: visible;
    }

    99% {
        opacity: 0;
        visibility: visible;
    }

    100% {
        opacity: 0;
        visibility: hidden;
        pointer-events: none; /* Allows clicking through after it's gone */
    }
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

@keyframes pulse {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.05);
    }

    100% {
        transform: scale(1);
    }
}


/* ========================================= */
/* 4 Contact Form                            */
/* ========================================= */

/* Contact Form Container */
.contact-container {
    min-height: calc(100vh - 4.5rem);
    max-width: 650px;
    width: 100%;
    margin: 0rem auto;
    padding: 1rem 2rem;
    background-color: var(--primary-darkest);
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
    font-family: var(--font-main);
    color: var(--text-neutral);
    display: flex;
    flex-direction: column;
}

    /* THE FIX: Override global form max-width (420px) so it fills the 650px container */
    .contact-container form {
        max-width: 100%;
        width: 100%;
        /* Ensure the form takes up available vertical space for the flex-grow to work */
        display: flex;
        flex-direction: column;
        flex-grow: 1;
    }

    .contact-container h2 {
        margin-top: 0;
        margin-bottom: 1.5rem;
        text-align: center;
        color: var(--primary-lightest);
        text-transform: var(--header-text-transform);
        letter-spacing: 2px;
    }

/* Compact Grid Row for Name/Email/Phone */
.compact-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 1.5rem;
}

/* Form Groups */
.form-group {
    margin-bottom: 0.75rem;
    display: flex;
    flex-direction: column;
}

    .form-group label {
        margin-bottom: 0.25rem;
        font-weight: 600;
        font-size: 0.85rem;
        color: var(--primary-light);
    }

/* Overriding Global Input Styles */
.contact-container .form-control {
    padding: 0.5rem;
    font-size: 0.95rem;
    background-color: var(--background);
}

/* Message Box Specifics */
.message-group {
    /* Push this group to fill remaining vertical space */
    flex-grow: 1;
    margin-top: 0.5rem;
    margin-bottom: 1.5rem;
    display: flex;
    flex-direction: column;
}

.message-box {
    /* Make the textarea fill the flex parent height */
    height: 100%;
    min-height: 200px;
    resize: none;
}

/* Validation Messages */
.validation-message {
    color: var(--failure-light);
    font-size: 0.8rem;
    margin-top: 0.1rem;
}

/* Captcha specific */
.captcha-group {
    background-color: var(--background);
    padding: 0.75rem;
    border-radius: 2px;
    border-left: 4px solid var(--secondary-med);
    border: 1px solid var(--dark-border);
    border-left-width: 4px;
    margin-bottom: 1.5rem;
}

.captcha-input {
    width: 80px;
    background-color: var(--primary-darkest) !important;
}

/* Submit Button */
.btn-submit {
    display: block;
    width: 100%;
    padding: 0.75rem;
    background-color: var(--secondary-med);
    color: var(--primary-lightest);
    border: none;
    border-radius: 2px;
    font-size: 1.1rem;
    font-family: var(--font-main);
    text-transform: var(--header-text-transform);
    letter-spacing: 1.5px;
    cursor: pointer;
    transition: all 0.2s ease-in-out;
}

    .btn-submit:hover {
        background-color: var(--secondary-dark);
        filter: brightness(1.1);
    }

/* Responsive: Mobile Adjustments */
@media (max-width: 650px) {
    .contact-container {
        /* On small screens, allow height to grow if content needs it */
        height: auto;
        min-height: calc(100vh - 4.5rem);
    }

    .compact-row {
        grid-template-columns: 1fr;
        gap: 0;
    }
}

.captcha-row {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-top: 0.25rem;
}

.captcha-img {
    height: 50px;
    border: 1px solid #ddd;
    border-radius: 4px;
    /* Optional: prevent dragging/selecting image */
    user-select: none;
    -webkit-user-drag: none;
}

/* ========================================= */
/* 5 Status Modal                            */
/* ========================================= */

.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.7); /* Dimmed background */
    z-index: 1000;                                                  /* Tier 4: Modal Layer */
    display: flex;
    justify-content: center;
    align-items: center;
    backdrop-filter: blur(4px); /* Optional: blurs the background slightly */
}

.modal-box {
    background-color: var(--primary-darkest);
    border: 1px solid var(--dark-border);
    padding: 2rem;
    border-radius: 4px;
    width: 90%;
    max-width: 400px;
    text-align: center;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
    font-family: var(--font-main);
    color: var(--text-neutral);
    animation: fadeIn 0.3s ease-out;
}

    .modal-box h3 {
        margin-top: 0;
        text-transform: var(--header-text-transform);
        letter-spacing: 1.5px;
    }

    .modal-box p {
        margin-bottom: 2rem;
        line-height: 1.5;
    }

/* Variant Styling */
.modal-success {
    border-top: 4px solid var(--success-med);
}

    .modal-success h3 {
        color: var(--success-light);
    }

.modal-error {
    border-top: 4px solid var(--failure-med);
}

    .modal-error h3 {
        color: var(--failure-light);
    }

/* Modal Button */
.btn-modal {
    background-color: var(--secondary-med);
    color: var(--primary-lightest);
    border: none;
    padding: 0.75rem 2rem;
    border-radius: 2px;
    cursor: pointer;
    font-family: var(--font-main);
    text-transform: uppercase;
    font-weight: bold;
    transition: filter 0.2s;
}

    .btn-modal:hover {
        filter: brightness(1.2);
    }

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ========================================= */
/* 6 Hamburger Button                        */
/* ========================================= */
.hamburger-container {
    position: relative;
    display: inline-block;
    z-index: 100;                                           /* Tier 2: Navigation */
    text-transform: uppercase;
}

/* The Button */
.hamburger-btn {
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0.5rem;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    width: 3rem;
    height: 3rem;
    transition: all 0.3s ease;
}

    .hamburger-btn:hover {
        background-color: rgba(255,255,255, 0.1);
        border-radius: 4px;
    }

/* The 3 Lines */
.bar {
    width: 100%;
    height: 0.3rem;
    background-color: #fff;
    border-radius: 2px;
    transition: all 0.3s ease;
}

/* Transform to X when open */

/* 1. Top Bar: Snap to center using Absolute Positioning */
.hamburger-btn.active .bar:nth-child(1) {
    position: absolute;
    top: 50%; /* Move to vertical center */
    left: 0.5rem; /* Match your button's left padding */
    right: 0.5rem; /* Match your button's right padding */
    width: auto; /* Let left/right control the width */
    transform: translateY(-50%) rotate(45deg); /* Center perfectly and rotate */
}

/* 2. Middle Bar: Fade out */
.hamburger-btn.active .bar:nth-child(2) {
    opacity: 0;
}

/* 3. Bottom Bar: Snap to center using Absolute Positioning */
.hamburger-btn.active .bar:nth-child(3) {
    position: absolute;
    top: 50%;
    left: 0.5rem;
    right: 0.5rem;
    width: auto;
    transform: translateY(-50%) rotate(-45deg);
}

/* The Dropdown Menu */
.nav-dropdown {
    min-width: 30vw;
    position: absolute;
    top: 100%;
    right: 0;
    width: 200px;
    background-color: #1a1a1a; /* Dark Theme Bg */
    border: 1px solid #333;
    border-radius: 4px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.5);
    display: flex;
    flex-direction: column;
    padding: 0.5rem 0;
    margin-top: 0.0rem;
    animation: slideDown 0.2s ease-out;
    z-index: 200;                               /* Tier 2: Navigation Dropdown */
}

/* Navigation Links */
.nav-item {
    padding: 0.75rem 1.5rem;
    color: #fff;
    text-decoration: none;
    font-size: 1.1rem;
    transition: background-color 0.2s;
    border-left: 3px solid transparent;
}

    .nav-item:hover {
        background-color: #333;
        border-left: 3px solid #ff0000; /* Optional: Red accent on hover */
        color: #fff;
    }

    /* Active Page Style */
    .nav-item.active {
        background-color: #2a2a2a;
        border-left: 3px solid #fff;
        font-weight: bold;
    }

@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.logout-btn {
    width: 100%;
    text-align: left;
    background: transparent;
    border: none;
    cursor: pointer;
    /* Inherit font settings from .nav-item */
    font-family: inherit;
    font-size: 1.1rem;
    color: #fff;
    /* Ensure padding matches .nav-item exactly */
    padding: 0.75rem 1.5rem;
}

    /* Ensure hover effect works on the button too */
    .logout-btn:hover {
        background-color: #333;
        border-left: 3px solid #ff0000;
        color: #fff;
    }

/* ========================================= */
/* 7. ADMIN INTERFACE (SCOPED & SAFE)        */
/* ========================================= */

/* Main Container */
.admin-container {
    padding: 0.5rem;
    width: 98%;
    max-width: none;
    margin: 0 auto;
    color: var(--text-neutral);
    font-family: var(--font-main);
    min-height: calc(100dvh - 4.5rem);
}

    .admin-container h2 {
        color: var(--primary-lightest);
        text-transform: var(--header-text-transform);
        letter-spacing: 1px;
        border-bottom: 1px solid var(--secondary-med);
        padding-bottom: 0.25rem;
        margin-bottom: 0.5rem;
        font-size: 1.1rem;
        margin-top: 0;
    }

    /* --- Search Bar --- */
    .admin-container .filter-bar {
        display: flex;
        gap: 0.5rem;
        margin-bottom: 0.5rem;
        align-items: center;
        background-color: var(--primary-darkest);
        padding: 0.25rem;
        border: 1px solid var(--dark-border);
    }

    .admin-container .search-input {
        max-width: 300px;
        background-color: var(--background);
        padding: 0.25rem 0.5rem;
        font-size: 0.85rem;
        height: 2rem;
    }

    /* --- Data Table --- */
    .admin-container .table-responsive {
        overflow-x: auto;
    }

.user-table {
    width: 100%;
    border-collapse: collapse;
    background-color: var(--background-light);
    border: 1px solid var(--dark-border);
    font-size: 0.8rem;
}

    .user-table th, .user-table td {
        text-align: left;
        padding: 0.25rem 0.5rem;
        border-bottom: 1px solid var(--dark-border);
        border-right: 1px solid rgba(255,255,255,0.05);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 300px;
    }

    .user-table th {
        background-color: var(--primary-darkest);
        color: var(--secondary-light);
        font-weight: bold;
        text-transform: uppercase;
        border-bottom: 1px solid var(--secondary-med);
        height: 2rem;
    }

    .user-table tr:hover td {
        background-color: rgba(255, 255, 255, 0.1);
        cursor: default;
    }

/* ID Link Styling */
.id-link {
    color: var(--primary-light);
    cursor: pointer;
    text-decoration: none;
    font-weight: bold;
    font-family: 'Courier New', monospace;
}

    .id-link:hover {
        color: var(--secondary-light);
        text-decoration: underline;
    }

/* ========================================= */
/* 7.1 MOBILE TABLE (STACKED CARDS)          */
/* ========================================= */

@media screen and (max-width: 768px) {
    .user-table thead {
        display: none;
    }

    .user-table tr {
        display: block;
        margin-bottom: 1rem;
        background-color: var(--primary-darkest);
        border: 1px solid var(--secondary-med);
        border-radius: 4px;
        box-shadow: 0 2px 4px rgba(0,0,0,0.2);
    }

    .user-table td {
        display: flex;
        justify-content: space-between;
        align-items: center;
        text-align: right;
        padding: 0.75rem;
        border-bottom: 1px solid var(--dark-border);
        min-height: 2.5rem;
        max-width: none;
        white-space: normal;
    }

        .user-table td:last-child {
            border-bottom: none;
        }

        .user-table td::before {
            content: attr(data-label);
            float: left;
            font-weight: bold;
            text-transform: uppercase;
            color: var(--secondary-light);
            font-size: 0.75rem;
            margin-right: 1rem;
        }

    .id-link {
        word-break: break-all;
    }
}

/* ========================================= */
/* 7.2 EDIT USER MODAL (STRICTLY SCOPED)     */
/* ========================================= */

/* Modal Backdrop */
.modal-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(2px);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;                      /* Tier 4: Modal Backdrop */
}

/* Card Container */
.user-card {
/*    max-width: 800px;
    width: 95%;*/
    min-width: 70vw;
    max-width: 95vw;
    background-color: var(--primary-darkest);
    border: 1px solid var(--secondary-med);
    box-shadow: 0 10px 40px rgba(0,0,0,0.7);
    padding: 0.25rem;
    display: flex;
    flex-direction: column;
    gap: .5rem;
    max-height: 95vh;
    overflow-y: auto;
    color: var(--text-neutral);
}

    /* Header Tweaks */
    .user-card .card-header {
        display: grid;
        grid-template-columns: 1fr auto;
        align-items: center;
        margin-bottom: 0;
        padding-bottom: 0;
        border-bottom: none;
        min-height: auto;
        padding-left: 0.25rem;
    }

        .user-card .card-header h3 {
            margin: 0;
            color: var(--primary-lightest);
            font-size: 1rem;
            text-transform: uppercase;
        }

        .user-card .card-header button{
            padding: 0rem;
            border: none;
        }

    /* Box Container */
    .user-card .edit-section {
        position: relative;
        border: 1px solid var(--dark-border);
        padding: 1rem 0.75rem 0.75rem 0.75rem;
        background: rgba(255,255,255,0.01);
        display: flex;
        flex-direction: column;
        gap: 0.75rem;
        margin-top: 0.25rem;
    }

    /* Floating Title */
    .user-card .edit-section-title {
        position: absolute;
        top: -0.8em;
        left: 0.75rem;
        background-color: var(--primary-darkest);
        padding: 0 0.35rem;
        color: var(--secondary-light);
        font-size: 0.7rem;
        font-weight: bold;
        text-transform: uppercase;
        letter-spacing: 1px;
        line-height: 1;
    }

    /* Grids */
    .user-card .grid-2 {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 0.75rem;
    }

    .user-card .grid-contact {
        display: grid;
        grid-template-columns: 1fr auto;
        gap: 0.5rem;
        align-items: end;
    }

    /* --- VITAL FIX: Scope these inputs to .user-card ONLY --- */

    .user-card .form-group {
        display: flex;
        flex-direction: column;
        gap: 0.2rem;
        margin-bottom: 0;
    }

        .user-card .form-group label {
            color: var(--text-neutral);
            font-size: 0.7rem;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            opacity: 0.8;
            margin: 0;
            text-align: left;
        }

    .user-card .form-control {
        width: 100%;
        background-color: var(--background);
        border: 1px solid var(--dark-border);
        padding: 0.25rem 0.5rem;
        font-size: 0.9rem;
        height: 2.25rem;
        color: white;
        resize: vertical;
    }

        .user-card .form-control:focus {
            border-color: var(--secondary-med);
            outline: none;
        }

    /* Checkbox/Toggle Button */
    .user-card .toggle-box {
        height: 2.25rem;
        display: flex;
        align-items: center;
        gap: 0.4rem;
        padding: 0 0.5rem;
        border: 1px solid var(--dark-border);
        background-color: rgba(255,255,255,0.02);
        border-radius: 2px;
        cursor: pointer;
        white-space: nowrap;
    }

        .user-card .toggle-box:hover {
            border-color: var(--secondary-light);
            background-color: rgba(255,255,255,0.05);
        }

        .user-card .toggle-box input {
            accent-color: var(--secondary-med);
            width: 0.9rem;
            height: 0.9rem;
            cursor: pointer;
        }

        .user-card .toggle-box span {
            font-size: 0.75rem;
            font-weight: bold;
            color: var(--secondary-light);
        }

    /* Roles */
    .user-card .roles-flex {
        display: flex;
        flex-wrap: wrap;
        gap: 0.5rem;
    }

    .user-card .role-item {
        display: grid;
        align-items: center;
        grid-template-columns: auto 1fr;
        gap: 0.35rem;
        font-size: 0.75rem;
        background: rgba(0,0,0,0.2);
        padding: 0.15rem 0.4rem;
        border-radius: 3px;
        border: 1px solid transparent;
        cursor: pointer;
        color: var(--text-neutral);
    }

        .user-card .role-item:hover {
            border-color: var(--secondary-med);
        }

    /* ID Field */
    .user-card .id-header {
        font-family: 'ShareTechMono', monospace;
        color: var(--primary-med);
        font-size: 0.8rem;
        text-align: center;
        margin-bottom: 0.25rem;
        opacity: 0.7;
        word-break: break-all;
    }

    /* Action Buttons specific to modal */
    .user-card .action-buttons {
        display: flex;
        gap: 10px;
        margin-top: 0.35rem;
        padding-top: 0.5rem;
        width: 100%;
        /* Prevent wrapping so they stay on one line */
        flex-wrap: nowrap;
    }

        /* 1. RESET WIDTH (Crucial Fix) */
        .user-card .action-buttons button {
            width: auto; /* <--- This overrides the global 100% width */
            height: 50px;
            display: flex;
            align-items: center;
            justify-content: center;
            white-space: nowrap;
            padding: 0 1.25rem; /* Comfortable padding */
        }

        /* 2. Delete & Cancel: Compact */
        /* flex: 0 0 auto = Don't grow, don't shrink, size based on text */
        .user-card .action-buttons .btn-delete,
        .user-card .action-buttons .btn-secondary {
            flex: 0 0 auto;
            min-width: 100px;
            font-size: 0.9rem;
        }

        /* 3. Save Button: Dominant */
        /* flex: 1 1 auto = Grow to fill space, shrink if necessary */
        .user-card .action-buttons .btn-primary {
            flex: 1 1 auto;
            font-size: 1.1rem;
            font-weight: bold;
            text-transform: uppercase;
            letter-spacing: 1px;
        }

        /* 4. "Are you sure?" text alignment */
        .user-card .action-buttons span {
            align-self: center;
            white-space: nowrap;
            font-weight: bold;
            margin-right: 0.5rem;
        }

    .user-card .btn-secondary,
    .user-card .btn-primary {
        font-size: 0.8rem;
        padding: 0.35rem 0.75rem;
        height: auto;
        width: auto;
        min-width: 60px;
    }

    .user-card .card-header .btn-secondary {
        padding: 0.1rem 0.5rem;
        min-width: auto;
    }

.card-header-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.btn-header-action {
    padding: 0.25rem;
}

.btn-header-chat {
    padding: 0.5rem;
}

/* ========================================= */
/* 7. Collaboration Interfaces               */
/* ========================================= */

/* --- Clickable Rows --- */
.clickable-row {
    cursor: pointer;
    transition: background-color 0.15s;
}

    .clickable-row:hover td {
        background-color: rgba(255, 255, 255, 0.1);
        color: var(--secondary-light);
    }

.non-clickable-row{
    /* EMPTY ON PURPOSE - used when disabling click on rows */
}

/* --- Tabs inside Modal --- */
.tabs-row {
    display: flex;
    gap: 0.5rem;
    border-bottom: 1px solid var(--dark-border);
}

.btn-tab {
    background: transparent;
    border: none;
    color: var(--text-neutral);
    /*padding: 0.5rem 1rem;*/
    cursor: pointer;
    border-bottom: 2px solid transparent;
    font-family: var(--font-main);
    text-transform: uppercase;
    font-size: 0.85rem;
}

    .btn-tab:hover {
        color: var(--secondary-light);
    }

    .btn-tab.active {
        color: var(--secondary-light);
        border-bottom-color: var(--secondary-med);
        font-weight: bold;
    }

    .btn-tab.disabled {
        background: transparent;
        border: none;
        color: var(--text-neutral);
        padding: 0.5rem 1rem;
        cursor: pointer;
        border-bottom: 2px solid transparent;
        font-family: var(--font-main);
        text-transform: uppercase;
        font-size: 0.85rem;
    }

/* ========================================= */
/* 8 Playlist Portal                         */
/* ========================================= */

.add-song-bar {
    display: flex;
    gap: 0.5rem;
    align-items: center; /* Vertically aligns dropdown and button */
    margin-bottom: 1rem;
    padding: 0.5rem;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 4px;
}

    /* Ensures the dropdown takes up the available space */
    .add-song-bar select {
        flex: 1;
    }

    /* Keeps the button from stretching */
    .add-song-bar .btn-primary {
        width: auto;
        white-space: nowrap;
    }

.btn-playlist-play{
    padding: 0.25rem;
    width: initial;
}

/* --- Sortable Song List Grid --- */
.song-sortable-list {
    display: flex;
    flex-direction: column;
    gap: 2px;
    width: 100%;
    margin-top: 0.5rem;
}

/* Grid Definition: Handle | Seq | Title | Artist | Key | BPM | Actions */
.song-grid-row {
    display: grid;
    /* Fixed widths for small items, Flex for text fields */
    grid-template-columns: 30px 40px 2fr 1.5fr 60px 50px 60px;
    align-items: center;
    padding: 8px 12px;
    border-radius: 4px;
    background: rgba(255,255,255,0.03);
    border: 1px solid transparent;
    transition: background 0.1s;
    gap: 10px;
}

.song-grid-header {
    background: transparent;
    font-weight: bold;
    color: var(--secondary-light); /* Matching your theme */
    text-transform: uppercase;
    font-size: 0.75rem;
    border-bottom: 1px solid var(--dark-border);
    border-radius: 0;
    padding-bottom: 5px;
    margin-bottom: 5px;
}

.song-draggable-row {
    cursor: grab;
    user-select: none;
}

    .song-draggable-row:hover {
        background: rgba(255,255,255,0.08);
        border-color: #444;
    }

    .song-draggable-row.is-dragging {
        opacity: 0.5;
        background: #000;
        border: 1px dashed #666;
    }

.drag-handle-icon {
    color: #555;
    cursor: grab;
    display: flex;
    justify-content: center;
}

.song-draggable-row:hover .drag-handle-icon {
    color: var(--primary-light);
}

/* Mobile Tweak for the Grid */
@media (max-width: 768px) {
    .song-grid-row {
        /* Hide Key/BPM on small screens if needed, or adjust columns */
        grid-template-columns: 30px 30px 1fr 1fr 40px;
    }
        /* Hide specific columns if space is tight */
        .song-grid-row > div:nth-child(5), /* Key */
        .song-grid-row > div:nth-child(6) /* BPM */ {
            display: none;
        }
}

/* Specific Column Styles */
.song-col-header-action {
    text-align: right;
}

.song-seq-text {
    color: #888;
    font-size: 0.9rem;
}

.song-title-text {
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding-right: 10px;
}

.song-artist-text {
    color: #aaa;
    font-size: 0.9rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding-right: 10px;
}

.song-meta-text {
    color: #ccc;
    font-size: 0.85rem;
}

.song-actions-cell {
    display: flex;
    justify-content: flex-end;
}

/* Small Delete Button */
.btn-small-delete {
    padding: 0.25rem 0.5rem;
    font-size: 0.7rem;
    width: auto;
}

/* --- Playlist Portal Specifics --- */

/* The Add button next to the dropdown */
.btn-add-song {
    width: auto;
    white-space: nowrap;
}

/* "Delete this playlist?" text */
.delete-confirm-text {
    align-self: center;
    font-size: 0.9rem;
}

.add-song-bar {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    margin-bottom: 1rem;
    padding: 0.5rem;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 4px;
    flex-wrap: wrap;
}

    /* Base style for selects */
    .add-song-bar select {
        min-width: 140px;
    }

        /* 1. Artist Dropdown: Standard Width (Flex 1) */
        .add-song-bar select:first-child {
            flex: 1;
        }

        /* 2. Song Dropdown: Double Width (Flex 2) to show full titles */
        .add-song-bar select:nth-child(2) {
            flex: 2;
        }

    /* 3. Add Button: No grow, auto width */
    .add-song-bar .btn-add-song {
        flex: 0 0 auto;
    }

/* ========================================= */
/* 9 Song Portal                             */
/* ========================================= */

.lyrics-display {
    white-space: pre-wrap; /* Preserves your line breaks */
    font-family: 'Courier New', monospace; /* Classic monospaced look */
    font-size: 0.85rem; /* <--- Smaller text to prevent wrapping */
    line-height: 1.4; /* Tighter lines for better scanning */
    background: rgba(255, 255, 255, 0.03);
    padding: 1.5rem; /* More padding inside the box */
    border-radius: 4px;
    border: 1px solid var(--dark-border);
    color: var(--text-neutral);
    max-height: 60vh; /* Prevent it from getting too tall */
    overflow-y: auto; /* Scroll if the song is epic */
}

textarea.song-detail-notes,
textarea.playlist-detail-notes{
    min-height: 8rem;
}

.version-header-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}

.btn-action-auto {
    width: auto;
    padding: 0.25rem 1rem;
}

.lyrics-edit-container {
    border: 1px solid var(--secondary-med);
    padding: 1rem;
    border-radius: 4px;
    background: rgba(0, 0, 0, 0.2);
}

.lyrics-editor-textarea {
    min-height: 300px;
    font-family: monospace;
}

/* ========================================= */
/* 10 Commenting                             */
/* ========================================= */

/* --- Comments --- */
.discussion-panel {
    font-family: Inter;
    /* Make the panel a flex column */
    display: flex;
    flex-direction: column;
    /* Force a fixed height relative to the modal so it fits */
    max-height: 70dvh;
    /* Remove old overflow, we handle it inside now */
    overflow: hidden;
}

/* The Scrollable List Area */
.discussion-list {
    flex: 1; /* Fill all available space */
    overflow-y: auto; /* Scroll vertically if needed */
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    padding-right: 0.5rem; /* Space for scrollbar */
    margin-bottom: 1rem;
}

/* The Sticky Input Area */
.discussion-footer {
    flex-shrink: 0; /* Do not shrink */
    background-color: var(--primary-darkest); /* Matches modal bg */
    z-index: 5;
}

    /* Minor tweak to textarea for the footer */
    .discussion-footer textarea {
        min-height: 5rem; /* Shorter default for chat input */
        resize: none; /* distinct from the main notes field */
    }

.comment-bubble {
    background-color: rgba(255, 255, 255, 0.05);
    padding: 0.2rem;
    border-radius: 4px;
    border-left: 2px solid var(--secondary-dark);
    min-width: 0; /* Prevents flex overflow */
}

/* 1. Main Header Container */
.comment-header {
    display: flex;
    flex-direction: row; /* Force horizontal row */
    justify-content: space-between; /* Pushes Info to Left, Button to Right */
    align-items: center; /* Vertically center the button */
    margin-bottom: 0.25rem;
}

.comment-text {
    font-size: 0.75rem;
    white-space: pre-wrap;
    /* 2. Force text to wrap if it hits the edge */
    word-wrap: break-word;
    overflow-wrap: break-word;
}

.comment-info {
    display: flex;
    flex-direction: row;
    align-items: baseline;
    gap: 0.75rem;
    min-width: 0;
}

.comment-author {
    font-weight: bold;
    font-size: 0.75rem;
    color: var(--secondary-light);
    /* Keep it on one line */
    white-space: nowrap;
}

.comment-date {
    font-size: 0.7rem;
    opacity: 0.7;
    white-space: nowrap;
    flex-shrink: 0; /* Never crush the date */
}

/* --- Comment Replies --- */
/* The box containing the parent preview */
.reply-context-bar {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 0.2rem;
    opacity: 0.8;
    cursor: pointer;
    font-size: 0.6rem;
    background: var(--primary-darkest);
    padding: 0.1rem 0.1rem;
    border-radius: 4px;
    align-items: flex-start;
}

    .reply-context-bar:hover {
        opacity: 1;
        background: rgba(255,255,255,0.05);
    }

/* The vertical "hook" line visual */
.reply-line-indicator {
    width: 3px;
    min-height: 100%;
    background-color: var(--secondary-med);
    border-radius: 2px;
    margin-right: 2px;
}

.reply-content {
    display: flex;
    flex-direction: row;
    column-gap: 0.5rem;
    width: 100%;
}

.reply-author {
    font-weight: bold;
    color: var(--secondary-light);
    margin-bottom: 2px;
}

.reply-preview {
    color: var(--text-neutral);
    font-style: italic;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.reply-full-text {
    color: var(--text-neutral);
    margin-top: 2px;
    padding-top: 2px;
    border-top: 1px solid rgba(255,255,255,0.1);
    white-space: pre-wrap;
}

/* --- UI Controls --- */
.btn-icon-small {
    text-align: right;
    max-width: 3rem;
    background: transparent;
    border: none;
    color: var(--text-neutral);
    cursor: pointer;
    font-size: 0.75rem;
    padding: 0 0.25rem;
    opacity: 0.5;
    line-height: 1; /* Fixes vertical alignment quirks */
}

    .btn-icon-small:hover {
        opacity: 1;
        color: var(--secondary-light);
    }

.replying-to-banner {
    background-color: var(--secondary-dark); /* Distinct color */
    color: var(--secondary-lightest);
    padding: 0.25rem 0.5rem;
    border-radius: 4px 4px 0 0; /* Attach to top of textarea */
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.8rem;
    margin-bottom: -1px; /* Fuse with textarea */
}

.btn-close-small {
    background: transparent;
    border: none;
    color: inherit;
    font-weight: bold;
    cursor: pointer;
}

/* ========================================= */
/* 11 Global Audio Player                    */
/* ========================================= */

.custom-player-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 72px;
    background: #1a1a1a;
    border-top: 1px solid #333;
    display: flex;
    flex-direction: column;
    z-index: 500;                               /* Tier 3: App UI (Below Modals) */
    box-shadow: 0 -4px 10px rgba(0,0,0,0.5);
    color: white;
}

    .custom-player-bar div.scrubber-wrapper {
        width: 100%;
        height: 6px;
        background: #000;
        position: relative;
        flex: 0 0 10px;
        margin-bottom: 10px;
    }

        .custom-player-bar div.scrubber-wrapper input.scrubber {
            position: absolute;
            top: -6px;
            left: 0;
            width: 100%;
            height: 12px;
            margin: 0;
            opacity: 0;
            cursor: pointer;
            z-index: 2;
            padding: 0px;
        }

        .custom-player-bar div.scrubber-wrapper div.scrubber-progress {
            height: 100%;
            background: var(--primary, #0d6efd);
            pointer-events: none;
            transition: width 0.1s linear;
        }

.global-player-hud {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    width: 100%;
    flex: 1;
    padding: 0 24px;
    min-width: 0;
}

.global-player-info-wrapper {
    display: flex;
    flex-direction: column;
    justify-content: center;
    overflow: hidden;
    min-width: 0;
    justify-self: start;
}

.global-player-track-name {
    font-weight: 600;
    font-size: 0.9rem;
    color: white;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: 2px;
}

.global-player-next-track-wrapper {
    font-size: 0.75rem;
    color: #999;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.global-player-on-deck-track {
    opacity: 0.7;
}

.global-player-buttons-wrapper {
    display: flex;
    gap: 24px;
    align-items: center;
    justify-self: center;
}

.global-player-icon-button {
    background: none;
    border: none;
    color: #ddd;
    cursor: pointer;
    padding: 0;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: all 0.2s;
}

    .global-player-icon-button:hover {
        transform: scale(1.1);
        color: white;
    }

.global-player-right-buttons{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    justify-items: end;
    align-items: center;
}

.global-player-queue-count{
    color: var(--primary-med);
    font-size: .75rem;
}

.queue-popup {
    position: fixed;
    bottom: 80px;
    right: 20px;
    width: 450px;
    max-height: 400px;
    overflow-y: auto;
    background: #222;
    border: 1px solid #444;
    box-shadow: 0 -4px 20px rgba(0,0,0,0.7);
    z-index: 550;                                   /* Tier 3: Player Popups (Above Player Bar) */
    color: white;
    padding: 15px;
    border-radius: 8px;
}

.queue-popup-empty {
    text-align: center;
}

    .queue-popup ul {
        list-style: none;
        padding: 0;
        margin: 0;
    }

        .queue-popup ul li {
            padding: 10px 0;
            border-bottom: 1px solid #333;
            display: flex;
            align-items: center;
            font-size: 0.9rem;
        }

            .queue-popup ul li span.queue-track-number {
                color: #666;
                margin-right: 15px;
                min-width: 25px;
            }

            .queue-popup ul li span.queue-track-title {
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
                font-weight: 500;
                margin-right: auto;
            }

            .queue-popup ul li span.queue-track-version-number {
                background: #333;
                color: #aaa;
                padding: 2px 6px;
                border-radius: 4px;
                font-size: 0.75rem;
                margin-left: 10px;
                white-space: nowrap;
            }

/* 1. Popup Container - Unchanged */
.volume-popup {
    position: fixed;
    bottom: 85px;
    right: 65px;
    background: #1a1a1a;
    border: 1px solid #333;
    border-radius: 12px;
    padding: 20px 10px;
    z-index: 550;                                   /* Tier 3: Player Popups (Above Player Bar) */
    box-shadow: 0 10px 30px rgba(0,0,0,0.8);
    transition: all 0.2s ease-in-out;
}

/* 2. Flex Wrapper - Added width safety */
.volume-control-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 5px;
    /* Increased from 50px to 60px to hold the wider hit-box safely */
    min-width: 60px;
    overflow: visible;
}

/* 3. The Track - Visually 8px, but interactively wider */
.volume-track {
    width: 8px;
    height: 150px;
    background: #333;
    border-radius: 4px;
    position: relative;
    cursor: pointer;
    touch-action: none;
}

    /* --- THE FIX: Invisible Hit-Box --- */
    /* This adds an invisible 48px wide zone centered on the track */
    .volume-track::after {
        content: '';
        position: absolute;
        top: -10px; /* Extend hit area vertically slightly */
        bottom: -10px;
        left: -20px; /* Extend hit area horizontally */
        right: -20px;
        z-index: 10; /* Sits on top to catch clicks */
    }

/* 4. The Fill - Removed transition for instant dragging */
.volume-fill {
    width: 100%;
    position: absolute;
    bottom: 0;
    left: 0;
    background: #0d6efd;
    border-radius: 4px;
    pointer-events: none; /* Let clicks pass to the track::after */
    transition: none; /* REMOVED transition to fix lag */
}

/* 5. The Handle - Larger & Recentered */
.volume-handle {
    width: 20px; /* Increased from 16px */
    height: 20px; /* Increased from 16px */
    background: #fff;
    border: 2px solid #0d6efd;
    border-radius: 50%;
    position: absolute;
    /* RE-CENTERING MATH: (Track 8px - Handle 20px) / 2 = -6px */
    left: -6px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.5);
    pointer-events: none; /* Let clicks pass to the track::after */
    transition: none; /* REMOVED transition to fix lag */
}

/* Hover effect for feedback */
.volume-track:hover .volume-handle {
    transform: scale(1.1);
}

.volume-label {
    font-size: 0.7rem;
    color: #888;
    font-weight: bold;
    user-select: none;
}

/* Disable text selection for the player and all popups */
.custom-player-bar,
.queue-popup,
.volume-popup {
    -webkit-user-select: none; /* Safari */
    user-select: none; /* Standard */
    cursor: default; /* Ensures the cursor doesn't turn into a text bar */
}

/* =========================================
   AUDIO GRID (4-Column Layout)
   ========================================= */

.audio-grid {
    display: grid;
    /* 4 Columns: Type | Version | Actions | Notes */
    grid-template-columns: repeat(3, auto) 1fr;
    border: 1px solid #444;
    border-radius: 6px;
    background: #222;
    overflow: hidden;
}

/* "Unwrap" the row wrapper. 
   This makes the children (the cells) act as direct grid items. 
*/
.audio-row {
    display: contents;
}

    /* --- THE FIX: Target the CELLS, not the invisible ROW --- */
    .audio-row > div {
        padding: 10px 15px;
        border-bottom: 1px solid #333;
        /* Ensure content inside the cell aligns nicely */
        display: flex;
        align-items: center;
        color: white;
        min-height: 60px;
    }

    /* Header Cells Override */
    .audio-row > .header-cell {
        background: #333;
        font-weight: bold;
        text-transform: uppercase;
        font-size: 0.8rem;
        letter-spacing: 0.05em;
        color: #ccc;
        border-bottom: 2px solid #444;
    }

/* --- Queue Button Hover Effect --- */
.btn-queue {
    transition: filter 0.2s ease;
}

    .btn-queue:hover {
        filter: brightness(1.3);
    }

/* --- Mobile Tweak --- */
@media (max-width: 800px) {
    .audio-grid {
        display: flex;
        flex-direction: column;
    }

    .audio-row {
        /* Turn the row back into a visible block for mobile stacking */
        display: flex;
        flex-direction: column;
        border-bottom: 1px solid #444;
        padding: 10px;
    }

        /* Reset cell styles for stack view */
        .audio-row > div {
            border-bottom: none;
            padding: 5px 0;
            min-height: auto;
            width: 100%; /* Full width on mobile */
        }

        .audio-row > .header-cell {
            display: none; /* Hide headers on mobile */
        }
}

.audio-grid select.form-select-sm {
    padding: 0.2rem; /* Top | Right (room for arrow) | Bottom | Left */
}

.track-version-option {
    background-color: var(--primary-darkest);
}

.track-version-notes {
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    max-width: 8rem;
    cursor: pointer;
    color: var(--secondary-light);
}

.track-version-notes-edit-wrapper {
    display: grid;
    grid-template-rows: repeat(2, auto);
    background-color: var(--primary-darkest);
    gap: 0.25rem;
    padding: 0.25rem;
}

.track-version-notes-edit-buttons-wrapper {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.25rem;
}

/* the non-interactive div*/
.track-version-notes-display {
    padding: 0.25rem;
    border: 1px solid var(--primary-dark);

}

/* the textaera for editing*/
.track-version-notes-editor{
    resize: vertical;
    min-height: 10rem;
}


.audio-grid .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding-top: 0; /* Reset padding slightly to let flex center it */
    padding-bottom: 0;
    min-height: 28px; /* Ensure a consistent clickable height */
    margin-bottom: 0px;
}

.btn-icon-inline.disabled {
    opacity: 0.3;
    pointer-events: none; /* Prevents clicks entirely */
    cursor: default;
}

/* ========================================= */
/* 12 DropdownView Control                   */
/* ========================================= */


.dropdown-container {
    position: relative;
    display: inline-block;
    background-color: var(--primary-darkest);
}

.custom-popup {
    position: absolute;
    top: 100%; 
    left: 0;
    background: white;
    border: 1px solid #333;
    z-index: 10;
    min-width: 150px;
}

.popup-container {
    position: fixed; 
    z-index: 2000;                                  /* Tier 5: System Overlays (Must sit on top of Modals) */
    background: white;
    margin: 0;
    display: block;
}

/* ========================================= */
/* 12 Dashboard                              */
/* ========================================= */

/* --- Dashboard Layout --- */
.dashboard-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
    padding: 1rem;
    /*height: calc(100vh - 80px);*/ /* Adjust based on header */
    overflow: hidden;
}

.dashboard-col {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    height: 100%;
    overflow: hidden;
}

.dashboard-card {
    background: var(--primary-darkest);
    border: 1px solid var(--dark-border);
    border-radius: 4px;
    display: flex;
    flex-direction: column;
    flex: 1; /* Grow to fill column */
    min-height: 0; /* Allow scrolling inside */
    /*overflow: hidden;*/
}

.dashboard-header {
    padding: 0.75rem;
    background: rgba(255,255,255,0.05);
    border-bottom: 1px solid var(--dark-border);
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--primary-light);
}

.dashboard-content {
    padding: 0.5rem;
    overflow-y: auto;
    flex: 1;
}

/* --- Activity Feed Items --- */
.activity-item {
    background: rgba(255,255,255,0.02);
    border-left: 3px solid var(--secondary-med);
    padding: 0.5rem;
    margin-bottom: 0.5rem;
    font-size: 0.9rem;
}

.activity-header {
    display: flex;
    justify-content: space-between;
    font-size: 0.8rem;
    color: #888;
    margin-bottom: 0.25rem;
}

.activity-summary {
    color: var(--text-neutral);
    font-weight: 500;
}

.activity-diff-table {
    margin-top: 0.5rem;
    width: 100%;
    font-size: 0.8rem;
    border-collapse: collapse;
    background: rgba(0,0,0,0.2);
}

    .activity-diff-table td {
        padding: 2px 4px;
        border: 1px solid #444;
    }

/* --- Conversation Component --- */
.conversation-container {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 400px; /* For modal sizing */
}

.conversation-list {
    flex: 1;
    overflow-y: auto;
    padding: 0.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.conversation-footer {
    padding: 0.5rem;
    background: var(--background);
    border-top: 1px solid var(--dark-border);
}

.conversation-input {
    width: 100%;
    min-height: 60px;
    background: var(--primary-darkest);
    color: white;
    border: 1px solid var(--dark-border);
    padding: 0.5rem;
    resize: none;
}

.replying-banner {
    background: var(--secondary-dark);
    color: white;
    font-size: 0.8rem;
    padding: 0.25rem 0.5rem;
    display: flex;
    justify-content: space-between;
    margin-bottom: 2px;
    border-radius: 4px 4px 0 0;
}

.empty-state {
    text-align: center;
    color: #666;
    margin-top: 2rem;
    font-style: italic;
}

/* Mobile Stack */
@media (max-width: 900px) {
    .dashboard-grid {
        grid-template-columns: 1fr;
        height: auto;
        overflow: visible;
    }

    .dashboard-col {
        height: auto;
    }

    .dashboard-card {
        height: 400px; /* Fixed height for scrolling on mobile */
    }
}

/* ========================================= */
/* 13. Lyrics View Page                      */
/* ========================================= */
.lyrics-view-container {
    /* 1. RESET: Ensure it fills the grid slot without overflowing */
    width: 100%;
    max-width: 1000px; /* Cap width for desktop readability */
    margin: 0;
    padding: 2rem;
    background: #fff;
    color: #000;
    min-height: 100vh;
    font-family: 'Inter', sans-serif;
    /* 2. SAFETY: Prevent padding from adding to width */
    box-sizing: border-box;
}

.lyrics-header {
    border-bottom: 2px solid #000;
    margin-bottom: 2rem;
    padding-bottom: 1rem;
}

    .lyrics-header h1 {
        font-size: 2.5rem;
        margin: 0 0 0.5rem 0;
        text-transform: uppercase;
        /* Allow wrap on mobile */
        word-wrap: break-word;
    }

.lyrics-meta-row {
    display: flex;
    gap: 2rem;
    font-size: 1.1rem;
}

/* --- Playlist Header --- */
.playlist-lyrics-header {
    display: flex;
    justify-content: space-between;
    align-items: center; /* Vertically center */
    border-bottom: 2px solid #000;
    padding-bottom: 0.5rem;
    margin-bottom: 2rem;
    width: 100%;
    gap: 1rem;
}

.playlist-title-group {
    display: flex;
    align-items: baseline;
    gap: 1rem;
    flex: 1;
    min-width: 0;
    flex-wrap: wrap; /* Allow wrapping */
}

/* Replaces h2 */
.playlist-main-title {
    font-size: 1.8rem;
    font-weight: bold;
    text-transform: uppercase;
    line-height: 1.1;
    color: #000;
    margin: 0;
    /* FIX: Allow wrapping so it doesn't blow out the width */
    white-space: normal;
}

.playlist-meta {
    color: #555;
    font-size: 1.1rem;
    white-space: nowrap;
}

/* --- Song Entry Header (Inline) --- */
.song-header-inline {
    display: flex;
    align-items: baseline;
    gap: 1.5rem;
    margin-bottom: 1rem;
    flex-wrap: wrap;
}

.song-title {
    font-size: 1.5rem; /* Slightly smaller for better flow */
    font-weight: bold;
    color: #000;
    margin: 0;
    line-height: 1.2;
    /* FIX: Allow wrapping */
    white-space: normal;
    word-break: break-word;
}

.song-meta-inline {
    display: flex;
    gap: 1.5rem;
    color: #555;
    font-size: 1rem;
    font-weight: 500;
    flex-wrap: wrap;
}

/* --- Body Text --- */
.lyrics-body pre {
    white-space: pre-wrap;
    font-family: 'Inter', sans-serif;
    font-size: 1.2rem;
    line-height: 1.6;
    border: none;
    background: transparent;
    color: #000;
    padding: 0;
    margin: 0;
}

/* --- Utilities --- */
.btn-print {
    margin: 0;
    background-color: #555;
    color: #fff;
    border: none;
    padding: 0.5rem 1rem;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.9rem;
    font-weight: 600;
    width: auto;
    flex-shrink: 0;
    white-space: nowrap;
}

    .btn-print:hover {
        background-color: #333;
    }

.lyric-page-break {
    page-break-after: always;
    margin-bottom: 3rem;
    border-bottom: 1px dashed #ccc;
    padding-bottom: 2rem;
}

/* --- MOBILE OPTIMIZATIONS --- */
@media screen and (max-width: 768px) {
    .lyrics-view-container {
        /* Reduce padding to gain space */
        padding: 1rem;
        width: 100vw; /* Force full width */
    }

    /* Stack the Main Header */
    .playlist-lyrics-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
    }

    .playlist-title-group {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.25rem;
    }

    .btn-print {
        width: 100%; /* Full width button on mobile */
        text-align: center;
        padding: 0.75rem;
    }

    /* Stack the Song Info */
    .song-header-inline {
        flex-direction: column;
        gap: 0.25rem;
        margin-bottom: 0.75rem;
        border-bottom: 1px solid #eee;
        padding-bottom: 0.5rem;
    }

    .song-meta-inline {
        gap: 0.75rem;
        font-size: 0.85rem;
        color: #666;
    }

    /* Smaller text for lyrics */
    .lyrics-body pre {
        font-size: 1rem;
    }
}

@media print {
    .lyrics-view-container {
        padding: 0;
        margin: 0;
        width: 100%;
        max-width: none;
    }

    .btn-print {
        display: none;
    }

    /* Hide other UI elements */
    .custom-player-bar, .main-layout-header, .main-layout-footer {
        display: none !important;
    }
}

/* ========================================= */
/* 14. Dashboard Components                  */
/* ========================================= */

/* Main Layout: Stacked Full Width */
.dashboard-grid {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    padding: 1rem;
    width: 100%;
}

.dashboard-card {
    background: var(--primary-darkest);
    border: 1px solid var(--dark-border);
    border-radius: 4px;
    display: flex;
    flex-direction: column;
    width: 100%;
}

/* Header */
.dashboard-header-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.25rem 0.75rem;
    background: rgba(255,255,255,0.05);
    border-bottom: 1px solid var(--dark-border);
    min-height: 40px;
}

.dashboard-title {
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 1px;
    white-space: nowrap;
    color: var(--primary-light);
    font-size: 0.95rem;
}

.dashboard-btn{
    height: 28px;
}

.dashboard-btn-new{
    width: min(100px, 25vw);
    font-size: 0.75rem;
}

.dashboard-controls {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

/* Inputs */
.dashboard-input,
.dashboard-select {
    background-color: #1a1a1a;
    color: #e0e0e0;
    border: 1px solid #444;
    padding: 0.15rem 0.5rem;
    font-size: 0.8rem;
    border-radius: 2px;
    height: 28px;
}

/* Grid Headers */
.dashboard-grid-header {
    display: grid;
    align-items: center;
    background: rgba(0,0,0,0.6);
    border-bottom: 1px solid var(--dark-border);
    padding: 0.25rem 0.5rem;
    font-size: 0.75rem;
    font-weight: bold;
    color: var(--secondary-light);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.header-sortable {
    cursor: pointer;
    user-select: none;
}

    .header-sortable:hover {
        color: #fff;
    }

/* Rows */
.dashboard-row {
    display: grid;
    align-items: center;
    padding: 0.25rem 0.5rem;
    border-bottom: 1px solid rgba(255,255,255,0.03);
    font-size: 0.85rem;
    background: transparent;
    transition: background 0.1s;
    min-height: 36px;
}

   /* .dashboard-row:hover {
        background: rgba(255,255,255,0.08);
    }*/

/* Grid Columns */
.grid-cols-song {
    grid-template-columns: 2fr 2fr 100px 140px;
    gap: 10px;
}

.grid-cols-playlist {
    grid-template-columns: 2fr 100px 60px 140px;
    gap: 10px;
}

/* Badges */
.status-badge {
    background-color: transparent; /* Cleaner look */
    color: #ccc;
    padding: 0;
    font-size: 0.75rem;
    font-weight: 500;
}

.type-badge {
    background-color: #333; /* Dark background */
    color: #fff; /* White text */
    border: 1px solid #555; /* Subtle border definition */
    padding: 2px 6px;
    border-radius: 3px;
    font-size: 0.7rem;
    width: auto; /* Allow width to fit text */
    min-width: 60px;
    text-align: center;
    font-weight: bold;
    letter-spacing: 0.05em;
}

/* Actions */
.action-cell {
    display: flex;
    justify-content: flex-start;
    gap: 0.5rem;
}

.btn-icon-action {
    background: transparent;
    border: 1px solid transparent;
    color: #aaa;
    cursor: pointer;
    padding: 2px;
    border-radius: 3px;
    opacity: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .btn-icon-action:hover {
        color: #fff;
        background: rgba(255,255,255,0.15);
    }

    .btn-icon-action.active {
        color: var(--secondary-light);
    }

/* --- EXPANSION PANEL (Fixed Layout) --- */
.dashboard-expand-panel {
    background: #0a0a0a;
    border-bottom: 1px solid var(--dark-border);
    padding: 0.5rem;
    border-left: 2px solid var(--primary-med);
    font-size: 0.8rem;
    box-shadow: inset 0 0 10px rgba(0,0,0,0.5);
}

.expand-details-compact {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 0.5rem;
    color: #888;
    font-size: 0.75rem;
    border-bottom: 1px solid #222;
    padding-bottom: 0.25rem;
}

.expand-details-separator {
    border-left: 1px solid #444;
    padding-left: 1rem;
}

.expand-track-list {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

/* The Container for a single expanded row */
.expand-track-item {
    display: flex;
    align-items: center;
    justify-content: space-between; /* Pushes Info left, Actions right */
    padding: 0.25rem 0.5rem;
    border-radius: 2px;
    background: rgba(255, 255, 255, 0.03);
    font-size: 0.8rem;
}

    .expand-track-item:hover {
        background: rgba(255, 255, 255, 0.07);
    }

/* Left Side: Text Info */
.expand-track-info {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex: 1; /* Grow to fill space */
    overflow: hidden;
}

.track-seq-num {
    color: #666;
    width: 20px;
    text-align: right;
}

.track-title {
    color: #ddd;
    font-weight: bold;
}

.track-artist {
    color: #888;
    font-size: 0.75rem;
}

.track-meta {
    color: #666;
    font-size: 0.75rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Right Side: Action Buttons */
.expand-track-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem; /* Explicit gap between icons */
}

/* ========================================= */
/* 14.1 DASHBOARD MOBILE (STACKED CARDS)     */
/* ========================================= */

@media screen and (max-width: 768px) {
    /* 1. Hide the header row (Labels don't align in card view) */
    .dashboard-grid-header {
        display: none;
    }

    /* 2. Transform the Row into a Card */
    .dashboard-row {
        display: flex; /* Disable Grid */
        flex-direction: column;
        align-items: flex-start;
        height: auto; /* Allow row to grow */
        min-height: auto;
        background-color: var(--primary-darkest);
        border: 1px solid var(--dark-border);
        border-radius: 6px;
        padding: 0.75rem;
        margin-bottom: 0.75rem; /* Space between cards */
        gap: 0.5rem; /* Space between items inside the card */
        box-shadow: 0 2px 4px rgba(0,0,0,0.3);
    }

    /* 3. Reset specific grid columns */
    .grid-cols-song,
    .grid-cols-playlist {
        grid-template-columns: none;
    }

    /* 4. Target Specific Cells (Assumes standard order: Title, Artist, Meta, Actions) */

    /* Cell 1: Title (Make it big and white) */
    .dashboard-row > div:nth-child(1) {
        font-size: 1rem;
        font-weight: bold;
        color: var(--primary-lightest);
        width: 100%;
        margin-bottom: -2px; /* Tighten up with subtitle */
    }

    /* Cell 2: Artist/Meta (Make it subtle) */
    .dashboard-row > div:nth-child(2) {
        font-size: 0.85rem;
        color: #aaa;
        width: 100%;
    }

    /* Cell 3: Status Badges (Keep them inline) */
    .dashboard-row > div:nth-child(3) {
        width: 100%;
        margin-top: 0.25rem;
    }

    /* Cell 4: Action Buttons (Move to bottom right) */
    .dashboard-row > div:last-child {
        width: 100%;
        display: flex;
        justify-content: flex-end; /* Push buttons to the right */
        border-top: 1px solid rgba(255,255,255,0.1);
        padding-top: 0.5rem;
        margin-top: 0.25rem;
        gap: 1rem;
    }

    /* Make action buttons larger targets on touch */
    .btn-icon-action {
        padding: 0.5rem;
        font-size: 1.1rem;
        background: rgba(255,255,255,0.05);
        border-radius: 4px;
        color: var(--primary-light);
    }
    /* 1. Container */
    .expand-track-item {
        position: relative;
        display: flex;
        flex-direction: column;
        padding: 0.25rem;
        background: rgba(0, 0, 0, 0.3);
        border: 1px solid var(--dark-border);
        margin-bottom: 0.25rem;
        min-height: 3.5rem;
    }

    /* 2. Info Wrapper: Use Flexbox to control the line flow */
    .expand-track-info {
        display: flex; /* Enable Flexbox */
        flex-wrap: wrap; /* Allow wrapping for the Artist/Meta rows */
        align-items: baseline; /* Align text baselines nicely */
        width: 100%;
        padding-right: 90px; /* Protect text from the floating buttons */
    }

    /* 3. Text Elements */

    /* Seq #: Fixed width, never shrink */
    .track-seq-num {
        flex: 0 0 auto; /* Grow: 0, Shrink: 0, Auto width */
        font-weight: bold;
        font-size: 0.9rem;
        color: var(--secondary-light);
        margin-right: 0rem;
    }

    /* Title: Fill remaining space, then truncate */
    .track-title {
        flex: 1 1 0%; /* Grow: 1, Shrink: 1, Basis: 0% */
        min-width: 0; /* CRITICAL: Allows flex child to shrink below content size */
        font-size: 0.95rem;
        font-weight: bold;
        color: var(--primary-lightest);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        margin-bottom: 0;
    }

    /* Artist: Force New Line (Full Width) */
    .track-artist {
        flex-basis: 100%; /* Force wrap to next line */
        font-size: 0.8rem;
        color: #aaa;
        margin-top: 0.15rem;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /* Meta: Force New Line */
    .track-meta {
        flex-basis: 100%;
        font-size: 0.75rem;
        color: #666;
        margin-top: 0;
    }

    /* 4. Action Buttons (Floating Top-Right) */
    .expand-track-actions {
        position: absolute;
        top: 0.25rem;
        right: 0.25rem;
        width: auto;
        justify-content: flex-end;
        border-top: none;
        padding-top: 0;
        margin-top: 0;
        gap: 0.25rem;
        background: transparent;
    }

        .expand-track-actions .btn-icon-action {
            padding: 0.3rem;
            font-size: 1rem;
            background: rgba(255,255,255,0.05);
            border: 1px solid rgba(255,255,255,0.1);
        }

}

/* ========================================= */
/* 15. Activity Feed (DENSITY & DIFFS)       */
/* ========================================= */

.activity-feed-container {
    display: flex;
    flex-direction: column;
    gap: 0; /* No gap, borders handle separation */
    background: var(--primary-darkest);
    border: 1px solid var(--dark-border);
    border-radius: 4px;
}

.activity-row {
    display: grid;
    /* Columns: Icon | Actor/Action | Details/Preview | Date */
    grid-template-columns: 15px 400px 1fr 120px;
    align-items: center; /* Vertically center everything */
    padding: 0.35rem 0.75rem;
    border-bottom: 1px solid rgba(255,255,255,0.05);
    font-size: 0.75rem;
    cursor: pointer;
    transition: background 0.1s;
    gap: 1rem;
}

    .activity-row:hover {
        background: rgba(255,255,255,0.05);
    }

    .activity-row:last-child {
        border-bottom: none;
    }

/* Icon Column */
.activity-icon {
    color: #666;
    margin-top: 2px;
}

/* Main Content Column */
.activity-content {
    display: contents; /* Allows children to participate in the parent grid */
}

.activity-header {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: #ccc;
    display: block; /* Ensure it behaves as a block for truncation */
}

.actor-name {
    font-weight: bold;
    color: var(--primary-light);
}

.activity-details-inline {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: #888;
    font-style: italic;
}

/* Date Column */
.activity-date {
    text-align: right;
    color: #666;
    font-size: 0.75rem;
    white-space: nowrap;
}

@media (max-width: 900px) {
    .activity-row {
        /* Switch back to compact stacked view */
        grid-template-columns: 30px 1fr 100px;
        grid-template-rows: auto auto;
        gap: 0.25rem 0.75rem;
        align-items: start;
    }

    /* Icon stays in top left */
    .activity-icon {
        grid-row: 1 / span 2;
    }

    /* Header takes top row space */
    .activity-header {
        grid-column: 2 / 3;
        font-size: 0.9rem;
    }

    /* Details take bottom row space */
    .activity-details-inline {
        grid-column: 2 / 4;
        grid-row: 2;
        font-size: 0.8rem;
    }

    /* Date moves to top right */
    .activity-date {
        grid-column: 3 / 4;
        grid-row: 1;
        align-self: center;
    }
}

/* --- DETAILS & DIFFS --- */

/* Container for the "Old -> New" pills */
.diff-container {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.25rem;
}

/* Individual Change Pill */
.diff-pill {
    background: rgba(0,0,0,0.3);
    border: 1px solid #333;
    border-radius: 3px;
    padding: 2px 6px;
    font-size: 0.75rem;
    color: #aaa;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.diff-field {
    color: #888;
    text-transform: uppercase;
    font-weight: bold;
    font-size: 0.65rem;
    letter-spacing: 0.05em;
}

.diff-val {
    color: #fff;
    font-family: 'Courier New', monospace; /* Monospace for values */
}

.diff-arrow {
    color: #555;
    font-size: 0.7rem;
}

/* Context/Preview Box (Comments, Notes, Lyrics) */
.activity-preview {
    background: rgba(255,255,255,0.03);
    border-left: 2px solid var(--secondary-med); /* Accent color border */
    padding: 0.25rem 0.5rem;
    margin-top: 0.25rem;
    font-style: italic;
    color: #bbb;
    font-size: 0.8rem;
}

.activity-meta {
    font-size: 0.75rem;
    color: #777;
}

.meta-separator {
    margin: 0 0.5rem;
    color: #444;
}

/* Empty State */
.activity-empty {
    padding: 1rem;
    color: #888;
    font-size: 0.85rem;
    font-style: italic;
    text-align: center;
}

/* Utilities replacing Bootstrap */
.af-meta-row {
    margin-top: 0.25rem;
    font-size: 0.75rem;
    color: #888;
}

.af-strong {
    color: #ddd;
    font-weight: bold;
}

.af-separator {
    margin: 0 0.5rem;
    color: #444;
}

.af-target-entity {
    color: #fff;
    font-weight: 500;
}

/* ========================================= */
/* 16. Activity Detail Modal (Scoped .am-)   */
/* ========================================= */

.am-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100dvh;
    background-color: rgba(0, 0, 0, 0.85); /* Keep semi-transparent black for backdrop */
    backdrop-filter: blur(2px);
    z-index: 1000;                              /* Tier 4: Modal Backdrop */
    animation: am-fade-in 0.2s ease-out;
}

.am-dialog {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 95%;
    max-width: 600px;
    background-color: var(--primary-darkest);
    border: 1px solid var(--dark-border);
    border-radius: 6px;
    box-shadow: 0 20px 50px rgba(0,0,0,0.8);
    z-index: 1001;                              /* Tier 4: Modal Dialog */
    display: flex;
    flex-direction: column;
    max-height: 90dvh;
    animation: am-slide-up 0.2s ease-out;
}

/* --- Header --- */
.am-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 1rem 1.25rem;
    background: rgba(255,255,255,0.02); 
    border-bottom: 1px solid var(--dark-border);
}

.am-title-group {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.am-title {
    margin: 0;
    font-size: 1.1rem;
    font-weight: bold;
    text-transform: uppercase;
    color: var(--primary-light); /* Replaced specific color */
    letter-spacing: 1px;
}

.am-subtitle {
    font-size: 0.85rem;
    color: var(--primary-med); /* Replaced #888 */
}

.am-btn-close {
    background: transparent;
    border: none;
    color: var(--primary-dark); /* Replaced #666 */
    font-size: 1.5rem;
    line-height: 1;
    cursor: pointer;
    padding: 0;
    margin-left: 1rem;
    transition: color 0.2s;
}

    .am-btn-close:hover {
        color: var(--text-neutral);
    }

/* --- Body --- */
.am-body {
    padding: 1.25rem;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

/* --- Content Box --- */
.am-content-box {
    background: rgba(0,0,0,0.3);
    border: 1px solid var(--dark-border); /* Replaced #333 */
    border-radius: 4px;
    padding: 1rem;
}

/* Diff Styling */
.am-diff-grid {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.am-diff-row {
    display: grid;
    grid-template-columns: 100px 1fr 20px 1fr;
    align-items: center;
    gap: 0.75rem;
    font-size: 0.85rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid rgba(255,255,255,0.05);
}

    .am-diff-row:last-child {
        border-bottom: none;
        padding-bottom: 0;
    }

.am-diff-label {
    font-weight: bold;
    color: var(--primary-med); /* Replaced #888 */
    text-transform: uppercase;
    font-size: 0.7rem;
    letter-spacing: 0.5px;
}

.am-diff-old {
    color: var(--primary-dark); /* Replaced #666 */
    text-decoration: line-through;
    word-break: break-all;
}

.am-diff-arrow {
    color: var(--secondary-med);
}

.am-diff-new {
    color: var(--text-neutral); /* Replaced #fff */
    font-weight: bold;
    word-break: break-all;
}

/* Comment Display */
.am-comment-display {
    display: flex;
    gap: 1rem;
}

.am-comment-icon {
    font-size: 1.5rem;
    color: var(--primary-dark); /* Replaced #555 */
    padding-top: 0.25rem;
}

.am-comment-text {
    color: var(--primary-light); /* Replaced #ddd */
    white-space: pre-wrap;
    font-style: italic;
    line-height: 1.5;
}

/* Key/Value List */
.am-kv-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    margin-bottom: 1rem;
}

.am-kv-item label {
    display: block;
    color: var(--primary-med); /* Replaced #666 */
    font-size: 0.7rem;
    margin-bottom: 2px;
}

.am-kv-item div {
    color: var(--text-neutral);
    font-size: 0.9rem;
}

/* Large Text Block */
.am-notes-block {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--dark-border);
}

.am-notes-label {
    display: block;
    color: var(--secondary-light);
    font-size: 0.75rem;
    text-transform: uppercase;
    margin-bottom: 0.5rem;
}

.am-notes-text {
    color: var(--primary-light); /* Replaced #ccc */
    white-space: pre-wrap;
    font-size: 0.9rem;
    line-height: 1.5;
}

/* --- Quick Reply Section --- */
.am-reply-section {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.am-input {
    width: 100%;
    background: var(--background); /* Replaced #111 */
    border: 1px solid var(--dark-border); /* Replaced #444 */
    color: var(--text-neutral);
    padding: 0.75rem;
    border-radius: 4px;
    font-family: inherit;
    resize: vertical;
    min-height: 80px;
}

    .am-input:focus {
        outline: 1px solid var(--primary-med);
        border-color: var(--primary-med);
    }

.am-actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
    margin-top: 0.5rem;
}

/* Button overrides */
.am-btn {
    padding: 0.5rem 1rem;
    font-size: 0.85rem;
    width: auto;
    text-transform: uppercase;
    font-weight: bold;
    letter-spacing: 1px;
    border-radius: 3px;
    cursor: pointer;
    border: none;
}

.am-btn-secondary {
    background: transparent;
    border: 1px solid var(--dark-border);
    color: var(--primary-med);
}

    .am-btn-secondary:hover {
        border-color: var(--primary-light);
        color: var(--text-neutral);
    }

.am-btn-primary {
    background: var(--primary-dark);
    color: var(--primary-lightest);
}

    .am-btn-primary:hover {
        filter: brightness(1.2);
    }

/* Animations */
@keyframes am-fade-in {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes am-slide-up {
    from {
        transform: translate(-50%, -45%);
        opacity: 0;
    }

    to {
        transform: translate(-50%, -50%);
        opacity: 1;
    }
}

/* Mobile Adjustments */
@media (max-width: 600px) {
    .am-diff-row {
        grid-template-columns: 1fr;
        gap: 0.25rem;
    }

    .am-diff-arrow {
        transform: rotate(90deg);
        margin-left: 10px;
    }
}

.admin-container.dashboard-mode {
    padding: 0;
    max-width: 100%;
}

/* 2. Feed Group Wrapper */
/* Replaces: style="display: flex; flex-direction: column; gap: 1.5rem; width: 100%;" */
.dashboard-feed-group {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    width: 100%;
}

/* --- Add to Section 16: Activity Modal (.am-) --- */

/* 3. Conversation Mode Body Modifier */
/* Replaces: style="padding: 0; display: flex; flex-direction: column; height: 60vh;" */
.am-body.conversation-mode {
    padding: 0;
    display: flex;
    flex-direction: column;
    height: 60vh;
}

.dashboard-pager-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.5rem 1rem;
    background: rgba(0,0,0,0.2);
    border-top: 1px solid var(--dark-border);
    font-size: 0.8rem;
    color: #888;
}

.pager-buttons {
    display: flex;
    gap: 0.5rem;
}

.pager-btn {
    background: var(--background);
    border: 1px solid var(--dark-border);
    color: var(--text-neutral);
    padding: 0.25rem 0.5rem;
    border-radius: 3px;
    cursor: pointer;
    font-size: 0.8rem;
    transition: all 0.2s;
}

    .pager-btn:hover:not(:disabled) {
        border-color: var(--primary-light);
        background: rgba(255,255,255,0.05);
    }

    .pager-btn:disabled {
        opacity: 0.5;
        cursor: not-allowed;
    }

/* ========================================= */
/* 17. Generic Animated Modal (Reusable)     */
/* ========================================= */

/* 1. The Backdrop (Fades In) */
.app-modal-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100dvh;
    background-color: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(4px);
    z-index: 1000;                                      /* Tier 4: Modal Backdrop */
    animation: simpleFadeIn 0.3s ease-out forwards;
}

/* This handles centering and animation only. Content goes inside. */
.app-modal-dialog {
    position: fixed;
    top: 50%;
    left: 50%;
    /* Start centered */
    transform: translate(-50%, -50%);
    z-index: 1001;                                      /* Tier 4: Modal Dialog */
    /* Flex allows child content (.user-card) to size itself */
    display: flex;
    flex-direction: column;
    max-height: 95dvh;
    max-width: 95vw;
    /* Unique animation for centering transform */
    animation: modalPopUp 0.3s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}

/* --- Keyframes --- */

@keyframes simpleFadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes modalPopUp {
    0% {
        opacity: 0;
        /* Start 5% lower than true center */
        transform: translate(-50%, -45%);
    }

    100% {
        opacity: 1;
        /* End at true center */
        transform: translate(-50%, -50%);
    }
}

/* ========================================= */
/* 18. Notification Bar (Tier 5)             */
/* ========================================= */

.notification-bar {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw; /* Full width */
    z-index: 2100; /* Tier 5: System Overlay (Highest Priority) */
    padding: 0.75rem 1rem;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0 4px 10px rgba(0,0,0,0.3);
    font-family: var(--font-main);
    color: #fff;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: 0.9rem;
    /* Ensure it handles clicks if necessary, though it fades auto */
    pointer-events: none;
}

.notification-content {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    max-width: 1000px;
    width: 100%;
    justify-content: center;
}

/* Colors */
.bar-success {
    background-color: var(--success-dark);
    border-bottom: 2px solid var(--success-med);
}

.bar-error {
    background-color: var(--failure-dark);
    border-bottom: 2px solid var(--failure-med);
}

.bar-info {
    background-color: var(--secondary-dark);
    border-bottom: 2px solid var(--secondary-med);
}

/* Icons/Text */
.notification-icon {
    font-weight: bold;
    font-size: 1.1rem;
}

.notification-message {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Animation: Slide Down from Top */
@keyframes slideDownBar {
    0% {
        transform: translateY(-100%);
    }

    100% {
        transform: translateY(0);
    }
}

.animate-slide-down {
    animation: slideDownBar 0.3s ease-out forwards;
}

/* Mobile Tweaks */
@media (max-width: 600px) {
    .notification-message {
        white-space: normal; /* Allow wrapping on phones */
        text-align: center;
        font-size: 0.8rem;
    }

    .notification-bar {
        padding: 0.5rem;
    }
}


/* ========================================= */
/* 19. Reorderable Lists                     */
/* ========================================= */
.reorder-item {
    cursor: grab;
    transition: background 0.2s, transform 0.2s;
}

    .reorder-item:active {
        cursor: grabbing;
    }

    .reorder-item.is-dragging {
        opacity: 0.5;
        background: rgba(255, 255, 255, 0.1);
        border: 1px dashed var(--secondary-light);
    }

/* ========================================= */
/* 20. ToDo List Styles                      */
/* ========================================= */

/* --- Item Row --- */
.todo-item-row {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 0.5rem;
    padding: 0.125rem;
    background: rgba(255,255,255,0.03);
    border-radius: 4px;
    margin-bottom: 2px;
}

    .todo-item-row.completed .todo-input {
        text-decoration: line-through;
        opacity: 0.5;
    }

/* --- Input Overrides --- */
/* Fix: Override global input width: 100% for the checkbox */
.todo-checkbox {
    width: auto !important;
    cursor: pointer;
}

.todo-input {
    flex: 1;
    background: transparent;
    border: none;
    border-bottom: 1px solid transparent;
    padding: 6px 5px 2px 5px; /* Slight top padding adjustment for textareas */
    color: var(--text-neutral);
    font-family: var(--font-main);
    font-size: 0.9rem;
    /* Force wrapping and block resize */
    white-space: pre-wrap; /* Wraps text naturally */
    resize: none; /* Disables the drag handle in the corner */
    overflow: hidden; /* Hides scrollbars to simulate an auto-growing box */
    /* Layout */
    width: 100%; /* Prevents horizontal resizing issues */
    min-height: 1.6em; /* Height of one line */
    height: auto;
}

    .todo-input:focus {
        border-bottom: 1px solid var(--primary-light);
        outline: none;
    }

/* --- Drag Handle --- */
.drag-handle {
    cursor: grab;
    color: var(--disabled-foreground);
    display: flex;
    align-items: center;
    padding: 0 0.25rem;
}

    .drag-handle:active {
        cursor: grabbing;
        color: var(--primary-light);
    }

/* --- Layout & Containers --- */
.todo-list-scroll-area {
    /* Replaces inline max-height */
    max-height: 50vh;
    overflow-y: auto;
    margin-top: 1rem;
    padding-right: 0.25rem; /* Space for scrollbar */
}

.todo-toolbar {
    /* Replaces mb-2 wrapper */
    margin-bottom: 1rem;
    display: flex;
    gap: 0.5rem;
}

.todo-section-header {
    font-size: 0.8rem;
    text-transform: uppercase;
    color: var(--secondary-light);
    border-bottom: 1px solid var(--dark-border);
    padding-bottom: 0.25rem;
    user-select: none;
}

/* --- Text Utilities (Replacing Bootstrap) --- */
.todo-text-truncate {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.todo-text-muted {
    color: var(--disabled-foreground);
    font-size: 0.85rem;
    font-style: italic;
    user-select: none;
}

.todo-list-name {
    font-weight: bold;
    color: var(--primary-lightest);
}

.todo-list-new-item-description {
    min-height: 8rem;
}

.todo-list-panel-content {
    display: flex;
    flex-direction: column;
    row-gap: 0.5rem;
}

.todo-list-title-row {
    display: grid;
    grid-template-columns: auto auto 1fr;
    column-gap: 0.5rem;
    /* FIX: Ensure the row itself doesn't have a border, the wrapper handles it */
    border-bottom: none;
}

.todo-list-title-row-chevrons {
    width: 20px;
    color: var(--secondary-light);
    justify-self: flex-end;
}

/* --- NEW CLASSES TO REPLACE INLINE STYLES --- */

/* Replaces: border-bottom: 1px solid rgba(255,255,255,0.05); */
.todo-list-wrapper {
    border-bottom: 1px solid rgba(255,255,255,0.05);
}

/* Replaces: display: flex; justify-content: flex-end; padding-bottom: 0.5rem... */
.todo-expansion-header {
    display: grid;
    grid-template-columns: 1fr auto;
    justify-content: flex-end;
    align-items: center;
    gap: 1rem;
    padding-bottom: 0.5rem;
    margin-bottom: 0.5rem;
    border-bottom: 1px solid #222;
}

/* Replaces label style */
.todo-expansion-toggle {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 0.75rem;
    cursor: pointer;
    margin: 0;
    color: var(--disabled-foreground);
}

/* Replaces p-2 text-muted text-center */
.todo-empty-state {
    padding: 1rem;
    color: var(--disabled-foreground);
    font-style: italic;
    text-align: center;
    font-size: 0.85rem;
}

.todo-list-edit-button{
    justify-self: flex-start;
    max-width: min(100px, 25vw);
}

/* ========================================= */
/* Mobile Modal Fixes                        */
/* ========================================= */
    
    .dashboard-grid{
        padding: 0.5rem 0rem;
        gap: 0.5rem;
    }

    /* 1. Make the modal container wider on mobile */
    .app-modal-dialog {
        width: 95% !important;
        max-width: 95% !important;
        min-width: 95% !important; /* Force width */
        margin: 10px auto; /* Center with small margin */
    }

    /* 2. Adjust the card padding to gain more internal space */
    .user-card {
        padding: 0.75rem !important;
        width: 100%;
    }

    /* 3. Fix text cutoff in Todo Items */
    .todo-item-row {
        /* Ensure grid/flex doesn't force items too wide */
        max-width: 100%;
    }

    .todo-input {
        /* 'min-width: 0' is a flexbox trick that allows the item 
           to shrink below its content size, enabling truncation 
           to work properly instead of overflowing or forcing width. */
        min-width: 0;
        white-space: normal;
        height: auto;
    }

    /* 4. Make buttons smaller or stack them if needed */
    .todo-toolbar .btn-primary {
        width: 100%; /* Make 'Add Item' full width for easier tapping */
        justify-content: center;
    }
}

/* ========================================= */
/* 21. Attachments Tab                       */
/* ========================================= */

.upload-progress-track {
    width: 100%;
    height: 20px;
    background-color: var(--primary-darkest);
    border: 1px solid var(--dark-border);
    border-radius: 4px;
    overflow: hidden;
    margin-top: 0.5rem;
}

.upload-progress-fill {
    height: 100%;
    background-color: var(--secondary-med);
    transition: width 0.1s linear;
}

/* --- Layout Utilities (No Bootstrap) --- */
.panel-padding {
    padding: 1rem;
}

.flex-center-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.space-between-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}

.text-subtle {
    color: var(--disabled-foreground);
    font-size: 0.85rem;
    font-style: italic;
}

.text-warn {
    color: var(--caution-light);
}

.gap-bottom {
    margin-bottom: 1rem;
}

/* --- Attachment Grid Styles --- */
.attachment-grid {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-top: 1rem;
}

.attachment-row {
    display: grid;
    grid-template-columns: 40px 1fr 2fr auto;
    align-items: center;
    background: rgba(255,255,255,0.03);
    border: 1px solid var(--dark-border);
    padding: 0.5rem;
    border-radius: 4px;
    gap: 1rem;
}

.attachment-icon {
    display: flex;
    justify-content: center;
    color: var(--secondary-light);
}

.attachment-type-badge {
    background-color: #222;
    border: 1px solid #444;
    color: #aaa;
    font-size: 0.7rem;
    padding: 2px 6px;
    border-radius: 3px;
    text-transform: uppercase;
    width: fit-content;
}

.attachment-link {
    color: var(--primary-light);
    text-decoration: none;
    font-weight: 500;
    word-break: break-all;
}

    .attachment-link:hover {
        color: var(--secondary-light);
        text-decoration: underline;
    }

.attachment-desc-group {
    display: flex;
    flex-direction: column;
}

.attachment-desc-text {
    font-weight: bold;
    font-size: 0.9rem;
}

/* --- Add Panel Styles --- */
.add-attachment-panel {
    border: 1px solid var(--secondary-dark);
    background: rgba(0,0,0,0.2);
    padding: 1rem;
    margin-bottom: 1rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.attachment-mode-toggle {
    display: flex;
    gap: 1rem;
}

.upload-file-label {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.5rem 1rem;
    background: var(--primary-darkest);
    border: 1px dashed var(--secondary-light);
    color: var(--secondary-light);
    cursor: pointer;
    width: 100%;
    text-align: center;
    transition: background 0.2s;
}

    .upload-file-label:hover {
        background: rgba(255,255,255,0.05);
    }

/* Mobile Responsive */
@media (max-width: 768px) {
    .attachment-row {
        grid-template-columns: 40px 1fr auto;
        grid-template-areas:
            "icon meta action"
            "icon desc action";
        gap: 0.5rem 1rem;
    }

    .attachment-icon {
        grid-area: icon;
        align-self: start;
        margin-top: 0.25rem;
    }

    .attachment-meta {
        grid-area: meta;
    }

    .attachment-desc-group {
        grid-area: desc;
        grid-column: 2 / 4;
    }

    .attachment-actions {
        grid-area: action;
    }
}

.attachment-grid {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-top: 1rem;
}

.attachment-row {
    display: grid;
    grid-template-columns: 40px 1fr 2fr auto;
    align-items: center;
    background: rgba(255,255,255,0.03);
    border: 1px solid var(--dark-border);
    padding: 0.5rem;
    border-radius: 4px;
    gap: 1rem;
}

.attachment-icon {
    font-size: 1.5rem;
    color: var(--secondary-light);
    display: flex;
    justify-content: center;
}

.attachment-type-badge {
    background-color: #222;
    border: 1px solid #444;
    color: #aaa;
    font-size: 0.7rem;
    padding: 2px 6px;
    border-radius: 3px;
    text-transform: uppercase;
    width: fit-content;
}

.attachment-link {
    color: var(--primary-light);
    text-decoration: none;
    font-weight: 500;
    word-break: break-all;
}

    .attachment-link:hover {
        color: var(--secondary-light);
        text-decoration: underline;
    }

.attachment-desc {
    font-size: 0.85rem;
    color: #ccc;
}

.add-attachment-panel {
    border: 1px solid var(--secondary-dark);
    background: rgba(0,0,0,0.2);
    padding: 1rem;
    margin-bottom: 1rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.attachment-mode-toggle {
    display: flex;
    gap: 1rem;
    margin-bottom: 0.5rem;
}

.upload-file-label {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.5rem 1rem;
    background: var(--primary-darkest);
    border: 1px dashed var(--secondary-light);
    color: var(--secondary-light);
    cursor: pointer;
    width: 100%;
    text-align: center;
}

    .upload-file-label:hover {
        background: rgba(255,255,255,0.05);
    }

@media (max-width: 768px) {
    .attachment-row {
        grid-template-columns: 40px 1fr auto;
        grid-template-areas:
            "icon meta action"
            "icon desc action";
    }

    .attachment-icon {
        grid-area: icon;
    }

    .attachment-meta {
        grid-area: meta;
    }

    .attachment-desc {
        grid-area: desc;
        grid-column: 2 / 4;
        margin-top: 0.25rem;
    }

    .attachment-actions {
        grid-area: action;
    }
}