/* ===== FORGE — Custom Theme ===== */

:root {
  --color-accent:        #7c6af7;
  --color-accent-hover:  #9b8dfb;
  --color-accent-dim:    rgba(124, 106, 247, 0.15);
  --color-bg:            #0b0e14;
  --color-bg-surface:    #111520;
  --color-bg-card:       #161b27;
  --color-bg-hover:      #1e2436;
  --color-border:        #1e2740;
  --color-border-light:  #242d42;
  --color-text:          #d4d9e8;
  --color-text-muted:    #6b7799;
  --color-text-strong:   #eef0f8;
  --color-green:         #3dd68c;
  --color-red:           #f47067;
  --color-yellow:        #f5a524;
  --color-blue:          #58a6ff;
  --radius-sm:           6px;
  --radius-md:           10px;
  --radius-lg:           14px;
  --shadow-sm:           0 1px 4px rgba(0,0,0,0.4);
  --shadow-md:           0 4px 16px rgba(0,0,0,0.5);
  --font-sans:           'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono:           'JetBrains Mono', 'Fira Code', 'Cascadia Code', monospace;
}

/* ── Google Fonts ── */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');

/* ── Base ── */
body {
  background: var(--color-bg) !important;
  color: var(--color-text) !important;
  font-family: var(--font-sans) !important;
  font-size: 14px !important;
  -webkit-font-smoothing: antialiased;
}

/* ── Navbar ── */
.ui.menu.navbar,
#navbar {
  background: rgba(11, 14, 20, 0.95) !important;
  border-bottom: 1px solid var(--color-border) !important;
  backdrop-filter: blur(12px) !important;
  box-shadow: none !important;
}

#navbar .item,
.ui.menu.navbar .item {
  color: var(--color-text-muted) !important;
  font-weight: 500 !important;
  transition: color 0.15s ease !important;
}

#navbar .item:hover,
.ui.menu.navbar .item:hover {
  color: var(--color-text-strong) !important;
  background: transparent !important;
}

/* Site name / logo */
#navbar .brand {
  font-size: 16px !important;
  font-weight: 700 !important;
  letter-spacing: -0.3px !important;
  color: var(--color-text-strong) !important;
}

/* ── Buttons ── */
.ui.button,
.ui.buttons .button {
  border-radius: var(--radius-sm) !important;
  font-weight: 500 !important;
  transition: all 0.15s ease !important;
  border: none !important;
}

.ui.primary.button,
.ui.green.button {
  background: var(--color-accent) !important;
  color: #fff !important;
  box-shadow: 0 0 0 1px rgba(124,106,247,0.3) !important;
}

.ui.primary.button:hover,
.ui.green.button:hover {
  background: var(--color-accent-hover) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 12px rgba(124,106,247,0.35) !important;
}

.ui.basic.button,
.ui.secondary.button {
  background: var(--color-bg-card) !important;
  color: var(--color-text) !important;
  border: 1px solid var(--color-border-light) !important;
}

.ui.basic.button:hover,
.ui.secondary.button:hover {
  background: var(--color-bg-hover) !important;
  border-color: var(--color-accent) !important;
}

/* ── Cards / Segments ── */
.ui.segment,
.ui.card,
.ui.cards > .card {
  background: var(--color-bg-card) !important;
  border: 1px solid var(--color-border) !important;
  border-radius: var(--radius-md) !important;
  box-shadow: var(--shadow-sm) !important;
}

/* ── Repository list ── */
.repository.list .item,
#dashboard .repository.list .item {
  border-bottom: 1px solid var(--color-border) !important;
  padding: 14px 0 !important;
  transition: background 0.1s ease !important;
}

.item:hover {
  background: var(--color-bg-hover) !important;
}

/* ── Repo header ── */
.repository .header-wrapper,
#repo-header {
  background: var(--color-bg-surface) !important;
  border-bottom: 1px solid var(--color-border) !important;
}

/* ── File tree / code view ── */
.repository.file.list .table.git-notes,
.repository .ui.attached.table {
  background: var(--color-bg-card) !important;
  border: 1px solid var(--color-border) !important;
  border-radius: var(--radius-md) !important;
  overflow: hidden !important;
}

.repository .ui.attached.table thead th {
  background: var(--color-bg-surface) !important;
  border-bottom: 1px solid var(--color-border) !important;
  color: var(--color-text-muted) !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  font-size: 11px !important;
  letter-spacing: 0.5px !important;
}

/* ── Code / pre ── */
pre, code, .code {
  font-family: var(--font-mono) !important;
  font-size: 13px !important;
}

