/**
 * Sunset Theme - Consolidated
 *
 * Warm sunset gradient background with photo overlay.
 * This is the default/showcase theme for twisTABLE.shop.
 *
 * Applied via: body[data-theme="sunset"]
 */

body[data-theme="sunset"] {
    /* ========== BACKGROUND ========== */
    --theme-bg-primary: transparent;
    --theme-bg-secondary: rgba(0, 0, 0, var(--opacity-40));
    --theme-bg-image: url('../../images/jordan-steranka-kTmejagP9v4-unsplash.jpg');
    --theme-bg-size: cover;
    --theme-bg-position: center 90%;
    --theme-bg-repeat: no-repeat;
    --theme-bg-attachment: fixed;

    /* ========== TEXT COLORS ========== */
    --theme-text-primary: white;
    --theme-text-secondary: var(--color-gray-300);
    --theme-text-muted: rgba(255, 255, 255, var(--opacity-60));
    --theme-text-shadow: var(--shadow-sm);
    --theme-text-disabled: rgba(255, 255, 255, var(--opacity-40));

    /* ========== STRUCTURAL COLORS ========== */
    --theme-border-color: rgba(156, 163, 175, var(--opacity-30));
    --theme-border-color-hover: var(--color-white);
    --theme-border-light: rgba(156, 163, 175, var(--opacity-30));
    --theme-hover-bg: rgba(255, 255, 255, var(--opacity-10));

    /* ========== SHADOWS (Consolidated from 10 to 5 levels) ========== */
    /* Black shadows with varying opacity for depth */
    --theme-shadow-xs: rgba(0, 0, 0, var(--opacity-10));
    --theme-shadow-sm: rgba(0, 0, 0, var(--opacity-20));
    --theme-shadow-md: rgba(0, 0, 0, var(--opacity-30));
    --theme-shadow-lg: rgba(0, 0, 0, var(--opacity-40));
    --theme-shadow-xl: rgba(0, 0, 0, var(--opacity-80));

    /* Legacy shadow names for compatibility */
    --theme-shadow-subtle: rgba(0, 0, 0, var(--opacity-10));
    --theme-shadow-lightest: rgba(0, 0, 0, var(--opacity-10));
    --theme-shadow-soft: rgba(0, 0, 0, var(--opacity-20));
    --theme-shadow-light: rgba(0, 0, 0, var(--opacity-20));
    --theme-shadow: rgba(0, 0, 0, var(--opacity-20));
    --theme-shadow-medium-light: rgba(0, 0, 0, var(--opacity-30));
    --theme-shadow-medium: rgba(0, 0, 0, var(--opacity-30));
    --theme-shadow-dark: rgba(0, 0, 0, var(--opacity-40));
    --theme-shadow-medium-dark: rgba(0, 0, 0, var(--opacity-50));
    --theme-shadow-darkest: rgba(0, 0, 0, var(--opacity-80));

    /* ========== OVERLAYS (Consolidated from 22 to 8) ========== */
    /* White overlays for glass-morphism effects */
    --theme-overlay-transparent: rgba(255, 255, 255, 0);
    --theme-overlay-xs: rgba(255, 255, 255, var(--opacity-10));
    --theme-overlay-sm: rgba(255, 255, 255, var(--opacity-20));
    --theme-overlay-md: rgba(255, 255, 255, var(--opacity-30));
    --theme-overlay-lg: rgba(255, 255, 255, var(--opacity-50));
    --theme-overlay-xl: rgba(255, 255, 255, var(--opacity-70));
    --theme-overlay-strong: rgba(255, 255, 255, var(--opacity-70));

    /* Legacy overlay names for compatibility */
    --theme-overlay-lightest: rgba(255, 255, 255, var(--opacity-10));
    --theme-overlay-light: rgba(255, 255, 255, var(--opacity-20));
    --theme-overlay-medium-light: rgba(255, 255, 255, var(--opacity-30));
    --theme-overlay-medium: rgba(255, 255, 255, var(--opacity-50));
    --theme-overlay-medium-strong: rgba(255, 255, 255, var(--opacity-60));

    /* Colored overlays for interactive states */
    --theme-primary-overlay: rgba(59, 130, 246, var(--opacity-20));
    --theme-success-overlay: rgba(34, 197, 94, var(--opacity-20));
    --theme-danger-overlay: rgba(239, 68, 68, var(--opacity-20));
    --theme-warning-overlay: rgba(245, 158, 11, var(--opacity-20));

    /* Legacy colored overlay names for compatibility */
    --theme-primary-overlay-lightest: rgba(59, 130, 246, var(--opacity-10));
    --theme-primary-overlay-light: rgba(59, 130, 246, var(--opacity-30));
    --theme-info-overlay-lightest: rgba(59, 130, 246, var(--opacity-10));
    --theme-success-overlay-light: rgba(34, 197, 94, var(--opacity-20));
    --theme-success-overlay-focus: rgba(34, 197, 94, var(--opacity-20));
    --theme-purple-overlay-lightest: rgba(168, 85, 247, var(--opacity-20));
    --theme-purple-overlay-light: rgba(168, 85, 247, var(--opacity-10));
    --theme-purple-overlay-medium: rgba(168, 85, 247, var(--opacity-30));
    --theme-danger-overlay-light: rgba(239, 68, 68, var(--opacity-20));
    --theme-danger-overlay-focus: rgba(239, 68, 68, var(--opacity-20));
    --theme-danger-overlay-medium: rgba(239, 68, 68, var(--opacity-30));
    --theme-danger-overlay-red-light: rgba(254, 200, 200, var(--opacity-40));
    --theme-danger-overlay-red-medium: rgba(254, 100, 100, var(--opacity-40));
    --theme-warning-overlay-medium: rgba(245, 158, 11, var(--opacity-50));
    --theme-warning-overlay-yellow: rgba(255, 243, 205, var(--opacity-95));

    /* ========== TEXT ON PRIMARY ========== */
    --theme-text-on-primary: white;

    /* ========== NAVIGATION ========== */
    --theme-menu-bg: rgba(255, 255, 255, 0);
    --theme-menu-border: rgba(156, 163, 175, var(--opacity-30));
    --theme-menu-text: white;
    --theme-menu-text-disabled: rgba(255, 255, 255, var(--opacity-40));
    --theme-menu-hover-bg: var(--theme-hover-bg);
    --theme-menu-active-bg: rgba(255, 255, 255, var(--opacity-20));

    --theme-header-bg: rgba(0, 0, 0, var(--opacity-30));
    --theme-header-border: rgba(156, 163, 175, var(--opacity-30));

    /* ========== BACKDROP EFFECTS ========== */
    --theme-backdrop-blur: blur(10px);

    /* ========== CARD COMPONENT ========== */
    --theme-card-bg: rgba(0, 0, 0, var(--opacity-20));
    --theme-card-border: rgba(156, 163, 175, var(--opacity-30));
    --theme-card-hover-bg: rgba(0, 0, 0, var(--opacity-50));
    --theme-card-hover-border: rgba(255, 255, 255, var(--opacity-50));
    --theme-card-active-bg: rgba(0, 0, 0, var(--opacity-60));
    --theme-card-active-border: var(--color-yellow-400);
    --theme-card-header-bg: rgba(0, 0, 0, var(--opacity-20));
    --theme-card-footer-bg: rgba(0, 0, 0, var(--opacity-20));

    /* ========== INPUT COMPONENT ========== */
    --theme-input-bg: rgba(255, 255, 255, var(--opacity-10));
    --theme-input-border: rgba(156, 163, 175, var(--opacity-30));
    --theme-input-color: white;
    --theme-input-placeholder: rgba(255, 255, 255, var(--opacity-60));
    --theme-input-focus-border: var(--color-white);
    --theme-input-focus-shadow: var(--theme-primary-overlay);
    --theme-input-disabled-bg: rgba(0, 0, 0, var(--opacity-20));

    /* ========== DROPDOWN COMPONENT ========== */
    --theme-dropdown-bg: rgba(0, 0, 0, var(--opacity-85));
    --theme-dropdown-hover-bg: var(--color-gray-800);
    --theme-dropdown-selected-bg: var(--color-gray-700);
    --theme-dropdown-border: rgba(156, 163, 175, var(--opacity-30));
    --theme-dropdown-text: var(--theme-text-primary);

    /* ========== BUTTON COMPONENT ========== */
    /* All buttons: Darker normal, lighter hover */

    /* Primary Button */
    --theme-btn-primary-bg: var(--theme-bg-secondary);
    --theme-btn-primary-color: white;
    --theme-btn-primary-hover-bg: rgba(255, 255, 255, var(--opacity-30));

    /* Secondary Button */
    --theme-btn-secondary-bg: var(--theme-bg-secondary);
    --theme-btn-secondary-color: white;
    --theme-btn-secondary-hover-bg: rgba(255, 255, 255, var(--opacity-30));
    --theme-btn-secondary-border: rgba(255, 255, 255, var(--opacity-30));

    /* Primary Button (Blue - default action buttons) */
    --theme-btn-primary-bg: var(--color-blue-400);
    --theme-btn-primary-border: var(--color-blue-500);
    --theme-btn-primary-hover-bg: var(--color-blue-500);
    --theme-btn-primary-hover-border: var(--color-blue-600);

    /* Success Button (Green - enabled/positive states) */
    --theme-btn-success-bg: var(--color-green-500);
    --theme-btn-success-color: white;
    --theme-btn-success-hover-bg: var(--color-green-600);
    --theme-btn-success-border: var(--color-green-700);
    --theme-btn-success-hover-border: var(--color-green-800);

    /* Disabled Button (Gray - inactive/disabled states) */
    --theme-btn-disabled-bg: var(--theme-bg-secondary);
    --theme-btn-disabled-border: var(--theme-bg-secondary);
    --theme-btn-disabled-hover-bg: var(--color-gray-700);
    --theme-btn-disabled-hover-border: var(--color-gray-700);

    /* Danger Button (Red - destructive actions) */
    --theme-btn-danger-bg: var(--color-red-600);
    --theme-btn-danger-color: white;
    --theme-btn-danger-hover-bg: var(--color-red-700);
    --theme-btn-danger-border: var(--color-red-700);
    --theme-btn-danger-hover-border: var(--color-red-800);

    /* Warning Button */
    --theme-btn-warning-bg: var(--theme-bg-secondary);
    --theme-btn-warning-color: white;
    --theme-btn-warning-hover-bg: rgba(255, 255, 255, var(--opacity-30));

    /* Unread/Alert Button State */
    --theme-btn-unread-bg: var(--color-red-600);
    --theme-btn-unread-color: white;
    --theme-btn-unread-border: var(--color-red-600);

    /* Ghost Button */
    --theme-btn-ghost-hover-bg: rgba(255, 255, 255, var(--opacity-30));

    /* ========== BADGE COMPONENT ========== */
    /* Default Badge (Gray) */
    --theme-badge-bg: rgba(209, 213, 219, var(--opacity-30));
    --theme-badge-color: var(--color-gray-200);
    --theme-badge-gray-bg: rgba(156, 163, 175, var(--opacity-30));
    --theme-badge-gray-text: white;

    /* Success Badge (Green) */
    --theme-badge-success-bg: var(--color-green-200);
    --theme-badge-success-color: var(--color-gray-900);

    /* Warning Badge (Amber) */
    --theme-badge-warning-bg: var(--color-yellow-400);
    --theme-badge-warning-color: var(--color-gray-900);

    /* Danger Badge (Red) */
    --theme-badge-danger-bg: var(--color-red-400);
    --theme-badge-danger-color: white;
    --theme-badge-danger-text: white;

    /* Info Badge (Blue) */
    --theme-badge-info-bg: var(--color-blue-300);
    --theme-badge-info-color: var(--color-gray-900);

    /* ========== COUNTER BADGES ========== */
    /* Total counter (gray/neutral) */
    --theme-counter-total-bg: var(--color-gray-600);
    --theme-counter-total-color: white;

    /* Unread counter (red/danger) */
    --theme-counter-unread-bg: var(--color-red-600);
    --theme-counter-unread-color: white;

    /* ========== LINK COLORS ========== */
    --theme-link-color: var(--color-blue-200);
    --theme-link-hover-color: var(--color-blue-100);

    /* ========== ACCENT COLORS ========== */
    --theme-accent-primary: var(--color-yellow-400);
    --theme-accent-secondary: var(--color-blue-400);

    /* ========== FOCUS STATES ========== */
    --theme-focus-ring: var(--theme-primary-overlay);
    --theme-focus-color: var(--color-purple-500);

    /* ========== UNREAD STATES ========== */
    --theme-unread-bg: rgba(239, 68, 68, var(--opacity-10));
    --theme-unread-bg-staff: rgba(59, 130, 246, var(--opacity-10));
    --theme-unread-border: var(--color-red-500);

    /* ========== PAGE-SPECIFIC (Consolidated) ========== */
    /* Most pages use same card background */
    --theme-page-section-bg: var(--theme-card-bg);
    --theme-page-heading-color: var(--color-gray-50);
    --theme-page-text-color: var(--color-gray-50);

    /* ========== UI ELEMENTS ========== */
    /* Leaderboard */
    --theme-leaderboard-entry-bg: rgba(0, 0, 0, var(--opacity-40));
    --theme-leaderboard-entry-hover-bg: rgba(0, 0, 0, var(--opacity-50));
    --theme-leaderboard-my-rank-border: var(--color-yellow-400);
    --theme-leaderboard-my-rank-shadow: 0 0 10px rgba(250, 204, 21, var(--opacity-60));

    /* Forum/Messages/Support (Unified) */
    --theme-post-bg: rgba(0, 0, 0, var(--opacity-40));
    --theme-post-hover-bg: rgba(0, 0, 0, var(--opacity-50));
    --theme-post-header-bg: rgba(0, 0, 0, var(--opacity-20));
    --theme-post-text: white;
    --theme-post-text-secondary: var(--color-gray-300);

    /* Support Tickets Status */
    --theme-ticket-status-new-bg: var(--color-green-400);
    --theme-ticket-status-new-color: var(--color-gray-900);
    --theme-ticket-status-responded-bg: var(--color-blue-300);
    --theme-ticket-status-responded-color: var(--color-gray-900);
    --theme-ticket-status-resolved-bg: rgba(209, 213, 219, var(--opacity-40));
    --theme-ticket-status-resolved-color: var(--color-gray-200);

    /* Admin Tables */
    --theme-admin-table-bg: rgba(0, 0, 0, var(--opacity-40));
    --theme-admin-table-header-bg: rgba(0, 0, 0, var(--opacity-30));
    --theme-admin-table-hover-bg: rgba(255, 255, 255, var(--opacity-10));

    /* Modal/Dialog */
    --theme-modal-bg: rgba(0, 0, 0, var(--opacity-50));
    --theme-modal-backdrop: rgba(0, 0, 0, var(--opacity-40));

    /* Section Title */
    --theme-section-title-bg: rgba(0, 0, 0, var(--opacity-20));
}

