/* =========================================================================
   ALUG@UCI — Forgejo theme
   Matches the Anteater Linux User Group site:
     • pure-black header bar
     • deep navy-indigo page background
     • crisp white text
     • monospace body type (Red Hat Mono) + geometric-sans headings (Red Hat Display)
   -------------------------------------------------------------------------
   Install:
     1. Copy this file to:  $FORGEJO_CUSTOM/public/assets/css/theme-alug.css
     2. In app.ini under [ui] add `alug` to THEMES:
          [ui]
          THEMES = forgejo-auto, forgejo-light, forgejo-dark, alug
          DEFAULT_THEME = alug        ; optional
     3. Load the web fonts via $FORGEJO_CUSTOM/templates/custom/header.tmpl :
          <link rel="preconnect" href="https://fonts.googleapis.com">
          <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
          <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Red+Hat+Display:wght@500;700;900&family=Red+Hat+Mono:wght@400;500;700&display=swap">
     4. Restart Forgejo (needed for app.ini + new template), then hard-refresh (Ctrl+Shift+R).
   Built/tested against Forgejo v7+ CSS-variable theming. Confirm variable names
   against your version's /assets/css/theme-forgejo-dark.css if anything looks off.
   ========================================================================= */

[data-theme="alug"],
.theme-alug {
    color-scheme: dark;

    /* ---- Typography -------------------------------------------------- */
    /* Body / UI runs monospace to echo the terminal feel of the ALUG logo. */
    --fonts-regular: "Red Hat Mono", ui-monospace, "Cascadia Code", "Source Code Pro", monospace;
    --fonts-monospace: "Red Hat Mono", ui-monospace, "Source Code Pro", monospace;

    /* ---- Brand / accent ---------------------------------------------- */
    /* Tux blue + the yellow from the penguin's feet, used as accents. */
    --color-primary: #3b7dd8;
    --color-primary-contrast: #ffffff;
    --color-primary-dark-1: #4f8ce0;
    --color-primary-dark-2: #6aa0e8;
    --color-primary-dark-3: #86b4ef;
    --color-primary-dark-4: #a3c8f5;
    --color-primary-dark-5: #d3e3fb;
    --color-primary-dark-6: #ecf3fd;
    --color-primary-dark-7: #f7faff;
    --color-primary-light-1: #336fc1;
    --color-primary-light-2: #2c61a9;
    --color-primary-light-3: #275591;
    --color-primary-light-4: #21477a;
    --color-primary-light-5: #f4cf4a;     /* yellow hover wash hook */
    --color-primary-light-6: #15294a;
    --color-primary-light-7: #0f1d36;
    --color-primary-alpha-10: #3b7dd819;
    --color-primary-alpha-20: #3b7dd833;
    --color-primary-alpha-30: #3b7dd84c;
    --color-primary-alpha-40: #3b7dd866;
    --color-primary-alpha-50: #3b7dd87f;
    --color-primary-alpha-60: #3b7dd899;
    --color-primary-alpha-70: #3b7dd8b2;
    --color-primary-alpha-80: #3b7dd8cc;
    --color-primary-alpha-90: #3b7dd8e5;
    --color-primary-hover: #4f8ce0;
    --color-primary-active: #2c61a9;

    --color-secondary: #2a2a4a;
    --color-secondary-dark-1: #33335a;
    --color-secondary-dark-2: #3d3d6b;
    --color-secondary-dark-3: #47477c;
    --color-secondary-dark-4: #51518d;
    --color-secondary-dark-5: #5c5c9f;
    --color-secondary-dark-6: #6868b0;
    --color-secondary-dark-7: #7575c0;
    --color-secondary-dark-8: #8585cd;
    --color-secondary-dark-9: #9696d9;
    --color-secondary-dark-10: #a8a8e3;
    --color-secondary-dark-11: #b9b9ec;
    --color-secondary-dark-12: #cbcbf3;
    --color-secondary-dark-13: #dcdcf8;
    --color-secondary-light-1: #222240;
    --color-secondary-light-2: #1c1c36;
    --color-secondary-alpha-10: #2a2a4a19;
    --color-secondary-alpha-20: #2a2a4a33;
    --color-secondary-alpha-30: #2a2a4a4c;
    --color-secondary-alpha-40: #2a2a4a66;
    --color-secondary-alpha-50: #2a2a4a7f;
    --color-secondary-alpha-60: #2a2a4a99;
    --color-secondary-alpha-70: #2a2a4ab2;
    --color-secondary-alpha-80: #2a2a4acc;
    --color-secondary-alpha-90: #2a2a4ae5;
    --color-secondary-button: #33335a;
    --color-secondary-hover: #3d3d6b;

    /* ---- Accent yellow (Tux feet) for highlights -------------------- */
    --color-accent: #f4cf4a;
    --color-gold: #f4cf4a;

    /* ---- Status colors ---------------------------------------------- */
    --color-red: #e0584f;
    --color-orange: #e08a3c;
    --color-yellow: #f4cf4a;
    --color-olive: #b4c94a;
    --color-green: #4caf6f;
    --color-teal: #3cb6b6;
    --color-blue: #3b7dd8;
    --color-violet: #8f6fe0;
    --color-purple: #a05fd0;
    --color-pink: #d65f9f;
    --color-brown: #a0734f;
    --color-black: #0a0a14;

    --color-success: #4caf6f;
    --color-info: #3b7dd8;
    --color-warning: #f4cf4a;
    --color-error: #e0584f;

    /* ---- Backgrounds & surfaces ------------------------------------- */
    /* The page navy from the screenshot, with the black header handled below. */
    --color-body: #1e1e38;                 /* deep navy-indigo page bg     */
    --color-box-header: #20203c;
    --color-box-body: #232342;             /* cards / boxes                */
    --color-box-body-highlight: #2a2a4e;
    --color-text-dark: #ffffff;
    --color-text: #eef0f6;                 /* crisp near-white body text   */
    --color-text-light: #c7cad8;
    --color-text-light-1: #b2b6c9;
    --color-text-light-2: #9da2ba;
    --color-text-light-3: #888ead;
    --color-footer: #1e1e38;               /* navy header/footer bar       */
    --color-nav-bg: #1e1e38;               /* header bar = navy page color */
    --color-nav-hover-bg: #2a2a4e;

    --color-light: #ffffff0a;
    --color-light-mimic-enabled: rgba(0, 0, 0, 0);
    --color-light-border: #ffffff1f;
    --color-hover: #ffffff14;
    --color-active: #ffffff1f;
    --color-menu: #232342;
    --color-card: #232342;
    --color-markup-table-row: #ffffff08;
    --color-markup-code-block: #15152b;
    --color-button: #2a2a4e;
    --color-code-bg: #15152b;
    --color-code-sidebar-bg: #1a1a32;
    --color-shadow: #00000066;
    --color-secondary-bg: #1a1a32;
    --color-expand-button: #2f2f54;
    --color-placeholder-text: #7c81a0;
    --color-editor-line-highlight: #2a2a4e;
    --color-project-board-bg: #1a1a32;
    --color-caret: #eef0f6;

    /* ---- Borders & inputs ------------------------------------------- */
    --color-input-text: #eef0f6;
    --color-input-background: #15152b;
    --color-input-border: #3a3a5e;
    --color-input-border-hover: #4a4a72;
    --color-navbar: #1e1e38;
    --color-navbar-transparent: #1e1e3800;
    --color-light-gray: #2a2a4e;
    --color-border: #34345a;
    --color-border-secondary: #2a2a4e;

    /* ---- Links ------------------------------------------------------- */
    --color-link: #6aa0e8;
    --color-link-hover: #86b4ef;

    /* ---- Diff / labels ---------------------------------------------- */
    --color-diff-removed-word-bg: #6b2b2b;
    --color-diff-added-word-bg: #2b5b38;
    --color-diff-removed-row-bg: #2a1a1f;
    --color-diff-added-row-bg: #16291d;
    --color-diff-removed-row-border: #45282d;
    --color-diff-added-row-border: #234a30;
    --color-diff-inactive: #1c1c36;
}

