/* GitHub Dark Theme for BlogEngine */
/* Based on GitHub's Primer Design System Dark Theme */

:root {
  /* GitHub Dark Theme Colors */
  --github-dark-bg-canvas: #0d1117;
  --github-dark-bg-canvas-inset: #161b22;
  --github-dark-bg-canvas-subtle: #21262d;
  --github-dark-bg-subtle: #161b22;
  --github-dark-bg-muted: #21262d;
  --github-dark-bg-emphasis: #1f6feb;
  --github-dark-bg-attention: #9a6700;
  --github-dark-bg-success: #238636;
  --github-dark-bg-danger: #da3633;
  --github-dark-bg-warning: #9a6700;
  
  --github-dark-text-primary: #f0f6fc;
  --github-dark-text-secondary: #8b949e;
  --github-dark-text-tertiary: #6e7681;
  --github-dark-text-placeholder: #6e7681;
  --github-dark-text-disabled: #484f58;
  --github-dark-text-inverse: #f0f6fc;
  --github-dark-text-link: #58a6ff;
  --github-dark-text-link-hover: #79c0ff;
  --github-dark-text-success: #3fb950;
  --github-dark-text-danger: #f85149;
  --github-dark-text-warning: #d29922;
  
  --github-dark-border-default: #30363d;
  --github-dark-border-muted: #21262d;
  --github-dark-border-subtle: #21262d;
  --github-dark-border-emphasis: #1f6feb;
  --github-dark-border-success: #238636;
  --github-dark-border-danger: #da3633;
  --github-dark-border-warning: #9a6700;
  
  --github-dark-shadow: 0 1px 0 rgba(255, 255, 255, 0.03);
  --github-dark-shadow-large: 0 16px 32px rgba(1, 4, 9, 0.85);
  
  /* GitHub Typography */
  --github-font-stack: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
  --github-font-mono: ui-monospace, SFMono-Regular, "SF Mono", Consolas, "Liberation Mono", Menlo, monospace;
  
  /* GitHub Font Sizes */
  --github-font-size-small: 12px;
  --github-font-size-normal: 14px;
  --github-font-size-medium: 16px;
  --github-font-size-large: 18px;
  --github-font-size-xl: 20px;
  --github-font-size-xxl: 24px;
  --github-font-size-xxxl: 32px;
  
  /* GitHub Line Heights */
  --github-line-height-condensed: 1.25;
  --github-line-height-default: 1.5;
  --github-line-height-relaxed: 1.75;
}

/* Apply GitHub Dark Theme to body and main elements */
body {
  background-color: var(--github-dark-bg-canvas) !important;
  color: var(--github-dark-text-primary) !important;
  font-family: var(--github-font-stack) !important;
  font-size: var(--github-font-size-normal) !important;
  line-height: var(--github-line-height-default) !important;
}

/* Header and Navigation */
.navbar, .navbar-default, .navbar-inverse, .navbar-dark {
  background-color: var(--github-dark-bg-canvas-inset) !important;
  border-color: var(--github-dark-border-default) !important;
  color: var(--github-dark-text-primary) !important;
}

.navbar-brand, .navbar-nav > li > a {
  color: var(--github-dark-text-primary) !important;
}

.navbar-nav > li > a:hover, .navbar-nav > li > a:focus {
  color: var(--github-dark-text-link-hover) !important;
  background-color: var(--github-dark-bg-subtle) !important;
}

/* Main Content Areas */
.container, .container-fluid {
  background-color: var(--github-dark-bg-canvas) !important;
  color: var(--github-dark-text-primary) !important;
}

/* Sidebar */
.sidebar, .sidebar-content {
  background-color: var(--github-dark-bg-canvas-inset) !important;
  border-color: var(--github-dark-border-default) !important;
  color: var(--github-dark-text-primary) !important;
}

/* Posts and Articles */
.post, .post-content, .post-header {
  background-color: var(--github-dark-bg-canvas) !important;
  color: var(--github-dark-text-primary) !important;
  border-color: var(--github-dark-border-default) !important;
}

/* Blog List Margins - Reduced top and bottom spacing */
.posts {
  margin-top: 0.5rem !important;
}

