/* =============================================================================
   Orion Labs - Gitea theme
   Black / gold palette from orionlabs.dev, but a READABLE sans body font
   (this is a tool site with a lot of prose - monospace everywhere was too
   hard to read). Roboto Mono is kept for code/diffs only. Gold accent, clear
   checked-state colours on inputs, and each dashboard activity item is its
   own card.
   ============================================================================= */

@font-face {
    font-family: 'Roboto Mono';
    font-weight: 400 700;
    font-style: normal;
    font-display: swap;
    src: url('/assets/fonts/roboto-mono-latin.woff2') format('woff2');
}

:root,
html[data-theme="orion"],
.theme-orion {
    --color-primary:                #D7BF72;
    --color-primary-dark-1:         #b89d4a;
    --color-primary-dark-2:         #8f7a37;
    --color-primary-light-1:        #e6d08f;
    --color-primary-light-2:        #f0e6c0;
    --color-primary-hover:          #e6d08f;
    --color-primary-active:         #b89d4a;
    --color-primary-alpha-10:       rgba(215, 191, 114, 0.10);
    --color-primary-alpha-20:       rgba(215, 191, 114, 0.20);
    --color-primary-alpha-30:       rgba(215, 191, 114, 0.30);
    --color-primary-alpha-40:       rgba(215, 191, 114, 0.40);
    --color-primary-alpha-50:       rgba(215, 191, 114, 0.50);
    --color-primary-alpha-60:       rgba(215, 191, 114, 0.60);
    --color-primary-alpha-70:       rgba(215, 191, 114, 0.70);
    --color-primary-alpha-80:       rgba(215, 191, 114, 0.80);
    --color-primary-alpha-90:       rgba(215, 191, 114, 0.90);
    --color-primary-alpha-100:      #D7BF72;

    --color-body:                   #0a0a0a;
    --color-box-body:               #141414;
    --color-box-body-highlight:     #191919;
    --color-box-header:             #191919;
    --color-nav-bg:                 #0d0d0d;
    --color-nav-hover-bg:           #191919;
    --color-navbar:                 #0d0d0d;
    --color-navbar-transparent:     rgba(13, 13, 13, 0.85);
    --color-menu:                   #141414;
    --color-header-wrapper:         #0d0d0d;
    --color-header-wrapper-transparent: rgba(13, 13, 13, 0.9);

    --color-secondary:              #202020;
    --color-secondary-dark-1:       #262626;
    --color-secondary-dark-2:       #2e2e2e;
    --color-secondary-light-1:      #202020;
    --color-secondary-light-2:      #2e2e2e;
    --color-secondary-light-4:      #262626;
    --color-secondary-button:       #202020;
    --color-secondary-hover:        #262626;
    --color-secondary-active:       #2e2e2e;

    --color-text:                   #e6e6e6;
    --color-text-light:             #c4c4c4;
    --color-text-light-1:           #c4c4c4;
    --color-text-light-2:           #a8a8a8;
    --color-text-light-3:           #7a7a7a;

    --color-input-text:             #e6e6e6;
    --color-input-background:       #161616;
    --color-input-toggle-background: #242424;
    --color-input-border:           rgba(255, 255, 255, 0.16);
    --color-input-border-hover:     rgba(255, 255, 255, 0.42);

    --color-light:                  rgba(255, 255, 255, 0.03);
    --color-light-mimic-enabled:    rgba(255, 255, 255, 0.06);
    --color-light-border:           rgba(255, 255, 255, 0.12);
    --color-hover:                  rgba(255, 255, 255, 0.07);
    --color-active:                 rgba(255, 255, 255, 0.11);
    --color-focus:                  rgba(215, 191, 114, 0.28);

    --color-active-line:            #D7BF72;

    --color-red:                    #f2705f;
    --color-orange:                 #f4a058;
    --color-yellow:                 #f4c25a;
    --color-olive:                  #b89d4a;
    --color-green:                  #5cd58c;
    --color-teal:                   #4dc0b5;
    --color-blue:                   #6ba4ff;
    --color-violet:                 #a78bfa;
    --color-purple:                 #c084fc;
    --color-pink:                   #f28ac0;
    --color-brown:                  #c08457;
    --color-black:                  #0a0a0a;

    --color-link:                   #e6d08f;
    --color-link-hover:             #f0e6c0;
    --color-link-active:            #D7BF72;

    --color-error-border:           #f2705f;
    --color-error-bg:               rgba(242, 112, 95, 0.12);
    --color-error-text:             #f2705f;
    --color-success-border:         #5cd58c;
    --color-success-bg:             rgba(92, 213, 140, 0.12);
    --color-success-text:           #5cd58c;
    --color-warning-border:         #f4c25a;
    --color-warning-bg:             rgba(244, 194, 90, 0.12);
    --color-warning-text:           #f4c25a;
    --color-info-border:            #6ba4ff;
    --color-info-bg:                rgba(107, 164, 255, 0.12);
    --color-info-text:              #6ba4ff;

    --border-radius:                6px;
    --border-radius-medium:         8px;
    --border-radius-full:           9999px;

    /* READABLE by default. A clean modern system sans for prose; Roboto Mono
       only where it belongs (code, diffs, SHAs). */
    --fonts-regular:   -apple-system, BlinkMacSystemFont, "Segoe UI", "Segoe UI Variable", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
    --fonts-monospace: 'Roboto Mono', ui-monospace, "Cascadia Mono", Consolas, "Liberation Mono", monospace;
    --fonts-emoji:     "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji";
}

