/* =========================================================
   MONTREK THEME FOR FORGEJO
   Port of montrek/baseclasses/templates/partials/gold_theme.html
   (+ partials/color_scheme.html) onto Forgejo's CSS variables.

   Built and verified against Forgejo 15.0.5~gitea-1.22.0.

   The built-in light theme is imported first so that everything
   this file does not touch (chroma syntax highlighting, ANSI
   console colors, diff colors, the steel/*-badge ramps, ...)
   keeps working. Everything below is an override layer.
   ========================================================== */

@import url("theme-forgejo-light.css");

:root {
  color-scheme: light;

  /* -------------------------------------------------------
     MONTREK DESIGN TOKENS
     Mirrors the :root block of gold_theme.html one-to-one.
     Change --mt-accent / --mt-secondary to re-brand; every
     Forgejo variable below is derived from these.
     ------------------------------------------------------- */
  --mt-accent: #004767;                 /* settings.PRIMARY_COLOR   (ReportingColors.BLUE) */
  --mt-secondary: #be0d3e;              /* settings.SECONDARY_COLOR (ReportingColors.RED)  */
  --mt-accent-tint: color-mix(in srgb, var(--mt-accent) 6%, transparent);
  --mt-accent-ring: color-mix(in srgb, var(--mt-accent) 25%, transparent);
  --mt-secondary-tint: color-mix(in srgb, var(--mt-secondary) 8%, transparent);

  --mt-bg: #f6f7f9;
  --mt-surface: #ffffff;
  --mt-surface-muted: #f1f3f5;
  --mt-border: #e5e8ec;
  --mt-border-strong: #d2d7dd;

  --mt-text: #1d2430;
  --mt-text-muted: #5b6573;
  --mt-text-faint: #8a93a1;

  --mt-success: #388e3c;
  --mt-warning: #b54708;
  --mt-danger: #be0d3e;

  --mt-radius: 10px;
  --mt-radius-sm: 6px;
  --mt-shadow-sm: 0 1px 2px rgba(16, 24, 40, 0.05);
  --mt-shadow: 0 1px 3px rgba(16, 24, 40, 0.07), 0 1px 2px rgba(16, 24, 40, 0.04);

  /* -------------------------------------------------------
     NEUTRAL RAMP
     Forgejo derives borders, boxes, menus, buttons and text
     from --zinc-*. Remapping the ramp to montrek's cool greys
     themes the whole surface layer in one place.
     ------------------------------------------------------- */
  --zinc-50:  #fbfcfd;
  --zinc-100: #f6f7f9;   /* --mt-bg */
  --zinc-150: #f1f3f5;   /* --mt-surface-muted */
  --zinc-200: #e5e8ec;   /* --mt-border */
  --zinc-250: #dde1e6;
  --zinc-300: #d2d7dd;   /* --mt-border-strong */
  --zinc-350: #bcc3cc;
  --zinc-400: #a6aeba;
  --zinc-450: #949dab;
  --zinc-500: #8a93a1;   /* --mt-text-faint */
  --zinc-550: #78828f;
  --zinc-600: #6a7482;
  --zinc-650: #5b6573;   /* --mt-text-muted */
  --zinc-700: #4d5766;
  --zinc-750: #3d4653;
  --zinc-800: #303845;
  --zinc-850: #262e3a;
  --zinc-900: #1d2430;   /* --mt-text */

  /* -------------------------------------------------------
     PRIMARY RAMP — montrek blue
     Light steps 4-7 are the real palette entries from
     reporting/core/reporting_colors.py (SOFT_SKY, LIGHT_SKY,
     LIGHT_BLUE) so charts and UI stay in the same family.
     ------------------------------------------------------- */
  --color-primary: #004767;
  --color-primary-contrast: #ffffff;
  --color-primary-dark-1: #003d59;
  --color-primary-dark-2: #00344c;
  --color-primary-dark-3: #002d41;
  --color-primary-dark-4: #002536;
  --color-primary-dark-5: #001f2d;
  --color-primary-dark-6: #001923;
  --color-primary-dark-7: #00131b;
  --color-primary-light-1: #005d84;
  --color-primary-light-2: #00719f;
  --color-primary-light-3: #3f8bab;
  --color-primary-light-4: #6b93b0;   /* SOFT_SKY */
  --color-primary-light-5: #b1cfe2;   /* LIGHT_SKY */
  --color-primary-light-6: #d8e9f3;
  --color-primary-light-7: #e6f2f8;   /* LIGHT_BLUE */
  --color-primary-alpha-10: #00476719;
  --color-primary-alpha-20: #00476733;
  --color-primary-alpha-30: #0047674b;
  --color-primary-alpha-40: #00476766;
  --color-primary-alpha-50: #00476780;
  --color-primary-alpha-60: #00476799;
  --color-primary-alpha-70: #004767b3;
  --color-primary-alpha-80: #004767cc;
  --color-primary-alpha-90: #004767e1;

  --color-accent: var(--color-primary-light-1);
  --color-small-accent: var(--color-primary-light-7);

  /* -------------------------------------------------------
     STATUS COLORS — montrek's success / warning / danger
     ------------------------------------------------------- */
  --color-red: #be0d3e;                /* --mt-danger / SECONDARY_COLOR */
  --color-red-light: #d32f2f;          /* BRIGHTER_RED */
  --color-red-dark-1: #a70b36;
  --color-red-dark-2: #821621;         /* DARKER_RED */
  --color-red-badge: #be0d3e;
  --color-red-badge-bg: #be0d3e22;
  --color-red-badge-hover-bg: #be0d3e44;

  --color-green: #388e3c;              /* --mt-success / BRIGHTER_GREEN */
  --color-green-light: #43a047;
  --color-green-dark-1: #2e7d32;
  --color-green-dark-2: #1b5e20;       /* DARK_GREEN */
  --color-green-badge: #388e3c;
  --color-green-badge-bg: #388e3c22;
  --color-green-badge-hover-bg: #388e3c44;

  --color-orange: #b54708;             /* --mt-warning */
  --color-orange-light: #d9631a;
  --color-orange-dark-1: #9c3d07;
  --color-orange-dark-2: #833306;
  --color-orange-badge: #b54708;
  --color-orange-badge-bg: #b5470822;
  --color-orange-badge-hover-bg: #b5470844;

  --color-blue: var(--color-primary-light-2);
  --color-blue-light: var(--color-primary-light-3);
  --color-blue-dark-1: var(--color-primary);
  --color-blue-dark-2: var(--color-primary-dark-1);

  /* Message / callout blocks */
  --color-success-bg: #e8f5e9;
  --color-success-border: #c8e6c9;
  --color-success-text: #1b5e20;
  --color-info-bg: #e6f2f8;
  --color-info-border: #b1cfe2;
  --color-info-text: #004767;
  --color-warning-bg: #fdf1e3;
  --color-warning-border: #f3d3ab;
  --color-warning-text: #7a3d0a;
  --color-error-bg: #fdeaef;
  --color-error-bg-hover: #fbdde6;
  --color-error-bg-active: #f3b6c6;
  --color-error-border: #f6c7d3;
  --color-error-text: #821621;

  /* -------------------------------------------------------
     SURFACES
     montrek layers white cards on a light grey page, so the
     page body is --mt-bg and boxes are --mt-surface.
     ------------------------------------------------------- */
  --color-body: #f6f7f9;
  --color-box-body: #ffffff;
  --color-box-body-highlight: #f6f7f9;
  --color-box-header: #f1f3f5;
  --color-card: #ffffff;
  --color-menu: #ffffff;
  --color-secondary-nav-bg: #ffffff;
  --color-header-wrapper: #ffffff;
  --color-footer: #ffffff;
  --color-code-bg: #ffffff;
  --color-input-background: #ffffff;
  --color-input-toggle-background: #ffffff;
  --color-input-border: var(--mt-border-strong);
  --color-input-border-hover: var(--mt-text-faint);

  --color-hover: color-mix(in srgb, var(--mt-accent) 5%, transparent);
  --color-active: color-mix(in srgb, var(--mt-accent) 9%, transparent);
  --color-light-border: #0000001a;
  --color-shadow: rgba(16, 24, 40, 0.16);

  /* The navbar is a solid primary bar (montrek .navbar-custom). */
  --color-nav-bg: var(--mt-accent);
  --color-nav-hover-bg: rgba(255, 255, 255, 0.14);

  --color-tooltip-bg: #1d2430;
  --color-tooltip-text: #ffffff;

  /* -------------------------------------------------------
     TYPOGRAPHY & GEOMETRY
     ------------------------------------------------------- */
  --fonts-proportional: "Inter Variable", "Inter", system-ui, -apple-system,
    "Segoe UI", "Noto Sans", Roboto, "Helvetica Neue", Arial;
  --border-radius: var(--mt-radius-sm);
  --border-radius-medium: var(--mt-radius);
}

