/* GitMorph Custom CSS Overrides - GitHub UI Clone */
/* Version: 2.0 - Full GitHub UI Matching */
/* Last Updated: 2026-01-16 */

/* ==========================================================================
   1. GLOBAL VARIABLES & TYPOGRAPHY
   ========================================================================== */

:root {
  /* GitHub typography */
  --font-size-small: 12px;
  --font-size-normal: 14px;
  --font-size-medium: 16px;
  --font-size-large: 20px;
  --font-size-xl: 24px;
  --font-size-xxl: 32px;

  /* GitHub spacing */
  --spacing-1: 4px;
  --spacing-2: 8px;
  --spacing-3: 16px;
  --spacing-4: 24px;
  --spacing-5: 32px;
  --spacing-6: 40px;

  /* GitHub border radius */
  --radius-small: 3px;
  --radius-medium: 6px;
  --radius-large: 12px;

  /* GitHub-specific colors for dark mode */
  --gh-header-bg: #010409;
  --gh-canvas-default: #0d1117;
  --gh-canvas-subtle: #161b22;
  --gh-canvas-inset: #010409;
  --gh-border-default: #30363d;
  --gh-border-muted: #21262d;
  --gh-fg-default: #e6edf3;
  --gh-fg-muted: #8b949e;
  --gh-fg-subtle: #6e7681;
  --gh-accent-fg: #58a6ff;
  --gh-accent-emphasis: #1f6feb;
  --gh-success-fg: #3fb950;
  --gh-success-emphasis: #238636;
  --gh-attention-fg: #d29922;
  --gh-danger-fg: #f85149;
  --gh-done-fg: #a371f7;

  /* GitHub button colors */
  --gh-btn-bg: #21262d;
  --gh-btn-border: #30363d;
  --gh-btn-hover-bg: #30363d;
  --gh-btn-hover-border: #8b949e;
  --gh-btn-primary-bg: #238636;
  --gh-btn-primary-hover-bg: #2ea043;

  /* Override default Gitea colors */
  --color-logo: #0969da !important;
  --color-primary: #238636 !important;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji" !important;
  font-size: var(--font-size-normal) !important;
  line-height: 1.5 !important;
}

/* ==========================================================================
   2. NAVIGATION BAR - GitHub Header Style
   ========================================================================== */

#navbar {
  background: var(--gh-header-bg) !important;
  border-bottom: 1px solid var(--gh-border-default) !important;
  height: 62px !important;
  padding: 0 16px !important;
  box-shadow: none !important;
}

/* Logo area */
#navbar #navbar-logo {
  padding: 0 !important;
  margin-right: 16px !important;
}

#navbar #navbar-logo .svg {
  width: 32px !important;
  height: 32px !important;
}

/* Nav items styling */
#navbar .navbar-left > .item,
#navbar .navbar-right > .item {
  font-size: var(--font-size-normal) !important;
  font-weight: 600 !important;
  padding: 6px 12px !important;
  border-radius: var(--radius-medium) !important;
  color: var(--gh-fg-default) !important;
}

#navbar .navbar-left > .item:hover,
#navbar .navbar-right > .item:hover,
#navbar a.item:hover,
#navbar button.item:hover {
  background: var(--gh-btn-hover-bg) !important;
  color: var(--gh-fg-default) !important;
}

/* Search bar - GitHub style */
#navbar .search-bar-container,
#navbar .ui.search {
  background: var(--gh-canvas-default) !important;
  border: 1px solid var(--gh-border-default) !important;
  border-radius: var(--radius-medium) !important;
  height: 32px !important;
  min-width: 280px !important;
  padding: 0 12px !important;
  color: var(--gh-fg-muted) !important;
}

#navbar .search-bar-container:focus-within,
#navbar .ui.search:focus-within {
  border-color: var(--gh-accent-fg) !important;
  box-shadow: 0 0 0 3px rgba(31, 111, 235, 0.3) !important;
}

/* ==========================================================================
   3. REPOSITORY PAGE HEADER & TABS
   ========================================================================== */

/* Repository header bar with tabs */
.repo-header,
.repository .header-wrapper {
  background: var(--gh-canvas-default) !important;
  border-bottom: 1px solid var(--gh-border-default) !important;
  padding: 16px 0 0 0 !important;
}

/* Repository tab navigation */
.repo-header .repo-tabs,
.repo-header .tabular.menu,
.repository .tabular.menu,
.ui.secondary.menu.tabular {
  border-bottom: none !important;
  background: transparent !important;
  margin: 0 !important;
  padding: 0 24px !important;
  gap: 0 !important;
}

.repo-header .repo-tabs .item,
.repo-header .tabular.menu .item,
.repository .tabular.menu .item,
.ui.secondary.menu.tabular .item {
  background: transparent !important;
  border: none !important;
  border-bottom: 2px solid transparent !important;
  border-radius: var(--radius-medium) var(--radius-medium) 0 0 !important;
  color: var(--gh-fg-default) !important;
  font-size: var(--font-size-normal) !important;
  font-weight: 400 !important;
  padding: 8px 16px !important;
  margin: 0 !important;
  margin-bottom: -1px !important;
}

.repo-header .repo-tabs .item:hover,
.repo-header .tabular.menu .item:hover,
.repository .tabular.menu .item:hover,
.ui.secondary.menu.tabular .item:hover {
  background: var(--gh-canvas-subtle) !important;
  border-bottom-color: var(--gh-border-muted) !important;
}

