/* ============================================================
   custom.css — 在 time.hwzb.tv 原版样式基础上的增量定制
   （多倒计时列表 / 备注 / 删除按钮 / 伪全屏 / 语音提示态）
   ============================================================ */

/* 数字字体：digital-7-mono（用户指定，覆盖原站 DS-Digital） */
@font-face {
    font-family: "Digital7Mono";
    font-style: normal;
    font-weight: 400;
    src: url("assets/fonts/digital-7-mono-3.ttf") format("truetype");
    font-display: swap;
}
:root {
    --display-font: "Digital7Mono", "DS-Digital", "DSEG7 Classic", "Consolas", "Courier New", monospace;
}

/* ============================================================
   数字盒宽适配（原站按 DS-Digital 逐字符调宽，已换 digital-7-mono）
   新字体全部字符 advance 统一 = 0.455em，数字与冒号统一盒宽 0.46em，
   总宽度与原站布局基本一致（数字盒收紧、冒号盒放宽，相互抵消）。
   ============================================================ */

/* 桌面端：原站为 0.08×94vw(数字) / 0.035×94vw(冒号) */
.time-value span { width: 0.46em; }
.timer-colon { width: 0.46em !important; }

/* 纵屏 / 矮横屏：原站为 0.52em(数字) / 0.28em(冒号) */
@media (orientation: portrait) {
    .time-value span { width: 0.46em; }
    .timer-colon { width: 0.44em !important; }
    /* 手机上放宽备注可占宽度，避免长备注过早截断 */
    .note-label { max-width: 60vw; }

    /* 竖屏为「备注在上 + 数字在下」的堆叠布局，原站行高按单行内容设计，
       堆叠后内容高度超出 → 备注贴顶被裁、数字贴下边框、上下留白不均。
       此处加高行并略缩数字，让内容完整且上下留白对称 */
    #rowCurrent.timer-row,
    #countdownList .timer-row {
        min-height: clamp(7.5rem, 26cqw, 13rem);
    }
    #rowCurrent .time-value,
    #countdownList .time-value {
        font-size: clamp(2.4rem, 15.5cqw, 6.2rem);
    }
    /* 当前时间行标签只有一行（无目标时间小字），数字视觉上略偏上，稍作补偿 */
    #rowCurrent .timer-combined {
        padding-top: .85rem;
    }
}
@media (orientation: landscape) and (max-height: 600px) {
    .time-value span { width: 0.46em; }
    .timer-colon { width: 0.44em !important; }
}

/* 数字区域防裁切：禁止收缩与换行——数字段固定宽，空间不足时由备注截断让位 */
#countdownList .time-value {
    flex-shrink: 0;
    white-space: nowrap;
    padding-right: 8px;
}
@media (orientation: portrait) {
    /* 竖屏为上下布局，数字居中，只需少量避让 */
    #countdownList .note-label { max-width: 52vw; }
}

/* ✕ 删除按钮在行左上角：左侧为备注预留避让空间，
   「当前时间」行同样留出，使上下备注左边缘对齐 */
#rowCurrent .timer-combined,
#countdownList .timer-combined {
    padding-left: 44px;
}

/* 顶部按钮区置顶：与下方「当前时间」行保持呼吸感 */
.on-air-box {
    margin-top: 0.6vmin;
    margin-bottom: 0.8vmin;
}

/* 已删除按钮里的「ON AIR」字样：
   .on-air-action 原本靠左竖线是分隔 ON AIR 用的，现在一并去掉 */
.on-air-action {
    padding-left: 0;
    border-left: none;
}

/* 动态倒计时列表容器 */
#countdownList {
    display: flex;
    flex-direction: column;
    gap: 2vmin;
    width: 100%;
    min-width: 0;
}

/* 倒计时行：沿用原站固定行高与媒体查询规则（一页显示缩放已取消），
   行数多时容器滚动查看；仅需定位基准供行内 ✕ 按钮使用 */
#countdownList .timer-row {
    position: relative;
}

/* 倒计时过多时整页可滚动。
   用 auto 外边距实现"安全居中"：空间足够时垂直居中，
   溢出时外边距归零、可正常滚动（避免 justify-content:center 裁掉顶部） */
.container {
    justify-content: flex-start;
    overflow-y: auto;
}
.timer-display {
    margin-top: auto;
    margin-bottom: auto;
}

/* 备注标签（可编辑） */
.note-label {
    outline: none;
    border-bottom: 2px dashed transparent;
    max-width: 26vw;   /* 为数字区让位，过长备注省略号截断 */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    cursor: text;
}
.note-label:focus {
    border-bottom-color: currentColor;
    opacity: 1;
}
.note-label:empty::before {
    content: "倒计时";
    opacity: .5;
}

/* 倒计时行配色：默认白色，仅剩 3 分钟内（JS 加 .urgent 类）变红。
   覆盖原站 .on-air-time 的固定红色（custom.css 在 styles.css 之后加载，同级优先级后者胜） */
#countdownList .timer-row.on-air-time {
    background-color: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.9);
}
#countdownList .on-air-time .label-text,
#countdownList .on-air-time .time-value,
#countdownList .on-air-time span {
    color: #FFFFFF;
}

