/* p0 Theme for Forgejo - Light variant with p0 brand colors */

/* ========================================
   Font Declarations
   ======================================== */

@font-face {
  font-family: 'Geist';
  src: url('/assets/fonts/Geist-Regular.woff') format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Geist';
  src: url('/assets/fonts/Geist-SemiBold.woff') format('woff');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Geist';
  src: url('/assets/fonts/Geist-Bold.woff') format('woff');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Geist';
  src: url('/assets/fonts/Geist-Black.woff') format('woff');
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Space Grotesk';
  src: url('/assets/fonts/SpaceGrotesk-Regular.woff') format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Space Grotesk';
  src: url('/assets/fonts/SpaceGrotesk-SemiBold.woff') format('woff');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Absolute references */
  --color-white: #FFFFFF;
  --color-black: #000000;
	
/* ==========================================================================
   plat0n® Color Primitives - Canonical Ramp (p0-aqua)
   Scale: 50 (lightest) -> 900 (darkest)
   ========================================================================== */

  --color-p0-aqua-50:  #E3FCFA;
  --color-p0-aqua-100: #CCFAF6;
  --color-p0-aqua-200: #9DF6EE;
  --color-p0-aqua-300: #6EF2E6;
  --color-p0-aqua-400: #40EDDD;
  --color-p0-aqua-500: #15E5D2;
  --color-p0-aqua-600: #11B6A7; /* Brand base primary */
  --color-p0-aqua-700: #0D877C;
  --color-p0-aqua-800: #085951;
  --color-p0-aqua-900: #042A27;	
  
/* ==========================================================================
   plat0n® Color Primitives - Canonical Ramp (p0-ink)
   Scale: 50 (lightest) -> 900 (darkest)
   ========================================================================== */

  --color-p0-ink-50:  #F4F3F5;
  --color-p0-ink-100: #E6E5EA;
  --color-p0-ink-200: #CBCAD2;
  --color-p0-ink-300: #B0AEBB;
  --color-p0-ink-400: #9692A4;
  --color-p0-ink-500: #7B768D;
  --color-p0-ink-600: #625F71;
  --color-p0-ink-700: #4A4756;
  --color-p0-ink-800: #32303A;
  --color-p0-ink-900: #1A191E; /* Brand base secondary */

/* ==========================================================================
   plat0n® Color Primitives - Surface Ramp (p0-surface)
   Subtle aqua-biased neutrals for backgrounds, cards, panels, separators
   Scale: 50 (lightest) -> 900 (darkest)
   ========================================================================== */

  --color-p0-surface-50:  #FAFCFC;
  --color-p0-surface-100: #F3F7F7;
  --color-p0-surface-200: #ECEFF0;
  --color-p0-surface-300: #E3E8E8;
  --color-p0-surface-400: #D6DDDD;
  --color-p0-surface-500: #C2CCCC;
  --color-p0-surface-600: #A9B5B5;
  --color-p0-surface-700: #7E8A8A;
  --color-p0-surface-800: #545F60;
  --color-p0-surface-900: #2C3435;

/* ==========================================================================
   plat0n® - Status Color Primitives (reduced ramps)
   Keys: 50 (bg) | 200 (border) | 500 (base) | 700 (strong) | 900 (text)
   ========================================================================== */

  /* success */
  --color-p0-status-success-50:  #ECF8F7;
  --color-p0-status-success-200: #B3E2DD;
  --color-p0-status-success-500: #10A396;
  --color-p0-status-success-700: #0C7C72;
  --color-p0-status-success-900: #074842;

  /* warning */
  --color-p0-status-warning-50:  #FEF7EB;
  --color-p0-status-warning-200: #FCE0B1;
  --color-p0-status-warning-500: #F59E0B;
  --color-p0-status-warning-700: #BA7808;
  --color-p0-status-warning-900: #6C4605;

  /* error */
  --color-p0-status-error-50:  #FEF0F0;
  --color-p0-status-error-200: #FAC3C3;
  --color-p0-status-error-500: #EF4444;
  --color-p0-status-error-700: #B63434;
  --color-p0-status-error-900: #691E1E;  

/* ==========================================================================
   Shadow primitives (dropdowns, popovers, modals)
   ========================================================================== */

  --shadow-p0-1: 0 1px 2px rgba(0, 0, 0, 0.06);
  --shadow-p0-2: 0 2px 6px rgba(0, 0, 0, 0.08);
  --shadow-p0-3: 0 6px 18px rgba(0, 0, 0, 0.10);
  --shadow-p0-4: 0 12px 32px rgba(0, 0, 0, 0.14);

/* ==========================================================================
   Dropdown primitives (global defaults)
   ========================================================================== */

  --dropdown-box-shadow: var(--shadow-p0-2);
  --dropdown-item-min-height: 34px;
  --dropdown-padding-inline: 0.75rem;

/* ==========================================================================
   Heatmap internal tokens (vue-contribution-heatmap)
   Map widget variables to plat0n® ramps
   ========================================================================== */

  --color-secondary-alpha-60: var(--color-p0-surface-300);
  --color-primary-light-4:    var(--color-p0-aqua-200);
  --color-primary-light-2:    var(--color-p0-aqua-400);
  --color-primary:            var(--color-p0-aqua-600);
  --color-primary-dark-2:     var(--color-p0-aqua-800);
  --color-primary-dark-4:     var(--color-p0-aqua-900);

  /* Tooltip colors */
  --color-tooltip-bg:     var(--color-p0-surface-200);
  --color-tooltip-border: var(--color-p0-surface-400);
  --color-tooltip-text:   var(--color-p0-ink-900);

  /* CHECKBOX + RADIO (native + Fomantic UI) */	
  --p0-check: var(--color-p0-aqua-600);
  --p0-checkmark: var(--color-white);
  
/* ==========================================================================
   plat0n® - Status Color Mapping (Forgejo/Fomantic UI Messages)
   Purpose: Override Forgejo status tokens with plat0n® reduced status ramps
   Tokens:  --color-*-bg     -> 50   (background)
            --color-*-border -> 200  (border)
            --color-*-text   -> 900  (text)
   Applies: .ui.success.message | .ui.warning.message | .ui.error.message
   ========================================================================== */

  /* success */
  --color-success-bg:     var(--color-p0-status-success-50);
  --color-success-border: var(--color-p0-status-success-200);
  --color-success-text:   var(--color-p0-status-success-900);

  /* warning */
  --color-warning-bg:     var(--color-p0-status-warning-50);
  --color-warning-border: var(--color-p0-status-warning-500);
  --color-warning-text:   var(--color-p0-status-warning-900);

  /* error */
  --color-error-bg:       var(--color-p0-status-error-50);
  --color-error-border:   var(--color-p0-status-error-200);
  --color-error-text:     var(--color-p0-status-error-900);

  /* some overwrites */
  --color-body:			  var(--color-p0-surface-200);  	
}