.repo-header .repo-tabs .item.active,
.repo-header .tabular.menu .item.active,
.repository .tabular.menu .item.active,
.ui.secondary.menu.tabular .item.active {
  background: var(--gh-canvas-default) !important;
  border-bottom: 2px solid #f78166 !important;
  font-weight: 600 !important;
}

/* Tab count badges */
.repo-header .item .ui.label,
.repository .tabular.menu .item .ui.label {
  background: var(--gh-canvas-subtle) !important;
  color: var(--gh-fg-default) !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  padding: 0 6px !important;
  margin-left: 6px !important;
  border-radius: 2em !important;
  min-width: 20px !important;
  height: 20px !important;
  line-height: 20px !important;
}

/* ==========================================================================
   4. REPOSITORY BUTTONS (Watch/Fork/Star)
   ========================================================================== */

.repo-buttons .ui.button,
.repo-header-button,
.button-row .ui.button {
  background: var(--gh-btn-bg) !important;
  border: 1px solid var(--gh-btn-border) !important;
  border-radius: var(--radius-medium) !important;
  color: var(--gh-fg-default) !important;
  font-size: var(--font-size-small) !important;
  font-weight: 500 !important;
  padding: 3px 12px !important;
  height: 28px !important;
  line-height: 20px !important;
}

.repo-buttons .ui.button:hover,
.repo-header-button:hover,
.button-row .ui.button:hover {
  background: var(--gh-btn-hover-bg) !important;
  border-color: var(--gh-btn-hover-border) !important;
}

/* Button with count - grouped buttons */
.repo-buttons .ui.labeled.button {
  display: inline-flex !important;
}

.repo-buttons .ui.labeled.button > .button {
  border-top-right-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  border-right: none !important;
}

.repo-buttons .ui.labeled.button > .label {
  border-top-left-radius: 0 !important;
  border-bottom-left-radius: 0 !important;
  background: var(--gh-btn-bg) !important;
  border: 1px solid var(--gh-btn-border) !important;
  border-left: none !important;
  color: var(--gh-fg-default) !important;
  font-weight: 600 !important;
}

/* ==========================================================================
   5. FILE LIST & REPOSITORY CONTENT
   ========================================================================== */

/* Quick guide box for empty repos */
.quick-guide,
.empty-repo-guide,
.ui.segment.empty-repo {
  background: var(--gh-canvas-default) !important;
  border: 1px solid var(--gh-border-default) !important;
  border-radius: var(--radius-medium) !important;
  padding: 24px !important;
  margin: 16px 0 !important;
}

.quick-guide h4,
.empty-repo-guide h4 {
  font-size: var(--font-size-medium) !important;
  font-weight: 600 !important;
  color: var(--gh-fg-default) !important;
  margin-bottom: 16px !important;
}

/* Quick guide command blocks - ensure proper display */
.repository.quickstart pre,
.quick-guide pre,
.empty-repo-guide pre {
  background: var(--gh-canvas-subtle) !important;
  border: 1px solid var(--gh-border-default) !important;
  border-radius: var(--radius-medium) !important;
  padding: 16px !important;
  margin: 8px 0 !important;
  overflow-x: auto !important;
  white-space: pre !important;
}

.repository.quickstart pre code,
.quick-guide pre code,
.empty-repo-guide pre code {
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  white-space: pre !important;
  display: block !important;
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace !important;
  font-size: var(--font-size-small) !important;
  line-height: 1.6 !important;
  color: var(--gh-fg-default) !important;
}

/* Clone URL box */
.clone-panel,
.clone-url-container,
.ui.action.input {
  background: var(--gh-canvas-default) !important;
  border: 1px solid var(--gh-border-default) !important;
  border-radius: var(--radius-medium) !important;
}

/* Protocol tabs (HTTPS, SSH, etc) */
.clone-panel .ui.menu .item,
.clone-buttons .button,
.ui.buttons .button {
  background: var(--gh-btn-bg) !important;
  border: 1px solid var(--gh-btn-border) !important;
  color: var(--gh-fg-default) !important;
  font-size: var(--font-size-small) !important;
  font-weight: 500 !important;
  padding: 5px 16px !important;
}

.clone-panel .ui.menu .item.active,
.clone-buttons .button.active,
.ui.buttons .button.active {
  background: var(--gh-canvas-subtle) !important;
  border-color: var(--gh-border-default) !important;
}

/* Clone URL input */
.clone-panel input,
.clone-url,
.ui.action.input input {
  background: var(--gh-canvas-default) !important;
  border: 1px solid var(--gh-border-default) !important;
  border-radius: var(--radius-medium) !important;
  color: var(--gh-fg-default) !important;
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace !important;
  font-size: var(--font-size-small) !important;
  padding: 5px 12px !important;
}

/* Code blocks - pre elements */
pre,
.highlight pre,
.markup pre {
  background: var(--gh-canvas-subtle) !important;
  border: 1px solid var(--gh-border-default) !important;
  border-radius: var(--radius-medium) !important;
  color: var(--gh-fg-default) !important;
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace !important;
  font-size: var(--font-size-small) !important;
  padding: 16px !important;
  overflow-x: auto !important;
  white-space: pre !important;
  line-height: 1.6 !important;
}

