/* ══════════════════════════════════════════════════════
   DragonX Gitea Theme — custom.css
   Color palette from dragonx.is
   Place at: $GITEA_CUSTOM/public/assets/css/custom.css
   ══════════════════════════════════════════════════════ */

/* ── Blurred Background Image Layer ───────────────── */
body::before {
  content: '';
  position: fixed;
  top: -10%;
  left: -10%;
  width: 120%;
  height: 120%;
  background: url('/assets/img/bg.jpg') center/cover no-repeat;
  filter: blur(50px) brightness(0.35);
  transform: scale(1.15);
  pointer-events: none;
  z-index: -2;
}

/* ── Win11 Mica-style Noise — clipped to UI elements only ── */
.ui.segment,
.ui.attached.segment,
.ui.attached.header,
.ui.top.attached.header,
.ui.table,
.ui.modal,
.ui.modal > .header,
.ui.modal > .actions,
.ui.message,
.ui.popup,
.ui.button,
.ui.label,
.ui.input input,
.ui.form input,
.ui.form textarea,
.ui.form select,
.ui.tabular.menu .active.item,
.secondary-nav,
.ui.segment.sub-menu.repository-menu,
.repo-button-row,
#repo-files-table,
.tab-size-4.non-diff-file-content,
.repository .diff-file-box,
.code-view,
#navbar,
footer.page-footer,
pre, .highlight {
  position: relative;
}

.ui.segment::after,
.ui.attached.segment::after,
.ui.attached.header::after,
.ui.top.attached.header::after,
.ui.table::after,
.ui.modal::after,
.ui.modal > .header::after,
.ui.modal > .actions::after,
.ui.message::after,
.ui.popup::after,
.ui.button::after,
.ui.label::after,
.ui.input input::after,
.ui.tabular.menu .active.item::after,
.secondary-nav::after,
.ui.segment.sub-menu.repository-menu::after,
.repo-button-row::after,
#repo-files-table::after,
.tab-size-4.non-diff-file-content::after,
.repository .diff-file-box::after,
.code-view::after,
#navbar::after,
footer.page-footer::after,
pre::after, .highlight::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");
  background-repeat: repeat;
  background-size: 200px 200px;
  opacity: 0.06;
  mix-blend-mode: luminosity;
  pointer-events: none;
  z-index: 2147483647;
  border-radius: inherit;
}

/* ── Global Body ──────────────────────────────────── */
body {
  background: #0a0a0d !important;
  color: #e2e2f0 !important;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

/* Ensure all content sits above the background layers */
body > * {
  z-index: 1;
}

/* ── Navbar ───────────────────────────────────────── */
.ui.secondary.menu.navbar,
nav.navbar,
.gitea-navbar,
#navbar {
  background: rgba(10, 10, 13, 0.75) !important;
  backdrop-filter: blur(24px) saturate(1.4);
  -webkit-backdrop-filter: blur(24px) saturate(1.4);
  border-bottom: 1px solid rgba(255, 90, 16, 0.10) !important;
  box-shadow: 0 2px 24px rgba(0, 0, 0, 0.5);
  z-index: 100 !important;
}

.ui.secondary.menu.navbar .item,
.gitea-navbar .item {
  color: #d8d8de !important;
  transition: color 0.2s ease;
}

.ui.secondary.menu.navbar .item:hover,
.ui.secondary.menu.navbar .item.active,
.gitea-navbar .item:hover,
.gitea-navbar .item.active {
  color: #ff7d36 !important;
}

/* ── Navbar Layout: 3-column with centered DragonX ── */
#navbar {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
}

.navbar-center {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
}

.dragonx-home-btn {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem 0.6rem;
  font-weight: 700;
  font-size: 1rem;
  color: #fff !important;
  text-decoration: none !important;
  background: transparent !important;
  border: none !important;
  transition: all 0.25s ease;
}