body {
  -webkit-font-smoothing: antialiased;
}

:focus-visible {
  outline: 2px solid var(--mt-accent-ring);
  outline-offset: 2px;
}

/* =========================================================
   NAVBAR — solid primary bar, white-tinted link states
   (gold_theme .navbar-custom)
   ========================================================== */

#navbar {
  border-bottom: none;
  box-shadow: var(--mt-shadow);
}

#navbar > .ui.secondary.menu > .item,
#navbar > .ui.secondary.menu > details.dropdown > summary,
#navbar > .ui.secondary.menu > .item .svg,
#navbar .navbar-mobile-right .item,
#navbar-expand-toggle {
  color: rgba(255, 255, 255, 0.85) !important;
  font-weight: 500;
  border-radius: var(--mt-radius-sm);
}

#navbar > .ui.secondary.menu > .item:hover,
#navbar > .ui.secondary.menu > .item:focus,
#navbar > .ui.secondary.menu > .item.active,
#navbar > .ui.secondary.menu > details.dropdown[open] > summary,
#navbar > .ui.secondary.menu > details.dropdown > summary:hover {
  color: #ffffff !important;
  background-color: rgba(255, 255, 255, 0.14) !important;
}

/* Dropdown panels hang below the bar and are ordinary white cards.
   Scoped to the dropdown itself: `.navbar-left` / `.navbar-right` are
   themselves `.ui.secondary.menu`, so a bare `#navbar .menu` would draw
   a border box around the whole item group. */