/* ========== APPLY THEME STYLES ========== */

body[data-theme="sunset"] {
    background-image: var(--theme-bg-image);
    background-size: var(--theme-bg-size);
    background-position: var(--theme-bg-position);
    background-repeat: var(--theme-bg-repeat);
    background-attachment: var(--theme-bg-attachment);
    background-color: var(--theme-bg-primary);
    color: var(--theme-text-primary);
}

/* Apply text shadow to headings for readability on photo */
body[data-theme="sunset"] h1,
body[data-theme="sunset"] h2,
body[data-theme="sunset"] h3,
body[data-theme="sunset"] .page-title {
    text-shadow: var(--theme-text-shadow);
}

/* Menu and header specific styling */
body[data-theme="sunset"] .menu-bar {
    background: var(--theme-menu-bg);
    backdrop-filter: var(--theme-backdrop-blur);
    -webkit-backdrop-filter: var(--theme-backdrop-blur);
}

body[data-theme="sunset"] .header-bar {
    background: var(--theme-header-bg);
    backdrop-filter: var(--theme-backdrop-blur);
    -webkit-backdrop-filter: var(--theme-backdrop-blur);
}

/* Unified menu styling - applies to all menus via .menu-base */
body[data-theme="sunset"] .menu-base {
    color: var(--theme-menu-text);
    text-shadow: var(--theme-text-shadow);
}

/* Apply backdrop blur to search inputs */
body[data-theme="sunset"] .input,
body[data-theme="sunset"] input,
body[data-theme="sunset"] select,
body[data-theme="sunset"] textarea {
    backdrop-filter: var(--theme-backdrop-blur);
    -webkit-backdrop-filter: var(--theme-backdrop-blur);
}

/* Scrollbar */
body[data-theme="sunset"] {
    --theme-scrollbar-thumb: rgba(255, 255, 255, 0.2);
    --theme-scrollbar-thumb-hover: rgba(255, 255, 255, 0.4);
}

/* Logo override for sunset theme */
body[data-theme="sunset"] .logo-image {
    content: url('../../images/twisTable_complete_combined_short.png');
    filter: brightness(1.1);
}