@import url('https://fonts.googleapis.com/css2?family=Noto+Color+Emoji&family=Noto+Sans+TC:wght@400;500;700;900&display=swap');

/* 定義純數字字體 (解決 Emoji 字體影響數字顯示的問題) */
@font-face {
    font-family: 'PlainNumbers';
    src: local('Roboto'), local('Segoe UI'), local('Helvetica Neue'), local('Arial');
    unicode-range: U+0030-0039, U+0025, U+002C, U+002E, U+003A;
}

:root {
    /* --- Optimized Palette (High Performance: Faux Glass) --- */
    /* 背景改為高不透明度，移除 backdrop-filter 需求 */
    --glass-bg: rgba(255, 255, 255, 0.95);
    --glass-border: rgba(255, 255, 255, 0.9);
    --glass-shadow: 0 0.5rem 0.5rem 0 rgba(31, 38, 135, 0.1);

    --primary-gradient: linear-gradient(135deg, #6dd5ed 0%, #2193b0 100%);
    --primary-color: #2193b0;
    /* 純色替代文字漸層，提升渲染效能 */

    --success-bg: rgba(46, 204, 113, 0.25);
    --success-color: #2ecc71;
    --success-text: #27ae60;

    --warning-bg: rgba(243, 156, 18, 0.25);
    --warning-text: #ffd208;

    --danger-bg: rgba(231, 76, 60, 0.2);
    --danger-color: #e74c3c;
    --danger-text: #c0392b;

    --text-dark: #2d3436;
    --text-gray: #35393a;

    /* 轉為 rem 單位 (假設 base=16px, 由 scaler.js 動態控制) */
    --radius-lg: 1.5rem;
    --radius-md: 1.125rem;
    --radius-sm: 0.75rem;
    --screen-radius: 2.25rem;
}

body {
    margin: 0;
    overflow: hidden;
    font-family: "PlainNumbers", "Noto Color Emoji", "Noto Sans TC", "Segoe UI Emoji", "Apple Color Emoji", sans-serif;
    background-color: #000;
    /* 讓 #app-container 垂直水平置中 */
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    width: 100vw;
}

/* --- 全螢幕遮罩 --- */
#init-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.92);
    z-index: 10000;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    color: white;
}

/* --- 容器 (改用 rem 控制尺寸) --- */
#app-container {
    /* 992px / 16 = 62rem */
    width: 62rem;
    /* 620px / 16 = 38.75rem */
    height: 38.75rem;

    position: relative;
    display: flex;
    flex-direction: column;
    background-color: #000;
    box-shadow: none;
}

/* --- 擬真螢幕顯示區 (Main Area) --- */
.main-area {
    flex: 1;
    overflow: hidden;
    padding: 1rem;
    gap: 1rem;
    position: relative;

    /* 保留背景漸層 */
    background: linear-gradient(120deg, #ffeaea 0%, #d1d6eb 100%);
    border-radius: var(--screen-radius);
    margin: 0;

    /* GPU 加速提示 */
    transform: translateZ(0);
}

/* 簡化背景光暈 */
.main-area::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle at 50% 50%, rgba(74, 144, 226, 0.08), transparent 60%);
    pointer-events: none;
    z-index: 0;
}

/* --- Footer (統一白字) --- */
.footer-area {
    height: 3.75rem;
    background: #000;
    color: #ffffff;
    /* 白字 */
    display: flex;
    align-items: center;
    padding: 0 1.8rem;
    justify-content: space-between;
}

/* 狀態群組 (加入 min-width: 0 以允許內部文字縮減) */
.status-group {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex: 1;
    min-width: 0;
    margin-right: 1rem;
}

/* 燈號 */
.status-indicator {
    width: 0.625rem;
    height: 0.625rem;
    border-radius: 50%;
    background-color: #444;
    flex-shrink: 0;
}

.status-indicator.online {
    background-color: var(--success-color);
    box-shadow: 0 0 5px var(--success-color);
}

.status-indicator.offline {
    background-color: var(--danger-color);
    box-shadow: 0 0 5px var(--danger-color);
}

/* 時間顯示 */
.datetime-display {
    font-size: 1.2rem;
    font-weight: 600;
    letter-spacing: 1px;
    color: #ffffff;
    flex-shrink: 0;
    /* 防止時間被壓縮 */
}

/* 外送資訊 (加入縮略) */
.delivery-info {
    margin-left: 1rem;
    color: #e0e0e0;
    font-size: 1.05rem;
    font-weight: 600;

    /* 文字過長處理 */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* 捲軸設定 */
::-webkit-scrollbar {
    width: 0.375rem;
    height: 0.375rem;
}

::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.1);
    border-radius: 1rem;
}

::-webkit-scrollbar-track {
    background: transparent;
}

