#profile-picture {
  display: flex;
  justify-content: center;
}

#profile-picture img.avatar {
  object-fit: cover;
  width: 128px;
  height: 128px;
  border-radius: 50%;
}

#profile-upload-holder {
  padding-top: 0.5em;
}

#profile-upload-holder input[type="file"] {
  display: none;
}

.progress-bar {
  background-color: var(--primary);
  width: 2px;
}

#progress-bar-message {
  color: var(--gray);
}

.add-loading-dots:after {
  content: ' .';
  animation: dots 1s steps(5, end) infinite;
}

@keyframes dots {
  0%, 20% {
    color: rgba(0, 0, 0, 0);
    text-shadow: .25em 0 0 rgba(0, 0, 0, 0), .5em 0 0 rgba(0, 0, 0, 0);
  }

  40% {
    color: black;
    text-shadow: .25em 0 0 rgba(0, 0, 0, 0), .5em 0 0 rgba(0, 0, 0, 0);
  }

  60% {
    text-shadow: .25em 0 0 black, .5em 0 0 rgba(0, 0, 0, 0);
  }

  80%, 100% {
    text-shadow: .25em 0 0 black, .5em 0 0 black;
  }
}

/* this makes the list items look nice on mobile */
.upgrade-features li {
  display: flex;
}

.upgrade-features li .pg-icon {
  margin-right: 0.5rem;
}

.upgrade-features li .upgrade-feature {
  width: 100%;
}

#subscription-details-table .subscription-detail {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  margin: 0.5rem;
}

#subscription-details-table .subscription-detail .subscription-detail-label {
  width: 16rem;
  text-align: right;
  margin-right: 1rem;
}

#subscription-details-table .subscription-detail .subscription-detail-value {
  width: 100%;
}

#subscription-details-table .subscription-detail .subdetail {
  font-size: 0.8rem;
  margin-top: 0.2rem;
}

#plan-selector .plan {
  height: 100%; /* fill the whole column */
  /* prevent shifting when border is added */
  border: 3px solid transparent;
  border-radius: 8px;
  cursor: pointer;
  padding: 1rem;
}

#plan-selector .plan.is-selected {
  border: 3px solid var(--primary);
}

#plan-selector .plan .plan-summary {
  display: flex;
  flex-direction: row;
  align-items: center;
}

#plan-selector .plan .price {
  font-size: 1.5rem;
}

/* alpine.js cloak support */
[x-cloak] {
  display: none !important;
}

/* ensure htmx links use pointers */
a[hx-get] {
  cursor: pointer;
}

.h-100 {
  height: 100%;
}

.muted-link {
  color: hsl(0, 0%, 71%);
}

.muted-link:hover {
  color: hsl(0, 0%, 48%);
  text-decoration: underline;
}

/* this is the default class assigned to errors by django forms */
.errorlist {
  color: var(--danger);
}

img.socialicon {
  padding-right: 0.5em;
  max-width: 24px;
  max-height: 24px;
}

/* css loader https://loading.io/css/ */
.lds-ripple {
  display: inline-block;
  position: relative;
  width: 80px;
  height: 80px;
}

.lds-ripple div {
  position: absolute;
  border: 4px solid var(--primary);
  opacity: 1;
  border-radius: 50%;
  animation: lds-ripple 1s cubic-bezier(0, 0.2, 0.8, 1) infinite;
}

.lds-ripple div:nth-child(2) {
  animation-delay: -0.5s;
}

@keyframes lds-ripple {
  0% {
    top: 36px;
    left: 36px;
    width: 0;
    height: 0;
    opacity: 1;
  }

  100% {
    top: 0px;
    left: 0px;
    width: 72px;
    height: 72px;
    opacity: 0;
  }
}

.sidenav-collapsed .maybe-collapse-sidenav.lg\:flex {
  @media (width >= 64rem) {
    display: none;
  }
}

.sidenav-collapsed .maybe-show-hamburger.lg\:hidden {
  display: block;
}

button:not([disabled]) {
  cursor: pointer;
}

/* Roadmap and Release Notes - Blog Style */

.roadmap-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 2rem 1rem;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;
}

.empty-state {
    text-align: center;
    padding: 4rem 2rem;
    color: #6b7280;
    background: #f9fafb;
    border-radius: 12px;
    border: none;
}

.github-link {
    color: #3b82f6;
    text-decoration: none;
    font-weight: 500;
    margin-left: 12px;
    transition: color 0.2s ease;
}

.github-link:hover {
    color: #1d4ed8;
    text-decoration: none;
}

.back-link {
    margin-top: 2rem;
}

.back-link a {
    color: #3b82f6;
    text-decoration: none;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    transition: color 0.2s ease;
}

.back-link a:hover {
    color: #1d4ed8;
    text-decoration: none;
}