/* =========================================================================
   Edge-case rules — things CSS variables alone don't fully cover.
   These give the look its character: the pure-black header bar, sans-serif
   headings against monospace body, and yellow accents on hover.
   ========================================================================= */

/* Header bar: solid opaque navy that fully covers the page gradient.
   Every item and gap inside is forced transparent so the WHOLE bar reads
   as one flat color — no patchwork between clickable and empty areas. */
[data-theme="alug"] #navbar,
[data-theme="alug"] .page-content.navbar,
[data-theme="alug"] nav.navbar {
    background-color: #1e1e38 !important;
    background-image: none !important;
    border-bottom: 1px solid #2a2a4e !important;
}
/* All nav items, links, dropdowns and their gaps inherit the bar color. */
[data-theme="alug"] #navbar .item,
[data-theme="alug"] #navbar a.item,
[data-theme="alug"] #navbar .dropdown,
[data-theme="alug"] #navbar .menu,
[data-theme="alug"] .ui.secondary.menu .item,
[data-theme="alug"] .ui.secondary.menu .dropdown,
[data-theme="alug"] .ui.secondary.menu > .item {
    background-color: transparent !important;
    background-image: none !important;
}

/* Headings in a geometric sans to mirror the "About Us" / section titles,
   contrasting the monospace body. */
