/*
 * lark theme for Gitea
 * Normalized brutalist pass — border-hierarchy revision.
 *
 * Border weights:
 *   2px solid accent  — top-level panels (.ui.segment, .ui.card, .repo-header,
 *                       .repository.file.content, .ui.segments outer)
 *   4px solid accent  — left rule for nested children (.ui.segments > .segment,
 *                       .markup pre, attached-segment inner headers)
 *   8px solid accent  — left rule for blockquote
 *   1px muted-strong  — internal grid lines (table cells, file-list rows)
 *
 * Principle: a border separates a thing from its parent. If the parent
 * already has a border, the child uses background shift + left rule
 * instead of stacking a second frame.
 *
 * Generated by Ansible from group_vars/all/themes.yml.
 * Edit themes.yml or this template, then re-run the playbook.
 *
 * Gitea reads this from:
 *   $GITEA_CUSTOM/public/assets/css/theme-lark.css
 * which maps to the host volume at:
 *   ~/docker-data/gitea/data/custom/public/assets/css/theme-lark.css
 */

@import url("https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Fira+Mono:wght@400;500;700&family=Fira+Sans+Condensed:ital,wght@0,300;0,400;0,600;0,700;1,300;1,400&display=swap");

/* ── Tokens / Gitea variable bridge ──────────────────────────────────────── */
:root {
  --is-dark-theme: true;

  /* Core lark palette */
  --lark-accent: #FF1053;
  --lark-paper: #FEFBFF;
  --lark-ink: #060710;

  /* Solid support colors: no gradients, no alpha, no blur */
  --lark-bone: #EDEAF2;
  --lark-muted: #A8A1B0;
  --lark-muted-strong: #6D6875;
  --lark-panel: #0E0F1A;
  --lark-panel-2: #151622;
  --lark-code: #10111D;
  --lark-rule: #FF1053;
  --lark-good: #7BFF9A;
  --lark-good-bg: #0D2A17;
  --lark-bad: #FF7BA5;
  --lark-bad-bg: #2A0D18;
  --lark-warn: #FFD76D;
  --lark-warn-bg: #2A210D;
  --lark-shadow-hard: 0.3rem 0.3rem 0 var(--lark-accent);

  --font-heading: "Bebas Neue", Impact, "Arial Black", sans-serif;
  --font-body: "Fira Sans Condensed", Calibri, "Arial Narrow", sans-serif;
  --font-mono: "Fira Mono", Consolas, "Liberation Mono", monospace;

  /* Common app aliases */
  --color-bg: var(--lark-ink);
  --color-surface: var(--lark-panel);
  --color-surface-hover: var(--lark-panel-2);
  --color-border: var(--lark-rule);
  --color-border-strong: var(--lark-paper);
  --color-text: var(--lark-paper);
  --color-text-secondary: var(--lark-bone);
  --color-muted: var(--lark-muted);
  --color-accent: var(--lark-accent);
  --color-accent-hover: var(--lark-paper);
  --color-link: var(--lark-paper);

  /* Gitea variables */
  --color-body: var(--lark-ink);
  --color-navbar: var(--lark-ink);
  --color-footer: var(--lark-ink);
  --color-box-header: var(--lark-accent);
  --color-box-body: var(--lark-panel);
  --color-box-body-highlight: var(--lark-panel-2);
  --color-text-light: var(--lark-bone);
  --color-text-light-1: var(--lark-bone);
  --color-text-light-2: var(--lark-muted);
  --color-text-light-3: var(--lark-muted);
  --color-primary: var(--lark-accent);
  --color-primary-contrast: var(--lark-ink);
  --color-primary-hover: var(--lark-paper);
  --color-primary-active: var(--lark-accent);
  --color-primary-light-1: #33101E;
  --color-primary-light-2: #2A0D18;
  --color-primary-light-3: #1C0B13;
  --color-primary-light-4: #151018;
  --color-primary-light-5: #100C12;
  --color-primary-light-6: #0B0910;
  --color-primary-light-7: #08080D;
  --color-primary-alpha-10: #1C0B13;
  --color-primary-alpha-20: #2A0D18;
  --color-primary-alpha-30: #33101E;
  --color-primary-alpha-40: #401225;
  --color-primary-alpha-50: #4A142B;
  --color-primary-alpha-60: #5C1734;
  --color-primary-alpha-70: #771B40;
  --color-secondary: var(--lark-accent);
  --color-secondary-hover: var(--lark-paper);
  --color-secondary-active: var(--lark-accent);
  --color-input-background: var(--lark-code);
  --color-input-border: var(--lark-accent);
  --color-input-text: var(--lark-paper);
  --color-menu: var(--lark-panel);
  --color-menu-hover: var(--lark-panel-2);
  --color-menu-active: var(--lark-panel-2);
  --color-label-background: #2A0D18;
  --color-label-text: var(--lark-accent);
  --color-markup-code-block: var(--lark-code);
  --color-console-foreground: var(--lark-paper);
  --color-console-background: var(--lark-code);
  --color-diff-added-row: var(--lark-good-bg);
  --color-diff-added-word: #145026;
  --color-diff-removed-row: var(--lark-bad-bg);
  --color-diff-removed-word: #5C1734;
  --color-success-text: var(--lark-good);
  --color-success-border: var(--lark-good);
  --color-success-bg: var(--lark-good-bg);
  --color-error-text: var(--lark-bad);
  --color-error-border: var(--lark-bad);
  --color-error-bg: var(--lark-bad-bg);
  --color-warning-text: var(--lark-warn);
  --color-warning-border: var(--lark-warn);
  --color-warning-bg: var(--lark-warn-bg);
  --shadow-color: var(--lark-accent);
}