/* Code inside pre blocks - inherit from pre, don't add extra styling */
pre code,
pre > code,
.highlight pre code,
.markup pre code {
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
  font-family: inherit !important;
  font-size: inherit !important;
  color: inherit !important;
  white-space: pre !important;
  display: block !important;
  line-height: inherit !important;
}

/* Inline code (not inside pre) */
code:not(pre code),
.markup code:not(pre code) {
  background: var(--gh-canvas-subtle) !important;
  border: 1px solid var(--gh-border-default) !important;
  border-radius: var(--radius-small) !important;
  color: var(--gh-fg-default) !important;
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace !important;
  font-size: 85% !important;
  padding: 0.2em 0.4em !important;
  white-space: nowrap !important;
}

/* File list table */
.repo-file-list,
.file-table,
#repo-files-table,
.ui.table {
  border: 1px solid var(--gh-border-default) !important;
  border-radius: var(--radius-medium) !important;
  overflow: hidden !important;
}

.repo-file-list thead,
.file-table thead,
#repo-files-table thead,
.ui.table thead {
  background: var(--gh-canvas-subtle) !important;
}

.repo-file-list th,
.file-table th,
#repo-files-table th,
.ui.table th {
  background: var(--gh-canvas-subtle) !important;
  border-bottom: 1px solid var(--gh-border-default) !important;
  color: var(--gh-fg-default) !important;
  font-size: var(--font-size-small) !important;
  font-weight: 600 !important;
  padding: 8px 16px !important;
}

.repo-file-list td,
.file-table td,
#repo-files-table td,
.ui.table td {
  background: var(--gh-canvas-default) !important;
  border-bottom: 1px solid var(--gh-border-default) !important;
  color: var(--gh-fg-default) !important;
  font-size: var(--font-size-normal) !important;
  padding: 8px 16px !important;
}

.repo-file-list tr:last-child td,
.file-table tr:last-child td,
.ui.table tr:last-child td {
  border-bottom: none !important;
}

.repo-file-list tr:hover td,
.file-table tr:hover td,
.ui.table tr:hover td {
  background: var(--gh-canvas-subtle) !important;
}

/* File names as links */
.repo-file-list a,
.file-table a {
  color: var(--gh-accent-fg) !important;
}

.repo-file-list a:hover,
.file-table a:hover {
  text-decoration: underline !important;
}

/* ==========================================================================
   6. SIDEBAR (About section)
   ========================================================================== */

.repo-home-sidebar-top,
.repo-sidebar {
  padding-left: 24px !important;
}

.repo-sidebar-section {
  margin-bottom: 16px !important;
  padding-bottom: 16px !important;
  border-bottom: 1px solid var(--gh-border-default) !important;
}

.repo-sidebar-section:last-child {
  border-bottom: none !important;
}

.repo-sidebar-section h4,
.repo-description-header {
  font-size: var(--font-size-normal) !important;
  font-weight: 600 !important;
  color: var(--gh-fg-default) !important;
  margin-bottom: 8px !important;
}

/* About section links */
.repo-sidebar a {
  color: var(--gh-accent-fg) !important;
  font-size: var(--font-size-small) !important;
}

.repo-sidebar a:hover {
  text-decoration: underline !important;
}

/* Stats (stars, watchers, forks) */
.repo-sidebar .flex-item,
.repo-stats {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 4px 0 !important;
  color: var(--gh-fg-muted) !important;
  font-size: var(--font-size-small) !important;
}

/* Language bar */
.language-stats {
  height: 8px !important;
  border-radius: 6px !important;
  overflow: hidden !important;
  margin: 16px 0 8px 0 !important;
}

/* ==========================================================================
   7. BUTTONS - GitHub Style
   ========================================================================== */

/* Default button */
.ui.button,
button.ui {
  background: var(--gh-btn-bg) !important;
  border: 1px solid var(--gh-btn-border) !important;
  border-radius: var(--radius-medium) !important;
  color: var(--gh-fg-default) !important;
  font-size: var(--font-size-normal) !important;
  font-weight: 500 !important;
  padding: 5px 16px !important;
  line-height: 20px !important;
  cursor: pointer !important;
  box-shadow: none !important;
  transition: background 80ms, border-color 80ms !important;
}

.ui.button:hover,
button.ui:hover {
  background: var(--gh-btn-hover-bg) !important;
  border-color: var(--gh-btn-hover-border) !important;
}

/* Primary button (green) */
.ui.primary.button,
.ui.green.button {
  background: var(--gh-btn-primary-bg) !important;
  border-color: var(--gh-btn-primary-bg) !important;
  color: #ffffff !important;
}

.ui.primary.button:hover,
.ui.green.button:hover {
  background: var(--gh-btn-primary-hover-bg) !important;
  border-color: var(--gh-btn-primary-hover-bg) !important;
}

/* Danger button (red) */
.ui.red.button,
.ui.negative.button {
  background: transparent !important;
  border-color: var(--gh-btn-border) !important;
  color: var(--gh-danger-fg) !important;
}

.ui.red.button:hover,
.ui.negative.button:hover {
  background: #da36362e !important;
  border-color: var(--gh-danger-fg) !important;
}

/* Small buttons */
.ui.small.button,
.ui.mini.button,
.ui.tiny.button {
  font-size: var(--font-size-small) !important;
  padding: 3px 12px !important;
}

