/* ==========================================
   赛事日历样式
   ========================================== */

/* ---- 日历专用标记色 ---- */
:root {
   --cal-dot: #ff6b6b;             /* 待报名小圆点 */
}

/* 赛事日历样式 */

/* 日历容器 */
#calendar-section {
   background-color: var(--card-bg-color);
   border-radius: var(--border-radius-md);
   padding: var(--spacing-lg);
   box-shadow: var(--shadow-light);
   border: 1px solid var(--border-color);
   margin-bottom: var(--spacing-xl);
}

/* 日历标题 */
#calendar-section h2 {
   margin-bottom: var(--spacing-lg);
   color: var(--heading-color);
}



/* 日历容器 */
#calendar {
   background-color: var(--background-color);
   border-radius: var(--border-radius-md);
   padding: var(--spacing-lg);
   border: 1px solid var(--border-color);
}

/* 赛事图例 */
.calendar-legend {
   display: flex;
   align-items: center;
   gap: var(--spacing-md);
   margin-bottom: var(--spacing-lg);
   flex-wrap: wrap;
   background-color: var(--lighter-background);
   padding: var(--spacing-md);
   border-radius: var(--border-radius-md);
   border: 1px solid var(--border-color);
}

/* 图例标题 */
.legend-title {
   font-weight: var(--font-weight-semibold);
   color: var(--heading-color);
   margin-right: var(--spacing-sm);
}

/* 图例项 */
.legend-item {
   display: flex;
   align-items: center;
   gap: var(--spacing-xs);
   font-size: var(--font-size-sm);
   color: var(--text-color);
}

/* 图例颜色方块 */
.legend-color {
   display: inline-block;
   width: 16px;
   height: 16px;
   border-radius: var(--border-radius-xs);
   border: 1px solid var(--border-color);
}

/* 图例文字 */
.legend-text {
   font-size: var(--font-size-sm-plus);
}

/* 日历头部 */
.calendar-header {
   display: flex;
   justify-content: space-between;
   align-items: center;
   margin-bottom: var(--spacing-lg);
}

/* 月份标题 */
.calendar-month-title {
   margin: 0;
   font-size: var(--font-size-2xl);
   color: var(--heading-color);
}

/* 导航按钮 */
.calendar-nav-btn {
   background-color: var(--accent-color);
   color: var(--white);
   border: none;
   border-radius: var(--border-radius-circle);
   width: 40px;
   height: 40px;
   font-size: var(--font-size-lg-plus);
   cursor: pointer;
   display: flex;
   align-items: center;
   justify-content: center;
   transition: var(--transition-default);
}

.calendar-nav-btn:hover {
   background-color: var(--dark-accent);
   transform: scale(1.1);
}

/* 日历表格 */
.calendar-table {
   width: 100%;
   border-collapse: collapse;
   table-layout: fixed;
}

/* 日历表头 */
.calendar-table th {
   padding: var(--spacing-md);
   text-align: center;
   font-weight: var(--font-weight-semibold);
   color: var(--heading-color);
   background-color: var(--light-accent);
   border: 1px solid var(--border-color);
}

/* 日历单元格 */
.calendar-table td {
   padding: var(--spacing-xs);
   text-align: center;
   vertical-align: top;
   border: 1px solid var(--border-color);
   height: 100px;
   background-color: var(--background-color);
   transition: var(--transition-default);
   position: relative;
   cursor: pointer;
}

/* 赛事提示框 */
.race-tooltip {
   position: absolute;
   background-color: var(--card-bg-color);
   border: 1px solid var(--border-color);
   border-radius: var(--border-radius-sm);
   padding: var(--spacing-sm);
   box-shadow: var(--shadow-medium);
   z-index: 1000;
   pointer-events: none;
   width: 250px;
   font-size: var(--font-size-sm);
   line-height: 1.4;
   color: var(--text-color);
}

/* 提示框标题 */
.race-tooltip-title {
   font-weight: var(--font-weight-semibold);
   margin-bottom: var(--spacing-xs);
   color: var(--heading-color);
   white-space: normal;
   word-wrap: break-word;
   line-height: 1.3;
}

/* 提示框信息项 */
.race-tooltip-item {
   font-size: var(--font-size-xs);
   margin-bottom: 4px;
   color: var(--secondary-text-color);
}

/* 提示框信息标签 */
.race-tooltip-label {
   font-weight: var(--font-weight-medium);
   color: var(--text-color);
}

.race-tooltip-divider {
   border-top: 1px solid var(--border-color);
   margin: var(--spacing-xs) 0;
 }

/* 年视图单元格也需要相对定位 */
.calendar-month-table .calendar-day {
   position: relative;
}

/* 赛事类型颜色样式由JavaScript动态生成，不再需要硬编码 */