/* 紧急状态（剩余 ≤ 3 分钟或已结束）：恢复红色 */
#countdownList .timer-row.on-air-time.urgent {
    background-color: rgba(255, 0, 0, 0.15);
    border-color: #FF0000;
}
#countdownList .on-air-time.urgent .label-text,
#countdownList .on-air-time.urgent .time-value,
#countdownList .on-air-time.urgent span {
    color: #FF0000;
}

/* 行内删除按钮（左上角常显，触屏也可点击） */
.row-del {
    position: absolute;
    top: .4vmin;
    left: .8vmin;
    z-index: 5;
    background: transparent;
    border: none;
    color: #FF0000;
    font-size: calc(0.025 * 94vw);
    line-height: 1;
    opacity: .45;
    cursor: pointer;
    padding: .3vmin .6vmin;
    font-family: inherit;
    transition: opacity .15s;
    min-width: 32px;
    min-height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.row-del:hover, .row-del:active { opacity: 1; }
@media (hover: none) {
    .row-del { opacity: .8; }  /* 触屏设备上更明显 */
}

/* 设置面板内的倒计时管理列表 */
.timer-manage-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.timer-manage-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    border: 1px solid rgba(255, 255, 255, .18);
    border-radius: 8px;
}
.timer-manage-item .mg-note {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: bold;
}
.timer-manage-item .mg-target {
    color: rgba(255, 255, 255, .55);
    font-size: 12px;
    font-variant-numeric: tabular-nums;
}
.timer-manage-item .mg-del {
    background: transparent;
    border: 1px solid #FF0000;
    color: #FF0000;
    border-radius: 6px;
    padding: 4px 12px;
    font-size: 13px;
    cursor: pointer;
    font-family: inherit;
    min-height: 32px;
}
.timer-manage-item .mg-del:hover { background: rgba(255, 0, 0, .15); }

/* 目标时间小字（仅窗口模式显示，全屏隐藏） */
.target-hint {
    display: block;
    font-size: clamp(10px, 1.1vw, 14px);
    font-weight: normal;
    letter-spacing: 1px;
    opacity: .55;
    margin-top: .3vmin;
    font-family: "Microsoft YaHei", Arial, sans-serif;
}

/* 已结束但等待自动删除的行 */
.timer-row.expired-flash {
    animation: rowBlink 1s linear infinite;
}
@keyframes rowBlink {
    0%, 100% { opacity: 1; }
    50% { opacity: .45; }
}

/* 全屏/伪全屏时隐藏滚动条（保留滚轮/触摸滚动能力） */
body.onair .container {
    scrollbar-width: none;                /* Firefox */
    -ms-overflow-style: none;             /* 旧版 Edge */
}
body.onair .container::-webkit-scrollbar {
    display: none;                        /* Safari / Chrome */
}

/* 伪全屏降级（浏览器不支持 Fullscreen API 时，如 iPad Firefox） */
body.fakefs {
    position: fixed;
    inset: 0;
    overflow: hidden;
    touch-action: none;
}
body.fakefs .container {
    width: calc(100% - 6vmin);
    height: calc(100svh - 6vmin);
}

/* 伪全屏时的浮动退出按钮 */
.fakefs-exit {
    position: fixed;
    left: 50%;
    bottom: 1.4vmin;
    transform: translateX(-50%);
    z-index: 1200;
    display: none;
    background: rgba(0, 255, 0, 0.12);
    border: 2px solid #00FF00;
    color: #00FF00;
    border-radius: calc(0.5vw);
    padding: .8vmin 2.4vmin;
    font-size: clamp(12px, 1.4vw, 18px);
    font-weight: bold;
    letter-spacing: 2px;
    cursor: pointer;
    font-family: inherit;
}
body.fakefs .fakefs-exit { display: block; }
body.fakefs .on-air-box { visibility: hidden; }

/* 设置面板中新增/控制按钮的排布 */
.settings-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .6rem;
}
.settings-grid .btn { width: 100%; }
.settings-grid-3 { grid-template-columns: repeat(3, 1fr); }
/* 批量导入文本框 */
.import-textarea {
    width: 100%;
    box-sizing: border-box;
    margin-top: .6rem;
    padding: .55rem .7rem;
    min-height: 5.2em;
    resize: vertical;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: .8rem;
    line-height: 1.5;
    color: #E8F6E8;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 8px;
}
.import-textarea::placeholder { color: rgba(255, 255, 255, 0.35); }
.import-textarea:focus {
    outline: none;
    border-color: #00FF00;
    background: rgba(0, 255, 0, 0.05);
}
.btn-accent {
    border: 1px solid #00FF00;
    color: #00FF00;
    background: rgba(0, 255, 0, 0.08);
}
.settings-hint {
    font-size: .78rem;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.55);
    margin: .2rem 0 0;
}
.settings-section .section-divider {
    border: none;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    margin: .6rem 0;
}

/* 声音关闭时给状态行加标记（由 JS 控制 is-muted） */
.clock-status.is-muted::after {
    content: " · 声音已关";
}