/* ========================================
   Base Typography
   ======================================== */

body {
  font-family: 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
  color: var(--color-p0-ink-900);
  background-color: var(--color-white)
}

h1, h2, h3, h4, h5, h6,
.ui.header {
  font-family: 'Space Grotesk', 'Geist', sans-serif;
  font-weight: 600;
  color: var(--color-p0-ink-900);
}

/* ========================================
   Navbar Logo (p0 wordmark)
   ======================================== */

#navbar-logo img {
  content: url("/assets/img/p0-logo-nav.svg");
  width: auto !important;
  height: 26px !important;
  max-width: 160px;
  object-fit: contain;
}

/* ========================================
   Navigation & Sidebar (Light Aqua)
   ======================================== */

/* Main navigation bar */
.ui.menu,
.secondary.menu,
.ui.attached.header,
.repository.file.list #repo-files-table thead,
.page-content > .ui.container,
body > .full.height > .following.bar {
  background-color: var(--color-white) !important;
  border-color: var(--color-p0-surface-300) !important;
}
#navbar {
  background:var(--color-white) !important;
  border-bottom: 1px solid var(--color-p0-surface-300);
}

/* Top bar / Header wrapper */
.following.bar,
.ui.top.attached.header {
  background-color: var(--color-p0-surface-100) !important;
}

/* Sidebar navigation */
.ui.left.menu,
.ui.vertical.menu,
.settings .list > .item {
  background-color: var(--color-p0-surface-100) !important;
}