/* 非赛事日期的悬停样式 */
.calendar-table td.calendar-day:not([class*="race-"]):hover {
   background-color: var(--light-accent);
}

/* 有赛事的日期悬停样式 - 月视图 */
.calendar-table td.calendar-day[class*="race-"]:hover {
   opacity: 0.9;
}

/* 其他月份的日期 */
.calendar-day.other-month {
   color: var(--secondary-text-color);
   background-color: var(--lighter-background);
}

/* 有赛事的日期样式 - 通用 */
.calendar-day[class*="race-"],
.calendar-month-table .calendar-day[class*="race-"] {
   background-color: var(--race-color);
}

/* 有赛事的日期悬停样式 - 年视图 */
.calendar-month-table .calendar-day[class*="race-"]:hover {
   /* 保持原有赛事颜色，只增加透明度 */
   opacity: 0.8;
}



/* 年视图样式 */
.calendar-year-title {
   margin: 0;
   font-size: var(--font-size-3xl);
   color: var(--heading-color);
}

.calendar-year-view {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
   gap: var(--spacing-md);
}

.calendar-month-container {
   background-color: var(--background-color);
   border: 1px solid var(--border-color);
   border-radius: var(--border-radius-md);
   padding: var(--spacing-md);
}

.calendar-month-container .calendar-month-title {
   font-size: var(--font-size-lg-plus);
   margin-bottom: var(--spacing-md);
   text-align: center;
}

.calendar-month-table {
   width: 100%;
   border-collapse: collapse;
   table-layout: fixed;
}

.calendar-month-table .weekday-header {
   font-size: var(--font-size-xs);
   padding: var(--spacing-xs);
   background-color: var(--light-accent);
   border: 1px solid var(--border-color);
}

.calendar-month-table .calendar-day {
   font-size: var(--font-size-xs);
   padding: var(--spacing-xs);
   height: 30px;
   text-align: center;
   border: 1px solid var(--border-color);
   background-color: var(--background-color);
   transition: var(--transition-default);
}

/* 年视图中非赛事日期的悬停样式 */
.calendar-month-table .calendar-day:not([class*="race-"]):hover {
   background-color: var(--light-accent);
}



.calendar-month-table .calendar-day.empty {
   background-color: var(--lighter-background);
}

/* 赛事分隔线样式 */
.calendar-races-divider {
   margin: var(--spacing-lg) 0;
   border: none;
   border-top: 1px solid var(--border-color);
}

/* 赛事项样式 */
.race-item {
   margin-bottom: var(--spacing-md);
   background-color: var(--card-bg-color);
   border: 1px solid var(--border-color);
   border-radius: var(--border-radius-md);
   padding: var(--spacing-md);
   transition: var(--transition-default);
   cursor: pointer;
}

.race-item:hover {
   box-shadow: var(--shadow-medium);
   transform: translateY(-2px);
}

.race-item-header {
   display: flex;
   justify-content: space-between;
   align-items: center;
   margin-bottom: var(--spacing-xs);
   font-weight: var(--font-weight-medium);
   color: var(--heading-color);
}

.race-item-date {
   font-size: var(--font-size-sm);
}

.race-item-time {
   font-size: var(--font-size-xs);
   color: var(--secondary-text-color);
}

.race-item-name {
   margin-bottom: var(--spacing-xs);
   font-weight: var(--font-weight-semibold);
   color: var(--text-color);
}

.race-item-content {
   padding: 0 var(--spacing-xs);
}

.race-item-name {
   margin-bottom: var(--spacing-xs);
   font-weight: var(--font-weight-semibold);
   color: var(--text-color);
   font-size: var(--font-size-sm);
}

.race-item-time {
   font-size: var(--font-size-xs);
   color: var(--secondary-text-color);
   margin-bottom: var(--spacing-xs);
}

.race-item-details {
   display: flex;
   flex-wrap: wrap;
   gap: var(--spacing-xs);
   font-size: var(--font-size-2xs);
   color: var(--secondary-text-color);
}

.race-item-location,
.race-item-event,
.race-item-category {
   background-color: var(--light-accent);
   padding: 2px 8px;
   border-radius: var(--border-radius-sm);
}

/* 响应式设计 */
@media (max-width: 768px) {
   .filter-row {
       flex-direction: column;
       align-items: stretch;
   }
   
   .filter-item {
       flex-direction: column;
       align-items: stretch;
   }
   
   .filter-item label {
       min-width: auto;
       margin-bottom: var(--spacing-xs);
   }
   
   .filter-buttons {
       justify-content: center;
   }
   
   .calendar-table td {
       height: 80px;
       padding: var(--spacing-xs) 0;
   }
   
   .race-list-on-day {
       max-height: 60px;
       font-size: var(--font-size-2xs);
   }
   
   .modal-content {
       width: 95%;
       margin: var(--spacing-md);
   }
   
   .calendar-year-view {
       grid-template-columns: 1fr;
   }
   
   .race-item-header {
       flex-direction: column;
       align-items: flex-start;
       gap: var(--spacing-xs);
   }
   
   .race-item-details {
       flex-direction: column;
       gap: var(--spacing-xs);
   }
}

