/* ========================================
   Ocean Deep Theme
   Deep navy with aqua/teal accents
   ======================================== */

[data-theme="ocean"] {
    --sidebar-bg: #0a1628;
    --sidebar-header-bg: #0d1d33;
    --topbar-bg: #0d1d33;
    --content-bg: transparent;
    --page-bg: transparent;

    --card-bg: rgba(22, 43, 77, 0.96);
    --card-header-bg: #1c3560;
    --card-border: #264a7a;

    --table-bg: rgba(22, 43, 77, 0.96);
    --table-header-bg: #1c3560;
    --table-border: #264a7a;
    --table-hover-bg: #1e3a66;
    --table-stripe-bg: #12243e;

    --text-primary: #e0f0ff;
    --text-secondary: #8cb4d8;
    --text-muted: #5a8ab4;
    --text-inverse: #0a1628;

    --border-color: #264a7a;
    --border-light: #306090;
    --sidebar-header-border: rgba(38, 74, 122, 0.3);
    --topbar-border: rgba(38, 74, 122, 0.3);

    --scrollbar-thumb: #264a7a;
    --scrollbar-thumb-hover: #306090;

    --sidebar-text: #8cb4d8;
    --sidebar-text-hover: #00d4ff;
    --sidebar-active-bg: rgba(0, 212, 255, 0.1);
    --sidebar-active-text: #00d4ff;
    --sidebar-active-border: #00d4ff;
    --nav-group-bg: transparent;
    --nav-group-border: transparent;
    --nav-group-hover-bg: rgba(0, 212, 255, 0.05);

    --topbar-text: #8cb4d8;
    --topbar-text-active: #00d4ff;

    --btn-primary-bg: #00a8cc;
    --btn-primary-bg-hover: #00d4ff;
    --btn-primary-text: #ffffff;
    --btn-secondary-bg: #1c3560;
    --btn-secondary-bg-hover: #264a7a;
    --btn-secondary-text: #8cb4d8;
    --btn-secondary-border: #264a7a;
    --btn-outline-border: #306090;
    --btn-outline-text: #8cb4d8;

    --input-bg: #162b4d;
    --input-border: #264a7a;
    --input-text: #e0f0ff;
    --input-placeholder: #5a8ab4;
    --input-focus-border: #00d4ff;
    --input-disabled-bg: #0a1628;

    --dropdown-bg: #162b4d;
    --dropdown-border: #264a7a;
    --dropdown-text: #8cb4d8;
    --dropdown-hover-bg: #1e3a66;
    --dropdown-hover-text: #00d4ff;

    --modal-bg: #162b4d;
    --modal-header-bg: #1c3560;
    --modal-border: #264a7a;
    --modal-backdrop: rgba(10, 22, 40, 0.85);

    --alert-info-bg: rgba(0, 212, 255, 0.1);
    --alert-info-border: #00d4ff;
    --alert-info-text: #00d4ff;
    --alert-success-bg: rgba(0, 200, 150, 0.1);
    --alert-success-border: #00c896;
    --alert-success-text: #00c896;
    --alert-warning-bg: rgba(255, 180, 50, 0.1);
    --alert-warning-border: #ffb432;
    --alert-warning-text: #ffb432;
    --alert-danger-bg: rgba(255, 80, 80, 0.1);
    --alert-danger-border: #ff5050;
    --alert-danger-text: #ff7777;

    --success-color: #00c896;
    --success-hover: #00a67d;
    --warning-color: #ffb432;
    --warning-hover: #cc9028;
    --danger-color: #ff5050;
    --danger-hover: #cc4040;

    --progress-bg: #1c3560;

    --avatar-bg: #00a8cc;
    --logo-filter: invert(100%) sepia(0%) saturate(0%) brightness(100%);
    --shadow: 0 4px 24px rgba(0, 120, 180, 0.15);
    --link-color: #00d4ff;
    --link-hover-color: #66e5ff;

    /* ── canonical --tl-* contract bridge ───────────────────────────── */
    /* --page-bg/--content-bg are transparent (animated body shows through);
       map --tl-bg-base to the solid dark --sidebar-bg (#0a1628) instead. */
    --tl-bg-base:        var(--sidebar-bg, #0a1628);
    --tl-bg-elevated:    var(--card-bg);
    --tl-bg-elevated-2:  var(--card-header-bg, var(--table-stripe-bg, var(--card-bg)));
    --tl-bg-elevated-3:  var(--btn-secondary-bg, var(--table-hover-bg, var(--card-bg)));
    --tl-bg-hover:       var(--table-hover-bg, var(--nav-group-hover-bg, var(--card-bg)));
    --tl-bg-input:       var(--input-bg, var(--card-bg));

    --tl-text-primary:   var(--text-primary);
    --tl-text-secondary: var(--text-secondary, var(--text-primary));
    --tl-text-muted:     var(--text-muted, var(--text-secondary));
    --tl-text-subtle:    var(--input-placeholder, var(--text-muted));
    --tl-text-inverse:   var(--text-inverse, #0a0a0a);

    --tl-accent-primary:        var(--link-color, var(--btn-primary-bg-hover, var(--btn-primary-bg)));
    --tl-accent-primary-light:  var(--link-hover-color, var(--sidebar-text-hover, var(--link-color)));
    --tl-accent-primary-dark:   var(--btn-primary-bg, var(--link-color));

    --tl-border-default: var(--border-color, var(--card-border));
    --tl-border-subtle:  var(--card-border, var(--border-color));
    --tl-border-strong:  var(--border-light, var(--input-border, var(--border-color)));
    --tl-border-focus:   var(--input-focus-border, var(--link-color, var(--btn-primary-bg)));

    --tl-card-bg:        var(--card-bg);
    --tl-card-border:    var(--card-border, var(--border-color));
    --tl-card-header-bg: var(--card-header-bg, var(--card-bg));

    --tl-button-primary-bg:     var(--btn-primary-bg);
    --tl-button-primary-text:   var(--btn-primary-text, #fff);
    --tl-button-secondary-bg:   var(--btn-secondary-bg, var(--card-header-bg));
    --tl-button-secondary-text: var(--btn-secondary-text, var(--text-secondary));

    --tl-success: var(--success-color, #4caf50);
    --tl-error:   var(--danger-color, #e05050);
    --tl-warning: var(--warning-color, #f4c430);
    --tl-info:    var(--alert-info-text, var(--link-color, #4a9eff));
    --tl-error-bg:     var(--alert-danger-bg, rgba(224,80,80,.12));
    --tl-error-border: var(--alert-danger-border, var(--danger-color, #e05050));

    --tl-shadow-sm: var(--shadow, 0 1px 2px rgba(0,0,0,.3));
    --tl-shadow-md: var(--shadow, 0 4px 12px rgba(0,0,0,.4));
    --tl-shadow-lg: var(--shadow, 0 10px 30px rgba(0,0,0,.5));
}

/* Ocean theme personality */
[data-theme="ocean"] {
    --focus-ring-color: rgba(0, 212, 255, 0.25);
    --border-radius-card: 12px;
    --border-radius-btn: 8px;
    --scrollbar-track: #0a1628;
}

[data-theme="ocean"] ::selection {
    background-color: rgba(0, 212, 255, 0.25);
    color: #e0f0ff;
}

/* Cards/tables use opaque backgrounds instead of backdrop-filter for performance */

/* ========================================
   Underwater Light Caustics
   Subtle rippling light pattern on content
   ======================================== */

[data-theme="ocean"] body {
    background: linear-gradient(180deg, #1a3a5c 0%, #122a48 20%, #0d1e34 45%, #081420 70%, #050e18 100%) fixed !important;
}

/* ========================================
   Rising Bubbles
   Two layers for depth parallax
   ======================================== */

/* Bubbles — anchored below the nav bar, background-position animation
   keeps bubbles within element bounds (transform would move the whole element) */
/* Bubbles use transform: translateY (GPU-composited) instead of background-position (triggers paint).
   Elements are taller than viewport so translated content stays visible. */
[data-theme="ocean"]:not([data-effects-off]):not([data-effect-bubbles-off]) body::before {
    content: '';
    position: fixed;
    top: 3.5rem;
    left: 0;
    width: 100%;
    height: calc(100vh - 3.5rem + 600px);
    pointer-events: none;
    z-index: 9998;
    will-change: transform;
    background-image:
        radial-gradient(circle 2px at 80px 100px, rgba(150, 220, 255, 0.25), transparent),
        radial-gradient(circle 1.5px at 200px 300px, rgba(150, 220, 255, 0.20), transparent),
        radial-gradient(circle 2px at 350px 180px, rgba(150, 220, 255, 0.25), transparent),
        radial-gradient(circle 1.5px at 480px 420px, rgba(150, 220, 255, 0.18), transparent),
        radial-gradient(circle 2px at 620px 50px, rgba(150, 220, 255, 0.22), transparent),
        radial-gradient(circle 1.5px at 750px 350px, rgba(150, 220, 255, 0.20), transparent),
        radial-gradient(circle 2px at 900px 220px, rgba(150, 220, 255, 0.25), transparent),
        radial-gradient(circle 1.5px at 130px 500px, rgba(150, 220, 255, 0.18), transparent),
        radial-gradient(circle 2px at 550px 480px, rgba(150, 220, 255, 0.22), transparent),
        radial-gradient(circle 1.5px at 820px 120px, rgba(150, 220, 255, 0.20), transparent);
    background-size: 1000px 600px;
    animation: bubbles-rise 14s linear infinite;
}

[data-theme="ocean"]:not([data-effects-off]):not([data-effect-bubbles-off]) body::after {
    content: '';
    position: fixed;
    top: 3.5rem;
    left: 0;
    width: 100%;
    height: calc(100vh - 3.5rem + 600px);
    pointer-events: none;
    z-index: 9998;
    will-change: transform;
    background-image:
        radial-gradient(circle 3.5px at 120px 200px, rgba(180, 235, 255, 0.15), transparent),
        radial-gradient(circle 3px at 340px 80px, rgba(180, 235, 255, 0.12), transparent),
        radial-gradient(circle 4px at 560px 350px, rgba(180, 235, 255, 0.14), transparent),
        radial-gradient(circle 3px at 780px 150px, rgba(180, 235, 255, 0.10), transparent),
        radial-gradient(circle 3.5px at 250px 480px, rgba(180, 235, 255, 0.12), transparent),
        radial-gradient(circle 3.5px at 900px 300px, rgba(180, 235, 255, 0.12), transparent);
    background-size: 1000px 600px;
    animation: bubbles-rise 20s linear infinite;
    opacity: 0.7;
}

@keyframes bubbles-rise {
    from { transform: translateY(0); }
    to { transform: translateY(-600px); }
}

/* Big bubbles layer removed for performance — 2 bubble layers is sufficient */

/* ========================================
   Sandy Seabed — bottom edge gradient
   ======================================== */

[data-theme="ocean"]:not([data-effects-off]):not([data-effect-seabed-off]) #page-root::after {
    content: '';
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 60px;
    pointer-events: none;
    z-index: 9997;
    background: linear-gradient(
        to top,
        rgba(194, 170, 120, 0.18) 0%,
        rgba(194, 170, 120, 0.08) 40%,
        transparent 100%
    );
}

/* ========================================
   Wavy Bottom Edge on the Top Nav Bar
   The nav IS the water surface
   ======================================== */

[data-theme="ocean"] .top-row {
    position: relative;
    z-index: 10;
    /* Night sky with stars — reduced gradient count for performance */
    background:
        radial-gradient(circle 1px at 40px 8px, rgba(255,255,255,0.8), transparent),
        radial-gradient(circle 1px at 210px 6px, rgba(255,255,255,0.7), transparent),
        radial-gradient(circle 1px at 380px 10px, rgba(255,255,255,0.8), transparent),
        radial-gradient(circle 1px at 560px 16px, rgba(255,255,255,0.7), transparent),
        radial-gradient(circle 1px at 730px 12px, rgba(255,255,255,0.6), transparent),
        radial-gradient(circle 1px at 900px 5px, rgba(255,255,255,0.8), transparent),
        radial-gradient(circle 1.5px at 150px 11px, rgba(200,220,255,0.9), transparent),
        radial-gradient(circle 1.5px at 500px 9px, rgba(200,220,255,0.7), transparent),
        linear-gradient(180deg, #020508 0%, #060e18 100%) !important;
}

/* ========================================
   Wave Surface — top of content area
   Scrolls away naturally with page content
   Overlaps nav slightly with negative margin
   ======================================== */

[data-theme="ocean"] article.content {
    position: relative;
    padding-top: 0 !important;
    overflow-x: clip;
}

[data-theme="ocean"]:not([data-effects-off]):not([data-effect-waves-off]) article.content::before {
    content: '';
    display: block;
    width: calc(200% + 6rem);
    margin-left: -1.5rem;
    height: 14px;
    margin-top: -2px;
    pointer-events: none;
    background: linear-gradient(180deg, #060e18 0%, #1a3a5c 100%);
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 14' preserveAspectRatio='none'%3E%3Cpath d='M0,0 C50,0 50,10 100,10 C150,10 150,0 200,0 C250,0 250,12 300,12 C350,12 350,0 400,0 C450,0 450,9 500,9 C550,9 550,0 600,0 C650,0 650,11 700,11 C750,11 750,0 800,0 C850,0 850,10 900,10 C950,10 950,0 1000,0 C1050,0 1050,12 1100,12 C1150,12 1150,0 1200,0 L1200,0 L0,0 Z' fill='white'/%3E%3C/svg%3E");
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 14' preserveAspectRatio='none'%3E%3Cpath d='M0,0 C50,0 50,10 100,10 C150,10 150,0 200,0 C250,0 250,12 300,12 C350,12 350,0 400,0 C450,0 450,9 500,9 C550,9 550,0 600,0 C650,0 650,11 700,11 C750,11 750,0 800,0 C850,0 850,10 900,10 C950,10 950,0 1000,0 C1050,0 1050,12 1100,12 C1150,12 1150,0 1200,0 L1200,0 L0,0 Z' fill='white'/%3E%3C/svg%3E");
    mask-size: 50% 100%;
    -webkit-mask-size: 50% 100%;
    mask-repeat: repeat-x;
    -webkit-mask-repeat: repeat-x;
    flex-shrink: 0;
    will-change: transform;
    animation: ocean-wave-drift 16s linear infinite;
}

@keyframes ocean-wave-drift {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); }
}

/* ========================================
   Day Mode — tropical teal water, bright sky
   Active when daymode effect is ON (data-effect-daymode-off absent).
   defaultOn:false, so the -off attribute is present initially and day is hidden by default.
   ======================================== */

[data-theme="ocean"]:not([data-effect-daymode-off]) {
    --sidebar-bg: #0e6b7a;
    --sidebar-header-bg: #0b5e6c;
    --topbar-bg: #0e6b7a;
    --content-bg: transparent;
    --page-bg: transparent;

    --card-bg: rgba(255, 255, 255, 0.82);
    --card-header-bg: rgba(240, 248, 255, 0.9);
    --card-border: rgba(0, 160, 190, 0.25);

    --table-bg: rgba(255, 255, 255, 0.82);
    --table-header-bg: rgba(240, 248, 255, 0.9);
    --table-border: rgba(0, 160, 190, 0.25);
    --table-hover-bg: rgba(220, 245, 255, 0.85);
    --table-stripe-bg: rgba(240, 252, 255, 0.7);

    --text-primary: #1a2a30;
    --text-secondary: #2a4550;
    --text-muted: #5a7a88;
    --text-inverse: #f0faff;

    --border-color: rgba(0, 160, 190, 0.2);
    --border-light: rgba(0, 160, 190, 0.12);
    --sidebar-header-border: rgba(255, 255, 255, 0.2);
    --topbar-border: rgba(255, 255, 255, 0.2);

    --scrollbar-thumb: rgba(0, 140, 170, 0.35);
    --scrollbar-thumb-hover: rgba(0, 140, 170, 0.55);

    --sidebar-text: rgba(255, 255, 255, 0.8);
    --sidebar-text-hover: #ffffff;
    --sidebar-active-bg: rgba(255, 255, 255, 0.18);
    --sidebar-active-text: #ffffff;
    --sidebar-active-border: #ffffff;
    --nav-group-hover-bg: rgba(255, 255, 255, 0.08);

    --topbar-text: rgba(255, 255, 255, 0.8);
    --topbar-text-active: #ffffff;

    --btn-primary-bg: #00a0be;
    --btn-primary-bg-hover: #00c0e0;
    --btn-primary-text: #ffffff;
    --btn-secondary-bg: rgba(255, 255, 255, 0.7);
    --btn-secondary-bg-hover: rgba(255, 255, 255, 0.9);
    --btn-secondary-text: #1a3a45;
    --btn-secondary-border: rgba(0, 160, 190, 0.25);
    --btn-outline-border: rgba(0, 140, 170, 0.35);
    --btn-outline-text: #1a3a45;

    --input-bg: rgba(255, 255, 255, 0.9);
    --input-border: rgba(0, 160, 190, 0.25);
    --input-text: #1a2a30;
    --input-placeholder: #7a9aa8;
    --input-focus-border: #00b8d8;
    --input-disabled-bg: rgba(230, 245, 250, 0.8);

    --dropdown-bg: rgba(255, 255, 255, 0.95);
    --dropdown-border: rgba(0, 160, 190, 0.2);
    --dropdown-text: #1a3a45;
    --dropdown-hover-bg: #00a8cc;
    --dropdown-hover-text: #ffffff;

    --modal-bg: #f0faff;
    --modal-header-bg: #e0f4fa;
    --modal-border: rgba(0, 160, 190, 0.2);
    --modal-backdrop: rgba(0, 40, 60, 0.5);

    --alert-info-bg: rgba(0, 180, 220, 0.1);
    --alert-info-border: #00a8cc;
    --alert-info-text: #006880;
    --alert-success-bg: rgba(0, 180, 120, 0.1);
    --alert-success-border: #00b478;
    --alert-success-text: #00704a;
    --alert-warning-bg: rgba(240, 170, 30, 0.12);
    --alert-warning-border: #e0a020;
    --alert-warning-text: #7a5800;
    --alert-danger-bg: rgba(220, 60, 60, 0.1);
    --alert-danger-border: #dc3c3c;
    --alert-danger-text: #8a1a1a;

    --success-color: #00a868;
    --success-hover: #008850;
    --warning-color: #d49a18;
    --warning-hover: #b08010;
    --danger-color: #d04040;
    --danger-hover: #b03030;

    --progress-bg: rgba(0, 160, 190, 0.15);
    --avatar-bg: #00a0be;
    --logo-filter: invert(100%) sepia(0%) saturate(0%) brightness(100%);
    --shadow: 0 2px 12px rgba(0, 80, 120, 0.12);
    --link-color: #007a96;
    --link-hover-color: #005a70;
    --focus-ring-color: rgba(0, 180, 220, 0.3);
    --scrollbar-track: rgba(0, 160, 190, 0.08);

    /* ── canonical --tl-* contract bridge (day palette) ─────────────── */
    /* --page-bg/--content-bg transparent here too; use solid --sidebar-bg (#0e6b7a). */
    --tl-bg-base:        var(--sidebar-bg, #0e6b7a);
    --tl-bg-elevated:    var(--card-bg);
    --tl-bg-elevated-2:  var(--card-header-bg, var(--table-stripe-bg, var(--card-bg)));
    --tl-bg-elevated-3:  var(--btn-secondary-bg, var(--table-hover-bg, var(--card-bg)));
    --tl-bg-hover:       var(--table-hover-bg, var(--nav-group-hover-bg, var(--card-bg)));
    --tl-bg-input:       var(--input-bg, var(--card-bg));

    --tl-text-primary:   var(--text-primary);
    --tl-text-secondary: var(--text-secondary, var(--text-primary));
    --tl-text-muted:     var(--text-muted, var(--text-secondary));
    --tl-text-subtle:    var(--input-placeholder, var(--text-muted));
    --tl-text-inverse:   var(--text-inverse, #0a0a0a);

    --tl-accent-primary:        var(--link-color, var(--btn-primary-bg-hover, var(--btn-primary-bg)));
    --tl-accent-primary-light:  var(--link-hover-color, var(--sidebar-text-hover, var(--link-color)));
    --tl-accent-primary-dark:   var(--btn-primary-bg, var(--link-color));

    --tl-border-default: var(--border-color, var(--card-border));
    --tl-border-subtle:  var(--card-border, var(--border-color));
    --tl-border-strong:  var(--border-light, var(--input-border, var(--border-color)));
    --tl-border-focus:   var(--input-focus-border, var(--link-color, var(--btn-primary-bg)));

    --tl-card-bg:        var(--card-bg);
    --tl-card-border:    var(--card-border, var(--border-color));
    --tl-card-header-bg: var(--card-header-bg, var(--card-bg));

    --tl-button-primary-bg:     var(--btn-primary-bg);
    --tl-button-primary-text:   var(--btn-primary-text, #fff);
    --tl-button-secondary-bg:   var(--btn-secondary-bg, var(--card-header-bg));
    --tl-button-secondary-text: var(--btn-secondary-text, var(--text-secondary));

    --tl-success: var(--success-color, #4caf50);
    --tl-error:   var(--danger-color, #e05050);
    --tl-warning: var(--warning-color, #f4c430);
    --tl-info:    var(--alert-info-text, var(--link-color, #4a9eff));
    --tl-error-bg:     var(--alert-danger-bg, rgba(224,80,80,.12));
    --tl-error-border: var(--alert-danger-border, var(--danger-color, #e05050));

    --tl-shadow-sm: var(--shadow, 0 1px 2px rgba(0,0,0,.3));
    --tl-shadow-md: var(--shadow, 0 4px 12px rgba(0,0,0,.4));
    --tl-shadow-lg: var(--shadow, 0 10px 30px rgba(0,0,0,.5));
}

/* Day mode: tropical water gradient */
[data-theme="ocean"]:not([data-effect-daymode-off]) body {
    background: linear-gradient(180deg,
        #00c8d0 0%,
        #00b0c0 15%,
        #0098b0 35%,
        #0080a0 55%,
        #006888 75%,
        #004860 100%
    ) fixed !important;
}

/* Day mode: bright sky topbar with sun */
[data-theme="ocean"]:not([data-effect-daymode-off]) .top-row {
    background:
        /* Sun */
        radial-gradient(circle 14px at 85% 50%, #fff8d0 0%, rgba(255, 230, 100, 0.6) 40%, transparent 70%),
        radial-gradient(circle 22px at 85% 50%, rgba(255, 220, 80, 0.2) 0%, transparent 100%),
        /* Wispy clouds */
        radial-gradient(ellipse 60px 8px at 20% 40%, rgba(255, 255, 255, 0.5), transparent),
        radial-gradient(ellipse 45px 6px at 35% 65%, rgba(255, 255, 255, 0.35), transparent),
        radial-gradient(ellipse 70px 7px at 55% 35%, rgba(255, 255, 255, 0.4), transparent),
        radial-gradient(ellipse 40px 5px at 72% 55%, rgba(255, 255, 255, 0.3), transparent),
        /* Sky gradient */
        linear-gradient(180deg, #4ab8e8 0%, #68d0f0 40%, #88e0f8 100%) !important;
}

/* Day mode: wave surface matches sky-to-water transition */
[data-theme="ocean"]:not([data-effect-daymode-off]):not([data-effect-waves-off]) article.content::before {
    background: linear-gradient(180deg, #88e0f8 0%, #00c8d0 100%);
}

/* Day mode: sandy seabed warmer */
[data-theme="ocean"]:not([data-effect-daymode-off]):not([data-effect-seabed-off]) #page-root::after {
    background: linear-gradient(
        to top,
        rgba(210, 190, 140, 0.3) 0%,
        rgba(210, 190, 140, 0.12) 40%,
        transparent 100%
    );
}

/* Day mode: selection colour */
[data-theme="ocean"]:not([data-effect-daymode-off]) ::selection {
    background-color: rgba(0, 180, 220, 0.25);
    color: #1a2a30;
}