/* ========================================
   Space Theme
   Deep void black with nebula gradients
   and twinkling starfield
   ======================================== */

[data-theme="space"] {
    --sidebar-bg: #05050a;
    --sidebar-header-bg: #0a0a14;
    --topbar-bg: #0a0a14;
    --content-bg: transparent;
    --page-bg: transparent;

    --card-bg: rgba(16, 16, 30, 0.96);
    --card-header-bg: #161628;
    --card-border: #252540;

    --table-bg: rgba(16, 16, 30, 0.96);
    --table-header-bg: #161628;
    --table-border: #252540;
    --table-hover-bg: #1c1c32;
    --table-stripe-bg: #0d0d18;

    --text-primary: #e8e4f8;
    --text-secondary: #b0a8d0;
    --text-muted: #706898;
    --text-inverse: #05050a;

    --border-color: #252540;
    --border-light: #353558;
    --sidebar-header-border: rgba(37, 37, 64, 0.3);
    --topbar-border: rgba(37, 37, 64, 0.3);

    --scrollbar-thumb: #252540;
    --scrollbar-thumb-hover: #353558;

    --sidebar-text: #b0a8d0;
    --sidebar-text-hover: #a080ff;
    --sidebar-active-bg: rgba(160, 128, 255, 0.1);
    --sidebar-active-text: #a080ff;
    --sidebar-active-border: #a080ff;
    --nav-group-bg: transparent;
    --nav-group-border: transparent;
    --nav-group-hover-bg: rgba(160, 128, 255, 0.05);

    --topbar-text: #b0a8d0;
    --topbar-text-active: #a080ff;

    --btn-primary-bg: #7050cc;
    --btn-primary-bg-hover: #8868e0;
    --btn-primary-text: #ffffff;
    --btn-secondary-bg: #161628;
    --btn-secondary-bg-hover: #252540;
    --btn-secondary-text: #b0a8d0;
    --btn-secondary-border: #252540;
    --btn-outline-border: #353558;
    --btn-outline-text: #b0a8d0;

    --input-bg: #10101e;
    --input-border: #252540;
    --input-text: #e8e4f8;
    --input-placeholder: #706898;
    --input-focus-border: #a080ff;
    --input-disabled-bg: #05050a;

    --dropdown-bg: #10101e;
    --dropdown-border: #252540;
    --dropdown-text: #b0a8d0;
    --dropdown-hover-bg: #1c1c32;
    --dropdown-hover-text: #a080ff;

    --modal-bg: #10101e;
    --modal-header-bg: #161628;
    --modal-border: #252540;
    --modal-backdrop: rgba(5, 5, 10, 0.92);

    --alert-info-bg: rgba(80, 160, 255, 0.08);
    --alert-info-border: #50a0ff;
    --alert-info-text: #70b8ff;
    --alert-success-bg: rgba(80, 220, 160, 0.08);
    --alert-success-border: #50dca0;
    --alert-success-text: #70e8b8;
    --alert-warning-bg: rgba(255, 180, 60, 0.08);
    --alert-warning-border: #ffb43c;
    --alert-warning-text: #ffc860;
    --alert-danger-bg: rgba(255, 80, 100, 0.08);
    --alert-danger-border: #ff5064;
    --alert-danger-text: #ff7888;

    --success-color: #50dca0;
    --success-hover: #40b080;
    --warning-color: #ffb43c;
    --warning-hover: #cc9030;
    --danger-color: #ff5064;
    --danger-hover: #cc4050;

    --progress-bg: #161628;

    --avatar-bg: #7050cc;
    --logo-filter: invert(100%) sepia(0%) saturate(0%) brightness(100%);
    --shadow: 0 4px 24px rgba(80, 50, 150, 0.15);
    --link-color: #a080ff;
    --link-hover-color: #c0a8ff;

    /* ── canonical --tl-* contract bridge ───────────────────────────── */
    /* --tl-bg-base must be SOLID (starfield shows on body); use darkest solid void */
    --tl-bg-base:        var(--sidebar-bg, #05050a);
    --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, #05050a);

    --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));
}

/* Space theme personality */
[data-theme="space"] {
    --focus-ring-color: rgba(160, 128, 255, 0.25);
    --border-radius-card: 10px;
    --border-radius-btn: 6px;
    --scrollbar-track: #05050a;
}

[data-theme="space"] ::selection {
    background-color: rgba(160, 128, 255, 0.25);
    color: #e8e4f8;
}

/* backdrop-filter removed for performance — cards use opaque backgrounds */

/* ========================================
   Deep Space Background
   Nebula clouds with colour gradients
   ======================================== */