/* ==========================================================================
   8. FORMS & INPUTS
   ========================================================================== */

.ui.input input,
.ui.form input[type="text"],
.ui.form input[type="email"],
.ui.form input[type="password"],
.ui.form input[type="url"],
.ui.form textarea,
textarea,
input[type="text"],
input[type="email"],
input[type="password"] {
  background: var(--gh-canvas-default) !important;
  border: 1px solid var(--gh-border-default) !important;
  border-radius: var(--radius-medium) !important;
  color: var(--gh-fg-default) !important;
  font-size: var(--font-size-normal) !important;
  padding: 5px 12px !important;
  line-height: 20px !important;
}

.ui.input input:focus,
.ui.form input:focus,
.ui.form textarea:focus,
textarea:focus,
input:focus {
  border-color: var(--gh-accent-fg) !important;
  box-shadow: 0 0 0 3px rgba(31, 111, 235, 0.3) !important;
  outline: none !important;
}

/* Select / Dropdown */
.ui.dropdown,
.ui.selection.dropdown {
  background: var(--gh-btn-bg) !important;
  border: 1px solid var(--gh-btn-border) !important;
  border-radius: var(--radius-medium) !important;
  color: var(--gh-fg-default) !important;
  min-height: auto !important;
  padding: 5px 12px !important;
}

.ui.dropdown .menu,
.ui.selection.dropdown .menu {
  background: var(--gh-canvas-subtle) !important;
  border: 1px solid var(--gh-border-default) !important;
  border-radius: var(--radius-medium) !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5) !important;
}

.ui.dropdown .menu .item {
  background: transparent !important;
  border: none !important;
  color: var(--gh-fg-default) !important;
  padding: 8px 16px !important;
}

.ui.dropdown .menu .item:hover {
  background: var(--gh-canvas-inset) !important;
}

/* ==========================================================================
   9. LABELS & BADGES
   ========================================================================== */

.ui.label {
  background: var(--gh-canvas-subtle) !important;
  border: 1px solid transparent !important;
  border-radius: 2em !important;
  color: var(--gh-fg-default) !important;
  font-size: var(--font-size-small) !important;
  font-weight: 500 !important;
  padding: 0 7px !important;
  line-height: 18px !important;
}

/* Issue labels (colored) */
.issue-label,
.repo-label {
  border-radius: 2em !important;
  font-size: var(--font-size-small) !important;
  font-weight: 500 !important;
  padding: 0 7px !important;
  line-height: 18px !important;
}

/* ==========================================================================
   10. SEGMENTS & CARDS
   ========================================================================== */

.ui.segment {
  background: var(--gh-canvas-default) !important;
  border: 1px solid var(--gh-border-default) !important;
  border-radius: var(--radius-medium) !important;
  box-shadow: none !important;
  padding: 16px !important;
}

.ui.segment.attached {
  border-radius: 0 !important;
}

.ui.segment.attached:first-child,
.ui.segment.top.attached {
  border-radius: var(--radius-medium) var(--radius-medium) 0 0 !important;
}

.ui.segment.attached:last-child,
.ui.segment.bottom.attached {
  border-radius: 0 0 var(--radius-medium) var(--radius-medium) !important;
}

/* Cards */
.ui.card,
.ui.cards > .card {
  background: var(--gh-canvas-default) !important;
  border: 1px solid var(--gh-border-default) !important;
  border-radius: var(--radius-medium) !important;
  box-shadow: none !important;
}

.ui.card:hover,
.ui.cards > .card:hover {
  border-color: var(--gh-border-default) !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2) !important;
}

/* ==========================================================================
   11. MESSAGES & ALERTS
   ========================================================================== */

.ui.message {
  border-radius: var(--radius-medium) !important;
  padding: 16px !important;
  border-width: 1px !important;
  border-style: solid !important;
}

.ui.info.message {
  background: rgba(56, 139, 253, 0.1) !important;
  border-color: rgba(56, 139, 253, 0.4) !important;
  color: var(--gh-accent-fg) !important;
}

.ui.success.message,
.ui.positive.message {
  background: rgba(46, 160, 67, 0.15) !important;
  border-color: rgba(46, 160, 67, 0.4) !important;
  color: var(--gh-success-fg) !important;
}

.ui.warning.message {
  background: rgba(187, 128, 9, 0.15) !important;
  border-color: rgba(187, 128, 9, 0.4) !important;
  color: var(--gh-attention-fg) !important;
}

.ui.error.message,
.ui.negative.message {
  background: rgba(248, 81, 73, 0.1) !important;
  border-color: rgba(248, 81, 73, 0.4) !important;
  color: var(--gh-danger-fg) !important;
}

/* ==========================================================================
   12. FOOTER
   ========================================================================== */

footer,
.footer {
  background: var(--gh-canvas-default) !important;
  border-top: 1px solid var(--gh-border-default) !important;
  color: var(--gh-fg-muted) !important;
  font-size: var(--font-size-small) !important;
  padding: 24px 0 !important;
}

footer a,
.footer a {
  color: var(--gh-accent-fg) !important;
}

footer a:hover,
.footer a:hover {
  text-decoration: underline !important;
}

/* ==========================================================================
   13. ISSUES & PULL REQUESTS LIST
   ========================================================================== */