/* Active/selected sidebar items */
.ui.vertical.menu .active.item,
.settings .list > .item.active {
  background-color: var(--color-p0-surface-400) !important;
  color: var(--color-p0-aqua-900) !important;
  border-left-color: var(--color-p0-aqua-600) !important;
}

/* Sidebar hover states */
.ui.vertical.menu .item:hover,
.settings .list > .item:hover {
  background-color: var(--color-p0-surface-300) !important;
}

/* Top navigation items */
.secondary.menu .item {
  color: var(--color-p0-ink-700) !important;
}

.secondary.menu .item:hover {
  color: var(--color-p0-aqua-800) !important;
  background-color: var(--color-p0-surface-300) !important;
}

.secondary.menu .active.item {
  color: var(--color-p0-aqua-600) !important;
  border-bottom-color: var(--color-p0-aqua-600) !important;
}

/* dropdown */
details.dropdown > .content,
.ui.dropdown .menu {
  background: var(--color-white);
  box-shadow: var(--shadow-p0-2);
  border: 1px solid var(--color-p0-surface-400);
}
/* summary hover only */
details.dropdown > summary:hover {
  background: var(--color-p0-surface-300) !important;
}

/* item hover only (no effect on container) */
details.dropdown > .content > ul > li > a:hover,
details.dropdown > .content > ul > li > button:hover {
  background: var(--color-p0-surface-300) !important;
}

/* ========================================
   Buttons & Interactive Elements
   ======================================== */

/* Primary buttons (aqua) */
.button.primary,
.ui.primary.button,
.ui.primary.buttons .button {
  background-color: var(--color-p0-aqua-600) !important;
  color: var(--color-white) !important;
  font-family: 'Geist', sans-serif;
  font-weight: 600;
}
.button.primary:hover,
.ui.primary.button:hover,
.ui.primary.buttons .button:hover {
  background-color: var(--color-p0-aqua-700) !important;
}

.ui.primary.button:active,
.ui.primary.buttons .button:active {
  background-color: var(--color-p0-aqua-800) !important;
}

/* Secondary buttons */
.ui.basic.button,
.ui.basic.buttons .button {
  color: var(--color-p0-aqua-600) !important;
  border-color: var(--color-p0-aqua-600) !important;
}

.ui.basic.button:hover,
.ui.basic.buttons .button:hover {
  background-color: var(--color-p0-surface-300) !important;
  color: var(--color-p0-aqua-700) !important;
  border-color: var(--color-p0-aqua-700) !important;
}

/* Button groups */
.ui.buttons .button {
  font-family: 'Geist', sans-serif;
}

/* Button danger */
.button.danger {
  background: var(--color-p0-status-error-200) !important;
  border: 1px solid var(--color-p0-status-error-500) !important;
  color: var(--color-p0-status-error-900) !important;
}  
.button.danger:hover {
  background: var(--color-p0-status-error-500) !important;
}   
  
/* ========================================
   Links
   ======================================== */

a {
  color: var(--color-p0-aqua-800);
  text-decoration: none;
}

a:hover {
  color: var(--color-p0-aqua-600);
  text-decoration: underline;
}

a:active {
  color: var(--color-p0-aqua-900);
}

/* Navigation links */
.ui.menu a.item {
  color: var(--color-p0-ink-700);
}

.ui.menu a.item:hover {
  color: var(--color-p0-aqua-600);
}

/* ========================================
   Forms & Inputs
   ======================================== */

input,
textarea,
.ui.selection.dropdown {
  font-family: 'Geist', sans-serif;
  border-color: var(--color-p0-surface-400) !important;
  color: var(--color-p0-ink-900) !important;
  background: var(--color-white) !important;
}

input:focus,
textarea:focus,
.ui.selection.dropdown:focus {
  border-color: var(--color-p0-aqua-600) !important;
  box-shadow: 0 0 0 2px var(--color-p0-surface-200);
}

/* backgrounds & borders */
.ui.attached.segment,
.ui.attached.segment .item,
.ui.attached.segment .ui.email.list,
.ui.segments.repository-summary,
.ui.segment.repository-menu {
  background: var(--color-p0-surface-50) !important;
}

.ui.attached.segment,
.ui.segments.repository-summary,
h4.ui.top.attached.header,
.ui .code-search,
form[data-test-tag="codesearch"] .ui.action.input > button.ui.small.icon.button,
form.ui.form.ignore-dirty .ui.small.fluid.action.input > button.ui.small.icon.button {
  border: 1px solid var(--color-p0-surface-400) !important;
}

