/* ============================================================
   PLCcode.ai Gitea Theme
   Registered theme file: theme-plccode.css
   Spec: docs/superpowers/specs/2026-03-25-gitea-branding-design.md
   ============================================================ */

/* --- Theme metadata --- */
gitea-theme-meta-info {
  --theme-display-name: "PLCCode Dark";
}

/* --- Dark mode flag (required for Monaco editor) --- */
:root {
  --is-dark-theme: true;
  color-scheme: dark;
}

/* --- Font faces --- */
@font-face {
  font-family: 'Inter';
  src: url('/assets/fonts/InterVariable.woff2') format('woff2');
  font-weight: 100 900;
  font-display: swap;
}

@font-face {
  font-family: 'JetBrains Mono';
  src: url('/assets/fonts/JetBrainsMonoVariable.woff2') format('woff2');
  font-weight: 100 800;
  font-display: swap;
}

/* --- Color variables --- */
/* Hand-maintained hex MIRROR of packages/design-tokens/tokens.css (amber on
   charcoal). Keep in sync when the web tokens change (see STYLEGUIDE.md §8).
   Surfaces map to: background #0a0a09, card #141413, popover #181816,
   secondary/muted #1c1b19, raised #232220. */
:root {
  /* Backgrounds */
  --color-body: #0a0a09;
  --color-box-body: #141413;
  --color-box-header: #181816;
  --color-box-body-highlight: #232220;
  --color-nav-bg: #141413;
  --color-secondary-nav-bg: #141413;
  --color-footer: #141413;
  --color-menu: #181816;
  --color-card: #141413;
  --color-code-bg: #141413;
  --color-input-background: #232220;
  --color-secondary-bg: #181816;
  --color-button: #232220;

  /* Primary / Accent — brand amber, same as the web app. (The old blue accent
     was a workaround for the monochrome palette having no brand color; with
     amber as the brand, links/buttons/active tabs use it everywhere.) */
  --color-primary: #ffb22e;
  --color-primary-contrast: #0a0a09;

  /* Text */
  --color-text-dark: #f4f1ea;
  --color-text: #ddd9d0;
  --color-text-light: #c4bfb4;
  --color-text-light-1: #b1ab9f;
  --color-text-light-2: #a8a298;
  --color-text-light-3: #968f82;

  /* Borders (secondary color system) */
  --color-secondary: rgba(244, 241, 234, 0.10);
  --color-input-border: rgba(244, 241, 234, 0.16);
  --color-input-border-hover: rgba(244, 241, 234, 0.25);

  /* Interactive states */
  --color-hover: rgba(244, 241, 234, 0.10);
  --color-active: rgba(244, 241, 234, 0.15);
  --color-light: rgba(244, 241, 234, 0.06);
  --color-shadow: rgba(0, 0, 0, 0.3);

  /* Semantic / Status — equal to the web success/warning/danger/info hues. */
  --color-red: #ef5b53; /* danger */
  --color-green: #57c97a; /* success */
  --color-yellow: #ff7d3b; /* warning */
  --color-blue: #8aa0b0; /* info (slate — blue is retired) */
  --color-info: #8aa0b0;
  --color-purple: #8aa0b0; /* purple is retired; map to info */

  /* Contribution / activity graph — without these the inactive squares default to black */
  --color-calendar-graph-day-bg:    rgba(244, 241, 234, 0.06);
  --color-calendar-graph-day-L1-bg: rgba(87, 201, 122, 0.20);
  --color-calendar-graph-day-L2-bg: rgba(87, 201, 122, 0.40);
  --color-calendar-graph-day-L3-bg: rgba(87, 201, 122, 0.65);
  --color-calendar-graph-day-L4-bg: rgba(87, 201, 122, 0.90);

  /* Diff — data-viz, exempt from rebranding (STYLEGUIDE §10): the added/removed
     red/green must stay stable and recognizable. */
  --color-diff-added-row-bg: rgba(16, 185, 129, 0.10);
  --color-diff-added-word-bg: rgba(16, 185, 129, 0.25);
  --color-diff-removed-row-bg: rgba(239, 68, 68, 0.10);
  --color-diff-removed-word-bg: rgba(239, 68, 68, 0.25);

  /* Console */
  --color-console-bg: #0f0f0e;
  --color-console-fg: #f4f1ea;
  --color-console-border: rgba(244, 241, 234, 0.10);

  /* Tooltip */
  --color-tooltip-bg: #232220;
  --color-tooltip-text: #f4f1ea;

  /* Fonts */
  --fonts-proportional: "Inter", system-ui, -apple-system, sans-serif;
  --fonts-monospace: "JetBrains Mono", ui-monospace, SFMono-Regular, "SF Mono", Menlo, Monaco, Consolas, monospace;
}