#navbar .ui.dropdown > .menu,
#navbar details.dropdown > .menu {
  border: 1px solid var(--mt-border);
  border-radius: var(--mt-radius-sm);
  box-shadow: var(--mt-shadow);
}

#navbar .ui.dropdown > .menu .item,
#navbar .ui.dropdown > .menu .item .svg,
#navbar .ui.dropdown > .menu .item *,
#navbar details.dropdown > .menu .item,
#navbar details.dropdown > .menu .item .svg,
#navbar details.dropdown > .menu .item * {
  color: var(--mt-text) !important;
}

#navbar .ui.dropdown > .menu .item:hover,
#navbar details.dropdown > .menu .item:hover {
  background-color: var(--mt-accent-tint) !important;
}

/* The notification badge would otherwise be primary-on-primary. */
#navbar a.item .notification_count,
#navbar a.item .header-stopwatch-dot {
  background: var(--mt-secondary) !important;
  color: #ffffff !important;
  border-color: var(--mt-accent) !important;
}

/* logo.svg is a square monogram tile, so render it square. */
#navbar-logo img {
  width: 28px;
  height: 28px;
}

/* =========================================================
   TABS — underline style, no boxes (gold_theme .nav-tabs)
   ========================================================== */

.ui.tabular.menu,
.ui.secondary.pointing.menu {
  border-bottom: 1px solid var(--mt-border);
  gap: 0.25rem;
}

.ui.tabular.menu .item,
.ui.secondary.pointing.menu .item {
  color: var(--mt-text-muted) !important;
  background: transparent !important;
  border: none !important;
  border-bottom: 2px solid transparent !important;
  border-radius: 0 !important;
  margin-bottom: -1px;
  font-weight: 500;
  transition: color 0.15s ease, border-color 0.15s ease, background-color 0.15s ease;
}

.ui.tabular.menu .item:hover,
.ui.secondary.pointing.menu .item:hover {
  color: var(--mt-text) !important;
  background-color: var(--mt-accent-tint) !important;
  border-bottom-color: var(--mt-border-strong) !important;
}

.ui.tabular.menu .item.active,
.ui.secondary.pointing.menu .item.active {
  color: var(--mt-accent) !important;
  background-color: var(--mt-accent-tint) !important;
  border-bottom: 2px solid var(--mt-accent) !important;
  font-weight: 600;
}

/* =========================================================
   TABLES — muted header, accent underline, tabular figures
   (gold_theme .table-custom-striped)
   ========================================================== */

.ui.table > thead > tr > th,
.repository .data-table th {
  color: var(--mt-text-muted) !important;
  font-size: 0.9em;
  font-weight: 600;
  border-bottom: 2px solid var(--mt-accent) !important;
}

.ui.table > tbody > tr > td {
  border-bottom: 1px solid var(--mt-border);
  font-variant-numeric: tabular-nums;
}

/* =========================================================
   FORMS — accent focus ring (gold_theme input:focus)
   ========================================================== */

input:focus,
select:focus,
textarea:focus,
.ui.input > input:focus,
.ui.form input:focus,
.ui.form textarea:focus,
.ui.selection.dropdown:focus {
  outline: none;
  border-color: var(--mt-accent) !important;
  box-shadow: 0 0 0 3px var(--mt-accent-ring) !important;
}

/* =========================================================
   SURFACES — card radius + hairline shadow (gold_theme .tile)
   ========================================================== */

.ui.card,
.ui.cards > .card,
.ui.dropdown .menu,
.tippy-box {
  border-radius: var(--mt-radius);
  box-shadow: var(--mt-shadow-sm);
}

.ui.segment {
  box-shadow: none;
}

/* =========================================================
   FOOTER (gold_theme .footer)
   ========================================================== */

.page-footer {
  border-top: 1px solid var(--mt-border);
  color: var(--mt-text-faint);
  font-size: 0.85em;
}

.mt-forgejo-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.5rem;
  padding: 0.6rem 1rem;
  background-color: var(--mt-surface);
  border-top: 1px solid var(--mt-border);
  color: var(--mt-text-faint);
  font-size: 0.8rem;
}

.mt-forgejo-footer img {
  height: 18px;
  width: auto;
}