/* 通用按鈕重置 */
button {
    cursor: pointer;
    border: none;
    outline: none;
    font-family: inherit;
}

/* --- Faux Glass 卡片通用樣式 --- */
.modern-card,
.kitchen-card-lg {
    position: relative;
    z-index: 1;
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-md);
    box-shadow: var(--glass-shadow);

    padding: 0.3rem 0.75rem;
    margin-bottom: 0.625rem;
    display: flex;
    align-items: center;
    height: 5.625rem;

    overflow: hidden;
    cursor: pointer;
    /* 移除 transition 以提升列表滑動效能 */

    border-left: 0.375rem solid var(--primary-color);
}

.kitchen-card-lg {
    margin-bottom: 0;
    height: 100%;
}

/* Hover 變純白 (PC端用，平板觸控較少觸發但保留) */
.modern-card:hover,
.kitchen-card-lg:hover {
    background: #ffffff;
}

/* 超時狀態 (固定樣式，無動畫) */
.modern-card.timeout,
.kitchen-card-lg.timeout {
    animation: none !important;
    border-left-color: #ff0000 !important;
    background-color: #ffe0e0 !important;
    /*box-shadow: none !important;*/
}

/* 優先級樣式 */
.modern-card.priority,
.kitchen-card-lg.priority {
    border-left-color: var(--warning-text);
    background: #fff8e1 !important;
}

@keyframes flashError {

    0%,
    100% {
        background-color: rgba(255, 255, 255, 0.9);
    }

    50% {
        background-color: rgba(231, 76, 60, 0.3);
    }
}

.flash-error {
    animation: flashError 0.4s ease-in-out;
}

/* --- 內部元件樣式 --- */
.qty-group,
.k-qty-group-lg {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    cursor: pointer;
    border-radius: var(--radius-sm);
}

.card-qty {
    font-size: 4.3rem;
    font-weight: 800;
    color: var(--primary-color);
    line-height: 1;
    text-align: center;
}

.card-timer {
    font-size: 1.15rem;
    color: #b2bec3;
    font-weight: 700;
    font-family: monospace;
    margin-top: 0px;
}

.card-timer.timeout {
    color: var(--danger-text);
}

.card-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    overflow: hidden;
    height: 100%;
    padding-left: 0.6rem;
}

.info-main {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-dark);
    line-height: 1.2;
    text-shadow: none;
}

.info-sub {
    display: block;
    font-size: 1.1rem;
    color: var(--text-gray);
    margin-top: 0.125rem;
    font-weight: 500;
}