[data-theme="alug"] h1,
[data-theme="alug"] h2,
[data-theme="alug"] h3,
[data-theme="alug"] .ui.header,
[data-theme="alug"] .markup h1,
[data-theme="alug"] .markup h2,
[data-theme="alug"] .markup h3 {
    font-family: "Red Hat Display", -apple-system, "Segoe UI", system-ui, sans-serif;
    font-weight: 700;
    letter-spacing: -0.01em;
}

/* Brand / repo title gets the heaviest weight, echoing the bold "ALUG@UCI". */
[data-theme="alug"] .navbar .brand,
[data-theme="alug"] .repo-title {
    font-family: "Red Hat Display", system-ui, sans-serif;
    font-weight: 900;
}

/* Remove the divider line + box around the logo so it blends into the header.
   Forgejo draws a right border / background on the brand item; strip it all. */
[data-theme="alug"] #navbar .brand,
[data-theme="alug"] .navbar .brand,
[data-theme="alug"] #navbar .item.brand,
[data-theme="alug"] .ui.secondary.menu .item.brand,
[data-theme="alug"] #navbar > .item:first-child,
[data-theme="alug"] .ui.secondary.menu.main-nav > .item:first-child {
    background: transparent !important;
    border: none !important;
    border-right: none !important;
    box-shadow: none !important;
}
/* Some Forgejo versions use a ::before/::after pseudo-element as the divider. */
[data-theme="alug"] #navbar .brand::before,
[data-theme="alug"] #navbar .brand::after,
[data-theme="alug"] .ui.secondary.menu.main-nav > .item:first-child::after {
    display: none !important;
    border: none !important;
    content: none !important;
}

/* Yellow accent underline on hovered nav links (the Tux-feet yellow). */
[data-theme="alug"] #navbar a:hover,
[data-theme="alug"] .navbar .item:hover {
    color: #f4cf4a !important;
}

/* Primary buttons keep the Tux blue with white text. */
[data-theme="alug"] .ui.primary.button,
[data-theme="alug"] .ui.primary.buttons .button {
    background: #3b7dd8;
    color: #ffffff;
}
[data-theme="alug"] .ui.primary.button:hover,
[data-theme="alug"] .ui.primary.buttons .button:hover {
    background: #4f8ce0;
}

