/* X50Pay Adm 後台：Tocas UI v4 + 與 X50Pay 前台相同的 liquid glass 樣式 (取自 X50Pay_Go_Front static/css/style.css)
   後台固定亮色模式 (html.is-light)，不支援暗色 */

html { color-scheme: light; }

body {
    /* 手機版共用間距：外側 gutter / 卡片內側 inset */
    --adm-gutter: 16px;
    --adm-inset: 18px;
    --c-glass: #bbbbbc;
    --c-light: #fff;
    --c-dark: #000;
    --saturation: 170%;
    --glass-reflex-dark: 1;
    --glass-reflex-light: 1;
    --adm-accent: #f00764;
    --adm-bg-1: #ffd6e7;
    --adm-bg-2: #d7e8ff;
    --adm-bg-3: #fff3d6;
    /* 報表列底色 */
    --adm-row-point: #fcd5b4;
    --adm-row-deduct: #ffc7ce;
    --adm-row-total: #c6efce;
    --adm-row-sum: #ffffcc;
    --adm-row-cab: #eeece1;
    --adm-text-deduct: #9c0006;
    --adm-text-total: #006100;
    min-height: 100%;
    background:
        radial-gradient(60rem 40rem at -10% -10%, var(--adm-bg-1), transparent 60%),
        radial-gradient(50rem 40rem at 110% 0%, var(--adm-bg-2), transparent 60%),
        radial-gradient(50rem 40rem at 50% 120%, var(--adm-bg-3), transparent 60%),
        var(--ts-gray-50);
    background-attachment: fixed;
}


/* ---------- liquid glass ---------- */
.glass {
    position: relative;
    background-color: color-mix(in srgb, var(--c-glass) 15%, transparent) !important;
    backdrop-filter: blur(12px) saturate(var(--saturation));
    -webkit-backdrop-filter: blur(12px) saturate(var(--saturation));
    border: none;
    border-radius: 1.1rem;
    box-shadow: inset 0 0 0 1px
        color-mix(in srgb, var(--c-light) calc(var(--glass-reflex-light) * 10%), transparent), inset 0.8px 2.5px 0px -2px
        color-mix(in srgb, var(--c-light) calc(var(--glass-reflex-light) * 90%), transparent), inset -2.9px -0.5px 0px -2.4px
        color-mix(in srgb, var(--c-light) calc(var(--glass-reflex-light) * 90%), transparent), inset -4px -6.6px 3px -6px
        color-mix(in srgb, var(--c-light) calc(var(--glass-reflex-light) * 60%), transparent), inset -0.3px -1px 2px 0px
        color-mix(in srgb, var(--c-dark) calc(var(--glass-reflex-dark) * 8%), transparent), inset -1.5px 2.5px 0px -3px
        color-mix(in srgb, var(--c-dark) calc(var(--glass-reflex-dark) * 20%), transparent), inset 0px 3px 4px -2px
        color-mix(in srgb, var(--c-dark) calc(var(--glass-reflex-dark) * 20%), transparent), inset 4px -3px 1px -4px
        color-mix(in srgb, var(--c-dark) calc(var(--glass-reflex-dark) * 10%), transparent), 0px 1px 5px 0px
        color-mix(in srgb, var(--c-dark) calc(var(--glass-reflex-dark) * 10%), transparent), 0px 6px 16px 0px
        color-mix(in srgb, var(--c-dark) calc(var(--glass-reflex-dark) * 8%), transparent);
}

.basicglass {
    position: relative;
    background-color: color-mix(in srgb, var(--c-glass) 5%, transparent) !important;
    backdrop-filter: blur(8px) saturate(var(--saturation));
    -webkit-backdrop-filter: blur(8px) saturate(var(--saturation));
    border: none;
    border-radius: 1rem;
    box-shadow: inset 0 0 0 1px
        color-mix(in srgb, var(--c-light) calc(var(--glass-reflex-light) * 10%), transparent), inset 0.8px 2.5px 0px -2px
        color-mix(in srgb, var(--c-light) calc(var(--glass-reflex-light) * 70%), transparent), inset -2.9px -0.5px 0px -2.4px
        color-mix(in srgb, var(--c-light) calc(var(--glass-reflex-light) * 60%), transparent), inset -4.5px -6.6px 3px -6px
        color-mix(in srgb, var(--c-light) calc(var(--glass-reflex-light) * 30%), transparent), inset -0.3px -1px 2px 0px
        color-mix(in srgb, var(--c-dark) calc(var(--glass-reflex-dark) * 2%), transparent), inset -1.5px 2.5px 0px -3px
        color-mix(in srgb, var(--c-dark) calc(var(--glass-reflex-dark) * 10%), transparent), inset 0px 2.5px 2px -2px
        color-mix(in srgb, var(--c-dark) calc(var(--glass-reflex-dark) * 12%), transparent), 0px 1px 5px 0px
        color-mix(in srgb, var(--c-dark) calc(var(--glass-reflex-dark) * 5%), transparent), 0px 6px 16px 0px
        color-mix(in srgb, var(--c-dark) calc(var(--glass-reflex-dark) * 4%), transparent);
}

