/* ==========================================================
   STRAI theme — selectable alongside Gitea's built-in themes.
   Place at: $GITEA_CUSTOM/public/assets/css/theme-strai.css

   Register in app.ini under [ui]:
     THEMES = gitea-auto,gitea-light,gitea-dark,strai
     DEFAULT_THEME = strai

   Users can still switch back to gitea-light/gitea-dark/auto
   from Settings > Appearance at any time.
   ========================================================== */

@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@500;700;800&family=Inter:wght@400;500;600&display=swap');

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

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

  /* Brand accent (pink) as the primary color everywhere:
     buttons, links, focus rings, active tabs, badges, etc. */
  --color-primary: #ec1a78;
  --color-primary-text: #ffffff;
  --color-primary-dark-1: #c91564;
  --color-primary-dark-2: #a01050;
  --color-primary-light-1: #f13d8f;
  --color-primary-light-2: #f66aa8;
  --link-color: #ec1a78;

  /* Page & panel backgrounds */
  --color-body: #05060a;
  --color-box-body: #101216;
  --color-box-header: #16171b;
  --color-nav-bg: #16171b;
  --color-header: #16171b;
  --color-menu: #16171b;
  --color-footer: #0d1016;
  --color-secondary-bg: #16171b;

  /* Text */
  --color-text: #e9ebf1;
  --color-text-dark: #f2f3f6;
  --color-text-light-1: #c7cbd4;
  --color-text-light-2: #8b909c;
  --color-text-light-3: #5f636c;

  /* Form inputs, to match the underline style used on the login page */
  --color-input-text: #e9ebf1;
  --color-input-background: transparent;
  --color-input-border: rgba(255,255,255,0.3);
  --color-input-border-hover: #ec1a78;
  --color-placeholder-text: #5f636c;

  /* Body font sitewide; headings get Orbitron below.
     Code/monospace intentionally left as Gitea's default —
     changing that would hurt code readability, not brand fit. */
  --fonts-proportional: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

/* Sitewide background — same radial gradient used on the login page,
   instead of a flat color. Panels/cards sit on top with their own
   solid --color-box-* background, same as the login form panel does. */
body {
  background: radial-gradient(circle at 50% 20%, #0d1016 0%, #05060a 70%) !important;
}

/* Major headings pick up the brand's display font, used sparingly
   so body text and code stay easy to read. Same glow used on the
   login page's "STRAI" wordmark, now scoped to h1 only. */
h1, h2 {
  font-family: 'Orbitron', sans-serif;
  letter-spacing: 0.5px;
}
h1 {
  text-shadow: 0 0 18px rgba(255,255,255,0.25);
}

/* Dropdown / popover menus (avatar menu, notifications, "+ create",
   language picker, etc.) — Fomantic-UI's dropdown component doesn't
   fully inherit the --color-box-* variables above, so it needs
   explicit overrides here. !important guards against Gitea's own
   compiled CSS loading with equal/higher specificity. */
.ui.dropdown .menu,
.ui.dropdown .menu .item {
  background: #16171b !important;
  color: #e9ebf1 !important;
  border-color: rgba(255,255,255,0.12) !important;
  font-family: 'Orbitron', sans-serif !important;
}

.ui.dropdown .menu .item:hover {
  background: rgba(236,26,120,0.14) !important;
  color: #f2f3f6 !important;
}

.ui.dropdown .menu .header {
  color: #8b909c !important;
}

.ui.dropdown .menu .divider {
  border-top-color: rgba(255,255,255,0.12) !important;
}

/* Ensure borders render fully on all sides — without border-box,
   a border can extend past the parent's clipped width and get
   visually cut off on the right edge. */
input, textarea, select {
  box-sizing: border-box !important;
}

/* Fomantic's "action input" combo (input + attached button, e.g.
   the issue due-date field) — the button was still default light
   Fomantic styling, making the border look like it stopped short
   at the input's right edge. Styling both pieces to match makes
   the whole group read as one seamless dark element. */
.ui.action.input > input {
  border: 1px solid rgba(255,255,255,0.3) !important;
  border-right: none !important;
  background: transparent !important;
  color: #e9ebf1 !important;
  font-size: 15px !important;
}
.ui.action.input > .button,
.ui.action.input > .buttons > .button {
  border: 1px solid rgba(255,255,255,0.3) !important;
  border-left: none !important;
  background: #16171b !important;
  color: #e9ebf1 !important;
  box-shadow: none !important;
}
.ui.action.input > .button:hover,
.ui.action.input > .buttons > .button:hover {
  background: rgba(236,26,120,0.16) !important;
}

/* Date picker popup (due dates, milestones) — appears to be
   flatpickr based on its visual structure. If these don't take
   effect, inspect the popup to confirm the actual class names. */
.flatpickr-calendar {
  background: #16171b !important;
  border: 1px solid rgba(255,255,255,0.12) !important;
  box-shadow: none !important;
}
.flatpickr-months,
.flatpickr-weekdays,
.flatpickr-innerContainer,
.flatpickr-rContainer {
  background: #16171b !important;
}
.flatpickr-month,
.flatpickr-current-month,
.flatpickr-current-month input.cur-year,
.flatpickr-current-month .flatpickr-monthDropdown-months {
  color: #e9ebf1 !important;
  fill: #e9ebf1 !important;
  background: transparent !important;
}
.flatpickr-weekday {
  background: #16171b !important;
  color: #8b909c !important;
}
.flatpickr-day {
  color: #e9ebf1 !important;
}
.flatpickr-day.flatpickr-disabled,
.flatpickr-day.prevMonthDay,
.flatpickr-day.nextMonthDay {
  color: #5f636c !important;
}
.flatpickr-day:hover {
  background: rgba(236,26,120,0.16) !important;
  border-color: transparent !important;
}
.flatpickr-day.selected,
.flatpickr-day.today {
  background: #ec1a78 !important;
  border-color: #ec1a78 !important;
  color: #ffffff !important;
}
.flatpickr-prev-month svg,
.flatpickr-next-month svg {
  fill: #e9ebf1 !important;
}
.flatpickr-calendar.arrowTop:before,
.flatpickr-calendar.arrowTop:after {
  border-bottom-color: #16171b !important;
}