/* Custom styling for Mirus Technologies */

/* ----------------------------------------------------------------------
   Mirus theme: blue primary + orange accents.
   Loaded after the default forgejo-auto theme, so :root overrides win.
   Light variant in :root; dark variant inside prefers-color-scheme: dark.
   ---------------------------------------------------------------------- */

:root {
  /* --- primary palette: Tailwind blue --- */
  --color-primary: #2563eb;            /* blue-600 */
  --color-primary-contrast: #ffffff;
  --color-primary-dark-1: #1d4ed8;     /* blue-700 */
  --color-primary-dark-2: #1e40af;     /* blue-800 */
  --color-primary-dark-3: #1e3a8a;     /* blue-900 */
  --color-primary-dark-4: #172554;     /* blue-950 */
  --color-primary-dark-5: #172554;
  --color-primary-dark-6: #0f1d44;
  --color-primary-dark-7: #0a1535;
  --color-primary-light-1: #3b82f6;    /* blue-500 */
  --color-primary-light-2: #60a5fa;    /* blue-400 */
  --color-primary-light-3: #93c5fd;    /* blue-300 */
  --color-primary-light-4: #bfdbfe;    /* blue-200 */
  --color-primary-light-5: #dbeafe;    /* blue-100 */
  --color-primary-light-6: #eff6ff;    /* blue-50 */
  --color-primary-light-7: #f5f9ff;
  --color-primary-alpha-10: #2563eb19;
  --color-primary-alpha-20: #2563eb33;
  --color-primary-alpha-30: #2563eb4b;
  --color-primary-alpha-40: #2563eb66;
  --color-primary-alpha-50: #2563eb80;
  --color-primary-alpha-60: #2563eb99;
  --color-primary-alpha-70: #2563ebb3;
  --color-primary-alpha-80: #2563ebcc;
  --color-primary-alpha-90: #2563ebe1;
  --color-primary-hover: var(--color-primary-dark-1);
  --color-primary-active: var(--color-primary-dark-2);

  /* --- orange accents (independent of primary) --- */
  --color-accent: #f97316;             /* orange-500 */
  --color-small-accent: #fed7aa;       /* orange-200 */
  --color-highlight-fg: #ea580c;       /* orange-600 */
  --color-highlight-bg: #ffedd5;       /* orange-100 */

  /* selection uses the orange accent so highlights pop */
  --color-selection-bg: #f97316;
  --color-selection-fg: #ffffff;

  /* reactions / mentions / hovers pick up the orange tint */
  --color-reaction-bg: #f9731614;
  --color-reaction-active-bg: #f9731633;
  --color-reaction-hover-bg: #f973164b;

  /* zebra row colour: subtle black tint (works on any container bg) */
  --mirus-table-zebra: rgba(0, 0, 0, 0.025);
}

@media (prefers-color-scheme: dark) {
  :root {
    /* --- primary palette: lighter Tailwind blues for dark bg --- */
    --color-primary: #60a5fa;          /* blue-400 */
    --color-primary-contrast: #0a1535;
    --color-primary-dark-1: #93c5fd;   /* blue-300 — Forgejo's dark theme treats
                                          "dark-N" as more saturated toward fg */
    --color-primary-dark-2: #bfdbfe;
    --color-primary-dark-3: #dbeafe;
    --color-primary-dark-4: #eff6ff;
    --color-primary-dark-5: #eff6ff;
    --color-primary-dark-6: #f5f9ff;
    --color-primary-dark-7: #f5f9ff;
    --color-primary-light-1: #3b82f6;  /* blue-500 */
    --color-primary-light-2: #2563eb;  /* blue-600 */
    --color-primary-light-3: #1d4ed8;  /* blue-700 */
    --color-primary-light-4: #1e40af;  /* blue-800 */
    --color-primary-light-5: #1e3a8a;  /* blue-900 */
    --color-primary-light-6: #172554;
    --color-primary-light-7: #0f1d44;
    --color-primary-alpha-10: #60a5fa19;
    --color-primary-alpha-20: #60a5fa33;
    --color-primary-alpha-30: #60a5fa4b;
    --color-primary-alpha-40: #60a5fa66;
    --color-primary-alpha-50: #60a5fa80;
    --color-primary-alpha-60: #60a5fa99;
    --color-primary-alpha-70: #60a5fab3;
    --color-primary-alpha-80: #60a5facc;
    --color-primary-alpha-90: #60a5fae1;
    --color-primary-hover: var(--color-primary-dark-1);
    --color-primary-active: var(--color-primary-dark-2);

    /* --- orange accents (warmer, slightly lighter for dark bg) --- */
    --color-accent: #fb923c;           /* orange-400 */
    --color-small-accent: #c2410c;     /* orange-700 */
    --color-highlight-fg: #fdba74;     /* orange-300 */
    --color-highlight-bg: #7c2d1233;   /* orange-900 @ 20% */

    --color-selection-bg: #fb923c;
    --color-selection-fg: #0a0a0a;

    --color-reaction-bg: #fb923c19;
    --color-reaction-active-bg: #fb923c4b;
    --color-reaction-hover-bg: #fb923c66;

    /* zebra row colour: subtle white tint over the dark body */
    --mirus-table-zebra: rgba(255, 255, 255, 0.035);
  }
}