/* --- Border radius overrides --- */

/* Badges, tags, labels */
.ui.label,
.ui.labels .label,
.tag {
  border-radius: 6px !important;
}

/* Buttons */
.ui.button,
.ui.buttons .button {
  border-radius: 8px !important;
}

/* --- OAuth / SSO sign-in button (login page) ---
   Gitea renders one `<a class="ui button oauth-login-link">` per configured OAuth2 source.
   Nothing in this theme gave it a surface, so it inherited transparent-on-charcoal and read
   as an empty bar — the "Sign in with keycloak" label and its icon were both present in the
   DOM, just invisible. Not cosmetic: this instance runs with
   `ALLOW_ONLY_EXTERNAL_REGISTRATION=true`, so SSO is the only way in for a new user and an
   invisible button is a dead end. Styled as a secondary button (STYLEGUIDE §3) so it reads
   clearly beside the amber primary "Sign In" instead of competing with it. */
.oauth-login-link {
  background: var(--color-button) !important;
  border: 1px solid var(--color-input-border) !important;
  color: var(--color-text) !important;
}
.oauth-login-link:hover {
  background: var(--color-box-body-highlight) !important;
  border-color: var(--color-input-border-hover) !important;
  color: var(--color-text-dark) !important;
}

/* Inputs, dropdowns */
.ui.input input,
.ui.input textarea,
.ui.dropdown,
.ui.selection.dropdown {
  border-radius: 8px !important;
}

/* Cards, segments, panels */
.ui.segment,
.ui.card,
.ui.cards > .card,
.ui.attached.segment {
  border-radius: 10px !important;
}

/* Modals */
.ui.modal {
  border-radius: 10px !important;
}

/* --- Joined search bar (input + button) → one rounded control with a divider --- */
/* Gitea's search bars (issues, pulls, repo file search, the dashboard repo list)
   butt an <input> straight against a trailing button. The broad
   `.ui.input input { border-radius: 8px }` rule above was rounding the input on every
   corner, so its right edge curved into the square button beside it, leaving an awkward
   seam. Square the touching edges, round only the two outer ends to the standard input
   radius (8px = rounded-md, STYLEGUIDE §3), and split the button off with one hairline
   so the pair reads as a single control. */
.ui.action.input > input,
.ui.action.input > .ui.dropdown,
.ui.action.input > .button {
  border-radius: 0 !important;
}
.ui.action.input > input {
  border-right: none !important;
}
.ui.action.input > *:first-child {
  border-top-left-radius: 8px !important;
  border-bottom-left-radius: 8px !important;
}
.ui.action.input > *:last-child {
  border-top-right-radius: 8px !important;
  border-bottom-right-radius: 8px !important;
}
/* Hairline divider before the button (and any sort/filter dropdown in between) */
.ui.action.input > * + * {
  border-left: 1px solid var(--color-input-border) !important;
}

/* --- Interactive state overrides --- */

/* Smooth transitions */
.ui.button,
.ui.input input,
.ui.dropdown,
.ui.item,
a {
  transition: all 0.15s ease !important;
}