@media (max-width: 480px) {
   .calendar-header {
       flex-direction: column;
       gap: var(--spacing-sm);
   }
   
   .calendar-month-title {
       font-size: var(--font-size-lg-plus);
   }
   
   .calendar-year-title {
       font-size: var(--font-size-2xl);
   }
   
   .calendar-table th,
   .calendar-table td {
       padding: var(--spacing-xs) 0;
       font-size: var(--font-size-sm);
   }
   
   .calendar-table td {
       height: 70px;
   }
   
   .race-list-on-day {
       display: none;
   }
   
   .calendar-day.has-race {
       position: relative;
   }
   
   .calendar-day.has-race::after {
       content: '';
       position: absolute;
       bottom: 5px;
       left: 50%;
       transform: translateX(-50%);
       width: 8px;
       height: 8px;
       background-color: var(--cal-dot);
       border-radius: var(--border-radius-circle);
   }
}

/* 待抽签赛事样式 */
.pending-lottery-section {
   margin-top: var(--spacing-md);
}

.pending-lottery-title {
   color: var(--accent-color);
   font-size: var(--font-size-base);
   font-weight: var(--font-weight-semibold);
   margin-bottom: var(--spacing-sm);
   padding-bottom: var(--spacing-xs);
   border-bottom: 2px dashed var(--accent-color);
   display: flex;
   align-items: center;
   gap: var(--spacing-xs);
}

.pending-lottery-title i {
   font-size: var(--font-size-sm);
}

/* 日历中待抽签赛事单元格样式 */
.calendar-day.race-pending-lottery {
   border: 2px dashed var(--accent-color);
   font-weight: var(--font-weight-bold);
}

.calendar-day.race-to-be-registered {
   border: 2px dashed var(--color-purple);
   font-weight: var(--font-weight-bold);
}

/* 日历中未中签赛事单元格样式 */
.calendar-day.race-not-selected {
   border: 2px dashed var(--color-danger);
   font-weight: var(--font-weight-bold);
   opacity: 0.6;
}

.calendar-day.race-dimmed {
   opacity: 0.35;
   border: none;
   font-weight: var(--font-weight-normal);
}

.race-filter-bar {
   display: flex;
   align-items: center;
   gap: var(--spacing-sm);
   margin-top: var(--spacing-md);
   flex-wrap: wrap;
}

.race-filter-toggle {
   display: inline-flex;
   align-items: center;
   gap: 4px;
   padding: 6px 14px;
   border: 1px solid var(--border-color);
   border-radius: var(--border-radius-sm);
   background: var(--card-bg-color);
   color: var(--text-color);
   cursor: pointer;
   font-size: var(--font-size-sm-plus);
   transition: all 0.2s;
}

.race-filter-toggle:hover {
   border-color: var(--accent-color);
}

.race-filter-toggle .filter-icon {
   font-size: var(--font-size-sm);
}

.race-filter-options {
   display: flex;
   gap: var(--spacing-xs);
   overflow: hidden;
   max-height: 40px;
   transition: max-height 0.3s ease, opacity 0.3s ease, margin 0.3s ease;
   opacity: 1;
}

.race-filter-options.collapsed {
   max-height: 0;
   opacity: 0;
   margin: 0;
   pointer-events: none;
}

.race-filter-btn {
   padding: var(--spacing-xs) var(--spacing-md-plus);
   border: 1px solid var(--border-color);
   border-radius: var(--border-radius-sm);
   background: var(--card-bg-color);
   color: var(--secondary-text-color);
   cursor: pointer;
   font-size: var(--font-size-xs);
   transition: all 0.2s;
}

.race-filter-btn:hover {
   border-color: var(--accent-color);
   color: var(--text-color);
}

.race-filter-btn.active {
   background: var(--accent-color);
   color: var(--white);
   border-color: var(--accent-color);
}


@media (max-width: 600px) {
    .mainbox {
        padding: var(--spacing-sm);
    }
}


@media (max-width: 900px) {
    /* 平板宽度: 容器间距收紧 */
    .mainbox {
        padding: var(--spacing-lg);
    }
}

@media (max-width: 1200px) {
    /* 1200px: 大屏到中屏过渡,无特殊调整 */
}


@media (max-width: 1800px) {
    /* 1800px: 超大屏限制,无特殊调整 */
}