/* ----------------------------------------------------------------------
   Zebra-striped tables.
   Cast a wide net: every <table> regardless of Fomantic class, and
   handle both <tbody>-wrapped and direct-<tr> structures. We use
   nth-of-type(even) so <thead>/<tfoot> rows don't shift parity.
   ---------------------------------------------------------------------- */

table tbody tr:nth-of-type(even),
table tbody tr:nth-of-type(even) > td,
table > tr:nth-of-type(even),
table > tr:nth-of-type(even) > td {
  background-color: var(--mirus-table-zebra);
}

/* Forgejo's repo file browser and commit list aren't always semantic
   tables but render as table-like grids; cover the common containers. */
.repo-file-list tr:nth-of-type(even),
.file-list tr:nth-of-type(even),
.commit-list tr:nth-of-type(even) {
  background-color: var(--mirus-table-zebra);
}

/* Forgejo's dashboard (activity feed, repo list, org list) and most
   listing pages use .flex-list > .flex-item, not <table>.  Stripe
   those too — they're the most-looked-at lists. */
.flex-list > .flex-item:nth-of-type(even) {
  background-color: var(--mirus-table-zebra);
}

.flex-list > .flex-item:hover {
  background-color: var(--color-hover) !important;
}

/* Dashboard right sidebar: Repositories / Organizations panels.
   These use Fomantic's <ul class="ui menu"> with <li>/<a> items
   rather than .flex-list, so they need their own selectors. */
.dashboard-repos .item:nth-of-type(even),
.dashboard-orgs .item:nth-of-type(even),
.dashboard-repos li:nth-of-type(even),
.dashboard-orgs li:nth-of-type(even) {
  background-color: var(--mirus-table-zebra);
}

.dashboard-repos .item:hover,
.dashboard-orgs .item:hover,
.dashboard-repos li:hover,
.dashboard-orgs li:hover {
  background-color: var(--color-hover) !important;
}

/* hover trumps zebra so rows still feel interactive */
table tr:hover > td,
table tbody tr:hover {
  background-color: var(--color-hover) !important;
}

/* ----------------------------------------------------------------------
   Activity heatmap: orange ramp, decoupled from the primary palette.
   Forgejo's heatmap component reads its 5-step range from the CSS
   variables --color-primary-{light-4,light-2,...,dark-2}.  Since
   primary is blue everywhere else in this theme, we scope an orange
   ramp on #user-heatmap only — the component's getComputedStyle()
   picks them up there, leaving the rest of the UI blue.

   Light mode ramp (low → high activity): orange-200 → orange-700.
   Dark mode ramp: same hues, lifted lightness so the squares glow
   against the dark steel background.
   ---------------------------------------------------------------------- */

#user-heatmap {
  --color-primary-light-4: #fed7aa;    /* level 1 — orange-200 */
  --color-primary-light-2: #fb923c;    /* level 2 — orange-400 */
  --color-primary:         #f97316;    /* level 3 — orange-500 */
  --color-primary-dark-2:  #c2410c;    /* level 4 — orange-700 */
}

@media (prefers-color-scheme: dark) {
  #user-heatmap {
    --color-primary-light-4: #7c2d12;  /* level 1 — orange-900 */
    --color-primary-light-2: #c2410c;  /* level 2 — orange-700 */
    --color-primary:         #ea580c;  /* level 3 — orange-600 */
    --color-primary-dark-2:  #fb923c;  /* level 4 — orange-400 */
  }
}

