/* ==========================================================================
   側邊區塊計時器樣式（前台顯示 + 後台設定面板預覽共用）
   --------------------------------------------------------------------------
   三種樣式：style1 大數字 / style2 天時分秒四格 / style3 一行文字
   無障礙：視覺跳動層 aria-hidden，另有 .oddTimerSr 報讀摘要層（非 live region）
   特效（data-effect）目前只有 plain；時鐘式/翻頁式之後再擴充
   ========================================================================== */

.oddTimer {
    text-align: center;
    box-sizing: border-box;
    width: 100%;            /* 填滿區塊寬度（box-sizing 確保邊框/padding 不撐爆） */
    padding: 0.9em;
    margin: 0 0 0.8em;
    /* 卡片外觀：邊框 + 陰影，沒設整體底色時也看得出每個計時器的範圍 */
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12);
}

/* 強制結構區塊上下堆疊 + 每層明確置中：
   後台 boardSet.css／前台板型 css 可能把 div 設成 inline 或重設 text-align，
   會讓標題/數字/HMS 擠成一行或各自靠左，這裡逐層指定蓋過它 */
.oddTimer .oddTimerVisual,
.oddTimer .oddTimerTitle,
.oddTimer .oddTimerSub {
    display: block;
    text-align: center;
}
/* 大數字列：數字與「天」底部對齊（翻頁卡是 inline-block，靠 flex 底對齊才不會跑掉），中間留空 */
.oddTimer .oddTimerBigRow {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: 0.35em;
}
.oddTimer .oddTimerLine {
    text-align: center;
}

/* 後台設定面板的即時預覽外層：純容器（卡片外觀由內層 .oddTimer 自帶，避免雙重邊框）
   給定寬度讓內層卡片有合理大小、四格不被擠到換行 */
.oddTimerPreviewCard {
    display: block;
    clear: both;
    box-sizing: border-box;
    width: 18em;
    max-width: 100%;
    margin: 0.4em 0;
}
.oddTimerPreviewCard .oddTimer {
    float: none;
    margin: 0;
}
/* 預覽內四格不換行（前台側邊欄窄時仍可換行，故只限定預覽） */
.oddTimerPreviewCard .oddTimer--style2 .oddTimerBoxes {
    flex-wrap: nowrap;
}

/* 尚未選樣式時的提示文字 */
.oddTimerPreviewHint {
    color: #888;
}

/* 目標時間輸入框：不要撐滿，給合理寬度（用 id 壓過 .input 的滿寬） */
#BlockWarehouseTimerDatetime.oddTimerDatetimeInput {
    width: 18em;
    max-width: 100%;
}