html[data-theme="orion"] body,
html.theme-orion body {
    background: var(--color-body);
    color: var(--color-text);
    font-family: var(--fonts-regular);
    letter-spacing: 0;
    font-size: 14px;
    line-height: 1.55;
}

/* Code stays monospace. */
html[data-theme="orion"] code,
html[data-theme="orion"] pre,
html[data-theme="orion"] .file-view,
html[data-theme="orion"] .commit-id,
html[data-theme="orion"] .sha,
html[data-theme="orion"] tt {
    font-family: var(--fonts-monospace);
}

/* --- top nav ------------------------------------------------------------- */
html[data-theme="orion"] #navbar,
html[data-theme="orion"] .navbar.ui.top.secondary.stackable.main.menu {
    background: var(--color-navbar) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.10);
    padding-inline: 20px;
}
html[data-theme="orion"] .ui.secondary.menu .item {
    color: var(--color-text-light) !important;
    font-size: 13.5px;
    font-weight: 500;
    padding-block: 12px;
    border-bottom: 2px solid transparent;
    transition: color 0.14s, border-color 0.14s;
    background: transparent !important;
}
html[data-theme="orion"] .ui.secondary.menu .item:hover {
    color: var(--color-text) !important;
    background: transparent !important;
    border-bottom-color: rgba(215, 191, 114, 0.35);
}
html[data-theme="orion"] .ui.secondary.menu .active.item {
    color: var(--color-primary-light-1) !important;
    border-bottom-color: var(--color-primary);
    background: transparent !important;
}
/* Brand logo comes from /assets/img/logo.svg which we override with the Orion
   mark (see custom/public/assets/img/logo.svg). Safety net: hide any inline
   Gitea tea-cup SVG if a template renders one directly. */
html[data-theme="orion"] .svg.gitea-gitea {
    display: none !important;
}
html[data-theme="orion"] .item.brand .brand-short-name,
html[data-theme="orion"] .item.brand .brand-full-name {
    font-size: 15px !important;
    font-weight: 700 !important;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--color-text) !important;
}
html[data-theme="orion"] .item.brand:hover .brand-short-name,
html[data-theme="orion"] .item.brand:hover .brand-full-name {
    color: var(--color-primary-light-1) !important;
}

/* --- surfaces / cards ---------------------------------------------------- */
html[data-theme="orion"] .ui.segment,
html[data-theme="orion"] .repository .segment,
html[data-theme="orion"] .ui.attached.header,
html[data-theme="orion"] .ui.attached.segment {
    background: var(--color-box-body);
    border-color: rgba(255, 255, 255, 0.10);
    color: var(--color-text);
}
html[data-theme="orion"] .ui.card,
html[data-theme="orion"] .ui.cards > .card {
    background: var(--color-box-body);
    border-color: rgba(255, 255, 255, 0.10);
    box-shadow: none;
}

/* --- DASHBOARD: each activity item is its own card ----------------------- */
/* The outer feed containers stay transparent; the visual weight moves to the
   individual items so the feed reads as a stack of cards. */
html[data-theme="orion"] .dashboard .feeds,
html[data-theme="orion"] .dashboard .news,
html[data-theme="orion"] .dashboard .flex-container-main {
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
}
html[data-theme="orion"] .dashboard .news > .item,
html[data-theme="orion"] .dashboard .feeds .news .item {
    background: var(--color-box-body);
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: 8px;
    padding: 14px 16px;
    margin-bottom: 10px;
    transition: border-color 0.14s;
}
html[data-theme="orion"] .dashboard .news > .item:hover {
    border-color: rgba(215, 191, 114, 0.30);
}
/* The contribution heat-map is its own card too. */
html[data-theme="orion"] .dashboard .heatmap,
html[data-theme="orion"] #user-heatmap {
    background: var(--color-box-body);
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: 8px;
    padding: 16px 20px;
    margin-bottom: 16px;
}
html[data-theme="orion"] .dashboard .heatmap svg text {
    fill: var(--color-text-light-2);
}
/* Right rail (Repositories filter / Organisations) reads as a card. */
html[data-theme="orion"] .dashboard .flex-container-sidebar > .ui.segment,
html[data-theme="orion"] .dashboard .flex-container-sidebar > div > .ui.segment {
    background: var(--color-box-body) !important;
    border: 1px solid rgba(255, 255, 255, 0.10) !important;
    border-radius: 8px !important;
}