h4.ui.top.attached.header,
.ui .code-search {
  background: var(--color-p0-surface-100) !important;
  border-bottom: none !important;
}
.ui.form input[type="search"] {
  background: var(--color-white) !important;
  border-color: var(--color-p0-surface-400) !important;
}
.ui.selection.dropdown:hover {
  border-color: var(--color-p0-surface-400) !important;
}
.ui.form input[type="search"]:focus {
  border-color: var(--color-p0-aqua-600) !important;
}

/* Dropdown selected items */
.ui.selection.dropdown,
.ui.dropdown .menu {
  background-color: var(--color-white) !important;
}

.ui.selection.dropdown .menu > .item.selected,
.ui.selection.dropdown .menu > .item:hover {
  background-color: var(--color-p0-surface-300) !important;
  color: var(--color-p0-aqua-800) !important;
}

/* Avatar file input hover */
input[name="avatar"][type="file"] {
  cursor: pointer;
}
input[name="avatar"][type="file"]:hover {
  background: var(--color-p0-surface-300) !important;
}

/* Global dropdown menus */

.ui.dropdown .menu {
  background: var(--color-white) !important;
  border: 1px solid var(--color-p0-surface-300) !important;
  color: var(--color-p0-ink-900) !important;
}

.ui.dropdown .menu .ui.header {
  background: var(--color-p0-surface-100) !important;
  color: var(--color-p0-ink-900) !important;
  border-bottom: 1px solid var(--color-p0-surface-300) !important;
}

.ui.dropdown .menu .divider {
  border-top: 1px solid var(--color-p0-surface-300) !important;
}

.ui.dropdown .menu .item {
  background: var(--color-white) !important;
  color: var(--color-p0-ink-900) !important;
}

.ui.dropdown .menu .item:hover {
  background: var(--color-p0-surface-200) !important;
  color: var(--color-p0-ink-900) !important;
  cursor: pointer;
}

.ui.dropdown .menu .item.active,
.ui.dropdown .menu .item:focus {
  background: var(--color-p0-surface-300) !important;
  color: var(--color-p0-ink-900) !important;
}

.ui.dropdown .menu .item svg,
.ui.dropdown .menu .item svg path {
  fill: var(--color-p0-ink-900) !important;
}

/* ========================================
   CHECKBOX COLOR OVERRIDE
   ======================================== */

/* Native inputs */
input[type="checkbox"],
input[type="radio"] {
  accent-color: var(--p0-check) !important;
}

/* Fomantic (label variant) */
.ui.checkbox input:checked ~ label:before {
  background: var(--p0-check) !important;
  border-color: var(--p0-check) !important;
}
.ui.checkbox input:checked ~ label:after {
  color: var(--p0-checkmark) !important;
}

/* Fomantic (box variant) */
.ui.checkbox input:checked ~ .box:before {
  background: var(--p0-check) !important;
  border-color: var(--p0-check) !important;
}
.ui.checkbox input:checked ~ .box:after {
  color: var(--p0-checkmark) !important;
}

/* Toggle / slider variants */
.ui.toggle.checkbox input:checked ~ label:before,
.ui.slider.checkbox input:checked ~ label:before{
  background-color: var(--color-p0-aqua-600) !important;
  border-color: var(--color-p0-aqua-600) !important;
}

/* ========================================
   Home Content
   ======================================== */

.page-content.home .center .logo {
  margin: 30px 0 50px 0;	
}

.page-content.home .center .hero h2,
.page-content.home .ui.stackable.middle {
  display: none;
}

/* ========================================
   Repository Header
   ======================================== */

.repository-header,
overflow-menu,
.repository .header-wrapper {
  background-color: var(--color-white) !important;
  border-bottom: 1px solid var(--color-p0-surface-300) !important;
}

.repository .header-wrapper .repo-title {
  font-family: 'Space Grotesk', sans-serif !important;
  font-weight: 600 !important;
  color: var(--color-p0-ink-900) !important;
}

.repository .header-wrapper .repo-title a {
  color: var(--color-p0-ink-900) !important;
}

/* Repository tabs */
.repository .ui.tabular.menu {
  background-color: var(--color-white) !important;
  border-bottom: 1px solid var(--color-p0-surface-300) !important;
}

