/* ============================================================================
   开课记录列表增强（jy-record-refine 作用域 + jy-refine-* 自有类）
   ----------------------------------------------------------------------------
   参考设计稿「我的课程列表 - 合并有效期列」：
   - 卡片：白底 14px 圆角 + 细边框，hover 抬升加深阴影
   - 左区：120×80 横版封面 + 课程标题（17px/600）+ 编号（等宽字体）/课时元信息行
   - 中区：开通日期与有效期合并为单列「有效期 start ~ end」，两侧虚线分隔；
     未过期项在日期下方展示期限倒计时（el-progress 进度 + 文案），今日到期红色警示
   - 右区：胶囊按钮 + 箭头图标，hover 右移、主题色 #007BB6 → 副色 #fd9644

   作用范围：仅在宿主元素加 .jy-record-refine、卡片加 .jy-refine-card 时生效
   （order_list 页），不影响其他页面的 jy-record-item 原始样式。
   ≤991.98px 移动端为自有类补堆叠回退（组件 diy-table.css 的移动端规则
   只覆盖其自有类，覆盖不到本文件的 jy-refine-* 结构）。
   ============================================================================ */

/* ==================== 桌面端（≥992px） ==================== */
@media screen and (min-width: 992px) {

    /* ===== 卡片容器：参考稿白底圆角卡片 ===== */
    .jy-record-refine .jy-refine-card {
        height: auto;
        min-height: 128px;
        padding: 10px 16px;
        border: 1px solid #e8ebf2;
        border-radius: 14px;
        background-color: #fff;
        box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
        transition: box-shadow 0.3s ease, border-color 0.3s ease, transform 0.3s ease;
    }

    .jy-record-refine .jy-refine-card:hover {
        transform: translateY(-2px);
        border-color: rgba(0, 123, 182, 0.35);
        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
    }

    /* ===== 左区：封面 + 课程核心信息 ===== */
    .jy-record-refine .jy-refine-course {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        flex: 2;
        min-width: 0;
    }

    /* 封面：120×80 横版缩略图，圆角 + 细边框 */
    .jy-record-refine .jy-refine-cover {
        width: 160px;
        height: 100px;
        flex-shrink: 0;
        margin-right: 24px;
        border: 1px solid #e8ebf2;
        border-radius: 10px;
        background-color: #f0f2f5;
        overflow: hidden;
    }

    .jy-record-refine .jy-refine-cover img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    /* 小桌面（992~1199）：封面收窄，给编号留空间 */
    @media screen and (max-width: 1199.98px) {
        .jy-record-refine .jy-refine-cover {
            margin-right: 10px;
        }

        .jy-record-refine .jy-refine-dates {
            padding: 0 14px;
        }
    }

    .jy-record-refine .jy-refine-main {
        display: flex;
        flex-direction: column;
        justify-content: center;
        gap: 8px;
        min-width: 0;
    }

    .jy-record-refine .jy-refine-title {
        font-size: 17px;
        font-weight: 600;
        color: #1f2430;
        letter-spacing: 0.2px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    /* 标题常规字重修饰（无封面图的纯文字卡片标题，如考卷记录页）：需与 jy-refine-title 同用时，本规则在其后定义方可覆盖字重 */
    .jy-record-refine .jy-refine-title--plain {
        font-weight: normal;
    }

    .jy-record-refine .jy-refine-meta {
        display: flex;
        align-items: center;
        min-width: 0;
        overflow: hidden;
        font-size: 13px;
        color: #6b7385;

    }

    .jy-record-refine .jy-refine-meta__label {
        flex-shrink: 0;
        margin-right: 6px;
        color: #9aa1b2;
    }

    /* 开课编号：等宽字体 + 表格数字对齐 */
    .jy-record-refine .jy-refine-meta code {
        min-width: 0;
        font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
        font-size: 12.5px;
        color: #1f2430;
        letter-spacing: 0.3px;
        font-variant-numeric: tabular-nums;

        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    /* meta 内容部分（非 label 的 span，如题库题数）：超长时单行省略 */
    .jy-record-refine .jy-refine-meta > span:not(.jy-refine-meta__label) {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    /* ===== 中区：合并后的有效期列（两侧虚线分隔，居中） ===== */
    .jy-record-refine .jy-refine-dates {
        display: flex;
        justify-content: center;
        align-items: center;
        align-self: stretch;
        flex: 1.4;
        padding: 0 24px;
        border-left: 1px dashed #e0e6ee;
        border-right: 1px dashed #e0e6ee;
    }

    /* 无操作列（show_action=false）时 dates 为最后一列，去掉右侧虚线（对齐 --last 约定） */
    .jy-record-refine .jy-refine-dates--last {
        border-right: none;
    }

    .jy-record-refine .jy-refine-date {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 6px;
    }

    .jy-record-refine .jy-refine-date__label {
        font-size: 12px;
        color: #9aa1b2;
        letter-spacing: 1px;
    }

    .jy-record-refine .jy-refine-date__value {
        font-size: 15px;
        font-weight: 600;
        color: #1f2430;
        letter-spacing: 0.3px;
        font-variant-numeric: tabular-nums;
    }

    /* 过期标记：红色小字，紧随日期区间下方 */
    .jy-record-refine .jy-refine-date__expired {
        font-size: 12px;
        color: #e02020;
        letter-spacing: 1px;
    }

    /* 期限倒计时：未过期时在日期下方展示（进度条+文案，纵排居中；v-else 替代「已过期」标记位置） */
    .jy-record-refine .jy-refine-deadline {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 6px;
        width: 100%;
        max-width: 160px;
    }

    .jy-record-refine .jy-refine-deadline .el-progress {
        width: 100%;
    }

    .jy-record-refine .jy-refine-deadline__text {
        font-size: 12px;
        color: #6b7385;
        letter-spacing: 0.5px;
        white-space: nowrap;
    }

    /* 今日到期：红色警示（与「已过期」标记同色系） */
    .jy-record-refine .jy-refine-deadline__text--urgent {
        color: #e02020;
    }

    /* ===== 进度列（学习记录页复用 jy-refine-dates 分区，内放进度条） ===== */
    .jy-record-refine .jy-refine-progress {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 8px;
        width: 100%;
    }

    .jy-record-refine .jy-refine-progress .el-progress {
        width: 100%;
    }

    /* 百分比文字：等宽数字 */
    .jy-record-refine .jy-refine-progress__text {
        font-size: 13px;
        color: #6b7385;
        font-variant-numeric: tabular-nums;
        letter-spacing: 0.5px;
    }

    /* ===== 多列中区（考卷记录页复用 jy-refine-dates 分区：满分/及格线、考试用时、得分每项独占一列均分） ===== */
    .jy-record-refine .jy-refine-dates--cols .jy-refine-date {
        flex: 1;
    }

    /* ===== 双按钮操作区（学习记录：主按钮 + 次按钮纵排） ===== */
    .jy-record-refine .jy-refine-actions {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 8px;
    }

    /* 双按钮卡片：按钮收紧为紧凑尺寸纵排 */
    .jy-record-refine .jy-refine-actions .jy-refine-btn {
        min-width: 96px;
        padding: 8px 18px;
    }

    /* 已过期展示（操作列）：红色「已过期」标记 + 过期日期纵排居中，替代操作按钮 */
    .jy-record-refine .jy-refine-expired {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 4px;
    }

    .jy-record-refine .jy-refine-expired__date {
        font-size: 13px;
        color: #999;
        font-variant-numeric: tabular-nums;
    }

    /* ===== 右区：操作列（组件默认包装器收纳为纯按钮区） ===== */
    .jy-record-refine .jy-refine-card .jy-record-item__col--action {
        align-self: center;
        width: auto;
        height: auto;
        padding: 0 0 0 24px;
        border-right: none;
        text-align: right;
    }

    /* 参考「有效期」合并稿：按钮区不再展示「操作」列标题 */
    .jy-record-refine .jy-refine-card .jy-record-item__col--action .jy-record-item__col-title {
        display: none;
    }

    .jy-record-refine .jy-refine-card .jy-record-item__btn-wrap {
        margin-top: 0;
    }

    /* 胶囊按钮：主题色 + 箭头右移动效，hover 切副色 */
    .jy-record-refine .jy-refine-btn {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        padding: 10px 20px;
        border-radius: 999px;
        background-color: #007BB6;
        color: #fff;
        font-size: 14px;
        font-weight: 500;
        letter-spacing: 1px;
        white-space: nowrap;
        box-shadow: 0 2px 8px rgba(0, 123, 182, 0.25);
        transition: background-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
    }

    /* Element UI 字体图标（el-icon-right）：16px 尺寸 + hover 位移动效 */
    .jy-record-refine .jy-refine-btn .el-icon-right {
        font-size: 16px;
        transition: transform 0.15s ease;
    }

    .jy-record-refine .jy-refine-btn:hover {
        background-color: #fd9644;
        box-shadow: 0 4px 14px rgba(253, 150, 68, 0.35);
    }

    .jy-record-refine .jy-refine-btn:hover .el-icon-right {
        transform: translateX(3px);
    }

    .jy-record-refine .jy-refine-btn:active {
        transform: scale(0.97);
    }

    /* 次按钮：白底描边（hover 保持白色背景统一，仅描边与文字加深） */
    .jy-record-refine .jy-refine-btn--sub {
        background-color: #fff;
        color: #6b7385;
        box-shadow: inset 0 0 0 1px #d8dee8;
    }

    .jy-record-refine .jy-refine-btn--sub:hover {
        background-color: #fff;
        color: #007BB6;
        box-shadow: inset 0 0 0 1px #c3ccd9;
        transform: none;
    }

    .jy-record-refine .jy-refine-btn--sub:hover .el-icon-right {
        transform: none;
    }

}

/* ==================== 移动端（≤991.98px）：参考稿响应式堆叠 ==================== */
/* 对齐参考稿 ≤900px 断点行为（断点归一到主题 BS4.6 的 991.98px）：
   第一行封面+课程信息，第二行有效期区间（上虚线、整行居中），第三行按钮全宽 */
@media screen and (max-width: 991.98px) {
    /* 卡片：还原参考稿圆角细边框（覆盖 diy-table.css 移动端的黑阴影/去边框），行间 gap 分隔 */
    .jy-refine-card {
        flex-wrap: wrap;
        gap: 16px;
        padding: 18px;
        border: 1px solid #e8ebf2;
        border-radius: 14px;
        background-color: #fff;
        box-shadow: none;
    }

    /* 第一行：封面 + 课程核心信息（cover 右距由自身 margin 提供，信息区占满剩余宽） */
    .jy-refine-course {
        flex: 1 1 100%;
        display: flex;
        align-items: center;
        min-width: 0;
    }

    .jy-refine-cover {
        width: 120px;
        height: 80px;
        flex-shrink: 0;
        margin-right: 16px;
        border: 1px solid #e8ebf2;
        border-radius: 10px;
        background-color: #f0f2f5;
        overflow: hidden;
    }

    .jy-refine-cover img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .jy-refine-main {
        flex: 1;
        min-width: 0;
        display: flex;
        flex-direction: column;
        justify-content: center;
        gap: 8px;
    }

    .jy-refine-title {
        font-size: 16px;
        font-weight: 600;
        color: #1f2430;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .jy-refine-meta {
        display: flex;
        align-items: center;
        min-width: 0;
        overflow: hidden;
        font-size: 13px;
        color: #6b7385;
    }

    .jy-refine-meta__label {
        flex-shrink: 0;
        margin-right: 6px;
        color: #9aa1b2;
    }

    .jy-refine-meta code {
        font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
        font-size: 12.5px;
        color: #1f2430;
        font-variant-numeric: tabular-nums;
    }

    /* meta 内容超出隐藏：编号（code）与题数等文本超长时单行省略（label 固定不缩） */
    .jy-refine-meta code,
    .jy-refine-meta > span:not(.jy-refine-meta__label) {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    /* 第二行：有效期区间整行，上虚线分隔，内容居中（对齐参考稿 .course-dates） */
    .jy-refine-dates {
        flex: 1 1 100%;
        justify-content: center;
        border-left: none;
        border-right: none;
        border-top: 1px dashed #e8ebf2;
        padding: 14px 0 0;
    }

    /* 有效期保持纵向「标签在上、区间在下」居中（参考稿 date-item 结构） */
    .jy-refine-date {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 6px;
    }

    .jy-refine-date__label {
        font-size: 12px;
        color: #9aa1b2;
        letter-spacing: 1px;
    }

    .jy-refine-date__value {
        font-size: 15px;
        font-weight: 600;
        color: #1f2430;
        font-variant-numeric: tabular-nums;
    }

    .jy-refine-date__expired {
        font-size: 12px;
        color: #e02020;
        letter-spacing: 1px;
    }

    /* 期限倒计时：日期下方，进度条+文案纵排整体居中（与桌面端一致，任何宽度下均居中） */
    .jy-refine-deadline {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 6px;
        width: 100%;
        max-width: 260px;
    }

    .jy-refine-deadline .el-progress {
        width: 100%;
    }

    .jy-refine-deadline__text {
        font-size: 12px;
        color: #6b7385;
        letter-spacing: 0.5px;
        white-space: nowrap;
    }

    .jy-refine-deadline__text--urgent {
        color: #e02020;
    }

    /* 平板（768~991.98px）：有效期列改横排（flex-row-sa 两组分布）——
       左侧「有效期 + 日期区间」，右侧期限倒计时/已过期标记；手机维持上下布局 */
    @media screen and (min-width: 768px) {
        .jy-refine-date {
            flex-direction: row;
            justify-content: space-around;
            align-items: center;
        }

        /* 右组（倒计时/已过期）用 auto margin 吸收剩余空间，实现左右两组分布 */
        .jy-refine-expired {
            gap: 8px;
            width: 100%;
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: center;
        }

        .jy-refine-deadline {
            max-width: 220px;
        }

        /* 多列中区（考卷记录）：三个 dates 容器并排一行三列（列间虚线分隔），列内保持纵排（label 上、value 下） */
        .jy-refine-dates--cols {
            flex: 1 1 0;
            max-width: none;
            padding: 14px 8px 0;
        }

        .jy-refine-dates--cols + .jy-refine-dates--cols {
            border-left: 1px dashed #e8ebf2;
        }

        .jy-refine-dates--cols .jy-refine-date {
            flex-direction: column;
            justify-content: center;
        }
    }

    /* 第三行：操作区整行，按钮全宽居中（对齐参考稿 .course-action + .btn） */
    .jy-refine-card .jy-record-item__col--action {
        flex: 1 1 100%;
        width: auto;
        height: auto;
        padding: 4px 0 0;
        border-right: none;
        display: block;
        text-align: center;
    }

    .jy-refine-card .jy-record-item__col--action .jy-record-item__col-title {
        display: none;
    }

    .jy-refine-card .jy-record-item__btn-wrap {
        margin-top: 0;
        width: 100%;
    }

    .jy-refine-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
        width: 100%;
        height: 42px;
        border-radius: 21px;
        background-color: #007BB6;
        color: #fff;
        font-size: 14px;
        font-weight: 500;
        letter-spacing: 1px;
        box-shadow: 0 2px 8px rgba(0, 123, 182, 0.25);
        transition: background-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
    }

    /* Element UI 字体图标（el-icon-right）：16px 尺寸 + hover 位移动效 */
    .jy-refine-btn .el-icon-right {
        font-size: 16px;
        transition: transform 0.15s ease;
    }

    /* 移动端 hover 改纵向抬升（参考稿），箭头位移动效保留 */
    .jy-refine-btn:hover {
        background-color: #fd9644;
        transform: translateY(-2px);
        box-shadow: 0 4px 14px rgba(253, 150, 68, 0.35);
        color: #fff !important;
    }

    .jy-refine-btn:hover .el-icon-right {
        transform: translateX(3px);
    }

    .jy-refine-btn:active {
        transform: scale(0.97);
    }

    /* ===== 进度列移动端：整行、上虚线分隔（与有效期列一致） ===== */
    .jy-refine-dates--progress {
        width: 100%;
    }

    .jy-refine-progress {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 6px;
    }

    .jy-refine-progress .el-progress {
        width: 100%;
    }

    .jy-refine-progress__text {
        font-size: 12px;
    }

    /* ===== 多列中区移动端：date 撑满所在行容器（手机每行一项左右分布、平板一行三列，见下方专属段） ===== */
    .jy-refine-dates--cols .jy-refine-date {
        flex: 1 1 0;
        max-width: none;
    }

    /* 多列相邻列之间加虚线分隔（颜色与移动端中区上虚线一致） */
    .jy-refine-dates--cols .jy-refine-date + .jy-refine-date {
        border-left: 1px dashed #e8ebf2;
    }

    /* ===== 多列中区手机端（<768px）：每项独占一行，行内「label 左、value 右」横向布局 ===== */
    @media screen and (max-width: 767.98px) {
        .jy-refine-dates--cols .jy-refine-date {
            flex-direction: row;
            justify-content: space-between;
        }
    }

    /* ===== 双按钮移动端：横排各占半宽 ===== */
    .jy-refine-actions {
        display: flex;
        flex-direction: row;
        width: 100%;
        gap: 10px;
    }

    .jy-refine-actions .jy-refine-btn {
        flex: 1;
        min-width: 0;
        padding: 0 10px;
    }

    /* 次按钮：白底描边（桌面同款，hover 保持白色背景统一，仅描边与文字加深） */
    .jy-refine-btn--sub,
    .jy-refine-btn--sub:hover {
        background-color: #fff;
        color: #6b7385;
        box-shadow: inset 0 0 0 1px #d8dee8;
    }

    .jy-refine-btn--sub:hover {
        /* 主按钮 hover 的 color:#fff 带 !important，次按钮须同样加权才能保持深色文字（白底白字不可见） */
        color: #007BB6 !important;
        box-shadow: inset 0 0 0 1px #c3ccd9;
    }

    .jy-refine-btn--sub:active {
        transform: scale(0.97);
    }
}