[data-theme='alienmoon-document-creator'] {
  --main-gradient-horizontal: linear-gradient(to right, #8cd3f2, #4a7ca0, #1e2a38); /* lunar frost → alien ink → void dusk */
  --main-gradient-horizontal-reverse: linear-gradient(to right, #1e2a38, #4a7ca0, #8cd3f2);
  --main-gradient-vertical: linear-gradient(to bottom, #8cd3f2, #4a7ca0, #1e2a38);

  --highlight-line-color: rgba(140, 211, 242, 0.10); /* frost mist */
  --highlight-button-color: #aeeffb; /* soft plasma glow */
  --selected-line-color: rgba(140, 211, 242, 0.28); /* moon echo */

  --topbar-background-gradient: linear-gradient(to right, #aeeffb, #6ba0c4, #2f3a4a); /* data dusk */
  --topbar-background-color: #aeeffb; /* pale plasma */
  --topbar-background-alt: linear-gradient(to right, #6ba0c4, #aeeffb);

  --center-inner-gradient: linear-gradient(to right,
    rgba(140, 211, 242, 0.10),   /* frost mist */
    rgba(74, 124, 160, 0.10),    /* alien ink */
    rgba(30, 42, 56, 0.10)       /* void dusk */
  );

  --input-label-color: #d0e6f0; /* lunar parchment */
  --highlight-border-color: rgba(140, 211, 242, 0.3); /* frost edge */

  --peripheral-gradient: linear-gradient(to right,
    rgba(140, 211, 242, 0.15),
    rgba(74, 124, 160, 0.06),
    rgba(30, 42, 56, 0.15)
  );

  --left-inner-bg: url("../../theme_images/alienmoon_document_creator_left_window.png");
  --placeholder-bg: url("../../theme_images/alienmoon_placeholder.png");
  --ribbon-bg: url("../../theme_images/alienmoon_ribbon.png");

  --border-color: #4a7ca0; /* alien ink */

  --line-email-inner-color: #eaf6fc; /* moon parchment veil */
  --line-email-text-color: #1a1f24; /* cosmic ink */

  --chart-color-1: #8cd3f2;    /* lunar frost */
  --chart-color-2: #4a7ca0;    /* alien ink */
  --chart-color-3: #1e2a38;    /* void dusk */
  --chart-color-4: #aeeffb;    /* soft plasma glow */
  --chart-color-5: #1a1f24;    /* cosmic ink */

  --chart-background-color: transparent;
  --chart-border-color: #eeeeee;

  --alert-base-color: #1f3a52; /* deep signal blue */
  --alert-hover-color: #162a3a; /* darker orbit tone */

  --monitor-alert-base-color: #8cd3f2; /* lunar frost glow */
  --monitor-alert-text-color: #1a1f24; /* cosmic ink for legibility */
  --monitor-alert-hover-color: #6bb8d8; /* darker frost drift */
}




/* ALIENMOON */
[data-theme='alienmoon'] {
  --main-gradient-horizontal: linear-gradient(to right, #a6f0ff, #6b9ac4, #2e2e3a); /* moonlight mist → alien alloy → deep space */
  --main-gradient-horizontal-reverse: linear-gradient(to right, #2e2e3a, #6b9ac4, #a6f0ff);
  --main-gradient-vertical: linear-gradient(to bottom, #a6f0ff, #6b9ac4, #2e2e3a);

  --highlight-line-color: rgba(166, 240, 255, 0.12); /* lunar shimmer */
  --highlight-button-color: #c2ffed; /* plasma mint */
  --selected-line-color: rgba(166, 240, 255, 0.35); /* moonbeam trace */

  --topbar-background-gradient: linear-gradient(to right, #c2ffed, #6b9ac4, #2e2e3a); /* alien dusk */
  --topbar-background-color: #c2ffed; /* plasma mint */
  --topbar-background-alt: linear-gradient(to right, #6b9ac4, #c2ffed);

  --center-inner-gradient: linear-gradient(to right,
    rgba(166, 240, 255, 0.12),   /* lunar shimmer */
    rgba(107, 154, 196, 0.12),   /* alien alloy */
    rgba(46, 46, 58, 0.12)       /* cosmic shadow */
  );

  --input-label-color: #e0eaf5;
  --highlight-border-color: rgba(194, 255, 237, 0.4); /* plasma edge */

  --peripheral-gradient: linear-gradient(to right,
    rgba(166, 240, 255, 0.2),
    rgba(107, 154, 196, 0.08),
    rgba(46, 46, 58, 0.2)
  );

  --left-inner-bg: url("../../theme_images/alienmoon_left_window.png");
  --placeholder-bg: url("../../theme_images/alienmoon_placeholder.png");
  --ribbon-bg: url("../../theme_images/alienmoon_ribbon.png");

  --border-color: #6b9ac4; /* alien alloy */

  --line-email-inner-color: #f0faff; /* stardust veil */
  --line-email-text-color: #1a1a1f; /* void ink */

  --chart-color-1: #a6f0ff;    /* moonlight mist */
  --chart-color-2: #6b9ac4;    /* alien alloy */
  --chart-color-3: #2e2e3a;    /* deep space */
  --chart-color-4: #c2ffed;    /* plasma mint */
  --chart-color-5: #1a1a1f;    /* void ink */

  --chart-background-color: transparent;
  --chart-border-color: #ffffff;

  --alert-base-color: #3a6f8f; /* cosmic signal blue */
  --alert-hover-color: #2a4f6f; /* darker orbit tone */

  --monitor-alert-base-color: #a6f0ff; /* moonlight mist — soft yet radiant */
  --monitor-alert-text-color: #1a1a1f; /* void ink for legibility */
  --monitor-alert-hover-color: #8bd4e0; /* deeper lunar drift for hover */
}


[data-theme='alienmoon-history'] {
  --main-gradient-horizontal: linear-gradient(to right, #3c4a5c, #1f2a3a, #11141a); /* lunar stone → alien steel → void dust */
  --main-gradient-horizontal-reverse: linear-gradient(to right, #11141a, #1f2a3a, #3c4a5c);
  --main-gradient-vertical: linear-gradient(to bottom, #3c4a5c, #1f2a3a, #11141a);

  --highlight-line-color: rgba(80, 120, 160, 0.08); /* starlight residue */
  --highlight-button-color: #8cbdd9; /* faded plasma */
  --selected-line-color: rgba(80, 120, 160, 0.25); /* moon trace */

  --topbar-background-gradient: linear-gradient(to right, #4a5f72, #2a3a4f, #151f2a); /* alien dusk cooled */
  --topbar-background-color: #4a5f72; /* subdued starlight */
  --topbar-background-alt: linear-gradient(to right, #2a3a4f, #4a5f72);

  --center-inner-gradient: linear-gradient(to right,
    rgba(80, 120, 160, 0.08),   /* starlight residue */
    rgba(50, 80, 120, 0.08),    /* lunar alloy */
    rgba(30, 40, 60, 0.08)      /* cosmic shadow */
  );

  --input-label-color: #c0d0e0; /* faded data parchment */
  --highlight-border-color: rgba(140, 190, 217, 0.3); /* plasma edge */

  --peripheral-gradient: linear-gradient(to right,
    rgba(80, 120, 160, 0.15),
    rgba(50, 80, 120, 0.05),
    rgba(30, 40, 60, 0.15)
  );

  --left-inner-bg: url("../../theme_images/alienmoon_history_left_window.png");
  --placeholder-bg: url("../../theme_images/alienmoon_placeholder.png");
  --ribbon-bg: url("../../theme_images/alienmoon_ribbon.png");

  --border-color: #2a3a4f; /* alien steel edge */

  --line-email-inner-color: #e6f2fa; /* moon veil muted */
  --line-email-text-color: #11141a; /* void ink */

  --chart-color-1: #8cbdd9;    /* faded plasma */
  --chart-color-2: #4a5f72;    /* lunar stone */
  --chart-color-3: #1f2a3a;    /* alien steel */
  --chart-color-4: #c0d0e0;    /* data parchment */
  --chart-color-5: #11141a;    /* void ink */

  --chart-background-color: transparent;
  --chart-border-color: #cccccc;

  --alert-base-color: #1f3a4d; /* deep cosmic signal */
  --alert-hover-color: #162a3a; /* darker orbit tone */

  --monitor-alert-base-color: #8cbdd9; /* faded plasma glow */
  --monitor-alert-text-color: #11141a; /* void ink for legibility */
  --monitor-alert-hover-color: #6fa0b8; /* darker plasma drift */
}


/* ARCTIC TUNDRA */
[data-theme='arctictundra'] {
  --main-gradient-horizontal: linear-gradient(to right, #d0f0ff, #8bbcd4, #3c4f5c); /* frost veil → glacial steel → tundra dusk */
  --main-gradient-horizontal-reverse: linear-gradient(to right, #3c4f5c, #8bbcd4, #d0f0ff);
  --main-gradient-vertical: linear-gradient(to bottom, #d0f0ff, #8bbcd4, #3c4f5c);
  --highlight-line-color: rgba(208, 240, 255, 0.12); /* frost shimmer */
  --highlight-button-color: #e0fff8; /* mint ice */
  --selected-line-color: rgba(208, 240, 255, 0.35); /* glacier trace */
  --topbar-background-gradient: linear-gradient(to right, #e0fff8, #8bbcd4, #3c4f5c); /* tundra twilight */
  --topbar-background-color: #e0fff8; /* mint ice */
  --topbar-background-alt: linear-gradient(to right, #8bbcd4, #e0fff8);
  --center-inner-gradient: linear-gradient(to right,
    rgba(208, 240, 255, 0.12),   /* frost shimmer */
    rgba(139, 188, 212, 0.12),   /* glacial steel */
    rgba(60, 79, 92, 0.12)       /* tundra dusk */
  );
  --input-label-color: #f0f8fc;
  --highlight-border-color: rgba(224, 255, 248, 0.4); /* icy edge */
  --peripheral-gradient: linear-gradient(to right,
    rgba(208, 240, 255, 0.2),
    rgba(139, 188, 212, 0.08),
    rgba(60, 79, 92, 0.2)
  );
  --left-inner-bg: url("../../theme_images/arctictundra_left_window.png");
  --placeholder-bg: url("../../theme_images/arctictundra_placeholder.png");
  --ribbon-bg: url("../../theme_images/arctictundra_ribbon.png");
  --border-color: #8bbcd4; /* glacial steel */
  --line-email-inner-color: #f8fcff; /* snow veil */
  --line-email-text-color: #1a1a1f; /* tundra ink */
  --chart-color-1: #d0f0ff;      /* frost veil */
  --chart-color-2: #8bbcd4;      /* glacial steel */
  --chart-color-3: #3c4f5c;      /* tundra dusk */
  --chart-color-4: #e0fff8;      /* mint ice */
  --chart-color-5: #1a1a1f;      /* tundra ink */
  --chart-background-color: transparent;
  --chart-border-color: #ffffff;
  --alert-base-color: #4a7f99; /* polar signal blue */
  --alert-hover-color: #355f79; /* deeper frost tone */
  --monitor-alert-base-color: #d0f0ff; /* frost veil — soft yet radiant */
  --monitor-alert-text-color: #1a1a1f; /* tundra ink for legibility */
  --monitor-alert-hover-color: #b0dce8; /* deeper glacial drift for hover */
  --sidebar-icon-color: #1a1a1f; /* tundra ink for legibility */ 
}

/* ARCTIC TUNDRA HISTORY */
[data-theme='arctictundra-history'] {
  --main-gradient-horizontal: linear-gradient(to right, #4a5e6c, #2c3f4f, #1a1f24); /* ice stone → tundra steel → polar dusk */
  --main-gradient-horizontal-reverse: linear-gradient(to right, #1a1f24, #2c3f4f, #4a5e6c);
  --main-gradient-vertical: linear-gradient(to bottom, #4a5e6c, #2c3f4f, #1a1f24);

  --highlight-line-color: rgba(100, 140, 180, 0.08); /* frost residue */
  --highlight-button-color: #a0d0e0; /* faded mint ice */
  --selected-line-color: rgba(100, 140, 180, 0.25); /* glacier trace */

  --topbar-background-gradient: linear-gradient(to right, #5a7080, #3a4f60, #1f2a34); /* tundra twilight cooled */
  --topbar-background-color: #5a7080; /* subdued frostlight */
  --topbar-background-alt: linear-gradient(to right, #3a4f60, #5a7080);

  --center-inner-gradient: linear-gradient(to right,
    rgba(100, 140, 180, 0.08),   /* frost residue */
    rgba(70, 100, 140, 0.08),    /* glacial alloy */
    rgba(40, 60, 80, 0.08)       /* polar shadow */
  );

  --input-label-color: #d0e0ec; /* faded ice parchment */
  --highlight-border-color: rgba(160, 200, 220, 0.3); /* mint edge */

  --peripheral-gradient: linear-gradient(to right,
    rgba(100, 140, 180, 0.15),
    rgba(70, 100, 140, 0.05),
    rgba(40, 60, 80, 0.15)
  );

  --left-inner-bg: url("../../theme_images/arctictundra_history_left_window.png");
  --placeholder-bg: url("../../theme_images/arctictundra_placeholder.png");
  --ribbon-bg: url("../../theme_images/arctictundra_ribbon.png");

  --border-color: #3a4f60; /* tundra steel edge */

  --line-email-inner-color: #f2f8fc; /* snow veil muted */
  --line-email-text-color: #1a1f24; /* polar ink */

  --chart-color-1: #a0d0e0;    /* faded mint ice */
  --chart-color-2: #5a7080;    /* ice stone */
  --chart-color-3: #2c3f4f;    /* tundra steel */
  --chart-color-4: #d0e0ec;    /* ice parchment */
  --chart-color-5: #1a1f24;    /* polar ink */

  --chart-background-color: transparent;
  --chart-border-color: #cccccc;

  --alert-base-color: #2c4a5c; /* deep frost signal */
  --alert-hover-color: #1f3544; /* darker tundra tone */

  --monitor-alert-base-color: #a0d0e0; /* faded mint glow */
  --monitor-alert-text-color: #1a1f24; /* polar ink for legibility */
  --monitor-alert-hover-color: #88b8cc; /* deeper mint drift */
}

/* ARCTIC TUNDRA DOCUMENT CREATOR */
[data-theme='arctictundra-document-creator'] {
  --main-gradient-horizontal: linear-gradient(to right, #b8e8f8, #6fa0c0, #2a3a48); /* glacier glow → tundra ink → polar dusk */
  --main-gradient-horizontal-reverse: linear-gradient(to right, #2a3a48, #6fa0c0, #b8e8f8);
  --main-gradient-vertical: linear-gradient(to bottom, #b8e8f8, #6fa0c0, #2a3a48);

  --highlight-line-color: rgba(184, 232, 248, 0.10); /* frost mist */
  --highlight-button-color: #d4fcff; /* soft mint glow */
  --selected-line-color: rgba(184, 232, 248, 0.28); /* glacier echo */

  --topbar-background-gradient: linear-gradient(to right, #d4fcff, #9ac8dc, #3a4f60); /* data dusk tundra */
  --topbar-background-color: #d4fcff; /* pale mint */
  --topbar-background-alt: linear-gradient(to right, #9ac8dc, #d4fcff);

  --center-inner-gradient: linear-gradient(to right,
    rgba(184, 232, 248, 0.10),   /* frost mist */
    rgba(111, 160, 192, 0.10),   /* tundra ink */
    rgba(42, 58, 72, 0.10)       /* polar dusk */
  );

  --input-label-color: #e0f0f8; /* ice parchment */
  --highlight-border-color: rgba(184, 232, 248, 0.3); /* frost edge */

  --peripheral-gradient: linear-gradient(to right,
    rgba(184, 232, 248, 0.15),
    rgba(111, 160, 192, 0.06),
    rgba(42, 58, 72, 0.15)
  );

  --left-inner-bg: url("../../theme_images/arctictundra_document_creator_left_window.png");
  --placeholder-bg: url("../../theme_images/arctictundra_placeholder.png");
  --ribbon-bg: url("../../theme_images/arctictundra_ribbon.png");

  --border-color: #6fa0c0; /* tundra ink */

  --line-email-inner-color: #f4fcff; /* snow parchment veil */
  --line-email-text-color: #1a1f24; /* polar ink */

  --chart-color-1: #b8e8f8;    /* glacier glow */
  --chart-color-2: #6fa0c0;    /* tundra ink */
  --chart-color-3: #2a3a48;    /* polar dusk */
  --chart-color-4: #d4fcff;    /* soft mint glow */
  --chart-color-5: #1a1f24;    /* polar ink */

  --chart-background-color: transparent;
  --chart-border-color: #eeeeee;

  --alert-base-color: #2f4a5c; /* deep frost signal */
  --alert-hover-color: #1f3544; /* darker tundra tone */

  --monitor-alert-base-color: #b8e8f8; /* glacier glow */
  --monitor-alert-text-color: #1a1f24; /* polar ink for legibility */
  --monitor-alert-hover-color: #94cce0; /* deeper frost drift */
}

/* TROPICAL DIAMONDS */
[data-theme='tropicaldiamonds'] {
  --main-gradient-horizontal: linear-gradient(to right, #ffe29a, #ff7f50, #ff4da6); /* golden sand → coral blaze → tropical orchid */
  --main-gradient-horizontal-reverse: linear-gradient(to right, #ff4da6, #ff7f50, #ffe29a);
  --main-gradient-vertical: linear-gradient(to bottom, #ffe29a, #ff7f50, #ff4da6);

  --highlight-line-color: rgba(255, 226, 154, 0.12); /* sunlit shimmer */
  --highlight-button-color: #b3ffe0; /* mint lagoon */
  --selected-line-color: rgba(255, 226, 154, 0.35); /* diamond glint */

  --topbar-background-gradient: linear-gradient(to right, #b3ffe0, #ff7f50, #ff4da6); /* sunset tide */
  --topbar-background-color: #b3ffe0; /* mint lagoon */
  --topbar-background-alt: linear-gradient(to right, #ff7f50, #b3ffe0);

  --center-inner-gradient: linear-gradient(to right,
    rgba(255, 226, 154, 0.12),   /* sunlit shimmer */
    rgba(255, 127, 80, 0.12),    /* coral blaze */
    rgba(255, 77, 166, 0.12)     /* tropical orchid */
  );

  --input-label-color: #fff5e6;
  --highlight-border-color: rgba(179, 255, 224, 0.4); /* lagoon edge */

  --peripheral-gradient: linear-gradient(to right,
    rgba(255, 226, 154, 0.2),
    rgba(255, 127, 80, 0.08),
    rgba(255, 77, 166, 0.2)
  );

  --left-inner-bg: url("../../theme_images/tropicaldiamonds_left_window.png");
  --placeholder-bg: url("../../theme_images/tropicaldiamonds_placeholder.png");
  --ribbon-bg: url("../../theme_images/tropicaldiamonds_ribbon.png");

  --border-color: #ff7f50; /* coral blaze */

  --line-email-inner-color: #fffaf0; /* coconut veil */
  --line-email-text-color: #2a2a2a; /* volcanic ink */

  --chart-color-1: #ffe29a;    /* golden sand */
  --chart-color-2: #ff7f50;    /* coral blaze */
  --chart-color-3: #ff4da6;    /* tropical orchid */
  --chart-color-4: #b3ffe0;    /* mint lagoon */
  --chart-color-5: #2a2a2a;    /* volcanic ink */

  --chart-background-color: transparent;
  --chart-border-color: #ffffff;

  --alert-base-color: #ff9e80; /* mango signal */
  --alert-hover-color: #ff7043; /* deeper coral tone */

  --monitor-alert-base-color: #ffe29a; /* golden sand — warm and radiant */
  --monitor-alert-text-color: #2a2a2a; /* volcanic ink for legibility */
  --monitor-alert-hover-color: #ffd580; /* sunset drift for hover */
}

/* TROPICAL DIAMONDS HISTORY */
[data-theme='tropicaldiamonds-history'] {
  --main-gradient-horizontal: linear-gradient(to right, #d4bfa0, #b27860, #66334d); /* sunwashed sand → aged coral → twilight orchid */
  --main-gradient-horizontal-reverse: linear-gradient(to right, #66334d, #b27860, #d4bfa0);
  --main-gradient-vertical: linear-gradient(to bottom, #d4bfa0, #b27860, #66334d);

  --highlight-line-color: rgba(212, 191, 160, 0.08); /* faded shimmer */
  --highlight-button-color: #a0e0cc; /* lagoon mist */
  --selected-line-color: rgba(212, 191, 160, 0.25); /* diamond echo */

  --topbar-background-gradient: linear-gradient(to right, #a0b8a0, #b27860, #66334d); /* sunset archive */
  --topbar-background-color: #a0b8a0; /* lagoon mist faded */
  --topbar-background-alt: linear-gradient(to right, #b27860, #a0b8a0);

  --center-inner-gradient: linear-gradient(to right,
    rgba(212, 191, 160, 0.08),   /* faded shimmer */
    rgba(178, 120, 96, 0.08),    /* aged coral */
    rgba(102, 51, 77, 0.08)      /* twilight orchid */
  );

  --input-label-color: #f2e8dc; /* parchment bloom */
  --highlight-border-color: rgba(160, 224, 204, 0.3); /* lagoon edge faded */

  --peripheral-gradient: linear-gradient(to right,
    rgba(212, 191, 160, 0.15),
    rgba(178, 120, 96, 0.05),
    rgba(102, 51, 77, 0.15)
  );

  --left-inner-bg: url("../../theme_images/tropicaldiamonds_history_left_window.png");
  --placeholder-bg: url("../../theme_images/tropicaldiamonds_placeholder.png");
  --ribbon-bg: url("../../theme_images/tropicaldiamonds_ribbon.png");

  --border-color: #b27860; /* aged coral edge */

  --line-email-inner-color: #fffaf0; /* coconut veil muted */
  --line-email-text-color: #2a2a2a; /* volcanic ink */

  --chart-color-1: #a0e0cc;    /* lagoon mist */
  --chart-color-2: #d4bfa0;    /* sunwashed sand */
  --chart-color-3: #b27860;    /* aged coral */
  --chart-color-4: #f2e8dc;    /* parchment bloom */
  --chart-color-5: #2a2a2a;    /* volcanic ink */

  --chart-background-color: transparent;
  --chart-border-color: #dddddd;

  --alert-base-color: #804d3a; /* deep mango signal */
  --alert-hover-color: #663a2a; /* darker coral tone */

  --monitor-alert-base-color: #a0e0cc; /* lagoon mist glow */
  --monitor-alert-text-color: #2a2a2a; /* volcanic ink for legibility */
  --monitor-alert-hover-color: #80c8b0; /* deeper lagoon drift */
}

/* TROPICAL DIAMONDS DOCUMENT CREATOR */
[data-theme='tropicaldiamonds-document-creator'] {
  --main-gradient-horizontal: linear-gradient(to right, #ffe8b3, #ff9966, #cc4d99); /* pineapple glow → sunset coral → orchid ink */
  --main-gradient-horizontal-reverse: linear-gradient(to right, #cc4d99, #ff9966, #ffe8b3);
  --main-gradient-vertical: linear-gradient(to bottom, #ffe8b3, #ff9966, #cc4d99);

  --highlight-line-color: rgba(255, 232, 179, 0.10); /* golden mist */
  --highlight-button-color: #a0f5dd; /* lagoon sparkle */
  --selected-line-color: rgba(255, 232, 179, 0.28); /* diamond echo */

  --topbar-background-gradient: linear-gradient(to right, #a0f5dd, #ff9966, #cc4d99); /* tropical dusk */
  --topbar-background-color: #a0f5dd; /* lagoon sparkle */
  --topbar-background-alt: linear-gradient(to right, #ff9966, #a0f5dd);

  --center-inner-gradient: linear-gradient(to right,
    rgba(255, 232, 179, 0.10),   /* golden mist */
    rgba(255, 153, 102, 0.10),   /* sunset coral */
    rgba(204, 77, 153, 0.10)     /* orchid ink */
  );

  --input-label-color: #fff3e6; /* parchment bloom */
  --highlight-border-color: rgba(160, 245, 221, 0.3); /* lagoon edge */

  --peripheral-gradient: linear-gradient(to right,
    rgba(255, 232, 179, 0.15),
    rgba(255, 153, 102, 0.06),
    rgba(204, 77, 153, 0.15)
  );

  --left-inner-bg: url("../../theme_images/tropicaldiamonds_document_creator_left_window.png");
  --placeholder-bg: url("../../theme_images/tropicaldiamonds_placeholder.png");
  --ribbon-bg: url("../../theme_images/tropicaldiamonds_ribbon.png");

  --border-color: #ff9966; /* sunset coral */

  --line-email-inner-color: #fffaf0; /* coconut veil */
  --line-email-text-color: #2a2a2a; /* volcanic ink */

  --chart-color-1: #ffe8b3;    /* pineapple glow */
  --chart-color-2: #ff9966;    /* sunset coral */
  --chart-color-3: #cc4d99;    /* orchid ink */
  --chart-color-4: #a0f5dd;    /* lagoon sparkle */
  --chart-color-5: #2a2a2a;    /* volcanic ink */

  --chart-background-color: transparent;
  --chart-border-color: #eeeeee;

  --alert-base-color: #b35c3a; /* mango signal */
  --alert-hover-color: #994d2a; /* deeper coral tone */

  --monitor-alert-base-color: #ffe8b3; /* pineapple glow */
  --monitor-alert-text-color: #2a2a2a; /* volcanic ink for legibility */
  --monitor-alert-hover-color: #ffd580; /* golden drift */
}

/* ROBOTS */
[data-theme='robots'] {
  --main-gradient-horizontal: linear-gradient(to right, #c0c0c0, #00f0ff, #7f00ff); /* brushed steel → neon cyan → plasma violet */
  --main-gradient-horizontal-reverse: linear-gradient(to right, #7f00ff, #00f0ff, #c0c0c0);
  --main-gradient-vertical: linear-gradient(to bottom, #c0c0c0, #00f0ff, #7f00ff);

  --highlight-line-color: rgba(192, 192, 192, 0.12); /* steel shimmer */
  --highlight-button-color: #00ffcc; /* circuit mint */
  --selected-line-color: rgba(192, 192, 192, 0.35); /* alloy glint */

  --topbar-background-gradient: linear-gradient(to right, #00ffcc, #00f0ff, #7f00ff); /* neon tide */
  --topbar-background-color: #00ffcc; /* circuit mint */
  --topbar-background-alt: linear-gradient(to right, #00f0ff, #00ffcc);

  --center-inner-gradient: linear-gradient(to right,
    rgba(192, 192, 192, 0.12),   /* steel shimmer */
    rgba(0, 240, 255, 0.12),     /* neon cyan */
    rgba(127, 0, 255, 0.12)      /* plasma violet */
  );

  --input-label-color: #e0f7ff;
  --highlight-border-color: rgba(0, 255, 204, 0.4); /* mint edge */

  --peripheral-gradient: linear-gradient(to right,
    rgba(192, 192, 192, 0.2),
    rgba(0, 240, 255, 0.08),
    rgba(127, 0, 255, 0.2)
  );

  --left-inner-bg: url("../../theme_images/robots_left_window.png");
  --placeholder-bg: url("../../theme_images/robots_placeholder.png");
  --ribbon-bg: url("../../theme_images/robots_ribbon.png");

  --border-color: #00f0ff; /* neon cyan */

  --line-email-inner-color: #f0f8ff; /* digital mist */
  --line-email-text-color: #1a1a1a; /* carbon ink */

  --chart-color-1: #c0c0c0;    /* brushed steel */
  --chart-color-2: #00f0ff;    /* neon cyan */
  --chart-color-3: #7f00ff;    /* plasma violet */
  --chart-color-4: #00ffcc;    /* circuit mint */
  --chart-color-5: #1a1a1a;    /* carbon ink */

  --chart-background-color: transparent;
  --chart-border-color: #ffffff;

  --alert-base-color: #ff4081; /* magenta pulse */
  --alert-hover-color: #e040fb; /* violet surge */

  --monitor-alert-base-color: #c0c0c0; /* brushed steel — cool and sleek */
  --monitor-alert-text-color: #1a1a1a; /* carbon ink for legibility */
  --monitor-alert-hover-color: #b0bec5; /* alloy drift for hover */
}

/* ROBOTS HISTORY */
[data-theme='robots-history'] {
  --main-gradient-horizontal: linear-gradient(to right, #a8a8a8, #6090a0, #3a3a5a); /* oxidized alloy → faded neon teal → twilight circuit */
  --main-gradient-horizontal-reverse: linear-gradient(to right, #3a3a5a, #6090a0, #a8a8a8);
  --main-gradient-vertical: linear-gradient(to bottom, #a8a8a8, #6090a0, #3a3a5a);

  --highlight-line-color: rgba(168, 168, 168, 0.08); /* alloy shimmer */
  --highlight-button-color: #80e0d0; /* archival mint */
  --selected-line-color: rgba(168, 168, 168, 0.25); /* circuit echo */

  --topbar-background-gradient: linear-gradient(to right, #80a8a0, #6090a0, #3a3a5a); /* neon archive */
  --topbar-background-color: #80a8a0; /* faded mint alloy */
  --topbar-background-alt: linear-gradient(to right, #6090a0, #80a8a0);

  --center-inner-gradient: linear-gradient(to right,
    rgba(168, 168, 168, 0.08),   /* alloy shimmer */
    rgba(96, 144, 160, 0.08),    /* faded neon teal */
    rgba(58, 58, 90, 0.08)       /* twilight circuit */
  );

  --input-label-color: #e6f2f0; /* blueprint parchment */
  --highlight-border-color: rgba(128, 224, 208, 0.3); /* mint edge faded */

  --peripheral-gradient: linear-gradient(to right,
    rgba(168, 168, 168, 0.15),
    rgba(96, 144, 160, 0.05),
    rgba(58, 58, 90, 0.15)
  );

  --left-inner-bg: url("../../theme_images/robots_history_left_window.png");
  --placeholder-bg: url("../../theme_images/robots_placeholder.png");
  --ribbon-bg: url("../../theme_images/robots_ribbon.png");

  --border-color: #6090a0; /* faded neon edge */

  --line-email-inner-color: #f0f8ff; /* digital mist muted */
  --line-email-text-color: #1a1a1a; /* carbon ink */

  --chart-color-1: #80e0d0;    /* archival mint */
  --chart-color-2: #a8a8a8;    /* oxidized alloy */
  --chart-color-3: #6090a0;    /* faded neon teal */
  --chart-color-4: #e6f2f0;    /* blueprint parchment */
  --chart-color-5: #1a1a1a;    /* carbon ink */

  --chart-background-color: transparent;
  --chart-border-color: #cccccc;

  --alert-base-color: #5a4d80; /* deep violet pulse */
  --alert-hover-color: #3a2a66; /* darker circuit tone */

  --monitor-alert-base-color: #80e0d0; /* archival mint glow */
  --monitor-alert-text-color: #1a1a1a; /* carbon ink for legibility */
  --monitor-alert-hover-color: #60c8b0; /* deeper mint drift */
}

/* ROBOTS DOCUMENT CREATOR */
[data-theme='robots-document-creator'] {
  --main-gradient-horizontal: linear-gradient(to right, #d0d0d0, #66ccff, #9966cc); /* chrome mist → neon blue → violet circuit */
  --main-gradient-horizontal-reverse: linear-gradient(to right, #9966cc, #66ccff, #d0d0d0);
  --main-gradient-vertical: linear-gradient(to bottom, #d0d0d0, #66ccff, #9966cc);

  --highlight-line-color: rgba(208, 208, 208, 0.10); /* alloy shimmer */
  --highlight-button-color: #80f0e0; /* circuit sparkle */
  --selected-line-color: rgba(208, 208, 208, 0.28); /* chrome echo */

  --topbar-background-gradient: linear-gradient(to right, #80f0e0, #66ccff, #9966cc); /* neon dusk */
  --topbar-background-color: #80f0e0; /* circuit sparkle */
  --topbar-background-alt: linear-gradient(to right, #66ccff, #80f0e0);

  --center-inner-gradient: linear-gradient(to right,
    rgba(208, 208, 208, 0.10),   /* chrome mist */
    rgba(102, 204, 255, 0.10),   /* neon blue */
    rgba(153, 102, 204, 0.10)    /* violet circuit */
  );

  --input-label-color: #f0faff; /* blueprint parchment */
  --highlight-border-color: rgba(128, 240, 224, 0.3); /* circuit edge */

  --peripheral-gradient: linear-gradient(to right,
    rgba(208, 208, 208, 0.15),
    rgba(102, 204, 255, 0.06),
    rgba(153, 102, 204, 0.15)
  );

  --left-inner-bg: url("../../theme_images/robots_document_creator_left_window.png");
  --placeholder-bg: url("../../theme_images/robots_placeholder.png");
  --ribbon-bg: url("../../theme_images/robots_ribbon.png");

  --border-color: #66ccff; /* neon blue */

  --line-email-inner-color: #f0f8ff; /* digital mist */
  --line-email-text-color: #1a1a1a; /* carbon ink */

  --chart-color-1: #d0d0d0;    /* chrome mist */
  --chart-color-2: #66ccff;    /* neon blue */
  --chart-color-3: #9966cc;    /* violet circuit */
  --chart-color-4: #80f0e0;    /* circuit sparkle */
  --chart-color-5: #1a1a1a;    /* carbon ink */

  --chart-background-color: transparent;
  --chart-border-color: #eeeeee;

  --alert-base-color: #5c3ab3; /* violet signal */
  --alert-hover-color: #4d2a99; /* deeper circuit tone */

  --monitor-alert-base-color: #d0d0d0; /* chrome mist */
  --monitor-alert-text-color: #1a1a1a; /* carbon ink for legibility */
  --monitor-alert-hover-color: #b0b0b0; /* alloy drift */
}


/* --- Your existing CSS variables --- */
:root {
    --right-window-upper-height: 50px;
    --right-window-middle-collapsed-height: 160px;
    /* Default for larger screens (e.g., monitors) */
    --right-window-middle-expanded-height: 60vh;
    --right-window-middle-fixed-margin-top: 0px;
    --right-window-middle-arrow-height: 25px;
}

/* Apply a smaller height for screens with a height of 900px or less (typical laptop height range) */
@media (max-height: 900px) {
    :root {
        --right-window-middle-expanded-height: 60vh; /* Reduced height for smaller vertical space */
    }
}

/* this was elsewhere...
    --right-window-middle-fixed-margin-top: 16px; */



  #default_sidebar_inner {
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;

}

#main_div_main_center_inner_list_center{
    width: 100%;
    height: calc(100% - 55px);
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    overflow-y: scroll;
    }
    
  
  
  
  #default_topbar_inner {
    background-image: var(--main-gradient-horizontal);
  }
  
  #default_topbar_1_inner {
    background-image: var(--main-gradient-horizontal);
  }
  
  #default_sidebar_inner {
    background-image: var(--main-gradient-vertical);
  }

  #main_div_main_center_inner_list_center_inner {
    background: var(--center-inner-gradient);
  }

  #central_contacts_div_inner_list{
    background: var(--center-inner-gradient);
  }

  #left_window_large_inner {
    background-image: var(--left-inner-bg);
  }

 
.ep_placeholder_main,
    .po_placeholder_main {
        height: 100%;
        justify-content: space-between;
        align-items: center;
        gap: 10px;
    }  
    
    .ep_placeholder_main,
    .po_placeholder_main {
        background-image: var(--placeholder-bg);
        background-repeat: repeat-x;
        background-size: cover;
        background-position: center;
    }   
  

    /* --- #right_window_middle_inner & #expandCollapseArrow (from previous update) --- */
#right_window_middle_inner {
  display: grid; /* Keep as grid for overall layout */
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 15px 20px;
  padding: 10px 15px;
  box-sizing: border-box;
  align-items: start;
  /* height: calc(100% - var(--right-window-middle-arrow-height)); */
  height: calc(100% - 4px);
  overflow-y: auto;
  padding-bottom: 10px;

}


#right_window_middle_inner {
background-image: var(--main-gradient-horizontal-reverse);
}


#ribbon1_inner {
  height: 100%;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
}


#ribbon1_inner {
background-image: var(--ribbon-bg);
background-repeat: repeat-x;
background-size: cover;
background-position: center;
}


.editor-main {
  min-height: 100vh; /* Make sure it fills the viewport height */
  display: flex;
  flex-direction: column; /* Arrange children vertically */
  width: 100%; /* Ensure it takes full width */
  overflow: hidden; /* Prevent potential overflow issues */
}

.editor-main {
  background-image: var(--main-gradient-horizontal);
  color: #333333;
}


.editor-instructions {
  height: 50px;
  border-bottom: 1px solid black;
  display: flex;
  align-items: center; /* Vertically center the text */
  padding: 0 15px; /* Add some padding for the text */
  flex-shrink: 0; /* Prevent it from shrinking */
}


.editor-instructions {
  background-image: var(--ribbon-bg);
  background-size: cover;
  background-position: center top -25px; /* push it up by 10px */
}


.editor-instructions > p {
  margin: 0; /* Remove default paragraph margin */
  color: white;
}

#topbar_underbar_inner{
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  }

  #topbar_underbar_inner{
    background: var(--topbar-background-gradient);
  }

  #sort_by_select_desc_bar{
  width: 100%;
min-height: 55px;
}


#sort_by_select_desc_bar {
  border-top: 1px solid var(--border-color);
}


  #sort_by_select_desc_bar_inner{
    flex-direction: row;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    white-space: nowrap;
    overflow-x: scroll;
    }

    #sort_by_select_desc_bar_inner{
      background: var(--topbar-background-color);
    }

    #right_window_upper_inner{
      flex-direction: column;
      justify-content: flex-end;
      align-items: center;
      }

      #right_window_upper_inner{
        background: var(--topbar-background-alt);
      }

      .homepage_main_img{
        background-image: var(--left-inner-bg);
      }


      /* setup css */
      #container_inner{
        background-image: var(--left-inner-bg);
      }

      .input-field-group label {
        font-weight: bold;
        margin-bottom: 5px; /* Space between label and input */
    }

    .input-field-group label {
      color: var(--input-label-color);
    }
  
    #template_back{
      background-image: var(--left-inner-bg);
      background-size: 75%;
      min-height: calc(297mm + 60px);
      z-index: 12;
    } 

    .sidebar_btn_inner {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 100%;
      height: 100%;
      background-color: white;
      border-radius: 4px;
  }
  
  /* This targets all <i> tags inside .sidebar_btn_inner */
.sidebar_btn_inner i {
    font-size: 16px; 
    color: var(--sidebar-icon-color); 
}

  .underbar-button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  height: 30px;
  border-radius: 6px;
  border: 1px solid var(--highlight-border-color, #ccc);
  background-color: var(--highlight-button-color, #f0f0f0);
  color: var(--line-email-text-color, #333);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease, transform 0.2s ease; /* Added transform */
  background-color: white;
}

.underbar-button:hover{ /* Added :focus state */
  background-color: var(--highlight-button-color, #f0f0f0);
  color: white;
  transform: translateY(-2px); /* Lifts the button slightly */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Adds a subtle shadow */
  outline: none; /* Removes the default blue outline on focus for a cleaner look */
}

.underbar-button i {
  font-size: 14px;
  color: var(--input-label-color);
}

      .movable-underline {
        position: absolute;
        height: 2px;
        background-color: var(--highlight-line-color);
        z-index: 5;
        transition: width 500ms ease, left 500ms ease, opacity 300ms ease;
        opacity: 0;
    }


    /* --- MODIFIED CSS for #right_window_center --- */
#right_window_center {
  width: calc(100% - 8px); /* Keep its width relative to parent */
  margin-right: 8px; /* Keep its margin-right */
  box-sizing: border-box;
  transition: height 0.3s ease-in-out, margin-top 0.3s ease-in-out;

  /* Make it fill remaining vertical space */
  flex-grow: 1;
  flex-shrink: 1;
  flex-basis: 0; /* Set base size to 0 for better growth/shrinkage behavior */
  min-height: 0; /* Allow it to shrink very small */

  /* Apply the variable margin-top from right_window_middle's logic */
  margin-top: var(--right-window-middle-fixed-margin-top);

  /* NEW: Make #right_window_center a flex container for its own content */
  display: flex;
  flex-direction: column; /* Stack its inner children vertically */
  justify-content: flex-start; /* Ensure content starts at the very top */
  align-items: stretch; /* Allow children to fill width */
  padding: 0; /* Explicitly remove any padding */
  margin-left: 0; /* Explicitly remove any other margins */
  margin-bottom: 0; /* Explicitly remove any other margins */
  background: var(--topbar-background-alt);
}

#central_contacts_div_inner_inputs{
  background: var(--topbar-background-alt);
}


.line_email_inner {
  background-color: var(--line-email-inner-color);
  color: var(--line-email-text-color);
  border-radius: 50%;
  font-weight: 400;
  font-size: 10px;
  line-height: 16px;
}

.appointed-person-alert {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(-7.5deg); /* Rotated even less (-15deg) */
  background-color: #dc3545;
  color: white;
  padding: 5px 10px;
  border-radius: 5px;
  font-size: 0.8em;
  font-weight: bold;
  z-index: 9;
  width: 130px; /* Initial width */
  height: 20px;
  text-align: center;
  white-space: nowrap; /* Prevent text wrapping initially */
  overflow: hidden; /* Hide overflow initially */
  text-overflow: ellipsis; /* Add ellipsis initially */
  /* transition: width 0.3s ease, transform 0.3s ease; */
  background-color: var(--alert-base-color);
  color: white;
  transition: width 0.3s ease, transform 0.3s ease, background-color 0.3s ease;
  box-sizing: border-box; /* Ensures padding is included in the width/height */
}

.appointed-person-alert:hover {
  width: max-content; /* Expands to fit content, or use a large fixed value like 300px if max-content is problematic */
  height: auto; /* Adjust height to fit wrapped text */
  white-space: normal; /* Allow text to wrap */
  overflow: visible; /* Show all content */
  text-overflow: clip; /* Remove ellipsis on hover */
  transform: translate(-50%, -50%) rotate(0deg); /* Optional: straighten out on hover for better readability */
  background-color: var(--alert-hover-color);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Subtle shadow on hover */
}



.appointed-person-alert.monitor-alert {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(-7.5deg); /* Rotated even less (-15deg) */
  padding: 5px 10px;
  border-radius: 5px;
  font-size: 0.8em;
  font-weight: bold;
  z-index: 9;
  width: 130px; /* Initial width */
  height: 20px;
  text-align: center;
  white-space: nowrap; /* Prevent text wrapping initially */
  overflow: hidden; /* Hide overflow initially */
  text-overflow: ellipsis; /* Add ellipsis initially */
  background-color: var(--monitor-alert-base-color);
  color: var(--monitor-alert-text-color);
  transition: width 0.3s ease, transform 0.3s ease, background-color 0.3s ease;
  box-sizing: border-box; /* Ensures padding is included in the width/height */
}

.appointed-person-alert.monitor-alert:hover {
  width: max-content; /* Expands to fit content, or use a large fixed value like 300px if max-content is problematic */
  height: auto; /* Adjust height to fit wrapped text */
  white-space: normal; /* Allow text to wrap */
  overflow: visible; /* Show all content */
  text-overflow: clip; /* Remove ellipsis on hover */
  transform: translate(-50%, -50%) rotate(0deg); /* Optional: straighten out on hover for better readability */
  background-color: var(--monitor-alert-hover-color);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}


 #central_history_div{
   background: var(--center-inner-gradient);
 }

  #central_history_div{
   background: var(--center-inner-gradient);
 }