/* Subtle navy gradient on the body for a touch of depth, like the screenshot. */
[data-theme="alug"],
[data-theme="alug"] body,
.theme-alug,
.theme-alug body {
    background:
        radial-gradient(1200px 600px at 50% -10%, #25254a 0%, #1e1e38 55%, #18182f 100%)
        fixed;
}

/* =========================================================================
   Forced fallbacks — applied directly (not via variables) so the dark look
   takes hold even if your Forgejo version names a base color variable
   differently. Safe to trim once you confirm the variables above cover it.
   ========================================================================= */
[data-theme="alug"] body {
    color: #eef0f6 !important;
}
[data-theme="alug"] .page-content,
[data-theme="alug"] .ui.container,
[data-theme="alug"] .repository,
[data-theme="alug"] .dashboard {
    color: #eef0f6;
}
/* Boxes, cards, segments, menus — the white panels in your screenshot. */
[data-theme="alug"] .ui.segment,
[data-theme="alug"] .ui.card,
[data-theme="alug"] .ui.menu,
[data-theme="alug"] .ui.table,
[data-theme="alug"] .ui.attached.segment,
[data-theme="alug"] .repository .ui.segment {
    background: #232342 !important;
    color: #eef0f6 !important;
    border-color: #34345a !important;
}
/* Popup dropdown menus (e.g. the avatar/user menu): force the whole panel
   AND every row to one solid color so there's no shade mismatch between
   items and the panel. Hover gets a distinct highlight. */
[data-theme="alug"] .ui.dropdown .menu,
[data-theme="alug"] .ui.menu .menu,
[data-theme="alug"] .tippy-box,
[data-theme="alug"] .tippy-content,
[data-theme="alug"] .ui.popup {
    background: #232342 !important;
    background-image: none !important;
    border-color: #34345a !important;
    color: #eef0f6 !important;
}
[data-theme="alug"] .ui.dropdown .menu > .item,
[data-theme="alug"] .ui.dropdown .menu > .header,
[data-theme="alug"] .ui.menu .menu > .item,
[data-theme="alug"] .ui.popup .item {
    background: transparent !important;
    background-image: none !important;
    color: #eef0f6 !important;
}
[data-theme="alug"] .ui.dropdown .menu > .item:hover,
[data-theme="alug"] .ui.menu .menu > .item:hover,
[data-theme="alug"] .ui.popup .item:hover {
    background: #2f2f54 !important;
}
/* Dividers inside dropdown menus shouldn't read as a color band. */
[data-theme="alug"] .ui.dropdown .menu > .divider,
[data-theme="alug"] .ui.menu .menu > .divider {
    background: transparent !important;
    border-top: 1px solid #34345a !important;
}
/* Inputs / dropdowns — the white fields in the settings page. */
[data-theme="alug"] .ui.input > input,
[data-theme="alug"] .ui.selection.dropdown,
[data-theme="alug"] input[type="text"],
[data-theme="alug"] textarea {
    background: #15152b !important;
    color: #eef0f6 !important;
    border-color: #3a3a5e !important;
}
/* Header bar: solid opaque navy across all page types. */
[data-theme="alug"] .ui.secondary.menu.main-nav,
[data-theme="alug"] #navbar,
[data-theme="alug"] .navbar,
[data-theme="alug"] nav#navbar {
    background-color: #1e1e38 !important;
    background-image: none !important;
    border-bottom: 1px solid #2a2a4e !important;
}

/* Dashboard context switcher (the "avatar + username ▾" strip under the main
   header). It paints its own flat navy over the page gradient, so it reads a
   shade lighter than its surroundings. Force it (and its item/dropdown)
   transparent so the page gradient shows through uniformly. */
[data-theme="alug"] .dashboard-navbar,
[data-theme="alug"] .secondary-nav,
[data-theme="alug"] .ui.secondary.menu:not(.main-nav),
[data-theme="alug"] .dashboard .ui.secondary.menu,
[data-theme="alug"] .page-content.dashboard .ui.secondary.menu,
[data-theme="alug"] .feeds .ui.secondary.menu,
[data-theme="alug"] .ui.secondary.menu .ui.dropdown.jump,
[data-theme="alug"] .dashboard-navbar .item,
[data-theme="alug"] .secondary-nav .item {
    background-color: transparent !important;
    background-image: none !important;
    border: none !important;
    box-shadow: none !important;
}

/* =========================================================================
   Global font block — applies regardless of the active theme. Sets the
   font CSS variables on `body .ui`, plus direct font-family fallbacks for
   body text and code/monospace elements so the fonts take hold everywhere
   even outside the theme scope.
   ========================================================================= */
body .ui {
    --fonts-regular: "Red Hat Text", -apple-system, "Segoe UI", system-ui, sans-serif;
    --fonts-monospace: "Red Hat Mono", ui-monospace, monospace;
}

body {
    font-family: "Red Hat Text", -apple-system, "Segoe UI", system-ui, sans-serif;
}

code, pre, kbd, samp, tt, .mono {
    font-family: "Red Hat Mono", ui-monospace, monospace;
}