/* FatRobot — dark liquid-glass theme for Gitea.
 *
 * Served raw from $GITEA_CUSTOM/public/assets/css/, so it CANNOT use the
 * @import "../chroma/dark.css" that upstream themes rely on (those paths only
 * exist in Gitea's build tree). The chroma + CodeMirror rules are inlined at
 * the bottom instead — without them, code highlighting falls back to the light
 * palette and is unreadable on a dark background.
 *
 * Derived from web_src/css/themes/theme-gitea-dark.css @ release/v1.24.
 */

gitea-theme-meta-info {
  --theme-display-name: "FatRobot";
}

:root {
  --is-dark-theme: true;

  /* Rounder than upstream (4px/6px). Everything downstream keys off these. */
  --border-radius: 8px;
  --border-radius-medium: 14px;
  --border-radius-full: 99999px;

  /* Glass tuning knobs — every backdrop-filter below reads these. */
  --fr-blur: 18px;
  --fr-saturate: 165%;
  --fr-rim: rgba(255, 255, 255, 0.09);
  --fr-rim-highlight: rgba(255, 255, 255, 0.06);
  --fr-accent-glow: rgba(124, 108, 255, 0.35);

  /* primary — electric indigo. dark-N trend lighter, light-N darker (dark theme convention) */
  --color-primary: #7c6cff;
  --color-primary-contrast: #ffffff;
  --color-primary-dark-1: #8a7bff;
  --color-primary-dark-2: #9789ff;
  --color-primary-dark-3: #a598ff;
  --color-primary-dark-4: #b3a6ff;
  --color-primary-dark-5: #ccc4ff;
  --color-primary-dark-6: #e5e1ff;
  --color-primary-dark-7: #f5f3ff;
  --color-primary-light-1: #6f5ef2;
  --color-primary-light-2: #6250e0;
  --color-primary-light-3: #5544c7;
  --color-primary-light-4: #46379f;
  --color-primary-light-5: #2e2566;
  --color-primary-light-6: #191338;
  --color-primary-light-7: #0d0a1c;
  --color-primary-alpha-10: #7c6cff19;
  --color-primary-alpha-20: #7c6cff33;
  --color-primary-alpha-30: #7c6cff4b;
  --color-primary-alpha-40: #7c6cff66;
  --color-primary-alpha-50: #7c6cff80;
  --color-primary-alpha-60: #7c6cff99;
  --color-primary-alpha-70: #7c6cffb3;
  --color-primary-alpha-80: #7c6cffcc;
  --color-primary-alpha-90: #7c6cffe1;
  --color-primary-hover: var(--color-primary-dark-1);
  --color-primary-active: var(--color-primary-dark-2);

  --color-secondary: #333a4d;
  --color-secondary-dark-1: #3b4357;
  --color-secondary-dark-2: #444d63;
  --color-secondary-dark-3: #525c74;
  --color-secondary-dark-4: #616c86;
  --color-secondary-dark-5: #707c96;
  --color-secondary-dark-6: #808ca6;
  --color-secondary-dark-7: #909bb3;
  --color-secondary-dark-8: #a0aabf;
  --color-secondary-dark-9: #aab3c6;
  --color-secondary-dark-10: #b8c0d0;
  --color-secondary-dark-11: #c6cdda;
  --color-secondary-dark-12: #d0d6e0;
  --color-secondary-dark-13: #d6dbe4;
  --color-secondary-light-1: #2a3040;
  --color-secondary-light-2: #222736;
  --color-secondary-light-3: #191d29;
  --color-secondary-light-4: #12151f;
  --color-secondary-alpha-10: #333a4d19;
  --color-secondary-alpha-20: #333a4d33;
  --color-secondary-alpha-30: #333a4d4b;
  --color-secondary-alpha-40: #333a4d66;
  --color-secondary-alpha-50: #333a4d80;
  --color-secondary-alpha-60: #333a4d99;
  --color-secondary-alpha-70: #333a4db3;
  --color-secondary-alpha-80: #333a4dcc;
  --color-secondary-alpha-90: #333a4de1;
  --color-secondary-button: var(--color-secondary-dark-4);
  --color-secondary-hover: var(--color-secondary-dark-3);
  --color-secondary-active: var(--color-secondary-dark-2);

  /* console */
  --color-console-fg: #f2f4f8;
  --color-console-fg-subtle: #aab3c2;
  --color-console-bg: #0d1017;
  --color-console-border: #262c3a;
  --color-console-hover-bg: #1a1f2c;
  --color-console-active-bg: #222838;
  --color-console-menu-bg: #171b26;
  --color-console-menu-border: #333a4d;

  /* named colors */
  --color-red: #e0555b;
  --color-orange: #e07a3c;
  --color-yellow: #e0b13c;
  --color-olive: #9aae2e;
  --color-green: #4ec98a;
  --color-teal: #22c3bb;
  --color-blue: #4c8ef7;
  --color-violet: #9b7cff;
  --color-purple: #b96ae0;
  --color-pink: #e2549a;
  --color-brown: #a8785a;
  --color-black: #12151f;
  --color-red-light: #e66d72;
  --color-orange-light: #e89159;
  --color-yellow-light: #e8c057;
  --color-olive-light: #abbd43;
  --color-green-light: #67d49b;
  --color-teal-light: #3fd2ca;
  --color-blue-light: #67a1f8;
  --color-violet-light: #ac92ff;
  --color-purple-light: #c583e6;
  --color-pink-light: #e86faa;
  --color-brown-light: #b98d6f;
  --color-black-light: #1c2131;
  --color-red-dark-1: #d6444a;
  --color-orange-dark-1: #d66a2c;
  --color-yellow-dark-1: #d6a12c;
  --color-olive-dark-1: #8a9c26;
  --color-green-dark-1: #3cb877;
  --color-teal-dark-1: #1bb0a8;
  --color-blue-dark-1: #3b7de6;
  --color-violet-dark-1: #8a68f5;
  --color-purple-dark-1: #a857d1;
  --color-pink-dark-1: #d34389;
  --color-brown-dark-1: #96684c;
  --color-black-dark-1: #181c28;
  --color-red-dark-2: #c33940;
  --color-orange-dark-2: #c25c24;
  --color-yellow-dark-2: #c29024;
  --color-olive-dark-2: #798a1f;
  --color-green-dark-2: #2ea467;
  --color-teal-dark-2: #159d95;
  --color-blue-dark-2: #2f6cd1;
  --color-violet-dark-2: #7856e8;
  --color-purple-dark-2: #9747bd;
  --color-pink-dark-2: #bd3778;
  --color-brown-dark-2: #825a41;

  /* ansi */
  --color-ansi-black: #12151f;
  --color-ansi-red: #e0555b;
  --color-ansi-green: #4ec98a;
  --color-ansi-yellow: #e0b13c;
  --color-ansi-blue: #4c8ef7;
  --color-ansi-magenta: #e2549a;
  --color-ansi-cyan: #22c3bb;
  --color-ansi-white: var(--color-console-fg-subtle);
  --color-ansi-bright-black: #4b5468;
  --color-ansi-bright-red: #e66d72;
  --color-ansi-bright-green: #67d49b;
  --color-ansi-bright-yellow: #e8c057;
  --color-ansi-bright-blue: #67a1f8;
  --color-ansi-bright-magenta: #e86faa;
  --color-ansi-bright-cyan: #3fd2ca;
  --color-ansi-bright-white: var(--color-console-fg);

  /* other */
  --color-grey: #333a4d;
  --color-grey-light: #7d8a9c;
  --color-gold: #c9a227;
  --color-white: #ffffff;
  --color-diff-added-linenum-bg: #14432c;
  --color-diff-added-row-bg: #102c1f;
  --color-diff-added-row-border: #1c4b33;
  --color-diff-added-word-bg: #1f6b45;
  --color-diff-moved-row-bg: #4a4520;
  --color-diff-moved-row-border: #9c8f3c;
  --color-diff-removed-linenum-bg: #4a1f24;
  --color-diff-removed-row-bg: #2c1418;
  --color-diff-removed-row-border: #5e3036;
  --color-diff-removed-word-bg: #7a2f38;
  --color-diff-inactive: #171b26;
  --color-error-border: #a0414a;
  --color-error-bg: #35181d;
  --color-error-bg-active: #4d2229;
  --color-error-bg-hover: #421d23;
  --color-error-text: #f7c9cc;
  --color-success-border: #2f8a5e;
  --color-success-bg: #143327;
  --color-success-text: #5fd396;
  --color-warning-border: #b08a1f;
  --color-warning-bg: #332c14;
  --color-warning-text: #e8c057;
  --color-info-border: #35609c;
  --color-info-bg: #16233a;
  --color-info-text: #67a1f8;
  --color-red-badge: #e0555b;
  --color-red-badge-bg: #e0555b1a;
  --color-red-badge-hover-bg: #e0555b4d;
  --color-green-badge: #4ec98a;
  --color-green-badge-bg: #4ec98a1a;
  --color-green-badge-hover-bg: #4ec98a4d;
  --color-yellow-badge: #e0b13c;
  --color-yellow-badge-bg: #e0b13c1a;
  --color-yellow-badge-hover-bg: #e0b13c4d;
  --color-orange-badge: #e07a3c;
  --color-orange-badge-bg: #e07a3c1a;
  --color-orange-badge-hover-bg: #e07a3c4d;
  --color-git: #f05133;

  /* target-based — translucent surfaces are what make the glass read */
  --color-body: #080a11;
  --color-box-header: #171c2acc;
  --color-box-body: #12162099;
  --color-box-body-highlight: #1a1f2e;
  --color-text-dark: #f4f6fa;
  --color-text: #c3cad6;
  --color-text-light: #aab3c2;
  --color-text-light-1: #94a0b0;
  --color-text-light-2: #7d8a9c;
  --color-text-light-3: #66738a;
  --color-footer: #0a0c14cc;
  --color-timeline: #2a3040;
  --color-input-text: var(--color-text-dark);
  --color-input-background: #0d1017;
  --color-input-toggle-background: #2a3040;
  --color-input-border: var(--color-secondary);
  --color-input-border-hover: var(--color-secondary-dark-2);
  --color-light: #00001728;
  --color-light-mimic-enabled: rgba(0, 0, 0, calc(40 / 255 * 222 / 255 / var(--opacity-disabled)));
  --color-light-border: rgba(255, 255, 255, 0.09);
  --color-hover: rgba(232, 240, 255, 0.06);
  --color-hover-opaque: #171b26;
  --color-active: rgba(232, 240, 255, 0.1);
  --color-menu: #121620e6;
  --color-card: #12162099;
  --color-markup-table-row: #e8f0ff0d;
  --color-markup-code-block: #e8f0ff10;
  --color-markup-code-inline: #e8f0ff20;
  --color-button: #1a1f2ecc;
  --color-code-bg: #0d1017;
  --color-shadow: #00000066;
  --color-shadow-opaque: #000000;
  --color-secondary-bg: #222736;
  --color-expand-button: #2a3040;
  --color-placeholder-text: var(--color-text-light-3);
  --color-editor-line-highlight: var(--color-primary-light-6);
  --color-project-column-bg: var(--color-secondary-light-2);
  --color-caret: var(--color-text);
  --color-reaction-bg: #e8f0ff12;
  --color-reaction-hover-bg: var(--color-primary-light-4);
  --color-reaction-active-bg: var(--color-primary-light-5);
  --color-tooltip-text: #f4f6fa;
  --color-tooltip-bg: #05060af0;
  --color-nav-bg: #0a0c14cc;
  --color-nav-hover-bg: var(--color-secondary-light-1);
  --color-nav-text: var(--color-text);
  --color-secondary-nav-bg: #0e111acc;
  --color-label-text: var(--color-text);
  --color-label-bg: #5a678c4b;
  --color-label-hover-bg: #5a678ca0;
  --color-label-active-bg: #5a678cff;
  --color-accent: var(--color-primary-dark-1);
  --color-small-accent: var(--color-primary-light-6);
  --color-highlight-fg: #d6a12c;
  --color-highlight-bg: #332c14;
  --color-overlay-backdrop: #04050ac0;
  accent-color: var(--color-accent);
  color-scheme: dark;
}