[data-theme="space"] body {
    background:
        /* Nebula clouds */
        radial-gradient(ellipse 600px 400px at 15% 30%, rgba(100, 40, 180, 0.12), transparent),
        radial-gradient(ellipse 500px 350px at 75% 60%, rgba(40, 80, 180, 0.10), transparent),
        radial-gradient(ellipse 400px 300px at 50% 80%, rgba(180, 40, 100, 0.06), transparent),
        radial-gradient(ellipse 350px 250px at 85% 15%, rgba(60, 120, 200, 0.08), transparent),
        /* Void */
        linear-gradient(180deg, #050508 0%, #08080f 30%, #0a0a16 60%, #060610 100%) fixed !important;
}

/* ========================================
   Twinkling Starfield
   Two layers: bright nearby stars + dim
   distant stars, both with twinkle animation
   ======================================== */

[data-theme="space"]:not([data-effects-off]):not([data-effect-starfield-off]) body::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 0;
    background-image:
        /* Bright stars */
        radial-gradient(circle 1.5px at 50px 80px, rgba(255, 255, 255, 0.9), transparent),
        radial-gradient(circle 1px at 150px 200px, rgba(255, 255, 255, 0.7), transparent),
        radial-gradient(circle 1.5px at 280px 50px, rgba(200, 220, 255, 0.9), transparent),
        radial-gradient(circle 1px at 380px 300px, rgba(255, 255, 255, 0.6), transparent),
        radial-gradient(circle 2px at 500px 120px, rgba(255, 240, 200, 0.8), transparent),
        radial-gradient(circle 1px at 620px 250px, rgba(255, 255, 255, 0.7), transparent),
        radial-gradient(circle 1.5px at 750px 180px, rgba(200, 200, 255, 0.9), transparent),
        radial-gradient(circle 1px at 880px 350px, rgba(255, 255, 255, 0.6), transparent),
        radial-gradient(circle 1.5px at 100px 400px, rgba(255, 230, 200, 0.8), transparent),
        radial-gradient(circle 1px at 200px 500px, rgba(255, 255, 255, 0.7), transparent),
        radial-gradient(circle 2px at 350px 450px, rgba(200, 220, 255, 0.9), transparent),
        radial-gradient(circle 1px at 480px 550px, rgba(255, 255, 255, 0.6), transparent),
        radial-gradient(circle 1.5px at 600px 480px, rgba(255, 240, 200, 0.8), transparent),
        radial-gradient(circle 1px at 720px 520px, rgba(255, 255, 255, 0.7), transparent),
        radial-gradient(circle 1.5px at 850px 100px, rgba(200, 200, 255, 0.9), transparent),
        radial-gradient(circle 1px at 950px 280px, rgba(255, 255, 255, 0.6), transparent),
        radial-gradient(circle 2px at 450px 30px, rgba(255, 220, 180, 1), transparent),
        radial-gradient(circle 1.5px at 700px 400px, rgba(180, 200, 255, 0.9), transparent),
        radial-gradient(circle 1px at 30px 300px, rgba(255, 255, 255, 0.7), transparent),
        radial-gradient(circle 1px at 550px 350px, rgba(255, 255, 255, 0.6), transparent);
    background-size: 1000px 600px;
    animation: stars-twinkle 4s ease-in-out infinite alternate;
}

[data-theme="space"]:not([data-effects-off]):not([data-effect-starfield-off]) body::after {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 0;
    background-image:
        /* Distant dim stars */
        radial-gradient(circle 0.5px at 70px 150px, rgba(255, 255, 255, 0.35), transparent),
        radial-gradient(circle 0.5px at 180px 80px, rgba(255, 255, 255, 0.3), transparent),
        radial-gradient(circle 0.5px at 320px 220px, rgba(200, 200, 255, 0.35), transparent),
        radial-gradient(circle 0.5px at 440px 180px, rgba(255, 255, 255, 0.25), transparent),
        radial-gradient(circle 0.5px at 560px 320px, rgba(255, 230, 200, 0.3), transparent),
        radial-gradient(circle 0.5px at 680px 50px, rgba(255, 255, 255, 0.35), transparent),
        radial-gradient(circle 0.5px at 800px 250px, rgba(200, 220, 255, 0.3), transparent),
        radial-gradient(circle 0.5px at 920px 150px, rgba(255, 255, 255, 0.25), transparent),
        radial-gradient(circle 0.5px at 110px 450px, rgba(255, 255, 255, 0.3), transparent),
        radial-gradient(circle 0.5px at 250px 380px, rgba(200, 200, 255, 0.35), transparent),
        radial-gradient(circle 0.5px at 400px 500px, rgba(255, 255, 255, 0.25), transparent),
        radial-gradient(circle 0.5px at 530px 420px, rgba(255, 230, 200, 0.3), transparent),
        radial-gradient(circle 0.5px at 660px 550px, rgba(255, 255, 255, 0.35), transparent),
        radial-gradient(circle 0.5px at 780px 480px, rgba(200, 220, 255, 0.3), transparent),
        radial-gradient(circle 0.5px at 900px 400px, rgba(255, 255, 255, 0.25), transparent),
        radial-gradient(circle 0.5px at 50px 550px, rgba(255, 240, 220, 0.3), transparent),
        radial-gradient(circle 0.5px at 350px 100px, rgba(255, 255, 255, 0.3), transparent),
        radial-gradient(circle 0.5px at 750px 350px, rgba(200, 200, 255, 0.25), transparent);
    background-size: 1000px 600px;
    animation: stars-twinkle-far 6s ease-in-out infinite alternate-reverse;
    opacity: 0.7;
}