/* Blog-style Issue Cards */
.issue-card {
    background: #ffffff;
    border-radius: 16px;
    padding: 2rem;
    margin-bottom: 2rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06);
    border: 1px solid #f3f4f6;
    transition: all 0.3s ease;
    position: relative;
}

.issue-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.issue-header {
    margin-bottom: 1.5rem;
}

.issue-title {
    margin: 0 0 0.75rem 0;
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.3;
    color: #111827;
    letter-spacing: -0.025em;
}

.issue-title a {
    color: inherit;
    text-decoration: none;
    transition: color 0.2s ease;
}

.issue-title a:hover {
    color: #3b82f6;
}

.issue-meta {
    font-size: 0.875rem;
    color: #6b7280;
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    gap: 1rem;
}

.issue-labels {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
}

.label {
    background: #f3f4f6;
    color: #374151;
    padding: 0.25rem 0.75rem;
    border-radius: 9999px;
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.025em;
    transition: all 0.2s ease;
}

.label:hover {
    background: #e5e7eb;
}

.vote-section {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 1.5rem;
    padding-top: 1rem;
    border-top: 1px solid #f3f4f6;
}

.vote-button {
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    padding: 0.5rem 1rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
    font-weight: 500;
    transition: all 0.2s ease;
    color: #374151;
}

.vote-button:hover {
    background: #f3f4f6;
    border-color: #d1d5db;
    transform: translateY(-1px);
}

.vote-button.voted {
    background: #dbeafe;
    color: #1d4ed8;
    border-color: #3b82f6;
}

.state-badge {
    padding: 0.25rem 0.75rem;
    border-radius: 9999px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: capitalize;
    letter-spacing: 0.025em;
}

.state-open {
    background: #d1fae5;
    color: #065f46;
}

.state-closed {
    background: #fee2e2;
    color: #991b1b;
}

/* Blog-style Filters */
.filters {
    background: #ffffff;
    padding: 1.5rem;
    border-radius: 12px;
    margin-bottom: 2rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    border: 1px solid #f3f4f6;
}

.filters form {
    display: flex;
    gap: 1rem;
    align-items: center;
    flex-wrap: wrap;
}

.filters input, .filters select {
    padding: 0.5rem 0.75rem;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    font-size: 0.875rem;
    background: #ffffff;
    transition: all 0.2s ease;
    color: #374151;
}

.filters input:focus, .filters select:focus {
    outline: none;
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.filters button {
    background: #3b82f6;
    color: white;
    border: none;
    padding: 0.5rem 1rem;
    border-radius: 8px;
    cursor: pointer;
    font-size: 0.875rem;
    font-weight: 500;
    transition: all 0.2s ease;
}

.filters button:hover {
    background: #2563eb;
    transform: translateY(-1px);
}

/* Blog-style Pagination */
.pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.5rem;
    margin-top: 3rem;
}

.pagination a, .pagination span {
    padding: 0.5rem 1rem;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    text-decoration: none;
    color: #374151;
    font-weight: 500;
    transition: all 0.2s ease;
    background: #ffffff;
}

.pagination a:hover {
    background: #f9fafb;
    border-color: #d1d5db;
    transform: translateY(-1px);
}

.pagination .current {
    background: #3b82f6;
    color: white;
    border-color: #3b82f6;
}

.comment-form {
    background: #f8f9fa;
    padding: 20px;
    border-radius: 8px;
    margin-top: 20px;
}

.comment-form textarea {
    width: 100%;
    min-height: 100px;
    padding: 12px;
    border: 1px solid #e1e5e9;
    border-radius: 6px;
    font-family: inherit;
    font-size: 0.875rem;
    resize: vertical;
}

.comment-form button {
    background: #007bff;
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.875rem;
    margin-top: 10px;
}

.comment-form button:hover {
    background: #0056b3;
}

.comment {
    border: 1px solid #e1e5e9;
    border-radius: 8px;
    padding: 15px;
    margin-bottom: 15px;
    background: #fff;
}

.comment-header {
    font-size: 0.875rem;
    color: #586069;
    margin-bottom: 8px;
}

.comment-content {
    line-height: 1.6;
}

/* Related Issues/PRs Styles */
.related-prs-section, .related-issues-section {
    margin-top: 30px;
    padding: 20px;
    background: #f8f9fa;
    border-radius: 8px;
    border: 1px solid #e1e5e9;
}

.related-prs-section h3, .related-issues-section h3 {
    margin-top: 0;
    margin-bottom: 15px;
    color: #333;
}
.dark .related-prs-section h3, .dark .related-issues-section h3 {
color: #eee;
}

.related-pr-card, .related-issue-card {
    background: white;
    border: 1px solid #e1e5e9;
    border-radius: 6px;
    padding: 15px;
    margin-bottom: 15px;
}

.related-pr-card:last-child, .related-issue-card:last-child {
    margin-bottom: 0;
}

.related-pr-card h4, .related-issue-card h4 {
    margin: 0 0 8px 0;
    font-size: 1rem;
}