/* Issue list header with filters */
.issue-list-header,
.list-header {
  background: var(--gh-canvas-subtle) !important;
  border: 1px solid var(--gh-border-default) !important;
  border-radius: var(--radius-medium) var(--radius-medium) 0 0 !important;
  padding: 16px !important;
}

/* Issue list items */
.issue-list .item,
.issue-item,
.flex-item {
  background: var(--gh-canvas-default) !important;
  border: 1px solid var(--gh-border-default) !important;
  border-top: none !important;
  padding: 16px !important;
}

.issue-list .item:last-child,
.issue-item:last-child,
.flex-item:last-child {
  border-radius: 0 0 var(--radius-medium) var(--radius-medium) !important;
}

.issue-list .item:hover,
.issue-item:hover,
.flex-item:hover {
  background: var(--gh-canvas-subtle) !important;
}

/* Issue title */
.issue-list .item .title,
.issue-item .title {
  color: var(--gh-fg-default) !important;
  font-size: var(--font-size-medium) !important;
  font-weight: 600 !important;
}

.issue-list .item .title:hover,
.issue-item .title:hover {
  color: var(--gh-accent-fg) !important;
}

/* Issue metadata */
.issue-list .item .meta,
.issue-item .meta {
  color: var(--gh-fg-muted) !important;
  font-size: var(--font-size-small) !important;
}

/* ==========================================================================
   14. DASHBOARD / HOME PAGE
   ========================================================================== */

/* Dashboard sidebar */
.dashboard .dashboard-sidebar {
  background: var(--gh-canvas-default) !important;
  border-right: 1px solid var(--gh-border-default) !important;
}

/* Repository list on dashboard */
.dashboard .repo-list .item {
  border-bottom: 1px solid var(--gh-border-default) !important;
  padding: 12px 16px !important;
}

.dashboard .repo-list .item:hover {
  background: var(--gh-canvas-subtle) !important;
}

/* Activity feed */
.dashboard .feed .item {
  border-bottom: 1px solid var(--gh-border-default) !important;
  padding: 16px 0 !important;
}

/* ==========================================================================
   15. MISC OVERRIDES
   ========================================================================== */

/* Remove box shadows from Fomantic UI */
.ui.segment,
.ui.card,
.ui.menu,
.ui.dropdown .menu {
  box-shadow: none !important;
}

/* Links */
a {
  color: var(--gh-accent-fg) !important;
  text-decoration: none !important;
}

a:hover {
  text-decoration: underline !important;
}

/* Horizontal rules */
hr {
  border: none !important;
  border-top: 1px solid var(--gh-border-default) !important;
  margin: 16px 0 !important;
}

/* Breadcrumb styling */
.breadcrumb {
  font-size: var(--font-size-normal) !important;
}

.breadcrumb a {
  color: var(--gh-accent-fg) !important;
}

.breadcrumb .divider {
  color: var(--gh-fg-muted) !important;
  margin: 0 4px !important;
}

/* Tooltips */
.tippy-box {
  background: var(--gh-canvas-subtle) !important;
  border: 1px solid var(--gh-border-default) !important;
  border-radius: var(--radius-medium) !important;
  color: var(--gh-fg-default) !important;
  font-size: var(--font-size-small) !important;
}

/* Page container */
.page-content,
.full.height {
  background: var(--gh-canvas-default) !important;
}

/* Main content area padding */
.repository.file.list,
.repository.view.issue,
.repository.diff {
  padding: 0 32px !important;
}

@media (max-width: 768px) {
  .repository.file.list,
  .repository.view.issue,
  .repository.diff {
    padding: 0 16px !important;
  }
}

/* Modals */
.ui.modal {
  background: var(--gh-canvas-default) !important;
  border: 1px solid var(--gh-border-default) !important;
  border-radius: var(--radius-large) !important;
}

.ui.modal > .header {
  background: var(--gh-canvas-subtle) !important;
  border-bottom: 1px solid var(--gh-border-default) !important;
  color: var(--gh-fg-default) !important;
}

.ui.modal > .actions {
  background: var(--gh-canvas-subtle) !important;
  border-top: 1px solid var(--gh-border-default) !important;
}

/* Pagination */
.ui.pagination.menu {
  background: transparent !important;
  border: none !important;
}

.ui.pagination.menu .item {
  background: var(--gh-btn-bg) !important;
  border: 1px solid var(--gh-btn-border) !important;
  border-radius: var(--radius-medium) !important;
  color: var(--gh-fg-default) !important;
  margin: 0 2px !important;
}

.ui.pagination.menu .item:hover {
  background: var(--gh-btn-hover-bg) !important;
}

.ui.pagination.menu .item.active {
  background: var(--gh-accent-emphasis) !important;
  border-color: var(--gh-accent-emphasis) !important;
  color: #ffffff !important;
}

/* Empty state */
.empty-placeholder {
  color: var(--gh-fg-muted) !important;
  text-align: center !important;
  padding: 48px !important;
}

/* Avatar styling */
.avatar,
.ui.avatar.image {
  border-radius: 50% !important;
  border: 1px solid var(--gh-border-default) !important;
}

/* Commit list */
.commit-list .item {
  border-bottom: 1px solid var(--gh-border-default) !important;
  padding: 16px !important;
}

.commit-list .item:hover {
  background: var(--gh-canvas-subtle) !important;
}

