/**
 * Desktop Theme Override — Main Site Color Accent Integration
 * Applies ONLY at min-width: 769px (desktop)
 * Keeps dark theme + original fonts, swaps blue/teal accents for rose/pink/navy
 *
 * Main site accent palette applied:
 *   --rose: #9B6B6B       --pink-btn: #D4908F    --navy: #3B5578
 *   --rose-light: #C49A9A --pink-soft: #E8B4B4
 */

/* All viewports: solid dark background (kill diagonal gradient) */
:root {
    --background: #041b35 !important;
}
body {
    background: #041b35 !important;
}

@media (min-width: 769px) {

    /* ========================================
       1. CSS Variable Overrides — accent colors only
       ======================================== */
    :root {
        /* Primary: bright blue → pink-btn (warm rose) */
        --primary: #D4908F;
        --primary-dark: #C07A79;
        --primary-light: rgba(212, 144, 143, 0.15);

        /* Secondary stays pink but warmer tone */
        --secondary: #E8B4B4;
        --secondary-dark: #D4908F;
        --secondary-light: rgba(232, 180, 180, 0.15);

        /* Accent: teal → rose */
        --accent: #C49A9A;
        --teal-accent: #C49A9A;
        --teal-light: #D4908F;

        /* Info: blue → navy */
        --info: #5B7FA3;

        /* Blue palette → rose/pink mapped */
        --blue-bright: #D4908F;
        --blue-accent: #C49A9A;
        --blue-dark: #C07A79;

        /* Pink palette — warmer, more cohesive */
        --pink-soft: #E8B4B4;
        --pink-medium: #D4908F;
        --pink-coral: #C07A79;
        --pink-salmon: #C49A9A;
    }

    /* ========================================
       2. Buttons — outline style, solid on hover
       ======================================== */
    .button,
    button.button {
        background: transparent !important;
        color: #D4908F !important;
        border: 2px solid #D4908F !important;
        border-radius: 50px !important;
        letter-spacing: 0.5px;
        transition: background 0.25s, color 0.25s !important;
    }

    /* Kill the gradient wipe animation */
    .button::before,
    button.button::before {
        display: none !important;
    }

    .button:hover,
    button.button:hover {
        background: #D4908F !important;
        color: #fff !important;
        box-shadow: none !important;
        transform: none !important;
    }

    .button-secondary,
    button.button-secondary {
        background: transparent !important;
        color: #D4908F !important;
        border: 2px solid #D4908F !important;
        border-radius: 50px !important;
        transition: background 0.25s, color 0.25s !important;
    }

    .button-secondary::before,
    button.button-secondary::before {
        display: none !important;
    }

    .button-secondary:hover,
    button.button-secondary:hover {
        background: #D4908F !important;
        color: #fff !important;
    }

    /* ========================================
       3. Nav underline — rose gradient
       ======================================== */
    .nav-links a::after {
        background: linear-gradient(90deg, #D4908F, #E8B4B4) !important;
    }

    /* ========================================
       4. Cards — rose-tinted borders
       ======================================== */
    .punch-card {
        border-color: rgba(212, 144, 143, 0.3) !important;
    }

    .punch-card:hover {
        border-color: rgba(212, 144, 143, 0.6) !important;
    }

    .template-card {
        border-color: rgba(212, 144, 143, 0.3) !important;
    }

    .template-card:hover {
        border-color: rgba(212, 144, 143, 0.6) !important;
    }

    /* Progress bars — rose gradient */
    .progress-fill {
        background: linear-gradient(90deg, #D4908F, #C49A9A) !important;
    }

    /* ========================================
       5. Forms — rose focus ring
       ======================================== */
    input:focus,
    select:focus,
    textarea:focus {
        border-color: #D4908F !important;
        box-shadow: 0 0 0 3px rgba(212, 144, 143, 0.2) !important;
    }

    .float-group input:focus + label,
    .float-group input.filled + label,
    .float-group select:focus + label,
    .float-group select.filled + label {
        color: #D4908F !important;
    }

    /* ========================================
       6. Admin tabs — rose active state
       ======================================== */
    .admin-tab.active {
        color: #D4908F !important;
        border-bottom-color: #D4908F !important;
    }

    /* ========================================
       7. Toggle switches
       ======================================== */
    .toggle-switch input:checked + .toggle-slider {
        background: #D4908F !important;
    }

    /* ========================================
       8. Links
       ======================================== */
    a {
        color: #E8B4B4;
    }

    a:hover {
        color: #D4908F;
    }

    /* ========================================
       9. Scrollbar — rose tinted
       ======================================== */
    ::-webkit-scrollbar-thumb {
        background: #D4908F;
    }
    ::-webkit-scrollbar-thumb:hover {
        background: #C07A79;
    }
    * {
        scrollbar-color: #D4908F var(--navy-light);
    }

    /* ========================================
       10. Header border — rose tint
       ======================================== */
    .header {
        border-bottom-color: rgba(212, 144, 143, 0.2) !important;
    }

    .header.scrolled {
        border-bottom-color: rgba(212, 144, 143, 0.35) !important;
    }

    /* ========================================
       11. Holder action buttons — pill shape
       ======================================== */
    .holder-action-btn {
        border-radius: 50px !important;
    }

    /* ========================================
       12. Spinner
       ======================================== */
    .spinner,
    .loading-spinner {
        color: #D4908F !important;
    }

    /* ========================================
       13. Logo — SVG icon + text (matches main site)
       ======================================== */
    .logo {
        display: flex !important;
        align-items: center;
        gap: 14px;
        text-decoration: none !important;
        color: #f2f2f2 !important;
    }

    .logo:hover {
        opacity: 0.85;
        text-decoration: none !important;
    }

    .logo-icon {
        width: 72px;
        height: 72px;
        background-color: #FFFFFF;
        object-fit: contain;
        transition: width 0.3s, height 0.3s, background-color 0.3s;
    }

    .header.scrolled .logo-icon {
        width: 52px;
        height: 52px;
        background-color: transparent;
    }

    .logo-text {
        font-family: 'Damion', cursive;
        font-size: 1.4rem;
        font-weight: 400;
        color: #f2f2f2;
        line-height: 1.2;
        white-space: nowrap;
    }

    .logo-text span {
        font-family: 'Karla', sans-serif;
        font-weight: 300;
        font-size: 0.65rem;
        letter-spacing: 2px;
        text-transform: uppercase;
        display: block;
        opacity: 0.7;
    }

    /* ========================================
       14. Twilio submenu — match admin tab style
       ======================================== */
    /* Kill the gap between the main admin tabs and the submenu when Messages tab is active */
    .admin-container:has(.twilio-section) .admin-tabs {
        margin-bottom: 0;
    }

    .twilio-submenu {
        display: flex;
        width: 58%;
        max-width: 100%;
        margin: 0 auto 5px;
        justify-content: center;
        gap: 3px;
        padding: 0 8px;
        background: rgba(255, 255, 255, 0.05);
        backdrop-filter: blur(8px);
        border-radius: 0;
    }

    .twilio-submenu .submenu-btn {
        padding: 10px 23px;
    }

    .submenu-btn {
        padding: 12px 20px;
        font-size: 0.95rem;
        font-weight: 600;
        letter-spacing: 0.01em;
        border-bottom: 3px solid transparent;
        border-radius: 0;
        position: relative;
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }

    .submenu-btn::before {
        content: '';
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 3px;
        background: linear-gradient(90deg, #D4908F, #E8B4B4);
        transform: scaleX(0);
        transform-origin: left;
        transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }

    .submenu-btn:hover {
        color: rgba(255, 255, 255, 0.95);
        background: rgba(255, 255, 255, 0.08);
    }

    .submenu-btn.active {
        background: linear-gradient(to bottom, transparent, rgba(212, 144, 143, 0.15));
        color: #ffffff;
    }

    .submenu-btn.active::before {
        transform: scaleX(1);
    }

} /* end @media (min-width: 769px) */

/* Mobile: smaller logo */
@media (max-width: 768px) {
    .logo {
        display: flex !important;
        align-items: center;
        gap: 10px;
        text-decoration: none !important;
        color: #f2f2f2 !important;
    }

    .logo-icon {
        width: 40px;
        height: 40px;
        background-color: #FFFFFF;
        object-fit: contain;
    }

    .logo-text {
        font-family: 'Damion', cursive;
        font-size: 1.25rem;
        font-weight: 400;
        line-height: 1.2;
        white-space: nowrap;
    }

    .logo-text span {
        display: none;
    }
}

/* Hamburger toggle — kill focus outline/box on all viewports */
.mobile-menu-toggle,
.mobile-menu-toggle:focus,
.mobile-menu-toggle:focus-visible,
.mobile-menu-toggle:active {
    outline: none !important;
    box-shadow: none !important;
    -webkit-tap-highlight-color: transparent;
}