.repository .ui.tabular.menu .item {
  color: var(--color-p0-ink-700) !important;
}

.repository .ui.tabular.menu .item:hover {
  color: var(--color-p0-ink-900) !important;
}

.repository .ui.tabular.menu .active.item {
  color: var(--color-p0-ink-900) !important;
  border-bottom-color: var(--color-p0-ink-900) !important;
}

/* Repo header buttons (RSS / Watch / Star / Fork) */
.repo-buttons .ui.labeled.button > .ui.compact.small.basic.button,
.repo-buttons .ui.labeled.button > .ui.basic.label,
.repo-buttons > a.ui.compact.small.basic.button {
  background: var(--color-p0-surface-300) !important;
  border: 1px solid var(--color-p0-surface-500) !important;
  color: var(--color-p0-ink-900) !important;
}

/* Icons inside repo header buttons */
.repo-buttons .ui.compact.small.basic.button svg,
.repo-buttons > a.ui.compact.small.basic.button svg {
  fill: var(--color-p0-ink-900) !important;
}

/* Keep label visually attached */
.repo-buttons .ui.labeled.button > .ui.basic.label {
  border-left: 0 !important;
}

/* Hover */
.repo-buttons .ui.labeled.button > .ui.compact.small.basic.button:hover,
.repo-buttons .ui.labeled.button > .ui.basic.label:hover,
.repo-buttons > a.ui.compact.small.basic.button:hover {
  background: var(--color-p0-surface-400) !important;
  border-color: var(--color-p0-surface-500) !important;
  color: var(--color-p0-ink-900) !important;
}

.repo-buttons .ui.labeled.button > .ui.compact.small.basic.button:hover svg,
.repo-buttons > a.ui.compact.small.basic.button:hover svg {
  fill: var(--color-p0-ink-900) !important;
}

/* ========================================
   repo-button-row (Branch/Tag + Datei suchen + Datei hinzufuegen + Clone Panel)
   ======================================== */

.repo-button-row .ui.basic.small.compact.button,
.repo-button-row .ui.basic.compact.button,
.repo-button-row .ui.small.button,
.repo-button-row .ui.small.icon.button,
.repo-button-row .ui.small.jump.dropdown.icon.button,
.repo-button-row .ui.dropdown.basic.compact.jump.button {
  background: var(--color-p0-surface-300) !important;
  border: 1px solid var(--color-p0-surface-500) !important;
  color: var(--color-p0-ink-900) !important;
  box-shadow: none !important;
}

/* icons inside buttons */
.repo-button-row button svg,
.repo-button-row a svg {
  fill: var(--color-p0-ink-900) !important;
}

/* clone url input */
.repo-button-row input.js-clone-url {
  background: var(--color-white) !important;
  border: 1px solid var(--color-p0-surface-500) !important;
  border-right: none !important;
  color: var(--color-p0-ink-900) !important;
  box-shadow: none !important;
}

/* hover */
.repo-button-row .ui.basic.small.compact.button:hover,
.repo-button-row .ui.basic.compact.button:hover,
.repo-button-row .ui.small.button:hover,
.repo-button-row .ui.small.icon.button:hover,
.repo-button-row .ui.small.jump.dropdown.icon.button:hover,
.repo-button-row .ui.dropdown.basic.compact.jump.button:hover,
.repo-button-row input.js-clone-url:hover {
  background: var(--color-p0-surface-400) !important;
  border-color: var(--color-p0-surface-500) !important;
  color: var(--color-p0-ink-900) !important;
}

/* keep clone-panel itself neutral */
.repo-button-row .clone-panel.ui.action.tiny.input {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* ========================================
   HTTPS / SSH active state
   ======================================== */

.repo-button-row #repo-clone-https.primary,
.repo-button-row #repo-clone-ssh.primary {
  background: var(--color-p0-aqua-600) !important;
  border-color: var(--color-p0-aqua-600) !important;
  color: var(--color-white) !important;
}

.repo-button-row #repo-clone-https.primary:hover,
.repo-button-row #repo-clone-ssh.primary:hover {
  background: var(--color-p0-aqua-700) !important;
  border-color: var(--color-p0-aqua-700) !important;
  color: var(--color-white) !important;
}