/* ── Global reset / base ─────────────────────────────────────────────────── */
*,
*::before,
*::after {
  border-radius: 0 !important;
}

html,
body,
.full.height {
  background: var(--lark-ink) !important;
  color: var(--lark-paper) !important;
}

body {
  font-family: var(--font-body) !important;
  font-weight: 300;
  cursor: crosshair;
}

body::before {
  content: "";
  display: block;
  height: 4px;
  background: var(--lark-accent);
}

::selection {
  background: var(--lark-accent);
  color: var(--lark-ink);
}

:focus-visible {
  outline: 4px solid var(--lark-accent) !important;
  outline-offset: 2px !important;
}

/* ── Typography ──────────────────────────────────────────────────────────── */
h1,
h2,
h3,
h4,
h5,
h6,
.ui.header,
.repository .header,
.issue-title,
.release-title,
.repo-title,
.repo-title a {
  color: var(--lark-paper) !important;
  font-family: var(--font-heading) !important;
  font-weight: 400 !important;
  letter-spacing: 0.08em;
  line-height: 0.95;
  text-transform: uppercase;
}

.ui.header .sub.header,
.text.grey,
.muted,
.help,
.help-block,
.ui.sub.header {
  color: var(--lark-muted) !important;
  font-family: var(--font-mono) !important;
  letter-spacing: 0.06em;
}

a,
.ui.breadcrumb a,
.repo-title a,
.markup a {
  color: var(--lark-paper) !important;
  text-decoration-color: var(--lark-accent) !important;
  text-decoration-thickness: 0.12em;
  text-underline-offset: 0.18em;
}

a:hover,
.ui.breadcrumb a:hover,
.repo-title a:hover,
.markup a:hover {
  color: var(--lark-accent) !important;
}

code,
pre,
kbd,
tt,
.blob-code,
.blob-code-inner,
.lines-code,
.file-view code,
.file-view pre,
.markup code,
.markup pre {
  background: var(--lark-code) !important;
  color: var(--lark-bone) !important;
  font-family: var(--font-mono) !important;
}

/* ── Navigation ──────────────────────────────────────────────────────────── */
.ui.top.attached.header.navbar,
.navbar,
.page-content .navbar,
.following.bar.light {
  background: var(--lark-ink) !important;
  border-bottom: 2px solid var(--lark-accent) !important;
  box-shadow: none !important;
}