/* ---------------------------------------------------------------------------
 * Ambient background. Glass has nothing to refract over a flat fill, so the
 * body gets a fixed, slowly drifting gradient mesh behind everything.
 * ------------------------------------------------------------------------ */

body {
  background-color: var(--color-body);
}

body::before {
  content: "";
  position: fixed;
  inset: -30vmax;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(38vmax 38vmax at 18% 12%, rgba(124, 108, 255, 0.20), transparent 60%),
    radial-gradient(32vmax 32vmax at 82% 22%, rgba(34, 195, 187, 0.14), transparent 62%),
    radial-gradient(40vmax 40vmax at 62% 88%, rgba(185, 106, 224, 0.14), transparent 64%);
  filter: blur(28px);
  animation: fr-drift 44s ease-in-out infinite alternate;
}

@keyframes fr-drift {
  0%   { transform: translate3d(0, 0, 0) scale(1); }
  50%  { transform: translate3d(2.5vmax, -2vmax, 0) scale(1.06); }
  100% { transform: translate3d(-2vmax, 2.5vmax, 0) scale(1.02); }
}

/* ---------------------------------------------------------------------------
 * Liquid glass surfaces.
 *
 * backdrop-filter creates a STACKING CONTEXT. A dropdown menu inside a blurred
 * container can never paint above a later sibling that is also blurred — so any
 * container that might host a `.ui.dropdown` must NOT be blurred, or its menus
 * render underneath the page content. That rules out .ui.segment, .ui.card,
 * .ui.menu, .ui.attached.*, .flex-item: all of them host dropdowns somewhere
 * (repo branch selector, "Add file", issue filters, context switcher).
 *
 * Blur is therefore restricted to surfaces that ARE overlays, plus the top
 * chrome. Content boxes get translucency + a rim instead — over the animated
 * gradient backdrop the blur was nearly invisible on them anyway, and this
 * costs far fewer compositor layers on long diffs.
 * ------------------------------------------------------------------------ */