.code-view pre,
#diff-file-box pre {
  background: var(--color-bg) !important;
  border-radius: var(--radius-sm) !important;
}

/* ── Inputs ── */
.ui.input input,
.ui.form input[type="text"],
.ui.form input[type="password"],
.ui.form input[type="email"],
.ui.form textarea,
.ui.form select {
  background: var(--color-bg) !important;
  border: 1px solid var(--color-border-light) !important;
  border-radius: var(--radius-sm) !important;
  color: var(--color-text-strong) !important;
  transition: border-color 0.15s ease !important;
}

.ui.input input:focus,
.ui.form input:focus,
.ui.form textarea:focus {
  border-color: var(--color-accent) !important;
  box-shadow: 0 0 0 3px var(--color-accent-dim) !important;
  outline: none !important;
}

/* ── Labels / badges ── */
.ui.label {
  background: var(--color-bg-hover) !important;
  color: var(--color-text) !important;
  border: 1px solid var(--color-border-light) !important;
  border-radius: 20px !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  padding: 3px 10px !important;
}

.ui.green.label  { background: rgba(61,214,140,0.15)  !important; color: var(--color-green)  !important; border-color: rgba(61,214,140,0.3)  !important; }
.ui.red.label    { background: rgba(244,112,103,0.15) !important; color: var(--color-red)    !important; border-color: rgba(244,112,103,0.3) !important; }
.ui.yellow.label { background: rgba(245,165,36,0.15)  !important; color: var(--color-yellow) !important; border-color: rgba(245,165,36,0.3)  !important; }
.ui.blue.label   { background: rgba(88,166,255,0.15)  !important; color: var(--color-blue)   !important; border-color: rgba(88,166,255,0.3)  !important; }
.ui.purple.label { background: var(--color-accent-dim) !important; color: var(--color-accent) !important; border-color: rgba(124,106,247,0.3) !important; }

/* ── Tables ── */
.ui.table {
  background: var(--color-bg-card) !important;
  border: 1px solid var(--color-border) !important;
  color: var(--color-text) !important;
}

.ui.table thead th {
  background: var(--color-bg-surface) !important;
  color: var(--color-text-muted) !important;
  border-bottom: 1px solid var(--color-border) !important;
}

.ui.table tr:hover td {
  background: var(--color-bg-hover) !important;
}

.ui.table td {
  border-top: 1px solid var(--color-border) !important;
}

/* ── Tabs / menus ── */
.ui.tabular.menu .active.item,
.ui.pointing.menu .active.item {
  border-bottom: 2px solid var(--color-accent) !important;
  color: var(--color-accent) !important;
  background: transparent !important;
  font-weight: 600 !important;
}

.ui.menu .item {
  color: var(--color-text-muted) !important;
}

.ui.menu .item:hover {
  color: var(--color-text) !important;
  background: var(--color-bg-hover) !important;
}

/* ── Sign-in page ── */
.page-content.user.signin,
.page-content.user.signup {
  background: var(--color-bg) !important;
}

.page-content.user.signin .ui.segment,
.page-content.user.signup .ui.segment {
  background: var(--color-bg-card) !important;
  border: 1px solid var(--color-border-light) !important;
  border-radius: var(--radius-lg) !important;
  box-shadow: var(--shadow-md) !important;
  padding: 32px !important;
}

/* ── Diff view ── */
.diff-file-box {
  border: 1px solid var(--color-border) !important;
  border-radius: var(--radius-md) !important;
  overflow: hidden !important;
}

.diff-file-header {
  background: var(--color-bg-surface) !important;
  border-bottom: 1px solid var(--color-border) !important;
  padding: 10px 16px !important;
}

.add-code  { background: rgba(61, 214, 140, 0.08) !important; }
.del-code  { background: rgba(244, 112, 103, 0.08) !important; }

/* ── Sidebar ── */
.ui.stackable.grid > .column.sidebar {
  background: transparent !important;
}

/* ── Footer ── */
#footer {
  background: var(--color-bg-surface) !important;
  border-top: 1px solid var(--color-border) !important;
  color: var(--color-text-muted) !important;
  font-size: 12px !important;
}

/* ── Scrollbar ── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--color-bg); }
::-webkit-scrollbar-thumb { background: var(--color-border-light); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--color-text-muted); }

/* ── Misc polish ── */
a { color: var(--color-accent) !important; transition: color 0.15s ease !important; }
a:hover { color: var(--color-accent-hover) !important; }

.divider { border-color: var(--color-border) !important; }

.ui.statistic > .value { color: var(--color-text-strong) !important; }
.ui.statistic > .label { color: var(--color-text-muted) !important; }