.navbar .item,
.ui.secondary.menu .item,
.ui.menu .item {
  color: var(--lark-bone) !important;
  font-family: var(--font-mono) !important;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.navbar .item:hover,
.ui.secondary.menu .item:hover,
.ui.menu .item:hover,
.ui.menu .active.item,
.ui.secondary.menu .active.item {
  background: var(--lark-panel-2) !important;
  color: var(--lark-accent) !important;
}

/* ── Panels / cards / repository chrome ──────────────────────────────────── */
.ui.segment,
.ui.segments,
.ui.card,
.ui.cards > .card,
.ui.attached.segment,
.repository.file.content,
.repository.view.issue .comment-list .comment,
.issue-sidebar-combo,
.repository .diff-file-box,
.repository .file-list,
.repository .timeline-item.comment,
.repo-header,
.repo-summary,
.repo-topic,
#repo-files-table {
  background: var(--lark-panel) !important;
  border: 2px solid var(--lark-accent) !important;
  color: var(--lark-paper) !important;
  box-shadow: none !important;
}

.ui.segment:hover,
.ui.card:hover,
.ui.cards > .card:hover,
.repository.file.content:hover {
  box-shadow: var(--lark-shadow-hard) !important;
}

/* Nested segments: when a segment sits inside a .ui.segments group or
   inside another segment, drop its border. Use a left rule + a slightly
   lighter panel background to indicate "child of parent" without
   stacking pink frames. */
.ui.segments > .ui.segment,
.ui.segments > .ui.attached.segment,
.ui.segment .ui.segment {
  border: 0 !important;
  border-left: 4px solid var(--lark-accent) !important;
  background: var(--lark-panel-2) !important;
}

/* Inside .ui.segments, dividers between children come from a single
   bottom rule, not from each child carrying its own border. */
.ui.segments > .ui.segment + .ui.segment,
.ui.segments > .ui.attached.segment + .ui.attached.segment {
  border-top: 1px solid var(--lark-rule) !important;
}

