/* css/modules/custom-index.css */
/* Extracted styles from index.html for better organization - Notes section removed */

/* Settings panel styling (within Helper Drawer) */
.settings-section {
    margin-top: 1rem;
}

.setting-item {
    display: flex;
    align-items: center; 
    justify-content: space-between;
    padding: 0.75rem 0; /* Keep vertical padding, no horizontal padding on the item itself */
    border-bottom: 1px solid var(--clr-border);
    gap: 1rem; /* Gap between label block, slider, and value */
}

.setting-item:last-child {
    border-bottom: none;
}

.setting-label {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    cursor: pointer;
    gap: 0.125rem; 
}

.setting-title {
    font-weight: 600;
    color: var(--clr-ink);
}

.setting-description {
    font-size: 0.85rem;
    color: var(--clr-ink-light, #5a5f78); 
    line-height: 1.4;
}

.setting-checkbox,
.theme-toggle__checkbox { 
    appearance: none;
    -webkit-appearance: none; 
    width: 40px; 
    height: 20px;
    background-color: var(--clr-border);
    border-radius: 10px;
    position: relative;
    cursor: pointer;
    outline: none;
    transition: background-color var(--transition-fast) ease-out;
    flex-shrink: 0;
}

.setting-checkbox::before,
.theme-toggle__checkbox::before {
    content: '';
    position: absolute;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background-color: white;
    top: 2px;
    left: 2px;
    transition: transform var(--transition-fast) ease-out;
}

.setting-checkbox:checked,
.theme-toggle__checkbox:checked {
    background-color: var(--clr-indigo);
}

.setting-checkbox:checked::before,
.theme-toggle__checkbox:checked::before {
    transform: translateX(20px);
}

.setting-checkbox:focus-visible,
.theme-toggle__checkbox:focus-visible {
    box-shadow: 0 0 0 2px var(--clr-paper, #F9FAFD), 0 0 0 4px var(--clr-highlight, #FFE583); 
}

.setting-slider {
    width: 100px;
    flex-shrink: 0;
    margin: 0 0.5rem;
    accent-color: var(--clr-indigo);
}

.setting-slider::-webkit-slider-thumb {
    appearance: none; 
    -webkit-appearance: none;
    width: 16px; 
    height: 16px; 
    background-color: var(--clr-indigo); 
    border-radius: 50%;
    cursor: pointer;
}
.setting-slider::-moz-range-thumb {
    width: 16px; 
    height: 16px; 
    background-color: var(--clr-indigo); 
    border-radius: 50%;
    border: none; 
    cursor: pointer;
}

.setting-value { /* The "16px" text */
    font-size: 0.9rem;
    color: var(--clr-indigo);
    font-weight: 600;
    min-width: 45px; 
    text-align: right; 
    flex-shrink: 0; 
    padding-right: var(--space-sm, 0.75rem);
}

/* Card list layout styles */
.card-list {
    display: grid;
    gap: var(--space-lg, 1.5rem);
}
.card-list--two-column {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
}

/* Header site title link styling */
.site-identity .title-link {
    text-decoration: none;
    color: inherit; 
}
.site-identity .title-link:hover,
.site-identity .title-link:focus-visible {
    text-decoration: none; 
}

/* Helper Drawer QuickNav links styling */
#panel-quicknav ul {
    list-style: none;
    padding-left: 0;
    margin-top: var(--space-sm);
}
#panel-quicknav li a {
    display: block;
    padding: var(--space-xs, 0.5rem) var(--space-sm, 0.75rem);
    text-decoration: none;
    color: var(--clr-indigo);
    border-radius: var(--space-2xs, 4px);
    margin-bottom: var(--space-2xs, 4px);
    transition: background-color var(--transition-fast) ease-out, color var(--transition-fast) ease-out;
}
#panel-quicknav li a:hover,
#panel-quicknav li a:focus-visible {
    background-color: var(--clr-lavender);
    color: var(--clr-indigo-dark, var(--clr-indigo));
    outline: 2px solid transparent; 
    outline-offset: 2px;
}

/* === TAB PANEL VISIBILITY === */

/* Base style for all tab panels in the helper drawer */
.helper-drawer__tabpanel {
    display: none; /* Hide all panels by default */
    padding: 1rem; /* Default padding from drawer.css */
    flex-grow: 1;   /* Allow panel to grow, from drawer.css */
    overflow-y: auto; /* Allow scrolling within panel, from drawer.css */
    max-height: calc(100vh - 200px); /* Prevent panels from being too tall */
}

/* Show only the active tab panel */
.helper-drawer__tabpanel.is-active {
    display: block; /* Default display for active panels */
}

/* Ensure panels display correctly */
#panel-quicknav.is-active,
#panel-settings.is-active {
    display: block;
    height: auto; /* Allow content to determine height */
}

/* Sidebar navigation dot removal */
.sidebar .sidebar-group-content ul > li > a::before {
    background-color: transparent !important; /* Makes the dot's background invisible */
    width: 0 !important;                      /* Removes the dot's width */
    height: 0 !important;                     /* Removes the dot's height */
    border-radius: 0 !important;              /* Removes the dot's circular shape */
}

/* Ensure the desired padding and display from sidebar.css are respected for the link itself */
.sidebar .sidebar-group-content ul > li > a {
    display: flex !important;       /* Crucial for aligning number and text */
    align-items: center !important;
    padding: 0.6rem 1rem !important; /* Default padding from sidebar.css */
}

/* === HIDE NOTES SECTION COMPLETELY === */
/* This ensures Notes tab and panel are hidden even if still in HTML */
#tab-notes {
    display: none !important;
}

#panel-notes {
    display: none !important;
}

/* Adjust tab widths for remaining 2 tabs */
.helper-drawer__tab {
    flex: 1 1 50% !important; /* Each tab takes 50% width */
    padding: 0.75rem 1rem !important;
    font-size: 0.95rem !important;
}