/* Branch selector */
.branch-selector {
  background: var(--gh-btn-bg) !important;
  border: 1px solid var(--gh-btn-border) !important;
  border-radius: var(--radius-medium) !important;
}

/* Diff view */
.diff-file-box {
  border: 1px solid var(--gh-border-default) !important;
  border-radius: var(--radius-medium) !important;
  margin-bottom: 16px !important;
}

.diff-file-header {
  background: var(--gh-canvas-subtle) !important;
  border-bottom: 1px solid var(--gh-border-default) !important;
  padding: 8px 16px !important;
}

/* Code review comments */
.comment-box {
  border: 1px solid var(--gh-border-default) !important;
  border-radius: var(--radius-medium) !important;
  margin: 16px 0 !important;
}

.comment-box .header {
  background: var(--gh-canvas-subtle) !important;
  border-bottom: 1px solid var(--gh-border-default) !important;
  padding: 8px 16px !important;
}

.comment-box .content {
  padding: 16px !important;
}

/* Timeline */
.timeline-item {
  border-left: 2px solid var(--gh-border-default) !important;
  padding-left: 16px !important;
  margin-left: 16px !important;
}

.timeline-item::before {
  background: var(--gh-canvas-default) !important;
  border: 2px solid var(--gh-border-default) !important;
}

/* Loading spinner */
.ui.loader {
  color: var(--gh-accent-fg) !important;
}

/* Toast notifications */
.toastify {
  background: var(--gh-canvas-subtle) !important;
  border: 1px solid var(--gh-border-default) !important;
  border-radius: var(--radius-medium) !important;
  color: var(--gh-fg-default) !important;
}

/* ==========================================================================
   16. DASHBOARD IMPROVEMENTS
   ========================================================================== */

/* Dashboard layout */
.dashboard {
  background: var(--gh-canvas-default) !important;
}

.dashboard .secondary-nav {
  background: var(--gh-header-bg) !important;
  border-bottom: 1px solid var(--gh-border-default) !important;
  padding: 8px 16px !important;
}

/* User selector in dashboard */
.dashboard .secondary-nav .ui.dropdown {
  background: transparent !important;
  border: none !important;
  color: var(--gh-fg-default) !important;
}

/* Heatmap calendar */
.heatmap {
  margin: 16px 0 !important;
}

.heatmap rect {
  rx: 2 !important;
  ry: 2 !important;
}

/* Activity feed */
.dashboard .feeds,
.feed-item,
.news-item {
  background: var(--gh-canvas-default) !important;
}

.dashboard .feeds .item,
.feed-item,
.news-item {
  border-bottom: 1px solid var(--gh-border-default) !important;
  padding: 16px !important;
}

.dashboard .feeds .item:hover,
.feed-item:hover,
.news-item:hover {
  background: var(--gh-canvas-subtle) !important;
}

/* Repository list sidebar */
.dashboard .repository-list,
.repo-list {
  background: var(--gh-canvas-default) !important;
  border: 1px solid var(--gh-border-default) !important;
  border-radius: var(--radius-medium) !important;
}

.dashboard .repository-list .item,
.repo-list .item {
  padding: 8px 16px !important;
  border-bottom: 1px solid var(--gh-border-muted) !important;
}

.dashboard .repository-list .item:last-child,
.repo-list .item:last-child {
  border-bottom: none !important;
}

.dashboard .repository-list .item:hover,
.repo-list .item:hover {
  background: var(--gh-canvas-subtle) !important;
}

/* Repository/Organization tabs */
.dashboard .ui.tabular.menu {
  border-bottom: 1px solid var(--gh-border-default) !important;
  background: transparent !important;
}

.dashboard .ui.tabular.menu .item {
  background: transparent !important;
  border: none !important;
  border-bottom: 2px solid transparent !important;
  color: var(--gh-fg-default) !important;
  padding: 8px 16px !important;
  margin-bottom: -1px !important;
}

.dashboard .ui.tabular.menu .item.active {
  border-bottom-color: #f78166 !important;
  font-weight: 600 !important;
}

/* New repository button */
.dashboard .repo-list-header .ui.button,
.new-repo-button {
  background: var(--gh-btn-primary-bg) !important;
  border-color: var(--gh-btn-primary-bg) !important;
  color: #ffffff !important;
  font-size: var(--font-size-small) !important;
  padding: 3px 12px !important;
}

/* ==========================================================================
   17. FILE BROWSER IMPROVEMENTS
   ========================================================================== */

/* Branch/tag selector */
.choose.reference,
.branch-selector-dropdown,
#branch-dropdown-button {
  background: var(--gh-btn-bg) !important;
  border: 1px solid var(--gh-btn-border) !important;
  border-radius: var(--radius-medium) !important;
  color: var(--gh-fg-default) !important;
  font-size: var(--font-size-small) !important;
  padding: 5px 12px !important;
}

/* Latest commit bar */
.latest-commit,
.commit-info-bar {
  background: var(--gh-canvas-subtle) !important;
  border: 1px solid var(--gh-border-default) !important;
  border-radius: var(--radius-medium) var(--radius-medium) 0 0 !important;
  padding: 8px 16px !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}

.latest-commit .avatar,
.commit-info-bar .avatar {
  width: 24px !important;
  height: 24px !important;
}