#navbar,
.ui.dropdown .menu,
.ui.modal,
.ui.popup,
footer {
  backdrop-filter: blur(var(--fr-blur)) saturate(var(--fr-saturate));
  -webkit-backdrop-filter: blur(var(--fr-blur)) saturate(var(--fr-saturate));
}

/* Upstream #navbar is `position: static` with no z-index: it relies on the
 * menu's own `z-index: 11` to escape and cover the page. Our blur turns the
 * navbar into a stacking context, trapping those menus inside it, so the navbar
 * itself must now be the thing that outranks page content. */
#navbar {
  position: relative;
  z-index: 100;
}

/* The rim light is what separates "translucent" from "actually glass". */
.ui.segment,
.ui.card,
.ui.modal,
.ui.attached.segment,
.ui.attached.header {
  border: 1px solid var(--fr-rim);
  box-shadow:
    inset 0 1px 0 var(--fr-rim-highlight),
    0 8px 32px rgba(0, 0, 0, 0.36);
}

#navbar {
  border-bottom: 1px solid var(--fr-rim);
  box-shadow: inset 0 -1px 0 var(--fr-rim-highlight);
}

.ui.dropdown .menu,
.ui.popup {
  border: 1px solid var(--fr-rim);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5);
}

/* ---------------------------------------------------------------------------
 * Buttons — rounded, with a lit primary.
 * ------------------------------------------------------------------------ */

