/* ============================================================
   FLOKANI.DIGITAL — Gitea Custom Theme
   Primary:   Space Grotesk
   Secondary: Playfair Display
   Petrol:    #1C3546
   ============================================================ */

:root {
  --fl-petrol:       #1C3546;
  --fl-petrol-dark:  #152836;
  --fl-petrol-light: #2a4f66;
  --fl-petrol-muted: rgba(28, 53, 70, 0.08);
  --fl-black:        #000000;
  --fl-white:        #ffffff;
  --fl-grey:         #f4f5f7;
  --fl-border:       rgba(28, 53, 70, 0.15);
}

/* ── Fonts ─────────────────────────────────────────────────── */
body,
.ui,
input,
button,
select,
textarea,
.item,
.menu,
.label,
.text,
p,
td,
th,
li,
span {
  font-family: 'Space Grotesk', system-ui, sans-serif !important;
}

h1, h2, h3,
.ui.header,
.signin-container h1,
.page-header h1,
.repository .ui.header,
.dashboard .ui.header {
  font-family: 'Playfair Display', Georgia, serif !important;
  font-weight: 600 !important;
}

/* ── Navigation Bar ─────────────────────────────────────────── */
.full.height > .navbar,
#navbar,
nav#navbar {
  background-color: var(--fl-petrol) !important;
  border-bottom: none !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.25) !important;
}

#navbar .item,
#navbar a.item,
#navbar .menu > .item {
  color: rgba(255,255,255,0.85) !important;
  font-family: 'Space Grotesk', sans-serif !important;
  font-weight: 500 !important;
  letter-spacing: 0.01em;
}

#navbar .item:hover,
#navbar a.item:hover {
  color: var(--fl-white) !important;
  background-color: rgba(255,255,255,0.1) !important;
}

/* Brand/Logo text in navbar */
#navbar .header.item,
#navbar a.brand {
  font-family: 'Playfair Display', serif !important;
  font-weight: 700 !important;
  font-size: 1.1rem !important;
  color: var(--fl-white) !important;
  letter-spacing: 0.02em;
}

/* ── Buttons ────────────────────────────────────────────────── */
.ui.primary.button,
.ui.positive.button,
.ui.green.button {
  background-color: var(--fl-petrol) !important;
  border-color: var(--fl-petrol) !important;
  color: var(--fl-white) !important;
  font-family: 'Space Grotesk', sans-serif !important;
  font-weight: 600 !important;
  letter-spacing: 0.03em;
  border-radius: 6px !important;
  transition: background-color 0.2s ease, box-shadow 0.2s ease !important;
}

.ui.primary.button:hover,
.ui.positive.button:hover,
.ui.green.button:hover {
  background-color: var(--fl-petrol-light) !important;
  box-shadow: 0 4px 12px rgba(28, 53, 70, 0.35) !important;
}

.ui.basic.button,
.ui.button {
  border-radius: 6px !important;
  font-family: 'Space Grotesk', sans-serif !important;
  font-weight: 500 !important;
}

/* ── Links ──────────────────────────────────────────────────── */
a {
  color: var(--fl-petrol) !important;
}

a:hover {
  color: var(--fl-petrol-light) !important;
}

/* ── Sign-in / Auth Pages ───────────────────────────────────── */
body.page-signin,
body.page-sign-up {
  background-color: var(--fl-grey) !important;
}

.signin-container,
.page-content.signin {
  background-color: var(--fl-grey) !important;
}

.signin-container .ui.segment,
.ui.middle.very.relaxed.page.grid .column > .ui.segment {
  border-top: 3px solid var(--fl-petrol) !important;
  border-radius: 8px !important;
  box-shadow: 0 8px 32px rgba(28, 53, 70, 0.12) !important;
}

/* Sign-in header / instance name */
.signin-container h1,
.ui.middle.very.relaxed.page.grid h1 {
  font-family: 'Playfair Display', serif !important;
  color: var(--fl-petrol) !important;
  font-size: 1.9rem !important;
}

/* ── Form Fields ────────────────────────────────────────────── */
.ui.input input,
.ui.form input[type="text"],
.ui.form input[type="password"],
.ui.form input[type="email"],
.ui.form textarea,
.ui.form select {
  border-color: var(--fl-border) !important;
  border-radius: 6px !important;
  font-family: 'Space Grotesk', sans-serif !important;
}