.related-pr-card h4 a, .related-issue-card h4 a {
    color: #0366d6;
    text-decoration: none;
}

.related-pr-card h4 a:hover, .related-issue-card h4 a:hover {
    text-decoration: underline;
}

.relation-info {
    margin-top: 8px;
    font-size: 0.875rem;
    color: #666;
}

.relation-type {
    background: #e3f2fd;
    color: #1976d2;
    padding: 2px 6px;
    border-radius: 3px;
    font-size: 0.75rem;
    font-weight: 500;
    text-transform: uppercase;
}

.branch-name {
    margin-left: 10px;
    color: #666;
}

.branch-name code {
    background: #f1f3f4;
    padding: 2px 4px;
    border-radius: 3px;
    font-size: 0.8rem;
    color: #d73a49;
}

/* Blog-style PR Cards */
.pr-card {
    background: #ffffff;
    border-radius: 16px;
    padding: 2rem;
    margin-bottom: 2rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06);
    border: 1px solid #f3f4f6;
    transition: all 0.3s ease;
    position: relative;
}

.pr-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.pr-header {
    margin-bottom: 1.5rem;
}

.pr-title {
    margin: 0 0 0.75rem 0;
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.3;
    color: #111827;
    letter-spacing: -0.025em;
}

.pr-title a {
    color: inherit;
    text-decoration: none;
    transition: color 0.2s ease;
}

.pr-title a:hover {
    color: #3b82f6;
}

.pr-meta {
    font-size: 0.875rem;
    color: #6b7280;
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    gap: 1rem;
}

.merged-badge {
    background: #d1fae5;
    color: #065f46;
    padding: 0.25rem 0.75rem;
    border-radius: 9999px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: capitalize;
    letter-spacing: 0.025em;
}

/* Markdown content styling */
.issue-body h1, .issue-body h2, .issue-body h3, .issue-body h4, .issue-body h5, .issue-body h6 {
    margin-top: 1.5rem;
    margin-bottom: 0.5rem;
    font-weight: 600;
    line-height: 1.25;
}

.issue-body h1 { font-size: 1.5rem; }
.issue-body h2 { font-size: 1.25rem; }
.issue-body h3 { font-size: 1.125rem; }
.issue-body h4 { font-size: 1rem; }
.issue-body h5 { font-size: 0.875rem; }
.issue-body h6 { font-size: 0.75rem; }

.issue-body p {
    margin-bottom: 1rem;
    line-height: 1.6;
}

.issue-body ul, .issue-body ol {
    margin-bottom: 1rem;
    padding-left: 1.5rem;
}

.issue-body li {
    margin-bottom: 0.25rem;
}

.issue-body blockquote {
    border-left: 4px solid #e1e5e9;
    padding-left: 1rem;
    margin: 1rem 0;
    color: #586069;
    font-style: italic;
}

.issue-body code {
    background: #f6f8fa;
    padding: 0.125rem 0.25rem;
    border-radius: 3px;
    font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, monospace;
    font-size: 0.85rem;
    color: #d73a49;
}

.issue-body pre {
    background: #f6f8fa;
    padding: 1rem;
    border-radius: 6px;
    overflow-x: auto;
    margin: 1rem 0;
    border: 1px solid #e1e5e9;
}

.issue-body pre code {
    background: none;
    padding: 0;
    color: #24292e;
    font-size: 0.875rem;
}

.issue-body table {
    border-collapse: collapse;
    margin: 1rem 0;
    width: 100%;
}

.issue-body table th,
.issue-body table td {
    border: 1px solid #e1e5e9;
    padding: 0.5rem;
    text-align: left;
}

.issue-body table th {
    background: #f6f8fa;
    font-weight: 600;
}

.issue-body a {
    color: #0366d6;
    text-decoration: none;
}

.issue-body a:hover {
    text-decoration: underline;
}

.issue-body hr {
    border: 0;
    border-top: 1px solid #e1e5e9;
    margin: 1.5rem 0;
}

.issue-body img {
    max-width: 100%;
    height: auto;
    border-radius: 6px;
    margin: 0.5rem 0;
}

.issue-body details {
    margin: 1rem 0;
}

.issue-body summary {
    font-weight: 600;
    cursor: pointer;
    padding: 0.5rem 0;
}

.issue-body details[open] summary {
    border-bottom: 1px solid #e1e5e9;
    margin-bottom: 0.5rem;
}

/* Comment content styling */
.comment-content h1, .comment-content h2, .comment-content h3, .comment-content h4, .comment-content h5, .comment-content h6 {
    margin-top: 1rem;
    margin-bottom: 0.5rem;
    font-weight: 600;
    line-height: 1.25;
}

.comment-content h1 { font-size: 1.25rem; }
.comment-content h2 { font-size: 1.125rem; }
.comment-content h3 { font-size: 1rem; }
.comment-content h4 { font-size: 0.875rem; }
.comment-content h5 { font-size: 0.75rem; }
.comment-content h6 { font-size: 0.7rem; }