/* Focus rings — brand amber, matching the web --ring token */
.ui.input input:focus,
.ui.dropdown:focus,
.ui.button:focus-visible {
  outline: 2px solid rgba(255, 178, 46, 0.6);
  outline-offset: 1px;
}

/* Selected / active items → neutral accent fill (sleek selection, STYLEGUIDE §6).
   Amber stays for nav underlines, links, and primary buttons; selection itself is
   neutral so list rows / menu items don't read as a tinted wash. */
.ui.item.active,
.ui.item.selected,
.ui.dropdown .menu .item.active,
.ui.dropdown .menu .item.selected,
tr.active {
  background: rgba(244, 241, 234, 0.08) !important;
}

/* --- Scrollbar styling --- */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-thumb {
  background: rgba(244, 241, 234, 0.1);
  border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
  background: rgba(244, 241, 234, 0.2);
}

::-webkit-scrollbar-track {
  background: transparent;
}

/* Firefox scrollbar */
* {
  scrollbar-width: thin;
  scrollbar-color: rgba(244, 241, 234, 0.1) transparent;
}

/* --- Iframe-specific overrides --- */

/* Remove top padding left by missing navbar */
body {
  padding-top: 0 !important;
  margin-top: 0 !important;
}

/* Ensure content fills full iframe height */
.full.height {
  min-height: 100vh;
}

/* Hide sign-in / registration prompts (SSO handles auth) */
.ui.positive.message a[href*="sign-in"],
.signin-message,
.signup-message {
  display: none !important;
}

/* Hide theme selector in user settings (only one theme) */
#user-settings select[name="theme"],
.field:has(select[name="theme"]) {
  display: none !important;
}

/* --- PLCcode.ai: Hide clone URL bar (HTTP/SSH toggle + URL input) --- */
.clone-panel {
  display: none !important;
}

/* --- PLCcode.ai: Hide "More Operations" dropdown button --- */
#more-btn {
  display: none !important;
}

/* --- PLCcode.ai: Hide copy button next to clone URL --- */
button[data-clipboard-target="#repo-clone-url"] {
  display: none !important;
}

/* --- PLCcode.ai: Hide settings sidebar items — Tags, Webhooks, Deploy Keys --- */
a[href$="/settings/tags"] {
  display: none !important;
}
a[href$="/settings/hooks"] {
  display: none !important;
}
a[href$="/settings/keys"] {
  display: none !important;
}

/* --- PLCcode.ai: Lock down user settings — show Profile only --- */
.user.settings .menu a.item[href="/user/settings/account"],
.user.settings .menu a.item[href="/user/settings/appearance"],
.user.settings .menu a.item[href="/user/settings/security"],
.user.settings .menu a.item[href="/user/settings/applications"],
.user.settings .menu a.item[href="/user/settings/keys"],
.user.settings .menu a.item[href="/user/settings/organization"],
.user.settings .menu a.item[href="/user/settings/repos"],
.user.settings .menu a.item[href="/user/settings/blocked_users"] {
  display: none !important;
}

/* Hide the avatar upload section on the profile settings page */
form[action^="/user/settings/avatar"] {
  display: none !important;
}

/* --- PLCcode.ai: Hide Tags count in repo stats bar --- */
a[href$="/tags"] {
  display: none !important;
}

/* --- PLCcode.ai: Placeholder tab styling --- */

/* --- PLCcode.ai: Explore page --- */

/* Hide Users and Organizations tabs — keep only Repositories */
.explore .ui.secondary.pointing.menu a[href*="/explore/users"],
.explore .ui.secondary.pointing.menu a[href*="/explore/organizations"] {
  display: none !important;
}

/* Page background */
.explore.repository {
  background: #0a0a09 !important;
}

/* ── Search / filter bar ── */
.explore .ui.fluid.action.input input,
.explore input[name="q"] {
  background: #1c1b19 !important;
  border: 1px solid rgba(244, 241, 234, 0.12) !important;
  border-radius: 8px 0 0 8px !important;
  padding: 9px 14px !important;
  color: #ddd9d0 !important;
  font-size: 13px !important;
}