.ui.input input:focus,
.ui.form input:focus,
.ui.form textarea:focus {
  border-color: var(--fl-petrol) !important;
  box-shadow: 0 0 0 2px rgba(28, 53, 70, 0.15) !important;
}

/* ── Labels & Badges ────────────────────────────────────────── */
.ui.label,
.ui.tiny.label {
  font-family: 'Space Grotesk', sans-serif !important;
  font-weight: 500 !important;
}

.ui.blue.label,
.ui.teal.label {
  background-color: var(--fl-petrol) !important;
  border-color: var(--fl-petrol) !important;
  color: var(--fl-white) !important;
}

/* ── Repository List ─────────────────────────────────────────── */
.repository.list .item .header,
.explore.repos .item .header {
  font-family: 'Space Grotesk', sans-serif !important;
  font-weight: 600 !important;
  color: var(--fl-petrol) !important;
}

/* ── Dashboard ───────────────────────────────────────────────── */
.dashboard .ui.card .header {
  font-family: 'Playfair Display', serif !important;
  color: var(--fl-petrol) !important;
}

/* ── Statistic / Counter Numbers ─────────────────────────────── */
.ui.statistic > .value,
.ui.statistics .statistic > .value {
  color: var(--fl-petrol) !important;
  font-family: 'Space Grotesk', sans-serif !important;
  font-weight: 700 !important;
}

/* ── Footer ──────────────────────────────────────────────────── */
#footer {
  background-color: var(--fl-petrol) !important;
  color: rgba(255,255,255,0.7) !important;
  border-top: none !important;
}

#footer a,
#footer .ui.container a {
  color: rgba(255,255,255,0.85) !important;
}

#footer a:hover {
  color: var(--fl-white) !important;
}

/* ── Code / Diff Views ───────────────────────────────────────── */
code, pre, .code-view {
  font-family: 'JetBrains Mono', 'Fira Code', 'Cascadia Code', monospace !important;
}

/* ── Scrollbar (subtle petrol accent) ───────────────────────── */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
::-webkit-scrollbar-track {
  background: var(--fl-grey);
}
::-webkit-scrollbar-thumb {
  background: var(--fl-petrol-muted);
  border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--fl-petrol);
}

/* ── Menu / Dropdown ─────────────────────────────────────────── */
.ui.menu .active.item,
.ui.menu .item.active {
  color: var(--fl-petrol) !important;
  border-color: var(--fl-petrol) !important;
}

.ui.pointing.menu .active.item::after,
.ui.tabular.menu .active.item {
  border-color: var(--fl-petrol) !important;
}

/* ── Navbar Dropdowns — Petrol background, white text ───────── */
#navbar .ui.dropdown .menu,
#navbar .ui.dropdown .scrolling.menu,
.navbar .dropdown .menu {
  background-color: var(--fl-petrol-dark, #152836) !important;
  border: 1px solid rgba(255,255,255,0.1) !important;
  border-radius: 6px !important;
  box-shadow: 0 8px 24px rgba(0,0,0,0.35) !important;
  margin-top: 2px !important;
}

#navbar .ui.dropdown .menu .item,
#navbar .ui.dropdown .menu a.item,
#navbar .ui.dropdown .menu .text,
.navbar .dropdown .menu .item {
  color: rgba(255,255,255,0.85) !important;
  font-family: 'Space Grotesk', sans-serif !important;
  font-weight: 400 !important;
  border-color: rgba(255,255,255,0.06) !important;
}

#navbar .ui.dropdown .menu .item:hover,
#navbar .ui.dropdown .menu a.item:hover,
.navbar .dropdown .menu .item:hover {
  background-color: rgba(255,255,255,0.08) !important;
  color: #ffffff !important;
}

#navbar .ui.dropdown .menu .divider {
  border-color: rgba(255,255,255,0.08) !important;
}

#navbar .ui.dropdown .menu .header {
  color: rgba(255,255,255,0.4) !important;
  font-size: 0.7rem !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
}

/* ── Issue / PR Labels ───────────────────────────────────────── */
.label-list .label {
  border-radius: 4px !important;
}

/* ── Admin / Settings Pages ──────────────────────────────────── */
.admin.dashboard .ui.statistic .value {
  color: var(--fl-petrol) !important;
}

/* ── Page header accent line ─────────────────────────────────── */
.repository.file.list .branch-dropdown-menu,
.ui.top.attached.header {
  border-top: 2px solid var(--fl-petrol) !important;
}