.comment-content p {
    margin-bottom: 0.75rem;
    line-height: 1.5;
}

.comment-content ul, .comment-content ol {
    margin-bottom: 0.75rem;
    padding-left: 1.25rem;
}

.comment-content li {
    margin-bottom: 0.125rem;
}

.comment-content blockquote {
    border-left: 3px solid #e1e5e9;
    padding-left: 0.75rem;
    margin: 0.75rem 0;
    color: #586069;
    font-style: italic;
}

.comment-content code {
    background: #f6f8fa;
    padding: 0.125rem 0.25rem;
    border-radius: 3px;
    font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, monospace;
    font-size: 0.8rem;
    color: #d73a49;
}

.comment-content pre {
    background: #f6f8fa;
    padding: 0.75rem;
    border-radius: 6px;
    overflow-x: auto;
    margin: 0.75rem 0;
    border: 1px solid #e1e5e9;
}

.comment-content pre code {
    background: none;
    padding: 0;
    color: #24292e;
    font-size: 0.8rem;
}

.comment-content a {
    color: #0366d6;
    text-decoration: none;
}

.comment-content a:hover {
    text-decoration: underline;
}

/* Syntax highlighting styles */
.highlight {
    background: #f8f8f8;
    border-radius: 6px;
    padding: 1rem;
    overflow-x: auto;
    margin: 1rem 0;
    border: 1px solid #e1e5e9;
}