/* 報讀器專用、視覺隱藏（1px clip 法，不可 display:none 否則讀不到） */
.oddTimer .oddTimerSr {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.oddTimer .oddTimerTitle {
    color: #555;
    font-size: 0.95em;
    margin-bottom: 0.4em;
}

/* ---------- 樣式1：大數字 ---------- */
.oddTimer--style1 .oddTimerBigNum {
    font-size: 3.2em;
    font-weight: bold;
    color: #c0392b;
    line-height: 1.1;
}
.oddTimer--style1 .oddTimerBigUnit {
    font-size: 1em;
    color: #555;
}
.oddTimer--style1 .oddTimerSub {
    margin-top: 0.3em;
    font-size: 1em;
    color: #444;
    letter-spacing: 0.05em;
}

/* ---------- 樣式2：天時分秒四格 ---------- */
.oddTimer--style2 .oddTimerBoxes {
    display: flex;
    justify-content: center;
    gap: 0.5em;
    flex-wrap: wrap;
}
.oddTimer--style2 .oddTimerBox {
    background: #2c3e50;
    color: #fff;
    border-radius: 6px;
    padding: 0.5em 0.4em;
    min-width: 3em;
}
.oddTimer--style2 .oddTimerBoxNum {
    font-size: 1.8em;
    font-weight: bold;
    line-height: 1;
}
.oddTimer--style2 .oddTimerBoxLabel {
    font-size: 0.75em;
    color: #cfd6dc;
    margin-top: 0.3em;
}

/* ==========================================================================
   特效（data-effect → .oddTimer--effect-*）：套在數字節點，與樣式並存（樣式決定版面、特效決定數字呈現）
   plain=無；flip=翻牌時鐘；digital=時鐘式 LED；roll=捲動
   ========================================================================== */

/* ---------- 捲動式：數字變動時往上捲（里程表感） ---------- */
.oddTimer--effect-roll [data-field]:not(.oddTimerSr) {
    display: inline-block;
}
.oddTimer--effect-roll [data-field].oddTimerChanging {
    animation: oddTimerRoll 0.45s ease-out;
}
@keyframes oddTimerRoll {
    0%   { transform: translateY(70%); opacity: 0; }
    100% { transform: translateY(0); opacity: 1; }
}

/* ---------- 時鐘式：數位 LED 外觀；綠字配深底確保高對比（白底綠字對比不足，故鋪深底） ---------- */
.oddTimer--effect-digital .oddTimerVisual,
.oddTimer--effect-digital .oddTimerLine {
    background: #0d0d0d;
    border-radius: 0.3em;
    padding: 0.6em 0.8em;
}
.oddTimer--effect-digital .oddTimerTitle,
.oddTimer--effect-digital .oddTimerLine,
.oddTimer--effect-digital .oddTimerBigUnit,
.oddTimer--effect-digital .oddTimerSub {
    color: #cfe8cf;            /* 標題／單位「天」／HMS 列／一行文字的文字淺綠白，對深底 > 9:1（數字另為亮綠） */
}
.oddTimer--effect-digital [data-field]:not(.oddTimerSr) {
    font-family: "DS-Digital", "Courier New", monospace;
    color: #2bff5b;            /* 亮綠對 #0d0d0d 約 13:1，遠超 AA */
    text-shadow: 0 0 6px rgba(43, 255, 91, 0.6);
    letter-spacing: 0.05em;
}
.oddTimer--effect-digital.oddTimer--style2 .oddTimerBox {
    background: #0d0d0d;
}
.oddTimer--effect-digital.oddTimer--style2 .oddTimerBoxLabel {
    color: #9fcf9f;            /* 對深底 > 7:1 */
}

/* ---------- 翻牌時鐘（split-flap）：每位數字一張深卡、中線、上葉片翻下＋下葉片補上 ---------- */
.oddFlipRow {
    display: inline-flex;
    align-items: center;       /* 冒號等分隔符相對數字卡垂直置中 */
    gap: 0.08em;
    vertical-align: middle;
}
.oddFlipSep {
    display: inline-flex;
    align-items: center;     /* 撐滿卡片高度後，把冒號字元本身也垂直置中（光置中盒子，冒號仍會落在基線） */
    align-self: stretch;
    line-height: 1;
    padding: 0 0.1em;
    position: relative;
    top: -0.15em;            /* 冒號字符光學上偏低，微推上來對齊數字中線 */
}
.oddFlipCard {
    position: relative;
    display: inline-block;
    width: 0.72em;
    height: 1.1em;
    line-height: 1.1em;
    font-weight: bold;
    color: #fff;                /* 白字對深卡 #2b2b2b 約 13:1 */
    border-radius: 0.08em;
    perspective: 240px;
}
.oddFlipCard > span {
    position: absolute;
    left: 0;
    right: 0;
    height: 50%;
    overflow: hidden;
    box-sizing: border-box;
    background: #2b2b2b;
}
.oddFlipCard > span > span {
    display: block;
    height: 1.1em;
    line-height: 1.1em;
    text-align: center;
}
.oddFlipTop, .oddFlipLeafTop {
    top: 0;
    border-radius: 0.08em 0.08em 0 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.55);   /* 中線 */
}
.oddFlipBottom, .oddFlipLeafBottom {
    bottom: 0;
    border-radius: 0 0 0.08em 0.08em;
    background: #262626;
}
/* 下半的數字往上位移，露出字的下半部 */
.oddFlipBottom > span, .oddFlipLeafBottom > span {
    margin-top: -0.55em;
}
/* 翻轉葉片 */
.oddFlipLeafTop {
    transform-origin: bottom;
    transform: rotateX(0deg);
    backface-visibility: hidden;
    z-index: 3;
}
.oddFlipLeafBottom {
    transform-origin: top;
    transform: rotateX(90deg);
    backface-visibility: hidden;
    z-index: 3;
}
.oddFlipCard.oddFlipping .oddFlipLeafTop {
    animation: oddFlipDown 0.3s ease-in forwards;
}
.oddFlipCard.oddFlipping .oddFlipLeafBottom {
    animation: oddFlipUp 0.3s ease-out 0.3s forwards;
}
@keyframes oddFlipDown {
    from { transform: rotateX(0deg); }
    to   { transform: rotateX(-90deg); }
}
@keyframes oddFlipUp {
    from { transform: rotateX(90deg); }
    to   { transform: rotateX(0deg); }
}

/* ---------- 樣式3：一行文字 ---------- */
.oddTimer--style3 .oddTimerLine {
    font-size: 1.15em;
    color: #333;
    line-height: 1.6;
}
.oddTimer--style3 .oddTimerLine .oddTimerNum {
    font-weight: bold;
    color: #c0392b;
    font-size: 1.15em;
    margin: 0 0.1em;
}