.ui.top.attached.header,
.ui.attached.header,
.repository .segment.reactions .header {
  background: var(--lark-accent) !important;
  border: 0 !important;
  border-bottom: 2px solid var(--lark-accent) !important;
  color: var(--lark-ink) !important;
  font-family: var(--font-mono) !important;
  font-weight: 700 !important;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* Attached segments: the header above already owns the top edge,
   and a parent .ui.segments owns the outer frame. Drop the top border
   so an attached header + body reads as one unit, not two stacked boxes. */
.ui.bottom.attached.segment,
.ui.attached.segment {
  border-top: 0 !important;
}

.ui.attached.segment .header:not(.ui),
.ui.segment .header:not(.ui) {
  border-left: 4px solid var(--lark-accent) !important;
  padding-left: 0.75rem !important;
}

/* ── Menus / dropdowns ───────────────────────────────────────────────────── */
.ui.menu,
.ui.vertical.menu,
.ui.dropdown .menu,
.ui.selection.dropdown .menu {
  background: var(--lark-panel) !important;
  border: 2px solid var(--lark-accent) !important;
  box-shadow: none !important;
}

.ui.dropdown .menu > .item,
.ui.selection.dropdown .menu > .item {
  color: var(--lark-bone) !important;
}

.ui.dropdown .menu > .item:hover,
.ui.selection.dropdown .menu > .item:hover,
.ui.dropdown .menu > .active.item {
  background: var(--lark-panel-2) !important;
  color: var(--lark-accent) !important;
}

/* ── Buttons ─────────────────────────────────────────────────────────────── */
.ui.button,
.ui.buttons .button,
button.ui.button,
.btn {
  background: var(--lark-panel) !important;
  border: 2px solid var(--lark-accent) !important;
  color: var(--lark-paper) !important;
  font-family: var(--font-mono) !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  box-shadow: none !important;
}

.ui.button:hover,
.ui.buttons .button:hover,
.btn:hover {
  background: var(--lark-paper) !important;
  border-color: var(--lark-paper) !important;
  color: var(--lark-ink) !important;
}

.ui.primary.button,
.ui.primary.buttons .button,
.ui.green.button,
.ui.basic.primary.button {
  background: var(--lark-accent) !important;
  border-color: var(--lark-accent) !important;
  color: var(--lark-ink) !important;
}

.ui.primary.button:hover,
.ui.primary.buttons .button:hover,
.ui.green.button:hover,
.ui.basic.primary.button:hover {
  background: var(--lark-paper) !important;
  border-color: var(--lark-paper) !important;
  color: var(--lark-ink) !important;
  box-shadow: var(--lark-shadow-hard) !important;
}

.ui.basic.button,
.ui.basic.buttons .button {
  background: var(--lark-ink) !important;
  border: 2px solid var(--lark-accent) !important;
  color: var(--lark-paper) !important;
}

/* Labeled buttons (button + count label, e.g. Watch/Star/Fork in the repo
   header): treat the wrapper as the one box. The wrapper owns the 2px
   accent frame; the inner button drops its border, and the count label
   becomes a divider + interior, not its own box. */
.ui.labeled.button {
  border: 2px solid var(--lark-accent) !important;
  display: inline-flex !important;
}

.ui.labeled.button > .ui.button,
.ui.labeled.button > .ui.basic.button {
  border: 0 !important;
}

.ui.labeled.button > .ui.label,
.ui.labeled.button > .ui.basic.label {
  border: 0 !important;
  border-left: 2px solid var(--lark-accent) !important;
  background: var(--lark-panel-2) !important;
}

/* ── Forms / inputs ──────────────────────────────────────────────────────── */
.ui.input > input,
.ui.form input[type="text"],
.ui.form input[type="password"],
.ui.form input[type="email"],
.ui.form input[type="url"],
.ui.form input[type="number"],
.ui.form textarea,
.ui.form select,
.ui.selection.dropdown,
.ui.search > .prompt,
input,
textarea,
select {
  background: var(--lark-code) !important;
  border: 2px solid var(--lark-accent) !important;
  color: var(--lark-paper) !important;
  box-shadow: none !important;
}

.ui.input > input::placeholder,
.ui.form input::placeholder,
.ui.form textarea::placeholder {
  color: var(--lark-muted) !important;
}

.ui.input > input:focus,
.ui.form input:focus,
.ui.form textarea:focus,
.ui.selection.dropdown:focus,
.ui.search > .prompt:focus {
  background: var(--lark-panel-2) !important;
  border-color: var(--lark-paper) !important;
  box-shadow: var(--lark-shadow-hard) !important;
}

/* ── Tables / file browser ───────────────────────────────────────────────── */
.ui.table,
.repository .file-list,
#repo-files-table {
  background: var(--lark-panel) !important;
  border: 0 !important;
  color: var(--lark-paper) !important;
}