@keyframes stars-twinkle {
    0% { opacity: 0.7; }
    25% { opacity: 1; }
    50% { opacity: 0.6; }
    75% { opacity: 0.9; }
    100% { opacity: 0.8; }
}

@keyframes stars-twinkle-far {
    0% { opacity: 0.5; }
    33% { opacity: 0.8; }
    66% { opacity: 0.4; }
    100% { opacity: 0.7; }
}

/* ========================================
   Shooting Stars — Multiple independent meteors
   Each on a prime-number cycle so they rarely
   sync. When they do overlap → natural shower.
   All behind content panels (z-index: 1).
   ======================================== */

/* Shared meteor trail style */
[data-theme="space"]:not([data-effects-off]):not([data-effect-shootingstars-off]) #page-root::before,
[data-theme="space"]:not([data-effects-off]):not([data-effect-shootingstars-off]) #page-root::after,
[data-theme="space"]:not([data-effects-off]):not([data-effect-shootingstars-off]) .top-row::before,
[data-theme="space"]:not([data-effects-off]):not([data-effect-shootingstars-off]) .top-row::after,
[data-theme="space"]:not([data-effects-off]):not([data-effect-shootingstars-off]) article.content::after {
    content: '';
    position: fixed;
    pointer-events: none;
    z-index: 1;
    border-radius: 1px;
    opacity: 0;
    /* Trail: transparent tail → bright white head */
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(160, 200, 255, 0.03) 15%,
        rgba(200, 220, 255, 0.25) 45%,
        rgba(240, 245, 255, 0.7) 80%,
        #ffffff 100%
    );
}

/* ---- Meteor A: upper-right, heading down-left ---- */
[data-theme="space"]:not([data-effects-off]):not([data-effect-shootingstars-off]) #page-root::before {
    top: 8vh;
    left: 70vw;
    width: 110px;
    height: 2px;
    transform: rotate(215deg) translateX(0);
    animation: meteor-a 11s linear infinite;
}

@keyframes meteor-a {
    0%, 84% { transform: rotate(215deg) translateX(0); opacity: 0; }
    86%     { transform: rotate(215deg) translateX(80px); opacity: 0.7; }
    89%     { transform: rotate(215deg) translateX(320px); opacity: 1; }
    92%     { transform: rotate(215deg) translateX(520px); opacity: 0.3; }
    94%, 100% { transform: rotate(215deg) translateX(650px); opacity: 0; }
}

/* ---- Meteor B: left-center, heading down-right ---- */
[data-theme="space"]:not([data-effects-off]):not([data-effect-shootingstars-off]) #page-root::after {
    top: 22vh;
    left: 10vw;
    width: 90px;
    height: 1.5px;
    /* Override the nebula glow — this is now a meteor */
    bottom: auto;
    right: auto;
    height: 1.5px;
    transform: rotate(155deg) translateX(0);
    animation: meteor-b 17s linear infinite;
}

@keyframes meteor-b {
    0%, 86% { transform: rotate(155deg) translateX(0); opacity: 0; }
    88%     { transform: rotate(155deg) translateX(70px); opacity: 0.6; }
    91%     { transform: rotate(155deg) translateX(280px); opacity: 1; }
    94%     { transform: rotate(155deg) translateX(450px); opacity: 0.25; }
    96%, 100% { transform: rotate(155deg) translateX(560px); opacity: 0; }
}

/* ---- Meteor C: center-top, steep angle ---- */
[data-theme="space"]:not([data-effects-off]):not([data-effect-shootingstars-off]) .top-row::before {
    top: 5vh;
    left: 40vw;
    width: 130px;
    height: 2px;
    transform: rotate(200deg) translateX(0);
    animation: meteor-c 23s linear infinite;
}

@keyframes meteor-c {
    0%, 88% { transform: rotate(200deg) translateX(0); opacity: 0; }
    90%     { transform: rotate(200deg) translateX(90px); opacity: 0.8; }
    93%     { transform: rotate(200deg) translateX(380px); opacity: 1; }
    96%     { transform: rotate(200deg) translateX(580px); opacity: 0.2; }
    98%, 100% { transform: rotate(200deg) translateX(700px); opacity: 0; }
}