.info-opts {
    font-size: 1.05rem;
    color: var(--success-text);
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* 按鈕區 */
.btn-grid-area {
    width: 4.375rem;
    height: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    gap: 0.375rem;
    margin-left: 0.5rem;
    flex-shrink: 0;
}

.grid-btn {
    border-radius: 0.5rem;
    font-size: 0.9rem;
    background: rgba(255, 255, 255, 0.8);
    border: 1px solid #ddd;
    color: var(--text-gray);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}

/* --- Faux Glass 風格：危險操作按鈕 (FAB) --- */
.fab-glass-danger {
    width: 3.125rem;
    height: 3.125rem;
    border-radius: 50%;
    background: linear-gradient(145deg, #ff4b2b, #ff416c);
    border: 1px solid rgba(255, 255, 255, 0.6);
    box-shadow: 0 0 0.6rem rgba(255, 65, 108, 0.6), inset 0 2px 5px rgba(255, 255, 255, 0.3);

    color: white;
    font-size: 1.6rem;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
    z-index: 10;

    /* [關鍵修正] 防止文字過長時按鈕變形 */
    flex-shrink: 0;
}

/* FAB 點擊微縮 */
.fab-glass-danger:active {
    transform: scale(0.95);
    filter: brightness(1.1);
}

/* --- 喊單頁面元件 (Helio A22 修正版：移除 Transform，優化跟手感) --- */

.col-selector {
    /* 1. 取消 transform 與 will-change，解決滑動不跟手問題 */
    /* background: rgba(255, 255, 255, 0.7); 若為了效能，建議維持原本設定或稍微降低透明度 */
    background: rgba(255, 255, 255, 0.6); 
    
    border-radius: var(--radius-md);
    border: 1px solid rgba(255, 255, 255, 0.6);
    
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 0.5rem;
    
    overflow-y: auto;
    /* 保持原生觸控慣性 */
    -webkit-overflow-scrolling: touch; 
}

/* 2. 隱藏捲動軸 */
.col-selector::-webkit-scrollbar {
    width: 0;
    height: 0;
}

.sel-btn {
    min-height: 3.75rem;
    border-radius: var(--radius-sm);
    font-size: 1.73rem;
    font-weight: 600;
    color: var(--text-dark);
    
    box-shadow: none !important;
    background-color: #ffffff; 
    
    /* [修改] 1px -> 0.0625rem */
    border: 0.0625rem solid #d1d5db;
    
    /* [修改] 偽陰影 4px -> 0.25rem */
    border-bottom: 0.25rem solid #9ca3af;
    
    position: relative;
    transition: none; 
}

/* 選中狀態 */
.sel-btn.active {
    background-color: var(--primary-color);
    color: white;
    border: 0.0625rem solid #1a748c;
    border-bottom: 0.25rem solid #125669; /* 0.25rem */
}

/* 按下時的效果 */
.sel-btn:active {
    border-bottom-width: 0; /* 底部消失 */
    
    /* [修改] 位移 4px -> 0.25rem */
    margin-top: 0.25rem; 
    margin-bottom: -0.25rem; 
}

/* 選項按鈕 (綠色) */
.sel-btn-opt.active {
    background-color: #56ab2f;
    color: white;
    border: 0.0625rem solid #3e8e1d;
    border-bottom: 0.25rem solid #2b6b10;
}
/* --- 廚房佈局 --- */
.kitchen-col-active {
    flex: 2;
    display: grid;
    grid-template-rows: repeat(4, 1fr);
    gap: 0.75rem;
    height: 100%;
}

.kitchen-col-upcoming {
    flex: 1;
    overflow-y: auto;
    padding: 0.5rem;
}

.kitchen-card-lg {
    padding: 0 1.5rem 0 0.625rem;
    border-left-width: 0.5rem;
}

.k-qty-group-lg {
    width: 6rem;
    margin-right: 0px;
    padding: 0.625rem 0;
}

.k-qty-lg {
    font-size: 6.2rem;
    font-weight: 800;
    color: var(--primary-color);
    line-height: 0.9;
}

.k-timer-lg {
    font-size: 1.8rem;
    color: #b2bec3;
    font-weight: 700;
    font-family: monospace;
}

.k-timer-lg.timeout {
    color: var(--danger-text);
}

.k-info-lg {
    flex: 1;
    padding: 0.625rem 0;
}

.k-main-lg {
    line-height: 2.8rem;
    font-size: 3.3rem;
    font-weight: 800;
    color: var(--text-dark);
    letter-spacing: -1px;
}

.k-sub-lg {
    font-size: 2.7rem;
    line-height: 3.4rem;
    color: var(--text-gray);
    margin-left: 1rem;
    font-weight: 500;
    vertical-align: text-top;
}

.k-opts-lg {
    font-size: 1.9rem;
    color: var(--success-text);
    font-weight: 700;
    line-height: 1.9rem;
}

.k-actions-lg {
    display: none !important;
}

/* 廚房模式 - 強制覆蓋 */
body.kitchen-theme {
    background-color: #000;
}

body.kitchen-theme #app-container {
    background-color: #000;
    color: #333;
}

body.kitchen-theme .modern-card,
body.kitchen-theme .kitchen-card-lg {
    background: var(--glass-bg);
    color: #333;
}

body.kitchen-theme .info-main,
body.kitchen-theme .k-main-lg {
    color: var(--text-dark);
}

body.kitchen-theme .info-sub,
body.kitchen-theme .k-sub-lg {
    color: var(--text-gray);
}

/* --- 智慧過濾樣式 --- */

/* 完全隱藏 (不符合條件的項目) */
.filter-hidden {
    display: none !important;
}

/* 鎖定淡化 (互斥選項，如已選白飯，黑米變淡) */
.filter-locked {
    opacity: 0.3;
    pointer-events: none;
    /* 禁止點擊 */
    filter: grayscale(1);
}






/* --- [New] POS Integration Styles (Option C - Performance Mode) --- */

/* 1. 右側欄位容器 */
.col-right-container {
    display: flex; flex-direction: column; height: 100%; overflow: hidden;
    position: relative;
}

.queue-tabs {
    display: flex; gap: 0.5rem; padding-bottom: 0.5rem; flex-shrink: 0;
}

/* 按鈕樣式 (移除過多的 transition 以節省效能) */
.queue-tab-btn {
    flex: 1; background: rgba(255, 255, 255, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.8); border-radius: var(--radius-sm);
    padding: 0.5rem; font-size: 1.2rem; font-weight: 700;
    color: var(--text-gray); box-shadow: 0 2px 4px rgba(0,0,0,0.05);
    position: relative;
}

.queue-tab-btn:active {
    background: #e2e8f0; /* 簡單的點擊變色回饋 */
}

.queue-tab-btn.active {
    background: var(--primary-color); color: white;
    border-color: var(--primary-color);
    box-shadow: 0 2px 4px rgba(33, 147, 176, 0.3);
}

.pos-badge {
    position: absolute; top: -5px; right: -5px;
    background: var(--danger-color); color: white;
    font-size: 0.8rem; min-width: 1.2rem; height: 1.2rem;
    border-radius: 50%; display: flex; align-items: center; justify-content: center;
    box-shadow: 0 1px 2px rgba(0,0,0,0.2); border: 2px solid white;
    z-index: 5;
}

.queue-content-area {
    flex: 1; overflow-y: auto; display: none; padding: 0 0.5rem 0.5rem;
    position: relative; min-height: 200px;
}
.queue-content-area.active { display: block; }

/* --- [Modified] 列表載入中效果 (高效能版) --- */

/* 當 #pos-list 加上 class="loading" 時觸發 */
#pos-list.loading {
    overflow: hidden; /* 禁止捲動 */
}