.ui.button {
  border-radius: var(--border-radius-medium);
  transition: transform 0.12s ease, box-shadow 0.18s ease, background-color 0.18s ease;
}

.ui.button:hover {
  transform: translateY(-1px);
}

.ui.button:active {
  transform: translateY(0);
}

.ui.primary.button,
.ui.primary.buttons .button {
  box-shadow: 0 4px 18px var(--fr-accent-glow);
}

.ui.primary.button:hover,
.ui.primary.buttons .button:hover {
  box-shadow: 0 6px 26px var(--fr-accent-glow);
}

/* Pill-shaped labels and counters. */
.ui.label,
.ui.basic.label,
.ui.circular.label {
  border-radius: var(--border-radius-full);
}

.ui.input > input,
.ui.form input:not([type]),
.ui.form input[type="text"],
.ui.form input[type="password"],
.ui.form input[type="email"],
.ui.form textarea,
.ui.selection.dropdown {
  border-radius: var(--border-radius-medium);
}

/* Focus ring: visible, accent-tinted, never removed. */
:focus-visible {
  outline: 2px solid var(--color-primary-dark-2);
  outline-offset: 2px;
}

/* Avatars stay circular regardless of the radius bump above. */
.ui.avatar.image,
.ui.avatar.image img,
.ui.avatar.images .image {
  border-radius: var(--border-radius-full);
}