/* ========================================
   Cards & Containers
   ======================================== */

.ui.card,
.ui.cards > .card,
.ui.segment {
  background-color: var(--color-white);
  border-color: var(--color-p0-surface-300);
}

.ui.card:hover,
.ui.cards > .card:hover {
  border-color: var(--color-p0-surface-200);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

/* ========================================
   Tables
   ======================================== */

.ui.table,
.ui.table tbody {
  color: var(--color-p0-ink-900) !important;
  border: 1px solid var(--color-p0-surface-300) !important;
  background: var(--color-p0-surface-50) !important;
}

.ui.table thead th {
  background-color: var(--color-p0-surface-100);
  color: var(--color-p0-ink-700);
  font-weight: 600;
}

.markdown table thead th {
  background-color: var(--color-p0-surface-300) !important;
}

.markdown table,
.markdown table th,
.markdown table td {
  border-color: var(--color-p0-surface-300) !important;
}

/* Markdown Table Row Separator */
.markdown table tbody tr {
  border-bottom: 1px solid var(--color-p0-surface-400);
}

/* Markdown Table Zebra Rows */

.markdown table tbody tr:nth-child(even) {
  background-color: var(--color-p0-surface-200);
}

.markdown table tbody tr:nth-child(odd) {
  background-color: var(--color-p0-surface-50);
}

.markdown table tbody tr:last-child {
  border-bottom: none;
}

.markdown table th,
.markdown table td {
  border-left: none !important;
  border-right: none !important;
}

.ui.table tbody tr:hover {
  background-color: var(--color-p0-surface-100) !important;
}
.repository #repo-files-table thead tr.commit-list {
  background-color: var(--color-p0-surface-100) !important;
}

/* ========================================
   Labels & Tags
   ======================================== */

.ui.label {
  background-color: var(--color-p0-surface-300);
  color: var(--color-p0-aqua-800);
  border-color: var(--color-p0-surface-300);
}

.ui.label.primary {
  background-color: var(--color-p0-aqua-600) !important;
  color: var(--color-white) !important;
}

/* ========================================
   Notifications & Messages
   ======================================== */

.ui.message {
  background-color: var(--color-white);
  border-color: var(--color-p0-surface-300);
  color: var(--color-p0-ink-900);
}

.ui.info.message {
  background-color: var(--color-p0-surface-300);
  border-color: var(--color-p0-surface-300);
  color: var(--color-p0-aqua-900);
}

.ui.success.message {
  background-color: #E6F7F5;
  border-color: var(--color-p0-status-success-500);
  color: var(--color-p0-status-success-500);
}

/* ========================================
   Code & Syntax Highlighting
   ======================================== */

code,
.markdown code {
  font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
  background-color: var(--color-p0-surface-100);
  color: var(--color-p0-aqua-900);
  border: 1px solid var(--color-p0-surface-300);
  padding: 0.2em 0.4em;
  border-radius: 3px;
}

pre {
  background-color: var(--color-p0-surface-100);
  border: 1px solid var(--color-p0-surface-300);
  border-radius: 4px;
}

.markdown pre {
  background-color: var(--color-p0-surface-100) !important;
  border: 1px solid var(--color-p0-surface-300) !important;
}

/* ========================================
   Markdown Blockquote
   ======================================== */

.markdown blockquote {
  border-left: 4px solid var(--color-p0-aqua-600);
  padding-left: 1rem;
  margin-left: 0;
  color: var(--color-p0-ink-700);
  background: transparent;
}

.markdown blockquote p {
  margin: 0.4em 0;
}

/* ========================================
   Footer
   ======================================== */

.page-footer {
  background-color: var(--color-p0-surface-100);
  border-top: 1px solid var(--color-p0-surface-300);
  color: var(--color-p0-ink-700);
  font-size: 0.875rem;
}

.page-footer a {
  color: var(--color-p0-aqua-800);
}

.page-footer a:hover {
  color: var(--color-p0-aqua-600);
}

/* ========================================
   User Settings Page (from screenshot)
   ======================================== */

/* Settings sidebar */
.user.settings .list {
  background-color: var(--color-p0-surface-100) !important;
}

.user.settings .list .item {
  color: var(--color-p0-ink-900);
  border-left: 3px solid transparent;
}