/* 1. 半透明遮罩 (純色，無模糊計算) */
#pos-list.loading::before {
    content: "";
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(255, 255, 255, 0.85); /* 提高不透明度遮住下方內容 */
    z-index: 10;
}

/* 2. 載入中文字提示 (靜態文字，無陰影與動畫) */
#pos-list.loading::after {
    content: "更新中";
    position: absolute; top: 40%; left: 50%;
    transform: translate(-50%, -50%);
    background: #444;
    color: #fff;
    padding: 10px 20px;
    border-radius: 6px;
    font-size: 1.4rem;
    font-weight: bold;
    z-index: 11;
    pointer-events: none;
}

/* --- POS 列表卡片標籤顏色 --- */
.pos-tag-uber { border-left-color: #06C167 !important; background: #f0fdf4 !important; }
.pos-tag-panda { border-left-color: #D70F64 !important; background: #fdf2f8 !important; }
.pos-tag-qr-out { border-left-color: var(--primary-color) !important; background: #f0f9ff !important; }
.pos-tag-qr-in { border-left-color: var(--warning-text) !important; background: #fffbeb !important; }

.pos-card-source {
    font-size: 1rem; color: var(--text-gray); font-weight: 500;
    display: flex; justify-content: space-between; width: 100%; margin-bottom: 2px;
}

/* --- Modal 與 Grid 樣式 (維持不變) --- */
.glass-modal-overlay {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.8); /* 純黑透明度，移除 blur */
    z-index: 9999;
    display: none; justify-content: center; align-items: center;
}

.glass-modal {
    width: 98%; height: 97%;
    background: #f1f5f9;
    border-radius: var(--radius-md);
    display: flex; flex-direction: column; overflow: hidden;
}

.glass-modal-header {
    padding: 0.8rem 1.5rem; background: #fff; border-bottom: 1px solid #ddd;
    display: flex; justify-content: space-between; align-items: center; flex-shrink: 0;
}
.modal-title { font-size: 1.8rem; font-weight: 800; color: var(--text-dark); }
.modal-close { font-size: 2.5rem; color: #999; background: none; line-height: 1; padding: 0 10px; border:none;}

.glass-modal-body {
    flex: 1; overflow-y: auto; padding: 1.5rem; background: #e2e8f0;
}

.glass-modal-footer {
    padding: 1rem 1.5rem; background: #fff; border-top: 1px solid #ddd; flex-shrink: 0; z-index: 10;
}

.btn-send-pos {
    background: #11998e; /* 移除漸層改純色 */
    color: white; font-size: 1.8rem; font-weight: 700;
    width: 100%; padding: 1rem; border-radius: var(--radius-md);
    border: none;
}
.btn-send-pos:active { background: #0e857b; transform: scale(0.99); }
.btn-send-pos:disabled { background: #ccc; cursor: not-allowed; }

.pos-note-box { 
    background: #fff3cd; color: #856404; padding: 12px; 
    border-radius: 8px; margin-bottom: 20px; font-weight: bold; 
    font-size: 1.3rem; border: 1px solid #ffeeba; 
}

.trans-row {
    display: grid; grid-template-columns: 62% 1fr; gap: 1rem; margin-bottom: 1rem;
}

.col-src {
    background: #fff; padding: 1rem; border-radius: var(--radius-md);
    border: 1px solid #cbd5e1; font-size: 1.2rem; color: #333;
}

.col-res { display: flex; flex-direction: column; gap: 0.8rem; }

.src-tags span {
    background: #f1f5f9; padding: 4px 8px; border-radius: 4px;
    font-size: 1rem; margin-right: 5px; display:inline-block; margin-bottom:4px;
    border: 1px solid #e2e8f0; color: #475569;
}

.modern-card.split { border-left-color: #9b59b6 !important; }
.modern-card.preview-card {
    margin-bottom: 0; cursor: default; height: auto; min-height: 5.625rem;
}