.highlight .err { color: #a61717; background-color: #e3d2d2 }
.highlight .k { color: #000000; font-weight: bold }
.highlight .o { color: #000000; font-weight: bold }
.highlight .cm { color: #999988; font-style: italic }
.highlight .cp { color: #999999; font-weight: bold; font-style: italic }
.highlight .c1 { color: #999988; font-style: italic }
.highlight .cs { color: #999999; font-weight: bold; font-style: italic }
.highlight .gd { color: #000000; background-color: #ffdddd }
.highlight .ge { color: #000000; font-style: italic }
.highlight .gr { color: #aa0000 }
.highlight .gh { color: #999999 }
.highlight .gi { color: #000000; background-color: #ddffdd }
.highlight .go { color: #888888 }
.highlight .gp { color: #555555 }
.highlight .gs { font-weight: bold }
.highlight .gu { color: #aaaaaa }
.highlight .gt { color: #aa0000 }
.highlight .kc { color: #000000; font-weight: bold }
.highlight .kd { color: #000000; font-weight: bold }
.highlight .kn { color: #000000; font-weight: bold }
.highlight .kp { color: #000000; font-weight: bold }
.highlight .kr { color: #000000; font-weight: bold }
.highlight .kt { color: #445588; font-weight: bold }
.highlight .m { color: #009999 }
.highlight .s { color: #d01040 }
.highlight .na { color: #008080 }
.highlight .nb { color: #0086B3 }
.highlight .nc { color: #445588; font-weight: bold }
.highlight .no { color: #008080 }
.highlight .nd { color: #3c5d5d; font-weight: bold }
.highlight .ni { color: #800080 }
.highlight .ne { color: #990000; font-weight: bold }
.highlight .nf { color: #990000; font-weight: bold }
.highlight .nl { color: #990000; font-weight: bold }
.highlight .nn { color: #555555 }
.highlight .nt { color: #000080 }
.highlight .nv { color: #008080 }
.highlight .ow { color: #000000; font-weight: bold }
.highlight .w { color: #bbbbbb }
.highlight .mb { color: #009999 }
.highlight .mf { color: #009999 }
.highlight .mh { color: #009999 }
.highlight .mi { color: #009999 }
.highlight .mo { color: #009999 }
.highlight .sb { color: #d01040 }
.highlight .sc { color: #d01040 }
.highlight .sd { color: #d01040 }
.highlight .s2 { color: #d01040 }
.highlight .se { color: #d01040 }
.highlight .sh { color: #d01040 }
.highlight .si { color: #d01040 }
.highlight .sx { color: #d01040 }
.highlight .sr { color: #009926 }
.highlight .s1 { color: #d01040 }
.highlight .ss { color: #990073 }
.highlight .bp { color: #999999 }
.highlight .vc { color: #008080 }
.highlight .vg { color: #008080 }
.highlight .vi { color: #008080 }
.highlight .il { color: #009999 }

/* Blog-style Related Issues Section */
.related-issues-section {
    margin-top: 2rem;
    padding: 1.5rem;
    background: #f9fafb;
    border-radius: 12px;
    border: 1px solid #f3f4f6;
}

.related-issues-section h4 {
    margin: 0 0 1rem 0;
    font-size: 1.125rem;
    font-weight: 600;
    color: #111827;
    letter-spacing: -0.025em;
}

.related-issues-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.related-issue-item {
    padding: 1rem;
    margin-bottom: 0.75rem;
    background: #ffffff;
    border-radius: 8px;
    border: 1px solid #e5e7eb;
    transition: all 0.2s ease;
}

.related-issue-item:hover {
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.related-issue-item:last-child {
    margin-bottom: 0;
}

.issue-link {
    color: #3b82f6;
    text-decoration: none;
    font-weight: 600;
    font-size: 1rem;
    line-height: 1.4;
    display: block;
    margin-bottom: 0.5rem;
    transition: color 0.2s ease;
}

.issue-link:hover {
    color: #1d4ed8;
    text-decoration: none;
}

.related-issue-item p {
    color: #6b7280;
    font-size: 0.875rem;
    line-height: 1.5;
    margin: 0.5rem 0 0 0;
}

.issue-state-badge {
    font-size: 0.75rem;
    padding: 0.25rem 0.75rem;
    border-radius: 9999px;
    font-weight: 600;
    text-transform: capitalize;
    letter-spacing: 0.025em;
    display: inline-block;
    margin-top: 0.5rem;
}

.issue-state-badge.state-open {
    background: #d1fae5;
    color: #065f46;
}

.issue-state-badge.state-closed {
    background: #fee2e2;
    color: #991b1b;
}

.relation-type {
    font-size: 0.75rem;
    color: #9ca3af;
    font-style: italic;
}

/* Dark Mode - Blog Style */

.dark .roadmap-container {
    background: #111827;
}

.dark .empty-state {
    background: #1f2937;
    color: #9ca3af;
    border: 1px solid #374151;
}

/* Issue Cards Dark Mode */
.dark .issue-card {
    background: #1f2937 !important;
    border: 1px solid #374151 !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3), 0 1px 2px rgba(0, 0, 0, 0.2) !important;
}

.dark .issue-card:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4) !important;
}

.dark .issue-title {
    color: #f9fafb !important;
}

.dark .issue-title a {
    color: #f9fafb !important;
    text-decoration: none !important;
}

.dark .issue-title a:hover {
    color: #60a5fa !important;
}

.dark .issue-meta {
    color: #9ca3af !important;
}

.dark .issue-body {
    color: #d1d5db !important;
}

/* PR Cards Dark Mode */
.dark .pr-card {
    background: #1f2937 !important;
    border: 1px solid #374151 !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3), 0 1px 2px rgba(0, 0, 0, 0.2) !important;
}

.dark .pr-card:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4) !important;
}

.dark .pr-title {
    color: #f9fafb !important;
}

.dark .pr-title a {
    color: #f9fafb !important;
    text-decoration: none !important;
}

.dark .pr-title a:hover {
    color: #60a5fa !important;
}

.dark .pr-meta {
    color: #9ca3af !important;
}

.dark .pr-body {
    color: #d1d5db !important;
}

/* State Badges Dark Mode */
.dark .state-open {
    background: #065f46 !important;
    color: #a7f3d0 !important;
}

.dark .state-closed {
    background: #7f1d1d !important;
    color: #fecaca !important;
}

.dark .merged-badge {
    background: #065f46 !important;
    color: #a7f3d0 !important;
}

/* Vote Section Dark Mode */
.dark .vote-button {
    background: #374151 !important;
    border: 1px solid #4b5563 !important;
    color: #d1d5db !important;
}

.dark .vote-button:hover {
    background: #4b5563 !important;
    border-color: #6b7280 !important;
}

.dark .vote-section {
    border-top: 1px solid #374151 !important;
}

.dark .vote-button.voted {
    background: #1e40af !important;
    border-color: #3b82f6 !important;
    color: #dbeafe !important;
}

/* Labels Dark Mode */
.dark .label {
    background: #374151 !important;
    color: #d1d5db !important;
}

.dark .label:hover {
    background: #4b5563 !important;
}

/* Comment Count Dark Mode */
.dark .comment-count {
    color: #d1d5db !important;
}

/* Filters Dark Mode */
.dark .filters {
    background: #1f2937 !important;
    border: 1px solid #374151 !important;
}

.dark .filters input,
.dark .filters select {
    background: #374151 !important;
    border: 1px solid #4b5563 !important;
    color: #f9fafb !important;
}

.dark .filters input:focus,
.dark .filters select:focus {
    border-color: #3b82f6 !important;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2) !important;
}

.dark .filters button {
    background: #3b82f6 !important;
}

.dark .filters button:hover {
    background: #2563eb !important;
}

/* Pagination Dark Mode */
.dark .pagination a,
.dark .pagination span {
    background: #374151 !important;
    border: 1px solid #4b5563 !important;
    color: #d1d5db !important;
}

.dark .pagination a:hover {
    background: #4b5563 !important;
    border-color: #6b7280 !important;
    color: #f9fafb !important;
}

.dark .pagination .current {
    background: #3b82f6 !important;
    border-color: #3b82f6 !important;
    color: #ffffff !important;
}

/* Empty State Dark Mode */
.dark .empty-state {
    color: #9ca3af !important;
    border: 2px dashed #4b5563 !important;
    background: #1f2937 !important;
}

/* Links Dark Mode */
.dark .github-link,
.dark .back-link a {
    color: #60a5fa !important;
}

.dark .github-link:hover,
.dark .back-link a:hover {
    color: #93c5fd !important;
}

/* Comment Form Dark Mode */
.dark .comment-form {
    background: #1f2937 !important;
    border: 1px solid #374151 !important;
}

.dark .comment-form textarea {
    background: #374151 !important;
    border: 1px solid #4b5563 !important;
    color: #f9fafb !important;
}

.dark .comment-form textarea:focus {
    outline: 2px solid #3b82f6 !important;
    outline-offset: 2px !important;
    border-color: #3b82f6 !important;
}

.dark .comment-form button {
    background: #3b82f6 !important;
    color: #ffffff !important;
    border: none !important;
}

.dark .comment-form button:hover {
    background: #2563eb !important;
}

/* Related PR/Issue Cards Dark Mode */
.dark .related-pr-card,
.dark .related-issue-card {
    background: #1f2937 !important;
    border: 1px solid #374151 !important;
}

.dark .related-pr-card h4,
.dark .related-issue-card h4 {
    color: #f9fafb !important;
}

.dark .related-pr-card h4 a,
.dark .related-issue-card h4 a {
    color: #60a5fa !important;
}

.dark .related-pr-card h4 a:hover,
.dark .related-issue-card h4 a:hover {
    color: #93c5fd !important;
}

/* Related Issues Section Dark Mode */
.dark .related-issues-section {
    background: #374151 !important;
    border: 1px solid #4b5563 !important;
}

.dark .related-issues-section h4 {
    color: #f9fafb !important;
}

.dark .related-issue-item {
    background: #1f2937 !important;
    border: 1px solid #4b5563 !important;
}

.dark .related-issue-item:hover {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3) !important;
}

.dark .related-issue-item p {
    color: #9ca3af !important;
}

.dark .issue-link {
    color: #60a5fa !important;
}

.dark .issue-link:hover {
    color: #93c5fd !important;
}

.dark .issue-state-badge.state-open {
    background: #065f46 !important;
    color: #a7f3d0 !important;
}

.dark .issue-state-badge.state-closed {
    background: #7f1d1d !important;
    color: #fecaca !important;
}

.dark .relation-type {
    color: #9ca3af !important;
}

/* Links Dark Mode */
.dark .github-link,
.dark .back-link a {
    color: #60a5fa !important;
}

.dark .github-link:hover,
.dark .back-link a:hover {
    color: #93c5fd !important;
}
/* Cookie Consent Dark Mode Styling */

/* Dark mode overrides for vanilla-cookieconsent */
.dark .cm {
  background-color: #1f2937 !important; /* Dark gray background */
  border: 1px solid #374151 !important; /* Darker border */
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6) !important; /* Stronger shadow */
}

/* Main body styling */
.dark .cm__body {
  background-color: #1f2937 !important;
  color: #f9fafb !important; /* Light text */
}

/* Title styling */
.dark .cm__title {
  color: #f9fafb !important;
  font-weight: 600;
}

/* Description text */
.dark .cm__desc {
  color: #d1d5db !important; /* Slightly dimmer text */
}

/* Primary buttons (Accept All, Essential Only) */
.dark .cm__btn {
  background-color: #3b82f6 !important; /* Blue background */
  color: #ffffff !important;
  border: none !important;
  transition: background-color 0.2s ease;
}

.dark .cm__btn:hover {
  background-color: #2563eb !important; /* Darker blue on hover */
}

.dark .cm__btn:focus {
  outline: 2px solid #60a5fa !important;
  outline-offset: 2px !important;
}

/* Secondary buttons (Customize Preferences) */
.dark .cm__btn--secondary {
  background-color: #374151 !important; /* Dark gray */
  color: #f9fafb !important;
  border: 1px solid #4b5563 !important;
}

.dark .cm__btn--secondary:hover {
  background-color: #4b5563 !important;
  border-color: #6b7280 !important;
}

/* Close button */
.dark .cm__btn--close {
  background-color: transparent !important;
  color: #d1d5db !important;
  border: none !important;
  padding: 8px !important;
}

.dark .cm__btn--close:hover {
  background-color: #374151 !important;
  color: #f9fafb !important;
}

.dark .cm__btn--close svg {
  stroke: currentColor !important;
  width: 20px !important;
  height: 20px !important;
}

/* Footer styling */
.dark .cm__footer {
  background-color: #111827 !important; /* Even darker footer */
  border-top: 1px solid #374151 !important;
}

/* Links in footer */
.dark .cm__footer a {
  color: #60a5fa !important; /* Light blue links */
  text-decoration: none;
}

.dark .cm__footer a:hover {
  color: #93c5fd !important; /* Lighter blue on hover */
  text-decoration: underline;
}

/* Button groups */
.dark .cm__btn-group {
  gap: 0.5rem;
}

/* Preferences modal styling */
.dark .pm {
  background-color: #1f2937 !important;
  border: 1px solid #374151 !important;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.7) !important;
}

.dark .pm__body {
  background-color: #1f2937 !important;
  color: #f9fafb !important;
}

/* Header styling */
.dark .pm__header {
  background-color: #111827 !important;
  border-bottom: 1px solid #374151 !important;
  padding: 1.5rem !important;
}

.dark .pm__title {
  color: #f9fafb !important;
  font-weight: 600 !important;
  margin: 0 !important;
}

/* Close button in header */
.dark .pm__close-btn {
  background-color: transparent !important;
  color: #d1d5db !important;
  border: none !important;
  padding: 0.5rem !important;
  border-radius: 0.375rem !important;
}

.dark .pm__close-btn:hover {
  background-color: #374151 !important;
  color: #f9fafb !important;
}

.dark .pm__close-btn svg {
  stroke: currentColor !important;
  width: 20px !important;
  height: 20px !important;
}

/* Section styling */

.dark .pm__section {
  border-bottom: 1px solid #374151 !important;
  padding: 1.5rem !important;
}

.dark #cc-main .pm__section:not(:first-child):hover{
  background-color: #2d3848 !important;
}

.dark .pm__section:last-child {
  border-bottom: none !important;
}

/* Ensure regular sections (like "more information") don't have hover effects */
.dark .pm__section .pm__section-title-wrapper {
  background-color: transparent !important;
  cursor: default !important;
  padding: 0 !important;
}

.dark .pm__section .pm__section-title-wrapper:hover {
  background-color: transparent !important;
}

/* Section headers */
.dark .pm__section-title {
  color: #f9fafb !important;
  font-weight: 600 !important;
  font-size: 1.125rem !important;
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  text-align: left !important;
  width: 100% !important;
}

.dark .pm__section-title:hover {
  color: #e5e7eb !important;
}

.dark .pm__section-desc {
  color: #d1d5db !important;
  line-height: 1.6 !important;
  margin-top: 0.5rem !important;
}

/* Badge styling */
.dark .pm__badge {
  background-color: #065f46 !important;
  color: #a7f3d0 !important;
  padding: 0.25rem 0.75rem !important;
  border-radius: 1rem !important;
  font-size: 0.75rem !important;
  font-weight: 500 !important;
  margin-left: 0.5rem !important;
}

/* Arrow icons for expandable sections */
.dark .pm__section-arrow svg {
  stroke: #9ca3af !important;
  width: 16px !important;
  height: 16px !important;
}

/* Toggle switches */
.dark .section__toggle-wrapper {
  display: flex !important;
  align-items: center !important;
  margin-left: auto !important;
}

.dark .toggle__icon {
  background-color: #374151 !important;
  border: 2px solid #4b5563 !important;
  border-radius: 1rem !important;
  width: 44px !important;
  height: 24px !important;
  position: relative !important;
  transition: all 0.2s ease !important;
}

.dark .section__toggle:checked + .toggle__icon {
  background-color: #3b82f6 !important;
  border-color: #3b82f6 !important;
}

.dark .section__toggle:disabled + .toggle__icon {
  background-color: #065f46 !important;
  border-color: #065f46 !important;
  opacity: 0.8 !important;
}

.dark .toggle__icon-circle {
  position: absolute !important;
  top: 2px !important;
  left: 2px !important;
  width: 16px !important;
  height: 16px !important;
  background-color: #ffffff !important;
  border-radius: 50% !important;
  transition: transform 0.2s ease !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.dark .section__toggle:checked + .toggle__icon .toggle__icon-circle {
  transform: translateX(20px) !important;
}

.dark .toggle__icon-on,
.dark .toggle__icon-off {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.dark .toggle__icon-on svg,
.dark .toggle__icon-off svg {
  width: 10px !important;
  height: 10px !important;
  stroke: #374151 !important;
  stroke-width: 2 !important;
}

.dark .toggle__label {
  color: #f9fafb !important;
  margin-left: 0.75rem !important;
  font-weight: 500 !important;
}

/* Tables styling */
.dark .pm__section-table {
  background-color: #111827 !important;
  border: 1px solid #374151 !important;
  border-radius: 0.5rem !important;
  overflow: hidden !important;
  margin-top: 1rem !important;
  width: 100% !important;
}

.dark .pm__table-head {
  background-color: #0f172a !important;
}

.dark .pm__table-th {
  background-color: #0f172a !important;
  color: #f1f5f9 !important;
  font-weight: 600 !important;
  padding: 0.75rem !important;
  text-align: left !important;
  border-bottom: 1px solid #374151 !important;
}

.dark .pm__table-tr {
  border-bottom: 1px solid #374151 !important;
}

.dark .pm__table-tr:last-child {
  border-bottom: none !important;
}

.dark .pm__table-tr:hover {
  background-color: #1f2937 !important;
}

.dark .pm__table-td {
  color: #d1d5db !important;
  padding: 0.75rem !important;
  vertical-align: top !important;
}

.dark .pm__table-td:first-child {
  font-weight: 500 !important;
  color: #e5e7eb !important;
}

/* Ensure text remains readable on hover */
.dark .pm__table-tr:hover .pm__table-td {
  color: #f3f4f6 !important;
}

.dark .pm__table-tr:hover .pm__table-td:first-child {
  color: #ffffff !important;
}

/* Footer styling */
.dark .pm__footer {
  background-color: #111827 !important;
  border-top: 1px solid #374151 !important;
  padding: 1.5rem !important;
}

.dark .pm__btn-group {
  display: flex !important;
  gap: 0.75rem !important;
  margin-bottom: 0.75rem !important;
}

.dark .pm__btn-group:last-child {
  margin-bottom: 0 !important;
}

.dark .pm__btn {
  background-color: #3b82f6 !important;
  color: #ffffff !important;
  border: none !important;
  padding: 0.75rem 1.5rem !important;
  border-radius: 0.5rem !important;
  font-weight: 500 !important;
  transition: background-color 0.2s ease !important;
  cursor: pointer !important;
}

.dark .pm__btn:hover {
  background-color: #2563eb !important;
}

.dark .pm__btn--secondary {
  background-color: #374151 !important;
  color: #f9fafb !important;
  border: 1px solid #4b5563 !important;
}

.dark .pm__btn--secondary:hover {
  background-color: #4b5563 !important;
  border-color: #6b7280 !important;
}

/* Links */
.dark .cc__link {
  color: #60a5fa !important;
  text-decoration: none !important;
}

.dark .cc__link:hover {
  color: #93c5fd !important;
  text-decoration: underline !important;
}

/* Section toggles wrapper */
.dark .pm__section-toggles {
  padding: 0 !important;
}

.dark .pm__section--toggle {
  border: 1px solid #374151 !important;
  border-radius: 0.5rem !important;
  margin-bottom: 1rem !important;
  overflow: hidden !important;
}

.dark .pm__section--toggle:last-child {
  margin-bottom: 0 !important;
}

.dark .pm__section--toggle .pm__section-title-wrapper {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 1rem !important;
  background-color: #1f2937 !important;
  cursor: pointer !important;
  position: relative !important;
}

.dark .pm__section--toggle .pm__section-title-wrapper:hover {
  background-color: #2d3848 !important;
}

/* Fix for accordion title to not overlap with toggle */
.dark .pm__section--toggle .pm__section-title-wrapper .pm__section-title {
  flex: 1 !important;
  margin-right: 1rem !important;
  padding-right: 3rem !important; /* Space for toggle and arrow */
}

/* Position toggle and arrow properly */
.dark .pm__section--toggle .pm__section-title-wrapper .section__toggle-wrapper {
  position: absolute !important;
  right: 3rem !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
}

.dark #cc-main .pm__section--toggle .pm__section-title-wrapper .pm__section-arrow {
  position: absolute !important;
  right: 1rem !important;
  left: auto;
  top: 50% !important;
  transform: translateY(-50%) !important;
}

.dark .pm__section-desc-wrapper {
  padding: 1rem !important;
  background-color: #1a202c !important;
  border-top: 1px solid #374151 !important;
}

/* Overlay/backdrop */
.dark .cm__overlay {
  background-color: rgba(0, 0, 0, 0.7) !important;
}

/* Animation improvements for dark mode */
.dark .cm {
  animation: cookieConsentSlideIn 0.3s ease-out;
}

@keyframes cookieConsentSlideIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Responsive adjustments for dark mode */
@media (max-width: 768px) {
  .dark .cm {
    margin: 1rem !important;
  }
  
  .dark .cm__btns {
    flex-direction: column !important;
    gap: 0.5rem !important;
  }
  
  .dark .cm__btn-group {
    width: 100% !important;
  }
  
  .dark .cm__btn {
    width: 100% !important;
  }
}

/* Accessibility improvements */
.dark .cm__btn:focus-visible {
  outline: 2px solid #60a5fa !important;
  outline-offset: 2px !important;
}

.dark .cm__btn--close:focus-visible {
  outline: 2px solid #60a5fa !important;
  outline-offset: 2px !important;
  border-radius: 4px !important;
}

/* High contrast mode support */
@media (prefers-contrast: high) {
  .dark .cm {
    border: 2px solid #ffffff !important;
  }
  
  .dark .cm__btn {
    border: 1px solid #ffffff !important;
  }
  
  .dark .cm__btn--secondary {
    border: 1px solid #ffffff !important;
  }
}
@charset "utf-8";

@charset "utf-8";