.explore .ui.fluid.action.input input:focus,
.explore input[name="q"]:focus {
  border-color: rgba(255, 178, 46, 0.5) !important;
  outline: none !important;
}

/* Sort/filter dropdowns in the action bar */
.explore .ui.fluid.action.input .ui.dropdown,
.explore .ui.form .ui.dropdown {
  background: #1c1b19 !important;
  border: 1px solid rgba(244, 241, 234, 0.12) !important;
  border-left: none !important;
  color: rgba(244, 241, 234, 0.7) !important;
  min-width: 130px !important;
}

.explore .ui.fluid.action.input .ui.dropdown .menu,
.explore .ui.form .ui.dropdown .menu {
  background: #1c1b19 !important;
  border: 1px solid rgba(244, 241, 234, 0.12) !important;
}

.explore .ui.fluid.action.input .ui.dropdown .menu .item,
.explore .ui.form .ui.dropdown .menu .item {
  color: rgba(244, 241, 234, 0.7) !important;
  border-top: 1px solid rgba(244, 241, 234, 0.04) !important;
}

.explore .ui.fluid.action.input .ui.dropdown .menu .item:hover {
  background: rgba(244, 241, 234, 0.06) !important;
  color: #f4f1ea !important;
}

/* Search submit button */
.explore .ui.fluid.action.input .ui.button,
.explore .ui.form .ui.button[type="submit"] {
  background: rgba(255, 178, 46, 0.9) !important;
  color: #0a0a09 !important;
  border-radius: 0 8px 8px 0 !important;
  border: 1px solid rgba(255, 178, 46, 0.6) !important;
  border-left: none !important;
  font-size: 13px !important;
}

.explore .ui.fluid.action.input .ui.button:hover {
  background: rgba(255, 178, 46, 1) !important;
}

/* ── Repo list container ── */
.explore .ui.relaxed.divided.list,
.explore .list.repos {
  background: #0f0f0e !important;
  border: 1px solid rgba(244, 241, 234, 0.08) !important;
  border-radius: 10px !important;
  overflow: hidden !important;
  margin-top: 16px !important;
}

/* ── Repo list items ── */
.explore .flex-item {
  padding: 16px 20px !important;
  border-bottom: 1px solid rgba(244, 241, 234, 0.06) !important;
  background: transparent !important;
  transition: background 0.12s ease !important;
}

.explore .flex-item:last-child {
  border-bottom: none !important;
}

.explore .flex-item:hover {
  background: rgba(244, 241, 234, 0.03) !important;
}

/* Repo name link */
.explore .flex-item .flex-item-main a.name,
.explore .flex-item h4.name a,
.explore .flex-item .item-name {
  font-size: 15px !important;
  font-weight: 600 !important;
  color: var(--color-primary) !important;
}

.explore .flex-item .flex-item-main a.name:hover,
.explore .flex-item h4.name a:hover {
  color: #ffc55e !important;
  text-decoration: underline !important;
}

/* Private badge */
.explore .flex-item .ui.basic.label {
  background: rgba(244, 241, 234, 0.05) !important;
  border: 1px solid rgba(244, 241, 234, 0.12) !important;
  color: rgba(244, 241, 234, 0.45) !important;
  font-size: 10px !important;
  padding: 2px 7px !important;
  border-radius: 6px !important;
}

/* Description */
.explore .flex-item p.description {
  color: rgba(244, 241, 234, 0.5) !important;
  font-size: 13px !important;
  margin: 4px 0 8px !important;
  line-height: 1.5 !important;
}

/* Topic/language tags */
.explore .flex-item .label.topic,
.explore .flex-item a.ui.label,
.explore .flex-item .topic-tag {
  background: rgba(255, 178, 46, 0.10) !important;
  color: #ffc55e !important;
  border: 1px solid rgba(255, 178, 46, 0.25) !important;
  border-radius: 12px !important;
  padding: 2px 9px !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  transition: background 0.12s ease, border-color 0.12s ease !important;
}

