/* style.css */

/* 隐藏滚动条但保留功能 */
.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

/* 页面切换动画 */
.page-section { display: none; opacity: 0; transition: opacity 0.2s ease-in-out; }
.page-section.active { display: block; opacity: 1; }

/* 侧边栏动画 */
#sidebar { transition: transform 0.3s ease-in-out; }
#sidebar.closed { transform: translateX(-100%); }

/* 模态框背景 */
#modal-backdrop { transition: opacity 0.2s; }
#modal-backdrop.hidden { pointer-events: none; opacity: 0; }

/* 自定义滑块轨道 - 核心修复：强制宽度为 100% */
input[type=range] { 
    -webkit-appearance: none; 
    background: transparent; 
    width: 100% !important; /* 强制占满父容器 */
    display: block; 
    margin: 10px 0; /* 增加一点上下间距防止误触 */
}

input[type=range]::-webkit-slider-thumb {
    -webkit-appearance: none;
    height: 28px; width: 28px;
    border-radius: 50%;
    background: #10b981;
    cursor: pointer;
    margin-top: -11px; /* 垂直居中对齐轨道 */
    border: 3px solid white;
    box-shadow: 0 2px 6px rgba(0,0,0,0.3);
    position: relative;
    z-index: 2;
}

input[type=range]::-webkit-slider-runnable-track {
    width: 100%; 
    height: 6px;
    background: #e5e7eb;
    border-radius: 999px;
    cursor: pointer;
}

.dark input[type=range]::-webkit-slider-thumb { border-color: #1f2937; }
.dark input[type=range]::-webkit-slider-runnable-track { background: #374151; }

/* 底部导航激活状态 */
.nav-btn.active-tab { color: #10b981; }
.nav-btn.active-tab span { font-weight: bold; }

/* 仪表盘图表动画 */
path {
    transition: d 0.5s ease-in-out;
}

/* 总结星星样式 */
.star-btn {
    font-size: 2rem;
    color: #e5e7eb; /* Gray-200 */
    transition: color 0.2s;
    cursor: pointer;
}
.star-btn.active {
    color: #fbbf24; /* Amber-400 */
}

/* 规则灯光样式 */
.rule-light {
    width: 2rem; height: 2rem;
    border-radius: 0.5rem;
    background-color: #f3f4f6; /* default gray */
    border: 2px solid #e5e7eb;
    transition: all 0.3s;
}
.rule-light.active-green { background-color: #10b981; border-color: #10b981; color: white; }
.rule-light.active-red { background-color: #ef4444; border-color: #ef4444; color: white; }
.rule-light.active-yellow { background-color: #f59e0b; border-color: #f59e0b; color: white; }
.rule-light.active-gray { background-color: #9ca3af; border-color: #9ca3af; color: white; }

/* 学习板块的数字样式 */
.study-badge {
    width: 2rem; height: 2rem;
    border-radius: 0.5rem;
    display: flex; align-items: center; justify-content: center;
    font-weight: bold; font-size: 0.875rem;
    background-color: #f3f4f6; color: #9ca3af;
}
.study-badge.s-0 { background-color: #9ca3af; color: white; }
.study-badge.s-1 { background-color: #b91c1c; color: white; } /* 暗红 */
.study-badge.s-2 { background-color: #f59e0b; color: white; } /* 黄 */
.study-badge.s-3 { background-color: #10b981; color: white; } /* 绿 */


/* 日历弹窗 */
.calendar-day {
    height: 2.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px; /* 圆形 */
    cursor: pointer;
    transition: all 0.2s;
    position: relative;
}

.calendar-day:hover {
    background-color: #f3f4f6; /* hover gray */
}
.dark .calendar-day:hover {
    background-color: #374151;
}

/* 选中态 (深绿背景) - 优先级最高 */
.calendar-day.selected {
    background-color: #10b981 !important; /* 强制覆盖灰色 */
    color: white !important;
    font-weight: bold;
    box-shadow: 0 4px 6px rgba(16, 185, 129, 0.3); /* 加点阴影更明显 */
}

/* 有数据标记 (灰色圆点背景) */
.calendar-day.has-data::after {
    content: '';
    position: absolute;
    bottom: 4px;
    width: 4px;
    height: 4px;
    background-color: #9ca3af;
    border-radius: 50%;
}
/* 如果选中了，圆点变白 */
.calendar-day.selected.has-data::after {
    background-color: white;
}

/* 有数据标记 (淡灰背景) - 优先级较低 */
.calendar-day.has-data-bg {
    background-color: #f3f4f6;
    color: #1f2937;
    font-weight: 600;
}
.dark .calendar-day.has-data-bg {
    background-color: #374151;
    color: #f3f4f6;
}