/* ══════════════════════════════════════════════════
   admin.css — babydodofun 管理後台共用框架
   ──────────────────────────────────────────────────
   設計基準：
     iPad 10.9"  橫向 ~1180×820 CSS px
     Samsung Tab S9 11" 橫向 ~1280×800 CSS px
     iPad Pro 12.9" 橫向 ~1366×1024 CSS px
   ══════════════════════════════════════════════════ */

*{-webkit-tap-highlight-color:transparent;box-sizing:border-box}
html,body{height:100%;overflow:hidden;margin:0}
body{font-size:1.125rem;font-family:system-ui,-apple-system,"Segoe UI",sans-serif;color:#171717;background:#fafafa}

/* ── Top Bar ───────────────────────────────────── */
.top-bar{position:fixed;top:0;left:0;right:0;z-index:50;height:56px;background:#fff;border-bottom:2px solid #e5e5e5;display:flex;align-items:stretch}
.top-bar-left{display:flex;align-items:center;gap:1.25rem;padding:0 1.25rem;flex-shrink:0}
.top-bar-brand{font-size:1.125rem;font-weight:700;letter-spacing:-.025em;color:#171717;text-decoration:none}
.top-bar-sep{color:#d4d4d4}
.top-bar-title{font-size:1.125rem;font-weight:600;color:#525252}
.top-bar-tabs{display:flex;align-items:stretch;margin-left:.5rem}
.top-tab{padding:0 1.5rem;font-size:1.0625rem;font-weight:500;color:#a1a1a1;background:transparent;border:none;border-bottom:3px solid transparent;cursor:pointer;font-family:inherit;margin-bottom:-2px;transition:all .12s;white-space:nowrap}
.top-tab:hover{color:#525252}
.top-tab.active{color:#171717;border-bottom-color:#171717;font-weight:700}
.top-bar-spacer{flex:1}
.top-bar-right{display:flex;align-items:center;gap:1rem;padding:0 1.25rem;flex-shrink:0}
.top-bar-admin{font-size:1rem;font-weight:500;color:#171717}
.top-bar-logout{font-size:.9375rem;color:#a1a1a1;text-decoration:none;padding:.5rem}
.top-bar-logout:hover{color:#171717}

/* ── Sidebar ───────────────────────────────────── */
.side{position:fixed;top:56px;left:0;bottom:0;width:64px;background:#fff;border-right:1px solid #e5e5e5;z-index:40;display:flex;flex-direction:column;align-items:center;padding-top:1rem;gap:.5rem}
.side-btn{width:56px;height:100px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;border:none;background:transparent;color:#a1a1a1;font-size:.75rem;font-weight:500;cursor:pointer;border-radius:0;text-decoration:none;transition:all .12s}
.side-btn:hover{color:#171717;background:#fafafa}
.side-btn.active{color:#171717;background:#f0f0f0}
.side-btn svg{width:26px;height:26px}

/* ── Main Layouts ──────────────────────────────── */

/* 有 numpad 的頁面：左內容 + 右 numpad
   在桌面瀏覽器限制最大寬度模擬平板比例 */
.main-split{position:fixed;top:56px;left:64px;right:0;bottom:0;display:flex;background:#fafafa}
.left-area{flex:1;display:flex;flex-direction:column;overflow:hidden;min-width:0}
.left-scroll{flex:1;overflow-y:auto}
.right-area{width:480px;flex-shrink:0;display:flex;flex-direction:column;background:#fff;border-left:1px solid #e5e5e5}

/* 無 numpad 的頁面：全寬 */
.main-full{position:fixed;top:56px;left:64px;right:0;bottom:0;display:flex;flex-direction:column;overflow:hidden;background:#fafafa}

/* ── Search Row ────────────────────────────────── */
.search-row{display:flex;gap:.5rem;padding:.75rem 1rem;background:#fff;border-bottom:1px solid #e5e5e5;flex-shrink:0}
.sf{flex:1;display:flex;flex-direction:column;gap:3px;min-width:0}
.sf-label{font-size:.8125rem;font-weight:600;color:#737373;padding-left:2px}
.sf-input{min-height:50px;font-size:1.125rem;border:2px solid #e5e5e5;padding:0 .75rem;font-family:inherit;outline:none;background:#fff;color:#171717;transition:border-color .12s}
.sf-input:focus{border-color:#171717}
.sf-input.np-active{border-color:#171717;background:#fffdf5}
.sf-input::placeholder{color:#c0c0c0}
.search-go{align-self:flex-end;min-width:76px;min-height:50px;background:#171717;color:#fff;border:none;font-size:1.0625rem;font-weight:600;cursor:pointer;font-family:inherit;flex-shrink:0}
.search-go:active{background:#262626}
.search-clear{align-self:flex-end;min-width:76px;min-height:50px;background:#fff;color:#737373;border:2px solid #e5e5e5;font-size:1.0625rem;font-weight:600;cursor:pointer;font-family:inherit;flex-shrink:0;transition:all .12s}
.search-clear:hover{color:#171717;border-color:#171717}
.search-clear:active{background:#f5f5f5}

/* ── Section / Card ────────────────────────────── */
.section{background:#fff;border-bottom:1px solid #e5e5e5;padding:1.125rem 1.25rem}
.section-title{font-size:1.25rem;font-weight:700;color:#171717;margin-bottom:.75rem}

/* ── Toolbar (logs, members) ──────────────────── */
.toolbar{display:flex;align-items:center;gap:.625rem;padding:.75rem 1.25rem;background:#fff;border-bottom:1px solid #e5e5e5;flex-wrap:wrap;flex-shrink:0}
.toolbar select,.toolbar input[type="date"]{min-height:50px;font-size:1.0625rem;border:1px solid #e5e5e5;padding:0 .75rem;background:#fff;font-family:inherit;color:#171717}
.toolbar select{min-width:120px;appearance:auto}
.toolbar input[type="date"]{width:160px}
.toolbar input[type="text"]{flex:1;min-width:180px;min-height:50px;font-size:1.0625rem;border:1px solid #e5e5e5;padding:0 .75rem;font-family:inherit;outline:none;color:#171717;background:#fff}
.toolbar input[type="text"]:focus{border-color:transparent;box-shadow:0 0 0 2px #171717}
.toolbar input[type="text"]::placeholder{color:#c0c0c0}
.toolbar-spacer{flex:1}
.t-sep{color:#d4d4d4;font-size:1rem;padding:0 2px}
.t-btn{min-height:50px;min-width:76px;font-size:1.0625rem;font-weight:600;border:none;cursor:pointer;padding:0 1.125rem;font-family:inherit}
.t-btn-primary{background:#171717;color:#fff}
.t-btn-primary:active{background:#262626}
.t-btn-outline{background:#fff;color:#525252;border:1px solid #e5e5e5}
.t-btn-outline:active{background:#f5f5f5}
.t-btn-outline svg{width:18px;height:18px;vertical-align:middle;margin-right:4px}

/* ── Member Badges ─────────────────────────────── */
.m-badge{display:inline-block;font-size:.875rem;font-weight:600;padding:4px 12px}
.m-badge-gold{background:#fefce8;color:#a36100;box-shadow:inset 0 0 0 1px rgba(205,137,0,.25)}
.m-badge-silver{background:#f0f0f0;color:#737373;box-shadow:inset 0 0 0 1px #d4d4d4}
.m-badge-black{background:#171717;color:#fff}
.m-badge-fan{background:#fff;color:#a1a1a1;box-shadow:inset 0 0 0 1px #e5e5e5}

/* ── Member Level Section Backgrounds ─────────── */
.section-lv-fan{background:#fff}
.section-lv-silver{background:#f7f7f7}
.section-lv-gold{background:#fffdf5}
.section-lv-black{background:#1a1a1a;color:#fff}
.section.section-lv-black dt{color:#a1a1a1}
.section.section-lv-black dd{color:#fff}
.section.section-lv-black .section-title{color:#fff}

/* ── Status Badges ─────────────────────────────── */
.st{display:inline-flex;align-items:center;justify-content:center;font-size:.875rem;font-weight:600;padding:4px 0;min-width:76px;text-align:center;white-space:nowrap}
.st-ok{background:#f0fdf4;color:#16a34a;box-shadow:inset 0 0 0 1px rgba(22,163,74,.2)}
.st-warn{background:#fffbeb;color:#d97706;box-shadow:inset 0 0 0 1px rgba(217,119,6,.2)}
.st-exp{background:#fef2f2;color:#dc2626;box-shadow:inset 0 0 0 1px rgba(220,38,38,.2)}

/* ── Info Grid (dt/dd pairs) ───────────────────── */
.info-grid{display:grid;grid-template-columns:auto 1fr;gap:.5rem 1rem;font-size:1.125rem}
.info-grid dt{color:#737373;font-weight:500;white-space:nowrap}
.info-grid dd{color:#171717;font-weight:600;margin:0}

/* ── Value Display (focusable field for numpad) ── */
.val-disp{min-height:60px;border:2px solid #e5e5e5;padding:0 1.125rem;display:flex;align-items:center;justify-content:flex-end;font-size:2rem;font-weight:700;cursor:pointer;transition:border-color .12s;user-select:none;background:#fff}
.val-disp:focus{outline:none}
.val-disp.np-active{border-color:#171717;background:#fffdf5}
.val-disp.np-active-red{border-color:#fb2c36;background:#fff5f5}
.val-disp .u{font-size:1rem;font-weight:400;color:#737373;margin-left:.5rem}

/* ── Numpad ────────────────────────────────────── */
.np-status{padding:1rem 1.25rem;border-bottom:1px solid #e5e5e5;font-size:1.0625rem;font-weight:600;color:#525252;display:flex;align-items:center;gap:.5rem;min-height:52px;flex-shrink:0}
.np-status-dot{width:10px;height:10px;border-radius:50%;flex-shrink:0}
.np-dot-idle{background:#a1a1a1}
.np-dot-num{background:#171717}
.np-dot-red{background:#fb2c36}
.np-dot-green{background:#16a34a}
.np-body{flex:1;display:flex;flex-direction:column;padding:.75rem}
.np{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;flex:1}
.np-k{font-size:2rem;font-weight:600;border:1px solid #e5e5e5;background:#fff;color:#171717;cursor:pointer;display:flex;align-items:center;justify-content:center;user-select:none;-webkit-user-select:none;transition:background .08s;font-family:inherit;min-height:0}
.np-k:active{background:#f0f0f0}
.np-k.w2{grid-column:span 2}
.np-k.clr{background:#f5f5f5;color:#737373}
.np-k.bksp{background:#f5f5f5;color:#737373;font-size:1.375rem}
.np-k.ok{grid-row:span 2;font-size:1.375rem;font-weight:700;line-height:1.4}
.np-k.ok-dark{background:#171717;color:#fff}
.np-k.ok-dark:active{background:#333}
.np-k.ok-red{background:#fb2c36;color:#fff}
.np-k.ok-red:active{background:#bf000f}
.np-k.ok-green{background:#16a34a;color:#fff}
.np-k.ok-green:active{background:#15803d}
/* 鍵盤切換 icon（狀態列右側） */
.np-kbd-btn{width:40px;height:40px;display:flex;align-items:center;justify-content:center;background:#f5f5f5;border:1px solid #e5e5e5;color:#a1a1a1;cursor:pointer;flex-shrink:0;transition:all .12s}
.np-kbd-btn:active{background:#e5e5e5}
.np-kbd-btn.np-kbd-active{background:#171717;color:#fff;border-color:#171717}
.np-kbd-btn.np-kbd-active:active{background:#333}
.np-kbd-btn.np-kbd-hidden{opacity:.25;pointer-events:none}

/* ── div 型搜尋欄位（不彈系統鍵盤） ───────────── */
.sf-div{display:flex;align-items:center;cursor:pointer;min-height:50px;font-size:1.125rem;user-select:none;-webkit-user-select:none}
.sf-div:focus{outline:none;border-color:#171717}
.sf-placeholder{color:#c0c0c0;pointer-events:none}
.sf-kbd-input{width:100%;height:100%;border:none;outline:none;font-size:1.125rem;font-family:inherit;background:transparent;color:#171717;padding:0}

/* ── Table ─────────────────────────────────────── */
.tbl-area{flex:1;overflow-y:auto;padding:0 1.25rem 1.25rem}
.tbl-wrap{background:#fff;border:1px solid #e5e5e5;margin-top:1rem}
table{width:100%;border-collapse:collapse}
th{background:#fafafa;font-size:1rem;font-weight:600;padding:.75rem 1rem;text-align:left;border-bottom:2px solid #e5e5e5;color:#525252;white-space:nowrap}
td{padding:.75rem 1rem;font-size:1.0625rem;border-bottom:1px solid #f0f0f0;color:#171717}
tr:hover td{background:#fafafa}

/* ── Pagination ────────────────────────────────── */
.pager{display:flex;justify-content:center;gap:.25rem;padding:1rem 0;flex-shrink:0}
.pg-btn{min-width:48px;min-height:48px;display:flex;align-items:center;justify-content:center;border:1px solid #e5e5e5;background:#fff;font-size:1.0625rem;cursor:pointer;color:#525252;font-family:inherit}
.pg-btn:hover{background:#fafafa}
.pg-btn.active{background:#171717;color:#fff;border-color:#171717;font-weight:700}

/* ── Modal ─────────────────────────────────────── */
.modal-bg{display:none;position:fixed;inset:0;z-index:100;background:rgba(0,0,0,.4);align-items:center;justify-content:center}
.modal-bg.show{display:flex}
.modal{background:#fff;width:min(480px,90vw);max-height:90vh;overflow-y:auto;position:relative}
.modal-head{display:flex;align-items:center;justify-content:space-between;padding:1.25rem 1.5rem;border-bottom:1px solid #e5e5e5}
.modal-head h2{font-size:1.25rem;font-weight:700;margin:0}
.modal-x{width:44px;height:44px;display:flex;align-items:center;justify-content:center;background:none;border:none;font-size:1.5rem;cursor:pointer;color:#a1a1a1}
.modal-x:hover{color:#171717}
.modal-body{padding:1.5rem}
.modal-foot{display:flex;gap:.5rem;justify-content:flex-end;padding:1.25rem 1.5rem;border-top:1px solid #e5e5e5}

/* ── Form ──────────────────────────────────────── */
.fg{margin-bottom:1rem}
.fg label{display:block;font-size:1rem;font-weight:500;margin-bottom:.375rem;color:#525252}
.fg input,.fg select{width:100%;min-height:50px;font-size:1.0625rem;border:1px solid #e5e5e5;padding:0 .75rem;font-family:inherit;background:#fff;color:#171717;box-sizing:border-box}
.fg input:focus,.fg select:focus{outline:none;border-color:transparent;box-shadow:0 0 0 2px #171717}

/* ── Buttons ───────────────────────────────────── */
.m-btn{min-height:50px;padding:0 1.5rem;font-size:1.0625rem;font-weight:600;border:none;cursor:pointer;font-family:inherit}
.m-btn-cancel{background:#fff;color:#525252;border:1px solid #e5e5e5}
.m-btn-primary{background:#171717;color:#fff}
.m-btn-primary:active{background:#262626}
.m-btn-danger{background:#dc2626;color:#fff}
.m-btn-danger:active{background:#b91c1c}

/* ── Action Dropdown ───────────────────────────── */
.act-wrap{position:relative;display:inline-block}
.act-btn{min-height:44px;padding:0 .875rem;font-size:.9375rem;font-weight:500;border:1px solid #e5e5e5;background:#fff;color:#525252;cursor:pointer;font-family:inherit}
.act-btn:active{background:#f5f5f5}
.act-menu{position:absolute;right:0;top:100%;z-index:20;background:#fff;border:1px solid #e5e5e5;min-width:170px;display:none;box-shadow:0 4px 12px rgba(0,0,0,.08)}
.act-menu.show{display:block}
.act-menu a{display:flex;align-items:center;padding:.75rem 1.125rem;font-size:1rem;color:#525252;text-decoration:none;min-height:48px;transition:background .1s}
.act-menu a:hover{background:#fafafa}
.act-menu a.danger{color:#dc2626}
.act-menu a.danger:hover{background:#fef2f2}

/* ── Risk Warning ──────────────────────────────── */
.risk-box{background:#fef2f2;border:1px solid rgba(220,38,38,.2);padding:1rem 1.25rem;margin:0 1.5rem 1rem}
.risk-box-title{font-weight:700;color:#dc2626;margin-bottom:.25rem}
.risk-box-text{font-size:1rem;color:#dc2626}

/* ── Misc ──────────────────────────────────────── */
.empty{padding:3rem;text-align:center;color:#a1a1a1;font-size:1.125rem}
.divider-or{display:flex;align-items:center;gap:1rem;color:#a1a1a1;font-size:1.0625rem;padding:.5rem 1.25rem}
.divider-or::before,.divider-or::after{content:'';flex:1;height:1px;background:#e5e5e5}
.panel{display:none}
.panel.active{display:block}

/* ── Detail/Toggle (logs) ──────────────────────── */
.toggle-btn{font-size:1rem;color:#737373;cursor:pointer;border:none;background:none;text-decoration:underline;padding:.375rem 0;min-height:48px}
.toggle-btn:hover{color:#171717}
.detail-row{display:none;background:#fafafa}
.detail-row.show{display:table-row}
.detail-content{padding:1rem 1.5rem}
.detail-label{font-size:.875rem;font-weight:500;color:#737373;margin-bottom:.125rem}
.detail-value{font-size:1rem;color:#171717;margin-bottom:.75rem}
.json-block{font-family:ui-monospace,monospace;font-size:.875rem;background:#fff;border:1px solid #e5e5e5;padding:.625rem .75rem;margin:.25rem 0 .75rem;white-space:pre-wrap;word-break:break-all}
.risk-reason{background:#fef2f2;border:1px solid rgba(220,38,38,.2);padding:.75rem;margin-top:.5rem}
.badge-normal{background:#f0f0f0;color:#737373;box-shadow:inset 0 0 0 1px #d4d4d4}
.badge-high{background:#fef2f2;color:#dc2626;box-shadow:inset 0 0 0 1px rgba(220,38,38,.25)}
.badge{display:inline-block;font-size:.875rem;font-weight:600;padding:4px 12px;white-space:nowrap;min-width:56px;text-align:center}
.badge-red{background:#fef2f2;color:#dc2626;box-shadow:inset 0 0 0 1px rgba(220,38,38,.2)}
.badge-green{background:#f0fdf4;color:#16a34a;box-shadow:inset 0 0 0 1px rgba(22,163,74,.2)}
.badge-blue{background:#eff6ff;color:#2563eb;box-shadow:inset 0 0 0 1px rgba(37,99,235,.2)}
.badge-gray{background:#f5f5f5;color:#737373;box-shadow:inset 0 0 0 1px #e5e5e5}
.m-badge-std{background:#fff;color:#a1a1a1;box-shadow:inset 0 0 0 1px #e5e5e5}

/* ── Table Wrapper ────────────────────────────── */
.t-wrap{overflow-x:auto;background:#fff;border:1px solid #e5e5e5}

/* ── Detail Expand (logs) ─────────────────────── */
.detail-tr{display:none;background:#fafafa}
.detail-tr.show{display:table-row}
.detail-tr td{padding:1rem 1.5rem}
.detail-flex{display:flex;gap:2rem;margin-bottom:.5rem}

/* ── Responsive: 小平板時 numpad 縮窄 ──────────── */
@media(max-width:960px){
  .right-area{width:360px}
}

/* ── Responsive: 直立平板 — numpad 置於下方 ────── */
@media(orientation:portrait),(max-width:820px){
  .main-split{flex-direction:column}
  .right-area{width:100%;height:300px;flex-shrink:0;border-left:none;border-top:1px solid #e5e5e5}
  .left-area{flex:1;min-height:0}
  /* numpad 內部：橫向排滿，壓縮高度 */
  .np-status{padding:.5rem 1rem;min-height:40px;font-size:.9375rem}
  .np-body{padding:.375rem}
  .np{gap:4px}
  .np-k{font-size:1.625rem;min-height:0}
}