/* Belt-and-braces: also force the rects via CSS fill in case the
   component inlines fill attrs from a snapshot read at :root.
   nth-of-type can't tell levels apart, but [fill] attribute selectors
   match the exact computed values that would have been written for
   blue — we re-route those to the matching orange. */
#user-heatmap rect[fill="#bfdbfe"] { fill: #fed7aa !important; }
#user-heatmap rect[fill="#60a5fa"] { fill: #fb923c !important; }
#user-heatmap rect[fill="#2563eb"] { fill: #f97316 !important; }
#user-heatmap rect[fill="#1e40af"] { fill: #c2410c !important; }
#user-heatmap rect[fill="#93c5fd"] { fill: #7c2d12 !important; }
#user-heatmap rect[fill="#3b82f6"] { fill: #c2410c !important; }
#user-heatmap rect[fill="#1d4ed8"] { fill: #ea580c !important; }

/* ----------------------------------------------------------------------
   Polish: smoother primary-button hover, accented focus rings.
   ---------------------------------------------------------------------- */

.ui.primary.button,
.ui.primary.buttons .button {
  background-color: var(--color-primary);
  transition: background-color 0.15s ease;
}

.ui.primary.button:hover,
.ui.primary.buttons .button:hover {
  background-color: var(--color-primary-hover);
}

/* visible focus ring uses the orange accent */
:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

/* ----------------------------------------------------------------------
   Make orange actually visible: explicit accents on chrome surfaces
   that don't pick up var(--color-accent) by themselves.
   ---------------------------------------------------------------------- */

/* Top navbar: active link gets an orange underline */
.full.height nav.navbar .item.active,
.ui.secondary.menu .active.item {
  box-shadow: inset 0 -3px 0 0 var(--color-accent);
  border-radius: 0 !important;
}

/* Tabular menus (repo tabs, settings tabs): active tab orange underline */
.ui.tabular.menu .active.item {
  border-bottom-color: var(--color-accent) !important;
  border-bottom-width: 3px !important;
  color: var(--color-accent);
}

/* Pointing menus (issue/PR sub-tabs) */
.ui.pointing.menu .active.item,
.ui.pointing.menu .active.item:hover {
  border-color: var(--color-accent) !important;
  color: var(--color-accent);
}
.ui.pointing.menu .active.item::after,
.ui.pointing.secondary.menu .active.item::after {
  background: var(--color-accent) !important;
  border-color: var(--color-accent) !important;
}

/* Sidebar / vertical menus: orange left border on the active item */
.ui.vertical.menu .active.item {
  box-shadow: inset 3px 0 0 0 var(--color-accent);
}

/* Stars / watchers / labels — when an action is "on", paint orange */
.ui.button.active.basic,
.ui.basic.label.active {
  border-color: var(--color-accent) !important;
  color: var(--color-highlight-fg) !important;
}

/* The "current branch" / "your repo" badges feel more brand-y in orange */
.repository.file.list .repo-button-row .ui.basic.button.active,
.ui.label.basic.orange,
.ui.basic.orange.label {
  background-color: var(--color-highlight-bg) !important;
  color: var(--color-highlight-fg) !important;
  border-color: var(--color-accent) !important;
}

/* Code-line URL anchor (when you click a line number) — orange highlight */
.lines-num .active,
.lines-code .active,
tr.active > td,
.lines-num a:target,
.lines-code:target {
  background: var(--color-highlight-bg) !important;
  border-left: 3px solid var(--color-accent) !important;
}

/* Notification badge in the top bar */
.ui.label.notification_count,
.ui.red.label.notification_count {
  background-color: var(--color-accent) !important;
  color: #fff !important;
}

/* ----------------------------------------------------------------------
   Finance-themed page background.
   The SVG has its own opacity baked in so it reads on both light and
   dark page bodies.  background-attachment: fixed keeps it pinned as
   the page scrolls so it feels like a backdrop, not a banner.
   On the welcome page (.page-content.home) we overlay it more
   prominently for a snazzy hero feel.
   ---------------------------------------------------------------------- */

body {
  background-image: url("/assets/img/mirus-finance-bg.svg");
  background-repeat: no-repeat;
  background-position: center top;
  background-size: cover;
  background-attachment: fixed;
}

/* Dark mode: lift the SVG slightly so the strokes show against the
   dark steel body without redrawing the asset. */
@media (prefers-color-scheme: dark) {
  body {
    background-blend-mode: screen;
  }
}