/* ---------------------------------------------------------------------------
 * Motion opt-out. Non-negotiable: the drifting background and every transition
 * above are decorative, and vestibular disorders are real.
 * ------------------------------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
  body::before {
    animation: none;
  }
  .ui.button,
  .ui.button:hover,
  .ui.button:active {
    transition: none;
    transform: none;
  }
}

/* Blur is expensive and degrades gracefully — fall back to opaque surfaces. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  :root {
    --color-box-body: #121620;
    --color-box-header: #171c2a;
    --color-card: #121620;
    --color-button: #1a1f2e;
    --color-nav-bg: #0a0c14;
    --color-secondary-nav-bg: #0e111a;
    --color-menu: #121620;
    --color-footer: #0a0c14;
  }
}

/* ---------------------------------------------------------------------------
 * Inlined from web_src/css/chroma/dark.css @ release/v1.24 — see header note.
 * ------------------------------------------------------------------------ */

.chroma .bp { color: #fabd2f; }
.chroma .c { color: #777e94; }
.chroma .c1 { color: #777e94; }
.chroma .ch { color: #777e94; }
.chroma .cm { color: #777e94; }
.chroma .cp { color: #8ec07c; }
.chroma .cpf { color: #649bc4; }
.chroma .cs { color: #9075cd; }
.chroma .dl { color: #649bc4; }
.chroma .gd { color: #ffffff; background-color: #5f3737; }
.chroma .ge { color: #ddee30; }
.chroma .gh { color: #ffaa10; }
.chroma .gi { color: #ffffff; background-color: #3a523a; }
.chroma .go { color: #777e94; }
.chroma .gp { color: #ebdbb2; }
.chroma .gr { color: #ff4433; }
.chroma .gs { color: #ebdbb2; }
.chroma .gt { color: #ff7540; }
.chroma .gu { color: #b8bb26; }
.chroma .il { color: #649bc4; }
.chroma .k { color: #ff7540; }
.chroma .kc { color: #649bc4; }
.chroma .kd { color: #ff7540; }
.chroma .kn { color: #ffaa10; }
.chroma .kp { color: #5f8700; }
.chroma .kr { color: #ff7540; }
.chroma .kt { color: #ff7b72; }
.chroma .m { color: #649bc4; }
.chroma .mb { color: #649bc4; }
.chroma .mf { color: #649bc4; }
.chroma .mh { color: #649bc4; }
.chroma .mi { color: #649bc4; }
.chroma .mo { color: #649bc4; }
.chroma .n { color: #c9d1d9; }
.chroma .na { color: #fabd2f; }
.chroma .nb { color: #fabd2f; }
.chroma .nc { color: #ffaa10; }
.chroma .nd { color: #8ec07c; }
.chroma .ne { color: #ff7540; }
.chroma .nf { color: #fabd2f; }
.chroma .ni { color: #fabd2f; }
.chroma .nl { color: #ff7540; }
.chroma .nn { color: #c9d1d9; }
.chroma .no { color: #649bc4; }
.chroma .nt { color: #ff7540; }
.chroma .nv { color: #ebdbb2; }
.chroma .nx { color: #b6bac5; }
.chroma .o { color: #ff7540; }
.chroma .ow { color: #5f8700; }
.chroma .p { color: #d2d4db; }
.chroma .s { color: #b8bb26; }
.chroma .s1 { color: #b8bb26; }
.chroma .s2 { color: #b8bb26; }
.chroma .sa { color: #ffaa10; }
.chroma .sb { color: #b8bb26; }
.chroma .sc { color: #ffaa10; }
.chroma .sd { color: #b8bb26; }
.chroma .se { color: #ff8540; }
.chroma .sh { color: #b8bb26; }
.chroma .si { color: #ffaa10; }
.chroma .sr { color: #9075cd; }
.chroma .ss { color: #ff8540; }
.chroma .sx { color: #ffaa10; }
.chroma .vc { color: #649bee; }
.chroma .vg { color: #649bee; }
.chroma .vi { color: #649bee; }
.chroma .w { color: #7f8699; }

/* Inlined from web_src/css/codemirror/dark.css @ release/v1.24. */

.CodeMirror.cm-s-default .cm-property,
.CodeMirror.cm-s-paper .cm-property { color: #a0cc75; }
.CodeMirror.cm-s-default .cm-header,
.CodeMirror.cm-s-paper .cm-header { color: #9daccc; }
.CodeMirror.cm-s-default .cm-quote,
.CodeMirror.cm-s-paper .cm-quote { color: #009900; }
.CodeMirror.cm-s-default .cm-keyword,
.CodeMirror.cm-s-paper .cm-keyword { color: #cc8a61; }
.CodeMirror.cm-s-default .cm-atom,
.CodeMirror.cm-s-paper .cm-atom { color: #ef5e77; }
.CodeMirror.cm-s-default .cm-number,
.CodeMirror.cm-s-paper .cm-number { color: #ff5656; }
.CodeMirror.cm-s-default .cm-def,
.CodeMirror.cm-s-paper .cm-def { color: #e4e4e4; }
.CodeMirror.cm-s-default .cm-variable-2,
.CodeMirror.cm-s-paper .cm-variable-2 { color: #00bdbf; }
.CodeMirror.cm-s-default .cm-variable-3,
.CodeMirror.cm-s-paper .cm-variable-3 { color: #008855; }
.CodeMirror.cm-s-default .cm-comment,
.CodeMirror.cm-s-paper .cm-comment { color: #8e9ab3; }
.CodeMirror.cm-s-default .cm-string,
.CodeMirror.cm-s-paper .cm-string { color: #a77272; }
.CodeMirror.cm-s-default .cm-string-2,
.CodeMirror.cm-s-paper .cm-string-2 { color: #ff5500; }
.CodeMirror.cm-s-default .cm-meta,
.CodeMirror.cm-s-paper .cm-meta,
.CodeMirror.cm-s-default .cm-qualifier,
.CodeMirror.cm-s-paper .cm-qualifier { color: #ffb176; }
.CodeMirror.cm-s-default .cm-builtin,
.CodeMirror.cm-s-paper .cm-builtin { color: #b7c951; }
.CodeMirror.cm-s-default .cm-bracket,
.CodeMirror.cm-s-paper .cm-bracket { color: #999977; }
.CodeMirror.cm-s-default .cm-tag,
.CodeMirror.cm-s-paper .cm-tag { color: #f1d273; }
.CodeMirror.cm-s-default .cm-attribute,
.CodeMirror.cm-s-paper .cm-attribute { color: #bfcc70; }
.CodeMirror.cm-s-default .cm-hr,
.CodeMirror.cm-s-paper .cm-hr { color: #999999; }
.CodeMirror.cm-s-default .cm-url,
.CodeMirror.cm-s-paper .cm-url { color: #c5cfd0; }
.CodeMirror.cm-s-default .cm-link,
.CodeMirror.cm-s-paper .cm-link { color: #d8c792; }
.CodeMirror.cm-s-default .cm-error,
.CodeMirror.cm-s-paper .cm-error { color: #dbdbeb; }

/* invert emojis that are hard to read otherwise */
.emoji[aria-label="check mark"],
.emoji[aria-label="currency exchange"],
.emoji[aria-label="TOP arrow"],
.emoji[aria-label="END arrow"],
.emoji[aria-label="ON! arrow"],
.emoji[aria-label="SOON arrow"],
.emoji[aria-label="heavy dollar sign"],
.emoji[aria-label="copyright"],
.emoji[aria-label="registered"],
.emoji[aria-label="trade mark"],
.emoji[aria-label="multiply"],
.emoji[aria-label="plus"],
.emoji[aria-label="minus"],
.emoji[aria-label="divide"],
.emoji[aria-label="curly loop"],
.emoji[aria-label="double curly loop"],
.emoji[aria-label="wavy dash"],
.emoji[aria-label="paw prints"],
.emoji[aria-label="musical note"],
.emoji[aria-label="musical notes"] {
  filter: invert(100%) hue-rotate(180deg);
}