/**
 * twisTABLE.shop — Theme: ocean
 * Copyright (c) 2026 twisTABLE / Michael Chrisco. All rights reserved.
 * Unauthorized copying, modification, or distribution is strictly prohibited.
 * @module-id tw-12bbebe5610c
 */
/**
 * Ocean Theme
 *
 * Cool ocean blues with deep sea depth. Dark theme variant
 * with blue-tinted backgrounds and cyan/teal accents.
 *
 * Applied via: body[data-theme="ocean"]
 */

body[data-theme="ocean"] {
    color-scheme: dark;

    /* ========== BACKGROUND ========== */
    --theme-bg-primary: var(--color-ocean-darkest);
    --theme-bg-secondary: var(--color-ocean-medium);
    --theme-bg-image: none;
    --theme-bg-size: auto;
    --theme-bg-position: center 90%;
    --theme-bg-repeat: no-repeat;
    --theme-bg-attachment: scroll;
    --theme-bg-tint-subtle: rgba(var(--color-white-rgb), var(--opacity-4));
    --theme-bg-tint-light: rgba(var(--color-white-rgb), var(--opacity-6));
    --theme-bg-tint-medium: rgba(var(--color-white-rgb), var(--opacity-8));

    /* ========== TEXT COLORS ========== */
    --theme-text-primary: var(--color-ocean-text);
    --theme-text-secondary: var(--color-ocean-text-secondary);
    --theme-text-muted: var(--color-ocean-text-muted);
    --theme-text-shadow: none;
    --theme-text-disabled: var(--color-ocean-text-disabled);

    /* ========== STRUCTURAL COLORS ========== */
    --theme-border-color: var(--color-ocean-border);
    --theme-border-color-hover: var(--color-ocean-border-accent);
    --theme-border-light: var(--color-ocean-border);
    --theme-hover-bg: rgba(var(--color-sky-400-rgb), var(--opacity-10));

    /* ========== SHADOWS ========== */
    --theme-shadow-xs: rgba(var(--color-ocean-900-rgb), var(--opacity-10));
    --theme-shadow-sm: rgba(var(--color-ocean-900-rgb), var(--opacity-20));
    --theme-shadow-md: rgba(var(--color-ocean-900-rgb), var(--opacity-30));
    --theme-shadow-lg: rgba(var(--color-ocean-900-rgb), var(--opacity-40));
    --theme-shadow-xl: rgba(var(--color-ocean-900-rgb), var(--opacity-80));

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

    /* ========== OVERLAYS ========== */
    --theme-overlay-transparent: rgba(var(--color-white-rgb), 0);
    --theme-overlay-xs: rgba(var(--color-white-rgb), var(--opacity-5));
    --theme-overlay-sm: rgba(var(--color-white-rgb), var(--opacity-10));
    --theme-overlay-md: rgba(var(--color-white-rgb), var(--opacity-15));
    --theme-overlay-lg: rgba(var(--color-white-rgb), var(--opacity-25));
    --theme-overlay-xl: rgba(var(--color-white-rgb), var(--opacity-40));
    --theme-overlay-strong: rgba(var(--color-white-rgb), var(--opacity-40));

    /* Legacy overlay names */
    --theme-overlay-lightest: rgba(var(--color-white-rgb), var(--opacity-5));
    --theme-overlay-light: rgba(var(--color-white-rgb), var(--opacity-10));
    --theme-overlay-medium-light: rgba(var(--color-white-rgb), var(--opacity-15));
    --theme-overlay-medium: rgba(var(--color-white-rgb), var(--opacity-25));
    --theme-overlay-medium-strong: rgba(var(--color-white-rgb), var(--opacity-35));

    /* Colored overlays */
    --theme-primary-overlay: rgba(var(--color-sky-400-rgb), var(--opacity-20));
    --theme-success-overlay: rgba(var(--color-green-500-rgb), var(--opacity-20));
    --theme-danger-overlay: rgba(var(--color-red-500-rgb), var(--opacity-20));
    --theme-warning-overlay: rgba(var(--color-orange-500-rgb), var(--opacity-20));

    /* Legacy colored overlays */
    --theme-primary-overlay-lightest: rgba(var(--color-sky-400-rgb), var(--opacity-10));
    --theme-primary-overlay-light: rgba(var(--color-sky-400-rgb), var(--opacity-30));
    --theme-info-overlay-lightest: rgba(var(--color-sky-400-rgb), var(--opacity-10));
    --theme-success-overlay-light: rgba(var(--color-green-500-rgb), var(--opacity-20));
    --theme-success-overlay-focus: rgba(var(--color-green-500-rgb), var(--opacity-20));
    --theme-purple-overlay-lightest: rgba(var(--color-purple-500-rgb), var(--opacity-20));
    --theme-purple-overlay-light: rgba(var(--color-purple-500-rgb), var(--opacity-10));
    --theme-purple-overlay-medium: rgba(var(--color-purple-500-rgb), var(--opacity-30));
    --theme-danger-overlay-light: rgba(var(--color-red-500-rgb), var(--opacity-20));
    --theme-danger-overlay-focus: rgba(var(--color-red-500-rgb), var(--opacity-20));
    --theme-danger-overlay-medium: rgba(var(--color-red-500-rgb), var(--opacity-30));
    --theme-danger-overlay-red-light: rgba(var(--color-red-200-rgb), var(--opacity-20));
    --theme-danger-overlay-red-medium: var(--color-overlay-red-medium);
    --theme-filter-active-text: var(--color-ocean-darkest);
    --theme-warning-overlay-medium: rgba(var(--color-orange-500-rgb), var(--opacity-50));
    --theme-warning-overlay-yellow: rgba(var(--color-yellow-100-rgb), var(--opacity-30));

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

    /* ========== NAVIGATION ========== */
    --theme-menu-bg: var(--color-ocean-dark);
    --theme-menu-border: var(--color-ocean-border);
    --theme-menu-text: var(--color-ocean-text);
    --theme-menu-text-disabled: var(--color-ocean-text-disabled);
    --theme-menu-hover-bg: rgba(var(--color-sky-400-rgb), var(--opacity-10));
    --theme-menu-active-bg: rgba(var(--color-sky-400-rgb), var(--opacity-20));

    --theme-header-bg: var(--color-ocean-dark);
    --theme-header-border: var(--color-ocean-border);
    --theme-mobile-menu-bg: rgba(var(--color-ocean-900-rgb), var(--opacity-95));

    /* ========== BACKDROP EFFECTS ========== */
    --theme-backdrop-blur: none;

    /* ========== CARD COMPONENT ========== */
    --theme-card-bg: var(--color-ocean-medium);
    --theme-card-border: var(--color-ocean-border);
    --theme-card-hover-bg: var(--color-ocean-hover);
    --theme-card-hover-border: var(--color-ocean-border-accent);
    --theme-card-active-bg: var(--color-ocean-hover);
    --theme-card-active-border: var(--color-sky-400);
    --theme-card-header-bg: var(--color-ocean-dark);
    --theme-card-footer-bg: var(--color-ocean-dark);

    /* ========== INPUT COMPONENT ========== */
    --theme-input-bg: var(--color-ocean-hover);
    --theme-input-solid-bg: var(--color-ocean-hover);
    --theme-input-border: var(--color-ocean-border-accent);
    --theme-input-color: var(--color-ocean-text);
    --theme-input-placeholder: var(--color-ocean-text-muted);
    --theme-input-focus-border: var(--color-sky-400);
    --theme-input-focus-shadow: rgba(var(--color-sky-400-rgb), var(--opacity-20));
    --theme-input-disabled-bg: var(--color-ocean-dark);

    /* ========== DROPDOWN COMPONENT ========== */
    --theme-dropdown-bg: rgba(var(--color-ocean-900-rgb), var(--opacity-95));
    --theme-dropdown-hover-bg: var(--color-ocean-hover);
    --theme-dropdown-selected-bg: var(--color-ocean-border);
    --theme-dropdown-border: var(--color-ocean-border-accent);
    --theme-dropdown-text: var(--color-ocean-text);

    /* ========== BUTTON COMPONENT ========== */
    /* Primary Button (Cyan) */
    --theme-btn-primary-bg: var(--color-ocean-primary);
    --theme-btn-primary-text: white;
    --theme-btn-primary-hover-bg: var(--color-ocean-primary-hover);
    --theme-btn-primary-border: var(--color-ocean-primary);
    --theme-btn-primary-hover-border: var(--color-ocean-primary-hover);

    /* Secondary Button */
    --theme-btn-secondary-bg: var(--color-ocean-medium);
    --theme-btn-secondary-text: var(--color-ocean-text);
    --theme-btn-secondary-hover-bg: var(--color-ocean-hover);
    --theme-btn-secondary-border: var(--color-ocean-border-accent);

    /* Success Button */
    --theme-btn-success-bg: var(--color-success-dark);
    --theme-btn-success-text: var(--color-green-100);
    --theme-btn-success-hover-bg: var(--color-green-800);
    --theme-btn-success-border: var(--color-green-700);
    --theme-btn-success-hover-border: var(--color-green-800);

    /* Disabled Button */
    --theme-btn-disabled-bg: var(--color-ocean-medium);
    --theme-btn-disabled-border: var(--color-ocean-medium);
    --theme-btn-disabled-hover-bg: var(--color-ocean-hover);
    --theme-btn-disabled-hover-border: var(--color-ocean-hover);

    /* Danger Button */
    --theme-btn-danger-bg: var(--color-red-600);
    --theme-btn-danger-text: 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(--color-warning-dark);
    --theme-btn-warning-text: white;
    --theme-btn-warning-border: var(--color-orange-700);
    --theme-btn-warning-hover-bg: var(--color-orange-700);
    --theme-btn-warning-hover-border: var(--color-orange-700);

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

    /* Ghost Button */
    --theme-btn-ghost-hover-bg: var(--color-ocean-hover);

    /* ========== BADGE COMPONENT ========== */
    --theme-badge-bg: var(--color-ocean-border);
    --theme-badge-color: var(--color-ocean-text-secondary);
    --theme-badge-gray-bg: var(--color-ocean-border);
    --theme-badge-gray-text: var(--color-ocean-text-secondary);

    --theme-badge-success-bg: var(--color-green-200);
    --theme-badge-success-color: var(--color-green-200);

    --theme-badge-warning-bg: var(--color-orange-700);
    --theme-badge-warning-color: var(--color-yellow-300);

    --theme-badge-danger-bg: var(--color-red-800);
    --theme-badge-danger-color: var(--color-red-200);
    --theme-badge-danger-text: var(--color-red-200);

    --theme-badge-info-bg: var(--color-ocean-info-bg);
    --theme-badge-info-color: var(--color-ocean-info);

    /* ========== COUNTER BADGES ========== */
    --theme-counter-total-bg: var(--color-ocean-border-accent);
    --theme-counter-total-color: white;

    --theme-counter-unread-bg: var(--color-red-600);
    --theme-counter-unread-color: white;

    /* ========== LINK COLORS ========== */
    --theme-link-color: var(--color-sky-400);
    --theme-link-hover-color: var(--color-ocean-info);

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

    /* ========== FOCUS STATES ========== */
    --theme-focus-ring: rgba(var(--color-sky-400-rgb), var(--opacity-20));
    --theme-focus-color: var(--color-sky-400);

    /* ========== UNREAD STATES ========== */
    --theme-unread-bg: rgba(var(--color-red-500-rgb), var(--opacity-10));
    --theme-unread-bg-staff: rgba(var(--color-sky-400-rgb), var(--opacity-10));
    --theme-unread-border: var(--color-red-500);

    /* ========== PAGE-SPECIFIC ========== */
    --theme-page-section-bg: var(--color-ocean-medium);
    --theme-page-heading-color: var(--color-ocean-text);
    --theme-page-text-color: var(--color-ocean-text-secondary);

    /* ========== UI ELEMENTS ========== */
    /* Leaderboard */
    --theme-leaderboard-entry-bg: var(--color-ocean-medium);
    --theme-leaderboard-entry-hover-bg: var(--color-ocean-hover);
    --theme-leaderboard-my-rank-border: var(--color-sky-400);
    --theme-leaderboard-my-rank-shadow: 0 0 10px rgba(var(--color-sky-400-rgb), var(--opacity-40));

    /* Forum/Messages/Support */
    --theme-post-bg: var(--color-ocean-medium);
    --theme-post-hover-bg: var(--color-ocean-hover);
    --theme-post-header-bg: var(--color-ocean-dark);
    --theme-post-text: var(--color-ocean-text);
    --theme-post-text-secondary: var(--color-ocean-text-secondary);

    /* Support Tickets Status */
    --theme-ticket-status-new-bg: var(--color-green-900);
    --theme-ticket-status-new-color: var(--color-green-200);
    --theme-ticket-status-responded-bg: var(--color-ocean-info-bg);
    --theme-ticket-status-responded-color: var(--color-ocean-info);
    --theme-ticket-status-resolved-bg: var(--color-ocean-border);
    --theme-ticket-status-resolved-color: var(--color-ocean-text-secondary);

    /* Admin Tables */
    --theme-admin-table-bg: var(--color-ocean-medium);
    --theme-admin-table-header-bg: var(--color-ocean-dark);
    --theme-admin-table-hover-bg: rgba(var(--color-sky-400-rgb), var(--opacity-10));

    /* Admin Sort Buttons */
    --theme-admin-sort-blue-bg: var(--color-sort-blue-bg);
    --theme-admin-sort-blue-color: var(--color-blue-400);
    --theme-admin-sort-purple-bg: var(--color-sort-purple-bg);
    --theme-admin-sort-purple-color: var(--color-purple-500);
    --theme-admin-sort-red-bg: var(--color-sort-red-bg);
    --theme-admin-sort-red-color: var(--color-red-600);
    --theme-admin-sort-green-bg: var(--color-sort-green-bg);
    --theme-admin-sort-green-color: var(--color-green-600);
    --theme-admin-sort-orange-bg: var(--color-sort-orange-bg);
    --theme-admin-sort-orange-color: var(--color-orange-400);
    --theme-admin-sort-suspend-color: var(--color-brown-600);
    --theme-admin-sort-gray-bg: var(--color-sort-gray-bg);
    --theme-admin-sort-gray-border: var(--color-gray-400);
    --theme-admin-sort-gray-color: var(--color-gray-700);
    --theme-admin-sort-deactivate-border: var(--color-gray-500);
    --theme-admin-sort-hover-bg: var(--color-sort-hover-bg);
    --theme-admin-sort-arrow-color: var(--color-black);
    --theme-admin-btn-add-bg: var(--color-ocean-primary);
    --theme-admin-btn-add-hover-bg: var(--color-ocean-primary-hover);

    /* Admin User Management */
    --theme-admin-user-border: var(--color-ocean-border-accent);
    --theme-admin-user-bg: rgba(var(--color-ocean-900-rgb), var(--opacity-40));
    --theme-admin-user-hover-bg: rgba(var(--color-sky-400-rgb), var(--opacity-10));
    --theme-admin-user-deactivated-overlay: rgba(var(--color-ocean-900-rgb), var(--opacity-20));
    --theme-admin-audit-row-bg: rgba(var(--color-ocean-900-rgb), var(--opacity-20));

    /* User Popup */
    --theme-user-popup-bg: rgba(var(--color-ocean-900-rgb), var(--opacity-75));

    /* Modal/Dialog */
    --theme-modal-bg: var(--color-ocean-medium);
    --theme-modal-backdrop: rgba(var(--color-ocean-900-rgb), var(--opacity-60));

    /* Section Title */
    --theme-section-title-bg: var(--color-ocean-dark);
}

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

body[data-theme="ocean"] {
    background-color: var(--theme-bg-primary);
    color: var(--theme-text-primary);
}

body[data-theme="ocean"] .menu-bar {
    background: var(--theme-menu-bg);
}

body[data-theme="ocean"] .header-bar {
    background: var(--theme-header-bg);
}

body[data-theme="ocean"] .menu-base {
    color: var(--theme-menu-text);
}

body[data-theme="ocean"] .card {
    box-shadow: 0 1px 3px var(--theme-shadow-md);
}

body[data-theme="ocean"] .card:hover {
    box-shadow: 0 4px 6px var(--theme-shadow-lg);
}

/* Scrollbar */
body[data-theme="ocean"] {
    --theme-scrollbar-thumb: rgba(var(--color-sky-400-rgb), var(--opacity-20));
    --theme-scrollbar-thumb-hover: rgba(var(--color-sky-400-rgb), var(--opacity-40));
}

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