.user.settings .list .item:hover {
  background-color: var(--color-p0-surface-300) !important;
}

.user.settings .list .item.active {
  background-color: var(--color-white) !important;
  color: var(--color-p0-aqua-600) !important;
  border-left-color: var(--color-p0-aqua-600) !important;
}

/* Settings content area */
.user.settings .ui.segment {
  background-color: var(--color-white);
}

/* Success notification in settings */
.ui.success.message {
  background-color: var(--color-p0-surface-300) !important;
  color: var(--color-p0-aqua-900) !important;
  border: 1px solid var(--color-p0-surface-300) !important;
}

/* ========================================
   Miscellaneous
   ======================================== */

/* Pagination */
.ui.pagination.menu .item {
  color: var(--color-p0-ink-700);
}

.ui.pagination.menu .active.item {
  background-color: var(--color-p0-aqua-600) !important;
  color: var(--color-white) !important;
}

/* Progress bars */
.ui.progress .bar {
  background-color: var(--color-p0-aqua-600);
}

/* Tooltips */
.ui.popup {
  background-color: var(--color-p0-ink-900);
  color: var(--color-white);
  border-color: var(--color-p0-ink-900);
}

/* ==========================================================================
   Components - Heatmap (vue-contribution-heatmap)
   ========================================================================== */

#user-heatmap {
  --color-secondary-alpha-60: var(--color-p0-surface-300);
  --color-primary-light-4:    var(--color-p0-aqua-200);
  --color-primary-light-2:    var(--color-p0-aqua-400);
  --color-primary:            var(--color-p0-aqua-600);
  --color-primary-dark-2:     var(--color-p0-aqua-800);
  --color-primary-dark-4:     var(--color-p0-aqua-900);
}

/* ========================================
   Forgejo-Light neutral surface alignment
   ======================================== */

.ui.menu,
.ui.secondary.menu,
.ui.vertical.menu,
.ui.attached.header,
.following.bar {
  box-shadow: none !important;
}

.ui.segment,
.ui.segments > .segment {
  border-color: var(--color-p0-surface-300) !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

/* ========================================
   Danger Zone – Full Override (p0)
   ======================================== */

/* ========================================
   Account Delete - Error Header + Segment
   Targets:
   - h4.ui.top.attached.error.header
   - .ui.attached.error.segment
   - nested .ui.red.message
   ======================================== */

h4.ui.top.attached.error.header {
  background: var(--color-p0-status-error-200) !important;
  color: var(--color-error-text) !important;
  border: 1px solid var(--color-error-border) !important;
  border-bottom: 0 !important;
}

.ui.attached.error.segment {
  background: var(--color-error-bg) !important;
  border: 1px solid var(--color-error-border) !important;
  border-top: 0 !important;
  color: var(--color-error-text) !important;
}

/* Inner message box (Forgejo uses .ui.red.message inside the segment) */
.ui.attached.error.segment .ui.red.message {
  background: var(--color-p0-status-error-200) !important;
  border: 0 !important;
  color: var(--color-error-text) !important;
  box-shadow: none !important;
}
/* password field */
.ui.attached.error input#password-confirmation:focus {
  border-color: var(--color-p0-status-error-500) !important;
}

/* Text + strong */
.ui.attached.error.segment .ui.red.message,
.ui.attached.error.segment .ui.red.message .text,
.ui.attached.error.segment .ui.red.message p,
.ui.attached.error.segment .ui.red.message strong {
  color: var(--color-error-text) !important;
}

/* Icons inside the error message */
.ui.attached.error.segment .ui.red.message svg,
.ui.attached.error.segment .ui.red.message svg path {
  fill: var(--color-error-text) !important;
}

/* Delete avatar button */

button.danger.button.link-action {
  background: var(--color-error-bg) !important;
  color: var(--color-error-text) !important;
  border: 1px solid var(--color-error-border) !important;
}

button.danger.button.link-action:hover {
  background: var(--color-p0-status-error-200) !important;
  border-color: var(--color-p0-status-error-500) !important;
}

button.danger.button.link-action svg,
button.danger.button.link-action svg path {
  fill: var(--color-error-text) !important;
}

/* ========================================
   Global Red / Danger Buttons
   Basis: error reduced ramp
   ======================================== */

