/* Progress tracking styles */

/* Sidebar styling */
.border-sidebar-border {
    border-color: #374151;
}

/* Progress bar container */
[data-progress-container] {
    padding: 0 1rem 0.25rem 1rem;
    margin-top: -0.5rem; 
    margin-bottom: 0.25rem; 
}

/* Progress bar styling */
progress {
    -webkit-appearance: none;
    appearance: none;
    border-radius: 9999px;
    height: 3px;
    width: 100%;
    background-color: rgba(255, 255, 255, 0.1); 
    overflow: hidden;
    margin: 0;
    transition: all 0.2s ease;
}

/* WebKit/Blink browsers */
progress[value]::-webkit-progress-bar {
    background-color: transparent;
    border-radius: 9999px;
}

progress[value]::-webkit-progress-value {
    background: linear-gradient(90deg, hsl(var(--sidebar-primary)), hsl(var(--sidebar-accent)));
    border-radius: 9999px;
    transition: width 0.3s ease-in-out;
}

/* Firefox */
progress[value] {
    background-color: rgba(255, 255, 255, 0.1);
    border: none;
}

progress[value]::-moz-progress-bar {
    background: linear-gradient(90deg, hsl(var(--sidebar-primary)), hsl(var(--sidebar-accent)));
    border-radius: 9999px;
}

/* Completed subtopic styling */
a[data-completed="true"] {
    color: hsl(var(--sidebar-accent));
}

/* Mark complete button styling */
#mark-complete-btn:disabled {
    opacity: 0.7;
    cursor: not-allowed;
}


/* Completion checkbox in sidebar */
.completion-checkbox {
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Completed subtopic styling */
a[data-completed="true"] {
    background-color: hsla(var(--sidebar-accent) / 0.1);
}

a[data-subtopic-slug]:hover  {
    background-color: hsla(var(--sidebar-accent) / 0.2);
}

a[data-subtopic-selected="true"] {
    background-color: hsla(var(--sidebar-accent) / 0.3);
}
/* Mark complete button styling */
#mark-complete {
    height: 1.25rem;
    width: 1.25rem;
}