.explore .flex-item a.ui.label:hover,
.explore .flex-item .topic-tag:hover {
  background: rgba(255, 178, 46, 0.2) !important;
  border-color: rgba(255, 178, 46, 0.45) !important;
}

/* Star / fork / updated metadata row */
.explore .flex-item .flex-item-trailing {
  display: flex !important;
  align-items: center !important;
  gap: 16px !important;
  margin-top: 8px !important;
  flex-wrap: wrap !important;
}

.explore .flex-item .flex-item-trailing .text,
.explore .flex-item .flex-item-trailing a,
.explore .flex-item .flex-item-trailing span {
  color: rgba(244, 241, 234, 0.4) !important;
  font-size: 12px !important;
}

.explore .flex-item .flex-item-trailing a:hover {
  color: rgba(244, 241, 234, 0.7) !important;
}

/* Language dot */
.explore .flex-item .flex-item-trailing .color.circle {
  border-radius: 50% !important;
  width: 10px !important;
  height: 10px !important;
  display: inline-block !important;
  margin-right: 4px !important;
}

/* ── Secondary nav (Repositories / Users / Orgs) ── */
.explore .ui.secondary.pointing.menu {
  border-bottom: 1px solid rgba(244, 241, 234, 0.08) !important;
  margin-top: 20px !important;
  margin-bottom: 20px !important;
  padding-bottom: 0 !important;
}

.explore .ui.secondary.pointing.menu .item {
  color: rgba(244, 241, 234, 0.5) !important;
  border-bottom: 2px solid transparent !important;
  padding: 10px 16px !important;
  font-size: 13px !important;
  margin-bottom: -1px !important;
}

.explore .ui.secondary.pointing.menu .item:hover {
  color: rgba(244, 241, 234, 0.85) !important;
  border-bottom-color: rgba(244, 241, 234, 0.2) !important;
  background: transparent !important;
}

.explore .ui.secondary.pointing.menu .item.active {
  color: var(--color-primary) !important;
  border-bottom-color: var(--color-primary) !important;
  background: transparent !important;
  font-weight: 600 !important;
}

/* ── Pagination ── */
.explore .ui.pagination.menu {
  background: transparent !important;
  border: none !important;
  margin-top: 20px !important;
  display: flex !important;
  gap: 4px !important;
}

.explore .ui.pagination.menu .item {
  background: #1c1b19 !important;
  border: 1px solid rgba(244, 241, 234, 0.1) !important;
  border-radius: 6px !important;
  color: rgba(244, 241, 234, 0.6) !important;
  min-width: 32px !important;
  padding: 6px 10px !important;
  font-size: 13px !important;
}

.explore .ui.pagination.menu .item:hover {
  background: rgba(244, 241, 234, 0.08) !important;
  color: #f4f1ea !important;
}

.explore .ui.pagination.menu .item.active {
  background: rgba(255, 178, 46, 0.2) !important;
  border-color: rgba(255, 178, 46, 0.4) !important;
  color: var(--color-primary) !important;
}

/* ── Empty / no-results state ── */
.explore .ui.message {
  background: #141413 !important;
  border: 1px solid rgba(244, 241, 234, 0.08) !important;
  border-radius: 10px !important;
  color: rgba(244, 241, 234, 0.5) !important;
  box-shadow: none !important;
}

/* ── Result count ── */
.explore .item.count {
  color: rgba(244, 241, 234, 0.35) !important;
  font-size: 12px !important;
}

/* ── Contribution / activity graph ── */
/* Safety-net overrides for Gitea versions that may hardcode fill on the squares */
.heatmap-square {
  fill: var(--color-calendar-graph-day-bg) !important;
}
.heatmap-square[data-count="0"],
.heatmap-square:not([data-count]) {
  fill: var(--color-calendar-graph-day-bg) !important;
}