.ui.red.button {
  background: var(--color-error-bg) !important;
  color: var(--color-error-text) !important;
  border: 1px solid var(--color-error-border) !important;
}

/* Hover */
.ui.red.button:hover {
  background: var(--color-p0-status-error-200) !important;
  border-color: var(--color-p0-status-error-500) !important;
  color: var(--color-error-text) !important;
}

/* Active / pressed */
.ui.red.button:active,
.ui.red.button.active {
  background: var(--color-p0-status-error-500) !important;
  border-color: var(--color-p0-status-error-700) !important;
  color: var(--color-white) !important;
}

/* Icons inside */
.ui.red.button svg,
.ui.red.button svg path {
  fill: currentColor !important;
}

/* ========================================
   Global confirm-delete modals
   Covers: #delete-token, #delete-ssh, and any .g-modal-confirm.delete
   ======================================== */

.ui.g-modal-confirm.delete.modal {
  background: var(--color-white) !important;
  border: 1px solid var(--color-error-border) !important;
  box-shadow: 0 10px 30px rgba(0,0,0,0.15);
}

/* Header */
.ui.g-modal-confirm.delete.modal > .header {
  background: var(--color-error-bg) !important;
  color: var(--color-error-text) !important;
  border-bottom: 1px solid var(--color-error-border) !important;
}

.ui.g-modal-confirm.delete.modal > .header svg,
.ui.g-modal-confirm.delete.modal > .header svg path {
  fill: var(--color-error-text) !important;
}

/* Content */
.ui.g-modal-confirm.delete.modal > .content {
  background: var(--color-white) !important;
  color: var(--color-p0-ink-900) !important;
}

/* Message paragraph */
.ui.g-modal-confirm.delete.modal > .content > p {
  background: var(--color-error-bg) !important;
  border: 1px solid var(--color-error-border) !important;
  color: var(--color-error-text) !important;
  padding: 0.75rem 1rem;
  border-radius: 4px;
}

/* Actions bar */
.ui.g-modal-confirm.delete.modal > .actions {
  background: var(--color-p0-surface-100) !important;
  border-top: 1px solid var(--color-p0-surface-300) !important;
}

/* Cancel button */
.ui.g-modal-confirm.delete.modal > .actions .ui.cancel.button {
  background: var(--color-p0-surface-200) !important;
  color: var(--color-p0-ink-900) !important;
  border: 1px solid var(--color-p0-surface-400) !important;
}

.ui.g-modal-confirm.delete.modal > .actions .ui.cancel.button:hover {
  background: var(--color-p0-surface-300) !important;
}

/* Confirm button */
.ui.g-modal-confirm.delete.modal > .actions .ui.primary.ok.button {
  background: var(--color-p0-aqua-600) !important;
  border: 1px solid var(--color-p0-aqua-600) !important;
  color: var(--color-white) !important;
}

.ui.g-modal-confirm.delete.modal > .actions .ui.primary.ok.button:hover {
  background: var(--color-p0-aqua-700) !important;
  border-color: var(--color-p0-aqua-700) !important;
}

/* ========================================
   CodeMirror selection visibility (repo file editor)
   Fix: selection was white on white due to overridden selection color
   ======================================== */

/* Main selection */
.page-content.repository.file.editor .cm-editor .cm-selectionBackground {
  background: rgba(17, 182, 167, 0.28) !important; /* p0-aqua on white */
}

/* Fallback selection (some CM themes use this class) */
.page-content.repository.file.editor .cm-editor .cm-content ::selection {
  background: rgba(17, 182, 167, 0.28) !important;
  color: var(--color-p0-ink-900) !important;
}

/* Active line highlight (optional but usually related to "no visible cursor/line") */
.page-content.repository.file.editor .cm-editor .cm-activeLine {
  background: var(--color-p0-surface-100) !important;
}

/* Caret */
.page-content.repository.file.editor .cm-editor .cm-cursor {
  border-left-color: var(--color-p0-ink-900) !important;
}

/* ========================================
   FINAL OVERRIDE - Text Selection Fix
   ======================================== */

:where(*) {
  -webkit-user-select: text !important;
  user-select: text !important;
}

/* Only if needed for the broken area: limit this selector */
:where(body) {
  pointer-events: auto !important;
}

::selection {
  background: var(--color-p0-surface-300) !important;
  color: inherit !important;
}