/* Welcome / not-logged-in landing: bring the backdrop forward by adding
   a soft radial spotlight under the hero so the chart silhouette pops. */
.page-content.home {
  position: relative;
}
.page-content.home::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -1;
  background:
    radial-gradient(ellipse at top right,  #2563eb22 0%, transparent 55%),
    radial-gradient(ellipse at bottom left, #f9731622 0%, transparent 55%);
}

/* ----------------------------------------------------------------------
   Existing Mirus home page / footer customizations.
   ---------------------------------------------------------------------- */

.page-content.home {
    padding-top: 2rem;
}

.page-content.home .center {
    text-align: center;
}

.page-content.home img {
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.page-content.home .hero h2 {
    font-weight: 300;
    letter-spacing: 0.5px;
}

/* ----------------------------------------------------------------------
   HEADER · navbar treatment
   - Frosted-glass backdrop so the finance pattern subtly bleeds through
   - Soft gradient tint instead of a flat block colour
   - 2-px brand accent line at the bottom (orange → blue)
   - Slight elevation shadow so it sits above the page content
   ---------------------------------------------------------------------- */

#navbar {
  background:
    url("/assets/img/mirus-ribbon-bg.svg") center/cover no-repeat,
    linear-gradient(180deg, rgba(37, 99, 235, 0.06) 0%, rgba(37, 99, 235, 0.02) 100%),
    var(--color-nav-bg) !important;
  border-bottom: 1px solid color-mix(in srgb, var(--color-secondary) 85%, transparent) !important;
  box-shadow: 0 1px 0 rgba(249, 115, 22, 0.55),
              0 8px 24px -16px rgba(0, 0, 0, 0.20);
  position: relative;
  z-index: 5;
}

/* the orange accent rule above is laid as a 1px shadow line under the
   secondary border; on dark themes lift it slightly so it shows. */
@media (prefers-color-scheme: dark) {
  #navbar {
    box-shadow: 0 1px 0 rgba(251, 146, 60, 0.65),
                0 8px 24px -16px rgba(0, 0, 0, 0.6);
  }
}

#navbar-logo {
  filter: drop-shadow(0 0 6px rgba(37, 99, 235, 0.18));
  transition: filter 0.2s ease;
}
#navbar-logo:hover {
  filter: drop-shadow(0 0 10px rgba(249, 115, 22, 0.45));
}

/* nav items: hover gets a soft brand tint, active item gets the orange
   underline already configured earlier in this stylesheet */
#navbar a.item:hover,
#navbar details.dropdown[open] > summary,
#navbar button.item:hover {
  background: linear-gradient(180deg,
              color-mix(in srgb, var(--color-accent) 10%, transparent) 0%,
              transparent 100%) !important;
}

/* ----------------------------------------------------------------------
   FOOTER · branded ribbon
   - Top accent line: orange → blue gradient
   - Subtle frosted backdrop to mirror the header
   - Real typographic hierarchy for the brand line + a faint ticker tape
   ---------------------------------------------------------------------- */

footer.page-footer {
  position: relative;
  background:
    url("/assets/img/mirus-ribbon-bg.svg") center/cover no-repeat,
    linear-gradient(0deg, rgba(37, 99, 235, 0.06) 0%, rgba(37, 99, 235, 0.02) 100%),
    var(--color-footer) !important;
  border-top: 1px solid color-mix(in srgb, var(--color-secondary) 85%, transparent) !important;
  padding: 0 !important;
}

/* top brand accent: orange → blue gradient hairline above the footer */
footer.page-footer::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg,
              transparent 0%,
              rgba(249, 115, 22, 0.0) 5%,
              rgba(249, 115, 22, 0.85) 25%,
              rgba(37, 99, 235, 0.85) 75%,
              rgba(37, 99, 235, 0.0) 95%,
              transparent 100%);
  pointer-events: none;
}

/* Hide default Forgejo footer content */
footer.page-footer .left-links,
footer.page-footer .right-links {
  display: none !important;
}

/* Branded footer line — single line, no fake live data. */
footer.page-footer::after {
  content: "MIRUS TECHNOLOGIES   ·   Software Development for Financial Trading";
  display: block;
  text-align: center;
  padding: 0.55rem 0.5rem 0.5rem;
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 0.72em;
  letter-spacing: 0.18em;
  font-weight: 600;
  color: color-mix(in srgb, var(--color-text-light) 78%, var(--color-primary) 22%);
}