.latest-commit .commit-message,
.commit-info-bar .commit-message {
  flex: 1 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.latest-commit .sha,
.commit-info-bar .sha {
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace !important;
  font-size: var(--font-size-small) !important;
  color: var(--gh-accent-fg) !important;
}

/* File tree / file list */
#repo-files-table {
  border-top: none !important;
  border-radius: 0 0 var(--radius-medium) var(--radius-medium) !important;
}

#repo-files-table tbody tr {
  border-bottom: 1px solid var(--gh-border-default) !important;
}

#repo-files-table tbody tr:last-child {
  border-bottom: none !important;
}

#repo-files-table tbody tr:hover {
  background: var(--gh-canvas-subtle) !important;
}

#repo-files-table td {
  padding: 8px 16px !important;
  vertical-align: middle !important;
}

/* File/folder icons */
#repo-files-table .svg {
  color: var(--gh-fg-muted) !important;
  margin-right: 8px !important;
}

/* File name column */
#repo-files-table .name {
  font-weight: 400 !important;
}

#repo-files-table .name a {
  color: var(--gh-accent-fg) !important;
}

/* Commit message column */
#repo-files-table .message {
  color: var(--gh-fg-muted) !important;
  max-width: 400px !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

/* Age column */
#repo-files-table .age {
  color: var(--gh-fg-muted) !important;
  white-space: nowrap !important;
  text-align: right !important;
}

/* ==========================================================================
   18. README AND MARKDOWN CONTENT
   ========================================================================== */

/* README box */
.readme-box,
.markdown-body,
#readme {
  background: var(--gh-canvas-default) !important;
  border: 1px solid var(--gh-border-default) !important;
  border-radius: var(--radius-medium) !important;
  padding: 24px !important;
  margin-top: 16px !important;
}

/* README header */
.readme-box .header,
#readme .header {
  background: var(--gh-canvas-subtle) !important;
  border-bottom: 1px solid var(--gh-border-default) !important;
  padding: 8px 16px !important;
  margin: -24px -24px 24px -24px !important;
  border-radius: var(--radius-medium) var(--radius-medium) 0 0 !important;
}

/* Markdown styling */
.markdown-body h1,
.markup h1 {
  font-size: 2em !important;
  font-weight: 600 !important;
  border-bottom: 1px solid var(--gh-border-default) !important;
  padding-bottom: 0.3em !important;
  margin-bottom: 16px !important;
}

.markdown-body h2,
.markup h2 {
  font-size: 1.5em !important;
  font-weight: 600 !important;
  border-bottom: 1px solid var(--gh-border-default) !important;
  padding-bottom: 0.3em !important;
  margin-top: 24px !important;
  margin-bottom: 16px !important;
}

.markdown-body h3,
.markup h3 {
  font-size: 1.25em !important;
  font-weight: 600 !important;
  margin-top: 24px !important;
  margin-bottom: 16px !important;
}

.markdown-body ul,
.markup ul {
  padding-left: 2em !important;
  margin-bottom: 16px !important;
}

.markdown-body li,
.markup li {
  margin-bottom: 4px !important;
}

.markdown-body blockquote,
.markup blockquote {
  border-left: 4px solid var(--gh-border-default) !important;
  color: var(--gh-fg-muted) !important;
  padding: 0 1em !important;
  margin: 0 0 16px 0 !important;
}

.markdown-body img,
.markup img {
  max-width: 100% !important;
  border-radius: var(--radius-medium) !important;
}

/* ==========================================================================
   19. ISSUE/PR DETAIL VIEW
   ========================================================================== */

/* Issue header */
.issue-title,
.pull-title {
  font-size: var(--font-size-xxl) !important;
  font-weight: 400 !important;
  color: var(--gh-fg-default) !important;
  line-height: 1.25 !important;
  margin-bottom: 8px !important;
}

.issue-title-number,
.pull-title-number {
  color: var(--gh-fg-muted) !important;
  font-weight: 300 !important;
}

/* Issue state labels */
.issue-state-label,
.state-label {
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  padding: 5px 12px !important;
  border-radius: 2em !important;
  font-size: var(--font-size-small) !important;
  font-weight: 500 !important;
}

.issue-state-label.open,
.state-label.green {
  background: var(--gh-success-emphasis) !important;
  color: #ffffff !important;
}

.issue-state-label.closed,
.state-label.purple {
  background: var(--gh-done-fg) !important;
  color: #ffffff !important;
}

.issue-state-label.merged,
.state-label.purple.merged {
  background: var(--gh-done-fg) !important;
  color: #ffffff !important;
}

/* Comment thread */
.comment-list .comment,
.timeline-comment {
  border: 1px solid var(--gh-border-default) !important;
  border-radius: var(--radius-medium) !important;
  margin-bottom: 16px !important;
}

.comment-list .comment .header,
.timeline-comment .header {
  background: var(--gh-canvas-subtle) !important;
  border-bottom: 1px solid var(--gh-border-default) !important;
  padding: 8px 16px !important;
  border-radius: var(--radius-medium) var(--radius-medium) 0 0 !important;
}

.comment-list .comment .content,
.timeline-comment .content {
  padding: 16px !important;
}

/* Sidebar in issue view */
.issue-content .issue-sidebar,
.pull-request-sidebar {
  border-left: 1px solid var(--gh-border-default) !important;
  padding-left: 16px !important;
}