/* ---------- 按鈕：主要 ts-button.glass / 次要 ts-button.basic-glass ---------- */
.ts-button.glass,
.ts-button.basic-glass {
    color: var(--ts-gray-900) !important;
    font-weight: 600;
    border: none;
    text-shadow: 0 0 1px #fff, 0 0 10px rgba(255, 255, 255, .6);
    transition: transform .15s ease, background-color .2s ease;
}
.ts-button.glass:hover,
.ts-button.basic-glass:hover { transform: translateY(-1px); }
.ts-button.glass:active,
.ts-button.basic-glass:active { transform: scale(.98); }
.ts-button.glass.is-current,
.ts-button.glass.is-emphasis { color: var(--adm-accent) !important; }
.ts-button.glass.is-emphasis { background-color: color-mix(in srgb, #ffd54a 35%, transparent) !important; }

/* 次要按鈕，對應 X50Pay 前台的 .basicglassbtn */
.basic-glass {
    position: relative;
    background-color: color-mix(in srgb, var(--c-glass) 10%, transparent) !important;
    backdrop-filter: blur(2.5px) saturate(var(--saturation));
    -webkit-backdrop-filter: blur(2.5px) saturate(var(--saturation));
    border: none;
    border-radius: 1.5rem;
    box-shadow: inset 0 0 0 1px
        color-mix(in srgb, var(--c-light) calc(var(--glass-reflex-light) * 10%), transparent), inset 0.8px 2.5px 0px -2px
        color-mix(in srgb, var(--c-light) calc(var(--glass-reflex-light) * 60%), transparent), inset -2.9px -0.5px 0px -2.4px
        color-mix(in srgb, var(--c-light) calc(var(--glass-reflex-light) * 60%), transparent), inset -4px -6.6px 3px -6px
        color-mix(in srgb, var(--c-light) calc(var(--glass-reflex-light) * 40%), transparent), inset -0.3px -1px 2px 0px
        color-mix(in srgb, var(--c-dark) calc(var(--glass-reflex-dark) * 8%), transparent), inset -1.5px 2.5px 0px -3px
        color-mix(in srgb, var(--c-dark) calc(var(--glass-reflex-dark) * 8%), transparent), inset 0px 3px 4px -2px
        color-mix(in srgb, var(--c-dark) calc(var(--glass-reflex-dark) * 8%), transparent), inset 4px -3px 1px -4px
        color-mix(in srgb, var(--c-dark) calc(var(--glass-reflex-dark) * 4%), transparent), 0px 1px 5px 0px
        color-mix(in srgb, var(--c-dark) calc(var(--glass-reflex-dark) * 4%), transparent), 0px 6px 16px 0px
        color-mix(in srgb, var(--c-dark) calc(var(--glass-reflex-dark) * 3%), transparent);
}
.ts-button.basic-glass { font-weight: 500; color: var(--ts-gray-700) !important; }
.ts-button.glass:disabled,
.ts-button.basic-glass:disabled { opacity: .5; transform: none; cursor: not-allowed; }

.ts-box { border-radius: 1rem; }
.ts-icon::before { vertical-align: middle; }

/* ---------- 版面 ---------- */
.adm-shell {
    display: flex;
    min-height: 100vh;
    gap: 1rem;
    padding: 1rem;
}
.adm-sidebar {
    position: sticky;
    top: 1rem;
    width: 240px;
    flex-shrink: 0;
    height: calc(100vh - 2rem);
    overflow-x: hidden;
    overflow-y: auto;
    padding: .75rem .5rem;
    scrollbar-width: none;
}
.adm-sidebar::-webkit-scrollbar { display: none; }
.adm-sidebar .ts-app-sidebar .item.adm-logout { color: var(--ts-negative-500); }
.adm-sidebar .ts-app-sidebar {
    background: transparent !important;
    border: 0;
    width: 100%;
    min-width: 0;
    padding: 0;
}
.adm-sidebar .ts-app-sidebar .item { border-radius: .75rem; }
.adm-sidebar .ts-app-sidebar .item.is-active {
    color: var(--ts-gray-900);
    font-weight: 600;
    background: color-mix(in srgb, var(--adm-accent) 22%, transparent);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--adm-accent) 35%, transparent);
}
.adm-sidebar .ts-app-sidebar .item.is-active .ts-icon { color: var(--adm-accent); }
.adm-brand {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .25rem .75rem .75rem;
}
.adm-brand img { width: 36px; height: 36px; border-radius: 50%; }
.adm-main {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
/* topbar：與 X50Pay 前台 navbar 相同，透明列上放浮動的圓形 / 膠囊玻璃元件 */
.adm-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    position: sticky;
    top: 1rem;
    z-index: 10;
    pointer-events: none;
}
.adm-topbar > * { pointer-events: auto; }
.adm-topbar-end { display: flex; align-items: center; gap: 8px; }
.adm-orb {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 2.5px;
    border-radius: 50px !important;
    cursor: pointer;
    color: var(--ts-gray-800);
    text-decoration: none;
    transition: transform .15s ease;
}
.adm-orb:hover { transform: scale(1.05); }
.adm-orb .ts-avatar { width: 34px; height: 34px; border: 0; margin: 0; }
.adm-orb.is-icon { width: 34px; height: 34px; font-size: 14px; }
.adm-pill {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    height: 40px;
    padding: 0 16px 0 14px;
    border-radius: 50px !important;
    font-size: 14px;
    font-weight: 500;
    color: var(--ts-gray-800);
    max-width: 60vw;
}
.adm-pill-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* 預設檢視區域切換 (全區的管理員) */
.adm-region { position: relative; cursor: pointer; padding-right: 12px; }
.adm-region select { appearance: none; -webkit-appearance: none; border: 0; background: transparent; font: inherit; color: inherit; padding: 0 1.1rem 0 0; cursor: pointer; outline: none; }
.adm-region .adm-region-caret { position: absolute; right: 12px; font-size: .7em; pointer-events: none; opacity: .6; }
.adm-content { display: flex; flex-direction: column; gap: 1rem; }
.adm-footer { text-align: center; padding: .5rem 0 1rem; }
.adm-backdrop { display: none; }