.dragonx-home-btn:hover {
  color: #ff7d36 !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

.dragonx-home-btn img {
  width: 22px;
  height: 22px;
}

.dragonx-home-btn span {
  background: linear-gradient(135deg, #ff5a10, #ff7d36);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ── Links ────────────────────────────────────────── */
a {
  color: #ff7d36;
  transition: color 0.2s ease;
}

a:hover {
  color: #ffaa70;
}

/* ── Buttons (primary) ────────────────────────────── */
.ui.primary.button,
.ui.primary.buttons .button {
  background: linear-gradient(135deg, #ff5a10, #f23b3b) !important;
  border: none !important;
  color: #fff !important;
  box-shadow: 0 2px 16px rgba(255, 90, 16, 0.3);
  transition: box-shadow 0.2s ease, transform 0.15s ease;
}

.ui.primary.button:hover,
.ui.primary.buttons .button:hover {
  background: linear-gradient(135deg, #ff7d36, #fa6b6b) !important;
  box-shadow: 0 4px 24px rgba(255, 90, 16, 0.5);
  transform: translateY(-1px);
}

/* ── Buttons (basic / secondary) ──────────────────── */
.ui.basic.button,
.ui.button {
  background: rgba(46, 46, 52, 0.7) !important;
  color: #d8d8de !important;
  border: 1px solid rgba(255, 255, 255, 0.10) !important;
}

.ui.basic.button:hover,
.ui.button:hover {
  background: rgba(62, 62, 68, 0.85) !important;
  color: #ffffff !important;
  border-color: rgba(255, 90, 16, 0.3) !important;
}

/* Don't override primary button styles */
.ui.primary.button,
.ui.primary.buttons .button {
  border: none !important;
}

/* ── Green / success buttons → lava tint ──────────── */
.ui.green.button,
.ui.positive.button {
  background: linear-gradient(135deg, #c72d07, #9e250e) !important;
  color: #fff !important;
}

/* ── Labels / tags ────────────────────────────────── */
.ui.label {
  background: rgba(255, 90, 16, 0.12) !important;
  color: #ffaa70 !important;
  border: 1px solid rgba(255, 90, 16, 0.20) !important;
}

.ui.green.label {
  background: rgba(199, 45, 7, 0.18) !important;
  color: #ff7d36 !important;
  border-color: rgba(199, 45, 7, 0.35) !important;
}

/* ── Segments / boxes / cards ─────────────────────── 
   KEY: Much lighter than body for contrast           */
.ui.segment,
.ui.attached.segment {
  background: rgba(30, 30, 38, 0.80) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3),
              inset 0 1px 0 rgba(255, 255, 255, 0.06);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.ui.attached.header,
.ui.top.attached.header {
  background: rgba(35, 35, 43, 0.90) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  color: #ffffff !important;
}

/* ── Repository header ────────────────────────────── */
.repo-header {
  background: rgba(25, 25, 33, 0.85) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
  backdrop-filter: blur(16px);
}

/* ── Home page hero / landing ─────────────────────── */
.hero h1, .hero h2 {
  color: #fff !important;
}

.hero .octicon {
  color: #ff7d36 !important;
}

/* ── Tab menus ────────────────────────────────────── */
.ui.tabular.menu {
  border-bottom-color: rgba(255, 255, 255, 0.08) !important;
}

.ui.tabular.menu .active.item {
  background: rgba(35, 35, 43, 0.85) !important;
  border-color: rgba(255, 255, 255, 0.10) !important;
  border-bottom-color: transparent !important;
  color: #ff7d36 !important;
}

.ui.tabular.menu .item {
  color: #8d8d9d !important;
}

.ui.tabular.menu .item:hover {
  color: #ff7d36 !important;
}

/* ── Secondary / pointing menus ───────────────────── */
.ui.secondary.pointing.menu {
  border-bottom-color: rgba(255, 255, 255, 0.06) !important;
}

.ui.secondary.pointing.menu .active.item {
  border-color: #ff5a10 !important;
  color: #ff7d36 !important;
}

.ui.secondary.pointing.menu .item {
  color: #b5b5bf !important;
}

.ui.secondary.pointing.menu .item:hover {
  color: #ffaa70 !important;
}

/* ── Tables ───────────────────────────────────────── */
.ui.table {
  background: rgba(30, 30, 38, 0.65) !important;
  color: #e2e2f0 !important;
  border: 1px solid rgba(255, 255, 255, 0.06) !important;
}

.ui.table thead th {
  background: rgba(40, 40, 48, 0.85) !important;
  color: #d8d8de !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
}

.ui.table tbody td {
  border-top: 1px solid rgba(255, 255, 255, 0.04) !important;
}

.ui.table tbody tr:hover {
  background: rgba(255, 90, 16, 0.06) !important;
}

/* ── File list (repository) ───────────────────────── */
#repo-files-table .name a {
  color: #ff7d36 !important;
}

#repo-files-table .name a:hover {
  color: #ffaa70 !important;
}

/* ── Code / Markdown ──────────────────────────────── */
.markup code,
code {
  background: rgba(255, 255, 255, 0.08) !important;
  color: #ff9d5c !important;
  border-radius: 0.35rem;
  padding: 0.15rem 0.4rem;
}

pre, .highlight {
  background: rgba(10, 10, 13, 0.85) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 0.5rem;
}

/* ── Diff / code review ──────────────────────────── */
.diff-file-header {
  background: rgba(35, 35, 43, 0.90) !important;
}

/* ── Input fields ─────────────────────────────────── */
.ui.input input,
.ui.form input,
.ui.form textarea,
.ui.form select,
textarea,
input[type="text"],
input[type="password"],
input[type="email"],
input[type="search"] {
  background: rgba(20, 20, 26, 0.80) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  color: #e2e2f0 !important;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.ui.input input:focus,
.ui.form input:focus,
.ui.form textarea:focus,
textarea:focus,
input:focus {
  border-color: rgba(255, 90, 16, 0.5) !important;
  box-shadow: 0 0 0 3px rgba(255, 90, 16, 0.12) !important;
}

/* ── Dropdown menus ───────────────────────────────── */
.ui.dropdown .menu {
  background: rgba(25, 25, 33, 0.95) !important;
  border: 1px solid rgba(255, 255, 255, 0.10) !important;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(16px);
  z-index: 1000 !important;
}

.ui.dropdown.active,
.ui.dropdown.visible {
  z-index: 1000 !important;
}

.ui.dropdown .menu > .item {
  color: #d8d8de !important;
  border-top: 1px solid rgba(255, 255, 255, 0.04) !important;
}

.ui.dropdown .menu > .item:hover {
  background: rgba(255, 90, 16, 0.10) !important;
  color: #ff7d36 !important;
}

/* ── Popup / tooltips ─────────────────────────────── */
.ui.popup {
  background: rgba(30, 30, 38, 0.95) !important;
  border: 1px solid rgba(255, 255, 255, 0.10) !important;
  color: #e2e2f0 !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}

/* ── Footer ───────────────────────────────────────── */
footer,
.page-footer {
  background: rgba(10, 10, 13, 0.85) !important;
  border-top: 1px solid rgba(255, 255, 255, 0.06) !important;
  color: #8d8d9d !important;
  backdrop-filter: blur(16px);
}

/* ── Pagination ───────────────────────────────────── */
.ui.pagination.menu .active.item {
  background: rgba(255, 90, 16, 0.18) !important;
  color: #ff7d36 !important;
}

.ui.pagination.menu .item {
  background: rgba(30, 30, 38, 0.7) !important;
  color: #b5b5bf !important;
}

/* ── Messages / alerts ────────────────────────────── */
.ui.message {
  background: rgba(35, 35, 43, 0.80) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  color: #e2e2f0 !important;
  box-shadow: none !important;
}

.ui.info.message {
  border-left: 3px solid #ff5a10 !important;
}

.ui.success.message,
.ui.positive.message {
  border-left: 3px solid #ffcc11 !important;
}

.ui.error.message,
.ui.negative.message {
  border-left: 3px solid #f23b3b !important;
}

.ui.warning.message {
  border-left: 3px solid #ffcc11 !important;
}

/* ── Scrollbar ────────────────────────────────────── */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: rgba(20, 20, 25, 0.5);
}

::-webkit-scrollbar-thumb {
  background: rgba(255, 90, 16, 0.25);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 90, 16, 0.4);
}

/* ── Dashboard ────────────────────────────────────── */
.dashboard .activity,
.dashboard .feeds {
  color: #e2e2f0 !important;
}

/* ── Issue / PR list ──────────────────────────────── */
.issue.list > .item {
  border-bottom: 1px solid rgba(255, 255, 255, 0.04) !important;
}

/* ── Activity heatmap → lava tones ────────────────── */
.heatmap-color-0 { fill: rgba(30, 30, 38, 0.6) !important; }
.heatmap-color-1 { fill: rgba(255, 90, 16, 0.25) !important; }
.heatmap-color-2 { fill: rgba(255, 90, 16, 0.45) !important; }
.heatmap-color-3 { fill: rgba(255, 90, 16, 0.65) !important; }
.heatmap-color-4 { fill: #ff5a10 !important; }

/* ── Commit graph colors ──────────────────────────── */
.color1 { color: #ff5a10 !important; }
.color2 { color: #f23b3b !important; }
.color3 { color: #ffcc11 !important; }
.color4 { color: #ff7d36 !important; }

/* ── Selection highlight ──────────────────────────── */
::selection {
  background: rgba(255, 90, 16, 0.3);
  color: #fff;
}

/* ── Modal ────────────────────────────────────────── */
.ui.modal {
  background: rgba(25, 25, 33, 0.95) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  backdrop-filter: blur(16px);
}

.ui.modal > .header {
  background: rgba(35, 35, 43, 0.95) !important;
  color: #fff !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
}

.ui.modal > .actions {
  background: rgba(35, 35, 43, 0.95) !important;
  border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
}

/* ── Dimmer ───────────────────────────────────────── */
.ui.dimmer {
  background: rgba(5, 5, 10, 0.85) !important;
}

/* ── Empty states ─────────────────────────────────── */
.empty-placeholder {
  color: #8d8d9d !important;
}

/* ── Misc contrast boosts ─────────────────────────── */
.ui.divider {
  border-color: rgba(255, 255, 255, 0.06) !important;
}

.ui.list .item {
  color: #d8d8de !important;
}

h1, h2, h3, h4, h5, h6 {
  color: #ffffff !important;
}

.ui.header {
  color: #ffffff !important;
}

.ui.header .sub.header {
  color: #b5b5bf !important;
}

/* ── Repository description ───────────────────────── */
.repo-description {
  color: #b5b5bf !important;
}

/* ── Breadcrumb ───────────────────────────────────── */
.breadcrumb a {
  color: #ff7d36 !important;
}

.breadcrumb .divider {
  color: #666679 !important;
}

/* ── Hide tabs divider line ───────────────────────── */
.ui.tabs.divider {
  display: none !important;
}

/* ── Secondary Nav (repo header area) ─────────────── */
.secondary-nav {
  background: rgba(18, 18, 24, 0.94) !important;
  backdrop-filter: blur(24px) saturate(1.3);
  -webkit-backdrop-filter: blur(24px) saturate(1.3);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
  z-index: 50 !important;
}

/* ── Repo Header (name + description bar) ─────────── */
.repo-header {
  background: transparent !important;
  border: none !important;
  padding-top: 0.75rem !important;
  padding-bottom: 0.75rem !important;
}

.repo-header a {
  color: #ff7d36 !important;
}

.repo-header a:hover {
  color: #ffaa70 !important;
}

/* ── Repository Tab Menu (Code/Issues/PRs/etc) ────── */
.ui.segment.sub-menu.repository-menu {
  background: rgba(28, 28, 36, 0.94) !important;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: none !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
  box-shadow: none !important;
  margin: 0 !important;
  border-radius: 0 !important;
}

.ui.segment.sub-menu.repository-menu .item {
  color: #8d8d9d !important;
  border-bottom: 2px solid transparent !important;
  padding: 0.7em 1em !important;
  transition: color 0.2s ease, border-color 0.2s ease;
}

.ui.segment.sub-menu.repository-menu .item:hover {
  color: #ffaa70 !important;
  border-bottom-color: rgba(255, 90, 16, 0.3) !important;
}

.ui.segment.sub-menu.repository-menu .item.active {
  color: #ff7d36 !important;
  border-bottom-color: #ff5a10 !important;
  background: transparent !important;
}

/* Tab item icons match text color */
.ui.segment.sub-menu.repository-menu .item .svg {
  color: inherit !important;
}

/* Tab count labels */
.ui.segment.sub-menu.repository-menu .item .ui.label {
  background: rgba(255, 90, 16, 0.10) !important;
  color: #ff7d36 !important;
  border: none !important;
  font-size: 0.75em !important;
}

/* ── Repo segments wrapper ────────────────────────── */
.ui.segments.repository-summary {
  border: none !important;
  box-shadow: none !important;
  background: transparent !important;
}

/* ── Repo Button Row (Watch/Star/Fork) ────────────── */
.repo-button-row {
  background: transparent !important;
}

.repo-button-row .ui.button,
.repo-button-row .ui.basic.button {
  background: rgba(46, 46, 52, 0.6) !important;
  color: #b5b5bf !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
}

.repo-button-row .ui.button:hover,
.repo-button-row .ui.basic.button:hover {
  background: rgba(62, 62, 68, 0.8) !important;
  color: #ff7d36 !important;
  border-color: rgba(255, 90, 16, 0.25) !important;
}