.post {
  margin-top: 0.75rem !important;
  margin-bottom: 0.75rem !important;
  padding-top: 1.5rem !important;
  padding-bottom: 1.5rem !important;
  /* border-bottom: 1px solid var(--github-dark-border-default) !important; */
  padding: 0 !important;
}

.post-title, .post-title a {
  color: var(--github-dark-text-primary) !important;
  font-size: var(--github-font-size-xl) !important;
  font-weight: 600 !important;
}

.post-title a:hover {
  color: var(--github-dark-text-link-hover) !important;
  text-decoration: none !important;
}

.post-meta, .post-date {
  color: var(--github-dark-text-secondary) !important;
  font-size: var(--github-font-size-small) !important;
}

.post-excerpt, .post-body {
  color: var(--github-dark-text-primary) !important;
  font-size: var(--github-font-size-normal) !important;
  line-height: var(--github-line-height-default) !important;
}

/* Links */
a {
  color: var(--github-dark-text-link) !important;
  text-decoration: none !important;
}

a:hover, a:focus {
  color: var(--github-dark-text-link-hover) !important;
  text-decoration: underline !important;
}

/* Buttons */
.btn, .btn-default, .btn-primary, .btn-secondary {
  background-color: var(--github-dark-bg-subtle) !important;
  border-color: var(--github-dark-border-default) !important;
  color: var(--github-dark-text-primary) !important;
  font-family: var(--github-font-stack) !important;
  font-size: var(--github-font-size-normal) !important;
  font-weight: 500 !important;
}

.btn:hover, .btn-default:hover, .btn-primary:hover, .btn-secondary:hover {
  background-color: var(--github-dark-bg-muted) !important;
  border-color: var(--github-dark-border-emphasis) !important;
  color: var(--github-dark-text-primary) !important;
}

.btn-primary {
  background-color: var(--github-dark-bg-emphasis) !important;
  border-color: var(--github-dark-border-emphasis) !important;
  color: var(--github-dark-text-inverse) !important;
}

.btn-primary:hover {
  background-color: #1f6feb !important;
  border-color: #1f6feb !important;
  color: var(--github-dark-text-inverse) !important;
}

/* Forms */
.form-control, input[type="text"], input[type="email"], input[type="password"], textarea {
  background-color: var(--github-dark-bg-canvas-inset) !important;
  border-color: var(--github-dark-border-default) !important;
  color: var(--github-dark-text-primary) !important;
  font-family: var(--github-font-stack) !important;
  font-size: var(--github-font-size-normal) !important;
}

.form-control:focus, input[type="text"]:focus, input[type="email"]:focus, input[type="password"]:focus, textarea:focus {
  background-color: var(--github-dark-bg-canvas-inset) !important;
  border-color: var(--github-dark-border-emphasis) !important;
  color: var(--github-dark-text-primary) !important;
  box-shadow: 0 0 0 2px rgba(31, 111, 235, 0.3) !important;
}

/* Tables */
.table, table {
  background-color: var(--github-dark-bg-canvas) !important;
  color: var(--github-dark-text-primary) !important;
  border-color: var(--github-dark-border-default) !important;
}

.table th, .table td, th, td {
  border-color: var(--github-dark-border-default) !important;
  color: var(--github-dark-text-primary) !important;
}

.table-striped tbody tr:nth-of-type(odd) {
  background-color: var(--github-dark-bg-canvas-inset) !important;
}

/* Headings */
h1, h2, h3, h4, h5, h6 {
  color: var(--github-dark-text-primary) !important;
  font-family: var(--github-font-stack) !important;
  font-weight: 600 !important;
}

h1 { font-size: var(--github-font-size-xxxl) !important; }
h2 { font-size: var(--github-font-size-xxl) !important; }
h3 { font-size: var(--github-font-size-xl) !important; }
h4 { font-size: var(--github-font-size-large) !important; }
h5 { font-size: var(--github-font-size-medium) !important; }
h6 { font-size: var(--github-font-size-normal) !important; }

/* Code and Pre */
code, pre {
  background-color: var(--github-dark-bg-canvas-inset) !important;
  border-color: var(--github-dark-border-default) !important;
  color: var(--github-dark-text-primary) !important;
  font-family: var(--github-font-mono) !important;
  font-size: var(--github-font-size-small) !important;
}

