/* ============================================================================
   客戶前台系統公告跑馬燈
   只在客戶共用版型 Views/Shared/_Layout.cshtml 引用；管理後台 _AdminLayout.cshtml 不引用。
   不使用 <marquee>，改以 CSS Animation 平移；捲動秒數由 js/system-announcement.js
   依內容寬度換算（固定像素／秒），讓公告很長或很短時速度都自然。
   ============================================================================ */

/* 外層沿用共用版型的 .container .app-container，寬度自然與頁面內容切齊，
   這裡只補上與導覽列之間的間距。 */
.system-announcement-container {
    margin-top: .75rem;
}

.system-announcement-ticker {
    /* 預設秒數只是保險值；實際秒數由 JS 依內容寬度設定。 */
    --system-announcement-duration: 30s;

    display: flex;
    align-items: center;
    gap: .75rem;
    /* 與 NP Theme 的深藍主色調協調。 */
    background: linear-gradient(90deg, rgba(13, 42, 92, .97), rgba(24, 68, 138, .97));
    color: #fff;
    padding: .5rem .9rem;
    border-radius: .5rem;
    width: 100%;
    /* 關鍵：整個元件不可水平溢位，否則整頁會出現水平捲軸。 */
    overflow: hidden;
}

.system-announcement-ticker__label {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    flex: 0 0 auto;
    font-size: .8125rem;
    font-weight: 600;
    white-space: nowrap;
    padding-right: .75rem;
    border-right: 1px solid rgba(255, 255, 255, .35);
}

/* 可視區域：超出的公告文字被裁切，由軌道平移帶入畫面。 */
.system-announcement-ticker__viewport {
    flex: 1 1 auto;
    /* min-width: 0 讓 flex 子項目可以被壓縮，否則長內容會把父層撐寬。 */
    min-width: 0;
    overflow: hidden;
}

/* 鍵盤 Focus 時給明確外框，符合可及性。 */
.system-announcement-ticker__viewport:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 2px;
    border-radius: .25rem;
}

.system-announcement-ticker__track {
    display: flex;
    /* 依內容自然撐開，不受 viewport 寬度限制，才能平移。 */
    width: max-content;
    animation-name: system-announcement-scroll;
    animation-duration: var(--system-announcement-duration);
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}

.system-announcement-ticker__group {
    display: flex;
    align-items: center;
    flex: 0 0 auto;
    white-space: nowrap;
}

.system-announcement-ticker__item {
    font-size: .8125rem;
    line-height: 1.5;
    /* 保持單行顯示，不換行。 */
    white-space: nowrap;
}

.system-announcement-ticker__separator {
    color: rgba(255, 255, 255, .6);
    white-space: pre;
}

/* 軌道內含兩組完全相同的公告，平移 -50% 剛好等於一組寬度，接回原點時無縫。 */
@keyframes system-announcement-scroll {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); }
}

/* 滑鼠移入暫停，方便閱讀。 */
.system-announcement-ticker:hover .system-announcement-ticker__track {
    animation-play-state: paused;
}

/* 鍵盤 Focus 時暫停：使用者用 Tab 停在公告上時不會被移走。 */
.system-announcement-ticker__viewport:focus-within .system-announcement-ticker__track {
    animation-play-state: paused;
}

/* 手機版：標籤縮短、字級略小，並確保不會撐破畫面或遮住導覽列。 */
@media (max-width: 575.98px) {
    .system-announcement-container {
        margin-top: .5rem;
    }

    .system-announcement-ticker {
        gap: .5rem;
        padding: .45rem .65rem;
        border-radius: .4rem;
    }

    .system-announcement-ticker__label span {
        /* 空間有限時只留喇叭圖示，文字隱藏，避免壓縮公告內容。 */
        display: none;
    }

    .system-announcement-ticker__label {
        padding-right: .5rem;
    }

    .system-announcement-ticker__item {
        font-size: .75rem;
    }
}

/* 使用者在系統設定「減少動態效果」時不做動畫，改為可自行水平捲動閱讀，
   並隱藏重複的第二組內容，避免看到同樣公告出現兩次。 */
@media (prefers-reduced-motion: reduce) {
    .system-announcement-ticker__track {
        animation: none;
        width: auto;
    }

    .system-announcement-ticker__viewport {
        overflow-x: auto;
    }

    .system-announcement-ticker__group[aria-hidden="true"] {
        display: none;
    }
}