/* --- buttons ------------------------------------------------------------- */
html[data-theme="orion"] .ui.primary.button,
html[data-theme="orion"] .ui.primary.buttons .button {
    background: var(--color-primary);
    color: #0a0a0a;
    font-weight: 700;
}
html[data-theme="orion"] .ui.primary.button:hover,
html[data-theme="orion"] .ui.primary.buttons .button:hover {
    background: var(--color-primary-hover);
    color: #0a0a0a;
}
html[data-theme="orion"] .ui.button {
    background: var(--color-secondary-button);
    color: var(--color-text);
    border: 1px solid rgba(255, 255, 255, 0.12);
}
html[data-theme="orion"] .ui.button:hover {
    background: var(--color-secondary-hover);
    border-color: rgba(255, 255, 255, 0.24);
    color: var(--color-text);
}
html[data-theme="orion"] .ui.green.button,
html[data-theme="orion"] .ui.green.buttons .button {
    background: var(--color-green);
    color: #0a0a0a;
}

/* --- links --------------------------------------------------------------- */
html[data-theme="orion"] a,
html[data-theme="orion"] .ui.link { color: var(--color-link); }
html[data-theme="orion"] a:hover { color: var(--color-link-hover); }

/* --- inputs -------------------------------------------------------------- */
html[data-theme="orion"] .ui.input > input,
html[data-theme="orion"] .ui.form textarea,
html[data-theme="orion"] .ui.form input,
html[data-theme="orion"] .ui.form select,
html[data-theme="orion"] .ui.selection.dropdown {
    background: var(--color-input-background);
    color: var(--color-text);
    border-color: var(--color-input-border);
    border-radius: 6px;
}
html[data-theme="orion"] .ui.input > input:focus,
html[data-theme="orion"] .ui.form textarea:focus,
html[data-theme="orion"] .ui.form input:focus,
html[data-theme="orion"] .ui.form select:focus {
    border-color: var(--color-primary);
    background: var(--color-input-background);
    color: var(--color-text);
}

/* --- CHECKBOXES + RADIOS: clear checked vs unchecked colour -------------- */
/* Native inputs (Gitea 1.26 uses these in many forms). accent-color is the
   modern one-liner that colours the check/dot gold. */
html[data-theme="orion"] input[type="checkbox"],
html[data-theme="orion"] input[type="radio"] {
    accent-color: var(--color-primary);
}
/* Fomantic pseudo-element checkboxes/radios (older widgets). Unchecked =
   muted surface + hairline; checked = solid gold box with a dark tick. */
html[data-theme="orion"] .ui.checkbox label:before,
html[data-theme="orion"] .ui.checkbox .box:before,
html[data-theme="orion"] .ui.radio.checkbox label:before,
html[data-theme="orion"] .ui.radio.checkbox .box:before {
    background: #1c1c1c;
    border: 1px solid rgba(255, 255, 255, 0.30);
}
html[data-theme="orion"] .ui.checkbox input:checked ~ label:before,
html[data-theme="orion"] .ui.checkbox input:checked ~ .box:before,
html[data-theme="orion"] .ui.radio.checkbox input:checked ~ label:before,
html[data-theme="orion"] .ui.radio.checkbox input:checked ~ .box:before {
    background: var(--color-primary) !important;
    border-color: var(--color-primary) !important;
}
html[data-theme="orion"] .ui.checkbox input:checked ~ label:after,
html[data-theme="orion"] .ui.checkbox input:checked ~ .box:after {
    color: #0a0a0a !important;
}
html[data-theme="orion"] .ui.radio.checkbox input:checked ~ label:after,
html[data-theme="orion"] .ui.radio.checkbox input:checked ~ .box:after {
    background: #0a0a0a !important;   /* the inner dot on a gold radio */
}
/* Focus ring so keyboard users see the active control. */
html[data-theme="orion"] .ui.checkbox input:focus ~ label:before,
html[data-theme="orion"] .ui.radio.checkbox input:focus ~ label:before {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 2px var(--color-focus);
}

/* --- tables + labels: a little more colour differentiation --------------- */
html[data-theme="orion"] .ui.table thead th {
    background: var(--color-box-header);
    color: var(--color-text-light-1);
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}
html[data-theme="orion"] .ui.table tr:hover td {
    background: rgba(255, 255, 255, 0.03);
}
html[data-theme="orion"] .ui.label {
    background: #202020;
    color: var(--color-text-light-1);
    border: 1px solid rgba(255, 255, 255, 0.10);
}

/* --- sign-in SSO block (extra_links.tmpl) -------------------------------- */
.orion-sso-primary a.orion-sso-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: #D7BF72;
    color: #0a0a0a !important;
    padding: 12px 20px;
    border-radius: 6px;
    text-decoration: none !important;
    font-weight: 700;
    border: 1px solid #D7BF72;
    margin: 8px 0;
    width: 100%;
    transition: background .15s;
}
.orion-sso-primary a.orion-sso-btn:hover {
    background: #e6d08f;
    border-color: #e6d08f;
}
.orion-sso-primary .orion-sso-hint {
    color: #a8a8a8;
    text-align: center;
    margin: 4px 0 16px;
    font-size: 12px;
}