/* ==========================================================================
   20. EXPLORE PAGE
   ========================================================================== */

/* Explore page header */
.explore .ui.secondary.pointing.menu {
  border-bottom: 1px solid var(--gh-border-default) !important;
}

/* Repository cards in explore */
.explore .repository-card,
.repo-card {
  background: var(--gh-canvas-default) !important;
  border: 1px solid var(--gh-border-default) !important;
  border-radius: var(--radius-medium) !important;
  padding: 16px !important;
  margin-bottom: 16px !important;
}

.explore .repository-card:hover,
.repo-card:hover {
  border-color: var(--gh-border-default) !important;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.15) !important;
}

/* ==========================================================================
   21. SETTINGS PAGES
   ========================================================================== */

/* Settings sidebar */
.user-settings .ui.vertical.menu,
.repo-settings .ui.vertical.menu {
  background: transparent !important;
  border: none !important;
}

.user-settings .ui.vertical.menu .item,
.repo-settings .ui.vertical.menu .item {
  background: transparent !important;
  border-radius: var(--radius-medium) !important;
  color: var(--gh-fg-default) !important;
  padding: 8px 12px !important;
  margin: 2px 0 !important;
}

.user-settings .ui.vertical.menu .item:hover,
.repo-settings .ui.vertical.menu .item:hover {
  background: var(--gh-canvas-subtle) !important;
}

.user-settings .ui.vertical.menu .item.active,
.repo-settings .ui.vertical.menu .item.active {
  background: var(--gh-canvas-subtle) !important;
  font-weight: 600 !important;
}

/* Settings form sections */
.user-settings .ui.form .field,
.repo-settings .ui.form .field {
  margin-bottom: 16px !important;
}

.user-settings .ui.form label,
.repo-settings .ui.form label {
  color: var(--gh-fg-default) !important;
  font-weight: 600 !important;
  margin-bottom: 4px !important;
}

/* Danger zone */
.danger-zone {
  border: 1px solid var(--gh-danger-fg) !important;
  border-radius: var(--radius-medium) !important;
  padding: 16px !important;
  margin-top: 24px !important;
}

.danger-zone h4 {
  color: var(--gh-danger-fg) !important;
  margin-bottom: 16px !important;
}

/* ==========================================================================
   22. ADDITIONAL REFINEMENTS
   ========================================================================== */

/* Secondary navigation */
.secondary-nav {
  background: var(--gh-canvas-subtle) !important;
  border-bottom: 1px solid var(--gh-border-default) !important;
  padding: 8px 0 !important;
}

/* Action bar above file list */
.repo-button-row,
.action-row {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 16px 0 !important;
}

/* Go to file button */
.goto-file-button,
.search-button {
  background: var(--gh-btn-bg) !important;
  border: 1px solid var(--gh-btn-border) !important;
}

/* Add file dropdown */
.add-file-dropdown {
  background: var(--gh-btn-bg) !important;
  border: 1px solid var(--gh-btn-border) !important;
}

/* Code button (green) */
.clone-button,
.code-button {
  background: var(--gh-btn-primary-bg) !important;
  border-color: var(--gh-btn-primary-bg) !important;
  color: #ffffff !important;
}

/* Star count badge */
.star-count,
.fork-count,
.watch-count {
  background: var(--gh-canvas-subtle) !important;
  border: 1px solid var(--gh-btn-border) !important;
  border-left: none !important;
  padding: 3px 10px !important;
  font-size: var(--font-size-small) !important;
  font-weight: 600 !important;
}

/* About section in sidebar */
.repo-sidebar .about,
.repository-summary {
  margin-bottom: 16px !important;
}

.repo-sidebar .about p,
.repository-summary p {
  color: var(--gh-fg-default) !important;
  line-height: 1.5 !important;
  margin-bottom: 16px !important;
}

/* Topics/Tags */
.topic-tag,
.repo-topic {
  display: inline-block !important;
  background: rgba(56, 139, 253, 0.15) !important;
  color: var(--gh-accent-fg) !important;
  padding: 0 10px !important;
  font-size: var(--font-size-small) !important;
  font-weight: 500 !important;
  line-height: 22px !important;
  border-radius: 2em !important;
  margin: 0 4px 4px 0 !important;
}

.topic-tag:hover,
.repo-topic:hover {
  background: rgba(56, 139, 253, 0.25) !important;
  text-decoration: none !important;
}

/* Language color dots */
.language-color {
  display: inline-block !important;
  width: 12px !important;
  height: 12px !important;
  border-radius: 50% !important;
  margin-right: 4px !important;
}

/* Contributors avatars */
.contributors-list {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 4px !important;
}

.contributors-list .avatar {
  width: 32px !important;
  height: 32px !important;
  border-radius: 50% !important;
}

/* Empty state improvements */
.empty-state,
.no-results {
  text-align: center !important;
  padding: 48px !important;
  color: var(--gh-fg-muted) !important;
}

.empty-state .svg,
.no-results .svg {
  width: 48px !important;
  height: 48px !important;
  margin-bottom: 16px !important;
  opacity: 0.5 !important;
}

/* 404 page */
.page-404 {
  text-align: center !important;
  padding: 100px 20px !important;
}

.page-404 h1 {
  font-size: 48px !important;
  color: var(--gh-fg-muted) !important;
}