/* 交易信息独立样式: 左侧侧边栏双栏布局机制 */

/* 双栏布局大容器 */
.trade-layout {
    display: flex;
    gap: 24px;
    align-items: flex-start;
    width: 1300px;
    margin: 0 auto;
}

/* 覆盖复用的 subpage-card 定宽，占据右侧剩余空间 */
.trade-layout .subpage-card {
    width: auto;
    flex: 1;
    min-width: 0;
    margin: 0;
}

/* 左侧栏容器基础 */
.trade-sidebar {
    width: 220px;
    background: transparent;
    border-radius: 8px;
    box-shadow: 0px 2px 12px rgba(4, 44, 101, 0.1);
    overflow: hidden;
}

/* 侧边栏头部 - '交易信息'字样及贴图 */
.trade-sidebar-header {
    height: 100px;
    background-image: url('../images/left_title.png');
    background-size: cover;
    background-position: center;
    color: #FFFFFF;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-left: 30px;
}

.trade-sidebar-header h2 {
    font-size: 22px;
    font-weight: normal;
    margin: 0 0 2px 0;
}

.trade-sidebar-header p {
    font-size: 12px;
    opacity: 0.4;
    margin: 0;
    line-height: 1.5;
}

/* 侧边栏菜单承载区 */
.trade-sidebar-menu {
    list-style: none;
    margin: 0;
    padding: 0;
    background: #FFFFFF;
}

/* 单个菜单外壳 */
.trade-menu-item {
    padding: 0;
    margin: 0;
}

/* 菜单触控链接及内部对齐布局 */
.trade-menu-item a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 60px;
    padding: 0 24px 0 20px;
    text-decoration: none;
    color: #333333;
    background-color: #FFFFFF;
    font-size: 16px;
    border-bottom: 1px solid rgba(153, 153, 153, 0.1);
    transition: background-color 0.2s, color 0.2s;
}

.trade-menu-item:last-child a {
    border-bottom: none;
}

/* 未选中悬停呈现高亮橙色 */
.trade-menu-item:not(.current) a:hover {
    color: #FE9900;
}
.trade-menu-item:not(.current) a:hover svg path {
    stroke: #FE9900;
}

/* 选中项专属纯色背景（使用切图渲染白字） */
.trade-menu-item.current a {
    color: #FFFFFF;
    background-color: transparent;
    background-image: url('../images/left_selected.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    border-bottom: none;
}

/* =========================================
   右侧主体区域内部 - 筛选模块控件
========================================= */
.subpage-filter-container {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 24px;
}

.filter-row {
    display: flex;
    gap: 6px;
    align-items: center;
}

.filter-label {
    width: 70px;
    text-align: right;
    color: #666666;
    font-size: 14px;
    font-family: 'Source Han Sans CN', sans-serif;
    line-height: 26px; 
}

.filter-options {
    display: flex;
    gap: 10px;
    align-items: center;
    flex-wrap: wrap;
}

.filter-option {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 26px;
    padding: 0 12px;
    border-radius: 4px;
    font-size: 14px;
    font-family: 'Source Han Sans CN', sans-serif;
    cursor: pointer;
    box-sizing: border-box;
    background-color: #F7F7F7;
    color: #666666;
    border: 1px solid transparent;
    transition: all 0.2s;
}

.filter-option:not(.current):hover {
    color: #FE9900;
}

.filter-option.current {
    background-color: #FE9900;
    color: #FFFFFF;
    font-weight: 700;
    border-color: #FE9900;
}

/* 带有自定义日期的范围输入框组合 */
.filter-date-range {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-left: 2px;
    transition: all 0.2s;
}

.filter-date-range.disabled {
    opacity: 0.5;
    pointer-events: none;
}

.filter-date-range.disabled .filter-date-input {
    background-color: #F7F7F7;
    cursor: not-allowed;
}

.filter-date-range.disabled input {
    cursor: not-allowed;
    background-color: transparent;
}

.filter-date-input {
    position: relative;
    display: flex;
    align-items: center;
    width: 160px;
    height: 30px;
    border: 1px solid rgba(153, 153, 153, 0.2);
    border-radius: 4px;
    padding: 0 10px; /* 略微缩减内边距给图标腾空间 */
    background: #FFFFFF;
    box-sizing: border-box;
    transition: all 0.2s;
    overflow: hidden; /* 确保边框完整且内容不溢出 */
}

.filter-date-input:hover:not(.disabled) {
    border-color: #FE9900;
}

/* 适配 type="text" 的输入框 */
.filter-date-input input {
    flex: 1; /* 重要：让出空间给右侧图标 */
    min-width: 0;
    border: none;
    outline: none;
    font-size: 13px;
    color: #333333;
    background: transparent;
    cursor: pointer;
    font-family: inherit;
    height: 100%;
}

/* 之前的覆盖层只需针对自定义类名，不再依赖原生 indicator */
.custom-date-trigger {
    cursor: pointer;
}

.filter-date-input input::placeholder {
    color: #BAC4CE;
}

/* =========================================
   深度定制：橙色主题时间选择面板 (Custom Date Picker)
   解决原生面板无法定制边框、高亮色及投影的问题
========================================= */
.custom-date-picker {
    position: absolute;
    top: 100%;
    left: 0;
    width: 280px;
    background: #FFFFFF;
    border: 1px solid #EDEDF2;
    border-radius: 8px;
    box-shadow: 0px 4px 20px rgba(4, 44, 101, 0.15);
    margin-top: 8px;
    padding: 16px;
    z-index: 2000;
    user-select: none;
    display: none; /* 由 JS 控制显示 */
    font-family: 'Source Han Sans CN', sans-serif;
}

.picker-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}

.picker-title {
    font-size: 16px;
    font-weight: 700;
    color: #333333;
}

.picker-btns {
    display: flex;
    gap: 8px;
}

.picker-btn {
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    border-radius: 4px;
    transition: background 0.2s;
}

.picker-btn:hover {
    background: #F7F7F7;
}

.picker-weekdays {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    text-align: center;
    margin-bottom: 8px;
}

.weekday {
    font-size: 12px;
    color: #999999;
    padding: 4px 0;
}

.picker-days {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 2px;
}

.day {
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    color: #333333;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s;
}

.day:hover:not(.empty) {
    background: #FFF4E5;
    color: #FE9900;
}

/* 核心要求：选中日期背景为橙色，文字为白色，无黑色描边 */
.day.current {
    background: #FE9900 !important;
    color: #FFFFFF !important;
    font-weight: 700;
    border: none !important;
    box-shadow: none !important;
}

.day.today {
    color: #FE9900;
    font-weight: 700;
    position: relative;
}

.day.today::after {
    content: '';
    position: absolute;
    bottom: 4px;
    width: 4px;
    height: 4px;
    background: #FE9900;
    border-radius: 50%;
}

.day.today.current::after {
    background: #FFFFFF;
}

.day.empty {
    cursor: default;
}

.icon-calendar {
    display: flex;
    align-items: center;
}

.date-separator {
    width: 12px;
    height: 1px;
    background-color: #E6E6E6;
}

/* 选中项箭头描边颜色随字体变白 */
.trade-menu-item.current a svg path {
    stroke: #FFFFFF;
}