/* ---- Meteor D: far right, sharp angle ---- */
[data-theme="space"]:not([data-effects-off]):not([data-effect-shootingstars-off]) .top-row::after {
    top: 15vh;
    left: 85vw;
    width: 80px;
    height: 1.5px;
    transform: rotate(235deg) translateX(0);
    animation: meteor-d 29s linear infinite;
}

@keyframes meteor-d {
    0%, 90% { transform: rotate(235deg) translateX(0); opacity: 0; }
    92%     { transform: rotate(235deg) translateX(60px); opacity: 0.5; }
    94%     { transform: rotate(235deg) translateX(250px); opacity: 1; }
    97%     { transform: rotate(235deg) translateX(400px); opacity: 0.2; }
    98%, 100% { transform: rotate(235deg) translateX(480px); opacity: 0; }
}

/* ---- Meteor E: lower-left, gentle angle ---- */
[data-theme="space"]:not([data-effects-off]):not([data-effect-shootingstars-off]) article.content::after {
    top: 35vh;
    left: 20vw;
    width: 100px;
    height: 1.5px;
    transform: rotate(170deg) translateX(0);
    animation: meteor-e 37s linear infinite;
}

@keyframes meteor-e {
    0%, 91% { transform: rotate(170deg) translateX(0); opacity: 0; }
    93%     { transform: rotate(170deg) translateX(70px); opacity: 0.6; }
    95%     { transform: rotate(170deg) translateX(300px); opacity: 1; }
    97%     { transform: rotate(170deg) translateX(460px); opacity: 0.15; }
    98%, 100% { transform: rotate(170deg) translateX(550px); opacity: 0; }
}

/* ---- Rare Meteors F & G: very long cycles, create "shower" when they overlap ---- */

/* Meteor F: 41s cycle — fires ~once per 41s */
[data-theme="space"]:not([data-effects-off]):not([data-effect-shootingstars-off]) .sidebar::before {
    content: '';
    position: fixed;
    top: 12vh;
    left: 50vw;
    width: 140px;
    height: 2.5px;
    pointer-events: none;
    z-index: 1;
    border-radius: 1px;
    opacity: 0;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(180, 210, 255, 0.05) 20%,
        rgba(220, 235, 255, 0.4) 55%,
        rgba(250, 250, 255, 0.9) 90%,
        #ffffff 100%
    );
    transform: rotate(208deg) translateX(0);
    animation: meteor-f 41s linear infinite;
}

@keyframes meteor-f {
    0%, 92% { transform: rotate(208deg) translateX(0); opacity: 0; }
    94%     { transform: rotate(208deg) translateX(100px); opacity: 0.8; }
    96%     { transform: rotate(208deg) translateX(400px); opacity: 1; }
    98%     { transform: rotate(208deg) translateX(620px); opacity: 0.2; }
    99%, 100% { transform: rotate(208deg) translateX(750px); opacity: 0; }
}

/* Meteor G: 47s cycle — rarest, biggest */
[data-theme="space"]:not([data-effects-off]):not([data-effect-shootingstars-off]) .sidebar::after {
    content: '';
    position: fixed;
    top: 28vh;
    left: 60vw;
    width: 160px;
    height: 2.5px;
    pointer-events: none;
    z-index: 1;
    border-radius: 1px;
    opacity: 0;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(200, 220, 255, 0.05) 15%,
        rgba(230, 240, 255, 0.4) 50%,
        rgba(255, 255, 255, 0.85) 85%,
        #ffffff 100%
    );
    transform: rotate(190deg) translateX(0);
    animation: meteor-g 47s linear infinite;
}

@keyframes meteor-g {
    0%, 93% { transform: rotate(190deg) translateX(0); opacity: 0; }
    95%     { transform: rotate(190deg) translateX(110px); opacity: 0.7; }
    97%     { transform: rotate(190deg) translateX(450px); opacity: 1; }
    99%     { transform: rotate(190deg) translateX(700px); opacity: 0.15; }
    100%    { transform: rotate(190deg) translateX(800px); opacity: 0; }
}

/* ========================================
   Nebula Floor Glow
   Subtle purple haze at the bottom
   ======================================== */

[data-theme="space"]:not([data-effects-off]):not([data-effect-nebula-off]) .content::before {
    content: '';
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 80px;
    pointer-events: none;
    z-index: 1;
    background: linear-gradient(
        to top,
        rgba(60, 30, 120, 0.10) 0%,
        rgba(60, 30, 120, 0.04) 40%,
        transparent 100%
    );
}