@media (max-width: 960px) {
    /* 手機：外側 gutter 與 X50Pay 前台 navbar 相同 16px，topbar 與卡片邊緣對齊 */
    .adm-shell { padding: 12px var(--adm-gutter); }
    .adm-sidebar {
        position: fixed;
        z-index: 30;
        left: var(--adm-gutter);
        top: 12px;
        height: calc(100vh - 24px);
        max-width: calc(100vw - 2 * var(--adm-gutter));
        transform: translateX(-120%);
        transition: transform .25s ease;
    }
    .adm-shell.is-nav-open .adm-sidebar { transform: none; }
    .adm-shell.is-nav-open .adm-backdrop {
        display: block;
        position: fixed;
        inset: 0;
        z-index: 20;
        /* 淡白霧面：不讓整個畫面變黑，選單的 glass 模糊的是內容而不是灰色遮罩 */
        background: rgba(255, 255, 255, .18);
        backdrop-filter: blur(3px);
        -webkit-backdrop-filter: blur(3px);
    }
    .adm-topbar { top: 12px; }

    /* 卡片 / 表格 / 提示的內側左右 padding 一律 --adm-inset，內文起點一致 */
    .adm-content .ts-content,
    .adm-content .ts-notice {
        padding-left: var(--adm-inset) !important;
        padding-right: var(--adm-inset) !important;
    }
    .adm-content .ts-table tr > :first-child { padding-left: var(--adm-inset) !important; }
    .adm-content .ts-table tr > :last-child { padding-right: var(--adm-inset) !important; }
    .adm-content .ts-table tr > :only-child { padding-left: var(--adm-inset) !important; padding-right: var(--adm-inset) !important; }
    .adm-content, .adm-stats { gap: 12px; }
}

/* ---------- 共用元件 ---------- */
.adm-card { padding: 1.25rem; }
.adm-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 1rem;
}
.adm-form {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: .75rem 1rem;
}
.adm-field { display: flex; flex-direction: column; gap: .25rem; }
.adm-field.is-wide { grid-column: 1 / -1; }
.adm-actions { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1rem; }
.adm-scan input { font-size: 1.4rem; }
.adm-table-wrap { overflow-x: auto; border-radius: .75rem; }
.adm-table-wrap .ts-table { background: transparent; }
.adm-pic { max-height: 60vh; object-fit: contain; }