.ui.table thead th,
#repo-files-table thead th,
.repository .file-list .file-list-header {
  background: var(--lark-accent) !important;
  border-color: var(--lark-accent) !important;
  color: var(--lark-ink) !important;
  font-family: var(--font-mono) !important;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.ui.table td,
.ui.table th,
#repo-files-table td,
#repo-files-table th,
.repository .file-list .file-list-entry {
  border-color: var(--lark-muted-strong) !important;
}

.ui.table tbody tr:hover td,
#repo-files-table tr:hover td,
.repository .file-list .file-list-entry:hover {
  background: var(--lark-panel-2) !important;
}

/* ── Labels / badges / icons ─────────────────────────────────────────────── */
.ui.label,
.label,
.repo-topic,
.issue-label,
.repository .branch-tag,
.commit-statuses .ui.label {
  background: var(--color-label-background) !important;
  border: 2px solid var(--lark-accent) !important;
  color: var(--lark-accent) !important;
  font-family: var(--font-mono) !important;
  font-weight: 700;
  letter-spacing: 0.06em;
}

svg.octicon,
.ui.menu svg.octicon,
a svg.octicon {
  color: currentColor !important;
  fill: currentColor !important;
}

#profile-avatar-card,
#profile-avatar.content,
.user.profile .ui.card .extra.content {
  border-color: var(--lark-accent) !important;
  color: var(--lark-accent) !important;
}

/* ── Markdown rendering ──────────────────────────────────────────────────── */
.markup,
.markup p,
.markup li,
.markup table,
.markup td {
  color: var(--lark-bone) !important;
  line-height: 1.55;
}

.markup h1,
.markup h2,
.markup h3,
.markup h4 {
  margin-top: 1.5em;
  border-bottom: 2px solid var(--lark-accent) !important;
}

.markup h2::before {
  content: "// ";
  color: var(--lark-accent);
}

.markup blockquote {
  background: var(--lark-panel-2) !important;
  border: 0 !important;
  border-left: 8px solid var(--lark-accent) !important;
  color: var(--lark-paper) !important;
}

.markup code {
  padding: 0.1em 0.35em !important;
  background: var(--lark-code) !important;
  color: var(--lark-paper) !important;
}

.markup pre {
  padding: 1rem !important;
  background: var(--lark-code) !important;
  border: 0 !important;
  border-left: 4px solid var(--lark-accent) !important;
}

.markup pre code {
  padding: 0 !important;
  border: 0 !important;
}

.markup table td,
.markup table th {
  border: 1px solid var(--lark-muted-strong) !important;
}

.markup table th {
  background: var(--lark-accent) !important;
  color: var(--lark-ink) !important;
  border-color: var(--lark-accent) !important;
}

.markup table tr:nth-child(2n) {
  background: var(--lark-panel-2) !important;
}

/* ── Diff / code review ──────────────────────────────────────────────────── */
.code-diff .added,
.diff-file-box .add-code,
.diff-file-box .lines-num-new,
.diff-file-box .lines-code-new {
  background: var(--lark-good-bg) !important;
  color: var(--lark-paper) !important;
}

.code-diff .removed,
.diff-file-box .del-code,
.diff-file-box .lines-num-old,
.diff-file-box .lines-code-old {
  background: var(--lark-bad-bg) !important;
  color: var(--lark-paper) !important;
}

.code-diff .added .word-added,
.diff-file-box .word-added {
  background: var(--color-diff-added-word) !important;
}

.code-diff .removed .word-removed,
.diff-file-box .word-removed {
  background: var(--color-diff-removed-word) !important;
}

.lines-num,
.lines-num-old,
.lines-num-new {
  color: var(--lark-muted) !important;
  border-color: var(--lark-accent) !important;
}

/* ── Status messages ─────────────────────────────────────────────────────── */
.ui.positive.message,
.ui.success.message,
.positive,
.success {
  background: var(--lark-good-bg) !important;
  border-color: var(--lark-good) !important;
  color: var(--lark-good) !important;
}

.ui.negative.message,
.ui.error.message,
.negative,
.error {
  background: var(--lark-bad-bg) !important;
  border-color: var(--lark-bad) !important;
  color: var(--lark-bad) !important;
}

.ui.warning.message,
.warning {
  background: var(--lark-warn-bg) !important;
  border-color: var(--lark-warn) !important;
  color: var(--lark-warn) !important;
}

/* ── Dividers / footer ───────────────────────────────────────────────────── */
.ui.divider,
hr {
  border-color: var(--lark-accent) !important;
}

.page-footer,
footer {
  background: var(--lark-ink) !important;
  border-top: 2px solid var(--lark-accent) !important;
  color: var(--lark-muted) !important;
}

.page-footer {
  display: none;
}

/* ── Small screens ───────────────────────────────────────────────────────── */
@media (max-width: 767px) {
  .ui.menu,
  .navbar {
    border-left: 0 !important;
    border-right: 0 !important;
  }

  .ui.segment,
  .ui.card,
  .repository.file.content {
    box-shadow: none !important;
  }
}