.highlight, .codehilite {
  background-color: var(--github-dark-bg-canvas-inset) !important;
  border-color: var(--github-dark-border-default) !important;
}

/* Cards and Panels */
.card, .panel, .panel-default, .widget {
  background-color: var(--github-dark-bg-canvas-inset) !important;
  border-color: var(--github-dark-border-default) !important;
  color: var(--github-dark-text-primary) !important;
}

.card-header, .panel-heading {
  background-color: var(--github-dark-bg-subtle) !important;
  border-color: var(--github-dark-border-default) !important;
  color: var(--github-dark-text-primary) !important;
}

.card-body, .panel-body {
  background-color: var(--github-dark-bg-canvas-inset) !important;
  color: var(--github-dark-text-primary) !important;
}

/* Comments */
.comment, .comment-content {
  background-color: var(--github-dark-bg-canvas-inset) !important;
  border-color: var(--github-dark-border-default) !important;
  color: var(--github-dark-text-primary) !important;
}

.comment-header, .comment-author {
  color: var(--github-dark-text-secondary) !important;
}

/* Blockquotes */
blockquote {
  background-color: var(--github-dark-bg-canvas-inset) !important;
  border-left-color: var(--github-dark-border-default) !important;
  color: var(--github-dark-text-secondary) !important;
}

/* Alerts */
.alert-success {
  background-color: rgba(35, 134, 54, 0.15) !important;
  border-color: var(--github-dark-border-success) !important;
  color: var(--github-dark-text-success) !important;
}

.alert-danger, .alert-error {
  background-color: rgba(218, 54, 51, 0.15) !important;
  border-color: var(--github-dark-border-danger) !important;
  color: var(--github-dark-text-danger) !important;
}

.alert-warning {
  background-color: rgba(154, 103, 0, 0.15) !important;
  border-color: var(--github-dark-border-warning) !important;
  color: var(--github-dark-text-warning) !important;
}

/* Pagination */
.pagination .page-link {
  background-color: var(--github-dark-bg-canvas-inset) !important;
  border-color: var(--github-dark-border-default) !important;
  color: var(--github-dark-text-primary) !important;
}

.pagination .page-link:hover {
  background-color: var(--github-dark-bg-subtle) !important;
  border-color: var(--github-dark-border-emphasis) !important;
  color: var(--github-dark-text-link-hover) !important;
}

.pagination .page-item.active .page-link {
  background-color: var(--github-dark-bg-emphasis) !important;
  border-color: var(--github-dark-border-emphasis) !important;
  color: var(--github-dark-text-inverse) !important;
}

/* Footer */
.footer {
  background-color: var(--github-dark-bg-canvas-inset) !important;
  border-color: var(--github-dark-border-default) !important;
  color: var(--github-dark-text-secondary) !important;
}

/* Scrollbars (Webkit) */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: var(--github-dark-bg-canvas) !important;
}

::-webkit-scrollbar-thumb {
  background: var(--github-dark-bg-muted) !important;
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--github-dark-text-tertiary) !important;
}

/* Selection */
::selection {
  background-color: rgba(31, 111, 235, 0.3) !important;
  color: var(--github-dark-text-primary) !important;
}

::-moz-selection {
  background-color: rgba(31, 111, 235, 0.3) !important;
  color: var(--github-dark-text-primary) !important;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  body {
    font-size: var(--github-font-size-small) !important;
  }
  
  h1 { font-size: var(--github-font-size-xxl) !important; }
  h2 { font-size: var(--github-font-size-xl) !important; }
  h3 { font-size: var(--github-font-size-large) !important; }
  h4 { font-size: var(--github-font-size-medium) !important; }
  h5 { font-size: var(--github-font-size-normal) !important; }
  h6 { font-size: var(--github-font-size-small) !important; }
  
  /* Responsive blog list margins */
  .posts {
    margin-top: 0.25rem !important;
    margin-bottom: 0.25rem !important;
  }
  
  .post {
    margin-top: 0.5rem !important;
    padding-top: 1rem !important;
    padding-bottom: 1rem !important;
  }
  .post {
    margin-bottom: .6rem !important;
  }
  .post-header {
     margin-bottom: .6rem !important;
  }

}