/* ---------- 首頁趨勢圖 ---------- */
.adm-chart-head { display: flex; align-items: flex-start; justify-content: space-between; gap: .75rem; flex-wrap: wrap; margin-bottom: .75rem; }
.adm-chart-controls { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.adm-seg { display: inline-flex; gap: 6px; }
.adm-chart { position: relative; width: 100%; }
.adm-chart-state:empty { display: none; }
.adm-chart-table { margin-top: .5rem; }
.adm-chart-table summary { cursor: pointer; color: var(--ts-gray-600); font-size: .85rem; }
.adm-chart-table[open] summary { margin-bottom: .5rem; }
.adm-chart-table .ts-table { background: #fff; }

/* 熱門時段方塊圖：日期 × 24 小時，單一藍色漸層 (0 為淺灰) */
.adm-heat-wrap { overflow-x: auto; overflow-y: hidden; padding-bottom: 4px; }
.adm-heat {
    --cell: 14px;
    display: grid;
    grid-template-columns: 3.4em repeat(var(--cols, 24), var(--cell));
    grid-auto-rows: var(--cell);
    gap: 3px;
    width: max-content;
    font-size: 11px;
    line-height: var(--cell);
    color: var(--ts-gray-600);
}
.adm-heat-label { white-space: nowrap; font-variant-numeric: tabular-nums; overflow: visible; }
.adm-heat-label.is-top { text-align: left; }
.adm-heat-label.is-sum { font-weight: 600; color: var(--ts-gray-800); margin-left: 6px; }
.adm-heat-cell { width: var(--cell); height: var(--cell); border-radius: 3px; }
.adm-heat-cell.is-sum { margin-left: 6px; }
.adm-heat-cell.h0, .adm-heat-scale .h0 { background: #ebedf0; }
.adm-heat-cell.h1, .adm-heat-scale .h1 { background: #cde2fb; }
.adm-heat-cell.h2, .adm-heat-scale .h2 { background: #86b6ef; }
.adm-heat-cell.h3, .adm-heat-scale .h3 { background: #3987e5; }
.adm-heat-cell.h4, .adm-heat-scale .h4 { background: #1c5cab; }
.adm-heat-cell.h5, .adm-heat-scale .h5 { background: #0d366b; }
.adm-heat-cell:hover { outline: 2px solid var(--ts-gray-800); outline-offset: 1px; }
.adm-heat-legend { display: flex; justify-content: space-between; align-items: center; gap: .5rem; flex-wrap: wrap; margin-top: .6rem; }
.adm-heat-scale { display: inline-flex; align-items: center; gap: 3px; }
.adm-heat-scale i { display: inline-block; width: 11px; height: 11px; border-radius: 2px; }
/* 熱門時段右側分析：寬螢幕與方塊圖並排，窄螢幕排在方塊圖下方 */
.adm-heat-body { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 1.25rem 2rem; align-items: start; }
.adm-heat-main { min-width: 0; }
.adm-heat-body .adm-heat-wrap { padding-right: 22px; }
.adm-heat-side:empty { display: none; }
.adm-heat-side { display: flex; flex-direction: column; gap: 1rem; min-width: 0; }
.adm-heat-secs { display: flex; flex-direction: column; gap: .75rem; }
/* 摺疊段落：與卡片同色的淡底膠囊標題，右側箭頭 */
.adm-heat-fold { border-radius: 1.1rem; background: color-mix(in srgb, var(--c-glass) 8%, transparent); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .6); padding: .7rem 1.1rem; }
.adm-heat-fold > summary:focus { outline: none; }
.adm-heat-fold > summary:focus-visible { outline: 2px solid var(--ts-primary-500); outline-offset: 4px; border-radius: .6rem; }
.adm-heat-fold > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: .3rem; margin: 0; }
.adm-heat-fold > summary::-webkit-details-marker { display: none; }
.adm-heat-fold > summary::after { content: "\f078"; font-family: Icons; font-weight: 900; font-size: .7rem; margin-left: auto; color: var(--ts-gray-500); transition: transform .2s; }
.adm-heat-fold[open] > summary::after { transform: rotate(180deg); }
.adm-heat-fold[open] > summary { margin-bottom: .6rem; }
.adm-heat-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .6rem; }
@media (max-width: 700px) { .adm-heat-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.adm-heat-tile { min-width: 0; padding: .7rem 1rem; border-radius: 1.1rem; background: color-mix(in srgb, var(--c-glass) 12%, transparent); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .6); }
.adm-heat-num { font-size: 1.05rem; font-weight: 600; color: var(--ts-gray-900); font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.adm-heat-sub { font-size: .75rem; color: var(--ts-gray-600); font-variant-numeric: tabular-nums; white-space: nowrap; }
.adm-heat-sec-title { font-weight: 600; color: var(--ts-gray-800); margin-bottom: .35rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.adm-hbars { display: flex; flex-direction: column; gap: 4px; }
.adm-hbar { display: grid; grid-template-columns: minmax(4.5em, 9em) minmax(2.5em, 1fr) max-content; align-items: center; gap: .5rem; font-size: .8rem; line-height: 1.5; }
.adm-hbar-name { display: flex; min-width: 0; white-space: nowrap; color: var(--ts-gray-800); }
.adm-hbar-name .nm { overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.adm-hbar-name .no { flex: none; margin-left: .3em; }
.adm-hbar-track { height: 6px; border-radius: 99px; background: #ebedf0; overflow: hidden; }
.adm-hbar-track i { display: block; height: 100%; border-radius: 99px; background: #3987e5; }
.adm-hbar-val { color: var(--ts-gray-600); font-variant-numeric: tabular-nums; text-align: right; min-width: 3.2em; font-size: .78rem; }
@media (max-width: 1100px) {
    .adm-heat-body { grid-template-columns: minmax(0, 1fr); }
}

/* 日 / 月帳務表：舊版格式，不著色 */
.adm-ledger { table-layout: fixed; width: 100%; }
.adm-table-wrap .ts-table.adm-ledger { background: #fff; }
.adm-ledger th.is-title { text-align: center; font-size: 1rem; }
.adm-ledger tr.is-total td { font-weight: 600; }
.adm-ledger td { font-variant-numeric: tabular-nums; }
/* 儲值總計 / 線下投幣 / 點數消耗：任何寬度都維持單行三欄 */
.adm-summary th, .adm-summary td { white-space: nowrap; text-align: center; }
.adm-summary td { font-size: 1.25rem; font-weight: 600; }
@media (max-width: 480px) {
    .adm-ledger th, .adm-ledger td { padding: .35rem .4rem !important; font-size: .8rem; }
    .adm-summary th { font-size: .72rem; }
    .adm-summary td { font-size: 1rem; }
    .adm-ledger th.is-title { font-size: .85rem; white-space: normal; }
}

/* 拆帳列印報表 (預覽 / XLSX / PDF) 才著色 */
.adm-report td, .adm-report th { background: transparent; }
.adm-report tr.is-point td { background: var(--adm-row-point); }
.adm-report tr.is-deduct td { background: var(--adm-row-deduct); color: var(--adm-text-deduct); }
.adm-report tr.is-total td { background: var(--adm-row-total); color: var(--adm-text-total); font-weight: 500; }
.adm-report tr.is-sum td { background: var(--adm-row-sum); }
.adm-report td.is-cab { background: var(--adm-row-cab); text-align: center; vertical-align: middle; font-weight: 500; }
.adm-report .is-amount { text-align: right; font-variant-numeric: tabular-nums; }
.adm-report.is-settle { table-layout: fixed; }

/* 登入 / 錯誤頁 */

@media print {
    body { background: #fff; }
    .adm-sidebar, .adm-topbar, .adm-no-print, .adm-footer { display: none !important; }
    .adm-shell { padding: 0; }
    .glass, .basicglass { box-shadow: none !important; backdrop-filter: none !important; background: transparent !important; }
}

/* ---------- 可摺疊區塊：<div class="adm-fold" id="..."> <button class="adm-fold-head">標題</button> <div class="adm-fold-body">…</div> ----------
   狀態依 id 記在 localStorage (main.html)，下次開啟維持上次的展開 / 收合 */
.adm-fold-head {
    display: flex; align-items: center; gap: .6rem; width: 100%;
    padding: 1rem 1.25rem; border: none; background: transparent; cursor: pointer;
    font: inherit; font-size: 1.05rem; font-weight: 700; color: var(--ts-gray-800); text-align: left;
}
.adm-fold-head .adm-fold-sub { font-size: .82rem; font-weight: 500; color: var(--ts-gray-500); }
.adm-fold-head::after {
    content: ""; margin-left: auto; width: .55rem; height: .55rem; flex-shrink: 0;
    border-right: 2px solid var(--ts-gray-500); border-bottom: 2px solid var(--ts-gray-500);
    transform: rotate(45deg); transition: transform .2s ease;
}
.adm-fold.is-closed > .adm-fold-head::after { transform: rotate(-45deg); }
.adm-fold > .adm-fold-body { border-top: 1px solid var(--ts-gray-200); }
.adm-fold.is-closed > .adm-fold-body { display: none; }
@media (max-width: 960px) { .adm-fold-head { padding: 1rem var(--adm-inset); } }

/* ---------- 內頁：與 X50Pay 前台相同的規範 (按鈕 / 表單 / 彈窗 / 提示) ---------- */
/* 卡片圓角與前台卡片相同；圓角加大後內容離邊緣也要多一點 */
.ts-box.glass, .ts-box.basicglass { border-radius: 1.8rem; }
.ts-box.glass > .ts-content,
.ts-box.basicglass > .ts-content,
.ts-box.glass > .adm-fold-body > .ts-content,
.ts-modal > .content > .ts-content { padding: 1.35rem 1.6rem; }
.ts-box.glass > .adm-fold-head { padding: 1.15rem 1.6rem; }

/* 紅字玻璃按鈕：刪除 / 取消 / 停用等 (前台 .x50-red) */
.ts-button.glass.is-negative,
.ts-button.basic-glass.is-negative { color: red !important; }
.ts-button.basic-glass.is-icon,
.ts-button.glass.is-icon { border-radius: 100rem; }

/* 彈窗：淡白霧面遮罩 + 玻璃卡片 (前台 .ts-modal / .modalglass) */
.ts-modal {
    background: rgba(255, 255, 255, .2) !important;
    backdrop-filter: blur(6px) saturate(1.2);
    -webkit-backdrop-filter: blur(6px) saturate(1.2);
}
.ts-modal > .content.glass {
    border-radius: 1.8rem;
    background-color: color-mix(in srgb, #fff 62%, transparent) !important;
    max-width: 100%;
}
.glassclose {
    color: var(--ts-gray-700);
    border-radius: 99rem !important;
    width: 32px;
    height: 32px;
    font-size: 16px;
    flex: none;
}

/* 輸入框 / 下拉選單 / 檔案：灰底、底線、圓角 (前台 is-underlined is-circular) */
.ts-input { --border-radius: 1.8rem; }
.ts-input input,
.ts-input textarea,
.ts-textarea textarea,
.ts-file input {
    background: var(--ts-gray-100);
    border: 2px solid transparent;
    border-bottom: 2px solid var(--ts-gray-300);
}
.ts-input input:focus,
.ts-input textarea:focus,
.ts-textarea textarea:focus { border-color: transparent; border-bottom-color: var(--ts-primary-600); }
.ts-input textarea,
.ts-textarea textarea { border-radius: 1.1rem; }
.ts-textarea { display: flex; width: 100%; }
.ts-textarea textarea {
    width: 100%;
    box-sizing: border-box;
    padding: .55rem 1rem;
    font: inherit;
    font-size: var(--ts-font-size-14px);
    line-height: 1.5;
    color: var(--ts-gray-800);
    outline: none;
    resize: vertical;
}
.ts-input:is(.is-start-labeled, .is-end-labeled, .is-labeled) .label {
    background: var(--ts-gray-200);
    border: 0;
    border-bottom: 2px solid var(--ts-gray-300);
}
.ts-input.is-disabled input { opacity: .6; }
.ts-select {
    background: var(--ts-gray-100);
    border: 2px solid transparent;
    border-bottom: 2px solid var(--ts-gray-300);
    border-radius: 1.8rem;
}
.ts-select select { border-radius: 1.8rem; }
.ts-select:focus-within { border-bottom-color: var(--ts-primary-600); }
.ts-file input { border-radius: 1.8rem; }
.ts-file input::file-selector-button { border-radius: 1.8rem; background: var(--ts-gray-200); }
.ts-file input::-webkit-file-upload-button { border-radius: 1.8rem; background: var(--ts-gray-200); }

/* 提示 */
.ts-notice { border-radius: 1.2rem; }
/* 玻璃提示：淺色卡片上內文改深色才看得清楚 */
.ts-notice.glass { color: var(--ts-gray-800); }
.ts-notice.glass .content { color: var(--ts-gray-800); }

/* ---------- 智慧熱區 (機台頁卡片 / 設定頁) ---------- */
.sz-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; }
.sz-switch { flex: none; margin-top: .2rem; white-space: nowrap; }
.sz-chip { display: inline-block; font-size: .75rem; font-weight: 500; padding: .1rem .6rem; border-radius: 99px; vertical-align: 2px; margin-left: .35rem; white-space: nowrap; }
.sz-chip.is-on { background: #d6f2e5; color: #0f6e56; }
.sz-chip.is-off { background: var(--ts-gray-200); color: var(--ts-gray-700); }
.sz-chip.is-warn { background: #fdeccc; color: #854f0b; }
.sz-meta { font-size: .85rem; color: var(--ts-gray-600); }
.sz-ok { color: #0f6e56; font-weight: 500; }
.sz-bar-head { display: flex; justify-content: space-between; align-items: center; gap: .75rem; flex-wrap: wrap; margin: 1rem 0 .6rem; }
.sz-heat { background: transparent; }
.sz-hist { margin-top: 1rem; }
.sz-hist > summary { cursor: pointer; color: var(--ts-gray-700); font-size: .9rem; margin-bottom: .5rem; }
.sz-hist-txt { font-size: .8rem; line-height: 1.5; }
.sz-form { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
.sz-form .ts-input .label { white-space: nowrap; }

/* ---------- 登入頁 / 錯誤頁：與 X50Pay 前台登入頁相同的設計 (圓形 logo + 玻璃卡片)，整頁同一底色、內容置中 ---------- */
.adm-login-body { background: var(--ts-gray-50); }
.adm-login {
    max-width: 480px;
    min-height: 100vh;
    margin: 0 auto;
    padding: 24px 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.adm-login-avatar { display: flex; justify-content: center; }
.adm-login-avatar .ts-box { border-radius: 50px; padding: 2px; }
.adm-login-avatar .ts-avatar { width: 64px; height: 64px; margin: 0; }
.adm-login-card { margin: 22px 16px 14px 18px; padding: 18px; border-radius: 1.8rem; }
.adm-login-card .ts-text.is-label { padding-left: 3px; }
.adm-login-card .ts-input input { border-radius: 1.8rem; }
.adm-login-btn { height: 42px; }
.adm-login-copy { margin-top: 18px; padding: 0 16px; }
.adm-login-notice { border-radius: 1.8rem; }

/* ---------- 排隊管理 (/pad) ---------- */
.pad-head { display: flex; align-items: center; justify-content: space-between; gap: .75rem; flex-wrap: wrap; }
.pad-tabs { display: flex; gap: .4rem; flex-wrap: wrap; }
.pad-tabs .ts-button.is-active { color: var(--adm-accent) !important; font-weight: 600; }
.pad-section { margin: 1.4rem 0 .6rem; font-weight: 600; color: var(--ts-gray-600); }
.pad-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 1rem; }
.pad-card { display: block; color: inherit; text-decoration: none; border-radius: 1.8rem !important; transition: transform .15s; }
.pad-card:hover { transform: translateY(-2px); }
.pad-card-head { display: flex; align-items: center; justify-content: space-between; gap: .5rem; padding: 1.1rem 1.4rem .6rem; }
.pad-card-title { font-weight: 700; font-size: 1.05rem; }
.pad-card-sub { font-size: .8rem; color: var(--ts-gray-500); }
.pad-lane { display: grid; grid-template-columns: 6.5rem 1fr auto; align-items: center; gap: .6rem; padding: .55rem 1.4rem; border-top: 1px solid var(--ts-gray-200); }
.pad-lane:last-child { padding-bottom: 1rem; }
.pad-lane-name { font-weight: 600; font-size: .9rem; }
.pad-now { display: flex; align-items: baseline; min-width: 0; white-space: nowrap; }
.pad-now > b { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.pad-now .pad-timer { flex-shrink: 0; }
.pad-now.is-empty { color: var(--ts-gray-400); }
.pad-count { font-size: .85rem; color: var(--ts-gray-600); white-space: nowrap; }
.pad-timer { font-variant-numeric: tabular-nums; font-size: .8rem; color: var(--ts-gray-500); margin-left: .35rem; }
.pad-timer.is-late { color: red; }
.pad-chip { display: inline-flex; align-items: center; gap: .25rem; padding: .1rem .6rem; border-radius: 99px; font-size: .78rem; white-space: nowrap; background: rgba(0, 0, 0, .05); }
.pad-chip.is-on { color: #1a7f37; background: rgba(26, 127, 55, .1); }
.pad-chip.is-off { color: var(--ts-gray-500); }
.pad-chip.is-unknown { color: var(--ts-gray-400); }
.pad-chip.is-wait { color: #d1242f; background: rgba(209, 36, 47, .08); }
.pad-chip.is-pref { color: var(--ts-gray-600); }
.pad-chip.is-adm { color: #8250df; background: rgba(130, 80, 223, .08); }
.pad-chips { display: inline-flex; gap: .3rem; flex-wrap: wrap; justify-content: flex-end; }
.pad-conns { margin-top: .9rem; overflow-x: auto; -webkit-overflow-scrolling: touch; width: 0; min-width: 100%; }
.pad-conns td { vertical-align: middle; white-space: nowrap; }
.pad-conns .is-ua { color: var(--ts-gray-500); font-size: .78rem; white-space: normal; word-break: break-all; }
.pad-goto { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; margin-top: .9rem; padding: .9rem 1.1rem; border-radius: 1.2rem; background: rgba(0, 0, 0, .03); }
.pad-goto[hidden] { display: none; }
.pad-facts { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: .35rem 1rem; margin-top: .6rem; font-size: .88rem; }
.pad-facts .k { color: var(--ts-gray-500); margin-right: .45rem; font-size: .8rem; }
.pad-facts > div { min-width: 0; overflow-wrap: anywhere; }
.pad-facts > .is-wide { grid-column: 1 / -1; }
/* iPad 詳細區塊放在清單表格的 td 裡，不要繼承 .pad-conns td 的 nowrap (長的型號會蓋到隔壁欄位) */
.pad-conns .pad-mdm-step { white-space: normal; }
.pad-mdm-detail { margin-top: .9rem; }
.pad-conns tr.is-open td { background: rgba(240, 7, 100, .04); }
.pad-mdm-step { margin-top: .9rem; padding: .9rem 1.1rem; border-radius: 1.2rem; background: rgba(0, 0, 0, .03); }
.pad-mdm-step .pad-add-row { margin-top: .5rem; }
.pad-mdm-step .ts-input, .pad-mdm .pad-add-row .ts-input { width: 220px; max-width: 100%; }
.pad-mdm-steps > summary { cursor: pointer; margin-top: .8rem; color: var(--ts-gray-600); font-size: .9rem; }
.pad-mdm-url { font-family: ui-monospace, monospace; font-size: .8rem; word-break: break-all; user-select: all; }
.pad-goto .ts-select { min-width: 220px; }
.pad-nowbox { display: flex; align-items: center; gap: .9rem; flex-wrap: wrap; padding: .9rem 1.1rem; border-radius: 1.2rem; background: rgba(214, 233, 255, .45); }
.pad-nowbox .ts-avatar { width: 44px; height: 44px; }
.pad-nowbox-name { font-size: 1.15rem; font-weight: 700; }
.pad-nowbox-main { flex: 1; min-width: 10rem; }
.pad-actions { display: flex; gap: .4rem; flex-wrap: wrap; }
.pad-qtable td { vertical-align: middle; }
.pad-qtable th { white-space: nowrap; }
.pad-qtable .pad-pos { width: 3.2rem; font-variant-numeric: tabular-nums; color: var(--ts-gray-500); }
.pad-past { display: flex; gap: .35rem; flex-wrap: wrap; margin-top: .4rem; }
.pad-stats { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: .8rem; }
.pad-stat { padding: .9rem 1.1rem; border-radius: 1.2rem; }
.pad-stat .v { font-size: 1.45rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.pad-stat .k { font-size: .8rem; color: var(--ts-gray-500); }
.pad-bars { display: grid; grid-template-columns: repeat(24, 1fr); align-items: end; gap: 3px; height: 120px; margin-top: .6rem; }
.pad-bars > div { background: var(--adm-accent); opacity: .75; border-radius: 4px 4px 0 0; min-height: 2px; }
.pad-bars-x { display: grid; grid-template-columns: repeat(24, 1fr); gap: 3px; font-size: .68rem; color: var(--ts-gray-400); text-align: center; }
.pad-filter { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: .7rem; align-items: end; }
.pad-warn { color: #d1242f; font-size: .85rem; margin: .2rem 0; }
.pad-ok { color: #1a7f37; font-size: .85rem; }
.pad-num { width: 5.5rem; }
.pad-add { margin-top: .9rem; padding: 1rem 1.1rem; border-radius: 1.2rem; background: rgba(0, 0, 0, .03); }
.pad-add-row { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; margin-top: .55rem; }
.pad-add-row:first-child { margin-top: 0; }
.pad-add-label { font-size: .8rem; color: var(--ts-gray-500); min-width: 3.2rem; }
.pad-add .pad-chip { cursor: pointer; padding: .25rem .75rem; font-size: .85rem; }
.pad-add .pad-chip:hover { background: rgba(240, 7, 100, .1); color: var(--adm-accent); }
.pad-add .pad-chip[disabled] { cursor: default; opacity: .45; }
.pad-add-msg { font-size: .85rem; margin-top: .55rem; min-height: 1.2em; }
.pad-add .ts-input { width: 260px; max-width: 100%; }
.pad-move { width: auto; }
@media (max-width: 640px) {
    .pad-lane { grid-template-columns: 5rem 1fr; }
    .pad-lane .pad-count { grid-column: 2; }
}

/* 平板設定 (padinfo.html) */
.pi-banner { position: relative; min-height: 120px; display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; padding: 1rem 1.4rem;
    border-radius: 1.8rem 1.8rem 0 0; background: #333 center / cover no-repeat; color: #fff; }
.pi-banner.is-preview { border-radius: 1rem; margin-top: .8rem; min-height: 110px; }
.pi-banner .ts-button { background: rgba(255, 255, 255, .85) !important; }
.pi-mid { font-size: 1.3rem; font-weight: 700; text-shadow: 0 0 6px rgba(0, 0, 0, .6); }
.pi-shop { font-size: .85rem; opacity: .9; text-shadow: 0 0 4px rgba(0, 0, 0, .6); }
.pi-thumb { width: 72px; height: 44px; border-radius: .5rem; object-fit: cover; display: block; background: var(--ts-gray-200); }
.pi-thumb.is-empty { display: flex; align-items: center; justify-content: center; font-size: .75rem; color: var(--ts-gray-500); }
.pi-form { display: grid; grid-template-columns: minmax(180px, 1fr) minmax(240px, 2fr); gap: .8rem 1rem; margin-top: .6rem; }
.pi-mid-text { font-weight: 700; font-size: 1.1rem; padding-top: .3rem; }
.pi-lanes td { vertical-align: middle; }
/* 每張平板卡的欄寬一致 */
.pi-list th:nth-child(1) { width: 96px; }
.pi-list th:nth-child(2) { width: 200px; }
.pi-list th:nth-child(4) { width: 80px; }
.pi-lanes .ts-input { min-width: 9rem; }
@media (max-width: 640px) { .pi-form { grid-template-columns: 1fr; } }